/* ==========================================================================
   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: #f3ede1;
  --bg-2: #ebe3d2;
  --paper: #f9f5ec;
  --ink: #1a1b2e;
  --ink-2: #2a2c45;
  --muted: #5e5a52;
  --line: #d9d1bf;
  --accent: #5d3ff3;
  --accent-ink: #1a0b66;
  --accent-soft: #ece6ff;
  --accent-fg: #ffffff;

  /* 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(58px, 7.5vw, 116px);
  --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: #191721;
  --bg-2: #211e2c;
  --paper: #221f2d;
  --ink: #f0ebe0;
  --ink-2: #ded7cb;
  --muted: #a49c8e;
  --line: #37323f;
  --accent: #b9a5ff;
  --accent-ink: #e5dcff;
  --accent-soft: #2d2352;
  --accent-fg: #14101f;
}

/* --------------------------------------------------------------------------
   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: 'Instrument Serif', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

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

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

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

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

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

.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(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 1px 0 var(--sv-shadow-color-7), 0 8px 24px -8px var(--sv-shadow-color-4);
}

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

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

.landing-v2 .btn-secondary:hover {
  background: var(--ink);
  color: var(--paper);
}

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

.landing-v2 .btn-ghost:hover {
  background: var(--bg-2);
}

.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 {
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(48px, 6vw, 96px);
}

.landing-v2 .hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  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: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-soft);
  padding: 6px 16px;
  border-radius: 999px;
  width: fit-content;
}

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

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

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

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

.landing-v2 .cta-note {
  font-size: var(--t-small);
  color: var(--muted);
}

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

/* 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: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  margin-left: auto;
}

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

/* 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: 10px;
  color: var(--muted);
}

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

.landing-v2 .float-card {
  position: absolute;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 14px 40px -12px var(--sv-shadow-color-1);
  z-index: 10;
  font-size: 13px;
  white-space: nowrap;
}

.landing-v2 .float-card .fc-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}

.landing-v2 .float-card .fc-label {
  font-weight: 500;
  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%;
}

/* --------------------------------------------------------------------------
   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(28px, 3vw, 44px) 0;
}

.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: 8px 16px;
  position: relative;
}

/* 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: 28px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
  display: block;
}

.landing-v2 .trust-label {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  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 {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
}

.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;
  color: var(--sv-scrim-ink-dim);
  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: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  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 */
.landing-v2 .cookie-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 14px 40px -12px var(--sv-shadow-color-1);
  font-size: 14px;
  max-width: 600px;
  width: calc(100% - 40px);
}

.landing-v2 .cookie-bar p {
  flex: 1;
  color: var(--ink-2);
  line-height: 1.45;
}

.landing-v2 .cookie-bar .btn {
  flex-shrink: 0;
}

/* ==========================================================================
   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 {
    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 {
    flex-direction: column;
    width: 100%;
  }

  .landing-v2 .cta-row .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;
}

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

.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: 12px;
}

.landing-v2 .ec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  color: var(--accent);
  flex-shrink: 0;
}

.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: 26px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 24px;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 8px;
  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: 24px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}

.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;
}