/* --- Reset & base --- LEDR Design System v2.0 (charte officielle) ---- */
/* R02 — @import Google Fonts retiré : déplacé dans <head> de chaque .html
   avec preconnect, ce qui évite le téléchargement séquentiel
   (style.css → @import → fonts CSS → fonts files) bloquant le 1er paint.
   Gain LCP estimé : 300-800 ms sur 3G/4G. */

/* ─────────────────────────────────────────────────────────────────────────
   R03 — CASCADE LAYERS : ordre de priorité des couches CSS
   ─────────────────────────────────────────────────────────────────────────
   Cette déclaration définit l'ORDRE de priorité (left = lowest priority).
   Une règle dans 'utilities' bat une règle dans 'components', qui bat
   'base', sans avoir besoin de !important.

   GUIDE DE MIGRATION (à adopter petit à petit) :
   ───────────────────────────────────────────────
   AVANT :
     .topnav-link {
       background: transparent !important;
       color: var(--ledr-white) !important;
     }
   APRÈS :
     @layer components {
       .topnav-link {
         background: transparent;
         color: var(--ledr-white);
       }
     }
   Plus besoin de !important : la layer 'components' bat naturellement
   'base'. Plus de guerre de spécificité. La cascade redevient lisible.

   Ce projet a actuellement 333 !important dont la majorité disparaîtraient
   en wrappant les composants concernés dans @layer components { }.
   Migration recommandée par module : auth-form, topnav, modals, etc.

   Compat : @layer support ≥ 95 % depuis 2022 (Safari 15.4+, Chrome 99+,
   Firefox 97+). Sur les browsers plus anciens, les règles fonctionnent
   en mode dégradé "normal cascade" — pas de cassure visuelle.
   ───────────────────────────────────────────────────────────────────── */
@layer reset, base, components, utilities, overrides;

/* Archia — typo officielle LEDR (titres) */
@font-face {
  font-family: 'Archia';
  src: url('/static/fonts/Archia-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archia';
  src: url('/static/fonts/Archia-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archia';
  src: url('/static/fonts/Archia-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archia';
  src: url('/static/fonts/Archia-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

:root {
  /* === Palette LEDR (charte officielle vérifiée) === */
  --ledr-black: #000000;
  --ledr-blue: #3438BB;
  --ledr-blue-hover: #272bae;
  --ledr-red: #FF364E;
  --ledr-yellow: #F8E71C;
  --ledr-yellow-bright: #FFE500;
  --ledr-yellow-soft: #FDEA3C;
  --ledr-yellow-hover: var(--ledr-yellow-hover);   /* R07 : variante hover, anciennement hardcodée 5× */
  --ledr-cyan: #55EFDC;
  --ledr-cyan-bright: #00FFF2;
  --ledr-orange: #FFBC7D;
  --ledr-white: #FFFFFF;
  --ledr-offwhite: #F6F6F6;
  --ledr-gray-light: #EEEEEE;
  --ledr-gray-medium: #767676;  /* WCAG AA OK sur blanc (ratio 4.54:1) — F1 */
  --ledr-gray-dark: #222222;
  --ledr-gray-darker: #151515;

  /* R07 — Palette sémantique score/qualité (anciennement hex hardcodés) */
  --grade-a: #0a8a3a;              /* vert foncé */
  --grade-b: #6ab04c;              /* vert moyen */
  --grade-c: var(--ledr-yellow);
  --grade-d: #e67e22;              /* orange */
  --grade-e: var(--ledr-red);

  /* R20 — Tonalités préfabriquées via color-mix() (support ≥ 95 %) :
     Préférer var(--ledr-yellow-15) à rgba(248, 231, 28, 0.15) hardcodé.
     Permet de changer la couleur source en 1 endroit sans rechercher 30 rgba(). */
  --ledr-yellow-05: color-mix(in srgb, var(--ledr-yellow) 5%, transparent);
  --ledr-yellow-10: color-mix(in srgb, var(--ledr-yellow) 10%, transparent);
  --ledr-yellow-15: color-mix(in srgb, var(--ledr-yellow) 15%, transparent);
  --ledr-yellow-20: color-mix(in srgb, var(--ledr-yellow) 20%, transparent);
  --ledr-blue-15: color-mix(in srgb, var(--ledr-blue) 15%, transparent);
  --ledr-red-15: color-mix(in srgb, var(--ledr-red) 15%, transparent);
  --quality-low: var(--ledr-red);
  --quality-medium: #e67e22;
  --quality-good: #6ab04c;
  --quality-excellent: #0a8a3a;
  --success-dark: #0a8a3a;

  /* === Alias sémantiques === */
  --bg: var(--ledr-white);              /* LEDR : blanc pur */
  --panel: var(--ledr-white);
  --border: rgba(0, 0, 0, 0.1);
  --border-soft: rgba(0, 0, 0, 0.06);
  --text: var(--ledr-black);
  --text-soft: #222222;
  --muted: var(--ledr-gray-medium);
  --accent: var(--ledr-blue);
  --accent-hover: var(--ledr-blue-hover);
  --success: #22c55e;
  --error: var(--ledr-red);
  --code-bg: var(--ledr-offwhite);

  /* === Typographies LEDR === */
  --font-display: 'Archia', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  /* Titres */
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;   /* Body */
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* === Échelle d'espacement (alignée sur grille 8px standard) ===
     ⚠️ TOKENS À ADOPTER POUR TOUT NOUVEAU CODE (audit UX — bonus harmonisation)
     Actuellement très peu utilisés (legacy hardcoded en px). Migration
     progressive recommandée : à chaque évolution d'un module, remplacer
     les valeurs hardcodées (gap: 8px, margin: 24px, padding: 16px…) par
     var(--space-xs/sm/md/lg/xl). Bénéfice : cohérence design + facilité
     de re-skinning futur (mode compact, mode dense, ...). */
  --space-xs: 0.5rem;    /*  8px — gap petits éléments, padding compact */
  --space-sm: 0.75rem;   /* 12px — gap standard entre items */
  --space-md: 1rem;      /* 16px — padding cards, margin entre sections */
  --space-lg: 1.5rem;    /* 24px — séparation de blocs majeurs */
  --space-xl: 2rem;      /* 32px — section hero, padding large */
  --space-2xl: 3rem;     /* 48px — séparation entre sections de page */
  --space-3xl: 5rem;     /* 80px — espacement vertical hero / footer */

  /* === Border-radius LEDR (Phase 4 v3 hard light — totalement carré) ===
     Coins TOTALEMENT carrés sur tous les containers (cohérent landing v3).
     Les badges restent ronds (--radius-pill) pour signature score A→E et
     pills de filtre. */
  --radius-btn: 0px;     /* Phase 4 v3 — passé de 2px à 0px (carré landing) */
  --radius-card: 0px;    /* Phase 4 v3 — passé de 2px à 0px (carré landing) */
  --radius-pill: 999px;  /* Badges en pill : conservé (whitelist scoring + filtres) */

  /* === Ombres LEDR (signature : crisp offset sans flou) === */
  --shadow-natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
  --shadow-deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
  --shadow-sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
  --shadow-crisp: 6px 6px 0px var(--ledr-black);   /* SIGNATURE LEDR */
  --shadow-crisp-blue: 6px 6px 0px var(--ledr-blue);
  --shadow-crisp-red: 6px 6px 0px var(--ledr-red);
  --shadow-soft: 4px 4px 0px var(--ledr-black);    /* Phase 1 v3 — passé d'une
                                                      ombre douce blur à une
                                                      ombre crisp signature */

  /* === Container max-width === */
  --container-narrow: 1200px;   /* LEDR officiel */
  --container-wide: 1600px;     /* App 3 colonnes */

  /* === Échelle de z-index (R04) === */
  /* Avant : 11 valeurs ad-hoc (5, 10, 50, 90, 95, 100, 200, 1000, 2000, 3000, 9999).
     Maintenant : 6 niveaux nommés. Les anciennes valeurs sont conservées pour
     compatibilité mais TOUT NOUVEAU code doit utiliser ces tokens. */
  --z-base: 1;
  --z-sticky: 100;            /* navbars, sticky CTA, sticky header */
  --z-dropdown: 200;          /* menus déroulants, popovers */
  --z-modal-backdrop: 1000;   /* fond grisé derrière modale */
  --z-modal: 1010;            /* modales (library, help, sources, compare, ...) */
  --z-toast: 1100;            /* toasts — TOUJOURS au-dessus des modales */
  --z-tooltip: 1200;          /* tooltips — au-dessus de tout */
}

body {
  margin: 0;
  font-family: var(--font-sans);     /* Montserrat */
  font-size: 16px;                   /* base LEDR */
  line-height: 1.85;                 /* signature LEDR : très aéré */
  color: var(--text-soft);
  background: var(--bg);             /* blanc pur */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Page de vente / Landing ------------------------------------------ */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--ledr-black);
  overflow-y: auto;
  overflow-x: hidden;
}
.login-screen[hidden] { display: none; }

.lp-content { }

/* ── Barre de progression scroll ── */
.lp-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--ledr-yellow);
  z-index: 200;
  width: 0;
  transition: width 0.05s linear;
}

/* ── Navbar enrichie : ancres + mini-login ── */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  /* R06 — fond plus opaque par défaut (sans blur) ; allégé si blur supporté */
  background: rgba(0, 0, 0, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .lp-nav {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}
.lp-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.lp-nav-brand {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ledr-white);
  flex-shrink: 0;
}
.lp-nav-ledr {
  font-weight: 700;
  color: var(--ledr-yellow);
}

/* Ancres */
.lp-nav-anchors {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.lp-nav-anchor {
  display: inline-block;
  padding: 8px 14px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
.lp-nav-anchor:hover {
  color: var(--ledr-white);
  background: rgba(255, 255, 255, 0.08);
}
.lp-nav-anchor.is-active {
  color: var(--ledr-yellow);
  background: rgba(248, 231, 28, 0.1);
}

/* Mini login form (desktop) */
.lp-nav-mini-login {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.lp-nav-mini-login input {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: var(--ledr-white) !important;
  padding: 7px 12px !important;
  border-radius: 6px !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  width: 160px;
  text-align: left !important;
}
.lp-nav-mini-login input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
}
/* R01 — focus-visible (clavier) avec outline jaune ; focus souris : juste border */
.lp-nav-mini-login input:focus {
  border-color: var(--ledr-yellow) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}
.lp-nav-mini-login button {
  padding: 7px 12px !important;
  background: var(--ledr-yellow) !important;
  color: var(--ledr-black) !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: background 0.15s ease, transform 0.15s ease;
}
.lp-nav-mini-login button:hover {
  background: var(--ledr-yellow-hover) !important;
  transform: translateY(-1px);
}
.lp-nav-mini-login button.is-loading {
  pointer-events: none;
  opacity: 0.6;
}

/* Bouton "Connexion" mobile (caché sur desktop) */
.lp-nav-login {
  padding: 8px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: none; /* hidden on desktop */
}
.lp-nav-login:hover {
  background: var(--ledr-yellow-hover);
  transform: translateY(-1px);
}

/* Mobile : cache les ancres et mini-login, montre le bouton CTA */
@media (max-width: 900px) {
  .lp-nav-anchors,
  .lp-nav-mini-login { display: none; }
  .lp-nav-login { display: inline-block; }
  .lp-nav-inner { padding: 12px 20px; }
}

/* ── Bannière sticky CTA (apparaît au scroll après hero) ── */
.lp-sticky-cta {
  position: fixed;
  top: 60px;  /* sous la navbar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  padding: 12px 16px;
  border: 2px solid var(--ledr-black);
  border-radius: var(--radius-btn);
  box-shadow: 4px 4px 0px var(--ledr-black);
  animation: stickyDrop 0.4s ease;
  max-width: 92vw;
}
.lp-sticky-cta[hidden] { display: none; }
@keyframes stickyDrop {
  from { transform: translate(-50%, -120%); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
.lp-sticky-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.lp-sticky-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.lp-sticky-form input {
  background: var(--ledr-white) !important;
  border: 1.5px solid var(--ledr-black) !important;
  color: var(--ledr-black) !important;
  padding: 8px 12px !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  border-radius: var(--radius-btn) !important;
  width: 200px;
  text-align: left !important;
}
.lp-sticky-form input::placeholder { color: rgba(0,0,0,0.4); }
.lp-sticky-form input:focus {
  border-color: var(--ledr-blue) !important;
  box-shadow: 0 0 0 2px rgba(52,56,187,0.2) !important;
}
.lp-sticky-form button[type="submit"] {
  background: var(--ledr-black) !important;
  color: var(--ledr-yellow) !important;
  border: 2px solid var(--ledr-black) !important;
  padding: 8px 16px !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: var(--radius-btn) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.lp-sticky-form button[type="submit"]:hover { transform: translateY(-1px); }
.lp-sticky-close {
  background: transparent !important;
  border: none !important;
  color: var(--ledr-black) !important;
  padding: 4px 8px !important;
  font-size: 14px !important;
  cursor: pointer;
  margin-left: 4px;
  letter-spacing: 0 !important;
}
@media (max-width: 700px) {
  .lp-sticky-cta {
    top: auto; bottom: 0; left: 0; right: 0;
    transform: none; max-width: 100%;
    border-radius: 0; border-left: none; border-right: none; border-bottom: none;
    /* R19 — safe-area-inset-bottom : compense le Home Indicator iPhone X+
       (sinon les boutons sont chevauchés par la barre du système). */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  }
  .lp-sticky-form { flex-wrap: wrap; }
  .lp-sticky-form input { width: 100%; }
  @keyframes stickyDrop { from { transform: translateY(120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
}

/* ── Mockup app dans le hero (preuve visuelle) ── */
.lp-hero-mockup {
  max-width: 1100px;
  margin: 60px auto 0;
  padding: 0 20px;
}
.lp-mockup {
  background: var(--ledr-white);
  border: 2px solid var(--ledr-black);
  border-radius: var(--radius-card);
  box-shadow: 12px 12px 0 var(--ledr-yellow), 12px 12px 0 2px var(--ledr-black);
  overflow: hidden;
  text-align: left;
}
/* Reco DA #8 : toolbar LEDR-themed (au lieu de dots macOS génériques) */
.lp-mockup-toolbar {
  background: var(--ledr-black);
  border-bottom: 2px solid var(--ledr-black);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lp-mockup-brand {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--ledr-white);
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.lp-mockup-brand-ledr {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ledr-yellow);
  font-size: 13px;
}
.lp-mockup-brand-sep { color: var(--ledr-red); margin: 0 2px; }
.lp-mockup-brand-app { color: rgba(255, 255, 255, 0.65); font-size: 10px; }
.lp-mockup-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.lp-mockup-action {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}
.lp-mockup-action-login {
  padding: 3px 8px;
  border: 1px solid var(--ledr-yellow);
  border-radius: 3px;
  color: var(--ledr-yellow);
}

/* Micro-interaction : au hover du mockup, le badge score grandit */
.lp-mockup { transition: transform 0.3s ease; }
.lp-mockup:hover { transform: translateY(-4px); }
.lp-mockup:hover .lp-mockup-badge {
  transform: scale(1.08);
  box-shadow: 5px 5px 0 var(--ledr-black);
}
.lp-mockup-badge { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.lp-mockup-body {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 0;
  min-height: 320px;
}
.lp-mockup-form,
.lp-mockup-result,
.lp-mockup-score {
  padding: 18px 16px;
  border-right: 1px solid var(--border);
  font-size: 12px;
}
.lp-mockup-score { border-right: none; background: var(--ledr-offwhite); }
.lp-mockup-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.lp-mockup-upload {
  background: rgba(248, 231, 28, 0.2);
  border: 1px dashed var(--ledr-yellow);
  border-radius: 4px;
  padding: 10px;
  font-size: 11px;
  margin-bottom: 14px;
  color: var(--ledr-black);
}
.lp-mockup-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}
.lp-mockup-field:last-of-type { border-bottom: none; }
.lp-mockup-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.lp-mockup-value { color: var(--ledr-black); font-weight: 600; font-size: 12px; }
.lp-mockup-cta {
  margin-top: 14px;
  background: var(--ledr-blue);
  color: var(--ledr-white);
  padding: 10px 14px;
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  border: 1.5px solid var(--ledr-black);
  box-shadow: 3px 3px 0 var(--ledr-black);
}
.lp-mockup-doc {
  background: var(--ledr-white);
  font-family: var(--font-sans);
  line-height: 1.6;
}
.lp-mockup-doc-cartouche {
  background: var(--ledr-black);
  color: var(--ledr-white);
  padding: 6px 10px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  margin-bottom: 10px;
  text-align: center;
}
.lp-mockup-doc-h {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--ledr-black);
  margin-top: 10px;
  margin-bottom: 4px;
}
.lp-mockup-doc-p {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.55;
}
.lp-mockup-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--grade-a), #06672c);
  color: var(--ledr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  margin: 0 auto 8px;
  box-shadow: 3px 3px 0 var(--ledr-black);
  border: 2px solid var(--ledr-black);
}
.lp-mockup-score-num {
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ledr-black);
}
.lp-mockup-score-verdict {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.lp-mockup-bars { display: flex; flex-direction: column; gap: 6px; }
.lp-mockup-bar {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lp-mockup-bar > span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ledr-black);
}
.lp-mockup-bar-track {
  height: 6px;
  background: var(--ledr-gray-light);
  border-radius: 3px;
  overflow: hidden;
}
.lp-mockup-bar-fill { height: 100%; border-radius: 3px; }
.lp-mockup-caption {
  text-align: center;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 900px) {
  .lp-mockup-body { grid-template-columns: 1fr; }
  .lp-mockup-form, .lp-mockup-result, .lp-mockup-score { border-right: none; border-bottom: 1px solid var(--border); }
  .lp-hero-mockup { margin-top: 40px; }
}

/* ── Témoignage : enrichissements (case study) ── */
.lp-testimonial-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ledr-yellow);
  margin: 0 0 12px;
}
.lp-testimonials-coming {
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

/* ── Mention sécurité sous le formulaire ── */
.access-trust {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

/* ── Footer : contraste amélioré (WCAG AA) ── */
.lp-footer-col a {
  color: rgba(255, 255, 255, 0.78) !important;  /* augmenté de 0.6 → 0.78 */
}
.lp-footer-col a:hover { color: var(--ledr-yellow) !important; }
.lp-footer-mention { color: rgba(255, 255, 255, 0.55) !important; }

/* ── Bouton "↑ Haut" flottant ── */
.lp-back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 90;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ledr-yellow) !important;
  color: var(--ledr-black) !important;
  border: none !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, opacity 0.3s ease;
  padding: 0 !important;
  letter-spacing: 0 !important;
}
.lp-back-to-top:hover {
  transform: translateY(-3px);
  background: var(--ledr-yellow-hover) !important;
}
.lp-back-to-top[hidden] { display: none; }
@media (max-width: 700px) {
  .lp-back-to-top { bottom: 20px; right: 20px; width: 44px; height: 44px; }
}

/* ── Reset des sections landing (legacy v2/lp-hero, classes obsolètes
      depuis la refonte v3 — `.login-screen section` et `.lp-hero` ne sont
      plus utilisés dans le HTML, mais on garde la déclaration vide en
      historique pour éviter une régression silencieuse). Le reset des
      sections v3 est fait via :where(.v3-landing) section plus bas. ── */

/* ── Sections : padding rééquilibré (Reco DA #4 : 180/140 au lieu de 240/80) ── */
.lp-section {
  padding: 180px 40px 140px;
}
.lp-section-inner {
  max-width: 880px;       /* zones de texte aérées */
  margin: 0 auto;
}
/* Conteneurs "wide" sur landing → max LEDR officiel */
.lp-hero-inner,
.lp-nav-inner,
.lp-footer-content {
  max-width: var(--container-narrow);  /* 1200px */
}
/* Header de section : label resserré avec son titre (forme une unité) */
.lp-section-label {
  display: block;
  width: fit-content;
  margin: 0 auto 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ledr-yellow);
  padding: 6px 16px;
  background: rgba(248, 231, 28, 0.08);
  border: 1px solid rgba(248, 231, 28, 0.18);
  border-radius: 999px;
  text-align: center;
}
.lp-section-title {
  font-family: var(--font-display);   /* Archia */
  font-size: 40px;                    /* plus proche LEDR */
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;                  /* serré signature Archia */
  color: var(--ledr-white);
  margin: 0 auto 40px;
  text-align: center;
  max-width: 760px;
}

/* ── Hero ── */
.lp-hero {
  padding: 140px 40px 120px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(52, 56, 187, 0.15) 0%, transparent 60%);
}
.lp-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  animation: landingFadeIn 0.7s ease;
}
@keyframes landingFadeIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lp-hero-badge {
  /* Reco DA #1 : neutre sur fond blanc-transparent pour réserver le jaune au CTA */
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 8px 22px;
  margin-bottom: 40px;
}

.lp-hero-title {
  /* Reco DA #2 : H1 64px / line-height 1.05 → ratio H1/H2 = 64/40 = 1.6 (proche nombre d'or) */
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ledr-white);
  margin: 0 0 32px;
}
.lp-strikethrough {
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.3);
}
.lp-highlight {
  color: var(--ledr-yellow);
}

.lp-hero-sub {
  font-family: var(--font-sans);     /* Montserrat */
  font-size: 18px;
  line-height: 1.85;                  /* signature LEDR très aéré */
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 48px;
}

.lp-hero-cta {
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lp-cta-microcopy {
  /* Reco DA #1 : passé du jaune au gris neutre pour réserver le jaune au bouton CTA */
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}
.lp-btn-primary {
  display: inline-block;
  padding: 18px 36px;
  font-family: var(--font-sans);     /* Montserrat */
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  border: 2px solid var(--ledr-black);  /* bordure noire LEDR */
  border-radius: var(--radius-btn);   /* 2px */
  cursor: pointer;
  font-weight: 700;
  box-shadow: 6px 6px 0px var(--ledr-black);  /* signature crisp LEDR */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lp-btn-primary:hover {
  background: var(--ledr-yellow-bright);
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0px var(--ledr-black);
}
.lp-btn-primary:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 var(--ledr-black);
}

.lp-hero-bar {
  width: 200px;
  height: 5px;
  margin: 0 auto;
  border-radius: 0;            /* signature LEDR : carré */
  background: linear-gradient(to right,
    var(--ledr-blue) 0% 45%,
    var(--ledr-red) 45% 70%,
    var(--ledr-yellow) 70% 90%,
    var(--ledr-cyan) 90%       /* touche cyan signature LEDR */
  );
}

/* ── CTA secondaire dans le hero ── */
.lp-btn-secondary {
  display: inline-block;
  padding: 16px 28px;
  font-family: var(--font-sans);     /* Montserrat */
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-btn);  /* 2px */
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lp-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--ledr-white);
}

/* ── Témoignages ── */
.lp-testimonials {
  margin-bottom: 64px;
}
.lp-testimonial {
  background: rgba(255, 255, 255, 0.04);
  border-left: 4px solid var(--ledr-yellow);
  border-radius: 0 14px 14px 0;
  padding: 28px 32px;
  max-width: 720px;
  margin: 0 auto;
}
.lp-testimonial-text {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 20px;
  font-style: italic;
}
.lp-testimonial-text strong {
  color: var(--ledr-yellow);
  font-weight: 600;
  font-style: normal;
}
.lp-testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lp-testimonial-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}
.lp-testimonial-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ledr-white);
}
.lp-testimonial-role {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}

/* ── Modale "Voir une annonce d'exemple" ── */
.lp-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lp-modal[hidden] { display: none; }
.lp-modal-backdrop {
  position: absolute;
  inset: 0;
  /* R06 — fallback opaque pour Firefox <103 / WebView in-app */
  background: rgba(0, 0, 0, 0.92);
  animation: fadeIn 0.2s ease;
}
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
  .lp-modal-backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}
.lp-modal-content {
  position: relative;
  background: var(--ledr-white);
  border-radius: 16px;
  width: min(820px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: scaleIn 0.25s ease;
}
@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.lp-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--ledr-offwhite);
}
.lp-modal-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ledr-blue);
  margin-bottom: 6px;
}
.lp-modal-header h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--ledr-black);
  letter-spacing: -0.01em;
}
.lp-modal-close {
  background: transparent !important;
  border: none !important;
  font-size: 22px !important;
  color: var(--muted) !important;
  cursor: pointer;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  letter-spacing: 0 !important;
}
.lp-modal-close:hover {
  background: var(--border) !important;
  color: var(--ledr-black) !important;
}
.lp-modal-body {
  overflow-y: auto;
  padding: 28px 32px;
}

/* Score badge en haut de la modale */
.lp-example-score {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--grade-a), #06672c);
  border-radius: 12px;
  color: var(--ledr-white);
  margin-bottom: 16px;
}
.lp-example-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ledr-white);
  color: var(--success-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: 800;
  flex-shrink: 0;
}
.lp-example-score-num {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
}
.lp-example-score-verdict {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 2px;
}
.lp-example-score-diag {
  font-size: 12px;
  margin-top: 8px;
  opacity: 0.85;
  line-height: 1.5;
}

.lp-example-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 24px;
  text-align: center;
}
.lp-example-meta strong {
  color: var(--ledr-blue);
  font-weight: 600;
}

/* L'annonce d'exemple (rendered as if it was the real output) */
.lp-example-ad {
  background: var(--ledr-offwhite);
  border-radius: 12px;
  padding: 32px 36px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-soft);
}
.lp-example-cartouche {
  background: var(--ledr-black);
  color: var(--ledr-white);
  padding: 14px 18px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  margin-bottom: 24px;
  text-align: center;
  line-height: 1.6;
}
.lp-example-ad h3 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--ledr-black);
  margin: 22px 0 10px;
  letter-spacing: -0.01em;
}
.lp-example-ad h3:first-of-type { margin-top: 0; }
.lp-example-ad p { margin: 8px 0; }
.lp-example-ad p strong { color: var(--ledr-black); font-weight: 600; }
.lp-example-ad em { color: var(--ledr-blue); font-style: italic; }
.lp-example-ad ul, .lp-example-ad ol {
  margin: 8px 0;
  padding-left: 24px;
}
.lp-example-ad li { margin: 4px 0; }

/* CTA dans la modale */
.lp-example-cta {
  margin-top: 28px;
  padding: 24px;
  background: var(--ledr-black);
  border-radius: 12px;
  text-align: center;
}
.lp-example-cta-text {
  color: var(--ledr-white);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px;
}
.lp-example-cta .lp-btn-primary {
  margin: 0 auto;
}

@media (max-width: 700px) {
  /* R09 — 100dvh = viewport dynamique (compense la barre URL Safari mobile) */
  .lp-modal-content { width: 100%; max-height: 100vh; max-height: 100dvh; border-radius: 0; }
  .lp-modal-header { padding: 18px 22px; }
  .lp-modal-body { padding: 20px 22px; }
  .lp-example-ad { padding: 22px 24px; }
  .lp-example-score { flex-direction: column; align-items: flex-start; gap: 14px; }
  .lp-example-badge { width: 52px; height: 52px; font-size: 28px; }
  .lp-example-cartouche { font-size: 11px; }
}

/* ── Problème ── */
.lp-problem { background: rgba(255, 255, 255, 0.02); }
.lp-problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
/* Reco DA #5 : layout asymétrique — 1 carte wide, 2 cartes au milieu, 1 carte wide en bas */
.lp-problem-asymmetric {
  grid-template-columns: 1fr 1fr;
}
.lp-problem-wide { grid-column: 1 / -1; }
.lp-problem-anchor {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.lp-problem-cost {
  background: rgba(255, 54, 78, 0.06);
  border: 1px solid rgba(255, 54, 78, 0.2);
  border-left: 4px solid var(--ledr-red);
}
.lp-problem-cost h3 { color: var(--ledr-red); }
@media (max-width: 700px) {
  .lp-problem-asymmetric { grid-template-columns: 1fr; }
}
.lp-problem-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 32px 28px;
}
/* Reco DA #7 : Lucide icons (vectorielles, cohérentes cross-platform) */
.lp-problem-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-btn);
  background: rgba(248, 231, 28, 0.12);
  margin-bottom: 18px;
  color: var(--ledr-yellow);
}
.lp-problem-icon i,
.lp-problem-icon svg {
  width: 26px;
  height: 26px;
  stroke-width: 2;
}
.lp-problem-cost .lp-problem-icon {
  background: rgba(255, 54, 78, 0.12);
  color: var(--ledr-red);
}
.lp-problem-card h3 {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--ledr-white);
  margin: 0 0 12px;
  line-height: 1.4;
}
.lp-problem-card p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* ── Solution / Principes ── */
.lp-solution-text {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 auto 48px;
  max-width: 640px;
  text-align: center;
}
.lp-solution-text strong { color: var(--ledr-white); }

.lp-principles { display: flex; flex-direction: column; gap: 28px; }
.lp-principle {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 28px 32px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--ledr-blue);
  border-radius: 0 12px 12px 0;
}
/* Reco DA #6 : numéro outline (au lieu de jaune plein), titre 22px (vs 17), texte 13px */
.lp-principle-num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: transparent;                              /* outline trick */
  -webkit-text-stroke: 2px var(--ledr-yellow);
  flex-shrink: 0;
  min-width: 52px;
  line-height: 1;
}
.lp-principle h3 {
  font-family: var(--font-display);                /* Archia bold pour cohérence */
  font-size: 22px;
  font-weight: 700;
  color: var(--ledr-white);
  margin: 0 0 10px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.lp-principle p {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* ── Features ── */
.lp-features { background: rgba(255, 255, 255, 0.02); }
.lp-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.lp-feature-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 32px 28px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lp-feature-card:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-3px);
}
.lp-feature-main { grid-column: 1 / -1; }
.lp-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-btn);
  background: rgba(248, 231, 28, 0.12);
  margin-bottom: 18px;
  color: var(--ledr-yellow);
}
.lp-feature-icon i,
.lp-feature-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}
.lp-feature-card h3 {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--ledr-white);
  margin: 0 0 12px;
  line-height: 1.4;
}
.lp-feature-card p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}
.lp-feature-card p em {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.35);
}

/* ── Comment ça marche ── */
.lp-steps {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.lp-step {
  flex: 1;
  text-align: center;
  padding: 0 12px;
}
.lp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ledr-blue);
  color: var(--ledr-white);
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 22px;
}
.lp-step h3 {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--ledr-white);
  margin: 0 0 12px;
  line-height: 1.4;
}
.lp-step p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}
.lp-step-arrow {
  color: var(--ledr-yellow);
  font-size: 28px;
  font-weight: 700;
  padding-top: 16px;
  flex-shrink: 0;
}

/* ── Social proof / Stats ── */
.lp-proof { text-align: center; background: rgba(255, 255, 255, 0.02); }
.lp-quote {
  margin-bottom: 64px;
}
.lp-quote blockquote {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 600;
  font-style: italic;
  color: var(--ledr-white);
  line-height: 1.5;
  margin: 0 0 18px;
  border: none;
  padding: 0;
}
.lp-quote cite {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  font-style: normal;
}

/* Reco DA #3 : grille hiérarchisée — stats 2 et 4 (~3h, 0 info inventée) plus dominantes */
.lp-stats {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.4fr 1fr;
  gap: 48px;
  align-items: end;
  max-width: 900px;
  margin: 0 auto;
}
.lp-stat { text-align: center; }
.lp-stat-num {
  display: block;
  font-family: var(--font-display);   /* Archia pour cohérence */
  font-weight: 700;
  line-height: 1;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.65);   /* défaut : blanc atténué */
  font-size: 40px;
}
/* Stats 2 et 3 (positions 2 et 3 dans le grid) : dominantes en jaune et plus grandes */
.lp-stats > .lp-stat:nth-child(2) .lp-stat-num,
.lp-stats > .lp-stat:nth-child(3) .lp-stat-num {
  font-size: 60px;
  color: var(--ledr-yellow);
}
.lp-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
@media (max-width: 700px) {
  .lp-stats { grid-template-columns: 1fr 1fr; gap: 32px; }
  .lp-stats > .lp-stat:nth-child(2) .lp-stat-num,
  .lp-stats > .lp-stat:nth-child(3) .lp-stat-num { font-size: 48px; }
}

/* ── CTA + Login ── */
.lp-cta {
  text-align: center;
  padding: 140px 40px 120px;
}
.lp-cta-title {
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--ledr-white);
  margin: 0 0 24px;
}
.lp-cta-sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 40px;
}

/* ── Formulaire "Demander un accès" ── */
.access-form {
  max-width: 460px;
  margin: 0 auto 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.access-form-row { width: 100%; }
.access-form input[type="email"],
.access-form textarea {
  width: 100%;
  padding: 14px 18px !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  color: var(--ledr-white) !important;
  border-radius: 8px !important;
  text-align: left !important;
  resize: none;
}
.access-form input::placeholder,
.access-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.access-form input:focus,
.access-form textarea:focus {
  border-color: var(--ledr-yellow) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(248, 231, 28, 0.12) !important;
}
.access-submit-btn {
  padding: 16px 24px !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: var(--ledr-yellow) !important;
  color: var(--ledr-black) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.access-submit-btn:hover:not(:disabled) {
  background: var(--ledr-yellow-hover) !important;
  transform: translateY(-2px);
}
.access-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.access-status {
  margin: 0;
  min-height: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
}
.access-status.success { color: var(--ledr-yellow); }
.access-status.error { color: var(--ledr-red); }

/* ── Chemin secondaire (login pour récurrents) ── */
.lp-cta-secondary {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
.lp-cta-secondary p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 16px;
}
.lp-cta-toggle-login {
  background: transparent !important;
  border: none !important;
  color: var(--ledr-yellow) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 0 4px !important;
}
.lp-cta-toggle-login:hover { color: var(--ledr-yellow-hover) !important; }

#login-form[hidden] { display: none; }
.lp-cta-secondary .login-form {
  max-width: 380px;
  margin: 16px auto 0;
}

/* Login form en vertical (avec email + password) */
.login-form-stacked {
  flex-direction: column !important;
  gap: 8px !important;
}
.login-form-stacked input {
  text-align: left !important;
}

/* Mini login : ajout du champ email */
.lp-nav-mini-login input[type="email"] {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: var(--ledr-white) !important;
  padding: 7px 12px !important;
  border-radius: 6px !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  width: 130px;
  margin-right: 4px;
  text-align: left !important;
}
.lp-nav-mini-login input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
}
.lp-nav-mini-login input[type="email"]:focus {
  border-color: var(--ledr-yellow) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}
.lp-nav-mini-login.is-collapsed input[type="email"] {
  display: none;
}

/* ── Onglets dans la modale exemple (Sprint C) ── */
.lp-example-tabs {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.lp-example-tab {
  padding: 6px 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  background: var(--ledr-white) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  border-radius: 6px !important;
  cursor: pointer;
  text-transform: none !important;
  font-weight: 500 !important;
}
.lp-example-tab:hover {
  background: var(--ledr-offwhite) !important;
  color: var(--ledr-black) !important;
}
.lp-example-tab.active {
  background: var(--ledr-black) !important;
  color: var(--ledr-yellow) !important;
  border-color: var(--ledr-black) !important;
}

/* ── Mini-login compact dans navbar (déclenché au clic) ── */
.lp-nav-mini-login.is-collapsed input,
.lp-nav-mini-login.is-collapsed button[type="submit"] {
  display: none;
}
.lp-nav-mini-login-trigger {
  display: none;
}
.lp-nav-mini-login.is-collapsed .lp-nav-mini-login-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 7px 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 6px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  font-weight: 500 !important;
  transition: background 0.15s ease;
}
.lp-nav-mini-login.is-collapsed .lp-nav-mini-login-trigger:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--ledr-white) !important;
}

.login-form {
  display: flex;
  gap: 10px;
}
.login-form input {
  flex: 1;
  padding: 14px 18px;
  font-size: 14px;
  font-family: var(--font-sans);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ledr-white);
  text-align: center;
}
.login-form input::placeholder { color: rgba(255, 255, 255, 0.3); }
.login-form input:focus {
  border-color: var(--ledr-yellow);
  box-shadow: 0 0 0 3px rgba(248, 231, 28, 0.15);
  background: rgba(255, 255, 255, 0.08);
}
/* R01 — focus-visible (clavier) garde l'outline jaune en plus du box-shadow */
.login-form input:focus-visible {
  outline: 2px solid var(--ledr-yellow);
  outline-offset: 2px;
}
.login-form button {
  padding: 14px 24px !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: var(--ledr-yellow) !important;
  color: var(--ledr-black) !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
  transition: background 0.15s ease, transform 0.15s ease;
}
.login-form button:hover {
  background: var(--ledr-yellow-hover) !important;
  transform: translateY(-1px);
}

.login-error {
  color: var(--ledr-red);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
  margin: 10px 0 0;
  min-height: 16px;
}
.lp-cta-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
  margin: 0;
}

/* ── Animations au scroll (reveal) — snappy ── */
/* R12 — progressive enhancement : visible par défaut ; on cache + anime
   uniquement si JS a positionné .js-ready sur <html>.
   Sans ça, JS qui plante = .reveal reste à opacity:0 → contenu invisible
   pour l'utilisateur ET les robots SEO. */
html.js-ready .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(20px);
}
.reveal {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  html.js-ready .reveal:not(.is-visible) { opacity: 1; transform: none; }
  .reveal { transition: none; }
}

/* ── Offset pour les ancres (compense la sticky nav) ── */
section[id] { scroll-margin-top: 80px; }

/* ── vs ChatGPT : icônes + highlight ── */
.lp-vs-icon {
  display: inline-block;
  margin-right: 6px;
  font-size: 14px;
}
.lp-vs-row.lp-vs-highlight {
  background: rgba(248, 231, 28, 0.05);
  border-left: 3px solid var(--ledr-yellow);
}
.lp-vs-row.lp-vs-highlight .lp-vs-criterion {
  color: var(--ledr-yellow);
}

/* ── Section intro (sous le titre) ── */
.lp-section-intro {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.65);
  margin: -16px auto 56px;
  max-width: 640px;
  text-align: center;
}

/* ── vs ChatGPT (table) ── */
.lp-vs { background: rgba(255, 255, 255, 0.02); }
.lp-vs-table {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 40px;
}
.lp-vs-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr;
  align-items: center;
  padding: 20px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}
.lp-vs-row:last-child { border-bottom: none; }
.lp-vs-header {
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lp-vs-criterion { font-weight: 500; color: var(--ledr-white); }
.lp-vs-them {
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}
.lp-vs-us {
  color: var(--ledr-yellow);
  font-weight: 500;
  text-align: center;
}
.lp-vs-conclusion {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 18px;
  font-style: italic;
  color: var(--ledr-white);
  margin: 0;
  line-height: 1.6;
}
.lp-vs-conclusion strong { color: var(--ledr-yellow); font-weight: 700; font-style: normal; }

/* ── Method label dans les principes ── */
.lp-principle-method {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ledr-yellow);
  opacity: 0.75;
  font-style: italic;
}

/* ── FAQ ── */
.lp-faq { background: rgba(255, 255, 255, 0.02); }
.lp-faq-list { display: flex; flex-direction: column; gap: 14px; }
.lp-faq-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 24px 28px;
  transition: background 0.15s ease;
}
.lp-faq-item[open] { background: rgba(255, 255, 255, 0.06); }
.lp-faq-item summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ledr-white);
  position: relative;
  padding-right: 32px;
  user-select: none;
  line-height: 1.5;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--ledr-yellow);
  transition: transform 0.2s ease;
}
.lp-faq-item[open] summary::after { content: "−"; transform: translateY(-50%) rotate(180deg); }
.lp-faq-item p {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.65);
}
.lp-faq-item p strong { color: var(--ledr-white); }
.lp-faq-item p code {
  background: rgba(248, 231, 28, 0.15);
  color: var(--ledr-yellow);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ── Stats : unité (s, %) ── */
.lp-stat-unit {
  font-size: 18px;
  font-weight: 500;
  margin-left: 2px;
  opacity: 0.8;
}

/* ── CTA microcopy/contact ── */
.lp-cta-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 24px;
  text-align: center;
}
.lp-cta-contact {
  color: var(--ledr-yellow);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.lp-cta-contact:hover { color: var(--ledr-yellow-hover); }

/* ── Footer enrichi ── */
.lp-footer {
  padding: 64px 40px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.lp-footer-bar {
  width: 100px;
  height: 3px;
  margin: 0 auto 48px;
  border-radius: 2px;
  background: linear-gradient(to right,
    var(--ledr-blue) 0% 60%,
    var(--ledr-red) 60% 80%,
    var(--ledr-yellow) 80%
  );
}
.lp-footer-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  max-width: 880px;
  margin: 0 auto 48px;
}
.lp-footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ledr-yellow);
  margin: 0 0 18px;
}
.lp-footer-col a {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 10px;
  transition: color 0.15s ease;
}
.lp-footer-col a:hover { color: var(--ledr-white); }
.lp-footer-mention {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.5;
  margin: 0;
}
.lp-footer-bottom {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.25);
  margin: 0;
}
.lp-footer-monkey { letter-spacing: 0; }

/* Responsive footer + vs */
@media (max-width: 700px) {
  .lp-footer-content { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .lp-vs-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; text-align: left; }
  .lp-vs-header { display: none; }
  .lp-vs-them::before { content: "ChatGPT : "; opacity: 0.5; font-size: 10px; }
  .lp-vs-us::before { content: "Outil : "; opacity: 0.7; font-size: 10px; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .lp-section { padding: 160px 28px 60px; }
  .lp-hero { padding: 100px 28px 80px; }
  .lp-cta { padding: 160px 28px 80px; }
  .lp-section-title { font-size: 26px; margin-bottom: 32px; }
  .lp-hero-title { font-size: 36px; }
  .lp-cta-title { font-size: 30px; }
  .lp-problem-grid,
  .lp-features-grid { grid-template-columns: 1fr; }
  .lp-feature-main { grid-column: auto; }
  .lp-steps { flex-direction: column; gap: 32px; align-items: center; }
  .lp-step-arrow { transform: rotate(90deg); padding-top: 0; }
  .lp-stats { gap: 40px; }
  .lp-stat-num { font-size: 40px; }
}
@media (max-width: 600px) {
  .lp-section { padding: 120px 20px 50px; }
  .lp-hero { padding: 80px 20px 64px; }
  .lp-cta { padding: 120px 20px 64px; }
  .lp-hero-title { font-size: 28px; }
  .lp-cta-title { font-size: 24px; }
  .lp-section-title { font-size: 22px; }
  .lp-hero-sub { font-size: 16px; }
  .lp-quote blockquote { font-size: 20px; }
  .lp-principle { padding: 24px; gap: 20px; }
  .lp-principle-num { font-size: 22px; min-width: 32px; }
  .login-form { flex-direction: column; }
}

/* --- Utilitaire visually-hidden (a11y) — F4 ------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --- Skip link (a11y) ----------------------------------------------- */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  padding: 8px 16px;
  z-index: 9999;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  top: 0;
}

/* --- Focus visible (a11y) ------------------------------------------- */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ledr-yellow);
  outline-offset: 2px;
}

/* --- Bannière "Reprendre brouillon" --------------------------------- */
.draft-banner {
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  padding: 12px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  animation: slideDown 0.3s ease;
}
@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.draft-banner[hidden] { display: none; }
.draft-banner-text { flex: 1; }
.draft-banner-text strong { font-weight: 600; }
#draft-banner-time { opacity: 0.6; font-size: 12px; }
.draft-banner-actions { display: flex; gap: 8px; }
.draft-btn-primary,
.draft-btn-secondary {
  padding: 6px 14px !important;
  font-size: 11px !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  cursor: pointer;
}
.draft-btn-primary {
  background: var(--ledr-black) !important;
  color: var(--ledr-yellow) !important;
  border: none !important;
}
.draft-btn-secondary {
  background: transparent !important;
  color: var(--ledr-black) !important;
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

/* --- TOPNAV (sticky) — R03 PoC : migration vers @layer components ----
   Démonstration : tous les !important de cette section ont été retirés
   et la priorité est maintenant garantie par la layer 'components'
   (qui bat 'base' selon l'ordre déclaré ligne ~3 du fichier).
   Modèle à reproduire sur les autres modules pour éliminer les ~330
   !important restants sans régression visuelle.
   ─────────────────────────────────────────────────────────────────── */
@layer components {
/* Topnav de l'app authentifiée — harmonisée avec les pages publiques v3.
   Fond blanc, border-bottom gris clair, barre tricolore signature en haut
   (via ::before), brand façon `.v3-brand`, liens mono noirs avec hover
   jaune, CTA primaire jaune inchangé, logout en ghost noir sur blanc. */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ledr-white);
  border-bottom: 1px solid var(--v3-line);
}
/* Signature tricolore (6px) en tout haut — reproduit .tricolor des pages publiques */
.topnav::before {
  content: "";
  display: block;
  height: 6px;
  width: 100%;
  background: linear-gradient(
    to right,
    var(--ledr-black) 0%, var(--ledr-black) 33.3333%,
    var(--ledr-yellow) 33.3333%, var(--ledr-yellow) 66.6666%,
    var(--ledr-red) 66.6666%, var(--ledr-red) 100%
  );
}
.topnav-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.topnav-brand {
  /* Cohérent avec .v3-brand : LEDR gros bold + séparateur gris + app name mono */
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ledr-black);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
/* Override du .brand-ledr et .brand-sep pour le contexte topnav (fond blanc).
   Le global `.brand-ledr` garde son jaune pour admin.html (fond noir). */
.topnav .brand-ledr { color: var(--ledr-black); }
.topnav .brand-sep { color: var(--v3-muted); }

/* Logo LEDR placeholder — la vraie règle dimensionnante est HORS @layer
   pour battre .v3-landing img (unlayered, spécificité 0,1,1). */
.brand-logo {
  display: block;
  flex-shrink: 0;
}

/* L'attribut HTML `hidden` est censé poser display:none avec spécificité
   nulle. Il est trivialement battu par n'importe quelle règle qui définit
   `display:` (ex. `.btn { display: inline-flex }`).
   Cette règle force le respect du contrat HTML5 partout dans l'app. */
[hidden] { display: none !important; }
.topnav-brand-btn {
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  padding: 4px 10px !important;
  border-radius: 0 !important;         /* radius 0 Phase 4 */
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  transition: background 0.15s ease;
}
.topnav-brand-btn:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* Bouton "Nouvelle annonce" — accent jaune : inchangé, cohérent .v3-nav__cta */
.topnav-link-primary {
  background: var(--ledr-yellow) !important;
  color: var(--ledr-black) !important;
  border: 2px solid var(--ledr-black) !important;
  font-weight: 600 !important;
}
.topnav-link-primary:hover:not(:disabled) {
  background: var(--ledr-black) !important;
  color: var(--ledr-yellow) !important;
  border-color: var(--ledr-black) !important;
}
.topnav-app-name {
  /* Cohérent .v3-brand__app : DM Mono 12px uppercase letter-spacing gris muted */
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--v3-muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.topnav-sep {
  /* Si un séparateur `·` existe entre brand mark et app name, on le grise */
  color: var(--v3-muted);
}
.topnav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.topnav-link {
  /* Cohérent .v3-nav__link : DM Mono 13px noir sur blanc, hover jaune */
  background: transparent !important;
  border: none !important;
  color: var(--v3-ink) !important;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  border-radius: var(--radius-btn);    /* 0px (Phase 4) */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.topnav-link:hover:not(:disabled) {
  background: var(--ledr-yellow) !important;
  color: var(--ledr-black) !important;
  border-color: transparent !important;
}
.topnav-icon { font-size: 13px; }
.topnav-count {
  background: var(--ledr-black);
  color: var(--ledr-yellow);
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 700;
}
.topnav-logout {
  /* Ghost : bordure noire + fond blanc + hover rouge plein.
     Cohérent avec les CTAs secondaires des pages publiques.
     (Conservé pour rétro-compat — utilisé maintenant dans le dropdown
     account, mais le CSS reste applicable en cas de besoin direct.) */
  background: var(--ledr-white) !important;
  border: 2px solid var(--ledr-black) !important;
  color: var(--ledr-black) !important;
  padding: 6px 10px;
  border-radius: var(--radius-btn);
  font-size: 14px;
  margin-left: 8px;
  cursor: pointer;
}
.topnav-logout:hover:not(:disabled) {
  background: var(--ledr-red) !important;
  border-color: var(--ledr-black) !important;
  color: var(--ledr-white) !important;
}

/* Séparateur vertical entre clusters de la topnav (création | analyse). */
.topnav-separator {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--v3-line);
  margin: 0 6px;
  vertical-align: middle;
}

/* --- Topnav account dropdown (avatar + menu utilities) ----------------- */
.topnav-account {
  position: relative;
  margin-left: 8px;
}
.topnav-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--ledr-black);
  color: var(--ledr-yellow);
  border: 2px solid var(--ledr-black);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.topnav-avatar:hover {
  background: var(--ledr-yellow);
  color: var(--ledr-black);
}
.topnav-avatar:active {
  transform: scale(0.96);
}
.topnav-avatar[aria-expanded="true"] {
  background: var(--ledr-yellow);
  color: var(--ledr-black);
}

.topnav-account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--ledr-white);
  border: 2px solid var(--ledr-black);
  box-shadow: var(--shadow-crisp);
  z-index: 100;
  padding: 8px 0;
}
.topnav-account-menu[hidden] { display: none !important; }

.topnav-account-email {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--v3-muted);
  padding: 8px 16px 12px;
  border-bottom: 1px solid var(--v3-line);
  word-break: break-all;
}

.topnav-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--v3-ink);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.topnav-menu-item:hover:not(:disabled) {
  background: var(--ledr-yellow);
}
.topnav-menu-item i,
.topnav-menu-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.topnav-menu-logout {
  border-top: 1px solid var(--v3-line);
  margin-top: 4px;
  color: var(--ledr-red);
}
.topnav-menu-logout:hover:not(:disabled) {
  background: var(--ledr-red);
  color: var(--ledr-white);
}

/* --- Hamburger mobile (< 900px) ---------------------------------------- */
.topnav-hamburger {
  display: none;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 2px solid var(--ledr-black);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.topnav-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ledr-black);
  transition: transform 0.2s, opacity 0.2s;
}
.topnav-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.topnav-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.topnav-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 900px) {
  .topnav-hamburger { display: flex; margin-left: auto; }
  .topnav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--ledr-white);
    border-top: 1px solid var(--v3-line);
    border-bottom: 2px solid var(--ledr-black);
    padding: 12px 18px;
    gap: 4px;
    z-index: 50;
    margin-left: 0;
  }
  .topnav-links.is-open { display: flex; }
  .topnav-link {
    width: 100%;
    justify-content: flex-start !important;
    padding: 12px 14px !important;
  }
  .topnav-separator {
    width: 100%;
    height: 1px;
    margin: 6px 0;
  }
  .topnav-account {
    margin-left: 0;
    margin-top: 8px;
  }
  .topnav-account-menu {
    position: static;
    box-shadow: none;
    border: 1px solid var(--v3-line);
    margin-top: 4px;
  }
  .topnav-inner { position: relative; }
}
}  /* fin @layer components — section TOPNAV */
/* On garde l'ancien header CSS pour rétrocompat — inutilisé maintenant */

/* --- Header (legacy — non utilisé désormais) ----------------------- */
header {
  background: var(--ledr-black);
  padding: 0;
}
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px 16px;
}
.header-brand { flex: 1; }

header h1 {
  margin: 0 0 4px;
  font-family: var(--font-display);   /* Archia */
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ledr-white);
}
.brand-ledr {
  font-family: var(--font-display);   /* Archia */
  font-weight: 700;
  color: var(--ledr-yellow);
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand-sep {
  color: var(--ledr-red);
  margin: 0 4px;
}
.subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.header-bar {
  /* Phase 1 v3 — harmonisé avec la barre tricolore .v3-tricolor de la landing :
     jaune dominant (50%) puis rouge (25%) puis bleu (25%). Avant : bleu 60%
     dominant, qui jurait avec la signature LEDR (jaune = couleur principale). */
  height: 6px;
  background: linear-gradient(to right,
    var(--ledr-yellow) 0%, var(--ledr-yellow) 50%,
    var(--ledr-red) 50%, var(--ledr-red) 75%,
    var(--ledr-blue) 75%);
}

.badge {
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ledr-white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}
.badge.ok {
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  border-color: transparent;
}
.badge.ko {
  background: var(--ledr-red);
  color: var(--ledr-white);
  border-color: transparent;
}

/* --- Layout (3 colonnes : form / annonce / score+refine) ------------- */
main {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr minmax(280px, 360px);
  gap: 20px;
  padding: 20px 28px 48px;
  max-width: 1600px;
  margin: 0 auto;
  align-items: start;
}

/* Aside (colonne droite : score + refine) — sticky */
.aside-panel {
  position: sticky;
  top: 70px; /* sous la topnav */
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  border-top: 4px solid var(--ledr-yellow);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  /* R09 — 100dvh fallback à 100vh */
  max-height: calc(100vh - 90px);
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
}
.aside-title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ledr-black);
  opacity: 0.7;
}

/* Tablette : 2 colonnes (form + annonce), aside passe sous l'annonce */
@media (max-width: 1200px) {
  main { grid-template-columns: minmax(300px, 380px) 1fr; }
  .aside-panel {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
    border-top-color: var(--ledr-yellow);
  }
}
/* Mobile : 1 colonne */
@media (max-width: 768px) {
  main { grid-template-columns: 1fr; padding: 16px; }
  .topnav-inner { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
  .topnav-app-name { display: none; }
  .topnav-brand { font-size: 13px; padding: 4px 6px !important; }
  .topnav-link { padding: 6px 8px !important; font-size: 10px !important; }
  .topnav-link span:not(.topnav-icon):not(.topnav-count) { display: none; }
  .topnav-link .topnav-icon { font-size: 16px; margin: 0; }
  .topnav-logout { padding: 4px 8px !important; font-size: 12px !important; }
  /* Skip link plus visible sur mobile */
  .skip-link { font-size: 11px; padding: 6px 12px; }
  /* Bannière draft : empile vertical sur mobile */
  .draft-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 16px;
    font-size: 12px;
  }
  /* Slide panel : prend plus d'espace sur mobile */
  .slide-content { width: 100%; }
  /* Modale : marges plus serrées */
  .modal-content { width: 96vw; max-height: 92vh; }
  /* Library filtres : wrap */
  .library-grade-filters { gap: 4px; }
  .grade-filter-btn { padding: 5px 8px !important; min-width: 28px; }
  /* Tone toggle : plus large */
  .tone-toggle { grid-template-columns: 1fr 1fr; }
}

section {
  background: var(--panel);
  border: 2px solid var(--ledr-black);   /* Phase 1 v3 — 2px noir */
  border-radius: var(--radius-card);     /* 0px maintenant (Phase 4 v3 hard light) */
  padding: 32px 34px;                    /* Phase 4 v3 — passé de 24x26 à 32x34 (+30%) */
  box-shadow: var(--shadow-soft);        /* 4px crisp noir signature LEDR */
}
/* Colonne gauche : accent rouge en haut + padding-bottom pour le sticky */
.form-panel {
  padding-bottom: 80px;
  position: relative;
  border-top: 4px solid var(--ledr-red);
}
/* Colonne droite : accent bleu en haut */
.result-panel {
  border-top: 4px solid var(--ledr-blue);
}

section h2 {
  /* Phase 2 v3 — eyebrows tonifiés : passe de mono 11px gris pâle (opacity 0.55)
     à mono 12px bleu LEDR opacity 1, cohérent avec .v3-eyebrow de la landing. */
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ledr-blue);
  opacity: 1;
}

/* --- Tone toggle (Tutoiement / Vouvoiement) ------------------------- */
.tone-label { display: block; }
.tone-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 6px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  background: var(--ledr-offwhite);
}
.tone-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}
.tone-toggle .tone-btn {
  text-align: center;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
  margin: 0 !important;
}
.tone-toggle .tone-btn:hover { color: var(--ledr-black); }
.tone-toggle input:checked + .tone-btn {
  background: var(--ledr-black);
  color: var(--ledr-yellow);
  font-weight: 500;
}

/* --- Jauge qualité estimée ------------------------------------------ */
.quality-gauge {
  background: var(--ledr-offwhite);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.quality-gauge-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.quality-gauge-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.quality-gauge-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ledr-black);
}
.quality-gauge-track {
  height: 6px;
  background: var(--ledr-white);
  border-radius: 3px;
  overflow: hidden;
}
.quality-gauge-fill {
  height: 100%;
  background: var(--ledr-red);
  transition: width 0.3s ease, background 0.3s ease;
  border-radius: 3px;
}
.quality-gauge-fill.medium { background: var(--quality-medium); }
.quality-gauge-fill.good { background: var(--quality-good); }
.quality-gauge-fill.excellent { background: var(--ledr-yellow); }
.quality-gauge-hint {
  font-size: 11px;
  color: var(--muted);
  margin: 6px 0 0;
}

/* --- Pill patte entreprise (discrète) ------------------------------- */
.style-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 12px;
  margin-bottom: 14px;
  background: var(--ledr-offwhite);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.style-pill-icon { font-size: 12px; }
.style-pill-text { font-weight: 500; }
.style-pill-select {
  margin: 0 !important;
  padding: 2px 6px !important;
  border: none !important;
  background: transparent !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--ledr-blue) !important;
  width: auto !important;
  cursor: pointer;
}
.style-pill-select:focus {
  box-shadow: none !important;
}
/* R01 — focus-visible (clavier) reste visible */
.style-pill-select:focus-visible {
  outline: 2px solid var(--ledr-yellow) !important;
  outline-offset: 2px;
}
.style-pill-manage {
  padding: 0 6px !important;
  background: transparent !important;
  border: none !important;
  font-size: 14px !important;
  color: var(--muted) !important;
  cursor: pointer;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.style-pill-manage:hover {
  color: var(--ledr-black) !important;
  background: transparent !important;
}

/* --- Slide-in panel (Bibliothèque) ---------------------------------- */
.slide-panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.slide-panel[hidden] { display: none; }
.slide-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.slide-content {
  /* Phase 3 v3 — bordure gauche 2px noire LEDR pour cohérence brutaliste,
     ombre conservée (panneau latéral, ombre crisp ne s'applique pas bien). */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 92vw);
  background: var(--panel);
  border-left: 2px solid var(--ledr-black);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.25s ease;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.slide-header {
  /* Phase 3 v3 — bordure 2px noire au lieu de 1.5px gris pâle */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 2px solid var(--ledr-black);
}
.slide-header h2 {
  /* Phase 3 v3 — passé de Montserrat 18px à Archia 22px bold (cohérent .modal-header h2) */
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ledr-black);
}
.slide-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
}

.library-search {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  margin-bottom: 14px;
}

/* Filtres par grade */
.library-grade-filters {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.grade-filter-btn {
  padding: 6px 10px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: var(--ledr-offwhite) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  border-radius: 6px !important;
  cursor: pointer;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
  min-width: 32px;
}
.grade-filter-btn:hover {
  background: var(--ledr-white) !important;
  color: var(--ledr-black) !important;
}
.grade-filter-btn.active {
  background: var(--ledr-black) !important;
  color: var(--ledr-yellow) !important;
  border-color: var(--ledr-black) !important;
}
.grade-filter-btn.favorite-filter {
  margin-left: auto;
  font-size: 13px !important;
}

/* Tri (select) */
.library-sort {
  margin: 0 !important;
  padding: 4px 8px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background: var(--panel) !important;
  color: var(--ledr-black) !important;
  cursor: pointer;
}
.library-search:focus {
  border-color: var(--ledr-blue);
}
.library-search:focus-visible {
  outline: 2px solid var(--ledr-blue);
  outline-offset: 2px;
}
.library-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.library-stats {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.library-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.library-list li {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.library-list li:hover {
  background: var(--ledr-offwhite);
  border-color: var(--ledr-black);
}
.library-list li.active {
  background: rgba(248, 231, 28, 0.15);
  border-color: var(--ledr-yellow);
}

/* Aperçu (hover preview du contenu de l'annonce) */
.lib-item-preview {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Favori (étoile) — R23 : couleur plus opaque (avant 0.2 → 1.5:1 invisible) */
.lib-item-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
  color: rgba(0, 0, 0, 0.45);    /* R23 : ratio ~3.5:1 (WCAG AA non-text) */
  transition: color 0.15s ease, transform 0.15s ease;
}
.lib-item-fav:hover {
  color: var(--ledr-yellow);
  transform: scale(1.2);
}
.lib-item-fav.is-fav {
  color: var(--ledr-yellow);
}

/* Bouton suppression (J3) — apparaît au hover de l'item parent */
.lib-item-delete {
  position: absolute;
  top: 8px;
  right: 38px;          /* à gauche de l'étoile (qui est à right:8px, ~26px de large) */
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 6px;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.35);
  opacity: 0;            /* caché par défaut, pour ne pas surcharger */
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.library-list li:hover .lib-item-delete,
.library-list li:focus-within .lib-item-delete {
  opacity: 1;            /* visible quand on hover sur l'annonce */
}
.lib-item-delete:hover {
  color: var(--ledr-red);
  background: rgba(255, 54, 78, 0.1);
  transform: scale(1.15);
}
.lib-item-delete:focus-visible {
  opacity: 1;
  outline: 2px solid var(--ledr-red);
  outline-offset: 1px;
}

/* Bouton "Comparer" (visible quand 1 entrée est sélectionnée pour compare) */
.lib-compare-bar {
  position: sticky;
  top: 0;
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  z-index: 5;
}
.lib-compare-bar[hidden] { display: none; }
.lib-compare-bar button {
  background: var(--ledr-black) !important;
  color: var(--ledr-yellow) !important;
  border: none !important;
  padding: 5px 10px !important;
  font-size: 11px !important;
  border-radius: 4px !important;
}
.library-list li.compare-marked {
  outline: 2px solid var(--ledr-yellow);
  outline-offset: -1px;
}
.lib-item-row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.lib-item-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--ledr-black);
  flex: 1;
}
.lib-item-grade {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.lib-item-grade.grade-A { background: var(--grade-a); color: #fff; }
.lib-item-grade.grade-B { background: var(--grade-b); color: #fff; }
.lib-item-grade.grade-C { background: var(--ledr-yellow); color: #000; }
.lib-item-grade.grade-D { background: var(--grade-d); color: #fff; }
.lib-item-grade.grade-E { background: var(--ledr-red); color: #fff; }
.lib-item-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.library-empty {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  padding: 32px 16px;
  font-style: italic;
}

/* --- Modale Comparaison (split-screen) ------------------------------- */
.modal-compare { width: min(1200px, 96vw); max-height: 92vh; }
.compare-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 8px 0;
}
.compare-col {
  background: var(--ledr-offwhite);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  max-height: 70vh;
  overflow-y: auto;
}
.compare-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.compare-col-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.compare-col-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  background: var(--ledr-offwhite);
}
.compare-col-grade.grade-A { background: var(--grade-a); color: #fff; }
.compare-col-grade.grade-B { background: var(--grade-b); color: #fff; }
.compare-col-grade.grade-C { background: var(--ledr-yellow); color: #000; }
.compare-col-grade.grade-D { background: var(--grade-d); color: #fff; }
.compare-col-grade.grade-E { background: var(--ledr-red); color: #fff; }
.compare-col-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.compare-col-content {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-soft);
}
.compare-col-content h1, .compare-col-content h2, .compare-col-content h3 {
  color: var(--ledr-black);
  margin-top: 14px;
  margin-bottom: 6px;
}
.compare-col-content h2 { font-size: 15px; }
.compare-col-content h3 { font-size: 13px; }
.compare-col-content p, .compare-col-content ul { margin: 6px 0; }
@media (max-width: 700px) {
  .compare-split { grid-template-columns: 1fr; }
}

/* --- Loader overlay (sur l'annonce existante, pas en remplacement) -- */
.result-panel { position: relative; }
.loader-overlay {
  position: absolute;
  inset: 0;
  /* Fond noir opaque (cohérent avec le loader plein écran) — empêche
     l'effet "écran gris flou" qui apparaissait avec un fond translucide. */
  background: var(--ledr-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 50;
  border-radius: 12px;
  border: 1.5px solid var(--ledr-black);
  animation: fadeIn 0.2s ease;
  min-height: 280px;
}
.loader-overlay .loader-message {
  color: var(--ledr-yellow) !important;
  background: transparent !important;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  padding: 0 !important;
}
.loader-overlay[hidden] { display: none; }

/* --- Refine textarea expansif -------------------------------------- */
#feedback-input {
  resize: vertical;
  min-height: 38px;
  max-height: 200px;
  transition: min-height 0.2s ease;
}
#feedback-input:focus {
  min-height: 80px;
}

/* --- Tier explanations (badges sous chaque tier) -------------------- */
.tier-explanation {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: normal;
  display: block;
  margin-top: 2px;
  font-weight: 400;
  line-height: 1.4;
}

/* --- Modale Aide ----------------------------------------------------- */
.modal-help { width: min(720px, 92vw); max-height: 88vh; }
.modal-help .modal-body details {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
}
.modal-help .modal-body summary {
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--ledr-black);
  padding: 4px 0;
}
.modal-help .modal-body summary:hover { color: var(--ledr-blue); }
.modal-help .modal-body p,
.modal-help .modal-body ul,
.modal-help .modal-body ol {
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-soft);
}
.modal-help .modal-body kbd {
  background: var(--ledr-offwhite);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 11px;
}

/* --- Modale Sources -------------------------------------------------- */
.sources-modal-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sources-modal-list li {
  padding: 10px 14px;
  background: var(--ledr-offwhite);
  border-left: 3px solid var(--ledr-blue);
  border-radius: 0 6px 6px 0;
  margin-bottom: 8px;
  font-size: 13px;
}
.sources-modal-list .src-file {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ledr-blue);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.sources-modal-list .src-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}

/* --- Aperçu plein écran de l'annonce -------------------------------- */
.preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--ledr-offwhite);
  overflow-y: auto;
  animation: fadeIn 0.2s ease;
}
.preview-overlay[hidden] { display: none; }
.preview-close {
  position: fixed;
  top: 20px;
  right: 28px;
  background: var(--ledr-black) !important;
  color: var(--ledr-white) !important;
  border: none !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  z-index: 10;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.preview-close:hover { background: #1a1a1a !important; }
.preview-content {
  max-width: 720px;
  margin: 60px auto 80px;
  padding: 60px 80px;
  background: var(--ledr-white);
  border: 2px solid var(--ledr-black);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-crisp);
  font-family: var(--font-sans);     /* Montserrat body */
  font-size: 16px;
  line-height: 1.85;                  /* signature LEDR */
  color: var(--text-soft);
}
.preview-content h1, .preview-content h2, .preview-content h3 {
  color: var(--ledr-black);
  font-family: var(--font-display);   /* Archia titres */
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.preview-content h1 { font-size: 32px; }
.preview-content h2 { font-size: 24px; margin-top: 32px; }
.preview-content h3 { font-size: 18px; margin-top: 24px; }
@media (max-width: 700px) {
  .preview-content { margin: 40px 16px; padding: 32px 24px; }
}

/* --- Bouton Aperçu (à côté du h2 du résultat) ----------------------- */
.preview-btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  color: var(--muted) !important;
}
.preview-btn:hover {
  background: var(--ledr-offwhite) !important;
  color: var(--ledr-black) !important;
  border-color: var(--ledr-black) !important;
}

/* --- Toast notification ---------------------------------------------- */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ledr-black);
  color: var(--ledr-white);
  padding: 14px 22px;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 3000;
  animation: toastIn 0.3s ease;
  max-width: 480px;
}
.toast.toast-success { border-left: 4px solid var(--ledr-yellow); }
.toast.toast-info { border-left: 4px solid var(--ledr-blue); }
.toast.toast-warn { border-left: 4px solid var(--quality-medium); }   /* orange */
.toast.toast-error { border-left: 4px solid var(--ledr-red); }

/* --- Icônes Lucide intégrées dans les boutons (Batch B) --------------- */
/* Lucide remplace <i data-lucide="x"> par <svg class="lucide lucide-x">. */
[data-lucide],
svg.lucide {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;     /* aligne sur la baseline du texte */
  flex-shrink: 0;
  stroke-width: 2;
}
button [data-lucide],
button svg.lucide {
  margin-right: 0.4em;          /* espace icône → texte (sauf icon-only) */
}
button.icon-only [data-lucide],
button.icon-only svg.lucide,
.icon-btn [data-lucide],
.icon-btn svg.lucide {
  margin-right: 0;
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.toast.fade-out { animation: toastOut 0.3s ease forwards; }
@keyframes toastOut {
  to { opacity: 0; transform: translate(-50%, 16px); }
}

/* --- Modale générique ----------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 35, 40, 0.55);
}
.modal-content {
  /* Phase 3 v3 — passé d'arrondis 12px + ombre douce 40px diffuse à
     bordure 2px noire LEDR + ombre crisp signature (8px) + radius 2px
     pour cohérence avec les panels brutalistes. */
  position: relative;
  width: min(720px, 92vw);
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 2px solid var(--ledr-black);
  border-radius: var(--radius-card);   /* 2px LEDR */
  box-shadow: 8px 8px 0 var(--ledr-black);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 2px solid var(--ledr-black);   /* Phase 3 v3 — passé de 1px gris pâle à 2px noir */
}
.modal-header h2 {
  /* Phase 3 v3 — passé de 16px sans display font à Archia 22px bold */
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ledr-black);
}
.modal-body {
  padding: 18px 20px;
  overflow-y: auto;
}

.icon-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--muted);
  /* R08 — cible tactile WCAG 2.5.8 (24×24 min, 44×44 confort) */
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.icon-btn:hover { color: var(--text); }

/* Onglets */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.tab {
  padding: 8px 14px;
  font-size: 13px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  border-radius: 0;
}
.tab:hover { color: var(--text); background: transparent; }
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.tab-panel[hidden] { display: none; }
.panel-hint {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 14px;
}

/* Liste des pattes */
.styles-list { list-style: none; padding: 0; margin: 0; }
.styles-list .empty {
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}
.style-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
}
.style-item-info { flex: 1; }
.style-item-name { font-weight: 600; font-size: 14px; }
.style-item-tone {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.style-item-sources {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-family: ui-monospace, monospace;
}

/* Upload multi-fichiers pour création de patte */
.upload-zone-multi { margin-bottom: 12px; }
.style-files-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.style-files-list .file-chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: #f3f3f0;
  border-radius: 6px;
  font-size: 12px;
}
.style-files-list .file-chip button {
  padding: 2px 6px;
  font-size: 11px;
  background: transparent;
  border: none;
  color: var(--muted);
}

.primary-btn {
  /* Phase 4 v3 hard light — border 3px noir (cohérent .v3-btn de la landing).
     !important pour battre `button[type="submit"] { border-color: bleu }` legacy. */
  background: var(--ledr-blue);
  color: var(--ledr-white);
  border: 3px solid var(--ledr-black) !important;
}
.primary-btn:hover:not(:disabled) {
  background: var(--ledr-blue-hover);
  border-color: var(--ledr-black) !important;
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-soft);   /* 4px crisp noir signature */
}

/* Prévisualisation édition */
.style-preview {
  margin-top: 16px;
  padding: 16px;
  background: #fafaf8;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.style-preview h3 { margin: 0 0 14px; font-size: 14px; }
.style-preview label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 12px;
}
.style-preview .actions { margin-top: 12px; }

/* --- Fiche LEDR détaillée (26 infos en amont) ----------------------- */
.detailed-form {
  margin: 18px 0 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--ledr-offwhite);
  overflow: hidden;
}
.detailed-form > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  background: var(--ledr-black);
  color: var(--ledr-white);
  transition: background 0.15s ease;
}
.detailed-form > summary::-webkit-details-marker { display: none; }
.detailed-form > summary::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--ledr-yellow);
  font-size: 14px;
}
.detailed-form[open] > summary::before { transform: rotate(90deg); }
.detailed-form > summary:hover { background: #1a1a1a; }

.summary-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.summary-hint {
  flex: 1;
  font-size: 11px;
  color: var(--ledr-yellow);
  opacity: 0.75;
  font-style: italic;
}
.fill-counter {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 500;
}

.detailed-intro {
  margin: 0;
  padding: 14px 18px;
  font-size: 12px;
  color: var(--muted);
  background: var(--ledr-offwhite);
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}

/* Tiers */
.tier-details { border-bottom: 1px solid var(--border); }
.tier-details:last-of-type { border-bottom: none; }

.tier-summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ledr-black);
  background: var(--panel);
  user-select: none;
}
.tier-summary::-webkit-details-marker { display: none; }
.tier-summary::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.15s ease;
  opacity: 0.5;
  font-size: 12px;
}
.tier-details[open] > .tier-summary::before { transform: rotate(90deg); }
.tier-summary:hover { background: var(--ledr-offwhite); }

.tier-count {
  margin-left: auto;
  font-size: 10px;
  background: var(--ledr-offwhite);
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--muted);
  border: 1px solid var(--border);
}
.tier-count.complete {
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  border-color: transparent;
}

.tier-indispensable::after { content: "Tier 1"; margin-left: auto; order: 0; opacity: 0; }
/* (ordre modifié — le badge count prend la place) */

.tier-fields {
  padding: 14px 18px 8px;
  background: var(--panel);
}
.tier-fields label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ledr-black);
}
.tier-fields input[type="text"],
.tier-fields textarea {
  margin-top: 4px;
  font-size: 13px;
}
/* Champ rempli (état local) : petit liseré jaune LEDR à gauche */
.tier-fields input[type="text"].filled,
.tier-fields textarea.filled {
  border-left: 3px solid var(--ledr-yellow);
}

/* Verdict de la checklist LEDR sur la dernière annonce générée
   (prend priorité sur .filled quand présent — l'info est plus utile) */
.tier-fields input[type="text"].status-present,
.tier-fields textarea.status-present {
  border-left: 4px solid #22c55e; /* vert — info bien présente dans l'annonce */
}
.tier-fields input[type="text"].status-partial,
.tier-fields textarea.status-partial {
  border-left: 4px solid var(--ledr-yellow); /* jaune — partielle */
}
.tier-fields input[type="text"].status-missing,
.tier-fields textarea.status-missing {
  border-left: 4px solid var(--ledr-red); /* rouge — manquante dans l'annonce */
}

/* --- Upload brief --------------------------------------------------- */
.upload-block { margin-bottom: 16px; }

.upload-zone {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: var(--ledr-offwhite);
  cursor: pointer;
  transition: all 0.15s ease;
}
.upload-zone:hover {
  border-color: var(--ledr-black);
  background: var(--ledr-yellow);
}
.upload-zone.dragover {
  border-color: var(--ledr-black);
  background: var(--ledr-yellow);
  border-style: solid;
}
.upload-zone.loading {
  border-color: var(--ledr-blue);
  background: var(--ledr-offwhite);
  cursor: progress;
}

.upload-icon { font-size: 28px; }
.upload-text { display: flex; flex-direction: column; gap: 2px; }
.upload-text strong { font-size: 13px; }
.upload-text small { font-size: 11px; color: var(--muted); }

.upload-status {
  margin-top: 6px;
  font-size: 12px;
  min-height: 16px;
}
.upload-status.ok { color: var(--success); }
.upload-status.error { color: var(--error); }
.upload-status.loading { color: var(--muted); }

.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 18px;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Champ flashé après pré-remplissage (jaune = nouveau contenu) */
@keyframes flashField {
  0% { background: #fff9c4; }
  100% { background: #fff; }
}
.flash { animation: flashField 1.2s ease; }

/* Champ flashé après vidage (rouge subtil = ancien contenu effacé) */
/* Variante B+ : visuellement, l'utilisateur voit ce que le nouveau
   brief a "chassé" du précédent, ce qui rend le reset transparent. */
@keyframes flashFieldOut {
  0% { background: rgba(255, 54, 78, 0.15); }
  100% { background: #fff; }
}
.flash-out { animation: flashFieldOut 0.9s ease; }
@media (prefers-reduced-motion: reduce) {
  .flash, .flash-out { animation: none; }
}

/* --- Import depuis URL externe (séparateur "ou" + form) ----------------- */
.upload-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 10px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.upload-divider::before,
.upload-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.upload-divider span { white-space: nowrap; }

.url-import-form {
  display: flex;
  gap: 8px;
  margin: 0;
}
.url-import-form input[type="url"] {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ledr-black);
  background: var(--ledr-white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.url-import-form input[type="url"]:focus {
  border-color: var(--ledr-blue);
  box-shadow: 0 0 0 3px rgba(52, 56, 187, 0.12);
}
.url-import-form input[type="url"]:focus-visible {
  outline: 2px solid var(--ledr-blue);
  outline-offset: 2px;
}
/* Le bouton lui-même utilise désormais .btn .btn--secondary .btn--sm
   (Batch C audit UX — système .btn unifié). On garde juste le contrainte
   layout flex-shrink:0 pour ne pas être compressé par l'input qui prend
   tout l'espace flex disponible. */
.url-import-form button {
  flex-shrink: 0;
}
.url-import-hint {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

/* --- Modale chooseAction (3+ choix) ---------------------------------- */
.choose-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.choose-action-btn {
  /* Phase 3 v3 — passé de border 1.5px gris pâle + radius 8px à
     border 2px noir + radius 2px LEDR (cohérent brutaliste éditorial). */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border: 2px solid var(--ledr-black);
  border-radius: var(--radius-btn);   /* 2px */
  background: var(--ledr-white);
  color: var(--ledr-black);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  min-height: 48px;     /* WCAG 2.5.8 : cible tactile confortable */
}
.choose-action-btn:hover {
  background: var(--ledr-offwhite);
  border-color: var(--ledr-black);
}
.choose-action-btn:active { transform: translateY(1px); }
.choose-action-btn:focus-visible {
  outline: 2px solid var(--ledr-blue);
  outline-offset: 2px;
}
/* Variante primary : bouton principal recommandé */
.choose-action-btn.is-primary {
  background: var(--ledr-yellow);
  border-color: var(--ledr-black);
  box-shadow: 4px 4px 0 var(--ledr-black);
}
.choose-action-btn.is-primary:hover {
  background: var(--ledr-yellow-hover);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ledr-black);
}
/* Variante danger : action destructive */
.choose-action-btn.is-danger {
  border-color: var(--ledr-red);
  color: var(--ledr-red);
}
.choose-action-btn.is-danger:hover {
  background: rgba(255, 54, 78, 0.08);
}
/* Variante secondary : action neutre (annuler) */
.choose-action-btn.is-secondary {
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}
.choose-action-btn.is-secondary:hover {
  background: var(--ledr-offwhite);
  color: var(--ledr-black);
}

/* ─────────────────────────────────────────────────────────────────────
   SYSTÈME DE BOUTONS UNIFIÉ — .btn (Batch C audit UX)
   ─────────────────────────────────────────────────────────────────────
   Source unique de vérité pour tous les nouveaux boutons. Remplace à
   terme les 22 classes ad-hoc (admin-primary-btn, lp-btn-primary,
   improve-btn, draft-btn-primary, etc.) qui dupliquent le même pattern.

   USAGE :
     <button class="btn btn--primary">Action principale</button>
     <button class="btn btn--secondary btn--sm">Action secondaire</button>
     <button class="btn btn--danger">Supprimer</button>
     <button class="btn btn--ghost">Texte de lien</button>

   VARIANTS (choisir 1) :
     .btn--primary    → jaune signature LEDR + ombre crisp (action principale)
     .btn--secondary  → blanc bordé noir (action secondaire)
     .btn--tertiary   → transparent avec bordure (action neutre)
     .btn--danger     → rouge (action destructive)
     .btn--ghost      → texte seul, pas de bordure (lien stylé en bouton)
     .btn--info       → cyan (action IA distinctive comme "Plus inclusif")

   TAILLES (choisir 1, défaut = md) :
     .btn--xs   → padding 4/10, font 11px (très compact, dans les listes)
     .btn--sm   → padding 7/14, font 12px (compact, modales secondaires)
     [défaut]   → padding 10/18, font 14px (standard)
     .btn--lg   → padding 14/24, font 16px (CTA hero, actions critiques)

   MIGRATION : pas de big bang. À chaque évolution d'un module, migrer
   les classes ad-hoc vers .btn + variants. Les anciens styles restent
   tant qu'ils sont utilisés.
   ───────────────────────────────────────────────────────────────────── */
@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 10px 18px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-decoration: none;
    border: 1.5px solid transparent;
    border-radius: var(--radius-btn);          /* 2px : signature LEDR */
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    min-height: 44px;                          /* WCAG 2.5.8 cible tactile */
    white-space: nowrap;
  }
  .btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
  }
  .btn:focus-visible {
    outline: 2px solid var(--ledr-blue);
    outline-offset: 2px;
  }

  /* === Variants === */
  .btn--primary {
    background: var(--ledr-yellow);
    color: var(--ledr-black);
    border-color: var(--ledr-black);
    box-shadow: 4px 4px 0 var(--ledr-black);
  }
  .btn--primary:hover:not(:disabled) {
    background: var(--ledr-yellow-hover);
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--ledr-black);
  }
  .btn--primary:active:not(:disabled) {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--ledr-black);
  }

  .btn--secondary {
    background: var(--ledr-white);
    color: var(--ledr-black);
    border-color: var(--ledr-black);
  }
  .btn--secondary:hover:not(:disabled) {
    background: var(--ledr-offwhite);
    transform: translateY(-1px);
  }

  .btn--tertiary {
    background: transparent;
    color: var(--ledr-black);
    border-color: var(--border);
  }
  .btn--tertiary:hover:not(:disabled) {
    border-color: var(--ledr-black);
    background: var(--ledr-offwhite);
  }

  .btn--danger {
    background: var(--ledr-white);
    color: var(--ledr-red);
    border-color: var(--ledr-red);
  }
  .btn--danger:hover:not(:disabled) {
    background: var(--ledr-red);
    color: var(--ledr-white);
  }
  .btn--danger.is-solid {
    background: var(--ledr-red);
    color: var(--ledr-white);
  }
  .btn--danger.is-solid:hover:not(:disabled) {
    background: #d92e44;
    border-color: #d92e44;
  }

  .btn--ghost {
    background: transparent;
    color: var(--ledr-blue);
    border-color: transparent;
    min-height: auto;
    padding: 4px 8px;
  }
  .btn--ghost:hover:not(:disabled) {
    text-decoration: underline;
  }

  .btn--info {
    background: var(--ledr-blue);
    color: var(--ledr-white);
    border-color: var(--ledr-blue);
  }
  .btn--info:hover:not(:disabled) {
    background: var(--ledr-blue-hover);
    border-color: var(--ledr-blue-hover);
  }

  /* === Tailles === */
  .btn--xs {
    padding: 4px 10px;
    font-size: 11px;
    min-height: 28px;
  }
  .btn--sm {
    padding: 7px 14px;
    font-size: 12px;
    min-height: 36px;
  }
  .btn--lg {
    padding: 14px 24px;
    font-size: 16px;
    min-height: 52px;
  }

  /* === Modificateurs utilitaires === */
  .btn--block {
    display: flex;
    width: 100%;
  }
  .btn--icon-only {
    padding: 10px;
    aspect-ratio: 1 / 1;
    min-width: 44px;
  }
  .btn--icon-only.btn--sm {
    padding: 8px;
    min-width: 36px;
  }
}

/* --- Bouton "Saisir manuellement" ----------------------------------- */
.manual-form-btn {
  width: 100% !important;
  margin: 18px 0 14px;
  padding: 16px 20px !important;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans) !important;       /* Montserrat */
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ledr-black) !important;
  background: var(--ledr-white) !important;
  border: 2px solid var(--ledr-black) !important;
  border-radius: var(--radius-btn) !important;
  box-shadow: 4px 4px 0px var(--ledr-black) !important;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.manual-form-btn:hover {
  background: var(--ledr-yellow) !important;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--ledr-black) !important;
}
.manual-form-btn.is-open {
  background: var(--ledr-yellow) !important;
  border-radius: var(--radius-btn) var(--radius-btn) 0 0 !important;
  box-shadow: 4px 4px 0px var(--ledr-black) !important;
  transform: none;
}
.manual-form-btn .manual-form-icon { font-size: 16px; }
.manual-form-btn .manual-form-label { flex: 1; text-align: left; }
.manual-form-btn .manual-form-chevron {
  font-size: 14px;
  color: var(--ledr-blue);
  transition: transform 0.2s ease;
}
.manual-form-btn.is-open .manual-form-chevron {
  transform: rotate(180deg);
}

/* Wrapper du formulaire (révélé au clic) */
.manual-form-wrapper {
  margin: -14px 0 14px;
  padding: 18px 18px 6px;
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  animation: fadeInUp 0.25s ease;
}
.manual-form-wrapper[hidden] { display: none; }

/* --- Form ------------------------------------------------------------ */
form label {
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ledr-black);
}

input[type="text"],
textarea,
select {
  /* Phase 4 v3 hard light — passé de border 1.5px gris pâle + radius 8px
     à border 2px noir + radius 0px (cohérent .v3-form-card input de la landing). */
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;             /* +20% (10x12 → 12x14) */
  font-family: var(--font-sans);
  font-size: 15px;                /* +1px (14 → 15, plus lisible) */
  border: 2px solid var(--ledr-black);
  border-radius: var(--radius-btn); /* 0px Phase 4 */
  background: var(--panel);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea { resize: vertical; min-height: 64px; line-height: 1.5; }

/* R01 — focus à la souris : box-shadow + border ; focus clavier : ajoute outline */
input:focus, textarea:focus, select:focus {
  border-color: var(--ledr-blue);
  box-shadow: 0 0 0 3px rgba(52, 56, 187, 0.12);
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--ledr-blue);
  outline-offset: 2px;
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

button {
  padding: 10px 20px;
  font-family: var(--font-sans);     /* Montserrat (LEDR) */
  font-size: 14px;
  font-weight: 600;                  /* SemiBold = LEDR standard */
  letter-spacing: 0;                 /* pas de tracking sur Montserrat */
  text-transform: none;              /* pas d'uppercase par défaut */
  border: 1.5px solid var(--border);
  border-radius: var(--radius-btn);  /* 2px : signature LEDR */
  background: var(--panel);
  color: var(--ledr-black);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

button:hover:not(:disabled) {
  background: var(--ledr-offwhite);
  border-color: var(--ledr-black);
}

button[type="submit"],
#generate-btn {
  background: var(--ledr-blue);
  color: var(--ledr-white);
  border-color: var(--ledr-blue);
}
#generate-btn {
  /* Bouton primaire générer : ombre crisp signature LEDR */
  box-shadow: var(--shadow-crisp);
}
#generate-btn:hover:not(:disabled) {
  background: var(--ledr-blue-hover);
  border-color: var(--ledr-blue-hover);
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0px var(--ledr-black);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.kbd-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}
kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 1px 0 var(--border);
}

/* --- Result ---------------------------------------------------------- */
.result-panel { min-height: 300px; }

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.result-header h2 { margin: 0; }

.status {
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  min-height: 18px;
}
.status.loading { color: var(--muted); }
.status.error { color: var(--error); }
.status.success { color: var(--success); }

/* État vide — avant toute génération */
.empty-state[hidden] { display: none; }
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 24px 40px;
  text-align: center;
}
.empty-monkey {
  font-size: 56px;
  animation: monkeyBob 2s ease-in-out infinite;
  margin-bottom: 8px;
}
.empty-state h3 {
  font-family: var(--font-display);  /* Archia */
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ledr-black);
  margin: 0;
}
.empty-state p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  max-width: 360px;
}
.empty-cta {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.empty-cta-btn {
  /* Phase 4 v3 hard light — border 3px noir (cohérent .v3-btn--yellow landing). */
  padding: 14px 28px !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background: var(--ledr-yellow) !important;
  color: var(--ledr-black) !important;
  border: 3px solid var(--ledr-black) !important;
  border-radius: var(--radius-btn) !important;   /* 0px LEDR */
  font-weight: 600 !important;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.empty-cta-btn:hover {
  background: var(--ledr-yellow-hover) !important;
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-crisp);   /* 6px noir crisp signature */
}
.empty-cta-hint {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
  max-width: 320px;
  text-align: center;
}

/* L'annonce : aspect "document fini" avec ombre crisp signature LEDR */
.result-content {
  padding: 36px 40px;
  background: var(--ledr-white);
  border: 2px solid var(--ledr-black);
  border-radius: var(--radius-card);
  min-height: 200px;
  line-height: 1.85;                  /* signature LEDR aéré */
  font-size: 15px;
  box-shadow: var(--shadow-crisp);    /* offset noir LEDR */
  animation: fadeInUp 0.35s ease;
}
.result-content[hidden] { display: none; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.result-content h1, .result-content h2, .result-content h3 {
  margin-top: 24px;
  margin-bottom: 10px;
  color: var(--ledr-black);
  font-family: var(--font-sans); /* Archia */
  letter-spacing: -0.01em;
}
.result-content h1 { font-size: 24px; font-weight: 700; }
.result-content h2 { font-size: 20px; font-weight: 700; }
.result-content h3 { font-size: 16px; font-weight: 600; }
.result-content p, .result-content ul, .result-content ol { margin: 10px 0; }
.result-content ul, .result-content ol { padding-left: 24px; }
.result-content code {
  background: #e7e7e3;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.9em;
}

/* Actions sous l'annonce — hiérarchie principale / secondaire */
.result-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  animation: fadeInUp 0.35s ease;
}
.result-actions[hidden] { display: none; }

/* Action principale : Export DOCX (jaune LEDR + ombre crisp signature) */
.action-primary {
  width: 100%;
  padding: 14px 20px !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  background: var(--ledr-yellow) !important;
  color: var(--ledr-black) !important;
  border: 2px solid var(--ledr-black) !important;
  border-radius: var(--radius-btn) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 4px 4px 0px var(--ledr-black) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease !important;
}
.action-primary:hover:not(:disabled) {
  background: var(--ledr-yellow-bright) !important;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--ledr-black) !important;
}
.action-primary:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 var(--ledr-black) !important;
}

/* Actions secondaires : Copier + Variante (côte à côte, plus discrètes) */
.action-secondary-group {
  display: flex;
  gap: 8px;
}
.action-secondary {
  flex: 1;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 11px !important;
}
.action-secondary:hover:not(:disabled) {
  background: var(--ledr-offwhite) !important;
  border-color: var(--ledr-black) !important;
  color: var(--ledr-black) !important;
}

/* Bouton sticky "Générer" en bas de la colonne gauche */
.sticky-generate {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  margin: 0 -26px -24px;
  background: var(--panel);
  border-top: 1.5px solid var(--border);
  border-radius: 0 0 12px 12px;
  z-index: 10;
}
.sticky-generate button {
  flex: 1;
  padding: 16px 20px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  background: var(--ledr-blue);
  color: var(--ledr-white);
  border: 2px solid var(--ledr-black);
  border-radius: var(--radius-btn);
  box-shadow: 4px 4px 0px var(--ledr-black);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.sticky-generate button:hover:not(:disabled) {
  background: var(--ledr-blue-hover);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--ledr-black);
}
.sticky-generate button:active:not(:disabled) {
  transform: translate(0, 0);
  box-shadow: 0 0 0 var(--ledr-black);
}
.kbd-hint-inline {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.kbd-hint-inline kbd {
  display: inline-block;
  padding: 2px 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--ledr-offwhite);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: 0 1px 0 var(--border);
}

#sources-block {
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
}
#sources-block summary { cursor: pointer; user-select: none; }
#sources-list { margin: 8px 0 0; padding-left: 20px; }
#sources-list li { margin: 2px 0; font-family: ui-monospace, monospace; font-size: 12px; }

/* --- Loader : singe qui jongle -------------------------------------- */
/* Respecte l'attribut HTML `hidden` — sans cette règle, display:flex
   ci-dessous écrase hidden et le loader reste visible en permanence. */
.loader[hidden] { display: none !important; }

.loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 18px;
  margin: 16px 0;
  background: var(--ledr-black);
  border: 1.5px solid var(--ledr-black);
  border-radius: 12px;
  user-select: none;
}
.loader .loader-message {
  color: var(--ledr-yellow);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

.loader-compact {
  padding: 12px 14px;
  margin: 8px 0 0;
}

.loader-scene {
  position: relative;
  width: 110px;
  height: 110px;
}

.loader-compact .loader-scene {
  width: 80px;
  height: 80px;
}

.monkey {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 44px;
  transform: translate(-50%, -50%);
  animation: monkeyBob 1s ease-in-out infinite;
}

.loader-compact .monkey { font-size: 32px; }

@keyframes monkeyBob {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -55%) scale(1.05); }
}

/* 3 bananes qui orbitent autour du singe avec des phases décalées */
.banana {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 22px;
  margin: -11px 0 0 -11px; /* centre le point d'ancrage */
  animation: bananaOrbit 1.2s linear infinite;
  transform-origin: center center;
}

.loader-compact .banana { font-size: 16px; margin: -8px 0 0 -8px; }

.banana-1 { animation-delay: 0s; }
.banana-2 { animation-delay: -0.4s; }
.banana-3 { animation-delay: -0.8s; }

@keyframes bananaOrbit {
  0% {
    transform: rotate(0deg) translateY(-44px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateY(-44px) rotate(-360deg);
  }
}

/* En mode compact le rayon de l'orbite est plus petit */
.loader-compact .banana {
  animation-name: bananaOrbitCompact;
}
@keyframes bananaOrbitCompact {
  0% { transform: rotate(0deg) translateY(-32px) rotate(0deg); }
  100% { transform: rotate(360deg) translateY(-32px) rotate(-360deg); }
}

.loader-message {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  min-height: 18px;
  animation: messageFade 0.4s ease;
}

.loader-compact .loader-message { font-size: 12px; }

@keyframes messageFade {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Respecte l'option système "réduire le mouvement" */
@media (prefers-reduced-motion: reduce) {
  .monkey, .banana { animation: none !important; }
}

/* --- Score A-E (Nutriscore) ----------------------------------------- */
.score-block {
  margin-bottom: 16px;
  padding: 14px 16px;
  background: #fafaf8;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.score-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Palette des grades, façon Nutriscore — teintes ajustées LEDR (R07) */
.grade-A { --grade-bg: var(--grade-a); --grade-fg: var(--ledr-white); }
.grade-B { --grade-bg: var(--grade-b); --grade-fg: var(--ledr-white); }
.grade-C { --grade-bg: var(--grade-c); --grade-fg: var(--ledr-black); }
.grade-D { --grade-bg: var(--grade-d); --grade-fg: var(--ledr-white); }
.grade-E { --grade-bg: var(--grade-e); --grade-fg: var(--ledr-white); }

.score-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--grade-bg, #ccc);
  color: var(--grade-fg, #1f2328);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}
.score-letter { font-size: 30px; font-weight: 800; }

.score-info { flex: 1; min-width: 180px; }

.score-scale {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.score-scale span {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  opacity: 0.35;
  transition: all 0.2s ease;
}
.score-scale span[data-grade="A"] { background: var(--grade-a); color: var(--ledr-white); }
.score-scale span[data-grade="B"] { background: var(--grade-b); color: var(--ledr-white); }
.score-scale span[data-grade="C"] { background: var(--ledr-yellow); color: var(--ledr-black); }
.score-scale span[data-grade="D"] { background: var(--grade-d); color: var(--ledr-white); }
.score-scale span[data-grade="E"] { background: var(--ledr-red); color: var(--ledr-white); }
.score-scale span.active {
  opacity: 1;
  transform: scale(1.25);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.score-total {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 10px;
}

.improve-btn {
  padding: 7px 14px;
  font-size: 10px;
  background: var(--ledr-blue);
  color: var(--ledr-white);
  border-color: var(--ledr-blue);
}
.improve-btn:hover:not(:disabled) {
  background: var(--ledr-blue-hover);
  border-color: var(--ledr-blue-hover);
  transform: translateY(-1px);
}

/* Variante "Plus inclusif" : harmonisée avec "Améliorer auto" (bleu LEDR
   identique) pour cohérence des actions IA. Distinction = icône + libellé.
   La barre latérale gauche jaune (border-left) signale le caractère
   "valeur ajoutée RH" de l'action. */
.improve-btn-inclusive {
  margin-top: 8px;
  border-left: 4px solid var(--ledr-yellow);
}

.score-verdict {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Diagnostic recruteur */
.diagnostic-block {
  margin: 14px 0;
  padding: 12px 16px;
  background: var(--ledr-black);
  border-radius: 8px;
  color: var(--ledr-white);
}
.diagnostic-text {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 6px;
  line-height: 1.5;
}
.diagnostic-corriger {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ledr-yellow);
  margin: 0;
  line-height: 1.5;
}

/* Barres par catégorie */
.category-bars { margin: 14px 0; }
.cat-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 50px;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
}
.cat-bar-row:last-child { border-bottom: none; }
.cat-bar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.cat-bar-label .cat-weight {
  font-size: 9px;
  color: var(--muted);
  margin-left: 4px;
}
.cat-bar-track {
  height: 8px;
  background: var(--ledr-offwhite);
  border-radius: 4px;
  overflow: hidden;
}
.cat-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}
.cat-bar-score {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

/* Points forts / faibles */
.forts-faibles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
}
.ff-col { padding: 10px 14px; border-radius: 8px; }
.ff-col[hidden] { display: none; }
.ff-col h4 { margin: 0 0 8px; font-size: 13px; }
.ff-col ul { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.6; }
#points-forts-block { background: #e6f7ea; }
#points-faibles-block { background: #fdecec; }

/* Actions prioritaires */
#actions-block { margin: 10px 0; }
#actions-block[hidden] { display: none; }
#actions-block h4 { margin: 0 0 8px; font-size: 13px; }
.actions-list { margin: 0; padding-left: 20px; font-size: 12px; }
.actions-list li { margin: 6px 0; line-height: 1.5; }
.action-impact {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Toggle "Voir l'analyse détaillée" */
.score-deep {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.score-deep > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ledr-blue);
  user-select: none;
}
.score-deep > summary::-webkit-details-marker { display: none; }
.score-deep > summary:hover { color: var(--ledr-blue-hover); }
.score-deep-chevron {
  font-size: 14px;
  transition: transform 0.2s ease;
}
.score-deep[open] > summary > .score-deep-chevron {
  transform: rotate(180deg);
}

/* Détail des 24 critères */
.score-details { margin-top: 14px; font-size: 13px; }
.score-details summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 0;
}
.score-details summary:hover { color: var(--text); }

.detail-category { margin-bottom: 14px; }
.detail-category-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ledr-blue);
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.detail-criterion {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-soft);
}
.detail-criterion:last-child { border-bottom: none; }

.crit-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 24px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
.crit-score.s5 { background: var(--grade-a); color: #fff; }
.crit-score.s4 { background: var(--grade-b); color: #fff; }
.crit-score.s3 { background: var(--ledr-yellow); color: var(--ledr-black); }
.crit-score.s2 { background: var(--grade-d); color: #fff; }
.crit-score.s1 { background: var(--ledr-red); color: #fff; }

.crit-body { display: flex; flex-direction: column; gap: 2px; }
.crit-label { font-weight: 600; font-size: 12px; color: var(--ledr-black); }
.crit-justification { font-size: 11px; color: var(--muted); line-height: 1.45; }
.crit-reco { font-size: 11px; color: var(--ledr-blue); line-height: 1.45; font-style: italic; }

/* --- Score checklist LEDR compact (dans la fiche détaillée) --------- */
.checklist-score-compact {
  margin: 0 18px 14px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: 10px;
}

.compact-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.compact-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.checklist-summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.checklist-summary .pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  margin-left: 4px;
}
.checklist-summary .pill.present { background: #e6f7ea; color: var(--success); }
.checklist-summary .pill.partial { background: #fff5d6; color: #b8860b; }
.checklist-summary .pill.missing { background: #fdecec; color: var(--error); }

.checklist-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: #eee;
  margin-bottom: 12px;
}
.bar-present { background: var(--grade-b); }
.bar-partial { background: #f0c419; }
.bar-missing { background: #c0392b; opacity: 0.25; }


/* --- Raffinement ---------------------------------------------------- */
.refine-block {
  margin-top: 14px;
  animation: fadeInUp 0.35s ease;
}
.refine-block[hidden] { display: none; }

.refine-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.refine-input-row {
  display: flex;
  gap: 8px;
}
.refine-input-row textarea {
  flex: 1;
  min-height: 38px;
  resize: none;
}
.refine-input-row button {
  flex-shrink: 0;
}

#refine-btn {
  background: var(--ledr-blue);
  color: var(--ledr-white);
  border-color: var(--ledr-blue);
}
#refine-btn:hover:not(:disabled) {
  background: var(--ledr-blue-hover);
  border-color: var(--ledr-blue-hover);
  transform: translateY(-1px);
}

.chip {
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--ledr-white);
  color: var(--muted);
  border-color: var(--border);
}
.chip:hover {
  color: var(--ledr-black);
  background: var(--ledr-yellow);
  border-color: var(--ledr-yellow);
}

/* --- Historique ----------------------------------------------------- */
.history-block {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.history-header h3 { margin: 0; font-size: 14px; }

.link-btn {
  padding: 2px 6px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
}
.link-btn:hover { color: var(--error); background: transparent; }

#history-list {
  margin: 12px 0 0;
  padding-left: 20px;
  font-size: 13px;
}
#history-list li {
  margin: 6px 0;
  cursor: pointer;
}
#history-list li .title {
  color: var(--ledr-blue);
  text-decoration: underline;
}
#history-list li .meta {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  margin-left: 6px;
}
#history-list li.active .title {
  font-weight: 700;
  color: var(--ledr-black);
  background: var(--ledr-yellow);
  padding: 0 4px;
  text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────────
   F7 — prefers-reduced-motion : respecte le réglage OS de l'utilisateur.
   ~3% de la population a des troubles vestibulaires aggravés par les
   animations. WCAG AAA recommande ce media query.
   ───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   REFONTE LANDING v2 — formule Dan Lok × patte Shodo
   ═════════════════════════════════════════════════════════════════════
   Structure : 7 sections en alternance fond noir/blanc/jaune
     §1 HOOK    (noir + jaune accent)
     §2 STORY   (blanc, éditorial)
     §3 PROBLEM (noir)
     §4 PIVOT   (jaune signature)
     §5 PROOF   (blanc)
     §6 OFFER   (noir)
     §7 FAQ     (blanc)
   ═════════════════════════════════════════════════════════════════════ */

/* --- Layout générique des sections v2 ----------------------------------- */
.v2 {
  padding: clamp(64px, 10vh, 120px) 24px;
  position: relative;
}
.v2-bg-dark {
  background: var(--ledr-black);
  color: var(--ledr-white);
}
.v2-bg-light {
  background: var(--ledr-white);
  color: var(--ledr-black);
}
.v2-bg-yellow {
  background: var(--ledr-yellow);
  color: var(--ledr-black);
}
.v2-container {
  max-width: 1200px;
  margin: 0 auto;
}
.v2-container-narrow {
  max-width: 760px;
}

/* --- Eyebrow + headings v2 --------------------------------------------- */
.v2-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ledr-blue);
  margin: 0 0 16px;
}
.v2-eyebrow-light {
  color: var(--ledr-yellow);
}
.v2-h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 32px;
  color: inherit;
}
.v2-h1-aside {
  color: var(--ledr-yellow);
  font-style: italic;
  font-weight: 500;
}
.v2-h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 40px;
  color: inherit;
}
.v2-h2-massive {
  font-size: clamp(34px, 5.5vw, 60px);
  text-align: center;
}
.v2-h2-underline {
  border-bottom: 6px solid var(--ledr-black);
  padding-bottom: 2px;
}
.v2-bg-dark .v2-h2-underline {
  border-bottom-color: var(--ledr-yellow);
}

/* --- §1 HOOK ----------------------------------------------------------- */
.v2-hook {
  text-align: center;
  padding-top: clamp(80px, 14vh, 160px);
}
.v2-badge {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 32px;
  background: rgba(248, 231, 28, 0.12);
  border: 1px solid rgba(248, 231, 28, 0.35);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ledr-yellow);
}
.v2-before-after {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: center;
  max-width: 880px;
  margin: 48px auto 56px;
}
.v2-ba-card {
  padding: 28px 24px;
  border-radius: 12px;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 220px;
}
.v2-ba-before {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0.85;
}
.v2-ba-after {
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  border: 2px solid var(--ledr-yellow);
  box-shadow: 8px 8px 0 rgba(248, 231, 28, 0.25);
}
.v2-ba-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}
.v2-ba-quote {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.35;
  margin: 0;
  font-style: italic;
}
.v2-ba-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.v2-ba-after .v2-ba-meta {
  border-top-color: rgba(0, 0, 0, 0.15);
}
.v2-ba-grade {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  flex-shrink: 0;
}
.v2-ba-grade-d {
  background: var(--grade-d);
  color: var(--ledr-white);
}
.v2-ba-grade-a {
  background: var(--grade-a);
  color: var(--ledr-white);
}
.v2-ba-stat {
  font-size: 13px;
  line-height: 1.4;
}
.v2-ba-stat strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
}
.v2-ba-stat-detail {
  opacity: 0.65;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.v2-ba-arrow {
  color: var(--ledr-yellow);
  font-size: 28px;
  display: flex;
  align-items: center;
}
.v2-ba-arrow svg {
  width: 36px;
  height: 36px;
}
.v2-hook-cta {
  margin-top: 8px;
}
.v2-microcopy {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.65;
  margin-top: 18px;
}

/* --- Buttons v2 -------------------------------------------------------- */
.v2-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 14px 28px;
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  border: 2px solid var(--ledr-yellow);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: 6px 6px 0 var(--ledr-black);
  text-decoration: none;
  min-height: 52px;
}
.v2-btn-primary:hover:not(:disabled) {
  background: var(--ledr-yellow-hover);
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--ledr-black);
}
.v2-btn-primary:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ledr-black);
}
.v2-btn-massive {
  padding: 18px 36px;
  font-size: 17px;
  min-height: 60px;
}
.v2-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 12px 24px;
  background: transparent;
  color: var(--ledr-white);
  border: 2px solid var(--ledr-white);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  min-height: 48px;
}
.v2-btn-secondary:hover:not(:disabled) {
  background: var(--ledr-white);
  color: var(--ledr-black);
}
.v2-btn-on-yellow {
  border-color: var(--ledr-black);
  color: var(--ledr-black);
}
.v2-btn-on-yellow:hover:not(:disabled) {
  background: var(--ledr-black);
  color: var(--ledr-yellow);
}

/* --- §2 STORY ---------------------------------------------------------- */
.v2-story-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  align-items: start;
}
.v2-story-photo {
  text-align: center;
}
.v2-photo-placeholder {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--ledr-black);
  color: var(--ledr-yellow);
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  border: 4px solid var(--ledr-yellow);
  box-shadow: 6px 6px 0 var(--ledr-black);
}
.v2-photo-caption {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}
.v2-photo-caption small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  opacity: 0.6;
  margin-top: 2px;
}
.v2-story-quote {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  font-style: italic;
  margin: 0;
  padding: 0;
  border-left: 4px solid var(--ledr-yellow);
  padding-left: 28px;
}
.v2-story-quote p {
  margin: 0 0 16px;
}
.v2-story-quote p:last-child {
  margin-bottom: 0;
}
.v2-story-quote strong {
  font-style: normal;
  background: var(--ledr-yellow);
  padding: 0 6px;
}

/* Variante "solo" : sans photo placeholder, centrée, format pull-quote */
.v2-story-quote-solo {
  border-left: none;
  border-top: 4px solid var(--ledr-yellow);
  padding: 32px 0 0;
  text-align: left;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.5;
  max-width: 720px;
  margin: 0 auto;
}
.v2-story-attribution {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 24px auto 0;
}
.v2-story-attribution strong {
  color: var(--ledr-black);
  font-weight: 700;
}

/* --- §3 PROBLEM -------------------------------------------------------- */
.v2-problem {
  text-align: left;
}
.v2-problem .v2-h2 {
  text-align: center;
  margin-bottom: 56px;
}
.v2-problem-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 880px;
  margin: 0 auto;
}
.v2-problem-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: start;
  padding: 28px 24px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  border-left: 4px solid var(--ledr-yellow);
}
.v2-problem-num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--ledr-yellow);
  line-height: 1;
}
.v2-problem-text h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ledr-white);
}
.v2-problem-text p {
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.85;
  margin: 0;
}
.v2-problem-conclusion {
  text-align: center;
  margin-top: 56px;
}
.v2-problem-conclusion-arrow {
  font-size: 32px;
  color: var(--ledr-red);
  margin: 0 0 12px;
}
.v2-problem-conclusion-text {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 600;
  color: var(--ledr-white);
  background: var(--ledr-red);
  padding: 16px 28px;
  border-radius: 8px;
  line-height: 1.4;
  margin: 0;
}

/* --- §4 PIVOT (fond jaune signature) ----------------------------------- */
.v2-pivot {
  text-align: center;
}
.v2-pivot .v2-eyebrow {
  color: var(--ledr-black);
}
.v2-pivot-monkey {
  font-size: 56px;
  margin-bottom: 16px;
  letter-spacing: -10px;
}
.v2-meca-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 56px auto 40px;
  max-width: 1000px;
}
.v2-meca {
  text-align: left;
  padding: 28px 24px;
  background: var(--ledr-white);
  border: 2px solid var(--ledr-black);
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--ledr-black);
}
.v2-meca-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ledr-blue);
  display: block;
  margin-bottom: 12px;
}
.v2-meca h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.3;
  color: var(--ledr-black);
}
.v2-meca p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  color: var(--ledr-gray-dark);
}
.v2-meca code {
  background: var(--ledr-yellow);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}

/* --- §5 PROOF ---------------------------------------------------------- */
.v2-proof {
  text-align: center;
}
.v2-proof .v2-h2 {
  text-align: center;
}
.v2-mockup {
  margin: 0 auto 56px;
  max-width: 1100px;
}
.v2-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 880px;
  margin: 0 auto 64px;
}
.v2-stat {
  background: var(--ledr-offwhite);
  padding: 24px 18px;
  border-radius: 8px;
  text-align: center;
  border-top: 4px solid var(--border);
}
.v2-stat-major {
  background: var(--ledr-black);
  color: var(--ledr-white);
  border-top-color: var(--ledr-yellow);
  transform: translateY(-8px);
}
.v2-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
}
.v2-stat-major .v2-stat-num {
  color: var(--ledr-yellow);
}
.v2-stat-unit {
  font-size: 0.6em;
  margin-left: 2px;
}
.v2-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.75;
  display: block;
  line-height: 1.4;
}
.v2-stat-label small {
  font-size: 9px;
  opacity: 0.6;
}
.v2-vs-block {
  margin: 56px auto;
  max-width: 880px;
  text-align: center;
}
.v2-vs-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 12px;
}
.v2-vs-intro {
  font-style: italic;
  color: var(--muted);
  margin: 0 0 24px;
}
.v2-vs-conclusion {
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.45;
}
.v2-pullquote {
  margin: 64px auto 0;
  max-width: 720px;
  padding: 32px;
  background: var(--ledr-black);
  color: var(--ledr-yellow);
  border-radius: 8px;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-style: italic;
  line-height: 1.45;
}
.v2-pullquote cite {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 16px;
  color: rgba(248, 231, 28, 0.7);
}

/* --- §6 OFFER ---------------------------------------------------------- */
.v2-offer {
  text-align: center;
}
.v2-stack-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 32px;
  max-width: 600px;
  text-align: left;
}
.v2-stack-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 16px;
  line-height: 1.4;
}
.v2-stack-list li:last-child {
  border-bottom: 0;
}
.v2-stack-check {
  color: var(--ledr-yellow);
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}
.v2-offer-anchor {
  font-size: 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  margin: 24px auto 32px;
  max-width: 560px;
  line-height: 1.5;
}
.v2-offer-highlight {
  display: inline-block;
  padding: 24px 36px;
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  border-radius: 8px;
  margin-bottom: 32px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  box-shadow: 8px 8px 0 rgba(248, 231, 28, 0.3);
}
.v2-offer-highlight-big {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 700;
  letter-spacing: 0;
  margin-top: 6px;
  text-transform: none;
}
.v2-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}
.v2-form input,
.v2-form textarea {
  background: var(--ledr-white);
  color: var(--ledr-black);
  border: 2px solid var(--ledr-white);
  padding: 14px 16px;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}
.v2-form input:focus,
.v2-form textarea:focus {
  outline: none;
  border-color: var(--ledr-yellow);
}
.v2-form input:focus-visible,
.v2-form textarea:focus-visible {
  outline: 2px solid var(--ledr-yellow);
  outline-offset: 2px;
}
.v2-form textarea {
  resize: vertical;
  min-height: 64px;
}
.v2-form .v2-btn-primary {
  margin-top: 4px;
}
.v2-trust {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
  margin: 12px 0 0;
  line-height: 1.5;
}
.v2-login-secondary {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.v2-link {
  background: transparent;
  border: none;
  color: var(--ledr-yellow);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.v2-link:hover {
  color: var(--ledr-yellow-hover);
}
.v2-login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  margin: 16px auto 0;
}
.v2-login-form input {
  padding: 10px 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ledr-white);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
}
.v2-login-form input:focus {
  border-color: var(--ledr-yellow);
  outline: none;
}
.v2-login-form button {
  padding: 10px 20px;
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  border: none;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* --- §7 FAQ ------------------------------------------------------------ */
.v2-faq .v2-h2 {
  text-align: center;
  margin-bottom: 40px;
}
.v2-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v2-faq-item {
  background: var(--ledr-offwhite);
  border-radius: 8px;
  border-left: 4px solid var(--ledr-yellow);
  padding: 0;
  overflow: hidden;
  transition: background 0.15s ease;
}
.v2-faq-item[open] {
  background: var(--ledr-white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.v2-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 24px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  position: relative;
  padding-right: 48px;
}
.v2-faq-item summary::-webkit-details-marker { display: none; }
.v2-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--ledr-blue);
  transition: transform 0.2s ease;
}
.v2-faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.v2-faq-item p {
  margin: 0;
  padding: 0 24px 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ledr-gray-dark);
}
.v2-faq-item code {
  background: var(--ledr-yellow);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 13px;
}

/* --- Responsive v2 (≤900px = mobile/tablette portrait) ----------------- */
@media (max-width: 900px) {
  .v2 { padding: 64px 20px; }
  .v2-before-after {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .v2-ba-arrow {
    transform: rotate(90deg);
    justify-content: center;
  }
  .v2-story-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .v2-story-quote {
    border-left: none;
    border-top: 4px solid var(--ledr-yellow);
    padding-left: 0;
    padding-top: 24px;
    text-align: left;
  }
  .v2-meca-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .v2-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .v2-stat-major {
    transform: none;
  }
  .v2-problem-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .v2-problem-num {
    font-size: 32px;
  }
  .v2-pivot-monkey {
    font-size: 44px;
    letter-spacing: -8px;
  }
}

/* ============================================================ */
/* === ANTOINE BM 13 SECTIONS — extension du namespace .v2-* === */
/* ============================================================ */

/* --- §1 ATTENTION ----------------------------------------------------- */
.v2-attention {
  text-align: center;
  padding-top: clamp(80px, 14vh, 160px);
}
.v2-attention .v2-badge { margin-bottom: 32px; }

.v2-h1-mega {
  font-size: clamp(40px, 7.5vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 28px;
}
.v2-h1-strong {
  color: var(--ledr-yellow);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--ledr-yellow);
  text-decoration-thickness: 6px;
  text-underline-offset: 8px;
}
.v2-attention-sub {
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.6;
  margin: 24px auto 0;
  max-width: 600px;
  color: rgba(255, 255, 255, 0.78);
}

/* --- §2 PROBLÈME — équation ------------------------------------------ */
.v2-equation {
  margin: 0 0 56px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.v2-equation-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.v2-equation-cond {
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  text-align: right;
}
.v2-equation-cond strong {
  color: var(--ledr-yellow);
  font-weight: 700;
}
.v2-equation-eq {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--ledr-yellow);
  line-height: 1;
}
.v2-equation-result {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ledr-white);
}
.v2-equation-row-final {
  background: var(--ledr-yellow);
  border-color: var(--ledr-yellow);
}
.v2-equation-row-final .v2-equation-cond,
.v2-equation-row-final .v2-equation-cond strong {
  color: var(--ledr-black);
}
.v2-equation-row-final .v2-equation-eq {
  color: var(--ledr-black);
}
.v2-equation-final {
  color: var(--ledr-black) !important;
  font-size: clamp(24px, 3vw, 32px) !important;
}
.v2-problem-stack-compact {
  margin-top: 8px;
  gap: 28px;
}

/* --- §3 VRAI PROBLÈME ------------------------------------------------ */
.v2-vrai-problem {
  text-align: left;
}
.v2-h2-twist {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.08;
  margin-bottom: 36px;
}
.v2-h2-strike {
  text-decoration: line-through;
  text-decoration-color: var(--ledr-red, #E63946);
  text-decoration-thickness: 4px;
  color: var(--ledr-gray-dark);
  font-weight: 600;
}
.v2-vrai-problem-pivot {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 28px;
  color: var(--ledr-black);
}
.v2-vrai-problem-pivot strong {
  background: var(--ledr-yellow);
  padding: 2px 8px;
  font-weight: 700;
}
.v2-vrai-problem-detail {
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 28px;
  color: var(--ledr-gray-dark);
}
.v2-vrai-problem-detail strong { color: var(--ledr-black); font-weight: 700; }
.v2-vrai-problem-conclusion {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.4;
  font-weight: 500;
  padding: 24px 28px;
  border-left: 6px solid var(--ledr-yellow);
  background: rgba(248, 231, 28, 0.08);
  color: var(--ledr-black);
  margin: 0;
}
.v2-vrai-problem-conclusion strong { font-weight: 800; }

/* --- §4 SOLUTION + §8 URGENCE — wrapper CTA ------------------------- */
.v2-pivot-cta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  margin-top: 24px;
}
@media (min-width: 600px) {
  .v2-pivot-cta { flex-direction: row; justify-content: center; }
}

/* --- §4 SOLUTION ----------------------------------------------------- */
.v2-solution { text-align: center; }
.v2-solution-intro {
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.55;
  max-width: 620px;
  margin: 0 auto 32px;
  color: var(--ledr-black);
  font-weight: 500;
}
.v2-solution-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 36px;
  max-width: 620px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.v2-solution-list li {
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.5;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.06);
  border-left: 4px solid var(--ledr-black);
  color: var(--ledr-black);
}
.v2-solution-list li strong { font-weight: 800; }
.v2-solution-limit {
  font-size: 15px;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto 36px;
  padding: 18px 22px;
  background: rgba(0, 0, 0, 0.85);
  color: rgba(255, 255, 255, 0.92);
  text-align: left;
  border-radius: 4px;
}
.v2-solution-limit strong { color: var(--ledr-yellow); font-weight: 700; }
.v2-solution-limit em { color: var(--ledr-white); font-style: italic; }

.v2-btn-on-yellow-cta {
  background: var(--ledr-black);
  color: var(--ledr-yellow);
  border: 3px solid var(--ledr-black);
}
.v2-btn-on-yellow-cta:hover:not(:disabled) {
  background: var(--ledr-white);
  color: var(--ledr-black);
  border-color: var(--ledr-black);
  transform: translateY(-2px);
}

/* --- §5 RÉSULTATS R1 + R2 -------------------------------------------- */
.v2-resultats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 16px;
}
.v2-resultat-card {
  padding: 32px 28px;
  border-radius: 12px;
  border: 2px solid var(--ledr-black);
  background: var(--ledr-white);
  position: relative;
}
.v2-resultat-r1 { background: rgba(248, 231, 28, 0.18); }
.v2-resultat-r2 {
  background: var(--ledr-black);
  color: var(--ledr-white);
  border-color: var(--ledr-black);
}
.v2-resultat-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--ledr-black);
  color: var(--ledr-yellow);
  margin-bottom: 16px;
  font-weight: 600;
}
.v2-resultat-r2 .v2-resultat-tag {
  background: var(--ledr-yellow);
  color: var(--ledr-black);
}
.v2-resultat-card h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 0 0 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.v2-resultat-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v2-resultat-card li {
  font-size: 15px;
  line-height: 1.55;
  padding-left: 22px;
  position: relative;
}
.v2-resultat-card li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ledr-yellow);
  font-weight: 700;
}
.v2-resultat-r1 li::before { color: var(--ledr-black); }
.v2-resultat-card strong { font-weight: 700; }

/* --- §6 PREUVES — testimonial + stats on-dark ------------------------ */
.v2-testimonial-block {
  max-width: 760px;
  margin: 0 auto 48px;
  padding: 32px 28px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 4px solid var(--ledr-yellow);
  border-radius: 0 8px 8px 0;
}
.v2-testimonial-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ledr-yellow);
  margin: 0 0 16px;
  font-weight: 600;
}
.v2-testimonial-quote {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.55;
  margin: 0 0 18px;
  font-weight: 500;
  color: var(--ledr-white);
  font-style: italic;
}
.v2-testimonial-quote strong {
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  padding: 0 6px;
  font-weight: 700;
  font-style: normal;
}
.v2-testimonial-author {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}
.v2-testimonial-author strong { color: var(--ledr-white); font-weight: 700; }

.v2-stats-on-dark {
  margin-top: 48px;
  margin-bottom: 56px;
}
.v2-stats-on-dark .v2-stat {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* --- §7 SOMMAIRE — 10 mécaniques ------------------------------------ */
.v2-sommaire-intro {
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.55;
  margin: 0 0 36px;
  color: var(--ledr-gray-dark);
}
.v2-sommaire-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.v2-sommaire-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(0, 0, 0, 0.03);
  border-left: 3px solid var(--ledr-yellow);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ledr-gray-dark);
  align-items: start;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.v2-sommaire-list li:hover {
  background: rgba(248, 231, 28, 0.1);
  border-left-color: var(--ledr-black);
}
.v2-sommaire-list li strong {
  color: var(--ledr-black);
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}
.v2-sommaire-num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--ledr-blue);
  line-height: 1;
}

/* --- §8 URGENCE ------------------------------------------------------ */
.v2-urgence { text-align: center; }
.v2-h2-aside {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-top: 12px;
  color: var(--ledr-black);
  opacity: 0.75;
  font-style: italic;
}
.v2-urgence-text {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 18px;
  color: var(--ledr-black);
}
.v2-urgence-text strong { font-weight: 800; }
.v2-urgence-warning {
  display: inline-block;
  margin: 16px auto 32px;
  padding: 10px 18px;
  background: var(--ledr-black);
  color: var(--ledr-yellow);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: 600;
  border-radius: 4px;
}

/* --- §9 IMAGINATION — script chronologique --------------------------- */
.v2-imagination-script {
  margin: 0 0 32px;
  padding: 28px 24px;
  background: rgba(0, 0, 0, 0.03);
  border-left: 4px solid var(--ledr-blue);
  border-radius: 0 6px 6px 0;
}
.v2-imagination-script p {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 16px;
  color: var(--ledr-gray-dark);
}
.v2-imagination-script p:last-child { margin-bottom: 0; }
.v2-imagination-script p em {
  color: var(--ledr-black);
  font-style: italic;
  background: rgba(248, 231, 28, 0.25);
  padding: 1px 4px;
}
.v2-imagination-script p strong { color: var(--ledr-black); font-weight: 700; }
.v2-imagination-time {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ledr-blue);
  letter-spacing: 0.06em;
  background: var(--ledr-white);
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid var(--ledr-blue);
  min-width: 64px;
  text-align: center;
}
.v2-imagination-conclusion {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  margin: 32px 0 0;
  color: var(--ledr-black);
}
.v2-imagination-conclusion strong { font-weight: 800; }

/* --- §10 ANCRAGE — story + tableau de comparaison -------------------- */
.v2-h2-highlight {
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  padding: 0 12px;
  font-weight: 800;
  display: inline-block;
}
.v2-ancrage-story {
  margin: 0 0 36px;
  padding: 28px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
}
.v2-ancrage-story p {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.88);
}
.v2-ancrage-story p:last-child { margin-bottom: 0; }
.v2-ancrage-story strong { color: var(--ledr-yellow); font-weight: 700; }
.v2-ancrage-pivot {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 22px) !important;
  line-height: 1.45 !important;
  color: var(--ledr-white) !important;
  font-weight: 600;
  margin-top: 24px !important;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.v2-ancrage-pivot strong { color: var(--ledr-yellow); }

.v2-ancrage-comparison {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  overflow: hidden;
}
.v2-ancrage-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}
.v2-ancrage-line:last-child { border-bottom: none; }
.v2-ancrage-label {
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}
.v2-ancrage-label strong { color: var(--ledr-yellow); font-weight: 700; }
.v2-ancrage-price {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--ledr-white);
  white-space: nowrap;
}
.v2-ancrage-line-final {
  background: var(--ledr-yellow);
}
.v2-ancrage-line-final .v2-ancrage-label,
.v2-ancrage-line-final .v2-ancrage-label strong {
  color: var(--ledr-black);
}
.v2-ancrage-price-zero {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 4vw, 40px) !important;
  color: var(--ledr-black) !important;
  font-weight: 800;
}

/* --- §11 COMMENT — 5 étapes ----------------------------------------- */
.v2-comment-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.v2-comment-steps > li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: 24px 20px;
  background: rgba(0, 0, 0, 0.03);
  border-left: 4px solid var(--ledr-blue);
  align-items: start;
}
.v2-comment-num {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 800;
  color: var(--ledr-blue);
  line-height: 1;
  letter-spacing: -0.02em;
}
.v2-comment-steps > li h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ledr-black);
}
.v2-comment-steps > li p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  color: var(--ledr-gray-dark);
}
.v2-comment-steps > li strong { color: var(--ledr-black); font-weight: 700; }

/* --- §12 OBJECTIONS — réutilise .v2-faq-list/.v2-faq-item ----------- */
.v2-objections .v2-h2 { text-align: left; }

/* --- §13 TRANSITION (fond jaune, formulaire principal) -------------- */
.v2-transition { text-align: center; }
.v2-transition-text {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.5;
  margin: 0 0 28px;
  color: var(--ledr-black);
  font-weight: 500;
}
.v2-transition-tagline {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.4;
  font-weight: 600;
  font-style: italic;
  margin: 32px 0 36px;
  color: var(--ledr-black);
}
.v2-form-final {
  background: var(--ledr-white);
  padding: 28px;
  border-radius: 8px;
  border: 3px solid var(--ledr-black);
  box-shadow: 6px 6px 0 var(--ledr-black);
  max-width: 520px;
  margin: 0 auto;
}
.v2-trust-on-yellow {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ledr-gray-dark);
  margin: 12px 0 0;
  text-align: center;
}
.v2-login-on-yellow {
  margin-top: 32px;
  text-align: center;
}
.v2-link-on-yellow {
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ledr-black);
  cursor: pointer;
  padding: 6px 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 600;
}
.v2-link-on-yellow:hover {
  color: var(--ledr-blue);
}

/* --- Responsive Antoine BM ------------------------------------------ */
@media (max-width: 900px) {
  .v2-equation-row {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
    padding: 18px;
  }
  .v2-equation-cond { text-align: center; }
  .v2-equation-eq { font-size: 22px; }
  .v2-resultats-grid { grid-template-columns: 1fr; gap: 20px; }
  .v2-ancrage-line {
    grid-template-columns: 1fr;
    gap: 6px;
    text-align: left;
  }
  .v2-ancrage-price { font-size: 18px; }
  .v2-ancrage-price-zero { font-size: 32px !important; }
  .v2-comment-steps > li {
    grid-template-columns: 48px 1fr;
    gap: 14px;
    padding: 20px 16px;
  }
  .v2-comment-num { font-size: 34px; }
  .v2-sommaire-list li {
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 16px;
  }
  .v2-sommaire-num { font-size: 18px; }
  .v2-imagination-script { padding: 22px 18px; }
  .v2-imagination-time {
    display: block;
    margin: 0 0 6px;
    width: fit-content;
  }
  .v2-form-final {
    padding: 22px 18px;
    box-shadow: 4px 4px 0 var(--ledr-black);
  }
  .v2-h1-strong {
    text-decoration-thickness: 4px;
    text-underline-offset: 6px;
  }
  .v2-stats-on-dark { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .v2-stats-on-dark { grid-template-columns: 1fr; }
}

/* ============================================================ */
/* === V3 — Refonte landing (brutaliste éditorial)          === */
/* === Namespace .v3-* — utilise les tokens LEDR existants  === */
/* ============================================================ */

:root {
  --v3-ink: #1a1a1a;
  --v3-muted: #6b6b6b;
  --v3-line: #e6e6e2;
  --v3-paper: #f5f5f0;
}

/* --- Reset spécifique landing v3 (sans toucher au reste) -------- */
.v3-landing { font-family: var(--font-sans); color: var(--v3-ink); background: var(--ledr-white); }
.v3-landing *, .v3-landing *::before, .v3-landing *::after { box-sizing: border-box; }
.v3-landing h1, .v3-landing h2, .v3-landing h3, .v3-landing h4,
.v3-landing p, .v3-landing ul, .v3-landing ol { margin: 0; }
.v3-landing ul { padding: 0; list-style: none; }
.v3-landing img, .v3-landing svg { display: block; max-width: 100%; }

/* --- Logo LEDR — dimensionnement, hors @layer pour battre la cascade --- */
.brand-logo {
  height: 32px !important;
  width: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.v3-landing button { font: inherit; cursor: pointer; }
.v3-landing :focus-visible {
  outline: 3px solid var(--ledr-blue);
  outline-offset: 3px;
}

/* CRITIQUE : neutralise la règle legacy globale `section { ... }` (ligne 2374)
   qui leak des styles (border, border-radius, padding, box-shadow) sur toutes
   les sections v3. Sans ce reset, .v3-proof affiche un fond gris/beige hérité
   au lieu du noir, et les autres sections ont des bordures grises parasites.

   On utilise :where(.v3-landing) qui annule la spécificité du wrapper (0,0,0),
   pour que ce reset reste à la même spécificité que `section { ... }` legacy
   (0,0,1) — le reset gagne par ordre (défini après) sans pour autant écraser
   les classes .v3-* (0,1,0) qui doivent reprendre la main sur background, etc. */
:where(.v3-landing) section {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
/* Idem pour `section h2 { font-mono, 11px, opacity 0.55, uppercase, ... }`
   ligne 2392. :where(...) garde la spécificité à (0,0,2) pour battre le legacy
   sans écraser .v3-h2 (0,1,0). */
:where(.v3-landing) section :where(h1, h2, h3, h4) {
  text-transform: none;
  opacity: 1;
  margin: 0;
}

/* --- Primitives --- */
.v3-container {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 56px);
}
.v3-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ledr-blue);
}
.v3-eyebrow--on-dark { color: var(--ledr-yellow); }
.v3-eyebrow--on-yellow { color: var(--ledr-black); }

.v3-h1, .v3-h2, .v3-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--v3-ink);
}
.v3-h1 { font-size: clamp(40px, 6vw, 76px); }
.v3-h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.1; }
.v3-h3 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.2; }

.v3-lead {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--v3-muted);
  max-width: 56ch;
}

.v3-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 3px solid var(--ledr-black);
  background: var(--ledr-black);
  color: var(--ledr-white);
  border-radius: 0;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
.v3-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ledr-black);
}
.v3-btn:active { transform: translate(0, 0); box-shadow: none; }
.v3-btn--ghost {
  background: transparent;
  color: var(--ledr-black);
}
.v3-btn--ghost:hover { background: var(--ledr-black); color: var(--ledr-white); }
.v3-btn--yellow {
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  border-color: var(--ledr-black);
}
.v3-btn--yellow:hover { background: var(--ledr-black); color: var(--ledr-yellow); }

/* --- Barre tricolore signature LEDR --- */
.v3-tricolor {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  height: 6px;
  width: 100%;
}
.v3-tricolor > span:nth-child(1) { background: var(--ledr-yellow); }
.v3-tricolor > span:nth-child(2) { background: var(--ledr-red); }
.v3-tricolor > span:nth-child(3) { background: var(--ledr-blue); }

/* --- HEADER --- */
.v3-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ledr-white);
  border-bottom: 1px solid var(--v3-line);
}
.v3-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
}
.v3-brand {
  display: flex; align-items: baseline; gap: 10px;
  text-decoration: none; color: var(--ledr-black);
}
.v3-brand__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.v3-brand__sep { color: var(--v3-muted); }
.v3-brand__app {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v3-muted);
}
.v3-nav { display: flex; align-items: center; gap: 28px; }
.v3-nav__link {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--v3-ink);
}
.v3-nav__link:hover { color: var(--ledr-blue); }
/* Lien "Audit gratuit" dans la nav — légèrement mis en avant pour
   capter les prospects qui ne veulent pas s'inscrire directement. */
.v3-nav__link--audit {
  color: var(--ledr-black);
  font-weight: 600;
  border-bottom: 2px solid var(--ledr-yellow);
  padding-bottom: 1px;
}
.v3-nav__link--audit:hover {
  color: var(--ledr-black);
  background: var(--ledr-yellow);
}
.v3-nav__cta {
  padding: 10px 18px;
  border: 2px solid var(--ledr-black);
  background: var(--ledr-black);
  color: var(--ledr-white);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.v3-nav__cta:hover { background: #1a1a1a; }
/* Variante ghost : fond blanc, hover plein noir — pour "Se connecter" (user existant) */
.v3-nav__cta--ghost {
  background: transparent;
  color: var(--ledr-black);
}
.v3-nav__cta--ghost:hover {
  background: var(--ledr-black);
  color: var(--ledr-white);
}
@media (max-width: 720px) {
  .v3-nav__link { display: none; }
  /* Sur mobile, on garde les deux CTA visibles mais plus compacts */
  .v3-nav { gap: 10px; }
  .v3-nav__cta { padding: 8px 12px; font-size: 13px; }
}

/* --- §1 HERO --- */
.v3-hero {
  padding: clamp(48px, 8vh, 96px) 0 clamp(64px, 10vh, 120px);
  border-bottom: 1px solid var(--v3-line);
}
.v3-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 960px) { .v3-hero__grid { grid-template-columns: 1fr; } }
.v3-hero__eyebrow { margin-bottom: 24px; display: block; }
.v3-hero__h1 { margin-bottom: 24px; }
.v3-hero__h1 em {
  font-style: normal;
  background: var(--ledr-yellow);
  padding: 0 6px;
}
.v3-hero__lead { margin-bottom: 40px; max-width: 50ch; }
.v3-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.v3-hero__trust {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--v3-muted);
  letter-spacing: 0.04em;
}
.v3-hero__trust strong { color: var(--v3-ink); font-weight: 600; }

/* Mockup (statique, propre) */
.v3-mockup {
  background: var(--v3-paper);
  border: 3px solid var(--ledr-black);
  box-shadow: 8px 8px 0 var(--ledr-black);
  overflow: hidden;
}
.v3-mockup__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  background: var(--ledr-black);
  color: var(--ledr-white);
}
.v3-mockup__bar span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
}
.v3-mockup__bar small {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.7);
}
.v3-mockup__body { padding: 24px; }
.v3-mockup__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--v3-line);
  font-size: 14px;
}
.v3-mockup__row:last-of-type { border-bottom: 0; }
.v3-mockup__row span:first-child {
  font-family: var(--font-mono);
  color: var(--v3-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.v3-mockup__row strong { font-weight: 600; }
.v3-mockup__score {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 20px;
  padding: 18px;
  background: var(--ledr-black);
  color: var(--ledr-white);
}
.v3-mockup__badge {
  width: 72px; height: 72px;
  display: grid; place-items: center;
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.v3-mockup__score-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
}
.v3-mockup__score-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ledr-yellow);
  text-transform: uppercase;
  margin-top: 2px;
}

/* --- §2 STEPS --- */
.v3-steps { padding: clamp(64px, 10vh, 112px) 0; }
.v3-steps__head { max-width: 720px; margin-bottom: 56px; }
.v3-steps__head .v3-eyebrow { margin-bottom: 20px; display: block; }
.v3-steps__head .v3-h2 { margin-bottom: 16px; }

.v3-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 3px solid var(--ledr-black);
}
@media (max-width: 880px) { .v3-steps__grid { grid-template-columns: 1fr; } }
.v3-step {
  padding: 32px 28px;
  border-right: 1px solid var(--ledr-black);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.v3-step:last-child { border-right: 0; }
@media (max-width: 880px) {
  .v3-step { border-right: 0; border-bottom: 1px solid var(--ledr-black); }
  .v3-step:last-child { border-bottom: 0; }
}
.v3-step__num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ledr-blue);
}
.v3-step__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.v3-step__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--v3-muted);
}
.v3-step__body strong { color: var(--v3-ink); font-weight: 600; }

/* --- §3 VS CHATGPT --- */
.v3-vs {
  padding: clamp(64px, 10vh, 112px) 0;
  background: var(--v3-paper);
  border-top: 1px solid var(--v3-line);
  border-bottom: 1px solid var(--v3-line);
}
.v3-vs__head { max-width: 720px; margin-bottom: 48px; }
.v3-vs__head .v3-eyebrow { margin-bottom: 20px; display: block; }
.v3-vs__head .v3-h2 { margin-bottom: 16px; }
.v3-vs__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ledr-white);
  border: 3px solid var(--ledr-black);
}
.v3-vs__table th, .v3-vs__table td {
  padding: 18px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--v3-line);
  font-size: 15px;
}
.v3-vs__table tbody tr:last-child td { border-bottom: 0; }
.v3-vs__table thead th {
  background: var(--ledr-black);
  color: var(--ledr-white);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 0;
}
.v3-vs-them { color: var(--v3-muted); }
.v3-vs-us { font-weight: 600; }
.v3-vs-crit { font-weight: 600; }
.v3-vs__icon {
  display: inline-block;
  width: 18px;
  text-align: center;
  margin-right: 6px;
  font-weight: 700;
}
.v3-vs__icon--no { color: var(--ledr-red); }
.v3-vs__icon--yes { color: var(--ledr-blue); }
.v3-vs__note {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--v3-muted);
}

/* --- §4 METHOD --- */
.v3-method { padding: clamp(64px, 10vh, 112px) 0; }
.v3-method__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
@media (max-width: 880px) { .v3-method__head { grid-template-columns: 1fr; gap: 16px; } }
.v3-method__head .v3-eyebrow { margin-bottom: 16px; display: block; }
.v3-method__head .v3-h2 { max-width: 16ch; }
.v3-method__head p { color: var(--v3-muted); }

.v3-method__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 880px) { .v3-method__grid { grid-template-columns: 1fr; } }
.v3-stat-card {
  padding: 32px 28px;
  border: 2px solid var(--ledr-black);
  background: var(--ledr-white);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v3-stat-card--accent { background: var(--ledr-yellow); }
.v3-stat-card__num {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 92px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.v3-stat-card__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ledr-blue);
}
.v3-stat-card--accent .v3-stat-card__label { color: var(--ledr-black); }
.v3-stat-card__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--v3-muted);
}
.v3-stat-card--accent .v3-stat-card__body { color: var(--ledr-black); }

/* --- §5 PROOF --- */
.v3-proof {
  padding: clamp(72px, 12vh, 128px) 0;
  background: var(--ledr-black);
  color: var(--ledr-white);
}
.v3-proof__inner { max-width: 880px; margin: 0 auto; }
.v3-proof .v3-eyebrow { margin-bottom: 32px; display: block; }
.v3-proof__quote {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 32px;
  color: var(--ledr-white);
}
.v3-proof__quote em {
  font-style: normal;
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  padding: 0 8px;
}
.v3-proof__attr {
  display: flex; align-items: center; gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.v3-proof__attr-text {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}
.v3-proof__attr-text strong { color: var(--ledr-white); font-weight: 600; }
.v3-proof__caveat {
  margin-top: 32px;
  padding: 16px 20px;
  border-left: 3px solid var(--ledr-yellow);
  font-size: 13px;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
}

/* --- §6 FAQ --- */
.v3-faq { padding: clamp(64px, 10vh, 112px) 0; }
.v3-faq__head { max-width: 720px; margin-bottom: 48px; }
.v3-faq__head .v3-eyebrow { margin-bottom: 20px; display: block; }
.v3-faq__list {
  max-width: 880px;
  border-top: 1px solid var(--ledr-black);
}
.v3-faq__item { border-bottom: 1px solid var(--ledr-black); }
.v3-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v3-ink);
}
.v3-faq__item summary::-webkit-details-marker { display: none; }
.v3-faq__item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  color: var(--ledr-blue);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 2px solid var(--ledr-blue);
  transition: transform 0.2s ease;
}
.v3-faq__item[open] summary::after {
  content: "–";
  background: var(--ledr-blue);
  color: var(--ledr-white);
}
.v3-faq__item > p {
  padding: 0 0 24px 0;
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--v3-muted);
}
.v3-faq__item strong { color: var(--v3-ink); font-weight: 600; }

/* --- §7 CTA FINAL --- */
.v3-cta-final {
  background: var(--ledr-yellow);
  color: var(--ledr-black);
  padding: clamp(72px, 12vh, 128px) 0;
  border-top: 3px solid var(--ledr-black);
  border-bottom: 3px solid var(--ledr-black);
}
.v3-cta-final__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 880px) { .v3-cta-final__grid { grid-template-columns: 1fr; } }
.v3-cta-final .v3-eyebrow { margin-bottom: 20px; color: var(--ledr-black); display: block; }
.v3-cta-final .v3-h2 { margin-bottom: 20px; max-width: 14ch; color: var(--ledr-black); }
.v3-cta-final__lead {
  font-size: 17px;
  line-height: 1.6;
  max-width: 48ch;
  color: var(--ledr-black);
}
.v3-cta-final__lead strong { font-weight: 600; }

.v3-form-card {
  background: var(--ledr-white);
  border: 3px solid var(--ledr-black);
  box-shadow: 8px 8px 0 var(--ledr-black);
  padding: 28px;
}
.v3-form-card label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ledr-blue);
  margin-bottom: 8px;
}
.v3-form-card input,
.v3-form-card textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 16px;
  border: 2px solid var(--ledr-black);
  background: var(--ledr-white);
  color: var(--v3-ink);
  margin-bottom: 20px;
  border-radius: 0;
  transition: border-color 0.15s ease;
}
.v3-form-card input:focus,
.v3-form-card textarea:focus {
  outline: none;
  border-color: var(--ledr-blue);
}
.v3-form-card textarea { resize: vertical; min-height: 84px; }
.v3-form-card button[type="submit"] {
  width: 100%;
  padding: 16px 24px;
  background: var(--ledr-black);
  color: var(--ledr-yellow);
  border: 2px solid var(--ledr-black);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.v3-form-card button[type="submit"]:hover {
  background: var(--ledr-yellow);
  color: var(--ledr-black);
}
.v3-form-card__trust {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--v3-muted);
  line-height: 1.6;
}
.v3-form-card__login {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--v3-line);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--v3-muted);
  text-align: center;
}
.v3-form-card__login button.v3-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ledr-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
  cursor: pointer;
}
.v3-form-card__login-form {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v3-form-card__login-form input {
  margin-bottom: 0;
  padding: 12px 14px;
  font-size: 14px;
}
.v3-form-card__login-form button[type="submit"] {
  padding: 12px 20px;
  font-size: 14px;
}
.v3-form-card__login-error {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ledr-red);
  min-height: 16px;
}
.v3-form-card__access-status {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--v3-ink);
  line-height: 1.5;
}
.v3-form-card__access-status:empty { display: none; }

/* --- FOOTER --- */
.v3-footer {
  background: var(--ledr-black);
  color: var(--ledr-white);
  padding: 48px 0 32px;
}
.v3-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.v3-footer__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.v3-footer__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.6);
}
.v3-footer__meta a {
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 16px;
}