/* ==========================================================================
   COURSES MOINS CHÈRES — design tokens v2.0 (2026-10-02)
   Source de vérité : docs/05-brand-design-system.md (v2)
   Référence de famille visuelle : docs/07-reference-ui-jow.md
   Démo vivante de tous les composants : brand/ui-kit.html

   La v1 « ticket / étiquette / feutre » est ABANDONNÉE (décision fondateur,
   2026-10-02). Ne réintroduisez ni papier crème, ni mono, ni rotation,
   ni bord dentelé, ni ombre dure, ni jaune/noir « prix choc ».

   Import : <link rel="stylesheet" href="/brand/tokens.css">
   Polices (Google Fonts) — à charger une fois dans le <head> :
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@500;600;700&family=DM+Sans:opsz,wght@9..40,400..700&display=swap" rel="stylesheet">
   Icônes : Phosphor (regular pour l'UI, bold pour les états actifs / petits formats)
   <script src="https://unpkg.com/@phosphor-icons/web@2.1.1"></script>

   --------------------------------------------------------------------------
   MIGRATION v1 → v2 (anciens noms supprimés ; remplacer comme suit)
   --cmc-jaune-500 / --color-brand ........ → --color-brand (vert) ou --cmc-citron-400 (accent joie)
   --cmc-jaune-100 / --color-brand-soft ... → --color-brand-soft
   --cmc-jaune-700 / --color-brand-text ... → --color-brand-text
   --cmc-encre-900 ........................ → --cmc-ink-900  (texte : --color-text)
   --cmc-encre-700 / -800 ................. → --cmc-ink-700
   --cmc-encre-500 / --color-text-muted ... → --color-text-muted (--cmc-ink-600)
   --cmc-encre-300 ........................ → --cmc-ink-400
   --cmc-encre-150 / --color-border ....... → --color-border (--cmc-ink-200)
   --cmc-papier / --color-bg .............. → --color-bg (BLANC) ; sections : --color-bg-soft
   --color-surface-sunken ................. → --color-surface-sunken (--cmc-ink-100)
   --cmc-rouge-* / --color-loss* .......... → SUPPRIMÉ. Prix payé = --color-price-old (gris barré) ;
                                              économie = --color-saving* (vert). Rouge réservé
                                              aux erreurs : --color-danger.
   --color-saving-bg (jaune) .............. → --color-saving / --color-saving-soft
   --font-mono ............................ → SUPPRIMÉ → --font-text + font-variant-numeric: tabular-nums
   --font-display (Bricolage) ............. → --font-display (Lexend)
   --font-text (Inter) .................... → --font-text (DM Sans)
   --shadow-sticker / --shadow-press ...... → --shadow-md / --shadow-sm (ombres douces uniquement)
   --ease-stamp ........................... → --ease-spring
   --zigzag-* ............................. → SUPPRIMÉ (aucun bord dentelé)
   --tracking-caps ........................ → SUPPRIMÉ (pas de capitales espacées)
   ========================================================================== */

:root {
  /* ---------- 1. Palette brute (ne pas utiliser directement dans les composants) ---------- */

  /* Vert Panier — couleur signature (l'économie, l'action principale) */
  --cmc-vert-50:  #EFFAF3;
  --cmc-vert-100: #DDF5E6;   /* pastel : fonds de cartes « économie », badges doux */
  --cmc-vert-200: #B9EACB;
  --cmc-vert-400: #2FBF71;   /* vif décoratif : progress, confettis, pastilles (jamais en texte) */
  --cmc-vert-600: #087F49;   /* PRINCIPAL : boutons, liens, montants économisés (blanc dessus 5.07:1) */
  --cmc-vert-700: #066B3D;   /* pressed, texte sur pastel vert (5.75:1 sur vert-100) */
  --cmc-vert-900: #0B3D26;   /* fonds sombres de marque (blanc dessus 12.28:1) */

  /* Encre — neutres légèrement verdis (jamais de noir pur) */
  --cmc-ink-900: #1B1F1D;    /* texte principal : 16.66:1 sur blanc */
  --cmc-ink-700: #3D4440;
  --cmc-ink-600: #5F6763;    /* texte secondaire : 5.82:1 sur blanc, 5.26:1 sur ink-100 */
  --cmc-ink-400: #8C938F;    /* placeholders, prix barrés, icônes inactives (3.14:1 — non-texte / >= 18px) */
  --cmc-ink-300: #C9CECB;
  --cmc-ink-200: #E3E7E4;    /* bordures, séparateurs */
  --cmc-ink-100: #F1F4F2;    /* fonds enfoncés : stepper, champ de recherche, skeleton */
  --cmc-ink-50:  #F7F9F8;    /* fond de section (alternance) */
  --cmc-white:   #FFFFFF;

  /* Couleurs secondaires (catégories / rayons) : vif = picto & déco, 100 = pastel de fond, 700/800 = texte sur pastel */
  --cmc-citron-400: #FFD43B;  --cmc-citron-100: #FFF4C7;  --cmc-citron-800: #7A5A00;  /* 5.78:1 */
  --cmc-mandarine-400: #FF8A3D; --cmc-mandarine-100: #FFE9DA; --cmc-mandarine-700: #B4470A; /* 4.66:1 */
  --cmc-framboise-400: #FF5C8A; --cmc-framboise-100: #FFE4EC; --cmc-framboise-700: #B8285A; /* 5.03:1 */
  --cmc-myrtille-400: #6B6BF5;  --cmc-myrtille-100: #ECEBFF;  --cmc-myrtille-700: #4338CA;  /* 6.73:1 */
  --cmc-ciel-400: #38B6F2;      --cmc-ciel-100: #E0F3FD;      --cmc-ciel-700: #0B6FA4;      /* 4.81:1 */

  --cmc-rouge-600: #D92D20;  /* erreurs de formulaire / réseau UNIQUEMENT (4.83:1 sur blanc) */
  --cmc-rouge-100: #FDE8E6;

  /* ---------- 2. Tokens sémantiques ---------- */
  --color-bg: var(--cmc-white);                /* fond d'écran : BLANC */
  --color-bg-soft: var(--cmc-ink-50);          /* section alternée, fond derrière des cartes blanches */
  --color-surface: var(--cmc-white);           /* cartes */
  --color-surface-sunken: var(--cmc-ink-100);  /* stepper, recherche, skeleton */
  --color-border: var(--cmc-ink-200);
  --color-border-strong: var(--cmc-ink-300);

  --color-text: var(--cmc-ink-900);
  --color-text-muted: var(--cmc-ink-600);
  --color-text-subtle: var(--cmc-ink-400);     /* >= 18px ou non essentiel uniquement */
  --color-text-inverse: var(--cmc-white);

  --color-brand: var(--cmc-vert-600);
  --color-brand-pressed: var(--cmc-vert-700);
  --color-on-brand: var(--cmc-white);
  --color-brand-soft: var(--cmc-vert-100);
  --color-brand-text: var(--cmc-vert-700);
  --color-brand-vivid: var(--cmc-vert-400);
  --color-brand-deep: var(--cmc-vert-900);

  --color-accent: var(--cmc-citron-400);       /* joie : pièce du logo, étoiles, confettis, surlignage doux */
  --color-on-accent: var(--cmc-ink-900);       /* 11.69:1 */

  /* L'économie est toujours POSITIVE : vert. Le prix payé est simplement barré en gris. */
  --color-saving: var(--cmc-vert-600);         /* montants économisables, nouveaux prix, badge −32 % */
  --color-on-saving: var(--cmc-white);
  --color-saving-soft: var(--cmc-vert-100);
  --color-saving-text: var(--cmc-vert-700);
  --color-price-old: var(--cmc-ink-400);       /* prix payé, barré */

  --color-success: var(--cmc-vert-600);
  --color-warning-soft: var(--cmc-citron-100);
  --color-warning-text: var(--cmc-citron-800);
  --color-info-soft: var(--cmc-ciel-100);
  --color-info-text: var(--cmc-ciel-700);
  --color-danger: var(--cmc-rouge-600);
  --color-danger-soft: var(--cmc-rouge-100);

  --color-focus: var(--cmc-vert-600);
  --color-overlay: rgb(27 31 29 / 0.40);

  /* Pastels de catégories (rayons) : fond de vignette produit + couleur de texte/picto */
  --cat-frais-bg: var(--cmc-ciel-100);        --cat-frais-fg: var(--cmc-ciel-700);
  --cat-fruits-bg: var(--cmc-vert-100);       --cat-fruits-fg: var(--cmc-vert-700);
  --cat-epicerie-bg: var(--cmc-citron-100);   --cat-epicerie-fg: var(--cmc-citron-800);
  --cat-viande-bg: var(--cmc-mandarine-100);  --cat-viande-fg: var(--cmc-mandarine-700);
  --cat-hygiene-bg: var(--cmc-framboise-100); --cat-hygiene-fg: var(--cmc-framboise-700);
  --cat-entretien-bg: var(--cmc-myrtille-100);--cat-entretien-fg: var(--cmc-myrtille-700);
  --cat-boissons-bg: var(--cmc-ciel-100);     --cat-boissons-fg: var(--cmc-ciel-700);
  --cat-surgeles-bg: var(--cmc-myrtille-100); --cat-surgeles-fg: var(--cmc-myrtille-700);

  /* ---------- 3. Typographie ---------- */
  --font-display: "Lexend", "DM Sans", system-ui, -apple-system, sans-serif;  /* titres, montants, boutons primaires */
  --font-text: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --weight-regular: 400;   /* DM Sans : paragraphes longs uniquement */
  --weight-medium: 500;    /* DM Sans : texte UI par défaut (équivalent du Surt Medium de Jow) */
  --weight-semibold: 600;  /* Lexend : titres */
  --weight-bold: 700;      /* Lexend : montants ; DM Sans : prix, labels forts */

  /* échelle (taille / interlignage, interlignages multiples de 4) */
  --text-xs: 0.75rem;    --lh-xs: 1rem;        /* 12/16 caption, badge */
  --text-sm: 0.875rem;   --lh-sm: 1.25rem;     /* 14/20 secondaire, chips */
  --text-md: 1rem;       --lh-md: 1.5rem;      /* 16/24 corps */
  --text-lg: 1.125rem;   --lh-lg: 1.5rem;      /* 18/24 boutons, titres de carte */
  --text-xl: 1.25rem;    --lh-xl: 1.75rem;     /* 20/28 titre de section (display) */
  --text-2xl: 1.5rem;    --lh-2xl: 2rem;       /* 24/32 titre d'écran (display) */
  --text-3xl: 1.875rem;  --lh-3xl: 2.25rem;    /* 30/36 grand titre (display) */
  --text-4xl: 2.5rem;    --lh-4xl: 2.75rem;    /* 40/44 montant sur carte */
  --text-hero: 4rem;     --lh-hero: 4rem;      /* 64/64 montant héros (résultat, story) */

  --tracking-display: -0.01em;
  --tracking-hero: -0.03em;
  --numeric: tabular-nums;                     /* font-variant-numeric sur tous les prix */

  /* ---------- 4. Espacements (grille 4 px stricte) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --gutter: var(--space-4);                    /* marge latérale écran mobile : 16 px */
  --gap-cards: var(--space-3);                 /* entre deux cartes d'une liste : 12 px */
  --tap-min: 44px;

  /* ---------- 5. Rayons (généreux, jamais d'angle vif) ---------- */
  --radius-xs: 8px;      /* badge, petite vignette (32 px) */
  --radius-sm: 12px;     /* vignette produit 48–56 px, input */
  --radius-md: 16px;     /* carte de liste, tuile catégorie */
  --radius-lg: 24px;     /* carte héros, carte résultat, tuile enseigne */
  --radius-xl: 32px;     /* haut de bottom sheet, carte story */
  --radius-pill: 999px;  /* boutons, chips, stepper, recherche, tab bar flottante */

  /* ---------- 6. Ombres (douces, diffuses, teintées encre — jamais d'ombre dure) ---------- */
  --shadow-sm: 0 1px 2px rgb(27 31 29 / 0.06);
  --shadow-md: 0 6px 20px rgb(27 31 29 / 0.06);            /* cartes posées sur fond blanc */
  --shadow-lg: 0 10px 30px rgb(27 31 29 / 0.10);           /* tab bar, CTA flottant, toast */
  --shadow-sheet: 0 -8px 32px rgb(27 31 29 / 0.12);        /* bottom sheet */
  --ring-focus: 0 0 0 3px var(--cmc-white), 0 0 0 5px var(--cmc-vert-600);

  /* ---------- 7. Motion (doux, léger rebond — rien de « tamponné ») ---------- */
  --dur-instant: 100ms;  /* press */
  --dur-fast: 160ms;     /* hover, chips, stepper */
  --dur-base: 240ms;     /* apparition carte, toast */
  --dur-slow: 360ms;     /* bottom sheet, changement d'écran */
  --dur-count: 900ms;    /* compteur du montant */
  --ease-out: cubic-bezier(0.28, 0.84, 0.42, 1);           /* sortie douce (même famille que Jow) */
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);         /* léger dépassement : badge, +1, pastille panier */

  /* ---------- 8. Dimensions de composants ---------- */
  --header-h: 56px;
  --tabbar-h: 64px;
  --btn-h-lg: 56px;      /* CTA principal pleine largeur */
  --btn-h-md: 48px;
  --btn-h-sm: 36px;
  --chip-h: 36px;
  --stepper-h: 36px;
  --thumb-sm: 40px;
  --thumb-md: 56px;
  --thumb-lg: 72px;

  --z-header: 10;
  --z-tabbar: 20;
  --z-sheet: 40;
  --z-toast: 50;
}

/* ---------- 9. Mode sombre (app uniquement ; cartes partageables toujours en clair) ----------
   Automatique via prefers-color-scheme, forçable avec <html data-theme="dark|light">. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #121513; --color-bg-soft: #181C1A; --color-surface: #1E2320; --color-surface-sunken: #262C29;
    --color-border: #2F3632; --color-border-strong: #3D4440;
    --color-text: #F1F4F2;           /* 16.6:1 */
    --color-text-muted: #A7AFAB;     /* 8.2:1 sur bg, 7.1:1 sur surface */
    --color-text-subtle: #7B837F;
    --color-text-inverse: var(--cmc-ink-900);
    --color-brand: var(--cmc-vert-400); --color-brand-pressed: #27A863; --color-on-brand: var(--cmc-ink-900); /* 6.99:1 */
    --color-brand-soft: #12301F; --color-brand-text: #6EE0A0; /* 8.74:1 sur brand-soft */
    --color-saving: var(--cmc-vert-400); --color-on-saving: var(--cmc-ink-900);
    --color-saving-soft: #12301F; --color-saving-text: #6EE0A0; --color-price-old: #7B837F;
    --color-overlay: rgb(0 0 0 / 0.56);
  }
}
:root[data-theme="dark"] {
  --color-bg: #121513; --color-bg-soft: #181C1A; --color-surface: #1E2320; --color-surface-sunken: #262C29;
  --color-border: #2F3632; --color-border-strong: #3D4440;
  --color-text: #F1F4F2; --color-text-muted: #A7AFAB; --color-text-subtle: #7B837F; --color-text-inverse: var(--cmc-ink-900);
  --color-brand: var(--cmc-vert-400); --color-brand-pressed: #27A863; --color-on-brand: var(--cmc-ink-900);
  --color-brand-soft: #12301F; --color-brand-text: #6EE0A0;
  --color-saving: var(--cmc-vert-400); --color-on-saving: var(--cmc-ink-900);
  --color-saving-soft: #12301F; --color-saving-text: #6EE0A0; --color-price-old: #7B837F;
  --color-overlay: rgb(0 0 0 / 0.56);
}

/* ---------- 10. Base optionnelle ---------- */
.cmc-base {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-text);
  font-weight: var(--weight-medium);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cmc-num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-count: 0ms;
  }
}