@import url('./atelier-economie.css?v=4a02f22372');
:root{
  --encre:#241f1a; --encre-doux:#6b6055; --creme:#f7f3ea; --panneau:rgba(247,243,234,.9);
  --bord:rgba(36,31,26,.12); --accent:#3f7f4a; --alerte:#c0532f; --or:#c99a2e;
  --ombre:0 6px 28px rgba(30,24,18,.16), 0 1px 2px rgba(30,24,18,.1);
  --r:14px;
  --mouvement:cubic-bezier(.22,.8,.22,1); --mouvement-vif:cubic-bezier(.2,.9,.25,1);
  --duree-courte:160ms; --duree-panneau:320ms;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#cfe0ee;overscroll-behavior:none}
body{font:15px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--encre)}
/* `touch-action:none` est ce qui rend la vallée jouable au doigt : sans lui le
   navigateur garde le pincement pour zoomer sa propre page, interrompt le
   glissement par un pointercancel, et la caméra ne reçoit jamais le geste. */
#vue{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:url('/curseurs/bonnet.svg') 4 3,grab}
/* Le curseur est la marque : le bonnet, pointe en guise de flèche. Cliquable =
   le nain sort de sous son bonnet (tête, nez, barbe) ; glissement = le bonnet
   enfoncé. Même hotspot (la pointe) pour les trois, repli natif sinon. */
#vue[data-curseur="pointer"]{cursor:url('/curseurs/nain.svg') 4 3,pointer}
#vue[data-curseur="grabbing"]{cursor:url('/curseurs/bonnet-tenu.svg') 4 3,grabbing}

#barre{
  position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:22px;
  padding:12px 18px;background:linear-gradient(180deg,rgba(247,243,234,.94),rgba(247,243,234,.72) 70%,transparent);
  backdrop-filter:blur(8px);pointer-events:none;z-index:5
}
.marque{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.015em;font-size:18px}
.marque svg{width:26px;height:26px}
.horloge{display:flex;flex-direction:column;line-height:1.15}
.horloge b{font-variant-numeric:tabular-nums;font-size:14px}
.horloge span{font-size:12px;color:var(--encre-doux);font-variant-numeric:tabular-nums}
.compteurs{display:flex;gap:16px;margin-left:auto;font-size:13px;color:var(--encre-doux)}
.compteurs b{color:var(--encre);font-variant-numeric:tabular-nums}
.compteurs .fps{opacity:.5}

#panneau-gauche{position:fixed;left:18px;top:66px;width:326px;display:flex;flex-direction:column;gap:12px;z-index:6}
.chercher{position:relative}
#recherche{
  width:100%;padding:11px 14px;border-radius:var(--r);border:1px solid var(--bord);
  background:var(--panneau);backdrop-filter:blur(10px);box-shadow:var(--ombre);font:inherit;color:inherit
}
#recherche:focus{outline:2px solid var(--accent);outline-offset:1px}
#resultats{
  position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:300px;overflow:auto;
  background:var(--panneau);backdrop-filter:blur(10px);border:1px solid var(--bord);
  border-radius:var(--r);box-shadow:var(--ombre);padding:5px
}
.resultat{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-radius:9px;
  background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.resultat:hover{background:rgba(36,31,26,.06)}
.pastille{width:8px;height:8px;border-radius:99px;background:var(--accent);flex:none}
.resultat .nom{font-weight:600}
.resultat .meta{margin-left:auto;font-size:12px;color:var(--encre-doux)}

#fiche{
  position:relative;background:var(--panneau);backdrop-filter:blur(10px);border:1px solid var(--bord);
  border-radius:var(--r);box-shadow:var(--ombre);padding:16px 16px 14px
}
#fermer-fiche{position:absolute;top:8px;right:10px;border:0;background:none;font-size:20px;line-height:1;
  color:var(--encre-doux);cursor:pointer}
#fiche h2{margin:0;font-size:19px;letter-spacing:-.02em}
#fiche h2 em{font-style:normal;color:var(--encre-doux);font-weight:600}
.sous{margin:2px 0 8px;font-size:12.5px;color:var(--encre-doux)}
.action{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--accent)}
.action[data-stase="1"]{color:var(--or)}
.traits{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.trait{font-size:11.5px;padding:3px 8px;border-radius:99px;background:rgba(36,31,26,.07)}
.besoins{display:grid;gap:5px;margin-bottom:11px}
.besoin{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:8px;font-size:11.5px;color:var(--encre-doux)}
.jauge{height:6px;border-radius:99px;background:rgba(36,31,26,.1);overflow:hidden}
.rempli{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .3s}
.rempli[data-bas="1"]{background:var(--alerte)}
.famille{display:flex;flex-direction:column;gap:3px}
.lien-nain{border:0;background:none;padding:2px 0;font:inherit;font-size:12.5px;color:var(--encre);
  text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:var(--bord)}
.lien-nain:hover{text-decoration-color:var(--accent)}
.vide{font-size:12.5px;color:var(--encre-doux)}
.decision{margin-top:12px;padding-top:12px;border-top:1px dashed var(--bord)}
.decision p{margin:0 0 9px;font-size:13.5px;font-weight:600}
.boutons{display:flex;gap:8px}
.f-dorures{margin:4px 0 8px;font-size:12px;color:#edcf80;font-weight:650}
#fiche .titret a, #aide-visite a, .journal-intro a { color: inherit; text-underline-offset: .2em; }
#fiche .titret a { display: inline-block; padding-inline: .35em; }
.passer-la-main{margin-top:6px}
.passer-la-main.armee{background:var(--alerte);color:#fff;border-color:transparent}
.boutons.plusieurs{flex-wrap:wrap}
.boutons.plusieurs button{flex:1 1 45%;font-size:12.5px;padding:8px 6px}
.boutons.plusieurs #f-oui{background:#fff;color:inherit;border-color:var(--bord)}
.boutons button{flex:1;padding:9px;border:1px solid var(--bord);border-radius:9px;background:#fff;
  font:inherit;font-weight:600;cursor:pointer}
#f-oui{background:var(--accent);color:#fff;border-color:transparent}
.decision small{display:block;margin-top:7px;font-size:11px;color:var(--encre-doux)}
.decision .decision-erreur{margin:7px 0 0;color:var(--alerte);font-size:11px;font-weight:650}

#panneau-droit{position:fixed;right:18px;top:66px;width:310px;max-height:calc(100vh - 120px);
  display:flex;flex-direction:column;background:var(--panneau);backdrop-filter:blur(10px);
  border:1px solid var(--bord);border-radius:var(--r);box-shadow:var(--ombre);overflow:hidden;z-index:5}
#panneau-droit h2{margin:0;padding:12px 15px 9px;font-size:12px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--encre-doux);border-bottom:1px solid var(--bord)}
#fil{list-style:none;margin:0;padding:7px;overflow:auto;flex:1}
.evt{display:flex;gap:8px;padding:6px 8px;border-radius:8px;font-size:12.5px;line-height:1.4}
.evt:nth-child(odd){background:rgba(36,31,26,.035)}
.puce{width:6px;height:6px;border-radius:99px;background:var(--encre-doux);flex:none;margin-top:6px}
.evt-mariage .puce{background:#c9569b}
.evt-naissance .puce{background:var(--accent)}
.evt-mort .puce{background:#3b3733}
.evt-accident .puce{background:var(--alerte)}
.evt-chantier_fin .puce{background:var(--or)}
.justice-dossier{margin:12px 0;padding:10px 0 12px 12px;border-left:2px solid var(--or)}
.justice-dossier h4{margin:3px 0 6px;font:700 17px/1.2 Georgia,"Times New Roman",serif;overflow-wrap:anywhere}
.justice-reference{margin:0;font:11px/1.4 ui-monospace,monospace;letter-spacing:.04em;color:var(--or)}
.justice-etat{margin:4px 0 8px;font-size:12px}
.justice-pieces summary{cursor:pointer;font-size:12px;text-decoration:underline;text-underline-offset:3px}
.justice-pieces p{margin:7px 0}
.justice-action{display:block;width:100%;min-height:40px;margin-top:8px;padding:9px 12px;border:1px solid rgba(244,231,180,.4);border-radius:8px;background:rgba(244,231,180,.1);color:#fff4d7;font:600 12px/1.35 ui-sans-serif,system-ui,sans-serif;text-align:left;white-space:normal;cursor:pointer}
.justice-action:hover{background:rgba(244,231,180,.2)}
.justice-action:disabled{opacity:.55;cursor:wait}
.justice-action:focus-visible,.justice-pieces summary:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.justice-retour:empty{display:none}
.evt-decision_ouverte .puce{background:var(--or)}
/* Les grands moments de la mairie et de l'hôtel des Esprits se repèrent d'un
   coup d'œil dans le fil : fête dorée, corvée cuivrée, verdicts, regain. */
.evt-fete_decretee .puce{background:#f2ce7d;box-shadow:0 0 6px #f2ce7d}
.evt-corvee_decretee .puce{background:#c88a4e}
.evt-proposition_adoptee .puce{background:#8eb06c}
.evt-proposition_rejetee .puce{background:#e06b4c}
.evt-conseil_decision .puce{background:#9db8d2}
.evt-priere_regain .puce{background:#cdb8e8}
.evt-resurrection .puce{background:#cdb8e8;box-shadow:0 0 7px #cdb8e8}
.evt-batiment_detruit .puce{background:var(--alerte);box-shadow:0 0 6px var(--alerte)}
.evt-fete_decretee .txt,.evt-resurrection .txt{color:#fff3d1;font-weight:600}

#cta{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);text-align:center;z-index:5}
#cta p{margin:0 0 8px;font-size:13px;color:var(--encre);text-shadow:0 1px 8px rgba(247,243,234,.9)}
#cta button{padding:12px 26px;border:0;border-radius:99px;background:var(--encre);color:var(--creme);
  font:inherit;font-weight:650;letter-spacing:-.01em;cursor:pointer;box-shadow:var(--ombre)}
#cta button:hover{background:#3a322a}

@media (max-width:900px){
  #panneau-droit{display:none}
  #panneau-gauche{width:calc(100vw - 36px)}
  .compteurs span:nth-child(n+3){display:none}
}

#fiche-bat,#fiche-bete{
  position:relative;background:var(--panneau);backdrop-filter:blur(10px);border:1px solid var(--bord);
  border-radius:var(--r);box-shadow:var(--ombre);padding:16px 16px 14px
}
#fermer-bat,#fermer-bete{position:absolute;top:8px;right:10px;border:0;background:none;font-size:20px;line-height:1;
  color:var(--encre-doux);cursor:pointer}
#fiche-bat h2,#fiche-bete h2{margin:0;font-size:19px;letter-spacing:-.02em}
.bt-utilite{margin:10px 0 0;font-size:12.5px;color:#d5dfc8}
.titret{margin:12px 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--encre-doux)}
.fiche-succes summary{cursor:pointer;min-height:44px;display:list-item;align-content:center;padding:10px 0;font-size:13px}
.fiche-succes summary:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.fiche-succes>p{margin:0 0 10px}
/* Devant une mairie, la première question est qui la tient : la réponse se lit
   avant l'entretien du bâtiment, sur une seule ligne. Le rôle en petites
   capitales, le nom cliquable, le village en retrait. */
/* Le seul réglage de la fiche : il se lit comme une phrase, pas comme un
   formulaire, et il est décoché tant que son propriétaire n'a rien décidé. */
.f-gardien{display:flex;align-items:flex-start;gap:9px;margin-top:11px;color:#d5dfc8;font-size:11.5px;line-height:1.4;cursor:pointer}
.f-gardien input{flex:none;width:15px;height:15px;margin:1px 0 0;accent-color:#e2c678;cursor:pointer}
.f-gardien:hover{color:#eef3e4}
.b-maire{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:0 0 10px;padding:8px 10px;border-left:2px solid #e2c678;border-radius:0 6px 6px 0;background:rgba(226,198,120,.1)}
.b-maire-role{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#e2c678}
.b-maire .lien-nain{font-size:14px;font-weight:600}
.b-maire-village{font-size:11.5px;color:#c6d3b6}
.b-conseil{margin:0 0 10px;padding:8px 10px;border-left:2px solid #9db8d2;border-radius:0 6px 6px 0;background:rgba(157,184,210,.08)}
.b-conseil .titret{margin:0 0 4px}
.b-conseil-question{margin:0 0 2px;font-size:13px}
.b-conseil-tendance{margin:0 0 6px;font-size:11.5px;color:#9db8d2}
.b-conseil-urne{margin:0 0 7px;font-size:10.5px;color:#7d93aa;font-style:italic}
/* La séance, telle qu'on la lit en poussant la porte de la mairie. */
#d-seance{margin:0 0 12px;padding:10px 11px;border-radius:8px;background:rgba(28,42,58,.55);border:1px solid rgba(120,158,196,.22)}
#d-seance .titret{margin:0 0 6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8fb0cd}
.d-seance-question{margin:0 0 4px;font-size:12.5px;color:#e6eef6;line-height:1.35}
.d-seance-detail{margin:0 0 8px;font-size:11px;color:#9db8d2;line-height:1.35}
.d-seance-barre{height:6px;border-radius:3px;overflow:hidden;background:#8d4a4a;margin:0 0 5px}
.d-seance-barre i{display:block;height:100%;background:#5f9e6a;transition:width .5s ease}
.d-seance-compte{margin:0 0 3px;font-size:11.5px;color:#c9dcec}
.d-seance-urne{margin:0;font-size:10.5px;color:#7d93aa;font-style:italic}

.portrait{position:relative;margin:-4px -4px 10px;border-radius:12px;overflow:hidden;
  background:linear-gradient(160deg,#efe7d6,#dfe4e0);height:190px}
.portrait canvas{width:100%;height:100%;display:block;cursor:grab}
.portrait canvas:active{cursor:grabbing}
.portrait-vues{position:absolute;left:8px;bottom:8px;display:flex;gap:4px}
.portrait-vues button{border:0;border-radius:99px;padding:4px 10px;font:inherit;font-size:11px;
  background:rgba(247,243,234,.85);color:var(--encre);cursor:pointer}
.portrait-vues button.actif{background:var(--encre);color:var(--creme)}
.proprio{margin-top:10px;padding-top:10px;border-top:1px dashed var(--bord)}
.proprio p{margin:0 0 8px;font-size:12.5px;color:var(--encre-doux)}
.proprio .a-vous{color:var(--accent);font-weight:600}
.proprio button{width:100%;padding:10px;border:0;border-radius:9px;background:var(--accent);
  color:#fff;font:inherit;font-weight:650;cursor:pointer}
.proprio button.secondaire{background:#fff;color:var(--encre);border:1px solid var(--bord);margin-top:6px}

/* ------------------------------------------------------------ La Vallée — direction spectacle
   L'interface ne doit pas concurrencer la simulation. Elle devient une couche de
   verre, de bois et de lumière : présente à portée de main, mais assez discrète
   pour que la vallée reste la première chose que l'on regarde. */
:root{
  --encre:#173327; --encre-doux:#596d59; --creme:#f4f0df;
  --panneau:rgba(20,53,40,.76); --bord:rgba(246,231,180,.28);
  --accent:#d75039; --alerte:#d75039; --or:#e1bb66;
  --ombre:0 22px 60px rgba(8,26,18,.28),0 3px 10px rgba(8,26,18,.22);
  --r:15px;
}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--creme);background:#87aeb3}
#barre{
  height:76px;padding:13px clamp(16px,3.2vw,48px);gap:25px;
  background:linear-gradient(180deg,rgba(13,37,28,.9),rgba(13,37,28,.5) 68%,transparent);
  backdrop-filter:blur(13px);border-bottom:1px solid rgba(244,229,173,.2)
}
.marque{font-family:Georgia,"Times New Roman",serif;font-size:25px;font-weight:700;letter-spacing:-.055em;color:#fff7dd}
.marque svg{width:29px;height:29px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
button.marque{pointer-events:auto;padding:0;border:0;background:none;cursor:pointer}
button.marque:hover{color:#f4d888}
button.marque:focus-visible{outline:3px solid #f1cf75;outline-offset:5px;border-radius:4px}
.horloge{padding-left:20px;border-left:1px solid rgba(244,229,173,.27);color:#fff5d9}
.horloge b{font:600 13px/1.2 ui-monospace,SFMono-Regular,monospace;letter-spacing:.02em}.horloge span{color:#d1ddbb;font-size:11px}
.compteurs{gap:11px;padding:7px 10px;border:1px solid rgba(244,229,173,.2);border-radius:99px;background:rgba(17,52,39,.48);color:#d9e3c4;font-size:11px;backdrop-filter:blur(9px)}
.compteurs b{color:#fff6dc}.compteurs .fps{display:none}.son,.mouvement{color:#fff8df!important}
#panneau-gauche{left:clamp(14px,3.2vw,48px);top:97px;width:315px;gap:10px}
#recherche{padding:12px 14px;border:1px solid rgba(246,231,180,.4);border-radius:10px;background:rgba(244,240,223,.92);box-shadow:var(--ombre);color:#264434;font-size:13px}
#recherche::placeholder{color:#6d7c6a}.chercher:before{content:'⌕';position:absolute;z-index:1;right:13px;top:10px;color:#607161;font-size:18px}.chercher #recherche{padding-right:38px}
#resultats{border-color:var(--bord);border-radius:10px;background:rgba(20,53,40,.94);color:var(--creme)}.resultat:hover{background:rgba(244,231,180,.14)}.pastille{background:#e7c26d}
#fiche,#fiche-bat,#fiche-bete{background:var(--panneau);border-color:var(--bord);border-radius:var(--r);color:var(--creme);box-shadow:var(--ombre);backdrop-filter:blur(17px)}
#fiche:before,#fiche-bat:before,#fiche-bete:before{display:block;margin:-1px 0 10px;color:#edcf80;font-size:9px;font-weight:750;letter-spacing:.14em;text-transform:uppercase}
#fiche:before,#fiche-bat:before,#fiche-bete:before{content:attr(data-surtitre)}
#fiche h2,#fiche-bat h2,#fiche-bete h2{font:700 24px/1 Georgia,"Times New Roman",serif;letter-spacing:-.055em;color:#fff8df}.sous,.vide{color:#c6d3b6}.action{color:#f1ce78}.traits{gap:6px}.trait{border:1px solid rgba(244,231,180,.2);background:rgba(244,231,180,.1);color:#f8efd4}.titret{color:#e2c678}.besoin{color:#d5dfc8}.jauge{background:rgba(244,231,180,.18)}.rempli{background:#8eb06c}.rempli[data-bas="1"]{background:#e06b4c}.lien-nain{color:#fff2d0;text-decoration-color:rgba(244,231,180,.35)}
#fermer-fiche,#fermer-bat{color:#fff1d0}.portrait{background:radial-gradient(circle at 70% 15%,#f9e1a0 0,transparent 30%),linear-gradient(145deg,#3f705a,#183f35);height:min(285px,38dvh);min-height:220px;border:1px solid rgba(244,231,180,.22)}.portrait-vues{display:none}
#panneau-droit{right:clamp(14px,3.2vw,48px);top:auto;bottom:20px;width:280px;max-height:36vh;background:rgba(17,51,39,.72);border-color:var(--bord);border-radius:var(--r);box-shadow:var(--ombre);backdrop-filter:blur(15px)}
#panneau-droit h2{padding:12px 14px 9px;font:700 10px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.14em;color:#edcf80;border-color:rgba(244,231,180,.2)}.evt{color:#edf1d9;font-size:12px}.evt:nth-child(odd){background:rgba(244,231,180,.06)}.puce{background:#b8c986}.evt-mariage .puce{background:#e895a8}.evt-naissance .puce{background:#f2ce7d}
#cta{bottom:30px;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:270px}#cta p{max-width:270px;color:#fff6da;font:15px/1.3 Georgia,"Times New Roman",serif;text-shadow:0 2px 11px rgba(11,37,27,.9)}#cta button{padding:13px 22px;border:1px solid rgba(255,239,188,.85);border-radius:10px;background:linear-gradient(180deg,#e0694e,#bd3e31);box-shadow:0 10px 25px rgba(50,22,15,.36),inset 0 1px rgba(255,255,255,.35);font-size:13px;letter-spacing:.015em}#cta button:hover{background:linear-gradient(180deg,#ed7759,#cb4738);transform:translateY(-1px)}
.decision{border-color:rgba(244,231,180,.28)}.decision p{color:#fff4d7}.boutons button{border-color:rgba(244,231,180,.35);background:rgba(244,231,180,.1);color:#fff4d7}.boutons #f-oui{background:#d6513b}.decision small{color:#cad7bd}.proprio{border-color:rgba(244,231,180,.28)}.proprio p{color:#d3debf}.proprio .a-vous{color:#f2ce7d}.proprio button{background:#d6513b}.proprio button.secondaire{background:rgba(244,231,180,.1);color:#fff4d7;border-color:rgba(244,231,180,.35)}
@media(max-width:900px){#barre{height:64px;padding:10px 15px}.marque{font-size:21px}.horloge{display:none}#panneau-gauche{top:78px;left:14px;width:calc(100vw - 28px);pointer-events:none}.chercher{pointer-events:auto;max-width:360px}#fiche,#fiche-bat{pointer-events:auto;max-width:360px}#panneau-droit{display:none}#cta{bottom:17px}.compteurs{margin-left:auto}.compteurs span:nth-child(n+3){display:none}}
@media(max-width:350px){.marque{font-size:19px}.compteurs{padding-inline:8px}}

.voile-editeur{position:fixed;inset:0;z-index:40;background:rgba(30,25,20,.55);backdrop-filter:blur(6px)}
.boite-editeur{position:absolute;inset:24px;background:var(--creme);border-radius:16px;
  overflow:hidden;box-shadow:0 24px 80px rgba(20,16,12,.4)}
.fermer-editeur{position:absolute;top:32px;right:32px;z-index:41;width:34px;height:34px;
  border:0;border-radius:99px;background:var(--encre);color:var(--creme);font-size:20px;
  line-height:1;cursor:pointer}
.voile-editeur.voile-atelier-reel{z-index:90;background:#0d281f;backdrop-filter:none}
.boite-editeur.boite-atelier-reel{inset:0;border-radius:0;background:#0d281f;box-shadow:none}
.cadre-atelier-reel{display:block;width:100%;height:100%;border:0;background:#0d281f}
.voile-atelier-reel>.fermer-editeur{position:fixed;z-index:92;top:15px;right:18px;
  width:38px;height:38px;border:1px solid rgba(255,244,211,.35);background:rgba(16,48,37,.9);
  color:#fff4d3;box-shadow:0 8px 25px rgba(3,17,12,.35);backdrop-filter:blur(8px)}
@media(max-width:760px){.voile-atelier-reel>.fermer-editeur{top:9px;right:9px;width:36px;height:36px}}


/* Entrer chez quelqu'un, et en ressortir. */
.entrer {
  margin-top: 12px; width: 100%; padding: 9px 12px;
  border: 0; border-radius: 8px; cursor: pointer;
  background: #2f6b4f; color: #f3efe6; font: inherit; font-weight: 600;
}
.entrer:hover { background: #3a805e; }

#dedans {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(20, 24, 30, 0.86); color: #f1ece2;
  backdrop-filter: blur(6px); z-index: 40;
  max-width: min(680px, calc(100vw - 40px));
}
#dedans .d-tete { display: flex; align-items: center; gap: 14px; }

/* LA MAISONNÉE.
   On n'avait qu'une file de prénoms en gris, et la question qu'on se pose en
   poussant une porte est justement celle-là : qui vit ici, et que fait-il en ce
   moment. Chaque ligne ouvre la fiche du nain. */
#d-gens {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0; padding: 0; list-style: none;
}
#d-gens:empty { display: none; }
#d-gens button {
  display: flex; align-items: baseline; gap: 6px;
  padding: 5px 9px; border: 1px solid rgba(241, 236, 226, 0.18); border-radius: 99px;
  background: rgba(241, 236, 226, 0.06); color: inherit; font: inherit; font-size: 12.5px;
  cursor: pointer;
}
#d-gens button:hover { background: rgba(241, 236, 226, 0.14); }
#d-gens button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#d-gens .quoi { opacity: 0.62; font-size: 11.5px; }
/* Absent : il habite ici mais il est dehors. On le montre quand même — c'est
   sa maison, et savoir qui manque en dit autant que savoir qui est là. */
#d-gens .dehors { opacity: 0.42; }
/* Même piège que pour l'éditeur : [hidden] ne vaut que par la feuille du
   navigateur, et le display ci-dessus la couvre. Sans cette ligne le bandeau
   reste affiché après qu'on est sorti de la maison. */
#dedans[hidden] { display: none; }
#dedans .sous { opacity: 0.72; }
#d-nom { font-weight: 600; }
#d-sortir {
  border: 0; border-radius: 8px; padding: 7px 14px; cursor: pointer;
  background: #c8532f; color: #fff; font: inherit; font-weight: 600;
}
#d-sortir:hover { background: #dd6139; }


/* Le bouton du son. Il vit dans la barre du haut, à côté des compteurs : c'est
   la première chose qu'on cherche quand un site se met à faire du bruit. */
.son,.mouvement {
  border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1;
  padding: 4px 6px; border-radius: 7px; opacity: 0.75;
}
.son:hover,.mouvement:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }
.son[data-coupe="1"] { opacity: 0.4; }
.mouvement[data-reduit="1"] { opacity: .4; }


/* ------------------------------------------------------------------ le sang */

.note {
  float: right; font-weight: 700; font-size: 12px; letter-spacing: 0;
  text-transform: none; color: var(--encre);
}
.genes { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }
.gene {
  font-size: 11px; padding: 3px 8px; border-radius: 99px;
  border: 1px solid transparent;
}
/* Exprimé : plein. Porté sans se voir : en pointillé, parce que c'est
   exactement ce que c'est — une promesse, pas un fait. */
.gene[data-f="don"] { background: #dff0e2; color: #1f5c33; }
.gene[data-f="tare"] { background: #f6dcdc; color: #7a2b2b; }
.gene[data-f="or"] { background: #f7e6b8; color: #6b4c07; border-color: #d8b24a; }
.gene[data-porte="1"] {
  background: none; border-style: dashed; border-color: currentColor; opacity: 0.72;
}


/* Ce qu'un nain croit. Discret : c'est un trait de sa vie, pas une décoration. */
.croyance {
  font-size: 12px; line-height: 1.45; margin-bottom: 11px;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(120, 96, 160, .12);
  border: 1px solid rgba(120, 96, 160, .3);
  color: var(--encre);
}
.croyance b { font-weight: 600; }
.croyance .dogme { display: block; color: var(--encre-doux); font-style: italic; margin-top: 2px; }

/* ------------------------------------------------------------ garde-fous UX
   Ces règles ferment les trous révélés par les états réels : longues fiches,
   petits écrans, vue intérieure et éditeur superposé. Elles sont volontairement
   en fin de feuille pour ne pas être annulées par les styles historiques. */
#panneau-gauche{bottom:18px;height:auto;max-height:none;min-height:0;overflow:visible}
#panneau-gauche>.chercher{z-index:2;flex:0 0 auto}
#fiche,#fiche-bat{flex:0 1 auto;min-height:0;max-height:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:rgba(238,207,128,.55) transparent}
#fiche::-webkit-scrollbar,#fiche-bat::-webkit-scrollbar{width:8px}#fiche::-webkit-scrollbar-thumb,#fiche-bat::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:99px;background:rgba(238,207,128,.55);background-clip:padding-box}
#resultats{max-height:min(300px,calc(100dvh - 170px));overscroll-behavior:contain}
#fil{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(238,207,128,.45) transparent}
.son,.mouvement{pointer-events:auto}.son:focus-visible,.mouvement:focus-visible,#cta button:focus-visible,#fermer-fiche:focus-visible,#fermer-bat:focus-visible,#d-sortir:focus-visible,.fermer-editeur:focus-visible{outline:3px solid #f1cf75;outline-offset:3px}
body.vue-interieure .chercher,body.vue-interieure #panneau-droit,body.vue-interieure #cta{display:none}
#dedans{max-height:calc(100dvh - 40px);overflow:auto;border:1px solid rgba(244,231,180,.28);background:rgba(16,48,37,.88);color:#f4eedb;box-shadow:var(--ombre)}

/* ------------------------------------------------------- maisons de la Vallée
   Le plan reste le spectacle. Son registre reprend le parchemin, le vert et
   les cartes arrondies du reste de l'application : ce n'est plus une console
   d'architecte posée par-dessus un autre produit. */
body.vue-interieure #barre{display:none}
/* Les éléments intérieurs sont déjà positionnés par rapport à l'écran. Le
   conteneur disparaît donc de la mise en page au lieu d'être écrasé à 0 px —
   c'était lui qui transformait une fiche ouverte en bande verticale. */
body.vue-interieure #panneau-gauche{display:contents}
body.vue-interieure #panneau-gauche>.chercher,body.vue-interieure #fiche-bat{display:none}
body.vue-interieure #dedans{
  position:fixed;z-index:40;inset:18px 18px 18px auto;transform:none;
  width:360px;max-width:calc(100vw - 36px);max-height:none;box-sizing:border-box;
  display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;pointer-events:auto;
  border:1px solid var(--bord);border-radius:var(--r);
  background:var(--panneau);color:var(--creme);
  box-shadow:inset 4px 0 rgba(225,187,102,.7),var(--ombre);backdrop-filter:blur(17px)
}
body.vue-interieure #dedans[hidden]{display:none}
.d-modes{position:fixed;z-index:42;top:18px;left:50%;transform:translateX(-50%);display:flex;padding:4px;pointer-events:auto;
  border:1px solid var(--bord);border-radius:12px;background:rgba(20,53,40,.9);backdrop-filter:blur(13px);box-shadow:var(--ombre)}
.d-modes[hidden]{display:none}.d-modes button{min-width:88px;height:38px;display:grid;grid-template-columns:18px auto;align-items:center;gap:7px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#cad7bd;font:650 9px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:color var(--duree-courte),background var(--duree-courte),box-shadow var(--duree-courte),transform var(--duree-courte)}
.d-modes button:hover{background:rgba(244,231,180,.1);color:#fff7dd}.d-modes button.actif{background:var(--accent);color:#fff8e8;box-shadow:0 3px 10px rgba(70,24,17,.3)}.d-modes button i{font:normal 16px/1 Georgia,serif}
.d-modes button.choix-actif,#d-liste-pieces button.choix-actif{animation:choix-maison 390ms var(--mouvement) both}
#dedans .d-tete{display:grid;grid-template-columns:1fr auto;align-items:end;gap:5px 12px;padding:20px 20px 0 24px}
.d-index{grid-column:1/-1;margin:0;color:#edcf80;font:700 8px/1.2 ui-monospace,SFMono-Regular,monospace;letter-spacing:.13em;text-transform:uppercase}
#d-nom{font:700 31px/.96 Georgia,"Times New Roman",serif;letter-spacing:-.045em;color:#fff8df}
#dedans #d-qui{max-width:132px;text-align:right;color:#c6d3b6;font:600 9px/1.35 ui-monospace,SFMono-Regular,monospace;text-transform:uppercase}
.d-histoire{margin:14px 20px 0 24px;color:#d9e2c9;font:13.5px/1.48 Georgia,"Times New Roman",serif}.d-histoire[hidden]{display:none}
.d-metriques{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0 0 4px;border-block:1px solid var(--bord);background:rgba(244,231,180,.06)}.d-metriques[hidden]{display:none}
.d-metriques div{padding:11px 9px 10px 20px;border-right:1px solid var(--bord)}.d-metriques div:last-child{border-right:0}.d-metriques dt{color:#bdcbb0;font:650 7px/1.2 ui-monospace,SFMono-Regular,monospace;letter-spacing:.1em;text-transform:uppercase}.d-metriques dd{margin:4px 0 0;color:#fff6dc;font:700 20px/1 Georgia,"Times New Roman",serif}
.d-pieces{min-height:0;padding:15px 18px 12px 24px;border-bottom:1px solid var(--bord);overflow:auto}.d-pieces[hidden]{display:none}.d-section-tete{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.d-section-tete h2{margin:0;color:#e2c678;font:700 8px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.12em;text-transform:uppercase}.d-section-tete button,.d-section-tete span{border:0;background:transparent;color:#edcf80;font:650 8px/1 ui-monospace,SFMono-Regular,monospace;text-transform:uppercase}
#d-liste-pieces{display:grid;grid-template-columns:1fr 1fr;gap:5px}#d-liste-pieces button{min-width:0;display:grid;grid-template-columns:8px 1fr;align-items:center;gap:7px;padding:7px 8px;border:1px solid transparent;border-radius:8px;background:transparent;color:#cad7bd;text-align:left;font:600 10px/1.1 ui-sans-serif,system-ui,sans-serif;cursor:pointer}#d-liste-pieces button:hover{background:rgba(244,231,180,.09);color:#fff7dd}#d-liste-pieces button.actif{border-color:rgba(225,187,102,.38);background:rgba(244,231,180,.12);color:#fff2cf}#d-liste-pieces i{width:6px;height:6px;border-radius:50%;background:#8eaa7c}#d-liste-pieces button.actif i{background:#edcf80;box-shadow:0 0 0 3px rgba(225,187,102,.12)}
.d-habitants{flex:1;min-height:75px;padding:13px 18px 8px 24px;overflow:hidden}.d-habitants .d-section-tete{margin-bottom:7px}
#dedans #d-gens{display:grid;grid-template-columns:1fr;align-content:start;gap:5px;padding:0;margin:0;min-height:0;max-height:100%;overflow:auto;list-style:none}#dedans #d-gens li{min-width:0}#dedans #d-gens button{width:100%;display:grid;grid-template-columns:7px minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--bord);border-radius:9px;background:rgba(244,231,180,.07);color:#f8efd4;font:inherit;cursor:pointer;text-align:left}#dedans #d-gens button:before{content:'';width:7px;height:7px;border-radius:50%;background:#8eb06c;box-shadow:0 0 0 3px rgba(142,176,108,.12)}#dedans #d-gens button:hover{border-color:rgba(244,231,180,.4);background:rgba(244,231,180,.14)}#dedans #d-gens .nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:700}#dedans #d-gens .quoi{color:#c7d3b8;font-size:9.5px;white-space:nowrap}#dedans #d-gens button.dehors{opacity:.58}#dedans #d-gens button.dehors:before{background:#a7aa9a;box-shadow:none}
.d-actions{display:flex;gap:7px;padding:10px 18px 18px 24px}.d-actions button{min-height:40px;border:1px solid var(--bord);border-radius:9px;background:rgba(244,231,180,.09);color:#fff1d0;font:700 10px/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer}.d-actions #d-reset{width:42px;padding:0;font-size:18px;color:#edcf80}.d-actions #d-sortir{flex:1;padding:0 15px;background:linear-gradient(180deg,#df684e,#bd3e31);border-color:rgba(255,239,188,.46);color:#fff}.d-actions #d-sortir:hover{background:linear-gradient(180deg,#ec7557,#ca4738)}
#d-deplier{display:none}
.d-details{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
#dedans .d-tete,#dedans .d-actions{flex-shrink:0}
#dedans .d-habitants{min-height:0;overflow:visible}
#dedans #d-gens{max-height:none;overflow:visible}
#maison-labels{position:fixed;inset:0;z-index:6;pointer-events:none;overflow:hidden}body:not(.vue-interieure) #maison-labels{display:none}.maison-room-label{position:absolute;min-width:54px;padding:5px 7px;transform:translate(-50%,-50%);border:1px solid rgba(244,231,180,.3);border-radius:7px;background:rgba(20,53,40,.86);color:#f5edcf;text-align:center;font:650 7px/1.2 ui-monospace,SFMono-Regular,monospace;letter-spacing:.07em;text-transform:uppercase;box-shadow:0 3px 12px rgba(8,26,18,.2);transition:opacity .18s,transform .18s}.maison-room-label.actif{border-color:#edcf80;color:#fff5d4;transform:translate(-50%,-50%) scale(1.08)}.maison-room-label.attenue{opacity:.18}.maison-room-label[hidden]{display:none}

/* Une fiche ouverte depuis la maisonnée reste dans la scène : maison à droite,
   portrait à gauche. La vue intérieure ne la referme plus à chaque image. */
body.vue-interieure #fiche:not([hidden]){position:fixed;z-index:45;left:18px;top:18px;bottom:18px;width:326px;max-height:calc(100dvh - 36px);display:block;overflow:auto;pointer-events:auto}
.decision-voile[data-erreur="1"] .decision-detail{color:#9d3f31;font-weight:650}.decision-choix button:disabled{cursor:wait;opacity:.55;transform:none}
#f-decision.reponse-en-cours .boutons{opacity:.5;transform:translateY(2px);transition:opacity var(--duree-courte),transform var(--duree-courte)}

/* Sur téléphone, on ouvre d'abord la vue du lieu. Son registre se déplie à la
   demande, avec un seul défilement et la sortie toujours à portée du pouce. */
@media(max-width:900px){
  body.vue-interieure #dedans{inset:auto max(12px,env(safe-area-inset-right)) var(--jeu-bas) max(12px,env(safe-area-inset-left));width:auto;max-width:none;height:auto;max-height:min(60dvh,480px);box-shadow:var(--ombre)}
  #dedans .d-tete{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 10px;padding:10px 12px 0}
  #dedans .d-index,.d-histoire{display:none}
  #dedans #d-nom{grid-column:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:23px;line-height:1.1}
  #dedans #d-qui{grid-column:1;max-width:none;margin:0;text-align:left;font:500 11px/1.35 ui-sans-serif,system-ui,sans-serif;text-transform:none}
  #d-deplier{grid-column:2;grid-row:1/3;display:flex;align-items:center;justify-content:center;gap:7px;min-width:82px;min-height:44px;padding:8px 10px;border:1px solid var(--bord);border-radius:9px;background:rgba(244,231,180,.08);color:#fff1d0;font:650 12px/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer}
  #d-deplier i{font:normal 17px/1 ui-sans-serif,system-ui,sans-serif}
  #d-deplier[aria-expanded="true"] i{transform:rotate(180deg)}
  #d-deplier:focus-visible,#d-liste-pieces button:focus-visible,#d-tout:focus-visible,.d-modes button:focus-visible{outline:3px solid #f1cf75;outline-offset:2px}
  #dedans:not(.details-ouverts) .d-details{display:none}
  #dedans .d-actions{gap:8px;padding:8px 12px 10px}
  #dedans .d-actions button{min-height:44px;font-size:12px}
  #dedans .d-actions #d-reset{width:44px;flex:none;font-size:21px}
  #dedans .d-metriques{margin:10px 0 0}
  #dedans .d-metriques div{padding:10px 12px}
  #dedans .d-metriques dt{font-size:9px;letter-spacing:.04em}
  #dedans .d-metriques dd{font-size:20px}
  #dedans .d-pieces{padding:8px 12px 12px;overflow:visible}
  #dedans .d-section-tete{min-height:32px;gap:10px;margin-bottom:4px}
  #dedans .d-section-tete h2{font-size:10px;letter-spacing:.06em}
  #dedans .d-section-tete span{font:500 11px/1.35 ui-sans-serif,system-ui,sans-serif;text-transform:none;text-align:right}
  #d-tout{min-height:44px;padding:8px;font-size:11px}
  #d-liste-pieces{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  #d-liste-pieces button{min-height:44px;padding:8px;border-color:rgba(225,187,102,.22);font-size:12px;line-height:1.3}
  #dedans .d-habitants{padding:8px 12px 12px}
  #dedans #d-gens button{min-height:44px}
  #dedans #d-gens .nom{font-size:13px}
  #dedans #d-gens .quoi{max-width:130px;font-size:11px;overflow:hidden;text-overflow:ellipsis}
  .d-modes{top:max(10px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));transform:none;padding:3px}
  .d-modes button{min-width:78px;height:44px;padding:0 9px;font:650 11px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:0;text-transform:none}
  .maison-room-label{display:none}
  body.vue-interieure #fiche:not([hidden]){left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));width:auto}
  body.vue-interieure:has(#fiche:not([hidden])) #dedans,body.vue-interieure:has(#fiche:not([hidden])) .d-modes{display:none}
}
.boite-editeur{color:#173327;background:#f4f0df}
.note{color:#e2c678}.gene[data-f="don"]{background:#274e39;color:#dff0df}.gene[data-f="tare"]{background:#5b302a;color:#f5d9d1}.gene[data-f="or"]{background:#5a481f;color:#f7e6b8}.croyance{background:rgba(170,144,212,.14);border-color:rgba(192,167,226,.35);color:#f2e9ff}.croyance .dogme{color:#d9cce8}
@media(max-width:1180px){.compteurs span:nth-child(n+3){display:none}}
@media(max-width:980px){.compteurs span:nth-child(n+2){display:none}#panneau-droit{width:250px}}
@media(max-width:900px){#panneau-gauche{bottom:14px}body:has(#fiche:not([hidden])) #cta,body:has(#fiche-bat:not([hidden])) #cta{display:none}.boite-editeur{inset:8px;border-radius:12px}.fermer-editeur{top:14px;right:14px}}
@media(max-height:720px) and (min-width:901px){#barre{height:64px;padding-block:8px}#panneau-gauche{top:76px;bottom:12px}#panneau-droit{max-height:31vh}#cta{bottom:15px}#cta p{display:none}}
@media(prefers-reduced-motion:reduce){html:not([data-mouvement="complet"]) *,html:not([data-mouvement="complet"]) *::before,html:not([data-mouvement="complet"]) *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
html[data-mouvement="reduit"] *,html[data-mouvement="reduit"] *::before,html[data-mouvement="reduit"] *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}

/* ------------------------------------------------------------ accueil public
   La simulation elle-même est l'image de couverture : pas de bande-annonce,
   pas de capture figée. Le visiteur voit déjà le monde qu'on lui propose. */
#accueil{position:fixed;inset:0;z-index:50;display:grid;grid-template-rows:auto 1fr auto;color:#fff7df;overflow:auto;isolation:isolate;background:linear-gradient(90deg,rgba(8,28,20,.78) 0,rgba(8,28,20,.48) 43%,rgba(8,28,20,.08) 72%),linear-gradient(0deg,rgba(7,24,18,.66),transparent 55%)}
#accueil[hidden]{display:none}.accueil-voile{position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 74% 42%,transparent 0 21%,rgba(6,24,17,.12) 46%,rgba(6,24,17,.42) 100%),linear-gradient(180deg,rgba(9,31,23,.54),transparent 22% 72%,rgba(8,26,19,.7));box-shadow:inset 0 0 180px rgba(6,23,16,.42)}
.accueil-nav{display:flex;align-items:center;gap:16px;min-height:84px;padding:18px clamp(20px,4.6vw,72px);border-bottom:1px solid rgba(255,240,190,.22);background:linear-gradient(180deg,rgba(9,32,24,.54),transparent)}
.accueil-marque{display:flex;align-items:center;gap:10px;color:#fff7df;text-decoration:none;font:700 27px/1 Georgia,"Times New Roman",serif;letter-spacing:-.055em}.accueil-marque svg{width:30px;height:30px;fill:#d85740;filter:drop-shadow(0 2px 5px rgba(0,0,0,.28))}.accueil-direct{display:flex;align-items:center;gap:7px;margin-left:12px;color:#d9e6c6;font:600 9px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.13em;text-transform:uppercase}.accueil-direct i{width:7px;height:7px;border-radius:50%;background:#a9c778;box-shadow:0 0 0 5px rgba(169,199,120,.13)}
.accueil-direct i{animation:direct-respire 2.8s ease-in-out infinite}
#accueil-connexion{margin-left:auto;padding:9px 13px;border:1px solid rgba(255,240,190,.4);border-radius:8px;background:rgba(13,48,35,.52);color:#fff2d0;font:650 11px/1 ui-sans-serif,system-ui,sans-serif;backdrop-filter:blur(10px)}#accueil-connexion:hover{background:rgba(34,77,55,.7)}
.accueil-contenu{align-self:center;width:min(720px,calc(100% - 40px));margin:0 0 0 clamp(20px,8vw,128px);padding:54px 0 72px;text-shadow:0 3px 22px rgba(5,22,15,.46)}.accueil-sur{margin:0 0 17px;color:#edcf80;font:700 10px/1.3 ui-monospace,SFMono-Regular,monospace;letter-spacing:.15em;text-transform:uppercase}.accueil-contenu h1{max-width:720px;margin:0;font:700 clamp(58px,7.4vw,112px)/.82 Georgia,"Times New Roman",serif;letter-spacing:-.078em;text-wrap:balance}.accueil-intro{max-width:540px;margin:27px 0 0;color:#edf0dc;font-size:clamp(15px,1.4vw,19px);line-height:1.55;text-wrap:pretty}
.accueil-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:29px}.accueil-actions button{min-height:48px;padding:12px 18px;border-radius:9px;font:700 13px/1 ui-sans-serif,system-ui,sans-serif;box-shadow:0 12px 30px rgba(9,27,19,.28)}#accueil-creer[hidden]{display:none}.accueil-primaire{border:1px solid #f0d58e;background:linear-gradient(180deg,#f0cf78,#d6a74f);color:#21392e}.accueil-primaire:hover{filter:brightness(1.06);transform:translateY(-1px)}.accueil-secondaire{border:1px solid rgba(255,240,190,.6);background:rgba(15,52,38,.67);color:#fff4d4;backdrop-filter:blur(11px)}.accueil-secondaire:hover{background:rgba(35,81,57,.78);transform:translateY(-1px)}.accueil-promesse{margin:13px 0 0;color:#d9e4ca;font-size:11px}
/* Le panneau d'entrée du village : une information, pas une réclame. Le rai
   d'or à gauche suffit à le détacher, sans pastille ni majuscules criardes. */
.accueil-essai{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;max-width:540px;margin:24px 0 0;padding:9px 0 9px 14px;border-left:2px solid rgba(237,207,128,.6)}
.accueil-essai b{color:#edcf80;font:700 10px/1.3 ui-monospace,SFMono-Regular,monospace;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}
.accueil-essai span{color:#f4ecd4;font-size:13.5px;line-height:1.45}
.accueil-offre{margin:14px 0 0;color:#f0dfa8;font:700 12px/1.4 ui-sans-serif,system-ui,sans-serif;letter-spacing:.01em}.accueil-offre:empty{display:none}.accueil-promesse span{color:#fff2cc;font-weight:700}
.accueil-bas{display:grid;grid-template-columns:1fr auto;align-items:end;gap:28px;padding:17px clamp(20px,4.6vw,72px) 24px;border-top:1px solid rgba(255,240,190,.18);background:linear-gradient(0deg,rgba(8,29,21,.7),transparent)}.accueil-bas>div{display:flex;align-items:baseline;gap:9px}.accueil-bas b{font:700 28px/1 Georgia,"Times New Roman",serif}.accueil-bas span,.accueil-bas p{margin:0;color:#dbe4cc;font-size:10px;letter-spacing:.07em}.accueil-bas p{text-align:center}.accueil-defile{padding:5px 0;border:0;background:none;color:#dbe4cc;font:700 10px/1.2 ui-sans-serif,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;cursor:pointer}.accueil-defile span{display:inline-block;margin-left:3px;transition:transform var(--duree-courte) ease}.accueil-defile:hover span{transform:translateY(3px)}.accueil-defile:focus-visible{outline:2px solid #edcf80;outline-offset:5px;border-radius:2px}
.accueil-ouvert #barre,.accueil-ouvert #panneau-gauche,.accueil-ouvert #panneau-droit,.accueil-ouvert #cta{opacity:0;pointer-events:none}.accueil-sortie{animation:accueil-part .62s cubic-bezier(.7,0,.3,1) both;will-change:transform}@keyframes accueil-part{to{transform:translate3d(0,-100%,0)}}

/* ------------------------------------------------------------ décision au centre
   Une vie suspendue ne se cache plus au bas d'une fiche : elle interrompt la
   vue avec une seule question, deux réponses et une vraie porte de sortie. */
.decision-voile{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:22px;overflow:auto;background:radial-gradient(circle at 50% 42%,rgba(47,91,65,.22),transparent 38%),rgba(6,22,16,.76);backdrop-filter:blur(13px)}
.decision-voile[hidden]{display:none}
.decision-dialogue{position:relative;width:min(620px,100%);max-height:calc(100vh - 44px);max-height:calc(100dvh - 44px);overflow:auto;padding:clamp(28px,5vw,52px);border:1px solid rgba(247,225,160,.52);border-radius:18px;background:linear-gradient(145deg,#f6f0dc,#e8ddc2);color:#18382b;box-shadow:0 38px 120px rgba(2,15,9,.76),inset 0 1px rgba(255,255,255,.75);text-align:center}
.decision-dialogue:before{content:'';display:block;width:42px;height:3px;margin:0 auto 20px;background:#d4513b;box-shadow:13px 0 #d4513b,-13px 0 #d4513b}
.decision-sur{margin:0 0 10px;color:#9a7533;font:800 9px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.17em;text-transform:uppercase}
.decision-nain{margin:0 0 17px;color:#6b745e;font-size:12px;font-weight:700;letter-spacing:.025em}
.decision-dialogue h2{max-width:510px;margin:0 auto;font:700 clamp(34px,5.3vw,58px)/.98 Georgia,"Times New Roman",serif;letter-spacing:-.06em;text-wrap:balance}
/* Une question longue (l'imprévu d'une aventure fait deux phrases) ne doit pas pousser les deux choix hors de l'écran : le titre se fait plus petit avec la longueur, et la fenêtre défile s'il le faut. */
.decision-dialogue h2.longue{font-size:clamp(24px,3.6vw,36px);line-height:1.08;letter-spacing:-.035em}
.decision-dialogue h2.tres-longue{font-size:clamp(19px,2.7vw,27px);line-height:1.18;letter-spacing:-.02em}
.decision-detail{max-width:470px;margin:20px auto 0;color:#506656;font-size:14px;line-height:1.58;text-wrap:pretty}
.decision-choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px}
.decision-choix button{min-height:52px;padding:13px 16px;border-radius:9px;font:750 13px/1.2 ui-sans-serif,system-ui,sans-serif;cursor:pointer;transition:transform .15s,filter .15s}
.decision-choix button:hover{transform:translateY(-1px);filter:brightness(1.04)}
.decision-choix button:focus-visible,.decision-plus-tard:focus-visible,.decision-fermer:focus-visible{outline:3px solid #d6aa4d;outline-offset:3px}
.decision-primaire{border:1px solid #bd4333;background:linear-gradient(180deg,#dd6148,#bd4333);color:#fff9e8;box-shadow:0 10px 24px rgba(124,48,35,.2)}
.decision-secondaire{border:1px solid rgba(29,61,45,.28);background:#fffaf0;color:#203e30}
.decision-plus-tard{margin-top:15px;padding:7px 12px;border:0;background:transparent;color:#647365;font-size:11px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.decision-fermer{position:absolute;right:15px;top:15px;width:36px;height:36px;border:1px solid rgba(31,62,46,.2);border-radius:50%;background:rgba(255,250,240,.72);color:#284637;font-size:21px;line-height:1;cursor:pointer}
.decision-voile[data-urgent="1"] .decision-sur,.decision-voile[data-urgent="1"] .decision-nain{color:#a33e30}
@media(max-width:620px){.decision-voile{padding:12px}.decision-dialogue{padding:38px 20px 26px}.decision-choix{grid-template-columns:1fr}.decision-dialogue h2{font-size:38px}.decision-detail{font-size:13px}}

/* L'éditeur public est une copie du moteur de morphologie, habillée comme le
   seuil de la Vallée. L'atelier de développement reste dans /atelier. */
.voile-editeur{z-index:60;background:radial-gradient(ellipse at 30% 35%,rgba(83,126,90,.34),transparent 45%),rgba(8,27,20,.82);backdrop-filter:blur(13px)}

/* ------------------------------------------------------------ compte au seuil */
.voile-compte{
  position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:18px;
  background:radial-gradient(circle at 50% 38%,rgba(73,111,79,.24),transparent 38%),rgba(7,26,18,.84);
  backdrop-filter:blur(16px);animation:voile-arrive var(--duree-panneau) var(--mouvement) both
}
.voile-compte.est-fermeture{pointer-events:none;animation:voile-part 220ms ease both}
.compte-dialogue{
  position:relative;width:min(500px,100%);max-height:calc(100dvh - 36px);padding:32px;overflow:auto;
  border:1px solid rgba(246,230,179,.48);border-radius:18px;
  background:linear-gradient(145deg,#f7f2df,#e9dfc5);color:#19382b;
  box-shadow:0 35px 100px rgba(3,18,11,.7),inset 0 1px rgba(255,255,255,.8);
  animation:panneau-seuil 420ms var(--mouvement-vif) both
}
.compte-dialogue:before{
  content:'';position:absolute;inset:0 auto 0 0;width:4px;border-radius:18px 0 0 18px;
  background:linear-gradient(#efd384,#c94835 55%,#7fa067);opacity:.85
}
.voile-compte.est-fermeture .compte-dialogue{animation:panneau-part 210ms ease both}
.compte-dialogue .fermer-compte{
  position:absolute;right:14px;top:14px;width:36px;height:36px;border:1px solid rgba(25,56,43,.16);
  border-radius:50%;background:rgba(24,59,45,.92);color:#fff2d0;font-size:20px;cursor:pointer;
  transition:transform var(--duree-courte) ease,background var(--duree-courte) ease
}
.compte-dialogue .fermer-compte:hover{transform:rotate(5deg) scale(1.04);background:#24533f}
.compte-etape{margin:0 0 9px;color:#9a7533;font:750 9px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.15em;text-transform:uppercase}
.compte-dialogue h2{max-width:410px;margin:0;padding-right:30px;font:700 40px/.98 Georgia,"Times New Roman",serif;letter-spacing:-.055em;text-wrap:balance}
.compte-dialogue>p{margin:12px 0 0;color:#526756;font-size:13px;line-height:1.5}
.compte-offre{display:flex;align-items:center;gap:10px;margin:18px 0 0;padding:11px 12px;border:1px solid rgba(38,77,56,.18);border-radius:10px;background:rgba(89,129,89,.09);font-size:12px}
.compte-offre b{color:#a33d2e;white-space:nowrap}
.compte-reprise{display:grid;justify-items:stretch;gap:10px;padding:14px 0 2px;text-align:center;animation:champ-arrive 260ms var(--mouvement) both}
.compte-reprise:before{content:'↺';display:grid;place-items:center;width:48px;height:48px;margin:0 auto 3px;border:1px solid rgba(154,117,51,.38);border-radius:50%;background:rgba(255,250,240,.7);color:#9a7533;font:600 25px/1 Georgia,serif;box-shadow:0 8px 22px rgba(30,58,44,.1)}
.compte-reprise small{color:#9a7533;font:750 9px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.15em;text-transform:uppercase}
.compte-reprise strong{overflow-wrap:anywhere;color:#19382b;font:700 23px/1.08 Georgia,"Times New Roman",serif;letter-spacing:-.025em}
.compte-reprise p{margin:0 0 7px;color:#5e7061;font-size:12px}
.compte-reprise .compte-envoyer{width:100%}.compte-reprise .compte-secondaire{margin-top:0}
.compte-reprise [role="status"]{min-height:17px;color:#9a3f32;font-size:11px;line-height:1.4}
.compte-parcours:not([hidden]){animation:champ-arrive 260ms var(--mouvement) both}
.compte-google{display:flex;justify-content:center;min-height:44px;margin:18px 0 0;overflow:hidden}
.compte-google>div{max-width:100%}
.compte-separateur{display:flex;align-items:center;gap:10px;margin:14px 0;color:#728173;font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.compte-separateur:before,.compte-separateur:after{height:1px;flex:1;background:rgba(35,69,51,.16);content:''}
.compte-invite{margin:18px 0 8px!important;color:#6b796a!important;font-size:10px!important;font-weight:700;letter-spacing:.025em}
.compte-methodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0 0 12px}
.compte-methodes button{
  display:grid;gap:3px;padding:12px 13px;border:1px solid rgba(35,69,51,.2);border-radius:10px;
  background:rgba(255,250,240,.42);color:#526756;text-align:left;cursor:pointer;
  transition:transform var(--duree-courte) ease,border-color var(--duree-courte) ease,background var(--duree-courte) ease,box-shadow var(--duree-courte) ease
}
.compte-methodes button:hover{transform:translateY(-1px);border-color:rgba(35,69,51,.36);background:rgba(255,250,240,.78)}
.compte-methodes button[aria-selected="true"]{border-color:#365e49;background:#fffaf0;color:#19382b;box-shadow:0 4px 13px rgba(27,53,40,.12),inset 0 -2px #c89a3e}
.compte-methodes button:disabled{cursor:not-allowed;opacity:.45;transform:none}
.compte-methodes span{font-size:12px;font-weight:800}.compte-methodes small{font-size:9px;color:#728173}
.compte-tabs{display:flex;gap:4px;margin:20px 0 0;padding:4px;border-radius:10px;background:rgba(30,62,46,.08)}
.compte-tabs button{flex:1;padding:8px;border:0;border-radius:7px;background:transparent;color:#49614f;font-weight:700;font-size:12px;cursor:pointer;transition:background var(--duree-courte),box-shadow var(--duree-courte)}
.compte-tabs button[aria-selected="true"]{background:#fffaf0;color:#19382b;box-shadow:0 2px 7px rgba(27,53,40,.12)}
.compte-form{display:grid;gap:11px}
.compte-google-zone{display:grid;justify-items:center;gap:10px;padding:16px;border:1px solid rgba(35,69,51,.17);border-radius:11px;background:rgba(255,250,240,.45);animation:champ-arrive 240ms var(--mouvement) both}
.compte-google-zone p{margin:0;color:#647565;font-size:11px}.compte-google{display:flex;justify-content:center;min-height:44px;width:100%;margin:0;overflow:hidden}.compte-google>div{max-width:100%}
.compte-form label{display:grid;gap:5px;color:#405848;font-size:11px;font-weight:700}
/* Une règle display sur label gagne sur le style natif de [hidden] : cet état
   explicite garantit qu'un code OTP ne fuit jamais dans le mode mot de passe. */
.compte-dialogue [hidden],.compte-form [hidden]{display:none!important}
.compte-zone:not([hidden]){animation:champ-arrive 240ms var(--mouvement) both}
.compte-form input{width:100%;min-height:46px;padding:11px 12px;border:1px solid rgba(35,69,51,.25);border-radius:9px;background:#fffdf6;color:#18372b;font:inherit;transition:border-color var(--duree-courte),box-shadow var(--duree-courte),background var(--duree-courte)}
.compte-form input::placeholder{color:#93a094}
.compte-form input:hover{border-color:rgba(35,69,51,.42)}
.compte-form input:focus{outline:0;border-color:#a77e2f;background:#fffefa;box-shadow:0 0 0 4px rgba(201,157,66,.25)}
.compte-zone-code input{text-align:center;font:800 25px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.32em;font-variant-numeric:tabular-nums}
.compte-envoyer{min-height:47px;margin-top:3px;padding:12px 14px;border:1px solid rgba(121,43,32,.5);border-radius:9px;background:linear-gradient(180deg,#df674e,#ba3e30);color:#fff9e8;font-weight:800;cursor:pointer;box-shadow:0 9px 20px rgba(126,48,35,.18);transition:transform var(--duree-courte),filter var(--duree-courte),box-shadow var(--duree-courte)}
.compte-envoyer:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 12px 25px rgba(126,48,35,.23)}
.compte-envoyer:active{transform:translateY(1px);box-shadow:0 4px 10px rgba(126,48,35,.18)}
.compte-envoyer:disabled{opacity:.55;cursor:wait;transform:none}
.compte-message{min-height:17px;margin:0!important;color:#a5392d!important;font-size:11px!important}
.compte-message[data-ton="info"]{color:#64745e!important}.compte-message[data-ton="succes"]{color:#2f6a48!important}.compte-message[data-ton="erreur"]{color:#a5392d!important}
.compte-confidentialite{margin-top:12px!important;font-size:10px!important;color:#728173!important}
.compte-secondaire{width:100%;padding:11px 13px;border:1px solid rgba(35,69,51,.24);border-radius:9px;background:rgba(255,250,240,.72);color:#294a39;font-weight:700;cursor:pointer;transition:background var(--duree-courte),transform var(--duree-courte)}
.compte-secondaire:hover{transform:translateY(-1px);background:#fffaf0}.compte-secondaire:disabled{cursor:wait;opacity:.55}
.compte-lien{justify-self:center;padding:5px;border:0;background:transparent;color:#5d7362;font-size:10px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.compte-methodes button:focus-visible,.compte-tabs button:focus-visible,.compte-lien:focus-visible,.compte-dialogue .fermer-compte:focus-visible,.compte-envoyer:focus-visible,.compte-secondaire:focus-visible{outline:3px solid rgba(190,143,49,.48);outline-offset:2px}
.compte-dialogue>.compte-envoyer{width:100%;margin-top:18px}.compte-dialogue>.compte-secondaire{margin-top:9px}

/* --------------------------------------------------------- poste de veille
   Le compte connecté n'est plus une confirmation de session : c'est le centre
   opérationnel qui relie une vie dans la Vallée aux messagers du joueur. */
.compte-dialogue.compte-dashboard{
  width:min(980px,100%);padding:0;overflow:hidden;border-color:rgba(239,211,132,.38);
  background:#efe8d3
}
.compte-dialogue.compte-dashboard:before{display:none}
.compte-dashboard .fermer-compte{z-index:8;border-color:rgba(255,255,255,.14);background:#12382a;color:#fff2cf}
.veille-coquille{display:grid;grid-template-columns:310px minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:min(650px,calc(100dvh - 36px));max-height:calc(100dvh - 36px)}
.veille-identite{
  position:relative;display:flex;flex-direction:column;min-height:0;padding:34px 29px 28px;overflow:hidden auto;
  background:
    radial-gradient(circle at 14% 6%,rgba(236,204,113,.18),transparent 30%),
    linear-gradient(155deg,#1e543e 0%,#123a2b 56%,#0d2d22 100%);
  color:#f9efd3
}
.veille-identite:before{position:absolute;inset:auto -90px -110px auto;width:270px;height:270px;border:1px solid rgba(239,211,132,.14);border-radius:50%;box-shadow:0 0 0 34px rgba(239,211,132,.035),0 0 0 68px rgba(239,211,132,.025);content:''}
.veille-identite:after{position:absolute;right:28px;bottom:29px;width:28px;height:3px;background:#d65640;box-shadow:9px 0 #d65640,-9px 0 #d65640;content:''}
.veille-marque{position:relative;display:flex;align-items:center;gap:9px;margin-bottom:52px;color:#f7e8bd;font:700 15px/1 Georgia,serif;letter-spacing:.015em}
.veille-marque svg{width:22px;height:22px;flex:none}.veille-marque i{position:relative;width:19px;height:14px;border-radius:1px 1px 7px 7px;background:#d4533d}
.veille-marque i:before{position:absolute;left:3px;bottom:12px;border-right:6px solid transparent;border-bottom:10px solid #d4533d;border-left:6px solid transparent;content:''}
.veille-sur{margin:0 0 10px;color:#cda951;font:800 9px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.18em;text-transform:uppercase}
.compte-dashboard .veille-identite h2{max-width:260px;padding:0;color:#fff5d8;font-size:39px;line-height:.98;letter-spacing:-.06em}
.veille-intro{position:relative;margin:18px 0 0;color:rgba(242,235,211,.7);font-size:12px;line-height:1.6;text-wrap:pretty}
.veille-habitant{position:relative;display:flex;align-items:center;gap:11px;margin-top:auto;padding:14px 0 13px;border-top:1px solid rgba(247,232,189,.14);border-bottom:1px solid rgba(247,232,189,.14)}
.veille-avatar{display:grid;width:38px;height:38px;flex:none;place-items:center;border:1px solid rgba(239,211,132,.28);border-radius:11px;background:rgba(255,255,255,.07);color:#e8c76c;font-size:18px}
.veille-habitant>span:last-child{display:grid;min-width:0}.veille-habitant b{overflow:hidden;color:#fff3d0;font:700 15px/1.2 Georgia,serif;text-overflow:ellipsis;white-space:nowrap}.veille-habitant small{margin-top:4px;overflow:hidden;color:rgba(240,235,213,.58);font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.veille-migration{position:relative;display:grid;gap:7px;margin-top:14px;padding:12px;border:1px solid rgba(239,211,132,.2);border-radius:10px;background:rgba(255,255,255,.055)}
.veille-migration label{color:#f5e7bd;font:700 10px/1.2 Georgia,serif}.veille-migration select{width:100%;min-height:37px;padding:7px 9px;border:1px solid rgba(247,232,189,.26);border-radius:8px;background:#173d2f;color:#fff0c9;font-size:9px}.veille-migration>button{min-height:35px;border:1px solid #d7b85e;border-radius:8px;background:#e3c56f;color:#173b2d;font-size:9px;font-weight:800;cursor:pointer}.veille-migration>button:hover{background:#ecd37f}.veille-migration>button:disabled,.veille-migration select:disabled{opacity:.5;cursor:wait}.veille-migration small{color:rgba(240,235,213,.55);font-size:8px;line-height:1.4}
.veille-espace,.veille-compagnon,.veille-deconnexion{position:relative;width:100%;border-radius:9px;font:750 11px/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer;transition:transform var(--duree-courte),background var(--duree-courte),border-color var(--duree-courte)}
.veille-espace{display:flex;align-items:center;justify-content:space-between;min-height:43px;margin-top:15px;padding:11px 13px;border:1px solid #d7b85e;background:#e3c56f;color:#173b2d;box-shadow:0 9px 22px rgba(3,20,13,.22)}
.veille-espace:hover{transform:translateY(-1px);background:#ecd37f}.veille-espace:disabled{opacity:.5;cursor:wait;transform:none}
.veille-compagnon{min-height:39px;margin-top:8px;border:1px solid rgba(247,232,189,.22);background:rgba(255,255,255,.05);color:#f6e8c0}.veille-compagnon:hover{background:rgba(255,255,255,.1);border-color:rgba(247,232,189,.34)}
.veille-deconnexion{margin-top:14px;padding:7px;border:0;background:transparent;color:rgba(240,235,213,.5);font-weight:600;text-decoration:underline;text-decoration-color:rgba(240,235,213,.22);text-underline-offset:3px}.veille-deconnexion:hover{color:#fff0c9}
.veille-reglages{min-width:0;min-height:0;padding:31px 34px 28px;overflow:auto;background:linear-gradient(145deg,#f8f3e3,#ece2c8);color:#19382b}
.veille-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-right:36px}.veille-tete h3{margin:0;font:700 31px/1 Georgia,"Times New Roman",serif;letter-spacing:-.045em}.veille-tete .veille-sur{color:#96752f}
.veille-resume{display:flex;align-items:center;gap:8px;flex:none;padding:7px 10px;border:1px solid rgba(38,75,55,.14);border-radius:99px;background:rgba(255,253,246,.55);color:#67776b;font-size:9px;white-space:nowrap}.veille-resume i{width:7px;height:7px;border-radius:50%;background:#8b958c;box-shadow:0 0 0 4px rgba(99,119,104,.1)}.veille-resume[data-etat="actif"]{border-color:rgba(48,113,75,.2);color:#286446}.veille-resume[data-etat="actif"] i{background:#3a8659;box-shadow:0 0 0 4px rgba(58,134,89,.12)}
.veille-explication{max-width:570px;margin:13px 0 20px;color:#607164;font-size:11px;line-height:1.55;text-wrap:pretty}
.veille-canaux{display:grid;gap:8px}
.aide-notifications{margin:12px 0 0;border:1px solid #cbd8d0;border-radius:10px;color:#435b4f;background:#f5f8f3;font-size:12px;line-height:1.55}
.aide-notifications>summary{padding:12px 14px;color:#244d39;font-weight:700;cursor:pointer}
.aide-notifications>summary:focus-visible{outline:2px solid #337756;outline-offset:3px;border-radius:8px}
.aide-notifications[open]>summary{border-bottom:1px solid #dbe4de}
.aide-notifications-contenu{padding:0 14px 14px}
.aide-notifications-contenu p{margin:12px 0 0}
.aide-notifications-contenu ol{margin:12px 0 0;padding-left:19px}
.aide-notifications-contenu li+li{margin-top:10px}
.aide-notifications-contenu code{font-size:.95em;overflow-wrap:anywhere;user-select:all}
.aide-notifications-contenu a{color:#244d39;text-decoration:underline;text-underline-offset:3px}
.veille-canal{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:76px;padding:12px 14px;border:1px solid rgba(31,65,48,.14);border-radius:12px;background:rgba(255,253,246,.68);box-shadow:0 3px 12px rgba(27,53,40,.035);transition:border-color var(--duree-courte),background var(--duree-courte),transform var(--duree-courte)}
.veille-canal:hover{transform:translateY(-1px);border-color:rgba(31,65,48,.24);background:#fffdf6}.veille-canal[data-etat="actif"]{border-color:rgba(49,120,78,.35);box-shadow:inset 3px 0 #3b8056,0 4px 14px rgba(27,53,40,.045)}.veille-canal[data-etat="indisponible"]{background:rgba(238,232,215,.47)}
.veille-canal-icone{display:grid;width:39px;height:39px;place-items:center;border:1px solid rgba(31,71,50,.16);border-radius:11px;background:#f4ecd7;color:#2a6046;font:800 15px/1 ui-monospace,SFMono-Regular,monospace}.veille-telegram{font-size:20px}
.veille-canal-corps{min-width:0}.veille-canal-corps>div{display:flex;align-items:center;gap:8px}.veille-canal h4,.veille-telephone h4{margin:0;color:#1b3b2d;font:700 14px/1.2 Georgia,"Times New Roman",serif}.veille-canal-corps>p{margin:6px 0 0;overflow:hidden;color:#6d7a6e;font-size:9.5px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
.veille-badge{display:inline-flex;align-items:center;min-height:18px;padding:3px 7px;border-radius:99px;background:rgba(100,114,102,.09);color:#69776b;font:750 8px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.025em;white-space:nowrap}.veille-badge[data-etat="actif"]{background:rgba(47,127,79,.11);color:#277047}.veille-badge[data-etat="indisponible"]{background:rgba(139,105,55,.1);color:#8a6d3a}
.veille-switch{position:relative;width:39px;height:23px;flex:none;padding:0;border:1px solid rgba(40,68,52,.2);border-radius:99px;background:#cbc9bb;cursor:pointer;transition:background var(--duree-courte),border-color var(--duree-courte),box-shadow var(--duree-courte)}.veille-switch i{position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:#fffdf5;box-shadow:0 1px 3px rgba(20,42,29,.22);transition:transform var(--duree-courte) var(--mouvement-vif)}.veille-switch[aria-checked="true"]{border-color:#34764f;background:#3c8559;box-shadow:0 0 0 3px rgba(59,133,88,.08)}.veille-switch[aria-checked="true"] i{transform:translateX(16px)}.veille-switch:disabled{opacity:.42;cursor:not-allowed}
.veille-action{min-width:64px;padding:8px 10px;border:1px solid rgba(35,72,52,.23);border-radius:8px;background:#fffaf0;color:#28513d;font-size:9px;font-weight:800;cursor:pointer}.veille-action:hover{border-color:#4c795f;background:#fff}.veille-action:disabled{opacity:.42;cursor:not-allowed}
.veille-telephone{margin-top:14px;border:1px solid rgba(31,65,48,.16);border-radius:13px;background:rgba(255,253,246,.52);overflow:hidden}.veille-telephone>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-bottom:1px solid rgba(31,65,48,.11);background:rgba(244,237,217,.65)}.veille-telephone>header>div{display:flex;align-items:center;gap:12px}.veille-telephone>header p{margin:4px 0 0;color:#718074;font-size:9px}.veille-telephone>header .veille-canal-icone{width:35px;height:35px;font-size:14px}
.veille-telephone-vide{padding:14px}.veille-telephone-form{display:grid;gap:7px}.veille-telephone-form label{color:#405849;font-size:9px;font-weight:750}.veille-telephone-form>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}.veille-telephone-form input{min-width:0;height:40px;padding:9px 11px;border:1px solid rgba(35,69,51,.22);border-radius:8px;background:#fffdf6;color:#18372b;font:650 12px/1 ui-sans-serif,system-ui,sans-serif}.veille-telephone-form input:focus{outline:0;border-color:#a77e2f;box-shadow:0 0 0 3px rgba(201,157,66,.2)}.veille-telephone-form>div>button{padding:9px 13px;border:1px solid #285d43;border-radius:8px;background:#24543e;color:#fff3d1;font-size:9px;font-weight:800;cursor:pointer}.veille-telephone-form button:disabled{opacity:.45;cursor:not-allowed}.veille-telephone-form>small{color:#78847a;font-size:8.5px;line-height:1.45}.veille-telephone-form>span{display:flex;gap:12px}.veille-telephone-form .veille-lien{padding:2px 0;border:0;background:transparent;color:#56705e;font-size:8.5px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.veille-form-code input{text-align:center;font:800 18px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.18em}
.veille-numero-relie{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid rgba(31,65,48,.1)}.veille-numero-relie>span{display:flex;align-items:center;gap:9px}.veille-numero-relie i{display:grid;width:25px;height:25px;place-items:center;border-radius:50%;background:rgba(47,127,79,.12);color:#277047;font-size:10px;font-style:normal}.veille-numero-relie>span>span{display:grid}.veille-numero-relie b{color:#2b4e3a;font-size:10px}.veille-numero-relie small{margin-top:2px;color:#819084;font-size:8px}.veille-retirer-numero{padding:5px;border:0;background:transparent;color:#687a6d;font-size:8.5px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.veille-options-telephone{display:grid}.veille-option{display:grid;grid-template-columns:31px minmax(0,1fr) auto 39px;align-items:center;gap:10px;min-height:56px;padding:9px 14px;border-top:1px solid rgba(31,65,48,.08)}.veille-option:first-child{border-top:0}.veille-option[data-etat="actif"]{background:rgba(53,124,80,.04)}.veille-mini-icone{display:grid;width:29px;height:29px;place-items:center;border-radius:9px;background:#eee4ca;color:#2e6549;font:800 10px/1 ui-monospace,SFMono-Regular,monospace}.veille-option>span:nth-child(2){display:grid;min-width:0}.veille-option>span:nth-child(2)>b{color:#2a4938;font:700 10px/1.2 Georgia,serif}.veille-option>span:nth-child(2)>small{margin-top:3px;overflow:hidden;color:#7a877c;font-size:8px;text-overflow:ellipsis;white-space:nowrap}
.veille-message{min-height:17px;margin:10px 2px 0;color:#607466;font-size:9px;line-height:1.4}.veille-message[data-ton="succes"]{color:#2d744c}.veille-message[data-ton="erreur"]{color:#a33e30}.veille-confidentialite{display:flex;gap:7px;margin:4px 2px 0;color:#879087;font-size:8px;line-height:1.45}.veille-confidentialite span{color:#ad8736}
.compte-dashboard button:focus-visible,.compte-dashboard input:focus-visible,.compte-dashboard select:focus-visible{outline:3px solid rgba(205,166,75,.48);outline-offset:2px}

@media(max-width:780px){
  .compte-dialogue.compte-dashboard{align-self:end;width:100%;max-height:95dvh;border-radius:18px 18px 0 0;overflow:auto}
  .veille-coquille{grid-template-columns:1fr;min-height:0;max-height:none}
  .veille-identite{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:24px 22px 20px}
  .veille-marque{grid-column:1/-1;margin:0 0 12px}.veille-identite>.veille-sur,.veille-identite>.veille-intro{display:none}
  .compte-dashboard .veille-identite h2{font-size:30px}.veille-habitant{grid-column:1/-1;margin-top:7px}
  .veille-migration,.veille-espace{grid-column:1/-1;margin-top:4px}.veille-compagnon{margin-top:4px}.veille-deconnexion{grid-column:1/-1;margin:2px 0 0}
  .veille-reglages{overflow:visible;padding:25px 20px 24px}.veille-tete{padding-right:38px}.veille-tete h3{font-size:27px}
}
@media(max-width:500px){
  .voile-compte{padding:0}.compte-dashboard .fermer-compte{right:12px;top:12px}
  .veille-identite{grid-template-columns:1fr;padding:20px 18px 17px}.veille-marque{margin-bottom:7px}.compte-dashboard .veille-identite h2{font-size:28px}.veille-habitant{margin-top:4px}.veille-migration,.veille-espace,.veille-compagnon,.veille-deconnexion{grid-column:1}
  .veille-reglages{padding:23px 14px 22px}.veille-tete{display:block;padding-right:36px}.veille-resume{display:inline-flex;margin-top:10px}.veille-explication{margin-top:12px}
  .veille-canal{grid-template-columns:38px minmax(0,1fr) auto;gap:9px;padding:11px 10px}.veille-canal-icone{width:35px;height:35px}.veille-canal-corps>div{display:grid;justify-items:start;gap:4px}.veille-canal-corps>p{max-width:100%;white-space:normal}.veille-action{min-width:55px;padding-inline:7px}
  .veille-telephone>header{align-items:flex-start}.veille-telephone>header>div{align-items:flex-start}.veille-telephone-form>div{grid-template-columns:1fr}.veille-telephone-form>div>button{min-height:38px}
  .veille-option{grid-template-columns:29px minmax(0,1fr) 39px;padding-inline:10px}.veille-option>.veille-badge{display:none}
}
.toast-systeme{position:fixed;z-index:120;pointer-events:none;left:50%;bottom:28px;transform:translate(-50%,18px);padding:12px 16px;border:1px solid rgba(246,230,179,.35);border-radius:10px;background:#15382b;color:#fff4d5;box-shadow:0 15px 40px rgba(5,20,13,.45);opacity:0;transition:opacity 240ms var(--mouvement),transform 240ms var(--mouvement)}
.toast-systeme[data-visible="1"]{opacity:1;transform:translate(-50%,0)}

@keyframes voile-arrive{from{opacity:0;backdrop-filter:blur(0)}}
@keyframes voile-part{to{opacity:0;backdrop-filter:blur(0)}}
@keyframes panneau-seuil{from{opacity:0;transform:translateY(24px) scale(.975);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes panneau-part{to{opacity:0;transform:translateY(12px) scale(.985)}}
@keyframes champ-arrive{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------- mouvement produit
   Tout vient du même geste : on franchit un seuil, puis les panneaux glissent
   comme des tiroirs de bois. Les durées restent brèves pour ne jamais ralentir
   la simulation. */
#barre,#panneau-gauche,#panneau-droit,#cta{
  transition:opacity var(--duree-panneau) var(--mouvement),translate var(--duree-panneau) var(--mouvement),filter var(--duree-panneau) var(--mouvement)
}
.accueil-ouvert #barre{translate:0 -12px;filter:blur(2px)}
.accueil-ouvert #panneau-gauche{translate:-18px 0;filter:blur(2px)}
.accueil-ouvert #panneau-droit{translate:18px 0;filter:blur(2px)}
/* Le carnet ouvert descend sur le fil : le fil s'écarte, le carnet garde la
   place et défile lui-même s'il est plus haut que l'écran. */
#panneau-droit{transition:translate .22s var(--mouvement,ease),opacity .22s ease}
.carnet-ouvert #panneau-droit{translate:340px 0;opacity:0;pointer-events:none}
.carnet-menu{max-height:calc(100vh - 110px - var(--encoche-haut,0px));overflow:auto;overscroll-behavior:contain}
.accueil-ouvert #cta{translate:0 12px;filter:blur(2px)}
.accueil-entree{animation:accueil-revient 580ms var(--mouvement) both}
.accueil-entree .accueil-nav{animation:accueil-element 460ms 60ms var(--mouvement) both}
.accueil-entree .accueil-contenu{animation:accueil-element 520ms 110ms var(--mouvement) both}
.accueil-entree .accueil-bas{animation:accueil-element 460ms 180ms var(--mouvement) both}
.accueil-actions button,#accueil-connexion,#cta button,.entrer,.proprio button,.boutons button,.d-actions button,#d-liste-pieces button,#dedans #d-gens button,.resultat{
  transition:transform var(--duree-courte) ease,filter var(--duree-courte) ease,background-color var(--duree-courte) ease,border-color var(--duree-courte) ease,box-shadow var(--duree-courte) ease
}
.accueil-actions button:active,#accueil-connexion:active,#cta button:active,.entrer:active,.proprio button:active,.boutons button:active,.d-actions button:active,#d-liste-pieces button:active,#dedans #d-gens button:active,.resultat:active{transform:translateY(1px) scale(.99)}
#resultats:not([hidden]){animation:tiroir-resultats 220ms var(--mouvement) both;transform-origin:top}
body.vue-interieure #dedans:not([hidden]){animation:tiroir-droit 340ms var(--mouvement-vif) both}
.compteur-change{display:inline-block;animation:compteur-change 390ms var(--mouvement) both}
#fiche.fiche-entree,#fiche-bat.fiche-entree{will-change:transform,opacity;transform-origin:left center;animation:fiche-tiroir-arrive 440ms cubic-bezier(.2,.55,.25,1) both}
#fiche.fiche-sortie,#fiche-bat.fiche-sortie{pointer-events:none;will-change:transform,opacity;transform-origin:left center;animation:fiche-tiroir-part 220ms cubic-bezier(.4,0,.85,.35) both}
#fiche.contenu-change,#fiche-bat.contenu-change{will-change:transform,opacity;transform-origin:left center;animation:fiche-feuillete 320ms cubic-bezier(.2,.55,.25,1) both}
body.vue-interieure #dedans.contenu-change{animation:contenu-tourne 410ms var(--mouvement) both}
.d-modes:not([hidden]){animation:panneau-descend 300ms 70ms var(--mouvement) both}
.evt:first-child{animation:fil-arrive 280ms var(--mouvement) both}
.decision-voile:not([hidden]){animation:voile-arrive var(--duree-panneau) var(--mouvement) both}
.decision-voile:not([hidden]) .decision-dialogue{animation:decision-arrive 420ms var(--mouvement-vif) both}
.decision-voile.est-fermeture{pointer-events:none;animation:voile-part 210ms ease both}
.decision-voile.est-fermeture .decision-dialogue{animation:panneau-part 200ms ease both}
.decision-voile.est-envoi .decision-choix,.decision-voile.est-envoi .decision-plus-tard{opacity:.46;transform:translateY(2px);transition:opacity var(--duree-courte),transform var(--duree-courte)}
.decision-voile.est-envoi .decision-dialogue::after{position:absolute;right:0;bottom:0;left:0;height:3px;background:linear-gradient(90deg,transparent,#d6aa4d,transparent);content:'';animation:reponse-traverse 920ms ease-in-out infinite}
.voile-editeur{animation:voile-arrive var(--duree-panneau) var(--mouvement) both}
.voile-editeur .boite-editeur{animation:atelier-arrive 430ms var(--mouvement-vif) both}
.voile-editeur>.fermer-editeur{animation:fermeture-arrive 300ms 180ms var(--mouvement) both}
.voile-editeur.est-fermeture{pointer-events:none;animation:voile-part 250ms ease both}
.voile-editeur.est-fermeture .boite-editeur{animation:atelier-part 240ms ease both}
.voile-editeur.est-fermeture>.fermer-editeur{opacity:0;transition:opacity 120ms}
.fermer-editeur{transition:transform var(--duree-courte),background var(--duree-courte),border-color var(--duree-courte)}
.fermer-editeur:hover{transform:rotate(5deg) scale(1.05);border-color:rgba(255,244,211,.65)}

@keyframes accueil-revient{from{opacity:0;filter:blur(4px);transform:scale(1.012)}to{opacity:1;filter:none;transform:none}}
@keyframes accueil-element{from{opacity:0;translate:0 14px}to{opacity:1;translate:none}}
@keyframes tiroir-resultats{from{opacity:0;transform:translateY(-7px) scaleY(.97)}to{opacity:1;transform:none}}
@keyframes tiroir-gauche{from{opacity:0;translate:-14px 0;filter:blur(1px)}to{opacity:1;translate:none;filter:none}}
@keyframes tiroir-droit{from{opacity:0;translate:18px 0;filter:blur(1px)}to{opacity:1;translate:none;filter:none}}
@keyframes fiche-tiroir-arrive{0%{opacity:0;transform:translate3d(-84px,0,0) scale(.94)}28%{opacity:.62;transform:translate3d(-49px,0,0) scale(.962)}56%{opacity:.92;transform:translate3d(-19px,0,0) scale(.986)}80%{opacity:1;transform:translate3d(7px,0,0) scale(1.007)}100%{opacity:1;transform:none}}
@keyframes fiche-tiroir-part{0%{opacity:1;transform:none}38%{opacity:.72;transform:translate3d(-19px,0,0) scale(.985)}100%{opacity:0;transform:translate3d(-64px,0,0) scale(.955)}}
@keyframes fiche-feuillete{0%{opacity:.08;transform:translate3d(-34px,0,0) scale(.985)}32%{opacity:.45;transform:translate3d(-21px,0,0) scale(.99)}64%{opacity:.9;transform:translate3d(-6px,0,0) scale(.998)}84%{opacity:1;transform:translate3d(5px,0,0) scale(1.005)}100%{opacity:1;transform:none}}
@keyframes panneau-descend{from{opacity:0;translate:0 -10px}to{opacity:1;translate:none}}
@keyframes fil-arrive{from{opacity:0;translate:0 -6px}to{opacity:1;translate:none}}
@keyframes contenu-tourne{from{opacity:.38;filter:blur(1.5px);translate:8px 0}to{opacity:1;filter:none;translate:none}}
@keyframes compteur-change{0%{opacity:.4;translate:0 -5px}62%{color:#edcf80;translate:0 1px}100%{opacity:1;translate:none}}
@keyframes choix-maison{45%{box-shadow:0 0 0 3px rgba(237,207,128,.22);transform:scale(1.025)}}
@keyframes direct-respire{50%{box-shadow:0 0 0 8px rgba(169,199,120,0);filter:brightness(1.18)}}
@keyframes reponse-traverse{0%{opacity:0;transform:translateX(-70%)}45%{opacity:1}100%{opacity:0;transform:translateX(70%)}}
@keyframes decision-arrive{from{opacity:0;transform:translateY(28px) scale(.97);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes atelier-arrive{from{opacity:0;transform:scale(.985);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes atelier-part{to{opacity:0;transform:scale(.99);filter:blur(2px)}}
@keyframes fermeture-arrive{from{opacity:0;transform:rotate(-12deg) scale(.8)}to{opacity:1;transform:none}}

@media(max-width:720px){.accueil-nav{min-height:68px;padding:12px 16px}.accueil-marque{font-size:23px}.accueil-direct{display:none}.accueil-contenu{align-self:end;width:calc(100% - 32px);margin:0 16px;padding:80px 0 32px}.accueil-contenu h1{font-size:clamp(48px,15vw,74px)}.accueil-intro{font-size:14px}.accueil-actions{display:grid}.accueil-actions button{width:100%}.accueil-promesse{line-height:1.5}.accueil-bas{grid-template-columns:1fr auto;padding:13px 16px 18px}.accueil-bas p{display:none}.accueil-defile{max-width:150px;text-align:right}.compte-dialogue{padding:25px 19px}.compte-dialogue h2{font-size:32px}.compte-methodes{grid-template-columns:1fr}.compte-methodes button{grid-template-columns:auto 1fr;align-items:baseline;gap:8px}.compte-methodes small{text-align:right}}
@media(max-width:720px) and (max-height:700px){.accueil-contenu{align-self:center;padding:12px 0}.accueil-sur,.accueil-promesse{display:none}.accueil-intro{margin-top:14px;font-size:12.5px;line-height:1.38}.accueil-actions{gap:7px;margin-top:14px}.accueil-actions button{min-height:42px}.accueil-bas{padding-block:8px 10px}}

/* --------------------------------------------------------- carnet visiteur
   Le spectacle garde une barre calme. Compte, journal, aide et réglages sont
   réunis dans un carnet compact, avec des mots lisibles même sans survol. */
.carnet{position:relative;pointer-events:auto}
.ouvrir-carnet{min-height:34px;display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(236,217,151,.34);border-radius:9px;background:rgba(18,51,39,.62);color:#fff4d5;font:inherit;cursor:pointer}
.ouvrir-carnet span{color:#edcf80;font-size:13px}.ouvrir-carnet b{font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.ouvrir-carnet:hover,.ouvrir-carnet[aria-expanded="true"]{border-color:rgba(239,211,128,.66);background:rgba(29,69,52,.9)}
.ouvrir-carnet:focus-visible,.carnet-menu button:focus-visible,.aide-visite button:focus-visible,.journal-dialogue button:focus-visible{outline:3px solid #f1cf75;outline-offset:3px}
.carnet-menu{position:absolute;z-index:82;top:calc(100% + 9px);right:0;width:286px;padding:12px;border:1px solid rgba(244,225,160,.38);border-radius:14px;background:rgba(18,49,38,.97);color:#f7f0d8;box-shadow:0 24px 70px rgba(4,20,13,.55);animation:carnet-arrive 220ms var(--mouvement-vif) both}
.carnet-menu[hidden]{display:none}.carnet-sur{margin:2px 4px 10px;color:#edcf80;font:750 8px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.15em;text-transform:uppercase}
.carnet-entree{position:relative;width:100%;min-height:54px;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:9px;padding:9px 10px;border:0;border-top:1px solid rgba(244,229,173,.12);background:transparent;color:#f7f0d8;text-align:left;cursor:pointer}
.carnet-entree:first-of-type{border-top:0}.carnet-entree:hover{border-radius:9px;background:rgba(244,229,173,.1)}.carnet-entree>span:nth-child(2){display:grid;gap:3px}.carnet-entree b,.carnet-reglage b{font-size:12px}.carnet-entree small,.carnet-reglage small{color:#bbcbb2;font-size:9px}.carnet-icone{display:grid;place-items:center;width:29px;height:29px;border:1px solid rgba(244,229,173,.22);border-radius:8px;color:#edcf80;font:700 16px/1 Georgia,serif}.carnet-primaire .carnet-icone{background:#d75039;border-color:#d75039;color:#fff7df}
.carnet-vallees{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:4px 9px;padding:10px;border-top:1px solid rgba(244,229,173,.16);color:#f7f0d8}.carnet-vallees[hidden]{display:none}.carnet-vallees>span:first-child{grid-row:1/3;display:grid;place-items:center;width:29px;height:29px;border:1px solid rgba(244,229,173,.22);border-radius:8px;color:#edcf80;font:700 16px/1 Georgia,serif}.carnet-vallees>span:nth-child(2){display:grid;gap:2px}.carnet-vallees b{font-size:12px}.carnet-vallees small{color:#bbcbb2;font-size:9px}.carnet-vallees select{grid-column:2;min-width:0;width:100%;height:34px;padding:5px 28px 5px 8px;border:1px solid rgba(244,229,173,.28);border-radius:7px;background:#173d2e;color:#fff4d5;font:650 10px/1.2 ui-sans-serif,system-ui,sans-serif;cursor:pointer}.carnet-vallees select:focus-visible{outline:3px solid #f1cf75;outline-offset:2px}.carnet-vallees select:disabled{opacity:.6;cursor:wait}
#journal-badge{min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px;border-radius:99px;background:#d75039;color:#fff;font:750 9px/1 ui-monospace,SFMono-Regular,monospace;font-style:normal}#journal-badge[hidden]{display:none}
.carnet-reglages{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px;padding-top:9px;border-top:1px solid rgba(244,229,173,.18)}
.carnet-reglage{min-height:56px;display:grid;grid-template-columns:25px 1fr;align-items:center;gap:7px;padding:8px;border:1px solid rgba(244,229,173,.16);border-radius:9px;background:rgba(244,229,173,.05);color:#f7f0d8;text-align:left;cursor:pointer}.carnet-reglage:hover{background:rgba(244,229,173,.11)}.carnet-reglage>span:last-child{display:grid;gap:2px}.carnet-reglage>span:first-child{font-size:16px;text-align:center}
@keyframes carnet-arrive{from{opacity:0;transform:translate3d(0,-8px,0) scale(.98)}to{opacity:1;transform:none}}

/* ------------------------------------------------------ aide de première vue */
.aide-visite{position:fixed;z-index:58;right:clamp(18px,3.2vw,48px);top:96px;width:min(440px,calc(100vw - 36px));padding:21px;border:1px solid rgba(244,225,160,.5);border-radius:16px;background:linear-gradient(145deg,rgba(247,241,218,.98),rgba(228,217,184,.98));color:#19382b;box-shadow:0 24px 75px rgba(5,23,15,.48);animation:aide-arrive 340ms var(--mouvement-vif) both}
.aide-visite[hidden]{display:none}.aide-fermer{position:absolute;right:10px;top:10px;width:36px;height:36px;border:1px solid rgba(25,56,43,.18);border-radius:50%;background:rgba(255,250,236,.6);color:#294b3a;font-size:20px;cursor:pointer}.aide-sur,.journal-sur{margin:0 0 8px;color:#9a7533;font:750 8px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.15em;text-transform:uppercase}.aide-visite h2{max-width:330px;margin:0;padding-right:24px;font:700 30px/1 Georgia,"Times New Roman",serif;letter-spacing:-.045em}.aide-gestes{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:17px}.aide-gestes p{display:grid;grid-template-columns:25px 1fr;align-items:center;gap:1px 7px;margin:0;padding:9px;border:1px solid rgba(32,66,49,.14);border-radius:9px;background:rgba(255,252,241,.52)}.aide-gestes p>span{grid-row:1/3;color:#b74936;font-size:19px}.aide-gestes b{font-size:10px}.aide-gestes small{font-size:8px;line-height:1.25;color:#607263}.aide-compris{width:100%;min-height:44px;margin-top:12px;border:1px solid #b73f30;border-radius:9px;background:#d75039;color:#fff8e5;font-weight:750;cursor:pointer}body.aide-ouverte #cta{opacity:0;pointer-events:none}
@keyframes aide-arrive{from{opacity:0;transform:translate3d(18px,0,0) scale(.98)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ journal mobile */
.journal-voile{position:fixed;inset:0;z-index:86;display:grid;place-items:center;padding:20px;background:rgba(6,22,16,.68);animation:voile-arrive 240ms var(--mouvement) both}.journal-voile[hidden]{display:none}
.journal-voile.est-fermeture{pointer-events:none;animation:voile-part 220ms ease both}.journal-voile.est-fermeture .journal-dialogue{animation:panneau-part 210ms ease both}
.journal-dialogue{position:relative;width:min(620px,100%);max-height:min(720px,calc(100dvh - 40px));display:flex;flex-direction:column;padding:26px 24px 20px;border:1px solid rgba(244,225,160,.48);border-radius:18px;background:linear-gradient(145deg,#f6f0dc,#e7dcc0);color:#19382b;box-shadow:0 35px 100px rgba(3,18,11,.68);animation:journal-arrive 320ms var(--mouvement-vif) both}.journal-fermer{position:absolute;right:12px;top:12px;width:40px;height:40px;border:1px solid rgba(25,56,43,.17);border-radius:50%;background:#1c4636;color:#fff2d0;font-size:21px;cursor:pointer}.journal-dialogue h2{margin:0;padding-right:42px;font:700 38px/1 Georgia,"Times New Roman",serif;letter-spacing:-.05em}.journal-intro{margin:9px 0 15px;color:#5a6d5d;font-size:12px}.journal-dialogue #journal-fil{min-height:120px;list-style:none;margin:0;padding:5px;overflow:auto;border-top:1px solid rgba(29,61,45,.14);overscroll-behavior:contain}.journal-dialogue .evt{color:#294b3a}.journal-dialogue .evt:nth-child(odd){background:rgba(32,66,49,.055)}
@keyframes journal-arrive{from{opacity:0;transform:translate3d(0,18px,0) scale(.98)}to{opacity:1;transform:none}}

/* ------------------------------------------------ recherche et fiches tactiles */
.resultat-legende,.resultat-vide{padding:10px 11px;color:#c7d4bd;font-size:10px;line-height:1.4}.resultat-legende{padding-bottom:5px;color:#edcf80;font:700 8px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.12em;text-transform:uppercase}.resultat[role="option"][aria-selected="true"]{background:rgba(244,231,180,.16);outline:1px solid rgba(237,207,128,.5)}
#fermer-fiche,#fermer-bat{display:grid;place-items:center;width:40px;height:40px;top:5px;right:5px;border-radius:50%}
.f-contexte{display:flex;align-items:center;gap:6px;margin:-2px 36px 10px 0;color:#bfcdb5;font:700 8px/1.2 ui-monospace,SFMono-Regular,monospace;letter-spacing:.07em;text-transform:uppercase}.f-contexte[hidden]{display:none}.f-contexte button{max-width:58%;padding:4px 0;border:0;background:transparent;color:#edcf80;font:inherit;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.f-contexte button:hover{text-decoration:underline;text-underline-offset:3px}#f-contexte-nain{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:900px){
  #barre{z-index:65;gap:10px}.compteurs{margin-left:auto}.carnet{margin-left:0}.ouvrir-carnet{min-height:38px}.carnet-menu{position:fixed;top:68px;right:12px;width:min(300px,calc(100vw - 24px))}
  .journal-fermer{width:44px;height:44px}
  .journal-voile{align-items:end;padding:0;background:rgba(6,22,16,.58)}.journal-dialogue{width:100%;max-height:min(78dvh,720px);padding:25px 16px max(18px,env(safe-area-inset-bottom));border-width:1px 0 0;border-radius:18px 18px 0 0;animation:journal-mobile-arrive 320ms var(--mouvement-vif) both}.journal-dialogue h2{font-size:32px}.journal-dialogue #journal-fil{padding-inline:0}
  .aide-visite{top:auto;right:12px;bottom:12px;left:12px;width:auto;padding:19px}.aide-visite h2{font-size:27px}.aide-gestes{grid-template-columns:1fr}.aide-gestes p{grid-template-columns:28px auto 1fr}.aide-gestes p>span{grid-row:auto}.aide-gestes small{font-size:9px}
  #fermer-fiche,#fermer-bat{width:44px;height:44px;top:4px;right:4px;font-size:22px}
}
@media(max-width:520px){.compteurs{display:none}.marque{margin-right:auto}.ouvrir-carnet b{display:none}.ouvrir-carnet{width:40px;justify-content:center;padding-inline:0}.f-contexte{margin-right:40px}}
@keyframes journal-mobile-arrive{from{opacity:0;transform:translate3d(0,34px,0)}to{opacity:1;transform:none}}

/* ------------------------------------------------ conseil des villages
   Le vote ressemble à ce qu'il est dans la Vallée : une proclamation commune,
   transmise de place en place et marquée du sceau de chaque village. */
.scrutin-voile{position:fixed;inset:0;z-index:88;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 55% 35%,rgba(72,109,78,.22),transparent 42%),rgba(5,21,15,.8);backdrop-filter:blur(15px);animation:voile-arrive 260ms var(--mouvement) both}.scrutin-voile[hidden]{display:none}.scrutin-voile.est-fermeture{pointer-events:none;animation:voile-part 220ms ease both}.scrutin-voile.est-fermeture .scrutin-dialogue{animation:panneau-part 210ms ease both}
.scrutin-dialogue{position:relative;width:min(1080px,100%);height:min(760px,calc(100dvh - 40px));display:grid;grid-template-columns:285px minmax(0,1fr);overflow:hidden;border:1px solid rgba(244,225,160,.48);border-radius:20px;background:#eee4c9;color:#18382b;box-shadow:0 38px 120px rgba(2,15,9,.78);animation:conseil-arrive 380ms var(--mouvement-vif) both}
.scrutin-fermer{position:absolute;z-index:3;right:15px;top:15px;width:42px;height:42px;border:1px solid rgba(247,229,173,.38);border-radius:50%;background:#173f31;color:#fff1cc;font-size:22px;cursor:pointer}.scrutin-fermer:hover{background:#235440}.scrutin-fermer:focus-visible,.scrutin-dialogue button:focus-visible,.scrutin-option:has(input:focus-visible){outline:3px solid #e4b94f;outline-offset:3px}
.scrutin-sommaire{min-width:0;display:flex;flex-direction:column;padding:31px 20px 21px;background:linear-gradient(155deg,#214e3c,#12362a 70%);color:#f7eed2;border-right:1px solid rgba(246,224,155,.28)}.scrutin-sommaire-sur{margin:0;color:#edcf80;font:750 8px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.15em;text-transform:uppercase}.scrutin-sommaire h2{margin:10px 0 21px;font:700 29px/.98 Georgia,"Times New Roman",serif;letter-spacing:-.045em}.scrutin-liste{display:grid;gap:7px;overflow:auto}.scrutin-liste-entree{display:grid;gap:5px;width:100%;padding:13px 12px;border:1px solid rgba(245,225,162,.16);border-radius:10px;background:rgba(244,229,173,.045);color:#f8efd4;text-align:left;cursor:pointer}.scrutin-liste-entree:hover{background:rgba(244,229,173,.1)}.scrutin-liste-entree.actif{border-color:rgba(237,207,128,.62);background:rgba(244,229,173,.13);box-shadow:inset 3px 0 #df5b42}.scrutin-liste-entree small{color:#edcf80;font:700 8px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.1em;text-transform:uppercase}.scrutin-liste-entree strong{font:700 14px/1.25 Georgia,"Times New Roman",serif}.scrutin-liste-entree span{color:#bfcdb4;font-size:9px}.scrutin-fixture-note{margin:auto 0 0;padding-top:16px;border-top:1px solid rgba(244,229,173,.16);color:#aebfaa;font-size:9px;line-height:1.45}
.scrutin-feuille{position:relative;min-width:0;overflow:auto;padding:clamp(34px,5vw,62px) clamp(28px,6vw,76px) 45px;background:linear-gradient(90deg,rgba(104,79,35,.045) 1px,transparent 1px) 0 0/36px 100%,linear-gradient(150deg,#f8f1dc,#e9dec0);box-shadow:inset 12px 0 28px rgba(54,43,23,.08)}.scrutin-feuille:after{position:absolute;inset:10px;border:1px solid rgba(113,83,31,.11);border-radius:13px;pointer-events:none;content:''}.scrutin-statut{display:inline-flex;align-items:center;gap:7px;margin:0;padding:6px 9px;border:1px solid rgba(36,76,53,.2);border-radius:99px;background:rgba(56,102,70,.08);color:#2c6045;font:800 8px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.11em;text-transform:uppercase}.scrutin-statut:before{width:7px;height:7px;border-radius:50%;background:#d75039;box-shadow:0 0 0 4px rgba(215,80,57,.1);content:''}.scrutin-statut[data-etat="vote"]:before,.scrutin-statut[data-etat="resultat"]:before{background:#6e945b;box-shadow:0 0 0 4px rgba(110,148,91,.12)}.scrutin-evenement{margin:18px 0 8px;color:#9a7533;font:750 8px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.13em;text-transform:uppercase}.scrutin-feuille>h2{max-width:690px;margin:0;padding-right:36px;font:700 clamp(38px,5.2vw,62px)/.93 Georgia,"Times New Roman",serif;letter-spacing:-.06em;text-wrap:balance}.scrutin-detail{max-width:670px;margin:20px 0 0;color:#536858;font-size:14px;line-height:1.6;text-wrap:pretty}
.scrutin-echeance{display:flex;align-items:center;gap:11px;width:max-content;max-width:100%;margin-top:22px;padding:10px 13px;border:1px solid rgba(40,78,56,.18);border-radius:10px;background:rgba(255,252,241,.46)}.scrutin-echeance>span{color:#b24b38;font-size:23px}.scrutin-echeance>div{display:grid;gap:3px}.scrutin-echeance small,.scrutin-label{color:#71806f;font:750 8px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.11em;text-transform:uppercase}.scrutin-echeance strong{color:#254735;font-size:12px}
.scrutin-villages-section{margin-top:26px}.scrutin-label{margin:0 0 12px}.scrutin-villages{position:relative;display:flex;align-items:flex-start;gap:0;max-width:720px;overflow-x:auto;padding:0 2px 5px}.scrutin-villages:before{position:absolute;left:30px;right:30px;top:20px;height:2px;background:linear-gradient(90deg,#aa8140,#d7bb76,#aa8140);box-shadow:0 1px rgba(255,255,255,.5);content:''}.scrutin-village{position:relative;z-index:1;min-width:130px;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:0 9px;padding-right:10px}.scrutin-village i{grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;border:3px double rgba(255,234,182,.6);border-radius:50%;background:radial-gradient(circle at 35% 30%,#df674e,#a33128);color:#fff1ce;font:800 10px/1 Georgia,serif;box-shadow:0 4px 9px rgba(95,40,29,.25)}.scrutin-village b{align-self:end;overflow:hidden;color:#294a39;font:700 10px/1.15 Georgia,"Times New Roman",serif;white-space:nowrap;text-overflow:ellipsis}.scrutin-village small{align-self:start;color:#8a7452;font-size:7px;line-height:1.2}.scrutin-village.est-votre-village i{background:radial-gradient(circle at 35% 30%,#e9ca75,#9c7428);box-shadow:0 0 0 4px rgba(199,154,59,.14),0 4px 9px rgba(95,67,29,.24)}
.scrutin-form{margin-top:28px}.scrutin-form[hidden],.scrutin-reponse[hidden],.scrutin-resultat[hidden]{display:none!important}.scrutin-form fieldset{margin:0;padding:0;border:0}.scrutin-form legend{margin:0 0 11px;color:#294a39;font:800 11px/1 ui-sans-serif,system-ui,sans-serif}.scrutin-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.scrutin-option{min-width:0;display:grid;grid-template-columns:30px 1fr;align-items:center;gap:9px;min-height:72px;padding:10px;border:1px solid rgba(39,75,54,.18);border-radius:10px;background:rgba(255,253,244,.54);cursor:pointer;transition:transform var(--duree-courte),border-color var(--duree-courte),background var(--duree-courte),box-shadow var(--duree-courte)}.scrutin-option:hover{transform:translateY(-1px);border-color:rgba(39,75,54,.38);background:#fffbec}.scrutin-option input{position:absolute;opacity:0;pointer-events:none}.scrutin-option-marque{width:29px;height:29px;display:grid;place-items:center;border:1px solid rgba(40,77,56,.24);border-radius:50%;color:#385c47;font:800 10px/1 ui-monospace,SFMono-Regular,monospace}.scrutin-option-texte{color:#294a39;font-size:11px;font-weight:720;line-height:1.28}.scrutin-option:has(input:checked){border-color:#a97c28;background:#fff9e4;box-shadow:inset 0 -3px #c99a2e}.scrutin-option:has(input:checked) .scrutin-option-marque{border-color:#ba4835;background:#d75039;color:#fff}.scrutin-option:has(input:disabled){cursor:default;transform:none}.scrutin-form[data-verrouille="1"] .scrutin-option:not(:has(input:checked)){opacity:.48}.scrutin-confirmer{min-height:47px;margin-top:11px;padding:12px 17px;border:1px solid #ad3d2e;border-radius:9px;background:linear-gradient(180deg,#df674e,#bb3d2e);color:#fff9e8;font-weight:800;cursor:pointer;box-shadow:0 10px 22px rgba(126,48,35,.17)}.scrutin-confirmer:disabled{border-color:rgba(40,76,55,.18);background:rgba(36,72,52,.09);color:#71806f;box-shadow:none;cursor:not-allowed}
.scrutin-reponse,.scrutin-resultat{position:relative;display:grid;margin-top:20px;padding:17px 18px 17px 67px;border:1px solid rgba(161,117,38,.28);border-radius:11px;background:rgba(255,249,226,.7);animation:bulletin-scelle 360ms var(--mouvement-vif) both}.scrutin-reponse:before{position:absolute;left:17px;top:50%;width:36px;height:36px;display:grid;place-items:center;border:3px double #f5d99b;border-radius:50%;background:#b43d30;color:#fff3cf;font:800 16px/1 Georgia,serif;box-shadow:0 4px 9px rgba(92,35,27,.24);content:'✓';transform:translateY(-50%)}.scrutin-reponse p{margin:0;color:#9a7533;font:800 8px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.1em;text-transform:uppercase}.scrutin-reponse strong{margin-top:5px;color:#294a39;font:700 15px/1.25 Georgia,"Times New Roman",serif}.scrutin-reponse small{margin-top:6px;color:#71806f;font-size:9px}.scrutin-resultat{grid-template-columns:44px 1fr;align-items:center;gap:13px;padding-left:17px;border-color:rgba(65,107,72,.28);background:rgba(223,235,207,.42)}.scrutin-sceau-final{width:42px;height:42px;display:grid;place-items:center;border:3px double #f1dda8;border-radius:50%;background:#477151;color:#fff5d7;font-size:17px}.scrutin-resultat>div{display:grid;gap:5px}.scrutin-resultat small{color:#57705c;font:800 8px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.1em;text-transform:uppercase}.scrutin-resultat strong{color:#234433;font:700 18px/1.15 Georgia,"Times New Roman",serif}.scrutin-resultat p{margin:0;color:#647763;font-size:9px}.scrutin-reponse+.scrutin-resultat{margin-top:9px}
@keyframes conseil-arrive{from{opacity:0;transform:translate3d(0,22px,0) scale(.98)}to{opacity:1;transform:none}}@keyframes bulletin-scelle{0%{opacity:0;transform:translate3d(0,-8px,0) rotateX(7deg)}70%{transform:translate3d(0,2px,0)}100%{opacity:1;transform:none}}

@media(max-width:760px){
  .scrutin-voile{align-items:end;padding:0;background:rgba(5,21,15,.68)}.scrutin-dialogue{width:100%;height:min(92dvh,780px);grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);border-width:1px 0 0;border-radius:20px 20px 0 0}.scrutin-fermer{right:12px;top:12px;width:44px;height:44px}.scrutin-sommaire{display:block;padding:18px 64px 13px 16px;border:0;border-bottom:1px solid rgba(246,224,155,.24)}.scrutin-sommaire-sur{margin-bottom:6px}.scrutin-sommaire h2{margin:0;font-size:23px}.scrutin-liste{display:flex;gap:6px;margin-top:12px;overflow-x:auto}.scrutin-liste-entree{min-width:210px;padding:10px}.scrutin-liste-entree strong{font-size:12px}.scrutin-fixture-note{margin-top:9px;font-size:10.5px}.scrutin-feuille{padding:25px 16px max(24px,env(safe-area-inset-bottom));box-shadow:none}.scrutin-feuille:after{display:none}.scrutin-feuille>h2{padding-right:0;font-size:38px}.scrutin-detail{font-size:12.5px}.scrutin-options{grid-template-columns:1fr}.scrutin-option{min-height:58px}.scrutin-village{min-width:122px}.scrutin-reponse,.scrutin-resultat{margin-top:16px}
}
.scrutin-village b{display:-webkit-box;white-space:normal;text-overflow:clip;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media(max-width:760px){
  .scrutin-villages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;padding-bottom:5px}
  .scrutin-villages:before{left:20px;right:20px}
  .scrutin-village{min-width:0;display:grid;grid-template-columns:1fr;justify-items:center;gap:5px;padding:0 3px;text-align:center}
  .scrutin-village i{grid-row:auto}.scrutin-village b{width:100%;font-size:9px}.scrutin-village small{min-height:9px}
}

/* ----------------------------------------------------- alerte catastrophe
   Trois repères, parce que le cœur émet exactement trois temps. Le cartouche
   annonce ce qui est déjà décidé sans prétendre résoudre quoi que ce soit. */
.catastrophe-hud{
  position:fixed;z-index:57;top:76px;left:50%;width:min(430px,calc(100vw - 36px));
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:11px 13px;border:1px solid rgba(219,233,239,.32);border-left:3px solid #c0532f;
  border-radius:10px;background:rgba(23,35,45,.9);color:#f6f0df;
  box-shadow:0 18px 48px rgba(10,17,22,.32);backdrop-filter:blur(10px);
  pointer-events:none;transform:translateX(-50%);animation:catastrophe-arrive 280ms var(--mouvement) both
}
.catastrophe-hud[hidden]{display:none}.catastrophe-hud-signal{position:relative;width:32px;height:32px;display:grid;place-items:center}
.catastrophe-hud-signal i{position:absolute;width:7px;height:7px;border-radius:50%;background:#dbe9ef;box-shadow:0 0 0 0 rgba(219,233,239,.34);animation:catastrophe-onde 1.35s ease-out infinite}
.catastrophe-hud-signal i:nth-child(2){animation-delay:.28s}.catastrophe-hud-signal i:nth-child(3){animation-delay:.56s}
.catastrophe-hud-texte{min-width:0;display:grid;gap:2px}.catastrophe-hud-texte small{color:#b8c58b;font:750 8px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.14em;text-transform:uppercase}
.catastrophe-hud-texte strong{overflow:hidden;font:700 16px/1.1 Georgia,"Times New Roman",serif;letter-spacing:-.02em;text-overflow:ellipsis;white-space:nowrap}
.catastrophe-hud-texte>span{overflow:hidden;color:#c6d0cf;font-size:9.5px;text-overflow:ellipsis;white-space:nowrap}
.catastrophe-hud-temps{display:flex;gap:4px}.catastrophe-hud-temps i{width:17px;height:3px;background:rgba(219,233,239,.18)}
.catastrophe-hud[data-phase="annonce"] .catastrophe-hud-temps i:first-child,
.catastrophe-hud[data-phase="impact"] .catastrophe-hud-temps i:nth-child(-n+2),
.catastrophe-hud[data-phase="fin"] .catastrophe-hud-temps i{background:#dbe9ef}
.catastrophe-hud[data-phase="fin"]{border-left-color:#b8c58b}.catastrophe-hud[data-type="chat"]{border-left-color:#b18b59}
@keyframes catastrophe-arrive{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes catastrophe-onde{70%,100%{box-shadow:0 0 0 13px rgba(219,233,239,0)}}
@media(max-width:720px){.catastrophe-hud{top:70px;grid-template-columns:28px minmax(0,1fr);width:calc(100vw - 24px)}.catastrophe-hud-signal{width:26px}.catastrophe-hud-temps{display:none}}

/* En application installée, plus aucune barre de navigateur ne protège le haut
   de l'écran : la barre du jeu passerait sous l'encoche, et le bouton Carnet
   avec elle, qui est la seule porte vers le compte, le journal et le Conseil.
   La Vallée ne tournait jamais en autonome avant que la portée du manifeste ne
   passe à « / » ; c'est ce changement qui rend ces marges nécessaires. */
/* Les marges d'encoche.

   Deux situations, un seul besoin : la PWA posée sur l'écran d'accueil, où
   `display-mode` vaut `standalone`, et l'application native, où le WebView ne
   déclare aucun mode d'affichage. Dans les deux cas plus rien ne protège le
   haut de l'écran.

   La valeur passe par une variable plutôt que par deux blocs de règles jumeaux :
   la requête média tient toute seule, sans JavaScript, ce qui est important
   parce que le bundle du monde 3D pèse un demi-mégaoctet et qu'une PWA
   installée ne doit pas perdre ses marges parce qu'il a mis du temps à
   arriver. L'attribut, lui, couvre l'application native que la requête média
   ne voit pas. */
:root{--encoche-haut:0px;--encoche-bas:0px;--encoche-gauche:0px;--encoche-droite:0px}
@media (display-mode:standalone),(display-mode:fullscreen),(display-mode:minimal-ui){
  :root{
    --encoche-haut:env(safe-area-inset-top);--encoche-bas:env(safe-area-inset-bottom);
    --encoche-gauche:env(safe-area-inset-left);--encoche-droite:env(safe-area-inset-right)}
}
html[data-autonome]{
  --encoche-haut:env(safe-area-inset-top);--encoche-bas:env(safe-area-inset-bottom);
  --encoche-gauche:env(safe-area-inset-left);--encoche-droite:env(safe-area-inset-right)}

#barre{height:calc(64px + var(--encoche-haut));padding-top:calc(10px + var(--encoche-haut))}
.accueil-nav{padding-top:calc(12px + var(--encoche-haut))}
#panneau-gauche{top:calc(78px + var(--encoche-haut))}
.catastrophe-hud{top:calc(70px + var(--encoche-haut))}
/* La croix est la seule sortie de l'Atelier : sans bouton retour du navigateur,
   la laisser sous l'encoche enferme le joueur dans la création de son nain. */
.fermer-editeur{top:calc(14px + var(--encoche-haut))}
.voile-editeur:has(.boite-atelier-reel)>.fermer-editeur{top:calc(9px + var(--encoche-haut))}
#decisions-badge{min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px;border-radius:99px;background:#d75039;color:#fff;font:750 9px/1 ui-monospace,SFMono-Regular,monospace;font-style:normal}#decisions-badge[hidden]{display:none}
.decisions-sous{margin:12px 0 6px;font:750 9px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.14em;text-transform:uppercase;color:#5a6d5d}
.decisions-liste{list-style:none;margin:0;padding:0;max-height:32vh;overflow:auto;border-top:1px solid rgba(29,61,45,.14)}.decisions-liste li{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 6px;border-bottom:1px solid rgba(29,61,45,.08);color:#294b3a;font-size:12.5px}.decisions-liste li b{display:block;font-size:13px}.decisions-liste li small{display:block;color:#5a6d5d;font-size:11px}.decisions-liste li.decision-vide{color:#6b7a6c;font-style:italic;grid-template-columns:1fr}.decisions-liste button{border:1px solid #1c4636;border-radius:8px;padding:6px 10px;background:#1c4636;color:#fff2d0;font:700 11px/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer}.decisions-liste .suite{color:#7a4a28}
/* LE CLASSEMENT : une ligne par nain, le rang en tête, la classe en couleur.
   La ligne du joueur se repère d'un coup d'œil au milieu des autres. */
#classement-liste li,#classement-mien li{grid-template-columns:1fr}
#classement-liste button,#classement-mien button{width:100%;text-align:left;border:0;background:none;color:#294b3a;font:400 12.5px/1.45 ui-sans-serif,system-ui,sans-serif;padding:2px 0;cursor:pointer}
#classement-liste button:hover,#classement-mien button:hover{color:#1c4636;text-decoration:underline}
.classement-rang{display:inline-block;min-width:34px;color:#7a4a28;font-weight:700}
.classement-nom{font-weight:600}
.classement-valeur{color:#1c4636;font-weight:700}
.classement-classe{color:#5a6d5d;font-style:italic}
.classement-or{color:#a07a1e}
.decisions-liste li.est-mienne{background:rgba(240,180,41,.14);border-radius:8px}
.chat-onglets{display:flex;gap:6px;margin:0 0 8px}.chat-onglets button{padding:7px 12px;border:1px solid rgba(29,61,45,.22);border-radius:99px;background:transparent;color:#294b3a;font:700 11px/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer}.chat-onglets button[aria-selected="true"]{background:#1c4636;border-color:#1c4636;color:#fff2d0}.chat-onglets button:disabled{opacity:.45;cursor:not-allowed}.parole-vide{color:#6b7a6c;font-style:italic}
.journal-fermer,.scrutin-fermer,.decision-fermer{top:calc(12px + var(--encoche-haut))}
/* L'Atelier vit dans une iframe, et les marges d'encoche ne traversent pas une
   iframe : c'est donc à son cadre de se retirer de dessous l'encoche. */
.boite-atelier-reel{
  inset:var(--encoche-haut) var(--encoche-droite) var(--encoche-bas) var(--encoche-gauche);
  background:#0d281f}

/* Le carnet du visiteur occupe le bas de l'écran sur téléphone (voir
   client/src/onglets.js). Tout ce qui vivait contre le bord bas remonte
   au-dessus de lui, sinon la barre couvre le bouton qu'elle doit accompagner. */
@media(max-width:900px){
  :root{--jeu-bas:calc(64px + max(10px,env(safe-area-inset-bottom)) + 8px)}
  #cta,#panneau-gauche,body.vue-interieure #dedans{bottom:var(--jeu-bas)}
  /* Un `top` explicite plutôt qu'un `bottom` plus une hauteur maximale : les
     deux se cumulaient et poussaient le haut de la fiche, sa croix de fermeture
     comprise, au-dessus de l'écran. Le panneau de la maison étant masqué tant
     qu'une fiche est ouverte, le joueur n'avait plus aucune sortie. */
  body.vue-interieure #fiche:not([hidden]){
    top:max(12px,env(safe-area-inset-top));
    bottom:var(--jeu-bas);
    max-height:none}
  .toast-systeme{bottom:calc(var(--jeu-bas) + 8px)}
}

/* Le bandeau du regain : le nain du compte est mort, l'hôtel peut le ramener. */
#bandeau-regain{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;
  display:grid;gap:8px;padding:18px 22px 20px;width:min(92vw,520px);box-sizing:border-box;
  background:var(--panneau);border:1px solid rgba(226,198,120,.45);border-radius:var(--r);
  box-shadow:var(--ombre);backdrop-filter:blur(14px);color:var(--creme)}
#bandeau-regain small{font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:#e2c678}
#bandeau-regain h3{margin:0;font:normal 24px/1.1 Georgia,"Times New Roman",serif;color:#fff4d7}
#bandeau-regain p{margin:0;font-size:14px;line-height:1.5}
#bandeau-regain .regain-attente{color:#cad7bd;font-size:13px}
#bandeau-regain button{margin-top:6px;border:0;border-radius:9px;padding:12px 14px;cursor:pointer;
  background:#e2c678;color:#26301f;font-weight:700;font-size:14px}
#bandeau-regain button:disabled{opacity:.55;cursor:default}

.b-maire-proposer{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-top:6px}
.proposer-mairie{border:1px solid rgba(226,198,120,.45);background:rgba(226,198,120,.14);color:#f1ce78;
  border-radius:7px;padding:6px 10px;font-size:11.5px;cursor:pointer}
.proposer-mairie:disabled{opacity:.6;cursor:default}

/* La mémoire du nain : ses grands moments, du plus récent au plus ancien. */
.souvenirs{margin:10px 0 4px;padding:8px 10px;border-left:2px solid #cdb8e8;border-radius:0 6px 6px 0;background:rgba(205,184,232,.08)}
.souvenirs h3{margin:0 0 5px}
.souvenirs p{margin:0 0 4px;font-size:12px;color:#e2e6d4}
.souvenirs p .quand{color:#a9b49b;font-size:10.5px;margin-left:6px}


/* Ce que les joueurs font dire à leur nain, au-dessus de sa tête. Un calque
   sans interaction : il ne vole jamais un clic au village qui est dessous. */
#paroles{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
#paroles[hidden]{display:none}
.parole{position:absolute;top:0;left:0;white-space:nowrap;padding:3px 8px 4px;border-radius:9px;background:rgba(246,240,220,.92);color:#20402f;border:1px solid rgba(232,179,79,.55);font:600 10.5px/1.15 ui-sans-serif,system-ui,sans-serif;letter-spacing:.01em;box-shadow:0 2px 8px rgba(8,20,12,.28);transition:opacity .25s}
.parole[hidden]{display:none}

/* L'onglet chat : la liste des paroles et le champ, dans l'habit du journal. */
#chat-paroles{min-height:120px;max-height:320px;list-style:none;margin:0 0 12px;padding:5px;overflow:auto;border-top:1px solid rgba(29,61,45,.14);overscroll-behavior:contain}
.parole-chat{padding:5px 6px;color:#294b3a;font-size:13px}
.parole-chat:nth-child(odd){background:rgba(32,66,49,.055)}
.parole-chat strong{color:#173d2e}
#chat-forme{display:flex;gap:8px}
#chat-forme input{flex:1;min-width:0;padding:10px 12px;border:1px solid rgba(25,56,43,.28);border-radius:10px;background:#fffdf4;color:#19382b;font:inherit}
#chat-forme button{padding:10px 18px;border:none;border-radius:10px;background:#1c4636;color:#fff2d0;font:inherit;font-weight:650;cursor:pointer}
#chat-forme button:disabled{opacity:.55;cursor:default}
.chat-erreur{margin:8px 0 0;color:#a33c2a;font-size:12px}


/* Le voile de synchronisation : au-dessus de la landing (50), sous les
   modales (60 et plus) ; il ne bloque jamais un clic. Sa sortie dure 380 ms,
   la même valeur que `SORTIE_MS` dans synchro.js. */
#synchro{position:fixed;inset:0;z-index:55;display:grid;place-items:center;padding:20px;pointer-events:none;background:rgba(6,22,16,.3);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);animation:voile-arrive 260ms var(--mouvement) both}
#synchro[hidden]{display:none}
#synchro.est-fin{animation:voile-part 380ms ease both}
#synchro.est-fin .synchro-carte{animation:panneau-part 300ms ease both}
.synchro-carte{width:min(320px,calc(100vw - 40px));padding:16px 18px 14px;border:1px solid rgba(246,230,179,.34);border-radius:14px;background:rgba(21,56,43,.94);color:#fff4d5;box-shadow:0 18px 50px rgba(5,20,13,.45);text-align:center;animation:panneau-seuil 320ms var(--mouvement-vif) both}
.synchro-carte p{margin:0 0 11px;font-size:14px;font-weight:650;letter-spacing:.01em}
.synchro-barre{height:6px;overflow:hidden;border-radius:99px;background:rgba(255,244,213,.16)}
.synchro-barre i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#c99a2e,#e9ca75);box-shadow:0 0 10px rgba(228,185,79,.45);transition:width 380ms var(--mouvement)}
.synchro-detail{display:block;margin-top:9px;font-size:12px;color:rgba(255,244,213,.68)}
/* Le voile qui a renoncé. Deux différences avec l'attente, et elles comptent
   toutes les deux : il redevient cliquable (sinon le bouton « Réessayer » ne
   serait qu'un dessin), et le flou tombe (une page floutée sous un message
   d'échec, on ne le lit pas, on le subit). La carte s'élargit un peu, un texte
   d'explication ne tient pas dans la largeur d'une barre de progression. */
#synchro.est-panne{display:grid;pointer-events:auto;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,22,16,.62);animation:none}
#synchro.est-panne .synchro-carte{width:min(420px,calc(100vw - 40px));padding:20px 22px 18px}
#synchro.est-panne .synchro-detail{margin-top:10px;line-height:1.5}
.synchro-action{min-height:42px;margin-top:14px;padding:10px 18px;border:1px solid rgba(246,230,179,.4);border-radius:9px;background:rgba(255,244,213,.12);color:#fff4d5;font:inherit;font-weight:700;cursor:pointer;transition:background var(--duree-courte),transform var(--duree-courte)}
.synchro-action:hover{background:rgba(255,244,213,.2)}
.synchro-action:active{transform:translateY(1px)}
/* Sans WebGL, le canevas ne montrera jamais rien : il ne doit pas rester un
   grand rectangle vide sous le message. */
body.sans-3d #vue{display:none}
/* Le même panneau, mais posé par le HTML seul : dans un `noscript`, aucune
   classe ne sera jamais ajoutée par personne, donc tout doit tenir d'avance. */
.sans-js{position:fixed;inset:0;z-index:56;display:grid;place-items:center;padding:20px;background:rgba(6,22,16,.62)}
.sans-js .synchro-carte{width:min(420px,calc(100vw - 40px));padding:20px 22px 18px;animation:none}
.sans-js .synchro-detail{margin-top:10px;line-height:1.5}
.sans-js a{color:#e9ca75}

/* Le nom d'un bâtard : le gardien tranche depuis la fiche. */
.f-nom-choix { margin-top: .5rem; display: grid; gap: .35rem; }
.f-gardien-pseudo{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px 22px}.f-gardien-pseudo[hidden]{display:none}.f-gardien-pseudo input{flex:1;min-width:140px;padding:6px 8px;border:1px solid rgba(244,229,173,.3);border-radius:7px;background:rgba(255,255,255,.06);color:inherit;font:inherit}.f-gardien-pseudo .f-nom-retour{flex-basis:100%}
.f-nom-ligne { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.f-nom-ligne input { flex: 1 1 8rem; min-width: 0; padding: .35rem .5rem; border-radius: .4rem; border: 1px solid rgba(0,0,0,.25); font: inherit; }
.f-nom-retour { margin: 0; font-size: .85em; opacity: .85; min-height: 1.1em; }

/* L'intendance de la mairie : les réserves en direct, le compte du foyer. */
.b-intendance { margin: .4rem 0 .2rem; }
.b-reserves { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin: .2rem 0; font-variant-numeric: tabular-nums; }
.b-reserve b { font-weight: 700; }
.b-rebatir{margin-top:8px;width:100%;padding:8px 10px;border:1px solid rgba(215,80,57,.5);border-radius:9px;background:transparent;color:#f7d9cf;font:700 11px/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer}.b-rebatir.armee{background:#d75039;color:#fff7df}.b-rebatir[hidden]{display:none}
.b-reserve-cap { opacity: .62; font-size: .92em; }
.b-reserve.plein b { color: #bd4333; }
.b-greniers-pleins { color: #8a4a33; }
.b-compte { margin: .25rem 0 0; }

/* Le mot du jour de la fiche : une pique en italique, discrète. */
.f-mot { margin: .15rem 0 .35rem; font-style: italic; opacity: .82; }

.b-vallee { margin: .3rem 0 0; font-size: .9em; opacity: .9; }

/* ------------------------------------------------------------ la partie sérieuse
   Mentions légales et conditions générales : deux liens, trois endroits (le bas
   de l'accueil, le pied du carnet, le passage du compte). Discrets par
   construction : même graisse que les mentions voisines, jamais un bandeau. */
.accueil-legal{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:12px 0 0!important;color:rgba(219,228,204,.62)!important;font-size:10px;letter-spacing:.07em}
.accueil-legal a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(219,228,204,.28)}
.accueil-legal a:hover{color:#edcf80!important;border-bottom-color:currentColor}
@media(max-width:720px){.accueil-legal{display:flex!important;justify-content:flex-start;gap:5px 12px;margin-top:9px!important}}

.carnet-legal{display:flex;gap:12px;margin:9px 0 2px;padding-top:8px;border-top:1px solid rgba(244,229,173,.14);font-size:10.5px;letter-spacing:.04em}
.carnet-legal a{color:rgba(247,240,216,.6);text-decoration:none}
.carnet-legal a:hover{color:#f7f0d8}

/* Au passage du compte, la ligne dit ce qu'on accepte et à partir de quel âge.
   Elle est petite mais elle est là avant le bouton, pas après. */
.compte-legal{margin:10px 0 0;font-size:10.5px;line-height:1.5;color:#728173}
.compte-legal a{color:inherit;text-decoration:underline}


/*
 * LA PHOTO DU LIEU DANS LE SONDAGE. « Sinon on ne sait pas de quel pont on
 * parle » : le nom le dit, la vignette le montre. Elle est tirée de la scène
 * elle-même, au moment où l'on ouvre le scrutin.
 */
.scrutin-lieu {
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scrutin-lieu img {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .18);
  background: rgba(0, 0, 0, .06);
}
.scrutin-lieu figcaption {
  font-size: 12px;
  opacity: .72;
}


/* Déménager : le choix du village, dans la fiche de son propre nain. */
.f-demenager {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  font-size: 13px;
}
.f-demenager select {
  font: inherit;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, .2);
  background: rgba(255, 255, 255, .9);
}


/*
 * LA LISTE DES SCRUTINS SE FAIT DÉFILER. « Je peux pas scroller sur tous les
 * scrutins et donc faire un choix » : depuis que le registre montre TOUS les
 * votes de la vallée, la liste dépasse la colonne — et un enfant de flex sans
 * `min-height:0` refuse de rétrécir, donc son `overflow:auto` ne servait à
 * rien. Elle défile maintenant, et le registre reste entier.
 */
/* Le sommaire est une cellule de grille : sans `min-height:0` il grandit avec
 * sa liste au lieu de la laisser défiler, et la colonne déborde du dialogue. */
.scrutin-sommaire { min-height: 0; overflow: hidden; }
.scrutin-liste { min-height: 0; flex: 1 1 auto; overflow-y: auto; }
@media (max-width: 760px) {
  .scrutin-liste { flex: 0 0 auto; max-height: 34dvh; overflow-x: auto; overflow-y: auto; }
}


/*
 * LE CHAT DANS LE JEU. « En haut à droite, dans une fenêtre à 40 % de
 * transparence. » Elle ne prend le clic que sur ses propres lignes, ne gêne
 * jamais la vue, et disparaît quand personne ne parle.
 */
.chat-vitre {
  position: fixed;
  right: 14px;
  top: 68px;
  z-index: 6;
  width: min(320px, 38vw);
  max-height: 34dvh;
  overflow: hidden;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  background: rgba(12, 24, 18, .6);
  color: #f3efe0;
  backdrop-filter: blur(3px);
  cursor: pointer;
  pointer-events: auto;
}
.chat-vitre[hidden] { display: none !important; }
.chat-vitre ul { margin: 0; padding: 0; display: grid; gap: 4px; list-style: none; }
.chat-vitre li {
  font: 12px/1.35 ui-sans-serif, system-ui, sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  overflow-wrap: anywhere;
}
.chat-vitre li b { color: #ffd98a; font-weight: 700; }
.chat-vitre li.est-bourg b { color: #a8e0b0; }
@media (max-width: 760px) {
  .chat-vitre { right: 8px; top: 58px; width: min(260px, 62vw); max-height: 26dvh; }
  .chat-vitre li { font-size: 11px; }
}

/* CE QU'ON DIT DE LUI. La phrase du village, et la part de chaque pilier :
   ce qu'il bâtit, ce dont il prend soin, ce qu'il dit, ce qu'il rapporte. */
.dit-de-lui { font-style: italic; opacity: .92; margin: .1rem 0 .35rem }
.renom { display: flex; flex-direction: column; gap: .18rem; margin-bottom: .35rem }
.renom-ligne { display: flex; align-items: center; gap: .4rem }
.renom-quoi { flex: 0 0 5.6rem; font-size: .78rem; opacity: .72 }
.renom-jauge { flex: 1 1 auto; height: 5px; border-radius: 3px; background: rgba(255,255,255,.13); overflow: hidden }
.renom-jauge i { display: block; height: 100%; background: linear-gradient(90deg, #c9a227, #f0d264) }

/* MA MAISON : le nom du lieu, et trois nuanciers (toit, murs, porte). */
.f-maison { margin-top: .6rem }
.f-maison-nom { display: flex; align-items: center; gap: .5rem; margin: .1rem 0 .4rem }
.f-palette { display: flex; align-items: center; gap: .5rem; margin: .25rem 0 }
.f-palette-nom { flex: 0 0 3.4rem; font-size: .78rem; opacity: .72 }
.f-nuancier { display: flex; flex-wrap: wrap; gap: .3rem }
.pastille { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); cursor: pointer; padding: 0 }
.pastille:hover { transform: scale(1.12) }
.pastille.choisie { border-color: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.35) }

/* Le partage d'un habitant. Discret sous son nom : c'est une invitation, pas
   une action du jeu, et elle ne doit pas concurrencer les boutons de décision. */
.f-partager{display:inline-flex;align-items:center;gap:7px;margin:2px 0 8px;padding:6px 11px;border:1px solid rgba(246,230,179,.26);border-radius:99px;background:rgba(255,244,213,.07);color:rgba(255,244,213,.82);font:inherit;font-size:12px;cursor:pointer;transition:background var(--duree-courte),border-color var(--duree-courte)}
.f-partager:hover{background:rgba(255,244,213,.14);border-color:rgba(246,230,179,.44)}
.f-partager[hidden]{display:none}
a.f-partager{text-decoration:none}
.f-partager:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.f-partager span{font-size:13px;opacity:.8}
.f-partager b{font-weight:650;letter-spacing:.01em}
.f-partager-etat{margin:0 0 9px;font-size:11.5px;color:rgba(255,244,213,.6);word-break:break-all}
.f-partager-lien{color:#e9ca75}

/* Le carnet de projets garde le bois, le parchemin et le vert du village. */
.vj-projets{position:fixed;inset:18px auto auto 50%;transform:translateX(-50%);margin:0;width:min(1080px,calc(100vw - 36px));max-height:calc(100dvh - 36px);box-sizing:border-box;overflow:auto;padding:24px;background:#193128;color:#f1e8d0;border:1px solid #897d53;border-radius:12px;box-shadow:0 12px 40px #0005;font:14px/1.5 system-ui,sans-serif}
.vj-projets::backdrop{background:#0b171a24}
.vj-projets header{position:relative;padding-right:62px;margin-bottom:18px}
.vj-projets header small{font:600 10px/1.4 ui-monospace,monospace;letter-spacing:.17em;color:#d5b565}
.vj-projets h2{font:normal 30px/1.08 Georgia,serif;margin:6px 0;overflow-wrap:anywhere}
.vj-projets header button{position:absolute;right:0;top:0;font-size:12px;padding:7px}
.vj-projets h3{font:normal 21px/1.2 Georgia,serif;margin:22px 0 12px}
.vj-projets h4{font:600 14px/1.4 system-ui,sans-serif;margin:0 0 3px}
.vj-projets p{margin:8px 0 12px}
.vj-projets button,.vj-projets select{font:inherit;color:inherit;border:1px solid #f1e8d045;border-radius:5px;background:#ffffff09;padding:9px 11px;cursor:pointer;box-sizing:border-box;min-height:40px}
.vj-projets button:hover{background:#ffffff16;border-color:#d5b565}
.vj-projets :focus-visible{outline:2px solid #e5c774;outline-offset:3px}
.vj-projets button:disabled{opacity:.4;cursor:default}
.vj-projets .vj-intro,.vj-projets .vj-vide,.vj-projets .vj-limites,.vj-projets .vj-explication{color:#d3d0b8;font-size:13px}
.vj-projets .vj-limites.vj-pret{color:#b9e0a6}
#bandeau-version{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;gap:10px;align-items:center;background:#1c3128;color:#f1e8d0;border:1px solid #d5b565;border-radius:10px;padding:10px 14px;font-size:14px;box-shadow:0 6px 24px #0008}#bandeau-version button{background:#d5b565;color:#193128;border:0;border-radius:6px;padding:6px 12px;font-weight:650;cursor:pointer}
.vj-projets .vj-etat{color:#e3c783;border-left:2px solid #d5b565;padding-left:10px;font-size:12px}
.vj-projet,.vj-engagement{border-top:1px solid #f1e8d030;padding:14px 0}
.vj-repli{margin-top:8px}.vj-repli summary{cursor:pointer;color:#d8cba4;font-size:13px;padding:8px 0;list-style:disclosure-closed}.vj-repli[open] summary{list-style:disclosure-open}
.vj-projet small,.vj-engagement small,.vj-projets .vj-matiere{display:block;font:11px/1.5 ui-monospace,monospace;color:#d8cba4}
.vj-projet progress,.vj-engagement progress{display:block;width:100%;height:6px;accent-color:#d5b565;margin:12px 0 6px;border:0;border-radius:2px;background:#ffffff18}
.vj-projet progress::-webkit-progress-bar,.vj-engagement progress::-webkit-progress-bar{background:#ffffff18;border-radius:2px}
.vj-projet progress::-webkit-progress-value,.vj-engagement progress::-webkit-progress-value{background:#d5b565;border-radius:2px}
.vj-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:10px}
.vj-actions button{font-size:12px;padding:6px 9px}
.vj-projet[data-etat="termine"] h4,.vj-engagement[data-etat="termine"] h4{color:#bdcea0}
.vj-projet[data-etat="annule"],.vj-engagement[data-etat="annule"]{opacity:.7}
.vj-nouveau{border-top:1px solid #897d53;margin-top:12px}
.vj-nouveau label{display:block;margin:13px 0 5px;font-size:12px;color:#dbd3b9}
.vj-nouveau select{display:block;width:100%;min-width:0;margin-top:5px;background:#20392e;font-size:14px}
.vj-nouveau .vj-bilan{font:12px/1.6 ui-monospace,monospace;margin:16px 0;color:#e1d5b0}
.vj-nouveau .vj-commencer{display:block;width:100%;background:#d5b565;color:#193128;border-color:#d5b565;font-weight:650;margin-top:10px}
.vj-retour{display:none}
.vj-projets.vj-reduit{max-height:200px}
.vj-reduit .vj-retour{display:block}
.vj-reduit .vj-intro,.vj-reduit .vj-etat,.vj-reduit .vj-suivis,.vj-reduit .vj-nouveau,.vj-reduit .vj-categories,.vj-projets [hidden]{display:none}.vj-projets.vj-reduit{max-height:none;padding:14px 24px}.vj-reduit .vj-retour{width:100%;background:#d5b565;color:#193128;border-color:#d5b565;font-weight:650;margin-top:8px}
.vj-inventaire{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:12px 0 18px}.vj-tuile{display:grid;justify-items:center;gap:4px;margin:0;padding:14px 10px;text-align:center;border-radius:12px}.vj-tuile-icone{font-size:30px;line-height:1}.vj-tuile b{font-size:13px}.vj-tuile small{color:#e3c783;font:600 12px ui-monospace,monospace}
.vj-piles{grid-template-columns:repeat(auto-fill,minmax(min(110px,100%),1fr));padding:0;list-style:none}.vj-pile{align-content:start;min-width:0;border:1px solid #667955;background:#193128;overflow-wrap:anywhere}.vj-pile-essence{font-size:11px;color:#d8cba4}
.vj-chapitres { --foret: #193128; --papier: #f1e8d0; --laiton: #d5b565; --bois: #92673e; --mousse: #667955; color: var(--papier); }
.vj-chapitre { border-top: 1px solid #667955; padding: 14px 0; }
.vj-chapitre > summary { font: 600 20px Georgia, serif; cursor: pointer; color: #d5b565; padding: 6px 0; }
.vj-chapitre label { display: grid; gap: 5px; margin: 12px 0; font-size: 13px; }
.vj-chapitre select, .vj-chapitre input[type=number] { box-sizing: border-box; width: 100%; min-width: 0; background: #193128; color: #f1e8d0; border: 1px solid #667955; padding: 9px; border-radius: 5px; }
.vj-chapitre button { max-width: 100%; margin: 5px 6px 5px 0; white-space: normal; }
.vj-chapitre :focus-visible { outline: 2px solid #d5b565; outline-offset: 3px; }
.vj-chapitre article { padding: 10px 0; }
.vj-chapitre h4 { margin: 8px 0; font: 600 17px Georgia, serif; }
.vj-chapitre p { font-size: 14px; line-height: 1.45; }
.vj-chapitre small { display: block; font: 11px ui-monospace, monospace; line-height: 1.5; overflow-wrap: anywhere; opacity: .85; }
.vj-note { border-left: 3px solid #92673e; padding-left: 12px !important; }
.vj-trois-pions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: min(100%, 230px); margin: 12px auto; background: #92673e; padding: 8px; }
.vj-trois-pions button { aspect-ratio: 1; font-size: 29px; margin: 0; background: #193128; color: #f1e8d0; }
.vj-trois-pions button.choisi { outline: 3px solid #d5b565; }
.vj-projets.vj-reduit .vj-chapitres { display: none; }
.vj-projets > header { position: sticky; top: -24px; z-index: 2; background: #193128; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid #667955; }

/* Le nain dirigé au clic, en haut à droite. */
.nain-dirige{position:fixed;right:14px;top:74px;z-index:64;min-height:34px;padding:6px 10px;border:1px solid rgba(236,217,151,.34);border-radius:9px;background:rgba(18,51,39,.62);color:#fff4d5;font:inherit;font-weight:700;pointer-events:auto}.nain-dirige:disabled{opacity:1;color:#fff4d5;appearance:none;-webkit-appearance:none}
.vj-deplacement h2{font-size:20px}.vj-dangers{margin:6px 0 10px;padding-left:18px;color:#c0532f;font-size:14px}.vj-dangers li{margin:2px 0}.vj-deplacement .vj-actions{display:flex;gap:8px;flex-wrap:wrap}
/* Les notes v3 sur la fiche : deux lignes, l'échelle sous les parts. */
.f-valeur-detail{display:block;white-space:pre-line;margin-top:2px}
/* Les onglets du panneau des projets : un chapitre à la fois, en grand. */
.vj-categories{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}.vj-categories button{flex:1 1 150px;margin:0;padding:12px 14px;border:1px solid rgba(241,232,208,.28);border-radius:9px;background:#ffffff09;font:600 14px/1.2 ui-sans-serif,system-ui,sans-serif}.vj-categories button[aria-pressed="true"]{background:#f1e8d0;color:#193128;border-color:#f1e8d0;box-shadow:0 3px 10px #0004}.vj-categories button[aria-pressed="true"]:hover{background:#fff7dd}.vj-suivis[hidden],.vj-nouveau[hidden],.vj-onglets[hidden]{display:none}
.vj-onglets button.vj-onglet-inactif{opacity:.45}.vj-onglets button.vj-onglet-inactif[aria-selected="true"]{opacity:.7}
.vj-chapitre progress{display:block;width:100%;height:8px;accent-color:#d5b565;margin:6px 0 10px;border:0;border-radius:3px;background:#ffffff18}.vj-chapitre progress::-webkit-progress-bar{background:#ffffff18;border-radius:3px}.vj-chapitre progress::-webkit-progress-value{background:#d5b565;border-radius:3px}
.vj-bandeau{position:sticky;top:-24px;z-index:3;display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 14px;padding:10px 12px;border:1px solid rgba(213,181,101,.35);border-radius:9px;background:#1f3a2f;box-shadow:0 6px 18px #0005}
.vj-bandeau-tuile{display:inline-flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}.vj-bandeau-tuile b{font:700 15px/1 ui-sans-serif,system-ui,sans-serif;color:#f1e8d0}.vj-bandeau-tuile small{font:600 11px/1 ui-sans-serif,system-ui,sans-serif;color:#c9c3a5}
.vj-bandeau-bourse b{color:#e5c774;font-size:17px}.vj-bandeau-bourse{padding-right:10px;border-right:1px solid rgba(213,181,101,.35)}
.vj-chapitre-title,.vj-projets h3.vj-chapitre-titre{margin:4px 0 10px}
.vj-onglets{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px}.vj-onglets button{padding:8px 12px;border:1px solid rgba(213,181,101,.35);border-radius:99px;background:transparent;color:#f1e8d0;font:700 12px/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer;margin:0}.vj-onglets button[aria-selected="true"]{background:#d5b565;color:#193128;border-color:#d5b565}
.vj-chapitre{border-top:1px solid rgba(213,181,101,.2);padding-top:10px}.vj-chapitre[hidden]{display:none}
.vj-projets .vj-suivis,.vj-projets .vj-nouveau{max-width:640px}
/* En dernier, pour passer devant la règle générale du bas de l'écran. En paysage sur téléphone, le registre du lieu redevient une colonne à droite :
   la maison reste visible à gauche, la sortie et les pièces gardent leur place
   au-dessus de la barre du carnet. */
@media(max-width:900px) and (orientation:landscape){
  body.vue-interieure #dedans{inset:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) auto auto;width:min(46vw,380px);height:auto;max-height:calc(100dvh - var(--jeu-bas) - max(10px,env(safe-area-inset-top)))}
  #dedans .d-details{max-height:none}
  #d-liste-pieces{grid-template-columns:1fr}
  .d-modes{left:max(12px,env(safe-area-inset-left))}
}
.vj-projets .vj-voisins{display:flex;flex-direction:column;gap:6px;margin:8px 0}.vj-projets .vj-voisin{border-top:1px solid #f1e8d030;padding:8px 0}.vj-projets .vj-voisin h4{margin:0 0 6px;font-size:14px}.vj-projets .vj-voisin .vj-actions{display:flex;flex-wrap:wrap;gap:6px}.vj-projets .vj-voisin .vj-actions button{min-height:40px}
/* En fin de feuille pour passer devant les règles de base des catégories et des onglets. LE CARNET SUR TÉLÉPHONE (9 septembre : « améliore encore le mobile, le menu ») :
   plein écran, un en-tête serré avec une croix à portée du pouce, puis les
   catégories et les onglets sur une seule ligne qui défile au doigt, l'aide en
   bas de page. Le contenu commence au premier tiers de l'écran, pas au milieu. */
@media(max-width:900px){
  .vj-projets:not(.vj-reduit):not(.vj-deplacement){inset:0;transform:none;margin:0;width:100vw;max-width:none;height:100dvh;max-height:none;border-radius:0;border:0;padding:0 14px max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:stretch}
  .vj-projets:not(.vj-reduit):not(.vj-deplacement) > *{flex:none}
  /* Le dialogue « se déplacer ici » : une feuille en bas de l'écran, pas un plein écran pour quatre boutons. */
  .vj-projets.vj-deplacement{inset:auto 0 0 0;transform:none;margin:0;width:100vw;max-width:none;max-height:75dvh;border-radius:16px 16px 0 0;border-width:1px 0 0;padding:16px 16px max(18px,env(safe-area-inset-bottom))}
  .vj-projets.vj-deplacement h2{font-size:19px;margin:0 0 8px}
  .vj-projets.vj-deplacement .vj-actions{display:flex;flex-wrap:wrap;gap:8px}
  .vj-projets.vj-deplacement .vj-actions button{flex:1 1 45%;min-height:48px;font-size:15px}
  .vj-projets.vj-deplacement .vj-actions button.vj-commencer{flex-basis:100%;order:-1}
  .vj-projets:not(.vj-reduit):not(.vj-deplacement) header{position:sticky;top:0;z-index:2;margin:0 -14px 8px;padding:max(10px,env(safe-area-inset-top)) 62px 8px 14px;background:#193128;border-bottom:1px solid #897d53}
  .vj-projets header h2{margin:0;font-size:22px;line-height:1.15}
  .vj-projets header button{top:max(8px,env(safe-area-inset-top));right:10px;width:44px;height:44px;padding:0;border-radius:50%;font-size:0}
  .vj-projets header button::before{content:'×';font-size:26px;line-height:1}
  .vj-projets > a.vj-intro{order:99;display:block;margin:18px 0 0;font-size:13px}
  .vj-categories,.vj-onglets{display:flex;flex-wrap:nowrap;gap:6px;margin:8px -14px 6px;padding:0 14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
  .vj-categories::-webkit-scrollbar,.vj-onglets::-webkit-scrollbar{display:none}
  .vj-categories button,.vj-onglets button{flex:none;white-space:nowrap;scroll-snap-align:start;min-height:44px}
  .vj-categories button{padding:10px 14px;font-size:14px}
  .vj-onglets button{padding:8px 14px;font-size:13px}
  .vj-projets h2{font-size:22px}
  .vj-projets button{min-height:44px}
  .vj-projets select,.vj-projets input[type=number]{min-height:44px;font-size:16px}
  .vj-projets.vj-reduit{inset:auto 8px calc(var(--jeu-bas) + 8px);transform:none;margin:0;width:calc(100vw - 16px);max-height:170px}
}
/* Un téléphone couché : la carte de décision dépassait l'écran et « Décider plus tard » restait hors de vue. Le voile défile, la carte s'aligne en haut. */
@media(max-height:520px){.decision-voile{align-items:flex-start;overflow-y:auto;padding:12px 0 24px}.decision-voile>*{margin:0 auto}.decision-dialogue{padding:26px 20px 18px}.decision-dialogue h2{font-size:26px;line-height:1.1;margin:8px 0 12px}.decision-choix{grid-template-columns:1fr 1fr;gap:8px}.decision-choix button{min-height:44px}}
/* Les liens de la fiche (lieu, parent, conjoint) sont des cibles de doigt sur téléphone. */
@media(max-width:900px){#fiche .lien-nain,#fiche-bat .lien-nain{min-height:38px;padding:6px 10px;font-size:14px}}
/* LA FICHE SUR TÉLÉPHONE (10 septembre : « améliore à fond ») : l'essentiel d'abord
   (qui, ce qu'il fait, agir, besoins, famille, maison), le reste derrière « Tout voir ». */
@media(max-width:900px){
  #fiche:not([hidden]){display:flex;flex-direction:column}
  #fiche>*{order:10}
  #fiche>#fermer-fiche{order:0}#fiche>#f-contexte{order:1}#fiche>.portrait{order:2}#fiche>h2{order:3}#fiche>#f-detail{order:4}#fiche>#f-age{order:5}#fiche>#f-action{order:6}
  #fiche>#f-proprio{order:7}#fiche>#f-decision{order:8}#fiche>#f-besoins{order:9}#fiche>#f-famille{order:10}
  #fiche>#f-plus{order:11;display:block;margin:12px 0 6px;min-height:44px;border:1px solid rgba(241,232,208,.28);border-radius:9px;background:rgba(244,231,180,.08);color:#fff1d0;font:650 14px/1 ui-sans-serif,system-ui,sans-serif}
  #fiche>#f-plus[hidden]{display:block}
  /* Le portrait prend moins de hauteur : « Agir » se voit sans faire défiler. */
  #fiche .portrait{height:172px;min-height:150px}
  #fiche>#f-dorures,#fiche>#f-traits,#fiche>h3.titret,#fiche>#f-genes,#fiche>#f-croyance,#fiche>#f-souvenirs{order:20;display:none}
  #fiche.detail-ouvert>#f-dorures,#fiche.detail-ouvert>#f-traits,#fiche.detail-ouvert>h3.titret,#fiche.detail-ouvert>#f-genes,#fiche.detail-ouvert>#f-croyance,#fiche.detail-ouvert>#f-souvenirs{display:block}
}

/* Plan de l'économie, étape 2 : la fiche d'un outil, façon Borderlands (icone-outil.js). */
.vj-outil .fiche-outil{display:flex;gap:10px;background:#23201b;color:#f4efe3;border:3px solid var(--rarete);border-radius:12px;padding:8px;max-width:420px}
.vj-outil .fo-icone svg{display:block}
.vj-outil .fo-corps{flex:1;min-width:0}
.vj-outil .fo-nom{margin:0;color:var(--rarete);font-size:15px;line-height:1.2}
.vj-outil .fo-rarete{margin:2px 0 6px;opacity:.8;font-size:12px}
.vj-outil .fo-stat{position:relative;display:flex;justify-content:space-between;gap:8px;padding:2px 6px;margin:2px 0;background:#ffffff14;border-radius:4px;font-size:12px}
.vj-outil .fo-stat span,.vj-outil .fo-stat b{position:relative;z-index:1}
.vj-outil .fo-stat i{position:absolute;left:0;top:0;bottom:0;background:var(--rarete);opacity:.25;border-radius:4px}
.vj-outil .fo-mieux{color:#7ee787}.vj-outil .fo-moins{color:#ff7b72}
.vj-outil .fo-usure{margin:4px 0 0;opacity:.8;font-size:12px}
.vj-outil .fo-phrase{color:#ff6b57;font-style:italic;margin:6px 0 0;font-size:12px}
/* Plan de l'économie, étape 4 : la vitrine de la halle, les plus beaux outils en vente. */
.vj-voisin.vj-vitrine{box-shadow:0 0 0 2px #f2c14e,0 0 14px #f2c14e66}

/* L’atelier économique : trois gestes visibles, détails de fabrication repliables. */
.vj-atelier-economie{max-width:960px;margin:auto}
.vj-atelier-bourse{font-weight:750;color:#eccb83}
.vj-atelier-stocks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:18px 0 26px}
.vj-atelier-stocks>div{display:flex;flex-direction:column;padding:12px;background:#ffffff0b;border:1px solid #ffffff20;border-radius:8px}
.vj-atelier-stocks strong{font-size:21px}.vj-atelier-stocks span{font-size:12px}
.vj-atelier-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:14px 0}
.vj-chapitre .vj-atelier-carte{display:flex;flex-direction:column;align-items:stretch;gap:9px;border:1px solid #ead8ab38;background:#ffffff07;padding:17px;border-radius:10px;min-width:0}
.vj-atelier-carte h4{margin:0;font-size:17px}.vj-atelier-carte p{margin:0}.vj-atelier-carte small{line-height:1.5;opacity:.8}
.vj-atelier-carte button{min-height:42px;white-space:normal}.vj-atelier-carte select{max-width:100%;width:100%}
.vj-atelier-section{border-top:1px solid #ead8ab35;padding:18px 0;margin-top:20px}
.vj-atelier-section>summary{font-size:18px;font-weight:700;cursor:pointer;margin-bottom:14px}
.vj-atelier-carte progress{width:100%;height:7px;accent-color:#d5b565}
@media(max-width:600px){.vj-atelier-stocks{grid-template-columns:repeat(3,minmax(0,1fr))}.vj-atelier-cartes{grid-template-columns:1fr}.vj-chapitre .vj-atelier-carte{padding:14px}}
.vj-manque{color:var(--alerte);font-weight:650}

/* ----------------------------------------------------- les premiers pas
   Le guide d'arrivée (17 septembre) : un voile qui laisse voir la vallée, une
   bulle près de la pièce dont on parle, et cette pièce éclairée. */
.pas-voile{position:fixed;inset:0;z-index:72;background:rgba(6,22,16,.55)}
.pas-voile[hidden]{display:none}
.pas-bulle{position:fixed;width:min(340px,calc(100vw - 28px));box-sizing:border-box;padding:18px 18px 14px;border:1px solid rgba(247,225,160,.5);border-radius:14px;background:linear-gradient(145deg,#f6f0dc,#e8ddc2);color:#18382b;box-shadow:0 24px 70px rgba(2,15,9,.7)}
.pas-bulle-centree{top:50%;left:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 28px))}
.pas-bulle h2{margin:2px 0 8px;font:700 22px/1.12 Georgia,"Times New Roman",serif;letter-spacing:-.02em}
.pas-compteur{margin:0;color:#9a7533;font:800 9px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.17em;text-transform:uppercase}
.pas-texte{margin:0 0 14px;font-size:14px;line-height:1.55;color:#40573f;text-wrap:pretty}
.pas-boutons{display:flex;gap:8px;align-items:center}
.pas-boutons button{min-height:42px;padding:10px 14px;border-radius:9px;border:1px solid rgba(24,56,43,.28);background:#ffffff55;color:#18382b;font:700 13px/1.2 ui-sans-serif,system-ui,sans-serif;cursor:pointer}
.pas-suivant{margin-left:auto;background:#2f5b41;border-color:#2f5b41;color:#f6f0dc}
.pas-passer{background:none;border-color:transparent;color:#5c6f58;font-weight:600}
.pas-boutons button:hover{filter:brightness(1.05)}
.pas-cible{position:relative;z-index:73;outline:3px solid #f1cf75;outline-offset:6px;border-radius:12px;box-shadow:0 0 0 9999px rgba(6,22,16,.18)}
body.premiers-pas-ouverts #panneau-droit{display:block}
/* LA FICHE NE MANGE PLUS L'ÉCRAN (17 septembre : « quand on clique sur un nain, sa fiche prend toute la place »).
   Mesuré : 548 px sur 693, soit 79 % de la hauteur. Elle se plafonne et défile ; le bouton de sa barre la déplie. */
#fiche{max-height:min(46dvh,430px)}
body.fiche-etendue #fiche{max-height:min(82dvh,860px)}
/* Dans une maison aussi : la fiche y avait droit à tout l'écran (mesuré : 657 px sur 693). */
body.vue-interieure #fiche:not([hidden]){max-height:min(52dvh,470px)}
body.fiche-etendue.vue-interieure #fiche:not([hidden]){max-height:calc(100dvh - 36px)}
.fiche-plier{position:absolute;top:8px;right:34px;border:0;background:none;color:var(--encre-doux);font-size:15px;line-height:1;cursor:pointer;padding:2px 4px}
.fiche-plier:hover{color:var(--creme)}

/* Des commandes lisibles sur le monde ; la fiche se range sans quitter le nain. */
#panneau-gauche:has(#fiche:not([hidden]))>.chercher{display:none}
#fiche{touch-action:pan-y}
#fiche.fiche-sortie{animation:fiche-ranger 220ms ease-in both}
@keyframes fiche-ranger{to{transform:translateX(calc(-100% - 24px));opacity:0}}
#chat-vitre-ouvrir,#ouvrir-construction{position:fixed;z-index:7;top:calc(72px + var(--encoche-haut,0px));right:14px;border:1px solid #c5a660;border-radius:9px;background:#203e2f;color:#fff2cf;padding:10px 14px;font:700 13px/1.2 system-ui;cursor:pointer;min-height:40px}
#ouvrir-construction{top:auto;bottom:calc(var(--jeu-bas,18px) + 6px);left:18px;right:auto;background:#e9c471;color:#203b2b;box-shadow:0 3px 14px #0004}
.chat-vitre{top:calc(120px + var(--encoche-haut,0px));z-index:8;cursor:auto;max-height:40dvh;width:min(360px,calc(100vw - 28px));display:flex;flex-direction:column;gap:8px}
.chat-vitre header{display:flex;justify-content:space-between;gap:8px}
.chat-vitre button,.chat-vitre select{background:#244333;color:#fff2cf;border:1px solid #d3c39866;border-radius:6px;padding:6px;font:600 12px system-ui;min-height:32px;cursor:pointer}
.chat-vitre ul{overflow:auto;min-height:0}
#chat-vitre-forme{display:grid;grid-template-columns:1fr auto;gap:6px;flex-shrink:0}
#chat-vitre-portee{grid-column:1 / -1;justify-self:start}
#chat-vitre-texte{width:100%;min-width:0;background:#fff9e9;color:#203b2b;border:1px solid #d3c398;border-radius:6px;padding:8px;font:14px system-ui}
#chat-vitre-erreur{margin:0;color:#ffd6b8;font:12px system-ui}
.vj-categories button[data-categorie="construction"]{border:2px solid #a47b2d;font-weight:800}
@media(max-width:900px){#ouvrir-construction{bottom:calc(var(--jeu-bas) + 4px);left:12px}#chat-vitre-ouvrir{right:10px;font-size:11px;padding:8px}#fermer-fiche{min-width:40px;min-height:40px;top:0;right:0}.fiche-plier{right:44px;min-height:36px}}
@media(prefers-reduced-motion:reduce){#fiche.fiche-sortie{animation-duration:1ms}}

.stats-nain-dialogue{width:min(440px,calc(100vw - 28px));max-height:80dvh;overflow:auto;border:1px solid #a6b294;border-radius:14px;background:#faf4df;color:#203b2b;padding:22px;font:14px system-ui}
.stats-nain-dialogue::backdrop{background:#071a12aa}
.stats-nain-dialogue h2{font:700 26px Georgia,serif;margin:0 0 14px}
.stats-nain-dialogue>button{float:right;padding:8px 14px;border:1px solid #a6b294;border-radius:6px;background:#244333;color:#fff2cf;cursor:pointer}
.dashboard-stat{display:grid;grid-template-columns:1fr auto;gap:5px;margin:8px 0;font-size:13px}
.dashboard-stat progress{grid-column:1/-1;width:100%;height:8px;accent-color:#487957}
body.accueil-ouvert #ouvrir-construction,body.accueil-ouvert #chat-vitre-ouvrir,body.accueil-ouvert #chat-vitre{display:none}

/* ==========================================================================
   LE MENU « OUTILS ET TÂCHES », REFONDU (21 septembre 2026, d'après la revue
   de design « Valgnome.fr design review »).
   ...........................................................................
   Avant : un dialogue de 1080 px, six catégories, des onglets qui se
   ressemblaient tous, et la bourse noyée au milieu. Après : une feuille pleine
   qui monte par-dessus la vallée floutée, un bandeau qui ne quitte jamais
   l'écran (nain dirigé, bourse, réserves, En cours), un rail de sept
   destinations au bureau, une barre basse de cinq au téléphone.
   Un état = un mot ET une couleur, jamais la couleur seule. L'action
   principale est dorée ; le danger est rouge et toujours confirmé.
   Les titres demandent Lora et les étiquettes JetBrains Mono : la politique de
   sécurité du site n'autorise que ses propres fichiers (`font-src 'self'`),
   donc on garde le Georgia et le monospace du jeu, qui ont le même dessin.
   ========================================================================== */
.mn-menu{
  --mn-fond:#122a20; --mn-panneau:#1f3a2e; --mn-haut:#274634;
  --mn-creme:#f1e7d0; --mn-texte:#dfd7c3; --mn-doux:#b9c6b4; --mn-sourd:#7a8c78;
  --mn-or:#d9b56a; --mn-menthe:#7fbfa8; --mn-rouge:#c9503f; --mn-rose:#e9a196;
  --mn-bord:rgba(241,231,208,.1); --mn-bord-fort:rgba(241,231,208,.18);
  --mn-serif:Lora,Georgia,"Times New Roman",serif;
  --mn-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
}
/* La feuille : plein écran, la vallée floutée dessous. */
dialog.mn-menu{
  position:fixed;inset:0;z-index:50;margin:0;max-width:none;max-height:none;
  width:100%;height:100%;box-sizing:border-box;padding:0;border:0;overflow:hidden;
  display:flex;flex-direction:column;
  background:rgba(18,42,32,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--mn-creme);font:15px/1.45 "Helvetica Neue",Helvetica,"Segoe UI",system-ui,sans-serif;
}
dialog.mn-menu::backdrop{background:rgba(6,22,16,.55);backdrop-filter:blur(6px) saturate(.8)}
.mn-menu *{box-sizing:border-box}
.mn-menu :focus-visible{outline:3px solid var(--mn-or);outline-offset:2px}
.mn-menu h1{margin:0;font:600 30px/1.15 var(--mn-serif)}
.mn-menu h2{margin:0;font:600 20px/1.2 var(--mn-serif)}
.mn-menu h3{margin:0;font:600 18px/1.25 var(--mn-serif)}
.mn-etiquette{font:600 11px/1.3 var(--mn-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mn-doux)}

/* ---------- le bandeau : il ne quitte jamais l'écran ---------- */
.mn-bandeau{
  display:grid;grid-template-columns:auto 1fr auto auto;
  grid-template-areas:'nain vide encours fermer' 'reserves reserves reserves reserves';
  align-items:center;gap:8px 14px;padding:10px 16px;flex:none;
  padding-top:calc(10px + env(safe-area-inset-top));
  border-bottom:1px solid rgba(241,231,208,.12);background:rgba(18,42,32,.85);
}
.mn-bandeau-nain{grid-area:nain;display:flex;align-items:center;gap:10px;text-align:left;
  background:rgba(241,231,208,.06);border:1px solid rgba(241,231,208,.14);border-radius:12px;
  padding:6px 12px 6px 6px;color:var(--mn-creme);cursor:pointer;min-height:44px;font:inherit}
.mn-portrait{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:linear-gradient(160deg,#b8804a,#6d4526);font:700 17px var(--mn-serif);color:var(--mn-creme)}
.mn-bandeau-nain>span:nth-child(2){display:block;min-width:0}
.mn-bandeau-nom{display:block;font:600 16px/1.15 var(--mn-serif)}
.mn-bandeau-nom span{font:11px/1 var(--mn-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mn-doux);margin-left:6px}
.mn-bandeau-lieu{display:block;font-size:12px;color:var(--mn-doux);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:34ch}
.mn-reserves{grid-area:reserves;display:flex;align-items:center;gap:14px;overflow-x:auto;min-width:0;
  padding-bottom:2px;font-size:14px;scrollbar-width:thin}
.mn-bourse{font:700 16px/1 var(--mn-serif);color:var(--mn-or);white-space:nowrap}
.mn-bourse span{font:400 13px/1 inherit;color:var(--mn-doux);font-family:inherit}
.mn-reserves button{background:none;border:0;color:var(--mn-creme);cursor:pointer;padding:4px 2px;
  font:inherit;font-size:14px;min-height:32px;white-space:nowrap}
.mn-reserves button span{color:var(--mn-doux)}
.mn-reserves button:hover b{color:var(--mn-or)}
.mn-encours{grid-area:encours;display:flex;align-items:center;gap:10px;background:var(--mn-panneau);
  border:1px solid rgba(217,181,106,.45);border-radius:12px;padding:8px 14px;color:var(--mn-creme);
  cursor:pointer;min-height:44px;font:inherit;text-align:left}
.mn-pouls{width:8px;height:8px;border-radius:50%;background:var(--mn-menthe);flex:none;animation:mn-pouls 1.6s infinite}
@keyframes mn-pouls{0%,100%{opacity:.35}50%{opacity:1}}
.mn-encours-titre{display:block;font:600 10px/1.4 var(--mn-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mn-doux)}
.mn-encours-quoi{font-size:14px;white-space:nowrap}
.mn-fermer{grid-area:fermer;display:flex;align-items:center;gap:8px;background:rgba(241,231,208,.06);
  border:1px solid var(--mn-bord-fort);border-radius:12px;padding:10px 14px;color:var(--mn-creme);
  font:inherit;font-weight:700;cursor:pointer;min-height:44px}

/* ---------- le corps : rail + écran ---------- */
.mn-corps{display:flex;flex:1;min-height:0}
.mn-rail{width:188px;flex:none;padding:16px 10px;border-right:1px solid var(--mn-bord);
  display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.mn-rail button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
  border-radius:10px;padding:10px;color:var(--mn-texte);font:inherit;font-size:15px;cursor:pointer;
  min-height:44px;text-align:left}
.mn-rail button:hover{background:rgba(241,231,208,.06)}
.mn-rail button[aria-current="page"]{background:rgba(217,181,106,.12);color:var(--mn-creme);font-weight:700}
.mn-barre{width:4px;height:22px;border-radius:2px;background:transparent;flex:none}
.mn-rail button[aria-current="page"] .mn-barre{background:var(--mn-or)}
.mn-rail-espace{flex:1}
.mn-badge{background:var(--mn-rouge);color:#fff;font:700 11px/1.5 inherit;border-radius:10px;padding:1px 7px}
.mn-ecran{flex:1;min-width:0;overflow-y:auto;padding:24px 28px 96px;-webkit-overflow-scrolling:touch}
.mn-page{max-width:1180px;margin:0 auto}
.mn-intro{color:var(--mn-doux);margin:4px 0 14px}

/* ---------- les briques ---------- */
.mn-carte{background:var(--mn-panneau);border:1px solid var(--mn-bord);border-radius:16px;padding:20px}
.mn-carte-haute{background:var(--mn-haut);border-color:rgba(217,181,106,.35)}
.mn-deux{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) 320px}
.mn-detail{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) 360px}
.mn-colonne{display:grid;gap:18px;min-width:0}
.mn-flanc{display:grid;gap:18px;align-content:start;min-width:0}
.mn-menu button.mn-primaire{background:var(--mn-or);border:0;color:#1a2a20;font-weight:700;
  border-radius:10px;padding:12px 18px;min-height:44px;font-size:15px;cursor:pointer;font-family:inherit}
.mn-menu button.mn-primaire:disabled{background:rgba(217,181,106,.35);cursor:not-allowed}
.mn-menu button.mn-fantome{background:rgba(241,231,208,.06);border:1px solid var(--mn-bord-fort);
  color:var(--mn-creme);border-radius:10px;padding:12px 16px;min-height:44px;font-size:15px;cursor:pointer;font-family:inherit}
.mn-menu button.mn-fantome:disabled{background:rgba(241,231,208,.03);border-color:rgba(241,231,208,.1);color:var(--mn-sourd);cursor:not-allowed}
.mn-menu button.mn-danger{background:none;border:1px solid var(--mn-rouge);color:var(--mn-rose);
  border-radius:10px;padding:12px 16px;min-height:44px;font-size:15px;cursor:pointer;font-family:inherit}
.mn-menu button.mn-lien{background:none;border:0;color:var(--mn-or);cursor:pointer;padding:0;
  font:inherit;min-height:40px;text-align:left}
.mn-menu button.mn-lien:hover{color:var(--mn-creme)}
.mn-onglets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.mn-menu button.mn-puce{background:rgba(241,231,208,.05);border:1px solid rgba(241,231,208,.14);
  color:var(--mn-texte);border-radius:10px;padding:8px 14px;min-height:40px;font-size:14px;cursor:pointer;font-family:inherit}
.mn-menu button.mn-puce[aria-pressed="true"]{background:var(--mn-haut);border-color:var(--mn-or);color:var(--mn-creme)}
.mn-menu button.mn-puce:disabled{background:none;border-style:dashed;color:var(--mn-sourd);cursor:not-allowed}
.mn-jauge{height:6px;background:rgba(241,231,208,.12);border-radius:3px;overflow:hidden}
.mn-jauge i{display:block;height:100%;border-radius:3px}
.mn-pastille{font-size:12px;border-radius:6px;padding:2px 8px;white-space:nowrap}
.mn-status{padding:10px 12px;border-radius:10px;font-size:14px;
  background:rgba(127,191,168,.12);border:1px solid rgba(127,191,168,.4)}

/* ---------- le panneau « En cours », commun à tous les écrans ---------- */
.mn-panneau-encours{position:fixed;top:72px;right:16px;width:min(420px,calc(100vw - 32px));z-index:40;
  background:var(--mn-panneau);border:1px solid rgba(217,181,106,.4);border-radius:16px;padding:18px;
  max-height:calc(100dvh - 120px);overflow:auto;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.mn-panneau-encours[hidden]{display:none}
.mn-panneau-tete{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.mn-croix{background:none;border:1px solid var(--mn-bord-fort);border-radius:8px;color:var(--mn-creme);
  width:36px;height:36px;cursor:pointer;flex:none;font:inherit}

/* ---------- le téléphone : barre basse à cinq, et « Plus » ---------- */
.mn-barre-basse{position:fixed;bottom:0;left:0;right:0;display:none;grid-template-columns:repeat(5,1fr);
  background:#1a3128;border-top:1px solid rgba(241,231,208,.14);z-index:30;padding-bottom:env(safe-area-inset-bottom)}
.mn-barre-basse button{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:0;padding:10px 4px 12px;color:var(--mn-doux);font:500 12px/1.2 inherit;
  min-height:64px;cursor:pointer}
.mn-barre-basse button[aria-current="page"]{color:var(--mn-creme);font-weight:700}
.mn-barre-basse .mn-barre{width:20px;height:3px}
.mn-barre-basse .mn-badge{position:absolute;top:6px;right:14px;font-size:10px;padding:0 5px}
.mn-plus{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:29;
  display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px;
  background:var(--mn-panneau);border-top:1px solid rgba(217,181,106,.4);border-radius:16px 16px 0 0;
  box-shadow:0 -20px 40px rgba(0,0,0,.4)}
.mn-plus[hidden]{display:none}

@media(max-width:999px){ .mn-deux{grid-template-columns:1fr} }
@media(max-width:759px){
  .mn-rail{display:none}
  .mn-barre-basse{display:grid}
  .mn-detail{grid-template-columns:1fr}
  .mn-ecran{padding:16px 16px calc(96px + env(safe-area-inset-bottom))}
  .mn-bandeau{grid-template-columns:1fr auto;grid-template-areas:'nain fermer' 'encours encours' 'reserves reserves'}
  .mn-encours{width:100%}
  .mn-encours-quoi{white-space:normal}
  .mn-panneau-encours{top:auto;bottom:calc(72px + env(safe-area-inset-bottom));right:8px;left:8px;width:auto;max-height:60dvh}
  .mn-menu h1{font-size:25px}
}
@media(prefers-reduced-motion:reduce){ .mn-pouls{animation:none;opacity:.9} }

/* ---------- « Mon nain » : la carte d'identité et l'activité ---------- */
.mn-identite{display:grid;gap:18px;grid-template-columns:120px minmax(0,1fr);padding:22px;margin-bottom:18px}
.mn-portrait-grand{width:120px;height:150px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(160deg,#b8804a,#6d4526);font:700 44px var(--mn-serif);color:var(--mn-creme)}
.mn-grand-nom{margin:2px 0 4px;font:600 34px/1.05 var(--mn-serif)}
.mn-sous-titre{color:var(--mn-doux);margin-bottom:14px}
.mn-jauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px 18px}
.mn-jauge-haut{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.mn-activite{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.mn-activite-texte{flex:1;min-width:220px}
.mn-activite-quoi{font:600 22px/1.2 var(--mn-serif);margin:4px 0}
.mn-activite-detail{color:var(--mn-doux);font-size:14px}
.mn-activite-actions{display:flex;gap:8px;flex-wrap:wrap}
.mn-decision{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}
.mn-decision .mn-intro{margin:4px 0 0}
.mn-decisions{display:grid;gap:10px}
@media(max-width:559px){
  .mn-identite{grid-template-columns:1fr;justify-items:start}
  .mn-portrait-grand{width:84px;height:104px;font-size:32px}
  .mn-grand-nom{font-size:27px}
  .mn-activite-actions{width:100%}
  .mn-activite-actions button{flex:1}
}

/* ---------- les chapitres du carnet, habillés par le nouveau système ---------- */
.mn-menu .vj-chapitres{color:var(--mn-creme)}
.mn-menu .vj-onglets{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px;padding:0;border:0;overflow:visible}
.mn-menu .vj-onglets button{background:rgba(241,231,208,.05);border:1px solid rgba(241,231,208,.14);
  color:var(--mn-texte);border-radius:10px;padding:8px 14px;min-height:40px;font-size:14px;cursor:pointer;margin:0}
.mn-menu .vj-onglets button[aria-selected="true"]{background:var(--mn-haut);border-color:var(--mn-or);color:var(--mn-creme);font-weight:700}
.mn-menu .vj-onglets button.vj-onglet-inactif{border-style:dashed;color:var(--mn-sourd)}
.mn-menu .vj-chapitre{border:0;padding:0;margin:0 0 18px}
.mn-menu .vj-chapitre>.vj-chapitre-titre{margin:0 0 10px;font:600 22px/1.2 var(--mn-serif);color:var(--mn-creme)}
.mn-menu .vj-chapitre h4{margin:10px 0 4px;font:600 17px/1.25 var(--mn-serif);color:var(--mn-creme)}
.mn-menu .vj-chapitre p{font-size:14px;line-height:1.5;color:var(--mn-texte)}
.mn-menu .vj-chapitre small,.mn-menu .vj-matiere{display:block;font:11px/1.5 var(--mn-mono);color:var(--mn-doux);opacity:1}
.mn-menu .vj-chapitre article{padding:14px;margin-bottom:10px;background:var(--mn-panneau);
  border:1px solid var(--mn-bord);border-radius:14px}
.mn-menu .vj-chapitre label{display:grid;gap:5px;margin:12px 0;font-size:13px;color:var(--mn-doux)}
/*
 * TOUS les boutons du menu, sans exception (21 septembre, Emeric : « il y a des
 * boutons blancs ! »). Les quatre pages de l'atelier ayant quitté leur chapitre
 * pour rejoindre leur destination, une règle visant `.vj-chapitre button` ne les
 * atteignait plus : elles retombaient sur le bouton gris du navigateur. On
 * habille donc par défaut, et on rhabille ensuite les boutons qui ont un rôle.
 */
.mn-menu button,.mn-menu select,.mn-menu input,.mn-menu summary{font-family:inherit;color:var(--mn-creme)}
.mn-menu button{background:rgba(241,231,208,.06);border:1px solid var(--mn-bord-fort);color:var(--mn-creme);
  border-radius:10px;padding:9px 13px;min-height:44px;font-size:15px;cursor:pointer;margin:0;max-width:100%;white-space:normal}
.mn-menu button:hover{background:rgba(241,231,208,.12);border-color:var(--mn-or)}
.mn-menu .vj-chapitre button,.mn-menu .vj-nouveau button,.mn-menu .vj-suivis button,
.mn-menu .ae-page button,.mn-menu .vj-atelier-economie button{margin:5px 6px 5px 0}
.mn-menu button:disabled{opacity:.45;cursor:not-allowed}
.mn-menu select,.mn-menu input[type=number],.mn-menu input[type=text],.mn-menu input[type=search]{
  width:100%;min-width:0;box-sizing:border-box;background:var(--mn-haut);color:var(--mn-creme);
  border:1px solid var(--mn-bord-fort);border-radius:10px;padding:10px;min-height:44px}
.mn-menu .vj-nouveau{border:0;margin-top:12px}
.mn-menu .vj-nouveau .vj-commencer{display:block;width:100%;background:var(--mn-or);color:#1a2a20;
  border:0;font-weight:700;margin-top:10px}
.mn-menu .vj-etat{color:var(--mn-or);border-left:2px solid var(--mn-or);padding-left:10px;font-size:13px;margin:0 0 12px}
.mn-menu .vj-etat:empty{display:none}
.mn-menu .vj-intro,.mn-menu .vj-vide,.mn-menu .vj-limites,.mn-menu .vj-explication{color:var(--mn-doux);font-size:13px}
.mn-menu .vj-manque{color:var(--mn-rose);font-weight:650}
.mn-menu .vj-projet,.mn-menu .vj-engagement{border:0;border-top:1px solid var(--mn-bord);padding:14px 0}
.mn-menu .vj-projet progress,.mn-menu .vj-engagement progress{display:block;width:100%;height:6px;
  accent-color:var(--mn-or);border:0;border-radius:3px;margin:12px 0 6px;background:rgba(241,231,208,.12)}
.mn-menu .vj-inventaire{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:12px 0 18px;padding:0;list-style:none}
.mn-menu .vj-tuile{display:grid;justify-items:center;gap:4px;margin:0;padding:12px 8px;text-align:center;
  background:var(--mn-panneau);border:1px solid var(--mn-bord);border-radius:12px;min-height:84px}
.mn-menu .vj-tuile b{font-size:13px}
.mn-menu .vj-tuile small{color:var(--mn-or);font:600 12px var(--mn-mono)}
.mn-menu .vj-repli summary{cursor:pointer;color:var(--mn-doux);font-size:13px;padding:8px 0}
.mn-menu .vj-retour{display:none}
.mn-menu .vj-nouveau[hidden],.mn-menu [hidden]{display:none}
.mn-menu .ae-page,.mn-menu .vj-atelier-section{border:0;padding:0}
.mn-menu .vj-atelier-section>summary{font:600 20px var(--mn-serif);color:var(--mn-or);cursor:pointer;padding:8px 0}
.mn-menu .vj-atelier-carte,.mn-menu .ae-carte{background:var(--mn-panneau);border:1px solid var(--mn-bord);border-radius:14px;padding:14px}
.mn-menu .ae-surtitre{font:600 11px var(--mn-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mn-doux)}
.mn-menu .ae-entete{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.mn-menu .vj-chapitres[data-onglets="oui"] .vj-chapitre>.vj-chapitre-titre{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mn-aussi{display:grid;gap:2px;margin-bottom:18px}
.mn-menu button.mn-lien-ligne{background:none;border:0;border-bottom:1px solid var(--mn-bord);color:var(--mn-creme);
  text-align:left;padding:10px 0;min-height:44px;cursor:pointer;font:inherit;margin:0;border-radius:0}
.mn-menu button.mn-lien-ligne:last-child{border-bottom:0}
.mn-menu button.mn-lien-ligne:hover{color:var(--mn-or)}

/* Les boutons à rôle, après la règle générale : le rail, la barre basse, les liens. */
.mn-menu .mn-rail button,.mn-menu .mn-barre-basse button,.mn-menu button.mn-lien,.mn-menu button.mn-lien-ligne{
  background:none;border:0}
.mn-menu .mn-rail button:hover{background:rgba(241,231,208,.06);border:0}
.mn-menu .mn-barre-basse button:hover,.mn-menu button.mn-lien:hover,.mn-menu button.mn-lien-ligne:hover{background:none;border:0}
.mn-menu button.mn-lien-ligne{border-bottom:1px solid var(--mn-bord)}
.mn-menu button.mn-lien-ligne:last-child{border-bottom:0}
.mn-menu button.mn-primaire{background:var(--mn-or);border:0}
.mn-menu button.mn-primaire:hover{background:#e6c47f;border:0}
.mn-menu button.mn-primaire:disabled{background:rgba(217,181,106,.35)}
.mn-menu button.mn-danger{background:none;border:1px solid var(--mn-rouge)}
.mn-menu .vj-nouveau .vj-commencer{background:var(--mn-or);border:0;color:#1a2a20}
.mn-menu button.mn-croix{padding:0}
/* Les replis du carnet gardent leur flèche, pas un bouton. */
.mn-menu summary{cursor:pointer;color:var(--mn-doux)}
.mn-menu .ae-details summary,.mn-menu .vj-repli summary{font-size:13px;padding:8px 0}

/* ==========================================================================
   LES TROIS RETOURS DU 21 SEPTEMBRE AU SOIR.
   ========================================================================== */

/* 1. « Le menu doit pas prendre toute la page, on doit voir la vallée derrière
      avec un flou. » La feuille se pose en retrait ; le voile derrière elle
      floute la vallée sans l'effacer, et on la voit tout autour. */
dialog.mn-menu{
  inset:clamp(10px,2.4vh,34px) clamp(10px,3vw,56px);
  width:auto;height:auto;
  border:1px solid rgba(241,231,208,.16);border-radius:20px;
  background:rgba(18,42,32,.82);
  box-shadow:0 40px 90px rgba(0,0,0,.55);
}
dialog.mn-menu::backdrop{background:rgba(6,22,16,.3);backdrop-filter:blur(7px) saturate(.85);-webkit-backdrop-filter:blur(7px) saturate(.85)}
@media(max-width:759px){
  /* Sur un téléphone, la vallée n'a pas la place de se montrer : la feuille prend l'écran. */
  dialog.mn-menu{inset:0;border:0;border-radius:0;background:rgba(18,42,32,.94)}
}

/* 2. « La fiche du nain est trop petite sur PC, elle doit prendre la place de
      droite. » Au bureau, elle quitte la colonne de gauche pour la colonne de
      droite, haute comme l'écran ; le fil des événements lui laisse la place
      et revient dès qu'on la referme. */
/* L'hôte est posé à même le corps de page : un ancêtre flouté (l'écran
   d'accueil floute le panneau de gauche) devient sinon le cadre de référence
   d'une position fixe, et la fiche partait se coller hors de l'écran. */
#hote-fiche{position:fixed;right:clamp(14px,3.2vw,48px);top:97px;width:min(410px,34vw);z-index:7}
#hote-fiche:empty{display:none}
#hote-fiche>#fiche{position:relative;left:auto;right:auto;top:auto;width:100%;
  max-height:calc(100dvh - 150px);overflow:auto}
@media(min-width:900px){
  body:has(#hote-fiche>#fiche:not([hidden])) #panneau-droit{display:none}
  /* Rangée à droite, elle sort par la droite. */
  #hote-fiche>#fiche.fiche-sortie{animation:fiche-ranger-droite 220ms ease-in both}
  @keyframes fiche-ranger-droite{to{transform:translateX(calc(100% + 24px));opacity:0}}
  /* Pleine hauteur, le bouton « déplier » n'a plus d'objet. */
  #hote-fiche .fiche-plier{display:none}
}
@media(max-width:899px){ #hote-fiche{display:none} }

/* 3. « On n'accède pas assez vite aux outils. » Deux boutons en bas à gauche de
      la carte : les outils d'abord, la construction ensuite. */
#hud-bas-gauche{position:fixed;z-index:7;left:18px;bottom:calc(var(--jeu-bas,18px) + 6px);
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:calc(100vw - 36px)}
#hud-bas-gauche>button{position:static;inset:auto;margin:0}
#ouvrir-outils{border:1px solid #c5a660;border-radius:9px;background:#e9c471;color:#203b2b;
  padding:10px 14px;min-height:44px;font:700 13px/1 inherit;cursor:pointer;box-shadow:0 3px 14px #0004}
#ouvrir-outils:hover{background:#f3d189}
#ouvrir-construction{background:#203e2f;color:#fff2cf;box-shadow:0 3px 14px #0004}
#ouvrir-construction:hover{background:#2a4e3b}
body.accueil-ouvert #hud-bas-gauche{display:none}
@media(max-width:900px){
  #hud-bas-gauche{left:12px;bottom:calc(var(--jeu-bas) + 4px);gap:6px}
  #ouvrir-outils,#ouvrir-construction{padding:9px 11px;font-size:12px}
}
/* Les réserves du bandeau se lisent, elles ne se présentent pas en cadres. */
.mn-menu .mn-reserves button{background:none;border:0;border-radius:0;padding:4px 2px;min-height:32px;font-size:14px}
.mn-menu .mn-reserves button:hover{background:none;border:0}

/* ==========================================================================
   LE TÉLÉPHONE, REMIS D'APLOMB (27 septembre 2026, Emeric : « plein de boutons
   qui se superposent, la croix, le bouton cliquer sur mon nain et le nom de
   notre nain ; mets la fenêtre à gauche ; quand on ouvre le chat ça doit
   fermer les fenêtres »).
   ...........................................................................
   Mesuré sur un écran de 390 × 844, carte d'un nain ouverte :
     — le fil « ← Chez Claie › john C » courait SOUS le bouton ⤢ : le nom du
       nain passait derrière une commande ;
     — le bouton du chat (haut droite) se retrouvait entièrement sous la carte,
       qui occupe 12 → 372 px de large et 12 → 451 px de haut : intouchable ;
     — la fenêtre du chat s'ancrait à droite et sous la carte, donc on l'ouvrait
       sans rien voir apparaître.
   La règle est simple : une seule fenêtre à la fois, ancrée à gauche, et
   toutes les actions rapides sur une seule rangée au-dessus des onglets.
   ========================================================================== */
@media(max-width:900px){
  /* La hauteur de tout ce qui vit contre le bord bas : les onglets, puis la
     rangée d'actions. Ce qui doit les surmonter s'y réfère, au lieu de deviner. */
  :root{--jeu-actions:calc(var(--jeu-bas) + 56px)}

  /* La fenêtre du chat : à gauche, de la même largeur que la carte d'un nain,
     et jamais par-dessus la rangée d'actions. */
  .chat-vitre{
    left:12px;right:12px;width:auto;
    top:max(12px,env(safe-area-inset-top));
    z-index:45;
    max-height:calc(100dvh - var(--jeu-actions) - 24px)}

  /* La gouttière des deux commandes de la carte : le fil et le surtitre
     s'arrêtent avant elles, donc plus rien ne passe sous la croix. */
  #fiche:before,#fiche .f-contexte{padding-right:92px}

  /* Le bouton du chat rejoint la rangée du bas (voir placerChat dans ui.js) :
     dans le même conteneur, deux commandes ne peuvent plus se recouvrir. */
  #hud-bas-gauche{right:12px;max-width:none;justify-content:flex-start}
  #hud-bas-gauche>#chat-vitre-ouvrir{margin-left:auto;font-size:12px;padding:9px 11px;min-height:44px}

  /* Ce qui parlait depuis le bas de l'écran passe au-dessus de la rangée. */
  #cta{bottom:var(--jeu-actions)}
  #bandeau-regain{bottom:var(--jeu-actions)}

  /* Sous un toit, le panneau du logis (z40, 645 → 762 px) enterrait la rangée
     (z7, 714 → 758) : trois boutons présents et intouchables. Dedans, le logis
     EST la fenêtre, et la barre d'onglets porte déjà Chat et Mon nain. */
  body.vue-interieure #hud-bas-gauche{display:none}
}