/* ================================================================
   landing-v2.css — Refonte visuelle landing (juin 2026)
   Patterns inspirés de 21st.dev, réimplémentés en CSS vanilla.
   Chargé UNIQUEMENT par landing.html, après landing-page.css.
   Rollback : retirer le <link> dans landing.html.
   Dépend des tokens de landing.css (--accent, --surf-*, --glow-*).
   ================================================================ */

/* ── Primitive : angle animable pour bordures conic ── */
@property --v2-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes v2-spin { to { --v2-angle: 360deg; } }

/* ================================================================
   HERO — fond mesh + grille de points + faisceau
   ================================================================ */
.hero-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 72% 58% at 50% 36%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 72% 58% at 50% 36%, #000 0%, transparent 72%);
}
.hero-beam {
  position: absolute;
  left: 50%;
  top: -14%;
  transform: translateX(-50%);
  width: min(880px, 92vw);
  height: 540px;
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(
    from 190deg at 50% 0%,
    transparent 40%,
    rgba(59,130,196,.17) 50%,
    rgba(52,201,123,.08) 58%,
    transparent 68%
  );
  filter: blur(46px);
}
/* Aurora existante : on la calme un peu, le beam prend le relais */
.hero-wrap .aurora-bg::before,
.hero-wrap .aurora-bg::after { opacity: .12; }

/* SVG réseau : légèrement plus présent */
.lottie-hero { opacity: .16; }

/* ── Badge héros : pill à bordure conic rotative ── */
.hero-intro-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 99px;
  border: 1px solid rgba(59,130,196,.28);
  background: rgba(59,130,196,.07);
  margin-bottom: 28px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s, background .2s;
  cursor: default;
  width: fit-content;
  position: relative;
}
.hero-intro-badge::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 99px;
  padding: 1px;
  background: conic-gradient(
    from var(--v2-angle),
    transparent 0%,
    rgba(59,130,196,.9) 12%,
    rgba(52,201,123,.4) 20%,
    transparent 32%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: v2-spin 6s linear infinite;
  pointer-events: none;
}
.hero-intro-badge:hover {
  border-color: rgba(59,130,196,.5);
  background: rgba(59,130,196,.12);
}
.hero-badge-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(59,130,196,.16);
  border: 1px solid rgba(59,130,196,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-badge-mark img { width: 16px; height: 16px; }
.hero-badge-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  letter-spacing: .01em;
}
.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--glow-accent);
  animation: v2-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
  will-change: opacity;
}
@keyframes v2-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.hero-badge-label { color: var(--accent-hover); font-weight: 700; }

/* ── Hero : centrage (repris de l'ancien style inline) ── */
.hero-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Boutons : glow premium (landing seulement, géométrie inchangée) ── */
.btn-p {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 28px -10px var(--glow-accent);
}
.btn-p:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 26px var(--glow-accent), 0 10px 28px -10px var(--glow-accent);
}
.btn-s:hover { border-color: var(--border-glow); }

/* ── Trust pills : hover bleu doux ── */
.trust-pill:hover {
  box-shadow: 0 0 14px var(--glow-accent-soft);
}

/* ================================================================
   PARTNERS — strip statique raffiné (3 logos)
   ================================================================ */
.partners-strip { padding: 8px 24px 72px; background: transparent; }
.partners-strip-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.partners-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
}
.partners-list {
  display: flex;
  align-items: center;
  gap: 44px;
  flex-wrap: wrap;
  justify-content: center;
}
.partner-logo-link {
  display: inline-flex;
  align-items: center;
  opacity: .45;
  filter: grayscale(1);
  transition: opacity .25s, filter .25s;
}
.partner-logo-link:hover { opacity: 1; filter: none; }
.partner-logo-link--card {
  background: rgba(255,255,255,.07);
  border-radius: 8px;
  padding: 6px 10px;
}
.partner-logo-link--card .partner-logo { width: 96px; height: auto; }
.partner-logo { height: 32px; width: auto; display: block; }
.partner-sep {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
}

/* ================================================================
   PROCESS — étapes en cartes reliées par la ligne animée
   ================================================================ */
.process .steps { gap: 14px; }
.process .steps::before { top: 48px; left: 5%; right: 5%; }
.process .step {
  background: var(--surf-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px 18px 26px;
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s;
}
.process .step:hover {
  transform: translateY(-4px);
  border-color: rgba(59,130,196,.3);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
/* Anneau conic autour du numéro d'étape */
.step-num { position: relative; }
.step-num::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  padding: 1.5px;
  background: conic-gradient(
    from var(--v2-angle),
    rgba(59,130,196,.9),
    rgba(52,201,123,.45) 40%,
    transparent 65%,
    rgba(59,130,196,.9)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: v2-spin 5s linear infinite;
  pointer-events: none;
}

/* ================================================================
   INTÉGRATIONS — marquee CSS infini avec fondu des bords
   ================================================================ */
.integrations-strip {
  padding: 44px 0;
  border-top: 1px solid rgba(255,255,255,.05);
  overflow: hidden;
}
.integrations-strip-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.integrations-label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
}
.integrations-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: v2-marquee 34s linear infinite;
  will-change: transform;
}
.integrations-marquee:hover .marquee-track { animation-play-state: paused; }
/* Sans JS (piste non dupliquée) : pas de défilement, pills centrées */
.marquee-track:has(.integrations-list:only-child) { animation: none; width: 100%; }
.marquee-track:has(.integrations-list:only-child) .integrations-list { flex-wrap: wrap; justify-content: center; width: 100%; }
.marquee-track .integrations-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding-right: 10px;
}
@keyframes v2-marquee { to { transform: translateX(-50%); } }
.integration-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  font-size: .82rem;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
}
.integration-pill:hover {
  border-color: rgba(59,130,196,.4);
  color: rgba(255,255,255,.85);
  background: rgba(59,130,196,.08);
}
.integration-pill [data-lucide] { width: 13px; height: 13px; }

/* ================================================================
   FEATURES — bento grid asymétrique + spotlight hover
   ================================================================ */
.feat-apercu-grid--full {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.feat-apercu-card {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 26px 24px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--surf-2);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s;
}
.feat-apercu-card.bento-lg { grid-column: span 4; }
.feat-apercu-card.bento-md { grid-column: span 3; }
.feat-apercu-card:hover { transform: translateY(-3px); }
/* Bordure gradient au hover (1px, mask exclude) */
.feat-apercu-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(59,130,196,.55), rgba(255,255,255,.06) 45%, rgba(52,201,123,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.feat-apercu-card:hover::before { opacity: 1; }
/* Spotlight : halo qui suit la souris (--mx/--my posés par JS) */
.spot-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(59,130,196,.1), transparent 65%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.spot-card:hover::after { opacity: 1; }
.feat-apercu-ico {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--accent-muted);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--accent);
  transition: transform .3s, background .3s, color .3s;
}
.feat-apercu-card:hover .feat-apercu-ico {
  transform: scale(1.08);
  background: var(--accent);
  color: #fff;
}
.feat-apercu-card h4 {
  font-size: var(--t-h4);
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.feat-apercu-card p {
  font-size: var(--t-sm);
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
}
.feat-apercu-card.bento-lg p { max-width: 52ch; }

/* ================================================================
   FAQ — accordéon en cartes soft
   ================================================================ */
.faq-section { padding: 88px 24px; }
.faq-inner { max-width: 740px; margin: 0 auto; }
.faq-list {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surf);
  padding: 0 20px;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.faq-item:hover {
  border-color: rgba(59,130,196,.25);
}
.faq-item:has(.faq-q[aria-expanded="true"]) {
  border-color: rgba(59,130,196,.35);
  background: var(--surf-2);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  font-family: inherit;
  transition: color .2s;
}
.faq-q:hover, .faq-q[aria-expanded="true"] { color: #fff; }
.faq-chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,.4);
  transition: transform .25s ease, color .25s;
}
.faq-q[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
}
.faq-a.open { max-height: 300px; padding-bottom: 18px; }
.faq-a p {
  font-size: .93rem;
  color: rgba(255,255,255,.55);
  line-height: 1.75;
  margin: 0;
}

/* ================================================================
   CTA FINAL — panneau lumineux à bordure conic
   ================================================================ */
.landing-cta-final {
  padding: 104px 24px;
  border-top: 1px solid rgba(255,255,255,.06);
  text-align: center;
}
.landing-cta-final-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 64px clamp(24px, 6vw, 56px);
  border-radius: 24px;
  background:
    radial-gradient(ellipse 70% 90% at 50% -20%, var(--glow-accent-soft), transparent 60%),
    linear-gradient(180deg, var(--surf-2), var(--surf));
  border: 1px solid var(--border);
  overflow: hidden;
}
.landing-cta-final-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--v2-angle),
    transparent 0%,
    rgba(59,130,196,.7) 8%,
    transparent 22%,
    transparent 50%,
    rgba(52,201,123,.45) 58%,
    transparent 72%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: v2-spin 10s linear infinite;
  pointer-events: none;
}
/* Grille de points en texture de fond du panneau */
.landing-cta-final-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000, transparent 75%);
  pointer-events: none;
}
.landing-cta-final-inner > * { position: relative; z-index: 1; }
.landing-cta-final h2 {
  font: 400 clamp(1.75rem, 4vw, 2.4rem)/1.2 var(--f-disp);
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 16px;
}
.landing-cta-final p {
  font-size: 1rem;
  color: rgba(255,255,255,.5);
  line-height: 1.7;
  margin: 0 0 32px;
}
.landing-cta-final .cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ================================================================
   FOOTER v2 — hairline gradient + rangée marque (landing seulement)
   ================================================================ */
.footer-v2 {
  position: relative;
  border-top: none;
  padding: 44px clamp(16px, 4vw, 56px) 36px;
}
.footer-v2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,196,.45), rgba(52,201,123,.3), transparent);
}
.footer-v2-brand {
  max-width: 1400px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-v2-brand img { height: 28px; width: auto; }
.footer-v2-tagline {
  font-size: var(--t-xs);
  color: var(--text-3);
}

/* ================================================================
   SVG HERO — animation réseau (déplacé depuis le <style> inline)
   ================================================================ */
.hero-svg-anim { width: 100%; max-width: 340px; height: auto; display: block; margin: 0 auto; }
@keyframes svg-node-pulse { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)} }
@keyframes svg-line-dash  { to { stroke-dashoffset: -24; } }
@keyframes svg-bolt-glow  { 0%,100%{opacity:.7} 50%{opacity:1} }
@keyframes svg-orbit-1    { from{offset-distance:0%} to{offset-distance:100%} }
.svg-center   { animation: svg-node-pulse 3s ease-in-out infinite; transform-origin: 160px 160px; will-change: transform,opacity; }
.svg-node-1   { animation: svg-node-pulse 4s ease-in-out infinite .2s; transform-origin: 80px 80px;   will-change: transform,opacity; }
.svg-node-2   { animation: svg-node-pulse 4s ease-in-out infinite .8s; transform-origin: 240px 80px;  will-change: transform,opacity; }
.svg-node-3   { animation: svg-node-pulse 4s ease-in-out infinite 1.4s;transform-origin: 60px 220px;  will-change: transform,opacity; }
.svg-node-4   { animation: svg-node-pulse 4s ease-in-out infinite .5s; transform-origin: 260px 220px; will-change: transform,opacity; }
.svg-node-5   { animation: svg-node-pulse 4s ease-in-out infinite 1.1s;transform-origin: 160px 50px;  will-change: transform,opacity; }
.svg-line     { animation: svg-line-dash 2s linear infinite; will-change: stroke-dashoffset; }
.svg-line-2   { animation-delay: -.6s; }
.svg-line-3   { animation-delay: -1.2s; }
.svg-line-4   { animation-delay: -.4s; }
.svg-line-5   { animation-delay: -.9s; }
.svg-bolt     { animation: svg-bolt-glow 2.5s ease-in-out infinite; will-change: opacity; }
.svg-orbit    { offset-rotate: 0deg; }
.svg-orbit-1  { offset-path: path("M160,160 m-60,0 a60,60 0 1,1 120,0 a60,60 0 1,1 -120,0"); animation: svg-orbit-1 6s linear infinite; }
.svg-orbit-2  { offset-path: path("M160,160 m-85,0 a85,85 0 1,1 170,0 a85,85 0 1,1 -170,0"); animation: svg-orbit-1 9s linear infinite reverse; }
.svg-orbit-3  { offset-path: path("M160,160 m-110,0 a110,110 0 1,1 220,0 a110,110 0 1,1 -220,0"); animation: svg-orbit-1 12s linear infinite; }

/* ================================================================
   RESPONSIVE v2
   ================================================================ */
@media (max-width: 860px) {
  .feat-apercu-grid--full { grid-template-columns: repeat(2, 1fr); }
  .feat-apercu-card,
  .feat-apercu-card.bento-lg,
  .feat-apercu-card.bento-md { grid-column: span 1; }
  .process .steps::before { display: none; }
}
@media (max-width: 600px) {
  /* Partenaires : logos compacts sur une rangée, sans séparateurs */
  .partners-strip { padding: 0 20px 48px; }
  .partners-strip-inner { gap: 18px; }
  .partners-list { gap: 18px 26px; }
  .partner-sep { display: none; }
  .partner-logo { height: 20px; }
  .partner-logo-link--card { padding: 4px 7px; }
  .partner-logo-link--card .partner-logo { width: 54px; height: auto; }
  /* Marquee : fondu plus court pour montrer plus de pills */
  .integrations-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  /* Footer : marque empilée et centrée */
  .footer-v2-brand { flex-direction: column; text-align: center; gap: 8px; margin-bottom: 20px; }
}
@media (max-width: 540px) {
  /* Bento : cartes compactes en rangée icône + texte (une colonne) */
  .feat-apercu-grid--full { grid-template-columns: 1fr; gap: 10px; }
  .feat-apercu-card { flex-direction: row; align-items: flex-start; gap: 12px; padding: 18px 16px; }
  .feat-apercu-ico { width: 36px; height: 36px; }
  .feat-apercu-card h4 { margin-bottom: 4px; }
}
@media (max-width: 480px) {
  /* Badge héros : version courte, sans le segment secondaire */
  .hero-badge-extra { display: none; }
  .hero-intro-badge { margin-bottom: 22px; }
  /* Héros : rangées centrées, cohérentes avec la colonne centrée */
  .hero-trust { justify-content: center; }
  /* Process : cartes plus denses */
  .process .step { padding: 20px 16px 18px; }
  .process .steps { gap: 12px; }
  .integrations-strip { padding: 32px 0; }
  .faq-section { padding: 48px 16px; }
  .faq-q { min-height: 44px; }
  .landing-cta-final { padding: 56px 16px; }
  .landing-cta-final-inner { padding: 40px 18px; }
}

/* ── Reduced motion : fallbacks spécifiques v2 ── */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; width: 100%; }
  .marquee-track .integrations-list { flex-wrap: wrap; justify-content: center; width: 100%; }
  .marquee-track .integrations-list[aria-hidden="true"] { display: none; }
  .integrations-marquee { -webkit-mask-image: none; mask-image: none; }
  .hero-intro-badge::before,
  .step-num::before,
  .landing-cta-final-inner::before { animation: none; }
}