/* ═══════════════════════════════════════════════════════════════════════════
   FIHARY — LANDING PREMIUM v4 (index.html + pages internes)
   Direction : Stripe · Finary · Scale · Apple — visuels immersifs
   Palette imposée : #22217B #4F29BD #1189A9 #115183 #142B64
                     #F5F8FE #d6e2fe #3b5fd6 #523ee1 #bbc0fc
   Règles brand : Inter exclusif · radius ≤ 12px · zéro ombre sur cartes ·
                  Teal = argent entrant · Purple = premium uniquement.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --lp-navy: #22217B;
  --lp-navy-deep: #142B64;
  --lp-navy-mid: #115183;
  --lp-purple: #4F29BD;
  --lp-violet: #523ee1;
  --lp-blue: #3b5fd6;
  --lp-teal: #1189A9;
  --lp-lavender: #bbc0fc;
  --lp-wash: #d6e2fe;
  --lp-pale: #F5F8FE;
  --lp-ink: #0A0D14;
  --lp-body: #3C4257;
  --lp-muted: #5B6478;
  --lp-faint: #8A93A8;
  --lp-line: #E4E8F0;
  --lp-line-strong: #CBD3E1;
  --lp-white: #FFFFFF;
  --lp-ok: #059669;
  --lp-bad: #DC2626;
  --lp-warn: #D97706;
}

.home-v2 {
  background: var(--lp-white);
}

/* ═══════ HEADER SUR HERO NAVY ═══════ */
.home-v2 .site-header {
  background: rgba(20, 20, 84, 0.55);
  border-bottom: 1px solid rgba(187, 192, 252, 0.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.home-v2 .site-header.is-scrolled {
  background: rgba(13, 13, 60, 0.92);
  border-bottom: 1px solid rgba(187, 192, 252, 0.22);
}
.home-v2 .brand { color: #FFFFFF; }
.home-v2 .nav-desktop a { color: rgba(255, 255, 255, 0.78); }
.home-v2 .nav-desktop a:hover { color: #FFFFFF; }
.home-v2 .nav-desktop a.is-active { color: #FFFFFF; }
.home-v2 .menu-toggle { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); }
.home-v2 .menu-toggle span { background: #FFFFFF; }
.home-v2 .header-actions .btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.28);
}
.home-v2 .header-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
}
.home-v2 .header-actions .btn-primary {
  background: #FFFFFF;
  color: var(--lp-navy);
  box-shadow: 0 6px 20px rgba(4, 6, 30, 0.35);
}
.home-v2 .header-actions .btn-primary:hover {
  background: var(--lp-pale);
}
.home-v2 .mobile-menu { background: var(--lp-navy-deep); }
.home-v2 .mobile-menu a { color: #FFFFFF; border-bottom-color: rgba(187, 192, 252, 0.18); }
.home-v2 .mobile-menu .btn-primary { background: #FFFFFF; color: var(--lp-navy); }

/* ═══════ HERO ═══════ */
.home-v2 .hero {
  position: relative;
  padding: calc(var(--header-h) + 88px) 0 0;
  background:
    radial-gradient(1100px 620px at 82% -12%, rgba(82, 62, 225, 0.42) 0%, rgba(82, 62, 225, 0) 62%),
    radial-gradient(900px 560px at 6% 14%, rgba(17, 137, 169, 0.20) 0%, rgba(17, 137, 169, 0) 58%),
    linear-gradient(172deg, #191B6E 0%, var(--lp-navy) 46%, #1A1B66 100%);
  color: #FFFFFF;
  overflow: hidden;
}
.home-v2 .hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(187, 192, 252, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(187, 192, 252, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(0,0,0,0.8) 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(0,0,0,0.8) 0%, transparent 72%);
}
.home-v2 .hero-inner {
  position: relative;
  display: grid;
  /* Placement façon Linear : colonne centrée — texte en haut,
     visuel pleine largeur en dessous. */
  grid-template-columns: minmax(0, 1fr);
  gap: 64px;
  text-align: center;
  padding-bottom: 96px;
}
.home-v2 .hero-content { max-width: 820px; margin: 0 auto; }
/* 09/09/2026 : pilule héro (point vert + texte) retirée — le titre
   occupe l'espace directement. */

.home-v2 .hero-title {
  font-size: clamp(40px, 5vw, 62px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  margin-bottom: 24px;
}
.home-v2 .hero-title em {
  font-style: normal;
  background: linear-gradient(92deg, #E6E9FF 10%, var(--lp-lavender) 55%, #7FD8EC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home-v2 .hero-subtitle {
  font-size: 19px;
  line-height: 1.65;
  color: rgba(230, 233, 255, 0.82);
  margin-bottom: 38px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.home-v2 .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 36px; }
.home-v2 .hero-actions .btn-primary {
  background: #FFFFFF;
  color: var(--lp-navy);
  box-shadow: 0 10px 30px rgba(3, 4, 26, 0.35);
}
.home-v2 .hero-actions .btn-primary:hover { background: var(--lp-pale); transform: translateY(-2px); }
.home-v2 .hero-actions .btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.30);
  color: #FFFFFF;
}
.home-v2 .hero-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
}
.home-v2 .hero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; font-size: 13.5px; color: rgba(230, 233, 255, 0.72); }
.home-v2 .hero-trust li::before {
  content: "";
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237FD8EC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center no-repeat;
}

/* ═══════════════════════════════════════════════════════════════════════
   VISUELS IMMERSIFS — .lp-visual  (Apple · Scale · Palantir)
   Le screenshot réel est affiché ENTIER, légèrement zoomé : la fenêtre
   montre la zone importante, le mouvement de souris fait glisser la page
   (panoramique) pour révéler le visuel complet. Un fondu dégradé dissout
   les bords dans le fond de la section — jamais de coupe sèche, jamais
   de réduction de la taille du visuel.
   ═══════════════════════════════════════════════════════════════════════ */
.lp-visual {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--lp-pale);
}
.lp-visual img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;            /* image entière, lisible */
  max-width: none;
  height: auto;
  display: block;
  pointer-events: none;   /* le pan est piloté sur le conteneur */

}
/* Fondu dégradé : le visuel fond dans la couleur de la section */
.lp-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 56%, var(--lp-fade, #FFFFFF) 97%);
}
.lp-visual::after { display: none; }
/* Variantes de fondu selon le fond de la section */
.lp-visual.fade-white { --lp-fade: #FFFFFF; background: var(--lp-white); }
.lp-visual.fade-soft  { --lp-fade: #F5F8FE;  background: var(--lp-pale); }
.lp-visual.fade-navy  {
  --lp-fade: #171A63;
  background: #171A63;
  border-color: rgba(187, 192, 252, 0.28);
}
.lp-visual.fade-navy::after {
  background:
    linear-gradient(to bottom, rgba(23, 26, 99, 0) 42%, rgba(23, 26, 99, 0.30) 76%, #171A63 97%),
    linear-gradient(to top, rgba(23, 26, 99, 0) 86%, rgba(23, 26, 99, 0.22) 100%);
}
/* Indice « bougez la souris » — discret, uniquement au survol */
.lp-visual .pan-hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10, 13, 20, 0.55);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 250ms ease, transform 250ms ease;
  pointer-events: none;
}
.lp-visual .pan-hint svg { width: 13px; height: 13px; flex: none; }
.lp-visual .pan-hint { display: none; }
@media (hover: none) { .lp-visual .pan-hint { display: none; } }

/* RÉACTIVITÉ GLOBALE DES VISUELS — les cadres s'adaptent, jamais l'inverse */
.lp-visual,
.home-v2 .hero-visual,
.lp-feature-visual,
.lp-demo-pair,
.lp-phones {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.home-v2 .hero-visual,
.lp-feature-visual { overflow: visible; }

/* ═══════ HERO VISUEL ═══════ */
.home-v2 .hero-visual {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.home-v2 .hero-visual .lp-visual {
  position: relative;
  z-index: 1;
  border-radius: 12px;
  transform-style: preserve-3d;
  transition: transform 140ms ease-out;
}
.home-v2 .hero-visual .lp-visual img { width: 140%; }

/* Entrée en scène du hero */
@keyframes lp-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes lp-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* backwards (et non both) : après l'animation, les transforms inline
   (parallaxe JS / tilt / pan) reprennent la main sur la cascade CSS. */
/* Héro façon Linear : visuel statique, aucune animation d'entrée */
.home-v2 .hero-visual .lp-float { animation: none; }

/* Halo doux derrière le cadre */
.home-v2 .hero-visual::before { display: none; }

/* Flottants : TOUJOURS à l'intérieur du visuel — aucun débordement horizontal
   possible, quelle que soit la largeur d'écran. */
.lp-float {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(10, 15, 51, 0.92);
  border: 1px solid rgba(187, 192, 252, 0.26);
  border-radius: 10px;
  padding: 10px 14px;
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(3, 4, 26, 0.45);
  will-change: transform;
  max-width: calc(100% - 16px);
  white-space: normal;
}
.lp-float small { display: block; font-weight: 400; color: rgba(230, 233, 255, 0.62); font-size: 11px; margin-top: 1px; }
.lp-float .ico {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
.lp-float .ico.in { background: rgba(17, 137, 169, 0.20); color: #7FD8EC; }
.lp-float .ico.shield { background: rgba(79, 41, 189, 0.22); color: var(--lp-lavender); }
.lp-float-1 { top: 7%; left: 8px; }
.lp-float-2 { bottom: 13%; right: 8px; }

/* Capture du héro : plein cadre, sans zoom, sans tilt ni dégradé (façon Linear) */
.home-v2 .hero-shot {
  position: relative;
  width: 100%;
  border: 1px solid rgba(187, 192, 252, 0.28);
  border-radius: 12px;
  background: #171A63;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(3, 4, 26, 0.40);
}
.home-v2 .hero-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ═══════ BANDEAU CONFIANCE (vraies intégrations) ═══════ */
.home-v2 .trust-bar {
  background: var(--lp-white);
  padding: 44px 0;
  border-top: 1px solid var(--lp-line);
  border-bottom: 1px solid var(--lp-line);
}
.home-v2 .trust-bar-inner { gap: 20px 48px; }
.home-v2 .trust-bar p { color: var(--lp-faint); letter-spacing: 0.04em; }
.home-v2 .trust-logos { gap: 28px 44px; }
.trust-logo-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--lp-faint);
  transition: color 200ms ease;
}
.trust-logo-brand:hover { color: var(--lp-muted); }
.trust-logo-brand img { width: 26px; height: 26px; object-fit: contain; }

/* ── Bandeau intégrations v2 : groupes différenciés, logos réels bien visibles ── */
.home-v2 .trust-bar { padding: 52px 0; }
.trust-bar-inner { flex-direction: column; }
.trust-bar-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--lp-body);
  margin: 0;
}
.trust-groups {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 36px;
}
.trust-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.trust-group-label {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--lp-navy);
  background: rgba(34, 33, 123, 0.07);
  border: 1px solid rgba(34, 33, 123, 0.14);
}
.trust-group:nth-child(3) .trust-group-label {
  color: var(--lp-navy-mid);
  background: rgba(17, 81, 131, 0.07);
  border-color: rgba(17, 81, 131, 0.14);
}
.trust-sep {
  width: 1px;
  height: 52px;
  background: var(--lp-line-strong);
  flex: none;
}
/* Logos réels, grands et lisibles */
.trust-logo-brand {
  font-size: 16px;
  font-weight: 600;
  color: var(--lp-body);
  gap: 12px;
}
.trust-logo-brand:hover { color: var(--lp-navy); }
.trust-logo-brand img {
  width: auto;
  height: 30px;
  max-width: 96px;
  object-fit: contain;
}
.trust-logos { gap: 18px 36px; }

@media (max-width: 768px) {
  .trust-sep { display: none; }
  .trust-groups { gap: 26px; }
  .trust-logo-brand { font-size: 14.5px; }
  .trust-logo-brand img { height: 26px; }
}

/* ═══════ SECTIONS COMMUNES ═══════ */
.home-v2 section.lp-section { padding: 110px 0; }
.home-v2 section.lp-section.alt { background: var(--lp-pale); border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line); }
.home-v2 section.lp-section.navy {
  background: linear-gradient(168deg, #191B6E 0%, var(--lp-navy) 58%, #1A1B66 100%);
  color: #FFFFFF;
}

.lp-h2 {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.14;
  color: var(--lp-ink);
  margin-bottom: 16px;
}
.lp-h2 em { font-style: normal; color: var(--lp-navy); }
.lp-section.navy .lp-h2 { color: #FFFFFF; }
.lp-section.navy .lp-h2 em {
  background: linear-gradient(92deg, #E6E9FF, var(--lp-lavender) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-lead {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--lp-muted);
  max-width: 620px;
}
.lp-section.navy .lp-lead { color: rgba(230, 233, 255, 0.78); }
.lp-head-center { text-align: center; margin: 0 auto 64px; }
.lp-head-center .lp-lead { margin-left: auto; margin-right: auto; }

/* ═══════ PROBLÈME ═══════ */
.lp-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.lp-problem-card {
  background: var(--lp-white);
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  padding: 30px 28px;
  transition: border-color 200ms ease, transform 200ms ease;
}
.lp-problem-card:hover { border-color: var(--lp-line-strong); transform: translateY(-2px); }
.lp-problem-card .num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lp-teal);
  margin-bottom: 14px;
}
.lp-problem-card h3 { font-size: 18px; font-weight: 600; color: var(--lp-navy-deep); margin-bottom: 10px; letter-spacing: -0.01em; }
.lp-problem-card p { font-size: 14.5px; line-height: 1.65; color: var(--lp-muted); }
.lp-problem-card .cost {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--lp-line);
  font-size: 13px;
  color: var(--lp-bad);
  font-weight: 600;
}

/* ═══════ COMMENT ÇA MARCHE ═══════ */
.lp-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.lp-step {
  position: relative;
  background: var(--lp-white);
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  padding: 30px 28px 28px;
}
.lp-step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--lp-navy);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 18px;
}
.lp-step h3 { font-size: 17.5px; font-weight: 600; color: var(--lp-navy-deep); margin-bottom: 10px; letter-spacing: -0.01em; }
.lp-step p { font-size: 14.5px; line-height: 1.65; color: var(--lp-muted); }
.lp-step .step-time {
  display: inline-block;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lp-teal);
  background: rgba(17, 137, 169, 0.08);
  border: 1px solid rgba(17, 137, 169, 0.18);
  border-radius: 999px;
  padding: 4px 12px;
}

/* ═══════ FONCTIONNALITÉS ═══════ */
.lp-feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: center;
  margin-bottom: 96px;
}
.lp-feature-row:last-child { margin-bottom: 0; }
.lp-feature-row.reverse .lp-feature-visual { order: -1; }
.lp-feature-row.reverse .lp-feature-text { order: 2; }

.lp-feature-text h3 {
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--lp-ink);
  margin-bottom: 16px;
}
.lp-feature-text > p { font-size: 16px; line-height: 1.7; color: var(--lp-muted); margin-bottom: 26px; }
.lp-feature-points { display: flex; flex-direction: column; gap: 13px; }
.lp-feature-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--lp-body);
  line-height: 1.55;
}
.lp-feature-points li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--lp-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2322217B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center no-repeat;
}
.lp-feature-points li b { color: var(--lp-ink); font-weight: 600; }

.lp-feature-visual { position: relative; }

/* Visuel étagé : une carte derrière (zéro ombre, juste un cadre).
   Débord décoratif borné à -20px : reste dans la gouttière de 24px du
   conteneur → aucune scrollbar horizontale. */
.lp-feature-visual .back-card {
  position: absolute;
  inset: 26px -20px -20px 26px;
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(59, 95, 214, 0.06) 0%, rgba(82, 62, 225, 0.04) 55%, rgba(17, 137, 169, 0.05) 100%);
  z-index: 0;
}
.lp-feature-visual .lp-visual { position: relative; z-index: 1; }

/* Mini-carte flottante (preuve) */
.lp-proof {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--lp-white);
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--lp-body);
  font-weight: 600;
  box-sizing: border-box;
  max-width: calc(100% - 12px);
}
.lp-proof small { display: block; font-weight: 400; color: var(--lp-faint); font-size: 11.5px; margin-top: 2px; }
.lp-proof .proof-ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.lp-proof .proof-ico.ok { background: rgba(5, 150, 105, 0.10); color: var(--lp-ok); }
.lp-proof .proof-ico.warn { background: rgba(217, 119, 6, 0.10); color: var(--lp-warn); }
.lp-proof .proof-ico.bad { background: rgba(220, 38, 38, 0.10); color: var(--lp-bad); }
.lp-proof.proof-bl { bottom: 22px; left: -20px; }
.lp-proof.proof-tr { top: 22px; right: -20px; }

/* ═══════ BANDE STATS (section navy) ═══════ */
.lp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.lp-stat {
  border: 1px solid rgba(187, 192, 252, 0.20);
  border-radius: 12px;
  padding: 28px 26px;
  background: rgba(187, 192, 252, 0.06);
}
.lp-stat .value {
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.lp-stat .value em { font-style: normal; color: #7FD8EC; }
.lp-stat .label { font-size: 15px; font-weight: 500; color: rgba(230, 233, 255, 0.88); margin-bottom: 6px; }
.lp-stat .desc { font-size: 13px; line-height: 1.55; color: rgba(230, 233, 255, 0.55); }

/* ═══════ TARIFS ═══════ */
.lp-pricing-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: stretch;
}
.lp-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--lp-white);
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  padding: 26px 22px;
  transition: border-color 200ms ease, transform 200ms ease;
}
.lp-pricing-card:hover { border-color: var(--lp-line-strong); transform: translateY(-3px); }
.lp-pricing-card.featured {
  border-color: var(--lp-navy);
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FF 100%);
}
.lp-pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--lp-navy);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.lp-pricing-name { font-size: 15px; font-weight: 600; color: var(--lp-ink); margin-bottom: 6px; }
.lp-pricing-price {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lp-ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}
.lp-pricing-price span { font-size: 13px; font-weight: 400; color: var(--lp-faint); }
.lp-pricing-desc { font-size: 13px; color: var(--lp-muted); margin-bottom: 18px; min-height: 38px; }
.lp-pricing-features { flex: 1; display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
.lp-pricing-features li { font-size: 13px; color: var(--lp-body); display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.lp-pricing-features li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center no-repeat;
}
.lp-pricing-features li.plus { color: var(--lp-navy); font-weight: 600; }
.lp-pricing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--lp-line-strong);
  background: var(--lp-white);
  color: var(--lp-ink);
  font-size: 13.5px;
  font-weight: 600;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.lp-pricing-cta:hover { border-color: var(--lp-navy); color: var(--lp-navy); }
.lp-pricing-card.featured .lp-pricing-cta { background: var(--lp-navy); border-color: var(--lp-navy); color: #FFFFFF; }
.lp-pricing-card.featured .lp-pricing-cta:hover { background: var(--lp-navy-deep); }
.lp-pricing-note {
  text-align: center;
  margin-top: 28px;
  font-size: 13.5px;
  color: var(--lp-faint);
}
.lp-pricing-note a { color: var(--lp-navy); font-weight: 600; }

/* ═══════ MOBILE (vitrine app) ═══════ */
.lp-mobile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}
.lp-phones {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-end;
}
.lp-phone {
  width: 300px;
  border-radius: 34px;
  border: 8px solid #10143A;
  background: #0B1030;
  overflow: hidden;
  aspect-ratio: 390 / 844; /* ratio natif des captures mobiles 390×844 */
}
.lp-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.lp-phone.small { width: 240px; align-self: center; margin-bottom: 26px; }
.lp-app-points { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.lp-app-points li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--lp-body);
  line-height: 1.6;
}
.lp-app-points li .ai {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(34, 33, 123, 0.07);
  color: var(--lp-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lp-app-points li .ai svg { width: 17px; height: 17px; }
.lp-app-points li b { color: var(--lp-ink); font-weight: 600; }

/* ═══════ PAGE DÉMO (paires + onglets) ═══════ */
.lp-demo-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.55fr);
  gap: 24px;
  align-items: start;
}
.lp-demo-phone {
  border-radius: 32px;
  border: 8px solid #10143A;
  background: #0B1030;
  overflow: hidden;
  aspect-ratio: 390 / 844;
  max-width: 300px;
}
.lp-demo-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.lp-visual.wide { grid-column: 1 / -1; }

/* Onglets de démonstration : fluides sur petits écrans (page /demo) */
@media (max-width: 480px) {
  .demo-tabs {
    display: flex !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .demo-tabs .demo-tab {
    flex: 1;
    min-width: 0;
    padding: 0 8px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 1180px) {
  .lp-float-1 { left: 6px; }
  .lp-float-2 { right: 6px; }
  /* Les preuves flottantes rentrent dans le conteneur (la gouttière se
     réduit sur écrans moyens → plus de marge pour les offsets décoratifs) */
  .lp-proof.proof-bl { left: 10px; }
  .lp-proof.proof-tr { right: 10px; }
  .lp-pricing-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .home-v2 .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .home-v2 .hero-visual { max-width: 640px; margin: 0 auto; width: 100%; }
  .lp-float-1 { top: 10px; left: 8px; }
  .lp-float-2 { bottom: 10px; right: 8px; }
  .lp-feature-row, .lp-feature-row.reverse { grid-template-columns: 1fr; gap: 40px; }
  .lp-feature-row.reverse .lp-feature-visual { order: 0; }
  .lp-feature-row.reverse .lp-feature-text { order: 0; }
  .lp-mobile-grid { grid-template-columns: 1fr; gap: 48px; }
  .lp-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .home-v2 .hero { padding-top: calc(var(--header-h) + 48px); }
  .home-v2 .hero-inner { gap: 36px; padding-bottom: 56px; }
  .home-v2 .hero-title { font-size: 36px; }
  .home-v2 .hero-subtitle { font-size: 16.5px; }
  /* Boutons CTA : texte long (nowrap par défaut) → retour à la ligne sur mobile */
  .home-v2 .hero-actions .btn { white-space: normal; height: auto; min-height: 52px; padding: 12px 22px; text-align: center; line-height: 1.4; }
  .home-v2 section.lp-section { padding: 76px 0; }
  .lp-head-center { margin-bottom: 44px; }
  .lp-problem-grid, .lp-steps-grid, .lp-stats-grid { grid-template-columns: 1fr; }
  .lp-feature-row { margin-bottom: 64px; }
  .lp-feature-visual .back-card { inset: 14px -14px -14px 14px; }
  .lp-proof.proof-bl { left: 10px; }
  .lp-proof.proof-tr { right: 10px; }
  .lp-pricing-grid { grid-template-columns: 1fr; }
  .lp-phones { flex-direction: column; }
  .lp-phone { width: 240px; }
  /* Mobile : badges et preuves repositionnés DANS le visuel — ils ne
     peuvent plus sortir de l'écran ni créer de scrollbar horizontale. */
  .lp-float { font-size: 11.5px; padding: 8px 12px; max-width: calc(100% - 12px); }
  .lp-float-1 { top: 10px; left: 6px; }
  .lp-float-2 { bottom: 10px; right: 6px; }
  .lp-proof { max-width: calc(100% - 20px); }
  .lp-demo-pair { grid-template-columns: 1fr; }
  .lp-demo-phone { max-width: 230px; margin: 0 auto; }
  /* Zoom légèrement plus fort sur mobile (zone importante plus lisible,
     le pan n'est pas disponible au tactile) */
  .lp-visual img { width: 165%; }
}

@media (prefers-reduced-motion: reduce) {
  .home-v2 .hero-visual .lp-visual,
  .home-v2 .hero-visual .lp-float { animation: none; }
  .home-v2 .hero-visual .lp-visual { transition: none; }
  .home-v2 .hero-visual { perspective: none; }
  .lp-visual img { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLEIN ÉCRAN DES VISUELS (.lp-visual) — bouton + mode fullscreen
   Ajouté : bouton injecté par lp-visuals.js, Fullscreen API native,
   fallback overlay CSS (.is-fullscreen). En plein écran le screenshot
   COMPLET est affiché (object-fit: contain), net, sur fond sombre.
   ═══════════════════════════════════════════════════════════════════════════ */
.lp-fs-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(187, 192, 252, 0.32);
  background: rgba(10, 13, 20, 0.62);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 250ms ease, transform 250ms ease, background 150ms ease;
}
.lp-fs-btn svg { width: 13px; height: 13px; flex: none; }
.lp-visual:hover .lp-fs-btn,
.lp-visual.is-fullscreen .lp-fs-btn { opacity: 1; transform: translateY(0); }
.lp-fs-btn:hover { background: rgba(10, 13, 20, 0.88); }
/* Tactile : le bouton reste visible en permanence */
@media (hover: none) {
  .lp-fs-btn { opacity: 1; transform: none; }
}

/* Mode plein écran : le visuel complet, net, centré sur fond sombre */
.lp-visual.is-fullscreen,
.lp-visual:fullscreen {
  position: fixed !important;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  aspect-ratio: auto !important;
  border: none !important;
  border-radius: 0 !important;
  background: #0A0F2E;
  z-index: 9999;
  overflow: hidden;
}
.lp-visual.is-fullscreen img,
.lp-visual:fullscreen img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  transform: none !important;
}
.lp-visual.is-fullscreen::after,
.lp-visual:fullscreen::after { display: none !important; }
.lp-visual.is-fullscreen .pan-hint,
.lp-visual:fullscreen .pan-hint { display: none !important; }
.lp-visual.is-fullscreen .lp-fs-btn,
.lp-visual:fullscreen .lp-fs-btn { opacity: 1; transform: none; }

/* Fallback overlay : verrouille le scroll derrière */
body.lp-fs-open { overflow: hidden; }

/* 27/08/2026 — descriptions utilité des intégrations (SEO) */
.trust-group-desc{max-width:380px;margin:8px 0 0;font-size:12px;line-height:1.55;color:var(--text-2,#6B7280);text-align:left;}

/* ═══════════════════════════════════════════════════════════════
   INTERACTIVE HERO GRID v4 (29/08/2026) — voir assets/js/hero-grid.js
   Héro fixe, couleur initiale conservée. Bordures transparentes au
   repos ; les couleurs sont calculées en JS (inline) puis animées en
   WAAPI — aucune dépendance à calc(var()) en CSS.
   ═══════════════════════════════════════════════════════════════ */
.home-v2 .hero .fh-hero-cells {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Tactile : pas de zoom au double-tap sur le héro (le tap déclenche l'onde) */
.home-v2 .hero { touch-action: manipulation; }
.home-v2 .hero .fh-cell {
  position: absolute;
  width: 56px;
  height: 56px;
  box-sizing: border-box;
  border: 1px solid transparent;
  box-shadow: none;
  transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out;
  will-change: border-color, box-shadow;
}
@media (prefers-reduced-motion: reduce) {
  .home-v2 .hero .fh-cell { display: none; }
}

/* ── Héro : dashboard + téléphone Android côte à côte ── */
.home-v2 .hero-visual.hero-split { display: flex; align-items: center; justify-content: center; gap: 28px; }
.home-v2 .hero-visual.hero-split .hero-shot { flex: 1 1 0; min-width: 0; }
.home-v2 .hero-visual.hero-split .hero-phone { flex: 0 0 230px; }
.home-v2 .hero-phone img { width: 100%; height: auto; display: block; border-radius: 22px; box-shadow: 0 28px 60px -24px rgba(3,4,26,.6); }
.demo-caption { text-align: center; font-size: 15px; color: #5B6472; margin: 20px auto 0; max-width: 680px; line-height: 1.6; }
@media (max-width: 720px) {
  .home-v2 .hero-visual.hero-split { flex-direction: column; }
  .home-v2 .hero-visual.hero-split .hero-phone { flex: 0 0 auto; width: 200px; }
}