/*
Theme Name: Visi Boost
Theme URI: https://visiboost.ma
Author: Visi Boost
Author URI: https://visiboost.ma
Description: Thème WordPress sur mesure pour Visi Boost — agence digitale à Casablanca (création de sites web, publicité en ligne, contenu, SEO, réseaux sociaux, branding). Direction artistique « Néon nuit » — dark premium, dégradés violet→magenta, verre, typographie oversized, animations cinématiques. Sans page builder, sans extension payante. CTA principal : Demander un devis gratuit.
Version: 2.2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: visi-boost
*/

/* =================================================================
   0. TOKENS :root — design system « Néon nuit » (dark premium)
   (aucune couleur/taille/rayon en dur ensuite : uniquement var(--…))
   Règle contraste : #4C1D95 / #DB2777 = fills & dégradés UNIQUEMENT ;
   tout texte/icône accent utilise les variantes claires -bright.
   ================================================================= */
:root {
  color-scheme: dark;

  /* --- canvas & surfaces --- */
  --c-bg:            #0A0814;   /* charbon violacé quasi-noir */
  --c-bg-2:          #0E0B1A;   /* sections alternées */
  --c-surface:       #14101F;   /* panneaux solides (tiroir, inputs, barre mobile) */
  --c-surface-2:     #1B1530;   /* surfaces élevées */
  --c-glass:         rgba(255,255,255,.045);
  --c-glass-strong:  rgba(255,255,255,.08);
  --c-border:        rgba(255,255,255,.10);
  --c-border-strong: rgba(255,255,255,.18);

  /* --- texte --- */
  --c-text:          #F2EFFA;   /* 15.9:1 sur --c-bg */
  --c-text-soft:     #A9A1C0;   /* 7.3:1 */
  --c-text-dim:      #736B8C;   /* labels décoratifs ≥ 18px uniquement */

  /* --- marque --- */
  --c-primary:        #4C1D95;
  --c-primary-dark:   #431A83;
  --c-primary-bright: #A78BFA;  /* liens, icônes, nav active (8.1:1) */
  --c-accent:         #DB2777;
  --c-accent-dark:    #C9246D;
  --c-accent-bright:  #F472B6;  /* eyebrows, card-links (7.4:1) */
  --c-accent-2:       #22D3EE;  /* cyan décoratif */
  --c-success:        #4ADE80;
  --c-error:          #F87171;
  --c-whatsapp:       #25D366;

  /* --- dégradés --- */
  --grad-brand: linear-gradient(120deg, #7C3AED, #DB2777);
  --grad-text:  linear-gradient(105deg, #C4B5FD 0%, #F472B6 55%, #67E8F9 100%);
  --grad-border: linear-gradient(135deg, rgba(167,139,250,.55), rgba(244,114,182,.25) 40%, rgba(255,255,255,.06) 70%);
  --c-accent-glow: rgba(219,39,119,.45);
  --c-reviews-text: #f3eefb;

  /* --- glows & ombres --- */
  --glow-primary: 0 0 60px -12px rgba(124,58,237,.55);
  --glow-accent:  0 10px 40px -8px rgba(219,39,119,.45);
  --glow-card:    0 20px 60px -20px rgba(0,0,0,.6), 0 0 40px -20px rgba(124,58,237,.25);
  --sh-sm:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --sh-md:0 10px 30px -6px rgba(0,0,0,.5);
  --sh-lg:0 28px 70px -18px rgba(0,0,0,.7);

  /* --- typo --- */
  --ff-titre: 'Bricolage Grotesque', system-ui, sans-serif;
  --ff-corps: 'Figtree', system-ui, sans-serif;
  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1.0625rem; --fs-md:1.1875rem;
  --fs-lg:clamp(1.35rem,1.1rem + 1vw,1.6rem);
  --fs-xl:clamp(1.75rem,1.3rem + 1.8vw,2.25rem);
  --fs-2xl:clamp(2.2rem,1.4rem + 3.2vw,3.6rem);
  --fs-3xl:clamp(2.6rem,1.6rem + 4.5vw,4.75rem);
  --fs-display:clamp(3.2rem,1.8rem + 7vw,7.5rem);
  --lh-tight:1.15; --lh-snug:1.3; --lh-base:1.65; --lh-display:1.02;
  --ls-display:-0.035em;
  --fw-corps:400; --fw-emphase:600; --fw-titre:700;

  /* --- espacements & conteneurs --- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-8:3rem; --sp-10:4rem; --sp-12:5rem;
  --section-y:clamp(4rem,3rem + 6vw,8rem);
  --container:1200px; --container-narrow:760px;

  /* --- rayons --- */
  --r-sm:8px; --r-md:14px; --r-lg:24px; --r-pill:999px;
  --r-base:18px;

  /* --- z-index --- */
  --z-progress:110; --z-header:100; --z-voile:99; --z-barre-mobile:95; --z-whatsapp:90;

  /* --- motion --- */
  --dur-fast:.15s; --dur:.3s; --dur-slow:.6s; --dur-reveal:.8s;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out-expo:cubic-bezier(.19,1,.22,1);

  /* --- grain (SVG feTurbulence inline) --- */
  --noise-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* =================================================================
   1. RESET & BASE
   ================================================================= */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scrollbar-color:#2A2440 var(--c-bg);}
body{
  margin:0;
  font-family:var(--ff-corps);
  font-weight:var(--fw-corps);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  color:var(--c-text);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--c-primary-bright);text-decoration:none;}
a:hover{color:var(--c-accent-bright);}
a:focus-visible{outline:2px solid var(--c-accent-bright);outline-offset:2px;border-radius:2px;}
h1,h2,h3,h4{font-family:var(--ff-titre);font-weight:var(--fw-titre);line-height:var(--lh-tight);margin:0 0 .4em;letter-spacing:-.015em;color:var(--c-text);text-wrap:balance;}
p{margin:0 0 1em;}
ul{margin:0 0 1em;padding-left:1.2em;}
::selection{background:#7C3AED;color:#fff;}

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--sp-5);}
.section{position:relative;padding-block:var(--section-y);}
.bg-alt{background:var(--c-bg-2);}
.bg-surface{background:var(--c-surface);}
.on-dark{color:#fff;}
.on-dark-soft{color:rgba(255,255,255,.85);}
.text-muted{color:var(--c-text-soft);}
.lead{font-size:var(--fs-md);color:var(--c-text-soft);}
.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:var(--sp-2);top:var(--sp-2);background:var(--c-surface-2);color:var(--c-text);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-sm);z-index:999;border:1px solid var(--c-border-strong);}

/* =================================================================
   2. UTILITAIRES — eyebrow, dégradé texte, verre, têtes de section
   ================================================================= */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-sm);letter-spacing:.22em;text-transform:uppercase;
  font-weight:var(--fw-emphase);color:var(--c-accent-bright);margin-bottom:var(--sp-3);
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--grad-brand);flex:none;}

.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}

.section-center{position:relative;z-index:1;text-align:center;max-width:680px;margin:0 auto var(--sp-10);}
.section-center h2{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.025em;margin-bottom:var(--sp-3);}
.section-center p{color:var(--c-text-soft);font-size:var(--fs-md);}

.section-num{
  display:block;font-family:var(--ff-titre);font-weight:var(--fw-titre);
  font-size:var(--fs-sm);letter-spacing:.3em;color:var(--c-text-dim);
  margin-bottom:var(--sp-2);
}
.section-ghost{
  position:absolute;top:.2em;left:50%;transform:translateX(-50%);
  font-family:var(--ff-titre);font-weight:800;line-height:1;white-space:nowrap;
  font-size:clamp(4.5rem,13vw,11rem);letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.055);
  pointer-events:none;user-select:none;z-index:0;
}
.section{overflow:hidden;} /* contient les mots fantômes + orbes */

/* recette « verre » — fills plats + bordure dégradée en mask
   (PAS de backdrop-filter : budget perf = 1 seul blur, sur le header) */
.card,.stat,.step,.rev,.post-card,.info-card,.vb-faq,.glass{
  position:relative;
  background:var(--c-glass);
  border:1px solid var(--c-border);
}
.card::before,.stat::before,.step::before,.rev::before,.post-card::before,
.info-card::before,.glass::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:var(--grad-border);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
          mask-composite:exclude;
  opacity:.4;pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease);
}
.card:hover::before,.stat:hover::before,.step:hover::before,
.post-card:hover::before,.glass:hover::before{opacity:1;}

/* =================================================================
   3. FONDS FX — aurora, grain, filets dégradés
   ================================================================= */
/* orbes aurora : radial-gradients pré-fondus (aucun filter:blur) */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.aurora__orb{position:absolute;border-radius:50%;will-change:transform;}
.aurora__orb.o1{width:640px;height:640px;top:-220px;right:-160px;background:radial-gradient(closest-side,rgba(124,58,237,.32),transparent 70%);animation:orb-drift-1 32s var(--ease) infinite alternate;}
.aurora__orb.o2{width:560px;height:560px;bottom:-240px;left:-180px;background:radial-gradient(closest-side,rgba(219,39,119,.22),transparent 70%);animation:orb-drift-2 38s var(--ease) infinite alternate;}
.aurora__orb.o3{width:420px;height:420px;top:30%;left:38%;background:radial-gradient(closest-side,rgba(34,211,238,.12),transparent 70%);animation:orb-drift-3 26s var(--ease) infinite alternate;}

/* les anciens .blob deviennent des orbes aurora (compat markup) */
.hero .blob{position:absolute;border-radius:50%;z-index:0;pointer-events:none;will-change:transform;}
.hero .blob-1{width:620px;height:620px;top:-200px;right:-140px;background:radial-gradient(closest-side,rgba(124,58,237,.34),transparent 70%);animation:orb-drift-1 30s var(--ease) infinite alternate;filter:none;opacity:1;}
.hero .blob-2{width:560px;height:560px;bottom:-220px;left:-160px;background:radial-gradient(closest-side,rgba(219,39,119,.22),transparent 70%);animation:orb-drift-2 36s var(--ease) infinite alternate;filter:none;opacity:1;}

@keyframes orb-drift-1{from{transform:translate(0,0) scale(1);}to{transform:translate(-70px,50px) scale(1.12);}}
@keyframes orb-drift-2{from{transform:translate(0,0) scale(1);}to{transform:translate(60px,-45px) scale(1.08);}}
@keyframes orb-drift-3{from{transform:translate(0,0) scale(1);}to{transform:translate(-40px,-60px) scale(1.15);}}

/* grain global — fixe, mélange overlay, jamais interactif */
body::after{
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;
  background:var(--noise-url);background-size:160px 160px;
  opacity:.05;mix-blend-mode:overlay;
}

/* filet dégradé horizontal (haut/bas de sections fortes) */
.hairline-top::before,.hairline-bottom::after{
  content:"";position:absolute;left:0;right:0;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.35) 30%,rgba(244,114,182,.35) 70%,transparent);
}
.hairline-top::before{top:0;}
.hairline-bottom::after{bottom:0;}

/* =================================================================
   4. BOUTONS — glow + balayage lumineux
   ================================================================= */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  border:none;cursor:pointer;font-family:var(--ff-corps);font-weight:var(--fw-emphase);
  font-size:var(--fs-base);padding:var(--sp-3) var(--sp-6);border-radius:var(--r-pill);
  text-align:center;line-height:1.2;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:var(--glow-accent);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 48px -8px var(--c-accent-glow),0 0 30px -6px rgba(124,58,237,.5);color:#fff;}
.btn-primary:active{transform:translateY(0);}
/* balayage lumineux au survol */
.btn-primary::before{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);pointer-events:none;
}
.btn-primary:hover::before{transform:skewX(-20deg) translateX(340%);transition:transform .7s var(--ease);}
.btn-ghost{background:transparent;border:1px solid var(--c-border-strong);color:var(--c-text);}
.btn-ghost:hover{background:var(--c-glass-strong);border-color:var(--c-primary-bright);color:#fff;transform:translateY(-2px);}
.btn-light{background:#fff;color:var(--c-primary);box-shadow:var(--sh-md);}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);color:var(--c-primary);}
.btn-outline-light{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff;}
.btn-outline-light:hover{background:rgba(255,255,255,.12);color:#fff;}
.btn-block{display:flex;width:100%;}
.btn:focus-visible{outline:2px solid var(--c-accent-bright);outline-offset:3px;}

/* =================================================================
   5. HEADER — transparent en haut → verre au scroll
   ================================================================= */
.site-header{
  position:sticky;top:0;z-index:var(--z-header);
  background:transparent;border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
body.admin-bar .site-header{top:32px;}
/* backdrop-filter sur pseudo-élément, pas sur le header sticky — règle 6.
   Unique blur autorisé de la page (budget perf). */
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  transition:opacity var(--dur) var(--ease);
}
.site-header.is-scrolled{
  background:rgba(10,8,20,.72);
  border-bottom-color:var(--c-border);
}
.site-header.is-scrolled::before{
  opacity:1;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:80px;gap:var(--sp-5);transition:height var(--dur) var(--ease);}
.site-header.is-scrolled .header-inner{height:64px;}
.brand{display:flex;align-items:center;gap:var(--sp-3);color:var(--c-text);}
.brand .logo{width:46px;height:46px;flex:none;filter:drop-shadow(0 0 14px rgba(124,58,237,.5));}
.brand .brand-name{font-family:var(--ff-titre);font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--c-text);}
.brand .brand-sub{font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--c-text-soft);font-weight:var(--fw-emphase);}
.main-nav ul{display:flex;gap:var(--sp-6);list-style:none;margin:0;padding:0;font-size:var(--fs-base);font-weight:var(--fw-emphase);}
.main-nav a{color:var(--c-text);opacity:.78;transition:opacity var(--dur),color var(--dur);}
.main-nav a:hover,.main-nav .current-menu-item>a{opacity:1;color:var(--c-accent-bright);}
.main-nav a:focus-visible{outline:2px solid var(--c-accent-bright);outline-offset:3px;border-radius:var(--r-sm);opacity:1;}
.header-cta{display:flex;align-items:center;gap:var(--sp-4);}
.nav-cta{display:none;} /* visible uniquement dans le tiroir mobile */

/* hamburger */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;width:44px;height:44px;padding:9px;}
.nav-toggle span{display:block;height:2px;background:var(--c-text);border-radius:2px;margin:5px 0;transition:.3s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* voile menu mobile */
.nav-overlay{
  position:fixed;inset:0;background:rgba(5,3,10,.7);
  opacity:0;visibility:hidden;transition:.3s;z-index:var(--z-voile);
}
.nav-overlay.is-open{opacity:1;visibility:visible;}

/* =================================================================
   6. BARRE DE PROGRESSION DE SCROLL
   ================================================================= */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:var(--z-progress);
  background:var(--grad-brand);
  transform:scaleX(var(--p,0));transform-origin:left center;
  pointer-events:none;
}
body.admin-bar .scroll-progress{top:32px;}

/* =================================================================
   7. HERO — plein écran, type display, scène CSS
   ================================================================= */
.hero{position:relative;overflow:hidden;padding-block:clamp(3.5rem,2rem + 6vw,7rem);}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-10);align-items:center;}
.hero h1{
  font-size:var(--fs-display);font-weight:800;
  line-height:var(--lh-display);letter-spacing:var(--ls-display);
  margin-bottom:var(--sp-5);
}
.hero .lead{font-size:var(--fs-md);color:var(--c-text-soft);max-width:32rem;margin:0 0 var(--sp-6);}
.hero-cta{display:flex;gap:var(--sp-4);align-items:center;flex-wrap:wrap;}
.hero-phone{font-size:var(--fs-base);color:var(--c-text);display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:var(--fw-emphase);}
.hero-phone svg{width:20px;height:20px;stroke:var(--c-accent-bright);}
.hero-trust{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-6);font-size:var(--fs-sm);color:var(--c-text-soft);}
.hero-trust span{display:inline-flex;align-items:center;gap:6px;}
.hero-trust svg{width:18px;height:18px;stroke:var(--c-success);}
@media(min-width:861px){
  .hero{min-height:min(860px,calc(100svh - 80px));display:flex;align-items:center;}
  .hero>.wrap{width:100%;}
}

/* visuel hero — scène 100 % CSS (dashboard verre + chips flottants) */
.hero-visual{position:relative;}
.hero-scene{position:relative;padding:var(--sp-6) 0 var(--sp-6) var(--sp-6);}
.scene-card{
  position:relative;z-index:2;border-radius:var(--r-lg);
  padding:var(--sp-6);box-shadow:var(--glow-card);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
}
.scene-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5);}
.scene-dots{display:flex;gap:6px;}
.scene-dots i{width:9px;height:9px;border-radius:50%;background:var(--c-border-strong);}
.scene-dots i:first-child{background:var(--c-accent-bright);}
.scene-title{font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--c-text-dim);font-weight:var(--fw-emphase);}
.metric{margin-bottom:var(--sp-4);}
.metric-lbl{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--c-text-soft);margin-bottom:6px;letter-spacing:.04em;}
.metric-lbl b{color:var(--c-text);font-weight:var(--fw-emphase);}
.metric-bar{height:8px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);overflow:hidden;}
.metric-bar i{display:block;height:100%;border-radius:inherit;background:var(--grad-brand);width:var(--w,60%);transform:scaleX(0);transform-origin:left;animation:bar-grow 1.3s var(--ease-out-expo) forwards;}
.metric:nth-child(2) .metric-bar i{animation-delay:.25s;}
.metric:nth-child(3) .metric-bar i{animation-delay:.45s;}
.metric:nth-child(4) .metric-bar i{animation-delay:.65s;}
@keyframes bar-grow{to{transform:scaleX(1);}}
.scene-kpi{
  display:flex;align-items:baseline;gap:var(--sp-3);margin-top:var(--sp-5);
  padding-top:var(--sp-4);border-top:1px solid var(--c-border);
}
.scene-kpi .stat-num{
  font-family:var(--ff-titre);font-weight:800;font-size:var(--fs-2xl);line-height:1;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.scene-kpi span:last-child{font-size:var(--fs-sm);color:var(--c-text-soft);}
/* chips flottants */
.hero-chip{
  position:absolute;z-index:3;display:flex;align-items:center;gap:10px;
  border-radius:var(--r-md);padding:12px 16px;background:var(--c-surface-2);
  border:1px solid var(--c-border-strong);box-shadow:var(--sh-md);
  font-size:var(--fs-sm);font-weight:var(--fw-emphase);color:var(--c-text);
  white-space:nowrap;
}
.hero-chip svg{width:20px;height:20px;stroke:var(--c-accent-bright);flex:none;}
.hero-chip .up{color:var(--c-success);font-size:var(--fs-xs);}
.chip-1{z-index:4;top:14px;right:14px;animation:chip-float 7s ease-in-out infinite alternate;}
.chip-2{bottom:-14px;left:-4px;animation:chip-float 8.5s ease-in-out infinite alternate-reverse;}
@keyframes chip-float{from{transform:translateY(0);}to{transform:translateY(-12px);}}
/* anneau conique décoratif */
.scene-ring{
  position:absolute;z-index:1;width:230px;height:230px;border-radius:50%;
  top:-64px;right:-56px;opacity:.65;
  background:conic-gradient(from 0deg,#7C3AED,#DB2777,#22D3EE,#7C3AED);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 9px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 9px));
  animation:ring-spin 16s linear infinite;
}
@keyframes ring-spin{to{transform:rotate(360deg);}}

/* photo réelle du hero + carte KPI flottante */
.hero-frame{position:relative;z-index:2;margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--c-border);box-shadow:var(--glow-card);}
.hero-frame img{width:100%;height:auto;display:block;}
.hero-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,3,10,0) 55%,rgba(5,3,10,.58) 100%);pointer-events:none;}
/* badge stat compact, ancré en bas à gauche de la photo */
.hero-kpi{position:absolute;z-index:4;left:16px;bottom:16px;width:max-content;max-width:240px;display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:var(--r-md);background:rgba(10,8,20,.82);border:1px solid var(--c-border-strong);box-shadow:var(--sh-md);}
.hero-kpi .stat-num{flex:none;font-family:var(--ff-titre);font-weight:800;font-size:var(--fs-2xl);line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-kpi span:last-child{font-size:var(--fs-xs);line-height:1.3;color:var(--c-text-soft);}

/* compat ancien visuel image (single/blog éventuels) */
.hero-visual img:not(.hero-frame img):not(.work-photo){display:block;width:100%;height:auto;border-radius:var(--r-lg);}

/* =================================================================
   8. MARQUEE — bandeau défilant infini (CSS pur)
   ================================================================= */
.marquee{
  position:relative;overflow:hidden;padding-block:20px;
  border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__inner{display:flex;width:max-content;animation:marquee-scroll 30s linear infinite;}
.marquee:hover .marquee__inner{animation-play-state:paused;}
.marquee__track{display:flex;align-items:center;flex:none;}
.marquee__track span{
  font-family:var(--ff-titre);font-weight:var(--fw-titre);
  font-size:clamp(1.05rem,1.6vw,1.4rem);letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-text-soft);padding-inline:1.6rem;white-space:nowrap;
}
.marquee__track .sep{color:var(--c-accent-bright);padding-inline:0;font-size:1rem;}
@keyframes marquee-scroll{to{transform:translateX(-50%);}}

/* =================================================================
   9. FORMULAIRES — dark
   ================================================================= */
.field{margin-bottom:var(--sp-4);}
.field label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-emphase);color:var(--c-text);margin-bottom:var(--sp-1);}
.field label .req{color:var(--c-error);}
.field input,.field select,.field textarea{
  width:100%;min-height:44px;padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--c-border-strong);border-radius:var(--r-sm);
  background:var(--c-surface);font-family:inherit;font-size:var(--fs-base);color:var(--c-text);resize:vertical;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--c-text-dim);}
.field input:focus,.field select:focus,.field textarea:focus,
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--c-accent-bright);box-shadow:0 0 0 3px rgba(244,114,182,.18);}
/* Chrome autofill : pas de flash jaune sur fond sombre */
.field input:-webkit-autofill,.field select:-webkit-autofill,.field textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--c-surface) inset;
  -webkit-text-fill-color:var(--c-text);
  caret-color:var(--c-text);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-note{font-size:var(--fs-sm);color:var(--c-text-soft);margin-top:var(--sp-4);line-height:1.5;}
.form-feedback{padding:var(--sp-4) var(--sp-5);border-radius:var(--r-sm);margin-bottom:var(--sp-5);font-size:var(--fs-base);}
.form-feedback.ok{background:rgba(74,222,128,.1);color:var(--c-success);border:1px solid rgba(74,222,128,.35);}
.form-feedback.err{background:rgba(248,113,113,.1);color:var(--c-error);border:1px solid rgba(248,113,113,.35);}

/* =================================================================
   10. CARTES SERVICES — verre + spotlight
   ================================================================= */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);position:relative;z-index:1;}
.card{
  border-radius:var(--r-lg);padding:var(--sp-6);
  transition:transform var(--dur-slow) var(--ease),background var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease);
}
.card:hover{transform:translateY(-6px);background:var(--c-glass-strong);box-shadow:var(--glow-card);}
.card .ico{width:56px;height:56px;border-radius:var(--r-md);background:var(--grad-brand);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4);box-shadow:0 8px 24px -6px var(--c-accent-glow);transition:transform var(--dur-slow) var(--ease);}
.card:hover .ico{transform:scale(1.08) rotate(-4deg);}
.card .ico svg{width:28px;height:28px;stroke:#fff;}
.card h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2);}
.card p{font-size:var(--fs-base);color:var(--c-text-soft);margin:0 0 var(--sp-4);}
.card-link{font-weight:var(--fw-emphase);color:var(--c-accent-bright);display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);}
.card-link svg{width:16px;height:16px;flex:none;stroke:var(--c-accent-bright);transition:transform var(--dur) var(--ease);}
.card:hover .card-link svg,.post-card:hover .card-link svg{transform:translateX(4px);}
.card-link:focus-visible,.post-card h3 a:focus-visible{outline:2px solid var(--c-accent-bright);outline-offset:2px;border-radius:var(--r-sm);}

/* spotlight — halo radial qui suit le curseur (JS écrit --mx/--my) */
.spotlight::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(167,139,250,.14),transparent 45%);
  opacity:0;transition:opacity .35s var(--ease);pointer-events:none;
}
.spotlight:hover::after{opacity:1;}
.spotlight>*{position:relative;z-index:1;}

/* tilt 3D (JS écrit --rx/--ry, gate pointer:fine) */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s var(--ease);will-change:transform;}

/* =================================================================
   11. ENGAGEMENTS / CHIFFRES
   ================================================================= */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);position:relative;z-index:1;}
.stat{border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-5);text-align:center;transition:background var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease);}
.stat:hover{background:var(--c-glass-strong);box-shadow:var(--glow-card);}
.stat .stat-num{font-family:var(--ff-titre);font-weight:800;font-size:var(--fs-2xl);line-height:1;display:block;margin-bottom:var(--sp-2);background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat .stat-lbl{font-size:var(--fs-sm);color:var(--c-text-soft);}

/* =================================================================
   12. MÉTHODE (étapes)
   ================================================================= */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);counter-reset:step;position:relative;z-index:1;}
.step{border-radius:var(--r-lg);padding:var(--sp-6);transition:transform var(--dur-slow) var(--ease),background var(--dur-slow) var(--ease);}
.step:hover{transform:translateY(-4px);background:var(--c-glass-strong);}
.step .num{width:44px;height:44px;border-radius:var(--r-pill);background:var(--grad-brand);color:#fff;font-family:var(--ff-titre);font-weight:800;font-size:var(--fs-md);display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4);box-shadow:0 0 24px -4px rgba(124,58,237,.55);}
.step h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2);}
.step p{font-size:var(--fs-base);color:var(--c-text-soft);margin:0;}

/* =================================================================
   13. AVIS
   ================================================================= */
.reviews-band{background:var(--c-bg-2);color:var(--c-text);position:relative;overflow:hidden;}
.reviews-band .section-center h2{color:var(--c-text);}
.reviews-band .section-center p{color:var(--c-text-soft);}
.reviews-band .eyebrow{color:var(--c-accent-2);}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);position:relative;z-index:1;}
.rev{border-radius:var(--r-lg);padding:var(--sp-6);}
.rev .stars{color:var(--c-accent-2);letter-spacing:3px;margin-bottom:var(--sp-3);font-size:var(--fs-md);}
.rev p{font-size:var(--fs-base);color:var(--c-reviews-text);margin:0 0 var(--sp-4);}
.rev .who{font-size:var(--fs-sm);color:var(--c-text-soft);font-weight:var(--fw-emphase);}
.tag-demo{display:inline-block;font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;background:rgba(34,211,238,.14);color:var(--c-accent-2);padding:3px 10px;border-radius:var(--r-pill);margin-bottom:var(--sp-3);}

/* =================================================================
   14. SPLIT (présentation / à propos / faq) + VISUEL AGENCE CSS
   ================================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10);align-items:center;position:relative;z-index:1;}
.media-rounded{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);}
.media-rounded img{display:block;width:100%;height:auto;}
.media-bare{border-radius:0;overflow:visible;box-shadow:none;background:transparent;}

/* visuel « agence » 100 % CSS — panneau aurora + chips stats */
.about-visual{position:relative;min-height:380px;}
.about-panel{
  position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;
  background:
    radial-gradient(120% 100% at 15% 0%,rgba(124,58,237,.4),transparent 55%),
    radial-gradient(110% 100% at 90% 100%,rgba(219,39,119,.3),transparent 55%),
    var(--c-surface);
  border:1px solid var(--c-border);box-shadow:var(--glow-card);
}
.about-panel::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(80% 80% at 50% 40%,#000,transparent);
          mask-image:radial-gradient(80% 80% at 50% 40%,#000,transparent);
}
.about-chip{
  position:absolute;z-index:2;border-radius:var(--r-md);
  background:var(--c-surface-2);border:1px solid var(--c-border-strong);
  box-shadow:var(--sh-md);padding:14px 18px;
}
.about-chip b{display:block;font-family:var(--ff-titre);font-weight:800;font-size:var(--fs-xl);line-height:1.1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}
.about-chip span{font-size:var(--fs-xs);color:var(--c-text-soft);letter-spacing:.04em;}
.about-chip.a1{top:14%;left:8%;animation:chip-float 7.5s ease-in-out infinite alternate;}
.about-chip.a2{top:44%;right:6%;animation:chip-float 9s ease-in-out infinite alternate-reverse;}
.about-chip.a3{bottom:10%;left:20%;animation:chip-float 8s ease-in-out infinite alternate;}
.about-logo{
  position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);
  width:120px;height:120px;border-radius:28px;background:var(--grad-brand);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--glow-primary);
}
.about-logo svg{width:64px;height:64px;stroke:#fff;}
/* photo réelle de l'agence + scrim de marque */
.about-photo{position:absolute;inset:0;margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--c-border);box-shadow:var(--glow-card);}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.about-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(124,58,237,.30),rgba(5,3,10,.34) 55%,rgba(219,39,119,.24));}

/* FAQ — rangées verre */
.vb-faq{margin-top:var(--sp-5);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-6);}
.faq-item{border-bottom:1px solid var(--c-border);padding:var(--sp-4) 0;}
.faq-item:last-child{border-bottom:none;}
.faq-item button{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--ff-corps);font-size:var(--fs-md);font-weight:var(--fw-emphase);color:var(--c-text);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);padding:0;transition:color var(--dur) var(--ease);}
.faq-item button:hover{color:var(--c-accent-bright);}
.faq-item button:focus-visible{outline:2px solid var(--c-accent-bright);outline-offset:3px;border-radius:var(--r-sm);}
.faq-item .faq-a{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease);color:var(--c-text-soft);font-size:var(--fs-base);}
.faq-item.open .faq-a{max-height:340px;padding-top:var(--sp-3);}
.faq-item.open{box-shadow:inset 2px 0 0 0 var(--c-accent-bright);padding-left:var(--sp-4);}
.faq-item .chev{transition:transform var(--dur-slow) var(--ease);color:var(--c-accent-bright);}
.faq-item.open .chev{transform:rotate(180deg);}

/* =================================================================
   15. CONTACT / INFOS
   ================================================================= */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);align-items:start;position:relative;z-index:1;}
@media(min-width:861px){.contact-grid.devis{grid-template-columns:1.25fr .85fr;}}
.info-card{border-radius:var(--r-lg);padding:var(--sp-8);}
.info-line{display:flex;gap:var(--sp-4);align-items:flex-start;margin-bottom:var(--sp-5);}
.info-line .ic{width:42px;height:42px;border-radius:var(--r-md);background:var(--c-glass-strong);border:1px solid var(--c-border);flex:none;display:flex;align-items:center;justify-content:center;}
.info-line .ic svg{width:20px;height:20px;stroke:var(--c-accent-bright);}
.info-line b{display:block;font-weight:var(--fw-emphase);font-size:var(--fs-base);color:var(--c-text);}
.info-line span{font-size:var(--fs-base);color:var(--c-text-soft);}
/* variante carte sombre (page contact — étapes) */
.info-card.dark{background:var(--c-surface-2);color:var(--c-text);}
.info-card.dark h3{color:var(--c-text);}
.info-card.dark .ic{background:var(--grad-brand);border:none;color:#fff;font-weight:var(--fw-titre);}
.info-card.dark b{color:var(--c-text);}
.info-card.dark span,.info-card.dark .note{color:var(--c-text-soft);}
.note{display:flex;align-items:center;gap:var(--sp-2);}
.note svg{width:16px;height:16px;flex:none;stroke:var(--c-accent-2);}

/* =================================================================
   16. BANDE CTA
   ================================================================= */
.cta-band{
  text-align:center;padding-block:var(--section-y);position:relative;overflow:hidden;
  background:var(--c-bg-2);color:var(--c-text);
}
.cta-band::before,.cta-band::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.4) 30%,rgba(244,114,182,.4) 70%,transparent);
}
.cta-band::before{top:0;}
.cta-band::after{bottom:0;}
.cta-band h2{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.025em;margin-bottom:var(--sp-3);color:var(--c-text);position:relative;z-index:1;}
.cta-band p{color:var(--c-text-soft);margin-bottom:var(--sp-6);font-size:var(--fs-md);position:relative;z-index:1;}
.cta-actions{display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap;position:relative;z-index:1;}

/* =================================================================
   17. ARTICLES / BLOG
   ================================================================= */
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);position:relative;z-index:1;}
.post-card{border-radius:var(--r-lg);overflow:hidden;transition:transform var(--dur-slow) var(--ease),background var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease);}
.post-card:hover{transform:translateY(-5px);background:var(--c-glass-strong);box-shadow:var(--glow-card);}
.post-card .thumb{position:relative;aspect-ratio:16/10;background:var(--grad-brand);overflow:hidden;display:block;}
.post-card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,8,20,.55));}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease);}
.post-card:hover .thumb img{transform:scale(1.05);}
.post-card .body{padding:var(--sp-5) var(--sp-6);}
.post-card h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2);}
.post-card h3 a{color:inherit;}
.post-card h3 a:hover{color:var(--c-accent-bright);}
.post-card .meta{font-size:var(--fs-sm);color:var(--c-text-dim);letter-spacing:.04em;margin-bottom:var(--sp-2);text-transform:uppercase;}
.entry-content{max-width:var(--container-narrow);margin:0 auto;font-size:var(--fs-md);color:var(--c-text-soft);}
.entry-content h2,.entry-content h3{color:var(--c-text);}
.entry-content h2{font-size:var(--fs-xl);margin-top:1.4em;}
.entry-content a{color:var(--c-primary-bright);text-decoration:underline;text-underline-offset:3px;}
.entry-content a:hover{color:var(--c-accent-bright);}
.entry-content img{border-radius:var(--r-md);margin:1.2em 0;}
.entry-content blockquote{margin:1.4em 0;padding:var(--sp-4) var(--sp-6);border-left:3px solid var(--c-accent-bright);background:var(--c-glass);border-radius:0 var(--r-md) var(--r-md) 0;color:var(--c-text);}
.entry-content code{background:var(--c-surface);border:1px solid var(--c-border);border-radius:6px;padding:.15em .4em;font-size:.9em;color:var(--c-accent-bright);}
.page-hero{position:relative;text-align:center;padding-block:var(--sp-12) var(--sp-8);overflow:hidden;}
.page-hero::before{
  content:"";position:absolute;top:-260px;left:50%;transform:translateX(-50%);
  width:820px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(124,58,237,.28),transparent 70%);
}
.page-hero h1{position:relative;font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.03em;}
.page-hero p{position:relative;color:var(--c-text-soft);max-width:38rem;margin:0 auto;font-size:var(--fs-md);}
.pagination{display:flex;gap:var(--sp-2);justify-content:center;margin-top:var(--sp-8);}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 var(--sp-3);border-radius:var(--r-md);border:1px solid var(--c-border-strong);color:var(--c-text);}
.pagination .page-numbers:hover{border-color:var(--c-primary-bright);color:var(--c-accent-bright);}
.pagination .page-numbers.current{background:var(--grad-brand);color:#fff;border-color:transparent;}

/* =================================================================
   18. SERVICES (page détaillée — sections alternées)
   ================================================================= */
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10);align-items:center;position:relative;z-index:1;}
.svc-row + .svc-row{margin-top:var(--section-y);}
.svc-row.reverse .svc-visual{order:2;}
.svc-visual{
  position:relative;border-radius:var(--r-lg);min-height:320px;overflow:hidden;
  background:
    radial-gradient(120% 120% at 18% 8%,rgba(124,58,237,.38),transparent 60%),
    radial-gradient(120% 120% at 85% 92%,rgba(219,39,119,.3),transparent 60%),
    var(--c-surface);
  border:1px solid var(--c-border);box-shadow:var(--glow-card);
  display:flex;align-items:center;justify-content:center;padding:var(--sp-6);color:#fff;
}
.svc-visual img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease);}
.svc-row:hover .svc-visual img{transform:scale(1.05);}
.svc-visual::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(140deg,rgba(124,58,237,.34),rgba(5,3,10,.28) 55%,rgba(219,39,119,.26));
}
.svc-visual svg{position:relative;z-index:1;width:110px;height:110px;stroke:#fff;filter:drop-shadow(0 0 26px rgba(167,139,250,.65));}
.svc-body .num{font-family:var(--ff-titre);font-weight:800;font-size:var(--fs-xl);letter-spacing:.02em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}
.svc-body h2{font-size:var(--fs-xl);margin:var(--sp-2) 0 var(--sp-3);}
.svc-body ul{list-style:none;padding:0;margin:var(--sp-4) 0 0;}
.svc-body ul li{position:relative;padding-left:var(--sp-6);margin-bottom:var(--sp-2);color:var(--c-text-soft);}
.svc-body ul li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:14px;border-radius:4px;background:var(--grad-brand);box-shadow:0 0 12px -2px rgba(219,39,119,.6);}

/* =================================================================
   19. FOOTER — CTA géant + colonnes
   ================================================================= */
.site-footer{position:relative;background:var(--c-bg);color:var(--c-text-soft);font-size:var(--fs-base);overflow:hidden;}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.4) 30%,rgba(244,114,182,.4) 70%,transparent);
}
/* CTA géant */
.footer-cta{position:relative;padding-block:clamp(4.5rem,4rem + 6vw,8rem);border-bottom:1px solid var(--c-border);overflow:hidden;}
.footer-cta .aurora__orb.o1{top:auto;bottom:-320px;right:10%;}
.footer-cta-kicker{display:block;font-size:var(--fs-sm);letter-spacing:.22em;text-transform:uppercase;font-weight:var(--fw-emphase);color:var(--c-accent-bright);margin-bottom:var(--sp-4);}
.footer-cta-title{
  position:relative;z-index:1;
  font-family:var(--ff-titre);font-weight:800;
  font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);
  color:var(--c-text);margin:0 0 var(--sp-6);max-width:14ch;text-wrap:balance;
}
.footer-cta .btn{position:relative;z-index:1;}
/* colonnes */
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--sp-8);padding-block:var(--sp-10) var(--sp-8);position:relative;z-index:1;}
.site-footer .brand-name{font-family:var(--ff-titre);color:var(--c-text);font-size:1.5rem;font-weight:800;}
.site-footer h4{color:var(--c-text);font-size:var(--fs-md);margin-bottom:var(--sp-4);}
.site-footer a{color:var(--c-text-soft);}
.site-footer a:hover{color:var(--c-accent-bright);}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer li{margin-bottom:var(--sp-2);}
.footer-contact li{display:flex;gap:var(--sp-2);align-items:flex-start;}
.footer-contact svg{width:18px;height:18px;stroke:var(--c-accent-2);flex:none;margin-top:3px;}
.socials{display:flex;gap:var(--sp-3);margin-top:var(--sp-4);}
.socials a{width:40px;height:40px;border-radius:var(--r-pill);background:var(--c-glass-strong);border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.socials a:hover{background:rgba(124,58,237,.3);border-color:var(--c-primary-bright);transform:translateY(-2px);}
.socials a:focus-visible{outline:2px solid var(--c-accent-2);outline-offset:2px;}
.socials svg{width:18px;height:18px;fill:#fff;}
.footer-bottom{border-top:1px solid var(--c-border);padding:var(--sp-5) 0;text-align:center;font-size:var(--fs-sm);color:var(--c-text-dim);position:relative;z-index:1;}
.footer-bottom a{color:var(--c-text-soft);margin-left:var(--sp-2);}

/* =================================================================
   20. WHATSAPP FLOTTANT + BARRE MOBILE
   ================================================================= */
.wa-float{
  position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;
  background:var(--c-whatsapp);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.45);z-index:var(--z-whatsapp);
  animation:wa-pulse 2.4s infinite;
}
.wa-float svg{width:30px;height:30px;fill:#fff;}
@keyframes wa-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);}70%{box-shadow:0 0 0 16px rgba(37,211,102,0);}100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}}
.mobile-bar{display:none;}

/* =================================================================
   21. ANIMATIONS AU DÉFILEMENT — reveals + cascade
   ================================================================= */
.reveal{opacity:0;transform:translateY(28px);transition:opacity var(--dur-reveal) var(--ease-out-expo),transform var(--dur-reveal) var(--ease-out-expo);}
.reveal.is-visible{opacity:1;transform:none;}
.reveal[data-reveal="fade"]{transform:none;}
.reveal[data-reveal="scale"]{transform:scale(.94);}
.reveal[data-reveal="scale"].is-visible{transform:scale(1);}
/* cascade : le JS pose --i sur chaque enfant d'un .stagger */
.stagger>*{transition-delay:calc(var(--i,0)*70ms);}

/* =================================================================
   24. RÉALISATIONS (portfolio) + FORMULES (pricing) + CONFIANCE
   ================================================================= */
/* bandeau secteurs / confiance */
.trust-strip{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3) var(--sp-5);align-items:center;padding-block:var(--sp-2);}
.trust-strip .trust-lbl{width:100%;text-align:center;font-size:var(--fs-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--c-text-dim);font-weight:var(--fw-emphase);margin-bottom:var(--sp-2);}
.trust-strip span.sect{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-titre);font-weight:var(--fw-titre);font-size:clamp(1rem,1.4vw,1.25rem);color:var(--c-text-soft);opacity:.85;transition:color var(--dur) var(--ease),opacity var(--dur) var(--ease);}
.trust-strip span.sect::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad-brand);flex:none;}
.trust-strip span.sect:hover{color:var(--c-text);opacity:1;}

/* grille réalisations */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);position:relative;z-index:1;}
.work-card{border-radius:var(--r-lg);overflow:hidden;transition:transform var(--dur-slow) var(--ease),background var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease);}
.work-card:hover{transform:translateY(-6px);background:var(--c-glass-strong);box-shadow:var(--glow-card);}
/* maquette de site en CSS pur (aucune image à produire) */
.work-mock{position:relative;aspect-ratio:16/11;overflow:hidden;background:radial-gradient(120% 120% at 15% 0%,rgba(124,58,237,.5),transparent 55%),radial-gradient(120% 120% at 90% 100%,rgba(219,39,119,.4),transparent 55%),var(--c-surface-2);border-bottom:1px solid var(--c-border);}
.work-mock.mock-1{background:radial-gradient(120% 120% at 15% 0%,rgba(34,211,238,.4),transparent 55%),radial-gradient(120% 120% at 90% 100%,rgba(124,58,237,.45),transparent 55%),var(--c-surface-2);}
.work-mock.mock-2{background:radial-gradient(120% 120% at 15% 0%,rgba(244,114,182,.45),transparent 55%),radial-gradient(120% 120% at 90% 100%,rgba(124,58,237,.4),transparent 55%),var(--c-surface-2);}
.work-mock.mock-3{background:radial-gradient(120% 120% at 15% 0%,rgba(124,58,237,.5),transparent 55%),radial-gradient(120% 120% at 90% 100%,rgba(34,211,238,.35),transparent 55%),var(--c-surface-2);}
.work-mock .mock-bar{position:absolute;top:0;left:0;right:0;height:13%;display:flex;align-items:center;gap:5px;padding-left:12px;background:rgba(5,3,10,.4);}
.work-mock .mock-bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);}
.work-mock .mock-hero{position:absolute;top:22%;left:8%;right:8%;height:26%;border-radius:9px;background:linear-gradient(120deg,rgba(255,255,255,.9),rgba(255,255,255,.55));box-shadow:0 8px 24px -8px rgba(0,0,0,.5);}
.work-mock .mock-line{position:absolute;left:8%;height:4.5%;border-radius:4px;background:rgba(255,255,255,.28);}
.work-mock .mock-line.l1{top:56%;width:64%;}
.work-mock .mock-line.l2{top:65%;width:44%;}
.work-mock .mock-cta{position:absolute;top:77%;left:8%;width:28%;height:10%;border-radius:6px;background:var(--grad-brand);box-shadow:0 6px 18px -4px var(--c-accent-glow);}
/* photo réelle dans la carte réalisation */
.work-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease);}
.work-card:hover .work-photo{transform:scale(1.06);}
.work-mock::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,3,10,.10) 0%,rgba(5,3,10,.18) 55%,rgba(5,3,10,.62) 100%);pointer-events:none;}
.work-badge{position:absolute;z-index:2;bottom:12px;right:12px;background:rgba(10,8,20,.82);border:1px solid var(--c-border-strong);border-radius:var(--r-pill);padding:5px 13px;font-size:var(--fs-xs);font-weight:var(--fw-emphase);color:var(--c-text);letter-spacing:.02em;}
.work-body{padding:var(--sp-6);}
.work-result{display:flex;align-items:baseline;gap:10px;margin-bottom:var(--sp-3);}
.work-num{font-family:var(--ff-titre);font-weight:800;font-size:var(--fs-2xl);line-height:1;white-space:nowrap;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}
.work-metric{font-size:var(--fs-sm);color:var(--c-text-soft);}
.work-card h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2);}
.work-card p{font-size:var(--fs-base);color:var(--c-text-soft);margin:0 0 var(--sp-4);}
.work-chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{display:inline-flex;align-items:center;font-size:var(--fs-xs);font-weight:var(--fw-emphase);color:var(--c-text-soft);background:var(--c-glass-strong);border:1px solid var(--c-border);border-radius:var(--r-pill);padding:5px 12px;}
.work-note{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:var(--sp-8);text-align:center;font-size:var(--fs-sm);color:var(--c-text-dim);}
.work-note svg{width:18px;height:18px;stroke:var(--c-accent-bright);flex:none;}

/* icône citation dans les avis */
.rev{position:relative;}
.rev-quote{position:absolute;top:var(--sp-5);right:var(--sp-5);opacity:.5;}
.rev-quote svg{width:34px;height:34px;fill:var(--c-primary-bright);}

/* grille formules / pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);align-items:stretch;position:relative;z-index:1;}
.price-card{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);padding:var(--sp-8) var(--sp-6);transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease);}
.price-card:hover{transform:translateY(-4px);box-shadow:var(--glow-card);}
.price-card.featured{background:linear-gradient(170deg,rgba(124,58,237,.16),rgba(219,39,119,.08));box-shadow:var(--glow-primary);transform:scale(1.04);}
.price-card.featured:hover{transform:scale(1.04) translateY(-4px);}
.price-card.featured::before{opacity:1;background:linear-gradient(135deg,rgba(167,139,250,.9),rgba(244,114,182,.6) 45%,rgba(255,255,255,.1) 75%);}
.price-tagline{position:absolute;top:-1px;right:var(--sp-6);transform:translateY(-50%);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:var(--fw-emphase);color:#fff;background:var(--grad-brand);padding:6px 14px;border-radius:var(--r-pill);box-shadow:var(--glow-accent);}
.price-card:not(.featured) .price-tagline{color:var(--c-text-soft);background:var(--c-surface-2);border:1px solid var(--c-border);box-shadow:none;}
.price-name{font-size:var(--fs-xl);margin:var(--sp-2) 0 4px;}
.price-ideal{font-size:var(--fs-sm);color:var(--c-text-soft);margin:0 0 var(--sp-5);}
.price-amount{padding-bottom:var(--sp-5);margin-bottom:var(--sp-5);border-bottom:1px solid var(--c-border);}
.price-from{display:block;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--c-text-dim);margin-bottom:2px;}
.price-value{font-family:var(--ff-titre);font-weight:800;font-size:var(--fs-2xl);line-height:1;color:var(--c-text);}
.price-value small{font-family:var(--ff-corps);font-weight:var(--fw-emphase);font-size:var(--fs-sm);color:var(--c-text-soft);margin-left:6px;}
.price-features{list-style:none;padding:0;margin:0 0 var(--sp-6);display:grid;gap:var(--sp-3);flex:1;}
.price-features li{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-base);color:var(--c-text-soft);}
.price-features svg{width:18px;height:18px;stroke:var(--c-success);flex:none;margin-top:3px;}
.price-features li span{color:var(--c-text);}
.price-reassure{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-4) var(--sp-8);margin-top:var(--sp-8);}
.price-reassure span{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--c-text-soft);}
.price-reassure svg{width:20px;height:20px;stroke:var(--c-accent-bright);flex:none;}

/* =================================================================
   22. RESPONSIVE
   ================================================================= */
@media(max-width:1024px){
  .work-grid{grid-template-columns:1fr 1fr;}
  .price-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto;}
  .price-card.featured{transform:none;}
  .price-card.featured:hover{transform:translateY(-4px);}
  .stats,.steps-grid{grid-template-columns:1fr 1fr;}
  .cards,.rev-grid,.posts-grid{grid-template-columns:1fr 1fr;}
  .section-ghost{font-size:clamp(3.5rem,14vw,7rem);}
}
@media(max-width:860px){
  body.admin-bar .site-header{top:46px;}
  body.admin-bar .scroll-progress{top:46px;}
  .main-nav{
    position:fixed;top:0;right:0;bottom:0;width:min(82vw,340px);
    background:var(--c-surface);padding:90px var(--sp-6) var(--sp-6);
    transform:translateX(100%);transition:transform .3s var(--ease);
    z-index:calc(var(--z-voile) + 1);box-shadow:-10px 0 40px rgba(0,0,0,.6);
    border-left:1px solid var(--c-border);
  }
  .main-nav.is-open{transform:none;}
  .main-nav ul{flex-direction:column;gap:var(--sp-5);font-size:var(--fs-md);}
  .main-nav .nav-cta{display:inline-flex;width:100%;margin-top:var(--sp-5);}
  .nav-toggle{display:block;z-index:calc(var(--z-voile) + 2);}
  .header-cta .btn{display:none;}
  .hero-grid,.split,.contact-grid,.svc-row,.svc-row.reverse .svc-visual{grid-template-columns:1fr;}
  .svc-row.reverse .svc-visual{order:0;}
  .hero-visual{order:-1;}
  .hero-scene{padding:var(--sp-4) 0 var(--sp-4) var(--sp-4);}
  .hero-chip{display:none;} /* évite le chevauchement sur petit écran */
  .scene-ring{width:160px;height:160px;top:-40px;right:-30px;}
  .about-visual{min-height:300px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-6);}
  .footer-cta-title{max-width:none;}
  /* orbes réduits sur mobile (surface GPU) */
  .hero .blob-1,.aurora__orb.o1{width:380px;height:380px;}
  .hero .blob-2,.aurora__orb.o2{width:340px;height:340px;}
  .aurora__orb.o3{display:none;}

  /* barre actions mobile */
  body{padding-bottom:74px;}
  .mobile-bar{
    display:grid;grid-template-columns:1fr 1fr 1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:var(--z-barre-mobile);
    background:var(--c-surface);border-top:1px solid var(--c-border-strong);
    padding:var(--sp-2) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom));gap:6px;
  }
  .mobile-bar a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:var(--fs-xs);color:var(--c-text);padding:6px 0;text-align:center;font-weight:var(--fw-emphase);}
  .mobile-bar a.accent{background:var(--grad-brand);color:#fff;border-radius:var(--r-md);}
  .mobile-bar svg{width:20px;height:20px;}
  .wa-float{bottom:86px;}
  body.menu-open .mobile-bar{display:none;}
}
@media(max-width:560px){
  .cards,.rev-grid,.posts-grid,.stats,.steps-grid,.work-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .section-ghost{display:none;}
  .price-tagline{right:50%;transform:translate(50%,-50%);}
}

/* =================================================================
   23. REDUCED MOTION — fallbacks statiques explicites
   ================================================================= */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto;}
  .reveal,.reveal[data-reveal]{opacity:1;transform:none;}
  .marquee__inner{animation:none !important;transform:none;}
  .scroll-progress{display:none;}
  .hero .blob,.aurora__orb,.hero-chip,.about-chip,.scene-ring{animation:none !important;}
  .metric-bar i{transform:scaleX(1);animation:none !important;}
  .tilt{transform:none !important;}
}