/* ── Page groupe — habillage "glass" repris de la maquette Stitch ── */
:root {
    --groupe-base:    #0B111E;
    --groupe-card:    #111827;
    --groupe-surface: #151F32;
    --groupe-hover:   #1B273D;
    --groupe-border:  rgba(255, 255, 255, .08);
}

.groupe-glass-panel {
    background: rgba(17, 24, 39, .75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--groupe-border);
}

.groupe-glass-panel--info { border-color: rgba(59, 130, 246, .2); }

.groupe-glass-banner {
    background: linear-gradient(180deg, rgba(11, 17, 30, .4) 0%, rgba(11, 17, 30, .95) 100%);
}

.groupe-container { max-width: 1280px; }

.groupe-glow-orange {
    box-shadow: 0 0 20px -3px rgba(249, 115, 22, .25);
}

.groupe-accent-bar {
    width: .5rem;
    height: 1rem;
    border-radius: .125rem;
    background: #f97316;
    flex-shrink: 0;
}
.groupe-accent-bar--muted { background: #475569; }

/* Fond de bannière quand le groupe n'a pas d'image de couverture */
.groupe-cover-fallback { background: linear-gradient(135deg, #1e293b, #0f172a); }

/* Image de couverture — floutée en arrière-plan derrière le dégradé glass-banner */
.groupe-cover-blur { filter: blur(6px); opacity: .3; }

/* Carte imbriquée dans un panneau glass déjà flouté — fond plein, pas de second flou */
.groupe-surface-nested {
    background: #0c1321;
    border: 1px solid rgba(255, 255, 255, .06);
}

/* Accordéons sidebar — retire le triangle natif, fait pivoter le chevron */
.groupe-accordion > summary { list-style: none; cursor: pointer; }
.groupe-accordion > summary::-webkit-details-marker { display: none; }
.groupe-accordion > summary::marker { content: ''; }
.groupe-accordion[open] > summary .groupe-accordion-chevron { transform: rotate(180deg); }

/* ── Page index groupes — maquette Stitch #2 ── */

/* Pastille "en direct" du compteur de confiance (données réelles, jamais en dur) */
.groupe-pulse-dot {
    position: relative;
    width: .5rem; height: .5rem;
    border-radius: 9999px;
    background: #34d399;
    flex-shrink: 0;
}
.groupe-pulse-dot::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 9999px;
    background: #34d399;
    animation: groupe-pulse-ring 2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes groupe-pulse-ring {
    0%   { transform: scale(1);   opacity: .6; }
    75%  { transform: scale(2.4); opacity: 0;  }
    100% { transform: scale(2.4); opacity: 0;  }
}
@media (prefers-reduced-motion: reduce) {
    .groupe-pulse-dot::after { animation: none; }
}

/* Chips de filtre rapide (catégories réelles) */
.groupe-chip {
    display: inline-flex; align-items: center; gap: .375rem;
    flex-shrink: 0;
    padding: .5rem 1rem;
    border-radius: 9999px;
    font-size: 12px; font-weight: 700;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,.09);
    background: #111827;
    color: #94a3b8;
    transition: border-color .15s, color .15s, background .15s;
}
.groupe-chip:hover { color: #f1f5f9; border-color: rgba(249,115,22,.35); }
.groupe-chip--active {
    background: #f97316;
    border-color: #f97316;
    color: #341100;
}

/* Badge "Nouveau" (créé récemment — calculé depuis created_at, jamais un compteur inventé) */
.groupe-card-badge-new {
    position: absolute; left: .75rem; top: .75rem;
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .25rem .625rem;
    border-radius: 9999px;
    font-size: 11px; font-weight: 700;
    background: rgba(16,185,129,.9);
    color: #06251a;
}

/* Cartes groupe au-delà du premier lot — révélées côté client sans pagination serveur (faible volume) */
.groupe-card-hidden { display: none; }

/* ── Remplacement des utilitaires Tailwind couleur/opacité (ex: border-slate-700/40) ──
   Cette version de build Tailwind ne génère pas les classes avec modificateur d'opacité
   (slash ou crochets). On utilise donc de vraies couleurs rgba() figées ici.
   Les bordures "neutres" (séparateurs/structure) sont en plus unifiées en une seule
   teinte (.groupe-line / .groupe-line-light) au lieu des multiples opacités utilisées
   avant (slate-700/40, /50, /60, /80…). Les bordures/fonds à valeur sémantique
   (orange = accent, rouge = danger, émeraude = public, bleu = privé) restent distinctes. */

.groupe-line       { border-color: rgba(51, 65, 85, .5); }
.groupe-line-light { border-color: rgba(255, 255, 255, .1); }

.groupe-bg-white-04 { background-color: rgba(255, 255, 255, .04); }
.groupe-bg-white-08 { background-color: rgba(255, 255, 255, .08); }

.groupe-border-orange500-20 { border-color: rgba(249, 115, 22, .2); }
.groupe-border-orange500-30 { border-color: rgba(249, 115, 22, .3); }
.groupe-border-orange500-40 { border-color: rgba(249, 115, 22, .4); }
.groupe-border-red500-20    { border-color: rgba(239, 68, 68, .2); }
.groupe-border-red500-30    { border-color: rgba(239, 68, 68, .3); }
.groupe-border-emerald500-30 { border-color: rgba(16, 185, 129, .3); }
.groupe-border-emerald500-40 { border-color: rgba(16, 185, 129, .4); }
.groupe-border-blue500-30    { border-color: rgba(59, 130, 246, .3); }
.groupe-border-blue500-40    { border-color: rgba(59, 130, 246, .4); }

.groupe-bg-orange500-5  { background-color: rgba(249, 115, 22, .05); }
.groupe-bg-orange500-10 { background-color: rgba(249, 115, 22, .1); }
.groupe-bg-orange500-20 { background-color: rgba(249, 115, 22, .2); }
.groupe-bg-red500-5      { background-color: rgba(239, 68, 68, .05); }
.groupe-bg-red500-10     { background-color: rgba(239, 68, 68, .1); }
.groupe-bg-emerald500-5  { background-color: rgba(16, 185, 129, .05); }
.groupe-bg-emerald500-10 { background-color: rgba(16, 185, 129, .1); }
.groupe-bg-emerald500-15 { background-color: rgba(16, 185, 129, .15); }
.groupe-bg-emerald500-20 { background-color: rgba(16, 185, 129, .2); }
.groupe-bg-blue500-5  { background-color: rgba(59, 130, 246, .05); }
.groupe-bg-blue500-10 { background-color: rgba(59, 130, 246, .1); }
.groupe-bg-blue500-15 { background-color: rgba(59, 130, 246, .15); }
.groupe-bg-blue500-20 { background-color: rgba(59, 130, 246, .2); }
.groupe-bg-slate700-50 { background-color: rgba(51, 65, 85, .5); }
.groupe-bg-slate800-50 { background-color: rgba(30, 41, 59, .5); }
.groupe-bg-slate800-60 { background-color: rgba(30, 41, 59, .6); }
.groupe-bg-slate900-40 { background-color: rgba(15, 23, 42, .4); }
.groupe-bg-slate900-60 { background-color: rgba(15, 23, 42, .6); }

.groupe-text-orange400-70 { color: rgba(251, 146, 60, .7); }
.groupe-text-orange400-80 { color: rgba(251, 146, 60, .8); }

.groupe-shadow-orange-20 { --tw-shadow-color: rgba(249, 115, 22, .2); }

/* États (hover/focus/group-hover) — équivalents des variantes Tailwind couleur/opacité */
.groupe-hover-border-red500-50:hover    { border-color: rgba(239, 68, 68, .5); }
.groupe-hover-border-orange500-30:hover { border-color: rgba(249, 115, 22, .3); }
.groupe-hover-border-orange500-40:hover { border-color: rgba(249, 115, 22, .4); }
.groupe-focus-border-orange500-50:focus { border-color: rgba(249, 115, 22, .5); }
.groupe-focus-border-orange500-60:focus { border-color: rgba(249, 115, 22, .6); }
.groupe-focuswithin-border-orange500-50:focus-within { border-color: rgba(249, 115, 22, .5); }
.groupe-hover-bg-orange500-10:hover  { background-color: rgba(249, 115, 22, .1); }
.groupe-hover-bg-orange500-20:hover  { background-color: rgba(249, 115, 22, .2); }
.groupe-hover-bg-emerald500-30:hover { background-color: rgba(16, 185, 129, .3); }
.groupe-hover-bg-red500-10:hover     { background-color: rgba(239, 68, 68, .1); }
.groupe-hover-bg-red500-20:hover     { background-color: rgba(239, 68, 68, .2); }
.groupe-hover-bg-slate800-40:hover   { background-color: rgba(30, 41, 59, .4); }
.group:hover .groupe-grouphover-bg-orange500-10 { background-color: rgba(249, 115, 22, .1); }

/* ── Localisation groupe (création/édition) — pays + ville autocomplete ── */
.groupe-pays-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    cursor: pointer;
    border-radius: 9999px;
    border: 1px solid rgba(51, 65, 85, .6);
    background: rgba(30, 41, 59, .4);
    color: #94a3b8;
    padding: .375rem 1rem;
    font-size: 13px; font-weight: 700;
    transition: border-color .15s, background .15s, color .15s;
}
.groupe-pays-pill:hover { border-color: rgba(100, 116, 139, .8); }
.groupe-pays-pill--active {
    border-color: rgba(249, 115, 22, .5);
    background: rgba(249, 115, 22, .1);
    color: #fb923c;
}

.groupe-autocomplete-list {
    position: absolute; z-index: 30; margin-top: .25rem;
    width: 100%; max-height: 260px; overflow-y: auto;
    border-radius: .75rem;
    border: 1px solid rgba(51, 65, 85, .6);
    background: #0f172a;
    box-shadow: 0 20px 40px rgba(0,0,0,.5);
}
.groupe-autocomplete-item {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .625rem 1rem;
    font-size: 13px; color: #e2e8f0;
    cursor: pointer;
    transition: background .1s;
}
.groupe-autocomplete-item:hover { background: rgba(30, 41, 59, .8); }

.groupe-autofill-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: 10px; font-weight: 700;
    color: #34d399;
}

/* Effet "notification" — demandes d'adhésion en attente, en haut de la sidebar admin/mod */
.groupe-notif-card {
    border-color: rgba(249, 115, 22, .45);
    animation: groupe-notif-glow 2.5s ease-in-out infinite;
}
@keyframes groupe-notif-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .25); }
    50%      { box-shadow: 0 0 0 6px rgba(249, 115, 22, 0); }
}
.groupe-notif-badge { position: relative; }
.groupe-notif-badge::after {
    content: '';
    position: absolute; inset: -3px;
    border-radius: 9999px;
    border: 2px solid rgba(249, 115, 22, .6);
    animation: groupe-notif-ring 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes groupe-notif-ring {
    0%   { transform: scale(1);   opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .groupe-notif-card { animation: none; }
    .groupe-notif-badge::after { animation: none; }
}