/* ==========================================================================
   LB NOVA DIGITAL — Cabinet de structuration opérationnelle
   Direction V3 : flux continu façon cabinet premium. Un seul fond chaud
   (#faf7f1) du hero au footer ; le relief vient des cards, pas des blocs
   de couleur. Bordeaux = signature (hero + CTA final). Cuivre = CTA + kickers.
   ========================================================================== */

/* ---------- Polices auto-hébergées (RGPD : aucune requête vers Google) ----------
   Fichiers variables Google Fonts : un woff2 couvre les deux poids par famille. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --color-primary: #66001f;      /* Bordeaux Ordre — hero, CTA final, H2 */
  --color-secondary: #eddcbd;    /* Ivoire Terrain — badges, accents */
  --color-accent: #b0561f;       /* Cuivre Signal — boutons + kickers (foncé pour contraste AA) */
  --color-accent-hover: #93451a; /* Cuivre hover, plus foncé */
  --color-bg: #faf7f1;           /* Fond global — ivoire très léger, chaud */
  --color-card: rgba(255,253,249,0.85); /* Blanc chaud semi-opaque — fond des cards */
  --color-border-card: rgba(102,0,31,0.08); /* Bordure fine des cards */
  --color-text: #484237;         /* Texte principal — anthracite chaud (jamais #1a1a1a sur fond chaud) */
  --color-text-beige: #484237;   /* Alias historique, même valeur */
  --color-text-muted: #5a5549;   /* Texte secondaire */
  --color-text-light: #faf8f5;   /* Texte sur bordeaux — blanc chaud, JAMAIS #ffffff */
  --color-footer: #1a1a1a;

  --color-base: #faf7f1;         /* Alias de --color-bg (utilisé par blog.css) */

  --label: #6f695d;              /* Gris chaud discret (notes, tags) — foncé pour contraste AA */
  --line: #e6e1d9;               /* Filets internes (listes, etc.) */
  --line-beige: rgba(72,66,55,0.16);
  --line-light: rgba(250,248,245,0.22);
  --line-section: rgba(102,0,31,0.06); /* Séparateurs fins entre sections */
  --ivory-soft: #f7f1e6;         /* Ivoire adouci (cadres photo) */

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Outfit', system-ui, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms ease;
  --t-base: 300ms var(--ease-out);

  --maxw: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  max-width: 100%;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }
h1, h2, h3 { margin: 0; font-family: var(--font-serif); font-weight: 500; }
::selection { background: var(--color-primary); color: var(--color-text-light); }

.container {
  width: min(100%, var(--maxw));
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 42px);
}

.skip-link { position: absolute; left: -999px; top: 0; background: var(--color-primary); color: var(--color-text-light); padding: 12px 20px; z-index: 1000; }
.skip-link:focus { left: 0; }

/* ---------- Focus clavier brandé ---------- */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.site-header a:focus-visible,
.nav-links a:focus-visible,
.hero a:focus-visible,
.cta-final a:focus-visible,
.site-footer a:focus-visible {
  outline-color: var(--color-secondary);
}

/* ---------- Fil d'Ariane : ligne de progression du scroll ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; width: 2px; height: 100vh; background: rgba(102,0,31,0.07); z-index: 400; pointer-events: none; }
.scroll-progress-fill { display: block; width: 100%; height: 100%; background: var(--color-accent); transform: scaleY(0); transform-origin: top; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .scroll-progress-fill { height: 100% !important; transform: none !important; }
}

/* ---------- Intitulés discrets (kicker) ---------- */
.kicker {
  display: inline-block;
  font-family: var(--font-sans); font-weight: 600;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-accent);
}

/* ---------- Titres ---------- */
h1 { font-weight: 500; font-size: clamp(40px, 5vw, 66px); line-height: 1.06; letter-spacing: 0.01em; }
h1 em { font-style: italic; }
h2 { font-size: clamp(29px, 3.2vw, 42px); line-height: 1.12; letter-spacing: 0.01em; color: var(--color-primary); }
h3 { font-family: var(--font-sans); font-weight: 600; font-size: 21px; }
p { color: var(--color-text-muted); }

/* ---------- En-tête de section ---------- */
.section-head { max-width: 720px; margin-bottom: 60px; }
.section-head .kicker { margin-bottom: 18px; }
.section-head h2 { margin-bottom: 0; }
.section-head .lead { margin: 22px 0 0; font-size: 19px; max-width: 720px; }
.pains-qualifier { margin: 10px 0 0; font-size: 14.5px; color: var(--color-text-muted); opacity: 0.82; max-width: 640px; }

/* ---------- Boutons ---------- */
/* Dégradé cuivre subtil (clair -> base), effet "métal brossé" : exception ponctuelle
   à la règle "aucun gradient", validée pour les CTA uniquement (voir CLAUDE.md).
   Stop clair #ad5a1c (au lieu de #c2661f) : contraste texte/fond vérifié >= 4.5:1 AA
   avec le texte #faf8f5 (l'ancien stop clair ne passait qu'à 3.8:1). */
.btn-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(140deg, #ad5a1c 0%, var(--color-accent) 100%);
  color: var(--color-text-light);
  font-family: var(--font-sans); font-weight: 600; font-size: 16px;
  padding: 16px 30px; border-radius: 999px;
  transition: background var(--t-fast), transform var(--t-fast);
}
.btn-cta::after { content: "\2192"; transition: transform var(--t-base); }
.btn-cta:hover { background: linear-gradient(140deg, var(--color-accent) 0%, var(--color-accent-hover) 100%); }
.btn-cta:hover::after { transform: translateX(4px); }
.btn-cta:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .btn-cta:active { transform: none; }
}

.cta-row { margin-top: 38px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.btn-microtext { font-size: 13.5px; letter-spacing: 0.03em; color: var(--color-text-muted); }
.hero .btn-microtext, .cta-final .btn-microtext, .article-cta-final .btn-microtext { color: var(--color-text-light); opacity: 0.72; }

/* ---------- Navigation : dock flottant premium, subtil ---------- */
.site-header {
  position: fixed; top: 18px; left: 0; right: 0; z-index: 500;
  display: flex; justify-content: center; padding: 0 24px;
  opacity: 0;
  transform: translateY(-14px);
  animation: navIntro 680ms var(--ease-out) 120ms forwards;
}
.nav-container {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: rgba(102,0,31,0.72);
  border: 1px solid rgba(237,220,189,0.2);
  border-radius: 16px;
  padding: 9px 14px 9px 22px;
  box-shadow: 0 10px 30px rgba(20,0,6,0.14);
  transition: background var(--t-base), box-shadow var(--t-base);
}
/* Flou dépoli déporté sur un pseudo-élément : un backdrop-filter posé directement
   sur .nav-container piégerait le menu mobile (position:fixed) dans la pilule du header */
.nav-container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-header.scrolled .nav-container {
  background: rgba(102,0,31,0.90);
  box-shadow: 0 12px 34px rgba(20,0,6,0.22);
}
.nav-logo img { height: 38px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 16px; }
.nav-links-group {
  display: flex; align-items: center; gap: 2px;
  background: rgba(250,248,245,0.05);
  border: 1px solid rgba(250,248,245,0.10);
  border-radius: 999px; padding: 4px;
}
.nav-links-group a {
  display: inline-block;
  color: var(--color-text-light); font-size: 14px; letter-spacing: 0.01em;
  padding: 8px 16px; border-radius: 999px; opacity: 0.82;
  transition: background var(--t-fast), opacity var(--t-fast);
}
.nav-links-group a:hover { background: rgba(199,101,40,0.24); opacity: 1; }
.nav-links .btn-cta { padding: 9px 18px; font-size: 13px; font-weight: 500; border-radius: 999px; }
.nav-links .btn-cta::after { display: none; }

.hamburger { display: none; flex-direction: column; gap: 5px; padding: 12px; }
.hamburger span { width: 24px; height: 2px; background: var(--color-text-light); transition: transform var(--t-base), opacity var(--t-fast); }

/* ---------- Intro logo (home uniquement) : l'étincelle du monogramme devient une fenêtre
   qui grossit au scroll et révèle le hero à travers sa forme. Logo et texte restent
   immobiles (mécanique "fenêtre qui grossit", pas un zoom de caméra). Vectoriel de bout en
   bout (masque SVG recalculé à chaque image) : aucun pixel, à tout grossissement.
   Un seul écran de scroll, zéro scroll mort, rejouée à chaque visite. ---------- */
#site-intro { position: relative; height: 100vh; height: 100svh; background: var(--color-primary); }
#site-intro .intro-screen {
  position: fixed; inset: 0;
  z-index: 900;
  overflow: hidden;
  background: transparent;
}
#site-intro.is-done .intro-screen { visibility: hidden; pointer-events: none; }
.intro-svg { display: block; width: 100%; height: 100%; }
#intro-hole-star { }
.intro-svg text { font-family: var(--font-serif); font-weight: 600; fill: var(--color-primary); letter-spacing: 0.13em; }
.intro-svg .wm-big { font-size: 1.3em; }
.intro-hint {
  position: absolute; left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.55;
  transition: opacity 300ms var(--ease-out);
  pointer-events: none;
}
.intro-hint svg { width: 15px; height: 15px; animation: introHintPulse 1.9s ease-in-out infinite; }
@keyframes introHintPulse {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(5px); opacity: 0.95; }
}
/* Le hero attend la fin de l'intro pour jouer sa propre chorégraphie d'entrée.
   Le <noscript> du HTML annule ce verrou pour les visiteurs sans JavaScript. */
body:not(.intro-arrived) .hero,
body:not(.intro-arrived) .hero * { animation-play-state: paused !important; }
/* "Réduction des animations" système : pas d'intro, hero visible et animé immédiatement
   (même logique que le noscript, cf. reference/reveal system du site) */
@media (prefers-reduced-motion: reduce) {
  #site-intro { display: none; }
  .hero, .hero * { animation-play-state: running !important; }
}

/* ---------- Hero (bordeaux — signature) ---------- */
/* Le hero dépasse l'écran de 160px : le fondu vers l'ivoire reste sous le pli,
   invisible au premier écran quelle que soit la taille de l'écran (100svh = hauteur réelle). */
/* Bordeaux fixe, définitif : plus de pulsation de couleur sur le hero (le mouvement d'entrée
   se fait désormais via l'intro logo/étoile — inutile de le doubler ici, décision Kevin 21/07/2026). */
.hero { position: relative; isolation: isolate; background: var(--color-primary); min-height: calc(100vh + 160px); min-height: calc(100svh + 160px); display: flex; align-items: center; padding: clamp(88px, 8vh + 48px, 132px) 0 calc(clamp(32px, 5vh, 64px) + 160px); overflow: visible; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 76px; align-items: center; width: 100%; }
.hero .hero-main.reveal { opacity: 1; transform: none; transition: none; }
.hero .kicker { color: var(--color-text-light); opacity: 0; margin-bottom: 18px; transform: translateY(14px); animation: heroKickerIn 680ms var(--ease-out) 260ms forwards; }
.hero h1 { color: var(--color-text-light); font-weight: 600; font-size: clamp(40px, 4.6vw, 68px); line-height: 1.08; max-width: 19ch; opacity: 0; transform: translateY(26px); filter: blur(8px); animation: heroTitleIn 980ms var(--ease-out) 420ms forwards; }
.hero-subtext { font-size: 19px; line-height: 1.55; color: rgba(250,248,245,0.86); opacity: 0; margin: 20px 0 0; max-width: 600px; text-wrap: pretty; transform: translateY(20px); animation: heroCopyIn 780ms var(--ease-out) 700ms forwards; }
.hero .cta-row { margin-top: 28px; opacity: 0; transform: translateY(16px); animation: heroCopyIn 760ms var(--ease-out) 880ms forwards; }
.hero-meta { padding: 28px 0 6px 30px; border-left: 1px solid var(--line-light); }
/* Visages des fondateurs dans le hero : incarnation dès le premier écran (photos rondes, charte) */
.hero-faces { display: flex; margin-bottom: 14px; }
.hero-faces a { display: block; border-radius: 50%; position: relative; }
.hero-faces a + a { margin-left: -13px; }
.hero-faces img { display: block; width: 58px; height: 58px; border-radius: 50%; border: 2.5px solid rgba(250,248,245,0.75); background: #fffdf9; object-fit: cover; box-shadow: 0 4px 14px rgba(20,0,6,0.28); transition: transform var(--t-base), box-shadow var(--t-base); }
/* Survol : la tête survolée grossit légèrement avec un halo doux (clic -> section duo) */
@media (hover: hover) and (pointer: fine) {
  .hero-faces a:hover { z-index: 2; }
  .hero-faces a:hover img { transform: scale(1.14); box-shadow: 0 8px 24px rgba(20,0,6,0.4), 0 0 0 6px rgba(250,248,245,0.12); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-faces a:hover img { transform: none; }
}
.hero .hero-meta.reveal { opacity: 0; transform: translateX(24px); transition: none; animation: heroMetaIn 880ms var(--ease-out) 780ms forwards; }
.hero-meta .rule { display: block; width: 38px; height: 2px; background: var(--color-text-light); opacity: 0; margin-bottom: 20px; transform: scaleX(0); transform-origin: left; animation: heroRuleIn 620ms var(--ease-out) 1060ms forwards; }
.hero-meta p { font-size: 16px; line-height: 1.65; color: var(--color-text-light); opacity: 0.84; }
.hero-index { margin-top: 16px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-light); opacity: 0.56; line-height: 2; }
.hero-index-army { margin-top: 32px; display: flex; align-items: center; gap: 12px; letter-spacing: normal; text-transform: none; }
.hero-index-num { font-family: var(--font-serif); font-size: 32px; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--color-text-light); opacity: 1; }
.hero-index-plus { font-size: 19px; vertical-align: 5px; margin-left: 1px; }
.hero-index-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.4; opacity: 0.62; }

/* Signature hero : halo d'ambiance chaud, très lent et subtil, DERRIÈRE le contenu
   (z-index 0 < fondu ::after z-index 1 < contenu z-index 2). Ne touche jamais la lisibilité.
   Repli statique sous prefers-reduced-motion (règle charte). */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 48% at 24% 30%, rgba(176,86,31,0.11), rgba(176,86,31,0) 68%);
  animation: heroAura 16s ease-in-out infinite;
}
@keyframes heroAura {
  0%, 100% { opacity: 0.5; transform: translate3d(0, 0, 0) scale(1); }
  50%      { opacity: 1;   transform: translate3d(1.5%, -1%, 0) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; opacity: 0.72; }
}

@keyframes navIntro {
  to { opacity: 1; transform: none; }
}

@keyframes heroKickerIn {
  from { opacity: 0; transform: translateY(14px); letter-spacing: 0.24em; }
  to { opacity: 0.66; transform: none; letter-spacing: 0.18em; }
}

@keyframes heroTitleIn {
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes heroCopyIn {
  to { opacity: 1; transform: none; }
}

@keyframes heroMetaIn {
  to { opacity: 1; transform: none; }
}

@keyframes heroRuleIn {
  to { opacity: 0.4; transform: scaleX(1); }
}

/* Transition ultra-progressive : dégradé très long et subtil, quasi imperceptible sauf en bas */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 350px;
  background: linear-gradient(to bottom,
    rgba(102,0,31,0) 0%,
    rgba(102,0,31,0.02) 88%,
    rgba(102,0,31,0.08) 96%,
    var(--color-bg) 100%);
  z-index: 1;
  pointer-events: none;
}

/* ---------- Marquee : transition hero → constat ---------- */
/* ---------- Sections : fond transparent, le corps affiche le fond global ---------- */
section { padding: 100px 0; }
.section-pains,
.section-position,
.section-method,
.section-missions,
.section-about,
.section-proof,
.section-faq {
  background: transparent;
}
/* Séparateurs fins centrés entre sections (pas sur la FAQ, qui précède le CTA bordeaux) */
.section-pains,
.section-position,
.section-method,
.section-missions,
.section-about,
.section-proof {
  border-bottom: 1px solid var(--line-section);
}

/* ---------- Douleurs ---------- */
/* .pains-groups porte la grille 2 colonnes (2 groupes de 3) ; .pains-list devient une simple colonne interne à chaque groupe */
.pains-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; max-width: 980px; }
.pains-list { display: flex; flex-direction: column; }
.pains-list li { font-family: var(--font-serif); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.35; color: var(--color-text); padding: 24px 0; border-top: 1px solid var(--line); }
.pains-note { margin-top: 40px; font-size: 17px; color: var(--color-text-muted); max-width: 60ch; }

/* ---------- Positionnement : cards ---------- */
.position-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.position-block {
  background: var(--color-card); border: 1px solid var(--color-border-card);
  border-radius: 8px; box-shadow: 0 8px 32px rgba(22,22,22,0.04);
  padding: 36px;
}
.position-block .position-label { display: block; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line-beige); font-family: var(--font-serif); font-size: 26px; color: var(--color-primary); }
.position-block.neg .position-label { color: var(--color-text); opacity: 0.7; }
.position-list li { font-size: 17px; line-height: 1.55; padding: 14px 0 14px 24px; position: relative; border-bottom: 1px solid var(--line-beige); }
.position-list li:last-child { border-bottom: none; }
/* height 2px (pas 1px) : un trait de 1px sur une position absolue tombe souvent sur un pixel
   fractionnaire et s'anticrénèle en trait flou/fin selon sa position — 2px est robuste partout,
   trouvé le 21/07/2026 (les tirets rendaient différemment épais entre les 2 colonnes). */
.position-list li::before { content: ""; position: absolute; left: 0; top: 23px; width: 10px; height: 2px; background: var(--color-primary); }
/* color direct (pas d'opacity) : opacity sur le li assombrissait aussi le tiret ::before,
   qui doit rester identique des deux côtés (voir note ci-dessous) — bug trouvé le 21/07/2026 */
.position-block.neg .position-list li { color: var(--label); }
/* Tirets identiques des deux côtés (pos et neg) : même couleur, même épaisseur — coordination */

/* Ancres : le header est fixe (glass flottant) et peut masquer le haut des sections au clic sur un lien de nav */
section[id] { scroll-margin-top: 120px; }

/* ---------- Méthode : O.R.D.R.E., boucle de pilotage durable ---------- */
.section-method .section-head { max-width: 820px; }
.section-pains .section-head { max-width: 860px; }
.method-intro {
  max-width: 820px;
  margin: -22px 0 58px;
  padding-left: 22px;
  border-left: 2px solid rgba(102,0,31,0.18);
}
.method-intro p {
  margin: 0;
  font-size: 17px;
  line-height: 1.72;
  color: var(--color-text-muted);
}
.method-intro p + p { margin-top: 12px; }
.method-steps {
  --method-progress-frac: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 26px;
  margin-bottom: 46px;
  position: relative;
}
.method-steps::before,
.method-steps::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  height: 2px;
  border-radius: 999px;
}
.method-steps::before {
  right: 5px;
  background: rgba(199,101,40,0.28);
}
.method-steps::after {
  width: calc(100% - 10px);
  transform: scaleX(var(--method-progress-frac, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  box-shadow: 0 0 18px rgba(176,86,31,0.18);
  transition: transform 120ms linear;
  will-change: transform;
}
.method-progress-cursor {
  position: absolute;
  z-index: 3;
  top: 3px;
  left: clamp(5px, calc(var(--method-progress-frac, 0) * 100%), calc(100% - 5px));
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='880 648 150 142'%3E%3Cpath d='M960 683.6c6.3 17.4 17.4 23.8 48.9 28.4l18 2.5-26.2 7a147 147 0 0 0-31 10.8c-4.4 3.5-10 19.6-18.2 51.9-2.5 9.9-3.2 8.8-7.9-12.7-7.9-36.3-17-44.3-59.5-52.9-10.1-2-8.6-3 14.7-8.6 31.2-7.7 37.9-14.3 44.3-44.6 4.8-22 4.8-22 8-9.7a378 378 0 0 0 8.9 28'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='880 648 150 142'%3E%3Cpath d='M960 683.6c6.3 17.4 17.4 23.8 48.9 28.4l18 2.5-26.2 7a147 147 0 0 0-31 10.8c-4.4 3.5-10 19.6-18.2 51.9-2.5 9.9-3.2 8.8-7.9-12.7-7.9-36.3-17-44.3-59.5-52.9-10.1-2-8.6-3 14.7-8.6 31.2-7.7 37.9-14.3 44.3-44.6 4.8-22 4.8-22 8-9.7a378 378 0 0 0 8.9 28'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 8px 18px rgba(102,0,31,0.22));
  transform: translate(-50%, -50%);
  transition: left 120ms linear, opacity var(--t-fast), transform var(--t-fast), filter var(--t-fast);
  pointer-events: none;
}
.method-step { position: relative; z-index: 2; padding-top: 36px; }
.method-step::before {
  content: ""; position: absolute; top: -7px; left: -4px;
  width: 18px; height: 18px;
  background: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='880 648 150 142'%3E%3Cpath d='M960 683.6c6.3 17.4 17.4 23.8 48.9 28.4l18 2.5-26.2 7a147 147 0 0 0-31 10.8c-4.4 3.5-10 19.6-18.2 51.9-2.5 9.9-3.2 8.8-7.9-12.7-7.9-36.3-17-44.3-59.5-52.9-10.1-2-8.6-3 14.7-8.6 31.2-7.7 37.9-14.3 44.3-44.6 4.8-22 4.8-22 8-9.7a378 378 0 0 0 8.9 28'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='880 648 150 142'%3E%3Cpath d='M960 683.6c6.3 17.4 17.4 23.8 48.9 28.4l18 2.5-26.2 7a147 147 0 0 0-31 10.8c-4.4 3.5-10 19.6-18.2 51.9-2.5 9.9-3.2 8.8-7.9-12.7-7.9-36.3-17-44.3-59.5-52.9-10.1-2-8.6-3 14.7-8.6 31.2-7.7 37.9-14.3 44.3-44.6 4.8-22 4.8-22 8-9.7a378 378 0 0 0 8.9 28'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 0 var(--color-bg)) drop-shadow(0 8px 16px rgba(102,0,31,0.14));
  opacity: 0.9;
  transition: opacity var(--t-fast), filter var(--t-fast), transform var(--t-fast);
}
.method-step.is-method-active::before {
  opacity: 1;
  filter: drop-shadow(0 8px 18px rgba(102,0,31,0.22));
  transform: scale(1.14);
}
.method-index { display: inline-block; font-family: var(--font-serif); font-weight: 500; font-size: 34px; color: var(--color-primary); line-height: 1; }
.method-index-sep { color: var(--color-primary); opacity: 0.35; font-weight: 400; }
.method-step h3 { display: flex; align-items: baseline; gap: 10px; color: var(--color-primary); font-family: var(--font-serif); font-weight: 600; font-size: 24px; margin-bottom: 12px; }
.method-step p { font-size: 15.5px; line-height: 1.6; }
.method-cycle {
  position: relative;
  max-width: 860px;
  margin: 0 auto 38px;
  padding: 26px 32px;
  background: rgba(255,253,249,0.82);
  border: 1px solid rgba(102,0,31,0.08);
  border-left: 3px solid rgba(176,86,31,0.52);
  border-radius: 8px;
  box-shadow: 0 10px 34px rgba(22,22,22,0.035);
}
.method-cycle::before {
  display: none;
}
.method-cycle h3 {
  color: var(--color-primary);
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.16;
  margin: 0 0 12px;
}
.method-cycle p {
  max-width: 76ch;
  margin: 0;
  font-size: 16px;
  line-height: 1.66;
  color: var(--color-text);
}
.method-cycle p + p { margin-top: 10px; }
/* Bande de chiffres : panneau bordeaux arrondi posé sur l'ivoire (respiration + rythme).
   Contenu = faits vrais uniquement (voir .stats-band dans CLAUDE.md). */
.stats-band { padding: 8px 0 40px; }
.stats-band .container { max-width: 1000px; }
.stats-band-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--color-primary);
  border-radius: 16px;
  padding: 34px 24px;
  box-shadow: 0 16px 44px rgba(20,0,6,0.14);
}
.stats-band .stat { text-align: center; padding: 4px 10px; position: relative; }
.stats-band .stat + .stat::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: rgba(250,248,245,0.16); }
.stats-band .stat-num { display: block; font-family: var(--font-serif); font-size: 46px; line-height: 1; color: var(--color-text-light); }
.stats-band .stat-plus { font-size: 26px; vertical-align: 6px; }
.stats-band .stat-label { display: block; margin-top: 10px; font-size: 13px; letter-spacing: 0.02em; color: rgba(250,248,245,0.72); }

/* Évocation graphique Bilan Nova 360 (SVG maison, charte) : à droite du texte sur PC */
.method-cycle { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 6px 36px; align-items: center; }
.method-cycle h3 { grid-column: 1 / -1; }
.method-cycle p { grid-column: 1; }
.bilan-evocation { grid-column: 2; grid-row: 2 / span 3; margin: 0; align-self: center; max-width: 300px; }
.bilan-evocation svg { width: 100%; height: auto; display: block; background: #fffdf9; border: 1px solid rgba(102,0,31,0.10); border-radius: 12px; padding: 14px 14px 10px; box-shadow: 0 12px 34px rgba(22,22,22,0.05); }
.bilan-evocation figcaption { margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--color-text-muted, #8a8072); text-align: center; }

/* Animation du schéma Bilan Nova 360 (barres qui poussent, courbe qui se trace, points qui apparaissent),
   déclenchée au scroll via .reveal. Le bloc reste toujours visible ; seuls les éléments internes s'animent. */
.bilan-evocation.reveal { opacity: 1; transform: none; }
.bilan-evocation .bilan-bar { transform: scaleY(0); transform-box: fill-box; transform-origin: center bottom; transition: transform 0.95s var(--ease-out); }
.bilan-evocation.is-visible .bilan-bar.b1 { transform: scaleY(1); transition-delay: 0.08s; }
.bilan-evocation.is-visible .bilan-bar.b2 { transform: scaleY(1); transition-delay: 0.28s; }
.bilan-evocation.is-visible .bilan-bar.b3 { transform: scaleY(1); transition-delay: 0.48s; }
.bilan-evocation .bilan-trend { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.1s var(--ease-out) 0.6s; }
.bilan-evocation.is-visible .bilan-trend { stroke-dashoffset: 0; }
.bilan-evocation .bilan-dot { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; transition: opacity 0.4s ease, transform 0.45s var(--ease-out); }
.bilan-evocation.is-visible .bilan-dot.d1 { opacity: 1; transform: scale(1); transition-delay: 0.72s; }
.bilan-evocation.is-visible .bilan-dot.d2 { opacity: 1; transform: scale(1); transition-delay: 0.92s; }
.bilan-evocation.is-visible .bilan-dot.d3 { opacity: 1; transform: scale(1); transition-delay: 1.12s; }
@media (prefers-reduced-motion: reduce) {
  .bilan-evocation .bilan-bar, .bilan-evocation .bilan-dot { transform: none !important; opacity: 1 !important; transition: none !important; }
  .bilan-evocation .bilan-trend { stroke-dashoffset: 0 !important; transition: none !important; }
}
@media (max-width: 920px) {
  .method-cycle { grid-template-columns: 1fr; }
  .method-cycle p, .bilan-evocation { grid-column: 1; grid-row: auto; }
  .bilan-evocation { max-width: 300px; margin: 16px auto 0; }
}

/* Schéma avant/après : 2 blocs (avant / après) côte à côte sur PC, empilés sur mobile.
   Titres et légendes en HTML (toujours nets), diagrammes en SVG maison (charte). */
.avant-apres { max-width: 760px; margin: 40px auto 0; background: #fffdf9; border: 1px solid rgba(102,0,31,0.10); border-radius: 16px; padding: 26px 24px; box-shadow: 0 14px 40px rgba(22,22,22,0.05); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.avant-apres .avap-side { margin: 0; text-align: center; }
.avant-apres .avap-title { font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; margin: 0 0 10px; }
.avant-apres .avap-title--before { color: var(--color-primary); }
.avant-apres .avap-title--after { color: var(--color-accent); }
.avant-apres .avap-side svg { width: 100%; max-width: 240px; height: auto; display: block; margin: 0 auto; }
.avant-apres .avap-side figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--color-text-muted, #8a8072); }
.avant-apres .avap-arrow { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.avant-apres .avap-arrow span { font-family: var(--font-sans); font-size: 10px; font-weight: 600; letter-spacing: 1px; color: var(--color-accent); }
.avant-apres .avap-arrow svg { width: 30px; height: 30px; }
/* Pivot = marque (le schéma est AVANT la section méthode, donc O.R.D.R.E. y serait prématuré) */
.avant-apres .avap-arrow--brand .avap-brand-mark { display: block; width: 38px; height: auto; margin: 0 auto 4px; }

/* Schéma avant/après ANIMÉ au scroll (remplace la vidéo) : VOUS apparaît, les liens se fondent,
   les nœuds "pop" en cascade. Déclenché par .avap-block.reveal (is-visible, main.js). Repli
   reduced-motion + <noscript> = état final direct. */
.avant-apres .aa-hub,
.avant-apres .aa-nd circle,
.avant-apres .aa-ndm circle,
.avant-apres .aa-nds circle {
  transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0;
  transition: transform .8s cubic-bezier(.34,1.4,.5,1), opacity .6s ease;
}
.avant-apres .aa-ln { opacity: 0; transition: opacity .9s ease; }
.avap-block.is-visible .avant-apres .aa-nd circle,
.avap-block.is-visible .avant-apres .aa-ndm circle,
.avap-block.is-visible .avant-apres .aa-nds circle { transform: scale(1); opacity: 1; }
/* 1) AVANT (l'étoile) se construit d'abord */
.avap-block.is-visible .avant-apres .avap-side:first-of-type .aa-hub { transform: scale(1); opacity: 1; transition-delay: .15s; }
.avap-block.is-visible .avant-apres .avap-side:first-of-type .aa-ln { opacity: 1; transition-delay: .35s; }
.avap-block.is-visible .avant-apres .aa-nd circle:nth-child(1){transition-delay:.5s}
.avap-block.is-visible .avant-apres .aa-nd circle:nth-child(2){transition-delay:.62s}
.avap-block.is-visible .avant-apres .aa-nd circle:nth-child(3){transition-delay:.74s}
.avap-block.is-visible .avant-apres .aa-nd circle:nth-child(4){transition-delay:.86s}
.avap-block.is-visible .avant-apres .aa-nd circle:nth-child(5){transition-delay:.98s}
.avap-block.is-visible .avant-apres .aa-nd circle:nth-child(6){transition-delay:1.1s}
/* 2) APRÈS (l'arbre) enchaîne juste derrière (légère attente ~0,2s, pas de trou qui traîne) */
.avap-block.is-visible .avant-apres .avap-side:last-of-type .aa-hub { transform: scale(1); opacity: 1; transition-delay: 1.3s; }
.avap-block.is-visible .avant-apres .avap-side:last-of-type .aa-ln { opacity: 1; transition-delay: 1.5s; }
.avap-block.is-visible .avant-apres .aa-ndm circle:nth-child(1){transition-delay:1.62s}
.avap-block.is-visible .avant-apres .aa-ndm circle:nth-child(2){transition-delay:1.74s}
.avap-block.is-visible .avant-apres .aa-ndm circle:nth-child(3){transition-delay:1.86s}
.avap-block.is-visible .avant-apres .aa-nds circle:nth-child(1){transition-delay:1.98s}
.avap-block.is-visible .avant-apres .aa-nds circle:nth-child(2){transition-delay:2.1s}
.avap-block.is-visible .avant-apres .aa-nds circle:nth-child(3){transition-delay:2.22s}
@media (prefers-reduced-motion: reduce) {
  .avant-apres .aa-hub, .avant-apres .aa-nd circle, .avant-apres .aa-ndm circle, .avant-apres .aa-nds circle { transform: none !important; opacity: 1 !important; transition: none !important; }
  .avant-apres .aa-ln { opacity: 1 !important; transition: none !important; }
}
/* Phrase de conclusion du schéma avant/après : apparaît en dernier (payoff), s'adresse au dirigeant */
.avap-conclusion { max-width: 620px; margin: 24px auto 0; text-align: center; font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif); font-style: italic; font-size: clamp(18px, 2.3vw, 22px); line-height: 1.4; color: var(--color-primary); opacity: 0; transition: opacity .7s ease; }
.avap-block.is-visible .avap-conclusion { opacity: 1; transition-delay: 2.5s; }
@media (max-width: 620px) { .avap-conclusion { font-size: 17px; margin-top: 18px; } }
@media (prefers-reduced-motion: reduce) { .avap-conclusion { opacity: 1 !important; transition: none !important; } }
@media (max-width: 620px) {
  .avant-apres { grid-template-columns: 1fr; gap: 6px; padding: 22px 18px; }
  .avant-apres .avap-arrow { flex-direction: row; justify-content: center; gap: 8px; margin: 4px 0; }
  .avant-apres .avap-arrow--brand .avap-brand-mark { margin: 0; }
  .avant-apres .avap-arrow svg { transform: rotate(90deg); width: 26px; height: 26px; }
}

/* Avant/après en vidéo (motion design maison, palette charte) : remplace la comparaison
   statique par défaut ; le schéma SVG ci-dessus reste dans le DOM comme fallback
   (prefers-reduced-motion, sans JS) et n'est affiché que dans ces cas-là. */
.avap-media { max-width: 720px; margin: 36px auto 0; }
.avap-video-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #faf7f1;
  border: 1px solid rgba(102,0,31,0.10);
  box-shadow: 0 8px 32px rgba(22,22,22,0.04);
}
.avap-video { display: none; width: 100%; height: auto; background: #faf7f1; }
.avap-video--desktop { display: block; }
.avap-media-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  text-align: center;
  color: var(--color-text-muted, #8a8072);
}
.avap-media-caption-before,
.avap-media-caption-after { font-weight: 600; }
.avap-media-caption-before { color: var(--color-primary); }
.avap-media-caption-after { color: var(--color-accent); }
.avap-media-caption-sep { color: var(--color-accent); }

.avap-static-fallback { display: none; }

@media (max-width: 620px) {
  .avap-video--desktop { display: none; }
  .avap-video--mobile { display: block; }
  /* Carte portrait 4:5 : on plafonne la hauteur du cadre (aspect-ratio) et on recadre
     (object-fit: cover) les marges vides haut/bas du fichier 9:16 SANS rapetissir le
     schéma (il reste à la largeur du cadre). Les légendes "Aujourd'hui/Structuré" sont
     hors vidéo (.avap-media-caption), donc jamais rognées. Compatible avec le futur
     rendu 4:5 (qui remplira alors le cadre sans aucun recadrage). */
  .avap-media { max-width: 340px; margin: 28px auto 0; }
  .avap-video-wrap { aspect-ratio: 4 / 5; }
  .avap-video--mobile {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (min-width: 621px) {
  .avap-video--mobile { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .avap-media { display: none; }
  .avap-static-fallback { display: grid; }
}

/* ---------- Missions : progression et emboîtement, grille 3 cartes desktop ---------- */
.section-missions .section-head { max-width: 780px; }
.missions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; perspective: 1200px; }
.mission-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255,253,249,0.85);
  border: 1px solid rgba(102,0,31,0.10);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(22,22,22,0.04);
  min-height: 100%;
  padding: 30px 28px;
  color: var(--color-text);
  transform: translateY(0) scale(1);
  transform-origin: center;
  transition:
    transform 260ms var(--ease-out),
    box-shadow 260ms var(--ease-out),
    border-color 220ms ease,
    background 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .mission-card:hover {
    z-index: 2;
    transform: translateY(-8px) scale(1.018);
    border-color: rgba(102,0,31,0.28);
    background: rgba(255,253,249,0.96);
    box-shadow: 0 28px 68px rgba(102,0,31,0.13), 0 12px 34px rgba(22,22,22,0.05);
  }
}
/* Mission phare : traitement distinctif façon médaille, sans icône gadget */
.mission-card--featured {
  border: 1.5px solid var(--color-primary);
  background: rgba(255,253,249,0.95);
  box-shadow: 0 10px 40px rgba(102,0,31,0.12);
  transform: translateY(-10px);
}
@media (hover: hover) and (pointer: fine) {
  .mission-card--featured:hover {
    transform: translateY(-16px) scale(1.018);
    box-shadow: 0 30px 72px rgba(102,0,31,0.18), 0 14px 36px rgba(22,22,22,0.055);
  }
}
/* Tag "Mission phare" : détaché du badge inline, en haut à droite, pour se démarquer visuellement des 3 autres missions */
.mission-featured-tag {
  position: absolute;
  top: -1px; right: 28px;
  background: var(--color-primary);
  color: var(--color-text-light);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 15px 6px;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 18px rgba(102,0,31,0.28);
}
.mission-card h3 {
  color: var(--color-primary);
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 10px;
}
.mission-card p {
  color: var(--color-text-muted);
  font-size: 15.5px;
  line-height: 1.58;
  margin: 0;
  max-width: 60ch;
  flex-grow: 1; /* pousse note + CTA en bas : les 3 CTA restent alignés dans la grille */
}
.mission-note {
  display: block;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(102,0,31,0.08);
  color: var(--label);
  font-size: 13px;
  line-height: 1.5;
}
.mission-tool {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 14px;
  padding: 6px 10px;
  border: 1px solid rgba(102,0,31,0.12);
  border-radius: 999px;
  background: rgba(237,220,189,0.4);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 14px rgba(102,0,31,0.07);
  transition: box-shadow var(--t-base), background var(--t-base);
}
/* Reflet lumineux qui balaie la pastille au survol de la carte */
.mission-tool::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,253,247,0.75), transparent);
  transform: skewX(-20deg);
  transition: left 650ms var(--ease-out);
  pointer-events: none;
}
.mission-tool-mark {
  width: 13px;
  height: 13px;
  fill: currentColor;
  flex: 0 0 auto;
  transition: transform var(--t-base);
}
/* Souris/trackpad uniquement : au survol. Sur tactile, ces mêmes déclencheurs :hover
   n'ont pas de sens (pas de "survol" au doigt) et risqueraient de rester "collés" après
   un tap — même règle de prudence tactile que le reste du site (cf. mission-card:hover). */
@media (hover: hover) and (pointer: fine) {
  .mission-card:hover .mission-tool {
    background: rgba(237,220,189,0.62);
    box-shadow: 0 8px 22px rgba(102,0,31,0.13);
  }
  .mission-card:hover .mission-tool::after { left: 130%; }
  .mission-card:hover .mission-tool-mark { transform: scale(1.18) rotate(-8deg); }
}
/* Tactile / pas de vrai survol (90%+ des visiteurs de ce site, cf. Principe directeur n°1) :
   le même reflet joue UNE FOIS, automatiquement, quand la carte apparaît au scroll — réutilise
   la classe .is-visible déjà posée par l'observateur de reveal existant (main.js), sans JS
   supplémentaire. Sinon cet effet "premium" restait invisible pour l'écrasante majorité des
   visiteurs (trouvé le 21/07/2026). */
@media (hover: none), (pointer: coarse) {
  @media (prefers-reduced-motion: no-preference) {
    .mission-card.is-visible .mission-tool::after { animation: missionToolShineOnce 900ms 500ms var(--ease-out) forwards; }
    .mission-card.is-visible .mission-tool-mark { animation: missionToolMarkPopOnce 900ms 500ms var(--ease-out) forwards; }
  }
}
@keyframes missionToolShineOnce { from { left: -60%; } to { left: 130%; } }
@keyframes missionToolMarkPopOnce { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.18) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) {
  .mission-tool::after { display: none; }
  .mission-card:hover .mission-tool-mark { transform: none; }
}
.mission-method {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--label);
  letter-spacing: 0.01em;
}
.mission-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}
.mission-cta::after {
  content: "\2192";
  transition: transform var(--t-base);
}
.mission-card:hover .mission-cta::after { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
  .mission-card:hover { transform: none; }
  .mission-card--featured:hover { transform: translateY(-10px); }
}

/* ---------- À propos : cards + portraits ronds (identité déjà validée) ---------- */
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 980px; margin: 0 auto 50px; align-items: start; }
.about-person {
  background: var(--color-card); border: 1px solid var(--color-border-card);
  border-radius: 8px; box-shadow: 0 8px 32px rgba(22,22,22,0.04);
  padding: 32px;
  display: grid; grid-template-rows: auto auto auto 1fr; align-content: start;
}
.about-person.offset { margin-top: 0; }
/* Portraits ronds, identiques pour Kevin et Oscianne (glow crème intégré à la photo) */
.about-photo { position: relative; width: 100%; max-width: 240px; aspect-ratio: 1 / 1; margin: 0 auto 22px; overflow: hidden; border-radius: 50%; background: #fff; border: 3px solid rgba(102,0,31,0.08); box-shadow: 0 8px 32px rgba(22,22,22,0.06); transition: box-shadow 0.4s var(--ease-out); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; transition: transform 0.4s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .about-photo:hover { box-shadow: 0 12px 40px rgba(22,22,22,0.10); }
  .about-photo:hover img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .about-photo:hover img { transform: none; } }
.about-photo-fallback { display: none; aspect-ratio: 4 / 5; background: var(--ivory-soft); border: 1px solid var(--line); align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 46px; color: var(--color-primary); opacity: 0.8; }
.about-person h3 { color: var(--color-primary); font-family: var(--font-serif); font-weight: 500; font-size: 26px; margin-bottom: 4px; }
.about-person .role { display: block; min-height: 2.7em; font-size: 12.5px; line-height: 1.35; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); font-weight: 600; margin-bottom: 14px; }
.about-person p { font-size: 15.8px; line-height: 1.65; margin: 0; max-width: 46ch; }
.about-person p + p { margin-top: 12px; }
.about-text { max-width: 760px; font-size: 19px; line-height: 1.65; color: var(--color-text); padding-top: 24px; border-top: 1px solid var(--line); }

/* Citation tagline : bandeau centré, une ligne desktop */
.section-quote {
  position: relative;
  background: var(--ivory-soft);
  border: 1px solid rgba(102,0,31,0.30);
  border-radius: 999px;
  padding: 18px 64px;
  margin: 0 auto 48px;
  max-width: min(1040px, 100%);
  text-align: center;
  box-shadow: 0 16px 42px rgba(102,0,31,0.07);
}
.section-quote::before,
.section-quote::after {
  position: absolute;
  font-family: var(--font-serif); line-height: 1;
  color: #b0561f; opacity: 0.28;
  pointer-events: none; font-size: 64px;
}
.section-quote::before { content: "\201C"; top: -8px; left: 22px; }
.section-quote::after { content: "\201D"; bottom: -28px; right: 22px; }
.section-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(17px, 1.12vw, 19px);
  line-height: 1.25;
  color: var(--color-primary);
  margin: 0;
  text-wrap: balance;
}

/* ---------- Recommandations (lettres officielles, extraits anonymisés) ---------- */
.reco-block { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.reco-block .kicker { margin-bottom: 24px; }
.reco-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; max-width: 980px; }
.reco-card {
  position: relative; overflow: hidden; margin: 0;
  background: linear-gradient(135deg, rgba(102,0,31,0.032) 0%, var(--color-card) 60%);
  border: 1px solid var(--color-border-card);
  border-radius: 8px; box-shadow: 0 8px 32px rgba(22,22,22,0.04);
  padding: 30px 34px;
}
.reco-card blockquote { margin: 0; }
.reco-card blockquote p { font-family: var(--font-serif); font-style: italic; font-size: 20px; line-height: 1.5; color: var(--color-primary); margin: 0; }
.reco-card figcaption { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(176,86,31,0.15); font-size: 13px; letter-spacing: 0.04em; color: var(--color-text-muted); }
.reco-note { margin: 18px 0 0; font-size: 13px; color: var(--label); }

/* ---------- Preuve / réassurance : cards ---------- */
.trust-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  max-width: 100%;
  margin-bottom: 0;
  perspective: 1200px;
}
.trust-item {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(102,0,31,0.032), rgba(255,253,249,0.92) 26%, rgba(255,253,249,0.88));
  border: 1px solid rgba(102,0,31,0.15);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(102,0,31,0.065), 0 8px 28px rgba(22,22,22,0.035);
  padding: 30px 26px 28px;
  transform: translateY(0) scale(1);
  transform-origin: center;
  transition:
    transform 260ms var(--ease-out),
    box-shadow 260ms var(--ease-out),
    border-color 220ms ease,
    background 260ms var(--ease-out);
}
.trust-item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), rgba(176,86,31,0.58), transparent 82%);
}
.trust-item:hover {
  z-index: 2;
  transform: translateY(-8px) scale(1.025);
  border-color: rgba(102,0,31,0.28);
  background: linear-gradient(180deg, rgba(102,0,31,0.052), rgba(255,253,249,0.96) 28%, rgba(255,253,249,0.91));
  box-shadow: 0 28px 68px rgba(102,0,31,0.13), 0 12px 34px rgba(22,22,22,0.05);
}
.trust-num { display: inline-block; font-family: var(--font-serif); font-size: 32px; line-height: 1; color: var(--color-primary); margin-right: 10px; vertical-align: baseline; }
.trust-item h3 {
  display: inline;
  position: relative;
  z-index: 1;
  color: var(--color-primary);
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.14;
  margin-bottom: 12px;
}
.trust-item p { position: relative; z-index: 1; font-size: 15px; line-height: 1.6; color: var(--color-text); margin: 0; }
.tools-label { max-width: 860px; font-size: 16px; line-height: 1.72; letter-spacing: 0; color: var(--color-text-muted); margin: 0 0 20px; }
.tools-label strong { color: var(--color-primary); font-weight: 600; }
.tools-row { display: flex; flex-wrap: wrap; gap: 12px 34px; align-items: baseline; font-family: var(--font-serif); font-weight: 500; color: var(--color-primary); font-size: 24px; }

/* ---------- FAQ : cards ---------- */
.faq-list { max-width: 820px; display: grid; gap: 16px; }
.faq-item {
  background: var(--color-card); border: 1px solid var(--color-border-card);
  border-radius: 8px; box-shadow: 0 8px 32px rgba(22,22,22,0.04);
  padding: 0 28px;
}
.faq-question { width: 100%; text-align: left; padding: 24px 44px 24px 0; font-family: var(--font-serif); font-size: 23px; font-weight: 500; color: var(--color-text); position: relative; transition: color var(--t-fast); }
.faq-question:hover { color: var(--color-primary); }
.faq-question::after { content: ""; position: absolute; right: 4px; top: 32px; width: 12px; height: 12px; background: linear-gradient(var(--color-primary),var(--color-primary)) center/12px 1.5px no-repeat, linear-gradient(var(--color-primary),var(--color-primary)) center/1.5px 12px no-repeat; transition: transform var(--t-base); }
.faq-question[aria-expanded="true"]::after { transform: rotate(135deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--t-base); }
.faq-answer p { padding: 0 40px 26px 0; margin: 0; font-size: 16.5px; color: var(--color-text-muted); }
.faq-answer a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(102,0,31,0.35); white-space: nowrap; }
.faq-answer a:hover { text-decoration-color: var(--color-primary); }
/* FAQ repliée : 3 questions visibles, les autres derrière "Voir plus" (display:contents
   pour que les items gardent l'espacement de .faq-list) */
.bio-short { display: none; } /* bio courte du duo : mobile uniquement */
.faq-more { display: contents; }
.faq-more[hidden] { display: none; }
.faq-toggle {
  justify-self: center;
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  color: var(--color-primary);
  padding: 13px 26px;
  background: rgba(102,0,31,0.06);
  border: 1.5px solid rgba(102,0,31,0.30);
  border-radius: 999px;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.faq-toggle::after { content: "\2193"; font-size: 15px; transition: transform var(--t-base); }
.faq-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.faq-toggle:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-light); }

/* ---------- CTA final (bordeaux — signature) ---------- */
.cta-final { position: relative; isolation: isolate; overflow: hidden; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='50 2 200 200'%3E%3Cpath fill='%23faf8f5' fill-opacity='0.06' d='M150 10 C153 78 174 99 242 102 C174 105 153 126 150 194 C147 126 126 105 58 102 C126 99 147 78 150 10 Z'/%3E%3C/svg%3E") no-repeat right -30px center / 360px auto, var(--color-primary); padding: 64px 0; }
/* Transition ivoire → bordeaux en haut de section : miroir exact du fondu du hero */
.cta-final::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 350px;
  background: linear-gradient(to top,
    rgba(102,0,31,0) 0%,
    rgba(102,0,31,0.02) 88%,
    rgba(102,0,31,0.08) 96%,
    var(--color-bg) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Fondu bordeaux -> noir du footer : même recette que les fondus haut/bas, vers --color-footer */
.cta-final::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 160px;
  background: linear-gradient(to bottom,
    rgba(26,26,26,0) 0%,
    rgba(26,26,26,0.02) 88%,
    rgba(26,26,26,0.08) 96%,
    var(--color-footer) 100%);
  z-index: 1;
  pointer-events: none;
}
.cta-final .container { position: relative; z-index: 2; }
.cta-final .cta-inner { max-width: 720px; }
.cta-final .kicker { color: var(--color-text-light); opacity: 0.66; margin-bottom: 24px; }
.cta-final h2 { color: var(--color-text-light); max-width: 26ch; }
.cta-final p { color: var(--color-text-light); opacity: 0.86; max-width: 50ch; margin: 22px 0 0; font-size: 19px; }

/* Rareté honnête : capacité réelle limitée, une seule occurrence sur le site */
.cta-final p.cta-scarcity { color: var(--color-text-light); opacity: 0.82; font-size: 15.5px; max-width: 52ch; margin: 16px 0 0; padding-left: 14px; border-left: 2px solid var(--color-accent); }

/* ---------- Alternative email sous le CTA Calendly ---------- */
.cta-alt { margin: 20px 0 0; font-size: 15px; color: var(--color-text-light); opacity: 0.72; }
.cta-alt a { color: var(--color-text-light); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(250,248,245,0.5); transition: opacity var(--t-fast), text-decoration-color var(--t-fast); }
.cta-alt a:hover { opacity: 1; text-decoration-color: currentColor; }

/* ---------- Footer : minimaliste ---------- */
.site-footer { background: var(--color-footer); color: var(--color-text-light); padding: 15px 0 10px; }
.footer-brand { align-self: start; }
.footer-brand img { height: 44px; width: auto; margin: 0 0 6px; }
.footer-brand p { font-size: 11px; opacity: 0.5; max-width: 30ch; line-height: 1.3; margin: 0; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.35fr); gap: 18px; align-items: start; padding-bottom: 8px; border-bottom: 1px solid rgba(250,248,245,0.14); }
.footer-col h3 { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--color-text-light); opacity: 0.55; margin: 0 0 4px; }
.footer-col a, .footer-col p { display: block; font-size: 12px; line-height: 1.3; color: var(--color-text-light); opacity: 0.75; margin: 0 0 2px; transition: opacity var(--t-fast); }
.footer-col a:hover { opacity: 1; }
.footer-socials { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 2px; }
.footer-socials a { margin: 0; }
.footer-legal p { max-width: 58ch; opacity: 0.48; line-height: 1.4; }
.footer-bottom { padding-top: 5px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 11px; letter-spacing: 0.03em; opacity: 0.7; }
.footer-bottom p { margin: 0; color: var(--color-text-light); }
.footer-bottom-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-bottom-links a { color: var(--color-text-light); opacity: 0.82; transition: opacity var(--t-fast); }
.footer-bottom-links a:hover { opacity: 1; }

/* ---------- Reveal ---------- */
/* ---------- Bandeau cookies (RGPD / CNIL) : accepter et refuser au même niveau ---------- */
.cookie-banner {
  position: fixed;
  bottom: 20px; left: 20px; right: 20px;
  z-index: 500;
  max-width: 620px;
  margin-inline: auto;
  background: var(--ivory-soft);
  border: 1px solid rgba(102,0,31,0.18);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(22,22,22,0.16);
  padding: 20px 22px;
}
.cookie-banner p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--color-text); }
.cookie-banner a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner-actions { display: flex; gap: 12px; }
.cookie-btn {
  flex: 1;
  font-family: var(--font-sans); font-weight: 600; font-size: 14.5px;
  padding: 11px 18px; border-radius: 999px;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cookie-accept { background: var(--color-accent); color: var(--color-text-light); border: 1px solid var(--color-accent); }
.cookie-accept:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
/* Fond plein (comme .cookie-accept) : même poids visuel pour Accepter et Refuser, aucun des deux
   boutons ne doit être plus engageant que l'autre (délibération CNIL 2020-091) */
.cookie-refuse { background: var(--color-primary); color: var(--color-text-light); border: 1px solid var(--color-primary); }
.cookie-refuse:hover { background: #4d0017; border-color: #4d0017; }
@media (max-width: 560px) {
  /* Bannière cookies mobile : fine et discrète (texte compact, boutons bas) */
  .cookie-banner { bottom: 10px; left: 10px; right: 10px; padding: 13px 15px 12px; }
  .cookie-banner p { font-size: 13px; line-height: 1.45; margin-bottom: 10px; }
  .cookie-banner-actions { gap: 8px; }
  .cookie-banner .cookie-btn { padding: 10px 14px; font-size: 13.5px; flex: 1; }
}

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal:not(.is-visible) { will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(18px); }
.stagger.is-visible > * { opacity: 1; transform: none; transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
.stagger.is-visible > *:nth-child(1){transition-delay:.00s}
.stagger.is-visible > *:nth-child(2){transition-delay:.05s}
.stagger.is-visible > *:nth-child(3){transition-delay:.10s}
.stagger.is-visible > *:nth-child(4){transition-delay:.15s}
.stagger.is-visible > *:nth-child(5){transition-delay:.20s}
.stagger.is-visible > *:nth-child(6){transition-delay:.25s}
.stagger.is-visible > *:nth-child(7){transition-delay:.30s}
.stagger.is-visible > *:nth-child(8){transition-delay:.35s}

/* ========================================================================
   TOUCH INTERACTIONS — 3 animations tactiles épurées
   Uniquement transform et opacity. Neutralisées par la règle
   reduced-motion globale ci-dessous.
   ======================================================================== */

/* 1. Mission cards : tap lift */
.tap-lift {
  transform: translateY(-6px) scale(1.012) !important;
  box-shadow: 0 22px 54px rgba(102,0,31,0.11), 0 10px 28px rgba(22,22,22,0.04) !important;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out !important;
}
.mission-tool.tap-shine::after {
  animation: missionToolShineOnce 800ms ease-out forwards !important;
}
.mission-tool-mark.tap-pop {
  animation: missionToolMarkPopOnce 600ms ease-out forwards !important;
}

/* 2. CTA ripple */
.cta-ripple {
  position: absolute;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(250,248,245,0.28);
  transform: translate(-50%, -50%) scale(0);
  animation: ctaRippleExpand 650ms ease-out forwards;
  pointer-events: none;
  z-index: 1;
}
@keyframes ctaRippleExpand {
  0%   { width: 0; height: 0; opacity: 1; transform: translate(-50%, -50%) scale(0); }
  100% { width: 300px; height: 300px; opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* 3. Stats band : pulse au tap */
.stat.tap-pulse {
  animation: statTapPulse 500ms ease-out;
}
@keyframes statTapPulse {
  0%  { transform: scale(1); }
  30% { transform: scale(1.08); }
  100%{ transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  .trust-item:hover { transform: none !important; }
  .site-header,
  .hero .kicker,
  .hero h1,
  .hero-subtext,
  .hero .cta-row,
  .hero-meta,
  .hero-meta .rule {
    transform: none !important;
    filter: none !important;
  }
  .site-header,
  .hero h1,
  .hero .cta-row,
  .hero-meta { opacity: 1 !important; }
  .hero .kicker { opacity: 0.66 !important; }
  .hero-subtext { opacity: 1 !important; }
  .hero-meta .rule { opacity: 0.4 !important; }
  .method-steps { --method-progress-frac: 1; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 920px) {
  .container { padding-inline: clamp(20px, 5vw, 30px); }
  section { padding: 80px 0; }
  /* Hero mobile/tablette : hauteur adaptée au contenu (fini le "trou bordeaux" de la plage 560-920px). Sous 560px, la règle dédiée resserre encore. */
  .hero { min-height: auto; align-items: start; padding: clamp(92px, 11vh, 116px) 0 48px; }
  .hero-grid { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .hero h1 { font-size: clamp(42px, 8vw, 60px); }
  .hero-subtext { font-size: 19px; }
  .hero .cta-row { margin-top: 26px; }
  .hero-meta { max-width: 48ch; margin-top: 4px; padding: 18px 18px 16px; border: 1px solid var(--line-light); border-radius: 12px; background: rgba(255,253,249,0.05); }
  .hero-meta .rule { display: none; }
  .hero-faces { margin-bottom: 10px; }
  .hero-index-army { margin-top: 16px; }
  .section-head { margin-bottom: 48px; }

  .site-header { top: 12px; padding: 0 14px; }
  .nav-container { padding: 8px 10px 8px 16px; border-radius: 14px; }
  .nav-logo img { height: 32px; }

  /* Menu compact : panneau déroulant sous la pilule du header (plus de plein écran vide) */
  .nav-links {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-primary);
    border: 1px solid rgba(237,220,189,0.18);
    border-radius: 16px;
    padding: 8px 10px 12px;
    box-shadow: 0 18px 42px rgba(20,0,6,0.34);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--t-fast), transform var(--t-base), visibility var(--t-base);
    pointer-events: none;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .nav-links-group { flex-direction: column; align-items: stretch; gap: 0; background: none; border: none; border-radius: 0; padding: 0; }
  .nav-links-group a { padding: 13px 14px; font-size: 16px; opacity: 0.92; border-radius: 8px; border-bottom: 1px solid rgba(250,248,245,0.10); }
  .nav-links-group a:last-child { border-bottom: 0; }
  .nav-links-group a:hover { background: rgba(199,101,40,0.20); opacity: 1; }
  .nav-links .btn-cta { margin-top: 12px; width: 100%; justify-content: center; padding: 13px 18px; font-size: 14px; }
  .hamburger { display: flex; }
  .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .pains-groups { grid-template-columns: 1fr; gap: 28px; }
  .position-cols { grid-template-columns: 1fr; gap: 16px; }
  .position-block { padding: 28px; }

  /* Méthode : timeline verticale sur mobile */
  .method-intro { margin: -14px 0 42px; padding-left: 18px; }
  .method-steps { grid-template-columns: 1fr; gap: 32px; }
  .method-steps::before {
    top: 6px;
    bottom: 6px;
    left: 4px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .method-steps::after {
    top: 6px;
    left: 4px;
    width: 2px;
    height: calc(100% - 12px);
    transform: scaleY(var(--method-progress-frac, 0));
    transform-origin: top;
    max-width: none;
  }
  .method-progress-cursor {
    top: clamp(6px, calc(var(--method-progress-frac, 0) * 100%), calc(100% - 6px));
    left: 5px;
    transition: top 120ms linear, opacity var(--t-fast), transform var(--t-fast);
  }
  .method-step { padding: 0 0 0 28px; }
  .method-step::before { top: -3px; left: -5px; }
  .method-cycle { margin-inline: 0; padding: 24px 24px; }
  .method-cycle::before { display: none; }

  /* Tablette : missions en lecture verticale, à-propos reste en 2 colonnes */
  .missions-grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
  .mission-card { padding: 26px 24px; }
  .mission-card--featured { transform: none; }
  .mission-card--featured:hover { transform: translateY(-8px) scale(1.018); }

  .about-grid { gap: 20px; max-width: none; }
  .about-person { padding: 28px; }
  .about-person.offset { margin-top: 0; }
  .about-photo { max-width: 200px; }

  .trust-row { grid-template-columns: 1fr 1fr; gap: 16px; }
  .faq-list { gap: 12px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 16px 22px; }
  .footer-legal { grid-column: 1 / -1; }
  .footer-legal p { max-width: none; }
}

@media (max-width: 920px) and (prefers-reduced-motion: reduce) {
  .mission-card:hover,
  .mission-card--featured:hover { transform: none !important; }
}

@media (max-width: 560px) {
  .cta-final { background-size: 260px auto; background-position: right -70px top 30px; }
  body { font-size: 16px; }
  /* Hero mobile : hauteur réduite, contenu en haut (fini le grand trou bordeaux) */
  .hero { min-height: auto; align-items: start; padding: 84px 0 40px; }
  .hero h1 { font-size: clamp(27px, 8vw, 33px); }
  .hero .kicker { font-size: 10px; letter-spacing: 0.12em; }
  .hero-subtext { font-size: 16px; }
  .hero-meta { padding: 15px 16px 14px; }
  .hero-meta p { font-size: 15px; }
  .hero-index { margin-top: 12px; }
  .hero-index-army { margin-top: 14px; }
  .hero-index-num { font-size: 27px; }
  /* ===== Densité premium mobile (Kevin, 17/07) : tout plus fin et serré, façon Apple/Stripe ===== */
  section { padding: 54px 0; }
  .section-head { margin-bottom: 26px; }
  h2 { font-size: 25px; line-height: 1.18; }
  .kicker { font-size: 12px; }
  .section-head .lead { font-size: 15px; margin-top: 12px; line-height: 1.55; }
  .pains-qualifier { font-size: 13px; margin-top: 8px; }
  /* Douleurs en petites cartes (plus visuel que la liste plate) */
  .pains-list { gap: 10px; }
  .pains-list li { font-size: 15.5px; line-height: 1.35; padding: 13px 15px; border-top: 0; background: rgba(255,253,249,0.85); border: 1px solid rgba(102,0,31,0.10); border-radius: 10px; }
  .pains-note { font-size: 14.5px; }
  /* Missions : cartes fines */
  .missions-grid { grid-template-columns: 1fr; gap: 14px; }
  .mission-card { padding: 18px 16px; }
  .mission-card h3 { font-size: 20px; }
  .mission-card p { font-size: 14.5px; line-height: 1.55; }
  .mission-tool { font-size: 10.5px; padding: 4px 9px; gap: 5px; margin-top: 10px; }
  .mission-tool .mission-tool-mark { width: 10px; height: 10px; }
  .mission-cta { font-size: 14px; }
  .mission-featured-tag { font-size: 9px; padding: 5px 12px 4px; letter-spacing: 0.12em; }
  .method-cycle h3 { font-size: 21px; }
  .method-intro p, .method-step p, .method-cycle p { font-size: 14.5px; line-height: 1.6; }
  .method-step h3 { font-size: 20px; gap: 8px; }
  .method-index { font-size: 27px; }
  /* Positionnement + confiance + FAQ + CTA : textes affinés */
  .position-block { padding: 20px 18px; }
  .position-list li { font-size: 14.5px; }
  .trust-item h3 { font-size: 18px; }
  .trust-item p { font-size: 14.5px; line-height: 1.55; }
  .faq-question { font-size: 15.5px; }
  .faq-answer p { font-size: 14.5px; line-height: 1.6; }
  .about-text { font-size: 15px; }
  /* Bouton "Voir plus" FAQ : plus fin et petit sur mobile (pas aussi gros que le CTA) */
  .faq-toggle { margin-top: 16px; padding: 9px 18px; font-size: 13.5px; border-width: 1px; gap: 7px; }
  .faq-toggle::after { font-size: 13px; }
  /* Recommandations : citations affinées */
  .reco-grid { gap: 12px; }
  .reco-card { padding: 16px 18px; }
  .reco-card blockquote p { font-size: 15px; line-height: 1.5; }
  .reco-card figcaption { margin-top: 12px; padding-top: 10px; font-size: 11.5px; }
  /* Pourquoi nous : cartes compactes, chiffres intégrés à la ligne du titre */
  .trust-item { padding: 16px 16px; }
  .trust-num { display: inline-block; font-size: 24px; margin: 0 8px 0 0; vertical-align: -2px; }
  .trust-item h3 { display: inline; font-size: 18px; }
  .trust-item p { margin-top: 8px; }
  /* CTA final : moins de bordeaux, bouton raisonnable */
  .cta-final { padding: 46px 0 42px; }
  .cta-final h2 { font-size: 24px; }
  .cta-final p { font-size: 14.5px; line-height: 1.55; }
  .cta-final p.cta-scarcity { font-size: 13px; margin-top: 12px; }
  .cta-final .cta-row { margin-top: 22px; }
  .btn-cta { padding: 13px 24px; font-size: 15px; }
  .hero .btn-cta { padding: 11.5px 21.5px; font-size: 13.5px; }
  .nav-links .btn-cta { padding: 11px 18px; font-size: 13px; }
  /* Bande de chiffres : 2x2 sur mobile */
  .stats-band { padding: 4px 0 30px; }
  .stats-band-grid { grid-template-columns: 1fr 1fr; gap: 22px 0; padding: 26px 16px; border-radius: 14px; }
  .stats-band .stat-num { font-size: 38px; }
  .stats-band .stat-label { font-size: 12px; margin-top: 7px; }
  .stats-band .stat:nth-child(2)::before { display: none; }
  .stats-band .stat:nth-child(3)::before, .stats-band .stat:nth-child(4)::before { top: -11px; bottom: auto; left: 12%; right: 12%; width: auto; height: 1px; }
  /* Duo côte à côte sur mobile : photo + nom + rôle + bio courte (les bios longues restent sur PC ;
     la citation et le texte "12 ans d'armée" juste dessous portent l'histoire) */
  .about-grid { grid-template-columns: 1fr 1fr; gap: 12px; max-width: none; }
  .about-person { padding: 18px 12px; text-align: center; }
  .about-photo { max-width: 92px; margin-inline: auto; }
  .about-person h3 { font-size: 17px; margin-top: 12px; }
  .about-person .role { font-size: 11.5px; }
  .about-person p { display: none; }
  .about-person p.bio-short { display: block; font-size: 13px; line-height: 1.5; margin-top: 10px; color: var(--color-text); }
  .section-quote { border-radius: 8px; padding: 24px 28px; }
  .section-quote::before { font-size: 44px; top: -4px; left: 10px; }
  .section-quote::after { font-size: 44px; bottom: -20px; right: 10px; }
  .section-quote p { white-space: normal; font-size: 18px; }
  .trust-row { grid-template-columns: 1fr; }
  .site-footer { padding: 20px 0 12px; }
}

/* Footer accordéon : REPLIÉ sur tablette + mobile (≤920px), DÉPLOYÉ sur PC (>920px).
   Les titres deviennent des toggles ; le panneau tapé s'étale en dessous. Sans JS, tout reste visible. */
@media (max-width: 920px) {
  .footer-grid { display: flex; flex-wrap: wrap; gap: 0 14px; padding-bottom: 8px; }
  .footer-brand { flex: 1 1 100%; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
  .footer-brand img { width: 96px; height: auto; }
  .footer-brand p { font-size: 11.5px; margin: 0; }
  .footer-col { flex: 1 1 0; min-width: 0; border-top: 1px solid rgba(250,248,245,0.12); }
  .footer-col h3 { margin: 0; padding: 11px 0; font-size: 11px; letter-spacing: 0.1em; line-height: 1.3; display: flex; justify-content: space-between; align-items: center; gap: 4px; }
  .footer-accordion .footer-col h3 { cursor: pointer; }
  .footer-accordion .footer-col h3::after { content: "▾"; font-size: 9px; opacity: 0.55; flex-shrink: 0; }
  .footer-accordion .footer-col.open h3::after { content: "▴"; }
  .footer-accordion .footer-col > *:not(h3) { display: none; }
  .footer-accordion .footer-col.open > *:not(h3) { display: block; }
  .footer-accordion .footer-col.open { flex-basis: 100%; padding-bottom: 12px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-bottom-links { gap: 10px 16px; }
  /* Cibles tactiles footer plus confortables au doigt (>=24px) */
  .footer-col a, .footer-col p { padding: 4px 0; margin: 0; line-height: 1.4; }
  .footer-bottom-links a { padding: 5px 2px; }
}