/* =============================================================================
   auGramme — design system, embarqué dans l'application.
   =============================================================================
   Copie fidèle de design/ (tokens + composants ag-*), concaténée dans l'ordre
   de design/styles.css. On embarque plutôt qu'on n'importe : une chaîne
   d'@import coûte un aller-retour par fichier, et sur la tablette du salon le
   premier affichage doit tenir en une requête.
   `price-card.css` est écarté : c'est un composant de la vitrine, pas de l'app.

   NE PAS MODIFIER ICI. Toute retouche se fait dans design/, puis on régénère.
   Ce que l'application lui ajoute vit dans app.css, jamais dans ce fichier.
   ============================================================================= */


/* ---------- design/tokens/colors.css ---------- */
/* auGramme — couleurs.
   Chaque paire texte/fond est annotée de son ratio WCAG 2.1 (police < 24px sauf mention).
   Règle corail : --corail est DÉCORATIF. Il ne porte jamais de texte blanc.
   Le corail porteur de texte est --corail-ink (clair) / --corail (sombre, sur encre foncée). */

:root {
  color-scheme: light;

  /* ---- Fonds ---- */
  --ground:#FBF7F5;      /* fond d'application */
  --surface:#FFFFFF;     /* cartes, feuilles */
  --surface-2:#F5EAEF;   /* tuiles, champs, zones creusées */

  /* ---- Encres ----
     --ink       sur --ground 15.95:1 · sur --surface 16.99:1 · sur --surface-2 14.49:1   AAA
     --muted     sur --ground  5.04:1 · sur --surface  5.37:1 · sur --surface-2  4.57:1   AA
     --muted est un minimum : jamais sous 14px, jamais pour une donnée chiffrée. */
  --ink:#2A1622;
  --muted:#7C6470;
  --line:#EADFE4;        /* filet — non porteur d'information, 1.22:1 assumé */

  /* ---- Prune ----
     blanc sur --prune 10.92:1 · --on-prune sur --prune 9.41:1 · --on-prune-muted sur --prune 5.17:1
     --prune texte sur --ground 10.26:1 · sur --surface 10.92:1
     --prune-deep texte sur --ground 15.40:1 · --on-prune sur --prune-deep 14.13:1 */
  --prune:#5E2A50;
  --prune-deep:#34142B;
  --on-prune:#F7ECE6;
  --on-prune-muted:#CBA9BC;

  /* ---- Corail ----
     --corail        DÉCORATIF. blanc dessus 3.57:1 ÉCHEC · texte sur --ground 3.35:1 ÉCHEC
                     autorisé : aplats, jauges, filets, puces, et --ink dessus (4.76:1 AA).
     --corail-ink    PORTEUR DE TEXTE. blanc dessus 5.48:1 AA · texte sur --ground 5.15:1 AA
                     sur --surface 5.48:1 · sur --surface-2 4.67:1 AA
     --corail-deep   dérivé, survol du bouton primaire. blanc dessus 6.89:1 AA */
  --corail:#DD6149;
  --corail-ink:#B5442F;
  --corail-deep:#9C3A28;

  /* ---- Lavis (aplats translucides, jamais sous du texte clair) ---- */
  --wash-corail:rgba(221,97,73,.12);
  --wash-corail-strong:rgba(221,97,73,.22);
  --wash-prune:rgba(94,42,80,.10);

  /* ================= Couche sémantique — c'est elle que les composants utilisent ========= */
  --bg-app:var(--ground);
  --bg-card:var(--surface);
  --bg-sunken:var(--surface-2);

  --text-strong:var(--ink);
  --text-body:var(--ink);
  --text-muted:var(--muted);
  --text-accent:var(--corail-ink);   /* 5.15:1 sur --ground */
  --text-on-prune:var(--on-prune);
  --text-on-prune-muted:var(--on-prune-muted);

  --border-hairline:var(--line);
  --border-strong:var(--prune);
  --border-accent:var(--corail);     /* décoratif : filet, non porteur de texte */

  --btn-primary-bg:var(--corail-ink);        /* blanc dessus 5.48:1 */
  --btn-primary-fg:#FFFFFF;
  --btn-primary-bg-hover:var(--corail-deep); /* blanc dessus 6.89:1 */
  --btn-secondary-bg:var(--prune);           /* --on-prune dessus 9.41:1 */
  --btn-secondary-fg:var(--on-prune);
  --btn-secondary-bg-hover:var(--prune-deep);/* --on-prune dessus 14.13:1 */
  --btn-ghost-fg:var(--ink);
  --btn-disabled-bg:var(--surface-2);
  --btn-disabled-fg:var(--muted);             /* 4.57:1 — lisible même désactivé */

  --focus-ring:var(--corail);                 /* non-texte : 3.35:1 sur --ground, ≥ 3:1 requis */
  --focus-ring-on-accent:var(--prune-deep);   /* anneau sur un bouton corail */

  --gauge-track:var(--surface-2);
  --gauge-value:var(--corail);                /* décoratif */
  --gauge-number:var(--prune);                /* 10.92:1 sur --surface */
}

/* ====================== Thème sombre ====================== */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark;
  --ground:#1E0F17; --surface:#2A1622; --surface-2:#33202D;
  --ink:#F3E7EC; --muted:#B394A6; --line:#3D2836;
  --prune:#7C3A6A; --prune-deep:#150A11;
  --corail:#EC7A63; --corail-ink:#F0937E; --corail-deep:#EC7A63;
  --wash-corail:rgba(236,122,99,.16); --wash-corail-strong:rgba(236,122,99,.28);
  --wash-prune:rgba(124,58,106,.24);
  --text-accent:var(--corail);
  --btn-primary-bg:var(--corail); --btn-primary-fg:var(--prune-deep);
  --btn-primary-bg-hover:var(--corail-ink);
  --btn-secondary-bg:var(--prune); --btn-secondary-fg:var(--ink);
  --btn-secondary-bg-hover:var(--prune-deep);
  --btn-disabled-bg:var(--surface-2); --btn-disabled-fg:var(--muted);
  --focus-ring:var(--corail); --focus-ring-on-accent:var(--prune-deep);
  --gauge-track:var(--surface-2); --gauge-value:var(--corail); --gauge-number:var(--corail);
}}

:root[data-theme="dark"]{ color-scheme:dark;
  /* ---- Encres sombres ----
     --ink   sur --ground 15.37:1 · sur --surface 14.12:1 · sur --surface-2 13.09:1   AAA
     --muted sur --ground  6.78:1 · sur --surface  6.23:1                              AA
     --ink sur --prune 6.54:1 · --on-prune sur --prune 6.78:1 */
  --ground:#1E0F17; --surface:#2A1622; --surface-2:#33202D;
  --ink:#F3E7EC; --muted:#B394A6; --line:#3D2836;
  --prune:#7C3A6A; --prune-deep:#150A11;

  /* ---- Corail sombre — la règle s'inverse ----
     --corail      PORTEUR DE TEXTE ici : sur --ground 6.63:1 · sur --surface 6.09:1  AA
                   blanc dessus 2.79:1 ÉCHEC — le fond corail porte de l'encre foncée,
                   --prune-deep #150A11 dessus = 6.95:1 AA.
     --corail-ink  survol du bouton : --prune-deep dessus 8.47:1 · texte sur --ground 8.08:1 */
  --corail:#EC7A63; --corail-ink:#F0937E; --corail-deep:#EC7A63;
  --wash-corail:rgba(236,122,99,.16); --wash-corail-strong:rgba(236,122,99,.28);
  --wash-prune:rgba(124,58,106,.24);
  --text-accent:var(--corail);
  --btn-primary-bg:var(--corail); --btn-primary-fg:var(--prune-deep);
  --btn-primary-bg-hover:var(--corail-ink);
  --btn-secondary-bg:var(--prune); --btn-secondary-fg:var(--ink);
  --btn-secondary-bg-hover:var(--prune-deep);
  --btn-disabled-bg:var(--surface-2); --btn-disabled-fg:var(--muted);
  --focus-ring:var(--corail); --focus-ring-on-accent:var(--prune-deep);
  --gauge-track:var(--surface-2); --gauge-value:var(--corail); --gauge-number:var(--corail);
}

/* ---------- design/tokens/typography.css ---------- */
/* auGramme — typographie.
   Trois familles système, zéro requête tierce, conformité RGPD par construction.
   Ne jamais ajouter de police externe. */
:root{
  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;

  /* Serif — titres, prix, chiffres de synthèse */
  --fs-display:56px;  --lh-display:1.06;
  --fs-title-1:40px;  --lh-title-1:1.10;
  --fs-title-2:30px;  --lh-title-2:1.14;
  --fs-title-3:24px;  --lh-title-3:1.20;
  --ls-serif:-.015em;

  /* Sans — interface et corps. Plancher tablette à 60 cm : 15px. */
  --fs-heading:20px;  --lh-heading:1.30;
  --fs-body-lg:18px;  --lh-body-lg:1.55;
  --fs-body:16px;     --lh-body:1.60;
  --fs-body-sm:15px;  --lh-body-sm:1.55;
  --fs-caption:13px;  --lh-caption:1.45;   /* légendes et méta uniquement */
  --fs-eyebrow:12px;  --ls-eyebrow:.16em;

  /* Mono — grammages, montants, tout ce qui se compare colonne à colonne */
  --fs-weigh-xl:128px;  /* pesée plein écran, bras tendu */
  --fs-weigh:96px;      /* pesée en cours, vue standard tablette */
  --fs-num-xl:48px;
  --fs-num-lg:32px;
  --fs-num:20px;
  --fs-num-sm:15px;
  --lh-num:1;
  --ls-num:-.02em;

  --fw-regular:400; --fw-semibold:600; --fw-bold:700;
}

.t-display{font:var(--fw-semibold) var(--fs-display)/var(--lh-display) var(--serif);letter-spacing:var(--ls-serif);text-wrap:balance}
.t-title-1{font:var(--fw-semibold) var(--fs-title-1)/var(--lh-title-1) var(--serif);letter-spacing:var(--ls-serif);text-wrap:balance}
.t-title-2{font:var(--fw-semibold) var(--fs-title-2)/var(--lh-title-2) var(--serif);letter-spacing:var(--ls-serif);text-wrap:balance}
.t-title-3{font:var(--fw-semibold) var(--fs-title-3)/var(--lh-title-3) var(--serif);letter-spacing:var(--ls-serif)}
.t-heading{font:var(--fw-bold) var(--fs-heading)/var(--lh-heading) var(--sans)}
.t-body-lg{font:var(--fw-regular) var(--fs-body-lg)/var(--lh-body-lg) var(--sans)}
.t-body{font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--sans)}
.t-body-sm{font:var(--fw-regular) var(--fs-body-sm)/var(--lh-body-sm) var(--sans)}
.t-caption{font:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--sans)}
.t-eyebrow{font:var(--fw-bold) var(--fs-eyebrow)/1.2 var(--sans);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-accent)}

/* Tous les chiffres sont tabulaires, sans exception. */
.t-num,.t-num-sm,.t-num-lg,.t-num-xl,.t-weigh,.t-weigh-xl{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-num);line-height:var(--lh-num)}
.t-num-sm{font-size:var(--fs-num-sm)}
.t-num{font-size:var(--fs-num)}
.t-num-lg{font-size:var(--fs-num-lg)}
.t-num-xl{font-size:var(--fs-num-xl)}
.t-weigh{font-size:var(--fs-weigh)}
.t-weigh-xl{font-size:var(--fs-weigh-xl)}

/* ---------- design/tokens/spacing.css ---------- */
/* auGramme — espacements. Base 4. */
:root{
  --sp-0:0; --sp-05:2px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --sp-16:64px; --sp-20:80px; --sp-24:96px;

  --gap-inline:12px;   /* entre deux boutons, deux puces */
  --gap-stack:16px;    /* entre deux blocs d'une même carte */
  --gap-grid:20px;     /* entre deux cartes */
  --pad-card:24px;
  --pad-screen:28px;
  --maxw-content:1080px;
  --maxw-prose:66ch;

  /* Cibles tactiles — salon, mains occupées ou teintées */
  --touch-min:44px;    /* plancher absolu */
  --touch-comfort:48px;/* par défaut dans l'app */
  --touch-glove:56px;  /* actions réalisées avec des gants de coloration */
}

/* ---------- design/tokens/radius.css ---------- */
/* auGramme — rayons. Quatre paliers, pas un de plus. */
:root{
  --r-field:10px;    /* champs, tuiles de KPI, bandeaux */
  --r-tile:10px;
  --r-card-sm:14px;
  --r-card:18px;     /* cartes tarifaires, panneaux */
  --r-screen-sm:20px;
  --r-screen:26px;   /* écrans, mockups, gros CTA */
  --r-pill:999px;    /* boutons, puces, badges, jauges */
}

/* ---------- design/tokens/elevation.css ---------- */
/* auGramme — ombres et traits.
   L'ombre est toujours prune-noir (rgba 20,6,14), jamais grise. Elle est longue et basse :
   l'objet flotte au-dessus du plan, il ne colle pas. */
:root{
  --shadow-0:none;
  --shadow-1:0 24px 60px -36px rgba(20,6,14,.42);  /* carte posée */
  --shadow-2:0 24px 60px -34px rgba(20,6,14,.48);  /* carte mise en avant */
  --shadow-3:0 34px 72px -28px rgba(20,6,14,.62);  /* mockup tablette, feuille modale */

  --stroke-hairline:1px;   /* séparation */
  --stroke-strong:1.5px;   /* champ en erreur, bouton fantôme */
  --stroke-accent:2px;     /* filet corail décoratif en bord de bloc */
  --stroke-gauge:11px;     /* épaisseur de la jauge de pesée */
  --stroke-focus:3px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --shadow-1:0 24px 60px -36px rgba(0,0,0,.66);
  --shadow-2:0 24px 60px -34px rgba(0,0,0,.72);
  --shadow-3:0 34px 72px -28px rgba(0,0,0,.82);
}}
:root[data-theme="dark"]{
  --shadow-1:0 24px 60px -36px rgba(0,0,0,.66);
  --shadow-2:0 24px 60px -34px rgba(0,0,0,.72);
  --shadow-3:0 34px 72px -28px rgba(0,0,0,.82);
}

/* ---------- design/tokens/motion.css ---------- */
/* auGramme — mouvement. Court, sans rebond. Rien ne doit distraire pendant une pesée. */
:root{
  --dur-1:120ms;  /* appui */
  --dur-2:200ms;  /* couleur, bordure */
  --dur-3:550ms;  /* barre de progression, compteur */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-linear:linear;  /* l'aiguille de la jauge suit la balance : linéaire, jamais lissée */
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-1:0ms;--dur-2:0ms;--dur-3:0ms}
}

/* ---------- design/tokens/base.css ---------- */
/* auGramme — socle. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg-app);color:var(--text-body);
  font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--sans);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);font-weight:var(--fw-semibold);line-height:1.12;letter-spacing:var(--ls-serif);margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--text-accent);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--prune)}
:focus-visible{outline:var(--stroke-focus) solid var(--focus-ring);outline-offset:2px;border-radius:4px}
.ag-hairline{border:0;border-top:var(--stroke-hairline) solid var(--border-hairline);margin:0}
.ag-tabular{font-variant-numeric:tabular-nums}

/* ---------- design/components/actions/button.css ---------- */
/* Bouton auGramme */
.ag-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;
  font-family:var(--sans);font-weight:var(--fw-semibold);font-size:var(--fs-body);line-height:1;
  min-height:var(--touch-comfort);padding:0 22px;border-radius:var(--r-pill);
  border:var(--stroke-strong) solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out);
}
.ag-btn:active{transform:translateY(1px)}
.ag-btn--primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg)}
.ag-btn--primary:hover{background:var(--btn-primary-bg-hover)}
.ag-btn--primary:focus-visible{outline-color:var(--focus-ring-on-accent)}
.ag-btn--secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-fg)}
.ag-btn--secondary:hover{background:var(--btn-secondary-bg-hover)}
.ag-btn--ghost{background:transparent;color:var(--btn-ghost-fg);border-color:var(--border-hairline)}
.ag-btn--ghost:hover{background:var(--bg-sunken);border-color:var(--border-strong)}

.ag-btn--sm{min-height:var(--touch-min);font-size:var(--fs-body-sm);padding:0 16px}
.ag-btn--lg{min-height:52px;font-size:var(--fs-body-lg);padding:0 28px}
.ag-btn--glove{min-height:var(--touch-glove);font-size:var(--fs-body-lg);padding:0 32px;gap:10px}
.ag-btn--block{display:flex;width:100%}

.ag-btn:disabled,.ag-btn[aria-disabled="true"]{
  background:var(--btn-disabled-bg);color:var(--btn-disabled-fg);border-color:transparent;
  cursor:not-allowed;transform:none}
.ag-btn:disabled:hover,.ag-btn[aria-disabled="true"]:hover{background:var(--btn-disabled-bg)}

.ag-btn.is-loading{cursor:progress}
.ag-btn__spinner{
  width:1em;height:1em;border-radius:50%;flex:none;
  border:2px solid currentColor;border-top-color:transparent;
  animation:ag-spin 720ms linear infinite}
@keyframes ag-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ag-btn__spinner{animation-duration:2.4s}}

/* ---------- design/components/forms/field.css ---------- */
/* Champ de saisie auGramme */
.ag-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ag-field__label{font:var(--fw-semibold) var(--fs-body-sm)/1.3 var(--sans);color:var(--text-strong)}
.ag-field__control{position:relative;display:flex;align-items:center}
.ag-field__input{
  width:100%;min-height:var(--touch-comfort);padding:12px 14px;
  font-family:var(--sans);font-size:var(--fs-body);color:var(--text-strong);
  background:var(--bg-sunken);border:var(--stroke-hairline) solid var(--border-hairline);
  border-radius:var(--r-field);transition:border-color var(--dur-2) var(--ease-out)}
.ag-field__input::placeholder{color:var(--text-muted)}
.ag-field__input:hover{border-color:var(--border-strong)}
.ag-field__input:focus-visible{outline:var(--stroke-focus) solid var(--focus-ring);outline-offset:1px;border-color:transparent}
.ag-field__suffix{
  position:absolute;right:14px;pointer-events:none;
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-body-sm);color:var(--text-muted)}
.ag-field__hint{font:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--sans);color:var(--text-muted)}
.ag-field__error{font:var(--fw-semibold) var(--fs-caption)/var(--lh-caption) var(--sans);color:var(--text-accent)}

.ag-field--num .ag-field__input{
  font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;padding-right:42px;
  font-size:var(--fs-num);font-weight:var(--fw-semibold)}
.ag-field--glove .ag-field__input{min-height:var(--touch-glove);font-size:var(--fs-body-lg);padding:14px 16px}
.ag-field--error .ag-field__input{border-color:var(--corail-ink);border-width:var(--stroke-strong);background:var(--wash-corail)}
.ag-field__input:disabled{background:var(--bg-sunken);color:var(--text-muted);cursor:not-allowed;opacity:.7}

/* ---------- design/components/pesee/pesee.css ---------- */
/* Jauge de pesée + ligne d'ingrédient */
.ag-gauge{position:relative;display:inline-grid;place-items:center;width:220px;height:220px}
.ag-gauge--lg{width:300px;height:300px}
.ag-gauge svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}
.ag-gauge__track{fill:none;stroke:var(--gauge-track);stroke-width:var(--stroke-gauge)}
.ag-gauge__value{fill:none;stroke:var(--gauge-value);stroke-width:var(--stroke-gauge);stroke-linecap:round;
  transition:stroke-dashoffset var(--dur-1) var(--ease-linear)}
.ag-gauge--over .ag-gauge__value{stroke:var(--corail-ink)}
.ag-gauge__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.ag-gauge__num{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:var(--fw-semibold);
  font-size:var(--fs-weigh);line-height:var(--lh-num);letter-spacing:var(--ls-num);color:var(--gauge-number)}
.ag-gauge--lg .ag-gauge__num{font-size:var(--fs-weigh-xl)}
.ag-gauge__unit{font-size:.34em;color:var(--text-muted);margin-left:2px}
.ag-gauge__target{font:var(--fw-regular) var(--fs-body-sm)/1.3 var(--sans);color:var(--text-muted)}
.ag-gauge__status{font:var(--fw-semibold) var(--fs-body)/1.3 var(--sans);color:var(--text-accent);text-align:center}
.ag-gauge__status--ok{color:var(--prune)}

.ag-ing{display:flex;align-items:center;gap:12px;padding:12px 0;
  border-top:var(--stroke-hairline) solid var(--border-hairline);
  font:var(--fw-regular) var(--fs-body)/1.3 var(--sans);color:var(--text-body);min-height:var(--touch-min)}
.ag-ing__tick{width:22px;height:22px;border-radius:var(--r-pill);flex:none;
  display:inline-grid;place-items:center;font-size:12px;line-height:1}
.ag-ing__name{flex:1;min-width:0}
.ag-ing__g{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-num-sm);font-weight:var(--fw-semibold)}
.ag-ing--done{color:var(--text-muted)}
.ag-ing--done .ag-ing__tick{background:var(--wash-prune);color:var(--prune)}
.ag-ing--current{font-weight:var(--fw-semibold);color:var(--text-strong)}
.ag-ing--current .ag-ing__tick{background:var(--corail);color:var(--ink)}
.ag-ing--current .ag-ing__g{font-size:var(--fs-num);color:var(--text-accent)}
.ag-ing--todo{color:var(--text-muted)}
.ag-ing--todo .ag-ing__tick{background:transparent;border:var(--stroke-strong) solid var(--border-hairline)}

/* ---------- design/components/data/data.css ---------- */
/* Badge de statut, tuile de KPI, ligne produit */
.ag-badge{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-pill);
  padding:6px 12px;font:var(--fw-semibold) var(--fs-caption)/1 var(--sans);white-space:nowrap}
.ag-badge__dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.ag-badge--live{background:var(--wash-corail);color:var(--text-accent)}
.ag-badge--live .ag-badge__dot{animation:ag-pulse 1.6s ease-in-out infinite}
@keyframes ag-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.ag-badge--live .ag-badge__dot{animation:none}}
.ag-badge--done{background:var(--wash-prune);color:var(--prune)}
.ag-badge--todo{background:var(--bg-sunken);color:var(--text-muted)}
.ag-badge--alert{background:var(--wash-corail);color:var(--text-accent);
  box-shadow:inset 0 0 0 1px var(--border-accent)}

.ag-kpi{background:var(--bg-sunken);border-radius:var(--r-tile);padding:16px 18px;min-width:0}
.ag-kpi__label{font:var(--fw-semibold) var(--fs-caption)/1.3 var(--sans);color:var(--text-muted)}
.ag-kpi__value{font:var(--fw-semibold) var(--fs-title-3)/1.05 var(--serif);color:var(--text-strong);
  letter-spacing:var(--ls-serif);margin-top:6px;font-variant-numeric:tabular-nums}
.ag-kpi--num .ag-kpi__value{font-family:var(--mono);font-size:var(--fs-num-lg);letter-spacing:var(--ls-num)}
.ag-kpi__note{font:var(--fw-regular) var(--fs-caption)/1.4 var(--sans);color:var(--text-muted);margin-top:4px}
.ag-kpi--accent{background:var(--wash-corail)}

.ag-prod{display:flex;align-items:center;gap:16px;padding:12px 0;min-height:var(--touch-comfort);
  border-top:var(--stroke-hairline) solid var(--border-hairline)}
.ag-prod__main{flex:1;min-width:0}
.ag-prod__name{font:var(--fw-regular) var(--fs-body-sm)/1.35 var(--sans);color:var(--text-strong)}
.ag-prod__meta{font:var(--fw-regular) var(--fs-caption)/1.4 var(--sans);color:var(--text-muted);margin-top:2px}
.ag-prod__level{width:96px;flex:none}
.ag-prod__track{height:6px;border-radius:var(--r-pill);background:var(--bg-sunken);overflow:hidden}
.ag-prod__fill{height:100%;border-radius:var(--r-pill);background:var(--prune)}
.ag-prod--low .ag-prod__fill{background:var(--corail)}
.ag-prod--out .ag-prod__fill{background:var(--corail-ink)}
.ag-prod__qty{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-num-sm);
  font-weight:var(--fw-semibold);color:var(--text-muted);margin-top:6px;display:block;text-align:right}
.ag-prod--low .ag-prod__qty,.ag-prod--out .ag-prod__qty{color:var(--text-accent)}

/* ---------- design/components/feedback/feedback.css ---------- */
/* Bandeau d'alerte stock + état vide */
.ag-alert{display:flex;align-items:center;gap:12px;border-radius:var(--r-field);
  padding:14px 16px;min-height:var(--touch-min);
  background:var(--wash-corail);box-shadow:inset 0 0 0 1px var(--border-accent);
  font:var(--fw-semibold) var(--fs-body-sm)/1.4 var(--sans);color:var(--text-accent)}
.ag-alert__mark{font-family:var(--mono);font-weight:var(--fw-bold);flex:none}
.ag-alert__body{flex:1;min-width:0}
.ag-alert__body strong{font-variant-numeric:tabular-nums}
.ag-alert--quiet{background:var(--bg-sunken);box-shadow:none;color:var(--text-muted);font-weight:var(--fw-regular)}

.ag-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:40px 24px;border:var(--stroke-hairline) dashed var(--border-hairline);
  border-radius:var(--r-card);background:var(--bg-card)}
.ag-empty__title{font:var(--fw-semibold) var(--fs-title-3)/1.2 var(--serif);color:var(--text-strong);letter-spacing:var(--ls-serif)}
.ag-empty__text{font:var(--fw-regular) var(--fs-body-sm)/1.55 var(--sans);color:var(--text-muted);max-width:42ch}
.ag-empty__actions{margin-top:8px}