/* ==========================================================================
   Content OS · version 6 « premium » (essai du 22/09/2026)
   Direction : une page éditoriale, féminine et premium. Les visages (le sien, ceux
   des agents) et les grands espaces portent la page, le texte est réduit au minimum.
   Ce qui est repris de la version 5 validée : le violet d'accent, Instrument Sans,
   Inter, les Memoji, les couleurs de sens (sauge, rose).
   Ce qui est nouveau : Instrument Serif en italique pour un mot par titre, le fond
   pêche tiré de sa photo, le sombre prune à la place du noir, le menu en pilule,
   les cartes portrait penchées, une vraie capture de Studio NIA.
   Polices : Google Fonts (Instrument Sans, Instrument Serif, Inter).
   ========================================================================== */

/* 28/09 (passe UI/UX, brief-site.md section 93) : polices de secours calibrées. Tant que les
   polices Google n'ont pas fini de charger, le texte s'affiche dans ces polices système, réglées
   pour prendre la même place : le texte ne bouge plus quand la vraie police arrive (le CLS
   montait à 0,19 sur mobile). Valeurs mesurées dans Chromium le 28/09, pas copiées d'ailleurs. */
@font-face { font-family: "Inter Secours"; src: local("Arial"); font-weight: 100 550;
  size-adjust: 96.7%; ascent-override: 100.31%; descent-override: 24.82%; line-gap-override: 0%; }
@font-face { font-family: "Inter Secours"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 551 900;
  size-adjust: 96.7%; ascent-override: 100.31%; descent-override: 24.82%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans Secours"; src: local("Arial"); font-weight: 100 550;
  size-adjust: 100.7%; ascent-override: 96.32%; descent-override: 24.83%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans Secours"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 551 900;
  size-adjust: 96.2%; ascent-override: 100.83%; descent-override: 25.99%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Serif Secours"; src: local("Times New Roman"), local("TimesNewRomanPSMT"); font-style: normal;
  size-adjust: 82.81%; ascent-override: 119.55%; descent-override: 37.44%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Serif Secours"; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"); font-style: italic;
  size-adjust: 87.49%; ascent-override: 113.16%; descent-override: 35.43%; line-gap-override: 0%; }

:root {
  /* Surfaces */
  --bg: #faf7f3;            /* ivoire */
  --bg-2: #f3ede6;          /* sable */
  --blush: #f5e6de;         /* pêche, le fond de sa photo */
  --blush-2: #eed7c9;
  --lilac: #ece4f5;         /* violet très clair */
  --plum: #241b2f;          /* fond sombre, prune */
  --plum-2: #2f2540;
  --surface: #ffffff;

  /* Texte */
  --ink: #1c1917;           /* 16,4:1 sur ivoire */
  --ink-2: #44403c;
  --muted: #57514b;         /* 7,3:1 sur ivoire, 6,4:1 sur pêche */
  --on-dark: #f5efe8;       /* 14,5:1 sur prune */
  --on-dark-muted: #cdc3d8; /* 9,7:1 sur prune */
  --on-dark-accent: #d9c6f0;/* 10,4:1 sur prune */

  /* Accent : le violet de la marque (le même que Studio NIA) */
  --accent: #7432b4;        /* 6,9:1 sur ivoire */
  --accent-text: #5f2496;   /* 9:1 sur ivoire, 7,9:1 sur pêche */
  --accent-ink: #5b2a86;    /* 8:1 sur lilas */

  /* Couleurs de sens, reprises de la version 5 (22/09) */
  --sauge: #2d7a55;
  --sauge-ink: #1f5e40;
  --sauge-soft: #e7f2ec;
  --rose-ink: #a3243b;
  --rose-soft: #fdeef0;

  /* Traits et ombres */
  --line: rgba(28, 25, 23, 0.09);
  --line-strong: rgba(28, 25, 23, 0.18);
  --line-dark: rgba(255, 255, 255, 0.14);
  --shadow-card: 0 24px 60px -24px rgba(36, 27, 47, 0.28), 0 6px 18px -8px rgba(36, 27, 47, 0.12);
  --shadow-chip: 0 18px 40px -18px rgba(36, 27, 47, 0.32), 0 4px 12px -6px rgba(36, 27, 47, 0.14);
  --shadow-nav: 0 10px 30px -18px rgba(36, 27, 47, 0.35);

  /* Formes */
  --r-card: 28px;
  --r-tile: 18px;
  --r-sm: 12px;
  --r-pill: 999px;

  /* Mouvement */
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-reveal: 0.9s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Rythme */
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(88px, 6vw + 48px, 150px);
  --container: 1200px;

  /* Polices */
  --font: "Inter", "Inter Secours", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Instrument Sans", "Instrument Sans Secours", var(--font);
  --font-serif: "Instrument Serif", "Instrument Serif Secours", Georgia, "Times New Roman", serif;

  color-scheme: light;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  scrollbar-color: rgba(28, 25, 23, 0.28) transparent;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

::selection {
  background: var(--lilac);
  color: var(--accent-ink);
}

[hidden] { display: none !important; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.75rem, 1.9rem + 3vw, 4.7rem);
  line-height: 1;
}

h2 {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.4rem);
  line-height: 1.06;
}

h3 {
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

p { margin: 0; }
p + p { margin-top: 0.75em; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--accent-text);
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

button { font: inherit; color: inherit; }

.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 mot en italique : un seul par titre, en violet, dans la serif */
.em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--accent-text);
  font-size: 1.08em;
}

.dark .em,
.em.on-dark { color: var(--on-dark-accent); }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.container-narrow {
  width: min(100% - 2 * var(--gutter), 820px);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 10px 24px -14px rgba(28, 25, 23, 0.6);
}
.btn-primary:hover { background: #2b2521; box-shadow: 0 14px 28px -14px rgba(28, 25, 23, 0.65); }

.btn-light {
  background: #fff;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-light:hover { border-color: var(--ink); }

.btn-on-dark {
  background: var(--on-dark);
  color: var(--plum);
}
.btn-on-dark:hover { background: #fff; }

.btn-lg {
  min-height: 56px;
  padding: 0 30px;
  font-size: 1rem;
}

.btn .arrow {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform var(--dur-fast) var(--ease);
}
.btn:hover .arrow { transform: translateX(3px); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--accent-text);
}
.text-link svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); }
.text-link:hover svg { transform: translateX(3px); }

.ghost-link {
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
}
.ghost-link:hover { text-decoration-color: var(--ink); }

/* ---------- Navigation en pilule ---------- */

.nav {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding-inline: var(--gutter);
  pointer-events: none;
}

.nav-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 8px;
  border-radius: var(--r-pill);
  background: rgba(250, 247, 243, 0.78);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-nav);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; background: rgba(28, 25, 23, 0.05); }

/* La marque du menu = le favicon « le duo » (22/09) : deux visages sur fond pêche, jamais un rond dans un carré sombre */
.brand-mark {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--blush);
  overflow: hidden;
  flex: none;
}
.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
}
.brand-mark::before { left: 5px; top: 6px; background: var(--accent); }
.brand-mark::after { left: 12.5px; top: 11.5px; background: var(--plum); box-shadow: 0 0 0 1.5px var(--blush); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
}
.nav-links a:hover { text-decoration: none; background: rgba(28, 25, 23, 0.05); color: var(--ink); }
.nav-links a[aria-current="page"] { background: var(--lilac); color: var(--accent-ink); }

.nav-cta { min-height: 40px; padding: 0 18px; font-size: 0.875rem; }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), top var(--dur) var(--ease-out);
}
.nav-toggle::before { top: 15px; }
.nav-toggle::after { top: 23px; }
.nav-toggle[aria-expanded="true"]::before { top: 19px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after { top: 19px; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .nav-pill { width: 100%; justify-content: space-between; }
  .nav-toggle { display: block; }
  .nav-cta.nav-cta-desktop { display: none; }
  .nav-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    padding: 10px;
    border-radius: 24px;
    background: rgba(250, 247, 243, 0.96);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .nav-pill { position: relative; }
  .nav-menu.is-open { display: block; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-links a { min-height: 48px; font-size: 1.0625rem; padding: 0 16px; }
  .nav-menu .nav-cta { display: flex; margin-top: 8px; min-height: 52px; font-size: 1rem; }
}

@media (min-width: 861px) {
  .nav-menu { display: contents; }
  .nav-menu > .nav-cta { display: none; }
}

/* ---------- Sections ---------- */

.section { padding-block: var(--section); }
.section-sand { background: var(--bg-2); }

.section-head {
  max-width: 560px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.section-head.wide { max-width: 720px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .lead { margin-top: 20px; }

.lead {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 25.76em /* 42ch */;
  text-wrap: pretty;
}

.small { font-size: 0.9375rem; color: var(--muted); }
.note { font-size: 0.875rem; color: var(--muted); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; align-items: start; } }

/* ---------- Haut de page (accueil) ---------- */

.hero {
  padding-top: clamp(120px, 14vw, 170px);
  padding-bottom: clamp(56px, 6vw, 96px);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.hero-text { max-width: 620px; }
.hero-text h1 { max-width: 8.72em /* 13ch */; }
.hero-text .lead { margin-top: 28px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 36px;
}

.hero-team {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9375rem;
}

.faces { display: flex; }
.faces img,
.faces .face-letter {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  object-fit: cover;
  background: var(--lilac);
  flex: none;
}
.faces > * + * { margin-left: -10px; }
.faces .face-letter {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--accent-ink);
}

/* La carte portrait et ses deux notifications */
.hero-visual {
  position: relative;
  max-width: 520px;
  margin-inline: auto;
  width: 100%;
}

.portrait-wrap { position: relative; }

.portrait-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--blush);
  box-shadow: var(--shadow-card);
}
.portrait-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.chip {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
  width: min(300px, 72%);
  padding: 12px 14px 12px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-chip);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.chip img,
.chip .face-letter {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--lilac);
}
.chip .face-letter {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--accent-ink);
}
.chip-title { font-size: 0.9rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.chip-title strong { font-weight: 700; }
.chip-meta { margin-top: 3px; font-size: 0.8125rem; color: var(--muted); line-height: 1.3; }
.chip-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--lilac);
  color: var(--accent-ink);
}
.chip-state.ok { background: var(--sauge-soft); color: var(--sauge-ink); }
.chip-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Les deux notifications se posent sur la robe, jamais sur le visage */
.chip-1 { top: 54%; left: -8%; }
.chip-2 { bottom: 5%; right: -8%; }

.hero-caption {
  margin-top: 18px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted);
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 440px; }
  .chip-1 { left: -4%; }
  .chip-2 { right: -4%; }
}

@media (max-width: 480px) {
  .hero { padding-top: 104px; }
  .hero-team { flex-direction: column; align-items: flex-start; gap: 16px; }
  .chip { width: 78%; }
  .chip-1 { top: 50%; left: -6px; }
  .chip-2 { bottom: 4%; right: -6px; }
}

/* Entrée du haut de page : la carte se pose, les deux notifications arrivent après */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-visual .portrait-card,
  .js .hero-visual .chip {
    opacity: 0;
    transform: translateY(26px) scale(0.97);
  }
  .js .hero-visual.is-in .portrait-card,
  .js .hero-visual.is-in .chip {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  }
  .js .hero-visual.is-in .chip-1 { transition-delay: 0.25s; }
  .js .hero-visual.is-in .chip-2 { transition-delay: 0.4s; }
}

/* ---------- Les trois moments ---------- */

.moments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.moments li {
  padding: 32px 32px 32px 0;
  border-right: 1px solid var(--line);
}
.moments li + li { padding-left: 32px; }
.moments li:last-child { border-right: 0; }
.moment-when {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--accent-text);
  margin-bottom: 12px;
}
.moments p:not(.moment-when) { color: var(--ink-2); max-width: 18.4em /* 30ch */; text-wrap: pretty; }

@media (max-width: 860px) {
  .moments { grid-template-columns: 1fr; }
  .moments li { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .moments li + li { padding-left: 0; }
  .moments li:last-child { border-bottom: 0; }
}

/* ---------- Le chemin, du contenu aux clients ---------- */

.chain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.chain::before {
  content: "";
  position: absolute;
  left: 36px;
  right: 36px;
  top: 36px;
  height: 1px;
  background: var(--line-strong);
}

.chain-step { position: relative; }

.chain-face {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--lilac);
  box-shadow: 0 0 0 6px var(--bg);
}
.chain-face img { width: 100%; height: 100%; object-fit: cover; }
.chain-face-pair { display: flex; }
.chain-face-pair .chain-face + .chain-face { margin-left: -18px; }

.chain-num {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(30%, -20%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}
.chain-top { position: relative; display: inline-flex; margin-bottom: 26px; }

.chain-step h3 { margin-bottom: 10px; }
.chain-step p { color: var(--ink-2); font-size: 1rem; }
.chain-gain {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.45rem;
  color: var(--accent-text);
  line-height: 1.35;
}

.chain-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.chain-end p { max-width: 38.02em /* 62ch */; color: var(--ink-2); }

@media (max-width: 960px) {
  .chain { grid-template-columns: repeat(2, 1fr); }
  .chain::before { display: none; }
}
@media (max-width: 520px) {
  .chain { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Le studio (bloc sombre prune) ---------- */

.dark {
  background: var(--plum);
  color: var(--on-dark);
  padding-block: var(--section);
}
.dark h2, .dark h3 { color: var(--on-dark); }
.dark p { color: var(--on-dark-muted); }
.dark a { color: var(--on-dark-accent); }

.studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

.studio-text h2 { max-width: 9.39em /* 14ch */; }
.studio-text .lead { color: var(--on-dark-muted); margin-top: 20px; }

.checks { margin-top: 32px; }
.checks li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--line-dark);
}
.checks li:last-child { border-bottom: 1px solid var(--line-dark); }
.checks p { color: var(--on-dark); font-size: 1rem; }
.check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(217, 198, 240, 0.16);
  color: var(--on-dark-accent);
  margin-top: 1px;
}
.check svg { width: 13px; height: 13px; }

.checks.light li { border-color: var(--line); }
.checks.light p { color: var(--ink); }
.checks.light .check { background: var(--sauge-soft); color: var(--sauge-ink); }

/* La fenêtre du studio : une vraie capture de Studio NIA */
.window {
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: rotate(-1.5deg);
}
.window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  background: #f3ede6;
  border-bottom: 1px solid var(--line);
}
.window-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(28, 25, 23, 0.14);
}
.window-bar .url {
  flex: 1;
  width: auto;
  height: 20px;
  margin-left: 8px;
  border-radius: 8px;
  background: rgba(28, 25, 23, 0.06);
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  padding-left: 10px;
}
.window img { width: 100%; height: auto; }

.studio-caption {
  margin-top: 26px;
  font-size: 0.875rem;
  color: var(--on-dark-muted);
  text-align: center;
}

@media (max-width: 960px) {
  .studio-grid { grid-template-columns: 1fr; }
  .window { transform: none; }
}

/* ---------- Comment on commence (le registre) ---------- */

.ledger { border-top: 1px solid var(--line-strong); }

.ledger-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(200px, 0.6fr);
  gap: 24px;
  align-items: start;
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
}

.ledger-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--accent-text);
  padding-top: 4px;
}

.ledger-row h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.ledger-row h3 small {
  display: block;
  margin-top: 6px;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}
.ledger-row .desc { margin-top: 14px; color: var(--ink-2); max-width: 31.89em /* 52ch */; }

.ledger-bullets { margin-top: 18px; }
.ledger-bullets li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 1rem;
}
.ledger-bullets li + li { margin-top: 6px; }
.ledger-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.ledger-price { text-align: right; }
.price {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.price small {
  display: block;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 8px;
  color: var(--muted);
}
.price-offer {
  margin-top: 12px;
  font-weight: 600;
  color: var(--accent-text);
  font-size: 0.9375rem;
}
.tag {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--lilac);
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: 600;
}
.tag.fix {
  background: transparent;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
}
.ledger-price .btn { margin-top: 18px; }

.ledger-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 36px;
}
.tva { margin-top: 18px; font-size: 0.8125rem; color: var(--muted); }

@media (max-width: 760px) {
  .ledger-row { grid-template-columns: 44px 1fr; }
  .ledger-price { grid-column: 2; text-align: left; }
  .ledger-num { font-size: 1.4rem; }
}

/* ---------- Qui est derrière ---------- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.about-photo {
  margin: 0;
  max-width: 440px;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-2);
  box-shadow: var(--shadow-card);
  transform: rotate(1.5deg);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-text h2 { max-width: 9.39em /* 14ch */; }
.about-role { margin-top: 16px; font-size: 1.125rem; color: var(--ink-2); }
.about-text .lead { margin-top: 20px; font-size: 1.125rem; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.facts li {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
}
.about-text .btn { margin-top: 32px; }

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { transform: none; }
}

/* ---------- Questions ---------- */

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.faq-head h2 { max-width: 8.05em /* 12ch */; }
.faq-head p { margin-top: 20px; color: var(--ink-2); }
.faq-head .text-link { margin-top: 16px; }

.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-text); }
.faq .plus {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur-fast) var(--ease);
}
.faq .plus svg { width: 14px; height: 14px; }
.faq details[open] .plus { transform: rotate(45deg); background: var(--lilac); border-color: transparent; color: var(--accent-ink); }
.faq-answer { padding: 0 0 26px; max-width: 36.8em /* 60ch */; color: var(--ink-2); }
.faq-answer p + p { margin-top: 10px; }

@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; }
}

/* ---------- Dernier appel (champ pêche) ---------- */

.final { padding-block: 0 var(--section); }
.final-card {
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  background: var(--blush);
  padding: clamp(56px, 7vw, 104px) var(--gutter);
  text-align: center;
}
.final-card::before {
  content: "";
  position: absolute;
  inset: auto -10% -40% -10%;
  height: 60%;
  background: radial-gradient(60% 80% at 50% 100%, var(--blush-2), transparent 70%);
  pointer-events: none;
}
.final-card > * { position: relative; }
.final-face {
  width: 76px;
  height: 76px;
  margin: 0 auto 26px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.7);
}
.final-face img { width: 100%; height: 100%; object-fit: cover; }
.final-card h2 { max-width: 10.74em /* 16ch */; margin-inline: auto; }
.final-card .lead { margin: 20px auto 0; max-width: 28.21em /* 46ch */; }
.final-actions { margin-top: 34px; }
.final-offer { margin-top: 20px; font-weight: 600; color: var(--accent-text); }
.final-alt { margin-top: 10px; font-size: 0.9375rem; color: var(--muted); }

/* ---------- Pied de page ---------- */

.footer {
  padding: clamp(48px, 6vw, 88px) 0 32px;
  border-top: 1px solid var(--line);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 10.5vw, 10rem);
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--ink);
  margin: 0 0 clamp(32px, 5vw, 64px);
  white-space: nowrap;
}
.wordmark .em { font-size: 1em; color: var(--accent-text); }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.6fr));
  gap: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.footer-brand p { color: var(--ink-2); max-width: 19.63em /* 32ch */; }
.footer-brand .btn { margin-top: 20px; }
.footer-h { font-weight: 600; font-size: 0.9375rem; margin-bottom: 12px; }
.footer-grid ul li + li { margin-top: 2px; }
.footer-grid ul a { display: inline-block; padding: 5px 0; color: var(--ink-2); font-size: 0.9375rem; }
.footer-grid ul a:hover { color: var(--ink); }

.social { display: flex; gap: 8px; margin-top: 20px; }
.social a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--ink);
}
.social a:hover { background: var(--ink); color: #fff; border-color: var(--ink); text-decoration: none; }
.social svg { width: 18px; height: 18px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
}

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .wordmark { white-space: normal; }
}

/* ---------- Page Content OS : haut de page en éventail ---------- */

.hero-offer {
  padding-top: clamp(120px, 14vw, 170px);
  padding-bottom: clamp(40px, 5vw, 72px);
  text-align: center;
}
.hero-offer h1 { max-width: 10.74em /* 16ch */; margin-inline: auto; }
.hero-offer .lead { margin: 26px auto 0; max-width: 28.21em /* 46ch */; }
.hero-offer .hero-actions { justify-content: center; }
.hero-offer .reassure { margin-top: 22px; font-size: 0.9375rem; color: var(--muted); }

.fan {
  --cw: clamp(150px, 17vw, 230px);   /* largeur d'une carte */
  --spread: 0.72;                    /* écart entre deux cartes, en largeur de carte */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: clamp(300px, 32vw, 400px);
  margin-top: clamp(40px, 5vw, 72px);
  overflow-x: clip;
}
.fan-card {
  --dx: calc(var(--k) * var(--cw) * var(--spread));
  position: absolute;
  bottom: 0;
  left: 50%;
  width: var(--cw);
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  background: var(--plum-2);   /* sous le Memoji : le texte blanc reste lisible si l'image manque */
  box-shadow: var(--shadow-card);
  transform-origin: 50% 120%;
  transform: translateX(calc(-50% + var(--dx))) rotate(var(--rot)) translateY(var(--lift));
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.fan-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.fan-card figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 44px 16px 16px;
  background: linear-gradient(to top, rgba(36, 27, 47, 0.78), rgba(36, 27, 47, 0));
  color: #fff;
  text-align: left;
}
.fan-card figcaption strong { display: block; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
.fan-card figcaption span { display: block; font-size: 0.8125rem; opacity: 0.9; margin-top: 2px; }

.fan-card:nth-child(1) { --k: -2; --rot: -14deg; --lift: 0px; z-index: 1; }
.fan-card:nth-child(2) { --k: -1; --rot: -7deg;  --lift: -22px; z-index: 2; }
.fan-card:nth-child(3) { --k: 0;  --rot: 0deg;   --lift: -34px; z-index: 3; }
.fan-card:nth-child(4) { --k: 1;  --rot: 7deg;   --lift: -22px; z-index: 2; }
.fan-card:nth-child(5) { --k: 2;  --rot: 14deg;  --lift: 0px; z-index: 1; }

.fan-card:hover,
.fan-card:focus-within {
  z-index: 5;
  transform: translateX(calc(-50% + var(--dx))) rotate(var(--rot)) translateY(calc(var(--lift) - 18px)) scale(1.04);
}

/* L'éventail se déploie à l'arrivée : les cartes partent empilées au centre */
@media (prefers-reduced-motion: no-preference) {
  .js .fan .fan-card { transform: translateX(-50%) rotate(0deg) translateY(40px); opacity: 0; }
  .js .fan.is-in .fan-card {
    opacity: 1;
    transform: translateX(calc(-50% + var(--dx))) rotate(var(--rot)) translateY(var(--lift));
    transition: transform 1s var(--ease-out), opacity 0.6s var(--ease-out);
  }
  .js .fan.is-in .fan-card:nth-child(1), .js .fan.is-in .fan-card:nth-child(5) { transition-delay: 0.18s; }
  .js .fan.is-in .fan-card:nth-child(2), .js .fan.is-in .fan-card:nth-child(4) { transition-delay: 0.09s; }
  .js .fan.is-in .fan-card:hover,
  .js .fan.is-in .fan-card:focus-within {
    transform: translateX(calc(-50% + var(--dx))) rotate(var(--rot)) translateY(calc(var(--lift) - 18px)) scale(1.04);
    transition-delay: 0s;
    transition-duration: 0.5s;
  }
}

@media (max-width: 640px) {
  .fan { --cw: 104px; --spread: 0.56; height: 210px; }
  .fan-card { border-radius: 16px; }
  .fan-card:nth-child(1) { --rot: -18deg; }
  .fan-card:nth-child(2) { --rot: -9deg; }
  .fan-card:nth-child(4) { --rot: 9deg; }
  .fan-card:nth-child(5) { --rot: 18deg; }
  .fan-card figcaption { padding: 30px 10px 10px; }
  .fan-card figcaption strong { font-size: 0.9375rem; }
  .fan-card figcaption span { font-size: 0.6875rem; }
}

.fan-note { margin-top: 28px; text-align: center; color: var(--muted); font-size: 0.9375rem; }

/* ---------- Premiers clients ---------- */

.first-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.first-head h2 { max-width: 8.05em /* 12ch */; }
.first-head .lead { margin-top: 20px; }
.signature {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}
.signature img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px var(--blush);
}
.signature strong { display: block; font-family: var(--font-display); font-weight: 600; }
.signature span { font-size: 0.9375rem; color: var(--muted); }

@media (max-width: 860px) { .first-grid { grid-template-columns: 1fr; } }

/* ---------- Avant / avec votre studio ---------- */

.compare { border-top: 1px solid var(--line-strong); }
.compare-head,
.compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.compare-head {
  padding: 16px 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.compare-head span:last-child { color: var(--accent-text); }
.compare-row { padding: 20px 0; border-bottom: 1px solid var(--line); align-items: center; }
.compare-row .before { color: var(--muted); }
.compare-row .after {
  font-weight: 600;
  color: var(--ink);
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--lilac);
}
.compare-row .after.sauge { background: var(--sauge-soft); color: var(--sauge-ink); }

@media (max-width: 640px) {
  .compare-head { display: none; }
  .compare-row { grid-template-columns: 1fr; gap: 10px; }
  .compare-row .before::before { content: "Aujourd'hui\00a0: "; font-weight: 600; color: var(--rose-ink); }
}

/* ---------- L'équipe (tuiles) ---------- */

.team-group { margin-top: clamp(32px, 4vw, 48px); }
.team-group h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.team-tile {
  position: relative;
  padding: 24px;
  border-radius: var(--r-tile);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(36, 27, 47, 0.35);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.team-tile:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--line), var(--shadow-card); }
.team-tile img,
.team-tile .face-letter {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  object-fit: cover;
  background: var(--lilac);
  margin-bottom: 18px;
}
.team-tile .face-letter {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent-ink);
}
.team-tile strong { display: block; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
.team-tile .role { display: block; font-size: 0.875rem; color: var(--accent-text); font-weight: 500; margin-top: 2px; }
.team-tile p { margin-top: 10px; font-size: 0.9375rem; color: var(--ink-2); }
.team-tile .tag { position: absolute; top: 18px; right: 18px; margin: 0; }
.team-tile.option { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }

@media (max-width: 960px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .team { grid-template-columns: 1fr; } }

/* ---------- Le budget ---------- */

.budget {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3vw, 36px);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line), 0 20px 50px -30px rgba(36, 27, 47, 0.3);
}
.budget h3 { font-size: 1.25rem; }
.budget-rows { margin-top: 18px; }
.budget-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.budget-row .small { display: block; margin-top: 2px; }
.budget-amount { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; white-space: nowrap; }
.budget .tva { margin-top: 16px; }

/* ---------- Les quatre étapes de l'audit ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid var(--line-strong);
}
.steps li { padding-top: 24px; }
.step-num {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.75rem;
  color: var(--accent-text);
  margin-bottom: 14px;
}
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--ink-2); font-size: 1rem; }

@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Pour vous, pas pour vous ---------- */

.fit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.fit-col {
  padding: clamp(24px, 3vw, 36px);
  border-radius: 24px;
}
.fit-col.yes { background: var(--sauge-soft); }
.fit-col.no { background: var(--rose-soft); }
.fit-col h3 { font-size: 1.375rem; margin-bottom: 18px; }
.fit-col.yes h3 { color: var(--sauge-ink); }
.fit-col.no h3 { color: var(--rose-ink); }
.fit-col li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  color: var(--ink);
}
.fit-col li svg { width: 22px; height: 22px; }
.fit-col.yes li svg { color: var(--sauge-ink); }
.fit-col.no li svg { color: var(--rose-ink); }

@media (max-width: 760px) { .fit { grid-template-columns: 1fr; } }

/* ---------- Révélations au défilement (une seule grammaire) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .reveal-group > * { transition-delay: calc(var(--i, 0) * 70ms); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Ruban de l'essai (à retirer si validé) ---------- */

.essai-ruban {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 12px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-size: 0.8125rem;
  box-shadow: var(--shadow-chip);
}
.essai-ruban strong { font-weight: 700; }
.essai-ruban a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); }
.essai-ruban a:hover { text-decoration-color: #fff; }
@media (max-width: 640px) { .essai-ruban { font-size: 0.75rem; left: 10px; right: 10px; justify-content: center; } }

/* ==========================================================================
   Pages alignées le 22/09 (après-midi) : À propos, Ressources, Contact
   ========================================================================== */

.page-hero .hero-visual { max-width: 460px; }
.page-hero .about-role { margin-top: 18px; font-size: 1.125rem; color: var(--ink-2); }
.page-hero .lead { margin-top: 18px; }

/* Listes en lignes : parcours, façon de travailler, skills du Kit */
.rows { border-top: 1px solid var(--line-strong); }
.rows li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.rows-key {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--accent-text);
}
.rows p { color: var(--ink-2); max-width: 38.02em /* 62ch */; }
.rows h3 { margin-bottom: 6px; }
.rows-wide li { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
.rows-wide h3 { margin: 0; }

@media (max-width: 640px) {
  .rows li, .rows-wide li { grid-template-columns: 1fr; gap: 6px; }
}

.steps.three { grid-template-columns: repeat(3, 1fr); }
.steps.three h3 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
@media (max-width: 760px) { .steps.three { grid-template-columns: 1fr; } }

/* Les deux portes de la page Contact */
.doors {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 20px;
  margin-top: clamp(40px, 5vw, 64px);
  text-align: left;
}
.door {
  padding: clamp(28px, 4vw, 44px);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line), var(--shadow-card);
}
.door.quiet { background: var(--bg-2); box-shadow: none; }
.door h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.door .lead { margin-top: 14px; font-size: 1.0625rem; max-width: none; }
.door .ledger-bullets { margin-top: 20px; }
.door-price { margin-top: 26px; }
.door-meta { margin-top: 26px; font-weight: 600; color: var(--ink); }
.door .btn { margin-top: 26px; }
.hero-offer .tva { text-align: left; }

@media (max-width: 860px) { .doors { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .door { padding: 22px 20px; }
  .door .btn { width: 100%; padding-inline: 16px; white-space: normal; text-align: center; }
}

/* Formulaires */
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 860px) { .form-grid { grid-template-columns: 1fr; } }

.lead-card {
  padding: clamp(24px, 3vw, 36px);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line), var(--shadow-card);
}
.lead-card h2 { font-size: 1.75rem; }
.lead-card form { margin-top: 20px; }

.form, .lead-card form { display: grid; gap: 16px; }
.form-note { font-size: 0.8125rem; color: var(--muted); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 6px; }
.field label { font-size: 0.9375rem; font-weight: 600; }
.field input:not([type="checkbox"]),
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: #fff;
  font: inherit;
  color: var(--ink);
  caret-color: var(--accent);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--lilac);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field [aria-invalid="true"] { border-color: var(--rose-ink); }
.field-error { font-size: 0.875rem; color: var(--rose-ink); }

.consent {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.875rem;
  color: var(--ink-2);
  cursor: pointer;
}
.consent input { width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }
.form-status { min-height: 1.5em; font-size: 0.9375rem; font-weight: 500; color: var(--sauge-ink); }

/* Bande vers l'offre (Ressources) */
.band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: clamp(28px, 4vw, 52px);
  border-radius: 32px;
  background: var(--blush);
}
.band h2 { max-width: 10.74em /* 16ch */; }
.band .lead { max-width: 26.99em /* 44ch */; }

/* ---------- Logos du parcours (accueil, 22/09/2026) ---------- */

.facts li.fact-logo { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px; }
.fact-logo .logo-tile { width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center; overflow: hidden; }
.fact-logo .logo-tile img { width: 100%; height: 100%; display: block; }
.fact-logo .logo-tile.sombre { background: #241b2f; }
.fact-logo .logo-tile.sombre img { width: 86%; height: 86%; }

/* ==========================================================================
   Repris de ylaia.com le 23/09/2026 (essai validé par Alexandra, brief section 62), traduit dans le monde du site :
   les titres plus grands avec la seconde moitié en italique sur sa ligne, le repère vertical des chapitres,
   la méthode de l'audit en compteur collant (Content OS), l'heure de Marseille au pied de page.
   Ni sa place en 3D, ni son vert, ni sa police mono. Les numéros gardent Instrument Serif italique, en violet.
   La liste des agents aux grands prénoms n'a pas été retenue : la page Agents garde ses tuiles.
   ========================================================================== */

/* ---------- Les titres, plus grands ---------- */

h2 {
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4.4rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
}

/* La seconde moitié de la phrase, en italique, sur sa propre ligne */
.em-line { display: block; }

.studio-text h2 { max-width: 10.74em /* 16ch */; }
.first-head h2 { max-width: 8.72em /* 13ch */; }

/* ---------- Les chapitres : le repère vertical à droite ---------- */

.chapitres {
  position: fixed;
  right: 22px;
  top: 50%;
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: translateY(-50%);
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out), color 0.45s var(--ease-out);
}
@media (min-width: 1240px) {
  .js .chapitres { display: flex; }
}
.js .chapitres.is-on { opacity: 1; }
.js .chapitres.is-off { opacity: 0; }

.chapitres-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--accent-text);
}
.chapitres-track {
  position: relative;
  width: 1px;
  height: 64px;
  background: var(--line-strong);
  overflow: hidden;
}
.chapitres-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.6s var(--ease-out), background-color 0.45s var(--ease-out);
}
.chapitres-label {
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Sur le bloc sombre, le repère passe en clair */
.chapitres.on-dark { color: var(--on-dark-muted); }
.chapitres.on-dark .chapitres-num { color: var(--on-dark-accent); }
.chapitres.on-dark .chapitres-track { background: var(--line-dark); }
.chapitres.on-dark .chapitres-fill { background: var(--on-dark-accent); }

@media (prefers-reduced-motion: no-preference) {
  .chapitres-num.is-new,
  .chapitres-label.is-new { animation: essai-monte 0.4s var(--ease-out); }
}
@keyframes essai-monte {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- La méthode en compteur collant (Content OS) ---------- */

.methode-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.methode-sticky { position: sticky; top: 112px; }
.methode-sticky .lead { margin-top: 20px; }

.compteur {
  display: none;
  align-items: baseline;
  gap: 16px;
  margin-top: clamp(32px, 4vw, 56px);
  font-family: var(--font-display);
}
.compteur-num {
  display: inline-block;
  font-size: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.compteur-total {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--accent-text);
}
.methode-rail {
  display: none;
  position: relative;
  width: 2px;
  height: 96px;
  margin-top: 28px;
  background: var(--line-strong);
  overflow: hidden;
}
.methode-rail span {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: top;
  transform: scaleY(0.25);
  transition: transform 0.6s var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .compteur-num.is-new { animation: essai-monte 0.4s var(--ease-out); }
}

.etapes { border-top: 1px solid var(--line-strong); }
.etape {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 24px;
  align-content: start;
  min-height: 230px;
  padding: clamp(36px, 5vw, 60px) 0;
  border-bottom: 1px solid var(--line);
}
.etape-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--accent-text);
  padding-top: 10px;
  transition: color 0.45s var(--ease-out);
}
.etape h3 {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  transition: color 0.45s var(--ease-out);
}
.etape p {
  margin-top: 14px;
  font-size: 1.0625rem;
  max-width: 28.21em /* 46ch */;
  color: var(--ink-2);
  transition: color 0.45s var(--ease-out);
}

/* Quand le script suit le défilement, seule l'étape en face du compteur est en noir.
   Les autres restent lisibles : 3,3:1 pour le grand titre, 7:1 pour le texte. */
@media (min-width: 861px) {
  .methode.is-live .etape:not(.is-active) h3 { color: #8a8178; }
  .methode.is-live .etape:not(.is-active) p,
  .methode.is-live .etape:not(.is-active) .etape-num { color: var(--muted); }
}

@media (max-width: 860px) {
  .methode-grid { grid-template-columns: 1fr; }
  .methode-sticky { position: static; }
  .compteur, .methode-rail { display: none; }
  .etape { min-height: 0; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 28px 0; }
}

/* ---------- L'heure de Marseille, dans le pied de page ---------- */

.heure-sep, .heure time { display: none; }
.heure.is-on .heure-sep, .heure.is-on time { display: inline; }
.heure time { font-variant-numeric: tabular-nums; }

/* Le compteur et son rail n'existent qu'avec le script qui les fait vivre : sans lui, les quatre étapes suffisent */
.js .compteur { display: flex; }
.js .methode-rail { display: block; }
@media (max-width: 860px) {
  .js .compteur, .js .methode-rail { display: none; }
}

/* ---------- Page À propos, réécrite avec son gabarit le 23/09/2026 (brief, section 64) ----------
   « Mon histoire » : le titre reste à gauche pendant qu'on lit, le texte à droite, puis sa phrase de conviction.
   « Ce que je propose » : le paragraphe et ses deux liens sous la méthode. */

.histoire {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.histoire h2 { position: sticky; top: 112px; max-width: 6.71em /* 10ch */; }
.histoire-texte p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 35.57em /* 58ch */;
  text-wrap: pretty;
}
.histoire-texte p + p { margin-top: 1.1em; }
.histoire-texte .citation {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line-strong);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.3;
  color: var(--accent-text);
  max-width: 12.91em /* 28ch */;
}
.propose {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
  max-width: 38.02em /* 62ch */;
}
.propose p { color: var(--ink-2); }
.propose p + p { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 28px; }

@media (max-width: 860px) {
  .histoire { grid-template-columns: 1fr; }
  .histoire h2 { position: static; }
}

/* 28/09 (passe UI/UX, brief-site.md section 93) : lignes trop longues bornées à environ 65 caractères
   (elles montaient à 160 sur grand écran ; au-delà de 75, l'œil perd le début de la ligne suivante). */
.calcul .note,
.compris-note,
.ajustement p { max-width: 40em; }
.fan-note { max-width: 40em; margin-inline: auto; }

/* ============ RÉSERVATION CAL.COM (29/09, essai « calcom » validé) : le calendrier de l'audit dans Contact ============ */
.reservation {
  margin-top: clamp(48px, 6vw, 80px);
  scroll-margin-top: 96px;
}
.reservation h2 { margin-bottom: 12px; }
.reservation .lead { max-width: 60ch; }
.cal-inline {
  margin-top: 28px;
  width: 100%;
  min-height: 560px;
  overflow: auto;
  background: var(--surface);
  border-radius: 20px;
}
.cal-secours {
  margin-top: 16px;
  font-size: 0.95rem;
  color: var(--muted);
}
.cal-secours a { color: var(--accent-text); }