/* ============================================================
   MODERN.CSS — Couche de modernisation 2026
   Chargee en dernier. Additive : nouvelles classes + retouches
   ciblees. Ne pas dupliquer les regles des autres fichiers.
   ============================================================ */

/* ---------- 1. Reglages globaux ---------- */
html { scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  background-color: var(--color-bg);
  -webkit-tap-highlight-color: transparent;
}

/* place pour la barre CTA fixe sur mobile */
@media (max-width: 1023px) {
  body { padding-bottom: var(--bottombar-h); }
}

::selection { background: var(--color-primary); color: #fff; }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---------- 2. Barre de progression de lecture ---------- */
.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 3px;
  width: 0;
  background: var(--gradient-primary);
  z-index: 2000;
  transition: width .1s linear;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }

/* ---------- 3. Header : effet verre au scroll ---------- */
.header {
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  background-color: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, background-color .25s ease, padding .25s ease;
}
.header.is-sticky {
  background-color: rgba(255, 255, 255, 0.98);
  border-bottom-color: var(--color-border);
  box-shadow: 0 6px 24px -12px rgba(11, 18, 32, 0.25);
}
.nav__link.active { font-weight: var(--fw-bold); }

/* ---- Nav : plus compacte + sous-menu "Nos isolations" ---- */
.nav__list { gap: clamp(1rem, 2vw, 1.75rem); }
.nav__link { font-size: .95rem; white-space: nowrap; }
.nav__item--sub { position: relative; }
.nav__toggle {
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: inherit;
  color: var(--color-text-primary);
  padding: var(--space-xs) 0;
}
.nav__toggle i { font-size: .7em; transition: transform .25s ease; }
.nav__item--sub:hover .nav__toggle i,
.nav__item--sub:focus-within .nav__toggle i,
.nav__item--sub.is-open .nav__toggle i { transform: rotate(180deg); }
.nav__submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 250px;
  margin: 0;
  padding: 14px .5rem .5rem;      /* le padding-top haut sert de pont anti-gap */
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: var(--z-dropdown);
}
.nav__submenu::after {           /* la "carte" visible, decalee sous le pont */
  content: "";
  position: absolute;
  inset: 14px 0 0 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: -1;
}
.nav__item--sub:hover .nav__submenu,
.nav__item--sub:focus-within .nav__submenu,
.nav__item--sub.is-open .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav__sublink {
  display: block;
  padding: .6rem .85rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-weight: 500;
  font-size: .92rem;
  white-space: nowrap;
}
.nav__sublink:hover,
.nav__sublink.active { background: var(--color-primary-soft); color: var(--color-primary-dark); }

/* ---------- 4. Boutons : finition ---------- */
.btn { border-radius: var(--radius-md); letter-spacing: .3px; }
.btn--primary { background: var(--gradient-primary); box-shadow: var(--shadow-brand); }
.btn--primary:hover:not(:disabled) { filter: brightness(1.03); box-shadow: 0 16px 40px -10px rgba(217,119,6,.45); }

.btn--whatsapp {
  background-color: var(--color-whatsapp);
  color: #fff;
  border-color: var(--color-whatsapp);
}
.btn--whatsapp:hover:not(:disabled) { background-color: #1ebe5b; color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
.btn--ghost:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }

/* ---------- 5. Bandeau de reassurance (sous les CTA) ---------- */
.assurance {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: center;
  margin-top: 1rem;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.9);
}
.assurance--dark { color: var(--color-text-secondary); }
.assurance__item { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; }
.assurance__item i { color: var(--color-primary); }

/* ---------- 6. Hero : lisibilite renforcee ---------- */
.hero { overflow: hidden; }
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11,18,32,.55) 0%, rgba(11,18,32,.72) 55%, rgba(11,18,32,.88) 100%);
}
.hero__container { position: relative; z-index: 2; }
.hero__inner { max-width: 780px; }
.hero h1 { font-size: clamp(2.15rem, 5.2vw, 4rem); margin-bottom: 1rem; }
.hero__subtitle { max-width: 56ch; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .9rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 1.25rem;
  backdrop-filter: blur(4px);
}
.hero__badge i { color: var(--color-primary-light); }

/* ---------- 7. Cartes services : lien reel + fleche ---------- */
.service-card--hover { will-change: transform; }
.service-card--hover:hover { transform: translateY(-4px); }
.service-card--hover .service-card__reveal { max-height: 220px; opacity: 1; transform: none; } /* visible aussi sans hover (mobile/tactile) */
@media (hover: hover) {
  .service-card--hover .service-card__reveal { max-height: 0; opacity: 0; transform: translateY(20px); }
  .service-card--hover:hover .service-card__reveal,
  .service-card--hover:focus-visible .service-card__reveal { max-height: 220px; opacity: 1; transform: none; }
}

/* ---------- 8. Fil d'Ariane ---------- */
.breadcrumb {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  padding: .85rem 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.breadcrumb__list a { color: var(--color-text-secondary); font-weight: 500; }
.breadcrumb__list a:hover { color: var(--color-primary); }
.breadcrumb__sep { opacity: .5; }
.breadcrumb__current { color: var(--color-text-primary); font-weight: 600; }

/* ---------- 9. Barre CTA fixe (mobile) ---------- */
.action-bar {
  position: fixed;
  inset: auto 0 0 0;
  height: var(--bottombar-h);
  display: none;
  z-index: 1500;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 24px -12px rgba(11,18,32,.3);
  padding: 8px;
  gap: 8px;
}
.action-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  height: 100%;
}
.action-bar__call { background: var(--color-secondary); color: #fff; }
.action-bar__quote { background: var(--color-whatsapp); color: #fff; }
@media (max-width: 1023px) { .action-bar { display: flex; } }

/* ---------- 10. Bouton WhatsApp flottant (desktop) ---------- */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 12px 30px -6px rgba(37, 211, 102, .5);
  z-index: 1400;
  transition: transform .2s ease;
}
.wa-float:hover { transform: scale(1.08); color: #fff; }
.wa-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37,211,102,.45);
  animation: waPulse 2.4s infinite;
}
@keyframes waPulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
  70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
@media (min-width: 1024px) { .wa-float { display: flex; } }
@media (prefers-reduced-motion: reduce) { .wa-float::after { animation: none; } }

/* ---------- 11. Reveal : robuste sans JS ----------
   Par defaut TOUT est visible. Le JS de reveal ajoute la classe
   .reveal-on sur <html> uniquement s'il fonctionne : les elements
   sont alors masques puis animes a l'apparition. Si le JS echoue,
   la page reste entierement visible. */
[data-reveal] { opacity: 1; transform: none; }
html.reveal-on [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(24px);
}
html.reveal-on [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- 12. Utilitaires pages SERVICES (.svc-*) ---------- */
.svc-hero {
  position: relative;
  color: #fff;
  padding: clamp(3rem, 8vw, 5.5rem) 0;
  background:
    linear-gradient(180deg, rgba(11,18,32,.72), rgba(11,18,32,.82)),
    var(--svc-hero-img, var(--gradient-ink)) center/cover no-repeat;
}
.svc-hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.12; margin-bottom: 1rem; max-width: 22ch; }
.svc-hero h1 .text-primary { color: var(--color-primary-light); }
.svc-hero p { color: rgba(255,255,255,.9); font-size: var(--fs-lg); max-width: 60ch; }
.svc-hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }

.svc-section { padding: clamp(3rem, 7vw, 5rem) 0; }
.svc-section--muted { background: var(--color-bg); }
.svc-section--ink { background: var(--gradient-ink); color: #fff; }
.svc-section--ink h2, .svc-section--ink h3 { color: #fff; }
.svc-section--ink p { color: rgba(255,255,255,.82); }

.svc-split {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) { .svc-split { grid-template-columns: 1.05fr .95fr; } }
.svc-split--reverse > :first-child { order: 2; }
@media (max-width: 899px) { .svc-split--reverse > :first-child { order: 0; } }
.svc-split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.svc-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* bande photos "en images" */
.svc-photos {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.svc-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.svc-photos img:hover { transform: translateY(-4px) scale(1.01); }

/* footer galerie : 2 boutons */
.gallery__footer { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.svc-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: var(--transition-all);
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.svc-card__ico {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: 1.35rem;
  margin-bottom: 1rem;
}
.svc-card h3 { font-size: var(--fs-xl); margin-bottom: .5rem; }
.svc-card p { color: var(--color-text-secondary); font-size: .95rem; margin: 0; }

/* liste a puces cochees */
.svc-checks { display: grid; gap: .8rem; margin: 1.25rem 0; }
.svc-checks li { display: flex; gap: .7rem; align-items: flex-start; font-weight: 500; }
.svc-checks li::before {
  content: "\2714";
  color: var(--color-primary);
  font-weight: 900;
  margin-top: .1rem;
  flex-shrink: 0;
}

/* etapes numerotees */
.svc-steps { counter-reset: step; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.svc-step { position: relative; padding-left: 3.25rem; }
.svc-step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff; font-weight: 800;
  box-shadow: var(--shadow-brand);
}
.svc-step h4 { margin-bottom: .35rem; }
.svc-step p { color: var(--color-text-secondary); font-size: .92rem; margin: 0; }

/* bande CTA de bas de page service */
.svc-cta {
  background: var(--gradient-primary);
  color: #fff;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.svc-cta h2 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: .5rem; }
.svc-cta p { color: rgba(255,255,255,.92); font-size: var(--fs-lg); margin-bottom: 1.5rem; }
.svc-cta .btn--white { background: #fff; color: var(--color-secondary); }
.svc-cta__phone { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; color: #fff; font-weight: 700; font-size: var(--fs-lg); }
.svc-cta__phone:hover { color: #fff; text-decoration: underline; }

/* ---------- Widget Google Business Profile ---------- */
.gbp {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.25rem;
  padding: .9rem 1.25rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.gbp__g { flex-shrink: 0; }
.gbp__score { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.gbp__score > strong { font-size: 1.6rem; font-family: var(--font-display); }
.gbp__stars { color: var(--color-primary); font-size: .95rem; letter-spacing: 1px; }
.gbp__count { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: .15rem; }
.gbp__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 560px) {
  .gbp { flex-direction: column; gap: .75rem; }
  .gbp__score { align-items: center; }
  .gbp__actions { width: 100%; }
  .gbp__actions .btn { flex: 1; }
}

/* ---------- Carte Google Maps differee ---------- */
.map-embed {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-top: 1.25rem;
  background-color: #e9edf2;
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-embed__btn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(11,18,32,.35);
  color: #fff;
  font-weight: 700;
  gap: .5rem;
  border: 0;
  cursor: pointer;
}
.map-embed__btn span {
  background: var(--color-white);
  color: var(--color-text-primary);
  padding: .6rem 1.1rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
}

/* ---------- Avatars temoignages : initiales (zero requete externe) ---------- */
.testimonial-card__avatar--initials {
  display: grid;
  place-items: center;
  background: var(--gradient-primary);
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
  font-family: var(--font-display);
  letter-spacing: .5px;
}

/* ---------- 13. Section header : liseré moderne ---------- */
.section-header__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .8rem;
  background: var(--color-primary-soft);
  border-radius: var(--radius-pill);
  letter-spacing: 1px;
}

/* ============================================================
   15. ANIMATIONS PREMIUM & MISE EN PAGE EDITORIALE
   Tout est gate par prefers-reduced-motion.
   ============================================================ */

/* ---- Reveal directionnel + stagger ---- */
html.reveal-on [data-reveal="left"]:not(.is-revealed)  { opacity: 0; transform: translateX(-40px); }
html.reveal-on [data-reveal="right"]:not(.is-revealed) { opacity: 0; transform: translateX(40px); }
html.reveal-on [data-reveal="zoom"]:not(.is-revealed)  { opacity: 0; transform: scale(.92); }
html.reveal-on [data-reveal="fade"]:not(.is-revealed)  { opacity: 0; transform: none; }
html.reveal-on [data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal] {
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}

/* ---- Cascade de petits elements [data-stagger] ---- */
html.reveal-on [data-stagger] > * { opacity: 0; transform: translateY(14px); }
html.reveal-on [data-stagger].is-in > * {
  animation: staggerIn .5s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--si, 0) * 55ms);
}
@keyframes staggerIn { to { opacity: 1; transform: none; } }

/* ---- Grand numero de section (filigrane editorial) ---- */
.services, .why-choose, .quote-calculator, .process,
.realisations, .zones, .testimonials, .faq, .contact { position: relative; }
.section-num {
  position: absolute;
  top: .15em;
  right: 3%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(5rem, 15vw, 13rem);
  line-height: 1;
  color: var(--color-primary);
  opacity: .07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.services .container, .why-choose .container, .quote-calculator .container,
.process .container, .realisations .container, .zones .container,
.testimonials .container, .faq .container, .contact .container { position: relative; z-index: 1; }

/* ---- Trait de section qui se dessine ---- */
.section-header__divider { width: 0; transition: width .8s .25s cubic-bezier(.22,1,.36,1); }
[data-reveal].is-revealed .section-header__divider,
.is-revealed > .section-header__divider { width: 80px; }
html:not(.reveal-on) .section-header__divider { width: 80px; }

/* ---- Boutons : reflet au survol ---- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
}
.btn:hover::after { left: 140%; }

/* ---- Section vidéo : lecteur intégré (plus d'image de fond) ---- */
.video-section {
  background: var(--gradient-ink) !important;
}
.video-section__inner { flex-direction: column; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 900px) {
  .video-section__inner { flex-direction: row; align-items: center; }
  .video-section__card { flex: 1 1 44%; }
  .video-section__player { flex: 1 1 56%; }
}
.video-section__player { display: flex; justify-content: center; width: 100%; }
.video-section__player video {
  display: block;
  height: min(64vh, 460px);
  max-width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  background: #000;
}

/* ---- Bandeau CTA : degrade anime ---- */
.cta-banner {
  background-size: 200% 200%;
  animation: ctaShift 14s ease infinite;
}
@keyframes ctaShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---- Sections en "panneaux empiles" (plus unique) ---- */
.quote-calculator, .contact {
  position: relative;
  z-index: 2;
  border-radius: 36px 36px 0 0;
  margin-top: -36px;
  box-shadow: 0 -20px 50px -34px rgba(11,18,32,.25);
}
.why-choose, .realisations, .faq { position: relative; z-index: 1; }
@media (max-width: 600px) {
  .quote-calculator, .contact { border-radius: 22px 22px 0 0; margin-top: -22px; }
}

/* La colonne "infos" ne doit pas etirer la carte du formulaire :
   sinon la 1re etape (courte) laisse un grand vide blanc en dessous. */
.contact__content { align-items: start; }
.contact__form.wizard { align-self: start; }

.footer__credit { color: var(--color-text-muted); opacity: .75; }
.footer__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer__credit a:hover { color: var(--color-white); }

/* ---- Hero : entree + indicateur de defilement ---- */
.hero__badge { position: relative; overflow: hidden; }
.hero__badge::after {
  content: "";
  position: absolute; inset: 0; left: -100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.25), transparent);
  animation: badgeSheen 5s ease-in-out infinite;
}
@keyframes badgeSheen { 0%,60% { left: -100%; } 100% { left: 120%; } }

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 14px;
  z-index: 3;
  display: none;
}
.hero__cue::before {
  content: "";
  position: absolute;
  left: 50%; top: 8px;
  width: 4px; height: 8px;
  margin-left: -2px;
  background: #fff;
  border-radius: 2px;
  animation: cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop { 0%,100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(12px); opacity: 0; } }
@media (min-width: 768px) { .hero__cue { display: block; } }

/* ---- Cartes services : numero + accent ---- */
.services__grid { counter-reset: svc; }
.service-card--hover { counter-increment: svc; }
.service-card--hover .service-card__inner::before {
  content: "0" counter(svc);
  position: absolute;
  top: var(--space-md); right: var(--space-md);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: rgba(255,255,255,.35);
  z-index: 4;
  transition: color .4s ease;
}
.service-card--hover:hover .service-card__inner::before { color: var(--color-primary); }
.service-card--hover::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 4px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
  z-index: 4;
}
.service-card--hover:hover::before,
.service-card--hover:focus-visible::before { transform: scaleX(1); }

/* ---- Timeline process : ligne qui se remplit ---- */
@media (min-width: 1024px) {
  .process__timeline::after {
    content: "";
    position: absolute;
    top: 28px; left: 12%;
    height: 2px; width: 0;
    background: var(--gradient-primary);
    z-index: 0;
    transition: width 1.4s .3s ease;
  }
  .process__timeline.is-revealed::after { width: 76%; }
}
.process__number { transition: transform .3s ease, box-shadow .3s ease; }
.process__step:hover .process__number { transform: scale(1.12) rotate(-6deg); box-shadow: var(--shadow-brand); }

/* ============================================================
   16. SECTION ZONE D'INTERVENTION
   ============================================================ */
.zones { background: var(--color-white); overflow: hidden; }
.zones__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) { .zones__grid { grid-template-columns: minmax(280px, 420px) 1fr; } }

.zones__radar { max-width: 460px; margin: 0 auto; width: 100%; }
.radar { width: 100%; height: auto; display: block; overflow: visible; }
.radar__ring { fill: none; stroke: var(--color-border); stroke-width: 1.4; }
.radar__axis { stroke: var(--color-border); stroke-width: 1; stroke-dasharray: 3 5; }
.radar__pin { fill: var(--color-primary); stroke: #fff; stroke-width: 2; filter: drop-shadow(0 2px 6px rgba(217,119,6,.5)); }
.radar__label { fill: var(--color-text-muted); font-size: 11px; text-anchor: middle; font-weight: 600; }
.radar__label--center { fill: var(--color-text-primary); font-size: 13px; font-weight: 800; }
.radar__city circle { fill: var(--color-secondary); }
.radar__city text { fill: var(--color-text-secondary); font-size: 11px; font-weight: 600; }
.radar__sweep { transform-origin: 200px 200px; animation: radarSpin 6s linear infinite; }
@keyframes radarSpin { to { transform: rotate(360deg); } }
@media (max-width: 480px) {
  .radar { overflow: hidden; }
  .radar__city text, .radar__label:not(.radar__label--center) { display: none; }
}

.zones__content h2 { margin-bottom: .75rem; }
.zones__content > p { color: var(--color-text-secondary); max-width: 54ch; margin-bottom: 1.25rem; }
.zones__depts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.zones__depts li {
  padding: .4rem .85rem;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.zones__cities {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.9;
}
.zones__cities strong { color: var(--color-text-secondary); }

/* ============================================================
   18. PROFONDEUR & RENDU CINEMATIQUE
   ============================================================ */

/* ---- Ombres portees plus riches (2 couches : lumiere douce + ombre franche) ---- */
:root {
  --shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.05);
  --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06), 0 3px 8px -2px rgba(11, 18, 32, 0.08);
  --shadow-md: 0 2px 4px rgba(11, 18, 32, 0.05), 0 12px 24px -8px rgba(11, 18, 32, 0.16);
  --shadow-lg: 0 4px 10px rgba(11, 18, 32, 0.06), 0 28px 56px -16px rgba(11, 18, 32, 0.24);
  --shadow-xl: 0 10px 24px rgba(11, 18, 32, 0.10), 0 56px 96px -28px rgba(11, 18, 32, 0.32);
  --shadow-brand: 0 6px 14px -4px rgba(217, 119, 6, 0.35), 0 20px 40px -12px rgba(217, 119, 6, 0.30);
}

/* ---- Elevation des surfaces cles ---- */
.trust-bar__inner,
.quote-calculator__inner,
.why-choose__image { box-shadow: var(--shadow-xl); }

.contact__form,
.stat-card,
.testimonial-card,
.gbp,
.devis-fieldset { box-shadow: var(--shadow-md); }

.stat-card,
.testimonial-card { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.stat-card:hover,
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.service-card--hover { box-shadow: var(--shadow-lg); }
.service-card--hover:hover { box-shadow: var(--shadow-xl); }

.gallery__item { box-shadow: var(--shadow-md); }
.gallery__item:hover { box-shadow: var(--shadow-xl); }

.svc-card:hover { box-shadow: var(--shadow-lg); }

/* ============================================================
   Filtre galerie 100% CSS — fonctionne SANS JavaScript
   ============================================================ */
.gf-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gallery-filter .gallery__tab { cursor: pointer; user-select: none; }
.gf-radio:focus-visible ~ .gallery__tabs { outline: 2px solid var(--color-primary); outline-offset: 6px; border-radius: 4px; }

/* onglet actif (le radio coche) */
.gallery-filter #gf-all:checked            ~ .gallery__tabs label[for="gf-all"],
.gallery-filter #gf-murs:checked           ~ .gallery__tabs label[for="gf-murs"],
.gallery-filter #gf-toiture:checked        ~ .gallery__tabs label[for="gf-toiture"],
.gallery-filter #gf-sols:checked           ~ .gallery__tabs label[for="gf-sols"],
.gallery-filter #gf-vide-sanitaire:checked ~ .gallery__tabs label[for="gf-vide-sanitaire"],
.gallery-filter #gf-industriel:checked     ~ .gallery__tabs label[for="gf-industriel"] {
  background: var(--color-primary);
  color: #fff;
}

/* filtrage : on masque les items qui ne portent pas la categorie choisie */
.gallery-filter #gf-murs:checked           ~ .gallery__grid .gallery__item:not([data-category~="murs"]),
.gallery-filter #gf-toiture:checked        ~ .gallery__grid .gallery__item:not([data-category~="toiture"]),
.gallery-filter #gf-sols:checked           ~ .gallery__grid .gallery__item:not([data-category~="sols"]),
.gallery-filter #gf-vide-sanitaire:checked ~ .gallery__grid .gallery__item:not([data-category~="vide-sanitaire"]),
.gallery-filter #gf-industriel:checked     ~ .gallery__grid .gallery__item:not([data-category~="industriel"]) {
  display: none;
}

/* petite apparition a chaque changement */
.gallery-filter .gallery__item { animation: galIn .35s cubic-bezier(.22,1,.36,1); }
@keyframes galIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gallery-filter .gallery__item { animation: none; } }

/* FAQ : fond legerement teinte + cartes qui ressortent */
.faq { background: var(--color-bg); }
.faq__item { box-shadow: var(--shadow-sm); }
.faq__item.is-open { box-shadow: var(--shadow-md); }

/* header colle : ombre plus presente */
.header.is-sticky { box-shadow: 0 10px 30px -12px rgba(11, 18, 32, 0.28); }

/* le hero recoit une legere vignette cinema */
.hero__overlay {
  background:
    radial-gradient(130% 120% at 50% 8%, transparent 42%, rgba(11,18,32,.55) 100%),
    linear-gradient(180deg, rgba(11,18,32,.5) 0%, rgba(11,18,32,.68) 55%, rgba(11,18,32,.86) 100%);
}

/* ============================================================
   19. BANDE PHOTO EN PARALLAX (avant le footer)
   ============================================================ */
.parallax-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  text-align: center;
  padding: clamp(4.5rem, 13vw, 9rem) 0;
}
.parallax-band__media {
  position: absolute;
  inset: -35% 0;
  z-index: -2;
  background-image: var(--pb-img);
  background-position: center;
  background-size: cover;
  will-change: transform;
}
.parallax-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 130% at 50% 0%, transparent 35%, rgba(11,18,32,.55) 100%),
    linear-gradient(180deg, rgba(11,18,32,.74) 0%, rgba(11,18,32,.6) 50%, rgba(11,18,32,.8) 100%);
}
.parallax-band::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--gradient-primary);
}
.parallax-band__inner { max-width: 660px; margin: 0 auto; position: relative; }
.parallax-band .section-header__badge {
  background: rgba(255,255,255,.14);
  color: #fff;
}
.parallax-band h2 {
  color: #fff;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  line-height: 1.12;
  margin-bottom: .9rem;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.parallax-band h2 .text-primary { color: var(--color-primary-light); }
.parallax-band p {
  color: rgba(255,255,255,.9);
  font-size: var(--fs-lg);
  margin-bottom: 1.75rem;
}
.parallax-band__cta { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; align-items: center; }
.parallax-band__phone {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-lg);
}
.parallax-band__phone:hover { color: var(--color-primary-light); }

/* ============================================================
   17. FORMULAIRE DE DEVIS DETAILLE
   ============================================================ */
.devis-form { display: flex; flex-direction: column; gap: 1.5rem; }
.devis-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.25rem .25rem;
  margin: 0;
  min-width: 0;
}
.devis-fieldset > legend {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 0 .55rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-base);
  color: var(--color-text-primary);
}
.devis-step {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  flex-shrink: 0;
}
.devis-hint {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: 0;
}

.form-checks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .35rem; }
.form-checks .form-check { margin-bottom: 0; }

/* champs calcules automatiquement */
.form-input.is-calc {
  background: var(--color-primary-soft);
  border-color: transparent;
  font-weight: 700;
  color: var(--color-primary-dark);
  cursor: default;
}
.form-input.is-calc::placeholder { font-weight: 400; color: var(--color-text-muted); }

@media (max-width: 600px) {
  .devis-fieldset { padding: 1rem 1rem .1rem; }
}

/* ============================================================
   17b. ASSISTANT DE DEVIS (multi-étapes)
   Sans JS : toutes les étapes s'affichent (formulaire complet).
   Avec JS : une étape à la fois + navigation + progression.
   ============================================================ */
.wizard__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.wizard__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-base); margin: 0; }

/* ---- Stepper 100% CSS (fonctionne sans JS) ---- */
.wstep { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wizard .wizard-body .wizard-step { display: none; }
.wizard #ws-1:checked ~ .wizard-body .wizard-step[data-step="1"],
.wizard #ws-2:checked ~ .wizard-body .wizard-step[data-step="2"],
.wizard #ws-3:checked ~ .wizard-body .wizard-step[data-step="3"],
.wizard #ws-4:checked ~ .wizard-body .wizard-step[data-step="4"],
.wizard #ws-5:checked ~ .wizard-body .wizard-step[data-step="5"],
.wizard #ws-6:checked ~ .wizard-body .wizard-step[data-step="6"] { display: block; animation: wizIn .3s ease; }

.wizard #ws-1:checked ~ .wizard-progress .wizard-progress__fill { width: 16.67%; }
.wizard #ws-2:checked ~ .wizard-progress .wizard-progress__fill { width: 33.33%; }
.wizard #ws-3:checked ~ .wizard-progress .wizard-progress__fill { width: 50%; }
.wizard #ws-4:checked ~ .wizard-progress .wizard-progress__fill { width: 66.67%; }
.wizard #ws-5:checked ~ .wizard-progress .wizard-progress__fill { width: 83.33%; }
.wizard #ws-6:checked ~ .wizard-progress .wizard-progress__fill { width: 100%; }

.wizard-badge b::after { content: "1 sur 6"; }
.wizard #ws-2:checked ~ .wizard__head .wizard-badge b::after { content: "2 sur 6"; }
.wizard #ws-3:checked ~ .wizard__head .wizard-badge b::after { content: "3 sur 6"; }
.wizard #ws-4:checked ~ .wizard__head .wizard-badge b::after { content: "4 sur 6"; }
.wizard #ws-5:checked ~ .wizard__head .wizard-badge b::after { content: "5 sur 6"; }
.wizard #ws-6:checked ~ .wizard__head .wizard-badge b::after { content: "6 sur 6"; }

.wizard-next { cursor: pointer; }

/* ---- Blocage : impossible de continuer si un champ requis manque ---- */
.wizard-step:has(:invalid) .wizard-next {
  pointer-events: none;
  opacity: .5;
  filter: grayscale(.35);
}
.wizard-step:has(:invalid) .wizard-nav { position: relative; }
.wizard-step:has(:invalid) .wizard-nav::after {
  content: "Renseignez les champs requis pour continuer.";
  order: 10;
  width: 100%;
  margin-top: .35rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-error);
}
.wizard-badge {
  background: var(--color-secondary);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: .35rem .8rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.wizard-progress { height: 6px; background: var(--color-border); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 1.5rem; }
.wizard-progress__fill { display: block; height: 100%; width: 16.67%; background: var(--gradient-primary); border-radius: var(--radius-pill); transition: width .35s cubic-bezier(.22,1,.36,1); }

.wizard-step { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.wizard-step > legend { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); margin-bottom: 1rem; padding: 0; }
.wizard-step .devis-hint { display: block; margin-top: .25rem; }
@keyframes wizIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

.wizard-nav { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.wizard-nav [data-wizard="prev"] { margin-right: auto; }
/* sans JS : le bouton d'envoi final est toujours visible ; avec JS il n'apparaît que dans la dernière étape */

/* cartes de choix (étape "type de travaux", "neuf/rénovation"…) */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.choice { position: relative; margin: 0; }
.choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.choice__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  height: 100%;
  padding: 1.25rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  font-weight: 600;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.choice__box i { font-size: 1.7rem; color: var(--color-primary); }
.choice input:hover + .choice__box { border-color: var(--color-primary); transform: translateY(-2px); }
.choice input:checked + .choice__box { border-color: var(--color-primary); background: var(--color-primary-soft); }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ============================================================
   20. PAGES LEGALES (prose)
   ============================================================ */
.legal { padding: clamp(2.5rem, 6vw, 4.5rem) 0; background: var(--color-white); }
.legal .container { max-width: 820px; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: .5rem; }
.legal__updated { color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: 2rem; }
.legal h2 {
  font-size: var(--fs-xl);
  margin: 2.25rem 0 .75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal p, .legal li { color: var(--color-text-secondary); line-height: 1.7; }
.legal ul { list-style: disc; padding-left: 1.4rem; margin: .5rem 0 1rem; }
.legal li { margin-bottom: .4rem; }
.legal a { font-weight: 600; }
.legal strong { color: var(--color-text-primary); }
.legal .todo { background: var(--color-primary-soft); color: var(--color-primary-dark); padding: 0 .3rem; border-radius: 4px; }

/* ---------- Respect du mouvement reduit ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .section-header__divider { transition: none !important; }
  .btn::after, .hero__badge::after, .hero__cue::before,
  .cta-banner, .radar__sweep { animation: none !important; }
  .hero__cue { display: none !important; }
  .cta-banner { background-position: 0 50%; }
  .service-card--hover::before { transition: none; }
  .process__step:hover .process__number { transform: none; }
  .parallax-band__media { transform: none !important; }
  .stat-card:hover, .testimonial-card:hover { transform: none; }
}

/* ---------- 14. Impression / data saver ---------- */
@media (prefers-reduced-data: reduce) {
  .hero__video { display: none !important; }
}