/* ============================================================
   L2C TECH · Landing page livre blanc IAtisation™
   Portage statique de « LP IAtisation v5.dc.html ».

   Polices de marque, servies localement :
   - Display : Neulis Cursive, le fichier sous licence fourni par L2C.
     Fredoka, qui ne servait que de substitut dans le design system,
     n'est plus chargée.
   - Corps : pile Helvetica native, conformément au brandbook.
   ============================================================ */

@font-face {
  font-family: 'Neulis Cursive';
  src: url('/assets/fonts/neulis-cursive-regular.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Bleu --- */
  --blue-950: #10202F;
  --blue-900: #16283A;
  --blue-800: #1E374D;
  --blue-700: #26445F;
  --blue-600: #345876;
  --blue-500: #4A7091;
  --blue-400: #7595AE;
  --blue-300: #A7BECD;
  --blue-200: #D3DEE6;
  --blue-100: #EAF0F4;
  --blue-50:  #F4F7F9;

  /* --- Accent : le turquoise L2C Group, valide comme couleur de la page.
         L'echelle violette L2C Tech reste disponible dans l'historique Git. --- */
  --accent-800: #1C6B52;
  --accent-700: #237A5D;
  --accent-600: #2E9B77;
  --accent-500: #45CDA1;
  --accent-400: #6BD8B4;
  --accent-300: #97E4CC;
  --accent-200: #C6F0E2;
  --accent-100: #E6F9F2;
  --accent-50:  #F1FCF8;

  /* --- Neutres --- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F9FB;
  --neutral-100: #EEF2F5;
  --neutral-200: #DFE5EB;
  --neutral-300: #C6D0D8;
  --neutral-400: #9AA7B2;
  --neutral-500: #6B7A88;
  --neutral-600: #4C5A67;
  --neutral-700: #35424E;
  --neutral-800: #212C36;
  --neutral-900: #131B23;

  /* --- Statuts --- */
  --status-danger: #E05541;
  --status-danger-soft: #FBE7E3;

  /* --- Verdicts du scoring, redefinis par le theme turquoise --- */
  --verdict-go-ink: var(--accent-800);
  --verdict-go-soft: var(--accent-100);
  --verdict-mid-ink: var(--blue-600);
  --verdict-mid-soft: var(--blue-100);
  --verdict-no-ink: var(--status-danger);
  --verdict-no-soft: var(--status-danger-soft);

  /* --- Alias sémantiques --- */
  --surface-page: var(--neutral-50);
  --border-subtle: var(--neutral-200);
  --text-strong:  var(--blue-900);
  --text-body:    var(--neutral-700);
  --text-muted:   var(--neutral-500);
  --text-subtle:  var(--neutral-400);

  --gradient-atmos: radial-gradient(120% 120% at 20% 0%, #2E5578 0%, #26445F 45%, #16283A 100%);

  /* --- Typographie --- */
  --font-display: 'Neulis Cursive', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;

  --text-2xs: 0.6875rem;
  --tracking-tight: -0.02em;
  --tracking-caps: 0.12em;

  /* --- Rayons --- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* --- Ombres --- */
  --shadow-sm: 0 2px 6px rgba(22, 40, 58, 0.07);
  --shadow-md: 0 8px 20px -6px rgba(22, 40, 58, 0.12);
  --shadow-lg: 0 18px 40px -12px rgba(22, 40, 58, 0.18);
  --shadow-xl: 0 30px 64px -20px rgba(22, 40, 58, 0.26);
  --shadow-tech: 0 14px 34px -12px rgba(69, 205, 161, 0.42);

  /* --- Mouvement --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* --- Surfaces récurrentes de la page sombre --- */
  --line: rgba(255, 255, 255, .14);
  --panel: rgba(255, 255, 255, .06);
  --ink-1: #fff;
  --ink-2: rgba(255, 255, 255, .82);
  --ink-3: rgba(255, 255, 255, .70);
  --ink-4: rgba(255, 255, 255, .62);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-2);
  background: #16283A;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.page {
  background: var(--gradient-atmos);
  background-attachment: fixed;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  margin: 0;
  /* Un mot long ne doit jamais depasser sa colonne : sur mobile
     « reglementairement » sortait du cadre et se faisait rogner. */
  overflow-wrap: break-word;
  hyphens: auto;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  line-height: 1.02;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--ink-1); text-decoration: none; }
a:hover { color: var(--accent-300); }
button { font: inherit; color: inherit; }

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

.skip-link {
  position: absolute; left: 20px; top: 20px; z-index: 200;
  transform: translateY(-200%);
  padding: 12px 20px; border-radius: var(--radius-md);
  background: var(--accent-500); color: #fff;
  font-size: 14px; font-weight: 700;
  transition: transform var(--dur-base) var(--ease-standard);
}
.skip-link:focus-visible { transform: translateY(0); color: #fff; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Trame ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 28px; }
.eyebrow {
  font-size: var(--text-2xs); font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--accent-300);
}
.eyebrow--mute { color: var(--ink-4); }
.lede { font-size: 16px; line-height: 1.7; color: var(--ink-2); }

/* ---------- Bouton, variante « tech » du design system ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding-inline: 22px; border: 0; border-radius: var(--radius-md);
  background: var(--accent-500); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  letter-spacing: .01em; white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.btn:hover { background: var(--accent-600); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-tech); }
.btn:active { transform: translateY(0); }
.btn--sm { height: 36px; font-size: 13px; padding-inline: 16px; }
.btn--md { height: 44px; font-size: 14px; }
.btn--lg { height: 52px; font-size: 16px; padding-inline: 28px; }
.btn--full { width: 100%; }

.btn-ghost {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .34); border-radius: var(--radius-md);
  font-size: 13px; font-weight: 600; color: #fff;
  transition: border-color var(--dur-base) var(--ease-standard),
              background-color var(--dur-base) var(--ease-standard);
}
.btn-ghost:hover { border-color: var(--accent-300); background: rgba(69, 205, 161, .16); color: #fff; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }

/* ---------- En-tête ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(22, 40, 58, .78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 16px;
}
.site-header img { height: 36px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a:not(.btn) { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.site-nav a:not(.btn):hover { color: var(--accent-300); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 520px at 88% 0%, rgba(69, 205, 161, .26), transparent 62%);
}
.hero__motif { position: absolute; top: -24px; right: -60px; width: 200px; opacity: .75; pointer-events: none; }
.hero .wrap { position: relative; padding-block: clamp(64px, 8vw, 112px) clamp(56px, 6vw, 80px); }

.brand-dots { display: inline-flex; gap: 3px; }
.brand-dots i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent-500); display: block; }
.brand-dots i:nth-child(2) { transform: translateY(5px); }
.brand-dots i:nth-child(3) { background: var(--blue-700); transform: translateY(-2px); }

.hero h1 {
  margin-top: 28px;
  font-size: clamp(2.6rem, 6.6vw, 5.4rem);
  line-height: .98;
  max-width: 18ch;
}
.hero h1 span { display: block; color: var(--accent-500); }

.hero__intro {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 40px; margin-top: 40px; align-items: end;
}
.hero__intro p:not(.eyebrow) { max-width: 54ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; }
.hero__cta { display: flex; flex-direction: column; gap: 12px; justify-self: end; min-width: 260px; }
.hero__cta .eyebrow { text-align: right; }

.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; margin-top: clamp(56px, 6vw, 80px); }

.card-guide {
  display: grid; grid-template-columns: minmax(0, 128px) minmax(min(200px, 100%), 1fr);
  gap: 26px; align-items: center; padding: 26px;
  border-radius: var(--radius-xl); background: var(--panel); border: 1px solid var(--line);
}
.card-guide__cover { border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-lg); }
.card-guide__cover img { width: 100%; height: auto; }

.card-test {
  position: relative; padding: 26px; border-radius: var(--radius-xl);
  background: rgba(69, 205, 161, .14); border: 1.5px solid rgba(69, 205, 161, .4);
  overflow: hidden;
}
.card-test__motif { position: absolute; right: -18px; bottom: -22px; width: 140px; opacity: .14; pointer-events: none; }
.card-test > *:not(.card-test__motif) { position: relative; }

.card h3 { font-size: 22px; line-height: 1.1; }

.choice {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: var(--radius-md);
  border: 1.5px solid var(--line); background: rgba(22, 40, 58, .5);
  font-size: 14px; font-weight: 500; color: #fff;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.choice:first-child { border-color: var(--accent-400); }
.choice:hover { border-color: var(--accent-500); box-shadow: var(--shadow-tech); transform: translateY(-1px); color: #fff; }
.choice span { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--neutral-300); flex: none; }
.choice:first-child span { border-color: var(--accent-500); }

/* ---------- Bandeau de confiance ---------- */
.trust { border-block: 1px solid var(--line); background: rgba(255, 255, 255, .04); }
.trust .wrap { padding-block: 24px; display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(72px, 8vw, 112px); }
.section h2 { margin-top: 20px; font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 22ch; }
.section > .wrap > .lede { margin-top: 20px; max-width: 58ch; }

/* Sections sur fond blanc : la méthode et le test.
   Le reste de la page est sombre, on inverse donc l'encre localement. */
.section--light {
  position: relative;
  background: #fff;
  color: var(--text-body);
  overflow: hidden;
}
.section--light h2, .section--light h3, .section--light h4 { color: var(--blue-700); }
.section--light .eyebrow { color: var(--accent-600); }
.section--light .eyebrow--mute { color: var(--text-muted); }
.section--light .lede { color: var(--text-body); }
.section--light .motif { position: absolute; pointer-events: none; }

/* Section sombre encadrée : le sommaire du guide. */
.section--deep {
  position: relative;
  background: rgba(0, 0, 0, .24);
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.section--deep .motif { position: absolute; bottom: -50px; right: -70px; width: 300px; opacity: .4; pointer-events: none; }
.section--deep > .wrap { position: relative; }

/* ---------- Scoring ---------- */
.scorer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px; margin-top: 52px; align-items: start; }

.scorer__panel { padding: 30px; border-radius: var(--radius-xl); background: var(--surface-page); border: 1px solid var(--border-subtle); }
.scorer__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 20px; }
/* Le libelle d'echelle tient sur une ligne, c'est l'intitule qui cede. */
.scorer__head .eyebrow:last-child { white-space: nowrap; flex: none; }
.dim { padding: 16px 0; border-top: 1px solid var(--border-subtle); }
.dim__row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.dim__name { font-size: 14.5px; font-weight: 600; color: var(--blue-700); }
.dim__cells { display: flex; gap: 6px; flex: none; }
.dim__cells button {
  width: 22px; height: 22px; padding: 0; border-radius: 5px; cursor: pointer;
  border: 1.5px solid var(--border-subtle); background: #fff;
  transition: transform var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.dim__cells button:hover { transform: translateY(-2px); border-color: var(--accent-300); }
.dim__cells button[aria-pressed="true"] { background: var(--accent-500); border-color: var(--accent-500); }
.dim__note { margin-top: 7px; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }

.verdict {
  padding: 30px; border-radius: var(--radius-xl);
  background: var(--accent-50); border: 1.5px solid var(--accent-200);
  box-shadow: var(--shadow-md); color: var(--text-body);
}
.verdict .eyebrow { color: var(--text-muted); }
.verdict__score { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; }
.verdict__score b {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(3.4rem, 6vw, 4.8rem); line-height: .9;
  letter-spacing: var(--tracking-tight); color: var(--blue-700);
}
.verdict__score span { font-family: var(--font-display); font-size: 20px; color: var(--text-muted); }
.verdict__bar { height: 8px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--accent-100); overflow: hidden; margin-top: 24px; }
.verdict__bar i { display: block; height: 100%; border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-out), background-color var(--dur-base) var(--ease-standard); }
.verdict__tag { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 10px 18px; border-radius: var(--radius-pill); }
.verdict__tag i { width: 9px; height: 9px; border-radius: 3px; }
.verdict__tag b { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: var(--tracking-tight); text-transform: uppercase; }
.verdict__line { margin-top: 20px; font-size: 14px; line-height: 1.7; }
.verdict__foot { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--accent-200); }
.verdict__foot p { font-size: 12.5px; line-height: 1.65; color: var(--text-muted); }

/* Parcours, sur fond clair */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px; margin-top: 22px; }
.steps li { padding: 18px 20px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
.steps li:last-child { background: var(--accent-50); border: 1.5px solid var(--accent-300); box-shadow: none; }
.steps span { font-family: var(--font-display); font-size: 13px; color: var(--accent-500); }
.steps li:last-child span { color: var(--accent-600); }
.steps b { display: block; margin-top: 8px; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--blue-700); text-transform: uppercase; }
.steps p { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--text-muted); }

/* ---------- Sommaire du guide ---------- */
.guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(40px, 5vw, 72px); align-items: start; }
.guide__aside { position: sticky; top: 104px; align-self: start; }
.guide__aside h2 { max-width: 16ch; font-size: clamp(2rem, 4.2vw, 3.2rem); }
.guide__aside > p:not(.eyebrow) { margin-top: 20px; max-width: 44ch; font-size: 15.5px; line-height: 1.7; color: rgba(255, 255, 255, .84); }
.guide__pages { display: flex; gap: 12px; margin-top: 34px; }
.guide__pages figure { flex: 1; margin: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .14); }
.guide__pages img { width: 100%; height: auto; }

.toc { display: flex; flex-direction: column; gap: 10px; }
.toc li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: start;
  padding: 22px 24px; border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: var(--panel);
  transition: transform var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              background-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.toc li:hover { transform: translateX(5px); border-color: rgba(69, 205, 161, .55); background: rgba(69, 205, 161, .12); }
.toc li.is-act { border: 1.5px solid rgba(69, 205, 161, .5); background: rgba(69, 205, 161, .16); }
.toc li.is-act:hover { transform: translateY(-2px); box-shadow: var(--shadow-tech); }
.toc span { font-family: var(--font-display); font-size: 18px; color: var(--accent-300); }
.toc h4 { font-size: 17px; line-height: 1.15; }
.toc p { margin-top: 7px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.toc li.is-act p { color: var(--ink-2); }
/* « .toc li » est plus specifique que « .toc__cta » : sans le li ici,
   le CTA heritait de la grille 44px et se cassait. */
.toc li.toc__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 14px; padding: 22px 24px; border-radius: var(--radius-lg);
  border: 1px dashed rgba(255, 255, 255, .3); background: none;
}
.toc li.toc__cta:hover { transform: none; border-color: rgba(255, 255, 255, .3); background: none; }
.toc li.toc__cta p { margin-top: 0; font-size: 14.5px; font-weight: 600; color: #fff; }

/* ---------- Encart test, sur fond clair ---------- */
.testbox {
  position: relative; max-width: 1200px; margin: 0 auto;
  padding: clamp(32px, 5vw, 60px); border-radius: var(--radius-2xl);
  background: var(--accent-50); border: 1.5px solid var(--accent-200); overflow: hidden;
}
.testbox__motif { position: absolute; right: -30px; top: -40px; width: 240px; opacity: .14; pointer-events: none; }
.testbox > *:not(.testbox__motif) { position: relative; }
.testbox .eyebrow { color: var(--accent-700); }
.testbox h2 { max-width: 20ch; font-size: clamp(2rem, 4.2vw, 3.2rem); color: var(--blue-700); }
.testbox .lede { margin-top: 20px; max-width: 56ch; color: var(--text-body); }
.testbox__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; margin-top: 40px; align-items: stretch; }
.testbox__steps { display: flex; flex-direction: column; gap: 10px; }
.testbox__steps li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 16px 20px; border-radius: var(--radius-md);
  background: #fff; border: 1px solid var(--accent-100);
}
.testbox__steps span { font-family: var(--font-display); font-size: 15px; color: var(--accent-600); }
.testbox__steps p { font-size: 14.5px; line-height: 1.5; color: var(--blue-700); }
.testbox__preview {
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
  padding: 26px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-md);
}
.tag-soft { font-size: 12px; font-weight: 700; color: var(--accent-700); padding: 5px 12px; border-radius: var(--radius-pill); background: var(--accent-100); }
.meter { height: 8px; border-radius: var(--radius-pill); background: var(--neutral-100); overflow: hidden; margin-top: 20px; }
.meter i { display: block; width: 58%; height: 100%; border-radius: var(--radius-pill); background: var(--accent-500); }

/* ---------- Auteurs ---------- */
.authors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 22px; margin-top: 44px; }
.author { padding: 26px; border-radius: var(--radius-xl); border: 1px solid var(--line); background: var(--panel); }
.author__photo {
  width: 120px; height: 120px; border-radius: var(--radius-md); overflow: hidden;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.author__photo img { width: 100%; height: 100%; object-fit: cover; }
.author__photo b { font-family: var(--font-display); font-weight: 600; font-size: 34px; color: var(--accent-300); }
.author h4 { margin-top: 20px; font-size: 19px; }
.author p:not(.eyebrow) { margin-top: 14px; font-size: 14px; line-height: 1.7; color: var(--ink-3); }
.author .eyebrow { display: block; margin-top: 6px; }

/* Avec trois auteurs, la citation se retrouvait seule en bout de grille.
   Elle prend toute la largeur sur sa propre ligne, ce qui lui donne aussi
   la respiration qu'une citation merite. */
.authors .pull { grid-column: 1 / -1; }
.authors .pull blockquote { max-width: 46ch; }

.pull {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: 26px; border-radius: var(--radius-xl); background: var(--blue-700); overflow: hidden;
}
.pull__motif { position: absolute; right: -50px; bottom: -40px; width: 220px; opacity: .5; pointer-events: none; }
.pull > *:not(.pull__motif) { position: relative; }
.pull blockquote { margin: 0; font-size: clamp(16px, 1.5vw, 19px); font-weight: 500; line-height: 1.5; color: #fff; }

/* ---------- Téléchargement ---------- */
.download { position: relative; padding-block: clamp(72px, 8vw, 112px); background: rgba(0, 0, 0, .22); border-top: 1px solid var(--line); overflow: hidden; }
.download__motif { position: absolute; top: -40px; left: -60px; width: 340px; opacity: .45; pointer-events: none; }
.download .wrap { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: clamp(40px, 6vw, 80px); align-items: center; }
.download figure { margin: 0; max-width: 380px; width: 100%; justify-self: center; border-radius: 10px; overflow: hidden; box-shadow: 0 50px 90px -34px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .2); }
.download figure img { width: 100%; height: auto; }
.download h2 { max-width: 17ch; font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.download p.lede { margin-top: 22px; max-width: 48ch; }
.chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.chips span {
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: rgba(255, 255, 255, .9);
  padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, .3);
}

/* ---------- FAQ ---------- */
.faq { max-width: 880px; margin: 0 auto; padding-block: clamp(56px, 7vw, 96px) clamp(72px, 8vw, 104px); }
.faq h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); max-width: none; }
.faq__list { margin-top: 40px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 600; color: #fff;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent-300); }
.faq__item summary::after { content: "+"; flex: none; font-size: 20px; line-height: 1; color: var(--accent-300); }
.faq__item[open] summary::after { content: "\2212"; }
.faq__item p { padding-bottom: 22px; max-width: 66ch; font-size: 14.5px; line-height: 1.75; }

/* ---------- Pied de page ---------- */
.site-footer { background: rgba(0, 0, 0, .3); border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 72px) 36px; }
.site-footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.site-footer img { height: 32px; width: auto; }
.site-footer__logo { display: block; width: max-content; }
.site-footer__cols { display: flex; gap: 40px; flex-wrap: wrap; }
.site-footer__cols div div { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.site-footer a, .site-footer span.muted { font-size: 14px; color: rgba(255, 255, 255, .8); }
.site-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--line);
}
.site-footer__bottom p, .site-footer__bottom a { font-size: 12px; color: var(--ink-4); }

/* ---------- Barre collante ---------- */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(22, 40, 58, .9); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(120%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.stickybar.is-visible { transform: translateY(0); }
.stickybar .wrap { padding-block: 12px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.stickybar p { font-size: 14px; font-weight: 600; color: #fff; }
.stickybar div { display: flex; align-items: center; gap: 12px; }

/* ---------- Motifs de fond ----------
   Le scintillement des pixels vit dans les SVG eux-memes. Ici on ajoute
   une derive tres lente des grands motifs, pour que le fond respire sans
   jamais attirer l'oeil. Les deux s'arretent si l'utilisateur a demande
   moins d'animation. */
@keyframes derive {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-14px, 16px, 0); }
}
@keyframes derive-miroir {
  0%, 100% { transform: translate3d(0, 0, 0) scaleX(-1); }
  50%      { transform: translate3d(14px, -16px, 0) scaleX(-1); }
}
.hero__motif,
.section--light .motif,
.section--deep .motif,
.download__motif,
.pull__motif,
.card-test__motif,
.testbox__motif {
  animation: derive 26s ease-in-out infinite;
  will-change: transform;
}
/* « .section--light .motif » est plus specifique qu'un simple
   « .motif--flip » : sans le contexte ici, la bascule miroir etait
   perdue et le motif repartait sur l animation non inversee. */
.section--light .motif--flip { animation-name: derive-miroir; }
.section--deep .motif { animation-duration: 34s; }
.download__motif { animation-duration: 30s; }
.pull__motif, .card-test__motif, .testbox__motif { animation-duration: 38s; }

@media (prefers-reduced-motion: reduce) {
  .hero__motif,
  .section--light .motif,
  .section--deep .motif,
  .download__motif,
  .pull__motif,
  .card-test__motif,
  .testbox__motif { animation: none; }
}

/* ---------- Formulaire de téléchargement ---------- */
.lead {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 1.5px solid rgba(69, 205, 161, .4);
  border-radius: var(--radius-xl);
  background: #1B3247;
  color: var(--ink-2);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .75);
}
.lead::backdrop {
  background: rgba(10, 20, 32, .72);
  backdrop-filter: blur(4px);
}
.lead[open] { animation: leadEntre var(--dur-base) var(--ease-out); }
@keyframes leadEntre {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .lead[open] { animation: none; } }

.lead__form { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 30px; }
.lead h2 { font-size: 26px; line-height: 1.05; }
.lead__intro { font-size: 14px; line-height: 1.6; color: var(--ink-3); }

.lead__fermer {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .08); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-standard);
}
.lead__fermer:hover { background: rgba(255, 255, 255, .16); }

.lead__champ { display: flex; flex-direction: column; gap: 7px; }
.lead__duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 12px; }
.lead__champ > span {
  font-size: var(--text-2xs); font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--ink-4);
}
.lead__champ em { font-style: normal; opacity: .7; }
.lead__champ input {
  width: 100%; min-height: 48px; padding: 0 16px;
  border: 1.5px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-md);
  background: rgba(10, 20, 32, .5);
  color: #fff; font: inherit; font-size: 15px;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.lead__champ input::placeholder { color: rgba(255, 255, 255, .34); }
.lead__champ input:focus { outline: none; border-color: var(--accent-500); }
.lead__champ input[aria-invalid="true"] { border-color: var(--status-danger); }

.lead__consent { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.lead__consent input { margin: 2px 0 0; width: 17px; height: 17px; flex: none; accent-color: var(--accent-500); }
.lead__consent span { font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }

.lead__erreur {
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: rgba(224, 85, 65, .16); border: 1px solid rgba(224, 85, 65, .45);
  font-size: 13px; line-height: 1.5; color: #FFD9D2;
}

.lead__legal { font-size: 11.5px; line-height: 1.55; color: var(--ink-4); }
.lead__legal a { color: var(--accent-300); text-decoration: underline; text-underline-offset: 2px; }

/* État « envoi en cours » */
.lead__form[data-occupe] .btn { opacity: .65; pointer-events: none; }

@media (max-width: 420px) {
  .lead__form { padding: 24px 20px; gap: 14px; }
  .lead h2 { font-size: 22px; }
}

/* ---------- Adaptations ---------- */
@media (max-width: 900px) {
  .site-nav a:not(.btn) { display: none; }
  .guide__aside { position: static; }
}
@media (max-width: 640px) {
  .wrap { padding-inline: 20px; }
  .hero__cta { justify-self: stretch; min-width: 0; }
  .hero__cta .eyebrow { text-align: left; }
  .card-guide { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .card-guide__cover { max-width: 140px; }
  .stickybar p { display: none; }
  .stickybar div { width: 100%; }
  .stickybar .btn { flex: 1; }
}