/* ==========================================================================
   F&H — Design tokens (from « Concept de refonte », boards 04–08)
   ========================================================================== */
:root {
  /* Couleur */
  --fh-white-50: #FFFFFF;   /* surfaces, cartes, champs */
  --fh-white-100: #F6F6F5;  /* fond de page */
  --fh-white-200: #EDEDEB;  /* fonds discrets, désactivé */
  --fh-white-300: #E0E0DD;  /* filets, séparateurs */
  --fh-white-400: #CBCBC7;  /* bordures de champs, contours */
  --fh-black-900: #0B0B0C;  /* texte, boutons, logo, sections sombres */
  --fh-black-800: #151517;  /* scène produit, dégradés */
  --fh-black-700: #1F1F22;  /* survol boutons sombres */
  --fh-black-600: #2A2A2E;  /* filets sur fond sombre */
  --fh-grey-2: #48484D;
  --fh-grey-3: #66666B;
  --fh-grey-4: #A5A5A9;
  --fh-yellow-500: #F5C400; /* CTA principal, badges promo, compteur panier */
  --fh-yellow-400: #FFD633; /* accent et prix sur fond noir */
  --fh-yellow-700: #7D6400; /* prix promo, liens accent sur blanc */
  --fh-yellow-50: #FFF6CC;  /* fond « Nouveau en boutique » */
  --fh-green: #2F7D4F;      /* en stock */
  --fh-amber: #B7791F;      /* stock faible */
  --fh-red: #B42318;        /* erreur / rupture */

  /* Typo */
  --fh-font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fh-font-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --fh-wdth-display: 118%;
  --fh-wdth-display2: 112%;
  --fh-wdth-title: 108%;
  --fh-wdth-cond: 90%;
  --fh-wdth-eyebrow: 78%;

  /* Grille & espace (base 4) */
  --fh-container: 1360px;
  --fh-margin: 40px;
  --fh-gutter: 24px;
  --fh-section: 112px;
  --fh-section-title-gap: 48px;
  --fh-card-gap-x: 24px;
  --fh-card-gap-y: 48px;
  --fh-s1: 4px; --fh-s2: 8px; --fh-s3: 12px; --fh-s4: 16px; --fh-s5: 24px; --fh-s6: 32px; --fh-s7: 48px; --fh-s8: 64px; --fh-s9: 96px; --fh-s10: 112px; --fh-s11: 160px;

  /* Forme */
  --fh-r-press: 2px;   /* boutons, champs, badges */
  --fh-r-card: 4px;    /* cartes, visuels, encarts */
  --fh-r-sheet: 16px;  /* feuilles mobiles */
  --fh-r-pill: 999px;

  /* Ombres */
  --fh-shadow-hover: 0 12px 32px -12px rgba(11, 11, 12, .22);
  --fh-shadow-float: 0 32px 64px -24px rgba(11, 11, 12, .35);

  /* Mouvement */
  --fh-t-micro: 150ms;
  --fh-t-state: 250ms;
  --fh-t-reveal: 400ms;
  --fh-t-scene: 700ms;
  --fh-e-out: ease-out;
  --fh-e-state: cubic-bezier(.2, .8, .2, 1);
  --fh-e-reveal: cubic-bezier(.16, 1, .3, 1);

  /* Header */
  --fh-topbar-h: 40px;
  --fh-bar-h: 88px;
  --fh-bar-h-compact: 64px;
}

@media (max-width: 1279px) { :root { --fh-margin: 40px; } }
@media (max-width: 1023px) { :root { --fh-margin: 32px; --fh-gutter: 20px; --fh-section: 80px; } }
@media (max-width: 767px)  { :root { --fh-margin: 16px; --fh-gutter: 12px; --fh-section: 56px; --fh-section-title-gap: 32px; --fh-card-gap-y: 32px; --fh-bar-h: 64px; --fh-topbar-h: 32px; } }

@media (prefers-reduced-motion: reduce) {
  :root { --fh-t-micro: 150ms; --fh-t-state: 150ms; --fh-t-reveal: 150ms; --fh-t-scene: 150ms; }
}