/* ===========================================================
   STYLE — Site Maestà Pastore (Design 2 « Le dossier déclassifié »)
   Les noms de classes reprennent ceux de la maquette
   (docs/maquettes/Design-2_Dossier.dc.html) : préfixes d- et x-.
   Étape 1a : version fixe (aucune animation de hero).
   =========================================================== */

/* -----------------------------------------------------------
   1. CHARTE — copie exacte de docs/charte.css (blocs 1 et 2)
   ----------------------------------------------------------- */
:root {
  /* Fonds */
  --fond: #060e14;            /* fond général du site */
  --fond-nuit: #04080b;       /* le plus sombre : hero, terminal, intérieur des icônes */
  --fond-carte: #0b1720;      /* cartes, encadrés */
  --ligne: #15404a;           /* filets, séparateurs, footer */
  --contour: #3c5560;         /* contours discrets */

  /* Textes */
  --texte: #e6ecea;           /* texte principal, titres */
  --texte-doux: #a2b2b0;      /* paragraphes, texte secondaire */
  --texte-faible: #6f807e;    /* légendes, mentions */

  /* Accents */
  --cyan: #18d2d6;            /* encre invisible, curseur, liens, coins des boutons secondaires */
  --cyan-clair: #7ffcff;      /* lueur de l'encre révélée, survol des boutons secondaires */
  --ambre: #de9f4e;           /* bouton principal, ruban, tampon, étiquettes */
  --ambre-clair: #f5c27a;     /* survol du bouton principal */
  --ambre-fonce: #9c6527;     /* contour du trou de l'étiquette */
  --encre-btn: #1a1206;       /* texte sur fond ambre */

  /* Papier (fiches, notes, polaroïds) */
  --papier: #ece4d1;
  --encre: #1e1c19;           /* texte sur papier */
  --kraft: #c9a86e;           /* chemises des best-sellers, cases des univers, étiquette */
  --rouge-tampon: #b8362a;    /* tampons CONFIDENTIEL / DÉCLASSIFIÉ */

  /* Polices (auto-hébergées) */
  --police-titre: 'Special Elite', 'Courier New', monospace;
  --police-texte: 'Courier Prime', 'Courier New', monospace;
  --police-main: 'Caveat', cursive;          /* notes manuscrites */
  --police-runes: 'Noto Sans Runic', serif;  /* secret n° 3 */

  /* Mise en page */
  --largeur-max: 1240px;
  --marge-page: 48px;        /* 20px sur téléphone */
  --rayon: 0;                /* aucun arrondi : univers papier / dossier */
}

/* -----------------------------------------------------------
   2. COMPLÉMENTS MAQUETTE — couleurs de détail de la maquette
   (validées et reportées dans docs/charte.css le 8 novembre)
   ----------------------------------------------------------- */
:root {
  --fond-alt: #081218;          /* sections alternées (prochain livre, fiche) */
  --fond-menu: #020608;         /* voile du menu téléphone (à 94 %) */
  --censure: #0b0b0c;           /* barres noires de censure, cases du compte à rebours */
  --contour-case: #2a3a40;      /* bord des cases du compte à rebours */
  --lien-survol: #7fe9eb;       /* survol des liens texte */
  --kraft-fonce: #a8854f;       /* dos des chemises, onglets */
  --encre-kraft: #2a2118;       /* texte sur kraft */
  --encre-main: #26324a;        /* écriture manuscrite bleue (« le sujet ») */
  --encre-sticky: #2a1a06;      /* texte du post-it ambre */
  --rouge-chemise: #9e2f24;     /* tampon CONFIDENTIEL des chemises */
  --fil-rouge: #c43a2c;         /* fils rouges et cible du mur */
  --punaise-clair: #ff7a68;     /* reflet des punaises */
  --punaise-sombre: #5e140c;    /* ombre des punaises */
  --texte-sceau: #f6e3dc;       /* texte du sceau rouge du sachet */
  --papier-photo: #f2efe6;      /* cadre des polaroïds du mur */
  --papier-pola: #f6f3ea;       /* cadre du polaroïd de la fiche */
  --papier-enveloppe: #d9c7a0;  /* enveloppe n° 7 */
  --carte-fond: #c9d4b8;        /* carte du mur */
  --carte-bord: #8a9a78;
  --carte-trait: #7a8a68;
  --tache-cafe: #6e4623;        /* rond de café (à 35 %) */
  --fond-ufo: #081420;          /* fond de la photo d'OVNI */
  --ufo-coeur: #e9ffff;         /* cœur lumineux de l'OVNI */
  --lumiere-chaude: #ffce8c;    /* halo chaud de la lampe */
  --couv-haut: #1a2a30;         /* dégradé des couvertures provisoires */
  --couv-bas: #0a1418;
  --sachet-voile: #dcf0f5;      /* plastique du sachet (à 5 %) */
  --sachet-bord: #c8e6eb;       /* bord du sachet (à 28 %) */
  --reflet: #ffffff;            /* reflet plastique (à 14 %) */
  --poussiere: #ffe2b8;         /* poussières dans la lumière */
  --trombone: #9aa3a8;          /* trombone de la fiche du sujet (sur papier clair) */
  --trombone-fonce: #4f585e;    /* trombone des cases de l'Univers Pastore (sur kraft) : gris acier foncé */
  --trombone-reflet: #b9c1c5;   /* fin reflet métal de ce trombone */
  --fond-terminal: #020a0d;     /* écran du terminal de l'intro */
}

/* -----------------------------------------------------------
   3. BASE
   ----------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 1.7;
}
img, svg { max-width: none; }
a { color: var(--cyan); text-decoration: none; }
:focus-visible { outline: 2px dashed var(--cyan); outline-offset: 3px; }
.d-sheet :focus-visible, .d-case:focus-visible, .d-menu-sheet :focus-visible { outline-color: var(--encre); }

/* Lien d'évitement : hors écran jusqu'au premier Tab */
.d-evitement { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; background: var(--ambre); color: var(--encre-btn); font-family: var(--police-texte); font-weight: 700; font-size: 14px; letter-spacing: .06em; }
.d-evitement:focus { top: 12px; color: var(--encre-btn); outline-color: var(--encre-btn); }
/* Texte réservé aux lecteurs d'écran */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Sans JavaScript : on masque ce qui ne fonctionnerait pas (menu burger, flèches du carrousel, secrets) */
html:not(.js) .d-burger, html:not(.js) .d-fleche, html:not(.js) .x-secret .x-sec { display: none; }

/* Zones de toucher d'au moins 44 px, agrandies par un pseudo-élément (la mise en page ne bouge pas) */
.d-logo, .d-lang a, .d-foot-liens a, .d-menu-soc a, .x-replay, .d-legal-retour { position: relative; }
.d-logo::after, .d-lang a::after, .d-foot-liens a::after, .d-menu-soc a::after, .x-replay::after, .d-legal-retour::after { content: ''; position: absolute; }
.d-logo::after { inset: -2px 0; }
.d-lang a::after { inset: -2px -5px -2px -13px; }             /* FR : s'agrandit surtout vers la gauche… */
.d-lang a:last-child::after { inset: -2px -13px -2px -5px; } /* …EN surtout vers la droite */
.d-menu-soc a::after { inset: -11px -4px; }
.d-foot-liens a::after { inset: -12px -4px; }
.x-replay::after { inset: -6px 0; }
.d-legal-retour::after { inset: -2px 0; }

.wrap { max-width: var(--largeur-max); margin: 0 auto; padding: 0 var(--marge-page); box-sizing: border-box; }
.split { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.split > .col { flex: 1 1 420px; min-width: 0; }

.d-kick { margin: 0 0 18px; display: flex; align-items: center; gap: 10px; font-family: var(--police-texte); font-weight: 700; font-size: 13px; letter-spacing: .2em; color: var(--ambre); }
.d-kick-centre { justify-content: center; }
.d-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: dPulse 1.6s ease-in-out infinite; }
.d-h2 { margin: 0; font-family: var(--police-titre); font-weight: 400; font-size: 52px; line-height: 1.08; color: var(--texte); }
.d-text { margin: 20px 0 0; max-width: 540px; font-family: var(--police-texte); font-size: 17px; line-height: 1.7; color: var(--texte-doux); }
.d-caret { display: inline-block; width: .5em; height: .08em; min-height: 2px; margin-left: .08em; background: var(--cyan); vertical-align: baseline; animation: dBlink 1s steps(1) infinite; }
@keyframes dBlink { 50% { opacity: 0; } }
@keyframes dPulse { 50% { opacity: .35; } }

/* -----------------------------------------------------------
   4. BOUTONS « étiquette » et « viseur »
   ----------------------------------------------------------- */
.d-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.d-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 26px; box-sizing: border-box; font-family: var(--police-texte); font-weight: 700; font-size: 15px; letter-spacing: .06em; transition: background-color .25s, color .25s, background-size .3s; }
.d-btn-p { background-color: var(--ambre); color: var(--encre-btn); padding-left: 40px; padding-right: 34px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.d-btn-p::before { content: ''; position: absolute; left: 16px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--fond); box-shadow: inset 0 0 0 2px var(--ambre-fonce); }
.d-btn-p i { font-style: normal; transition: transform .25s; }
.d-btn-o {
  color: var(--texte);
  background:
    linear-gradient(var(--cyan), var(--cyan)) left top / 14px 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) left top / 2px 14px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) right top / 14px 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) right top / 2px 14px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) left bottom / 14px 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) left bottom / 2px 14px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) right bottom / 14px 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) right bottom / 2px 14px no-repeat;
}
.d-btn-icone { gap: 10px; }
/* Bouton « Voir sur Amazon » des dossiers : étiquette ambre, à la taille des dossiers (46 px, texte 12 px) */
.d-fbtn { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 10px 0 26px; box-sizing: border-box; text-align: center; white-space: nowrap; background-color: var(--ambre); color: var(--encre-btn); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); transition: background-color .25s, color .25s; font-family: var(--police-texte); font-weight: 700; font-size: 12px; letter-spacing: .03em; }
.d-fbtn::before { content: ''; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--fond); box-shadow: inset 0 0 0 2px var(--ambre-fonce); }
/* La flèche n'apparaît que si la colonne est assez large pour la garder sur une ligne */
.d-fbtn i { display: none; font-style: normal; transition: transform .25s; }
@media (min-width: 1040px) { .d-fbtn i { display: inline; } }
.d-fbtn:focus-visible { background-color: var(--ambre-clair); color: var(--encre-btn); }
.d-fbtn:focus-visible i { transform: translateX(6px); }

/* États actifs (survol souris + focus clavier) */
.d-btn-p:focus-visible { background-color: var(--ambre-clair); color: var(--encre-btn); }
.d-btn-p:focus-visible i { transform: translateX(6px); }
.d-btn-o:focus-visible { color: var(--cyan-clair); background-color: color-mix(in srgb, var(--cyan) 6%, transparent); background-size: 51% 2px, 2px 51%, 51% 2px, 2px 51%, 51% 2px, 2px 51%, 51% 2px, 2px 51%; }
/* Tactile : léger retour visuel pendant l'appui */
@media (hover: none) {
  .d-btn-p:active { background-color: var(--ambre-clair); color: var(--encre-btn); }
  .d-fbtn:active { background-color: var(--ambre-clair); color: var(--encre-btn); }
  .d-btn-o:active { color: var(--cyan-clair); background-color: color-mix(in srgb, var(--cyan) 6%, transparent); }
}
@media (hover: hover) {
  a:hover { color: var(--lien-survol); }
  .d-btn-p:hover { background-color: var(--ambre-clair); color: var(--encre-btn); }
  .d-btn-p:hover i { transform: translateX(6px); }
  .d-fbtn:hover { background-color: var(--ambre-clair); color: var(--encre-btn); }
  .d-fbtn:hover i { transform: translateX(6px); }
  .d-btn-o:hover { color: var(--cyan-clair); background-color: color-mix(in srgb, var(--cyan) 6%, transparent); background-size: 51% 2px, 2px 51%, 51% 2px, 2px 51%, 51% 2px, 2px 51%, 51% 2px, 2px 51%; }
}

/* -----------------------------------------------------------
   5. NAVBAR + RUBAN + MENU TÉLÉPHONE
   ----------------------------------------------------------- */
.d-head { position: relative; z-index: 2; background: var(--fond); }
.d-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 84px; }
.d-logo { display: flex; align-items: center; gap: 14px; color: var(--texte); }
.d-stamp { flex: none; width: 54px; height: 54px; color: var(--ambre); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.d-logo:focus-visible .d-stamp { transform: rotate(-14deg) scale(1.08); }
.d-logo-txt { display: inline-block; min-width: 250px; font-family: var(--police-titre); font-size: 24px; letter-spacing: .12em; white-space: nowrap; }

.d-nav { display: flex; gap: 38px; }
.d-nav a { position: relative; color: var(--texte-doux); padding: 12px 2px; font-family: var(--police-titre); font-size: 15px; letter-spacing: .06em; transition: color .2s; }
.d-nav a::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 1.3em; margin-top: -.65em; background: var(--censure); transform: scaleX(0); transform-origin: left; }
.d-nav a:focus-visible { color: var(--cyan); }
.d-nav a:focus-visible::after { animation: dRedact .55s ease forwards; }
@media (hover: hover) {
  .d-logo:hover { color: var(--texte); }
  .d-logo:hover .d-stamp { transform: rotate(-14deg) scale(1.08); }
  .d-nav a:hover { color: var(--cyan); }
  .d-nav a:hover::after { animation: dRedact .55s ease forwards; }
}
@keyframes dRedact {
  0% { transform: scaleX(0); transform-origin: left; }
  45% { transform: scaleX(1); transform-origin: left; }
  55% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

.d-outils { display: flex; align-items: center; gap: 8px; }
.d-lang { display: flex; gap: 8px; font-family: var(--police-texte); font-weight: 700; font-size: 12px; }
.d-lang a { color: var(--texte-doux); padding: 10px 8px; border: 1.5px solid transparent; }
.d-lang a[aria-current] { color: var(--ambre); border-color: var(--ambre); transform: rotate(-3deg); }

/* Icônes Instagram / TikTok de la barre : 18 px, zone cliquable 44 × 44 px, ambre au survol.
   Visibles seulement à partir de 1101 px : en dessous, la barre n'a pas la place (menu sur deux lignes) ;
   les réseaux restent dans le pied de page, et dans le menu burger (≤ 960 px). */
.d-bar-soc { display: flex; }
.d-bar-soc a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--texte-doux); transition: color .25s ease; }
.d-bar-soc svg { display: block; }
.d-bar-soc a:focus-visible { color: var(--ambre); outline-offset: -2px; }
@media (hover: hover) { .d-bar-soc a:hover { color: var(--ambre); } }
@media (max-width: 1100px) { .d-bar-soc { display: none; } }

.d-tape { overflow: hidden; white-space: nowrap; background: var(--ambre); color: var(--encre-btn); font-family: var(--police-texte); font-weight: 700; font-size: 12px; letter-spacing: .3em; line-height: 26px; height: 26px; }
.d-tape-in { display: inline-block; animation: dTape 40s linear infinite; }
@keyframes dTape { to { transform: translateX(-50%); } }

.d-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; background: transparent; border: 1.5px solid var(--contour); cursor: pointer; }
.d-burger span { display: block; height: 2px; background: var(--ambre); }

/* Écart volontaire avec la maquette : position fixed (au lieu d'absolute)
   pour que la feuille ne soit pas rognée par le header sur téléphone. */
.d-menu { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: color-mix(in srgb, var(--fond-menu) 94%, transparent); display: flex; align-items: flex-start; justify-content: center; padding: 90px 20px 40px; box-sizing: border-box; animation: dMenu .4s ease both; }
.d-menu[hidden] { display: none; }
@keyframes dMenu { from { opacity: 0; } to { opacity: 1; } }
.d-menu-sheet { position: relative; width: 100%; max-width: 360px; background: var(--papier); color: var(--encre); padding: 30px 26px 34px; box-sizing: border-box; transform: rotate(-1.5deg); font-family: var(--police-texte); animation: dSheetIn .5s cubic-bezier(.2, .8, .3, 1.2) both; }
@keyframes dSheetIn { from { transform: translateY(-30px) rotate(-6deg); opacity: 0; } }
.d-menu-kick { margin: 0; font-size: 11px; letter-spacing: .18em; }
.d-menu-titre { margin: 4px 0 22px; font-family: var(--police-titre); font-size: 26px; }
.d-menu-sheet nav { display: flex; flex-direction: column; border-top: 2px solid var(--encre); }
.d-menu-sheet nav a { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px dashed color-mix(in srgb, var(--encre) 40%, transparent); font-family: var(--police-titre); font-size: 24px; color: var(--encre); }
.d-menu-sheet nav a span { font-family: var(--police-texte); font-size: 12px; font-weight: 700; color: var(--rouge-tampon); }
.d-menu-soc { display: flex; gap: 22px; margin-top: 22px; font-weight: 700; font-size: 13px; letter-spacing: .12em; }
.d-menu-soc a { color: var(--encre); text-decoration: underline; }
/* Sélecteur FR | EN dans la feuille : même style que les réseaux, langue en cours sans soulignement */
.d-menu-lang { margin-left: auto; }
.d-menu-lang a[aria-current] { text-decoration: none; }
.d-menu-stamp { position: absolute; right: 14px; bottom: -14px; background: var(--papier); border: 3px double var(--rouge-tampon); color: var(--rouge-tampon); font-weight: 700; font-size: 13px; letter-spacing: .14em; padding: 3px 10px; transform: rotate(-8deg); }
.d-close { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; background: transparent; border: 1.5px solid var(--encre); color: var(--encre); font-size: 18px; cursor: pointer; }
body.menu-ouvert { overflow: hidden; }
body.menu-ouvert .d-head { z-index: 70; }  /* le menu passe au-dessus du compteur des secrets (z-index 3) */

/* -----------------------------------------------------------
   6. HERO — le mur, la lampe, les secrets, l'intro
   ----------------------------------------------------------- */
.x-hero {
  position: relative; height: 760px; overflow: hidden; background: var(--fond-nuit);
  /* Position de départ de la lampe (mise à jour par le JS à chaque image ;
     reste ici sans JS et en mouvement réduit) */
  --x: 63%; --y: 46%; --r: 200px; --px: .26; --py: -.08;
}
.x-wall { position: absolute; inset: 0; }
.x-arch { position: absolute; inset: 0; }
.x-arch, .x-secret, .x-found { transform: perspective(1400px) rotateY(calc(var(--px, 0) * 2deg)) rotateX(calc(var(--py, 0) * -1.5deg)); transform-origin: 70% 50%; }
.x-strings { position: absolute; inset: 0; width: 100%; height: 100%; }
.x-strings path { fill: none; stroke: var(--fil-rouge); stroke-width: 1.6; }

.x-it { position: absolute; box-sizing: border-box; transform: translate(calc(var(--px, 0) * var(--z, 1) * -12px), calc(var(--py, 0) * var(--z, 1) * -9px)) translateX(-50%) rotate(var(--r, 0deg)); box-shadow: calc(var(--px, 0) * -16px) calc(var(--py, 0) * -12px + 12px) 20px rgba(0, 0, 0, .6); transition: translate .4s ease, rotate .4s ease; }
.x-flat { box-shadow: none; }
.x-pinpt { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--punaise-clair), var(--rouge-tampon) 55%, var(--punaise-sombre)); transform: translate(calc(var(--px, 0) * var(--z, 1) * -12px), calc(var(--py, 0) * var(--z, 1) * -9px)); }

.x-pol { background: var(--papier-photo); padding: 10px 10px 34px; }
.x-pol img { display: block; width: 100%; height: 214px; object-fit: cover; object-position: 45% 35%; }
.x-hand { position: absolute; left: 12px; bottom: 6px; font-family: var(--police-main); font-weight: 700; font-size: 20px; white-space: nowrap; }
.x-hand-bleu { color: var(--encre-main); }
.x-sticky { background: var(--ambre); color: var(--encre-sticky); padding: 12px; font-family: var(--police-main); font-weight: 700; font-size: 24px; line-height: 1; }
.x-ufo { height: 176px; background: var(--fond-ufo); position: relative; overflow: hidden; background-image: radial-gradient(circle at 62% 34%, var(--ufo-coeur) 0, color-mix(in srgb, var(--cyan-clair) 70%, transparent) 6%, color-mix(in srgb, var(--cyan) 25%, transparent) 16%, color-mix(in srgb, var(--cyan) 0%, transparent) 34%); }
.x-paper { background: var(--papier); color: var(--encre); padding: 14px 16px; font-family: var(--police-texte); font-size: 12px; }
.x-lines { background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--encre) 55%, transparent) 0 2px, transparent 2px 8px); }
.x-red { display: inline-block; height: 10px; background: var(--censure); }
.x-map { background: var(--carte-fond); border: 1px solid var(--carte-bord); }
.x-map svg { display: block; }
.x-map-trait { fill: none; stroke: var(--carte-trait); stroke-width: 1.5; }
.x-target, .x-croix { fill: none; stroke: var(--fil-rouge); }

/* Détails des papiers (anciens styles en ligne de la maquette) */
.x-rp-titre { font-size: 12px; letter-spacing: .12em; }
.x-rp-barres { display: flex; gap: 6px; margin-top: 8px; }
.x-nw-kick { font-family: Georgia, serif; font-size: 11px; letter-spacing: .2em; border-bottom: 1px solid var(--encre); padding-bottom: 4px; }
.x-nw-titre { font-family: Georgia, serif; font-weight: 700; font-size: 20px; line-height: 1.05; margin-top: 6px; }
.x-cl { text-align: center; border: 3px double var(--rouge-tampon); color: var(--rouge-tampon); font-weight: 700; font-size: 18px; letter-spacing: .14em; }
.x-en { background: var(--papier-enveloppe); padding: 12px 16px; }
.x-en-kick { font-size: 11px; letter-spacing: .16em; }
.x-en-tampon { margin-top: 6px; display: inline-block; border: 2px solid var(--rouge-tampon); color: var(--rouge-tampon); font-weight: 700; font-size: 12px; padding: 2px 8px; transform: rotate(-4deg); }
.x-wall-titre { position: absolute; color: var(--ambre); font-size: 26px; }
.x-cafe { width: 120px; height: 120px; border-radius: 50%; border: 10px solid color-mix(in srgb, var(--tache-cafe) 35%, transparent); }

/* Calques de lumière */
.x-dark { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle var(--r) at var(--x) var(--y), color-mix(in srgb, var(--fond-nuit) 0%, transparent) 0%, color-mix(in srgb, var(--fond-nuit) 20%, transparent) 38%, color-mix(in srgb, var(--fond-nuit) 95.5%, transparent) 100%); }
.x-warm { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle calc(var(--r) * 1.1) at var(--x) var(--y), color-mix(in srgb, var(--lumiere-chaude) 17%, transparent), color-mix(in srgb, var(--lumiere-chaude) 0%, transparent) 70%); }
.x-veil { position: absolute; left: 0; top: 0; bottom: 0; width: 58%; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--fond-nuit) 90%, transparent) 0%, color-mix(in srgb, var(--fond-nuit) 72%, transparent) 55%, color-mix(in srgb, var(--fond-nuit) 0%, transparent) 100%); }

/* Texte du hero */
.x-text { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; pointer-events: none; }
.x-text .wrap { width: 100%; }
.x-copy { max-width: 540px; pointer-events: auto; }
.x-copy .d-text { font-size: 18px; }
.d-h1 { position: relative; margin: 0; font-family: var(--police-titre); font-weight: 400; font-size: 80px; line-height: 1.02; color: var(--texte); }
.d-ghost { display: inline; }
.d-mot-fin { white-space: nowrap; }   /* dernier mot + curseur : jamais séparés */
.d-typed { position: absolute; left: 0; top: 0; white-space: nowrap; }
.d-h1 .d-typed { white-space: normal; }
.d-logo-txt { position: relative; }
/* Pendant la frappe : le vrai texte garde sa place (aucun décalage) mais s'efface */
.anim .d-logo-txt:not(.fini) .d-ghost, .intro .d-h1:not(.fini) .d-ghost { visibility: hidden; }

/* Mots censurés puis décensurés après l'intro (état final sans JS / mouvement réduit) */
.rd { color: var(--cyan); }
.intro .x-hero .rd { color: transparent; background: linear-gradient(var(--censure), var(--censure)) no-repeat right / 100% 100%; }
.intro .x-hero.go .rd { animation: dUnredact .7s ease forwards; }
@keyframes dUnredact { to { background-size: 0% 100%; color: var(--cyan); } }
.d-note { margin: 30px 0 0; font-family: var(--police-main); font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--ambre); transform: rotate(-2deg); max-width: 360px; }
.x-replay { margin-top: 18px; background: transparent; border: 0; padding: 8px 0; font-family: var(--police-texte); font-size: 13px; letter-spacing: .08em; color: var(--texte-doux); cursor: pointer; }
.x-replay.x-cache { visibility: hidden; }  /* sans JS / mouvement réduit : place gardée, bouton invisible */
@media (hover: hover) { .x-replay:hover { color: var(--cyan); } }
.x-replay:focus-visible { color: var(--cyan); }

/* Compteur des secrets (masqué pendant l'intro, visible à partir de .go) */
.x-count { position: absolute; right: 28px; top: 24px; z-index: 3; transition: opacity .6s; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--ligne); background: color-mix(in srgb, var(--fond-nuit) 78%, transparent); font-family: var(--police-texte); font-size: 12px; letter-spacing: .14em; color: var(--texte-doux); }
.x-count b { color: var(--cyan-clair); font-weight: 700; }
.x-dots { display: flex; gap: 5px; }
.x-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--contour); }
.x-dots i.on { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.intro .x-count { opacity: 0; }
.intro .x-hero.go .x-count { opacity: 1; }

/* La lampe remplace le curseur (souris, hors mouvement réduit) */
@media (hover: hover) {
  .anim .x-hero { cursor: none; }
  .anim .x-hero a, .anim .x-hero button, .anim .x-copy, .anim .x-count { cursor: auto; }
  .anim .x-hero .x-sec { cursor: none; }
}

/* Papiers éclairés (.lit) */
.x-it.x-pol.lit { animation: xFlutter 1s ease-in-out; }
@keyframes xFlutter { 0%, 100% { rotate: 0deg; } 25% { rotate: 1.8deg; } 60% { rotate: -1.3deg; } }
.x-uf.lit .x-ufo { animation: xUfo 1.2s ease-in-out infinite; }
@keyframes xUfo { 50% { filter: brightness(1.7) saturate(1.3); } }
.x-sticky.lit { rotate: -4deg; translate: 0 -4px; }
.x-paper.lit { translate: 0 -3px; }
.x-map.lit .x-target { animation: xTarget .8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes xTarget { 50% { transform: scale(1.3); } }

/* Poussières dans la lumière */
.x-motes i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--poussiere); animation-name: xMote; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes xMote { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: .9; } 100% { transform: translate(30px, -90px); opacity: 0; } }

/* Encre invisible : masquée hors de la lampe */
.x-secret { position: absolute; inset: 0; pointer-events: none; color: var(--cyan-clair); text-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 85%, transparent); -webkit-mask-image: radial-gradient(circle calc(var(--r) * 0.75) at var(--x) var(--y), #000 30%, transparent 100%); mask-image: radial-gradient(circle calc(var(--r) * 0.75) at var(--x) var(--y), #000 30%, transparent 100%); }
.x-fleche { position: absolute; left: 80%; top: 22%; }
.x-found { position: absolute; inset: 0; pointer-events: none; color: var(--cyan-clair); text-shadow: 0 0 10px color-mix(in srgb, var(--cyan) 75%, transparent); }
.x-sec { position: absolute; transform: translateX(-50%); background: transparent; border: 0; padding: 6px; margin: 0; color: var(--cyan-clair); text-shadow: inherit; pointer-events: auto; font: inherit; cursor: pointer; }
.x-sec svg { display: block; }
.x-sec:focus-visible { filter: brightness(1.5); outline: 1px dashed var(--cyan-clair); outline-offset: 4px; }
@media (hover: hover) { .x-sec:hover { filter: brightness(1.5); } }
.x-sec-type { display: block; font-family: var(--police-titre); font-size: 24px; line-height: 1.2; white-space: pre-line; text-align: center; }
.x-sec-rune { font-family: var(--police-runes); font-size: 30px; letter-spacing: .4em; }
.x-sec-hand { font-family: var(--police-main); font-size: 32px; font-weight: 700; }
.x-sec-mono { font-family: var(--police-texte); font-size: 16px; letter-spacing: .1em; white-space: nowrap; }
.x-sec-done { opacity: .72; cursor: default; pointer-events: none; }
.x-sec-done[hidden] { display: none; }
.x-sec-tag { display: block; margin-top: 6px; font-family: var(--police-texte); font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--ambre); text-shadow: none; text-align: center; white-space: nowrap; }
/* Tactile : zone de toucher d'au moins 85 px « mur » (= 44 px réels quand le mur est réduit à 52 %) */
@media (hover: none) and (pointer: coarse) {
  .x-sec::before { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 85px); height: max(100%, 85px); transform: translate(-50%, -50%); }
}

/* Toast « SECRET N° n DÉCOUVERT » */
.x-toast { position: absolute; right: 28px; top: 78px; z-index: 3; padding: 8px 14px; border: 2px solid var(--ambre); background: color-mix(in srgb, var(--fond-nuit) 88%, transparent); color: var(--ambre); font-family: var(--police-texte); font-weight: 700; font-size: 13px; letter-spacing: .14em; animation: xToast 1.9s ease forwards; }
.x-toast[hidden] { display: none; }
@keyframes xToast { 0% { opacity: 0; transform: rotate(-3deg) scale(1.6); } 12% { opacity: 1; transform: rotate(-3deg) scale(1); } 80% { opacity: 1; transform: rotate(-3deg); } 100% { opacity: 0; transform: rotate(-3deg); } }

/* Carte « Dossier complet » */
.x-final { position: absolute; right: 6%; top: 50%; z-index: 4; width: 390px; max-width: 86%; box-sizing: border-box; background: var(--papier); color: var(--encre); padding: 30px 30px 26px; font-family: var(--police-texte); box-shadow: 0 30px 60px rgba(0, 0, 0, .6); transform: translateY(-50%) rotate(-2deg); animation: xFinal .55s cubic-bezier(.2, .8, .3, 1.2) both; cursor: auto; }
.x-final[hidden] { display: none; }
.x-final:focus { outline: none; }
.x-final :focus-visible { outline-color: var(--encre); }
@keyframes xFinal { from { opacity: 0; transform: translateY(-40%) rotate(-9deg) scale(.88); } }
.x-final-stamp { position: absolute; right: -14px; top: -16px; background: var(--papier); border: 3px double var(--rouge-tampon); color: var(--rouge-tampon); font-weight: 700; font-size: 14px; letter-spacing: .14em; padding: 4px 10px; transform: rotate(9deg); }
.x-final-kick { margin: 0; font-size: 12px; letter-spacing: .16em; }
.x-final-titre { margin: 10px 0 0; font-family: var(--police-titre); font-size: 26px; line-height: 1.15; }
.x-final-texte { margin: 10px 0 0; font-size: 15px; line-height: 1.6; }
.x-final-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.x-final-actions .d-btn { min-height: 44px; }
.x-close { background: transparent; border: 1.5px solid var(--encre); padding: 0 18px; min-height: 44px; font-family: var(--police-texte); font-weight: 700; font-size: 14px; color: var(--encre); cursor: pointer; }

/* Intro terminal (n'existe à l'écran que si html.intro) */
.x-term { position: absolute; inset: 0; z-index: 5; background: var(--fond-terminal); display: none; align-items: center; justify-content: center; transform-origin: 50% 50%; cursor: auto; }
.intro .x-term { display: flex; }
.intro .x-term.gone { display: none; }
.x-term::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .65) 100%); }
.x-term.off { animation: xOff .75s cubic-bezier(.6, 0, .4, 1) forwards; }
@keyframes xOff { 0% { transform: scale(1, 1); filter: brightness(1); } 45% { transform: scale(1, .006); filter: brightness(3); } 75% { transform: scale(.35, .006); filter: brightness(4); } 100% { transform: scale(0, 0); filter: brightness(0); opacity: 0; } }
.x-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px); animation: xRoll 7s linear infinite; }
@keyframes xRoll { to { background-position: 0 300px; } }
.x-screen { position: relative; width: min(760px, 86%); font-family: var(--police-texte); font-size: 17px; line-height: 1.9; color: var(--cyan-clair); text-shadow: 0 0 6px color-mix(in srgb, var(--cyan) 55%, transparent); }
.x-granted { margin-top: 18px; font-family: var(--police-titre); font-size: 52px; line-height: 1.1; color: var(--ambre); text-shadow: 0 0 18px color-mix(in srgb, var(--ambre) 60%, transparent); animation: dBlink .8s steps(1) 3; }
.x-ouverture { margin-top: 4px; color: var(--texte-doux); }
.x-skip { position: absolute; right: 26px; top: 22px; z-index: 2; background: transparent; border: 1px solid var(--contour-case); padding: 9px 14px; font-family: var(--police-texte); font-size: 12px; letter-spacing: .14em; color: var(--texte-doux); cursor: pointer; }
.x-skip:focus-visible { color: var(--cyan-clair); border-color: var(--cyan); }
@media (hover: hover) { .x-skip:hover { color: var(--cyan-clair); border-color: var(--cyan); } }

/* -----------------------------------------------------------
   7. SECTIONS
   ----------------------------------------------------------- */
.d-sec { position: relative; overflow: hidden; padding: 120px 0; }
/* Défilement doux (js/main.js, 1 ter) : marge d'arrivée des ancres. L'en-tête n'est pas fixe
   (il défile avec la page) : rien ne peut cacher le titre, la section arrive au ras du haut et son
   propre espace intérieur (120 px, 84 px sur téléphone) laisse de l'air au-dessus du titre.
   Si l'en-tête devenait fixe : mettre ici sa hauteur. */
:root { --marge-ancre: 0px; }
.d-sec, #contenu { scroll-margin-top: var(--marge-ancre); }
/* Section qui reçoit le focus après un lien interne : pas de cadre de focus autour d'une section entière */
main[tabindex="-1"]:focus, section[tabindex="-1"]:focus { outline: none; }
.d-alt { background: var(--fond-alt); border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }

/* --- Prochain livre --- */
.d-prochain { gap: 80px; }
.d-bag-col { flex: 0 1 400px; display: flex; justify-content: center; }
.d-bag { position: relative; width: 320px; height: 440px; border-radius: 14px; background: color-mix(in srgb, var(--sachet-voile) 5%, transparent); border: 1px solid color-mix(in srgb, var(--sachet-bord) 28%, transparent); padding: 48px 26px 26px; box-sizing: border-box; animation: dSway 7s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes dSway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.d-bag-seal { position: absolute; left: 0; right: 0; top: 12px; height: 22px; background: var(--rouge-tampon); color: var(--texte-sceau); font-family: var(--police-texte); font-weight: 700; font-size: 11px; letter-spacing: .2em; white-space: nowrap; overflow: hidden; line-height: 22px; padding-left: 12px; }
.d-bag-cover { height: 100%; border-radius: 3px 8px 8px 3px; background: linear-gradient(160deg, var(--couv-haut), var(--couv-bas)); border: 1px solid var(--ligne); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--texte-doux); font-family: var(--police-texte); font-size: 13px; text-align: center; transform: rotate(-3deg); padding: 20px; box-sizing: border-box; }
/* Couverture du prochain livre : entière, à ses proportions, posée dans le sachet */
.d-bag-cover-image { padding: 0; background: none; border: 0; }
.d-bag-cover-image img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; border: 1px solid var(--ligne); border-radius: 3px 8px 8px 3px; }
.x-final-livre { font-style: normal; }
/* Titre du livre dans le résumé : mis en valeur sans fausse italique (Courier Prime italique non chargée) */
.d-titre-livre { font-style: normal; color: var(--texte); }
.d-bag-rune { font-family: var(--police-runes); font-size: 64px; line-height: 1; color: var(--cyan); text-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 75%, transparent); }
.d-bag-sheen { position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(115deg, color-mix(in srgb, var(--reflet) 0%, transparent) 30%, color-mix(in srgb, var(--reflet) 14%, transparent) 45%, color-mix(in srgb, var(--reflet) 0%, transparent) 60%); background-size: 250% 100%; animation: dSheen 5s ease-in-out infinite; pointer-events: none; }
@keyframes dSheen { 0% { background-position: 120% 0; } 60%, 100% { background-position: -60% 0; } }
.d-tag { position: absolute; right: -34px; bottom: 44px; background: var(--kraft); color: var(--encre-kraft); font-family: var(--police-main); font-weight: 700; font-size: 21px; line-height: 1.1; padding: 12px 18px 12px 30px; transform: rotate(8deg); clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); }
.d-tag::before { content: ''; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--fond-alt); }
.d-card { margin-top: 26px; background: var(--papier); color: var(--encre); padding: 22px 26px; transform: rotate(-1deg); max-width: 520px; box-shadow: 0 14px 30px rgba(0, 0, 0, .4); }
.d-card p { margin: 0; font-family: var(--police-titre); font-size: 20px; line-height: 1.5; }
.d-kick-compte { margin: 34px 0 0; }
.d-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 440px; margin-top: 12px; }
.d-cell { background: var(--censure); border: 1px solid var(--contour-case); padding: 12px 6px 8px; text-align: center; }
.d-num { font-family: var(--police-titre); font-size: 34px; line-height: 1; color: var(--ambre); }
.d-lab { margin-top: 6px; font-family: var(--police-texte); font-size: 11px; letter-spacing: .14em; color: var(--texte-doux); }
.d-count[hidden], .d-date-tampon[hidden] { display: none; }
/* Tampon de date (remplace le compte à rebours tant que le jour exact n'est pas connu) */
.d-date-tampon { display: inline-block; margin: 16px 0 4px; padding: 8px 18px; border: 4px double var(--rouge-tampon); color: var(--rouge-tampon); font-family: var(--police-texte); font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transform: rotate(-4deg); transform-origin: 50% 50%; }
/* Le tampon « se pose » quand il entre à l'écran (classes posées par le JS ; sans JS ou en mouvement réduit : affiché directement) */
.anim .d-date-tampon.en-attente { opacity: 0; }
.d-date-tampon.pose { --tampon-rot: -4deg; --tampon-rot-depart: -10deg; --tampon-echelle: 1.6; --tampon-opacite: 1; animation: dSlam .45s cubic-bezier(.34, 1.56, .64, 1) both; will-change: transform, opacity; }
/* Petite secousse du libellé au moment de l'impact */
.d-kick-compte.secousse { animation: dSecousse .22s ease-in-out .27s both; }
@keyframes dSecousse { 25% { transform: translateX(-2px); } 50% { transform: translateX(2px); } 75% { transform: translateX(-1px); } }
.d-ctas-prochain { margin-top: 28px; }

/* --- Best-sellers --- */
.d-sec-tete { text-align: center; margin-bottom: 56px; }
.d-files { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.d-file { display: flex; flex-direction: column; gap: 12px; }
.d-folder { position: relative; aspect-ratio: 3 / 4; margin-top: 20px; }
.d-folder::before { content: ''; position: absolute; inset: 0; background: var(--kraft-fonce); border-radius: 2px 6px 6px 6px; box-shadow: 0 8px 16px rgba(0, 0, 0, .35); }   /* petite ombre portée sous le dossier */
.d-ftab { position: absolute; left: 10px; top: -20px; height: 22px; padding: 0 10px; background: var(--kraft-fonce); border-radius: 6px 6px 0 0; font-family: var(--police-main); font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--encre-kraft); line-height: 22px; }   /* numéro manuscrit */
.d-fcover { position: absolute; left: 11%; right: 11%; top: 7%; bottom: 16%; background: linear-gradient(160deg, var(--couv-haut), var(--couv-bas)); border: 1px solid var(--ligne); border-radius: 2px 6px 6px 2px; display: flex; align-items: center; justify-content: center; transition: transform .55s cubic-bezier(.2, .7, .2, 1); box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }   /* ombre sous la couverture */
.d-fcover { overflow: hidden; }
/* Couverture réelle : on montre le haut (titre), le bas reste caché dans la chemise */
.d-fimg { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.d-frune { font-family: var(--police-runes); font-size: 34px; color: var(--cyan); opacity: .55; transition: opacity .4s, text-shadow .4s; }
.d-ffront { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: var(--kraft); background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--encre-kraft) 7%, transparent) 0 1px, transparent 1px 7px); border-radius: 0 0 6px 6px; display: flex; align-items: center; justify-content: center; transition: transform .55s cubic-bezier(.2, .7, .2, 1); box-shadow: 0 -4px 8px -3px rgba(0, 0, 0, .45); }   /* ombre douce en haut du rabat, sur la couverture qui y entre */
.d-fstamp { position: absolute; top: 12px; right: 10px; font-family: var(--police-texte); font-weight: 700; font-size: 9px; line-height: 1.2; letter-spacing: .12em; color: var(--rouge-chemise); border: 1.5px solid var(--rouge-chemise); padding: 2px 5px; transform: rotate(-7deg); opacity: .85; }   /* petit tampon, coin haut droit du rabat */
/* Annotation manuscrite du rabat (décorative), soulignée au crayon */
/* Taille liée à la largeur du rabat (unité cqi) : 23 px au plus, plus petite sur les dossiers étroits (601 et 961 px) */
.d-ffront { container-type: inline-size; }
.d-fnote { position: relative; margin-top: 18px; font-family: var(--police-main); font-weight: 700; font-size: 23px; font-size: min(23px, 12cqi); line-height: 1.1; color: var(--encre-main); white-space: nowrap; transform: rotate(-4deg); }
.d-fnote::after { content: ''; position: absolute; left: 2%; right: 6%; bottom: -3px; height: 2px; border-radius: 2px; background: var(--encre-main); opacity: .55; transform: rotate(1.2deg); }
.d-fbtn { margin-top: auto; }   /* boutons alignés en bas, quelle que soit la longueur du titre */
/* Mention d'édition sous le titre (ex. « French edition » sur la page anglaise) */
.d-fedition { margin: -4px 0 0; font-family: var(--police-texte); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ambre); }
.d-ftitle { margin: 4px 0 0; font-family: var(--police-titre); font-weight: 400; font-size: 19px; line-height: 1.25; color: var(--texte); }
.d-file.ouvert .d-fcover, .d-file:focus-within .d-fcover { transform: translateY(-30%) rotate(-3deg); }
.d-file.ouvert .d-frune, .d-file:focus-within .d-frune { opacity: 1; text-shadow: 0 0 16px var(--cyan); }
.d-file.ouvert .d-ffront, .d-file:focus-within .d-ffront { transform: translateY(4px); }
@media (hover: hover) {
  .d-file:hover .d-fcover { transform: translateY(-30%) rotate(-3deg); }
  .d-file:hover .d-frune { opacity: 1; text-shadow: 0 0 16px var(--cyan); }
  .d-file:hover .d-ffront { transform: translateY(4px); }
}
.d-carrousel { position: relative; }
/* Flèches du carrousel : téléphone seulement */
.d-fleche { display: none; }
.d-consulter { display: none; }   /* bouton fixe du carrousel : téléphone + JS seulement */
@keyframes dIndice { 50% { transform: translateX(6px); } }
.d-tout { text-align: center; margin-top: 52px; }

/* --- Fiche du sujet (état final en 1a : barres retirées, tampon posé) --- */
.d-sheet { position: relative; max-width: 1000px; margin: 0 auto; background: var(--papier); color: var(--encre); padding: 56px 64px 150px; box-sizing: border-box; transform: rotate(-.6deg); box-shadow: 0 34px 70px rgba(0, 0, 0, .55); }
.d-sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: baseline; border-bottom: 3px solid var(--encre); padding-bottom: 12px; font-family: var(--police-texte); font-size: 13px; letter-spacing: .12em; }
.d-sheet-titre { font-family: var(--police-titre); font-size: 22px; letter-spacing: .06em; }
.d-insecable { white-space: nowrap; }   /* le numéro du dossier ne se retrouve jamais seul à la ligne */
.d-sheet-grid { display: flex; flex-wrap: wrap; gap: 44px; margin-top: 36px; }
.d-pol { position: relative; flex: 0 0 250px; background: var(--papier-pola); padding: 14px 14px 48px; transform: rotate(-3deg); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); align-self: flex-start; }
.d-pol img { display: block; width: 222px; height: 250px; object-fit: cover; object-position: 45% 35%; }
.d-trombone { position: absolute; left: 36px; top: -26px; }
.d-trombone path { fill: none; stroke: var(--trombone); stroke-width: 2.6; stroke-linecap: round; }
.d-pol-legende { position: absolute; left: 18px; bottom: 10px; font-family: var(--police-main); font-weight: 700; font-size: 22px; color: var(--encre-main); }
.d-fields { flex: 1 1 380px; min-width: 0; font-family: var(--police-texte); }
.d-fields h2 { margin: 0 0 10px; font-family: var(--police-titre); font-weight: 400; font-size: 34px; color: var(--encre); }
.d-fields dl { margin: 0; }
.d-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px dashed color-mix(in srgb, var(--encre) 35%, transparent); font-size: 16px; }
.d-row dt { margin: 0; font-weight: 700; font-size: 12px; letter-spacing: .14em; padding-top: 3px; }
.d-row dd { margin: 0; }
.d-val { position: relative; display: inline-block; }
.d-redact { position: absolute; left: -4px; right: -4px; top: -1px; bottom: -1px; background: var(--censure); transform-origin: right; transition: transform .55s ease; }
.d-sheet.on .d-redact { transform: scaleX(0); }
.d-devise { font-family: var(--police-titre); font-size: 18px; }
.d-devise-trad { display: block; font-family: var(--police-main); font-size: 22px; color: var(--encre-main); }
.d-notes-titre { margin: 22px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.d-notes { margin: 6px 0 0; font-size: 16px; line-height: 1.7; }
.d-empreinte { position: absolute; left: 50px; bottom: 30px; opacity: .35; }
.d-empreinte g, .x-empreinte g { fill: none; stroke: currentColor; stroke-width: 1.6; }
.d-slam { position: absolute; right: 56px; bottom: 40px; font-family: var(--police-texte); font-weight: 700; font-size: 30px; letter-spacing: .14em; color: var(--rouge-tampon); border: 4px double var(--rouge-tampon); padding: 6px 16px; opacity: 0; transform: rotate(-14deg) scale(2.2); }
.d-sheet.on .d-slam { opacity: .85; transform: rotate(-14deg) scale(1); }
/* Révélation au défilement (le JS retire puis remet .on) : le tampon frappe à 1,6 s */
.anim .d-sheet.on .d-slam { --tampon-rot: -14deg; --tampon-echelle: 2.2; --tampon-opacite: .85; opacity: 0; transform: rotate(-14deg) scale(2.2); animation: dSlam .35s cubic-bezier(.3, 1.6, .5, 1) 1.6s forwards; }
/* Animation de tampon commune (fiche « DÉCLASSIFIÉ », date du livre à venir), réglée par variables */
@keyframes dSlam {
  from { opacity: 0; transform: rotate(var(--tampon-rot-depart, var(--tampon-rot, -14deg))) scale(var(--tampon-echelle, 2.2)); }
  to { opacity: var(--tampon-opacite, .85); transform: rotate(var(--tampon-rot, -14deg)) scale(1); }
}

/* --- Ses univers --- */
.d-univers { text-align: center; padding-bottom: 88px; }
.d-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 52px; text-align: left; }
.d-case { position: relative; display: block; background: var(--kraft); background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--encre-kraft) 7%, transparent) 0 1px, transparent 1px 7px); color: var(--encre-kraft); padding: 34px 28px 28px; border-radius: 2px 6px 6px 6px; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }

.d-case h3 { margin: 14px 0 6px; font-family: var(--police-titre); font-weight: 400; font-size: 24px; }
.d-case p { margin: 0; font-size: 15px; line-height: 1.6; }
.d-case-lien { display: inline-block; margin-top: 16px; font-weight: 700; font-size: 14px; }
/* Le texte reste au premier plan */
.d-case svg, .d-case h3, .d-case p, .d-case-lien { position: relative; z-index: 1; }
.d-case-tab { position: absolute; left: 0; top: 0; padding: 3px 12px; background: var(--kraft-fonce); font-family: var(--police-texte); font-weight: 700; font-size: 11px; letter-spacing: .14em; }
.d-case:focus-visible { color: var(--encre-kraft); transform: translateY(-6px) rotate(-.6deg); }
/* Trombone accroché au bord supérieur, en haut à droite, incliné de 8°, dépasse au-dessus de la carte.
   Zone : 30 px du bord droit, de -18 px à +23 px : loin de l'onglet (à gauche) et du titre (à ~80 px). */
.d-case .d-case-trombone { position: absolute; right: 30px; top: -18px; z-index: 2; transform: rotate(8deg); pointer-events: none; }
.d-case-trombone path { fill: none; stroke: var(--trombone-fonce); stroke-width: 3.4; stroke-linecap: round; }   /* foncé : se voit nettement sur le kraft */
.d-case-trombone .d-case-trombone-reflet { stroke: var(--trombone-reflet); stroke-width: .9; transform: translate(-1.1px, -1.1px); opacity: .85; }   /* reflet ~1 px, décalé en haut à gauche */
/* Mouvement autorisé : caché 14 px plus haut, il descend et « s'accroche » (rebond du site).
   Sans JS ou en mouvement réduit : affiché directement à sa place, sans mouvement. */
.anim .d-case .d-case-trombone { opacity: 0; transform: translateY(-14px) rotate(8deg); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease-out; }
.anim .d-case.accroche .d-case-trombone, .anim .d-case:focus-visible .d-case-trombone { opacity: 1; transform: rotate(8deg); }
@media (hover: hover) {
  .d-case:hover { color: var(--encre-kraft); transform: translateY(-6px) rotate(-.6deg); }
  .anim .d-case:hover .d-case-trombone { opacity: 1; transform: rotate(8deg); }
}

/* -----------------------------------------------------------
   8. FOOTER
   ----------------------------------------------------------- */
.d-foot { width: calc(100% - 2 * var(--marge-page)); max-width: calc(var(--largeur-max) - 2 * var(--marge-page)); margin: 0 auto; box-sizing: border-box; padding: 44px 0 28px; border-top: 1px solid var(--ligne); }
/* Bordereau de clôture : étiquette d'archive à gauche, « Suivre l'auteur » à droite (bords de la colonne) */
.d-foot-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; }
/* Étiquette d'archive : dos de dossier en kraft, légèrement incliné */
.d-foot-etiquette { display: flex; align-items: center; gap: 26px; padding: 20px 30px 20px 22px; box-sizing: border-box; background: var(--kraft); background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--encre-kraft) 7%, transparent) 0 1px, transparent 1px 7px); color: var(--encre-kraft); border-radius: 2px 6px 6px 6px; box-shadow: 0 14px 26px rgba(0, 0, 0, .5); transform: rotate(-.6deg); }
.d-endstamp { display: block; flex: none; width: 100px; height: 100px; margin: 0; color: var(--encre-kraft); opacity: .85; }
.d-fin { margin: 0; font-family: var(--police-titre); font-size: 22px; line-height: 1.2; letter-spacing: .14em; color: var(--encre-kraft); }
.d-foot-num { margin: 6px 0 0; font-family: var(--police-texte); font-weight: 700; font-size: 12px; letter-spacing: .18em; }
.d-barcode { display: block; width: 180px; height: 34px; margin-top: 10px; color: var(--encre-kraft); }
.d-foot-suivre .d-kick { margin: 0 0 12px; color: var(--texte-doux); }
/* Interrupteur réseaux (<body data-reseaux="caches">) : Instagram / TikTok masqués partout ;
   dans le pied de page, le bouton Amazon reste seul sur toute la largeur. */
body[data-reseaux="caches"] [data-reseau] { display: none !important; }
.d-foot-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.d-foot-boutons .d-btn-p { grid-column: 1 / -1; }
.d-txt-court { display: none; }
/* Dernière ligne : liens légaux à gauche, crédit à droite, sous une ligne en pointillés */
.d-foot-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 32px; padding-top: 18px; border-top: 1px dashed var(--ligne); font-size: 12px; color: var(--texte-doux); }
.d-foot-liens { display: flex; flex-wrap: wrap; gap: 24px; }
.d-foot-liens a { color: var(--texte-doux); }
/* Pages légales : étiquette seule, centrée, dernière ligne à la même largeur */
.d-foot-simple .d-foot-grille { display: block; }
.d-foot-simple .d-foot-etiquette, .d-foot-simple .d-foot-bas { max-width: 560px; margin-left: auto; margin-right: auto; }

/* -----------------------------------------------------------
   8 bis. PAGES LÉGALES (mentions légales, confidentialité)
   ----------------------------------------------------------- */
.d-legal { padding: 64px 0 110px; }
.d-legal-doc { max-width: 760px; }
.d-legal-retour { display: inline-block; margin-bottom: 36px; padding: 8px 0; font-family: var(--police-texte); font-size: 14px; letter-spacing: .08em; color: var(--texte-doux); }
.d-legal-retour:focus-visible { color: var(--cyan); }
@media (hover: hover) { .d-legal-retour:hover { color: var(--cyan); } }
.d-legal-titre { margin: 0; font-family: var(--police-titre); font-weight: 400; font-size: 52px; line-height: 1.08; color: var(--texte); }
.d-legal h2 { margin: 48px 0 0; font-family: var(--police-titre); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--texte); }
.d-legal p { margin: 14px 0 0; font-family: var(--police-texte); font-size: 17px; line-height: 1.7; color: var(--texte-doux); }
.d-legal .d-kick { margin: 0 0 18px; font-size: 13px; color: var(--ambre); }
.d-legal .d-legal-intro { margin-top: 22px; color: var(--texte); }
.d-legal strong { font-weight: 700; color: var(--texte); }
.d-legal code { font-family: var(--police-texte); color: var(--texte); }
.d-legal p a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
/* Page 404 bilingue : le bloc anglais est séparé du français par un filet */
.d-introuvable p.d-date-tampon { margin: 26px 0 4px; font-size: 24px; line-height: 1.2; letter-spacing: .14em; color: var(--rouge-tampon); }   /* passe devant .d-legal p */
.d-introuvable-en { margin-top: 64px; padding-top: 48px; border-top: 1px dashed var(--ligne); }
.d-introuvable-en .d-legal-titre { font-size: 38px; }
.d-legal .d-legal-date { margin-top: 56px; font-size: 14px; letter-spacing: .04em; color: var(--texte-doux); }
.d-foot-liens a[aria-current] { color: var(--texte); }

/* -----------------------------------------------------------
   9. RESPONSIVE
   ----------------------------------------------------------- */
/* Pied de page sur écrans moyens : étiquette un peu réduite pour que le titre tienne sur une ligne */
@media (max-width: 1180px) {
  .d-fin { font-size: 19px; }
  .d-endstamp { width: 88px; height: 88px; }
}

@media (max-width: 960px) {
  /* Pied de page : empilé comme sur téléphone (boutons puis étiquette), largeur limitée et centrée */
  .d-foot-grille { display: flex; flex-direction: column-reverse; align-items: center; gap: 32px; }
  .d-foot-grille > * { width: 100%; max-width: 560px; }
  .d-foot-suivre .d-kick { justify-content: center; }
  .d-foot-bas { justify-content: center; }
  .d-files { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .d-nav { display: none; }
  .d-burger { display: flex; }
  .d-cases { grid-template-columns: minmax(0, 1fr); }
  .x-hero { height: 720px; }
  .x-veil { width: 100%; background: linear-gradient(180deg, color-mix(in srgb, var(--fond-nuit) 20%, transparent), color-mix(in srgb, var(--fond-nuit) 85%, transparent) 45%, color-mix(in srgb, var(--fond-nuit) 85%, transparent) 75%, color-mix(in srgb, var(--fond-nuit) 30%, transparent)); }
}

@media (max-width: 600px) {
  :root { --marge-page: 20px; }
  .d-files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bigname { font-size: 50px; }
  .d-sheet { padding: 32px 22px 90px; }
  .d-row { grid-template-columns: minmax(0, 1fr); }
  .d-stamp { width: 40px; height: 40px; }
  .d-bar { height: 68px; gap: 10px; }
  .d-logo-txt { font-size: 17px; letter-spacing: .08em; min-width: 0; }
  .d-lang a { padding: 10px 6px; }
  .d-head { overflow: hidden; }
  .d-h2 { font-size: 38px; }
  .d-sec { padding: 84px 0; }
  .d-date-tampon { font-size: 22px; padding: 6px 14px; }
  .d-legal { padding: 44px 0 84px; }
  .d-legal-titre { font-size: min(38px, 9.4vw); }   /* « confidentialité » tient dès 320 px */
  .d-legal h2 { font-size: 22px; margin-top: 40px; }

  /* Hero : le mur est réduit et passe au-dessus du texte */
  .x-hero { height: auto; display: flex; flex-direction: column; }
  .x-wall { order: 1; flex: none; position: relative; inset: auto; width: 1440px; height: 760px; transform-origin: 0 0; transform: translateX(-354px) scale(.52); margin-bottom: -365px; }
  .x-veil { display: none; }
  .x-dark { background: radial-gradient(circle var(--r) at var(--x) var(--y), color-mix(in srgb, var(--fond-nuit) 0%, transparent) 0%, color-mix(in srgb, var(--fond-nuit) 20%, transparent) 38%, color-mix(in srgb, var(--fond-nuit) 94%, transparent) 100%); }
  .x-hero .x-count { top: 404px; left: 20px; right: auto; }
  /* Toast juste au-dessus du compteur, sur le bas du mur (on voit le compteur passer à n / 5) */
  .x-hero .x-toast { top: 352px; left: 20px; right: auto; }
  .x-final { left: 5%; right: 5%; width: auto; top: 120px; transform: rotate(-2deg); }
  /* Écart avec la maquette : le hero fait ~1 300 px de haut sur téléphone ; centré, le texte
     du terminal tomberait sous l'écran. On le cale dans le premier écran. */
  .x-term { align-items: flex-start; padding-top: 110px; }
  .x-screen { font-size: 13px; line-height: 1.8; }
  .x-granted { font-size: 34px; }
  .x-skip { right: 14px; top: 14px; }
  .x-text { order: 2; position: relative; inset: auto; display: block; padding: 70px 0 56px; background: linear-gradient(180deg, color-mix(in srgb, var(--fond-nuit) 0%, transparent), var(--fond-nuit) 40px); }
  .d-ctas { flex-direction: column; align-items: stretch; }
  .d-ctas a { justify-content: center; }

  .d-bag { width: 270px; height: 380px; }
  .d-tag { right: -6px; }

  /* Best-sellers : carrousel */
  /* Carrousel : grille de 3 colonnes [‹] [zone qui défile = largeur exacte d'un dossier] [›].
     Les flèches ne sont jamais posées par-dessus la zone qui défile : Safari (iOS) dessine
     une zone à défilement au-dessus des éléments positionnés qui la recouvrent. */
  .d-carrousel { --largeur-dossier: min(250px, calc(100vw - 120px)); display: grid; grid-template-columns: 44px var(--largeur-dossier) 44px; column-gap: 8px; justify-content: center; align-items: start; margin: 0 -12px; }
  .d-files { grid-column: 2; grid-row: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; margin: 0; padding: 40px 0 0; scrollbar-width: none; overscroll-behavior-x: contain; }
  .d-files::-webkit-scrollbar { display: none; }
  .d-file { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  /* Flèches : visibles par défaut ; 40 × 40 px visibles, zone de toucher de 48 px (::after) ;
     centrées sur la chemise (40 px de marge haute + 20 px d'onglet + moitié de la chemise) */
  .d-fleche { position: relative; grid-row: 1; display: flex; align-items: center; justify-content: center; justify-self: center; width: 40px; height: 40px; margin-top: calc(60px + var(--largeur-dossier) * 2 / 3 - 20px); padding: 0; background: color-mix(in srgb, var(--fond) 85%, transparent); border: 1.5px solid var(--ambre); border-radius: 0; color: var(--ambre); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .d-fleche::after { content: ''; position: absolute; inset: -4px; }
  .d-fleche-prec { grid-column: 1; }
  .d-fleche-suiv { grid-column: 3; }
  .d-fleche svg { display: block; }
  .d-fleche svg path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .d-fleche:active { background: var(--ambre); color: var(--fond); }
  .d-fleche.est-masquee { visibility: hidden; }   /* extrémités : la mise en page ne bouge pas */
  /* Indice au premier affichage : la flèche › fait deux petits va-et-vient (6 px) */
  .d-fleche-suiv.indice { animation: dIndice .45s ease-in-out 2; }
  /* Avec le JS : un seul bouton « Consulter sur Amazon », fixe sous la chemise (il ne glisse pas) ;
     les boutons propres à chaque dossier sont masqués. Il s'étend sur les 3 colonnes pour tenir
     sur une ligne, et reste centré sous la chemise (grille symétrique). */
  .d-carrousel.est-actif .d-fbtn { display: none; }
  .d-carrousel.est-actif .d-consulter { display: inline-flex; grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: 12px; white-space: nowrap; }
  .d-tout { margin-top: 28px; }   /* ≈ 28 px entre « Consulter » et « Toutes les archives » */

  .d-pol { flex: 0 0 100%; max-width: 250px; margin: 0 auto; }
  .d-sheet { transform: none; padding-bottom: 150px; }
  .d-slam { right: 22px; bottom: 28px; font-size: 22px; }
  /* Pied de page : boutons d'abord, puis l'étiquette, puis les liens et le crédit, centrés */
  .d-univers { padding-bottom: 60px; }
  .d-foot { padding: 36px 0 24px; }
  .d-foot-grille { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 32px; }
  .d-foot-suivre .d-kick { justify-content: center; }
  .d-foot-boutons .d-btn-p { font-size: 14px; letter-spacing: .02em; padding-left: 36px; padding-right: 24px; gap: 8px; }
  .d-foot-etiquette { gap: 16px; padding: 16px 20px 16px 14px; }
  .d-endstamp { width: 68px; height: 68px; }
  .d-fin { font-size: 17px; letter-spacing: .1em; }
  .d-foot-num { font-size: 11px; letter-spacing: .14em; }
  .d-barcode { width: 132px; height: 25px; }
  .d-foot-bas { flex-direction: column; justify-content: center; text-align: center; margin-top: 28px; }
}

/* Petits téléphones : l'en-tête doit garder le burger entièrement dans l'écran.
   360 à 374 px : nom en 15 px ; moins de 360 px : nom en 13 px et tampon réduit. */
@media (max-width: 374px) {
  .d-foot-boutons { grid-template-columns: 1fr; }
  .d-fin { font-size: 15px; letter-spacing: .07em; }
  .d-bar { gap: 8px; }
  .d-logo { gap: 10px; }
  .d-logo-txt { font-size: 15px; letter-spacing: .06em; }
  .d-outils { gap: 6px; }
}
@media (max-width: 359px) {
  /* Compteur des secrets : « SECRETS TROUVÉS 0 / 5 » sur une seule ligne (sinon il chevauche la ligne du dessous) */
  .x-hero .x-count { gap: 8px; padding: 10px 10px; letter-spacing: .06em; white-space: nowrap; }
  .d-txt-long { display: none; }
  .d-txt-court { display: inline; }
  .d-foot-etiquette { gap: 12px; }
  .d-endstamp { width: 56px; height: 56px; }
  .d-fin { font-size: 14px; letter-spacing: .05em; }
  .d-bar { gap: 6px; }
  .d-logo { gap: 8px; }
  .d-stamp { width: 34px; height: 34px; }
  .d-logo-txt { font-size: 13px; letter-spacing: .05em; }
  .d-outils { gap: 4px; }
}

/* -----------------------------------------------------------
   10. MOUVEMENT RÉDUIT — toutes les animations coupées
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .d-dot, .d-caret, .d-tape-in, .d-bag, .d-bag-sheen, .d-menu, .d-menu-sheet,
  .d-nav a::after, .d-nav a:hover::after, .d-nav a:focus-visible::after { animation: none; }
  .d-bar-soc a, .d-stamp, .d-btn, .d-btn-p i, .d-fbtn, .d-fbtn i, .d-fcover, .d-frune, .d-ffront, .d-case, .d-redact, .x-it, .x-count { transition: none; }
  .x-it.x-pol.lit, .x-uf.lit .x-ufo, .x-map.lit .x-target, .x-motes i, .x-scan, .x-granted, .x-toast, .x-final, .x-term.off { animation: none; }
  .x-toast { opacity: 1; transform: rotate(-3deg); }
  .d-fleche-suiv.indice, .d-date-tampon.pose, .d-kick-compte.secousse { animation: none; }
}