/* =====================================================================
   Vanguard Protection Group — jetons de marque (design tokens)
   Version 1 · novembre 2026
   ---------------------------------------------------------------------
   Principe : un site blanc et net (réf. Brex), ouvert par de grands
   paysages suisses à l'heure bleue (réf. Mercury). Deux matières
   réelles donnent la couleur : le graphite des vestes et le sable de
   l'écusson brodé. Le sable est le SEUL accent.
   Contrastes : calculés selon WCAG 2.1 (luminance relative).
   AA texte courant ≥ 4.5:1 · AA grand texte (≥ 24px, ou ≥ 19px gras) ≥ 3:1
   ===================================================================== */

/* ---------- Police : Archivo variable, auto-hébergée (nLPD) ----------
   Une seule famille. Graisses 100–900, largeurs 62 %–125 %.
   Aucun appel à Google Fonts en production. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/assets/fonts/archivo-latin-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/assets/fonts/archivo-latin-ext-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* =================================================================
     1. COULEURS — palette de base (valeurs brutes)
     ================================================================= */
  --vpg-blanc:    #FFFFFF; /* Blanc — fond principal, 80 % de la surface */
  --vpg-neve:     #F2F3F4; /* Névé — fond alterné, gris froid (jamais crème) */
  --vpg-filet:    #DCDFE2; /* Filet — séparateurs 1px, bordures de champs */
  --vpg-encre:    #181B1E; /* Encre — titres, bouton principal, texte fort */
  --vpg-graphite: #2B2F33; /* Graphite — la veste : surfaces sombres, logo noir */
  --vpg-ardoise:  #4A5057; /* Ardoise — texte courant */
  --vpg-galet:    #646A71; /* Galet — texte secondaire, légendes */
  --vpg-sable:    #C8AE86; /* Sable — l'écusson brodé : SEUL accent de marque */
  --vpg-bronze:   #7A5F3A; /* Bronze — sable assombri, pour l'accent en texte sur fond clair */
  --vpg-nuit:     #0E1A26; /* Nuit — voile des photos (heure bleue), jamais en aplat UI */
  --vpg-erreur:   #B42318; /* Erreur — fonctionnel uniquement (formulaires), jamais décoratif */

  /* =================================================================
     2. COULEURS — rôles (à utiliser dans le code, pas les valeurs brutes)
     ================================================================= */
  --c-fond:            var(--vpg-blanc);
  --c-fond-alt:        var(--vpg-neve);
  --c-fond-sombre:     var(--vpg-graphite);
  --c-titre:           var(--vpg-encre);
  --c-texte:           var(--vpg-ardoise);
  --c-texte-2:         var(--vpg-galet);
  --c-filet:           var(--vpg-filet);
  --c-accent:          var(--vpg-sable);   /* filets, soulignés, pastilles, boutons sur sombre */
  --c-accent-texte:    var(--vpg-bronze);  /* accent quand il doit être LU sur fond clair */
  --c-sur-sombre:      var(--vpg-blanc);
  --c-sur-sombre-2:    rgba(255, 255, 255, .78);
  --c-focus:           var(--vpg-bronze);  /* anneau de focus sur clair (5.96:1) */
  --c-focus-sombre:    var(--vpg-sable);   /* anneau de focus sur sombre/photo (6.33:1) */
  --c-erreur:          var(--vpg-erreur);

  /* Voile photo « heure bleue » : haut et bas plus denses pour le texte */
  --voile-photo: linear-gradient(180deg, rgba(14, 26, 38, .48) 0%, rgba(14, 26, 38, .16) 40%, rgba(14, 26, 38, .12) 62%, rgba(14, 26, 38, .50) 100%);
  --voile-photo-plat: rgba(14, 26, 38, .34);

  /* =================================================================
     3. CONTRASTES VÉRIFIÉS (WCAG 2.1) — paires autorisées
     -----------------------------------------------------------------
     Encre    #181B1E sur Blanc    #FFFFFF  17.29:1  AA / AAA
     Encre    #181B1E sur Névé     #F2F3F4  15.57:1  AA / AAA
     Ardoise  #4A5057 sur Blanc             8.15:1   AA / AAA
     Ardoise  #4A5057 sur Névé              7.34:1   AA / AAA
     Galet    #646A71 sur Blanc             5.47:1   AA
     Galet    #646A71 sur Névé              4.92:1   AA
     Bronze   #7A5F3A sur Blanc             5.96:1   AA
     Bronze   #7A5F3A sur Névé              5.36:1   AA
     Blanc    #FFFFFF sur Encre            17.29:1   AA / AAA (bouton principal)
     Blanc    #FFFFFF sur Graphite         13.49:1   AA / AAA
     Névé     #F2F3F4 sur Graphite         12.14:1   AA / AAA
     Sable    #C8AE86 sur Graphite          6.33:1   AA
     Sable    #C8AE86 sur Encre             8.12:1   AA / AAA
     Encre    #181B1E sur Sable             8.12:1   AA / AAA (bouton sable)
     Encre    #181B1E sur Sable survol #B89B70  6.56:1  AA
     Blanc    #FFFFFF sur Nuit             17.58:1   (texte sur photo voilée : viser ≥ 4.5 réel)
     Erreur   #B42318 sur Blanc             6.57:1   AA
     INTERDIT : Sable sur Blanc 2.13:1 → jamais en texte ni en icône seule.
     INTERDIT : Galet sur Graphite 2.47:1.
     ================================================================= */

  /* =================================================================
     4. TYPOGRAPHIE — une famille, trois réglages
     ================================================================= */
  --f-famille: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* Largeurs (axe wdth) */
  --f-large-normale:  100%;  /* titres et texte */
  --f-large-etendue:  108%;  /* grand titre fin sur photo uniquement */
  --f-large-serree:    88%;  /* données : tableaux, horaires, chiffres */

  /* Graisses */
  --f-fin:      300;  /* titres sur photo (réf. Mercury) */
  --f-regulier: 400;  /* texte */
  --f-moyen:    500;  /* navigation, listes */
  --f-demi:     600;  /* boutons, liens, H4 */
  --f-gras:     700;  /* titres de section (réf. Brex) */

  /* Échelle (fluide entre 375px et 1440px) */
  --t-affiche: clamp(44px, 6.2vw, 92px);   /* titre sur photo · fin 300 · interligne 1.02 */
  --t-h1:      clamp(40px, 5.4vw, 76px);   /* titre de page · gras 700 · 1.0 */
  --t-h2:      clamp(34px, 4.4vw, 60px);   /* titre de section · gras 700 · 1.03 */
  --t-h3:      clamp(24px, 2.6vw, 34px);   /* sous-section · gras 700 · 1.1 */
  --t-h4:      20px;                       /* carte, étape · demi 600 · 1.3 */
  --t-chapo:   clamp(18px, 1.5vw, 21px);   /* introduction · 400 · 1.5 */
  --t-texte:   17px;                       /* courant · 400 · 1.6 */
  --t-petit:   15px;                       /* listes, boutons · 1.5 */
  --t-legende: 13px;                       /* légendes, mentions · 1.45 */

  /* Approche (letter-spacing) : serrée en grand, neutre en petit */
  --ls-affiche: -0.035em;
  --ls-titre:   -0.032em;
  --ls-h3:      -0.022em;
  --ls-texte:    0;

  /* Mesure (longueur de ligne) */
  --mesure-texte: 62ch;
  --mesure-chapo: 44ch;
  --mesure-titre: 18ch;

  /* =================================================================
     5. ESPACEMENTS — base 8
     ================================================================= */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;
  --e-10: 128px;
  --e-11: 176px;

  /* Rythme vertical des sections */
  --section:        clamp(80px, 10vw, 144px);  /* section blanche standard */
  --section-serree: clamp(56px, 7vw, 96px);    /* bloc de transition */
  --titre-contenu:  clamp(40px, 5vw, 64px);    /* entre un H2 et son contenu */

  /* =================================================================
     6. GRILLE
     ================================================================= */
  --grille-max:       1240px;                    /* largeur de contenu */
  --grille-colonnes:  12;
  --grille-goutiere:  24px;
  --grille-marge:     clamp(20px, 4vw, 48px);    /* marge latérale */

  /* =================================================================
     7. RAYONS — sobres, jamais de pilule
     ================================================================= */
  --r-0: 0;      /* photos plein cadre */
  --r-1: 4px;    /* champs de formulaire, étiquettes */
  --r-2: 8px;    /* boutons */
  --r-3: 16px;   /* photos dans le flux, cartes */

  /* =================================================================
     8. OMBRES — presque aucune : on sépare par le filet, pas par l'ombre
     ================================================================= */
  --o-filet:   0 1px 0 var(--vpg-filet);                         /* barre de nav fixée */
  --o-flottant: 0 18px 40px -18px rgba(14, 26, 38, .28);        /* menu déroulant, toast */

  /* =================================================================
     9. COMPOSANTS
     ================================================================= */
  --btn-hauteur:    52px;
  --btn-hauteur-s:  42px;
  --btn-padding:    0 26px;
  --lien-souligne:  2px;

  /* =================================================================
     10. MOUVEMENT — lent, jamais rebondissant
     ================================================================= */
  --m-ease:   cubic-bezier(.16, 1, .3, 1);
  --m-rapide: .2s;
  --m-moyen:  .45s;
  --m-lent:   1.2s;
}

/* Respect des préférences : pas d'animation si demandé */
@media (prefers-reduced-motion: reduce) {
  :root { --m-rapide: 0s; --m-moyen: 0s; --m-lent: 0s; }
}