/* ============================================================================
   TOKENS — les réglages visuels de tout le site.
   Changer une valeur ici la change partout.

   Parti pris : la charte de la plaquette partenaires 2026-2027. Un bleu pétrole
   profond, un turquoise d'eau calme, une touche de sable ; des titres fins et
   aérés, des cartes aux coins doux sur fond menthe ou sable, et des vagues
   pour séparer les grandes sections. Toujours peu d'effets : pas d'ombres
   portées molles, pas de dégradés décoratifs en dehors des photos.
   ========================================================================= */

/* Les polices sont chargées ici, pour toutes les pages d'un coup */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700&display=swap");

:root {
  /* Couleurs tirées de la plaquette partenaires */
  --petrole: #173f53;       /* le bleu profond des titres et des bandeaux */
  --petrole-2: #1f4d63;
  --turquoise: #387f89;     /* sur-titres, liens, boutons */
  --turquoise-fonce: #2b6670;
  --lagon: #a2d4d5;         /* la vague claire */
  --menthe: #edf6f5;        /* fond des cartes « contribution » */
  --sable: #c2ab7d;         /* les petites touches dorées */
  --sable-clair: #f5f1e8;   /* fond des cartes « engagement » */
  --marine: var(--petrole);
  --marine-2: var(--petrole-2);
  --encre: var(--petrole);

  /* Rôles — utiliser ceux-là dans les composants */
  --fond: #fbfcfc;
  --fond-doux: var(--menthe);
  --texte: #3e5058;
  --texte-doux: #64777e;
  --titre: var(--petrole);
  --accent: var(--turquoise);
  --bordure: #d8e6e5;
  --bordure-forte: var(--petrole);
  --fond-sombre: var(--petrole);
  --texte-sur-sombre: #f2f8f8;
  --texte-doux-sur-sombre: #b5d3d6;
  --bleu-clair: var(--lagon); /* accent sur fond sombre */
  --a-completer: #b45309;

  /* Typographie : titres fins comme sur la plaquette, texte très lisible */
  --police-titre: "Outfit", system-ui, sans-serif;
  --police-texte: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Verdana, sans-serif;
  --graisse-titre: 400;
  --taille-xs: 0.78rem;
  --taille-s: 0.9375rem;
  --taille-m: 1.0625rem;
  --taille-l: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  --taille-xl: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem);
  --taille-xxl: clamp(2.7rem, 1.5rem + 5.4vw, 6rem);

  /* Espacements */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 1rem;
  --esp-4: 1.5rem;
  --esp-5: 2.5rem;
  --esp-6: 4rem;
  --esp-section: clamp(4.5rem, 3rem + 6vw, 8rem);

  /* Formes — des coins doux, comme les cartes de la plaquette */
  --rayon: 10px;
  --rayon-l: 18px;
  --rayon-bouton: 999px;

  /* Mise en page */
  --largeur-max: 1220px;
  --marge-laterale: clamp(1.25rem, 5vw, 3.5rem);
  --hauteur-header: 76px;
}