/* Gillou : interface mobile moderne. Seul le personnage reste dessiné au crayon ;
   le décor est peint et flouté derrière lui, l'interface est nette et légère. */
:root {
  --texte: #1f2430; --doux: #6b7280; --trait: #e6e9ef; --fond-carte: #f6f7fa;
  --vert: #5fa36a; --vert-clair: #e5f3e6; --rouge: #e8382d; --jaune: #f5b928;
  --verre: rgba(255, 255, 255, .74); --ombre: 0 10px 30px rgba(20, 30, 50, .14); --ombre-legere: 0 4px 14px rgba(20, 30, 50, .10);
  --sol: 25dvh;                               /* hauteur du sol */
  --g: min(80vw, 52dvh, 430px);               /* largeur de Gillou */
  --police: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #eef2f5; color: var(--texte);
  font-family: var(--police); font-size: 16px; font-weight: 600; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; }
.picto { width: 1.5em; height: 1.5em; display: inline-block; vertical-align: middle; flex: none; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- scène */
#jeu { position: fixed; inset: 0; }
#scene { position: absolute; inset: 0; overflow: hidden; }
/* le décor entier est flou, comme une photo avec Gillou net au premier plan */
.fond { position: absolute; inset: -12px; filter: blur(var(--flou, 3.5px)) saturate(1.05); transition: filter 1.5s; background: var(--mur, transparent); }
#scene.nuit .fond { filter: blur(var(--flou, 3.5px)) brightness(.55) saturate(.75); }
#scene.nuit[data-lieu]:not(.dehors) .fond { filter: blur(var(--flou, 3.5px)) brightness(.8); }
.ciel { position: absolute; inset: 0; background: linear-gradient(var(--ciel1, #9fcbea), var(--ciel2, #e8f3f8) 75%); transition: background 2s; }
[data-lieu]:not(.dehors) .ciel { display: none; }
.astre { position: absolute; right: 16%; top: 16dvh; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fffbe6, var(--astre, #ffd96a) 60%);
  box-shadow: 0 0 40px 18px color-mix(in srgb, var(--astre, #ffd96a) 55%, transparent); transition: all 2s; }
.etoiles { position: absolute; inset: 0 0 50% 0; opacity: var(--nuit, 0); transition: opacity 2s;
  background-image: radial-gradient(2.4px 2.4px at 12% 20%, #fff, transparent), radial-gradient(2.4px 2.4px at 34% 12%, #fff, transparent),
    radial-gradient(2px 2px at 58% 28%, #fff, transparent), radial-gradient(2.4px 2.4px at 80% 9%, #fff, transparent),
    radial-gradient(2px 2px at 70% 40%, #fff, transparent), radial-gradient(1.8px 1.8px at 22% 44%, #fff, transparent); }
.nuages i { position: absolute; display: block; border-radius: 50%; background: rgba(255,255,255,.85); filter: blur(6px);
  animation: nuage 90s linear infinite; opacity: calc(1 - var(--nuit, 0) * .7); }
.nuages i:nth-child(1) { top: 9dvh; left: -30%; width: 180px; height: 46px; }
.nuages i:nth-child(2) { top: 20dvh; left: -50%; width: 240px; height: 58px; animation-duration: 140s; animation-delay: -60s; }
.nuages i:nth-child(3) { top: 30dvh; left: -40%; width: 130px; height: 34px; animation-duration: 110s; animation-delay: -30s; }
@keyframes nuage { to { transform: translateX(180vw); } }
.mur { position: absolute; inset: 0; }
.mur svg, .lointain svg, .accessoires svg { width: 100%; height: 100%; display: block; }
.lointain { position: absolute; left: 0; right: 0; bottom: calc(var(--sol) - 2px); height: 46dvh; }
.accessoires { position: absolute; left: 0; right: 0; bottom: calc(var(--sol) - 4px); height: min(60dvh, 150vw); }
.sol { position: absolute; left: 0; right: 0; bottom: 0; height: var(--sol); background: var(--sol-fond, #9cc184); }

/* Gillou : ses pieds (92 % de la hauteur de son dessin) posés sur la ligne de sol */
.gillou { position: absolute; left: 50%; width: var(--g); transform: translateX(-47%);
  bottom: calc(var(--sol) - 0.076 * var(--g)); cursor: pointer; z-index: 2; }
.gillou .gillou-svg { width: 100%; height: auto; display: block; overflow: visible; }
.gillou .g-sol { display: none; }

/* bulle de parole au-dessus de lui */
.bulle { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--sol) + var(--g) * .98);
  max-width: min(86vw, 380px); background: #fff; border-radius: 18px; box-shadow: var(--ombre);
  padding: 10px 16px; font-size: 16px; font-weight: 700; line-height: 1.25; text-align: center; z-index: 5; animation: apparait .25s ease-out; }
.bulle::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 16px; height: 16px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.bulle.refus { animation: refus .35s; color: #b3261e; }
@keyframes apparait { from { transform: translate(-50%, 10px) scale(.9); opacity: 0 } }
@keyframes refus { 25% { transform: translate(calc(-50% - 6px), 0) } 75% { transform: translate(calc(-50% + 6px), 0) } }
.envol { position: absolute; z-index: 6; width: 56px; height: 56px; pointer-events: none; animation: envol 1.6s ease-out forwards; }
@keyframes envol { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0 } 15% { opacity: 1; transform: translate(-50%, -10px) scale(1.1) }
  100% { transform: translate(-50%, -110px) scale(1); opacity: 0 } }

/* ---------------------------------------------------------------- jauges modernes */
.haut { position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 10px; align-items: flex-start;
  padding: calc(10px + env(safe-area-inset-top)) 12px 0; z-index: 4; }
.jauges { flex: 1; max-width: 340px; display: grid; gap: 8px; padding: 10px 12px; border-radius: 20px; box-shadow: var(--ombre-legere);
  background: var(--verre); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); }
.jauge { display: grid; grid-template-columns: 30px 1fr; align-items: center; column-gap: 8px; }
.jauge .picto { width: 30px; height: 30px; grid-row: span 2; }
.jauge .ligne { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #3b4150; line-height: 1.1; }
.jauge .ligne span:last-child { font-variant-numeric: tabular-nums; color: var(--doux); }
.barre { height: 8px; background: rgba(30, 40, 60, .1); border-radius: 99px; overflow: hidden; margin-top: 3px; }
.barre i { display: block; height: 100%; width: 50%; border-radius: 99px; transition: width .8s cubic-bezier(.3,.7,.3,1);
  background: linear-gradient(90deg, var(--c1), var(--c2)); box-shadow: 0 0 10px color-mix(in srgb, var(--c2) 60%, transparent); }
.jauge.basse .barre i { animation: alerte 1s ease-in-out infinite; }
.jauge.basse .ligne span:last-child { color: var(--rouge); }
@keyframes alerte { 50% { opacity: .35 } }
.coin { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rond { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; box-shadow: var(--ombre-legere);
  background: var(--verre); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.rond .picto { width: 32px; height: 32px; }
.horloge { font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 99px; white-space: nowrap; box-shadow: var(--ombre-legere);
  background: var(--verre); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* ---------------------------------------------------------------- sortie en cours */
.sortie { position: absolute; left: 50%; transform: translateX(-50%); top: calc(176px + env(safe-area-inset-top));
  width: min(92vw, 420px); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; z-index: 4;
  padding: 10px 12px; border-radius: 18px; box-shadow: var(--ombre-legere);
  background: var(--verre); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.sortie .picto { width: 30px; height: 30px; }
.sortie > span:nth-child(2) { flex: 1; font-weight: 800; }
.sortie .barre { flex-basis: 100%; --c1: #8fd19b; --c2: #4fa35f; }
.sortie button { background: var(--texte); color: #fff; border: 0; border-radius: 99px; padding: 6px 14px; font-weight: 800; }

/* ---------------------------------------------------------------- barre du bas */
.boutons { position: absolute; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 4;
  display: flex; justify-content: space-around; padding: 8px 6px; border-radius: 24px; box-shadow: var(--ombre);
  background: var(--verre); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); max-width: 520px; margin: 0 auto; }
.boutons button { background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 12px; font-weight: 800; color: #3b4150; padding: 2px 6px; border-radius: 16px; transition: transform .15s, background .15s; }
.boutons button:active { transform: scale(.93); background: rgba(255,255,255,.6); }
.boutons b { display: grid; place-items: center; font-weight: 400; }
.boutons b .picto { width: 44px; height: 44px; }

/* ---------------------------------------------------------------- fenêtres (feuilles qui montent du bas) */
dialog.feuille { width: min(100vw, 560px); max-width: 100vw; max-height: 88dvh; margin: auto auto 0; padding: 0; border: 0;
  border-radius: 26px 26px 0 0; background: #fff; color: var(--texte); display: flex; flex-direction: column; box-shadow: 0 -10px 40px rgba(20,30,50,.18); }
dialog.feuille::before { content: ''; display: block; flex: none; width: 44px; height: 5px; border-radius: 99px; background: #d5d9e0; margin: 8px auto 0; }
dialog.feuille:not([open]) { display: none; }
dialog.feuille[open] { animation: monte .3s cubic-bezier(.2,.8,.3,1); }
@keyframes monte { from { transform: translateY(40%) } }
dialog::backdrop { background: rgba(20, 30, 45, .38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@media (min-width: 600px) { dialog.feuille { margin: auto; border-radius: 26px; } }
dialog header { display: flex; align-items: center; gap: 10px; padding: 8px 16px 10px; }
dialog header > .picto { width: 38px; height: 38px; }
dialog h2 { flex: 1; margin: 0; font-size: 21px; font-weight: 900; line-height: 1.1; }
dialog h3 { font-size: 16px; font-weight: 900; margin: 20px 0 8px; display: flex; align-items: center; gap: 6px; }
dialog h3 .picto { width: 26px; height: 26px; }
.fermer { background: var(--fond-carte); border: 0; border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; }
header .fermer .picto { width: 22px; height: 22px; }
.contenu { overflow-y: auto; padding: 4px 16px calc(20px + env(safe-area-inset-bottom)); }
.petit { font-size: 13px; color: var(--doux); margin: 4px 0; font-weight: 600; }

/* onglets : contrôle segmenté */
.onglets { display: flex; gap: 4px; margin: 0 16px 10px; padding: 4px; background: #eef1f5; border-radius: 14px; flex: none; }
.onglets button { flex: 1; border: 0; background: none; border-radius: 10px; padding: 8px 4px; font-size: 13px; font-weight: 800; color: var(--doux); }
.onglets button.actif { background: #fff; color: var(--texte); box-shadow: 0 2px 8px rgba(20,30,50,.12); }

/* accordéons */
details.groupe { border: 1px solid var(--trait); border-radius: 18px; background: #fff; margin: 10px 0; overflow: hidden; }
details.groupe[open] { box-shadow: var(--ombre-legere); }
details.groupe summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 17px; font-weight: 900; cursor: pointer; }
details.groupe summary::-webkit-details-marker { display: none; }
details.groupe summary .picto { width: 40px; height: 40px; }
details.groupe summary::after { content: ''; margin-left: auto; width: 10px; height: 10px; border-right: 3px solid #9aa1ad; border-bottom: 3px solid #9aa1ad;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
details.groupe[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
details.groupe summary small { color: var(--doux); font-size: 13px; font-weight: 700; }
.elements { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 10px; padding: 2px 12px 14px; }
.element { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px; text-align: center;
  background: var(--fond-carte); border: 0; border-radius: 16px; transition: transform .12s, background .12s; }
.element:hover:not(:disabled) { background: #eef1f5; }
.element:active:not(:disabled) { transform: scale(.96); }
.element .picto { width: 58px; height: 58px; }
.element .nom-el { font-size: 15px; font-weight: 900; line-height: 1.1; }
.element .effets { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.element .effets span { display: inline-flex; align-items: center; gap: 1px; font-size: 12px; font-weight: 900; padding: 1px 6px 1px 2px; border-radius: 99px; }
.element .effets .picto { width: 22px; height: 22px; }
.element .plus { color: #2f7d3b; background: #e3f4e5; } .element .moins { color: #b3261e; background: #fbe5e3; }
.element:disabled { opacity: .45; cursor: not-allowed; }
.element .raison { font-size: 12px; color: #b3261e; line-height: 1.15; font-weight: 700; }
.element .duree { font-size: 12px; color: var(--doux); font-weight: 800; }

/* journal : frise */
.journal { list-style: none; margin: 0; padding: 0; }
.journal .jour { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--doux); margin: 16px 0 6px; }
.journal li.ev { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; line-height: 1.3; }
.journal li.ev .picto { width: 40px; height: 40px; background: var(--fond-carte); border-radius: 12px; padding: 3px; }
.journal li.ev time { font-size: 12px; color: var(--doux); display: block; font-weight: 800; }
.journal li.ev-alerte span.texte { color: #b3261e; }
.journal li.ev-anecdote span.texte { font-style: italic; color: #4b5260; }
.lien { background: none; border: 0; padding: 10px 0; display: inline-flex; align-items: center; gap: 8px; color: var(--texte); font-size: 15px; font-weight: 800; text-decoration: none; }
.lien .picto { width: 28px; height: 28px; }

/* santé */
.diagnostic { font-size: 17px; font-weight: 800; line-height: 1.3; margin: 4px 0 12px; padding: 12px 14px; border-radius: 16px; background: var(--vert-clair); color: #1f5a2a; }
.diagnostic.inquiet { background: #fdecea; color: #8c1d16; }
.fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fiche { background: var(--fond-carte); border-radius: 16px; padding: 10px 12px; }
.fiche b { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 900; color: var(--doux); text-transform: uppercase; letter-spacing: .03em; }
.fiche b .picto { width: 30px; height: 30px; }
.fiche span { display: block; font-size: 16px; font-weight: 800; margin-top: 4px; }
.choix { display: flex; flex-wrap: wrap; gap: 6px; }
.choix button { background: var(--fond-carte); border: 0; border-radius: 99px; padding: 7px 14px; font-weight: 800; font-size: 14px; }
.choix button.actif { background: var(--texte); color: #fff; }
.graphe { background: var(--fond-carte); border-radius: 18px; margin-top: 10px; padding: 8px; }
.graphe svg { width: 100%; height: auto; display: block; }
.legende { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.legende button { background: var(--fond-carte); border: 0; border-radius: 99px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 13px; font-weight: 800; }
.legende button.eteint { opacity: .4; }
.legende i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.details .jauge { margin: 12px 0; grid-template-columns: 34px 1fr; }
.details .jauge .picto { width: 34px; height: 34px; }
.details .jauge .ligne { font-size: 14px; }
.vie-carte { background: var(--fond-carte); border-radius: 18px; padding: 14px; margin-bottom: 12px; }
.vie-carte h4 { margin: 0 0 6px; font-size: 15px; font-weight: 900; display: flex; align-items: center; gap: 8px; }
.vie-carte h4 .picto { width: 30px; height: 30px; }
.vie-carte p { margin: 6px 0 0; font-size: 14px; color: #4b5260; font-weight: 600; line-height: 1.35; }
.vie-carte .grand-chiffre { font-size: 22px; font-weight: 900; }
.frise { position: relative; height: 12px; border-radius: 99px; background: linear-gradient(90deg, #cfe9d3, #f6e3b5 70%, #f1c9c4); margin: 12px 4px 4px; }
.frise i { position: absolute; top: -5px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--texte); transform: translateX(-50%); }
.frise-bornes { display: flex; justify-content: space-between; font-size: 12px; color: var(--doux); font-weight: 800; }
.teinte-pastille { width: 28px; height: 28px; border-radius: 50%; display: inline-block; vertical-align: middle; box-shadow: inset 0 -3px 6px rgba(0,0,0,.2); margin-right: 6px; }

/* réglages, bilans */
.champ { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 800; color: var(--doux); }
.champ input { font: inherit; font-size: 18px; font-weight: 800; color: var(--texte); padding: 10px 14px; border: 2px solid var(--trait); border-radius: 14px; background: #fff; outline: none; }
.champ input:focus { border-color: var(--vert); box-shadow: 0 0 0 4px var(--vert-clair); }
.pile { display: flex; flex-direction: column; align-items: flex-start; }
.grand { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 16px 0 4px; padding: 14px; font-size: 17px; font-weight: 900;
  background: var(--vert); color: #fff; border: 0; border-radius: 16px; box-shadow: 0 6px 16px color-mix(in srgb, var(--vert) 40%, transparent); }
.grand .picto { width: 28px; height: 28px; }
.bilan { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 4px 0 10px; }
.bilan div { display: flex; align-items: center; gap: 8px; background: var(--fond-carte); border-radius: 14px; padding: 8px 10px; font-size: 14px; font-weight: 800; }
.bilan .picto { width: 30px; height: 30px; }
.bilan .delta { margin-left: auto; font-size: 14px; display: inline-flex; align-items: center; }
.bilan .delta .picto { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- appel */
#appel { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(120% 80% at 50% 0%, #d8ecf6, #eef4f1 60%, #e6efe2); }
.appel-carte { width: min(100%, 420px); text-align: center; background: rgba(255,255,255,.7); border-radius: 28px; padding: 18px 18px 22px; box-shadow: var(--ombre);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.appel-gillou { width: min(60vw, 240px); margin: -4px auto -8px; }
.appel-gillou svg { width: 100%; height: auto; display: block; overflow: visible; }
#appel h1 { font-size: 30px; font-weight: 900; margin: 4px 0 0; }
#appel p { margin: 6px 0 14px; color: #4b5260; font-weight: 600; }
#appel form { display: flex; gap: 10px; align-items: center; }
#appel input { flex: 1; min-width: 0; font: inherit; font-size: 22px; font-weight: 800; letter-spacing: 1px; padding: 12px 14px; text-align: center;
  border: 2px solid var(--trait); border-radius: 18px; background: #fff; outline: none; color: var(--texte); }
#appel input:focus { border-color: var(--vert); box-shadow: 0 0 0 4px var(--vert-clair); }
.bouton-appel { width: 62px; height: 62px; flex: none; display: grid; place-items: center; padding: 0; background: linear-gradient(#7ed08a, #4fa35f);
  border: 0; border-radius: 50%; box-shadow: 0 8px 18px rgba(79, 163, 95, .45); }
.bouton-appel .picto { width: 40px; height: 40px; }
.sonne .bouton-appel { animation: sonne .5s infinite; }
@keyframes sonne { 25% { transform: rotate(-12deg) } 75% { transform: rotate(12deg) } }
.appel-statut { min-height: 1.3em; font-size: 17px; font-weight: 800; }

/* ================================================================ thème « livre d'images »
   calqué sur la planche de référence : crème et pêche, bordures douces, onglet actif rosé,
   décors illustrés (aquarelle et crayon de couleur) ; aucun trait d'accentuation à trois brins */
:root {
  --texte: #3a2e28; --doux: #8b7b6c; --trait: #f0e1cb; --fond-carte: #fdf3e4;
  --creme: #fffaf2; --peche: #fde9d2; --rose: #fde3de; --rose-fort: #e8625a; --vert-fonce: #1f5e3a;
  --verre: rgba(255, 251, 244, .92); --ombre: 0 10px 28px rgba(110, 80, 50, .16); --ombre-legere: 0 4px 14px rgba(110, 80, 50, .12);
  --titre: 'Baloo 2', 'Nunito', system-ui, sans-serif;
}
html, body { background: #f7ecdc; }
/* sur grand écran, l'appli garde un format téléphone, centrée */
#jeu, #appel { max-width: 520px; margin: 0 auto; }
#jeu { right: 0; left: 0; }
#scene { container-type: size; }
@media (min-width: 560px) { #jeu { box-shadow: 0 0 0 1px #ead9c1, 0 20px 60px rgba(110, 80, 50, .25); } }

/* décor illustré : l'image couvre l'écran, posée sur le bas ; les pieds de Gillou sur son horizon */
.photo { position: absolute; inset: 0; background: center bottom / cover no-repeat; display: none; }
#scene[data-image] .photo { display: block; }
#scene[data-image] .fond { inset: 0; filter: saturate(1.02); }
#scene[data-image] .ciel, #scene[data-image] .mur, #scene[data-image] .lointain, #scene[data-image] .accessoires, #scene[data-image] .sol { display: none; }
#scene[data-image] { --sol: calc((1 - var(--horizon, .7)) * max(100cqh, 150cqw)); }
#scene.nuit[data-image="jour"] .fond { filter: brightness(.55) saturate(.75) hue-rotate(-8deg); }
#scene.nuit[data-image="nuit"] .fond { filter: none; }

/* jauges */
.jauges { background: var(--verre); border: 1.5px solid var(--trait); border-radius: 22px; padding: 12px 14px; gap: 9px; }
.jauge .ligne { color: var(--texte); font-size: 13px; }
.jauge .ligne span:last-child { color: var(--doux); }
.barre { height: 9px; background: #f1e6d6; }
.barre i { box-shadow: none; }
.picto { object-fit: contain; }
img.picto { display: inline-block; }
.rond, .horloge { background: var(--creme); border: 1.5px solid var(--trait); }
.horloge { color: var(--texte); }

/* sortie en cours */
.sortie { background: var(--creme); border: 1.5px solid var(--trait); }
.sortie button { background: var(--vert-fonce); border-radius: 99px; padding: 7px 16px; }

/* barre du bas : bouton actif rosé */
.boutons { background: var(--creme); border: 1.5px solid var(--trait); border-radius: 26px; padding: 8px; gap: 4px; }
.boutons button { flex: 1; color: var(--texte); font-size: 13px; padding: 6px 4px; border-radius: 18px; }
.boutons button.actif { background: var(--rose); color: var(--rose-fort); }
.boutons b .picto { width: 46px; height: 46px; }

/* bulle */
.bulle { background: var(--creme); border: 1.5px solid var(--trait); color: var(--texte); }
.bulle::after { background: var(--creme); border-right: 1.5px solid var(--trait); border-bottom: 1.5px solid var(--trait); }

/* fenêtres : papier crème, bordure fleurie en bas */
dialog.feuille { background: var(--creme); border: 1.5px solid var(--trait); border-bottom: 0; position: relative; }
dialog.feuille::before { background: #e6d5bf; }
dialog.feuille::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 74px; pointer-events: none;
  background: url("/static/ornements/bordure.png") center bottom / auto 72% repeat-x,
    linear-gradient(rgba(255, 250, 242, 0), var(--creme) 45%); }
dialog .contenu { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
dialog h2 { font-family: var(--titre); font-weight: 800; font-size: 24px; color: var(--texte); }
dialog h3 { font-family: var(--titre); font-weight: 800; font-size: 18px; }
.fermer { background: #fff; border: 1.5px solid var(--trait); }

/* onglets : pastilles, l'active en rose */
.onglets { background: transparent; padding: 0; gap: 6px; }
.onglets button { background: var(--fond-carte); border: 1.5px solid transparent; border-radius: 14px; color: var(--doux); }
.onglets button.actif { background: var(--rose); border-color: #f3b8ae; color: var(--texte); box-shadow: none; }

/* accordéons et tuiles */
details.groupe { background: var(--creme); border: 1.5px solid var(--trait); border-radius: 20px; }
details.groupe[open] { box-shadow: none; }
details.groupe summary { font-family: var(--titre); font-weight: 800; font-size: 19px; color: var(--texte); }
.element { background: var(--peche); border: 1.5px solid #f6dcbc; border-radius: 18px; }
.element:nth-child(5n+5) { background: var(--rose); border-color: #f6cfc8; }
.element:hover:not(:disabled) { background: #fce0c2; }
.element .nom-el { font-family: var(--titre); font-weight: 800; font-size: 17px; color: var(--texte); }
.element .effets span { background: transparent !important; padding: 0 2px; }
.element .plus { color: #2f7d3b; } .element .moins { color: #c0392b; }

/* carnet de santé */
.diagnostic { position: relative; min-height: 92px; display: flex; align-items: center; padding: 14px 100px 26px 18px; border-radius: 20px;
  background: linear-gradient(#e3f2cf, #cfe8b4); color: #2f6b2c; font-family: var(--titre); font-weight: 800; font-size: 22px; line-height: 1.1; overflow: hidden; }
.diagnostic::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 34px; background: url("/static/ornements/bordure.png") center bottom / auto 100% repeat-x; }
.diagnostic .mini { position: absolute; right: 10px; bottom: 6px; width: 84px; height: 84px; z-index: 1; }
.diagnostic.inquiet { background: linear-gradient(#fde6e2, #f8d0c9); color: #8c1d16; }
.fiche, .vie-carte, .graphe, .bilan div { background: #fff; border: 1.5px solid var(--trait); }
.fiche b { color: var(--doux); }
.fiche span { color: var(--texte); }
.choix button { background: #fff; border: 1.5px solid var(--trait); color: var(--texte); }
.choix button.actif { background: var(--rose); border-color: #f3b8ae; color: var(--texte); }
.legende button { background: #fff; border: 1.5px solid var(--trait); }
.journal li.ev .picto { background: #fff; border: 1.5px solid var(--trait); }
.grand { background: var(--vert-fonce); }

/* appel */
#appel { background: #f7ecdc url("/static/decors/maison.jpg") center bottom / cover no-repeat; }
.appel-carte { background: rgba(255, 250, 242, .9); border: 1.5px solid var(--trait); }
#appel h1 { font-family: var(--titre); font-weight: 800; font-size: 38px; color: var(--texte); }
#appel input { border-color: var(--trait); background: #fff; }

/* ---------------------------------------------------------------- annonces, pesée, caractère */
.element.annonce .raison { color: #b26a12; }
/* le picto de la balance clignote quand le poids affiché n'est plus à jour */
#b-peser.clignote { animation: clignote-balance 1.1s ease-in-out infinite; }
@keyframes clignote-balance { 50% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(245, 185, 40, .45); } }
/* sur la balance : elle est sous ses pieds, l'écran devant ; Gillou monte dessus */
#scene { --bw: calc(var(--g) * .72); --bh: calc(var(--bw) * .4125); }
.balance { position: absolute; left: 50%; transform: translateX(-50%); width: var(--bw); bottom: calc(var(--sol) - var(--bh) * .55); z-index: 1; }
.balance img { width: 100%; display: block; }
.balance .ecran { position: absolute; left: 22%; right: 22%; top: 69%; height: 21%; display: grid; place-items: center;
  font: 800 clamp(13px, calc(var(--bw) * .075), 26px) / 1 ui-monospace, 'Consolas', monospace; color: #24412c; letter-spacing: .04em; }
#scene.pesee .gillou { bottom: calc(var(--sol) - var(--bh) * .55 + var(--bh) * .66 - .076 * var(--g)); transition: bottom .4s cubic-bezier(.3, 1.6, .5, 1); }
.carte-pesee { position: absolute; z-index: 6; left: 50%; transform: translateX(-50%); top: calc(12px + env(safe-area-inset-top));
  width: min(92%, 420px); background: var(--creme); border: 1.5px solid var(--trait); border-radius: 22px; padding: 12px 14px 4px; box-shadow: var(--ombre); }
#jeu:has(.carte-pesee:not([hidden])) .haut { visibility: hidden; }
.pesee-titre { display: flex; align-items: center; gap: 8px; font-family: var(--titre); font-size: 20px; }
.pesee-titre .picto { width: 34px; height: 34px; }
.pesee-quand { margin-left: auto; font: 700 12px var(--police); color: var(--doux); }
.pesee-ligne { display: flex; align-items: baseline; gap: 12px; margin: 2px 0 6px; }
.pesee-g { font-family: var(--titre); font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.pesee-ecart { display: inline-flex; align-items: center; gap: 2px; font-weight: 900; font-size: 16px; padding: 2px 10px 2px 4px; border-radius: 99px; background: #f1e6d6; }
.pesee-ecart .picto { width: 22px; height: 22px; }
.pesee-ecart.bien { background: #e3f4e5; color: #2f7d3b; }
.pesee-ecart.attention { background: #fde4df; color: #c0392b; }
.imc-barre { position: relative; height: 12px; border-radius: 99px;
  background: linear-gradient(90deg, #7cc6f2 0 27.1%, #6fbf73 27.1% 54.2%, #f5b928 54.2% 75%, #e8625a 75% 100%); }
.imc-barre i { position: absolute; top: -6px; width: 6px; height: 24px; border-radius: 4px; background: var(--texte); transform: translateX(-50%);
  box-shadow: 0 0 0 3px #fff; transition: left 1.4s cubic-bezier(.2, .8, .3, 1); }
.imc-bornes { display: grid; grid-template-columns: 27.1% 27.1% 20.8% 25%; font-size: 11px; font-weight: 800; color: var(--doux); margin-top: 4px; }
.imc-bornes span { text-align: center; }
.pesee-texte { font-size: 13px; color: #4b3f37; margin: 8px 0 0; }
.carte-pesee .grand { margin: 10px 0 8px; padding: 10px; }
.caractere { display: grid; gap: 6px; margin: 4px 0; }
.caractere div { display: grid; grid-template-columns: 30px 90px 1fr; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; }
.caractere .picto { width: 30px; height: 30px; }
.caractere .barre { margin: 0; }

/* ================================================================ foyer, contacts, frigo, courses, douche */
.boutons button { font-size: 11px; padding: 6px 2px; }
.boutons b .picto { width: 38px; height: 38px; }
.compagnons { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
/* à plusieurs, tout le monde se serre un peu */
#scene.a-plusieurs { --g: min(60vw, 44dvh, 380px); }
.compagnon { position: absolute; left: calc(50% + var(--x)); width: calc(var(--g) * var(--k)); transform: translateX(-50%);
  bottom: calc(var(--sol) - 0.076 * var(--g) * var(--k) + 6px); pointer-events: auto; cursor: pointer; }
.compagnon.loin { bottom: calc(var(--sol) + var(--g) * .1); z-index: -1; }
.compagnon .gillou-svg { width: 100%; height: auto; display: block; overflow: visible; }
.compagnon .g-sol { display: none; }
#scene[data-mode] .compagnons, #scene.pesee .compagnons { display: none; }
.haut .jauges { position: relative; }
.selecteur { position: absolute; top: calc(100% + 8px); left: 12px; display: flex; gap: 6px; }
.selecteur button { display: flex; flex-direction: column; align-items: center; width: 58px; padding: 4px 2px 3px; border-radius: 16px;
  background: var(--creme); border: 1.5px solid var(--trait); font: 800 11px var(--police); color: var(--texte); position: relative; box-shadow: var(--ombre-legere); }
.selecteur button .picto { width: 36px; height: 36px; }
.selecteur button.actif { background: var(--rose); border-color: #f3b8ae; }
.selecteur button i { position: absolute; top: 2px; right: 4px; font-style: normal; font-size: 12px; color: var(--doux); }
.carte-vide { position: absolute; z-index: 4; left: 50%; top: 40%; transform: translate(-50%, -50%); width: min(88%, 360px); text-align: center;
  background: var(--creme); border: 1.5px solid var(--trait); border-radius: 22px; padding: 16px; box-shadow: var(--ombre); }
.carte-vide .picto { width: 64px; height: 64px; }
.carte-vide .choix { justify-content: center; }
#scene.sans-gillou .gillou { visibility: hidden; }
.coeur .liens { display: grid; gap: 6px; margin: 6px 0 10px; }
.coeur .liens div { display: flex; align-items: center; gap: 10px; }
.coeur .liens .picto { width: 38px; height: 38px; }
.coeur .liens span { display: flex; flex-direction: column; font-size: 12px; color: var(--doux); font-weight: 800; }
.coeur .liens b { font-size: 15px; color: var(--texte); }
.pile-cartes { display: grid; gap: 8px; }
.carte-ligne, .contact { background: #fff; border: 1.5px solid var(--trait); border-radius: 18px; padding: 10px 12px; }
.carte-ligne { display: flex; align-items: center; gap: 10px; }
.carte-ligne .picto { width: 40px; height: 40px; }
.carte-ligne span { flex: 1; }
.carte-ligne button, .contact .choix button { background: var(--peche); border: 1.5px solid #f6dcbc; border-radius: 99px; padding: 6px 12px; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.contact .choix button .picto { width: 24px; height: 24px; }
.contact-tete { display: flex; align-items: center; gap: 10px; }
.contact-tete > .picto { width: 52px; height: 52px; }
.contact-tete span { flex: 1; display: flex; flex-direction: column; }
.contact-tete b { font-family: var(--titre); font-size: 19px; line-height: 1.1; }
.contact-tete small { font-size: 12px; color: var(--doux); font-weight: 700; }
.contact .modifier { background: none; border: 0; font-size: 18px; color: var(--doux); }
.contact .choix, .contact .modif { margin-top: 8px; }
.contact .modif { display: grid; gap: 6px; }
.contact .modif input, .formulaire input { font: inherit; font-size: 17px; font-weight: 800; padding: 8px 12px; border: 2px solid var(--trait); border-radius: 12px; }
.roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; }
.roles label { display: grid; place-items: center; padding: 2px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; }
.roles input { position: absolute; opacity: 0; pointer-events: none; }
.roles .picto { width: 40px; height: 40px; }
.roles label:has(input:checked) { border-color: #f3b8ae; background: var(--rose); }
.formulaire { padding: 4px 12px 12px; display: grid; gap: 10px; }
.garde-don label { display: inline-flex; align-items: center; gap: 4px; background: var(--fond-carte); border-radius: 99px; padding: 4px 12px 4px 6px; font-weight: 800; }
.garde-don input { padding: 0; }
.garde-don .picto { width: 26px; height: 26px; }
.barre-mode { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: calc(96px + env(safe-area-inset-bottom)); max-width: 500px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--creme); border: 1.5px solid var(--trait); border-radius: 18px; box-shadow: var(--ombre-legere); }
.barre-mode .aide { flex: 1; font-size: 13px; font-weight: 700; color: #4b3f37; }
.barre-mode .place { font-weight: 900; font-size: 13px; background: var(--peche); padding: 2px 8px; border-radius: 99px; }
.barre-mode button { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--trait); background: #fff; border-radius: 99px; padding: 5px 10px; font-weight: 800; font-size: 13px; }
.barre-mode button .picto { width: 26px; height: 26px; }
#scene[data-mode="cuisine"] { --g: min(54vw, 38dvh, 300px); }
#scene[data-mode="cuisine"] .gillou { left: 27%; }
.frigo-ouvert { position: absolute; z-index: 1; right: -2%; bottom: calc(var(--sol) - 8px); height: min(44dvh, 88vw); aspect-ratio: 680 / 900; }
.frigo-ouvert > img { width: 100%; height: 100%; display: block; }
.frigo-ouvert .cases { position: absolute; inset: 0; }
.aliment { position: absolute; width: 15%; aspect-ratio: 1; transform: translateX(-50%); padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
.aliment .picto { width: 100%; height: 100%; pointer-events: none; }
.aliment.pris { opacity: .25; }
.aliment-volant { position: fixed; z-index: 50; width: 64px; height: 64px; transform: translate(-50%, -50%); pointer-events: none; }
.aliment-volant .picto { width: 100%; height: 100%; position: relative; z-index: 1; }
.aliment-volant.mange { transition: clip-path .3s, transform .3s; transform: translate(-50%, -50%) scale(calc(.5 + .5 * var(--reste, 1))); }
/* boire : la bouteille se retourne, goulot vers sa bouche (en bas à gauche de la bouteille) ;
   le liquide reste côté goulot (le point le plus bas) et c'est le côté du fond qui se vide */
.aliment-volant.boit { transform: translate(-50%, -50%) rotate(-142deg); transition: transform .45s ease-in-out; }
.aliment-volant .liquide { position: absolute; z-index: 0; left: 31%; right: 31%; top: 30%; bottom: 8%; border-radius: 4px 4px 8px 8px; transform-origin: top; transition: transform 2.4s linear; opacity: .9; }
.miette { position: fixed; z-index: 51; width: 6px; height: 5px; border-radius: 40%; background: #c88a4a; pointer-events: none; animation: miette .9s ease-in forwards; }
@keyframes miette { to { transform: translate(var(--dx), 60px) rotate(120deg); opacity: 0; } }
.tache { position: fixed; z-index: 3; width: 14px; height: 11px; border-radius: 50% 40% 55% 45%; opacity: .85; pointer-events: none; animation: tache 6s forwards; }
@keyframes tache { 80% { opacity: .85 } to { opacity: 0 } }
dialog.courses .vitrine { height: 92px; flex: none; background: url("/static/decors/epicerie.jpg") center 45% / cover; }
.produit.choisi { background: #e3f4e5; border-color: #b9e0bf; }
.produit .effets .picto { width: 22px; height: 22px; }
.produit .salit { font-size: 10px; font-weight: 900; color: #b26a12; background: #fdebd0; padding: 1px 6px; border-radius: 99px; }
.quantite { display: inline-flex; align-items: center; gap: 8px; }
.quantite button { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--trait); background: #fff; font-size: 18px; font-weight: 900; padding: 0; }
.quantite button:disabled { opacity: .35; }
.caisse { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1.5px solid var(--trait); background: var(--creme); }
.caisse span { font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.caisse span .picto { width: 26px; height: 26px; }
.caisse .grand { margin: 0; padding: 10px; font-size: 15px; }
.caisse .grand:disabled { opacity: .45; }
dialog.courses::after { display: none; }
dialog.courses .contenu { padding-bottom: 12px; }
.douche-couche { position: absolute; inset: 0; z-index: 4; cursor: none; touch-action: none; }
.mousse { position: absolute; pointer-events: none; transition: opacity .12s; }
.gant { position: absolute; width: 92px; pointer-events: none; transform: translate(-35%, -40%) rotate(-12deg); z-index: 2; left: 70%; top: 45%; }
.gant.frotte { transform: translate(-35%, -40%) rotate(8deg) scale(.96); }
.bulle-savon { position: absolute; width: var(--t); height: var(--t); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, #fff, rgba(190, 230, 255, .5) 60%, rgba(255, 200, 240, .4)); border: 1px solid rgba(160, 200, 230, .7); animation: savon 1.1s ease-out forwards; }
@keyframes savon { to { transform: translate(var(--dx), -70px) scale(1.3); opacity: 0; } }

/* ================================================================ pièces : un seul lieu à la fois, on y entre en marchant */
/* le bouton pour sortir d'une pièce : gros, corail, sous les jauges */
.porte-sortie { position: absolute; top: calc(100% + 10px); left: 12px; z-index: 6; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 18px 6px 8px; border-radius: 99px; border: 2.5px solid #fff; background: #f07c62; color: #fff;
  font: 900 17px var(--police); box-shadow: 0 6px 16px rgba(140, 60, 40, .35); }
.porte-sortie .picto { width: 44px; height: 44px; background: #fff; border-radius: 50%; padding: 3px; }
.porte-sortie:active { transform: scale(.95); }
.porte-sortie.appel { animation: appel .9s ease-out 2; }
@keyframes appel { 30% { transform: scale(1.1); } 60% { transform: scale(.97); } }
body.dans-piece .selecteur { display: none; }

/* il s'en va par la droite en se dandinant, le décor s'efface ; puis il arrive par la gauche */
#scene .fond, #scene .sol { transition: opacity .35s; }
#scene.voile .fond, #scene.voile .sol { opacity: 0; }
#scene.voile .compagnons { opacity: 0; transition: opacity .3s; }
.gillou.part { animation: part .7s ease-in forwards; }
.gillou.arrive { animation: arrive .65s ease-out; }
@keyframes part { to { transform: translateX(calc(-47% + 75vw)); } }
@keyframes arrive { from { transform: translateX(calc(-47% - 75vw)); } }
.gillou.part .gillou-svg, .gillou.arrive .gillou-svg { animation: dandine .16s ease-in-out infinite alternate; transform-origin: 50% 92%; }
@keyframes dandine { from { transform: rotate(-6deg) translateY(0); } to { transform: rotate(6deg) translateY(-5%); } }

/* la douche : pas de cadre bleu de sélection ni de surlignage au toucher quand on frotte */
.douche-couche, .douche-couche * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; outline: none; }
.douche-couche img { -webkit-user-drag: none; }
.douche-couche ::selection { background: transparent; }
/* le cadre « Rentrer » un peu plus bas que les jauges (et sous les avatars s'il y en a) */
.sortie { top: calc(198px + env(safe-area-inset-top)); }
#jeu:has(.selecteur:not([hidden]) button) .sortie { top: calc(266px + env(safe-area-inset-top)); }

/* ================================================================ négligence : jauges critiques, courrier officiel */
.jauge.basse > .picto { animation: jauge-critique 1s ease-in-out infinite; }
.jauge.basse { animation: jauge-fond 1s ease-in-out infinite; border-radius: 12px; }
@keyframes jauge-critique { 50% { transform: scale(1.18); filter: drop-shadow(0 0 6px rgba(230, 60, 50, .8)); } }
@keyframes jauge-fond { 50% { background: rgba(240, 90, 80, .16); } }

dialog.courrier { border: 0; padding: 0; background: transparent; max-width: min(92vw, 420px); overflow: visible; }
dialog.courrier::backdrop { background: rgba(40, 30, 25, .55); }
.lettre { position: relative; background: #fffdf6; color: #2f2a26; border-radius: 6px; padding: 22px 22px 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35); font-family: Georgia, 'Times New Roman', serif; transform: rotate(-1deg);
  background-image: repeating-linear-gradient(#fffdf6 0 27px, #e9eef5 27px 28px); }
.lettre .entete { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #2f2a26; padding-bottom: 10px; margin-bottom: 12px; }
.lettre .entete .picto { width: 56px; height: 56px; }
.lettre .entete small { display: block; font: 700 11px var(--police); letter-spacing: .08em; text-transform: uppercase; color: #6d6259; }
.lettre .entete b { font-size: 22px; }
dialog.courrier[data-niveau="3"] .lettre .entete b { color: #b3261e; }
.lettre .objet { font-style: italic; margin: 0 0 8px; }
.lettre p { line-height: 1.5; font-size: 16px; }
.lettre .signature { text-align: right; font-style: italic; color: #6d6259; margin-top: 14px; }
.lettre .tampon { position: absolute; right: 18px; top: 74px; display: flex; flex-direction: column; align-items: center;
  transform: rotate(-14deg); color: #c0392b; border: 3px solid #c0392b; border-radius: 10px; padding: 4px 8px; opacity: .85;
  font: 900 12px var(--police); text-transform: uppercase; background: rgba(255, 255, 255, .4); }
.lettre .tampon .picto { width: 34px; height: 34px; }
.lettre .tampon.tombe { animation: tampon .55s cubic-bezier(.3, 1.6, .5, 1) both .25s; }
@keyframes tampon { from { transform: rotate(-30deg) scale(2.6); opacity: 0; } 70% { opacity: .95; } to { transform: rotate(-14deg) scale(1); opacity: .85; } }
.lettre .grand { margin-top: 10px; font-family: var(--police); }

/* bain de soleil : allongé vu de dessus, il est posé sur le sable (plus bas que debout) */
#scene .gillou { transition: translate .9s ease-in-out; }
body[data-humeur="bronze"] #scene .gillou { translate: 0 42%; }
/* courrier : le tampon s'abat en bas, près de la signature */
.lettre .tampon { top: auto; bottom: 74px; right: 14px; }
body[data-humeur="bronze"] #scene .gillou { translate: 0 30%; }
.lettre .signature { text-align: left; max-width: 58%; }
.lettre .tampon { bottom: 78px; right: 18px; }

/* ================================================================ situations : accessoires animés de chaque pièce */
.situation { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.situation .accessoire { position: absolute; transform: translate(-50%, -50%); }
.situation .accessoire.devant { z-index: 3; }
.situation .accessoire img, .situation .accessoire .picto { width: 100%; height: auto; display: block; }
#scene:has(.situation:not([hidden]) .devant) .gillou { z-index: 2; }
.situation .devant { z-index: 4; }
/* télé : l'écran scintille et change de couleur, une lueur bleutée balaie la pièce */
.accessoire.scintille { animation: scintille 2.4s steps(6) infinite; }
@keyframes scintille { 0% { filter: hue-rotate(0) brightness(1.05); } 50% { filter: hue-rotate(160deg) brightness(1.2); } 100% { filter: hue-rotate(320deg) brightness(1); } }
.situation[data-lueur="tele"]::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 82% 58%, rgba(120, 190, 255, .35), transparent 55%);
  animation: lueur-tele 1.7s ease-in-out infinite alternate; mix-blend-mode: screen; }
@keyframes lueur-tele { from { opacity: .4; } to { opacity: 1; } }
/* jeu : le ballon rebondit */
.accessoire.rebondit { animation: rebondit .9s cubic-bezier(.3, 0, .7, 1) infinite alternate; }
@keyframes rebondit { from { transform: translate(-50%, -50%) translateY(0) rotate(0); } to { transform: translate(-50%, -50%) translateY(calc(var(--g) * -.45)) rotate(200deg); } }
/* lecture : le livre ouvert devant lui, les pages qui tournent */
.accessoire.pages { animation: pages 3s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes pages { 0%, 70%, 100% { transform: translate(-50%, -50%) scaleX(1); } 80% { transform: translate(-50%, -50%) scaleX(-.15); } 90% { transform: translate(-50%, -50%) scaleX(1); } }
/* musique : le disque tourne, les notes montent en dansant */
.accessoire.tourne { animation: tourne 2s linear infinite; }
@keyframes tourne { to { transform: translate(-50%, -50%) rotate(360deg); } }
.accessoire.note, .accessoire.coeur { animation: monte-note 3s ease-out infinite; opacity: 0; }
.accessoire.n2 { animation-delay: 1s; }
.accessoire.n3 { animation-delay: 2s; }
@keyframes monte-note { 0% { opacity: 0; transform: translate(-50%, 0) rotate(-10deg); } 20% { opacity: 1; }
  50% { transform: translate(-20%, -60%) rotate(12deg); } 100% { opacity: 0; transform: translate(-60%, -160%) rotate(-8deg); } }
/* chambre : la veilleuse respire ; cagibi : l'ampoule vacille */
.situation[data-lueur="veilleuse"]::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 55%, rgba(255, 220, 140, .45), transparent 45%);
  animation: veilleuse 4s ease-in-out infinite alternate; }
@keyframes veilleuse { from { opacity: .5; } to { opacity: 1; } }
.situation[data-lueur="ampoule"]::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 12%, rgba(255, 236, 170, .55), transparent 50%);
  animation: ampoule 3.2s steps(1) infinite; }
@keyframes ampoule { 0%, 40%, 46%, 60%, 100% { opacity: 1; } 42%, 58% { opacity: .25; } }

/* accessoire posé sur l'illustration (l'écran de la télé) : il remplit sa zone, coins arrondis comme l'écran */
.situation .accessoire.sur-decor { transform: none; overflow: hidden; border-radius: 14% / 18%; }
.situation .accessoire.sur-decor img, .situation .accessoire.sur-decor .picto { width: 100%; height: 100%; object-fit: cover; }
.situation[data-lueur="tele"]::before { background: radial-gradient(circle at 84% 52%, rgba(120, 190, 255, .35), transparent 50%); }

/* bouton haut-parleur (couper / remettre le son) */
#b-son .haut-parleur, #b-son-appel .haut-parleur { width: 30px; height: 30px; display: block; }
#b-son.muet { background: #f3e6e1; }
.son-appel { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; z-index: 5; }
/* les accessoires « devant » (le livre) passent devant Gillou : la couche ne crée pas de plan à part */
.situation { z-index: auto; }
.situation .accessoire { z-index: 1; }
.situation .accessoire.devant { z-index: 5; }

/* ================================================================ propreté : dégâts au sol, outils, nettoyage */
.degats { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.degat { position: absolute; transform: translateX(-50%); padding: 0; border: 0; background: none; pointer-events: auto; cursor: pointer; }
.degat > img { width: 100%; height: auto; display: block; }
.degat.pipi > img { opacity: .9; }
.degats.nettoyage .degat { animation: a-nettoyer 1s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .95)); }
@keyframes a-nettoyer { 50% { transform: translateX(-50%) scale(1.08); } }
.degat.part > img:not(.nuage) { animation: disparait .45s ease-in forwards; }
.degat .nuage { position: absolute; left: 50%; top: 50%; width: 140%; transform: translate(-50%, -60%); animation: nuage-nettoyage .5s ease-out forwards; }
@keyframes disparait { to { transform: scale(.2); opacity: 0; } }
@keyframes nuage-nettoyage { from { opacity: 0; transform: translate(-50%, -60%) scale(.4); } 40% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -90%) scale(1.3); } }
/* les mouches tournent au-dessus, l'odeur ondule ; les fourmis défilent en file */
.degat .mouche { position: absolute; width: 34%; left: 50%; top: -60%; animation: mouche 1.6s linear infinite; }
.degat .mouche.m2 { animation-duration: 2.1s; animation-direction: reverse; width: 28%; }
@keyframes mouche { 0% { transform: translate(-50%, 0) rotate(0) translateX(40%) rotate(0); } 100% { transform: translate(-50%, 0) rotate(360deg) translateX(40%) rotate(-360deg); } }
.degat.part .mouche { animation: envol-mouche .6s ease-in forwards; }
@keyframes envol-mouche { to { transform: translate(120%, -300%) rotate(40deg); opacity: 0; } }
.degat .odeur { position: absolute; left: 50%; bottom: 70%; width: 60%; transform: translateX(-50%); opacity: .6; animation: odeur 2.4s ease-in-out infinite; }
.degat .odeur .picto { width: 100%; height: auto; }
@keyframes odeur { 50% { transform: translate(-50%, -12%) scale(1.08); opacity: .35; } }
.degat .fourmi { position: absolute; width: 22%; bottom: -8%; animation: fourmi 4s linear infinite; }
.degat .fourmi.f2 { animation-delay: -1.3s; }
.degat .fourmi.f3 { animation-delay: -2.6s; }
@keyframes fourmi { from { left: -60%; } to { left: 130%; } }
/* l'outil qui clignote (balai, pelle, serpillière) et celui qui suit le doigt */
.outil-nettoyage, .vite-toilettes { position: absolute; z-index: 6; left: 12px; bottom: calc(108px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px 5px 6px; border-radius: 99px; border: 2.5px solid #fff;
  background: #6fbf8a; color: #fff; font: 900 15px var(--police); box-shadow: 0 6px 16px rgba(40, 90, 60, .35); animation: outil 1.1s ease-in-out infinite; }
.outil-nettoyage .picto, .vite-toilettes .picto { width: 44px; height: 44px; background: #fff; border-radius: 50%; padding: 2px; }
.outil-nettoyage.actif { background: #3f8f5a; animation: none; }
@keyframes outil { 50% { transform: scale(1.07); box-shadow: 0 0 0 7px rgba(111, 191, 138, .35); } }
.vite-toilettes { left: auto; right: 12px; background: #f2b33d; box-shadow: 0 6px 16px rgba(140, 100, 20, .35); }
.outil-curseur { position: absolute; z-index: 7; width: 72px; pointer-events: none; transform: translate(-30%, -70%) rotate(-15deg); }
/* fiche Santé : ce qu'il apprend */
.appris { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.appris > .picto { width: 44px; height: 44px; flex: none; }
.appris > div { flex: 1; }
.appris small { display: block; color: var(--doux); font-weight: 700; margin-top: 2px; }
/* dans une pièce (cuisine…) : l'outil et le bouton « vite » montent sous le bouton Sortir, pour ne pas cacher Gillou */
body.dans-piece .outil-nettoyage, body.dans-piece .vite-toilettes { bottom: auto; top: calc(272px + env(safe-area-inset-top)); }
#scene[data-mode="cuisine"] .degat.miettes { margin-bottom: calc(var(--g) * .14); }
.degat .fourmi { width: 34%; }
.degat .mouche { width: 42%; }
/* les images des dégâts sont carrées : on retire le vide mesuré au-dessus et au-dessous pour les poser au sol */
.degat.pipi > img { margin: -23% 0 -23.4%; }
.degat.crotte > img { margin: -6.2% 0 -6.8%; }
.degat.miettes > img { margin: -15.6% 0 -16.1%; }

/* ================================================================ cartes de succès */
.j-onglets { display: flex; gap: 6px; margin: 0 16px 10px; flex: none; }
.j-onglets button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 4px;
  background: var(--fond-carte); border: 1.5px solid transparent; border-radius: 14px; font: 800 14px var(--police); color: var(--doux); }
.j-onglets button .picto { width: 30px; height: 30px; }
.j-onglets button.actif { background: var(--rose); border-color: #f3b8ae; color: var(--texte); }
.j-onglets b { font-size: 11px; background: #fff; border-radius: 99px; padding: 1px 6px; }
.famille { display: flex; justify-content: space-between; margin: 12px 2px 8px; font-family: var(--titre); font-size: 18px; }
.famille span { font: 800 13px var(--police); color: var(--doux); }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.carte { --c1: #fff4dc; --c2: #ffd9a8; --bord: #e9b866; position: relative; aspect-ratio: 3 / 4.1; display: flex; flex-direction: column;
  align-items: center; text-align: center; padding: 8px 8px 10px; border-radius: 16px; border: 3px solid var(--bord);
  background: radial-gradient(circle at 50% 30%, #fff 0 30%, transparent 70%), linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: 0 4px 0 rgba(120, 80, 30, .18), inset 0 0 0 3px rgba(255, 255, 255, .7); overflow: hidden; }
.carte[data-famille="Apprentissage"] { --c1: #e6f6ea; --c2: #b9e3c6; --bord: #6fbf8a; }
.carte[data-famille="Aptitude"] { --c1: #e6f0fb; --c2: #bcd5f2; --bord: #6d9fd6; }
.carte .illus { width: 78%; aspect-ratio: 1; display: grid; place-items: center; }
.carte .illus img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .12)); }
.carte b { font-family: var(--titre); font-size: 16px; line-height: 1.05; margin-top: 2px; }
.carte p { font-size: 11.5px; font-weight: 700; color: #5a4b40; margin: 3px 0 0; line-height: 1.2; }
.carte .effet { margin-top: auto; font-size: 10.5px; font-weight: 800; color: #2f6b45; background: rgba(255, 255, 255, .7); border-radius: 8px; padding: 2px 6px; }
.carte .quand { font-size: 10px; color: var(--doux); font-weight: 700; margin-top: 4px; }
.carte.verrouillee { --c1: #eeeae6; --c2: #dcd6d0; --bord: #c9c1b9; }
.carte.verrouillee .illus img { filter: brightness(0) opacity(.18); }
.carte.verrouillee b { color: #9b918a; }
/* apparition : lueur de trésor, rayons qui tournent, la carte tourne sur elle-même puis se pose ; Gillou fier à côté */
.apparition { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(40, 28, 20, .72); overflow: hidden; }
.apparition .rayons { position: absolute; left: 50%; top: 44%; width: 170vmax; height: 170vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(255, 226, 140, .32) 0 8deg, transparent 8deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 60%); mask: radial-gradient(circle, #000 0, transparent 60%); }
.apparition.joue .rayons { animation: rayons 12s linear infinite, fondu-entree .6s ease-out both; }
@keyframes rayons { to { transform: translate(-50%, -50%) rotate(360deg); } }
.apparition .lueur { position: absolute; left: 50%; top: 44%; width: 80vmin; height: 80vmin; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 180, .9), rgba(255, 200, 90, .35) 40%, transparent 70%); }
.apparition.joue .lueur { animation: lueur 2s ease-in-out infinite alternate, fondu-entree .8s ease-out both; }
@keyframes lueur { to { transform: translate(-50%, -50%) scale(1.12); } }
@keyframes fondu-entree { from { opacity: 0; } }
.apparition .annonce { position: absolute; top: calc(9% + env(safe-area-inset-top)); width: 100%; text-align: center; margin: 0;
  font: 900 30px var(--titre); color: #fff6d8; text-shadow: 0 3px 0 #b8742a, 0 0 18px rgba(255, 210, 120, .9); }
.apparition.joue .annonce { animation: annonce .7s cubic-bezier(.3, 1.6, .5, 1) both 1.4s; }
@keyframes annonce { from { transform: scale(.3); opacity: 0; } }
.apparition .scene-carte { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%); perspective: 900px; }
.apparition .tourne { transform-style: preserve-3d; }
.apparition.joue .tourne { animation: tourne-carte 1.6s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes tourne-carte { 0% { transform: scale(.1) rotateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1) rotateY(1080deg); } }
.carte.grande { width: min(62vw, 250px); box-shadow: 0 0 0 4px rgba(255, 255, 255, .5), 0 18px 40px rgba(0, 0, 0, .4); }
.carte.grande b { font-size: 24px; }
.carte.grande p { font-size: 14px; }
.carte.grande .effet { font-size: 12.5px; }
.apparition .fier { position: absolute; left: 50%; bottom: calc(12% + env(safe-area-inset-bottom)); width: min(30vw, 130px); transform: translateX(-130%); }
.apparition .fier .gillou-svg { width: 100%; height: auto; overflow: visible; display: block; }
.apparition .fier .g-sol { display: none; }
.apparition.joue .fier { animation: entre-fier .6s ease-out both 1.3s; }
@keyframes entre-fier { from { opacity: 0; transform: translateX(-130%) translateY(30%); } }
.apparition .grand { position: absolute; bottom: calc(5% + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(70vw, 280px); }
.apparition.joue .grand { animation: fondu-entree .4s both 1.8s; }
.grille-cartes .carte { aspect-ratio: auto; min-height: 200px; }
.apparition .fier { bottom: calc(15% + env(safe-area-inset-bottom)); }

/* ================================================================ paroles, langue gillou, rencontres dehors */
.bulle.avec-parole { display: flex; flex-direction: column; gap: 3px; max-width: min(78vw, 320px); text-align: center; }
.bulle .dit { font-family: var(--titre); font-size: 17px; line-height: 1.15; color: var(--texte); }
.bulle small { font-size: 12px; font-weight: 700; color: var(--doux); line-height: 1.25; }
/* bulles de BD en langue gillou : ronde (calme), nuage (câlin), hérissée (dispute) */
.bulle-gillou { position: absolute; z-index: 4; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 5px;
  max-width: 190px; padding: 7px 12px; background: #fff; border: 2.5px solid #2b2420; border-radius: 18px; pointer-events: none;
  font: italic 800 14px var(--police); color: #2b2420; white-space: nowrap; animation: bulle-bd 1.9s ease-out both; }
.bulle-gillou::after { content: ''; position: absolute; left: 30%; bottom: -10px; width: 14px; height: 14px; background: #fff;
  border-right: 2.5px solid #2b2420; border-bottom: 2.5px solid #2b2420; transform: rotate(45deg) skew(10deg, 10deg); }
.bulle-gillou .picto { width: 24px; height: 24px; flex: none; }
.bulle-gillou.nuage { border-radius: 26px; background: #fff3f6; box-shadow: 6px -4px 0 -1px #fff3f6, 6px -4px 0 1px #2b2420; }
.bulle-gillou.herissee { border-radius: 4px; background: #fff1d6; clip-path: polygon(0 12%, 8% 0, 18% 10%, 30% 0, 42% 10%, 55% 0, 66% 10%,
  78% 0, 90% 10%, 100% 4%, 96% 50%, 100% 92%, 85% 88%, 70% 100%, 58% 88%, 40% 100%, 28% 88%, 12% 100%, 4% 86%, 0 50%); border: 0;
  padding: 12px 16px; animation: bulle-bd 1.9s ease-out both, colere .25s 4; }
@keyframes bulle-bd { 0% { opacity: 0; transform: translate(-50%, -80%) scale(.6); } 12% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
  85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -112%); } }
@keyframes colere { 50% { margin-left: 3px; } }
/* le Gillou croisé en sortie : à côté du tien, avec son nom */
.dehors-amis { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
#scene[data-mode] .dehors-amis { display: none; }
.ami-dehors { position: absolute; left: 76%; width: calc(var(--g) * .72); transform: translateX(-50%);
  bottom: calc(var(--sol) - 0.076 * var(--g) * .72); }
.ami-dehors .gillou-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ami-dehors .g-sol { display: none; }
.ami-dehors .etiquette { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); padding: 1px 10px; border-radius: 99px;
  background: var(--creme); border: 1.5px solid var(--trait); font: 800 12px var(--police); white-space: nowrap; }
body[data-humeur="bronze"] .ami-dehors { left: 80%; }
.souvenirs { margin: 4px 0 0; padding-left: 18px; font-size: 13px; font-weight: 700; }
.souvenirs .beau { color: #2f6b45; }
.souvenirs .triste { color: #9b3b30; }

/* le haut-parleur à gauche de la roue crantée, sur la même ligne */
.coin-ligne { display: flex; gap: 6px; }
/* le cadre d'aide d'une pièce (frigo, douche) ne touche plus la barre du bas */
.barre-mode { bottom: calc(108px + env(safe-area-inset-bottom)); }

/* croissance : il naît à 30 % de sa taille adulte et grandit jusqu'à 30 % de sa vie (--croissance, posé par l'appli) */
.gillou { width: calc(var(--g) * var(--croissance, 1)); bottom: calc(var(--sol) - 0.076 * var(--g) * var(--croissance, 1)); }
.bulle { bottom: calc(var(--sol) + var(--g) * (.12 + .86 * var(--croissance, 1))); }
.compagnon { width: calc(var(--g) * var(--k) * var(--croissance, 1)); bottom: calc(var(--sol) - 0.076 * var(--g) * var(--k) * var(--croissance, 1) + 6px); }
.compagnon.loin { bottom: calc(var(--sol) + var(--g) * .1); }
.ami-dehors { width: calc(var(--g) * .72 * var(--croissance, 1)); bottom: calc(var(--sol) - 0.076 * var(--g) * .72 * var(--croissance, 1)); }

.caractere .evolue { font-size: 13px; margin-left: 2px; }
.caractere .evolue.plus { color: #2f8a4f; }
.caractere .evolue.moins { color: #c0392b; }

/* ================================================================ toucher selon la pièce, mini-jeux */
.accessoire.rebondit.tape { animation: tape .9s cubic-bezier(.2, .8, .3, 1); }
@keyframes tape { 0% { transform: translate(-50%, -50%); } 35% { transform: translate(10%, -260%) rotate(260deg); } 70% { transform: translate(-30%, -40%) rotate(420deg); }
  85% { transform: translate(-50%, -80%) rotate(480deg); } 100% { transform: translate(-50%, -50%) rotate(540deg); } }
.accessoire.note.vite { animation-duration: 1.2s; }
.accessoire.pages.feuillette { animation: pages .7s ease-in-out 2; }
dialog.jeux .choix-jeux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 4px 0; }
.choix-jeux button { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 18px; border: 1.5px solid var(--trait); background: #fff; }
.choix-jeux img, .choix-jeux .picto { width: 64px; height: 64px; object-fit: contain; }
.choix-jeux b { font-family: var(--titre); font-size: 17px; }
.choix-jeux small { font-size: 11px; font-weight: 700; color: var(--doux); text-align: center; }
.partie { text-align: center; padding: 6px 4px 0; }
.partie .consigne { font-family: var(--titre); font-size: 20px; margin: 4px 0 10px; }
.partie .mains { display: flex; justify-content: center; gap: 10px; }
.partie .mains button { display: grid; justify-items: center; padding: 8px; border-radius: 18px; border: 1.5px solid var(--trait); background: #fff; }
.partie .mains img { width: 76px; height: 76px; }
.partie .mains small { font-weight: 800; color: var(--doux); text-transform: capitalize; }
.duel { display: flex; align-items: center; justify-content: center; gap: 14px; }
.duel > div { display: grid; justify-items: center; font-weight: 800; color: var(--doux); }
.duel img { width: 90px; height: 90px; }
.duel b { font-family: var(--titre); }
.duel.secoue img { animation: secoue .33s ease-in-out 3; }
@keyframes secoue { 50% { transform: translateY(-16px) rotate(-8deg); } }
.piece-tourne { position: relative; width: 120px; height: 120px; margin: 10px auto; transform-style: preserve-3d; }
.piece-tourne > div { position: absolute; inset: 0; backface-visibility: hidden; }
.piece-tourne > div img { width: 100%; height: 100%; }
.piece-tourne .face { transform: rotateY(180deg); }
.piece-tourne.lance { animation: lance 1.6s cubic-bezier(.3, .6, .4, 1) forwards; }
@keyframes lance { 0% { transform: translateY(0) rotateY(0); } 45% { transform: translateY(-90px) rotateY(calc(var(--fin) * .5)); } 100% { transform: translateY(0) rotateY(var(--fin)); } }
.grille { display: grid; grid-template-columns: repeat(3, 84px); gap: 6px; justify-content: center; }
.grille button { width: 84px; height: 84px; border-radius: 16px; border: 2px solid var(--trait); background: #fff; padding: 8px; }
.grille button img { width: 100%; height: 100%; }
.verdict { margin-top: 12px; padding: 10px; border-radius: 18px; background: var(--fond-carte); }
.verdict b { display: block; font-family: var(--titre); font-size: 22px; }
.verdict.gagne b { color: #2f8a4f; }
.verdict.perdu b { color: #c0392b; }
.verdict small { display: block; font-weight: 700; color: var(--doux); }
.rejouer { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.rejouer button { border: 1.5px solid var(--trait); border-radius: 99px; background: #fff; padding: 6px 14px; font-weight: 800; }

/* ================================================================ écran de démarrage */
.demarrage { position: fixed; inset: 0; z-index: 100; background: #d9f2e3 url("/static/decors/demarrage.jpg") center bottom / cover no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(9dvh + env(safe-area-inset-top)) 16px calc(5dvh + env(safe-area-inset-bottom));
  transition: opacity .6s ease, transform .6s ease; }
.demarrage.part { opacity: 0; transform: scale(1.06); pointer-events: none; }
.titre-demarrage { text-align: center; animation: titre-demarrage .9s cubic-bezier(.3, 1.5, .5, 1) both .2s; }
.titre-demarrage h1 { margin: 0; font: 800 clamp(38px, 11vw, 64px) / 1 'Baloo 2', system-ui, sans-serif; color: #f07c62;
  -webkit-text-stroke: 7px #fff; paint-order: stroke fill; text-shadow: 0 6px 0 rgba(150, 70, 40, .25); letter-spacing: .5px; }
.titre-demarrage h1 span { color: #5f9b62; }
.titre-demarrage p { margin: 8px 0 0; font: 800 17px 'Nunito', system-ui, sans-serif; color: #7a5a48; text-shadow: 0 1px 0 #fff, 0 0 12px #fff; }
@keyframes titre-demarrage { from { transform: scale(.6) translateY(-20px); opacity: 0; } }
.demarrage .charge { display: flex; gap: 8px; }
.demarrage .charge i { width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .15); animation: charge 1s ease-in-out infinite; }
.demarrage .charge i:nth-child(2) { animation-delay: .15s; }
.demarrage .charge i:nth-child(3) { animation-delay: .3s; }
@keyframes charge { 50% { transform: translateY(-10px); background: #f07c62; } }

/* les dégâts : au premier plan (devant Gillou), sur le sol, au-dessus du menu et des cadres d'aide */
.degats { z-index: 3; --plancher: calc(112px + env(safe-area-inset-bottom)); }
body.dans-piece .degats { --plancher: calc(176px + env(safe-area-inset-bottom)); }
#scene[data-mode="cuisine"] .degat.miettes { margin-bottom: 0; }

/* réglages : notifications */
#r-seuils button.actif { background: var(--rose); border-color: #f3b8ae; }
.notif-etat { margin-top: 8px; }
.notif-etat .ok { color: #2f6b45; font-weight: 800; }
.notif-etat .astuce { background: var(--fond-carte); padding: 8px 10px; border-radius: 12px; }

/* ================================================================ 05/11 : sol remonté, aide, clavier, portrait */
/* le sol monte un peu sur les téléphones tout en hauteur : Gillou, la balance, le frigo… ne sont plus collés à la barre du bas.
   L'illustration remonte d'autant ; sous elle, son reflet prolonge le sol (caché en grande partie par la barre de boutons). */
@media (max-aspect-ratio: 3/5) { #scene { --remonte: min(9dvh, 84px); } }
#scene { --sol: calc(25dvh + var(--remonte, 0px)); }
#scene[data-image] { --sol: calc((1 - var(--horizon, .7)) * max(100cqh, 150cqw) + var(--remonte, 0px)); }
#scene[data-image] .photo { transform: translateY(calc(-1 * var(--remonte, 0px))); }
#scene[data-image] .photo::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 100%;
  background: inherit; transform: scaleY(-1); }

/* bouton d'aide (bouée) sous la balance */
#b-aide .picto { width: 30px; height: 30px; }

/* ---------------------------------------------------------------- diapos d'aide */
dialog.aide-diapos { width: min(100vw, 480px); max-width: 100vw; height: min(100dvh, 860px); max-height: 100dvh; margin: auto; padding: 0; border: 0;
  border-radius: 28px; background: var(--creme); color: var(--texte); display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(60, 40, 20, .3); }
dialog.aide-diapos:not([open]) { display: none; }
dialog.aide-diapos[open] { animation: aide-entre .45s cubic-bezier(.2, .8, .3, 1); }
@keyframes aide-entre { from { transform: translateY(30px) scale(.96); opacity: 0; } }
@media (max-width: 520px) { dialog.aide-diapos { border-radius: 0; height: 100dvh; } }
dialog.aide-diapos > .fermer { position: absolute; z-index: 2; top: calc(12px + env(safe-area-inset-top)); right: 14px; background: rgba(255, 255, 255, .9);
  border: 1.5px solid var(--trait); }
.diapos { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.diapos::-webkit-scrollbar { display: none; }
.diapo { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top)) 26px 8px; text-align: center; box-sizing: border-box; }
.diapo-illu { width: min(78vw, 46dvh, 380px); aspect-ratio: 1; border-radius: 34px; overflow: hidden; flex: none;
  background: #fbf3e6; box-shadow: 0 10px 30px rgba(110, 80, 50, .18), inset 0 0 0 1.5px var(--trait); }
.diapo-illu img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diapo-illu .secours { display: block; width: 100%; height: 100%; background: url("/static/decors/maison.jpg") center 80% / cover; }
.diapo h2 { font-family: var(--titre); font-size: 28px; line-height: 1.1; margin: 22px 0 8px; }
.diapo p { font-size: 17px; line-height: 1.45; color: #5a4a3f; margin: 0; max-width: 34ch; font-weight: 700; }
.diapo p b { color: var(--texte); font-weight: 900; }
.diapos-bas { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 20px calc(18px + env(safe-area-inset-bottom)); }
.points { flex: 1; display: flex; gap: 7px; }
.points button { width: 9px; height: 9px; border-radius: 99px; border: 0; padding: 0; background: #e8d6bd; transition: width .25s, background .25s; }
.points button.actif { width: 26px; background: var(--rose-fort); }
#diapo-suivante { flex: none; min-width: 150px; margin: 0; }

/* ---------------------------------------------------------------- fiches d'aide (jauges, produits, horloge) */
.jauge[data-j], #horloge, #m-courses .produit { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jauge[data-j]:active { transform: scale(.97); }
.fiche-aide .fiche-illu { width: 132px; height: 132px; margin: 4px auto 10px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #fff, var(--peche) 70%); box-shadow: inset 0 0 0 1.5px #f6dcbc; animation: fiche-illu .5s cubic-bezier(.2, .9, .3, 1.4); }
.fiche-aide .fiche-illu .picto { width: 92px; height: 92px; }
@keyframes fiche-illu { from { transform: scale(.5) rotate(-12deg); opacity: 0; } }
.fiche-aide .fiche-intro { font-size: 16px; line-height: 1.45; text-align: center; margin: 0 6px 12px; font-weight: 700; color: #4b3f37; }
.fiche-valeur { background: #fff; border: 1.5px solid var(--trait); border-radius: 16px; padding: 10px 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; }
.fiche-valeur span { font-size: 13px; color: var(--doux); font-weight: 800; }
.fiche-valeur b { font-size: 18px; }
.fiche-valeur .barre { grid-column: 1 / -1; margin: 0; }
.fiche-effets { display: grid; gap: 6px; background: #fff; border: 1.5px solid var(--trait); border-radius: 16px; padding: 10px 12px; }
.fiche-effets > div { display: grid; grid-template-columns: 28px 92px 1fr 34px; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; }
.fiche-effets .picto { width: 26px; height: 26px; }
.fiche-effets .barre { margin: 0; }
.fiche-effets b { text-align: right; color: var(--doux); }
.fiche-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fiche-liste li { display: flex; align-items: center; gap: 10px; background: var(--fond-carte); border-radius: 14px; padding: 8px 10px; font-weight: 700; font-size: 14px; line-height: 1.3; }
.fiche-liste .picto { width: 34px; height: 34px; flex: none; }
.fiche-astuce, .fiche-attention { display: flex; align-items: center; gap: 10px; border-radius: 14px; padding: 10px 12px; margin: 12px 0 4px; font-size: 14px; font-weight: 700; line-height: 1.3; }
.fiche-astuce { background: #fff7d9; border: 1.5px solid #f6e3a3; }
.fiche-attention { background: var(--rose); border: 1.5px solid #f3b8ae; }
.fiche-astuce .picto, .fiche-attention .picto { width: 30px; height: 30px; flex: none; }
.produit .nom-el::after { content: 'i'; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 5px; border-radius: 50%;
  background: var(--peche); color: #b07a45; font: 900 10px var(--police); vertical-align: 2px; }

/* ---------------------------------------------------------------- clavier ouvert : la fenêtre prend toute la hauteur libre */
html.clavier dialog.feuille[open] { position: fixed; top: var(--vv-top, 0px); bottom: auto; margin: 0 auto; height: var(--vv-h); max-height: var(--vv-h);
  border-radius: 0; animation: none; }
html.clavier dialog.feuille[open]::after { display: none; }

/* ---------------------------------------------------------------- téléphone tenu en paysage */
.tourner { display: none; }
@media (orientation: landscape) and (max-height: 560px) and (hover: none) {
  .tourner { position: fixed; inset: 0; z-index: 2147483647; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: #f7ecdc url("/static/decors/maison.jpg") center 70% / cover; text-align: center; }
  .tourner::before { content: ''; position: absolute; inset: 0; background: rgba(253, 243, 228, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .tourner > * { position: relative; }
  .tourner b { font: 800 26px var(--titre); color: var(--texte); margin-top: 8px; }
  .tourner span:last-child { font-weight: 800; color: var(--doux); }
  body:has(.tourner) dialog[open] { visibility: hidden; }
}
.tourner-anim { position: relative; width: 150px; height: 150px; }
.tourner-anim .tel { position: absolute; inset: 18px; display: grid; place-items: center; animation: tel-tourne 2.6s cubic-bezier(.6, 0, .3, 1) infinite; }
.tourner-anim .tel .picto { width: 100%; height: 100%; }
.tourner-anim .fleche { position: absolute; right: -16px; top: -10px; width: 64px; height: 64px; animation: fleche-tourne 2.6s ease-in-out infinite; }
.tourner-anim .fleche .picto { width: 100%; height: 100%; }
@keyframes tel-tourne { 0%, 18% { transform: rotate(-90deg); } 55%, 85% { transform: rotate(0deg); } 100% { transform: rotate(-90deg); } }
@keyframes fleche-tourne { 0%, 12% { opacity: 0; transform: rotate(30deg) scale(.7); } 30%, 50% { opacity: 1; transform: rotate(0) scale(1); } 65%, 100% { opacity: 0; transform: rotate(-25deg) scale(.8); } }
.diapo h2 { flex: none; }
#diapo-suivante { width: auto; padding-left: 26px; padding-right: 26px; }
/* habitudes et rituels (Santé › Sa vie) */
.rituels { display: grid; gap: 6px; margin: 4px 0 10px; }
.rituels > div { display: flex; align-items: center; gap: 10px; background: var(--peche); border-radius: 14px; padding: 6px 10px; }
.rituels .picto { width: 34px; height: 34px; flex: none; }
.rituels span { display: flex; flex-direction: column; line-height: 1.2; }
.rituels small { color: var(--doux); font-weight: 800; font-size: 12px; }
.habitudes-carte .caractere small { color: var(--doux); font-weight: 800; }
.habitudes-carte .boude { color: #b0452f; font-weight: 800; }
/* compteur du monde (écran de lancement et d'appel) */
.monde { display: flex; flex-direction: column; align-items: center; margin-top: 18px; padding: 10px 18px; border-radius: 20px;
  background: rgba(255, 250, 242, .82); box-shadow: 0 6px 20px rgba(110, 80, 50, .15); animation: titre-demarrage .9s cubic-bezier(.3, 1.5, .5, 1) both .5s; }
.monde b { font: 800 40px / 1 'Baloo 2', system-ui, sans-serif; color: #5f9b62; font-variant-numeric: tabular-nums; }
.monde span { font: 800 14px 'Nunito', system-ui, sans-serif; color: #7a5a48; text-align: center; }
.appel-monde { font-weight: 800; color: var(--doux); margin: 4px 0 0; }
.appel-monde b { color: #5f9b62; font-size: 18px; }
/* code secret à l'appel, porte claquée, demande par SMS */
.appel-code { display: grid; justify-items: center; gap: 6px; margin-top: 12px; }
.appel-code label { font-weight: 800; color: var(--doux); }
#appel-pin { width: 170px; text-align: center; font: 900 30px var(--police); letter-spacing: 18px; padding: 8px 0 8px 18px;
  border: 2px solid var(--trait); border-radius: 16px; background: #fff; outline: none; }
#appel-pin:focus { border-color: #f3b8ae; box-shadow: 0 0 0 4px var(--rose); }
.appel-porte { display: grid; justify-items: center; gap: 4px; margin-top: 12px; text-align: center; }
.appel-porte img { width: min(56vw, 220px); aspect-ratio: 1; border-radius: 24px; box-shadow: var(--ombre-legere); }
.appel-porte b { font: 800 22px var(--titre); color: #c0452f; }
.appel-porte span { font-weight: 700; color: var(--doux); }
.appel-porte .grand { margin-top: 6px; }
.appel-porte.claque img { animation: claque .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes claque { 0% { transform: scale(1.12) rotate(-3deg); } 30% { transform: scale(.94) rotate(2deg); } 55% { transform: translateX(-6px); }
  70% { transform: translateX(5px); } 85% { transform: translateX(-2px); } 100% { transform: none; } }
.etiquette-sms { display: inline-flex; align-items: center; gap: 6px; margin: 12px auto 0; border: 1.5px dashed #e9b48f; background: #fff7ec;
  color: #a2592f; border-radius: 99px; padding: 6px 14px; font: 800 13px var(--police); }
.etiquette-sms .picto { width: 22px; height: 22px; }
/* réglages : code secret et signalement */
.formulaire-code { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.formulaire-code input { width: 104px; font: 900 20px var(--police); letter-spacing: 6px; text-align: center; padding: 8px; border: 2px solid var(--trait); border-radius: 12px; }
.formulaire-bug textarea { width: 100%; box-sizing: border-box; font: 700 16px var(--police); padding: 10px 12px; border: 2px solid var(--trait); border-radius: 14px; resize: none; }
.formulaire-bug > div { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.formulaire-bug span { font-weight: 800; color: var(--doux); font-size: 13px; }
.formulaire-bug .grand { margin: 0; width: auto; padding-left: 18px; padding-right: 18px; display: inline-flex; align-items: center; gap: 6px; }
.formulaire-bug .picto { width: 28px; height: 28px; }
.formulaire-code input::placeholder { letter-spacing: 0; font-size: 14px; font-weight: 700; }

/* appli tactile : pas de sélection de texte, pas de loupe, pas de zoom au double toucher (sauf dans les champs à remplir) */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg { -webkit-user-drag: none; user-drag: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* Gillou 20 % plus grand (sans dépasser la largeur de l'écran une fois adulte) */
:root { --g: min(1.2 * min(80vw, 52dvh, 430px), 88vw); }
#scene.a-plusieurs { --g: min(1.2 * min(60vw, 44dvh, 380px), 66vw); }
#scene[data-mode="cuisine"] { --g: min(1.2 * min(54vw, 38dvh, 300px), 62vw); }

/* installer l'appli (PWA) */
.installer header > .picto { width: 40px; height: 40px; }
.pwa-tete { display: flex; align-items: center; gap: 12px; background: var(--peche); border-radius: 18px; padding: 10px 12px; margin-bottom: 10px; }
.pwa-tete .picto { width: 76px; height: 76px; flex: none; }
.pwa-tete p { margin: 0; font-weight: 700; line-height: 1.35; font-size: 15px; }
.pwa-deja { display: flex; align-items: center; gap: 8px; font-weight: 800; color: #2f6b45; background: var(--vert-clair, #e5f3e6); border-radius: 14px; padding: 8px 12px; }
.pwa-deja .picto { width: 30px; height: 30px; }
.pwa-direct { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 12px; }
.pwa-direct .picto { width: 32px; height: 32px; }
.installer .onglets { margin: 4px 0 10px; }
.pwa-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pwa-etapes li { display: grid; grid-template-columns: 26px 64px 1fr; align-items: center; gap: 10px; background: #fff;
  border: 1.5px solid var(--trait); border-radius: 18px; padding: 8px 12px; font-weight: 700; font-size: 15px; line-height: 1.35;
  animation: pwa-etape .45s cubic-bezier(.2, .8, .3, 1) both; }
.pwa-etapes li:nth-child(2) { animation-delay: .08s; } .pwa-etapes li:nth-child(3) { animation-delay: .16s; } .pwa-etapes li:nth-child(4) { animation-delay: .24s; }
@keyframes pwa-etape { from { opacity: 0; transform: translateY(10px); } }
.pwa-etapes .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--rose-fort); color: #fff; font-weight: 900; font-size: 14px; }
.pwa-picto { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.pwa-picto > .picto { width: 58px; height: 58px; }
.pwa-picto .doigt { position: absolute; right: -14px; bottom: -14px; width: 40px; height: 40px; animation: doigt-tape 1.4s ease-in-out infinite; }
.pwa-picto .doigt .picto { width: 100%; height: 100%; }
.pwa-picto.tape > .picto { animation: picto-tape 1.4s ease-in-out infinite; }
@keyframes doigt-tape { 0%, 100% { transform: translate(6px, 6px); } 45% { transform: translate(-6px, -8px) scale(.92); } 55% { transform: translate(-6px, -8px) scale(.86); } }
@keyframes picto-tape { 0%, 40%, 100% { transform: none; } 55% { transform: scale(.88); filter: brightness(1.1); } }
/* réglages en onglets */
.reg-onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.reg-onglets::-webkit-scrollbar { display: none; }
.reg-onglets button { flex: 1 0 auto; padding: 8px 10px; }
.reg-section > h3:first-child { margin-top: 6px; }
#m-reglages[open] { height: min(88dvh, 660px); }

/* volumes du son */
.volumes { display: grid; gap: 8px; }
.volumes label { display: grid; grid-template-columns: 30px 82px 1fr 46px; align-items: center; gap: 8px; font-weight: 800; }
.volumes .picto { width: 28px; height: 28px; }
.volumes input[type=range] { width: 100%; accent-color: #e8625a; height: 28px; }
.volumes b { text-align: right; color: var(--doux); font-size: 13px; }

/* tout ce qui se touche doit avoir l'air d'un bouton */
.lien { background: #fff; border: 1.5px solid var(--trait); border-radius: 16px; padding: 10px 14px; margin: 3px 0;
  box-shadow: 0 2px 0 #eedcc3; cursor: pointer; transition: transform .1s, box-shadow .1s, background .15s; text-align: left; }
.lien:active { transform: translateY(2px); box-shadow: none; background: var(--peche); }
.pile { gap: 6px; align-items: stretch; }
.pile .lien, .reg-section > .lien { display: flex; width: 100%; box-sizing: border-box; }
.pile .lien::after, .reg-section > .lien::after { content: '›'; margin-left: auto; font-size: 24px; line-height: 1; color: #c9a98a; font-weight: 900; }
#r-raccrocher { color: #b0452f; }
.formulaire-code .lien { padding: 8px 12px; }
#vol-couper { display: flex; width: 100%; box-sizing: border-box; margin-top: 10px; }
/* les jauges s'ouvrent au toucher : un petit « i » le signale */
.haut .jauge .ligne span:first-child::after { content: 'i'; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 5px;
  border-radius: 50%; background: var(--peche); color: #b07a45; font: 900 9px var(--police); vertical-align: 2px; }
/* contacts en onglets : une hauteur stable */
#m-contacts[open] { height: min(88dvh, 700px); }
#contacts-onglets { margin-top: 2px; }