/* ============================================================================
   Fonts — AUTO-HÉBERGÉES (RGPD : aucun appel au CDN Google, l'IP du visiteur
   n'est transmise à aucun tiers). Bricolage Grotesque (display), Geist (texte),
   Geist Mono (étiquettes). Fichiers woff2 dans assets/fonts/, sous-ensembles
   latin + latin-ext. Bricolage est servi en largeur normale (rendu charte).
   Pour régénérer : voir README.md.
   ========================================================================== */

/* Bricolage Grotesque · latin-ext · 400 */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/bricolage-400-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;
}

/* Bricolage Grotesque · latin · 400 */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/bricolage-400-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;
}

/* Bricolage Grotesque · latin-ext · 500 */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/bricolage-500-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;
}

/* Bricolage Grotesque · latin · 500 */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/bricolage-500-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;
}

/* Bricolage Grotesque · latin-ext · 700 */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/bricolage-700-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;
}

/* Bricolage Grotesque · latin · 700 */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/bricolage-700-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;
}

/* Bricolage Grotesque · latin-ext · 800 */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/bricolage-800-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;
}

/* Bricolage Grotesque · latin · 800 */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/bricolage-800-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;
}

/* Geist · latin-ext · 400 */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/geist-400-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;
}

/* Geist · latin · 400 */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/geist-400-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;
}

/* Geist · latin-ext · 500 */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/geist-500-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;
}

/* Geist · latin · 500 */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/geist-500-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;
}

/* Geist · latin-ext · 600 */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/geist-600-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;
}

/* Geist · latin · 600 */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/geist-600-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;
}

/* Geist · latin-ext · 700 */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/geist-700-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;
}

/* Geist · latin · 700 */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/geist-700-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;
}

/* Geist Mono · latin-ext · 400 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/geistmono-400-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;
}

/* Geist Mono · latin · 400 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/geistmono-400-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;
}

/* Geist Mono · latin-ext · 500 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/geistmono-500-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;
}

/* Geist Mono · latin · 500 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/geistmono-500-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;
}

/* ============================================================================
   OLTANIS — Design System foundations
   Colors + Type tokens. Source of truth: Brand Book Oltanis V1.0 + the
   oltanis.fr marketing codebase (Siteweb-Oltanis).

   The whole identity rests on a single rule from the brand book cover:
   "Trois tons. Pas un de plus." — three tones, not one more.
   Blanc / Encre / Cobalt. Bricolage Grotesque (normal width) for display,
   Geist for text, Geist Mono for labels.

   This file @imports the fonts itself (see top), so linking colors_and_type.css
   is enough.
   ========================================================================== */

:root {
  /* ---- Brand colors — three tones, not one more --------------------------- */
  --blanc:  #FFFFFF;   /* fond principal, tous supports          rgb 255 255 255 */
  --encre:  #0A0A0A;   /* texte, surfaces sombres, bordures      rgb 10 10 10    */
  --cobalt: #1846DC;   /* accent unique : I italique, liens      oklch(.52 .22 260) */

  /* ---- Neutrals — derived from encre, used ONLY for rules + muted text ----- */
  --hairline: #E6E6E6; /* filets, séparateurs, bordures de cartes */
  --muted:    #6B6B6B; /* texte secondaire neutre                 */

  /* Convenience tints of encre on blanc (the codebase uses encre/NN opacities) */
  --encre-85: rgba(10, 10, 10, 0.85);
  --encre-80: rgba(10, 10, 10, 0.80);
  --encre-70: rgba(10, 10, 10, 0.70);
  --encre-60: rgba(10, 10, 10, 0.60);
  --encre-50: rgba(10, 10, 10, 0.50);
  /* Tints of blanc on encre (for dark/encre sections) */
  --blanc-90: rgba(255, 255, 255, 0.90);
  --blanc-80: rgba(255, 255, 255, 0.80);
  --blanc-70: rgba(255, 255, 255, 0.70);
  --blanc-60: rgba(255, 255, 255, 0.60);
  --blanc-20: rgba(255, 255, 255, 0.20);
  --blanc-15: rgba(255, 255, 255, 0.15);

  /* ---- Semantic surface roles -------------------------------------------- */
  --bg:        var(--blanc);
  --fg:        var(--encre);
  --fg-muted:  var(--encre-70);
  --accent:    var(--cobalt);
  --border:    var(--hairline);
  --bg-invert: var(--encre);
  --fg-invert: var(--blanc);

  /* ---- Type families ------------------------------------------------------ */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif; /* wordmark + titres */
  --font-sans:    "Geist", system-ui, -apple-system, sans-serif; /* texte courant */
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", monospace; /* étiquettes */

  /* ---- Type tuning -------------------------------------------------------- */
  --tracking-display: -0.045em;  /* display est toujours serré              */
  --tracking-mono:     0.22em;   /* mono est toujours espacé, en capitales  */
  --display-stretch:   normal;   /* Bricolage largeur normale (rendu charte) */

  /* ---- Spacing scale ------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --gutter:  24px;   /* gouttière de grille                     */
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 96px;
  --section: 128px;  /* respiration verticale entre sections    */
  --max-page: 1440px;/* largeur de contenu maximale             */

  /* ---- Radius — quasi nul. 4px max sur les éléments d'UI ------------------ */
  --radius-none: 0px;
  --radius-ui:   4px;   /* boutons, champs, petites cartes        */

  /* ---- Borders ------------------------------------------------------------ */
  --hairline-w: 1px;

  /* ---- Motion — fade + translation, easings premium --------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* entrées douces (expo-out) */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);  /* léger rebond (boutons/cartes) */
  --dur-fast:    120ms;  /* hover de liens / boutons               */
  --dur-ui:      180ms;  /* transitions d'UI                       */
  --dur-reveal:  640ms;  /* apparition au scroll                   */
  --dur-slow:    900ms;  /* grandes entrées (hero)                 */

  /* ---- Élévation — profondeur douce (évolution charte, validée) ---------- */
  --shadow-xs: 0 1px 2px rgba(10,10,10,0.05);
  --shadow-sm: 0 2px 6px -1px rgba(10,10,10,0.08), 0 1px 2px rgba(10,10,10,0.05);
  --shadow-md: 0 12px 26px -10px rgba(10,10,10,0.16), 0 4px 10px -6px rgba(10,10,10,0.10);
  --shadow-lg: 0 30px 64px -22px rgba(10,10,10,0.28);
  --shadow-cobalt: 0 16px 36px -14px rgba(24,70,220,0.55);

  /* ---- Dégradés — uniquement famille cobalt / encre (pas de teinte nouvelle) */
  --grad-cobalt: linear-gradient(135deg, #1A4AE6 0%, #2C63F2 100%);
  --grad-cobalt-soft: linear-gradient(135deg, rgba(24,70,220,0.10), rgba(24,70,220,0));
  --grad-ink: linear-gradient(165deg, #111118 0%, #07070A 72%);
  --glow-cobalt: radial-gradient(58% 58% at 72% 28%, rgba(24,70,220,0.20) 0%, rgba(24,70,220,0) 70%);

  /* ---- Focus ring — ombre nette de référence (accessibilité) ------------- */
  --focus-ring: 2px solid var(--cobalt);
  --focus-offset: 2px;
}

/* ============================================================================
   Base type styles — apply on <body> or a wrapper. Geist body, encre on blanc.
   ========================================================================== */
.oltanis, body.oltanis {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--cobalt); color: var(--blanc); }

/* ---- Display: Bricolage Grotesque, normal width, tight ------------------- */
.display, [data-display] {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: 1.0;
}

/* ---- Heading scale (display) -------------------------------------------- */
.h-display {            /* hero / cover statement */
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  font-size: clamp(56px, 9vw, 128px);
  line-height: 0.9;
}
.h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 0.98;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.02;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  font-size: 28px;
  line-height: 1.05;
}

/* ---- Body ---------------------------------------------------------------- */
.lead { font-family: var(--font-sans); font-size: 19px; line-height: 1.55; color: var(--encre-80); }
.p    { font-family: var(--font-sans); font-size: 17px; line-height: 1.55; }
.small{ font-family: var(--font-sans); font-size: 15px; line-height: 1.55; color: var(--encre-80); }

/* ---- Mono label / kicker — uppercase, wide tracking, often spaced caps --- */
.mono, .kicker {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--encre-60);
}

/* ---- The wordmark accent: italic cobalt I / ! --------------------------- */
.accent-i { font-style: italic; color: var(--cobalt); }

/* ---- Editorial link: underline cobalt on hover -------------------------- */
.editorial-link {
  text-decoration: none;
  color: inherit;
  transition: color var(--dur-fast) ease;
}
.editorial-link:hover {
  color: var(--cobalt);
  text-decoration: underline;
  text-decoration-color: var(--cobalt);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---- Focus ring (only allowed "shadow") --------------------------------- */
*:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

/* ---- Hairline helper ----------------------------------------------------- */
.hairline { border-color: var(--hairline); }

/* ---- Scroll reveal (sober) ---------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  }
  [data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
  /* Révélations directionnelles (glissement latéral, en alternance) */
  [data-reveal][data-dir="left"]  { transform: translateX(-30px); }
  [data-reveal][data-dir="right"] { transform: translateX(30px); }
  [data-reveal][data-dir].is-revealed { transform: none; }
}

/* ---- Transitions de page (View Transitions API) — fondu doux entre pages.
   Dégradation propre : ignoré par les navigateurs non compatibles. ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 280ms; animation-timing-function: var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---- Lenis smooth scroll (auto-hébergé) -------------------------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }