/* ==========================================================================
   IARH CONSULTING — Feuille de style unique
   Ordre : 1.Tokens 2.Reset 3.Typo 4.Layout 5.Boutons/Liens 6.Header 7.Hero
           8.Manifeste 9.Méthode 10.Offre 11.À propos 12.Diagnostic 13.Footer
           14.Révélations scroll 15.Responsive
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Palette charte IARH — les 11 couleurs autorisées */
  --c-ink-900: #111E35;   /* marine très sombre (fond hero, footer) */
  --c-ink-800: #1A2B4A;   /* marine dominant (cartes) */
  --c-ink-700: #243654;   /* marine intermédiaire */
  --c-ink-600: #2C4A6E;   /* acier bleu */
  --c-ink-400: #2D3E5F;   /* corps sur fond clair */
  --c-gold-700: #C8A850;  /* or chaud (séparateurs, liens) */
  --c-gold-500: #E5B94E;  /* or lumineux (accents) */
  --c-glacier: #BDD4EA;   /* texte secondaire sur sombre */
  --c-paper:   #F4F6F9;   /* fond clair */
  --c-line:    #DDE4EE;   /* bordures légères */
  --c-muted:   #6B7FA3;   /* métadonnées, tertiaire */

  /* États formulaires — teintes désaturées cohérentes */
  --c-success: #4A7A5E;
  --c-error:   #8C3A3A;

  /* Typographies */
  --ff-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --ff-sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* Échelle typographique fluide (clamp) */
  --fs-display: clamp(2.75rem, 1.6rem + 4.8vw, 5.75rem);
  --fs-h2:      clamp(2rem,   1.3rem + 2.9vw, 3.75rem);
  --fs-h3:      clamp(1.4rem, 1.15rem + 1vw, 1.875rem);
  --fs-stat:    clamp(5rem,   3rem  + 7vw, 10rem);
  --fs-lede:    clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  --fs-body:    clamp(1rem,   0.95rem + 0.25vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  /* Espacements (échelle 8px) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4rem;
  --s-8: 6rem;
  --s-9: 8rem;
  --s-10: 10rem;

  /* Structure */
  --container-max: 84rem;        /* ~1344px */
  --container-gutter: clamp(1.25rem, 1rem + 2vw, 3rem);
  --section-pad-y: clamp(4.5rem, 3rem + 6vw, 9rem);

  /* Nouveaux tokens itération 2 — pages intérieures */
  --container-prose: 42rem;      /* ~672px — colonne de lecture pages légales + prose longue */
  --sidebar-width: 16rem;        /* ~256px — sommaire latéral page Méthode */

  --header-height: 84px;

  /* Transitions */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 560ms;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-paper);
  color: var(--c-ink-400);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
}

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

a {
  color: var(--c-ink-400);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

a:hover,
a:focus-visible {
  color: var(--c-gold-700);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--c-gold-700);
  margin: var(--s-6) 0;
}

::selection {
  background: var(--c-gold-500);
  color: var(--c-ink-900);
}

/* Focus universel — cadre or fin */
:focus-visible {
  outline: 2px solid var(--c-gold-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Utilitaires accessibilité */
.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;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--c-ink-900);
  color: var(--c-paper);
  padding: 0.75rem 1rem;
  z-index: 1000;
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus {
  top: 1rem;
}

/* ==========================================================================
   3. TYPOGRAPHIE
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--ff-serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--c-ink-900);
  margin: 0;
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; }

p { margin: 0 0 1em; }

em { font-style: italic; }

strong { font-weight: 600; color: inherit; }

.eyebrow {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold-700);
  margin: 0 0 var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--c-gold-700);
}
.eyebrow--light { color: var(--c-gold-500); }
.eyebrow--light::before { background: var(--c-gold-500); }

/* Rubrique « En clair » (registre satirique) : l'œil affiche un tampon doré
   plutôt qu'un filet, pour signaler le changement de ton avant la lecture. */
.eyebrow--badge {
  background: var(--c-gold-500);
  color: var(--c-ink-900);
  padding: 0.4em 0.85em;
  letter-spacing: 0.16em;
}
.eyebrow--badge::before { display: none; }
.eyebrow--en-clair {
  background: var(--c-gold-500);
  color: var(--c-ink-900);
  padding: 0.25em 0.6em;
  letter-spacing: 0.16em;
}
.eyebrow--en-clair::before { display: none; }

.section-title {
  max-width: 22ch;
  margin: 0 0 var(--s-5);
}
.section-title--light { color: var(--c-paper); }

.section-lede {
  font-size: var(--fs-lede);
  max-width: 52ch;
  color: var(--c-ink-400);
  margin-bottom: 0;
}
.section-lede--light { color: var(--c-glacier); }

.section-head {
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 5rem);
}

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

section {
  padding: var(--section-pad-y) var(--container-gutter);
  position: relative;
}

/* Couleur de fond par défaut par section (les styles de section complètent) */

/* ==========================================================================
   5. BOUTONS & LIENS
   ========================================================================== */
.btn {
  --_bg: var(--c-gold-700);
  --_fg: var(--c-ink-900);
  --_bd: var(--c-gold-700);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 1rem 1.75rem;
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_bd);
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  white-space: nowrap;
}

.btn:hover,
.btn:focus-visible {
  --_bg: var(--c-gold-500);
  --_bd: var(--c-gold-500);
  color: var(--c-ink-900);
  transform: translateY(-1px);
}

.btn--ghost-light {
  --_bg: transparent;
  --_fg: var(--c-paper);
  --_bd: rgba(255, 255, 255, 0.32);
}
.btn--ghost-light:hover,
.btn--ghost-light:focus-visible {
  --_bg: transparent;
  --_fg: var(--c-gold-500);
  --_bd: var(--c-gold-500);
}

.btn--submit {
  align-self: flex-start;
  padding-inline: 2.25rem;
}

/* Lien-flèche éditorial */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-900);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-gold-700);
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    letter-spacing var(--dur) var(--ease);
}
.link-arrow::after {
  content: '→';
  font-family: var(--ff-sans);
  font-size: 1.15em;
  transition: transform var(--dur) var(--ease);
}
.link-arrow:hover,
.link-arrow:focus-visible {
  color: var(--c-gold-700);
  border-bottom-color: var(--c-gold-500);
  letter-spacing: 0.14em;
}
.link-arrow:hover::after,
.link-arrow:focus-visible::after {
  transform: translateX(4px);
}
.link-arrow--light {
  color: var(--c-paper);
  border-bottom-color: var(--c-gold-500);
}
.link-arrow--light:hover,
.link-arrow--light:focus-visible {
  color: var(--c-gold-500);
}

/* ==========================================================================
   6. HEADER
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 0 var(--container-gutter);
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    backdrop-filter var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.site-header__brand {
  display: block;
  line-height: 0;
}
.site-header__logo {
  height: 36px;
  width: auto;
  transition: opacity var(--dur) var(--ease);
}

.site-nav__list {
  display: flex;
  gap: clamp(1.5rem, 0.8rem + 1.5vw, 2.75rem);
  align-items: center;
}

.site-nav__list a {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-paper);
  padding: 6px 0;
  position: relative;
}
.site-nav__list a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--c-gold-500);
  transition: right var(--dur) var(--ease);
}
.site-nav__list a:hover::after,
.site-nav__list a:focus-visible::after {
  right: 0;
}

.site-nav__cta {
  color: var(--c-gold-500) !important;
}
.site-nav__cta::after { background: var(--c-gold-500); right: 0; }

/* Variante "scrollée" : fond navy translucide + bordure or fine */
.site-header.is-scrolled {
  background: rgba(17, 30, 53, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: rgba(200, 168, 80, 0.22);
}

/* Toggle mobile */
.site-nav__toggle {
  display: none;
  width: 36px; height: 28px;
  flex-direction: column;
  justify-content: space-between;
}
.site-nav__toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--c-paper);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.site-nav__toggle[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(12px) rotate(45deg);
}
.site-nav__toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
.site-nav__toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-12px) rotate(-45deg);
}

.site-nav-mobile {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background: var(--c-ink-900);
  padding: var(--s-7) var(--container-gutter);
  z-index: 90;
}
.site-nav-mobile ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  border-top: 1px solid rgba(200, 168, 80, 0.22);
  padding-top: var(--s-5);
}
.site-nav-mobile a {
  font-family: var(--ff-serif);
  font-size: 2.25rem;
  font-weight: 500;
  color: var(--c-paper);
  letter-spacing: -0.01em;
}

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--c-ink-900);
  color: var(--c-paper);
  padding: 0 var(--container-gutter);
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 18%, rgba(44, 74, 110, 0.55), transparent 65%),
    radial-gradient(ellipse 60% 50% at 85% 85%, rgba(200, 168, 80, 0.08), transparent 60%),
    linear-gradient(180deg, #0D1828 0%, #111E35 60%, #0F1A2F 100%);
  z-index: -2;
}

/* Grille typographique discrète — nod à la mise en page imprimée */
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(189, 212, 234, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(189, 212, 234, 0.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, black 40%, transparent 100%);
  z-index: -1;
}

.hero__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
  padding-block: calc(var(--header-height) + var(--s-7)) var(--s-7);
  position: relative;
}

/* Masthead : métadonnées en haut */
.hero__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-glacier);
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid rgba(200, 168, 80, 0.28);
  max-width: 28rem;
}
.hero__meta-sep {
  width: 3px; height: 3px;
  background: var(--c-gold-700);
  border-radius: 50%;
  display: inline-block;
}

.hero__headline {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--c-paper);
  margin: 0 0 var(--s-6);
  max-width: 24ch;
}
.hero__headline em {
  font-style: italic;
  color: var(--c-gold-500);
  font-weight: 500;
}

.hero__lede {
  font-family: var(--ff-sans);
  font-size: var(--fs-lede);
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-glacier);
  max-width: 52ch;
  margin-bottom: var(--s-7);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
}

.hero__footnote {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.hero__rule {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--c-gold-700);
}

/* ==========================================================================
   8. MANIFESTE
   ========================================================================== */
.manifesto {
  background: var(--c-paper);
  color: var(--c-ink-400);
}

.manifesto .section-head {
  max-width: var(--container-max);
  margin-inline: auto;
}

.manifesto__grid {
  max-width: var(--container-max);
  margin: 0 auto var(--s-8);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.stat {
  padding: var(--s-6) var(--s-5);
  border-right: 1px solid var(--c-line);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.stat:last-child { border-right: 0; }

.stat__number-row {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: var(--s-2);
  color: var(--c-gold-700);
  font-family: var(--ff-serif);
  line-height: 0.9;
}
.stat__number {
  font-size: var(--fs-stat);
  font-weight: 500;
  letter-spacing: -0.035em;
}
.stat__unit {
  font-family: var(--ff-serif);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  font-weight: 400;
  color: var(--c-gold-500);
}

.stat__label {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-900);
  margin: 0 0 var(--s-2);
}

.stat__body {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink-400);
  margin: 0;
  flex-grow: 1;
}
.stat__body strong { color: var(--c-ink-900); }

.stat__source {
  font-size: var(--fs-micro);
  color: var(--c-muted);
  font-style: italic;
  margin: var(--s-3) 0 0;
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-line);
}

.manifesto__pivot {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  font-weight: 400;
  color: var(--c-ink-900);
  text-align: center;
  max-width: 80ch;
  margin: var(--s-8) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2.5rem);
  line-height: 1.3;
}
.manifesto__pivot-rule {
  height: 1px;
  background: var(--c-gold-700);
  flex: 1;
  max-width: 8rem;
}
.manifesto__pivot em {
  flex-shrink: 0;
}

/* ==========================================================================
   9. MÉTHODE — A.C.T.I.O.N. IA
   ========================================================================== */
.method {
  background: var(--c-ink-700);
  color: var(--c-paper);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.method::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 85% 10%, rgba(200, 168, 80, 0.08), transparent 60%),
    radial-gradient(ellipse 70% 60% at 10% 90%, rgba(44, 74, 110, 0.45), transparent 65%);
  z-index: -1;
}

.method .section-head {
  max-width: var(--container-max);
  margin-inline: auto;
}

.method__grid {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(200, 168, 80, 0.22);
  border: 1px solid rgba(200, 168, 80, 0.22);
}

.step {
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: var(--c-ink-800);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background var(--dur) var(--ease);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.step:hover {
  background: var(--c-ink-700);
}

.step__watermark {
  position: absolute;
  top: -0.15em;
  right: -0.05em;
  font-family: var(--ff-serif);
  font-size: clamp(10rem, 8rem + 6vw, 16rem);
  font-weight: 500;
  line-height: 0.85;
  color: var(--c-gold-700);
  opacity: 0.14;
  letter-spacing: -0.05em;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.step:hover .step__watermark {
  opacity: 0.22;
  transform: translateY(-4px);
}

.step__index {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-glacier);
  margin: 0 0 var(--s-3);
  opacity: 0.7;
}

.step__title {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--c-paper);
  margin: 0 0 var(--s-3);
  letter-spacing: -0.01em;
}
.step__letter {
  color: var(--c-gold-500);
  font-weight: 600;
}

.step__body {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  color: var(--c-glacier);
  line-height: 1.5;
  margin: 0;
}

.method__cta {
  max-width: var(--container-max);
  margin: var(--s-7) auto 0;
  text-align: left;
}

/* ==========================================================================
   10. OFFRE
   ========================================================================== */
.offers {
  background: var(--c-paper);
  color: var(--c-ink-400);
}

.offers .section-head,
.offers__grid,
.offers__cta {
  max-width: var(--container-max);
  margin-inline: auto;
}

.offers__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}

.offer {
  background: white;
  border: 1px solid var(--c-line);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
  transition:
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.offer:hover {
  border-color: var(--c-gold-700);
  transform: translateY(-2px);
}

.offer::before {
  /* coin or discret en haut à gauche au hover */
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 24px; height: 24px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  transition: border-color var(--dur) var(--ease);
  pointer-events: none;
}
.offer:hover::before {
  border-top-color: var(--c-gold-700);
  border-left-color: var(--c-gold-700);
}

.offer__head {
  border-bottom: 1px solid var(--c-line);
  padding-bottom: var(--s-3);
  margin: 0;
}

.offer__eyebrow {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 0.5rem;
}

.offer__title {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  color: var(--c-ink-900);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

.offer__pitch {
  font-size: var(--fs-body);
  color: var(--c-ink-400);
  line-height: 1.55;
  margin: 0;
  flex-grow: 1;
}
.offer__pitch em {
  color: var(--c-ink-900);
  font-style: italic;
}

.offer__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
}
.offer__meta > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.offer__meta dt {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.offer__meta dd {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--c-ink-900);
  margin: 0;
  line-height: 1.2;
}

.offer__price {
  font-family: var(--ff-serif) !important;
  font-weight: 500;
  font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem) !important;
  color: var(--c-gold-700) !important;
  letter-spacing: -0.01em;
  line-height: 1 !important;
}

.offer--complete {
  grid-column: 1 / -1;
  border-color: var(--c-gold-700);
  background: linear-gradient(180deg, rgba(200, 168, 80, 0.04) 0%, white 100%);
  position: relative;
}
.offer--complete::after {
  /* filet or épais en haut, signature du format intégral */
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 3px;
  background: var(--c-gold-700);
}
.offer--complete .offer__eyebrow {
  color: var(--c-gold-700);
}

.offers__cta {
  text-align: center;
}

/* ==========================================================================
   11. À PROPOS
   ========================================================================== */
.about {
  background: var(--c-paper);
  color: var(--c-ink-400);
  position: relative;
}
.about::before {
  /* filet or horizontal en haut de section, signature éditoriale */
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: clamp(4rem, 10vw, 8rem);
  height: 1px;
  background: var(--c-gold-700);
}

.about__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

.about__portrait {
  margin: 0;
  position: relative;
}
.about__portrait-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-ink-800);
}
.about__portrait-frame::before {
  /* encadrement : filets or aux quatre coins, discrets */
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(200, 168, 80, 0.55);
  z-index: 2;
  pointer-events: none;
}
.about__portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(0.08) contrast(1.02);
  transition: transform var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease);
}
.about__portrait:hover .about__portrait-frame img {
  transform: scale(1.02);
  filter: grayscale(0) contrast(1.04);
}

.about__caption {
  margin-top: var(--s-3);
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-muted);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.about__caption-line {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--c-gold-700);
}

.about__text {
  max-width: 56ch;
}
.about__text p {
  font-size: var(--fs-lede);
  line-height: 1.7;
  color: var(--c-ink-400);
  margin: 0 0 var(--s-4);
}
.about__text p:first-of-type {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  color: var(--c-ink-900);
  margin-bottom: var(--s-5);
}
.about__text em {
  font-style: italic;
  color: var(--c-ink-900);
}

.about__cta {
  margin-top: var(--s-5);
}

/* ==========================================================================
   12. DIAGNOSTIC — formulaire
   ========================================================================== */
.diagnostic {
  background: var(--c-ink-900);
  color: var(--c-glacier);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.diagnostic::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 90% 0%, rgba(200, 168, 80, 0.10), transparent 65%),
    radial-gradient(ellipse 60% 55% at 10% 100%, rgba(44, 74, 110, 0.35), transparent 65%);
  z-index: -1;
}

.diagnostic__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 1rem + 4vw, 6rem);
  align-items: start;
}

.diagnostic__intro .section-title {
  color: var(--c-paper);
}

.diagnostic__bullets {
  margin: var(--s-5) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid rgba(200, 168, 80, 0.28);
}
.diagnostic__bullets li {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  color: var(--c-glacier);
  line-height: 1.6;
  padding: var(--s-3) 0;
  border-bottom: 1px solid rgba(189, 212, 234, 0.1);
}
.diagnostic__bullets li:first-child {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--c-paper);
}

/* Cadre du formulaire */
.diagnostic__form {
  background: var(--c-ink-800);
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  position: relative;
  border-top: 2px solid var(--c-gold-700);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.form-row {
  display: grid;
  gap: var(--s-4);
}
.form-row--split {
  grid-template-columns: 1fr 1fr;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.form-field label,
.form-field legend {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-glacier);
  padding: 0;
}

.form-field__optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--c-muted);
  font-size: 0.85em;
  margin-left: 0.5em;
}

.form-field input[type='text'],
.form-field input[type='email'],
.form-field input[type='tel'],
.form-field select,
.form-field textarea {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  color: var(--c-paper);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(189, 212, 234, 0.28);
  padding: 0.75rem 0;
  width: 100%;
  transition: border-color var(--dur) var(--ease);
  border-radius: 0;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-bottom-color: var(--c-gold-500);
}

.form-field textarea {
  resize: vertical;
  min-height: 72px;
  font-family: var(--ff-sans);
  line-height: 1.6;
}

.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23C8A850' stroke-width='1.5'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 1.75rem;
}
.form-field select option {
  background: var(--c-ink-800);
  color: var(--c-paper);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--c-muted);
  font-style: italic;
}

/* Invalid après soumission */
.form-field input:user-invalid,
.form-field select:user-invalid,
.form-field textarea:user-invalid,
.form-field.is-invalid input,
.form-field.is-invalid select,
.form-field.is-invalid textarea {
  border-bottom-color: var(--c-error);
}
.form-field .error-message {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  color: var(--c-error);
  margin: 4px 0 0;
}

/* Civilité — radio */
.form-field--civility {
  border: 0;
  padding: 0;
  margin: 0;
}
.form-field--civility legend {
  margin-bottom: 0.5rem;
}
.form-field--civility label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: var(--s-4);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  color: var(--c-paper);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  cursor: pointer;
  padding: 0.5rem 0;
}
.form-field--civility input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(189, 212, 234, 0.55);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color var(--dur) var(--ease);
}
.form-field--civility input[type='radio']:checked {
  border-color: var(--c-gold-500);
}
.form-field--civility input[type='radio']:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--c-gold-500);
  border-radius: 50%;
}

.form-actions {
  margin-top: var(--s-3);
}

.form-rgpd {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  color: var(--c-muted);
  line-height: 1.5;
  margin: var(--s-3) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(189, 212, 234, 0.1);
}
.form-rgpd a {
  color: var(--c-glacier);
  border-bottom: 1px solid rgba(200, 168, 80, 0.4);
}
.form-rgpd a:hover { color: var(--c-gold-500); }

.form-confirmation {
  background: rgba(74, 122, 94, 0.18);
  border-left: 2px solid var(--c-success);
  padding: var(--s-4) var(--s-4);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  color: var(--c-paper);
}
.form-confirmation strong { color: var(--c-gold-500); }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--c-ink-900);
  color: var(--c-glacier);
  padding: var(--s-8) var(--container-gutter) var(--s-5);
  position: relative;
  border-top: 1px solid rgba(200, 168, 80, 0.28);
}

.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}

.site-footer__heading {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold-500);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid rgba(200, 168, 80, 0.28);
}

.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.site-footer__col a,
.site-footer__col address a {
  color: var(--c-glacier);
  font-size: var(--fs-small);
}
.site-footer__col a:hover,
.site-footer__col a:focus-visible {
  color: var(--c-gold-500);
}

.site-footer__col address {
  font-style: normal;
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--c-glacier);
}

.site-footer__logo {
  height: 40px;
  width: auto;
  margin-bottom: var(--s-4);
}

.site-footer__signature {
  font-family: var(--ff-serif);
  font-size: var(--fs-lede);
  font-style: italic;
  color: var(--c-paper);
  line-height: 1.4;
  max-width: 20ch;
  margin: 0;
}

.site-footer__legal {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  color: var(--c-muted);
  line-height: 1.6;
  margin: var(--s-4) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(189, 212, 234, 0.08);
}

/* ==========================================================================
   14. RÉVÉLATIONS SCROLL
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width: 1023px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  .site-footer__col--brand {
    grid-column: 1 / -1;
  }

  .offers__grid {
    grid-template-columns: 1fr;
  }
  .offer--complete { grid-column: auto; }

  .about__inner,
  .diagnostic__inner {
    grid-template-columns: 1fr;
  }
  .about__portrait {
    max-width: 26rem;
  }

  .manifesto__grid {
    grid-template-columns: 1fr;
  }
  .stat {
    border-right: 0;
    border-bottom: 1px solid var(--c-line);
  }
  .stat:last-child { border-bottom: 0; }

  .method__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  :root {
    --header-height: 68px;
    --section-pad-y: clamp(3.5rem, 2rem + 6vw, 6rem);
  }

  .site-nav {
    display: none;
  }
  .site-nav__toggle {
    display: flex;
  }

  .site-nav-mobile:not([hidden]) {
    display: block;
  }
  .site-nav-mobile a { font-size: 1.75rem; }

  .hero {
    min-height: 92vh;
  }
  .hero__meta {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
  }
  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__ctas .btn {
    width: 100%;
  }

  .method__grid {
    grid-template-columns: 1fr;
  }
  .step {
    min-height: auto;
  }

  .form-row--split {
    grid-template-columns: 1fr;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
  }
  .site-footer__col--brand { grid-column: auto; }

  .manifesto__pivot {
    flex-direction: column;
    gap: var(--s-3);
  }
  .manifesto__pivot-rule {
    width: 80px;
    max-width: none;
  }

  .offer__meta {
    grid-template-columns: 1fr;
  }
  .offer__meta > div + div {
    padding-top: var(--s-3);
    border-top: 1px solid var(--c-line);
  }
}

@media (min-width: 1440px) {
  .hero__headline {
    max-width: 22ch;
  }
}

/* ==========================================================================
   16. PAGES INTÉRIEURES (itération 2)
   Sous-sections :
     16.1. Nav — état page active
     16.2. Masthead générique (bloc d'introduction)
     16.3. Bouton variante ghost-dark
     16.4. Primitives prose
     16.5. Body en mode sombre (contact)
     16.6. Méthode — sommaire, étapes détaillées, décisions, clôture
     16.7. Offre — formats détaillés, clôture
     16.8. À propos — portrait, chapitres, convictions, clôture
     16.9. Contact — deux colonnes + coordonnées
     16.10. Pages légales — prose 42rem
     16.11. Responsive
   Tous ces composants héritent du système de design de l'itération 1.
   Aucun token existant n'est modifié.
   ========================================================================== */

/* --------------------------------------------------------------------------
   16.1. Nav — état actif (aria-current="page")
   -------------------------------------------------------------------------- */
.site-nav__list a[aria-current='page'] {
  color: var(--c-gold-500);
}
.site-nav__list a[aria-current='page']::after {
  right: 0;
  background: var(--c-gold-500);
}
.site-nav-mobile a[aria-current='page'] {
  color: var(--c-gold-500);
}
.site-footer__col a[aria-current='page'] {
  color: var(--c-gold-500);
}

/* --------------------------------------------------------------------------
   16.2. Masthead — bloc d'introduction des pages intérieures
   Sombre systématique (validé pour itération 2).
   -------------------------------------------------------------------------- */
.masthead {
  position: relative;
  isolation: isolate;
  background: var(--c-ink-900);
  color: var(--c-paper);
  padding: calc(var(--header-height) + clamp(3rem, 2rem + 4vw, 6rem))
           var(--container-gutter)
           clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  overflow: hidden;
}

.masthead__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 55% at 18% 22%, rgba(44, 74, 110, 0.5), transparent 65%),
    radial-gradient(ellipse 55% 45% at 88% 88%, rgba(200, 168, 80, 0.07), transparent 60%),
    linear-gradient(180deg, #0D1828 0%, #111E35 60%, #0F1A2F 100%);
  z-index: -2;
}

.masthead__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(189, 212, 234, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(189, 212, 234, 0.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 40%, transparent 100%);
  z-index: -1;
}

.masthead__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  position: relative;
}

.masthead__title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--c-paper);
  margin: 0 0 var(--s-5);
  max-width: 22ch;
}
.masthead__title em {
  font-style: italic;
  color: var(--c-gold-500);
  font-weight: 500;
}

.masthead__lede {
  font-family: var(--ff-serif);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.625rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-glacier);
  max-width: 52ch;
  margin: 0;
}
.masthead__lede em {
  font-style: italic;
  color: var(--c-glacier);
}

/* Prose annexe dans le masthead (page Offre) */
.masthead--with-intro .masthead__prose {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(200, 168, 80, 0.28);
  max-width: 58ch;
}
.masthead--with-intro .masthead__prose p {
  font-family: var(--ff-sans);
  font-size: var(--fs-lede);
  color: var(--c-glacier);
  line-height: 1.65;
  margin: 0;
}

/* Variante simplifiée pour les pages légales */
.masthead--simple {
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.masthead__title--simple {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  max-width: none;
}
.masthead__meta {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-glacier);
  margin: var(--s-4) 0 0;
}

/* --------------------------------------------------------------------------
   16.3. Bouton variante ghost-dark — pour fond clair
   -------------------------------------------------------------------------- */
.btn--ghost-dark {
  --_bg: transparent;
  --_fg: var(--c-ink-900);
  --_bd: rgba(17, 30, 53, 0.28);
}
.btn--ghost-dark:hover,
.btn--ghost-dark:focus-visible {
  --_bg: transparent;
  --_fg: var(--c-gold-700);
  --_bd: var(--c-gold-700);
}

/* --------------------------------------------------------------------------
   16.4. Primitives prose — paragraphes longs
   -------------------------------------------------------------------------- */
.prose p {
  font-family: var(--ff-sans);
  font-size: var(--fs-lede);
  color: var(--c-ink-400);
  line-height: 1.75;
  margin: 0 0 var(--s-4);
  max-width: 64ch;
}
.prose p:last-child { margin-bottom: 0; }
.prose em {
  font-style: italic;
  color: var(--c-ink-900);
}
.prose strong { color: var(--c-ink-900); }

/* Variante prose longue (à propos) — respiration accrue */
.prose--long p {
  font-size: clamp(1.125rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.8;
  margin-bottom: var(--s-5);
}

/* Prose sur fond sombre : couleur du corps et des accents */
.method-section--dark .prose p { color: var(--c-glacier); }
.method-section--dark .prose em,
.method-section--dark .prose strong { color: var(--c-paper); }

/* --------------------------------------------------------------------------
   16.5. Body mode sombre (page Contact)
   Empêche le flash blanc entre sections sur les pages 100% navy.
   -------------------------------------------------------------------------- */
.body--dark {
  background: var(--c-ink-900);
}

/* --------------------------------------------------------------------------
   16.6. MÉTHODE — layout deux colonnes
   -------------------------------------------------------------------------- */
.method-page {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap: clamp(2rem, 1.5rem + 2vw, 4rem);
  align-items: start;
}

/* Sommaire latéral */
.method-toc {
  position: sticky;
  top: calc(var(--header-height) + var(--s-5));
  align-self: start;
  padding: var(--s-5) 0;
  /* hairline right */
  border-right: 1px solid var(--c-line);
  padding-right: var(--s-4);
}

.method-toc__label {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-gold-700);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-gold-700);
  width: fit-content;
}

.method-toc__list {
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.method-toc__list a {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0 0.5rem 0.75rem;
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-ink-400);
  border-left: 2px solid transparent;
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
  line-height: 1.3;
}

.method-toc__num {
  font-family: var(--ff-serif);
  font-weight: 500;
  color: var(--c-gold-700);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  line-height: 1;
}
.method-toc__text { display: block; }

.method-toc__list a:hover,
.method-toc__list a:focus-visible {
  color: var(--c-ink-900);
  border-left-color: rgba(200, 168, 80, 0.35);
}

.method-toc__list a.is-active {
  color: var(--c-ink-900);
  border-left-color: var(--c-gold-700);
  font-weight: 500;
}
.method-toc__list a.is-active .method-toc__num {
  color: var(--c-gold-500);
}

/* Colonne de contenu */
.method-content {
  min-width: 0; /* permet aux sections full-bleed de ne pas overflow */
}

/* Section générique (utilisée pour toutes les étapes + principe + décisions) */
.method-section {
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(1rem, 0.5rem + 2vw, 2.5rem);
  position: relative;
  isolation: isolate;
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.method-section--light {
  background: var(--c-paper);
  color: var(--c-ink-400);
}
.method-section--dark {
  background: var(--c-ink-800);
  color: var(--c-glacier);
  overflow: hidden;
}

/* Étapes détaillées A-N */
.step-detail {
  position: relative;
}

.step-detail__watermark {
  position: absolute;
  top: -0.05em;
  right: -0.02em;
  font-family: var(--ff-serif);
  font-size: clamp(14rem, 10rem + 10vw, 22rem);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.05em;
  pointer-events: none;
  z-index: -1;
}
.method-section--dark .step-detail__watermark {
  color: var(--c-gold-700);
  opacity: 0.11;
}
.method-section--light .step-detail__watermark {
  color: var(--c-gold-700);
  opacity: 0.09;
}

.step-detail__head {
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  max-width: 42rem;
  position: relative;
}

.step-detail__letter {
  color: var(--c-gold-500);
  font-weight: 600;
}
.method-section--light .step-detail__letter {
  color: var(--c-gold-700);
}

.step-detail__subtitle {
  font-family: var(--ff-serif);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-style: italic;
  line-height: 1.35;
  margin: 0;
}
.method-section--light .step-detail__subtitle { color: var(--c-ink-400); }
.method-section--dark .step-detail__subtitle { color: var(--c-glacier); }

.step-detail__blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  max-width: 58rem;
}

.step-detail__block {
  padding: 0;
}
.step-detail__block h3 {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold-700);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-gold-700);
  width: fit-content;
}
.method-section--dark .step-detail__block h3 { color: var(--c-gold-500); border-bottom-color: var(--c-gold-500); }

.step-detail__block p {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  margin: 0;
}
.method-section--light .step-detail__block p { color: var(--c-ink-400); }
.method-section--dark .step-detail__block p { color: var(--c-glacier); }

/* Livrable — filet or 2px à gauche */
.step-detail__block--deliverable {
  padding-left: var(--s-4);
  border-left: 2px solid var(--c-gold-500);
}

/* Valeur ajoutée — Cormorant italique, éditorial */
.step-detail__block--value p {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.45;
}
.method-section--light .step-detail__block--value p { color: var(--c-ink-900); }
.method-section--dark .step-detail__block--value p { color: var(--c-paper); }

/* Exemple terrain BTP — fond discret, petit, full-width sous la grille */
.step-detail__example {
  grid-column: 1 / -1;
  margin-top: var(--s-3);
  padding: var(--s-4);
  border: 1px solid;
  border-color: var(--c-line);
  background: rgba(200, 168, 80, 0.04);
  position: relative;
}
.method-section--dark .step-detail__example {
  border-color: rgba(200, 168, 80, 0.2);
  background: rgba(44, 74, 110, 0.3);
}
.step-detail__example::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 14px; height: 1px;
  background: var(--c-gold-700);
}
.step-detail__example::after {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 1px; height: 14px;
  background: var(--c-gold-700);
}

.step-detail__example-label {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold-700);
  margin: 0 0 var(--s-2);
}
.step-detail__example p:not(.step-detail__example-label) {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  line-height: 1.55;
  margin: 0;
}
.method-section--light .step-detail__example p { color: var(--c-ink-400); }
.method-section--dark .step-detail__example p { color: var(--c-glacier); }

/* Section 8 — Cinq décisions structurantes */
.decisions {
  overflow: hidden;
}

.decisions__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3.5rem);
  max-width: 32rem;
}
.decisions__divider-rule {
  flex: 1;
  height: 1px;
  background: var(--c-gold-500);
}
.decisions__divider-mark {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  color: var(--c-gold-500);
  flex-shrink: 0;
}

.decisions__head {
  max-width: 42rem;
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

.decisions__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  background: rgba(200, 168, 80, 0.25);
  border: 1px solid rgba(200, 168, 80, 0.25);
}

.decision {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  background: var(--c-ink-800);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: background var(--dur) var(--ease);
}
.decision:hover { background: var(--c-ink-700); }

.decision__num {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: clamp(2rem, 1.5rem + 1vw, 2.75rem);
  color: var(--c-gold-500);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.decision__title {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  color: var(--c-paper);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.decision__body {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  color: var(--c-glacier);
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}
.decision__stake {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--c-gold-500);
  margin: 0;
  padding-top: var(--s-2);
  border-top: 1px solid rgba(200, 168, 80, 0.28);
}

/* Clôture méthode */
.method-closing {
  text-align: center;
  padding-block: clamp(4rem, 3rem + 4vw, 7rem);
}
.method-closing__quote {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 400;
  color: var(--c-ink-900);
  line-height: 1.3;
  max-width: 34ch;
  margin: 0 auto var(--s-6);
}
.method-closing__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
}

/* --------------------------------------------------------------------------
   16.7. OFFRE — formats détaillés pleine section
   -------------------------------------------------------------------------- */
.format-detail {
  padding: var(--section-pad-y) var(--container-gutter);
  position: relative;
  isolation: isolate;
}
.format-detail--light {
  background: var(--c-paper);
  color: var(--c-ink-400);
}
.format-detail--dark {
  background: var(--c-ink-800);
  color: var(--c-glacier);
  overflow: hidden;
}

.format-detail__inner {
  max-width: 68rem;
  margin-inline: auto;
}

.format-detail__head {
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-line);
}
.format-detail--dark .format-detail__head {
  border-bottom-color: rgba(200, 168, 80, 0.2);
}

.format-detail__title {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--c-ink-900);
  margin: 0 0 var(--s-3);
}
.format-detail__title--light { color: var(--c-paper); }

.format-detail__pitch {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  color: var(--c-gold-700);
  margin: 0;
  line-height: 1.35;
}
.format-detail__pitch--light { color: var(--c-gold-500); }

.format-detail__body {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.format-detail__block h3 {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold-700);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-gold-700);
  width: fit-content;
}
.format-detail--dark .format-detail__block h3 { color: var(--c-gold-500); border-bottom-color: var(--c-gold-500); }

.format-detail__block p {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  margin: 0 0 var(--s-3);
  max-width: 60ch;
}
.format-detail__block p:last-child { margin-bottom: 0; }
.format-detail--light .format-detail__block p { color: var(--c-ink-400); }
.format-detail--dark .format-detail__block p { color: var(--c-glacier); }

.format-detail__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 60ch;
}
.format-detail__list li {
  position: relative;
  padding-left: var(--s-4);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
}
.format-detail__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 14px;
  height: 1px;
  background: var(--c-gold-700);
}
.format-detail--light .format-detail__list li { color: var(--c-ink-400); }
.format-detail--light .format-detail__list li strong { color: var(--c-ink-900); }
.format-detail--dark .format-detail__list li { color: var(--c-glacier); }
.format-detail--dark .format-detail__list li strong { color: var(--c-paper); }
.format-detail--dark .format-detail__list li::before { background: var(--c-gold-500); }
.format-detail__list em { font-style: italic; color: var(--c-gold-700); }
.format-detail--dark .format-detail__list em { color: var(--c-gold-500); }

/* Modalités : grille compacte, séparée par hairlines */
.format-detail__modalities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4) var(--s-5);
  margin: var(--s-5) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}
.format-detail--dark .format-detail__modalities {
  border-top-color: rgba(200, 168, 80, 0.2);
}
.format-detail__modality-wide { grid-column: 1 / -1; }

.format-detail__modalities > div {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.format-detail__modalities dt {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.format-detail--dark .format-detail__modalities dt { color: var(--c-glacier); opacity: 0.7; }

.format-detail__modalities dd {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}
.format-detail--light .format-detail__modalities dd { color: var(--c-ink-900); }
.format-detail--dark .format-detail__modalities dd { color: var(--c-paper); }

.format-detail__price {
  font-family: var(--ff-serif) !important;
  font-weight: 500;
  font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem) !important;
  color: var(--c-gold-700) !important;
  letter-spacing: -0.01em;
  line-height: 1 !important;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.format-detail--dark .format-detail__price { color: var(--c-gold-500) !important; }
.format-detail__price-note {
  font-family: var(--ff-sans) !important;
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--c-muted);
  letter-spacing: 0;
}

/* Format 04 Mission complète : filet or 3px au sommet */
.format-detail--complete {
  position: relative;
}
.format-detail--complete::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c-gold-700);
  z-index: 2;
}

/* Clôture page Offre */
.offers-closing {
  padding: var(--section-pad-y) var(--container-gutter);
  background: var(--c-paper);
  text-align: center;
}
.offers-closing__inner {
  max-width: 42rem;
  margin-inline: auto;
}
.offers-closing .eyebrow {
  display: inline-flex;
  margin-bottom: var(--s-4);
}
.offers-closing__ctas {
  margin-top: var(--s-5);
  display: flex;
  justify-content: center;
  gap: var(--s-3);
}

/* --------------------------------------------------------------------------
   16.8. À PROPOS — portrait plein format + chapitres + convictions
   -------------------------------------------------------------------------- */
.about-portrait {
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) var(--container-gutter);
  background: var(--c-paper);
}
.about-portrait__figure {
  max-width: 52rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.about-portrait__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-ink-800);
  overflow: hidden;
}
.about-portrait__frame::before {
  /* filet or fin en bordure, 12px d'inset */
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(200, 168, 80, 0.5);
  z-index: 2;
  pointer-events: none;
}
.about-portrait__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(0.06) contrast(1.02);
}
.about-portrait__caption {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-muted);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: var(--s-2);
}
.about-portrait__caption-rule {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--c-gold-700);
  flex-shrink: 0;
}

/* Chapitres */
.about-chapter {
  padding: clamp(3rem, 2rem + 3.5vw, 5.5rem) var(--container-gutter);
  background: var(--c-paper);
  color: var(--c-ink-400);
}
.about-chapter + .about-chapter {
  padding-top: 0;
}
.about-chapter__inner {
  max-width: 52rem;
  margin-inline: auto;
}
.about-chapter__head {
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}
.about-chapter__head .section-title {
  max-width: none;
  margin-bottom: 0;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
}

/* Convictions (sombre, bascule visuelle forte) */
.convictions {
  position: relative;
  isolation: isolate;
  padding: var(--section-pad-y) var(--container-gutter);
  background: var(--c-ink-900);
  color: var(--c-glacier);
  overflow: hidden;
}
.convictions__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(44, 74, 110, 0.55), transparent 65%),
    radial-gradient(ellipse 55% 45% at 85% 90%, rgba(200, 168, 80, 0.08), transparent 60%),
    linear-gradient(180deg, #0D1828 0%, #111E35 100%);
  z-index: -1;
}

.convictions__inner {
  max-width: 60rem;
  margin-inline: auto;
}
.convictions__head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.convictions__head .section-title {
  max-width: 22ch;
  margin: 0 auto;
}
.convictions__head .eyebrow {
  justify-content: center;
  margin-inline: auto;
}

.convictions__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1.5rem + 1.5vw, 3.5rem);
}

.conviction {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  align-items: baseline;
  padding-bottom: clamp(2rem, 1.5rem + 1.5vw, 3.5rem);
  border-bottom: 1px solid rgba(200, 168, 80, 0.25);
}
.convictions__list li:last-child { border-bottom: 0; padding-bottom: 0; }

.conviction__num {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 2vw, 3.25rem);
  color: var(--c-gold-500);
  line-height: 0.9;
  letter-spacing: -0.02em;
  opacity: 0.9;
}

.conviction__quote {
  margin: 0;
  padding: 0;
}
.conviction__quote p {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2.125rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--c-paper);
  margin: 0;
}

/* Clôture à propos */
.about-closing {
  padding: clamp(4rem, 3rem + 4vw, 7rem) var(--container-gutter);
  background: var(--c-paper);
  text-align: center;
}
.about-closing__inner {
  max-width: 42rem;
  margin-inline: auto;
}
.about-closing__ctas {
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.about-closing__signature {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--c-ink-400);
  margin: 0;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   16.9. CONTACT — deux colonnes sur fond navy
   -------------------------------------------------------------------------- */
.contact-body {
  padding: var(--section-pad-y) var(--container-gutter);
  background: var(--c-ink-900);
  color: var(--c-glacier);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.contact-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 92% 5%, rgba(200, 168, 80, 0.08), transparent 60%),
    radial-gradient(ellipse 55% 50% at 8% 95%, rgba(44, 74, 110, 0.35), transparent 65%);
  z-index: -1;
}

.contact-body__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 1.5rem + 3vw, 5rem);
  align-items: start;
}

/* Formulaire (même style que diagnostic__form) */
.contact-form-wrap__head,
.contact-direct__head {
  margin-bottom: var(--s-4);
}

/* Coordonnées directes */
.contact-direct {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  position: sticky;
  top: calc(var(--header-height) + var(--s-5));
}

.contact-direct__block {
  padding: var(--s-5);
  background: var(--c-ink-800);
  border-top: 2px solid var(--c-gold-700);
}

.contact-direct__name {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  color: var(--c-paper);
  margin: 0 0 var(--s-2);
  letter-spacing: -0.01em;
}
.contact-direct__tagline {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--c-glacier);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid rgba(200, 168, 80, 0.28);
}

.contact-direct__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
}
.contact-direct__list > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.contact-direct__list dt {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold-500);
}
.contact-direct__list dd {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  color: var(--c-paper);
  margin: 0;
  line-height: 1.4;
}
.contact-direct__list a {
  color: var(--c-paper);
  border-bottom: 1px solid rgba(200, 168, 80, 0.35);
  padding-bottom: 1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.contact-direct__list a:hover,
.contact-direct__list a:focus-visible {
  color: var(--c-gold-500);
  border-bottom-color: var(--c-gold-500);
}

/* Bloc presse/interventions — encadré or */
.contact-press {
  padding: var(--s-5);
  border: 1px solid var(--c-gold-700);
  background: rgba(200, 168, 80, 0.04);
}
.contact-press .eyebrow {
  margin-bottom: var(--s-3);
}
.contact-press p:not(.eyebrow) {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-glacier);
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   16.10. PAGES LÉGALES — prose 42rem
   -------------------------------------------------------------------------- */
.legal-prose {
  padding: clamp(3rem, 2.5rem + 3vw, 5.5rem) var(--container-gutter) var(--section-pad-y);
  background: var(--c-paper);
  color: var(--c-ink-400);
}

.legal-prose__inner {
  max-width: var(--container-prose);
  margin-inline: auto;
}

.legal-section {
  padding-block: clamp(1.5rem, 1rem + 1vw, 2.25rem);
}
.legal-section:first-child { padding-top: 0; }
.legal-section:last-child { padding-bottom: 0; }

.legal-section__title {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  color: var(--c-ink-900);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-4);
}

.legal-section p,
.legal-section .legal-list {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  color: var(--c-ink-400);
  line-height: 1.75;
  margin: 0 0 var(--s-3);
}
.legal-section p:last-child,
.legal-section .legal-list:last-child { margin-bottom: 0; }

.legal-section em {
  font-style: italic;
  color: var(--c-ink-900);
}
.legal-section strong {
  font-weight: 600;
  color: var(--c-ink-900);
}
.legal-section code {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: var(--c-ink-900);
  background: rgba(17, 30, 53, 0.05);
  padding: 0.05em 0.4em;
  border-radius: 2px;
}
.legal-section a {
  color: var(--c-ink-900);
  border-bottom: 1px solid var(--c-gold-700);
  padding-bottom: 1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.legal-section a:hover,
.legal-section a:focus-visible {
  color: var(--c-gold-700);
  border-bottom-color: var(--c-gold-500);
}
.legal-section a code {
  color: inherit;
  background: transparent;
  padding: 0;
}

.legal-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.legal-list li {
  position: relative;
  padding-left: var(--s-4);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-ink-400);
}
.legal-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 14px;
  height: 1px;
  background: var(--c-gold-700);
}

.legal-rule {
  border: 0;
  height: 1px;
  background: var(--c-gold-700);
  margin: 0 auto;
  width: 48px;
}

.legal-intro {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  color: var(--c-ink-900);
  line-height: 1.5;
  margin: 0;
}
.legal-section--intro { padding-top: 0; }

/* --------------------------------------------------------------------------
   16.11. RESPONSIVE — pages intérieures
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .step-detail__blocks {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1023px) {
  /* Méthode — sommaire bascule en horizontal au-dessus du contenu */
  .method-page {
    grid-template-columns: 1fr;
    padding-inline: 0;
  }
  .method-toc {
    position: static;
    padding: var(--s-5) var(--container-gutter);
    border-right: 0;
    border-bottom: 1px solid var(--c-line);
    background: var(--c-paper);
  }
  .method-toc__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
  }
  .method-toc__list a {
    padding: 0.5rem 0.75rem;
    grid-template-columns: auto auto;
    border-left: 0;
    border-bottom: 2px solid transparent;
  }
  .method-toc__list a.is-active {
    border-left: 0;
    border-bottom-color: var(--c-gold-700);
  }
  .method-toc__list a:hover,
  .method-toc__list a:focus-visible {
    border-left: 0;
    border-bottom-color: rgba(200, 168, 80, 0.35);
  }
  .method-section {
    padding-inline: var(--container-gutter);
  }

  /* Décisions — passage en une colonne */
  .decisions__grid {
    grid-template-columns: 1fr;
  }

  /* Offre — grille modalités s'empile */
  .format-detail__modalities {
    grid-template-columns: 1fr;
  }
  .format-detail__modality-wide { grid-column: auto; }

  /* Contact — deux colonnes s'empilent */
  .contact-body__inner {
    grid-template-columns: 1fr;
  }
  .contact-direct {
    position: static;
  }

  /* About — portrait frame ratio plus vertical sur tablette */
  .about-portrait__frame {
    aspect-ratio: 4 / 4;
  }
}

@media (max-width: 767px) {
  .masthead {
    padding-top: calc(var(--header-height) + var(--s-6));
  }

  .step-detail__watermark {
    font-size: clamp(10rem, 8rem + 10vw, 14rem);
    opacity: 0.07 !important;
  }

  .conviction {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    text-align: left;
  }
  .conviction__num { font-size: 2.5rem; }

  .about-portrait__frame {
    aspect-ratio: 3 / 4;
  }

  .method-closing__ctas,
  .offers-closing__ctas,
  .about-closing__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .method-closing__ctas .btn,
  .offers-closing__ctas .btn,
  .about-closing__ctas .btn {
    width: 100%;
  }

  .legal-prose {
    padding-inline: var(--container-gutter);
  }
}

/* ==========================================================================
   17. CORRECTIF v2.1 — Format 04 / Format 05 + transitions
   Ajouts strictement nécessaires au correctif brief v2.1 :
     17.1. Bloc « Ce qui n'est pas inclus » (filet or pointillé 1 px gauche)
     17.2. Bloc de transition éditoriale avant le Format 05
     17.3. Phrase de transition Cormorant italique sur index.html (aperçu offre)
     17.4. Phrase éditoriale de clôture sur methode.html (lien vers format 05)
   Aucun nouveau token, aucun composant existant modifié.
   ========================================================================== */

/* 17.1. Bloc « Ce qui n'est pas inclus »
   Filet or gauche 1 px pointillé — convention : plein = affirmation,
   pointillé = limite. Hérite du langage des blocs existants sans teinte
   de fond ni autre distinction visuelle. */
.format-detail__block--exclusion {
  padding-left: var(--s-4);
  border-left: 1px dashed var(--c-gold-700);
}
.format-detail--dark .format-detail__block--exclusion {
  border-left-color: var(--c-gold-500);
}

/* 17.2. Intermezzo éditorial avant le Format 05
   Fond clair identique au Format 05 ; césure signalée par filets or
   horizontaux 1 px au-dessus et en-dessous (bordures de section). */
.format-transition {
  padding: clamp(3rem, 2rem + 3vw, 5rem) var(--container-gutter);
  background: var(--c-paper);
  text-align: center;
  border-top: 1px solid var(--c-gold-700);
  border-bottom: 1px solid var(--c-gold-700);
}
.format-transition__inner {
  max-width: 56rem;
  margin-inline: auto;
}
.format-transition__title {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--c-ink-900);
  margin: 0 0 var(--s-4);
}
.format-transition__body {
  font-family: var(--ff-sans);
  font-size: var(--fs-lede);
  line-height: 1.7;
  color: var(--c-ink-400);
  max-width: 60ch;
  margin: 0 auto;
}

/* 17.3. Phrase de transition dans l'aperçu offre de index.html
   Cormorant italique centrée sur fond clair, teinte éditoriale sobre. */
.offers__transition-note {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--c-muted);
  text-align: center;
  max-width: 60ch;
  margin: clamp(2rem, 1.5rem + 1vw, 3rem) auto var(--s-5);
}

/* 17.4. Phrase éditoriale sur la clôture de methode.html
   Montserrat corps, muted, centrée, entre la citation italique et les CTA.
   Le lien or vers offre.html#format-05 hérite du vocabulaire des liens
   éditoriaux (bordure or fine). */
.method-closing__note {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--c-muted);
  max-width: 58ch;
  margin: 0 auto var(--s-6);
}
.method-closing__note a {
  color: var(--c-ink-900);
  border-bottom: 1px solid var(--c-gold-700);
  padding-bottom: 1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.method-closing__note a:hover,
.method-closing__note a:focus-visible {
  color: var(--c-gold-700);
  border-bottom-color: var(--c-gold-500);
}

/* ==========================================================================
   18. CORRECTIF v2.4 — Logo uniforme sur les 7 pages
   --------------------------------------------------------------------------
   Comportement unifié (brief v2.4) : logo d'en-tête à 56 px à partir du seuil
   desktop ≥1024 px, 36 px en-dessous (règle de base ligne 376 inchangée).
   Plus de distinction home / pages intérieures : toutes les pages référencent
   logo-sombre.png et partagent la même hauteur responsive.
   La classe body.is-home sur index.html devient sans effet (conservée pour
   ne pas toucher à la structure HTML, cf. brief v2.4 §3.1).
   ========================================================================== */
@media (min-width: 1024px) {
  .site-header__logo {
    height: 56px;
  }
}

/* ==========================================================================
   19. ITÉRATION v2.5 — Pages /merci.html et /merci-contact.html
   --------------------------------------------------------------------------
   Deux modificatrices ajoutées à la prose légale existante (section 16.10).
   Aucun nouveau token, pas de nouveau composant.
   19.1. legal-section--reserve — bloc de réserve technique signalé par un
         filet or gauche pointillé. Hérite de la convention posée en v2.1
         (section 17.1 : plein = affirmation, pointillé = limite).
   19.2. legal-section--outro — bloc de clôture centré, Montserrat discrète,
         pour les liens de retour des pages merci.
   19.3. legal-section__cta — paragraphe porteur du bouton de téléchargement,
         espacement supérieur pour détacher l'action du corps de texte.
   ========================================================================== */
.legal-section--reserve {
  padding-left: var(--s-4);
  border-left: 1px dashed var(--c-gold-700);
}

.legal-section--outro {
  text-align: center;
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.legal-section__cta {
  margin-top: var(--s-4);
}

/* ==========================================================================
   20. ITÉRATION v2.8 — Décalage d'ancre sur les fiches Format de offre.html
   --------------------------------------------------------------------------
   Les cinq fiches (.format-detail) portent désormais une ancre (id=format-01
   à format-05). Elles doivent bénéficier du même décalage sous le sticky
   header que les sections de methode.html (section 10 du CSS). Sans cette
   règle, l'arrivée sur une ancre laisse le titre partiellement masqué par
   l'en-tête. Corrige également le défaut silencieux présent depuis v2.1 sur
   l'ancre #format-05. Aucun nouveau token — réutilise --header-height.
   ========================================================================== */
.format-detail {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

/* ==========================================================================
   21. CHANTIER C.02.01 — Regards (liste + article) & section Réseau
   --------------------------------------------------------------------------
   Sous-sections :
     21.1. Regards — page liste (cartes d'articles)
     21.2. Regards — gabarit d'article (lecture, figures, citations,
           encart auteur, sources, retour)
     21.3. Réseau — section partenaires dans offre.html (fond sombre)
   Hérite strictement du système de design existant (tokens --c-*, --ff-*,
   --s-*, composants .masthead / .eyebrow / .link-arrow / .btn /
   .format-detail__list). Aucun token existant modifié, aucun composant
   réécrit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   21.1. REGARDS — page liste
   -------------------------------------------------------------------------- */
.regards-list {
  padding: var(--section-pad-y) var(--container-gutter);
  background: var(--c-paper);
  color: var(--c-ink-400);
}
.regards-list__inner {
  max-width: var(--container-max);
  margin-inline: auto;
}

.regards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}

/* Carte d'article — reprend le vocabulaire de .offer (cadre, coin or au hover) */
.regards-card {
  background: white;
  border: 1px solid var(--c-line);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: relative;
  transition:
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.regards-card:hover {
  border-color: var(--c-gold-700);
  transform: translateY(-2px);
}
.regards-card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 24px; height: 24px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  transition: border-color var(--dur) var(--ease);
  pointer-events: none;
}
.regards-card:hover::before {
  border-top-color: var(--c-gold-700);
  border-left-color: var(--c-gold-700);
}

/* Vignette de présentation — visuel complet de l'article, sans rognage
   (cadre régulier 3:2, contain, fond sombre cohérent avec les visuels). */
.regards-card__thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--c-ink-900);
  border: 1px solid var(--c-line);
  display: block;
}

.regards-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--c-line);
  padding-bottom: var(--s-3);
}
/* La catégorie réutilise .eyebrow (placée dans le HTML) */
.regards-card__date {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.regards-card__title {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  color: var(--c-ink-900);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.regards-card__title a {
  color: inherit;
}
.regards-card__title a:hover,
.regards-card__title a:focus-visible {
  color: var(--c-gold-700);
}
/* Toute la carte cliquable via l'ancre du titre, sans piéger le focus */
.regards-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.regards-card__chapo {
  font-size: var(--fs-body);
  color: var(--c-ink-400);
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}

.regards-card__more {
  margin-top: var(--s-2);
}

/* --------------------------------------------------------------------------
   21.2. REGARDS — gabarit d'article
   -------------------------------------------------------------------------- */
/* Métadonnées dans le masthead de l'article (date, auteur) */
.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(200, 168, 80, 0.28);
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--c-glacier);
}
.article-meta__sep {
  width: 3px; height: 3px;
  background: var(--c-gold-700);
  border-radius: 50%;
  display: inline-block;
}
.article-meta__author { color: var(--c-paper); }

/* Corps de lecture */
.article {
  padding: clamp(3rem, 2.5rem + 3vw, 5.5rem) var(--container-gutter) var(--section-pad-y);
  background: var(--c-paper);
  color: var(--c-ink-400);
}
.article__inner {
  max-width: 44rem;
  margin-inline: auto;
}

/* Chapô d'intro — Cormorant italique, registre éditorial */
.article__lede {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  line-height: 1.45;
  color: var(--c-ink-900);
  margin: 0 0 var(--s-5);
}

.article__body p {
  font-family: var(--ff-sans);
  font-size: var(--fs-lede);
  color: var(--c-ink-400);
  line-height: 1.75;
  margin: 0 0 var(--s-4);
}
.article__body p strong { color: var(--c-ink-900); }
.article__body em { font-style: italic; color: var(--c-ink-900); }
.article__body a {
  color: var(--c-ink-900);
  border-bottom: 1px solid var(--c-gold-700);
  padding-bottom: 1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.article__body a:hover,
.article__body a:focus-visible {
  color: var(--c-gold-700);
  border-bottom-color: var(--c-gold-500);
}

/* Intertitres */
.article__body h2 {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  color: var(--c-ink-900);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: clamp(2.5rem, 2rem + 2vw, 3.75rem) 0 var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
}

/* Listes du corps — reprend le filet or de .format-detail__list */
.article__body ul,
.article__body ol {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.article__body ul li {
  position: relative;
  padding-left: var(--s-4);
  font-family: var(--ff-sans);
  font-size: var(--fs-lede);
  line-height: 1.7;
  color: var(--c-ink-400);
}
.article__body ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.8em;
  width: 14px;
  height: 1px;
  background: var(--c-gold-700);
}
/* Liste ordonnée — numéros or en Cormorant (questions structurantes) */
.article__body ol {
  counter-reset: art-ol;
  gap: var(--s-4);
}
.article__body ol li {
  counter-increment: art-ol;
  position: relative;
  padding-left: 2.75rem;
  font-family: var(--ff-sans);
  font-size: var(--fs-lede);
  line-height: 1.7;
  color: var(--c-ink-400);
}
.article__body ol li::before {
  content: counter(art-ol);
  position: absolute;
  left: 0; top: 0;
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-gold-700);
}
.article__body ol li strong,
.article__body ol li em { color: var(--c-ink-900); }

/* Citations courtes (Naval Ravikant, Satya Nadella) — vérifiables */
.article__quote {
  margin: var(--s-5) 0;
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  border-left: 2px solid var(--c-gold-500);
}
.article__quote p {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  line-height: 1.3;
  color: var(--c-ink-900);
  margin: 0 0 var(--s-2);
}
.article__quote cite {
  font-family: var(--ff-sans);
  font-style: normal;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--c-muted);
}

/* Encadré de mise à jour daté (rebond d'actualité postérieur à la publication) */
.article__update {
  margin: 0 0 clamp(2rem, 1.5rem + 1.5vw, 3rem);
  padding: var(--s-5);
  background: rgba(17, 30, 53, 0.04);
  border-top: 2px solid var(--c-gold-500);
}
.article__update-label {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gold-700);
  margin: 0 0 var(--s-2);
}
.article__update p {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--c-ink-900);
  margin: 0 0 var(--s-2);
}
.article__update p:last-child { margin-bottom: 0; }
.article__update a {
  color: var(--c-gold-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article__update a:hover,
.article__update a:focus-visible { color: var(--c-ink-900); }

/* Figures (visuels d'article) */
.article__figure {
  margin: clamp(2rem, 1.5rem + 1.5vw, 3rem) 0;
}
.article__figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--c-line);
}
.article__figure figcaption {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  color: var(--c-muted);
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.article__figure figcaption::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--c-gold-700);
  flex-shrink: 0;
}

/* Encart « À propos de l'auteur » — filet or plein gauche (affirmation) */
.article__author {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding: var(--s-5);
  background: rgba(200, 168, 80, 0.04);
  border-left: 2px solid var(--c-gold-700);
}
.article__author h2 {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold-700);
  margin: 0 0 var(--s-3);
}
.article__author p {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-ink-400);
  margin: 0;
}

/* Bloc de signature (tribune) */
.article__signature {
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-gold-700);
}
.article__signature p {
  font-family: var(--ff-serif);
  font-size: var(--fs-lede);
  color: var(--c-ink-900);
  margin: 0;
  line-height: 1.4;
}
.article__signature .article__signature-name {
  font-style: italic;
  font-weight: 500;
}
.article__signature .article__signature-note {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-muted);
  margin-top: var(--s-1);
}

/* Sources */
.article__sources {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
}
.article__sources h2 {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold-700);
  margin: 0 0 var(--s-4);
  border: 0;
  padding: 0;
}
.article__sources ol,
.article__sources ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.article__sources li {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-muted);
  padding-left: var(--s-4);
  position: relative;
}
.article__sources li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 10px; height: 1px;
  background: var(--c-gold-700);
}
.article__sources a {
  color: var(--c-ink-400);
  border-bottom: 1px solid rgba(200, 168, 80, 0.45);
  word-break: break-word;
}
.article__sources a:hover,
.article__sources a:focus-visible {
  color: var(--c-gold-700);
}

/* Retour vers la liste */
.article__back {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

/* --------------------------------------------------------------------------
   21.3. RÉSEAU — section partenaires dans offre.html (fond sombre)
   Insérée entre #format-05 (clair) et .offers-closing (clair) : le fond
   sombre crée la respiration sans composant supplémentaire (arbitrage C4).
   -------------------------------------------------------------------------- */
.network {
  padding: var(--section-pad-y) var(--container-gutter);
  background: var(--c-ink-900);
  color: var(--c-glacier);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.network::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 88% 8%, rgba(200, 168, 80, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 55% at 10% 95%, rgba(44, 74, 110, 0.4), transparent 65%);
  z-index: -1;
}
.network__inner {
  max-width: 68rem;
  margin-inline: auto;
}
.network__head {
  max-width: 60ch;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.network__lede {
  font-family: var(--ff-sans);
  font-size: var(--fs-lede);
  line-height: 1.7;
  color: var(--c-glacier);
  margin: 0;
}
.network__lede strong { color: var(--c-paper); }

.network__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

.network-card {
  background: var(--c-ink-800);
  border-top: 2px solid var(--c-gold-700);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
/* Cartouche clair uniforme : rend les trois logos (clairs et sombres) lisibles
   et homogènes sur le fond sombre — variante V1 validée (additif 02). */
.network-card__plate {
  background: #fff;
  border-radius: 2px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3) var(--s-4);
}
.network-card__plate img {
  max-height: 70px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}
.network-card__name {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  color: var(--c-paper);
  letter-spacing: -0.01em;
  margin: 0;
}
.network-card__text {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-glacier);
  margin: 0;
  flex-grow: 1;
}
.network-card__role {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-glacier);
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(200, 168, 80, 0.28);
}
.network-card__link {
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   21.4. Responsive — Regards & Réseau
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .regards-grid,
  .network__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   REGARDS — navigation par pilier, encart dossier, état vide
   (chantier C.03 — ossature éditoriale)
   ============================================================ */
.regards-piliers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
}
.regards-piliers li::before { content: none; }
.regards-piliers__item a {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--c-ink-400);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.regards-piliers__item a:hover,
.regards-piliers__item a:focus-visible {
  color: var(--c-ink-900);
  border-color: var(--c-gold-700);
  background: rgba(200, 168, 80, 0.06);
}
.regards-piliers__item a[aria-current="page"] {
  color: var(--c-ink-900);
  border-color: var(--c-gold-700);
  background: rgba(200, 168, 80, 0.10);
}

.dossier-callout {
  display: block;
  text-decoration: none;
  padding: var(--s-5);
  margin: 0 0 var(--s-7);
  background: var(--c-ink-900);
  border: 1px solid var(--c-ink-700);
  border-left: 3px solid var(--c-gold-700);
  transition: border-left-color var(--dur) var(--ease);
}
.dossier-callout:hover,
.dossier-callout:focus-visible { border-left-color: var(--c-gold-500); }
.dossier-callout__title {
  font-family: var(--ff-serif);
  font-size: var(--fs-h3);
  color: var(--c-paper);
  margin: var(--s-2) 0 var(--s-3);
  line-height: 1.15;
}
.dossier-callout__desc {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-glacier);
  line-height: 1.65;
  margin: 0 0 var(--s-3);
  max-width: 52ch;
}

.regards-empty {
  font-family: var(--ff-serif);
  font-size: var(--fs-lede);
  font-style: italic;
  color: var(--c-muted);
  padding: var(--s-6) 0 var(--s-7);
  margin: 0;
  border-top: 1px solid var(--c-line);
}

/* Navigation inter-piliers en bas de page de pilier */
.regards-siblings {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}
.regards-siblings__heading {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 var(--s-3);
}

/* ============================================================
   Prompthèque — référentiel de prompts curés
   ============================================================ */
.promptheque {
  padding: clamp(2.5rem, 2rem + 3vw, 5rem) 0;
}
.promptheque__inner {
  width: min(1120px, 92vw);
  margin: 0 auto;
}

/* Accès au guide depuis la Prompthèque */
.promptheque__guide {
  margin: 0 0 var(--s-4);
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
}

/* Blocs d'exemple de prompt dans les pages-guides */
.example-prompt {
  font-family: var(--ff-mono, 'DejaVu Sans Mono', ui-monospace, monospace);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--c-ink-900);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-gold-500);
  border-radius: 2px;
  padding: 0.9rem 1rem;
  margin: 0.4rem 0 var(--s-4);
  white-space: pre-wrap;
}

/* ============================================================
   Prompthèque — barre latérale collante, guides, modal
   ============================================================ */

/* Guides mis en avant (cartes) */
.promptheque__guides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.guide-card {
  display: block;
  padding: var(--s-4);
  background: var(--c-ink-900);
  text-decoration: none;
  border-left: 3px solid var(--c-gold-500);
  transition: transform .15s ease, background .15s ease;
}
.guide-card:hover { background: #16233d; transform: translateY(-2px); }
.guide-card__eyebrow {
  display: block;
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold-500);
  margin: 0 0 0.4rem;
}
.guide-card__title {
  display: block;
  font-family: var(--ff-serif);
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--c-paper);
  margin: 0 0 0.5rem;
}
.guide-card__more {
  display: block;
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-gold-500);
}

/* Layout deux colonnes : barre latérale + contenu */
.promptheque__layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap: clamp(2rem, 1.5rem + 2vw, 4rem);
  align-items: start;
}
.promptheque__content { min-width: 0; }

/* Barre latérale collante (catégories) */
.promptheque__sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--s-5));
  align-self: start;
  border-right: 1px solid var(--c-line);
  padding-right: var(--s-4);
  max-height: calc(100vh - var(--header-height) - var(--s-5));
  overflow-y: auto;
}
.promptheque__sidebar-label {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-gold-700);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-gold-700);
  width: fit-content;
}
.promptheque__cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.promptheque__cat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  padding: 0.4rem 0.5rem 0.4rem 0.75rem;
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.promptheque__cat:hover { color: var(--c-ink-900); border-left-color: rgba(200, 168, 80, 0.35); }
.promptheque__cat.is-active {
  color: var(--c-ink-900);
  font-weight: 600;
  border-left-color: var(--c-gold-700);
  background: rgba(200, 168, 80, 0.06);
}
.promptheque__cat-count { color: var(--c-muted); font-size: var(--fs-micro); flex-shrink: 0; }
.promptheque__cat.is-active .promptheque__cat-count { color: var(--c-gold-700); }

/* Intitulés de groupe (niveau intermédiaire, non cliquable) */
.promptheque__cat-group {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-gold-700);
  margin: var(--s-4) 0 0.35rem;
  padding-left: 0.75rem;
}

/* ============================================================
   Regards (hub) — barre latérale de classification
   ============================================================ */
.regards-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap: clamp(2rem, 1.5rem + 2vw, 4rem);
  align-items: start;
}
.regards-content { min-width: 0; }
.regards-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--s-5));
  align-self: start;
  border-right: 1px solid var(--c-line);
  padding-right: var(--s-4);
  max-height: calc(100vh - var(--header-height) - var(--s-5));
  overflow-y: auto;
}
.regards-sidebar__group {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-gold-700);
  margin: var(--s-4) 0 0.35rem;
  padding-left: 0.75rem;
}
.regards-sidebar__group:first-child { margin-top: 0; }
.regards-sidebar__list {
  list-style: none;
  margin: 0 0 var(--s-2);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.regards-sidebar__list a {
  display: block;
  padding: 0.4rem 0.5rem 0.4rem 0.75rem;
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--c-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.regards-sidebar__list a:hover,
.regards-sidebar__list a:focus-visible {
  color: var(--c-ink-900);
  border-left-color: rgba(200, 168, 80, 0.35);
}
.regards-sidebar__list a[aria-current="page"] {
  color: var(--c-ink-900);
  font-weight: 600;
  border-left-color: var(--c-gold-700);
  background: rgba(200, 168, 80, 0.06);
}

/* Mention discrète de renvoi entre un article et sa version « En clair » */
.article__companion {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-muted);
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-3);
  margin: var(--s-5) 0 0;
}
.article__companion a {
  color: var(--c-gold-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article__companion a:hover { color: var(--c-ink-900); }

/* Page rubrique Vidéos */
.video-entry {
  margin-bottom: clamp(2.5rem, 2rem + 3vw, 4rem);
}
.video-entry__title {
  font-family: var(--ff-serif);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
  color: var(--c-ink-900);
  margin: var(--s-3) 0 0.4rem;
}
.video-entry__desc {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-muted);
  margin: 0;
}
.video-entry__desc a { color: var(--c-gold-700); }

/* Article inséré dans la mise en page à barre latérale : le conteneur
   .regards-list fournit déjà fond et gouttière, on neutralise ceux de .article */
.article--in-nav {
  padding: 0;
  background: transparent;
}

@media (max-width: 900px) {
  .regards-layout { grid-template-columns: 1fr; }
  .regards-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--c-line);
    padding-right: 0;
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-4);
  }
}

/* Aperçu de prompt : cliquable pour agrandir */
.prompt-card__prompt { cursor: zoom-in; overflow: hidden; }
.prompt-card__prompt:hover { border-color: var(--c-gold-700); }
.prompt-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--s-3);
}
.prompt-card__enlarge {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 2px;
  padding: 0.5em 1em;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.prompt-card__enlarge:hover { color: var(--c-ink-900); border-color: var(--c-gold-700); }

/* Modal « grand format » */
.prompt-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 2vw, 2.5rem);
  background: rgba(17, 30, 53, 0.62);
}
.prompt-modal[hidden] { display: none; }
.prompt-modal__panel {
  background: #fff;
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--c-gold-500);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.prompt-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--s-4) var(--s-5) 0;
}
.prompt-modal__title {
  font-family: var(--ff-serif);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.15;
  color: var(--c-ink-900);
  margin: 0;
}
.prompt-modal__close {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  width: 2.2rem; height: 2.2rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--c-ink-900);
  cursor: pointer;
}
.prompt-modal__close:hover { border-color: var(--c-gold-700); color: var(--c-gold-700); }
.prompt-modal__cat {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-gold-700);
  padding: 0 var(--s-5);
  margin: 0.4rem 0 0;
}
.prompt-modal__body {
  padding: var(--s-4) var(--s-5) var(--s-5);
  overflow-y: auto;
}
.prompt-modal__prompt {
  font-family: var(--ff-mono, 'DejaVu Sans Mono', ui-monospace, monospace);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--c-ink-900);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  padding: var(--s-4);
  margin: 0 0 var(--s-4);
  white-space: pre-wrap;
}
.prompt-modal__copy {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-ink-900);
  background: transparent;
  border: 1px solid var(--c-gold-700);
  border-radius: 2px;
  padding: 0.6em 1.2em;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.prompt-modal__copy:hover { background: var(--c-gold-500); border-color: var(--c-gold-500); }
.prompt-modal__copy.is-copied { background: var(--c-ink-900); color: #fff; border-color: var(--c-ink-900); }

/* Responsive : barre latérale au-dessus du contenu */
@media (max-width: 900px) {
  .promptheque__layout { grid-template-columns: 1fr; }
  .promptheque__sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--c-line);
    padding-right: 0;
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-4);
  }
  .promptheque__cats { flex-direction: row; flex-wrap: wrap; gap: 0.4rem; }
  .promptheque__cat {
    width: auto;
    border-left: none;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    padding: 0.35em 0.8em;
  }
  .promptheque__cat.is-active { border-color: var(--c-gold-500); background: var(--c-gold-500); }
  .promptheque__cat.is-active .promptheque__cat-count { color: var(--c-ink-900); }
  .promptheque__cat-group { flex-basis: 100%; padding-left: 0; margin: var(--s-3) 0 0.2rem; }
}

/* Barre de contrôle : recherche + compteur */
.promptheque__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}
.promptheque__search {
  flex: 1 1 260px;
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-ink-900);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 2px;
  padding: 0.7em 0.9em;
}
.promptheque__search:focus-visible {
  outline: 2px solid var(--c-gold-500);
  outline-offset: 1px;
  border-color: var(--c-gold-500);
}
.promptheque__count {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--c-muted);
  white-space: nowrap;
}

/* Filtres par catégorie */
.promptheque__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--s-5);
}
.promptheque__chip {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 0.45em 0.95em;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.promptheque__chip:hover { color: var(--c-ink-900); border-color: var(--c-gold-700); }
.promptheque__chip[aria-pressed="true"] {
  color: var(--c-ink-900);
  background: var(--c-gold-500);
  border-color: var(--c-gold-500);
}

/* Grille de cartes */
.prompt-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-4);
}
.prompt-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-gold-500);
  padding: var(--s-4);
}
.prompt-card__cat {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gold-700);
  margin: 0 0 0.6rem;
}
.prompt-card__title {
  font-family: var(--ff-serif);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--c-ink-900);
  margin: 0 0 0.5rem;
}
.prompt-card__usage {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--c-muted);
  margin: 0 0 var(--s-3);
}
.prompt-card__prompt {
  position: relative;
  font-family: var(--ff-mono, 'DejaVu Sans Mono', ui-monospace, monospace);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--c-ink-900);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 2px;
  padding: 0.9rem;
  margin: 0 0 var(--s-3);
  white-space: pre-wrap;
  max-height: 11rem;
  overflow: auto;
}
.prompt-card__copy {
  align-self: flex-start;
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-ink-900);
  background: transparent;
  border: 1px solid var(--c-gold-700);
  border-radius: 2px;
  padding: 0.5em 1em;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.prompt-card__copy:hover { background: var(--c-gold-500); border-color: var(--c-gold-500); }
.prompt-card__copy.is-copied { background: var(--c-ink-900); color: #fff; border-color: var(--c-ink-900); }
.prompt-card__comment {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  font-style: italic;
  line-height: 1.55;
  color: var(--c-ink-900);
  border-left: 2px solid var(--c-gold-500);
  padding-left: 0.8rem;
  margin: var(--s-3) 0 0;
}
.prompt-card__meta {
  margin-top: auto;
  padding-top: var(--s-3);
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  color: var(--c-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
}
.prompt-card__meta a { color: var(--c-gold-700); }
.promptheque__empty {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-muted);
  padding: var(--s-5) 0;
}

/* ============================================================
   Vidéos — intégrées aux articles et sur le hub Regards
   ============================================================ */
.article__figure video {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
  border: 1px solid var(--c-line);
}
.article__video {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Section « Regards en vidéo » sur le hub */
.regards-videos {
  margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0;
  padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-top: 1px solid var(--c-line);
}
.regards-videos__heading {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold-700);
  margin: 0 0 var(--s-4);
}
.regards-videos__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
}
.video-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.video-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: #000;
}
.video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.video-card a:hover .video-card__thumb img { transform: scale(1.03); }
.video-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.video-card__play::before {
  content: '';
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(17, 30, 53, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.video-card__play::after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}
.video-card__title {
  font-family: var(--ff-serif);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--c-ink-900);
  margin: var(--s-3) 0 0.35rem;
}
.video-card__meta {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  color: var(--c-muted);
}