/* =========================================================================
   Jetons de conception — Domaine de Sarromas

   Direction « Volets bleus » : la façade de pierre blonde, ses volets
   bleu vif et ses ancres de fer forgé. Crème et sable pour les fonds,
   bleu pour tout ce qui se clique, encre bleutée pour le texte.

   Les couleurs portent le préfixe --c- : scripts/contraste.mjs les lit ici
   et vérifie chaque couple texte / fond employé. À relancer après toute
   retouche (npm run contraste).
   ========================================================================= */

:root {
  /* --- Couleurs --------------------------------------------------------- */

  /* Fonds */
  --c-creme: #f7f3ea;        /* fond du logo, fond de page */
  --c-sable: #ede3d0;        /* sections alternées, pierre au soleil */
  --c-blanc: #fffdf8;        /* cartes, champs */
  --c-pierre: #d8c8a4;       /* filets, ornements ; texte secondaire sur nuit */

  /* Bleus, relevés sur les volets de la façade (#4c90d8 au soleil) */
  --c-bleu-volet: #3f7dc2;   /* aplats décoratifs, grands titres script */
  --c-bleu: #2a5c99;         /* liens, boutons, sur-titres */
  --c-bleu-fonce: #1f4677;   /* survol */
  --c-bleu-clair: #a9c8ec;   /* liens sur fond nuit */
  --c-nuit: #1a2c47;         /* pied de page, voiles sur photo */

  /* Texte */
  --c-encre: #262a31;        /* encre du logo, un rien bleutée */
  --c-encre-douce: #555961;
  --c-bordure: #8d8a82;      /* bordure de champ : 3:1 sur blanc */
  --c-filet: #e2d7c2;        /* séparateurs non porteurs de sens */

  /* États */
  --c-erreur: #a3312a;
  --c-succes: #2d6a3e;

  /* --- Typographie ------------------------------------------------------ */

  --f-titre: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --f-script: 'Great Vibes', 'Snell Roundhand', cursive;
  --f-texte: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Échelle fluide : du téléphone (360 px) au grand écran (1440 px) */
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;                                   /* texte courant */
  --t-l: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); /* chapô */
  --t-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --t-2xl: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --t-3xl: clamp(2.5rem, 1.8rem + 3.2vw, 4.5rem);
  --t-script: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);

  --lh-serre: 1.1;
  --lh-titre: 1.2;
  --lh-texte: 1.65;

  /* --- Espacements ------------------------------------------------------ */

  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-section: clamp(4rem, 3rem + 5vw, 8rem);

  --gouttiere: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --largeur: 76rem;          /* conteneur principal */
  --largeur-texte: 40rem;    /* colonne de lecture */

  /* --- Formes ----------------------------------------------------------- */

  --r-petit: 4px;
  --r-moyen: 10px;
  --r-grand: 22px;
  --r-arche: 999px 999px 0 0;   /* fenêtre cintrée */

  --ombre-douce: 0 1px 2px rgb(26 44 71 / 6%), 0 8px 24px rgb(26 44 71 / 8%);
  --ombre-carte: 0 2px 4px rgb(26 44 71 / 6%), 0 18px 40px -12px rgb(26 44 71 / 22%);

  /* --- Mouvement -------------------------------------------------------- */

  --d-rapide: 160ms;
  --d-moyen: 320ms;
  --d-lent: 700ms;
  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Départ vif, arrivée très lente : pour les apparitions et les photos. */
  --courbe-douce: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Interface -------------------------------------------------------- */

  --cible: 44px;             /* cible tactile minimale */
  --hauteur-entete: 76px;
}