/* ============================================================
   Ldn Consulting — Consultant IA pour PME
   Système de design partagé (5 pages)
   Inspiration Stripe : typographie aérienne, hairlines, max 1120px
   Palette stricte : #ffffff · #f6f9fc · #061b31 · #64748b
                     #e5edf5 · #533afd · #15be53
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Palette enregistrée — la seule source de couleur */
  --bg: #ffffff;
  --surface: #f6f9fc;
  --fg: #061b31;
  --muted: #64748b;
  --border: #e5edf5;
  --accent: #533afd;
  --accent-secondary: #15be53;

  /* Dérivés (transparents d'une couleur enregistrée — jamais un hex hors palette) */
  --accent-tint-6: color-mix(in srgb, var(--accent) 6%, white);
  --accent-tint-12: color-mix(in srgb, var(--accent) 12%, white);
  --accent-soft: color-mix(in srgb, var(--accent) 10%, white);
  --fg-soft: color-mix(in srgb, var(--fg) 4%, white);
  --success-tint: color-mix(in srgb, var(--accent-secondary) 12%, white);

  /* Typographie */
  --font-display: 'Source Serif 4', 'Source Sans 3', Georgia, 'Iowan Old Style', system-ui, serif;
  --font-numeric: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* Échelle typographique (1.25) */
  --fs-display: clamp(2.25rem, 5vw, 3.5rem);
  --fs-h1: clamp(1.875rem, 4vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 3vw, 2rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  /* Rayons — jamais au-dessus de 8px sauf cercles */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* Espacement — grille de base 8px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;

  /* Conteneur */
  --container: 1120px;
  --gutter: 24px;

  /* Navigation */
  --nav-h: 64px;

  /* Ombres — uniquement au hover / dropdowns */
  --shadow-sm: 0 1px 2px rgba(23, 23, 23, 0.04);
  --shadow-md: 0 4px 12px rgba(23, 23, 23, 0.07);
  --shadow-lg: 0 12px 32px rgba(23, 23, 23, 0.08);
  --shadow-accent: 0 8px 24px color-mix(in srgb, var(--accent) 28%, transparent);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; transition: color 0.15s var(--ease); }
a:hover { color: var(--fg); }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul, ol { list-style: none; }

/* ---------- Typographie ---------- */
h1, h2, h3, h4, .sector__title {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--fg);
  line-height: 1.15;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }
h4, .sector__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
p { color: var(--fg); }
.lead { font-size: 1.125rem; color: var(--muted); line-height: 1.6; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
strong { font-weight: 600; }
small { font-size: var(--fs-small); }
code, kbd { font-family: var(--font-mono); font-size: 0.9em; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 760px; }
.section { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-8); }
.section--subtle { background: var(--surface); }
.section--dark { background: var(--fg); color: var(--bg); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--bg); }
.section--dark p { color: color-mix(in srgb, var(--bg) 78%, transparent); }
.section-head { max-width: 640px; margin-bottom: var(--space-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.stack > * + * { margin-top: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.divider { height: 1px; background: var(--border); border: 0; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}
.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.brand b { font-weight: 600; }
.brand span { color: var(--muted); font-weight: 400; }
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav__links a {
  color: var(--fg);
  font-size: 0.9375rem;
  font-weight: 400;
}
.nav__links a.is-active { color: var(--accent); }
.nav__cta { display: flex; align-items: center; gap: var(--space-3); }
.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  align-items: center; justify-content: center;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: ""; display: block;
  width: 20px; height: 2px;
  background: var(--fg);
  position: relative;
  transition: transform 0.2s var(--ease);
}
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after { position: absolute; top: 6px; }
body.menu-open .nav__toggle span { background: transparent; }
body.menu-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
body.menu-open .nav__toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
  cursor: pointer;
}
.btn--primary {
  background: var(--accent);
  color: var(--bg);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, var(--fg));
  color: var(--bg);
  box-shadow: var(--shadow-md);
}
.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--border);
}
.btn--ghost:hover { border-color: var(--fg); color: var(--fg); }
.btn--on-dark {
  background: var(--bg);
  color: var(--fg);
}
.btn--on-dark:hover { background: color-mix(in srgb, var(--bg) 88%, var(--accent)); color: var(--fg); }
.btn--outline-dark {
  background: transparent;
  color: var(--bg);
  border-color: color-mix(in srgb, var(--bg) 32%, transparent);
}
.btn--outline-dark:hover { border-color: var(--bg); color: var(--bg); }
.btn--lg { padding: 16px 36px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn .arrow { transition: transform 0.18s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Badges & pills ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--accent-tint-6);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.badge--neutral { background: var(--surface); color: var(--muted); }
.badge--success { background: var(--success-tint); color: color-mix(in srgb, var(--accent-secondary) 70%, var(--fg)); }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---------- Métriques typographiques (langage visuel) ---------- */
.stat-num {
  font-family: var(--font-numeric);
  font-weight: 300;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.stat-num--dark { color: var(--bg); }
.stat-label {
  font-size: var(--fs-small);
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.metric-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent-secondary);
  flex-shrink: 0;
}
.metric-bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--border);
  overflow: hidden;
}
.metric-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  width: 0;
  transition: width 1.2s var(--ease);
}
.animate .metric-bar > i { width: var(--fill, 70%); }

/* ---------- Cards ---------- */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.card--hover:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--fg) 14%, var(--border)); }
.card--surface { background: var(--surface); border-color: transparent; }

/* ---------- Grilles ---------- */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ---------- Pain cards (douleurs) ---------- */
.pain { display: flex; flex-direction: column; gap: var(--space-3); }
.pain__num {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--muted);
  letter-spacing: 0.14em;
}
.pain h4 { font-size: 1.0625rem; }
.pain p { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }
.pain__cost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
  color: var(--fg);
  font-weight: 500;
}

/* ---------- Secteurs ---------- */
.sector {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.sector:hover { border-color: var(--accent); background: var(--accent-tint-6); }
.sector p { color: var(--muted); font-size: 0.875rem; }

/* ---- Secteur cliquable : card devient accordéon exclusif (pattern FAQ) ---- */
.sector--toggle { padding: 0; }
.sector--toggle:hover { background: var(--surface); }
.sector--toggle.is-open { border-color: var(--accent); background: var(--surface); }
.sector__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-radius: var(--r-lg);
}
.sector__q:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sector__head { flex: 1; }
.sector__title { display: block; margin-bottom: var(--space-1); }
.sector__head p { color: var(--muted); font-size: 0.875rem; margin: 0; }
.sector__q .pm {
  flex-shrink: 0;
  width: 24px; height: 24px;
  position: relative;
  margin-top: 2px;
}
.sector__q .pm::before,
.sector__q .pm::after {
  content: ""; position: absolute;
  background: var(--accent);
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.sector__q .pm::before { width: 14px; height: 2px; }
.sector__q .pm::after { width: 2px; height: 14px; }
.sector--toggle.is-open .sector__q .pm::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.sector__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s var(--ease);
}
.sector__a-inner { padding: 0 var(--space-5) var(--space-5); }
.sector--toggle.is-open .sector__a { max-height: 520px; }
.sector__list {
  list-style: none;
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: var(--space-3);
}
.sector__list li {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}
.sector__list li strong { color: var(--fg); font-weight: 500; }

/* ---------- Step (méthode 3 étapes) ---------- */
.steps { display: grid; gap: var(--space-6); }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
}
.step__num {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-numeric);
  font-weight: 300;
  font-size: 2rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.step__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.step h3 { margin-bottom: var(--space-2); }
.step p { color: var(--muted); }
.step__list { margin-top: var(--space-3); display: grid; gap: 8px; }
.step__list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9375rem;
  color: var(--fg);
}
.step__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-secondary);
}

/* ---------- Offres (pricing) ---------- */
.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.offer--featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.offer__tag {
  position: absolute;
  top: -12px; left: var(--space-6);
  background: var(--accent);
  color: var(--bg);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--r-pill);
}
.offer__name {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.offer h3 { font-size: 1.5rem; margin-bottom: var(--space-3); }
.offer__price {
  font-family: var(--font-numeric);
  font-weight: 300;
  font-size: 2rem;
  letter-spacing: -0.03em;
  color: var(--fg);
  line-height: 1.1;
}
.offer__price small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--muted);
  letter-spacing: 0;
  margin-top: 4px;
}
.offer__result {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: var(--surface);
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  color: var(--fg);
}
.offer__result b { font-weight: 600; }
.offer__features { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); flex-grow: 1; }
.offer__features li {
  position: relative;
  padding-left: 24px;
  font-size: 0.9375rem;
  color: var(--fg);
  line-height: 1.5;
}
.offer__features li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 14px; height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.offer__gift {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: var(--r-md);
  font-size: 0.9375rem;
}
.offer__gift b { color: var(--accent); }

/* ---------- Value stack (tableau de valeur Hormozi) ---------- */
.value-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.value-table th, .value-table td {
  text-align: left;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.value-table th {
  font-weight: 500;
  color: var(--muted);
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.value-table td:last-child {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--fg);
}
.value-table tfoot td {
  border-bottom: 0;
  padding-top: var(--space-5);
  font-size: 1.0625rem;
  font-weight: 600;
}
.value-table .row--gift td { color: var(--accent); }
.value-table .row--total td { color: var(--accent); }

/* ---------- Révélation de valeur (moment Hormozi) ---------- */
.value-reveal {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  text-align: center;
}
.value-reveal__label {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.value-reveal__total {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.75rem, 7vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.value-reveal__total::after {
  content: "";
  position: absolute;
  left: 0; top: 52%;
  height: 3px;
  width: 0;
  background: var(--muted);
  border-radius: 2px;
  transition: width 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.25s;
}
.value-reveal.is-revealed .value-reveal__total::after { width: 100%; }
.value-reveal__price {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-numeric);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease 0.7s, transform 0.5s ease 0.7s;
}
.value-reveal.is-revealed .value-reveal__price { opacity: 1; transform: translateY(0); }
.value-reveal__price small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--muted);
  letter-spacing: 0;
  margin-top: var(--space-2);
}
@media (prefers-reduced-motion: reduce) {
  .value-reveal__total::after { transition: none; width: 100%; }
  .value-reveal__price { transition: none; opacity: 1; transform: none; }
}

/* ---------- Garantie / risque ---------- */
.guarantee {
  text-align: center;
  display: grid;
  gap: var(--space-3);
}
.guarantee__num {
  font-family: var(--font-numeric);
  font-weight: 300;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.guarantee p { font-size: 0.9375rem; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.faq__q .pm {
  flex-shrink: 0;
  width: 24px; height: 24px;
  position: relative;
}
.faq__q .pm::before,
.faq__q .pm::after {
  content: ""; position: absolute;
  background: var(--accent);
  transition: transform 0.2s var(--ease);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.faq__q .pm::before { width: 14px; height: 2px; }
.faq__q .pm::after { width: 2px; height: 14px; }
.faq__item.is-open .pm::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease);
}
.faq__a-inner {
  padding-bottom: var(--space-5);
  color: var(--muted);
  max-width: 68ch;
}
.faq__item.is-open .faq__a { max-height: 360px; }

/* ---------- Formulaires ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: 0.01em;
}
.field label .req { color: var(--accent); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint-12);
}
.field textarea { resize: vertical; min-height: 120px; }
.field__error { font-size: 0.8125rem; color: var(--accent); display: none; }
.field.is-invalid .field__error { display: block; }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--accent); }
.form-note { font-size: var(--fs-small); color: var(--muted); }
.form-success {
  display: none;
  padding: var(--space-5);
  background: var(--success-tint);
  border: 1px solid color-mix(in srgb, var(--accent-secondary) 30%, transparent);
  border-radius: var(--r-md);
  color: var(--fg);
}
.form-success.is-visible { display: block; }

/* ---------- Footer ---------- */
.footer {
  background: var(--fg);
  color: color-mix(in srgb, var(--bg) 72%, transparent);
  padding-block: var(--space-8) var(--space-6);
}
.footer a { color: color-mix(in srgb, var(--bg) 72%, transparent); }
.footer a:hover { color: var(--bg); }
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}
.footer__brand { color: var(--bg); }
.footer__brand .brand b { color: var(--bg); }
.footer__brand .brand span { color: color-mix(in srgb, var(--bg) 56%, transparent); }
.footer__brand p { color: color-mix(in srgb, var(--bg) 64%, transparent); margin-top: var(--space-3); max-width: 34ch; font-size: 0.9375rem; }
.footer h5 {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bg) 48%, transparent);
  margin-bottom: var(--space-4);
  font-weight: 500;
}
.footer ul { display: grid; gap: var(--space-2); }
.footer ul a { font-size: 0.9375rem; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid color-mix(in srgb, var(--bg) 14%, transparent);
  font-size: var(--fs-small);
  color: color-mix(in srgb, var(--bg) 52%, transparent);
}

/* ---------- Hero ---------- */
.hero { padding-top: calc(var(--nav-h) + var(--space-8)); padding-bottom: var(--space-8); }
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-8);
  align-items: center;
}
.hero h1 { font-size: var(--fs-display); margin-block: var(--space-5); }
.hero .lead { max-width: 52ch; }
.hero__actions { margin-top: var(--space-6); }
.hero__bonus {
  margin-top: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  color: var(--muted);
}
.hero__bonus b { color: var(--fg); }

/* Board visuel typographique (panneau de droite du hero) */
.hero__board {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-5);
}
.board-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; }
.board-row .stat-num { font-size: 2.25rem; }
.board-row p { font-size: var(--fs-small); color: var(--muted); }
.board-row .metric-bar { width: 120px; }

/* ---------- Page header ---------- */
.page-header {
  padding-top: calc(var(--nav-h) + var(--space-8));
  padding-bottom: var(--space-7);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.page-header .eyebrow { margin-bottom: var(--space-3); }
.page-header h1 { font-size: var(--fs-display); max-width: 16ch; }
.page-header p { margin-top: var(--space-4); max-width: 56ch; color: var(--muted); font-size: 1.0625rem; }

/* ---------- CTA band ---------- */
.cta-band {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: var(--space-6);
  align-items: center;
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--r-lg);
  padding: var(--space-7);
}
.cta-band h2 { color: var(--bg); font-size: 2rem; }
.cta-band p { color: color-mix(in srgb, var(--bg) 76%, transparent); margin-top: var(--space-3); }

/* ---------- Blog ---------- */
.post-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg);
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.post-card:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--fg) 14%, var(--border)); }
.post-card__meta {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-card__cat { color: var(--accent); }
.post-card h3 { font-size: 1.1875rem; letter-spacing: -0.01em; }
.post-card p { color: var(--muted); font-size: 0.9375rem; }
.post-card__read {
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
}
.post-card__read span.arrow { display: inline-block; transition: transform 0.18s var(--ease); }
.post-card:hover .post-card__read span.arrow { transform: translateX(3px); }
.post-card--placeholder { border-style: dashed; border-color: var(--border); background: var(--surface); opacity: 0.8; }

.cat-pill {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 0.875rem;
  color: var(--muted);
  transition: all 0.15s var(--ease);
}
.cat-pill.is-active, .cat-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-tint-6);
}

/* ---------- Animations ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Animations d'accueil (signature premium) ---------- */
/* Hero stagger : badge → h1 → lead → CTAs → bonus en cascade au load.
   Déclenché par .hero.is-ready (ajouté au load par app.js après 1 frame
   pour laisser l'état initial s'appliquer). Scope strict au hero pour
   ne pas affecter les autres pages. Guard .js-ready : sans JS, le
   contenu reste visible (pas de opacity:0 bloquant). */
.js-ready .hero [data-stagger] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.js-ready .hero.is-ready [data-stagger] { opacity: 1; transform: none; }
.js-ready .hero.is-ready [data-stagger="1"] { transition-delay: 0ms; }
.js-ready .hero.is-ready [data-stagger="2"] { transition-delay: 120ms; }
.js-ready .hero.is-ready [data-stagger="3"] { transition-delay: 240ms; }
.js-ready .hero.is-ready [data-stagger="4"] { transition-delay: 360ms; }
.js-ready .hero.is-ready [data-stagger="5"] { transition-delay: 480ms; }

/* Stat mask-reveal : les 3 grands chiffres du hero board se dessinent
   verticalement (clip-path du haut vers le bas) quand le board devient
   visible. Écho direct au value-reveal d'offres — la signature visuelle
   de la marque sur les chiffres. PAS un count-up générique. */
.hero__board.is-visible .board-row:nth-child(1) .stat-num { animation: stat-mask 0.55s var(--ease) 0.15s both; }
.hero__board.is-visible .board-row:nth-child(2) .stat-num { animation: stat-mask 0.55s var(--ease) 0.25s both; }
.hero__board.is-visible .board-row:nth-child(3) .stat-num { animation: stat-mask 0.55s var(--ease) 0.35s both; }
@keyframes stat-mask {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Cascade des 6 douleurs : délais progressifs sur les .pain.reveal
   existants pour un effet d'onde quand la section entre dans l'écran. */
.animate-host .pain.reveal:nth-child(1) { transition-delay: 0ms; }
.animate-host .pain.reveal:nth-child(2) { transition-delay: 80ms; }
.animate-host .pain.reveal:nth-child(3) { transition-delay: 160ms; }
.animate-host .pain.reveal:nth-child(4) { transition-delay: 240ms; }
.animate-host .pain.reveal:nth-child(5) { transition-delay: 320ms; }
.animate-host .pain.reveal:nth-child(6) { transition-delay: 400ms; }

/* Blur-in cinématique (écho au data-blur de video-offres) : le H1 du hero
   émerge d'un flou au lieu d'un simple fade. Effet film / cabinet de conseil
   premium à l'ouverture. Surchargé sur le [data-stagger="2"] existant — on
   garde le délai de cascade (240ms) mais on remplace la transition par le
   blur. Guard .js-ready : sans JS, le titre reste visible. */
.js-ready .hero [data-blur] {
  opacity: 0;
  filter: blur(14px);
  transition: opacity 0.9s var(--ease), filter 0.9s var(--ease);
}
.js-ready .hero.is-ready [data-blur] {
  opacity: 1;
  filter: blur(0);
}
/* Le H1 porte à la fois data-stagger (cascade) et data-blur : on neutralise
   le translateY du stagger pour que seul le blur pilote l'entrée, et on
   reporte le délai de cascade du stagger sur le blur. */
.js-ready .hero.is-ready h1[data-blur] { transform: none; transition-delay: 240ms; }

/* Scale-in focalisé (écho au data-scale de video-offres) : le bouton CTA
   principal du hero grandit doucement (0,92 → 1) pour capter l'œil, comme
   le CTA final de la vidéo. Appliqué au premier .btn--primary du hero. */
.js-ready .hero [data-scale] {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js-ready .hero.is-ready [data-scale] {
  opacity: 1;
  transform: scale(1);
  transition-delay: 480ms; /* après la cascade h1/lead, au moment du bonus */
}

/* ---------- Geste signature : transformation AVANT → APRÈS ---------- */
/* Écho direct à la Frame 5 de video-offres. Sur la page Méthode, les paires
   .pain--after viennent après les .pain (AVANT). On anime le barré sur le
   titre de l'AVANT et la révélation du titre de l'APRÈS, en cascade, quand
   la paire entre dans l'écran (déclenché par .is-visible du reveal existant).
   Geste premium, pas simultané : 0,7s par ligne, 0,2s de stagger. */

/* La structure sur la page méthode : une grille de 6 cartes (3 paires
   AVANT/APRÈS alternées). On cible les cartes AVANT (.pain sans .pain--after). */
.pain--before { position: relative; }
.pain--before .pain__title,
.pain--before h4 {
  position: relative;
  display: inline-block;
}
.pain--before .pain__title::after,
.pain--before h4::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  top: 52%;
  height: 1.5px;
  background: var(--muted);
  transform: translateY(-50%);
  transition: right 0.7s var(--ease);
  pointer-events: none;
}
/* Déclenchement : quand la carte AVANT est révélée au scroll. */
.pain--before.is-visible .pain__title::after,
.pain--before.is-visible h4::after { right: 0; }
/* Cascade sur les 3 paires (index impair = AVANT dans la grille de 6). */
.transform-host .pain--before:nth-child(1) .pain__title::after,
.transform-host .pain--before:nth-child(1) h4::after { transition-delay: 0s; }
.transform-host .pain--before:nth-child(3) .pain__title::after,
.transform-host .pain--before:nth-child(3) h4::after { transition-delay: 0.2s; }
.transform-host .pain--before:nth-child(5) .pain__title::after,
.transform-host .pain--before:nth-child(5) h4::after { transition-delay: 0.4s; }

/* Révélation de l'APRÈS : opacité + léger translateX, après le barré. */
.pain--after h4 {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.pain--after.is-visible h4 {
  opacity: 1;
  transform: translateX(0);
}
.transform-host .pain--after:nth-child(2) h4 { transition-delay: 0.15s; }
.transform-host .pain--after:nth-child(4) h4 { transition-delay: 0.35s; }
.transform-host .pain--after:nth-child(6) h4 { transition-delay: 0.55s; }

/* Mask-reveal sur les chiffres de garantie (écho au hero board + vidéo) :
   les .guarantee__num (50/50, 30 j, 0 €) se dessinent verticalement quand
   la carte devient visible. Cohérence de la signature sur tous les chiffres. */
.guarantee.is-visible .guarantee__num {
  animation: stat-mask 0.55s var(--ease) 0.1s both;
}
/* Légère cascade sur les 3 cartes de garantie. */
.guarantee:nth-child(1).is-visible .guarantee__num { animation-delay: 0.1s; }
.guarantee:nth-child(2).is-visible .guarantee__num { animation-delay: 0.2s; }
.guarantee:nth-child(3).is-visible .guarantee__num { animation-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .hero [data-stagger] { opacity: 1; transform: none; transition: none; }
  .hero__board.is-visible .board-row .stat-num { animation: none; }
  .animate-host .pain.reveal:nth-child(n) { transition-delay: 0ms; }
  .hero [data-blur] { opacity: 1; filter: none; transition: none; }
  .hero.is-ready h1[data-blur] { transition-delay: 0ms; }
  .hero [data-scale] { opacity: 1; transform: none; transition: none; }
  .pain--before .pain__title::after,
  .pain--before h4::after { transition: none; right: 0; }
  .pain--before.is-visible .pain__title::after,
  .pain--before.is-visible h4::after { right: 0; }
  .pain--after h4 { opacity: 1; transform: none; transition: none; }
  .transform-host .pain--before:nth-child(n) .pain__title::after,
  .transform-host .pain--before:nth-child(n) h4::after { transition-delay: 0ms; }
  .transform-host .pain--after:nth-child(n) h4 { transition-delay: 0ms; }
  .guarantee.is-visible .guarantee__num { animation: none; }
}

/* ---------- Skip link / a11y ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 200;
  background: var(--fg);
  color: var(--bg);
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
}
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .footer__brand { grid-column: 1 / -1; }
  .cta-band { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --space-9: 56px; --space-8: 48px; --gutter: 20px; }
  .nav__links, .nav__cta .btn { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: var(--space-5);
    gap: var(--space-4);
    transform: translateY(-110%);
    transition: transform 0.3s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  body.menu-open .nav__links { transform: none; display: flex; }
  body.menu-open .nav__links a { font-size: 1.0625rem; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .grid--auto { grid-template-columns: 1fr; }
  .step { grid-template-columns: auto 1fr; gap: var(--space-4); }
  .step__num { width: 56px; height: 56px; font-size: 1.5rem; }
  .board-row { grid-template-columns: auto 1fr; }
  .board-row .metric-bar { grid-column: 1 / -1; width: 100%; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  /* Tableau de valeur : empêcher le débordement */
  .value-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .value-table th, .value-table td { padding: var(--space-3); font-size: 0.875rem; }
  .card { padding: var(--space-4); }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 2rem; }
  .btn { width: 100%; }
  .hero__actions .cluster { flex-direction: column; align-items: stretch; }
}

/* ---------- Print ---------- */
@media print {
  .nav, .footer, .cta-band, .btn { display: none !important; }
  body { color: #061b31; }
  .section { padding-block: 24px; }
}