/* ============================================================================
   WOSBOT — DESIGN TOKENS v3  (source de vérité, d'après WOSBOT_OS_V1 / ZIP)
   SaaS premium dark · glace/neige/aurores · accent violet signature.
   Ce fichier NE change aucune logique : il ne fait que (re)définir des variables
   CSS et quelques primitives de composants. Chargé APRÈS styles.css → gagne.
   ============================================================================ */
:root {
  /* ---- Palette officielle ZIP ---- */
  --wos-bg:        #0B0F1A;
  --wos-surface:   #111A2B;
  --wos-surface-2: #172238;
  --wos-text:      #E6EAF2;
  --wos-muted:     #94A3B8;
  --wos-purple:    #7B61FF;   /* accent primaire (CTA, marque) */
  --wos-blue:      #4D9BFF;   /* accent secondaire */
  --wos-cyan:      #00E0FF;   /* highlights / data */
  --wos-success:   #35E6A7;
  --wos-warning:   #FFB347;
  --wos-danger:    #FF5C7A;
  --wos-radius-card:   24px;
  --wos-radius-button: 14px;

  /* ---- Aurora (dérivés, réutilisés par les fonds polaires) ---- */
  --wos-aurora-1: #7B61FF;   /* violet */
  --wos-aurora-2: #00E0FF;   /* cyan */
  --wos-aurora-3: #35E6A7;   /* vert glacier */

  /* ---- Remap des variables héritées de la vitrine (styles.css) ----
     styles.css utilise --void/--ice/--ember partout : on les repointe vers la
     palette ZIP → toute la vitrine adopte le violet/cyan sans réécrire styles.css. */
  --void:    #0B0F1A;
  --void-2:  #111A2B;
  --deep:    #172238;
  --line:    rgba(123,97,255,.16);
  --line-2:  rgba(123,97,255,.30);
  --ice:     #7B61FF;   /* accent → violet */
  --ice-br:  #A99BFF;
  --ice-dp:  #4D9BFF;   /* profond → bleu */
  --ember:   #7B61FF;   /* prix → violet marque (au lieu de l'ambre) */
  --ember-dp:#5B45D6;
  --text:    #E6EAF2;
  --muted:   #94A3B8;
  --faint:   #64748B;
}

/* ============================================================================
   PRIMITIVES DE COMPOSANTS (couche fine, non intrusive)
   ============================================================================ */

/* Boutons : primaire en dégradé violet→bleu (comme les maquettes), rayon 14. */
.btn {
  background: linear-gradient(135deg, var(--wos-purple), var(--wos-blue)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--wos-radius-button) !important;
  box-shadow: 0 10px 26px -8px rgba(123,97,255,.55) !important;
}
.btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 14px 34px -8px rgba(123,97,255,.7) !important;
}
/* Boutons secondaires : contour verre, pas de dégradé. */
.btn-secondary, .btn-outline, .btn-panel {
  background: rgba(255,255,255,.05) !important;
  color: var(--wos-text) !important;
  border: 1px solid var(--line-2) !important;
  box-shadow: none !important;
}
.btn-secondary:hover, .btn-outline:hover, .btn-panel:hover {
  border-color: var(--wos-purple) !important;
  color: #fff !important;
}
/* Bouton démo (teal) conservé — sémantique « démo gratuite » distincte. */
.btn-demo {
  background: linear-gradient(135deg, var(--wos-success), #23b988) !important;
  color: #04140e !important;
}

/* Cartes : rayon 24, surface ZIP. */
.pricing-card, .contact-panel, .feature-card {
  border-radius: var(--wos-radius-card) !important;
}

/* ---- Tarifs : grille 3 colonnes (packs réels 13/35/65 €) ---- */
.pricing-head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.pricing-head .section-kicker{ justify-content:center; }
.pricing-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  max-width:1040px; margin:0 auto; align-items:stretch;
}
.pricing-grid .pricing-card{
  display:flex; flex-direction:column; gap:6px; padding:30px 28px; position:relative;
}
.pricing-grid .price-value strong{ font-size:2.9rem; color:var(--wos-text); }
.pricing-grid .pricing-label{ color:var(--wos-muted); font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; margin:0; }
.price-eff{ color:var(--wos-cyan); font-size:.82rem; font-family:var(--f-mono); margin:2px 0 14px; }
.pricing-grid .pricing-list{ margin:6px 0 22px; flex:1; }
.pricing-grid .pricing-cta{ width:100%; margin-top:auto; }
/* Colonne mise en avant */
.pricing-card.popular{
  border:1px solid rgba(123,97,255,.55) !important;
  box-shadow:0 30px 70px -40px rgba(123,97,255,.6), inset 0 1px 0 rgba(255,255,255,.12) !important;
  transform:translateY(-8px);
}
.pricing-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--wos-purple),var(--wos-blue)); color:#fff;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 14px; border-radius:100px; white-space:nowrap; box-shadow:0 8px 20px -6px rgba(123,97,255,.7);
}
@media (max-width:820px){
  .pricing-grid{ grid-template-columns:1fr; max-width:420px; }
  .pricing-card.popular{ transform:none; }
}

/* Liens de nav en survol → cyan (accent data du ZIP). */
.nav-links > a:hover { color: var(--wos-cyan) !important; }

/* Focus visible cohérent avec l'accent. */
:focus-visible { outline: 2px solid var(--wos-purple) !important; outline-offset: 3px; }

/* ---- Hero : badge, chips de features, ligne de confiance (design maquette) ---- */
.hero-badge{
  display:inline-flex; align-items:center; gap:.5em; align-self:flex-start;
  padding:7px 14px; border-radius:100px;
  background:linear-gradient(135deg, rgba(123,97,255,.16), rgba(77,155,255,.12));
  border:1px solid rgba(123,97,255,.4); color:#c7bcff;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
}
.hero-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--wos-cyan); box-shadow:0 0 10px var(--wos-cyan); }
.hero-chips{ list-style:none; padding:0; margin:4px 0 2px; display:flex; flex-wrap:wrap; gap:10px 18px; }
.hero-chips li{ display:inline-flex; align-items:center; gap:.5em; color:var(--wos-text); font-size:.9rem; }
.hero-chips svg{ color:var(--wos-cyan); flex-shrink:0; }
.hero-trust{ display:flex; align-items:center; gap:12px; margin-top:2px; color:var(--wos-muted); font-size:.86rem; }
.hero-avatars{ display:inline-flex; }
.hero-avatars i{
  width:28px; height:28px; border-radius:50%; margin-left:-8px; border:2px solid var(--wos-bg);
  background:linear-gradient(135deg,var(--wos-purple),var(--wos-blue));
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-style:normal; font-family:var(--f-mono); font-size:.7rem; font-weight:700;
  text-transform:uppercase; line-height:1;
}
.hero-avatars i:first-child{ margin-left:0; }
.hero-avatars i:nth-child(2){ background:linear-gradient(135deg,#4D9BFF,#00E0FF); }
.hero-avatars i:nth-child(3){ background:linear-gradient(135deg,#7B61FF,#FF5C7A); }
.hero-avatars i:nth-child(4){ background:linear-gradient(135deg,#35E6A7,#4D9BFF); }

/* ---- Bande de stats sous le hero (4 cellules, chiffres réels) ---- */
.stat-band{ padding:0; margin-top:-8px; position:relative; z-index:4; }
.stat-band-inner{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  background:rgba(255,255,255,.05); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--wos-radius-card);
  padding:22px 26px; box-shadow:0 24px 60px -30px rgba(0,0,0,.6);
}
.stat-cell{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; }
.stat-cell svg{ grid-row:1 / span 2; color:var(--wos-purple); }
.stat-cell strong{ font-family:var(--f-grotesk); font-size:1.7rem; font-weight:700; color:var(--wos-text); line-height:1; }
.stat-cell span{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--wos-muted); }
@media (max-width:820px){
  .stat-band-inner{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:460px){
  .stat-band-inner{ grid-template-columns:1fr; }
}

/* Scène mascotte officielle dans le hero (drapeau W sous l'aurore).
   Image plein cadre à droite, fondue vers la gauche pour rejoindre le texte. */
.hero-art{
  position:absolute; top:0; right:0; bottom:0; width:54%; z-index:1; pointer-events:none;
  background:url('/images/mascot-flag.jpg') center right / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 50%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 50%);
}
@media (prefers-reduced-motion: no-preference){
  .hero-art{ animation: heroArtFloat 9s ease-in-out infinite; }
  @keyframes heroArtFloat{ 0%,100%{background-position:center right} 50%{background-position:center right -6px} }
}
@media (max-width: 900px){
  .hero-art{ width:100%; opacity:.28;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 70%);
            mask-image:linear-gradient(180deg,#000 0%,transparent 70%); }
}

/* ============================================================================
   HOME v3 — HERO COMPACT (tout au-dessus de la ligne de flottaison, cf. maquette)
   - retire le décor arctique de la PAGE (aurora/étoiles/montagnes) : le fond
     redevient un dark plat ; l'aurore ne subsiste que DANS l'image mascotte.
   - titre plus petit, mascotte plus petite, hero raccourci, stats remontées.
   ============================================================================ */
.frost-bg, .polar-stars,
.scene-glow, .scene-peaks, .scene-sparks { display:none !important; }

body{ background:#0B0F1A !important; }

.hero-stage{ min-height:auto !important; padding-block:22px 34px !important; }
.hero-center{ gap:13px !important; }
.hero-center > *{ max-width:560px; }
.hero-center h1{
  font-size:clamp(1.75rem, 3.1vw, 2.65rem) !important;
  line-height:1.1 !important; margin:2px 0 4px !important;
  text-shadow:none !important;
}
.hero-center .hero-text{ font-size:.98rem !important; max-width:44ch !important; }
.hero-legal-note{ margin-top:2px; }

/* Mascotte plus petite, ancrée à droite (l'image garde son aurore) */
.hero-art{ width:42% !important; }
@media (max-width:1100px){ .hero-art{ width:46% !important; } }

/* Bande de stats remontée, collée sous le hero */
.stat-band{ margin-top:0 !important; }
.stat-band-inner{ padding:16px 24px !important; }
.stat-cell strong{ font-size:1.5rem !important; }

/* ---- Corrections hero (retours user) ---- */
/* 1) Texte collé à gauche (on retire la marge du conteneur centré) */
.hero-center{ max-width:none !important; margin-inline:0 !important;
  padding-left:clamp(24px, 3.5vw, 56px) !important; padding-right:var(--gutter) !important; }

/* 2) Mascotte : cover (bords = bords de zone) + vignette forte -> aucun cadre, pierre visible */
.hero-art{
  width:44% !important;
  background-size:cover !important;
  background-position:center 42% !important;
  animation:none !important;
  -webkit-mask-image:radial-gradient(72% 76% at 56% 50%, #000 48%, transparent 90%) !important;
          mask-image:radial-gradient(72% 76% at 56% 50%, #000 48%, transparent 90%) !important;
}

/* 3) « The complete WOS tools suite… » descend sous la 1re page */
.trust-band{ margin-top:120px !important; }

/* ============================================================================
   HOME v3 — FOND HERO PLEIN CADRE (image paysage aurore + mascotte)
   ============================================================================ */
.hero-art{ display:none !important; }               /* mascotte désormais DANS le fond */
.hero{
  background:url('/images/hero-bg.webp') center 32% / cover no-repeat !important;
  position:relative;
}
.hero::before{                                       /* voile lisibilité : sombre à gauche, dégagé à droite + fondu bas */
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, #0B0F1A 0%, rgba(11,15,26,.82) 30%, rgba(11,15,26,.35) 55%, rgba(11,15,26,0) 80%),
    linear-gradient(180deg, rgba(11,15,26,.45) 0%, transparent 16%, transparent 68%, #0B0F1A 100%);
}
.hero .nav, .hero .hero-stage{ position:relative; z-index:2; }
@media (max-width:900px){
  .hero{ background-position:center 28% !important; }
  .hero::before{ background:linear-gradient(180deg, rgba(11,15,26,.78) 0%, rgba(11,15,26,.55) 45%, #0B0F1A 100%); }
}

/* ---- Fond hero : plein écran + fondu total au niveau du texte (retours user) ---- */
.hero-stage{ min-height:calc(100vh - 116px) !important; display:flex; align-items:center; }
.hero{ background-position:center 40% !important; }
.hero::before{
  background:
    linear-gradient(90deg, #0B0F1A 0%, #0B0F1A 42%, rgba(11,15,26,.55) 60%, rgba(11,15,26,0) 84%),
    linear-gradient(180deg, rgba(11,15,26,.30) 0%, transparent 13%, transparent 60%, #0B0F1A 100%) !important;
}
/* Bande de stats remontée pour chevaucher le bas du hero (reste visible plein écran) */
.stat-band{ margin-top:-62px !important; position:relative; z-index:6 !important; }
@media (max-width:900px){
  .hero-stage{ min-height:auto !important; }
  .stat-band{ margin-top:0 !important; }
}

/* ---- Textes remontés + fondu plus léger/progressif (retours user) ---- */
.hero-stage{ align-items:flex-start !important; padding-top:26px !important; min-height:calc(100vh - 158px) !important; }
.hero::before{
  background:
    linear-gradient(90deg, #0B0F1A 0%, rgba(11,15,26,.92) 16%, rgba(11,15,26,.66) 38%, rgba(11,15,26,.30) 60%, rgba(11,15,26,0) 88%),
    linear-gradient(180deg, rgba(11,15,26,.26) 0%, transparent 12%, transparent 64%, #0B0F1A 100%) !important;
}

/* ---- Fondu coin haut-gauche marqué + barre de nav en verre (retours user) ---- */
.hero::before{
  background:
    radial-gradient(95% 105% at 0% 0%, rgba(11,15,26,.94) 0%, rgba(11,15,26,.42) 38%, rgba(11,15,26,0) 66%),
    linear-gradient(90deg, #0B0F1A 0%, rgba(11,15,26,.80) 15%, rgba(11,15,26,.5) 37%, rgba(11,15,26,.2) 60%, rgba(11,15,26,0) 88%),
    linear-gradient(180deg, rgba(11,15,26,.22) 0%, transparent 12%, transparent 66%, #0B0F1A 100%) !important;
}
/* Barre de nav : bandeau plein largeur en verre par-dessus le fond du hero */
.hero{ position:relative; }
.hero::after{
  content:''; position:absolute; top:0; left:0; right:0; height:82px; z-index:1; pointer-events:none;
  background:rgba(11,15,26,.45);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.hero .nav{ z-index:3 !important; }

/* ---- Texte hero aligné sur la colonne de contenu (bande de stats) — repère user ---- */
.hero-center{
  max-width:var(--maxw) !important; margin-inline:auto !important;
  padding-left:26px !important; padding-right:var(--gutter) !important;
}
@media (max-width:900px){ .hero-center{ padding-left:var(--gutter) !important; } }

/* ---- Image de fond jusqu'en bas + fondu bas allégé (retours user) ---- */
.hero-stage{ min-height:calc(100vh - 120px) !important; }
.hero{ background-position:center 44% !important; }
.hero::before{
  background:
    radial-gradient(95% 105% at 0% 0%, rgba(11,15,26,.94) 0%, rgba(11,15,26,.42) 38%, rgba(11,15,26,0) 66%),
    linear-gradient(90deg, #0B0F1A 0%, rgba(11,15,26,.80) 15%, rgba(11,15,26,.5) 37%, rgba(11,15,26,.2) 60%, rgba(11,15,26,0) 88%),
    linear-gradient(180deg, rgba(11,15,26,.22) 0%, transparent 14%, transparent 86%, rgba(11,15,26,.5) 100%) !important;
}
/* Bande de stats remontée dans l'image (fond visible derrière) */
.stat-band{ margin-top:-92px !important; }
@media (max-width:900px){ .stat-band{ margin-top:0 !important; } }

/* ============================================================================
   SECTION VIDÉO (#preview / "Features") — fond aurora paysage (cf. maquette)
   Video conservee, encadree d une bordure violette lumineuse sur fond immersif.
   ============================================================================ */
/* Fondus empiles DANS le background de #preview (couches au-dessus de l'image) :
   garanti au-dessus de l'aurore, insensible aux surprises de stacking d'un ::before. */
#preview{ position:relative; overflow:hidden; min-height:100vh !important; display:flex; align-items:center;
  background:
    /* fondu gauche/droite : fond plein seulement au bord, l'aurore respire au centre */
    linear-gradient(90deg, #0B0F1A 0%, rgba(11,15,26,.78) 8%, rgba(11,15,26,.3) 20%, transparent 34%, transparent 66%, rgba(11,15,26,.3) 80%, rgba(11,15,26,.78) 92%, #0B0F1A 100%),
    /* fondu haut/bas + lisibilite titre */
    linear-gradient(180deg, #0B0F1A 0%, rgba(11,15,26,.72) 12%, rgba(11,15,26,.22) 30%, transparent 44%, transparent 66%, rgba(11,15,26,.35) 86%, #0B0F1A 100%),
    /* vignette douce */
    radial-gradient(72% 62% at 50% 52%, transparent 0%, transparent 56%, rgba(11,15,26,.28) 100%),
    /* image aurora (couche du bas) */
    url('/images/features-bg.webp') center 42% / cover no-repeat
    !important; }
#preview > .container{ width:100%; position:relative; z-index:1; }
#preview{ padding-block:40px !important; }
/* Cadre video : bordure violette lumineuse + halo (comme la maquette) */
#preview .video-embed{
  position:relative;
  max-width:1000px !important;
  border-radius:24px !important;
  border:1.5px solid rgba(155,130,255,.75) !important;
  box-shadow:
    inset 0 0 0 1px rgba(180,160,255,.22),
    0 0 0 1px rgba(123,97,255,.4),
    0 0 40px rgba(123,97,255,.45),
    0 0 90px -10px rgba(77,155,255,.35),
    0 50px 120px -45px rgba(0,0,0,.9) !important;
}
/* Facade « clic pour lire » : poster assombri + bouton lecture violet custom.
   L'iframe reste dans le DOM (SEO) ; la videnavue reelle demarre au clic. */
#preview .video-embed .vplayer-cover{
  position:absolute; inset:0; z-index:2; width:100%; height:100%;
  border:0; padding:0; margin:0; cursor:pointer;
  display:grid; place-items:center;
  border-radius:inherit; overflow:hidden;
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
#preview .video-embed .vplayer-cover::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:
    radial-gradient(42% 48% at 50% 50%, rgba(11,15,26,.12), rgba(11,15,26,.5) 100%),
    linear-gradient(180deg, rgba(11,15,26,.5) 0%, rgba(11,15,26,.22) 42%, rgba(11,15,26,.6) 100%);
  transition:opacity .3s ease;
}
#preview .video-embed .vplayer-cover:hover::before{ opacity:.82; }
#preview .vplayer-play{
  position:relative; z-index:1;
  width:88px; height:88px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--wos-purple,#7B61FF), var(--wos-blue,#4D9BFF));
  box-shadow:0 0 0 8px rgba(123,97,255,.18), 0 0 40px rgba(123,97,255,.6), 0 18px 40px -12px rgba(0,0,0,.7);
  transition:transform .2s ease, box-shadow .2s ease;
}
#preview .video-embed .vplayer-cover:hover .vplayer-play{
  transform:scale(1.07);
  box-shadow:0 0 0 10px rgba(123,97,255,.22), 0 0 55px rgba(123,97,255,.78), 0 18px 40px -12px rgba(0,0,0,.7);
}
#preview .vplayer-play svg{ width:36px; height:36px; fill:#fff; margin-left:5px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
#preview .video-embed.is-playing .vplayer-cover{ opacity:0; visibility:hidden; pointer-events:none; }
@media (prefers-reduced-motion: reduce){
  #preview .vplayer-play, #preview .video-embed .vplayer-cover, #preview .video-embed .vplayer-cover::before{ transition:none; }
}

/* ============================================================================
   SECTION "COMMENT CA MARCHE" (#how) — fond aurora paysage + mascotte, hauteur 900
   Meme traitement que la section video : fondu 4 bords empile dans le background.
   ============================================================================ */
#how{
  position:relative; overflow:hidden;
  max-width:none !important; width:100%;
  min-height:900px !important;
  display:flex; flex-direction:column; justify-content:center;
  padding-inline:24px !important;
  padding-block:26px !important;                     /* reduit pour verrouiller a 900px */
  background:
    /* fondu gauche/droite */
    linear-gradient(90deg, #0B0F1A 0%, rgba(11,15,26,.78) 8%, rgba(11,15,26,.3) 20%, transparent 34%, transparent 66%, rgba(11,15,26,.3) 80%, rgba(11,15,26,.78) 92%, #0B0F1A 100%),
    /* fondu haut/bas */
    linear-gradient(180deg, #0B0F1A 0%, rgba(11,15,26,.72) 12%, rgba(11,15,26,.22) 30%, transparent 44%, transparent 66%, rgba(11,15,26,.35) 86%, #0B0F1A 100%),
    /* vignette douce */
    radial-gradient(72% 62% at 50% 52%, transparent 0%, transparent 56%, rgba(11,15,26,.28) 100%),
    /* image aurora + mascotte (couche du bas) */
    url('/images/how-bg.webp') center 42% / cover no-repeat
    !important;
}
#how > .how-inner{
  position:relative; z-index:1;
  width:100%; max-width:1240px; margin-inline:auto;
}
#how .how-subtitle{ max-width:660px; margin-inline:auto; }

/* --- 3 cartes principales --- */
#how .how-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px; }
#how .how-card{
  position:relative; padding:26px 26px 22px; border-radius:20px;
  background:rgba(18,22,40,.55);
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(139,116,255,.22);
  box-shadow:0 30px 70px -45px #000, inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#how .how-card:hover{ transform:translateY(-3px); border-color:rgba(139,116,255,.45); box-shadow:0 40px 80px -45px #000, 0 0 40px -12px rgba(123,97,255,.4), inset 0 1px 0 rgba(255,255,255,.06); }
#how .how-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
#how .how-num{ font-family:'Space Mono', monospace; font-size:15px; letter-spacing:.12em; color:rgba(155,130,255,.9); }
#how .how-ico{ width:64px; height:64px; border-radius:16px; display:grid; place-items:center; }
#how .how-ico svg{ width:30px; height:30px; }
#how .how-ico-p{ color:#c4b5ff; background:radial-gradient(120% 120% at 30% 20%, rgba(123,97,255,.35), rgba(123,97,255,.06)); box-shadow:inset 0 0 0 1px rgba(139,116,255,.35), 0 0 26px rgba(123,97,255,.35); }
#how .how-ico-b{ color:#9cc7ff; background:radial-gradient(120% 120% at 30% 20%, rgba(77,155,255,.35), rgba(77,155,255,.06)); box-shadow:inset 0 0 0 1px rgba(77,155,255,.35), 0 0 26px rgba(77,155,255,.35); }
#how .how-card h3{ margin:0 0 10px; font-size:20px; line-height:1.25; }
#how .how-card p{ margin:0; color:rgba(210,214,230,.72); font-size:14.5px; line-height:1.55; }
#how .how-prog{ display:block; margin-top:20px; height:4px; border-radius:99px; background:rgba(255,255,255,.08); position:relative; overflow:hidden; }
#how .how-prog i{ position:absolute; left:0; top:0; bottom:0; width:38%; border-radius:99px; background:linear-gradient(90deg,#7B61FF,#4D9BFF); box-shadow:0 0 12px rgba(123,97,255,.6); }
#how .how-card:nth-child(2) .how-prog i{ width:30%; }
#how .how-card:nth-child(3) .how-prog i{ width:32%; }

/* --- rangs de mini-atouts --- */
#how .how-feats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px 20px; margin-top:16px; }
#how .how-feats-box{ padding:20px 24px; border-radius:20px; border:1px solid rgba(139,116,255,.18); background:rgba(15,18,34,.5); backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15); box-shadow:0 30px 70px -50px #000; }
#how .how-feat{ display:flex; gap:12px; align-items:flex-start; padding:8px 8px; }
#how .how-feat-ico{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; }
#how .how-feat-ico svg{ width:20px; height:20px; }
#how .how-feat h4{ margin:0 0 3px; font-size:14.5px; font-weight:700; color:#f2f3f8; }
#how .how-feat p{ margin:0; font-size:12.5px; line-height:1.45; color:rgba(200,205,225,.6); }

@media (prefers-reduced-motion: reduce){ #how .how-card{ transition:none; } }
@media (max-width:960px){
  #how{ min-height:0 !important; padding-block:72px !important; }
  #how .how-cards{ grid-template-columns:1fr; }
  #how .how-feats{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  #how .how-feats{ grid-template-columns:1fr; }
}

/* ============================================================================
   SECTION TARIFS (#pricing) — fond aurora cite + mascotte, hauteur 900, fondu 4 bords
   ============================================================================ */
#pricing{
  position:relative; overflow:hidden;
  min-height:900px !important;
  padding-block:26px !important;                     /* reduit pour verrouiller la section a 900px (tout visible au clic nav) */
  display:flex; flex-direction:column; justify-content:center;
  background:
    /* fondu gauche/droite */
    linear-gradient(90deg, #0B0F1A 0%, rgba(11,15,26,.78) 8%, rgba(11,15,26,.3) 20%, transparent 34%, transparent 66%, rgba(11,15,26,.3) 80%, rgba(11,15,26,.78) 92%, #0B0F1A 100%),
    /* fondu haut/bas */
    linear-gradient(180deg, #0B0F1A 0%, rgba(11,15,26,.72) 12%, rgba(11,15,26,.22) 30%, transparent 44%, transparent 66%, rgba(11,15,26,.35) 86%, #0B0F1A 100%),
    /* vignette douce */
    radial-gradient(72% 62% at 50% 52%, transparent 0%, transparent 56%, rgba(11,15,26,.28) 100%),
    /* image aurora cite + mascotte (couche du bas) */
    url('/images/pricing-bg.webp') center 40% / cover no-repeat
    !important;
}
#pricing > .container{ position:relative; z-index:1; }

/* Puces "check" violettes sur les listes + separateur sous le prix */
#pricing .price-eff{ padding-top:14px; border-top:1px solid rgba(139,116,255,.16); }
#pricing .pricing-list{ list-style:none; padding:0; margin:0 0 22px; display:grid; gap:12px; }
#pricing .pricing-list li{ position:relative; padding-left:30px; color:#e7e9f2; line-height:1.35; }
#pricing .pricing-list li::before{
  content:''; position:absolute; left:0; top:0; width:20px; height:20px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-4.5'/%3E%3C/svg%3E");
}

/* Rangee d'atouts sous les cartes (encadre verre) */
#pricing .price-perks{
  margin-top:22px; padding:20px 26px; border-radius:20px;
  border:1px solid rgba(139,116,255,.18); background:rgba(15,18,34,.5);
  backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 30px 70px -50px #000;
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px 20px;
}
#pricing .price-perk{ display:flex; gap:12px; align-items:flex-start; padding:8px; }
#pricing .pk-ico{ flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; }
#pricing .pk-ico svg{ width:22px; height:22px; }
#pricing .pk-p{ color:#c4b5ff; background:radial-gradient(120% 120% at 30% 20%, rgba(123,97,255,.35), rgba(123,97,255,.06)); box-shadow:inset 0 0 0 1px rgba(139,116,255,.35), 0 0 24px rgba(123,97,255,.3); }
#pricing .price-perk h4{ margin:0 0 3px; font-size:14.5px; font-weight:700; color:#f2f3f8; }
#pricing .price-perk p{ margin:0; font-size:12.5px; line-height:1.45; color:rgba(200,205,225,.62); }

@media (max-width:960px){
  #pricing{ min-height:0 !important; padding-block:72px !important; }
  #pricing .price-perks{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  #pricing .price-perks{ grid-template-columns:1fr; }
}

/* ============================================================================
   SECTION FAQ (#faq) — fond aurora paysage + mascotte, hauteur 900, fondu 4 bords
   Liste FAQ dans un panneau verre pour la lisibilite.
   ============================================================================ */
#faq{
  position:relative; overflow:hidden;
  max-width:none !important; width:100%;
  min-height:900px !important;
  padding-block:26px !important;
  padding-inline:24px !important;
  display:flex; flex-direction:column; justify-content:center;
  background:
    linear-gradient(90deg, #0B0F1A 0%, rgba(11,15,26,.78) 8%, rgba(11,15,26,.3) 20%, transparent 34%, transparent 66%, rgba(11,15,26,.3) 80%, rgba(11,15,26,.78) 92%, #0B0F1A 100%),
    linear-gradient(180deg, #0B0F1A 0%, rgba(11,15,26,.72) 12%, rgba(11,15,26,.22) 30%, transparent 44%, transparent 66%, rgba(11,15,26,.35) 86%, #0B0F1A 100%),
    radial-gradient(72% 62% at 50% 52%, transparent 0%, transparent 56%, rgba(11,15,26,.28) 100%),
    url('/images/faq-bg.webp') center 42% / cover no-repeat
    !important;
}
#faq > .section-heading{ position:relative; z-index:1; }
/* Conteneur transparent : chaque question devient une carte verre separee (cf. maquette) */
#faq > .faq-list{
  position:relative; z-index:1; width:100%; max-width:900px; margin:36px auto 0;
  display:flex; flex-direction:column; gap:16px;
}
#faq .faq-item{
  border:1px solid rgba(139,116,255,.2) !important;
  border-radius:16px;
  background:rgba(17,20,36,.62);
  backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 22px 55px -42px #000;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
#faq .faq-item:hover{ border-color:rgba(139,116,255,.45) !important; background:rgba(21,25,46,.72); }
#faq .faq-item[open]{ border-color:rgba(139,116,255,.5) !important; box-shadow:0 22px 55px -42px #000, 0 0 32px -14px rgba(123,97,255,.5); }
#faq .faq-item summary{ padding:20px 24px !important; font-size:1.05rem; }
#faq .faq-item summary::after{ color:var(--wos-purple); font-size:1.55rem; font-weight:400; }
#faq .faq-item p{ padding:0 24px 22px !important; color:rgba(210,214,230,.78); }
@media (max-width:960px){
  #faq{ min-height:0 !important; padding-block:72px !important; }
}

/* ============================================================================
   SECTION CONTACT (#contact) — fond aurora lac gelé + mascotte, hauteur 900, fondu.
   Regroupe le panneau contact (haut) + le disclaimer legal (bas), facon maquette.
   ============================================================================ */
#contact{
  position:relative; overflow:hidden;
  max-width:none !important; width:100%;
  min-height:900px !important;
  padding-block:26px !important;
  padding-inline:24px !important;
  display:flex; flex-direction:column; justify-content:center;
  background:
    linear-gradient(90deg, #0B0F1A 0%, rgba(11,15,26,.78) 8%, rgba(11,15,26,.3) 20%, transparent 34%, transparent 66%, rgba(11,15,26,.3) 80%, rgba(11,15,26,.78) 92%, #0B0F1A 100%),
    linear-gradient(180deg, #0B0F1A 0%, rgba(11,15,26,.72) 12%, rgba(11,15,26,.22) 30%, transparent 44%, transparent 66%, rgba(11,15,26,.35) 86%, #0B0F1A 100%),
    radial-gradient(72% 62% at 50% 52%, transparent 0%, transparent 56%, rgba(11,15,26,.28) 100%),
    url('/images/contact-bg.webp') center 42% / cover no-repeat
    !important;
}
#contact > .contact-inner{
  position:relative; z-index:1; width:100%; max-width:1080px; margin-inline:auto;
  display:flex; flex-direction:column; gap:22px;
}
/* Panneau haut : contact/vente (verre sombre, arrondi maquette) */
#contact .contact-panel{
  margin:0 !important;
  background:rgba(13,16,30,.6) !important;
  backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(139,116,255,.25) !important;
  border-radius:22px !important;
  box-shadow:0 40px 90px -50px #000 !important;
}
/* Panneau bas : disclaimer legal regroupé ici */
#contact .trust-band{
  margin:0 !important; text-align:center;
  background:rgba(13,16,30,.55) !important;
  backdrop-filter:blur(16px) saturate(1.15); -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(139,116,255,.2) !important;
  border-radius:22px !important;
  padding:26px 30px !important;
  box-shadow:0 40px 90px -55px #000;
}
#contact .trust-band p{ margin-inline:auto; color:rgba(220,224,238,.82); }
#contact .legal-inline-links{ margin-top:12px; }
#contact .legal-inline-links a{ color:var(--wos-purple); }
@media (max-width:960px){
  #contact{ min-height:0 !important; padding-block:72px !important; }
}

/* ============================================================================
   CORRECTIFS RESPONSIVE (mobile / tablette)
   ============================================================================ */
/* Section video : plus de min-height 100vh sur mobile (evite un grand vide) */
@media (max-width:960px){
  #preview{ min-height:auto !important; padding-block:56px !important; }
  #preview .video-embed{ max-width:100% !important; }
}
/* Bande de stats : 2x2 sur petit ecran (4 colonnes trop serrees) */
@media (max-width:640px){
  .stat-band-inner{ grid-template-columns:1fr 1fr; gap:12px; padding:18px; }
  .stat-cell strong{ font-size:1.5rem; }
}
/* Cartes "how" et perks tarifs : deja gerees ; on assure aussi la lisibilite du titre
   des sections immersives sur mobile (moins de padding lateral extreme). */
@media (max-width:560px){
  #how, #pricing, #faq, #contact{ padding-inline:16px !important; }
  #faq .faq-item summary{ font-size:.98rem; padding:16px 18px !important; }
  #faq .faq-item p{ padding:0 18px 18px !important; }
}

/* ============================================================================
   RUBAN D'ANNONCE — essai gratuit 3 jours (haut de la home)
   ============================================================================ */
#trial-ribbon{
  position:relative; z-index:29;
  background:linear-gradient(90deg,#5a3ad6,#7B61FF 35%,#4D9BFF 70%,#5a3ad6);
  color:#fff; border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 6px 24px -12px rgba(123,97,255,.8);
}
#trial-ribbon .trial-ribbon-in{
  max-width:1240px; margin:0 auto; padding:8px 16px;
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
}
#trial-ribbon .tr-msg{ font-size:13.5px; letter-spacing:.01em; }
#trial-ribbon .tr-msg strong{ font-weight:800; }
#trial-ribbon .tr-sub{ opacity:.9; font-weight:500; }
#trial-ribbon .tr-gift{ font-size:15px; }
#trial-ribbon .tr-cta{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.16); color:#fff; text-decoration:none;
  font-weight:700; font-size:12.5px; padding:5px 14px; border-radius:100px;
  border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(6px);
  transition:background .15s ease, transform .15s ease;
}
#trial-ribbon .tr-cta:hover{ background:rgba(255,255,255,.28); transform:translateY(-1px); }
@media (max-width:640px){
  #trial-ribbon .trial-ribbon-in{ gap:10px; padding:7px 14px; }
  #trial-ribbon .tr-sub{ display:none; }
  #trial-ribbon .tr-msg{ font-size:12.5px; }
}

/* Menu : chaque item sur une seule ligne (évite « Analyse de rapport » sur 3 lignes) */
.nav-links > a{ white-space:nowrap; }
@media (min-width:1181px){ .nav-links{ gap:18px; } }
/* Sous 1180px le menu complet + le nouvel item déborderaient → on bascule sur le burger
   (tous les liens restent accessibles dans le drawer). Au-dessus : menu texte complet. */
@media (max-width:1180px){
  .nav-burger{ display:flex !important; }
  .nav-links > a:not(.btn):not(.language-switcher){ display:none !important; }
}

/* ============================================================================
   CTA PERSISTANT — barre pleine largeur sur mobile (81 % du trafic)
   ============================================================================ */
@media (max-width:640px){
  .floating-cta{ left:12px; right:12px; bottom:12px; }
  .floating-cta .btn{
    display:flex; width:100%; justify-content:center; text-align:center;
    padding:14px 18px !important; font-size:15px;
    box-shadow:0 14px 34px -8px rgba(123,97,255,.75) !important;
  }
}

/* Ancrage de prix : recadre le tarif à l'échelle de l'alliance (pas une dépense perso) */
.price-anchor{
  display:inline-block; margin:6px auto 10px; padding:8px 16px; border-radius:100px;
  background:linear-gradient(135deg, rgba(123,97,255,.16), rgba(77,155,255,.12));
  border:1px solid rgba(123,97,255,.34); color:#c7bcff;
  font-size:.92rem; font-weight:600; line-height:1.45; max-width:52ch;
}
@media (max-width:560px){ .price-anchor{ font-size:.86rem; padding:8px 14px; } }