/* Cocotchouks : la page entiere est le jeu. Le canvas (320 x 180) est agrandi sans flou ;
   tout le texte (bulles, menus) est en HTML par-dessus, pour rester net et lisible. */
:root{
  --nuit:#1d1626; --encre:#3a2418; --creme:#f5ecd8; --creme2:#f3e6c8; --or:#e6b640; --roux:#d9622a;
  --bleu:#2f5f8f; --titre:'Cinzel',Georgia,serif; --texte:'Alegreya',Georgia,serif; --pixel:'Jersey 10',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--nuit);color:var(--creme);overflow:hidden;
  font-family:var(--texte);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#cadre{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
#scene{position:relative;flex:none;line-height:0;overflow:hidden;background:#000;box-shadow:0 0 0 2px #0006}
#ecran{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.cache{display:none!important}

/* ---------- Interface en jeu ---------- */
#hud{position:absolute;left:2%;top:3%;display:flex;flex-direction:column;gap:4px;pointer-events:none;line-height:1}
#vies{display:flex;gap:2px}
#vies canvas{width:calc(var(--px) * 11);height:calc(var(--px) * 13);image-rendering:pixelated;filter:drop-shadow(0 1px 1px #0009)}
#ligne-nectar{display:flex;align-items:center;gap:calc(var(--px) * 1.5)}
#ligne-nectar span{font:700 clamp(13px, calc(var(--px) * 3.3), 24px)/1 var(--titre);color:#ffe9a8;letter-spacing:1px;text-shadow:0 1px 0 #000,0 0 4px #000}
/* mode heroique (BIBLE § 14) : pas de nectar, le petit laurier rouge a sa place */
#ligne-heroique{display:none;align-items:center;gap:calc(var(--px) * 1)}
#ligne-heroique canvas{width:calc(var(--px) * 10);height:calc(var(--px) * 7);image-rendering:pixelated;filter:drop-shadow(0 1px 1px #0009)}
#ligne-heroique span{font:700 clamp(13px, calc(var(--px) * 3.3), 24px)/1 var(--titre);color:#ffb0a0;letter-spacing:1px;text-shadow:0 1px 0 #000,0 0 4px #000}
body.heroique #ligne-nectar{display:none}
body.heroique #ligne-heroique{display:flex}
/* chrono a l'ecran (speedrun, 2026-10-11) : cache par defaut, « Chrono » dans le menu pause ; chiffres de largeur fixe */
#ligne-chrono{display:none;align-items:center;gap:calc(var(--px) * 1.5)}
body.chrono #ligne-chrono{display:flex}
#ligne-chrono canvas{width:calc(var(--px) * 6);height:calc(var(--px) * 8);image-rendering:pixelated;filter:drop-shadow(0 1px 1px #0009)}
#ligne-chrono span{font:700 clamp(13px, calc(var(--px) * 3.3), 24px)/1 var(--titre);color:#ffe9a8;letter-spacing:1px;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 0 #000,0 0 4px #000}
#tuto{position:absolute;left:50%;top:4%;transform:translate(-50%,-30%);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
  background:#1d1626e6;color:var(--creme);border:3px solid var(--or);border-radius:12px;padding:calc(var(--px) * 1.6) calc(var(--px) * 3.4);
  font:500 clamp(15px, calc(var(--px) * 4.2), 30px)/1.35 var(--texte);max-width:min(calc(var(--px) * 190), 80%);width:max-content;text-align:center;line-height:1.35}
#tuto.on{opacity:1;transform:translate(-50%,0)}
#tuto.conseil{border-color:#e4785a}
#tuto.reussi{border-color:#7fc06a}
#tuto.reussi::after{content:' ✓';color:#7fc06a;font-weight:700}
#tuto b{color:var(--or)}
#tuto kbd{display:inline-block;font:700 0.9em/1 var(--titre);color:var(--encre);background:var(--creme);border:2px solid var(--or);border-bottom-width:4px;border-radius:6px;padding:0.15em 0.45em;margin:0 0.1em}
/* Nectar en 3 cases : une case pleine = une gorgee = une amphore (Romain, 2026-10-06 : la barre d'un seul
   tenant ne disait pas quand on avait de quoi regagner une amphore) */
#nectar{display:flex;gap:calc(var(--px) * 1)}
#nectar i{position:relative;width:calc(var(--px) * 11);height:calc(var(--px) * 4);border:max(1px,calc(var(--px) * .7)) solid var(--encre);
  background:#2a1d14cc;border-radius:2px;overflow:hidden}
#nectar i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--rempli,0%);background:linear-gradient(#ffe48a,#c99a2e);transition:width .15s}
#nectar i.pleine{border-color:#ffe9a8;box-shadow:0 0 6px #ffd23f}
#nectar i.pleine::before{background:linear-gradient(#fff3b8,#ffd23f)}
/* Boire sans nectar : la jauge clignote en rouge ; vie pleine : les amphores sautillent (sans replique qui fige le jeu) */
#nectar.refus{animation:refus-tremble .4s}
#nectar.refus i{animation:refus-rouge .2s 2}
#vies.refus canvas{animation:refus-saute .3s}
#vies.refus canvas:nth-child(2){animation-delay:.04s}#vies.refus canvas:nth-child(3){animation-delay:.08s}
#vies.refus canvas:nth-child(4){animation-delay:.12s}#vies.refus canvas:nth-child(5){animation-delay:.16s}
@keyframes refus-rouge{50%{border-color:#ff4a3a;background:#7a1a12cc;box-shadow:0 0 6px #ff4a3a}}
@keyframes refus-tremble{25%{transform:translateX(calc(var(--px) * -1))}75%{transform:translateX(var(--px))}}
@keyframes refus-saute{50%{transform:translateY(calc(var(--px) * -2))}}

#barre-boss{position:absolute;left:20%;right:20%;bottom:5%;text-align:center;pointer-events:none;line-height:1.2}
#barre-boss span{font:700 14px/1.2 var(--titre);color:var(--creme);text-shadow:0 2px 0 #000;letter-spacing:1px}
#barre-boss div{height:8px;margin-top:3px;border:2px solid var(--encre);background:#2a1d14cc;border-radius:3px;overflow:hidden}
#barre-boss i{display:block;height:100%;background:linear-gradient(#e4785a,#a9441a);transition:width .2s}
#bulles{position:absolute;inset:0;pointer-events:none;line-height:1.3}
/* Textes a l'echelle de l'ecran (--px = taille d'un pixel du jeu) : avant, 15 px fixes, illisibles
   sur un grand ecran (retour de Romain, 2026-10-06) */
.bulle{position:absolute;transform:translate(-50%,-100%);background:#fffaf0;color:#2a1a10;
  border:3px solid var(--encre);border-radius:12px;padding:calc(var(--px) * 1.4) calc(var(--px) * 3) calc(var(--px) * 1.6);
  font:500 clamp(16px, calc(var(--px) * 4.1), 30px)/1.3 var(--texte);
  max-width:min(calc(var(--px) * 150), 86%);width:max-content;text-align:left;box-shadow:0 3px 0 #0005;
  animation:apparait .18s ease-out}
.bulle::after{content:"";position:absolute;left:var(--queue,50%);bottom:-11px;margin-left:-8px;border:8px solid transparent;
  border-top-color:var(--encre);border-bottom:0}
.bulle b.nom{display:block;font:700 clamp(12px, calc(var(--px) * 2.8), 21px)/1.2 var(--titre);letter-spacing:1px;color:#a9441a;margin-bottom:2px}
.bulle.panneau-bois{background:#d9b98a;border-color:#5a3a20;font-style:normal}
.bulle.panneau-bois::after{border-top-color:#5a3a20}
.bulle .suite{display:block;text-align:right;font-size:clamp(12px, calc(var(--px) * 2.3), 18px);opacity:.7;margin-top:2px}
.bulle.cri{font:900 clamp(18px, calc(var(--px) * 4.2), 32px)/1.2 var(--titre);color:#a9441a}
@keyframes apparait{from{opacity:0;transform:translate(-50%,-90%) scale(.9)}}

#titre-salle{position:absolute;left:0;right:0;top:30%;text-align:center;font:900 clamp(22px, calc(var(--px) * 7), 58px)/1.2 var(--titre);
  color:var(--creme);text-shadow:0 2px 0 #000,0 0 12px #000a;letter-spacing:3px;opacity:0;transition:opacity .8s;pointer-events:none}
#titre-salle small{display:block;font:italic 500 clamp(15px, calc(var(--px) * 3.6), 28px)/1.4 var(--texte);letter-spacing:0;opacity:.9}
#titre-salle.on{opacity:1}
#voile{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .25s}
#voile.on{opacity:1}
/* le dernier ecran du chapitre 5, sur la carte de Zeus : « Fin du premier livre », puis l'annonce du Livre II */
#fin-livre{position:absolute;left:0;right:0;bottom:6%;padding:.5em 1em .6em;text-align:center;pointer-events:none;font:900 clamp(22px, calc(var(--px) * 8), 64px)/1.15 var(--titre);
  color:#fff6dc;text-shadow:0 2px 0 #2a120a,0 0 14px #2a120acc;letter-spacing:2px;text-wrap:balance;animation:apparait-livre 1.6s ease-out;
  background:linear-gradient(90deg,#2a120a00,#2a120ad9 20%,#2a120ad9 80%,#2a120a00)}
#fin-livre b{font-weight:900}
#fin-livre small{display:block;margin-top:.3em;font:italic 700 clamp(16px, calc(var(--px) * 4.8), 38px)/1.3 var(--texte);letter-spacing:0;color:#ffe27a;opacity:0;transition:opacity 1.4s}
#fin-livre.deux small{opacity:1}
@keyframes apparait-livre{from{opacity:0;transform:translateY(8px)}}
/* les noms des lieux sur la carte de Zeus (10g-scenes-olympe.js, NOMS_CARTE), ecrits a l'encre sur le parchemin */
#carte-noms{position:absolute;inset:0;pointer-events:none;opacity:0}
#carte-noms span{position:absolute;transform:translate(-50%,-50%);white-space:pre;text-align:center;
  font:italic 700 clamp(9px, calc(var(--px) * 4.4), 30px)/1 var(--texte);color:#4a2c14;text-shadow:0 0 3px #f4e4bc,0 0 2px #f4e4bc}
#carte-noms span.ocean{color:#f4f0e0;text-shadow:0 0 3px #3a5a5a;letter-spacing:1px}
body.portrait #fin-livre{font-size:22px}
body.portrait #fin-livre small{font-size:16px}

/* ---------- Ecrans (accueil, pause, fin) ---------- */
.panneau-plein{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;line-height:1.3;text-align:center;padding:16px;background:radial-gradient(ellipse at 50% 40%,#0000 30%,#000a)}
#accueil{background:linear-gradient(#0000 40%,#000a)}
#pause,#fin{background:#0d0a12d9}
h1{margin:0;font:900 clamp(30px,7vw,64px)/1 var(--titre);color:var(--or);letter-spacing:2px;
  text-shadow:0 3px 0 var(--encre),0 6px 0 #0008}
h2{margin:0;font:900 30px/1.1 var(--titre);color:var(--or);text-shadow:0 3px 0 var(--encre)}
.sous-titre{margin:0 0 6px;font:italic 500 clamp(16px,2.6vw,22px)/1.2 var(--texte);color:var(--creme);text-shadow:0 2px 0 #000}
/* ---------- Fin de chapitre : un vase de terre cuite (frise grecque, grain), police pixel, le laurier, les records, ---------- */
/* la vitrine des objets caches. Romain, 2026-10-06 : l'ancienne stele doree « ressemble trop a Fama » ; la frise et le
   grain sont dessines par decorerFin() (11-jeu.js) */
#fin{padding:calc(var(--px) * 3);background:#0008}
#fin .fin-carte,#fin .fin-carte *{font-family:var(--pixel)}
.fin-carte{display:flex;flex-direction:column;align-items:center;gap:calc(var(--px) * 1.8);max-width:min(calc(var(--px) * 300), 96%);
  max-height:100%;overflow:auto;padding:0 calc(var(--px) * 6);color:#f5dcb0;
  background:var(--grain-fin, none) repeat 0 0/calc(var(--px) * 8) calc(var(--px) * 8),linear-gradient(#4e2418,#2c130b);
  box-shadow:0 0 0 calc(var(--px) * .75) #e8743a,0 0 0 calc(var(--px) * 1.5) #2a120a,0 calc(var(--px) * 2.5) 0 calc(var(--px) * 1.5) #0009}
.fin-carte::before,.fin-carte::after{content:"";align-self:stretch;flex:none;margin:0 calc(var(--px) * -6);height:calc(var(--px) * 10);
  image-rendering:pixelated;background:var(--frise-fin, #e8743a) repeat-x 0 0/calc(var(--px) * 10) calc(var(--px) * 10)}
/* angles en escalier, comme du pixel art */
.fin-laurier,.fin-stat,#fin .bouton{clip-path:polygon(0 calc(var(--px) * 2),var(--px) calc(var(--px) * 2),var(--px) var(--px),calc(var(--px) * 2) var(--px),calc(var(--px) * 2) 0,
  calc(100% - var(--px) * 2) 0,calc(100% - var(--px) * 2) var(--px),calc(100% - var(--px)) var(--px),calc(100% - var(--px)) calc(var(--px) * 2),100% calc(var(--px) * 2),
  100% calc(100% - var(--px) * 2),calc(100% - var(--px)) calc(100% - var(--px) * 2),calc(100% - var(--px)) calc(100% - var(--px)),calc(100% - var(--px) * 2) calc(100% - var(--px)),calc(100% - var(--px) * 2) 100%,
  calc(var(--px) * 2) 100%,calc(var(--px) * 2) calc(100% - var(--px)),var(--px) calc(100% - var(--px)),var(--px) calc(100% - var(--px) * 2),0 calc(100% - var(--px) * 2))}
.fin-chapitre{margin:0;font-size:clamp(18px, calc(var(--px) * 5.2), 40px);line-height:1;color:#f0a060}
#fin h2{font:400 clamp(32px, calc(var(--px) * 12), 90px)/.9 var(--pixel);color:#f5dcb0;text-shadow:0 calc(var(--px) * 1) 0 #c0502a,0 calc(var(--px) * 2) 0 #2a120a}
#fin-texte{margin:0;max-width:calc(var(--px) * 200);font-size:clamp(18px, calc(var(--px) * 5.2), 40px);line-height:1.05;color:#e8c8a8;text-wrap:balance}
.fin-bilan{display:flex;gap:calc(var(--px) * 3);align-items:stretch;justify-content:center;flex-wrap:wrap}
.fin-laurier,.fin-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:calc(var(--px) * 52);padding:calc(var(--px) * 1.6) calc(var(--px) * 3);background:#1e0c06;
  box-shadow:inset 0 0 0 calc(var(--px) * .5) #7a3a22,inset 0 calc(var(--px) * 1) 0 calc(var(--px) * .5) #9a4a28}
.fin-laurier{max-width:calc(var(--px) * 80)}
.fin-laurier canvas{width:calc(var(--px) * 22);height:calc(var(--px) * 15.4);image-rendering:pixelated}
.fin-laurier b{font-weight:400;font-size:clamp(20px, calc(var(--px) * 6), 46px);line-height:1.1;color:#f5dcb0}
.fin-laurier.or b{color:#ffd23f}.fin-laurier.argent b{color:#e8eef4}.fin-laurier.bronze b{color:#f0a070}
.fin-laurier small{font-size:clamp(18px, calc(var(--px) * 4.8), 36px);line-height:1;color:#d8a888}
.fin-laurier .condition{display:block;margin-top:calc(var(--px) * .6);font-size:clamp(16px, calc(var(--px) * 4), 30px);color:#b08868}
.fin-icone{width:calc(var(--px) * 9);height:auto;image-rendering:pixelated}
.fin-carte .libelle{margin:0;font-size:clamp(18px, calc(var(--px) * 5), 38px);line-height:1;color:#f5dcb0}
.fin-stat .valeur{font-weight:400;font-size:clamp(30px, calc(var(--px) * 10), 76px);line-height:.9;color:#f5dcb0}
.fin-stat .record{font-size:clamp(18px, calc(var(--px) * 4.8), 36px);line-height:1;color:#d8a888}
.fin-stat .record.nouveau{color:#2a1408;background:#f5dcb0;padding:0 calc(var(--px) * 1.2);animation:clignote .5s steps(1) infinite alternate}
@keyframes clignote{to{filter:brightness(1.25)}}
.fin-objets{display:flex;flex-direction:column;align-items:center;gap:calc(var(--px) * 1)}
#fin-vitrine{display:flex;gap:calc(var(--px) * 3);flex-wrap:wrap;justify-content:center}
.objet-vitrine{display:flex;flex-direction:column;align-items:center;gap:2px;width:calc(var(--px) * 40)}
.objet-vitrine .socle{display:flex;align-items:center;justify-content:center;width:calc(var(--px) * 20);height:calc(var(--px) * 20);
  border-radius:50%;background:radial-gradient(#7a3a22,#200e08);border:calc(var(--px) * .75) solid #7a3a22}
.objet-vitrine.trouve .socle{border-color:#f5dcb0;background:radial-gradient(#ffd8a8,#4a2216 70%)}
.objet-vitrine canvas{width:calc(var(--px) * 14);height:calc(var(--px) * 14);image-rendering:pixelated}
.objet-vitrine b{font-weight:400;font-size:clamp(18px, calc(var(--px) * 5), 38px);line-height:1;color:#f5dcb0;text-align:center}
.objet-vitrine small{font-size:clamp(16px, calc(var(--px) * 4.4), 32px);line-height:1;color:#d8a888;text-align:center}
.objet-vitrine:not(.trouve) b{color:#d8a888}
.objet-vitrine>div{display:flex;flex-direction:column;align-items:center;gap:2px}
.fin-suivre{margin:0;font-size:clamp(18px, calc(var(--px) * 5.2), 40px);line-height:1;color:#f5dcb0}
.fin-suivre small{display:block;margin-top:.2em;font-size:.8em;color:#ffd23f;text-wrap:balance}
.fin-boutons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
#fin .bouton{font:400 clamp(22px, calc(var(--px) * 6.5), 48px)/1 var(--pixel);color:#2a120a;background:#f5dcb0;border:0;border-radius:0;
  padding:calc(var(--px) * 2) calc(var(--px) * 6);box-shadow:inset 0 calc(var(--px) * -1) 0 #c0502a}
#fin #bouton-suite{background:#e8743a;box-shadow:inset 0 calc(var(--px) * -1) 0 #8a3416}
#fin .bouton:hover{filter:brightness(1.08)}
#fin .bouton:active{transform:translateY(2px);box-shadow:none}
/* ecran bas (telephone couche) : tout tient sans defiler (frise plus fine, phrase sur une ligne, noms des objets a cote) */
@media (max-height:520px){
  #fin{padding:6px}
  .fin-carte{gap:calc(var(--px) * 1);max-width:98%}
  .fin-carte::before,.fin-carte::after{height:calc(var(--px) * 6);background-size:calc(var(--px) * 6) calc(var(--px) * 6)}
  #fin-texte{max-width:none}
  .fin-laurier,.fin-stat{padding:calc(var(--px) * 1) calc(var(--px) * 3)}
  .fin-laurier canvas{width:calc(var(--px) * 16);height:calc(var(--px) * 11.2)}
  .objet-vitrine{flex-direction:row;width:auto;gap:8px;text-align:left}
  .objet-vitrine .socle{width:calc(var(--px) * 16);height:calc(var(--px) * 16);margin-right:2px}
  .objet-vitrine canvas{width:calc(var(--px) * 11);height:calc(var(--px) * 11)}
  .objet-vitrine>div{align-items:flex-start}
  .objet-vitrine b,.objet-vitrine small{text-align:left;white-space:nowrap}
  .fin-objets{flex-direction:row;gap:calc(var(--px) * 3)}
  #fin-vitrine{gap:2px calc(var(--px) * 3)}
  /* la fin du premier livre (chapitre 5) sur une seule ligne : avec 5 objets, le bouton du bas sortait de l'ecran */
  .fin-suivre.livre small{display:inline;margin-left:.5em}
}
.boutons-accueil{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.bouton{font:700 17px/1 var(--titre);color:var(--encre);background:var(--or);border:3px solid var(--encre);border-radius:10px;
  padding:13px 20px;min-height:48px;box-shadow:0 4px 0 var(--encre);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.bouton:hover{background:#f2c95a}
.bouton:active{transform:translateY(3px);box-shadow:0 1px 0 var(--encre)}
.bouton:focus-visible{outline:3px solid var(--creme);outline-offset:2px}
.bouton.petit{font-size:14px;padding:10px 14px;min-height:44px;background:var(--creme)}
#retour-portail{position:absolute;left:12px;top:12px}
#bouton-son{position:absolute;right:12px;top:12px}
.touches{font-size:14px;line-height:1.45;color:var(--creme);max-width:680px;margin-top:6px;background:#1d1626d9;border:2px solid #3a2418;border-radius:10px;padding:8px 14px}
.touches p{margin:2px 0}
/* jamais un mot seul sur la derniere ligne (Romain, 2026-10-07) : les bulles et le tutoriel s'equilibrent en JS
   (10-dialogues.js), les autres textes ici */
#titre-salle,#titre-salle small,.sous-titre,.touches p,.conseil,.fin-carte small,.fin-carte .condition,.fin-stat .record,.objet-vitrine b{text-wrap:balance}
.touches b{color:var(--or)}
#portrait-accueil{width:calc(48px * var(--grand, 3));height:calc(44px * var(--grand, 3));image-rendering:pixelated;margin-bottom:-6px;filter:drop-shadow(0 4px 0 #0006)}
@media (max-height:520px){#portrait-accueil{display:none}}
.conseil{display:none;font-size:14px;font-style:italic;color:var(--creme2);opacity:.85;margin-top:8px}

/* ---------- Commandes tactiles ---------- */
#tactile{display:none}
body.tactile.en-jeu #tactile{display:flex}
#tactile{position:absolute;left:0;right:0;bottom:0;justify-content:space-between;align-items:flex-end;
  padding:10px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  pointer-events:none}
#tactile .groupe{display:flex;gap:10px;align-items:flex-end;pointer-events:auto}
#tactile .groupe.droite{display:grid;grid-template-columns:auto auto;grid-template-areas:"pause boire" "frapper sauter";gap:10px;align-items:end}
.tb{width:64px;height:64px;border-radius:50%;border:3px solid #f5ecd8aa;background:#3a241866;color:var(--creme);
  font:700 15px/1 var(--titre);touch-action:none;padding:0}
.tb.actif{background:#e6b640aa;color:var(--encre)}
.tb.mini{width:46px;height:46px;font-size:14px}
.tb.sauter{width:76px;height:76px;grid-area:sauter}
.tb.frapper{grid-area:frapper;width:70px;height:70px}
.tb.boire{grid-area:boire;font-size:13px}
.tb.pause-tactile{grid-area:pause;justify-self:end}
/* chapitre 3 : le bouton Ruee, au-dessus de Sauter, seulement une fois la ruee apprise */
.tb.ruee{display:none;grid-area:ruee;font-size:13px}
body.a-ruee .tb.ruee{display:block}
body.a-ruee #tactile .groupe.droite{grid-template-columns:auto auto auto;grid-template-areas:"pause boire ruee" ". frapper sauter"}
.vertical{display:flex;flex-direction:column;gap:8px}
/* Telephone en portrait : les commandes passent sous le jeu */
body.portrait #cadre{justify-content:flex-start;padding-top:env(safe-area-inset-top)}
body.portrait #tactile{position:relative;flex:1;align-items:center;padding-top:16px}
body.portrait .tb{width:72px;height:72px}
body.portrait .tb.sauter{width:84px;height:84px}
body.portrait .tb.frapper{width:78px;height:78px}
body.portrait .tb.mini{width:52px;height:52px}
body.portrait .bulle{font-size:14px;padding:4px 8px 5px;border-width:2px}
body.portrait #tuto{font-size:14px;top:2%;max-width:92%}
body.portrait .touches{display:none}
/* en portrait, les ecrans (accueil, pause, fin) prennent tout le telephone : le jeu en haut, le texte dessous */
body.portrait .panneau-plein{position:fixed;inset:0;justify-content:flex-start;padding-top:calc(var(--h-scene) + 28px);
  background:linear-gradient(#0000 0 var(--h-scene),var(--nuit) var(--h-scene))}
body.portrait #pause,body.portrait #fin{background:#0d0a12f2;justify-content:center;padding-top:16px}
/* telephone debout : le laurier sur toute la largeur, temps et chutes dessous, des dessins a taille de doigt */
body.portrait .fin-carte::before,body.portrait .fin-carte::after{height:20px;background-size:20px 20px}
body.portrait .fin-bilan{gap:8px;align-self:stretch}
body.portrait .fin-laurier{flex-basis:100%;max-width:none;padding:8px}
body.portrait .fin-stat{flex:1;min-width:0;padding:8px}
body.portrait .fin-laurier canvas{width:66px;height:46px}
body.portrait .fin-icone{width:27px}
body.portrait .objet-vitrine{width:auto;min-width:104px}
body.portrait .objet-vitrine .socle{width:50px;height:50px;border-width:2px}
body.portrait .objet-vitrine canvas{width:36px;height:36px}
body.portrait .fin-suivre.livre small{display:inline;margin-left:.4em}
body.portrait .conseil{display:block}
body.portrait h1{font-size:30px}
body.portrait .bouton{font-size:15px;padding:11px 16px}
body.portrait #titre-salle{font-size:20px}
body.portrait #titre-salle small{font-size:13px}
@media (max-height:420px){
  .touches{display:none}
  .bulle{font-size:14px;padding:4px 9px 5px}
}

/* ---------- Accueil, « Chapitres », « Le carnet » : la terre cuite de l'ecran de fin (2026-10-08, maquette validee par
   Romain : maquettes\accueil.html). Police pixel, boutons creme ou orange a angles en escalier, cartes brun-rouge. ---------- */
.terre,.terre *{font-family:var(--pixel)}
.bt{display:inline-flex;align-items:center;justify-content:center;gap:.3em;min-height:44px;cursor:pointer;text-decoration:none;white-space:nowrap;
  font:400 clamp(20px, calc(var(--px) * 8.5), 40px)/1 var(--pixel);color:#2a120a;background:#f5dcb0;border:0;border-radius:0;
  padding:calc(var(--px) * 2.5) calc(var(--px) * 6.5) calc(var(--px) * 3);box-shadow:inset 0 calc(var(--px) * -1) 0 #c0502a;
  clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,
    100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,
    8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px))}
.bt:hover{filter:brightness(1.08)}
.bt:active{transform:translateY(2px)}
.bt:focus-visible{outline:3px solid #fff3e0;outline-offset:-6px}
.bt.orange{background:#e8743a;color:#fff3e0;box-shadow:inset 0 calc(var(--px) * -1) 0 #9a3a14}
.bt.grand{font-size:clamp(26px, calc(var(--px) * 11.5), 54px);padding:calc(var(--px) * 3.5) calc(var(--px) * 10) calc(var(--px) * 4)}
.bt.petit{font-size:clamp(18px, calc(var(--px) * 6.5), 30px);padding:calc(var(--px) * 2) calc(var(--px) * 4.5) calc(var(--px) * 2.5)}
.bt.fonce{background:#7a3a22;color:#f5dcb0;box-shadow:inset 0 calc(var(--px) * -1) 0 #4e2418}
.bt small{font-size:.7em;opacity:.9}

/* l'accueil */
#accueil h1{font:400 clamp(48px, calc(var(--px) * 33), 140px)/.8 var(--pixel);color:#f5dcb0;letter-spacing:2px;
  text-shadow:0 calc(var(--px) * 1) 0 #c0502a,0 calc(var(--px) * 2) 0 #2a120a,0 0 30px #0008}
#accueil .sous-titre{font:400 clamp(20px, calc(var(--px) * 9.5), 40px)/1 var(--pixel);color:#ffe2b8;text-shadow:0 3px 0 #2a120a;margin:4px 0 0}
.menu-accueil{display:flex;flex-direction:column;align-items:center;gap:calc(var(--px) * 3);margin-top:calc(var(--px) * 5)}
.menu-accueil .ligne{display:flex;gap:calc(var(--px) * 3)}
.menu-accueil .ligne .bt{min-width:calc(var(--px) * 62)}
#progres-accueil{display:flex;align-items:center;gap:.35em;margin:calc(var(--px) * 3) 0 0;font-size:clamp(17px, calc(var(--px) * 7), 30px);line-height:1;
  color:#ffe2b8;text-shadow:0 2px 0 #000}
#progres-accueil .point{opacity:.5;margin:0 .3em}
/* liens du site, discrets, en bas de l'accueil ; debout, sous le reste */
#accueil .liens-site{position:absolute;left:0;right:0;bottom:6px;margin:0;font:500 14px/1.4 var(--texte);color:#ffe2b8cc;
  text-shadow:0 1px 0 #000}
#accueil .liens-site a{color:#ffe2b8;padding:4px 2px}
body.portrait #accueil .liens-site{position:static;margin-top:auto;padding-top:16px}
.terre canvas.icone{image-rendering:pixelated;vertical-align:middle;flex:none}

/* les cartes de terre cuite (comme le vase de l'ecran de fin) */
#chapitres,#carnet{background:#000a;padding:calc(var(--px) * 3)}
.carte-terre{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(var(--px) * 3);width:min(calc(var(--px) * 296), 100%);
  height:100%;max-height:calc(var(--px) * 170);overflow:auto;padding:0 calc(var(--px) * 7);color:#f5dcb0;
  background:var(--grain-fin, none) repeat 0 0/calc(var(--px) * 8) calc(var(--px) * 8),linear-gradient(#4e2418,#2c130b);
  box-shadow:0 0 0 calc(var(--px) * .75) #e8743a,0 0 0 calc(var(--px) * 1.5) #2a120a,0 calc(var(--px) * 2.5) 0 calc(var(--px) * 1.5) #0009}
.carte-terre::before,.carte-terre::after{content:"";align-self:stretch;flex:none;margin:0 calc(var(--px) * -7);height:calc(var(--px) * 10);
  image-rendering:pixelated;background:var(--frise-fin, #e8743a) repeat-x 0 0/calc(var(--px) * 10) calc(var(--px) * 10)}
.carte-terre::after{margin-top:auto}
.carte-terre h2{margin:-2px 0 0;font:400 clamp(30px, calc(var(--px) * 18), 76px)/.9 var(--pixel);color:#f5dcb0;
  text-shadow:0 calc(var(--px) * 1) 0 #c0502a,0 calc(var(--px) * 2) 0 #2a120a}
.carte-terre .retour{position:absolute;left:calc(var(--px) * 7);top:calc(var(--px) * 13)}
.carte-terre h2{min-height:44px;display:flex;align-items:center}
.carte-terre .note{margin:0;max-width:calc(var(--px) * 230);font-size:clamp(16px, calc(var(--px) * 6.5), 28px);line-height:1.05;color:#d8a888;text-align:center;text-wrap:balance}

/* « Chapitres » : une carte par chapitre */
/* (a la ligne quand les cartes ne tiennent plus : avec le chapitre 4, cinq cartes depassaient et celles des bords etaient
   coupees, 2026-10-08) */
#liste-chapitres{display:flex;flex-wrap:wrap;gap:calc(var(--px) * 4.5);align-items:stretch;justify-content:center}
.ch{display:flex;flex-direction:column;align-items:center;gap:calc(var(--px) * 1.5);width:calc(var(--px) * 65);padding:calc(var(--px) * 3);background:#1e0c06;
  box-shadow:inset 0 0 0 2px #7a3a22,inset 0 4px 0 2px #9a4a28}
.ch img,.ch .vide{width:100%;aspect-ratio:240/101;object-fit:cover;box-shadow:0 0 0 2px #7a3a22}
.ch .vide{display:flex;align-items:center;justify-content:center;font-size:calc(var(--px) * 14);color:#7a3a22;background:#140804}
.ch .num{font-size:clamp(15px, calc(var(--px) * 6), 26px);color:#f0a060;line-height:1;margin-top:calc(var(--px) * 1)}
.ch b{font-weight:400;font-size:clamp(18px, calc(var(--px) * 8.5), 36px);line-height:.95;text-align:center;min-height:2em;display:flex;align-items:center;text-wrap:balance}
.ch .ligne{display:flex;align-items:center;gap:.35em;font-size:clamp(15px, calc(var(--px) * 6), 26px);color:#d8a888;line-height:1;text-align:center;text-wrap:balance}
.ch .ligne.or{color:#ffd23f}.ch .ligne.argent{color:#e8eef4}.ch .ligne.bronze{color:#f0a070}
.ch .bt{margin-top:auto;width:100%}
/* « Rejouer » et « Heroique » l'un sous l'autre ; le record heroique sur sa ligne (BIBLE § 14) */
.ch .boutons{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:calc(var(--px) * 1.5)}
.ch .boutons .bt{margin-top:0}
.ch .ligne.heroique{color:#ff9a8a}
/* le choix du mode d'une nouvelle partie */
#choix-mode .note-mode{margin:0;max-width:calc(var(--px) * 170);font-size:clamp(16px, calc(var(--px) * 6), 26px);line-height:1.1;color:#ffe2b8;
  text-align:center;text-wrap:balance;text-shadow:0 2px 0 #000}
.ch.ferme{opacity:.6}
.ch.livre{opacity:.85}.ch.livre .vide{color:#e6b640}.ch.livre .ligne{color:#ffd23f}

/* « Le carnet » : trois onglets */
.onglets{display:flex;gap:calc(var(--px) * 2)}
.onglets .bt{font-size:clamp(17px, calc(var(--px) * 7.5), 32px);padding:calc(var(--px) * 2) calc(var(--px) * 5.5) calc(var(--px) * 2.5)}
.onglets .bt.actif{background:#e8743a;color:#fff3e0;box-shadow:inset 0 calc(var(--px) * -1) 0 #9a3a14}
#carnet-histoire{display:flex;flex-direction:column;gap:calc(var(--px) * 3);width:100%}
.recit{display:flex;gap:calc(var(--px) * 4.5);align-items:center;padding:calc(var(--px) * 2.5) calc(var(--px) * 3.5);background:#1e0c06;box-shadow:inset 0 0 0 2px #7a3a22}
.recit img{width:calc(var(--px) * 50);aspect-ratio:240/101;object-fit:cover;flex:none;box-shadow:0 0 0 2px #7a3a22}
.recit h3{margin:0 0 calc(var(--px) * 1);font:400 clamp(17px, calc(var(--px) * 7.5), 32px)/1 var(--pixel);color:#f0a060;text-align:left}
.recit p{margin:0;font-size:clamp(16px, calc(var(--px) * 6.3), 27px);line-height:1.02;color:#ecd0b0;text-align:left;text-wrap:pretty}
#carnet-objets{display:flex;gap:calc(var(--px) * 6);justify-content:center;flex-wrap:wrap}
.objet{display:flex;flex-direction:column;align-items:center;gap:calc(var(--px) * 2);width:calc(var(--px) * 82);padding:calc(var(--px) * 4) calc(var(--px) * 3.5);
  background:#1e0c06;box-shadow:inset 0 0 0 2px #7a3a22}
.objet .socle{display:flex;align-items:center;justify-content:center;width:calc(var(--px) * 33);height:calc(var(--px) * 33);border-radius:50%;
  background:radial-gradient(#ffd8a8,#4a2216 70%);border:calc(var(--px) * 1) solid #f5dcb0}
.objet.non .socle{background:radial-gradient(#7a3a22,#200e08);border-color:#7a3a22}
.objet .socle canvas{width:calc(var(--px) * 21);height:calc(var(--px) * 21);image-rendering:pixelated}
.objet b{font-weight:400;font-size:clamp(18px, calc(var(--px) * 9), 38px);line-height:1;text-align:center}
.objet.non b{color:#d8a888}
.objet .ou{font-size:clamp(15px, calc(var(--px) * 6), 26px);color:#f0a060;line-height:1;text-align:center}
.objet .q,.objet .indice{font-size:clamp(16px, calc(var(--px) * 6.5), 27px);line-height:1.02;color:#ecd0b0;text-align:center;text-wrap:balance}
.objet .indice{color:#d8a888}
.objet .indice i{font-style:normal;color:#ffd23f}
.commandes{max-width:calc(var(--px) * 250);padding:calc(var(--px) * 3) calc(var(--px) * 5);background:#1e0c06;box-shadow:inset 0 0 0 2px #7a3a22}
.commandes p{margin:calc(var(--px) * 1.5) 0;font-size:clamp(16px, calc(var(--px) * 6.8), 29px);line-height:1.05;color:#ecd0b0;text-wrap:balance}
.commandes b{font-weight:400;color:#ffd23f}
.commandes .manette{color:#d8a888}

/* telephone debout : les cartes l'une sous l'autre, en deux colonnes */
body.portrait #chapitres,body.portrait #carnet{padding:8px;padding-top:8px;justify-content:center}
body.portrait .carte-terre{max-height:none;padding:0 12px;gap:10px}
body.portrait .carte-terre::before,body.portrait .carte-terre::after{height:20px;margin-left:-12px;margin-right:-12px;background-size:20px 20px}
body.portrait .carte-terre .retour{position:static;align-self:flex-start;margin-bottom:-6px}
body.portrait #liste-chapitres{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
body.portrait .ch{width:auto;padding:6px}
body.portrait .recit{flex-direction:column;align-items:flex-start;gap:6px}
body.portrait .recit img{width:100%}
body.portrait .objet{width:100%;display:grid;grid-template-columns:64px 1fr;column-gap:12px;row-gap:3px;align-items:center;padding:10px}
body.portrait .objet .socle{grid-row:span 3}
body.portrait .objet b,body.portrait .objet .ou,body.portrait .objet .q,body.portrait .objet .indice{text-align:left}
body.portrait .objet .socle{width:60px;height:60px;border-width:2px}
body.portrait .objet .socle canvas{width:42px;height:42px}
body.portrait .onglets .bt{padding:8px 10px}
body.portrait #accueil h1{font-size:56px}

/* ---------- Le Pantheon (2026-10-09, maquette validee par Romain : maquettes\pantheon.html) : les 10 meilleurs temps de
   chaque chapitre, sa propre place, le nom de heros compose dans trois listes, la ligne de l'ecran de fin ---------- */
.bt canvas.temple{width:.86em;height:.8em;image-rendering:pixelated;flex:none}
#pantheon,#nom-heros{background:#000a;padding:calc(var(--px) * 3)}
#pantheon-titre{gap:calc(var(--px) * 4.5)}
#pantheon-titre canvas.temple{width:max(32px, calc(var(--px) * 15));height:max(30px, calc(var(--px) * 14));image-rendering:pixelated;filter:drop-shadow(0 calc(var(--px) * 1) 0 #2a120a)}
.tableau-pantheon{width:100%;display:flex;flex-direction:column;gap:calc(var(--px) * .75);text-align:left}
.tableau-pantheon .attente{margin:calc(var(--px) * 6) 0;font-size:clamp(16px, calc(var(--px) * 6.75), 34px);line-height:1.05;color:#ecd0b0;text-align:center;text-wrap:balance}
.rang{display:grid;grid-template-columns:calc(var(--px) * 19) calc(var(--px) * 13) 1fr auto calc(var(--px) * 30);column-gap:calc(var(--px) * 3);align-items:center;
  min-height:calc(var(--px) * 7.75);padding:calc(var(--px) * .5) calc(var(--px) * 3.5);font-size:clamp(15px, calc(var(--px) * 7), 40px);line-height:1;
  background:#1e0c06;box-shadow:inset 0 0 0 2px #5a2a18}
.rang.tete{background:none;box-shadow:none;min-height:calc(var(--px) * 6);font-size:clamp(14px, calc(var(--px) * 5.5), 32px);color:#f0a060}
.rang .place{color:#f0a060}
.rang .place sup{font-size:.6em;line-height:0}
.rang.p1 .place,.rang.p1 .nom{color:#ffd23f}
.rang .nom{text-wrap:balance}
.rang .nom small{font-size:.82em;color:#c89878;white-space:nowrap}
.rang .temps,.rang .chutes{text-align:right;white-space:nowrap}
.rang .chutes{color:#d8a888}
.rang.tete .chutes,.rang.tete .temps{color:#f0a060}
.rang .lau{display:flex;align-items:center}
.rang .lau canvas{width:calc(var(--px) * 7.5);height:calc(var(--px) * 5.25);image-rendering:pixelated}
.rang.moi{background:#5a2412;box-shadow:inset 0 0 0 2px #e8743a}
.rang.moi .nom{color:#fff3e0}
.tableau-pantheon .ecart{height:calc(var(--px) * 3.5);text-align:center;font-size:clamp(14px, calc(var(--px) * 5.5), 30px);line-height:calc(var(--px) * 2.5);color:#9a6a50}
.pied-pantheon{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:calc(var(--px) * 2) calc(var(--px) * 4.5);margin:0;
  font-size:clamp(16px, calc(var(--px) * 6.75), 36px);line-height:1.05;color:#ecd0b0;text-align:center}
.pied-pantheon span{text-wrap:balance}

/* « Votre nom de heros » */
.apercu-nom{display:flex;align-items:center;gap:calc(var(--px) * 4);padding:calc(var(--px) * 2.5) calc(var(--px) * 6.5);background:#1e0c06;box-shadow:inset 0 0 0 2px #e8743a}
.apercu-nom canvas{width:calc(var(--px) * 18);height:calc(var(--px) * 16.5);image-rendering:pixelated;flex:none}
/* la case du nom libre (2026-10-10) : 10 caracteres au plus, dans la police du jeu */
#nom-case{width:calc(var(--px) * 92);max-width:100%;min-width:0;min-height:44px;box-sizing:border-box;margin:0;border:0;border-radius:0;
  padding:calc(var(--px) * 1.5) calc(var(--px) * 3.5);font:400 clamp(22px, calc(var(--px) * 11.5), 60px)/1 var(--pixel);color:#fff3e0;
  background:#140804;box-shadow:inset 0 0 0 2px #7a3a22;-webkit-user-select:text;user-select:text;caret-color:#ffd23f}
#nom-case::placeholder{color:#7a4a38;opacity:1}
#nom-case:focus{outline:0;box-shadow:inset 0 0 0 2px #ffd23f}
.avertissement-nom{margin:0;font-size:clamp(16px, calc(var(--px) * 6.5), 34px);line-height:1.05;color:#ffd23f;text-align:center;text-wrap:balance}
.actions-nom{display:flex;gap:calc(var(--px) * 3.5);flex-wrap:wrap;justify-content:center;margin-top:calc(var(--px) * 1.5)}
.bt:disabled{filter:grayscale(.6) brightness(.8);cursor:default}
#nom-note{font-size:clamp(15px, calc(var(--px) * 5.5), 28px)}
.message-nom{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:calc(var(--px) * 2) calc(var(--px) * 4);margin:0;max-width:calc(var(--px) * 250);
  font-size:clamp(16px, calc(var(--px) * 6.5), 34px);line-height:1.05;color:#ffd23f;text-align:center}
.message-nom span{text-wrap:balance}

/* la ligne du Pantheon sur l'ecran de fin */
.fin-pantheon{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:calc(var(--px) * 1) calc(var(--px) * 3);padding:calc(var(--px) * 1.5) calc(var(--px) * 4);
  background:#1e0c06;box-shadow:inset 0 0 0 2px #7a3a22;font-size:clamp(16px, calc(var(--px) * 6), 44px);line-height:1;color:#ecd0b0;text-align:center}
.fin-pantheon canvas.temple{width:max(22px, calc(var(--px) * 7));height:max(20px, calc(var(--px) * 6.5));image-rendering:pixelated;flex:none}
.fin-pantheon b{font-weight:400;color:#ffd23f}
.fin-pantheon .bt{min-height:0;font-size:clamp(16px, calc(var(--px) * 5.5), 40px);padding:calc(var(--px) * 1) calc(var(--px) * 3.5) calc(var(--px) * 1.5)}

/* telephone debout : le tableau sur deux lignes par heros (le temps au-dessus des chutes), les listes du nom en colonne */
body.portrait #pantheon,body.portrait #nom-heros{padding:8px;justify-content:center}
body.portrait .menu-accueil .ligne{flex-wrap:wrap;justify-content:center}
body.portrait .rang{grid-template-columns:2.3em 1.5em 1fr auto;grid-template-areas:"place lau nom temps" "place lau nom chutes";column-gap:8px;padding:5px 8px}
body.portrait .rang .place{grid-area:place}
body.portrait .rang .lau{grid-area:lau}
body.portrait .rang .nom{grid-area:nom}
body.portrait .rang .temps{grid-area:temps}
body.portrait .rang .chutes{grid-area:chutes;font-size:.85em}
body.portrait .rang .lau canvas{width:24px;height:17px}
body.portrait .rang.tete{display:none}
body.portrait .apercu-nom{padding:8px 12px;gap:10px}
body.portrait .apercu-nom canvas{width:48px;height:44px}
body.portrait .apercu-nom{align-self:stretch}
body.portrait #nom-case{flex:1}
body.portrait .fin-pantheon .bt{min-height:44px}
/* Pantheon : Normal / Heroique en haut a droite, en face de « Retour » (BIBLE § 14) */
.carte-terre .modes{position:absolute;right:calc(var(--px) * 7);top:calc(var(--px) * 13);display:flex;gap:calc(var(--px) * 1.5)}
#pantheon.heroique h2{color:#ffd0c4}
body.portrait .carte-terre .modes{top:30px;right:12px}     /* (a la hauteur de « Retour » : frise de 20 px + 10 px) */
@media (max-height:520px){#pantheon .carte-terre .modes{top:calc(var(--px) * 8)}}
body.portrait #pantheon .onglets{align-self:stretch;gap:4px;flex-wrap:wrap}
body.portrait #pantheon .onglets .bt{flex:1 1 30%;font-size:15px;padding:8px 2px}
body.portrait .fin-pantheon{padding:8px 10px;gap:6px 10px}
body.portrait .fin-pantheon .bt{padding:8px 18px}
/* telephone couche : le Pantheon et le nom plus serres (frises fines, lignes basses) ; sous 420 px de haut, la note du
   bas du nom s'efface (la phrase du haut reste) */
@media (max-height:520px){
  #pantheon .carte-terre,#nom-heros .carte-terre{gap:calc(var(--px) * 1.5)}
  #pantheon .carte-terre::before,#pantheon .carte-terre::after,#nom-heros .carte-terre::before,#nom-heros .carte-terre::after{
    height:calc(var(--px) * 6);background-size:calc(var(--px) * 6) calc(var(--px) * 6)}
  #pantheon .carte-terre .retour{top:calc(var(--px) * 8)}
  .tableau-pantheon{gap:2px}
  .rang{min-height:0;padding:1px calc(var(--px) * 3.5)}
  .rang.tete{min-height:0}
  .apercu-nom{padding:4px calc(var(--px) * 6.5)}
}
@media (max-height:420px){
  #nom-heros{padding:4px}
  #nom-heros .carte-terre{gap:3px}
  #nom-heros h2{font-size:28px;min-height:0}
  .apercu-nom{padding:2px 16px}
  .apercu-nom canvas{width:33px;height:30px}
}