/* terres/terres.css — Les Terres Sauvages (prototype, 23/10/2026).
   Même famille visuelle que la Ferme (enseigne en planches, cartes crème,
   effets de pièces), transposée à une vallée sèche. Univers fixe : pas de
   thème de site. Animations coupées si prefers-reduced-motion. */
:root{
  --panel:#fffaf0; --line:#dcc9a4; --ink:#3a2c1a; --muted:#86745a;
  --gold:#e8c14a; --eau:#2f8fc8; --sable:#e2b77f; --rouge:#b03a2e;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{
  margin:0; font-family:'Segoe UI',system-ui,sans-serif; color:var(--ink);
  min-height:100vh; padding:14px 16px 80px; position:relative;
  background:linear-gradient(180deg,#8fbbe0 0%,#c9dfee 24%,#f1e3c4 42%,#e8c995 43%,#dcb57c 100%);
  transition:background 1.2s ease;
}
body.saison-seche{background:linear-gradient(180deg,#f0a65a 0%,#f8cf8e 24%,#fbe7bf 42%,#ebc488 43%,#d9a865 100%)}

/* ── Ciel ─────────────────────────────────────────────────────────── */
.skylayer{position:fixed; inset:0 0 auto 0; height:58vh; min-height:300px; overflow:hidden; z-index:0; pointer-events:none}
.sun{position:absolute; top:24px; right:9%; width:84px; height:84px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #fff6c8, #ffd75e 55%, #f5b93a 100%);
  box-shadow:0 0 50px 18px rgba(255,220,120,.5); animation:ts-soleil 7s ease-in-out infinite}
.saison-seche .sun{width:104px; height:104px; background:radial-gradient(circle at 38% 34%, #fffbe0, #ffc94a 50%, #f08a24 100%); box-shadow:0 0 90px 40px rgba(255,170,60,.6)}
@keyframes ts-soleil{50%{box-shadow:0 0 74px 28px rgba(255,220,120,.62)}}
.cloud{position:absolute; opacity:.92; animation:ts-nuage 160s linear infinite; transition:filter 1s, opacity 1s}
.cloud svg{display:block}
.cloud.c1{top:10%; left:6%}
.cloud.c2{top:26%; left:52%; animation-duration:210s; animation-delay:-70s}
.cloud.c3{top:4%; left:34%; animation-duration:250s; animation-delay:-150s}
.saison-pluie .cloud{filter:brightness(.92) drop-shadow(0 6px 6px rgba(60,80,110,.25))}
.saison-seche .cloud{opacity:.25}
@keyframes ts-nuage{from{transform:translateX(-40vw)}to{transform:translateX(115vw)}}
.ts-decor{position:absolute; left:0; right:0; bottom:0; width:100%; height:64%}
.ts-oiseau{animation:ts-vol 40s linear infinite}
.ts-oiseau.o2{animation-duration:55s; animation-delay:-22s}
@keyframes ts-vol{from{transform:translate(-10%,0)}50%{transform:translate(55%,-5%)}to{transform:translate(115%,2%)}}
.ts-aile{transform-box:fill-box; transform-origin:center bottom; animation:ts-battement .5s ease-in-out infinite alternate}
@keyframes ts-battement{to{transform:scaleY(.4)}}
.ts-drapeau{transform-box:fill-box; transform-origin:left center; animation:ts-flotte 1.6s ease-in-out infinite}
@keyframes ts-flotte{50%{transform:scaleX(.82) skewY(4deg)}}
.ts-poussiere{opacity:0; transition:opacity 1s}
.saison-seche .ts-poussiere{opacity:1; animation:ts-tourbillon 9s ease-in-out infinite}
@keyframes ts-tourbillon{0%{transform:translate(680px,238px)}50%{transform:translate(780px,232px) scaleX(-1)}100%{transform:translate(680px,238px)}}
/* pluie légère pendant la saison des pluies, forte au passage d'une lune */
.rideau-pluie{position:absolute; inset:0; opacity:0; transition:opacity 1s;
  background:repeating-linear-gradient(104deg, transparent 0 14px, rgba(255,255,255,.55) 14px 15px, transparent 15px 31px);
  background-size:62px 62px; animation:ts-pluie .5s linear infinite}
.saison-pluie .rideau-pluie{opacity:.18}
body.ts-averse .rideau-pluie{opacity:.75}
@keyframes ts-pluie{to{background-position:-16px 62px}}
.chaleur{position:absolute; left:0; right:0; bottom:0; height:30%; opacity:0; transition:opacity 1s;
  background:repeating-linear-gradient(0deg, rgba(255,240,200,.0) 0 6px, rgba(255,240,200,.18) 6px 8px);
  animation:ts-chaleur 2.6s ease-in-out infinite}
.saison-seche .chaleur{opacity:.6}
body.ts-canicule .chaleur{opacity:1}
@keyframes ts-chaleur{50%{transform:translateY(-4px) scaleY(1.04)}}

/* ── Page ─────────────────────────────────────────────────────────── */
.wrap{max-width:1280px; margin:0 auto; position:relative; z-index:1}
/* Mise en page : la vallée et ses onglets à gauche, le tableau de bord toujours visible à droite */
.jeu{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:16px; align-items:start}
.col-d{position:sticky; top:10px; max-height:calc(100vh - 20px); overflow-y:auto; border-radius:18px}
.tableau{padding:12px 14px; display:flex; flex-direction:column; gap:10px; margin-bottom:0}
.tableau .scenerow{height:66px; overflow:hidden; margin:-4px 0 -4px; justify-content:center}
.tableau .scenerow svg{max-height:66px; width:auto}
.li-nom{font-family:Georgia,'Times New Roman',serif; font-weight:700; font-size:1.15em; color:#4a3a1e}
.li-saison{font-size:.88em; color:#2f6e9a; font-weight:700}
.li-saison.seche{color:#b5591a}
.tableau .calendrier{gap:4px}
.tableau .conseil{margin:0; align-items:flex-start; font-weight:500; font-size:.93em}
.btn.mini{padding:5px 10px; font-size:.88em; margin-top:6px}
.tableau .btn.lune{width:100%}
.tableau .btn.lune small{font-weight:600; opacity:.85}
@media (max-height:850px){ .tableau .scenerow{display:none} .tableau{gap:8px} }
.tableau .lune-plafond{margin-top:-6px}
.petitbtn{align-self:center; padding:5px 12px; font-size:.85em}
.jg{display:flex; flex-direction:column; gap:3px}
.jg-t{display:flex; justify-content:space-between; gap:6px; font-size:.9em}
.jg-s{font-size:.8em; color:var(--muted)}
.jauge.grain i{background:linear-gradient(90deg,#d9a52e,#f0c24a)}
.c-tete{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:6px; margin-bottom:8px}
.c-tete .c-titre{margin:0}
.c-tete .surface{margin:0; font-size:.88em}
.vallee .hint{margin:8px 0 0}
.onglets{display:flex; gap:6px; flex-wrap:wrap; position:relative; z-index:2}
.onglets button{flex:1 1 0; min-width:0; padding:10px 8px; border-radius:12px 12px 0 0; border:2px solid var(--line); border-bottom:0; background:#efdfbd; font:inherit; font-weight:800; color:#6a5534; cursor:pointer; white-space:nowrap}
.onglets button.actif{background:var(--panel); color:var(--ink)}
.onglets button:focus-visible{outline:3px solid #2f6e9a; outline-offset:-3px}
.pastille{display:inline-block; min-width:1.4em; margin-left:6px; padding:0 .4em; border-radius:999px; background:#c0392b; color:#fff; font-size:.78em; line-height:1.5}
.panneau{border-top-left-radius:0; border-top-right-radius:0; margin-top:-2px}
.panneau[hidden]{display:none}
.mini-agr{margin-top:5px; padding:3px 8px; border-radius:8px; border:1.5px solid #8a6ab8; background:#f1e8fb; color:#4a2a7a; font:inherit; font-size:.7em; font-weight:800; cursor:pointer}
.mini-agr:hover{background:#e3d2f7}
.reserve.ajout.royal .plus{font-size:1.6em}
.btn.royal{background:linear-gradient(90deg,#8a5ab8,#b58ae0); color:#fff}
/* élevage */
.el-resume{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px}
.troupeau .mouton svg{width:46px}
/* classement (même présentation que la Ferme) */
.lb-title{font-weight:800; text-align:center; margin-bottom:6px; color:#4a3a1e; font-family:Georgia,'Times New Roman',serif; font-size:1.1em}
.lb-list{display:flex; flex-direction:column; gap:4px; max-width:520px; margin:0 auto}
.lb-row{display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; background:#f6efdc; font-size:.9em}
.lb-row.lb-me{background:#fff3c4; border:1px solid var(--gold)}
.lb-rank{font-weight:800} .lb-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lb-score{font-weight:800; color:#a8791a; font-variant-numeric:tabular-nums}
.lb-mine{text-align:center; margin-top:8px; font-size:.85em; color:var(--muted)}
.lb-empty{text-align:center; color:var(--muted); font-size:.88em; padding:8px}
.onglets button{font-size:.92em}
.el-resume > div{background:#fbf3e2; border:2px solid var(--line); border-radius:12px; padding:8px 10px; display:flex; flex-direction:column; gap:3px; font-size:.88em}
.troupeau{display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin:6px 0 10px; padding:8px; border-radius:14px; background:linear-gradient(180deg,#bfe08f,#93c25e)}
.troupeau .vache svg{width:58px; height:auto; display:block}
#elevage .stock{margin:10px 0 6px; text-align:center}
#elevage .actions{margin-top:10px}
@media (max-width:1100px){ .el-resume{grid-template-columns:1fr 1fr} }
@media (max-width:700px){ .el-resume{grid-template-columns:1fr} }
@media (max-width:900px){
  .jeu{grid-template-columns:1fr}
  .col-d{position:static; order:-1}
  .tableau .scenerow{display:none}
}
.haut{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
a.back{display:inline-flex; gap:6px; color:#3d2a12; font-weight:800; text-decoration:none; font-size:.9em}
a.back:hover{text-decoration:underline}
.proto{font-size:.75em; font-weight:800; background:#fff3c4; border:1px solid #e2b84a; color:#6b4a14; padding:3px 9px; border-radius:20px}

header{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px;
  border:3px solid #6b4022; border-radius:14px; padding:12px 18px;
  box-shadow:0 6px 14px rgba(60,35,10,.25), inset 0 2px 0 rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 14px 14px, #5b3a1c 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 14px) 14px, #5b3a1c 0 3px, transparent 3.5px),
    radial-gradient(circle at 14px calc(100% - 14px), #5b3a1c 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #5b3a1c 0 3px, transparent 3.5px),
    repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 21px, rgba(60,32,12,.35) 21px 23px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 3px, rgba(0,0,0,.03) 3px 7px),
    linear-gradient(160deg,#c98a52,#9e5f35);
}
h1{margin:0; font-size:1.5em; font-weight:900; color:#fff6df; text-shadow:0 2px 2px rgba(0,0,0,.35); font-family:Georgia,'Times New Roman',serif}
.hud{display:flex; gap:8px; flex-wrap:wrap}
.pill{background:var(--panel); border:2px solid var(--line); border-radius:20px; padding:6px 13px; font-weight:800; font-size:.92em; box-shadow:0 2px 4px rgba(0,0,0,.15); white-space:nowrap}
.pill.coin{color:#a8791a; background:linear-gradient(180deg,#fff7d6,#ffe9a3); border-color:#e2b84a}
.pill.water{color:#1a6a9a; background:linear-gradient(180deg,#eefaff,#cdeefc); border-color:#8ccbe6}
.pill.trophee{color:#8a5a00}
.pill.lune{color:#4a3a6a}
.pill.ts-tilt{animation:ts-tilt .5s ease}
@keyframes ts-tilt{25%{transform:rotate(-4deg) scale(1.08)}75%{transform:rotate(3deg) scale(1.05)}}

.conseil{display:flex; gap:10px; align-items:center; background:rgba(255,250,236,.93); border:2px solid #c9a86a; border-radius:14px; padding:9px 14px; margin-bottom:6px; font-weight:600; box-shadow:0 4px 10px rgba(80,50,10,.15)}
.conseil .perso{font-size:1.7em; flex:0 0 auto}

.scenerow{display:flex; align-items:flex-end; gap:6px; margin-bottom:-8px; padding:0 6px; position:relative; z-index:1}
.scenerow svg{display:block; filter:drop-shadow(0 4px 3px rgba(80,50,20,.22))}
.scenerow .grow{flex:1}
.ts-fumee{animation:ts-fumee 4s ease-in-out infinite}
@keyframes ts-fumee{0%{transform:translate(0,4px);opacity:.2}50%{opacity:1}100%{transform:translate(4px,-8px);opacity:0}}
.ts-flamme{transform-box:fill-box; transform-origin:center bottom; animation:ts-flamme .7s ease-in-out infinite alternate}
.ts-flamme.f2{animation-duration:.5s}
@keyframes ts-flamme{to{transform:scaleY(.82) scaleX(1.08)}}

.carte{background:var(--panel); border:2px solid var(--line); border-radius:18px; padding:14px 16px 16px; box-shadow:0 8px 22px rgba(90,60,20,.2); position:relative; z-index:1; margin-bottom:16px}
.c-titre{margin:0 0 6px; font-size:1.15em; color:#4a3a1e; font-family:Georgia,'Times New Roman',serif}
.hint{font-size:.85em; color:var(--muted); margin:0 0 10px}
.deux{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.deux .carte{margin-bottom:16px}

/* ── La vallée (parcelles) ─────────────────────────────────────────── */
.terres{
  display:grid; grid-template-columns:repeat(6,1fr); gap:8px; padding:12px; border-radius:16px;
  background:linear-gradient(160deg,#e8c48c,#c99a5c);
  box-shadow:0 0 0 5px #b07a48, 0 0 0 7px #7d532e, 0 10px 22px rgba(60,40,10,.3), inset 0 0 22px rgba(90,50,10,.3);
}
.lot{position:relative; aspect-ratio:1/1; border:0; padding:0; border-radius:12px; overflow:hidden; cursor:pointer; background:#d9b07a;
  box-shadow:inset 0 0 0 2px rgba(90,55,20,.3); transition:transform .12s ease, box-shadow .12s ease, filter .6s; font:inherit; color:inherit}
.lot svg{width:100%; height:100%; display:block}
.lot:hover{transform:translateY(-3px) scale(1.04); z-index:2; box-shadow:0 8px 12px rgba(40,30,10,.3)}
.lot:focus-visible{outline:3px solid #2f6e9a; outline-offset:2px}
.lot.lointain{filter:saturate(.55) brightness(.86)}
.lot.lointain:hover{transform:none; box-shadow:inset 0 0 0 2px rgba(90,55,20,.3)}
.lot.prochain{box-shadow:0 0 0 3px #fff3c4, 0 0 14px 3px rgba(242,201,76,.75)}
.lot.prochain.abordable{animation:ts-appel 2.2s ease-in-out infinite}
@keyframes ts-appel{50%{box-shadow:0 0 0 3px #f2c94c, 0 0 22px 6px rgba(242,201,76,.95)}}
.lot-aire{position:absolute; left:4px; right:4px; bottom:4px; text-align:center; font-size:.68em; font-weight:900; color:#fff; background:rgba(60,35,12,.72); border-radius:7px; padding:2px 0}
.lot-panneau{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; font-size:.66em; font-weight:800; line-height:1.25;
  background:linear-gradient(160deg,#c98a52,#9e5f35); color:#fff6df; border:2px solid #5e3518; border-radius:8px; padding:4px 7px; box-shadow:0 3px 5px rgba(0,0,0,.3); white-space:nowrap}
.lot-loin{position:absolute; right:5px; bottom:3px; font-size:.8em; opacity:.8}
.saison-seche .lot.cultive.soif{filter:sepia(.55) saturate(.7) brightness(.95)}
.surface{text-align:center; margin-top:16px; font-size:.92em}
.actions{display:flex; gap:10px; justify-content:center; margin-top:12px; flex-wrap:wrap}

.btn{padding:10px 16px; border-radius:10px; border:none; font-weight:800; cursor:pointer; font-size:.92em; font-family:inherit;
  background:linear-gradient(90deg,#7cae5a,#9ecb7e); color:#20390f; box-shadow:0 2px 0 rgba(30,60,10,.35)}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--panel); border:2px solid var(--line); color:var(--ink); box-shadow:none}
.btn.lune{background:linear-gradient(90deg,#4a5a9a,#6f7fc0); color:#fff; font-size:1em; padding:12px 20px}
.btn:disabled{opacity:.45; cursor:not-allowed; filter:none}
.btn.lune.epuise{background:linear-gradient(90deg,#6c6a80,#8b8aa0); opacity:.8}

/* ── Almanach ──────────────────────────────────────────────────────── */
.calendrier{display:grid; grid-template-columns:repeat(6,1fr); gap:4px; margin:4px 0 10px}
.l-case{display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 2px; border-radius:10px; background:#eef3fb; border:2px solid transparent; font-size:.66em; font-weight:700; color:#4a5a7a}
.l-case svg{width:30px; height:30px}
.l-case.seche{background:#fdebd0; color:#9a5a1a}
.l-case.active{border-color:#4a5a9a; box-shadow:0 0 0 2px #fff, 0 0 10px rgba(74,90,154,.5); transform:scale(1.06)}
.l-case.seche.active{border-color:#d9822b; box-shadow:0 0 0 2px #fff, 0 0 10px rgba(217,130,43,.6)}
.alm-ligne{margin:6px 0; font-size:.92em}
.alm-ligne.besoin{padding:7px 10px; border-radius:10px; background:#eaf6ea; border:1px solid #9cc79c}
.alm-ligne.besoin.court{background:#fdeee0; border-color:#e0a370}
.petit{font-size:.8em; color:var(--muted)}

/* ── Réserves ──────────────────────────────────────────────────────── */
.jauge{position:relative; height:12px; background:#e8dcc4; border-radius:8px; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.2)}
.jauge.grande{height:18px; overflow:visible}
.jauge i{display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,#5fc3ec,#1f6fa8); transition:width 1.6s cubic-bezier(.3,.7,.3,1);
  background-size:40px 100%; position:relative}
.jauge.grande i::after{content:""; position:absolute; inset:0; border-radius:8px; background:repeating-linear-gradient(120deg, rgba(255,255,255,.0) 0 10px, rgba(255,255,255,.25) 10px 14px); animation:ts-courant 2s linear infinite}
@keyframes ts-courant{to{background-position:28px 0}}
.jauge .repere{position:absolute; top:-5px; bottom:-5px; width:3px; margin-left:-1.5px; background:#d9822b; border-radius:2px}
.jauge .repere::after{content:"☀️"; position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:12px}
#jaugeEau{margin:18px 0 10px}
.j-val{font-size:.85em; margin-top:6px}
.reserves{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px}
.reserve{background:linear-gradient(180deg,#fbf3e2,#f1e2c2); border:2px solid var(--line); border-radius:12px; padding:6px 4px 8px; text-align:center; font:inherit; color:inherit}
.reserve .r-dessin{height:86px; display:flex; align-items:flex-end; justify-content:center}
.reserve .r-dessin > svg, .ts-res-boite{width:100%; height:100%}
.ts-res-boite{display:flex; align-items:flex-end; justify-content:center}
.ts-res-boite svg{width:calc(100% * var(--ts-k,1)); height:calc(100% * var(--ts-k,1))}
.r-nom{display:block; font-size:.72em; font-weight:800; margin-top:2px; line-height:1.2}
.r-cap{font-size:.8em; color:#1a6a9a; font-weight:800}
.r-entretien{font-size:.68em; color:#8a5a1a; font-weight:800}
/* grenier et marché */
.cours-titre{font-weight:900; margin-bottom:6px}
.cours-barres{display:grid; grid-template-columns:repeat(6,1fr); gap:6px; align-items:end; height:120px; margin-bottom:6px}
.cb{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; font-size:.72em}
.cb i{display:block; width:70%; background:linear-gradient(180deg,#f0c24a,#c99a2e); border-radius:6px 6px 2px 2px; box-shadow:inset 0 0 0 1px rgba(90,60,10,.3)}
.cb.seche i{background:linear-gradient(180deg,#ffb35c,#d9782a)}
.cb b{margin-top:3px} .cb span{color:var(--muted)}
.cb.active{outline:3px solid #2f6e9a; outline-offset:2px; border-radius:6px}
#silos{margin-top:10px}
#grenierActions .stock{margin:10px 0 6px; text-align:center}
#grenierActions .actions{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.lot.soif{filter:sepia(.7) saturate(.6) brightness(.92)}
.reserve.ajout{cursor:pointer; border-style:dashed; background:rgba(255,255,255,.6); display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:120px}
.reserve.ajout .plus{font-size:2em; color:#7cae5a; font-weight:900}
.reserve.ajout:hover:not(:disabled){border-color:var(--gold)}
.reserve.ajout:disabled{cursor:not-allowed; opacity:.6}
.ts-vague{animation:ts-vague 3s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
@keyframes ts-vague{50%{transform:scaleX(.97) translateY(.6px)}}

/* ── Ouvrages ──────────────────────────────────────────────────────── */
.ouvrages{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.ouvrage{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; background:#f6efdc; border:1px solid var(--line)}
.o-ic{font-size:1.6em; width:36px; text-align:center}
.o-txt{flex:1; min-width:0}
.o-txt small{display:block; color:var(--muted); font-size:.8em}
.o-etat{font-size:.8em; font-weight:800; text-align:right; max-width:42%}
.ouvrage.fait{background:#eaf6ea; border-color:#9cc79c}
.ouvrage.pret{background:#fff3c4; border-color:var(--gold)}
.ouvrage.verrou .o-ic, .ouvrage.bientot .o-ic{filter:grayscale(.8); opacity:.6}
.ouvrage.bientot{opacity:.75; border-style:dashed}
.ouvrage.bientot .o-etat{color:#7a5aa8}
.bilan{margin-top:10px; font-size:.8em; color:var(--muted); text-align:center}

footer{text-align:center; margin-top:16px; font-size:.8em; color:#5a4428; position:relative; z-index:1}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:#2c2013; color:#fff6df; padding:10px 18px; border-radius:10px; font-weight:700; font-size:.9em; opacity:0; pointer-events:none; transition:opacity .2s; z-index:80; max-width:calc(100vw - 32px); text-align:center}
.toast.show{opacity:1}

/* ── Fenêtres ──────────────────────────────────────────────────────── */
.overlay{position:fixed; inset:0; background:rgba(30,22,10,.55); display:flex; align-items:flex-start; justify-content:center; padding:16px; z-index:50; overflow-y:auto}
.modal{position:relative; background:var(--panel); border:2px solid var(--line); border-radius:18px; padding:18px 18px 16px; max-width:460px; width:100%; margin:auto 0; text-align:center; box-shadow:0 16px 40px rgba(0,0,0,.35); animation:ts-ouvre .25s ease}
@keyframes ts-ouvre{from{transform:translateY(12px) scale(.97); opacity:0}}
.modal.secoue{animation:ts-secoue .35s ease}
@keyframes ts-secoue{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.modal h2{margin:0 26px 4px; color:#4a3a1e; font-family:Georgia,'Times New Roman',serif; font-size:1.25em}
.modal .sub{font-size:.85em; color:var(--muted); margin-bottom:10px}
.modal .fermer{position:absolute; top:8px; right:8px; width:34px; height:34px; border-radius:50%; border:2px solid var(--line); background:#fff; font-size:1em; cursor:pointer; color:#6b5a3a}
.modal .texte{text-align:left; font-size:.92em; line-height:1.45}
.modal .figure{margin:0 auto 8px; border-radius:14px; overflow:hidden; box-shadow:0 3px 10px rgba(80,50,10,.18); background:#f4e6c8}
.modal .figure svg{display:block; width:100%; height:auto}
.modal .figure.petite{max-width:170px}
/* registre du régisseur (calcul pour passer une lune) */
.registre{padding:12px 16px; font-size:.95em; line-height:1.55; text-align:left; background:repeating-linear-gradient(#f4e6c8 0 25px, #e6d2a8 25px 26px)}
.registre b{color:#5a3a12}
.lune-plafond{font-size:.82em; color:var(--muted); margin-top:6px; text-align:center}
.modal .boutons{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:10px}
.manque{color:#a0522d; font-weight:700; font-size:.88em}
.ts-cote{font:800 14px 'Segoe UI',system-ui,sans-serif; fill:#3a2410; paint-order:stroke; stroke:#fffaf0; stroke-width:4px; stroke-linejoin:round}
.ts-cote-h{fill:var(--rouge)}
.ts-cote-mini{font-size:11px; font-weight:700}

.etapes-nb{font-size:.78em; font-weight:800; color:#7a5aa8; margin-top:4px}
.faits{list-style:none; padding:0; margin:6px 0; font-size:.9em}
.faits .fait{color:#2e7d32}
.question{font-size:1.15em; font-weight:900; margin:8px 0}
.pave{max-width:300px; margin:0 auto}
.ecran{display:flex; align-items:baseline; justify-content:flex-end; gap:8px; background:#2c2418; color:#ffe9a3; border-radius:10px; padding:8px 12px; font-size:1.6em; font-weight:800; font-variant-numeric:tabular-nums; min-height:52px; box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.ecran .saisie.vide{opacity:.4}
.ecran .unite{font-size:.6em; color:#d9c38a}
.touches{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:8px 0}
.touches button{min-height:46px; font-size:1.25em; font-weight:800; border-radius:10px; border:2px solid var(--line); background:linear-gradient(180deg,#fff,#f1e6cf); cursor:pointer; color:var(--ink); font-family:inherit}
.touches button:active{transform:translateY(1px); background:#f1e2c2}
.btn.valider{width:100%; font-size:1.05em; padding:12px}
.retour{margin:10px 0 4px; padding:9px 12px; border-radius:10px; font-size:.9em; text-align:left; line-height:1.4}
.retour.juste{background:#e6f4e6; border:1px solid #9cc79c; color:#1f5e22}
.retour.faux{background:#fdeee6; border:1px solid #e0a080; color:#7a2e14}
.solution{margin:8px 0; padding:10px 12px; border-radius:10px; background:#fff8e1; border:2px dashed #d9b45a; text-align:left; font-size:.92em; line-height:1.5}
.sol-titre{font-weight:800; margin-bottom:4px}
.aide{margin-top:8px; font-size:.82em; color:var(--muted); text-align:left}
.aide summary{cursor:pointer; font-weight:700}

.plans{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.plan-carte{display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 6px; border-radius:12px; border:2px solid var(--line); background:linear-gradient(180deg,#fff,#f6ecd6); cursor:pointer; font-family:inherit; color:var(--ink)}
.plan-carte:hover:not(:disabled){border-color:var(--gold); transform:translateY(-2px)}
.plan-carte.verrou{opacity:.55; cursor:not-allowed}
.pc-ic{font-size:1.8em}
.pc-nom{font-weight:900; font-size:.9em}
.pc-notion{font-size:.72em; color:var(--muted)}
.pc-prix{font-size:.72em; font-weight:800; color:#a8791a}
.pc-atout{font-size:.72em; line-height:1.35; color:#2f5a2a; background:#eef5dc; border-radius:8px; padding:4px 6px}
.plan-carte.verrou .pc-atout{opacity:.7}
.r-atout{font-size:.66em; line-height:1.25; color:#2f5a2a; font-weight:700; margin-top:3px; padding:0 2px}
.atout{color:#2f5a2a; background:#eef5dc; border-radius:10px; padding:6px 10px; margin-bottom:6px; font-weight:700}
.avis.atout{border-left:4px solid #7cae5a}
.raccord{margin:8px 0; text-align:center}
.raccord .r-titre{font-weight:900; margin-bottom:6px}
.champ-choix{display:inline-flex; flex-direction:column; margin:3px; padding:6px 10px; border-radius:10px; border:2px solid var(--line); background:#fbf3e2; font:inherit; font-weight:800; cursor:pointer}
.champ-choix small{font-weight:600; font-size:.78em; color:var(--muted)}
.champ-choix.choisi{border-color:#7cae5a; background:#eef5dc; box-shadow:0 0 0 2px #7cae5a}
.curseurs{display:grid; gap:6px; margin:6px 0}
.curseur{display:grid; grid-template-columns:1fr 42px 86px 42px; align-items:center; gap:6px; text-align:left; font-size:.9em}
.curseur b{text-align:center; background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 2px}
.curseur button{height:40px; border-radius:10px; border:2px solid var(--line); background:linear-gradient(180deg,#fff,#f1e6cf); font-size:1.3em; font-weight:900; cursor:pointer; color:var(--ink)}
.curseur button:disabled{opacity:.35; cursor:not-allowed}
.c-nom{font-weight:700}
.bilan-eau{background:#eef6fb; border:1px solid #a8d2ea; border-radius:10px; padding:8px 10px; text-align:left; font-size:.86em; line-height:1.5}
.avis{margin:8px 0; padding:8px 10px; border-radius:10px; text-align:left; font-size:.88em; background:#f4efe4; border:1px solid var(--line)}
.avis.bon{background:#e6f4e6; border-color:#9cc79c}
.avis.court{background:#fdeee0; border-color:#e0a370}
.avis.trop{background:#fff6d8; border-color:#e2c46a}
.fiche{text-align:left; font-size:.92em; line-height:1.7}
.donnees{background:#f6efdc; border-radius:10px; padding:8px; margin:6px 0}
.qcm{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.qcm button{min-height:50px; border-radius:12px; border:2px solid var(--line); background:linear-gradient(180deg,#fff,#f1e6cf); font-size:1.1em; font-weight:900; cursor:pointer; color:var(--ink); font-family:inherit}
.qcm button:hover:not(:disabled){border-color:var(--gold)}
.qcm button.barre{text-decoration:line-through; opacity:.45}
ul.intro{text-align:left; padding-left:4px; list-style:none; font-size:.9em; line-height:1.45}
ul.intro li{margin:7px 0}

/* Chronique de la lune */
.modal.chronique{padding-top:0; overflow:hidden}
.chro-tete{position:relative; height:118px; margin:0 -18px 10px; overflow:hidden}
.ciel-chro{position:absolute; inset:0}
.ciel-chro.pluie{background:linear-gradient(180deg,#5d7590,#9ab4c8)}
.ciel-chro.seche{background:linear-gradient(180deg,#e87a2a,#f8c46a)}
.soleil-chro{position:absolute; left:50%; top:16px; width:70px; height:70px; margin-left:-35px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #fffbe0, #ffc94a 55%, #f08a24); box-shadow:0 0 60px 26px rgba(255,190,80,.75); animation:ts-soleil-chro 2.4s ease-in-out infinite}
@keyframes ts-soleil-chro{50%{transform:scale(1.08); box-shadow:0 0 80px 36px rgba(255,190,80,.85)}}
.brume{position:absolute; left:0; right:0; bottom:0; height:40px; background:repeating-linear-gradient(0deg, rgba(255,240,200,0) 0 5px, rgba(255,240,200,.35) 5px 7px); animation:ts-chaleur 1.6s ease-in-out infinite}
.nuage-chro{position:absolute; top:10px; left:12%; width:150px; height:46px; border-radius:30px; background:#e6ecf2; box-shadow:30px -14px 0 -2px #e6ecf2, 70px -4px 0 4px #dfe6ee; animation:ts-derive 6s ease-in-out infinite alternate}
.nuage-chro.n2{left:auto; right:8%; top:26px; width:120px; transform:scale(.8); animation-duration:7s}
@keyframes ts-derive{to{translate:18px 0}}
.pluie-chro{position:absolute; inset:40px 0 0; background:repeating-linear-gradient(104deg, transparent 0 9px, rgba(220,240,255,.85) 9px 10.5px, transparent 10.5px 20px); background-size:40px 40px; animation:ts-pluie .35s linear infinite}
.chro-titre{position:absolute; left:0; right:0; bottom:8px; color:#fff; font:900 1.35em Georgia,serif; text-shadow:0 2px 4px rgba(0,0,0,.5)}
.chro-titre span{display:block; font:800 .55em 'Segoe UI',system-ui,sans-serif; opacity:.9; letter-spacing:.05em; text-transform:uppercase}
ul.chro{list-style:none; padding:0; margin:0; text-align:left; font-size:.92em; line-height:1.45}
ul.chro li{padding:6px 8px; border-radius:8px; margin-bottom:4px; background:#f8f1e2}
ul.chro li.alerte{background:#fdeee0}
ul.chro li.bien{background:#e6f4e6}
.jauge-chro{margin:10px 0 4px; text-align:left}
.j-lab{font-size:.78em; font-weight:800; color:var(--muted); margin-bottom:3px}
.suivante{margin-top:8px; font-size:.9em; padding:6px; border-radius:8px; background:#eef3fb}
.suivante.seche{background:#fdebd0; color:#8a4a10}

/* ── Effets ────────────────────────────────────────────────────────── */
.ts-gain{position:fixed; z-index:90; pointer-events:none; font-weight:900; font-size:1.25em; color:#fff6c8; text-shadow:0 2px 0 #9a6a10, 0 0 10px rgba(255,200,60,.9); animation:ts-monte 1.4s ease-out forwards}
.ts-gain.trophee{color:#fffbe8; text-shadow:0 2px 0 #7a5a00, 0 0 12px rgba(255,220,80,1); font-size:1.4em}
@keyframes ts-monte{0%{transform:translate(-50%,0) scale(.6);opacity:0}15%{transform:translate(-50%,-10px) scale(1.15);opacity:1}100%{transform:translate(-50%,-70px) scale(1);opacity:0}}
.ts-piece{position:fixed; z-index:89; width:18px; height:18px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 35% 30%, #fff5c0, #f2c94c 55%, #b8860b); box-shadow:0 0 6px rgba(255,200,60,.8);
  transition:transform .75s cubic-bezier(.5,-.3,.6,1), opacity .2s .62s}
.ts-eclat{position:fixed; z-index:89; pointer-events:none; width:7px; height:7px; border-radius:50%; animation:ts-eclat .85s ease-out forwards}
@keyframes ts-eclat{to{transform:translate(var(--ts-x),var(--ts-y)) scale(.2); opacity:0}}
.ts-pousse{animation:ts-pousse .6s ease}
@keyframes ts-pousse{40%{transform:scale(1.1)}}

/* ── Téléphone ─────────────────────────────────────────────────────── */
@media (max-width:760px){
  .deux{grid-template-columns:1fr; gap:0}
  .terres{grid-template-columns:repeat(3,1fr); gap:7px; padding:9px}
}
@media (max-width:480px){
  body{padding:10px 10px 70px}
  header{padding:10px 12px}
  h1{font-size:1.25em}
  .hud{gap:5px}
  .pill{padding:4px 9px; font-size:.82em}
  .scenerow svg{transform:scale(.8); transform-origin:bottom center}
  .scenerow{gap:0; margin-left:-12px; margin-right:-12px}
  .carte{padding:12px 10px 14px}
  .modal{padding:16px 12px 14px}
  .modal.chronique{padding-top:0}
  .chro-tete{margin:0 -12px 10px}
  .curseur{grid-template-columns:1fr 40px 74px 40px; font-size:.85em}
  .lot-panneau{font-size:.62em; padding:3px 5px}
  .conseil{font-size:.88em}
}

@media (prefers-reduced-motion: reduce){
  .sun, .cloud, .ts-oiseau, .ts-aile, .ts-drapeau, .saison-seche .ts-poussiere, .rideau-pluie, .chaleur, .ts-fumee, .ts-flamme,
  .lot.prochain.abordable, .ts-vague, .jauge.grande i::after, .modal, .modal.secoue,
  .soleil-chro, .brume, .nuage-chro, .pluie-chro, .ts-pousse, .pill.ts-tilt{animation:none}
  .jauge i{transition:none}
}