/* ═══════════════════════════════════════════════
   OGee — système de design
   D'après OGee Brand Guidelines v1.0 · Juin 2026
   Polices auto-hébergées (pas de CDN tiers).
═══════════════════════════════════════════════ */

/* ── Cormorant Garamond 600 — display ── */
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-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;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-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;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-600i-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;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-600i-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;
}

/* ── DM Sans (variable 100–1000) — corps ── */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("fonts/dmsans-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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("fonts/dmsans-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;
}

/* ── Space Grotesk (variable 300–700) — labels ── */
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/grotesk-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;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/grotesk-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;
}

/* ═══════════════════════════════════════════════
   Jetons
═══════════════════════════════════════════════ */
:root {
  /* ── Palette OGee v2.0 (août 2026) ──
     Bleu Klein dominant : logo, fonds structurants, liens. Corail = accent
     d'action (CTA). Abricot = accent chaud. Encre = TEXTE uniquement, plus
     jamais un fond (les fonds sombres passent en Klein). */
  --blue-klein: #0F2A8A;   /* dominante ~60% : fonds sombres, liens, labels/nums sur fond clair */
  --blue-klein-hover: #14349E;
  /* Bleu Ciel de la charte = #4A6FE3. Mais sur fond Klein il ne donne que
     2.72:1 (illisible en texte), et tous les usages « ciel » du site sont sur
     fond sombre. On pointe donc --blue-ciel vers la version éclaircie de la
     même famille (5.29:1 sur Klein). La teinte charte reste dispo pour le
     décoratif sur fond clair (arc picto), absent du site pour l'instant. */
  --blue-ciel:      #8FA9EF;   /* accent bleu sur fond Klein — lisible AA */
  --blue-ciel-true: #4A6FE3;   /* teinte exacte de la charte, usage sur fond clair */
  --corail:     #D9502A;   /* accent d'action ~10% : fond des CTA (texte blanc gras) */
  --corail-hover: #BE421F;
  --abricot:    #E8935E;   /* accent chaud : fond de section (texte Encre uniquement) */
  --blue-pale:  #EEF2FC;
  --ink:        #1A1A18;   /* texte principal — jamais un fond */
  --chalk:      #F8F8F6;
  --white:      #FFFFFF;
  /* Gris de la charte (#888884) assombri : v2 le dit « limite sur Craie,
     jamais au corps ». On garde #5F5F5A (6.04:1) pour rester lisible partout. */
  --mid:        #5F5F5A;
  --border:     #E4E4E0;

  /* Alias de compatibilité : d'anciennes règles nomment encore --blue-roi.
     v2 supprime le bleu roi #1B3FC4 ; ses usages « structure / lien / label
     sur fond clair » deviennent du Klein. Les CTA, eux, sont passés en Corail. */
  --blue-roi: var(--blue-klein);

  /* Sur fond Klein — blanc/alpha, tous ≥ AA (blanc sur Klein = 12.2:1) */
  --on-ink-strong: rgba(255,255,255,0.94);
  --on-ink:        rgba(255,255,255,0.82);
  --on-ink-mute:   rgba(255,255,255,0.62);
  --on-ink-soft:   rgba(255,255,255,0.66); /* sources, mentions */
  --on-ink-faint:  rgba(255,255,255,0.30); /* décoratif uniquement, jamais de texte */
  --on-ink-rule:   rgba(255,255,255,0.18);

  /* Surface sombre = Bleu Klein (v2 : « les fonds sombres utilisent Klein »). */
  --surface-dark:       var(--blue-klein);
  --surface-dark-hover: var(--blue-klein-hover);

  --f-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --f-label:   'Space Grotesk', system-ui, sans-serif;

  --wrap: 1240px;
  --gut:  28px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

html { font-size: 17px; }

body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--chalk);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--blue-roi); color: #fff; }
:focus-visible { outline: 2.5px solid var(--blue-roi); outline-offset: 2px; }
img, svg { display: block; }

/* Fil conducteur bleu : tout lien dans le corps de texte. */
main p a, .roi-note a, .owns-row a { color: var(--blue-roi); text-decoration: underline; text-underline-offset: 2px; }
main p a:hover { color: var(--blue-klein); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════════
   Typographie — échelle de la charte
═══════════════════════════════════════════════ */
.t-display, .t-h1 {
  font-family: var(--f-display);
  font-weight: 600;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.t-display { font-size: clamp(38px, 5vw, 64px); }
.t-h1      { font-size: clamp(32px, 4.2vw, 48px); }

.t-h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.t-h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
/* Dans un titre display, <em> annule l'italique. La charte l'estompait ;
   on en fait un accent bleu — lisible, et cohérent avec le fil conducteur. */
.t-display em, .t-h1 em, .t-h2 em { font-style: normal; color: var(--blue-ciel); }
.on-light .t-display em, .on-light .t-h1 em, .on-light .t-h2 em,
.section--white .t-h2 em, .section:not(.section--ink) .t-h2 em { color: var(--blue-roi); }
.hero .t-display em, .hero .t-h1 em, .section--ink .t-h2 em { color: var(--blue-ciel); }

.t-lead   { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; }
.t-body   { font-size: 16px; line-height: 1.7; }
.t-cap    { font-size: 13px; line-height: 1.55; color: var(--mid); }

/* 13px et non 12 : la checklist « aucun texte < 13px » prime sur la valeur
   indicative du brief. Le tracking descend pour compenser la hausse. */
.t-label {
  font-family: var(--f-label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.t-label-sm { font-size: 13px; letter-spacing: 0.09em; }

.c-roi  { color: var(--blue-roi); }
.c-ciel { color: var(--blue-ciel); }
.c-mid  { color: var(--mid); }

/* ═══════════════════════════════════════════════
   Logo
═══════════════════════════════════════════════ */
.logo { display: inline-flex; align-items: center; gap: 0.35em; text-decoration: none; }
.logo-mark { flex-shrink: 0; }
.logo-word {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--ink);
}
.logo--on-ink .logo-word { color: var(--white); }

/* ═══════════════════════════════════════════════
   Boutons
═══════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;                 /* cible tactile */
  font-family: var(--f-label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 12px 26px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* CTA primaire = Corail plein (v2 : accent d'action). Texte blanc gras :
   v2 valide le blanc sur Corail « en gras » — c'est le cas ici (700). */
.btn-primary { background: var(--corail); color: var(--white); }
.btn-primary:hover { background: var(--corail-hover); color: var(--white); }
/* CTA secondaire = contour Klein (structure), pas Corail : garde la hiérarchie. */
.btn-secondary { background: transparent; color: var(--blue-klein); border: 1.5px solid var(--blue-klein); }
.btn-secondary:hover { background: var(--blue-pale); }
.btn-sm { padding: 9px 18px; font-size: 13px; min-height: 44px; }
.btn-lg { padding: 16px 34px; font-size: 14px; min-height: 52px; }

/* ═══════════════════════════════════════════════
   Nav — cf. charte §5 « Applications »
═══════════════════════════════════════════════ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface-dark);
}
.nav-inner {
  min-height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-top: 10px; padding-bottom: 10px;
}
.nav .logo-word { font-size: 22px; }
/* Le lien logo est une cible tactile comme une autre. */
.nav .logo { min-height: 44px; }
.nav-links { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.nav-link {
  display: inline-flex; align-items: center;
  min-height: 44px;                 /* cible tactile */
  font-family: var(--f-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--on-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.nav-link:hover { color: var(--white); }
/* La page courante est signalée par un filet bleu, pas seulement par la couleur. */
.nav-link[aria-current="page"] {
  color: var(--white);
  box-shadow: inset 0 -2px 0 var(--blue-ciel);
}
.nav-cta {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-family: var(--f-label);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--white); background: var(--corail);
  padding: 11px 22px; border-radius: 2px;
  text-decoration: none; white-space: nowrap;
  transition: background 0.15s;
}
.nav-cta:hover { background: var(--corail-hover); }
/* Une adresse email ne se met pas en capitales : on garde la casse d'origine.
   Gras conservé (700) : v2 ne valide le blanc sur Corail qu'en gras. */
.nav-cta--mail { text-transform: none; letter-spacing: 0.02em; font-size: 13px; font-weight: 700; }

/* ═══════════════════════════════════════════════
   Hero — cf. charte §5
═══════════════════════════════════════════════ */
.hero { background: var(--surface-dark); color: var(--on-ink); }
.hero-inner { padding-top: 88px; padding-bottom: 82px; display: flex; flex-direction: column; gap: 22px; }
.hero-tag { color: var(--blue-ciel); letter-spacing: 0.16em; }
.hero-headline { color: var(--white); max-width: 16em; }
.hero-sub { color: var(--on-ink); max-width: 640px; text-wrap: pretty; }

/* Le picto est écrit en version « fond clair » dans le HTML (arc #4A6FE3 /
   #6B8CE8). Sur fond Klein (nav, footer) on applique la version inversée de
   la charte : arc supérieur blanc, arc inférieur ciel clair lisible, point
   blanc. Une règle CSS l'emporte sur les attributs du SVG. */
.nav .logo-mark path:nth-of-type(1),
.foot .logo-mark path:nth-of-type(1) { stroke: var(--white); }
.nav .logo-mark path:nth-of-type(2),
.foot .logo-mark path:nth-of-type(2) { stroke: var(--blue-ciel); }
.nav .logo-mark circle,
.foot .logo-mark circle { fill: var(--white); }

/* ═══════════════════════════════════════════════
   Sections
═══════════════════════════════════════════════ */
.section { border-bottom: 1px solid var(--border); background: var(--chalk); }
.section--white { background: var(--white); }
.section--ink { background: var(--surface-dark); color: var(--on-ink); border-bottom: none; }
/* Section chaude (v2 : Abricot, texte Encre uniquement — jamais blanc). */
.section--warm { background: var(--abricot); border-bottom: none; }
.section--warm .eyebrow { color: var(--blue-klein); }
.section--warm .t-h2, .section--warm .t-body, .section--warm .t-cap { color: var(--ink); }
.section-inner { padding-top: 92px; padding-bottom: 92px; }

.eyebrow { margin-bottom: 14px; color: var(--blue-roi); }
.section--ink .eyebrow { color: var(--blue-ciel); }
.section--ink .t-h2 { color: var(--white); }

/* Règle décorative encadrant un label */
.rule-label { display: flex; align-items: center; gap: 14px; }
.rule-label::before, .rule-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.section--ink .rule-label::before, .section--ink .rule-label::after { background: var(--on-ink-rule); }
.rule-label > span { white-space: nowrap; }

/* ═══════════════════════════════════════════════
   Split — les deux portes d'entrée
═══════════════════════════════════════════════ */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.split-card {
  padding: 60px 48px 54px;
  display: flex; flex-direction: column;
  text-decoration: none;
  /* Bordure intérieure transparente : elle se colore au survol sans décaler la mise en page. */
  box-shadow: inset 0 0 0 0 transparent;
  transition: background 0.2s, box-shadow 0.2s;
}
.split-card--light { background: var(--white); color: var(--ink); border-right: 1px solid var(--border); }
.split-card--light:hover {
  background: var(--chalk);
  box-shadow: inset 0 0 0 2px var(--blue-roi);
}
.split-card--dark { background: var(--surface-dark); color: var(--on-ink); }
.split-card--dark:hover {
  background: var(--surface-dark-hover);
  box-shadow: inset 0 0 0 2px var(--blue-ciel);
}
.split-card--dark .t-h2 { color: var(--white); }
/* La flèche avance au survol : le geste dit « c'est cliquable ». */
.split-card:hover .card-link { gap: 12px; }

.abc { display: flex; flex-direction: column; gap: 13px; margin: 20px 0 32px; }
.abc-item { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.55; color: var(--mid); }
.split-card--dark .abc-item { color: var(--on-ink); }
.abc-key { font-family: var(--f-label); font-weight: 700; color: var(--blue-roi); flex-shrink: 0; }
.split-card--dark .abc-key { color: var(--blue-ciel); }

.card-link {
  margin-top: auto;
  min-height: 44px;                 /* cible tactile */
  font-family: var(--f-label);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--blue-roi); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap 0.15s, color 0.15s;
}
.split-card--dark .card-link { color: var(--blue-ciel); }

/* En-tête de section : titre à gauche, texte ou lien à droite */
.model-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 56px; align-items: end; margin-bottom: 44px;
}
.vlist-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap; margin-bottom: 36px;
}

/* ═══════════════════════════════════════════════
   Grille de services
═══════════════════════════════════════════════ */
.services { display: flex; flex-wrap: wrap; border: 1px solid var(--border); background: var(--white); }
.service { flex: 1 1 200px; padding: 26px 22px; border-right: 1px solid var(--border); }
.service:last-child { border-right: none; background: var(--surface-dark); color: var(--on-ink); }
.service-num { font-family: var(--f-label); font-size: 13px; font-weight: 700; color: var(--blue-roi); margin-bottom: 12px; letter-spacing: 0.09em; }
.service:last-child .service-num { color: var(--blue-ciel); }
.service-name { font-family: var(--f-display); font-weight: 600; font-size: 22px; margin-bottom: 9px; letter-spacing: 0.01em; }
.service:last-child .service-name { color: var(--white); }
.service-desc { font-size: 15px; color: var(--mid); line-height: 1.6; }
.service:last-child .service-desc { color: var(--on-ink); }

/* ═══════════════════════════════════════════════
   Étapes (même grille que les services, texte plus dense)
═══════════════════════════════════════════════ */
.steps { display: flex; flex-wrap: wrap; border: 1px solid var(--border); background: var(--white); }
.step { flex: 1 1 230px; padding: 30px 26px; border-right: 1px solid var(--border); }
.step:last-child { border-right: none; background: var(--surface-dark); color: var(--on-ink); }
.step-num { font-family: var(--f-label); font-size: 13px; font-weight: 700; color: var(--blue-roi); letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 14px; }
.step:last-child .step-num { color: var(--blue-ciel); }
.step-name { font-family: var(--f-display); font-weight: 600; font-size: 23px; margin-bottom: 11px; letter-spacing: 0.01em; line-height: 1.25; }
.step:last-child .step-name { color: var(--white); }
.step-desc { font-size: 15px; color: var(--mid); line-height: 1.65; }
.step:last-child .step-desc { color: var(--on-ink); }

/* ═══════════════════════════════════════════════
   Tableau de répartition — qui porte quoi
═══════════════════════════════════════════════ */
.owns { border: 1px solid var(--border); background: var(--white); }
.owns-row {
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  padding: 17px 22px; border-bottom: 1px solid var(--border);
  font-size: 15.5px; line-height: 1.5; align-items: baseline; color: var(--mid);
}
.owns-row:last-child { border-bottom: none; background: var(--chalk); }
.owns-row:last-child > span:first-child { font-weight: 600; color: var(--ink); }
.owns-who {
  font-family: var(--f-label); font-size: 13px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--blue-roi); white-space: nowrap;
}

/* ═══════════════════════════════════════════════
   Liste de liens sur fond encre (esquisses ROI)
═══════════════════════════════════════════════ */
.linklist { display: flex; flex-direction: column; gap: 10px; }
.linkrow {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 44px;                 /* cible tactile */
  border: 1px solid var(--on-ink-rule); padding: 17px 22px;
  text-decoration: none; color: var(--on-ink-strong);
  transition: border-color 0.15s, background 0.15s;
}
.linkrow:hover { border-color: var(--blue-ciel); background: var(--surface-dark-hover); }
.linkrow-name { font-family: var(--f-display); font-weight: 600; font-size: 21px; letter-spacing: 0.01em; }
.linkrow-cta { font-family: var(--f-label); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-ciel); white-space: nowrap; }

/* ═══════════════════════════════════════════════
   Comparaison en deux routes
═══════════════════════════════════════════════ */
.routes { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); background: var(--white); }
.route { padding: 36px 34px; border-right: 1px solid var(--border); }
.route:last-child { border-right: none; background: var(--chalk); }
.route-label {
  font-family: var(--f-label); font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mid); margin-bottom: 22px;
}
.route:last-child .route-label { color: var(--blue-roi); }
.route-item { padding: 14px 0; border-top: 1px solid var(--border); font-size: 15.5px; color: var(--mid); line-height: 1.6; }
.route-item--key { font-weight: 600; color: var(--ink); }

/* ═══════════════════════════════════════════════
   Cartes empilées
═══════════════════════════════════════════════ */
.fcards { display: flex; flex-direction: column; gap: 14px; }
.fcard { border: 1px solid var(--border); border-radius: 4px; background: var(--white); padding: 26px 28px; }
.fcard-label {
  font-family: var(--f-label); font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue-roi); margin-bottom: 10px;
}
.fcard-desc { font-size: 15.5px; color: var(--mid); line-height: 1.65; }

/* ═══════════════════════════════════════════════
   Esquisse de ROI (page Verticals)
═══════════════════════════════════════════════ */
.deploy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 26px; }
.deploy-label {
  font-family: var(--f-label); font-size: 13px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--mid); margin-bottom: 10px;
}
.deploy-list { font-size: 15.5px; line-height: 1.85; color: var(--ink); }

.roi { border: 1px solid var(--border); border-radius: 4px; padding: 32px 30px; background: var(--white); }
.section--white .roi { background: var(--chalk); }
.roi-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; gap: 12px; }
.roi-head-title { font-family: var(--f-label); font-size: 13px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--blue-roi); }
.roi-head-warn { font-family: var(--f-label); font-size: 13px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mid); }

.roi-field { margin-bottom: 20px; }
.roi-field:last-of-type { margin-bottom: 26px; }
.roi-field-top { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 500; margin-bottom: 10px; }
.roi-field-val { font-family: var(--f-label); font-weight: 700; color: var(--blue-roi); }
.roi-field input[type="range"] {
  width: 100%; accent-color: var(--blue-roi); cursor: pointer;
  height: 24px;                     /* cible tactile : la piste reste fine, la zone de saisie non */
  background: transparent;
}

.roi-out { border-top: 1px solid var(--border); padding-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.roi-fig { font-family: var(--f-display); font-weight: 600; font-size: clamp(38px, 3.4vw, 46px); line-height: 1.05; letter-spacing: 0.01em; color: var(--ink); }
.roi-fig--accent { color: var(--blue-roi); }
.roi-fig-desc { font-size: 13.5px; color: var(--mid); margin-top: 4px; line-height: 1.5; }
.roi-note { font-size: 13px; color: var(--mid); line-height: 1.6; margin-top: 20px; }

/* Deux colonnes larges, alignement paramétrable */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 64px; }
.duo--start  { align-items: start; }
.duo--center { align-items: center; }

/* ═══════════════════════════════════════════════
   Chiffres
═══════════════════════════════════════════════ */
.stats { display: flex; flex-wrap: wrap; border-left: 1px solid var(--on-ink-rule); }
.stat { flex: 1 1 230px; padding: 18px 30px; border-right: 1px solid var(--on-ink-rule); }
.stat-fig {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--white);
}
.stat-fig--accent { color: var(--blue-ciel); }
.stat-desc { font-size: 14.5px; color: var(--on-ink); margin-top: 10px; line-height: 1.55; }
.sources { font-family: var(--f-label); font-size: 13px; font-weight: 600; color: var(--on-ink-soft); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 32px; }

/* ═══════════════════════════════════════════════
   Liste des verticales
═══════════════════════════════════════════════ */
.vlist { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.vrow {
  display: grid;
  grid-template-columns: 56px minmax(140px, 220px) 1fr auto;
  gap: 24px; align-items: baseline;
  padding: 22px 8px;
  min-height: 44px;                 /* cible tactile */
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--ink);
  box-shadow: inset 0 0 0 0 transparent;
  transition: background 0.15s, box-shadow 0.15s;
}
.vrow:hover { background: var(--white); box-shadow: inset 2px 0 0 0 var(--blue-roi); }
.vrow:hover .vrow-arrow { transform: translateX(4px); }
.vrow-num { font-family: var(--f-label); font-size: 13px; font-weight: 700; color: var(--blue-roi); letter-spacing: 0.09em; }
.vrow-name { font-family: var(--f-display); font-weight: 600; font-size: 24px; letter-spacing: 0.01em; }
.vrow-desc { font-size: 15px; color: var(--mid); line-height: 1.55; }
.vrow-arrow { font-family: var(--f-label); font-size: 15px; font-weight: 700; color: var(--blue-roi); transition: transform 0.15s; }

/* ═══════════════════════════════════════════════
   Pied de page
═══════════════════════════════════════════════ */
.foot { background: var(--surface-dark); color: var(--on-ink); }
.foot-inner { padding-top: 96px; padding-bottom: 48px; }
.foot-mail {
  font-family: var(--f-display);
  font-weight: 600; font-style: italic;
  font-size: clamp(26px, 3.2vw, 42px);
  letter-spacing: -0.01em; line-height: 1.1;
  color: var(--white); text-decoration: none;
  display: inline-flex; align-items: center;
  min-height: 44px;                 /* cible tactile */
  padding: 4px 0; margin-bottom: 44px;
  transition: color 0.15s;
}
.foot-mail:hover { color: var(--blue-ciel); }
.foot-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px; flex-wrap: wrap;
  border-top: 1px solid var(--on-ink-rule); padding-top: 28px;
}
.foot .logo-word { font-size: 19px; }
.foot-geo { font-family: var(--f-label); font-size: 13px; font-weight: 600; color: var(--on-ink-soft); letter-spacing: 0.09em; text-transform: uppercase; margin-left: 12px; }
.foot-nav { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.foot-link {
  display: inline-flex; align-items: center;
  min-height: 44px;                 /* cible tactile */
  font-size: 15px; color: var(--on-ink); text-decoration: none; transition: color 0.15s;
}
.foot-link:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.foot-copy { font-family: var(--f-label); font-size: 13px; color: var(--on-ink-soft); }

/* ═══════════════════════════════════════════════
   Mobile
═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root { --gut: 20px; }
  body { font-size: 16px; }
  .split-card { padding: 44px 24px 40px; }
  .split-card--light { border-right: none; border-bottom: 1px solid var(--border); }
  .section-inner { padding-top: 64px; padding-bottom: 64px; }
  .hero-inner { padding-top: 60px; padding-bottom: 56px; }
  .service, .step { border-right: none; border-bottom: 1px solid var(--border); flex-basis: 100%; }
  .duo { gap: 40px; }
  .routes { grid-template-columns: 1fr; }
  .route { border-right: none; border-bottom: 1px solid var(--border); padding: 28px 22px; }
  .roi { padding: 24px 20px; }
  .roi-out { grid-template-columns: 1fr; gap: 14px; }
  .stat { border-right: none; border-bottom: 1px solid var(--on-ink-rule); flex-basis: 100%; }
  .vrow { grid-template-columns: 40px 1fr auto; gap: 10px 16px; }
  .vrow-desc { grid-column: 2 / -1; }
  .nav-links { gap: 16px; }
}

/* ═══════════════════════════════════════════════
   Petits écrans (≈375px) — le hero doit tenir sans césure
═══════════════════════════════════════════════ */
@media (max-width: 480px) {
  :root { --gut: 18px; }
  /* Sous 480px, 5vw ne suffit plus : on force un plancher qui tient sur 3 lignes. */
  .t-display { font-size: clamp(30px, 8.4vw, 38px); }
  .t-h1      { font-size: clamp(28px, 7.6vw, 34px); }
  .t-h2      { font-size: clamp(23px, 6.4vw, 28px); }
  .hero-headline { max-width: none; hyphens: none; overflow-wrap: break-word; }
  .stat-fig { font-size: clamp(40px, 12vw, 52px); }
  .roi-fig  { font-size: clamp(34px, 9vw, 40px); }

  /* Le CTA email passe pleine largeur : cible franche au pouce. */
  .nav-inner { gap: 10px; }
  .nav-links { width: 100%; gap: 14px; justify-content: flex-start; }
  .nav-cta--mail { width: 100%; justify-content: center; font-size: 14px; padding: 13px 18px; }
  .foot-nav { gap: 18px; }
  .deploy-grid { gap: 20px; }
}