/* Variables du design system : copie telle quelle du bloc :root de docs/design/design-system/styles.css, sans renommer ni ajouter (contrôlé par tests/design-system.sh). */

:root {
  /* Couleurs (logo : bleu #005098, vert #80b820) */
  --couleur-nuit: #062240;            /* fond profond : héros, sections immersives, pied de page */
  --couleur-bleu: #005098;            /* primaire : boutons, liens, titres de section */
  --couleur-bleu-fonce: #0b3d78;      /* survol du primaire */
  --couleur-vert: #80b820;            /* accent : filet moléculaire, étiquettes, puces (jamais texte sur fond clair) */
  --couleur-vert-texte: #3f6a05;      /* texte vert sur fond clair (6,41:1 sur blanc) */
  --couleur-vert-fonce: #4f7a0e;      /* bouton accent et étiquettes vertes : texte blanc dessus (5,09:1) */
  --couleur-surface: #ffffff;         /* surface claire */
  --couleur-surface-pale: #eef3f8;    /* surface pâle : fond des photos, sections calmes */
  --couleur-surface-bleutee: #d6e6f4; /* surface bleutée : encarts, mise en avant */
  --couleur-texte: #10233a;           /* texte courant sur clair */
  --couleur-texte-2: #4a5b6e;         /* texte secondaire sur clair (6,97:1) */
  --couleur-texte-inverse: #ffffff;   /* texte sur nuit et sur bleu */
  --couleur-texte-muet-inverse: #b6c6d8; /* texte secondaire sur nuit (9,2:1) */
  --couleur-bordure: #6f87a0;         /* bordures de champs et icônes utiles (3,33:1 sur pâle) */
  --couleur-filet: #c9d6e3;           /* filets décoratifs, séparateurs non porteurs */
  --couleur-voile-nuit: rgba(6, 34, 64, 0.72); /* voile sur la photo du héros */
  --couleur-voile-photo: rgba(6, 34, 64, 0.35); /* voile sur les photos de domaine (texte dessus), allégé (ticket 025) */
  --couleur-voile-heros: rgba(6, 34, 64, 0.45); /* voile allégé du héros pleine largeur (ticket 018) */
  --couleur-plancher-heros: rgba(6, 34, 64, 0.85); /* plancher sous les CTA et les chiffres du héros, quelle que soit la photo */
  --opacite-photo-heros: 1;           /* photo pleine largeur du héros, sous le voile */
  --opacite-photo-appel: 0.60;        /* photo de fond de la section « Demande spécifique » (ticket 025) */
  --opacite-logo-marque: 0.82;        /* logos de marques en blanc sur nuit */
  --hauteur-logo-marque: 40px;
  --taille-flottant: 56px;            /* bouton WhatsApp flottant */
  --largeur-popup: 340px;             /* popup promotionnel en bas à gauche */
  --hauteur-entete-flottante: 108px;  /* barre de navigation flottante de l'accueil (76 px + marges) : dégagement du héros */
  --couleur-ombre: rgba(6, 34, 64, 0.18);
  --couleur-focus: #80b820;

  /* Typographie (échelle 1,25) */
  --police-titre: "Archivo", "Arial Narrow", sans-serif;
  --police-texte: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --taille-xs: 0.75rem;     /* 12 px : étiquettes */
  --taille-s: 0.875rem;     /* 14 px : métadonnées */
  --taille-base: 1.0625rem; /* 17 px : texte courant */
  --taille-m: 1.25rem;      /* 20 px */
  --taille-l: 1.5625rem;    /* 25 px : h3 */
  --taille-xl: 1.953rem;    /* 31 px : h2 petit */
  --taille-2xl: clamp(2rem, 1.2rem + 2.2vw, 3.05rem);     /* h2 : 32 → 49 px */
  --taille-heros: clamp(2.5rem, 1.5rem + 3.8vw, 6rem);     /* h1 héros : 40 → 56 à 1280 → 96 à 1920 */
  --taille-titre-page: clamp(2.25rem, 1.4rem + 2.6vw, 3.8rem); /* h1 des pages intérieures */
  --interligne: 1.5;
  --interligne-titre: 1.02;
  --interlettrage-titre: -0.02em;
  --interlettrage-etiquette: 0.12em;
  --graisse-texte: 400;
  --graisse-moyenne: 500;
  --graisse-forte: 600;
  --graisse-titre: 800;

  /* Espacements (base 8 px) */
  --espace-1: 0.25rem;
  --espace-2: 0.5rem;
  --espace-3: 0.75rem;
  --espace-4: 1rem;
  --espace-5: 1.5rem;
  --espace-6: 2rem;
  --espace-7: 3rem;
  --espace-8: 4rem;
  --espace-9: 6rem;
  --espace-10: 8rem;
  --largeur-contenu: 1200px;
  --largeur-texte: 68ch;
  --marge-page: clamp(1rem, 4vw, 3rem);
  --cible-tactile: 44px;

  /* Formes, ombres, mouvement */
  --rayon-s: 4px;
  --rayon-m: 10px;
  --rayon-l: 20px;
  --rayon-rond: 999px;
  --epaisseur-bordure: 1.5px;
  --epaisseur-filet: 2px;
  --ombre-douce: 0 6px 20px var(--couleur-ombre);
  --ombre-haute: 0 18px 48px var(--couleur-ombre);
  --duree-courte: 180ms;
  --duree-moyenne: 450ms;
  --duree-longue: 700ms;
  --decalage-sequence: 110ms;
  --courbe: cubic-bezier(0.22, 1, 0.36, 1);
  --anneau-focus: 0 0 0 3px var(--couleur-surface), 0 0 0 6px var(--couleur-vert-texte);
}