/* =========================================================
   Flankers — Design system (voir DESIGN.md)
   ========================================================= */

:root {
  /* Couleurs de marque (identité — hex source de vérité) */
  --bg: #08002e;
  --surface: #0e0742;
  --surface-2: #160c54;

  --brand: #df36f4;
  --brand-deep: #a915c4;
  --brand-wash: rgba(223, 54, 244, 0.12);

  --signal: #1ef5ba;
  --signal-ink: #0a3d30;

  --ink: #f3f1fb;
  --band: #ffffff;   /* fond des bandes claires : blanc pur */
  --muted: #b9b5db;
  --faint: #8480ad;

  --line: rgba(255, 255, 255, 0.10);
  --line-brand: rgba(223, 54, 244, 0.22);

  /* Type */
  --font-display: "League Spartan", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Rythme */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 14px;
  --radius-lg: 22px;

  /* Z-scale sémantique */
  --z-sticky: 100;
  --z-modal: 400;
  --z-toast: 600;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo-ish */
}

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* L'attribut hidden gagne toujours. Sans ça, la moindre classe qui pose un display
   (une flexbox, une grille) rend visible un bloc marqué hidden : c'est la feuille
   de style de l'agent utilisateur qu'on écrase sans le vouloir. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
strong { color: var(--ink); font-weight: 700; }
em { font-style: normal; color: var(--brand); }

::selection { background: var(--brand); color: #fff; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: var(--z-toast);
  background: var(--brand); color: #fff; padding: 0.6rem 1rem; border-radius: 0 0 10px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

/* ---------- Boutons ---------- */
.btn {
  --pad-y: 0.9rem; --pad-x: 1.4rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  line-height: 1; cursor: pointer; border: 1px solid transparent;
  transition: transform 0.25s var(--ease-out), background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
  will-change: transform;
}
.btn--sm { --pad-y: 0.6rem; --pad-x: 1rem; font-size: 0.94rem; }
.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 8px 30px -10px rgba(223,54,244,0.6); }
.btn--primary:hover { background: var(--brand-deep); transform: translateY(-2px); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.btn--ghost:hover { border-color: var(--brand); background: var(--brand-wash); }
.btn--sm.btn--ghost { flex-direction: row; align-items: center; }
.btn__hint { font-size: 0.72rem; font-weight: 500; color: var(--faint); letter-spacing: 0.01em; }
/* Menthe : « ce qu'on a appris ». Le magenta reste réservé à l'action commerciale. */
.btn--signal {
  background: var(--signal); color: var(--signal-ink); border-color: var(--signal);
  font-weight: 700; box-shadow: 0 8px 30px -12px rgba(30, 245, 186, 0.55);
}
/* Menthe en contour, aligné sur la pastille « Ressources » de la nav. Sert là où
   la menthe ne doit pas peser autant que le magenta : l'aparté Early-GTM, qui ne
   doit jamais concurrencer la clôture commerciale. */
.btn--signal-ghost {
  background: transparent; border-color: var(--signal); color: var(--signal);
  font-weight: 600; box-shadow: none;
}
.btn--signal-ghost:hover {
  background: color-mix(in srgb, var(--signal) 12%, transparent);
  border-color: var(--signal); transform: translateY(-2px);
}
.btn--signal:hover {
  background: color-mix(in srgb, var(--signal) 80%, #ffffff);
  border-color: color-mix(in srgb, var(--signal) 80%, #ffffff);
  transform: translateY(-2px);
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; color: var(--signal);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: gap 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.link-arrow span { transition: transform 0.25s var(--ease-out); }
.link-arrow:hover { border-color: var(--signal); }
.link-arrow:hover span { transform: translateX(4px); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: var(--container); margin: 0 auto; padding: 0.85rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.nav__brand img { height: 30px; width: auto; }

/* Zone droite : 3 natures distinctes — sections · destination · action */
.nav__right { display: flex; align-items: center; gap: 1.4rem; }

/* Zone 1 — sauts dans la page (poids visuel le plus faible) */
.nav__sections { display: flex; gap: 1.5rem; }
.nav__sections a {
  font-size: 0.95rem; font-weight: 500; color: var(--muted);
  position: relative; padding: 0.3rem 0;
  transition: color 0.2s var(--ease-out);
}
.nav__sections a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--brand); transition: width 0.3s var(--ease-out);
}
.nav__sections a:hover { color: var(--ink); }
.nav__sections a:hover::after { width: 100%; }

/* Séparateur : marque le changement de nature */
.nav__sep { width: 1px; height: 24px; background: var(--line); }

/* Zone 2 — destination distincte (pilule, plus lumineuse que les sections) */
/* Même géométrie que .btn--sm : seule la couleur distingue les deux boutons
   du nav (magenta plein pour l'action commerciale, menthe en contour pour
   les ressources). Écrit en dur plutôt qu'hérité de .btn, pour que les pages
   qui n'ont pas encore la nouvelle nav restent correctes. */
.nav__dest {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--signal); background: transparent; color: var(--signal);
  font-size: 0.94rem; font-weight: 600; line-height: 1;
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.nav__dest-ico { color: var(--signal); flex: none; }
.nav__dest:hover { background: color-mix(in srgb, var(--signal) 12%, transparent); }
.nav__dest[aria-current="page"] { background: color-mix(in srgb, var(--signal) 16%, transparent); }

/* Hamburger + panneau mobile (masqués en desktop) */
.nav__toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px;
  background: transparent; cursor: pointer; padding: 0; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.nav__toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.28s var(--ease-out), opacity 0.2s var(--ease-out); }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile { display: none; }

/* ---------- Hero ---------- */
.hero {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 7rem) var(--gutter) clamp(1rem, 2vw, 1.5rem);
  position: relative; text-align: center;
}
.hero::before { /* voile magenta drenché en haut, centré, net (pas de blob flou) */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 160% at 50% -5%, color-mix(in srgb, var(--brand) 27%, transparent), transparent 60%);
  pointer-events: none; z-index: -1;
}
/* Logo en fond du hero : halo retenu (moitié opacité, halo doux), le texte reste
   toujours lisible au-dessus. Étend le voile --brand-wash déjà présent (.hero::before),
   pas un nouvel effet. */
.hero__logo {
  position: absolute; top: 15%; left: 50%; transform: translateX(-50%);
  width: clamp(200px, 34vw, 410px); z-index: 0; opacity: 0.52; pointer-events: none;
}
/* Pas de lueur autour du mark : le voile du hero porte déjà tout le halo. */
.hero__logo img { width: 100%; height: auto; }
/* Le contenu texte reste au-dessus du logo en fond (voir .hero__logo, z-index: 0) */
.hero__kicker, .hero__title, .hero__lede, .hero__chute, .hero__cta {
  position: relative; z-index: 1;
}
.hero__kicker {
  font-size: 0.92rem; font-weight: 600; letter-spacing: 0;
  color: var(--signal); margin-bottom: 1.4rem;
}
.hero__title {
  font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5rem);
  font-weight: 900; letter-spacing: -0.03em;
}
/* Éclairci par rapport à --muted : le voile magenta du hero est dense (27 %) et
   sa teinte se rapproche de celle du gris lavande, ce qui abaisse la lisibilité
   perçue même si le contraste calculé reste largement au-dessus de AA. */
.hero__lede {
  margin: 1.6rem auto 0; max-width: 50ch;
  color: color-mix(in srgb, var(--ink) 55%, var(--muted));
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
  line-height: 1.7;
}
.hero__chute {
  margin: clamp(1.1rem, 2.4vw, 1.6rem) auto 0; max-width: 46ch;
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: clamp(1.15rem, 1rem + 0.75vw, 1.55rem); line-height: 1.3; letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero__cta { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; justify-content: center; }

/* ---------- Verdict / bascule ---------- */
.verdict {
  max-width: var(--container); margin: clamp(3rem, 9vw, 7rem) auto; padding: 0 var(--gutter);
  text-align: center;
}
.verdict__eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--faint); margin-bottom: 1.4rem;
}
.verdict__eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 18%, transparent); }
.verdict__title {
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.4rem); font-weight: 800; letter-spacing: -0.025em;
}
.verdict__body {
  margin: 1.6rem auto 0; color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.18rem);
  line-height: 1.75; max-width: 58ch;
}
.verdict .link-arrow { margin-top: 1.8rem; }

/* ---------- En-tête de section (réutilisable) ---------- */
.section-head { max-width: 820px; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head__title { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem); font-weight: 800; letter-spacing: -0.025em; }
.section-head__lede { margin-top: 1.2rem; color: var(--muted); font-size: clamp(1.02rem, 1rem + 0.2vw, 1.15rem); line-height: 1.7; max-width: 60ch; }

/* ---------- Où ça bloque : quatre temps posés côte à côte ----------
   Aucun connecteur entre les maillons : c'est l'absence de lien qui fait
   l'argument. Le triptyque de .methode montre la figure inverse, reliée. */
.panne-sec {
  max-width: var(--container);
  margin: clamp(1.5rem, 4vw, 3rem) auto clamp(3rem, 9vw, 7rem);
  padding: clamp(0.75rem, 1.5vw, 1.25rem) var(--gutter) 0;
}
.pipe {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.85rem, 1.9vw, 1.4rem); align-items: stretch;
}
.etape {
  padding: clamp(1.25rem, 2.8vw, 1.8rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column;
}
/* L'accent commun aux deux sections : un filet magenta qui s'estompe, en haut
   de chaque bloc. Il relie visuellement le constat (« Où ça bloque ») et la
   réponse (le triptyque), qui n'avaient aucun signe partagé. */
.etape, .tri-step { position: relative; overflow: hidden; }
.etape::before, .tri-step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 15%, transparent));
}
.etape { transition: border-color 0.25s var(--ease-out); }
.etape:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.etape__claim {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: clamp(1.08rem, 0.98rem + 0.5vw, 1.32rem); line-height: 1.22; letter-spacing: -0.02em;
  text-wrap: balance;
}
.etape__text { margin-top: 0.7rem; color: var(--muted); line-height: 1.55; font-size: 0.97rem; }

/* Ce qui sort de la chaîne */
.sortie {
  margin-top: clamp(2rem, 4.5vw, 3rem);
  padding: clamp(1.5rem, 3.4vw, 2.3rem);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--brand) 38%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 11%, var(--surface)), var(--surface));
}
.sortie__claim {
  font-family: var(--font-display); font-weight: 800; color: var(--ink);
  font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.1rem); line-height: 1.2; letter-spacing: -0.025em;
}
.sortie__text { margin-top: 0.8rem; color: var(--muted); line-height: 1.65; max-width: 64ch; }
.sortie__again {
  margin-top: 1.3rem; padding-top: 1.1rem;
  border-top: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  display: flex; align-items: center; gap: 0.6rem;
  color: var(--brand); font-weight: 600; font-size: 0.95rem;
}
.sortie__again i { font-style: normal; font-size: 1.15rem; }
.panne-sec__next { margin-top: clamp(1.8rem, 4vw, 2.6rem); }

/* ---------- À qui on parle (bande claire, position 2) ----------
   Reprend la géométrie de l'ancienne bande « conviction », mais son rôle a
   changé : elle ne défend plus une position, elle permet au visiteur de se
   reconnaître avant d'entrer dans le constat. */
.qualif {
  position: relative;
  padding-top: clamp(0.75rem, 1.5vw, 1.25rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  margin-block: clamp(1.5rem, 4vw, 3rem);
}
.qualif::before {
  content: ""; position: absolute; inset: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; background: var(--band); z-index: -1;
}
.qualif__inner { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); text-align: center; }
.qualif__label {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.92rem; font-weight: 600;
  color: color-mix(in srgb, var(--bg) 55%, transparent); margin-bottom: 0.9rem;
}
.qualif__label .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-wash); }
.qualif__quote {
  margin: 0 auto; max-width: 46ch; font-family: var(--font-display); font-weight: 700; color: var(--bg);
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2.05rem); line-height: 1.28; letter-spacing: -0.02em;
  text-wrap: balance;
}
.qualif__quote em { color: var(--brand-deep); font-style: normal; }
/* ---------- La méthode (bande pleine largeur, élevée) ---------- */
.methode {
  max-width: var(--container); margin-inline: auto; margin-block: clamp(3rem, 9vw, 7rem) clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2.75rem, 6vw, 5rem) clamp(0.75rem, 1.5vw, 1.25rem); padding-inline: var(--gutter); position: relative;
}
.methode::before {
  content: ""; position: absolute; inset: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; z-index: -1;
  background: linear-gradient(180deg, var(--surface-2), var(--surface) 62%, var(--bg));
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* Triptyque : une chaîne de dépendance cible -> valeur -> canal */
.triptyque { display: flex; flex-direction: column; }
.tri-chain {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch; gap: 0;
}
.tri-step {
  padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column;
}
.tri-step__term { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.9vw, 1.55rem); font-weight: 700; letter-spacing: -0.01em; }
.tri-step__desc { margin-top: 0.9rem; color: var(--muted); line-height: 1.6; }

/* Connecteur relationnel entre deux maillons */
.tri-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 0 clamp(0.4rem, 1.4vw, 0.9rem);
}
.tri-link span {
  font-size: 0.78rem; color: var(--faint); white-space: nowrap;
}
.tri-link::after { content: "→"; color: var(--brand); font-size: 1.05rem; line-height: 1; }

/* La motion se branche sous la chaîne (connecteur menthe vertical) */
/* La motion porte le même filet que les maillons, mais en menthe : elle n'est
   pas une composante de plus, c'est ce qui les traverse. HTOI, juste en
   dessous, n'en porte aucun : c'est la boucle, pas un bloc du système. */
.tri-motion::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--signal), color-mix(in srgb, var(--signal) 15%, transparent));
}
.tri-motion {
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem); position: relative; overflow: hidden;
  padding: clamp(1.5rem, 3.5vw, 2.2rem); border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--signal) 30%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--signal) 8%, var(--surface)), var(--surface));
}
.tri-motion__head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.7rem; flex-wrap: wrap; }
.tri-motion__title { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.9vw, 1.55rem); font-weight: 700; letter-spacing: -0.01em; color: var(--signal); }
.tri-motion__badge {
  font-size: 0.8rem; font-weight: 600;
  color: var(--signal); border: 1px solid color-mix(in srgb, var(--signal) 36%, transparent);
  padding: 0.2rem 0.55rem; border-radius: 999px;
}
.tri-motion__text { color: var(--muted); line-height: 1.65; max-width: 74ch; }

/* HTOI : la boucle */
/* Séparation entre le système (les maillons + la motion) et la façon de le
   travailler. Le connecteur porte un libellé, comme .tri-link plus haut : il
   dit la relation au lieu de se contenter de couper. */
.methode-sep {
  height: clamp(2.9rem, 6.5vw, 4.6rem);
  display: flex; align-items: center; gap: 1.1rem;
}
.methode-sep::before, .methode-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.methode-sep span { font-size: 0.86rem; color: var(--faint); white-space: nowrap; }

.htoi {
  margin-top: 0; padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 1px solid color-mix(in srgb, var(--signal) 22%, transparent); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--signal) 5%, var(--surface)), var(--surface));
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center;
}
.htoi__title { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); font-weight: 800; letter-spacing: -0.02em; }
.htoi__text { margin-top: 1rem; color: var(--muted); line-height: 1.7; }
.htoi__text strong { color: var(--signal); }
.htoi__loop { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.htoi__node {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg);
  font-weight: 600; font-size: 0.95rem; color: var(--ink);
  position: relative;
}
.htoi__node:not(:last-of-type)::after { content: "→"; position: absolute; right: -0.75rem; color: var(--faint); font-size: 0.8rem; }
.htoi__letter {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.85rem;
  background: color-mix(in srgb, var(--signal) 14%, transparent); color: var(--signal);
}
.htoi__return { color: var(--signal); font-size: 1.3rem; margin-left: 0.4rem; }
/* pulse mint qui parcourt la boucle */
.htoi__node { animation: htoi-pulse 4.4s var(--ease-out) infinite; }
.htoi__node:nth-of-type(1) { animation-delay: 0s; }
.htoi__node:nth-of-type(2) { animation-delay: 1.1s; }
.htoi__node:nth-of-type(3) { animation-delay: 2.2s; }
.htoi__node:nth-of-type(4) { animation-delay: 3.3s; }
@keyframes htoi-pulse {
  0%, 18%, 100% { border-color: var(--line); }
  6% { border-color: color-mix(in srgb, var(--signal) 65%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 12%, transparent); }
}

/* La chaîne empile plus tôt : 3 colonnes + 2 connecteurs se tassent avant 820px */
@media (max-width: 900px) {
  .tri-chain { grid-template-columns: 1fr; }
  .tri-link { flex-direction: row; gap: 0.55rem; padding: 0.5rem 0; }
  .tri-link::after { content: "↓"; }
}
@media (max-width: 820px) {
  .res-lead { grid-template-columns: 1fr; }
  .htoi { grid-template-columns: 1fr; }
}

/* ---------- Page Ressources ---------- */
.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; }

.res-hero {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(1.5rem, 4vw, 2.5rem);
}
.res-hero__kicker {
  font-size: 0.92rem; font-weight: 600; color: var(--signal); margin-bottom: 1.2rem;
}
.res-hero__title { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); font-weight: 900; letter-spacing: -0.03em; }
.res-hero__lede { margin-top: 1.4rem; max-width: 54ch; color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.7; }

.res-hub {
  max-width: var(--container); margin: 0 auto clamp(3rem, 8vw, 6rem);
  padding: 0 var(--gutter); display: flex; flex-direction: column; gap: 1.4rem;
}

/* Ressource phare */
.res-lead {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border: 1px solid var(--line-brand); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--brand-wash), transparent 60%), var(--surface);
}
.res-lead__title { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; }
.res-lead__text { margin-top: 1rem; color: var(--muted); line-height: 1.7; max-width: 52ch; }
.res-lead__cta { margin-top: 1.8rem; display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }
.res-lead__note { font-family: var(--font-mono); font-size: 0.78rem; color: var(--faint); letter-spacing: 0.01em; }

/* Ressources secondaires — deux traitements distincts */
.res-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; }
.res-item {
  padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; gap: 0.7rem;
}
.res-item--news { background: var(--surface-2); border-color: color-mix(in srgb, var(--signal) 22%, transparent); }
.res-item__title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; }
.res-item__text { color: var(--muted); line-height: 1.65; }

/* Les deux visages dans la carte « qui écrit » : ils se chevauchent assez pour
   dire le binôme, pas assez pour que l'un masque l'autre. */
.duo__stack { display: flex; margin-bottom: 0.4rem; }
.duo__stack img {
  width: clamp(76px, 8vw, 96px); height: clamp(76px, 8vw, 96px);
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--brand); background: var(--bg);
}
.duo__stack img:last-child { margin-left: -12px; }
.res-item__meta { margin-top: auto; font-size: 0.9rem; color: var(--signal); font-weight: 600; }
.res-item__meta--faint { color: var(--faint); font-weight: 500; }

/* Encadrement d'un embed externe (Substack) aux couleurs du site */
.res-embed { margin-top: auto; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.res-embed iframe { display: block; width: 100%; }

/* ---------- L'offre (bande claire) ---------- */
.offre {
  max-width: var(--container); margin: clamp(1.5rem, 4vw, 3rem) auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem); position: relative;
}
.offre::before {
  content: ""; position: absolute; inset: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; z-index: -1;
  background: var(--band);
}
.offre .section-head__title { color: var(--bg); }
.offre .section-head__lede { color: color-mix(in srgb, var(--bg) 72%, transparent); }
.offre-audit {
  padding: clamp(1.6rem, 4vw, 2.8rem); border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  background: linear-gradient(160deg, var(--brand-wash), transparent 55%), #fff;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--bg) 10%, transparent), 0 10px 28px color-mix(in srgb, var(--bg) 8%, transparent);
}
.offre-audit__tag {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.9rem; font-weight: 600; color: color-mix(in srgb, var(--bg) 60%, transparent);
}
.offre-audit__tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-wash); }
.offre-audit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 1.4rem; }
.offre-audit__title { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; color: var(--bg); }
.offre-audit__text { margin-top: 1rem; color: color-mix(in srgb, var(--bg) 68%, transparent); line-height: 1.7; }
.offre-audit__deliv-label { font-size: 0.9rem; font-weight: 600; color: color-mix(in srgb, var(--bg) 50%, transparent); margin-bottom: 0.9rem; }
.offre-audit__deliv ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.offre-audit__deliv li { position: relative; padding-left: 1.6rem; color: color-mix(in srgb, var(--bg) 68%, transparent); line-height: 1.6; }
.offre-audit__deliv li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--brand-deep); font-weight: 700; }
.offre-audit__deliv strong { color: var(--bg); }

/* Fourche : le point de départ unique se distribue vers les deux formules */
.offre-branch { position: relative; height: clamp(2.8rem, 5vw, 4rem); margin-top: clamp(0.8rem, 2vw, 1.4rem); }
/* tige depuis l'audit vers le centre de la fourche */
.offre-branch::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 50%; background: var(--line-brand);
}
/* bracket : barre horizontale + deux descentes alignées sur les colonnes (25% / 75%) */
.offre-branch::before {
  content: ""; position: absolute; left: 25%; right: 25%; top: 50%; bottom: 0;
  border: 2px solid var(--line-brand); border-bottom: 0;
  border-top-left-radius: 10px; border-top-right-radius: 10px;
}
.offre-branch__label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 0.88rem; color: color-mix(in srgb, var(--bg) 60%, transparent);
  background: var(--band); padding: 0.25rem 0.85rem; white-space: nowrap;
}

.offre-formulas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.formula {
  padding: clamp(1.6rem, 3.5vw, 2.4rem); border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--bg) 12%, transparent); background: #fff;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--bg) 10%, transparent), 0 10px 28px color-mix(in srgb, var(--bg) 8%, transparent);
}
.formula--alt { background: color-mix(in srgb, var(--brand) 5%, white); }
/* Emplacement de l'ancienne étiquette « Option A » : une durée, pas un label vide. */
.formula__tag { font-size: 0.95rem; font-weight: 600; color: var(--brand-deep); }
.formula__title { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem); font-weight: 800; letter-spacing: -0.02em; margin-top: 0.7rem; color: var(--bg); }
.formula__for { margin-top: 0.9rem; color: var(--bg); font-weight: 600; line-height: 1.5; }
.formula__role { margin-top: 0.8rem; color: color-mix(in srgb, var(--bg) 68%, transparent); line-height: 1.65; }
.formula__role strong, .formula__for strong { color: var(--bg); }
/* Un CTA en flux à la fin de chaque grande section : le nav sticky ne suffit
   pas, le bouton doit rester atteignable là où l'envie se déclenche. */
.section-cta { margin-top: clamp(2rem, 4.5vw, 3rem); display: flex; justify-content: center; }

/* ---------- Pour qui + références ---------- */
.pourqui {
  max-width: var(--container); margin: clamp(1rem, 3vw, 2rem) auto clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 2rem) var(--gutter) 0;
}
/* Qualification en deux mondes : ce pour quoi on est fait, et ce pour quoi on
   ne l'est pas. Les deux panneaux sont volontairement inégaux (le « oui » est
   élevé et magenta, le « non » est en retrait), pour que ce ne soit pas une
   grille de deux cartes jumelles. */
.qui { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(1rem, 2.4vw, 1.8rem); align-items: start; }
.qui__yes {
  padding: clamp(1.5rem, 3.2vw, 2.3rem);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 13%, var(--surface-2)), var(--surface));
  box-shadow: 0 24px 60px -40px rgba(223, 54, 244, 0.85);
}
.qui__no {
  padding: clamp(1.5rem, 3.2vw, 2.3rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.qui__title {
  font-family: var(--font-display); font-weight: 800; color: var(--ink);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); letter-spacing: -0.02em;
  margin-bottom: clamp(1rem, 2.2vw, 1.4rem);
}
.qui__title--no { color: var(--faint); }
/* Des affirmations, pas des lignes de paragraphe : display, court, aéré. */
.qui__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0.9rem, 2vw, 1.25rem); }
.qui__list li {
  position: relative; padding-left: 1.7rem;
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.18rem); line-height: 1.34; letter-spacing: -0.01em;
}
.qui__list li::before {
  content: ""; position: absolute; left: 0; top: 0.46em;
  width: 8px; height: 8px; border-radius: 3px; background: var(--brand);
}
.qui__list strong { color: var(--ink); font-weight: 700; }
.qui__list--no li { color: var(--muted); }
.qui__list--no li::before {
  width: 10px; height: 2px; border-radius: 2px; top: 0.7em;
  background: var(--faint);
}

/* ---------- Aparté Early-GTM : le seul endroit de la home qui lui parle ----------
   Après le CTA, donc il ne doit rien lui disputer : menthe et contour, jamais
   le magenta ni le bouton plein de la prise de rendez-vous. */
.aparte-sec { max-width: var(--container); margin: 0 auto clamp(3rem, 8vw, 6rem); padding-inline: var(--gutter); }
.aparte {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.7rem, 3.8vw, 2.6rem);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--signal) 26%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--signal) 7%, var(--surface-2)), var(--surface));
}
.aparte__title {
  font-family: var(--font-display); font-weight: 800; color: var(--ink);
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); letter-spacing: -0.025em; text-wrap: balance;
}
.aparte__text { margin-top: 0.75rem; color: var(--muted); line-height: 1.65; max-width: 62ch; }

/* ---------- Références (bande claire, sourde) ---------- */
/* Bloc distinct, pas un encart de « Pour qui ». Bande claire comme .offre,
   volontairement plus basse en intensité (moins d'accent) : c'est de la preuve, pas un
   temps fort. */
.refs {
  position: relative; margin-block: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}
.refs::before {
  content: ""; position: absolute; inset: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; z-index: -1;
  background: var(--band);
}
/* Bande claire : seule famille de sections du site sur --ink plutôt que --bg (avec
   .offre). Texte et libellés recalculés pour rester lisibles sur fond
   clair, --brand-deep déjà prévu pour ce cas ("texte magenta sur clair"). */
.refs .section-head__title { color: var(--bg); }
.refs .section-head__lede { color: color-mix(in srgb, var(--bg) 72%, transparent); }
.refs__inner {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
}
.refs__group + .refs__group { margin-top: clamp(2rem, 4.5vw, 3.2rem); }
/* Même pas de l'échelle que .tri-step__term : les deux murs sont des sous-blocs,
   pas des sections. Le titre de section, lui, est un .section-head standard. */
.refs__label { color: var(--brand-deep); font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.9vw, 1.55rem); font-weight: 700; letter-spacing: -0.01em; }

/* Les deux murs partagent exactement la même géométrie : le padding est porté par
   les deux, seul le fond change, pour que les 12 tuiles restent alignées et de
   taille identique. */
.refs__wall {
  --plinth-pad: clamp(0.8rem, 1.9vw, 1.25rem);
  list-style: none; margin: 1rem 0 0; padding: var(--plinth-pad);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.4vw, 0.95rem);
  max-width: calc(780px + 2 * var(--plinth-pad));
}

.refs__tile {
  aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #fff;
  border: 1px solid color-mix(in srgb, var(--bg) 12%, transparent);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--bg) 10%, transparent), 0 6px 16px color-mix(in srgb, var(--bg) 8%, transparent);
  transition: opacity 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
/* Avatars carrés : le logo remplit la tuile, qui prend donc sa couleur de marque. */
.refs__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Logos larges à fond transparent : tuile blanche, logo contenu et respiré. */
.refs__tile--pad { padding: 9%; }
.refs__tile--pad img { object-fit: contain; }
/* Logo dont une partie du lettrage est blanche : il lui faut une tuile sombre. */
.refs__tile--dark { background: var(--surface-2); }

/* Les tuiles étant toutes de même taille, c'est le socle qui porte la distinction.
   Menthe murmurée : le système lui donne le sens « ça marche, la preuve ». Elle doit
   rester en dessous du seuil où elle se battrait avec les logos. */
.refs__group--clients .refs__wall {
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--signal) 12%, white);
  border: 1px solid color-mix(in srgb, var(--signal-ink) 22%, transparent);
}
.refs__tile:hover { border-color: color-mix(in srgb, var(--bg) 28%, transparent); }

/* ---------- CTA final + formulaire de qualification (clôture drenchée) ---------- */
.cta { max-width: var(--container); margin: clamp(1.5rem, 4vw, 3rem) auto clamp(3rem, 7vw, 5rem); padding: 0 var(--gutter); }
/* Cloture, pas conteneur : le formulaire vit sur rendez-vous.html.
   Deux fonctions, deux zones : le discours a gauche, la porte a droite.
   Le centrage integral avait ete essaye et rejete, il aplatissait la hierarchie. */
.cta__panel {
  display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center;
  gap: clamp(1.8rem, 4.5vw, 3.4rem);
  padding: clamp(2rem, 4.5vw, 3rem) clamp(1.6rem, 4vw, 2.8rem); border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--brand) 42%, transparent);
  background:
    radial-gradient(80% 140% at 20% 0%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 64%),
    linear-gradient(150deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), var(--surface));
  box-shadow: 0 30px 80px -40px rgba(223, 54, 244, 0.5);
}
.cta__title { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.8rem); font-weight: 800; letter-spacing: -0.025em; }
.cta__lede { margin-top: 1.1rem; color: var(--muted); line-height: 1.7; max-width: 42ch; }

/* L'encart d'action : les garanties juste au-dessus du bouton, la ou on hesite. */
.cta__door {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.1rem, 2.4vw, 1.5rem); background: color-mix(in srgb, var(--bg) 45%, transparent);
}
.cta__reassure { list-style: none; padding: 0; margin: 0 0 1.2rem; display: flex; flex-direction: column; gap: 0.8rem; }
.cta__reassure li { position: relative; padding-left: 1.7rem; color: var(--ink); line-height: 1.5; font-size: 0.95rem; }
.cta__reassure li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--signal); font-weight: 700; }
.cta__go { width: 100%; justify-content: center; }

/* ---------- Formulaire de qualification ---------- */
.qual__slot { min-width: 0; }
/* Trois temps : qui vous etes, ou ca coince, ce que vous en dites. Serre a
   l'interieur d'un groupe, large entre les groupes : l'espacement dit ou une
   idee s'arrete. Le jeu restant va dans le champ libre, pas dans du vide. */
.qual { display: flex; flex-direction: column; gap: clamp(1.1rem, 2.4vw, 1.6rem); }
.qual__grp { display: flex; flex-direction: column; gap: 0.7rem; }
.qual__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.qual__row--3 { grid-template-columns: 1fr 1fr 1fr; }

.field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.field__opt { font-weight: 400; color: var(--faint); }
/* Marque d'obligation. Purement visuelle : c'est l'attribut required qui
   porte l'information pour les lecteurs d'ecran, d'ou aria-hidden. */
.field__req { color: var(--brand); font-weight: 700; }
.field__hint { font-size: 0.78rem; color: var(--faint); line-height: 1.45; margin: 0; }
.field__error { font-size: 0.78rem; color: var(--brand); font-weight: 600; line-height: 1.45; margin: 0; }

.field input, .field select, .field textarea {
  padding: 0.62rem 0.85rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 0.98rem; width: 100%;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 88px; }
/* DESIGN.md : placeholder en --muted, jamais plus pale. */
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: right 1rem center, right 0.75rem center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.2rem; }

/* Focus : anneau magenta net. L'ancienne regle se contentait d'une bordure 1px,
   sous le seuil WCAG AA sur fond indigo (PRODUCT.md, accessibilite). */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 1px;
}
/* Erreur : bordure magenta, jamais la couleur seule comme porteuse d'information. */
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand);
}

/* Cases a cocher, en tuiles cliquables de taille egale : la delimitation fait
   le choix. La tuile entiere est la cible, le petit carre reste present pour
   dire qu'on peut en cocher plusieurs, ce qu'un simple bouton ne dirait pas. */
.checks { border: 0; padding: 0; margin: 0.1rem 0 0; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.checks__legend { font-size: 0.85rem; font-weight: 600; color: var(--muted); padding: 0; margin-bottom: 0.5rem; }
.checks__legend .field__opt { font-size: 0.8rem; }

.check {
  display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer;
  padding: 0.7rem 0.75rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 45%, transparent);
  transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out);
}
.check:hover { border-color: color-mix(in srgb, var(--brand) 55%, transparent); }

/* Selectionnee : contour et fond magenta, jamais un aplat plein. Le bouton
   d'envoi est le seul aplat magenta du formulaire, il doit le rester. */
.check:has(input:checked) { border-color: var(--brand); background: var(--brand-wash); }
.check:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

.check input {
  flex: 0 0 auto; appearance: none; width: 18px; height: 18px; margin: 0.1rem 0 0;
  border: 1px solid var(--faint); border-radius: 5px; background: var(--bg); cursor: pointer;
  transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
.check input:checked { background: var(--brand); border-color: var(--brand); }
/* Repli si :has() manque : l'anneau se pose sur le carre, et la case cochee
   reste magenta avec sa coche. L'etat est toujours lisible, seule la tuile
   ne reagit pas. */
.check input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* La coche est dessinee, pas ecrite : pas de glyphe dependant de la police. */
.check input:checked::after { content: ""; display: block; width: 4px; height: 9px; margin: 1px auto 0; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check span { color: var(--ink); font-size: 0.92rem; line-height: 1.4; }
.checks[aria-invalid="true"] .checks__legend { color: var(--brand); }

/* Leurre anti-spam : hors flux, hors lecteurs d'ecran, hors tabulation. */
.qual__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.qual__submit { margin-top: 0.4rem; width: 100%; justify-content: center; }
.qual__submit[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.qual__note { font-size: 0.82rem; color: var(--faint); line-height: 1.5; text-align: center; margin: 0; }
.qual__note a { color: var(--muted); border-bottom: 1px solid var(--line); }
.qual__note a:hover { color: var(--ink); border-color: var(--muted); }
.qual__aside { font-size: 0.78rem; color: var(--faint); line-height: 1.5; text-align: center; margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.qual__aside a { color: var(--muted); border-bottom: 1px solid var(--line); }
.qual__aside a:hover { color: var(--ink); border-color: var(--muted); }

/* Erreur globale (reseau) : la saisie est conservee, jamais un cul-de-sac. */
.qual__alert { margin: 0; padding: 0.8rem 0.95rem; border-radius: var(--radius); border: 1px solid var(--brand); background: var(--brand-wash); color: var(--ink); font-size: 0.9rem; line-height: 1.5; }
.qual__alert a { color: var(--signal); border-bottom: 1px solid transparent; }
.qual__alert a:hover { border-color: var(--signal); }

/* ---------- Ecran de confirmation + calendrier ---------- */
/* Le calendrier HubSpot est un iframe clair qu'on ne style pas. Plutot que de subir
   le contraste, on l'assume : cadre clair, comme la bande « a qui on parle ». */
.done { display: flex; flex-direction: column; gap: 0.9rem; }
.done:focus { outline: none; }
.done__eyebrow { display: flex; align-items: center; gap: 0.55rem; margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--signal); }
.done__eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 18%, transparent); }
.done__title { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.done__text { color: var(--muted); line-height: 1.65; margin: 0; }
/* La prise de rendez-vous immédiate est la voie de l'impatient, pas la promesse
   principale : elle est mise à part, sous un filet, et ne concurrence pas les 48 h. */
.done__now {
  margin-top: 0.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem;
}
.done__now-lead { margin: 0; color: var(--ink); font-weight: 600; }
.done__fallback { font-size: 0.82rem; color: var(--faint); line-height: 1.5; margin: 0; }
.done__fallback a { color: var(--signal); border-bottom: 1px solid transparent; }
.done__fallback a:hover { border-color: var(--signal); }

@media (prefers-reduced-motion: no-preference) {
  .done { animation: done-in 0.45s var(--ease-out) both; }
}
@keyframes done-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Page rendez-vous ---------- */
.rdv { max-width: var(--container); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) clamp(3rem, 8vw, 6rem); }
/* La colonne de gauche donne la hauteur, la droite s'y adapte : le formulaire
   s'etire et respire au lieu de laisser un vide sous lui. */
.rdv__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: stretch; }

/* La colonne de gauche est courte, le formulaire est long : sans sticky elle
   laisserait un grand vide au scroll. */
.rdv__copy { position: sticky; top: clamp(5.5rem, 10vh, 7rem); align-self: start; min-width: 0; }
.rdv__grid > .qual__slot { align-self: stretch; }
.rdv__kicker { font-size: 0.92rem; font-weight: 600; color: var(--signal); margin-bottom: 1.1rem; }
.rdv__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); font-weight: 900; letter-spacing: -0.03em; max-width: 15ch; }
.rdv__lede { margin-top: 1.2rem; max-width: 46ch; color: var(--muted); font-size: clamp(1rem, 0.97rem + 0.25vw, 1.12rem); line-height: 1.7; }

/* Sequence reelle (remplir, poser, parler) : l'ordre porte de l'information.
   Filet vertical et terme en magenta, la langue des connecteurs du site,
   plutot que des numeros decoratifs interdits par DESIGN.md. */
.rdv__steps { list-style: none; margin: 2.2rem 0 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--line-brand); display: flex; flex-direction: column; gap: 1.5rem; max-width: 46ch; }
.rdv__steps li { position: relative; display: flex; flex-direction: column; gap: 0.3rem; }
.rdv__steps li::before { content: ""; position: absolute; left: calc(-1.4rem - 6px); top: 0.45em; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--bg); }
.rdv__step-term { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.rdv__step-text { color: var(--muted); font-size: 0.94rem; line-height: 1.6; }

/* La porte des prescripteurs : un aparte en retrait, sous la colonne, jamais
   dans le formulaire. Ce n'est pas le meme visiteur. */
.rdv__aside {
  margin-top: 2.4rem; padding: 1rem 1.1rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 60%, transparent);
  max-width: 46ch;
}
.rdv__aside-term { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--ink); line-height: 1.45; }
.rdv__aside-text { margin: 0.4rem 0 0; font-size: 0.86rem; color: var(--faint); line-height: 1.55; }
.rdv__aside-text a { color: var(--muted); border-bottom: 1px solid var(--line); transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out); }
.rdv__aside-text a:hover { color: var(--ink); border-color: var(--muted); }

/* Le formulaire est pose sur un panneau, pour ne pas flotter sur le fond nu. */
.rdv .qual__slot {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 9%, var(--surface)), var(--surface));
  box-shadow: 0 30px 80px -50px rgba(223, 54, 244, 0.5);
}

/* Deux colonnes de cases : la page dediee en a la largeur, la home ne l'avait pas. */
.checks__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 0.5rem; }

@media (max-width: 900px) {
  .rdv__grid { grid-template-columns: 1fr; align-items: start; }
  .rdv__copy { position: static; }
  .rdv .qual__slot { justify-content: flex-start; }
  .rdv__title { max-width: none; }
}
@media (max-width: 700px) {
  .checks__grid { grid-template-columns: 1fr; }
}

/* ---------- Mentions légales ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: clamp(2.5rem, 7vw, 5rem) var(--gutter) clamp(3rem, 8vw, 6rem); }
.legal__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); font-weight: 900; letter-spacing: -0.03em; }
.legal__intro { margin-top: 1rem; color: var(--faint); }
.legal__section { margin-top: 2.4rem; }
.legal__section h2 { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.9vw, 1.5rem); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.8rem; }
.legal__section p { color: var(--muted); line-height: 1.75; }
.legal__section p + p { margin-top: 1rem; }
.legal__section strong { color: var(--ink); }
.legal a { color: var(--signal); border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease-out); }
.legal a:hover { border-color: var(--signal); }
.legal__todo { font-family: var(--font-mono); font-size: 0.86em; color: var(--brand); background: var(--brand-wash); padding: 0.05em 0.4em; border-radius: 5px; }
.legal__back { margin-top: 3rem; }
.legal__back .link-arrow span { transition: transform 0.25s var(--ease-out); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); margin-top: clamp(3rem, 8vw, 6rem); }
.footer__top {
  max-width: var(--container); margin: 0 auto; padding: clamp(2.4rem, 5vw, 3.5rem) var(--gutter) 2rem;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 4rem);
}
.footer__brand img { height: 30px; width: auto; }
.footer__brand p { margin-top: 1.1rem; color: var(--faint); font-size: 0.95rem; line-height: 1.6; max-width: 42ch; }
.footer__contact { font-size: 0.88rem; }
.footer__contact a { color: var(--muted); border-bottom: 1px solid var(--line); transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out); }
.footer__contact a:hover { color: var(--ink); border-color: var(--muted); }
.footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer__col { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__col-title { font-size: 0.88rem; font-weight: 600; color: var(--faint); margin-bottom: 0.3rem; }
.footer__col a { color: var(--muted); font-size: 0.95rem; transition: color 0.2s var(--ease-out); width: fit-content; }
.footer__col a:hover { color: var(--ink); }
.footer__bottom {
  border-top: 1px solid var(--line);
  max-width: var(--container); margin: 0 auto; padding: 1.4rem var(--gutter);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--faint); font-size: 0.85rem;
}
.footer__bottom a { color: var(--faint); transition: color 0.2s var(--ease-out); }
.footer__bottom a:hover { color: var(--muted); }

@media (max-width: 820px) {
  .offre-audit__grid { grid-template-columns: 1fr; }
  .offre-formulas { grid-template-columns: 1fr; }
  /* fourche : les formules empilées -> une simple tige verticale centrée */
  .offre-branch { height: clamp(1.8rem, 5vw, 2.4rem); }
  .offre-branch::before { left: 50%; right: auto; transform: translateX(-50%); border: 0; border-left: 2px solid var(--line-brand); border-radius: 0; }
  .qui { grid-template-columns: 1fr; }
  .refs__wall { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: calc(400px + 2 * var(--plinth-pad)); }
  .cta__panel { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .qual__row, .qual__row--3 { grid-template-columns: 1fr; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__system { order: -1; }

  /* La nav desktop laisse place au hamburger */
  .nav__sections, .nav__sep, .nav__dest, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }

  .nav__mobile:not([hidden]) {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0 var(--gutter) 1rem;
    border-top: 1px solid var(--line);
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height 0.3s var(--ease-out), opacity 0.25s var(--ease-out), padding 0.3s var(--ease-out);
  }
  .nav__mobile.is-open { max-height: 420px; opacity: 1; padding-top: 0.8rem; }
  .nav__mobile a:not(.btn) {
    padding: 0.85rem 0.4rem; color: var(--ink); font-size: 1.05rem; font-weight: 500;
    border-bottom: 1px solid var(--line);
  }
  .nav__mobile a[aria-current="page"] { color: var(--signal); }
  .nav__mobile-cta { margin-top: 0.9rem; justify-content: center; }
}

/* ---------- Bouton « retour en haut » ---------- */
.to-top {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-sticky);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff; border: none; cursor: pointer;
  box-shadow: 0 10px 26px -8px rgba(223, 54, 244, 0.7);
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), background 0.25s var(--ease-out);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--brand-deep); }

/* ---------- Révélation au scroll (gated .js : sans JS tout reste visible) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal][data-reveal-2] { transition-delay: 0.09s; }
}

/* ---------- Reduced motion ---------- */
/* Nouveaux blocs V3 */
@media (max-width: 900px) { .pipe { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .aparte { grid-template-columns: 1fr; justify-items: start; } }
@media (max-width: 560px) { .pipe { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .htoi__node { animation: none; }
  .btn, .link-arrow, .nav__sections a::after { transition: none; }
  .refs__tile { transition: none; }
  .to-top { transition: opacity 0.2s linear; transform: none; }
}