/* ═══════════════════════════════════════════════════════════════
   00-TOKENS — Les variables du site.
   C'est le SEUL fichier CSS où l'on écrit des valeurs en dur.
   Changer une couleur ici la change partout sur le site.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- Polices auto-hébergées (aucun appel à Google Fonts) ---------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../polices/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../polices/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../polices/lora-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../polices/lora-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../polices/lora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../polices/lora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- COULEURS : fonds ---------- */
  --bg-primary:   #F2EDDE;   /* crème — bandes claires */

  /* Bande alternée : le crème chaud d'origine.
     Essais écartés : bleu pétrole #2E656E (trop tranché) et bronze #7A5A28
     (trop sombre). Pour l'assombrir un peu sans basculer le texte en clair,
     la limite est #D2B06A — au-delà, les textes gris repassent sous le seuil.
     Étapes intermédiaires possibles : #E3CE9C puis #D2B06A. */
  --bande:        #E8DFC8;
  --bg-secondary: var(--bande);

  --bg-card:      #FBF7EA;   /* fond des cartes */
  --bg-card-2:    #F8F2E0;   /* fond des petits badges */
  --bg-white:     #FFFFFF;

  /* ---------- COULEURS : texte ---------- */
  --ink:      #2A2E32;       /* ardoise, issue du logo */
  --ink-soft: #3A4046;
  --ink-mute: #6B7178;
  --ink-hover:#15181B;

  /* ---------- COULEURS : filets ---------- */
  --line:        rgba(42, 46, 50, 0.10);
  --line-strong: rgba(42, 46, 50, 0.18);

  /* ---------- COULEURS : or (accent de marque) ---------- */
  --gold:        #C9923A;
  --gold-deep:   #9B6F1F;
  --or-lisible:  #7E5B21;   /* or foncé : 5,3 sur crème, 4,7 sur la bande — les deux au-dessus du seuil de 4,5 */
  /* Or exact du logo (relevé sur le fichier) : sert au bouton principal du hero.
     Le texte posé dessus est en --ink, pas en blanc : 5,3 contre 1 au lieu de
     2,6, seul le premier passe le seuil de lisibilité. Au survol l'or s'éclaircit
     (6,4 contre 1) — l'assombrir aurait fait retomber sous le seuil. */
  --gold-marque: #C09C54;
  --gold-marque-clair: #CDAA68;
  --gold-light:  #E8C77A;    /* or clair, sur fond sombre */
  --gold-soft:   rgba(201, 146, 58, 0.12);
  --gold-line:   rgba(201, 146, 58, 0.30);
  --gold-glow:   rgba(201, 146, 58, 0.20);

  /* ---------- COULEURS : surfaces spéciales ---------- */
  --footer:         #1F2226;
  --footer-text:    rgba(242, 237, 222, 0.78);
  --footer-mute:    rgba(242, 237, 222, 0.50);
  --footer-line:    rgba(242, 237, 222, 0.10);
  --on-dark:        #FBF7EA;
  --on-dark-soft:   rgba(251, 247, 234, 0.85);
  --whatsapp:       #25D366;
  --whatsapp-hover: #1FB855;
  --error:          #A8322B;
  --error-soft:     rgba(168, 50, 43, 0.08);

  /* Voiles superposés au hero.
     Le fond défile désormais sur plusieurs photos : le voile doit tenir sur
     la plus sombre comme sur la plus claire, pas seulement sur la première.
     --veil-mid est passé de 0,42 à 0,62 et --veil-centre a été ajouté pour
     renforcer la zone du titre. Mesuré sur les quatre images, au point le
     plus défavorable : 6,6 contre 1 pour le titre en --ink, 5,0 pour le
     sous-titre en --ink-soft. Le seuil est à 4,5 — si vous ajoutez une image
     plus sombre, remesurez avant de baisser ces valeurs. */
  --veil-top:    rgba(242, 237, 222, 0.66);
  --veil-mid:    rgba(242, 237, 222, 0.62);
  --veil-bottom: rgba(242, 237, 222, 0.80);
  --veil-left:   rgba(242, 237, 222, 0.50);
  --veil-centre: rgba(242, 237, 222, 0.50);
  --veil-none:   rgba(242, 237, 222, 0);
  --scrim-0:     rgba(15, 18, 22, 0);
  --scrim-1:     rgba(15, 18, 22, 0.40);
  --scrim-2:     rgba(15, 18, 22, 0.78);

  /* Nav translucide */
  --nav-glass:   rgba(242, 237, 222, 0.88);
  --pill-glass:  rgba(251, 247, 234, 0.95);
  --field-bg:    rgba(255, 255, 255, 0.78);
  --card-glass:  rgba(255, 255, 255, 0.62);
  --toggle-bg:   rgba(251, 247, 234, 0.50);

  /* ---------- TYPOGRAPHIE ---------- */
  /* Lora : contraste modere, lisible a toutes les tailles.
     Playfair Display, utilise auparavant, avait des delies si fins
     qu ils disparaissaient dans les petits titres. */
  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-nano:  9.5px;
  --fs-mini:  10.5px;
  --fs-micro: 10px;
  --fs-tiny:  11px;
  --fs-xs:    12px;
  --fs-s:     13px;
  --fs-sm:    14px;
  --fs-base:  15px;
  --fs-md:    16px;
  --fs-lg:    17px;
  --fs-xl:    19px;
  --fs-2xl:   22px;
  --fs-3xl:   24px;
  --fs-4xl:   26px;
  --fs-5xl:   28px;
  --fs-6xl:   36px;
  --fs-7xl:   38px;

  /* Tailles fluides */
  --fs-hero:      clamp(44px, 6.8vw, 96px);
  --fs-hero-sub:  clamp(17px, 1.4vw, 21px);
  --fs-title:     clamp(34px, 4.5vw, 60px);
  --fs-title-page:clamp(40px, 5.5vw, 72px);
  --fs-block:     clamp(26px, 3vw, 40px);
  --fs-quote:     clamp(20px, 2vw, 26px);
  --fs-fact:      clamp(22px, 2.5vw, 30px);
  --fs-metric:    clamp(52px, 6vw, 84px);
  --fs-city:      clamp(22px, 2.2vw, 30px);

  --lh-tight:  1.02;
  --lh-title:  1.1;
  --lh-snug:   1.45;
  --lh-body:   1.6;
  --lh-loose:  1.7;

  --ls-tight:  -0.02em;
  --ls-title:  -0.015em;
  --ls-normal: 0.01em;
  --ls-wide:   0.14em;
  --ls-wider:  0.22em;
  --ls-widest: 0.32em;

  /* ---------- ESPACEMENTS ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  22px;
  --space-6:  28px;
  --space-7:  36px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 80px;
  --space-11: 120px;
  /* Respiration verticale d'une bande. Le haut est plus serré que le bas :
     sans œilleton au-dessus du titre, l'ancien espace laissait un grand vide. */
  --space-12:      clamp(64px, 8vw, 112px);   /* haut de bande */
  --space-12-bas:  clamp(80px, 11vw, 148px);  /* bas de bande */

  --space-half:  2px;
  --space-micro: 3px;
  --space-pill:  7px;
  --space-nudge: 6px;
  --space-gutter: 10px;
  --space-card: clamp(24px, 3.5vw, 48px);

  /* ---------- RAYONS ---------- */
  --radius-s:    12px;
  --radius-m:    16px;
  --radius-l:    22px;
  --radius-xl:   28px;
  --radius-pill: 999px;
  --radius-round:50%;

  /* ---------- BORDURES & TRAITS ---------- */
  --bw:        1px;
  --bw-thick:  2px;
  --rule-s:    24px;   /* petit filet décoratif */
  --rule-m:    32px;
  --rule-l:    44px;

  /* ---------- TAILLES D'ÉLÉMENTS ---------- */
  --dot-xs:    3px;
  --dot-s:     5px;
  --dot-m:     6px;
  --dot-l:     8px;
  --icon-xs:   12px;
  --icon-s:    14px;
  --icon-m:    16px;
  --icon-l:    18px;
  --icon-xl:   36px;
  --logo-size: 44px;
  --tap-size:  40px;         /* cible tactile minimale */
  --tap-large: 44px;
  --check-size:17px;
  --num-col:   56px;   /* colonne des numéros 01, 02, 03… */
  --aside-min: 280px;  /* largeur minimale d'un encadré à plat */
  --pied-marque-min: 300px;  /* largeur minimale du bloc marque du pied */
  --pied-col-min:    180px;  /* largeur minimale d'une colonne du pied */
  --nav-h:     80px;
  --nav-h-sm:  68px;
  --aside-w:   380px;
  --field-min: 118px;

  /* ---------- LARGEURS ---------- */
  --maxw:         1280px;
  --maxw-narrow:  1080px;
  --maxw-text:    880px;
  --maxw-prose:   760px;
  --maxw-sub:     660px;
  --maxw-lead:    620px;
  --maxw-hero:    820px;
  --maxw-hero-sub:600px;
  --maxw-head:    740px;
  --maxw-form:    620px;
  --maxw-tagline: 360px;
  --maxw-metric:  260px;
  --pad-x:        clamp(20px, 4vw, 72px);
  --gap-villes:   clamp(28px, 5vw, 80px);

  /* ---------- OMBRES ---------- */
  --shadow-nav:    0 10px 20px -12px rgba(42, 46, 50, 0.50);
  --shadow-btn:    0 18px 36px -22px rgba(42, 46, 50, 0.55);
  --shadow-gold:   0 16px 32px -20px rgba(160, 127, 60, 0.70);
  --shadow-wa:     0 16px 32px -18px rgba(37, 211, 102, 0.50);
  --shadow-card:   0 32px 64px -36px rgba(42, 46, 50, 0.32);
  --shadow-card-2: 0 36px 64px -40px rgba(42, 46, 50, 0.40);
  --shadow-pin:    0 12px 24px -12px rgba(42, 46, 50, 0.40);
  --shadow-panel:  0 24px 60px -20px rgba(42, 46, 50, 0.30);
  --ring:          0 0 0 3px var(--gold-soft);
  --ring-focus:    0 0 0 3px var(--gold-glow);
  --ring-dot:      0 0 0 3px var(--gold-glow);

  /* ---------- FLOU ---------- */
  --blur-nav:  saturate(160%) blur(16px);
  --blur-pill: blur(8px);

  /* ---------- ANIMATIONS ---------- */
  --t-fast:   0.2s;
  --t-base:   0.25s;
  --t-slow:   0.4s;
  --t-slower: 0.6s;
  --t-image:  0.9s;
  --t-reveal: 0.9s;
  --t-zoom:   18s;
  --t-fondu:  1.4s;   /* croisement entre deux images du hero */
  --ease:        ease;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --lift:        -1px;   /* soulèvement des boutons au survol */
  --lift-card:   -6px;   /* soulèvement des cartes au survol */
  --zoom-card:   1.05;
  --zoom-inv:    1.06;
  --zoom-gallery:1.04;

  /* ---------- PROFONDEUR ---------- */
  --z-below:  -2;
  --z-veil:   -1;
  --z-base:    1;
  --z-over:    2;
  --z-nav:    50;
  --z-menu:   60;

  /* ---------- PROPORTIONS D'IMAGES ---------- */
  --ratio-card:    16 / 10;
  --ratio-invest:  4 / 3.2;
  --ratio-hero:    16 / 11;
  --ratio-gallery: 4 / 3;
  --ratio-map:     5 / 4;
  --ratio-video:   16 / 9;
}