/* ==========================================================================
   variables.css — jetons de design
   Étude notariale Maître Eric Druelle

   Direction : institutionnelle et éditoriale. Fond clair dominant, bleu
   nuit réservé aux blocs d'accentuation, or employé avec parcimonie
   (filets, numéros, surtitres). Angles quasi droits, pas d'ombre portée
   marquée : la hiérarchie repose sur la typographie et les filets.

   CONTRASTES — vérifiés (WCAG 2.1 AA, seuil 4.5:1 pour le texte) :
     --c-encre      #2B2B2B sur --c-blanc     #FFFFFF ...... 14.26:1  OK
     --c-encre      #2B2B2B sur --c-ivoire    #F7F4EE ...... 12.94:1  OK
     --c-encre-doux #5A5B60 sur --c-ivoire    #F7F4EE ......  6.21:1  OK
     --c-bleu-nuit  #1B2A41 sur --c-ivoire    #F7F4EE ...... 13.19:1  OK
     --c-or-texte   #8A6A3B sur --c-ivoire    #F7F4EE ......  4.56:1  OK
     --c-or-texte   #8A6A3B sur --c-blanc     #FFFFFF ......  5.02:1  OK
     --c-blanc      #FFFFFF sur --c-bleu-nuit #1B2A41 ...... 14.41:1  OK
     --c-or         #B08D57 sur --c-bleu-nuit #1B2A41 ......  4.62:1  OK
     --c-bleu-nuit  #1B2A41 sur --c-or        #B08D57 ......  4.62:1  OK

   PROSCRIT : --c-or (#B08D57) en couleur de texte sur fond clair
              (2.86:1 sur ivoire). Utiliser --c-or-texte.
   ========================================================================== */

:root {
  /* ---------- Palette de marque (imposée) ---------- */
  --c-bleu-nuit: #1b2a41;
  --c-bleu-nuit-clair: #27384f;
  --c-bleu-nuit-fonce: #121d2e;
  --c-or: #b08d57;
  --c-or-clair: #c7a673;
  --c-or-texte: #8a6a3b; /* seule déclinaison lisible sur fond clair */
  --c-ivoire: #f7f4ee;
  --c-ivoire-fonce: #ebe6da;
  --c-anthracite: #2b2b2b;
  --c-blanc: #ffffff;

  /* ---------- Rôles ---------- */
  --c-fond: var(--c-blanc);
  --c-fond-alt: var(--c-ivoire);
  --c-fond-sombre: var(--c-bleu-nuit);
  --c-encre: var(--c-anthracite);
  --c-encre-doux: #5a5b60;
  --c-encre-inverse: var(--c-blanc);
  --c-encre-inverse-doux: rgba(255, 255, 255, 0.78);
  --c-titre: var(--c-bleu-nuit);
  --c-accent: var(--c-or);
  --c-accent-texte: var(--c-or-texte);

  /* Filets : l'ossature visuelle du site */
  --c-filet: #e0dacd;
  --c-filet-fort: #cdc4b2;
  --c-filet-or: rgba(176, 141, 87, 0.55);
  --c-filet-sombre: rgba(255, 255, 255, 0.14);

  --c-erreur: #9b2226;
  --c-succes: #1f5c3d;

  /* ---------- Typographie ---------- */
  --f-titre: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype",
    Palatino, "Times New Roman", serif;
  --f-texte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Échelle fluide. Les grands corps serrent l'interlettrage, les petits
     l'ouvrent : c'est ce qui donne l'allure « imprimée ». */
  --t-2xs: 0.72rem;
  --t-xs: 0.78rem;
  --t-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.94rem);
  --t-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --t-md: clamp(1.08rem, 1.02rem + 0.28vw, 1.25rem);
  --t-lg: clamp(1.3rem, 1.16rem + 0.68vw, 1.75rem);
  --t-xl: clamp(1.65rem, 1.35rem + 1.45vw, 2.6rem);
  --t-2xl: clamp(2.15rem, 1.6rem + 2.7vw, 4rem);
  --t-3xl: clamp(2.6rem, 1.7rem + 4.2vw, 5.25rem);

  --lh-serre: 1.06;
  --lh-titre: 1.14;
  --lh-texte: 1.72;

  --ls-titre: -0.012em; /* resserrement optique des grands corps serif */
  --ls-sur: 0.2em; /* surtitres capitales espacées */
  --ls-nav: 0.08em;

  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* ---------- Espacements ---------- */
  --e-3xs: 0.25rem;
  --e-2xs: 0.5rem;
  --e-xs: 0.75rem;
  --e-sm: 1rem;
  --e-md: 1.5rem;
  --e-lg: 2.25rem;
  --e-xl: 3.5rem;
  --e-2xl: 5rem;
  --e-3xl: 7rem;

  /* Respiration verticale des sections — généreuse, c'est le principal
     marqueur de tenue institutionnelle. */
  --e-section: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* ---------- Rayons : quasi nuls ---------- */
  --r-xs: 1px;
  --r-sm: 2px;
  --r-md: 3px;
  --r-pilule: 999px;

  /* ---------- Ombres : discrètes, jamais décoratives ---------- */
  --o-sm: 0 1px 2px rgba(27, 42, 65, 0.05);
  --o-md: 0 4px 18px rgba(27, 42, 65, 0.07);
  --o-lg: 0 14px 40px rgba(27, 42, 65, 0.13);

  /* ---------- Mise en page ---------- */
  --l-contenu: 76rem;
  --l-texte: 38rem; /* ~70 signes : confort de lecture */
  --l-gouttiere: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);

  /* ---------- Interaction ---------- */
  --cible-tactile: 44px;
  --h-bandeau: 2.25rem; /* bandeau utilitaire haut */
  --h-header: 4.75rem;
  --h-header-compact: 3.75rem;

  /* Empilement — l'ordre ci-dessous doit être respecté.
     .site-header est en position:sticky AVEC un z-index : il crée donc un
     CONTEXTE D'EMPILEMENT. Le menu, qui est son enfant, ne peut pas
     passer au-dessus d'un frère du header, quel que soit son z-index
     propre. Le voile doit par conséquent rester SOUS --z-header, sans
     quoi il recouvre le menu et en intercepte les clics. */
  --z-flottant: 90; /* bouton WhatsApp flottant */
  --z-voile: 95; /* voile : au-dessus du contenu, sous l'en-tête */
  --z-header: 100; /* en-tête sticky — et le menu qu'il contient */

  /* ---------- Transitions ---------- */
  --tr-rapide: 140ms ease;
  --tr-base: 220ms ease;
  --tr-lente: 300ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---------- WhatsApp ---------- */
  --c-whatsapp: #1d7a4c; /* vert assombri : 4.54:1 avec du blanc */
  --c-whatsapp-survol: #17633d;
  --espace-flottant: 76px; /* réserve sous le footer, mobile */
}