@import url('https://fonts.googleapis.com/css2?family=Quantico:wght@700&display=swap');

/* ══ HERO ══════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-start; /* positionné par padding-top, pas centré */
  overflow: hidden;
  padding: 28vh 0 5rem; /* 28vh depuis le haut = grand espace nav→titre */
}

.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.aurora-1, .aurora-2, .aurora-3 { position: absolute; border-radius: 50%; will-change: transform; }
.aurora-1 { width: 700px; height: 500px; top: -10%; left: -5%; background: radial-gradient(ellipse, rgba(90,80,176,.28) 0%, transparent 70%); filter: blur(80px); animation: af1 20s ease-in-out infinite alternate; }
.aurora-2 { width: 500px; height: 400px; top: 20%; right: 0%; background: radial-gradient(ellipse, rgba(139,124,246,.18) 0%, transparent 70%); filter: blur(70px); animation: af2 25s ease-in-out infinite alternate; }
.aurora-3 { width: 400px; height: 350px; bottom: 0%; left: 35%; background: radial-gradient(ellipse, rgba(196,184,255,.10) 0%, transparent 70%); filter: blur(90px); animation: af3 18s ease-in-out infinite alternate; }
@keyframes af1 { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(4%,6%) scale(1.06)} 100%{transform:translate(-2%,3%) scale(.96)} }
@keyframes af2 { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(-5%,4%) scale(1.08)} 100%{transform:translate(3%,-3%) scale(.94)} }
@keyframes af3 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(3%,-5%) scale(1.1)} }

.hero::after {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 100% 55% at 50% 100%, rgba(11,12,16,.95) 0%, transparent 70%),
    radial-gradient(ellipse 25% 100% at 0% 50%, rgba(11,12,16,.75) 0%, transparent 60%),
    radial-gradient(ellipse 25% 100% at 100% 50%, rgba(11,12,16,.75) 0%, transparent 60%);
  pointer-events:none; z-index:1;
}

.hero-mouse-light { position:absolute; inset:0; pointer-events:none; z-index:1; transition:background .15s; }

.hero-inner {
  padding: 0 2vw;
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
  gap:3rem; /* plus d'espace entre sous-titre et boutons */
  max-width: 100%;
  width: 100%;
}

/* Titre : exactement 2 lignes — on force avec font-size en vw pur */
.hero-title {
  font-family: 'Syne', sans-serif;
  /*
    Le hero utilise un conteneur pleine largeur (padding 2vw).
    "Votre présence en ligne," = ligne la plus longue.
    Sur 96vw utile, Syne 800 letter-spacing -0.04em :
    font-size ≈ largeur / (nb_chars × 0.52) ≈ 96vw / (24 × 0.52) ≈ 7.7vw
    On vise 7.2vw pour avoir une marge de sécurité.
    Plafond : 5.5rem (~88px) pour les très grands écrans.
  */
  font-size: clamp(1.7rem, 6.8vw, 5.2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.01em;
  width: 100%;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: normal;
}

@media (max-width: 600px) {
  /* Titre plus grand */
  .hero-title { font-size: 12vw; letter-spacing: -.01em; }
  /* Sous-titre plus petit */
  .hero-sub { font-size: .7rem; max-width: 88vw; text-wrap: balance; }

  /* Boutons en colonne, plus grands */
  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    width: 100%;
  }
  .hero-actions .btn {
    width: min(80vw, 320px);
    font-size: .95rem;
    padding: .95rem 1.5rem;
    justify-content: center;
  }

  /* Stats mobile : 2 stats seulement sur une ligne */
  .section-numbers { padding: 1rem 0; }
  .number-block { padding: .5rem 2rem; }
  /* Masquer "3 sec" (3e enfant) et les 2 séparateurs (2e et 4e enfants) */
  .numbers-grid > div:nth-child(2),
  .numbers-grid > div:nth-child(3),
  .numbers-grid > div:nth-child(4) {
    display: none;
  }
  .numbers-grid { justify-content: center; }
  .number-val { font-size: clamp(2.2rem, 10vw, 3.2rem) !important; }
  .number-label { font-size: .8rem; max-width: 160px; }
  .number-sep { height: 40px; }

  /* Sections : réduire les marges verticales énormes */
  .section-why  { padding: 4rem 0; }
  .section-offer { padding: 4rem 0; }
  .section-testi { padding: 4rem 0; }
  .section-cta  { padding: 4rem 0; }
  .hero { padding: 6rem 0 4rem; align-items: center; } /* centré sur mobile */
}

.hero-sub {
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  max-width: 600px;
  text-align: center;
  /* Forcer chaque phrase sur sa propre ligne */
  white-space: pre-line;
}

.hero-actions {
  display: flex; gap: 1rem; flex-wrap: wrap;
  justify-content: center;
}

/* ══ EYEBROW ══════════════════════════════════════ */
.section-eyebrow {
  font-size:.9rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--purple);
  margin-bottom:.75rem; display:block;
}

/* ══ CHIFFRES ══════════════════════════════════════ */
.section-numbers {
  background:var(--bg-2); padding:5rem 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}

.numbers-grid { display:flex; align-items:center; justify-content:center; gap:2rem; }

.number-block {
  flex:1; text-align:center; padding:1rem 2rem;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
}

.number-sep { width:1px; height:80px; background:var(--line); flex-shrink:0; }

/* Quantico, effet multicolore animé */
.number-val {
  font-family:'Quantico', sans-serif;
  font-size:clamp(3.5rem, 6vw, 6rem);
  font-weight:700; letter-spacing:-.02em;
  line-height:1; white-space:nowrap;
  /* Largeur fixe = les chiffres ne bougent pas pendant le comptage */
  display: inline-block;
  min-width: 4ch; /* largeur de "60%" = valeur la plus large */
  text-align: center;
  font-variant-numeric: tabular-nums;
  /* Gradient statique — zéro vibration */
  background: linear-gradient(135deg, #E0D8FF 0%, #A78BFA 50%, #7C6FE0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.number-label {
  font-size:.88rem; font-weight:400;
  color:var(--muted); line-height:1.5; text-align:center; max-width:160px;
}

/* Halo sur les mots clés des labels */
.stat-glow {
  color: #fff;
  font-weight: 500;
  text-shadow:
    0 0 6px rgba(167,139,250,.7),
    0 0 16px rgba(139,124,246,.4);
}

/* ══ POURQUOI ══════════════════════════════════════ */
.section-why { background:var(--bg); padding:8rem 0 6rem; }

.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:start; }

.why-title {
  font-family:'Syne', sans-serif;
  font-size:clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight:700; line-height:1.2; letter-spacing:-.02em; margin-top:.75rem;
}

.why-right { display:flex; flex-direction:column; gap:1.5rem; }
.why-body { font-size:1.08rem; font-weight:300; color:var(--muted); line-height:1.9; }
.why-em { font-style:italic; color:var(--lilac); }

.glow-text {
  display:inline; color:#fff; font-weight:400;
  /* Halo statique — aucune animation = aucun repaint */
  text-shadow:
    0 0 8px rgba(167,139,250,.75),
    0 0 20px rgba(139,124,246,.45),
    0 0 40px rgba(139,124,246,.2);
}

/* ══ CE QU'ON PROPOSE ══════════════════════════════ */
.section-offer { background:var(--bg-2); padding:6rem 0; }

.offer-title {
  font-family:'Syne', sans-serif;
  font-size:clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight:700; line-height:1.2; letter-spacing:-.02em; margin-bottom:3.5rem;
}

.offer-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }

.offer-card {
  position:relative; background:var(--bg-3);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:2.25rem; display:flex; flex-direction:column; gap:1rem;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.04) inset;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.offer-card:hover {
  border-color: rgba(139,124,246,.4);
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(139,124,246,.1), 0 1px 0 rgba(255,255,255,.06) inset;
}

.card-shimmer {
  position:absolute; top:0; left:-60%; width:55%; height:100%;
  background:linear-gradient(105deg, transparent 15%, rgba(196,184,255,.06) 35%, rgba(255,255,255,.13) 50%, rgba(196,184,255,.06) 65%, transparent 85%);
  opacity:0; pointer-events:none; will-change:left, opacity;
}

.offer-icon {
  width:42px; height:42px; background:rgba(139,124,246,.12);
  border:1px solid rgba(139,124,246,.2); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:var(--lilac); flex-shrink:0;
}
.offer-card h3 { font-family:'Syne', sans-serif; font-size:1.05rem; font-weight:700; color:var(--white); }



/* ══ CTA ════════════════════════════════════════ */
.section-cta { background:var(--bg-2); padding:6rem 0; }

.cta-box {
  position:relative;
  background:linear-gradient(135deg, var(--bg-4) 0%, #1C1830 100%);
  border:1px solid rgba(139,124,246,.22); border-radius:20px;
  padding:5rem 4rem; text-align:center; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:1.5rem;
  box-shadow:0 0 80px rgba(90,80,176,.12), 0 30px 60px rgba(0,0,0,.4);
}
.cta-glow {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:600px; height:300px;
  background:radial-gradient(ellipse, rgba(139,124,246,.14) 0%, transparent 70%);
  pointer-events:none; animation:glowPulse 5s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100%{transform:translate(-50%,-50%) scale(1); opacity:.7}
  50%{transform:translate(-50%,-50%) scale(1.1); opacity:1}
}
.cta-box .t-body { max-width:460px; position:relative; z-index:1; }
.cta-box .t-headline, .cta-box .btn { position:relative; z-index:1; }

/* ══ RESPONSIVE ══════════════════════════════════ */
@media (max-width:960px) {
  .why-grid { grid-template-columns:1fr; gap:3rem; }
  .offer-grid { grid-template-columns:1fr; }
  .testi-grid { grid-template-columns:1fr; }
  .numbers-grid { flex-direction:column; }
  .number-sep { width:80px; height:1px; }
}
@media (max-width:600px) {
  .cta-box { padding:3rem 1.75rem; }
  .offer-card { animation:none; }
}

/* ══ NOMS FLOTTANTS ════════════════════════════════ */
.section-names {
  background: var(--bg);
  padding: 6rem 0 6rem;
}

.names-subtitle {
  font-size: 1rem;
  color: var(--muted);
  font-weight: 300;
  margin-top: .5rem;
}

.floating-names-zone {
  position: relative;
  max-width: 1060px;
  margin: 3rem auto 0;
  padding: 0 clamp(1rem, 3vw, 3rem);
  box-sizing: border-box;
  height: 420px;
  overflow: hidden;
}

/* Wrapper : position + opacité uniquement */
.name-wrapper {
  position: absolute;
  transition: opacity .9s ease;
  cursor: default;
  user-select: none;
  pointer-events: none;
}

.name-inner {
  display: block;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  letter-spacing: .01em;
}

@media (max-width: 600px) {
  .floating-names-zone { height: 400px; }
  .section-names { padding-bottom: 4rem; }
}