/* ===== 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); }
/* Le logo à la place du mot BEB dans un titre : il suit la taille du texte. */
.landing-page .section-title .titre-logo { white-space: nowrap; }
.landing-page .section-title .titre-logo svg { height: .74em; width: auto; vertical-align: -.02em !important; }
.lv-edition .lv-paperwork .section-title .titre-logo { color: oklch(66% .19 28); }
.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; }

/* Formulaire /marketing (05/11/2026). .lf-ar : police de l'accueil arabe ;
   .lf-contact : intro et erreurs, communs au derja et au français. */
.lf-ar { --font-ar: "Geist", "IBM Plex Sans Arabic", "Plex Arabe Repli Noto Sans", "Plex Arabe Repli Naskh", "Plex Arabe Repli DejaVu", var(--font-sans); font-family: var(--font-ar); }
.lf-ar :is(.lf-q, .lf-why, .lf-field label, .l-btn, .lf-errors) { font-family: var(--font-ar); letter-spacing: 0; }
.lf-ar .lf-q { font-weight: 600; line-height: 1.4; }
.lf-contact .lf-why { font-size: 16px; color: var(--fg-2); line-height: 1.7; }
.lf-ar .lf-field input[dir="ltr"] { text-align: right; }
.lf-contact .lf-erreur { color: oklch(0.5 0.19 28); }
.lf-contact .lf-errors ul { margin: 8px 0 0; padding-inline-start: 18px; }
.lf-contact .lf-errors a { color: inherit; }

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

/* ===== Film de présentation (29/09/2026) =====
   L'aperçu muet tourne déjà : l'animation dit « la vidéo a commencé, le son
   attend ton clic ». Registre expressif (rare, marketing) : onde lente autour
   du bouton, barres de son, barre de progression de l'aperçu. Seuls transform
   et opacity bougent. Sous prefers-reduced-motion : ni onde, ni barres, ni
   aperçu (le contrôleur ne le lance pas), seulement des fondus. */
.lv-edition .lvid { margin: 8px 0 0; min-width: 0; }
.lv-edition .lvid-cadre { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #f3eee6; box-shadow: 0 0 0 1px #2f231714, 0 2px 4px #2f23170a, 0 28px 64px -24px #2f231740; isolation: isolate; }
.lv-edition .lvid-cadre video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.lv-edition .lvid-apercu { transform-origin: 50% 50%; transition: opacity 300ms var(--l-ease-out), transform 600ms var(--l-ease-out); }
.lv-edition .lvid-film { opacity: 0; background: #f3eee6; transition: opacity 300ms var(--l-ease-out); }
.lv-edition .lvid[data-etat="film"] .lvid-film { opacity: 1; }
.lv-edition .lvid[data-etat="film"] .lvid-apercu { opacity: 0; }

.lv-edition .lvid-lancer { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: linear-gradient(to top, #1e17101f, #1e171000 42%); color: #fcf7ee; cursor: pointer; transition: opacity 200ms var(--l-ease-out); }
.lv-edition .lvid[data-etat="film"] .lvid-lancer { opacity: 0; pointer-events: none; }
.lv-edition .lvid-rond { position: relative; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: #312920eb; box-shadow: 0 10px 30px -8px #1e171066; transition: transform 200ms var(--l-ease-out); }
.lv-edition .lvid-rond svg { margin-left: 3px; }
.lv-edition .lvid-rond::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #312920; opacity: 0; animation: lvid-onde 3.2s var(--l-ease-out) infinite; }
.lv-edition .lvid[data-etat="film"] .lvid-rond { transform: scale(.94); }
.lv-edition .lvid-lancer:active .lvid-rond { transform: scale(.97); }
.lv-edition .lvid-lancer:focus-visible { outline: none; }
.lv-edition .lvid-lancer:focus-visible .lvid-rond { outline: 3px solid #312920; outline-offset: 4px; }
.lv-edition .lvid-cadre:focus-within .lvid-apercu { transform: scale(1.015); }

.lv-edition .lvid-pastille { position: absolute; left: 12px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: #312920d9; color: #fcf7ee; font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.lv-edition .lvid-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.lv-edition .lvid-eq i { width: 2px; height: 12px; border-radius: 1px; background: currentColor; transform-origin: 50% 100%; transform: scaleY(.35); animation: lvid-eq 1.1s cubic-bezier(0.77, 0, 0.175, 1) infinite alternate; }
.lv-edition .lvid-eq i:nth-child(2) { animation-delay: -.45s; animation-duration: .9s; }
.lv-edition .lvid-eq i:nth-child(3) { animation-delay: -.8s; animation-duration: 1.25s; }

.lv-edition .lvid-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #31292014; }
.lv-edition .lvid-barre > span { position: absolute; inset: 0; background: #312920b3; transform-origin: 0 50%; transform: scaleX(0); }

@keyframes lvid-onde { 0% { transform: scale(1); opacity: .5; } 60%, 100% { transform: scale(1.55); opacity: 0; } }
@keyframes lvid-eq { from { transform: scaleY(.3); } to { transform: scaleY(1); } }

@media (hover: hover) and (pointer: fine) {
  .lv-edition .lvid-lancer:hover .lvid-rond { transform: scale(1.06); }
  .lv-edition .lvid-cadre:hover .lvid-apercu { transform: scale(1.015); }
}
@media (min-width: 600px) {
  .lv-edition .lvid-rond { width: 88px; height: 88px; }
  .lv-edition .lvid-rond svg { width: 34px; height: 34px; }
  .lv-edition .lvid-pastille { left: 20px; bottom: 22px; font-size: 13px; }
}
@media (min-width: 1000px) {
  .lv-edition .lvid { grid-column: 1 / -1; margin: 0; }
  .lv-edition .lvid-rond { width: 112px; height: 112px; }
  .lv-edition .lvid-rond svg { width: 42px; height: 42px; }
  .lv-edition .lvid-pastille { left: 28px; bottom: 30px; gap: 10px; padding: 9px 16px; font-size: 15px; }
  .lv-edition .lvid-pastille > svg { width: 18px; height: 18px; }
  .lv-edition .lvid-eq { height: 15px; }
  .lv-edition .lvid-eq i { height: 15px; }
  .lv-edition .lvid-barre { height: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-edition .lvid-rond::before, .lv-edition .lvid-eq i { animation: none; }
  .lv-edition .lvid-apercu, .lv-edition .lvid-rond { transition: opacity 200ms ease; transform: none !important; }
  .lv-edition .lvid-barre { display: none; }
}

/* Haut de page resserré sur téléphone (29/09/2026, demande d'Omar) : à
   360 × 640 la vidéo commençait à 686 px, donc hors du premier écran. On
   gagne ~95 px sur les marges et l'interligne pour que le haut de l'aperçu,
   qui bouge, soit déjà visible à l'arrivée. Le bouton garde sa taille. */
@media (max-width: 599.98px) {
  .lv-edition .hero { padding-top: 24px; }
  .lv-edition .lv-hero-grid { gap: 16px; }
  .lv-edition .hero h1 { font-size: 2.5rem; margin-top: 16px; }
  .lv-edition .lv-hero-line { display: block; }
  .lv-edition .hero h1 em { margin-top: 12px; }
  .lv-edition .hero-sub { line-height: 1.5; }
  .lv-edition .hero-sub strong { margin-top: 8px; }
  .lv-edition .hero-cta { margin-top: 20px; }
  .lv-edition .lvid { margin-top: 4px; }
}

/* Haut de page en derja pour la pub arabe (04/11/2026). Le titre latin est un
   serif fin, serré (-0,025em) et à interligne 1 : appliqué à l'arabe, les
   lettres liées se coupent et les points touchent la ligne du dessous. D'où
   IBM Plex Sans Arabic (déjà servie par les catalogues publics), aucun interlettrage, un interligne
   plus haut et un corps plus petit, l'arabe portant plus de matière par mot.
   Placé en fin de feuille : mêmes sélecteurs que les règles du hero, l'ordre
   décide. */
/* Geist d'abord : elle n'a pas de lettres arabes, donc l'arabe tombe sur
   Plex et les mots latins (contrat, D17, RIB, espace) gardent la police du
   reste de la page. Idée d'Omar du 04/11/2026. */
/* Repli métrique pour IBM Plex Sans Arabic, sur le modèle de ceux du haut de
   la feuille. Sans lui, la phrase sous le titre faisait 3 lignes avec la police
   du système et 2 avec Plex : le bouton remontait de 32 px à l'arrivée des
   polices (CLS 0,034 à 390 px, mesuré le 04/11/2026). Largeurs relevées sur le
   vrai texte arabe du haut de page, en 400 et en 600 : Plex = 93,2 % et 89,3 %
   de Noto Sans Arabic (Android récent), 105,7 % et 106,8 % de Noto Naskh Arabic
   (Android plus ancien), 88,9 % et 79 % de DejaVu Sans (Linux). Les lettres
   latines n'y passent pas (unicode-range) : elles restent à Geist et à ses replis. */
@font-face { font-family: "Plex Arabe Repli Noto Sans"; src: local("Noto Sans Arabic Regular"), local("NotoSansArabic-Regular"), local("Noto Sans Arabic UI"); font-weight: 400; size-adjust: 93.2%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Plex Arabe Repli Noto Sans"; src: local("Noto Sans Arabic Bold"), local("NotoSansArabic-Bold"), local("Noto Sans Arabic UI Bold"); font-weight: 600; size-adjust: 89.3%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Plex Arabe Repli Naskh"; src: local("Noto Naskh Arabic Regular"), local("NotoNaskhArabic-Regular"), local("Noto Naskh Arabic UI"); font-weight: 400; size-adjust: 105.7%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Plex Arabe Repli Naskh"; src: local("Noto Naskh Arabic Bold"), local("NotoNaskhArabic-Bold"), local("Noto Naskh Arabic UI Bold"); font-weight: 600; size-adjust: 106.8%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Plex Arabe Repli DejaVu"; src: local("DejaVu Sans"), local("DejaVuSans"); font-weight: 400; size-adjust: 88.9%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Plex Arabe Repli DejaVu"; src: local("DejaVu Sans Bold"), local("DejaVuSans-Bold"); font-weight: 600; size-adjust: 79%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
.lv-edition :is(.lv-hero-ar, .lv-corps-ar) { --font-ar: "Geist", "IBM Plex Sans Arabic", "Plex Arabe Repli Noto Sans", "Plex Arabe Repli Naskh", "Plex Arabe Repli DejaVu", var(--font-sans); }
.lv-edition .lv-hero-ar :is(h1, .hero-sub, .hero-trust, .l-btn) { font-family: var(--font-ar); letter-spacing: 0; }
.lv-edition .lv-hero-ar h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem); font-weight: 600; line-height: 1.35; margin-top: 8px; text-wrap: balance; }
.lv-edition .lv-hero-ar .hero-sub { font-size: 18px; line-height: 1.8; }
.lv-edition .lv-hero-ar .hero-trust { font-size: 14px; }
.lv-edition .lv-hero-ar .hero-cta .l-btn { font-size: 17px; font-weight: 600; }
@media (min-width: 1000px) {
  .lv-edition .lv-hero-ar h1 { font-size: clamp(2.8rem, 1rem + 3vw, 3.6rem); margin-top: 26px; }
}

/* Le mot qui change après « بيع » (04/11/2026, effet « G » choisi par Omar) :
   le mot, en italique d'Instrument Serif (déjà chargée), est blanc dans une
   pastille rouge avec l'icône de ce qu'on vend. Seul le mot affiché est en
   display, donc la pastille a la bonne largeur dès le premier rendu, sans
   JavaScript. Le mouvement est posé par mot_tournant_controller.js. */
.lv-edition .lv-hero-centre .lv-hero-line { display: block; }
.lv-edition .lv-pastille {
  display: inline-flex; align-items: center; gap: 0.2em; vertical-align: 0.04em;
  padding: 0.1em 0.3em 0.16em 0.24em; border-radius: 0.28em; overflow: hidden;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.12em; line-height: 1;
}
.lv-edition .lv-pastille-icones, .lv-edition .lv-pastille-mots { display: grid; }
.lv-edition .lv-pastille-icones > svg { grid-area: 1 / 1; width: 0.72em; height: 0.72em; display: none; }
.lv-edition .lv-pmot { grid-area: 1 / 1; justify-self: start; white-space: nowrap; display: none; }
.lv-edition .lv-pastille-icones > svg.is-on { display: block; }
.lv-edition .lv-pmot.is-on { display: inline-block; }
.lv-edition .lv-pmot > span { display: inline-block; }
/* La place du mot le plus long, réservée dans la ligne : la pastille visible
   s'y pose côté « بيع » (début de ligne en arabe) et s'étire dans cette place. */
.lv-edition .lv-pastille-place { display: inline-grid; vertical-align: 0.04em; }
.lv-edition .lv-pastille-place > .lv-pastille { grid-area: 1 / 1; justify-self: start; vertical-align: baseline; }
.lv-edition .lv-pastille-gabarit { visibility: hidden; }
.lv-edition .lv-gabarit-icone { display: block; width: 0.72em; height: 0.72em; }

/* Haut de page arabe, version « A » choisie par Omar le 04/11/2026 sur planche
   (« trop de points de focus d'un seul coup »). Une seule ligne de lecture :
   titre, phrase, bouton, vidéo, centrés à partir de 600 px. Sur téléphone, rien
   ne change : texte à droite, bouton pleine largeur, comme sa capture. Il ne
   reste qu'une couleur (la pastille) et qu'un bouton plein (celui du titre) :
   le bouton du menu passe en contour (_navbar) et le rond de la vidéo en clair.
   Centré, le titre n'a plus besoin de la place réservée au mot le plus long :
   « بيع » suit la pastille. Les six mots gardent deux lignes et la même hauteur
   à 360, 390, 1024 et 1440 px (mesuré le 04/11/2026).
   Le 05/11/2026, Omar demande d'aligner le français sur l'arabe : ces règles
   de mise en page passent sur .lv-hero-centre, posée sur les deux hauts de
   page ; .lv-hero-ar ne garde que la police et les tailles de l'arabe. */
.lv-edition .lv-hero-centre .hero-sub { color: var(--fg-2); }
.lv-edition .lv-hero-centre .lvid-lancer { background: none; }
.lv-edition .lv-hero-centre .lvid-rond { background: #fcf7eee6; color: #312920; box-shadow: 0 6px 20px -8px #1e171040; }
.lv-edition .lv-hero-centre .lvid-rond::before { border-color: #fcf7ee; }
.lv-edition .lv-hero-centre .lvid-pastille { background: #fcf7eee0; color: #312920; }
@media (min-width: 600px) {
  .lv-edition .lv-hero-centre .lv-hero-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 20px; text-align: center; }
  .lv-edition .lv-hero-centre .lv-pastille-gabarit { display: none; }
  .lv-edition .lv-hero-centre .lv-pastille-place { display: inline; }
  .lv-edition .lv-hero-centre .lv-hero-aside { display: flex; flex-direction: column; align-items: center; padding-top: 0; }
  .lv-edition .lv-hero-centre .hero-sub { max-width: 36ch; margin-inline: auto; }
  .lv-edition .lv-hero-centre .hero-cta { align-items: center; margin-top: 20px; }
  .lv-edition .lv-hero-centre .lvid { width: 100%; max-width: 860px; margin-top: 20px; }
}
@media (min-width: 1000px) {
  .lv-edition .lv-hero-centre .lvid-rond { width: 84px; height: 84px; }
  .lv-edition .lv-hero-centre .lvid-rond svg { width: 32px; height: 32px; }
}

/* Le corps de l'accueil en derja (_landing_corps_ar, 05/11/2026). Mêmes raisons
   que le haut de page : l'arabe ne supporte ni interlettrage (il casse la
   liaison des lettres) ni majuscules forcées ni l'italique du serif latin, et
   demande un interligne plus haut. Le reste est le miroir des règles écrites
   pour le français en gauche-droite : ce qui était calé à gauche passe à droite. */
.lv-edition .lv-corps-ar :is(h2, h3, p, li, summary, .faq-answer, .section-eyebrow, .plan-tier, .plan-bill, .plan-rate-lab, .plan-price, .l-btn, .micro, .clair-chip, .lv2-step-select, .lv2-step-hint, .beb-entry-terms) { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; }
.lv-edition .lv-corps-ar .section-title { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem); font-weight: 600; line-height: 1.4; text-wrap: balance; }
.lv-edition .lv-corps-ar :is(.section-title, .cta-final h2) em, .lv-edition .cta-final.lv-corps-ar h2 em { font-style: normal !important; } /* application.css impose « i, em { italic !important } » */
.lv-edition .lv-corps-ar .section-eyebrow { font-size: 14px; }
.lv-edition .lv-corps-ar .lv-section-index { margin: 0 0 0 12px; }
.lv-edition .lv-corps-ar .section-intro { line-height: 1.8; }
.lv-edition .lv-corps-ar .feat-card h3 { font-size: 21px; font-weight: 600; line-height: 1.55; }
.lv-edition .lv-corps-ar .feat-card p { line-height: 1.8; }
.lv-edition .lv-corps-ar .clair-chip { font-size: 12px; }
.lv-edition .lv-corps-ar.lv-paperwork .lv-paper-options .feat-card { padding: 26px 44px 12px 0; }
.lv-edition .lv-corps-ar .lv-paper-icon { left: auto; right: 0; }
.lv-edition .lv-corps-ar .lv2-step-select { text-align: right; font-size: 22px; font-weight: 600; line-height: 1.4; }
.lv-edition .lv-corps-ar .lv2-step-copy p { margin: 8px 32px 0 0; line-height: 1.8; }
.lv-edition .lv-corps-ar .plan-tier { font-size: 14px; }
.lv-edition .lv-corps-ar .plan-price { font-size: 56px; font-weight: 600; }
.lv-edition .lv-corps-ar .plan-price small { font-family: var(--font-ar); font-size: 15px; }
.lv-edition .lv-corps-ar .plan li { padding: 0 26px 0 0; line-height: 1.7; }
.lv-edition .lv-corps-ar .plan li::before { left: auto; right: 0; }
.lv-edition .lv-corps-ar .plan-rate-lab { font-size: 14px; line-height: 1.7; }
.lv-edition .lv-corps-ar .plan-rate-lab:first-child { font-size: 17px; font-weight: 600; }
.lv-edition .lv-corps-ar .faq-list summary { font-size: 19px; font-weight: 600; line-height: 1.55; }
.lv-edition .lv-corps-ar .faq-answer { line-height: 1.8; }
.lv-edition .cta-final.lv-corps-ar h2 { font-family: var(--font-ar); font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.8rem); font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.lv-edition .cta-final.lv-corps-ar .micro { font-size: 14px; }
@media (min-width: 600px) {
  .lv-edition .lv-corps-ar.lv2-faq > .l-wrap > .reveal { text-align: right; }
}
@media (min-width: 1000px) { .lv-edition .lv-corps-ar .lv2-faq-heading { text-align: right; } }
/* Le nombre de créateurs, sous la phrase de confiance du haut de page arabe. */
.lv-edition .lv2-faq .faq-suite { display: block; margin-top: 12px; }
.lv-edition .lv2-faq .faq-suite a { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.lv-edition .lv-hero-centre .lv-compteur { display: flex; align-items: center; gap: 14px; margin: 10px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--fg-2); }
.lv-edition .lv-hero-centre .lv-compteur-chiffre { display: flex; flex-direction: column; align-items: center; flex: none; line-height: 1; }
.lv-edition .lv-hero-centre .lv-compteur-chiffre bdi { font-size: 30px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.lv-edition .lv-hero-centre .lv-compteur-etiquette { margin-top: 4px; font-size: 12px; color: var(--fg-3); }
.lv-edition .lv-hero-centre .lv-compteur-texte { display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.5; }
.lv-edition .lv-hero-centre .lv-compteur-semaine { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--fg-3); }
.lv-edition .lv-hero-centre .lv-compteur-semaine::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex: none; }
.lv-edition .lv-hero-ar .lv-compteur { font-family: var(--font-ar); }