/* =====================================================================
   Règle du jeu — direction « Vitrine »
   Claire, éditoriale, l'image au centre.

   Parti pris : la boîte est le sujet de la page, pas une vignette posée
   à côté du texte. Hiérarchie forte, respiration, ombres douces, une
   seule couleur vive employée avec parcimonie.

   La couleur extraite de chaque boîte (--game) sert d'accent discret —
   surtitre, lettrine, teinte de fond — plutôt que d'aplat. Un aplat
   par jeu ferait diverger l'identité du site à chaque fiche.

   Aucun build, aucun framework. Police auto-hébergée facultative.
   ===================================================================== */

/* La police d'affichage vit dans templates/layout.php, pas ici.
   Une feuille de style ne sait pas si public/fonts/archivo-latin-variable.woff2
   a été déposé — il est facultatif, voir le LISEZ-MOI du dossier — et
   celle-ci réclamait donc un woff2 absent à chaque chargement de page.
   Le gabarit teste le fichier, n'écrit la règle qu'en conséquence, et la
   précharge par la même occasion.

   Une SEULE déclaration, et là-bas : deux @font-face pour la même famille
   et la même plage, l'une avec le fichier et l'autre avec local() seul,
   font échouer la seconde sur toute machine où Archivo n'est pas
   installée — une erreur de chargement de police par page, pour rien. */

:root {
  --bg:        #F3F4F6;
  --surface:   #FFFFFF;
  --ink:       #14161B;
  --ink-soft:  #2A2E36;
  /* Assombri : #6B7280 ne donnait que 4,38:1 sur --bg, sous le seuil AA
     pour du texte courant — et --muted porte les métadonnées de carte,
     les liens d'en-tête et les mentions de source. 4,9:1 ici. */
  --muted:     #646A76;
  --line:      #E3E5E9;
  --line-soft: #EEF0F3;

  /* Vert forêt profond : sérieux sans être terne, et suffisamment
     sombre pour porter du texte blanc à tous les usages. */
  --brand:     #17493C;
  --brand-dk:  #0E3329;
  --brand-lt:  #E7F0EC;

  /* Orange chaud, réservé aux appels à l'action et aux badges. Une
     seule couleur vive employée rarement structure une page bien mieux
     que cinq couleurs moyennes.

     Assombri : le #DE5B2B d'origine ne portait le texte blanc du bouton
     qu'à 3,7:1, alors que « Voir les règles en vidéo » est l'appel à
     l'action principal du site. 5,0:1 ici, 6,9:1 au survol. Le thème
     sombre garde sa propre paire : il pose de l'encre foncée sur
     l'accent, et n'a jamais eu ce problème. */
  --hot:       #C0491C;
  --hot-dk:    #A03712;

  /* États. Ces valeurs ne sont pas nouvelles : ce sont celles que
     .pill--rejected et .pill--pending portaient déjà, les seules de la
     famille à tenir le contraste AA sur fond blanc COMME sur leur propre
     fond teinté. Le reste de la feuille en employait sept autres — six
     rouges pour une seule idée — dont quatre échouaient à 4,3:1 et ne
     suivaient aucun thème, faute d'être des jetons.

     Trois rôles par état : le texte, le fond, le filet. « -strong » est
     la teinte moyenne des aplats et des bordures, là où du blanc se pose
     par-dessus ; elle n'est jamais employée comme couleur de texte. */
  --danger:        #8A3A28;
  --danger-bg:     #FDF0EC;
  --danger-line:   #EFC0AE;
  --danger-strong: #963D2B;
  --warn:          #8A6516;
  --warn-bg:       #FBF1DE;
  --warn-line:     #E0A03C;
  /* Le succès réemploie la marque : c'est la seule famille des trois qui
     n'avait pas besoin d'une couleur à elle. Les valeurs sont recopiées
     plutôt qu'écrites var(--brand-lt) : une propriété personnalisée est
     substituée là où elle est DÉCLARÉE, ici sur :root — elle serait
     restée claire sous le thème sombre, qui redéfinit --brand-lt plus bas
     sur body.site. */
  --ok:            #0E3329;
  --ok-bg:         #E7F0EC;
  --ok-line:       #BCD6C9;

  /* Couleur du jeu courant, écrasée par <body style="--game:…">. */
  --game:      #17493C;

  /* Hauteur des barres collantes : l'en-tête du site, et sur une fiche
     sa navigation. Trois règles en dépendaient chacune de son côté, avec
     un 126 recopié qui devenait faux dès que la navigation de fiche
     passait sur deux rangées. */
  --masthead:  66px;
  --game-nav:  48px;
  --sticky:    calc(var(--masthead) + var(--game-nav));

  --r:         16px;
  --r-sm:      10px;
  --shadow:    0 1px 2px rgba(20,22,27,.05), 0 8px 24px -12px rgba(20,22,27,.18);
  --shadow-lg: 0 2px 4px rgba(20,22,27,.06), 0 24px 48px -20px rgba(20,22,27,.30);
  --micro:     0.7rem;

  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* =====================================================================
   Vitrine nocturne — thème sombre du site public.
   Le thème CLAIR « Vitrine » vit dans :root ; le sombre est un opt-in
   activé par [data-theme="dark"] sur <html> (posé par défaut côté serveur,
   basculable par l'utilisateur). L'administration (body.adm) n'est jamais
   concernée. Comme tout lit des variables, redéfinir les jetons bascule le
   site ; on reprend juste en dessous les couleurs codées en dur.
   ===================================================================== */
[data-theme="dark"] body.site {
  --bg:        #0C0E11;
  --surface:   #14181C;
  --ink:       #EEF1EE;
  --ink-soft:  #C7CDC9;
  --muted:     #8B979A;
  --line:      #262D33;
  --line-soft: #1E242A;
  --brand:     #38B893;   /* vert éclairci : tient comme lien ET comme fond */
  --brand-dk:  #2A9D7E;
  --brand-lt:  #132720;
  --hot:       #E4632E;
  --hot-dk:    #C9531F;
  /* Sur fond sombre, un rouge profond disparaît : l'état s'éclaircit au
     lieu de s'assombrir. L'administration, qui n'a pas de thème sombre,
     garde les valeurs de :root. */
  --danger:        #F0B4A6;
  --danger-bg:     #2A1614;
  --danger-line:   #7A392C;
  --danger-strong: #C0503A;
  --warn:          #E7BA76;
  --warn-bg:       #2A2114;
  --warn-line:     #8A6516;
  --ok:            #8FE0C6;
  --ok-bg:         #132720;
  --ok-line:       #2C6B57;
  --shadow:    0 1px 2px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.7);
  color-scheme: dark;
}
/* Encre foncée SUR les boutons pleins (vert ou orange) : le blanc d'origine
   passe mal sur l'accent éclairci. Le bouton discret garde son texte clair,
   et le bouton de refus aussi : son fond est une surface, pas un aplat
   d'accent — « Supprimer mon compte » y écrivait du presque-noir sur du
   presque-noir. Sa couleur lui vient de --danger, qui suit déjà le thème. */
[data-theme="dark"] body.site .btn:not(.btn--quiet):not(.btn--reject),
[data-theme="dark"] body.site .btn:not(.btn--quiet):not(.btn--reject):hover { color: #06110D; }
[data-theme="dark"] body.site .skip { color: var(--bg); }
[data-theme="dark"] body.site .masthead { background: rgba(12,14,17,.78); }
/* La couleur par jeu est calculée pour le thème clair : sur fond sombre on
   retombe sur le vert vif, toujours lisible (surtitre et lettrine). */
[data-theme="dark"] body.site .micro,
[data-theme="dark"] body.site .summary > p:first-child::first-letter { color: var(--brand); }
[data-theme="dark"] body.site .search input::placeholder { color: var(--muted); }

/* Bouton bascule de thème dans l'en-tête. */
.themetoggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  cursor: pointer; font-size: 1rem; line-height: 1;
  transition: color .12s ease, border-color .12s ease;
}
.themetoggle:hover { color: var(--ink); border-color: var(--brand); }
.themetoggle .themetoggle__sun { display: none; }
.themetoggle .themetoggle__moon { display: inline; }
[data-theme="dark"] .themetoggle .themetoggle__sun { display: inline; }
[data-theme="dark"] .themetoggle .themetoggle__moon { display: none; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga";
}

img { max-width: 100%; display: block; }
/* <picture> n'existe que pour porter les <source> WebP : il ne doit
   créer aucune boîte, sans quoi il deviendrait lui-même l'élément de
   grille ou de flex à la place de l'image qu'il enveloppe.

   Et display:contents promeut TOUS ses enfants, y compris les <source>,
   qu'aucune feuille de style de navigateur ne masque : la boîte de jeu se
   retrouvait poussée dans la deuxième colonne de la grille par un
   <source> de largeur nulle occupant la première. */
picture { display: contents; }
source { display: none; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-dk); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* Ce que le navigateur dessine à notre place. La sélection et le curseur
   de saisie arrivaient en bleu système : deux surfaces qui n'appartenaient
   à aucun thème, et qui se voient à chaque fois qu'on copie un titre ou
   qu'on remplit un champ. Les barres de défilement des zones internes
   sont traitées là où elles apparaissent ; celle de la page suit
   color-scheme, déjà posé par le thème sombre. */
::selection { background: var(--brand-lt); color: var(--brand-dk); }
[data-theme="dark"] body.site ::selection { background: var(--brand); color: #06110D; }
input, textarea, select { caret-color: var(--brand); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }

.skip { position: absolute; left: -9999px; background: var(--ink); color: #fff;
  padding: 10px 16px; z-index: 30; border-radius: var(--r-sm); }
.skip:focus { left: 12px; top: 12px; }

/* Surtitre : la seule place où la couleur du jeu s'exprime en texte. */
.micro {
  display: block; margin: 0 0 14px;
  font-size: 0.74rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--game);
}

/* ------------------------------- Boutons ------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand); color: #fff;
  border: 1.5px solid var(--brand); border-radius: 999px;
  padding: 11px 20px;
  font: inherit; font-size: 0.92rem; font-weight: 650; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  transition: background .12s ease, transform .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--brand-dk); border-color: var(--brand-dk);
  color: #fff; transform: translateY(-1px); }
.btn--quiet {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.btn--quiet:hover { background: var(--surface); border-color: var(--ink);
  color: var(--ink); transform: none; }
.btn--reject { background: var(--surface); border-color: var(--danger-strong); color: var(--danger); }
.btn--reject:hover { background: var(--danger-strong); border-color: var(--danger-strong); color: #fff; }

/* ------------------------------- En-tête ------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 20;
  background: rgba(243,244,246,.86);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.masthead__inner { display: flex; align-items: center; gap: 26px; height: var(--masthead); }

.brand {
  font-weight: 750; font-size: 1.06rem; letter-spacing: -0.03em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand span { color: var(--brand); }

.masthead nav { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.masthead nav a {
  /* La hauteur de ligne seule donnait ~23,5 px de zone sensible, pour
     20 px d'écart entre deux liens : rien ne change à l'œil, la cible
     devient atteignable. */
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted); text-decoration: none;
  font-size: 0.92rem; font-weight: 550;
}
.masthead nav a:hover { color: var(--ink); }
/* Le nom du membre : un lien vers son compte, mis en avant sans crier. */
.masthead__me { color: var(--ink) !important; font-weight: 650; }
.signout { display: inline; }
/* Dans le menu déroulant, la déconnexion s'aligne sur les autres entrées. */
.mobile-nav__links .signout { display: block; }
.mobile-nav__links .signout button {
  display: flex; align-items: center; width: 100%;
  min-height: 44px; padding: 8px; text-align: left;
}
.signout button {
  display: inline-flex; align-items: center; min-height: 44px;
  font: inherit; font-size: 0.92rem; font-weight: 550;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted);
}
.signout button:hover { color: var(--ink); }
.inline-form { display: inline-block; }
.band__head .listvis { margin-left: auto; }
.band__head .listvis .btn { font-size: .8rem; padding: 6px 14px; }
.sharelink { margin: -14px 0 18px; font-size: .85rem; word-break: break-all; }

/* -------------------------------- Accueil ------------------------------ */
.hero {
  padding: 84px 0 68px; text-align: center;
  background:
    radial-gradient(60% 100% at 50% 0%, var(--brand-lt) 0%, transparent 70%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.02; letter-spacing: -.05em; font-weight: 800;
  text-wrap: balance;
}
.hero p { margin: 0 auto 32px; max-width: 46ch; color: var(--muted); font-size: 1.06rem; }

.search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; width: min(100%, 760px); max-width: 760px; margin: 0 auto; }
.search input {
  min-width: 0; min-height: 54px; font: inherit; font-size: 1.05rem; color: var(--ink);
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow);
}
.search .btn { min-height: 54px; padding-inline: 24px; }
/* Suggestions de titres (voir public/app.js). Ancrées sur .search, qui
   passe en position relative pour les porter. */
.search, .suggest-anchor { position: relative; }
.suggest-anchor { max-width: 620px; }
.suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 25;
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  max-height: 60vh; overflow-y: auto; text-align: left;
}
.suggest[hidden] { display: none; }
.suggest__item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer;
}
.suggest__item img {
  flex: 0 0 44px; width: 44px; height: 44px;
  object-fit: cover; border-radius: 7px; background: var(--brand-lt);
}
.suggest__item span { min-width: 0; }
.suggest__item strong {
  display: block; font-size: .94rem; font-weight: 650; line-height: 1.3;
  letter-spacing: -.015em;
}
.suggest__item small { display: block; margin-top: 2px; font-size: .8rem; color: var(--muted); }
.suggest__item.is-active, .suggest__item:hover { background: var(--brand-lt); }
.suggest__item.is-active strong, .suggest__item:hover strong { color: var(--brand-dk); }

/* 2,6:1 auparavant : un exemple de saisie reste du texte à lire. */
.search input::placeholder { color: #6B7280; }
.search input:focus { outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-lt); }

/* Page de résultats : le bandeau se resserre pour laisser la place aux
   résultats, qui sont le contenu. */
.hero--compact { padding: 34px 0 26px; text-align: left; background: var(--bg); }
.hero--compact h1 { margin-bottom: 8px; font-size: clamp(1.9rem, 4.2vw, 2.6rem); }
.hero--compact > .wrap > p { margin: 0 0 18px; max-width: 62ch; }
.hero--compact .search { margin: 0; }
.hero--compact .facets { margin: 16px 0 0; max-width: none; }

.facets-fold { margin-top: 14px; }
.facets-fold > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
  cursor: pointer; font-size: .88rem; font-weight: 650; color: var(--muted);
}
/* display:inline-flex sur un <summary> escamote le marqueur natif : plus
   rien ne disait que le bloc se déplie. Le chevron le remplace, et suit
   l'état ouvert. */
.facets-fold > summary::-webkit-details-marker { display: none; }
.facets-fold > summary::marker { content: ""; }
.facets-fold > summary::before {
  content: "›"; display: inline-block; font-size: 1.05rem; line-height: 1;
  transition: transform .15s ease;
}
.facets-fold[open] > summary::before { transform: rotate(90deg); }
.facets-fold > summary:hover { color: var(--ink); }
.facets-fold > summary span {
  padding: 1px 8px; border-radius: 999px;
  background: var(--brand-lt); color: var(--brand-dk);
  font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.page-title {
  margin: 0 0 10px;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.04; letter-spacing: -.045em; font-weight: 800;
}

/* ------------------------------- Sections ------------------------------ */
.band { padding: 48px 0; }
.band--first { padding-top: 40px; }
.band__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; }
.band__head h2 {
  margin: 0; font-size: 1.5rem; font-weight: 750; letter-spacing: -.03em;
}
.band__head h2 .muted {
  font-weight: 600; font-size: 0.72em;
  background: var(--brand-lt); color: var(--brand-dk);
  padding: 3px 11px; border-radius: 999px; vertical-align: 3px;
}
.band__head a { margin-left: auto; color: var(--muted); font-size: 0.9rem; font-weight: 550; }
.band__head a:hover { color: var(--ink); }

/* ------------------------------- Cartes -------------------------------- */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.card {
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r);
  overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.card:hover { color: inherit; transform: translateY(-4px); box-shadow: var(--shadow-lg); }
/* Cadre carré, comme la boîte en grand sur une fiche : c'est le même
   objet, photographié de face.

   object-fit: contain et non cover — rogner dans la hauteur faisait
   disparaître le titre imprimé sur la boîte, celui de Wingspan par
   exemple. Le fond feutré tient lieu de cadre sur les côtés.

   height:auto neutralise l'attribut height de l'<img>, sans quoi
   aspect-ratio ne gouverne rien : la vignette occupait 300 px de haut
   quelle que soit la largeur de la carte — un cadre de 155 × 300 sur
   téléphone, pour une boîte carrée. */
.card__art, img.card__art {
  aspect-ratio: 1; width: 100%; height: auto;
  object-fit: contain; padding: 8px;
  background: var(--brand-lt);
  display: grid; place-items: center;
  color: var(--brand); font-size: var(--micro);
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.card__body { display: block; padding: 14px 16px 17px; }
.card__title { display: block; font-weight: 650; font-size: 0.96rem;
  line-height: 1.32; letter-spacing: -.015em; }
.card__meta { display: block; margin-top: 5px; font-size: 0.83rem; color: var(--muted); }
/* Retrait d'un jeu depuis « Mes listes ». Toujours visible : une action
   qui n'apparaît qu'au survol n'existe pas sur écran tactile. */
.shelfitem { position: relative; }
.shelfitem__remove { position: absolute; top: 8px; right: 8px; }
.shelfitem__remove button {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font: inherit; font-size: .8rem; line-height: 1;
  box-shadow: var(--shadow);
  transition: color .12s ease, border-color .12s ease;
}
.shelfitem__remove button:hover { color: #fff; background: var(--danger-strong); border-color: var(--danger-strong); }

.card__flag {
  display: inline-block; margin-top: 10px;
  background: var(--brand-lt); color: var(--brand-dk);
  padding: 3px 10px; border-radius: 999px;
  font-size: var(--micro); font-weight: 700;
}

/* Fil d'Ariane des fiches de jeu, et rubrique courante dans l'en-tête. */
.crumbs { padding-top: 18px; background: var(--bg); }
.crumbs .wrap { max-width: 1280px; }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0; padding: 0; list-style: none;
  font-size: .84rem; color: var(--muted);
}
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--line); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink-soft); font-weight: 600; }
.crumbs li:last-child span {
  display: inline-block; max-width: 46ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.masthead nav a[aria-current] { color: var(--ink); font-weight: 650; }

/* --------------------------- Fiche de jeu ------------------------------
   La boîte en grand, légèrement inclinée, avec une vraie ombre portée :
   elle existe comme objet physique et non comme illustration.
   ---------------------------------------------------------------------- */
/* 52 px auparavant : le fil d'Ariane occupe désormais ce blanc. */
.gamehead {
  padding: 22px 0 0;
  background:
    radial-gradient(70% 120% at 22% 0%,
      color-mix(in srgb, var(--game) 12%, transparent) 0%, transparent 68%),
    var(--bg);
}
.gamehead__top { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 64px; align-items: start; }
.gamehead .wrap, .game-nav .wrap, .game-section .wrap { max-width: 1280px; }
.game-section { scroll-margin-top: calc(var(--sticky) + 12px); }

.gamehead__art, img.gamehead__art {
  /* Carré fixe : la boîte tient ENTIÈRE dedans (contain), sans être rognée.
     height:auto neutralise les attributs width/height de l'<img> pour que
     aspect-ratio impose bien le carré ; le fond feutre comble les côtés. */
  aspect-ratio: 1; width: 100%; height: auto; object-fit: contain; padding: 12px;
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  background: var(--brand-lt);
  display: grid; place-items: center;
  color: var(--brand); font-size: var(--micro);
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}

.gamehead h1 {
  margin: 0 0 14px;
  font-size: clamp(2.4rem, 5.2vw, 3.7rem);
  line-height: 1.02; letter-spacing: -.045em; font-weight: 800;
  text-wrap: balance;
}
.gamehead__intro { max-width: 68ch; margin: 0 0 20px; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.62; }
.gamehead__by { margin: 0 0 26px; color: var(--muted); font-size: 1.02rem; }
.gamehead__by a { color: var(--brand); font-weight: 600; }
.gamehead__actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 26px; }
.gamehead__actions .btn { margin: 0; }
/* L'appel à l'action principal se DÉSIGNE, il ne se déduit pas de sa
   position. Cible auparavant par :first-child, ce fond orange se posait
   sur le bouton discret « Lire les règles PDF » dès qu'une fiche n'avait
   pas de vidéo — en gardant sa couleur de texte de bouton discret, soit
   2,5:1 en thème sombre. */
.btn--primary { background: var(--hot); border-color: var(--hot); }
.btn--primary:hover { background: var(--hot-dk); border-color: var(--hot-dk); }
.shelf-toggles {
  display: inline-flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px;
  vertical-align: top;
}
.shelf-toggles .btn { margin: 0; font-size: 0.85rem; padding: 9px 16px; }
.btn--in-list { background: var(--brand-lt); border-color: var(--brand-lt); color: var(--brand-dk); }
.btn--in-list:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Le dos de boîte devient quatre cartes identiques : les informations se
   lisent par balayage, au lieu d'être confondues avec les actions. */
.specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
.specs div {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 13px 14px;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px;
  box-shadow: var(--shadow);
}
.specs__icon { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-lt); color: var(--brand); font-size: 1.05rem; line-height: 1; }
.specs dt { margin: 0; font-size: .7rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.specs dd {
  margin: 1px 0 0; font-size: 1rem; font-weight: 750;
  letter-spacing: -.015em; font-variant-numeric: tabular-nums;
}
.gamehead + .band { padding-top: 46px; }

/* Navigation d'une fiche : les cinq repères restent visibles sans jamais
   agrandir la page. Elle s'arrête sous l'en-tête global, déjà sticky. */
.game-nav { position: sticky; top: var(--masthead); z-index: 12; background: color-mix(in srgb, var(--bg) 94%, transparent); border-block: 1px solid var(--line); backdrop-filter: blur(10px); }
.game-nav__inner { display: flex; min-height: var(--game-nav); }
.game-nav a, .game-nav button { flex: 1 1 0; display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-width: 0; padding: 10px 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: .84rem; font-weight: 650; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.game-nav a:hover, .game-nav button:hover { color: var(--ink); border-bottom-color: var(--brand); }
.game-nav span { flex: 0 0 auto; padding: 1px 6px; border-radius: 99px; background: var(--brand-lt); color: var(--brand-dk); font-size: .72rem; font-variant-numeric: tabular-nums; }

/* Les trois voies d'entrée placent la prochaine action avant le détail. */
.band--start { padding-block: 34px 26px; }
.band--start .band__head { margin-bottom: 16px; }
.startgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.startcard { display: flex; gap: 14px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.startcard:hover { color: inherit; border-color: var(--brand); box-shadow: var(--shadow-lg); }
.startcard--video { position: relative; padding: 0; overflow: hidden; }
.startcard--video > img { flex: 0 0 42%; width: 42%; min-height: 132px; object-fit: cover; background: var(--brand-lt); }
.startcard__play { position: absolute; left: calc(21% - 18px); top: calc(50% - 18px); z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; padding-left: 2px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(5,7,10,.68); color: #fff; font-size: .8rem; }
.startcard__body { display: grid; align-content: center; gap: 5px; min-width: 0; }
.startcard__body .micro { margin: 0; font-size: .63rem; }
.startcard__body strong { overflow: hidden; font-size: .98rem; line-height: 1.32; text-overflow: ellipsis; }
.startcard__body > span:not([class]) { color: var(--muted); font-size: .84rem; }
.startcard__channel { color: var(--ink-soft); font-size: .84rem; font-weight: 650; }
.startcard__icon { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-lt); color: var(--brand); font-size: 1.28rem; }
.startcard__icon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.startcard--documents { scroll-margin-top: calc(var(--sticky) + 12px); }
.startcard--documents .startcard__body { flex: 1; }
.startcard__document-main { color: inherit; text-decoration: none; }
.startcard__document-main:hover { color: var(--brand); }
.startcard__document-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 7px; }
.startcard__document-actions .btn { margin: 0; padding: 7px 11px; font-size: .78rem; }
.startcard__document-more { position: relative; color: var(--muted); font-size: .78rem; }
.startcard__document-more summary { display: inline-flex; align-items: center;
  min-height: 32px; cursor: pointer; font-weight: 700; }
.startcard__document-more ul { margin: 8px 0 0; padding: 9px 11px 9px 25px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.startcard__document-more li + li { margin-top: 6px; }
.startcard__document-more a { color: var(--ink); }
.startcard__document-more small { margin-left: 7px; color: var(--muted); }
.startcard--assistant { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.startcard--assistant .startcard__body { flex: 1; }
.startcard--assistant form { margin-top: 4px; }
.startcard__question { display: flex; gap: 8px; width: 100%; }
.startcard__question input { flex: 1 1 auto; min-width: 0; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: inherit; font-size: .88rem; }
.startcard__question .startcard__question-submit { flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; padding: 0; display: grid; place-items: center; overflow: hidden; }
.startcard__question-submit svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.assistant__answer--featured { max-width: 920px; margin-top: 18px; }

/* Une grande vidéo recommandée, puis les gestes de jeu les plus demandés.
   Les liens vont vers les lecteurs existants : aucun média ne démarre seul. */
.learning-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 0 0 30px; }
.learning-group { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.learning-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .94rem; }
.learning-group h3 > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-lt); color: var(--brand); font-size: .9rem; }
.learning-group h3 small { margin-left: auto; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .68rem; font-weight: 700; }
.learning-group ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.learning-group li a { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px; align-items: center; color: inherit; text-decoration: none; }
.learning-group li a:hover { color: var(--brand); }
.learning-group li img { width: 54px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; background: var(--brand-lt); }
.learning-group li span { min-width: 0; overflow: hidden; font-size: .82rem; font-weight: 650; line-height: 1.25; }
.learning-group li small { display: block; margin-top: 2px; color: var(--muted); font-size: .72rem; font-weight: 500; }
.learning-group__more { display: inline-flex; align-items: center; min-height: 32px; margin-top: 12px; color: var(--brand); font-size: .82rem; font-weight: 700; text-decoration: none; }
.videos__all { padding-top: 6px; }
.videos__all .band__head { margin-bottom: 14px; }
.videos__all .band__head h3 { margin: 0; font-size: 1.05rem; }

/* Puces vers les pages de mécanique/catégorie, sous la bande de specs. */
.terms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.term-chip {
  font-size: 0.82rem; font-weight: 600; letter-spacing: -.01em;
  display: inline-flex; align-items: center; min-height: 30px;
  padding: 5px 14px; border-radius: 999px;
  background: var(--brand-lt); color: var(--brand-dk);
  text-decoration: none; transition: background .14s ease;
}
.term-chip:hover { background: var(--brand); color: #fff; }
.term-chip--categorie { background: var(--line-soft); color: var(--ink-soft); }
.term-chip--categorie:hover { background: var(--muted); color: #fff; }

/* -------------------------------- Résumé ------------------------------- */
.summary { max-width: 62ch; margin: 0; font-size: 1.09rem;
  line-height: 1.72; color: var(--ink-soft); }
.summary p { margin: 0 0 18px; }
.summary > p:first-child::first-letter {
  float: left; font-size: 3.2rem; line-height: .82; font-weight: 800;
  margin: 8px 12px 0 0; color: var(--game);
}
.byline { font-size: 0.85rem; color: var(--muted); }

/* -------------------------------- Vidéos -------------------------------
   Chaque vidéo est un accordéon : le clic n'ouvre PAS YouTube, il déplie
   un lecteur qui se lit dans la page (façade : miniature d'abord, iframe
   au clic sur Lire). Le pouce de curation reste à droite. Sans JS, le lien
   « Ouvrir sur YouTube » du panneau subsiste. */
.videos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.video--primary { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.video--primary .video__thumb { flex-basis: 180px; }
.video {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow);
  transition: border-color .15s ease;
}
.video:hover, .video.is-open { border-color: var(--brand); }

.video__row { display: flex; align-items: stretch; }
.video__open {
  flex: 1 1 auto; min-width: 0;
  display: flex; gap: 14px; align-items: center;
  padding: 10px 14px 10px 10px;
  background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.video__thumb {
  flex: 0 0 118px; aspect-ratio: 16 / 9; position: relative; overflow: hidden;
  background: var(--brand-lt); border-radius: 8px; display: grid; place-items: center;
}
.video__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__thumb::after {
  content: "▶"; position: relative; z-index: 1; color: #fff; font-size: 1rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.65);
}
.video.is-open .video__thumb::after { content: "❚❚"; letter-spacing: -2px; font-size: .8rem; }
.video__open > span:not([class]) { flex: 1 1 auto; min-width: 0; }
.video__title { display: block; font-weight: 650; font-size: 0.96rem; line-height: 1.35; letter-spacing: -.015em; }
.video__meta { display: block; margin-top: 4px; font-size: 0.84rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Pastille de catégorie : couleur par type pour un repérage immédiat. */
.video__tag {
  display: inline-block; margin-top: 7px;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  padding: 2px 10px; border-radius: 999px;
  background: rgba(255,255,255,.06); color: var(--muted);
}
.video__tag--regles        { background: rgba(56,184,147,.16);  color: #6FD9BB; }
.video__tag--resume        { background: rgba(90,160,240,.16);  color: #8FC0F5; }
.video__tag--mise_en_place { background: rgba(224,160,60,.16);  color: #E7BA76; }
.video__tag--partie        { background: rgba(178,140,240,.17); color: #C4A6F0; }
.video__tag--avis          { background: rgba(255,255,255,.07); color: #AEB6B2; }
.video__tag--aide_de_jeu   { background: rgba(80,200,190,.15);  color: #7FD6CC; }
.video__tag--faq           { background: rgba(255,255,255,.07); color: #AEB6B2; }

/* Filtres par catégorie au-dessus de la liste vidéos. */
.vfilter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.vfilter__chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px;
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  padding: 6px 14px; border-radius: 999px;
  background: var(--surface); color: var(--muted); border: 1px solid var(--line);
  transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.vfilter__chip span {
  font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.06); padding: 0 6px; border-radius: 999px;
  min-width: 1.5em; text-align: center;
}
.vfilter__chip:hover { color: var(--ink); border-color: var(--brand); }
.vfilter__chip.is-active { background: var(--brand); color: #06110D; border-color: var(--brand); }
.vfilter__chip.is-active span { background: rgba(0,0,0,.18); }
.video[hidden] { display: none; }

/* Ajustements pour le thème CLAIR : les pastilles et la puce active sont
   calibrées pour le sombre ; on assombrit le texte pour rester lisible
   sur fond clair. */
[data-theme="light"] .vfilter__chip.is-active { color: #fff; }
[data-theme="light"] .video__tag--regles        { background: rgba(23,73,60,.10);  color: #17493C; }
[data-theme="light"] .video__tag--resume        { background: rgba(43,95,196,.10);  color: #2B5FC4; }
[data-theme="light"] .video__tag--mise_en_place  { background: rgba(160,100,20,.13); color: #8A5A14; }
[data-theme="light"] .video__tag--partie         { background: rgba(110,63,176,.10); color: #6B3FB0; }
[data-theme="light"] .video__tag--avis,
[data-theme="light"] .video__tag--faq            { background: rgba(20,22,27,.06);   color: #4A5058; }
[data-theme="light"] .video__tag--aide_de_jeu    { background: rgba(18,117,106,.10); color: #12756A; }
.video__lang {
  margin-left: auto; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 20px; padding: 2px 9px;
  font-size: var(--micro); font-weight: 700; letter-spacing: .05em; color: var(--muted);
}

/* Panneau lecteur : hauteur animée par la bascule 0fr → 1fr. */
.video__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
.video.is-open .video__panel { grid-template-rows: 1fr; }
.video__panel > div { overflow: hidden; min-height: 0; }
.stage { position: relative; aspect-ratio: 16 / 9; background: #05070A; border-top: 1px solid var(--line); }
.stage img, .stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.stage__play {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 100%;
  background: linear-gradient(rgba(5,7,10,.12), rgba(5,7,10,.5)); border: 0; cursor: pointer;
}
.stage__disc {
  width: 62px; height: 62px; border-radius: 50%; background: #FF3B30;
  display: grid; place-items: center; box-shadow: 0 8px 30px rgba(0,0,0,.5);
  transition: transform .15s ease;
}
.stage__play:hover .stage__disc { transform: scale(1.06); }
.stage__disc::before {
  content: ""; border-style: solid; border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff; margin-left: 4px;
}
.stage__hint {
  position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; margin: 0;
  font-size: .8rem; color: #D3DBD6; display: flex; align-items: center; gap: 8px;
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.stage__hint .dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 4px var(--brand-lt); }
.stage__foot { margin: 0; padding: 8px 14px; font-size: .8rem; }
.stage__foot a { color: var(--muted); }
.stage iframe { z-index: 3; }
.stage.is-playing .stage__play, .stage.is-playing .stage__hint { display: none; }

/* --------------------------------- La Piste -----------------------------
   Chapitrage des vidéos de règles (voir templates/partials/piste.php) :
   une case par point de règle, sous le lecteur. Le clic affiche une
   réponse courte sans revoir toute la vidéo ; « Voir l'extrait » saute
   au bon timecode dans le lecteur déjà ouvert (public/app.js). Sans
   JavaScript, chaque case reste un lien réel vers le timecode YouTube. */
.piste { padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.piste__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.piste__label { font-size: var(--micro); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--brand); }
.piste__track { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; margin: 0; }
.piste__case {
  min-width: 0; max-width: none;
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--bg);
  color: inherit; text-decoration: none; cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}
.piste__case:hover, .piste__case:focus-visible { border-color: var(--brand); }
.piste__case.is-current { background: var(--brand); border-color: var(--brand); color: #06110D; }
.piste__case.is-current .piste__n, .piste__case.is-current .piste__d { color: #06110D; opacity: .72; }
.piste__n { font-size: .68rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.piste__t { font-size: .84rem; font-weight: 650; line-height: 1.28; }
.piste__d { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.piste__card {
  margin-top: 12px; padding: 13px 15px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.piste__card-title { margin: 3px 0 7px; font-weight: 700; font-size: .95rem; }
.piste__card-summary { margin: 0 0 11px; font-size: .88rem; line-height: 1.55; color: var(--ink-soft); }
.piste__card-actions { margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Réutilisé par le Mode Table, plus bas. */
.timecode {
  display: inline-block; font-variant-numeric: tabular-nums;
  font-size: .78rem; font-weight: 700; padding: 3px 10px;
  border-radius: 999px; background: var(--brand-lt); color: var(--brand-dk);
}

/* ------------------------------- Mode Table ------------------------------
   Overlay plein écran pensé pour être consulté à côté du plateau, pas
   pour naviguer le site : gros texte, cibles larges (44px minimum),
   fond uni. Déclenché par le bouton [data-table-mode-open] de l'en-tête
   de fiche ; le filtre tourne côté client (public/app.js).

   Le fond était un aplat vert vif plein écran, sans rapport avec le reste
   du site : déroutant au premier lancement, et agressif en soirée jeu. Il
   reprend les surfaces du site ; la marque reste portée par les accents et
   le filet supérieur de la barre.

   Cette réécriture vivait en fin de feuille, par-dessus la version verte :
   sept sélecteurs déclarés deux fois, et la valeur appliquée d'un bouton
   demandait de lire aux deux endroits. Elle est fondue ici, avec ce qui
   s'applique vraiment — ce qui a fait tomber un .table-mode__empty qui
   cumulait opacity:.8 et color:var(--muted), soit 3,37:1 sur le seul texte
   qu'on lit quand la recherche ne donne rien. */
.table-mode {
  position: fixed; inset: 0; z-index: 60;
  background: var(--bg); color: var(--ink);
  display: flex; flex-direction: column;
}
.table-mode[hidden] { display: none; }
.table-mode__bar {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 20px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
/* Le seul endroit où la marque s'exprime dans cet écran neutre. */
.table-mode__bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--brand);
}
.table-mode__title { margin: 0; font-weight: 750; font-size: 1.05rem; }
.table-mode__close {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-size: 1.05rem; cursor: pointer; transition: border-color .12s ease;
}
.table-mode__close:hover { border-color: var(--brand); }
.table-mode__body {
  flex: 1 1 auto; overflow-y: auto; padding: 18px 20px 40px;
  max-width: 720px; margin: 0 auto; width: 100%;
}
.table-mode__q-label {
  display: block; font-size: var(--micro); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; opacity: .78; margin-bottom: 8px;
}
.table-mode__q {
  width: 100%; padding: 14px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 1.05rem; margin-bottom: 18px;
}
.table-mode__q::placeholder { color: var(--muted); }
.table-mode__q:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.table-mode__scope { margin: -10px 0 16px; font-size: .84rem; color: var(--muted); }
.table-mode__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.table-mode__item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 14px 16px;
}
.table-mode__item[hidden] { display: none; }
.table-mode__item-eyebrow {
  margin: 0 0 3px; font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.table-mode__item-title { margin: 0 0 6px; font-weight: 700; font-size: 1.02rem; }
.table-mode__item-summary { margin: 0 0 12px; font-size: .92rem; line-height: 1.55; opacity: .92; }
.table-mode__item-actions { margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* .timecode porte déjà ce fond et cette encre : la règle qui les
   redonnait ici ne faisait que les répéter. */
.table-mode .btn--quiet { background: var(--surface); min-height: 44px; }
.table-mode .btn--quiet:hover { background: var(--brand-lt); border-color: var(--brand); color: var(--brand-dk); }

/* Le lecteur vit dans l'écran : on saute d'un point de règle à l'autre
   sans rouvrir la fiche. */
.table-mode__player {
  flex: 0 0 auto; background: #05070A;
  border-bottom: 1px solid var(--line);
}
.table-mode__player[hidden] { display: none; }
.table-mode__player .stage {
  position: relative; aspect-ratio: 16 / 9; max-height: 46vh;
  margin: 0 auto; width: 100%; max-width: 900px; border: 0;
}
.table-mode__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.table-mode__controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 16px; background: var(--surface);
}
.table-mode__speed { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--muted); }
.table-mode__speed select {
  min-height: 44px; font: inherit; padding: 6px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.table-mode.is-playing .table-mode__body { padding-top: 12px; }
.table-mode__empty { text-align: left; padding: 24px 0; color: var(--muted); }
.table-mode__empty[hidden] { display: none; }
.table-mode__empty-title { margin: 0 0 6px; font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.table-mode__empty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }

/* Curation communautaire : colonne pouce / score / pouce, à la Reddit. */
.votes {
  flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  padding: 6px 10px; border-left: 1px solid var(--line-soft);
}
.vote-form { display: contents; }
/* 20 x 28 px auparavant, sous les 24 x 24 px de la règle 2.5.8 — et
   c'est l'action communautaire centrale du site, souvent visée au pouce
   sur une liste de vidéos. La colonne garde sa largeur : seule la zone
   sensible grandit. */
.vote {
  display: grid; place-items: center;
  min-width: 32px; min-height: 32px;
  border: 0; background: none; cursor: pointer; text-decoration: none;
  font-size: 0.9rem; line-height: 1; color: var(--muted);
  padding: 0; border-radius: 8px;
  transition: color .12s ease, background-color .12s ease;
}
.vote:hover { color: var(--ink); background: var(--brand-lt); }
.vote--up.is-active { color: var(--brand); }
.vote--down.is-active { color: var(--danger); }
.votes__score {
  font-size: 0.85rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; min-width: 2ch; text-align: center;
}

/* ------------------------------ Contribuer ----------------------------- */
.contribute {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-top: 22px; padding: 18px 22px;
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--r); font-size: 0.94rem; color: var(--muted);
}
.contribute .btn { margin-left: auto; }

.propose { margin-top: 24px; display: grid; gap: 10px; }
.propose details {
  background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow);
}
.propose summary {
  padding: 15px 20px; cursor: pointer;
  font-size: 0.94rem; font-weight: 650; letter-spacing: -.01em; color: var(--brand-dk);
}
.propose form, .propose > details > p { padding: 4px 20px 20px; margin: 0; }
.propose label, .form label, .login label {
  display: block; margin: 15px 0 6px;
  font-size: var(--micro); letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
}
.propose label .muted, .form label .muted, .login label .muted {
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.propose input, .propose select, .propose textarea {
  font: inherit; width: 100%; max-width: 620px; padding: 11px 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.propose input:focus, .propose textarea:focus, .propose select:focus {
  outline: none; border-color: var(--brand); background: var(--surface);
}
.propose textarea { line-height: 1.6; resize: vertical; }
.propose .btn { margin-top: 18px; }

/* Toutes les actions communautaires partagent enfin une seule zone :
   six cartes identifiables, puis le formulaire complet à l'ouverture. */
.community { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 34%, var(--bg)); }
.community__lead { max-width: 72ch; margin: -12px 0 24px; color: var(--muted); line-height: 1.6; }
.community-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 0; align-items: start; }
.community-grid .contribution-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.community-grid .contribution-card[open] { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--brand) 42%, var(--line)); box-shadow: var(--shadow-lg); }
/* Le <span> de tête est une PASTILLE DE CATÉGORIE, pas un marqueur de
   dépliage : le triangle natif s'affichait en plus, et chaque carte
   montrait deux chevrons. Il est masqué, et remplacé par un vrai
   marqueur, à droite, qui pivote à l'ouverture. */
.community-grid .contribution-card summary { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 12px; align-content: center; min-height: 82px; padding: 14px 16px; color: var(--ink); }
.community-grid .contribution-card summary::-webkit-details-marker { display: none; }
.community-grid .contribution-card summary::marker { content: ""; }
.community-grid .contribution-card summary::after {
  content: "›"; grid-column: 3; grid-row: 1 / 3; align-self: center;
  color: var(--muted); font-size: 1.15rem; line-height: 1;
  transition: transform .15s ease;
}
.community-grid .contribution-card[open] summary::after { transform: rotate(90deg); }
.community-grid .contribution-card summary > span { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--brand-lt); color: var(--brand); font-size: 1rem; }
.community-grid .contribution-card summary strong { align-self: end; min-width: 0; font-size: .94rem; line-height: 1.28; }
.community-grid .contribution-card summary small { align-self: start; color: var(--muted); font-size: .72rem; font-weight: 550; }
.community-grid .contribution-card--report summary > span { background: var(--danger-bg); color: var(--danger); }
.community-grid .contribution-card[open] summary { border-bottom: 1px solid var(--line-soft); }
.community-grid .contribution-card[open] form { width: min(100%, 960px); padding: 6px 20px 22px; }
.community-grid .contribution-card[open] input,
.community-grid .contribution-card[open] select,
.community-grid .contribution-card[open] textarea { max-width: 100%; }
.community-grid .contribution-card > p { padding: 16px 20px 20px; }

.gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.gallery a { cursor: zoom-in; display: block; }
.gallery img { width: 100%; height: auto; border-radius: var(--r-sm); box-shadow: var(--shadow); }
.gallery a:hover img { box-shadow: var(--shadow-lg); }

/* ------------------------------ Lightbox -------------------------------
   Visionneuse des visuels supplémentaires, en JS vanille (app.js). */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(5,7,10,.9); opacity: 0; transition: opacity .18s ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox__img {
  max-width: min(1100px, 94vw); max-height: 86vh; width: auto; height: auto;
  object-fit: contain; border-radius: var(--r-sm);
  box-shadow: 0 20px 60px rgba(0,0,0,.6); background: #05070A;
}
.lightbox__cap {
  position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; text-align: center;
  color: #C9D2CD; font-size: .85rem; text-shadow: 0 1px 6px rgba(0,0,0,.8); pointer-events: none;
}
.lightbox__cap b { color: #fff; font-weight: 600; }
.lightbox__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff; border: 0; cursor: pointer;
  font-size: 1.4rem; line-height: 1; display: grid; place-items: center;
  transition: background-color .12s ease;
}
.lightbox__btn:hover { background: rgba(255,255,255,.22); }
.lightbox__btn:disabled { opacity: .3; cursor: default; }
.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }
.lightbox__close { top: 16px; right: 16px; bottom: auto; transform: none; font-size: 1.1rem; }
@media (max-width: 560px) {
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
  .lightbox__btn { width: 40px; height: 40px; }
}

/* ------------------------------- Éditeurs ------------------------------ */
.pubgrid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.pubcard {
  display: flex; flex-direction: column; gap: 5px;
  padding: 20px; text-decoration: none; color: inherit;
  background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.pubcard:hover { color: inherit; transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pubcard img { max-height: 46px; width: auto; object-fit: contain; margin-bottom: 8px; }
.pubcard__name { font-weight: 650; font-size: 1rem; letter-spacing: -.015em; line-height: 1.28; }
.pubcard__meta { font-size: 0.84rem; color: var(--muted); }

.pubhead { display: flex; gap: 28px; align-items: flex-start; margin: 20px 0 24px; }
.pubhead__logo {
  flex: 0 0 130px; max-height: 100px; width: auto; object-fit: contain;
  background: var(--surface); padding: 14px;
  border-radius: var(--r); box-shadow: var(--shadow);
}

/* ------------------------------- Connexion ----------------------------- */
.login { max-width: 400px; margin: 6vh auto 12vh; padding: 0 24px; }
.login h1 { margin: 0 0 8px; font-size: 2rem; letter-spacing: -.04em; font-weight: 800; }
.login__lead { margin: 0 0 24px; color: var(--muted); font-size: 0.95rem; }
.login input {
  width: 100%; font: inherit; padding: 12px 15px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.login input:focus { outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-lt); }
.login .btn { width: 100%; margin-top: 24px; padding: 13px; justify-content: center; }
.login__note { margin-top: 26px; font-size: 0.86rem; color: var(--muted); }
.login__note code, .field-help code, .muted code {
  background: var(--brand-lt); color: var(--brand-dk);
  padding: 2px 6px; border-radius: 5px; font-size: 0.9em;
}
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------- Messages ------------------------------ */
.flash {
  margin: 0 0 18px; padding: 13px 18px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 0.93rem; background: var(--surface); box-shadow: var(--shadow);
}
.flash--success, .flash--info { background: var(--ok-bg); border-color: var(--ok-line);
  color: var(--ok); }
.flash--error { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }

/* Estompage auto en admin (voir backoffice.js) : un bandeau qui reste
   figé tant qu'on ne recharge pas la page finit par se confondre avec
   le contenu, au point qu'on ne le remarque même plus après la
   première action. */
.adm .flash { cursor: pointer; transition: opacity .5s ease, transform .5s ease; }
.adm .flash.is-hiding { opacity: 0; transform: translateY(-6px); }

/* --------------------------------- Pied -------------------------------- */
.foot {
  margin-top: 48px; padding: 30px 0 60px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem; color: var(--muted);
}
.foot__inner { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; }
.foot a { color: var(--muted); }
.foot__langs { display: flex; gap: 14px; }
.foot__langs a { display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted); font-size: .9rem; text-decoration: none; }
.foot__langs a:hover { color: var(--ink); }
.foot__langs a[aria-current] { color: var(--ink); font-weight: 650; text-decoration: underline;
  text-underline-offset: 3px; }
.foot__bgg { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.foot__bgglink { display: inline-flex; align-items: center; }
.foot__bgglink img { display: block; vertical-align: middle; }
.gamehead__bgg { display: flex; align-items: center; gap: 8px; }
.gamehead__bgg img { display: block; }

/* --------------------------- Filtres et pages -------------------------- */
.facets {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 14px;
  align-items: end; margin: 26px auto 0; max-width: 920px; text-align: left;
}
.facets__field { display: grid; gap: 6px; min-width: 0; }
.facets__field label {
  font-size: var(--micro); letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; color: var(--muted);
}
.facets select {
  width: 100%; min-height: 43px; font: inherit; font-size: 0.92rem; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow);
}
.facets__check {
  display: flex; align-items: center; align-self: center; gap: 8px; min-height: 43px;
  text-transform: none; letter-spacing: 0; font-weight: 550;
  font-size: 0.88rem; color: var(--ink);
}
.facets > .btn { min-height: 43px; }
/* Récapitulatif des filtres posés, au-dessus des résultats. Chaque puce
   est un lien vers la même page privée de CE filtre. */
.chipbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
.chipbar__label {
  font-size: var(--micro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.chipfilter {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  font-size: .85rem; font-weight: 600; text-decoration: none;
  transition: border-color .12s ease, color .12s ease;
}
.chipfilter span { color: var(--muted); font-size: .8rem; line-height: 1; }
.chipfilter:hover { border-color: var(--hot); color: var(--hot-dk); }
.chipfilter:hover span { color: var(--hot-dk); }
.chipbar__clear {
  display: inline-flex; align-items: center; min-height: 32px;
  margin-left: 4px; font-size: .85rem; font-weight: 600; color: var(--muted);
}
.chipbar__clear:hover { color: var(--ink); }

.pager__range { margin: 26px 0 0; font-size: .88rem; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.pager__range + .pager { margin-top: 8px; }
.pager { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 32px; font-size: 0.92rem; font-weight: 600; }
.pager a {
  padding: 8px 14px; text-decoration: none; color: var(--ink);
  background: var(--surface); border-radius: 999px; box-shadow: var(--shadow);
}
.pager a:hover { color: var(--brand-dk); box-shadow: var(--shadow-lg); }
.pager__now {
  padding: 8px 14px; border-radius: 999px;
  background: var(--brand); color: #fff;
}

/* =====================================================================
   Administration
   Même vocabulaire, densité supérieure : c'est un outil de travail.
   ===================================================================== */
.adm { background: var(--bg); }

/* La barre a été redessinée en grille — marque et recherche et compte sur
   une rangée, navigation sur la suivante — dans un bloc ajouté en fin de
   feuille, qui laissait la version en ligne juste au-dessus. Six
   sélecteurs déclarés deux fois, et deux requêtes média intercalées dont
   la plupart des lignes ne s'appliquaient plus : la valeur effective d'un
   champ de recherche demandait de lire trois endroits. Tout est ici. */
.adm__bar {
  display: grid; grid-template-columns: auto minmax(180px, 320px) auto;
  align-items: center; gap: 8px 24px; padding: 12px 24px 0;
  background: rgba(243,244,246,.9); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.adm__bar > .brand { grid-column: 1; grid-row: 1; }

.adm__nav {
  grid-column: 1 / -1; grid-row: 2;
  display: flex; min-width: 0; gap: 20px;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin;
}
/* La barre de défilement fait partie du dessin : laissée au navigateur,
   elle posait un bandeau gris clair sous la navigation. Elle était par
   ailleurs masquée sur WebKit entre 621 et 1400 px seulement, donc
   présente ou absente selon le moteur et la largeur. */
.adm__nav::-webkit-scrollbar { height: 6px; }
.adm__nav::-webkit-scrollbar-track { background: transparent; }
.adm__nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.adm__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted); text-decoration: none;
  font-size: 0.9rem; font-weight: 550;
  padding: 4px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.adm__nav a:hover { color: var(--ink); }
.adm__nav a.is-active { color: var(--brand-dk); border-bottom-color: var(--brand); font-weight: 650; }

/* position:relative manquait : la liste des résultats se plaçait donc par
   rapport à .adm__bar, qui est collante et fait donc office de bloc
   conteneur — elle s'ouvrait sur toute la largeur de la barre et sous ses
   DEUX rangées, au lieu de sous le champ. */
.adm__search { position: relative; grid-column: 2; grid-row: 1; margin: 0; width: 100%; }
.adm__search input {
  width: 100%; min-height: 44px; padding: 7px 12px; font: inherit; font-size: 0.86rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .15s ease;
}
.adm__search input:focus { outline: none; border-color: var(--brand); }
.adm__search-results {
  position: absolute; top: calc(100% + 6px); right: 0; width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg); z-index: 30;
  max-height: 55vh; overflow-x: hidden; overflow-y: auto;
}
.adm__search-results a {
  display: block; padding: 9px 14px; font-size: 0.86rem;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-soft);
}
.adm__search-results a:last-child { border-bottom: 0; }
.adm__search-results a:hover, .adm__search-results a.is-active { background: var(--brand-lt); color: var(--brand-dk); }

.adm__user {
  grid-column: 3; grid-row: 1; justify-self: end; min-width: 0;
  display: flex; align-items: center; gap: 12px; font-size: 0.86rem;
}
.adm__user span { color: var(--muted); overflow-wrap: anywhere; }
.adm__user button {
  font: inherit; background: none; border: 0; cursor: pointer; min-height: 44px;
  color: var(--brand); padding: 0; text-decoration: underline;
}
.adm__menu-toggle { display: none; }
.adm__main { max-width: 1380px; min-width: 0; margin: 0 auto; padding: 28px 24px 72px; }
.adm__main > .tbl-wrap, .adm__main > form, .adm__main > nav { margin-block: 20px; }
.adm h1 { margin: 0 0 8px; font-size: 1.7rem; font-weight: 800; letter-spacing: -.04em; }
.adm h2 { margin: 36px 0 14px; font-size: 1.15rem; font-weight: 750; letter-spacing: -.025em; scroll-margin-top: 80px; }
#infos { scroll-margin-top: 80px; }
.adm h1 .muted, .adm h2 .muted { font-weight: 500; font-size: 0.74em; }

.badge {
  display: inline-block; margin-left: 7px; padding: 1px 8px;
  background: var(--hot); color: #fff;
  border-radius: 999px; font-size: 0.7rem; font-weight: 700;
  font-variant-numeric: tabular-nums; vertical-align: 1px;
}

.tiles { display: grid; gap: 14px; margin: 22px 0 8px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.tile {
  display: block; padding: 17px 19px; text-decoration: none; color: inherit;
  background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow);
  transition: transform .14s ease, box-shadow .14s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.tile--alert { background: var(--brand); color: #fff; }
.tile__n { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; }
.tile__l { display: block; margin-top: 2px; font-size: 0.82rem; opacity: .74; }

.quota { margin: 0 0 8px; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.gauge { height: 8px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.gauge span { display: block; height: 100%; background: var(--brand); }

/* Sans ce conteneur, un tableau large (chaînes : 9 colonnes) débordait
   du cadre au lieu de défiler, sous 900px. */
.tbl-wrap { overflow-x: auto; border-radius: var(--r); box-shadow: var(--shadow); }
.tbl { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.88rem;
  background: var(--surface); }
.tbl th {
  text-align: left; padding: 12px 14px; background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-size: var(--micro); letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
}
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td.tbl__thumb { width: 40px; padding: 6px 0 6px 14px; }
.tbl__thumb img {
  display: block; width: 32px; height: 32px; object-fit: cover;
  border-radius: 6px; background: var(--line-soft);
}
.tbl input.tiny, .tbl select, .addchannel input, .addchannel select, .contrib__actions input {
  font: inherit; font-size: 0.86rem; padding: 7px 11px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg);
}
.tbl input.tiny { width: 76px; }
.tbl--form td { padding: 9px 14px; }
.tbl__group td {
  padding: 16px 14px 6px; border-bottom: 0; background: var(--bg);
  font-size: var(--micro); letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700; color: var(--muted);
}
.task-jump { align-items: center; margin-bottom: 28px; }
.task-jump a { display: inline-flex; align-items: center; min-height: 38px; gap: 7px; }
.task-jump__count {
  min-width: 21px; padding: 1px 6px; border-radius: 999px;
  background: var(--line-soft); color: var(--ink-soft);
  font-size: var(--micro); font-variant-numeric: tabular-nums; text-align: center;
}
.task-jump .badge { margin-left: 0; }
.task-groups { display: grid; min-width: 0; gap: 30px; }
.task-group { min-width: 0; scroll-margin-top: 82px; }
.task-group__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin: 0 2px 12px;
}
.task-group__head h2 { margin: 0 0 4px; }
.task-group__head p { max-width: 68ch; margin: 0; color: var(--muted); font-size: .88rem; }
.task-group__summary {
  flex: 0 0 auto; color: var(--muted); font-size: .8rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.task-group__summary strong { color: var(--warn); }
.task-table td:first-child { width: 40%; }
.task-table td:nth-child(2) { width: 18%; }
.task-table td:nth-child(3) { width: 25%; }
.task-table__schedule { display: block; color: var(--ink-soft); font-size: .84rem; }
.task-table__actions { text-align: right; }
.task-table__actions .mod__inline { justify-content: flex-end; flex-wrap: nowrap; }
.roles label { display: block; font-size: 0.83rem; white-space: nowrap; }

.pill {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: var(--micro); font-weight: 700; letter-spacing: .03em;
  background: var(--line-soft); color: var(--muted);
}
.pill--approved, .pill--completed { background: var(--ok-bg); color: var(--ok); }
.pill--pending, .pill--running, .pill--partial { background: var(--warn-bg); color: var(--warn); }
.pill--rejected, .pill--failed, .pill--broken { background: var(--danger-bg); color: var(--danger); }

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 22px; }
.filters a {
  font-size: 0.86rem; font-weight: 600; text-decoration: none; color: var(--muted);
  padding: 7px 15px; border-radius: 999px; background: var(--surface);
  box-shadow: var(--shadow);
}
.filters a:hover { color: var(--ink); }
.filters a.is-active { background: var(--brand); color: #fff; }
.filters--sub { margin-top: -8px; }
.filters .badge { margin-left: 6px; }

.mod {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 16px; margin-bottom: 14px;
  background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow);
  scroll-margin-top: 86px;
}
.mod:target { box-shadow: var(--shadow); }
/* On s'ancre sur la fiche précédente : c'est donc la SUIVANTE, celle qui
   reste à traiter, qu'il faut signaler. */
.mod:target + .mod, .mod--focused { box-shadow: var(--shadow-lg); outline: 2px solid var(--brand); outline-offset: 3px; }
.mod__thumb { flex: 0 0 176px; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-sm); }
.mod__body { flex: 1 1 auto; min-width: 0; }
.mod__title { display: block; font-weight: 650; font-size: 0.98rem;
  line-height: 1.34; letter-spacing: -.015em; }
.mod__meta, .mod__game { margin: 6px 0 0; font-size: 0.85rem; color: var(--muted); }
.mod__actions { flex: 0 0 238px; display: flex; flex-direction: column; gap: 8px; }
.mod__actions form, .mod__inline { display: flex; gap: 7px; flex-wrap: wrap; }
.mod__actions .btn { font-size: 0.83rem; padding: 7px 14px; }
.mod__alt-label { margin: 8px 0 0; font-size: var(--micro); letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; color: var(--muted); }
.mod__inline select { flex: 1 1 auto; min-width: 0; }
/* La case garde sa taille dessinée ; c'est le libellé qui l'enveloppe
   qui porte la zone sensible de 36 px (voir admin/moderation.php). La
   mise en page ne bouge pas : le libellé occupe la place que la case
   occupait, la case se centre dedans. */
.mod__check-hit {
  align-self: flex-start; flex: 0 0 auto;
  display: grid; place-items: center; width: 36px; height: 36px;
  margin: -4px 0 0 -9px; cursor: pointer; border-radius: 8px;
}
.mod__check-hit:hover { background: var(--line-soft); }
.mod__check { width: 18px; height: 18px; margin: 0; }
.mod__bulk-bar { display: flex; align-items: center; gap: 16px;
  padding: 10px 14px; margin-bottom: 14px;
  background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); }
.mod__bulk-bar .check { margin: 0; }

/* File de validation documentaire : l'aperçu occupe la majeure partie de
   l'écran, tandis que le contexte et les décisions restent immédiatement
   accessibles dans une colonne stable. */
.doc-review-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 22px; }
.doc-review-head p { margin: 0; }
.doc-review-list { display: grid; gap: 24px; }
.doc-review {
  display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(290px, .75fr);
  min-height: 520px; overflow: hidden; scroll-margin-top: 82px;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.doc-review:target { outline: 2px solid var(--brand); outline-offset: 3px; box-shadow: var(--shadow-lg); }
.doc-review__preview { min-width: 0; background: #D9DDD9; border-right: 1px solid var(--line); }
.doc-review__preview iframe { display: block; width: 100%; height: 100%; min-height: 520px; border: 0; background: #F3F4F6; }
.doc-review__details { display: flex; min-width: 0; flex-direction: column; }
.doc-review__game { display: flex; min-height: 72px; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.doc-review__game img { width: 44px; height: 44px; flex: 0 0 44px; object-fit: cover; border-radius: 7px; }
.doc-review__game a { font-weight: 700; color: var(--ink); text-decoration: none; }
.doc-review__game a:hover { color: var(--brand-dk); text-decoration: underline; }
.doc-review__eyebrow { display: block; margin-bottom: 2px; color: var(--muted); font-size: var(--micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.doc-review__content { flex: 1 1 auto; padding: 22px 20px; }
.doc-review__content h2 { margin: 0 0 12px; font-size: 1.2rem; line-height: 1.3; overflow-wrap: anywhere; }
.doc-review__content p { margin: 14px 0 0; font-size: .88rem; }
.doc-review__pills { display: flex; flex-wrap: wrap; gap: 7px; }
.doc-review__source { color: var(--muted); overflow-wrap: anywhere; }
.doc-review__external { display: inline-block; margin-top: 18px; font-size: .88rem; font-weight: 650; }
.doc-review__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 16px 18px; border-top: 1px solid var(--line-soft); background: var(--bg); }
.doc-review__actions .btn { min-height: 44px; justify-content: center; padding-inline: 12px; }
.empty-state { padding: 44px 24px; text-align: center; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); }
.empty-state strong { display: block; font-size: 1.08rem; }
.empty-state p { max-width: 560px; margin: 8px auto 0; }

.contrib { padding: 18px 20px; margin-bottom: 14px;
  background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); }
.contrib__head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 0.88rem; }
.contrib__diff { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; margin-top: 14px; }
.contrib__diff p { margin: 4px 0 0; font-size: 0.88rem; line-height: 1.55; }
.contrib__diff > div:last-child { padding-left: 18px; border-left: 2px solid var(--brand); }
.contrib__video { margin: 12px 0 0; font-size: 0.9rem; display: flex; gap: 12px; flex-wrap: wrap; }
.contrib__comment { margin: 12px 0 0; font-size: 0.9rem; font-style: italic; color: var(--muted); }
.contrib__actions { display: flex; gap: 9px; margin-top: 16px; flex-wrap: wrap; }
.contrib__actions input { flex: 1 1 220px; }

.dup {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center;
  padding: 18px 20px; margin-bottom: 12px;
  background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow);
}
.dup__side { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.dup__side .btn, .dup__mid .btn { font-size: 0.82rem; padding: 6px 14px; }
.dup__mid { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }

.form { max-width: 680px; }
.form--wide { max-width: 780px; }
.form input, .form textarea, .form select {
  font: inherit; width: 100%; padding: 11px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-lt);
}
.form textarea { line-height: 1.6; resize: vertical; }
.form__row { display: flex; gap: 16px; flex-wrap: wrap; }
.form__row span { flex: 0 0 auto; }
.form__row input, .form__row select { width: auto; min-width: 100px; }
.form .btn { margin-top: 24px; }
.form label.check {
  display: flex; align-items: center; gap: 10px;
  text-transform: none; letter-spacing: 0; font-weight: 550;
  font-size: 0.94rem; color: var(--ink); margin: 18px 0 0;
}
.form label.check input { width: auto; }
.field-help { display: block; margin: 6px 0 0; font-size: 0.82rem; color: var(--muted); }
kbd {
  display: inline-block; padding: 1px 6px; margin: 0 1px;
  font: 0.78rem ui-monospace, monospace; background: var(--line-soft);
  border: 1px solid var(--line); border-radius: 4px; color: var(--ink-soft);
}
.field-help.err { color: var(--danger); }

.callout {
  padding: 15px 19px; border-radius: var(--r); margin: 0 0 22px;
  background: var(--surface); box-shadow: var(--shadow);
  font-size: 0.92rem;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.callout--ok { background: var(--ok-bg); color: var(--ok); }
.callout--warn { background: var(--warn-bg); color: var(--warn); }

pre.cron {
  background: var(--ink); color: #E8EAEE;
  padding: 15px 18px; border-radius: var(--r-sm);
  font-size: 0.82rem; overflow-x: auto; margin: 0 0 8px;
}

.issues { list-style: none; padding: 0; margin: 0; }
.issue {
  padding: 12px 17px; margin-bottom: 9px; border-radius: var(--r-sm);
  font-size: 0.9rem; display: flex; gap: 11px; align-items: baseline;
  background: var(--surface); box-shadow: var(--shadow);
}
.issue--danger { background: var(--danger-bg); color: var(--danger); }
.issue--warning { background: var(--warn-bg); color: var(--warn); }

.addchannel, .addchapter {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  padding: 18px 20px; margin: 18px 0 8px;
  background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow);
}
.addchannel label, .addchapter label {
  display: block; margin: 0 0 6px;
  font-size: var(--micro); letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; color: var(--muted);
}
.addchannel input#reference { min-width: 220px; }
.addchapter input[name="label"] { min-width: 200px; }
.addchapter input[name="summary"] { min-width: 260px; flex: 1 1 260px; }
.addchapter input.tiny { width: 90px; }

/* Regroupe les <details> par vidéo dans la section « La Piste » de
   l'admin — même esprit que .propose côté public, mais sans son
   .propose form (mise en page à une colonne : conviendrait mal au
   formulaire d'ajout de case, pensé en ligne). */
.chapters { display: grid; gap: 10px; margin-bottom: 24px; }
.chapters details {
  background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding-bottom: 2px;
}
.chapters summary {
  padding: 15px 20px; cursor: pointer;
  font-size: 0.94rem; font-weight: 650; letter-spacing: -.01em; color: var(--brand-dk);
}
.chapters .chapterlist, .chapters .addchapter { margin-left: 20px; margin-right: 20px; }
.chapters .addchapter { margin-bottom: 18px; }

/* Cases déjà saisies, listées sous le formulaire d'ajout — une par
   ligne, avec suppression immédiate (pas de confirmation : l'ajout est
   aussi rapide que la suppression). */
.chapterlist { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chapterlist__row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 14px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line);
}
.chapterlist__row .timecode { flex: 0 0 auto; }
.chapterlist__label { font-weight: 650; flex: 1 1 220px; min-width: 0; }
.chapterlist__summary { flex-basis: 100%; font-size: .85rem; color: var(--muted); margin: 0; }
.chapterlist__del { margin-left: auto; }

.imggrid { display: grid; gap: 16px; margin: 6px 0 20px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.imgcard {
  margin: 0; padding: 13px;
  background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow);
}
.imgcard.is-cover { outline: 2px solid var(--brand); outline-offset: -2px; }
.imgcard img { width: 100%; height: auto; border-radius: var(--r-sm); }
.imgcard figcaption { margin: 10px 0 0; }
.imgcard form { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.imgcard .btn { font-size: 0.78rem; padding: 5px 12px; }

.pubrow {
  background: var(--surface); border-radius: var(--r);
  margin-bottom: 10px; box-shadow: var(--shadow);
}
.pubrow summary { padding: 14px 18px; cursor: pointer; font-size: 0.92rem;
  display: flex; gap: 11px; align-items: baseline; flex-wrap: wrap; }
.pubrow .form { padding: 0 18px 20px; }

.search--adm { max-width: 440px; margin: 20px 0 22px; }
.search--adm input { box-shadow: var(--shadow); }
.aliases { display: flex; gap: 8px; flex-wrap: wrap; }

/* Règles externes : une action claire, sans intégrer ni réhéberger un PDF. */
.documents { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.document { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.document__title { font-weight: 800; }
.document__meta { margin: 4px 0 0; color: var(--ink-soft); font-size: .9rem; }
.document__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.document__actions form { margin: 0; }
.assistant { margin-top: 22px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--brand-lt); }
.assistant h3 { margin: 0 0 6px; }
.assistant form { margin-top: 14px; }
/* La réponse se détache déjà : c'est une surface claire posée sur le
   fond teinté de .assistant. Le filet de 4 px ne disait rien de plus, et
   se coupait net dans l'arrondi. */
.assistant__answer { margin-top: 16px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.assistant__answer p { margin: 7px 0; }
.assistant__citations { margin: 12px 0 0; padding-left: 20px; font-size: .9rem; color: var(--ink-soft); }

/* ------------------------------- Adaptatif ----------------------------- */
@media (max-width: 900px) {
  .gamehead__top { grid-template-columns: 1fr; gap: 30px; }
  .gamehead__art, img.gamehead__art { max-width: 240px; }
  .specs { max-width: 760px; }
  .startgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .startcard--assistant { grid-column: 1 / -1; }
  .learning-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .community-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mod { flex-wrap: wrap; }
  .mod__thumb { flex-basis: 140px; }
  .mod__actions { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; }
  .doc-review { grid-template-columns: 1fr; min-height: 0; }
  .doc-review__preview { border-right: 0; border-bottom: 1px solid var(--line); }
  .doc-review__preview iframe { min-height: 440px; }
  .contrib__diff { grid-template-columns: 1fr; }
  .dup { grid-template-columns: 1fr; }
  .dup__mid { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  .pubhead { flex-direction: column; gap: 18px; }
  .pubhead__logo { flex-basis: auto; max-width: 150px; }
}

/* La navigation d'administration accueille davantage d'outils que le site
   public. Avant le passage au menu mobile, elle se resserre et peut défiler
   horizontalement sans pousser la recherche ou le compte hors écran. */
/* Au-delà du menu mobile, la navigation d'administration accueille plus
   d'outils que le site public : le nom du compte s'efface pour laisser la
   place à la recherche. Les cinq autres déclarations de ce bloc ne
   s'appliquaient plus — la barre en grille, plus bas dans la feuille et
   sans requête média, reprenait l'écart, le remplissage et les largeurs
   du champ à toutes les tailles. */
@media (max-width: 1400px) and (min-width: 621px) {
  .adm__user span { display: none; }
}

.mobile-nav { display: none; position: relative; }
.adm__nav-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; flex-shrink: 0; }
.adm__nav-label { flex-basis: 100%; font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.mobile-nav summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0 8px; }
.mobile-nav__links { position: absolute; right: 0; top: 100%; width: 210px; max-width: 85vw; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 8px; box-shadow: var(--shadow); z-index: 50; }
.masthead .mobile-nav__links a { display: flex; align-items: center; min-height: 44px; padding: 8px; }
#assistant select { width: 100%; min-width: 0; max-width: 100%; margin-bottom: 10px; min-height: 44px; padding: 8px; border-radius: 8px; border: 1px solid var(--line-soft); background: var(--surface); color: var(--ink); font: inherit; }
.adm h2[id], .adm form[id] { scroll-margin-top: calc(var(--admin-bar-height, 130px) + 16px); }
@media (max-width: 620px) {
  .mobile-nav { display: block; }
  .masthead__inner { gap: 8px; }
  .masthead .brand { font-size: 1rem; }
  .masthead nav { gap: 4px; min-width: 0; }
  .masthead nav > .btn { padding-inline: 8px; font-size: .8rem; }
  .masthead nav a.hide-sm { display: none; }
  .hero { padding: 56px 0 48px; }
  .search { grid-template-columns: 1fr; }
  .search .btn { width: 100%; }
  .facets { grid-template-columns: 1fr; }
  .facets__check { padding: 0 4px; }
  .videos { grid-template-columns: 1fr; }
  .crumbs { padding-top: 14px; }
  .gamehead { padding-top: 16px; }
  .gamehead h1 { font-size: clamp(2.15rem, 11vw, 3rem); }
  .gamehead__intro { font-size: 1rem; }
  .gamehead__actions .btn { width: 100%; justify-content: center; }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .specs div { padding: 11px 10px; grid-template-columns: 28px minmax(0, 1fr); column-gap: 7px; }
  .specs__icon { width: 28px; height: 28px; }
  .specs dd { font-size: .92rem; }
  /* La navigation de fiche passait sur deux ou trois rangées, ce qui
     empilait jusqu'à 160 px de barres collantes au-dessus du contenu et
     rendait faux le décalage des ancres. Elle tient maintenant sur une
     rangée qui défile horizontalement — le geste attendu sur mobile —
     et les compteurs, qu'il fallait masquer faute de place, reviennent. */
  .game-nav__inner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .game-nav__inner::-webkit-scrollbar { display: none; }
  .game-nav a, .game-nav button { flex: 0 0 auto; font-size: .8rem; padding-inline: 14px; }
  .startgrid { grid-template-columns: 1fr; }
  .startcard--assistant { grid-column: auto; }
  .startcard--video > img { min-height: 118px; }
  .learning-layout { grid-template-columns: 1fr; }
  .community-grid { grid-template-columns: 1fr; }
  .community-grid .contribution-card[open] { grid-column: auto; }
  .community-grid .contribution-card summary { min-height: 74px; }
  .video--primary .video__thumb { flex-basis: 118px; }
  .adm__bar { height: auto; padding: 12px 18px; flex-wrap: wrap; gap: 14px; }
  .doc-review__preview iframe { min-height: 340px; }
  .tbl { font-size: 0.83rem; }
  .task-jump { gap: 8px; }
  .task-jump a { min-height: 42px; padding-inline: 13px; }
  .task-group__head { align-items: flex-start; flex-direction: column; gap: 6px; }
  .task-group__summary { white-space: normal; }
  .task-table { min-width: 760px; }
  .document { align-items: stretch; flex-direction: column; }
  .document__actions .btn { text-align: center; width: 100%; }
}

/* Administration : même navigation, mêmes titres et mêmes espacements
   sur les pages de catalogue, de validation et d'exploitation. */
.adm__heading { overflow-wrap: anywhere; text-wrap: balance; }
.adm__count { display: inline-block; padding: 4px 10px; border-radius: 999px; vertical-align: middle; font-size: .55em; letter-spacing: 0; background: var(--brand-lt); color: var(--brand-dk); }
.adm :is(h2, [id], input, select, textarea, button, a) { scroll-margin-top: 130px; }
.adm :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.adm__skip { position: fixed; top: -100px; left: 16px; z-index: 100; background: var(--surface); color: var(--ink); padding: 12px 20px; }
.adm__skip:focus { top: 8px; }
.adm .flash--error { cursor: auto; }
.adm .form__row > *, .doc-review__details, .doc-review__content { min-width: 0; }
.adm .doc-review__details input { max-width: 100%; }
.doc-review__details > .doc-pdf-form { margin: 0 20px 20px; }
.adm .issues, .adm .issue, .adm .callout { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .adm__bar { position: static; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 12px 18px; }
  .adm__search { grid-column: 1 / -1; grid-row: 2; }
  .adm__menu-toggle:not([hidden]) { display: inline-flex; grid-column: 2; grid-row: 1; }
  .adm__nav { grid-row: 3; flex-wrap: wrap; gap: 4px 16px; overflow: visible; }
  .adm--enhanced .adm__nav:not(.is-open) { display: none; }
  .adm__user { grid-column: 1 / -1; grid-row: 4; justify-self: stretch; justify-content: space-between; }
  .adm__main { padding-inline: 18px; }
  .adm :is(h2, [id], input, select, textarea, button, a) { scroll-margin-top: 24px; }
}

/* Réduire le mouvement ne veut pas dire le supprimer. La règle
   précédente coupait toutes les transitions de la feuille, y compris
   celles qui ne bougent rien : une couleur de survol, un fond de puce
   active, l'estompage d'un bandeau, le dépliage d'un lecteur vidéo.
   Or c'est exactement ce qui dit qu'un clic a été pris en compte.

   Ce qui gêne, ce sont les DÉPLACEMENTS. On les annule à la source —
   l'élément ne bouge plus du tout, au lieu d'y aller sans transition —
   et l'élévation au survol reste dite par l'ombre, qui la disait déjà.

   Le défilement animé est traité côté script : voir rdjScrollBehavior()
   dans public/app.js, et le raccourci clavier de la file de relecture. */
@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .card:hover,
  .tile:hover,
  .pubcard:hover,
  .firstgame__steps a:hover,
  .stage__play:hover .stage__disc,
  .adm .flash.is-hiding { transform: none; }

  /* Le panneau s'ouvre et se ferme d'un coup ; l'état change toujours. */
  .video__panel { transition: none; }

  /* Les chevrons prennent leur position ouverte sans balayer. */
  .facets-fold > summary::before,
  .community-grid .contribution-card summary::after { transition: none; }
}

/* Formulaires publics : plus aérés que ceux de l'administration. */
.form--public { max-width: 660px; background: var(--surface);
  padding: 22px 26px 26px; border-radius: var(--r); box-shadow: var(--shadow); }
.form--public label:first-of-type { margin-top: 0; }
.steps { max-width: 62ch; padding-left: 22px; font-size: 1.04rem; line-height: 1.7; color: var(--ink-soft); }
.steps li { margin: 0 0 12px; }
.summary h2 { margin: 28px 0 8px; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }

/* =======================================================================
   Ajouts de la révision « joueur qui vient d'ouvrir sa boîte ».
   Regroupés en fin de feuille pour que la relecture voie d'un bloc ce
   qui a été ajouté, et pourquoi.
   ======================================================================= */

/* --- Accueil : indice sous le champ, bande de fraîcheur compacte ------- */
.hero__hint { margin: 12px 0 0; font-size: .86rem; color: var(--muted); }
.band__lead { margin: -14px 0 22px; max-width: 68ch; color: var(--muted); font-size: .95rem; }
.band--tight { padding-block: 8px; }
/* Dix cartes pour « Ajoutés cette semaine » prenaient un écran entier au
   profit d'une information d'éditeur. Six liens sur une ligne suffisent. */
.recentbar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  padding: 14px 18px; border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow);
}
.recentbar__label {
  font-size: var(--micro); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.recentbar a { font-size: .92rem; font-weight: 550; }

/* --- Cartes : nature du jeu ------------------------------------------- */
.card__kind {
  display: block; margin-bottom: 5px;
  font-size: var(--micro); font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
/* Une extension se signalait deux fois : par ce filet, et par le
   .card__kind qui écrit « Extension de Catane » au-dessus du titre. Le
   texte nomme le jeu de base ; le filet ne pouvait pas. */
/* Un jeu sans vidéo laissait un emplacement vide, indiscernable d'un
   badge qui aurait échoué. Il le dit maintenant, en retrait. */
.card__flag--empty {
  background: transparent; color: var(--muted);
  border: 1px dashed var(--line); font-weight: 600;
}

/* --- Filtres : groupes, cases alignées, listes de termes --------------- */
.facets__group {
  grid-column: 1 / -1; margin: 0; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); min-width: 0;
}
.facets__group legend {
  padding: 0 6px; font-size: var(--micro); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.facets__group legend span {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  border-radius: 999px; background: var(--brand); color: #06110D;
}
.facets__group--checks { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.facets__check small { display: block; color: var(--muted); font-size: .78rem; font-weight: 500; }
.facets__search {
  width: 100%; min-height: 40px; font: inherit; font-size: .9rem; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink); margin-bottom: 10px;
}
/* Soixante mécaniques : la liste défile plutôt que de pousser le bouton
   « Filtrer » hors de l'écran. */
.facets__options {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 14px; max-height: 230px; overflow-y: auto;
}
.facets__option {
  display: flex; align-items: center; gap: 8px; min-height: 34px;
  font-size: .88rem; cursor: pointer;
}
.facets__option[hidden] { display: none; }
.facets__option input { flex: 0 0 auto; }

/* --- Fiche : hiérarchie des actions ------------------------------------ */
.btn--with-hint { flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
.btn--with-hint small { font-weight: 500; font-size: .74rem; opacity: .75; }
.gamehead__shelf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 0; }
.gamehead__shelf small { color: var(--muted); font-size: .84rem; }
.byline--warn { color: var(--muted); font-style: italic; }

/* Sorties de secours d'une fiche sans vidéo : quatre fiches sur cinq. */
.exits { margin: 8px 0 0; padding-left: 20px; line-height: 1.9; }

/* --- Documents et aides de jeu ----------------------------------------- */
.doclist__head { margin: 20px 0 8px; font-size: 1rem; font-weight: 700; }
.doclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.doclist__item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 12px 16px; border-radius: var(--r-sm);
  background: var(--surface); box-shadow: var(--shadow);
}
.doclist__meta { color: var(--muted); font-size: .84rem; }
.doclist__official {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: var(--brand-lt); color: var(--brand-dk);
  font-size: var(--micro); font-weight: 700; text-transform: uppercase;
}

/* --- Parcours « première partie » -------------------------------------- */
.firstgame__steps {
  list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.firstgame__steps li { counter-increment: step; }
.firstgame__steps a {
  display: grid; gap: 4px; height: 100%; padding: 16px 18px;
  border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
  text-decoration: none; color: inherit;
  /* Le filet supérieur doublait le numéro de l'étape, que .firstgame__label
     compose déjà par un compteur CSS — et un trait droit de 3 px sur un
     angle de 16 px se coupe au lieu de suivre. */
  transition: transform .16s ease, box-shadow .16s ease;
}
.firstgame__steps a:hover { color: inherit; transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.firstgame__label {
  font-size: var(--micro); font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--brand-dk);
}
.firstgame__label::before { content: counter(step) ". "; }
.firstgame__chapter { font-weight: 650; font-size: 1rem; line-height: 1.3; }
.firstgame__steps .timecode { justify-self: start; margin-top: 4px; }

/* --- La Piste repliée --------------------------------------------------- */
.piste__fold > summary {
  cursor: pointer; padding: 6px 0; font-size: .88rem; font-weight: 600;
  color: var(--muted); list-style: none;
}
.piste__fold > summary::-webkit-details-marker { display: none; }
.piste__fold > summary::before { content: "\25B8  "; }
.piste__fold[open] > summary::before { content: "\25BE  "; }
.piste__fold > summary:hover { color: var(--ink); }
.piste__card-actions .piste__share,
.piste__card-actions .piste__yt { font-size: .84rem; color: var(--muted); }
.piste__card-actions .piste__share:hover,
.piste__card-actions .piste__yt:hover { color: var(--ink); }


@media (max-width: 620px) {
  .firstgame__steps { grid-template-columns: 1fr; }
  .facets__options { grid-template-columns: 1fr; max-height: 200px; }
  .facets__group--checks { flex-direction: column; gap: 4px; }
  /* Le Mode Table se consulte à table, sur le téléphone posé à côté du
     plateau : le lecteur prend moins de hauteur pour que les cases
     restent visibles sous lui. */
  .table-mode__player .stage { max-height: 32vh; }
  .table-mode__body { padding: 14px 14px 32px; }
  .table-mode__controls { gap: 6px; padding: 8px 10px; }
  .table-mode__controls .btn { flex: 1 1 auto; font-size: .8rem; padding-inline: 10px; }
  .doclist__item { flex-direction: column; gap: 4px; }
  .recentbar { gap: 6px 12px; }
  .btn--with-hint { align-items: center; text-align: center; }
  /* Une piste de vingt-huit cases en grille de deux colonnes devenait
     illisible sous 380 px : une colonne, et la case respire. */
  .piste__track { grid-template-columns: 1fr; }
}

/* En paysage sur téléphone, la hauteur est la ressource rare : la barre
   et les commandes se resserrent pour laisser l'image respirer. */
@media (max-height: 480px) and (orientation: landscape) {
  .table-mode__bar { padding: 8px 16px; }
  .table-mode__player .stage { max-height: 58vh; }
  .table-mode__q { margin-bottom: 10px; }
  .table-mode__q-label, .table-mode__scope { display: none; }
}

/* Suggestions : nature de la fiche et présence de vidéos, lisibles avant
   le clic (voir GameController::suggest()). */
.suggest__kind {
  display: block; font-style: normal;
  font-size: var(--micro); font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.suggest__videos { display: block; color: var(--brand-dk); font-weight: 650; }
.suggest__videos--empty { color: var(--muted); font-weight: 500; }
.videos__votehint { margin: 0 0 12px; font-size: .84rem; color: var(--muted); }

/* Vidéos au-delà de la sixième : repliées par app.js. */
.video.is-folded { display: none; }
.videos__more { margin-top: 14px; }
@media (max-width: 620px) {
  /* Un titre YouTube complet occupait six lignes dans une colonne de
     200 px : chaque vidéo fermée faisait 260 px de haut. Trois lignes
     suffisent à reconnaître la vidéo ; le titre entier reste dans
     l'attribut du lien « Ouvrir sur YouTube » et dans le panneau. */
  .video__title {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 620px) {
  /* Cinq commandes empilées prenaient 160 px sous une image de 210 :
     les trois boutons de navigation tiennent sur une rangée, la vitesse
     et le retour à la liste sur la suivante. Chaque cible garde ses
     44 px de haut — on les vise au pouce, à côté du plateau. */
  .table-mode__controls { justify-content: space-between; row-gap: 6px; }
  .table-mode__controls .btn { flex: 1 1 28%; min-width: 0; }
  .table-mode__controls [data-table-mode-list-back] { flex: 1 1 55%; }
  .table-mode__speed { flex: 1 1 38%; justify-content: flex-end; }
  .table-mode__speed select { min-width: 84px; }
}
.video__tag--digital { background: rgba(255,255,255,.07); color: var(--muted); }
[data-theme="light"] .video__tag--digital { background: rgba(20,22,27,.06); color: #4A5058; }

/* =======================================================================
   Administration — relecture, chaînes, audit.
   ======================================================================= */

/* Le rappel des raccourcis passait sous la rangée de filtres, en gris
   clair, sur une ligne : illisible, alors que c'est la seule chose qui
   rende une file de plusieurs milliers tenable. */
.shortcuts {
  display: grid; gap: 10px 26px; grid-template-columns: auto 1fr;
  margin: 0 0 16px; padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface);
}
.shortcuts__title {
  grid-column: 1 / -1; margin: 0;
  font-size: var(--micro); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.shortcuts ul, .shortcuts ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.shortcuts ol { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 18px; }
.shortcuts li { font-size: .86rem; }
.shortcuts kbd {
  display: inline-block; min-width: 20px; padding: 1px 6px; text-align: center;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px;
  background: var(--bg); font: inherit; font-size: .8rem; font-weight: 700;
}
.modprogress { margin: 0 0 14px; font-size: .92rem; }
.modundo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Filtres de la file : le seul axe disponible était le type détecté,
   c'est-à-dire la donnée fausse qu'on vient corriger. */
.modfilters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
  margin: 0 0 18px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
.modfilters > div { display: grid; gap: 4px; }
.modfilters label {
  font-size: var(--micro); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.modfilters select {
  min-height: 40px; font: inherit; font-size: .9rem; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink);
}
.mod__bulk-all {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 16px;
  border: 1px dashed var(--line); border-radius: var(--r-sm);
}

/* La vignette devient un bouton : elle déplie le lecteur sur place. */
button.mod__thumb {
  position: relative; padding: 0; border: 0; background: none; cursor: pointer;
  display: block; overflow: hidden; border-radius: var(--r-sm);
}
button.mod__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mod__thumb-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 1.4rem; text-shadow: 0 1px 6px rgba(0,0,0,.6);
  background: rgba(0,0,0,.18); transition: background-color .12s ease;
}
button.mod__thumb:hover .mod__thumb-play { background: rgba(0,0,0,.35); }
.mod__player { grid-column: 1 / -1; margin-top: 10px; aspect-ratio: 16 / 9; }
.mod__player iframe { width: 100%; height: 100%; border: 0; border-radius: var(--r-sm); }

/* Sept boutons « corriger le type et publier », un par type. */
.mod__kinds { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.mod__kinds form { display: contents; }
.btn.mod__kind { font-size: .78rem; padding: 5px 9px; gap: 5px; }
.btn.mod__kind kbd {
  display: inline-block; min-width: 16px; padding: 0 4px; text-align: center;
  border: 1px solid var(--line); border-radius: 4px;
  font: inherit; font-size: .72rem; font-weight: 700; color: var(--muted);
}
.btn.mod__kind.is-current { border-color: var(--brand); color: var(--brand-dk); }

/* Le score n'apparaît que lorsqu'il dit quelque chose. */
.mod__score { font-weight: 700; }
.mod__score--low { color: var(--danger); }
.mod__score--high { color: var(--brand-dk); }

/* Écran Chaînes : une chaîne muette depuis des jours doit se voir. */
.is-stale { color: var(--danger); font-weight: 650; }

/* Audit : le bruit de déploiement, replié. */
.issues-fold > summary { cursor: pointer; padding: 8px 0; font-weight: 650; }
.cron-reveal > summary { cursor: pointer; padding: 6px 0; font-weight: 650; }

/* Doublons : le geste sûr en avant, la fusion derrière un pli. */
/* Le seul écran où l'on fait un geste irréversible : la mise en garde
   tient la fiche entière, pas son bord. */
.dup--risky { background: var(--danger-bg); border: 1px solid var(--danger-line); }
.dup__warn { grid-column: 1 / -1; margin: 0 0 8px; font-size: .86rem; color: var(--danger); }
.dup__warn--strong { font-weight: 650; }
.dup__merge > summary { cursor: pointer; font-size: .84rem; color: var(--muted); padding: 6px 0; }
.dup__merge > summary:hover { color: var(--ink); }
.dup__merge .field-help { margin: 6px 0 8px; }

/* Éditeur de Piste : le lecteur à côté des cases. */
.piste-editor__grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; margin-top: 12px; }
.piste-editor__player { position: sticky; top: calc(var(--admin-bar-height, 130px) + 12px); align-self: start; }
.piste-editor__stage { position: relative; aspect-ratio: 16 / 9; background: #05070A; border-radius: var(--r-sm); overflow: hidden; }
.piste-editor__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.piste-editor__now { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.tiny-btn { font-size: .74rem; padding: 3px 8px; }
.chapterlist__edit > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; }
.chapterlist__row--issue { background: var(--warn-bg); border-color: var(--warn-line); }
.chapterlist__issue { margin: 0 0 4px; font-size: .8rem; color: var(--warn); }
.chapterlist__actions { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; }
.chapterlist__del-wrap { margin-left: auto; }
@media (max-width: 900px) {
  .piste-editor__grid { grid-template-columns: 1fr; }
  .piste-editor__player { position: static; }
}

/* Tableau de bord : les alertes avant les compteurs.

   La gravité se lisait sur 3 px au bord gauche. Elle occupe maintenant
   toute la surface, comme le font déjà .issue--danger et .issue--warning
   pour exactement le même travail, deux écrans plus loin : c'est le motif
   de la maison, il n'y avait pas de raison d'en tenir deux. */
.alerts { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 8px; }
.alert {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line);
}
.alert > div { flex: 1 1 320px; min-width: 0; }
.alert > div strong { display: block; }
.alert > .btn { margin-left: auto; }
.alert--danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.alert--warning { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.alert--info { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
/* Le détail hérite de la couleur de gravité plutôt que de rester gris :
   sur fond teinté, --muted perdait son contraste. */
.alert .field-help { color: inherit; opacity: .84; }
.alert .btn--quiet { border-color: currentColor; color: inherit; }
.alert .btn--quiet:hover { background: var(--surface); border-color: currentColor; color: inherit; }
.tile__hint { display: block; margin-top: 6px; font-size: .78rem; line-height: 1.45; color: var(--muted); }

/* Journal : une action enchaînée sur le même sujet se voit. */
.log--chained > td:first-child { position: relative; }
.log--chained > td { background: color-mix(in srgb, var(--brand-lt) 40%, transparent); }
.log__chain { color: var(--muted); font-weight: 700; }