:root{
  --shell:#F3EEE3; --surface:#FFFFFF; --surface-2:#FAF7F0;
  --ink:#262019; --ink-soft:#6F6656; --hair:#E5DDCC;
  --accent:#2F7A4D; --accent-soft:#E5EFE7;
  --amber:#B0742A; --amber-soft:#F5EAD6;
  --clay:#A8473A; --clay-soft:#F3E0DA;
  --wine:#7B3F5E; --wine-soft:#F0E4EA;
  --track:#EAE3D4;
  /* accent OR — 2e couleur de signature (filets, eyebrow, détails éditoriaux) */
  --gold:#836A2C; --gold-line:#C8A96E; --gold-soft:#EFE6D0;
  /* sémaphore de la NOTE (4 paliers, lecture immédiate) : vert / jaune / orange / rouge */
  --sc-green:#2F7A4D; --sc-lime:#B08A12; --sc-orange:#C06A22; --sc-red:#B23A2E;
  --shadow:0 1px 2px rgba(40,32,22,.05),0 10px 30px -14px rgba(40,32,22,.22);
  --shadow-lg:0 2px 4px rgba(40,32,22,.06),0 24px 48px -22px rgba(40,32,22,.30);
}
@media (prefers-color-scheme:dark){
  :root{
    --shell:#16140F; --surface:#211E17; --surface-2:#1B1810;
    --ink:#EFE8D9; --ink-soft:#A99E89; --hair:#332E22;
    --accent:#74BE8E; --accent-soft:#1F2C1D;
    --amber:#D9A34F; --amber-soft:#2C2513;
    --clay:#DB7E6D; --clay-soft:#2E1B17;
    --wine:#D294B4; --wine-soft:#2E1F27;
    --track:#2C2719;
    --gold:#D8BE86; --gold-line:#8A7238; --gold-soft:#2A2313;
    --sc-green:#74BE8E; --sc-lime:#E2C24E; --sc-orange:#E0955A; --sc-red:#DB7E6D;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 34px -16px rgba(0,0,0,.7);
    --shadow-lg:0 2px 4px rgba(0,0,0,.35),0 26px 52px -20px rgba(0,0,0,.8);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* Garde-fou anti-scroll horizontal : aucune page ne doit déborder en largeur, quel que
   soit le contenu (noms longs, codes, URLs) ou la largeur d'écran. Le scroll horizontal
   VOULU (ex. .histrow) reste intact car il est porté par l'élément lui-même. */
html,body{max-width:100%;overflow-x:clip}
body{
  background:var(--shell);color:var(--ink);
  font-family:"Instrument Sans",system-ui,sans-serif;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* Jamais de césure au milieu d'un mot : on coupe seulement AUX ESPACES. overflow-wrap
     ne brise un mot que s'il est seul trop long pour la ligne (URL, code) — jamais un mot normal. */
  overflow-wrap:break-word;word-break:normal;hyphens:none;-webkit-hyphens:none;
}
/* Les enfants flex à contenu long ne doivent pas forcer la largeur (min-width:auto par défaut). */
.app, .view, .onbslide, .onbcard, .prod, .resmain, .ressub{min-width:0;max-width:100%}
/* texture papier : grain fractal très discret, fixe derrière tout le contenu */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
@media (prefers-color-scheme:dark){ body::before{opacity:.06} }
/* angle de l'anneau de note, animable (conic-gradient) */
@property --pct{syntax:"<angle>";inherits:false;initial-value:0deg}
.app{position:relative;z-index:1;max-width:460px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:0 16px 18px}
/* La barre fixe « Scanner un autre produit » n'existe que sur la vue résultat :
   on réserve l'espace bas UNIQUEMENT là, sinon les autres vues gagnaient 70px de vide. */
#viewResult.on{padding-bottom:84px}

/* top bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 -16px;padding:max(12px,env(safe-area-inset-top)) 16px 11px;position:sticky;top:0;background:var(--shell);border-bottom:1px solid var(--hair);z-index:5}
.brand{font-family:"Fraunces",Georgia,serif;font-weight:900;font-size:1.5rem;letter-spacing:-.01em;display:flex;align-items:center;gap:.4em;background:none;border:none;padding:0;cursor:pointer;color:var(--ink);white-space:nowrap}
.brand .pt{color:var(--accent)}
.brandmark{height:36px;width:36px;flex:0 0 auto;vertical-align:middle}
.barlinks{display:flex;gap:14px;align-items:center}
.link{background:none;border:none;color:var(--ink-soft);font:inherit;font-size:1.3rem;line-height:1;cursor:pointer;white-space:nowrap;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px}
.link:hover{color:var(--ink)}
/* bio local */
#bioResults{display:flex;flex-direction:column;gap:8px;margin-top:6px}
#bioResults:empty{display:none}
.biocard{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:11px 13px;box-shadow:var(--shadow)}
.biomain{display:flex;flex-direction:column;gap:2px;min-width:0}
.bionom{font-weight:600;font-size:.92rem;color:var(--ink)}
.bioact{font-size:.77rem;color:var(--accent);font-weight:600}
.bioloc{font-size:.8rem;color:var(--ink-soft)}
.biolink{flex:0 0 auto;font-size:.82rem;font-weight:600;color:var(--accent);text-decoration:none;border:1px solid var(--hair);border-radius:8px;padding:6px 10px}
.biolink:hover{border-color:var(--accent)}

.view{display:none;flex-direction:column;gap:16px;animation:fade .3s ease}
.view.on{display:flex}
#viewScan{gap:11px}
.scanh{font-family:"Fraunces",Georgia,serif;font-weight:900;font-size:1.5rem;letter-spacing:-.01em;margin:2px 0 0;color:var(--ink)}
.camtip{font-size:.76rem;color:var(--ink-soft);line-height:1.4;margin:0}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* SCAN */
.hero{padding:8px 2px 0}
.hero h1{font-family:"Fraunces",serif;font-weight:900;font-size:1.9rem;line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.hero p{color:var(--ink-soft);margin-top:6px;font-size:.96rem}
.cam{position:relative;height:128px;border-radius:20px;overflow:hidden;background:#000;border:1px solid var(--hair);box-shadow:var(--shadow)}
.cam:has(video){height:auto;aspect-ratio:1}
.cam video{width:100%;height:100%;object-fit:cover;display:block}
#reader{width:100%;height:100%}
#reader video{width:100%!important;height:100%!important;object-fit:cover;display:block}
label.btn{display:block;text-align:center}
#camMsg{font-size:.86rem;color:var(--clay);padding:6px 2px 0;line-height:1.45}
#camMsg:empty{display:none}
.camwarn{background:#FDEBD0;color:#7A4A12;border:1px solid #E7B87A;border-radius:12px;padding:10px 12px;font-size:.85rem;line-height:1.4}
.onbresume{margin-top:16px;padding:14px;border:1px solid var(--hair);border-radius:16px;background:var(--surface);display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;box-shadow:var(--shadow)}
.onbresume span{font-weight:600;color:var(--ink)}
.onbresume .btn{width:100%}
.scanver{text-align:center;font-size:.7rem;color:var(--ink-soft);margin-top:-4px;letter-spacing:.02em}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .camwarn{background:#3A2A12;color:#F0C98A;border-color:#6B4E22}}
.cam .frame{position:absolute;inset:16% 14%;border:2px solid rgba(255,255,255,.9);border-radius:14px;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
.cam .hint{position:absolute;left:0;right:0;bottom:12px;text-align:center;color:#fff;font-size:.82rem;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.cam .off{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-soft);background:var(--surface-2);text-align:center;padding:24px;font-size:.9rem}
.btn{border:none;border-radius:12px;font:inherit;font-weight:600;cursor:pointer;padding:13px 16px;transition:transform .08s ease,filter .15s ease}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--hair)}
.manual{display:flex;gap:8px}
.manual input{flex:1;min-width:0;padding:12px 14px;border-radius:12px;border:1px solid var(--hair);background:var(--surface);color:var(--ink);font:inherit;font-variant-numeric:tabular-nums}
.manual input:focus{outline:2px solid var(--accent);outline-offset:1px}
.prefs{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.plabel{font-size:.82rem;color:var(--ink-soft);font-weight:600}
.pchip{background:var(--surface);border:1px solid var(--hair);border-radius:999px;font:inherit;font-size:.84rem;font-weight:600;color:var(--ink);padding:7px 12px;cursor:pointer;transition:background .12s,border-color .12s}
.pchip.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.alcowarn{font-size:.82rem;line-height:1.4;background:var(--clay-soft);color:var(--clay);padding:9px 12px;border-radius:8px;border:1px solid color-mix(in srgb,var(--clay) 30%,transparent)}
/* espace boissons alcoolisées — piste séparée, accent vin */
.drinkbanner{font-size:.84rem;line-height:1.45;background:var(--wine-soft);color:var(--wine);padding:11px 13px;border-radius:12px;border:1px solid color-mix(in srgb,var(--wine) 30%,transparent)}
.energywarn{font-size:.82rem;line-height:1.45;background:var(--amber-soft);color:var(--amber);padding:9px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--amber) 30%,transparent)}
.scorecard.alco{border-color:color-mix(in srgb,var(--wine) 35%,var(--hair));box-shadow:var(--shadow),inset 4px 0 0 var(--wine)}
.drinkchip{flex:0 0 auto;font-size:.8rem;font-weight:600;color:var(--wine);background:var(--wine-soft);padding:5px 10px;border-radius:999px}
/* axes communs — repères identiques sur chaque produit */
.axes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.axe{background:var(--surface-2);border:1px solid var(--hair);border-radius:12px;padding:9px 11px;display:flex;flex-direction:column;gap:3px;min-width:0}
.axe.na{opacity:.62}
.axh{font-size:.8rem;font-weight:600;color:var(--ink-soft);display:flex;align-items:baseline;gap:.3em;line-height:1.25}
.axh em{font-style:normal;color:var(--accent);font-size:.82em}
.axv{font-family:"Fraunces",serif;font-weight:900;font-size:1.35rem;font-variant-numeric:tabular-nums;line-height:1}
.axv i{font-style:normal;font-size:.6rem;color:var(--ink-soft);font-weight:600}
.axv.na,.axv.nd{font-family:"Instrument Sans",sans-serif;font-weight:500;font-size:.82rem;color:var(--ink-soft)}
.axe.prio{background:var(--accent-soft);border-color:var(--accent)}
.axnote{font-size:.76rem;color:var(--ink-soft);line-height:1.4;padding:0 2px}
.demos{display:flex;flex-direction:column;gap:8px}
.demos .lbl{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-top:4px}
.chip{background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:11px 14px;text-align:left;cursor:pointer;font:inherit;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:10px}
.chip:hover{border-color:var(--accent)}
.chip small{color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* status / loading */
.status{padding:26px;text-align:center;color:var(--ink-soft);font-size:.95rem}
.spin{width:26px;height:26px;border-radius:50%;border:3px solid var(--track);border-top-color:var(--accent);margin:0 auto 12px;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* RESULT */
.prod{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:6px 2px}
.prod img{width:64px;height:64px;border-radius:14px;object-fit:cover;background:var(--surface-2);border:1px solid var(--hair);flex:0 0 auto}
.prod .ph{width:64px;height:64px;border-radius:14px;background:var(--surface-2);border:1px solid var(--hair);display:grid;place-items:center;font-size:1.6rem;flex:0 0 auto}
/* Le nom prend TOUTE la largeur restante à côté de l'image (min 150px) : plus jamais écrasé.
   Si trop long : 3 lignes max puis « … ». Les boutons d'action passent sous le nom au besoin. */
.prod > div:not(.resactions){flex:1 1 150px;min-width:0}
/* Les 3 boutons d'action restent GROUPÉS et alignés à droite ; ils passent sous le nom au besoin. */
.resactions{display:flex;gap:8px;align-items:center;margin-left:auto;flex:0 0 auto}
.resactions .favbtn,.resactions .listbtn,.resactions .sharebtn{margin-left:0}
.prod h2{font-family:"Fraunces",serif;font-weight:600;font-size:1.15rem;line-height:1.18;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.prod .brand2{color:var(--ink-soft);font-size:.85rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.scorecard{background:var(--surface);border:1px solid var(--hair);border-radius:20px;box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:14px}
.head{display:flex;align-items:center;gap:16px}
.ring{--pct:0deg;--c:var(--accent);width:96px;height:96px;border-radius:50%;flex:0 0 auto;background:conic-gradient(var(--c) var(--pct),var(--track) 0);display:grid;place-items:center;position:relative}
.ring::before{content:"";position:absolute;width:72px;height:72px;border-radius:50%;background:var(--surface)}
.ring b{position:relative;font-family:"Fraunces",serif;font-weight:900;font-size:1.9rem;font-variant-numeric:tabular-nums;color:var(--c)}
.ring b i{font-style:normal;font-size:.72rem;color:var(--ink-soft);font-weight:600}
.hv{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.origin{display:flex;flex-direction:column;align-items:center;gap:1px;flex:0 0 auto;text-align:center;max-width:88px}
.origin .flag{font-size:1.9rem;line-height:1}
.origin .opays{font-size:.82rem;font-weight:600;color:var(--ink);line-height:1.1;overflow:hidden;text-overflow:ellipsis;max-width:88px;white-space:nowrap}
.origin .ozone{font-size:.68rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft)}
.pill{align-self:flex-start;font-size:.78rem;font-weight:600;padding:4px 11px;border-radius:999px;display:inline-flex;gap:.4em;align-items:center}
.pill.ok{background:var(--accent-soft);color:var(--accent)}
.pill.warn{background:var(--amber-soft);color:var(--amber)}
.pill.low{background:var(--clay-soft);color:var(--clay)}
.pill.na{background:var(--surface-2);color:var(--ink-soft)}
.hv small{color:var(--ink-soft);font-size:.84rem}

.rows{display:flex;flex-direction:column;gap:13px;border-top:1px solid var(--hair);padding-top:14px}
.r{display:flex;flex-direction:column;gap:5px}
.rh{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rn{font-size:.9rem;font-weight:500}
.rn b{color:var(--ink-soft);font-weight:500;font-size:.76rem}
.rv{font-variant-numeric:tabular-nums;font-weight:600;font-size:.9rem}
.rv.na{color:var(--ink-soft);font-weight:500}
.r .scbar{height:7px;border-radius:999px;background:var(--track);overflow:hidden;margin:0;padding:0;position:static}
.r .scbar>i{display:block;height:100%;border-radius:999px;background:var(--c,var(--accent))}
.cf{display:flex;align-items:center;gap:.45em;font-size:.76rem;color:var(--ink-soft)}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.dot.audite{background:var(--accent)}.dot.estime{background:var(--amber)}.dot.indisponible{background:var(--track);border:1px solid var(--ink-soft)}

.geo{font-size:.86rem;color:var(--ink-soft);display:flex;align-items:center;gap:.5em;border-top:1px solid var(--hair);padding-top:12px}
.verif{display:flex;flex-direction:column;gap:5px}
.verif .vl{display:flex;justify-content:space-between;font-size:.78rem;color:var(--ink-soft)}
.vbar{position:relative;height:7px;border-radius:999px;background:var(--track)}
.vbar>i{display:block;height:100%;border-radius:999px}
.vbar::after{content:"";position:absolute;top:-3px;bottom:-3px;left:50%;width:2px;background:var(--ink-soft);opacity:.5}
.why{padding:12px 13px;border-radius:12px;background:var(--surface-2);border-left:3px solid var(--c,var(--accent));font-size:.85rem;line-height:1.5}
.offedit{color:var(--ink-soft);font-size:.8rem;line-height:1.45;margin:10px 0 0}
.offedit a{color:var(--accent);font-weight:600}

/* badges de valeurs */
.vbadges{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.vbadge{font-size:.76rem;font-weight:600;padding:4px 9px;border-radius:8px;display:inline-flex;gap:.35em;align-items:center;line-height:1.3}
.vbadge.good{background:var(--accent-soft);color:var(--accent)}
.vbadge.warn{background:var(--amber-soft);color:var(--amber)}
/* fiche 2 niveaux */
.toggle{margin-top:2px;background:var(--surface-2);border:1px solid var(--hair);border-radius:10px;color:var(--ink-soft);font:inherit;font-size:.84rem;font-weight:600;padding:10px;cursor:pointer;width:100%}
.toggle:hover{color:var(--ink);border-color:var(--accent)}
.details{display:none;flex-direction:column;gap:14px}
.details.open{display:flex}

/* valeurs nutritionnelles + ingrédients */
.nutritable{width:100%;border-collapse:collapse;font-size:.9rem}
.nutritable th{text-align:left;font-weight:600;color:var(--ink-soft);font-size:.82rem;padding:0 0 8px;border-bottom:1px solid var(--hair)}
.nutritable .nuserv{font-weight:400;opacity:.8}
.nutritable td{padding:7px 0;border-bottom:1px solid var(--hair)}
.nutritable td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.nutritable tr.sub td:first-child{padding-left:16px;color:var(--ink-soft);font-weight:400}
.nutritable tr.sub td{border-bottom:1px dotted var(--hair)}
.nutritable tr.sub2 td:first-child{padding-left:30px;font-size:.94em;opacity:.9}
.ingr .ingh{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.sugleg{font-weight:400;font-size:.76rem;color:var(--ink-soft)}
.ingr mark.sug{background:color-mix(in srgb,var(--sc-orange) 24%,transparent);color:inherit;padding:0 3px;border-radius:4px;font-weight:600}
.nutritable tr.micoh td{padding:12px 0 6px;font-weight:700;color:var(--accent);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--hair)}
.ingr .ingh{font-weight:700;font-size:.86rem;margin-bottom:4px}
.ingr p{font-size:.86rem;line-height:1.5;color:var(--ink-soft);margin:0}
.ingr .ingna{font-style:italic;opacity:.85}
.addl{margin-top:12px}
.addul{margin:4px 0 0;padding-left:18px;list-style:disc}
.addul li{font-size:.84rem;line-height:1.5;color:var(--ink-soft);margin:2px 0}
.addul em{font-style:normal;font-weight:600;font-size:.72rem;padding:1px 7px;border-radius:7px;margin-left:5px;white-space:nowrap}
.addul em.adv{background:color-mix(in srgb,var(--sc-orange) 22%,transparent);color:var(--sc-orange)}
.addul em.adp{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}

/* recommandations */
#reco{display:flex;flex-direction:column;gap:8px;margin-top:4px}
#reco:empty{display:none}
.recoh{font-size:.84rem;font-weight:600;color:var(--ink-soft);padding:4px 2px 0}
.recocard{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:10px 12px;cursor:pointer;text-align:left;font:inherit;box-shadow:var(--shadow)}
.recocard:hover{border-color:var(--accent)}
.recocard img,.recocard .rph{width:40px;height:40px;border-radius:9px;object-fit:cover;background:var(--surface-2);border:1px solid var(--hair);flex:0 0 auto;display:grid;place-items:center;font-size:1.1rem}
.recname{flex:1;min-width:0;font-size:.9rem;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recnote{font-family:"Fraunces",serif;font-weight:900;font-size:1.15rem;font-variant-numeric:tabular-nums;flex:0 0 auto}
.recnote i{font-style:normal;font-size:.66rem;color:var(--ink-soft);font-weight:600}

/* METHODO */
.doc{background:var(--surface);border:1px solid var(--hair);border-radius:18px;padding:20px;font-size:.92rem;line-height:1.6}
.doc h3{font-family:"Fraunces",serif;font-size:1.15rem;margin:14px 0 6px}
.doc h3:first-child{margin-top:0}
.doc p{color:var(--ink-soft);margin-bottom:8px}
.doc code{background:var(--surface-2);padding:1px 6px;border-radius:6px;font-size:.86em}
.doc ul{margin:0 0 8px 18px;color:var(--ink-soft)}
.mprofils{display:flex;flex-direction:column;gap:8px;margin:4px 0 10px}
.mp{display:flex;flex-direction:column;gap:2px;background:var(--surface-2);border:1px solid var(--hair);border-radius:10px;padding:9px 11px}
.mpn{font-weight:600;color:var(--ink);font-size:.9rem}
.mpw{font-size:.82rem;color:var(--ink-soft);line-height:1.4}

/* bottom nav */
.nav{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(transparent,var(--shell) 30%);padding:10px 16px calc(12px + env(safe-area-inset-bottom))}
.nav .in{max-width:460px;margin:0 auto;display:flex;gap:10px}
.nav .btn{flex:1}

/* ── Pass polish avant lancement : accessibilité & robustesse ── */
/* focus clavier visible partout (sans gêner le clic souris) */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.btn:focus-visible,.pchip:focus-visible,.chip:focus-visible,.recocard:focus-visible,.biolink:focus-visible{outline-offset:3px}
/* cibles tactiles confortables */
.link{min-height:44px;display:inline-flex;align-items:center;padding:0 2px}
.pchip{min-height:40px}
.biolink{min-height:40px;display:inline-flex;align-items:center}
/* respecter la préférence « moins d'animations » (le spinner de chargement reste) */
@media (prefers-reduced-motion:reduce){
  .view{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}
  .spin{animation-duration:1s}
}

/* ── Négatifs / Positifs (F2) : deux groupes lisibles, alertes d'abord ── */
.bsplit{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.bgroup{display:flex;flex-direction:column;gap:5px}
.bgh{font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft)}

/* ── Verdict en un mot (F1) : lisible en une seconde ── */
.verdict{font-family:"Fraunces",serif;font-weight:900;font-size:1.4rem;line-height:1.05;align-self:flex-start}
.verdict.ok{color:var(--accent)}
.verdict.warn{color:var(--amber)}
.verdict.low{color:var(--clay)}
.verdict.na{color:var(--ink-soft)}

/* ── Historique des scans (C4) ── */
#hist{display:flex;flex-direction:column;gap:8px;margin-top:16px;border-top:1px solid var(--hair);padding-top:14px}
#hist .lbl{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.histhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.histclear{background:none;border:0;color:var(--ink-soft);font:inherit;font-size:.76rem;text-decoration:underline;cursor:pointer;padding:4px}
.histclear:hover{color:var(--clay)}
.histhint,.histempty{font-size:.82rem;color:var(--ink-soft);margin:0;line-height:1.45}
.histempty{background:var(--surface-2);border:1px dashed var(--hair);border-radius:12px;padding:12px 14px}
.histup{color:var(--accent);font-weight:600}
.histrow{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.histchip{flex:0 0 auto;width:104px;background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:8px;cursor:pointer;font:inherit;color:var(--ink);display:flex;flex-direction:column;gap:5px;align-items:stretch;text-align:left}
.histchip img,.histchip .hph{width:100%;height:54px;object-fit:contain;border-radius:8px;background:var(--surface-2);display:grid;place-items:center;font-size:1.3rem}
.histn{font-size:.75rem;line-height:1.25;max-height:2.5em;overflow:hidden;font-weight:600}
.histnote{font-family:"Fraunces",serif;font-weight:900;font-size:1rem;font-variant-numeric:tabular-nums}
.histnote.drink{color:var(--wine)}

/* ── L'essentiel animal (A-bis-2) : surface élevage + alimentation ── */
.essentiel{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.essh{font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent)}
.essrow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline}
.essn{font-weight:600;font-size:.9rem;color:var(--ink)}
.essv{font-weight:700;font-size:1rem;white-space:nowrap}.essv i{font-size:.7em;font-style:normal;opacity:.6}
.essd{grid-column:1/2;font-size:.8rem;color:var(--ink-soft);display:flex;align-items:center;gap:.4em;line-height:1.35}
/* Encart « note estimée d'après la filière » (honnêteté sur les produits animaux sans label) */
.estim{font-size:.8rem;line-height:1.5;color:var(--ink-soft);background:var(--panel,#faf6ec);border:1px solid var(--line,#e6ddca);border-left:3px solid var(--gold-line,#c8a96e);border-radius:10px;padding:9px 12px}
.estim b{color:var(--ink)}

/* ── Code œuf (A-bis-1) : la superpuissance, mise en avant ── */
.eggpanel{background:var(--card,#fff);border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);border-radius:12px;padding:11px 13px}
.eggpanel.done{border-style:solid;background:var(--accent-soft)}
.eggh{font-weight:700;font-size:.92rem;color:var(--ink)}
.eggp{font-size:.82rem;color:var(--ink-soft);line-height:1.45;margin:5px 0 9px}
.eggform{margin:0}
.eggok{font-size:.85rem;color:var(--ink);line-height:1.45}
.egglink{background:none;border:none;color:var(--accent);font-weight:600;cursor:pointer;text-decoration:underline;font-size:.85rem;padding:0;min-height:auto}
.eggmsg{font-size:.8rem;color:var(--clay);margin-top:6px}

/* ════════════════════════════════════════════════════════════════════
   SIGNATURE (v35) — accent OR, filets éditoriaux, profondeur, motion doux
   ════════════════════════════════════════════════════════════════════ */

/* marque : point OR au lieu du vert (2e couleur au niveau identité) */
.brand .pt{color:var(--gold-line)}

/* hero éditorial : eyebrow tracké + filet or, titre plus ample */
.eyebrow{display:inline-flex;align-items:center;gap:.55em;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--gold-line);border-radius:2px}
.hero{padding:14px 2px 2px}
.hero h1{font-size:2.4rem;line-height:1;letter-spacing:-.025em}
.hero p{margin-top:12px;max-width:34ch}
.hero::after{content:"";display:block;height:1px;background:linear-gradient(90deg,var(--gold-line),transparent 62%);margin-top:18px;opacity:.7}

/* libellés de section : petit tiret OR en tête */
.demos .lbl,#hist .lbl,.recoh{position:relative;padding-left:16px}
.demos .lbl::before,#hist .lbl::before,.recoh::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:9px;height:1.5px;background:var(--gold-line);border-radius:2px}

/* cartes clés : ombre plus profonde + coin filet or discret */
.scorecard{box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.scorecard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold-line),transparent 55%);opacity:.85}
.scorecard.alco::before{background:linear-gradient(90deg,var(--wine),transparent 55%)}

/* anneau de note : liseré OR extérieur + halo teinté + numéro plus présent */
.ring{box-shadow:0 0 0 1px var(--gold-line) inset, 0 8px 22px -12px var(--c);transition:--pct .95s cubic-bezier(.22,.68,.2,1)}
.ring::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--gold-line);opacity:.35}
.ring b{font-size:2rem}

/* chips essai / reco : liseré or au survol au lieu du vert brut */
.chip:hover,.recocard:hover,.biocard:hover{border-color:var(--gold-line)}

/* ── MOTION (doux, coupé par prefers-reduced-motion) ── */
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.scorecard,.notfound,.doc{animation:riseIn .5s cubic-bezier(.22,.68,.2,1) both}
#reco .recocard{animation:riseIn .45s cubic-bezier(.22,.68,.2,1) both}
#reco .recocard:nth-child(2){animation-delay:.05s}
#reco .recocard:nth-child(3){animation-delay:.1s}
#reco .recocard:nth-child(4){animation-delay:.15s}
.bar>i{transform-origin:left;animation:barGrow .8s cubic-bezier(.22,.68,.2,1) both}
@media (prefers-reduced-motion:reduce){
  .ring{transition:none}
  .scorecard,.notfound,.doc,#reco .recocard,.bar>i{animation:none!important}
}

/* ── Produit introuvable (A5) : rebond, pas une impasse ── */
.notfound{text-align:center;padding:22px 16px 30px;max-width:400px;margin:0 auto}
.nficon{font-size:2rem;margin-bottom:6px}
.notfound h2{font-family:Fraunces,Georgia,serif;font-size:1.25rem;margin:0 0 8px}
.nfp{color:var(--ink-soft);font-size:.9rem;line-height:1.5;margin:0 0 14px}
.nfform{margin:0 auto 12px}
.nfhint{color:var(--ink-soft);font-size:.82rem;line-height:1.45;margin:6px 0 0}
.nfhint a{color:var(--accent);font-weight:600}

/* ════════════════════════════════════════════════════════════════════
   SIGNATURE — RENFORCÉ (v35b) : changements de MASSE, pas juste des filets
   ════════════════════════════════════════════════════════════════════ */
/* grain un poil plus présent */
body::before{opacity:.055}
@media (prefers-color-scheme:dark){ body::before{opacity:.08} }

/* barre du haut : marque plus grande + filet or plein sous la barre */
.bar{border-bottom:1px solid color-mix(in srgb,var(--gold-line) 55%,transparent)}
.brand{font-size:1.6rem}
.brand .pt{color:var(--gold-line)}

/* HERO : titre plus imposant + gros filet or pleine largeur */
.hero h1{font-size:2.7rem}
.eyebrow{font-size:.72rem;color:var(--gold)}
.eyebrow::before{width:34px;height:2px}
.hero::after{height:2px;background:linear-gradient(90deg,var(--gold-line) 0,var(--gold-line) 40%,transparent);opacity:.9;margin-top:20px}

/* PUCES priorités : état actif OR (au lieu du vert) = signature immédiate */
.pchip.on{background:var(--gold-soft);color:var(--gold);border-color:var(--gold-line)}

/* EN-TÊTES de section : gros label sombre + règle or pleine largeur dessous */
.demos .lbl,#hist .lbl{font-size:.82rem;color:var(--ink);letter-spacing:.14em;padding:0 0 9px 0;border-bottom:1.5px solid var(--gold-line)}
.demos .lbl::before,#hist .lbl::before{display:none}
.recoh{padding-left:0}
.recoh::before{display:none}

/* CARTE DE NOTE = le moment fort : fond crème dégradé + cadre or + filet épais */
.scorecard{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1.5px solid color-mix(in srgb,var(--gold-line) 55%,var(--hair));
  border-radius:22px;padding:20px;
}
.scorecard::before{height:4px;opacity:1;background:linear-gradient(90deg,var(--gold-line),color-mix(in srgb,var(--gold-line) 30%,transparent) 60%,transparent)}

/* ANNEAU : plus grand, double liseré or bien visible, chiffre imposant */
.head{gap:18px}
.ring{width:118px;height:118px;box-shadow:0 0 0 2px var(--gold-line) inset,0 12px 28px -12px var(--c)}
.ring::before{width:90px;height:90px}
.ring::after{inset:-7px;border:1.5px solid var(--gold-line);opacity:.55}
.ring b{font-size:2.3rem}

/* VERDICT plus grand */
.verdict{font-size:1.7rem}

/* CARTES d'essai : marqueur or à gauche = rythme éditorial */
.chip{border-left:3px solid var(--gold-line);border-radius:10px 14px 14px 10px}
.chip:hover{border-color:var(--gold-line);background:var(--gold-soft)}

/* bouton principal : garde le vert (identité) mais liseré or subtil au repos */
.btn.primary{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold-line) 40%,transparent)}

/* barre de nav du bas : filet or au-dessus */
.nav .in{border-top:0}
.nav::before{content:"";position:absolute;left:16px;right:16px;top:6px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line),transparent);opacity:.6}
.nav{position:fixed}

/* ════════════════════════════════════════════════════════════════════
   PREMIUM (v35c) — la NOTE reprend sa couleur (vert→rouge), fond profond,
   cartes qui flottent, boutons & champs retravaillés
   ════════════════════════════════════════════════════════════════════ */

/* — ANNEAU : plus d'or, la couleur du score DOMINE (lecture immédiate) — */
.ring{width:120px;height:120px;box-shadow:0 12px 30px -14px var(--c);}
.ring::after{border-color:color-mix(in srgb,var(--c) 45%,transparent);opacity:.5}
/* disque blanc central plus large → le chiffre ne touche plus l'arc coloré */
.ring::before{width:96px;height:96px}
.ring b{color:var(--c);font-size:1.95rem;line-height:1;letter-spacing:-.01em}
.ring b i{font-size:.6rem}
/* piste plus épaisse et bien contrastée pour que l'arc coloré ressorte */
.ring{background:conic-gradient(var(--c) var(--pct),color-mix(in srgb,var(--c) 12%,var(--track)) 0)}

/* — FOND premium : halo chaud discret en haut, teinte du sol un peu plus dense — */
body{
  background:
    radial-gradient(130% 90% at 50% -12%, color-mix(in srgb,var(--gold-soft) 60%,var(--shell)) 0%, transparent 58%),
    var(--shell);
  background-attachment:fixed;
}

/* — CARTES qui flottent au-dessus du sol (profondeur = premium) — */
.scorecard{
  border-radius:24px;
  box-shadow:0 2px 6px rgba(40,32,22,.05),0 34px 64px -30px rgba(40,32,22,.40);
}
@media (prefers-color-scheme:dark){ .scorecard{box-shadow:0 2px 6px rgba(0,0,0,.4),0 34px 64px -26px rgba(0,0,0,.85)} }
.recocard,.biocard{border-radius:16px;box-shadow:0 1px 2px rgba(40,32,22,.04),0 16px 34px -22px rgba(40,32,22,.22)}

/* — BOUTONS retravaillés : relief doux, lift au survol — */
.btn{border-radius:14px;padding:15px 18px;transition:transform .14s cubic-bezier(.22,.68,.2,1),box-shadow .2s ease,background .2s ease}
.btn.primary{
  background:linear-gradient(180deg,#3C9360,#2F7A4D);
  color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18),0 14px 26px -12px rgba(26,70,45,.7);
}
.btn.primary:hover{transform:translateY(-1.5px);filter:none;box-shadow:0 2px 5px rgba(0,0,0,.16),0 20px 34px -12px color-mix(in srgb,var(--accent) 80%,black)}
.btn.primary:active{transform:translateY(0)}
.btn.ghost{background:var(--surface);border:1px solid var(--hair);box-shadow:0 1px 2px rgba(40,32,22,.05)}
.btn.ghost:hover{border-color:var(--gold-line);background:var(--surface-2);transform:translateY(-1px)}

/* — CHAMPS de saisie premium : coins doux, ombre interne, halo or au focus — */
.manual input{border-radius:14px;box-shadow:inset 0 1px 2px rgba(40,32,22,.06)}
.manual input:focus{outline:none;border-color:var(--gold-line);box-shadow:inset 0 1px 2px rgba(40,32,22,.06),0 0 0 3px var(--gold-soft)}

/* — PUCES : pilules avec relief léger — */
.pchip{box-shadow:0 1px 2px rgba(40,32,22,.05)}
.pchip:hover{border-color:var(--gold-line)}

/* — CAMÉRA / cadre scan : coins plus généreux, ombre douce — */
.cam{border-radius:22px;box-shadow:0 2px 6px rgba(40,32,22,.05),0 24px 48px -28px rgba(40,32,22,.30)}

/* — vignette produit un peu plus premium — */
.prod img,.prod .ph{border-radius:16px;box-shadow:0 8px 18px -12px rgba(40,32,22,.4)}

/* — Additifs à surveiller : bouton dépliable + fiches explicatives — */
.addtoggle{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 35%,var(--hair));background:var(--amber-soft)}
.addtoggle:hover{color:var(--amber);border-color:var(--amber)}
.addpanel{gap:10px}
.addrow{background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 28%,transparent);border-radius:12px;padding:10px 12px}
.addn{font-weight:700;font-size:.9rem;color:var(--amber)}
.addr{font-size:.84rem;color:var(--ink-soft);line-height:1.45;margin-top:3px}
.addfoot{font-size:.8rem;color:var(--ink-soft);line-height:1.45;font-style:italic;margin:0}

/* ════════════════════════════════════════════════════════════════════
   ONBOARDING — première ouverture (récolte priorités + valeur + autorité)
   ════════════════════════════════════════════════════════════════════ */
body.onb-open{overflow:hidden}
.onb{position:fixed;inset:0;height:100dvh;z-index:200;background:var(--shell);
  display:flex;align-items:stretch;justify-content:center;overflow:hidden;overscroll-behavior:contain;
  padding:max(14px,env(safe-area-inset-top)) 18px max(14px,env(safe-area-inset-bottom))}
.onb[hidden]{display:none}   /* sinon .onb{display:flex} écrase l'attribut hidden */
.onbcard{position:relative;width:100%;max-width:440px;height:100%;min-height:0;
  display:flex;flex-direction:column;text-align:center}
.onbskip{position:absolute;top:-6px;right:-2px;background:none;border:0;padding:6px 8px;
  font-family:inherit;font-size:.82rem;color:var(--ink-soft);cursor:pointer}
.onbskip:hover{color:var(--ink)}
.onbhead{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 4px;flex:0 0 auto}
.onbmark{width:38px;height:38px;flex:0 0 auto}
.onbname{font-family:Fraunces,Georgia,serif;font-weight:900;font-size:1.45rem;color:var(--ink);letter-spacing:-.01em}
.onbname .pt{color:var(--gold-line)}
/* clavier ouvert : libère de la place pour garder champ + bouton visibles au-dessus du clavier */
body.kbd .onbhead,body.kbd .onbslide .onbicon{display:none}
body.kbd .onbslide{justify-content:flex-start;gap:10px}
.onbslide{display:none;flex:1;min-height:0;overflow-y:auto;flex-direction:column;justify-content:center;gap:12px;padding:8px 2px}
.onbslide.on{display:flex;animation:onbFade .4s ease}
@keyframes onbFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.onbicon{font-size:2.3rem}
.onb h2{font-family:Fraunces,Georgia,serif;font-size:1.55rem;font-weight:600;margin:0;line-height:1.15;color:var(--ink)}
.onbbrand{white-space:nowrap}
.onbbrand i{color:var(--gold-line);font-style:normal}
.onbp{color:var(--ink-soft);font-size:.95rem;line-height:1.55;margin:0 auto;max-width:34ch}
.onbhint{color:var(--ink-soft);font-size:.8rem;margin:0}
/* priorités */
.onbprefs{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:2px 0}
.onbchip{min-height:46px;padding:10px 15px;border-radius:100px;font-family:inherit;font-size:.92rem;
  color:var(--ink);background:var(--surface);border:1.5px solid var(--hair);cursor:pointer;transition:all .15s}
.onbchip:hover{border-color:var(--gold-line)}
.onbchip.on{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold);font-weight:600}
/* démo deux œufs */
.onbeggs{display:flex;gap:12px;justify-content:center;margin-top:4px}
.onbegg{flex:1;max-width:170px;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:16px 12px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
.onbegg b{font-size:.9rem;color:var(--ink)}
.onbegg span{font-size:.8rem;font-weight:700}
.onbnote{font-family:Fraunces,Georgia,serif;font-size:2rem;font-weight:900;line-height:1}
.onbnote i{font-size:.5em;font-style:normal;opacity:.6;font-weight:600}
.onbegg.good .onbnote,.onbegg.good span{color:var(--sc-green)}
.onbegg.bad .onbnote,.onbegg.bad span{color:var(--sc-red)}
.onbegg.good{border:1px solid color-mix(in srgb,var(--sc-green) 26%,transparent)}
.onbegg.bad{border:1px solid color-mix(in srgb,var(--sc-red) 26%,transparent)}
/* autorité */
.onblist{list-style:none;margin:2px 0 0;padding:0;text-align:left;display:flex;flex-direction:column;gap:12px}
.onblist li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;line-height:1.45;color:var(--ink-soft)}
.onblist li span{font-size:1.1rem;line-height:1.3}
.onblist li b{color:var(--ink)}
/* navigation */
.onbnav{display:flex;flex-direction:column;gap:16px;padding-top:10px}
.onbdots{display:flex;gap:7px;justify-content:center}
.onbdot{width:7px;height:7px;border-radius:100px;background:var(--track);transition:all .2s}
.onbdot.on{width:22px;background:var(--gold-line)}
.onbbtns{display:flex;gap:10px}
.onbback{flex:0 0 auto}
.onbnext{flex:1}
@media (prefers-reduced-motion:reduce){.onbslide.on{animation:none}.onbdot{transition:none}}

/* ── Bandeau « Pour toi » : compatibilité personnelle (allergies/régime/surveillance) ── */
.perso{margin:2px 0 4px;border-radius:12px;overflow:hidden;border:1px solid var(--hair);background:var(--surface-2)}
.persoh{font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);padding:8px 12px 2px}
.persorow{font-size:.9rem;line-height:1.4;padding:7px 12px;border-top:1px solid var(--hair);display:flex;align-items:center;gap:6px}
.persorow:first-of-type{border-top:0}
.persorow.danger{color:var(--clay);font-weight:600;background:var(--clay-soft)}
.persorow.warn{color:var(--amber);background:var(--amber-soft)}
.persorow.ok{color:var(--accent)}
.persofoot{font-size:.76rem;line-height:1.4;color:var(--ink-soft);padding:7px 12px;border-top:1px solid var(--hair);font-style:italic}
/* lien « Allergies & préférences » sous les priorités */
.preflink{background:none;border:0;padding:6px 4px;font-family:inherit;font-size:.84rem;color:var(--ink-soft);cursor:pointer;text-decoration:underline;text-underline-offset:2px;flex-basis:100%;text-align:left}
.preflink:hover{color:var(--gold)}
/* onboarding : sous-titre « Je surveille » + liste d'allergies un peu plus compacte */
.onbsub{font-size:.82rem;font-weight:600;color:var(--ink);margin:4px 0 -2px}
.onbwrap{max-height:38vh;overflow-y:auto;padding:2px}
.onbwrap .onbchip,.onbsub~.onbprefs .onbchip{min-height:42px;padding:8px 13px;font-size:.88rem}

/* ── GROSSE ALERTE ALLERGÈNE : premier élément de la fiche, impossible à rater ── */
.allergalert{display:flex;gap:13px;align-items:center;margin:0 0 14px;padding:14px 16px;border-radius:14px;
  background:var(--clay-soft);border:2px solid var(--clay);box-shadow:var(--shadow)}
.aaicon{font-size:1.9rem;line-height:1;flex:0 0 auto}
.aatext{display:flex;flex-direction:column;gap:2px;min-width:0}
.aatext b{font-size:1.12rem;font-weight:700;color:var(--clay);line-height:1.2}
.aatext span{font-size:.84rem;color:var(--ink-soft);line-height:1.35}
/* Rappel produit (RappelConso) : même gravité visuelle que l'allergène */
.rappelalert{display:flex;gap:12px;align-items:flex-start;margin:0 0 12px;padding:12px 14px;border-radius:14px;
  background:var(--clay-soft);border:2px solid var(--clay);box-shadow:var(--shadow)}
.raicon{font-size:1.6rem;line-height:1;flex:0 0 auto}
.horsligne{margin:0 0 12px;padding:10px 14px;border-radius:14px;font-size:.9rem;
  background:var(--track);border:1px solid var(--line, rgba(0,0,0,.12))}
.ratext{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:.82rem;color:var(--ink-soft);line-height:1.35}
.ratext b{font-size:1.05rem;font-weight:700;color:var(--clay);line-height:1.2}
.ratext .ralots{color:var(--ink);font-weight:600}
.ratext a{color:var(--clay);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.rappelpop{position:fixed;left:12px;right:12px;top:calc(12px + env(safe-area-inset-top));z-index:60;max-width:480px;margin:0 auto;
  padding:14px;border-radius:16px;background:var(--surface);border:2px solid var(--clay);box-shadow:0 12px 32px rgba(0,0,0,.22);
  display:flex;flex-direction:column;gap:8px}
.rappelpop[hidden]{display:none}
.rptitle{font-weight:700;color:var(--clay);font-size:1rem}
.rpitem{display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-align:left;padding:9px 11px;border-radius:10px;border:1px solid color-mix(in srgb,var(--clay) 30%,transparent);
  background:var(--clay-soft);font-family:inherit;cursor:pointer;color:var(--ink)}
.rpitem span{font-weight:600;font-size:.9rem}
.rpitem em{grid-column:1;font-style:normal;font-size:.78rem;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rpitem b{grid-column:2;grid-row:1/3;align-self:center;color:var(--clay);font-size:.85rem}
.rpok{align-self:flex-end;background:none;border:0;font-family:inherit;font-size:.88rem;color:var(--ink-soft);cursor:pointer;padding:6px 4px;text-decoration:underline}
/* Profils famille (panneau priorités & allergies) */
.famhint{font-weight:400;text-transform:none;letter-spacing:0;opacity:.7}
.famtab.famplus{border-style:dashed}
.famadd{display:flex;gap:8px;margin:2px 0 4px}
.famadd[hidden]{display:none}
/* le panneau grandit avec la famille : puces plus compactes, rangées jamais écrasées */
.prefscard .onbicon{display:none}
.prefscard .onbprefs{flex-shrink:0}
.prefscard .onbprefs{gap:6px;justify-content:flex-start;max-height:none;overflow:visible}
.prefscard .onbprefs .onbchip,.prefscard .pchip{min-height:34px;padding:5px 11px;font-size:.82rem}
.prefscard .onbp{font-size:.82rem;margin-bottom:4px}
.prefscard .onbslide{gap:4px}
.prefscard .onbsub{margin:6px 0 0}
.prefscard #prefsDone{margin-top:8px!important}
.prefscard .onbslide:has(.famadd:not([hidden])) :is(.onbp,.onbhint){display:none}
.prefscard .onbhint{font-size:.76rem;margin-top:4px}
.famadd input{flex:1;min-width:0;min-height:44px;padding:8px 12px;border-radius:10px;border:1px solid var(--gold-line);font-family:inherit;font-size:.95rem;background:transparent;color:var(--ink)}
.famremove{align-self:flex-start;background:none;border:0;padding:2px;font-family:inherit;font-size:.82rem;color:var(--clay);cursor:pointer;text-decoration:underline}
.famremove[hidden]{display:none}

/* ── Tableau de bord HEBDOMADAIRE (Premium) sur l'accueil ── */
.semaine{background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:14px 15px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.bilanmore{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;padding:12px;background:var(--surface);border:1px solid var(--hair);border-radius:14px;font:inherit;font-size:.92rem;font-weight:600;color:var(--ink);cursor:pointer;box-shadow:var(--shadow)}
.bilanmore:hover{border-color:var(--gold-line);background:var(--gold-soft)}
.bilanmore .bmchev{color:var(--ink-soft);font-size:.8rem}
#bilanDetails{margin-top:12px;display:flex;flex-direction:column;gap:12px}
#bilanDetails[hidden]{display:none}
.semaine::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold-line),transparent 60%);opacity:.85}
.smh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px}
.smtitle{font-weight:700;font-size:.95rem;color:var(--ink)}
.smrange{font-size:.76rem;color:var(--ink-soft)}
.smtag{font-size:.72rem;font-weight:700;color:var(--gold);background:var(--gold-soft);padding:2px 8px;border-radius:100px;white-space:nowrap}
.smlock,.smempty{font-size:.85rem;line-height:1.5;color:var(--ink-soft);margin:6px 0 2px}
.smlock .histup,.smempty .histup{color:var(--gold);font-weight:600}
.semaine.locked{background:var(--surface-2)}
.smstats{display:flex;gap:10px;margin:10px 0 12px}
.smstat{flex:1;display:flex;flex-direction:column;gap:1px}
.smstat b{font-family:Fraunces,Georgia,serif;font-size:1.7rem;font-weight:900;line-height:1;color:var(--ink)}
.smstat b.smbad{color:var(--clay)}
.smstat span{font-size:.74rem;color:var(--ink-soft);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.smup{color:var(--sc-green);font-weight:700}
.smdown{color:var(--clay);font-weight:700}
.smflat{color:var(--ink-soft);font-weight:600}
.smbars{display:flex;gap:6px;align-items:flex-end;height:46px;padding:2px 0}
.smday{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.smday i{width:100%;max-width:22px;background:var(--track);border-radius:4px;min-height:3px;transition:height .3s}
.smday.has i{background:var(--gold-line)}
.smday.today i{background:var(--accent)}
.smday span{font-size:.66rem;color:var(--ink-soft)}
.smday.today span{color:var(--accent);font-weight:700}
.smnudge{font-size:.8rem;color:var(--ink-soft);margin:10px 0 0;text-align:center;font-style:italic}
@media (prefers-reduced-motion:reduce){.smday i{transition:none}}

/* Option 3 : teaser Premium dans le tableau hebdo gratuit */
.smstat.wide{flex:0 1 auto}
.smpremium{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px;padding:9px 11px;border-radius:10px;
  background:var(--gold-soft);font-size:.82rem;line-height:1.35;color:var(--ink-soft)}
.smpremium b{color:var(--ink);font-weight:600}
.smpremium .histup{color:var(--gold);font-weight:700}

/* Mention « 1re semaine offerte » (dégustation gratuite du bilan complet) */
.smdeco{font-size:.78rem;line-height:1.4;color:var(--gold);background:var(--gold-soft);border-radius:9px;padding:7px 10px;margin:9px 0 0;text-align:center}

/* ── Bilan complet enrichi (répartition, faits marquants, évolution, impact) ── */
.smrepart{margin:2px 0 4px}
.smrepbar{display:flex;gap:2px;height:8px;border-radius:5px;overflow:hidden;margin-bottom:5px}
.smrepbar i{display:block;min-width:3px}
.smrepbar i.g{background:var(--sc-green)}.smrepbar i.m{background:var(--sc-lime)}.smrepbar i.r{background:var(--sc-red)}
.smreplg{font-size:.75rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.smreplg span{font-size:.7em}.smreplg .g{color:var(--sc-green)}.smreplg .m{color:var(--sc-lime)}.smreplg .r{color:var(--sc-red)}
.smsection{border-top:1px solid var(--hair);margin-top:11px;padding-top:9px;display:flex;flex-direction:column;gap:7px}
.smrow{display:flex;align-items:center;gap:8px;font-size:.85rem}
.smk{color:var(--ink-soft);white-space:nowrap;flex:0 0 auto}
.smv{flex:1;min-width:0;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.smn{font-weight:700;flex:0 0 auto;font-variant-numeric:tabular-nums}
.smn2{color:var(--ink-soft);flex:0 0 auto}
.smevo{border-top:1px solid var(--hair);margin-top:11px;padding-top:9px}
.smevo .smk{display:block;margin-bottom:5px}
.smspark{width:100%;height:34px;display:block}
.smevonote{font-size:.78rem;color:var(--ink-soft);margin:0}
.smimpact{border-top:1px solid var(--hair);margin-top:11px;padding-top:9px;font-size:.8rem;color:var(--ink-soft);text-align:center}
.smimpact b{color:var(--ink);font-weight:700}

/* ════════════════════════════════════════════════════════════════════
   v46 — Fiche ZÉRO-SCROLL (résumé + sous-vues), favoris, onboarding 10,
   paywall, animation de note (count-up)
   ════════════════════════════════════════════════════════════════════ */

/* — résumé de la fiche : compact, tient dans l'écran — */
.resmain{display:flex;flex-direction:column;gap:12px}
.prod.compact{position:relative;padding:2px 2px}
.prod.compact h2{font-size:1.05rem}
.favbtn{margin-left:auto;flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--hair);
  background:var(--surface);color:var(--gold-line);font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:all .15s}
.favbtn:hover{border-color:var(--gold-line);background:var(--gold-soft)}
.favbtn.on{color:var(--gold);background:var(--gold-soft);border-color:var(--gold-line)}

/* — boutons de forage (drill-down) — */
.drills{display:flex;flex-direction:column;gap:8px}
.drill{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);
  border:1px solid var(--hair);border-radius:14px;padding:12px 15px;cursor:pointer;font:inherit;color:var(--ink);
  box-shadow:0 1px 2px rgba(40,32,22,.04),0 14px 30px -24px rgba(40,32,22,.3)}
.drill:hover{border-color:var(--gold-line);transform:translateY(-1px)}
.drill .dic{font-size:1.2rem;flex:0 0 auto}
.drill .dlbl{flex:1;min-width:0;font-weight:600;font-size:.94rem;display:flex;flex-direction:column;line-height:1.2}
.drill .dlbl em{font-style:normal;font-weight:400;font-size:.76rem;color:var(--ink-soft);margin-top:1px}
.drill .dchev{flex:0 0 auto;font-size:1.5rem;color:var(--gold-line);line-height:1}

/* — sous-vue plein écran avec bouton retour — */
.ressub{display:flex;flex-direction:column;gap:12px;animation:riseIn .28s ease both}
.subhead{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:2;
  background:linear-gradient(var(--shell) 72%,transparent);padding:2px 0 6px}
.subback{background:var(--surface);border:1px solid var(--hair);border-radius:10px;padding:9px 13px;font:inherit;font-weight:600;font-size:.86rem;color:var(--ink);cursor:pointer}
.subback:hover{border-color:var(--gold-line)}
.subtitle{font-family:Fraunces,serif;font-weight:600;font-size:1.1rem}
.subbody{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--hair);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.subbody .rows{border-top:0;padding-top:0}
.rows.nolead{border-top:0;padding-top:0}
.submuted{font-size:.88rem;color:var(--ink-soft);line-height:1.5;margin:0}

/* — favoris « Mes produits » : réutilise le rail d'historique — */
#favoris{display:flex;flex-direction:column;gap:8px;margin-top:16px;border-top:1px solid var(--hair);padding-top:14px}
#favoris:empty{display:none;margin:0;border:0;padding:0}
#favoris .lbl{font-size:.82rem;color:var(--ink);letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:0 0 9px 0;border-bottom:1.5px solid var(--gold-line)}

/* — animation count-up : chiffres tabulaires (évite le tremblement de largeur) — */
.ring .rnum{font-variant-numeric:tabular-nums}

/* ── ONBOARDING v46 : champ, choix uniques, toggle, démo, paylist ── */
.onbinput{width:100%;max-width:320px;margin:4px auto 0;padding:14px 16px;border-radius:14px;
  border:1.5px solid var(--hair);background:var(--surface);color:var(--ink);font:inherit;font-size:1rem;text-align:center}
.onbinput:focus{outline:none;border-color:var(--gold-line);box-shadow:0 0 0 3px var(--gold-soft)}
.onbchoices{display:flex;flex-direction:column;gap:10px;margin:4px auto 0;width:100%;max-width:360px}
.onbchoice{display:flex;flex-direction:column;gap:2px;text-align:left;padding:13px 16px;border-radius:14px;
  border:1.5px solid var(--hair);background:var(--surface);cursor:pointer;font:inherit;color:var(--ink);transition:all .15s}
.onbchoice b{font-size:.98rem}
.onbchoice span{font-size:.82rem;color:var(--ink-soft);line-height:1.35}
.onbchoice:hover{border-color:var(--gold-line)}
.onbchoice.on{border-color:var(--gold-line);background:var(--gold-soft)}
.onbchoice.on b{color:var(--gold)}
.onbtoggle{display:inline-flex;align-items:center;gap:12px;margin:6px auto 0;padding:11px 18px;border-radius:100px;
  border:1.5px solid var(--hair);background:var(--surface);cursor:pointer;font:inherit;font-size:.95rem;color:var(--ink)}
.onbtoggle .otk{width:46px;height:27px;border-radius:100px;background:var(--track);position:relative;transition:background .2s;flex:0 0 auto}
.onbtoggle .otk::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.onbtoggle.on{border-color:var(--gold-line);background:var(--gold-soft);color:var(--gold);font-weight:600}
.onbtoggle.on .otk{background:var(--accent)}
.onbtoggle.on .otk::after{transform:translateX(19px)}
.onbdemo{margin-top:6px;min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.onbreveal{padding:14px 22px;border-radius:100px;border:1.5px dashed var(--gold-line);background:var(--surface);
  color:var(--gold);font:inherit;font-weight:600;font-size:.98rem;cursor:pointer}
.onbreveal:hover{background:var(--gold-soft)}
.onbdemocard{display:flex;align-items:center;gap:16px;justify-content:center;background:var(--surface);
  border:1px solid var(--hair);border-radius:18px;padding:16px;box-shadow:var(--shadow-lg);animation:riseIn .4s ease both}
.onbdemometa{display:flex;flex-direction:column;gap:5px;text-align:left}
.onbdemometa small{color:var(--ink-soft);font-size:.84rem}
.onbdemoaxes{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.onbdemoaxes span{font-size:.75rem;font-weight:600;background:var(--surface-2);border:1px solid var(--hair);border-radius:8px;padding:3px 8px;color:var(--ink-soft)}
.onbdemoaxes b{color:var(--sc-green)}
/* intro paywall (onboarding) */
.paylist{display:flex;flex-direction:column;gap:10px;margin:4px auto 0;width:100%;max-width:360px;text-align:left}
.payrow{display:flex;flex-direction:column;gap:2px;padding:12px 15px;border-radius:14px;border:1px solid var(--hair);background:var(--surface)}
.payrow .payh{font-weight:700;font-size:.9rem}
.payrow span:not(.payh){font-size:.83rem;color:var(--ink-soft);line-height:1.4}
.payrow.prem{border-color:var(--gold-line);background:var(--gold-soft)}
.payrow.prem .payh{color:var(--gold)}
.paybul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.paybul li{font-size:.82rem;color:var(--ink-soft);line-height:1.35}
.payrow.prem .paybul li{color:var(--ink)}
/* panneau préférences santé : contenu aligné en haut, défilable */
.prefscard{min-height:auto;text-align:left}
.prefscard .onbslide{text-align:left;align-items:stretch}
.prefscard h2,.prefscard .onbp{text-align:left}

/* ── VUE PREMIUM / PAYWALL ── */
.paycard{display:flex;flex-direction:column;gap:12px}
.paycol{background:var(--surface);border:1px solid var(--hair);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow)}
.paycol.prem{border:1.5px solid var(--gold-line);background:linear-gradient(180deg,var(--surface),var(--gold-soft))}
.paycolh{font-family:Fraunces,serif;font-weight:700;font-size:1.15rem;margin-bottom:8px}
.paycol.prem .paycolh{color:var(--gold)}
.payfeat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.payfeat li{font-size:.9rem;color:var(--ink-soft);line-height:1.4}
.payfeat li b{color:var(--ink)}
.payinfo{font-size:.84rem;color:var(--ink-soft);line-height:1.5;background:var(--surface-2);border:1px solid var(--hair);border-radius:12px;padding:11px 13px}

/* --- Offres (graine + paywall de perte) --- */
.offres{display:flex;flex-direction:column;gap:8px;margin-top:4px;text-align:left}
.offre{display:flex;flex-direction:column;gap:2px;width:100%;background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:11px 14px;cursor:pointer;font:inherit;color:var(--ink)}
.offre:active{transform:scale(.99)}
.offre.best{border:1.5px solid var(--gold-line);background:linear-gradient(180deg,var(--surface),var(--gold-soft))}
.offl{font-size:.9rem;font-weight:600}
.offp{font-size:1.3rem;font-weight:700;line-height:1.1}
.offp small{font-size:.8rem;font-weight:500;color:var(--ink-soft)}
.offtag{font-size:.78rem;color:var(--gold);font-weight:600}
.offrow{display:flex;gap:8px}
.offrow .offre{flex:1}
.offrow .offp{font-size:1.05rem}
.offtrial{font-size:.84rem;color:var(--accent);background:var(--surface-2);border-radius:10px;padding:8px;text-align:center;margin:10px 0 0}
.lossbilan{display:flex;gap:8px;justify-content:center;margin:4px 0 2px}
.lossbilan span{background:var(--surface-2);border-radius:10px;padding:8px 10px;font-size:.78rem;color:var(--ink-soft)}
.lossbilan b{color:var(--ink);font-size:1.05rem;font-weight:700}

/* --- Barre de test (DEV uniquement, injectée en JS sur localhost) --- */
#devbar{position:fixed;left:8px;bottom:8px;z-index:9999;display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  background:rgba(20,18,12,.9);color:#fff;border-radius:10px;padding:6px 8px;font-size:.72rem;
  font-family:system-ui,sans-serif;max-width:94vw;box-shadow:0 4px 14px rgba(0,0,0,.3)}
#devbar b{color:#D8BE86;letter-spacing:.05em}
#devbar button{background:#2F7A4D;color:#fff;border:0;border-radius:7px;padding:5px 8px;font-size:.72rem;cursor:pointer}
#devbar button[data-a="reset"]{background:#8a4a2e}
#devbar button[data-a="hide"]{background:#555}

/* --- Avis après bilan complet --- */
.smavis{display:block;width:100%;margin-top:10px;background:var(--surface-2);border:1px solid var(--gold-line);border-radius:12px;padding:10px;font:inherit;font-size:.86rem;color:var(--gold);cursor:pointer}
.smavis:hover{background:var(--gold-soft)}
.smavismerci{margin:10px 0 0;text-align:center;font-size:.86rem;color:var(--gold);font-weight:600}

/* FIX : l'attribut hidden doit primer sur display:flex (sinon toujours visible) */
.onbdemocard[hidden]{display:none}
.resmain[hidden]{display:none}
.ressub[hidden]{display:none}

/* v47 — signal « nourrissant » (persona « bien rassasié ») */
.satiete{font-size:.85rem;line-height:1.45;padding:9px 12px;border-radius:10px;border:1px solid var(--hair);background:var(--surface-2)}
.satiete.good{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 26%,transparent);color:var(--ink)}
.satiete.warn{background:var(--amber-soft);border-color:color-mix(in srgb,var(--amber) 26%,transparent);color:var(--ink)}
.satiete.low{background:var(--surface-2);color:var(--ink-soft)}
.satiete b{color:var(--ink)}
.satiete .satnote{display:block;font-size:.76rem;color:var(--ink-soft);margin-top:1px}

/* v47 — compactage de la fiche résumé pour tenir SANS scroll même avec les blocs
   optionnels (nourrissant, essentiel animal, encart estimation…) */
.resmain{gap:9px}
.resmain .scorecard{padding:15px;gap:10px;border-radius:20px}
.resmain .head{gap:14px}
.resmain .ring{width:106px;height:106px}
.resmain .ring::before{width:84px;height:84px}
.resmain .ring b{font-size:1.75rem}
.resmain .axnote{font-size:.74rem;line-height:1.35}
/* forage en grille 2×2 : 2 lignes au lieu de 4 → gain de hauteur (zéro scroll) */
.resmain .drills{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.resmain .drill{padding:11px 12px;gap:9px;min-height:52px}
.resmain .drill .dlbl{font-size:.86rem;line-height:1.15}
.resmain .drill .dic{font-size:1.05rem}
.resmain .drill .dchev{display:none}
.resmain .satiete{padding:7px 11px}
.resmain .satiete .satnote{display:inline;margin-left:.35em;font-size:.78rem}
.resmain .essentiel{padding:8px 11px;gap:6px}
.resmain .estim{padding:8px 11px}

/* v47 — compactage œuf + essentiel pour tenir sans scroll */
.eggkey{display:block;font-weight:400;font-size:.74rem;color:var(--ink-soft);margin-top:1px}
.resmain .eggpanel{padding:9px 12px}
.resmain .eggh{font-size:.88rem}
.resmain .essh{font-size:.68rem}
.resmain .essrow{gap:0 10px}
.resmain .essn{font-size:.86rem}
.resmain .essd{font-size:.75rem;line-height:1.25}
.resmain .essv{font-size:.95rem}

/* v47 — bandeau d'axes compact (quand « L'essentiel » est présent) */
.axesmini{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--hair);border-radius:12px;padding:8px 10px}
.axm{display:inline-flex;align-items:center;gap:4px;font-size:.9rem;line-height:1}
.axm b{font-family:"Fraunces",serif;font-weight:900;font-size:1rem;font-variant-numeric:tabular-nums}
.axm.prio{position:relative}
.axm.prio::after{content:"★";color:var(--gold);font-size:.6rem;margin-left:1px}
.axmleg{margin-left:auto;font-size:.66rem;color:var(--ink-soft);font-weight:600}

/* v47 — derniers pixels pour l'œuf (eggpanel + gap) */
.resmain .scorecard{gap:9px}
.resmain .eggpanel{padding:8px 11px}
.eggmsg:empty{display:none}
.resmain .eggform{margin-top:6px}

.resmain{gap:7px}

/* ── Bouton « ajouter à ma liste » (fiche) ── */
.listbtn{margin-left:8px;flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--hair);
  background:var(--surface);font-size:1.25rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:all .15s;filter:grayscale(.4)}
.listbtn:hover{border-color:var(--accent);background:var(--accent-soft);filter:none}
.listbtn.on{background:var(--accent-soft);border-color:var(--accent);filter:none}
.sharebtn{margin-left:8px;flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--hair);background:var(--surface);cursor:pointer;display:grid;place-items:center;color:var(--ink-soft);transition:all .15s}
.sharebtn svg{width:19px;height:19px}
.sharebtn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.sharebtn:disabled{opacity:.5;cursor:default}
.nftoast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);background:var(--ink,#1C1917);color:#fff;padding:13px 20px;border-radius:14px;font-size:.92rem;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);opacity:0;transition:opacity .3s,transform .3s;z-index:300;max-width:90vw;text-align:center}
.nftoast.show{opacity:1;transform:translate(-50%,0)}
/* ── Liste de courses (accueil) ── */
.listitems{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.listitem{display:flex;align-items:center;gap:10px;padding:6px 2px;border-bottom:1px solid var(--hair)}
.listitem:last-child{border-bottom:0}
.listcheck{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:2px solid var(--hair);background:var(--surface);
  color:var(--accent);font-size:.9rem;font-weight:800;cursor:pointer;display:grid;place-items:center;transition:all .15s}
.listcheck:hover{border-color:var(--accent)}
.listitem.done .listcheck{background:var(--accent);border-color:var(--accent);color:#fff}
.listname{flex:1;min-width:0;text-align:left;background:none;border:0;padding:0;font:inherit;color:var(--ink);cursor:pointer}
.listname span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listitem.done .listname{color:var(--ink-soft);text-decoration:line-through}
.listitem .histnote{flex:0 0 auto;font-weight:700}
.listitem.done .histnote{opacity:.4}
/* Onboarding : étape famille */
.onbfamadd{max-width:340px;width:100%;margin:2px auto 0}
.onbfamadd input{min-height:48px}
#onbFamTabsAll .onbchip{min-height:36px;padding:6px 13px;font-size:.86rem}
.famlbl{align-self:center;font-size:.82rem;font-weight:600;color:var(--gold)}

/* Prix partagés par la communauté (sous la carte de note) */
.prixbox{background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;margin-top:12px}
.pxhead{font-weight:700;font-size:.95rem}
.pxbest{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 10px;background:var(--accent-soft);border-radius:12px;padding:10px 12px}
.pxbest span{font-size:.78rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.pxbest b{grid-row:span 2;font-size:1.5rem;color:var(--accent);font-variant-numeric:tabular-nums}
.pxbest small{font-size:.84rem;color:var(--ink)}
.pxlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pxlist li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--hair);font-size:.88rem}
.pxlist li span{display:flex;flex-direction:column;min-width:0}
.pxlist small{color:var(--ink-soft);font-size:.75rem}
.pxlist b{font-variant-numeric:tabular-nums;white-space:nowrap}
.pxnote,.pxvide{margin:0;font-size:.8rem;color:var(--ink-soft);line-height:1.4}
.pxvide{font-size:.86rem;color:var(--ink)}
.pxbtn{align-self:flex-start;font:inherit;font-weight:600;font-size:.88rem;padding:8px 14px;border-radius:99px;border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer}
.pxform{display:flex;flex-direction:column;gap:6px}
.pxform label{font-size:.8rem;font-weight:600;color:var(--ink-soft);margin-top:4px}
.pxform input,.pxform select{font:inherit;font-size:1rem;padding:10px 12px;border-radius:10px;border:1px solid var(--hair);background:var(--surface-2);color:var(--ink);width:100%;box-sizing:border-box}
.pxeur{display:flex;align-items:center;gap:8px}
.pxeur input{max-width:9em;font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums}
.pxeur span{font-size:1.2rem;font-weight:700}
.pxform .pxhp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.pxsend{margin-top:8px;font:inherit;font-weight:700;padding:12px;border-radius:12px;border:0;background:var(--accent);color:var(--surface);cursor:pointer}
.pxsend:disabled{opacity:.6}
.pxmsg{margin:0;font-size:.82rem;color:var(--clay);min-height:1em}
.pxmerci{margin:0;font-size:.86rem;font-weight:600;color:var(--accent)}
.pxbtn:focus-visible,.pxsend:focus-visible,.pxform input:focus-visible,.pxform select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pxall{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;font:inherit;font-weight:600;font-size:.9rem;padding:10px 12px;border-radius:12px;border:1px solid var(--hair);background:var(--surface-2);color:var(--ink);cursor:pointer;text-align:left}
.pxall:focus-visible,.pxsig:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pxliste{display:flex;flex-direction:column;gap:6px}
.pxliste h4{margin:6px 0 0;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.pxliste .pxlist li span{flex:1}
.pxsig{font:inherit;font-size:.72rem;padding:3px 8px;border-radius:99px;border:1px solid var(--hair);background:transparent;color:var(--ink-soft);cursor:pointer;white-space:nowrap}
.pxnote a{color:var(--accent)}