: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}
#lien{display:flex;align-items:center;gap:7px;font-size:12px;padding:4px 10px;border-radius:99px;background:rgba(63,127,74,.14);color:var(--accent)}
#lien::before{width:7px;height:7px;flex:none;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 15%,transparent);content:''}
#lien[data-etat="reconnexion"]{background:rgba(192,83,47,.15);color:var(--alerte)}

#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)}
/* 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}
#lien{padding:6px 10px;border:1px solid rgba(226,212,145,.35);background:rgba(57,111,75,.55);color:#edf2c8;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
#lien[data-etat="reconnexion"]{border-color:rgba(235,156,114,.38);background:rgba(107,47,31,.62);color:#ffd1ae}
#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}
#fiche:before{content:'HABITANT DE LA VALLÉE'}#fiche-bat:before{content:'LIEU DE LA VALLÉE'}#fiche-bete:before{content:'BÊTE DE LA VALLÉE'}
#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){#lien{width:15px;padding:4px;font-size:0;gap:0;overflow:hidden}.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)}
#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)}

@media(max-width:820px){body.vue-interieure #dedans{inset:auto 12px 12px;width:calc(100vw - 24px);height:280px;display:grid;grid-template-columns:1.05fr .95fr;grid-template-rows:auto auto 1fr auto}.d-modes{top:12px;left:12px;transform:none}.d-modes button{min-width:94px;grid-template-columns:18px auto;padding:0 10px}.d-modes button span{display:inline}#dedans .d-tete{grid-column:1;padding:15px 14px 0 18px}.d-histoire{display:none}.d-metriques{grid-column:1;margin-top:10px}.d-metriques div{padding:9px 5px 8px 14px}.d-metriques dd{font-size:18px}.d-pieces{grid-column:2;grid-row:1/4;padding:15px 12px;border-left:1px solid var(--bord);border-bottom:0}#d-liste-pieces{grid-template-columns:1fr}.d-habitants{grid-column:1;padding:9px 14px 5px 18px}.d-actions{grid-column:1/-1;padding:8px 14px 12px 18px}.maison-room-label{display:none}body.vue-interieure #fiche:not([hidden]){left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:calc(100dvh - 86px)}body.vue-interieure:has(#fiche:not([hidden])) #dedans{display:none}}
/* Les pièces devenaient invisibles sur un téléphone : on entrait dans une
   maison sans pouvoir passer de la cuisine à la chambre. Elles deviennent une
   frise qui défile, « Tout voir » en tête, et rien ne se perd. */
@media(max-width:540px){body.vue-interieure #dedans{height:288px;grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr auto}#d-nom{font-size:26px}.d-pieces{grid-column:1;grid-row:auto;display:flex;align-items:center;gap:9px;padding:5px 14px 5px 18px;border:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}.d-pieces::-webkit-scrollbar{display:none}.d-pieces .d-section-tete{flex:none;margin:0}.d-pieces .d-section-tete h2{display:none}#d-liste-pieces{display:flex;gap:6px;width:max-content}#d-liste-pieces button{flex:none;padding:6px 11px;border-color:rgba(225,187,102,.22);border-radius:15px;white-space:nowrap}.d-metriques{margin-top:7px}.d-habitants{padding-block:7px}.d-habitants .d-section-tete{display:none}.d-actions{padding-top:4px}}
.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;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%);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}
.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);min-height:650px;max-height:calc(100dvh - 36px)}
.veille-identite{
  position:relative;display:flex;flex-direction:column;padding:34px 29px 28px;overflow:hidden;
  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 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;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}#lien{flex:none}.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){
  #cta{bottom:calc(78px + env(safe-area-inset-bottom))}
  #panneau-gauche{bottom:calc(76px + env(safe-area-inset-bottom))}
  body.vue-interieure #dedans{bottom:calc(74px + env(safe-area-inset-bottom))}
  /* 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:calc(72px + env(safe-area-inset-top));
    bottom:calc(74px + env(safe-area-inset-bottom));
    max-height:none}
  .journal-voile,.scrutin-voile,.decision-voile{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .toast-systeme{bottom:calc(86px + env(safe-area-inset-bottom))}
}

/* 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:flex;align-items:center;gap:14px;padding:12px 18px;max-width:min(92vw,560px);
  background:var(--panneau);border:1px solid var(--bord);border-radius:var(--r);
  box-shadow:var(--ombre);backdrop-filter:blur(14px);color:var(--creme)}
#bandeau-regain p{margin:0;font-size:13.5px}
#bandeau-regain button{flex:none;border:0;border-radius:8px;padding:9px 14px;cursor:pointer;
  background:#e2c678;color:#26301f;font-weight:700;font-size:12.5px}
#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 18px auto auto;margin:0;width:min(410px,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{color:#d3d0b8;font-size:13px}
.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-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-projets [hidden]{display:none}
@media(max-width:600px){.vj-projets{inset:auto 8px 8px;margin:0;width:calc(100vw - 16px);max-height:88dvh;padding:20px}.vj-projets h2{font-size:27px}.vj-projets button{min-height:44px}.vj-projets.vj-reduit{max-height:170px}}
.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; }