/* ══════════════════════════════════════════════════════════════════════════
   LA MATIÈRE DU TIROIR, ÉTENDUE AU SITE

   Le tiroir ☰ a une matière que le reste du site n'avait pas : un navy très
   profond (#080C12), presque noir, sur lequel l'emblème apparaît en filigrane
   à peine perceptible. C'est ce qui lui donne son aspect posé et coûteux.

   Le reste du site, lui, flottait sur un gris-bleu clair (#171E29 pour le
   fond, #273346 pour la barre du haut) — une couleur d'interface, pas une
   couleur de marque. On l'aligne ici sur le tiroir.

   Deux principes tenus :
   · La transparence est réelle, pas simulée. La barre du haut laisse passer
     ce qui défile dessous, floutée. C'est ce qui distingue une interface
     soignée d'un aplat opaque posé par-dessus.
   · Le filigrane reste RARE. Deux par page au maximum, jamais derrière un
     texte long, jamais à plus de 4 % d'opacité. Un motif répété partout
     n'est pas une signature, c'est un papier peint.

   Chargée en dernier : à spécificité égale, c'est elle qui l'emporte.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. LE FOND ──────────────────────────────────────────────────────────
   #0A0E15 : la teinte du tiroir, éclaircie de deux points pour que les
   cartes (#1B2231) s'en détachent encore. Un fond strictement identique
   aurait fait disparaître leurs bords. */
body.dark { background: #0A0E15; }
body.dark .site { background: transparent; }

/* ── 2bis. LA BARRE DU HAUT N'ÉTAIT PAS COLLANTE ─────────────────────────
   `site.css` la déclare `position:sticky` via `.topnav.collante`, soit deux
   classes. Mais la maquette contient `body.dark .site > *` — un élément et
   deux classes — qui impose `position:relative` à tout enfant direct de
   `.site`. Plus spécifique, donc gagnant : en thème sombre, c'est-à-dire par
   défaut, la barre défilait avec la page depuis le début.

   On la reprend ici avec la spécificité qu'il faut. Le défaut ne se voyait
   pas au chargement — il fallait défiler pour s'en apercevoir. */
.site > .topnav.collante,
body.dark .site > .topnav.collante {
  position: sticky;
  top: 0;
  z-index: 80;
}

/* ── 2. LA BARRE DU HAUT ─────────────────────────────────────────────────
   Vraiment translucide : le contenu défile visiblement dessous. Le flou et
   la saturation légère évitent que le texte de la page ne rende la barre
   illisible quand une image passe derrière. */
body.dark .topnav,
body.dark .topnav.collante {
  background: rgba(9, 13, 20, .78);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
/* TFA TV a sa propre barre, déjà translucide : on l'aligne sur la même teinte */
body.dark .tv .topnav,
.tv .topnav {
  background: rgba(9, 13, 20, .78);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* Un seul filigrane dans la barre, à gauche, derrière le logo. Il ne se voit
   pas ; il se sent. */
body.dark .topnav::before {
  content: "";
  position: absolute;
  left: -34px; top: -46px;
  width: 168px; height: 168px;
  background: var(--bul) center/contain no-repeat;
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}
.topnav > * { position: relative; z-index: 1; }

/* ── 3. LES DEUX FILIGRANES DE PAGE ──────────────────────────────────────
   Un en haut à gauche, un en bas à droite. C'est tout. Ils sont posés sur le
   conteneur de page, donc ils ne suivent pas le défilement des sections et
   ne viennent jamais se coller à un paragraphe. */
body.dark div.site::before,
body.dark div.site::after {
  content: "";
  position: absolute;
  background: var(--bul) center/contain no-repeat;
  pointer-events: none;
  z-index: 0;
  opacity: .035;
}
/* Celui de gauche déborde : un débordement À GAUCHE n'allonge pas la page,
   il est simplement masqué. Celui de droite, lui, reste collé au bord (right:0)
   — le faire dépasser allongeait la page de 140 px et faisait glisser tout le
   site latéralement sur téléphone.

   Première tentative : `overflow-x: clip` sur `.site` pour rogner le
   débordement. Erreur — cela a supprimé l'adhérence de la barre du haut, qui
   ne suivait plus le défilement. Un élément ne peut pas rogner ses enfants et
   laisser l'un d'eux se coller au bord de l'écran. */
body.dark div.site::before { left: -120px; top: 180px; width: 440px; height: 440px; }
body.dark div.site::after  { right: 0; bottom: 340px; width: 480px; height: 480px; opacity: .028; }

/* sur un écran étroit ils n'apportent plus rien : deux taches de plus dans un
   espace déjà contraint */
@media (max-width: 700px) {
  body.dark div.site::before,
  body.dark div.site::after { display: none; }
}

/* ── 4. LES SURFACES SOMBRES DE LA MAQUETTE ──────────────────────────────
   Plusieurs bandeaux étaient posés sur le gris-bleu d'interface. On les
   ramène sur la teinte du tiroir, en gardant leurs dégradés de marque. */
body.dark .tv { background: #0A0E15; }
/* `.tv` portait `overflow:hidden`, qui fait d'elle un conteneur de défilement
   et annule l'adhérence de sa barre. `clip` rogne pareil sans cet effet de
   bord ; `overflow-y:visible` laisse la barre se coller au bord de l'écran. */
.site.tv, body.dark .site.tv { overflow: visible; overflow-x: clip; overflow-y: visible; }
body.dark .tvhero .bgv { background: linear-gradient(125deg, #0C2544, #080C12 58%, #2A0A1A); }
body.dark .hero2 { background: #080C12; }

/* les cartes gagnent un filet clair : sur un fond plus profond, un bord
   franc vaut mieux qu'une ombre qui ne se voit plus */
body.dark .card,
body.dark .kpicard { border-color: rgba(255, 255, 255, .07); }

/* ── 5. LE PIED DE PAGE ──────────────────────────────────────────────────
   Il portait déjà deux filigranes : on les aligne sur la même discrétion. */
body.dark footer.site { background: #080C12; }
body.dark footer.site::before,
body.dark footer.site::after { opacity: .04; }

/* ── 6. LA VIGNETTE TRULY & FLUENT ───────────────────────────────────────
   Elle flottait comme un autocollant découpé aux genoux, par-dessus les
   cartes. Trois corrections : elle passe DERRIÈRE le contenu (z-index 0,
   sous les sections qui sont en 1), son bas se fond dans la page par un
   dégradé de masque — c'est ce qui la faisait paraître « coupée » — et son
   opacité descend pour qu'elle appartienne au fond, pas au premier plan. */
.site > .mascotte-coin,
body.dark .site > .mascotte-coin {
  top: 54px;
  right: 26px;
  width: 148px;
  z-index: 0;
  opacity: .30;
  filter: none;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, rgba(0,0,0,.35) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 52%, rgba(0,0,0,.35) 78%, transparent 100%);
}
.site:hover > .mascotte-coin,
body.dark .site:hover > .mascotte-coin { opacity: .30; }

@media (max-width: 820px) {
  .site > .mascotte-coin { width: 96px; top: 50px; right: 12px; opacity: .22; }
}
@media (max-width: 480px) {
  .site > .mascotte-coin { width: 72px; top: 48px; right: 8px; opacity: .18; }
}


/* ══════════════════════════════════════════════════════════════════════════
   7. LES COUVERTURES DES MANUELS

   Les cinq couvertures remplacent les cartes de remplacement. Le cadre était
   déjà au format A4 (`aspect-ratio:1/1.414`) et les fichiers le sont aussi :
   l'image remplit donc exactement, sans recadrage ni déformation.

   Le titre écrit disparaît quand une couverture est là — il y figure déjà,
   composé. Le laisser derrière l'image n'aurait servi qu'à doubler le poids
   du texte pour les lecteurs d'écran.
   ══════════════════════════════════════════════════════════════════════════ */
.book .cv { overflow: hidden; }
.book .cvimg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* la pastille de niveau reste lisible par-dessus la couverture */
.book.avec-couv .cv .lvl {
  z-index: 2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
/* la couverture porte déjà le dégradé : celui de la maquette ferait double */
.book.avec-couv .cv,
body.dark .book.avec-couv .cv { background: #0A0E15; padding: 0; }

/* ── les manuels encore à écrire ──
   Assombris et désaturés plutôt que masqués : la collection se lit d'un coup
   d'œil, et l'on voit où l'on va. L'étiquette dit clairement ce qu'il en est,
   plutôt que de laisser deviner pourquoi la carte est plus terne. */
.book.a-venir .cvimg { filter: grayscale(.55) brightness(.5); }
.book.a-venir .cv::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,21,.20), rgba(10,14,21,.72));
}
.book .cv .bientot {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 2;
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: #fff;
  background: rgba(8, 12, 18, .55);
  border: 1px solid rgba(255, 255, 255, .34);
  backdrop-filter: blur(4px);
  border-radius: 5px; padding: 3px 9px;
  white-space: nowrap;
}

/* La maquette réservait `.book .cv span` au sous-titre « BOOK 1 », en petit et
   en gris. L'étiquette « Bientôt » est un span elle aussi : sans cette reprise
   elle héritait de ce style et devenait illisible sur la couverture. */
.book .cv span.bientot { color: #fff; font-size: 9.5px; margin-top: 0; display: block; }


/* Une couverture est une affiche : elle se lit très bien à demi-largeur. Le
   repli automatique des grilles la passait à une seule colonne sous 760 px,
   ce qui donnait des cartes de 500 px de haut — cinq écrans de défilement pour
   voir la collection. Deux colonnes partout, jusqu'aux plus petits écrans :
   à 320 px cela fait encore 145 px par couverture, largement lisible. */
@media (max-width: 760px) {
  .books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
}
@media (max-width: 380px) {
  .books { gap: 9px; }
  .book .ft { padding: 7px 9px; font-size: 11px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   8. TFA TV — L'EXTRAIT ET LE MOT-SYMBOLE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LE FOND DU BANDEAU TFA TV ────────────────────────────────────────────
   La vidéo occupe tout le bandeau, comme sur les plateformes de diffusion.
   Elle démarre invisible et se fond une fois réellement jouable : on ne voit
   jamais de rectangle noir en attendant le décodage — l'affiche d'attente
   (le poster) tient la place, puis le mouvement prend le relais. */
.tvhero .tvfond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 28 % et non 50 % : mesuré sur l'affiche, le haut des têtes se trouve à
     14,8 % de la hauteur de la vidéo. Un cadrage centré ouvrait la fenêtre à
     14,9 % — soit exactement sur les crânes, qui se retrouvaient coupés. À
     28 %, la fenêtre commence à 10 % et laisse de l'air au-dessus. Ce sont
     les jambes qu'on perd, et c'est le bon choix pour un bandeau large. */
  object-position: 50% 28%;
  display: block;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;

  /* Empilement déclaré explicitement. Le bandeau contient déjà `.bgv`, le
     dégradé de la maquette, lui aussi en position absolue. Deux éléments
     positionnés sans z-index se départagent par l'ordre du DOM : `.bgv`
     venant après, il recouvrait entièrement la vidéo — qui jouait, sans que
     rien ne se voie. On le laisse derrière comme fond de secours si la vidéo
     ne se charge pas, et on ordonne le reste. */
  z-index: 1;
}
.tvhero .tvfond.pret { opacity: 1; }

/* Le petit cadre de la maquette n'a plus lieu d'être : la vidéo y est passée.
   Il porte ses positions en style en ligne, d'où le !important. */
.tvhero .masc { display: none !important; }

/* Le voile. Sans lui, le texte blanc passerait sur un ciel clair ou sur une
   dalle réfléchissante et deviendrait illisible par endroits. Deux dégradés :
   un latéral qui protège la colonne de texte, un vertical qui raccroche le
   bandeau à la page en dessous. */
.tvhero .scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Opacités calculées, pas choisies à l'œil. La luminance de la vidéo sous
     la colonne de texte a été relevée sur les 121 images : elle monte à 0,36.
     Il faut au moins 55 % de voile pour tenir le rapport de 4,5:1 exigé sur
     du texte blanc ; on prend 74 % au bord droit de la colonne, ce qui laisse
     de la marge et garde la moitié droite de l'image bien lisible. */
  background:
    linear-gradient(90deg, rgba(8,12,19,.92) 0%, rgba(8,12,19,.86) 28%,
                           rgba(8,12,19,.74) 44%, rgba(8,12,19,.26) 68%,
                           rgba(8,12,19,.06) 100%),
    linear-gradient(0deg, rgba(10,14,21,.90) 0%, rgba(10,14,21,.24) 30%,
                          rgba(10,14,21,0) 58%, rgba(10,14,21,.40) 100%);
}
/* le texte et les boutons passent devant le voile */
.tvhero .in2 { position: relative; z-index: 3; }
.tvhero .mute { z-index: 3; }

/* Un bandeau de 340 px pour 1920 de large ne montrerait qu'une bande étroite
   de l'image. On lui donne de la hauteur : la scène respire, et le rognage
   redevient raisonnable. */
.tvhero { height: auto; min-height: clamp(420px, 58vh, 620px); }

@media (max-width: 820px) {
  /* Sur téléphone le bandeau est presque carré : c'est la LARGEUR qui est
     rognée, pas la hauteur. Le cadrage vertical n'a donc plus d'effet, et
     le centrage horizontal suffit — les deux personnages sont mesurés à
     47 % et 49 % de la largeur, ils restent entiers. */
  .tvhero .tvfond { object-position: 50% 50%; }
  .tvhero { min-height: 0; }
  /* Sur téléphone le texte couvre toute la largeur, et le panneau lumineux de
     la scène passe derrière lui : la luminance mesurée y atteint 0,99, le pire
     cas possible. Il faut 82 % de voile pour tenir 4,5:1 ; on prend 87 %. La
     vidéo reste parfaitement lisible — mouvement, silhouettes, lumières — mais
     elle passe résolument au second plan, ce qui est sa place sur un écran de
     cette taille. */
  .tvhero .scrim {
    background:
      linear-gradient(0deg, rgba(10,14,21,.94) 0%, rgba(10,14,21,.87) 30%,
                            rgba(10,14,21,.85) 62%, rgba(10,14,21,.90) 100%);
  }
}

/* la commande d'arrêt devient un vrai bouton, donc elle se comporte comme tel */
.tvhero .mute {
  cursor: pointer;
  user-select: none;
  transition: background .18s, border-color .18s, transform .18s;
}
.tvhero .mute:hover { transform: scale(1.06); border-color: rgba(255,255,255,.5); }
.tvhero .mute:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }

/* ── le mot-symbole ──
   Le traitement des plateformes de diffusion : capitales très étirées, graisse
   maximale, crimson de la marque, et une lueur qui fait « écran allumé ».
   Aucune police n'est téléchargée : la pile s'appuie sur des polices déjà
   présentes sur les systèmes, condensées et hautes, avec un repli sur la
   police du site. Une police web de plus, c'est un chargement de plus et un
   texte qui saute au premier affichage. */
.tv .tvmarque {
  display: block;
  margin: 0 0 14px;
  /* La police du site, et elle seule. Une pile « Impact / Haettenschweiler /
     Arial Narrow » donnerait trois rendus différents selon le système —
     Impact sur Windows, autre chose sur Mac, un repli sur Linux et Android.
     Un mot-symbole de marque qui change de forme d'un visiteur à l'autre
     n'est plus un mot-symbole. Le caractère « plateforme » vient donc de la
     mise en forme — capitales, graisse maximale, large approche, crimson et
     lueur d'écran — et non d'un fichier de police qu'on n'a pas. */
  font-size: clamp(19px, 2.5vw, 30px);
  font-weight: 900;
  letter-spacing: .30em;
  text-transform: uppercase;
  line-height: 1;
  color: #E8203F;
  text-shadow: 0 0 22px rgba(232, 32, 63, .55), 0 2px 3px rgba(0, 0, 0, .55);
  white-space: nowrap;
}
/* « TV » se détache en blanc : c'est ce qui fait lire l'ensemble comme la
   déclinaison télévisée d'une marque, et non comme un titre de plus. */
.tv .tvmarque i {
  font-style: normal;
  color: #fff;
  text-shadow: 0 0 18px rgba(255, 255, 255, .38), 0 2px 3px rgba(0, 0, 0, .5);
  margin-left: .12em;
}

@media (max-width: 560px) {
  .tv .tvmarque { letter-spacing: .20em; font-size: 17px; white-space: normal; }
}