/*
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 créatif » (dynamique-jeune). Sans page builder, sans extension payante. CTA principal : Demander un devis gratuit.
Version: 1.0.2
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 — collés depuis clients/visi-boost/design-brief.md
   (aucune couleur/taille/rayon en dur ensuite : uniquement var(--…))
   ================================================================= */
:root {
  --c-primary:      #4C1D95;
  --c-primary-dark: #431A83;
  --c-accent:       #DB2777;
  --c-accent-dark:  #C9246D;
  --c-accent-2:     #22D3EE;   /* cyan décoratif — jamais sous du texte */
  --c-bg:           #FAF8FF;
  --c-surface:      #ffffff;
  --c-text:         #1E1B2E;
  --c-text-soft:    #5B5470;
  --c-border:       #8E8AA0;
  --c-success:      #2e7d52;
  --c-error:        #c0392b;
  --c-whatsapp:     #25D366;

  --grad-brand: linear-gradient(120deg, #4C1D95, #DB2777);
  --c-accent-glow:  rgba(219,39,119,.55); /* ombre/lueur du CTA (dérivé de --c-accent) */
  --c-reviews-text: #f3eefb;              /* texte clair sur fond --c-primary */

  --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.1rem,1.5rem + 2.6vw,3rem);
  --fs-3xl:clamp(2.6rem,1.6rem + 4vw,4rem);
  --lh-tight:1.15; --lh-snug:1.3; --lh-base:1.65;
  --fw-corps:400; --fw-emphase:600; --fw-titre:700;

  --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(3rem,2rem + 5vw,6rem);
  --container:1200px; --container-narrow:760px;

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

  --sh-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh-md:0 6px 18px rgba(0,0,0,.08);
  --sh-lg:0 16px 40px rgba(0,0,0,.12);

  --z-header:100; --z-voile:99; --z-barre-mobile:95; --z-whatsapp:90;

  --dur-fast:.15s; --dur:.25s; --dur-slow:.4s;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* =================================================================
   1. RESET & BASE
   ================================================================= */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
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;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--c-primary);text-decoration:none;}
a:hover{color:var(--c-accent);}
a:focus-visible{outline:2px solid var(--c-accent);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:-.01em;}
p{margin:0 0 1em;}
ul{margin:0 0 1em;padding-left:1.2em;}

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--sp-5);}
.eyebrow{display:inline-block;font-size:var(--fs-sm);letter-spacing:.18em;text-transform:uppercase;font-weight:var(--fw-emphase);color:var(--c-accent);margin-bottom:var(--sp-3);}
.section{padding-block:var(--section-y);}
.section-center{text-align:center;max-width:640px;margin:0 auto var(--sp-8);}
.section-center h2{font-size:var(--fs-2xl);margin-bottom:var(--sp-3);}
.section-center p{color:var(--c-text-soft);font-size:var(--fs-md);}
.bg-alt{background:var(--c-surface);}
.on-dark{color:#fff;}
.on-dark-soft{color:rgba(255,255,255,.85);}
.bg-surface{background:var(--c-surface);}
.text-muted{color:var(--c-text-soft);}
.grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;}
.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:#fff;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-sm);z-index:999;}

/* =================================================================
   2. BOUTONS
   ================================================================= */
.btn{
  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);
}
.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:0 10px 24px -8px var(--c-accent-glow);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px -10px var(--c-accent-glow);color:#fff;}
.btn-primary:active{transform:translateY(0);}
.btn-ghost{background:transparent;border:1.5px solid var(--c-primary);color:var(--c-primary);}
.btn-ghost:hover{background:var(--c-primary);color:#fff;transform:translateY(-2px);}
.btn-light{background:#fff;color:var(--c-primary);box-shadow:var(--sh-sm);}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--sh-md);color:var(--c-primary);}
.btn-outline-light{background:transparent;border:1.5px solid rgba(255,255,255,.7);color:#fff;}
.btn-outline-light:hover{background:rgba(255,255,255,.14);color:#fff;}
.btn-block{display:flex;width:100%;}
.btn:focus-visible{outline:2px solid var(--c-accent-dark);outline-offset:2px;}

/* =================================================================
   3. HEADER
   ================================================================= */
.site-header{
  position:sticky;top:0;z-index:var(--z-header);
  background:color-mix(in srgb,var(--c-surface) 88%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--c-primary) 12%,transparent);
}
/* backdrop-filter sur pseudo-élément, pas sur le header fixe — règle 6 */
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:var(--sp-5);}
.brand{display:flex;align-items:center;gap:var(--sp-3);color:var(--c-text);}
.brand .logo{width:46px;height:46px;flex:none;}
.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:.82;transition:opacity var(--dur),color var(--dur);}
.main-nav a:hover,.main-nav .current-menu-item>a{opacity:1;color:var(--c-accent);}
.main-nav a:focus-visible{outline:2px solid var(--c-accent);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-primary);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:color-mix(in srgb,var(--c-text) 55%,transparent);
  opacity:0;visibility:hidden;transition:.3s;z-index:var(--z-voile);
}
.nav-overlay.is-open{opacity:1;visibility:visible;}

/* =================================================================
   4. HERO
   ================================================================= */
.hero{position:relative;overflow:hidden;padding-block:clamp(2.5rem,1.5rem + 5vw,5.5rem);}
.hero .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;z-index:0;pointer-events:none;}
.hero .blob-1{width:420px;height:420px;background:var(--c-accent-2);top:-120px;right:-80px;}
.hero .blob-2{width:380px;height:380px;background:var(--c-accent);bottom:-140px;left:-100px;opacity:.35;}
.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-3xl);font-weight:800;margin-bottom:var(--sp-5);}
.hero .lead{font-size:var(--fs-md);color:var(--c-text-soft);max-width:30rem;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);}
.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);}

/* visuel hero (illustration SVG dans cadre dégradé) */
.hero-visual{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:420px;
  background:var(--grad-brand);box-shadow:var(--sh-lg);display:flex;align-items:center;justify-content:center;padding:var(--sp-5);}
.hero-visual img{width:100%;height:100%;object-fit:contain;}

/* =================================================================
   5. FORMULAIRES
   ================================================================= */
.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);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-soft);}
.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);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-accent) 22%,transparent);}
.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:color-mix(in srgb,var(--c-success) 12%,#fff);color:var(--c-success);border:1px solid color-mix(in srgb,var(--c-success) 35%,#fff);}
.form-feedback.err{background:color-mix(in srgb,var(--c-error) 12%,#fff);color:var(--c-error);border:1px solid color-mix(in srgb,var(--c-error) 35%,#fff);}

/* =================================================================
   6. CARTES SERVICES
   ================================================================= */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);}
.card{
  position:relative;background:var(--c-surface);border:1px solid color-mix(in srgb,var(--c-primary) 10%,transparent);
  border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--sh-sm);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-md);}
.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 18px -8px var(--c-accent-glow);}
.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);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);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);outline-offset:2px;border-radius:var(--r-sm);}

/* =================================================================
   7. ENGAGEMENTS / CHIFFRES
   ================================================================= */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);}
.stat{background:var(--c-surface);border:1px solid color-mix(in srgb,var(--c-primary) 10%,transparent);border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-5);text-align:center;box-shadow:var(--sh-sm);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.stat:hover{transform:translateY(-4px);box-shadow:var(--sh-md);}
.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-brand);-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat .stat-lbl{font-size:var(--fs-sm);color:var(--c-text-soft);}

/* =================================================================
   8. MÉTHODE (étapes)
   ================================================================= */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);counter-reset:step;}
.step{position:relative;background:var(--c-surface);border:1px solid color-mix(in srgb,var(--c-primary) 10%,transparent);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--sh-sm);}
.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);}
.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;}

/* =================================================================
   9. AVIS (section sombre)
   ================================================================= */
.reviews-band{background:var(--c-primary);color:#fff;position:relative;overflow:hidden;}
.reviews-band .section-center h2{color:#fff;}
.reviews-band .section-center p{color:rgba(255,255,255,.82);}
.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{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);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:rgba(255,255,255,.7);font-weight:var(--fw-emphase);}
.tag-demo{display:inline-block;font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;background:color-mix(in srgb,var(--c-accent-2) 18%,transparent);color:var(--c-accent-2);padding:3px 10px;border-radius:var(--r-pill);margin-bottom:var(--sp-3);}

/* =================================================================
   10. SPLIT (présentation / à propos / faq)
   ================================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10);align-items:center;}
.media-rounded{border-radius:var(--r-lg);overflow:hidden;min-height:360px;background:var(--grad-brand);box-shadow:var(--sh-lg);display:flex;align-items:center;justify-content:center;padding:var(--sp-5);}
.media-rounded img{width:100%;height:100%;object-fit:contain;}
.vb-faq{margin-top:var(--sp-5);background:var(--c-surface);border:1px solid color-mix(in srgb,var(--c-primary) 10%,transparent);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:var(--sp-3) var(--sp-6);}
.faq-item{border-bottom:1px solid color-mix(in srgb,var(--c-primary) 14%,transparent);padding:var(--sp-4) 0;}
.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;}
.faq-item button:focus-visible{outline:2px solid var(--c-accent);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 .chev{transition:transform var(--dur-slow) var(--ease);color:var(--c-accent);}
.faq-item.open .chev{transform:rotate(180deg);}

/* =================================================================
   11. CONTACT / INFOS
   ================================================================= */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);align-items:start;}
@media(min-width:861px){.contact-grid.devis{grid-template-columns:1.25fr .85fr;}}
.info-card{background:var(--c-surface);border:1px solid color-mix(in srgb,var(--c-primary) 10%,transparent);border-radius:var(--r-lg);padding:var(--sp-8);box-shadow:var(--sh-sm);}
.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:color-mix(in srgb,var(--c-primary) 8%,var(--c-bg));flex:none;display:flex;align-items:center;justify-content:center;}
.info-line .ic svg{width:20px;height:20px;stroke:var(--c-accent);}
.info-line b{display:block;font-weight:var(--fw-emphase);font-size:var(--fs-base);}
.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-primary);color:#fff;}
.info-card.dark h3{color:#fff;}
.info-card.dark .ic{background:var(--grad-brand);color:#fff;font-weight:var(--fw-titre);}
.info-card.dark b{color:#fff;}
.info-card.dark span,.info-card.dark .note{color:rgba(255,255,255,.85);}

/* =================================================================
   12. BANDE CTA
   ================================================================= */
.cta-band{text-align:center;padding-block:var(--section-y);background:var(--grad-brand);color:#fff;position:relative;overflow:hidden;}
.cta-band h2{font-size:var(--fs-2xl);margin-bottom:var(--sp-3);color:#fff;}
.cta-band p{color:rgba(255,255,255,.92);margin-bottom:var(--sp-6);font-size:var(--fs-md);}
.cta-actions{display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap;}

/* =================================================================
   13. ARTICLES / BLOG
   ================================================================= */
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);}
.post-card{background:var(--c-surface);border:1px solid color-mix(in srgb,var(--c-primary) 10%,transparent);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);}
.post-card .thumb{aspect-ratio:16/10;background:var(--grad-brand);overflow:hidden;display:block;}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;}
.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);}
.post-card .meta{font-size:var(--fs-sm);color:var(--c-text-soft);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);}
.entry-content h2{font-size:var(--fs-xl);margin-top:1.4em;}
.entry-content img{border-radius:var(--r-md);margin:1.2em 0;}
.page-hero{text-align:center;padding-block:var(--sp-10) var(--sp-8);}
.page-hero h1{font-size:var(--fs-3xl);font-weight:800;}
.page-hero p{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);color:var(--c-primary);}
.pagination .page-numbers.current{background:var(--grad-brand);color:#fff;border-color:transparent;}

/* =================================================================
   14. SERVICES (page détaillée — sections alternées)
   ================================================================= */
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10);align-items:center;}
.svc-row + .svc-row{margin-top:var(--section-y);}
.svc-row.reverse .svc-visual{order:2;}
.svc-visual{border-radius:var(--r-lg);min-height:300px;background:var(--grad-brand);box-shadow:var(--sh-lg);display:flex;align-items:center;justify-content:center;padding:var(--sp-6);color:#fff;}
.svc-visual svg{width:96px;height:96px;stroke:#fff;}
.svc-body .num{font-family:var(--ff-titre);font-weight:800;font-size:var(--fs-md);color:var(--c-accent);letter-spacing:.04em;}
.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);}

/* =================================================================
   15. FOOTER
   ================================================================= */
.site-footer{background:var(--c-primary);color:rgba(255,255,255,.78);padding-top:var(--sp-10);font-size:var(--fs-base);}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--sp-8);padding-bottom:var(--sp-8);}
.site-footer .brand-name{font-family:var(--ff-titre);color:#fff;font-size:1.5rem;font-weight:800;}
.site-footer h4{color:#fff;font-size:var(--fs-md);margin-bottom:var(--sp-4);}
.site-footer a{color:rgba(255,255,255,.78);}
.site-footer a:hover{color:#fff;}
.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:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);}
.socials a:hover{background:rgba(255,255,255,.22);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 rgba(255,255,255,.14);padding:var(--sp-5) 0;text-align:center;font-size:var(--fs-sm);color:rgba(255,255,255,.62);}
.footer-bottom a{color:rgba(255,255,255,.78);margin-left:var(--sp-2);}

/* =================================================================
   16. 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,.22);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;}

/* =================================================================
   17. ANIMATIONS AU DÉFILEMENT
   ================================================================= */
.reveal{opacity:0;transform:translateY(20px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);}
.reveal.is-visible{opacity:1;transform:none;}

/* =================================================================
   18. RESPONSIVE
   ================================================================= */
@media(max-width:1024px){
  .stats,.steps-grid{grid-template-columns:1fr 1fr;}
  .cards,.rev-grid,.posts-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:860px){
  .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,.14);
  }
  .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;min-height:300px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-6);}

  /* 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);
    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-primary);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{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;}
}