/* ==========================================================================
   Kite Attitude — tokens.css
   Généré depuis les variables Figma (fichier TacmpXsYu1X4DaYn7uu9rK, page « Kite »)
   Collections : global/* → :root ; kite/* et foil/* → .theme-kite / .theme-foil
   Le CSS du thème DOIT consommer ces tokens (mêmes noms que Figma) :
   une variable changée dans Figma = une ligne modifiée ici.
   ========================================================================== */

:root {
  /* ---- Colors (collection global) ---- */
  --c-surface: #ffffff;        /* global/surface */
  --c-surface-alt: #f5f5f5;    /* global/surface-alt — fond des champs */
  --c-page-bg: #f2f2f2;        /* global/page-bg */
  --c-border: #eeeeee;         /* global/border */
  --c-border-subtle: rgba(0, 0, 0, 0.07); /* bordures items FAQ */
  --c-text: #666666;           /* global/text */
  --c-text-muted: #7a7a7a;     /* global/text-muted */
  --c-heading: #222222;        /* global/heading */
  --c-stars: #d6d6d6;          /* étoiles de notation (cartes produit) */
  --c-footer-bottom: #121212;  /* barre basse du footer */

  /* ---- Sizes (collection global) ---- */
  --radius-base: 3px;          /* global/radius/base — boutons, champs, badges */
  --radius-dropdown: 5px;      /* arrondi des sous-menus nav */
  --gutter-page: 160px;        /* marges latérales des sections à 1920 */
  --ls-base: 0.8px;            /* letter-spacing global */

  /* ---- Typographie (styles de texte Poppins) ---- */
  --font-base: "Poppins", sans-serif;
  --fs-xs: 11px;               /* compteur panier */
  --fs-sm: 12px;               /* étoiles, bouton S'ABONNER */
  --fs-base: 14px;             /* corps, nav, liens footer, titres cartes */
  --fs-md: 15px;               /* prix cartes, items FAQ, bouton En Voir Plus */
  --fs-h4: 16px;               /* pseudo avis clients */
  --fs-h3-article: 17px;       /* titres cartes articles (SemiBold) */
  --fs-h3: 18px;               /* titres colonnes footer (Medium) */
  --fs-h2: 26px;               /* titres de sections accueil (Medium, uppercase) */

  /* ---- Colors (collection global — passage 2 : catégorie / produit / auth) ---- */
  --c-heading-soft: #3a3a3a;   /* global/heading-soft — H1 fiche produit */
  --c-black: #000000;          /* global/black — bordure pastille sélectionnée */
  --c-border-soft: rgba(0, 0, 0, 0.07);  /* bordures barre de filtres / onglets */
  --c-border-input: rgba(0, 0, 0, 0.12); /* bordures qty / select produit */
  --c-field-auth-bg: #f1f1f1;        /* global/field-auth-bg */
  --c-field-auth-border: #cccccc;    /* global/field-auth-border */
  --c-field-auth-bg-focus: #ffffff;  /* global/field-auth-bg-focus */
  --c-field-auth-border-focus: rgba(0, 0, 0, 0.25); /* global/field-auth-border-focus */
  --c-error-bg: #f2dede;       /* global/error-bg — alert-danger */
  --c-error-border: #ebcccc;   /* global/error-border */
  --c-error-text: #a94442;     /* global/error-text */
  --c-btn-montrer: #5a5a5a;    /* bouton MONTRER des champs mot de passe */
  --c-panel-border: #efefef;   /* bordure du panneau connexion/inscription */

  /* ---- Typographie (passage 2) ---- */
  --fs-h1-category: 23px;      /* Poppins/H1 Category — SemiBold, lh 1.2, uppercase */
  --fs-h1-product: 26px;       /* H1 fiche produit — Regular, lh 1.3 */
  --fs-price-product: 28px;    /* prix fiche produit — SemiBold */
  --fs-card-list-title: 17px;  /* titre + prix carte liste — SemiBold / Medium */
  --fs-tab: 16px;              /* onglets fiche produit */
  --fs-add-to-cart: 15px;      /* Poppins/Add To Cart — Light 300, lh 1, ls 2px */
  --ls-add-to-cart: 2px;

  /* ---- Effects (durées & ombres) ---- */
  --shadow-dropdown: 0 2px 8px rgba(0, 0, 0, 0.16); /* boxShadow/dropdown (Figma) */
  --shadow-variant: 0 5px 10px rgba(0, 0, 0, 0.14); /* boxShadow/variant (pastilles) */
  --shadow-btn-cart: 4px 4px 4px rgba(0, 0, 0, 0.14); /* bouton AJOUTER AU PANIER */
  --shadow-qty-btn: 1px 2px 3px rgba(0, 0, 0, 0.08);  /* boutons − / + quantité */
  --duration-hover-img: 0.6s;  /* swap d'image des cartes produit (ease-in-out) */
  --duration-btn: 0.3s;        /* transitions boutons / liens (ease-in-out) */
  --duration-menu: 0.1s;       /* apparition des sous-menus */

  /* ---- Lecteur vidéo produit ---- */
  --c-video-bg: #111827;
  --c-video-play: #ff0000;
  --bg-video-preview: linear-gradient(rgba(17, 24, 39, 0.28), rgba(17, 24, 39, 0.82));
  --ratio-product-video: 16 / 9;
  --space-product-video-block: 30px;
  --space-video-trigger: 12px;
  --size-video-play-width: 76px;
  --size-video-play-height: 54px;
  --radius-video-play: 14px;
  --size-focus-ring: 2px;
  --fs-video-play: 22px;
  --shadow-product-video: 0 8px 24px rgba(0, 0, 0, 0.16);
  --shadow-video-play: 0 5px 20px rgba(0, 0, 0, 0.35);
}

/* ---- Déclinaison Kite Attitude (collection kite) ---- */
.theme-kite {
  --c-brand: #427ab5;          /* kite/blue */
  --c-dark-2: #373737;         /* kite/dark-2 — bouton « En Voir Plus » */
  --c-dark: #222222;           /* kite/dark — bouton AJOUTER AU PANIER */
  --c-green-stock: #10cf00;    /* kite/green-stock — jauge de stock */
  --c-red: #db1212;            /* kite/red — astérisque champs requis */
  --c-blue-heading: #5079b1;   /* kite/blue-heading — titres description produit */
  --c-accent: var(--c-brand);
}

/* ---- Déclinaison Foil Attitude (collection foil) ----
   Réconcilié le 06/07/2026 avec les variables Figma foil/* de la collection
   « Colors » (page « Foil », fichier TacmpXsYu1X4DaYn7uu9rK). */
.theme-foil {
  --c-brand: #427ab5;          /* foil/blue — le bleu est LA couleur Foil */
  --c-dark-2: #373737;         /* foil/anthracite-dark — bouton « En Voir Plus » */
  --c-dark: #222222;           /* foil/dark — bouton AJOUTER AU PANIER */
  --c-green-stock: #10cf00;    /* absent de foil/* dans Figma — socle conservé, signalé */
  --c-red: #db1212;            /* foil/red — badge compteur / astérisques */
  --c-blue-heading: #5079b1;   /* absent de foil/* dans Figma (kite/blue-heading) — signalé */
  --c-accent: var(--c-brand);

  /* Tokens propres à la déclinaison Foil (Figma foil/*) */
  --c-menu-bar-bg: #427ab5;    /* foil/menu-bar-bg — barre de menu bleue */
  --c-menu-link: #ffffff;      /* foil/menu-link — liens du menu, blancs uppercase */
  --c-blue-logo: #2b7bba;      /* foil/blue-logo */
  --c-red-outstock: #ff1505;   /* foil/red-outstock — « Aucun produit disponible » */
  --c-gray: #7a7a7a;           /* foil/gray */
  --c-gray-dark: #444444;      /* foil/anthracite — flèches sliders */
  /* foil/black = #000000 : déjà exposé par --c-black (global/black) */

  /* Tailles spécifiques mesurées sur la page Figma « Foil » */
  --fs-h2: 30px;               /* titres de sections accueil (30px Medium uppercase) */
  --fs-price-product: 18px;    /* prix fiche produit — 18px Medium foil/blue */
  --fs-card-list-title: 14px;  /* titre carte liste — 14px SemiBold */
}

/* Filet de sécurité : si le body ne porte aucune classe de déclinaison. */
body:not(.theme-kite):not(.theme-foil) {
  --c-brand: #427ab5;
  --c-dark-2: #373737;
  --c-dark: #222222;
  --c-green-stock: #10cf00;
  --c-red: #db1212;
  --c-blue-heading: #5079b1;
  --c-accent: var(--c-brand);
}

/* CLIENT-28 — aliases du design system pour les composants d'accueil. */
:root {
  --cs-home-surface: var(--c-surface);
  --cs-home-text: var(--c-heading);
  --cs-home-muted: var(--c-text-muted);
  --cs-home-border: var(--c-border);
  --cs-home-accent: var(--c-accent);
  --cs-home-on-accent: var(--c-surface);
  --cs-product-section-block-start: 55px;
  --cs-product-section-block-end: 60px;
  --cs-product-container-width: 1630px;
  --cs-product-container-gutter: 15px;
  --cs-product-tab-gap: 20px;
  --cs-product-grid-gap-inline: 16px;
  --cs-product-grid-gap-block: 18px;
  --cs-product-card-column: calc((100% - var(--cs-product-grid-gap-inline) - var(--cs-product-grid-gap-inline) - var(--cs-product-grid-gap-inline) - var(--cs-product-grid-gap-inline)) / 5);
  --cs-product-controls-gap: 15px;
  --cs-product-control-space: 25px;
  --cs-product-arrow-size: 44px;
  --cs-home-cta-pad-block: 11px;
  --cs-home-cta-pad-inline: 20px;
  --cs-home-video-ratio: 16 / 5;
  --cs-home-video-min-height: 260px;
  --cs-home-video-play-width: 78px;
  --cs-home-video-play-height: 56px;
  --cs-home-video-overlay: rgba(0, 0, 0, 0.32);
  --cs-home-video-play-bg: var(--c-video-play);
  --cs-home-video-cta-space-block: var(--space-product-video-block);
  --cs-home-video-cta-max-width: 280px;
  --cs-blog-heading-gap: 24px;
  --cs-blog-mobile-space: 22px;
  --cs-focus-size: var(--size-focus-ring);
  --cs-breakpoint-mobile-columns: 2;
}

/* --c-accent est défini sur le body par boutique : résoudre son alias au
   même niveau, plutôt que sur :root où la variable n'existe pas encore. */
.theme-kite,
.theme-foil,
body:not(.theme-kite):not(.theme-foil) {
  --cs-home-accent: var(--c-accent);
}