/* ===== Landing page scoped styles (Claude Design hand-off) ===== */

/* Repli metrique pour Instrument Serif. Sans lui, le titre du hero change de
   hauteur quand la police arrive (CLS 0,27 a 1024 px, 0,20 a 1440 px, mesure
   le 09/09/2026 sur localhost). Chiffres releves sur le vrai texte du h1 :
   Instrument Serif fait 83,7 % de la largeur de Times / Liberation Serif et
   70,3 % de Noto Serif (Android). ascent = 0,990 / size-adjust, descent = 0,310 / size-adjust. */
@font-face {
  font-family: "Instrument Serif Repli Times";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Tinos");
  size-adjust: 83.7%; ascent-override: 118.3%; descent-override: 37%; line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Serif Repli Noto";
  src: local("Noto Serif"), local("NotoSerif-Regular");
  size-adjust: 70.3%; ascent-override: 140.8%; descent-override: 44.1%; line-gap-override: 0%;
}
/* Meme chose pour Geist (sous-titre du hero : 31 px de decalage a 1440 px le
   09/09/2026). Largeur mesuree sur le vrai texte du sous-titre : Geist = 101,5 %
   d'Arial / Liberation Sans, 113,2 % de Roboto (Android), 96,8 % de Noto Sans. */
@font-face {
  font-family: "Geist Repli Arial";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 101.5%; ascent-override: 99%; descent-override: 29.1%; line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Repli Roboto";
  src: local("Roboto"), local("Roboto-Regular");
  size-adjust: 113.2%; ascent-override: 88.8%; descent-override: 26.1%; line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Repli Noto";
  src: local("Noto Sans"), local("NotoSans-Regular");
  size-adjust: 96.8%; ascent-override: 103.8%; descent-override: 30.5%; line-gap-override: 0%;
}
.landing-page { --l-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --font-display: "Instrument Serif", "Instrument Serif Repli Times", "Instrument Serif Repli Noto", Georgia, serif; --font-sans: "Geist", "Geist Repli Arial", "Geist Repli Roboto", "Geist Repli Noto", ui-sans-serif, system-ui, sans-serif; font-family: var(--font-sans); background: var(--bg); color: var(--fg); line-height: 1.5; -webkit-font-smoothing: antialiased; }

.landing-page .l-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* Animation primitives — visible by default, animate only if JS opts in via .js-reveal-on parent class */
.landing-page.js-reveal-on .reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s var(--l-ease-out), transform .5s var(--l-ease-out); }
.landing-page.js-reveal-on .reveal.in { opacity: 1; transform: translateY(0); }
.landing-page.js-reveal-on .reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--l-ease-out), transform .45s var(--l-ease-out); }
.landing-page.js-reveal-on .reveal-stagger.in > *:nth-child(1) { transition-delay: .05s; }
.landing-page.js-reveal-on .reveal-stagger.in > *:nth-child(2) { transition-delay: .15s; }
.landing-page.js-reveal-on .reveal-stagger.in > *:nth-child(3) { transition-delay: .25s; }
.landing-page.js-reveal-on .reveal-stagger.in > *:nth-child(4) { transition-delay: .35s; }
.landing-page.js-reveal-on .reveal-stagger.in > *:nth-child(5) { transition-delay: .45s; }
.landing-page.js-reveal-on .reveal-stagger.in > * { opacity: 1; transform: translateY(0); }

/* Buttons (page-scoped to avoid clashing with admin .btn) */
.landing-page .l-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 12px;
  font-family: inherit; font-size: 14px; font-weight: 500;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--fg);
  cursor: pointer; text-decoration: none;
  transition: transform .15s var(--l-ease-out), border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.landing-page .l-btn:active { transform: scale(0.97); }
.landing-page .l-btn-primary { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); }
.landing-page .l-btn-lg { padding: 14px 26px; font-size: 15px; border-radius: 14px; }
.landing-page .l-btn-xl { padding: 18px 32px; font-size: 17px; border-radius: 16px; }
.landing-page .btn-arrow { transition: transform .2s var(--l-ease-out); display: inline-block; width: 1em; height: 1em; flex: none; }

/* Hero */
.landing-page .hero { padding: 80px 0 100px; position: relative; }
.landing-page .hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(ellipse 800px 400px at 50% 0%, oklch(0.95 0.05 28 / 0.4), transparent 60%),
    radial-gradient(ellipse 600px 300px at 90% 50%, oklch(0.94 0.04 50 / 0.3), transparent 60%);
}
.landing-page .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-2);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-2);
  box-shadow: var(--shadow-sm);
  max-width: 100%;
}
.landing-page .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
/* Sur un telephone la pilule pliait sur deux lignes (vu par Omar le 09/09/2026) :
   on garde le point rouge et le texte, on retire la boite. */
@media (max-width: 480px) {
  .landing-page .eyebrow { display: inline; padding: 0; background: none; border: 0; box-shadow: none; line-height: 1.9; }
  .landing-page .eyebrow::before { display: inline-block; vertical-align: middle; margin-right: 8px; }
}
.landing-page .hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 24px 0 24px;
  text-wrap: balance;
  font-weight: 400;
}
.landing-page .hero h1 em { font-style: italic; color: var(--accent-text); }
.landing-page .hero-sub {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--fg-2);
  max-width: 720px;
  line-height: 1.55;
  text-wrap: pretty;
  margin: 0;
}
.landing-page .hero-sub strong { color: var(--fg); font-weight: 500; }
.landing-page .hero-cta { display: flex; align-items: center; gap: 18px; margin-top: 32px; flex-wrap: wrap; }
.landing-page .hero-trust { color: var(--fg-3); font-size: 13px; }

.landing-page .hero-proof {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.landing-page .proof-num { font-family: var(--font-display); font-size: 36px; line-height: 1; }
.landing-page .proof-lab { font-size: 12px; color: var(--fg-3); margin-top: 4px; letter-spacing: 0.05em; }

/* Sections */
.landing-page section.l-sec { padding: 100px 0; position: relative; }
.landing-page .section-eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); font-weight: 500; }
.landing-page .section-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 16px 0 20px;
  text-wrap: balance;
  font-weight: 400;
}
.landing-page .section-title em { font-style: italic; color: var(--accent-text); }
.landing-page .section-intro { font-size: 18px; color: var(--fg-2); max-width: 640px; line-height: 1.55; margin: 0; }

/* Problem */
.landing-page .problem { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.landing-page section.clair { padding-top: 0; }
.landing-page .clair-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px; }
.landing-page .clair-num { font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--accent-text); margin-bottom: 14px; }
@media (min-width: 880px) {
  .landing-page .clair-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
}
/* Pastilles « qui peut » (25/09/2026) : la carte est mise en avant, parce que
   c'est la seule voie ouverte sans société ni matricule. */
.landing-page .clair-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; }
.landing-page .clair-head .clair-num { margin-bottom: 0; }
.landing-page .clair-chip {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.3;
  background: var(--bg-2); color: var(--fg-2); border: 1px solid var(--line);
}
.landing-page .clair-chip-ok { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.landing-page .clair-card-carte { border-color: color-mix(in oklch, var(--accent) 60%, var(--line)); }
.landing-page .dm-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.landing-page .dm-tete { max-width: 560px; }
.landing-page .dm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.landing-page .dm-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 20px; padding: 14px 0 14px 20px; border-left: 2px solid var(--line); position: relative; }
.landing-page .dm-step::before { content: ""; position: absolute; left: -6px; top: 20px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--danger); }
.landing-page .dm-step:last-child::before { background: var(--danger); }
.landing-page .dm-time { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); line-height: 1.4; }
.landing-page .dm-step p { margin: 0; color: var(--fg-2); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.landing-page .dm-outils { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); max-width: 720px; }
.landing-page .dm-outils p { margin: 12px 0 0; color: var(--fg-2); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
@media (min-width: 880px) {
  .landing-page .dm-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
  .landing-page .dm-step { grid-template-columns: 120px minmax(0, 1fr); align-items: baseline; }
}

.landing-page .problem-conclusion {
  margin-top: 56px; padding: 36px 40px; border-radius: 20px;
  background: var(--brand); color: var(--brand-fg);
  font-size: 18px; line-height: 1.55;
  text-wrap: pretty;
  position: relative; overflow: hidden;
}
.landing-page .problem-conclusion::before {
  content: ""; position: absolute; right: -100px; top: -100px; width: 300px; height: 300px;
  background: radial-gradient(circle, oklch(0.66 0.19 28 / 0.4), transparent 70%);
}
.landing-page .problem-conclusion strong { color: oklch(0.92 0.05 28); font-weight: 500; font-style: italic; font-family: var(--font-display); font-size: 22px; }

/* Solution / 3 étapes */
.landing-page .solution-intro { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.landing-page .solution-intro .section-title em { display: block; }

.landing-page .solution-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 64px; }
/* Préfixe l- obligatoire : tokens.css pose un .type-card en flex-row sur
   .public-shell, même spécificité, et gagnait (vu par Omar le 10/09/2026). */
.landing-page .l-type-card { padding: 28px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); transition: transform .2s var(--l-ease-out), box-shadow .2s ease, border-color .2s ease; text-align: center; }
.landing-page .l-type-icon { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; margin: 0 auto 16px; background: var(--accent-soft); color: var(--accent-text); }
.landing-page .l-type-card h4 { font-family: var(--font-display); font-size: 22px; margin: 0; font-weight: 500; }
.landing-page .l-type-card p { color: var(--fg-3); font-size: 14px; margin: 4px 0 0; }

.landing-page .step { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; padding: 60px 0; border-top: 1px solid var(--line); }
.landing-page .step:nth-child(even) { grid-template-columns: 1.2fr 1fr; }
.landing-page .step:nth-child(even) .step-text { order: 2; }
.landing-page .step-num {
  font-family: var(--font-display); font-size: 110px; line-height: 0.85;
  background: linear-gradient(180deg, var(--fg), var(--fg-faint));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 12px;
}
.landing-page .step-text h3 { font-family: var(--font-display); font-size: 42px; line-height: 1.05; margin: 0 0 16px; letter-spacing: -0.01em; font-weight: 500; }
.landing-page .step-text p { font-size: 17px; color: var(--fg-2); line-height: 1.55; max-width: 520px; margin: 0; }

/* Mockups */
.landing-page .mockup { border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); padding: 24px; position: relative; transition: transform .25s var(--l-ease-out); }

@keyframes l-pop-in { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: none; } }
.landing-page .pop { animation: l-pop-in .35s var(--l-ease-out) backwards; }

/* Mockup — Step 1 : Onboarding */
.landing-page .m-onboarding { padding: 22px; }
.landing-page .m-onb-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.landing-page .m-onb-title { font-size: 13px; font-weight: 500; color: var(--fg); }
.landing-page .m-onb-timer {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-text);
  font-size: 12px; font-weight: 500; font-feature-settings: "tnum";
}
.landing-page .m-onb-timer svg { width: 12px; height: 12px; }
.landing-page .m-onb-step {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 12px; background: var(--bg-2);
}
.landing-page .m-onb-step + .m-onb-step { margin-top: 8px; }
.landing-page .m-onb-check {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--success); color: white;
  display: grid; place-items: center; flex-shrink: 0;
}
.landing-page .m-onb-check svg { width: 14px; height: 14px; }
.landing-page .m-onb-pulse {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-soft); flex-shrink: 0; position: relative;
}
.landing-page .m-onb-pulse::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: var(--brand); animation: l-pulse 2s ease-in-out infinite;
}
@keyframes l-pulse { 0%, 100% { opacity: 0.5; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1); } }
.landing-page .m-onb-step-title { font-size: 13px; font-weight: 500; color: var(--fg); }
.landing-page .m-onb-step-meta { font-size: 12px; color: var(--fg-3); margin-top: 2px; font-feature-settings: "tnum"; }
.landing-page .m-onb-step.pending .m-onb-step-meta { color: var(--brand); font-style: italic; }

/* Mockup — Step 2 : Format chooser */
.landing-page .m-formats { padding: 22px; }
.landing-page .m-fmt-header { margin-bottom: 12px; }
.landing-page .m-fmt-h-label { font-size: 12px; letter-spacing: 0.14em; color: var(--fg-3); font-weight: 500; text-transform: uppercase; }
.landing-page .m-fmt-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 18px; }
.landing-page .m-fmt-tab {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px; border-radius: 10px; background: var(--bg-2);
  border: 1px solid transparent; transition: background-color .2s ease, border-color .2s ease;
}
.landing-page .m-fmt-tab svg { width: 16px; height: 16px; color: var(--fg-3); }
.landing-page .m-fmt-tab span { font-size: 12px; color: var(--fg-3); font-weight: 500; }
.landing-page .m-fmt-tab.active { background: var(--brand); border-color: var(--brand); }
.landing-page .m-fmt-tab.active svg, .landing-page .m-fmt-tab.active span { color: var(--brand-fg); }
.landing-page .m-fmt-form { background: var(--bg-2); border-radius: 12px; padding: 14px; }
.landing-page .m-fmt-label { font-size: 12px; color: var(--fg-3); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; }
.landing-page .m-fmt-input {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 11px; font-size: 12px; color: var(--fg-2); font-family: inherit;
}
.landing-page .m-fmt-input.active { border-color: var(--accent); box-shadow: 0 0 0 3px oklch(0.66 0.19 28 / 0.18); color: var(--fg); }
.landing-page .m-fmt-input.price { color: var(--fg); font-feature-settings: "tnum"; font-weight: 500; }
.landing-page .m-fmt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.landing-page .m-fmt-net { margin-top: 10px; }
.landing-page .m-fmt-publish {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 12px; color: var(--fg-2);
  display: flex; align-items: center; gap: 8px;
}
.landing-page .m-fmt-status {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 3px oklch(0.7 0.16 145 / 0.2);
}

/* Mockup — Step 3 : Share & receive */
.landing-page .m-share { padding: 20px; }
.landing-page .m-share-link {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-soft), var(--accent-soft));
  border: 1px solid var(--line); margin-bottom: 16px;
}
.landing-page .m-share-link > div:nth-child(2) { min-width: 0; }
.landing-page .m-share-link-url {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.landing-page .m-share-link-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--surface); color: var(--brand);
  display: grid; place-items: center; flex-shrink: 0;
}
.landing-page .m-share-link-icon svg { width: 16px; height: 16px; }
.landing-page .m-share-link-url { font-size: 13px; font-weight: 500; color: var(--fg); font-feature-settings: "tnum"; }
.landing-page .m-share-link-meta { font-size: 12px; color: var(--fg-3); margin-top: 3px; }
.landing-page .m-share-channels { display: flex; gap: 5px; }
.landing-page .m-share-chan {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--surface); color: var(--fg-2);
  display: grid; place-items: center;
}
.landing-page .m-share-chan svg { width: 13px; height: 13px; }
.landing-page .m-share-divider {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.12em; color: var(--fg-3); font-weight: 500;
  margin-bottom: 12px; text-transform: uppercase;
}
.landing-page .m-share-divider::before, .landing-page .m-share-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.landing-page .m-share-tx { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); }
.landing-page .m-share-tx + .m-share-tx { margin-top: 8px; }
.landing-page .m-share-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand); color: var(--brand-fg);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 500; flex-shrink: 0;
}
.landing-page .m-share-name { font-size: 13px; font-weight: 500; color: var(--fg); }
.landing-page .m-share-prod { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.landing-page .m-share-amt { margin-left: auto; font-weight: 600; color: oklch(0.48 0.12 75); font-feature-settings: "tnum"; font-size: 13px; }

/* Features showcase */
.landing-page .features-section { padding: 100px 0; background: var(--bg); border-top: 1px solid var(--line); }
.landing-page .features-intro { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.landing-page .features-cat { margin-top: 64px; }
.landing-page .features-cat:first-of-type { margin-top: 0; }
.landing-page .features-cat-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.landing-page .features-cat-title::before {
  content: ""; width: 4px; height: 22px;
  background: var(--accent); border-radius: 2px;
}
.landing-page .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.landing-page .features-grid-3 { grid-template-columns: repeat(3, 1fr); }
.landing-page .features-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.landing-page .feat-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; transition: transform .2s var(--l-ease-out), box-shadow .2s ease, border-color .2s ease;
}
.landing-page .feat-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-text);
  display: grid; place-items: center; margin-bottom: 14px;
}
.landing-page .feat-card h4 {
  font-family: var(--font-display); font-size: 17px; font-weight: 500;
  margin: 0 0 6px; line-height: 1.25;
}
.landing-page .feat-card p { font-size: 14px; color: var(--fg-2); line-height: 1.5; margin: 0; }
/* Accueil réécrit le 25/09/2026 : les cartes portent des h3 (plus de saut h2 → h4),
   et leur titre en 17 px paraissait plus petit que le texte en dessous (police
   étroite). 21 px et un texte à 15 px rétablissent la hiérarchie. */
.landing-page .feat-card h3 {
  font-family: var(--font-display); font-size: 21px; font-weight: 500;
  margin: 0 0 8px; line-height: 1.2; color: var(--fg);
}
.landing-page .feat-card h3 + p { font-size: 15px; line-height: 1.55; }

/* Pricing comparison */
.landing-page .pricing-section { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.landing-page .compare { margin: 56px 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--surface); }
.landing-page .compare-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; border-bottom: 1px solid var(--line); }
.landing-page .compare-row:last-child { border-bottom: none; }
.landing-page .compare-row > div { padding: 18px 24px; display: flex; align-items: center; }
.landing-page .compare-head { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; background: var(--bg-2); }
.landing-page .compare-head.highlight { background: var(--brand); color: var(--brand-fg); }
.landing-page .compare-feat { font-weight: 500; }
.landing-page .compare-old { color: var(--fg-3); font-feature-settings: "tnum"; }
.landing-page .compare-beb { font-weight: 500; }
.landing-page .compare-beb::before { content: "✓"; color: var(--success); margin-right: 8px; font-weight: 600; }
.landing-page .compare-row > div:last-child { background: oklch(0.94 0.008 60 / 0.5); }
.landing-page .compare-row > div.compare-head.highlight { background: var(--brand); color: var(--brand-fg); }

/* Plans */
.landing-page .plan-toggle { display: inline-flex; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; margin: 32px 0 56px; }
.landing-page .plan-toggle button { padding: 10px 22px; border-radius: 999px; border: none; background: transparent; cursor: pointer; font-size: 14px; color: var(--fg-2); font-family: inherit; }
.landing-page .plan-toggle button.active { background: var(--brand); color: var(--brand-fg); }
.landing-page .plan-toggle .save { font-size: 12px; color: var(--accent-text); margin-left: 4px; }
.landing-page .plan-toggle button.active .save { color: var(--brand-fg); opacity: 0.85; }

.landing-page .plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 820px; margin: 0 auto; }
.landing-page .plan { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 40px 32px; display: flex; flex-direction: column; position: relative; transition: transform .2s var(--l-ease-out), box-shadow .2s ease; }
.landing-page .plan.featured { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); transform: scale(1.03); }
.landing-page .plan-tier { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; }
.landing-page .plan.featured .plan-tier { color: oklch(0.92 0.05 28); }
.landing-page .plan-popular { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--accent-text); color: white; font-size: 12px; padding: 6px 16px; border-radius: 999px; letter-spacing: 0.05em; font-weight: 500; }
.landing-page .plan-price { font-family: var(--font-display); font-size: 60px; line-height: 1; margin: 20px 0 6px; font-weight: 400; font-feature-settings: "tnum"; }
.landing-page .plan-price small { font-size: 17px; opacity: 0.6; font-family: var(--font-sans); }
.landing-page .plan-bill { font-size: 12px; color: var(--fg-3); margin-bottom: 28px; }
.landing-page .plan.featured .plan-bill { color: oklch(0.85 0.005 60); }

/* Le taux de la Formule — la seule chose qui differe vraiment entre les deux
   offres, donc la seule qui merite un bloc a elle. Noms verifies sans
   collision dans ce fichier le 25/08/2026 avant d'etre ecrits. */
.landing-page .plan-rate {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 18px; border-radius: 16px;
  background: var(--brand-soft); margin-bottom: 24px;
}
.landing-page .plan.featured .plan-rate { background: rgba(255, 255, 255, 0.16); }
.landing-page .plan-rate-num {
  font-family: var(--font-display); font-size: 30px; line-height: 1;
  font-weight: 400; font-feature-settings: "tnum"; color: var(--fg);
}
.landing-page .plan.featured .plan-rate-num { color: var(--brand-fg); }
.landing-page .plan-rate-lab { font-size: 13px; color: var(--fg-2); }
.landing-page .plan.featured .plan-rate-lab { color: oklch(0.92 0.05 28); }

/* Le seuil de bascule, sous les deux cartes : c'est l'argument, pas un detail. */
.landing-page .plan-seuil {
  max-width: 820px; margin: 24px auto 0; text-align: center;
  font-size: 14px; color: var(--fg-2); line-height: 1.6;
}

/* Le Lancement Cle en Main n'est pas une Formule : c'est une prestation.
   Une grille a une colonne le dit sans avoir a l'ecrire. */
.landing-page .plans-solo { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.landing-page .plan ul { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.landing-page .plan li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.55;
}
.landing-page .plan li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--success);
  font-weight: 600;
}
.landing-page .plan.featured li::before { color: oklch(0.85 0.13 75); }
.landing-page .plan-pitch { font-size: 14px; color: var(--fg-3); margin-bottom: 24px; line-height: 1.6; min-height: 48px; }
.landing-page .plan-bonus {
  background: linear-gradient(135deg, var(--brand-soft), var(--accent-soft));
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 22px;
  line-height: 1.5;
}
.landing-page .enterprise-link {
  text-align: center;
  margin-top: 40px;
  padding: 24px 28px;
  border: 1px dashed var(--line-2);
  border-radius: 16px;
  background: var(--bg-2);
}
.landing-page .enterprise-link p { margin: 0 0 8px; font-size: 15px; color: var(--fg-2); line-height: 1.5; }
.landing-page .enterprise-link a {
  color: var(--accent-text);
  font-weight: 500;
  text-decoration: none;
  font-size: 15px;
}
.landing-page .enterprise-link a:hover { text-decoration: underline; }
.landing-page .plan.featured .plan-pitch { color: oklch(0.85 0.005 60); }
.landing-page .plan .l-btn { width: 100%; justify-content: center; }
.landing-page .plan.featured .l-btn { background: var(--accent-text); color: white; border-color: var(--accent-text); }

/* FAQ */
.landing-page .faq-list { max-width: 760px; margin: 56px auto 0; }
.landing-page .faq-list details { border-bottom: 1px solid var(--line); padding: 24px 0; }
.landing-page .faq-list details[open] { padding-bottom: 28px; }
.landing-page .faq-list summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.3;
}
.landing-page .faq-list summary::-webkit-details-marker { display: none; }
.landing-page .faq-icon { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); flex-shrink: 0;
  display: grid; place-items: center; transition: transform .2s var(--l-ease-out), background-color .2s ease; font-family: var(--font-sans); font-size: 16px;
}
.landing-page .faq-list details[open] .faq-icon { background: var(--brand); color: var(--brand-fg); transform: rotate(45deg); }
.landing-page .faq-answer { padding-top: 16px; color: var(--fg-2); font-size: 16px; line-height: 1.6; max-width: 640px; }
/* Un lien en pleine phrase reste en ligne ; le padding vertical agrandit sa zone tactile (21 px -> 25 px) sans bouger le texte. */
.landing-page .faq-answer a { color: var(--fg); padding: 2px 0; }

/* CTA final */
.landing-page .cta-final { background: var(--brand); color: var(--brand-fg); padding: 120px 0; text-align: center; position: relative; overflow: hidden; }
.landing-page .cta-final::before {
  content: ""; position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  background:
    radial-gradient(ellipse 600px 300px at 20% 100%, oklch(0.55 0.13 50 / 0.4), transparent 60%),
    radial-gradient(ellipse 500px 300px at 80% 0%, oklch(0.66 0.19 28 / 0.35), transparent 60%);
}
.landing-page .cta-final h2 {
  font-family: var(--font-display); font-size: clamp(40px, 6vw, 76px);
  line-height: 1.05; letter-spacing: -0.02em; margin: 0 auto 24px;
  max-width: 880px; text-wrap: balance; font-weight: 400;
}
.landing-page .cta-final h2 em { color: oklch(0.95 0.05 28); font-style: italic; }
.landing-page .cta-final p { font-size: 19px; color: oklch(0.85 0.005 60); max-width: 640px; margin: 0 auto 40px; }
.landing-page .cta-final .l-btn { background: var(--brand-fg); color: var(--brand); border-color: var(--brand-fg); }
.landing-page .cta-final .micro { color: oklch(0.7 0.005 60); font-size: 13px; margin-top: 24px; }

/* Footer */
.landing-page footer.l-footer { padding: 40px 0 max(40px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--fg-3); font-size: 13px; line-height: 1.5; }
.landing-page footer.l-footer .l-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.landing-page footer.l-footer nav { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 6px; align-items: center; }
.landing-page footer.l-footer a { color: var(--fg-2); text-decoration: none; display: inline-block; padding: 6px 0; white-space: nowrap; }
.landing-page footer.l-footer a:hover { color: var(--fg); }
@media (min-width: 880px) {
  .landing-page footer.l-footer { padding: 48px 0; }
  .landing-page footer.l-footer .l-wrap { flex-direction: row; justify-content: space-between; align-items: center; gap: 24px; }
  .landing-page footer.l-footer nav { justify-content: flex-end; }
}
.landing-page .sep { color: var(--fg-3); }

/* Floating shapes */
.landing-page .float-shape { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; filter: blur(60px); opacity: 0.5; }

/* Responsive */
@media (max-width: 880px) {
  .landing-page .nav-links a:not(:last-child) { display: none; }
  .landing-page .hero { padding: 60px 0 80px; }
  .landing-page .hero-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .landing-page section.l-sec { padding: 70px 0; }
  .landing-page .solution-types { grid-template-columns: minmax(0, 1fr); }
  /* minmax(0,1fr) so wide content (huge step-num "03", long h3) shrinks
     instead of pushing the column past the viewport. */
  .landing-page .step,
  .landing-page .step:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .landing-page .step:nth-child(even) .step-text { order: 0; }
  .landing-page .compare-row { grid-template-columns: 1.2fr 1fr; }
  .landing-page .compare-row > div:nth-child(2) { display: none; }
  .landing-page .plans { grid-template-columns: minmax(0, 1fr); }
  .landing-page .plan.featured { transform: none; }
  .landing-page .features-section { padding: 70px 0; }
  .landing-page .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-page .features-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .landing-page .features-cat-title { font-size: 20px; }
}
@media (max-width: 560px) {
  .landing-page .features-grid { grid-template-columns: minmax(0, 1fr); }
  .landing-page .features-grid-2 { grid-template-columns: minmax(0, 1fr); }
  /* Shrink the giant step number on small phones to stop it from forcing
     intrinsic column width. */
  .landing-page .step-num { font-size: 80px; }
}
@media (max-width: 400px) {
  .landing-page .step-num { font-size: 64px; }
}

/* Ce que les deux Formules partagent, écrit UNE fois au-dessus des cartes.
   Avant le 09/09/2026, la même liste était rendue dans chaque carte et se
   lisait deux fois de suite (vu par Omar). Les cartes ne portent que ce qui
   diffère. Noms vérifiés sans collision dans ce fichier avant d'être écrits. */
.landing-page .plan-commun {
  max-width: 820px; margin: 48px auto 0; padding: 20px 24px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
}
.landing-page .plan-commun-lab { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; white-space: nowrap; }
.landing-page .plan-commun ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; flex: 1; min-width: 0; }
.landing-page .plan-commun li { font-size: 14px; line-height: 1.5; color: var(--fg-2); position: relative; padding-left: 18px; }
.landing-page .plan-commun li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 600; }
.landing-page .plan-commun li strong { color: var(--fg); font-weight: 500; }
/* Sous 640 px, l'étiquette (nowrap, ~230 px) laissait 70 px à la liste, qui
   se pliait mot par mot (vu par Omar le 10/09/2026). Tout passe en colonne. */
@media (max-width: 640px) {
  .landing-page .plan-commun { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
  .landing-page .plan-commun-lab { white-space: normal; }
  .landing-page .plan-commun ul { flex-direction: column; gap: 10px; width: 100%; }
}

/* Les survols ne s'appliquent qu'à une vraie souris : sur un écran tactile,
   un tap déclenche :hover et la carte reste soulevée (emil-design-eng). */
@media (hover: hover) and (pointer: fine) {
  .landing-page .l-btn:hover { border-color: var(--fg-3); transform: translateY(-1px); }
  .landing-page .l-btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); box-shadow: 0 8px 24px oklch(0.2 0.02 60 / 0.18); }
  .landing-page .l-btn:hover .btn-arrow { transform: translateX(3px); }
  .landing-page .l-type-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
  .landing-page .mockup:hover { transform: translateY(-4px) rotate(-0.5deg); }
  .landing-page .feat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
  .landing-page .plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .landing-page .plan.featured:hover { transform: scale(1.03) translateY(-4px); }
  .landing-page .plan.featured .l-btn:hover { background: oklch(0.52 0.18 28); }
  .landing-page .cta-final .l-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px oklch(0.66 0.19 28 / 0.3); }
}
@media (hover: hover) and (pointer: fine) and (max-width: 880px) {
  .landing-page .plan.featured:hover { transform: translateY(-4px); }
}

/* Mouvement réduit : on garde les fondus, on retire tout déplacement. */
/* Jumeau clavier des survols. Audit du 10/09/2026 à 390 px : 10 règles :hover
   soulevaient un bouton ou une carte sans aucun :focus-visible dans cette
   feuille (0 occurrence). Au clavier, rien ne signalait l'élément actif. */
.landing-page a:focus-visible, .landing-page button:focus-visible, .landing-page summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.landing-page .l-btn:focus-visible { outline-offset: 4px; border-radius: 999px; }
/* Au clavier, le bouton fait ce qu'il fait sous la souris : même levée, même flèche.
   Les cartes (.l-type-card, .feat-card, .plan, .mockup) ne sont pas focalisables :
   leur levée au survol est décorative et n'a pas de jumeau à écrire. */
.landing-page .l-btn:focus-visible { border-color: var(--fg-3); transform: translateY(-1px); }
.landing-page .l-btn-primary:focus-visible { background: var(--brand-hover); border-color: var(--brand-hover); box-shadow: 0 8px 24px oklch(0.2 0.02 60 / 0.18); }
.landing-page .l-btn:focus-visible .btn-arrow { transform: translateX(3px); }
.landing-page .plan.featured .l-btn:focus-visible { background: oklch(0.52 0.18 28); }
.landing-page .cta-final .l-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 32px oklch(0.66 0.19 28 / 0.3); }

@media (prefers-reduced-motion: reduce) {
  .landing-page.js-reveal-on .reveal,
  .landing-page.js-reveal-on .reveal-stagger > * { transform: none; transition: opacity .25s ease; }
  .landing-page.js-reveal-on .reveal-stagger.in > * { transition-delay: 0s; }
  .landing-page .pop { animation: l-fade-in .25s ease backwards; }
  .landing-page .m-onb-pulse { animation: none; opacity: 1; transform: none; }
  .landing-page .l-btn, .landing-page .l-type-card, .landing-page .mockup,
  .landing-page .feat-card, .landing-page .plan, .landing-page .btn-arrow, .landing-page .faq-icon { transition: none; }
}
@keyframes l-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ===== Funnel Clé en Main (/lancement) ===== */
.lf-page { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 48px 20px 80px; }
.lf-wrap { width: 100%; max-width: 640px; }

.lf-progress { margin-bottom: 40px; }
.lf-progress-bar { height: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lf-progress-bar span { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 999px; transition: width .35s ease; }
.lf-progress-label { margin-top: 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }

.lf-step { padding-top: 8px; }
.lf-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--brand); color: var(--brand-fg); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 28px; margin-bottom: 24px; }
.lf-title { font-family: var(--font-display); font-size: clamp(28px, 5vw, 40px); line-height: 1.15; margin-bottom: 20px; font-weight: 400; }
.lf-title em { color: var(--accent-text, var(--accent)); font-style: italic; }
.lf-intro { font-size: 17px; line-height: 1.6; color: var(--fg-2); margin-bottom: 14px; }
.lf-signature { font-size: 14px; color: var(--fg-3); margin: 20px 0 32px; }

.lf-q { font-family: var(--font-display); font-size: clamp(24px, 4vw, 32px); line-height: 1.2; margin-bottom: 10px; font-weight: 400; }
.lf-why { font-size: 14px; color: var(--fg-3); margin-bottom: 28px; }
.lf-why-budget { font-size: 16px; color: var(--fg-2); line-height: 1.6; }

.lf-options { display: flex; flex-direction: column; gap: 12px; }
.lf-option { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; cursor: pointer; transition: border-color .2s ease, transform .2s ease; font-size: 16px; }
.lf-option:hover { border-color: var(--brand); transform: translateY(-1px); }
.lf-option:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.lf-option input { accent-color: var(--brand); width: 18px; height: 18px; flex-shrink: 0; }

.lf-accord { margin-top: 18px; padding: 14px 18px; background: var(--surface); border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; font-size: 15px; color: var(--fg-2); font-style: italic; }

.lf-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; gap: 16px; }
.lf-back { background: none; border: none; color: var(--fg-3); font-size: 14px; cursor: pointer; padding: 10px 0; font-family: inherit; }
.lf-back:hover { color: var(--fg-2); }
.lf-nav .l-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.lf-fields { display: flex; flex-direction: column; gap: 20px; }
.lf-field label { display: block; font-size: 14px; color: var(--fg-2); margin-bottom: 6px; }
.lf-field input { width: 100%; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 16px; font-family: inherit; color: inherit; }
.lf-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px oklch(0.66 0.19 28 / 0.25); }
.lf-hint { font-size: 13px; color: var(--fg-3); margin-top: 6px; }
.lf-hint-center { text-align: center; margin-top: 16px; }

.lf-errors { padding: 14px 18px; background: oklch(0.95 0.03 28); border: 1px solid oklch(0.66 0.19 28); border-radius: 12px; margin-bottom: 24px; font-size: 15px; }

.lf-result { padding-top: 24px; }
.lf-result-block { margin-bottom: 40px; }
.lf-result-block p { font-size: 17px; line-height: 1.65; color: var(--fg-2); margin-bottom: 14px; }
.lf-result-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: var(--brand-fg); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 20px; }
.lf-sub { font-family: var(--font-display); font-size: 22px; margin-bottom: 10px; font-weight: 400; }

/* Seconde composition éditoriale. Portée limitée à la landing. */
.landing-page.lv-edition { --lv-paper: #eee5d8; --lv-ink: #312920; --lv-clay: #9e3b29; --lv-light: #fcf7ee; --lv-switch-duration: 200ms; }
.lv-edition .hero { padding: 40px 0 64px; }
.lv-edition .lv-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.lv-edition .lv-hero-copy, .lv-edition .lv-hero-aside { min-width: 0; }
.lv-edition .eyebrow { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--fg-2); font-size: 10px; letter-spacing: .13em; line-height: 1.8; }
.lv-edition .hero h1 { font-size: clamp(2.8rem, 1.5rem + 5vw, 5.6rem); line-height: 1; letter-spacing: -.025em; margin: 24px 0 0; text-wrap: pretty; }
.lv-edition .hero h1 em { display: block; margin-top: 20px; font-size: .65em; line-height: 1.1; letter-spacing: -.01em; max-width: 600px; }
.lv-edition .hero-sub { font-size: 16px; line-height: 1.65; max-width: 430px; }
.lv-edition .hero-sub strong { display: block; margin-top: 12px; }
.lv-edition .hero-cta { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 24px; }
.lv-edition .hero-cta .l-btn { padding: 16px 26px; font-size: 15px; border-radius: 8px; }
.lv-edition .hero-trust { font-size: 11px; }
.lv-edition .lv-formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.lv-edition .lv2-format { margin: 0; min-width: 0; }
.lv-edition .lv2-format-book { grid-column: 1 / -1; }
.lv-edition .lv2-format-art { aspect-ratio: 1; background: #f0e7dc; border-radius: 4px; }
.lv-edition .lv2-format-art img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: inherit; }
.lv-edition .lv2-format-book .lv2-format-art img { object-position: left center; }
.lv-edition .lv2-format-consultation .lv2-format-art img { object-position: right center; }
.lv-edition .lv2-format figcaption { display: flex; align-items: center; gap: 8px; min-height: 52px; border-bottom: 1px solid var(--line-2); font-size: 11px; font-weight: 500; }
.lv-edition .lv2-format-index { color: var(--fg-3); font-size: 10px; font-weight: 400; }
.lv-edition .lv2-format figcaption > svg { width: 15px; height: 15px; margin-left: auto; flex: none; }

/* Une rupture de fond pour la question administrative. */
.lv-edition section.lv-paperwork { --fg: #fcf6ed; --fg-2: #dbcfc0; --fg-3: #c4b7a7; --line: #56483d; --line-2: #6e5a4a; --accent-text: #f0b89b; --accent-soft: #4c382d; --bg-2: #383027; background: #28231e; color: var(--fg); padding: 64px 0; }
.lv-edition .lv-section-index { font-size: 10px; letter-spacing: 0; border: 1px solid currentColor; width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; margin-right: 12px; }
.lv-edition .section-title { font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4rem); text-wrap: pretty; }
.lv-edition .lv-paperwork .section-title em { display: block; margin-top: 12px; }
.lv-edition .section-intro { font-size: 16px; line-height: 1.7; }
.lv-edition .lv-paper-options { margin-top: 40px; grid-template-columns: minmax(0, 1fr); }
.lv-edition .lv-paper-options .feat-card { border: 0; border-top: 1px solid var(--line); padding: 26px 0 12px 44px; border-radius: 0; background: transparent; position: relative; box-shadow: none; transform: none; }
.lv-edition .lv-paper-icon { position: absolute; left: 0; top: 24px; font-size: 23px; font-family: var(--font-display); color: var(--accent-text); }
.lv-edition .lv-paperwork .feat-card h3 { font-size: 25px; font-weight: 400; }
.lv-edition .lv-paperwork .feat-card p { font-size: 14px; line-height: 1.7; }
.lv-edition .lv-paperwork .clair-chip { border-radius: 4px; font-size: 10px; letter-spacing: .03em; padding: 5px 8px; }

/* Le texte ne disparaît pas : le clic change uniquement le schéma. */
.lv-edition .lv2-walkthrough { display: grid; gap: 32px; margin-top: 40px; align-items: center; }
.lv-edition .lv2-step-copy { padding: 24px 0; border-bottom: 1px solid var(--line); }
.lv-edition .lv2-step-copy:first-of-type { border-top: 1px solid var(--line); }
.lv-edition .lv2-step-copy h3 { margin: 0; }
.lv-edition .lv2-step-select { display: flex; width: 100%; min-height: 44px; align-items: center; gap: 16px; background: transparent; border: 0; padding: 0; color: var(--fg-2); text-align: left; cursor: pointer; font-family: var(--font-display); font-size: 27px; line-height: 1.15; }
.lv-edition .lv2-step-select[aria-pressed="true"] { color: var(--accent-text); }
.lv-edition .lv2-step-number { flex: none; font-family: var(--font-sans); font-size: 11px; letter-spacing: .06em; }
.lv-edition .lv2-step-arrow { margin-left: auto; font-family: var(--font-sans); font-size: 20px; }
.lv-edition .lv2-step-copy p { margin: 8px 0 0 32px; font-size: 14px; line-height: 1.7; color: var(--fg-2); }
.lv-edition .lv2-scenes { display: grid; align-content: space-between; justify-items: center; gap: 28px; padding: 24px 20px; min-height: 450px; background: var(--lv-paper); border-radius: 4px; color: var(--lv-ink); }
.lv-edition .lv2-scene-eyebrow { font-size: 9px; letter-spacing: .17em; justify-self: start; }
.lv-edition .lv2-scene { width: 100%; max-width: 360px; grid-area: 2 / 1; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--lv-switch-duration) var(--l-ease-out), transform var(--lv-switch-duration) var(--l-ease-out); }
.lv-edition .lv2-scene[data-active="true"] { opacity: 1; transform: none; }
.lv-edition [data-keyboard="true"] .lv2-scene { transition: none; }

.lv-edition .lv2-app-window { border: 1px solid #d4cabc; border-radius: 9px; background: #fffcf7; box-shadow: 0 4px 6px #2f231708, 0 16px 40px #2f231714; }
.lv-edition .lv2-app-chrome { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #eae2d7; font-size: 11px; }
.lv-edition .lv2-app-brand { font-family: var(--font-display); background: var(--lv-ink); color: #fcf7ed; border-radius: 5px; width: 23px; height: 26px; display: grid; place-items: center; font-size: 17px; }
.lv-edition .lv2-app-chrome > i { width: 5px; height: 5px; border-radius: 50%; background: #aa9983; margin-left: auto; }
.lv-edition .lv2-app-content { padding: 24px; }
.lv-edition .lv2-app-title { font-family: var(--font-display); font-size: 33px; line-height: 1.1; display: block; margin-bottom: 28px; }
.lv-edition .lv2-app-title em { color: var(--lv-clay); }
.lv-edition .lv2-field-label { font-size: 10px; display: block; margin-bottom: 7px; }
.lv-edition .lv2-faux-field { display: flex; justify-content: space-between; gap: 8px; padding: 12px; border: 1px solid #d5cabc; color: #6e5b49; border-radius: 5px; font-size: 12px; }
.lv-edition .lv2-faux-button { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; padding: 12px; background: var(--lv-ink); color: var(--lv-light); font-size: 12px; border-radius: 5px; }
.lv-edition .lv2-app-note { display: block; text-align: center; font-size: 9px; margin-top: 12px; color: #705f4c; }
.lv-edition .lv2-scene-caption { font-family: var(--font-display); font-size: 22px; font-style: italic; color: #6e513d; }
.lv-edition .lv2-upload { display: flex; gap: 12px; align-items: center; padding: 14px; margin-bottom: 20px; border: 1px dashed #a9937c; border-radius: 6px; font-size: 11px; }
.lv-edition .lv2-upload svg { width: 25px; height: 25px; color: var(--lv-clay); }
.lv-edition .lv2-upload > span:last-child { margin-left: auto; color: var(--lv-clay); }
.lv-edition .lv2-link-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; margin-bottom: 20px; color: var(--lv-clay); background: #f3e0d1; }
.lv-edition .lv2-link-mark svg { width: 25px; height: 25px; }
.lv-edition .lv2-share-options { display: flex; flex-wrap: wrap; gap: 6px; font-size: 9px; }
.lv-edition .lv2-share-options > span { padding: 6px 9px; background: #eee7dc; border-radius: 20px; }
.lv-edition .lv2-delivery { margin-top: 24px; display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.6; color: #63523f; }
.lv-edition .lv2-delivery > span { color: var(--lv-clay); }

/* La fin de page poursuit la même hiérarchie éditoriale. */
.lv-edition section.lv-questions { padding: 0 0 72px; }
.lv-edition .lv-questions > .l-wrap { display: grid; gap: 16px; }
.lv-edition .lv-questions .features-grid { grid-template-columns: minmax(0, 1fr); margin-top: 0; gap: 0; }
.lv-edition .lv-questions .feat-card { padding: 24px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.lv-edition .lv-questions .feat-card h3 { font-size: 25px; font-weight: 400; margin-bottom: 12px; }
.lv-edition .lv-questions .feat-card p { line-height: 1.7; }
.lv-edition .pricing-section { background: #eee7dc; border: 0; }
.lv-edition .plan { border-radius: 5px; padding: 32px; border-color: #d4c6b6; }
.lv-edition .plan.featured { transform: none; background: #30271f; border-color: #30271f; color: #fcf7ed; }
.lv-edition .plan-price { font-size: 78px; letter-spacing: -.03em; margin-top: 26px; }
.lv-edition .plan-price small { font-size: 13px; letter-spacing: 0; }
.lv-edition .plan-tier { font-size: 11px; }
.lv-edition .plan-rate { border-radius: 4px; }
.lv-edition .plan-rate-num { font-size: 38px; }
.lv-edition .plan.featured .l-btn { background: #f4dfc4; color: #31271d; border-color: #f4dfc4; }
.lv-edition .plan .l-btn { border-radius: 6px; min-height: 48px; }
.lv-edition .plan-toggle button { min-height: 44px; }
.lv-edition .plan-popular { border-radius: 4px; white-space: nowrap; }

/* Une seule décision sur l'accueil ; le comparatif reste sur /tarifs. */
.landing-page .beb-entry-heading { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.landing-page .beb-entry-plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.landing-page .beb-entry-card { padding: clamp(24px, 4vw, 40px); }
.landing-page .beb-entry-card .plan-bill { font-size: 14px; line-height: 1.6; }
.landing-page .beb-entry-card .l-btn + .plan-bill { margin: 12px 0 0; text-align: center; }
.landing-page .beb-entry-terms { max-width: 560px; margin: 20px auto 0; color: var(--fg-2); font-size: 13px; line-height: 1.6; }
.landing-page .beb-entry-more { margin: 16px auto 0; text-align: center; }
.landing-page .beb-entry-more a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; color: var(--fg-2); text-decoration: underline; text-underline-offset: 4px; }
.lv-edition .lv2-faq .faq-list { margin-top: 20px; }
.lv-edition .cta-final { background: #30271f; color: #fcf7ed; padding: 80px 0; }
.lv-edition .cta-final::before { background: none; }
.lv-edition .cta-final h2 { font-size: clamp(3rem, 1.75rem + 5vw, 5.5rem); max-width: 850px; }
.lv-edition .cta-final h2 em { color: #e7b396; }
.lv-edition .cta-final .l-btn { border-radius: 8px; background: #f6e3ca; color: #30271f; border-color: #f6e3ca; }
.lv-edition .cta-final .micro { color: #d7c9b6; }
@media (min-width: 600px) {
  .lv-edition .lv-formats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .lv-edition .lv2-format-book { grid-column: auto; }
  .lv-edition .lv2-format-book .lv2-format-art img { aspect-ratio: 1; }
  .lv-edition .lv2-format figcaption { font-size: 12px; gap: 10px; }
  .lv-edition .lv2-scenes { padding: 28px 36px; }
}
@media (min-width: 1000px) {
  .lv-edition .hero { padding: 56px 0 80px; }
  .lv-edition .lv-hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px 48px; align-items: start; }
  .lv-edition .hero h1 { margin-top: 26px; font-size: clamp(3.5rem, 1rem + 4vw, 4.5rem); line-height: 1.04; }
  .lv-edition .lv-hero-line { display: block; }
  .lv-edition .hero h1 em { font-size: 34px; line-height: 1.2; margin-top: 20px; text-wrap: balance; }
  .lv-edition .lv-hero-aside { padding-top: 56px; }
  .lv-edition .lv-formats { grid-column: 1 / -1; margin-top: 0; gap: 24px; }

  .lv-edition .lv2-format figcaption { font-size: 14px; min-height: 64px; }
  .lv-edition .lv2-format-index { font-size: 11px; margin-right: 4px; }
  .lv-edition section.lv-paperwork { padding: 84px 0; }
  .lv-edition .lv-paperwork > .l-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
  .lv-edition .lv-paper-options { margin-top: 0; }
  .lv-edition .lv2-walkthrough { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; }
  .lv-edition .lv2-scenes { min-height: 490px; }
  .lv-edition .lv-questions > .l-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; padding-top: 16px; }
  .lv-edition .lv-questions .section-title { max-width: 340px; }
  .lv-edition .lv2-faq > .l-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 80px; }
  .lv-edition .lv2-faq > .l-wrap > .reveal { text-align: left; margin: 0; }
  .lv-edition .lv2-faq .faq-list { margin: 0; }
  .lv-edition .lv2-faq .section-title em { display: block; }
}
@media (max-width: 599.98px) {
  .lv-edition .hero-cta .l-btn { width: 100%; justify-content: center; }
  .lv-edition .lv2-format figcaption > svg { display: none; }
  .lv-edition .lv2-step-select { font-size: 25px; }
  .lv-edition .plan { padding: 28px 24px; }
}
@media (hover: hover) and (pointer: fine) {
  .lv-edition .feat-card:hover, .lv-edition .plan:hover, .lv-edition .plan.featured:hover { transform: none; box-shadow: none; }
  .lv-edition .plan.featured .l-btn:hover { background: #fff0d9; color: #31271d; }
  .lv-edition .lv2-step-select:hover { color: var(--accent-text); }
}
.lv-edition .plan.featured .l-btn:focus-visible { background: #fff0d9; color: #31271d; }
.lv-edition .lv2-step-select:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 5px; border-radius: 3px; }

/* Un changement de schéma occasionnel : 200 ms, interruption native CSS. */
@media (prefers-reduced-motion: reduce) {
  .lv-edition .lv2-scene { transform: none; transition-property: opacity; }
}
.lv-edition .lv2-faq-heading { text-align: center; }
@media (min-width: 1000px) { .lv-edition .lv2-faq-heading { text-align: left; } }

.lv-edition .lv2-step-hint { display: block; margin-bottom: 16px; font-size: 12px; color: var(--fg-3); }