/* Robin & Moi 2.0 — design system « futur ». Aucune dependance, aucun CDN.
   Themes data-theme : nuit (defaut) / jour / veilleuse. Voir css/GUIDE.md. */

/* 1. Reset */
*,*::before,*::after{box-sizing:border-box}
html,body,div,section,article,header,footer,nav,main,aside,h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,figure,fieldset,legend,button,input,select,textarea,table,th,td,pre{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,canvas,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0;border-radius:0}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
table{border-collapse:collapse;width:100%}
th{text-align:left;font-weight:700}
b,strong{font-weight:700}
small{font-size:.82em}
:focus{outline:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:10px}
/* L'attribut hidden doit l'emporter sur nos display: (topbar/nav/game-intro...) */
[hidden]{display:none!important}
/* Icone SVG generique emise par App.icon() / App.icons (class="ico").
   Les contextes plus specifiques (.btn svg, .nav-btn svg, .entry-ico svg) gardent la main. */
.ico{width:22px;height:22px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* 2. Themes — les 17 tokens de la palette + derives */
:root,:root[data-theme="nuit"]{
  --n0:#070B14;--n1:#0F1524;--n2:#172036;--glass:rgba(255,255,255,.055);--line:rgba(255,255,255,.10);--teal:#2FE6C8;--violet:#7C6BFF;--corail:#FF7A59;--ambre:#FFB47A;--or:#FFD166;--azur:#5AA9FF;--rose:#FF7EA8;--ok:#4ADE80;--urgence:#FF4D6D;--ink:#EAF0FA;--ink-2:#93A2BC;--ink-3:#5C6B8A;
  /* derives */
  --edge1:rgba(47,230,200,.55);--edge2:rgba(124,107,255,.45);--shadow:0 8px 30px rgba(0,0,0,.35);--shadow-lift:0 18px 50px rgba(0,0,0,.55);--ring-track:rgba(255,255,255,.08);--ink-on-teal:#04150F;--ink-on-urg:#FFF3F5;--blur:18px;--glow:1;--accent:var(--teal);--scale:1;--r-s:12px;--r-m:20px;--r-l:26px;--r-p:999px;--nav-h:64px;--dock-h:98px;--topbar-h:64px;--gap:12px;--pad:16px;--font-display:"Sora","Segoe UI Variable Display",-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;--font-body:-apple-system,"Segoe UI Variable Text","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;color-scheme:dark}
:root[data-theme="jour"]{
  --n0:#FBF7F1;--n1:#FFFFFF;--n2:#F1ECE4;--glass:rgba(255,255,255,.72);--line:rgba(22,32,46,.10);--teal:#1FB8A0;--violet:#5E4DE0;--corail:#E45A3A;--ambre:#C97A2E;--or:#C9A227;--azur:#2F7FD6;--rose:#D8477A;--ok:#1F9D55;--urgence:#D6304F;--ink:#16202E;--ink-2:#55627E;--ink-3:#8A93A6;--edge1:rgba(31,184,160,.38);--edge2:rgba(94,77,224,.26);--shadow:0 2px 12px rgba(22,32,46,.08);--shadow-lift:0 10px 34px rgba(22,32,46,.14);--ring-track:rgba(22,32,46,.10);--ink-on-teal:#03231D;--ink-on-urg:#FFFFFF;--blur:14px;--glow:0;color-scheme:light}
:root[data-theme="veilleuse"]{
  --n0:#150B06;--n1:#1C0F08;--n2:#24140B;--glass:rgba(255,180,122,.06);--line:rgba(255,180,122,.18);--teal:#FFB47A;--violet:#FFB47A;--corail:#FF9A6A;--ambre:#FFB47A;--or:#FFC98A;--azur:#FFB47A;--rose:#FFB47A;--ok:#FFB47A;--urgence:#FF6B54;--ink:#FFB47A;--ink-2:#C98A5A;--ink-3:#8F5F3A;--edge1:rgba(255,180,122,.34);--edge2:rgba(255,180,122,.16);--shadow:0 6px 22px rgba(0,0,0,.6);--shadow-lift:0 10px 30px rgba(0,0,0,.7);--ring-track:rgba(255,180,122,.10);--ink-on-teal:#150B06;--ink-on-urg:#150B06;--blur:0px;--glow:0;color-scheme:dark}

/* 3. Typographie */
html{font-size:calc(16px * var(--scale));-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:1rem;line-height:1.55;background:var(--n0);color:var(--ink);min-height:100vh;min-height:100dvh;overflow-x:hidden;overscroll-behavior-y:none;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.h1,.h2,.h3{font-family:var(--font-display);font-weight:700;line-height:1.2;letter-spacing:-.02em}
h1,.h1{font-size:clamp(1.6rem,5vw,2rem)}
h2,.h2{font-size:clamp(1.15rem,4vw,1.4rem)}
h3,.h3{font-size:1.02rem;font-weight:600}
/* Titre a degrade : couleur de repli TOUJOURS declaree avant */
h1,.h1,.title-grad{color:var(--ink);background:linear-gradient(100deg,var(--ink) 18%,var(--teal) 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
[data-theme="veilleuse"] h1,[data-theme="veilleuse"] .h1,[data-theme="veilleuse"] .title-grad{background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
p{margin:0 0 .6em}
p:last-child{margin-bottom:0}
.label{display:block;font-size:.78rem;font-weight:700;line-height:1.3;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.num{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,7vw,3.2rem);line-height:1.02;letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;display:inline-flex;align-items:baseline;gap:.22em;color:var(--ink)}
.num small{font-size:.9rem;font-weight:600;opacity:.6;letter-spacing:0}

/* 4. Animations (transform / opacity uniquement) */
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent)}70%{box-shadow:0 0 0 22px transparent}100%{box-shadow:0 0 0 22px transparent}}
@keyframes count{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes nav-pill{from{transform:scaleX(.4);opacity:.4}to{transform:scaleX(1);opacity:1}}
@keyframes press{50%{transform:scale(.96)}100%{transform:none}}
@keyframes ring-fill{from{stroke-dashoffset:var(--dash,1000)}to{stroke-dashoffset:var(--dashto,0)}}
@keyframes celebrate{0%{transform:translate3d(0,-8vh,0) rotate(0);opacity:0}12%{opacity:1}100%{transform:translate3d(var(--dx,0),96vh,0) rotate(var(--rot,540deg));opacity:0}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@keyframes drift-a{0%{transform:translate3d(-8%,-6%,0) scale(1.1)}50%{transform:translate3d(14%,10%,0) scale(1.35)}100%{transform:translate3d(-8%,-6%,0) scale(1.1)}}
@keyframes drift-b{0%{transform:translate3d(10%,12%,0) scale(1.25)}50%{transform:translate3d(-12%,-8%,0) scale(1.05)}100%{transform:translate3d(10%,12%,0) scale(1.25)}}
@keyframes shimmer{from{background-position:-140% 0}to{background-position:240% 0}}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes zz{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(10px,-26px) scale(1.1)}}
@keyframes puff{0%{opacity:0;transform:translateX(0) scale(.5)}25%{opacity:.9}100%{opacity:0;transform:translateX(34px) scale(1.3)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}
@keyframes bob{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-9px) scale(1.03)}100%{transform:translateY(0) scale(1)}}
.anim-rise{animation:rise .22s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 38ms)}
.anim-pulse{animation:pulse .38s ease-out both}
.anim-count{animation:count .28s ease-out both}
.anim-breathe{animation:breathe 10s ease-in-out infinite}

/* Reduction de mouvement : tout se ramene a un fondu de 120 ms */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.12s!important;animation-iteration-count:1!important;transition-duration:.12s!important}
.anim-rise,.card,.tile,.entry,.sheet,.dialog{animation:fade .12s linear both!important}
.aurora i,.robin *{animation:none!important}
}
:root[data-reduce-motion] *,:root[data-reduce-motion] *::before,:root[data-reduce-motion] *::after{animation-duration:.12s!important;animation-iteration-count:1!important;transition-duration:.12s!important}
:root[data-reduce-motion] .anim-rise,:root[data-reduce-motion] .card,:root[data-reduce-motion] .sheet,:root[data-reduce-motion] .dialog{animation:fade .12s linear both!important}
:root[data-reduce-motion] .aurora i,:root[data-theme="veilleuse"] .aurora i{animation:none!important}
:root[data-reduce-motion] .robin *,:root[data-theme="veilleuse"] .robin *{animation:none!important}

/* 5. Layout */
#app{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:layout paint style}
.aurora i{position:absolute;display:block;width:52vmax;height:52vmax;border-radius:50%;filter:blur(70px);opacity:.38;will-change:transform}
.aurora i:nth-child(1){top:-24vmax;left:-18vmax;background:radial-gradient(circle at 50% 50%,var(--teal),transparent 68%);animation:drift-a 41s ease-in-out infinite alternate}
.aurora i:nth-child(2){bottom:-28vmax;right:-20vmax;opacity:.3;background:radial-gradient(circle at 50% 50%,var(--violet),transparent 68%);animation:drift-b 53s ease-in-out infinite alternate}
[data-theme="jour"] .aurora i{opacity:.18}
[data-theme="veilleuse"] .aurora i{opacity:.13}
.aurora[data-paused] i{animation-play-state:paused}
/* Repli statique demande par la SPEC : ajouter data-static sur .aurora */
.aurora[data-static] i{animation:none}

/* En-tete commun */
#topbar,.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;min-height:var(--topbar-h);padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top));background:var(--glass);border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;gap:10px;width:100%;max-width:640px;margin:0 auto;min-width:0}
.topbar-inner>.btn-moon,.topbar-inner>.btn-sos,.topbar-inner>.topbar-actions{flex:0 0 auto}
.topbar-inner>.btn-moon{margin-left:auto}
.topbar-robin{width:48px;height:48px;flex:0 0 48px}
.topbar-id{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.topbar-name{font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.topbar-age{font-size:.8rem;color:var(--ink-2);line-height:1.25}

/* Zone de vue : la place du dock + de la nav + safe-area est reservee ici */
#view{position:relative;z-index:1;flex:1 1 auto;width:100%;max-width:640px;margin:0 auto;padding:16px 16px calc(var(--dock-h) + var(--nav-h) + 24px + env(safe-area-inset-bottom))}
#view>*+*{margin-top:14px}
body.no-dock #view{padding-bottom:calc(var(--nav-h) + 24px + env(safe-area-inset-bottom))}
body.game-on #view{padding-bottom:24px}
/* Verrou de defilement de la page pendant feuille / dialogue / onboarding / fiche d'urgence.
   Volontairement SANS touch-action:none : la valeur se propagerait a tout le sous-arbre et
   bloquerait le defilement interne de .sheet, .dialog et .urgence. */
body.no-scroll{overflow:hidden;overscroll-behavior:none}

/* Barre basse */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;padding-bottom:env(safe-area-inset-bottom);background:var(--glass);border-top:1px solid var(--line)}
.nav-btn{position:relative;flex:1 1 0;min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 2px 10px;color:var(--ink-3);font-size:.68rem;font-weight:600;transition:color .2s ease}
.nav-btn svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.nav-btn.on{color:var(--teal)}
.nav-btn.on svg{filter:drop-shadow(0 0 8px currentColor);transform:translateY(-1px)}
[data-theme="jour"] .nav-btn.on svg,[data-theme="veilleuse"] .nav-btn.on svg{filter:none}
.nav-btn:active{animation:press .18s ease}
.nav-pill{position:absolute;top:0;left:0;height:3px;width:20%;border-radius:var(--r-p);background:linear-gradient(90deg,var(--teal),var(--violet));box-shadow:0 0 12px var(--teal);transform:translateX(0);transition:transform .3s cubic-bezier(.22,1,.36,1);animation:nav-pill .3s cubic-bezier(.22,1,.36,1);pointer-events:none}
[data-theme="jour"] .nav-pill,[data-theme="veilleuse"] .nav-pill{box-shadow:none}

/* Un seul flou, partage : au plus 6 surfaces floutees a l'ecran (SPEC 2.1).
   .tile, .game-card, .dock-btn restent translucides SANS flou, volontairement. */
#topbar,.topbar,.nav,.subtabs,.card-glass,.sheet,.dialog,.toast{-webkit-backdrop-filter:blur(var(--blur)) saturate(145%);backdrop-filter:blur(var(--blur)) saturate(145%)}

/* Repli obligatoire sans backdrop-filter : surfaces opaques --n2 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
#topbar,.topbar,.nav,.dock,.card-glass,.sheet,.dialog,.toast,.subtabs,.game-hud{background:var(--n2);-webkit-backdrop-filter:none;backdrop-filter:none}
}
[data-theme="veilleuse"] #topbar,[data-theme="veilleuse"] .topbar,[data-theme="veilleuse"] .nav,[data-theme="veilleuse"] .dock,[data-theme="veilleuse"] .card-glass,[data-theme="veilleuse"] .sheet,[data-theme="veilleuse"] .dialog,[data-theme="veilleuse"] .toast{background:var(--n1);-webkit-backdrop-filter:none;backdrop-filter:none}

/* 6. Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 18px;border-radius:var(--r-p);font-family:var(--font-display);font-size:.95rem;font-weight:600;line-height:1.1;color:var(--ink);background:var(--glass);border:1px solid var(--line);text-align:center;text-decoration:none;transition:transform .12s ease,background .2s ease,border-color .2s ease,opacity .2s ease}
.btn:hover{text-decoration:none;border-color:var(--edge1)}
.btn:active{animation:press .18s ease}
.btn[disabled],.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

.btn-primary{color:var(--ink-on-teal);border-color:transparent;font-weight:700;background:linear-gradient(120deg,var(--teal),var(--violet));box-shadow:0 6px 20px rgba(0,0,0,.3)}
[data-theme="jour"] .btn-primary{box-shadow:0 2px 12px rgba(22,32,46,.14)}
[data-theme="veilleuse"] .btn-primary{background:var(--ambre);color:var(--n0);box-shadow:none}

.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink-2)}
.btn-ghost:hover{color:var(--ink)}

.btn-danger{background:transparent;border:1px solid var(--urgence);color:var(--urgence);font-weight:700}

.btn-sm{min-height:40px;padding:8px 14px;font-size:.85rem}
.btn-block{display:flex;width:100%}

.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;border-radius:var(--r-p);background:var(--glass);border:1px solid var(--line);color:var(--ink)}
.btn-icon:active{animation:press .18s ease}
.btn-icon svg{width:22px;height:22px}

/* Bouton lune (veilleuse) : permanent en haut a droite */
.btn-moon{flex:0 0 44px;font-size:1.15rem;line-height:1}
.btn-moon[aria-pressed="true"]{border-color:var(--ambre);color:var(--ambre)}

/* Bouton urgence : seul endroit ou --urgence a le droit d'apparaitre */
.btn-sos{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 12px;border-radius:var(--r-p);border:2px solid var(--urgence);color:var(--urgence);background:transparent;font-family:var(--font-display);font-weight:800;font-size:.9rem;letter-spacing:.02em}
.btn-sos:active{animation:press .18s ease}

/* 7. Cartes */
.card,.tile,.entry,.tl-item,.game-card{animation:rise .22s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 38ms)}
.card{position:relative;padding:var(--pad);border-radius:var(--r-m);background:var(--n1);border:1px solid var(--line);box-shadow:var(--shadow)}
.card>h2,.card>h3{margin-bottom:8px}
.card>.label+*{margin-top:6px}

/* Carte de verre a lisere : ::before + mask-composite:exclude */
.card-glass{background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow)}
.card-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(135deg,var(--edge1),transparent 40%,transparent 62%,var(--edge2));-webkit-mask:linear-gradient(#fff,#fff) content-box,linear-gradient(#fff,#fff);-webkit-mask-composite:xor;mask:linear-gradient(#fff,#fff) content-box,linear-gradient(#fff,#fff);mask-composite:exclude}

/* Carte a halo d'accent : poser --accent (teal par defaut) */
.card-accent{border-color:transparent;box-shadow:0 0 0 1px rgba(255,255,255,.08),var(--shadow)}
@supports (color:color-mix(in srgb,red 50%,blue)){
.card-accent{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 24px color-mix(in srgb,var(--accent) 35%,transparent)}
}
.card-accent::before{background:linear-gradient(135deg,var(--accent),transparent 55%)}
.card-accent .label,.card-accent .num small{color:var(--accent)}
[data-theme="jour"] .card-accent{box-shadow:var(--shadow)}

/* Tuiles d'insight */
.tile{position:relative;display:flex;flex-direction:column;gap:4px;justify-content:space-between;min-height:104px;padding:14px;border-radius:var(--r-m);background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);text-align:left;color:var(--ink)}
button.tile:active{animation:press .18s ease}
.tile .num{font-size:clamp(1.7rem,6vw,2.2rem)}
.tile-trend{font-size:.82rem;font-weight:700;color:var(--ink-2)}

/* Statistique compacte (ligne label + valeur) */
.stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.stat .label{color:var(--ink-3)}
.stat-v{font-family:var(--font-display);font-weight:700;font-size:1.15rem;font-variant-numeric:tabular-nums}

/* 8. Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:9px 14px;border-radius:var(--r-s);background:var(--glass);border:1px solid var(--line);color:var(--ink-2);font-size:.9rem;font-weight:600;line-height:1.2;text-align:left;transition:color .18s ease,border-color .18s ease,background .18s ease}
.chip:active{animation:press .18s ease}
.chip.on{color:var(--ink);border-color:var(--accent);background:var(--glass);box-shadow:inset 0 0 0 1px var(--accent)}
.chip.on::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
[data-theme="jour"] .chip.on::after{box-shadow:none}

/* 9. Formulaires */
.field{display:block;margin:0 0 12px}
.field>.label{margin-bottom:6px}
.field-hint{display:block;margin-top:6px;font-size:.82rem;color:var(--ink-2)}
.row{display:flex;gap:10px;align-items:flex-end}
.row>*{flex:1 1 0;min-width:0}
.row-tight{gap:6px}

input[type=text],input[type=number],input[type=date],input[type=time],input[type=datetime-local],input[type=tel],input[type=search],input[type=email],select,textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:var(--r-s);font-size:16px;line-height:1.35;/* 16px : anti-zoom iOS */color:var(--ink);background:var(--n2);border:1px solid var(--line);transition:border-color .18s ease,box-shadow .18s ease;-webkit-appearance:none;appearance:none}
textarea{min-height:110px;resize:vertical;line-height:1.5}
select{padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:1}
input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(47,230,200,.16)}
input[type=checkbox],input[type=radio]{width:24px;height:24px;min-height:24px;accent-color:var(--teal);-webkit-appearance:auto;appearance:auto;flex:0 0 24px}
input[type=range]{width:100%;accent-color:var(--teal);background:none;min-height:44px}
.check{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.check span{flex:1 1 auto;min-width:0}

/* Stepper au pouce (+/- 10 ml) */
.stepper{display:flex;align-items:center;gap:8px}
.stepper-btn{flex:0 0 56px;width:56px;height:56px;border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.5rem;font-weight:700;line-height:1;color:var(--ink);background:var(--n2);border:1px solid var(--line)}
.stepper-btn:active{animation:press .18s ease;border-color:var(--accent)}
.stepper-val{flex:1 1 auto;text-align:center;min-width:0;font-family:var(--font-display);font-weight:800;font-size:1.6rem;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--ink)}
.stepper-val small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* 10. Listes */
.daylbl{margin:18px 0 8px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.entry{position:relative;display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 12px;border-radius:var(--r-s);background:var(--glass);border:1px solid var(--line)}
.entry+.entry{margin-top:8px}
.entry-ico{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;background:var(--n2);color:var(--accent)}
.entry-ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.entry-body{flex:1 1 auto;min-width:0}
.entry-title{display:block;font-weight:600;font-size:.98rem;line-height:1.3;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entry-sub{display:block;font-size:.83rem;color:var(--ink-2);line-height:1.35}
.legal{margin:18px 16px calc(16px + env(safe-area-inset-bottom));font-size:.78rem;line-height:1.45;color:var(--ink-2);text-align:center}
.legal b{color:var(--ink)}
.entry-del{flex:0 0 44px;width:44px;height:44px;border-radius:var(--r-p);display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:1.05rem}
/* Jamais de rouge sur une donnee du bebe : --urgence reste reserve au 15 / 114.
   @media (hover:hover) evite la remanence du :hover apres un appui tactile. */
@media (hover:hover){.entry-del:hover{color:var(--ink)}}
.empty{padding:26px 18px;border-radius:var(--r-m);text-align:center;border:1px dashed var(--line);color:var(--ink-2);font-size:.92rem}
.empty strong{display:block;margin-bottom:4px;color:var(--ink);font-family:var(--font-display)}

/* 11. Feuille modale */
.sheet-backdrop{position:fixed;inset:0;z-index:70;background:rgba(4,7,14,.74);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade .2s ease both}
[data-theme="jour"] .sheet-backdrop{background:rgba(22,32,46,.34)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:71;max-height:88dvh;max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;width:100%;max-width:640px;margin:0 auto;padding:8px 16px calc(20px + env(safe-area-inset-bottom));border-radius:var(--r-l) var(--r-l) 0 0;background:var(--n1);background:color-mix(in srgb,var(--n1) 93%,transparent);border:1px solid var(--line);border-bottom:0;box-shadow:var(--shadow-lift);animation:rise .32s cubic-bezier(.22,1,.36,1) both}
.sheet::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(135deg,var(--edge1),transparent 45%,var(--edge2));-webkit-mask:linear-gradient(#fff,#fff) content-box,linear-gradient(#fff,#fff);-webkit-mask-composite:xor;mask:linear-gradient(#fff,#fff) content-box,linear-gradient(#fff,#fff);mask-composite:exclude}
.sheet-handle{width:44px;height:4px;margin:6px auto 10px;border-radius:var(--r-p);background:var(--ink-3);opacity:.6}
.sheet-title{font-family:var(--font-display);font-weight:700;font-size:1.15rem;line-height:1.25;margin:0 44px 12px 0;color:var(--ink)}
.sheet-close{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:var(--r-p);display:flex;align-items:center;justify-content:center;color:var(--ink-2);background:var(--n2);border:1px solid var(--line);font-size:1.1rem}
.sheet-body>*+*{margin-top:12px}

/* 12. Dialogue */
.dialog-backdrop{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(4,7,14,.66);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade .18s ease both}
[data-theme="jour"] .dialog-backdrop{background:rgba(22,32,46,.38)}
.dialog{width:100%;max-width:400px;padding:20px;border-radius:var(--r-l);background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow-lift);animation:rise .22s cubic-bezier(.22,1,.36,1) both;font-size:.98rem;line-height:1.5}
.dialog h3{margin-bottom:8px}
.dialog-title{font-family:var(--font-display);font-weight:700;font-size:1.1rem;line-height:1.25;margin-bottom:8px;color:var(--ink)}
.dialog-msg{color:var(--ink-2)}
.sheet-backdrop.open,.dialog-backdrop.open{opacity:1}
.dialog-actions{display:flex;gap:10px;margin-top:18px}
.dialog-actions .btn{flex:1 1 0}

/* 13. Toasts */
#toasts,.toasts,#toast-root{position:fixed;left:0;right:0;z-index:90;display:flex;flex-direction:column;align-items:center;gap:8px;bottom:calc(var(--dock-h) + var(--nav-h) + 12px + env(safe-area-inset-bottom));padding:0 12px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;width:100%;max-width:440px;min-height:48px;padding:11px 14px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--glass);box-shadow:var(--shadow-lift);font-size:.92rem;line-height:1.35;color:var(--ink);border-left:3px solid var(--ink-3);animation:rise .22s cubic-bezier(.22,1,.36,1) both}
.toast.ok{border-left-color:var(--ok)}
.toast.info{border-left-color:var(--azur)}
.toast.warn{border-left-color:var(--ambre)}
.toast.err{border-left-color:var(--corail)}
.toast-msg{flex:1 1 auto;min-width:0}
.toast-action{flex:0 0 auto;min-height:44px;padding:6px 14px;border-radius:var(--r-p);font-weight:700;font-size:.86rem;color:var(--teal);border:1px solid var(--line);background:transparent}
.toast-action:active{animation:press .18s ease}
/* Sortie en fondu avant retrait du DOM (260 ms cote core) : fade joue a l'envers */
.toast.out{animation:fade .24s ease reverse both}

/* 14. Celebration */
.celebrate{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;background:radial-gradient(circle at 50% 42%,rgba(255,209,102,.16),transparent 62%),rgba(4,7,14,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fade .2s ease both;overflow:hidden}
[data-theme="jour"] .celebrate{background:radial-gradient(circle at 50% 42%,rgba(201,162,39,.18),transparent 62%),rgba(251,247,241,.86)}
.celebrate .robin{width:min(46vw,190px);height:auto}
.celebrate h2{color:var(--or)}
.celebrate p{color:var(--ink-2);max-width:34ch}
.celebrate-xp{font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:var(--or);font-variant-numeric:tabular-nums}
.celebrate-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px}
.celebrate-title{color:var(--or)}
.celebrate-text{color:var(--ink-2);max-width:34ch}
.celebrate.out{animation:fade .24s ease reverse both}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:0;display:block;width:9px;height:14px;border-radius:2px;left:var(--x,50%);background:var(--c,var(--or));opacity:0;animation:celebrate 1.4s cubic-bezier(.25,.6,.4,1) both;animation-delay:calc(var(--i,0) * 34ms)}

/* 15. Onboarding */
.onboard{position:fixed;inset:0;z-index:60;overflow-y:auto;background:var(--n0);display:flex;flex-direction:column}
.onboard-step{flex:1 1 auto;width:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:calc(28px + env(safe-area-inset-top)) 22px 20px;animation:rise .28s cubic-bezier(.22,1,.36,1) both}
.onboard-step .robin{width:min(40vw,150px);height:auto;margin:0 auto}
.onboard-step h1{text-align:center}
.onboard-step .muted{text-align:center}
.onboard-actions{position:sticky;bottom:0;display:flex;flex-direction:column;gap:10px;width:100%;max-width:520px;margin:0 auto;padding:14px 22px calc(18px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,var(--n0) 38%)}
.onboard-dots{display:flex;gap:6px;justify-content:center;margin-bottom:2px}
.onboard-dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);opacity:.45}
.onboard-dots i.on{background:var(--teal);opacity:1}
.step-count{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:center;margin:0}
/* Listes de l'onboarding : le reset supprime les puces, on les redessine */
.onboard-news,.onboard-pact{display:flex;flex-direction:column;gap:8px;text-align:left;color:var(--ink-2)}
.onboard-news li,.onboard-pact li{position:relative;padding-left:18px}
.onboard-news li::before,.onboard-pact li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--teal)}

/* 16. Sous-onglets */
.subtabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px;border-radius:var(--r-p);background:var(--glass);border:1px solid var(--line)}
.subtabs::-webkit-scrollbar{display:none}
.subtab{flex:0 0 auto;min-height:44px;padding:9px 15px;border-radius:var(--r-p);font-size:.9rem;font-weight:600;color:var(--ink-2);white-space:nowrap;transition:color .18s ease,background .18s ease}
.subtab.on{color:var(--ink-on-teal);background:linear-gradient(120deg,var(--teal),var(--violet))}
[data-theme="veilleuse"] .subtab.on{background:var(--ambre);color:var(--n0)}
.subtab:active{animation:press .18s ease}

/* 17. Dock pouce */
.dock{position:fixed;left:0;right:0;z-index:44;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:640px;margin:0 auto;padding:10px 10px 12px}
.dock-btn{position:relative;flex:0 1 auto;width:min(76px,18.5vw);height:min(76px,18.5vw);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:1.5rem;line-height:1;color:var(--ink);background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);--accent:var(--teal)}
.dock-btn small{font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.dock-btn:active{animation:press .18s ease}
.dock-btn.saved{animation:pulse .38s ease-out both}
.dock-btn[data-hint]::after{content:"";position:absolute;inset:-4px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 2px var(--accent),0 0 18px var(--accent);opacity:.85}
.dock-btn-plus{flex:0 1 auto;width:min(52px,13vw);height:min(52px,13vw);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.4rem;font-weight:700;line-height:1;color:var(--ink-2);background:var(--glass);border:1px dashed var(--line)}
.dock-btn-plus:active{animation:press .18s ease}
[data-hand="left"] .dock{flex-direction:row-reverse}

/* 18. Anneau de nuit 24 h */
.ring{position:relative;width:100%;max-width:320px;margin:0 auto;aspect-ratio:1/1}
.ring-svg{width:100%;height:100%;overflow:visible;display:block}
.ring-svg .ring-track{fill:none;stroke:var(--ring-track);stroke-width:10}
.ring-svg .ring-arc{fill:none;stroke-linecap:round;stroke-width:10;animation:ring-fill .9s cubic-bezier(.22,1,.36,1) both}
.ring-svg .ring-arc.sleep{stroke:var(--ambre)}
.ring-svg .ring-arc.feed{stroke:var(--teal)}
.ring-svg .ring-dot{fill:var(--teal)}
.ring-svg .ring-tick{stroke:var(--corail);stroke-width:2.5;stroke-linecap:round}
.ring-svg .ring-hand{stroke:var(--ink-2);stroke-width:1.75;stroke-linecap:round}
.ring-svg .ring-hour{fill:var(--ink-3);font-size:9px;font-weight:700}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;pointer-events:none}
.ring-center .robin{width:38%;height:auto}
.ring-legend{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px;font-size:.78rem;color:var(--ink-2)}
.ring-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}

/* 19. Barre empilee orale / sonde */
.bar-stack{display:flex;width:100%;height:16px;border-radius:var(--r-p);overflow:hidden;background:var(--ring-track);border:1px solid var(--line)}
.bar-stack i{display:block;height:100%;transition:width .4s cubic-bezier(.22,1,.36,1)}
.bar-stack i.oral{background:linear-gradient(90deg,var(--teal),var(--violet))}
.bar-stack i.sng{background:var(--azur);opacity:.55}
.bar-stack-legend{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:.8rem;color:var(--ink-2)}

/* 20. Heatmap 24 h x 14 j */
.heatmap{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;padding:10px;border-radius:var(--r-s);background:var(--n2);border:1px solid var(--line);overflow-x:auto}
.heat-cell{aspect-ratio:1/1;min-width:8px;border-radius:3px;background:var(--ring-track)}
.heat-cell[data-lvl="1"]{background:var(--corail);opacity:.28}
.heat-cell[data-lvl="2"]{background:var(--corail);opacity:.52}
.heat-cell[data-lvl="3"]{background:var(--corail);opacity:.76}
.heat-cell[data-lvl="4"]{background:var(--corail);opacity:1}
.heatmap-axis{display:flex;justify-content:space-between;margin-top:6px;font-size:.72rem;color:var(--ink-3)}

/* 21. Courbe (couloir OMS) */
.chart{width:100%;border-radius:var(--r-s);overflow:hidden;background:var(--n2);border:1px solid var(--line)}
.chart svg{width:100%;height:auto;display:block}
.chart-band{fill:var(--azur);opacity:.10;stroke:none}
.chart-band.mid{opacity:.18}
.chart-grid{stroke:var(--line);stroke-width:1}
.chart-axis{fill:var(--ink-3);font-size:9px;font-weight:600}
.chart-line{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;animation:ring-fill .9s cubic-bezier(.22,1,.36,1) both}
.chart-line.ref{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 4;opacity:.7;animation:none}
.chart-dot{fill:var(--teal);stroke:var(--n0);stroke-width:1.5}
.chart-dot.last{r:5;animation:twinkle 2.4s ease-in-out infinite}
.chart-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:.78rem;color:var(--ink-2)}

/* 22. Timeline / constellation du parcours */
.tl{position:relative;padding-left:6px}
.tl-item{position:relative;display:flex;gap:14px;padding:0 0 16px 0;--accent:var(--ink-3)}
.tl-line{position:absolute;left:11px;top:26px;bottom:-2px;width:2px;border-radius:1px;background:linear-gradient(180deg,var(--line),transparent)}
.tl-item:last-child .tl-line{display:none}
.tl-dot{position:relative;z-index:1;flex:0 0 24px;width:24px;height:24px;margin-top:2px;border-radius:50%;background:var(--n1);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--accent)}
.tl-body{flex:1 1 auto;min-width:0;text-align:left}
.tl-body h3{font-size:1rem;margin-bottom:2px}
.tl-body p{font-size:.86rem;color:var(--ink-2);margin:0}
.tl-spec{font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}

.tl-item.future{--accent:var(--ink-3);opacity:.82}
.tl-item.soon{--accent:var(--azur)}
.tl-item.due{--accent:var(--violet)}
.tl-item.due .tl-dot{box-shadow:0 0 0 0 var(--violet);animation:pulse 2.4s ease-out infinite}
.tl-item.review{--accent:var(--ambre)}
.tl-item.review .tl-dot{background:var(--ambre);color:var(--n0)}
.tl-item.done{--accent:var(--or)}
.tl-item.done .tl-dot{background:var(--or);color:var(--n0);border-color:var(--or)}
.tl-item.done .tl-body h3{color:var(--ink-2)}

/* 23. Ruban de source · observation a partager */
.source-tag{display:inline-flex;align-items:center;gap:6px;min-height:32px;margin-top:8px;padding:5px 11px;border-radius:var(--r-p);font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--ink-3);background:transparent;border:1px solid var(--line)}
button.source-tag{min-height:36px;color:var(--ink-2)}
button.source-tag:hover{border-color:var(--edge1);color:var(--ink)}
.source-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-3)}

/* Observation a partager : ambre, jamais rouge, jamais « alerte » */
.obs{position:relative;padding:14px;border-radius:var(--r-m);background:var(--glass);border:1px solid var(--line);border-left:3px solid var(--ambre);--accent:var(--ambre)}
.obs .label{color:var(--ambre)}
.obs p{font-size:.92rem;color:var(--ink)}
.obs .btn{margin-top:10px}

/* 24. Badges */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.badge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:var(--r-m);text-align:center;background:var(--glass);border:1px solid var(--line);font-size:.74rem;font-weight:600;line-height:1.25;color:var(--ink)}
.badge-emoji{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;background:var(--n2);box-shadow:0 0 0 1px var(--line),0 0 16px rgba(255,209,102,.22)}
[data-theme="jour"] .badge-emoji{box-shadow:0 0 0 1px var(--line)}
.badge.locked{opacity:.42}
.badge.locked .badge-emoji{filter:grayscale(1);box-shadow:0 0 0 1px var(--line)}
.badge-date{font-size:.68rem;color:var(--ink-3);font-weight:700}

/* 25. Jeux */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.game-card{position:relative;display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:14px;border-radius:var(--r-m);text-align:left;color:var(--ink);background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);--accent:var(--violet)}
.game-card:active{animation:press .18s ease}
.game-card h3{font-size:1rem}
.game-card p{font-size:.82rem;color:var(--ink-2);margin:0}
.game-card-emoji{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;line-height:1;background:var(--n2);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 30%,transparent)}
@supports not (color:color-mix(in srgb,red 50%,blue)){.game-card-emoji{box-shadow:none}}
[data-theme="jour"] .game-card-emoji,[data-theme="veilleuse"] .game-card-emoji{box-shadow:none}
.game-card.off{opacity:.5}
.game-card-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.74rem;color:var(--ink-3)}
.game-card-best{font-weight:700;color:var(--or);font-variant-numeric:tabular-nums}
.age-pill{display:inline-flex;align-items:center;min-height:24px;padding:2px 9px;border-radius:var(--r-p);font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line)}
.age-pill.on{color:var(--violet);border-color:var(--violet)}

/* Plein ecran de jeu (fourni par le hub) */
/* Pas de touch-action:none ici : la valeur effective d'un geste est l'intersection depuis
   l'element touche jusqu'a ses ancetres, donc none sur la couche tuerait le defilement de
   .game-intro / .game-result. Les surfaces de jeu le posent elles-memes (canvas, .game-stage). */
.game-layer{position:fixed;inset:0;z-index:65;display:flex;flex-direction:column;background:var(--n1);overflow:hidden;overscroll-behavior:contain}
.game-mount{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;z-index:1}
.game-exit{position:absolute;z-index:6;top:calc(10px + env(safe-area-inset-top));left:10px;min-width:44px;height:44px;padding:0 14px;border-radius:var(--r-p);display:inline-flex;align-items:center;gap:6px;color:var(--ink);background:var(--glass);border:1px solid var(--line);font-size:.86rem;font-weight:600}
.game-hud{position:relative;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px 64px;font-size:.86rem;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.game-hud .num{font-size:1.3rem}
.game-stage{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.game-stage canvas{display:block;width:100%;height:100%;touch-action:none}
/* justify-content:safe center — centre tant que le contenu tient, bascule en flex-start des
   qu'il deborde, sinon le haut (titre, 1ers paragraphes) devient inatteignable au defilement.
   La valeur "center" est declaree d'abord comme repli pour les moteurs qui ignorent "safe". */
.game-intro,.game-result{position:absolute;inset:0;z-index:4;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;gap:12px;padding:24px 22px calc(24px + env(safe-area-inset-bottom));text-align:center;background:var(--n1);animation:rise .24s cubic-bezier(.22,1,.36,1) both}
.game-intro p,.game-result p{max-width:36ch;color:var(--ink-2)}
.game-intro .robin,.game-result .robin{width:min(38vw,150px);height:auto}
.game-intro .btn,.game-result .btn{width:min(100%,340px)}
.game-result .num{color:var(--or)}

/* Quiz */
.quiz-q{font-family:var(--font-display);font-weight:700;font-size:1.12rem;line-height:1.35;margin-bottom:14px;color:var(--ink)}
.quiz-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:13px 15px;margin-bottom:10px;border-radius:var(--r-s);text-align:left;font-size:.96rem;line-height:1.35;color:var(--ink);background:var(--glass);border:1px solid var(--line);transition:border-color .18s ease,background .18s ease}
.quiz-opt:active{animation:press .18s ease}
.quiz-opt.picked{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.quiz-opt.correct{border-color:var(--ok);color:var(--ink)}
.quiz-opt.correct::after{content:"OK";margin-left:auto;font-size:.72rem;font-weight:800;letter-spacing:.06em;color:var(--ok)}
.quiz-opt.wrong{border-color:var(--ambre);opacity:.85}
.quiz-opt.wrong::after{content:"en fait...";margin-left:auto;font-size:.72rem;font-weight:800;color:var(--ambre)}
.quiz-opt[disabled]{pointer-events:none}

/* Barre de progression (quiz, niveaux, minuteurs doux) */
.progress{width:100%;height:8px;border-radius:var(--r-p);overflow:hidden;background:var(--ring-track);border:1px solid var(--line)}
.progress-bar{display:block;height:100%;width:0;border-radius:var(--r-p);background:linear-gradient(90deg,var(--teal),var(--violet));transition:width .4s cubic-bezier(.22,1,.36,1)}
[data-theme="veilleuse"] .progress-bar{background:var(--ambre)}

/* 26. Mascotte Robin (SVG inline de App.svg.robin) */
.robin{width:56px;height:56px;display:block;overflow:visible;flex:0 0 auto}
.robin #halo,.robin #body,.robin #breast,.robin #eye,.robin #beak,.robin #wingL,.robin #wingR,.robin #tuft,.robin #cheeks{transform-box:fill-box;transform-origin:center}
.robin #zz,.robin #stars,.robin #puffs{opacity:0}
.robin #halo{opacity:.55}

/* idle : flottement 3,2 s + clignement */
.robin[data-state="idle"]{animation:float-y 3.2s ease-in-out infinite}
.robin[data-state="idle"] #eye{animation:blink 6s ease-in-out infinite;transform-origin:center}

/* happy : tete penchee, plastron lumineux, 2 etincelles, rebond */
.robin[data-state="happy"]{animation:bob .52s cubic-bezier(.34,1.56,.64,1) both}
.robin[data-state="happy"] #body{transform:rotate(-8deg)}
.robin[data-state="happy"] #breast{filter:brightness(1.25) saturate(1.15)}
.robin[data-state="happy"] #stars{opacity:1;animation:twinkle 1.6s ease-in-out infinite}
.robin[data-state="happy"] #cheeks{opacity:.9}

/* sleep : oeil en trait, 3 z qui montent, flottement lent (veilleuse animee) */
.robin[data-state="sleep"]{animation:float-y 5s ease-in-out infinite}
.robin[data-state="sleep"] #eye{transform:scaleY(.12)}
.robin[data-state="sleep"] #zz{opacity:1}
.robin[data-state="sleep"] #zz>*{animation:zz 2.6s ease-out infinite;transform-box:fill-box}
.robin[data-state="sleep"] #zz>*:nth-child(2){animation-delay:.5s}
.robin[data-state="sleep"] #zz>*:nth-child(3){animation-delay:1s}
.robin[data-state="sleep"] #halo{opacity:.28}

/* blow : joues gonflees, bec en O, particules d'air ; amplitude pilotee par --blow (0-1) */
.robin[data-state="blow"]{--blow:0}
.robin[data-state="blow"] #cheeks{opacity:1;transform:scaleX(calc(1 + .15 * var(--blow,1)))}
.robin[data-state="blow"] #beak{transform:scale(calc(1 + .35 * var(--blow,1)))}
.robin[data-state="blow"] #puffs{opacity:calc(.35 + .65 * var(--blow,1))}
.robin[data-state="blow"] #puffs>*{animation:puff 1.1s ease-out infinite;transform-box:fill-box}
.robin[data-state="blow"] #puffs>*:nth-child(2){animation-delay:.22s}
.robin[data-state="blow"] #puffs>*:nth-child(3){animation-delay:.44s}

/* cheer : ailes levees, halo ambre pulse, etoiles */
.robin[data-state="cheer"]{animation:bob .6s cubic-bezier(.34,1.56,.64,1) both}
.robin[data-state="cheer"] #wingL{transform:rotate(-40deg)}
.robin[data-state="cheer"] #wingR{transform:rotate(40deg)}
.robin[data-state="cheer"] #halo{opacity:1;fill:var(--ambre);animation:twinkle 1.8s ease-in-out infinite}
.robin[data-state="cheer"] #stars{opacity:1;animation:twinkle 1.4s ease-in-out infinite}

/* hug : penche, halo rose doux (reaction immediate, jamais une detection) */
.robin[data-state="hug"]{animation:float-y 4s ease-in-out infinite}
.robin[data-state="hug"] #body{transform:rotate(9deg)}
.robin[data-state="hug"] #wingL{transform:rotate(-18deg)}
.robin[data-state="hug"] #wingR{transform:rotate(18deg)}
.robin[data-state="hug"] #halo{opacity:.85;fill:var(--rose)}
.robin[data-state="hug"] #eye{transform:scaleY(.35)}

/* 27. Fiche urgence (theme jour force, contraste maximal) */
.urgence{position:fixed;inset:0;z-index:88;overflow-y:auto;/* palette claire forcee, independante du theme courant */--n0:#FFFFFF;--n1:#FFFFFF;--n2:#F1ECE4;--glass:#FFFFFF;--line:#16202E;--ink:#0B1017;--ink-2:#26313F;--ink-3:#26313F;--urgence:#C4001D;--teal:#0B6B5C;--accent:#C4001D;--shadow:none;--blur:0px;background:#FFFFFF;color:#0B1017;padding:calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));font-size:1.05rem;line-height:1.5}
.urgence h1,.urgence .h1{color:#0B1017;background:none;-webkit-text-fill-color:currentColor}
.urgence .card,.urgence .card-glass{background:#FFF;border:2px solid #16202E;box-shadow:none}
.urgence .card-glass::before{display:none}
.urgence .label{color:#26313F}
.urgence .muted{color:#26313F}
.urgence-call{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:sticky;top:0;z-index:2;padding:8px 0;background:#FFF}
.urgence-call .btn{min-height:64px;font-size:1.15rem;font-weight:800;border-radius:14px;background:#C4001D;color:#FFF;border:2px solid #C4001D}
.urgence-call .btn.sms{background:#FFF;color:#C4001D}
.urgence-row{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #16202E}
.urgence-row dt{flex:0 0 40%;font-weight:800;text-transform:uppercase;font-size:.8rem;letter-spacing:.04em}
.urgence-row dd{flex:1 1 auto;min-width:0;font-weight:600;word-break:break-word}

/* 28. Accordeons + glossaire */
details.acc{border-radius:var(--r-m);background:var(--glass);border:1px solid var(--line);overflow:hidden}
details.acc+details.acc{margin-top:10px}
details.acc>summary{display:flex;align-items:center;gap:10px;min-height:56px;padding:14px 16px;cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink)}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::after{content:"";margin-left:auto;flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
details.acc[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
details.acc[open]>summary{color:var(--teal)}
.acc-body{padding:0 16px 16px;font-size:.95rem;color:var(--ink-2);animation:fade .18s ease both}
.acc-body p{color:var(--ink-2)}
.acc-body strong{color:var(--ink)}
.acc-body>*+*{margin-top:10px}

.gloss{display:inline;padding:0;font:inherit;color:var(--azur);font-weight:600;border-bottom:1px dotted currentColor;background:none;text-align:left}
.gloss:active{opacity:.7}

/* 29. Utilitaires */
.muted{color:var(--ink-2)}
.small{font-size:.82rem;line-height:1.45}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.flex{display:flex;align-items:center}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gap{gap:var(--gap)}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:14px}.mt-4{margin-top:22px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:14px}.mb-4{margin-bottom:22px}
.text-center{text-align:center}
.hidden{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (max-width:360px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 30. Skeleton */
.skeleton{border-radius:var(--r-s);min-height:16px;color:transparent!important;user-select:none;background:linear-gradient(100deg,var(--n2) 30%,var(--line) 48%,var(--n2) 66%);background-size:220% 100%;animation:shimmer 1.4s linear infinite}
.skeleton *{visibility:hidden}

/* 31. Impression : #printzone seul visible, theme clair */
@media print{
html,body{background:#fff!important;color:#000!important}
body *{visibility:hidden!important}
#printzone,#printzone *{visibility:visible!important}
#printzone{position:absolute!important;left:0;top:0;width:100%;padding:0;--n0:#fff;--n1:#fff;--n2:#fff;--glass:#fff;--line:#c8ccd4;--ink:#000;--ink-2:#333;--ink-3:#555;--teal:#0B6B5C;--violet:#3D34A0;--azur:#1F5FA8;--ambre:#8A5A1E;--or:#8A6A10;--corail:#A83A1E;--rose:#9B2E57;--ok:#1F6B3A;--urgence:#A3001A;--shadow:none;--shadow-lift:none;--blur:0px;color:#000;font-size:11pt;line-height:1.4}
#printzone h1,#printzone .h1,#printzone .title-grad{color:#000!important;background:none!important;-webkit-text-fill-color:#000!important}
#printzone .card,#printzone .card-glass,#printzone .tile,#printzone .entry,#printzone .obs,#printzone table,#printzone .chart{background:#fff!important;border:1px solid #c8ccd4!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;page-break-inside:avoid;break-inside:avoid}
#printzone .card-glass::before,#printzone .sheet::before{display:none!important}
#printzone svg{max-width:100%;height:auto}
#printzone th,#printzone td{border:1px solid #c8ccd4;padding:4px 6px;font-size:9.5pt}
#printzone .btn,#printzone .btn-icon,#printzone .entry-del,#printzone .source-tag{display:none!important}
#printzone .print-only{display:block!important}
.aurora,#topbar,.topbar,.nav,.dock,.toasts,#toasts,#toast-root,.sheet,.sheet-backdrop,.dialog,.dialog-backdrop,.celebrate,.game-layer,.onboard{display:none!important}
* ,*::before,*::after{animation:none!important;transition:none!important}
@page{margin:12mm}
}
.print-only{display:none}