/* ══════════════════════════════════════════════════════════════════════
   À DISPOSITION — feuille de style de la page spéciale
   hardgaysexslave.fr/a-dispo/
   ----------------------------------------------------------------------
   Reprend l'identité HGSS (noir, rouge #CC0000, gris, Oxygen, coins 16 px)
   et neutralise, pour cette page seulement, les quatre règles globales de
   style.css qui empêcheraient les fiches de fonctionner :
       html/body à 800 px + bordures rouges fixes · img en width 60 %
       h2…h6 centrés · li en list-style decimal
   Cette feuille se charge APRÈS style.css.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* La page est noire par construction : sans cette ligne, l'ascenseur
     principal, le curseur de saisie et les menus natifs restaient ceux
     du thème clair du système — une bande blanche sur 137 000 px.      */
  color-scheme:dark;
  /* variables HGSS reprises telles quelles */
  --primary-color:#CC0000; --secondary-color:#CCCCCC; --background-color:#000000;
  --text-color:#999999;    --border-color:#202020;    --border-radius:16px;
  --link-color:#0066EE;
  --font-family:'Oxygen', Roboto, Arial, sans-serif;
  /* ── les quatre couleurs, et leur métier ──────────────────────────
     rouge  : le site — titres, filets, structure
     crème  : la matière — gras des fiches, La main, badge fourrure
     orange : ce qu'il faut savoir — À savoir, limites, fiche de garde
     bleu   : le froid et le contraste — En jeu, badge cho7, liens     */
  --creme:#E8D9B0;
  --creme-sourd:#8f8262;
  --orange:#E08A2E;
  --orange-sourd:#7a4c17;
  /* ajouts propres à cette page */
  --panneau:#0A0A0A;      /* fond des fiches */
  --panneau-2:#101010;    /* fond des encarts, comme .karma */
  --large:1220px;         /* largeur de la page spéciale */
  --barre-h:52px;         /* hauteur de la barre repliée */
  --entete-h:36px;        /* en-tête fixe, identique au reste du site */
  --pied-h:77px;          /* pied fixe — la valeur de 38 px déclarée au départ
                             laissait le pied recouvrir les 36 derniers pixels
                             du contenu ; portée à 52 px, puis à 77 px le
                             03/08/2026 quand le pied a reçu la ligne des liens
                             légaux, obligatoire sur toutes les pages.
                             77 px est la hauteur MESURÉE dans le navigateur,
                             page servie en HTTP — pas une estimation, et pas
                             une lecture d'aperçu file://, qui rend mal le
                             positionnement collant. 50 px sans la ligne.
                             Cale aussi le bouton de retour en haut et le
                             plafond du sommaire : à ne pas laisser diverger. */
}

/* ── 0. Garde-fous mobiles et sélection ──────────────────────────────── */
/* présent pour les lecteurs d'écran, invisible à l'écran — le <caption>
   du tableau des mains s'en sert                                        */
.visuellement-cache{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); border:0;
  white-space:nowrap;
}
/* Safari iOS gonfle le texte à la rotation sans consulter la feuille ;
   et un nom de produit en capitales ne doit jamais élargir la page.    */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.corps{ overflow-wrap:break-word; }
/* Sans ::selection, le bleu système se mélangeait aux deux surlignages
   crème et orange de la recherche : trois couleurs, aucune hiérarchie. */
::selection{ background:var(--primary-color); color:#fff; }
.tableau-wrap, .barre-panneau, .rail-nav{ overscroll-behavior:contain; }
.pill, .nav-lien, .barre-bouton, .zoom-btn{ -webkit-tap-highlight-color:transparent; }

/* ── 1. La page est large, contrairement au reste du site ────────────── */
html, body.adispo{ max-width:var(--large) !important; }
body.adispo::before{ max-width:var(--large) !important; }
body.adispo > header,
body.adispo > footer{ max-width:var(--large) !important; }
/* L'en-tête et le pied restent fixes, comme sur tout le site — mais le pied
   est réduit à quatre entrées sur une seule ligne, sinon il mangerait trop de
   hauteur sur une page de 78 fiches.                                        */
/* La réserve pour le pied fixe se pose sur « main », pas sur « body » :
   body est un conteneur flex de hauteur 100 %, et son padding bas n'entre
   pas dans la zone défilable — le pied recouvrait donc les 36 derniers
   pixels du texte. Sur main, qui est bien dans le flux, elle compte. */
.adispo main{ padding-bottom:calc(var(--pied-h) + 30px) !important; }
body.adispo > footer{ padding:7px 8px 6px; }
body.adispo > footer nav ul li{ flex:1 1 24%; font-size:.62em; }
/* Le pied est fixe : tout le contenu défilant doit passer DESSOUS. Or
   style.css lui donne z-index:10, alors que la barre de recherche est à 40 :
   elle traversait donc le pied au lieu de glisser derrière. Visible en haut de
   page, où la barre est encore à sa place dans le flux et tombe pile sur le
   pied — 56 px de recouvrement AVANT même l'ajout des liens légaux, 83 px
   après. Le défaut est antérieur, la ligne légale n'a fait que l'agrandir.
   50 : au-dessus de la barre (40) et du bouton de retour en haut (45),
   en dessous de la visionneuse (60) et du lien d'évitement (100). */
body.adispo > footer{ z-index:50; }
/* Les liens légaux ferment le menu sur une dernière ligne pleine largeur,
   comme sur le reste du site. Le <li class="nav-saut"> force le retour à la
   ligne ; les deux entrées légales se partagent la rangée.
   La taille se pose sur le <li>, jamais sur le <a> : style.css de ce dossier
   porte « a{font-size:1.3em;font-weight:bold} », qui multiplierait une
   seconde fois. MESURÉ : 11,2 px pour les liens légaux, 12,9 px pour le menu. */
body.adispo > footer nav ul li.nav-saut{ flex:0 0 100%; height:0;
  margin:0; padding:0; }
body.adispo > footer nav ul li.nav-legal{ flex:1 1 50%; font-size:.54em;
  margin-top:4px; padding-top:3px; border-top:1px solid rgba(204,0,0,.4); }

/* ── 2. Neutralisation des règles globales, dans le contenu seulement ── */
/* PIÈGE : style.css cible « header » et « footer » sans classe. Tout
   <header> niché dans le contenu hérite donc de position:fixed et va
   flotter en haut de l'écran. Il faut le rendre à sa place.            */
.adispo main header, .adispo main footer{
  position:static !important; transform:none !important; left:auto !important;
  width:auto !important; max-width:none !important; padding:0 !important;
  border:0 !important; background:none !important; z-index:auto !important;
  text-align:left;
}
.adispo main{ text-align:left; }
.adispo main img{ width:auto; max-width:100%; margin:0; display:block; object-fit:contain; }
.adispo main h2, .adispo main h3, .adispo main h4{ text-align:left; }
.adispo main li{ list-style-type:none; }
/* font-size:inherit : style.css impose p{font-size:.9em} sous 600 px, ce
   qui rendait la description de fiche plus petite que les encarts qui la
   suivent. On rend la taille à l'héritage, à toutes les largeurs.      */
.adispo main p{ margin:0 0 14px; text-align:justify; font-size:inherit; }
/* :where() ramène la spécificité à (0,0,2) : cette neutralisation doit
   battre les règles NUES de style.css (a en 1.2em), jamais les règles À
   CLASSE de cette feuille — elle écrasait .nav-lien, .barre-lien,
   .repere a et le gras du lien SMI, jusque dans les paliers.           */
:where(body.adispo) main a{ font-size:inherit; font-weight:normal; }

/* ── 3. Ossature ─────────────────────────────────────────────────────── */
.adispo main{ padding:calc(var(--entete-h) + 16px) 0 0; }
/* 288 px : la plus longue entrée du sommaire mesure 245 px en Oxygen ;
   il reste 15 px de marge, de quoi encaisser une police de repli plus
   large sans qu'aucun intitulé ne passe à la ligne ni ne se tronque. */
.enveloppe{ display:grid; grid-template-columns:288px minmax(0,1fr); gap:30px; align-items:start; }
.corps{ min-width:0; }

/* ── 4. Sommaire en rail ─────────────────────────────────────────────── */
.rail{ position:sticky; top:calc(var(--entete-h) + var(--barre-h) + 20px); align-self:start; }
.rail-titre{ margin:0 0 3px; }
.rail-titre a{ color:var(--primary-color); font-weight:bold; font-size:.95em;
  text-decoration:none; display:block; }
.rail-titre a:hover{ color:var(--secondary-color); text-decoration:none; }
.rail-titre span{ display:block; color:var(--text-color); font-weight:normal; font-size:.72em; }
/* Vingt-sept entrées : le sommaire est plus haut qu'un écran. Sans
   ascenseur propre, les dernières deviennent inatteignables — le rail
   étant collant, la page défile sous lui sans le faire remonter. */
.rail-nav{ display:flex; flex-direction:column; gap:1px; margin-top:12px;
  border:1px solid var(--border-color); border-radius:var(--border-radius); padding:8px;
  max-height:calc(100vh - var(--entete-h) - var(--barre-h) - var(--pied-h) - 96px);
  max-height:calc(100dvh - var(--entete-h) - var(--barre-h) - var(--pied-h) - 96px);
  overflow-y:auto; scrollbar-gutter:stable; scrollbar-width:thin;
  scrollbar-color:var(--border-color) transparent; }
.rail-nav::-webkit-scrollbar{ width:7px; }
.rail-nav::-webkit-scrollbar-thumb{ background:var(--border-color); border-radius:4px; }
/* Une entrée, une ligne. Les intitulés des blocs sont raccourcis dans le
   sommaire — ils reprennent mot pour mot le libellé des étiquettes de
   filtre, ce qui fait parler les deux navigations la même langue.      */
/* PIÈGE : le sommaire est une colonne flex sous max-height. Sans cette
   ligne, ses enfants acceptent de se comprimer pour tenir dans la hauteur
   disponible au lieu de déborder — sur un écran court les entrées
   s'écrasent (25 px, puis 20, puis 15) et l'ascenseur n'apparaît jamais. */
.rail-nav > *{ flex:0 0 auto; }
.nav-lien{ display:block; padding:5px 9px; border-radius:9px; font-size:.76em;
  color:var(--text-color); text-decoration:none; transition:background-color .25s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-lien:hover{ background:var(--border-color); color:var(--secondary-color); text-decoration:none; }
.nav-lien.actif{ color:var(--primary-color); background:var(--panneau-2); font-weight:bold; }
.nav-lien .ico{ margin-right:6px; opacity:.75; }
.nav-sep{ font-size:.68em; text-transform:uppercase; letter-spacing:.12em;
  color:var(--primary-color); margin:11px 0 4px; padding:0 9px; }
.rail-toggle{ display:none; }
/* Écran LARGE mais COURT — la tablette en paysage, typiquement 1024 à
   1280 × ≤ 900. Deux gains cumulés (07/08/2026, sur retour d'usage) :

   1. LE VIDE AU-DESSUS DU TITRE. Le rail collant dégageait en-tête +
      barre + 20 px (108 px), mais la barre vit dans la COLONNE DE
      DROITE : elle ne passe jamais au-dessus du rail, il n'y a que
      l'en-tête fixe à dégager. Un top collant se paie dès le repos —
      l'élément est poussé à sa contrainte même page en haut — donc ces
      60 px étaient du vide à l'écran avant le premier défilement.

   2. LES PASTILLES EN DRAPEAU, reprises du sommaire replié : les
      libellés courts se partagent une ligne, les intitulés de groupe
      font les ruptures. Colonne de 276 px : les longs chapitres gardent
      leur ligne, « Glisse », « Ma tête », « Tes mains » s'apparient.

   Le plafond suit : plus que l'en-tête, le pied et le titre du rail à
   soustraire. Sur 820 px de haut, le sommaire entier tient sans
   ascenseur ; en dessous de ~740, l'ascenseur fin reprend la main.    */
@media (min-width:1001px) and (max-height:900px){
  .rail{ top:calc(var(--entete-h) + 12px); }
  .rail-nav{ flex-direction:row; flex-wrap:wrap; align-items:center;
    gap:4px 5px; padding:7px;
    max-height:calc(100vh  - var(--entete-h) - var(--pied-h) - 78px);
    max-height:calc(100dvh - var(--entete-h) - var(--pied-h) - 78px); }
  .nav-lien{ flex:0 0 auto; border:1px solid var(--border-color);
    padding:3px 8px; font-size:.73em; }
  .nav-sep{ flex:1 1 100%; margin:6px 0 1px; }
  .rail-nav .nav-sep:first-child{ margin-top:0; }
}

/* ── 5. Titres ───────────────────────────────────────────────────────── */
.adispo h1{ font-size:1.75em; color:var(--primary-color); margin:0 0 4px; text-align:left; }
.adispo h1 .sous{ display:block; font-size:.5em; color:var(--text-color); font-weight:normal;
  margin-top:6px; }
.section-titre, .chapitre h2{
  font-size:1.2em; color:var(--primary-color); text-align:left;
  margin:0 0 16px; padding-bottom:9px; border-bottom:2px solid var(--primary-color);
}
.section-titre .ico, .chapitre h2 .ico{ margin-right:9px; }

/* le séparateur de toison devient le filet rouge de HGSS */
.sep{ width:80%; border:0; border-top:1px solid var(--primary-color); margin:44px auto 40px; }

/* ── 6. Fiches ───────────────────────────────────────────────────────── */
.grille{ display:flex; flex-direction:column; gap:20px; }
/* 08/08/2026 — la fiche quitte la grille pour l'HABILLAGE. En grille,
   tout le texte vivait dans la colonne de droite : sous la vignette, la
   colonne de gauche restait vide et « La main » / « En jeu » se
   serraient dans une largeur amputée de 272 px. Désormais la vignette
   FLOTTE : titre, badges et description l'habillent (et continuent
   dessous quand ils sont longs), et les blocs à ligne colorée portent
   clear:left — ils démarrent sous la vignette, PLEINE LARGEUR, leurs
   lignes crème et bleue intactes à gauche. flow-root : la fiche
   contient son flottant, et remplace l'ancien display:grid.
   L'habillage est insensible à l'ordre des enfants — l'inventaire des
   79 fiches en connaît huit types dans des ordres qui varient — là où
   une grille à placement explicite aurait exigé un ordre fixe.        */
.item{
  display:flow-root;
  background:var(--panneau); border:1px solid var(--border-color);
  border-radius:var(--border-radius); padding:18px 20px;
}
.item-media{ float:left; width:250px; margin:0 22px 14px 0; }
.item-corps > .tactile, .item-corps > .jeu,
.item-corps > .flag,    .item-corps > .variantes{ clear:left; }
/* La spécificité compte : « .adispo main img » (section 2) fait 0-1-2,
   « .item-media img » n'en faisait que 0-1-1 et perdait TOUJOURS — le
   max-width:320px du palier 1000 px était du CSS mort depuis le début. */
.adispo main .item-media img{ width:100%; border-radius:12px; background:#fff; }
.item-titre{ font-size:1.08em; color:var(--secondary-color); margin:0 0 9px; font-weight:bold; }
.item-desc{ color:var(--text-color); }
.item-corps b{ color:var(--creme); font-weight:bold; }
.item-lien{ margin:0 0 4px; }
.item-lien a{ color:var(--link-color); font-size:.86em !important; }
.item-lien a + a{ margin-left:14px; }

/* ── 7. Badges ───────────────────────────────────────────────────────── */
.badges{ margin:0 0 12px; display:flex; flex-wrap:wrap; gap:6px; }
.badge{ font-size:.7em; text-transform:uppercase; letter-spacing:.08em;
  padding:3px 9px; border-radius:9px; border:1px solid var(--border-color);
  color:var(--text-color); background:var(--panneau-2); }
/* les deux fils transversaux prennent les deux couleurs d'accent du site */
.badge.b-fourrure{ background:var(--creme); border-color:var(--creme); color:#191408; font-weight:bold; }
.badge.b-cho7{ background:var(--link-color); border-color:var(--link-color); color:#fff; font-weight:bold; }
/* le badge punition : famille du rouge du site, en sourdine — comme les
   badges de matière, il marque sans crier                              */
.badge.b-punition{ color:#e08989; border-color:#5a2020; background:rgba(204,0,0,.08); font-weight:bold; }
/* le badge dilatation : famille du bleu (l'action, En jeu), en sourdine */
.badge.b-dilatation{ color:#7ea6e0; border-color:#1e3a5f; background:rgba(0,102,238,.08); font-weight:bold; }

/* ── 8. Les trois lectures ───────────────────────────────────────────── */
.tactile, .jeu, .flag{
  padding:11px 15px; margin:12px 0 0; border-left:3px solid;
  border-radius:0 12px 12px 0; font-size:.95em; line-height:1.6;
  background:rgba(255,255,255,.015);
}
.tactile{ border-left-color:var(--creme-sourd); }
.jeu{ border-left-color:var(--link-color); }
.flag{ border-left-color:var(--orange); background:rgba(224,138,46,.07);
  border-top:1px solid rgba(224,138,46,.22); border-right:1px solid rgba(224,138,46,.22);
  border-bottom:1px solid rgba(224,138,46,.22); border-radius:0 12px 12px 0; }
.tactile .lab, .jeu .lab, .flag .lab{
  display:block; text-transform:uppercase; letter-spacing:.1em; font-size:.74em;
  font-weight:bold; margin-bottom:5px; }
.tactile .lab{ color:var(--creme); }
.jeu .lab{ color:var(--link-color); }
.flag .lab{ color:var(--orange); }

/* ── 9. Vignette de remplacement, sans visuel de catalogue ───────────── */
/* Remplace le pan de toison : cadre rouge à la manière de .redframe.
   RENOMMÉ le 31/07/2026 : la feuille disait « --sans », les neuf fiches
   sans photo disent « --toison » — les cadres s'affichaient nus depuis
   le début (dont la fiche de garde électro et le boîtier ET-312B).
   07/08/2026 : elles ne sont plus que huit, le bombardier Tassa Paris
   ayant retrouvé son visuel.                                          */
.item-media--toison{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:190px; padding:16px;
  background:var(--panneau-2); border:2px solid var(--primary-color); border-radius:12px;
}
.item-media--toison span{ font-size:.78em; text-transform:uppercase; letter-spacing:.13em;
  line-height:1.7; color:var(--secondary-color); }
.item-media--toison span i{ display:block; font-style:normal; color:var(--text-color);
  font-size:.85em; letter-spacing:.08em; margin-top:5px; }

/* ── 10. Grille des variantes ────────────────────────────────────────── */
.variantes{ margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--border-color); }
.variantes-lab{ display:block; font-size:.72em; text-transform:uppercase; letter-spacing:.13em;
  color:var(--primary-color); margin:0 0 10px; font-weight:bold; }
.variantes ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px; }
.variantes li{ width:136px; margin:0; font-size:.76em; line-height:1.4; color:var(--text-color); }
.variantes li img{ width:100%; height:92px; object-fit:contain; background:#fff;
  border-radius:9px; margin:0 0 6px; }

/* ── 11. Fiches particulières ────────────────────────────────────────── */
.item--breve .jeu{ margin-top:2px; }
.item--garde{ border-color:var(--orange-sourd); background:linear-gradient(180deg,rgba(224,138,46,.055),transparent 55%),var(--panneau); }
.item--garde .item-titre{ color:var(--orange); }

/* ── 12. Chapitre transversal ────────────────────────────────────────── */
.chapitre{ margin:0 0 34px; }
.chapitre--tenir{ border-left:2px solid var(--primary-color); padding-left:22px; }
.chapitre p{ color:var(--text-color); }
.chapitre b{ color:var(--creme); }
.chapitre .cle{ margin:18px 0 0; padding:15px 17px; background:var(--panneau-2);
  border:1px solid var(--primary-color); border-radius:var(--border-radius);
  color:var(--secondary-color); }

/* ── 12 bis. L'introduction de la page ───────────────────────────────
   Le paragraphe d'attaque est un ton au-dessus du texte courant ; le
   bloc crème, lui, dit que la fourrure est facultative. Crème parce que
   c'est de la matière qu'il parle — l'orange est réservé aux limites. */
.page-intro{ margin:16px 0 30px; }
.page-intro p{ margin:0 0 15px; }
.page-intro b{ color:var(--creme); }
.page-intro .lede{ font-size:1.06em; color:var(--secondary-color); }
/* le paragraphe d'immersion : un ton au-dessus, comme la lede, mais en
   rouge sourd sur le bord — c'est la page qui promet, pas qui explique */
.page-intro .scene-intro{
  font-size:1.03em; color:var(--secondary-color);
  padding-left:16px; border-left:3px solid var(--primary-color);
}
.page-intro .option{
  margin:22px 0 18px; padding:16px 19px;
  background:var(--panneau-2);
  border:1px solid var(--creme-sourd); border-left:3px solid var(--creme);
  border-radius:var(--border-radius); color:var(--secondary-color);
}

/* ── 12 ter. Les visuels de chapitre ─────────────────────────────────
   Ajoutés le 07/08/2026. Les neuf chapitres narratifs étaient de longs
   blocs de texte sans une seule image, alors que les 79 fiches ont
   toutes la leur : une bannière après le chapeau, une coupure en fin de
   chapitre, et au fil des points numérotés pour les scènes et le
   protocole. Jamais de personne sur ces visuels, jamais de texte par
   dessus — l'image est un temps de silence, pas une illustration.

   LE ROGNAGE EST GÉOMÉTRIQUE, et c'est tout l'intérêt d'un fichier
   unique : les 22 sources font 2200 × 1238 depuis leur retouche du
   07/08/2026 (1238 est l'entier le plus proche du vrai 16/9). Le
   conteneur de référence porte ce rapport, donc object-fit:cover ne
   rogne RIEN. Pour rogner volontairement, on ne refabrique pas le
   fichier, on change aspect-ratio : PLUS ÉTROIT que la source rogne à
   gauche et à droite (paysage, portrait, vignette, et la règle mobile),
   PLUS LARGE rogne en haut et en bas (bandeau) — un zoom volontaire,
   réservé aux sujets qui occupent la bande centrale de l'image.
   RÈGLE D'EMPLOI DES RATIOS (arbitrée le 07/08/2026 au soir) : un
   visuel affiché UNE seule fois s'affiche en 16/9, toujours — les
   formats étroits centrés laissaient des bandes vides de part et
   d'autre, essayé et rejeté. Les autres ratios sont réservés aux
   visuels affichés DEUX fois (cocon, tableau des matières, corde) :
   jamais à moins de cinq écrans d'intervalle, et jamais deux fois sous
   le même ratio — c'est le recadrage qui fait qu'on ne les reconnaît
   pas comme des doublons. Portrait et vignette n'ont aucun emploi en ce
   moment : ils restent définis pour le prochain réemploi.              */
.chap-visuel{
  margin:28px 0; border-radius:var(--border-radius); overflow:hidden;
  border:1px solid var(--border-color); background:var(--panneau);
}
/* .adispo devant : la neutralisation de la section 2 pose
   « .adispo main img { object-fit:contain } », plus spécifique qu'un
   simple .chap-visuel img — et un cover perdu se voit : l'image flotte
   en 16/9 dans les cadres portrait et vignette au lieu de les remplir  */
.adispo .chap-visuel img{ display:block; width:100%; height:100%;
  object-fit:cover; object-position:center; }
/* le bouton de zoom est transparent pour la géométrie : il transmet la
   hauteur du cadre à l'image, sinon la chaîne des height:100% se rompt */
.chap-visuel .zoom-btn{ height:100%; }
/* bannière et coupure partagent le format de référence : rien de rogné */
.chap-visuel--banniere,
.chap-visuel--coupure{ aspect-ratio:2200 / 1238; }
/* paysage : un cran plus ramassé que la source, ~16 % rognés aux flancs */
.chap-visuel--paysage{ aspect-ratio:3 / 2; }
/* portrait et vignette rognent fort les flancs : sujets centrés
   uniquement. Bloc resserré et centré — pleine largeur, un 4/5 ferait
   1170 px de haut, presque un écran entier                             */
.chap-visuel--portrait{ aspect-ratio:4 / 5; max-width:440px;
  margin-left:auto; margin-right:auto; }
.chap-visuel--vignette{ aspect-ratio:1 / 1; max-width:520px;
  margin-left:auto; margin-right:auto; }
/* bandeau : PLUS LARGE que la source — le seul qui coupe haut et bas  */
.chap-visuel--bandeau{ aspect-ratio:21 / 9; }

/* ── 12 quater. L'en-tête de bloc d'inventaire ────────────────────────
   Ajouté le 08/08/2026 (lot 2), REFONDU le 09/08 : la première version
   affichait le carré source à 250 px collé à gauche, aligné sur la
   colonne des vignettes — essayé en ligne et rejeté par le propriétaire
   (« un vide à droite, l'image est petite »). Nouvelle règle : PLEINE
   LARGEUR en 2/1, le haut et le bas de la source carrée sont rognés
   (25 % de chaque côté, object-position:center garde la bande du
   milieu). Le 2/1 est choisi exprès CONTRE le 16/9 des bannières de
   chapitre : plus allongé, il signe les têtes de bloc sans les
   confondre avec elles — et sans tomber au 21/9, qui ne garderait que
   43 % de l'image.                                                    */
.bloc-visuel{
  margin:0 0 22px; aspect-ratio:2 / 1;
  border-radius:var(--border-radius); overflow:hidden;
  border:1px solid var(--border-color); background:var(--panneau);
}
/* Même piège de spécificité que .chap-visuel : « .adispo main img »
   (section 2) fait 0-1-2 et impose object-fit:contain — trois niveaux */
.adispo main .bloc-visuel img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.bloc-visuel .zoom-btn{ height:100%; }

/* ── 13. Barre de navigation ─────────────────────────────────────────── */
.barre{ position:sticky; top:var(--entete-h); z-index:40;
  background:rgba(0,0,0,.97); backdrop-filter:blur(7px);
  border-bottom:1px solid var(--border-color); margin:0 0 26px; }
/* flex-wrap dès le bureau : si la ligne se remplit (navette + compteur +
   « Tout réafficher » ensemble), le dernier bouton passe dessous au lieu
   de déborder du cadre                                                 */
.barre-ligne{ display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  row-gap:8px; min-height:var(--barre-h); }
#recherche{ flex:1 1 240px; min-width:150px; background:var(--panneau-2);
  color:var(--secondary-color); border:1px solid var(--border-color); border-radius:9px;
  padding:9px 13px; font-family:var(--font-family); font-size:.9em;
  -webkit-appearance:none; appearance:none; box-sizing:border-box; }
/* l'« outline:none » d'origine supprimait l'anneau de focus clavier et le
   remplaçait par un liseré à 3,2:1 — sous le seuil AA                  */
#recherche:focus{ border-color:var(--primary-color); }
#recherche:focus-visible{ outline:2px solid var(--link-color); outline-offset:2px; }
#recherche::placeholder{ color:#5a5a5a; }
.compteur{ font-size:.8em; color:var(--text-color); white-space:nowrap;
  text-transform:uppercase; letter-spacing:.07em; }
.compteur.filtre{ color:var(--secondary-color); }
.barre-bouton{ display:flex; align-items:center; gap:7px; background:var(--panneau-2);
  color:var(--text-color); border:1px solid var(--border-color); border-radius:9px;
  padding:9px 14px; font-family:var(--font-family); font-size:.85em; cursor:pointer;
  transition:all .2s; white-space:nowrap; }
.barre-bouton:hover{ color:var(--secondary-color); border-color:var(--primary-color); }
.barre-bouton[aria-expanded="true"]{ background:var(--primary-color); border-color:var(--primary-color);
  color:#fff; font-weight:bold; }
.barre-bouton-txt::after{ content:' ▾'; opacity:.6; }
.barre-bouton[aria-expanded="true"] .barre-bouton-txt::after{ content:' ▴'; }
.barre-actifs{ display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--primary-color); color:#fff; font-size:.7em; font-weight:bold; }
.barre-bouton[aria-expanded="true"] .barre-actifs{ background:#fff; color:var(--primary-color); }
.barre-raz{ background:none; border:1px solid var(--primary-color); color:var(--primary-color);
  border-radius:9px; padding:8px 12px; font-family:var(--font-family); font-size:.8em;
  cursor:pointer; white-space:nowrap; transition:all .2s; }
.barre-raz:hover{ background:var(--primary-color); color:#fff; }
/* « display » explicite écrase hidden : il faut le rétablir */
.barre-panneau[hidden], .barre-actifs[hidden], .barre-raz[hidden]{ display:none !important; }
.barre-panneau{ border-top:1px solid var(--border-color); padding:13px 0 15px;
  display:flex; flex-direction:column; gap:10px; }
.barre-groupe{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.barre-lab{ font-size:.74em; text-transform:uppercase; letter-spacing:.12em;
  color:var(--primary-color); min-width:140px; font-weight:bold; }
.barre-groupe--fils, .barre-groupe--outils{ padding-top:9px; border-top:1px dashed var(--border-color); }
.barre-aide{ font-size:.76em; color:#5a5a5a; font-style:italic; }
.barre-aide kbd{ font-family:Consolas,monospace; font-style:normal; font-size:.9em;
  background:var(--panneau-2); border:1px solid var(--border-color); border-radius:4px;
  padding:1px 5px; color:var(--text-color); }
.pill{ background:var(--panneau-2); color:var(--text-color); border:1px solid var(--border-color);
  border-radius:999px; padding:6px 13px; font-family:var(--font-family); font-size:.83em;
  cursor:pointer; transition:all .2s; }
.pill:hover{ color:var(--secondary-color); border-color:var(--primary-color); }
.pill.actif{ background:var(--primary-color); border-color:var(--primary-color); color:#fff; font-weight:bold; }
.pill--fourrure.actif{ background:var(--creme); border-color:var(--creme); color:#191408; }
.pill--cho7.actif{ background:var(--link-color); border-color:var(--link-color); }
/* Le mot cherché masque des fiches, exactement comme une étiquette. Il
   figure donc dans le panneau, sous forme d'étiquette lui aussi, avec sa
   croix pour l'ôter — sinon le bouton « Filtrer » compterait un filtre
   que rien, une fois le panneau déplié, ne viendrait montrer.          */
.barre-groupe--texte{ padding-bottom:10px; border-bottom:1px dashed var(--border-color); }
.barre-groupe--texte[hidden]{ display:none !important; }
.pill--texte.actif{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--creme); border-color:var(--creme); color:#191408;
}
.pill--texte .pill-x{ font-size:1.2em; line-height:1; opacity:.5; }
.pill--texte:hover .pill-x{ opacity:1; }
.btn-export{ background:none; border:1px solid var(--border-color); color:var(--text-color);
  border-radius:9px; padding:8px 14px; font-family:var(--font-family); font-size:.82em; cursor:pointer; }
.btn-export:hover{ border-color:var(--link-color); color:var(--link-color); }

/* ── 13 bis. Ajouts du 31/07/2026 dans la barre ──────────────────────── */
/* (Les deux liens permanents vers le protocole et la fiche de séance ont
   été retirés le 31/07 au soir, à la demande de Morgane : trop mis en
   évidence. Le rappel du cadre en fin d'intro porte les mêmes liens.)  */
/* La vue compacte : replie La main et En jeu, garde tout le reste.
   Le libellé et l'état vivent sur aria-pressed, comme les étiquettes.  */
.btn-dense{ background:none; border:1px solid var(--border-color); color:var(--text-color);
  border-radius:9px; padding:8px 14px; font-family:var(--font-family); font-size:.82em; cursor:pointer; }
.btn-dense:hover{ border-color:var(--creme); color:var(--creme); }
.btn-dense[aria-pressed="true"]{ background:var(--creme); border-color:var(--creme);
  color:#191408; font-weight:bold; }
body.dense .tactile, body.dense .jeu{ display:none; }
/* la fiche est un habillage depuis le 08/08/2026 : la densité se règle
   sur la largeur du flottant, plus sur des colonnes de grille          */
body.dense .item{ padding:12px 16px; }
body.dense .item-media{ width:110px; margin:0 14px 10px 0; }
/* La pill « Sans fourrure » : l'envers du badge crème, bord crème, fond nu */
.pill--sansfourrure.actif{ background:none; border-color:var(--creme);
  color:var(--creme); text-decoration:line-through; text-decoration-thickness:1px; }

/* ── 13 ter. Le rappel du cadre et l'orientation, en fin d'intro ─────── */
.cadre-rappel{
  margin:20px 0 14px; padding:13px 17px;
  background:rgba(224,138,46,.07); border:1px solid var(--orange-sourd);
  border-left:3px solid var(--orange); border-radius:0 12px 12px 0;
  color:var(--text-color);
}
.cadre-rappel b{ color:var(--orange); }
.cadre-rappel a{ color:var(--orange); text-decoration:underline; text-underline-offset:2px; }
.cadre-rappel a:hover{ color:var(--creme); }
.repere{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 6px; }
.repere-titre{ flex:1 1 100%; font-size:.78em; text-transform:uppercase;
  letter-spacing:.09em; color:var(--primary-color); font-weight:bold; }
.repere a{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--panneau-2); border:1px solid var(--border-color);
  color:var(--text-color); border-radius:999px; padding:8px 14px;
  font-size:.82em; text-decoration:none;
}
.repere a:hover{ border-color:var(--primary-color); color:var(--secondary-color); text-decoration:none; }

/* ── 13 quater. La visionneuse au clavier ────────────────────────────── */
.zoom-btn{ display:block; width:100%; background:none; border:0; padding:0; margin:0;
  cursor:zoom-in; font:inherit; color:inherit; text-align:inherit; }
.zoom-btn:focus-visible{ outline:2px solid var(--link-color); outline-offset:3px; border-radius:12px; }
.variantes .zoom-btn{ cursor:zoom-in; }

/* ── 14. Filtrage : ce qui se cache ──────────────────────────────────── */
.item.cache{ display:none; }
.inv-section.vide, .sep.vide{ display:none !important; }

/* ── 15. Ancres : ne pas passer sous l'en-tête + la barre ────────────── */
/* .item : depuis que la fiche de garde électro est une cible de lien
   (#garde-electro), les fiches aussi doivent atterrir sous la barre.   */
header#haut, .inv-section, .chapitre, .proto-item, .scene, .item{
  scroll-margin-top:calc(var(--entete-h) + var(--barre-h) + 16px);
}

/* ── 16 & 17. Écrans étroits et impression ───────────────────────────
   DÉPLACÉS EN FIN DE FEUILLE le 31/07/2026. À spécificité égale, c'est
   l'ordre qui tranche : posés ici, ces blocs perdaient contre toutes
   les règles déclarées plus bas (navette, chapitres, tableau…).       */

/* ══════════════════════════════════════════════════════════════════════
   MISE EN ÉVIDENCE DES OCCURRENCES DE LA RECHERCHE
   API CSS Custom Highlight : le surlignage ne touche jamais au DOM, donc
   il ne casse ni les gras, ni les liens, ni les attributs des fiches.
   Chrome 105 et suivants. Ailleurs, il n'y a simplement pas de surlignage.
   ══════════════════════════════════════════════════════════════════════ */
::highlight(trouve){
  background-color:var(--creme); color:#191408;
}
::highlight(trouve-actif){
  background-color:var(--orange); color:#1a1004;
}

/* ── la navette : compteur d'occurrences et ses deux flèches ───────────
   Elle vit dans la ligne de la barre, entre le champ de recherche et le
   compteur de fiches. Deux compteurs voisins qui affichent tous les deux
   « 1 sur quelque chose », c'est la confusion garantie : on enferme donc
   la navette dans son propre boîtier, bordé de crème, et on lui donne
   les couleurs du surlignage — crème pour toutes les occurrences, orange
   pour celle où l'on se trouve. Les flèches deviennent visiblement les
   flèches du « 1 / 2 », et plus celles du « 1 sur 4 » d'à côté.        */
.navette{
  display:inline-flex; align-items:center; gap:1px;
  height:34px; box-sizing:border-box;
  padding:2px 3px 2px 9px; margin-right:8px;
  background:var(--panneau-2);
  border:1px solid var(--creme-sourd); border-radius:9px;
}
.navette[hidden]{ display:none !important; }
/* la loupe rattache le boîtier au champ de recherche, pas au comptage */
.navette::before{
  content:'⌕'; color:var(--creme-sourd);
  font-size:1.1em; line-height:1; margin-right:6px;
}
.navette-compte{
  font-size:.78em; color:var(--creme); white-space:nowrap;
  padding:0 7px 0 0; letter-spacing:.04em; font-variant-numeric:tabular-nums;
}
.navette-compte.vide{ color:var(--primary-color); }
.navette button{
  background:none; color:var(--creme); padding:0;
  border:1px solid transparent; border-radius:7px;
  width:26px; height:26px; font-size:.72em; line-height:1; cursor:pointer;
  font-family:var(--font-family); transition:all .18s;
}
/* orange au survol : c'est le repère orange que le clic va déplacer */
.navette button:hover:not(:disabled){
  background:var(--orange); border-color:var(--orange); color:#1a1004;
}
.navette button:disabled{ opacity:.3; cursor:default; }

/* ── Sommaire : les blocs que le filtre a fait disparaître ─────────────
   Un lien qui pointe vers un bloc masqué enverrait dans le vide. On
   l'éteint, et une note en bas du rail dit pourquoi et propose la sortie. */
.nav-lien--vide{
  opacity:.28; pointer-events:none; text-decoration:line-through;
  text-decoration-thickness:1px;
}
.rail-note{
  margin:10px 0 0; padding:9px 11px;
  background:rgba(224,138,46,.08); border:1px solid var(--orange-sourd);
  border-radius:11px; font-size:.74em; line-height:1.5; color:var(--text-color);
}
.rail-note[hidden]{ display:none !important; }
.rail-note b{ display:block; color:var(--orange); font-size:1.02em; margin-bottom:3px; }
.rail-note a{ color:var(--orange) !important; text-decoration:underline; cursor:pointer; }
.rail-note a:hover{ color:var(--creme) !important; }

/* ══════════════════════════════════════════════════════════════════════
   18. LES CHAPITRES RÉDIGÉS
   Reprise des styles de l'ancienne page SMI, traduits dans la palette
   HGSS : le beige devient crème, l'ambre devient orange, les titres de
   structure passent au rouge du site. Une seule police, Oxygen.
   ══════════════════════════════════════════════════════════════════════ */

/* justification et césure — sans coupure, le justifié français creuse
   des rivières blanches dans la colonne                                */
.chapeau, .bloc p, .protocole p, .lettre p, .glossaire dd,
.item-desc, .tactile, .jeu, .flag{
  text-align:justify; text-justify:inter-word;
  -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:6 3 3;
}

.chapeau{
  font-size:1.04em; line-height:1.75; color:var(--secondary-color);
  margin:16px 0 22px; padding-left:16px; border-left:3px solid var(--creme-sourd);
}
.bloc{
  background:var(--panneau); border:1px solid var(--border-color);
  border-radius:var(--border-radius); padding:20px 24px; margin:0 0 22px; line-height:1.8;
}
.bloc h3{ color:var(--creme); font-size:1.14em; margin:6px 0 12px; font-weight:bold; }
.bloc p{ margin:0 0 15px; }
.bloc p:last-child{ margin-bottom:0; }
.bloc b, .chapeau b{ color:var(--creme); }

.retour{ text-align:right !important; margin:10px 0 0; }
.retour a{ color:#5a5a5a; font-size:.8em; }
.retour a:hover{ color:var(--primary-color); }

img.zoomable{ cursor:zoom-in; transition:filter .2s; }
img.zoomable:hover{ filter:brightness(1.08); }

/* les trois badges de matière, en sourdine : les deux badges de fil
   transversal (crème et bleu) doivent rester les plus visibles      */
.badge.b-nat{ color:#b7cc8f; border-color:#3f4f28; background:rgba(160,190,110,.07); }
.badge.b-syn{ color:#b0aaa1; border-color:#3a352f; background:rgba(180,170,155,.06); }
.badge.b-mix{ color:#a9c0bd; border-color:#334744; background:rgba(150,190,185,.07); }

/* fiche « système » : plusieurs références sous un seul titre */
.item--systeme .item-titre{ padding-right:6px; }

/* ── Le tableau des six mains ─────────────────────────────────────────── */
.tableau-wrap{ overflow-x:auto; margin:20px 0; }
table.mains{ width:100%; border-collapse:collapse; font-size:.92em; }
table.mains th, table.mains td{
  border:1px solid var(--border-color); padding:11px 13px;
  text-align:left; vertical-align:top;
}
table.mains th{
  background:var(--panneau-2); color:var(--primary-color);
  font-variant:small-caps; letter-spacing:.06em; font-weight:bold;
}
table.mains td{ line-height:1.55; color:var(--text-color); }
table.mains tr:nth-child(even) td{ background:rgba(255,255,255,.012); }
table.mains td:first-child b, table.mains b{ color:var(--creme); }

/* ── Le protocole : document de référence, repérage rapide ────────────── */
.proto-rappel{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.proto-rappel a{
  background:var(--panneau-2); border:1px solid var(--orange-sourd); color:var(--orange);
  border-radius:999px; padding:6px 13px; font-size:.78em;
  font-variant:small-caps; letter-spacing:.05em; text-decoration:none;
}
.proto-rappel a:hover{ background:var(--orange); color:#1a1004; text-decoration:none; }
.protocole{
  background:#0d0906; border:1px solid var(--orange-sourd);
  border-radius:var(--border-radius); padding:8px 28px 24px; line-height:1.8;
}
.protocole h3{
  color:var(--orange); font-size:1.12em; margin:24px 0 10px;
  display:flex; align-items:baseline; gap:10px; font-weight:bold;
}
.protocole h3 .num{
  font-size:.72em; color:#1a1004; background:var(--orange);
  width:1.7em; height:1.7em; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  flex:none; font-weight:bold;
}
.protocole p{ margin:0 0 13px; color:var(--text-color); }
.protocole b{ color:#e9c39a; }

/* ── Les scènes ───────────────────────────────────────────────────────── */
.scenes-index{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.scenes-index a{
  background:var(--panneau-2); border:1px solid var(--border-color);
  color:var(--text-color); border-radius:9px; padding:6px 11px;
  font-size:.8em; text-decoration:none;
}
.scenes-index a:hover{ border-color:var(--primary-color); color:var(--secondary-color); text-decoration:none; }
.scene .num{ color:var(--primary-color); font-weight:bold; margin-right:.4em; }

/* ── La lettre ────────────────────────────────────────────────────────── */
.chapitre--lettre .chapeau{ display:none; }
.lettre{
  margin:8px 0 0; background:linear-gradient(180deg,#0f0d09,#080706);
  border:1px solid var(--creme-sourd); border-radius:var(--border-radius);
  padding:40px clamp(24px,4vw,50px); line-height:1.95; font-size:1.03em;
  color:#cfc4ae;
}
.lettre p{ margin:0 0 20px; }
.lettre h3{
  color:var(--creme); font-size:1.1em; letter-spacing:.03em;
  margin:32px 0 14px; text-align:center; font-weight:bold;
}
.lettre h3::before, .lettre h3::after{ content:"·"; color:var(--creme-sourd); margin:0 .6em; }
.lettre b{ color:var(--creme); }

/* ── Le glossaire ─────────────────────────────────────────────────────── */
.glossaire{
  background:var(--panneau); border:1px solid var(--border-color);
  border-radius:var(--border-radius); padding:10px 24px 20px;
}
.glossaire dl{ margin:0; }
.glossaire dt{ color:var(--creme); font-weight:bold; font-size:1em; margin:18px 0 3px; }
.glossaire dt .en{
  font-size:.76em; font-weight:normal; color:#5a5a5a;
  font-variant:small-caps; letter-spacing:.05em; margin-left:8px;
}
.glossaire dd{ margin:0; color:var(--text-color); line-height:1.6; }

/* ── La fiche de séance, imprimable seule ─────────────────────────────── */
.fiche-seance{
  background:var(--panneau); border:1px dashed var(--orange-sourd);
  border-radius:var(--border-radius); padding:8px 24px 22px;
}
.fiche-seance h2{ border:0 !important; margin:14px 0 0 !important; padding-bottom:0 !important; }
.fs-tete{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.fs-grille{ display:grid; grid-template-columns:1fr 1fr; gap:24px 30px; margin-top:12px; }
.fs-col--notes{ grid-column:1 / -1; }
.fs-col h4{
  color:var(--orange); font-size:.98em; margin:0 0 10px;
  border-bottom:1px solid var(--border-color); padding-bottom:6px;
}
.fs-col ul{ margin:0; padding-left:18px; line-height:1.7; }
.adispo main .fs-col li{ list-style-type:disc; margin-bottom:8px; color:var(--text-color); }
.fs-col li b{ color:var(--creme); }
.fs-notes{
  border:1px solid var(--border-color); border-radius:12px; min-height:220px;
  background:repeating-linear-gradient(transparent,transparent 30px,var(--border-color) 31px);
}
.btn-imprimer{
  background:none; color:var(--creme); border:1px solid var(--creme-sourd);
  border-radius:9px; padding:9px 15px; font-family:var(--font-family);
  font-size:.82em; cursor:pointer; white-space:nowrap;
}
.btn-imprimer:hover{ background:var(--creme); color:#191408; }

/* ── Hors jeu : le seul chapitre qui n'est pas écrit en rôle ──────────── */
.chapitre--horsjeu .bloc{ border-color:var(--link-color); }
.chapitre--horsjeu .bloc b{ color:#8ab6ff; }
.adispo main .chapitre--horsjeu li{ list-style-type:disc; margin-bottom:12px; }
.chapitre--horsjeu ul{ padding-left:20px; line-height:1.8; }

/* (le second bloc « écrans étroits » et l'impression de la fiche de
   séance ont rejoint les blocs consolidés, tout en bas de la feuille) */

/* ── 19. Le bouton « retour en haut » ─────────────────────────────────
   Le script le fait apparaître passé 620 px de défilement, en lui posant
   la classe « visible ». Sans les règles ci-dessous il restait un bouton
   nu, noir sur noir, dans le coin de la page.                          */
.haut{
  position:fixed; right:22px; bottom:calc(var(--pied-h) + 18px); z-index:45;
  width:46px; height:46px; border-radius:50%;
  background:var(--panneau-2); color:var(--creme);
  border:1px solid var(--creme-sourd); font-size:1.2em; line-height:1;
  font-family:var(--font-family); cursor:pointer;
  /* visibility : opacity seule laissait le bouton focalisable au clavier
     alors qu'il était invisible — l'anneau de focus disparaissait avec  */
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s, visibility .25s, background .2s, color .2s;
}
.haut.visible{ opacity:.92; visibility:visible; pointer-events:auto; }
.haut:hover{ background:var(--creme); color:#191408; opacity:1; }

/* ── 20. La visionneuse d'images ──────────────────────────────────────── */
.lightbox{
  /* 110 et non 60 : les bordures rouges du site (body::before, style.css)
     sont un élément FIXE à z-index:100 — à 60, elles rayaient l'image
     agrandie. La visionneuse est la couche la plus haute de la page :
     elle doit dominer tout ce que style.css empile, plafonné à 100.    */
  position:fixed; inset:0; z-index:110; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.94); padding:30px; cursor:zoom-out;
}
.lightbox.ouverte{ display:flex; }
/* le verrou de défilement : posé par le script pendant l'ouverture */
html.lb-ouverte{ overflow:hidden; }
/* .lightbox est HORS de <main> : la neutralisation de la section 2 ne la
   couvre pas, et le img{width:60%} global de style.css s'y appliquait.  */
.lightbox img{
  width:auto; margin:0; object-fit:contain;
  max-width:calc(100vw - 24px); max-height:92vh; max-height:calc(100dvh - 24px);
  border-radius:12px;
  box-shadow:0 8px 40px rgba(0,0,0,.85); background:#fff;
}
.lightbox-fermer{
  position:absolute; top:16px; right:22px; background:none; border:0;
  color:var(--secondary-color); font-size:2.2em; line-height:1; cursor:pointer;
  font-family:var(--font-family);
}
.lightbox-fermer:hover{ color:var(--primary-color); }

/* ── 20 bis. La sortie de page : l'appel à écrire ─────────────────────
   Le dernier geste de la page était un lien vers un autre site ; le
   lecteur le plus convaincu n'avait rien à cliquer. Rouge : c'est la
   structure du site qui parle, et c'est la seule chose qu'on lui
   demande vraiment.                                                   */
.sortie-contact{
  margin:40px 0 0; padding:18px 22px;
  background:var(--panneau-2); border:1px solid var(--primary-color);
  border-radius:var(--border-radius);
  color:var(--secondary-color); font-size:.98em; line-height:1.75;
}
.sortie-contact b{ color:var(--primary-color); }
.sortie-contact a{ color:var(--link-color); text-decoration:underline; text-underline-offset:3px; }
.sortie-contact a:hover{ color:var(--secondary-color); }

/* ── 21. Le seul lien qui sorte de HGSS ───────────────────────────────
   Sens unique : on va de HGSS vers SMI, jamais l'inverse. D'où le triple
   rel et le referrerpolicy — l'adresse de cette page ne doit pas
   apparaître dans les statistiques du site public.                    */
.lien-smi{
  margin:44px 0 10px; padding:18px 22px;
  background:var(--panneau-2); border:1px solid var(--creme-sourd);
  border-radius:var(--border-radius);
  color:var(--text-color); font-size:.92em; line-height:1.7;
}
.lien-smi b{ color:var(--creme); }
.lien-smi a{
  color:var(--creme) !important; font-weight:bold; text-decoration:underline;
  text-underline-offset:3px;
}
.lien-smi a:hover{ color:var(--secondary-color) !important; }

/* ══════════════════════════════════════════════════════════════════════
   22. LES PALIERS — consolidés le 31/07/2026, EN FIN DE FEUILLE exprès
   ----------------------------------------------------------------------
   Quatre seuils, ALIGNÉS SUR CEUX DE style.css (768 / 600 / 380) plus le
   palier propre à cette page (1000). L'ancien découpage 1000/700/480
   laissait une bande de 68 px (701–768) où style.css avait déjà décollé
   l'en-tête alors que --entete-h valait encore 36 px : barre collée dans
   le vide, ancres décalées, sommaire amputé. Un seul bloc par seuil.
   ══════════════════════════════════════════════════════════════════════ */

/* ── ≤ 1000 px — la tablette : la structure se replie ────────────────── */
@media (max-width:1000px){
  .enveloppe{ grid-template-columns:1fr; gap:0; }
  .rail{ position:static; margin-bottom:22px; }
  /* Le plafond du sommaire collant n'a plus de sens une fois le rail
     replié en menu : sans ces trois valeurs il coupait le menu déroulé
     à hauteur d'écran — le piège annoncé par INSTRUCTIONS-FABLE §4.   */
  .rail-nav{ display:none; max-height:none; overflow-y:visible; scrollbar-gutter:auto; }
  /* Déroulé en PASTILLES EN DRAPEAU, pas en colonne (07/08/2026) : une
     entrée par ligne faisait ~1100 px — un écran et demi de téléphone à
     faire défiler avant de voir « Pratique ». En drapeau, les entrées
     s'enchaînent et reviennent à la ligne, les intitulés de groupe font
     les ruptures : le sommaire entier tient sur un écran ou presque.
     white-space:nowrap est déjà posé sur .nav-lien : une pastille ne se
     casse jamais en son milieu, c'est l'espace entre elles qui plie.   */
  .rail-nav.ouvert{ display:flex; flex-direction:row; flex-wrap:wrap;
    gap:5px 6px; align-items:center; }
  .rail-nav.ouvert .nav-sep{ flex:1 1 100%; margin:9px 0 2px; }
  .rail-nav.ouvert .nav-sep:first-child{ margin-top:2px; }
  .rail-nav.ouvert .nav-lien{ flex:0 0 auto; border:1px solid var(--border-color);
    padding:5px 10px; }
  .rail-toggle{ display:block; width:100%; background:var(--panneau-2);
    color:var(--secondary-color); border:1px solid var(--primary-color);
    border-radius:var(--border-radius); padding:12px; font-family:var(--font-family);
    font-size:.9em; cursor:pointer; }
  /* 08/08/2026 — l'habillage SURVIT au repli (décision du propriétaire) :
     tant que la vignette laisse au moins la moitié de l'écran au texte,
     le titre et la description restent à côté d'elle puis continuent
     dessous. On réduit donc la vignette au lieu de la centrer seule :
     220 px ici, 160 px sous 600 px — à 220 px, la moitié de l'écran
     n'est atteinte qu'à 440 px de large, où le palier 600 a déjà pris
     le relais.                                                         */
  .item-media{ width:220px; margin:0 18px 12px 0; }
  .item-media--toison{ min-height:150px; }
  .fs-grille{ grid-template-columns:1fr; }
  /* un flou d'arrière-plan sous une barre opaque à 97 % : invisible,
     mais recomposé par le GPU à chaque image de défilement            */
  .barre{ backdrop-filter:none; background:#000; }
  /* en vue compacte, la fiche garde sa vignette à gauche */
  body.dense .item-media{ float:left; width:110px; margin:0 12px 8px 0; }
  body.adispo.dense main .item-media img{ margin:0; }
}

/* ── ≤ 768 px — la géométrie bascule, en même temps que style.css ────── */
@media (max-width:768px){
  /* style.css passe ici l'en-tête ET le pied en position:static ; les
     deux variables tombent à zéro et tout suit : barre, ancres, réserve
     de bas de page, bouton de retour. Le pied statique est un arbitrage
     de Morgane du 31/07/2026 (il remplace « le pied reste fixe »).     */
  /* 132 px : hauteur MESURÉE de la barre sur deux rangs (127 px à 640,
     champ + rang compteur/liens/boutons + marges) plus 5 px de garde.
     La constante doit suivre la forme réelle — c'est elle qui cale le
     scroll-margin des ancres et le plafond du sommaire.               */
  :root{ --entete-h:0px; --pied-h:0px; --barre-h:132px; }
  /* la barre passe sur deux rangs : le champ prend toute la largeur.
     Sans flex-wrap, ses cinq enfants incompressibles (~578 px) faisaient
     déborder la page entière sous 595 px.                              */
  .barre-ligne{ flex-wrap:wrap; row-gap:8px; padding:8px 0; min-height:0; }
  #recherche{ flex:1 1 100%; min-width:0;
    font-size:16px; }  /* 16 px EN DUR : en dessous, iOS Safari zoome de force */
  .navette{ margin-right:0; }
  .compteur{ margin-right:auto; }
  /* cibles tactiles : rien n'atteignait 44 px, à un bouton près */
  .nav-lien{ padding:11px 12px; font-size:.86em; white-space:normal; }
  .rail-nav{ gap:2px; }
  .navette{ height:auto; padding:4px 4px 4px 10px; }
  .navette button{ width:40px; height:40px; font-size:.8em; }
  .pill{ padding:10px 14px; }
  .pill, .barre-bouton, .barre-raz, .btn-export, .btn-dense,
  .repere a, .proto-rappel a, .scenes-index a{ min-height:44px;
    display:inline-flex; align-items:center; }
  .lightbox{ padding:12px; }
  /* les filets rouges de style.css restent aux bords : on les affine et
     on redonne un peu d'air au texte                                   */
  body.adispo::before{ max-width:100% !important; border-left-width:1px; border-right-width:1px; }
  body.adispo{ padding-left:10px; padding-right:10px; }
}

/* ── ≤ 600 px — l'éditorial : drapeau, tableau, densités ─────────────── */
@media (max-width:600px){
  .compteur{ display:none; }
  .barre-lab{ min-width:100%; margin-bottom:-2px; }
  .barre-panneau{ max-height:56vh; max-height:56dvh; overflow-y:auto; }
  .variantes li{ width:calc(50% - 6px); }
  /* 08/08/2026 : le passage en drapeau sous 600 px est retiré à la
     demande du propriétaire — le justifié s'applique à toutes les
     largeurs, la césure automatique de la règle de base contient les
     lézardes. (L'ancienne exception datait du chantier de juillet.)    */
  /* le tableau des mains doit DÉFILER, pas se comprimer : à 360 px ses
     quatre colonnes devenaient des lignes de un mot                    */
  table.mains{ min-width:620px; font-size:.86em; }
  table.mains th, table.mains td{ padding:8px 10px; }
  .lettre{ padding:24px 18px; }
  .protocole{ padding:8px 18px 20px; }
  /* la vignette de fiche descend à 160 px : sur 380 px d'écran elle
     laisse encore ~55 % de la largeur au texte, l'habillage tient      */
  .item-media{ width:160px; margin:0 14px 10px 0; }
  /* le 2/1 des têtes de bloc devient une bande trop mince en colonne
     étroite : on le resserre à 3/2, comme les bannières de chapitre —
     toujours un rognage haut/bas de la source carrée, jamais un vide  */
  .bloc-visuel{ aspect-ratio:3 / 2; }
  .item-media--toison{ min-height:120px; padding:10px; }
  /* le 16/9 devient une bande trop plate sur une colonne étroite : on
     resserre à 3/2, qui redonne de la présence à l'image. Plus étroit
     que la source, donc rognage à gauche et à droite — environ 16 % de
     largeur, jamais un pixel du haut ni du bas de la scène. Le bandeau
     suit : un 21/9 sur 360 px ferait 154 px de haut, un timbre. Le
     paysage est déjà en 3/2, portrait et vignette restent eux-mêmes —
     leurs max-width les mettent déjà à l'échelle de la colonne.        */
  .chap-visuel--banniere,
  .chap-visuel--coupure,
  .chap-visuel--bandeau{ aspect-ratio:3 / 2; }
}

/* ── ≤ 420 px — la fiche en PILE (demande du 08/08/2026, seuil relevé
   de 380 à 420 le jour même) : titre et badges d'abord, la vignette
   pleine largeur, puis le texte. La fiche devient une colonne
   flexible ; item-corps s'efface (display:contents) pour que ses
   enfants remontent au niveau de la vignette, et deux ordres négatifs
   suffisent — titre puis badges passent devant la vignette, tout le
   reste garde l'ordre du document. Les float/clear de l'habillage sont
   ignorés d'office par les boîtes flexibles.                           */
@media (max-width:420px){
  .item{ display:flex; flex-direction:column; }
  .item-corps{ display:contents; }
  .item-corps > .item-titre{ order:-2; margin-bottom:7px; }
  .item-corps > .badges{ order:-1; }
  .item-media{ width:auto; margin:0 0 12px; }
  /* la vue compacte n'empile pas : elle garde sa vignette à gauche */
  body.dense .item{ display:flow-root; }
  body.dense .item-corps{ display:block; }
}

/* ── ≤ 380 px — le plus étroit ───────────────────────────────────────── */
@media (max-width:380px){
  .adispo h1{ font-size:1.45em; }
  .pill{ font-size:.78em; padding:9px 11px; }
  body.adispo > footer nav ul li{ font-size:.56em; }
  /* deux filets rouges n'ont plus rien à dire sur une colonne de cette
     largeur, et ils mangeaient les 6 derniers pixels de marge          */
  body.adispo::before{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   23. IMPRESSION — un seul bloc, fusion des deux d'origine
   ----------------------------------------------------------------------
   Sans le masquage des images, imprimer la page déclenchait le
   chargement des 202 photos (3,46 Mo) et rendait ~130 pages A4.
   Avec lui : ~35 pages de texte. Et le mode « fiche de séance seule »
   ne fonctionnait pas : ses règles vivaient HORS du @media print et il
   manquait la moitié du dispositif (le visibility:hidden de tout le
   reste). L'ordre des trois règles impr-seance compte.
   ══════════════════════════════════════════════════════════════════════ */
@media print{
  @page{ margin:14mm; }
  body.adispo > header,
  .barre, .rail, .haut, .lightbox, body.adispo > footer, body.adispo::before,
  .proto-rappel, .scenes-index, .retour, .btn-imprimer,
  /* .chapitre img masquait déjà l'image, mais le <figure> serait resté :
     un rectangle bordé et vide, à la hauteur de son aspect-ratio, sur
     22 emplacements. C'est le conteneur qu'il faut retirer.            */
  .item-media, .variantes, .chapitre img, .chap-visuel, .bloc-visuel, .repere{ display:none !important; }
  body.adispo{ max-width:none !important; background:#fff !important; }
  .adispo main{ padding-top:0; }
  .item{ break-inside:avoid; grid-template-columns:1fr; }
  /* on inverse tout d'un geste au lieu d'énumérer : la moitié des textes
     (crème, gris clair, orange) restait illisible sur papier            */
  .adispo main, .adispo main *{ color:#111 !important; background:#fff !important;
    border-color:#bbb !important; }
  .item-titre, .section-titre, .adispo h1, .chapitre h2, .protocole h3,
  .lettre h3, .bloc h3, .glossaire dt, .fs-col h4{ color:#900 !important; }
  table.mains, table.mains tr, .bloc, .proto-item{ break-inside:avoid; }
  /* la fiche de séance seule. height:0 sur main : visibility:hidden ne
     rend pas la hauteur, et la fiche sortait suivie de ~30 pages
     blanches. La fiche en position:absolute a pour bloc englobant la
     page, pas main — elle échappe donc à l'overflow et s'imprime.      */
  body.impr-seance *{ visibility:hidden; }
  body.impr-seance main{ height:0; overflow:hidden; padding:0 !important; }
  body.impr-seance .fiche-seance, body.impr-seance .fiche-seance *{ visibility:visible; }
  body.impr-seance .fiche-seance{ position:absolute; left:0; top:0; width:100%; border:none; }
  body.impr-seance .fiche-seance .fs-tete .btn-imprimer{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   24. CONTRASTE FORCÉ (Windows) — la distinction par la forme
   ----------------------------------------------------------------------
   En contraste élevé, le système écrase les couleurs : les quatre métiers
   (rouge, crème, orange, bleu) s'effondraient sur une seule teinte et les
   encarts de sécurité devenaient indistinguables du texte courant. On
   redonne la hiérarchie par la forme, que le mode préserve.
   ══════════════════════════════════════════════════════════════════════ */
@media (forced-colors: active){
  .tactile, .jeu, .flag, .chapitre .cle, .page-intro .option,
  .cadre-rappel, .lien-smi, .rail-note{ border:2px solid; }
  .tactile{ border-left-width:5px; }
  .jeu{ border-left-width:5px; border-left-style:dashed; }
  .flag, .cadre-rappel{ border-left-width:7px; }
  .flag .lab::before, .cadre-rappel b:first-of-type::before{ content:'⚠ '; }
  .pill.actif, .nav-lien.actif, .btn-dense[aria-pressed="true"]{ outline:3px solid; outline-offset:1px; }
  .badge{ border:1px solid; }
}