/*
 * Design tokens — Miroiterie CD. Visual reference: client mock-up design/reference/Accueil-MCD-maquette.html
 * (replaces the "L'épure" direction, 5/10/2026).
 * Contrast ratios measured (WCAG 2.x) are noted next to each color. Corrections versus the mock-up are marked "CORRIGÉ".
 * Fonts: Archivo and Source Sans 3, SIL Open Font License 1.1, self-hosted, latin subset
 * (licenses: assets/fonts/archivo/OFL.txt, assets/fonts/source-sans-3/OFL.txt).
 */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/archivo/archivo-latin-600-normal.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: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/archivo/archivo-latin-700-normal.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: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-3/source-sans-3-latin-400-normal.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: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-sans-3/source-sans-3-latin-600-normal.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: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/source-sans-3/source-sans-3-latin-700-normal.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 {
  /* ---------- Colors ---------- */
  --color-encre: #152530;          /* main text — 15.68:1 on white, 14.57:1 on gris-fond */
  --color-texte-2: #4a5a64;        /* secondary text — 7.15:1 on white, 6.64:1 on gris-fond, 5.51:1 on photo-attente */
  --color-texte-3: #3d4d57;        /* long-form text — 8.76:1 on white */
  --color-texte-4: #5b6b75;        /* small labels — 5.52:1 on white */

  --color-marque: #028eaa;         /* brand teal: icons, borders, hover borders only — 3.85:1 on white (non-text OK, never text on white) */
  --color-bouton: #027c93;         /* CORRIGÉ (mock-up #028EAA = 3.85:1): buttons and CTA band, white text 4.88:1. Also links: 4.88:1 on white, 4.53:1 on gris-fond */
  --color-bouton-survol: #026f85;  /* white text 5.81:1 */
  --color-lien-survol: #01586a;    /* 8.06:1 on white — also text of the white button */
  --color-nav-haut: #027c93;       /* CORRIGÉ (mock-up #039DBB = 3.21:1): navigation gradient top, white text 4.88:1 */
  --color-nav-bas: #016a7e;        /* CORRIGÉ (mock-up #01788F): navigation gradient bottom, white text 6.24:1 */
  --color-marine: #0c3d54;         /* mobile "Appeler" button, white text 11.59:1 */
  --color-nuit: #0c1a22;           /* footer background */
  --color-voile: rgba(9, 22, 29, 0.86); /* hero text panel over photo */
  --color-voile-plein: #09161d;    /* same tone, opaque: hero panel under the photo on mobile */

  --color-texte-sur-nuit: #c9d5dc; /* 11.83:1 on nuit */
  --color-texte-sur-nuit-2: #8fa1ac; /* 6.63:1 on nuit */
  --color-texte-sur-voile: #e4ebef;  /* hero intro, 15.23:1 */

  --color-blanc: #ffffff;
  --color-gris-fond: #f4f7f8;      /* alternate section background */
  --color-photo-attente: #dce3e7;  /* "photo to supply" placeholder background */
  --color-photo-attente-raie: #d5dde2;
  --color-trait: #e2e8eb;          /* borders and separators */
  --color-trait-2: #d7dfe3;

  /* Provisional content markers ({{A_COMPLETER}}) — mock-ups only */
  --color-a-completer-fond: #fff4cc; /* encre text 14.24:1 */
  --color-a-completer-bord: #8a6a00; /* 4.60:1 on its background */
  --color-erreur: #b3261e;          /* form error text and border — 6.54:1 on white, 6.07:1 on gris-fond */

  /* ---------- Typography ---------- */
  --font-titre: "Archivo", Helvetica, Arial, sans-serif;
  --font-texte: "Source Sans 3", Helvetica, Arial, sans-serif;

  --fs-petit: 0.9063rem;                         /* 14.5 px */
  --fs-secondaire: 0.9706rem;                    /* 16.5 px — card captions, reassurance text */
  --fs-base: 1.0625rem;                          /* 17 px — body */
  --fs-carte: 1.1875rem;                         /* 19 px — card titles */
  --fs-lead: clamp(1.0625rem, 1.5vw, 1.25rem);   /* 17 → 20 px — hero intro */
  --fs-h2-petit: clamp(1.375rem, 2.3vw, 1.75rem);/* 22 → 28 px */
  --fs-h2: clamp(1.5rem, 2.6vw, 2rem);           /* 24 → 32 px */
  --fs-h1: clamp(1.75rem, 3.6vw, 2.75rem);       /* 28 → 44 px */
  --fs-tel: clamp(1.375rem, 2vw, 1.6875rem);     /* 22 → 27 px — header phone number */

  --lh-texte: 1.6;
  --lh-titre: 1.15;
  --measure: 62ch;

  /* ---------- Spacing ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;   /* 20 px — side gutter of the mock-up */
  --space-6: 1.75rem;
  --space-7: 2.5rem;
  --espace-section: clamp(2.75rem, 6vw, 4.5rem);   /* 44 → 72 px between sections */
  --espace-bandeau: clamp(2rem, 4vw, 2.875rem);    /* 32 → 46 px inside tinted bands */
  --largeur-max: 73.75rem;                         /* 1180 px */
  --gouttiere: 1.25rem;                            /* 20 px */

  /* ---------- Lines, corners, focus ---------- */
  --rayon: 2px;
  --cible-tactile: 2.75rem;  /* 44 px */
  --focus: 3px solid var(--color-lien-survol);        /* 8.06:1 against white */
  --focus-sur-sombre: 3px solid var(--color-blanc);    /* on nav, CTA band, hero panel, footer */
  --focus-decalage: 2px;
}