/* ==========================================================================
   landing.css — Styles landing page Mon Ecrin v2
   Polices self-hosted, palette "violet creme", scopees .landing-v2
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. @font-face — Polices hebergees localement (jamais de CDN)
   -------------------------------------------------------------------------- */

/* Instrument Serif — Regular, latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/instrument-serif/InstrumentSerif-Regular-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Instrument Serif — Regular, latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/instrument-serif/InstrumentSerif-Regular-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Instrument Serif — Italic, latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/instrument-serif/InstrumentSerif-Italic-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Instrument Serif — Italic, latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/instrument-serif/InstrumentSerif-Italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Sans — Variable 400-600, latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/vendor/dm-sans/DMSans-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* DM Sans — Variable 400-600, latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/vendor/dm-sans/DMSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Design tokens — Palette "violet creme"
   -------------------------------------------------------------------------- */

:root {
  /* Couleurs */
  --bg: #faf7f2;
  --bg-2: #f2ebe0;
  --paper: #ffffff;
  --ink: #1a1b2e;
  --ink-2: #2a2c45;
  --muted: #645e54;
  --line: #e6ded0;
  --accent: #5d3ff3;
  --accent-ink: #1a0b66;
  --accent-soft: #ede7ff;
  --accent-fg: #ffffff;

  /* Touches chaleureuses, or ambré & bleu souverain lumineux */
  --amber-gold: #d97706;
  --amber-gold-soft: #fef3c7;
  --amber-gold-ink: #78350f;
  --amber-glow: rgba(217, 119, 6, 0.12);
  --sovereign-blue: #1d4ed8;
  --sovereign-blue-soft: #eff6ff;
  --sovereign-blue-ink: #1e3a8a;
  --emerald-safe: #059669;
  --emerald-safe-soft: #ecfdf5;
  --emerald-safe-ink: #064e3b;
  --card-shadow: 0 4px 20px -2px rgba(45, 35, 20, 0.05), 0 2px 6px -1px rgba(45, 35, 20, 0.03);
  --card-shadow-hover: 0 16px 36px -4px rgba(93, 63, 243, 0.12), 0 6px 18px -2px rgba(217, 119, 6, 0.08);
  --btn-shadow: 0 6px 18px -4px rgba(93, 63, 243, 0.35);
  --btn-shadow-hover: 0 10px 26px -4px rgba(93, 63, 243, 0.45);

  /* Signature tricolore discrete — France */
  --tricolor-stripe: linear-gradient(90deg, #002395 0%, #002395 33.33%, #ffffff 33.33%, #ffffff 66.66%, #ed2939 66.66%, #ed2939 100%);
  --tricolor-soft: linear-gradient(90deg, rgba(0, 35, 149, 0.7) 0%, rgba(255, 255, 255, 0.9) 33.33%, rgba(255, 255, 255, 0.9) 66.66%, rgba(237, 41, 57, 0.7) 100%);

  /* Illustrations — INVARIANTES par theme.
     Ce ne sont pas des couleurs d'interface mais des objets dessines : le drapeau
     francais (couleurs officielles), l'ecran de la maquette telephone et ses tuiles
     de photos factices. Elles ne suivent ni le clair ni le sombre, et n'ont donc
     volontairement pas d'equivalent dans le bloc [data-theme="dark"]. */
  --illus-flag-blue: #002395;
  --illus-flag-white: #ffffff;
  --illus-flag-red: #ed2939;
  --illus-screen: #0a0a0a;
  --illus-tile-1: #d8cdb8;
  --illus-tile-2: #b7a886;
  --illus-tile-3: #8a7e64;
  /* Halo radial derriere le titre : l'accent landing en tres faible opacite. */
  --accent-glow: rgba(93, 63, 243, 0.08);
  /* Fond de l'en-tete collant : le fond de page a peine transparent, pour laisser
     deviner le contenu qui defile dessous. Compose a partir de --bg, donc thematique
     sans declinaison sombre propre. */
  --bg-sticky: color-mix(in oklab, var(--bg) 92%, transparent);
  /* Bandeau fin tout en haut (« Stockage souverain · hébergé en France »). INVARIANT :
     c'est du chrome de page, pas un élément de contenu. Il utilisait var(--ink) comme FOND
     et var(--paper) comme encre — un couple qui S'INVERSE avec le thème : en sombre, la
     barre devenait CLAIRE au-dessus d'une page sombre, ce qui la faisait lire comme un
     morceau non converti. Vérifié à l'écran. Les autres usages de ce couple (bouton
     primaire, carte de tarif mise en avant, bandeau d'appel à l'action) gardent
     l'inversion : pour eux, elle est voulue — un aplat clair sur page sombre y est
     exactement l'effet recherché. */
  --topbar-bg: #1a1b2e;
  --topbar-ink: #f9f5ec;

  /* Echelle typographique */
  --t-display: clamp(38px, 4.2vw, 66px);
  --t-h2: clamp(38px, 4vw, 58px);
  --t-h3: clamp(22px, 1.6vw, 28px);
  --t-body: clamp(16px, 1.1vw, 18px);
  --t-small: 14px;
  --t-eyebrow: 12px;

  /* Espacement */
  --pad-x: clamp(20px, 5vw, 80px);
  --container: 1280px;

  /* Rayons */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 22px;
  --r-xl: 32px;
}

/* Variante sombre de la palette « violet creme ».
   ------------------------------------------------------------------------
   Le monde public GARDE SON IDENTITE : il ne bascule pas sur les tokens
   --sv-* de l'application (indigo/blanc), il obtient sa PROPRE declinaison
   sombre — un brun-violet nuit qui prolonge le creme, la ou l'application
   vire au bleu-gris. Deux systemes de couleur assumes, un seul interrupteur.

   C'est le meme selecteur [data-theme] que theme.css, pose par le serveur sur
   <html> : ces pages chargent desormais theme.css (avant landing.css) pour que
   les tokens --sv-* des ombres et voiles s'y resolvent, mais leur palette de
   base reste celle-ci.

   Ratios mesures, tous au niveau de leurs equivalents clairs : ink 14,90:1
   (clair 14,52), muted 6,51:1 (5,89), accent 8,34:1 (5,19),
   accent-ink 10,86:1 sur accent-soft (13,50). */
:root[data-theme="dark"] {
  --bg: #15131c;
  --bg-2: #1c1926;
  --paper: #221e30;
  --ink: #f5f0e6;
  --ink-2: #dfd7c8;
  --muted: #a69c8e;
  --line: #383244;
  --accent: #b9a5ff;
  --accent-ink: #e5dcff;
  --accent-soft: #2f2554;
  --accent-fg: #14101f;
  --amber-gold: #fbbf24;
  --amber-gold-soft: #382d14;
  --amber-gold-ink: #fef3c7;
  --amber-glow: rgba(251, 191, 36, 0.15);
  --sovereign-blue: #60a5fa;
  --sovereign-blue-soft: #172554;
  --sovereign-blue-ink: #dbeafe;
  --emerald-safe: #34d399;
  --emerald-safe-soft: #064e3b;
  --emerald-safe-ink: #d1fae5;
  --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.35);
  --card-shadow-hover: 0 16px 36px -4px rgba(185, 165, 255, 0.18), 0 6px 18px -2px rgba(251, 191, 36, 0.08);
  --btn-shadow: 0 6px 18px -4px rgba(185, 165, 255, 0.3);
  --btn-shadow-hover: 0 10px 26px -4px rgba(185, 165, 255, 0.4);
  --tricolor-stripe: linear-gradient(90deg, #2563eb 0%, #2563eb 33.33%, #ffffff 33.33%, #ffffff 66.66%, #ef4444 66.66%, #ef4444 100%);
  --tricolor-soft: linear-gradient(90deg, rgba(37, 99, 235, 0.7) 0%, rgba(255, 255, 255, 0.9) 33.33%, rgba(255, 255, 255, 0.9) 66.66%, rgba(239, 68, 68, 0.7) 100%);
}

/* --------------------------------------------------------------------------
   3a. Reset & base
   -------------------------------------------------------------------------- */

.landing-v2 *,
.landing-v2 *::before,
.landing-v2 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.landing-v2 {
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.landing-v2 img {
  max-width: 100%;
  height: auto;
  display: block;
}

.landing-v2 a {
  color: inherit;
  text-decoration: none;
}

.landing-v2 button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* --------------------------------------------------------------------------
   3b. Container
   -------------------------------------------------------------------------- */

.landing-v2 .container {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* --------------------------------------------------------------------------
   3c. Top-bar annonce (drapeau tricolore)
   -------------------------------------------------------------------------- */

.landing-v2 .top-bar {
  background: var(--topbar-bg);
  color: var(--topbar-ink);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px var(--pad-x);
  text-align: center;
  line-height: 1.4;
}

.landing-v2 .top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.landing-v2 .flag-fr,
.landing-v2 .tricolor {
  display: inline-flex;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--sv-scrim-control);
}

.landing-v2 .flag-fr i,
.landing-v2 .tricolor i {
  flex: 1;
  display: block;
}

.landing-v2 .flag-fr i:nth-child(1),
.landing-v2 .tricolor i:nth-child(1) { background: var(--illus-flag-blue); }
.landing-v2 .flag-fr i:nth-child(2),
.landing-v2 .tricolor i:nth-child(2) { background: var(--illus-flag-white); }
.landing-v2 .flag-fr i:nth-child(3),
.landing-v2 .tricolor i:nth-child(3) { background: var(--illus-flag-red); }

.landing-v2 .top-bar a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--sv-scrim-control);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 14px;
  /* --topbar-ink et non --paper : ce lien est posé sur la barre, dont le fond est INVARIANT.
     Avec --paper il devenait sombre sur sombre — texte invisible, ne restait que la pastille
     bordée. Vu à l'écran, apparu en corrigeant le fond : ne jamais toucher le fond d'un bloc
     sans son texte. */
  color: var(--topbar-ink);
  transition: border-color 0.2s;
}

.landing-v2 .top-bar a:hover {
  border-color: var(--sv-scrim-border);
}

/* --------------------------------------------------------------------------
   3d. Header (sticky, verre depoli)
   -------------------------------------------------------------------------- */

.landing-v2 .header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg-sticky);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  height: 70px;
}

.landing-v2 .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.landing-v2 .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
}

.landing-v2 .brand-logo {
  width: 32px;
  height: 32px;
  display: block;
}

.landing-v2 .nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.landing-v2 .nav a {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.2s;
}

.landing-v2 .nav a:hover {
  color: var(--accent);
}

.landing-v2 .nav a.active {
  color: var(--accent);
  font-weight: 600;
}

.landing-v2 .header-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Selecteur de langue dropdown */
.landing-v2 .lang {
  position: relative;
  display: inline-flex;
}

.landing-v2 .lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s;
  text-decoration: none;
}

.landing-v2 .lang-toggle:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.landing-v2 .lang-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px -8px var(--sv-shadow-color-1);
  list-style: none;
  padding: 6px 0;
  min-width: 140px;
  z-index: 40;
}

.landing-v2 .lang:hover .lang-menu {
  display: block;
}

.landing-v2 .lang-menu li a {
  display: block;
  padding: 6px 16px;
  font-size: 13px;
  color: var(--ink-2);
  transition: background 0.15s, color 0.15s;
}

.landing-v2 .lang-menu li a:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.landing-v2 .lang-menu li a.lang-active {
  font-weight: 600;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   3e. Boutons
   -------------------------------------------------------------------------- */

.landing-v2 .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.15s;
}

.landing-v2 .btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  box-shadow: var(--btn-shadow);
}

.landing-v2 .btn-primary:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: var(--accent-fg);
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover);
}

.landing-v2 .btn-secondary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--card-shadow);
}

.landing-v2 .btn-secondary:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

.landing-v2 .btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: transparent;
}

.landing-v2 .btn-ghost:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
  transform: translateY(-2px);
}

.landing-v2 .btn-sm {
  padding: 10px 18px;
  font-size: 14px;
}

.landing-v2 .btn .arrow {
  display: inline-block;
  transition: transform 0.2s;
}

.landing-v2 .btn:hover .arrow {
  transform: translateX(3px);
}

/* ── Installation Android : bouton, QR, bandeau (pages publiques) ─────────────── */
.landing-v2 .btn-android {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  box-shadow: 0 8px 24px -8px var(--accent);
}

.landing-v2 .btn-android:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

.landing-v2 .btn-android svg { flex-shrink: 0; }

/* Étape 1 « Installer » : CTA + QR code côte à côte */
.landing-v2 .step-install {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
}

.landing-v2 .step-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.landing-v2 .step-qr img {
  border-radius: 8px;
  background: var(--paper);
  padding: 4px;
  border: 1px solid var(--line);
}

.landing-v2 .step-qr figcaption {
  font-size: 12px;
  color: var(--muted);
}

/* Bandeau d'incitation Android (autonome : la landing ne charge pas style.css) */
.landing-v2 .download-banner {
  background: var(--sv-panel-dark-gradient);
  color: var(--sv-navbar-ink);
  padding: 0.6rem 2.75rem 0.6rem 1rem;
  text-align: center;
  position: relative;
}

.landing-v2 .download-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.landing-v2 .download-banner-icon { flex-shrink: 0; }

.landing-v2 .download-banner-text { font-size: 0.95rem; font-weight: 500; }

.landing-v2 .download-banner-btn {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--sv-navbar-ink);
  padding: 8px 16px;
  font-size: 14px;
}

.landing-v2 .download-banner-btn:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent-soft);
}

.landing-v2 .download-banner .support-banner-close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--sv-scrim-ink-strong);
  cursor: pointer;
  padding: 0.2rem;
  line-height: 1;
  display: inline-flex;
}

.landing-v2 .download-banner .support-banner-close:hover { color: var(--sv-navbar-ink); }

/* Bouton inversé (sur fond sombre) */
.landing-v2 .btn-primary-inv {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
  box-shadow: 0 1px 0 var(--sv-shadow-color-7), 0 8px 24px -8px var(--sv-shadow-color-4);
}

.landing-v2 .btn-primary-inv:hover {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--accent-ink);
}

.landing-v2 .btn-secondary-inv {
  background: transparent;
  color: var(--paper);
  border-color: var(--sv-scrim-control-active);
}

.landing-v2 .btn-secondary-inv:hover {
  border-color: var(--sv-scrim-border);
}

/* --------------------------------------------------------------------------
   3f. Hero — Grille 2 colonnes
   -------------------------------------------------------------------------- */

.landing-v2 .hero {
  position: relative;
  padding-top: clamp(16px, 2.5vw, 36px);
  padding-bottom: clamp(40px, 5vw, 72px);
  background: radial-gradient(ellipse at 50% 0%, var(--amber-glow) 0%, var(--accent-glow) 40%, transparent 75%);
}

.landing-v2 .hero-inner {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: flex-start;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* Colonne texte */
.landing-v2 .hero-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.landing-v2 .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  padding: 6px 16px;
  border-radius: 999px;
  width: fit-content;
  box-shadow: 0 2px 8px var(--accent-glow);
}

.landing-v2 .hero h1,
.landing-v2 h1.display {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.landing-v2 .hero h1 em,
.landing-v2 h1.display em {
  font-style: italic;
  color: var(--accent);
  position: relative;
  display: inline-block;
}

.landing-v2 .lede {
  font-size: clamp(17px, 1.3vw, 20px);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 540px;
}

.landing-v2 .hero-values {
  max-width: 500px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-v2 .hero-values li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.landing-v2 .hero-values li:hover {
  transform: translateX(4px);
  border-color: var(--accent);
  box-shadow: var(--card-shadow-hover);
}

.landing-v2 .hero-values li svg {
  background: var(--amber-gold-soft);
  color: var(--amber-gold);
  border-radius: 50%;
  padding: 3px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  box-shadow: 0 2px 6px var(--amber-glow);
}

.landing-v2 .hero-values strong {
  display: block;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}

.landing-v2 .hero-values span {
  display: block;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 2px;
}

.landing-v2 .hero-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.landing-v2 .hero-cta .btn {
  height: 48px;
  padding: 12px 20px;
  font-size: 14.5px;
  font-weight: 600;
}

.landing-v2 .hero-cta .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  box-shadow: var(--btn-shadow);
}

.landing-v2 .hero-cta .btn-primary:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: var(--accent-fg);
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover);
}

.landing-v2 .hero-cta .btn-secondary {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--card-shadow);
}

.landing-v2 .hero-cta .btn-secondary:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

.landing-v2 .hero-cta .btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
}

.landing-v2 .hero-cta .btn-ghost:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
  transform: translateY(-2px);
}

.landing-v2 .hero-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  background: var(--amber-gold-soft);
  color: var(--amber-gold-ink);
  padding: 5px 14px;
  border-radius: 999px;
  width: fit-content;
  border: 1px solid var(--line);
  box-shadow: 0 1px 4px var(--amber-glow);
}

.landing-v2 .hero-note svg {
  color: var(--amber-gold);
  flex-shrink: 0;
}

/* Colonne visuelle */
.landing-v2 .hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  padding-top: 8px;
}

/* Halo radial derriere les telephones */
.landing-v2 .hero-visual::before {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   3g. Phone mockup
   -------------------------------------------------------------------------- */

.landing-v2 .phone {
  position: relative;
  width: 280px;
  aspect-ratio: 9 / 19.5;
  background: var(--illus-screen);
  border-radius: 42px;
  padding: 8px;
  box-shadow:
    0 1px 0 var(--sv-scrim-ink-faint) inset,
    0 30px 70px -20px var(--sv-shadow-color-5),
    0 10px 30px -8px var(--sv-shadow-color-1);
  z-index: 2;
}

.landing-v2 .phone-main {
  transform: rotate(-4deg);
  z-index: 2;
}

.landing-v2 .phone-secondary {
  transform: rotate(4deg);
  width: 240px;
  position: absolute;
  right: -5%;
  top: 8%;
  z-index: 1;
}

.landing-v2 .phone-notch {
  width: 80px;
  height: 24px;
  background: var(--illus-screen);
  border-radius: 0 0 18px 18px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.landing-v2 .phone-header {
  padding: 40px 16px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.landing-v2 .phone-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 18px;
  color: var(--ink);
  width: 100%;
}

.landing-v2 .phone-subtitle {
  font-size: 11px;
  color: var(--muted);
}

.landing-v2 .phone-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  margin-left: auto;
  border: 1px solid var(--line);
}

.landing-v2 .chip-saved {
  background: var(--emerald-safe-soft);
  color: var(--emerald-safe-ink);
  border-color: var(--emerald-safe-soft);
}

.landing-v2 .chip-sync {
  background: var(--amber-gold-soft);
  color: var(--amber-gold-ink);
  border-color: var(--amber-gold-soft);
}

/* Grille photos dans le telephone */
.landing-v2 .phone-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 0 4px;
  flex: 1;
  overflow: hidden;
  align-content: start;
}

.landing-v2 .phone-grid .tile {
  aspect-ratio: 1;
  border-radius: 6px;
}

.landing-v2 .phone-grid .tile-1 { background: var(--illus-tile-1); }
.landing-v2 .phone-grid .tile-2 { background: var(--illus-tile-2); }
.landing-v2 .phone-grid .tile-3 { background: var(--illus-tile-3); }
.landing-v2 .phone-grid .tile-accent { background: var(--accent-soft); }

/* Tuile avec image de fond */
.landing-v2 .phone-grid .tile-img {
  aspect-ratio: 1;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  transition: transform 0.25s ease;
}

.landing-v2 .phone-grid .tile-img:hover {
  transform: scale(1.05);
  z-index: 2;
}

/* Barre de stockage en bas du telephone */
.landing-v2 .phone-bar {
  padding: 10px 12px 16px;
  font-size: 10px;
  color: var(--muted);
}

.landing-v2 .phone-bar-track {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}

.landing-v2 .phone-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}

.landing-v2 .phone-bar-label {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   3h. Cartes flottantes
   -------------------------------------------------------------------------- */

.landing-v2 .float-card {
  position: absolute;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--card-shadow);
  z-index: 10;
  font-size: 13px;
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}

.landing-v2 .float-card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: var(--accent);
}

.landing-v2 .float-card .fc-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
  box-shadow: 0 2px 6px var(--accent-glow);
}

.landing-v2 .float-card-encrypt .fc-icon {
  background: var(--amber-gold-soft);
  color: var(--amber-gold);
  box-shadow: 0 2px 6px var(--amber-glow);
}

.landing-v2 .float-card-host .fc-icon {
  background: var(--sovereign-blue-soft);
  color: var(--sovereign-blue);
  box-shadow: 0 2px 6px var(--accent-glow);
}

.landing-v2 .float-card .fc-label {
  font-weight: 600;
  color: var(--ink);
}

.landing-v2 .float-card .fc-sub {
  font-size: 12px;
  color: var(--muted);
}

.landing-v2 .float-card-encrypt {
  top: 10%;
  right: -4%;
}

.landing-v2 .float-card-host {
  bottom: 14%;
  left: -6%;
  overflow: hidden;
  position: absolute;
}

.landing-v2 .float-card-host::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tricolor-stripe);
}

/* --------------------------------------------------------------------------
   3i. Trust strip (chiffres cles)
   -------------------------------------------------------------------------- */

.landing-v2 .trust-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  padding: clamp(32px, 3.5vw, 48px) 0;
  box-shadow: var(--card-shadow);
  position: relative;
}

.landing-v2 .trust-strip-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.landing-v2 .trust-item {
  text-align: center;
  padding: 10px 18px;
  position: relative;
  transition: transform 0.2s ease;
}

.landing-v2 .trust-item:hover {
  transform: translateY(-2px);
}

/* Separateur vertical entre items */
.landing-v2 .trust-item + .trust-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--line);
}

.landing-v2 .trust-big {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
  display: block;
}

.landing-v2 .trust-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.03em;
  margin-top: 4px;
  display: block;
}


/* --------------------------------------------------------------------------
   3j. Sections generales
   -------------------------------------------------------------------------- */

.landing-v2 section {
  padding: clamp(80px, 10vw, 140px) 0;
}

.landing-v2 .section-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(48px, 5vw, 72px);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.landing-v2 .section-heading em {
  font-style: italic;
  color: var(--accent);
}

.landing-v2 .section-lede {
  text-align: center;
  max-width: 600px;
  margin: -24px auto clamp(48px, 5vw, 72px);
  color: var(--ink-2);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   3k. How it works (etapes)
   -------------------------------------------------------------------------- */

.landing-v2 .steps-inner,
.landing-v2 .pricing-inner,
.landing-v2 .bottom-cta-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.landing-v2 .steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.landing-v2 .step-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 36px 32px;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.landing-v2 .step-num-row {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.landing-v2 .step-number {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 48px;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
}

.landing-v2 .step-label {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.landing-v2 .step h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}

.landing-v2 .step p {
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: 1.6;
}

/* Mini-telephone dans les cartes etapes */
.landing-v2 .step .mini-phone {
  width: 150px;
  aspect-ratio: 9 / 19.5;
  background: var(--illus-screen);
  border-radius: 28px;
  padding: 5px;
  margin-top: auto;
  box-shadow: 0 16px 30px -10px var(--sv-shadow-color-5);
}

.landing-v2 .step .mini-phone .mini-screen {
  width: 100%;
  height: 100%;
  background: var(--paper);
  border-radius: 23px;
  overflow: hidden;
}

.landing-v2 .step-phone {
  width: 150px;
  aspect-ratio: 9 / 19.5;
  background: var(--illus-screen);
  border-radius: 28px;
  padding: 5px;
  margin: auto auto 0;
  box-shadow: 0 16px 30px -10px var(--sv-shadow-color-5);
  position: relative;
  overflow: hidden;
}

.landing-v2 .step-phone-notch {
  width: 52px;
  height: 12px;
  background: var(--illus-screen);
  border-radius: 999px;
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.landing-v2 .step-phone-body {
  width: 100%;
  height: 100%;
  background: var(--paper);
  border-radius: 23px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 10px 10px;
}

.landing-v2 .step-pill {
  font-size: 9px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  letter-spacing: 0.04em;
  font-weight: 600;
}

.landing-v2 .step-pill-done {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.landing-v2 .step-progress {
  width: 80%;
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.landing-v2 .step-progress-fill {
  height: 100%;
  width: 30%;
  background: var(--accent);
  border-radius: 999px;
}

.landing-v2 .step-progress-full {
  width: 100%;
}

.landing-v2 .step-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: var(--muted);
  width: 100%;
  padding: 0 6px;
}

.landing-v2 .step-toggle-dot {
  width: 22px;
  height: 12px;
  background: var(--line);
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
}

.landing-v2 .step-toggle-dot.active {
  background: var(--accent);
}

.landing-v2 .step-toggle-dot::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 2px;
  width: 8px;
  height: 8px;
  background: var(--paper);
  border-radius: 50%;
}

.landing-v2 .step-toggle-dot.active::after {
  right: auto;
  left: 2px;
}

.landing-v2 .step-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  width: 80%;
}

.landing-v2 .step-mini-grid span {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--bg-2);
}

.landing-v2 .step-mini-grid span:nth-child(3n+1) { background: var(--illus-tile-1); }
.landing-v2 .step-mini-grid span:nth-child(3n+2) { background: var(--illus-tile-2); }
.landing-v2 .step-mini-grid span:nth-child(3n) { background: var(--accent); opacity: 0.6; }

.landing-v2 .plan-storage {
  font-size: 14px;
  color: var(--ink-2);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.landing-v2 .plan.featured .plan-storage {
  color: var(--sv-scrim-ink-dim);
  border-color: var(--sv-scrim-control);
}

.landing-v2 .plan.featured .plan-tag {
  color: var(--sv-scrim-ink-dim);
}

.landing-v2 .pricing-note {
  margin-top: 36px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   3l. Pricing
   -------------------------------------------------------------------------- */

.landing-v2 .pricing {
  background: var(--bg-2);
}

.landing-v2 .pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.landing-v2 .plan {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}

.landing-v2 .plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -16px var(--sv-shadow-color-7);
}

/* Offre mise en avant */
.landing-v2 .plan.featured {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.landing-v2 .plan.featured .plan-label,
.landing-v2 .plan.featured .plan-price-unit,
.landing-v2 .plan.featured .plan-desc,
.landing-v2 .plan.featured .feature-text {
  color: var(--sv-scrim-ink-dim);
}

.landing-v2 .plan.featured .plan-name,
.landing-v2 .plan.featured .plan-price {
  color: var(--paper);
}

/* Badge pill "Populaire" */
.landing-v2 .plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.landing-v2 .plan-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.landing-v2 .plan-label,
.landing-v2 .plan-tag {
  font-size: 13px;
  color: var(--muted);
}

.landing-v2 .plan-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.landing-v2 .plan-price {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
}

.landing-v2 .plan-price-unit,
.landing-v2 .plan-price .per {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
}

.landing-v2 .plan-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.landing-v2 .plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.landing-v2 .plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
}

.landing-v2 .plan-features .check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  margin-top: 1px;
}

.landing-v2 .plan.featured .plan-features .check {
  background: var(--sv-scrim-control);
  color: var(--accent-soft);
}

.landing-v2 .plan-features .feature-text {
  color: var(--ink-2);
}

/* plan-cta : styles dans la section steps ci-dessous */

/* --------------------------------------------------------------------------
   3m. Bottom CTA (fond sombre)
   -------------------------------------------------------------------------- */

.landing-v2 .bottom-cta {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
}

.landing-v2 .bottom-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tricolor-stripe);
}

.landing-v2 .bottom-cta h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--paper);
}

.landing-v2 .bottom-cta h2 em {
  font-style: italic;
  color: var(--accent-soft);
}

.landing-v2 .bottom-cta p {
  margin-top: 16px;
  /* PAS --sv-scrim-ink-dim (toujours blanc, prévu pour du texte sur photo) : le fond de cette
     section suit l'inversion voulue de --ink/--paper (cf. commentaire sur --topbar-bg plus haut),
     donc en thème sombre --ink devient CLAIR — un texte toujours blanc y devient illisible.
     --paper suit la même inversion que le fond : toujours le bon contraste. Dimming via opacity
     (pas color-mix) : ce fichier est au budget 0 du cliquet de conversion des tokens
     (TokenCoverageTest) — color-mix() y compte comme une couleur littérale au même titre qu'un
     hex/rgba en dur. */
  color: var(--paper);
  opacity: .65;
  font-size: clamp(16px, 1.1vw, 18px);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.landing-v2 .bottom-cta .cta-row {
  margin-top: 32px;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   3n. Footer
   -------------------------------------------------------------------------- */

.landing-v2 .footer-landing {
  background: var(--bg-2);
  padding: clamp(48px, 6vw, 80px) 0 32px;
}

.landing-v2 .footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
}

.landing-v2 .footer-brand {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 12px;
}

.landing-v2 .footer-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 300px;
}

.landing-v2 .footer-landing h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.landing-v2 .footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-v2 .footer-col a {
  font-size: 14px;
  color: var(--ink-2);
  transition: color 0.2s;
}

.landing-v2 .footer-col a:hover {
  color: var(--accent);
}

.landing-v2 .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.landing-v2 .footer-tagline {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 300px;
  margin: 8px 0 12px;
}

.landing-v2 .footer-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
  font-size: 12px;
}

.landing-v2 .footer-landing-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.landing-v2 .footer-bottom {
  margin-top: clamp(40px, 4vw, 64px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
}

.landing-v2 .footer-bottom a {
  color: var(--muted);
  transition: color 0.2s;
}

.landing-v2 .footer-bottom a:hover {
  color: var(--ink);
}

/* Cookie bar / legal info bar */
.landing-v2 .cookie-bar,
.landing-v2 #legal-info-bar,
#legal-info-bar {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: auto;
  transform: none;
  z-index: 9999;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 16px 48px -12px var(--sv-shadow-color-1), 0 2px 8px var(--sv-shadow-color-7);
  font-size: 13px;
  max-width: 520px;
  width: calc(100% - 48px);
}

.landing-v2 .cookie-bar p,
.landing-v2 #legal-info-bar p,
#legal-info-bar p {
  flex: 1;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}

.landing-v2 .cookie-bar a,
.landing-v2 #legal-info-bar a,
#legal-info-bar a {
  color: var(--accent);
  text-decoration: underline;
  font-weight: 500;
  margin-left: 4px;
}

.landing-v2 .cookie-bar a:hover,
.landing-v2 #legal-info-bar a:hover,
#legal-info-bar a:hover {
  color: var(--accent-hover);
}

.landing-v2 .cookie-bar button,
.landing-v2 #legal-info-bar button,
#legal-info-bar #legal-info-accept {
  flex-shrink: 0;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  padding: 8px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 8px var(--accent-glow);
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}

.landing-v2 .cookie-bar button:hover,
.landing-v2 #legal-info-bar button:hover,
#legal-info-bar #legal-info-accept:hover {
  transform: translateY(-1px);
  background: var(--accent-hover);
  box-shadow: 0 4px 14px var(--accent-glow);
}

@media (max-width: 640px) {
  .landing-v2 .cookie-bar,
  .landing-v2 #legal-info-bar,
  #legal-info-bar {
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: calc(100% - 24px);
    max-width: none;
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 14px 18px;
  }
}

/* ==========================================================================
   4. Hamburger & menu mobile (base — masques par defaut)
   ========================================================================== */

.landing-v2 .hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 60;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: var(--sv-hover-veil);
  position: relative;
}

.landing-v2 .hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* Transformation en X quand le menu est ouvert */
.landing-v2 .hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.landing-v2 .hamburger.open span:nth-child(2) {
  opacity: 0;
}

.landing-v2 .hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menu mobile overlay */
.landing-v2 .mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--bg);
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
}

.landing-v2 .mobile-menu.open {
  display: flex;
}

.landing-v2 .mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.landing-v2 .mobile-menu-close {
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 4px;
}

.landing-v2 .mobile-nav {
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  gap: 8px;
}

.landing-v2 .mobile-nav a {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s;
}

.landing-v2 .mobile-nav a:last-child {
  border-bottom: none;
}

.landing-v2 .mobile-nav a.active {
  color: var(--accent);
}

.landing-v2 .mobile-nav a:hover {
  color: var(--accent);
}

.landing-v2 .mobile-menu-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 24px 16px;
}

.landing-v2 .mobile-menu-cta .btn {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  width: 100%;
  justify-content: center;
}

.landing-v2 .mobile-lang {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px 32px;
}

.landing-v2 .mobile-lang a {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 999px;
  transition: color 0.2s, background 0.2s;
}

.landing-v2 .mobile-lang a:hover {
  color: var(--accent);
}

.landing-v2 .mobile-lang a.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}

/* ==========================================================================
   5. Responsive
   ========================================================================== */

/* Tablette large */
@media (max-width: 1080px) {
  .landing-v2 .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablette */
@media (max-width: 980px) {
  .landing-v2 .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .landing-v2 .hero-text {
    align-items: center;
  }

  .landing-v2 .lede {
    margin-left: auto;
    margin-right: auto;
  }

  .landing-v2 .cta-row,
  .landing-v2 .hero-cta {
    justify-content: center;
  }

  .landing-v2 .hero-visual {
    min-height: 420px;
  }

  .landing-v2 .phone {
    width: 240px;
  }

  .landing-v2 .phone-secondary {
    width: 200px;
  }
}

@media (max-width: 900px) {
  .landing-v2 .steps-grid {
    grid-template-columns: 1fr;
  }

  .landing-v2 .step-card {
    min-height: auto;
  }
}

@media (max-width: 820px) {
  .landing-v2 .trust-strip-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .landing-v2 .trust-item + .trust-item::before {
    display: none;
  }
}

/* Telephone / tablette etroite */
@media (max-width: 800px) {
  .landing-v2 .footer-cols {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hamburger visible, nav desktop masquee */
  .landing-v2 .hamburger {
    display: flex;
  }

  .landing-v2 .nav {
    display: none;
  }

  .landing-v2 .header-cta {
    display: none;
  }

  /* Pricing : scroll horizontal subtle en 2 colonnes */
  .landing-v2 .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Smartphone paysage / petit ecran */
@media (max-width: 600px) {
  /* Top-bar : compacter mais garder le bouton "Telecharger l'application" visible */
  .landing-v2 .top-bar {
    font-size: 11px;
    padding: 6px var(--pad-x);
    gap: 8px;
    flex-wrap: wrap;
  }

  .landing-v2 .top-bar a {
    font-size: 11px;
    padding: 2px 10px;
    gap: 4px;
  }

  .landing-v2 .top-bar a svg {
    width: 12px;
    height: 12px;
  }

  /* Pages secondaires : padding reduit */
  .landing-v2 .page-hero,
  .page-hero {
    padding: clamp(32px, 5vw, 48px) var(--pad-x) clamp(16px, 2vw, 24px);
  }
}

@media (max-width: 560px) {
  .landing-v2 .pricing-grid {
    grid-template-columns: 1fr;
  }

  .landing-v2 .footer-cols {
    grid-template-columns: 1fr;
  }

  /* Hero : H1 display reduit */
  .landing-v2 h1.display {
    font-size: clamp(36px, 8vw, 58px);
  }

  /* Hero visual : telephone reduit, secondaire masque */
  .landing-v2 .hero-visual {
    min-height: 320px;
  }

  .landing-v2 .phone {
    width: 220px;
  }

  .landing-v2 .phone-secondary {
    display: none;
  }

  .landing-v2 .float-card {
    display: none;
  }

  /* Bottom CTA : boutons empiles */
  .landing-v2 .bottom-cta .cta-row {
    flex-wrap: wrap;
  }

  .landing-v2 .bottom-cta .cta-row .btn {
    width: 100%;
    justify-content: center;
  }

  /* Footer bottom : colonne centree */
  .landing-v2 .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .landing-v2 .cookie-bar {
    flex-direction: column;
    text-align: center;
  }
}

/* Smartphone portrait */
@media (max-width: 480px) {
  /* Trust strip : 1 colonne */
  .landing-v2 .trust-strip-inner {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .landing-v2 .trust-item {
    padding: 6px 0;
  }

  /* Hero visual : encore plus compact */
  .landing-v2 .hero-visual {
    min-height: 280px;
  }

  .landing-v2 .phone {
    width: 200px;
  }

  /* Step cards : padding reduit */
  .landing-v2 .step-card {
    padding: 24px 20px;
  }

  /* Plan cards : padding reduit */
  .landing-v2 .plan {
    padding: 24px 20px;
  }

  .landing-v2 .plan-price {
    font-size: 44px;
  }

  /* Boutons pleine largeur */
  .landing-v2 .cta-row,
  .landing-v2 .hero-cta {
    flex-direction: column;
    width: 100%;
  }

  .landing-v2 .cta-row .btn,
  .landing-v2 .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Cookie bar compacte */
  .landing-v2 .cookie-bar {
    padding: 12px 16px;
    gap: 12px;
    bottom: 12px;
    font-size: 13px;
  }

  /* Brand reduit */
  .landing-v2 .brand {
    font-size: 20px;
  }

  /* Sections padding reduit */
  .landing-v2 section {
    padding: clamp(48px, 8vw, 80px) 0;
  }
}

/* ==========================================================================
   6. Animations / micro-interactions
   ========================================================================== */

/* Entree des sections au scroll (classe ajoutee par JS) */
.landing-v2 .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.landing-v2 .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Flottement doux des cartes */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.landing-v2 .float-card-encrypt { animation: float-gentle 4s ease-in-out infinite; }
.landing-v2 .float-card-host { animation: float-gentle 4s ease-in-out 1.5s infinite; }

/* Pulsation discrete du halo */
@keyframes halo-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.landing-v2 .hero-visual::before {
  animation: halo-pulse 5s ease-in-out infinite;
}

/* ==========================================================================
   7. Utilitaires
   ========================================================================== */

/* Hero des pages secondaires (demarrer, aide, pricing, paiement) */
.landing-v2 .page-hero,
.page-hero {
  text-align: center;
  padding: clamp(48px, 6vw, 80px) var(--pad-x) clamp(24px, 3vw, 40px);
  max-width: var(--container);
  margin: 0 auto;
}

.landing-v2 .page-hero h1,
.page-hero h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 12px;
  text-align: center;
}

.landing-v2 .page-hero p,
.page-hero p {
  color: var(--ink-2);
  font-size: clamp(16px, 1.1vw, 18px);
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.landing-v2 .page-hero.page-hero-compact {
  padding-top: clamp(16px, 2.5vw, 28px);
  padding-bottom: clamp(14px, 2vw, 22px);
}

.landing-v2 .trust-strip.trust-strip-compact {
  padding: clamp(20px, 2.5vw, 28px) 0;
}

.landing-v2 .trust-desc {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: normal;
  line-height: 1.6;
  max-width: 740px;
  margin: 10px auto 0;
  text-align: center;
}

/* Pages secondaires — conteneur, cartes, tableaux */
.landing-v2 .container {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.landing-v2 .card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 32px 28px;
  margin-bottom: 24px;
  box-shadow: var(--card-shadow);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.landing-v2 .card:hover {
  box-shadow: var(--card-shadow-hover);
}

.landing-v2 .card h2, .landing-v2 .card h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 8px;
}

.landing-v2 .text-muted {
  color: var(--muted);
}

.landing-v2 table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.landing-v2 table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  background: var(--bg-2);
  border-bottom: 2px solid var(--line);
}

.landing-v2 table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: top;
}

.landing-v2 table tr:last-child td {
  border-bottom: none;
}

.landing-v2 table small {
  font-size: 12px;
  color: var(--muted);
}

.landing-v2 .pricing-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -8px;
  padding: 0 8px;
}

.landing-v2 .btn-outline-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  transition: all 0.2s;
}

.landing-v2 .btn-outline-primary:hover {
  background: var(--accent);
  color: var(--accent-fg);
}

.landing-v2 .btn-block {
  width: 100%;
  justify-content: center;
}

.landing-v2 .fw-normal { font-weight: 400; }
.landing-v2 .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.landing-v2 .text-center { text-align: center; }
.landing-v2 .text-muted { color: var(--muted); }
.landing-v2 .mt-auto { margin-top: auto; }
.landing-v2 .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --------------------------------------------------------------------------
   3s. Ecosysteme (trois applications)
   -------------------------------------------------------------------------- */

.landing-v2 .ecosystem-card {
  min-height: 0;
  gap: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 36px 30px;
  box-shadow: var(--card-shadow);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.landing-v2 .ecosystem-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--accent);
}

.landing-v2 .ec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--accent-glow);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.landing-v2 .ecosystem-card:hover .ec-icon {
  transform: scale(1.08) rotate(3deg);
  background: var(--accent);
  color: var(--accent-fg);
}

.landing-v2 .ecosystem-card .step-num-row {
  align-items: center;
  gap: 10px;
}

.landing-v2 .ecosystem-card h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}

.landing-v2 .ecosystem-card > p {
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: 1.6;
}

.landing-v2 .ec-features {
  list-style: none;
  padding-left: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.landing-v2 .ec-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.landing-v2 .ec-features li svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 3px;
}

.landing-v2 .ec-features strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 2px;
}

/* Pousse le bouton en bas de carte pour aligner les trois colonnes. */
.landing-v2 .ec-cta {
  margin-top: auto;
  padding-top: 8px;
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   3t. Detail des fonctionnalites
   -------------------------------------------------------------------------- */

.landing-v2 .features-detail {
  background: var(--bg-2);
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(64px, 8vw, 112px);
}

/* Le h2 doit dominer les h3 de categorie (26px) : on garde la taille de section. */
.landing-v2 .features-detail .section-heading {
  margin-bottom: clamp(40px, 4vw, 56px);
}

.landing-v2 .category-group {
  margin-bottom: clamp(40px, 4vw, 56px);
}

.landing-v2 .category-group-last {
  margin-bottom: 0;
}

.landing-v2 .category-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 24px;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 6px;
  display: inline-block;
}

.landing-v2 .detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.landing-v2 .detail-item {
  background: var(--paper);
  padding: 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.landing-v2 .detail-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--accent);
}

.landing-v2 .detail-item h4 {
  color: var(--ink);
  margin-bottom: 10px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}

.landing-v2 .detail-item p {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.landing-v2 .catalog-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.landing-v2 .catalog-list li {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.45;
  position: relative;
  padding-left: 16px;
}

.landing-v2 .catalog-list li::before {
  content: "•";
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--accent);
  font-size: 1.1rem;
  line-height: 1.3;
}

.landing-v2 .catalog-list strong {
  color: var(--ink);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   3u. Badges, bulles d'icones et cartes enrichies (vitrine & partenaires)
   -------------------------------------------------------------------------- */

.landing-v2 .badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
}

.landing-v2 .badge-family {
  background: var(--amber-gold-soft);
  color: var(--amber-gold-ink);
  border-color: var(--amber-gold-soft);
}

.landing-v2 .badge-public {
  background: var(--sovereign-blue-soft);
  color: var(--sovereign-blue-ink);
  border-color: var(--sovereign-blue-soft);
}

.landing-v2 .badge-sovereign {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent-soft);
}

.landing-v2 .badge-pro {
  background: var(--emerald-safe-soft);
  color: var(--emerald-safe-ink);
  border-color: var(--emerald-safe-soft);
}

.landing-v2 .icon-bubble {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px var(--accent-glow);
  transition: transform 0.25s ease;
}

.landing-v2 .icon-bubble-amber {
  background: var(--amber-gold-soft);
  color: var(--amber-gold);
  box-shadow: 0 2px 8px var(--amber-glow);
}

.landing-v2 .icon-bubble-blue {
  background: var(--sovereign-blue-soft);
  color: var(--sovereign-blue);
  box-shadow: 0 2px 8px var(--accent-glow);
}

.landing-v2 .icon-bubble-green {
  background: var(--emerald-safe-soft);
  color: var(--emerald-safe);
}

.landing-v2 .card:hover .icon-bubble,
.landing-v2 .detail-item:hover .icon-bubble {
  transform: scale(1.1) rotate(4deg);
}

.landing-v2 .interactive-card {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.landing-v2 .interactive-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--accent);
}

.landing-v2 .persona-quote {
  margin: 0;
  padding: 10px 14px;
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13px;
  font-style: italic;
  color: var(--ink);
  line-height: 1.5;
}

.landing-v2 .persona-quote-amber {
  border-left-color: var(--amber-gold);
}

.landing-v2 .persona-quote-blue {
  border-left-color: var(--sovereign-blue);
}

.landing-v2 .persona-quote-green {
  border-left-color: var(--emerald-safe);
}

/* --------------------------------------------------------------------------
   3v. Signature tricolore discrete (France / Souverainete)
   -------------------------------------------------------------------------- */

.landing-v2 .tricolor-border-top {
  position: relative;
  overflow: hidden;
}

.landing-v2 .tricolor-border-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tricolor-stripe);
}

.landing-v2 .tricolor-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tricolor-stripe);
  vertical-align: middle;
  flex-shrink: 0;
  box-shadow: 0 0 4px var(--accent-glow);
  margin-right: 4px;
}

.landing-v2 .tricolor-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  box-shadow: var(--card-shadow);
}