/* ============================================================
   NAUTILUS — interface laiton, rivets, acajou ; lumière ambre
   contre bleu des hublots. Plein écran 16:9 (TBI), utilisable
   sur tablette et téléphone (marges 16 px, pas de défilement
   horizontal). Animations coupées par « animations réduites ».
   ============================================================ */
@font-face { font-family: "Atkinson"; src: url("../../../commun/polices/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("../../../commun/polices/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("../../../commun/polices/opendyslexic-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("../../../commun/polices/opendyslexic-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root{
  --ocean: #0b2230; --abysse: #050e15; --laiton: #c9a24a; --laiton-clair: #f0d48e; --laiton-fonce: #6b4a12;
  --acajou: #3a1a0c; --acajou-clair: #5a2d17; --vertdegris: #2a4038; --ambre: #ffcf7a; --cyan: #5fd0ff;
  --papier: #f3e9d2; --encre: #1f1a14; --rouge: #a3261b; --vert: #2e7d4f;
  --police: Georgia, "Times New Roman", serif; --police-texte: "Segoe UI", system-ui, sans-serif;
  --ombre: 0 10px 40px rgba(0,0,0,.55);
  /* Charte de la fenêtre d'énigme et des cadres : surchargée par css/theme.css de chaque jeu (valeurs d'origine = Nautilus) */
  --panneau-haut: #f6edd6; --panneau-bas: #e9dcbb; --accent: #2a5d7a; --accent-clair: #e3f2fa;
  --fond-carte: #fffaf0; --fond-colonne: #efe2c2; --bord-doux: #b39a6a; --bord-clair: #c9b48a; --rivet: #e3b54a;
  --plaque-haut: rgba(58,26,12,.96); --plaque-bas: rgba(28,12,6,.97); --cadre-haut: rgba(38,20,10,.94); --cadre-bas: rgba(20,10,5,.96);
  --laiton-profond: #8f6a22; --ombre-bouton: #3d2a08; --encre-bouton: #2a1a05; --bareme-fond: #2a140a;
}
*{ box-sizing: border-box; }
html, body{ margin: 0; height: 100%; }
body{ background: var(--abysse); color: var(--papier); font-family: var(--police-texte); font-size: 17px; line-height: 1.45; overflow: hidden; }
body[data-lecture="atkinson"]{ --police-texte: "Atkinson", system-ui, sans-serif; letter-spacing: .02em; line-height: 1.65; }
body[data-lecture="opendyslexic"]{ --police-texte: "OpenDyslexic", system-ui, sans-serif; --police: "OpenDyslexic", Georgia, serif; line-height: 1.75; font-size: 16px; }
.evitement{ position: absolute; left: -999px; } .evitement:focus{ left: 8px; top: 8px; z-index: 999; background: #fff; color: #000; padding: 6px; }
button{ font-family: inherit; }
:focus-visible{ outline: 3px solid var(--cyan); outline-offset: 2px; }

/* ---------- Écrans ---------- */
.ecran{ position: fixed; inset: 0; display: none; }
.ecran.actif{ display: block; }
#ecran-accueil, #ecran-fin, #ecran-pause{ overflow-y: auto; }
#ecran-pause.actif{ display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #12384d, var(--abysse)); }

/* ---------- Cadres de laiton ---------- */
.cadre-laiton{
  position: relative; border-radius: 14px;
  background: linear-gradient(180deg, var(--cadre-haut), var(--cadre-bas));
  border: 3px solid var(--laiton);
  box-shadow: inset 0 0 0 2px var(--laiton-fonce), inset 0 0 24px rgba(0,0,0,.7), var(--ombre);
}
.cadre-laiton::before{
  content: ""; position: absolute; inset: 6px; border-radius: 10px; pointer-events: none;
  background:
    radial-gradient(circle, var(--laiton-clair) 0 2px, var(--laiton-fonce) 3px, transparent 4px) 0 0 / 34px 34px repeat-x,
    radial-gradient(circle, var(--laiton-clair) 0 2px, var(--laiton-fonce) 3px, transparent 4px) 0 100% / 34px 34px repeat-x;
  background-position: 6px 4px, 6px calc(100% - 4px); background-size: 34px 10px; opacity: .8;
}
.btn-laiton{
  font: 600 1rem var(--police-texte); color: var(--encre-bouton); cursor: pointer;
  background: linear-gradient(180deg, var(--laiton-clair), var(--laiton) 55%, var(--laiton-profond));
  border: 2px solid var(--laiton-fonce); border-radius: 10px; padding: .55em 1.1em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 var(--ombre-bouton), 0 6px 14px rgba(0,0,0,.4);
  transition: transform .1s, filter .15s;
}
.btn-laiton:hover:not(:disabled){ filter: brightness(1.08); }
.btn-laiton:active:not(:disabled){ transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 var(--ombre-bouton); }
.btn-laiton:disabled{ opacity: .45; cursor: not-allowed; }
.btn-laiton.petit{ font-size: .88rem; padding: .4em .8em; }
.btn-laiton.grand{ font-size: 1.2rem; padding: .7em 1.6em; }
.btn-laiton.gris{ background: linear-gradient(180deg, #d9d4c8, #a9a291); }
.btn-laiton.principal{ background: linear-gradient(180deg, #ffe6a6, var(--rivet) 55%, #a87a28); }
.btn-laiton.mise-en-evidence{ animation: lueur-btn 1.6s ease-in-out infinite; }
@keyframes lueur-btn{ 50%{ box-shadow: 0 0 0 4px rgba(95,208,255,.55), 0 0 22px rgba(95,208,255,.8); } }

/* ---------- Accueil ---------- */
.scene-fond{ position: fixed; inset: 0; }
.scene-fond.fin{ background: radial-gradient(circle at 50% 30%, #1d5d7a, #04131c 70%); }
.accueil-boite{ position: relative; z-index: 2; width: min(980px, calc(100% - 32px)); margin: 4vh auto; padding: 28px 34px 26px; }
h1{ font-family: var(--police); font-weight: normal; text-align: center; margin: 0 0 12px; font-size: clamp(1.6rem, 3.4vw, 2.6rem); color: var(--laiton-clair); text-shadow: 0 2px 0 #000, 0 0 24px rgba(255,207,122,.35); }
h1 .titre-petit{ display: block; font-size: .45em; letter-spacing: .35em; text-transform: uppercase; color: var(--cyan); }
h1 .titre-sous{ display: block; font-size: .55em; font-style: italic; color: var(--ambre); }
.accueil-recit{ display: flex; gap: 18px; align-items: center; margin: 10px 0 14px; }
.accueil-texte{ margin: 0 0 8px; font-size: 1rem; min-height: 5.6em; }
.reprise{ background: rgba(95,208,255,.08); border: 1px dashed var(--cyan); border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
.champ-equipe{ display: block; font-family: var(--police); color: var(--laiton-clair); margin-top: 8px; }
#nom-equipe{ width: 100%; font-size: 1.15rem; padding: .55em .8em; border-radius: 10px; border: 2px solid var(--laiton); background: var(--papier); color: var(--encre); margin-top: 4px; }
.titre-grades{ font-family: var(--police); font-weight: normal; color: var(--laiton-clair); text-align: center; margin: 18px 0 8px; }
.choix-grade{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.carte-grade{ display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--laiton-fonce); background: linear-gradient(180deg, #16303d, #0b1c26); color: var(--papier); transition: transform .15s, box-shadow .15s; }
.carte-grade:hover{ transform: translateY(-3px); }
.carte-grade.choisie{ border-color: var(--laiton-clair); box-shadow: 0 0 0 3px var(--laiton), 0 0 24px rgba(240,212,142,.5); background: linear-gradient(180deg, #24526a, #10303f); }
.carte-grade.indisponible{ opacity: .35; }
.g-icone{ font-size: 2rem; } .g-nom{ font-family: var(--police); font-size: 1.15rem; color: var(--laiton-clair); } .g-desc{ font-size: .78rem; opacity: .85; text-align: center; }
.regles-courtes{ margin: 14px 0 6px; font-size: .86rem; opacity: .85; text-align: center; }
.boutons-accueil{ display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- Portraits ---------- */
.portrait-ovale{ position: relative; width: 96px; height: 116px; flex: none; border-radius: 50%; overflow: hidden; background: #000; }
.portrait-ovale .portrait-contenu, .portrait-ovale svg, .portrait-ovale img{ width: 100%; height: 100%; display: block; object-fit: cover; }
.portrait-ovale .portrait-cadre{ position: absolute; inset: 0; border-radius: 50%; border: 5px solid var(--laiton); box-shadow: inset 0 0 0 2px var(--laiton-fonce), inset 0 0 18px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.6); }
.portrait-ovale.mini{ width: 58px; height: 70px; } .portrait-ovale.mini .portrait-cadre{ border-width: 3px; }
.portrait-ovale.accueil{ width: 120px; height: 146px; }
.portrait-ovale.cine{ width: 70px; height: 84px; }
.p-corps{ animation: respire 4.2s ease-in-out infinite; transform-origin: 100px 240px; }
@keyframes respire{ 50%{ transform: translateY(-1.5px) scale(1.008); } }
.p-yeux{ animation: cligne 5.5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes cligne{ 0%, 95%, 100%{ transform: scaleY(1); } 97%{ transform: scaleY(.1); } }
.b-ouverte{ opacity: 0; }
.parle .b-ouverte{ animation: bouche .28s steps(2) infinite; }
.parle .b-fermee{ animation: bouche-inv .28s steps(2) infinite; }
@keyframes bouche{ 0%{ opacity: 0; } 50%{ opacity: 1; } }
@keyframes bouche-inv{ 0%{ opacity: 1; } 50%{ opacity: 0; } }
.portrait-ovale.fichier.parle{ animation: parle-img .5s ease-in-out infinite; }
@keyframes parle-img{ 50%{ filter: brightness(1.08); } }

/* ---------- Scène (décor + effets + zones) ---------- */
.scene-jeu{ position: absolute; inset: 0; }
.scene-nautilus{ position: absolute; inset: 0; overflow: hidden; background: #02080c; }
.sc-cadre{ position: absolute; }
.sc-kb{ position: absolute; inset: 0; transform-origin: 50% 55%; }
.sc-kb.ken-burns{ animation: ken-burns var(--kb-duree, 34s) ease-in-out infinite alternate; }
@keyframes ken-burns{ from{ transform: scale(1) translate(0,0); } to{ transform: scale(var(--kb-echelle, 1.05)) translate(-.8%, -.6%); } }
.sc-fond, .sc-fond img, .sc-fond svg{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sc-fond{ transition: filter 1.2s ease; }
.sc-fx{ position: absolute; inset: 0; pointer-events: none; }
.sc-reactions{ position: absolute; inset: 0; pointer-events: none; }
.sc-zones{ position: absolute; inset: 0; }
.sc-vignette{ position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(0,0,0,var(--vignette,.5)) 100%); }
.sc-grain{ position: absolute; inset: -50%; pointer-events: none; opacity: var(--grain, 0);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite; }
@keyframes grain{ 0%{ transform: translate(0,0); } 33%{ transform: translate(-3%,2%); } 66%{ transform: translate(2%,-3%); } 100%{ transform: translate(-1%,1%); } }
.sc-alarme{ position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 0%, rgba(255,40,20,.35), transparent 60%); }
.en-alarme .sc-alarme{ animation: alarme 2.4s ease-in-out infinite; }
@keyframes alarme{ 0%, 100%{ opacity: .15; } 50%{ opacity: .9; } }
.ocean-ouvert .sc-fond{ filter: brightness(1.08) saturate(1.15) !important; }
.sc-source{ position: absolute; right: 8px; bottom: 6px; font-size: .7rem; opacity: .45; pointer-events: none; }
.flash-lumiere .sc-fond{ animation: flash 1.4s ease-out; }
@keyframes flash{ 0%{ filter: brightness(.4); } 15%{ filter: brightness(1.7); } 25%{ filter: brightness(.6); } 40%{ filter: brightness(1.4); } 100%{ filter: none; } }
.tremble{ animation: tremble .12s linear 8; }
@keyframes tremble{ 50%{ transform: translate(2px, -1px); } }
.fondu{ animation: fondu-noir .65s ease-in forwards; }
@keyframes fondu-noir{ to{ filter: brightness(0); } }

.zone{ position: absolute; background: transparent; border: 2px solid transparent; border-radius: 14px; cursor: pointer; padding: 0; }
.zone:hover, .zone:focus-visible{ border-color: rgba(240,212,142,.75); background: rgba(240,212,142,.07); box-shadow: 0 0 22px rgba(240,212,142,.35); }
.zone-etiquette{ position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; font-size: .85rem;
  background: rgba(20,10,5,.92); color: var(--laiton-clair); border: 1px solid var(--laiton); padding: 3px 9px; border-radius: 8px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.zone:hover .zone-etiquette, .zone:focus-visible .zone-etiquette{ opacity: 1; }
.zone.cible{ animation: cible 2.6s ease-in-out infinite; }
@keyframes cible{ 0%, 100%{ box-shadow: 0 0 0 0 rgba(240,212,142,0); } 50%{ box-shadow: 0 0 26px 4px rgba(240,212,142,.55), inset 0 0 18px rgba(240,212,142,.25); border-color: rgba(240,212,142,.55); } }
.insiste .zone.cible{ animation-duration: 1.1s; }
.insiste .zone.cible .zone-etiquette{ opacity: 1; }
.zone-loupe{ position: absolute; right: -10px; top: -12px; font-size: 1.3rem; filter: drop-shadow(0 2px 4px #000); animation: flotte 2s ease-in-out infinite; }
@keyframes flotte{ 50%{ transform: translateY(-5px); } }
.reaction{ position: absolute; }
.reaction-cable-neuf svg{ width: 100%; height: 100%; filter: drop-shadow(0 0 12px rgba(255,190,110,.8)); animation: apparait 1.2s ease-out; }
@keyframes apparait{ from{ opacity: 0; transform: scale(.6); } }
.reaction-aiguilles .balayage{ position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,236,170,.55) 50%, transparent 70%); background-size: 250% 100%; animation: balayage 1.6s ease-in-out 2; border-radius: 12px; }
@keyframes balayage{ from{ background-position: 120% 0; } to{ background-position: -20% 0; } }
.contenue .sc-cadre{ box-shadow: 0 0 0 2px var(--laiton-fonce); }

/* ---------- HUD ---------- */
.hud{ position: absolute; top: 10px; left: 16px; right: 16px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; flex-wrap: wrap; }
.hud-titre{ font-family: var(--police); color: var(--laiton-clair); } .hud-lieu{ color: var(--cyan); font-style: italic; margin-left: 8px; }
.hud-droite{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stat b{ color: var(--laiton-clair); }
.jauge-air{ display: inline-flex; align-items: center; gap: 6px; }
.jauge-cadran{ position: relative; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, #f3ead2 58%, var(--laiton) 60%, var(--laiton-fonce) 70%); }
.jauge-aiguille{ position: absolute; left: 50%; top: 50%; width: 2px; height: 13px; background: #8a1c12; transform-origin: 50% 0; transform: rotate(calc(180deg + (var(--air, 100) * 2.7deg) - 135deg)); transition: transform 1s; }
.jauge-air.basse .jauge-lib b{ color: #ff8a6a; }
.jauge-air.basse .jauge-cadran{ animation: alarme-jauge 1.6s infinite; }
@keyframes alarme-jauge{ 50%{ box-shadow: 0 0 12px 3px rgba(255,80,40,.7); } }

/* ---------- Plaque de dialogue ---------- */
.plaque{ position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(980px, calc(100% - 32px)); z-index: 6; display: none; }
.plaque.visible{ display: block; animation: monte .45s ease-out; }
@keyframes monte{ from{ transform: translate(-50%, 30px); opacity: 0; } }
.plaque-dialogue{ display: flex; gap: 16px; align-items: center; padding: 14px 18px; border-radius: 16px;
  background: linear-gradient(180deg, var(--plaque-haut), var(--plaque-bas)); border: 3px solid var(--laiton);
  box-shadow: inset 0 0 0 2px var(--laiton-fonce), inset 0 0 30px rgba(0,0,0,.6), 0 12px 40px rgba(0,0,0,.6); }
.plaque-nom{ font-family: var(--police); color: var(--laiton-clair); font-size: 1.1rem; }
.plaque-phrase{ font-size: 1.05rem; min-height: 2.6em; }
.plaque-source{ font-size: .8rem; color: var(--cyan); opacity: .9; margin-top: 4px; }
.plaque-boutons{ display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.bulle-examen{ position: absolute; z-index: 7; width: 280px; padding: 10px 12px; border-radius: 10px; background: rgba(243,233,210,.97); color: var(--encre); border: 2px solid var(--laiton); box-shadow: var(--ombre); font-size: .92rem; opacity: 0; pointer-events: none; transition: opacity .25s; }
.bulle-examen.visible{ opacity: 1; }
.bandeau-verif{ display: none; position: absolute; left: 50%; top: 70px; transform: translateX(-50%); background: #7a1e12; padding: 3px 12px; border-radius: 8px; z-index: 6; font-size: .85rem; }
.mode-verif .bandeau-verif{ display: block; }

/* ---------- Cinématique ---------- */
.cinematique{ position: absolute; inset: 0; background: #000; }
.cine-scene{ position: absolute; inset: 0; }
.cine-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cine-titre{ position: absolute; top: 22px; left: 0; right: 0; text-align: center; font-family: var(--police); font-size: clamp(1.2rem, 2.6vw, 2rem); color: var(--laiton-clair); text-shadow: 0 2px 8px #000; animation: titre-cine 6s ease forwards; }
@keyframes titre-cine{ 0%{ opacity: 0; letter-spacing: .3em; } 20%, 70%{ opacity: 1; letter-spacing: .05em; } 100%{ opacity: .0; } }
.cine-soustitre{ position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); width: min(980px, calc(100% - 32px)); display: flex; gap: 14px; align-items: center;
  background: rgba(0,0,0,.62); padding: 12px 16px; border-radius: 12px; font-size: 1.12rem; border: 1px solid rgba(240,212,142,.4); }
.cine-soustitre b{ color: var(--laiton-clair); font-family: var(--police); }
.cine-passer{ position: absolute; right: 16px; top: 16px; }
.mvt-zoom .sc-cadre{ animation: cine-zoom 9s ease-out forwards; }
@keyframes cine-zoom{ from{ transform: scale(1.12); } to{ transform: scale(1); } }
.mvt-glisse .sc-cadre{ animation: cine-glisse 8s ease-in-out forwards; }
@keyframes cine-glisse{ from{ transform: scale(1.1) translateX(2.5%); } to{ transform: scale(1.1) translateX(-2.5%); } }
.mvt-secousse .sc-cadre{ animation: cine-secousse .15s linear 10; }
@keyframes cine-secousse{ 50%{ transform: translate(4px, -3px) scale(1.02); } }
.coupure .sc-fond{ animation: coupure 1.8s steps(1) forwards; }
@keyframes coupure{ 0%{ filter: brightness(1); } 10%{ filter: brightness(.2); } 20%{ filter: brightness(1.2); } 30%{ filter: brightness(.1); } 45%{ filter: brightness(.7); } 60%, 100%{ filter: brightness(.35) saturate(.6); } }

/* ---------- Bibliothèque, réglages ---------- */
.biblio, .reglages{ position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; background: rgba(2,8,12,.72); padding: 16px; }
.biblio.ouverte, .reglages.ouverte{ display: flex; }
.biblio-boite, .reglages-boite{ width: min(1100px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #2a140a, #1a0c05); border: 3px solid var(--laiton); box-shadow: var(--ombre); }
.biblio-tete{ display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 2px solid var(--laiton-fonce); }
.biblio-tete h3{ margin: 0; font-family: var(--police); color: var(--laiton-clair); font-weight: normal; }
.fermer-biblio, .fermer-reglages, .fermer-panneau{ background: none; border: 2px solid var(--laiton); color: var(--laiton-clair); border-radius: 50%; width: 36px; height: 36px; cursor: pointer; font-size: 1rem; }
.biblio-corps{ display: grid; grid-template-columns: 300px 1fr; min-height: 0; flex: 1; }
.biblio-rayons{ overflow-y: auto; padding: 12px; border-right: 2px solid var(--laiton-fonce);
  background: repeating-linear-gradient(180deg, transparent 0 86px, rgba(201,162,74,.25) 86px 92px); }
.rayon-titre{ font-family: var(--police); color: var(--cyan); margin: 6px 0; }
.fiche-lien{ display: block; width: 100%; text-align: left; margin: 4px 0; padding: 8px 10px; border-radius: 8px; cursor: pointer; border: 1px solid var(--laiton-fonce);
  background: linear-gradient(90deg, #5b1f17, #3a140e); color: var(--papier); }
.fiche-lien.lue::after{ content: " ✓"; color: var(--laiton-clair); }
.fiche-lien.active{ outline: 2px solid var(--laiton-clair); }
.biblio-fiche{ overflow-y: auto; padding: 18px 24px; background: var(--papier); color: var(--encre); font-size: 1.02rem; }
.biblio-fiche h4{ font-family: var(--police); font-size: 1.4rem; margin: 4px 0 10px; color: var(--acajou); }
.fiche-ref{ font-size: .82rem; color: var(--laiton-fonce); text-transform: uppercase; letter-spacing: .08em; }
.fiche-roman{ font-style: italic; color: #5a3a1c; border-top: 1px dashed var(--bord-doux); padding-top: 8px; }
.tab-lecon{ border-collapse: collapse; width: 100%; margin: 8px 0; } .tab-lecon th, .tab-lecon td{ border: 1px solid var(--bord-doux); padding: 6px 8px; vertical-align: top; } .tab-lecon th{ background: #e6d6b0; }
.encadre{ background: #fff8e6; border-left: 5px solid var(--laiton); padding: 8px 12px; margin: 10px 0; border-radius: 6px; }
.encadre.attention{ border-color: #c26a1a; } .encadre.danger{ border-color: var(--rouge); background: #fdecea; }
.reglages-corps{ overflow-y: auto; padding: 12px 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px 24px; }
.reglages-corps h4{ font-family: var(--police); color: var(--laiton-clair); margin: 8px 0; font-weight: normal; }
.reg-ligne{ display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px dotted rgba(201,162,74,.3); }
.reg-boutons{ display: flex; gap: 8px; flex-wrap: wrap; }
.note{ font-size: .82rem; opacity: .8; } .note a{ color: var(--cyan); }

/* ---------- Fin d'escale ---------- */
.fin-boite{ position: relative; z-index: 2; width: min(1100px, calc(100% - 32px)); margin: 3vh auto; padding: 22px 26px; }
.fin-plaque .plaque-dialogue{ background: rgba(0,0,0,.25); }
.fragment{ text-align: center; margin: 18px auto; padding: 18px; border-radius: 14px; max-width: 640px;
  background: radial-gradient(circle at 50% 40%, #3a2a10, #1a0f05); border: 3px double var(--laiton); }
.fragment-titre{ font-family: var(--police); color: var(--cyan); }
.fragment-mot{ font-family: var(--police); font-size: clamp(2.4rem, 7vw, 4.2rem); letter-spacing: .3em; color: var(--laiton-clair); margin: 10px 0;
  text-shadow: 0 2px 0 #000, 0 0 30px rgba(255,207,122,.6); animation: grave 2s ease-out; }
@keyframes grave{ from{ opacity: 0; letter-spacing: .8em; filter: blur(6px); } }
.fragment.ferme{ padding: 8px; }
.bilan h2{ font-family: var(--police); color: var(--laiton-clair); text-align: center; font-weight: normal; }
.bilan-score{ text-align: center; font-size: 1.3rem; }
.journal{ background: var(--papier); color: var(--encre); border-radius: 10px; padding: 12px 16px; margin: 12px 0; }
.journal h3{ font-family: var(--police); margin: 0 0 6px; }
.tab-journal{ width: 100%; border-collapse: collapse; font-size: .9rem; } .tab-journal th, .tab-journal td{ border: 1px solid var(--bord-doux); padding: 5px 7px; vertical-align: top; } .tab-journal th{ background: #e6d6b0; }
.boutons-fin{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pause-boite{ padding: 28px 36px; text-align: center; max-width: calc(100% - 32px); }
.pause-boite h2{ font-family: var(--police); color: var(--laiton-clair); font-weight: normal; }

/* ---------- Toasts ---------- */
.toasts{ position: fixed; right: 16px; top: 80px; z-index: 40; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100% - 32px)); }
.toast{ background: rgba(20,10,5,.95); border: 2px solid var(--laiton); border-radius: 10px; padding: 10px 14px; box-shadow: var(--ombre); transition: opacity .5s, transform .5s; }
.toast.part{ opacity: 0; transform: translateX(30px); }

/* ---------- Impression ---------- */
#zone-impression{ display: none; }
@media print{
  body.imprime > *:not(#zone-impression){ display: none !important; }
  body.imprime{ overflow: visible; background: #fff; color: #000; }
  body.imprime #zone-impression{ display: block; color: #000; font-family: Georgia, serif; }
  .impression-tete{ font-size: .9rem; border-bottom: 1px solid #000; margin-bottom: 8px; }
  .fm-grille{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .fm-case{ border: 2px solid #000; height: 80px; padding: 4px; border-radius: 6px; } .fm-num{ font-size: .8rem; }
  .corrige{ page-break-inside: avoid; border-bottom: 1px solid #999; }
  .journal{ background: #fff; }
}

/* ---------- Animations réduites ---------- */
body.anim-reduites *, body.anim-reduites *::before, body.anim-reduites *::after{ animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } }

/* ---------- Petits écrans ---------- */
@media (max-width: 760px){
  body{ font-size: 15px; }
  .choix-grade{ grid-template-columns: repeat(2, 1fr); }
  .accueil-boite{ padding: 18px 16px; }
  .accueil-recit{ flex-direction: column; text-align: center; }
  .hud{ left: 8px; right: 8px; padding: 6px 8px; } .hud-titre, .hud-lieu{ display: none; } .hud-droite{ gap: 8px; font-size: .85rem; }
  .plaque{ width: calc(100% - 16px); bottom: 8px; } .plaque-dialogue{ padding: 10px; gap: 10px; } .plaque-dialogue .portrait-ovale{ width: 62px; height: 76px; }
  .biblio-corps{ grid-template-columns: 1fr; } .biblio-rayons{ max-height: 30vh; border-right: none; border-bottom: 2px solid var(--laiton-fonce); }
  .cine-soustitre{ bottom: 12px; font-size: .95rem; }
}
.hud.cadre-laiton::before{ display: none; }
@media (max-width: 760px){ .bandeau-verif{ top: auto; bottom: 4px; font-size: .75rem; } }
/* ---------- Coffre du capitaine ---------- */
.coffre{ text-align: center; margin: 14px auto; padding: 18px; border-radius: 14px; max-width: 900px; background: radial-gradient(circle at 50% 30%, #3a2a10, #140b04); border: 3px double var(--laiton); }
.coffre h2{ font-family: var(--police); color: var(--laiton-clair); font-weight: normal; }
.coffre-cases{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.coffre-case{ display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--cyan); }
.coffre-case input{ font: 700 1.1rem var(--police); letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 8px; border-radius: 8px; border: 2px solid var(--laiton); background: var(--papier); color: var(--encre); }
.coffre.ouvert{ box-shadow: 0 0 40px rgba(255,207,122,.6); }
.journal h4{ font-family: var(--police); margin: 12px 0 4px; }
/* ---------- Réactions génériques du décor ---------- */
.reaction .etoile{ position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #fff6c8, rgba(255,207,122,0) 70%); animation: etoile 1.6s ease-out 2 both; }
@keyframes etoile{ 0%{ transform: scale(0); opacity: 0; } 40%{ transform: scale(2.4); opacity: 1; } 100%{ transform: scale(0); opacity: 0; } }
.reaction .nuage{ position: absolute; bottom: 10%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(240,240,240,.55), rgba(240,240,240,0) 70%); animation: nuage 2.4s ease-out both; }
@keyframes nuage{ from{ transform: translateY(0) scale(.4); opacity: .9; } to{ transform: translateY(-120%) scale(1.6); opacity: 0; } }
.flash-blanc .sc-fond{ animation: flash-blanc .9s ease-out; }
@keyframes flash-blanc{ 0%{ filter: brightness(2.2); } 100%{ filter: none; } }
.reaction .volet{ position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(90deg, #1b1d1c, #3a3f3c); animation: volet 2s ease-in-out forwards; }
.reaction .volet.g{ left: 0; } .reaction .volet.d{ right: 0; animation-name: volet-d; }
@keyframes volet{ from{ transform: translateX(0); } to{ transform: translateX(-102%); } }
@keyframes volet-d{ from{ transform: translateX(0); } to{ transform: translateX(102%); } }
.reaction svg{ width: 100%; height: 100%; }
.reaction .trace{ fill: none; stroke: var(--ambre); stroke-width: 1.4; stroke-dasharray: 3 2; filter: drop-shadow(0 0 2px #ffb84d); stroke-dashoffset: 200; animation: trace 2.2s ease-out forwards; vector-effect: non-scaling-stroke; }
@keyframes trace{ from{ stroke-dashoffset: 200; } to{ stroke-dashoffset: 0; } }
.reaction .givre{ position: absolute; inset: 0; background: radial-gradient(circle, rgba(220,245,255,.0) 30%, rgba(220,245,255,.65)); animation: givre 2.4s ease-out forwards; }
@keyframes givre{ from{ opacity: .9; } to{ opacity: 0; } }
.cine-plan-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Fondu au noir en sortie de cinématique (js/app.js : VML.fonduNoir) */
#voile-noir{ position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 10000; }