/* ============================================================
   style.css — l'apparence du forum.

   Palette violette (refonte du 6 septembre) : fond noir a peine teinte de
   violet, un seul accent de couleur (le violet) plutot que l'ancien duo
   bleu/rouge — le rouge ne reste que pour les actions destructives/
   d'alerte, jamais comme couleur de marque.
   ============================================================ */

:root {
  --fond:           #0c0a14;  /* noir legerement violet, fond general */
  --surface:        #16121f;  /* blocs, cartes, formulaires */
  --surface-claire: #1e1930;  /* survol, ligne active (nouveau) */
  --bordure:        #2b2440;
  --texte:          #f0edf9;
  --texte-doux:     #9c93b8;

  /* Trois intensites de violet, comme l'ancien systeme bleu : une version
     eclaircie pour tout ce qui doit rester lisible (liens, texte de
     bouton), une un peu plus saturee pour le survol, et une version brute
     pour le decor pur (traits, bordures actives) jamais utilisee comme
     couleur de texte. Contrastes verifies sur --fond : --violet ~7.2:1,
     --texte-doux ~6.8:1 (le minimum WCAG AA est 4.5:1). */
  --violet:        #a78bfa;  /* liens et boutons */
  --violet-sombre: #8b5cf6;  /* survol des boutons */
  --violet-decor:  #6d28d9;  /* traits, bordures decoratives */
  --rouge-decor:   #af0b12;  /* reserve aux actions destructives/dangereuses, jamais decoratif */
  --alerte:        #ff8f8f;  /* messages d'erreur */

  /* --violet est CLAIR ici (bon contraste avec du texte sombre dessus) mais
     FONCE en theme clair (voir plus bas) : un bouton "background: var(--violet)"
     a donc besoin d'un texte qui change de sens avec lui — jamais fixe a
     #fff ni a une couleur sombre, sous peine d'un bouton illisible dans un
     theme sur les deux (constate le 9 septembre sur ".bouton"/".lien-evasion"/
     ".live-categorie-puce.actif", tous fixes a une seule couleur de texte). */
  --bouton-texte: #06121f;
  /* Version r,g,b (pas #hex) de --violet/--surface/--fond, utilisable dans
     rgba(var(--x-rgb), alpha) pour les fonds teintes en transparence
     (survol, etat actif, blocs/formulaires legerement transparents) —
     jamais une valeur ecrite en dur (ex. rgba(167, 139, 250, ...)), qui
     resterait toujours la teinte du theme sombre : c'est exactement ce qui
     laissait des pans entiers du site (champs de formulaire, blocs,
     cartes...) visiblement sombres en theme clair, corrige le 9 septembre. */
  --violet-rgb:  167, 139, 250;
  --surface-rgb: 22, 18, 31;
  --fond-rgb:    12, 10, 20;

  /* Couleurs de medaille (classement) : plus claires ici pour contraster
     sur un fond sombre, plus foncees en theme clair (voir plus bas) —
     jamais une seule teinte fixe, illisible sur l'un des deux fonds. */
  --rang-or:      #ffd54f;
  --rang-argent:  #cfd8dc;
  --rang-bronze:  #d7a56d;
}

/* Theme clair : choisi manuellement (bouton du bandeau, voir header.ejs,
   retenu dans localStorage) OU suivi automatiquement depuis le systeme tant
   que rien n'a ete choisi a la main. Memes noms de variables, seules les
   valeurs changent — aucune regle du reste de la feuille n'a besoin d'etre
   dupliquee. */
:root[data-theme="clair"] {
  --fond:           #f4f2fa;
  --surface:        #ffffff;
  --surface-claire: #ece7f7;
  --bordure:        #ddd5ef;
  --texte:          #1b1730;
  --texte-doux:     #5c5570;
  --violet:         #7c3aed;
  --violet-sombre:  #6d28d9;
  --violet-decor:   #7c3aed;
  --rouge-decor:    #c81018;
  --alerte:         #b3261e;
  --bouton-texte:   #ffffff;
  --violet-rgb:     124, 58, 237;
  --surface-rgb:    255, 255, 255;
  --fond-rgb:       244, 242, 250;
  --rang-or:        #a67c00;
  --rang-argent:    #6b7480;
  --rang-bronze:    #9c6b3e;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --fond:           #f4f2fa;
    --surface:        #ffffff;
    --surface-claire: #ece7f7;
    --bordure:        #ddd5ef;
    --texte:          #1b1730;
    --texte-doux:     #5c5570;
    --violet:         #7c3aed;
    --violet-sombre:  #6d28d9;
    --violet-decor:   #7c3aed;
    --rouge-decor:    #c81018;
    --bouton-texte:   #ffffff;
    --violet-rgb:     124, 58, 237;
    --surface-rgb:    255, 255, 255;
    --fond-rgb:       244, 242, 250;
    --alerte:         #b3261e;
    --rang-or:        #a67c00;
    --rang-argent:    #6b7480;
    --rang-bronze:    #9c6b3e;
  }
}

/* ============================================================
   Design tokens transverses (espacement, radius, ombres, mouvement)
   Ajoutes le 17 septembre — la palette de couleurs ci-dessus existait
   deja et n'a pas change ; ces tokens comblent ce qui manquait pour
   arreter d'ecrire des valeurs (border-radius, box-shadow, transition...)
   en dur et differentes a chaque endroit du site. Copies a l'identique
   dans app-react/src/styles/tokens.css (meme regle que pour les couleurs :
   deux feuilles de style, deux systemes de build, aucun import possible
   entre elles — si ces valeurs changent ici, les reporter la-bas).
   ============================================================ */
:root {
  /* Espacement (echelle en px, identique dans les deux themes) */
  --espace-4:  4px;
  --espace-8:  8px;
  --espace-12: 12px;
  --espace-16: 16px;
  --espace-20: 20px;
  --espace-24: 24px;
  --espace-32: 32px;
  --espace-40: 40px;
  --espace-48: 48px;
  --espace-64: 64px;

  /* Radius : croissant avec la taille/l'importance de l'element */
  --radius-sm:   6px;   /* petits controles : boutons compacts, tags, inputs */
  --radius-md:   10px;  /* cartes, boutons standards, blocs */
  --radius-lg:   16px;  /* modales, panneaux larges */
  --radius-pill: 999px; /* badges, puces, pastilles */

  /* Ombres : rgba(0,0,0,x) fonctionne sur les deux themes (la surface
     dessous change de couleur, pas l'ombre), pas besoin de les redefinir
     par theme */
  --ombre-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
  --ombre-md: 0 8px 24px rgba(0, 0, 0, 0.40);
  --ombre-lg: 0 16px 44px rgba(0, 0, 0, 0.50);
  /* Lueur de marque tres discrete pour un accent ponctuel (CTA, carte en
     surbrillance) — jamais un halo neon, juste assez pour guider l'oeil */
  --lueur-violet: 0 0 0 1px rgba(var(--violet-rgb), 0.35), 0 4px 20px rgba(var(--violet-rgb), 0.18);

  /* Mouvement : deux durees + deux courbes suffisent a tout le site */
  --duree-rapide:  120ms;
  --duree-normale: 200ms;
  --duree-lente:   320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-sortie:   cubic-bezier(0.16, 1, 0.3, 1);

  /* Conteneurs de page (refonte du 22 septembre, phase 3 — "audit d'abord" :
     ces 4 largeurs existaient DEJA, coherentes, chacune a un role precis ;
     ce qui manquait, c'etait de leur donner un nom au lieu de repeter le
     nombre en dur a chaque endroit. Aucune valeur n'a change ici — pur
     renommage, verifie sans aucun ecart visuel par la suite de tests
     responsive avant et apres. */
  --conteneur-standard:  900px;  /* .page : la tres grande majorite du site (forum, profils, reglages, admin...) */
  --conteneur-large:    1240px;  /* pages avec plus a montrer cote a cote (accueil, forum, social, live...) ; 1100px avant la suppression de la barre laterale (24 septembre) */
  --conteneur-media:    1320px;  /* page immersive d'un match (Le Classique) : plus large, pense pour un flux video */
  --conteneur-media-xl: 1560px;  /* la meme, sur tres grand ecran (>= 2200px) */
  --conteneur-shell:    1400px;  /* le "meuble" du site lui-meme : bandeau du haut, colonne barre laterale + contenu */
}

/* Animations reutilisables : appliquees via classe, jamais dupliquees page
   par page. Se limitent a transform/opacity (aucun cout de layout), et
   restent couvertes par la regle prefers-reduced-motion juste dessous. */
@keyframes le-repere-fondu-monte {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes le-repere-agrandir {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.anim-fondu-monte { animation: le-repere-fondu-monte var(--duree-normale) var(--ease-sortie) both; }
.anim-agrandir    { animation: le-repere-agrandir var(--duree-rapide) var(--ease-sortie) both; }

/* Apparition en cascade des grilles/listes de cartes (accueil, jeux) : un
   decalage tres court entre chaque carte, jamais plus de 8, pour que la
   page reste utilisable immediatement — ce n'est qu'une garniture visuelle
   au chargement, jamais une attente. */
.liste-categories > li,
.jeux-grille > .jeu-carte,
.cartes-accroche > .carte-accroche {
  animation: le-repere-fondu-monte var(--duree-normale) var(--ease-sortie) both;
}
.liste-categories > li:nth-child(2),
.jeux-grille > .jeu-carte:nth-child(2),
.cartes-accroche > .carte-accroche:nth-child(2) { animation-delay: 40ms; }
.liste-categories > li:nth-child(3),
.jeux-grille > .jeu-carte:nth-child(3),
.cartes-accroche > .carte-accroche:nth-child(3) { animation-delay: 80ms; }
.liste-categories > li:nth-child(4),
.jeux-grille > .jeu-carte:nth-child(4),
.cartes-accroche > .carte-accroche:nth-child(4) { animation-delay: 120ms; }
.liste-categories > li:nth-child(5),
.jeux-grille > .jeu-carte:nth-child(5),
.cartes-accroche > .carte-accroche:nth-child(5) { animation-delay: 160ms; }
.liste-categories > li:nth-child(n+6),
.jeux-grille > .jeu-carte:nth-child(n+6),
.cartes-accroche > .carte-accroche:nth-child(n+6) { animation-delay: 200ms; }

/* Respecte la preference systeme "reduire les animations" (vertige,
   troubles vestibulaires...) : coupe quasiment a zero toute animation/
   transition/defilement fluide, plutot que de les desactiver au cas par
   cas dans chaque regle. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Transition entre deux pages (chaque page EJS est un vrai document,
   pas une SPA) via l'API native "View Transitions" : evite l'ecran
   blanc/le flash brutal au changement de page, sans une seule ligne de
   JavaScript — les navigateurs qui ne la supportent pas (elle est
   recente) ignorent silencieusement ces regles et gardent la navigation
   normale, aucun risque de casse. Desactivee explicitement si l'appareil
   demande de reduire les animations.

   Limite connue et acceptee (pas un bug a corriger) : quand une action
   passe par un formulaire POST qui redirige aussitot (connexion,
   creation de sujet, bannissement...), le navigateur enchaine deux
   navigations coup sur coup et annule la transition de la premiere —
   la page arrive normalement (sans animation, juste comme avant cette
   fonctionnalite), mais certains navigateurs (Chrome recent) journalisent
   cette annulation comme une erreur console. Verifie : la navigation et
   toutes les fonctionnalites restent intactes dans tous les cas ; aucun
   moyen fiable cote page de supprimer ce message sans desactiver toute
   la fonctionnalite (essaye via les evenements pageswap/pagereveal,
   sans effet — l'annulation se produit a un niveau que le script de la
   page ne peut pas intercepter). Constate aussi sur d'autres sites
   utilisant cette meme API. */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--duree-normale);
  animation-timing-function: var(--ease-standard);
}

/* Lien d'evitement (accessibilite clavier) : invisible tant qu'il n'a pas
   le focus, permet de sauter directement au contenu sans retraverser tout
   le bandeau/la barre laterale a chaque page. */
.lien-evasion {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--violet);
  color: var(--bouton-texte);
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.lien-evasion:focus {
  left: 0;
}

.bouton-theme {
  background: none;
  border: 1px solid var(--bordure);
  color: var(--texte);
  border-radius: 8px;
  font-size: 16px;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
}
.bouton-theme:hover {
  border-color: var(--violet);
}

* { box-sizing: border-box; }

html {
  /* Empeche iOS/Safari d'agrandir tout seul le texte en mode paysage. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  /* Filet de securite : aucun element ne peut faire deriver la page
     horizontalement sur un petit ecran. */
  overflow-x: hidden;
}

/* Les mots tres longs (titres de sujet, pseudos) vont a la ligne au lieu
   de deborder de l'ecran. */
.titre-page,
.titre-section,
.sujet-titre,
.fil li {
  overflow-wrap: break-word;
}

a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: underline; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

/* Masque un element a l'ecran en le laissant lisible par les lecteurs
   d'ecran. Sert aux titres que le HTML5 exige mais que le design ne
   veut pas afficher. */
.invisible {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================
   public/css/02-cadre.css
   Cadre général : bandeau du haut, barre latérale, page, formulaires et composants de base.
   Assemblée avec les autres fichiers de public/css/ dans l'ordre de leur numéro, et servie sous /style.css
   (voir src/web/feuille-de-style.js) : une règle d'un fichier plus loin l'emporte, à spécificité égale.
   ============================================================ */

/* ============================================================
   CADRE GENERAL : bandeau du haut + barre laterale persistante
   ============================================================
   Refonte du 6 septembre (theme violet) : la banniere n'est plus un
   arriere-plan fixe derriere TOUTE page (l'ancienne approche) — elle vit
   maintenant UNIQUEMENT dans le heros de la page d'accueil (voir
   .hero-accueil, plus bas, et views/index.ejs). Le reste du site utilise
   une interface plus classique "tableau de bord" : bandeau + barre
   laterale de navigation, toujours visibles, fond uni partout.
   ============================================================ */

.bandeau {
  background: var(--fond);
  border-bottom: 1px solid var(--bordure);
}

.bandeau-inner {
  max-width: var(--conteneur-shell);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.marque {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--texte);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.marque:hover { color: var(--violet); text-decoration: none; }

/* Favicon du site (icon-192.png, deja utilise pour l'onglet/l'ecran
   d'accueil) repris ici a cote du nom : demande du 7 septembre, remplace
   le rond degrade + emoji d'approximation de la premiere passe. */
.marque-icone {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* ---- Onglets du bandeau (refonte du 7 septembre) ---- */

.bandeau-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}
.bandeau-tab {
  padding: 8px 16px;
  border-radius: 8px;
  color: var(--texte-doux);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.bandeau-tab:hover { color: var(--texte); background: var(--surface-claire); text-decoration: none; }
.bandeau-tab.actif { background: var(--violet-decor); color: #fff; }

.bandeau-droite {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-form { margin: 0; }

/* ---- Menus deroulants du bandeau : cloche + compte (refonte du 7
   septembre), meme technique <details>/<summary> que le reste du site
   (voir .bloc-cle, .form-bannir...) — pas de JS necessaire pour ouvrir/
   fermer. ---- */

.bandeau-menu { position: relative; }
.bandeau-menu summary { list-style: none; cursor: pointer; }
.bandeau-menu summary::-webkit-details-marker { display: none; }

.bandeau-cloche-menu summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 17px;
}
.bandeau-cloche-menu summary:hover { background: var(--surface-claire); }
.bandeau-cloche-point {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rouge-decor);
  border: 2px solid var(--fond);
}

.bandeau-compte-menu summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
}
.bandeau-compte-menu summary:hover { background: var(--surface-claire); }
.bandeau-compte-menu summary .avatar,
.bandeau-compte-menu summary .avatar-secours { width: 30px; height: 30px; font-size: 13px; }
.bandeau-compte-pseudo {
  font-size: 14px;
  font-weight: 600;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bandeau-panneau {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 8px;
  min-width: 240px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bandeau-panneau a,
.bandeau-panneau .lien-bouton {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--texte);
  font-size: 14px;
  width: 100%;
  text-align: left;
}
.bandeau-panneau a:hover,
.bandeau-panneau .lien-bouton:hover { background: var(--surface-claire); text-decoration: none; }
.bandeau-panneau a .badge { margin-left: auto; }
.bandeau-panneau-entete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--bordure);
}
.bandeau-panneau-separateur { border: none; border-top: 1px solid var(--bordure); margin: 4px 0; }

.lien-bouton {
  background: none;
  border: none;
  padding: 0;
  color: var(--texte-doux);
  font: inherit;
  cursor: pointer;
}
.lien-bouton:hover { color: var(--texte); text-decoration: underline; }

/* ---- Barre laterale persistante ---- */

.app-shell {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  max-width: var(--conteneur-shell);
  margin: 0 auto;
  padding: 0 24px;
}

.sidebar-app {
  flex: 0 0 220px;
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 0;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}

/* En-tete du tiroir mobile ("Menu" + bouton fermer) : invisible sur
   desktop, ou .sidebar-app reste la barre laterale normale (voir
   @media 860px plus bas, qui la passe en "flex"). */
.sidebar-app-tete-mobile { display: none; }

/* ---- Barre de navigation basse (mobile uniquement) : 5 destinations au
   plus, pouce-compatibles. Invisible sur desktop par defaut ; passee en
   "flex" par le @media 860px plus bas (DOIT rester apres ce bloc-ci dans
   le fichier : a specificite egale, la regle la plus tardive l'emporte,
   et c'est la regle du @media qui doit gagner sous 860px). Sous la palette
   de commandes (z-index 2100), les toasts (2050) et la mini-fiche de
   profil (1200), au-dessus du contenu de page. */
.nav-mobile {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  background: var(--fond);
  border-top: 1px solid var(--bordure);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  gap: 2px;
}
.nav-mobile-lien {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 6px 2px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  color: var(--texte-doux);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  position: relative;
}
.nav-mobile-lien span:first-child { font-size: 19px; line-height: 1; }
.nav-mobile-lien:hover,
.nav-mobile-lien:active { color: var(--texte); background: var(--surface-claire); text-decoration: none; }
.nav-mobile-lien.actif { color: var(--violet); font-weight: 600; }
.nav-mobile-badge.badge {
  position: absolute; top: 2px; right: calc(50% - 22px); margin: 0;
}

.sidebar-lien {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  color: var(--texte-doux);
  font-size: 15px;
  border-left: 3px solid transparent;
  transition: background var(--duree-rapide) var(--ease-standard),
              color var(--duree-rapide) var(--ease-standard),
              border-color var(--duree-rapide) var(--ease-standard);
}
.sidebar-lien:hover { background: var(--surface-claire); color: var(--texte); text-decoration: none; }
.sidebar-lien.actif {
  background: rgba(var(--violet-rgb), 0.14);
  color: var(--violet);
  font-weight: 600;
  border-left-color: var(--violet);
}

.sidebar-groupe {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--bordure);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sidebar-titre-groupe {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texte-doux);
  margin: 0 0 6px 14px;
}
.sidebar-groupe a {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  color: var(--texte-doux);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background var(--duree-rapide) var(--ease-standard), color var(--duree-rapide) var(--ease-standard);
}
.sidebar-groupe a:hover { color: var(--texte); background: var(--surface-claire); text-decoration: none; }

/* Lien "Catégories" de la barre laterale, avec sa petite icone (emoji ou,
   pour les 3 categories dediees a un jeu precis, le vrai logo du jeu —
   voir iconePourCategorie() cote serveur) : meme principe que
   .categorie-ligne-icone, juste redimensionne pour tenir dans cette
   colonne etroite. */
.sidebar-lien-categorie {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-lien-categorie span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-lien-icone {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(var(--violet-rgb), 0.12);
  border-radius: 6px;
  overflow: hidden;
}
.sidebar-lien-icone .categorie-ligne-logo { width: 100%; height: 100%; object-fit: contain; }

/* ---- Corps de page ---- */

.page {
  flex: 1;
  min-width: 0;
  max-width: var(--conteneur-standard);
  padding: 24px 0 64px;
}
/* Page avec plus a montrer cote a cote (voir header.ejs, "classePage") : un peu plus de largeur sur grand ecran,
   pour ne pas laisser une colonne de 900px perdue au milieu d'un ecran 1920px+ alors qu'il y a un feed ET une
   colonne de widgets a afficher. Neutralise sous 860px par la regle ".page" du media plus bas (largeur = 100%). */
.page.page-large { max-width: var(--conteneur-large); }

.titre-page {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.titre-section { font-size: 18px; margin: 32px 0 12px; }

.sous-titre { color: var(--texte-doux); margin: 0 0 24px; max-width: 60ch; }
.note { color: var(--texte-doux); margin-top: 24px; }
.aide { color: var(--texte-doux); font-size: 14px; margin: 4px 0 0; }

/* Fil d'Ariane : un <ol> remis a plat, separateur ajoute en CSS. */
.fil { font-size: 14px; margin: 0 0 16px; }
.fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.fil li { color: var(--texte-doux); }
.fil li:not(:last-child)::after { content: "/"; margin: 0 8px; opacity: 0.5; }

.vide {
  color: var(--texte-doux);
  background: rgba(var(--surface-rgb), 0.85);
  border: 1px dashed var(--bordure);
  border-radius: var(--radius-md);
  padding: 24px;
}
/* Variante "etat vide" pleine section (jamais une simple note inline au
   milieu d'une liste non vide, qui garde le style de base ci-dessus) :
   centree, avec un repere visuel discret plutot qu'un bloc de texte
   perdu. Un seul motif abstrait pour tous les cas (conversations,
   favoris, resultats de recherche, files d'attente admin...) plutot
   qu'une icone choisie au hasard par contexte, qui risquerait de mal
   correspondre a la moitie d'entre eux. */
p.vide {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  padding: 36px 24px;
}
p.vide::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 2px dashed var(--violet-decor);
  opacity: 0.6;
}

.erreur {
  color: var(--alerte);
  border-left: 3px solid var(--rouge-decor);
  background: rgba(175, 11, 18, 0.15);
  padding: 10px 14px;
  margin: 0 0 20px;
}

/* Page d'erreur partagee (404/403/410/429..., voir erreur.ejs) : centree,
   avec une action de repli toujours pertinente (retour/accueil) plutot
   qu'un simple lien texte perdu au milieu de rien. */
.page-erreur {
  max-width: 440px;
  margin: 48px auto;
  text-align: center;
}
.page-erreur-icone { font-size: 44px; margin: 0 0 8px; }
.page-erreur .titre-page { margin-bottom: 8px; }
.page-erreur .sous-titre { margin: 0 auto 28px; }
.page-erreur-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.page-erreur-actions .bouton { margin-top: 0; }

/* Avis "action recommandee" (ex. identifiant pas encore personnalise) :
   moins alarmant qu'une .erreur, mais plus visible qu'une .note discrete. */
.note-avis {
  color: var(--texte);
  border-left: 3px solid var(--violet);
  background: rgba(var(--violet-rgb), 0.12);
  padding: 10px 14px;
  margin: 8px 0;
}

/* Bandeau persistant en haut de chaque page (ex. identifiant a
   personnaliser) : sous le bandeau de nav, au-dessus du contenu. */
.bandeau-avis {
  background: rgba(var(--violet-rgb), 0.12);
  border-bottom: 1px solid var(--violet-decor);
  color: var(--texte);
  text-align: center;
  padding: 10px 16px;
  font-size: 14px;
}
.bandeau-avis a { font-weight: 600; }

/* Champ texte precede d'un symbole fixe (ex. "#" devant un identifiant) :
   le "#" fait visuellement partie du meme cadre que l'input. */
.champ-avec-prefixe {
  display: flex;
  align-items: center;
  background: rgba(var(--fond-rgb), 0.9);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding-left: 12px;
}
.champ-avec-prefixe:focus-within { border-color: var(--violet); }
.champ-avec-prefixe span { color: var(--texte-doux); font-weight: 600; }
.champ-avec-prefixe input {
  border: none;
  background: none;
  padding-left: 4px;
}
.champ-avec-prefixe input:focus { border: none; }

/* Identifiant unique affiche a cote d'un pseudo (listes d'amis, resultats
   de recherche, profil public) : discret, ne rivalise pas avec le pseudo. */
.identifiant-membre { color: var(--texte-doux); font-size: 14px; margin: 0; }

.entete-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

/* ---- Listes ---- */

.liste-categories,
.liste-sujets,
.fil-messages {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Ligne de categorie enrichie (page d'accueil, refonte du 6 septembre) :
   icone, nom + description, compteurs, apercu du dernier message. */
.categorie-ligne {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 10px;
  transition: border-color var(--duree-rapide) var(--ease-standard),
              background var(--duree-rapide) var(--ease-standard),
              transform var(--duree-rapide) var(--ease-standard),
              box-shadow var(--duree-rapide) var(--ease-standard);
}
.categorie-ligne > .categorie-ligne-dernier { margin-top: 0; }   /* « .aide » ajoute 4 px qui décalaient l'aperçu du dernier message (centrage vertical) */
.categorie-ligne:hover {
  border-color: var(--violet-decor);
  background: var(--surface-claire);
  transform: translateY(-2px);
  box-shadow: var(--ombre-sm);
}

.categorie-ligne-icone {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(var(--violet-rgb), 0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Vrai logo d'un jeu cible (GTA VI, Call of Duty, EA Sports FC), remplace
   l'emoji generique pour ces 3 categories precises — voir
   LOGOS_JEUX_CIBLES cote serveur. "contain" plutot que "cover" : aucun
   des logos fournis n'est carre (le logo Call of Duty est un bandeau
   large), mieux vaut un peu d'espace autour que rogner le logo. */
.categorie-ligne-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.categorie-ligne-principal { color: var(--texte); flex: 1 1 260px; min-width: 0; }
.categorie-ligne-principal:hover { text-decoration: none; }
.categorie-ligne-principal strong { display: block; font-size: 16px; }
.categorie-ligne-principal .aide { margin: 2px 0 0; }

.categorie-ligne-chiffres {
  display: flex;
  gap: 18px;
  margin: 0;
  color: var(--texte-doux);
  font-size: 13px;
  flex: 0 0 auto;
}
.categorie-ligne-chiffres div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.categorie-ligne-chiffres dd { margin: 0; color: var(--texte); font-weight: 600; font-size: 15px; }
.categorie-ligne-chiffres dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }

.categorie-ligne-dernier {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 220px;
  min-width: 0;
  color: var(--texte);
  font-size: 13px;
  padding-left: 16px;
  border-left: 1px solid var(--bordure);
}
.categorie-ligne-dernier:hover { text-decoration: none; }
.categorie-ligne-dernier strong,
.categorie-ligne-dernier span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.categorie-ligne-dernier strong { font-size: 13px; font-weight: 600; }

.sujet-ligne {
  position: relative;
  border-bottom: 1px solid var(--bordure);
  padding: 14px 60px 14px 0;
}

.sujet-titre { font-size: 17px; font-weight: 600; margin: 0; }
.sujet-meta { color: var(--texte-doux); font-size: 13px; margin: 2px 0 0; }

.compteur {
  margin: 0;
  position: absolute;
  right: 0;
  top: 16px;
  min-width: 40px;
  text-align: center;
  background: rgba(var(--fond-rgb), 0.8);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 13px;
  color: var(--texte-doux);
}

/* ---- Ligne de sujet enrichie (categorie.ejs, phase 4 de la refonte web, 22 septembre) ----
   Modificateur ADDITIF sur .sujet-ligne : recherche.ejs et le lien d'évènement de la recherche
   utilisent .sujet-ligne SEUL et gardent leur mise en page d'origine (bloc simple, .compteur
   absolu), inchangée. Ici : titre+méta, compteur, et le dernier message (avatar + auteur + date
   — la date existait déjà pour trier la liste, seul l'auteur manquait pour l'afficher), sur une
   ligne façon carte, dans le même esprit que .categorie-ligne (page d'accueil). */
.sujet-ligne-avec-dernier {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding-right: 16px;
}
.sujet-ligne-principal { flex: 1 1 260px; min-width: 0; }
.sujet-ligne-avec-dernier .compteur { position: static; flex: 0 0 auto; }
.sujet-ligne-dernier {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 220px;
  min-width: 0;
  color: var(--texte);
  font-size: 13px;
  padding-left: 16px;
  border-left: 1px solid var(--bordure);
}
.sujet-ligne-dernier:hover { text-decoration: none; color: var(--violet); }
.sujet-ligne-dernier strong,
.sujet-ligne-dernier > span > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sujet-ligne-dernier strong { font-size: 13px; font-weight: 600; }
.sujet-ligne-dernier > span { min-width: 0; }
.sujet-ligne-dernier > span > span { color: var(--texte-doux); font-size: 12px; }

/* ---- Messages ---- */

.fil-messages { margin: 20px 0 32px; }

.message {
  background: rgba(var(--surface-rgb), 0.85);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 12px;
}

.message-entete {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bordure);
  font-size: 13px;
  color: var(--texte-doux);
}
/* Avatar decoratif (le pseudo juste a cote porte deja le lien vers le
   profil — tabindex="-1"/aria-hidden sur ce lien-ci pour ne pas dupliquer
   l'arret clavier/lecteur d'ecran). */
.message-avatar-lien { flex: 0 0 auto; line-height: 0; }
.message-entete-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.message-entete-ligne { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }

/* <address> s'affiche en italique par defaut : on annule. */
.auteur { font-size: 15px; font-weight: 600; font-style: normal; }
.message-numero { margin-left: auto; color: var(--texte-doux); }

/* pre-wrap : les retours a la ligne tapes par le membre sont conserves. */
.message-corps { white-space: pre-wrap; overflow-wrap: break-word; }

.message-pied { margin-top: 10px; }

/* Mention @identifiant reconnue dans un sujet/message/salon (voir
   mentions-utils.js) — meme esprit qu'un lien Discord : discret mais
   distinct du texte autour. */
a.mention {
  background: rgba(var(--violet-rgb), 0.16);
  border-radius: 4px;
  padding: 0 3px;
  font-weight: 600;
  text-decoration: none;
}
a.mention:hover { background: rgba(var(--violet-rgb), 0.3); }

/* Lien http(s) reconnu dans un sujet/message/salon (voir mentions-utils.js) :
   souligne, s'ouvre dans un nouvel onglet. */
a.lien-externe { color: var(--violet); text-decoration: underline; word-break: break-all; }

/* Apercu d'un lien (titre/image/site — voir apercus-liens.js), injecte sous
   le message par apercus-liens-client.js une fois recupere ; meme carte que
   l'appli Android. Jamais affichee tant que rien n'a ete recupere : pas de
   place vide ni d'erreur visible. */
.apercu-lien-carte {
  display: block;
  margin-top: 8px;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duree-rapide) var(--ease-standard),
              transform var(--duree-rapide) var(--ease-standard),
              box-shadow var(--duree-rapide) var(--ease-standard);
}
.apercu-lien-carte:hover {
  border-color: var(--violet-decor);
  transform: translateY(-2px);
  box-shadow: var(--ombre-sm);
}
.apercu-lien-carte img { display: block; width: 100%; height: 160px; object-fit: cover; background: var(--fond); }
.apercu-lien-carte-texte { padding: 10px 12px; }
.apercu-lien-carte-titre { font-weight: 600; color: var(--texte); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.apercu-lien-carte-site { color: var(--texte-doux); font-size: 0.85em; margin-top: 2px; }

/* ---- Formulaires ---- */

/* <fieldset> arrive avec une bordure et des marges imposees : on nettoie. */
fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
legend { padding: 0; }

.bloc-reponse h2 { font-size: 16px; margin: 0 0 12px; }
.bloc-reponse form { display: flex; flex-direction: column; gap: 6px; }

.formulaire,
.bloc-reponse {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(var(--surface-rgb), 0.88);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-md);
  padding: 20px;
  animation: le-repere-fondu-monte var(--duree-normale) var(--ease-sortie) both;
}

.formulaire-etroit { max-width: 420px; }

label { font-size: 14px; color: var(--texte-doux); margin-top: 8px; }
label:first-of-type { margin-top: 0; }
/* Formulaires en colonne avec gap (administration) : l'espacement vient du gap, pas de la marge globale des labels (sinon deux labels côte à côte se décalent). */
.formulaire-inline label { margin-top: 0; }
/* Petit texte « .aide » dans une rangée d'en-tête (titre + info côte à côte) : pas de marge propre, sinon il se décale du titre. */
[class*="-entete"] > .aide, [class*="-tete"] > .aide { margin-top: 0; margin-bottom: 0; }
/* Labels placés côte à côte dans une rangée flex/grid déclarée en ligne (pages d'administration) : pas de marge d'empilement. */
[style*="display: flex"] > label, [style*="display:flex"] > label, [style*="display: grid"] > label, [style*="display:grid"] > label { margin-top: 0; }

input, textarea {
  background: rgba(var(--fond-rgb), 0.9);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-sm);
  color: var(--texte);
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  width: 100%;
  resize: vertical;
  transition: border-color var(--duree-rapide) var(--ease-standard);
}

input:focus, textarea:focus { border-color: var(--violet); }

/* "width: 100%" ci-dessus vise les champs texte/email/mot de passe/date...
   (les etirer sur toute la largeur du formulaire est voulu) — mais la
   regle "input" cible TOUS les types, cases a cocher et boutons radio
   compris : sans cet correctif, une case a cocher s'etirait jusqu'a
   remplir toute la largeur disponible (constate le 7 septembre sur
   /profil/notifications, ou chaque case/bouton radio devenait un rectangle
   large de plus de 300px au lieu d'un petit carre/rond) — ce qui separait
   visuellement la case de son texte des que celui-ci passait a la ligne
   sur un petit ecran. Reprend leur taille native normale. */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  flex: 0 0 auto;
}

/* Interrupteur (on/off) : une case a cocher, restylee entierement via
   "appearance: none" — reste un vrai <input type="checkbox"> (meme
   name/value/onchange, meme comportement de formulaire, meme prise en
   charge clavier/lecteur d'ecran), seule l'apparence change. Reserve
   aux reglages "actif/inactif" (ex. /profil/notifications) : jamais
   applique aux cases a cocher a choix multiple (une liste d'amis a
   selectionner, par exemple), qui doivent rester de vraies cases. Le
   selecteur d'attribut supplementaire (specificite egale a la regle
   generale ci-dessus) garantit que la largeur/hauteur ci-dessous
   l'emportent bien. */
input[type="checkbox"].interrupteur {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 38px;
  height: 22px;
  background: var(--bordure);
  border-radius: var(--radius-pill);
  cursor: pointer;
  margin: 0;
  transition: background var(--duree-rapide) var(--ease-standard);
}
input[type="checkbox"].interrupteur::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--ombre-sm);
  transition: transform var(--duree-rapide) var(--ease-standard);
}
input[type="checkbox"].interrupteur:checked { background: var(--violet); }
input[type="checkbox"].interrupteur:checked::before { transform: translateX(16px); }
input[type="checkbox"].interrupteur:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* ============================================================
   public/css/03-boutons.css
   Catalogue des boutons et des composants partagés.
   Assemblée avec les autres fichiers de public/css/ dans l'ordre de leur numéro, et servie sous /style.css
   (voir src/web/feuille-de-style.js) : une règle d'un fichier plus loin l'emporte, à spécificité égale.
   ============================================================ */

/* ============================================================
   Catalogue des boutons (documente le 22 septembre, phase 3 — rien de
   renomme ni redessine ici : ce systeme existait deja et etait deja
   coherent, il ne manquait que d'etre ecrit noir sur blanc a un seul
   endroit). Se combinent entre elles (ex. ".bouton .bouton-secondaire
   .bouton-petit").

     .bouton              action principale d'un bloc (remplie, violette)
     .bouton-secondaire   action valide mais pas prioritaire (contour seul)
     .bouton-danger       action destructrice (rouge) — TOUJOURS avec une
                           confirmation cote JS (confirm(...)) ou une etape
                           intermediaire, jamais un simple clic irreversible
     .bouton-petit        modificateur de taille (formulaires en ligne,
                           actions secondaires denses)
     .lien-bouton         action mineure qui doit ressembler a un lien
                           (ex. "Se deconnecter" dans un menu)

   Ce qui n'en fait volontairement PAS partie : les boutons a icone unique
   tres specifiques a un endroit precis (.bouton-theme, .bouton-favori,
   .bouton-retour-desktop...) — les fondre dans ce systeme generique n'
   apporterait rien, ils ont chacun une seule utilisation, jamais reutilisee
   ailleurs. Meme logique pour les blocs "carte" (.carte-accroche,
   .carte-profil, .pf-bloc, .fbp-carte...) : chacun est construit pour SON
   contenu (une accroche d'accueil n'affiche pas la meme chose qu'une fiche
   de profil), il n'y a pas de doublon a fusionner — en forcer un composant
   "Card" generique commun aurait ajoute de l'abstraction sans resoudre de
   vrai probleme (voir REPRENDRE-ICI.md, refonte de septembre : "no
   overengineering"). */
.bouton {
  /* display (22 septembre, bug réel signalé par l'utilisateur, capture à l'appui) : ".bouton" sert
     aussi bien sur un <button> (déjà "inline-block" par défaut) que sur un <a> (SANS ça, "inline" par
     défaut) — un padding sur un élément inline ne réserve pas d'espace vertical propre entre deux
     lignes : quand deux ".bouton" <a> côte à côte ne tenaient plus sur une ligne (mobile), le second
     passait à la ligne mais son fond violet/padding chevauchait visuellement le premier bouton au lieu
     de descendre proprement dessous. */
  display: inline-block;
  align-self: flex-start;
  margin-top: 16px;
  background: var(--violet);
  color: var(--bouton-texte);
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duree-rapide) var(--ease-standard),
              transform var(--duree-rapide) var(--ease-standard);
}
.bouton:hover { background: var(--violet-sombre); text-decoration: none; }
/* Retour tactile discret au clic — sans ça, un clic ne "se sent" pas. */
.bouton:active { transform: scale(0.97); }
.bouton:disabled, .bouton:disabled:hover {
  background: var(--bordure);
  color: var(--texte-doux);
  cursor: not-allowed;
  transform: none;
}

.bouton-petit { margin-top: 0; padding: 6px 12px; font-size: 14px; }

/* Rangee de raccourcis (page Administration) : les boutons passent a la ligne PROPREMENT — jamais un libelle coupe en deux, espacement regulier. */
.admin-raccourcis { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.admin-raccourcis .bouton { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* Variante secondaire : meme forme que .bouton, sans remplissage — pour
   une action valide mais pas prioritaire a cote d'un bouton principal
   (ex. "Retour" a cote de "Accueil" sur la page d'erreur). */
.bouton-secondaire {
  background: none;
  border: 1px solid var(--bordure);
  color: var(--texte);
}
.bouton-secondaire:hover { background: var(--surface-claire); border-color: var(--violet-decor); }
.bouton-secondaire:disabled, .bouton-secondaire:disabled:hover { background: none; border-color: var(--bordure); }

/* ---- Reglement interieur (page + encart de lecture a l'inscription) ---- */

.bloc-reglement {
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 4px 20px;
  margin: 16px 0;
  background: rgba(var(--surface-rgb), 0.6);
}
.bloc-reglement h2 { font-size: 17px; margin: 20px 0 8px; }
.bloc-reglement ul { margin: 8px 0; padding-left: 22px; }
.bloc-reglement li { margin-bottom: 6px; }
.date-maj { color: var(--texte-doux); font-size: 13px; margin-top: 0; }
.aide-reglement { margin-top: -6px; }
.actions-reglement { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.actions-reglement .bouton { margin-top: 0; }

/* ---- Moderation / administration ---- */

/* Boutons et liens d'action destructrice (rouge). */
.bouton-danger { background: var(--rouge-decor); color: #fff; }
.bouton-danger:hover { background: #8c090f; }

.lien-danger { color: var(--alerte); }
.lien-danger:hover { color: #ffc4c4; }

/* Les petits formulaires d'action inseres dans les pages du forum. */
/* margin-right (22 septembre) : depuis l'ajout du verrouillage, 3 formulaires ".barre-admin" (chacun
   deja en "display:inline" via son style HTML, voir sujet.ejs) peuvent se suivre sur la meme ligne
   (epingler + verrouiller + supprimer) — sans espace horizontal, deux boutons "lien-bouton" adjacents
   (texte seul, sans bordure) se lisaient comme un seul mot ("...catégorie Déverrouiller"). */
.barre-admin { margin: 0 12px 20px 0; }
.barre-suivi { margin: 0 0 12px; }
.message-admin { display: inline; margin: 0; }
.message-admin .lien-bouton { font-size: 13px; }
/* margin-right (22 septembre) : meme correction que .barre-admin ci-dessus — epingler + verrouiller
   peuvent maintenant se suivre sur la meme ligne, il leur faut un vrai espace entre eux. */
.sujet-admin { display: inline-block; margin: 6px 12px 0 0; }
.sujet-admin .lien-bouton { font-size: 13px; }

/* Tableaux de l'espace /admin : ils defilent horizontalement sur
   telephone au lieu de deformer la page. */
.table-wrap {
  overflow-x: auto;
  /* Sans ceci, un <div> bloc reste normalement borne a la largeur de son
     parent tout seul — MAIS ici le parent est un enfant flex qui passe en
     colonne sur mobile (voir .app-shell, @media max-width:860px) : sur cet
     axe (croise), un flex-item "stretch" par defaut peut quand meme
     s'agrandir jusqu'a la largeur MINIMALE de son propre contenu (ici, un
     tableau large avec des cellules en "white-space: nowrap") plutot que
     de rester borne. Resultat concret constate le 7 septembre : le
     tableau entier (dont ses colonnes d'actions) devenait invisible et
     INACCESSIBLE sur telephone — pas juste "a faire defiler", vraiment
     hors d'atteinte, "overflow-x: hidden" sur html/body (le filet de
     securite juste en dessous) coupant tout court plutot que de laisser
     defiler. "max-width: 100%" force ce <div> a ne jamais depasser la
     largeur reellement disponible, pour que ce soit LUI qui defile
     (horizontalement, au doigt) et plus jamais la page entiere. */
  max-width: 100%;
  border: 1px solid var(--bordure);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.table-admin {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.table-admin th,
.table-admin td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bordure);
  white-space: nowrap;
  vertical-align: top;
}
.table-admin thead th {
  background: rgba(var(--fond-rgb), 0.6);
  color: var(--texte-doux);
  font-weight: 600;
}
.table-admin tbody tr:last-child td { border-bottom: none; }
/* Survol de ligne : purement fonctionnel (reperer facilement la ligne
   lue sur un tableau dense), pas de transform/ombre decorative — une
   page d'admin privilegie la vitesse de lecture, voir section admin
   du plan. */
.table-admin tbody tr:hover td { background: rgba(var(--surface-rgb), 0.6); }
.table-admin tr.ligne-bannie { background: rgba(175, 11, 18, 0.12); }
.table-admin tr.ligne-bannie:hover td { background: rgba(175, 11, 18, 0.2); }

.cellule-email { white-space: normal; max-width: 22ch; overflow-wrap: break-word; }
.cellule-actions form { display: inline-block; margin: 0 14px 0 0; }
.cellule-actions form:last-child { margin-right: 0; }

/* La table des membres a le meme probleme que celle des signalements
   (voir plus bas) : une adresse email longue deborde visuellement sur la
   colonne "Contenu" sous table-layout: auto. Meme remede : largeurs
   explicites sous table-layout: fixed. */
.table-membres { table-layout: fixed; min-width: 900px; }
.table-membres th, .table-membres td { white-space: normal; overflow-wrap: break-word; }
.table-membres th:nth-child(1), .table-membres td:nth-child(1) { width: 16%; }
.table-membres th:nth-child(2), .table-membres td:nth-child(2) { width: 22%; }
.table-membres th:nth-child(3), .table-membres td:nth-child(3) { width: 12%; }
.table-membres th:nth-child(4), .table-membres td:nth-child(4) { width: 20%; }
.table-membres th:nth-child(5), .table-membres td:nth-child(5) { width: 30%; }

/* La table des signalements a une colonne "Description" a largeur variable :
   avec un tableau en "table-layout: auto" (les autres tableaux du site),
   "max-width" sur une cellule n'est qu'une suggestion que le navigateur
   peut ignorer, et le texte peut alors deborder VISUELLEMENT par-dessus la
   colonne suivante au lieu de passer a la ligne. "table-layout: fixed" +
   des largeurs explicites par colonne rendent la contrainte reelle. */
.table-signalements { table-layout: fixed; min-width: 800px; }
/* Sous table-layout: fixed, chaque colonne a une largeur reelle : autant
   laisser TOUT passer a la ligne (motifs longs comme "contenu_inapproprie"
   inclus), sinon ce sont eux qui debordent sur la colonne suivante. */
.table-signalements th, .table-signalements td { white-space: normal; overflow-wrap: break-word; }
.table-signalements th:nth-child(1), .table-signalements td:nth-child(1) { width: 9%; }
.table-signalements th:nth-child(2), .table-signalements td:nth-child(2) { width: 13%; }
.table-signalements th:nth-child(3), .table-signalements td:nth-child(3) { width: 15%; }
.table-signalements th:nth-child(4), .table-signalements td:nth-child(4) { width: 26%; }
.table-signalements th:nth-child(5), .table-signalements td:nth-child(5) { width: 13%; }
.table-signalements th:nth-child(6), .table-signalements td:nth-child(6) { width: 15%; }
.table-signalements th:nth-child(7), .table-signalements td:nth-child(7) { width: 9%; }

/* Regression reelle trouvee le 22 septembre (signalee par l'utilisateur, capture a l'appui) : les 6
   tableaux ci-dessous reutilisaient TOUS la classe ".table-signalements" ci-dessus alors qu'aucun n'a
   7 colonnes comme elle — sous table-layout: fixed, les largeurs en % de ".table-signalements"
   s'appliquaient aux mauvaises colonnes, et toute colonne au-dela de la 7e (ex. "Action" d'un tableau
   a 8 colonnes) n'avait plus AUCUNE largeur allouee (les 7 pourcentages faisant deja 100%) — elle
   s'effondrait a une largeur quasi nulle, le texte y passant a la ligne lettre par lettre. Chaque
   tableau a maintenant sa PROPRE classe, avec des largeurs qui correspondent a son VRAI nombre de
   colonnes (somme toujours egale a 100%).

   Demandes de certification (8 colonnes : Statut, Membre, Plateforme, Lien du compte, Capture, Message, Date, Action). */
.table-certification { table-layout: fixed; min-width: 900px; }
.table-certification th, .table-certification td { white-space: normal; overflow-wrap: break-word; }
.table-certification th:nth-child(1), .table-certification td:nth-child(1) { width: 8%; }
.table-certification th:nth-child(2), .table-certification td:nth-child(2) { width: 14%; }
.table-certification th:nth-child(3), .table-certification td:nth-child(3) { width: 10%; }
.table-certification th:nth-child(4), .table-certification td:nth-child(4) { width: 12%; }
.table-certification th:nth-child(5), .table-certification td:nth-child(5) { width: 8%; }
.table-certification th:nth-child(6), .table-certification td:nth-child(6) { width: 26%; }
.table-certification th:nth-child(7), .table-certification td:nth-child(7) { width: 13%; }
.table-certification th:nth-child(8), .table-certification td:nth-child(8) { width: 9%; }

/* File de moderation (6 colonnes : Auteur, Zone, Message, Categories IA, Date, Action). */
.table-file-moderation { table-layout: fixed; min-width: 700px; }
.table-file-moderation th, .table-file-moderation td { white-space: normal; overflow-wrap: break-word; }
.table-file-moderation th:nth-child(1), .table-file-moderation td:nth-child(1) { width: 12%; }
.table-file-moderation th:nth-child(2), .table-file-moderation td:nth-child(2) { width: 10%; }
.table-file-moderation th:nth-child(3), .table-file-moderation td:nth-child(3) { width: 38%; }
.table-file-moderation th:nth-child(4), .table-file-moderation td:nth-child(4) { width: 18%; }
.table-file-moderation th:nth-child(5), .table-file-moderation td:nth-child(5) { width: 13%; }
.table-file-moderation th:nth-child(6), .table-file-moderation td:nth-child(6) { width: 9%; }

/* Historique des infractions (5 colonnes : Auteur, Zone, Niveau, Motif, Date — pas de colonne Action). */
.table-infractions { table-layout: fixed; min-width: 650px; }
.table-infractions th, .table-infractions td { white-space: normal; overflow-wrap: break-word; }
.table-infractions th:nth-child(1), .table-infractions td:nth-child(1) { width: 16%; }
.table-infractions th:nth-child(2), .table-infractions td:nth-child(2) { width: 12%; }
.table-infractions th:nth-child(3), .table-infractions td:nth-child(3) { width: 14%; }
.table-infractions th:nth-child(4), .table-infractions td:nth-child(4) { width: 40%; }
.table-infractions th:nth-child(5), .table-infractions td:nth-child(5) { width: 18%; }

/* Messages bloques en direct (4 colonnes : Auteur, Live, Message bloque, Date). */
.table-alertes-chat { table-layout: fixed; min-width: 600px; }
.table-alertes-chat th, .table-alertes-chat td { white-space: normal; overflow-wrap: break-word; }
.table-alertes-chat th:nth-child(1), .table-alertes-chat td:nth-child(1) { width: 16%; }
.table-alertes-chat th:nth-child(2), .table-alertes-chat td:nth-child(2) { width: 16%; }
.table-alertes-chat th:nth-child(3), .table-alertes-chat td:nth-child(3) { width: 50%; }
.table-alertes-chat th:nth-child(4), .table-alertes-chat td:nth-child(4) { width: 18%; }

/* Messages de contact (7 colonnes : Statut, De, Sujet, Message, Capture, Date, Action — 7 comme
   .table-signalements mais un contenu different colonne par colonne, d'ou sa propre classe plutot
   que de dependre d'une coincidence de comptage). */
.table-contact { table-layout: fixed; min-width: 800px; }
.table-contact th, .table-contact td { white-space: normal; overflow-wrap: break-word; }
.table-contact th:nth-child(1), .table-contact td:nth-child(1) { width: 9%; }
.table-contact th:nth-child(2), .table-contact td:nth-child(2) { width: 13%; }
.table-contact th:nth-child(3), .table-contact td:nth-child(3) { width: 15%; }
.table-contact th:nth-child(4), .table-contact td:nth-child(4) { width: 26%; }
.table-contact th:nth-child(5), .table-contact td:nth-child(5) { width: 9%; }
.table-contact th:nth-child(6), .table-contact td:nth-child(6) { width: 15%; }
.table-contact th:nth-child(7), .table-contact td:nth-child(7) { width: 13%; }

/* Transparence de la moderation (page PUBLIQUE, /transparence) : 3 colonnes courtes (Zone, Niveau,
   Total) — pas le meme risque d'effondrement (aucun texte long a faire tenir), mais sa propre classe
   plutot que de continuer a emprunter celle des signalements. */
.table-transparence-zones { table-layout: fixed; min-width: 420px; }
.table-transparence-zones th:nth-child(1), .table-transparence-zones td:nth-child(1) { width: 45%; }
.table-transparence-zones th:nth-child(2), .table-transparence-zones td:nth-child(2) { width: 40%; }
.table-transparence-zones th:nth-child(3), .table-transparence-zones td:nth-child(3) { width: 15%; }

/* Journal d'audit Arena (voir ARENA.md, 6 colonnes : Date, Acteur, Action, Cible, Raison, Detail) — sa
   propre classe, jamais .table-signalements (voir plus haut : reutiliser cette classe pour un tableau
   avec un nombre de colonnes different a deja cause un vrai bug de largeur, le 22 septembre). */
.table-arena-journal { table-layout: fixed; min-width: 800px; }
.table-arena-journal th, .table-arena-journal td { white-space: normal; overflow-wrap: break-word; }
.table-arena-journal th:nth-child(1), .table-arena-journal td:nth-child(1) { width: 14%; }
.table-arena-journal th:nth-child(2), .table-arena-journal td:nth-child(2) { width: 12%; }
.table-arena-journal th:nth-child(3), .table-arena-journal td:nth-child(3) { width: 16%; }
.table-arena-journal th:nth-child(4), .table-arena-journal td:nth-child(4) { width: 14%; }
.table-arena-journal th:nth-child(5), .table-arena-journal td:nth-child(5) { width: 18%; }
.table-arena-journal th:nth-child(6), .table-arena-journal td:nth-child(6) { width: 26%; }

/* Repere Arena, Lot 8 "Spectateur & temps reel public" (voir ARENA.md) : bracket graphique (SVG fait
   main) — zoom par boutons (transform:scale sur #arena-bracket-svg), pan par scroll natif du conteneur
   (.table-wrap deja etabli), jamais de geste tactile custom. */
.arena-bracket-outils { display: flex; gap: 8px; margin-bottom: 8px; }
.arena-bracket-viewport { max-height: 70vh; overflow: auto; }
#arena-bracket-svg { transition: transform .15s ease; }
.arena-live-lecteur { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; margin-bottom: 16px; }
.arena-live-lecteur iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-md); }

/* Petites pastilles d'etat. */
.etiquette {
  display: inline-block;
  font-size: 11px;
  line-height: 1.4;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--bordure);
  color: var(--texte-doux);
  white-space: nowrap;
}
.etiquette-admin { border-color: var(--violet-decor); color: var(--violet); }
.etiquette-moderateur { border-color: var(--violet-decor); color: var(--violet-sombre); }
.etiquette-banni { border-color: var(--rouge-decor); color: var(--alerte); }

/* Petit symbole (⭐ admin / 🛡️ moderateur) colle au pseudo d'un auteur
   de message, pour le reperer d'un coup d'oeil. */
.symbole-role { font-size: 13px; }

/* Formulaire de bannissement/suspension replie dans un <details>. */
.form-bannir { display: inline-block; }
.form-bannir summary { cursor: pointer; list-style: none; }
.form-bannir summary::-webkit-details-marker { display: none; }
.form-bannir form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(var(--fond-rgb), 0.9);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-top: 8px;
  min-width: 260px;
  font-size: 13px;
  box-shadow: var(--ombre-sm);
}
.form-bannir label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; margin: 0; }
.form-bannir label:has(input[type="radio"]) { flex-direction: row; align-items: center; gap: 6px; }
.form-bannir input[type="radio"] { margin: 0; }   /* la marge par défaut du navigateur (3px 3px 0 5px) décalait le bouton radio du texte et du menu centrés à côté */
.form-bannir input[type="text"], .form-bannir select { font-size: 14px; padding: 6px 8px; }

/* Petite pastille rouge des compteurs (demandes d'ami, messages non lus).
   ":not([hidden])" est necessaire : "display" pose ici a la meme
   specificite que la regle navigateur "[hidden]{display:none}", qui
   perdrait sinon (ces badges sont maintenant caches/affiches en direct
   par JavaScript via l'attribut hidden, voir header.ejs). */
.badge:not([hidden]) {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: var(--radius-pill);
  background: var(--rouge-decor);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-weight: 700;
  /* Rejoue a chaque fois que l'attribut "hidden" est retire (nouveau
     message/demande recu en direct, voir temps-reel-client.js) : le
     navigateur reevalue ce selecteur comme neuf et relance l'animation. */
  animation: le-repere-agrandir var(--duree-rapide) var(--ease-sortie) both;
}

.aide-notifications {
  font-size: 13px;
  color: var(--texte-doux);
  max-width: 260px;
}

/* ---- Amis ---- */

.liste-amis { list-style: none; margin: 0 0 24px; padding: 0; }
.ligne-ami {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(var(--surface-rgb), 0.82);
  border-left: 3px solid var(--bordure);
  margin-bottom: 6px;
}
.actions-ami { display: flex; align-items: center; gap: 14px; }
.actions-ami form { margin: 0; }

/* ---- Sauvegarde de la cle de chiffrement ---- */

.bloc-cle {
  background: rgba(var(--surface-rgb), 0.88);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 24px;
}
.bloc-cle summary { cursor: pointer; font-weight: 600; }
.bloc-cle .aide { max-width: 60ch; margin: 10px 0; }
.btn-fichier { display: inline-block; cursor: pointer; }

/* ---- Signalement ---- */

.lien-signaler { color: var(--texte-doux); font-size: 13px; }
.lien-signaler:hover { color: var(--alerte); }

/* ============================================================
   public/css/04-accueil.css
   Page d'accueil.
   Assemblée avec les autres fichiers de public/css/ dans l'ordre de leur numéro, et servie sous /style.css
   (voir src/web/feuille-de-style.js) : une règle d'un fichier plus loin l'emporte, à spécificité égale.
   ============================================================ */

/* ============================================================
   PAGE D'ACCUEIL (refonte du 6 septembre)
   ============================================================ */

/* Bannière d'accueil (refonte du 30 septembre) : plus d'image de fond, toute la scène est dessinée en CSS à l'identité du Repère —
   bleu du logo à gauche, rouge à droite, blanc au centre (bleu-blanc-rouge du forum francophone), motif d'hexagones, sol quadrillé en
   perspective qui défile vers soi, chevron et nom LE REPÈRE en chrome avec le logo « R manette ». Parallaxe à la souris (--hx/--hy,
   posées par public/accueil-hero.js). Toujours sombre, quel que soit le thème du site. */
.hero-accueil {
  --hx: 0; --hy: 0; --bleu: #2F7BFF; --rouge: #FF2E43;
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; text-align: center;
  min-height: clamp(560px, 48vw, 640px); margin-bottom: 20px; border-radius: 20px; color: #fff;
  flex-direction: column; align-items: center; justify-content: space-between; gap: 22px; padding-top: clamp(22px, 3vw, 36px);
  border: 1px solid transparent;
  background: linear-gradient(#05060B, #05060B) padding-box, linear-gradient(90deg, var(--bleu), rgba(255, 255, 255, .35) 50%, var(--rouge)) border-box;
  box-shadow: -10px 0 34px -20px var(--bleu), 10px 0 34px -20px var(--rouge), 0 14px 30px -18px rgba(0, 0, 0, .6);
}
/* Scène : fond, halos colorés, hexagones, faisceau, sol quadrillé */
.hero-scene { position: absolute; inset: -4%; z-index: -3; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, #0d1224 0%, #070812 45%, #04050a 100%);
  transform: translate3d(calc(var(--hx) * -12px), calc(var(--hy) * -8px), 0); transition: transform .4s ease-out; }
.hero-hexagones { position: absolute; inset: 0; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.14' stroke-width='1'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31z'/%3E%3Cpath d='M28 63v34M1 47.5-26 63M55 47.5 82 63'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 97px;
  -webkit-mask-image: radial-gradient(70% 90% at 50% 40%, transparent 30%, #000 75%); mask-image: radial-gradient(70% 90% at 50% 40%, transparent 30%, #000 75%); }
.hero-grille { position: absolute; left: -40%; right: -40%; bottom: -6%; height: 58%; transform-origin: 50% 0;
  transform: perspective(420px) rotateX(66deg);
  background-image: linear-gradient(rgba(190, 205, 255, .34) 1px, transparent 1px), linear-gradient(90deg, rgba(190, 205, 255, .34) 1px, transparent 1px);
  background-size: 64px 64px; animation: hero-grille 2.8s linear infinite;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 75%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 75%, transparent 100%); }
@keyframes hero-grille { to { background-position: 0 64px, 0 0; } }
.hero-halo { position: absolute; border-radius: 50%; filter: blur(70px); mix-blend-mode: screen; pointer-events: none; }
.hero-halo-bleu { width: 58%; height: 90%; left: -16%; top: 4%; background: radial-gradient(closest-side, rgba(47, 123, 255, .85), rgba(47, 123, 255, 0)); animation: hero-derive 13s ease-in-out infinite alternate; }
.hero-halo-rouge { width: 58%; height: 90%; right: -16%; top: 4%; background: radial-gradient(closest-side, rgba(255, 46, 67, .8), rgba(255, 46, 67, 0)); animation: hero-derive 15s ease-in-out infinite alternate-reverse; }
.hero-halo-blanc { width: 40%; height: 40%; left: 30%; top: -12%; background: radial-gradient(closest-side, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); animation: hero-respire 7s ease-in-out infinite; }
@keyframes hero-derive { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(6%, 8%) scale(1.12); } }
.hero-faisceau { position: absolute; left: 50%; top: -10%; width: 70%; height: 90%; transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%, transparent 160deg, rgba(255, 255, 255, .07) 172deg, rgba(255, 255, 255, .12) 180deg, rgba(255, 255, 255, .07) 188deg, transparent 200deg);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 90%); mask-image: linear-gradient(180deg, #000 20%, transparent 90%); }

/* Marque : chevron, logo « R manette », LE REPÈRE en chrome, filets bleu / blanc / rouge */
.hero-marque { position: relative; z-index: 0; display: grid; justify-items: center; gap: 2px;
  transform: translate3d(calc(var(--hx) * 6px), calc(var(--hy) * 4px), 0); transition: transform .4s ease-out; pointer-events: none; }
.hero-chevron { position: relative; width: clamp(150px, 20vw, 230px); height: 22px; margin-bottom: 6px; }
.hero-chevron::before, .hero-chevron::after { content: ''; position: absolute; bottom: 0; width: 52%; height: 3px; border-radius: 3px; }
.hero-chevron::before { left: 0; transform-origin: 100% 50%; transform: rotate(-11deg); background: linear-gradient(90deg, transparent, var(--bleu)); box-shadow: 0 0 14px 2px rgba(47, 123, 255, .7); }
.hero-chevron::after { right: 0; transform-origin: 0 50%; transform: rotate(11deg); background: linear-gradient(90deg, var(--rouge), transparent); box-shadow: 0 0 14px 2px rgba(255, 46, 67, .7); }
.hero-marque-logo { width: clamp(64px, 7vw, 92px); height: auto; filter: drop-shadow(0 0 22px rgba(47, 123, 255, .75)) drop-shadow(0 10px 24px rgba(0, 0, 0, .6));
  animation: hero-flotte 5s ease-in-out infinite; }
@keyframes hero-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.hero-marque-nom { display: flex; align-items: flex-start; gap: .12em; margin-top: 4px; line-height: .9; font-weight: 900; font-style: italic; text-transform: uppercase;
  transform: skewX(-6deg); filter: drop-shadow(-8px 0 18px rgba(47, 123, 255, .55)) drop-shadow(8px 0 18px rgba(255, 46, 67, .55)); }
.hero-marque-le, .hero-marque-repere {
  background: linear-gradient(180deg, #ffffff 0%, #eef2ff 38%, #9aa3bd 52%, #e7ebf7 70%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-marque-le { font-size: clamp(16px, 1.9vw, 24px); margin-top: .25em; }
.hero-marque-repere { font-size: clamp(44px, 6.6vw, 82px); letter-spacing: .02em; }
.hero-marque-filets { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.hero-marque-filets i { display: block; height: 3px; border-radius: 3px; }
.hero-marque-filets i:nth-child(1) { width: clamp(40px, 6vw, 70px); background: var(--bleu); box-shadow: 0 0 12px var(--bleu); }
.hero-marque-filets i:nth-child(2) { width: clamp(24px, 3vw, 36px); background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .8); }
.hero-marque-filets i:nth-child(3) { width: clamp(40px, 6vw, 70px); background: var(--rouge); box-shadow: 0 0 12px var(--rouge); }
.hero-voile { position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(5, 6, 11, .15) 0%, rgba(5, 6, 11, 0) 30%, rgba(5, 6, 11, .55) 62%, rgba(5, 6, 11, .92) 100%),
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5, 6, 11, .75) 100%); }
.hero-decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* Néons verticaux : reprennent les tubes de la bannière et respirent doucement (petit grésillement à mi-cycle) */
.hero-neon { position: absolute; top: -10%; bottom: 18%; width: 3px; border-radius: 3px; filter: blur(.4px); animation: hero-respire 3.6s ease-in-out infinite; }
.hero-neon-bleu { left: 17%; background: linear-gradient(180deg, transparent, var(--bleu) 25%, var(--bleu) 80%, transparent); box-shadow: 0 0 18px 4px rgba(47, 123, 255, .55), 0 0 60px 14px rgba(47, 123, 255, .22); }
.hero-neon-rouge { right: 17%; background: linear-gradient(180deg, transparent, var(--rouge) 25%, var(--rouge) 80%, transparent); box-shadow: 0 0 18px 4px rgba(255, 46, 67, .55), 0 0 60px 14px rgba(255, 46, 67, .22); animation-delay: -1.8s; }
@keyframes hero-respire { 0%, 100% { opacity: .55; } 50% { opacity: 1; } 52% { opacity: .7; } 54% { opacity: 1; } }
/* Sol : ligne de lumière bleu → blanc → rouge */
.hero-sol { position: absolute; left: 6%; right: 6%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--bleu) 20%, #fff 50%, var(--rouge) 80%, transparent);
  box-shadow: 0 0 24px 4px rgba(255, 255, 255, .18); opacity: .8; }
.hero-balayage { position: absolute; top: -30%; bottom: -30%; left: -40%; width: 28%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), rgba(255, 255, 255, .13), rgba(255, 255, 255, .07), transparent);
  animation: hero-balaie 7s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes hero-balaie { 0%, 40% { left: -40%; } 100% { left: 130%; } }
/* Hexagones (motif de la bannière) qui montent lentement : bleus à gauche, rouges à droite, quelques blancs */
.hero-hex { position: absolute; bottom: -40px; left: calc(3% + var(--i) * 8.2%); width: 16px; aspect-ratio: 1 / 1.1547;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--bleu); opacity: 0;
  animation: hero-monte calc(9s + var(--i) * .9s) linear calc(var(--i) * -1.7s) infinite; }
.hero-hex:nth-of-type(3n) { width: 24px; }
.hero-hex:nth-of-type(4n + 1) { width: 11px; }
.hero-hex:nth-of-type(n + 7) { background: var(--rouge); }
.hero-hex:nth-of-type(5n) { background: rgba(255, 255, 255, .8); }
@keyframes hero-monte { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: .35; } 80% { opacity: .15; } 100% { transform: translateY(-460px) rotate(90deg); opacity: 0; } }

/* Contenu */
.hero-accueil-texte { position: relative; max-width: 820px; padding: 0 22px 26px; transform: translate3d(calc(var(--hx) * 4px), calc(var(--hy) * 3px), 0); }
.hero-point { position: relative; display: inline-block; flex-shrink: 0; margin-right: 7px; vertical-align: middle; width: 8px; height: 8px; border-radius: 50%; background: #22E08A; box-shadow: 0 0 8px #22E08A; }
.hero-point::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #22E08A; animation: pulse-live 1.4s linear infinite; }
.hero-accueil-titre { margin: 0; font-size: clamp(26px, 3.6vw, 42px); line-height: 1.08; font-weight: 900; letter-spacing: -.01em; color: #fff; text-transform: none;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
/* « entièrement francophone » : bleu (côté gauche de la bannière) → blanc → rouge (côté droit), avec un éclat qui passe */
.hero-accueil-titre span { background:
    linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .95) 50%, transparent 65%) -150% 0 / 40% 100% no-repeat,
    linear-gradient(90deg, #5E9BFF, #fff 50%, #FF5A68);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; animation: hero-reflet 6s ease-in-out infinite; }
@keyframes hero-reflet { 0%, 45% { background-position: -150% 0, 0 0; } 100% { background-position: 250% 0, 0 0; } }
.hero-accroche { margin: 12px auto 0; max-width: 560px; font-size: clamp(14px, 1.5vw, 16.5px); line-height: 1.55; color: rgba(255, 255, 255, .78); }
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.hero-bouton { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 800;
  font-size: 15px; text-decoration: none; transition: transform .25s, box-shadow .25s, background .25s; }
.hero-bouton:hover { transform: translateY(-2px); text-decoration: none; }
.hero-bouton, .hero-bouton:hover, .hero-bouton:focus-visible { color: #fff; }
.hero-bouton-principal { background: linear-gradient(90deg, #2F6BFF, #7C3AED 50%, #FF2E43);
  box-shadow: 0 10px 26px -10px rgba(124, 58, 237, .9), inset 0 1px 0 rgba(255, 255, 255, .25); }
.hero-bouton-principal::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%); animation: hero-eclat 3.6s ease-in-out infinite; }
@keyframes hero-eclat { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.hero-bouton-principal span { transition: transform .25s; }
.hero-bouton-principal:hover span { transform: translateX(4px); }
.hero-bouton-verre { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-bouton-verre:hover { background: rgba(255, 255, 255, .15); }
.hero-stats { display: flex; justify-content: center; gap: clamp(22px, 4vw, 44px); margin: 22px 0 0; padding: 0; list-style: none; }
.hero-stats li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hero-stats strong { display: inline-flex; align-items: center; font-size: clamp(20px, 2.4vw, 26px); font-weight: 900; font-variant-numeric: tabular-nums; }
.hero-stats > li > span { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.hero-stats li + li::before { content: ''; position: absolute; left: calc(clamp(22px, 4vw, 44px) / -2); top: 15%; bottom: 15%; width: 1px; background: rgba(255, 255, 255, .18); }
@media (max-width: 600px) {
  .hero-accueil { min-height: 0; border-radius: 16px; gap: 16px; }
  .hero-accueil-titre span { display: block; }
  .hero-stats { gap: 22px; flex-wrap: wrap; }
  /* Mobile : la bannière entière en largeur (logo jamais rogné), fondue vers le noir sous le logo */
  .hero-grille { height: 46%; background-size: 48px 48px; }
  .hero-halo-bleu, .hero-halo-rouge { width: 80%; }
  .hero-marque-repere { font-size: 44px; }
  .hero-neon-bleu { left: 5%; } .hero-neon-rouge { right: 5%; }
  .hero-accueil-texte { padding: 0 14px 20px; }
  .hero-bouton { padding: 11px 18px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene *, .hero-marque-logo, .hero-neon, .hero-balayage, .hero-hex, .hero-accueil-titre span, .hero-bouton-principal::after, .hero-point::after { animation: none !important; }
  .hero-hex, .hero-balayage { display: none; }
}

/* Heros de la page d'accueil Arena (voir views/arena-accueil.ejs) : meme motif exact que .hero-accueil
   (photo en arriere-plan + degrade sombre pour la lisibilite du texte, jamais theme-dependant), sur
   /images/arena-hero.webp (scene d'esport, dominante bleu/violet neon — le degrade reste sombre/neutre
   plutot que de recolorer l'image, ses propres teintes portent deja l'identite "esport" voulue). */
.hero-arena {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-height: 220px;
  margin-bottom: 20px;
  background-image: url("/images/arena-hero.webp");
  background-size: cover;
  background-position: center 40%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
}
.hero-arena::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 6, 14, 0.35) 0%, rgba(3, 6, 14, 0.85) 100%);
}
.hero-arena-texte { position: relative; padding: 20px 20px 26px; max-width: 640px; }
.hero-arena-texte .titre-page,
.hero-arena-texte .sous-titre { color: #f0edf9; }
.hero-arena-texte .titre-page { margin: 0 0 6px; }
.hero-arena-texte .sous-titre { margin: 0; }
/* Logo "Repère Arena" (le titre texte reste présent pour les lecteurs d'écran, voir .invisible) */
.hero-arena-logo {
  display: block;
  width: auto;
  height: clamp(140px, 22vw, 200px);
  margin: 0 auto 10px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
}
.sidebar-lien-logo { width: 18px; height: 18px; vertical-align: -3px; }

/* Podium d'un tournoi et palmarès (voir ARENA-PODIUM.md) : trophées or/argent/bronze en images. */
.arena-podium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.arena-podium-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-md);
  padding: 12px 10px;
}
.arena-podium-or { border-color: #d4af37; }
.arena-podium-argent { border-color: #aeb8c4; }
.arena-podium-bronze { border-color: #b8733d; }
.arena-podium-rang { font-weight: 700; font-size: 13px; color: var(--texte-doux); }
.arena-trophee { width: 96px; height: 96px; object-fit: contain; }
.arena-palmares { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0 0 20px; }
.arena-palmares li {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--radius-md);
  padding: 6px 12px 6px 6px;
}
.arena-palmares .arena-trophee { width: 48px; height: 48px; }
.arena-palmares small { display: block; color: var(--texte-doux); }

/* ---- Cartes d'accroche ---- */

.cartes-accroche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.carte-accroche {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: border-color var(--duree-rapide) var(--ease-standard),
              transform var(--duree-rapide) var(--ease-standard),
              box-shadow var(--duree-rapide) var(--ease-standard);
}
.carte-accroche:hover {
  border-color: var(--violet-decor);
  transform: translateY(-2px);
  box-shadow: var(--ombre-sm);
  text-decoration: none;
}
.carte-accroche-icone {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(var(--violet-rgb), 0.16);
  font-size: 18px;
}
.carte-accroche strong { display: block; font-size: 14px; }
.carte-accroche .aide { margin: 2px 0 0; }

/* ---- Corps : categories a gauche, widgets a droite ---- */

.accueil-corps {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.accueil-principal { flex: 1 1 480px; min-width: 0; }
.accueil-widgets { flex: 0 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.widget-accueil {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-md);
  padding: 16px;
}
.widget-accueil h3 { margin: 0 0 10px; font-size: 14px; }

.widget-accueil-gros { font-size: 30px; font-weight: 800; margin: 0; color: var(--violet); }

.avatars-empiles { display: flex; margin: 10px 0 0; }
.avatars-empiles .avatar,
.avatars-empiles .avatar-secours {
  width: 32px;
  height: 32px;
  font-size: 14px;
  border: 2px solid var(--surface);
  margin-left: -10px;
}
.avatars-empiles :first-child { margin-left: 0; }

.stats-mini-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}
.stats-mini-grille strong { display: block; font-size: 18px; }
.stats-mini-grille span { display: block; font-size: 11px; color: var(--texte-doux); text-transform: uppercase; letter-spacing: 0.03em; }

.widget-derniers-messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* "min-width: 0" sur le <li> ET son conteneur de texte (pas seulement
   "display:block" sur le lien) : sans ca, un <li> flex garde par defaut sa
   largeur "min-content" (celle du texte NON tronque) — la troncature
   "text-overflow: ellipsis" du lien ne peut alors jamais s'enclencher, et
   le widget entier s'etire au-dela de l'ecran des qu'un sujet a un titre
   un peu long (constate le 7 septembre, meme cause que .page plus haut). */
.widget-derniers-messages li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.widget-derniers-messages .avatar,
.widget-derniers-messages .avatar-secours { width: 30px; height: 30px; font-size: 13px; flex: 0 0 auto; }
.widget-derniers-messages a { color: var(--texte); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.widget-derniers-messages li span { min-width: 0; flex: 1 1 auto; }
.widget-derniers-messages .aide { margin: 0; font-size: 12px; }

@media (max-width: 700px) {
  .accueil-widgets { flex: 1 1 100%; width: 100%; }
  .categorie-ligne-dernier { display: none; }
}

/* ---- Pied de page ---- */

.pied {
  border-top: 1px solid var(--bordure);
  color: var(--texte-doux);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}
.pied p { margin: 0; }
.pied p + p { margin-top: 6px; }

/* ============================================================
   public/css/05-sorties-jeux.css
   Pages « Sorties à venir » (compte à rebours par jeu).
   Assemblée avec les autres fichiers de public/css/ dans l'ordre de leur numéro, et servie sous /style.css
   (voir src/web/feuille-de-style.js) : une règle d'un fichier plus loin l'emporte, à spécificité égale.
   ============================================================ */

/* ============================================================
   PAGES "SORTIES A VENIR" (compte a rebours par jeu)
   ============================================================ */

.jeu-banniere {
  position: relative;
  height: clamp(220px, 32vw, 380px);
  margin: 0 0 24px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--bordure);
  animation: le-repere-fondu-monte var(--duree-normale) var(--ease-sortie) both;
}

.jeu-banniere-voile {
  position: absolute;
  inset: 0;
  /* Meme remarque que .hero-accueil::before : assombrit une photo, jamais
     theme-dependant. */
  background: linear-gradient(to top, rgba(12, 10, 20, 0.95) 0%, rgba(12, 10, 20, 0.35) 55%, rgba(12, 10, 20, 0.05) 100%);
}

.jeu-banniere-texte {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 24px;
}
.jeu-banniere-texte .titre-page { margin: 4px 0 6px; }
.jeu-banniere-texte .sous-titre { margin: 0; }

.jeu-etiquette {
  display: inline-block;
  background: var(--rouge-decor);
  color: var(--texte);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.jeu-compte-a-rebours { margin: 0 0 24px; }

.ca-r-grille {
  display: flex;
  gap: 12px;
}

.ca-r-unite {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-md);
  padding: 14px 8px;
  text-align: center;
}
.ca-r-unite span {
  display: block;
  font-size: clamp(24px, 6vw, 36px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--violet);
}
.ca-r-unite small {
  display: block;
  color: var(--texte-doux);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.ca-r-termine {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin: 0;
}

.jeux-liste { list-style: none; margin: 0; padding: 0; }
.jeux-liste li { padding: 8px 0; border-bottom: 1px solid var(--bordure); }
.jeux-liste li:last-child { border-bottom: none; }
.jeux-liste li a { transition: color var(--duree-rapide) var(--ease-standard); }
.jeux-liste li a:hover { color: var(--violet-sombre); }

.jeux-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.jeu-carte {
  position: relative;
  display: block;
  height: 160px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--bordure);
  transition: border-color var(--duree-rapide) var(--ease-standard),
              transform var(--duree-rapide) var(--ease-standard),
              box-shadow var(--duree-rapide) var(--ease-standard);
}
.jeu-carte:hover {
  text-decoration: none;
  border-color: var(--violet);
  transform: translateY(-3px);
  box-shadow: var(--ombre-md);
}

.jeu-carte-voile {
  position: absolute;
  inset: 0;
  /* Meme remarque que .hero-accueil::before : assombrit une photo, jamais
     theme-dependant. */
  background: linear-gradient(to top, rgba(12, 10, 20, 0.95) 0%, rgba(12, 10, 20, 0.1) 70%);
}

.jeu-carte-texte {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Couleurs fixes, jamais les jetons de theme (22 septembre, bug reel trouve a l'audit) : ce texte est
   toujours pose sur ".jeu-carte-voile" (fond photo assombri), jamais sur le fond de page — var(--texte)
   y devient presque noir sur noir en theme clair (#1b1730 sur un voile ~rgba(12,10,20,.95)), illisible.
   Meme raison que ".lr-hero-titre"/".lr-hero-sous" (accueil Live) qui codent deja du blanc en dur. */
.jeu-carte-texte strong { color: #fff; }
.jeu-carte-texte .aide { color: rgba(255, 255, 255, 0.82); }

/* ---- Nouveautés, teaser YouTube et description officielle (page /jeux/:slug) ---- */
.jeu-carte-nouveau { background: #16a34a; color: #fff; }
.jeu-disponible { text-align: center; }
.jeu-teaser { margin: 0 0 24px; }
.jeu-teaser-cadre { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--bordure); background: #05060b; display: grid; place-items: center; }
.jeu-teaser-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.jeu-teaser-cadre .consentement-tiers { margin: 16px; max-width: 520px; background: rgba(var(--surface-rgb), .92); }
.jeu-description-officielle { margin: 0 0 8px; padding: 4px 16px; border-left: 3px solid var(--violet); color: var(--texte); }
.jeu-description-officielle p { margin: 10px 0; }
.jeu-original { margin: 4px 0 12px; }
.jeu-original summary { cursor: pointer; font-size: 13px; color: var(--texte-doux); }
.consentement-tiers a { font-size: 13px; }

/* ============================================================
   public/css/06-avatars-toasts-palette.css
   Avatars et présence, toasts (notifications temporaires), palette de commandes (Ctrl+K).
   Assemblée avec les autres fichiers de public/css/ dans l'ordre de leur numéro, et servie sous /style.css
   (voir src/web/feuille-de-style.js) : une règle d'un fichier plus loin l'emporte, à spécificité égale.
   ============================================================ */

/* ============================================================
   AVATARS ET STATUT DE PRESENCE
   ============================================================ */

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.avatar-secours {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}
.avatar-grand { width: 96px; height: 96px; font-size: 36px; }

/* ---- Badge "compte certifie" (façon TikTok), voir avatar.ejs et
   badge-verifie.ejs — attribue uniquement par un administrateur, voir
   /verification. ---- */
.avatar-conteneur { position: relative; display: inline-flex; flex-shrink: 0; }
.badge-certifie-avatar {
  position: absolute; right: -2px; bottom: -2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #22d3ee; border: 2px solid var(--fond);
  display: flex; align-items: center; justify-content: center;
}
.badge-certifie-avatar svg { width: 9px; height: 9px; }
.avatar-conteneur-grand .badge-certifie-avatar { width: 30px; height: 30px; border-width: 3px; }
.avatar-conteneur-grand .badge-certifie-avatar svg { width: 16px; height: 16px; }

.badge-certifie-inline {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 15px; height: 15px; border-radius: 50%; background: #22d3ee; margin-left: 4px; flex-shrink: 0;
}
.badge-certifie-inline svg { width: 9px; height: 9px; }

.statut-presence {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--texte-doux);
}
.statut-presence.en-ligne { color: #4caf7d; }
.icone-jeu-actuel { width: 16px; height: 16px; border-radius: 3px; object-fit: contain; background: #0f0f14; flex: 0 0 auto; }

/* Carte "jeu en cours" sur son propre profil (voir profil.ejs) — meme
   principe que .statut-presence mais en plus visible : c'est la seule
   fonctionnalite du site qui ne concerne que l'appli Windows. */
.carte-jeu-actuel { display: flex; align-items: center; gap: 10px; }
.carte-jeu-actuel .icone-jeu-actuel { width: 32px; height: 32px; border-radius: 6px; }
.carte-jeu-actuel[hidden] { display: none; }

/* ---- Petites lignes avec avatar (amis, conversations) ---- */

.ligne-avec-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ligne-avec-avatar .infos-membre {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bio-membre {
  max-width: 60ch;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 10px 0 0;
}

/* ---- Mini-fiche de profil (facon Discord), voir carte-profil.js ---- */

.carte-profil {
  position: fixed;
  z-index: 1200;
  width: min(300px, calc(100vw - 16px));
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-md);
  box-shadow: var(--ombre-lg);
  padding: 20px 16px 16px;
  text-align: center;
  /* Surgit en overlay au clic/survol d'un pseudo : une apparition nette
     plutot qu'un pop brutal (voir section "Profil rapide"). */
  animation: le-repere-agrandir var(--duree-rapide) var(--ease-sortie) both;
}
.carte-profil .avatar { margin: 0 auto 10px; }
.carte-profil-etat { color: var(--texte-doux); margin: 0; }
.carte-profil-fermer {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--texte);
  cursor: pointer;
}
.carte-profil-fermer:hover { background: rgba(255, 255, 255, 0.18); }
.carte-profil-pseudo { font-size: 18px; font-weight: 700; margin: 0; }
.carte-profil-meta { color: var(--texte-doux); font-size: 13px; margin: 6px 0 0; }
.carte-profil-bio {
  color: var(--texte);
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-height: 6em;
  overflow-y: auto;
  margin: 10px 0 0;
  text-align: left;
}
.carte-profil-lien { display: block; margin: 16px 0 0; }

/* ============================================================
   TOASTS (notifications temporaires), voir toasts.js
   ============================================================ */

.toasts-conteneur {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2050;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
}
.toast {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--violet-decor);
  border-radius: var(--radius-md);
  box-shadow: var(--ombre-lg);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--texte);
  cursor: pointer;
  animation: le-repere-fondu-monte var(--duree-rapide) var(--ease-sortie) both;
}
.toast-erreur { border-left-color: var(--rouge-decor); }
.toast-succes { border-left-color: #4caf7d; }
.toast-sortie {
  animation: toast-disparition var(--duree-normale) var(--ease-standard) both;
}
@keyframes toast-disparition {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(12px); }
}

/* ============================================================
   PALETTE DE COMMANDES (Ctrl+K / Cmd+K), voir palette-commandes.js
   ============================================================ */

/* :not([hidden]) indispensable ici, meme raison que .bandeau-appel plus
   haut : "hidden" est bascule par JavaScript, jamais par une classe. */
.palette-commandes-overlay:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(6, 8, 12, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
}
.palette-commandes-carte {
  width: min(560px, 100%);
  max-height: 70vh;
  background: rgba(var(--surface-rgb), 0.98);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: le-repere-agrandir var(--duree-rapide) var(--ease-sortie) both;
}
.palette-commandes-champ {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bordure);
  flex: 0 0 auto;
}
.palette-commandes-champ-icone { color: var(--texte-doux); flex: 0 0 auto; }
.palette-commandes-champ input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--texte);
  font-size: 16px;
  padding: 0;
}
.palette-commandes-champ input:focus { outline: none; }
.palette-commandes-echap {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--texte-doux);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}
.palette-commandes-liste { overflow-y: auto; padding: 8px; list-style: none; margin: 0; }
.palette-commandes-groupe-titre {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texte-doux);
  padding: 10px 10px 4px;
}
.palette-commandes-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--texte);
  cursor: pointer;
  font-size: 14px;
  transition: background var(--duree-rapide) var(--ease-standard), color var(--duree-rapide) var(--ease-standard);
}
.palette-commandes-item-icone { flex: 0 0 auto; width: 18px; text-align: center; color: var(--texte-doux); }
.palette-commandes-item.selectionne,
.palette-commandes-item:hover { background: rgba(var(--violet-rgb), 0.14); color: var(--violet); }
.palette-commandes-item.selectionne .palette-commandes-item-icone,
.palette-commandes-item:hover .palette-commandes-item-icone { color: var(--violet); }
.palette-commandes-vide { padding: 24px; text-align: center; color: var(--texte-doux); font-size: 14px; }

/* Indice discret "Ctrl K" dans la barre de recherche du bandeau, pour que
   le raccourci reste decouvrable sans ajouter un nouveau bouton — clic
   sur l'indice = meme raccourci que Ctrl+K (voir data-ouvrir-palette). */
.recherche-bandeau-raccourci {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--texte-doux);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  cursor: pointer;
  white-space: nowrap;
  background: var(--surface);
}
.recherche-bandeau-raccourci:hover { border-color: var(--violet-decor); color: var(--texte); }

/* ============================================================
   public/css/07-admin-trafic.css
   Tableau de bord du trafic (administration).
   Assemblée avec les autres fichiers de public/css/ dans l'ordre de leur numéro, et servie sous /style.css
   (voir src/web/feuille-de-style.js) : une règle d'un fichier plus loin l'emporte, à spécificité égale.
   ============================================================ */

/* ============================================================
   TABLEAU DE BORD TRAFIC (admin)
   ============================================================ */

.stats-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 16px 0 32px;
}

.stat-tuile {
  background: rgba(var(--surface-rgb), 0.88);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-libelle { font-size: 13px; color: var(--texte-doux); }
.stat-valeur { font-size: 28px; font-weight: 700; }

.graphique {
  background: rgba(var(--surface-rgb), 0.88);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 16px 16px 8px;
  margin-bottom: 8px;
}

.graphique-tooltip {
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
}
.graphique-tooltip strong { color: var(--texte); }

.table-secours { margin-bottom: 32px; }
.table-secours summary { color: var(--texte-doux); cursor: pointer; font-size: 14px; }
.table-secours .table-wrap { margin-top: 10px; }

.barres { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }

.barre-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2fr auto;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.barre-etiquette {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texte-doux);
}

.barre-piste {
  background: rgba(var(--fond-rgb), 0.9);
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
}

.barre-remplissage {
  display: block;
  height: 100%;
  background: var(--violet);
  border-radius: 4px;
}

.barre-valeur { font-weight: 600; min-width: 2.5em; text-align: right; }

/* ============================================================
   public/css/08-recherche.css
   Recherche : barre du bandeau et page de résultats.
   Assemblée avec les autres fichiers de public/css/ dans l'ordre de leur numéro, et servie sous /style.css
   (voir src/web/feuille-de-style.js) : une règle d'un fichier plus loin l'emporte, à spécificité égale.
   ============================================================ */

/* ============================================================
   RECHERCHE (barre du bandeau + page de resultats)
   ============================================================ */

/* ---- La barre de recherche compacte, dans le bandeau ---- */

/* Icone dans le champ plutot qu'un bouton separe (refonte du 7 septembre,
   voir la maquette) : le bouton "Rechercher" existe toujours pour la
   soumission au clavier/lecteur d'ecran, juste rendu invisible (.invisible,
   deja utilise ailleurs sur le site). */
.recherche-bandeau {
  position: relative;
  flex: 0 1 220px;
}
.recherche-bandeau-icone {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texte-doux);
  font-size: 13px;
  pointer-events: none;
}
.recherche-bandeau input {
  width: 100%;
  padding: 8px 54px 8px 32px;
  font-size: 14px;
  border-radius: 999px;
  background: var(--surface);
}
.recherche-bandeau input:focus { border-color: var(--violet); }

/* ---- Le formulaire de filtres, sur la page de resultats ---- */

.formulaire-recherche { max-width: 640px; }

.filtres-recherche {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 8px 0 4px;
}
.filtres-recherche label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--texte-doux);
  margin-top: 0;
  flex: 1 1 140px;
}
.filtres-recherche select,
.filtres-recherche input {
  font-size: 14px;
}

/* ---- Les resultats eux-memes ---- */

.resultat-categorie { margin: 0 0 4px; font-size: 12px; }
.resultat-categorie a {
  color: var(--texte-doux);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.resultat-extrait {
  margin: 4px 0 0;
  color: var(--texte-doux);
  overflow-wrap: break-word;
}
.resultat-extrait mark,
.sujet-titre mark {
  background: rgba(var(--violet-rgb), 0.35);
  color: var(--texte);
  padding: 0 2px;
  border-radius: 2px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 24px 0;
  font-size: 14px;
}

/* ---- Navigation mobile web (refonte navigation, 22 septembre) ----
   Sous 860px, la barre laterale (.sidebar-app) et les onglets du bandeau
   disparaissaient auparavant SANS remplacement — seul le menu de compte du
   bandeau (raccourcis Messages/MP groupes/Amis/Serveurs) restait, et les
   destinations propres a la barre laterale (Matchs, Classement, Chercher
   une team, Categories...) devenaient carrement injoignables. Desormais :
   une barre basse (.nav-mobile, 5 destinations les plus utilisees + le
   bouton "Menu") plus un tiroir qui est LA MEME .sidebar-app que sur
   desktop, juste repositionnee en CSS — memes liens, memes droits (calcules
   cote serveur comme avant), memes compteurs mis a jour en direct
   (.badge-messages etc., cibles par classe dans header.ejs) : rien n'est
   duplique ni recalcule. */
@media (max-width: 860px) {
  .app-shell { flex-direction: column; padding: 0 16px; }

  .sidebar-app {
    display: flex;
    position: fixed;
    inset: 0 0 0 auto;
    top: 0;
    width: min(300px, 86vw);
    max-height: none;
    margin: 0;
    padding: 16px;
    background: var(--surface);
    border-left: 1px solid var(--bordure);
    box-shadow: var(--ombre-lg);
    z-index: 950;
    transform: translateX(100%);
    transition: transform var(--duree-normale) var(--ease-standard);
  }
  .sidebar-app.ouverte { transform: translateX(0); }

  .sidebar-app-tete-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--bordure);
  }
  .sidebar-app-tete-mobile button {
    background: none; border: none; color: var(--texte); font-size: 20px; line-height: 1; padding: 6px; cursor: pointer; border-radius: var(--radius-sm);
  }
  .sidebar-app-tete-mobile button:hover { background: var(--surface-claire); }

  /* Fond assombri derriere le tiroir ouvert : cree par JS (nav-mobile.js),
     jamais affiche sans lui (voir aussi la regle non-media, plus haut dans
     ce fichier, qui garde ".hidden" par defaut). */
  .sidebar-app-fond {
    position: fixed; inset: 0; z-index: 940;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0; pointer-events: none;
    transition: opacity var(--duree-normale) var(--ease-standard);
  }
  .sidebar-app-fond.visible { opacity: 1; pointer-events: auto; }

  /* "width: 100%" explicite, pas seulement "min-width: 0" : une fois
     .app-shell en colonne (ligne au-dessus), la largeur de .page devient
     l'axe CROISE du flex, pas l'axe principal — "flex: 1" (l'axe
     principal, ici la hauteur) n'a alors plus prise dessus, et
     "min-width: 0" seul ne suffit pas toujours a l'empecher de s'etirer
     jusqu'a la largeur MINIMALE de son contenu le plus large (par ex. un
     tableau /admin avec des cellules en "white-space: nowrap"). Constate
     le 7 septembre : .page se rendait alors bien plus large que l'ecran,
     "overflow-x: hidden" sur html/body (voir plus haut) coupant la partie
     en trop au lieu de laisser defiler — les colonnes de droite d'un
     tableau devenaient carrement inaccessibles. */
  .page { max-width: none; width: 100%; padding: 20px 0 64px; }
  /* Espace reserve pour ne pas passer SOUS la barre de navigation basse — sauf sur une page qui n'en affiche pas
     (sansNavMobile, voir header.ejs/evenement-classique.ejs), ou le padding normal suffit. */
  body:not(.sans-nav-mobile) .page { padding-bottom: calc(58px + 64px + env(safe-area-inset-bottom)); }

  .nav-mobile { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-app, .sidebar-app-fond { transition: none; }
}

/* Les onglets (Accueil/Jeux/Serveurs/Aide) disparaissent avant que la
   barre laterale ne le fasse : en dessous, Accueil reste joignable via le
   logo et les autres destinations via le menu de compte (raccourcis
   Messages/MP groupes/Amis/Serveurs, voir header.ejs) — pas de nouveau
   menu hamburger construit pour cette passe. */
@media (max-width: 760px) {
  .bandeau-tabs { display: none; }
}

/* ---- Ecrans plus etroits ---- */

@media (max-width: 600px) {
  .titre-page { font-size: 22px; }
  .sujet-ligne { padding-right: 0; }
  .compteur { position: static; display: inline-block; margin-top: 6px; }

  /* Le logo sur une ligne, recherche/cloche/compte en dessous :
     ca tient meme sur un ecran de 320 px. */
  .bandeau-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px;
  }
  .bandeau-droite { flex-wrap: wrap; justify-content: flex-start; gap: 10px 14px; }
  /* Toute la ligne pour la recherche (avant : flex: 1 1 auto, qui la
     laissait partager sa ligne avec la cloche/le compte sur un ecran un
     peu plus large que 320px) : la cloche et le compte passent ainsi
     TOUJOURS ensemble a la ligne suivante, colles au bord GAUCHE, quelle
     que soit la largeur exacte dans cette plage — position previsible,
     necessaire pour la regle juste en dessous. */
  .recherche-bandeau { flex: 1 1 100%; }
  /* Pas de clavier physique "Ctrl" sur mobile/tactile : l'indice n'a
     plus de sens, autant liberer la place sur la barre pleine largeur. */
  .recherche-bandeau-raccourci { display: none; }
  .recherche-bandeau input { padding-right: 32px; }
  .bandeau-compte-pseudo { max-width: 90px; }

  /* Sur grand ecran, ".bandeau-panneau { right: 0 }" ancre logiquement le
     panneau (cloche ou compte) au bord DROIT du bouton qui l'ouvre, lui-
     meme pres du bord droit du bandeau. Ici, sous 600px, la cloche ET le
     compte se retrouvent tous deux pres du bord GAUCHE de l'ecran (voir la
     regle sur .recherche-bandeau juste au-dessus) : un panneau de 240px
     ancre a droite d'un bouton aussi etroit deborde alors hors de l'ecran
     (constate le 7 septembre sur un vrai telephone) — ancre a gauche a la
     place. Jamais plus large que l'ecran non plus, par securite. */
  .bandeau-panneau {
    left: 0;
    right: auto;
    max-width: calc(100vw - 32px);
  }

  .app-shell { padding: 0 16px; }

  /* Les blocs (formulaires, messages, categories) un peu moins matelasses. */
  .formulaire,
  .bloc-reponse,
  .message { padding: 16px; }
  .categorie { padding: 14px 16px; }

  /* Champs de formulaire a 16px : en dessous, l'iPhone zoome tout seul
     sur le champ quand on le touche. */
  input, textarea { font-size: 16px; }

  /* Sur la page d'une categorie, le bouton "Ouvrir un sujet" prend
     toute la largeur : plus facile a viser au pouce. */
  .entete-section .bouton {
    align-self: stretch;
    text-align: center;
    margin-top: 4px;
  }

  /* Tableau de bord trafic : la piste de barre passe en dessous du chemin
     de la page plutot que de forcer 3 colonnes sur un petit ecran. */
  .barre-item { grid-template-columns: 1fr auto; }
  .barre-etiquette { grid-column: 1 / -1; }
}

/* Tres petits ecrans (vieux telephones, fenetres etroites). */
@media (max-width: 380px) {
  .titre-page { font-size: 20px; }
  .bandeau-inner { gap: 8px; }
  .bandeau-droite { gap: 8px; }
}

/* ============================================================
   public/css/09-live.css
   Streaming en direct et rubrique Live (accueil, cartes).
   Assemblée avec les autres fichiers de public/css/ dans l'ordre de leur numéro, et servie sous /style.css
   (voir src/web/feuille-de-style.js) : une règle d'un fichier plus loin l'emporte, à spécificité égale.
   ============================================================ */

/* ============================================================
   Streaming en direct (8 septembre) : /live, /live/:pseudo, /live/studio
   (voir views/live*.ejs, views/chat-stream.ejs, public/chat-stream.js et
   le lecteur public/lecteur-stream/).
   ============================================================ */

.live-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* <details> generique utilise comme panneau repliable avec un <summary>
   deja stylee en bouton (ex. LFG "Poster une annonce") : retire le
   triangle natif du navigateur, qui s'affichait sinon a l'interieur
   meme du bouton, colle a son icone — meme technique deja utilisee sur
   .form-bannir. */
.bloc-repliable summary { list-style: none; cursor: pointer; }
.bloc-repliable summary::-webkit-details-marker { display: none; }
/* Point blanc pulsant : meme langage visuel qu'un "live" Twitch/YouTube,
   pour qu'un stream REELLEMENT en direct se distingue au premier coup
   d'oeil — jamais anime hors de ce petit badge (pas toute la carte). */
.badge-live {
  display: inline-flex; align-items: center; gap: 5px; background: #e53935; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: var(--radius-sm); text-transform: uppercase; line-height: 1.2;
}
.badge-live::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%; background: #fff; flex-shrink: 0;
  animation: pulse-live-point 1.4s ease-out infinite;
}
@keyframes pulse-live-point {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
  70%  { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
/* .badge-live est aussi reutilise (evenements-live.ejs) pour TOUS les
   statuts d'un match, y compris "a venir" et "termine" — retire le
   point pulsant sur ces deux-la specifiquement, sinon un match qui n'a
   pas encore commence ou deja fini paraitrait "en direct maintenant",
   exactement ce que ce point est cense signifier. */
.evenement-badge-a_venir::before,
.evenement-badge-termine::before {
  display: none;
}
.badge-live-compte { margin-left: 6px; }

.live-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 12px 0 32px; }
.live-carte {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--radius-lg);
  overflow: hidden; color: inherit; text-decoration: none;
  transition: transform var(--duree-rapide) var(--ease-standard), border-color var(--duree-rapide) var(--ease-standard), box-shadow var(--duree-rapide) var(--ease-standard);
}
/* Le survol "carte cliquable" (souleve + ombre) ne vise QUE les vraies
   cartes-liens (live.ejs, "a.live-carte") — .live-carte est aussi
   reutilisee sur de simples <div> non cliquables (annonces LFG,
   tuiles de stats sur /transparence, deja marquees cursor:default) qui
   ne doivent jamais donner l'illusion d'etre cliquables. */
a.live-carte:hover { transform: translateY(-3px); border-color: var(--violet); box-shadow: var(--ombre-md); text-decoration: none; }
.live-carte-visuel {
  position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, #2b2440, #0c0a14);
}
.live-carte-visuel img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06); }
.live-carte-visuel .avatar-secours { width: 96px; height: 96px; font-size: 40px; }
.live-carte-visuel .badge-live { position: absolute; top: 10px; left: 10px; }
.live-carte-spectateurs { position: absolute; bottom: 10px; right: 10px; background: rgba(6, 8, 12, 0.7); color: #fff; padding: 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.live-carte-texte { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.live-carte-titre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-carte-pseudo { color: var(--texte-doux); font-size: 14px; }
.live-carte-categorie { color: var(--violet); font-size: 13px; }
.live-liste-suivies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.live-liste-suivies li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.live-liste-suivies a { display: inline-flex; align-items: center; gap: 8px; }
.avatar-petit { width: 28px; height: 28px; font-size: 12px; }
.live-carte-avatar-repli { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }

.live-categories { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px; }
.live-categorie-puce {
  display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--bordure);
  color: var(--texte); border-radius: var(--radius-pill); padding: 5px 12px; font-size: 13px; text-decoration: none;
  transition: border-color var(--duree-rapide) var(--ease-standard), background var(--duree-rapide) var(--ease-standard);
}
.live-categorie-puce:hover { border-color: var(--violet); text-decoration: none; }
.live-categorie-puce.actif { background: var(--violet); border-color: var(--violet); color: var(--bouton-texte); }

/* ============================================================
   Rubrique Live — accueil (views/live.ejs, live-sections.ejs, live-carte.ejs). Préfixe « lr- » : n'écrase aucune règle existante.
   Identité : noir bleuté, surfaces étagées, accents de marque (violet), glow léger, aucun néon ; animations discrètes, coupées en
   « réduire les animations ».
   ============================================================ */
.lr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lr-entete-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lr-section { margin-top: 8px; }

/* Miniature de la chaîne : image ENTIÈRE (jamais recadrée), sur fond sombre. Les avatars de repli restent des pastilles rondes. */
.live-carte-visuel img.lr-miniature { width: 100%; height: 100%; border-radius: 0; object-fit: contain; box-shadow: none; background: #05070d; }
.live-carte.lr-carte { background: linear-gradient(180deg, rgba(var(--surface-rgb), .95), rgba(var(--fond-rgb), .9)); }
a.live-carte.lr-carte:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(var(--violet-rgb), .35); }
.live-carte-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lr-puce { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; background: rgba(var(--violet-rgb), .16); color: var(--texte); }
.lr-puce-alerte { background: rgba(175, 11, 18, .3); }
.lr-tags, .lr-tags-ligne { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.lr-tags-ligne { margin: 0 0 14px; }
.lr-likes { font-size: 12px; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.live-like[hidden] { display: none; }
.live-like-bouton[data-aime="1"] { color: #ff6b81; }
.live-like-bouton:disabled { opacity: .6; }
.lr-reactions { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.lr-reactions[hidden] { display: none; }
.lr-reaction { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--bordure); background: rgba(var(--surface-rgb), .9); color: var(--texte); font-size: 15px; cursor: pointer; font-variant-numeric: tabular-nums; }
.lr-reaction:hover:not(:disabled):not(.lr-reaction-lecture) { border-color: rgba(var(--violet-rgb), .6); }
.lr-reaction:disabled { opacity: .6; }
.lr-reaction-lecture { cursor: default; }
.lr-reaction-n { font-size: 13px; color: var(--texte-doux); }
.lr-flottant { position: absolute; inset: 0 0 100% 0; height: 0; pointer-events: none; }
.lr-flotte { position: absolute; bottom: 0; font-size: 22px; opacity: 0; animation: lr-flotte 2.4s ease-out forwards; }
@keyframes lr-flotte { 0% { transform: translateY(0) scale(.8); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-140px) scale(1.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lr-flotte { animation: none; } }
.lr-sondage[hidden] { display: none; }
.lr-sondage { margin: 12px 0; }
.lr-sondage-carte { border: 1px solid var(--bordure); border-radius: var(--radius-md); padding: 12px 14px; background: rgba(var(--surface-rgb), .9); }
.lr-sondage-question { margin: 0 0 8px; font-size: 16px; overflow-wrap: anywhere; }
.lr-sondage-choix { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lr-sondage-option { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.lr-sondage-option .lr-sondage-voter { grid-column: 1 / -1; justify-self: stretch; text-align: left; }
.lr-sondage-libelle { overflow-wrap: anywhere; }
.lr-sondage-piste { grid-column: 1 / -1; grid-row: 2; height: 8px; border-radius: 4px; background: rgba(var(--violet-rgb), .14); overflow: hidden; }
.lr-sondage-rempli { display: block; height: 100%; background: var(--violet); }
.lr-sondage-moi .lr-sondage-libelle { font-weight: 700; }
.lr-sondage-score { font-size: 13px; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.lr-sondage-pied { margin: 8px 0 0; }
/* Carte de streamer : la photo de profil, en grand et jamais rognee (cercle), et le pseudo seul. */
.lr-carte-streamer .live-carte-visuel img.lr-photo-profil, .lr-carte-streamer .live-carte-visuel .avatar-secours.lr-photo-profil { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; }
.lr-carte-streamer .live-carte-visuel .avatar-secours.lr-photo-profil { font-size: 52px; }
.lr-carte-streamer .live-carte-titre { display: flex; align-items: center; gap: 6px; font-size: 17px; }
.lr-bande { margin: 18px 0; }
.lr-bande-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.bloc-live-profil { margin: 16px 0; max-width: 360px; }
.recherche-streamers { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lr-fiche { margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.lr-fiche-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.lr-fiche-description { margin: 0; color: var(--texte); white-space: pre-line; overflow-wrap: anywhere; max-width: 78ch; }
.lr-fiche .lr-tags-ligne { margin: 0; }
.studio-case { display: flex; align-items: center; gap: 8px; }
.lr-tag { font-size: 12px; color: var(--texte-doux); text-decoration: none; }
a.lr-tag:hover { color: var(--violet); }
.lr-prevue { font-size: 13px; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.lr-badge-etat { position: absolute; top: 10px; left: 10px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; background: rgba(6, 8, 12, .78); border: 1px solid rgba(255, 255, 255, .16); color: #f0edf9; }

/* Badge EN DIRECT : point qui « respire » doucement (pas de clignotement agressif). */
.lr-badge-live::before { animation: lr-respire 2.4s ease-in-out infinite; }
@keyframes lr-respire { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }

/* Recherche et filtres */
.lr-filtres { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin: 6px 0 4px; padding: 12px 14px; background: rgba(var(--surface-rgb), .7); border: 1px solid var(--bordure); border-radius: var(--radius-lg); }
.lr-filtres label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--texte-doux); }
.lr-filtres select, .lr-filtres input[type="search"] { min-height: 40px; }
.lr-champ-recherche { flex: 1 1 260px; }
.lr-champ-recherche input { width: 100%; }
.lr-case { flex-direction: row !important; align-items: center; gap: 6px !important; min-height: 40px; }
.lr-envoyer { align-self: end; }

/* Hero */
.lr-hero { position: relative; overflow: hidden; margin: 8px 0 26px; min-height: clamp(220px, 34vw, 380px); border-radius: var(--radius-lg); border: 1px solid var(--bordure); background: #06080f; box-shadow: 0 14px 44px rgba(0, 0, 0, .35); }
.lr-hero-slide { position: relative; min-height: inherit; display: flex; align-items: flex-end; animation: lr-entree .45s ease both; }
.lr-hero-slide[hidden] { display: none; }
.lr-hero-fond { position: absolute; inset: 0; background: radial-gradient(120% 90% at 20% 10%, rgba(var(--violet-rgb), .35), transparent 60%), linear-gradient(135deg, #0b1020, #05070d); background-size: contain; background-position: center; background-repeat: no-repeat; }
.lr-hero-voile { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 7, 13, .94) 4%, rgba(5, 7, 13, .35) 55%, rgba(5, 7, 13, .1)); }
.lr-hero-contenu { position: relative; z-index: 1; padding: clamp(14px, 3vw, 28px); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 760px; }
/* Le Hero est TOUJOURS une surface sombre : ses textes sont clairs quel que soit le thème (clair ou sombre) du site. */
.lr-hero { color: #f0edf9; }
.lr-hero .lr-puce { background: rgba(255, 255, 255, .16); color: #f0edf9; }
.lr-hero a:not(.bouton) { color: #d7ccff; }
.lr-hero-titre { margin: 0; font-size: clamp(20px, 3.4vw, 34px); line-height: 1.15; color: #fff; }
.lr-hero-sous { margin: 0; color: rgba(240, 237, 249, .8); }
.lr-hero-avatar { position: absolute; right: clamp(16px, 7vw, 96px); top: 50%; transform: translateY(-50%); width: clamp(84px, 17vw, 210px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 30% 30%, rgba(var(--violet-rgb), .5), #0b1020); box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), 0 0 60px rgba(var(--violet-rgb), .35); font-size: clamp(36px, 8vw, 96px); font-weight: 800; color: #fff; }
.lr-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lr-puce-nouveau { background: rgba(74, 222, 128, .2); }
.lr-hero-cta { margin-top: 4px; }
.lr-hero-points { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: flex; gap: 8px; }
.lr-hero-point { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); background: transparent; cursor: pointer; }
.lr-hero-point.actif { background: var(--violet); border-color: var(--violet); }
.lr-hero-point:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
@keyframes lr-entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Évènements */
.lr-evenements { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 10px 0 30px; }
.lr-evenement { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--radius-lg); border: 1px solid var(--bordure); background: linear-gradient(135deg, rgba(var(--violet-rgb), .12), rgba(var(--surface-rgb), .9)); color: inherit; text-decoration: none; transition: transform var(--duree-rapide) var(--ease-standard), border-color var(--duree-rapide) var(--ease-standard); }
.lr-evenement:hover { transform: translateY(-2px); border-color: var(--violet); text-decoration: none; }
.lr-evenement.en-cours { border-color: rgba(175, 11, 18, .55); }
.lr-evenement-comp { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }
.lr-evenement-equipes { font-size: 17px; }
.lr-vs { color: var(--texte-doux); font-weight: 500; font-size: 13px; }
.lr-evenement-quand { font-size: 13px; color: var(--texte-doux); font-variant-numeric: tabular-nums; }

/* Programmés */
.lr-groupe { margin: 14px 0 0; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-doux); }
.lr-programme { display: flex; flex-direction: column; gap: 8px; }
.lr-prevenir { align-self: flex-start; }

/* États vides et squelettes */
.lr-vide { padding: 22px 18px; border: 1px dashed var(--bordure); border-radius: var(--radius-lg); background: rgba(var(--surface-rgb), .5); text-align: center; margin: 12px 0 30px; }
.lr-vide p { margin: 4px 0; }
.lr-squelette { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.lr-squelette-visuel, .lr-squelette-ligne { border-radius: 10px; background: linear-gradient(90deg, rgba(var(--surface-rgb), .9), rgba(var(--violet-rgb), .12), rgba(var(--surface-rgb), .9)); background-size: 200% 100%; animation: lr-brille 1.6s linear infinite; }
.lr-squelette-visuel { aspect-ratio: 16 / 9; }
.lr-squelette-ligne { height: 12px; margin-top: 10px; } .lr-squelette-ligne.court { width: 55%; }
@keyframes lr-brille { to { background-position: -200% 0; } }
#live-sections { transition: opacity .15s ease; }

@media (max-width: 600px) {
  .lr-filtres { padding: 10px; }
  .lr-filtres label:not(.lr-champ-recherche):not(.lr-case) { flex: 1 1 42%; }
  .lr-hero { border-radius: var(--radius-md, 12px); }
  .live-grille { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .lr-badge-live::before, .lr-hero-slide, .lr-squelette-visuel, .lr-squelette-ligne { animation: none !important; }
  a.live-carte:hover, .lr-evenement:hover { transform: none; }
}

.live-categorie-n { color: var(--texte-doux); font-size: 12px; }
.live-categorie-puce.actif .live-categorie-n { color: rgba(255, 255, 255, 0.8); }

/* Page d'une chaine : lecteur + infos a gauche, chat a droite. */
.live-page { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.live-colonne-principale { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.lecteur-stream { position: relative; background: #000; border-radius: 4px; overflow: hidden; border: 1px solid var(--bordure); }
/* Repli si la boîte n'est pas branchée sur LeRepereLivePlayer : 16/9 seulement dans ce cas (voir « Le Repère Video Rendering Rule » plus bas). */
.lecteur-stream:not([data-lecteur-live]) { aspect-ratio: 16 / 9; }
.lecteur-stream:fullscreen { border-radius: 0; }
.lecteur-stream-scene, .lecteur-stream-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.lecteur-stream-video { object-fit: contain; background: #000; }
.lecteur-stream-vignette { position: absolute; right: 12px; top: 12px; width: 22%; max-width: 240px; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 4px; border: 2px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); z-index: 2; }
.lecteur-stream-voile {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(circle at 50% 40%, #2b2440, #0c0a14); text-align: center; padding: 20px;
}
.lecteur-stream-voile .avatar, .lecteur-stream-voile .avatar-secours { width: 96px; height: 96px; font-size: 40px; border-radius: 50%; object-fit: cover; }
.lecteur-stream-voile p { margin: 0; color: rgba(255, 255, 255, 0.85); }
/* Bouton « Activer le son » posé SUR la vidéo qui joue déjà (muette) : discret, jamais un voile qui la cache. */
.lecteur-son-flottant { position: absolute; left: 12px; bottom: 56px; z-index: 5; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .68); color: #fff; font: 700 14px system-ui, sans-serif; cursor: pointer; backdrop-filter: blur(4px); box-shadow: 0 4px 16px rgba(0, 0, 0, .45); }
.lecteur-son-flottant:hover { background: rgba(var(--violet-rgb), .9); }
.lecteur-son-flottant[hidden] { display: none; }
.lecteur-stream-barre {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  padding: 8px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); color: #fff; font-size: 13px;
}
/* L'espace pousse les contrôles à droite sur un lecteur large ; sur un lecteur étroit, la barre passe proprement sur deux lignes (jamais de contrôle coupé). */
.lecteur-stream-espace { flex: 1 1 8px; min-width: 0; }
.lecteur-stream-qualite { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.lecteur-stream-qualite select { background: rgba(0, 0, 0, 0.5); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; padding: 2px 6px; font-size: 13px; }
.lecteur-stream-barre .lien-bouton { color: #fff; font-size: 18px; flex: none; }
.lecteur-stream-volume { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.lecteur-stream-volume input[type="range"] { width: 56px; accent-color: var(--violet); }
/* Sur les lecteurs vraiment étroits (mobile), on masque le curseur de volume (le bouton muet suffit) et on raccourcit « Affichage ». */
@media (max-width: 640px) {
  .lecteur-stream-volume input[type="range"] { display: none; }
  .lecteur-affichage-bouton { font-size: 0; }
  .lecteur-affichage-bouton::before { content: '🖼'; font-size: 14px; }
}
.badge-reconnexion {
  display: inline-flex; align-items: center; gap: 4px; background: #b8860b; color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; line-height: 1.2; animation: clignoter-reconnexion 1.4s ease-in-out infinite;
}
@keyframes clignoter-reconnexion { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.live-infos-streamer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.live-infos-streamer .avatar, .live-infos-streamer .avatar-secours { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; font-size: 24px; }
.live-infos-texte { flex: 1; min-width: 200px; }
.live-infos-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.live-titre { font-size: 20px; margin: 0 0 4px; }
.live-sous-titre { margin: 0; color: var(--texte-doux); }
.live-historique { margin-top: 4px; }
.live-historique-liste, .live-historique .titre-section { margin: 0; }
.live-historique-liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.live-historique-liste li { display: flex; flex-direction: column; gap: 2px; }

/* Mode theatre : purement visuel, bascule via .live-page-theatre sur
   #live-page — resserre le chat et retire les infos de la chaine pour
   laisser toute la place a la video. */
.live-page-theatre { grid-template-columns: minmax(0, 1fr) 300px; }
.live-page-theatre .live-infos { display: none; }

/* Chat */
.chat-stream { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; height: min(70vh, 640px); min-height: 360px; }
.chat-stream-entete { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--bordure); }
.chat-stream-messages { list-style: none; margin: 0; padding: 10px 14px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.chat-stream { position: relative; }
/* Fort trafic : la liste est bornee a 150 lignes par chat-stream.js. (Pas de content-visibility : ses hauteurs estimees decalent le bas de la liste et casseraient le suivi du direct.) */
.chat-stream-nouveaux { position: absolute; left: 50%; transform: translateX(-50%); bottom: 72px; z-index: 2; padding: 5px 14px; border-radius: 999px; border: 1px solid rgba(var(--violet-rgb), .6); background: var(--violet); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.chat-stream-nouveaux[hidden] { display: none; }
.chat-stream-messages li { position: relative; padding-right: 48px; word-break: break-word; display: flex; align-items: flex-start; gap: 6px; }
.chat-stream-messages li .avatar, .chat-stream-messages li .avatar-conteneur { width: 24px; height: 24px; flex: 0 0 auto; margin-top: 1px; }
.chat-stream-messages li .avatar-conteneur .avatar { width: 24px; height: 24px; }
.chat-stream-messages li .badge-certifie-avatar { width: 11px; height: 11px; border-width: 1px; }
.chat-stream-pseudo { font-weight: 700; color: var(--violet); margin-right: 6px; }
.chat-stream-du-streamer .chat-stream-pseudo { color: #ff6b6b; }
.chat-stream-du-streamer .chat-stream-pseudo::before { content: "🎥 "; }
.chat-stream-actions { position: absolute; right: 0; top: 0; display: none; gap: 4px; }
@media (hover: none) { .chat-stream-actions { display: inline-flex; opacity: .7; } }
.chat-stream-epingle { display: flex; align-items: flex-start; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--bordure); background: rgba(var(--violet-rgb), .12); font-size: 13px; }
.chat-stream-epingle[hidden] { display: none; }
.chat-stream-epingle-corps { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.chat-stream-reponse { display: block; font-size: 12px; color: var(--texte-doux); border-left: 2px solid rgba(var(--violet-rgb), .6); padding-left: 6px; margin: 2px 0; overflow-wrap: anywhere; }
.chat-stream-repond { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--texte-doux); display: flex; align-items: center; gap: 6px; }
.chat-stream-repond[hidden] { display: none; }
.chat-stream-messages li:hover .chat-stream-actions { display: inline-flex; }
.chat-stream-formulaire { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; padding: 10px 14px; border-top: 1px solid var(--bordure); align-items: center; }
.chat-stream-formulaire input { grid-column: 1 / -1; }
.chat-stream-compteur { color: var(--texte-doux); font-size: 12px; }
.chat-stream-erreur, .chat-stream-info { margin: 0; padding: 8px 14px 12px; }

/* Studio */
.studio-bloc { background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; padding: 16px 18px; }
.studio-bloc .titre-section { margin-top: 0; }
.studio-apercu video { object-fit: contain; background: #000; } /* dimensionnée par la règle de rendu ci-dessous */
.studio-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 14px 0; }
.studio-options fieldset { border: 1px solid var(--bordure); border-radius: 8px; padding: 10px 12px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.studio-options legend { color: var(--texte-doux); font-size: 13px; padding: 0 4px; }
.studio-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.studio-cle-nouvelle { background: rgba(229, 57, 53, 0.12); border: 1px solid rgba(229, 57, 53, 0.4); border-radius: 8px; padding: 10px 12px; word-break: break-all; }
.liste-simple { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.liste-simple li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--bordure); }
.liste-simple li:last-child { border-bottom: none; }
.studio-qualite-connexion {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
}
.studio-qualite-excellente { background: rgba(76, 175, 125, 0.18); color: #6fd6a4; }
.studio-qualite-moyenne, .studio-qualite-inconnue { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.75); }
.studio-qualite-faible { background: rgba(229, 57, 53, 0.2); color: #ff9a9a; }
.aide-fort { color: var(--texte); font-weight: 600; }

@media (max-width: 900px) {
  .live-page { grid-template-columns: minmax(0, 1fr); }
  .chat-stream { height: 420px; }
}

/* Les elements du live sont masques/affiches par l'attribut "hidden" depuis
   le script : nos "display" explicites ci-dessus ne doivent jamais l'emporter
   sur lui (un badge "EN DIRECT" hidden restait visible sinon). */
.badge-live[hidden], .lecteur-stream-voile[hidden], .live-carte[hidden], .live-page [hidden], .live-studio [hidden], .chat-stream [hidden] { display: none !important; }

/* ============================================================
   public/css/10-evenements.css
   Évènements en direct : page d'un match, score, fil d'évènements, chat.
   Assemblée avec les autres fichiers de public/css/ dans l'ordre de leur numéro, et servie sous /style.css
   (voir src/web/feuille-de-style.js) : une règle d'un fichier plus loin l'emporte, à spécificité égale.
   ============================================================ */

/* ============================================================
   Evenement live (page dediee a un match : score/fil d'evenements + chat
   public, voir evenement-live.js et views/evenement-live.ejs) — AUCUN
   flux video/audio, uniquement du texte.
   ============================================================ */
.evenement-live-page { display: flex; flex-direction: column; gap: 20px; max-width: var(--conteneur-large); margin: 0 auto; }

.evenement-hero {
  background: linear-gradient(160deg, rgba(var(--violet-rgb), 0.16), var(--surface));
  border: 1px solid var(--bordure); border-radius: 16px; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px;
}
.evenement-hero-entete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Chip clair derriere le logo de competition (11 septembre, correction) :
   la plupart des emblemes de competition (ex. Ligue des champions) sont un
   dessin sombre sur fond transparent, pense pour un fond clair — sans ce
   chip, ils deviennent illisibles en theme sombre (le fond de la page est
   alors presque de la meme couleur que le logo). Toujours blanc, jamais
   une variable de theme : le but est justement de rester constant quel que
   soit le theme du site. */
.evenement-competition-logo {
  width: 28px; height: 28px; object-fit: contain; background: #fff; border-radius: 6px; padding: 3px; box-sizing: border-box; flex-shrink: 0;
}
.evenement-competition-nom { font-weight: 700; color: var(--texte-doux); }
.evenement-minute { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--violet); }
.evenement-badge-statut { letter-spacing: 0.08em; }
.evenement-badge-a_venir { background: rgba(255, 255, 255, 0.14); }
.evenement-badge-en_cours { background: #e53935; }
.evenement-badge-mi_temps { background: #f0a020; color: #111; }
.evenement-badge-pause_fraicheur { background: #2196f3; }
.evenement-badge-prolongation { background: #e53935; }
.evenement-badge-tirs_au_but { background: #8b5cf6; }
.evenement-badge-termine { background: rgba(255, 255, 255, 0.14); }

.evenement-score-ligne { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 8px 0; }
.evenement-equipe { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.evenement-equipe-logo { width: 64px; height: 64px; object-fit: contain; }
.evenement-equipe-nom { font-weight: 700; font-size: 1.05em; }
.evenement-score { display: flex; align-items: center; gap: 10px; font-size: 2.4em; font-weight: 800; font-variant-numeric: tabular-nums; }
.evenement-score-separateur { color: var(--texte-doux); font-size: 0.6em; }

.evenement-coup-envoi { text-align: center; margin: 0; }

.evenement-possession { display: flex; align-items: center; gap: 10px; }
.evenement-possession-jauge { flex: 1; height: 8px; border-radius: 999px; background: #ff6b6b; overflow: hidden; }
.evenement-possession-barre-domicile { height: 100%; background: var(--violet); }
.evenement-hero-pied { display: flex; justify-content: center; }
.evenement-spectateurs { color: var(--texte-doux); font-size: 0.95em; }

.evenement-corps { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.evenement-colonne-principale { min-width: 0; }
.evenement-faits-liste { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.evenement-fait {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--bordure); position: relative;
}
.evenement-fait-domicile { border-left: 3px solid var(--violet); }
.evenement-fait-exterieur { border-right: 3px solid #ff6b6b; }
.evenement-fait-minute { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texte-doux); min-width: 34px; }
.evenement-fait-texte { flex: 1; }
.evenement-fait-supprimer { position: absolute; right: 10px; }
.evenement-faits-vide { background: none; border: none; color: var(--texte-doux); padding: 8px 0; }

.evenement-chat-formulaire { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; }
.evenement-chat-champ-pseudo { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .evenement-corps { grid-template-columns: minmax(0, 1fr); }
  .evenement-score { font-size: 1.8em; }
  .evenement-equipe-logo { width: 44px; height: 44px; }
  .chat-stream { height: 420px; }
}

/* Bandeau "match en direct" de l'accueil (symetrique au bandeau de
   l'accueil Android, voir BandeauEvenementLive.kt) : n'existe dans le HTML
   que si un match est en avant (voir evenementEnAvant, server.js) —
   ensuite tenu a jour par public/bandeau-evenement-accueil.js. */
.bandeau-evenement-accueil {
  --bp-dom: #8B5CF6; --bp-dom-f: #5B34C0; --bp-ext: #F59E0B; --bp-ext-f: #8A5A05; --bp-or: #FFD978;
  position: relative; isolation: isolate; overflow: hidden; display: block; max-width: var(--conteneur-large); margin: 20px auto 32px; /* marge basse : le bloc suivant (.accueil-corps) n'en a pas */
  padding: 18px 24px 16px; border-radius: 20px; color: #fff; text-decoration: none;
  /* Bordure dégradée aux couleurs des deux camps (padding-box / border-box) */
  border: 1.5px solid transparent;
  background:
    radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--bp-dom-f) 70%, transparent), transparent 55%) padding-box,
    radial-gradient(120% 140% at 100% 50%, color-mix(in srgb, var(--bp-ext-f) 70%, transparent), transparent 55%) padding-box,
    linear-gradient(180deg, #0d0b16, #07060c) padding-box,
    linear-gradient(100deg, var(--bp-dom), var(--bp-or) 50%, var(--bp-ext)) border-box;
  /* Ombres courtes : elles ne doivent pas baver sur les blocs voisins */
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .55), -8px 0 26px -16px var(--bp-dom), 8px 0 26px -16px var(--bp-ext);
  transition: transform .35s cubic-bezier(.2, .9, .3, 1), box-shadow .35s;
}
.bandeau-evenement-accueil:hover {
  transform: translateY(-3px) scale(1.005); text-decoration: none;
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .6), -10px 0 30px -14px var(--bp-dom), 10px 0 30px -14px var(--bp-ext);
}
.bandeau-evenement-accueil > :not(.bp-fond) { position: relative; z-index: 1; }

/* Décor : logos géants flous, lignes du terrain, balayage de lumière, étincelles */
.bp-fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bp-geant { position: absolute; top: 50%; width: 46%; aspect-ratio: 1; background: center / contain no-repeat; opacity: .22; filter: blur(2px) saturate(1.3);
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent); mask-image: radial-gradient(closest-side, #000 35%, transparent); }
.bp-geant-dom { left: -10%; transform: translateY(-50%) rotate(-12deg); animation: bp-flotte 9s ease-in-out infinite; }
.bp-geant-ext { right: -10%; transform: translateY(-50%) rotate(12deg); animation: bp-flotte 9s ease-in-out -4.5s infinite; }
@keyframes bp-flotte { 50% { translate: 0 -8px; scale: 1.04; } }
.bp-terrain { position: absolute; inset: 0; opacity: .5;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(255, 255, 255, .14) calc(50% - .5px), rgba(255, 255, 255, .14) calc(50% + .5px), transparent calc(50% + .5px)),
    radial-gradient(circle at 50% 50%, transparent 58px, rgba(255, 255, 255, .13) 59px, rgba(255, 255, 255, .13) 60px, transparent 61px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.bp-balayage { position: absolute; inset: -20% auto -20% -40%; width: 35%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09), rgba(255, 255, 255, .16), rgba(255, 255, 255, .09), transparent);
  animation: bp-balaie 5.5s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes bp-balaie { 0%, 35% { left: -40%; } 100% { left: 120%; } }
.bp-etincelle { position: absolute; bottom: -6px; left: calc(4% + var(--i) * 6.8%); width: 3px; height: 3px; border-radius: 50%;
  background: var(--bp-or); box-shadow: 0 0 6px 1px var(--bp-or); opacity: 0;
  animation: bp-monte calc(4s + var(--i) * .37s) linear calc(var(--i) * -.83s) infinite; }
.bp-etincelle:nth-child(3n) { background: var(--bp-dom); box-shadow: 0 0 6px 1px var(--bp-dom); }
.bp-etincelle:nth-child(3n + 1) { background: var(--bp-ext); box-shadow: 0 0 6px 1px var(--bp-ext); }
@keyframes bp-monte { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(14px, -190px); opacity: 0; } }

/* En-tête */
.bandeau-evenement-entete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .82em; letter-spacing: .08em; text-transform: uppercase; }
.bandeau-evenement-entete #bandeau-evenement-badge.aide { color: #fff; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); }
.bandeau-evenement-accueil .badge-live-pulse { padding: 3px 10px; border-radius: 999px; background: rgba(229, 57, 53, .14); border: 1px solid rgba(229, 57, 53, .45); }
.bp-competition { color: var(--bp-or); font-weight: 800; }
.bandeau-evenement-accueil .aide { color: rgba(255, 255, 255, .72); }
.bandeau-evenement-accueil .evenement-minute { color: #fff; font-weight: 900; }
.bp-date { margin-left: auto; color: rgba(255, 255, 255, .75); font-weight: 700; font-variant-numeric: tabular-nums; }
.bandeau-evenement-titre-theme { display: block; margin: 10px 0 0; text-align: center; font-weight: 900; letter-spacing: .32em; font-size: 13px; text-transform: uppercase;
  background: linear-gradient(90deg, var(--bp-dom), #fff 30%, var(--bp-or) 50%, #fff 70%, var(--bp-ext)) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: bp-reflet 6s linear infinite; }
.bandeau-evenement-titre-theme b { font-weight: 900; color: var(--bp-or); -webkit-text-fill-color: var(--bp-or); }
@keyframes bp-reflet { to { background-position: -200% 0; } }

/* Affiche : blasons et score */
.bandeau-evenement-score-ligne { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin: 12px 0 14px; }
.bandeau-evenement-equipe { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; text-align: center; }
.bandeau-evenement-score-ligne .bandeau-evenement-equipe:last-child { justify-content: center; text-align: center; }
.bp-blason { --c: var(--bp-dom); position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .16), rgba(0, 0, 0, .35)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 34px -6px var(--c); }
.bp-equipe-ext .bp-blason { --c: var(--bp-ext); }
.bp-blason::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 0deg, transparent, var(--c), var(--bp-or), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: bp-tourne 4s linear infinite; }
.bp-equipe-ext .bp-blason::before { animation-direction: reverse; }
@keyframes bp-tourne { to { transform: rotate(1turn); } }
.bandeau-evenement-logo { width: 54px; height: 54px; object-fit: contain; flex-shrink: 0; border-radius: 6px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)); }
.bp-blason em { font-style: normal; font-size: 34px; font-weight: 900; color: var(--c); }
.bp-nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; font-size: 1.15em; letter-spacing: .12em; text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .7), 0 0 22px color-mix(in srgb, var(--bp-dom) 45%, transparent); }
.bp-equipe-ext .bp-nom { text-shadow: 0 2px 12px rgba(0, 0, 0, .7), 0 0 22px color-mix(in srgb, var(--bp-ext) 45%, transparent); }
.bp-centre { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bandeau-evenement-score { font-size: 2.6em; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff 20%, var(--bp-or) 55%, #b98a2e); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 14px rgba(255, 217, 120, .25)); }
.bp-rebours { font-size: .8em; font-weight: 800; letter-spacing: .1em; font-variant-numeric: tabular-nums; color: #fff; padding: 4px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 217, 120, .45); box-shadow: 0 0 18px -6px var(--bp-or); white-space: nowrap; }
.bp-rebours.bp-imminent { animation: bp-battement 1s ease-in-out infinite; }
@keyframes bp-battement { 50% { transform: scale(1.07); box-shadow: 0 0 26px -2px var(--bp-or); } }

/* Pied */
.bandeau-evenement-entete > *, .bandeau-evenement-pied > *, .evenement-carte-entete > * { margin-top: 0; margin-bottom: 0; }   /* la marge de « .aide » décalait le badge et le compteur d'une rangée centrée */
.bandeau-evenement-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bp-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: .9em;
  color: #111; background: linear-gradient(90deg, #fff, var(--bp-or)); box-shadow: 0 6px 20px -8px var(--bp-or); transition: transform .25s; }
.bp-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .8) 50%, transparent 70%); transform: translateX(-120%); animation: bp-eclat 3.2s ease-in-out infinite; }
@keyframes bp-eclat { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.bandeau-evenement-accueil:hover .bp-cta { transform: translateX(3px); }
.bp-cta span { transition: transform .25s; }
.bandeau-evenement-accueil:hover .bp-cta span { transform: translateX(4px); }

.badge-live-pulse {
  display: inline-flex; align-items: center; gap: 6px; color: #e53935; font-weight: 800; font-size: 0.85em; letter-spacing: 0.06em;
}
.badge-live-pulse-point { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #e53935; }
.badge-live-pulse-point::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: #e53935;
  animation: pulse-live 1.1s linear infinite;
}
@keyframes pulse-live {
  from { transform: scale(0.85); opacity: 0.7; }
  to { transform: scale(2.6); opacity: 0; }
}

/* Animation d'entree du bandeau (11 septembre) : appliquee UNIQUEMENT au
   tout premier affichage (creation d'un evenement pendant qu'un visiteur
   est deja sur l'accueil, voir bandeau-evenement-accueil.js) — jamais aux
   mises a jour de score suivantes, sinon le bandeau "sauterait" a chaque
   but. Glissement + fondu + surbrillance violette qui s'estompe. */
.bandeau-evenement-anime-entree { animation: apparition-evenement 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes apparition-evenement {
  0% { opacity: 0; transform: translateY(-16px) scale(0.97); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0); }
  55% { opacity: 1; transform: translateY(0) scale(1.01); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.55); }
  100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .bandeau-evenement-anime-entree { animation: none; }
  .bandeau-evenement-accueil .bp-fond *, .bp-blason::before, .bandeau-evenement-titre-theme, .bp-cta::after, .bp-rebours.bp-imminent { animation: none !important; }
  .bp-etincelle, .bp-balayage { display: none; }
}

@media (max-width: 600px) {
  .bandeau-evenement-accueil { padding: 14px 14px 12px; border-radius: 16px; margin-bottom: 24px; }
  .bandeau-evenement-score-ligne { gap: 8px; }
  .bp-blason { width: 60px; height: 60px; }
  .bandeau-evenement-logo { width: 38px; height: 38px; }
  .bp-blason em { font-size: 24px; }
  .bp-nom { font-size: .9em; letter-spacing: .06em; }
  .bandeau-evenement-score { font-size: 1.9em; }
  .bp-date { margin-left: 0; }
  .bandeau-evenement-titre-theme { letter-spacing: .2em; font-size: 11px; }
  .bp-cta { width: 100%; justify-content: center; }
}

/* Page publique /evenements (11 septembre) : liste de toutes les cartes
   match, meme grille que .live-grille (streams) pour rester coherent
   visuellement entre les deux pages "en direct" du site. */
.evenements-live-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 12px 0 32px; }
.evenement-carte {
  display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--radius-lg);
  padding: 14px; color: inherit; text-decoration: none;
  transition: transform var(--duree-rapide) var(--ease-standard), border-color var(--duree-rapide) var(--ease-standard), box-shadow var(--duree-rapide) var(--ease-standard);
}
.evenement-carte:hover { transform: translateY(-3px); border-color: var(--violet); box-shadow: var(--ombre-md); text-decoration: none; }
.evenement-carte-entete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.evenement-carte-competition-logo { width: 22px; height: 22px; object-fit: contain; background: #fff; border-radius: 5px; padding: 2px; box-sizing: border-box; flex-shrink: 0; }
.evenement-carte-competition-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evenement-carte-score-ligne { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.evenement-carte-equipe { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.evenement-carte-equipe span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; font-weight: 600; font-size: 0.92em; }
.evenement-carte-logo { width: 36px; height: 36px; object-fit: contain; }
.evenement-carte-score { font-size: 1.3em; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.evenement-carte-pied { margin: 0; text-align: center; }

/* Classement + meilleurs buteurs (11 septembre, voir classement-football.ejs). */
.classement-football-logo { width: 22px; height: 22px; object-fit: contain; display: block; }
.table-classement-football th, .table-classement-football td { text-align: center; }
.table-classement-football th:nth-child(3), .table-classement-football td:nth-child(3) { text-align: left; }
/* Memes couleurs que le classement du forum (.classement-rang) pour le
   podium — top 3 universel, aucune hypothese sur le seuil de
   qualification propre a cette competition. */
.table-classement-football tbody tr:nth-child(1) td:first-child { color: var(--rang-or); font-weight: 700; }
.table-classement-football tbody tr:nth-child(2) td:first-child { color: var(--rang-argent); font-weight: 700; }
.table-classement-football tbody tr:nth-child(3) td:first-child { color: var(--rang-bronze); font-weight: 700; }

/* ============================================================
   public/css/11-forum-interactions.css
   Réactions, sondages, épingles, favoris, badges, statut.
   Assemblée avec les autres fichiers de public/css/ dans l'ordre de leur numéro, et servie sous /style.css
   (voir src/web/feuille-de-style.js) : une règle d'un fichier plus loin l'emporte, à spécificité égale.
   ============================================================ */

/* ============================================================
   Reactions multiples, sondages, epinglage, favoris, badges, statut
   personnalise, classement, invitations (8 septembre, refonte "additive").
   ============================================================ */

.reactions-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.reaction-bouton {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--bordure); background: var(--surface);
  color: var(--texte); border-radius: 999px; padding: 3px 9px; font-size: 14px; cursor: pointer; line-height: 1.4;
}
.reaction-bouton:hover { border-color: var(--violet); }
.reaction-bouton.active { background: rgba(var(--violet-rgb), 0.18); border-color: var(--violet); }
.reaction-bouton.reaction-lecture-seule { cursor: default; }
.reaction-total { font-size: 12px; color: var(--texte-doux); }
.reaction-bouton.active .reaction-total { color: var(--violet); }
.reaction-ajouter { position: relative; display: inline-block; }
.reaction-plus {
  border: 1px dashed var(--bordure); background: none; color: var(--texte-doux); border-radius: 999px;
  width: 28px; height: 28px; cursor: pointer; font-size: 13px; line-height: 1;
}
.reaction-plus:hover { border-color: var(--violet); color: var(--violet); }
.reaction-menu {
  position: absolute; z-index: 5; bottom: 100%; left: 0; margin-bottom: 4px; display: flex; gap: 4px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 10px; padding: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
/* Specificite egale a la regle [hidden] du navigateur : sans ce filet,
   l'ordre de la cascade la fait perdre et le menu reste cliquable/visible
   meme masque (meme piege deja corrige plus haut pour les elements du live). */
.reaction-menu[hidden] { display: none; }
.reaction-menu-item { background: none; border: none; font-size: 20px; line-height: 1; padding: 4px; border-radius: 6px; cursor: pointer; }
.reaction-menu-item:hover { background: var(--surface-claire); }

/* Sondage */
.sondage {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 10px; padding: 14px 16px; margin: 14px 0;
}
.sondage-question { font-weight: 700; margin: 0 0 10px; }
.sondage-options { display: flex; flex-direction: column; gap: 8px; }
.sondage-option {
  position: relative; display: block; width: 100%; text-align: left; border: 1px solid var(--bordure); background: var(--fond);
  border-radius: 8px; padding: 8px 12px; cursor: pointer; overflow: hidden; color: var(--texte); font: inherit;
}
.sondage-option:hover { border-color: var(--violet); }
.sondage-option.votee { border-color: var(--violet); }
.sondage-option-barre { position: absolute; inset: 0; background: rgba(var(--violet-rgb), 0.18); z-index: 0; }
.sondage-option-contenu { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 10px; }
.sondage-meta { color: var(--texte-doux); font-size: 13px; margin: 10px 0 0; }
.sondage-formulaire-options { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.sondage-formulaire-options input { width: 100%; }

/* Sujet epingle / verrouille / meilleure reponse */
.sujet-epingle-icone { margin-right: 4px; }
.sujet-verrouille-icone { margin-right: 4px; }
.sujet-vues { color: var(--texte-doux); font-size: 13px; margin: 4px 0 0; }
.sujet-verrouille-note {
  display: flex; align-items: center; gap: 6px; background: rgba(var(--violet-rgb), 0.12); color: var(--texte);
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 14px; margin-bottom: 12px;
}
.message-meilleure-reponse { border-color: var(--violet) !important; box-shadow: var(--lueur-violet); }
.badge-meilleure-reponse {
  display: inline-flex; align-items: center; gap: 4px; background: rgba(var(--violet-rgb), 0.18); color: var(--violet);
  border-radius: var(--radius-pill); padding: 2px 10px; font-size: 12px; font-weight: 700; margin-bottom: 8px;
}

/* Favoris */
.bouton-favori {
  background: none; border: 1px solid var(--bordure); color: var(--texte); border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer; font-size: 14px;
  transition: border-color var(--duree-rapide) var(--ease-standard), background var(--duree-rapide) var(--ease-standard), color var(--duree-rapide) var(--ease-standard);
}
.bouton-favori:hover { border-color: var(--violet); }
.bouton-favori.actif { background: rgba(var(--violet-rgb), 0.18); border-color: var(--violet); color: var(--violet); }

/* Badges de profil */
.badges-profil { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.badge-profil {
  display: inline-flex; align-items: center; gap: 5px; background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--radius-pill); padding: 4px 10px; font-size: 13px;
  transition: border-color var(--duree-rapide) var(--ease-standard), transform var(--duree-rapide) var(--ease-standard);
}
.badge-profil:hover { border-color: var(--violet-decor); transform: translateY(-1px); }
.badge-profil-icone { font-size: 15px; }

/* ---- Carte d'en-tete de profil (bandeau decoratif + stats en chiffres) ---- */

.profil-carte-entete {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-lg);
  padding: 28px 24px 20px;
  overflow: hidden;
  animation: le-repere-fondu-monte var(--duree-normale) var(--ease-sortie) both;
}
/* Bandeau decoratif : pas une photo par membre (aucune donnee de ce
   type n'existe), juste un degrade de la palette de marque pour donner
   un peu de relief au-dessus de l'avatar — meme esprit que .hero-accueil. */
.profil-carte-entete::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 64px;
  background: linear-gradient(135deg, rgba(var(--violet-rgb), 0.28) 0%, rgba(var(--violet-rgb), 0.04) 70%);
}
.profil-carte-entete > * { position: relative; }

.profil-stats-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 10px 0 0;
}
.profil-stats-mini div { display: flex; flex-direction: column; gap: 1px; }
.profil-stats-mini strong { font-size: 18px; color: var(--texte); }
.profil-stats-mini span { font-size: 11px; color: var(--texte-doux); text-transform: uppercase; letter-spacing: 0.03em; }

/* Statut personnalise */
.statut-personnalise { color: var(--texte-doux); font-style: italic; font-size: 14px; margin-left: 6px; }

/* Classement */
.classement-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.classement-ligne { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; }
.classement-ligne:nth-child(odd) { background: var(--surface); }
.classement-rang { width: 28px; text-align: center; font-weight: 700; color: var(--texte-doux); }
.classement-ligne:nth-child(1) .classement-rang { color: var(--rang-or); }
.classement-ligne:nth-child(2) .classement-rang { color: var(--rang-argent); }
.classement-ligne:nth-child(3) .classement-rang { color: var(--rang-bronze); }
.classement-nb { margin-left: auto; color: var(--texte-doux); font-size: 14px; }

/* Tendances (accueil) */
.tendances-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tendances-liste li a { display: flex; flex-direction: column; gap: 2px; }
.tendance-meta { font-size: 12px; color: var(--texte-doux); }

/* Inviter des amis */
.invite-bloc { background: var(--surface); border: 1px solid var(--bordure); border-radius: 10px; padding: 14px 16px; margin: 14px 0; }
.invite-lien { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.invite-lien code { background: var(--fond); border: 1px solid var(--bordure); border-radius: 6px; padding: 6px 10px; word-break: break-all; }

/* Raid (studio de stream) */
.studio-raid-formulaire { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }

/* Bouton retour de l'appli Windows (voir public/pont-desktop.js) — coin
   bas-gauche, jamais en collision avec le bandeau du haut quel que soit
   le nombre de lignes qu'il prend selon la largeur de fenetre. */
.bouton-retour-desktop {
  position: fixed; left: 16px; bottom: 16px; z-index: 2000;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bordure);
  background: var(--surface); color: var(--texte); font-size: 18px; line-height: 1;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.bouton-retour-desktop:hover { background: var(--fond); }
.bouton-retour-desktop:active { transform: scale(0.92); }

/* Bandeau d'accueil d'un evenement themé (Le Classique) : liseré aux couleurs des deux camps. */

/* ============================================================
   public/css/12-live-video-premium.css
   Règle de rendu vidéo des Lives (FIT par défaut) et refontes premium de la rubrique Live.
   Assemblée avec les autres fichiers de public/css/ dans l'ordre de leur numéro, et servie sous /style.css
   (voir src/web/feuille-de-style.js) : une règle d'un fichier plus loin l'emporte, à spécificité égale.
   ============================================================ */

/* ==========================================================================================================
   LE REPÈRE VIDEO RENDERING RULE — toutes les vidéos Live utilisent FIT (contain) par défaut.
   La vidéo n'est JAMAIS recadrée ni étirée : 100 % de l'image diffusée reste visible, à son ratio réel.
   Des bandes (letterbox / pillarbox) sont normales et voulues. Voir STREAMING.md et public/lecteur-live.js.
   - [data-lecteur-live] = ContainerRect : suit le ratio réel du flux (--r, 16/9 en repli avant les métadonnées),
     bornée en hauteur pour laisser la place au chat / aux infos.
   - .lecteur-stream-scene / .lecteur-cadre = VideoContentRect : le plus grand rectangle de ratio --r dans la boîte
     (unités de conteneur). Les overlays liés au flux (score, webcam...) s'y placent, jamais dans les bandes.
   - « Remplir l'écran » (object-fit: cover) n'existe QUE sur choix explicite du membre : data-affichage="remplir".
   - Le fond (bandes) est décoratif : noir, ambiance Le Repère ou copie floutée ; jamais la vidéo principale.
   ========================================================================================================== */
[data-lecteur-live] {
  --r: 1.77778;
  position: relative; width: 100%; aspect-ratio: var(--r); max-height: min(82vh, 1100px); margin-inline: auto;
  container-type: size; overflow: hidden; background: #000; border-radius: 4px;
  touch-action: pan-x pan-y; /* pas de pinch-zoom involontaire qui changerait durablement le cadrage */
  transition: aspect-ratio .3s ease;
}
[data-lecteur-live][data-fond="ambiance"] { background: radial-gradient(120% 120% at 50% 50%, #12101c, #05050a); }
[data-lecteur-live][data-fond="noir"] { background: #000; }
[data-lecteur-live] > .lecteur-stream-scene, [data-lecteur-live] > .lecteur-cadre, [data-lecteur-live] > video.lecteur-stream-video {
  position: absolute; inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100cqw, calc(100cqh * var(--r))); height: min(100cqh, calc(100cqw / var(--r)));
}
[data-lecteur-live] .lecteur-stream-video { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: #000; }
[data-lecteur-live] > video.lecteur-stream-video { background: #000; }
/* Vignette webcam : jamais rognée non plus (contain), à son propre ratio. */
[data-lecteur-live] .lecteur-stream-vignette { position: absolute; right: 2%; top: 3%; width: 22%; max-width: 240px; height: auto; aspect-ratio: var(--rv, 4 / 3); object-fit: contain; background: rgba(0, 0, 0, .7); border-radius: 4px; border: 2px solid rgba(255, 255, 255, .2); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); z-index: 2; }
/* Overlays liés au flux : calque exactement sur la VideoContentRect, avec une zone de sécurité interne. */
[data-lecteur-live] > .lecteur-overlays { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100cqw, calc(100cqh * var(--r))); height: min(100cqh, calc(100cqw / var(--r))); padding: 2%; box-sizing: border-box; pointer-events: none; z-index: 3; }
[data-lecteur-live] > .lecteur-overlays > * { pointer-events: auto; }
/* Fond flou : copie très sombre et désaturée, purement décorative, derrière la vraie vidéo. */
[data-lecteur-live] > .lecteur-flou { position: absolute; left: -8%; top: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(48px) brightness(.35) saturate(.6); opacity: .85; pointer-events: none; z-index: 0; }
[data-lecteur-live] > .lecteur-stream-scene, [data-lecteur-live] > .lecteur-cadre { z-index: 1; }
/* Remplir l'écran : UNIQUEMENT si le membre l'a demandé (peut masquer une partie de l'image). */
[data-lecteur-live][data-affichage="remplir"] > .lecteur-stream-scene, [data-lecteur-live][data-affichage="remplir"] > .lecteur-cadre, [data-lecteur-live][data-affichage="remplir"] > video.lecteur-stream-video { width: 100cqw; height: 100cqh; }
[data-lecteur-live][data-affichage="remplir"] .lecteur-stream-video { object-fit: cover; }
/* Plein écran : toute la surface, aucun arrondi, même règle FIT. */
[data-lecteur-live]:fullscreen { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; margin: 0; }
[data-lecteur-live]:-webkit-full-screen { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; margin: 0; }
@supports not (container-type: size) {
  /* Très vieux navigateurs : la boîte garde le ratio et la vidéo reste en contain (jamais de crop), sans cadre calculé. */
  [data-lecteur-live] > .lecteur-stream-scene, [data-lecteur-live] > .lecteur-cadre, [data-lecteur-live] > video.lecteur-stream-video { inset: 0; left: 0; top: 0; transform: none; width: 100%; height: 100%; }
}
@media (prefers-reduced-motion: reduce) { [data-lecteur-live] { transition: none; } }
/* Menu « Affichage » (Ajuster / Remplir, fond) */
.lecteur-affichage { position: relative; display: inline-flex; }
.lecteur-affichage-panneau { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 10; min-width: 250px; max-height: 60cqh; overflow: auto; padding: 10px 12px; border-radius: 10px; background: rgba(12, 14, 26, .97); border: 1px solid rgba(255, 255, 255, .18); color: #fff; text-align: left; font-size: 13px; }
.lecteur-affichage-panneau[hidden] { display: none; }
.lecteur-affichage-panneau fieldset { border: 0; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lecteur-affichage-panneau legend { font-weight: 800; margin-bottom: 4px; padding: 0; }
.lecteur-affichage-panneau label { display: flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; }
.lecteur-affichage-panneau .aide { margin: 0 0 8px; color: rgba(255, 255, 255, .7); }

/* Surimpressions du lecteur (score, barre de contrôle) : elles s'effacent après quelques secondes sans mouvement ni toucher pour ne
   pas cacher le jeu, plein écran ou non (voir brancherMasquageAuto dans lecteur-live.js). Le pointeur est rendu aux clics vers la vidéo. */
[data-lecteur-live] .lecteur-overlays > *, [data-lecteur-live] .lecteur-stream-barre { transition: opacity .3s ease; }
[data-lecteur-live].lecteur-inactif .lecteur-overlays > *, [data-lecteur-live].lecteur-inactif .lecteur-stream-barre { opacity: 0; pointer-events: none; }
[data-lecteur-live].lecteur-inactif:fullscreen { cursor: none; }
@media (prefers-reduced-motion: reduce) { [data-lecteur-live] .lecteur-overlays > *, [data-lecteur-live] .lecteur-stream-barre { transition: none; } }

/* Logo d'équipe Arena et règlement officiel BO7 / veto des cartes (voir ARENA-BO7.md). */
.logo-equipe { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 22%; object-fit: cover; vertical-align: middle; background: var(--surface-claire); }
.logo-equipe-initiales { font-weight: 800; color: var(--violet); border: 1px solid var(--bordure); letter-spacing: .02em; }
.arena-ligne-equipe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.arena-ligne-equipe strong { display: inline; }
.arena-equipe-titre, .arena-match-titre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.arena-podium-equipe { display: inline-flex; align-items: center; gap: 6px; }
.badge-equipe { display: inline-flex; align-items: center; margin-left: 4px; vertical-align: middle; }
.badge-equipe img { width: 18px; height: 18px; border-radius: 22%; object-fit: cover; }

.arena-veto { margin: 8px 0 24px; }
.arena-veto-equipes { font-weight: 600; margin: 0 0 8px; }
.arena-veto-bandeau { padding: 10px 14px; border-radius: var(--radius-md); background: var(--surface-claire); border: 1px solid var(--bordure); margin: 0 0 10px; }
.arena-veto-a-toi { border-color: var(--violet); box-shadow: 0 0 0 2px rgba(var(--violet-rgb), .25); font-weight: 700; }
.arena-veto-fini { border-color: #2e9d57; }
.arena-veto-boutons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.arena-veto-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.arena-veto-choix { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 2px solid var(--bordure); border-radius: var(--radius-md); background: var(--surface); color: var(--texte); cursor: pointer; font-weight: 600; text-align: center; }
.arena-veto-choix:hover:not(:disabled), .arena-veto-choix:focus-visible { border-color: var(--violet); }
.arena-veto-choix img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--radius-md) - 4px); }
.arena-veto-choix-indispo { opacity: .4; cursor: not-allowed; filter: grayscale(1); }
.arena-veto-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 12px 0; }
.arena-veto-tuile { border: 1px solid var(--bordure); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.arena-veto-tuile img, .arena-veto-tuile-placeholder { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.arena-veto-tuile-placeholder { display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--texte-doux); background: var(--surface-claire); }
.arena-veto-tuile-decisive { border-color: var(--rang-or); }
.arena-veto-tuile-legende { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; font-size: 13px; }
.arena-veto-tuile-legende .aide { margin: 0; }
.arena-veto-numero { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-doux); }
.arena-veto-bans { margin: 0 0 10px; }
.arena-veto-rounds { max-width: 480px; }

.arena-reglement-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.arena-reglement-carte { margin: 0; border: 1px solid var(--bordure); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.arena-reglement-carte img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.arena-reglement-carte figcaption { padding: 6px 10px; font-weight: 600; }
.arena-reglement-decisive td { font-weight: 700; }
.arena-reglement-liste li { margin-bottom: 6px; }

/* Mode Ranked et vignettes des jeux (voir ARENA-RANKED.md). */
.arena-vignettes-jeux { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0 0 24px; }
.arena-vignette-jeu { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(135deg, #141028, #2a1f52); border: 1px solid rgba(255, 255, 255, .08); }
.arena-vignette-jeu > a, .arena-vignette-jeu > .arena-vignette-logo { color: #fff; }
.arena-vignette-lien, .arena-vignette-jeu { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 14px; text-decoration: none; }
.arena-vignette-lien { padding: 0; width: 100%; color: #fff; }
.arena-vignette-lien:hover { text-decoration: none; }
.arena-vignette-jeu:has(.arena-vignette-lien):hover { border-color: rgba(var(--violet-rgb), .7); box-shadow: 0 0 0 2px rgba(var(--violet-rgb), .25); }
.arena-vignette-logo { display: flex; align-items: center; justify-content: center; height: 86px; width: 100%; }
.arena-vignette-logo img { max-height: 86px; max-width: 90%; object-fit: contain; }
.arena-vignette-nom { font-weight: 700; color: #fff; text-align: center; }
.arena-vignette-bientot .arena-vignette-logo img { filter: grayscale(.85) brightness(.9); opacity: .6; }
.arena-vignette-bientot .arena-vignette-nom { color: rgba(255, 255, 255, .7); }
.arena-etiquette-bientot { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .25); }

.arena-ranked-regles { margin: 0 0 14px; padding-left: 20px; }
.arena-ranked-regles li { margin-bottom: 4px; }
.arena-ranked-formats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.arena-ranked-bouton-file { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 170px; padding: 14px 18px; border-radius: var(--radius-md); border: 2px solid var(--violet); background: var(--surface); color: var(--texte); cursor: pointer; text-align: left; }
.arena-ranked-bouton-file strong { font-size: 22px; color: var(--violet); }
.arena-ranked-bouton-file:hover:not(:disabled) { background: rgba(var(--violet-rgb), .08); }
.arena-ranked-bouton-file:disabled { opacity: .5; cursor: not-allowed; }
.arena-ranked-statut { margin: 0 0 20px; }
.arena-ranked-attente { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid var(--violet); background: rgba(var(--violet-rgb), .06); }
.arena-ranked-attente p { margin: 0; }
.arena-ranked-chrono-file { font-variant-numeric: tabular-nums; font-weight: 700; }
.arena-ranked-dialogue { border: none; border-radius: var(--radius-lg); padding: 24px; max-width: 420px; width: 90%; text-align: center; background: var(--surface); color: var(--texte); }
.arena-ranked-dialogue::backdrop { background: rgba(10, 6, 24, .7); }
.arena-ranked-chrono { font-size: 44px; font-weight: 800; margin: 6px 0; color: var(--violet); font-variant-numeric: tabular-nums; }
.arena-ranked-pret-boutons { display: flex; gap: 10px; justify-content: center; }
.arena-ranked-fiches, .pf-ranked { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.arena-ranked-fiches li, .pf-ranked li { display: flex; align-items: center; gap: 10px; }
.arena-ranked-fiches img, .pf-ranked img { width: 72px; height: 28px; object-fit: contain; background: #141028; border-radius: 6px; padding: 2px 4px; }
.arena-ranked-fiches small, .pf-ranked small { display: block; color: var(--texte-doux); }

.arena-palier { display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; border: 1px solid currentColor; }
.arena-palier-bronze { color: #b8733d; }
.arena-palier-argent { color: #8a96a3; }
.arena-palier-or { color: #c9a227; }
.arena-palier-platine { color: #3fa7a0; }
.arena-palier-diamant { color: #4f7df0; }
.arena-palier-elite { color: #c03fd6; }
.arena-paliers { display: flex; gap: 6px; flex-wrap: wrap; }
.arena-ligne-moi { background: rgba(var(--violet-rgb), .08); }
.arena-classement-entete { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.arena-classement-logo { height: 56px; max-width: 200px; object-fit: contain; background: #141028; border-radius: var(--radius-md); padding: 6px 10px; }
.arena-classement-joueur { display: flex; align-items: center; gap: 8px; }

.arena-ranked-equipes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 12px 0 20px; }
.arena-ranked-equipe { border: 1px solid var(--bordure); border-radius: var(--radius-md); padding: 12px 14px; background: var(--surface); }
.arena-ranked-equipe h3 { margin: 0 0 8px; font-size: 15px; }
.arena-ranked-gagnante { border-color: var(--rang-or); box-shadow: 0 0 0 2px rgba(201, 162, 39, .25); }
.arena-ranked-joueurs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.arena-ranked-joueurs li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 6px; border-radius: 6px; }
.arena-ranked-joueurs .aide { margin: 0; }
.arena-ranked-logo-equipe { width: 18px; height: 18px; border-radius: 22%; object-fit: cover; }
.arena-ranked-ok { color: #2e9d57; font-weight: 700; }
.arena-ranked-gain { color: #2e9d57; margin-left: auto; }
.arena-ranked-perte { color: #d0453a; margin-left: auto; }
.arena-ranked-score { font-size: 18px; font-weight: 700; }
.arena-ranked-cartes { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.arena-ranked-form-resultat, .arena-ranked-trancher { max-width: 420px; }
.arena-debut-tournoi { font-size: 15px; }
.arena-vignette-jeu .etiquette-admin { color: #fff; background: rgba(var(--violet-rgb), .55); border-color: rgba(255, 255, 255, .35); }

/* Page « En cours de développement » (voir sections-developpement.js). */
.en-developpement { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 56px 16px 64px; }
.en-developpement-icone { color: var(--violet); filter: drop-shadow(0 8px 24px rgba(var(--violet-rgb), .35)); animation: en-developpement-balancier 2.4s ease-in-out infinite; transform-origin: 70% 30%; }
@keyframes en-developpement-balancier { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .en-developpement-icone { animation: none; } }
.en-developpement-titre { font-size: clamp(34px, 7vw, 64px); line-height: 1.05; font-weight: 900; margin: 8px 0 0; letter-spacing: -.01em; }
.en-developpement-texte { font-size: clamp(16px, 2.4vw, 20px); color: var(--texte-doux); max-width: 560px; margin: 0; }

/* Onglets « Forum » et « Social » (24 septembre) : pages /forum et /social qui regroupent ce qui quittait l'accueil, et
   sous-navigation commune aux rubriques du forum (discussions, sorties de jeux, recherche de team, voir forum-onglets.ejs). */
.entete-page-rubrique .sous-titre { margin-bottom: 12px; }
.sous-onglets { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--bordure); }
.sous-onglet { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .92em;
  color: var(--texte-doux); background: var(--surface); border: 1px solid var(--bordure); text-decoration: none; transition: color .15s, border-color .15s, background .15s; }
.sous-onglet:hover { color: var(--texte); border-color: var(--violet); text-decoration: none; }
.sous-onglet.actif { color: #fff; background: var(--violet); border-color: var(--violet); }
.forum-sorties { margin-bottom: 26px; }
.forum-sorties .entete-section { align-items: center; }
.forum-sorties .entete-section > * { margin-top: 0; margin-bottom: 0; }   /* titre et lien « Tous les jeux » : mêmes bords, donc même centre */
.social-connexion { margin-bottom: 18px; }
.social-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 22px; }
.social-tuile { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--bordure);
  color: inherit; text-decoration: none; transition: transform .2s, border-color .2s, box-shadow .2s; }
.social-tuile:hover { transform: translateY(-2px); border-color: var(--violet); box-shadow: 0 10px 24px -16px rgba(var(--violet-rgb), .7); text-decoration: none; }
.social-tuile-icone { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; font-size: 26px;
  background: rgba(var(--violet-rgb), .14); border: 1px solid rgba(var(--violet-rgb), .3); }
.social-tuile-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.social-tuile-texte strong { font-size: 1.05em; display: inline-flex; align-items: center; gap: 6px; }
.social-tuile-fleche { color: var(--texte-doux); font-weight: 800; transition: transform .2s, color .2s; }
.social-tuile:hover .social-tuile-fleche { transform: translateX(4px); color: var(--violet); }
.social-en-ligne { max-width: 360px; }
@media (prefers-reduced-motion: reduce) { .social-tuile, .social-tuile-fleche { transition: none; } }

/* Titre « Fil d'actualité » de l'accueil (24 septembre), entre la bannière et le match en avant : liseré bleu → rouge de l'identité. */
.titre-fil-actualite { display: flex; align-items: center; gap: 12px; margin: 30px 0 0; font-size: clamp(20px, 2.2vw, 24px); font-weight: 900; letter-spacing: -.01em; color: var(--texte); }
.titre-fil-actualite::before { content: ''; width: 5px; height: 1.15em; border-radius: 3px; background: linear-gradient(180deg, #2F7BFF, #FF2E43); box-shadow: 0 0 12px rgba(47, 123, 255, .45); }
.titre-fil-actualite::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--bordure), transparent); }
.titre-fil-actualite + .bandeau-evenement-accueil { margin-top: 14px; }

/* ---- Navigation par menus déroulants (24 septembre) ----
   La barre latérale de l'ordinateur disparaît : ses liens sont rangés dans les menus du bandeau (Forum, Social, Live, Compétition,
   Aide ; Administration reste dans le menu du compte), et le contenu récupère toute la largeur. Sous 860px, .sidebar-app reste le
   tiroir « Menu » de la navigation mobile (voir le @media 860px plus haut), avec les mêmes liens. */
@media (min-width: 861px) {
  .sidebar-app { display: none; }
  .app-shell > .page { margin-inline: auto; }
}
.nav-deroulant { position: relative; }
.nav-deroulant > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; user-select: none; }
.nav-deroulant > summary::-webkit-details-marker { display: none; }
.nav-deroulant-fleche { font-size: 11px; opacity: .7; transition: transform .2s; }
.nav-deroulant[open] > summary { color: var(--texte); background: var(--surface-claire); }
.nav-deroulant[open] > summary.actif { background: var(--violet-decor); color: #fff; }
.nav-deroulant[open] .nav-deroulant-fleche { transform: rotate(180deg); }
.nav-deroulant > summary .badge { margin-left: 2px; }
.nav-deroulant-panneau { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); z-index: 60; min-width: 270px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--bordure); border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45); animation: nav-deroulant-entree .16s ease-out; }
.nav-deroulant-panneau::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* pont invisible entre l'onglet et le panneau */
@keyframes nav-deroulant-entree { from { opacity: 0; translate: 0 -6px; } }
.nav-deroulant-droite { left: auto; right: 0; transform: none; }
.nav-deroulant-large { flex-direction: row; align-items: flex-start; gap: 10px; min-width: 560px; }
.nav-deroulant-colonne { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; }
.nav-deroulant-categories { border-left: 1px solid var(--bordure); padding-left: 10px; max-height: min(60vh, 460px); overflow-y: auto; }
.nav-deroulant-titre { margin: 4px 10px 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.nav-deroulant-lien { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--texte); font-size: 14px; text-decoration: none; }
.nav-deroulant-lien:hover { background: var(--surface-claire); text-decoration: none; }
.nav-deroulant-lien.actif { background: rgba(var(--violet-rgb), .14); color: var(--violet); }
.nav-deroulant-lien > span[aria-hidden="true"], .nav-deroulant-lien > .sidebar-lien-logo { flex-shrink: 0; width: 22px; text-align: center; font-size: 17px; }
.nav-deroulant-lien > span:not([aria-hidden]):not(.badge) { display: flex; flex-direction: column; min-width: 0; }
.nav-deroulant-lien strong { font-weight: 700; }
.nav-deroulant-lien small { color: var(--texte-doux); font-size: 12px; line-height: 1.3; }
.nav-deroulant-lien .badge { margin-left: auto; }
.nav-deroulant-compact { padding: 6px 10px; font-size: 13.5px; }
.nav-deroulant-compact > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.nav-deroulant-compact .sidebar-lien-icone { flex-shrink: 0; width: 22px; display: inline-flex; justify-content: center; }
.nav-deroulant-compact .sidebar-lien-icone img { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .nav-deroulant-panneau { animation: none; } .nav-deroulant-fleche { transition: none; } }
/* Écrans moyens (861–1300px) : la barre de navigation tient sur UNE ligne — onglets resserrés, recherche plus étroite,
   logo seul (sans le nom) sous 1040px. */
@media (min-width: 861px) and (max-width: 1300px) {
  .bandeau-inner { flex-wrap: nowrap; gap: 10px; }
  .bandeau-tab { padding: 7px 10px; font-size: 14px; }
  .bandeau-tabs { gap: 0; flex-wrap: nowrap; min-width: 0; }
  .bandeau-droite { gap: 8px; }
  .bandeau-droite > a, .bandeau-droite .bouton { white-space: nowrap; }
  /* Recherche repliée en loupe, qui s'ouvre au clic (Ctrl K ouvre toujours la palette de recherche) */
  .recherche-bandeau-raccourci { display: none; }
  .recherche-bandeau { flex: 0 0 auto; }
  .recherche-bandeau input { width: 38px; padding: 8px 8px 8px 30px; cursor: pointer; transition: width .2s ease; }
  .recherche-bandeau input::placeholder { color: transparent; }
  .recherche-bandeau input:focus { width: 200px; cursor: text; }
  .recherche-bandeau input:focus::placeholder { color: var(--texte-doux); }
}
@media (min-width: 861px) and (max-width: 1040px) {
  .marque { font-size: 0; gap: 0; }
}

/* ---- Anti-cheat Arena (voir ARENA-ANTICHEAT.md) : voyants vert (actif), rouge (désactivé), bleu (console vérifiée) ---- */
.ac-pastille { display: inline-block; flex-shrink: 0; width: 11px; height: 11px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 3px rgba(229, 72, 77, .18), 0 0 10px rgba(229, 72, 77, .6); vertical-align: middle; }
[data-etat="actif"] > .ac-pastille, .ac-pastille[data-etat="actif"] { background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18), 0 0 10px rgba(34, 197, 94, .6); }
[data-etat="console"] > .ac-pastille, .ac-pastille[data-etat="console"] { background: #3B82F6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .18), 0 0 10px rgba(59, 130, 246, .6); }
.ac-voyant-joueur { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--texte-doux); white-space: nowrap; }
.ac-voyant-joueur[data-etat="inactif"] { color: #E5484D; }
.ac-voyant-joueur[data-etat="actif"] { color: #16A34A; }
.ac-voyant-joueur[data-etat="console"] { color: #3B82F6; }
.ac-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; }
.ac-carte { padding: 18px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--bordure); }
.ac-carte-statut { grid-column: 1 / -1; }
.ac-voyant-grand { display: flex; align-items: center; gap: 14px; font-size: 20px; }
.ac-voyant-grand .ac-pastille { width: 22px; height: 22px; }
.ac-etapes { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.ac-etapes .bouton { margin: 8px 0 4px; }
.ac-etapes .aide { display: block; }
.ac-code-zone { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.ac-code { font: 800 26px/1 ui-monospace, Consolas, monospace; letter-spacing: .2em; padding: 8px 14px; border-radius: 10px; background: var(--surface-claire); border: 1px dashed var(--violet); color: var(--texte); }
.ac-code-petit { font-size: 18px; padding: 4px 10px; }
.ac-mot-vert { color: #16A34A; font-weight: 700; } .ac-mot-rouge { color: #E5484D; font-weight: 700; }
.ac-sous-titre { margin: 18px 0 8px; font-size: 15px; }
.ac-appareils { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ac-appareils li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ac-appareils li .lien-bouton { margin-left: auto; }
.ac-form-console { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 10px 0; }
.ac-form-console label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.ac-preuve { padding: 12px; border-radius: 10px; background: var(--surface-claire); margin-bottom: 10px; }
.ac-preuve ol { margin: 6px 0 10px; padding-left: 20px; }
.ac-fichier { cursor: pointer; }
.ac-console-ok { font-size: 15px; }
.ac-carte details { margin: 8px 0; }
.ac-carte summary { cursor: pointer; font-weight: 700; }
.ac-roster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ac-roster ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ac-roster li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
@media (max-width: 600px) { .ac-roster { grid-template-columns: 1fr; } }

.ac-admin-demandes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 16px; }
.ac-admin-demande img { width: 100%; max-height: 260px; object-fit: contain; border-radius: 8px; background: #000; }
.ac-admin-actions { display: flex; gap: 8px; }
.ac-admin-consoles { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }

/* ==========================================================================================================
   RUBRIQUE LIVE — REFONTE PREMIUM (accueil /live, page d'une chaîne /live/:pseudo, chat du stream).
   Verre dépoli, dégradé de marque violet → magenta → rouge « direct », halos discrets. Tout suit les jetons du thème
   (clair / sombre) ; le lecteur et le Hero restent toujours sombres. Icônes : views/lr-icone.ejs.
   Les animations sont coupées en « réduire les animations » (bloc en fin de section).
   ========================================================================================================== */
:root {
  --lr-direct: #ff3b5c;
  --lr-degrade: linear-gradient(135deg, #8b5cf6 0%, #d946ef 55%, #ff3b5c 100%);
  --lr-verre: rgba(var(--surface-rgb), .72);
  --lr-lisere: rgba(255, 255, 255, .07);
  --lr-ombre: 0 18px 50px -18px rgba(0, 0, 0, .55);
  --lr-halo: 0 10px 26px -10px rgba(217, 70, 239, .75);
}
:root[data-theme="clair"] { --lr-lisere: rgba(27, 23, 48, .09); --lr-ombre: 0 18px 44px -20px rgba(60, 30, 120, .28); }

.lr-icone { display: block; flex: none; }

/* Point « en direct » : une onde qui s'élargit (jamais de clignotement). */
.lr-point-direct { position: relative; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lr-direct); box-shadow: 0 0 10px var(--lr-direct); }
.lr-point-direct::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--lr-direct); opacity: 0; animation: lr-onde 2s ease-out infinite; }
@keyframes lr-onde { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }

/* ---------- Boutons de la rubrique ---------- */
.bouton.lr-bouton-degrade, .bouton.lr-suivre, .bouton.chat-stream-envoyer {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 0; border: 0; border-radius: 999px;
  background: var(--lr-degrade); color: #fff; font-weight: 700; box-shadow: var(--lr-halo);
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.bouton.lr-bouton-degrade:hover, .bouton.lr-suivre:hover, .bouton.chat-stream-envoyer:hover { background: var(--lr-degrade); color: #fff; filter: brightness(1.1); transform: translateY(-1px); }
.bouton.lr-bouton-degrade .lr-icone, .bouton.lr-bouton-verre .lr-icone { width: 18px; height: 18px; }
.bouton.lr-bouton-verre {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 0; border-radius: 999px; background: var(--lr-verre); color: var(--texte);
  border: 1px solid var(--bordure); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.bouton.lr-bouton-verre:hover { background: rgba(var(--violet-rgb), .16); border-color: rgba(var(--violet-rgb), .5); }

/* ---------- Accueil : en-tête ---------- */
.lr-entete { align-items: flex-end; padding: 8px 0 4px; }
.lr-surtitre { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-doux); }
.titre-page.lr-titre {
  margin: 8px 0 6px; font-size: clamp(38px, 5.4vw, 60px); line-height: 1; letter-spacing: -.03em; font-weight: 900;
  background: var(--lr-degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lr-entete .sous-titre { max-width: 62ch; }

/* ---------- Accueil : recherche et filtres ---------- */
.lr-filtres {
  padding: 14px 16px; border-radius: 20px; background: var(--lr-verre); border: 1px solid var(--lr-lisere); box-shadow: var(--lr-ombre);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.lr-filtres select, .lr-filtres input[type="search"] { min-height: 42px; border-radius: 12px; background: rgba(var(--fond-rgb), .6); border: 1px solid var(--bordure); transition: border-color .2s, box-shadow .2s; }
.lr-filtres select:focus, .lr-filtres input[type="search"]:focus { outline: none; border-color: rgba(var(--violet-rgb), .7); box-shadow: 0 0 0 4px rgba(var(--violet-rgb), .15); }
.lr-champ-recherche { position: relative; }
.lr-champ-recherche > .lr-icone { position: absolute; left: 13px; bottom: 12px; width: 18px; height: 18px; color: var(--texte-doux); pointer-events: none; }
.lr-champ-recherche input[type="search"] { padding-left: 40px; }
.bouton.lr-envoyer { min-height: 42px; border-radius: 12px; background: var(--lr-degrade); color: #fff; box-shadow: var(--lr-halo); }
.bouton.lr-envoyer:hover { background: var(--lr-degrade); filter: brightness(1.1); }

/* ---------- Accueil : catégories ---------- */
.live-categories { gap: 8px; }
.live-categorie-puce { padding: 7px 15px; font-weight: 600; background: var(--lr-verre); border-color: var(--lr-lisere); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .2s, background .2s, transform .2s; }
.live-categorie-puce:hover { transform: translateY(-1px); border-color: rgba(var(--violet-rgb), .55); }
.live-categorie-puce.actif { background: var(--lr-degrade); border-color: transparent; color: #fff; box-shadow: var(--lr-halo); }

/* ---------- Accueil : titres de section ---------- */
.titre-section.lr-titre-section { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.titre-section.lr-titre-section::after { content: ""; flex: 1; height: 1px; margin-left: 6px; background: linear-gradient(90deg, var(--bordure), transparent); }
.lr-titre-section .badge-live-compte, .lr-compte {
  margin: 0; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: rgba(var(--violet-rgb), .16); color: var(--texte); border: 1px solid rgba(var(--violet-rgb), .3);
}
.lr-titre-direct .badge-live-compte { background: rgba(255, 59, 92, .14); border-color: rgba(255, 59, 92, .4); }

/* ---------- Accueil : Hero ---------- */
.lr-hero { border-radius: 26px; border: 0; box-shadow: 0 34px 90px -34px rgba(0, 0, 0, .8), 0 0 0 1px rgba(var(--violet-rgb), .14); }
.lr-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none; opacity: .6;
  background: var(--lr-degrade);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.lr-hero-slide:not([hidden]) .lr-hero-fond { animation: lr-travelling 16s ease-out both; }
@keyframes lr-travelling { from { transform: scale(1.07); } to { transform: scale(1); } }
.lr-hero-voile { background: linear-gradient(0deg, rgba(5, 4, 12, .96) 2%, rgba(5, 4, 12, .45) 50%, rgba(5, 4, 12, .08)), linear-gradient(90deg, rgba(5, 4, 12, .6), transparent 60%); }
.lr-hero-titre { font-size: clamp(24px, 4vw, 44px); font-weight: 900; letter-spacing: -.025em; text-shadow: 0 4px 24px rgba(0, 0, 0, .55); }
.lr-hero .lr-puce { padding: 3px 10px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lr-hero .badge-live { box-shadow: 0 0 22px -2px rgba(255, 59, 92, .9); background: var(--lr-direct); }
.lr-hero-vues { display: inline-flex; align-items: center; gap: 4px; vertical-align: -3px; }
.lr-hero-vues .lr-icone { width: 16px; height: 16px; }
.bouton.lr-hero-cta {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 8px; padding: 12px 24px; border-radius: 999px;
  background: #fff; color: #0b0716; font-weight: 800; box-shadow: 0 14px 34px -10px rgba(255, 255, 255, .4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bouton.lr-hero-cta:hover { background: #fff; color: #0b0716; transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 40px -10px rgba(217, 70, 239, .7); }
.lr-hero-cta .lr-icone { width: 16px; height: 16px; }
.lr-hero-points { gap: 6px; }
.lr-hero-point { width: 10px; height: 10px; transition: width .3s ease, background .3s ease; }
.lr-hero-point.actif { width: 28px; border-radius: 999px; background: #fff; border-color: #fff; }

/* ---------- Cartes de Live ---------- */
a.live-carte.lr-carte {
  position: relative; border-radius: 18px; border: 1px solid var(--lr-lisere); background: var(--lr-verre);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease;
}
a.live-carte.lr-carte:hover { transform: translateY(-5px); border-color: rgba(var(--violet-rgb), .45); box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .65), 0 0 40px -12px rgba(217, 70, 239, .45); }
a.live-carte.lr-carte[data-etat="LIVE"]:hover { border-color: rgba(255, 59, 92, .55); box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .65), 0 0 44px -12px rgba(255, 59, 92, .6); }
.lr-carte .live-carte-visuel { margin: 8px 8px 0; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 30% 20%, #2a1f4d, #07060d 70%); }
.lr-carte .live-carte-visuel::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(5, 4, 12, .6), transparent 45%); }
.lr-carte .live-carte-visuel > .badge-live, .lr-carte .live-carte-visuel > .lr-badge-etat, .lr-carte .live-carte-visuel > .live-carte-spectateurs, .lr-carte-lecture { z-index: 2; }
.lr-carte .live-carte-visuel img.lr-miniature, .lr-carte .live-carte-visuel img.live-carte-avatar-repli { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
a.lr-carte:hover .live-carte-visuel img.lr-miniature { transform: scale(1.05); }
.lr-carte .live-carte-visuel .badge-live { border-radius: 6px; background: var(--lr-direct); box-shadow: 0 4px 18px -2px rgba(255, 59, 92, .75); }
.lr-carte .live-carte-spectateurs {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: 12px; font-variant-numeric: tabular-nums;
  background: rgba(8, 6, 16, .6); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.live-carte-spectateurs .lr-icone { width: 14px; height: 14px; }
.lr-carte-lecture {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .94); color: #0b0716; box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  opacity: 0; transform: scale(.75); transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.lr-carte-lecture .lr-icone { width: 22px; height: 22px; margin-left: 3px; }
a.lr-carte:hover .lr-carte-lecture, a.lr-carte:focus-visible .lr-carte-lecture { opacity: 1; transform: scale(1); }
.lr-carte:not(.lr-carte-streamer) .live-carte-texte { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 11px; row-gap: 3px; padding: 12px 14px 14px; }
.lr-carte:not(.lr-carte-streamer) .live-carte-texte > * { grid-column: 2; }
.lr-carte:not(.lr-carte-streamer) .live-carte-texte > .lr-carte-avatar { grid-column: 1; grid-row: 1 / span 3; }
.lr-carte-avatar { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--lr-degrade); color: #fff; font-weight: 800; font-size: 15px; }
.lr-carte-avatar img { width: 100%; height: 100%; object-fit: cover; }
a.lr-carte[data-etat="LIVE"] .lr-carte-avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--lr-direct); }
.lr-carte .live-carte-titre { font-size: 15px; font-weight: 700; letter-spacing: -.005em; }
.lr-carte .live-carte-pseudo { font-size: 13px; }
.lr-carte .live-carte-categorie { font-size: 12px; font-weight: 700; }
.lr-carte-streamer .live-carte-texte { align-items: center; text-align: center; padding: 12px 14px 16px; }
.lr-carte-streamer .live-carte-titre { justify-content: center; }
.lr-carte-streamer .live-carte-visuel img.lr-photo-profil, .lr-carte-streamer .live-carte-visuel .avatar-secours.lr-photo-profil { box-shadow: 0 0 0 4px rgba(255, 255, 255, .06), 0 0 0 10px rgba(var(--violet-rgb), .12), 0 18px 50px rgba(var(--violet-rgb), .35); }

/* ---------- Évènements, programmés, états vides ---------- */
.lr-evenement { border-radius: 18px; border-color: var(--lr-lisere); background: linear-gradient(135deg, rgba(var(--violet-rgb), .18), var(--lr-verre)); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.lr-evenement:hover { box-shadow: var(--lr-ombre); }
.lr-evenement.en-cours { border-color: rgba(255, 59, 92, .5); box-shadow: 0 0 34px -14px rgba(255, 59, 92, .6); }
.lr-evenement-equipes { font-size: 18px; font-weight: 800; }
.bouton.lr-prevenir { border-radius: 999px; }
.lr-vide { border-radius: 20px; border-style: solid; border-color: var(--lr-lisere); background: radial-gradient(80% 120% at 50% 0%, rgba(var(--violet-rgb), .12), transparent 70%), var(--lr-verre); padding: 30px 20px; }
.lr-squelette-carte { padding: 8px; border-radius: 18px; background: var(--lr-verre); border: 1px solid var(--lr-lisere); }

/* ==========================================================================================================
   Page d'une chaîne
   ========================================================================================================== */
.live-page { gap: 22px; }
.live-colonne-principale { position: relative; isolation: isolate; }
/* Lumière d'ambiance derrière le lecteur. */
.live-colonne-principale::before {
  content: ""; position: absolute; z-index: -1; left: 4%; right: 4%; top: 2%; height: min(46vw, 520px); pointer-events: none;
  background: radial-gradient(60% 60% at 30% 40%, rgba(139, 92, 246, .32), transparent 70%), radial-gradient(50% 50% at 75% 60%, rgba(255, 59, 92, .18), transparent 70%);
  filter: blur(40px);
}
.live-page .lecteur-stream { border-radius: 20px; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 34px 90px -34px rgba(0, 0, 0, .85), 0 0 0 1px rgba(var(--violet-rgb), .12); }
.live-page .lecteur-stream:fullscreen { border-radius: 0; border: 0; box-shadow: none; }

/* Voile (connexion, hors ligne, fin) */
.live-page .lecteur-stream-voile {
  background: radial-gradient(70% 70% at 50% 35%, rgba(139, 92, 246, .3), transparent 65%), radial-gradient(50% 50% at 85% 95%, rgba(255, 59, 92, .2), transparent 65%), #07060d;
}
.live-page .lecteur-stream-voile .avatar, .live-page .lecteur-stream-voile .avatar-secours { box-shadow: 0 0 0 4px rgba(255, 255, 255, .06), 0 0 0 12px rgba(139, 92, 246, .12), 0 20px 60px rgba(139, 92, 246, .4); }
#live-page[data-en-direct="1"] .lecteur-stream-voile .avatar, #live-page[data-en-direct="1"] .lecteur-stream-voile .avatar-secours { animation: lr-halo 2.4s ease-in-out infinite; }
@keyframes lr-halo { 50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, .08), 0 0 0 18px rgba(255, 59, 92, .14), 0 20px 70px rgba(255, 59, 92, .45); } }
.live-page .lecteur-stream-voile p { font-weight: 600; font-size: 15px; letter-spacing: .01em; }
.live-page .lecteur-stream-voile .bouton { border-radius: 999px; background: var(--lr-degrade); color: #fff; box-shadow: var(--lr-halo); }
.live-page .lecteur-son-flottant { bottom: 66px; padding: 10px 18px; background: var(--lr-degrade); box-shadow: 0 12px 30px -8px rgba(217, 70, 239, .85); animation: lr-appel 2.2s ease-in-out infinite; }
.live-page .lecteur-son-flottant:hover { background: var(--lr-degrade); filter: brightness(1.1); }
@keyframes lr-appel { 50% { box-shadow: 0 12px 36px -4px rgba(217, 70, 239, 1), 0 0 0 6px rgba(217, 70, 239, .18); } }

/* Barre de contrôles en verre */
.live-page .lecteur-stream-barre { gap: 8px; padding: 34px 12px 10px; background: linear-gradient(0deg, rgba(4, 3, 10, .9), rgba(4, 3, 10, .45) 60%, transparent); }
.lr-barre-groupe { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.live-page .lecteur-stream-barre .badge-live { height: 26px; padding: 0 10px; border-radius: 8px; background: var(--lr-direct); box-shadow: 0 0 18px -2px rgba(255, 59, 92, .85); }
.live-page .lecteur-stream-spectateurs, .live-page .lecteur-stream-duree:not(:empty) {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-weight: 700; font-size: 12px;
  font-variant-numeric: tabular-nums; background: rgba(8, 6, 16, .55); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.live-page .lecteur-stream-spectateurs .lr-icone { width: 15px; height: 15px; }
.live-page .lecteur-stream-barre .lr-ctrl, .live-page .lecteur-affichage-bouton, .live-page .lecteur-stream-qualite select {
  height: 38px; border-radius: 12px; color: #fff; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.live-page .lecteur-stream-barre .lr-ctrl { width: 38px; padding: 0; display: inline-grid; place-items: center; font-size: 0; }
.live-page .lecteur-stream-barre .lr-ctrl:hover, .live-page .lecteur-affichage-bouton:hover, .live-page .lecteur-stream-qualite select:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .22); }
.live-page .lecteur-stream-barre .lr-ctrl:active { transform: scale(.93); }
.live-page .lecteur-stream-barre .lr-ctrl[aria-pressed="true"] { background: rgba(var(--violet-rgb), .45); border-color: rgba(var(--violet-rgb), .75); }
.live-page .lecteur-stream-barre .lr-ctrl:focus-visible, .live-page .lecteur-affichage-bouton:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.live-page .lecteur-stream-qualite select { padding: 0 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.live-page .lecteur-stream-qualite select option { color: #111; background: #fff; }
.lr-qualite-libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.live-page .lecteur-affichage-bouton { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; font-size: 13px; font-weight: 600; }
/* Icône du menu « Affichage » (bouton créé par lecteur-live.js), sur tous les lecteurs. */
.lecteur-affichage-bouton::before {
  content: ""; width: 17px; height: 17px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.live-page .lecteur-affichage-panneau { border-radius: 16px; background: rgba(10, 8, 20, .92); border-color: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8); }
/* Volume : le curseur se déploie au survol (souris) ; toujours visible sur tablette tactile. */
.live-page .lecteur-stream-volume { gap: 4px; }
.live-page .lecteur-stream-volume input[type="range"] { width: 0; opacity: 0; accent-color: #d946ef; transition: width .25s ease, opacity .25s ease; }
.live-page .lecteur-stream-volume:hover input[type="range"], .live-page .lecteur-stream-volume:focus-within input[type="range"] { width: 86px; opacity: 1; }
@media (hover: none) { .live-page .lecteur-stream-volume input[type="range"] { width: 72px; opacity: 1; } }
/* États des icônes : volume (haut / bas / muet), plein écran (entrer / sortir), cloche (active / coupée). */
#bouton-muet .lr-croix, #bouton-muet[data-niveau="bas"] .lr-onde2, #bouton-muet[data-niveau="muet"] .lr-onde1, #bouton-muet[data-niveau="muet"] .lr-onde2 { display: none; }
#bouton-muet[data-niveau="muet"] .lr-croix { display: inline; }
#bouton-plein-ecran .lr-sortir { display: none; }
.lecteur-stream:fullscreen #bouton-plein-ecran .lr-entrer { display: none; }
.lecteur-stream:fullscreen #bouton-plein-ecran .lr-sortir { display: inline; }
#bouton-cloche[data-cloche="1"] .lr-barre-cloche { display: none; }

/* Carte de la chaîne */
.live-page .live-infos { display: flex; flex-direction: column; gap: 14px; }
.live-page .live-infos-streamer {
  gap: 16px; padding: 16px 18px; border-radius: 20px; background: var(--lr-verre); border: 1px solid var(--lr-lisere); box-shadow: var(--lr-ombre);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.lr-avatar-chaine { position: relative; display: block; flex: none; border-radius: 50%; text-decoration: none; }
.lr-avatar-chaine > :not(.lr-avatar-live) { position: relative; z-index: 1; }
.live-page .lr-avatar-chaine .avatar, .live-page .lr-avatar-chaine .avatar-secours { width: 60px; height: 60px; }
#live-page[data-en-direct="1"] .lr-avatar-chaine::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(#8b5cf6, #d946ef, #ff3b5c, #8b5cf6); animation: lr-tourne 3s linear infinite; }
#live-page[data-en-direct="1"] .lr-avatar-chaine::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: var(--surface); }
@keyframes lr-tourne { to { transform: rotate(360deg); } }
.lr-avatar-live {
  display: none; position: absolute; left: 50%; bottom: -9px; z-index: 2; transform: translateX(-50%); padding: 1px 6px; border-radius: 5px;
  background: var(--lr-direct); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .08em; line-height: 1.4; border: 2px solid var(--surface);
}
#live-page[data-en-direct="1"] .lr-avatar-live { display: block; }
.live-page .live-titre { font-size: clamp(18px, 1.9vw, 23px); font-weight: 800; letter-spacing: -.015em; line-height: 1.25; overflow-wrap: anywhere; }
.live-page .live-sous-titre { font-size: 14px; }
.live-page .live-infos-actions { gap: 8px; }
.bouton.lr-suivre { height: 40px; padding: 0 20px; }
.bouton.lr-suivre .lr-icone { width: 17px; height: 17px; }
.bouton.lr-suivre[data-suit="1"] { background: rgba(var(--violet-rgb), .14); color: var(--texte); border: 1px solid rgba(var(--violet-rgb), .45); box-shadow: none; }
.bouton.lr-suivre[data-suit="1"] .lr-icone { fill: #ff4d8d; stroke: #ff4d8d; }
.lr-pastille, .live-page .live-like > .lien-bouton, .live-page .live-like > a {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 15px; border-radius: 999px; flex: none;
  background: rgba(var(--violet-rgb), .1); border: 1px solid var(--bordure); color: var(--texte); font-size: 14px; font-weight: 600;
  text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.lr-pastille:hover, .live-page .live-like > .lien-bouton:hover, .live-page .live-like > a:hover { background: rgba(var(--violet-rgb), .2); border-color: rgba(var(--violet-rgb), .5); text-decoration: none; }
.lr-pastille:active { transform: scale(.95); }
.lr-pastille .lr-icone { width: 17px; height: 17px; }
.lr-pastille-ronde { width: 40px; padding: 0; }
.lr-signaler:hover { color: var(--alerte); background: rgba(255, 80, 80, .1); border-color: rgba(255, 80, 80, .45); }
#bouton-cloche[data-cloche="1"] { color: #fbbf24; background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .5); }
.live-page .live-like > .lien-bouton, .live-page .live-like > a { background: rgba(255, 77, 141, .1); border-color: rgba(255, 77, 141, .3); font-weight: 700; font-variant-numeric: tabular-nums; }
.live-page .live-like-bouton[data-aime="1"] { color: var(--texte); background: rgba(255, 77, 141, .22); border-color: rgba(255, 77, 141, .6); }
.live-page .live-like-bouton[data-aime="1"] .live-like-coeur { animation: lr-pop .35s ease; display: inline-block; }
@keyframes lr-pop { 50% { transform: scale(1.35); } }
.live-page #note-partage { align-self: flex-start; margin: -6px 0 0; padding: 6px 12px; border-radius: 999px; background: rgba(74, 222, 128, .14); border: 1px solid rgba(74, 222, 128, .4); font-size: 13px; font-weight: 600; }

/* Réactions, sondage, fiche */
.live-page .lr-reactions { gap: 8px; margin: 0; }
.live-page .lr-reaction {
  height: 42px; padding: 0 14px; font-size: 19px; background: var(--lr-verre); border: 1px solid var(--lr-lisere);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.live-page button.lr-reaction:hover:not(:disabled) { transform: translateY(-2px) scale(1.06); background: rgba(var(--violet-rgb), .16); border-color: rgba(var(--violet-rgb), .6); }
.live-page button.lr-reaction:active { transform: scale(.9); }
.live-page .lr-reaction-n { font-weight: 700; }
.lr-flotte { font-size: 28px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35)); }
.live-page .lr-sondage-carte { border-radius: 18px; border-color: var(--lr-lisere); background: linear-gradient(135deg, rgba(var(--violet-rgb), .14), var(--lr-verre)); padding: 16px 18px; }
.live-page .lr-sondage-piste { height: 10px; border-radius: 999px; }
.live-page .lr-sondage-rempli { background: var(--lr-degrade); border-radius: 999px; transition: width .5s ease; }
.live-page .lr-fiche { padding: 16px 18px; border-radius: 20px; background: var(--lr-verre); border: 1px solid var(--lr-lisere); margin: 0; }
.live-page .lr-fiche .lr-puce { padding: 3px 11px; font-size: 12px; }
.live-page .lr-fiche .lr-tag { padding: 2px 9px; border-radius: 999px; background: rgba(var(--violet-rgb), .1); }

/* ---------- Chat ---------- */
.live-page .chat-stream {
  position: sticky; top: 16px; height: min(80vh, 780px); overflow: hidden; border-radius: 22px; background: var(--lr-verre);
  border: 1px solid var(--lr-lisere); box-shadow: var(--lr-ombre); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.live-page .chat-stream-entete { padding: 14px 16px; border-bottom: 1px solid var(--lr-lisere); background: linear-gradient(180deg, rgba(var(--violet-rgb), .12), transparent); }
.chat-stream-titre { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; }
.live-page .chat-stream-epingle { margin: 8px 10px 0; border: 1px solid rgba(var(--violet-rgb), .35); border-radius: 14px; background: linear-gradient(135deg, rgba(var(--violet-rgb), .2), rgba(217, 70, 239, .08)); }
.live-page .chat-stream-messages { gap: 1px; padding: 8px; scrollbar-width: thin; scrollbar-color: rgba(var(--violet-rgb), .35) transparent; }
.live-page .chat-stream-messages li { padding: 6px 48px 6px 8px; border-radius: 10px; line-height: 1.45; transition: background .15s ease; animation: lr-message .25s ease-out; }
.live-page .chat-stream-messages li:hover { background: rgba(var(--violet-rgb), .08); }
.live-page .chat-stream-messages li.chat-stream-du-streamer { background: linear-gradient(90deg, rgba(255, 59, 92, .13), transparent 75%); }
@keyframes lr-message { from { opacity: 0; transform: translateY(4px); } }
.live-page .chat-stream-messages li .avatar, .live-page .chat-stream-messages li .avatar-conteneur, .live-page .chat-stream-messages li .avatar-conteneur .avatar { width: 26px; height: 26px; }
.live-page .chat-stream-pseudo { font-weight: 800; }
.live-page .chat-stream-actions { top: 4px; right: 4px; }
.live-page .chat-stream-nouveaux { background: var(--lr-degrade); border: 0; box-shadow: var(--lr-halo); bottom: 110px; }
.live-page .chat-stream-formulaire { padding: 12px; gap: 8px; border-top: 1px solid var(--lr-lisere); background: rgba(var(--fond-rgb), .35); }
.live-page #chat-stream-champ { height: 46px; padding: 0 14px; border-radius: 14px; background: rgba(var(--fond-rgb), .75); border: 1px solid var(--bordure); transition: border-color .2s ease, box-shadow .2s ease; }
.live-page #chat-stream-champ:focus { outline: none; border-color: rgba(var(--violet-rgb), .7); box-shadow: 0 0 0 4px rgba(var(--violet-rgb), .16); }
.bouton.chat-stream-envoyer { height: 38px; padding: 0 16px; border-radius: 12px; }
.chat-stream-envoyer .lr-icone { width: 16px; height: 16px; }
.live-page .chat-stream-info { padding: 14px 16px; border-top: 1px solid var(--lr-lisere); text-align: center; }

/* Mode théâtre : le lecteur prend la place, le chat reste collé à droite. */
.live-page-theatre .live-colonne-principale::before { height: min(56vw, 640px); }

/* ---------- Tablette / mobile : une colonne — lecteur, chaîne, réactions, CHAT, puis le reste ---------- */
@media (max-width: 900px) {
  .live-page { display: flex; flex-direction: column; gap: 12px; }
  .live-page .live-colonne-principale, .live-page .live-infos { display: contents; }
  .live-page .live-colonne-principale::before { display: none; }
  .live-page .lecteur-stream { order: 1; }
  .live-page .live-infos-streamer, .live-page #note-partage { order: 2; }
  .live-page .lr-reactions, .live-page .lr-sondage { order: 3; }
  .live-page .chat-stream { order: 4; position: relative; top: auto; height: min(64svh, 580px); min-height: 360px; }
  .live-page .lr-fiche, .live-page .lr-bande, .live-page .live-historique { order: 5; }
  .live-page .lr-ctrl-theatre { display: none; }
}
@media (max-width: 640px) {
  /* Lecteur bord à bord, comme une app vidéo. */
  .live-page .lecteur-stream { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); border-radius: 0; border-width: 1px 0; box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .8); }
  .live-page .lecteur-stream-barre { gap: 6px; padding: 26px 8px 8px; }
  .live-page .lecteur-stream-barre .lr-ctrl, .live-page .lecteur-affichage-bouton, .live-page .lecteur-stream-qualite select { height: 36px; border-radius: 11px; }
  .live-page .lecteur-stream-barre .lr-ctrl { width: 36px; }
  .live-page .lecteur-affichage-bouton { width: 36px; padding: 0; justify-content: center; }
  .lecteur-affichage-bouton::before { content: ""; font-size: inherit; }
  .live-page .lecteur-stream-qualite select { padding: 0 6px; max-width: 86px; }
  .live-page .lecteur-stream-duree { display: none; }
  .live-page .lecteur-son-flottant { bottom: 58px; left: 8px; }
  .live-page .live-infos-streamer { gap: 12px; padding: 14px; border-radius: 18px; }
  .live-page .lr-avatar-chaine .avatar, .live-page .lr-avatar-chaine .avatar-secours { width: 50px; height: 50px; }
  .live-page .live-infos-texte { flex: 1 1 calc(100% - 70px); min-width: 0; }
  .live-page .live-infos-actions { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
  .live-page .live-infos-actions::-webkit-scrollbar { display: none; }
  .live-page .live-infos-actions > .bouton.lr-suivre { flex: 1 0 auto; }
  .live-page .lr-reactions { flex-wrap: nowrap; }
  .live-page .lr-reaction { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 4px; font-size: 17px; gap: 3px; }
  .live-page .chat-stream { border-radius: 18px; }
  .live-page #chat-stream-champ { font-size: 16px; } /* pas de zoom automatique sur iOS */
  .live-page .lr-fiche { padding: 14px; border-radius: 18px; }

  /* Accueil : catégories en ruban défilant, bord à bord. */
  .live-categories { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(50% - 50vw); padding: 2px calc(50vw - 50%) 8px; scroll-snap-type: x proximity; }
  .live-categories::-webkit-scrollbar { display: none; }
  .live-categorie-puce { flex: none; scroll-snap-align: start; }
  .lr-filtres { border-radius: 18px; padding: 12px; }
  .lr-hero { border-radius: 20px; }
  .lr-hero-cta { padding: 10px 20px; }
  .titre-section.lr-titre-section { font-size: 19px; }
  .live-grille { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* Tactile : pas de survol → le bouton lecture reste discret mais visible sur les Lives en direct. */
  a.lr-carte[data-etat="LIVE"] .lr-carte-lecture { opacity: .9; transform: scale(.8); }
}
@media (min-width: 641px) and (max-width: 900px) { .live-grille { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
  .lr-point-direct::after, .lr-hero-slide .lr-hero-fond, #live-page .lecteur-stream-voile .avatar, #live-page .lecteur-stream-voile .avatar-secours,
  .live-page .lecteur-son-flottant, #live-page .lr-avatar-chaine::before, .live-page .chat-stream-messages li, .live-page .live-like-coeur { animation: none !important; }
  a.live-carte.lr-carte:hover, .bouton.lr-hero-cta:hover, .live-page button.lr-reaction:hover:not(:disabled) { transform: none; }
}

/* Rubrique Live premium — ajustements : chat en flux continu (avatar, pseudo puis message, comme un chat de stream),
   badge « Streamer », contrôles compacts, cœur « J'aime » en icône, voile centré au-dessus de la barre de contrôles. */
.live-page .chat-stream-messages li { display: block; }
.live-page .chat-stream-messages li > :first-child { display: inline-flex; vertical-align: -8px; margin-right: 7px; }
.live-page .chat-stream-du-streamer .chat-stream-pseudo { color: var(--lr-direct); }
.live-page .chat-stream-du-streamer .chat-stream-pseudo::before {
  content: "Streamer"; display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 5px; vertical-align: 1px;
  background: var(--lr-direct); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
}
.live-page .lecteur-stream-qualite select { width: auto; }
.live-page .live-like-coeur { display: inline-flex; }
.live-page .live-like .lr-icone { width: 17px; height: 17px; color: #ff4d8d; }
.live-page .live-like-bouton[data-aime="1"] .lr-icone, .live-page .live-like-compte .lr-icone { fill: #ff4d8d; }
.live-page .lecteur-stream-voile { padding-bottom: 64px; }
@media (max-width: 640px) {
  .live-page .lecteur-affichage-bouton { font-size: 0; gap: 0; }
  .live-page .lecteur-stream-voile { padding-bottom: 96px; gap: 8px; }
  .live-page .lecteur-stream-voile .avatar, .live-page .lecteur-stream-voile .avatar-secours { width: 64px; height: 64px; font-size: 28px; }
  .live-page .lecteur-stream-voile p { font-size: 14px; }
}
/* Chat : l'avatar reste dans sa colonne, les lignes suivantes du message s'alignent sur le pseudo. */
.live-page .chat-stream-messages li { padding-left: 44px; }
.live-page .chat-stream-messages li > :first-child { position: absolute; left: 9px; top: 6px; margin: 0; }
.live-page .lecteur-stream-qualite select { min-width: 0; max-width: 112px; }

/* ==========================================================================================================
   ACCUEIL LIVE — SECONDE PASSE PREMIUM : en-tête « aurore » + pouls du direct, vedette cinématique (écran, fiche, miniatures),
   tuiles de catégories illustrées (jaquettes réelles de public/icones-jeux), état vide « radar », chaînes suivies en cartes.
   ========================================================================================================== */

/* ---------- En-tête : lumière d'aurore + pouls ---------- */
.lr-entete { position: relative; isolation: isolate; padding: 18px 0 12px; }
.lr-entete::before {
  content: ""; position: absolute; z-index: -1; inset: -60px 0 -30px 0; pointer-events: none;
  background: radial-gradient(40% 60% at 12% 30%, rgba(139, 92, 246, .3), transparent 70%), radial-gradient(35% 55% at 55% 10%, rgba(217, 70, 239, .2), transparent 70%), radial-gradient(30% 50% at 88% 40%, rgba(255, 59, 92, .15), transparent 70%);
  filter: blur(30px); animation: lr-aurore 18s ease-in-out infinite alternate;
}
@keyframes lr-aurore { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(2%, 3%, 0) scale(1.08); } }
.lr-pouls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lr-pouls-item {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; color: var(--texte-doux);
  background: var(--lr-verre); border: 1px solid var(--lr-lisere); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lr-pouls-item strong { color: var(--texte); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lr-pouls-item .lr-icone { width: 16px; height: 16px; color: var(--violet); }
.lr-pouls-direct { background: rgba(255, 59, 92, .08); border-color: rgba(255, 59, 92, .35); }
.lr-pouls-calme .lr-icone { color: var(--texte-doux); }

/* ---------- Tuiles de catégories ---------- */
.live-categories.lr-categories { flex-wrap: nowrap; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 18px 0 22px; padding: 4px 2px 12px; scroll-snap-type: x proximity; }
.lr-categories::-webkit-scrollbar { display: none; }
.live-categorie-puce.lr-cat {
  --teinte: 270; flex: 0 0 auto; gap: 12px; min-width: 188px; padding: 8px 18px 8px 8px; border-radius: 18px; scroll-snap-align: start;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.live-categorie-puce.lr-cat:hover { transform: translateY(-3px); border-color: hsl(var(--teinte) 70% 60% / .6); box-shadow: 0 16px 32px -16px hsl(var(--teinte) 80% 50% / .7); }
.lr-cat-visuel {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 13px; color: #fff;
  background: linear-gradient(135deg, hsl(var(--teinte) 75% 55%), hsl(calc(var(--teinte) + 40) 80% 32%)); box-shadow: 0 8px 20px -8px hsl(var(--teinte) 80% 50% / .75);
}
.lr-cat-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.live-categorie-puce.lr-cat:hover .lr-cat-visuel img { transform: scale(1.08); }
.lr-cat-visuel .lr-icone { width: 26px; height: 26px; }
.lr-cat-visuel.lr-cat-toutes { background: var(--lr-degrade); box-shadow: var(--lr-halo); }
.lr-cat-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lr-cat-nom { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 800; }
.lr-cat-sous { font-size: 12px; font-weight: 600; color: var(--texte-doux); }
.lr-cat .live-categorie-n { font-size: inherit; font-weight: 800; color: inherit; }
.live-categorie-puce.lr-cat.actif .lr-cat-sous { color: rgba(255, 255, 255, .85); }
.live-categorie-puce.lr-cat.actif .lr-cat-visuel { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }

/* ---------- Vedette cinématique ---------- */
.lr-hero.lr-vedette { min-height: 0; background: #07060d; }
.lr-vedette .lr-hero-slide { display: block; min-height: 0; }
.lr-vedette .lr-hero-fond { background-color: hsl(var(--teinte, 270) 55% 10%); background-size: cover; background-position: center; filter: blur(42px) saturate(1.35) brightness(.5); transform: scale(1.25); }
.lr-vedette .lr-hero-slide:not([hidden]) .lr-hero-fond { animation: lr-derive 26s ease-in-out infinite alternate; }
@keyframes lr-derive { from { transform: scale(1.25) translate3d(-2%, 0, 0); } to { transform: scale(1.35) translate3d(2%, -2%, 0); } }
.lr-vedette .lr-hero-voile { background: radial-gradient(120% 100% at 0% 0%, rgba(139, 92, 246, .28), transparent 55%), linear-gradient(90deg, rgba(5, 4, 12, .3), rgba(5, 4, 12, .72)); }
.lr-vedette-grille { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: center; padding: clamp(16px, 2.6vw, 34px); }
.lr-vedette-ecran {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: #05040b;
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .1); transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}
.lr-vedette-ecran:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 36px 80px -25px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .2), 0 0 70px -12px hsl(var(--teinte, 270) 90% 60% / .55); }
.lr-vedette-miniature { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; } /* miniature entière, jamais recadrée */
.lr-vedette-art { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(90% 90% at 50% 40%, hsl(var(--teinte, 270) 70% 28% / .95), #07060d 72%); }
.lr-vedette-art-fond { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(22px) saturate(1.3) brightness(.5); }
.lr-vedette-avatar {
  position: relative; width: clamp(92px, 11vw, 150px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  background: var(--lr-degrade); color: #fff; font-size: clamp(38px, 5vw, 64px); font-weight: 900;
}
.lr-vedette-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lr-vedette-avatar::before {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; padding: 3px;
  background: conic-gradient(#8b5cf6, #d946ef, #ff3b5c, transparent 72%, #8b5cf6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: lr-tourne 3s linear infinite;
}
.lr-vedette-avatar::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; animation: lr-onde-avatar 2.4s ease-out infinite; }
@keyframes lr-onde-avatar { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 92, .45); } 100% { box-shadow: 0 0 0 30px rgba(255, 59, 92, 0); } }
.lr-egaliseur { position: absolute; left: 50%; bottom: 11%; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 4px; height: 22px; }
.lr-egaliseur i { width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(#fff, rgba(255, 255, 255, .35)); transform-origin: bottom; animation: lr-egal 1s ease-in-out infinite; }
.lr-egaliseur i:nth-child(2) { animation-delay: -.4s; } .lr-egaliseur i:nth-child(3) { animation-delay: -.7s; }
.lr-egaliseur i:nth-child(4) { animation-delay: -.2s; } .lr-egaliseur i:nth-child(5) { animation-delay: -.55s; }
@keyframes lr-egal { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.lr-vedette-ecran > .badge-live { position: absolute; top: 14px; left: 14px; z-index: 2; }
.lr-vedette-vues {
  position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px;
  background: rgba(8, 6, 16, .6); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lr-vedette-vues .lr-icone { width: 14px; height: 14px; }
.lr-vedette-lecture {
  position: absolute; left: 50%; top: 50%; z-index: 3; width: 74px; height: 74px; margin: -37px 0 0 -37px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .95); color: #0b0716; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); opacity: 0; transform: scale(.8); transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.lr-vedette-lecture .lr-icone { width: 28px; height: 28px; margin-left: 4px; }
.lr-vedette-ecran:hover .lr-vedette-lecture { opacity: 1; transform: scale(1); }
.lr-vedette .lr-hero-contenu { padding: 0; max-width: none; gap: 14px; }
.lr-hero-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.lr-hero-puces:empty { display: none; }
.lr-hero-puces > .badge-live { display: none; } /* déjà affiché sur l'écran */
.lr-hero a.lr-vedette-streamer { display: inline-flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; line-height: 1.25; }
.lr-hero a.lr-vedette-streamer:hover strong { text-decoration: underline; }
.lr-vedette-streamer strong { font-size: 16px; }
.lr-vedette-mini-avatar { width: 42px; height: 42px; flex: none; overflow: hidden; display: grid; place-items: center; border-radius: 50%; background: var(--lr-degrade); font-weight: 800; box-shadow: 0 0 0 2px rgba(5, 4, 12, .8), 0 0 0 4px var(--lr-direct); }
.lr-vedette-mini-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lr-vedette-abonnes { display: block; font-size: 12px; color: rgba(240, 237, 249, .65); }
.lr-vedette .lr-hero-titre { font-size: clamp(24px, 2.7vw, 40px); }
.lr-vedette .lr-hero-sous { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; }
.lr-vedette .lr-hero-vues { vertical-align: baseline; gap: 6px; }
.lr-vedette-cat { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-weight: 700; }
.lr-vedette-cat img { width: 24px; height: 24px; margin-left: -8px; border-radius: 50%; object-fit: cover; }
.lr-vedette-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.lr-vedette-tags .lr-tag { padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: rgba(240, 237, 249, .78); }
.lr-hero-actions { margin-top: 4px; }
/* Miniatures de navigation (remplacent les points) */
.lr-vedette .lr-hero-points { position: relative; right: auto; bottom: auto; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; padding: 0 clamp(16px, 2.6vw, 34px) clamp(16px, 2.6vw, 30px); }
.lr-vedette .lr-hero-point, .lr-vedette .lr-hero-point.actif {
  width: auto; height: auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; text-align: left;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #fff; transition: background .25s ease, border-color .25s ease;
}
.lr-vedette .lr-hero-point:hover { background: rgba(255, 255, 255, .11); }
.lr-vedette .lr-hero-point.actif { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .38); box-shadow: inset 0 -2px 0 var(--lr-direct); }
.lr-hero-point-avatar { width: 36px; height: 36px; flex: none; overflow: hidden; display: grid; place-items: center; border-radius: 50%; background: var(--lr-degrade); font-weight: 800; }
.lr-hero-point-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lr-hero-point-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lr-hero-point-texte strong { font-size: 13px; }
.lr-hero-point-texte span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: rgba(240, 237, 249, .7); }

/* ---------- État vide « radar » ---------- */
.lr-vide.lr-vide-direct { padding: 44px 20px 34px; }
.lr-radar { position: relative; width: 120px; height: 120px; margin: 0 auto 18px; display: grid; place-items: center; }
.lr-radar > span:not(.lr-radar-centre) { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(var(--violet-rgb), .55); opacity: 0; animation: lr-radar 3s ease-out infinite; }
.lr-radar > span:nth-child(2) { animation-delay: 1s; } .lr-radar > span:nth-child(3) { animation-delay: 2s; }
@keyframes lr-radar { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.1); opacity: 0; } }
.lr-radar-centre { position: relative; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--lr-degrade); color: #fff; box-shadow: var(--lr-halo); }
.lr-radar-centre .lr-icone { width: 26px; height: 26px; }
.lr-vide-direct p strong { font-size: 17px; }

/* ---------- Bientôt : frise par jour ---------- */
.lr-groupe { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.lr-groupe::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--lr-degrade); box-shadow: 0 0 0 4px rgba(var(--violet-rgb), .15); }
.lr-groupe::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--bordure), transparent); }
.bouton.lr-prevenir { background: var(--lr-verre); color: var(--texte); border: 1px solid var(--bordure); }
.bouton.lr-prevenir:hover { background: rgba(var(--violet-rgb), .16); border-color: rgba(var(--violet-rgb), .5); }
.bouton.lr-prevenir:disabled { opacity: .75; }

/* ---------- Chaînes suivies : cartes ---------- */
.live-liste-suivies { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; margin: 12px 0 30px; }
.live-liste-suivies li { gap: 6px 10px; padding: 12px 14px; border-radius: 16px; background: var(--lr-verre); border: 1px solid var(--lr-lisere); transition: border-color .2s ease, transform .2s ease; }
.live-liste-suivies li:hover { border-color: rgba(var(--violet-rgb), .45); transform: translateY(-2px); }
.live-liste-suivies li a { gap: 10px; color: var(--texte); font-weight: 700; text-decoration: none; }
.live-liste-suivies .avatar-petit { width: 36px; height: 36px; font-size: 14px; border-radius: 50%; }
.live-liste-suivies .aide { flex-basis: 100%; font-size: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .lr-vedette-grille { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lr-vedette .lr-hero-points { display: flex; overflow-x: auto; scrollbar-width: none; }
  .lr-vedette .lr-hero-points::-webkit-scrollbar { display: none; }
  .lr-vedette .lr-hero-point { flex: 0 0 min(74%, 240px); }
}
@media (max-width: 640px) {
  .lr-entete { padding-top: 6px; }
  .lr-pouls { gap: 6px; margin-top: 12px; }
  .lr-pouls-item { height: 30px; padding: 0 11px; font-size: 12px; }
  .lr-pouls-item strong { font-size: 14px; }
  .lr-vedette-grille { padding: 10px 10px 16px; }
  .lr-vedette .lr-hero-contenu { padding: 0 4px; gap: 11px; }
  .lr-vedette .lr-hero-titre { font-size: 23px; }
  .lr-vedette-ecran { border-radius: 14px; }
  .lr-vedette-lecture { opacity: .92; transform: scale(.8); }
  .lr-vedette .lr-hero-points { padding: 0 10px 14px; }
  .live-categorie-puce.lr-cat { min-width: 0; padding: 6px 14px 6px 6px; gap: 10px; border-radius: 16px; }
  .lr-cat-visuel { width: 44px; height: 44px; border-radius: 11px; }
  .lr-cat-nom { font-size: 14px; max-width: 140px; }
  /* Filtres : la recherche en pleine largeur, puis les listes compactes (les libellés restent lus par les lecteurs d'écran). */
  .lr-filtres label:not(.lr-champ-recherche):not(.lr-case) { flex: 1 1 calc(50% - 4px); font-size: 0; gap: 0; }
  .lr-filtres label:not(.lr-champ-recherche):not(.lr-case) select { font-size: 14px; }
  .lr-filtres { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .lr-entete::before, .lr-vedette .lr-hero-slide .lr-hero-fond, .lr-vedette-avatar::before, .lr-vedette-avatar::after, .lr-egaliseur i, .lr-radar > span { animation: none !important; }
  .lr-radar > span:first-child { opacity: .5; transform: scale(.8); }
  .lr-vedette-ecran:hover, .live-categorie-puce.lr-cat:hover, .live-liste-suivies li:hover { transform: none; }
}
/* Correctifs : une seule vedette visible à la fois (l'attribut hidden l'emporte), listes de filtres lisibles, initiales des chaînes suivies. */
.lr-vedette .lr-hero-slide[hidden] { display: none; }
.lr-filtres select, .lr-filtres input[type="search"] { color: var(--texte); }
.lr-filtres select option { color: var(--texte); background: var(--surface); }
.live-liste-suivies .avatar-secours { display: inline-grid; place-items: center; background: var(--lr-degrade); color: #fff; font-weight: 800; }
/* Le fond flouté de la vedette couvre tout le bloc, miniatures de navigation comprises (plus de coupure nette). */
.lr-vedette .lr-hero-slide { position: static; }
/* Mobile vertical : chaque bloc prend toute la largeur (le « align-items: start » de la grille desktop les dimensionnait
   à leur contenu : carte de la chaîne plus large que l'écran, chat trop étroit) ; les boutons passent à la ligne au lieu d'être rognés. */
@media (max-width: 900px) {
  .live-page { align-items: stretch; }
  .live-page > *, .live-page .live-infos-streamer, .live-page .chat-stream { min-width: 0; max-width: 100%; }
}
@media (max-width: 640px) {
  .live-page .lecteur-stream { max-width: 100vw; }
  .live-page .live-infos-actions { flex-wrap: wrap; overflow-x: visible; }
  .live-page .live-infos-actions > .bouton.lr-suivre { flex: 1 1 auto; }
  /* Menu « Affichage » : panneau compact posé SUR le lecteur (au-dessus de la barre), options sur deux colonnes, jamais hors du cadre. */
  .live-page .lecteur-affichage { position: static; }
  .live-page .lecteur-affichage-panneau {
    position: absolute; left: 8px; right: 8px; top: 8px; bottom: 56px; min-width: 0; max-height: none; overflow: auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; align-content: start; padding: 10px 12px; font-size: 12px;
  }
  .live-page .lecteur-affichage-panneau[hidden] { display: none; }
  .live-page .lecteur-affichage-panneau fieldset { margin: 0; gap: 2px; min-width: 0; }
  .live-page .lecteur-affichage-panneau legend { margin-bottom: 2px; font-size: 12px; }
  .live-page .lecteur-affichage-panneau label { min-height: 28px; gap: 6px; line-height: 1.2; }
  .live-page .lecteur-affichage-panneau .aide { grid-column: 1 / -1; margin: 2px 0 0; font-size: 11px; }
}
@media (max-width: 640px) {
  /* Ancré au-dessus de la barre (sa référence de position) ; hauteur bornée par celle du lecteur (unités de conteneur). */
  .live-page .lecteur-affichage-panneau { top: auto; bottom: calc(100% + 4px); max-height: calc(100cqh - 84px); }
}
@media (max-width: 640px) {
  .live-page .lecteur-affichage-panneau fieldset { order: 1; }
  .live-page .lecteur-affichage-panneau .aide { order: 2; }
}

/* Objectif de la communauté sur la bannière d'accueil (views/index.ejs) : barre de progression vers 10 000 membres, sur le vrai nombre. */
.hero-objectif { width: min(560px, 100%); margin: 22px auto 0; padding: 14px 18px 12px; border-radius: 18px; text-align: left;
  background: rgba(8, 6, 18, .45); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hero-objectif-texte { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: 13px; color: rgba(255, 255, 255, .75); }
.hero-objectif-titre strong { color: #fff; font-weight: 900; }
.hero-objectif-compte { font-variant-numeric: tabular-nums; }
.hero-objectif-compte strong { color: #fff; font-size: 15px; font-weight: 900; }
.hero-objectif-barre { position: relative; height: 10px; margin-top: 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.hero-objectif-barre i { position: relative; display: block; height: 100%; border-radius: inherit; overflow: hidden;
  background: linear-gradient(90deg, #8b5cf6, #d946ef 60%, #ff3b5c); box-shadow: 0 0 14px rgba(217, 70, 239, .7);
  animation: hero-objectif-remplir 1.4s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left center; }
.hero-objectif-barre i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%); transform: translateX(-100%); animation: hero-objectif-reflet 2.8s ease-in-out 1.4s infinite; }
@keyframes hero-objectif-remplir { from { transform: scaleX(0); } }
@keyframes hero-objectif-reflet { 60%, 100% { transform: translateX(100%); } }
.hero-objectif-invite { margin: 8px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.hero-objectif-invite strong { color: #fff; }
.hero-objectif-invite a { color: #e9d5ff; font-weight: 800; }
.hero-objectif-atteint { border-color: rgba(74, 222, 128, .5); }
.hero-objectif-atteint .hero-objectif-barre i { background: linear-gradient(90deg, #22c55e, #4ade80); box-shadow: 0 0 14px rgba(74, 222, 128, .7); }
@media (prefers-reduced-motion: reduce) { .hero-objectif-barre i, .hero-objectif-barre i::after { animation: none; } }
@media (max-width: 600px) { .hero-objectif { margin-top: 18px; padding: 12px 14px 10px; } }

/* ============================================================
   public/css/13-arena-accueil.css
   Accueil de Repère Arena.
   Assemblée avec les autres fichiers de public/css/ dans l'ordre de leur numéro, et servie sous /style.css
   (voir src/web/feuille-de-style.js) : une règle d'un fichier plus loin l'emporte, à spécificité égale.
   ============================================================ */

/* ==========================================================================================================
   ACCUEIL ARENA — REFONTE PREMIUM (views/arena-accueil.ejs). Identite esport : noir profond, neons bleu et rouge
   (ceux du logo Arena), verre depoli. Uniquement des donnees reelles (voir la « vitrine » dans arena-api.js).
   ========================================================================================================== */
.hero-arena.arena-hero-premium {
  min-height: clamp(300px, 34vw, 420px); margin-bottom: 18px; border-radius: 24px; align-items: center; justify-content: flex-start; text-align: left;
  background-position: center 38%; box-shadow: 0 34px 90px -34px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06);
}
.arena-hero-premium::before { background: linear-gradient(90deg, rgba(4, 5, 12, .94) 0%, rgba(4, 5, 12, .78) 45%, rgba(4, 5, 12, .25) 100%), linear-gradient(0deg, rgba(4, 5, 12, .8), transparent 55%); }
.arena-hero-halo { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 70% at 12% 50%, rgba(59, 130, 246, .35), transparent 70%), radial-gradient(35% 60% at 95% 20%, rgba(239, 68, 68, .28), transparent 70%);
  animation: arena-halo 9s ease-in-out infinite alternate; }
@keyframes arena-halo { to { opacity: .6; transform: scale(1.05); } }
.arena-hero-premium .hero-arena-texte { display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); max-width: 1000px; padding: clamp(18px, 3vw, 40px); }
.arena-hero-premium .hero-arena-logo { width: clamp(110px, 14vw, 190px); height: auto; margin: 0; flex: none; filter: drop-shadow(0 18px 40px rgba(59, 130, 246, .45)) drop-shadow(0 0 30px rgba(239, 68, 68, .25)); animation: arena-flotte 6s ease-in-out infinite; }
@keyframes arena-flotte { 50% { transform: translateY(-6px); } }
.arena-hero-contenu { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.arena-surtitre { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.arena-point { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 10px #ef4444; }
.arena-point::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #ef4444; opacity: 0; animation: lr-onde 2s ease-out infinite; }
.arena-hero-premium .sous-titre { max-width: 52ch; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.5; color: rgba(240, 237, 249, .88); }
.arena-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.arena-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px; font-weight: 800; font-size: 15px; text-decoration: none; transition: transform .2s ease, filter .2s ease, background .2s ease; }
.arena-bouton:hover { text-decoration: none; transform: translateY(-2px); }
.arena-bouton-principal { color: #fff; background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #ef4444 100%); box-shadow: 0 14px 34px -12px rgba(124, 58, 237, .9); }
.arena-bouton-principal:hover { color: #fff; filter: brightness(1.12); }
.arena-bouton-verre { color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.arena-bouton-verre:hover { color: #fff; background: rgba(255, 255, 255, .18); }
.arena-hero-direct { display: flex; flex-wrap: wrap; gap: 8px; }
.arena-pastille-direct { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; color: rgba(255, 255, 255, .8); background: rgba(8, 6, 16, .55); border: 1px solid rgba(255, 255, 255, .14); }
.arena-pastille-direct strong { color: #fff; font-variant-numeric: tabular-nums; }

/* Chiffres */
.arena-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.arena-stats li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 10px; border-radius: 18px; text-align: center;
  background: linear-gradient(160deg, rgba(37, 99, 235, .14), rgba(var(--surface-rgb), .85) 55%, rgba(239, 68, 68, .1)); border: 1px solid var(--bordure); }
.arena-stats strong { font-size: clamp(24px, 2.6vw, 32px); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  background: linear-gradient(135deg, #60a5fa, #c084fc 55%, #f87171); -webkit-background-clip: text; background-clip: text; color: transparent; }
.arena-stats span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }

/* Acces rapides */
.arena-acces { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 26px; }
.arena-acces > .arena-acces-carte { flex: 1 1 220px; }
.arena-acces > .arena-acces-vedette { flex: 1.8 1 320px; }
.arena-acces-carte { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; overflow: hidden; color: var(--texte); text-decoration: none;
  background: rgba(var(--surface-rgb), .9); border: 1px solid var(--bordure); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.arena-acces-carte:hover { text-decoration: none; color: var(--texte); transform: translateY(-3px); border-color: rgba(96, 165, 250, .6); box-shadow: 0 18px 40px -20px rgba(59, 130, 246, .7); }
.arena-acces-icone { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; font-size: 24px; background: rgba(var(--violet-rgb), .14); }
.arena-acces-textes { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arena-acces-textes strong { font-size: 16px; font-weight: 800; }
.arena-acces-textes small { font-size: 12.5px; color: var(--texte-doux); line-height: 1.35; }
.arena-acces-fleche { margin-left: auto; font-size: 18px; color: var(--texte-doux); transition: transform .25s ease, color .25s ease; }
.arena-acces-carte:hover .arena-acces-fleche { transform: translateX(4px); color: var(--texte); }
.arena-acces-vedette { color: #fff; border: 0; background: linear-gradient(135deg, #1e3a8a 0%, #5b21b6 55%, #991b1b 100%); box-shadow: 0 16px 36px -18px rgba(124, 58, 237, .9); }
.arena-acces-vedette:hover { color: #fff; }
.arena-acces-vedette .arena-acces-icone { background: rgba(255, 255, 255, .16); }
.arena-acces-vedette .arena-acces-textes small, .arena-acces-vedette .arena-acces-fleche { color: rgba(255, 255, 255, .8); }
.arena-acces-vedette::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%); transform: translateX(-100%); animation: arena-reflet 4s ease-in-out infinite; }
@keyframes arena-reflet { 60%, 100% { transform: translateX(100%); } }

/* Titres de section */
.titre-section.arena-titre-section { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 20px; font-weight: 900; }
.titre-section.arena-titre-section::before { content: ""; width: 4px; height: 20px; border-radius: 4px; background: linear-gradient(180deg, #3b82f6, #ef4444); }

/* Vignettes des jeux */
.arena-vignette-jeu { border-radius: 20px; background: radial-gradient(90% 70% at 50% 0%, rgba(59, 130, 246, .25), transparent 70%), linear-gradient(160deg, #111427, #1d1636 60%, #2a0f1a); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.arena-vignette-jeu:has(.arena-vignette-lien):hover { transform: translateY(-4px); border-color: rgba(96, 165, 250, .7); box-shadow: 0 20px 44px -20px rgba(59, 130, 246, .8); }
.arena-vignette-logo img { transition: transform .35s ease; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .5)); }
.arena-vignette-jeu:has(.arena-vignette-lien):hover .arena-vignette-logo img { transform: scale(1.06); }
.arena-vignette-jeu .etiquette { border-radius: 999px; padding: 2px 10px; }

/* Colonnes tournois / top Ranked */
.arena-colonnes { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; margin-top: 8px; }
.arena-bloc { min-width: 0; }
.arena-bloc-entete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.arena-bloc-entete .arena-titre-section { margin: 0; }
.arena-lien-tout { flex: none; font-size: 13px; font-weight: 800; text-decoration: none; }
.arena-tournois { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.arena-tournoi { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 18px; color: var(--texte); text-decoration: none;
  background: rgba(var(--surface-rgb), .9); border: 1px solid var(--bordure); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.arena-tournoi:hover { text-decoration: none; color: var(--texte); transform: translateY(-2px); border-color: rgba(var(--violet-rgb), .55); box-shadow: 0 16px 36px -20px rgba(0, 0, 0, .6); }
.arena-tournoi-haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.arena-tournoi-statut { padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; background: rgba(var(--violet-rgb), .16); }
.arena-statut-inscriptions_ouvertes { background: rgba(34, 197, 94, .16); color: #16a34a; }
.arena-statut-checkin { background: rgba(245, 158, 11, .18); color: #d97706; }
.arena-tournoi-jeu { font-size: 12px; font-weight: 700; color: var(--texte-doux); }
.arena-tournoi-nom { font-size: 17px; font-weight: 800; }
.arena-tournoi-infos { font-size: 13px; color: var(--texte-doux); }
.arena-tournoi-places { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--texte-doux); }
.arena-tournoi-places strong { color: var(--texte); }
.arena-jauge { flex: 1; height: 7px; border-radius: 999px; background: rgba(var(--violet-rgb), .14); overflow: hidden; }
.arena-jauge i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3b82f6, #a855f7, #ef4444); }

.arena-top { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.arena-top-ligne { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: rgba(var(--surface-rgb), .9); border: 1px solid var(--bordure); }
.arena-rang-1 { background: linear-gradient(90deg, rgba(250, 204, 21, .18), rgba(var(--surface-rgb), .9)); border-color: rgba(250, 204, 21, .5); }
.arena-rang-2 { background: linear-gradient(90deg, rgba(203, 213, 225, .16), rgba(var(--surface-rgb), .9)); }
.arena-rang-3 { background: linear-gradient(90deg, rgba(217, 119, 6, .16), rgba(var(--surface-rgb), .9)); }
.arena-top-rang { width: 30px; flex: none; text-align: center; font-size: 20px; font-weight: 900; color: var(--texte-doux); }
.arena-top-joueur { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--texte); text-decoration: none; }
.arena-top-joueur:hover { text-decoration: none; color: var(--texte); }
.arena-top-joueur .avatar, .arena-top-initiale { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; }
.arena-top-initiale { display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #3b82f6, #a855f7); }
.arena-top-joueur span { display: flex; flex-direction: column; min-width: 0; }
.arena-top-joueur strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-palier { align-self: flex-start; margin-top: 2px; padding: 0 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; background: rgba(var(--violet-rgb), .16); }
.arena-palier-elite { background: linear-gradient(90deg, #ef4444, #a855f7); color: #fff; }
.arena-palier-diamant { background: rgba(56, 189, 248, .2); color: #0284c7; }
.arena-palier-platine { background: rgba(45, 212, 191, .2); color: #0d9488; }
.arena-palier-or { background: rgba(250, 204, 21, .22); color: #a16207; }
.arena-palier-argent { background: rgba(148, 163, 184, .25); }
.arena-palier-bronze { background: rgba(217, 119, 6, .18); color: #b45309; }
.arena-top-points { display: flex; flex-direction: column; align-items: flex-end; flex: none; font-variant-numeric: tabular-nums; }
.arena-top-points strong { font-size: 17px; font-weight: 900; }
.arena-top-points small { font-size: 11.5px; color: var(--texte-doux); }

.arena-vide { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 18px; border-radius: 18px; text-align: center;
  background: radial-gradient(80% 100% at 50% 0%, rgba(59, 130, 246, .12), transparent 70%), rgba(var(--surface-rgb), .7); border: 1px dashed var(--bordure); }
.arena-vide > span { font-size: 32px; }
.arena-vide p { margin: 0; color: var(--texte-doux); }
.arena-vide p strong { color: var(--texte); }
.arena-vide .arena-bouton { margin-top: 8px; height: 40px; font-size: 14px; }
.arena-vide .arena-bouton-verre { color: var(--texte); background: rgba(var(--violet-rgb), .1); border-color: var(--bordure); }

@media (max-width: 860px) {
  .arena-colonnes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .arena-hero-premium .hero-arena-texte { flex-direction: column; align-items: flex-start; }
  .arena-hero-premium .hero-arena-logo { width: 96px; }
  .arena-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arena-bouton { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .arena-hero-halo, .arena-hero-premium .hero-arena-logo, .arena-acces-vedette::after, .arena-point::after { animation: none; }
}

/* ============================================================
   public/css/14-bandeau-navigation.css
   Bandeau premium (recherche, cloche, thème), menu du compte, menus de navigation, navigation mobile,
   pied de page.
   Assemblée avec les autres fichiers de public/css/ dans l'ordre de leur numéro, et servie sous /style.css
   (voir src/web/feuille-de-style.js) : une règle d'un fichier plus loin l'emporte, à spécificité égale.
   ============================================================ */

/* ==========================================================================================================
   BANDEAU — REFONTE PREMIUM de la recherche, de la cloche de notifications et du bouton de theme (views/header.ejs).
   ========================================================================================================== */

/* ---- Recherche : pilule en verre qui s'illumine au focus ---- */
.recherche-bandeau { flex: 0 1 260px; }
.recherche-bandeau-icone { left: 14px; z-index: 1; display: flex; color: var(--texte-doux); transition: color .2s ease, transform .2s ease; }
.recherche-bandeau-icone svg { width: 17px; height: 17px; }
.recherche-bandeau input {
  height: 40px; padding: 0 76px 0 40px; border-radius: 999px; font-size: 14px;
  background: rgba(var(--surface-rgb), .7); border: 1px solid var(--bordure); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .2s ease, box-shadow .25s ease, background .2s ease, width .25s ease;
}
.recherche-bandeau input:hover { border-color: rgba(var(--violet-rgb), .45); }
.recherche-bandeau input:focus {
  outline: none; background: var(--surface); border-color: rgba(var(--violet-rgb), .85);
  box-shadow: 0 0 0 4px rgba(var(--violet-rgb), .16), 0 12px 30px -14px rgba(var(--violet-rgb), .75);
}
.recherche-bandeau:focus-within .recherche-bandeau-icone { color: var(--violet); transform: translateY(-50%) scale(1.08); }
.recherche-bandeau input::-webkit-search-cancel-button { cursor: pointer; }
.recherche-bandeau-raccourci { right: 8px; z-index: 1; display: inline-flex; gap: 3px; padding: 0; border: 0; background: none; }
.recherche-bandeau-raccourci kbd {
  min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 6px;
  font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1; color: var(--texte-doux); background: rgba(var(--violet-rgb), .1);
  border: 1px solid var(--bordure); box-shadow: 0 2px 0 var(--bordure);
}
.recherche-bandeau-raccourci:hover kbd { color: var(--texte); border-color: rgba(var(--violet-rgb), .6); }
.recherche-bandeau:focus-within .recherche-bandeau-raccourci { opacity: .5; }

/* ---- Cloche : bouton rond, compteur chiffre, cloche qui sonne quand il y a du nouveau ---- */
.bandeau-cloche-menu summary {
  width: 40px; height: 40px; color: var(--texte);
  background: rgba(var(--surface-rgb), .7); border: 1px solid var(--bordure);
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.bandeau-cloche-menu summary:hover { background: rgba(var(--violet-rgb), .14); border-color: rgba(var(--violet-rgb), .5); }
.bandeau-cloche-menu summary:active { transform: scale(.94); }
.bandeau-cloche-menu[open] summary { background: rgba(var(--violet-rgb), .2); border-color: rgba(var(--violet-rgb), .7); color: var(--violet); }
.bandeau-cloche-icone { width: 19px; height: 19px; transform-origin: 50% 3px; }
.bandeau-cloche-menu:has(.bandeau-cloche-point:not([hidden])) .bandeau-cloche-icone { animation: bandeau-cloche-sonne 1.1s ease .5s 2; }
@keyframes bandeau-cloche-sonne { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(2deg); } }
.bandeau-cloche-point {
  top: -4px; right: -4px; width: auto; height: 19px; min-width: 19px; padding: 0 5px; display: grid; place-items: center;
  border-radius: 999px; border: 2px solid var(--fond); background: linear-gradient(135deg, #ff3b5c, #e11d48);
  color: #fff; font-size: 10.5px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px -2px rgba(255, 59, 92, .75); animation: bandeau-badge-entree .35s cubic-bezier(.2, .8, .2, 1.4) both;
}
.bandeau-cloche-point[hidden] { display: none; }
@keyframes bandeau-badge-entree { from { transform: scale(0); } }

/* ---- Panneaux deroulants (cloche et compte) ---- */
.bandeau-panneau {
  padding: 8px; border-radius: 16px; background: rgba(var(--surface-rgb), .97); border-color: var(--bordure);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 26px 60px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(var(--violet-rgb), .08);
  transform-origin: top right; animation: bandeau-panneau-entree .18s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes bandeau-panneau-entree { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.bandeau-panneau a, .bandeau-panneau .lien-bouton { border-radius: 10px; padding: 9px 10px; transition: background .15s ease; }
.bandeau-panneau a:hover, .bandeau-panneau .lien-bouton:hover { background: rgba(var(--violet-rgb), .12); }
.bandeau-panneau-notifs { min-width: 310px; }
.bandeau-panneau-titre { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--bordure); }
.bandeau-panneau-titre strong { font-size: 15px; font-weight: 900; }
.bandeau-panneau .bandeau-panneau-reglages { width: auto; padding: 3px 10px; font-size: 12px; font-weight: 700; color: var(--texte-doux); border: 1px solid var(--bordure); border-radius: 999px; }
.bandeau-panneau .bandeau-panneau-reglages:hover { color: var(--texte); }
.bandeau-panneau .bandeau-notif { gap: 12px; }
.bandeau-notif-icone { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 16px; background: rgba(var(--violet-rgb), .14); }
.bandeau-notif-textes { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bandeau-notif-textes strong { font-size: 14px; font-weight: 700; }
.bandeau-notif-textes small { font-size: 12px; color: var(--texte-doux); }
.bandeau-notif-vide { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px 14px; text-align: center; }
.bandeau-notif-vide .aide { margin: 0; }
.bandeau-notif-vide-icone { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 50%; color: var(--violet); background: rgba(var(--violet-rgb), .12); }
.bandeau-notif-vide-icone svg { width: 22px; height: 22px; }

/* ---- Theme : interrupteur soleil / lune ---- */
.bouton-theme {
  position: relative; flex: none; width: 64px; height: 34px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: space-between;
  border-radius: 999px; border: 1px solid var(--bordure); background: rgba(var(--surface-rgb), .7); cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .2s ease, box-shadow .2s ease, background .3s ease;
}
.bouton-theme:hover { border-color: rgba(var(--violet-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), .12); }
.bouton-theme:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.bouton-theme svg { position: relative; z-index: 1; width: 15px; height: 15px; transition: color .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.bouton-theme-soleil { color: #f59e0b; }
.bouton-theme-lune { color: #fff; }
.bouton-theme-curseur {
  position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #4c1d95, #7c3aed); box-shadow: 0 4px 12px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .15);
  transform: translateX(30px); transition: transform .45s cubic-bezier(.2, .8, .2, 1), background .45s ease;
}
/* Theme clair (choisi, ou celui du systeme quand rien n'est choisi) : curseur a gauche, sur le soleil. */
:root[data-theme="clair"] .bouton-theme-curseur { transform: none; background: linear-gradient(135deg, #fde68a, #f59e0b); }
:root[data-theme="clair"] .bouton-theme-soleil { color: #fff; transform: rotate(90deg); }
:root[data-theme="clair"] .bouton-theme-lune { color: #7c3aed; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .bouton-theme-curseur { transform: none; background: linear-gradient(135deg, #fde68a, #f59e0b); }
  :root:not([data-theme]) .bouton-theme-soleil { color: #fff; transform: rotate(90deg); }
  :root:not([data-theme]) .bouton-theme-lune { color: #7c3aed; }
}

/* Changement de theme : cercle qui s'etend depuis le bouton (voir le script de header.ejs). */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---- Reglages d'ecran conserves (les regles ci-dessus viennent apres celles d'origine) ---- */
@media (min-width: 861px) and (max-width: 1300px) {
  .recherche-bandeau { flex: 0 0 auto; }
  .recherche-bandeau input { width: 40px; padding: 0 0 0 38px; cursor: pointer; }
  .recherche-bandeau-icone { left: 11px; }
  .recherche-bandeau input:focus { width: 220px; padding-right: 14px; cursor: text; }
  .recherche-bandeau-raccourci { display: none; }
}
@media (max-width: 600px) {
  .recherche-bandeau { flex: 1 1 100%; }
  .recherche-bandeau input { padding-right: 16px; font-size: 16px; }
  .recherche-bandeau-raccourci { display: none; }
  .bandeau-panneau { transform-origin: top left; }
  .bandeau-panneau-notifs { min-width: min(310px, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion: reduce) {
  .bandeau-cloche-icone, .bandeau-cloche-point, .bandeau-panneau { animation: none !important; }
  .bouton-theme-curseur, .bouton-theme svg { transition: none; }
}

/* ==========================================================================================================
   MENU DU COMPTE — REFONTE PREMIUM (views/header.ejs) : declencheur avec anneau degrade, carte de profil,
   tuiles rapides, sections titrees, icones en pastilles, deconnexion en rouge.
   ========================================================================================================== */
.bandeau-compte-menu summary {
  gap: 8px; padding: 3px 10px 3px 3px; border: 1px solid var(--bordure); background: rgba(var(--surface-rgb), .7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s ease, border-color .2s ease;
}
.bandeau-compte-menu summary:hover { background: rgba(var(--violet-rgb), .12); border-color: rgba(var(--violet-rgb), .5); }
.bandeau-compte-menu[open] summary { background: rgba(var(--violet-rgb), .18); border-color: rgba(var(--violet-rgb), .7); }
.bandeau-compte-menu summary:focus:not(:focus-visible) { outline: none; }
.bandeau-compte-menu summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.bandeau-compte-avatar { display: inline-flex; padding: 2px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6, #d946ef 55%, #ff3b5c); }
.bandeau-compte-avatar .avatar, .bandeau-compte-avatar .avatar-secours { border: 2px solid var(--fond); }
.bandeau-compte-chevron { display: inline-flex; color: var(--texte-doux); transition: transform .25s ease, color .25s ease; }
.bandeau-compte-chevron svg { width: 16px; height: 16px; }
.bandeau-compte-menu[open] .bandeau-compte-chevron { transform: rotate(180deg); color: var(--violet); }

.bandeau-panneau.bandeau-panneau-compte { width: 320px; max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain; gap: 2px; scrollbar-width: thin; }
/* Quand le menu est plus haut que l'écran (téléphone), il défile : ses éléments ne doivent jamais être écrasés pour tenir
   (la carte de profil, en overflow: hidden, se retrouvait coupée à moitié). La hauteur disponible est ajustée par le script
   des menus du bandeau (views/header.ejs) pour s'arrêter au-dessus de la barre de navigation du bas. */
.bandeau-panneau > * { flex-shrink: 0; }

/* Carte de profil */
.bandeau-panneau-compte .compte-carte {
  position: relative; overflow: hidden; gap: 12px; padding: 16px 14px; margin-bottom: 8px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 45%, #c026d3 100%); box-shadow: 0 12px 28px -14px rgba(124, 58, 237, .9);
}
.bandeau-panneau-compte .compte-carte::after {
  content: ""; position: absolute; right: -30px; top: -40px; width: 140px; height: 140px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 70%);
}
.bandeau-panneau-compte .compte-carte:hover { background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 45%, #c026d3 100%); filter: brightness(1.08); color: #fff; }
.compte-carte-avatar { position: relative; z-index: 1; display: inline-flex; flex: none; padding: 3px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.compte-carte-avatar .avatar, .compte-carte-avatar .avatar-secours { width: 50px; height: 50px; font-size: 20px; border: 2px solid rgba(255, 255, 255, .9); }
.compte-carte-textes { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.compte-carte-pseudo { display: flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compte-carte-sous { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.compte-carte .identifiant-membre { font-size: 12px; color: rgba(255, 255, 255, .8); }
.compte-role { padding: 1px 9px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.compte-role-admin { background: rgba(255, 255, 255, .95); color: #6d28d9; }

/* Tuiles rapides */
.compte-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; }
.bandeau-panneau-compte .compte-tuile {
  flex-direction: column; justify-content: center; gap: 7px; width: auto; padding: 12px 6px 10px; border-radius: 12px; text-align: center;
  font-size: 12px; font-weight: 700; background: rgba(var(--violet-rgb), .08); border: 1px solid var(--bordure);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.bandeau-panneau-compte .compte-tuile:hover { background: rgba(var(--violet-rgb), .16); border-color: rgba(var(--violet-rgb), .45); transform: translateY(-1px); }
.compte-tuile-icone {
  position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px;
  background: var(--surface); color: var(--violet); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--bordure);
}
.compte-tuile-icone svg { width: 18px; height: 18px; }
.bandeau-panneau .compte-tuile-icone .badge {
  position: absolute; top: -6px; right: -9px; margin: 0; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center;
  border-radius: 999px; border: 2px solid var(--surface); background: linear-gradient(135deg, #ff3b5c, #e11d48); color: #fff; font-size: 10px; font-weight: 900; line-height: 1;
}
.compte-tuile-icone .badge[hidden] { display: none; }

/* Sections et lignes */
.compte-section { margin: 8px 10px 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.bandeau-panneau-compte > a, .compte-applis > a, .compte-deconnexion .lien-bouton { gap: 10px; padding: 6px 10px; font-weight: 600; }
.compte-icone {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px;
  background: rgba(var(--violet-rgb), .1); color: var(--violet); transition: background .2s ease, color .2s ease;
}
.compte-icone svg { width: 16px; height: 16px; }
.bandeau-panneau-compte a:hover .compte-icone { background: var(--violet); color: #fff; }
.compte-applis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.compte-applis > a { font-size: 13px; }
.bandeau-panneau-compte .compte-admin { margin-top: 6px; border: 1px solid rgba(34, 211, 238, .3); background: linear-gradient(90deg, rgba(34, 211, 238, .12), transparent); }
.compte-admin .compte-icone { background: rgba(34, 211, 238, .18); color: #06b6d4; }
.bandeau-panneau-compte .compte-admin:hover .compte-icone { background: #06b6d4; color: #fff; }
.compte-deconnexion { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--bordure); }
.compte-deconnexion .lien-bouton { color: var(--alerte); font-size: 14px; text-decoration: none; }
.compte-deconnexion .lien-bouton:hover { background: rgba(239, 68, 68, .1); color: var(--alerte); }
.compte-deconnexion .compte-icone { background: rgba(239, 68, 68, .12); color: #ef4444; }
.compte-deconnexion .lien-bouton:hover .compte-icone { background: #ef4444; color: #fff; }

@media (max-width: 600px) {
  .bandeau-panneau.bandeau-panneau-compte { width: min(320px, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion: reduce) {
  .bandeau-compte-chevron, .bandeau-panneau-compte .compte-tuile { transition: none; }
}
.compte-icone .lr-barre-cloche { display: none; } /* la cloche du menu n'est jamais barree (le trait sert a la page Live) */
@media (max-width: 600px) {
  /* Petit ecran : le menu du compte s ancre sur toute la ligne de l en-tete (et non sur son bouton, decale a droite) : jamais hors de l ecran. */
  .bandeau-droite { position: relative; }
  .bandeau-compte-menu { position: static; }
  .bandeau-panneau.bandeau-panneau-compte { left: 0; right: auto; width: min(340px, 100%); max-width: 100%; }
}
@media (max-width: 420px) {
  /* Téléphone : le bouton du compte ne montre que l'avatar (le pseudo est en tête du menu ouvert), pour que cloche,
     compte, radio, langue et thème tiennent sur une seule ligne. Masqué visuellement seulement : le pseudo reste le
     nom du bouton pour les lecteurs d'écran. */
  .bandeau-compte-menu summary .bandeau-compte-pseudo {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ==========================================================================================================
   MENUS DEROULANTS DE LA NAVIGATION — REFONTE PREMIUM (Forum, Social, Live, Competition, Aide ; views/header.ejs).
   Une teinte par rubrique (--nav-teinte), icones en pastilles, fleche qui glisse au survol, verre depoli.
   ========================================================================================================== */

/* Onglets : fleche en icone qui pivote a l'ouverture */
.nav-deroulant-fleche { display: inline-flex; font-size: 0; opacity: .75; transition: transform .25s ease, opacity .2s ease; }
.nav-deroulant-fleche svg { width: 14px; height: 14px; }
.nav-deroulant[open] .nav-deroulant-fleche { opacity: 1; }
.nav-deroulant[open] > summary:not(.actif) { background: rgba(var(--violet-rgb), .14); color: var(--texte); }

/* Panneau */
.nav-deroulant-panneau {
  min-width: 300px; padding: 10px; gap: 2px; border-radius: 18px;
  background: rgba(var(--surface-rgb), .97); border: 1px solid var(--bordure);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .7), 0 0 0 1px hsl(var(--nav-teinte) 80% 60% / .1);
  animation: nav-panneau-entree .2s cubic-bezier(.2, .8, .2, 1) both;
}
/* Une teinte par rubrique (violet par defaut). */
.nav-deroulant-panneau { --nav-teinte: 262; }
.nav-deroulant-panneau.nav-teinte-social { --nav-teinte: 318; }
.nav-deroulant-panneau.nav-teinte-live { --nav-teinte: 352; }
.nav-deroulant-panneau.nav-teinte-competition { --nav-teinte: 215; }
.nav-deroulant-panneau.nav-teinte-aide { --nav-teinte: 188; }
.nav-deroulant-panneau::after {
  content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, hsl(var(--nav-teinte) 85% 62%), hsl(calc(var(--nav-teinte) + 40) 85% 60%), transparent);
}
@keyframes nav-panneau-entree { from { opacity: 0; translate: 0 -8px; scale: .98; } }
.nav-deroulant-titre { margin: 8px 12px 4px; font-size: 10.5px; letter-spacing: .12em; }
.nav-deroulant-colonne > .nav-deroulant-titre:first-child { margin-top: 2px; }

/* Liens */
.nav-deroulant-lien { position: relative; gap: 12px; padding: 8px 10px; border-radius: 12px; transition: background .18s ease; }
.nav-deroulant-lien:hover { background: hsl(var(--nav-teinte) 70% 60% / .1); }
.nav-deroulant-lien > span.nav-icone[aria-hidden], .nav-deroulant-lien > span.nav-fleche[aria-hidden] { font-size: inherit; text-align: initial; }
.nav-deroulant-lien > span.nav-fleche[aria-hidden] { width: auto; }
.nav-icone {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; color: #fff;
  background: linear-gradient(135deg, hsl(var(--nav-teinte) 75% 58%), hsl(calc(var(--nav-teinte) + 35) 80% 42%));
  box-shadow: 0 8px 18px -10px hsl(var(--nav-teinte) 80% 50% / .9), inset 0 0 0 1px rgba(255, 255, 255, .15);
  transition: transform .2s ease;
}
.nav-deroulant-lien > span.nav-icone[aria-hidden] { width: 40px; }
.nav-applis .nav-deroulant-lien > span.nav-icone[aria-hidden] { width: 32px; }
.nav-icone svg { width: 19px; height: 19px; }
.nav-icone-image { background: linear-gradient(135deg, #0f172a, #1e3a8a); }
.nav-icone-image .sidebar-lien-logo { width: 26px; height: 26px; vertical-align: 0; }
.nav-deroulant-lien:hover .nav-icone { transform: scale(1.06) rotate(-3deg); }
.nav-deroulant-lien strong { font-size: 14.5px; }
.nav-deroulant-lien small { font-size: 12px; }
.nav-fleche { display: inline-flex; margin-left: auto; padding-left: 6px; color: hsl(var(--nav-teinte) 70% 62%); opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .2s ease; }
.nav-fleche svg { width: 16px; height: 16px; }
.nav-deroulant-lien:hover .nav-fleche, .nav-deroulant-lien:focus-visible .nav-fleche { opacity: 1; transform: none; }
.nav-deroulant-lien .badge + .nav-fleche { margin-left: 6px; }
.nav-deroulant-lien .badge { border-radius: 999px; background: linear-gradient(135deg, #ff3b5c, #e11d48); color: #fff; font-weight: 800; }
/* Lien de la page en cours : fond teinte + barre d'accent */
.nav-deroulant-lien.actif { background: hsl(var(--nav-teinte) 70% 60% / .14); color: var(--texte); }
.nav-deroulant-lien.actif::before { content: ""; position: absolute; left: -2px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: hsl(var(--nav-teinte) 80% 62%); }
.nav-deroulant-lien.actif strong { color: hsl(var(--nav-teinte) 75% 68%); }
:root[data-theme="clair"] .nav-deroulant-lien.actif strong { color: hsl(var(--nav-teinte) 70% 42%); }

/* Lien vedette (Vue d'ensemble, Arena) */
.nav-deroulant-lien.nav-vedette {
  margin-bottom: 4px; padding: 12px; border: 1px solid hsl(var(--nav-teinte) 70% 60% / .3);
  background: linear-gradient(135deg, hsl(var(--nav-teinte) 75% 55% / .16), hsl(calc(var(--nav-teinte) + 40) 75% 55% / .06));
}
.nav-deroulant-lien.nav-vedette:hover { background: linear-gradient(135deg, hsl(var(--nav-teinte) 75% 55% / .26), hsl(calc(var(--nav-teinte) + 40) 75% 55% / .1)); }
.nav-vedette-arena { background: linear-gradient(135deg, rgba(37, 99, 235, .2), rgba(239, 68, 68, .1)); border-color: rgba(96, 165, 250, .35); }

/* Forum : colonne des liens + colonne des categories */
.nav-deroulant-large { min-width: 620px; gap: 12px; }
.nav-deroulant-categories { border-left: 1px solid var(--bordure); padding-left: 12px; }
.nav-deroulant-compact { gap: 10px; padding: 6px 10px; border-radius: 10px; }
.nav-deroulant-compact .sidebar-lien-icone { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: hsl(var(--nav-teinte) 70% 60% / .12); }

/* Aide : applications cote a cote */
.nav-applis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.nav-applis .nav-deroulant-lien { gap: 8px; padding: 8px; }
.nav-applis .nav-icone { width: 32px; height: 32px; border-radius: 10px; }
.nav-applis .nav-icone svg { width: 16px; height: 16px; }
.nav-applis strong { font-size: 13px; }
.nav-deroulant-panneau.nav-teinte-aide { min-width: 360px; }
.nav-applis strong { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .nav-deroulant-panneau { animation: none; }
  .nav-icone, .nav-fleche, .nav-deroulant-fleche { transition: none; }
}

/* ==========================================================================================================
   NAVIGATION MOBILE — REFONTE PREMIUM (views/header.ejs) : barre basse flottante en verre, onglet actif en pastille
   degradee ; tiroir « Menu » en sections titrees avec icones en pastilles (memes teintes que les menus du bureau).
   ========================================================================================================== */
.nav-mobile-icone { display: grid; place-items: center; width: 44px; height: 30px; border-radius: 999px; transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .2s ease; }
.nav-mobile-icone svg { width: 21px; height: 21px; }
.tiroir-teinte-forum { --tiroir-teinte: 262; }
.tiroir-teinte-live { --tiroir-teinte: 352; }
.tiroir-teinte-social { --tiroir-teinte: 318; }
.tiroir-teinte-aide { --tiroir-teinte: 188; }

@media (max-width: 860px) {
  /* ---- Barre basse flottante ---- */
  .nav-mobile {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 6px; gap: 2px;
    border: 1px solid var(--bordure); border-radius: 24px;
    background: rgba(var(--surface-rgb), .82); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .6), 0 0 0 1px rgba(var(--violet-rgb), .06);
  }
  .nav-mobile-lien { min-height: 54px; gap: 3px; padding: 4px 2px; border-radius: 18px; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; }
  .nav-mobile-lien:hover, .nav-mobile-lien:active { background: none; }
  .nav-mobile-lien:active .nav-mobile-icone { transform: scale(.9); }
  .nav-mobile-lien.actif { color: var(--texte); font-weight: 800; }
  .nav-mobile-lien.actif .nav-mobile-icone {
    color: #fff; background: linear-gradient(135deg, #8b5cf6, #d946ef); box-shadow: 0 8px 18px -8px rgba(217, 70, 239, .9);
  }
  .nav-mobile-lien[aria-expanded="true"] .nav-mobile-icone { color: var(--violet); background: rgba(var(--violet-rgb), .16); }
  .nav-mobile-badge.badge {
    top: 0; right: calc(50% - 26px); min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px;
    background: linear-gradient(135deg, #ff3b5c, #e11d48); color: #fff; font-size: 10px; font-weight: 900; border: 2px solid var(--surface);
  }
  .nav-mobile-badge.badge[hidden] { display: none; }
  body:not(.sans-nav-mobile) .page { padding-bottom: calc(84px + 64px + env(safe-area-inset-bottom)); }

  /* ---- Tiroir « Menu » ---- */
  .sidebar-app {
    width: min(330px, 88vw); padding: 14px 14px calc(96px + env(safe-area-inset-bottom)); gap: 2px;
    border-left: 1px solid var(--bordure); border-radius: 24px 0 0 24px;
    background: radial-gradient(120% 40% at 100% 0%, rgba(var(--violet-rgb), .18), transparent 60%), rgba(var(--surface-rgb), .97);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: -30px 0 70px -20px rgba(0, 0, 0, .7);
    overflow-y: auto; scrollbar-width: thin;
  }
  .sidebar-app-fond { background: rgba(6, 5, 12, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  .sidebar-app-tete-mobile { padding: 2px 2px 12px; margin-bottom: 4px; }
  .tiroir-marque { display: inline-flex; align-items: center; gap: 10px; }
  .tiroir-marque img { width: 30px; height: 30px; border-radius: 9px; }
  .tiroir-marque strong { font-size: 18px; font-weight: 900; letter-spacing: -.01em; }
  .sidebar-app-tete-mobile button {
    width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 50%;
    border: 1px solid var(--bordure); background: rgba(var(--violet-rgb), .1); color: var(--texte);
  }
  .sidebar-app-tete-mobile button svg { width: 18px; height: 18px; }
  .sidebar-app-tete-mobile button:hover { background: rgba(var(--violet-rgb), .2); }

  .tiroir-section { margin: 14px 8px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
  .tiroir-groupe { display: flex; flex-direction: column; gap: 2px; }
  .sidebar-app .sidebar-lien {
    position: relative; gap: 12px; padding: 7px 10px; border-left: 0; border-radius: 14px; color: var(--texte); font-size: 15px; font-weight: 600;
    transition: background .18s ease;
  }
  .sidebar-app .sidebar-lien:hover, .sidebar-app .sidebar-lien:active { background: hsl(var(--tiroir-teinte, 262) 70% 60% / .1); }
  .tiroir-icone {
    width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; color: #fff;
    background: linear-gradient(135deg, hsl(var(--tiroir-teinte, 262) 75% 58%), hsl(calc(var(--tiroir-teinte, 262) + 35) 80% 42%));
    box-shadow: 0 8px 18px -10px hsl(var(--tiroir-teinte, 262) 80% 50% / .9), inset 0 0 0 1px rgba(255, 255, 255, .15);
  }
  .tiroir-icone svg { width: 18px; height: 18px; }
  .tiroir-icone-image { background: linear-gradient(135deg, #0f172a, #1e3a8a); }
  .tiroir-icone-image .sidebar-lien-logo { width: 24px; height: 24px; vertical-align: 0; }
  .sidebar-app .sidebar-lien.actif { background: hsl(var(--tiroir-teinte, 262) 70% 60% / .16); color: var(--texte); font-weight: 800; }
  .sidebar-app .sidebar-lien.actif::before { content: ""; position: absolute; left: -4px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: hsl(var(--tiroir-teinte, 262) 80% 62%); }
  .sidebar-app .sidebar-lien .badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: linear-gradient(135deg, #ff3b5c, #e11d48); color: #fff; font-size: 11px; font-weight: 800; }
  .sidebar-app .sidebar-lien .badge[hidden] { display: none; }
  .sidebar-app .tiroir-admin { margin-top: 12px; border: 1px solid rgba(34, 211, 238, .3); background: linear-gradient(90deg, rgba(34, 211, 238, .12), transparent); }
  .tiroir-admin .tiroir-icone { background: linear-gradient(135deg, #06b6d4, #0e7490); }

  /* Categories en puces */
  .sidebar-app .sidebar-groupe { margin-top: 14px; padding-top: 0; border-top: 0; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .sidebar-app .sidebar-titre-groupe { flex-basis: 100%; margin: 0 8px 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; }
  .sidebar-app .sidebar-groupe a.sidebar-lien-categorie {
    max-width: 100%; padding: 5px 12px 5px 5px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--texte);
    background: rgba(var(--violet-rgb), .08); border: 1px solid var(--bordure);
  }
  .sidebar-app .sidebar-lien-icone { width: 24px; height: 24px; border-radius: 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-mobile-icone { transition: none; }
}

/* ==========================================================================================================
   PIED DE PAGE — REFONTE PREMIUM (views/footer.ejs) : marque, colonnes de liens, bande de copyright.
   Sur mobile, c'est lui qui reserve la place de la barre de navigation flottante (il suit .page dans le flux :
   l'espace reserve sous .page ne le protegeait pas, il passait sous la barre).
   ========================================================================================================== */
.pied {
  position: relative; margin-top: 48px; padding: 0; border-top: 0; text-align: left; font-size: 14px; color: var(--texte-doux);
  background: radial-gradient(60% 120% at 50% 0%, rgba(var(--violet-rgb), .09), transparent 70%), linear-gradient(180deg, transparent, rgba(var(--violet-rgb), .04));
}
.pied::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--violet-rgb), .55), rgba(217, 70, 239, .45), transparent);
}
.pied-interieur {
  max-width: var(--conteneur-shell, 1400px); margin: 0 auto; padding: 44px 24px 30px;
  display: grid; grid-template-columns: minmax(240px, 1.1fr) 2fr; gap: 48px;
}
.pied-logo { display: inline-flex; align-items: center; gap: 12px; color: var(--texte); font-size: 19px; font-weight: 900; letter-spacing: -.01em; text-decoration: none; }
.pied-logo:hover { color: var(--texte); text-decoration: none; }
.pied-logo img { border-radius: 12px; box-shadow: 0 10px 24px -12px rgba(var(--violet-rgb), .8); }
.pied-accroche { max-width: 38ch; margin: 14px 0 16px; line-height: 1.55; }
.pied-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border-radius: 999px;
  background: rgba(var(--violet-rgb), .1); border: 1px solid var(--bordure); color: var(--texte); font-size: 12px; font-weight: 700;
}
.pied-point { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.pied-colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pied-colonne { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.pied-titre { margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--texte); }
.pied-colonne a { width: fit-content; max-width: 100%; color: var(--texte-doux); text-decoration: none; transition: color .2s ease, transform .2s ease; }
.pied-colonne a:hover { color: var(--violet); text-decoration: none; transform: translateX(3px); }
.pied-appli { display: inline-flex; align-items: center; gap: 8px; }
.pied-appli .lr-icone { width: 16px; height: 16px; }
.pied-bas {
  max-width: var(--conteneur-shell, 1400px); margin: 0 auto; padding: 18px 24px 26px; border-top: 1px solid var(--bordure);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; font-size: 12.5px;
}
.pied-bas p, .pied-bas p + p { margin: 0; }
.pied-bas-signature { opacity: .8; }

@media (max-width: 860px) {
  .pied { margin-top: 32px; }
  .pied-interieur { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 20px 22px; }
  .pied-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .pied-bas { flex-direction: column; justify-content: center; text-align: center; padding: 16px 20px 20px; }
  /* La barre de navigation flottante recouvre le bas de l'ecran : le pied de page lui laisse sa place. */
  body:not(.sans-nav-mobile) .pied { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  body:not(.sans-nav-mobile) .page { padding-bottom: 32px; }
}

/* ---- Cloche : liste des notifications (public/pages/centre-notifications.js) ---- */
.bandeau-panneau-notifs { min-width: 340px; max-width: min(400px, calc(100vw - 24px)); }
.bandeau-notifs-liste { display: flex; flex-direction: column; gap: 2px; max-height: min(60vh, 460px); overflow-y: auto; }
.bandeau-panneau .bandeau-notif-centre { position: relative; align-items: flex-start; }
.bandeau-notif-centre .bandeau-notif-textes { flex: 1; }
.bandeau-notif-centre .bandeau-notif-textes small { overflow-wrap: anywhere; }
.bandeau-notif-centre .bandeau-notif-date { font-size: 11px; opacity: .8; }
.bandeau-notif-centre:not(.non-lue) { opacity: .72; }
.bandeau-notif-centre.non-lue { background: rgba(var(--violet-rgb), .08); }
.bandeau-notif-pastille { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), .2); }
.bandeau-notifs-actions { display: flex; justify-content: space-between; gap: 8px; padding: 2px 10px 6px; }
.bandeau-notifs-lien { background: none; border: 0; padding: 2px 0; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--texte-doux); text-decoration: underline; text-underline-offset: 3px; }
.bandeau-notifs-lien:hover { color: var(--texte); }
@media (max-width: 600px) { .bandeau-panneau-notifs { min-width: min(340px, calc(100vw - 32px)); } }
.bandeau-notif-vide[hidden], .bandeau-notifs-actions[hidden] { display: none; }

/* ============================================================
   public/css/15-forum.css
   Forum premium : catégories, sujets, messages, création de sujet, favoris.
   Assemblée avec les autres fichiers de public/css/ dans l'ordre de leur numéro, et servie sous /style.css
   (voir src/web/feuille-de-style.js) : une règle d'un fichier plus loin l'emporte, à spécificité égale.
   ============================================================ */

/* ==========================================================================================================
   FORUM — REFONTE PREMIUM (forum.ejs, categorie.ejs, sujet.ejs, nouveau-sujet.ejs, mes-favoris.ejs, jeux.ejs,
   jeu.ejs, lfg.ejs, forum-onglets.ejs) : bandeaux en verre avec halo, cartes à reliefs doux, pastilles d'icônes
   dégradées (mêmes teintes que les menus du bandeau), messages en cartes, zone de réponse soignée.
   Placé en fin de feuille pour primer sur les règles d'origine, qui restent en place pour les autres pages.
   ========================================================================================================== */
.forum-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 22px 32px;
  margin: 0 0 18px; padding: 30px 32px; border-radius: 24px; border: 1px solid var(--bordure);
  background:
    radial-gradient(70% 140% at 0% 0%, rgba(var(--violet-rgb), .22), transparent 60%),
    radial-gradient(60% 120% at 100% 100%, rgba(217, 70, 239, .14), transparent 65%),
    rgba(var(--surface-rgb), .78);
  box-shadow: 0 24px 60px -34px rgba(var(--violet-rgb), .65), inset 0 1px 0 rgba(255, 255, 255, .05);
  animation: le-repere-fondu-monte var(--duree-normale) var(--ease-sortie) both;
}
.forum-hero::after {
  content: ""; position: absolute; z-index: -1; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--violet-rgb), .28), transparent 70%); filter: blur(10px); pointer-events: none;
}
.forum-hero-texte { flex: 1 1 380px; min-width: 0; }
.forum-hero .titre-page { margin: 10px 0 8px; font-size: clamp(30px, 4.4vw, 44px); font-weight: 900; letter-spacing: -.02em; line-height: 1.05; }
.forum-hero .sous-titre { margin: 0; font-size: 15.5px; line-height: 1.55; }
.forum-hero-compact { padding: 24px 28px; }
.forum-hero-compact .titre-page { font-size: clamp(26px, 3.6vw, 36px); }
.forum-sur-titre {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--violet);
  background: rgba(var(--violet-rgb), .12); border: 1px solid rgba(var(--violet-rgb), .28);
}
.forum-sur-titre .lr-icone { width: 15px; height: 15px; }
.forum-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.forum-hero-actions:empty { display: none; }
.forum-hero-actions .bouton { margin-top: 0; }

/* Boutons : principal en dégradé, icône alignée */
.forum-hero-actions .bouton, .forum-bouton-principal, .forum-entete .bouton, .bloc-reponse-envoyer, .lfg-carte-actions .bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; font-weight: 700;
}
.forum-hero-actions .bouton .lr-icone, .forum-bouton-principal .lr-icone, .bloc-reponse-envoyer .lr-icone, .lfg-carte-actions .bouton .lr-icone { width: 17px; height: 17px; }
.forum-bouton-principal, .bloc-reponse-envoyer {
  padding: 11px 20px; color: #fff; background: linear-gradient(135deg, #8b5cf6, #d946ef);
  box-shadow: 0 12px 26px -14px rgba(217, 70, 239, .95), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.forum-bouton-principal:hover, .bloc-reponse-envoyer:hover {
  color: #fff; background: linear-gradient(135deg, #8b5cf6, #d946ef); filter: brightness(1.08);
  transform: translateY(-1px); box-shadow: 0 16px 30px -14px rgba(217, 70, 239, 1), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.forum-hero-actions .bouton-secondaire { padding: 10px 18px; background: rgba(var(--surface-rgb), .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Chiffres du bandeau */
.forum-hero-stats { display: flex; gap: 10px; margin: 0; flex-wrap: wrap; }
.forum-hero-stats > div {
  min-width: 108px; padding: 14px 18px; border-radius: 18px; text-align: left;
  background: rgba(var(--surface-rgb), .65); border: 1px solid var(--bordure);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.forum-hero-stats dt { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.forum-hero-stats dd {
  margin: 4px 0 0; font-size: 26px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--texte), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Sous-onglets du forum : rail segmenté, onglet actif en pastille dégradée */
.sous-onglets.forum-onglets {
  display: inline-flex; flex-wrap: nowrap; gap: 4px; max-width: 100%; margin: 0 0 26px; padding: 5px;
  border: 1px solid var(--bordure); border-radius: 18px; background: rgba(var(--surface-rgb), .7);
  overflow-x: auto; scrollbar-width: none;
}
.sous-onglets.forum-onglets::-webkit-scrollbar { display: none; }
.forum-onglets .sous-onglet {
  flex: none; gap: 8px; padding: 9px 16px; border: 0; border-radius: 13px; background: none; color: var(--texte-doux);
  font-size: 14px; white-space: nowrap; transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.forum-onglets .sous-onglet .lr-icone { width: 17px; height: 17px; }
.forum-onglets .sous-onglet:hover { color: var(--texte); background: rgba(var(--violet-rgb), .1); }
.forum-onglets .sous-onglet.actif {
  color: #fff; background: linear-gradient(135deg, #8b5cf6, #d946ef);
  box-shadow: 0 10px 22px -12px rgba(217, 70, 239, .95), inset 0 1px 0 rgba(255, 255, 255, .2);
}

/* Titres de section avec pastille d'icône */
.forum-titre-section { display: flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.forum-titre-section > .lr-icone {
  flex: none; width: 32px; height: 32px; padding: 7px; border-radius: 11px; color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #d946ef); box-shadow: 0 8px 18px -10px rgba(217, 70, 239, .9);
}
.forum-titre-section .badge-live-compte { margin-left: 2px; }
.forum-lien-tout { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--violet); text-decoration: none; }
.forum-lien-tout .lr-icone { width: 16px; height: 16px; transition: transform .2s ease; }
.forum-lien-tout:hover { text-decoration: none; }
.forum-lien-tout:hover .lr-icone { transform: translateX(3px); }

/* Jaquettes des sorties */
.jeux-grille { gap: 16px; }
.jeu-carte {
  height: 190px; border-radius: 20px; background-color: #0c0a14;
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .9);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease, background-size .6s ease;
}
.jeu-carte:hover { transform: translateY(-4px); border-color: rgba(var(--violet-rgb), .7); box-shadow: 0 24px 48px -24px rgba(var(--violet-rgb), .75); }
.jeu-carte-voile { background: linear-gradient(to top, rgba(12, 10, 20, .96) 0%, rgba(12, 10, 20, .35) 55%, rgba(12, 10, 20, 0) 100%); }
.jeu-carte-texte { padding: 16px 18px; gap: 3px; }
.jeu-carte-texte strong { font-size: 17px; font-weight: 800; letter-spacing: -.01em; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.jeu-carte-jours {
  position: absolute; top: 12px; right: 12px; z-index: 1; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 900; letter-spacing: .04em; color: #fff; font-variant-numeric: tabular-nums;
  background: rgba(12, 10, 20, .55); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.jeux-grille-grande { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.jeux-grille-grande .jeu-carte { height: 240px; }

/* Cartes de catégorie */
.forum-categories { display: flex; flex-direction: column; gap: 12px; }
.forum-categories .categorie-ligne {
  position: relative; margin: 0; gap: 18px; padding: 18px 22px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(var(--violet-rgb), .06), transparent 45%), rgba(var(--surface-rgb), .82);
  box-shadow: 0 14px 34px -28px rgba(0, 0, 0, .85);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.forum-categories .categorie-ligne::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #8b5cf6, #d946ef); opacity: 0; transition: opacity .25s ease;
}
.forum-categories .categorie-ligne:hover {
  transform: translateY(-2px); border-color: rgba(var(--violet-rgb), .45);
  background: linear-gradient(135deg, rgba(var(--violet-rgb), .12), transparent 55%), rgba(var(--surface-rgb), .92);
  box-shadow: 0 20px 44px -26px rgba(var(--violet-rgb), .6);
}
.forum-categories .categorie-ligne:hover::before { opacity: 1; }
.forum-categories .categorie-ligne-icone, .forum-entete-icone {
  width: 54px; height: 54px; font-size: 26px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(var(--violet-rgb), .24), rgba(217, 70, 239, .12));
  border: 1px solid rgba(var(--violet-rgb), .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.forum-categories .categorie-ligne-principal strong { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.forum-categories .categorie-ligne-principal::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.forum-categories .categorie-ligne-principal .aide { font-size: 13.5px; line-height: 1.45; }
.forum-categories .categorie-ligne-chiffres { gap: 8px; }
.forum-categories .categorie-ligne-chiffres div {
  min-width: 72px; padding: 8px 10px; border-radius: 14px; gap: 1px;
  background: rgba(var(--violet-rgb), .07); border: 1px solid var(--bordure);
}
.forum-categories .categorie-ligne-chiffres dd { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.forum-categories .categorie-ligne-chiffres dt { font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.forum-categories .categorie-ligne-dernier {
  position: relative; z-index: 1; flex-basis: 240px; padding: 8px 10px; border-left: 0; border-radius: 14px;
  background: rgba(var(--fond-rgb), .35); border: 1px solid var(--bordure); transition: border-color .2s ease;
}
.forum-categories .categorie-ligne-dernier:hover { border-color: rgba(var(--violet-rgb), .5); }
.forum-categories .categorie-ligne-dernier.aide { justify-content: center; font-size: 12.5px; }
.forum-categories .categorie-ligne-dernier .avatar, .forum-categories .categorie-ligne-dernier .avatar-secours { width: 34px; height: 34px; flex: none; }
.forum-categories .categorie-ligne-dernier > span { min-width: 0; }
.forum-categories .categorie-ligne-dernier > span > span { color: var(--texte-doux); font-size: 12px; }

/* Colonne de widgets */
.forum-corps { gap: 28px; }
.forum-widgets { flex-basis: 320px; gap: 14px; }
.widget-forum {
  padding: 18px; border-radius: 20px; background: rgba(var(--surface-rgb), .8);
  box-shadow: 0 14px 34px -28px rgba(0, 0, 0, .85);
}
.widget-forum h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 15px; font-weight: 800; }
.widget-forum h3 small { margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--violet); background: rgba(var(--violet-rgb), .12); }
.widget-forum-icone {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #d946ef); box-shadow: 0 8px 16px -10px rgba(217, 70, 239, .9);
}
.widget-forum-icone .lr-icone { width: 16px; height: 16px; }
.widget-forum-tendances .widget-forum-icone { background: linear-gradient(135deg, #f97316, #e11d48); box-shadow: 0 8px 16px -10px rgba(249, 115, 22, .9); }
.widget-forum .tendances-liste { gap: 4px; }
.widget-forum .tendances-liste li { display: flex; align-items: flex-start; gap: 12px; padding: 8px; margin: 0 -8px; border-radius: 12px; transition: background .2s ease; }
.widget-forum .tendances-liste li:hover { background: rgba(var(--violet-rgb), .08); }
.tendance-rang {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; font-size: 13px; font-weight: 900;
  color: var(--violet); background: rgba(var(--violet-rgb), .12); font-variant-numeric: tabular-nums;
}
.widget-forum .tendances-liste li:first-child .tendance-rang { color: #fff; background: linear-gradient(135deg, #f97316, #e11d48); }
.widget-forum .tendances-liste li a { min-width: 0; color: var(--texte); text-decoration: none; }
.widget-forum .tendances-liste li a strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.35; }
.widget-forum .widget-derniers-messages { gap: 4px; }
.widget-forum .widget-derniers-messages li { padding: 7px 8px; margin: 0 -8px; border-radius: 12px; gap: 10px; transition: background .2s ease; }
.widget-forum .widget-derniers-messages li:hover { background: rgba(var(--violet-rgb), .08); }
.widget-forum .widget-derniers-messages .avatar, .widget-forum .widget-derniers-messages .avatar-secours { width: 34px; height: 34px; }
.widget-forum-bienvenue { display: flex; align-items: center; gap: 12px; color: var(--texte); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.widget-forum-bienvenue:hover { color: var(--texte); text-decoration: none; border-color: rgba(var(--violet-rgb), .5); transform: translateY(-1px); }
.widget-forum-bienvenue .widget-forum-icone { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #10b981, #0e7490); box-shadow: 0 8px 16px -10px rgba(16, 185, 129, .9); }
.widget-forum-bienvenue small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.widget-forum-bienvenue strong { display: block; font-size: 14.5px; overflow-wrap: anywhere; }

/* En-tête de catégorie / page simple */
.fil ol { gap: 2px 0; }
.fil a { color: var(--texte-doux); font-weight: 600; text-decoration: none; transition: color .2s ease; }
.fil a:hover { color: var(--violet); text-decoration: none; }
.fil li[aria-current="page"], .fil li:last-child { min-width: 0; color: var(--texte); font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-entete {
  position: relative; overflow: hidden; display: flex; align-items: center; flex-wrap: wrap; gap: 16px 20px;
  margin: 0 0 22px; padding: 22px 24px; border-radius: 22px; border: 1px solid var(--bordure);
  background: radial-gradient(70% 160% at 0% 0%, rgba(var(--violet-rgb), .18), transparent 60%), rgba(var(--surface-rgb), .8);
  box-shadow: 0 20px 50px -34px rgba(var(--violet-rgb), .6);
}
.forum-entete-icone { flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; width: 62px; height: 62px; font-size: 30px; }
.forum-entete-icone-svg { color: #fff; background: linear-gradient(135deg, #8b5cf6, #d946ef); border: 0; box-shadow: 0 12px 24px -12px rgba(217, 70, 239, .9); }
.forum-entete-icone-svg .lr-icone { width: 28px; height: 28px; }
.forum-entete-texte { flex: 1 1 320px; min-width: 0; }
.forum-entete .titre-page { margin: 0; font-size: clamp(24px, 3.4vw, 32px); font-weight: 900; letter-spacing: -.02em; overflow-wrap: anywhere; }
.forum-entete .sous-titre { margin: 6px 0 0; }
.forum-entete .bouton { margin-top: 0; }
.forum-entete-chiffres { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; }
.forum-entete-chiffres li {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 13px; color: var(--texte-doux);
  background: rgba(var(--violet-rgb), .08); border: 1px solid var(--bordure);
}
.forum-entete-chiffres .lr-icone { width: 14px; height: 14px; color: var(--violet); }
.forum-entete-chiffres strong { color: var(--texte); font-variant-numeric: tabular-nums; }

/* État vide */
.forum-vide { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 24px; text-align: center; border-radius: 22px; border-style: dashed; }
.forum-vide p { margin: 0; max-width: 46ch; }
.forum-vide-icone { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; color: var(--violet); background: rgba(var(--violet-rgb), .12); }
.forum-vide-icone .lr-icone { width: 26px; height: 26px; }

/* Cartes de sujet (liste d'une catégorie, sujets sauvegardés) */
.liste-sujets:has(.sujet-ligne-avec-dernier), .liste-sujets:has(.sujet-ligne-carte) { display: flex; flex-direction: column; gap: 10px; }
.sujet-ligne.sujet-ligne-avec-dernier, .sujet-ligne.sujet-ligne-carte {
  gap: 10px 16px; padding: 16px 18px; border: 1px solid var(--bordure); border-radius: 18px;
  background: rgba(var(--surface-rgb), .82); box-shadow: 0 12px 30px -26px rgba(0, 0, 0, .85);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s ease, box-shadow .25s ease;
}
.sujet-ligne.sujet-ligne-avec-dernier:hover, .sujet-ligne.sujet-ligne-carte:hover {
  transform: translateY(-2px); border-color: rgba(var(--violet-rgb), .45); box-shadow: 0 18px 40px -26px rgba(var(--violet-rgb), .6);
}
.sujet-ligne-pastille {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--violet);
  background: rgba(var(--violet-rgb), .12); border: 1px solid rgba(var(--violet-rgb), .22);
}
.sujet-ligne-pastille .lr-icone { width: 19px; height: 19px; }
.sujet-ligne-epinglee { border-color: rgba(245, 158, 11, .45) !important; background: linear-gradient(90deg, rgba(245, 158, 11, .09), transparent 55%), rgba(var(--surface-rgb), .85) !important; }
.sujet-ligne-epinglee .sujet-ligne-pastille { color: #fff; background: linear-gradient(135deg, #f59e0b, #ea580c); border: 0; box-shadow: 0 8px 16px -10px rgba(245, 158, 11, .9); }
.sujet-ligne-verrouillee .sujet-ligne-pastille { color: var(--texte-doux); background: rgba(var(--fond-rgb), .5); border-color: var(--bordure); }
.sujet-ligne-avec-dernier .sujet-titre, .sujet-ligne-carte .sujet-titre { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; overflow-wrap: anywhere; }
.sujet-ligne-avec-dernier .sujet-titre a, .sujet-ligne-carte .sujet-titre a { color: var(--texte); text-decoration: none; }
.sujet-ligne-avec-dernier .sujet-titre a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sujet-ligne-avec-dernier .sujet-titre a:hover, .sujet-ligne-carte .sujet-titre a:hover { color: var(--violet); }
.sujet-ligne-avec-dernier .sujet-meta, .sujet-ligne-carte .sujet-meta { margin-top: 4px; font-size: 12.5px; }
.sujet-ligne-avec-dernier .sujet-meta a, .sujet-ligne-avec-dernier .sujet-ligne-dernier, .sujet-ligne-moderation { position: relative; z-index: 1; }
.sujet-ligne-avec-dernier .compteur, .sujet-ligne-carte .compteur {
  margin: 0;   /* la règle mobile « .compteur { margin-top: 6px } » de 08-recherche.css décalait le compteur du titre */
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 12px; border-radius: 999px;
  font-size: 13.5px; font-weight: 800; color: var(--texte); font-variant-numeric: tabular-nums;
  background: rgba(var(--violet-rgb), .1); border: 1px solid rgba(var(--violet-rgb), .22);
}
.sujet-ligne-avec-dernier .compteur .lr-icone, .sujet-ligne-carte .compteur .lr-icone { width: 15px; height: 15px; color: var(--violet); }
.sujet-ligne-avec-dernier .sujet-ligne-dernier { flex-basis: 200px; padding: 6px 10px; border-left: 0; border-radius: 14px; background: rgba(var(--fond-rgb), .35); border: 1px solid var(--bordure); }
.sujet-ligne-avec-dernier .sujet-ligne-dernier:hover { border-color: rgba(var(--violet-rgb), .5); }
.sujet-ligne-avec-dernier .sujet-ligne-dernier .avatar, .sujet-ligne-avec-dernier .sujet-ligne-dernier .avatar-secours { width: 32px; height: 32px; flex: none; }
.sujet-ligne-moderation { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--bordure); }
.sujet-ligne-moderation .sujet-admin { margin: 0; }
.sujet-ligne-moderation .lien-bouton { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--bordure); background: rgba(var(--fond-rgb), .3); font-size: 12.5px; text-decoration: none; }
.sujet-ligne-moderation .lien-bouton:hover { border-color: rgba(var(--violet-rgb), .55); }
.sujet-ligne-moderation .lien-danger:hover { border-color: rgba(239, 68, 68, .6); }
.sujet-ligne-carte { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.sujet-ligne-carte > *:not(.compteur):not(.sujet-admin) { grid-column: 1; }
.sujet-ligne-carte .compteur { grid-column: 2; grid-row: 1 / span 2; position: static; }
.sujet-ligne-carte .sujet-admin { grid-column: 2; grid-row: 3; justify-self: end; margin: 0; }
.sujet-ligne-carte .resultat-categorie { margin: 0; }

/* En-tête d'un sujet */
.sujet-entete {
  position: relative; overflow: hidden; margin: 0 0 14px; padding: 22px 24px; border-radius: 22px; border: 1px solid var(--bordure);
  background: radial-gradient(70% 160% at 0% 0%, rgba(var(--violet-rgb), .16), transparent 60%), rgba(var(--surface-rgb), .82);
  box-shadow: 0 20px 50px -34px rgba(var(--violet-rgb), .6);
}
.sujet-entete-categorie {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 12px 4px 4px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; color: var(--violet); text-decoration: none;
  background: rgba(var(--violet-rgb), .1); border: 1px solid rgba(var(--violet-rgb), .25);
}
.sujet-entete-categorie:hover { text-decoration: none; background: rgba(var(--violet-rgb), .18); }
.sujet-entete-categorie-icone { width: 24px; height: 24px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; font-size: 13px; background: rgba(var(--surface-rgb), .9); }
.sujet-entete-categorie-icone .categorie-ligne-logo { width: 100%; height: 100%; object-fit: contain; }
.sujet-entete .titre-page { margin: 12px 0 10px; font-size: clamp(24px, 3.6vw, 34px); font-weight: 900; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.sujet-entete-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.sujet-entete-meta p {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 11px; border-radius: 999px; font-size: 13px; color: var(--texte-doux);
  background: rgba(var(--fond-rgb), .35); border: 1px solid var(--bordure);
}
.sujet-entete-meta .lr-icone { width: 14px; height: 14px; color: var(--violet); }
.sujet-entete-meta .sujet-entete-etat { color: #f59e0b; border-color: rgba(245, 158, 11, .4); }
.sujet-entete-meta .sujet-entete-etat .lr-icone { color: currentColor; }

/* Barre d'actions du sujet */
.barre-suivi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.barre-suivi > form { margin: 0; }
.barre-suivi .bouton-suivre, .barre-suivi .bouton-favori {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  color: var(--texte); background: rgba(var(--surface-rgb), .8); border: 1px solid var(--bordure); text-decoration: none; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.barre-suivi .bouton-suivre:hover, .barre-suivi .bouton-favori:hover { border-color: rgba(var(--violet-rgb), .6); text-decoration: none; }
.barre-suivi .bouton-suivre.actif, .barre-suivi .bouton-favori.actif { color: var(--violet); background: rgba(var(--violet-rgb), .14); border-color: rgba(var(--violet-rgb), .5); }
.barre-suivi .reactions-barre { margin: 0; }
.barre-admin { margin: 0 8px 8px 0; }

/* Réactions en pastilles */
.reaction-bouton { padding: 4px 11px; border-radius: 999px; background: rgba(var(--surface-rgb), .8); transition: border-color .2s ease, background .2s ease, transform .15s ease; }
.reaction-bouton:not(.reaction-lecture-seule):active { transform: scale(.94); }
.reaction-bouton.active { background: rgba(var(--violet-rgb), .16); border-color: rgba(var(--violet-rgb), .6); }
.reaction-plus { width: 30px; height: 30px; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.reaction-plus:hover { background: rgba(var(--violet-rgb), .1); }
.reaction-menu { padding: 7px; border-radius: 16px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7); }
.reaction-menu-item { border-radius: 10px; transition: transform .15s ease, background .15s ease; }
.reaction-menu-item:hover { transform: scale(1.18); }

/* Sondage */
.sondage { padding: 18px 20px; border-radius: 20px; background: linear-gradient(135deg, rgba(var(--violet-rgb), .08), transparent 60%), rgba(var(--surface-rgb), .85); }
.sondage-question { font-size: 16px; font-weight: 800; }
.sondage-option { padding: 11px 14px; border-radius: 14px; background: rgba(var(--fond-rgb), .45); transition: border-color .2s ease; }
.sondage-option-barre { background: linear-gradient(90deg, rgba(var(--violet-rgb), .28), rgba(217, 70, 239, .16)); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.sondage-option.votee { border-color: rgba(var(--violet-rgb), .7); box-shadow: 0 0 0 1px rgba(var(--violet-rgb), .3); }

/* Messages */
.fil-messages { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 28px; }
.fil-messages .message {
  position: relative; margin: 0; padding: 18px 20px; border-radius: 20px; background: rgba(var(--surface-rgb), .85);
  box-shadow: 0 14px 34px -28px rgba(0, 0, 0, .85); scroll-margin-top: 90px;
}
.fil-messages .message:target { border-color: rgba(var(--violet-rgb), .7); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), .18), 0 14px 34px -28px rgba(0, 0, 0, .85); }
.fil-messages .message-auteur-sujet { background: linear-gradient(135deg, rgba(var(--violet-rgb), .07), transparent 50%), rgba(var(--surface-rgb), .88); }
.fil-messages .message-meilleure-reponse { border-color: rgba(16, 185, 129, .65) !important; box-shadow: 0 0 0 1px rgba(16, 185, 129, .3), 0 18px 40px -26px rgba(16, 185, 129, .55); }
.fil-messages .badge-meilleure-reponse { color: #fff; background: linear-gradient(135deg, #10b981, #059669); padding: 4px 12px; box-shadow: 0 8px 16px -10px rgba(16, 185, 129, .9); }
.message-entete { gap: 12px; margin-bottom: 14px; padding-bottom: 14px; }
.fil-messages .message-avatar-lien .avatar, .fil-messages .message-avatar-lien .avatar-secours { width: 44px; height: 44px; }
.fil-messages .auteur { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 15.5px; font-weight: 800; }
.fil-messages .auteur a { color: var(--texte); text-decoration: none; }
.fil-messages .auteur a:hover { color: var(--violet); }
.badge-auteur-sujet {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--violet); background: rgba(var(--violet-rgb), .14); border: 1px solid rgba(var(--violet-rgb), .3);
}
.fil-messages .message-numero {
  padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--texte-doux); text-decoration: none;
  background: rgba(var(--fond-rgb), .4); border: 1px solid var(--bordure); font-variant-numeric: tabular-nums;
}
.fil-messages .message-numero:hover { color: var(--violet); border-color: rgba(var(--violet-rgb), .5); }
.fil-messages .message-date { font-size: 12.5px; }
.fil-messages .lien-signaler { font-size: 12.5px; color: var(--texte-doux); }
.fil-messages .lien-signaler:hover { color: var(--alerte); }
.fil-messages .message-corps { font-size: 15.5px; line-height: 1.65; }
.fil-messages .forum-images-message img { border-radius: 14px !important; border: 1px solid var(--bordure); transition: transform .2s ease; }
.fil-messages .forum-images-message a:hover img { transform: scale(1.02); }
.fil-messages .message-pied { margin-top: 14px; }

/* Zone de réponse */
.bloc-reponse {
  gap: 10px; padding: 20px 22px; border-radius: 22px;
  background: radial-gradient(80% 140% at 100% 0%, rgba(var(--violet-rgb), .12), transparent 60%), rgba(var(--surface-rgb), .88);
  box-shadow: 0 20px 50px -34px rgba(var(--violet-rgb), .6);
}
.bloc-reponse h2.bloc-reponse-titre { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.bloc-reponse-titre .avatar, .bloc-reponse-titre .avatar-secours { width: 40px; height: 40px; flex: none; }
.bloc-reponse-titre small { display: block; font-size: 12.5px; font-weight: 500; color: var(--texte-doux); }
.bloc-reponse form { gap: 8px; }
.bloc-reponse textarea, .formulaire-sujet textarea, .formulaire-sujet input[type="text"], .lfg-poster input[type="text"], .lfg-poster textarea {
  padding: 12px 14px; border-radius: 14px; background: rgba(var(--fond-rgb), .55); line-height: 1.55;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.bloc-reponse textarea { min-height: 130px; resize: vertical; }
.bloc-reponse textarea:focus, .formulaire-sujet textarea:focus, .formulaire-sujet input[type="text"]:focus, .lfg-poster input[type="text"]:focus, .lfg-poster textarea:focus {
  outline: none; border-color: rgba(var(--violet-rgb), .75); box-shadow: 0 0 0 4px rgba(var(--violet-rgb), .16); background: rgba(var(--fond-rgb), .75);
}
.bloc-reponse-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.bloc-reponse-actions .bouton { margin-top: 0; }
.forum-image-choix .lien-bouton {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  color: var(--texte); background: rgba(var(--fond-rgb), .35); border: 1px solid var(--bordure); text-decoration: none; cursor: pointer;
}
.forum-image-choix .lien-bouton:hover { border-color: rgba(var(--violet-rgb), .6); text-decoration: none; }
.bloc-reponse-envoyer .lr-icone { width: 16px; height: 16px; }

/* Formulaire « Ouvrir un sujet » */
.formulaire.formulaire-sujet { gap: 16px; padding: 0; background: none; border: 0; }
.formulaire-sujet-bloc {
  gap: 8px; padding: 20px 22px; border-radius: 20px; border: 1px solid var(--bordure); background: rgba(var(--surface-rgb), .85);
  box-shadow: 0 14px 34px -28px rgba(0, 0, 0, .85);
}
.formulaire-sujet-bloc legend:not(.invisible) { width: 100%; margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--texte); }
.formulaire-sujet label { font-weight: 700; color: var(--texte); font-size: 13.5px; }
.formulaire-sujet textarea { min-height: 180px; resize: vertical; }
.formulaire-sujet #sondage-ajouter-option { align-self: flex-start; font-weight: 700; }
.formulaire-sujet-envoyer { align-self: flex-end; margin-top: 0; }
.formulaire-sujet-envoyer .lr-icone { width: 16px; height: 16px; }

/* Page d'un jeu */
.jeu-banniere { border-radius: 24px; box-shadow: 0 26px 60px -34px rgba(0, 0, 0, .9); }
.jeu-banniere-texte { padding: 26px 28px; }
.jeu-banniere-texte .titre-page { color: #fff; font-size: clamp(28px, 4.6vw, 48px); font-weight: 900; letter-spacing: -.02em; text-shadow: 0 4px 24px rgba(0, 0, 0, .5); }
.jeu-banniere-texte .sous-titre { color: rgba(255, 255, 255, .82); }
.jeu-etiquette { color: #fff; background: linear-gradient(135deg, #ff3b5c, #e11d48); box-shadow: 0 8px 18px -10px rgba(225, 29, 72, .9); }
.ca-r-grille { gap: 12px; }
.ca-r-unite {
  padding: 18px 8px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(var(--violet-rgb), .14), transparent 60%), rgba(var(--surface-rgb), .85);
  box-shadow: 0 14px 34px -26px rgba(var(--violet-rgb), .7), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.ca-r-unite span { font-size: clamp(28px, 6vw, 44px); font-weight: 900; letter-spacing: -.02em; background: linear-gradient(135deg, #8b5cf6, #d946ef); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ca-r-unite small { font-weight: 700; letter-spacing: .12em; }
.jeu-fiche { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); gap: 20px; align-items: start; margin: 0 0 8px; }
.jeu-fiche .note { margin-top: 0; }
.jeu-description { font-size: 15.5px; line-height: 1.7; }
.jeu-fiche-texte .forum-bouton-principal { margin-top: 4px; }
.jeu-fiche-infos { margin: 0; padding: 8px 18px; border-radius: 20px; border: 1px solid var(--bordure); background: rgba(var(--surface-rgb), .85); }
.jeu-fiche-infos > div { padding: 12px 0; border-bottom: 1px solid var(--bordure); }
.jeu-fiche-infos > div:last-child { border-bottom: 0; }
.jeu-fiche-infos dt { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.jeu-fiche-infos dt .lr-icone { width: 14px; height: 14px; color: var(--violet); }
.jeu-fiche-infos dd { margin: 4px 0 0; font-weight: 700; }
.jeux-liste.jeux-liste-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.jeux-liste-cartes li { padding: 0; border: 0; }
.jeux-liste-cartes li a {
  display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; color: var(--texte); text-decoration: none;
  background: rgba(var(--surface-rgb), .85); border: 1px solid var(--bordure); transition: transform .2s ease, border-color .2s ease;
}
.jeux-liste-cartes li a:hover { color: var(--texte); transform: translateY(-2px); border-color: rgba(var(--violet-rgb), .5); }
.jeux-liste-cartes img { width: 72px; height: 52px; flex: none; border-radius: 11px; object-fit: cover; }
.jeux-liste-cartes span { min-width: 0; }
.jeux-liste-cartes strong { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jeux-liste-cartes small { display: block; font-size: 12.5px; color: var(--texte-doux); }

/* Chercher une team */
.lfg-poster { margin: 0 0 24px; }
.lfg-poster > summary.bouton { display: inline-flex; margin-top: 0; }
.lfg-poster[open] > summary.bouton { margin-bottom: 14px; }
.lfg-poster .formulaire { gap: 8px; padding: 20px 22px; border-radius: 20px; box-shadow: 0 14px 34px -28px rgba(0, 0, 0, .85); }
.lfg-poster label { font-weight: 700; color: var(--texte); font-size: 13.5px; }
.lfg-filtre {
  display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; color: var(--texte-doux);
  background: rgba(var(--violet-rgb), .1); border: 1px solid rgba(var(--violet-rgb), .25);
}
.lfg-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.lfg-carte {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px; border-radius: 20px;
  border: 1px solid var(--bordure); background: linear-gradient(160deg, rgba(var(--violet-rgb), .08), transparent 50%), rgba(var(--surface-rgb), .85);
  box-shadow: 0 14px 34px -28px rgba(0, 0, 0, .85); transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s ease, box-shadow .25s ease;
}
.lfg-carte:hover { transform: translateY(-3px); border-color: rgba(var(--violet-rgb), .45); box-shadow: 0 20px 44px -26px rgba(var(--violet-rgb), .6); }
.lfg-carte-tete { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lfg-carte-tete .avatar, .lfg-carte-tete .avatar-secours { width: 40px; height: 40px; flex: none; }
.lfg-carte-auteur { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.lfg-carte-auteur a { color: var(--texte); text-decoration: none; }
.lfg-carte-auteur time { flex-basis: 100%; font-size: 12px; color: var(--texte-doux); }
.lfg-carte-jeu { margin: 2px 0 0; font-size: 18px; font-weight: 900; letter-spacing: -.01em; overflow-wrap: anywhere; }
.lfg-carte-jeu a { color: var(--texte); text-decoration: none; background: linear-gradient(135deg, var(--texte), var(--violet)); -webkit-background-clip: text; background-clip: text; }
.lfg-carte-jeu a:hover { color: var(--violet); text-decoration: none; }
.lfg-carte-message { margin: 0; font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.lfg-carte-dispo {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 0; padding: 4px 11px; border-radius: 999px;
  font-size: 12.5px; color: var(--texte-doux); background: rgba(var(--fond-rgb), .35); border: 1px solid var(--bordure);
}
.lfg-carte-dispo .lr-icone { width: 14px; height: 14px; color: var(--violet); flex: none; }
.lfg-carte-actions { margin-top: auto; padding-top: 4px; }
.lfg-carte-actions:empty { display: none; }
.lfg-carte-actions form { margin: 0; }
.lfg-carte-actions .bouton { margin-top: 0; padding: 8px 16px; }

/* Barre de modération d'un sujet */
.sujet-moderation {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 12px; border-radius: 16px;
  border: 1px dashed rgba(34, 211, 238, .4); background: linear-gradient(90deg, rgba(34, 211, 238, .08), transparent 70%);
}
.sujet-moderation-titre { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #22d3ee; }
.sujet-moderation-titre .lr-icone { width: 15px; height: 15px; }
.sujet-moderation .barre-admin { margin: 0; }
.sujet-moderation .lien-bouton, .sujet-moderation .bouton {
  margin: 0; padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none;
  color: var(--texte); background: rgba(var(--surface-rgb), .8); border: 1px solid var(--bordure);
}
.sujet-moderation .lien-bouton:hover { border-color: rgba(34, 211, 238, .6); text-decoration: none; }
.sujet-moderation .bouton-danger { color: #fff; background: linear-gradient(135deg, #ef4444, #b91c1c); border-color: transparent; }
.fil-messages .forum-images-message { white-space: normal; margin-bottom: 6px; }

/* ---- Web mobile ---- */
@media (max-width: 860px) {
  .forum-hero { padding: 22px 18px; border-radius: 20px; gap: 18px; }
  .forum-hero-stats { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .forum-hero-stats > div { min-width: 0; padding: 11px 12px; border-radius: 14px; }
  .forum-hero-stats dd { font-size: 21px; }
  .forum-hero-stats dt { font-size: 10px; letter-spacing: .08em; }
  .sous-onglets.forum-onglets { display: flex; width: 100%; }
  .forum-onglets .sous-onglet { flex: 1 0 auto; justify-content: center; padding: 9px 12px; font-size: 13.5px; }
  .forum-corps { gap: 22px; }
  .forum-widgets { flex-basis: 100%; }
  .jeu-fiche { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .forum-hero-actions .bouton { flex: 1 1 auto; }
  .forum-titre-section { font-size: 18px; }
  .forum-titre-section > .lr-icone { width: 28px; height: 28px; padding: 6px; }
  .jeux-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .jeu-carte, .jeux-grille-grande .jeu-carte { height: 170px; border-radius: 16px; }
  .jeu-carte-texte { padding: 12px; }
  .jeu-carte-texte strong { font-size: 14.5px; }
  .jeu-carte-jours { top: 8px; right: 8px; padding: 4px 9px; font-size: 11px; }

  .forum-categories .categorie-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; padding: 16px; border-radius: 18px; }
  .forum-categories .categorie-ligne-icone { width: 48px; height: 48px; font-size: 23px; border-radius: 14px; }
  .forum-categories .categorie-ligne-chiffres { grid-column: 1 / -1; }
  .forum-categories .categorie-ligne-chiffres div { flex: 1; flex-direction: row; justify-content: center; gap: 6px; min-width: 0; padding: 7px 10px; }
  .forum-categories .categorie-ligne-chiffres dd { font-size: 15px; }

  .forum-entete { padding: 18px; border-radius: 20px; }
  .forum-entete-icone { width: 52px; height: 52px; font-size: 26px; }
  .forum-entete .forum-bouton-principal { width: 100%; }

  .sujet-ligne.sujet-ligne-avec-dernier { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px 12px; padding: 14px; border-radius: 16px; }
  .sujet-ligne-avec-dernier .sujet-ligne-pastille { width: 38px; height: 38px; border-radius: 12px; }
  .sujet-ligne-avec-dernier .compteur { grid-column: 3; grid-row: 1; padding: 5px 10px; }
  .sujet-ligne-avec-dernier .sujet-ligne-dernier { grid-column: 1 / -1; flex-basis: auto; }
  .sujet-ligne-moderation { grid-column: 1 / -1; }
  .sujet-ligne-carte { padding: 14px; border-radius: 16px; }

  .sujet-entete { padding: 18px; border-radius: 20px; }
  .barre-suivi .bouton-suivre, .barre-suivi .bouton-favori { padding: 7px 12px; font-size: 13px; }
  .fil-messages .message { padding: 14px; border-radius: 18px; }
  .fil-messages .message-avatar-lien .avatar, .fil-messages .message-avatar-lien .avatar-secours { width: 38px; height: 38px; }
  .fil-messages .message-corps { font-size: 15px; }
  .bloc-reponse { padding: 16px; border-radius: 20px; }
  .bloc-reponse-actions .bloc-reponse-envoyer, .formulaire-sujet-envoyer { width: 100%; }
  .formulaire-sujet-bloc { padding: 16px; border-radius: 18px; }

  .jeu-banniere { border-radius: 20px; }
  .jeu-banniere-texte { padding: 18px; }
  .ca-r-grille { gap: 8px; }
  .ca-r-unite { padding: 12px 4px; border-radius: 16px; }
  .ca-r-unite small { letter-spacing: .06em; font-size: 10.5px; }

  .lfg-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  /* Les trois onglets tiennent sur la largeur : icônes masquées, libellés resserrés. */
  .forum-onglets .sous-onglet { flex: 1 1 auto; padding: 9px 8px; font-size: 12.5px; }
  .forum-onglets .sous-onglet .lr-icone { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .forum-hero, .jeu-carte, .forum-categories .categorie-ligne, .sujet-ligne.sujet-ligne-avec-dernier, .sujet-ligne.sujet-ligne-carte, .lfg-carte { animation: none; transition: none; }
}

/* ============================================================
   public/css/16-badge-certifie.css
   Badge « compte certifié ».
   Assemblée avec les autres fichiers de public/css/ dans l'ordre de leur numéro, et servie sous /style.css
   (voir src/web/feuille-de-style.js) : une règle d'un fichier plus loin l'emporte, à spécificité égale.
   ============================================================ */

/* ==========================================================================================================
   BADGE « COMPTE CERTIFIÉ » — REFONTE PREMIUM (28 septembre) : rosace dentelée en dégradé bleu, coche blanche,
   liseré couleur de fond quand il est posé sur un avatar. Dessin en CSS (masque SVG) : le balisage existant
   (badge-verifie.ejs, avatar.ejs, Avatar.tsx, BadgeVerifie.tsx, chat-stream.js) ne change pas.
   ========================================================================================================== */
.badge-certifie-inline, .badge-certifie-avatar {
  --rosace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 12l-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69L23 12z'/%3E%3C/svg%3E");
  isolation: isolate; background: none; border: 0; border-radius: 0; overflow: visible;
}
.badge-certifie-inline { position: relative; width: 17px; height: 17px; margin-left: 5px; vertical-align: -3px; filter: drop-shadow(0 2px 4px rgba(37, 99, 235, .45)); }
.badge-certifie-inline::before, .badge-certifie-avatar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 55%, #6366f1 100%);
  -webkit-mask: var(--rosace) center / contain no-repeat; mask: var(--rosace) center / contain no-repeat;
}
.badge-certifie-inline svg, .badge-certifie-avatar svg { position: relative; width: 9px; height: 9px; }
.badge-certifie-inline svg path, .badge-certifie-avatar svg path { stroke-width: 3.4; }
.badge-certifie-avatar { width: 18px; height: 18px; right: -3px; bottom: -3px; }
.badge-certifie-avatar::after {
  content: ""; position: absolute; inset: -2.5px; z-index: -2; background: var(--surface);
  -webkit-mask: var(--rosace) center / contain no-repeat; mask: var(--rosace) center / contain no-repeat;
}
.avatar-conteneur-grand .badge-certifie-avatar { width: 32px; height: 32px; right: -1px; bottom: -1px; }
.avatar-conteneur-grand .badge-certifie-avatar::after { inset: -4px; }
.avatar-conteneur-grand .badge-certifie-avatar svg { width: 16px; height: 16px; }
.chat-stream-messages li .badge-certifie-avatar { width: 12px; height: 12px; }
.chat-stream-messages li .badge-certifie-avatar svg { width: 7px; height: 7px; }
/* À côté d'un grand titre (profil, « Mon profil ») : le badge suit la taille du texte. */
h1 .badge-certifie-inline, .titre-page .badge-certifie-inline { width: .6em; height: .6em; margin-left: .22em; vertical-align: .02em; }
h1 .badge-certifie-inline svg, .titre-page .badge-certifie-inline svg { width: .32em; height: .32em; }

/* ============================================================
   public/css/17-administration.css
   Administration : console de navigation, tableaux, actions.
   Assemblée avec les autres fichiers de public/css/ dans l'ordre de leur numéro, et servie sous /style.css
   (voir src/web/feuille-de-style.js) : une règle d'un fichier plus loin l'emporte, à spécificité égale.
   ============================================================ */

/* ==========================================================================================================
   ADMINISTRATION — REFONTE PREMIUM (28 septembre) : console de navigation (admin-nav.ejs, injectée par header.ejs
   sur toute page /admin…), pastilles d'icônes par rubrique (admin-icone.ejs), bandeau et compteurs de /admin, et
   une couche commune (titres, tableaux, tuiles de stats, cartes, formulaires, étiquettes) limitée à body.page-admin :
   les mêmes classes ailleurs sur le site ne bougent pas.
   ========================================================================================================== */
.admin-icone {
  flex: none; width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 11px; color: #fff;
  background: linear-gradient(135deg, hsl(var(--teinte, 262) 78% 60%), hsl(calc(var(--teinte, 262) + 32) 80% 44%));
  box-shadow: 0 8px 18px -10px hsl(var(--teinte, 262) 85% 50% / .9), inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.admin-icone .lr-icone { width: 17px; height: 17px; }

/* ---- Console ---- */
.admin-console {
  position: relative; overflow: hidden; margin: 0 0 22px; padding: 14px 16px 16px; border-radius: 22px; border: 1px solid var(--bordure);
  background: radial-gradient(60% 140% at 0% 0%, rgba(var(--violet-rgb), .16), transparent 60%), rgba(var(--surface-rgb), .82);
  box-shadow: 0 20px 50px -36px rgba(var(--violet-rgb), .7), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.admin-console-tete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin: 0 2px 12px; }
.admin-console-marque { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--texte); }
.admin-console-marque .lr-icone { width: 16px; height: 16px; color: #22d3ee; }
.admin-console-qui { font-size: 12.5px; color: var(--texte-doux); }
.admin-console-rail { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.admin-console-groupe { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.admin-console-groupe-titre { margin-left: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.admin-console-liens { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-console-lien {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 13px 4px 4px; border-radius: 13px; border: 1px solid var(--bordure);
  background: rgba(var(--fond-rgb), .35); color: var(--texte); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.admin-console-lien .admin-icone { width: 28px; height: 28px; border-radius: 9px; }
.admin-console-lien .admin-icone .lr-icone { width: 15px; height: 15px; }
.admin-console-lien:hover { color: var(--texte); text-decoration: none; border-color: rgba(var(--violet-rgb), .5); transform: translateY(-1px); }
.admin-console-lien.actif { border-color: rgba(var(--violet-rgb), .7); background: rgba(var(--violet-rgb), .16); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), .12); }

/* ---- Titres ---- */
body.page-admin .titre-page.admin-titre { display: flex; align-items: center; gap: 14px; font-size: clamp(24px, 3.4vw, 34px); font-weight: 900; letter-spacing: -.02em; }
body.page-admin .titre-page.admin-titre .admin-icone { width: 46px; height: 46px; border-radius: 15px; }
body.page-admin .titre-page.admin-titre .admin-icone .lr-icone { width: 22px; height: 22px; }
body.page-admin .titre-section { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 34px 0 14px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
body.page-admin .titre-section:not(.admin-titre-section)::before {
  content: ""; width: 4px; height: 20px; border-radius: 4px; background: linear-gradient(180deg, #8b5cf6, #d946ef); flex: none;
}
body.page-admin .titre-section .admin-icone { width: 32px; height: 32px; border-radius: 10px; }
body.page-admin .titre-section .admin-icone .lr-icone { width: 16px; height: 16px; }

/* ---- Bandeau de /admin ---- */
.admin-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 22px 28px; align-items: center;
  margin: 0 0 18px; padding: 26px 28px; border-radius: 24px; border: 1px solid var(--bordure);
  background: radial-gradient(70% 140% at 0% 0%, rgba(34, 211, 238, .14), transparent 60%), radial-gradient(60% 120% at 100% 100%, rgba(var(--violet-rgb), .18), transparent 65%), rgba(var(--surface-rgb), .82);
  box-shadow: 0 24px 60px -36px rgba(var(--violet-rgb), .7);
}
.admin-hero .titre-page { margin: 10px 0 8px; font-size: clamp(28px, 4vw, 40px); font-weight: 900; letter-spacing: -.02em; }
.admin-hero .sous-titre { margin: 0; font-size: 14.5px; line-height: 1.55; }
.admin-hero-sur {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: #22d3ee; background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .3);
}
.admin-hero-sur .lr-icone { width: 15px; height: 15px; }
.admin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.admin-kpi {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--bordure);
  background: rgba(var(--surface-rgb), .7); color: var(--texte-doux); font-size: 12.5px; line-height: 1.3; text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.admin-kpi:hover { color: var(--texte-doux); text-decoration: none; transform: translateY(-2px); border-color: hsl(var(--teinte) 80% 60% / .6); }
.admin-kpi strong { display: block; font-size: 22px; font-weight: 900; color: var(--texte); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.admin-kpi-alerte { border-color: hsl(var(--teinte) 80% 60% / .55); background: linear-gradient(135deg, hsl(var(--teinte) 80% 60% / .14), transparent 70%), rgba(var(--surface-rgb), .75); }
.admin-kpi-alerte strong { color: hsl(var(--teinte) 85% 66%); }
.admin-alerte { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 12px 16px; border-radius: 16px; color: var(--texte); background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .4); }
.admin-alerte > .lr-icone { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #f59e0b; }

/* ---- Couche commune des pages d'administration ---- */
body.page-admin .fil { margin-bottom: 14px; }
body.page-admin .table-wrap {
  border-radius: 18px; background: rgba(var(--surface-rgb), .82); box-shadow: 0 14px 34px -28px rgba(0, 0, 0, .85); margin-bottom: 16px;
  scrollbar-width: thin;
}
body.page-admin .table-admin { font-size: 13.5px; }
body.page-admin .table-admin thead th {
  position: sticky; top: 0; z-index: 1; padding: 11px 14px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(var(--violet-rgb), .08); color: var(--texte-doux); border-bottom: 1px solid var(--bordure);
}
body.page-admin .table-admin td { padding: 11px 14px; }
body.page-admin .table-admin tbody tr { transition: background .15s ease; }
body.page-admin .table-admin tbody tr:hover td { background: rgba(var(--violet-rgb), .06); }
body.page-admin .table-admin a { font-weight: 700; }
body.page-admin .stats-grille { gap: 12px; }
body.page-admin .stat-tuile {
  position: relative; overflow: hidden; gap: 4px; padding: 16px 18px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(var(--violet-rgb), .1), transparent 55%), rgba(var(--surface-rgb), .85);
  box-shadow: 0 14px 34px -28px rgba(0, 0, 0, .85);
}
body.page-admin .stat-tuile::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: linear-gradient(90deg, #8b5cf6, #d946ef, transparent); opacity: .7; }
body.page-admin .stat-libelle { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
body.page-admin .stat-valeur { font-size: 30px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body.page-admin .carte {
  border-radius: 20px; border: 1px solid var(--bordure); background: rgba(var(--surface-rgb), .85); box-shadow: 0 14px 34px -28px rgba(0, 0, 0, .85);
}
body.page-admin .formulaire { border-radius: 20px; box-shadow: 0 14px 34px -28px rgba(0, 0, 0, .85); }
body.page-admin input[type="text"], body.page-admin input[type="number"], body.page-admin input[type="search"], body.page-admin input[type="url"],
body.page-admin input[type="email"], body.page-admin input[type="datetime-local"], body.page-admin input[type="date"], body.page-admin select, body.page-admin textarea {
  border-radius: 11px; transition: border-color .2s ease, box-shadow .2s ease;
}
body.page-admin input:focus-visible, body.page-admin select:focus-visible, body.page-admin textarea:focus-visible {
  outline: none; border-color: rgba(var(--violet-rgb), .75); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), .18);
}
body.page-admin .bouton { border-radius: 11px; font-weight: 700; }
body.page-admin .bouton:not(.bouton-secondaire):not(.bouton-danger):not(:disabled) {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed); box-shadow: 0 8px 18px -12px rgba(124, 58, 237, .95), inset 0 1px 0 rgba(255, 255, 255, .18);
}
body.page-admin .bouton:not(.bouton-secondaire):not(.bouton-danger):not(:disabled):hover { filter: brightness(1.1); }
body.page-admin .bouton-danger { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; }
body.page-admin .etiquette { padding: 2px 9px; border-radius: 999px; font-weight: 700; background: rgba(var(--fond-rgb), .35); }
body.page-admin .etiquette-admin { background: rgba(var(--violet-rgb), .14); }
body.page-admin .etiquette-banni { background: rgba(239, 68, 68, .12); }
body.page-admin .etiquette.lien-danger { color: #fb7185; border-color: rgba(244, 63, 94, .45); background: rgba(244, 63, 94, .1); }
body.page-admin .vide { border-radius: 18px; }
body.page-admin details.form-bannir[open] { padding: 10px 12px; border-radius: 14px; border: 1px solid var(--bordure); background: rgba(var(--fond-rgb), .35); }
body.page-admin [data-testid="admin-sections-developpement"] .categorie-ligne {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; padding: 12px 16px;
  border-radius: 16px; background: rgba(var(--surface-rgb), .82);
}
body.page-admin [data-testid="admin-sections-developpement"] .categorie-ligne-principal strong { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; font-size: 15px; }
body.page-admin [data-testid="admin-sections-developpement"] .bouton { margin: 0; }

/* ---- Web mobile ---- */
@media (max-width: 860px) {
  .admin-hero { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; border-radius: 20px; }
  .admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-kpi { padding: 10px 12px; gap: 10px; }
  .admin-kpi .admin-icone { width: 30px; height: 30px; }
  .admin-kpi strong { font-size: 19px; }
  .admin-console { padding: 12px; border-radius: 18px; }
  .admin-console-rail { flex-direction: column; flex-wrap: nowrap; gap: 12px; }
  .admin-console-liens { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px 2px; }
  .admin-console-liens::-webkit-scrollbar { display: none; }
  body.page-admin .titre-page.admin-titre .admin-icone { width: 40px; height: 40px; border-radius: 13px; }
}
@media (max-width: 420px) {
  .admin-kpis { grid-template-columns: minmax(0, 1fr); }
}
body.page-admin .stat-tuile { justify-content: space-between; }
/* Thème clair : le cyan de l'administration, trop pâle sur fond blanc, passe en cyan profond. */
:root[data-theme="clair"] .admin-hero-sur, :root[data-theme="clair"] .admin-console-marque .lr-icone { color: #0e7490; }
:root[data-theme="clair"] .admin-hero-sur { background: rgba(8, 145, 178, .1); border-color: rgba(8, 145, 178, .35); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .admin-hero-sur, :root:not([data-theme]) .admin-console-marque .lr-icone { color: #0e7490; }
  :root:not([data-theme]) .admin-hero-sur { background: rgba(8, 145, 178, .1); border-color: rgba(8, 145, 178, .35); }
}
.admin-archives { margin-top: 12px; }
.admin-archives > summary { cursor: pointer; font-weight: 700; padding: 6px 0; }

/* ---- Messages bloqués en direct : dossiers streamer > live > messages ---- */
.admin-dossier, .admin-sous-dossier { margin: 6px 0; border: 1px solid var(--bordure); border-radius: 10px; background: rgba(var(--surface-rgb), .5); }
.admin-sous-dossier { margin: 8px 0 8px 14px; background: transparent; }
.admin-dossier > summary, .admin-sous-dossier > summary { cursor: pointer; padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.admin-dossier > summary:hover, .admin-sous-dossier > summary:hover { background: var(--surface-claire); }
.admin-dossier-icone { font-size: 1.1em; }
.admin-dossier-contenu { padding: 4px 12px 12px; }
.admin-dossier-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 10px; }
/* Tableau des messages d'un live (6 colonnes : utilisateur, message, raison, heure, date, action). Largeurs propres : voir le piège
   décrit dans tests/admin/tables-largeur.spec.ts (une classe réutilisée avec un autre nombre de colonnes écrase la dernière). */
.table-alertes-dossier { table-layout: fixed; min-width: 760px; }
.table-alertes-dossier th, .table-alertes-dossier td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.table-alertes-dossier th:nth-child(1), .table-alertes-dossier td:nth-child(1) { width: 16%; }
.table-alertes-dossier th:nth-child(2), .table-alertes-dossier td:nth-child(2) { width: 30%; }
.table-alertes-dossier th:nth-child(3), .table-alertes-dossier td:nth-child(3) { width: 16%; }
.table-alertes-dossier th:nth-child(4), .table-alertes-dossier td:nth-child(4) { width: 10%; }
.table-alertes-dossier th:nth-child(5), .table-alertes-dossier td:nth-child(5) { width: 14%; }
.table-alertes-dossier th:nth-child(6), .table-alertes-dossier td:nth-child(6) { width: 14%; }

/* ============================================================
   public/css/18-connexion-inscription.css
   Connexion et inscription : vitrine de marque, cartes de formulaire, étapes.
   Assemblée avec les autres fichiers de public/css/ dans l'ordre de leur numéro, et servie sous /style.css
   (voir src/web/feuille-de-style.js) : une règle d'un fichier plus loin l'emporte, à spécificité égale.
   ============================================================ */

/* ============================================================
   Connexion / inscription premium (30 septembre) — views/connexion.ejs, inscription.ejs, auth-vitrine.ejs.
   Vitrine de marque (toujours sombre, comme le Hero du Live) + carte de formulaire aux couleurs du thème.
   ============================================================ */
.auth {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); max-width: 1080px; margin: 12px auto 40px;
  border-radius: 24px; overflow: hidden; background: var(--surface); border: 1px solid var(--lr-lisere);
  box-shadow: var(--lr-ombre); animation: le-repere-fondu-monte var(--duree-normale) var(--ease-sortie) both;
}
.auth-inscription { max-width: 1180px; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }

/* Vitrine */
.auth-vitrine {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: 40px 36px;
  color: #f0edf9; background: radial-gradient(120% 80% at 0% 0%, #2a1452 0%, #120d22 55%, #0b0814 100%);
}
.auth-vitrine::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: radial-gradient(90% 70% at 30% 20%, #000 20%, transparent 75%);
}
.auth-vitrine-halo { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.auth-vitrine-halo-1 { width: 320px; height: 320px; top: -110px; right: -120px; background: #d946ef; animation: auth-flotte 12s ease-in-out infinite alternate; }
.auth-vitrine-halo-2 { width: 280px; height: 280px; bottom: -120px; left: -80px; background: #7c3aed; animation: auth-flotte 14s ease-in-out infinite alternate-reverse; }
@keyframes auth-flotte { from { transform: translate(0, 0) scale(1); } to { transform: translate(-30px, 24px) scale(1.12); } }
.auth-marque { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-weight: 800; font-size: 19px; }
.auth-marque img { border-radius: 12px; box-shadow: 0 10px 26px -10px rgba(217, 70, 239, .8); }
.auth-marque small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(240, 237, 249, .6); }
.auth-marque:hover { text-decoration: none; color: #fff; }
.auth-accroche {
  margin: 18px 0 0; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; font-weight: 900; letter-spacing: -.02em;
  background: linear-gradient(120deg, #fff 30%, #e9d5ff 60%, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-vitrine-texte { margin: 0; color: rgba(240, 237, 249, .75); font-size: 15.5px; line-height: 1.55; max-width: 40ch; }
.auth-atouts { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 10px; }
.auth-atouts li {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 14px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(6px);
}
.auth-atouts li > span:last-child { display: flex; flex-direction: column; font-size: 13.5px; color: rgba(240, 237, 249, .7); line-height: 1.35; }
.auth-atouts strong { color: #fff; font-size: 14.5px; }
.auth-atout-icone { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--lr-degrade); color: #fff; box-shadow: var(--lr-halo); }
.auth-atout-icone .lr-icone { width: 18px; height: 18px; }

/* Carte */
.auth-carte { padding: 40px clamp(22px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.auth-entete { margin-bottom: 18px; }
.auth-pastille { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--lr-degrade); color: #fff; box-shadow: var(--lr-halo); margin-bottom: 14px; }
.auth-pastille .lr-icone { width: 22px; height: 22px; }
.auth .auth-titre { margin: 0; font-size: clamp(26px, 2.6vw, 32px); font-weight: 900; letter-spacing: -.02em; }
.auth-sous-titre { margin: 6px 0 0; color: var(--texte-doux); font-size: 15px; }
.auth .auth-message { margin: 0 0 14px; border-radius: 12px; }
.auth .note.auth-message { padding: 10px 14px; background: rgba(var(--violet-rgb), .1); border: 1px solid rgba(var(--violet-rgb), .3); color: var(--texte); }
.auth .erreur.auth-message { border: 1px solid rgba(175, 11, 18, .45); border-left-width: 3px; }

.auth .auth-formulaire { max-width: none; padding: 0; background: none; border: 0; box-shadow: none; gap: 16px; animation: none; }
.auth-champ { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.auth-champ label, .auth-libelle-ligne label { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--texte); }
.auth-libelle-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.auth-lien-discret { font-size: 13px; font-weight: 600; }
.auth-saisie {
  position: relative; display: flex; align-items: center; border-radius: 12px; background: rgba(var(--fond-rgb), .55);
  border: 1px solid var(--bordure); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.auth-saisie:hover { border-color: rgba(var(--violet-rgb), .45); }
.auth-saisie:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(var(--violet-rgb), .16); background: rgba(var(--fond-rgb), .75); }
.auth-saisie-icone, .auth-saisie-prefixe { flex: none; display: grid; place-items: center; width: 44px; color: var(--texte-doux); }
.auth-saisie-icone .lr-icone { width: 18px; height: 18px; }
.auth-saisie-prefixe { font-weight: 800; font-size: 17px; color: var(--violet); }
.auth-saisie:focus-within .auth-saisie-icone { color: var(--violet); }
.auth .auth-saisie input {
  flex: 1; min-width: 0; width: auto; height: 48px; padding: 0 12px 0 0; border: 0; background: none; box-shadow: none; outline: none; font-size: 15.5px;
}
.auth .auth-saisie input:focus, .auth .auth-saisie input:focus-visible { outline: none; border: 0; }
.auth .auth-saisie input[type="date"] { padding-right: 12px; color-scheme: dark light; }
.auth-oeil {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: 2px; padding: 0; border: 0; border-radius: 10px;
  background: none; color: var(--texte-doux); cursor: pointer;
}
.auth-oeil:hover, .auth-oeil.actif { color: var(--violet); background: rgba(var(--violet-rgb), .1); }
.auth-oeil .lr-icone { width: 18px; height: 18px; }
.auth .aide { margin: 0; font-size: 13px; line-height: 1.45; }
.auth-majuscules { margin: 0; font-size: 12.5px; font-weight: 700; color: #f59e0b; }
.auth-apercu-identifiant { font-weight: 800; color: var(--violet); }

.auth .auth-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; align-self: stretch; margin-top: 6px; height: 50px; padding: 0 22px;
  border-radius: 14px; font-size: 16px; font-weight: 800; color: #fff; background: var(--lr-degrade); box-shadow: var(--lr-halo);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.auth .auth-bouton:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.auth .auth-bouton:active:not(:disabled) { transform: translateY(0) scale(.99); }
.auth .auth-bouton:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; filter: grayscale(.3); }
.auth .auth-bouton .lr-icone { width: 18px; height: 18px; transition: transform .15s ease; }
.auth .auth-bouton:hover:not(:disabled) .lr-icone { transform: translateX(3px); }
.auth-bascule { margin: 22px 0 0; text-align: center; color: var(--texte-doux); font-size: 14.5px; }
.auth-bascule a { font-weight: 800; }
.auth-rassurance { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; font-size: 12.5px; color: var(--texte-doux); text-align: center; }
.auth-rassurance .lr-icone { width: 14px; height: 14px; color: #22c55e; flex: none; }

/* Inscription : étapes, jauge, règlement */
.auth-etape { gap: 14px; padding: 18px; border-radius: 16px; background: rgba(var(--fond-rgb), .28); border: 1px solid var(--lr-lisere); }
.auth-etape legend { float: left; width: 100%; display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 15px; font-weight: 800; color: var(--texte); }
.auth-etape legend + * { clear: both; }
.auth-etape-numero { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 13px; font-weight: 900; color: #fff; background: var(--lr-degrade); }
.auth-grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.auth-force { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.auth-force span { height: 4px; border-radius: 4px; background: var(--bordure); transition: background .2s ease; }
.auth-force[data-niveau="1"] span:nth-child(-n+1) { background: #ef4444; }
.auth-force[data-niveau="2"] span:nth-child(-n+2) { background: #f59e0b; }
.auth-force[data-niveau="3"] span:nth-child(-n+3) { background: #84cc16; }
.auth-force[data-niveau="4"] span { background: #22c55e; }
.auth .bloc-reglement.auth-reglement { margin: 0; max-height: 260px; border-radius: 12px; background: rgba(var(--surface-rgb), .7); border-color: var(--bordure); }
.auth .bloc-reglement.auth-reglement:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.auth .aide-reglement { margin: 0; }
.auth-lecture { height: 6px; border-radius: 6px; background: var(--bordure); overflow: hidden; }
.auth-lecture span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--lr-degrade); transition: width .15s linear; }
.auth-lecture-libelle { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--texte-doux); }
.auth-lecture-libelle.fini { color: #22c55e; }
.auth-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.auth-actions .auth-bouton { flex: 1 1 260px; align-self: auto; margin-top: 0; }
.auth .auth-bouton-refus { margin-top: 0; height: 50px; border-radius: 14px; padding: 0 20px; background: none; color: var(--alerte); border: 1px solid rgba(175, 11, 18, .5); }
.auth .auth-bouton-refus:hover { background: rgba(175, 11, 18, .12); color: var(--alerte); }
.auth-visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tablette et mobile : la vitrine devient un bandeau compact au-dessus du formulaire. */
@media (max-width: 900px) {
  .auth, .auth-inscription { grid-template-columns: minmax(0, 1fr); margin-top: 0; border-radius: 20px; }
  .auth-vitrine { padding: 24px 22px; gap: 10px; }
  .auth-accroche { margin-top: 6px; font-size: 26px; }
  .auth-vitrine-texte { font-size: 14.5px; }
  .auth-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
  .auth-atouts li { padding: 8px 10px; }
  .auth-atouts li > span:last-child span, .auth-atouts li > span:last-child { font-size: 12.5px; }
  .auth-carte { padding: 26px 20px 30px; }
}
@media (max-width: 560px) {
  .auth, .auth-inscription { border-radius: 0; margin: -8px -16px 24px; border-left: 0; border-right: 0; box-shadow: none; }
  .auth-atouts { display: none; }
  .auth-grille-2 { grid-template-columns: minmax(0, 1fr); }
  .auth-etape { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth, .auth-vitrine-halo { animation: none; }
}
.auth-inscription .auth-atouts { margin-top: 14px; }
@media (min-width: 901px) { .auth-inscription .auth-vitrine { justify-content: flex-start; } .auth-inscription .auth-vitrine > .auth-marque, .auth-inscription .auth-vitrine > .auth-accroche { position: relative; } }

/* Pages secondaires du parcours (30 septembre) : mot de passe oublié / nouveau, confirmation d'email, double
   authentification, vérification d'âge — même design, vitrine compacte. */
.auth-simple { max-width: 980px; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.auth-vitrine-compacte { justify-content: center; }
.auth-vitrine-compacte .auth-marque { position: absolute; top: 36px; left: 36px; }
.auth-simple .auth-carte { min-height: 460px; }
.auth-pastille-succes { background: linear-gradient(135deg, #22c55e, #14b8a6); box-shadow: 0 10px 26px -10px rgba(34, 197, 94, .75); }
.auth-pastille-alerte { background: linear-gradient(135deg, #f59e0b, #ef4444); box-shadow: 0 10px 26px -10px rgba(245, 158, 11, .75); }
.auth .auth-aide-bloc { margin: 0 0 18px; }
.auth a.auth-bouton { text-decoration: none; }
.auth a.auth-bouton:hover { text-decoration: none; }
.auth .auth-bouton.auth-bouton-secondaire { background: rgba(var(--violet-rgb), .12); color: var(--texte); border: 1px solid rgba(var(--violet-rgb), .35); box-shadow: none; }
.auth .auth-bouton.auth-bouton-secondaire:hover { background: rgba(var(--violet-rgb), .2); color: var(--texte); }
.auth-etapes-liste { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 10px; }
.auth-etapes-liste li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(var(--fond-rgb), .35); border: 1px solid var(--lr-lisere); font-size: 14.5px; }
.auth-etapes-liste li > span { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 13px; font-weight: 900; color: #fff; background: var(--lr-degrade); }
.auth .auth-saisie-code input { height: 60px; padding: 0 12px; text-align: center; font-size: 26px; font-weight: 800; letter-spacing: .35em; font-variant-numeric: tabular-nums; }
.auth .auth-confidentialite { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; color: var(--texte); background: rgba(34, 197, 94, .08); border: 1px solid rgba(34, 197, 94, .3); }
.auth-confidentialite-icone { flex: none; color: #22c55e; margin-top: 1px; }
.auth-confidentialite-icone .lr-icone { width: 18px; height: 18px; }
.auth-zone-photo {
  display: flex; align-items: center; gap: 16px; margin: 0; padding: 18px; border-radius: 16px; cursor: pointer;
  border: 2px dashed rgba(var(--violet-rgb), .45); background: rgba(var(--violet-rgb), .06); transition: border-color .15s ease, background .15s ease;
}
.auth-zone-photo:hover, .auth-zone-photo:focus-within { border-color: var(--violet); background: rgba(var(--violet-rgb), .12); }
.auth-zone-apercu { flex: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: var(--lr-degrade); box-shadow: var(--lr-halo); }
.auth-zone-apercu:empty::before { content: ""; width: 34px; height: 34px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center / contain no-repeat; }
.auth-zone-apercu img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.auth-zone-texte { display: flex; flex-direction: column; gap: 4px; }
.auth-zone-texte strong { font-size: 15.5px; color: var(--texte); }
.auth-zone-texte small { font-size: 13px; color: var(--texte-doux); }
@media (max-width: 900px) {
  .auth-simple { grid-template-columns: minmax(0, 1fr); }
  .auth-vitrine-compacte .auth-marque { position: static; }
  .auth-simple .auth-carte { min-height: 0; }
}

/* ============================================================
   public/css/19-pages.css
   Pages refondues (kit premium .pg-*) : en-têtes, formulaires, accordéons, tableaux, sections, sommaires.
   Assemblée avec les autres fichiers de public/css/ dans l'ordre de leur numéro, et servie sous /style.css
   (voir src/web/feuille-de-style.js) : une règle d'un fichier plus loin l'emporte, à spécificité égale.
   ============================================================ */

/* ==========================================================================================================
   PAGES — REFONTE PREMIUM (30 septembre) : même langage que la refonte du forum, pour toutes les pages restées
   à l'ancien style (aide, profil et réglages, social, Live secondaires, Arena secondaires, pages d'information).
   - .pg-hero (views/entete-page.ejs) : bandeau en verre teinté selon la rubrique du menu (--teinte, même valeur
     que .nav-teinte-*), emblème d'icône, chiffres optionnels.
   - .pg-carte : bloc en carte (sections de réglages, contenus) ; .pg-pastille : pastille d'icône dégradée.
   - .pg-form : formulaire premium (champs arrondis, listes déroulantes dessinées, bouton de fichier soigné).
   - details.bloc-cle, .pg-tableau-zone, .pg-chiffres : accordéons, tableaux et tuiles de chiffres.
   ========================================================================================================== */
.pg-hero {
  --teinte: 262;
  background:
    radial-gradient(70% 140% at 0% 0%, hsl(var(--teinte) 80% 60% / .22), transparent 60%),
    radial-gradient(60% 120% at 100% 100%, hsl(calc(var(--teinte) + 40) 85% 58% / .14), transparent 65%),
    rgba(var(--surface-rgb), .78);
  box-shadow: 0 24px 60px -34px hsl(var(--teinte) 80% 55% / .6), inset 0 1px 0 rgba(255, 255, 255, .05);
  align-items: center;
}
.pg-hero::after { background: radial-gradient(circle, hsl(var(--teinte) 85% 62% / .28), transparent 70%); }
.pg-hero .forum-sur-titre { color: hsl(var(--teinte) 85% 72%); background: hsl(var(--teinte) 80% 60% / .12); border-color: hsl(var(--teinte) 80% 60% / .3); }
:root[data-theme="clair"] .pg-hero .forum-sur-titre { color: hsl(var(--teinte) 70% 40%); }
@media (prefers-color-scheme: light) { :root:not([data-theme="sombre"]) .pg-hero .forum-sur-titre { color: hsl(var(--teinte) 70% 40%); } }
.pg-hero .sous-titre { max-width: 68ch; }
.pg-hero .sous-titre + .sous-titre { margin-top: 8px; }
.pg-hero-embleme {
  flex: none; position: relative; width: 92px; height: 92px; display: grid; place-items: center; border-radius: 28px; color: #fff;
  background: linear-gradient(135deg, hsl(var(--teinte) 78% 62%), hsl(calc(var(--teinte) + 36) 82% 44%));
  box-shadow: 0 22px 44px -18px hsl(var(--teinte) 85% 50% / .95), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .12);
  transform: rotate(-6deg); animation: pg-flotte 6s ease-in-out infinite;
}
.pg-hero-embleme::before { content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: 36px; background: radial-gradient(circle, hsl(var(--teinte) 85% 60% / .35), transparent 70%); filter: blur(8px); }
.pg-hero-embleme .lr-icone { width: 42px; height: 42px; }
@keyframes pg-flotte { 50% { transform: rotate(-3deg) translateY(-6px); } }
.pg-hero .forum-hero-stats dd { background: linear-gradient(135deg, var(--texte), hsl(var(--teinte) 85% 66%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 640px) {
  .pg-hero-embleme { display: none; }
  .pg-hero { padding: 22px 20px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { .pg-hero-embleme, .pg-carte { animation: none; } }

.pg-carte {
  --teinte: 262;
  position: relative; margin: 0 0 18px; padding: 22px 24px; border-radius: 22px; border: 1px solid var(--bordure);
  background: rgba(var(--surface-rgb), .86); box-shadow: 0 16px 40px -30px rgba(0, 0, 0, .85);
  animation: le-repere-fondu-monte var(--duree-normale) var(--ease-sortie) both;
}
.pg-carte > :last-child { margin-bottom: 0; }
.pg-carte > h2, .pg-carte > h3, .pg-carte-titre {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--texte);
}
.pg-carte > h2.titre-section { margin-top: 0; }
.pg-carte p { line-height: 1.6; }
.pg-carte ul, .pg-carte ol { line-height: 1.6; padding-left: 20px; }
.pg-carte li + li { margin-top: 4px; }
.pg-carte-danger { border-color: rgba(239, 68, 68, .4); background: linear-gradient(135deg, rgba(239, 68, 68, .08), transparent 60%), rgba(var(--surface-rgb), .86); }
.pg-carte-accent { border-color: hsl(var(--teinte) 80% 60% / .45); background: linear-gradient(135deg, hsl(var(--teinte) 80% 60% / .12), transparent 65%), rgba(var(--surface-rgb), .86); }
.pg-pastille {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: #fff;
  background: linear-gradient(135deg, hsl(var(--teinte, 262) 78% 60%), hsl(calc(var(--teinte, 262) + 32) 80% 44%));
  box-shadow: 0 8px 18px -10px hsl(var(--teinte, 262) 85% 50% / .9), inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.pg-pastille .lr-icone { width: 18px; height: 18px; }
.pg-pastille-danger { background: linear-gradient(135deg, #f87171, #b91c1c); box-shadow: 0 8px 18px -10px rgba(220, 38, 38, .9); }
.pg-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 0 0 18px; }
.pg-grille > .pg-carte { margin: 0; }
.pg-section-titre { display: flex; align-items: center; gap: 12px; margin: 30px 0 14px; font-size: 19px; font-weight: 900; letter-spacing: -.01em; }
.pg-section-titre::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--bordure), transparent); }

/* Formulaires premium */
.formulaire.pg-form { gap: 8px; max-width: 640px; padding: 24px; border-radius: 22px; background: rgba(var(--surface-rgb), .86); box-shadow: 0 16px 40px -30px rgba(0, 0, 0, .85); }
.pg-carte .formulaire, .pg-carte .formulaire.pg-form { max-width: none; padding: 0; border: 0; background: none; box-shadow: none; }
.pg-form label:not(.btn-fichier):not(.pg-choix) { font-size: 13.5px; font-weight: 700; color: var(--texte); margin-top: 10px; }
.pg-form label:first-of-type { margin-top: 0; }
.pg-form input[type="text"], .pg-form input[type="url"], .pg-form input[type="email"], .pg-form input[type="search"], .pg-form input[type="password"],
.pg-form input[type="number"], .pg-form input[type="time"], .pg-form input[type="date"], .pg-form input[type="datetime-local"], .pg-form input:not([type]),
.pg-form textarea, .pg-form select {
  width: 100%; border-radius: 12px; padding: 11px 14px; font-size: 14.5px; border: 1px solid var(--bordure); background-color: rgba(var(--fond-rgb), .7);
  color: var(--texte); transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.pg-form textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.pg-form select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c93b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.pg-form input:focus, .pg-form textarea:focus, .pg-form select:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(var(--violet-rgb), .15); outline: none; }
.pg-form .btn-fichier, .pg-fichier {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 10px; padding: 10px 16px; border-radius: 12px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; color: var(--texte); background: rgba(var(--violet-rgb), .08); border: 1px dashed rgba(var(--violet-rgb), .5);
  transition: background .2s, border-color .2s;
}
.pg-form .btn-fichier:hover, .pg-fichier:hover { background: rgba(var(--violet-rgb), .16); border-color: var(--violet); color: var(--texte); }
.pg-form button[type="submit"], .pg-envoyer {
  align-self: flex-start; margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 14px; font-weight: 800;
  color: #fff; background: linear-gradient(135deg, #8b5cf6, #d946ef); border: 0; box-shadow: 0 12px 26px -14px rgba(217, 70, 239, .95), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .2s ease, filter .2s ease;
}
.pg-form button[type="submit"]:hover:not(:disabled), .pg-envoyer:hover { transform: translateY(-1px); filter: brightness(1.08); color: #fff; }
.pg-form button[type="submit"]:disabled { opacity: .5; cursor: not-allowed; }
.pg-form button[type="submit"].bouton-danger { background: linear-gradient(135deg, #f87171, #b91c1c); box-shadow: 0 12px 26px -14px rgba(220, 38, 38, .95); }
.pg-form .aide { font-size: 12.5px; }

/* Accordéons (Aide, applications) */
body:not(.page-admin) details.bloc-cle {
  margin: 0 0 12px; padding: 0; border-radius: 18px; overflow: hidden; background: rgba(var(--surface-rgb), .86);
  box-shadow: 0 12px 30px -26px rgba(0, 0, 0, .85); transition: border-color .2s, box-shadow .2s;
}
body:not(.page-admin) details.bloc-cle[open] { border-color: rgba(var(--violet-rgb), .45); box-shadow: 0 18px 40px -28px rgba(var(--violet-rgb), .6); }
body:not(.page-admin) details.bloc-cle > summary {
  list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 20px; font-size: 15.5px; font-weight: 800; color: var(--texte); transition: background .2s;
}
body:not(.page-admin) details.bloc-cle > summary::-webkit-details-marker { display: none; }
body:not(.page-admin) details.bloc-cle > summary::after {
  content: ""; margin-left: auto; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--texte-doux); border-bottom: 2px solid var(--texte-doux);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s ease;
}
body:not(.page-admin) details.bloc-cle[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
body:not(.page-admin) details.bloc-cle > summary:hover { background: rgba(var(--violet-rgb), .06); }
body:not(.page-admin) details.bloc-cle > :not(summary) { margin-left: 20px; margin-right: 20px; }
body:not(.page-admin) details.bloc-cle > :last-child { margin-bottom: 18px; }
body:not(.page-admin) details.bloc-cle .aide { max-width: 72ch; line-height: 1.65; font-size: 14.5px; }
body:not(.page-admin) section.bloc-cle { border-radius: 18px; padding: 18px 22px; }

/* Tableaux */
.pg-tableau-zone { overflow-x: auto; margin: 0 0 18px; border-radius: 18px; border: 1px solid var(--bordure); background: rgba(var(--surface-rgb), .86); box-shadow: 0 14px 34px -28px rgba(0, 0, 0, .85); }
.pg-tableau-zone table { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-size: 14px; }
.pg-tableau-zone th { padding: 12px 14px; text-align: left; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); background: rgba(var(--violet-rgb), .06); border: 0; border-bottom: 1px solid var(--bordure); }
.pg-tableau-zone td { padding: 12px 14px; border: 0; border-bottom: 1px solid var(--bordure); }
.pg-tableau-zone tr:last-child td { border-bottom: 0; }
.pg-tableau-zone tbody tr { transition: background .15s; }
.pg-tableau-zone tbody tr:hover { background: rgba(var(--violet-rgb), .05); }

/* Tuiles de chiffres */
.pg-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0 0 18px; }
.pg-chiffre { --teinte: 262; position: relative; overflow: hidden; padding: 20px 22px; border-radius: 20px; border: 1px solid var(--bordure); background: rgba(var(--surface-rgb), .86); box-shadow: 0 14px 34px -28px rgba(0, 0, 0, .85); }
.pg-chiffre::before { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, hsl(var(--teinte) 85% 60% / .22), transparent 70%); pointer-events: none; }
.pg-chiffre strong { display: block; font-size: 34px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--texte), hsl(var(--teinte) 85% 66%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg-chiffre span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--texte-doux); }

/* Message d'état (envoyé, confirmé) en carte */
.pg-etat { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: 18px; border: 1px solid rgba(34, 197, 94, .4); background: linear-gradient(135deg, rgba(34, 197, 94, .1), transparent 70%), rgba(var(--surface-rgb), .86); margin: 0 0 16px; }
.pg-etat p { margin: 0; }
.pg-etat p + p { margin-top: 6px; }
.pg-etat .pg-pastille { background: linear-gradient(135deg, #4ade80, #15803d); box-shadow: 0 8px 18px -10px rgba(22, 163, 74, .9); }

/* Pages d'information (refonte premium du 30 septembre) */
.pg-prose { padding: 28px 32px; font-size: 15px; line-height: 1.7; }
.pg-prose > h2, .pg-carte.pg-prose h2 {
  display: flex; align-items: center; gap: 12px; margin: 30px 0 10px; padding-top: 22px; border-top: 1px solid var(--bordure); font-size: 18px; font-weight: 800;
}
.pg-prose > h2:first-of-type { margin-top: 18px; }
.pg-prose > h2::before { content: ""; flex: none; width: 5px; height: 1.1em; border-radius: 3px; background: linear-gradient(180deg, #8b5cf6, #d946ef); box-shadow: 0 0 10px rgba(var(--violet-rgb), .5); }
.pg-prose ul { padding-left: 22px; }
.pg-prose li::marker { color: var(--violet); }
.pg-prose .date-maj { display: inline-flex; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--texte-doux); background: rgba(var(--violet-rgb), .08); border: 1px solid var(--bordure); }
.pg-note-info { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(var(--violet-rgb), .3); background: rgba(var(--violet-rgb), .07); color: var(--texte-doux); }
.pg-note-info .lr-icone { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--violet); }
body:not(.page-admin) section.bloc-cle.pg-telechargement {
  position: relative; overflow: hidden; padding: 24px 26px; border-color: rgba(var(--violet-rgb), .45);
  background: radial-gradient(80% 140% at 100% 0%, rgba(var(--violet-rgb), .18), transparent 60%), rgba(var(--surface-rgb), .9);
  box-shadow: 0 22px 50px -34px rgba(var(--violet-rgb), .8);
}
.pg-telechargement .pg-envoyer { margin-top: 0; font-size: 15px; padding: 13px 24px; }
.pg-telechargement .pg-envoyer .lr-icone { width: 18px; height: 18px; }
.pg-telechargement code { font-size: 11.5px; opacity: .8; }
.carte.pg-carte { padding: 22px 26px; }
.carte.pg-carte h2 { font-size: 17px; }

/* Page d'erreur / introuvable */
.page-erreur {
  position: relative; overflow: hidden; isolation: isolate; max-width: 560px; margin: 30px auto; padding: 44px 32px 36px; text-align: center; border-radius: 28px;
  border: 1px solid var(--bordure); background: radial-gradient(80% 120% at 50% 0%, rgba(var(--violet-rgb), .2), transparent 65%), rgba(var(--surface-rgb), .86);
  box-shadow: 0 30px 70px -40px rgba(var(--violet-rgb), .8);
}
.page-erreur-icone {
  width: 96px; height: 96px; margin: 0 auto 18px; display: grid; place-items: center; font-size: 46px; border-radius: 30px;
  background: linear-gradient(135deg, rgba(139, 92, 246, .25), rgba(217, 70, 239, .18)); border: 1px solid rgba(var(--violet-rgb), .35);
  box-shadow: 0 18px 40px -20px rgba(var(--violet-rgb), .9); animation: pg-flotte 6s ease-in-out infinite;
}
.page-erreur .titre-page { font-size: clamp(30px, 5vw, 42px); font-weight: 900; letter-spacing: -.02em; margin: 0 0 8px; }
.page-erreur .sous-titre { margin: 0 auto 22px; }
.page-erreur-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.page-erreur-actions .bouton { border-radius: 14px; }
.page-erreur-actions a.bouton { color: #fff; background: linear-gradient(135deg, #8b5cf6, #d946ef); box-shadow: 0 12px 26px -14px rgba(217, 70, 239, .95); }

/* Sections des pages refondues (profil, notifications, amis, transparence...) : chaque section devient une carte. */
.pg-hero ~ section[aria-labelledby]:not(.pg-carte):not(.pf-bloc),
.pg-hero ~ div > section[aria-labelledby]:not(.pg-carte):not(.pf-bloc),
.pg-hero ~ section.recherche-live, .pg-hero ~ section.recherche-evenements {
  margin: 0 0 18px; padding: 22px 24px; border-radius: 22px; border: 1px solid var(--bordure);
  background: rgba(var(--surface-rgb), .86); box-shadow: 0 16px 40px -30px rgba(0, 0, 0, .85);
  animation: le-repere-fondu-monte var(--duree-normale) var(--ease-sortie) both;
}
.pg-hero ~ section[aria-labelledby] > h2.titre-section, .pg-hero ~ div > section[aria-labelledby] > h2.titre-section,
.pg-hero ~ section.recherche-live > h2.titre-section, .pg-hero ~ section.recherche-evenements > h2.titre-section {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 17px; font-weight: 800; letter-spacing: -.01em;
}
.pg-hero ~ section[aria-labelledby] > h2.titre-section::before, .pg-hero ~ div > section[aria-labelledby] > h2.titre-section::before,
.pg-hero ~ section.recherche-live > h2.titre-section::before, .pg-hero ~ section.recherche-evenements > h2.titre-section::before {
  content: ""; flex: none; width: 5px; height: 1.15em; border-radius: 3px; background: linear-gradient(180deg, #8b5cf6, #d946ef); box-shadow: 0 0 10px rgba(var(--violet-rgb), .5);
}
.pg-hero ~ section[aria-labelledby] .formulaire, .pg-hero ~ div > section[aria-labelledby] .formulaire { max-width: none; padding: 0; border: 0; background: none; box-shadow: none; }
.pg-hero ~ section.pg-section-danger { border-color: rgba(239, 68, 68, .4); background: linear-gradient(135deg, rgba(239, 68, 68, .08), transparent 60%), rgba(var(--surface-rgb), .86); }
.pg-hero ~ section.pg-section-danger > h2.titre-section::before { background: linear-gradient(180deg, #f87171, #b91c1c); box-shadow: 0 0 10px rgba(239, 68, 68, .5); }
.pg-hero ~ section .ligne-avec-avatar { gap: 18px; }
.pg-hero .actions-reglement { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.pg-hero .actions-reglement .bouton { margin: 0; }

/* Formulaire « champ + bouton » sur une ligne (recherche d'amis) */
.pg-form.pg-form-ligne { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
.pg-form.pg-form-ligne input[type="search"] { flex: 1 1 240px; width: auto; }
.pg-form.pg-form-ligne button[type="submit"] { margin-top: 0; }

/* Groupes de choix (notifications) */
.pg-form fieldset { margin: 6px 0 4px; padding: 16px 18px 12px; border-radius: 16px; border: 1px solid var(--bordure); background: rgba(var(--fond-rgb), .45); }
.pg-form fieldset legend { padding: 0 8px; margin-left: -8px; font-size: 14px; font-weight: 800; color: var(--texte); }
.pg-form fieldset label { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--texte); cursor: pointer; transition: background .15s; }
.pg-form fieldset label:hover { background: rgba(var(--violet-rgb), .08); }
.pg-form fieldset label:has(input:checked) { background: rgba(var(--violet-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--violet-rgb), .35); }
.pg-form fieldset .aide { margin: 8px 0 4px; }
.pg-form .ligne-avec-avatar { margin: 0; font-weight: 600; }

/* Recherche : filtres en grille */
.pg-form .filtres-recherche { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 10px 0 0; }
.pg-form .filtres-recherche label { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.formulaire-recherche.pg-form { max-width: none; }

/* Social : tuiles premium */
.pg-tuiles.social-tuiles { gap: 14px; }
.pg-tuile.social-tuile {
  position: relative; overflow: hidden; border-radius: 20px; padding: 18px; background: rgba(var(--surface-rgb), .86);
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.pg-tuile.social-tuile::before { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, hsl(var(--teinte) 85% 60% / .22), transparent 70%); pointer-events: none; }
.pg-tuile.social-tuile:hover { transform: translateY(-3px); border-color: hsl(var(--teinte) 80% 60% / .55); box-shadow: 0 20px 40px -24px hsl(var(--teinte) 85% 50% / .8); }
.pg-tuile .social-tuile-icone.pg-pastille { width: 46px; height: 46px; border-radius: 15px; font-size: 0; }
.pg-tuile .social-tuile-icone.pg-pastille .lr-icone { width: 22px; height: 22px; }
.pg-tuile .social-tuile-fleche { transition: transform .2s ease; }
.pg-tuile:hover .social-tuile-fleche { transform: translateX(4px); color: hsl(var(--teinte) 80% 65%); }
.social-en-ligne.pg-carte { max-width: 360px; margin-top: 18px; }

/* Classement : podium pour les trois premiers */
.pg-classement.classement-liste { display: flex; flex-direction: column; gap: 10px; padding: 0; }
.pg-classement .classement-ligne {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; border: 1px solid var(--bordure);
  background: rgba(var(--surface-rgb), .86); box-shadow: 0 12px 30px -26px rgba(0, 0, 0, .85); transition: transform .2s ease, border-color .2s ease;
}
.pg-classement .classement-ligne:hover { transform: translateX(4px); border-color: rgba(var(--violet-rgb), .45); }
.pg-classement .classement-rang {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-weight: 900; font-variant-numeric: tabular-nums;
  color: var(--texte-doux); background: rgba(var(--violet-rgb), .1);
}
.pg-classement .classement-ligne:nth-child(1) .classement-rang { color: #3b2a00; background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 8px 20px -8px rgba(245, 158, 11, .9); }
.pg-classement .classement-ligne:nth-child(2) .classement-rang { color: #1f2937; background: linear-gradient(135deg, #f1f5f9, #94a3b8); box-shadow: 0 8px 20px -8px rgba(148, 163, 184, .9); }
.pg-classement .classement-ligne:nth-child(3) .classement-rang { color: #3b1d06; background: linear-gradient(135deg, #fdba74, #c2410c); box-shadow: 0 8px 20px -8px rgba(194, 65, 12, .9); }
.pg-classement .classement-ligne:nth-child(1) { border-color: rgba(245, 158, 11, .45); background: linear-gradient(135deg, rgba(245, 158, 11, .1), transparent 60%), rgba(var(--surface-rgb), .86); }
.pg-classement .classement-nb { margin-left: auto; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--texte-doux); background: rgba(var(--violet-rgb), .08); }

/* Carte centrée (suppression de compte) */
.pg-carte-centree { max-width: 620px; margin: 24px auto; padding: 32px; text-align: left; }
.pg-carte-centree .titre-page { font-size: clamp(24px, 3.4vw, 32px); font-weight: 900; letter-spacing: -.02em; margin: 14px 0 8px; }
.pg-pastille.pg-pastille-grande { width: 56px; height: 56px; border-radius: 18px; }
.pg-pastille.pg-pastille-grande .lr-icone { width: 26px; height: 26px; }
.pg-carte-centree form .bouton-danger { border-radius: 14px; padding: 12px 22px; font-weight: 800; }

/* Titres de section des pages refondues (hors cartes) : barre dégradée comme le fil d'actualité */
.pg-hero ~ h2.titre-section, .pg-entete-detail ~ h2.titre-section, .pg-hero ~ div > h2.titre-section {
  display: flex; align-items: center; gap: 12px; margin: 28px 0 14px; font-size: 19px; font-weight: 900; letter-spacing: -.01em;
}
.pg-hero ~ h2.titre-section::before, .pg-entete-detail ~ h2.titre-section::before, .pg-hero ~ div > h2.titre-section::before {
  content: ""; flex: none; width: 5px; height: 1.1em; border-radius: 3px; background: linear-gradient(180deg, #8b5cf6, #d946ef); box-shadow: 0 0 10px rgba(var(--violet-rgb), .5);
}
.pg-hero ~ h2.titre-section::after, .pg-entete-detail ~ h2.titre-section::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--bordure), transparent); }

/* En-tête des pages de détail (tournoi, équipe, match, partie Ranked) */
.pg-entete-detail {
  --teinte: 215; position: relative; overflow: hidden; isolation: isolate; margin: 0 0 22px; padding: 24px 26px; border-radius: 22px; border: 1px solid var(--bordure);
  background: radial-gradient(70% 160% at 0% 0%, hsl(var(--teinte) 80% 60% / .2), transparent 60%), radial-gradient(50% 120% at 100% 100%, hsl(calc(var(--teinte) + 40) 85% 58% / .12), transparent 65%), rgba(var(--surface-rgb), .82);
  box-shadow: 0 22px 54px -34px hsl(var(--teinte) 80% 55% / .7), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.pg-entete-detail::after { content: ""; position: absolute; z-index: -1; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, hsl(var(--teinte) 85% 62% / .25), transparent 70%); pointer-events: none; }
.pg-entete-detail .titre-page { margin: 0 0 8px; font-size: clamp(24px, 3.6vw, 34px); font-weight: 900; letter-spacing: -.02em; line-height: 1.15; }
.pg-entete-detail .sous-titre { margin: 0; max-width: 72ch; }
.pg-entete-detail .sous-titre + .sous-titre, .pg-entete-detail > p + p { margin-top: 8px; }
.pg-entete-detail .etiquette { vertical-align: middle; font-size: 12px; }
.pg-entete-detail .arena-debut-tournoi { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0; padding: 6px 14px; border-radius: 999px; background: hsl(var(--teinte) 80% 60% / .12); border: 1px solid hsl(var(--teinte) 80% 60% / .3); }

/* Emblème image (logo d'un jeu) */
.pg-hero-embleme.pg-hero-embleme-image { background: rgba(var(--surface-rgb), .6); border: 1px solid var(--bordure); overflow: hidden; transform: none; }
.pg-hero-embleme-image img { width: 76%; height: 76%; object-fit: contain; }

/* État vide mis en valeur (studio sans droit de diffuser) */
.pg-vide-premium { max-width: 560px; }

/* Cartes du studio Live */
.studio-bloc.pg-carte { margin-bottom: 16px; }
.studio-bloc.pg-carte > h2.titre-section { display: flex; align-items: center; gap: 12px; }
.studio-bloc.pg-carte > h2.titre-section::before { content: ""; flex: none; width: 5px; height: 1.1em; border-radius: 3px; background: linear-gradient(180deg, #f43f5e, #d946ef); }
.studio-bloc.pg-carte .formulaire { padding: 0; border: 0; background: none; }

/* Contrôles natifs restants dans les pages refondues (listes, fichiers, champs hors .pg-form) */
:is(.pg-hero ~ *, .pg-entete-detail ~ *) select:not([multiple]) {
  appearance: none; -webkit-appearance: none; min-height: 40px; padding: 8px 36px 8px 12px; border-radius: 12px; font-size: 14px; cursor: pointer;
  color: var(--texte); border: 1px solid var(--bordure); background-color: rgba(var(--fond-rgb), .7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c93b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 15px;
}
:is(.pg-hero ~ *, .pg-entete-detail ~ *) select:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(var(--violet-rgb), .15); outline: none; }
:is(.pg-hero ~ *, .pg-entete-detail ~ *) input[type="file"]:not([hidden]) { font-size: 13.5px; color: var(--texte-doux); max-width: 100%; }
:is(.pg-hero ~ *, .pg-entete-detail ~ *) input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 9px 16px; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 700; color: var(--texte);
  background: rgba(var(--violet-rgb), .1); border: 1px dashed rgba(var(--violet-rgb), .55); transition: background .2s;
}
:is(.pg-hero ~ *, .pg-entete-detail ~ *) input[type="file"]::file-selector-button:hover { background: rgba(var(--violet-rgb), .2); }
.pg-hero ~ section .btn-fichier {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; cursor: pointer; font-size: 13.5px; font-weight: 700;
  color: var(--texte); background: rgba(var(--violet-rgb), .1); border: 1px dashed rgba(var(--violet-rgb), .55); transition: background .2s;
}
.pg-hero ~ section .btn-fichier:hover { background: rgba(var(--violet-rgb), .2); color: var(--texte); }
:is(.pg-hero ~ *, .pg-entete-detail ~ *) input:is([type="text"], [type="url"], [type="search"], [type="number"], [type="time"], [type="date"], [type="datetime-local"], :not([type])):not(.pg-form *) {
  border-radius: 12px;
}

/* Guide d'utilisation (30 septembre) : sommaire en pastilles */
.aide-sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.aide-sommaire a {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; text-decoration: none;
  color: var(--texte); background: rgba(var(--surface-rgb), .86); border: 1px solid var(--bordure); transition: border-color .2s, background .2s, transform .15s;
}
.aide-sommaire a:hover { text-decoration: none; transform: translateY(-1px); border-color: rgba(var(--violet-rgb), .5); background: rgba(var(--violet-rgb), .1); color: var(--texte); }
body:not(.page-admin) details.bloc-cle ul.aide { padding-left: 38px; }
body:not(.page-admin) details.bloc-cle ul.aide li { margin: 6px 0; line-height: 1.6; }
details.bloc-cle[id] { scroll-margin-top: 90px; }

/* Règlement (30 septembre) : sommaire en deux colonnes */
.reglement-sommaire { margin: 18px 0 8px; padding: 16px 20px; border-radius: 16px; border: 1px solid var(--bordure); background: rgba(var(--violet-rgb), .05); }
.reglement-sommaire > strong { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.reglement-sommaire ol { margin: 0; padding-left: 22px; columns: 2 220px; column-gap: 28px; font-size: 14px; line-height: 1.9; }
.reglement-sommaire li { break-inside: avoid; margin: 0; }
.reglement-sommaire a { color: var(--texte); text-decoration: none; }
.reglement-sommaire a:hover { color: var(--violet); text-decoration: underline; }
.pg-prose h2[id] { scroll-margin-top: 90px; }

/* ---- Consentement avant un lecteur de tiers (Twitch / YouTube) : public/consentement-tiers.js ---- */
.consentement-tiers { display: grid; gap: 12px; justify-items: start; padding: 18px; border: 1px dashed var(--bordure); border-radius: 14px; background: rgba(var(--surface-rgb), .6); }
.consentement-tiers p { margin: 0; font-size: 14px; color: var(--texte-doux); }
.consentement-tiers-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-tableau table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pg-tableau th, .pg-tableau td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bordure); }
.pg-tableau th { color: var(--texte-doux); font-weight: 600; }
.auth-info-donnees { margin: 12px 0 0; }

/* ---- Comptes bloqués et sanctions (/profil/blocages), boutons « Bloquer » ---- */
.formulaire-en-ligne { display: inline; margin: 0; }
.liste-bloques, .liste-sanctions { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.ligne-bloque { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--bordure); border-radius: 12px; background: rgba(var(--surface-rgb), .5); }
.ligne-bloque-id { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.liste-sanctions li { padding: 10px 12px; border: 1px solid var(--bordure); border-left: 3px solid var(--rouge-decor); border-radius: 10px; background: rgba(var(--surface-rgb), .5); }
.admin-sanction { margin: 0 0 6px; }
.admin-sanction > summary { cursor: pointer; font-weight: 700; }
.admin-sanction-form { display: grid; gap: 8px; margin-top: 8px; min-width: 240px; }
.admin-sanction-form label { display: grid; gap: 3px; font-size: 13px; }

/* ============================================================
   public/css/20-langue-et-bandeau.css
   Sélecteur de langue du bandeau et ajustements de largeur de la barre du haut (5 langues).
   Assemblée avec les autres fichiers de public/css/ dans l'ordre de leur numéro, et servie sous /style.css
   (voir src/web/feuille-de-style.js) : une règle d'un fichier plus loin l'emporte, à spécificité égale.
   ============================================================ */


/* ---- Langue de l'interface (2 octobre) : sélecteur à drapeaux du bandeau (public/langue.js, views/drapeau.ejs) ---- */
html.i18n-attente body { visibility: hidden; } /* le temps du premier chargement du dictionnaire (public/i18n.js) */
.langue-bandeau { position: relative; flex: none; }
.langue-bouton {
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--bordure); background: rgba(var(--surface-rgb), .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.langue-bouton:hover, .langue-bandeau.ouvert .langue-bouton { border-color: rgba(var(--violet-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), .12); }
.langue-bouton:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.langue-bouton .drapeau { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 2px 6px rgba(0, 0, 0, .35); }
.drapeau { display: block; flex: none; }
.langue-menu {
  position: absolute; z-index: 1300; top: calc(100% + 10px); right: 0; min-width: 190px; padding: 6px; border-radius: 16px;
  background: rgba(var(--surface-rgb), .97); border: 1px solid var(--bordure); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 26px 60px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(var(--violet-rgb), .08);
  transform-origin: top right; animation: bandeau-panneau-entree .18s cubic-bezier(.2, .8, .2, 1) both;
}
.langue-menu[hidden] { display: none; }
.langue-menu button {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 0; border-radius: 10px; cursor: pointer; text-align: left;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--texte); background: transparent; transition: background .15s;
}
.langue-menu button:hover, .langue-menu button:focus-visible { background: rgba(var(--violet-rgb), .12); outline: none; }
.langue-menu button[aria-checked="true"] { background: rgba(var(--violet-rgb), .16); }
.langue-menu .drapeau { width: 26px; height: 18px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.langue-menu span { flex: 1; }
.langue-coche { color: var(--violet); }
.langue-menu button:disabled { opacity: .6; cursor: progress; }
@media (max-width: 600px) { .langue-menu { right: auto; left: 0; } }
/* Tablettes et téléphones à l'horizontale (601–860px) : avec la radio et le sélecteur de langue, la recherche se replie
   en loupe comme entre 861 et 1300px — sinon la barre déborde (constaté à 653×320). */
@media (min-width: 601px) and (max-width: 860px) {
  .bandeau-droite { gap: 8px; }
  .bandeau-droite > a, .bandeau-droite .bouton { white-space: nowrap; }
  .recherche-bandeau-raccourci { display: none; }
  .recherche-bandeau { flex: 0 0 auto; }
  .recherche-bandeau input { width: 38px; padding: 8px 8px 8px 30px; cursor: pointer; transition: width .2s ease; }
  .recherche-bandeau input::placeholder { color: transparent; }
  .recherche-bandeau input:focus { width: 180px; cursor: text; }
  .recherche-bandeau input:focus::placeholder { color: var(--texte-doux); }
}
/* Bandeau avec le sélecteur de langue (2 octobre) : les onglets traduits (allemand, espagnol...) et le bouton drapeau
   prennent ~40 px de plus — logo seul jusqu'à 1180 px, onglets et recherche resserrés entre 1301 et 1439 px. */
@media (min-width: 861px) and (max-width: 1180px) {
  .marque { font-size: 0; gap: 0; }
}
@media (min-width: 1301px) and (max-width: 1439px) {
  .bandeau-tab { padding: 8px 9px; }
  .bandeau-tabs { flex: 0 0 auto; } /* c'est la recherche qui cède la place, pas les onglets */
  .bandeau-inner { flex-wrap: nowrap; }
  .bandeau-droite { flex-shrink: 1; min-width: 0; }
  .bandeau-droite > a, .bandeau-droite .bouton { white-space: nowrap; }
  .recherche-bandeau { flex: 0 1 150px; min-width: 96px; }
  .recherche-bandeau input { min-width: 0; width: 100%; }
}

/* Appel entrant sur les pages classiques (public/pages/appel-entrant.js) : même esprit que l'appli (toujours sombre). */
.appel-entrant-site {
  position: fixed; top: 16px; left: 50%; z-index: 10000; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; width: min(540px, calc(100vw - 24px)); padding: 12px 12px 12px 14px;
  border-radius: 22px; color: #f6f4ff; color-scheme: dark;
  background: linear-gradient(135deg, rgba(36, 26, 66, 0.97), rgba(14, 11, 26, 0.97));
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(74, 222, 128, 0.4);
  animation: appel-entrant-site-arrivee 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes appel-entrant-site-arrivee { from { opacity: 0; transform: translate(-50%, -12px) scale(0.97); } }
.appel-entrant-site-avatar {
  position: relative; display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%;
  font-size: 22px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7c3aed, #d946ef);
}
.appel-entrant-site-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.appel-entrant-site-avatar::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(74, 222, 128, 0.75);
  animation: appel-entrant-site-onde 1.6s ease-out infinite;
}
@keyframes appel-entrant-site-onde { from { transform: scale(0.92); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
.appel-entrant-site-textes { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.appel-entrant-site-textes strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appel-entrant-site-sous { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #86efac; }
.appel-entrant-site-refuser, .appel-entrant-site-accepter {
  height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 800; color: #fff;
}
.appel-entrant-site-refuser { background: linear-gradient(135deg, #f43f5e, #dc2626); }
.appel-entrant-site-accepter { background: linear-gradient(135deg, #4ade80, #16a34a); box-shadow: 0 10px 24px -10px rgba(34, 197, 94, 0.9); }
.appel-entrant-site-refuser:hover, .appel-entrant-site-accepter:hover { filter: brightness(1.08); }
@media (max-width: 520px) {
  .appel-entrant-site { flex-wrap: wrap; }
  .appel-entrant-site-textes { flex-basis: calc(100% - 70px); }
  .appel-entrant-site-refuser, .appel-entrant-site-accepter { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .appel-entrant-site, .appel-entrant-site-avatar::after { animation: none; } }

/* ============================================================
   22-lecteur-premium.css — habillage « premium » du lecteur de Live (page d'une chaîne, page évènement, mobile compris).
   Ne touche ni au dimensionnement ni au ratio de la vidéo (voir lecteur-live.js : l'image n'est jamais recadrée) : uniquement
   l'écrin — cadre lumineux, barre de contrôle en verre dépoli, pastilles, curseur de volume, états de chargement, mobile.
   Exclut l'aperçu du studio (poste de commande du streamer).
   ============================================================ */
[data-lecteur-live]:not(.studio-apercu) {
  --lp-accent: var(--dom, #8b5cf6);
  --lp-accent2: var(--ext, #f59e0b);
  --lp-verre: rgba(12, 10, 24, .58);
  --lp-trait: rgba(255, 255, 255, .14);
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 60px -18px rgba(0, 0, 0, .8), 0 0 80px -30px var(--lp-accent);
}
[data-lecteur-live]:not(.studio-apercu):fullscreen { border-radius: 0; box-shadow: none; }

/* ---- Barre de contrôle : verre dépoli flottant, dégradé doux vers l'image ---- */
[data-lecteur-live]:not(.studio-apercu) .lecteur-stream-barre {
  gap: 8px; padding: 46px 14px 12px; align-items: center;
  background: linear-gradient(0deg, rgba(3, 2, 9, .92) 0%, rgba(3, 2, 9, .55) 55%, transparent 100%);
}
[data-lecteur-live]:not(.studio-apercu) .lr-barre-groupe { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
[data-lecteur-live]:not(.studio-apercu) .lecteur-stream-barre .lr-ctrl,
[data-lecteur-live]:not(.studio-apercu) .lecteur-affichage-bouton,
[data-lecteur-live]:not(.studio-apercu) .lecteur-stream-qualite select,
[data-lecteur-live]:not(.studio-apercu) .lecteur-pip {
  height: 38px; border-radius: 12px; border: 1px solid var(--lp-trait); background: var(--lp-verre); color: #fff;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  transition: background .2s ease, transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
[data-lecteur-live]:not(.studio-apercu) .lecteur-stream-barre .lr-ctrl:hover,
[data-lecteur-live]:not(.studio-apercu) .lecteur-pip:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .32); box-shadow: 0 0 22px -6px var(--lp-accent); }
[data-lecteur-live]:not(.studio-apercu) .lecteur-stream-barre .lr-ctrl:active, [data-lecteur-live]:not(.studio-apercu) .lecteur-pip:active { transform: scale(.92); }
[data-lecteur-live]:not(.studio-apercu) .lecteur-pip { display: inline-grid; place-items: center; width: 38px; padding: 0; cursor: pointer; font: inherit; }
[data-lecteur-live]:not(.studio-apercu) .lecteur-pip svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-lecteur-live]:not(.studio-apercu) .lecteur-pip[hidden] { display: none; }

/* ---- Pastille EN DIRECT (point qui respire) et spectateurs ---- */
[data-lecteur-live]:not(.studio-apercu) .lecteur-stream-barre .badge-live {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .12em;
  background: linear-gradient(135deg, #ff3b5c, #d4143a); color: #fff; box-shadow: 0 0 24px -4px rgba(255, 59, 92, .9), inset 0 1px 0 rgba(255, 255, 255, .35);
}
[data-lecteur-live]:not(.studio-apercu) .lecteur-stream-barre .badge-live::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); animation: lp-point 1.8s ease-out infinite;
}
@keyframes lp-point { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } }
[data-lecteur-live]:not(.studio-apercu) .lecteur-stream-spectateurs,
[data-lecteur-live]:not(.studio-apercu) .lecteur-stream-duree:not(:empty) {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--lp-verre); border: 1px solid var(--lp-trait); color: #fff; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* ---- Curseur de volume : piste remplie à l'accent du thème (--vol posée par lecteur-live.js) ---- */
[data-lecteur-live]:not(.studio-apercu) .lecteur-stream-volume input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 84px; height: 5px; border-radius: 999px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, #fff var(--vol, 100%), rgba(255, 255, 255, .25) var(--vol, 100%));
  transition: width .25s ease;
}
[data-lecteur-live]:not(.studio-apercu) .lecteur-stream-volume input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18), 0 2px 8px rgba(0, 0, 0, .5); }
[data-lecteur-live]:not(.studio-apercu) .lecteur-stream-volume input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); }
[data-lecteur-live]:not(.studio-apercu) .lecteur-stream-volume input[type="range"]:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* ---- Écran d'attente / hors ligne : halo, verre, texte net ---- */
[data-lecteur-live]:not(.studio-apercu) .lecteur-stream-voile {
  background: radial-gradient(70% 70% at 50% 45%, rgba(var(--violet-rgb, 139, 92, 246), .22), rgba(4, 3, 10, .9) 70%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
[data-lecteur-live]:not(.studio-apercu) .lecteur-stream-voile p { text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
[data-lecteur-live]:not(.studio-apercu) .lecteur-stream-voile:not([hidden])::after {
  content: ''; width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .15); border-top-color: #fff; animation: lp-tour 1s linear infinite; order: 5;
}
#live-page:not([data-en-direct="1"]) [data-lecteur-live] .lecteur-stream-voile::after, .lecteur-stream-voile.lecteur-stream-voile-fixe::after { display: none; }
@keyframes lp-tour { to { transform: rotate(360deg); } }

/* ---- Bouton « Activer le son » flottant : pilule lumineuse ---- */
[data-lecteur-live]:not(.studio-apercu) .lecteur-son-flottant {
  border-radius: 999px; padding: 10px 18px; font-weight: 700; color: #fff; border: 1px solid var(--lp-trait); background: var(--lp-verre);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 8px 30px -8px rgba(0, 0, 0, .7), 0 0 30px -8px var(--lp-accent); animation: lp-appel 2.4s ease-in-out infinite; /* halo seulement : un bouton qui bouge ne se clique pas */
}
@keyframes lp-appel { 0%, 100% { box-shadow: 0 8px 30px -8px rgba(0, 0, 0, .7), 0 0 14px -8px var(--lp-accent); } 50% { box-shadow: 0 8px 30px -8px rgba(0, 0, 0, .7), 0 0 34px -4px var(--lp-accent); } }

/* ---- Barre de titre en haut (plein écran / théâtre) : nom de la chaîne, injectée par lecteur-live.js ---- */
.lecteur-titre-haut {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4; padding: 14px 18px 40px; pointer-events: none; color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .01em;
  background: linear-gradient(180deg, rgba(3, 2, 9, .8), transparent); text-shadow: 0 2px 12px rgba(0, 0, 0, .6); opacity: 0; transition: opacity .3s ease;
}
[data-lecteur-live]:fullscreen .lecteur-titre-haut { opacity: 1; }
[data-lecteur-live]:fullscreen.lecteur-inactif .lecteur-titre-haut { opacity: 0; }

/* ---- Indicateur de raccourci (pause, volume...) ---- */
.lecteur-toast {
  position: absolute; left: 50%; top: 18%; z-index: 6; transform: translate(-50%, -8px); padding: 8px 16px; border-radius: 999px; pointer-events: none;
  background: rgba(8, 6, 18, .78); border: 1px solid var(--lp-trait, rgba(255, 255, 255, .14)); color: #fff; font-weight: 700; font-size: 14px; opacity: 0; transition: opacity .2s ease, transform .2s ease;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.lecteur-toast.lecteur-toast-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---- Mobile : cibles tactiles confortables, barre compacte sur deux lignes, coins moins arrondis ---- */
@media (max-width: 720px) {
  [data-lecteur-live]:not(.studio-apercu) { border-radius: 12px; }
  [data-lecteur-live]:not(.studio-apercu) .lecteur-stream-barre { flex-wrap: wrap; row-gap: 8px; padding: 40px 10px calc(10px + env(safe-area-inset-bottom)); }
  [data-lecteur-live]:not(.studio-apercu) .lecteur-stream-espace { flex: 1 1 0; }
  [data-lecteur-live]:not(.studio-apercu) .lecteur-stream-barre .lr-ctrl, [data-lecteur-live]:not(.studio-apercu) .lecteur-pip { width: 44px; height: 44px; border-radius: 14px; }
  [data-lecteur-live]:not(.studio-apercu) .lecteur-affichage-bouton, [data-lecteur-live]:not(.studio-apercu) .lecteur-stream-qualite select { height: 44px; border-radius: 14px; }
  [data-lecteur-live]:not(.studio-apercu) .lr-qualite-libelle { display: none; }
  [data-lecteur-live]:not(.studio-apercu) .lecteur-stream-duree { display: none; }
  [data-lecteur-live]:not(.studio-apercu) .lecteur-stream-volume input[type="range"] { display: none; }
  [data-lecteur-live]:not(.studio-apercu) .lecteur-pip-bureau { display: none; }
}
@media (max-width: 720px) and (orientation: landscape) {
  [data-lecteur-live]:not(.studio-apercu) .lecteur-stream-barre { flex-wrap: nowrap; padding-top: 28px; }
}
@media (pointer: coarse) { [data-lecteur-live]:not(.studio-apercu) .lecteur-stream-barre .lr-ctrl:hover { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
  [data-lecteur-live] .badge-live::before, [data-lecteur-live] .lecteur-son-flottant, [data-lecteur-live] .lecteur-stream-voile::after { animation: none !important; }
}

/* Actualités de l'accueil (sorties de jeux, annonces) : carte à miniature, badge « disponible », halo aux couleurs du Repère. */
.titre-fil-actualite + .actu-carte { margin-top: 14px; }
.actu-carte { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; margin: 0 0 16px; overflow: hidden; border-radius: 18px;
  background: linear-gradient(135deg, rgba(47, 123, 255, .10), rgba(255, 46, 67, .08)), var(--carte, var(--fond-2, #12151f)); border: 1px solid var(--bordure);
  box-shadow: 0 18px 40px -26px rgba(47, 123, 255, .65); }
.actu-carte::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, #2F7BFF, #FF2E43); z-index: 2; }
.actu-visuel { position: relative; display: block; min-height: 220px; overflow: hidden; }
.actu-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.actu-carte:hover .actu-visuel img { transform: scale(1.04); }
.actu-visuel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(8, 10, 18, .55)), linear-gradient(0deg, rgba(8, 10, 18, .55), transparent 45%); pointer-events: none; }
.actu-badge { position: absolute; z-index: 1; left: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 900; letter-spacing: .08em; color: #fff; background: linear-gradient(90deg, #E11D48, #FF5A36); box-shadow: 0 8px 22px -8px rgba(255, 46, 67, .9); }
.actu-badge i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: actu-pouls 1.4s ease-in-out infinite; }
.actu-corps { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 22px 24px; }
.actu-jeu { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #5B9BFF; }
.actu-corps h3 { margin: 0; font-size: clamp(20px, 2.4vw, 28px); font-weight: 900; line-height: 1.15; letter-spacing: -.01em; }
.actu-corps p { margin: 0; color: var(--texte-doux); line-height: 1.55; }
.actu-corps p strong { color: var(--texte); }
.actu-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@keyframes actu-pouls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (max-width: 760px) { .actu-carte { grid-template-columns: 1fr; } .actu-visuel { min-height: 0; aspect-ratio: 16 / 9; } .actu-visuel::after { background: linear-gradient(0deg, rgba(8, 10, 18, .6), transparent 50%); } .actu-corps { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .actu-badge i { animation: none; } .actu-visuel img { transition: none; } .actu-carte:hover .actu-visuel img { transform: none; } }

/* ============================================================
   « Chercher une team » (voir LFG.md) : onglets, filtres d'annonces, planning, sélecteur de jeux, swipe, matchs, profil gamer.
   CSS moderne : imbrication native, requêtes de conteneur, :has(), color-mix(), @property, @starting-style, aspect-ratio.
   Toutes les couleurs viennent des variables du thème (clair / sombre) ; aucun mouvement avec « réduire les animations ».
   ============================================================ */

@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }

/* ---- Onglets de la rubrique ---- */
.lfg-onglets {
  display: flex; gap: 6px; margin: -6px 0 22px; padding: 5px; overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--bordure); border-radius: 16px; background: color-mix(in srgb, var(--surface) 88%, transparent);
  &::-webkit-scrollbar { display: none; }
}
.lfg-onglet {
  display: inline-flex; align-items: center; gap: 7px; flex: 1 0 auto; justify-content: center; padding: 9px 16px; border-radius: 12px;
  font-weight: 700; font-size: 14px; color: var(--texte-doux); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s;
  & .lr-icone { width: 17px; height: 17px; }
  &:hover { color: var(--texte); background: var(--surface-claire); text-decoration: none; }
  &.actif { color: var(--bouton-texte); background: linear-gradient(135deg, var(--violet), color-mix(in srgb, var(--violet) 55%, #2F7BFF)); box-shadow: 0 8px 20px -10px rgba(var(--violet-rgb), .8); }
}
.lfg-onglet-pastille { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; font-size: 12px; font-weight: 900; background: #FF2E43; color: #fff; }

/* ---- Annonces : filtres, puces, identifiants, planning ---- */
.lfg-filtres {
  display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--bordure); border-radius: 16px; background: var(--surface);
}
.lfg-filtres-champs { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; flex: 1 1 520px; }
.lfg-filtre-champ { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--texte-doux); min-width: 130px; flex: 1 1 130px;
  & input, & select { width: 100%; padding: 9px 10px; border-radius: 10px; font-size: 14px; }
}
.lfg-filtres-actions { display: flex; align-items: center; gap: 14px; }
.lfg-case { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; font-size: 14px; color: var(--texte); cursor: pointer;
  & input { margin-top: 3px; accent-color: var(--violet); width: 16px; height: 16px; flex: none; }
  & small { color: var(--texte-doux); font-weight: 500; }
}
.lfg-case-filtre { align-items: center; padding-bottom: 9px; }
.lfg-champs-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; @media (max-width: 560px) { grid-template-columns: 1fr; } }
.lfg-etiquette { font-weight: 700; color: var(--texte); font-size: 13.5px; & small { color: var(--texte-doux); font-weight: 500; } }
.lfg-requis { color: var(--alerte); }
.lfg-planning-bloc { display: grid; gap: 8px; margin-top: 4px; }
.lfg-planning-titre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: center; }
.lfg-aide-identifiants { margin: 0; }
.lfg-info { padding: 10px 14px; border-radius: 12px; background: rgba(var(--violet-rgb), .12); border: 1px solid rgba(var(--violet-rgb), .3); margin: 0 0 14px; }

.lfg-puces { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.lfg-puce, .lfg-puces li {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; line-height: 1.5;
  color: var(--texte); background: var(--surface-claire); border: 1px solid var(--bordure);
}
.lfg-puce-plateforme, .lfg-puces li.plateforme { color: var(--violet); border-color: rgba(var(--violet-rgb), .45); background: rgba(var(--violet-rgb), .1); }
.lfg-puces li.commun { color: #34d399; border-color: rgba(52, 211, 153, .5); background: rgba(52, 211, 153, .1); }
:root[data-theme="clair"] .lfg-puces li.commun { color: #047857; }
.lfg-puces li.plus { color: var(--texte-doux); }
.lfg-pastille-dispo { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #34d399; white-space: nowrap;
  & i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: lfg-pouls 1.6s ease-in-out infinite; }
}
:root[data-theme="clair"] .lfg-pastille-dispo { color: #047857; }
@keyframes lfg-pouls { 50% { opacity: .35; transform: scale(.7); } }

.lfg-identifiant, .lfg-identifiants li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 8px 12px; border-radius: 12px; border: 1px dashed rgba(var(--violet-rgb), .5); background: rgba(var(--violet-rgb), .08);
  & span { font-size: 12px; font-weight: 800; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .05em; }
  & code { font-weight: 800; color: var(--texte); background: none; padding: 0; overflow-wrap: anywhere; }
  & button, & a { margin-left: auto; font-size: 13px; }
}
.lfg-identifiants { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
.lfg-identifiant-masque { border-style: solid; border-color: var(--bordure); background: transparent; }

/* Aperçu de planning : 7 barres de 24 h */
.lfg-mini { display: grid; grid-template-columns: 14px 1fr; gap: 3px 8px; align-items: center; margin: 2px 0; }
.lfg-mini-jour { font-size: 10px; font-weight: 800; color: var(--texte-doux); text-align: center; }
.lfg-mini-piste { position: relative; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--bordure) 70%, transparent);
  & i { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--g); border-radius: 3px; background: linear-gradient(90deg, var(--violet), #2F7BFF); }
}

/* ---- Éditeur de planning ---- */
.lfg-planning { display: grid; gap: 10px; container-type: inline-size; }
.lfg-planning-raccourcis { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lfg-chip-bouton { padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--texte); background: var(--surface-claire); border: 1px solid var(--bordure);
  &:hover { border-color: rgba(var(--violet-rgb), .6); } }
.lfg-planning-grille { display: grid; gap: 3px; padding: 10px; border: 1px solid var(--bordure); border-radius: 14px; background: var(--surface); user-select: none; -webkit-user-select: none; }
.lfg-planning-ligne { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.lfg-planning-jour { font-size: 11px; font-weight: 800; color: var(--texte-doux); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; &:hover { color: var(--texte); } }
.lfg-planning-heure { font-size: 10px; font-weight: 700; color: var(--texte-doux); background: none; border: 0; padding: 0; height: 16px; cursor: pointer; text-align: left; overflow: visible; white-space: nowrap; }
.lfg-planning-case {
  height: 24px; padding: 0; border: 1px solid var(--bordure); border-radius: 4px; cursor: pointer; touch-action: none; background: color-mix(in srgb, var(--surface-claire) 80%, transparent);
  transition: background .12s, transform .12s;
  &:hover { border-color: rgba(var(--violet-rgb), .7); }
  &.on { background: linear-gradient(180deg, var(--violet), color-mix(in srgb, var(--violet) 60%, #2F7BFF)); border-color: transparent; }
  &:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; z-index: 1; position: relative; }
}
.lfg-planning-resume { margin: 0; font-size: 13px; color: var(--texte-doux); font-weight: 600; }
@container (max-width: 420px) { .lfg-planning-case { height: 28px; border-radius: 3px; } .lfg-planning-ligne { grid-template-columns: 28px repeat(24, minmax(0, 1fr)); gap: 1px; } }

/* ---- Sélecteur de jeux ---- */
.lfg-jeux { display: grid; gap: 10px; }
.lfg-jeux-choisis { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0;
  &:empty { display: none; }
  & li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 11px; border-radius: 99px; font-size: 13px; font-weight: 700; background: rgba(var(--violet-rgb), .14); border: 1px solid rgba(var(--violet-rgb), .45); }
  & button { width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer; font-size: 16px; line-height: 1; color: var(--texte); background: transparent; &:hover { background: rgba(var(--violet-rgb), .3); } }
}
.lfg-jeux-champ { position: relative; }
.lfg-jeux-saisie { width: 100%; padding: 10px 12px; border-radius: 12px; }
.lfg-jeux-liste { position: absolute; z-index: 30; inset: calc(100% + 4px) 0 auto 0; max-height: 280px; overflow: auto; margin: 0; padding: 6px; list-style: none; border-radius: 14px; border: 1px solid var(--bordure); background: var(--surface); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6);
  & li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-weight: 600;
    & small { color: var(--texte-doux); font-weight: 500; }
    &:hover, &.actif { background: rgba(var(--violet-rgb), .16); }
    &[aria-selected="true"] { color: var(--violet); }
  }
  & .lfg-jeux-aucun { cursor: default; color: var(--texte-doux); &:hover { background: none; } }
}
.lfg-jeux-compteur { margin: 0; }
.lfg-jeux-parcours { border: 1px solid var(--bordure); border-radius: 14px; padding: 10px 14px; background: var(--surface);
  & summary { cursor: pointer; font-weight: 700; }
  & fieldset { border: 0; padding: 0; margin: 12px 0 0; }
  & legend { padding: 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); margin-bottom: 6px; }
}

/* ---- Pastilles à cocher (genres, plateformes…) ---- */
.lfg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lfg-chip {
  position: relative; cursor: pointer;
  & input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  & span { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 99px; font-size: 13.5px; font-weight: 700; color: var(--texte); background: var(--surface-claire); border: 1px solid var(--bordure); transition: background .15s, border-color .15s, color .15s; }
  &:hover span { border-color: rgba(var(--violet-rgb), .6); }
  & input:checked + span { color: var(--bouton-texte); background: var(--violet); border-color: transparent; }
  & input:focus-visible + span { outline: 2px solid var(--violet); outline-offset: 2px; }
}
.lfg-chips-grands .lfg-chip span { padding: 11px 22px; font-size: 15px; }
.lfg-groupe { border: 0; padding: 0; margin: 0 0 16px; min-width: 0;
  & > legend { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); margin-bottom: 8px; padding: 0; }
}

/* ---- Page Découvrir : filtres + scène ---- */
.lfg-decouvrir { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.lfg-panneau-barre { display: none; grid-column: 1 / -1; }
.lfg-filtres-actifs { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--violet); color: var(--bouton-texte); font-size: 11px; font-weight: 900; }
.lfg-panneau { position: sticky; top: 84px; max-height: calc(100dvh - 104px); overflow: auto; padding: 18px; border: 1px solid var(--bordure); border-radius: 18px; background: var(--surface);
  & h2 { margin: 0 0 12px; font-size: 18px; }
}
.lfg-panneau-tete { display: flex; justify-content: space-between; align-items: center; & .lien-bouton { display: none; } }
.lfg-panneau-pied { display: flex; gap: 10px; justify-content: space-between; position: sticky; bottom: -18px; margin: 0 -18px -18px; padding: 12px 18px; background: linear-gradient(180deg, transparent, var(--surface) 30%); }
.lfg-age { display: flex; gap: 10px; align-items: center;
  & label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
  & input { width: 76px; padding: 8px 10px; border-radius: 10px; }
}

.lfg-scene { display: grid; justify-items: center; gap: 18px; min-width: 0; }
.lfg-pile { position: relative; width: min(100%, 440px); aspect-ratio: 3 / 4.6; min-height: 520px; touch-action: pan-y; }
.lfg-pile[aria-busy="true"]:empty::after { content: ''; position: absolute; inset: 0; border-radius: 26px; border: 1px solid var(--bordure);
  background: linear-gradient(110deg, var(--surface) 30%, var(--surface-claire) 50%, var(--surface) 70%) 0 0 / 200% 100%; animation: lfg-chargement 1.4s linear infinite; }
@keyframes lfg-chargement { to { background-position: -200% 0; } }

.lfg-profil-carte {
  --rang: 0; --like: 0; --pass: 0;
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; border: 1px solid var(--bordure); background: var(--surface);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .75); will-change: transform; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: grab;
  transform: translateY(calc(var(--rang) * 12px)) scale(calc(1 - var(--rang) * .05)); opacity: calc(1 - var(--rang) * .2); transition: transform .3s, opacity .3s;
  &.dessus { z-index: 3; outline-offset: 3px; }
  &.glisse { transition: none; cursor: grabbing; }
  &:focus-visible { outline: 3px solid var(--violet); }
  &[inert] { pointer-events: none; }
  &::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    box-shadow: inset 0 0 0 3px color-mix(in srgb, #34d399 calc(var(--like) * 100%), transparent), inset 0 0 0 3px color-mix(in srgb, #FF2E43 calc(var(--pass) * 100%), transparent); }
}
.lfg-profil-photo { position: relative; flex: 0 0 58%; overflow: hidden; background: linear-gradient(135deg, hsl(var(--teinte, 260) 55% 38%), hsl(calc(var(--teinte, 260) + 50) 60% 22%));
  & img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
  &::after { content: ''; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(0deg, color-mix(in srgb, var(--surface) 92%, transparent), transparent); pointer-events: none; }
}
.lfg-profil-initiale { position: absolute; inset: 0; display: grid; place-items: center; font-size: 110px; font-weight: 900; color: rgba(255, 255, 255, .85); text-shadow: 0 6px 30px rgba(0, 0, 0, .35); }
.lfg-profil-etat { position: absolute; left: 14px; top: 14px; z-index: 2; font-size: 12px; font-weight: 800; color: #34d399; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); &:empty { display: none; } }
.lfg-tampon { position: absolute; z-index: 2; top: 22px; padding: 4px 14px; border: 4px solid; border-radius: 12px; font-size: 22px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; background: rgba(0, 0, 0, .25); backdrop-filter: blur(4px); }
.lfg-tampon-like { left: 18px; rotate: -12deg; color: #34d399; opacity: var(--like); }
.lfg-tampon-pass { right: 18px; rotate: 12deg; color: #FF5A6B; opacity: var(--pass); }

.lfg-compat { --p: 0; position: absolute; z-index: 2; right: 14px; top: 14px; display: grid; place-items: center; align-content: center; width: 62px; height: 62px; border-radius: 50%; color: #fff; text-align: center;
  background: radial-gradient(closest-side, rgba(10, 8, 20, .82) 78%, transparent 80% 100%), conic-gradient(#34d399 calc(var(--p) * 1%), rgba(255, 255, 255, .22) 0);
  transition: --p .8s ease-out;
  & b { font-size: 16px; line-height: 1; } & small { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
}
.lfg-compat-petit { position: static; width: 52px; height: 52px; margin-left: auto; flex: none; color: var(--texte);
  background: radial-gradient(closest-side, var(--surface) 78%, transparent 80% 100%), conic-gradient(#34d399 calc(var(--p, 0) * 1%), var(--bordure) 0); & b { font-size: 13px; } }

.lfg-profil-corps { flex: 1; min-height: 0; overflow: auto; padding: 4px 20px 18px; display: grid; align-content: start; gap: 10px; }
.lfg-profil-nom { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -.02em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px;
  & .age { font-weight: 600; } & .verifie { margin-left: 8px; font-size: 14px; color: #fff; background: #2F7BFF; border-radius: 50%; width: 20px; height: 20px; display: inline-grid; place-items: center; align-self: center; }
}
.lfg-profil-meta { margin: -6px 0 0; color: var(--texte-doux); font-weight: 600; font-size: 14px; }
.lfg-profil-bio { margin: 0; line-height: 1.5; white-space: pre-line; }
.lfg-profil-bloc { & h3 { margin: 0 0 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--texte-doux); } & p { margin: 0; font-weight: 600; } }
.lfg-signaler { font-size: 12px; justify-self: start; color: var(--texte-doux); }

.lfg-actions { display: flex; gap: 22px; align-items: center; justify-content: center; }
.lfg-bouton { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; border: 1px solid var(--bordure); background: var(--surface); color: var(--texte-doux); cursor: pointer; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .7); transition: transform .15s, background .15s, color .15s, box-shadow .15s;
  & svg { width: 30px; height: 30px; }
  &:hover:not(:disabled) { transform: translateY(-3px) scale(1.06); }
  &:active:not(:disabled) { transform: scale(.94); }
  &:disabled { opacity: .35; cursor: default; }
  &:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
}
.lfg-bouton-pass:hover:not(:disabled) { color: #fff; background: #E11D48; border-color: transparent; box-shadow: 0 14px 28px -12px rgba(225, 29, 72, .8); }
.lfg-bouton-like { width: 78px; height: 78px; color: #34d399; & svg { width: 36px; height: 36px; } &:hover:not(:disabled) { color: #fff; background: #10b981; border-color: transparent; box-shadow: 0 14px 28px -12px rgba(16, 185, 129, .8); } }
.lfg-bouton-annuler { width: 50px; height: 50px; & svg { width: 22px; height: 22px; } &:hover:not(:disabled) { color: var(--violet); } }
.lfg-astuce { margin: 0; font-size: 13px; color: var(--texte-doux); text-align: center; @media (pointer: coarse) { display: none; } }

.lfg-vide { display: grid; justify-items: center; gap: 10px; max-width: 460px; padding: 40px 24px; text-align: center; border: 1px dashed var(--bordure); border-radius: 24px; background: var(--surface);
  & h2 { margin: 0; } & p { margin: 0; color: var(--texte-doux); line-height: 1.5; }
  &[hidden] { display: none; }
}
.lfg-vide-icone { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(var(--violet-rgb), .14); color: var(--violet); & .lr-icone { width: 30px; height: 30px; } }
.lfg-vide-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }

/* ---- Message de match ---- */
.lfg-match { width: min(92vw, 440px); padding: 0; border: 0; border-radius: 28px; color: var(--texte); background: linear-gradient(160deg, color-mix(in srgb, var(--violet) 28%, var(--surface)), var(--surface) 60%);
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .8); overflow: hidden;
  &::backdrop { background: rgba(8, 6, 16, .72); backdrop-filter: blur(6px); }
  &[open] { animation: lfg-match-entree .45s cubic-bezier(.34, 1.56, .64, 1); }
  @starting-style { &[open] { opacity: 0; } }
}
@keyframes lfg-match-entree { from { transform: scale(.8) translateY(20px); opacity: 0; } }
.lfg-match-contenu { display: grid; justify-items: center; gap: 12px; padding: 34px 26px 28px; text-align: center; & h2 { margin: 0; font-size: 30px; font-weight: 900; background: linear-gradient(90deg, #a78bfa, #34d399); -webkit-background-clip: text; background-clip: text; color: transparent; } & p { margin: 0; line-height: 1.5; } }
.lfg-match-etincelles { font-size: 40px; }
.lfg-match-duo { display: flex; margin: 8px 0; }
.lfg-match-photo { --teinte: 260; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; font-size: 38px; font-weight: 900; color: #fff; border: 4px solid var(--surface);
  background: linear-gradient(135deg, hsl(var(--teinte) 55% 42%), hsl(calc(var(--teinte) + 50) 60% 28%));
  & img { width: 100%; height: 100%; object-fit: cover; }
  &:first-child { margin-right: -18px; animation: lfg-duo-g .6s .15s both cubic-bezier(.34, 1.56, .64, 1); }
  &:last-child { animation: lfg-duo-d .6s .15s both cubic-bezier(.34, 1.56, .64, 1); }
}
@keyframes lfg-duo-g { from { transform: translateX(-60px) rotate(-20deg); opacity: 0; } }
@keyframes lfg-duo-d { from { transform: translateX(60px) rotate(20deg); opacity: 0; } }
.lfg-match-actions { display: grid; gap: 10px; width: 100%; margin-top: 8px; & .bouton { justify-content: center; } }

/* ---- Matchs ---- */
.lfg-grille-matchs { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.lfg-match-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.lfg-match-carte .lfg-carte-actions { flex-wrap: wrap; gap: 8px 14px; align-items: center; }

/* ---- Profil gamer ---- */
.lfg-profil-page { display: grid; gap: 18px; max-width: 860px; }
.lfg-profil-formulaire { display: grid; gap: 18px; }
.lfg-section { padding: 20px 22px; border: 1px solid var(--bordure); border-radius: 20px; background: var(--surface);
  & > h2 { margin: 0 0 14px; font-size: 18px; & small { font-weight: 500; color: var(--texte-doux); font-size: 13px; margin-left: 6px; } }
  & textarea { width: 100%; padding: 10px 12px; border-radius: 12px; resize: vertical; }
}
.lfg-age-info { margin: 0 0 12px; }
.lfg-interrupteur { display: flex; gap: 14px; align-items: flex-start; cursor: pointer;
  & input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  & small { display: block; color: var(--texte-doux); font-weight: 500; margin-top: 2px; line-height: 1.4; }
  &:has(input:focus-visible) .lfg-interrupteur-piste { outline: 2px solid var(--violet); outline-offset: 2px; }
}
.lfg-interrupteur-piste { flex: none; width: 46px; height: 26px; margin-top: 2px; border-radius: 99px; background: var(--bordure); padding: 3px; transition: background .2s;
  & i { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: translate .2s cubic-bezier(.34, 1.56, .64, 1); }
}
.lfg-interrupteur:has(input:checked) .lfg-interrupteur-piste { background: #10b981; & i { translate: 20px 0; } }
.lfg-photo-zone { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.lfg-photo-apercu { display: grid; place-items: center; width: 132px; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; border: 1px dashed var(--bordure); background: var(--surface-claire); color: var(--texte-doux); font-weight: 600; font-size: 13px;
  & img { width: 100%; height: 100%; object-fit: cover; }
}
.lfg-photo-actions { display: grid; gap: 10px; justify-items: start; flex: 1 1 260px; & p { margin: 0; } }
.lfg-barre-enregistrer { position: sticky; bottom: 12px; z-index: 5; display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--bordure); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .7); }
.lfg-statut { margin: 0; font-size: 14px; color: var(--texte-doux); font-weight: 600; }
.lfg-comptes { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0;
  & li { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
  & label { font-weight: 700; font-size: 14px; }
  & input { width: 100%; padding: 9px 12px; border-radius: 10px; }
}

/* ---- Téléphone : filtres en feuille ---- */
@media (max-width: 920px) {
  .lfg-decouvrir { grid-template-columns: 1fr; gap: 14px; }
  .lfg-panneau-barre { display: block; }
  .lfg-panneau {
    position: fixed; z-index: 90; inset: auto 0 0 0; max-height: 86dvh; border-radius: 24px 24px 0 0; translate: 0 105%; visibility: hidden; transition: translate .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s;
    box-shadow: 0 -30px 70px -20px rgba(0, 0, 0, .8);
    &.ouvert { translate: 0 0; visibility: visible; transition: translate .3s cubic-bezier(.2, .8, .2, 1); }
  }
  .lfg-panneau-tete .lien-bouton { display: inline; }
  .lfg-pile { min-height: 0; max-height: 72dvh; }
  .lfg-comptes li { grid-template-columns: 1fr; }
  .lfg-profil-initiale { font-size: 84px; }
  .lfg-barre-enregistrer { bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .lfg-profil-carte, .lfg-panneau, .lfg-compat, .lfg-bouton, .lfg-planning-case { transition: none; }
  .lfg-match[open], .lfg-match-photo, .lfg-pastille-dispo i, .lfg-pile[aria-busy="true"]:empty::after { animation: none; }
}
@media print { .lfg-onglets, .lfg-filtres, .lfg-poster { display: none; } }

/* L'attribut hidden doit toujours l'emporter sur les display: grid / inline-grid ci-dessus. */
.lfg-decouvrir [hidden], .lfg-profil-carte [hidden], .lfg-photo-zone [hidden], .lfg-planning-bloc [hidden] { display: none !important; }
.lfg-champs-2 > div { display: grid; gap: 6px; align-content: start; min-width: 0; & select, & input { width: 100%; } }

/* Alignement des options : la règle globale « label { margin-top: 8px } » (02-cadre.css, avec une exception pour le premier label de son
   type) décalait les pastilles et les cases d'une même rangée. Les composants d'options ont leurs propres espacements (gap). */
label.lfg-chip, label.duo-theme, label.lfg-case, label.lfg-interrupteur, .lfg-age label, label.lfg-filtre-champ { margin-top: 0 !important; margin-bottom: 0; }
.lfg-groupe > .lfg-case + .lfg-case { margin-top: 10px !important; }
.lfg-chips, .duo-themes { align-items: center; }
.lfg-chip, .duo-theme { display: block; line-height: 1; }
.lfg-chip > span, .duo-theme > span { min-height: 38px; line-height: 1.2; box-sizing: border-box; }
.lfg-chips-grands .lfg-chip > span { min-height: 48px; }
.lfg-chip > span, .duo-theme > span { white-space: nowrap; max-width: 100%; }

/* ============================================================
   « Duo Gamer » (voir DUO.md) : cartes personnalisables (thèmes, photos), messagerie intégrée, gestion des photos, aperçu du profil.
   S'appuie sur les composants génériques de 24-lfg.css (onglets, pastilles, planning, sélecteur de jeux, interrupteurs, swipe).
   ============================================================ */

/* ---- Styles de carte : une teinte et une saturation pilotent l'accent, le dégradé de la photo et la bordure. Purement esthétiques ---- */
.duo-carte {
  --teinte: 265; --sat: 80%;
  --accent: hsl(var(--teinte) var(--sat) 68%);
  border-color: color-mix(in srgb, hsl(var(--teinte) var(--sat) 60%) 45%, var(--bordure));
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .75), 0 0 0 1px color-mix(in srgb, hsl(var(--teinte) var(--sat) 60%) 18%, transparent);
  &[data-theme="violet-neon"] { --teinte: 265; --sat: 85%; box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .75), 0 0 28px -8px hsl(265 90% 62% / .55); }
  &[data-theme="bleu-electrique"] { --teinte: 212; --sat: 95%; box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .75), 0 0 28px -8px hsl(205 100% 58% / .55); }
  &[data-theme="cyberpunk"] { --teinte: 318; --sat: 90%; --accent: #ffe14d;
    background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 3px); box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .75), 6px 6px 0 -2px hsl(55 100% 55% / .75); }
  &[data-theme="rgb"] { --teinte: 200; --sat: 90%; border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from var(--angle-rgb, 0deg), #ff3b6b, #ffd93b, #3bff8f, #3bb8ff, #a03bff, #ff3b6b) border-box; animation: duo-rgb 6s linear infinite; }
  &[data-theme="minimaliste"] { --teinte: 220; --sat: 8%; --accent: var(--texte); box-shadow: 0 16px 36px -28px rgba(0, 0, 0, .6); border-color: var(--bordure); }
  &[data-theme="dark-premium"] { --teinte: 42; --sat: 45%; background-image: linear-gradient(160deg, rgba(212, 175, 55, .08), transparent 40%); box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(212, 175, 55, .28); }
  &[data-theme="esport"] { --teinte: 6; --sat: 85%; background-image: linear-gradient(115deg, transparent 0 70%, hsl(6 85% 55% / .14) 70% 100%); box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .75), -4px 0 0 0 hsl(6 85% 55% / .8); }
  & .lfg-profil-photo { background: linear-gradient(135deg, hsl(var(--teinte) var(--sat) 36%), hsl(calc(var(--teinte) + 40) var(--sat) 20%)); }
  & .lfg-puces li:not(.commun):not(.plateforme) { border-color: color-mix(in srgb, hsl(var(--teinte) var(--sat) 60%) 35%, var(--bordure)); }
  & .lfg-profil-bloc h3 { color: var(--accent); }
  &.statique { position: relative; inset: auto; transform: none; opacity: 1; width: 100%; aspect-ratio: 3 / 4.6; min-height: 520px; cursor: default; }
}
@property --angle-rgb { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes duo-rgb { to { --angle-rgb: 360deg; } }
:root[data-theme="clair"] .duo-carte { --accent: hsl(var(--teinte) 70% 38%); }
@media (prefers-reduced-motion: reduce) { .duo-carte[data-theme="rgb"] { animation: none; } }

/* ---- Photos de la carte (jusqu'à 3) ---- */
.duo-photos { position: absolute; inset: 0; }
.duo-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity .25s; &.active { opacity: 1; } }
.duo-points { position: absolute; z-index: 3; inset: 10px 12px auto; display: flex; gap: 5px; list-style: none; margin: 0; padding: 0;
  & li { flex: 1; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .35); &.active { background: #fff; } }
  &[hidden] { display: none; }
}
.duo-photo-zone { position: absolute; z-index: 2; top: 0; bottom: 0; width: 38%; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
  &:focus-visible { outline: 3px solid var(--violet); outline-offset: -3px; }
  &[hidden] { display: none; } }
.duo-photo-prec { left: 0; } .duo-photo-suiv { right: 0; }
.lfg-profil-initiale { background: none; }
.duo-accroche { margin: -4px 0 0; font-weight: 700; color: var(--accent); }
.duo-humeur { margin: 0; justify-self: start; padding: 3px 12px; border-radius: 99px; font-size: 13px; font-weight: 700; background: color-mix(in srgb, hsl(var(--teinte) 80% 60%) 16%, transparent); border: 1px solid color-mix(in srgb, hsl(var(--teinte) 80% 60%) 40%, transparent); }

/* ---- Avatars ronds (liste de matchs, en-tête de conversation) ---- */
.duo-avatar { --teinte: 260; display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, hsl(var(--teinte) 55% 42%), hsl(calc(var(--teinte) + 50) 60% 28%));
  & img { width: 100%; height: 100%; object-fit: cover; }
}
.duo-avatar-grand { width: 54px; height: 54px; font-size: 22px; }
.duo-onglet-compte { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; font-size: 12px; font-weight: 900; background: var(--surface-claire); border: 1px solid var(--bordure); }

/* ---- Messagerie intégrée ---- */
.duo-messagerie { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 18px; align-items: stretch; height: min(74dvh, 720px); min-height: 480px; }
.duo-liste-panneau { display: flex; flex-direction: column; min-height: 0; padding: 16px; border: 1px solid var(--bordure); border-radius: 20px; background: var(--surface);
  & h2 { margin: 0 0 12px; font-size: 18px; }
  & .lfg-info { margin: 10px 0 0; font-size: 13px; }
}
.duo-liste { flex: 1; min-height: 0; overflow: auto; display: grid; align-content: start; gap: 6px; list-style: none; margin: 0; padding: 0; }
.duo-ligne { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--texte); cursor: pointer; transition: background .15s, border-color .15s;
  &:hover { background: var(--surface-claire); }
  &[aria-current="true"] { background: rgba(var(--violet-rgb), .14); border-color: rgba(var(--violet-rgb), .45); }
  &:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
  & .lfg-onglet-pastille { margin-left: auto; }
}
.duo-ligne-texte { display: grid; min-width: 0; flex: 1; & strong, & small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & small { color: var(--texte-doux); font-weight: 500; } }

.duo-fil { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--bordure); border-radius: 20px; background: var(--surface); overflow: hidden; }
.duo-fil-vide { display: grid; place-content: center; justify-items: center; gap: 10px; flex: 1; color: var(--texte-doux); text-align: center; &[hidden] { display: none; } }
.duo-fil-contenu { display: flex; flex-direction: column; flex: 1; min-height: 0; &[hidden] { display: none; } }
.duo-fil-tete { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--bordure); }
.duo-fil-profil { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--texte); text-align: left; cursor: pointer; }
.duo-fil-titre { display: grid; min-width: 0; & strong, & small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & small { color: var(--texte-doux); } }
.duo-retour { display: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bordure); background: var(--surface-claire); color: var(--texte); font-size: 22px; cursor: pointer; }
.duo-menu { position: relative; & > summary { list-style: none; cursor: pointer; } & > summary::-webkit-details-marker { display: none; }
  & .duo-menu-corps { position: absolute; z-index: 20; right: 0; top: calc(100% + 6px); display: grid; gap: 6px; min-width: 200px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--bordure); background: var(--surface); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); }
}
.duo-infos { padding: 8px 16px; border-bottom: 1px solid var(--bordure); background: color-mix(in srgb, var(--surface-claire) 50%, transparent);
  & > summary { cursor: pointer; font-weight: 700; font-size: 13.5px; }
  & .duo-infos-corps { display: grid; gap: 8px; padding: 10px 0 4px; }
  & .lfg-identifiants:empty { display: none; }
}
.duo-messages { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 16px; scroll-behavior: smooth; overscroll-behavior: contain; }
.duo-jour, .duo-plus { align-self: center; margin: 8px 0; font-size: 12px; font-weight: 700; color: var(--texte-doux); text-transform: capitalize; }
.duo-message { position: relative; max-width: min(78%, 520px); padding: 8px 12px; border-radius: 18px; line-height: 1.45; overflow-wrap: anywhere;
  & p { margin: 0; white-space: pre-wrap; }
  & time { display: block; margin-top: 2px; font-size: 11px; opacity: .7; }
  &.duo-message-moi { align-self: flex-end; border-bottom-right-radius: 6px; color: var(--bouton-texte); background: linear-gradient(135deg, var(--violet), color-mix(in srgb, var(--violet) 60%, #2F7BFF)); & time { text-align: right; } }
  &.duo-message-lui { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--surface-claire); border: 1px solid var(--bordure); }
  @starting-style { opacity: 0; translate: 0 6px; }
  transition: opacity .2s, translate .2s;
}
.duo-signaler-message { position: absolute; left: calc(100% + 8px); top: 50%; translate: 0 -50%; font-size: 11px; color: var(--texte-doux); opacity: 0; white-space: nowrap; transition: opacity .15s; }
.duo-message:hover .duo-signaler-message, .duo-signaler-message:focus-visible { opacity: 1; }
.duo-notice { margin: 0; padding: 6px 16px; font-size: 12px; color: var(--texte-doux); border-top: 1px solid var(--bordure); }
.duo-brise-glace { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 8px; &[hidden] { display: none; } }
.duo-composer { display: flex; gap: 10px; align-items: flex-end; padding: 12px 16px 14px;
  & textarea { flex: 1; resize: none; min-height: 44px; max-height: 140px; padding: 11px 14px; border-radius: 16px; line-height: 1.4; }
}

.duo-dialogue-profil { width: min(94vw, 460px); max-height: 92dvh; padding: 0; border: 0; border-radius: 26px; background: var(--surface); color: var(--texte); overflow: auto;
  &::backdrop { background: rgba(8, 6, 16, .72); backdrop-filter: blur(6px); }
}
.duo-dialogue-fermer { position: absolute; z-index: 10; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: #fff; background: rgba(0, 0, 0, .55); }
.duo-dialogue-carte .duo-carte.statique { min-height: 0; aspect-ratio: auto; height: auto; & .lfg-profil-photo { flex-basis: auto; aspect-ratio: 4 / 3; } & .lfg-profil-corps { overflow: visible; } }

/* ---- Profil Duo : mise en page, photos, thèmes, aperçu ---- */
.duo-profil-page { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.duo-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; & input { width: 100%; padding: 10px 12px; border-radius: 12px; } }
.duo-apercu { position: sticky; top: 84px; display: grid; gap: 10px; & h2 { margin: 0; font-size: 16px; } }
.duo-apercu-carte { & .duo-carte.statique { min-height: 0; aspect-ratio: auto; & .lfg-profil-photo { flex-basis: auto; aspect-ratio: 4 / 3.4; } & .lfg-profil-corps { overflow: visible; } } }

.duo-photos-gestion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 12px 0 0; padding: 0;
  & li { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; border: 1px solid var(--bordure); background: var(--surface-claire); display: grid; place-items: center; text-align: center; color: var(--texte-doux); font-size: 13px; font-weight: 600; }
  & li.vide { border-style: dashed; }
  & img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
.duo-photo-actions { position: absolute; z-index: 2; inset: auto 6px 6px; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.duo-photo-principale { position: absolute; z-index: 2; left: 6px; top: 6px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .6); }
.duo-mini { padding: 4px 9px; border: 0; border-radius: 99px; font-size: 12px; font-weight: 800; cursor: pointer; color: #fff; background: rgba(0, 0, 0, .65); &:hover { background: rgba(0, 0, 0, .85); } &.duo-mini-danger { background: rgba(190, 18, 60, .85); } }
.duo-ajout { padding: 10px 14px; border-radius: 12px; border: 1px dashed rgba(var(--violet-rgb), .6); background: rgba(var(--violet-rgb), .1); color: var(--violet); font-weight: 800; cursor: pointer; &:hover { background: rgba(var(--violet-rgb), .2); } }

.duo-themes { display: flex; flex-wrap: wrap; gap: 10px; }
.duo-theme { position: relative; cursor: pointer;
  & input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  & span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 99px; font-weight: 700; font-size: 13.5px; border: 1px solid var(--bordure); background: var(--surface-claire); }
  & i { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, hsl(var(--t) var(--s) 62%), hsl(calc(var(--t) + 40) var(--s) 36%)); }
  & input:checked + span { border-color: hsl(var(--t) var(--s) 62%); box-shadow: 0 0 0 2px color-mix(in srgb, hsl(var(--t) var(--s) 62%) 40%, transparent); }
  & input:focus-visible + span { outline: 2px solid var(--violet); outline-offset: 2px; }
  &[data-theme="violet-neon"] { --t: 265; --s: 85%; } &[data-theme="bleu-electrique"] { --t: 212; --s: 95%; } &[data-theme="cyberpunk"] { --t: 318; --s: 90%; }
  &[data-theme="rgb"] { --t: 150; --s: 90%; } &[data-theme="minimaliste"] { --t: 220; --s: 8%; } &[data-theme="dark-premium"] { --t: 42; --s: 45%; } &[data-theme="esport"] { --t: 6; --s: 85%; }
  &[data-theme="rgb"] i { background: conic-gradient(#ff3b6b, #ffd93b, #3bff8f, #3bb8ff, #a03bff, #ff3b6b); }
}

@media (max-width: 1080px) { .duo-profil-page { grid-template-columns: 1fr; } .duo-apercu { position: static; order: -1; } .duo-apercu-carte { max-width: 420px; } }
@media (max-width: 920px) {
  .duo-messagerie { grid-template-columns: 1fr; height: min(78dvh, 760px); }
  .duo-messagerie[data-vue="liste"] .duo-fil { display: none; }
  .duo-messagerie[data-vue="fil"] .duo-liste-panneau { display: none; }
  .duo-retour { display: inline-grid; place-items: center; }
  .duo-message { max-width: 86%; }
  .duo-signaler-message { position: static; translate: none; opacity: 1; display: inline-block; margin-top: 2px; }
  .duo-champs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .duo-photos-gestion { gap: 8px; } .duo-mini { padding: 3px 7px; font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .duo-photos img, .duo-message, .duo-ligne { transition: none; } .duo-messages { scroll-behavior: auto; } .duo-message { @starting-style { opacity: 1; translate: 0 0; } } }

/* L'attribut hidden doit toujours l'emporter sur les display: grid / flex ci-dessus. */
.duo-messagerie [hidden], .duo-onglets [hidden], .duo-carte [hidden], .duo-photos-gestion [hidden] { display: none !important; }
@media (max-width: 920px) { .lfg-pile { max-height: none; aspect-ratio: 3 / 5.3; min-height: 560px; } }

/* ============================================================
   « Duo Gamer » : application (voir DUO.md) — gabarit à trois colonnes, navigation de gauche et barre du bas, modes, actions de swipe, célébration de match,
   messagerie à onglets, Quick Duo, sessions, Duo Mystery, profil, préférences, confidentialité, présentation visiteurs et administration.
   Reprend les variables du thème du forum (clair / sombre) ; mouvements supprimés avec « réduire les animations ».
   ============================================================ */

/* ---- Gabarit ---- */
.duo-app { display: grid; grid-template-columns: 232px minmax(0, 1fr) 300px; gap: 24px; align-items: start; padding-bottom: 24px; }
.duo-nav-gauche { position: sticky; top: 84px; display: grid; gap: 14px; padding: 16px; border: 1px solid var(--bordure); border-radius: 22px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px);
  & ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
}
.duo-marque { display: grid; gap: 2px; padding: 4px 6px 10px; border-bottom: 1px solid var(--bordure);
  & strong { font-size: 20px; font-weight: 900; letter-spacing: -.02em; background: linear-gradient(90deg, #a78bfa, #34d399); -webkit-background-clip: text; background-clip: text; color: transparent; }
  & span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
}
.duo-lien { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 13px; font-weight: 700; font-size: 14.5px; color: var(--texte-doux); text-decoration: none; transition: background .15s, color .15s;
  & .lr-icone { width: 19px; height: 19px; flex: none; }
  & span { flex: 1; }
  &:hover { color: var(--texte); background: var(--surface-claire); text-decoration: none; }
  &.actif { color: var(--bouton-texte); background: linear-gradient(135deg, var(--violet), color-mix(in srgb, var(--violet) 55%, #2F7BFF)); box-shadow: 0 8px 20px -12px rgba(var(--violet-rgb), .9); }
  &:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
}
.duo-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; font-size: 12px; font-weight: 900; background: #FF2E43; color: #fff; &[hidden] { display: none; } }
.duo-compte { font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: var(--surface-claire); color: var(--texte-doux); border: 1px solid var(--bordure); }
.duo-retour-forum { display: flex; align-items: center; gap: 6px; padding: 8px 6px 0; font-size: 13px; font-weight: 700; color: var(--texte-doux); text-decoration: none; border-top: 1px solid var(--bordure); & .lr-icone { width: 15px; height: 15px; rotate: 180deg; } &:hover { color: var(--texte); } }
.duo-centre { min-width: 0; display: grid; gap: 18px; align-content: start; }

.duo-rail { position: sticky; top: 84px; display: grid; gap: 14px; }
.duo-widget { padding: 16px; border: 1px solid var(--bordure); border-radius: 18px; background: var(--surface); &[hidden] { display: none; }
  & h2 { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .07em; color: var(--texte-doux); }
  & p { margin: 0 0 8px; font-weight: 600; }
}
.duo-widget-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
  & a { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; color: var(--texte); text-decoration: none; &:hover { background: var(--surface-claire); } }
}
.duo-widget-texte { display: grid; min-width: 0; flex: 1; & strong, & small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & small { color: var(--texte-doux); } }
.duo-avatar-petit { width: 36px; height: 36px; font-size: 15px; }
.duo-rail-vide { margin: 0; padding: 14px; border: 1px dashed var(--bordure); border-radius: 16px; color: var(--texte-doux); font-size: 13.5px; line-height: 1.45; &[hidden] { display: none; } }

/* ---- Barre du bas (téléphone) ---- */
.duo-nav-bas { display: none; }
@media (max-width: 1180px) { .duo-app { grid-template-columns: 220px minmax(0, 1fr); } .duo-rail { display: none; } }
@media (max-width: 920px) {
  .duo-app { grid-template-columns: 1fr; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .duo-nav-gauche { display: none; }
  .duo-nav-bas { position: fixed; z-index: 900; inset: auto 0 0 0; display: grid; grid-template-columns: repeat(6, 1fr); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bordure); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px);
    box-shadow: 0 -10px 30px -14px rgba(0, 0, 0, .6); }
  .duo-bas-lien { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border: 0; background: none; border-radius: 12px; color: var(--texte-doux); font: inherit; font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer;
    & .lr-icone { width: 22px; height: 22px; }
    &.actif { color: var(--violet); & .lr-icone { filter: drop-shadow(0 0 6px rgba(var(--violet-rgb), .7)); } }
    & .duo-badge { position: absolute; top: 0; right: 14%; min-width: 17px; height: 17px; font-size: 10px; }
  }
  .duo-plus-menu { position: fixed; inset: auto 10px calc(70px + env(safe-area-inset-bottom)) auto; margin: 0; width: min(280px, calc(100vw - 20px)); padding: 8px; border: 1px solid var(--bordure); border-radius: 18px; background: var(--surface); color: var(--texte); box-shadow: 0 20px 50px -16px rgba(0, 0, 0, .7);
    & a { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; color: var(--texte); font-weight: 700; text-decoration: none; & .lr-icone { width: 18px; height: 18px; } &:hover { background: var(--surface-claire); } }
  }
}
@media (min-width: 921px) { .duo-plus-menu { display: none; } }

/* ---- En-têtes de page ---- */
.duo-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.duo-titre { margin: 0; font-size: clamp(26px, 4vw, 38px); font-weight: 900; letter-spacing: -.03em; line-height: 1.1;
  background: linear-gradient(90deg, var(--texte), color-mix(in srgb, var(--violet) 70%, var(--texte))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.duo-sous-titre { margin: 6px 0 0; color: var(--texte-doux); line-height: 1.5; max-width: 62ch; }
.duo-titre-section { margin: 0; font-size: 18px; }
.duo-supers { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; font-weight: 800; background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .45); &[hidden] { display: none; } }

/* ---- Découvrir : modes, barre d'outils, états ---- */
.duo-decouvrir { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.duo-barre-outils { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; grid-column: 1 / -1; }
.duo-modes { display: flex; gap: 6px; padding: 4px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--bordure); border-radius: 16px; background: var(--surface); &::-webkit-scrollbar { display: none; } }
.duo-mode { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 9px 15px; border: 0; border-radius: 12px; background: none; color: var(--texte-doux); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; transition: background .15s, color .15s;
  &:hover { color: var(--texte); background: var(--surface-claire); }
  &.actif { color: var(--bouton-texte); background: linear-gradient(135deg, var(--violet), color-mix(in srgb, var(--violet) 55%, #2F7BFF)); }
  &[data-inactif] { opacity: .75; }
  &:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
  & .duo-mode-etat { font-style: normal; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 99px; background: rgba(0, 0, 0, .25); }
}
.duo-decouvrir .lfg-panneau { position: fixed; z-index: 90; inset: 0 0 0 auto; width: min(380px, 100vw); max-height: none; border-radius: 22px 0 0 22px; translate: 105% 0; visibility: hidden; transition: translate .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s; box-shadow: -30px 0 70px -24px rgba(0, 0, 0, .8);
  &.ouvert { translate: 0 0; visibility: visible; transition: translate .3s cubic-bezier(.2, .8, .2, 1); }
  & .lfg-panneau-tete .lien-bouton { display: inline; }
}
.duo-decouvrir .lfg-panneau-barre { display: flex; }
.duo-actions { gap: 16px; flex-wrap: wrap; }
.duo-bouton-super { width: 56px; height: 56px; color: #f59e0b; & svg { width: 26px; height: 26px; } &:hover:not(:disabled) { color: #fff; background: #f59e0b; border-color: transparent; box-shadow: 0 14px 28px -12px rgba(245, 158, 11, .8); } }
.duo-bouton-detail { width: 50px; height: 50px; &:hover:not(:disabled) { color: var(--violet); } }
.duo-etat, .duo-mode-inactif { margin: 20px auto; }
.duo-vide-riche { max-width: 560px; }
.duo-pistes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; color: var(--texte-doux); font-size: 14px; text-align: left; & a { font-weight: 700; } }
.duo-mode-inactif[hidden], .lfg-pile[hidden] { display: none; }

/* ---- Carte : compléments ---- */
.duo-modes-puces { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: -4px 0 0; padding: 0; &:empty { display: none; }
  & li { padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 800; background: color-mix(in srgb, var(--accent, var(--violet)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent, var(--violet)) 35%, transparent); }
}
.duo-pourquoi { margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; background: color-mix(in srgb, #34d399 10%, transparent); border: 1px solid color-mix(in srgb, #34d399 30%, transparent); &[hidden] { display: none; } }
.duo-quick-info { margin: 0; font-weight: 800; color: #34d399; font-size: 13.5px; &[hidden] { display: none; } }
.duo-super { position: absolute; z-index: 3; left: 14px; top: 38px; padding: 4px 12px; border-radius: 99px; font-weight: 900; font-size: 13px; color: #1b1100; background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 8px 20px -8px rgba(245, 158, 11, .9); &[hidden] { display: none; } }
.lfg-compat { cursor: default; border: 0; padding: 0; font: inherit; &.sans-score { background: radial-gradient(closest-side, rgba(10, 8, 20, .82) 78%, transparent 80% 100%), conic-gradient(rgba(255, 255, 255, .35) 0 100%); } &[hidden] { display: none; } }
.duo-decouvrir-plus { justify-self: start; }
.duo-detail { display: grid; gap: 10px; &[hidden] { display: none; } }
.duo-criteres { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
  & li { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; }
  & i { height: 8px; border-radius: 4px; background: var(--bordure); position: relative; overflow: hidden; &::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--part); border-radius: 4px; background: linear-gradient(90deg, var(--accent, var(--violet)), #34d399); } }
}
.duo-live-lien { font-weight: 800; }
.duo-arena { margin: 0; }
.duo-dialogue-carte .duo-carte.statique .duo-detail { display: grid; }

/* ---- Célébration de match ---- */
.duo-match-fete { overflow: hidden; width: min(94vw, 480px);
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--violet) 40%, var(--surface)), var(--surface) 62%); box-shadow: 0 0 80px -10px rgba(var(--violet-rgb), .75), 0 40px 90px -20px rgba(0, 0, 0, .8);
  &[open] { animation: lfg-match-entree .5s cubic-bezier(.34, 1.56, .64, 1); }
  & .lfg-match-contenu { position: relative; z-index: 1; }
  & h2 { font-size: clamp(28px, 7vw, 38px); letter-spacing: -.02em; text-shadow: 0 0 30px rgba(var(--violet-rgb), .6); }
}
.duo-match-sous { font-weight: 700; color: var(--texte); }
.duo-match-detail { color: var(--texte-doux); }
.duo-particules { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  & i { position: absolute; top: -12px; left: var(--x); width: 8px; height: 14px; border-radius: 2px; background: var(--c); rotate: var(--r); opacity: 0; animation: duo-chute var(--d) var(--delai) ease-in forwards; }
}
@keyframes duo-chute { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: var(--dx) 420px; rotate: 540deg; } }

/* ---- Messagerie : onglets du match ---- */
.duo-messagerie { height: min(76dvh, 760px); }
.duo-onglets-fil { display: flex; gap: 4px; padding: 6px 12px 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--bordure);
  & button { flex: none; padding: 9px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--texte-doux); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; &[aria-selected="true"] { color: var(--texte); border-color: var(--violet); } &:hover { color: var(--texte); } &:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; border-radius: 8px; } }
}
.duo-panneau { display: flex; flex-direction: column; flex: 1; min-height: 0; &[hidden] { display: none; } }
.duo-panneau-corps { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: grid; gap: 14px; align-content: start; & h3 { margin: 0; font-size: 15px; } & h4 { margin: 6px 0 0; font-size: 13.5px; color: var(--texte-doux); } }
.duo-bloc-mp { padding: 14px 16px; display: grid; gap: 10px; justify-items: start; border-top: 1px solid var(--bordure); & p { margin: 0; } &[hidden] { display: none; } }
.duo-brise-titre { flex-basis: 100%; font-size: 12px; font-weight: 700; color: var(--texte-doux); }
.duo-gout-liste, .duo-gout-reco, .duo-chimie-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
  & li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface-claire); border: 1px solid var(--bordure); & small { color: var(--texte-doux); } }
}
.duo-gout-marque { font-size: 16px; }
.duo-gout-analyse { margin: 0; padding: 10px 14px; border-radius: 14px; font-weight: 700; background: color-mix(in srgb, var(--violet) 12%, transparent); border: 1px solid color-mix(in srgb, var(--violet) 30%, transparent); }
.duo-chimie-liste li { display: grid; gap: 2px; &.commune { border-color: color-mix(in srgb, #34d399 50%, var(--bordure)); } &.differente { border-color: color-mix(in srgb, #f59e0b 45%, var(--bordure)); } }
.duo-question { border: 1px solid var(--bordure); border-radius: 16px; padding: 12px 14px; margin: 0; display: grid; gap: 8px; min-width: 0; & legend { padding: 0 6px; font-weight: 800; font-size: 14px; } & .lfg-chip { display: block; } & .lfg-chip span { white-space: normal; text-align: left; line-height: 1.3; } }
.duo-section-actions { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--bordure); border-radius: 16px; background: color-mix(in srgb, var(--surface-claire) 40%, transparent); }
.duo-form-session { display: grid; gap: 10px; & label { display: grid; gap: 4px; font-weight: 700; font-size: 13px; } & input:not([type="checkbox"]), & select { width: 100%; padding: 9px 11px; border-radius: 10px; } }
.duo-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.duo-sessions-match { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; color: var(--texte-doux); }
.duo-room { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 12px; border-radius: 12px; background: var(--surface-claire); border: 1px solid var(--bordure); & small { color: var(--texte-doux); display: block; } }
.duo-liens-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.duo-signaler-message { border: 0; background: none; cursor: pointer; font: inherit; }
.duo-dialogue-simple { width: min(94vw, 440px); padding: 0; border: 0; border-radius: 22px; background: var(--surface); color: var(--texte); box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .8); &::backdrop { background: rgba(8, 6, 16, .72); backdrop-filter: blur(6px); } }
.duo-form-signalement { display: grid; gap: 12px; padding: 22px; margin: 0; & h2 { margin: 0; font-size: 20px; } & p { margin: 0; } & label { display: grid; gap: 4px; font-weight: 700; font-size: 13px; } & select, & textarea, & input { width: 100%; padding: 9px 11px; border-radius: 10px; } }
.duo-dialogue-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* ---- Blocs génériques, Quick Duo, sessions, Mystery ---- */
.duo-carte-bloc { display: grid; gap: 12px; padding: 18px 20px; border: 1px solid var(--bordure); border-radius: 20px; background: var(--surface); &[hidden] { display: none; } & h2 { margin: 0; font-size: 18px; } & h3 { margin: 0; font-size: 15px; } }
.duo-boutons-ligne { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.duo-quick { display: grid; gap: 18px; }
.duo-quick-badge { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; }
.duo-pastille-verte { width: 12px; height: 12px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); animation: duo-pouls 1.8s ease-out infinite; }
@keyframes duo-pouls { to { box-shadow: 0 0 0 12px rgba(52, 211, 153, 0); } }
.duo-form-quick { display: grid; gap: 12px; & label { display: grid; gap: 4px; font-weight: 700; font-size: 13px; } & input:not([type="checkbox"]), & select { width: 100%; padding: 9px 11px; border-radius: 10px; } & [hidden] { display: none; } }
.duo-quick-actif[hidden] { display: none; }
.duo-invitations { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; & li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-claire); border: 1px solid var(--bordure); } }
.duo-invitation-texte { display: grid; flex: 1 1 200px; & small { color: var(--texte-doux); } }
.duo-q-scene { justify-items: stretch; }
.duo-q-scene > .lfg-pile { justify-self: center; }
.duo-sessions { display: grid; gap: 16px; }
.duo-sessions-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.duo-session { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; border-radius: 16px; background: var(--surface-claire); border: 1px solid var(--bordure);
  &.duo-session-acceptee { border-color: color-mix(in srgb, #34d399 50%, var(--bordure)); } &.duo-session-annulee, &.duo-session-refusee, &.duo-session-remplacee { opacity: .7; }
}
.duo-session-texte { display: grid; gap: 2px; flex: 1 1 260px; & small { color: var(--texte-doux); } }
.duo-session-statut { font-size: 12.5px; font-weight: 800; color: var(--texte-doux); }
.duo-vide-texte { margin: 0; color: var(--texte-doux); }
.duo-etapes { display: grid; gap: 8px; padding-left: 20px; margin: 0; & li { line-height: 1.5; } }
.duo-m-liste { display: grid; gap: 16px; }
.duo-m-rencontre { gap: 10px; }
.duo-m-tete { display: flex; align-items: center; gap: 12px; & strong { display: block; } & small { color: var(--texte-doux); } }
.duo-m-alias { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 28px; background: linear-gradient(135deg, rgba(var(--violet-rgb), .35), rgba(47, 123, 255, .3)); border: 1px solid var(--bordure); }
.duo-m-sienne { margin: 0; font-size: 13.5px; color: var(--texte-doux); }
.duo-m-reponse { display: flex; gap: 8px; & input { flex: 1; padding: 9px 11px; border-radius: 10px; } }
.duo-m-messages { max-height: 260px; overflow: auto; border: 1px solid var(--bordure); border-radius: 14px; }
.duo-m-attente { margin: 0; font-weight: 700; }

/* ---- Profil, préférences, confidentialité ---- */
.duo-modes-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.duo-mode-carte { position: relative; display: block; cursor: pointer;
  & input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  & span { display: grid; gap: 3px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--bordure); background: var(--surface-claire); transition: border-color .15s, background .15s; }
  & small { color: var(--texte-doux); font-weight: 500; line-height: 1.35; }
  & input:checked + span { border-color: var(--violet); background: rgba(var(--violet-rgb), .14); }
  & input:focus-visible + span { outline: 2px solid var(--violet); outline-offset: 2px; }
  & input:disabled + span { opacity: .5; cursor: not-allowed; }
}
.duo-consentement { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--surface-claire); border-left: 3px solid #ff5a6b; line-height: 1.5; }
.duo-interets { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 8px; padding: 0; &:empty { display: none; }
  & li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 11px; border-radius: 99px; font-size: 13px; font-weight: 700; background: rgba(var(--violet-rgb), .14); border: 1px solid rgba(var(--violet-rgb), .45); }
  & button { width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer; background: transparent; color: var(--texte); font-size: 16px; line-height: 1; &:hover { background: rgba(var(--violet-rgb), .3); } }
}
.duo-interet-ajout { display: flex; gap: 8px; & input { flex: 1; padding: 9px 11px; border-radius: 10px; } }
.duo-details-jeux { margin-top: 12px; &[hidden] { display: none; } & h3 { margin: 0 0 8px; font-size: 14px; } & ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  & li { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; & input { padding: 7px 9px; border-radius: 9px; min-width: 0; } }
}
.duo-voix { display: grid; gap: 10px; & audio { width: 100%; max-width: 420px; } }
.duo-voix-etat { margin: 0; font-weight: 600; }
.duo-defis { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.duo-defi { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface-claire); border: 1px solid var(--bordure); opacity: .7; & div { display: grid; } & small { color: var(--texte-doux); } &.obtenu { opacity: 1; border-color: color-mix(in srgb, #f59e0b 55%, var(--bordure)); } }
.duo-defi-emoji { font-size: 26px; }
.duo-liste-simple { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; }
.duo-controles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; & li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; border-radius: 14px; background: var(--surface-claire); border: 1px solid var(--bordure); } & div { display: grid; flex: 1 1 260px; } & small { color: var(--texte-doux); } }
.duo-zone-danger { border-color: rgba(225, 29, 72, .45); }
.duo-form-suppression { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; & label { display: grid; gap: 4px; font-weight: 700; & input { padding: 9px 11px; border-radius: 10px; } } }
.duo-preferences, .duo-confidentialite { display: grid; gap: 18px; max-width: 860px; }

/* ---- Présentation pour les visiteurs ---- */
.duo-heros { position: relative; display: grid; justify-items: center; gap: 12px; padding: clamp(36px, 7vw, 84px) 20px; text-align: center; overflow: hidden; border-radius: 28px; border: 1px solid var(--bordure);
  background: radial-gradient(100% 90% at 50% 0%, color-mix(in srgb, var(--violet) 26%, var(--surface)), var(--surface) 70%); margin-bottom: 24px;
  & h1 { margin: 0; font-size: clamp(40px, 9vw, 76px); font-weight: 900; letter-spacing: -.04em; line-height: 1; background: linear-gradient(90deg, #a78bfa, #2F7BFF, #34d399); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.duo-heros-surtitre { margin: 0; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; color: var(--violet); }
.duo-heros-accroche { margin: 0; font-size: clamp(18px, 3vw, 26px); font-weight: 800; }
.duo-heros-texte { margin: 0; max-width: 62ch; color: var(--texte-doux); line-height: 1.6; }
.duo-heros-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.duo-heros-fond { position: absolute; inset: 0; pointer-events: none; & span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; animation: duo-flotte 14s ease-in-out infinite alternate;
  &:nth-child(1) { width: 280px; height: 280px; left: -60px; top: -40px; background: #7c3aed; } &:nth-child(2) { width: 240px; height: 240px; right: -40px; top: 30%; background: #2F7BFF; animation-delay: -5s; } &:nth-child(3) { width: 200px; height: 200px; left: 40%; bottom: -80px; background: #10b981; animation-delay: -9s; } } }
@keyframes duo-flotte { to { translate: 30px 24px; } }
.duo-bloc-accueil { display: grid; gap: 14px; padding: 8px 0 24px; & h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; } }
.duo-modes-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.duo-mode-presentation { padding: 18px; border: 1px solid var(--bordure); border-radius: 20px; background: var(--surface); & h3 { margin: 0 0 6px; font-size: 18px; } & p { margin: 0; color: var(--texte-doux); line-height: 1.5; } }
.duo-etapes-grandes { counter-reset: etape; list-style: none; padding: 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px;
  & li { counter-increment: etape; display: grid; gap: 4px; padding: 18px 18px 18px 64px; position: relative; border: 1px solid var(--bordure); border-radius: 20px; background: var(--surface);
    &::before { content: counter(etape); position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 900; color: var(--bouton-texte); background: linear-gradient(135deg, var(--violet), #2F7BFF); }
    & span { color: var(--texte-doux); line-height: 1.5; } }
}
.duo-securite { padding: 20px; border: 1px solid var(--bordure); border-radius: 22px; background: color-mix(in srgb, var(--surface) 90%, transparent); }
.duo-heros-fin { display: grid; justify-items: center; gap: 12px; padding: 36px 16px 8px; text-align: center; & h2 { margin: 0; } }

/* ---- Administration ---- */
.admin-grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 16px 0; }
.admin-stat { display: grid; gap: 2px; padding: 16px; border: 1px solid var(--bordure); border-radius: 16px; background: var(--surface); & strong { font-size: 30px; font-weight: 900; letter-spacing: -.02em; } & span { font-weight: 700; } & small { color: var(--texte-doux); } }
.admin-bloc { display: grid; gap: 10px; margin: 20px 0; padding: 18px 20px; border: 1px solid var(--bordure); border-radius: 18px; background: var(--surface); & h2 { margin: 0; font-size: 18px; } }
.admin-duo-reglages { display: grid; gap: 14px; & fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; padding: 14px; border: 1px solid var(--bordure); border-radius: 14px; & legend { padding: 0 8px; font-weight: 800; } } & label { display: grid; gap: 4px; font-weight: 600; } & .lfg-case { display: flex; } & input[type="number"] { padding: 8px 10px; border-radius: 9px; } }
.tableau-admin { width: 100%; border-collapse: collapse; font-size: 13.5px; & th, & td { padding: 6px 8px; border-bottom: 1px solid var(--bordure); text-align: left; } }

@media (max-width: 920px) {
  .duo-decouvrir .lfg-panneau { inset: auto 0 0 0; width: auto; max-height: 86dvh; border-radius: 24px 24px 0 0; translate: 0 105%; }
  .duo-decouvrir .lfg-panneau.ouvert { translate: 0 0; }
  .duo-criteres li { grid-template-columns: 96px 1fr; }
  .duo-details-jeux li { grid-template-columns: 1fr 1fr; & strong { grid-column: 1 / -1; } }
  .duo-actions { gap: 12px; }
  .duo-onglets-fil { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .duo-heros-fond span, .duo-pastille-verte, .duo-particules i, .duo-match-fete[open] { animation: none; }
  .duo-lien, .duo-mode, .duo-mode-carte span, .duo-decouvrir .lfg-panneau { transition: none; }
}

/* ---- Ajustements de mise en page (après revue visuelle) ---- */
/* La pile de cartes s'adapte à la hauteur de l'écran pour que les boutons d'action restent visibles. */
.duo-decouvrir .lfg-pile, .duo-q-scene .lfg-pile { aspect-ratio: auto; height: clamp(500px, calc(100dvh - 330px), 700px); min-height: 0; max-height: none; }
.duo-form-quick .lfg-case, .duo-form-session .lfg-case { display: flex; }
.duo-infos .duo-infos-corps { max-height: 150px; overflow: auto; }
.duo-panneau .duo-messages { min-height: 160px; }
.duo-infos[open] + .duo-messages { min-height: 120px; }
@media (max-width: 920px) {
  .duo-app[data-onglet="decouvrir"] .duo-sous-titre { display: none; }
  .duo-decouvrir .lfg-pile, .duo-q-scene .lfg-pile { height: clamp(430px, calc(100dvh - 380px), 640px); }
  /* Les boutons de swipe restent à portée du pouce, juste au-dessus de la barre du bas. */
  .duo-actions { position: sticky; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 8; padding: 8px 0; margin-top: -4px; background: linear-gradient(0deg, color-mix(in srgb, var(--fond) 92%, transparent) 60%, transparent); }
}

/* ---- Mon profil : la colonne de droite est retirée pour laisser la place au formulaire et à l'aperçu en direct ---- */
@media (min-width: 1181px) { .duo-app[data-onglet="profil"] { grid-template-columns: 232px minmax(0, 1fr); & .duo-rail { display: none; } } }
.duo-centre { width: 100%; min-width: 0; justify-self: stretch; }
/* La page « Mon profil » empile l'aperçu au-dessus du formulaire quand la place manque (colonne centrale d'environ 880 px ou moins). */
@media (max-width: 1160px) {
  .duo-profil-page { grid-template-columns: minmax(0, 1fr); & .duo-apercu { position: static; order: -1; } & .duo-apercu-carte { max-width: 420px; } }
}
.duo-profil-page .lfg-section {
  & .lfg-interrupteur { margin-block: 0; padding: 12px 0; align-items: center; & + .lfg-interrupteur { border-top: 1px solid var(--bordure); } & strong { display: block; margin-bottom: 2px; font-weight: 700; } }
  & .lfg-case { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 4px 0; & span { font-weight: 600; } }
  & .aide + .lfg-interrupteur, & .lfg-interrupteur + .aide { margin-top: 10px; }
}
.duo-profil-page .duo-photos-gestion { margin-bottom: 14px; & li { aspect-ratio: 4 / 5; max-height: 230px; } }
.duo-modes-choix .duo-mode-carte { margin: 0; }

/* ============================================================
   Communication & email marketing : pages membre (préférences, partage, désinscription) et administration des campagnes.
   ============================================================ */

.com-bloc { display: grid; gap: 12px; margin: 20px 0; padding: 20px 22px; border: 1px solid var(--bordure); border-radius: 18px; background: var(--surface);
  & h2 { margin: 0; font-size: 18px; }
  & p { margin: 0; line-height: 1.55; }
}
.com-desinscription { max-width: 640px; margin-inline: auto; }
.com-case { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 4px 0; font-weight: 600; line-height: 1.5; cursor: pointer;
  & input { flex: none; width: 20px; height: 20px; margin-top: 2px; }
}
.com-message { width: 100%; padding: 12px 14px; border-radius: 12px; line-height: 1.5; resize: vertical; font: inherit; }
.com-boutons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; & form { margin: 0; } & [hidden] { display: none; } }
.com-copie { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; & input { flex: 1 1 260px; min-width: 0; padding: 10px 12px; border-radius: 12px; } }

/* Administration */
.com-liste { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.com-avertissement { margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, #f59e0b 55%, transparent); background: color-mix(in srgb, #f59e0b 12%, transparent); line-height: 1.5; }
.com-statut { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 800; vertical-align: middle; border: 1px solid var(--bordure); background: var(--surface-claire);
  &.com-statut-en_cours { color: #34d399; border-color: currentColor; }
  &.com-statut-programmee { color: #60a5fa; border-color: currentColor; }
  &.com-statut-en_pause { color: #fbbf24; border-color: currentColor; }
  &.com-statut-annulee { color: #f87171; border-color: currentColor; }
}
.com-ligne-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0;
  & label { font-weight: 700; }
  & input { flex: 1 1 260px; min-width: 0; padding: 10px 12px; border-radius: 12px; }
}
.com-recap { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--bordure); border-radius: 14px; overflow: hidden;
  & li { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--bordure); align-items: baseline; &:last-child { border-bottom: 0; } }
  & span { color: var(--texte-doux); }
  & strong { overflow-wrap: anywhere; }
}
.com-lancer { display: grid; gap: 10px; padding: 16px; border: 1px solid color-mix(in srgb, var(--violet) 55%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--violet) 8%, transparent);
  & input { padding: 10px 12px; border-radius: 12px; max-width: 320px; } & p { margin: 0; } & button { justify-self: start; }
}
.com-apercus { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;
  & figure { margin: 0; display: grid; gap: 6px; & figcaption { font-weight: 700; } }
}
.com-cadre { border: 1px solid var(--bordure); border-radius: 14px; background: #0a0817; max-width: 100%; }
.com-cadre-bureau { width: 640px; height: 900px; }
.com-cadre-mobile { width: 375px; height: 900px; }
.com-cadre-texte { width: 100%; height: 420px; background: var(--surface); }
.com-details { border: 1px solid var(--bordure); border-radius: 12px; padding: 8px 12px; & summary { cursor: pointer; font-weight: 700; padding: 4px 0; } }
.com-url { overflow-wrap: anywhere; font-size: 12.5px; color: var(--texte-doux); }
.com-formulaire { display: grid; gap: 16px;
  & fieldset { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--bordure); border-radius: 14px; min-width: 0; }
  & legend { font-weight: 800; padding-inline: 6px; }
  & label { display: grid; gap: 4px; font-weight: 600; }
  & label.lfg-case { display: flex; }
  & input[type="text"], & input[type="datetime-local"], & textarea { width: 100%; padding: 10px 12px; border-radius: 12px; font: inherit; }
  & textarea { resize: vertical; line-height: 1.5; }
  & button { justify-self: start; }
}
.com-carte-edition { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--bordure); border-radius: 12px; }

@media (max-width: 720px) {
  .com-recap li { grid-template-columns: 1fr; gap: 2px; }
  .com-cadre-bureau { width: 100%; }
}
.com-bloc > .bouton, .com-bloc > button.bouton { justify-self: start; }
.com-copie > .bouton, .com-copie > button { margin: 0; }

/* Invitation unique aux newsletters (bandeau) et case d'inscription */
.bandeau-newsletter form { display: grid; gap: 10px; & p { margin: 0; } }
.bandeau-newsletter-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-newsletter { margin: 4px 0 12px; padding: 12px 14px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface); }

/* ============================================================
   Duo World et Game Radar : carte du monde, recherche de lieux, résultats, visibilité. Mise en page selon la largeur de l'écran :
   trois colonnes sur grand écran, filtres au-dessus puis carte + résultats, puis carte plein écran avec panneaux coulissants sur téléphone et petite tablette.
   (Pas de « container query » ici : le confinement qu'elle impose casserait les panneaux fixes, qui doivent se positionner par rapport à l'écran.)
   ============================================================ */

/* La colonne de droite de Duo Gamer laisse la place à la carte et aux résultats. */
@media (min-width: 1181px) {
  .duo-app[data-onglet="world"], .duo-app[data-onglet="radar"] { grid-template-columns: 232px minmax(0, 1fr); & .duo-rail { display: none; } }
}

.duo-bloc-world { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin: 0 0 16px; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--violet) 45%, var(--bordure)); border-radius: 18px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--violet) 18%, var(--surface)), color-mix(in srgb, #2c4fd8 14%, var(--surface)));
  & h2 { margin: 0; font-size: 18px; } & p { margin: 2px 0 0; color: var(--texte-doux); }
}
.duo-bloc-world-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--violet) 35%, transparent); & svg { width: 24px; height: 24px; } }
@media (max-width: 560px) { .duo-bloc-world { grid-template-columns: auto 1fr; & .bouton { grid-column: 1 / -1; justify-self: stretch; text-align: center; } } }
.duo-zone-bandeau { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 0 0 12px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--bordure); background: var(--surface); &[hidden] { display: none; } }

.world { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "filtres filtres" "carte resultats"; align-items: start; }
@media (min-width: 1500px) { .world { grid-template-columns: 280px minmax(0, 1fr) 340px; grid-template-areas: "filtres carte resultats"; } }
.world-filtres { grid-area: filtres; display: grid; gap: 12px; padding: 16px; border: 1px solid var(--bordure); border-radius: 18px; background: var(--surface);
  & label { display: grid; gap: 4px; font-weight: 600; font-size: 13.5px; }
  & select, & input[type="search"] { width: 100%; padding: 10px 12px; border-radius: 12px; }
}
/* Largeur moyenne : tous les champs sur une seule rangée pour laisser la place à la carte. */
.world-groupe-champs { display: contents; }
.world-filtres { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; }
.world-filtres > * { grid-column: 1 / -1; }
.world-filtres > .world-groupe-champs > label { grid-column: span 1; }
.world-filtres .lfg-case { display: flex; align-items: center; gap: 8px; font-weight: 600; }
@media (max-width: 1180px) { .world-filtres > .world-groupe-champs > label { grid-column: span 2; } }
@media (min-width: 1500px) { .world-filtres { grid-template-columns: 1fr; } .world-filtres > .world-groupe-champs > label { grid-column: 1 / -1; } }
@media (max-width: 1040px) { .world-filtres { grid-template-columns: 1fr 1fr; } .world-filtres > .world-groupe-champs > label { grid-column: span 1; } }
.world-continents { display: flex; flex-wrap: wrap; gap: 6px; }
.world-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.world-fil { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; min-height: 24px; & .world-fil-actuel { font-weight: 800; } & .world-fil-sep { color: var(--texte-doux); } }

/* Recherche avec suggestions */
.world-recherche { position: relative; }
.world-suggestions { position: absolute; z-index: 30; inset: calc(100% + 4px) 0 auto 0; margin: 0; padding: 4px; list-style: none; max-height: 280px; overflow: auto; border: 1px solid var(--bordure); border-radius: 14px; background: var(--surface-claire, #1a1533); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); &[hidden] { display: none; } }
.world-sugg { display: flex; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-weight: 600; &.actif, &:hover { background: color-mix(in srgb, var(--violet) 28%, transparent); } }
.world-sugg-note { margin-left: auto; color: var(--texte-doux); font-weight: 500; }
.world-sugg-vide { color: var(--texte-doux); cursor: default; &:hover { background: none; } }

/* Carte */
.world-carte { grid-area: carte; position: relative; min-width: 0; }
.world-map { height: clamp(420px, 68dvh, 720px); border-radius: 18px; border: 1px solid var(--bordure); overflow: hidden; background: #070b24; &:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; } }
.world-carte-actions { position: absolute; z-index: 5; top: 12px; right: 12px; display: grid; gap: 6px; }
.world-ctl { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--bordure); background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--texte); font-size: 22px; font-weight: 700; cursor: pointer; backdrop-filter: blur(6px); &:hover { background: color-mix(in srgb, var(--violet) 30%, var(--surface)); } }
.world-mobile-actions { display: none; }
.world-attribution { margin: 6px 4px 0; font-size: 11.5px; color: var(--texte-doux); & a { color: inherit; text-decoration: underline; } }
.world-indispo { margin: 8px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, #f59e0b 55%, transparent); background: color-mix(in srgb, #f59e0b 10%, transparent); &[hidden] { display: none; } }
.world-legende { position: absolute; z-index: 5; left: 12px; bottom: 34px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; font-size: 12px; border: 1px solid var(--bordure); background: color-mix(in srgb, var(--surface) 88%, transparent); &[hidden] { display: none; }
  & i { width: 22px; height: 10px; border-radius: 3px; display: inline-block; &.n1 { background: #2c4fd8; } &.n2 { background: #7c3aed; } &.n3 { background: #d946a8; } &.n4 { background: #f08a3c; } } }
.world-etiquette { display: grid; place-items: center; min-width: 22px; padding: 1px 6px; border-radius: 99px; font-size: 12px; font-weight: 800; color: #fff; background: #5b3fd1; border: 1.5px solid #fff; pointer-events: none; }
.maplibregl-canvas { outline: none; }

/* Résultats */
.world-resultats { grid-area: resultats; display: grid; gap: 12px; align-content: start; padding: 16px; border: 1px solid var(--bordure); border-radius: 18px; background: var(--surface); max-height: min(78dvh, 820px); overflow: auto; overscroll-behavior: contain; }
.world-resultats-tete { display: flex; justify-content: space-between; gap: 10px; align-items: start; & h2 { margin: 0; font-size: 18px; } & p { margin: 2px 0 0; } }
.world-fermer-mobile { display: none; }
.world-ville { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--violet) 40%, var(--bordure)); background: color-mix(in srgb, var(--violet) 10%, transparent); &[hidden] { display: none; } & h3 { margin: 0; font-size: 15px; letter-spacing: .04em; } & p { margin: 0; } & .bouton { justify-self: start; } }
.world-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.world-joueur { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 12px; border: 1px solid var(--bordure); border-radius: 14px; background: var(--surface-claire, rgba(255, 255, 255, .03));
  & .world-joueur-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
}
.world-avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 900; font-size: 20px; color: #fff; background: linear-gradient(135deg, #7c3aed, #2c4fd8); & img { width: 100%; height: 100%; object-fit: cover; } }
.world-joueur-corps { min-width: 0; display: grid; gap: 3px; & p { margin: 0; font-size: 13px; } & .lfg-puces { margin: 4px 0 0; } }
.world-joueur-titre { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.world-joueur-age, .world-joueur-zone { color: var(--texte-doux); }
.world-en-ligne { color: #34d399; font-style: normal; font-size: 12px; font-weight: 700; }
.world-joueur-score { font-weight: 800; color: #c4b5fd; }
.world-joueur-explication { color: var(--texte-doux); }
.world-joueur-quick { font-weight: 700; }
.world-vide { display: grid; gap: 8px; }
.world-pied { display: flex; flex-wrap: wrap; gap: 8px; & [hidden] { display: none; } }

/* Visibilité */
.world-dialogue { width: min(94vw, 560px); max-height: 92dvh; overflow: auto; }
.world-dialogue-corps { display: grid; gap: 12px; padding: 22px; & h2, & h3 { margin: 0; } & p { margin: 0; line-height: 1.55; } }
.world-dialogue-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.world-etat-liste { display: grid; gap: 0; margin: 0; border: 1px solid var(--bordure); border-radius: 12px; overflow: hidden;
  & div { display: grid; grid-template-columns: 180px 1fr; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--bordure); &:last-child { border: 0; } }
  & dt { color: var(--texte-doux); } & dd { margin: 0; font-weight: 700; } }
.world-consentement { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--violet) 45%, var(--bordure)); border-radius: 12px; background: color-mix(in srgb, var(--violet) 8%, transparent); &[hidden] { display: none; } }
#world-form-visibilite { display: grid; gap: 12px; &[hidden] { display: none; } & label { display: grid; gap: 4px; font-weight: 600; } & .lfg-case { display: flex; } & select, & input[type="search"] { width: 100%; padding: 10px 12px; border-radius: 12px; } }
#world-visibilite-etat[hidden] { display: none; }

/* Téléphone : carte plein écran, panneaux coulissants (feuilles du bas), même contenu que sur ordinateur */
@media (max-width: 1040px) {
  .world { grid-template-columns: minmax(0, 1fr); grid-template-areas: "carte"; }
  .world-map { height: calc(100dvh - 250px); min-height: 360px; border-radius: 16px; }
  .world-mobile-actions { position: absolute; z-index: 6; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-between; gap: 8px; }
  .world-attribution { position: static; }
  .world-legende { bottom: 58px; }
  .world-filtres, .world-resultats { position: fixed; z-index: 1000; inset: auto 0 0 0; max-height: min(82dvh, 640px); overflow: auto; border-radius: 22px 22px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); translate: 0 110%; transition: translate .25s ease; box-shadow: 0 -18px 50px rgba(0, 0, 0, .55); background: var(--surface); }
  .world-filtres.ouvert, .world-resultats.ouvert { translate: 0 0; }
  .world-fermer-mobile { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .world-filtres, .world-resultats { transition: none; } }

/* Game Radar */
.radar { display: grid; gap: 16px; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); align-items: start; }
@media (max-width: 1140px) { .radar { grid-template-columns: minmax(0, 1fr); } }
.radar-filtres { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--bordure); border-radius: 18px; background: var(--surface); & label { display: grid; gap: 4px; font-weight: 600; font-size: 13.5px; } & select { width: 100%; padding: 10px 12px; border-radius: 12px; } }
.radar-dispo { display: flex; flex-wrap: wrap; gap: 6px; }
.radar-resultats { display: grid; gap: 12px; align-content: start; }
.radar-resultats .world-liste { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.radar-statuts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--texte-doux); font-size: 13px; }

/* Les emojis des titres dégradés restent des emojis (sans cela, le texte transparent les remplace par un aplat de couleur). */
.duo-titre .duo-emoji { -webkit-text-fill-color: initial; background: none; color: initial; }

/* L'animation d'apparition de la page laisse un « transform » en place : elle ferait des panneaux fixes des enfants de la page au lieu de l'écran. */
.duo-app[data-onglet="world"], .duo-app[data-onglet="radar"] { animation: none; }

/* Continents, boutons et heatmap sur une même zone compacte : la carte reste visible sans défiler. */
.world-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.world-bas .world-continents { flex: 1 1 100%; }
.duo-bloc-world > .bouton { margin: 0; }