/* ==========================================================================
   NEON OVERLAY — Style C bleu nuit/violet/néon
   À inclure APRÈS les autres CSS pour override sur pages cibles/packs
   ========================================================================== */

:root{
  --orange:#FF6B1A;
  --magenta:#FF2E88;
  --cyan:#00FFFF;
  --cyan-soft:#00D9E0;
  --violet:#A855F7;
  --bg-deep:#070B1F;
  --bg-blue:#0B1437;
  --bg-violet:#1A0F3D;
  --bg-mid:#13174A;
  --neon-border:rgba(0,255,255,0.2);
}

/* ===== BODY DÉGRADÉ BLEU/VIOLET ===== */
body{
  background:
    linear-gradient(180deg,
      var(--bg-deep) 0%,
      var(--bg-blue) 25%,
      var(--bg-violet) 60%,
      var(--bg-blue) 85%,
      var(--bg-deep) 100%
    ) !important;
  background-attachment:fixed !important;
  color:#fff !important;
}

/* Texte par défaut blanc */
p, li, td, th, dd, dt{color:rgba(255,255,255,.85)}
.muted, .text-muted{color:rgba(255,255,255,.55) !important}

/* ===== HEADER ===== */
header.header, header{
  background:rgba(7,11,31,.75) !important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(168,92,247,.2) !important;
}

/* ===== HERO COMMUN ===== */
.hero, .hero-pack, [class*="hero"]{
  position:relative;
}
/* Slideshow : position absolute obligatoire — ne pas laisser [class*="hero"] l'écraser */
.hero-slideshow{position:absolute !important;inset:0 !important;z-index:0 !important}
.hero-slide{position:absolute !important;inset:0 !important}

/* Mesh background décoratif (orbes de couleur) */
body::before{
  content:'';
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 25%, rgba(168,92,247,.2) 0%, transparent 45%),
    radial-gradient(circle at 80% 60%, rgba(255,46,136,.12) 0%, transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(0,217,224,.15) 0%, transparent 50%),
    radial-gradient(circle at 90% 20%, rgba(255,107,26,.1) 0%, transparent 40%);
}

/* Scan lines très discrètes */
body::after{
  content:'';
  position:fixed;top:0;left:0;right:0;bottom:0;
  z-index:300;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,255,255,0.012) 0px,rgba(0,255,255,0.012) 1px,transparent 1px,transparent 5px);
  mix-blend-mode:overlay;
  opacity:.5;
}

/* ===== TITRES NÉON ===== */
h1{
  color:#fff !important;
  text-shadow:
    0 0 10px rgba(255,255,255,.5),
    0 0 30px rgba(0,255,255,.3),
    0 0 60px rgba(0,255,255,.15) !important;
}
h2{
  color:#fff !important;
  text-shadow:0 0 10px rgba(255,255,255,.4), 0 0 25px rgba(0,255,255,.2) !important;
}
h3{color:#fff !important}

.highlight, em.highlight, span.highlight{
  background:linear-gradient(135deg,var(--orange),var(--magenta),var(--violet)) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  filter:drop-shadow(0 0 15px rgba(255,46,136,.4));
}

/* ===== BOUTONS NÉON ===== */
.btn-primary, .btn.btn-primary, a.btn-primary, .nav-cta, button.btn-primary{
  background:linear-gradient(135deg,var(--orange),var(--magenta)) !important;
  color:#fff !important;
  text-shadow:0 0 8px rgba(255,255,255,.4);
  box-shadow:
    0 0 15px rgba(255,46,136,.4),
    0 0 30px rgba(255,46,136,.2),
    inset 0 0 15px rgba(255,255,255,.1) !important;
  border:none !important;
  transition:all .3s !important;
}
.btn-primary:hover, .nav-cta:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 25px rgba(255,46,136,.7),
    0 0 50px rgba(255,46,136,.4) !important;
}
.btn-dark, .btn.btn-dark{
  background:rgba(0,0,0,.5) !important;
  color:var(--cyan) !important;
  border:1.5px solid var(--cyan) !important;
  text-shadow:0 0 6px var(--cyan);
  box-shadow:0 0 12px rgba(0,255,255,.3), inset 0 0 10px rgba(0,255,255,.05) !important;
}
.btn-ghost, .btn.btn-ghost{
  background:rgba(0,0,0,.4) !important;
  color:#fff !important;
  border:1.5px solid rgba(168,92,247,.4) !important;
  box-shadow:0 0 10px rgba(168,92,247,.2) !important;
}

/* ===== CARTES NÉON (packs, solutions, IA, etc.) ===== */
.pack-card, .ia-card, .solution, .pain-card, .step, .faq-item,
.upsell-card, .target-card, .reseaux-card, .package-card,
.demo-card, .feature-card, .why-card, .point-card,
[class*="card"]:not(.testimonial-card){
  background:rgba(11,20,55,.65) !important;
  border:1px solid rgba(0,255,255,.2) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:rgba(255,255,255,.9) !important;
  transition:all .3s !important;
}
.pack-card *, .ia-card *, .solution *, .pain-card *, .step *, .faq-item *,
.upsell-card *, .target-card *, .reseaux-card *, .package-card *,
.demo-card *, .feature-card *, .why-card *, .point-card *{
  color:rgba(255,255,255,.9);
}
.pack-card h3, .ia-card h3, .solution h3, .pain-card h3, .step h3,
.upsell-card h3, .target-card h3, .reseaux-card h3, .package-card h3,
.pack-card h4, .ia-card h4, .solution h4, .pain-card h4, .step h4{
  color:#fff !important;
}
.pack-card p, .ia-card p, .solution p, .pain-card p, .step p,
.solution-body p, .pain-card p,
.upsell-card p, .target-card p, .reseaux-card p, .package-card p{
  color:rgba(255,255,255,.85) !important;
}
.pack-card:hover, .ia-card:hover, .solution:hover{
  border-color:var(--cyan) !important;
  box-shadow:0 0 20px rgba(0,255,255,.4), 0 0 40px rgba(0,255,255,.2) !important;
  transform:translateY(-4px);
}
.pack-card.featured, .ia-card.featured{
  border-color:var(--magenta) !important;
  background:linear-gradient(135deg,rgba(255,46,136,.12),rgba(168,92,247,.08)) !important;
  box-shadow:0 0 20px rgba(255,46,136,.3) !important;
}

/* ===== FORCE OVERRIDE BACKGROUNDS BLANCS ===== */
[style*="background:#fff"]:not(.btn):not(.btn-primary):not(.btn-cta):not(.nav-cta),
[style*="background: #fff"]:not(.btn):not(.btn-primary):not(.btn-cta):not(.nav-cta),
[style*="background:white"]:not(.btn):not(.btn-primary):not(.btn-cta):not(.nav-cta),
[style*="background-color:#fff"]:not(.btn):not(.btn-primary):not(.btn-cta):not(.nav-cta),
[style*="background-color: #fff"]:not(.btn):not(.btn-primary):not(.btn-cta):not(.nav-cta){
  background:rgba(11,20,55,.65) !important;
  color:rgba(255,255,255,.9) !important;
}

/* Solutions visuels (les images dans les cartes) */
.solution-visual{background:rgba(7,11,31,.5) !important}
.solution-body{background:transparent !important;color:rgba(255,255,255,.9) !important}
.solution-body h3{color:#fff !important}
.solution-body p{color:rgba(255,255,255,.85) !important}
.solution-price{
  background:rgba(0,255,255,.1) !important;
  color:var(--cyan) !important;
  text-shadow:0 0 6px var(--cyan);
  border:1px solid rgba(0,255,255,.3);
}

/* Pains cards : remplacer fond blanc + texte muted */
.pain-card{
  background:rgba(11,20,55,.65) !important;
  border-left:4px solid var(--magenta) !important;
}
.pain-card h3{color:#fff !important;text-shadow:0 0 8px var(--magenta)}
.pain-card p{color:rgba(255,255,255,.8) !important}

/* Pages cibles : section-head et section-tag */
.section-head h2{color:#fff !important;text-shadow:0 0 10px rgba(255,255,255,.4),0 0 25px rgba(0,255,255,.2)}
.section-head p{color:rgba(255,255,255,.75) !important}
.section-tag{
  background:linear-gradient(135deg,rgba(255,107,26,.15),rgba(255,46,136,.15)) !important;
  border:1px solid rgba(255,107,26,.4) !important;
  color:var(--orange) !important;
  text-shadow:0 0 6px var(--orange);
}

/* Pages cibles fond gris léger → bleu */
section.pains, section.section-alt, .section-alt{
  background:transparent !important;
}

/* Step cards des process */
.step{
  background:rgba(11,20,55,.65) !important;
  border:1px solid rgba(0,255,255,.2) !important;
}
.step h4{color:#fff !important}
.step p{color:rgba(255,255,255,.8) !important}
.step-num{
  box-shadow:0 0 15px rgba(255,46,136,.5),0 0 30px rgba(255,46,136,.3) !important;
}

/* FAQ : visibilité réponses */
.faq-item p, details p{color:rgba(255,255,255,.85) !important}
.faq-item summary{color:#fff !important}

/* Texte muted générique */
.muted, .text-muted, p.muted, span.muted{
  color:rgba(255,255,255,.65) !important;
}

/* Texte default partout */
section p, article p{color:rgba(255,255,255,.85)}
section h2, section h3, section h4{color:#fff !important}
section h2{text-shadow:0 0 10px rgba(255,255,255,.3),0 0 20px rgba(0,255,255,.15)}

/* ===== EYEBROW / BADGES ===== */
.eyebrow, .hero-eyebrow, .hero-badge, .pack-badge, .section-eyebrow{
  background:rgba(0,255,255,.05) !important;
  border:1px solid var(--cyan) !important;
  color:var(--cyan) !important;
  text-shadow:0 0 8px var(--cyan);
  box-shadow:0 0 15px rgba(0,255,255,.25), inset 0 0 8px rgba(0,255,255,.05);
}
.pack-badge{
  background:linear-gradient(135deg,var(--orange),var(--magenta)) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 0 12px rgba(255,46,136,.6) !important;
}

/* ===== PRIX ===== */
.pack-price, .ia-price, .price, .solution-price{
  color:#fff !important;
  text-shadow:0 0 10px rgba(0,255,255,.5), 0 0 25px rgba(0,255,255,.3) !important;
}
.pack-price span, .pack-price small, .ia-price span{
  color:rgba(255,255,255,.6) !important;
  text-shadow:none !important;
}

/* ===== STATS ===== */
.stat-num, .stat-number, [class*="stat-num"]{
  color:var(--cyan) !important;
  text-shadow:0 0 8px rgba(0,255,255,.7), 0 0 20px rgba(0,255,255,.4) !important;
}

/* ===== BREADCRUMB ===== */
.breadcrumb{
  background:rgba(7,11,31,.6) !important;
  color:rgba(255,255,255,.6) !important;
  border-bottom:1px solid rgba(168,92,247,.15);
}
.breadcrumb a{color:var(--cyan) !important;text-shadow:0 0 6px var(--cyan)}

/* ===== FAQ ===== */
.faq-item, details{
  background:rgba(11,20,55,.5) !important;
  border:1px solid rgba(0,255,255,.15) !important;
  border-radius:12px !important;
  margin-bottom:12px;
}
.faq-item summary, details summary{
  color:#fff !important;
  font-weight:600;
}

/* ===== SECTIONS ALT ===== */
.section-alt{
  background:transparent !important;
}

/* ===== FOOTER ===== */
footer{
  background:rgba(7,11,31,.8) !important;
  border-top:1px solid rgba(168,92,247,.3) !important;
  color:rgba(255,255,255,.7) !important;
  backdrop-filter:blur(10px);
}
footer a{color:rgba(255,255,255,.7) !important;transition:color .2s}
footer a:hover{color:var(--cyan) !important;text-shadow:0 0 6px var(--cyan)}
footer h4{color:var(--cyan) !important;text-shadow:0 0 6px var(--cyan)}

/* ===== HERO PACKS / CIBLES (sombre tinted) ===== */
.hero-pack{
  background:linear-gradient(135deg,rgba(7,11,31,.9),rgba(26,15,61,.85)) !important;
  position:relative;
}

/* ===== NAV ===== */
nav.nav, .nav-links{
  display:flex;align-items:center;gap:24px;
}
nav.nav a, .nav-links a{
  color:rgba(255,255,255,.85) !important;
  transition:color .2s;
}
nav.nav a:hover, .nav-links a:hover{
  color:var(--cyan) !important;
  text-shadow:0 0 6px var(--cyan);
}

/* ===== INPUTS / FORMULAIRES ===== */
input[type=text], input[type=email], input[type=tel], textarea, select{
  background:rgba(7,11,31,.6) !important;
  border:1px solid rgba(0,255,255,.2) !important;
  color:#fff !important;
}
input:focus, textarea:focus, select:focus{
  border-color:var(--cyan) !important;
  box-shadow:0 0 12px rgba(0,255,255,.3) !important;
  outline:none;
}
label{color:rgba(255,255,255,.85) !important}

/* ===== STATS-ROW (dans pages cibles) ===== */
.stats-row{
  background:linear-gradient(135deg,rgba(0,255,255,.05),rgba(168,92,247,.05)) !important;
  border:1px solid rgba(0,255,255,.15) !important;
}

/* ===== FINAL CTA ===== */
.final-cta{
  background:linear-gradient(135deg,rgba(7,11,31,.85),rgba(26,15,61,.85)) !important;
}

/* ===== Liens dans le contenu ===== */
.section a:not(.btn):not(.nav-brand):not(.btn-cta){
  color:var(--cyan);
  text-shadow:0 0 6px rgba(0,255,255,.4);
}

/* ===== Tables / Comparatifs ===== */
table{color:rgba(255,255,255,.85)}
table th{color:#fff;background:rgba(168,92,247,.15) !important}
table td{border-color:rgba(168,92,247,.15) !important}

/* ===== FORCE GLOBALE : toute section/div fond blanc → bleu translucide ===== */
section[style*="background:#fff"], section[style*="background: #fff"],
section[style*="background:white"], section[style*="background: white"],
div[style*="background:#fff"], div[style*="background: #fff"],
section[class*="white"], section[class*="-white"],
.section[style*="background"]:not([style*="dark"]):not([style*="0a"]):not([style*="07"]):not([style*="11"]),
[class*="bg-white"], [class*="bg-light"]{
  background:rgba(11,20,55,.55) !important;
  color:rgba(255,255,255,.9) !important;
}

/* Force tous les fonds gris clair (var --light) */
[style*="background:var(--light)"], [style*="background: var(--light)"],
[style*="background:#F"], [style*="background: #F"],
[style*="background:#f"], [style*="background: #f"]{
  background:transparent !important;
}

/* Tous les textes par défaut sur sections passent en blanc */
section, section *, article, article *{
  color:rgba(255,255,255,.85);
}
section h1, section h2, section h3, section h4, section h5,
article h1, article h2, article h3, article h4, article h5,
section .title, article .title{
  color:#fff !important;
}

/* Listes inclus / non inclus */
ul li, ol li{color:rgba(255,255,255,.85)}

/* ===== FORCE OVERRIDE - sections blanches/grises hardcodées ===== */
.showcase, .why-section, .pricing, .examples, .features-section,
.testimonials, .faq-section, .stats-section, .team-section, .gallery,
section[class*="white"], section[class*="light"],
[style*="background:linear-gradient(180deg,#fff"],
[style*="background: linear-gradient(180deg,#fff"]{
  background:transparent !important;
  color:rgba(255,255,255,.85) !important;
}

/* Cards blanches dans ces sections */
.device-card, .testimonial-card, .feature-item, .feature-box,
.stat-box, .stat-card, .package, .pricing-card,
.gallery-item, .team-card, .blog-card, .post-card{
  background:rgba(11,20,55,.65) !important;
  border:1px solid rgba(0,255,255,.2) !important;
  color:rgba(255,255,255,.9) !important;
}
.device-card *, .testimonial-card *, .feature-item *, .feature-box *,
.stat-box *, .stat-card *, .package *, .pricing-card *{
  color:rgba(255,255,255,.85);
}
.device-card h3, .device-card h4, .device-card strong,
.testimonial-card h3, .testimonial-card h4{
  color:#fff !important;
}

/* Frames mockup devices */
.device-frame, .device-screen{
  background:rgba(7,11,31,.5) !important;
  border-color:rgba(0,255,255,.2) !important;
}

/* Variable --muted devient blanc translucide */
[style*="color:var(--muted)"], [style*="color: var(--muted)"]{
  color:rgba(255,255,255,.75) !important;
}

/* Textes courants sur sections blanches ré-écrits */
section p, section li, section dd{color:rgba(255,255,255,.85)}
section h1, section h2, section h3, section h4, section h5{color:#fff !important}

/* Pages packs : "à savoir / inclus / pas inclus" boxes */
.included, .not-included, .what-included, .info-box, .highlight-box{
  background:rgba(11,20,55,.65) !important;
  border:1px solid rgba(0,255,255,.2) !important;
  color:rgba(255,255,255,.9) !important;
}
.included li, .not-included li{color:rgba(255,255,255,.85) !important}

/* Comparatif tableau (vs Fiverr/Wix etc) — TOUTES les variantes */
.comparison, .compare-table, .vs-table, .compare,
.compare table, .comparison table, table.compare{
  background:rgba(11,20,55,.5) !important;
  border:1px solid rgba(0,255,255,.15);
  color:rgba(255,255,255,.9) !important;
  box-shadow:none !important;
}
.compare table tr, .comparison tr, .compare tr{
  background:transparent !important;
}
.compare th, .compare td,
.comparison th, .comparison td,
.compare-table th, .compare-table td{
  color:rgba(255,255,255,.9) !important;
  border-color:rgba(168,92,247,.25) !important;
  background:transparent !important;
}
.compare thead th, .comparison thead th, .compare-table thead th{
  background:rgba(168,92,247,.2) !important;
  color:#fff !important;
}
.compare td.good, .comparison td.good{
  color:var(--cyan) !important;
  text-shadow:0 0 6px var(--cyan);
  font-weight:700;
}
.compare td.bad, .comparison td.bad{
  color:#FF6B6B !important;
  text-shadow:0 0 6px rgba(255,107,107,.5);
}
/* Force tbody trs */
.compare tbody tr, .comparison tbody tr{background:transparent !important}
.compare tbody tr:nth-child(even), .comparison tbody tr:nth-child(even){
  background:rgba(168,92,247,.05) !important;
}

/* ===== Cookie banner override ===== */
.cookie-banner{
  background:rgba(7,11,31,.95) !important;
  border-top:1px solid var(--cyan) !important;
  box-shadow:0 -4px 20px rgba(0,255,255,.2);
}

/* ===== Images : prévention CLS ===== */
img:not([width]):not([height]){
  aspect-ratio:attr(width) / attr(height);
}

/* ============================================
   FIX BRUT FORCE : blanc/blanc résiduel
   Toutes les pages — sauf pages légales (qu'on garde claires)
   ============================================ */
body:not(.legal-page) section,
body:not(.legal-page) .section,
body:not(.legal-page) section[class],
body:not(.legal-page) article,
body:not(.legal-page) .container > div,
body:not(.legal-page) .biens,
body:not(.legal-page) .services,
body:not(.legal-page) .why,
body:not(.legal-page) .testi-section,
body:not(.legal-page) .estimation,
body:not(.legal-page) .process{
  background:transparent !important;
}

/* Force tous les fonds clairs cssvar → bleu */
body:not(.legal-page) [style*="background:var(--cream)"],
body:not(.legal-page) [style*="background:var(--bg-soft)"],
body:not(.legal-page) [style*="background:var(--light)"],
body:not(.legal-page) [style*="background-color:var(--cream)"],
body:not(.legal-page) [style*="background-color:var(--light)"],
body:not(.legal-page) [class*="bg-soft"],
body:not(.legal-page) [class*="bg-cream"]{
  background:rgba(11,20,55,.55) !important;
  color:rgba(255,255,255,.9) !important;
}

/* Toutes les classes "card" et "item" → fond bleu translucide */
body:not(.legal-page) [class*="-card"]:not(.testimonial-card),
body:not(.legal-page) [class*="-item"]:not(li):not([class*="float"]),
body:not(.legal-page) [class*="-box"],
body:not(.legal-page) .bien,
body:not(.legal-page) .testi-card,
body:not(.legal-page) .service-card,
body:not(.legal-page) .why-item,
body:not(.legal-page) .step,
body:not(.legal-page) .field-pro{
  background:rgba(11,20,55,.65) !important;
  color:rgba(255,255,255,.9) !important;
  border-color:rgba(0,255,255,.2) !important;
}

/* Inputs/selects sur fond bleu (formulaires d'estimation, contact) */
body:not(.legal-page) input:not([type="submit"]),
body:not(.legal-page) select,
body:not(.legal-page) textarea{
  background:rgba(7,11,31,.7) !important;
  color:#fff !important;
  border:1.5px solid rgba(0,255,255,.3) !important;
}
body:not(.legal-page) input:focus, body:not(.legal-page) select:focus, body:not(.legal-page) textarea:focus{
  border-color:var(--cyan) !important;
  box-shadow:0 0 12px rgba(0,255,255,.3) !important;
}
body:not(.legal-page) input::placeholder{color:rgba(255,255,255,.5) !important}
body:not(.legal-page) label{color:rgba(255,255,255,.85) !important}

/* Estimation form / hero-form (immobilier, B2B) */
.hero-form, .estimation-card{
  background:rgba(7,11,31,.85) !important;
  color:rgba(255,255,255,.9) !important;
  border:1.5px solid var(--cyan) !important;
  box-shadow:0 0 30px rgba(0,255,255,.3), 0 30px 80px rgba(0,0,0,.5) !important;
}
.hero-form h3, .estimation-card h3, .estimation-card h2{color:#fff !important}
.hero-form p, .estimation-card p{color:rgba(255,255,255,.8) !important}

/* Tous les <strong>, <em> en blanc partout */
body:not(.legal-page) strong{color:#fff}
body:not(.legal-page) em{color:var(--cyan)}

/* Force bien-meta, prix, autres textes courants */
body:not(.legal-page) .bien-meta, body:not(.legal-page) .bien-meta span,
body:not(.legal-page) .bien-loc, body:not(.legal-page) .bien-title,
body:not(.legal-page) .testi-card p, body:not(.legal-page) .testi-person span,
body:not(.legal-page) .service-card p, body:not(.legal-page) .why-item p,
body:not(.legal-page) .step p, body:not(.legal-page) .step h4{
  color:rgba(255,255,255,.85) !important;
}
body:not(.legal-page) .bien-price{
  color:var(--cyan) !important;
  text-shadow:0 0 8px var(--cyan);
}

/* ===== PERF MOBILE : désactiver effets coûteux ===== */
@media (max-width: 768px){
  /* Désactiver canvas particules sur mobile (CPU heavy) */
  #particles{display:none !important}
  /* Désactiver animations gourmandes */
  .hero-slide{animation-duration:60s !important}
  body::before, body::after{display:none !important}
  /* Désactiver mesh background animé */
  .mesh-bg{animation:none !important}
  /* Réduire blurs (lourd sur GPU mobile) */
  *{backdrop-filter:none !important; -webkit-backdrop-filter:none !important}
  .header, .pack-card, .ia-card{
    background:rgba(7,11,31,.92) !important;
  }
  /* Réduire box-shadow excessifs */
  .pack-card, .ia-card, .demo-card{
    box-shadow:0 0 15px rgba(0,255,255,.2) !important;
  }
  /* Texte plus petit sur mobile */
  body{font-size:15px}
}

/* ===== Préférences réduites pour utilisateurs sensibles ===== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  /* Particules désactivées mais hero-slide : afficher 1ère slide statique */
  #particles{display:none !important}
  .hero-slide{display:none !important}
  .hero-slide:first-child{display:block !important;opacity:1 !important;transform:none !important}
}

/* ===== FIX background-attachment:fixed (cassé quand overflow-x:hidden sur body) ===== */
.hero-ville{background-attachment:scroll !important}

/* ===== FIX DÉBORDEMENT HORIZONTAL ===== */
html, body{
  overflow-x:hidden !important;
  max-width:100vw !important;
}
*{max-width:100% !important}
img, video, iframe, table, pre{
  max-width:100% !important;
  height:auto !important;
  box-sizing:border-box;
}
.container, [class*="container"], section, .hero, .hero-pack{
  max-width:100vw !important;
  overflow-x:hidden !important;
}

/* Section UPSELLS (Identité + E-com) — grid auto-fit responsive */
.upsells-grid{
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr)) !important;
}
@media (max-width: 768px){
  .upsells-grid{
    grid-template-columns:1fr !important;
    max-width:500px !important;
    margin:0 auto !important;
  }
}

/* ============================================
   RESPONSIVE MOBILE FIX
   ============================================ */
@media (max-width: 768px){
  /* Conteneurs */
  .container, [class*="container"]{padding-left:16px !important;padding-right:16px !important}

  /* Hero packs : gérer le grid */
  .hero-grid, [class*="hero-grid"]{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  .hero-pack{padding:60px 0 40px !important}
  .hero h1, .hero-pack h1{font-size:clamp(1.75rem,7vw,2.4rem) !important}
  .hero p, .hero-pack p.lead{font-size:.95rem !important}

  /* Stats row : 2 col au lieu de 4 */
  .stats-row, .hero-stats, .stats{
    grid-template-columns:repeat(2,1fr) !important;
    gap:16px !important;
    padding:20px !important;
  }

  /* Grilles principales : 1 col */
  .pain-grid, .solution-grid, .packs-grid, .ia-grid, .cibles-grid, .demos-grid,
  .testimonials-grid, .upsell-grid, .reseaux-grid, .features-grid,
  .process-steps, [class*="grid"]:not(.demo-grid):not(.demos-grid){
    grid-template-columns:1fr !important;
    gap:20px !important;
  }

  /* Sections : padding réduit */
  .section, section{padding:50px 0 !important}

  /* Cards : padding réduit */
  .pack-card, .ia-card, .solution, .pain-card, .step{
    padding:24px 20px !important;
  }

  /* Boutons : pleine largeur */
  .btn-primary, .btn-secondary, .btn-cta, .btn-dark, .btn-ghost,
  .pack-cta, .ia-cta, .nav-cta{
    width:100% !important;
    text-align:center !important;
    padding:14px 20px !important;
    font-size:.95rem !important;
  }
  .hero-cta, .hero-ctas, .cta-actions, .cta-buttons{
    flex-direction:column !important;
    width:100% !important;
    gap:10px !important;
  }
  .hero-cta a, .hero-ctas a, .cta-actions a, .cta-buttons a{width:100%}

  /* Footer : 1 col */
  footer .container > div:first-child{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }
  footer{padding:40px 0 20px !important}

  /* Header nav : cacher liens, garder logo + CTA */
  .nav, nav.nav, .nav-links{
    gap:8px !important;
  }
  .nav a:not(.btn-primary):not(.btn-cta),
  .nav-links a:not(.nav-cta){
    display:none !important;
  }
  .logo span:not(.logo-mark){font-size:.95rem !important}

  /* Floating tags : cacher */
  .float-tag, [class*="float-tag"]{display:none !important}

  /* Hero stats numbers : taille réduite */
  .stat-num{font-size:1.8rem !important}
  .stat-label{font-size:.7rem !important}
  .stats::before{display:none}

  /* Trust ticker : pause */
  .trust-track{animation-duration:60s !important}
  .trust-logo{padding:10px 18px !important;font-size:.85rem !important}

  /* Mockup laptop : reset transform */
  .mockup, .laptop-screen{transform:none !important}

  /* Section title */
  .section-title, h2.section-title{font-size:1.7rem !important}
  .section-subtitle{font-size:.95rem !important;margin-bottom:30px !important}

  /* Section head pages cibles */
  .section-head h2{font-size:1.6rem !important}
  .section-head p{font-size:.9rem !important}

  /* Final CTA */
  .final-cta{padding:50px 0 !important}
  .final-cta h2{font-size:1.6rem !important}

  /* Breadcrumb */
  .breadcrumb{padding:12px 0 !important;font-size:.78rem !important}

  /* CTA box (contact final) */
  .cta-box{padding:32px 20px !important}
  .cta-box h2{font-size:1.6rem !important}

  /* Pack price : taille */
  .pack-price{font-size:2rem !important}

  /* Tableaux : scroll horizontal */
  table{display:block;overflow-x:auto;max-width:100%}

  /* Images : pas de débordement */
  img{max-width:100% !important;height:auto !important}

  /* WhatsApp floating : taille réduite */
  .wa-float, [aria-label="WhatsApp"]{
    width:50px !important;
    height:50px !important;
    bottom:16px !important;
    right:16px !important;
    font-size:1.4rem !important;
  }
}

/* Très petit mobile (<400px) */
@media (max-width: 400px){
  .hero h1{font-size:1.5rem !important}
  .stats-row, .hero-stats, .stats{grid-template-columns:1fr !important}
  .container{padding-left:12px !important;padding-right:12px !important}
  .pack-card, .ia-card, .solution{padding:20px 16px !important}
}

/* ==========================================================================
   ANIMATIONS — Scroll reveal · Hover cards · Compteurs · Fond animé
   ========================================================================== */

/* ===== SCROLL REVEAL BASE ===== */
.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.reveal.visible{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-36px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.reveal-left.visible{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(36px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.reveal-right.visible{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
.reveal-scale.visible{opacity:1;transform:scale(1)}

/* Stagger sur grilles */
.reveal-stagger > *{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);
}
.reveal-stagger.visible > *:nth-child(1){opacity:1;transform:none;transition-delay:.05s}
.reveal-stagger.visible > *:nth-child(2){opacity:1;transform:none;transition-delay:.15s}
.reveal-stagger.visible > *:nth-child(3){opacity:1;transform:none;transition-delay:.25s}
.reveal-stagger.visible > *:nth-child(4){opacity:1;transform:none;transition-delay:.35s}
.reveal-stagger.visible > *:nth-child(5){opacity:1;transform:none;transition-delay:.45s}
.reveal-stagger.visible > *:nth-child(6){opacity:1;transform:none;transition-delay:.55s}
.reveal-stagger.visible > *:nth-child(n+7){opacity:1;transform:none;transition-delay:.6s}

/* ===== HOVER CARDS — néon lift ===== */
.pack-card, .ia-card, .demo-card, .cible-card, .solution,
[class*="card"], .testimonial-card, .faq-item, .step-item{
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease !important;
}
.pack-card:hover, .ia-card:hover, .demo-card:hover, .cible-card:hover,
[class*="card"]:hover, .testimonial-card:hover{
  transform:translateY(-6px) !important;
  border-color:var(--cyan) !important;
  box-shadow:0 8px 32px rgba(0,255,255,.25), 0 0 60px rgba(0,255,255,.1) !important;
}
.pack-card.featured:hover, .ia-card.featured:hover{
  border-color:var(--magenta) !important;
  box-shadow:0 8px 32px rgba(255,46,136,.3), 0 0 60px rgba(255,46,136,.12) !important;
}

/* Shine sur hover CTA boutons */
.btn-primary, .btn-cta, .nav-cta{
  position:relative;
  overflow:hidden;
}
.btn-primary::after, .btn-cta::after, .nav-cta::after{
  content:'';
  position:absolute;
  top:0;left:-75%;
  width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-20deg);
  transition:left .5s ease;
}
.btn-primary:hover::after, .btn-cta:hover::after, .nav-cta:hover::after{left:130%}

/* ===== COMPTEURS — style chiffre néon ===== */
[data-count]{
  font-family:'Space Grotesk',sans-serif;
  font-weight:800;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ===== FOND ANIMÉ ORBES (pages sans canvas particles) ===== */
.orb-bg{position:relative;overflow:hidden}
.orb-bg::before,.orb-bg::after{
  content:'';
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  pointer-events:none;
  animation:orbFloat 8s ease-in-out infinite;
  z-index:0;
}
.orb-bg::before{
  width:400px;height:400px;
  top:-100px;right:-80px;
  background:radial-gradient(circle,rgba(168,85,247,.18) 0%,transparent 70%);
}
.orb-bg::after{
  width:320px;height:320px;
  bottom:-80px;left:-60px;
  background:radial-gradient(circle,rgba(255,107,26,.14) 0%,transparent 70%);
  animation-delay:-4s;
}
@keyframes orbFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-30px) scale(1.08)}
}

/* Section title underline animé */
.section-title::after,[class*="section-title"]::after,
h2.title::after{
  content:'';
  display:block;
  width:0;
  height:3px;
  background:linear-gradient(90deg,var(--orange),var(--magenta),var(--cyan));
  border-radius:2px;
  margin:12px auto 0;
  transition:width .7s cubic-bezier(.22,1,.36,1) .2s;
}
h2.visible.section-title::after,[class*="section-title"].visible::after,
h2.title.visible::after{width:80px}

/* ===== RÉDUCTION ANIMATIONS (accessibilité) ===== */
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-left,.reveal-right,.reveal-scale{
    opacity:1 !important;transform:none !important;transition:none !important;
  }
  .reveal-stagger > *{opacity:1 !important;transform:none !important}
  .orb-bg::before,.orb-bg::after{animation:none !important}
  .btn-primary::after,.btn-cta::after{display:none}
}