/* ============================================================
   ÉLECTRICITÉ FOURNIER — styles.css
   Nouvelle charte graphique : beige chaud + Bebas Neue
   ============================================================ */

/* ── PALETTE ──────────────────────────────────────────────── */
:root {
  /* Nouveaux tokens */
  --bg-light:     #f2ece4;
  --bg-warm:      #e8e0d4;
  --bg-dark:      #111111;
  --bg-card-dark: #1a1a1a;
  --blue:         #1a3f6f;
  --blue-light:   #2563eb;
  --accent:       #c9a84c;

  /* Aliases rétro-compatibles (sections claires par défaut) */
  --bg:           #111111;   /* fond sections sombres / footer */
  --bg2:          #f2ece4;   /* fond sections claires (beige chaud) */
  --bg-card:      #ffffff;   /* cartes sur fond clair */
  --bg-card-h:    #e8e0d4;
  --border-c:     rgba(0,0,0,.08);
  --border-ch:    rgba(26,63,111,.25);
  --txt:          #1a1a1a;   /* texte par défaut (fond clair) */
  --txt2:         #5a5347;
  --txt3:         #8a8278;
  --text2:        #5a5347;
  --text3:        #8a8278;
  --star:         #c9a84c;
  --cyan:         #2563eb;   /* mapped → blue-light */
  --yellow:       #c9a84c;   /* mapped → accent gold */
  --blue-g:       rgba(26,63,111,.15);

  /* Radius & ombres */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-card: 0 2px 16px rgba(0,0,0,.07);
}

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family:'Plus Jakarta Sans', sans-serif;
  background:var(--bg-light);
  color:var(--txt);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.72;
  font-size:1rem;
}
img { max-width:100%; display:block }
a { color:inherit }

/* ── LAYOUT ───────────────────────────────────────────────── */
.container { max-width:1100px; margin:0 auto; width:100% }

/* ── NAV — pilule flottante ───────────────────────────────── */
nav {
  position:fixed;
  top:12px; left:12px; right:12px;
  z-index:100;
  padding:0 36px; height:60px;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg-light);
  border-radius:14px;
  box-shadow:0 2px 20px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between; width:100%;
}
.nav-logo {
  display:flex; align-items:center; gap:9px;
  font-family:'Sora', sans-serif; font-weight:800; font-size:1.05rem;
  color:var(--txt); text-decoration:none; white-space:nowrap;
}
.nav-logo svg { width:22px; height:22px }
.nav-logo span { color:var(--blue) }
.nav-links { display:flex; align-items:center; gap:28px; list-style:none }
.nav-links a {
  color:var(--txt2); text-decoration:none;
  font-size:.84rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  transition:color .25s; white-space:nowrap;
}
.nav-links a:hover, .nav-links a.active { color:var(--txt) }
.nav-cta {
  display:flex; align-items:center; gap:8px;
  padding:10px 24px;
  background:var(--blue); color:#fff;
  border-radius:50px; text-decoration:none;
  font-weight:700; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.05em;
  transition:all .3s; white-space:nowrap;
}
.nav-cta:hover { background:var(--blue-light); transform:translateY(-1px) }
.nav-cta svg { width:15px; height:15px }
.nav-menu-btn { display:none; background:none; border:none; color:var(--txt); cursor:pointer }
.nav-menu-btn svg { width:24px; height:24px }

/* ── SECTIONS SOMBRES : surcharge des variables ───────────── */
/* Les sections sombres redéfinissent les variables CSS pour
   que tous les composants enfants héritent des bonnes couleurs */
section.hero,
.hero-service,
footer,
.testimonials-section {
  --bg-card:   #1a1a1a;
  --bg-card-h: #222222;
  --border-c:  rgba(255,255,255,.07);
  --border-ch: rgba(201,168,76,.3);
  --txt:       #e8e0d4;
  --txt2:      rgba(232,224,212,.55);
  --txt3:      rgba(232,224,212,.3);
  --text2:     rgba(232,224,212,.55);
  --text3:     rgba(232,224,212,.3);
  --shadow-card: 0 4px 24px rgba(0,0,0,.35);
}

/* ── HERO SERVICE ─────────────────────────────────────────── */
.hero-service {
  position:relative;
  padding:140px 52px 90px;
  background:var(--bg-dark); color:var(--txt);
  overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
}
/* Grille de fond */
.hero-service::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:64px 64px; pointer-events:none;
  mask-image:radial-gradient(ellipse 80% 70% at 40% 50%, black, transparent);
}
/* Halo lumineux */
.hero-service::after {
  content:''; position:absolute;
  top:-120px; right:-80px; width:600px; height:600px;
  background:radial-gradient(circle, rgba(201,168,76,.07), transparent 65%);
  border-radius:50%; pointer-events:none;
}
.hero-service > * { position:relative; z-index:1 }
/* Ordre des éléments */
.hero-service > .breadcrumb,
.hero-service > nav[aria-label] { order:0; align-self:flex-start }
.hero-service > .hero-badge    { order:1; align-self:flex-start }
.hero-service > .hero-inner    { order:2; width:100%; max-width:720px }
.hero-service > .hero-title    { order:2; width:100%; max-width:720px }
.hero-service > h1             { order:2; width:100%; max-width:720px }
.hero-service > .hero-desc     { order:3; width:100%; max-width:580px }
.hero-service > .hero-actions,
.hero-service > .hero-ctas     { order:4; width:100% }
.hero-service > .hero-review   { order:5; align-self:flex-start; margin-top:28px }
.hero-inner { position:relative; z-index:1 }

/* Badge hero */
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 16px 6px 12px;
  background:rgba(201,168,76,.1); border:1px solid rgba(201,168,76,.28);
  border-radius:50px; font-size:.72rem; font-weight:700;
  color:var(--accent); text-transform:uppercase; letter-spacing:.1em;
  margin-bottom:20px; width:fit-content;
  animation:fadeUp .55s ease-out both;
}
.hero-badge svg { width:12px; height:12px; flex-shrink:0 }

/* Widget avis hero */
.hero-review {
  display:inline-flex; align-items:center; gap:12px;
  padding:8px 18px 8px 14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:60px; margin-bottom:28px; width:fit-content;
  backdrop-filter:blur(12px);
  animation:fadeUp .6s ease-out .06s both;
}
.review-stars { display:flex; gap:2px }
.review-stars svg { width:16px; height:16px; color:var(--star) }
.review-sep { width:1px; height:24px; background:rgba(255,255,255,.1); flex-shrink:0 }
.review-info { display:flex; flex-direction:column }
.review-score { font-size:.88rem; font-weight:700; color:#e8e0d4; line-height:1.3 }
.review-score span { font-weight:500; color:rgba(232,224,212,.5); font-size:.82rem }
.review-source { font-size:.7rem; color:rgba(232,224,212,.4); display:flex; align-items:center; gap:4px }
.review-source svg { width:12px; height:12px }

/* Fil d'Ariane */
.breadcrumb {
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  font-size:.78rem; color:rgba(232,224,212,.4);
  margin-bottom:20px; animation:fadeUp .6s ease-out .08s both;
}
.breadcrumb a { color:rgba(232,224,212,.4); text-decoration:none; transition:color .2s }
.breadcrumb a:hover { color:rgba(232,224,212,.7) }
.breadcrumb span { color:rgba(232,224,212,.7) }

/* Titre hero */
.hero-title,
.hero-service h1,
.hero-inner h1 {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(2.8rem, 5.5vw, 4.5rem);
  font-weight:400; line-height:.95;
  letter-spacing:.01em; margin-bottom:22px;
   color:var(--txt);
  animation:fadeUp .65s ease-out .14s both;
}
.hero-title .accent,
.hero-title strong,
.hero-service h1 strong,
.hero-inner h1 strong {
  color:var(--accent);
  background:none; -webkit-text-fill-color:currentColor;
}
.hero-desc {
  font-size:1.05rem; line-height:1.82; color:rgba(232,224,212,.65);
  max-width:580px; margin-bottom:34px;
  animation:fadeUp .65s ease-out .24s both;
}
.hero-actions, .hero-ctas {
  display:flex; gap:12px; flex-wrap:wrap;
  animation:fadeUp .65s ease-out .34s both;
}

/* ── BOUTONS ──────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:9px;
  padding:15px 32px;
  background:var(--blue); color:#fff;
  border:none; border-radius:50px;
  font-size:.88rem; font-weight:700; font-family:inherit;
  text-transform:uppercase; letter-spacing:.04em;
  cursor:pointer; text-decoration:none;
  transition:all .3s;
  box-shadow:0 4px 16px rgba(26,63,111,.25);
}
.btn-primary:hover { background:var(--blue-light); transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,63,111,.3) }
.btn-primary svg { width:16px; height:16px }

.btn-secondary {
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 28px;
  background:transparent; color:#e8e0d4;
  border:1.5px solid rgba(232,224,212,.25); border-radius:50px;
  font-size:.88rem; font-weight:700; font-family:inherit;
  cursor:pointer; text-decoration:none; transition:all .3s;
}
.btn-secondary:hover { border-color:rgba(232,224,212,.6); background:rgba(255,255,255,.06); transform:translateY(-2px) }
.btn-secondary svg { width:16px; height:16px }

.btn-phone {
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 28px;
  background:rgba(255,255,255,.06); color:#e8e0d4;
  border:1px solid rgba(255,255,255,.12); border-radius:50px;
  font-size:.88rem; font-weight:700; font-family:inherit;
  cursor:pointer; text-decoration:none; transition:all .3s;
}
.btn-phone:hover { background:rgba(255,255,255,.12); transform:translateY(-2px) }

/* ── SECTIONS ─────────────────────────────────────────────── */
section { padding:96px 52px; position:relative }

.section-sep {
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(26,63,111,.1), transparent);
}

.section-label {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:var(--blue); margin-bottom:12px;
}
/* Sur fond sombre → label en or */
.hero-service .section-label,
footer .section-label,
.testimonials-section .section-label { color:var(--accent) }

.section-title {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(2rem, 4.2vw, 3.2rem);
  font-weight:400; letter-spacing:.01em;
  margin-bottom:14px; line-height:.95;
  text-transform:uppercase; color:var(--txt);
}
.section-title .accent,
.section-title strong {
  color:var(--blue);
  background:none; -webkit-text-fill-color:currentColor;
}
/* Sur fond sombre → accent en or */
.hero-service .section-title .accent,
.hero-service .section-title strong,
.testimonials-section .section-title .accent,
footer .section-title .accent { color:var(--accent) }

.section-sub {
  color:var(--txt2); font-size:1rem; line-height:1.8; max-width:640px;
}

/* Texte long */
.prose { max-width:760px }
.prose p { font-size:1rem; line-height:1.85; color:var(--txt2); margin-bottom:1.25em }
.prose p:last-child { margin-bottom:0 }
.prose strong { color:var(--txt); font-weight:600 }
.prose ul { padding-left:1.4em; margin-bottom:1.25em }
.prose ul li { color:var(--txt2); line-height:1.8; margin-bottom:.4em }
.prose .highlight { color:var(--blue-light); font-weight:600 }
section > p,
section > div > p:not(.hero-desc):not(.footer-desc):not(.cta-desc):not(.section-sub) { line-height:1.82 }

.section-header { text-align:center; margin-bottom:56px }
.section-header .section-sub { margin:0 auto }
.container > .section-title { text-align:center }

/* ── CARTES SERVICE ───────────────────────────────────────── */
.svc-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:1100px }
.svc-card {
  background:var(--bg-card);
  border:1.5px solid var(--border-c);
  border-radius:var(--r-lg);
  padding:28px 24px;
  transition:all .35s cubic-bezier(.4,0,.2,1);
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-card);
}
.svc-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--blue), var(--accent));
  opacity:0; transition:opacity .35s;
}
.svc-card:hover {
  background:var(--bg-card-h); border-color:var(--border-ch);
  transform:translateY(-4px); box-shadow:0 8px 32px rgba(0,0,0,.1);
}
.svc-card:hover::before { opacity:1 }
.svc-icon {
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background:rgba(26,63,111,.07); border:1px solid rgba(26,63,111,.14);
  margin-bottom:16px; font-size:1.4rem; line-height:1;
}
.svc-icon svg { width:22px; height:22px; color:var(--blue) }
.svc-card h3 { font-size:1.02rem; font-weight:700; margin-bottom:10px; color:var(--txt) }
.svc-card p  { font-size:.9rem; line-height:1.76; color:var(--txt2) }
.svc-card a  {
  display:inline-flex; align-items:center; gap:5px;
  color:var(--blue); font-size:.84rem; font-weight:600;
  text-decoration:none; margin-top:14px; transition:gap .2s;
}
.svc-card a:hover { gap:9px }

/* ── CARTES POURQUOI NOUS ─────────────────────────────────── */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1100px; margin:0 auto }
.why-card {
  background:var(--bg-card); border:1.5px solid var(--border-c);
  border-radius:var(--r-lg); padding:32px 24px; text-align:center;
  transition:border-color .3s, transform .3s; box-shadow:var(--shadow-card);
}
.why-card:hover { border-color:var(--border-ch); transform:translateY(-3px) }
.why-icon {
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  border-radius:16px;
  background:rgba(26,63,111,.07); border:1px solid rgba(26,63,111,.14);
  margin:0 auto 18px; font-size:1.5rem; line-height:1;
}
.why-icon svg { width:26px; height:26px; color:var(--blue) }
.why-card h3 { font-size:1.02rem; font-weight:700; margin-bottom:10px; color:var(--txt) }
.why-card p  { font-size:.92rem; line-height:1.76; color:var(--txt2) }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-section { background:var(--bg2) }
.faq-list { max-width:800px; margin:0 auto }
.faq-item {
  border:1.5px solid var(--border-c); border-radius:var(--r-md);
  margin-bottom:10px; overflow:hidden;
  transition:border-color .3s, background .3s; background:var(--bg-card);
}
.faq-item:hover { border-color:var(--border-ch); background:var(--bg-card-h) }
.faq-q {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 26px; cursor:pointer;
  font-weight:600; font-size:.96rem; line-height:1.45;
  background:transparent; border:none;
  color:var(--txt); width:100%; text-align:left; font-family:inherit;
  transition:color .2s;
}
.faq-q:hover { color:var(--blue) }
.faq-q::after {
  content:'+'; font-size:1.5rem; font-weight:300; line-height:1;
  color:var(--blue); flex-shrink:0; transition:transform .3s;
  min-width:20px; text-align:center;
}
.faq-q:has(svg)::after { display:none }
.faq-q[aria-expanded="true"]::after { transform:rotate(45deg) }
.faq-q.open::after { transform:rotate(45deg) }
.faq-q svg { width:20px; height:20px; color:var(--blue); transition:transform .3s; flex-shrink:0 }
.faq-q.open svg { transform:rotate(180deg) }
.faq-a {
  overflow:hidden; max-height:0;
  padding:0 26px 0; font-size:.93rem; line-height:1.82; color:var(--txt2);
  transition:max-height .42s cubic-bezier(0,.99,.3,1), padding .3s ease;
}
.faq-a.open { max-height:800px; padding:0 26px 24px }
.faq-a p { padding-bottom:24px; line-height:1.82 }
.faq-a strong { color:var(--txt); font-weight:600 }

/* ── TAGS DE ZONE ─────────────────────────────────────────── */
.zone-tags { display:flex; flex-wrap:wrap; gap:10px }
.zone-tag {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px;
  background:var(--bg-card); border:1.5px solid var(--border-c);
  border-radius:50px; font-size:.84rem; font-weight:600; color:var(--txt2);
  transition:all .25s; text-decoration:none;
}
a.zone-tag { cursor:pointer }
a.zone-tag:hover { border-color:var(--border-ch); color:var(--txt); background:var(--bg-card-h) }
.zone-tag svg { width:14px; height:14px; color:var(--blue); opacity:.7 }

iframe {
  border:0; border-radius:var(--r-lg);
  box-shadow:0 4px 20px rgba(0,0,0,.08); display:block;
}

/* ── SECTION CTA ──────────────────────────────────────────── */
.cta-section { padding:72px 52px 96px; background:var(--bg-warm) }
.cta-card {
  max-width:820px; margin:0 auto;
  background:var(--blue); border-radius:var(--r-xl);
  padding:64px 52px; text-align:center;
  position:relative; overflow:hidden;
  box-shadow:0 8px 40px rgba(26,63,111,.25);
}
.cta-card::before {
  content:''; position:absolute;
  top:-50%; right:-20%; width:400px; height:400px;
  background:radial-gradient(circle, rgba(255,255,255,.07), transparent 60%);
  border-radius:50%; pointer-events:none;
}
.cta-card > * { position:relative; z-index:1 }
.cta-icon {
  width:48px; height:48px; margin:0 auto 22px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.6); animation:pulseg 3s ease-in-out infinite;
}
.cta-icon svg { width:32px; height:32px }
@keyframes pulseg { 0%,100% { opacity:.6; transform:scale(1) } 50% { opacity:1; transform:scale(1.1) } }

.cta-title {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(2rem,4vw,3rem); font-weight:400;
  margin-bottom:14px; letter-spacing:.01em; line-height:.95;
  text-transform:uppercase; color:#fff;
}
.cta-title .accent { color:var(--accent); background:none; -webkit-text-fill-color:currentColor }
.cta-desc { color:rgba(255,255,255,.65); font-size:.97rem; line-height:1.78; margin-bottom:30px }

.cta-card h2 {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(2rem,4vw,3rem); font-weight:400;
  margin-bottom:14px; letter-spacing:.01em; line-height:.95;
  text-transform:uppercase; color:#fff;
}
.cta-card p { color:rgba(255,255,255,.65); font-size:.97rem; line-height:1.78; margin-bottom:28px }
.cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.cta-note { font-size:.76rem; color:rgba(255,255,255,.4); margin-top:16px }

/* Boutons dans la CTA (fond bleu foncé) */
.cta-card .btn-primary {
  background:#fff; color:var(--blue);
  box-shadow:0 4px 16px rgba(0,0,0,.15);
}
.cta-card .btn-primary:hover { background:var(--bg-warm); color:var(--blue); transform:translateY(-2px) }
.cta-card .btn-phone {
  background:transparent; color:#fff;
  border:1.5px solid rgba(255,255,255,.3); border-radius:50px;
}
.cta-card .btn-phone:hover { border-color:#fff; background:rgba(255,255,255,.08) }

/* ── FOOTER ───────────────────────────────────────────────── */
footer {
  background:var(--bg-dark);
  border-top:1px solid rgba(255,255,255,.04);
  padding:60px 52px 32px; color:var(--txt);
}
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; margin-bottom:44px }
.footer-brand, .footer-logo {
  font-family:'Sora', sans-serif; font-weight:800; font-size:1.1rem;
  margin-bottom:14px; display:flex; align-items:center; gap:8px; color:var(--txt);
}
.footer-brand svg { width:20px; height:20px; color:var(--accent) }
.footer-desc { font-size:.84rem; line-height:1.65; color:var(--txt2); max-width:280px }
.footer-col h4, footer .footer-grid > div > h4 {
  font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--accent); margin-bottom:14px;
}
.footer-col a, footer ul { list-style:none }
.footer-col a, footer ul li a {
  display:block; font-size:.84rem; color:var(--txt2);
  text-decoration:none; padding:3px 0; transition:color .2s;
}
.footer-col a:hover, footer ul li a:hover { color:var(--txt) }
footer .footer-grid > div > p { font-size:.84rem; color:var(--txt2); margin-bottom:5px }
footer .footer-grid > div > p a { color:var(--txt2); text-decoration:none; transition:color .2s }
footer .footer-grid > div > p a:hover { color:var(--txt) }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.05);
  padding-top:20px; text-align:center; font-size:.78rem; color:var(--txt3);
}
.footer-bottom a { color:var(--txt3); text-decoration:none; transition:color .2s }
.footer-bottom a:hover { color:var(--txt2) }

/* ── LIENS AUTRES SERVICES ────────────────────────────────── */
.other-services { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:900px }
.other-svc-link {
  display:flex; align-items:center; gap:10px;
  padding:16px 20px;
  background:var(--bg-card); border:1.5px solid var(--border-c);
  border-radius:var(--r-md); text-decoration:none; color:var(--txt);
  font-weight:600; font-size:.9rem; transition:all .3s;
}
.other-svc-link:hover { border-color:var(--border-ch); background:var(--bg-card-h); transform:translateY(-2px) }
.other-svc-link svg { width:18px; height:18px; color:var(--blue); flex-shrink:0 }

/* ── BANDEAU DE CONFIANCE ─────────────────────────────────── */
.trust-strip {
  background:rgba(26,63,111,.05);
  border-bottom:1px solid rgba(26,63,111,.1);
  padding:13px 52px;
}
.trust-strip-inner {
  display:flex; align-items:center; justify-content:center;
  gap:32px; flex-wrap:wrap; max-width:1100px; margin:0 auto;
}
.trust-item { display:flex; align-items:center; gap:7px; font-size:.8rem; font-weight:600; color:var(--txt2); white-space:nowrap }
.trust-item span { color:var(--txt) }
.trust-item strong { color:var(--blue) }

/* ── TÉMOIGNAGES ──────────────────────────────────────────── */
.testimonials-section { background:var(--bg-dark); color:var(--txt) }
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px }
.testimonial-card {
  background:var(--bg-card); border:1px solid var(--border-c);
  border-radius:var(--r-lg); padding:28px 24px 22px;
  position:relative; transition:border-color .3s, transform .3s;
  box-shadow:var(--shadow-card);
}
.testimonial-card:hover { border-color:var(--border-ch); transform:translateY(-3px) }
.testimonial-card::before {
  content:'\201C'; font-size:4.5rem; line-height:1;
  color:rgba(201,168,76,.08);
  font-family:'Bebas Neue', sans-serif;
  position:absolute; top:10px; right:16px; pointer-events:none;
}
.testimonial-stars { font-size:.85rem; margin-bottom:12px; color:var(--star) }
.testimonial-text { font-size:.91rem; line-height:1.78; color:var(--txt2); font-style:italic; margin-bottom:20px }
.testimonial-author { display:flex; align-items:center; gap:10px }
.testimonial-avatar {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue), var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.86rem; color:#fff; flex-shrink:0;
}
.testimonial-name { font-size:.86rem; font-weight:700; color:var(--txt); line-height:1.3 }
.testimonial-location { font-size:.74rem; color:var(--txt3) }

/* ── BARRE DE STATS ───────────────────────────────────────── */
.stats-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:52px }
.stat-item {
  text-align:center; padding:26px 16px;
  background:var(--bg-card); border:1.5px solid var(--border-c);
  border-radius:var(--r-md); transition:border-color .3s;
}
.stat-item:hover { border-color:var(--border-ch) }
.stat-num {
  font-family:'Bebas Neue', sans-serif; font-weight:400;
  font-size:2.4rem; color:var(--blue); line-height:1.1;
  display:block; margin-bottom:6px;
}
.stat-label { font-size:.78rem; color:var(--txt2); line-height:1.45 }

/* ── BADGE GARANTIE ───────────────────────────────────────── */
.guarantee-badge {
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px;
  background:rgba(26,63,111,.06); border:1px solid rgba(26,63,111,.15);
  border-radius:50px; font-size:.84rem; font-weight:600; color:var(--blue);
  margin-top:20px;
}

/* ── ANIMATIONS ───────────────────────────────────────────── */
@keyframes fadeUp { from { opacity:0; transform:translateY(22px) } to { opacity:1; transform:translateY(0) } }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease-out, transform .7s ease-out }
.reveal.visible { opacity:1; transform:translateY(0) }

/* ── IMAGE PLACEHOLDERS ───────────────────────────────────── */
.img-placeholder {
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:10px;
  background:var(--bg-warm); color:var(--text-muted);
  border-radius:var(--r-lg);
}
.img-placeholder svg { width:48px; height:48px; opacity:.25 }
.img-placeholder span {
  font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; opacity:.35; text-align:center; padding:0 16px;
}
.img-placeholder-dark { background:#222; }
.img-placeholder-dark svg { opacity:.2; color:rgba(255,255,255,.5) }
.img-placeholder-dark span { color:rgba(255,255,255,.3) }

/* ── SECTION WRAPPERS ─────────────────────────────────────── */
.section-light { background:var(--bg-light); padding:96px 52px }
.section-dark  { background:var(--bg-dark);  padding:96px 52px; position:relative }
.section-dark  { --bg-card:#1a1a1a; --bg-card-h:#222; --border-c:rgba(255,255,255,.07); --border-ch:rgba(201,168,76,.3); --txt:#e8e0d4; --txt2:rgba(232,224,212,.55); --txt3:rgba(232,224,212,.3); --shadow-card:0 4px 24px rgba(0,0,0,.35) }
.section-dark .section-label { color:var(--accent) }
.section-dark .section-title { color:#fff }
.section-dark .section-sub   { color:rgba(232,224,212,.55) }
.textured { position:relative }
.textured::before { content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E"); pointer-events:none; z-index:0 }
.textured > * { position:relative; z-index:1 }

/* ── HOMEPAGE HERO ────────────────────────────────────────── */
.hp-hero {
  padding:100px 52px 60px;
  min-height:100vh; display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px; align-items:center;
  max-width:1300px; margin:0 auto;
}
.hp-hero-left { padding-top:20px }
.hp-title {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(3rem, 6.5vw, 5rem);
  line-height:.92; letter-spacing:-.01em;
  color:var(--text-dark); margin-bottom:24px;
  
}
.hp-title-accent { color:var(--blue) }
.hp-desc {
  font-size:1.05rem; line-height:1.7; color:var(--text-mid);
  max-width:480px; margin-bottom:32px;
}
.hp-desc strong { color:var(--text-dark) }
.hp-actions {
  display:flex; gap:12px; align-items:center;
  flex-wrap:wrap; margin-bottom:24px;
}
.btn-main {
  display:inline-flex; align-items:center; gap:8px;
  padding:16px 32px;
  background:var(--blue); color:#fff;
  border-radius:50px; font-size:.88rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  text-decoration:none; transition:all .3s;
  box-shadow:0 4px 16px rgba(26,63,111,.2);
}
.btn-main:hover { background:var(--blue-light); transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,63,111,.25) }
.btn-main svg { width:16px; height:16px }
.btn-main-white { background:#fff; color:var(--blue); box-shadow:0 4px 16px rgba(0,0,0,.15) }
.btn-main-white:hover { background:var(--bg-warm); color:var(--blue) }
.btn-outline-white {
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 28px;
  background:transparent; color:#fff;
  border:1.5px solid rgba(255,255,255,.35); border-radius:50px;
  font-size:.88rem; font-weight:700;
  text-decoration:none; transition:all .3s;
}
.btn-outline-white:hover { border-color:#fff; background:rgba(255,255,255,.07) }
.btn-outline-white svg { width:16px; height:16px }

.google-badge {
  display:flex; align-items:center; gap:10px;
  padding:10px 18px; background:#fff;
  border-radius:50px; border:1px solid rgba(0,0,0,.08);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.google-badge svg { width:20px; height:20px }
.google-badge-text { font-size:.78rem; font-weight:600; color:var(--text-dark); line-height:1.2 }
.google-badge-text span { color:var(--text-mid); font-weight:500 }
.google-stars { display:flex; gap:1px }
.google-stars svg { width:14px; height:14px; color:#f5a623 }
.hp-tags { display:flex; gap:8px; flex-wrap:wrap }
.hp-tag {
  padding:8px 18px; border:1.5px solid var(--text-dark);
  border-radius:50px; font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--text-dark);
}
/* Hero right column */
.hp-hero-right { position:relative }
.hp-hero-img {
  width:100%; aspect-ratio:1/1;
  overflow:hidden;
  border-radius:24px;
  box-shadow:0 24px 64px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.06);
}
.hp-hero-stats {
  position:absolute; bottom:24px; left:50%;
  transform:translateX(-50%);
  display:flex; gap:2px; z-index:2;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  border-radius:14px; overflow:hidden;
}
.hp-stat {
  background:var(--bg-dark); color:#fff;
  padding:16px 28px; text-align:center; min-width:100px;
}
.hp-stat:first-child { border-radius:0 }
.hp-stat:last-child  { border-radius:0 }
.hp-stat-num   { font-family:'Bebas Neue',sans-serif; font-size:1.9rem; letter-spacing:.02em; line-height:1 }
.hp-stat-label { font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.55); margin-top:4px }

/* ── SERVICES DARK CARDS WITH IMAGE TOP ───────────────────── */
.svc-cards-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px; max-width:1200px; margin:0 auto;
}
.svc-card-img-card {
  background:var(--bg-card); border-radius:var(--r-lg);
  overflow:hidden; transition:transform .4s cubic-bezier(.4,0,.2,1);
  text-decoration:none; color:inherit; display:block;
  border:1px solid rgba(255,255,255,.05);
}
.svc-card-img-card:hover { transform:translateY(-4px) }
.svc-card-top {
  width:100%; aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:8px;
}
.svc-card-top svg { width:48px; height:48px }
.svc-card-body { padding:24px }
.svc-card-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.svc-card-img-card h3 {
  font-family:'Bebas Neue', sans-serif;
  font-size:1.35rem; letter-spacing:.03em; text-transform:uppercase;
  color:var(--txt);
}
.svc-card-arrow {
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border-radius:50%; transition:background .3s; flex-shrink:0;
}
.svc-card-img-card:hover .svc-card-arrow { background:var(--blue) }
.svc-card-arrow svg { width:16px; height:16px; color:#fff }
.svc-card-img-card p { font-size:.84rem; line-height:1.6; color:rgba(255,255,255,.5) }
.svc-card-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:14px }
.svc-card-tag {
  font-size:.68rem; padding:4px 10px;
  border:1px solid rgba(255,255,255,.12); border-radius:50px;
  color:rgba(255,255,255,.5); font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
}

/* ── ABOUT 2-COLUMN ───────────────────────────────────────── */
.about-2col {
  display:grid; grid-template-columns:1fr 1fr;
  gap:56px; max-width:1200px; margin:0 auto; align-items:center;
}
.about-lead { font-size:1rem; line-height:1.7; color:var(--txt2); margin-bottom:14px }
.about-lead strong { color:var(--txt); font-weight:700 }
.about-vals { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:28px }
.val-item {
  padding:18px; background:var(--bg-warm);
  border-radius:14px; display:flex; align-items:flex-start; gap:12px;
  border:1px solid rgba(0,0,0,.04);
}
.val-item-icon {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:var(--blue); border-radius:10px; flex-shrink:0;
}
.val-item-icon svg { width:18px; height:18px; color:#fff }
.val-item h4 { font-size:.86rem; font-weight:700; margin-bottom:2px; color:var(--txt) }
.val-item p  { font-size:.76rem; color:var(--txt2); line-height:1.5 }
.about-stats-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.about-stat-block {
  background:var(--bg-warm); border-radius:var(--r-lg);
  padding:28px 20px; text-align:center; border:1px solid rgba(0,0,0,.04);
}
.about-stat-num  { font-family:'Bebas Neue',sans-serif; font-size:2.4rem; color:var(--blue); line-height:1 }
.about-stat-lbl  { font-size:.72rem; color:var(--txt2); margin-top:6px; text-transform:uppercase; letter-spacing:.05em; font-weight:600 }
.about-big-img   { aspect-ratio:2.2/1; margin-top:4px; min-height:160px }

/* ── ZONE DARK 2-COLUMN ───────────────────────────────────── */
.zone-2col {
  display:grid; grid-template-columns:1fr 1fr;
  gap:40px; max-width:1200px; margin:0 auto; align-items:start;
}
.zone-map-wrap {
  aspect-ratio:4/3; border-radius:var(--r-lg);
  overflow:hidden; border:1px solid rgba(255,255,255,.06);
}
.zone-map-wrap iframe { width:100%; height:100%; border:none; filter:brightness(.85) contrast(1.1) }
.zone-right h3 {
  font-family:'Bebas Neue', sans-serif;
  font-size:1.6rem; text-transform:uppercase; letter-spacing:.02em;
  margin-bottom:8px; color:#fff;
}
.zone-right-sub { font-size:.88rem; color:rgba(255,255,255,.5); margin-bottom:20px }
.commune-grid-dark { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.commune-link-dark {
  display:flex; align-items:center; gap:12px;
  padding:16px 18px; background:var(--bg-card-dark);
  border:1px solid rgba(255,255,255,.06); border-radius:14px;
  text-decoration:none; color:#fff; transition:all .3s;
}
.commune-link-dark:hover { border-color:var(--accent); background:rgba(201,168,76,.06) }
.commune-dot-gold { width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0 }
.commune-name-dark { font-size:.88rem; font-weight:700 }
.commune-cp-dark   { font-size:.68rem; color:rgba(255,255,255,.4); margin-top:1px }

/* ── CTA CARD 2-COLUMN ────────────────────────────────────── */
.cta-section { padding:80px 52px }
.cta-card {
  max-width:900px; margin:0 auto;
  background:var(--blue); border-radius:var(--r-lg);
  padding:64px; display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:40px; align-items:center;
  position:relative; overflow:hidden;
}
.cta-card::before {
  content:''; position:absolute;
  top:-50%; right:-20%; width:400px; height:400px;
  background:radial-gradient(circle, rgba(255,255,255,.06), transparent 60%);
  border-radius:50%; pointer-events:none;
}
.cta-card > * { position:relative; z-index:1 }
.cta-title {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(2rem,4vw,3rem); color:#fff;
  text-transform:uppercase; line-height:.95; margin-bottom:12px;
}
.cta-desc { color:rgba(255,255,255,.65); font-size:.95rem; line-height:1.6; margin-bottom:28px }
.cta-actions { display:flex; gap:12px; flex-wrap:wrap }
.cta-big-phone {
  font-family:'Bebas Neue', sans-serif;
  font-size:2.8rem; color:#fff; line-height:1; letter-spacing:.02em;
}
.cta-phone-sub {
  font-size:.78rem; color:rgba(255,255,255,.5); margin-top:6px;
  text-transform:uppercase; letter-spacing:.06em; font-weight:600;
}

/* ── HERO IMAGE PLACEHOLDER (service/commune pages) ──────── */
.hero-img-block {
  display:grid; grid-template-columns:1fr 1fr;
  gap:40px; max-width:1200px; margin:0 auto 0;
  align-items:start; padding:0 52px 0;
}
.hero-img-side {
  aspect-ratio:4/3; border-radius:var(--r-lg);
  overflow:hidden;
}
.hero-img-banner {
  width:100%; height:300px; border-radius:0;
  margin-bottom:0;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:1100px) {
  .footer-grid { grid-template-columns:1fr 1fr 1fr }
  .footer-grid > div:first-child { grid-column:1/-1 }
  .svc-cards-grid { grid-template-columns:repeat(2,1fr) }
  .hp-hero { grid-template-columns:1fr; min-height:auto; padding:100px 32px 48px; gap:40px }
  .hp-hero-right { max-width:540px; margin:0 auto }
  .hp-hero-stats { bottom:20px; left:50%; transform:translateX(-50%) }
}
@media (max-width:900px) {
  .section-light, .section-dark { padding:72px 20px }
  .about-2col { grid-template-columns:1fr; gap:32px }
  .zone-2col { grid-template-columns:1fr }
  .zone-map-wrap { aspect-ratio:16/9 }
  .cta-card { grid-template-columns:1fr; padding:48px 36px }
  .commune-grid-dark { grid-template-columns:1fr }
  nav { padding:0 16px; top:8px; left:8px; right:8px }
  .nav-links { display:none }
  .nav-menu-btn { display:block }
  section { padding:72px 20px }
  .hero-service { padding:110px 20px 64px }
  .svc-grid, .other-services { grid-template-columns:1fr }
  .svc-grid[style*="repeat(2"] { grid-template-columns:1fr !important }
  .why-grid { grid-template-columns:1fr 1fr }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px }
  .footer-grid > div:first-child { grid-column:1/-1 }
  footer { padding:48px 24px 28px }
  .cta-section { padding:56px 20px 72px }
  .cta-card { padding:44px 28px }
  .hero-actions, .hero-ctas { flex-direction:column; align-items:flex-start }
  .cta-actions { flex-direction:column; align-items:center }
  .faq-q { padding:18px 20px; font-size:.92rem }
  .faq-a { padding:0 20px 0 }
  .faq-a.open { padding:0 20px 20px }
  .trust-strip { padding:12px 20px }
  .trust-strip-inner { gap:16px }
  .testimonials-grid { grid-template-columns:1fr 1fr }
  .stats-bar { grid-template-columns:1fr 1fr }
}
@media (max-width:640px) {
  .hp-hero { padding:90px 20px 40px }
  .hp-title { font-size:clamp(2.6rem,12vw,4rem) }
  .hp-actions { flex-direction:column; align-items:flex-start }
  .svc-cards-grid { grid-template-columns:1fr }
  .about-vals { grid-template-columns:1fr }
  .commune-grid-dark { grid-template-columns:1fr }
  .cta-card { padding:36px 24px }
  .cta-big-phone { font-size:2rem }
  nav { padding:0 12px; top:6px; left:6px; right:6px }
  .footer-grid { grid-template-columns:1fr }
  footer { padding:40px 18px 24px }
  .zone-tags { justify-content:flex-start }
  .why-grid { grid-template-columns:1fr }
  .hero-service { padding:100px 16px 56px }
  section { padding:64px 16px }
  .cta-card { padding:36px 20px }
  .cta-section { padding:48px 16px 60px }
  .section-title { font-size:clamp(1.8rem,7vw,2.5rem) }
  .testimonials-grid { grid-template-columns:1fr }
  .stats-bar { grid-template-columns:1fr 1fr }
  .trust-strip-inner { gap:12px }
  .trust-item { font-size:.74rem }
}