/* =============================================================================
   STELNEO — feuille de style
   Un seul jeu de règles : chaque élément est décrit une fois, à sa valeur finale.

   Échelle typographique : les paliers de taille suivent les paliers de mise en
   page (1120 / 920 / 680). Une police ne grossit jamais quand l'écran rétrécit
   à structure constante ; elle ne remonte qu'au passage en pleine largeur.

   Séquences scrollées : une seule sur toute la page (section Fonctionnement),
   là où le visuel change réellement d'étape. Partout ailleurs, lecture statique.

   Sommaire
   01. Tokens
   02. Base & accessibilité
   03. Primitives (titres, libellés, boutons, liens)
   04. En-tête & navigation
   05. Hero
   06. Chiffres clés
   07. Argumentaire
   08. Gammes
   09. Fonctionnement
   10. Cas d'usage
   11. Déploiement
   12. FAQ
   13. Soutiens
   14. CTA finale
   15. Pied de page
   16. Apparitions au scroll
   17. Responsive
   18. Préférences système
   ============================================================================= */

/* ---------------------------------------------------------------- 01. Tokens */
:root {
  /* Couleurs */
  --navy: #002f4b;
  --navy-l: #003858;          /* volet actif des cas d'usage */
  --navy-d: #001f32;          /* fond des cadres image sur marine */
  --amber: #f6c13c;
  --amber-d: #c98f0e;         /* variante lisible sur fond clair (contraste AA) */
  --amber-fill: #e0b036;      /* remplissage de bouton au survol */
  --beige: #f4f1e8;
  --beige-d: #ded8cb;
  --beige-l: #faf8f3;
  --ink: #182126;
  --body: #4b5961;
  --white: #ffffff;

  /* Typographies — deux familles seulement */
  --font-display: "Manrope", "Segoe UI", Arial, sans-serif;
  --font-sans: "Manrope", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  /* Structure */
  --max-width: 1440px;
  --gutter: clamp(20px, 4vw, 72px);
  --section-space: clamp(88px, 10vw, 152px);
  --rule: 1px solid var(--beige-d);
  --rule-light: 1px solid rgba(255, 255, 255, .16);
  --header-height: 76px;

  /* Courbes */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-sleek: cubic-bezier(.22, 1, .36, 1);
}

/* ------------------------------------------------- 02. Base & accessibilité */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); color-scheme: light; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--beige);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }

img { display: block; width: 100%; max-width: 100%; height: auto; background: rgba(0, 47, 75, .08); }

button { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
p, h1, h2, h3 { margin-top: 0; }

::selection { background: var(--amber); color: var(--navy); }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--amber);
  color: var(--navy);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------- 03. Primitives */

/* Rythme vertical des sections */
.section { padding-block: var(--section-space); }
.section--dark { background: var(--navy); color: rgba(255, 255, 255, .68); }
.section-shell { width: min(100%, var(--max-width)); margin-inline: auto; padding-inline: var(--gutter); }

/* Titres — 5.2vw sature à 1462px ; le minimum tient la colonne étroite des
   mises en page à deux colonnes (intro collante de ~290px). */
h1, h2, h3 { color: var(--ink); font-family: var(--font-display); font-weight: 600; letter-spacing: -.045em; }
h2 { max-width: 900px; margin-bottom: 28px; font-size: clamp(52px, 5.2vw, 76px); line-height: .98; }
.section--dark h2,
.section-intro--light h2 { color: var(--white); }

/* En-tête de section en deux colonnes : titre à gauche, accroche à droite.
   Utilisé par Argumentaire, Gammes, Cas d'usage et Déploiement. */
.section-heading {
  padding-bottom: clamp(44px, 6vw, 74px);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
  gap: clamp(50px, 8vw, 130px);
  align-items: end;
}
.section-heading h2 { margin-bottom: 0; }
.section-heading > p { max-width: 520px; margin: 0 0 4px; font-size: 17px; line-height: 1.7; }
.section--dark .section-heading > p { color: rgba(255, 255, 255, .68); }

/* En-tête de section empilé (colonne latérale collante) */
.section-intro > p:last-child { max-width: 590px; margin-bottom: 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7; }
.section-intro--light > p:last-child { color: rgba(255, 255, 255, .68); }
.section-intro--sticky { position: sticky; top: calc(var(--header-height) + 40px); align-self: start; }

/* Micro-libellés (index de section, référence produit, état d'image) */
.section-index,
.product__number,
.product__image-label { font: 600 11px/1.4 var(--font-sans); letter-spacing: .075em; text-transform: uppercase; }
.section-index { margin-bottom: 20px; padding-left: 10px; border-left: 2px solid var(--amber); color: var(--navy); }
.section--dark .section-index,
.section-intro--light .section-index { color: var(--amber); }

/* Boutons */
.button,
.nav-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  transition: border-color .22s ease, color .22s ease;
}
/* Le remplissage au survol est un calque animé, pas un changement de fond. */
.button::before,
.nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--button-fill, var(--amber-fill));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .32s var(--ease-sleek);
}
.button > *,
.nav-cta > * { position: relative; z-index: 1; }
.button:hover::before,
.button:focus-visible::before,
.nav-cta:hover::before,
.nav-cta:focus-visible::before { transform: scaleY(1); }

.button--primary,
.nav-cta { background: var(--amber); color: var(--navy); --button-fill: var(--amber-fill); }

.button--ghost-light { border-color: rgba(255, 255, 255, .34); color: var(--white); --button-fill: rgba(255, 255, 255, .12); }
.button--ghost-light:hover { border-color: var(--white); }

/* Lien souligné */
.text-link {
  min-height: 44px;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid currentColor;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
}
.text-link--muted { min-height: 38px; gap: 12px; border-bottom-color: rgba(0, 47, 75, .28); color: var(--body); font-size: 12.5px; font-weight: 500; }
.text-link--muted:hover { border-bottom-color: currentColor; color: var(--navy); }

/* Flèche commune aux boutons et liens */
.button b,
.nav-cta b,
.text-link b { font-weight: 500; transition: transform .22s var(--ease-out); }
.button:hover b,
.nav-cta:hover b,
.text-link:hover b { transform: translate(3px, -3px); }

/* Barre de progression de lecture (haut de page) */
.reading-progress { position: fixed; inset: 0 0 auto; z-index: 1001; height: 2px; pointer-events: none; }
.reading-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* ------------------------------------------------- 04. En-tête & navigation */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-height);
  color: var(--white);
  transition: background-color .28s ease, border-color .28s ease;
}
.site-header.is-scrolled,
.site-header.menu-is-open { background: var(--navy); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.site-header__inner {
  width: min(100%, var(--max-width));
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { width: auto; height: 33px; background: transparent; filter: brightness(0) invert(1); }

.primary-nav { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); }
.primary-nav > a:not(.nav-cta) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
  font-weight: 500;
  transition: color .2s ease;
}
.primary-nav > a:not(.nav-cta):hover { color: var(--white); }

/* Service destinataire : présent, mais typographiquement en retrait. */
.primary-nav > a.nav-return {
  gap: 8px;
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
  white-space: nowrap;
}
.primary-nav > a.nav-return::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--amber);
}
.primary-nav > a.nav-return:hover { color: var(--white); }

.nav-cta { min-height: 42px; padding: 10px 15px; gap: 16px; font-size: 12.5px; white-space: nowrap; }

.menu-toggle {
  min-width: 64px;
  min-height: 44px;
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
}
.menu-toggle__label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; }
.menu-toggle__icon { width: 24px; height: 18px; display: grid; align-content: center; gap: 6px; }
.menu-toggle__icon i { display: block; width: 100%; height: 1px; background: currentColor; transition: transform .25s ease; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ------------------------------------------------------------------ 05. Hero */
/* La photo occupe tout le fond ; le texte est une colonne posée au-dessus. */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: max(760px, 100svh); background: var(--navy); color: var(--white); }
.hero__copy {
  position: relative;
  z-index: 3;
  width: min(760px, 62%);
  min-height: max(760px, 100svh);
  padding: clamp(150px, 16vh, 205px) var(--gutter) clamp(92px, 11vh, 138px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero h1 { max-width: 860px; margin-bottom: 30px; color: var(--white); font-size: clamp(58px, 7.3vw, 116px); line-height: .91; }
.hero h1 span { color: var(--amber); }
.hero__lead { max-width: 650px; margin-bottom: 36px; color: rgba(255, 255, 255, .7); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.65; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.hero__media { position: absolute; inset: 0; z-index: 0; margin: 0; overflow: hidden; background: var(--navy); }
/* ::before = dégradé de lisibilité du texte, ::after = vignettage haut/bas */
.hero__media::before,
.hero__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__media::before {
  background:
    linear-gradient(90deg,
      var(--navy) 0%,
      rgba(0, 47, 75, .98) 26%,
      rgba(0, 47, 75, .88) 42%,
      rgba(0, 47, 75, .42) 61%,
      rgba(0, 47, 75, .08) 82%,
      transparent 100%),
    linear-gradient(0deg, rgba(0, 47, 75, .72) 0%, transparent 34%);
}
.hero__media::after { background: linear-gradient(180deg, rgba(0, 25, 40, .28), transparent 24%, transparent 72%, rgba(0, 25, 40, .2)); }
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  filter: saturate(.72) contrast(1.03) brightness(.88);
  transition: transform 1.2s var(--ease-out), filter .5s ease;
}
/* Survol de la zone image uniquement (le bloc texte est au-dessus). */
@media (hover: hover) {
  .hero__media:hover img { transform: scale(1.018); filter: saturate(.86) contrast(1.02) brightness(.92); }
}

.hero__cycle-proof {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(24px, 4vw, 58px);
  z-index: 2;
  width: min(440px, calc(100% - 36px));
  padding: 18px 20px 18px 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  border-left: 4px solid var(--amber);
  background: rgba(0, 47, 75, .87);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 16px 42px rgba(0, 20, 32, .24);
}
.hero__cycle-value {
  min-width: 96px;
  color: var(--amber);
  font-family: var(--font-display);
  font-size: clamp(52px, 5vw, 74px);
  font-weight: 700;
  letter-spacing: -.07em;
  line-height: .82;
}
.hero__cycle-copy { display: grid; gap: 5px; }
.hero__cycle-copy strong { color: var(--white); font-size: 15px; font-weight: 600; line-height: 1.2; }
.hero__cycle-copy small { color: rgba(255, 255, 255, .62); font-size: 11px; line-height: 1.45; }

/* --------------------------------------------------------- 06. Chiffres clés */
.metrics { border-bottom: var(--rule); background: var(--beige-l); }
.metrics__inner { width: min(100%, var(--max-width)); margin-inline: auto; padding-inline: var(--gutter); }
.metrics__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.metric {
  min-height: 235px;
  padding: 42px clamp(22px, 3vw, 48px);
  border-left: var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background-color .22s ease;
}
.metric:last-child { border-right: var(--rule); }
.metric:hover { background: var(--white); }
.metric__value {
  margin: 0 0 34px;
  color: var(--navy);
  font-size: clamp(50px, 5vw, 70px);
  font-weight: 600;
  letter-spacing: -.06em;
  line-height: .95;
}
.metric__value small { font-size: .45em; font-weight: 600; letter-spacing: -.025em; }
.metric__value--range { display: flex; align-items: baseline; gap: .02em; }
.metric__value--range .metric__dash { margin-inline: .01em; }
.metric__value--range small { margin-left: .13em; }
.metric > p:last-child { max-width: 280px; margin-bottom: 0; font-size: 14px; line-height: 1.55; }

/* Note de méthode : évite l'effet « chiffres sortis du chapeau ». */
.metrics__note {
  max-width: 720px;
  margin: 0;
  padding: 22px 0 4px;
  border-top: var(--rule);
  color: var(--body);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ---------------------------------------------------------- 07. Argumentaire */
.business-case { border-bottom: var(--rule); }

/* Grille 2×2 en lecture statique. Le fond beige-d + gap 1px dessine les filets
   sans doubler les bordures. */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--beige-d);
  background: var(--beige-d);
}
.case-card {
  position: relative;
  isolation: isolate;
  min-height: 268px;
  padding: clamp(30px, 3.4vw, 46px);
  display: flex;
  flex-direction: column;
  background: var(--beige);
  transition: background-color .25s ease;
}
.case-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 72px;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s var(--ease-sleek);
}
.case-card:hover { background: var(--white); }
.case-card:hover::before { transform: scaleX(1); }
.case-card__index { display: block; margin-bottom: 26px; color: var(--navy); font-family: var(--font-mono); font-size: 12px; }
.case-card h3 { margin: 0 0 14px; max-width: 380px; color: var(--navy); font-size: clamp(22px, 2vw, 27px); line-height: 1.15; }
.case-card p { max-width: 480px; margin: 0; font-size: 15px; line-height: 1.7; }

/* --------------------------------------------------------------- 08. Gammes */
.products { padding-bottom: 0; background: var(--beige-l); }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 30px); }
.product-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: var(--rule);
  background: var(--white);
  box-shadow: 0 0 0 rgba(0, 47, 75, 0);
  transition: transform .34s var(--ease-sleek), box-shadow .34s var(--ease-sleek), border-color .25s ease;
}
.product-card:hover { z-index: 2; border-color: rgba(0, 47, 75, .28); transform: translateY(-6px); box-shadow: 0 22px 48px rgba(0, 47, 75, .12); }
.product-card:focus-within {
  z-index: 2;
  border-color: rgba(0, 47, 75, .28);
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0, 47, 75, .11);
}

.product__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: var(--rule); background: var(--beige-d); }
.product__media > img,
.product__hover-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product__media > img { transition: transform .5s var(--ease-sleek), opacity .34s ease; }
/* Second état, injecté en JS via --product-hover-image quand l'image existe. */
.product__hover-media {
  background: transparent var(--product-hover-image) center / cover no-repeat;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity .34s ease, transform .5s var(--ease-sleek);
}

/* Vrai bouton transparent : le clic sur l'image a une sémantique. */
.product__state-toggle {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.product__state-toggle[hidden] { display: none; }
.product__state-toggle:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }

.product__image-label {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  min-width: 88px;
  margin: 0;
  padding: 8px 11px;
  display: grid;
  background: var(--navy);
  color: var(--white);
  text-align: center;
  pointer-events: none;
}
.product__image-label i,
.product__image-label b { grid-area: 1 / 1; font-style: normal; font-weight: 600; transition: opacity .25s ease, transform .3s var(--ease-sleek); }
.product__image-label b { opacity: 0; transform: translateY(5px); }

/* Sans image alternative : simple zoom. */
.product-card:hover .product__media > img { transform: scale(1.025); }
/* Avec image alternative : bascule d'état (survol, ou clic → .is-alt-state) */
.product-card.has-hover-image:hover .product__media > img,
.product-card.has-hover-image.is-alt-state .product__media > img { opacity: .18; transform: scale(.985); }
.product-card.has-hover-image:hover .product__hover-media,
.product-card.has-hover-image.is-alt-state .product__hover-media { opacity: 1; transform: none; }
.product-card.has-hover-image:hover .product__image-label i,
.product-card.has-hover-image.is-alt-state .product__image-label i { opacity: 0; transform: translateY(-5px); }
.product-card.has-hover-image:hover .product__image-label b,
.product-card.has-hover-image.is-alt-state .product__image-label b { opacity: 1; transform: none; }

.product__copy { flex: 1; padding: clamp(26px, 3vw, 38px); display: flex; flex-direction: column; }
.product__meta { min-height: 46px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.product__number { margin: 0; color: var(--navy); }
.product__use { max-width: 220px; margin: 0; color: var(--body); font-size: 11px; font-weight: 600; text-align: right; }
.product-card h3 { margin: 22px 0 16px; color: var(--navy); font-size: clamp(30px, 3.2vw, 48px); line-height: .94; letter-spacing: -.055em; }
/* min-height : aligne les tableaux de specs entre les trois cartes. */
.product__description { min-height: 130px; margin: 0 0 24px; font-size: 14px; line-height: 1.65; }

.spec-list { width: 100%; margin: auto 0 22px; border-top: var(--rule); }
.spec-list div { padding: 9px 0; display: grid; grid-template-columns: .9fr 1.1fr; gap: 12px; border-bottom: var(--rule); }
.spec-list dt { color: var(--body); font-size: 12px; }
.spec-list dd { color: var(--ink); font-size: 12px; font-weight: 600; text-align: right; }

.product__links { display: grid; gap: 4px; justify-items: start; }

.products__cta { min-height: 160px; padding-block: 44px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.products__cta p { margin: 0 0 10px; color: var(--navy); font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.products__cta small { display: block; max-width: 620px; color: var(--body); font-size: 13px; line-height: 1.6; }
.products__cta .button { flex: 0 0 auto; }

/* -------------------------------------------------------- 09. Fonctionnement */
/* Unique séquence pilotée au scroll de la page. */
.process__layout { display: grid; grid-template-columns: minmax(300px, 4.4fr) minmax(0, 7.6fr); gap: clamp(52px, 8vw, 124px); align-items: start; }
.process__media { position: sticky; top: calc(var(--header-height) + 28px); margin: 0; overflow: hidden; }

/* Une image par étape, superposées, révélées en fondu par data-active-step. */
.process__frames { position: relative; overflow: hidden; }
.process__frames img {
  opacity: 0;
  aspect-ratio: 4 / 5.1;
  object-fit: cover;
  filter: saturate(.65) contrast(1.03);
  transition: opacity .5s ease, transform .65s var(--ease-sleek), filter .45s ease;
}
/* La 1re image porte la hauteur du bloc, les suivantes se calent dessus. */
.process__frames img + img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.process__media[data-active-step="0"] .process__frames img:nth-of-type(1),
.process__media[data-active-step="1"] .process__frames img:nth-of-type(2),
.process__media[data-active-step="2"] .process__frames img:nth-of-type(3),
.process__media[data-active-step="3"] .process__frames img:nth-of-type(4) { opacity: 1; }
.process__media:not([data-active-step]) .process__frames img:first-child { opacity: 1; }

/* Léger recadrage par étape, appliqué à toutes les vues (une seule est visible). */
.process__media[data-active-step="0"] img { transform: scale(1.02); object-position: 50% 35%; }
.process__media[data-active-step="1"] img { transform: scale(1.07) translateY(-1.5%); object-position: 54% 42%; }
.process__media[data-active-step="2"] img { transform: scale(1.04) translateX(-1.5%); object-position: 46% 52%; }
.process__media[data-active-step="3"] img { transform: scale(1.09) translateY(1.5%); object-position: 50% 62%; }

/* Compteur d'étape posé dans l'angle du visuel. */
.process__state {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  min-width: 96px;
  padding: 9px 12px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  border-top: 2px solid var(--amber);
  background: rgba(0, 47, 75, .9);
  color: var(--white);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.process__state strong { color: var(--amber); font-family: var(--font-display); font-size: 30px; line-height: 1; }
.process__state span { color: rgba(255, 255, 255, .68); font-family: var(--font-mono); font-size: 10px; }

.process__content .section-intro { margin-bottom: 62px; }
.process-list { border-top: 1px solid rgba(255, 255, 255, .2); }
.process-list li {
  position: relative;
  min-height: clamp(260px, 43svh, 430px);
  padding: 30px 0;
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: center;
  gap: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  opacity: .44;
  transition: opacity .3s ease;
}
.process-list li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 1;
  width: 72px;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s var(--ease-sleek);
}
.process-list li.is-active::before { transform: scaleX(1); }
.process-list li:last-child { min-height: clamp(360px, 56svh, 560px); align-items: start; padding-top: clamp(72px, 11svh, 126px); }
.process-list li.is-active { opacity: 1; }
.process-list li > span { color: var(--amber); font-family: var(--font-mono); font-size: 15px; opacity: .32; transition: opacity .28s ease; }
.process-list li.is-active > span { opacity: 1; }
.process-list h3 {
  margin: 0 0 9px;
  color: var(--white);
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.1;
  transition: transform .28s var(--ease-out);
}
.process-list li:hover h3 { transform: translateX(6px); }
.process-list p { max-width: 680px; margin: 0; color: rgba(255, 255, 255, .68); font-size: 15px; }

/* ---------------------------------------------------------- 10. Cas d'usage */
.sectors { position: relative; overflow: hidden; border-bottom: var(--rule); background: var(--amber); color: var(--navy); }
/* Cercles décoratifs (rappel du calage gonflable) en fond de section. */
.sectors::before {
  content: "";
  position: absolute;
  left: -220px;
  bottom: -260px;
  width: 460px;
  aspect-ratio: 1;
  border: 1px solid rgba(0, 47, 75, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 68px rgba(0, 47, 75, .035), 0 0 0 136px rgba(0, 47, 75, .025);
  animation: air-drift 9s ease-in-out infinite alternate-reverse;
  pointer-events: none;
}
@keyframes air-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(18px, -12px, 0) scale(1.035); }
}
.sectors .section-shell { position: relative; }
.sectors .section-index { border-left-color: var(--navy); }
.sectors .section-heading { padding-bottom: 44px; }
.sectors .section-heading h2 { color: var(--navy); }
.sectors .section-heading > p { color: rgba(0, 47, 75, .74); }
/* Consigne de balayage : uniquement pertinente sur le carrousel mobile. */
.sector-flow__mobile-hint { display: none; }
.sectors__note { margin: 26px 0 0; color: var(--navy); font-size: 13px; text-align: right; }
.sectors__note a { color: var(--navy); font-weight: 600; border-bottom: 1px solid currentColor; }

/* Volets horizontaux : le volet actif prend toute la place restante. */
.sector-flow {
  min-height: 570px;
  display: flex;
  overflow: hidden;
  border: 1px solid rgba(0, 47, 75, .24);
  background: var(--navy);
  box-shadow: 18px 18px 0 rgba(0, 47, 75, .11);
}
.sector-flow__item {
  position: relative;
  min-width: 0;
  flex: 0 0 86px;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, .14);
  background: var(--navy);
  color: rgba(255, 255, 255, .68);
  transition: flex-basis .48s var(--ease-sleek), background-color .28s ease;
}
.sector-flow__item:last-child { border-right: 0; }
.sector-flow__item.is-active { flex: 1 1 auto; background: var(--navy-l); }
.sector-flow__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 86px;
  height: 3px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-sleek);
  pointer-events: none;
}
.sector-flow__item.is-active::before { transform: scaleX(1); }

/* Le rail est un vrai bouton : clic, focus et clavier natifs. */
.sector-flow__rail {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 28px 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .12);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color .25s ease;
}
.sector-flow__rail:hover { background: rgba(255, 255, 255, .05); }
.sector-flow__rail:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }
.sector-flow__rail-index { color: var(--amber); font-family: var(--font-mono); font-size: 11px; }
.sector-flow__rail-label {
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.sector-flow__content {
  width: min(720px, calc(100vw - 470px));
  min-width: 0;
  padding: clamp(50px, 6vw, 82px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(16px);
  transition: opacity .24s ease .1s, transform .4s var(--ease-sleek) .05s, visibility 0s linear .3s;
}
.sector-flow__item.is-active .sector-flow__content { opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .08s, 0s; }
.sector-flow__code {
  margin: 0 0 32px;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sector-flow__content > h3 { max-width: 690px; margin: 0 0 25px; color: var(--white); font-size: clamp(35px, 4vw, 61px); line-height: .98; }
.sector-flow__content > p:not(.sector-flow__code) {
  max-width: 690px;
  margin: 0 0 48px;
  color: rgba(255, 255, 255, .72);
  font-size: 16px;
  line-height: 1.72;
}
.sector-flow__content ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .18); }
.sector-flow__content li {
  min-height: 88px;
  padding: 17px 16px 17px 0;
  display: flex;
  align-items: flex-end;
  border-right: 1px solid rgba(255, 255, 255, .18);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
}
.sector-flow__content li:not(:first-child) { padding-left: 16px; }
.sector-flow__content li:last-child { border-right: 0; }

/* ---------------------------------------------------------- 11. Déploiement */

/* Bandeau de réassurance : lecture statique en une passe, pas de scroll piloté. */
.pilot__reassurance {
  margin-bottom: clamp(72px, 9vw, 124px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--rule-light);
}
.pilot__reassurance li { position: relative; padding: 34px clamp(18px, 2.2vw, 32px) 0 0; }
.pilot__reassurance li + li { padding-left: clamp(18px, 2.2vw, 32px); border-left: var(--rule-light); }
.pilot__reassurance li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--amber);
}
.pilot__reassurance li + li::before { left: clamp(18px, 2.2vw, 32px); }
.pilot__reassurance h3 { margin: 0 0 12px; color: var(--white); font-size: 18px; letter-spacing: -.028em; line-height: 1.25; }
.pilot__reassurance p { margin: 0; color: rgba(255, 255, 255, .64); font-size: 13.5px; line-height: 1.65; }

/* Séquence détaillée : encart clair, lecture statique en 4 colonnes. */
.pilot__sequence { padding: clamp(34px, 4.6vw, 58px); background: var(--beige-l); color: var(--navy); }
.pilot__sequence-intro { max-width: 760px; margin-bottom: 46px; }
.pilot__sequence-intro .section-index { color: var(--amber-d); border-left-color: var(--amber-d); }
.pilot__sequence-intro h3 { max-width: 720px; margin: 0 0 18px; color: var(--navy); font-size: clamp(36px, 4vw, 56px); line-height: 1; }
.pilot__sequence-intro > p:not(.section-index) { max-width: 500px; margin: 0; color: var(--body); }

.pilot__sequence-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(0, 47, 75, .22);
  border-left: 1px solid rgba(0, 47, 75, .22);
}
.pilot__sequence-list li {
  min-height: 310px;
  padding: 28px 24px 34px;
  border-right: 1px solid rgba(0, 47, 75, .22);
  border-bottom: 1px solid rgba(0, 47, 75, .22);
}
.pilot__sequence-list li > span { display: block; margin-bottom: 64px; color: var(--amber-d); font-family: var(--font-mono); font-size: 11px; }
.pilot__sequence-list h3 { margin: 0 0 15px; color: var(--navy); font-size: clamp(22px, 2vw, 27px); }
.pilot__sequence-list p { margin: 0; color: var(--body); font-size: 14px; line-height: 1.68; }

/* ------------------------------------------------------------------ 12. FAQ */
.faq { border-bottom: var(--rule); }
.faq__layout { display: grid; grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr); gap: clamp(60px, 8vw, 130px); }
.faq .section-intro .text-link { margin-top: 26px; }
.faq__list { border-top: var(--rule); }
.faq-item { border-bottom: var(--rule); }
.faq-item summary {
  min-height: 78px;
  padding: 19px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  color: var(--navy);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary b {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: var(--rule);
  color: var(--navy);
  font-size: 22px;
  font-weight: 400;
  transition: transform .25s var(--ease-sleek), background-color .2s ease;
}
.faq-item[open] summary b { transform: rotate(45deg); background: var(--amber); color: var(--navy); }
/* Hauteur et opacité pilotées en JS (animation d'ouverture). */
.faq-item__answer { height: 0; opacity: 0; overflow: hidden; }
.faq-item__answer p { max-width: 720px; margin: 0; padding: 0 70px 30px 0; font-size: 15px; }

/* ------------------------------------------------------------- 13. Soutiens */
.support { padding: clamp(54px, 7vw, 96px) 0; background: var(--white); border-bottom: var(--rule); }
.support__award { margin: 0 0 14px; display: grid; gap: 10px; justify-items: center; text-align: center; }
.support__award span {
  color: var(--amber-d);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.support__award strong { color: var(--navy); font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.support__statement { margin: 0 0 42px; color: var(--body); font-size: 14px; text-align: center; }

.support__logos { display: grid; grid-template-columns: repeat(5, 1fr); border-top: var(--rule); border-left: var(--rule); }
.support__logos > div { min-height: 150px; padding: 28px; display: grid; place-items: center; border-right: var(--rule); border-bottom: var(--rule); }
.support__logos img {
  max-width: 175px;
  max-height: 76px;
  object-fit: contain;
  background: transparent;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .2s ease, opacity .2s ease, transform .25s var(--ease-out);
}
.support__logos > div:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.035); }

/* ----------------------------------------------------------- 14. CTA finale */
.final-cta { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.final-cta__layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr); gap: clamp(50px, 8vw, 130px); align-items: end; }
.final-cta h2 { margin-bottom: 0; }
.final-cta__copy > p { max-width: 590px; margin-bottom: 34px; color: rgba(255, 255, 255, .68); font-size: 18px; }
.final-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------------------- 15. Pied de page */
.site-footer { padding: 82px 0 34px; background: var(--navy); color: rgba(255, 255, 255, .58); }
.site-footer__top {
  padding-bottom: 58px;
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.site-footer__brand p { max-width: 310px; margin: 22px 0 0; font-size: 13px; }
.site-footer nav h2 {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, .66);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.site-footer nav a {
  min-height: 35px;
  width: fit-content;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, .66);
  font-size: 13px;
  transition: color .2s ease;
}
.site-footer nav a:hover { color: var(--amber); }

.footer-return {
  margin-top: 48px;
  padding-block: 34px;
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) minmax(260px, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.footer-return__heading span {
  display: block;
  margin-bottom: 11px;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.footer-return__heading h2 { max-width: 470px; margin: 0; color: var(--white); font-size: clamp(24px, 2.45vw, 35px); line-height: 1.08; }
.footer-return > p { max-width: 470px; margin: 0; color: rgba(255, 255, 255, .6); font-size: 13px; line-height: 1.7; }
.footer-return__action {
  min-height: 48px;
  padding: 12px 15px 12px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border: 1px solid rgba(246, 193, 60, .56);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
.footer-return__action b { color: var(--amber); font-size: 18px; font-weight: 400; transition: transform .28s var(--ease-sleek), color .22s ease; }
.footer-return__action:hover,
.footer-return__action:focus-visible { border-color: var(--amber); background: var(--amber); color: var(--navy); }
.footer-return__action:hover b,
.footer-return__action:focus-visible b { color: var(--navy); transform: translate(3px, -3px); }

.site-footer__bottom { padding-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 11px; }
.site-footer__bottom nav { display: flex; gap: 24px; }
.site-footer__bottom nav a { min-height: 32px; font-size: 11px; }

/* -------------------------------------------------- 16. Apparitions au scroll */
/* La classe .js est posée par un script inline dans <head> : sans JS, tout
   reste visible. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js [data-reveal][data-reveal-type="image"] { transform: scale(.985); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-delay="1"] { transition-delay: .08s; }
.js [data-delay="2"] { transition-delay: .16s; }
.js [data-delay="3"] { transition-delay: .24s; }
.js [data-delay="4"] { transition-delay: .32s; }

/* Titres découpés mot à mot par le JS. */
.js [data-split-title] .title-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.48em);
  transition: opacity .36s ease, transform .52s var(--ease-sleek);
  transition-delay: calc(var(--word-index) * 40ms);
}
.js [data-split-title].is-split-visible .title-word { opacity: 1; transform: none; }

/* Économise le rendu des sections hors écran. Réserve calée sur la hauteur
   réelle, sinon la barre de défilement saute. Volontairement absent de
   .process et .pilot : sticky + content-visibility provoque des sauts. */
@supports (content-visibility: auto) {
  .business-case { content-visibility: auto; contain-intrinsic-size: 1px 1000px; }
  .products { content-visibility: auto; contain-intrinsic-size: 1px 1800px; }
  .sectors { content-visibility: auto; contain-intrinsic-size: 1px 1050px; }
  .faq { content-visibility: auto; contain-intrinsic-size: 1px 1000px; }
  .support { content-visibility: auto; contain-intrinsic-size: 1px 600px; }
  .final-cta { content-visibility: auto; contain-intrinsic-size: 1px 620px; }
}

/* ------------------------------------------------------------ 17. Responsive */

/* Palier intermédiaire : la navigation horizontale se resserre avant de passer
   en menu (< 1100px). */
@media (max-width: 1160px) {
  .primary-nav { gap: 16px; }
  .primary-nav > a.nav-return { padding-left: 16px; font-size: 12px; }
  .nav-cta { padding-inline: 12px; }
}

@media (max-width: 1120px) {
  .process__layout,
  .faq__layout { grid-template-columns: minmax(250px, 4fr) minmax(0, 8fr); gap: 54px; }

  .pilot__reassurance,
  .pilot__sequence-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pilot__reassurance li,
  .pilot__reassurance li + li { padding: 34px 0 30px; border-left: 0; }
  .pilot__reassurance li + li::before { left: 0; }
  .pilot__reassurance li:nth-child(n+3) { border-top: var(--rule-light); }
  .pilot__reassurance li:nth-child(even) { padding-left: 34px; border-left: var(--rule-light); }
  .pilot__reassurance li:nth-child(even)::before { left: 34px; }
}

/* Gammes en 2 colonnes : la 3e carte s'étale, image à gauche. Borné à 921px
   pour ne pas avoir à défaire ces règles dans le palier mobile. */
@media (min-width: 920.02px) and (max-width: 1120px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: .92fr 1.08fr; }
  .product-card:last-child .product__media { aspect-ratio: auto; min-height: 440px; border-right: var(--rule); border-bottom: 0; }
  .product-card:last-child .product__description { min-height: auto; }
}

/* Bascule en menu déroulant. */
@media (max-width: 1100px) {
  .menu-toggle { display: flex; }
  .primary-nav {
    position: fixed;
    inset: var(--header-height) 0 auto;
    max-height: calc(100svh - var(--header-height));
    padding: 18px var(--gutter) 30px;
    display: grid;
    gap: 0;
    overflow-y: auto;
    background: var(--navy);
    border-top: 1px solid rgba(255, 255, 255, .12);
    transform: translateY(-112%);
    opacity: 0;
    visibility: hidden;
    transition: transform .38s var(--ease-out), opacity .25s ease, visibility 0s linear .38s;
  }
  .primary-nav.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  .primary-nav > a:not(.nav-cta) { min-height: 58px; padding-inline: 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: 18px; }
  .primary-nav > a.nav-return { border-left: 0; color: rgba(255, 255, 255, .62); font-size: 16px; }
  .primary-nav > .nav-cta { margin-top: 20px; justify-content: center; gap: 20px; font-size: 13px; }

  .hero__copy { width: 68%; }
  .sector-flow__content { width: min(640px, calc(100vw - 410px)); padding-inline: 46px; }
  .footer-return { grid-template-columns: 1fr 1fr; }
  .footer-return__action { grid-column: 1 / -1; width: fit-content; }
}

/* ---------------------------------------------------------------------------
   < 920px : tout passe en pleine largeur. Les tailles de titres remontent ici
   (et non à 680px) pour suivre l'élargissement des colonnes.
   --------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .section-heading,
  .faq__layout,
  .final-cta__layout,
  .case-grid,
  .product-grid { grid-template-columns: 1fr; }

  .section-heading { gap: 26px; }
  .faq__layout { gap: 52px; }

  .section-intro--sticky { position: static; }

  /* Échelle titres pleine largeur : continue de 920px à 320px. */
  h2 { font-size: clamp(44px, 8.2vw, 62px); }
  .hero h1 { font-size: clamp(52px, 10vw, 76px); }
  .case-card h3 { font-size: clamp(22px, 2.8vw, 25px); }
  .product-card h3 { font-size: clamp(36px, 4.4vw, 44px); }
  .process-list h3 { font-size: clamp(24px, 3vw, 28px); }
  .sector-flow__content > h3 { font-size: clamp(30px, 5.6vw, 44px); }
  .pilot__reassurance h3 { font-size: 19px; }
  .pilot__sequence-intro h3 { font-size: clamp(36px, 4.4vw, 42px); }
  .footer-return__heading h2 { font-size: clamp(24px, 3vw, 28px); }
  .metric__value { font-size: clamp(50px, 5.8vw, 56px); }

  /* Hero : texte sur fond marine, puis photographie franche sans dégradé. */
  .hero { min-height: 0; display: flex; flex-direction: column; }
  .hero__copy {
    width: 100%;
    min-height: 0;
    padding-top: 138px;
    padding-bottom: 56px;
    justify-content: flex-start;
  }
  .hero__media {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    height: clamp(340px, 48vw, 440px);
  }
  .hero__media::before,
  .hero__media::after { display: none; }
  .hero__media img { object-position: 64% 55%; filter: saturate(.82) contrast(1.02) brightness(.92); }
  .hero__cycle-proof { left: var(--gutter); right: var(--gutter); bottom: 18px; width: auto; }

  /* Indicateurs : lecture verticale plus courte. */
  .metrics__grid { grid-template-columns: 1fr; }
  .metric { min-height: 168px; border-right: var(--rule); border-bottom: var(--rule); }
  .metric:last-child { border-bottom: 0; }
  .metrics__note { padding-top: 26px; border-top: 0; }

  /* Argumentaire : cartes empilées. */
  .case-card { min-height: 0; }
  .case-card__index { margin-bottom: 18px; }

  /* Gammes : cartes empilées, hauteur de description libre. */
  .product__description { min-height: auto; }
  .products__cta { flex-direction: column; align-items: stretch; gap: 26px; }
  .products__cta .button { width: 100%; }

  /* Fonctionnement : titre, visuel collant sous l'en-tête, puis étapes. */
  .process__layout { display: flex; flex-direction: column; gap: 0; }
  .process__content { display: contents; }
  .process__content .section-intro { order: 1; margin-bottom: 42px; }
  .process__media {
    order: 2;
    position: sticky;
    top: var(--header-height);
    z-index: 5;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 10px;
    overflow: visible;
    background: var(--navy);
    box-shadow: 0 10px 22px rgba(0, 20, 32, .18);
  }
  .process__frames {
    height: clamp(160px, 24svh, 210px);
    border: 1px solid rgba(255, 255, 255, .16);
    background: var(--navy-d);
  }
  /* Le cadre impose sa hauteur : les 4 vues se calent dessus. */
  .process__frames img,
  .process__frames img + img { width: 100%; height: 100%; aspect-ratio: auto; }
  .process__state { right: calc(var(--gutter) + 10px); bottom: 20px; }
  .process-list { order: 3; border-top: 0; }
  .process-list li { min-height: clamp(245px, 38svh, 350px); padding-block: 44px; }
  .process-list li:last-child { min-height: clamp(285px, 44svh, 400px); padding-top: 58px; }

  /* Cas d'usage : cartes tactiles en défilement horizontal, avec aperçu de la
     suivante et accroche de balayage. */
  .sectors .section-heading { padding-bottom: 34px; }
  .sector-flow__mobile-hint {
    margin: 0 0 16px;
    display: block;
    color: rgba(0, 47, 75, .68);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .sector-flow {
    min-height: 0;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 24px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 460px);
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    background: transparent;
    box-shadow: none;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .sector-flow::-webkit-scrollbar { display: none; }
  /* Tous les volets sont ouverts : le clic n'a plus d'effet visuel, c'est voulu. */
  .sector-flow__item,
  .sector-flow__item.is-active {
    flex: none;
    min-height: 540px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    background: var(--navy);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .sector-flow__item::before { width: 72px; transform: scaleX(1); }
  .sector-flow__rail {
    min-height: 62px;
    height: auto;
    padding: 16px 20px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    cursor: default;
  }
  .sector-flow__rail-label { writing-mode: initial; transform: none; }
  .sector-flow__content,
  .sector-flow__item.is-active .sector-flow__content {
    width: auto;
    padding: 38px 24px 30px;
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .sector-flow__content > p:not(.sector-flow__code) { margin-bottom: 36px; }
  .sector-flow__content ul { margin-top: auto; grid-template-columns: 1fr; }
  .sector-flow__content li,
  .sector-flow__content li:not(:first-child) {
    min-height: 52px;
    padding: 13px 0;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
  }
  .sector-flow__content li:last-child { border-bottom: 0; }
  .sectors__note { text-align: left; }

  /* Déploiement. */
  .pilot__reassurance { margin-bottom: 62px; grid-template-columns: 1fr; }
  .pilot__reassurance li,
  .pilot__reassurance li + li,
  .pilot__reassurance li:nth-child(even) { padding: 28px 0 26px; border-left: 0; }
  .pilot__reassurance li + li { border-top: var(--rule-light); }
  .pilot__reassurance li:nth-child(n+3) { border-top: var(--rule-light); }
  .pilot__reassurance li::before,
  .pilot__reassurance li + li::before,
  .pilot__reassurance li:nth-child(even)::before { left: 0; }
  .pilot__sequence { margin-inline: 0; padding: 38px 24px; }

  .site-footer__top { grid-template-columns: repeat(3, 1fr); }
  .site-footer__brand { grid-column: 1 / -1; padding-bottom: 24px; }
  .footer-return { grid-template-columns: 1fr; }
  .footer-return__action { grid-column: auto; }
}

/* ---------------------------------------------------------------------------
   < 680px : gouttière fixée à 20px. Toute marge négative doit utiliser -20px
   et non var(--gutter), qui vaut encore jusqu'à 27px à cette largeur.
   --------------------------------------------------------------------------- */
@media (max-width: 680px) {
  :root { --header-height: 68px; --section-space: 74px; }

  .section-shell,
  .site-header__inner,
  .metrics__inner { padding-inline: 20px; }
  .brand img { height: 28px; }

  .section-index { margin-bottom: 16px; font-size: 10px; }
  .section-heading > p,
  .section-intro > p:last-child { font-size: 16px; line-height: 1.62; }

  /* Menu tactile : liens plus nets et deux actions clairement séparées. */
  .primary-nav { padding: 8px 20px 24px; }
  .primary-nav > a:not(.nav-cta) { min-height: 54px; font-size: 17px; }
  .primary-nav > .nav-cta { width: 100%; min-height: 52px; margin-top: 16px; padding-inline: 18px; }

  .hero__copy { padding: 116px 20px 42px; }
  .hero__media { height: 300px; }
  .hero h1 { margin-bottom: 24px; }
  .hero__lead { margin-bottom: 28px; font-size: 16px; line-height: 1.58; }
  .hero__actions,
  .final-cta__actions { display: grid; }
  .hero__actions .button,
  .final-cta__actions .button { width: 100%; }
  .hero__cycle-proof { left: 20px; right: 20px; bottom: 22px; padding: 14px; gap: 12px; border-left-width: 3px; }
  .hero__cycle-value { min-width: 72px; font-size: 52px; }
  .hero__cycle-copy strong { font-size: 14px; }
  .hero__cycle-copy small { font-size: 10px; }

  /* Chiffres plus compacts, sans sensation de grandes cartes vides. */
  .metric { min-height: 142px; padding: 28px 20px; }
  .metric__value { margin-bottom: 20px; }
  .metrics__note { font-size: 12px; }

  .case-card { padding: 28px 20px 32px; }
  .case-card::before { width: 52px; }
  .case-card p { font-size: 14px; }

  /* Gammes : cartes resserrées, format d'image carré pour les trois. */
  .product__media { aspect-ratio: 1 / 1; }
  .product__copy { padding: 24px 20px 28px; }
  .product__meta { min-height: auto; }
  .product-card h3 { margin-top: 18px; }
  .product__description { margin-bottom: 20px; }
  .product__image-label { right: 10px; bottom: 10px; }
  .products__cta { padding-block: 40px; }

  /* Fonctionnement : visuel plus bas et compteur allégé. */
  .process__content .section-intro { margin-bottom: 32px; }
  .process__media { margin-inline: -20px; padding: 0 20px 8px; }
  .process__frames { height: 148px; }
  .process__state { right: 28px; bottom: 16px; min-width: 72px; padding: 6px 8px; }
  .process__state strong { font-size: 25px; }
  .process__state span { font-size: 9px; }
  .process-list li { grid-template-columns: 36px 1fr; gap: 12px; min-height: 238px; padding: 42px 0; }
  .process-list li::before { width: 52px; }
  .process-list li:last-child { min-height: 278px; padding-top: 52px; }
  .process-list li > span { font-size: 12px; }
  .process-list p { font-size: 14px; line-height: 1.65; }

  /* Cas d'usage : carte quasi pleine largeur, aperçu de 38px sur la suivante. */
  .sector-flow { margin-inline: -20px; padding-inline: 20px; grid-auto-columns: calc(100vw - 72px); scroll-padding-inline: 20px; }
  .sector-flow__item,
  .sector-flow__item.is-active { min-height: 520px; }
  .sector-flow__content { padding: 32px 20px 26px; }

  /* Déploiement : chronologie verticale. */
  .pilot__sequence { padding: 34px 20px 8px; }
  .pilot__sequence-intro { margin-bottom: 28px; }
  .pilot__sequence-list { grid-template-columns: 1fr; border-left: 0; }
  .pilot__sequence-list li {
    min-height: 0;
    padding: 28px 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    border-right: 0;
  }
  .pilot__sequence-list li > span {
    width: 30px;
    height: 30px;
    margin: 1px 0 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--amber-d);
    color: var(--navy);
  }
  .pilot__sequence-list h3 { margin: 0 0 8px; font-size: 23px; }

  .faq-item summary { min-height: 72px; gap: 18px; font-size: 16px; }
  .faq-item summary b { width: 34px; height: 34px; }
  .faq-item__answer p { padding-right: 0; }

  .support__logos { grid-template-columns: repeat(2, 1fr); }
  .support__logos > div { min-height: 116px; padding: 18px; }
  .support__logos > div:last-child { grid-column: 1 / -1; }
  .support__logos img { max-width: 140px; max-height: 58px; }

  .site-footer { padding-top: 60px; }
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 34px 22px; }
  .site-footer__brand,
  .site-footer__top nav:last-child { grid-column: 1 / -1; }
  .site-footer__bottom,
  .site-footer__bottom nav { align-items: flex-start; flex-direction: column; }
  .site-footer__bottom nav { gap: 0; }
  .footer-return { margin-top: 34px; padding-block: 26px; gap: 20px; }
  .footer-return__action { width: 100%; }
}

/* Appareils tactiles : aucun état de survol persistant après un appui. */
@media (hover: none) and (pointer: coarse) {
  .button:active::before,
  .nav-cta:active::before { transform: scaleY(1); }

  .product-card:hover,
  .product-card:focus-within { transform: none; box-shadow: none; }
  .product-card.has-hover-image:hover .product__media > img { opacity: 1; transform: none; }
  .product-card.has-hover-image:hover .product__hover-media { opacity: 0; transform: scale(1.035); }
  .product-card.has-hover-image:hover .product__image-label i { opacity: 1; transform: none; }
  .product-card.has-hover-image:hover .product__image-label b { opacity: 0; transform: translateY(5px); }

  .product-card.has-hover-image.is-alt-state .product__media > img { opacity: .18; transform: scale(.985); }
  .product-card.has-hover-image.is-alt-state .product__hover-media { opacity: 1; transform: none; }
  .product-card.has-hover-image.is-alt-state .product__image-label i { opacity: 0; transform: translateY(-5px); }
  .product-card.has-hover-image.is-alt-state .product__image-label b { opacity: 1; transform: none; }

  .case-card:hover { background: var(--beige); }
  .case-card:hover::before { transform: scaleX(0); }
  .process-list li:hover h3 { transform: none; }
  .sector-flow__rail:hover { background: transparent; }
  .metric:hover { background: transparent; }
  .support__logos > div:hover img { filter: grayscale(1); opacity: .72; transform: none; }
}

/* ------------------------------------------------ 18. Préférences système */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .sectors::before { animation: none; }
  .product-card:hover { transform: none; }
  .js [data-reveal],
  .js [data-split-title] .title-word { opacity: 1; transform: none; }

  /* L'atténuation des étapes est décorative : elle ne doit jamais rendre du
     texte illisible quand les animations sont désactivées. */
  .process-list li,
  .process-list li > span { opacity: 1; }
  .process-list li::before { transform: scaleX(1); }
}

@media (forced-colors: active) {
  .button,
  .nav-cta,
  .faq-item summary b,
  .sector-flow__rail { border: 1px solid ButtonText; }
}