/* Gaston, la cigogne de l'appli MBV : guide du site en bas à droite */
.gaston{--nuit:#234d0b;--pale:#def8c6;--lime:#a3d96b;--violet:#6b5fe0;--lavande:#cfcbf8;--creme:#f6fdf0;--encre:#1d2b14;--gris:#5b6b52;
  --f-titre:"VG5000","Geist Mono",ui-monospace,monospace;--f-texte:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--f-mono:"Geist Mono",ui-monospace,Menlo,monospace}
.gaston [hidden]{display:none!important}
.gaston.au-dessus-barre{bottom:76px}
.gaston{transition:bottom .24s}
@media (prefers-reduced-motion:reduce){.g-cig,.g-tete,.g-zzz path,.g-bulle,.g-panneau{animation:none}}
/* ---------- Gaston (composant réutilisable dans le thème) ---------- */
.gaston{position:fixed;right:calc(8px + env(safe-area-inset-right,0px));bottom:0;z-index:50;
  display:flex;flex-direction:column;align-items:flex-end;pointer-events:none;font-family:var(--f-texte)}
.gaston > *{pointer-events:auto}
.g-perso{position:relative;display:block;border:0;background:none;padding:0;cursor:pointer;line-height:0;
  padding-bottom:env(safe-area-inset-bottom,0px)}
.g-perso:focus-visible{outline:3px solid var(--violet);outline-offset:4px;border-radius:4px}
.g-perso svg{overflow:visible;display:block;width:164px;height:auto;image-rendering:pixelated;shape-rendering:crispEdges}
.g-vol{transform-box:fill-box;transform-origin:center}
.g-cig{animation:bob 2.4s steps(2,jump-none) infinite}
@keyframes bob{0%,60%{translate:0 0}61%,100%{translate:0 2px}}
.g-tete{animation:picore 5s steps(1) infinite}
@keyframes picore{0%,84%{transform:none}85%,94%{transform:translate(1px,1px)}}
.g-oeil-f,.g-bec-o,.g-bec-d,.g-ailes-h,.g-zzz{display:none}
.blink .g-oeil{display:none}.blink .g-oeil-f{display:inline}
.claque .g-bec-c{display:none}.claque .g-bec-o{display:inline}
[data-humeur="salut"] .g-ailes-b{display:none}[data-humeur="salut"] .g-ailes-h{display:inline}
[data-humeur="salut"] .g-tete{animation:none}
[data-humeur="dort"] .g-oeil,[data-humeur="dort"] .g-bec-c{display:none}
[data-humeur="dort"] .g-oeil-f,[data-humeur="dort"] .g-bec-d,[data-humeur="dort"] .g-zzz{display:inline}
[data-humeur="dort"] .g-tete,[data-humeur="dort"] .g-cig{animation:none}
.g-zzz path{animation:zzz 3s steps(1) infinite}.g-zzz path+path{animation-delay:1s}
@keyframes zzz{0%{opacity:0}33%,66%{opacity:1}100%{opacity:0}}

.g-bulle{position:relative;margin:0 34px 6px 0;max-width:240px;background:#fff;color:var(--encre);border:3px solid var(--encre);
  border-radius:4px;padding:10px 30px 10px 12px;font:600 14px/1.35 var(--f-texte);box-shadow:4px 4px 0 var(--lime);
  transform-origin:90% 100%;animation:pop .28s steps(4) both}
.g-bulle::after{content:"";position:absolute;right:26px;bottom:-12px;width:12px;height:12px;background:#fff;
  border-right:3px solid var(--encre);border-bottom:3px solid var(--encre);transform:skewX(35deg)}
.g-bulle button.g-ouvrir{all:unset;cursor:pointer;color:var(--violet);text-decoration:underline;text-underline-offset:3px;font-weight:700}
.g-bulle button.g-ouvrir:focus-visible,.g-bulle .g-fermer:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.g-bulle .g-fermer{position:absolute;top:4px;right:4px;width:22px;height:22px;border:0;background:none;cursor:pointer;
  font:600 14px/1 var(--f-mono);color:var(--gris)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

.g-panneau{width:min(340px,calc(100vw - 32px));margin:0 8px 8px 0;background:var(--creme);border:3px solid var(--encre);border-radius:4px;
  box-shadow:6px 6px 0 var(--nuit);overflow:hidden;animation:pop .24s steps(4) both;display:flex;flex-direction:column;max-height:min(72vh,560px)}
.g-p-tete{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--nuit);color:var(--pale);padding:8px 10px 8px 12px}
.g-p-tete b{font:400 15px/1 var(--f-titre);letter-spacing:.04em}
.g-p-tete small{font:12px/1 var(--f-mono);color:var(--lime)}
.g-p-tete button{border:2px solid var(--pale);background:none;color:var(--pale);font:600 13px/1 var(--f-mono);padding:5px 8px;border-radius:3px;cursor:pointer}
.g-p-tete button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.g-p-corps{padding:14px 14px 10px;overflow-y:auto;display:grid;gap:10px}
.g-q{font:700 16px/1.35 var(--f-texte);margin:0;color:var(--encre)}
.g-q-sous{margin:-4px 0 2px;font-size:14px;color:var(--gris)}
.g-choix{display:grid;gap:8px}
.g-choix button,.g-choix a{display:flex;align-items:center;gap:10px;text-align:left;width:100%;box-sizing:border-box;
  background:#fff;color:var(--encre);border:2px solid var(--encre);border-radius:3px;padding:10px 12px;
  font:600 15px/1.3 var(--f-texte);text-decoration:none;cursor:pointer;box-shadow:0 3px 0 var(--encre);
  transition:transform .08s steps(2),box-shadow .08s steps(2),background .12s}
.g-choix button:hover,.g-choix a:hover{background:var(--pale)}
.g-choix button:active,.g-choix a:active{transform:translateY(3px);box-shadow:0 0 0 var(--encre)}
.g-choix button:focus-visible,.g-choix a:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.g-choix .g-ic{flex:none;width:26px;height:26px;display:grid;place-items:center;background:var(--lavande);border:2px solid var(--encre);
  font:600 13px/1 var(--f-mono);color:var(--encre)}
.g-choix a.g-fort{background:var(--violet);color:#fff}
.g-choix a.g-fort .g-ic{background:#fff}
.g-choix a.g-fort:hover{background:#5a4fd0}
.g-choix small{display:block;font:400 13px/1.3 var(--f-texte);color:inherit;opacity:.8}
.g-infos{font:13px/1.5 var(--f-mono);background:var(--pale);border:2px dashed var(--nuit);padding:8px 10px;border-radius:3px}
.g-infos .g-num{user-select:all;font-weight:600}
.g-statut{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.g-statut i{width:8px;height:8px;background:#3a9a2a}
.g-statut.g-ferme i{background:#c8603a}
.g-p-pied{display:flex;justify-content:space-between;gap:8px;padding:8px 14px 12px;border-top:2px dashed var(--lavande)}
.g-p-pied button{border:0;background:none;font:600 13px/1 var(--f-mono);color:var(--violet);cursor:pointer;padding:6px 2px}
.g-p-pied button:disabled{color:var(--lavande);cursor:default}
.g-p-pied button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
@media (max-width:560px){
  .g-perso svg{width:86px}
  .g-bulle{max-width:200px;font-size:13px;margin-right:16px}
  .g-panneau{width:calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));margin-right:4px}
}

/* retouche 24/10 : taille = multiple exact de la grille (1 case Gaston = 6 px, décor = 4 px) pour des pixels nets, sans flou */
.g-perso svg{width:136px}
@media (max-width:560px){.g-perso svg{width:68px}}
/* retouche 24/10 : plus d'animation CSS sur les groupes du dessin (certains navigateurs les passent en calque et les floutent) ;
   le hochement et le picorement sont des changements de classe faits par gaston.js. Bulle décalée à gauche, pointe vers le bec. */
.g-cig,.g-tete{animation:none!important}
.g-cig.bas{translate:0 2px}
.g-tete.pic{transform:translate(1px,1px)}
.g-bulle{margin-right:84px}
@media (max-width:560px){.g-bulle{margin-right:40px}}