/* ============================================================
   ÉLECTRICITÉ FOURNIER — da-shared.css
   Charte unifiée (DA de l'index) appliquée à TOUTES les pages.
   Se charge APRÈS styles.css : surcharge l'ancien thème cyan.
   Principe : on remappe les tokens existants (var(--bg2),
   var(--cyan)…) vers la nouvelle palette navy/jaune/crème, puis
   on re-skinne les composants. Aucun HTML à modifier.
   ============================================================ */

/* ── 1. NOUVELLE PALETTE + REMAP DES ANCIENS TOKENS ───────── */
:root{
  /* Nouveaux tokens DA */
  --navy:#0B1E40; --navy-deep:#06122a; --navy-soft:#16315f;
  --h-yellow:#FFCB05; --h-yellow-deep:#F2B705;
  --cream:#F4EEE4; --cream-2:#EBE1D2;
  --ink:#0B1E40; --muted:#5C667B; --line:rgba(11,30,64,.12);

  /* Remap des tokens de l'ancien styles.css → DA */
  --bg-light:#F4EEE4; --bg-warm:#EBE1D2;
  --bg-dark:#0B1E40; --bg-card-dark:#16315f;
  --blue:#0B1E40; --blue-light:#16315f; --accent:#FFCB05;
  --bg:#06122a; --bg2:#F4EEE4;
  --bg-card:#ffffff; --bg-card-h:#EBE1D2;
  --border-c:rgba(11,30,64,.12); --border-ch:rgba(255,203,5,.55);
  --txt:#0B1E40; --txt2:#5C667B; --txt3:#8A92A3;
  --text2:#5C667B; --text3:#8A92A3;
  --star:#F2B705; --cyan:#0B1E40; --yellow:#FFCB05;
  --blue-g:rgba(11,30,64,.12);
}

/* Contexte SOMBRE : héros, footer, témoignages + sections inline
   en background:var(--bg). On rétablit des tokens lisibles sur navy. */
section.hero, .hero-service, footer, .testimonials-section,
section[style*="var(--bg)"]{
  --bg-card:rgba(255,255,255,.05); --bg-card-h:rgba(255,255,255,.08);
  --border-c:rgba(255,255,255,.09); --border-ch:rgba(255,203,5,.4);
  --txt:#ffffff; --txt2:rgba(255,255,255,.6); --txt3:rgba(255,255,255,.42);
  --text2:rgba(255,255,255,.6); --text3:rgba(255,255,255,.42);
}

/* ── 2. BASE ──────────────────────────────────────────────── */
body{
  font-family:'Archivo',sans-serif !important;
  background:var(--cream);
  background-image:
    radial-gradient(1200px 600px at 88% -10%, rgba(255,203,5,.10), transparent 60%),
    radial-gradient(900px 700px at -5% 110%, rgba(11,30,64,.06), transparent 55%);
  color:var(--ink); line-height:1.7;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.container{max-width:1240px;margin:0 auto;width:100%;padding:0}
section{padding:92px 32px}

/* neutralise l'ancien <nav> fixe (s'appliquait aux fils d'Ariane / menus) */
nav{position:static;background:none;border:none;box-shadow:none;border-radius:0;height:auto;padding:0;display:block;top:auto;left:auto;right:auto}

/* ── 3. NAV (DA index) ────────────────────────────────────── */
header.nav{position:sticky;top:14px;z-index:50;margin:14px auto 0;max-width:1280px;padding:0 16px}
header.nav .nav-inner{background:#F4EEE4;border:1px solid var(--line);border-radius:18px;display:flex;align-items:center;justify-content:space-between;padding:12px 14px 12px 20px;box-shadow:0 10px 40px -22px rgba(11,30,64,.5);width:auto}
.brand{display:flex;align-items:center;gap:8px;font-family:'Archivo',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--navy);text-decoration:none}
.logo-mark{width:40px;height:40px;display:grid;place-items:center;flex:none}
header.nav .menu{display:flex;gap:30px;list-style:none;margin:0;padding:0}
header.nav .menu a{text-decoration:none;color:var(--ink);font-weight:600;font-size:13.5px;letter-spacing:.02em;text-transform:none;position:relative;padding:6px 0;opacity:.78;transition:.25s}
header.nav .menu a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--h-yellow);transition:width .28s ease}
header.nav .menu a:hover{opacity:1;color:var(--ink)}
header.nav .menu a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:16px}
.phone-top{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:700;font-size:15px;letter-spacing:.01em}
.phone-top .ico{width:30px;height:30px;border-radius:9px;background:var(--h-yellow);display:grid;place-items:center;flex:none}
.btn-call{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--navy);color:#fff;font-weight:700;font-size:14px;padding:12px 20px;border-radius:12px;letter-spacing:.02em;text-transform:none;border:none;transition:.25s}
.btn-call:hover{background:var(--navy-deep);transform:translateY(-1px)}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:8px;margin-left:4px;flex:none}
.burger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:transform .3s,opacity .3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav-backdrop{display:none}
.mobile-nav{position:fixed;inset:0;z-index:200;background:rgba(244,238,228,.98);backdrop-filter:blur(20px);display:grid;align-content:center;justify-items:center;padding:70px 32px 40px;opacity:0;pointer-events:none;transition:opacity .28s}
.mobile-nav.open{opacity:1;pointer-events:all}
.mobile-nav-close{position:absolute;top:20px;right:20px;z-index:10;background:rgba(11,30,64,.08);border:none;cursor:pointer;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--navy)}
.mobile-nav-close:hover{background:rgba(11,30,64,.15)}
.mobile-nav-inner{display:flex;flex-direction:column;align-items:center;width:100%;max-width:300px}
.mobile-nav-links{display:flex;flex-direction:column;align-items:center;width:100%}
.mobile-nav-links a{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.75rem;letter-spacing:-.02em;color:var(--navy);text-decoration:none;padding:13px 0;text-align:center;position:relative;width:100%}
.mobile-nav-links a::after{content:'';position:absolute;bottom:7px;left:50%;right:50%;height:3px;background:var(--h-yellow);border-radius:2px;transition:left .25s,right .25s}
.mobile-nav-links a:hover::after{left:15%;right:15%}
.mobile-nav-cta{margin-top:28px;width:100%;display:flex}
.mobile-nav-cta .btn-call{flex:1;justify-content:center;font-size:16px;padding:16px 20px;border-radius:14px;background:var(--navy)}

/* ── 4. HÉROS DE SERVICE (re-skin navy DA) ────────────────── */
.hero-service{padding:60px 32px 88px;background:var(--navy);color:#fff}
.hero-service::before{background-image:linear-gradient(rgba(255,203,5,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,203,5,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 80% 70% at 35% 45%,#000,transparent)}
.hero-service::after{background:radial-gradient(circle,rgba(255,203,5,.10),transparent 65%)}
.hero-service > .hero-inner,.hero-service > .hero-title,.hero-service > h1,.hero-service > .hero-desc,.hero-service > .hero-actions,.hero-service > .hero-ctas{max-width:760px}

.hero-badge{background:rgba(255,203,5,.12);border:1px solid rgba(255,203,5,.32);color:var(--h-yellow);border-radius:999px;font-weight:700;letter-spacing:.1em}
.hero-badge svg{color:var(--h-yellow)}

.hero-title,.hero-service h1,.hero-inner h1{font-family:'Anton',sans-serif !important;font-weight:400;font-size:clamp(2.6rem,5.2vw,4.4rem);line-height:1.22;letter-spacing:.005em;color:#fff}
.hero-title .accent,.hero-title strong,.hero-service h1 strong,.hero-inner h1 strong{
  color:var(--navy);-webkit-text-fill-color:var(--navy);
  background:var(--h-yellow);padding:.02em .16em;border-radius:5px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hero-desc{color:rgba(255,255,255,.62);font-size:1.05rem;line-height:1.75}

.review-stars svg{color:var(--h-yellow)}
.review-score span{color:rgba(255,255,255,.55)}

/* boutons */
.btn-primary{background:var(--h-yellow);color:var(--navy);border-radius:14px;text-transform:none;font-weight:800;font-size:.95rem;padding:15px 26px;box-shadow:0 14px 34px -12px rgba(242,183,5,.7)}
.btn-primary:hover{background:var(--h-yellow-deep);color:var(--navy);transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(242,183,5,.85)}
.btn-secondary{border-radius:14px;text-transform:none;font-weight:700;color:#fff;border:1.5px solid rgba(255,255,255,.25)}
.btn-secondary:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}

/* ── 5. BANDEAU CONFIANCE ─────────────────────────────────── */
.trust-strip{background:var(--cream-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 32px}
.trust-strip-inner{gap:14px 30px;max-width:1240px}
.trust-item{color:var(--muted);font-weight:600}
.trust-item span{color:var(--navy)}
.trust-item strong{color:var(--navy)}

/* bannière image hero */
.hero-img-banner{height:320px}
.img-placeholder{background:var(--cream-2);border-radius:0}
.img-placeholder svg{color:var(--navy);opacity:.18}
.img-placeholder span{color:var(--navy);opacity:.4}
.img-placeholder-dark{background:radial-gradient(120% 90% at 75% 10%,#16315f 0%,var(--navy) 45%,var(--navy-deep) 100%)}
.img-placeholder-dark svg{color:var(--h-yellow);opacity:.5}
.img-placeholder-dark span{color:rgba(255,255,255,.45)}

/* ── 6. EN-TÊTES DE SECTION ───────────────────────────────── */
.section-label{color:var(--h-yellow-deep);letter-spacing:.12em}
.hero-service .section-label,footer .section-label,.testimonials-section .section-label,section[style*="var(--bg)"] .section-label{color:var(--h-yellow)}
.section-title{font-family:'Anton',sans-serif !important;font-weight:400;font-size:clamp(2rem,4.2vw,3.2rem);line-height:1;letter-spacing:.01em;color:var(--navy)}
.section-title .accent,.section-title strong{color:var(--navy);-webkit-text-fill-color:var(--navy)}
.hero-service .section-title,.testimonials-section .section-title,section[style*="var(--bg)"] .section-title{color:#fff}
.hero-service .section-title .accent,.hero-service .section-title strong,.testimonials-section .section-title .accent,.testimonials-section .section-title strong,section[style*="var(--bg)"] .section-title .accent,section[style*="var(--bg)"] .section-title strong{color:var(--h-yellow);-webkit-text-fill-color:var(--h-yellow)}
.section-sub{color:var(--muted)}
.testimonials-section .section-sub,section[style*="var(--bg)"] .section-sub{color:rgba(255,255,255,.6)}
.section-sep{background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* ── 7. CARTES SERVICE / POURQUOI ─────────────────────────── */
.svc-card,.why-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 26px -20px rgba(11,30,64,.5)}
.svc-card::before{background:var(--h-yellow)}
.svc-card:hover,.why-card:hover{background:#fff;border-color:var(--h-yellow);transform:translateY(-4px);box-shadow:0 20px 44px -24px rgba(11,30,64,.45)}
.svc-icon,.why-icon{background:rgba(11,30,64,.06);border:1px solid var(--line);border-radius:13px}
.svc-icon svg,.why-icon svg{color:var(--navy)}
.svc-card h3,.why-card h3{font-family:'Anton',sans-serif;font-weight:400;font-size:1.12rem;letter-spacing:.02em;text-transform:uppercase;color:var(--navy)}
.svc-card p,.why-card p{color:var(--muted)}
.svc-card a{color:var(--h-yellow-deep);font-weight:800}

/* ── 8. AUTRES SERVICES (liens) ───────────────────────────── */
.other-svc-link{background:#fff;border:1px solid var(--line);border-radius:14px;color:var(--navy);font-weight:700}
.other-svc-link:hover{background:#fff;border-color:var(--h-yellow);transform:translateY(-2px);box-shadow:0 14px 30px -22px rgba(11,30,64,.5)}
.other-svc-link svg{color:var(--navy)}
section[style*="var(--bg)"] .other-svc-link{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09);color:#fff}
section[style*="var(--bg)"] .other-svc-link:hover{background:rgba(255,203,5,.07);border-color:rgba(255,203,5,.3)}
section[style*="var(--bg)"] .other-svc-link svg{color:var(--h-yellow)}

/* ── 9. TÉMOIGNAGES ───────────────────────────────────────── */
.testimonials-section{background:var(--navy-deep)}
.testimonial-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;box-shadow:none}
.testimonial-card:hover{background:rgba(255,203,5,.05);border-color:rgba(255,203,5,.28)}
.testimonial-card::before{font-family:'Anton',sans-serif;color:rgba(255,203,5,.1)}
.testimonial-stars{color:var(--h-yellow)}
.testimonial-text{color:rgba(255,255,255,.72)}
.testimonial-avatar{background:var(--h-yellow);color:var(--navy)}
.testimonial-name{color:#fff}
.testimonial-location{color:rgba(255,255,255,.4)}

/* ── 10. FAQ ──────────────────────────────────────────────── */
.faq-section{background:var(--cream)}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:16px}
.faq-item:hover{background:#fff;border-color:rgba(11,30,64,.2)}
.faq-item:has(.faq-q[aria-expanded="true"]){border-color:var(--h-yellow)}
.faq-q{color:var(--navy);font-weight:700}
.faq-q:hover{color:var(--navy)}
.faq-q::after{color:var(--h-yellow-deep)}
.faq-q svg{color:var(--h-yellow-deep)}
.faq-a{color:var(--muted)}
.faq-a strong{color:var(--navy)}

/* ── 11. TAGS ZONE ────────────────────────────────────────── */
.zone-tag{background:#fff;border:1px solid var(--line);color:var(--navy);font-weight:700}
a.zone-tag:hover{border-color:var(--h-yellow);background:#fff;color:var(--navy)}
.zone-tag svg{color:var(--navy)}

/* stats */
.stat-num,.about-stat-num{font-family:'Anton',sans-serif !important;color:var(--navy)}
.cta-big-phone,.cta-title,.zone-right h3,.svc-card-img-card h3{font-family:'Anton',sans-serif !important}

/* ── 12. CTA (DA index, classes pg-cta) ───────────────────── */
.pg-cta{padding:80px 32px;background:var(--cream)}
.pg-cta-card{background:var(--navy);border-radius:26px;padding:64px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;position:relative;overflow:hidden;max-width:1240px;margin:0 auto}
.pg-cta-card::before{content:"";position:absolute;top:-40%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(255,203,5,.08),transparent 60%);border-radius:50%;pointer-events:none}
.pg-cta-card::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,203,5,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,203,5,.04) 1px,transparent 1px);background-size:46px 46px;pointer-events:none}
.pg-cta-card > *{position:relative;z-index:1}
.pg-cta-label{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,203,5,.75);margin-bottom:14px}
.pg-cta-title{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(2rem,3.8vw,2.8rem);color:#fff;text-transform:uppercase;line-height:.96;margin-bottom:14px}
.pg-cta-desc{color:rgba(255,255,255,.55);font-size:.97rem;line-height:1.65;margin-bottom:28px}
.pg-cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.pg-cta-btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;background:var(--h-yellow);color:var(--navy);font-weight:800;font-size:15px;padding:16px 26px;border-radius:14px;letter-spacing:.01em;box-shadow:0 14px 34px -12px rgba(242,183,5,.45);transition:.28s}
.pg-cta-btn:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(242,183,5,.65)}
.pg-cta-btn-ghost{display:inline-flex;align-items:center;gap:10px;text-decoration:none;background:transparent;color:#fff;font-weight:700;font-size:15px;padding:15px 22px;border-radius:14px;border:1.5px solid rgba(255,255,255,.22);transition:.25s}
.pg-cta-btn-ghost:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.06)}
.pg-cta-right{text-align:center}
.pg-cta-phone{font-family:'Anton',sans-serif;font-size:clamp(2rem,3.8vw,2.8rem);color:#fff;line-height:1;letter-spacing:.02em}
.pg-cta-phone-lbl{font-size:.75rem;color:rgba(255,255,255,.35);margin-top:8px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.pg-cta-items{display:flex;flex-direction:column;gap:8px;margin-top:22px;align-items:center}
.pg-cta-items span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:rgba(255,255,255,.45)}

/* ── 13. FOOTER (DA index, classes pg-footer) ─────────────── */
footer.pg-footer{background:var(--navy-deep);color:#fff;padding:64px 32px 32px;border-top:none}
.pg-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px;max-width:1240px;margin-left:auto;margin-right:auto}
.pg-footer-brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:17px;letter-spacing:-.02em;margin-bottom:14px;color:#fff}
.pg-footer-desc{font-size:.84rem;line-height:1.65;color:rgba(255,255,255,.38);max-width:280px}
.pg-footer-col h4{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--h-yellow);margin-bottom:16px}
.pg-footer-col a{display:block;font-size:.84rem;color:rgba(255,255,255,.42);text-decoration:none;padding:3px 0;transition:color .2s}
.pg-footer-col a:hover{color:#fff}
.pg-footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding-top:22px;display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:rgba(255,255,255,.28);flex-wrap:wrap;gap:8px;max-width:1240px;margin:0 auto}
.pg-footer-bottom a{color:rgba(255,255,255,.28);text-decoration:none}
.pg-footer-bottom a:hover{color:rgba(255,255,255,.6)}

/* ── 14. WHATSAPP + REVEAL ────────────────────────────────── */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:999;width:64px;height:64px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(37,211,102,.45);text-decoration:none;transition:transform .25s,box-shadow .25s}
.wa-float:hover{transform:translateY(-3px) scale(1.07);box-shadow:0 10px 32px rgba(37,211,102,.6)}
.wa-float svg{width:36px;height:36px;fill:#fff}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}

/* ── 15. RESPONSIVE ───────────────────────────────────────── */
@media(max-width:980px){
  header.nav .menu,.phone-top{display:none}
  .burger{display:flex}
  .pg-cta-card{grid-template-columns:1fr;padding:48px 36px}
  .pg-cta-right{border-top:1px solid rgba(255,255,255,.08);padding-top:32px;margin-top:8px}
  .pg-footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .pg-footer-grid > div:first-child{grid-column:1/-1}
}
@media(max-width:768px){
  .why-grid,.testimonials-grid,.other-services{grid-template-columns:1fr !important}
  .svc-grid{grid-template-columns:1fr !important}
  section{padding:64px 20px}
  .hero-service{padding:40px 20px 64px}
  .pg-cta{padding:60px 20px}
}
@media(max-width:640px){
  .container{padding:0}
  .pg-cta-card{padding:30px 20px;border-radius:18px}
  .pg-cta-actions{flex-direction:column}
  .pg-cta-btn,.pg-cta-btn-ghost{justify-content:center}
  .pg-footer-grid{grid-template-columns:1fr}
  .trust-strip-inner{gap:10px 18px}
  .trust-item{font-size:.76rem}
}

/* ── 16. HÉROS DEUX COLONNES + PANNEAU VISUEL ─────────────── */
.hero-service.hero-2col{padding:54px 32px 78px;display:block}
.hero-2col .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;max-width:1240px;margin:0 auto}
.hero-2col .hero-left{min-width:0;position:relative;z-index:1}
.hero-2col .hero-left > *{max-width:560px}
.hero-2col .hero-title,.hero-2col .hero-inner h1,.hero-2col h1{font-size:clamp(2.4rem,4.6vw,3.9rem)}
.hero-2col .hero-badge{margin-bottom:16px}
.hero-2col .hero-review{margin-bottom:22px}
.visual{position:relative;z-index:1}
.photo{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/4.2;background:radial-gradient(120% 90% at 75% 10%,#16315f 0%,var(--navy) 45%,var(--navy-deep) 100%);box-shadow:0 40px 80px -30px rgba(6,18,42,.7);border:1px solid rgba(255,255,255,.06)}
.photo .photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.photo .photo-img[src*="camion-fournier"]{object-fit:contain;box-sizing:border-box;padding:22px}
.photo .grid-pattern{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(255,203,5,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,203,5,.10) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(120% 100% at 50% 30%,#000 30%,transparent 80%);z-index:1}
.photo .glow{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,203,5,.30),transparent 65%);top:-60px;right:-60px;filter:blur(6px);z-index:1}
.photo-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px;z-index:2}
.photo-center .bolt{width:84px;height:84px;border-radius:24px;background:rgba(255,203,5,.12);border:1px solid rgba(255,203,5,.35);display:grid;place-items:center}
.photo-center .bolt svg{width:40px;height:40px;color:var(--h-yellow)}
.photo-label{color:rgba(255,255,255,.6);font-size:13px;font-weight:600;line-height:1.5;max-width:240px}
.photo-label b{color:var(--h-yellow);font-weight:800;letter-spacing:.04em;display:block;margin-bottom:4px;text-transform:uppercase;font-size:11px}
.zone-pill{position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;gap:8px;background:rgba(6,18,42,.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);padding:9px 14px;border-radius:999px;color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.04em;z-index:3}
.zone-pill svg{color:var(--h-yellow);flex:none}
.float-stats{position:absolute;left:-22px;bottom:30px;background:var(--navy-deep);color:#fff;border-radius:18px;display:flex;border:1px solid rgba(255,255,255,.08);box-shadow:0 26px 50px -22px rgba(6,18,42,.9);overflow:hidden;z-index:3}
.float-stats .s{padding:16px 22px}
.float-stats .s + .s{border-left:1px solid rgba(255,255,255,.1)}
.float-stats .num{font-family:'Anton',sans-serif;font-size:30px;line-height:1;color:var(--h-yellow)}
.float-stats .lab{font-size:10px;letter-spacing:.1em;font-weight:700;color:rgba(255,255,255,.6);margin-top:6px;text-transform:uppercase}
.floaty{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:980px){
  .hero-2col .hero-grid{grid-template-columns:1fr;gap:30px}
  .visual{max-width:520px;margin:0 auto;width:100%}
  .float-stats{left:50%;transform:translateX(-50%);bottom:-12px}
}
@media(max-width:560px){
  .photo{aspect-ratio:16/11}
  .float-stats .num{font-size:24px}
  .float-stats .s{padding:12px 16px}
}


/* --- Fond bleu du héros derrière la nav (pages internes, pas l'accueil) --- */
header.nav{position:sticky}
header.nav::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-14px;
  bottom:0;
  left:50%;
  width:100vw;
  margin-left:-50vw;
  background:var(--navy);
}