/* Tokens Lapidaire — valeurs par défaut NEUTRES.
   Une boutique les redéfinit dans shops/<marque>/assets/styles/theme.css (chargé après ce fichier).
   Les composants du core (front.css, admin.css) n'utilisent QUE ces variables : aucune taille de police,
   aucun espacement, aucune couleur en dur dans les feuilles de composants. */
:root {
  /* ---- Couleurs front ---- */
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-2: #EFEFEF;   /* panneau posé sur le fond (récap du tunnel, ligne de code du panier) */
  --color-ink: #111111;
  --color-ink-inverse: #FFFFFF;
  --color-muted: #6B6B6B;
  --color-muted-2: #8A8A8A;
  --color-line: #E5E5E5;
  --color-line-strong: #D0D0D0;
  --color-accent: #444444;
  --color-accent-soft: #BBBBBB;
  --color-accent-bg: #F4F4F4;
  --color-badge-out-bg: #E8E8E8;
  --color-badge-out-ink: #666666;
  /* RÈGLE DES 3 COULEURS (Review n°2) — chaque teinte a un seul sens, partout (badges, navbar, menus, bandeaux) :
       laiton  --color-accent   → offres et codes promo (bandeau d'offre, badge « Offre DUO », popup, codebox) ;
       cuivre  --color-new      → nouveautés (badge « Nouveauté », puce « • Nouveautés » des menus) ;
       acier   --color-destock  → fins de série (badge « −50 % », « Fins de série » navbar / menu mobile / sous-menu,
                                  bandeau « Dernières pièces »). Ne jamais mélanger. */
  --color-new: #B85C1A;
  --color-new-ink: #FFFFFF;
  --color-destock: #2E5C7A;
  --color-destock-ink: #FFFFFF;
  --color-destock-soft: #9CC0D8;   /* « Fins de série » sur header sombre (lookbook) */
  --color-veil: rgba(255, 255, 255, .55);   /* voile clair des cartes épuisées (image en niveaux de gris dessous) */
  /* États de disponibilité : rupture (rouge sobre), disponible (vert sobre), réapprovisionnement (ambre) */
  --color-state-out: #9B2C2C;
  --color-state-out-bg: #F6E3E1;
  --color-state-ok: #2F6B3A;
  --color-state-ok-bg: #E3EEE3;
  --color-state-resupply: #8A5200;
  --color-state-resupply-bg: #FAEACC;
  --color-placeholder: #D9D9D9;
  --color-overlay: rgba(0, 0, 0, .45);
  --color-scrim: rgba(0, 0, 0, .65);
  --color-shadow: rgba(0, 0, 0, .25);

  /* Placeholders visuels (dégradés) : tokens surchargés par le thème */
  --ph-argent: linear-gradient(160deg, #E6E6E6, #BDBDBD 55%, #D4D4D4);
  --ph-noir: linear-gradient(160deg, #3C3C3C, #1A1A1A 60%, #2C2C2C);
  --ph-or: linear-gradient(160deg, #E4DCC8, #BDAE86 55%, #D6CBAB);
  --ph-cuir: linear-gradient(160deg, #6E5A4A, #3E3028 60%, #56463A);
  --ph-beton: linear-gradient(160deg, #D8D8D8, #AFAFAF 60%, #C6C6C6);
  --ph-skin: linear-gradient(160deg, #4B4B4B, #2A2A2A 55%, #383838);
  --ph-pierre: linear-gradient(160deg, #616969, #313838 60%, #4A5252);

  /* ---- Typographie : échelle UNIQUE (9 pas). Toute taille de police du front est l'un de ces tokens. ---- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --serif-letter-spacing: 0;
  --text-10: 10px;             /* HORS échelle, réservé aux badges de carte (18 px de haut) */
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-15: 15px;
  --text-17: 17px;
  --text-22: 22px;
  --text-28: 28px;
  --text-34: 34px;
  --text-42: 42px;
  /* Rôles (mobile) ; les rôles « display » montent d'un ou deux crans sur desktop (voir bas de fichier) */
  --text-body: var(--text-15);
  --text-input: var(--text-17);      /* ≥ 16 px : pas de zoom automatique iOS sur les champs */
  --text-h3: var(--text-22);
  --text-h2: var(--text-28);
  --text-h1: var(--text-34);
  --text-hero: var(--text-42);
  /* Alias historiques (admin.css, thèmes existants) : projetés sur l'échelle */
  --text-xs: var(--text-11);
  --text-sm: var(--text-13);
  --text-md: var(--text-13);
  --text-base: var(--text-15);
  --text-lg: var(--text-17);
  --text-display-sm: var(--text-h3);
  --text-display-md: var(--text-h2);
  --text-display-lg: var(--text-h1);
  --text-display-xl: var(--text-hero);
  --eyebrow-tracking: .16em;
  --ui-tracking: .08em;
  --leading-tight: 1.02;
  --leading-snug: 1.3;
  --line-height: 1.5;
  --leading-loose: 1.6;

  /* ---- Espacements : grille de 4 px ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --gutter: 20px;              /* marge de lecture (textes, en-têtes de section) */
  --gutter-desktop: 64px;
  --container-pad: var(--gutter);   /* padding réel de .container (--gutter-desktop dès 960 px) */
  /* Grille de listing « content-first » (collections, mosaïque, recherche, recos, best-sellers) : UNE définition,
     déclinée par largeur ci-dessous. Les grilles se sortent du padding du conteneur pour ne garder que --grid-margin. */
  --grid-cols: 2;
  --grid-gutter: 6px;          /* gouttière entre colonnes */
  --grid-margin: 8px;          /* marge latérale de la grille */
  --grid-row-gap: var(--space-6);
  --container-max: 1440px;
  --measure: 65ch;             /* colonne de lecture (pages légales) */

  /* ---- Rayons, ombres ---- */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --shadow-menu: 0 24px 60px rgba(0, 0, 0, .25);
  --shadow-float: 0 2px 8px rgba(0, 0, 0, .25);

  /* ---- Dimensions de composants ---- */
  --header-height: 56px;
  --header-height-desktop: 72px;
  --header-offset: var(--header-height);   /* hauteur réelle du bloc sticky (header + bannière), publiée par menu.js */
  --badge-height: 22px;
  --badge-height-sm: 18px;     /* badges de carte (10 px, .08em) */
  --ann-height: 36px;
  --tap: 44px;                 /* cible tactile minimale */
  --icon: 24px;
  --icon-sm: 16px;
  --btn-height: 52px;
  --btn-height-sm: 44px;
  --input-height: 52px;
  --card-ratio: 4 / 5;
  --drawer-width: 390px;

  /* ---- Mouvement ---- */
  --duration: 180ms;
  --duration-slow: 320ms;
  --easing: cubic-bezier(.2, .7, .2, 1);

  /* ---- Admin (rail sombre, panneaux, états) ---- */
  --admin-bg: #F4F4F1;
  --admin-surface: #FFFFFF;
  --admin-ink: #1A1A18;
  --admin-muted: #6E6E68;
  --admin-line: #E3E2DC;
  --admin-line-soft: #EFEEE9;
  --admin-accent: #1E6B52;
  --admin-accent-strong: #15503D;
  --admin-rail-bg: #1A1A18;
  --admin-rail-ink: #C9C8C0;
  --admin-rail-active-bg: #2C2C29;
  --admin-rail-count-bg: #3A3A36;
  --admin-ok: #0B7A0B;
  --admin-ok-bg: #E3F3E3;
  --admin-warn: #8A5A00;
  --admin-warn-bg: #FFF1D2;
  --admin-crit: #A32626;
  --admin-crit-bg: #FBE1E1;
  --admin-rail-width: 220px;
  --admin-font-sans: var(--font-sans);
  --admin-text-base: 14px;
}

/* Tablette (720–1023 px) : 3 colonnes, gouttière 8 px, marges 12 px. */
@media (min-width: 720px) {
  :root {
    --grid-cols: 3;
    --grid-gutter: 8px;
    --grid-margin: 12px;
  }
}

/* Desktop : les rôles « display » montent d'un cran. L'échelle reste la même ; seuls les rôles changent de pas
   (+ deux pas hors écran pour le hero). */
@media (min-width: 960px) {
  :root {
    --text-h2: var(--text-34);
    --text-h1: var(--text-42);
    --text-hero: 72px;
    --container-pad: var(--gutter-desktop);
    --grid-row-gap: var(--space-8);
    --header-offset: var(--header-height-desktop);
  }
}

/* Listings desktop (≥ 1024 px) : 4 colonnes, gouttière 8 px, marges 20 px → cartes ≈ 344 px à 1440. */
@media (min-width: 1024px) {
  :root {
    --grid-cols: 4;
    --grid-margin: 20px;
  }
}