/* ==========================================================================
   MSA — Design Tokens
   Version 1.0 · Août 2026
   Source de vérité unique du thème MSA (WordPress / WooCommerce).
   ========================================================================== */

:root {
  /* --- Couleurs de marque --------------------------------------------- */
  --msa-black:        #090909;
  --msa-graphite:     #181818;
  --msa-steel:        #6B6B6E;
  --msa-steel-legible: #9A9A9E;  /* texte secondaire SUR NOIR : #6B6B6E n'y donne que 3,75:1 */
  --msa-border:       #E2E2E4;
  --msa-light:        #F3F3F3;
  --msa-white:        #FFFFFF;
  --msa-black-96:     rgba(9, 9, 9, 0.96);
  --msa-white-14:     rgba(255, 255, 255, 0.14);
  --msa-white-18:     rgba(255, 255, 255, 0.18);
  --msa-white-22:     rgba(255, 255, 255, 0.22);
  --msa-white-24:     rgba(255, 255, 255, 0.24);
  --msa-white-28:     rgba(255, 255, 255, 0.28);

  --msa-blue:         #003BEA;  /* accent master — mesuré sur le logo */
  --msa-blue-deep:    #0A2FB4;  /* hover / pressed uniquement */
  --msa-blue-light:   #4D7BFF;  /* texte et liens sur fond noir uniquement */
  --msa-orange:       #FE560F;  /* accent master — mesuré sur le logo */
  --msa-orange-deep:  #C04A00;  /* 4,97:1 — texte orange < 24px sur fond clair,
                                   et toute surface orange portant un libellé blanc */

  /* --- Couleurs fonctionnelles ---------------------------------------- */
  --msa-success:      #127A45;
  --msa-warning:      #D8A400;
  --msa-error:        #C42020;
  --msa-whatsapp:     #25D366;
  --msa-whatsapp-hover:#1FB855;
  --msa-whatsapp-text: var(--msa-black);

  /* --- Rôles sémantiques ---------------------------------------------- */
  --msa-bg:           var(--msa-white);
  --msa-bg-invert:    var(--msa-black);
  --msa-text:         var(--msa-black);
  --msa-text-muted:   var(--msa-steel);
  --msa-text-invert:  var(--msa-white);
  --msa-accent:       var(--msa-orange);        /* aplats, filets, arcs, display ≥ 24px */
  --msa-accent-ui:    var(--msa-orange-deep);   /* boutons, badges, texte d'accent */
  --msa-accent-2:     var(--msa-blue);
  --msa-link:         var(--msa-blue);
  --msa-link-invert:  var(--msa-blue-light);

  /* --- Typographie ----------------------------------------------------- */
  --msa-font-display: "Archivo", "Arial Black", sans-serif;
  --msa-font-text:    "Barlow", Arial, sans-serif;
  --msa-font-cond:    "Barlow Condensed", "Arial Narrow", sans-serif;

  --msa-fs-display:   3.5rem;   /* 56px */
  --msa-fs-h1:        2.5rem;   /* 40px */
  --msa-fs-h2:        1.875rem; /* 30px */
  --msa-fs-h3:        1.375rem; /* 22px */
  --msa-fs-body:      1rem;     /* 16px — minimum absolu mobile */
  --msa-fs-small:     0.875rem; /* 14px */
  --msa-fs-caption:   0.75rem;  /* 12px */
  --msa-fs-price:     1.75rem;  /* 28px */

  --msa-lh-display:   1.0;
  --msa-lh-heading:   1.15;
  --msa-lh-body:      1.6;

  --msa-fw-regular:   400;
  --msa-fw-medium:    500;
  --msa-fw-semibold:  600;
  --msa-fw-bold:      700;
  --msa-fw-black:     800;

  --msa-ls-display:   -0.02em;
  --msa-ls-eyebrow:   0.2em;

  /* --- Espacements (base 8) -------------------------------------------- */
  --msa-space-4:      4px;
  --msa-space-8:      8px;
  --msa-space-12:     12px;
  --msa-space-16:     16px;
  --msa-space-24:     24px;
  --msa-space-32:     32px;
  --msa-space-48:     48px;
  --msa-space-64:     64px;
  --msa-space-80:     80px;
  --msa-space-120:    120px;

  /* --- Rayons ---------------------------------------------------------- */
  --msa-radius-none:  0;
  --msa-radius-sm:    2px;   /* cartes, boutons, champs */
  --msa-radius-md:    4px;   /* vignettes, badges */
  --msa-radius-full:  999px; /* bouton flottant WhatsApp uniquement */

  /* --- Traits ---------------------------------------------------------- */
  --msa-stroke-hair:  1px;
  --msa-stroke-card:  1.5px;
  --msa-stroke-rule:  3px;
  --msa-stroke-arc:   8px;

  /* --- Ombres (usage restreint) ---------------------------------------- */
  --msa-shadow-card:  0 4px 16px rgba(9, 9, 9, 0.10);
  --msa-shadow-menu:  0 8px 28px rgba(9, 9, 9, 0.16);

  /* --- Structure ------------------------------------------------------- */
  --msa-container:    1320px;
  --msa-gutter:       24px;
  --msa-margin:       40px;
  --msa-header-h:     72px;
  --msa-tap-min:      44px;

  /* --- Transitions ----------------------------------------------------- */
  --msa-ease:         cubic-bezier(0.2, 0, 0.2, 1);
  --msa-duration:     180ms;
}

/* --- Points de rupture (référence, pour les media queries) -------------
   SM  480px   MD  768px   LG 1024px   XL 1320px
   Conception mobile d'abord : maquette de référence 390px.
   ---------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --msa-fs-display: 2.25rem;
    --msa-fs-h1:      1.875rem;
    --msa-fs-h2:      1.5rem;
    --msa-margin:     20px;
    --msa-space-80:   48px;
  }
}

/* --- Thème par univers -------------------------------------------------
   Un seul attribut sur <body> bascule l'accent. Aucun composant dupliqué.
   ---------------------------------------------------------------------- */

[data-univers="moto"]   { --msa-accent: var(--msa-orange); --msa-accent-ui: var(--msa-orange-deep); --msa-accent-2: var(--msa-blue); }
[data-univers="marine"] { --msa-accent: var(--msa-blue);   --msa-accent-ui: var(--msa-blue);        --msa-accent-2: var(--msa-orange); }
[data-univers="ssv"]    { --msa-accent: var(--msa-orange); --msa-accent-ui: var(--msa-orange-deep); --msa-accent-2: var(--msa-blue); }

/* Règle de contraste non négociable :
   #FE560F ne porte jamais de texte blanc sous 24px (3,2:1) et ne sert jamais
   de couleur de texte sous 24px sur fond clair. Utiliser --msa-orange-deep.
   Sur fond noir, #FE560F est conforme (6,2:1) et reste la valeur d'accent. */

/* --- Polices auto-hébergées --------------------------------------------
   STRUCTURE OFFICIELLE DU THÈME — les url() ci-dessous en dépendent :

   msa-theme/
   ├── theme.json
   └── assets/
       ├── css/
       │   └── msa-tokens.css   <-- CE FICHIER
       └── fonts/
           ├── Archivo-Variable.woff2
           ├── Barlow-Regular.woff2
           ├── Barlow-SemiBold.woff2
           └── BarlowCondensed-SemiBold.woff2

   Ce fichier vit dans /assets/css/ et les polices dans /assets/fonts/ :
   c'est ce qui rend le "../fonts/" des src ci-dessous correct.
   Déplacer msa-tokens.css ailleurs casse le chargement des polices.

   theme.json, lui, est à la racine du thème et référence les mêmes fichiers
   en "file:./assets/fonts/..." — chemin relatif à cette racine, donc cohérent.

   Archivo et Barlow — SIL Open Font License 1.1, hébergement libre.
   ---------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Variable.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/BarlowCondensed-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}