/* ==========================================================================
   Keystone One — mise en page de la landing page
   Dépend de tokens.css (jetons, effets, boutons, typographie).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Réinitialisation et bases
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* décale les ancres pour ne pas passer sous la navigation fixe */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--ks-obsidian);
  color: var(--ks-mist);
  font-family: var(--ks-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, object { display: block; max-width: 100%; }

/* Un <object> SVG n'a pas de ratio intrinsèque exploitable : sans largeur
   explicite il prend sa taille naturelle et déborde de sa colonne. */
object[type="image/svg+xml"] { width: 100%; height: auto; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

.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;
}

/* Le lien d'évitement doit être atteignable au clavier */
.skip {
  position: absolute; top: -100px; left: 16px; z-index: 100;
  padding: 12px 20px; border-radius: 8px;
  background: var(--ks-copper); color: var(--ks-obsidian);
  font-weight: 600; text-decoration: none;
  transition: top var(--ks-dur-micro) var(--ks-ease);
}
.skip:focus { top: 16px; }

/* --------------------------------------------------------------------------
   Grille et sections
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

.section {
  position: relative;
  padding: clamp(72px, 10vw, 132px) 0;
}

/* Alternance de fond : rythme dense / respirant du point 13 */
.section--alt { background: var(--ks-basalt); }
.section--edge { border-top: 1px solid var(--ks-granite); }

.section__head { max-width: 62ch; margin-bottom: clamp(40px, 5vw, 64px); }
.section__head--wide { max-width: 78ch; }
.section__head .ks-lead { margin-top: 20px; }

/* --------------------------------------------------------------------------
   00 — Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color 300ms var(--ks-ease),
    border-color 300ms var(--ks-ease),
    backdrop-filter 300ms var(--ks-ease);
}

/* Opacifiée seulement après le premier scroll : le hero reste intact au chargement */
.nav.is-stuck {
  background: rgba(8, 9, 11, .82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--ks-granite);
}

.nav__in {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 76px;
}

/* Hauteur de la BOÎTE du symbole (le carré SVG), pas de son dessin.
   Le tracé n'occupe pas tout son viewBox 24×24 : contour compris, il court de
   y=3.2 à y=20.8 et de x≈2.65 à x≈21.35. Se caler sur la boîte laisserait donc
   ~13 % de vide en haut et en bas, et ~11 % à gauche du texte — invisible dans
   le code, très visible à l'œil. Les deux ratios ci-dessous ramènent
   l'alignement sur le dessin lui-même. */
:root {
  --ks-mark-h: 38px;
  --ks-mark-inset-y: .1333;   /* 3.2 / 24  — marge morte au-dessus et au-dessous */
  --ks-mark-inset-x: .1104;   /* 2.65 / 24 — marge morte à droite du tracé */
  --ks-mark-ink-h: calc(var(--ks-mark-h) * (1 - 2 * var(--ks-mark-inset-y)));
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;      /* écart réel au tracé : la marge morte est reprise sur .nav__words */
  text-decoration: none;
  flex: none;
}
.nav__logo:focus-visible { outline: 2px solid var(--ks-copper); outline-offset: 4px; border-radius: 6px; }

.nav__mark {
  height: var(--ks-mark-h);
  width: var(--ks-mark-h);
  flex: none;
  color: var(--ks-lime);
}

/* La justification verticale : hauteur imposée par le DESSIN du symbole, contenu
   réparti aux extrémités. Combinée au rognage d'interligne ci-dessous, elle pose
   le haut des capitales du wordmark sur le haut du tracé et la ligne de base de
   la mention sur son bas. Le retrait à gauche annule la marge morte du viewBox
   pour que l'écart vu soit bien celui de `gap`. */
.nav__words {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: var(--ks-mark-ink-h);
  margin-left: calc(var(--ks-mark-h) * var(--ks-mark-inset-x) * -1);
}

.nav__name {
  font-family: var(--ks-font-display);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ks-lime);
  white-space: nowrap;
}

.nav__endorse {
  font-family: var(--ks-font-mono);
  font-size: .6875rem;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--ks-smoke);
  white-space: nowrap;
}

/* Rognage d'interligne : une boîte de texte à `line-height: 1` reste plus haute
   que ses lettres (Sora monte à .97em et descend à .29em, JetBrains Mono à 1.02
   et .30). Sans ces retraits, on alignerait encore des boîtes vides. Les valeurs
   ramènent chaque boîte à sa hauteur de capitale, du sommet des capitales à la
   ligne de base. */
.nav__name    { margin-top: -.106em; margin-bottom: -.160em; }
.nav__endorse { margin-top: -.126em; margin-bottom: -.140em; }

/* Même résultat, calculé par le moteur à partir des métriques réelles de la
   police, dès que le navigateur sait le faire. */
@supports (text-box: trim-both cap alphabetic) {
  .nav__name, .nav__endorse { margin-top: 0; margin-bottom: 0; text-box: trim-both cap alphabetic; }
}

.nav__links {
  display: flex;
  gap: 28px;
  margin-left: auto;
  font-size: .9375rem;
  white-space: nowrap;   /* jamais deux lignes : sous le seuil, le menu disparaît */
}
.nav__links a {
  text-decoration: none;
  color: var(--ks-mist);
  transition: color var(--ks-dur-micro) var(--ks-ease);
}
.nav__links a:hover { color: var(--ks-lime); }
.nav__links a:focus-visible { outline: 2px solid var(--ks-copper); outline-offset: 4px; border-radius: 3px; }

/* Intitulés longs par défaut, courts au seuil intermédiaire. */
.nav__lbl-s, .nav__cta-s { display: none; }

.nav .ks-btn { flex: none; padding: .75rem 1.25rem; }

/* --- Bouton du menu déroulant --------------------------------------------- */

.nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid var(--ks-granite);
  border-radius: 10px;
  background: transparent;
  color: var(--ks-lime);
  cursor: pointer;
  transition: border-color var(--ks-dur-micro) var(--ks-ease);
}
.nav__burger:hover { border-color: var(--ks-concrete); }
.nav__burger:focus-visible { outline: 2px solid var(--ks-copper); outline-offset: 3px; }
.nav__burger svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.nav__burger-close { display: none; }
.nav__burger[aria-expanded="true"] .nav__burger-open { display: none; }
.nav__burger[aria-expanded="true"] .nav__burger-close { display: block; }

/* --- Panneau déroulant ---------------------------------------------------- */

.nav__panel {
  border-top: 1px solid var(--ks-granite);
  background: rgba(8, 9, 11, .94);
  backdrop-filter: blur(14px) saturate(140%);
}
.nav__panel-in { display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 16px; }
.nav__panel-in a {
  padding: 15px 0;
  font-size: 1.0625rem;
  color: var(--ks-mist);
  text-decoration: none;
  border-bottom: 1px solid var(--ks-granite);
  transition: color var(--ks-dur-micro) var(--ks-ease);
}
.nav__panel-in a:last-child { border-bottom: 0; }
.nav__panel-in a:hover { color: var(--ks-lime); }
.nav__panel-in a:focus-visible { outline: 2px solid var(--ks-copper); outline-offset: -2px; border-radius: 4px; }

/* Le panneau ouvert opacifie la barre, sinon le hero transparaît derrière. */
.nav:has(.nav__panel:not([hidden])) {
  background: rgba(8, 9, 11, .94);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--ks-granite);
}

/* --------------------------------------------------------------------------
   Paliers de la barre de navigation
   --------------------------------------------------------------------------
   Trois états, dans cet ordre de sacrifice :
     1. les intitulés se raccourcissent          (≤ 1100 px)
     2. le menu passe dans un panneau déroulant  (≤ 880 px)
     3. la mention de rattachement s'efface      (≤ 620 px)

   Le CTA reste visible dans la barre à toutes les largeurs : c'est l'unique
   conversion de la page, elle ne se cache pas derrière un bouton de menu.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .nav__links { gap: 24px; }
  .nav__lbl-l { display: none; }
  .nav__lbl-s { display: inline; }
}

@media (max-width: 880px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__in { height: 68px; gap: 14px; }
  .nav__cta { margin-left: auto; }
}

/* Sous 620 px, la mention de rattachement disparaît entièrement. Afficher
   « IO2A » seul, détaché de sa phrase, ne dirait plus rien — le rattachement
   reste porté par le hero, le bandeau de preuve et le pied de page. */
@media (max-width: 620px) {
  :root { --ks-mark-h: 34px; }
  .nav__endorse { display: none; }
  .nav__words { height: auto; justify-content: center; }
  /* Interlettrage réduit de .14em à .05em : à 375 px, la barre doit loger le
     logo, le CTA et le bouton de menu dans 335 px utiles. Le tracé large du
     wordmark est le seul poste où l'on peut reprendre les 15 px manquants
     sans sacrifier un élément entier. */
  .nav__name { font-size: .8125rem; letter-spacing: .05em; }
  .nav__logo { gap: 10px; }
  .nav__in { gap: 12px; }
  .nav__cta-l { display: none; }
  .nav__cta-s { display: inline; }
  .nav .ks-btn { padding: .6875rem 1rem; font-size: .875rem; }
}

/* --------------------------------------------------------------------------
   01 — Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: min(92vh, 880px);
  display: flex;
  align-items: center;
  padding: 140px 0 clamp(72px, 9vw, 110px);
  overflow: hidden;
}

/* Média de fond — image aujourd'hui, vidéo dès qu'elle est produite */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;   /* recentre sur le clavier et le carnet */
}
.hero__poster { display: block; }
.hero__video  { display: none; }   /* activé par .has-video quand la vidéo existe */

.hero.has-video .hero__video  { display: block; }
.hero.has-video .hero__poster { display: none; }

/* Voile de lisibilité — le titre occupe le tiers gauche (point 14) */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(8, 9, 11, .94) 0%,
      rgba(8, 9, 11, .86) 26%,
      rgba(8, 9, 11, .56) 58%,
      rgba(8, 9, 11, .34) 100%),
    linear-gradient(to top, var(--ks-obsidian) 0%, transparent 38%);
}

.hero__in { position: relative; z-index: 1; max-width: 44rem; }
.hero h1 { margin: 0 0 24px; max-width: 20ch; }
.hero .ks-lead { max-width: 52ch; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}

.hero__reassure {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 28px;
  font-family: var(--ks-font-mono);
  font-size: .8125rem;
  color: var(--ks-smoke);
}
.hero__reassure li { display: flex; align-items: center; gap: 8px; }
.hero__reassure svg { width: 14px; height: 14px; stroke: var(--ks-success); flex: none; }

@media (max-width: 700px) {
  .hero { min-height: auto; padding-top: 116px; }
  .hero__media img { object-position: 70% 50%; }
  .hero__veil {
    background:
      linear-gradient(180deg, rgba(8,9,11,.9) 0%, rgba(8,9,11,.72) 40%, rgba(8,9,11,.94) 100%);
  }
}

/* --------------------------------------------------------------------------
   02 — Bandeau de preuve
   -------------------------------------------------------------------------- */

.proof {
  border-top: 1px solid var(--ks-granite);
  border-bottom: 1px solid var(--ks-granite);
  background: var(--ks-basalt);
  padding: clamp(36px, 5vw, 52px) 0;
}

.proof__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
}

.proof__item { display: flex; flex-direction: column; gap: 6px; }
.proof__item dt {
  order: 2;
  font-family: var(--ks-font-mono);
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ks-smoke);
  line-height: 1.5;
}
.proof__item dd { order: 1; margin: 0; }

.proof__note {
  margin-top: 28px;
  font-family: var(--ks-font-mono);
  font-size: .75rem;
  color: var(--ks-smoke);
}

@media (max-width: 760px) {
  .proof__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}

/* --------------------------------------------------------------------------
   03 — Le problème
   -------------------------------------------------------------------------- */

.symptoms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--ks-granite);
  border: 1px solid var(--ks-granite);
  border-radius: 14px;
  overflow: hidden;
}

.symptom {
  background: var(--ks-obsidian);
  padding: clamp(28px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.section--alt .symptom { background: var(--ks-basalt); }

.symptom__q {
  font-family: var(--ks-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ks-lime);
  line-height: 1.35;
}
.symptom p { font-size: 1rem; margin: 0; }
.symptom__cost {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--ks-font-mono);
  font-size: .8125rem;
  color: var(--ks-copper);
}

.problem__kicker {
  margin-top: clamp(40px, 5vw, 56px);
  padding: clamp(28px, 3vw, 36px);
  border-left: 2px solid var(--ks-copper);
  background: linear-gradient(90deg, var(--ks-copper-veil), transparent 70%);
}
.problem__kicker p {
  font-family: var(--ks-font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ks-lime);
  letter-spacing: -.02em;
  max-width: 44ch;
}

/* --------------------------------------------------------------------------
   04 — L'approche
   -------------------------------------------------------------------------- */

.thesis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.thesis__card {
  padding: clamp(28px, 3vw, 34px);
  border: 1px solid var(--ks-granite);
  border-radius: 14px;
  background: var(--ks-slate);
}
.thesis__card h3 { margin-bottom: 10px; }
.thesis__card p { font-size: 1rem; }
.thesis__card--accent { border-color: rgba(255, 107, 44, .32); }

.figure {
  border: 1px solid var(--ks-granite);
  border-radius: 16px;
  padding: clamp(12px, 2vw, 24px);
  background: var(--ks-basalt);
  box-shadow: var(--ks-shadow-card);
}
.section--alt .figure { background: var(--ks-obsidian); }
.figure object,
.figure img { width: 100%; height: auto; border-radius: 8px; }

.figure__cap {
  display: block;
  margin-top: 18px;
  padding: 0 4px;
  font-family: var(--ks-font-mono);
  font-size: .75rem;
  line-height: 1.6;
  color: var(--ks-smoke);
}

/* --------------------------------------------------------------------------
   Lisibilité des schémas en petite largeur
   --------------------------------------------------------------------------
   Les trois SVG ont un viewBox de 960 de large et des libellés de 10 à 12 px.
   Réduits à la largeur d'un téléphone, ces libellés tombent sous 4 px : la
   figure devient une tache grise, alors que la page promet précisément qu'on
   peut y lire les noms des nœuds.

   Plutôt que de les rétrécir, on leur impose une largeur plancher et on laisse
   la figure défiler horizontalement. La légende reste collée à gauche pour
   ne pas disparaître pendant le défilement.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .figure { overflow-x: auto; overscroll-behavior-x: contain; }
  .figure object[type="image/svg+xml"] { min-width: 660px; }
  .figure__cap {
    position: sticky;
    left: 0;
    width: min(100%, calc(100vw - 2 * clamp(20px, 4vw, 48px) - 2 * clamp(12px, 2vw, 24px)));
  }

  /* La perspective n'a plus de sens quand la figure défile : elle ajoute une
     déformation à un contenu déjà contraint. */
  .ks-perspective > * { transform: none; }

  /* Le schéma de workflow est volontairement sans cadre : il ne porte pas la
     classe .figure et doit donc recevoir le même traitement par son conteneur. */
  .ks-perspective { overflow-x: auto; overscroll-behavior-x: contain; perspective: none; }
  .ks-perspective object[type="image/svg+xml"] { min-width: 660px; }
}

/* --------------------------------------------------------------------------
   05 — Ce que nous construisons
   -------------------------------------------------------------------------- */

.offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.offer {
  position: relative;
  padding: clamp(28px, 3vw, 36px);
  border: 1px solid var(--ks-granite);
  border-radius: 14px;
  background: var(--ks-slate);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--ks-dur-micro) var(--ks-ease);
}
.offer:hover { border-color: var(--ks-concrete); }

.offer__ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--ks-granite);
  border-radius: 10px;
  background: var(--ks-obsidian);
}
.offer__ico svg {
  width: 20px; height: 20px;
  fill: none; stroke: var(--ks-copper); stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.offer h3 { font-size: 1.1875rem; }
.offer p { font-size: 1rem; margin: 0; }

.offer__stack {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--ks-font-mono);
  font-size: .75rem;
  color: var(--ks-smoke);
}

/* La cinquième carte prend toute la largeur restante sur grand écran */
.offer--wide { grid-column: 1 / -1; }
.offer--wide .offer__body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) {
  .offer--wide .offer__body { grid-template-columns: 1fr; gap: 16px; }
}

/* --------------------------------------------------------------------------
   06 — Bénéfices
   -------------------------------------------------------------------------- */

.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  background: var(--ks-granite);
  border: 1px solid var(--ks-granite);
  border-radius: 16px;
  overflow: hidden;
}

.benefit {
  background: var(--ks-obsidian);
  padding: clamp(28px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background-color 300ms var(--ks-ease);
}
.section--alt .benefit { background: var(--ks-basalt); }
.benefit:hover { background: var(--ks-slate); }

.benefit svg {
  width: 22px; height: 22px;
  fill: none; stroke: var(--ks-copper); stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.benefit h3 { font-size: 1.125rem; line-height: 1.35; }
.benefit p { font-size: .9375rem; margin: 0; }
.benefit__num {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--ks-font-mono);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ks-copper);
  letter-spacing: -.02em;
}

/* --------------------------------------------------------------------------
   07 — La pile technique
   -------------------------------------------------------------------------- */

.stack-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
/* Sans cela, un enfant de grille ne descend jamais sous la taille de son
   contenu : la figure du workflow s'élargirait à 660 px et déborderait de la
   page au lieu de défiler dans son cadre. */
.stack-wrap > * { min-width: 0; }
@media (max-width: 1000px) {
  .stack-wrap { grid-template-columns: 1fr; }
}

.stack { display: flex; flex-direction: column; }

.stack__row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--ks-granite);
}
.stack__row:first-child { border-top: 1px solid var(--ks-granite); }

.stack__row svg {
  width: 20px; height: 20px; margin-top: 4px;
  fill: none; stroke: var(--ks-smoke); stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

.stack__name {
  font-family: var(--ks-font-mono);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ks-lime);
  letter-spacing: -.01em;
}
.stack__role { font-size: .9375rem; margin-top: 4px; }

/* --------------------------------------------------------------------------
   08 — La méthode
   -------------------------------------------------------------------------- */

.method { position: relative; isolation: isolate; }

.method__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.method__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .16;
}
.method__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    var(--ks-obsidian) 0%, rgba(8,9,11,.72) 42%, var(--ks-obsidian) 100%);
}

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 48px 24px 0 0;
  counter-increment: step;
}
.step:last-child { padding-right: 0; }

/* La frise : un trait continu, un point par étape */
.step::before {
  content: '';
  position: absolute;
  top: 15px; left: 0; right: 0;
  height: 1px;
  background: var(--ks-granite);
}
.step:last-child::before { right: calc(100% - 16px); }

.step::after {
  content: '';
  position: absolute;
  top: 10px; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--ks-obsidian);
  border: 2px solid var(--ks-concrete);
}
.step--done::after { background: var(--ks-copper); border-color: var(--ks-copper); }

.step__dur {
  font-family: var(--ks-font-mono);
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ks-copper);
}
.step h3 { font-size: 1.0625rem; margin: 8px 0 8px; }
.step p { font-size: .9375rem; margin: 0; }

.method__pledge {
  margin-top: clamp(48px, 6vw, 64px);
  padding: clamp(28px, 3vw, 36px) clamp(28px, 3vw, 40px);
  border: 1px solid rgba(255, 107, 44, .3);
  border-radius: 14px;
  background: linear-gradient(120deg, var(--ks-copper-veil), transparent 65%);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.method__pledge p {
  font-family: var(--ks-font-display);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 600;
  color: var(--ks-lime);
  letter-spacing: -.02em;
  margin: 0;
  flex: 1 1 24ch;
}
.method__pledge span { font-size: .9375rem; flex: 1 1 30ch; }

@media (max-width: 1000px) {
  .steps { grid-template-columns: 1fr; }
  .step { padding: 0 0 32px 32px; }
  .step:last-child { padding-bottom: 0; }
  .step::before { top: 0; bottom: 0; left: 5px; right: auto; width: 1px; height: auto; }
  .step:last-child::before { bottom: calc(100% - 16px); right: auto; }
  .step::after { top: 5px; left: 0; }
}

/* --------------------------------------------------------------------------
   09 — Situations
   -------------------------------------------------------------------------- */

.cases { display: grid; gap: 20px; }

.case {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  border: 1px solid var(--ks-granite);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ks-slate);
}
.section--alt .case { background: var(--ks-obsidian); }

.case__visual { position: relative; min-height: 220px; }
.case__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case__visual::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,9,11,.35) 0%, rgba(8,9,11,.8) 100%);
}

.case__body { padding: clamp(28px, 3vw, 38px); display: flex; flex-direction: column; gap: 16px; }
.case__who {
  font-family: var(--ks-font-mono);
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ks-smoke);
}
.case__body h3 { font-size: 1.3125rem; }
.case__body p { font-size: 1rem; margin: 0; }

.case__results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 20px;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--ks-granite);
}
.case__results div { display: flex; flex-direction: column; gap: 2px; }
.case__results b {
  font-family: var(--ks-font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ks-copper);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.case__results span {
  font-family: var(--ks-font-mono);
  font-size: .6875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ks-smoke);
  line-height: 1.5;
}

.cases__disclaimer {
  margin-top: 28px;
  padding: 20px 24px;
  border: 1px dashed var(--ks-granite);
  border-radius: 12px;
  font-size: .875rem;
  color: var(--ks-smoke);
  max-width: 86ch;
}

@media (max-width: 800px) {
  .case { grid-template-columns: 1fr; }
  .case__visual { min-height: 130px; }
  .case__visual::after {
    background: linear-gradient(180deg, rgba(8,9,11,.3) 0%, rgba(8,9,11,.85) 100%);
  }
}

/* --------------------------------------------------------------------------
   11 & 14 — Bandeaux d'appel à l'action
   -------------------------------------------------------------------------- */

.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(80px, 10vw, 132px) 0;
  text-align: center;
}

.band__bg { position: absolute; inset: 0; z-index: -2; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.band__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 70% at 50% 50%, rgba(255,107,44,.16) 0%, transparent 72%),
    linear-gradient(180deg, var(--ks-obsidian) 0%, rgba(8,9,11,.78) 35%, rgba(8,9,11,.9) 100%);
}

.band__in { max-width: 60ch; margin: 0 auto; }
.band h2 { margin-bottom: 20px; }
.band .ks-lead { margin: 0 auto; }
.band .ks-btn { margin-top: 36px; }

/* --------------------------------------------------------------------------
   12 — Tarification
   -------------------------------------------------------------------------- */

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.price {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(28px, 3vw, 38px);
  border: 1px solid var(--ks-granite);
  border-radius: 16px;
  background: var(--ks-slate);
}
.section--alt .price { background: var(--ks-obsidian); }

/* Le palier central porte le liseré : c'est l'offre à choisir */
.price--feature { border-color: rgba(255, 107, 44, .34); }
.price--feature::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(to right,
    transparent, rgba(255,107,44,.6) 30%, rgba(255,143,92,.85) 50%, rgba(255,107,44,.6) 70%, transparent);
}
.price--feature { position: relative; }

.price__label {
  font-family: var(--ks-font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ks-smoke);
}
.price__amount {
  font-family: var(--ks-font-mono);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 500;
  color: var(--ks-lime);
  letter-spacing: -.03em;
  line-height: 1.1;
}
.price__amount small {
  display: block;
  font-size: .8125rem;
  font-weight: 400;
  color: var(--ks-smoke);
  letter-spacing: 0;
  margin-top: 8px;
}
.price p { font-size: .9375rem; margin: 0; }
.price__why {
  margin-top: auto;
  padding-top: 16px;
  font-size: .875rem;
  color: var(--ks-copper);
}

.pricing__notes {
  margin-top: 28px;
  font-size: .875rem;
  color: var(--ks-smoke);
  max-width: 80ch;
}
.pricing__notes strong { color: var(--ks-mist); font-weight: 500; }

/* --------------------------------------------------------------------------
   13 — FAQ
   -------------------------------------------------------------------------- */

.faq { max-width: 82ch; border-top: 1px solid var(--ks-granite); }

.faq details { border-bottom: 1px solid var(--ks-granite); }

.faq summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--ks-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ks-lime);
  letter-spacing: -.01em;
  transition: color var(--ks-dur-micro) var(--ks-ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ks-copper-lt); }
.faq summary:focus-visible { outline: 2px solid var(--ks-copper); outline-offset: 4px; border-radius: 4px; }

.faq summary svg {
  width: 18px; height: 18px;
  margin-left: auto;
  flex: none;
  fill: none; stroke: var(--ks-smoke); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 300ms var(--ks-ease), stroke var(--ks-dur-micro) var(--ks-ease);
}
.faq details[open] summary svg { transform: rotate(180deg); stroke: var(--ks-copper); }

.faq__a { padding: 0 0 28px; max-width: 68ch; }
.faq__a p { font-size: 1rem; }
.faq__a p + p { margin-top: 14px; }

/* --------------------------------------------------------------------------
   14 — Ce qui se passe pendant les 30 minutes
   -------------------------------------------------------------------------- */

.agenda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  margin: 44px auto 0;
  max-width: 62rem;
  background: var(--ks-granite);
  border: 1px solid var(--ks-granite);
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
}
.agenda div {
  background: rgba(15, 17, 21, .82);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agenda b {
  font-family: var(--ks-font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ks-copper);
  font-weight: 500;
}
.agenda span { font-size: .9375rem; }

/* --------------------------------------------------------------------------
   15 — Pied de page
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--ks-granite);
  padding: clamp(56px, 7vw, 84px) 0 40px;
  background: var(--ks-obsidian);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--ks-granite);
}
@media (max-width: 860px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__brand { grid-column: 1 / -1; }
}

.footer__brand svg { height: 34px; width: auto; margin-bottom: 18px; }
.footer__brand p { font-size: .9375rem; max-width: 34ch; }

.footer .footer__col {
  font-family: var(--ks-font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ks-smoke);
  margin-bottom: 16px;
}
.footer li + li { margin-top: 10px; }
.footer a {
  font-size: .9375rem;
  text-decoration: none;
  color: var(--ks-mist);
  transition: color var(--ks-dur-micro) var(--ks-ease);
}
.footer a:hover { color: var(--ks-lime); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  padding-top: 28px;
  font-family: var(--ks-font-mono);
  font-size: .75rem;
  color: var(--ks-smoke);
}
/* Bouton présenté comme un lien : c'est bien une action (rouvrir le bandeau),
   pas une navigation — d'où le <button>, qui annonce la bonne chose au
   lecteur d'écran. */
.footer__link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .75rem;
  color: var(--ks-smoke);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--ks-dur-micro) var(--ks-ease);
}
.footer__link:hover { color: var(--ks-lime); }
.footer__link:focus-visible { outline: 2px solid var(--ks-copper); outline-offset: 3px; border-radius: 3px; }

/* --------------------------------------------------------------------------
   Bandeau de consentement
   --------------------------------------------------------------------------
   Ancré en bas, au-dessus de tout. Les deux boutons sont volontairement
   identiques : la CNIL impose que refuser soit aussi simple qu'accepter, et
   la règle du cuivre unique interdit de toute façon un second aplat.
   -------------------------------------------------------------------------- */

.consent {
  position: fixed;
  inset: auto 0 0;
  z-index: 60;
  padding: 0 clamp(12px, 3vw, 24px) clamp(12px, 3vw, 24px);
  pointer-events: none;
}

.consent__in {
  pointer-events: auto;
  max-width: 62rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(20px, 2.4vw, 26px) clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--ks-granite);
  border-radius: 14px;
  background: rgba(15, 17, 21, .96);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--ks-shadow-lift);
  /* Entrée : monte depuis le bas, sans rebond. */
  transform: translateY(calc(100% + 32px));
  opacity: 0;
  transition:
    transform 600ms var(--ks-ease),
    opacity 400ms var(--ks-ease);
}
.consent.is-open .consent__in { transform: none; opacity: 1; }

.consent__t {
  font-family: var(--ks-font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ks-mist);
  margin-bottom: 8px;
}
.consent__txt p:not(.consent__t) {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ks-mist);
  margin: 0;
  max-width: 66ch;
}
.consent__txt a { color: var(--ks-copper); text-decoration: underline; text-underline-offset: 3px; }

.consent__act {
  display: flex;
  gap: 12px;
  flex: none;
}
/* Largeur minimale commune : ni l'un ni l'autre ne doit paraître secondaire. */
.consent__act .ks-btn {
  min-width: 116px;
  justify-content: center;
  padding: 13px 20px;
}

@media (max-width: 800px) {
  .consent__in { flex-direction: column; align-items: stretch; gap: 20px; }
  .consent__act .ks-btn { flex: 1; }
}

/* --------------------------------------------------------------------------
   Pages légales
   --------------------------------------------------------------------------
   Colonne unique, longueur de ligne bridée, aucune décoration. Ces pages sont
   lues par quelqu'un qui cherche une information précise, pas par un visiteur
   qu'on veut convaincre.
   -------------------------------------------------------------------------- */

.legal { padding: 148px 0 clamp(64px, 8vw, 104px); }
.legal__in { max-width: 74ch; }

.legal h1 { margin-bottom: 16px; }
.legal__meta {
  font-family: var(--ks-font-mono);
  font-size: .8125rem;
  color: var(--ks-smoke);
  margin-bottom: clamp(40px, 5vw, 56px);
}

.legal h2 {
  font-family: var(--ks-font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ks-lime);
  margin: clamp(40px, 5vw, 56px) 0 16px;
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--ks-granite);
}
.legal h3 {
  font-family: var(--ks-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ks-lime);
  margin: 28px 0 10px;
}

.legal p, .legal li { font-size: 1rem; line-height: 1.7; color: var(--ks-mist); }
.legal p + p { margin-top: 14px; }
.legal ul { margin: 14px 0; padding-left: 0; }
.legal li { position: relative; padding-left: 22px; margin-bottom: 10px; }
.legal li::before {
  content: '';
  position: absolute;
  left: 2px; top: .72em;
  width: 6px; height: 1px;
  background: var(--ks-concrete);
}
.legal a { color: var(--ks-copper); text-decoration: underline; text-underline-offset: 3px; }

.legal dl {
  margin: 18px 0;
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: 10px 24px;
}
.legal dt {
  font-family: var(--ks-font-mono);
  font-size: .8125rem;
  color: var(--ks-smoke);
  line-height: 1.7;
}
.legal dd { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--ks-mist); }
@media (max-width: 560px) {
  .legal dl { grid-template-columns: 1fr; gap: 2px 0; }
  .legal dd { margin-bottom: 14px; }
}

/* Champ à compléter avec une donnée légale réelle. Volontairement visible :
   une mention légale incomplète mise en ligne est une infraction, pas un détail. */
.todo {
  display: inline-block;
  padding: 1px 8px;
  border: 1px dashed var(--ks-warning);
  border-radius: 4px;
  font-family: var(--ks-font-mono);
  font-size: .8125rem;
  color: var(--ks-warning);
}

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(48px, 6vw, 64px);
  font-family: var(--ks-font-mono);
  font-size: .8125rem;
  color: var(--ks-mist);
  text-decoration: none;
}
.legal__back:hover { color: var(--ks-lime); }
.legal__back svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   Endossement IO2A
   --------------------------------------------------------------------------
   La marque principale est IO2A ; Keystone One nomme la gamme. L'endossement
   doit être lisible sans concurrencer le lockup.
   -------------------------------------------------------------------------- */

/* Sous 720 px, le lockup laisse place au symbole seul et l'endossement se
   réduit à « IO2A ». La mention complète ferait 166 px de large : ajoutée au
   CTA, elle déborderait de 22 px sur un écran de 375. Le rattachement reste
   visible — c'est ce qui compte — porté par le hero, le bandeau de preuve et
   le pied de page pour la formulation entière. */
.footer__endorse {
  font-family: var(--ks-font-mono);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--ks-mist);
  margin-bottom: 12px;
}
.footer__endorse b { font-weight: 500; color: var(--ks-lime); }

/* --------------------------------------------------------------------------
   Formulaire de contact
   --------------------------------------------------------------------------
   Champs en Basalte sur fond de bandeau, bordure Granit à un pixel, focus
   cuivre. Aucun placeholder tenant lieu d'étiquette : chaque champ a un
   <label> visible et permanent.
   -------------------------------------------------------------------------- */

.form {
  max-width: 46rem;
  margin: clamp(40px, 5vw, 56px) auto 0;
  text-align: left;
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field--wide { grid-column: 1 / -1; }

.field label {
  font-family: var(--ks-font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ks-mist);
}
.field__opt {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ks-smoke);
}

.field input,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--ks-granite);
  border-radius: 10px;
  background: rgba(8, 9, 11, .72);
  color: var(--ks-lime);
  font-family: var(--ks-font-body);
  font-size: 1rem;
  line-height: 1.5;
  transition:
    border-color var(--ks-dur-micro) var(--ks-ease),
    background-color var(--ks-dur-micro) var(--ks-ease);
}
.field textarea { resize: vertical; min-height: 132px; }

/* Le gris de substitution doit tenir le même seuil que le texte courant. */
.field input::placeholder,
.field textarea::placeholder { color: var(--ks-smoke); opacity: 1; }

.field input:hover,
.field textarea:hover { border-color: var(--ks-concrete); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ks-copper);
  background: rgba(8, 9, 11, .92);
  box-shadow: 0 0 0 3px rgba(255, 107, 44, .16);
}
.field input:focus-visible,
.field textarea:focus-visible { outline: none; }

.field__hint {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ks-smoke);
  margin: 0;
}

.field__err {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ks-error);
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.field__err::before { content: '↳'; flex: none; }

.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--ks-error); }

/* Case à cocher — la cible tactile couvre toute l'étiquette */
.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  margin-top: 28px;
  position: relative;
}
/* 24 px : minimum WCAG 2.5.8 (AA). L'étiquette associée élargit encore la
   cible réelle, mais la case doit tenir le seuil par elle-même. */
.field--check input {
  width: 24px;
  height: 24px;
  flex: none;
  margin-top: 1px;
  accent-color: var(--ks-copper);
  cursor: pointer;
}
.field--check input:focus-visible {
  outline: 2px solid var(--ks-copper);
  outline-offset: 3px;
}
.field--check label {
  font-family: var(--ks-font-body);
  font-size: .9375rem;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ks-mist);
  cursor: pointer;
}
.field--check label a { color: var(--ks-copper); text-decoration: underline; text-underline-offset: 3px; }
.field--check .field__err { position: absolute; top: 100%; left: 36px; margin-top: 6px; }

/* Piège à robots : retiré du flux visuel sans `display:none`, que certains
   robots détectent et contournent. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__captcha { margin-top: 32px; min-height: 1px; }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 28px;
}
.form__foot .ks-btn { padding: 15px 28px; }
.form__legal {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ks-smoke);
  margin: 0;
  flex: 1 1 20ch;
}

.ks-btn[aria-busy="true"] { opacity: .65; pointer-events: none; }

/* Message d'état — invisible tant qu'il est vide, pour ne pas réserver de vide */
.form__status {
  margin: 24px 0 0;
  padding: 0;
  font-size: .9375rem;
  line-height: 1.6;
  border-radius: 12px;
}
.form__status:empty { display: none; }
.form__status[data-state] { padding: 18px 20px; border: 1px solid; }
.form__status[data-state="ok"] {
  border-color: rgba(61, 214, 140, .35);
  background: rgba(61, 214, 140, .08);
  color: var(--ks-lime);
}
.form__status[data-state="err"] {
  border-color: rgba(240, 85, 63, .35);
  background: rgba(240, 85, 63, .08);
  color: var(--ks-lime);
}

.form__alt {
  margin: 28px 0 0;
  font-size: .9375rem;
  color: var(--ks-smoke);
}
.form__alt a { color: var(--ks-copper); text-decoration: underline; text-underline-offset: 3px; }

/* Le bandeau de contact plafonne son texte à 60ch ; le formulaire a besoin
   de la largeur pleine pour tenir deux colonnes. */
#cadrage .band__in { max-width: 52rem; }

/* --------------------------------------------------------------------------
   Marqueurs de contenu provisoire — visibles en développement uniquement
   -------------------------------------------------------------------------- */

body.dev [data-placeholder] {
  outline: 1px dashed rgba(245, 181, 68, .5);
  outline-offset: 4px;
}
body.dev [data-placeholder]::before {
  content: 'PROVISOIRE — ' attr(data-placeholder);
  position: absolute;
  z-index: 30;
  transform: translateY(-24px);
  font-family: var(--ks-font-mono);
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ks-warning);
  background: var(--ks-obsidian);
  padding: 2px 8px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
}