/* =========================================================================
   VOLTEK — Identité premium · Charcoal + Orange électrique + Turquoise
   Signature : « le courant » (arc hero, éclair du logo, conducteurs animés)
   ========================================================================= */

/* ----------------------------------------------------------------- Tokens */
:root {
  /* Fonds — mélange noir + charcoal (branding Voltek) */
  --bg-000: #000000;   /* noir pur */
  --bg-100: #08080A;   /* charcoal très profond — fond principal */
  --bg-200: #0F0F12;   /* surface sombre */
  --bg-300: #16161A;   /* surface surélevée */
  --bg-400: #1C1C21;   /* surface la plus haute */

  /* Orange principal (branding) */
  --orange:    #F86A00;   /* principal — rgb 248,106,0 */
  --orange-1:  #C95A00;   /* ombre */
  --orange-2:  #FF8B1F;   /* clair */
  --orange-3:  #FF8B1F;   /* clair */

  /* Turquoise principal (branding) */
  --cyan:    #00AFC8;   /* moyen — base · rgb 0,175,200 */
  --cyan-1:  #007E92;   /* foncé */
  --cyan-2:  #35D7F0;   /* clair — effet néon */
  --cyan-3:  #35D7F0;   /* néon */

  /* Neutres */
  --white:   #FFFFFF;
  --gray-1:  #D6DCE3;   /* gris clair — corps de texte */
  --gray-2:  #A3ADB7;   /* gris secondaire — mentions */
  --line:    rgba(214, 220, 227, .10);
  --line-2:  rgba(214, 220, 227, .06);

  /* Glow orange (#F86A00 → rgb 248,106,0) */
  --glow-o: 0 0 10px rgba(248,106,0,.45), 0 0 25px rgba(248,106,0,.30), 0 0 50px rgba(248,106,0,.15);
  --glow-o-soft: 0 0 18px rgba(248,106,0,.22), 0 0 44px rgba(248,106,0,.12);
  /* Glow turquoise — effet néon (#35D7F0 → rgb 53,215,240) */
  --glow-c: 0 0 10px rgba(53,215,240,.45), 0 0 25px rgba(53,215,240,.30), 0 0 50px rgba(53,215,240,.15);
  --glow-c-soft: 0 0 18px rgba(53,215,240,.22), 0 0 44px rgba(53,215,240,.12);

  /* Dégradés signature */
  --grad-energy: linear-gradient(100deg, var(--orange) 0%, var(--orange-3) 38%, var(--cyan) 100%);
  --grad-cyan:   linear-gradient(120deg, var(--cyan) 0%, var(--cyan-2) 100%);
  --grad-orange: linear-gradient(120deg, var(--orange-1) 0%, var(--orange-3) 100%);

  /* Typographie unifiée — Fraunces (TOUS les titres, serif d'affichage élégant) ·
     Inter (libellés, chiffres, corps de texte). Un seul couple pour tout le site. */
  --font-title:   "Fraunces", Georgia, "Times New Roman", serif;
  --font-display: "Inter", system-ui, sans-serif;
  --font-label:   "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;

  /* Rythme & formes */
  --container: 1240px;
  --radius:   16px;
  --radius-lg: 22px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 92px;
}

/* --------------------------------------------------------------- Reset/base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--gray-1);
  background: linear-gradient(180deg, #000000 0%, #040405 55%, #09090B 100%);
  background-attachment: fixed;
  line-height: 1.65;
  font-size: clamp(1rem, .96rem + .2vw, 1.08rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Atmosphère — sur le dégradé charcoal, de subtils halos de marque : chaud à
   gauche → froid à droite (jamais un fond plat, mais le charcoal reste dominant). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(50% 44% at 3% 22%,  rgba(248,106,0,.13), transparent 64%),
    radial-gradient(46% 42% at 99% 44%, rgba(53,215,240,.12), transparent 64%),
    radial-gradient(60% 26% at 26% 106%, rgba(248,106,0,.09), transparent 68%),
    radial-gradient(60% 26% at 80% 108%, rgba(53,215,240,.10), transparent 68%);
}
/* Grain de film subtil */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Pages de service : atmosphère de marque plus riche — halos orange/cyan plus
   présents + fines stries diagonales néon (champ d'énergie Volten). Reste subtil
   pour préserver la lisibilité (le charcoal domine, le texte passe par-dessus). */
body.svc-page::before {
  background:
    radial-gradient(48% 42% at -3% 6%,   rgba(248,106,0,.24),  transparent 60%),
    radial-gradient(46% 44% at 102% 22%, rgba(53,215,240,.22), transparent 60%),
    radial-gradient(54% 36% at 6% 78%,   rgba(53,215,240,.15), transparent 64%),
    radial-gradient(58% 38% at 98% 99%,  rgba(248,106,0,.18),  transparent 64%),
    /* deux faisceaux diagonaux de lumière (larges, doux) */
    linear-gradient(122deg, transparent 34%, rgba(53,215,240,.12) 50%, transparent 66%),
    linear-gradient(58deg,  transparent 54%, rgba(248,106,0,.085) 70%, transparent 86%),
    /* trame fine « plan » (blueprint néon) */
    repeating-linear-gradient(122deg, transparent 0 68px, rgba(165,210,240,.075) 68px 69.5px),
    repeating-linear-gradient(38deg,  transparent 0 120px, rgba(248,106,0,.05) 120px 121.5px);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }

::selection { background: rgba(53,215,240,.28); color: #fff; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: fixed;
  left: 16px; top: -80px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--bg-300);
  border: 1px solid var(--cyan);
  border-radius: var(--radius-sm);
  box-shadow: var(--glow-c-soft);
  transition: top .25s var(--ease);
}
.skip:focus { top: 16px; }

/* ---------------------------------------------------------------- Layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.section {
  position: relative;
  padding-block: clamp(66px, 8.5vw, 124px);
}
.section--pad-top-0 { padding-top: 0; }

/* En-tête de section (eyebrow + titre + intro) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan));
  box-shadow: var(--glow-c-soft);
}
.eyebrow--orange { color: var(--orange-3); }
.eyebrow--orange::before { background: linear-gradient(90deg, transparent, var(--orange-3)); box-shadow: var(--glow-o-soft); }

.h-title {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -.01em;
  line-height: 1.08;
  color: var(--white);
  font-size: clamp(2.4rem, 1.4rem + 4.1vw, 4.1rem);
}
.h-lead {
  max-width: 60ch;
  color: var(--gray-1);
  font-size: clamp(1.02rem, .98rem + .5vw, 1.22rem);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: clamp(48px, 6vw, 76px);
  max-width: 760px;
}

/* Texte dégradé (à utiliser avec parcimonie) */
.grad-text {
  background: var(--grad-energy);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-cyan  { background: var(--grad-cyan);  -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-orange{ background: var(--grad-orange);-webkit-background-clip: text; background-clip: text; color: transparent; }

/* Conducteur lumineux — séparateur signature avec impulsion voyageuse */
.conductor {
  position: relative;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  overflow: visible;
}
.conductor::after {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 120px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--orange), var(--cyan), transparent);
  filter: blur(.5px);
  box-shadow: 0 0 12px rgba(53,215,240,.5);
  animation: travel 6.5s linear infinite;
}
/* Séparateur lumineux entre sections */
.flow-sep { position: relative; z-index: 2; margin-block: clamp(-70px, -6vw, -36px); }
.flow-sep .conductor { max-width: 920px; margin-inline: auto; opacity: .85; }

/* ---------------------------------------------------------------- Boutons */
.btn {
  --b: var(--cyan);
  --g: var(--glow-c-soft);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  color: var(--white);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  border: 1px solid color-mix(in srgb, var(--b) 55%, transparent);
  box-shadow: var(--g), inset 0 0 0 1px rgba(255,255,255,.02);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
  isolation: isolate;
}
.btn svg { width: 18px; height: 18px; flex: none; }
/* balayage lumineux au survol (éclair discret) */
.btn::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--b) 30%, transparent) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .6s var(--ease);
}
.btn:hover { transform: translateY(-2px) scale(1.015); border-color: var(--b); }
.btn:hover::before { transform: translateX(130%); }

.btn--primary {
  --b: var(--orange);
  --g: var(--glow-o-soft);
  background: linear-gradient(180deg, rgba(248,106,0,.16), rgba(248,106,0,.05));
}
.btn--primary:hover { box-shadow: var(--glow-o); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { box-shadow: var(--glow-c); }
.btn--sm { padding: 11px 18px; font-size: .85rem; }
.btn--block { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------- Marque */
.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand__logo {
  height: 74px; width: auto; display: block;
  /* Verrouille le ratio 720×480 (3:2) et empêche toute compression par le flex
     ou l'arrondi subpixel au zoom → le logo ne se déforme jamais. */
  aspect-ratio: 3 / 2;
  object-fit: contain;
  flex: none;
  filter: drop-shadow(0 0 12px rgba(53,215,240,.25)) drop-shadow(0 0 20px rgba(248,106,0,.12));
  transition: filter .3s var(--ease), transform .3s var(--ease);
}
.brand:hover .brand__logo { filter: drop-shadow(0 0 16px rgba(53,215,240,.4)); transform: scale(1.03); }

/* -------------------------------------------------------------------- Nav */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  /* Barre toujours sombre — lisible devant n'importe quelle image de héros */
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-000) 92%, transparent), color-mix(in srgb, var(--bg-100) 85%, transparent));
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px -24px rgba(0,0,0,.9);
  transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), height .35s var(--ease);
}
/* Filet d'accent signature Volten (orange → cyan) sous la barre */
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--orange) 66%, transparent) 20%, color-mix(in srgb, var(--cyan) 66%, transparent) 80%, transparent);
  opacity: .5;
  transition: opacity .4s var(--ease);
}
.nav.scrolled {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-000) 97%, transparent), color-mix(in srgb, var(--bg-100) 93%, transparent));
  border-bottom-color: color-mix(in srgb, var(--cyan) 16%, var(--line));
  box-shadow: 0 16px 46px -20px rgba(0,0,0,.95);
}
.nav.scrolled::after { opacity: .9; }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  /* La barre s'étale plus large que le contenu (1240) pour éviter que le
     téléphone et les liens se chevauchent sur écrans moyens. */
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 44px);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.7vw, 28px);
}
.nav__links > a:not(.btn) {
  position: relative;
  font-size: .92rem;
  color: var(--gray-1);
  padding: 6px 2px;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
/* Chaque onglet reste sur une seule ligne (jamais « Nos services » sur 2 lignes) */
.nav__sub-trigger { white-space: nowrap; }
.nav__links > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--cyan);
  box-shadow: var(--glow-c-soft);
  transition: width .3s var(--ease);
}
.nav__links > a:not(.btn):hover { color: var(--white); }
.nav__links > a:not(.btn):hover::after { width: 100%; }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0;
  position: relative;
}
.nav__toggle span {
  position: absolute;
  left: 12px; right: 12px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__toggle span:nth-child(1) { top: 15px; }
.nav__toggle span:nth-child(2) { top: 21px; }
.nav__toggle span:nth-child(3) { top: 27px; }
.nav.open .nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------------------------- Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* Espace confortable sous la barre du haut (promo + nav) avant le texte */
  padding-top: calc(var(--promo-h) + var(--nav-h) + clamp(28px, 3.2vw, 52px));
  padding-bottom: 64px;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero__bg::after { /* vignette de focalisation */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(5,6,8,.72) 100%);
}

/* Hero photo plein cadre (image d'accueil) */
.hero__bg--photo {
  background-image: url("assets/hero-accueil.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.04);
  animation: heroZoom 22s var(--ease-out) forwards;
  will-change: transform;
}
.hero__bg--photo::after { /* voile : lisibilité du titre (gauche) + nav + fondu vers la section suivante */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(4,6,9,.86) 0%,
      rgba(4,6,9,.55) 26%,
      rgba(4,6,9,.12) 50%,
      rgba(4,6,9,0) 68%),
    linear-gradient(180deg,
      rgba(5,6,8,.5) 0%,
      rgba(5,6,8,0) 26%,
      rgba(5,6,8,0) 56%,
      rgba(5,6,8,.55) 85%,
      var(--bg-000) 100%);
}
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }

/* Utilitaire accessibilité : masqué visuellement, lu par lecteurs d'écran + SEO */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.hero__grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(214,220,227,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,220,227,.05) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(110% 80% at 50% 22%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(110% 80% at 50% 22%, #000 0%, transparent 72%);
  animation: gridDrift 40s linear infinite;
}
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  will-change: transform, opacity;
}
.glow-orb--o {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  left: -8vw; top: -6vw;
  background: radial-gradient(circle, rgba(248,106,0,.55), transparent 66%);
  animation: breathe 9s ease-in-out infinite;
}
.glow-orb--c {
  width: 52vw; height: 52vw; max-width: 700px; max-height: 700px;
  right: -12vw; bottom: -16vw;
  background: radial-gradient(circle, rgba(53,215,240,.42), transparent 66%);
  animation: breathe 11s ease-in-out infinite reverse;
}
#particles { position: absolute; inset: 0; z-index: -2; }
.hero__mouse {
  position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(240px 240px at var(--mx, 50%) var(--my, 40%), rgba(53,215,240,.10), transparent 70%);
  transition: background .12s linear;
  pointer-events: none;
}
/* Arc « courant » signature */
.hero__arc {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: .9;
}
.hero__arc path { fill: none; stroke-linecap: round; }
.arc-line {
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: trace 2.6s var(--ease-out) .3s forwards;
}
.arc-pulse {
  stroke-dasharray: 60 1540;
  stroke-dashoffset: 1600;
  animation: pulseflow 5s linear 2.9s infinite;
}

.hero__inner { position: relative; width: 100%; }
.hero__content { max-width: 900px; }
.hero__eyebrow {
  font-family: var(--font-label);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.hero__eyebrow-lead {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(.8rem, .66rem + .48vw, 1.02rem);
  font-weight: 600;
  letter-spacing: .15em;
  color: var(--white);
}
.hero__eyebrow-accent {
  color: var(--cyan-2);
  text-shadow: 0 0 22px color-mix(in srgb, var(--cyan) 42%, transparent);
}
.hero__eyebrow-zones {
  padding-left: 19px;
  font-size: clamp(.64rem, .57rem + .26vw, .78rem);
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--gray-2);
}
.hero__eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--cyan);
  box-shadow: var(--glow-c);
  animation: pulseDot 2.4s ease-in-out infinite;
}
.hero__title {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-weight: 500;
  text-transform: none;
  line-height: 1.04;
  letter-spacing: -.02em;
  font-size: clamp(2.5rem, 1.4rem + 4.3vw, 4.9rem);
  color: var(--white);
  margin-bottom: 26px;
  text-shadow: 0 2px 40px rgba(0,0,0,.5);
}
.hero__title .glow-word {
  background: var(--grad-energy);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(248,106,0,.28)) drop-shadow(0 0 40px rgba(53,215,240,.18));
}
.hero__sub {
  max-width: 62ch;
  font-size: clamp(1.05rem, 1rem + .55vw, 1.3rem);
  color: var(--gray-1);
  margin-bottom: 38px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; }

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 54px);
  margin-top: clamp(46px, 7vw, 84px);
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.trust {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--gray-1);
  font-size: .95rem;
}
.trust svg { width: 22px; height: 22px; color: var(--cyan); flex: none; filter: drop-shadow(0 0 6px rgba(53,215,240,.4)); }
.trust:nth-child(2) svg { color: var(--orange-3); filter: drop-shadow(0 0 6px rgba(248,106,0,.4)); }

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-label);
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gray-2);
}
.hero__scroll .rail {
  width: 22px; height: 34px; border: 1px solid var(--line); border-radius: 12px;
  position: relative;
}
.hero__scroll .rail::after {
  content: ""; position: absolute; left: 50%; top: 7px;
  width: 3px; height: 7px; border-radius: 3px; background: var(--cyan);
  box-shadow: var(--glow-c-soft);
  transform: translateX(-50%);
  animation: scrolldot 1.9s var(--ease) infinite;
}

/* -------------------------------------------------------------- Services */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
}
.card {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 46px);
  background: var(--tile, var(--bg-200)) center / 100% 100% no-repeat;
  border: 0;
  border-radius: 28px;
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card::before { content: none; }
.card::after { /* halo radial au survol */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(300px 200px at 50% 0%, color-mix(in srgb, var(--accent, var(--cyan)) 16%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 64px -28px rgba(0,0,0,.95), 0 0 40px -8px color-mix(in srgb, var(--accent, var(--cyan)) 55%, transparent);
}
.card:hover::before { opacity: 1; }
.card:hover::after { opacity: 1; }

.card__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent, var(--cyan)) 30%, transparent);
  background: color-mix(in srgb, var(--accent, var(--cyan)) 8%, transparent);
  margin-bottom: 26px;
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.card__icon svg { width: 28px; height: 28px; color: var(--accent, var(--cyan)); }
.card:hover .card__icon {
  box-shadow: 0 0 20px -2px color-mix(in srgb, var(--accent, var(--cyan)) 55%, transparent);
  transform: translateY(-2px);
}
.card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.28rem;
  color: var(--white);
  margin-bottom: 12px;
  letter-spacing: .01em;
}
.card__text { color: var(--gray-2); font-size: .98rem; }
.card__link {
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent, var(--cyan));
}
.card__link svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.card:hover .card__link svg { transform: translateX(4px); }

.card.accent-o { --accent: var(--orange-3); }
.card.accent-c { --accent: var(--cyan); }

/* --------------------------------------------------------------- Pourquoi */
.why__wrap {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.why__statement { position: relative; }
.why__quote {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-weight: 500;
  text-transform: none;
  font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.7rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--white);
  margin: 30px 0 22px;
}
.why__quote em { font-style: italic; }
.why__list { display: grid; gap: 6px; }
.why__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-2);
  transition: transform .35s var(--ease);
}
.why__item:hover { transform: translateX(6px); }
.why__ic {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-200);
  color: var(--cyan);
  transition: color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.why__ic svg { width: 22px; height: 22px; }
.why__item:nth-child(even) .why__ic { color: var(--orange-3); }
.why__item:hover .why__ic {
  border-color: color-mix(in srgb, currentColor 50%, transparent);
  box-shadow: 0 0 16px -2px currentColor;
}
.why__h { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--white); margin-bottom: 4px; }
.why__p { color: var(--gray-2); font-size: .95rem; }

/* ---------------------------------------------------------------- Stats */
.stats {
  position: relative;
  padding-block: clamp(64px, 8vw, 108px);
  background:
    radial-gradient(90% 140% at 50% 0%, rgba(53,215,240,.06), transparent 60%),
    var(--bg-100);
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.stats::before { /* trame circuit subtile */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(214,220,227,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,220,227,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(80% 120% at 50% 50%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 120% at 50% 50%, #000, transparent 78%);
  pointer-events: none;
}
.stats__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.stat { text-align: center; position: relative; }
.stat + .stat::before {
  content: "";
  position: absolute; left: calc(-1 * clamp(10px, 1.5vw, 20px)); top: 12%;
  width: 1px; height: 76%;
  background: linear-gradient(180deg, transparent, var(--line), transparent);
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem);
  line-height: 1;
  color: var(--white);
  letter-spacing: -.01em;
}
.stat:nth-child(odd) .stat__num  { color: var(--orange-3); text-shadow: 0 0 30px rgba(248,106,0,.28); }
.stat:nth-child(even) .stat__num { color: var(--cyan);      text-shadow: 0 0 30px rgba(53,215,240,.28); }
.stat__num .suffix { font-size: .5em; vertical-align: baseline; margin-left: 2px; }
.stat__label {
  margin-top: 14px;
  font-family: var(--font-label);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gray-2);
}

/* -------------------------------------------------------------- Réalisations */
.work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px;
  gap: clamp(14px, 1.5vw, 22px);
}
.work__item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  isolation: isolate;
}
.work__item.is-wide { grid-column: span 2; }
.work__item.is-tall { grid-row: span 2; }

.work__media {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform .8s var(--ease), filter .6s var(--ease);
  filter: saturate(1.05) contrast(1.05);
}
/* Scrim cinématographique : voile de lisibilité + touches orange/cyan
   (les scènes SVG portent déjà leur propre éclairage dramatique) */
.work__item::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 100% at 12% 0%, rgba(248,106,0,.12), transparent 52%),
    radial-gradient(120% 120% at 100% 100%, rgba(53,215,240,.12), transparent 52%),
    linear-gradient(180deg, transparent 40%, rgba(5,6,8,.55) 72%, rgba(5,6,8,.94) 100%);
  mix-blend-mode: normal;
  transition: opacity .5s var(--ease);
}
.work__item:hover .work__media { transform: scale(1.09); }
.work__cap {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(18px, 2vw, 26px);
  display: flex; flex-direction: column; gap: 8px;
  transform: translateY(6px);
  transition: transform .5s var(--ease);
}
.work__item:hover .work__cap { transform: translateY(0); }
.work__tag {
  align-self: flex-start;
  font-family: var(--font-label);
  font-size: .56rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bg-000);
  background: var(--cyan);
  padding: 5px 10px; border-radius: 6px;
  box-shadow: var(--glow-c-soft);
}
.work__item:nth-child(odd) .work__tag { background: var(--orange-3); color: var(--bg-000); box-shadow: var(--glow-o-soft); }
.work__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 1rem + .5vw, 1.4rem); color: var(--white); }
.work__loc { display: inline-flex; align-items: center; gap: 7px; color: var(--gray-1); font-size: .84rem; }
.work__loc svg { width: 14px; height: 14px; color: var(--cyan); }

/* ------------------------------------------------------------------ About */
.about__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.about__body p { color: var(--gray-1); margin-bottom: 20px; max-width: 56ch; }
.about__body p:first-of-type { font-size: 1.12rem; color: var(--white); }
.rule {
  position: relative;
  margin-top: 8px;
  padding: 32px clamp(26px, 3vw, 40px);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-200), var(--bg-100));
  border: 1px solid var(--line);
  overflow: hidden;
}
.rule::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--grad-energy);
  box-shadow: 0 0 18px rgba(53,215,240,.4);
}
.rule__label {
  font-family: var(--font-label);
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gray-2); margin-bottom: 16px;
}
.rule__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
  line-height: 1.35;
  color: var(--white);
}
.rule__text b { font-weight: 700; }
.rule__text .o { color: var(--orange-3); }
.rule__text .c { color: var(--cyan); }
.about__badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--bg-200);
  font-size: .82rem; color: var(--gray-1);
}
.badge svg { width: 16px; height: 16px; color: var(--cyan); }

/* ---------------------------------------------------------------- Quote */
.quote { position: relative; }
.quote__wrap {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.quote__aside .h-title { margin-bottom: 24px; }
.quote__aside p { color: var(--gray-1); max-width: 44ch; margin-bottom: 30px; }
.contact { display: grid; gap: 14px; margin-bottom: 30px; }
.contact__row { display: flex; align-items: center; gap: 14px; color: var(--gray-1); }
.contact__row svg { width: 20px; height: 20px; color: var(--cyan); flex: none; filter: drop-shadow(0 0 6px rgba(53,215,240,.35)); }
.contact__row a:hover { color: var(--white); }
.zones { display: flex; flex-wrap: wrap; gap: 8px; }
.zones span {
  font-size: .8rem; color: var(--gray-2);
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 100px;
}

.form {
  padding: clamp(26px, 3vw, 40px);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(53,215,240,.06), transparent 55%),
    radial-gradient(120% 80% at 0% 100%, rgba(248,106,0,.05), transparent 55%),
    var(--bg-200);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -50px rgba(0,0,0,.9);
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-family: var(--font-label);
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gray-2); margin-bottom: 9px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-000);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--white);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: #5c6772; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2300AFC8' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(53,215,240,.12), var(--glow-c-soft);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__note { margin-top: 8px; font-size: .8rem; color: var(--gray-2); }
.form__status {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent);
  background: rgba(53,215,240,.06);
  color: var(--white);
  font-size: .92rem;
  display: none;
  align-items: center;
  gap: 10px;
}
.form__status.show { display: flex; }
.form__status svg { width: 20px; height: 20px; color: var(--cyan); flex: none; }
.form__status.is-error { border-color: color-mix(in srgb, var(--orange) 55%, transparent); background: color-mix(in srgb, var(--orange) 8%, transparent); }
.form__status.is-error svg { color: var(--orange-3); }

/* --------------------------------------------------------------- Footer */
.footer {
  position: relative;
  padding-block: clamp(56px, 7vw, 88px) 34px;
  background: var(--bg-000);
  border-top: 1px solid var(--line);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line-2);
}
.footer__tag { color: var(--gray-2); margin-top: 18px; max-width: 34ch; font-size: .95rem; }
.footer__col h4 {
  font-family: var(--font-label);
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gray-1); margin-bottom: 18px;
}
.footer__col ul { display: grid; gap: 11px; }
.footer__col a, .footer__col li { color: var(--gray-2); font-size: .92rem; transition: color .25s var(--ease); }
.footer__col a:hover { color: var(--cyan); }
/* Réseaux sociaux — pastilles réutilisables (footer + héros).
   Gris au repos, chaque plateforme s'illumine à sa couleur au survol. */
.soc-label { display: block; font-family: var(--font-display); font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gray-2); }
.soc-row { display: inline-flex; align-items: center; gap: 10px; }
.soc {
  width: 42px; height: 42px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--line); border-radius: 12px; color: var(--gray-1);
  background: color-mix(in srgb, var(--bg-100) 55%, transparent);
  transition: color .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease), transform .28s var(--ease);
}
.soc svg { width: 20px; height: 20px; }
.soc:hover { transform: translateY(-2px); }
.soc--fb:hover { color: #1877F2; border-color: color-mix(in srgb, #1877F2 62%, transparent); box-shadow: 0 8px 22px -10px #1877F2; background: color-mix(in srgb, #1877F2 12%, transparent); }
.soc--ig:hover { color: #E4405F; border-color: color-mix(in srgb, #E4405F 62%, transparent); box-shadow: 0 8px 22px -10px #E4405F; background: color-mix(in srgb, #E4405F 12%, transparent); }
.soc--gg:hover { border-color: color-mix(in srgb, #4285F4 55%, transparent); box-shadow: 0 8px 22px -10px #4285F4; background: color-mix(in srgb, #4285F4 10%, transparent); }
.soc:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.footer__social { margin-top: 24px; }
.footer__social .soc-label { margin-bottom: 12px; }

.hero__social { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin: 2px 0 clamp(22px, 2.8vw, 32px); }
.hero__social .soc { width: 42px; height: 42px; }
.hero__social .soc-label { color: var(--gray-1); }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 26px;
  color: var(--gray-2); font-size: .82rem;
}
.footer__bottom a:hover { color: var(--gray-1); }

/* Bouton retour haut */
.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-200) 82%, transparent);
  backdrop-filter: blur(10px);
  color: var(--cyan);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { box-shadow: var(--glow-c-soft); }
.to-top svg { width: 20px; height: 20px; }

/* ----------------------------------------------------- Révélation au scroll
   Amélioration progressive : sans JS, tout reste visible. Le masquage n'est
   activé que lorsque le script ajoute la classe .js sur <html>. */
.reveal {
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  will-change: opacity, transform;
}
html.js .reveal.visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- Keyframes */
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes pulseflow { to { stroke-dashoffset: -1600; } }
@keyframes travel {
  0% { transform: translateX(-140px); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(calc(100vw)); opacity: 0; }
}
@keyframes breathe {
  0%, 100% { transform: translate3d(0,0,0) scale(1); opacity: .5; }
  50% { transform: translate3d(0,-18px,0) scale(1.08); opacity: .68; }
}
@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 62px 62px, 62px 62px; }
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: .6; }
}
@keyframes scrolldot {
  0% { transform: translate(-50%, 0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-50%, 14px); opacity: 0; }
}

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1080px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .why__wrap { grid-template-columns: 1fr; gap: 48px; }
  .quote__wrap { grid-template-columns: 1fr; }
  .about__wrap { grid-template-columns: 1fr; gap: 40px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 860px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed;
    /* .nav porte un backdrop-filter → il sert de bloc conteneur pour ce panneau
       fixe. « top » est donc relatif à .nav : var(--nav-h) = juste sous la barre.
       On fixe une HAUTEUR (vh) plutôt que bottom:0 (qui serait relatif à .nav). */
    top: var(--nav-h);
    left: 0; right: 0;
    height: calc(100vh - var(--promo-h) - var(--nav-h));
    height: calc(100dvh - var(--promo-h) - var(--nav-h));
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px clamp(20px, 5vw, 48px) max(30px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg-100) 99.5%, transparent);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--line);
    /* Panneau défilable : la liste complète reste atteignable sur mobile */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateY(-14px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav.open .nav__links { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .nav__links > a:not(.btn) { padding: 14px 4px; border-bottom: 1px solid var(--line-2); font-size: 1rem; }
  .nav__links > a:not(.btn)::after { display: none; }
  .nav__links .btn { margin-top: 12px; }

  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
  .stat:nth-child(3)::before, .stat + .stat::before { display: none; }

  .work__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; }
  .work__item.is-wide { grid-column: span 2; }
  .work__item.is-tall { grid-row: span 1; }
}

@media (max-width: 560px) {
  .services__grid { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr; }
  .work__grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .work__item.is-wide { grid-column: span 1; }
  .field-row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; justify-content: center; }
}

/* ----------------------------------------------------- Préférence de mouvement */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  html.js .reveal, .reveal { opacity: 1 !important; transform: none !important; }
  .arc-line { stroke-dashoffset: 0; }
  .arc-pulse, .conductor::after, .glow-orb, .hero__grid, .hero__scroll .rail::after, .hero__eyebrow .dot { animation: none !important; }
  #particles { display: none; }
}

/* =========================================================================
   STRUCTURE — barre promo · en-tête enrichi · dropdown · chat · CTA (Phase 1)
   ========================================================================= */
:root { --promo-h: 44px; }

.promo {
  position: fixed; inset: 0 0 auto 0; height: var(--promo-h); z-index: 101;
  display: flex; align-items: center;
  background: linear-gradient(90deg, rgba(248,106,0,.15), rgba(53,215,240,.13)), var(--bg-100);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.promo__inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(44px, 5vw, 48px); display: flex; align-items: center; justify-content: center; gap: 18px; }
.promo__text { font-size: clamp(.72rem, .66rem + .3vw, .9rem); color: var(--gray-1); text-align: center; }
.promo__text strong { color: var(--orange-3); font-weight: 600; }
.promo__spark { color: var(--cyan); }
.promo__cta { flex: none; font-size: .78rem; font-weight: 600; letter-spacing: .02em; padding: 6px 15px; border-radius: 100px; border: 1px solid color-mix(in srgb, var(--cyan) 55%, transparent); color: var(--white); background: rgba(53,215,240,.08); transition: box-shadow .3s var(--ease), background .3s var(--ease); }
.promo__cta:hover { box-shadow: var(--glow-c-soft); background: rgba(53,215,240,.16); }
.promo__close { position: absolute; right: clamp(8px, 3vw, 22px); width: 28px; height: 28px; display: grid; place-items: center; font-size: 1.35rem; line-height: 1; color: var(--gray-2); border-radius: 8px; transition: color .2s, background .2s; }
.promo__close:hover { color: var(--white); background: rgba(255,255,255,.06); }
/* Réseaux sociaux dans la barre du haut (miroir du bouton fermer) */
.promo__social { position: absolute; left: clamp(10px, 3vw, 22px); display: inline-flex; align-items: center; gap: 3px; }
.promo__social a { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--gray-2); transition: color .25s var(--ease), background .25s var(--ease); }
.promo__social a svg { width: 15px; height: 15px; }
.promo__social a:hover { background: rgba(255,255,255,.09); }
.promo__social .soc--fb:hover { color: #1877F2; }
.promo__social .soc--ig:hover { color: #E4405F; }
@media (max-width: 1000px) { .promo__social { display: none; } }
html.promo-off { --promo-h: 0px; }
html.promo-off .promo { display: none; }

.nav { top: var(--promo-h); }
.nav__left { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 28px); }
.nav__phone { display: inline-flex; align-items: center; gap: 10px; color: var(--gray-1); font-weight: 600; font-size: .95rem; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); transition: border-color .3s var(--ease), box-shadow .3s var(--ease), color .3s; }
.nav__phone svg { width: 18px; height: 18px; color: var(--cyan); flex: none; filter: drop-shadow(0 0 5px rgba(53,215,240,.4)); }
.nav__phone:hover { color: var(--white); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); box-shadow: var(--glow-c-soft); }
/* Étiquette + numéro sur UNE seule ligne (le numéro ne se coupe jamais) */
.nav__phone-txt { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; line-height: 1; white-space: nowrap; }
.nav__phone-label { font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-2); }

.nav__has-sub { position: relative; }
.nav__sub { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 250px; padding: 10px; display: grid; gap: 2px; background: color-mix(in srgb, var(--bg-200) 97%, transparent); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; }
.nav__has-sub.is-open .nav__sub { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav__sub a { padding: 10px 14px; border-radius: 9px; font-size: .9rem; color: var(--gray-1); }
.nav__sub a::after { display: none !important; }
.nav__sub a:hover { background: color-mix(in srgb, var(--cyan) 12%, transparent); color: var(--white); }
.nav__sub-trigger::after { content: none !important; }

.btn--nav { padding: 11px 17px; font-size: .86rem; white-space: nowrap; }
.nav__soum-mobile { display: none; }

/* Sous ~1280px, la barre n'a plus la place pour « Assistance + numéro » :
   on garde seulement l'icône (le numéro reste au clic + dans le pied de page). */
@media (max-width: 1280px) { .nav__phone-txt { display: none; } .nav__phone { padding: 9px; } }
@media (max-width: 860px) {
  .nav__soum-mobile { display: inline-flex; margin-left: auto; margin-right: 10px; }
  .nav__has-sub .nav__sub { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; min-width: 0; box-shadow: none; border: 0; background: transparent; padding: 0 0 4px 14px; backdrop-filter: none; }
}

/* Bulle + panneau de clavardage */
.chat-bubble { position: fixed; right: 22px; bottom: 22px; z-index: 95; display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px 13px 16px; border-radius: 100px; background: linear-gradient(180deg, rgba(248,106,0,.18), rgba(248,106,0,.05)), var(--bg-200); border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); color: var(--white); font-weight: 600; font-size: .92rem; box-shadow: var(--glow-o-soft), 0 20px 40px -22px rgba(0,0,0,.9); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.chat-bubble svg { width: 20px; height: 20px; color: var(--orange-3); }
.chat-bubble:hover { transform: translateY(-2px); box-shadow: var(--glow-o), 0 24px 48px -20px rgba(0,0,0,.9); }
.chat-bubble__dot { position: absolute; top: 9px; right: 15px; width: 9px; height: 9px; border-radius: 50%; background: #35d68a; box-shadow: 0 0 8px #35d68a; }
.chat-panel { position: fixed; right: 22px; bottom: 84px; z-index: 96; width: min(340px, calc(100vw - 44px)); background: var(--bg-200); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.95); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
.chat-panel.open { opacity: 1; visibility: visible; transform: none; }
.chat-panel__head { padding: 18px 20px; background: linear-gradient(180deg, rgba(53,215,240,.1), transparent); border-bottom: 1px solid var(--line); }
.chat-panel__head h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--white); }
.chat-panel__head p { font-size: .82rem; color: var(--gray-2); margin-top: 3px; }
.chat-panel__body { padding: 18px 20px; display: grid; gap: 12px; }
.chat-panel__body input, .chat-panel__body textarea { width: 100%; padding: 11px 13px; background: var(--bg-000); border: 1px solid var(--line); border-radius: 10px; color: var(--white); font-size: .9rem; }
.chat-panel__body textarea { resize: vertical; min-height: 70px; }
@media (max-width: 560px) { .chat-bubble span { display: none; } .chat-bubble { padding: 14px; } }

/* CTA final */
.cta-final__box { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 88px) clamp(26px, 5vw, 72px); border-radius: var(--radius-lg); background: radial-gradient(90% 150% at 12% 0%, rgba(248,106,0,.14), transparent 60%), radial-gradient(90% 150% at 100% 100%, rgba(53,215,240,.14), transparent 60%), var(--bg-100); border: 1px solid var(--line); text-align: center; }
.cta-final__box h2 { font-family: var(--font-title); font-weight: 500; font-size: clamp(1.9rem, 1.2rem + 3vw, 3rem); color: var(--white); letter-spacing: -.01em; margin-bottom: 14px; }
.cta-final__box p { color: var(--gray-1); max-width: 52ch; margin: 0 auto 32px; }
.cta-final__btns { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* Certifications */
.certs { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.cert { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-200); }
.cert strong { font-family: var(--font-display); font-weight: 600; color: var(--white); letter-spacing: .04em; }
.cert span { font-size: .74rem; color: var(--gray-2); }

/* Témoignages */
.tmoins__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.tmoin { padding: clamp(24px, 2.6vw, 34px); background: var(--bg-200); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 14px; }
.tmoin__stars { color: var(--orange-3); letter-spacing: 2px; font-size: .95rem; }
.tmoin__text { color: var(--gray-1); font-size: 1rem; line-height: 1.6; flex: 1; }
.tmoin__who { display: flex; align-items: center; gap: 12px; }
.tmoin__av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; color: var(--bg-000); background: var(--grad-energy); flex: none; }
.tmoin__name { font-weight: 600; color: var(--white); font-size: .92rem; }
.tmoin__meta { font-size: .8rem; color: var(--gray-2); }
@media (max-width: 900px) { .tmoins__grid { grid-template-columns: 1fr; } }

/* Badges de confiance du hero (liste) */
.hero__trust { list-style: none; display: flex; flex-wrap: wrap; gap: clamp(14px, 3vw, 34px); margin-top: clamp(28px, 4vw, 44px); padding-top: 26px; border-top: 1px solid var(--line); }
.hero__trust li { display: inline-flex; align-items: center; gap: 10px; color: var(--gray-1); font-size: .9rem; font-weight: 500; }
.hero__trust li svg { width: 19px; height: 19px; flex: none; color: var(--cyan); filter: drop-shadow(0 0 5px rgba(53,215,240,.35)); }
.hero__trust li:nth-child(odd) svg { color: var(--orange-3); filter: drop-shadow(0 0 5px rgba(248,106,0,.35)); }
@media (max-width: 560px){ .hero__trust { gap: 12px 22px; } .hero__trust li { font-size: .84rem; } }

/* Footer — contact + légal */
.footer__contact { list-style: none; display: grid; gap: 8px; margin: 20px 0 0; padding: 0; }
.footer__contact a, .footer__contact li { color: var(--gray-2); font-size: .92rem; }
.footer__contact a:hover { color: var(--cyan); }
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.footer__legal a { color: var(--gray-2); }
.footer__legal a:hover { color: var(--gray-1); }

/* Cartes services — icône/lien plus compacts + hauteur adaptative hors 3 colonnes */
.card__icon { margin-bottom: 20px; }
.card__link { margin-top: 16px; }
@media (max-width: 1080px) { .services__grid .card { aspect-ratio: auto; min-height: 304px; } }

/* Réalisations — filtres, grille cliquable, modale de fiche */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px, 3vw, 44px); }
.filter { padding: 9px 18px; border-radius: 100px; border: 1px solid var(--line); background: var(--bg-200); color: var(--gray-1); font-size: .88rem; font-weight: 500; transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); }
.filter:hover { border-color: color-mix(in srgb, var(--cyan) 40%, transparent); color: var(--white); }
.filter.is-active { background: var(--grad-cyan); color: var(--bg-000); border-color: transparent; box-shadow: var(--glow-c-soft); font-weight: 600; }

.work__grid { grid-auto-rows: auto; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px); }
.work__item { display: block; width: 100%; text-align: left; padding: 0; font: inherit; color: inherit; aspect-ratio: 4 / 3.3; cursor: pointer; }
.work__item[hidden] { display: none; }
.work__see { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.work__item:nth-child(odd) .work__see { color: var(--orange-3); }
.work__item:hover .work__see, .work__item:focus-visible .work__see { opacity: 1; transform: none; }
.work__see svg { width: 15px; height: 15px; }

.proj-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.proj-modal.open { opacity: 1; visibility: visible; }
.proj-modal__overlay { position: absolute; inset: 0; background: rgba(2,4,7,.82); backdrop-filter: blur(6px); }
.proj-modal__box { position: relative; width: min(760px, 100%); max-height: 90vh; overflow: auto; background: var(--bg-200); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 50px 100px -40px rgba(0,0,0,.95); transform: translateY(16px) scale(.98); transition: transform .32s var(--ease); }
.proj-modal.open .proj-modal__box { transform: none; }
.proj-modal__media { height: clamp(180px, 34vw, 300px); background-size: cover; background-position: center; position: relative; }
.proj-modal__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(16,19,24,.96)); }
.proj-modal__close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.5rem; line-height: 1; border-radius: 10px; background: rgba(0,0,0,.5); color: var(--white); backdrop-filter: blur(6px); }
.proj-modal__close:hover { background: rgba(0,0,0,.75); }
.proj-modal__body { padding: clamp(24px, 3vw, 40px); margin-top: -58px; position: relative; }
.proj-modal__body h3 { font-family: var(--font-title); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); color: var(--white); margin: 10px 0 6px; letter-spacing: -.01em; }
.proj-modal__meta { color: var(--gray-2); font-size: .92rem; margin-bottom: 24px; }
.proj-fiche { display: grid; gap: 16px; margin-bottom: 28px; }
.proj-fiche > div { border-left: 2px solid; border-image: var(--grad-energy) 1; padding-left: 16px; }
.proj-fiche dt { font-family: var(--font-label); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-2); margin-bottom: 5px; }
.proj-fiche dd { color: var(--gray-1); margin: 0; font-size: .96rem; line-height: 1.5; }

@media (max-width: 900px) { .work__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .work__grid { grid-template-columns: 1fr; } .work__item { aspect-ratio: 4 / 3; } }

/* Nos services — grille compacte sur ~2 rangées (plus de slider), icônes réduites */
.services__carousel { position: relative; }
.services__track { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding: 2px; }
.services__track .card { flex: 1 1 178px; max-width: 236px; aspect-ratio: 1 / 1; min-height: 0; padding: 18px; }
.services__track .card__icon { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px; }
.services__track .card__icon svg { width: 19px; height: 19px; }
.services__track .card__title { font-size: .98rem; margin-bottom: 6px; line-height: 1.2; }
.services__track .card__text { font-size: .8rem; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.services__track .card__link { display: none; }
html.js .services__track .reveal, .services__track .reveal { opacity: 1 !important; transform: none !important; }
.services__arrow { display: none; }   /* plus de flèches : grille statique */
@media (max-width: 620px) { .services__track .card { flex: 1 1 42%; max-width: none; padding: 16px; } }

/* ---------------------------------------------- Carte rénovation : pastille photos */
.card--reno { cursor: pointer; }
.card__photos { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: .64rem; font-weight: 700; letter-spacing: .02em; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 32%, transparent); padding: 4px 9px 4px 7px; border-radius: 999px; transition: background .25s var(--ease), box-shadow .25s var(--ease); }
.card__photos svg { width: 13px; height: 13px; }
.card--reno:hover .card__photos, .card--reno:focus-visible .card__photos { background: color-mix(in srgb, var(--cyan) 22%, transparent); box-shadow: var(--glow-c-soft); }

/* ---------------------------------------------- Galerie rénovation (survol) */
/* La galerie déborde sous le carrousel : on élève #services au-dessus du bloc
   « Pourquoi » (qui a z-index:2) sinon ce dernier repeint par-dessus le panneau. */
#services { z-index: 3; }
.reno { position: absolute; left: 0; right: 0; top: -10px; z-index: 40; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .35s; }
.reno.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.reno__inner { max-width: 940px; margin: 0 auto; background: linear-gradient(180deg, var(--bg-300), var(--bg-100)); border: 1px solid color-mix(in srgb, var(--cyan) 16%, var(--line)); border-radius: var(--radius-lg); padding: 20px; box-shadow: 0 44px 110px -30px rgba(0,0,0,.95), var(--glow-c-soft); }
.reno__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.reno__eyebrow { display: block; font-family: var(--font-display); font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: var(--cyan); margin-bottom: 5px; }
.reno__title { font-family: var(--font-title); font-weight: 500; font-size: 1.4rem; line-height: 1.1; color: var(--white); }
.reno__count { flex: 0 0 auto; font-family: var(--font-display); font-size: .74rem; font-weight: 600; color: var(--gray-2); border: 1px solid var(--line); padding: 5px 12px; border-radius: 999px; }
.reno__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.reno__item { position: relative; aspect-ratio: 3 / 2; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; background: var(--bg-300); opacity: 0; transform: translateY(16px) scale(.95); transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); transition-delay: calc(var(--i) * 55ms); }
.reno.is-open .reno__item, .reno.is-open .reno__cta { opacity: 1; transform: none; }
.reno__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s var(--ease); }
.reno__item:hover, .reno__item:focus-visible { border-color: color-mix(in srgb, var(--cyan) 55%, transparent); box-shadow: var(--glow-c-soft); outline: none; }
.reno__item:hover img, .reno__item:focus-visible img { transform: scale(1.07); }
.reno__tag { position: absolute; left: 8px; bottom: 8px; font-family: var(--font-display); font-size: .66rem; font-weight: 600; letter-spacing: .01em; color: #fff; background: rgba(6,8,11,.55); backdrop-filter: blur(4px); padding: 3px 9px; border-radius: 6px; pointer-events: none; }
.reno__cta { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; text-decoration: none; aspect-ratio: 3 / 2; padding: 14px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--orange) 16%, transparent), color-mix(in srgb, var(--orange) 4%, transparent)); opacity: 0; transform: translateY(16px) scale(.95); transition: opacity .5s var(--ease), transform .5s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); transition-delay: calc(var(--i) * 55ms); }
.reno__cta span { font-family: var(--font-display); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--orange-3); }
.reno__cta strong { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-title); font-weight: 500; font-size: 1rem; color: var(--white); }
.reno__cta strong svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.reno__cta:hover { border-color: color-mix(in srgb, var(--orange) 70%, transparent); box-shadow: var(--glow-o-soft); }
.reno__cta:hover strong svg { transform: translateX(3px); }
@media (max-width: 560px) {
  .reno__inner { padding: 15px; }
  .reno__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .reno__title { font-size: 1.15rem; }
  .reno__bar { margin-bottom: 12px; }
}

/* ---------------------------------------------- Visionneuse plein écran */
.lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; gap: 8px; padding: clamp(12px, 4vw, 48px); background: rgba(4, 5, 7, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; max-width: min(1120px, 90vw); }
.lightbox__img { max-width: 100%; max-height: 82vh; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 50px 130px -30px rgba(0,0,0,.95); transform: scale(.96); opacity: 0; transition: transform .4s var(--ease), opacity .4s var(--ease); }
.lightbox.is-open .lightbox__img { transform: scale(1); opacity: 1; }
.lightbox__cap { margin-top: 16px; font-family: var(--font-display); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-1); }
.lightbox__btn { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--bg-200) 85%, transparent); border: 1px solid var(--line); color: var(--white); cursor: pointer; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.lightbox__btn:hover { border-color: color-mix(in srgb, var(--cyan) 55%, transparent); box-shadow: var(--glow-c-soft); }
.lightbox__btn svg { width: 24px; height: 24px; }
.lightbox__close { position: absolute; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); width: 46px; height: 46px; z-index: 2; }
.lightbox__prev:hover { transform: translateX(-3px); }
.lightbox__next:hover { transform: translateX(3px); }
@media (max-width: 640px) {
  .lightbox__btn { width: 42px; height: 42px; }
  .lightbox__prev, .lightbox__next { position: absolute; bottom: 18px; z-index: 2; }
  .lightbox__prev { left: 24px; } .lightbox__next { right: 24px; }
  .lightbox__cap { margin-bottom: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  .reno, .reno.is-open, .reno__item, .reno.is-open .reno__item, .reno__cta, .reno.is-open .reno__cta,
  .lightbox__img, .lightbox.is-open .lightbox__img { transition: opacity .2s linear; transform: none; }
  .reno__item img { transition: none; }
}

/* =========================================================================
   COURANT ALTERNATIF — blocs pleins « enveloppe vinyle » (couleur + texture).
   Aplats de marque texturés (grain fin + reflet de panneau, comme le wrap du
   camion) avec une ENCRE SOMBRE TEINTÉE — chaude sur l'orange, pétrole sur le
   turquoise — jamais du noir plat. Contraste vérifié ≥ 5:1.
   ========================================================================= */
:root {
  /* grain fin réutilisable (specks sombres ~14 % d'alpha) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --fill-o:
    var(--grain),
    radial-gradient(132% 92% at 16% -14%, rgba(255,255,255,.18), rgba(255,255,255,0) 54%),
    linear-gradient(150deg, #FF8B1F 0%, #F86A00 54%, #E7620A 100%);
  --fill-c:
    var(--grain),
    radial-gradient(132% 92% at 16% -14%, rgba(255,255,255,.16), rgba(255,255,255,0) 54%),
    linear-gradient(150deg, #35D7F0 0%, #00AFC8 54%, #009DB8 100%);
}
/* encre teintée selon le bloc (sombre mais jamais noir plat) */
.card.accent-o, #financement .cta-final__box     { --ink: #1C1204; }  /* espresso chaud (orange) */
.card.accent-c, .stats, #contact .cta-final__box { --ink: #05181C; }  /* pétrole profond (turquoise) */

/* ---- Cartes de services : aplats texturés alternés (orange / turquoise) ---- */
.card.accent-o { background: var(--fill-o); }
.card.accent-c { background: var(--fill-c); }
.card.accent-o, .card.accent-c { border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.card.accent-o .card__title, .card.accent-c .card__title { color: var(--ink); }
.card.accent-o .card__text,  .card.accent-c .card__text  { color: color-mix(in srgb, var(--ink) 82%, transparent); }
.card.accent-o .card__icon,  .card.accent-c .card__icon  { background: color-mix(in srgb, var(--ink) 12%, transparent); border-color: color-mix(in srgb, var(--ink) 26%, transparent); }
.card.accent-o .card__icon svg, .card.accent-c .card__icon svg { color: var(--ink); }
.card.accent-o .card__link,  .card.accent-c .card__link  { color: var(--ink); }
.card.accent-o::after, .card.accent-c::after { background: radial-gradient(320px 220px at 50% 0%, rgba(255,255,255,.22), transparent 70%); }
.card.accent-o:hover, .card.accent-c:hover { box-shadow: 0 30px 60px -26px rgba(0,0,0,.78); }
.card.accent-o:hover .card__icon, .card.accent-c:hover .card__icon { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ink) 8%, transparent); }
/* pastille « 7 photos » (carte rénovation, orange) : encre teintée */
.card--reno .card__photos { color: var(--ink); background: color-mix(in srgb, var(--ink) 14%, transparent); border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.card--reno:hover .card__photos, .card--reno:focus-visible .card__photos { background: color-mix(in srgb, var(--ink) 22%, transparent); box-shadow: none; }

/* ---- Stats : bande turquoise texturée ---- */
.stats { background: var(--fill-c); border-block: 0; }
.stats::before { background-image:
  linear-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
  linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px); }
.stats .stat__num,
.stats .stat:nth-child(odd) .stat__num,
.stats .stat:nth-child(even) .stat__num { color: var(--ink); text-shadow: none; }
.stats .stat__label { color: color-mix(in srgb, var(--ink) 74%, transparent); }
.stats .stat + .stat::before { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ink) 30%, transparent), transparent); }

/* ---- Encarts d'appel à l'action : Financement (orange) · Contact (turquoise) ---- */
#financement .cta-final__box { background: var(--fill-o); border-color: color-mix(in srgb, var(--ink) 22%, transparent); box-shadow: 0 40px 90px -50px rgba(0,0,0,.9); }
#contact .cta-final__box     { background: var(--fill-c); border-color: color-mix(in srgb, var(--ink) 22%, transparent); box-shadow: 0 40px 90px -50px rgba(0,0,0,.9); }
#financement .cta-final__box h2, #contact .cta-final__box h2 { color: var(--ink); }
#financement .cta-final__box p,  #contact .cta-final__box p  { color: color-mix(in srgb, var(--ink) 84%, transparent); }
#financement .cta-final__box .eyebrow { color: color-mix(in srgb, var(--ink) 74%, transparent); }
#financement .cta-final__box .eyebrow::before,
#financement .cta-final__box .eyebrow::after { background: color-mix(in srgb, var(--ink) 44%, transparent); box-shadow: none; }
/* boutons sur aplat vif : primaire = encre teintée pleine · secondaire = contour teinté */
#financement .btn--primary, #contact .btn--primary { background: var(--ink); color: #fff; border: 0; box-shadow: 0 12px 30px -12px rgba(0,0,0,.55); }
#financement .btn--primary::before, #contact .btn--primary::before { display: none; }
#financement .btn--primary:hover, #contact .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(0,0,0,.7); }
#financement .btn--ghost, #contact .btn--ghost { border: 1px solid color-mix(in srgb, var(--ink) 52%, transparent); color: var(--ink); background: transparent; }
#financement .btn--ghost:hover, #contact .btn--ghost:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); border-color: var(--ink); box-shadow: none; }

/* ============================================================
   Nos services — clientèles desservies + vedettes « Populaire » + badges
   ============================================================ */
.svc-clients { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.svc-clients span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-1); padding: 5px 14px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-200) 55%, transparent); }
.svc-clients span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.svc-clients span:nth-child(1)::before { background: var(--cyan); box-shadow: var(--glow-c-soft); }
.svc-clients span:nth-child(2)::before { background: var(--orange); box-shadow: var(--glow-o-soft); }
.svc-clients span:nth-child(3)::before { background: linear-gradient(90deg, var(--orange), var(--cyan)); }

.services__featured { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.svc-feat { position: relative; display: flex; flex-direction: column; min-height: 186px; padding: 24px 26px; border-radius: 22px; overflow: hidden; text-decoration: none; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.svc-feat--o { background: var(--fill-o); --ink: #1C1204; }
.svc-feat--c { background: var(--fill-c); --ink: #05181C; }
.svc-feat:hover { transform: translateY(-4px); box-shadow: 0 34px 66px -30px rgba(0,0,0,.82); }
.svc-feat__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--ink) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent); color: var(--ink); margin-bottom: 14px; }
.svc-feat__icon svg { width: 23px; height: 23px; }
.svc-feat__body { flex: 1; }
.svc-feat__title { font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; line-height: 1.1; color: var(--ink); }
.svc-feat__text { font-size: .9rem; line-height: 1.4; color: color-mix(in srgb, var(--ink) 82%, transparent); margin-top: 7px; max-width: 40ch; }
.svc-feat__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--font-display); font-size: .82rem; font-weight: 600; color: var(--ink); }
.svc-feat__cta svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.svc-feat:hover .svc-feat__cta svg { transform: translateX(4px); }
.svc-feat__badge { position: absolute; top: 16px; right: 16px; font-family: var(--font-display); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--ink); padding: 5px 11px; border-radius: 999px; }
/* badge sur une tuile de la grille (ex : Réparation urgente 24/7) */
.card__badge { position: absolute; top: 13px; right: 13px; z-index: 2; font-family: var(--font-display); font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--ink); padding: 4px 9px; border-radius: 999px; }
@media (max-width: 720px) { .services__featured { grid-template-columns: 1fr; } .svc-feat { min-height: 0; } }

/* ============================================================
   « Pourquoi Voltek » — section compactée (réduire le scroll)
   ============================================================ */
#pourquoi { padding-block: clamp(40px, 5vw, 70px); }
#pourquoi .why__wrap { gap: clamp(26px, 4vw, 54px); align-items: start; }
#pourquoi .h-title { font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.3rem); }
#pourquoi .why__quote { font-size: clamp(1.25rem, 1rem + 1.3vw, 1.8rem); margin: 16px 0 14px; }
#pourquoi .h-lead { font-size: .96rem; }
#pourquoi .certs { margin-top: 18px; }

/* Réalisations — masquée pour le moment (section + liens de navigation) */
#realisations, a[href="#realisations"] { display: none; }

/* ============================================================
   Compression générale — moins de temps à scroller (aucun contenu retiré).
   On resserre espacements, grands titres, hero et cartes.
   (#pourquoi garde ses overrides encore plus compacts.)
   ============================================================ */
.section { padding-block: clamp(38px, 4.8vw, 74px); }
.section__head { margin-bottom: clamp(24px, 3.2vw, 42px); }
.h-title { font-size: clamp(1.9rem, 1.2rem + 2.9vw, 3.1rem); }
.hero { min-height: 78svh; padding-bottom: 40px; }
.hero__title { font-size: clamp(2.3rem, 1.2rem + 5.2vw, 4.6rem); margin-bottom: 18px; }
.hero__sub { margin-bottom: 24px; }
.hero__trust { margin-top: clamp(24px, 4vw, 50px); padding-top: 20px; }
.stats { padding-block: clamp(38px, 4.8vw, 68px); }
.cta-final__box { padding-block: clamp(32px, 4.4vw, 54px); }
.why__quote { margin: 12px 0 10px; }
/* cartes de services : moins hautes (hauteur = contenu, pas un carré) + vedettes plus basses */
.services__track { gap: 12px; }
.services__track .card { aspect-ratio: auto; min-height: 0; }
.services__featured { gap: 14px; margin-bottom: 14px; }
.svc-feat { min-height: 0; padding: 20px 22px; }
.svc-feat__title { font-size: 1.18rem; }
.svc-feat__text { font-size: .85rem; margin-top: 6px; }
.svc-feat__cta { margin-top: 12px; }

/* ============================================================
   Méga-menu « Nos services » (survol) — panneau sombre Voltek
   ============================================================ */
.nav__mega { min-width: 0; width: min(600px, calc(100vw - 40px)); padding: 16px; display: block; gap: 0; left: auto; right: 0; transform: translateY(8px);
  /* Ne jamais dépasser l'écran : si la liste est plus haute que la fenêtre,
     le panneau défile (le bas / le pied restent atteignables au zoom 100 %). */
  max-height: calc(100vh - var(--promo-h) - var(--nav-h) - 28px);
  overflow-y: auto; overscroll-behavior: contain; }
.nav__has-sub.is-open .nav__mega { transform: translateY(0); }
.nav__mega__label { font-family: var(--font-display); font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-2); margin: 15px 6px 8px; }
.nav__mega .nav__mega__all { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; background: color-mix(in srgb, var(--cyan) 9%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 22%, transparent); }
.nav__mega .nav__mega__all:hover { background: color-mix(in srgb, var(--cyan) 15%, transparent); }
.nav__mega__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.nav__mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.nav__mega .nav__mega__row a, .nav__mega .nav__mega__grid a { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 10px; }
.nav__mega .nav__mega__row a:hover, .nav__mega .nav__mega__grid a:hover { background: color-mix(in srgb, var(--bg-400) 82%, transparent); }
.nav__mega__ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--bg-400) 80%, transparent); border: 1px solid var(--line); color: var(--cyan); }
.nav__mega__ic svg { width: 18px; height: 18px; }
.nav__mega__grid a:nth-child(even) .nav__mega__ic { color: var(--orange-2); }
.nav__mega__tt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.nav__mega__tt strong { font-size: .85rem; font-weight: 600; color: var(--white); }
.nav__mega__tt small { font-size: .71rem; color: var(--gray-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__mega .nav__mega__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-100) 60%, transparent); }
.nav__mega__foot span { font-size: .82rem; color: var(--gray-1); }
.nav__mega__foot strong { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: .88rem; color: #fff; background: var(--grad-orange); padding: 8px 15px; border-radius: 999px; white-space: nowrap; }
.nav__mega__foot strong svg { width: 15px; height: 15px; }
@media (max-width: 860px) {
  .nav__mega { width: 100%; padding: 6px 0 4px; }
  .nav__mega__row, .nav__mega__grid { grid-template-columns: 1fr; }
  .nav__mega .nav__mega__all, .nav__mega .nav__mega__foot { display: none; }
  .nav__mega__label { margin: 12px 4px 4px; }
}

/* ============================================================
   Pages internes — en-tête de page, processus, FAQ, blogue
   ============================================================ */
.page-hero { position: relative; padding-block: calc(var(--promo-h) + var(--nav-h) + clamp(26px,3.6vw,46px)) clamp(26px,4vw,46px); }
.page-hero::before { content:""; position:absolute; inset:0; background: radial-gradient(70% 120% at 12% 0%, rgba(248,106,0,.10), transparent 60%), radial-gradient(70% 120% at 100% 0%, rgba(53,215,240,.09), transparent 60%); pointer-events:none; }
.page-hero .container { position: relative; }
.page-hero__crumb { display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-size:.72rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--gray-2); margin-bottom:16px; }
.page-hero__crumb a { color:var(--cyan); }
.page-hero__crumb span { opacity:.45; }
.page-hero h1.h-title { margin-bottom:14px; }
.page-hero__cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }

.process { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.process__step { position:relative; padding:26px 24px; border-radius:var(--radius-lg); background:var(--bg-200); border:1px solid var(--line); }
.process__n { font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--bg-000); background:var(--grad-energy); width:38px; height:38px; border-radius:11px; display:grid; place-items:center; margin-bottom:16px; }
.process__step h3 { font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--white); margin-bottom:8px; }
.process__step p { color:var(--gray-2); font-size:.93rem; }

.faq { display:grid; gap:10px; max-width:840px; }
.faq__item { border:1px solid var(--line); border-radius:14px; background:var(--bg-200); padding:2px 20px; }
.faq__item summary { cursor:pointer; list-style:none; padding:16px 0; font-family:var(--font-display); font-weight:600; color:var(--white); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq__item summary::-webkit-details-marker { display:none; }
.faq__item summary::after { content:"+"; color:var(--cyan); font-size:1.5rem; line-height:1; transition:transform .25s var(--ease); }
.faq__item[open] summary::after { transform:rotate(45deg); }
.faq__item p { color:var(--gray-1); padding:0 0 16px; max-width:72ch; }

.blog { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.blog__card { padding:24px; border-radius:var(--radius-lg); background:var(--bg-200); border:1px solid var(--line); transition:transform .3s var(--ease), border-color .3s var(--ease); cursor:pointer; }
.blog__card:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--cyan) 40%, transparent); }
.blog__tag { display:inline-block; font-family:var(--font-display); font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan); background:color-mix(in srgb, var(--cyan) 10%, transparent); border:1px solid color-mix(in srgb,var(--cyan) 24%,transparent); padding:4px 11px; border-radius:999px; margin-bottom:14px; }
.blog__card h3 { font-family:var(--font-title); font-weight:500; font-size:1.22rem; color:var(--white); line-height:1.16; margin-bottom:10px; }
.blog__card p { color:var(--gray-2); font-size:.92rem; margin-bottom:14px; }
.blog__more { font-family:var(--font-display); font-size:.82rem; font-weight:600; color:var(--orange-2); }
@media (max-width:860px){ .process, .blog { grid-template-columns:1fr; } }

/* ============================================================
   Assistant Voltek — clavardage scripté (conversation)
   ============================================================ */
.chat-panel { display: flex; flex-direction: column; width: min(374px, calc(100vw - 32px)); height: min(72vh, 540px); bottom: 88px; padding: 0; }
.chat-panel__head { flex: none; display: flex; align-items: center; gap: 11px; padding: 13px 12px 13px 15px; background: linear-gradient(120deg, color-mix(in srgb, var(--cyan) 22%, var(--bg-300)), var(--bg-200)); border-bottom: 1px solid var(--line); }
.chat-panel__avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-energy); color: var(--bg-000); box-shadow: 0 6px 16px -6px rgba(248,106,0,.7); }
.chat-panel__avatar svg { width: 20px; height: 20px; }
.chat-panel__idtxt { flex: 1 1 auto; min-width: 0; }
.chat-panel__idtxt h4 { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--white); line-height: 1.1; }
.chat-panel__idtxt p { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--gray-1); margin-top: 2px; }
.chat-panel__status { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #35d68a; box-shadow: 0 0 0 0 rgba(53,214,138,.55); animation: chatPulse 2.2s infinite; }
@keyframes chatPulse { 0%{box-shadow:0 0 0 0 rgba(53,214,138,.55)} 70%{box-shadow:0 0 0 7px rgba(53,214,138,0)} 100%{box-shadow:0 0 0 0 rgba(53,214,138,0)} }
.chat-panel__close { flex: none; width: 30px; height: 30px; border-radius: 8px; background: transparent; border: none; color: var(--gray-1); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.chat-panel__close:hover { background: rgba(255,255,255,.08); color: var(--white); }

.chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 13px; display: flex; flex-direction: column; gap: 11px; background: radial-gradient(120% 80% at 50% 0%, rgba(53,215,240,.05), transparent 60%), var(--bg-100); }
.chat-log::-webkit-scrollbar { width: 8px; }
.chat-log::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.chat-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.chat-msg--user { flex-direction: row-reverse; }
.chat-msg__ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--orange) 22%, var(--bg-300)); color: var(--orange-3); }
.chat-msg__ic svg { width: 15px; height: 15px; }
.chat-msg__bubble { padding: 10px 13px; border-radius: 15px; font-size: .9rem; line-height: 1.5; max-width: 82%; }
.chat-msg--bot .chat-msg__bubble { background: var(--bg-300); border: 1px solid var(--line); color: var(--gray-1); border-bottom-left-radius: 5px; }
.chat-msg--bot .chat-msg__bubble strong { color: var(--white); }
.chat-msg--user .chat-msg__bubble { background: linear-gradient(135deg, var(--orange), var(--orange-1)); color: #fff; border-bottom-right-radius: 5px; font-weight: 500; }
.chat-dots { display: inline-flex; gap: 4px; padding: 2px 1px; }
.chat-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-2); animation: chatDot 1.2s infinite ease-in-out; }
.chat-dots i:nth-child(2) { animation-delay: .18s; }
.chat-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes chatDot { 0%,60%,100%{ transform: translateY(0); opacity:.4 } 30%{ transform: translateY(-4px); opacity:1 } }

.chat-quick { flex: none; display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--bg-200); max-height: 150px; overflow-y: auto; }
.chat-chip { font-size: .8rem; font-weight: 500; color: var(--cyan-3); background: color-mix(in srgb, var(--cyan) 9%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 34%, transparent); padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.chat-chip:hover { background: color-mix(in srgb, var(--cyan) 20%, transparent); color: #fff; transform: translateY(-1px); }
.chat-chip--primary { color: #fff; background: linear-gradient(135deg, var(--orange), var(--orange-1)); border-color: transparent; }
.chat-chip--primary:hover { filter: brightness(1.08); color: #fff; }

.chat-input { flex: none; display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--bg-200); }
.chat-input input { flex: 1 1 auto; min-width: 0; padding: 10px 14px; background: var(--bg-000); border: 1px solid var(--line); border-radius: 999px; color: var(--white); font-size: .88rem; }
.chat-input input:focus { outline: none; border-color: color-mix(in srgb, var(--cyan) 55%, transparent); }
.chat-input__send { flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; background: var(--grad-energy); color: var(--bg-000); transition: transform .15s, filter .2s; }
.chat-input__send:hover { transform: translateY(-1px); filter: brightness(1.06); }
.chat-input__send svg { width: 17px; height: 17px; }

@media (max-width: 560px) { .chat-panel { height: min(76vh, 520px); bottom: 78px; } }
@media (prefers-reduced-motion: reduce) { .chat-panel__status, .chat-dots i { animation: none; } }

/* Bascule Assistant IA (injectée dans l'en-tête du clavardage) */
.chat-ai-toggle { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: .74rem; font-weight: 600; color: var(--gray-1); background: rgba(255,255,255,.06); border: 1px solid var(--line); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chat-ai-toggle:hover { color: #fff; background: rgba(255,255,255,.12); }
.chat-ai-toggle__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-2); transition: background .2s, box-shadow .2s; }
.chat-ai-toggle.is-on { color: #fff; background: linear-gradient(135deg, var(--cyan), var(--cyan-1)); border-color: transparent; }
.chat-ai-toggle.is-on .chat-ai-toggle__dot { background: #fff; box-shadow: 0 0 7px rgba(255,255,255,.9); }
.chat-panel__idtxt { overflow: hidden; }
.chat-panel__idtxt h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   Fond de la section « Nos services » — page d'accueil seulement
   ============================================================ */
.services--bg {
  background-color: var(--bg-100);
  background-image:
    linear-gradient(180deg, var(--bg-100) 0%, rgba(8,8,10,0) 16%, rgba(8,8,10,0) 84%, var(--bg-100) 100%),
    linear-gradient(0deg, rgba(6,6,9,.36), rgba(6,6,9,.36)),
    url('assets/bg-services.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============================================================
   Cartes « Nos services » v2 — bordure néon + séparateur diagonal
   (services.html · texte à gauche, image à droite ajoutée plus tard)
   ============================================================ */
/* Grille 3 colonnes = carrés ~40 % plus petits (2 puis 1 col sur écrans plus étroits) */
.services__track--v2 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; justify-content: stretch; overflow: visible; }

.svc2 {
  position: relative; aspect-ratio: 1536 / 1024;
  background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
  --acc: var(--orange); --accsoft: rgba(248,106,0,.14);
  transition: transform .35s var(--ease);
}
/* Images PNG fournies, utilisées telles quelles (aucune retouche design/couleur/contraste) */
.svc2--o { background-image: url('assets/svc-frame-o.png'); }
.svc2--c { background-image: url('assets/svc-frame-c.png'); --acc: var(--cyan-2); --accsoft: rgba(53,215,240,.13); }
.svc2:hover { transform: translateY(-4px); }

/* L'ancienne reproduction SVG n'est plus affichée — on montre l'image PNG */
.svc2__frame { display: none; }

/* Zone image (droite) — remplie plus tard ; découpée au séparateur diagonal.
   Transparente par défaut : la zone sombre de droite du PNG reste visible. */
.svc2__media {
  position: absolute; inset: 0; z-index: 1;
  clip-path: polygon(38.3% 0, 100% 0, 100% 100%, 48.7% 100%, 61% 82.5%);
  /* Pour ajouter une image : sur la carte  style="--svc-img:url('assets/photo.jpg')" */
  background-image: var(--svc-img, none);
  /* contain = on voit TOUTE la photo (pas de recadrage), calée à droite */
  background-size: contain; background-position: right 8% center; background-repeat: no-repeat;
  background-color: #0a0a0c;
}

/* Texte (panneau gauche) — tailles réduites pour les carrés plus petits */
.svc2__body { position: absolute; left: 0; top: 0; bottom: 0; width: 48%; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 7% 3% 7% 8%; }
.svc2__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accsoft); color: var(--acc); border: 1px solid color-mix(in srgb, var(--acc) 34%, transparent); }
.svc2__ic svg { width: 18px; height: 18px; }
.svc2__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(.82rem, .6rem + .55vw, 1.02rem); color: var(--white); line-height: 1.12; }
.svc2__text { font-size: clamp(.68rem, .56rem + .3vw, .8rem); color: var(--gray-2); line-height: 1.4; }
.svc2__link { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-family: var(--font-display); font-size: .74rem; font-weight: 600; color: var(--acc); transition: gap .25s var(--ease); }
.svc2__link svg { width: 13px; height: 13px; }
.svc2:hover .svc2__link { gap: 8px; }

/* Badges conservés (7 photos / 24-7) au coin supérieur droit */
.svc2 .card__photos, .svc2 .card__badge { z-index: 5; }

@media (max-width: 1000px) { .services__track--v2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .services__track--v2 { grid-template-columns: 1fr; } }


/* ============================================================
   « Pourquoi Voltek » — scène électrique (accueil)
   Photo pleine largeur (maison + VÉ + borne Tesla) ; texte à
   gauche, 5 cartes translucides à droite, barre d'accréditations en bas.
   ============================================================ */
#pourquoi.why2 { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(48px, 6vw, 96px); background: var(--bg-100); }
#pourquoi.why2::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url('assets/bg-pourquoi.jpg') right center / cover no-repeat; }
#pourquoi.why2 .container { position: relative; z-index: 1; }
/* traînées orange/turquoise en bas à gauche (signature) */
.why2__streak { position: absolute; left: -8px; bottom: -8px; width: clamp(170px, 19vw, 290px); z-index: 0; pointer-events: none; }
.why2__streak svg { width: 100%; height: auto; display: block; }
#pourquoi.why2::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--bg-100) 0%, rgba(7,8,11,.9) 22%, rgba(7,8,11,.45) 40%, rgba(7,8,11,.12) 56%, transparent 72%),
    linear-gradient(180deg, var(--bg-100) 0%, rgba(7,8,11,0) 14%, rgba(7,8,11,0) 66%, rgba(7,8,11,.5) 88%, var(--bg-100) 100%);
}

.why2__top { display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(28px, 4vw, 66px); align-items: center; padding-right: clamp(0px, 8vw, 120px); }
.why2__intro { max-width: 520px; }
.why2__eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--orange-3); }
.why2__eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--orange); }
.why2__title { font-family: var(--font-title); font-optical-sizing: auto; font-weight: 500; font-size: clamp(2rem, 1.3rem + 2.7vw, 3.4rem); line-height: 1.04; letter-spacing: -.015em; color: var(--white); margin: 16px 0 18px; }
.why2__title .why2__o { color: var(--orange-3); }
.why2__title .why2__c { color: var(--cyan-2); }
.why2__lead { font-size: .92rem; line-height: 1.6; color: var(--gray-1); max-width: 44ch; }
.why2__std { font-family: var(--font-display); font-weight: 600; font-size: .92rem; line-height: 1.5; color: var(--white); margin-top: 18px; }
.why2__rule { display: block; width: 64px; height: 2px; margin-top: 22px; background: linear-gradient(90deg, var(--cyan), transparent); }

.why2__cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.why2__card { --acc: var(--cyan-2); display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 15px 20px; border-radius: 16px; background: rgba(9,10,13,.62); border: 1px solid rgba(255,255,255,.09); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 24px 50px -34px rgba(0,0,0,.9); transition: transform .3s var(--ease), border-color .3s var(--ease); }
.why2__card--o { --acc: var(--orange-3); }
.why2__card:hover { transform: translateX(-4px); border-color: color-mix(in srgb, var(--acc) 42%, transparent); }
.why2__ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--acc); border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent); background: color-mix(in srgb, var(--acc) 10%, transparent); }
.why2__ic svg { width: 23px; height: 23px; }
.why2__ctitle { font-family: var(--font-title); font-optical-sizing: auto; font-weight: 500; font-size: 1.16rem; color: var(--acc); margin-bottom: 3px; line-height: 1.1; }
.why2__cdesc { font-size: .82rem; line-height: 1.42; color: var(--gray-1); }

.why2__bar { margin-top: clamp(20px, 2.6vw, 34px); display: grid; grid-template-columns: repeat(5, 1fr); border-radius: 16px; background: rgba(9,10,13,.66); border: 1px solid rgba(255,255,255,.09); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; }
.why2__acc { --acc: var(--cyan-2); display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 15px 18px; border-left: 1px solid rgba(255,255,255,.08); }
.why2__acc:first-child { border-left: none; }
.why2__acc--o { --acc: var(--orange-3); }
.why2__aic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; color: var(--acc); }
.why2__aic svg { width: 25px; height: 25px; }
.why2__acc strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: .84rem; color: var(--white); }
.why2__acc span { font-size: .72rem; color: var(--gray-2); line-height: 1.3; }

@media (max-width: 940px) {
  .why2__top { grid-template-columns: 1fr; gap: 30px; padding-right: 0; }
  .why2__intro { max-width: none; }
  .why2__bar { grid-template-columns: repeat(2, 1fr); gap: 10px; background: transparent; border: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; }
  .why2__acc { border-left: none; border-radius: 12px; background: rgba(9,10,13,.66); border: 1px solid rgba(255,255,255,.09); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
@media (max-width: 560px) {
  #pourquoi.why2::after { background: linear-gradient(180deg, rgba(7,8,11,.82), rgba(7,8,11,.92)), linear-gradient(180deg, var(--bg-100), rgba(7,8,11,0) 20%, rgba(7,8,11,0) 80%, var(--bg-100)); }
  .why2__bar { grid-template-columns: 1fr; }
  .why2__card { padding: 14px 16px; }
  .why2__ic { width: 42px; height: 42px; }
}
/* ============================================================
   Page Bornes de recharge VE (bornes.html)
   ============================================================ */
.bh-o { color: var(--orange-3); }
.bh-c { color: var(--cyan-2); }

.bh-hero { position: relative; padding-block: calc(var(--promo-h) + var(--nav-h) + clamp(20px,3vw,40px)) clamp(30px,4vw,56px); background: var(--bg-100); overflow: hidden; }
.bh-hero::before { content:""; position:absolute; inset:0; background: radial-gradient(70% 90% at 0% 0%, rgba(53,215,240,.09), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(248,106,0,.08), transparent 60%); pointer-events:none; }
.bh-hero__grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(28px,4vw,64px); align-items: center; min-height: clamp(360px, 40vw, 560px); }
.bh-hero__text { position: relative; z-index: 2; }
.bh-hero__crumb { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-2); margin-bottom: 16px; }
.bh-hero__crumb svg { width: 16px; height: 16px; }
.bh-hero__title { font-family: var(--font-title); font-optical-sizing: auto; font-weight: 500; font-size: clamp(2.3rem, 1.5rem + 3vw, 3.8rem); line-height: 1.03; letter-spacing: -.02em; color: var(--white); margin-bottom: 16px; }
.bh-hero__lead { font-size: 1rem; line-height: 1.6; color: var(--gray-1); max-width: 46ch; }
.bh-grant { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin: 24px 0; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); border-radius: 14px; background: linear-gradient(180deg, rgba(248,106,0,.08), rgba(248,106,0,.02)); }
.bh-grant__ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 11px; color: var(--orange-3); border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent); }
.bh-grant__ic svg { width: 22px; height: 22px; }
.bh-grant__txt strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--orange-3); margin-bottom: 3px; }
.bh-grant__txt p { font-size: .82rem; color: var(--gray-1); line-height: 1.4; }
.bh-grant__pill { flex: none; font-family: var(--font-display); font-size: .72rem; font-weight: 600; color: var(--cyan-2); border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.bh-mini { list-style: none; display: flex; flex-wrap: wrap; gap: 20px 26px; margin: 0 0 26px; padding: 0; }
.bh-mini li { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 500; font-size: .84rem; color: var(--gray-1); }
.bh-mini__ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 11px; color: var(--cyan-2); border: 1px solid var(--line); background: var(--bg-200); }
.bh-mini__ic svg { width: 21px; height: 21px; }
/* Photo hero pleine largeur à droite (full-bleed, touche le bord droit + le haut) */
.bh-hero__media { position: absolute; top: 0; right: 0; bottom: 0; width: clamp(320px, 47%, 780px); z-index: 0; }
.bh-hero__media img { width: 100%; height: 100%; max-height: none; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; display: block; }
.bh-hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--bg-100) 0%, rgba(8,9,12,.35) 14%, transparent 40%), linear-gradient(180deg, rgba(8,9,12,.25), transparent 22%, transparent 78%, rgba(8,9,12,.35)); }

.bh-feats { border-block: 1px solid var(--line); background: var(--bg-100); }
.bh-feats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.bh-feat { text-align: center; padding: clamp(28px,3.4vw,44px) 22px; border-left: 1px solid var(--line); }
.bh-feat:first-child { border-left: none; }
.bh-feat__ic { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; }
.bh-feat__ic svg { width: 30px; height: 30px; }
.bh-feat h3 { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--white); margin-bottom: 6px; }
.bh-feat p { font-size: .86rem; color: var(--gray-2); line-height: 1.45; max-width: 26ch; margin-inline: auto; }

.bh-env__head { text-align: center; }
.bh-env__head .h-title::after { content:""; display:block; width: 54px; height: 3px; margin: 14px auto 0; border-radius: 2px; background: var(--grad-energy); }
.bh-env__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bh-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-200); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s var(--ease); }
.bh-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--cyan) 34%, transparent); }
.bh-card__media { aspect-ratio: 4 / 3.1; overflow: hidden; }
.bh-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.bh-card:hover .bh-card__media img { transform: scale(1.05); }
.bh-card__body { padding: 20px 20px 24px; }
.bh-card__body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; color: var(--white); line-height: 1.15; }
.bh-card__rule { display: block; width: 34px; height: 2px; margin: 10px 0 12px; background: var(--cyan); }
.bh-card__body p { font-size: .86rem; color: var(--gray-2); line-height: 1.5; }

.bh-steps__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; }
.bh-steps__row::before { content:""; position: absolute; top: 26px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--line), var(--line), transparent); z-index: 0; }
.bh-step { position: relative; z-index: 1; text-align: center; padding: 0 6px; }
.bh-step__ic { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; color: var(--cyan-2); background: var(--bg-200); border: 1px solid var(--line); }
.bh-step__ic svg { width: 26px; height: 26px; }
.bh-step__n { display: block; font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .1em; color: var(--cyan-2); margin: 12px 0 4px; }
.bh-step h3 { font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: var(--white); margin-bottom: 6px; }
.bh-step p { font-size: .8rem; color: var(--gray-2); line-height: 1.45; max-width: 24ch; margin-inline: auto; }

.bh-subv { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px,3vw,52px); align-items: center; padding: clamp(28px,3.4vw,44px); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--bg-300), var(--bg-200)); border: 1px solid var(--line); }
.bh-subv__title { font-family: var(--font-title); font-weight: 500; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); color: var(--white); line-height: 1.1; margin-bottom: 12px; }
.bh-subv__title .bh-o { color: var(--orange-3); }
.bh-subv__left p { font-size: .94rem; color: var(--gray-1); line-height: 1.55; margin-bottom: 22px; max-width: 40ch; }
.bh-subv__right { position: relative; }
.bh-subv__pill { position: absolute; top: -6px; right: 0; font-family: var(--font-display); font-size: .72rem; font-weight: 600; color: var(--cyan-2); border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); border-radius: 999px; padding: 6px 12px; }
.bh-subv__pts { display: grid; gap: 16px; }
.bh-subv__pt { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.bh-subv__ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--orange-3); border: 1px solid color-mix(in srgb, var(--orange) 34%, transparent); background: color-mix(in srgb, var(--orange) 8%, transparent); }
.bh-subv__ic svg { width: 22px; height: 22px; }
.bh-subv__pt p { font-size: .88rem; color: var(--gray-1); line-height: 1.4; }

@media (max-width: 940px) {
  .bh-hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .bh-hero__media { position: static; width: auto; order: -1; }
  .bh-hero__media img { height: clamp(220px, 48vw, 340px); border-radius: var(--radius-lg); }
  .bh-hero__media::after { display: none; }
  .bh-feats__grid { grid-template-columns: repeat(2, 1fr); }
  .bh-feat:nth-child(odd) { border-left: none; }
  .bh-feat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .bh-env__grid { grid-template-columns: repeat(2, 1fr); }
  .bh-steps__row { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
  .bh-steps__row::before { display: none; }
  .bh-subv { grid-template-columns: 1fr; }
  .bh-subv__pill { position: static; display: inline-block; margin-bottom: 14px; }
}
@media (max-width: 560px) {
  .bh-grant { grid-template-columns: auto 1fr; }
  .bh-grant__pill { grid-column: 1 / -1; justify-self: start; }
  .bh-env__grid { grid-template-columns: 1fr; }
  .bh-steps__row { grid-template-columns: 1fr; }
}
/* Toute la carte devient cliquable via son lien (sauf la carte à galerie photo) */
.svc2:has(.svc2__link:not([data-svc-gallery])) { cursor: pointer; }
.svc2 .svc2__link:not([data-svc-gallery])::after { content: ""; position: absolute; inset: 0; z-index: 6; }
/* ---- Bande CTA finale (bh-subv) : items titre + sous-titre ---- */
.bh-subv__pt strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--white); line-height: 1.2; }
.bh-subv__pt span { font-size: .78rem; color: var(--gray-2); }

/* ============================================================
   Page Génératrices — sections propres
   ============================================================ */
/* Automatique ou manuelle */
.gen-choice__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gen-choice__card { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: clamp(22px,2.6vw,32px); border-radius: var(--radius-lg); background: var(--bg-200); border: 1px solid var(--line); }
.gen-choice__ic { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 16px; color: var(--cyan-2); border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.gen-choice__ic svg { width: 34px; height: 34px; }
.gen-choice__card h3 { font-family: var(--font-title); font-optical-sizing: auto; font-weight: 500; font-size: 1.3rem; color: var(--cyan-2); margin-bottom: 8px; }
.gen-choice__card p { font-size: .9rem; line-height: 1.55; color: var(--gray-1); }

/* Financement */
.gen-fin { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; align-items: center; gap: clamp(20px,3vw,44px); padding: clamp(22px,2.6vw,34px) clamp(24px,3vw,40px); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(53,215,240,.06), var(--bg-200)); border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); box-shadow: inset 0 0 40px -20px rgba(53,215,240,.4); }
.gen-fin__brand { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.gen-fin__ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--cyan-2); border: 1px solid color-mix(in srgb, var(--cyan) 34%, transparent); }
.gen-fin__ic svg { width: 24px; height: 24px; }
.gen-fin__brand p { font-size: .84rem; color: var(--gray-2); line-height: 1.3; margin-bottom: 2px; }
.gen-fin__logo { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; letter-spacing: -.02em; color: var(--cyan-2); }
.gen-fin__price { text-align: center; border-inline: 1px solid var(--line); padding-inline: clamp(12px,2vw,28px); display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.gen-fin__from { font-family: var(--font-display); font-size: .82rem; color: var(--gray-1); }
.gen-fin__amt { font-family: var(--font-title); font-weight: 600; font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); color: var(--orange-3); }
.gen-fin__per { font-family: var(--font-display); font-size: .9rem; color: var(--gray-1); }
.gen-fin__note p { font-size: .88rem; color: var(--gray-1); line-height: 1.45; }
.gen-fin__note small { display: block; margin-top: 6px; font-size: .72rem; color: var(--gray-2); }

@media (max-width: 860px) {
  .gen-choice__grid { grid-template-columns: 1fr; }
  .gen-fin { grid-template-columns: 1fr; text-align: center; gap: 22px; }
  .gen-fin__brand { grid-template-columns: 1fr; justify-items: center; }
  .gen-fin__price { border-inline: none; border-block: 1px solid var(--line); padding-block: 18px; padding-inline: 0; }
}
@media (max-width: 560px) {
  .gen-choice__card { grid-template-columns: 1fr; gap: 14px; }
}
/* ============================================================
   Génératrices — SIGNATURE « Le seuil lumineux » (Réserve Silencieuse)
   De la panne (charbon, pointillé) → bascule (éclair) → lumière rétablie (orange).
   ============================================================ */
.gen-sig { position: relative; overflow: hidden; background: var(--bg-100); padding-block: clamp(64px, 8vw, 120px); }
.gen-sig::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 120%, rgba(248,106,0,.10), transparent 55%), radial-gradient(90% 60% at 50% -10%, rgba(53,215,240,.06), transparent 60%); }
.gen-sig__inner { position: relative; max-width: 860px; margin-inline: auto; text-align: center; }
.gen-sig__eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--cyan-2); margin-bottom: 18px; }
.gen-sig__title { font-family: var(--font-title); font-optical-sizing: auto; font-weight: 500; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem); line-height: 1.06; letter-spacing: -.015em; color: color-mix(in srgb, var(--gray-2) 82%, var(--white)); }
.gen-sig__glow { color: var(--white); text-shadow: 0 0 22px rgba(248,106,0,.55), 0 0 44px rgba(248,106,0,.28); }

/* La ligne-seuil */
.gen-sig__line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; max-width: 640px; margin: clamp(44px, 5.5vw, 72px) auto 0; }
.gen-sig__seg { position: relative; height: 2px; }
.gen-sig__seg--out { background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--gray-2) 60%, transparent) 0 3px, transparent 3px 12px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%); mask-image: linear-gradient(90deg, transparent, #000 26%); }
.gen-sig__seg--in { background: linear-gradient(90deg, var(--cyan) 0%, var(--orange) 58%, var(--orange-3) 100%); box-shadow: 0 0 14px -2px rgba(248,106,0,.6); -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
.gen-sig__seg--in i { position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-3); box-shadow: 0 0 9px 1px rgba(248,106,0,.85); transform: translate(-50%, -50%); }
.gen-sig__seg--in i:nth-child(1){ left: 26%; } .gen-sig__seg--in i:nth-child(2){ left: 52%; } .gen-sig__seg--in i:nth-child(3){ left: 78%; }
.gen-sig__node { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; color: var(--orange-3); background: radial-gradient(circle at 50% 40%, #17171c, #0a0a0d); border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); box-shadow: 0 0 0 6px rgba(8,9,12,.6), 0 0 26px -3px rgba(53,215,240,.55), 0 0 30px -4px rgba(248,106,0,.4); animation: genPulse 3.4s ease-in-out infinite; }
.gen-sig__node svg { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(248,106,0,.7)); }
@keyframes genPulse { 0%,100% { box-shadow: 0 0 0 6px rgba(8,9,12,.6), 0 0 20px -3px rgba(53,215,240,.45), 0 0 24px -4px rgba(248,106,0,.3); } 50% { box-shadow: 0 0 0 6px rgba(8,9,12,.6), 0 0 30px -2px rgba(53,215,240,.75), 0 0 40px -3px rgba(248,106,0,.55); } }

/* Étiquettes cliniques */
.gen-sig__labels { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; max-width: 640px; margin: 18px auto 0; font-family: var(--font-display); font-size: .72rem; letter-spacing: .04em; }
.gen-sig__lab--out { justify-self: start; color: var(--gray-2); }
.gen-sig__lab--mid { justify-self: center; color: var(--cyan-2); font-weight: 600; }
.gen-sig__lab--in { justify-self: end; color: var(--orange-3); font-weight: 600; }
.gen-sig__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 620px) {
  .gen-sig__line, .gen-sig__labels { max-width: 420px; }
  .gen-sig__labels { font-size: .64rem; }
  .gen-sig__node { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .gen-sig__node { animation: none; } }
/* ============================================================
   Page Réparation urgente 24/7 (urgence.html)
   Langage : bâton majuscule, formes biseautées, appel d'abord.
   ============================================================ */
.urg-c { color: var(--cyan-2); }

/* Hero */
.urg-hero { position: relative; overflow: hidden; background: var(--bg-100); padding-block: calc(var(--promo-h) + var(--nav-h) + clamp(22px,3vw,42px)) clamp(38px,5vw,70px); }
.urg-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px,4vw,64px); align-items: center; min-height: clamp(420px,44vw,600px); }
.urg-hero__text { position: relative; z-index: 2; }
.urg-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-3); margin-bottom: 16px; }
.urg-hero__eyebrow svg { width: 18px; height: 18px; }
.urg-hero__title { font-family: var(--font-title); font-optical-sizing: auto; font-weight: 500; font-size: clamp(2.3rem, 1.5rem + 3vw, 3.9rem); line-height: 1.04; letter-spacing: -.02em; color: var(--white); margin-bottom: 22px; }
.urg-hero__accent { color: var(--cyan-2); }
.urg-hero__lead { font-size: 1rem; line-height: 1.6; color: var(--gray-1); max-width: 44ch; margin: 22px 0 26px; }

/* Badge 24/7 biseauté (bordure orange via superposition) */
.urg-badge { display: inline-block; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); background: linear-gradient(180deg, rgba(248,106,0,.1), rgba(248,106,0,.02)); box-shadow: var(--glow-o-soft); }
.urg-badge__in { position: relative; display: flex; align-items: center; gap: 16px; padding: 13px 20px; }
.urg-badge__num { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; line-height: 1; letter-spacing: -.02em; color: var(--orange-3); }
.urg-badge__txt { display: flex; flex-direction: column; font-family: var(--font-display); font-size: .8rem; color: var(--gray-1); line-height: 1.35; }
.urg-badge__txt strong { font-weight: 600; color: var(--white); }
.urg-badge__live { width: 9px; height: 9px; border-radius: 50%; background: #35d68a; box-shadow: 0 0 0 0 rgba(53,214,138,.65); animation: urgLive 1.8s ease-out infinite; }
@keyframes urgLive { 0% { box-shadow: 0 0 0 0 rgba(53,214,138,.65); } 70% { box-shadow: 0 0 0 8px rgba(53,214,138,0); } 100% { box-shadow: 0 0 0 0 rgba(53,214,138,0); } }

/* Bouton APPELER (biseauté) */
.urg-call { display: inline-flex; align-items: center; gap: 12px; padding: 15px 28px; font-family: var(--font-body); font-weight: 600; font-size: .98rem; letter-spacing: .01em; color: var(--white); border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--orange) 55%, transparent); background: linear-gradient(180deg, rgba(248,106,0,.16), rgba(248,106,0,.05)); box-shadow: var(--glow-o-soft); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.urg-call:hover { transform: translateY(-2px); box-shadow: var(--glow-o); border-color: var(--orange); }
.urg-call__ic { display: grid; place-items: center; width: 26px; height: 26px; }
.urg-call__ic svg { width: 22px; height: 22px; }

/* Photo hero plein cadre à droite */
.urg-hero__media { position: absolute; top: 0; right: 0; bottom: 0; width: clamp(320px, 47%, 740px); z-index: 0; }
.urg-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
.urg-hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--bg-100) 0%, rgba(8,9,12,.4) 14%, transparent 42%), linear-gradient(180deg, rgba(8,9,12,.3), transparent 22%, transparent 72%, rgba(8,9,12,.5)); }
.urg-hero__streak { display: none; }

/* Problèmes fréquents */
.urg-probs__head { text-align: center; }
.urg-probs__head .h-title::after { content: ""; display: block; width: 54px; height: 3px; margin: 14px auto 0; border-radius: 2px; background: var(--grad-energy); }
.urg-probs__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.urg-prob { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 26px 12px; border-radius: 14px; background: var(--bg-200); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s var(--ease); }
.urg-prob:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cyan) 36%, transparent); }
.urg-prob__ic { color: var(--cyan-2); }
.urg-prob__ic svg { width: 40px; height: 40px; }
.urg-prob p { font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--gray-1); line-height: 1.3; }

/* Votre sécurité, notre priorité */
.urg-safety-wrap { position: relative; overflow: hidden; background: var(--bg-100); border-block: 1px solid var(--line); }
.urg-safety { display: grid; grid-template-columns: auto 1fr; gap: clamp(26px,4vw,60px); align-items: center; padding-block: clamp(34px,4vw,58px); }
.urg-safety__head { display: flex; align-items: center; gap: 20px; }
.urg-safety__shield { width: 66px; height: 66px; flex: none; display: grid; place-items: center; color: var(--orange-3); filter: drop-shadow(0 0 16px rgba(248,106,0,.5)); }
.urg-safety__shield svg { width: 58px; height: 58px; }
.urg-safety__title { font-family: var(--font-title); font-optical-sizing: auto; font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem); line-height: 1.1; letter-spacing: -.01em; color: var(--white); }
.urg-safety__pts { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.urg-safety__pt { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.urg-safety__ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; color: var(--cyan-2); }
.urg-safety__ic svg { width: 30px; height: 30px; }
.urg-safety__pt strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: .96rem; color: var(--white); margin-bottom: 4px; }
.urg-safety__pt p { font-size: .86rem; color: var(--gray-2); line-height: 1.4; }

/* Besoin d'aide maintenant (CTA appel) */
.urg-cta { display: grid; grid-template-columns: 1fr auto; gap: clamp(24px,4vw,56px); align-items: center; padding: clamp(28px,3.6vw,48px); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--bg-300), var(--bg-200)); border: 1px solid var(--line); }
.urg-cta__title { font-family: var(--font-title); font-optical-sizing: auto; font-weight: 500; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem); line-height: 1.08; letter-spacing: -.01em; color: var(--white); margin-bottom: 8px; }
.urg-cta__left p { font-size: .96rem; color: var(--gray-1); margin-bottom: 14px; }
.urg-cta__tag { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-2); }
.urg-cta__rule { width: 34px; height: 2px; background: var(--cyan); }
.urg-phone { display: inline-flex; align-items: center; gap: 14px; padding: 16px 32px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); letter-spacing: -.01em; color: var(--white); white-space: nowrap; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--orange) 55%, transparent); background: linear-gradient(180deg, rgba(248,106,0,.18), rgba(248,106,0,.05)); box-shadow: var(--glow-o-soft); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.urg-phone:hover { transform: translateY(-2px); box-shadow: var(--glow-o); border-color: var(--orange); }
.urg-phone__ic { display: grid; place-items: center; width: 34px; height: 34px; }
.urg-phone__ic svg { width: 28px; height: 28px; }

@media (max-width: 960px) {
  .urg-hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .urg-hero__media { position: static; width: auto; order: -1; }
  .urg-hero__media img { height: clamp(240px, 54vw, 380px); border-radius: var(--radius-lg); object-position: center 22%; }
  .urg-hero__media::after, .urg-hero__streak { display: none; }
  .urg-probs__grid { grid-template-columns: repeat(3, 1fr); }
  .urg-safety { grid-template-columns: 1fr; }
  .urg-cta { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .urg-probs__grid { grid-template-columns: repeat(2, 1fr); }
  .urg-safety__pts { grid-template-columns: 1fr; }
  .urg-phone { font-size: 1.45rem; padding: 15px 22px; }
}
@media (prefers-reduced-motion: reduce) { .urg-badge__live { animation: none; } }
/* ============================================================
   Page Rénovation (renovation.html) — respecte la charte du site
   ============================================================ */
.bh-hero__title em { font-style: normal; color: var(--orange-3); }
.reno-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* --- Échelle « Chaque rénovation » (5 cartes, petit -> grand) --- */
.reno-scale__grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(208px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.reno-scale__grid::-webkit-scrollbar { height: 8px; }
.reno-scale__grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.reno-sc { scroll-snap-align: start; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-200); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s var(--ease); }
.reno-sc:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cyan) 32%, transparent); }
.reno-sc__media { aspect-ratio: 4 / 3.1; overflow: hidden; }
.reno-sc__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.reno-sc:hover .reno-sc__media img { transform: scale(1.05); }
.reno-sc__body { padding: 15px 17px 19px; }
.reno-sc__n { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; color: var(--orange-3); line-height: 1; margin-bottom: 8px; }
.reno-sc__body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--white); line-height: 1.15; margin-bottom: 6px; }
.reno-sc__body p { font-size: .82rem; color: var(--gray-2); line-height: 1.4; }
.reno-scale__axis { display: flex; align-items: center; gap: 16px; margin-top: 20px; font-family: var(--font-display); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.reno-scale__axis span:first-child { color: var(--cyan-2); }
.reno-scale__axis span:last-child { color: var(--orange-3); }
.reno-scale__line { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), var(--orange)); }

/* --- « Vous rénovez quoi ? » (onglets interactifs) --- */
.reno-pick__head { text-align: left; }
.reno-pick__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.reno-pick__tab { font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--gray-1); padding: 10px 20px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-200); cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.reno-pick__tab:hover { color: var(--white); border-color: color-mix(in srgb, var(--cyan) 40%, transparent); }
.reno-pick__tab.is-active { color: var(--white); background: color-mix(in srgb, var(--cyan) 14%, var(--bg-200)); border-color: color-mix(in srgb, var(--cyan) 55%, transparent); }
.reno-pick__panel { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px, 3vw, 44px); align-items: stretch; }
.reno-pick__media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--bg-200); }
.reno-pick__img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; display: block; transition: opacity .35s var(--ease); }
.reno-pick__img.is-swapping { opacity: 0; }
.reno-pick__info { align-self: center; }
.reno-pick__h { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--white); margin-bottom: 18px; }
.reno-pick__list { list-style: none; display: grid; gap: 13px; margin: 0; padding: 0; }
.reno-pick__list li { display: flex; align-items: center; gap: 12px; font-size: .94rem; color: var(--gray-1); }
.reno-pick__list li svg { width: 20px; height: 20px; flex: none; color: var(--cyan-2); }

/* --- Étapes : 3 colonnes --- */
.reno-steps .bh-steps__row { grid-template-columns: repeat(3, 1fr); }

/* --- CTA finale avec photo --- */
.reno-cta-wrap { position: relative; overflow: hidden; background: var(--bg-100); }
.reno-cta__bg { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(90deg, var(--bg-100) 0%, rgba(8,9,12,.82) 32%, rgba(8,9,12,.42) 62%, rgba(8,9,12,.12) 100%), linear-gradient(180deg, var(--bg-100), rgba(8,9,12,0) 22%, rgba(8,9,12,0) 78%, var(--bg-100)), url('assets/renov-cuisine-2.jpg'); background-size: cover; background-position: center right; }
.reno-cta { position: relative; z-index: 1; padding-block: clamp(56px, 7vw, 108px); }
.reno-cta__title { font-family: var(--font-title); font-optical-sizing: auto; font-weight: 500; font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3rem); line-height: 1.08; letter-spacing: -.015em; color: var(--white); margin-bottom: 16px; }
.reno-cta__title em { font-style: normal; color: var(--orange-3); }
.reno-cta__tags { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 26px; font-family: var(--font-display); font-weight: 500; font-size: .88rem; color: var(--gray-1); }
.reno-cta__tags span { display: inline-flex; align-items: center; gap: 22px; }
.reno-cta__tags span:not(:first-child)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

@media (max-width: 860px) {
  .reno-pick__panel { grid-template-columns: 1fr; }
  .reno-pick__img { min-height: 220px; }
}
/* ============================================================ THERMOPOMPE / CHAUFFAGE */
.thermo-hero .bh-hero__title em { color: var(--cyan-2); font-style: normal; }

/* Barre confiance */
.thermo-trust { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: var(--bg-100); }
.thermo-trust__grid { display:grid; grid-template-columns: repeat(5,1fr); gap:8px; padding-block:22px; }
.thermo-trust__it { display:flex; align-items:center; gap:12px; padding:6px 14px; position:relative; }
.thermo-trust__it:not(:last-child)::after { content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:38px; background:var(--line); }
.thermo-trust__ic { flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb, var(--cyan) 12%, transparent); color:var(--cyan-2); }
.thermo-trust__ic svg { width:20px; height:20px; }
.thermo-trust__it strong { display:block; font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--white); }
.thermo-trust__it span { display:block; font-size:.72rem; color:var(--gray-1); line-height:1.3; margin-top:2px; }

/* Solutions 6 cartes */
.thermo-sol__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.thermo-sol { background:var(--bg-200); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 26px; transition:border-color .3s var(--ease), transform .3s var(--ease); }
.thermo-sol:hover { border-color:color-mix(in srgb, var(--cyan) 40%, var(--line)); transform:translateY(-4px); }
.thermo-sol__ic { width:56px; height:56px; display:grid; place-items:center; border-radius:14px; background:color-mix(in srgb, var(--cyan) 10%, transparent); color:var(--cyan-2); margin-bottom:18px; }
.thermo-sol__ic svg { width:28px; height:28px; }
.thermo-sol h3 { font-family:var(--font-title); font-weight:500; font-size:1.16rem; color:var(--white); margin-bottom:12px; }
.thermo-sol__rule { display:block; width:34px; height:2px; border-radius:2px; background:var(--orange); margin-bottom:12px; }
.thermo-sol p { color:var(--gray-1); font-size:.94rem; line-height:1.6; }

/* Calculateur */
.thermo-calc { display:grid; grid-template-columns:0.9fr 1.35fr; gap:clamp(24px,3vw,48px); align-items:center; }
.thermo-calc__title { font-family:var(--font-title); font-weight:500; font-size:clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); line-height:1.1; color:var(--white); margin-bottom:16px; }
.thermo-calc__title span { color:var(--cyan-2); }
.thermo-calc__intro p { color:var(--gray-1); line-height:1.65; max-width:44ch; }
.thermo-calc__panel { position:relative; background:linear-gradient(160deg, var(--bg-300), var(--bg-200)); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(24px,3vw,36px); overflow:hidden; }
.thermo-calc__panel::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg, var(--orange), var(--cyan)); }
.thermo-calc__bolt { position:absolute; top:22px; right:24px; width:30px; height:30px; color:color-mix(in srgb, var(--orange) 55%, transparent); }
.thermo-calc__kick { font-family:var(--font-display); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--orange-3); line-height:1.5; margin-bottom:22px; }
.thermo-calc__kick strong { color:var(--white); font-weight:600; }
.thermo-calc__row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; }
.thermo-calc__field { flex:1 1 130px; }
.thermo-calc__field label { display:block; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--gray-1); margin-bottom:7px; }
.thermo-calc__sel { position:relative; }
.thermo-calc__sel select { -webkit-appearance:none; appearance:none; width:100%; background:var(--bg-100); border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--white); font-family:var(--font-body); font-size:.95rem; padding:12px 36px 12px 14px; cursor:pointer; }
.thermo-calc__sel select:focus-visible { outline:2px solid var(--cyan); outline-offset:1px; }
.thermo-calc__sel svg { position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--cyan-2); pointer-events:none; }
.thermo-calc__eq { font-family:var(--font-title); font-size:1.6rem; color:var(--gray-1); align-self:center; padding-bottom:8px; }
.thermo-calc__out { flex:1 1 150px; text-align:center; background:color-mix(in srgb, var(--orange) 9%, transparent); border:1px solid color-mix(in srgb, var(--orange) 30%, var(--line)); border-radius:var(--radius-sm); padding:12px 14px; }
.thermo-calc__out-lbl { display:block; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-1); margin-bottom:4px; }
.thermo-calc__out-val { display:block; font-family:var(--font-title); font-weight:600; font-size:1.9rem; line-height:1; color:var(--orange-3); transition:color .2s var(--ease); }
.thermo-calc__out-val small { font-family:var(--font-body); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-1); }
.thermo-calc__out.is-bump .thermo-calc__out-val { color:var(--cyan-2); }
.thermo-calc__note { margin-top:18px; font-size:.72rem; color:var(--gray-2); font-style:italic; }

/* Efficacité & économies */
.thermo-eff__grid { display:grid; grid-template-columns:0.85fr 1.3fr; gap:clamp(24px,3vw,56px); align-items:start; }
.thermo-eff__head p { color:var(--gray-1); line-height:1.65; margin-top:14px; max-width:38ch; }
.thermo-eff__cards { display:grid; gap:16px; }
.thermo-eff { display:flex; gap:18px; align-items:flex-start; background:var(--bg-200); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 24px; }
.thermo-eff__ic { flex:0 0 auto; width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb, var(--cyan) 10%, transparent); color:var(--cyan-2); }
.thermo-eff__ic svg { width:24px; height:24px; }
.thermo-eff h3 { font-family:var(--font-title); font-weight:500; font-size:1.1rem; color:var(--white); margin-bottom:6px; }
.thermo-eff p { color:var(--gray-1); font-size:.92rem; line-height:1.55; }

.faq--wide { max-width:none; }

/* CTA finale */
.thermo-cta { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:clamp(20px,3vw,40px); background:linear-gradient(120deg, color-mix(in srgb, var(--orange) 14%, var(--bg-200)), var(--bg-200)); border:1px solid color-mix(in srgb, var(--orange) 28%, var(--line)); border-radius:var(--radius-lg); padding:clamp(28px,3.4vw,44px); overflow:hidden; }
.thermo-cta__bolt { position:absolute; right:-10px; bottom:-16px; width:150px; height:150px; color:color-mix(in srgb, var(--orange) 12%, transparent); pointer-events:none; }
.thermo-cta__txt { flex:1 1 400px; position:relative; z-index:1; }
.thermo-cta__kick { font-family:var(--font-display); font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; color:var(--cyan-2); margin-bottom:12px; }
.thermo-cta__title { font-family:var(--font-title); font-weight:500; font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); line-height:1.12; color:var(--white); margin-bottom:10px; }
.thermo-cta__sub { color:var(--gray-1); line-height:1.6; max-width:52ch; }
.thermo-cta__call { flex:0 0 auto; position:relative; z-index:1; display:inline-flex; align-items:center; gap:16px; background:var(--orange); color:#fff; border-radius:var(--radius-sm); padding:18px 28px; text-decoration:none; transition:transform .25s var(--ease), box-shadow .25s var(--ease); box-shadow:0 12px 30px -10px color-mix(in srgb, var(--orange) 70%, transparent); }
.thermo-cta__call:hover { transform:translateY(-2px); box-shadow:0 16px 36px -10px color-mix(in srgb, var(--orange) 80%, transparent); }
.thermo-cta__call-ic svg { width:26px; height:26px; }
.thermo-cta__call-txt { display:flex; flex-direction:column; line-height:1.15; }
.thermo-cta__call-txt small { font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; opacity:.9; }
.thermo-cta__call-txt strong { font-family:var(--font-title); font-weight:600; font-size:1.5rem; }

@media (max-width: 960px) {
  .thermo-trust__grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .thermo-trust__it:not(:last-child)::after { display:none; }
  .thermo-sol__grid { grid-template-columns:repeat(2,1fr); }
  .thermo-calc { grid-template-columns:1fr; }
  .thermo-eff__grid { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .thermo-trust__grid { grid-template-columns:1fr; }
  .thermo-sol__grid { grid-template-columns:1fr; }
  .thermo-calc__row { flex-direction:column; align-items:stretch; }
  .thermo-calc__eq { display:none; }
  .thermo-calc__field, .thermo-calc__out { flex:1 1 auto; }
  .thermo-cta__call { width:100%; justify-content:center; }
}
/* ============================================================ SPA / BRANCHEMENT */
.spa-hero .bh-hero__title em { color: var(--cyan-2); font-style: normal; }
.spa-hero__actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:28px; }
.spa-hero__badge { display:inline-flex; align-items:center; gap:12px; }
.spa-hero__badge-ic { width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb, var(--orange) 12%, transparent); color:var(--orange-3); }
.spa-hero__badge-ic svg { width:22px; height:22px; }
.spa-hero__badge-tt { display:flex; flex-direction:column; line-height:1.2; }
.spa-hero__badge-tt strong { font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--white); }
.spa-hero__badge-tt small { font-size:.76rem; color:var(--gray-1); }

/* Pourquoi + financement */
.spa-why { display:grid; grid-template-columns:1.25fr 0.9fr; gap:clamp(24px,3vw,48px); align-items:start; }
.spa-why__intro { color:var(--gray-1); line-height:1.65; margin-top:14px; max-width:52ch; }
.spa-why__list { list-style:none; margin-top:24px; display:grid; gap:14px; }
.spa-why__list li { display:flex; align-items:flex-start; gap:14px; color:var(--gray-1); line-height:1.5; font-size:1rem; }
.spa-why__ck { flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb, var(--cyan) 14%, transparent); color:var(--cyan-2); margin-top:1px; }
.spa-why__ck svg { width:15px; height:15px; }
.spa-why__ck--o { background:color-mix(in srgb, var(--orange) 14%, transparent); color:var(--orange-3); }
.spa-why__fin { background:linear-gradient(160deg, var(--bg-300), var(--bg-200)); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(24px,2.6vw,34px); }
.spa-why__fin-ic { width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb, var(--cyan) 12%, transparent); color:var(--cyan-2); margin-bottom:16px; }
.spa-why__fin-ic svg { width:24px; height:24px; }
.spa-why__fin-kick { font-family:var(--font-display); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-1); margin-bottom:6px; }
.spa-why__fin .gen-fin__logo { display:block; }
.spa-why__fin-txt { color:var(--gray-1); font-size:.94rem; line-height:1.6; margin:12px 0 18px; }
.spa-why__fin-list { list-style:none; display:grid; gap:11px; margin-bottom:22px; }
.spa-why__fin-list li { display:flex; align-items:center; gap:12px; color:var(--gray-1); font-size:.92rem; }
.spa-why__fin .btn--ghost { --b:var(--cyan); color:var(--white); }

@media (max-width: 900px) {
  .spa-why { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .spa-hero__actions { gap:14px; }
  .spa-hero__badge { width:100%; }
}
/* ============================================================ ENTRÉE ÉLECTRIQUE */
.ee-hero .bh-hero__title em { color: var(--cyan-2); font-style: normal; }

/* Calculateur de charge */
.ee-calc { display:grid; grid-template-columns:0.8fr 1.4fr; gap:clamp(24px,3vw,48px); align-items:start; }
.ee-calc__intro p { color:var(--gray-1); line-height:1.65; margin-top:14px; max-width:42ch; }
.ee-calc__panel { position:relative; background:linear-gradient(160deg, var(--bg-300), var(--bg-200)); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(22px,2.6vw,34px); overflow:hidden; }
.ee-calc__panel::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg, var(--cyan), var(--orange)); }
.ee-calc__bolt { position:absolute; top:20px; right:22px; width:28px; height:28px; color:color-mix(in srgb, var(--orange) 50%, transparent); }
.ee-calc__base { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ee-field label { display:block; font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; color:var(--gray-1); margin-bottom:7px; }
.ee-sel { position:relative; }
.ee-sel select { -webkit-appearance:none; appearance:none; width:100%; background:var(--bg-100); border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--white); font-family:var(--font-body); font-size:.92rem; padding:11px 34px 11px 13px; cursor:pointer; }
.ee-sel select:disabled { opacity:.4; cursor:not-allowed; }
.ee-sel select:focus-visible { outline:2px solid var(--cyan); outline-offset:1px; }
.ee-sel svg { position:absolute; right:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--cyan-2); pointer-events:none; }
.ee-calc__sub { font-family:var(--font-display); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-3); margin:24px 0 14px; }
.ee-calc__apps { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.ee-app { background:var(--bg-100); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 13px; transition:border-color .25s var(--ease); }
.ee-app.is-on { border-color:color-mix(in srgb, var(--cyan) 45%, var(--line)); }
.ee-app__top { display:flex; flex-direction:column; margin-bottom:10px; }
.ee-app__name { font-size:.86rem; color:var(--white); font-weight:500; }
.ee-app__kw { font-size:.72rem; color:var(--gray-2); }
.ee-step { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.ee-step__btn { width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center; border-radius:8px; border:1px solid var(--line); background:var(--bg-200); color:var(--white); font-size:1.1rem; line-height:1; cursor:pointer; transition:background .2s var(--ease), border-color .2s var(--ease); }
.ee-step__btn:hover { border-color:var(--cyan); background:color-mix(in srgb, var(--cyan) 12%, var(--bg-200)); }
.ee-step__btn:focus-visible { outline:2px solid var(--cyan); outline-offset:1px; }
.ee-app__q { font-family:var(--font-title); font-weight:600; font-size:1.05rem; color:var(--white); min-width:1.4ch; text-align:center; }
.ee-calc__result { display:flex; flex-wrap:wrap; align-items:stretch; gap:12px; margin-top:22px; }
.ee-res { flex:1 1 180px; border-radius:var(--radius-sm); padding:14px 18px; border:1px solid var(--line); transition:border-color .2s var(--ease); }
.ee-res--c { background:color-mix(in srgb, var(--cyan) 9%, transparent); border-color:color-mix(in srgb, var(--cyan) 30%, var(--line)); }
.ee-res--o { background:color-mix(in srgb, var(--orange) 9%, transparent); border-color:color-mix(in srgb, var(--orange) 30%, var(--line)); }
.ee-res__lbl { display:block; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-1); margin-bottom:4px; }
.ee-res__val { font-family:var(--font-title); font-weight:600; font-size:2rem; line-height:1; }
.ee-res--c .ee-res__val { color:var(--cyan-2); }
.ee-res--o .ee-res__val { color:var(--orange-3); }
.ee-res__val small { font-family:var(--font-body); font-weight:600; font-size:.72rem; letter-spacing:.06em; color:var(--gray-1); }
.ee-calc__reset { flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--gray-1); font-family:var(--font-body); font-size:.85rem; padding:0 18px; cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease); }
.ee-calc__reset:hover { border-color:var(--cyan); color:var(--white); }
.ee-calc__reset svg { width:15px; height:15px; }
.ee-calc__note { margin-top:16px; font-size:.72rem; color:var(--gray-2); font-style:italic; }

/* Entrée vs panneau */
.ee-diff { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.ee-diff__card, .ee-diff__help { background:var(--bg-200); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 26px; }
.ee-diff__ic { width:52px; height:52px; display:grid; place-items:center; border-radius:14px; margin-bottom:16px; }
.ee-diff__ic--c { background:color-mix(in srgb, var(--cyan) 11%, transparent); color:var(--cyan-2); }
.ee-diff__ic--o { background:color-mix(in srgb, var(--orange) 11%, transparent); color:var(--orange-3); }
.ee-diff__ic svg { width:26px; height:26px; }
.ee-diff__card h3, .ee-diff__help h3 { font-family:var(--font-title); font-weight:500; font-size:1.2rem; color:var(--white); margin-bottom:6px; }
.ee-diff__tag { font-size:.8rem; color:var(--cyan-2); margin-bottom:12px; }
.ee-diff__card p:last-child { color:var(--gray-1); font-size:.94rem; line-height:1.6; }
.ee-diff__help { background:linear-gradient(160deg, color-mix(in srgb, var(--orange) 10%, var(--bg-200)), var(--bg-200)); border-color:color-mix(in srgb, var(--orange) 26%, var(--line)); display:flex; flex-direction:column; }
.ee-diff__help p { color:var(--gray-1); font-size:.94rem; line-height:1.6; margin-bottom:auto; }
.ee-diff__help .btn { margin-top:20px; align-self:flex-start; }

/* Capacités */
.ee-cap__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ee-cap { background:var(--bg-200); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 26px; }
.ee-cap--feat { border-color:color-mix(in srgb, var(--cyan) 40%, var(--line)); box-shadow:0 0 0 1px color-mix(in srgb, var(--cyan) 20%, transparent) inset; }
.ee-cap__amp { font-family:var(--font-title); font-weight:600; color:var(--cyan-2); font-size:1.05rem; letter-spacing:.06em; margin-bottom:16px; }
.ee-cap__amp strong { font-size:2.5rem; font-weight:600; margin-right:4px; }
.ee-cap__for { font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--orange-3); margin-bottom:12px; }
.ee-cap__list { list-style:none; display:grid; gap:9px; }
.ee-cap__list li { position:relative; padding-left:20px; color:var(--gray-1); font-size:.92rem; line-height:1.4; }
.ee-cap__list li::before { content:""; position:absolute; left:0; top:.5em; width:7px; height:7px; border-radius:2px; background:var(--cyan); }
.ee-cap__note { display:flex; align-items:center; gap:12px; margin-top:18px; background:var(--bg-200); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 20px; color:var(--gray-1); font-size:.92rem; line-height:1.5; }
.ee-cap__note strong { color:var(--white); }
.ee-cap__note-ic { flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:color-mix(in srgb, var(--orange) 12%, transparent); color:var(--orange-3); }
.ee-cap__note-ic svg { width:16px; height:16px; }

/* Scope: conformité + travaux */
.ee-scope { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,52px); align-items:start; }
.ee-scope__badges { display:grid; gap:14px; margin-top:22px; }
.ee-scope__badge { display:flex; gap:14px; align-items:flex-start; }
.ee-scope__bic { flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center; border-radius:11px; background:color-mix(in srgb, var(--cyan) 10%, transparent); color:var(--cyan-2); }
.ee-scope__bic svg { width:21px; height:21px; }
.ee-scope__badge strong { display:block; font-family:var(--font-display); font-weight:600; font-size:.95rem; color:var(--white); margin-bottom:2px; }
.ee-scope__badge span { color:var(--gray-1); font-size:.86rem; line-height:1.45; }
.ee-scope__right { background:var(--bg-200); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(24px,2.6vw,34px); }
.ee-scope__right h3 { font-family:var(--font-title); font-weight:500; font-size:1.2rem; color:var(--white); margin-bottom:18px; }
.ee-scope__list { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
.ee-scope__list li { position:relative; padding-left:26px; color:var(--gray-1); font-size:.92rem; line-height:1.4; }
.ee-scope__list li::before { content:""; position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:color-mix(in srgb, var(--cyan) 16%, transparent); }
.ee-scope__list li::after { content:""; position:absolute; left:5px; top:6px; width:6px; height:3px; border-left:1.6px solid var(--cyan-2); border-bottom:1.6px solid var(--cyan-2); transform:rotate(-45deg); }

@media (max-width: 1000px) {
  .ee-calc { grid-template-columns:1fr; }
  .ee-diff { grid-template-columns:1fr; }
  .ee-cap__grid { grid-template-columns:1fr; }
  .ee-scope { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
  .ee-calc__base { grid-template-columns:1fr; }
  .ee-calc__apps { grid-template-columns:1fr 1fr; }
  .ee-scope__list { grid-template-columns:1fr; }
}
@media (max-width: 460px) {
  .ee-calc__apps { grid-template-columns:1fr; }
}
/* ============================================================ PISCINE / BRANCHEMENT */
.pool-hero .bh-hero__title em { color: var(--cyan-2); font-style: normal; }

/* Sélecteur d'équipement (signature) */
.pool-eq { display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(24px,3vw,44px); align-items:stretch; }
.pool-eq__panel { display:flex; flex-direction:column; }
.pool-eq__tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.pool-eq__tab { font-family:var(--font-body); font-size:.9rem; color:var(--gray-1); background:var(--bg-200); border:1px solid var(--line); border-radius:999px; padding:9px 16px; cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.pool-eq__tab:hover { color:var(--white); border-color:color-mix(in srgb, var(--cyan) 40%, var(--line)); }
.pool-eq__tab.is-active { color:var(--bg-100); background:var(--cyan); border-color:var(--cyan); font-weight:600; }
.pool-eq__tab:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.pool-eq__detail { display:flex; gap:18px; align-items:flex-start; background:linear-gradient(160deg, var(--bg-300), var(--bg-200)); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; flex:1 1 auto; transition:opacity .25s var(--ease), transform .25s var(--ease); }
.pool-eq__detail.is-swap { opacity:0; transform:translateY(6px); }
.pool-eq__ic { flex:0 0 auto; width:54px; height:54px; display:grid; place-items:center; border-radius:14px; background:color-mix(in srgb, var(--cyan) 11%, transparent); color:var(--cyan-2); }
.pool-eq__ic svg { width:28px; height:28px; }
.pool-eq__body h3 { font-family:var(--font-title); font-weight:500; font-size:1.25rem; color:var(--white); margin-bottom:8px; }
.pool-eq__body p { color:var(--gray-1); line-height:1.6; font-size:.96rem; margin-bottom:14px; }
.pool-eq__spec { display:inline-block; font-family:var(--font-display); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--orange-3); background:color-mix(in srgb, var(--orange) 10%, transparent); border:1px solid color-mix(in srgb, var(--orange) 26%, var(--line)); border-radius:999px; padding:6px 14px; }
.pool-eq__note { display:flex; align-items:center; gap:12px; margin-top:16px; color:var(--gray-1); font-size:.92rem; line-height:1.5; }
.pool-eq__note strong { color:var(--cyan-2); font-weight:600; }
.pool-eq__note-ic { flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:color-mix(in srgb, var(--orange) 12%, transparent); color:var(--orange-3); }
.pool-eq__note-ic svg { width:16px; height:16px; }
.pool-eq__media { display:grid; grid-template-rows:1fr 1fr; gap:14px; min-height:340px; }
.pool-eq__photo { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); }
.pool-eq__photo img { width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width: 940px) {
  .pool-eq { grid-template-columns:1fr; }
  .pool-eq__media { grid-template-rows:none; grid-template-columns:1fr 1fr; min-height:0; }
  .pool-eq__photo img { height:220px; }
}
@media (max-width: 540px) {
  .pool-eq__detail { flex-direction:column; }
  .pool-eq__media { grid-template-columns:1fr; }
}
/* ============================================================ PANNEAUX SOLAIRES */
.solar-hero .bh-hero__title em { color: var(--cyan-2); font-style: normal; }

/* Vérificateur d'admissibilité (signature) */
.solar-fit { display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(24px,3vw,48px); align-items:center; }
.solar-fit__intro p { color:var(--gray-1); line-height:1.65; margin-top:14px; max-width:42ch; }
.solar-fit__panel { background:linear-gradient(160deg, var(--bg-300), var(--bg-200)); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(24px,2.8vw,36px); }
.solar-fit__list { display:grid; gap:10px; }
.solar-fit__check { display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:var(--bg-100); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; cursor:pointer; color:var(--gray-1); font-family:var(--font-body); font-size:.95rem; transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.solar-fit__check:hover { border-color:color-mix(in srgb, var(--cyan) 35%, var(--line)); color:var(--white); }
.solar-fit__check:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.solar-fit__box { flex:0 0 auto; width:24px; height:24px; display:grid; place-items:center; border-radius:7px; border:1.5px solid var(--line); color:transparent; transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.solar-fit__box svg { width:15px; height:15px; }
.solar-fit__check.is-on { border-color:color-mix(in srgb, var(--cyan) 50%, var(--line)); color:var(--white); background:color-mix(in srgb, var(--cyan) 8%, var(--bg-100)); }
.solar-fit__check.is-on .solar-fit__box { background:var(--cyan); border-color:var(--cyan); color:var(--bg-100); }
.solar-fit__result { margin:22px 0; }
.solar-fit__meter { height:8px; border-radius:99px; background:var(--bg-100); border:1px solid var(--line); overflow:hidden; }
.solar-fit__fill { display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg, var(--orange), var(--cyan)); transition:width .45s var(--ease); }
.solar-fit__verdict { margin-top:12px; color:var(--gray-1); font-size:.95rem; line-height:1.5; transition:color .2s var(--ease); }
.solar-fit__result[data-level="3"] .solar-fit__verdict, .solar-fit__result[data-level="4"] .solar-fit__verdict { color:var(--cyan-2); font-weight:500; }

/* Financement (avec photo) */
.solar-fin { display:grid; grid-template-columns:1.1fr 0.9fr; background:linear-gradient(160deg, color-mix(in srgb, var(--cyan) 8%, var(--bg-200)), var(--bg-200)); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.solar-fin__text { padding:clamp(28px,3vw,44px); }
.solar-fin__text p { color:var(--gray-1); line-height:1.65; margin-top:12px; max-width:46ch; }
.solar-fin__price { display:flex; align-items:baseline; gap:8px; margin:22px 0; }
.solar-fin__from { font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--gray-1); }
.solar-fin__amt { font-family:var(--font-title); font-weight:600; font-size:3.2rem; line-height:1; color:var(--orange-3); }
.solar-fin__per { font-size:.9rem; color:var(--gray-1); }
.solar-fin__fine { font-size:.72rem; color:var(--gray-2); margin-top:14px; }
.solar-fin__media { position:relative; min-height:260px; }
.solar-fin__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Garanties (3 items) */
.solar-guar { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.solar-guar__it { display:flex; gap:16px; align-items:flex-start; }
.solar-guar__ic { flex:0 0 auto; width:52px; height:52px; display:grid; place-items:center; border-radius:14px; background:color-mix(in srgb, var(--cyan) 10%, transparent); color:var(--cyan-2); }
.solar-guar__ic svg { width:26px; height:26px; }
.solar-guar__it h3 { font-family:var(--font-title); font-weight:500; font-size:1.12rem; color:var(--white); margin-bottom:6px; }
.solar-guar__it p { color:var(--gray-1); font-size:.92rem; line-height:1.55; }

@media (max-width: 940px) {
  .solar-fit { grid-template-columns:1fr; }
  .solar-fin { grid-template-columns:1fr; }
  .solar-fin__media { min-height:220px; order:-1; }
  .solar-guar { grid-template-columns:1fr; gap:20px; }
}
/* ============================================================ ÉCLAIRAGE */
.light-hero__cta { display:flex; flex-wrap:wrap; align-items:center; gap:clamp(18px,3vw,30px); margin-top:26px; }
.light-toggle { display:flex; align-items:center; gap:12px; }
.light-toggle__lbl { font-size:.82rem; color:var(--gray-1); max-width:13ch; line-height:1.3; }
.light-toggle__switch { display:inline-flex; padding:3px; background:var(--bg-200); border:1px solid var(--line); border-radius:999px; }
.light-toggle__btn { font-family:var(--font-body); font-size:.82rem; color:var(--gray-1); background:transparent; border:0; border-radius:999px; padding:7px 16px; cursor:pointer; transition:color .2s var(--ease), background .2s var(--ease); }
.light-toggle__btn:hover { color:var(--white); }
.light-toggle__btn:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
.light-toggle__btn.is-active { color:var(--bg-100); background:var(--orange); font-weight:600; }
.light-toggle__btn.is-active:hover { color:var(--bg-100); }

.light-hero__media img { transition: filter .7s var(--ease); }
.light-hero__media.is-off img { filter: brightness(.34) saturate(.55) contrast(1.12); }
@media (prefers-reduced-motion: reduce) { .light-hero__media img { transition:none; } }
@media (max-width: 560px) { .light-hero__cta { gap:16px; } .light-toggle { width:100%; } }
/* Cartes photo (types d'éclairage) */
.light-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.light-card { position:relative; aspect-ratio:4/3.2; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); isolation:isolate; }
.light-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease), filter .5s var(--ease); }
.light-card::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(6,7,9,.94) 6%, rgba(6,7,9,.5) 38%, rgba(6,7,9,.05) 70%); }
.light-card:hover img { transform:scale(1.05); filter:brightness(1.08); }
.light-card__ic { position:absolute; top:14px; left:14px; z-index:2; width:40px; height:40px; display:grid; place-items:center; border-radius:11px; background:color-mix(in srgb, var(--bg-000) 55%, transparent); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); border:1px solid color-mix(in srgb, var(--cyan) 30%, transparent); color:var(--cyan-2); }
.light-card__ic svg { width:20px; height:20px; }
.light-card__cap { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px 22px; }
.light-card__cap h3 { font-family:var(--font-title); font-weight:500; font-size:1.18rem; color:var(--white); margin-bottom:4px; letter-spacing:-.01em; }
.light-card__cap p { color:var(--gray-1); font-size:.9rem; line-height:1.4; }

@media (max-width: 860px) { .light-cards { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px) { .light-cards { grid-template-columns:1fr; } .light-card { aspect-ratio:16/10; } }
/* ============================================================ PANNEAU ÉLECTRIQUE */
.panel-hero .bh-hero__title em { color: var(--cyan-2); font-style: normal; }

/* Auto-diagnostic (quand remplacer) */
.panel-diag { display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(24px,3vw,48px); align-items:stretch; }
.panel-diag__intro { color:var(--gray-1); line-height:1.65; margin-top:14px; max-width:52ch; }
.panel-diag__signs { display:grid; gap:10px; margin:24px 0 20px; }
.panel-sign { display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:var(--bg-200); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; cursor:pointer; color:var(--gray-1); font-family:var(--font-body); font-size:.95rem; transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.panel-sign:hover { color:var(--white); border-color:color-mix(in srgb, var(--orange) 35%, var(--line)); }
.panel-sign:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
.panel-sign__box { flex:0 0 auto; width:24px; height:24px; display:grid; place-items:center; border-radius:7px; border:1.5px solid var(--line); color:transparent; transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.panel-sign__box svg { width:14px; height:14px; }
.panel-sign.is-on { color:var(--white); border-color:color-mix(in srgb, var(--orange) 50%, var(--line)); background:color-mix(in srgb, var(--orange) 8%, var(--bg-200)); }
.panel-sign.is-on .panel-sign__box { background:var(--orange); border-color:var(--orange); color:#fff; }
.panel-diag__verdict { display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--bg-200); margin-bottom:22px; transition:border-color .25s var(--ease), background .25s var(--ease); }
.panel-diag__badge { flex:0 0 auto; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; min-width:76px; padding:8px 12px; border-radius:12px; background:color-mix(in srgb, var(--cyan) 12%, transparent); color:var(--cyan-2); line-height:1.05; transition:background .25s var(--ease), color .25s var(--ease); }
.panel-diag__badge strong { font-family:var(--font-title); font-weight:600; font-size:1.6rem; }
.panel-diag__badge span { font-size:.6rem; letter-spacing:.04em; text-transform:uppercase; color:var(--gray-1); margin-top:2px; }
.panel-diag__verdict p { color:var(--gray-1); font-size:.95rem; line-height:1.5; }
.panel-diag__verdict[data-level="2"], .panel-diag__verdict[data-level="3"] { border-color:color-mix(in srgb, var(--orange) 34%, var(--line)); background:color-mix(in srgb, var(--orange) 7%, var(--bg-200)); }
.panel-diag__verdict[data-level="2"] .panel-diag__badge, .panel-diag__verdict[data-level="3"] .panel-diag__badge { background:color-mix(in srgb, var(--orange) 15%, transparent); color:var(--orange-3); }
.panel-diag__verdict[data-level="3"] p { color:var(--white); }
.panel-diag__photo { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); min-height:320px; }
.panel-diag__photo img { width:100%; height:100%; object-fit:cover; display:block; }

/* Solutions 4-col */
.panel-sol__grid { grid-template-columns:repeat(4,1fr); }

/* Capacité band */
.panel-cap { display:grid; grid-template-columns:0.85fr 1.15fr; background:linear-gradient(160deg, color-mix(in srgb, var(--cyan) 8%, var(--bg-200)), var(--bg-200)); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.panel-cap__media { position:relative; min-height:240px; }
.panel-cap__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.panel-cap__text { padding:clamp(28px,3vw,44px); }
.panel-cap__amp { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-title); font-weight:600; font-size:1.5rem; color:var(--cyan-2); margin-bottom:8px; }
.panel-cap__amp span { color:var(--orange-3); }
.panel-cap__text p { color:var(--gray-1); line-height:1.65; margin:12px 0 20px; max-width:50ch; }
.panel-cap__text .btn--ghost { --b:var(--cyan); color:var(--white); }

@media (max-width: 960px) {
  .panel-diag { grid-template-columns:1fr; }
  .panel-diag__photo { min-height:260px; order:-1; }
  .panel-sol__grid { grid-template-columns:repeat(2,1fr); }
  .panel-cap { grid-template-columns:1fr; }
  .panel-cap__media { min-height:220px; order:-1; }
}
@media (max-width: 520px) { .panel-sol__grid { grid-template-columns:1fr; } }

/* ============================================ NOS SERVICES — accueil (grille immersive, raffinée) */
.svcg { position:relative; overflow:hidden; background-color:#08080b; background-repeat:no-repeat; background-position:center; background-size:auto, auto, cover, cover, cover;
  background-image:
    repeating-linear-gradient(119deg, transparent 0 54px, rgba(140,170,200,.03) 54px 55px),
    repeating-linear-gradient(61deg, transparent 0 66px, rgba(140,170,200,.02) 66px 67px),
    radial-gradient(58% 52% at 90% 2%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 60%),
    radial-gradient(50% 50% at 3% 98%, color-mix(in srgb, var(--orange) 12%, transparent), transparent 60%),
    radial-gradient(135% 120% at 50% -14%, #0e0f14, #070709 66%); }
/* Stries néon ORANGE — coin haut-gauche */
.svcg::before { content:""; position:absolute; left:-5%; top:-30%; width:46%; height:150%; z-index:0; pointer-events:none;
  background:
    linear-gradient(57deg, transparent 47.2%, color-mix(in srgb, var(--orange) 95%, transparent) 47.9%, transparent 48.8%),
    linear-gradient(57deg, transparent 51.8%, color-mix(in srgb, var(--orange) 60%, transparent) 52.4%, transparent 53.2%),
    linear-gradient(57deg, transparent 43.2%, color-mix(in srgb, var(--orange) 42%, transparent) 43.7%, transparent 44.4%);
  filter:blur(.5px) drop-shadow(0 0 13px color-mix(in srgb, var(--orange) 60%, transparent));
  opacity:.6; -webkit-mask-image:linear-gradient(92deg, #000 4%, #000 26%, transparent 78%); mask-image:linear-gradient(92deg, #000 4%, #000 26%, transparent 78%); }
/* Stries néon CYAN — droite (chevron angulaire) */
.svcg::after { content:""; position:absolute; right:-7%; top:-32%; width:54%; height:164%; z-index:0; pointer-events:none;
  background:
    linear-gradient(-55deg, transparent 46.4%, color-mix(in srgb, var(--cyan) 95%, transparent) 47.1%, transparent 48%),
    linear-gradient(-55deg, transparent 52.2%, color-mix(in srgb, var(--cyan) 60%, transparent) 52.8%, transparent 53.7%),
    linear-gradient(-55deg, transparent 39.8%, color-mix(in srgb, var(--cyan) 80%, transparent) 40.4%, transparent 41.3%),
    linear-gradient(-55deg, transparent 58%, color-mix(in srgb, var(--cyan) 46%, transparent) 58.5%, transparent 59.4%);
  filter:blur(.5px) drop-shadow(0 0 16px color-mix(in srgb, var(--cyan) 58%, transparent));
  opacity:.58; -webkit-mask-image:linear-gradient(268deg, #000 3%, #000 24%, transparent 74%); mask-image:linear-gradient(268deg, #000 3%, #000 24%, transparent 74%); }
.svcg > .container { max-width:min(1560px, 94vw); position:relative; z-index:1; }

/* En-tête */
.svcg-head { text-align:center; margin-bottom:clamp(28px,3.6vw,46px); }
.svcg-eyebrow { display:block; font-family:var(--font-display); font-weight:600; font-size:.8rem; letter-spacing:.46em; text-transform:uppercase; color:var(--cyan-2); padding-left:.46em; }
.svcg-title { font-family:var(--font-title); font-optical-sizing:auto; font-weight:500; font-size:clamp(2rem, 1.1rem + 3.8vw, 3.9rem); line-height:1.06; letter-spacing:-.015em; text-transform:none; color:var(--white); margin:14px 0 0; }
.svcg-title__c { color:var(--cyan-2); text-shadow:0 0 30px color-mix(in srgb, var(--cyan) 42%, transparent); }
.svcg-title__o { color:var(--orange-3); text-shadow:0 0 30px color-mix(in srgb, var(--orange) 42%, transparent); }
.svcg-bolt { display:block; width:32px; height:32px; margin:16px auto 0; color:var(--orange-3); filter:drop-shadow(0 0 12px color-mix(in srgb, var(--orange) 60%, transparent)); }
.svcg-bolt svg { width:100%; height:100%; }
.svcg-sub { font-family:var(--font-display); font-weight:500; font-size:clamp(.8rem,.7rem + .3vw,.94rem); letter-spacing:.22em; text-transform:uppercase; color:var(--gray-1); margin-top:16px; }

/* Tabs type */
.svcg-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-bottom:clamp(28px,3.2vw,44px); }
.svcg-tab { display:inline-flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:600; font-size:.84rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gray-1); text-decoration:none; padding:13px 28px; border-radius:999px; border:1px solid var(--line); background:color-mix(in srgb, var(--bg-200) 55%, transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.svcg-tab__ic { display:inline-grid; place-items:center; color:var(--cyan-2); }
.svcg-tab__ic svg { width:20px; height:20px; }
.svcg-tab:hover { color:var(--white); transform:translateY(-2px); border-color:color-mix(in srgb, var(--orange) 45%, var(--line)); }
.svcg-tab.is-active { color:var(--white); border-color:color-mix(in srgb, var(--orange) 60%, transparent); background:linear-gradient(160deg, color-mix(in srgb, var(--orange) 17%, var(--bg-200)), color-mix(in srgb, var(--bg-200) 70%, transparent)); box-shadow:0 0 0 1px color-mix(in srgb, var(--orange) 30%, transparent), 0 12px 32px -12px color-mix(in srgb, var(--orange) 60%, transparent); }
.svcg-tab.is-active .svcg-tab__ic { color:var(--orange-3); }

/* Grille — 6 x 2 */
.svcg-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }

/* Carte raffinée */
.svcg-card { position:relative; display:flex; flex-direction:column; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(180deg, var(--bg-200), var(--bg-100)); text-decoration:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.03); transition:transform .38s var(--ease), border-color .38s var(--ease), box-shadow .38s var(--ease); }
.svcg-card:hover { transform:translateY(-6px); border-color:color-mix(in srgb, var(--cyan) 45%, var(--line)); box-shadow:0 24px 48px -24px rgba(0,0,0,.78), 0 0 0 1px color-mix(in srgb, var(--cyan) 22%, transparent), 0 0 38px -16px color-mix(in srgb, var(--cyan) 48%, transparent); }
.svcg-card__media { position:relative; aspect-ratio:4/3; overflow:hidden; }
.svcg-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .65s var(--ease); }
.svcg-card:hover .svcg-card__media img { transform:scale(1.07); }
.svcg-card__media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--bg-200) 55%, transparent) 74%, var(--bg-200) 100%); }
.svcg-card__pop { position:absolute; top:12px; left:12px; z-index:3; display:inline-flex; align-items:center; gap:5px; font-family:var(--font-display); font-weight:700; font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; color:#fff; background:linear-gradient(135deg, var(--orange-2), var(--orange)); padding:5px 13px; border-radius:999px; box-shadow:0 8px 18px -5px color-mix(in srgb, var(--orange) 70%, transparent); }
.svcg-card__pop svg { width:11px; height:11px; }
.svcg-card__body { position:relative; z-index:2; flex:1 1 auto; display:flex; flex-direction:column; align-items:flex-start; padding:0 17px 18px; margin-top:-26px; }
.svcg-card__ic { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:color-mix(in srgb, var(--bg-100) 74%, transparent); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); border:1px solid color-mix(in srgb, var(--cyan) 40%, var(--line)); color:var(--cyan-2); box-shadow:0 10px 24px -8px rgba(0,0,0,.72), 0 0 0 5px color-mix(in srgb, var(--bg-100) 52%, transparent); margin-bottom:14px; transition:transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease); }
.svcg-card__ic svg { width:25px; height:25px; }
.svcg-card:hover .svcg-card__ic { transform:translateY(-2px) scale(1.06); border-color:color-mix(in srgb, var(--cyan) 62%, transparent); box-shadow:0 12px 28px -8px rgba(0,0,0,.72), 0 0 0 5px color-mix(in srgb, var(--bg-100) 52%, transparent), 0 0 24px -6px color-mix(in srgb, var(--cyan) 62%, transparent); }
.svcg-card__name { font-family:var(--font-title); font-optical-sizing:auto; font-weight:500; font-size:1.06rem; letter-spacing:-.01em; text-transform:none; line-height:1.22; color:var(--white); }
.svcg-card__more { margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:9px; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-1); transition:color .28s var(--ease); }
.svcg-card__more svg { width:24px; height:24px; padding:6px; border-radius:50%; border:1px solid var(--line); color:var(--orange-3); flex:0 0 auto; transition:background .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease), transform .28s var(--ease); }
.svcg-card:hover .svcg-card__more { color:var(--white); }
.svcg-card:hover .svcg-card__more svg { background:var(--orange); border-color:var(--orange); color:#fff; transform:translateX(3px); }

/* Barre contact */
.svcg-contact { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:clamp(18px,3vw,36px); margin-top:30px; padding:24px clamp(24px,3vw,36px); border-radius:18px; border:1px solid color-mix(in srgb, var(--orange) 24%, var(--line)); background:linear-gradient(120deg, color-mix(in srgb, var(--orange) 9%, var(--bg-200)), var(--bg-200) 60%); overflow:hidden; }
.svcg-contact::after { content:""; position:absolute; right:-30px; top:-40px; width:220px; height:220px; pointer-events:none; background:radial-gradient(circle, color-mix(in srgb, var(--orange) 14%, transparent), transparent 62%); }
.svcg-contact__txt { display:flex; align-items:center; gap:15px; flex:1 1 320px; position:relative; z-index:1; }
.svcg-contact__bolt { flex:0 0 auto; width:36px; height:36px; color:var(--orange-3); filter:drop-shadow(0 0 10px color-mix(in srgb, var(--orange) 55%, transparent)); }
.svcg-contact__bolt svg { width:100%; height:100%; }
.svcg-contact__txt strong { display:block; font-family:var(--font-title); font-optical-sizing:auto; font-weight:500; font-size:1.3rem; letter-spacing:-.01em; text-transform:none; color:var(--white); }
.svcg-contact__txt span { display:block; font-size:.88rem; color:var(--gray-1); margin-top:3px; }
.svcg-contact__phone { display:flex; align-items:center; gap:12px; text-decoration:none; flex:0 0 auto; position:relative; z-index:1; }
.svcg-contact__pic { flex:0 0 auto; color:var(--orange-3); }
.svcg-contact__pic svg { width:26px; height:26px; }
.svcg-contact__num strong { display:block; font-family:var(--font-title); font-weight:600; font-size:1.55rem; color:var(--white); line-height:1.05; }
.svcg-contact__num small { display:block; font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--gray-1); }
.svcg-contact__cta { flex:0 0 auto; margin-left:auto; position:relative; z-index:1; --b:var(--orange); background:var(--orange); color:#fff; border-color:var(--orange); }
.svcg-contact__cta:hover { background:color-mix(in srgb, var(--orange) 88%, #000); border-color:var(--orange); box-shadow:0 14px 30px -8px color-mix(in srgb, var(--orange) 72%, transparent); }
.svcg-contact__cta svg { width:16px; height:16px; }

@media (max-width: 1240px) { .svcg-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width: 880px) { .svcg-grid { grid-template-columns:repeat(3,1fr); } .svcg-contact__cta { margin-left:0; } }
@media (max-width: 600px) { .svcg-grid { grid-template-columns:repeat(2,1fr); } .svcg-contact__txt { flex-basis:100%; } .svcg-contact__cta { width:100%; justify-content:center; } }
@media (max-width: 400px) { .svcg-grid { grid-template-columns:1fr; } }
/* Révélation au survol — brève explication des travaux */
.svcg-card__reveal { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:20px 19px; border-radius:18px; background:linear-gradient(158deg, color-mix(in srgb, var(--cyan) 13%, var(--bg-200)) 0%, var(--bg-100) 62%); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cyan) 22%, transparent), inset 0 2px 0 -1px color-mix(in srgb, var(--cyan) 45%, transparent); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s var(--ease), visibility .3s var(--ease); }
.svcg-card:hover .svcg-card__reveal, .svcg-card:focus-visible .svcg-card__reveal { opacity:1; visibility:visible; }
.svcg-card__reveal-in { transform:translateY(12px); transition:transform .36s var(--ease); }
.svcg-card:hover .svcg-card__reveal-in, .svcg-card:focus-visible .svcg-card__reveal-in { transform:translateY(0); }
.svcg-card__reveal strong { display:block; font-family:var(--font-title); font-optical-sizing:auto; font-weight:500; font-size:1.12rem; letter-spacing:-.01em; text-transform:none; color:var(--white); line-height:1.18; }
.svcg-card__reveal-rule { display:block; width:34px; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--orange), var(--cyan)); margin:10px 0 11px; }
.svcg-card__reveal p { color:var(--gray-1); font-size:.8rem; line-height:1.5; }
.svcg-card__reveal-more { display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-family:var(--font-display); font-weight:600; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--orange-3); }
.svcg-card__reveal-more svg { width:14px; height:14px; }
@media (prefers-reduced-motion: reduce) { .svcg-card__reveal-in { transform:none; } }
/* ============================================================ APPEL DE SERVICE */
.aps-hero .bh-hero__title em { color: var(--cyan-2); font-style: normal; }
.aps-hero__media img { object-position: 84% center; }
.aps-hero__phone { display:inline-flex; align-items:center; gap:12px; margin-top:20px; text-decoration:none; }
.aps-hero__phone-ic { flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb, var(--orange) 12%, transparent); color:var(--orange-3); }
.aps-hero__phone-ic svg { width:22px; height:22px; }
.aps-hero__phone-tt { display:flex; flex-direction:column; line-height:1.2; }
.aps-hero__phone-tt strong { font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--white); }
.aps-hero__phone-tt small { font-size:.8rem; color:var(--gray-1); }
.aps-hero__pts { list-style:none; display:flex; flex-wrap:wrap; gap:11px 22px; margin-top:26px; }
.aps-hero__pts li { display:inline-flex; align-items:center; gap:9px; font-size:.86rem; color:var(--gray-1); }
.aps-hero__pic { flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:color-mix(in srgb, var(--cyan) 11%, transparent); color:var(--cyan-2); }
.aps-hero__pic svg { width:16px; height:16px; }

.aps-steps__note { display:flex; align-items:center; justify-content:center; gap:11px; max-width:660px; margin:clamp(24px,3vw,36px) auto 0; padding:15px 22px; border-radius:var(--radius-lg); border:1px solid color-mix(in srgb, var(--cyan) 26%, var(--line)); background:color-mix(in srgb, var(--cyan) 6%, var(--bg-200)); color:var(--gray-1); font-size:.92rem; line-height:1.5; }
.aps-steps__note-ic { flex:0 0 auto; color:var(--cyan-2); }
.aps-steps__note-ic svg { width:22px; height:22px; }

.aps-cta { display:grid; grid-template-columns:1fr 0.92fr; gap:clamp(28px,4vw,58px); align-items:center; }
.aps-cta__left .h-title { margin-top:12px; }
.aps-cta__left .h-title em { color:var(--cyan-2); font-style:normal; }
.aps-cta__pts { list-style:none; display:grid; gap:14px; margin:24px 0 26px; }
.aps-cta__pts li { display:flex; align-items:center; gap:14px; }
.aps-cta__pic { flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb, var(--cyan) 10%, transparent); color:var(--cyan-2); }
.aps-cta__pic svg { width:22px; height:22px; }
.aps-cta__pts strong { display:block; font-family:var(--font-display); font-weight:600; font-size:.96rem; color:var(--white); }
.aps-cta__pts span { display:block; font-size:.84rem; color:var(--gray-1); }
.aps-cta__call { display:inline-flex; }

.aps-form { background:linear-gradient(160deg, var(--bg-300), var(--bg-200)); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(24px,3vw,38px); }
.aps-form__title { font-family:var(--font-title); font-weight:500; font-size:1.35rem; color:var(--white); margin-bottom:18px; }

@media (max-width: 900px) { .aps-cta { grid-template-columns:1fr; } }
/* ============================================ MARQUE VOLTEN + HÉROS BRANDÉS */
/* Logo néon sur fond noir : le screen fait disparaître le noir, garde le néon */
.brand__logo { mix-blend-mode: screen; }

/* Héros : glows orange + cyan (couleurs de marque) + fine texture géométrique */
.bh-hero::before {
  background:
    radial-gradient(62% 82% at -5% -6%, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 56%),
    radial-gradient(58% 80% at 106% 110%, color-mix(in srgb, var(--orange) 20%, transparent), transparent 56%),
    radial-gradient(44% 54% at 15% 104%, color-mix(in srgb, var(--orange) 12%, transparent), transparent 60%),
    repeating-linear-gradient(119deg, transparent 0 58px, rgba(140,170,200,.022) 58px 59px);
}

/* ================================================= TYPOGRAPHIE UNIFIÉE
   Tous les TITRES en Fraunces (certaines cartes utilisaient encore un sans).
   Les libellés / chiffres / pastilles passent en Inter via --font-display. */
.why__h,
.work__title,
.svc-feat__title,
.process__step h3,
.faq__item summary,
.svc2__title,
.bh-feat h3,
.bh-card__body h3,
.bh-step h3,
.reno-sc__body h3,
.reno-pick__h {
  font-family: var(--font-title);
  letter-spacing: -.01em;
}

/* ============================================ BARRE DE NAV — MOBILE
   Barre + logo légèrement réduits sur petits écrans (garde de l'espace). */
@media (max-width: 640px) {
  :root { --nav-h: 76px; }
  .brand__logo { height: 58px; }
}

/* ================================= OFFRE « SOUMISSION » — fiche ancrée
   Injectée par script.js sur les pages de service. NE BLOQUE PAS la page :
   se glisse doucement dans le coin bas-gauche (le clavardage est à droite),
   sans voile ni verrou de défilement. Se déplie au clic pour le formulaire. */
.qoffer {
  position: fixed; left: clamp(14px, 3vw, 26px); bottom: clamp(14px, 3vw, 26px);
  z-index: 94; width: min(340px, calc(100vw - 28px));
  background: linear-gradient(168deg, var(--bg-300), var(--bg-200) 66%);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.92), 0 0 0 1px color-mix(in srgb, var(--cyan) 8%, transparent);
  padding: 18px 18px 16px; overflow: hidden;
  transform: translateY(24px); opacity: 0; pointer-events: none;
  transition: transform .55s var(--ease), opacity .55s var(--ease);
}
.qoffer[hidden] { display: none; }
.qoffer.is-in { transform: none; opacity: 1; pointer-events: auto; }
.qoffer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--orange), var(--cyan)); }
.qoffer__close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--gray-2); border: 1px solid transparent; transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
.qoffer__close:hover { color: var(--white); background: color-mix(in srgb, var(--bg-100) 70%, transparent); border-color: var(--line); }
.qoffer__close svg { width: 15px; height: 15px; }
.qoffer__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan-2); }
.qoffer__eyebrow svg { width: 13px; height: 13px; }
.qoffer__title { margin-top: 9px; font-family: var(--font-title); font-optical-sizing: auto; font-weight: 500; font-size: 1.22rem; line-height: 1.16; letter-spacing: -.01em; color: var(--white); padding-right: 22px; }
.qoffer__title b { color: var(--orange-3); font-weight: 500; }
.qoffer__note { margin-top: 7px; font-size: .84rem; line-height: 1.45; color: var(--gray-1); }
.qoffer__note b { color: var(--cyan-2); font-weight: 600; }
.qoffer__cta { margin-top: 14px; width: 100%; justify-content: center; padding: 12px 18px; --b: var(--orange); background: var(--orange); color: #fff; border-color: var(--orange); }
.qoffer__cta:hover { background: color-mix(in srgb, var(--orange) 88%, #000); box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--orange) 70%, transparent); }
.qoffer__cta svg { width: 16px; height: 16px; }
.qoffer__form { display: grid; gap: 10px; margin-top: 14px; }
.qoffer__form[hidden] { display: none; }
.qoffer__field { display: flex; flex-direction: column; gap: 5px; }
.qoffer__field label { font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-2); }
.qoffer__field input { width: 100%; font-family: var(--font-body); font-size: .92rem; color: var(--white); background: var(--bg-100); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.qoffer__field input:focus { outline: none; border-color: color-mix(in srgb, var(--cyan) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 16%, transparent); }
.qoffer__send { margin-top: 2px; width: 100%; justify-content: center; padding: 12px 18px; --b: var(--orange); background: var(--orange); color: #fff; border-color: var(--orange); }
.qoffer__send:hover { background: color-mix(in srgb, var(--orange) 88%, #000); }
.qoffer__foot { margin-top: 4px; text-align: center; font-size: .76rem; color: var(--gray-2); }
.qoffer__foot a { color: var(--cyan-2); font-weight: 600; white-space: nowrap; }
.qoffer__done { display: none; text-align: center; padding: 6px 2px 4px; }
.qoffer.is-done .qoffer__head, .qoffer.is-done .qoffer__form { display: none; }
.qoffer.is-done .qoffer__done { display: block; }
.qoffer__check { width: 46px; height: 46px; margin: 2px auto 12px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--cyan) 14%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); color: var(--cyan-2); }
.qoffer__check svg { width: 22px; height: 22px; }
.qoffer__done h3 { font-family: var(--font-title); font-weight: 500; font-size: 1.15rem; color: var(--white); margin-bottom: 5px; }
.qoffer__done p { font-size: .84rem; line-height: 1.45; color: var(--gray-1); }
.qoffer__done a { color: var(--cyan-2); font-weight: 600; white-space: nowrap; }
@media (max-width: 560px) {
  /* Au-dessus de la bulle de clavardage (coin bas-droit) pour éviter tout chevauchement */
  .qoffer { left: 12px; right: auto; bottom: 86px; width: min(340px, calc(100vw - 24px)); }
}
@media (prefers-reduced-motion: reduce) { .qoffer { transition: opacity .25s linear; transform: none; } }

/* ===================================== Sélecteur « type de bâtiment » (bulles)
   3 boutons radio stylés en pastilles — un seul choix. */
.segbtns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.segbtn { position: relative; display: block; }
.segbtn input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segbtn > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 15px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-100); color: var(--gray-1); font-family: var(--font-body); font-weight: 600; font-size: .92rem; text-align: center; line-height: 1.1; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.segbtn > span svg { width: 22px; height: 22px; color: var(--cyan-2); transition: color .2s var(--ease); }
.segbtn:hover > span { border-color: color-mix(in srgb, var(--orange) 38%, var(--line)); color: var(--white); }
.segbtn input:checked + span { color: var(--white); border-color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, var(--bg-100)); box-shadow: 0 0 0 1px var(--orange), 0 10px 24px -12px color-mix(in srgb, var(--orange) 65%, transparent); }
.segbtn input:checked + span svg { color: var(--orange-3); }
.segbtn input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (max-width: 400px) { .segbtn > span { font-size: .82rem; padding: 13px 4px; } .segbtn > span svg { width: 20px; height: 20px; } }

/* ===================================== Téléversement de photos (facultatif) */
.field__opt { display: inline-block; margin-left: 7px; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-2); border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--line)); border-radius: 999px; padding: 2px 8px; vertical-align: middle; }
.uploader { position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 16px; border: 1.5px dashed color-mix(in srgb, var(--cyan) 34%, var(--line)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--cyan) 4%, var(--bg-100)); cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.uploader:hover, .uploader:focus-within { border-color: color-mix(in srgb, var(--cyan) 62%, var(--line)); background: color-mix(in srgb, var(--cyan) 9%, var(--bg-100)); }
.uploader input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.uploader__ic { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--cyan-2); background: color-mix(in srgb, var(--cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 26%, transparent); }
.uploader__ic svg { width: 22px; height: 22px; }
.uploader__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uploader__txt strong { font-family: var(--font-body); font-weight: 600; font-size: .95rem; color: var(--white); }
.uploader__txt small { font-size: .8rem; color: var(--gray-2); }
.uploader__list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; }
.uploader__list:empty { display: none; }
.uploader__chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; font-size: .8rem; color: var(--gray-1); background: var(--bg-200); border: 1px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 12px; }
.uploader__chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.uploader__chip button { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--gray-2); background: color-mix(in srgb, var(--bg-400) 70%, transparent); transition: color .2s var(--ease), background .2s var(--ease); }
.uploader__chip button:hover { color: #fff; background: color-mix(in srgb, var(--orange) 65%, transparent); }
.uploader__chip button svg { width: 12px; height: 12px; }

/* =========================================================================
   HÉROS — écrans peu hauts (portables). Tout le bloc, jusqu'aux boutons,
   tient dans l'écran à l'arrivée. Mêmes proportions, légèrement réduites.
   ========================================================================= */
@media (max-height: 820px) and (min-width: 700px) {
  .hero {
    padding-top: calc(var(--promo-h) + var(--nav-h) + clamp(12px, 2.4vh, 26px));
    padding-bottom: clamp(20px, 3vh, 34px);
  }
  .hero__eyebrow { gap: 8px; margin-bottom: clamp(10px, 1.6vh, 14px); }
  .hero__eyebrow-lead { font-size: clamp(.76rem, .66rem + .4vw, .96rem); }
  .hero__social { margin: 0 0 clamp(12px, 1.8vh, 16px); }
  .hero__social .soc { width: 38px; height: 38px; }
  .hero__title {
    font-size: clamp(2.1rem, 1rem + 3.1vw, 3.9rem);
    line-height: 1.03;
    margin-bottom: clamp(12px, 1.8vh, 16px);
  }
  .hero__sub {
    font-size: clamp(1rem, .94rem + .35vw, 1.15rem);
    line-height: 1.5;
    margin-bottom: clamp(16px, 2.4vh, 24px);
  }
  .hero__trust { margin-top: clamp(16px, 2.2vh, 24px); padding-top: clamp(14px, 2vh, 20px); }
}
/* Très peu de hauteur : on comprime encore un cran de plus. */
@media (max-height: 600px) and (min-width: 700px) {
  .hero__title { font-size: clamp(1.9rem, 1rem + 2.6vw, 3.3rem); }
  .hero__social .soc { width: 34px; height: 34px; }
  .hero__sub { font-size: clamp(.94rem, .9rem + .3vw, 1.08rem); }
}

/* =========================================================================
   PHASE 0 - Correctifs mobiles mesures (max-width: 640px)
   Bloc additif : aucun effet sur l affichage ordinateur.
   ========================================================================= */
@media (max-width: 640px) {

  /* 1. Barre promo : son contenu reclamait 96 px dans une boite de 44 px et
        debordait par-dessus le logo. On lui donne la hauteur necessaire. */
  :root { --promo-h: 64px; }
  .promo { overflow: hidden; }
  .promo__inner { padding-inline: 14px 46px; gap: 10px; }
  .promo__text {
    font-size: 12px; line-height: 1.35; text-align: left;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .promo__cta {
    font-size: 12px; padding: 9px 13px; white-space: nowrap;
    min-height: 40px; display: inline-flex; align-items: center;
  }
  .promo__close { right: 4px; width: 40px; height: 40px; }

  /* 2. Zones tactiles : 40 a 44 px minimum. Le telephone et les liens du
        pied de page ne faisaient que 18 a 38 px de haut. */
  .nav__phone { min-height: 44px; min-width: 44px; }
  .hero__scroll { min-height: 44px; }
  .footer__contact a, .footer__col a, .footer__legal a {
    min-height: 40px; display: inline-flex; align-items: center;
  }

  /* 3. Lisibilite : plus rien sous 12 px. Certains libelles etaient a 9,3 px. */
  .stat__label, .soc-label, .hero__eyebrow-zones,
  .nav__mega__label, .nav__phone-label,
  .eyebrow, .why2__eyebrow { font-size: 12px; }
  .footer h4 { font-size: 12px; }
  small { font-size: 12px; }

  /* 4. Element decoratif qui depassait a gauche de l ecran */
  .why2__streak { max-width: 100%; overflow: hidden; }
}

/* =========================================================================
   PHASE 1 - Premier ecran mobile + barre d action fixe
   ========================================================================= */
@media (max-width: 640px) {

  /* En-tete plus compact : 140 px de chrome fixe, c etait 17% de l ecran. */
  :root { --nav-h: 64px; }

  /* Le hero faisait 997 px pour un ecran de 812 : les boutons d action
     tombaient sous la ligne de flottaison. On remonte l essentiel. */
  .hero { padding-top: calc(var(--promo-h) + var(--nav-h) + 14px); }
  .hero__social { display: none; }   /* les reseaux restent dans le pied de page */
  .hero__eyebrow { display: block; margin-bottom: 10px; line-height: 1.4; }
  .hero__eyebrow-zones { margin-top: 6px; line-height: 1.45; opacity: .85; }
  .hero__title { margin-bottom: 12px; }
  .hero__sub {
    margin-bottom: 18px;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hero__cta .btn { min-height: 52px; }

  /* Barre d action fixe : appeler ou demander une soumission, toujours
     a portee de pouce, sur toutes les pages. */
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
    padding: 9px 11px calc(9px + env(safe-area-inset-bottom, 0px));
    background: rgba(9, 14, 20, .93);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, .10);
  }
  .mbar a {
    min-height: 48px; display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; border-radius: 12px; font-size: 14px; font-weight: 600;
    letter-spacing: .01em; text-decoration: none; line-height: 1;
  }
  .mbar__call { color: #FFFFFF; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.07); }
  .mbar__quote { color: #10161d; background: var(--orange-3); }
  .mbar svg { flex: none; }
  body { padding-bottom: 74px; }
  .chat-bubble { bottom: 86px; }
}

/* La barre d action n existe que sur mobile. */
@media (min-width: 641px) { .mbar { display: none; } }

/* =========================================================================
   PHASE 2 - Pied de page repliable + texte promo court sur mobile
   ========================================================================= */
@media (max-width: 640px) {

  /* Texte promo : la version longue est illisible sur 375 px, on affiche
     une version courte. La version complete reste sur ordinateur. */
  .promo__text { display: block; font-size: 0; line-height: 1.35; }
  .promo__text::before {
    content: "⚡  10 % de rabais + prime de référence";
    font-size: 12px; color: var(--gray-1); white-space: normal; display: block;
  }
  :root { --promo-h: 46px; }

  /* Pied de page : 1710 px de liens, soit plus de deux ecrans a faire
     defiler. Les colonnes deviennent des accordeons. */
  .footer__col > h4 {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 48px; margin: 0; cursor: pointer; user-select: none;
    border-top: 1px solid rgba(255, 255, 255, .10);
  }
  .footer__col > h4::after {
    content: ""; width: 9px; height: 9px; flex: none; margin-left: 12px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-3px); opacity: .65;
    transition: transform .25s ease;
  }
  .footer__col.is-open > h4::after { transform: rotate(-135deg) translateY(0); }
  .footer__col > ul {
    overflow: hidden; max-height: 0;
    padding-top: 0; padding-bottom: 0;
    transition: max-height .3s ease, padding-bottom .3s ease;
  }
  .footer__col.is-open > ul { max-height: 520px; padding-bottom: 12px; }
}

/* =========================================================================
   CORRECTIF - Chevauchement en bas d ecran sur mobile.
   La bulle de clavardage avait ete remontee a 86px, pile sur le panneau
   .qoffer qui occupait deja cette place. Sur iPhone, la barre d action
   grandit de env(safe-area-inset-bottom) et recouvrait la bulle : le tap
   atteignait le bouton Soumission gratuite au lieu du clavardage.
   ========================================================================= */
@media (max-width: 640px) {
  .mbar { z-index: 118; }
  .chat-bubble {
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    z-index: 132;
  }
  .qoffer {
    bottom: calc(152px + env(safe-area-inset-bottom, 0px));
    z-index: 116;
  }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
  .qoffer { bottom: calc(152px + env(safe-area-inset-bottom, 0px)); }
}

/* =========================================================================
   CORRECTIF - Menu deroulant fantome sur mobile.
   .nav__has-sub etait bien masque (visibility: hidden, pointer-events: none)
   mais son enfant .nav__sub.nav__mega redeclarait visibility: visible et
   pointer-events: auto. En CSS un descendant peut annuler le masquage
   herite : le panneau restait actif sur 335 x 674 px, captait les touchers
   (navigation intempestive) et bloquait le defilement.
   ========================================================================= */
@media (max-width: 860px) {
  .nav:not(.open) .nav__links,
  .nav:not(.open) .nav__links a,
  .nav:not(.open) .nav__has-sub,
  .nav:not(.open) .nav__sub,
  .nav:not(.open) .nav__mega,
  .nav:not(.open) .nav__mega__grid {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .nav:not(.open) .nav__links { max-height: 0 !important; overflow: hidden !important; }
}