/* =====================================================================================================================
   Pinch · version 50 · styles de « Duo Éco » (Semaine Zéro-Gaspillage, Premium)
   Chargé par public/index.html juste après les styles du site : il en reprend les variables (--carbon, --paper, --mint,
   --sun, --ember, --mist, --sky, --r-pill, --r-card, --spring, --f-display) et suit le mode sombre (data-theme="dark").
   1. la carte et ses listes (versions 44 à 49, déplacées ici telles quelles)
   2. version 50 : bandeau à barre verte, badge du poids sauvé, « Finir le pot », cible, appoints, 3 plats au plus, Drive
   3. versions 51-52 : les créneaux libres du planning (un plat par créneau, cochés d'office, midi / soir)
   4. version 53 : archétype, « Appoint malin », calories calculées, assaisonnement, fonds de placard
   5. version 54 : badges « Lunchbox Solo (1 part) » / « Plat Familial (N parts) », « Pour N personnes » dans la recette
   ===================================================================================================================== */

/* ---------- 1. la carte (versions 44 à 49) ---------- */
.duo{margin-top:clamp(18px,2.4vw,32px);max-width:780px}
.duo-k{display:inline-block;margin-bottom:10px;padding:5px 11px;border:1px solid var(--edge,var(--carbon));border-radius:var(--r-pill);background:var(--mint);font-weight:700;font-size:11px;line-height:1.1;letter-spacing:.032em;text-transform:uppercase;rotate:-2deg}
.duo-body{display:grid;gap:16px;padding-top:16px}
.duo-body>*{min-width:0}
.duo-l{margin-bottom:8px;font-weight:700;font-size:12px;letter-spacing:.032em;text-transform:uppercase}
.duo-chips{display:flex;flex-wrap:wrap;gap:6px}
.duo-chip{display:inline-flex;align-items:baseline;gap:6px;padding:7px 12px;border:1px solid var(--edge,var(--carbon));border-radius:var(--r-pill);background:var(--sun);font-weight:700;font-size:13px;line-height:1.1}
.duo-chip small{font-weight:500;font-size:12px}
.duo-add{width:100%;min-height:54px;padding:12px 18px;white-space:normal;line-height:1.25;text-align:center}
.duo-rec{border-top:1px dashed var(--edge,var(--carbon));padding-top:12px}
.duo-rec summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;font-weight:700;cursor:pointer;list-style:none}
.duo-rec summary::-webkit-details-marker{display:none}
.duo-rec summary::after{content:"+";display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--edge,var(--carbon));border-radius:50%;font-weight:900;transition:rotate .35s var(--spring)}
.duo-rec[open] summary::after{rotate:45deg}
.duo-ings{display:grid;margin:6px 0 14px}
.duo-ings li{display:flex;align-items:baseline;gap:8px;padding:7px 0;border-bottom:1px dotted var(--edge,var(--carbon));font-size:15px;line-height:1.25}
.duo-ings li b{font-weight:700;white-space:nowrap;margin-left:auto;font-variant-numeric:tabular-nums;text-align:right}
.duo-ings li>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
.duo-ings li b small{display:block;max-width:min(230px,48vw);margin:2px 0 0 auto;white-space:normal;font-weight:500;font-size:12px;line-height:1.25}
.duo-role{flex:none;padding:3px 8px;border:1px solid var(--edge,var(--carbon));border-radius:var(--r-pill);background:var(--c,var(--paper));font-weight:700;font-size:11px;line-height:1.1}
.duo-steps{display:grid;gap:8px;padding-left:22px;list-style:decimal;font-size:15px;line-height:1.4}
.duo-wait{display:flex;align-items:center;gap:12px;font-weight:700}
.duo-dots{display:inline-flex;gap:5px}
.duo-dots i{width:9px;height:9px;border:1px solid var(--edge,var(--carbon));border-radius:50%;background:var(--mint);animation:duodot 1s ease-in-out infinite}
.duo-dots i:nth-child(2){animation-delay:.15s;background:var(--sun)}
.duo-dots i:nth-child(3){animation-delay:.3s;background:var(--lav)}
@keyframes duodot{50%{translate:0 -6px}}
@media (prefers-reduced-motion:reduce){.duo-dots i{animation:none}}
.duo .linkmsg:empty{display:none}
/* version 47 : Semaine Zéro-Gaspillage */
.zg-kept{margin-top:8px;font-size:13px}
.zg-list{display:grid;gap:10px}
.zg-it{display:grid;gap:6px;padding:12px 14px;border:1px solid var(--edge,var(--carbon));border-radius:var(--r-card);background:var(--paper);transition:background-color .2s}
.zg-it.on{background:var(--sky)}
.zg-it.off{opacity:.6}
.zg-lab{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;cursor:pointer;min-height:44px}
.zg-lab input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.zg-lab .cb{width:26px;height:26px;border-radius:9px}
.zg-lab .cb svg{width:15px;height:15px}
.zg-lab input:checked~.cb{background:var(--mint);scale:1.1;rotate:-6deg}
.zg-lab input:checked~.cb svg{scale:1}
.zg-lab input:focus-visible~.cb{outline:3px solid var(--violet);outline-offset:3px}
.zg-t{display:grid;gap:3px;min-width:0}
.zg-t b{font-weight:800;font-size:16px;line-height:1.2;overflow-wrap:anywhere}
.zg-t small{font-size:13px;line-height:1.3}
.zg-x{flex:none;padding:5px 10px;border:1px solid var(--edge,var(--carbon));border-radius:var(--r-pill);background:var(--sun);font-weight:800;font-size:12px;line-height:1.1;white-space:nowrap}
.zg-x.zero{background:var(--mint)}
.zg-x.miss{background:var(--ember)}
.zg-warn{font-weight:700}
.zg-rule{margin-bottom:10px;font-size:13px}
.zg-uses{font-size:13px;line-height:1.35;padding-left:38px}
.zg-it .duo-rec{padding-top:6px;margin-left:38px}
.zg-it .duo-rec summary{min-height:36px;font-size:14px}
.zg-cta{display:grid;gap:10px}
.zg-perks{display:grid;gap:8px;font-size:15px;line-height:1.35}
.zg-perks li{display:flex;gap:10px;align-items:baseline}
.zg-perks li::before{content:"✓";flex:none;display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--edge,var(--carbon));border-radius:50%;background:var(--mint);font-weight:900;font-size:12px;line-height:1}
@media (max-width:520px){
  .zg-lab{grid-template-columns:auto minmax(0,1fr)}
  .zg-x{grid-column:2;justify-self:start}
  .zg-uses,.zg-it .duo-rec{padding-left:0;margin-left:0}
}
@supports (color: oklch(from red l c h)) {
  :root[data-theme="dark"] :is(.duo-k,.duo-chip,.duo-role,.duo-dots i,.zg-x,.zg-perks li::before,.zg-lab input:checked~.cb){--carbon:#000;--paper:#fff;--mist:#e9e9e9;color:#000}
}

/* ---------- 2. version 50 ---------- */
:root{--de-green:#2ee87a;--de-green-ink:#000}

/* le bandeau récapitulatif : % de frais consommé, barre verte avec le repère des 95 %, badge du poids sauvé */
.de-band{display:grid;gap:12px;padding:16px 16px 14px;border:1px solid var(--edge,var(--carbon));border-radius:var(--r-card);background:var(--sky)}
.de-band-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.de-band-l{font-weight:700;font-size:12px;letter-spacing:.032em;text-transform:uppercase}
.de-band-pct{font:900 clamp(34px,7vw,44px)/.9 var(--f-display);font-stretch:125%;font-variant-numeric:tabular-nums}
.de-band-pct i{font-style:normal;font-size:.5em;margin-left:2px}
.de-bar{position:relative;height:22px;margin-bottom:14px;border:1px solid var(--edge,var(--carbon));border-radius:var(--r-pill);background:var(--paper);overflow:visible}
.de-bar-fill{position:absolute;inset:0 auto 0 0;display:block;min-width:22px;max-width:100%;border-radius:var(--r-pill);background:var(--de-green);box-shadow:inset 0 0 0 1px var(--carbon);transition:width .6s var(--spring)}
.de-bar-goal{position:absolute;top:-6px;bottom:-6px;width:0;border-left:2px dashed var(--edge,var(--carbon));translate:-1px 0}
.de-bar-goal em{position:absolute;right:4px;top:calc(100% + 3px);font-style:normal;font-weight:800;font-size:11px;line-height:1;white-space:nowrap}
.de-band-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.de-badge{display:inline-block;padding:8px 13px;border:1px solid var(--edge,var(--carbon));border-radius:var(--r-pill);background:var(--de-green);color:var(--de-green-ink);font-weight:800;font-size:14px;line-height:1.15;rotate:-1.5deg}
.de-band-note{font-size:14px;line-height:1.35}
.de-band-note b{font-weight:800}

/* « Finir le pot » : un conseil par produit */
.de-tips ul{display:grid;gap:6px}
.de-tips li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:baseline;padding:10px 12px;border:1px dashed var(--edge,var(--carbon));border-radius:var(--r-card);font-size:14px;line-height:1.35}
.de-tips li::before{content:"";grid-row:span 2;align-self:center;width:12px;height:12px;border:1px solid var(--edge,var(--carbon));border-radius:50%;background:var(--de-green)}
.de-tips li b{font-weight:800}

/* la cible : le reste frais le plus critique */
.de-cible{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-bottom:10px;font-size:14px;line-height:1.35}
.de-cible-k,.de-prio{display:inline-block;padding:4px 9px;border:1px solid var(--edge,var(--carbon));border-radius:var(--r-pill);background:var(--ember);color:#fff;font-weight:800;font-size:11px;line-height:1.1;letter-spacing:.032em;text-transform:uppercase}
.de-prio{justify-self:start;rotate:-2deg}
.de-prio-it{box-shadow:4px 4px 0 var(--carbon)}
.de-count{margin-left:6px;padding:2px 8px;border:1px solid var(--edge,var(--carbon));border-radius:var(--r-pill);background:var(--paper);font-variant-numeric:tabular-nums}
.de-app small{font-size:12px}
.de-full{font-weight:700}
.zg-it.full{opacity:.55}
.zg-it.full .zg-lab{cursor:not-allowed}

/* le bouton « Ajouter au panier Drive » */
.de-drive{gap:10px}
.de-drive svg{flex:none;width:22px;height:22px}

@media (max-width:520px){
  .de-band{padding:14px 12px 12px}
  .de-band-foot{gap:8px}
  .de-badge{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.de-bar-fill{transition:none}}
/* mode sombre : pastilles et badges restent clairs, texte noir (comme les autres pastilles de la carte) */
@supports (color: oklch(from red l c h)) {
  :root[data-theme="dark"] :is(.de-badge,.de-count,.de-tips li::before){--carbon:#000;--paper:#fff;color:#000}
}
:root[data-theme="dark"] .de-bar{background:var(--mist)}
:root[data-theme="dark"] .de-bar-fill{box-shadow:none}

/* ---------- 3. version 51 : les créneaux libres du planning ---------- */
.de-slots{font-size:15px;line-height:1.3}
.de-slots b{font-weight:800}
.de-slot-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:10px}
.de-slot-head .duo-l{margin-bottom:0}
.de-filt{display:flex;flex-wrap:wrap;gap:6px}
.de-filt .pick{min-height:40px;padding:6px 12px;font-size:12px}
.de-when{justify-self:start;padding:3px 9px;border:1px solid var(--edge,var(--carbon));border-radius:var(--r-pill);background:var(--paper);font-weight:800;font-size:11px;line-height:1.1;letter-spacing:.032em;text-transform:uppercase}
.zg-t .de-when+.de-prio{margin-top:2px}
.de-slot.on .de-when{background:var(--de-green);color:var(--de-green-ink)}
.de-rc-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-left:38px}
.de-rc-k{font-weight:700;font-size:12px;letter-spacing:.032em;text-transform:uppercase}
.de-rc{display:inline-flex;align-items:baseline;gap:5px;padding:4px 10px;border:1px solid var(--edge,var(--carbon));border-radius:var(--r-pill);background:var(--de-green);color:var(--de-green-ink);font-size:12px;line-height:1.15}
.de-rc b{font-weight:800}
.de-vides{font-size:13px;margin-top:10px}
@media (max-width:520px){
  .de-rc-row,.de-state{padding-left:0}
}
@supports (color: oklch(from red l c h)) {
  :root[data-theme="dark"] :is(.de-rc,.de-slot.on .de-when){--carbon:#000;color:#000}
}

/* ---------- version 52 : plat proposé (coché d'office), au planning, ou « pas cuisiné » ---------- */
.de-state{padding-left:38px;font-weight:800;font-size:13px}
.de-state-propose{color:var(--carbon);opacity:.75}
.de-propose .de-when{background:var(--sun);color:#000}
.de-off{background:var(--paper);border-style:dashed}
.de-off .zg-t b{text-decoration:line-through;text-decoration-thickness:1px;opacity:.6}
.de-off .zg-t small,.de-off .zg-uses{opacity:.7}
.de-x-off{background:var(--mist)}
@media (max-width:520px){ .de-state{padding-left:0} }
@supports (color: oklch(from red l c h)) {
  :root[data-theme="dark"] :is(.de-propose .de-when,.de-x-off){--carbon:#000;color:#000}
}

/* ---------- version 53 : archétype, appoint malin, nutrition calculée, assaisonnement, fonds de placard ---------- */
.de-tags{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.de-arch,.de-malin{display:inline-block;padding:3px 9px;border:1px solid var(--edge,var(--carbon));border-radius:var(--r-pill);font-weight:700;font-size:11px;line-height:1.1;letter-spacing:.032em;text-transform:uppercase}
.de-arch{background:var(--lav);color:#000}
.de-malin{background:var(--sun);color:#000}
.de-nut{padding-left:38px;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.de-cons-l{margin-top:10px}
.de-cons{display:grid;gap:4px;padding-left:18px;list-style:disc;font-size:14px;line-height:1.35}
.de-rep{margin-top:6px;font-size:13px}
.de-fonds .note{margin-bottom:8px}
@media (max-width:520px){ .de-nut{padding-left:0} }
@supports (color: oklch(from red l c h)) {
  :root[data-theme="dark"] :is(.de-arch,.de-malin){--carbon:#000;color:#000}
}

/* ---------- version 54 : Lunchbox Solo (1 part) ou Plat Familial (N parts) ---------- */
.de-part{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border:1px solid var(--edge,var(--carbon));border-radius:var(--r-pill);font-weight:800;font-size:12px;line-height:1.1;white-space:nowrap}
.de-solo{background:var(--blue);color:var(--carbon)}
.de-fam{background:var(--paper);color:var(--carbon)}
.de-pour{margin:10px 0 6px;font-weight:800;font-size:13px}
