/* ============================================================
   TOKENS — source unique des couleurs.
   Deux couches : la palette de marque (préfixe --p-), relevée
   sur la charte ACNA, puis la couche sémantique (--c-) que
   consomment les composants. Un composant ne référence jamais
   une teinte brute : on recolorise en changeant les mappings
   ci-dessous, jamais les feuilles de style des composants.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     PALETTE DE MARQUE — relevée sur la charte ACNA.
     Couche brute : ces quatre teintes ne sont jamais utilisées
     directement dans les composants, elles alimentent la couche
     sémantique ci-dessous.
     ---------------------------------------------------------- */
  --p-turquoise: #45b5b7;
  --p-turquoise-fonce: #2f9092; /* survol / état actif */
  --p-bleu-glace: #a9cde9;
  --p-bleu-glace-clair: #dcedf7; /* haut du dégradé de la charte */
  --p-bleu-glace-fonce: #7dafda; /* bas du dégradé de la charte */
  --p-marine: #0c214b; /* marine bleui — un cran plus clair et plus gai que l'ancien #0d1729 */
  --p-marine-clair: #1d3563; /* marine éclairci — survols sur fond marine */
  --p-bleu-petrole: #2d6783; /* pivot du dégradé accent, entre marine et turquoise */
  --p-turquoise-vif: #4ca7b7; /* extrémité claire du dégradé accent */
  --p-blanc-casse: #f3f2ed;

  /* Dégradé « light ice blue » tel qu'il figure sur la charte */
  --g-bleu-glace: linear-gradient(to bottom, var(--p-bleu-glace-clair), var(--p-bleu-glace-fonce));

  /* Surfaces — trois paliers, pas plus */
  --c-base: var(--p-blanc-casse);
  --c-surface: #ffffff;
  --c-raised: var(--p-bleu-glace-clair);

  /* Traits */
  --c-hairline: color-mix(in srgb, var(--p-marine) 14%, var(--p-blanc-casse));
  --c-line: var(--p-marine);

  /* Texte — trois paliers, pas plus */
  --c-text: var(--p-marine);
  --c-secondary: color-mix(in srgb, var(--p-marine) 68%, var(--p-blanc-casse));
  --c-faint: color-mix(in srgb, var(--p-marine) 42%, var(--p-blanc-casse));

  /* Accent = inversion (fond marine + texte off-white) */
  --c-accent: var(--p-marine);
  --c-accent-dim: var(--p-marine-clair);
  --c-on-accent: var(--p-blanc-casse);

  /* Dégradés accent — la gaîté passe par eux, pas par de nouvelles teintes
     plates. Deux variantes :
     — plein : marine → pétrole → turquoise, réservé aux surfaces où le
       texte reste calé sur la moitié sombre (bandeaux illustrés) ;
     — profond : marine → pétrole seulement, pour toute surface qui porte
       du texte courant en off-white (pétrole tient 5,3:1, le turquoise
       vif plafonnerait à 2,8:1). */
  --g-accent: linear-gradient(90deg, var(--p-marine) 0%, var(--p-bleu-petrole) 50%, var(--p-turquoise-vif) 100%);
  --g-accent-profond: linear-gradient(135deg, var(--p-marine) 0%, var(--p-bleu-petrole) 100%);

  /* Lavis de surface — blanc glissant vers le bleu glace, pour teinter les
     sections alternées sans quitter les trois paliers de surface */
  --g-surface-douce: linear-gradient(180deg, var(--c-surface) 0%, var(--c-raised) 100%);

  /* Trait vif — survols et petits accents colorés du corps de page.
     Les deux teintes servent aussi d'étapes au dégradé SVG du logotype. */
  --c-vif: var(--p-bleu-petrole);
  --c-vif-clair: var(--p-turquoise-vif);

  /* Action = turquoise. Le libellé passe en marine et non en blanc :
     blanc sur turquoise plafonne à 2,5:1, marine sur turquoise atteint
     6,7:1 et reste lisible à petit corps. */
  --c-action: var(--p-turquoise);
  --c-action-dim: var(--p-turquoise-fonce);
  --c-on-action: var(--p-marine);

  /* Visuels — placeholders d'images et fonds du héros. Volontairement
     neutres (noir/blanc, R = G = B) et non marine : ils tiennent lieu de
     photographies, qui ne prendront pas la teinte de la charte. */
  --c-visuel-encre: #141414;
  --c-visuel-base: #ffffff;

  /* Danger : même encre — le signal passe par le glyphe et le trait */
  --c-danger: var(--p-marine);

  /* Marine en alpha — ombres et voiles */
  --c-shadow: rgba(12, 33, 75, 0.16);
  --c-shadow-fort: rgba(12, 33, 75, 0.32);
  --c-scrim: rgba(12, 33, 75, 0.55);

  /* Rayons — faibles, l'esprit est anguleux */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 10px;

  /* Échelle d'espacement */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --sp-9: 64px;
  --sp-10: 80px;
  --sp-11: 104px;
  --sp-12: 128px;

  /* Échelle typographique — sauts francs (≥ ×1,4 entre niveaux display) */
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 22px;
  --fs-xl: clamp(26px, 3vw, 32px);
  --fs-2xl: clamp(34px, 4.5vw, 46px);
  --fs-3xl: clamp(46px, 6vw, 66px);
  --fs-4xl: clamp(58px, 8.5vw, 94px);
  --fs-5xl: clamp(72px, 11vw, 132px);

  /* Marques tierces — couleurs imposées par la charte de chaque service,
     volontairement hors de la palette ACNA. Un bouton « écrire sur
     WhatsApp » n'est reconnaissable que dans le vert de WhatsApp. */
  --m-whatsapp: #25d366;
  --m-whatsapp-fonce: #1da851;
  --m-whatsapp-texte: #ffffff;
  /* dégradé du bouton : vert clair en haut, vert profond en bas */
  --g-whatsapp: linear-gradient(160deg, #4ae07f 0%, var(--m-whatsapp) 45%, #12a44c 100%);
  --g-whatsapp-survol: linear-gradient(160deg, var(--m-whatsapp) 0%, var(--m-whatsapp-fonce) 50%, #0d8a3f 100%);

  /* Flou des photos du héros — 0 pour revenir à des visuels nets */
  --hero-flou: 1.5px;

  /* Gabarit */
  --maxw: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --h-entete: 92px;
}