/* ==========================================================================
   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; }

/* La rubrique Observatoire, posée le 05/09/2026 (emplacement tranché par Nestor
   à 19h04 : le bandeau de la page de rubrique, pas les cartes).
   BADGE et non couleur de texte, pour une raison mesurée : --c-glacier est
   défini pour du texte SUR FOND SOMBRE, et son contraste sur le papier clair
   tombe à 1,41:1, très en dessous du minimum lisible. En fond de badge avec
   l'encre sombre par-dessus, il rend 10,92:1 et vaut sur les deux fonds. */
.eyebrow--observatoire {
  background: var(--c-glacier);
  color: var(--c-ink-900);
  padding: 0.25em 0.6em;
  letter-spacing: 0.16em;
}
.eyebrow--observatoire::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;
  /* 04/10/2026 : « À PROPOS » passait sur deux lignes à 1280 px (relevé d'Éloi). */
  white-space: nowrap;
}
.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;
}

/* Rubrique « Nous connaître » (06/10/2026) : menu déroulant, ouvert au survol,
   au clavier (focus) et au clic (bouton, aria-expanded). */
.site-nav__groupe { position: relative; }
.site-nav__sous-bouton {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-paper);
  background: none;
  border: 0;
  padding: 6px 0;
  line-height: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.site-nav__sous-bouton::after {
  content: '';
  display: inline-block;
  margin-left: .45em;
  vertical-align: .2em;
  border: 4px solid transparent;
  border-top-color: currentColor;
  border-bottom: 0;
}
.site-nav__sous-bouton--courant { color: var(--c-gold-500); }
.site-nav__sous-bouton:focus-visible { outline: 1px solid var(--c-gold-500); outline-offset: 4px; }
.site-nav__sous {
  display: none;
  position: absolute;
  top: 100%;
  left: -1.25rem;
  min-width: 16rem;
  margin: 0;
  padding: 1rem 1.25rem;
  list-style: none;
  background: rgba(17, 30, 53, 0.97);
  border: 1px solid rgba(200, 168, 80, 0.22);
  z-index: 100;
}
.site-nav__sous li + li { margin-top: .6rem; }
@media (hover: hover) { .site-nav__groupe:hover .site-nav__sous { display: block; } }
.site-nav__groupe:focus-within .site-nav__sous,
.site-nav__sous-bouton[aria-expanded="true"] + .site-nav__sous { display: block; }
.site-nav-mobile__titre {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-gold-500);
}
.site-nav-mobile__sous a { padding-left: 1rem; font-size: 1.75rem; }

.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;
  /* LE PANNEAU NE PEUT PAS S'APPUYER SUR `bottom` : IL N'EST PAS TOUJOURS CALÉ
     SUR LA FENÊTRE. Dès que le bandeau passe en translucide (.is-scrolled), son
     `backdrop-filter` fait de lui un BLOC CONTENEUR pour ses descendants en
     position fixe. Le panneau, qui vit dans le bandeau, se mesurait alors sur
     un bandeau de 69 px : fond haut de 129 px, et les huit liens débordaient
     par-dessus la page, illisibles, les doigts atterrissant sur le contenu
     dessous. Sur les pages de l'Observatoire le bandeau naît translucide, donc
     c'était cassé dès la première ouverture ; ailleurs, dès qu'on défilait.
     Une hauteur explicite donne le même résultat dans les deux cas, parce
     qu'elle ne dépend d'aucun bloc conteneur. */
  inset: var(--header-height) 0 auto 0;
  height: calc(100vh - var(--header-height));
  height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  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);
}

/* ==========================================================================
   7 bis. VIDÉO D'ACCUEIL — L'ÉQUIPE
   ========================================================================== */
.equipe-video {
  background: var(--c-paper);
  color: var(--c-ink-400);
  text-align: center;
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) 0;
}
.equipe-video + .manifesto {
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.equipe-video__inner {
  max-width: 48rem;
  margin-inline: auto;
}
.equipe-video__inner .section-title {
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.equipe-video__figure {
  margin-inline: auto;
  text-align: left;
}
/* Nos bureaux virtuels (bureaux.html) : plan d'architecte en filigrane de fond */
.bureaux-page {
  background: var(--c-paper) url("../assets/images/bureaux/plan-bureaux-virtuels-filigrane-9pc.png") center 32rem / min(100%, 1600px) repeat-y;
}
.bureaux-chantier {
  max-width: var(--container-max); margin: 1.5rem auto 0; padding: .6rem var(--container-gutter);
  font-size: var(--fs-small); color: var(--c-muted); text-align: center;
}
.bureaux-chantier a {
  color: var(--c-gold-700); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.bureaux-visite, .bureaux-plan, .bureaux-portes { background: transparent; padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.bureaux-visite__inner { max-width: var(--container-max); margin-inline: auto; }
.bureaux-galerie { display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }
.bureaux-vue { margin: 0; }
.bureaux-vue img { width: 100%; height: auto; display: block; }
.bureaux-vue figcaption { margin-top: .5rem; font-size: var(--fs-small); color: var(--c-muted); }
.bureaux-mention { margin-top: 1.5rem; font-size: var(--fs-small); color: var(--c-muted); }
.bureaux-portes p { margin: .4rem 0; }
.bureaux-plan__texte { max-width: 46rem; }
.bureaux-plan__figure { margin: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) 0; background: #fff; border: 1px solid rgba(17, 30, 53, 0.12); padding: clamp(.5rem, .3rem + 1vw, 1.25rem); }
.bureaux-plan__figure img { width: 100%; height: auto; display: block; }
.bureaux-plan__actions { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }

/* Réel des offres (offre.html), vertical : largeur bornée, légende sous la vidéo */
.offre-video { padding: 0 0 clamp(2rem, 1.5rem + 2vw, 3rem); }
.offre-video__figure { max-width: 22rem; margin: 0; }
/* Le réel et l'entrée du premier groupe côte à côte (07/10/2026). */
.offre-video {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4.5rem);
  align-items: center;
}
.offre-video__entree { max-width: 32rem; }
.offre-video__entree .format-group__label { margin-bottom: 1rem; }
.offre-video__entree .format-group__lede {
  font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2.1rem);
  line-height: 1.35;
}
@media (max-width: 720px) {
  .offre-video { grid-template-columns: 1fr; padding-inline: var(--container-gutter); }
  .offre-video__figure { margin-inline: auto; }
  .offre-video__entree { text-align: center; margin-inline: auto; }
}
.offre-video__figure video { width: 100%; height: auto; display: block; }

.equipe-video__cta {
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2rem);
}

/* ==========================================================================
   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; }

/* ------------------------------------------------------------------
   MÉDAILLONS DU CONSTAT — deux faces, pivot au clic (06/09/2026).
   Demande d'Olivier ; cadre de Nestor : face visible = chiffre le plus
   récent, dos = point de départ, deux faces dans le document, vrai
   bouton, LISIBLE SANS SCRIPT.

   C'est cette dernière contrainte qui commande tout ce qui suit. Sans
   JavaScript, les deux faces sont dans le flux, l'une sous l'autre, et
   le bouton est CACHÉ : un bouton qui ne fait rien est pire qu'un
   bouton absent. Le script pose .js-medaillons sur la grille, et c'est
   elle seule qui active le pivot et révèle le bouton.

   Les faces se superposent par la GRILLE et non par un positionnement
   absolu : le médaillon prend ainsi la hauteur de la face la plus
   haute, au lieu de laisser la plus longue déborder.
   ------------------------------------------------------------------ */
.stat__pivot { display: none; }
.stat__etiquette {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0;
}
.stat__face + .stat__face { margin-top: var(--s-4); }

.js-medaillons .stat { perspective: 1400px; }
.js-medaillons .stat__medaillon {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js-medaillons .stat__face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  backface-visibility: hidden;
  margin-top: 0;
}
.js-medaillons .stat__face--verso { transform: rotateY(180deg); }
.js-medaillons .stat.est-pivote .stat__medaillon { transform: rotateY(180deg); }

.js-medaillons .stat__pivot {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--s-4);
  padding: 0.45em 0.9em;
  align-self: flex-start;
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-400);
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.js-medaillons .stat__pivot::after {
  content: "\21BB";           /* flèche de rotation */
  font-size: 1.1em;
  line-height: 1;
}
.js-medaillons .stat__pivot:hover,
.js-medaillons .stat__pivot:focus-visible {
  color: var(--c-ink-900);
  border-color: var(--c-ink-900);
}

/* Un pivot est un mouvement : on ne l'impose pas à qui demande moins
   d'animation. La face change, elle ne tourne plus. */
@media (prefers-reduced-motion: reduce) {
  .js-medaillons .stat__medaillon { transition: none; }
}

.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 {
  /* Le texte doit pouvoir se replier. Avec flex-shrink: 0 il restait sur une
     seule ligne large de son contenu et débordait la page des deux côtés :
     invisible tant que la phrase était courte, apparu quand elle s'est
     allongée (mention de l'article 50 de l'AI Act, août 2026). Les filets
     gardent leur place, ils portent déjà flex: 1 et une largeur maximale. */
  flex: 0 1 auto;
  min-width: 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;
}
/* Mention hors taxes sous le prix, calquée sur .format-detail__price-note
   de la page Offre pour que les deux pages disent la même chose de la
   même façon. En bloc : le prix est en grande serif, la mention doit
   passer à la ligne plutôt que de courir à côté. */
.offer__price-note {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--ff-sans) !important;
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--c-muted);
  letter-spacing: 0;
  line-height: 1.3;
}

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

/* ==========================================================================
   10 bis. LIVRE BLANC EN PAGE D'ACCUEIL
   ========================================================================== */
.ressource {
  background: #FFFFFF;
  color: var(--c-ink-400);
}

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

.ressource__cover {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(200, 168, 80, 0.45);
  box-shadow: 0 18px 40px rgba(17, 30, 53, 0.18);
}

.ressource__pitch {
  margin-top: var(--s-4);
  max-width: 62ch;
}

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

@media (max-width: 720px) {
  .ressource__inner {
    grid-template-columns: 1fr;
  }
  .ressource__cover {
    width: min(220px, 70%);
  }
}

/* ==========================================================================
   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);
}

/* Vignette de couverture du livre blanc (bloc du Dossier AI Act) */
.livre-blanc__vignette {
  display: block;
  width: min(230px, 62%);
  height: auto;
  margin-top: var(--s-5);
  border: 1px solid rgba(200, 168, 80, 0.45);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

/* 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);
}

/* Pot de miel anti-spam : champ leurre masqué, rempli seulement par les robots.
   Formspree ignore silencieusement toute soumission où _gotcha est renseigné. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Widget Turnstile (vérification anti-robot Cloudflare, jeton vérifié par Formspree) */
.cf-turnstile {
  margin-top: var(--s-2);
}

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

/* MENU COMPACT JUSQU'À 1199 px (04/10/2026). Depuis l'ajout de « L'équipe » (02/10),
   les 9 entrées du menu complet ne tiennent plus en dessous d'environ 1180 px : à 800 px
   le menu s'étendait jusqu'à 1077 px, « Contact » hors de l'écran ; à 1024 px le logo
   était écrasé. Mesuré au vrai navigateur, polices chargées. */
/* Entre 1200 et 1339 px, le menu complet tient si on le resserre : sans cela, c'est le
   logo qui rétrécissait (26 px de large à 1200, 93 à 1280, au lieu de 128). */
@media (min-width: 1200px) and (max-width: 1339px) {
  .site-nav__list {
    gap: clamp(1rem, 1.4vw, 1.5rem);
  }
  .site-nav__list a {
    letter-spacing: 0.06em;
  }
}
@media (max-width: 1199px) {
  .site-nav {
    display: none;
  }
  .site-nav__toggle {
    display: flex;
  }
  .site-nav-mobile:not([hidden]) {
    display: block;
  }
}

@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;
}
/* Le format du mandat, posé sous le chapeau du parcours : c'est une suite, pas
   un second chapeau — d'où un corps légèrement moindre et un blanc qui les
   sépare sans les détacher. Le lede porte margin:0, deux d'affilée se
   toucheraient. */
.masthead__lede--suite {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.375rem);
  margin-top: 1.1rem;
}
.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;
}

/* ------------------------------------------------------------------
   Page Offre — sommaire latéral (demande d'Olivier du 06/09/2026).
   Elle REPREND .method-page et .method-toc : composant déjà collant
   au-delà de 1024 px, horizontal en dessous, et déjà suivi par le
   scroll-spy de main.js. Rien de neuf, sauf ce qui suit.
   Les sections de format portent leur propre gouttière et leur propre
   fond : dans la colonne, on ne la compte pas deux fois.
   ------------------------------------------------------------------ */
.offre-page__formats { min-width: 0; }
.offre-page__formats > .format-detail,
.offre-page__formats > .format-group { padding-inline: var(--s-5); }

@media (max-width: 1023px) {
  .offre-page__formats > .format-detail,
  .offre-page__formats > .format-group { padding-inline: var(--container-gutter); }
}

/* 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);
}
/* Fond sombre : l'en-tête suit la teinte de la SECTION, comme le corps, les
   listes et les modalités le font déjà plus bas. Auparavant ces trois éléments
   étaient les seuls du bloc à exiger un modificateur --light posé à la main
   dans le HTML, ce qui a produit trois inversions clair/sombre en une journée
   lors des réordonnancements du 6 août 2026. Un réordonnancement ne coûte
   désormais qu'un changement de classe sur la section. */
.format-detail--dark .eyebrow { color: var(--c-gold-500); }
.format-detail--dark .eyebrow::before { background: var(--c-gold-500); }
.format-detail--dark .format-detail__title { color: var(--c-paper); }
.format-detail--dark .format-detail__pitch { color: var(--c-gold-500); }

.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;
    /* 04/10/2026 : -0,02 em à ce corps faisait sortir la lettre de 3 px de l'écran
       (page de 393 px pour 390, relevé d'Éloi au vrai navigateur). */
    right: 0;
  }

  .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). */
/* Intertitre de groupe de la gamme : sépare les formats d'entrée, les
   missions et l'accompagnement récurrent. Volontairement plus discret qu'une
   transition, qui elle marque une rupture ; ici on annonce, on ne coupe pas. */
.format-group {
  padding: clamp(2.5rem, 1.5rem + 2.5vw, 4rem) var(--container-gutter) clamp(1rem, 0.5rem + 1vw, 1.75rem);
  background: var(--c-paper);
  text-align: center;
}
.format-group__inner {
  max-width: 48rem;
  margin-inline: auto;
}
.format-group__label {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold-700);
  margin-bottom: 0.75rem;
}
.format-group__lede {
  font-family: var(--ff-serif);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  line-height: 1.5;
  color: var(--c-ink-900);
  margin: 0;
}

.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;
  /* 2 x 2 depuis l'arrivée du 4e partenaire (THE NEOSHIELDS) */
  grid-template-columns: repeat(2, 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);
}

/* ==========================================================================
   Bloc de clôture des contenus : transition éditoriale + appel à l'échange
   Sur les articles : phrase du pilier (serif) + ligne CTA sobre.
   Sur les pages de liste : ligne compacte .regards-closing.
   ========================================================================== */
.article__closing {
  margin: var(--s-6) 0 var(--s-4);
  padding-top: var(--s-4);
  border-top: 2px solid var(--c-gold-700);
}
.article__closing-line {
  font-family: var(--ff-serif);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-style: italic;
  color: var(--c-ink-900);
  margin: 0 0 var(--s-2);
}
.article__closing-cta {
  margin: 0;
  font-size: var(--fs-small);
}
.article__closing-cta a,
.regards-closing a {
  color: var(--c-gold-700);
  font-weight: 600;
}
.regards-closing {
  margin: var(--s-5) 0 var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-small);
}

/* Ligne de suivi LinkedIn sous le CTA de clôture (maturation douce) */
.article__closing-follow {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-small);
}
.article__closing-follow a { color: var(--c-muted); }
.article__closing-follow a:hover { color: var(--c-ink-900); }

/* Encart « En clair » en fin d'article : renvoi explicite vers la version
   satirique, tampon doré + titre affiché pour rendre la paire lisible. */
.article__enclair {
  margin: var(--s-5) 0;
  padding: var(--s-4) var(--s-4) calc(var(--s-4) + 0.15rem);
  border: 1px solid var(--c-gold-700);
  background: #fff;
}
.article__enclair-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin: 0 0 var(--s-3);
}
.article__enclair-note {
  font-size: var(--fs-small);
  color: var(--c-muted);
}
.article__enclair-title {
  margin: 0;
  font-family: var(--ff-serif);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  font-style: italic;
  line-height: 1.3;
}
.article__enclair-title a {
  color: var(--c-ink-900);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 168, 80, 0.45);
  transition: border-color .15s, color .15s;
}
.article__enclair-title a:hover {
  color: var(--c-gold-700);
  border-bottom-color: var(--c-gold-700);
}

/* Variante « En vidéo » de l'encart : tampon marine, liseré marine. */
.eyebrow--video {
  background: var(--c-ink-900);
  color: #fff;
  padding: 0.25em 0.6em;
  letter-spacing: 0.16em;
}
.eyebrow--video::before { display: none; }
.article__enclair--video { border-color: var(--c-ink-400); }
.article__enclair--video .article__enclair-title a {
  border-bottom-color: rgba(45, 62, 95, 0.35);
}
.article__enclair--video .article__enclair-title a:hover {
  color: var(--c-ink-600);
  border-bottom-color: var(--c-ink-600);
}

/* ==========================================================================
   Bloc « À qui nous parlons » (accueil) : trois portes d'entrée nommées,
   un seul positionnement. DG industrie/BTP, DRH, dirigeant d'un autre secteur.
   ========================================================================== */
.audiences {
  padding: var(--section-pad-y) var(--container-gutter);
  background: var(--c-paper);
}
.audiences__grid {
  list-style: none;
  margin: var(--s-5) auto 0;
  padding: 0;
  max-width: var(--container-max);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.8rem + 1vw, 2rem);
}
.audience {
  background: #fff;
  border-top: 2px solid var(--c-gold-700);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.audience__title {
  margin: 0;
  font-family: var(--ff-serif);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  color: var(--c-ink-900);
  line-height: 1.25;
}
.audience__body {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  flex-grow: 1;
}
@media (max-width: 860px) {
  .audiences__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   OBSERVATOIRE — renvoi depuis l'accueil
   Deux cartes sobres, sans image : l'Observatoire se lit, il ne s'illustre pas.
   ========================================================================== */
.observatoire-renvoi {
  background: var(--c-paper);
}
.observatoire-renvoi__grid {
  max-width: var(--container-max);
  margin: var(--s-6) auto 0;
  display: grid;
  /* Quatre volets depuis le 09/09 : avec un minimum de 20rem la grille tombait
     en trois colonnes, donc trois cartes et une orpheline. 24rem donne deux
     rangées de deux au bureau, et une colonne au téléphone.
     Le min() n'est pas un ornement : sans lui, un minimum de 24rem (384px)
     impose une colonne plus large que le conteneur du téléphone (328px) et
     fait déborder la PAGE ENTIÈRE horizontalement. Mesuré au servi le 09/09. */
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--s-5);
}
.observatoire-renvoi__carte {
  border-top: 2px solid var(--c-gold-700);
  padding-top: var(--s-4);
}
.observatoire-renvoi__titre {
  font-family: var(--ff-serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 var(--s-3);
}
.observatoire-renvoi__titre a {
  color: var(--c-ink-900);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.observatoire-renvoi__titre a:hover,
.observatoire-renvoi__titre a:focus-visible {
  border-bottom-color: var(--c-gold-700);
}
.observatoire-renvoi__carte p {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-ink-400);
  margin: 0;
  max-width: 34rem;
}
.observatoire-renvoi__carte strong {
  color: var(--c-ink-900);
  font-weight: 600;
}

/* L'ENSEIGNE NE SE SÉPARE PAS DE SES MISSIONS. C'est le rattachement qui
   protège : une mission détachée de son cabinet se lit comme une mission
   conduite en propre. Ni l'écran ni l'imprimante ne peuvent ouvrir ce bloc. */
/* LES RÈGLES DE L'ENSEIGNE ONT ÉTÉ RETIRÉES D'ICI LE 28/08. Elles vivaient en
   DOUBLE, ici et dans observatoire.css, et la version d'ici était périmée : sa
   marge de 3 rem, son filet et son retrait ne s'appliquaient que là où l'autre
   ne disait rien. Le doublon ne se voyait pas tant que l'autre le masquait, et
   il a repris la main à la seconde où j'ai retiré une déclaration en croyant
   supprimer un effet. La définition vivante est dans observatoire.css, seule.
   `break-inside: avoid` y est également, avec son motif. */
@media print {
  .site-header, .site-footer, .skip-link, .parcours__pdf { display: none; }
  .parcours { max-width: none; padding: 0; }
}
.about-closing__parcours {
  margin: var(--s-5) 0 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
}
.about-closing__parcours a { color: inherit; }

/* Coulisses (coulisses.html, coulisses-avatars.html) — Sidonie, 06/10/2026 ; reporté par Isidore le 06/10/2026 */
.coulisses-page { background: var(--c-paper); }
.coulisses-bloc { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.coulisses-bloc + .coulisses-bloc { padding-top: 0; }
.coulisses-bloc__inner { max-width: 56rem; margin-inline: auto; padding-inline: var(--container-gutter); }
.coulisses-bloc__inner > p { max-width: 44rem; }
.coulisses-trio, .coulisses-grille, .coulisses-paire { display: grid; gap: clamp(1rem, .75rem + 1vw, 1.75rem); margin-block: 1.5rem; }
.coulisses-trio { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.coulisses-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.coulisses-paire { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.coulisses-vue { margin: 0; }
.coulisses-vue img { width: 100%; height: auto; display: block; }
.coulisses-vue figcaption { margin-top: .5rem; font-size: var(--fs-small); color: var(--c-muted); }
.coulisses-vue--ecartee img { filter: grayscale(.6); opacity: .8; }
.coulisses-tableau { overflow-x: auto; margin-block: 1.5rem; }
.coulisses-tableau table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.coulisses-tableau th, .coulisses-tableau td { text-align: left; vertical-align: top; padding: .65rem .75rem; border-bottom: 1px solid rgba(17,30,53,.12); }
.coulisses-tableau thead th { color: var(--c-ink-400); font-weight: 600; }
.coulisses-tableau tbody th { font-weight: 600; white-space: nowrap; }
.coulisses-video { max-width: 22rem; margin: 1.5rem 0; }
.coulisses-video video { width: 100%; height: auto; display: block; }
.coulisses-video figcaption { margin-top: .5rem; font-size: var(--fs-small); color: var(--c-muted); }
.coulisses-mention { margin-top: 1.5rem; font-size: var(--fs-small); color: var(--c-muted); }

/* ==========================================================================
   Barre latérale « Ressources » (06/10/2026, demande d'Olivier) :
   même apparence que celle des Regards, collée en haut au défilement.
   ========================================================================== */
.ressources-nav { padding-bottom: var(--s-4); margin-bottom: var(--s-4); border-bottom: 1px solid var(--c-line); }
.avec-ressources { max-height: calc(100vh - var(--header-height) - var(--s-5)); overflow-y: auto; }
.ressources-cadre { max-width: var(--container-max); margin-inline: auto; padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--container-gutter); }
.ressources-layout { display: grid; grid-template-columns: var(--sidebar-width) 1fr; gap: clamp(2rem, 1.5rem + 2vw, 4rem); align-items: start; }
.ressources-contenu { min-width: 0; }
.ressources-contenu > section { padding-inline: 0; }
/* Page à deux barres (bureaux.html) : la barre cachée ne prend aucune place. */
.ressources-nav[hidden] { display: none !important; }
/* Sections à fond sombre dans la colonne (réseau, convictions du fondateur) : le
   fond reste, la marge intérieure revient, sinon le texte touche le bord (07/10/2026). */
.ressources-contenu > section.network,
.ressources-contenu > section.convictions { padding-inline: clamp(1.25rem, 0.75rem + 2vw, 2.5rem); }
.ressources-nav--colonne {
  position: sticky;
  top: calc(var(--header-height) + var(--s-5));
  align-self: start;
  border-bottom: 0; margin-bottom: 0;
  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;
}
@media (max-width: 900px) {
  .ressources-layout { grid-template-columns: 1fr; }
  .ressources-nav--colonne { position: static; max-height: none; overflow: visible; border-right: 0; padding-right: 0; border-bottom: 1px solid var(--c-line); padding-bottom: var(--s-4); }
  .avec-ressources { max-height: none; overflow: visible; }
}

/* --------------------------------------------------------------------------
   Pages « Une question, une réponse » (reponses-*.html) : typographie de
   lecture (06/10/2026, Olivier : « Pourquoi des titres si gros ? »). Ces pages
   n'avaient que le titre global (--fs-h2) et la marge des sections.
   -------------------------------------------------------------------------- */
.ressources-contenu .rem-bloc { padding: 0; }
.ressources-contenu .rem-bloc .colonne { max-width: 44rem; }
.ressources-contenu .rem-bloc p {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--c-ink-400);
  margin: 0 0 var(--s-4);
}
.ressources-contenu .rem-bloc p b { color: var(--c-ink-900); font-weight: 600; }
.ressources-contenu .rem-bloc .colonne > p:first-child {
  font-size: var(--fs-lede);
  color: var(--c-ink-900);
  padding-left: var(--s-4);
  border-left: 2px solid var(--c-gold-500);
  margin-bottom: var(--s-6);
}
.ressources-contenu .rem-bloc h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.65rem);
  line-height: 1.25;
  margin: var(--s-6) 0 var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
}
.ressources-contenu .rem-bloc ul {
  margin: 0 0 var(--s-4);
  padding-left: 1.1rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-muted);
}
.ressources-contenu .rem-bloc ul li { margin-bottom: .5rem; }
.ressources-contenu .rem-bloc .pont {
  margin-top: var(--s-6);
  font-size: var(--fs-small);
  color: var(--c-muted);
  font-style: italic;
}

/* Index des réponses : pas de marge de section au-dessus de la liste, la barre et la liste partent ensemble. */
.ressources-contenu > .observatoire-renvoi { padding-top: 0; padding-inline: 0; }

/* Deux menus dans la même colonne (Prompthèque, Observatoire) : la barre
   « Ressources » prend un fond marine pour se distinguer du menu de la page,
   et se replie sur son titre quand on descend (06/10/2026, demande d'Olivier). */
.ressources-nav--repliable {
  background: var(--c-ink-900);
  padding: var(--s-3) var(--s-3) var(--s-2);
  border-bottom: 0;
  margin-bottom: var(--s-5);
}
.ressources-nav__titre {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; padding: .25rem .5rem .5rem .75rem; cursor: pointer;
  font-family: var(--ff-sans); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--c-paper);
}
.ressources-nav__titre::after {
  content: ''; border: 4px solid transparent; border-top-color: var(--c-gold-500); border-bottom: 0;
  transition: transform var(--dur) var(--ease);
}
.ressources-nav--repliable.est-replie .ressources-nav__titre::after { transform: rotate(-90deg); }
.ressources-nav--repliable.est-replie .ressources-nav__corps { display: none; }
.ressources-nav--repliable.est-replie { padding-bottom: var(--s-3); }
.ressources-nav--repliable .regards-sidebar__group { color: var(--c-gold-500); }
.ressources-nav--repliable .regards-sidebar__list a { color: rgba(244, 246, 250, 0.72); }
.ressources-nav--repliable .regards-sidebar__list a:hover,
.ressources-nav--repliable .regards-sidebar__list a:focus-visible { color: var(--c-paper); border-left-color: var(--c-gold-500); }
.ressources-nav--repliable .regards-sidebar__list a[aria-current="page"] {
  color: var(--c-paper); background: rgba(255, 255, 255, 0.07); border-left-color: var(--c-gold-500);
}
.ressources-nav__corps .regards-sidebar__group:first-child { margin-top: var(--s-2); }
/* bureaux.html : le bouton de téléchargement débordait à 390 px (rendu servi d'Éloi, 06/10). */
.bureaux-plan__actions .btn { white-space: normal; max-width: 100%; text-align: center; }
/* Barre seule (Réponses, Coulisses) : pas de titre-bouton à l'écran large ;
   sur téléphone, titre-bouton et repli, sur fond marine comme les pages à deux menus. */
.ressources-nav--seule { background: transparent; padding: 0 var(--s-4) 0 0; }
.ressources-nav--seule .ressources-nav__titre { display: none; }
.ressources-nav--seule .regards-sidebar__group { color: var(--c-gold-700); }
.ressources-nav--seule .regards-sidebar__list a { color: var(--c-muted); }
.ressources-nav--seule .regards-sidebar__list a[aria-current="page"] { color: var(--c-ink-900); background: rgba(17,30,53,.04); }
.ressources-nav--seule .regards-sidebar__list a:hover,
.ressources-nav--seule .regards-sidebar__list a:focus-visible { color: var(--c-ink-900); border-left-color: rgba(200, 168, 80, 0.35); }
@media (max-width: 900px) {
  .ressources-nav--seule { background: var(--c-ink-900); padding: var(--s-3) var(--s-3) var(--s-2); }
  .ressources-nav--seule .ressources-nav__titre { display: flex; }
  .ressources-nav--seule .regards-sidebar__group { color: var(--c-gold-500); }
  .ressources-nav--seule .regards-sidebar__list a { color: rgba(244, 246, 250, 0.72); }
  .ressources-nav--seule .regards-sidebar__list a[aria-current="page"] { color: var(--c-paper); background: rgba(255,255,255,.07); }
  .ressources-nav--seule .regards-sidebar__list a:hover { color: var(--c-paper); border-left-color: var(--c-gold-500); }
}
/* Coulisses : les boutons de téléchargement des fiches débordaient à 390 px (rendu servi, 07/10). */
.coulisses-vue .btn { white-space: normal; max-width: 100%; text-align: center; }

/* Coulisses des bureaux (07/10/2026) : images pleine colonne, signature de l'agent. */
.coulisses-vue--large { margin: 1.5rem 0 2rem; }
.coulisses-vue--large img { width: 100%; height: auto; display: block; }
.coulisses-vue--large video { width: 100%; height: auto; display: block; background: var(--c-ink-900); }
.coulisses-signature { margin-top: var(--s-4); font-style: italic; color: var(--c-muted); font-size: var(--fs-small); }
.coulisses-bloc__inner h2:not(.section-title) { font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.65rem); line-height: 1.25; margin: var(--s-6) 0 var(--s-3); }
.coulisses-bloc__inner ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 var(--s-4); }
.coulisses-bloc__inner ul li { margin-bottom: .5rem; }

/* Mention IA sous les grilles des Regards (Nestor 07/10 10h11) */
.regards-mention-ia {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-small);
  color: var(--c-ink-600);
  font-style: italic;
}