/* =====================================================================
   LE LOCAL : le jeu du gros chamallow (page à part, ouverte depuis le hub).
   Charte des menus : papier, encre brune, sept couleurs scoutes, Lilita One.
   Tout a une taille fixe : rien ne se décale quand un nombre grandit.
   ===================================================================== */
:root{
  --night:#14213a; --ink:#493526; --ink-dk:#2e2016;
  --paper:#E7D7B3; --paper2:#dcc99e; --paper-lt:#fbf1d6; --cream:#fff8e2; --t2:#896F4B;
  --or:#F6B84A;
  --font-display:'Lilita One','Trebuchet MS',system-ui,sans-serif;
  --font-body:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .5 0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
  --papier:var(--grain),linear-gradient(170deg,#efe1bf,#dcc99e);
  --bord:10px 13px 9px 14px/13px 9px 14px 10px;
  color-scheme:dark;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--night);color:var(--ink);font-family:var(--font-body);line-height:1.35;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid var(--or);outline-offset:2px}
h1,h2{font-family:var(--font-display);font-weight:400;margin:0;letter-spacing:.01em}

.appli{height:100%;display:grid;grid-template-columns:minmax(0,1fr) 384px;grid-template-rows:64px minmax(0,1fr);gap:10px;
  padding:8px max(10px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px))}

/* ---- la barre du haut ---- */
.barre{grid-column:1/-1;position:relative;display:grid;grid-template-columns:200px minmax(0,1fr) 470px;align-items:center;height:64px;
  background:var(--papier);background-blend-mode:multiply,normal;border:2.5px solid var(--ink);border-radius:var(--bord);box-shadow:0 4px 0 var(--ink-dk);padding:0 12px}
.retour{font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;padding:6px 10px;border:2px solid var(--ink);border-radius:9px;background:rgba(255,248,226,.7);box-shadow:0 2px 0 var(--ink);justify-self:start}
.retour:hover{background:#ffe3a0}
.titreBloc{display:grid;justify-items:center;min-width:0;height:58px;align-content:center}
#titre{font-size:34px;line-height:36px;height:36px;color:#c07a30;-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:2px 3px 0 rgba(73,53,38,.35);white-space:nowrap;user-select:none}
#titre .lt{display:inline-block;cursor:pointer;transition:color .2s}
#titre .lt.esp{width:.32em}
#titre .lt.saut{animation:saut .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes saut{0%{transform:translateY(0) rotate(0)}40%{transform:translateY(-12px) rotate(-12deg) scale(1.15)}100%{transform:translateY(0) rotate(0)}}
.sousTitre{cursor:pointer;font-size:12px;height:16px;line-height:16px;color:var(--t2);font-weight:700;letter-spacing:.06em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.outils{display:flex;gap:6px;justify-content:flex-end}
.outil{display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 9px;border:2px solid var(--ink);border-radius:9px 11px 8px 12px/11px 8px 12px 9px;
  background:rgba(255,248,226,.75);box-shadow:0 3px 0 var(--ink);font-weight:700;font-size:13px;white-space:nowrap}
.outil:hover{background:#ffe3a0}
.outil:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.outil .oIc{font-size:16px;line-height:1}
.outil .oN{min-width:30px;height:20px;line-height:20px;padding:0 5px;border-radius:10px;background:var(--ink);color:var(--cream);font-size:11px;text-align:center;font-variant-numeric:tabular-nums}
.outil.seul{width:40px;justify-content:center;padding:0}
.outil.alerte{animation:clign 1s steps(2) infinite}
@keyframes clign{50%{background:#ffd36b}}

/* ---- la scène (le canvas) ---- */
.scene{position:relative;min-width:0;min-height:0;border:2.5px solid var(--ink);border-radius:var(--bord);box-shadow:0 4px 0 var(--ink-dk);overflow:hidden;background:#1d2c4a}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation;cursor:pointer}
.hud{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:360px;max-width:calc(100% - 20px);display:grid;justify-items:center;gap:3px;pointer-events:none;
  padding:6px 10px 8px;background:var(--papier);background-blend-mode:multiply,normal;border:2.5px solid var(--ink);border-radius:var(--bord);box-shadow:0 3px 0 rgba(30,18,8,.6)}
.banque{display:flex;align-items:baseline;justify-content:center;gap:8px;height:36px;width:100%;white-space:nowrap;overflow:hidden}
.banque b{font-family:var(--font-display);font-weight:400;font-size:32px;line-height:36px;color:#a9631f;-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;font-variant-numeric:tabular-nums}
.banque span{font-weight:700;font-size:14px;color:var(--ink)}
.parSec{height:18px;line-height:18px;font-size:13px;font-weight:700;color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ferveur{position:relative;width:220px;height:14px;border:2px solid var(--ink);border-radius:8px;background:rgba(73,53,38,.18);overflow:hidden}
.ferveur i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#C4474D,#F6B84A)}
.ferveur.sacre i{background:linear-gradient(90deg,#ffe38a,#fff8e2,#ffe38a);animation:luit .6s linear infinite}
@keyframes luit{50%{filter:brightness(1.25)}}
.ferveur span{position:absolute;inset:0;font-size:9px;line-height:10px;font-weight:700;text-align:center;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dk)}

.puce{position:absolute;top:12px;height:32px;display:flex;align-items:center;gap:6px;padding:0 10px;border:2px solid var(--ink);border-radius:16px;
  background:rgba(255,248,226,.88);box-shadow:0 2px 0 var(--ink);font-weight:700;font-size:13px;white-space:nowrap}
.puce .pTx{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;text-align:left}
.meteo{left:12px;width:190px}
.allure{right:12px;width:180px}
.allure .pCar,.chants .pCar{font-size:10px}
.chants{right:12px;top:52px;width:180px;font-variant-numeric:tabular-nums}
.allurePop.chantsPop{top:90px;width:310px;max-height:calc(100% - 102px)}

.allurePop{position:absolute;top:50px;right:12px;width:310px;max-height:calc(100% - 62px);overflow-y:auto;display:grid;gap:4px;padding:8px;z-index:6;
  background:var(--papier);background-blend-mode:multiply,normal;border:2.5px solid var(--ink);border-radius:var(--bord);box-shadow:0 4px 0 var(--ink-dk)}
.allurePop button{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:18px 28px;align-content:center;text-align:left;height:56px;flex:none;padding:3px 9px;border:2px solid var(--ink);border-radius:8px;background:rgba(255,252,240,.9);overflow:hidden}
.allurePop button b{font-size:13px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.allurePop button small{font-size:11px;line-height:14px;color:var(--t2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.allurePop button.on{background:#ffe3a0}
.allurePop button:disabled{opacity:.55;cursor:default}
.effets{position:absolute;left:12px;top:52px;width:230px;display:grid;gap:4px;pointer-events:none}
.effets div{height:24px;line-height:20px;padding:0 8px;border:2px solid var(--ink);border-radius:12px;background:#ffe38a;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.effets div.mal{background:#cdd3e6}

/* ---- Radio Local : un bandeau qu'on promène (4 tailles) ---- */
.radio{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:7px;padding:0 10px;border:2.5px solid var(--ink);border-radius:999px;
  background:#2e2016;color:var(--cream);box-shadow:0 3px 0 rgba(0,0,0,.5);cursor:grab;user-select:none;touch-action:none;z-index:5;white-space:nowrap}
.radio.tient{cursor:grabbing}
.radio .rPoint{width:.6em;height:.6em;border-radius:50%;background:#ff4a3a;flex:none;animation:clign2 1s steps(2) infinite}
@keyframes clign2{50%{opacity:.2}}
.radio .rLive{font-family:var(--font-display);letter-spacing:.06em;color:#ff8a6a;flex:none}
.radio .rNom{font-weight:700;color:var(--or);flex:none}
.radio .rFil{position:relative;flex:1;min-width:0;overflow:hidden;height:100%}
.radio .rTxt{position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap}
.radio.t1{height:30px;width:330px;font-size:12px}
.radio.t2{height:38px;width:430px;font-size:15px}
.radio.t3{height:48px;width:560px;font-size:19px}
.radio.t4{height:60px;width:700px;font-size:24px}
.radio.t0{height:26px;width:130px;font-size:11px}
.radio.t0 .rFil{display:none}

/* ---- la boutique ---- */
.boutique{min-height:0;display:grid;grid-template-rows:30px 120px 104px 34px minmax(0,1fr);gap:6px;padding:8px 10px 10px;
  background:var(--papier);background-blend-mode:multiply,normal;border:2.5px solid var(--ink);border-radius:var(--bord);box-shadow:0 4px 0 var(--ink-dk)}
.bTete{display:flex;align-items:center;justify-content:space-between;gap:8px;height:30px}
.bTete h2{font-size:21px;color:#a9631f;-webkit-text-stroke:.8px var(--ink);paint-order:stroke fill}
.bAide{font-size:12px;font-weight:700;color:var(--t2)}
.ameliorations{display:grid;grid-template-columns:repeat(auto-fill,52px);grid-auto-rows:52px;gap:6px;overflow-y:auto;align-content:start;padding:2px;
  background:rgba(73,53,38,.1);border-radius:9px;border:1.5px dashed rgba(73,53,38,.45)}
.ameliorations button{position:relative;width:52px;height:52px;padding:0;border:2px solid var(--ink);border-radius:9px;background:var(--paper-lt);box-shadow:0 2px 0 var(--ink);overflow:hidden}
.ameliorations button canvas{width:48px;height:48px;display:block}
.ameliorations button.cher{filter:grayscale(.75) brightness(.85)}
.ameliorations button.sel{outline:3px solid var(--or)}
.ameliorations button:not(.cher):hover{background:#ffe3a0}
.ameliorations .vide{grid-column:1/-1;font-size:12px;color:var(--t2);padding:6px 8px;font-weight:700}
.info{display:grid;grid-template-rows:20px 18px 57px;gap:1px;padding:4px 9px;align-content:start;border:2px solid var(--ink);border-radius:9px;background:rgba(255,252,240,.85);overflow:hidden}
.iNom{font-family:var(--font-display);font-size:16px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iCout{font-size:12px;line-height:18px;font-weight:700;color:#a9631f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.iTxt{font-size:12px;line-height:19px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.lot{display:flex;border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.lot button{width:40px;height:26px;border:0;background:rgba(255,248,226,.7);font-weight:700;font-size:12px}
.lot button+button{border-left:2px solid var(--ink)}
.lot button.on{background:var(--ink);color:var(--cream)}
.equipage{overflow-y:auto;display:grid;grid-auto-rows:62px;gap:6px;align-content:start;padding:2px 4px 4px 2px}
.prod{display:grid;grid-template-columns:52px minmax(0,1fr) 54px;gap:8px;align-items:center;height:62px;padding:4px 8px 4px 4px;text-align:left;
  border:2px solid var(--ink);border-radius:10px 12px 9px 13px/12px 9px 13px 10px;background:var(--paper-lt);box-shadow:0 3px 0 var(--ink)}
.prod canvas{width:52px;height:52px;display:block}
.prod .pNom{font-family:var(--font-display);font-size:16px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod .pCout{font-size:12px;font-weight:700;line-height:16px;color:#2F6B3F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.prod .pRend{font-size:11px;line-height:15px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.prod .pN{font-family:var(--font-display);font-size:28px;line-height:1;text-align:right;color:rgba(73,53,38,.55);font-variant-numeric:tabular-nums}
.prod:not(.cher):hover{background:#ffe3a0}
.prod:not(.cher):active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.prod.cher .pCout{color:#A8272D}
/* trop cher : la ligne s'éteint (grisée, enfoncée), on voit tout de suite qu'on ne peut pas */
.prod.cher{background:#d9c9a3;box-shadow:0 1px 0 var(--ink);transform:translateY(2px);cursor:not-allowed}
.prod.cher canvas{filter:grayscale(1) opacity(.55)}
.prod.cher .pNom,.prod.cher .pRend,.prod.cher .pN{opacity:.55}
/* achetable : la ligne est claire et bien en relief, le prix en vert */
.prod.dispo{background:#fff8e0;cursor:pointer}
.prod.dispo .pCout{color:#2F6B3F}
.prod.dispo .pCout::before{content:'✔ '}
.prod.mystere{filter:brightness(.6);cursor:default}
.prod.mystere .pNom,.prod.mystere .pRend{color:var(--ink-dk)}

/* ---- les fiches (écussons, album, départ, réglages, courrier) ---- */
.voile{position:fixed;inset:0;z-index:50;background:rgba(10,14,28,.62);display:grid;place-items:center;padding:16px}
.fiche{position:relative;width:min(720px,100%);height:min(560px,100%);display:grid;grid-template-rows:18px 38px minmax(0,1fr);gap:4px;padding:16px 20px 18px;
  background:var(--papier);background-blend-mode:multiply,normal;border:2.5px solid var(--ink);border-radius:14px 18px 15px 19px/18px 14px 19px 15px;box-shadow:5px 6px 0 rgba(0,0,0,.55)}
.fiche.petite{width:min(480px,100%);height:min(400px,100%)}
.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--t2);font-weight:700;height:18px;line-height:18px;white-space:nowrap;overflow:hidden}
.fiche h2{font-size:30px;line-height:38px;color:#a9631f;-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:40px}
.fermer{position:absolute;top:10px;right:10px;width:36px;height:36px;border:2px solid var(--ink);border-radius:9px;background:rgba(255,248,226,.8);box-shadow:0 2px 0 var(--ink);font-weight:700}
.ficheCorps{min-height:0;overflow-y:auto;padding-right:4px}
.ficheCorps p{margin:6px 0;font-size:14px}
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;border:2.5px solid var(--ink);border-radius:10px 12px 9px 13px/12px 9px 13px 10px;
  font-family:var(--font-display);font-size:18px;background:linear-gradient(180deg,#f9c867,#f1a63a);color:#3a1a08;box-shadow:0 4px 0 var(--ink);white-space:nowrap}
.bouton:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.bouton:disabled{filter:grayscale(.7);opacity:.7;cursor:default}
.bouton.doux{font-family:var(--font-body);font-weight:700;font-size:14px;background:rgba(255,248,226,.85)}
.bouton.rouge{background:linear-gradient(180deg,#C4474D,#A8272D);color:var(--cream)}
.rangee{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.grilleEcus{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ecu{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:center;height:62px;padding:4px 8px;border:2px solid var(--ink);border-radius:10px;background:rgba(255,252,240,.85)}
.ecu canvas{width:44px;height:44px}
.ecu b{display:block;font-size:13px;line-height:16px;max-height:32px;overflow:hidden}
.ecu small{display:block;font-size:11px;line-height:13px;color:var(--t2);max-height:26px;overflow:hidden}
.ecu.non{background:rgba(73,53,38,.12);border-style:dashed}
.grilleTimbres{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:8px}
.timbre{position:relative;height:128px;padding:8px;display:grid;grid-template-rows:62px 20px 18px;justify-items:center;text-align:center;background:#fffaf0;
  border:3px dotted #fffaf0;outline:2px solid var(--ink);outline-offset:-6px;box-shadow:2px 3px 0 rgba(30,18,8,.5)}
.timbre canvas{width:90px;height:60px}
.timbre b{font-size:12px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.timbre span{font-family:var(--font-display);font-size:16px;line-height:18px;color:#A8272D}
.timbre.non{opacity:.5}
.stat{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:5px 0;border-bottom:1.5px dashed rgba(73,53,38,.35)}
.stat b{font-variant-numeric:tabular-nums}
.ficheCorps h3{font-family:var(--font-display);font-weight:400;font-size:20px;line-height:26px;margin:12px 0 2px;color:#a9631f;-webkit-text-stroke:.6px var(--ink);paint-order:stroke fill}
.ficheCorps h3:first-child{margin-top:2px}
.grilleMalle{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin:8px 0 6px}
.malleC{display:grid;grid-template-rows:18px 45px 18px;gap:2px;height:97px;padding:6px 9px;text-align:left;border:2px solid var(--ink);border-radius:10px 12px 9px 13px/12px 9px 13px 10px;background:var(--paper-lt);box-shadow:0 3px 0 var(--ink);overflow:hidden}
.malleC b{font-size:13px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.malleC small{font-size:11px;line-height:15px;color:var(--t2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.malleC span{font-family:var(--font-display);font-size:14px;line-height:18px;color:#A8272D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.malleC:not(:disabled):hover{background:#ffe3a0}
.malleC:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.malleC:disabled{cursor:default;opacity:.62}
.malleC.achete{opacity:1;background:#e2ecd6}
.malleC.achete span{color:#2F6B3F}
.calHaut{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:start;margin:4px 0}
.calCv{width:150px;height:190px;display:block;filter:drop-shadow(2px 3px 0 rgba(30,18,8,.4))}
.calThemes{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.calThemes small{font-size:12px;font-weight:700;color:var(--t2);width:100%}
.calTh{height:28px;padding:0 9px;border:2px solid var(--ink);border-radius:14px;background:rgba(255,252,240,.9);font-size:12px;font-weight:700;white-space:nowrap}
.calTh.on{background:#ffe3a0}
.calTh:disabled{opacity:.5;cursor:default}
.calCote{min-width:0}
.calCote .bouton{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.calAide{font-size:12px!important;color:var(--t2);font-weight:700;min-height:36px}
.retourTournee{padding:8px 10px;border:2px solid var(--ink);border-radius:9px;background:#e2ecd6;font-weight:700}
.champ{width:100%;height:42px;padding:0 12px;font:700 18px var(--font-body);color:var(--ink);background:rgba(255,252,240,.95);border:2.5px solid var(--ink);border-radius:9px;margin-top:6px}
.champ:focus{outline:3px solid var(--or);outline-offset:1px}
ul.nouv{margin:6px 0 4px;padding-left:20px;font-size:14px}
ul.nouv li{margin:3px 0}
textarea{width:100%;height:90px;font:12px/1.4 monospace;color:var(--ink);background:rgba(255,252,240,.9);border:2px solid var(--ink);border-radius:8px;padding:6px;resize:none}

#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;width:min(460px,calc(100% - 24px));height:74px;display:grid;align-content:center;gap:1px;padding:0 14px;text-align:center;
  background:var(--papier);background-blend-mode:multiply,normal;border:2.5px solid var(--ink);border-radius:var(--bord);box-shadow:0 4px 0 var(--ink-dk);pointer-events:none}
#toast strong{font-family:var(--font-display);font-weight:400;font-size:18px;line-height:22px;color:#a9631f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#toast span{font-size:13px;line-height:17px;font-weight:700;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#toast.in{animation:monte .25s ease-out}
@keyframes monte{from{transform:translate(-50%,20px);opacity:0}}

/* ---- tablette et téléphone : la scène en haut, la boutique dessous ---- */
@media (max-width:1100px){
  .appli{grid-template-columns:minmax(0,1fr) 330px}
  .barre{grid-template-columns:150px minmax(0,1fr) 270px}
  .outil .oTx{display:none}
}
@media (max-width:760px){
  .appli{grid-template-columns:minmax(0,1fr);grid-template-rows:54px minmax(0,46%) minmax(0,1fr);gap:8px;padding-top:6px}
  .barre{height:54px;grid-template-columns:42px minmax(0,1fr) auto;padding:0 6px}
  .retour{font-size:0;width:38px;height:38px;padding:0;display:grid;place-items:center}
  .retour::before{content:'←';font-size:20px}
  .titreBloc{height:50px}
  #titre{font-size:24px;line-height:30px;height:30px}
  .outils{gap:4px}
  .outil{position:relative;width:38px;height:36px;padding:0;justify-content:center}
  .outil .oN{position:absolute;right:-6px;top:-7px;min-width:20px;height:17px;line-height:17px;padding:0 3px;font-size:10px}
  .outil.seul{width:38px}
  .sousTitre{font-size:11px}
  .hud{width:300px;top:8px;padding:4px 8px 6px}
  .banque{height:30px}.banque b{font-size:26px;line-height:30px}
  .puce{top:auto;bottom:8px;height:28px;font-size:12px}
  .meteo{left:8px;width:150px}
  .allure{right:8px;width:150px}
  .allurePop{top:auto;bottom:44px;right:8px}
  .chants{top:auto;bottom:42px;right:8px;width:150px}
  .allurePop.chantsPop{top:auto;bottom:76px;max-height:calc(100% - 86px)}
  .allurePop{width:min(310px,calc(100% - 16px));max-height:calc(100% - 54px)}
  .effets{top:104px;left:8px;width:200px}
  .effets div{height:22px;line-height:18px;font-size:11px}
  .radio.t2,.radio.t3,.radio.t4{width:calc(100% - 24px);max-width:430px}
  .boutique{grid-template-rows:28px 62px 104px 32px minmax(0,1fr);padding:6px 8px 8px}
  .fiche{padding:14px 14px 14px;grid-template-rows:18px 32px minmax(0,1fr)}
  .fiche h2{font-size:24px;line-height:32px}
  .calHaut{grid-template-columns:110px minmax(0,1fr);gap:10px}
  .calCv{width:110px;height:140px}
  .ameliorations{grid-template-columns:repeat(auto-fill,52px);overflow-y:auto}
}

/* =====================================================================
   DA « CARTE À LA LANTERNE » (oct. 2026) : le socle commun ../socle/nuit-menus.css est chargé en DERNIER
   et pose les variables --n-* (et --papier, --ink, --t2…) sur body.nuitUI. Ici : les retouches propres au Local,
   avec ses variables à lui. Mêmes tailles, rien ne bouge : seules les couleurs, bordures et ombres changent.
   La scène (chamallow, feu, forêt) est le jeu : on ne la touche pas, juste son cadre.
   ===================================================================== */
body.nuitUI{
  --night:var(--n-fond); --ink:var(--n-texte); --ink-dk:var(--n-creme);
  --paper:var(--n-pan); --paper2:var(--n-case); --paper-lt:var(--n-case); --cream:var(--n-creme); --t2:var(--n-gris);
  --grain:none; --papier:var(--n-pan); --bord:14px; --or:var(--n-lant);
  background:var(--n-fond);color:var(--n-texte)}
body.nuitUI button:focus-visible,body.nuitUI a:focus-visible,body.nuitUI .champ:focus{outline-color:var(--n-lant)}
body.nuitUI h1,body.nuitUI h2{color:var(--n-creme);-webkit-text-stroke:0;paint-order:normal;text-shadow:none}

/* le bandeau du haut, le cadre de la scène, la colonne de droite */
body.nuitUI .barre,body.nuitUI .boutique,body.nuitUI .scene{background:var(--n-pan)!important;background-image:none!important;border:1.5px solid #252E40!important;border-radius:16px!important;box-shadow:none!important}
body.nuitUI .scene{background:#141B29!important}
body.nuitUI #titre,body.nuitUI #titre .lt{color:var(--n-creme)!important;-webkit-text-stroke:0!important;text-shadow:none!important}
body.nuitUI .sousTitre{color:var(--n-gris)!important}
body.nuitUI .outil,body.nuitUI .retour{border:1.5px solid var(--n-trait2)!important;border-radius:999px!important;background:rgba(16,21,31,.6)!important;color:var(--n-texte)!important;box-shadow:none!important;text-shadow:none!important}
body.nuitUI .outil:hover,body.nuitUI .retour:hover{background:var(--n-case)!important}
body.nuitUI .outil:active{transform:none;box-shadow:none!important}
body.nuitUI .outil.alerte{animation:none;box-shadow:inset 0 0 0 2px var(--n-lant)!important}
body.nuitUI .outil .oN{background:var(--n-case2)!important;color:var(--n-creme)!important}

/* la colonne de droite : Bricolages, Défi du jour, L'équipage */
body.nuitUI .bTete h2{color:var(--n-terre)!important}
body.nuitUI .bAide,body.nuitUI .pRend,body.nuitUI .pN,body.nuitUI .iTxt{color:var(--n-gris)!important}
body.nuitUI .ameliorations{background:transparent;border-color:var(--n-trait)!important}
body.nuitUI .ameliorations .vide{color:var(--n-gris)}
body.nuitUI .ameliorations button,body.nuitUI .prod{border:1.5px solid transparent!important;border-radius:14px!important;background:var(--n-case)!important;box-shadow:none!important;color:var(--n-texte)}
body.nuitUI .ameliorations button:not(.cher):hover,body.nuitUI .prod:not(.cher):hover{background:var(--n-case2)!important}
body.nuitUI .ameliorations button.sel{outline:0;box-shadow:inset 0 0 0 2px var(--n-lant)!important}
body.nuitUI .ameliorations button.cher,body.nuitUI .prod.cher{opacity:.5;transform:none}
body.nuitUI .prod:not(.cher):active{transform:none;box-shadow:none!important}
body.nuitUI .prod.dispo{background:var(--n-case)!important}
body.nuitUI .prod .pNom{color:var(--n-creme)!important}
body.nuitUI .prod .pCout{color:var(--n-lant)!important}
body.nuitUI .prod.dispo .pCout{color:var(--n-vert)!important}
body.nuitUI .prod.cher .pCout{color:#E8878B!important}
body.nuitUI .prod.mystere{filter:none;border:1.5px dashed var(--n-trait2)!important;background:transparent!important}
body.nuitUI .prod.mystere .pNom,body.nuitUI .prod.mystere .pRend{color:var(--n-sourd)!important}
body.nuitUI .info{background:var(--n-case)!important;border:0!important;border-radius:14px!important;color:var(--n-texte)}
body.nuitUI .iNom{color:var(--n-terre)!important}
body.nuitUI .iCout{color:var(--n-lant)!important}
body.nuitUI .lot{border:0!important;border-radius:999px!important;background:var(--n-case)!important;padding:2px}
body.nuitUI .lot button{border:0!important;border-radius:999px!important;background:transparent!important;color:var(--n-texte)!important}
body.nuitUI .lot button.on{background:var(--n-creme)!important;color:#10151F!important}

/* les fenêtres (écussons, album, départ, calendriers, courrier) */
body.nuitUI .voile{background:rgba(5,7,11,.78)!important}
body.nuitUI .fiche{background:rgba(16,21,31,.96)!important;background-image:none!important;border:1.5px solid #252E40!important;border-radius:20px!important;box-shadow:0 24px 70px rgba(0,0,0,.55)!important;color:var(--n-texte)}
body.nuitUI .kicker{color:var(--n-terre)!important}
body.nuitUI .fiche h2{color:var(--n-creme)!important}
body.nuitUI .ficheCorps h3{color:var(--n-terre)!important;-webkit-text-stroke:0;paint-order:normal}
body.nuitUI .ficheCorps p,body.nuitUI ul.nouv{color:var(--n-doux)}
body.nuitUI .fermer{background:var(--n-case)!important;border:0!important;box-shadow:none!important;color:var(--n-texte)!important;border-radius:50%!important}
body.nuitUI .fermer:hover{background:var(--n-case2)!important}
body.nuitUI .bouton{font-family:var(--font-body);font-weight:700;font-size:16px;border:0!important;border-radius:999px!important;background:var(--n-creme)!important;color:#10151F!important;box-shadow:none!important;text-shadow:none!important}
body.nuitUI .bouton:hover:not(:disabled){background:#FFFFFF!important}
body.nuitUI .bouton:active{transform:none;box-shadow:none!important}
body.nuitUI .bouton:disabled{filter:none;opacity:.45}
body.nuitUI .bouton.doux{font-size:14px;background:rgba(16,21,31,.45)!important;color:var(--n-texte)!important;border:1.5px solid var(--n-trait2)!important}
body.nuitUI .bouton.doux:hover:not(:disabled){background:var(--n-case)!important}
body.nuitUI .bouton.rouge,body.nuitUI .bouton.doux.rouge{background:#A8272D!important;border-color:#A8272D!important;color:var(--n-creme)!important}
body.nuitUI .bouton.rouge:hover:not(:disabled){background:#C4474D!important}
html body.nuitUI .stat{background:transparent!important;border:0!important;border-bottom:1.5px dashed var(--n-trait)!important;color:var(--n-doux)!important;box-shadow:none!important}
html body.nuitUI .stat b{color:var(--n-creme)}
body.nuitUI .ecu{background:var(--n-case);border:1.5px solid transparent;border-radius:14px;color:var(--n-texte)}
body.nuitUI .ecu b{color:var(--n-creme)}
body.nuitUI .ecu small{color:var(--n-gris)}
body.nuitUI .ecu.non{background:transparent;border:1.5px dashed var(--n-trait2)}
body.nuitUI .ecu.non b{color:var(--n-sourd)}
/* les timbres restent des timbres (du papier), avec leur encre brune ; ceux qu'on n'a pas sont des cases de nuit */
body.nuitUI .timbre{color:#493526;outline-color:#493526;box-shadow:none}
body.nuitUI .timbre.non{opacity:1;background:var(--n-case);border-color:var(--n-case);outline-color:var(--n-trait2);color:var(--n-sourd)}
body.nuitUI .timbre.non span{color:var(--n-sourd)}
body.nuitUI .timbre.non canvas{opacity:.45}
body.nuitUI .malleC{border:1.5px solid transparent;border-radius:14px;background:var(--n-case);box-shadow:none;color:var(--n-texte)}
body.nuitUI .malleC b{color:var(--n-creme)}
body.nuitUI .malleC small{color:var(--n-gris)}
body.nuitUI .malleC span{color:var(--n-lant)}
body.nuitUI .malleC:not(:disabled):hover{background:var(--n-case2)}
body.nuitUI .malleC:not(:disabled):active{transform:none;box-shadow:none}
body.nuitUI .malleC:disabled{opacity:.5}
body.nuitUI .malleC.achete{opacity:1;background:#1E3A2A;border-color:#2F6B3F}
body.nuitUI .malleC.achete span{color:var(--n-vert)}
body.nuitUI .calTh{border:1.5px solid var(--n-trait2);border-radius:999px;background:transparent;color:var(--n-texte)}
body.nuitUI .calTh.on{background:var(--n-creme);border-color:var(--n-creme);color:#10151F}
body.nuitUI .calThemes small,body.nuitUI .calAide{color:var(--n-gris)}
body.nuitUI .calCv{filter:drop-shadow(0 8px 16px rgba(0,0,0,.45))}
body.nuitUI .retourTournee{border:0;border-radius:14px;background:#1E3A2A;color:var(--n-creme)}
body.nuitUI .champ{color:var(--n-creme);background:var(--n-case);border:1.5px solid var(--n-trait2);border-radius:12px}
body.nuitUI textarea{color:var(--n-doux);background:var(--n-case);border:1.5px solid var(--n-trait2);border-radius:12px}
body.nuitUI textarea::placeholder,body.nuitUI .champ::placeholder{color:var(--n-sourd)}

/* le petit message en bas : un panneau de nuit, le titre en lanterne */
html body.nuitUI #toast[role]{background:rgba(16,21,31,.94)!important;border:1.5px solid #252E40!important;border-radius:16px!important;box-shadow:0 14px 34px rgba(0,0,0,.5)!important;color:var(--n-texte)!important}
html body.nuitUI #toast strong{color:var(--n-lant)!important}
html body.nuitUI #toast span{color:var(--n-texte)!important}

/* l'habillage posé sur la scène (déjà en nuit) : on garde les mêmes teintes que la colonne */
body.nuitUI .hud,body.nuitUI .puce,body.nuitUI .allurePop,body.nuitUI .effets div{background:var(--n-pan)!important;background-image:none!important;border-color:#252E40!important;box-shadow:none!important;color:var(--n-texte)}
body.nuitUI .hud{border:1.5px solid #252E40!important;border-radius:16px!important}
body.nuitUI .banque b{color:var(--n-lant)!important;-webkit-text-stroke:0;paint-order:normal}
body.nuitUI .banque span,body.nuitUI .parSec{color:var(--n-gris)!important}
body.nuitUI .ferveur{background:var(--n-trait)!important;border-color:transparent!important}
body.nuitUI .ferveur i{background:var(--n-lant)!important}
body.nuitUI .ferveur.sacre i{background:var(--n-creme)!important;animation:none}
body.nuitUI .ferveur span{color:var(--n-creme)}
body.nuitUI .puce{border:1.5px solid var(--n-trait2)!important;background:rgba(16,21,31,.6)!important;color:var(--n-texte)!important}
body.nuitUI .puce:hover{background:var(--n-case)!important}
body.nuitUI .allurePop{border-radius:14px!important}
body.nuitUI .allurePop button{border:1.5px solid transparent!important;border-radius:12px!important;background:var(--n-case)!important;color:var(--n-texte)!important}
body.nuitUI .allurePop button:hover{background:var(--n-case2)!important}
body.nuitUI .allurePop button.on{background:var(--n-case2)!important;box-shadow:inset 0 0 0 2px var(--n-lant)!important}
body.nuitUI .allurePop button small{color:var(--n-gris)}
body.nuitUI .effets div{border-radius:10px!important;border:0!important;background:#3A3220!important;color:var(--n-creme)}
body.nuitUI .effets div.mal{background:#4A1E26!important}
body.nuitUI .radio{background:rgba(16,21,31,.88)!important;border:0!important;border-radius:999px!important;box-shadow:none!important;color:var(--n-texte)}
body.nuitUI .radio .rNom{color:var(--n-terre)!important}

/* =====================================================================
   LES ONGLETS de la colonne de droite (oct. 2026) : Campement, Badges, Prestige.
   Tailles fixes : la barre d'onglets fait 40 px, chaque onglet a sa largeur, les compteurs aussi ;
   Campement garde exactement la boutique d'avant, Badges et Prestige défilent dedans.
   ===================================================================== */
.boutique{grid-template-rows:40px minmax(0,1fr)}
.onglets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;height:40px;padding:3px;border-radius:999px;background:rgba(73,53,38,.12)}
.ong{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;height:34px;min-width:0;padding:0 8px;border:0;border-radius:999px;background:transparent;font-weight:700;font-size:13px;touch-action:manipulation}
.ong .ongIc{flex:none;font-size:15px;line-height:1}
.ong .ongTx{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* le compteur : une pastille de taille fixe posée sur le coin, elle ne pousse jamais le texte */
.ong .ongN{position:absolute;top:-8px;right:-2px;width:34px;height:17px;line-height:17px;border-radius:9px;font-size:10px;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;pointer-events:none}
.ong .ongN:empty{visibility:hidden}
.ong.on{background:var(--ink);color:var(--cream)}
.ong:not(.on):hover{background:rgba(255,248,226,.5)}
.panneau{min-height:0}
.pCamp{display:grid;grid-template-rows:30px 120px 104px 34px minmax(0,1fr);gap:6px}
.pDefile{overflow-y:auto;padding:2px 6px 8px 2px;overscroll-behavior:contain}
.pDefile .stat{font-size:13px}
.ficheCorps p.petit,.pDefile p.petit,p.petit{font-size:12px;margin:6px 0}
.grilleEcus.serree{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:6px 0}
.grilleEcus.serree .ecu{height:64px;align-items:center}
.grilleEcus.serree .ecu b{white-space:nowrap;text-overflow:ellipsis;max-height:16px}
.grilleEcus.serree .ecu small{max-height:39px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.notations .bouton{width:140px;padding:0 10px;font-size:14px}
.notations .bouton.on{outline:3px solid var(--or)}
body.nuitUI .onglets{background:var(--n-case)!important}
body.nuitUI .ong{color:var(--n-texte)}
body.nuitUI .ong.on{background:var(--n-creme)!important;color:#10151F!important}
body.nuitUI .ong:not(.on):hover{background:var(--n-case2)!important}
body.nuitUI .ong .ongN{background:var(--n-case2);color:var(--n-creme)}
body.nuitUI .ong.on .ongN{background:#10151F;color:var(--n-creme)}
body.nuitUI .ong .ongN.vif{background:var(--n-lant);color:#10151F}
body.nuitUI .pDefile h3{color:var(--n-terre)}
body.nuitUI .pDefile p{color:var(--n-doux)}
html body.nuitUI .notations .bouton.doux.on{outline:0;opacity:1;background:var(--n-creme)!important;color:#10151F!important;border-color:var(--n-creme)!important}
.ong .ongN.vif{background:var(--or);color:#3a1a08}
.pDefile h3{font-family:var(--font-display);font-weight:400;font-size:19px;line-height:24px;margin:12px 0 2px}
.pDefile h3:first-child{margin-top:2px}
.pDefile p{margin:6px 0;font-size:13px}
/* quatre onglets (avec le Bûcher) : le texte seul, resserré, pour que « Campement » tienne en entier */
.ong .ongIc{display:none}
.ong{padding:0 3px;gap:0;font-size:12.5px;letter-spacing:-.15px}
@media (max-width:760px){
  .boutique{grid-template-rows:38px minmax(0,1fr)}
  .onglets{height:38px}
  .ong{height:32px}
  .pCamp{gap:5px}
  .pCamp{grid-template-rows:26px 58px 72px 30px minmax(0,1fr)}
  .info{grid-template-rows:18px 16px 34px;padding:2px 9px}
  .iNom{font-size:15px;line-height:18px}
  .iCout{line-height:16px}
  .iTxt{font-size:11.5px;line-height:17px;max-height:34px;-webkit-line-clamp:2}
  .notations .bouton{width:calc(33.3% - 7px);padding:0 4px}
}
@media (max-width:1180px) and (min-width:761px){ .ong{font-size:11.5px;padding:0 2px;letter-spacing:-.3px} }   /* colonne de 330 px */
@media (max-width:380px){ .ong{font-size:11.5px;padding:0 2px;letter-spacing:-.3px} }
.notations+p.petit{height:36px;line-height:18px;overflow:hidden;margin:0 0 6px}   /* la légende garde sa hauteur quand on change de notation */

/* =====================================================================
   LES JAMBOREE ET LE BÛCHER (21 oct. 2026)
   La jauge garde sa taille (22 px) quoi qu'elle affiche ; l'onglet Bûcher est là dès le début,
   grisé tant qu'il est verrouillé, pour que rien ne bouge le jour où il s'ouvre.
   ===================================================================== */
.ong.verrou .ongTx,.ong.verrou .ongIc{opacity:.45}
.jauge{position:relative;height:22px;margin:8px 0 4px;border-radius:999px;background:rgba(73,53,38,.15);overflow:hidden}
.jauge i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#F6B84A,#C2A682);transition:width .4s}
.jauge span{position:relative;display:block;height:22px;line-height:22px;text-align:center;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.rangee.duo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rangee.duo .bouton{min-width:0;padding:0 8px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pDefile .bTete{margin-top:12px}
.pDefile .bTete h2{margin:0}
.grilleMalle.bucherons{grid-template-columns:1fr}
body.nuitUI .jauge{background:var(--n-case)}
body.nuitUI .jauge i{background:linear-gradient(90deg,var(--n-lant),#C2A682)}
body.nuitUI .jauge span{color:var(--n-creme)}