/* ================================================================
   LE VITRIER — style.css
   Taste-Skill: DESIGN_VARIANCE 8 · MOTION_INTENSITY 6 · VISUAL_DENSITY 4
   Zero dependencies · Pure CSS
   ================================================================ */

/* ── FONT ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');

/* ── RESET ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: 'Outfit', sans-serif;
  background: var(--gris);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }


/* ── TOKENS ───────────────────────────────────────────────────── */
:root {
  /* Brand */
  --bleu:       #0D2D6E;
  --bleu-mid:   #1a3d80;
  --bleu-clair: #4BAEE8;
  --blanc:      #FFFFFF;
  --gris:       #F6F7F9;
  --gris-mid:   #E4E6EA;

  /* Neutrals (no pure black) */
  --ink:        #111118;
  --ink-soft:   #52525b;
  --ink-muted:  #a1a1aa;
  --surface:    #ffffff;

  /* Shadows — tinted to brand hue */
  --s-xs:  0 1px 4px  rgba(13, 45, 110, .06);
  --s-sm:  0 4px 18px rgba(13, 45, 110, .09);
  --s-md:  0 10px 36px rgba(13, 45, 110, .13);
  --s-lg:  0 24px 64px rgba(13, 45, 110, .22);

  /* Spring easing (taste-skill mandate) */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:    cubic-bezier(0.0, 0, 0.2, 1);

  /* Transitions */
  --t:      0.32s var(--ease-spring);
  --t-fast: 0.18s var(--ease-out);
  --t-slow: 0.55s var(--ease-spring);

  /* Layout */
  --nav-h: 72px;
  --max-w: 1140px;

  /* Radii */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
}


/* ================================================================
   NAVBAR — liquid glass refraction
   ================================================================ */
.navbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 56px;
  background: rgba(246, 247, 249, 0.82);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  /* Liquid glass: 1px inner-light edge */
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, .06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform .35s var(--ease-spring);
}
.navbar.is-hidden { transform: translateY(-100%); }
/* Sur l'accueil uniquement : passe sous les cartes catégories (z-index 20) */
.navbar.nav--home { z-index: 19; }

.navbar__logo { display: flex; align-items: center; flex-shrink: 0; }
.navbar__logo img { height: 44px; width: auto; border-radius: 8px; }

.navbar__actions { display: flex; align-items: center; gap: 16px; }

/* Lien texte savoir-faire */
.navbar__link {
  font-size: .875rem;
  font-weight: 500;
  color: var(--bleu);
  text-decoration: none;
  opacity: .75;
  transition: opacity var(--t);
  white-space: nowrap;
}
.navbar__link:hover { opacity: 1; }

/* CTA — fill from left on hover */
.navbar__cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 28px;
  border: 1.5px solid var(--bleu);
  border-radius: 50px;
  color: var(--bleu);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .02em;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: color var(--t);
}
.navbar__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bleu);
  border-radius: 50px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
  z-index: -1;
}
.navbar__cta:hover { color: var(--blanc); }
.navbar__cta:hover::before { transform: scaleX(1); }
.navbar__cta:active { transform: scale(0.98); }

.hero__cta {
  margin-top: 26px;
  padding: 14px 34px;
  font-size: .95rem;
}

/* Bouton "Votre devis" — vert */
.navbar__cta[href*="wa.me"] {
  background: #25D366;
  border-color: #25D366;
  color: #fff;
}
.navbar__cta[href*="wa.me"]::before { background: #1ebe5d; }
.navbar__cta[href*="wa.me"]:hover { color: #fff; }



/* ================================================================
   HERO — sticky, asymmetric left-aligned (DESIGN_VARIANCE 8)
   ================================================================ */
.hero {
  position: sticky;
  top: var(--nav-h);
  z-index: 1;
  height: 42vh;
  min-height: 220px;
  display: flex;
  align-items: center;
  padding: 0 56px;
  margin-top: var(--nav-h);
  background: var(--bleu);
  overflow: visible;
}

/* Animated mesh blobs — pure CSS, no JS */
.hero::before {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  right: -120px; bottom: -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(75, 174, 232, .16) 0%, transparent 70%);
  animation: blob-drift 7s ease-in-out infinite;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  width: 340px; height: 340px;
  right: 18%; top: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .045) 0%, transparent 70%);
  animation: blob-drift 4.5s ease-in-out infinite reverse;
  pointer-events: none;
}

@keyframes blob-drift {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50%       { transform: scale(1.18) translate(-24px, 24px); }
}

.hero__content {
  position: relative;
  z-index: 2;
  animation: fadeUp .7s var(--ease-spring) both;
}

/* Left-aligned, tight tracking */
.hero__tagline {
  font-size: clamp(1.5rem, 3.5vw, 2.7rem);
  font-weight: 700;
  color: var(--blanc);
  line-height: 1.12;
  margin-bottom: 16px;
  letter-spacing: -.04em;
  max-width: 460px;
}

.hero__cities {
  font-size: .7rem;
  font-weight: 300;
  color: rgba(255, 255, 255, .42);
  letter-spacing: .3em;
  text-transform: uppercase;
}


/* ================================================================
   CARDS SECTION — slides over sticky hero
   ================================================================ */
.cards-section {
  position: relative;
  z-index: 20;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  box-shadow: 0 -18px 72px rgba(0, 0, 0, .34);
  /* Garantit que la section couvre toujours le hero en dessous */
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  flex-direction: column;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Les 2 rangées s'étirent pour remplir la hauteur de la section */
  grid-template-rows: repeat(2, 1fr);
  flex: 1;
}

/* ── Single card — spotlight + 3D tilt (JS) ────────────────── */
.card {
  position: relative;
  display: block;
  height: 380px;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--bleu);
  z-index: 1;
  /* Custom props updated by JS for spotlight */
  --mouse-x: 50%;
  --mouse-y: 50%;
  transition:
    transform .6s var(--ease-spring),
    box-shadow .6s var(--ease-spring);
}
.card:hover { box-shadow: 0 28px 72px rgba(0, 0, 0, .48); }

.card__bg {
  position: absolute;
  inset: -6px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .8s var(--ease-spring);
  will-change: transform;
}
.card--professionnel .card__bg { background-image: url('https://images.unsplash.com/photo-1752754331999-a20ee211ec20?w=900&auto=format&fit=crop'); }
.card--particulier   .card__bg { background-image: url('https://images.unsplash.com/photo-1513584684374-8bab748fbf90?w=900&auto=format&fit=crop'); background-position: center center; }
.card--chantier      .card__bg { background-image: url('https://images.unsplash.com/photo-1770838773417-08b18661c62f?w=900&auto=format&fit=crop'); }
.card--solaires      .card__bg { background-image: url('https://images.unsplash.com/photo-1655300283246-1ef0317a565d?w=900&auto=format&fit=crop'); }

.card:hover .card__bg { transform: scale(1.06); }

.card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .36);
  transition: background .55s var(--ease-spring);
  z-index: 1;
}
.card:hover .card__overlay { background: rgba(13, 45, 110, .7); }

/* Spotlight radial (mouse-tracking) */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  background: radial-gradient(
    circle 200px at var(--mouse-x) var(--mouse-y),
    rgba(75, 174, 232, .22),
    transparent 68%
  );
  transition: opacity .28s ease;
  pointer-events: none;
}
.card:hover::after { opacity: 1; }

.card__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 20px;
}

.card__title {
  color: var(--blanc);
  font-size: clamp(1.4rem, 2vw, 1.95rem);
  font-weight: 700;
  letter-spacing: .05em;
  text-align: center;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .6);
  transition:
    letter-spacing .55s var(--ease-spring),
    transform .55s var(--ease-spring);
}
.card:hover .card__title {
  letter-spacing: .13em;
  transform: translateY(-5px);
}

/* Arrow line — fades up on hover */
.card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: rgba(255, 255, 255, .85);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.card__arrow::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, .85);
  transition: width .35s var(--ease-spring);
}
.card:hover .card__arrow { opacity: 1; transform: translateY(0); }
.card:hover .card__arrow::after { width: 48px; }


/* ================================================================
   PAGE HERO — secondary pages, asymmetric left
   ================================================================ */
.page-hero {
  position: sticky;
  top: var(--nav-h);
  z-index: 1;
  height: 64vh;
  min-height: 400px;
  display: flex;
  align-items: center;
  padding: 0 72px;
  margin-top: var(--nav-h);
  overflow: hidden;
  background-color: var(--bleu);
  background-size: cover;
  background-position: center;
}

.page-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50px;
  color: #fff;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.06);
}

/* Asymmetric gradient — heavier on left where text lives */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(9, 31, 82, .95) 0%,
    rgba(13, 45, 110, .90) 28%,
    rgba(13, 45, 110, .55) 48%,
    rgba(13, 45, 110, .10) 62%,
    transparent 72%
  );
  z-index: 0;
}

/* Bottom shimmer line */
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(75, 174, 232, .5) 28%,
    rgba(255, 255, 255, .32) 50%,
    rgba(75, 174, 232, .5) 72%,
    transparent
  );
  z-index: 1;
}

.page-hero__content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  animation: fadeUp .7s var(--ease-spring) both;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-hero__title {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 800;
  color: var(--blanc);
  line-height: 1.0;
  letter-spacing: -.05em;
}
.page-hero__accent { color: var(--bleu-clair); }

.page-hero__sub {
  font-size: .72rem;
  font-weight: 400;
  color: #fff;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.page-hero__desc {
  font-size: 1rem;
  color: #fff;
  line-height: 1.75;
  max-width: 520px;
}

/* Per-page backgrounds */
.page-hero--savoir-faire {
  background-image: none;
  background-color: #002B65;
  justify-content: space-between;
}
.page-hero--savoir-faire::before {
  background: none;
}

/* Logo hero droit — savoir-faire & faq */
.page-hero--savoir-faire .page-hero__content {
  flex: 0 0 50%;
  max-width: 50%;
}
.page-hero__logo-wrap {
  flex: 0 0 50%;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 48px 16px 16px;
  z-index: 2;
  animation: fadeUp .9s var(--ease-spring) .18s both;
}
.page-hero__logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 768px) {
  .page-hero--savoir-faire .page-hero__content { flex: unset; max-width: 100%; }
  .page-hero__logo-wrap { display: none; }
}
.page-hero--professionnel { background-image: url('https://images.unsplash.com/photo-1752754331999-a20ee211ec20?w=1600&auto=format&fit=crop'); }
.page-hero--particulier   {
  background-image: url('https://images.unsplash.com/photo-1513584684374-8bab748fbf90?w=1600&auto=format&fit=crop');
  background-size: cover;
  background-position: center center;
}
.page-hero--particulier::before {
  background: linear-gradient(
    90deg,
    rgba(9, 31, 82, .95) 0%,
    rgba(13, 45, 110, .90) 28%,
    rgba(13, 45, 110, .55) 48%,
    rgba(13, 45, 110, .10) 62%,
    transparent 72%
  );
}
.page-hero--chantier      { background-image: url('https://images.unsplash.com/photo-1770838773417-08b18661c62f?w=1600&auto=format&fit=crop'); }
.page-hero--solaires      { background-image: url('https://images.unsplash.com/photo-1655300283246-1ef0317a565d?w=1600&auto=format&fit=crop'); }


/* ================================================================
   PAGE MAIN — slides over page-hero
   ================================================================ */
.page-main {
  position: relative;
  z-index: 20;
  background: var(--gris);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 72px rgba(0, 0, 0, .28);
  padding: 72px 56px;
}
.page-main__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}


/* ================================================================
   QUICK GRID — icon cards, SVG icons (no emoji)
   ================================================================ */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto 56px;
}

.quick-card {
  background: var(--surface);
  padding: 28px 14px 22px;
  border-radius: var(--r);
  text-align: center;
  border: 1px solid var(--gris-mid);
  box-shadow: var(--s-xs);
  transition:
    transform var(--t),
    box-shadow var(--t),
    border-color var(--t);
  cursor: default;
}
.quick-card:hover {
  transform: translateY(-6px);
  border-color: var(--bleu-clair);
  box-shadow: var(--s-md);
}

/* SVG icon container */
.quick-card__icon {
  width: 36px;
  height: 36px;
  display: block;
  margin: 0 auto 12px;
  color: var(--bleu-clair);
}
.quick-card__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Hide legacy emoji spans */
.quick-card > span:not(.quick-card__icon):not(.quick-card__label) { display: none; }

.quick-card__label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--bleu);
  letter-spacing: .05em;
  text-transform: uppercase;
  display: block;
}


/* ================================================================
   BEFORE / AFTER — interactive drag slider
   ================================================================ */
.ba {
  position: relative;
  height: 380px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--s-md);
  margin: 0 auto 64px;
  max-width: 880px;
  background-color: var(--ink);
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
  /* Shared variable, updated by JS */
  --ba-split: 50%;
}

.ba__before,
.ba__after {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* Left side: desaturated / dirty */
.ba__before {
  filter: grayscale(1) brightness(.38) contrast(1.2);
  z-index: 0;
}

/* Right side: clean, clips dynamically */
.ba__after {
  clip-path: polygon(
    var(--ba-split) 0%,
    100% 0%,
    100% 100%,
    var(--ba-split) 100%
  );
  z-index: 1;
}

/* Divider line */
.ba__divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-split);
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 16px rgba(0, 0, 0, .5);
  z-index: 3;
  pointer-events: none;
}

/* Drag handle */
.ba__handle {
  position: absolute;
  top: 50%;
  left: var(--ba-split);
  z-index: 4;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--blanc);
  box-shadow:
    0 2px 20px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform .12s var(--ease-spring);
}
.ba:active .ba__handle { transform: translate(-50%, -50%) scale(1.15); }

.ba__handle svg {
  width: 18px;
  height: 18px;
  stroke: var(--bleu);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Labels — glass refraction */
.ba__label {
  position: absolute;
  top: 20px;
  z-index: 5;
  color: var(--blanc);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .2em;
  padding: 6px 16px;
  border-radius: 50px;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  pointer-events: none;
}
.ba__label--before { left: 20px;  background: rgba(0, 0, 0, .48); }
.ba__label--after  { right: 20px; background: rgba(75, 174, 232, .82); }

/* Per-page BA backgrounds */
.ba--pro-new .ba__before { background-image: url('avant-particulier-new.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; filter: none; }
.ba--pro-new .ba__after  { background-image: url('apres-particulier-new.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; }
.ba--chantier .ba__before  { background-image: url('Avant%20Apres%20chantier.jpeg'); background-position: center 35%; filter: none; }
.ba--chantier .ba__after   { background-image: url('Apres%20Apres%20chantier.jpeg'); background-position: 30% 40%; }
.ba--solaires .ba__before  { background-image: url('avant%20panaux%20solaire.jpeg'); background-position: center center; background-size: cover; filter: none; }
.ba--solaires .ba__after   { background-image: none; overflow: hidden; }
.ba--solaires .ba__after::before {
  content: '';
  position: absolute;
  inset: -10%;
  background-image: url('apres%20panaux%20soilaire.jpeg');
  background-size: cover;
  background-position: center 45%;
  transform: rotate(-5deg);
}


/* ================================================================
   BADGES — kinetic marquee (MOTION_INTENSITY 6)
   ================================================================ */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

/* Marquee container */
.badges--center {
  flex-wrap: wrap;
  overflow: visible;
  justify-content: center;
  margin: 0 0 52px;
  gap: 10px;
  mask-image: none;
  -webkit-mask-image: none;
}

/* Track: duplicated badges for seamless loop */
.badge-track {
  display: flex;
  gap: 10px;
  animation: marquee-scroll 22s linear infinite;
  white-space: nowrap;
  flex-shrink: 0;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1.5px solid var(--gris-mid);
  color: var(--bleu);
  font-weight: 600;
  font-size: .74rem;
  padding: 7px 18px;
  border-radius: 50px;
  box-shadow: var(--s-xs);
  letter-spacing: .02em;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.badge:hover {
  background: var(--bleu-clair);
  color: var(--blanc);
  border-color: var(--bleu-clair);
}


/* ================================================================
   CONTACT BLOCK — directional hover fill
   ================================================================ */
.contact-block {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.contact-block__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--bleu);
  margin-bottom: 8px;
  letter-spacing: -.02em;
}
.contact-block__sub {
  font-size: .88rem;
  color: var(--ink-soft);
  margin-bottom: 32px;
}

/* ── Formulaire de contact ───────────────────────────────────── */
.contact-form {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.contact-form__sep {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 4px;
  color: var(--ink-muted);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.contact-form__sep::before,
.contact-form__sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gris-mid);
}
.contact-form__row {
  display: flex;
  gap: 12px;
}
.contact-form__row > * { flex: 1; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  font-family: 'Outfit', sans-serif;
  font-size: .9rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--gris-mid);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  transition: border-color var(--t), box-shadow var(--t);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--ink-muted); }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--bleu-clair);
  box-shadow: 0 0 0 3px rgba(75, 174, 232, .18);
}
.contact-form textarea { resize: vertical; min-height: 110px; }


/* ================================================================
   BOUTON DEVIS FLOTTANT (bas droite)
   ================================================================ */
.lv-devis-fab {
  position: fixed; left: 20px; bottom: 30px; z-index: 900;
  border: none; cursor: pointer;
  display: flex; align-items: center; gap: 9px;
  background: #25D366; color: #fff;
  border-radius: 50px; padding: 14px 22px;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .9rem;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(37, 211, 102, .45);
  /* Caché par défaut (haut de page), révélé au scroll */
  opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: opacity .3s, transform .3s, box-shadow .25s;
}
.lv-devis-fab.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.lv-devis-fab.is-visible:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(37, 211, 102, .55); }
.lv-devis-fab svg { flex-shrink: 0; }
@media (max-width: 480px) {
  .lv-devis-fab { padding: 16px; border-radius: 50%; }
  .lv-devis-fab__txt { display: none; }
}

/* ── Modal devis (ordinateur) ────────────────────────────────── */
.lv-devis-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(6, 15, 32, .6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.lv-devis-overlay.is-open { opacity: 1; pointer-events: auto; }
.lv-devis-modal {
  background: #fff; border-radius: 24px; max-width: 460px; width: 100%;
  max-height: 92vh; overflow-y: auto;
  padding: 32px 28px; position: relative;
  box-shadow: var(--s-lg); transform: translateY(16px); transition: transform .3s;
}
.lv-devis-overlay.is-open .lv-devis-modal { transform: translateY(0); }
.lv-devis-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  border: none; border-radius: 50%; background: var(--gris); color: var(--ink-soft);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.lv-devis-title { font-size: 1.35rem; font-weight: 800; color: var(--bleu); margin-bottom: 4px; }
.lv-devis-sub { font-size: .85rem; color: var(--ink-soft); margin-bottom: 18px; }
.contact-form select {
  font-family: 'Outfit', sans-serif; font-size: .9rem; padding: 14px 16px;
  border: 1.5px solid var(--gris-mid); border-radius: var(--r-sm);
  background: #fff; color: var(--ink); cursor: pointer; width: 100%;
}
.contact-form select:focus { outline: none; border-color: var(--bleu-clair); }

/* ================================================================
   SIMULATEUR PANNEAUX SOLAIRES
   ================================================================ */
.solar-sim {
  max-width: 980px;
  margin: 0 auto 64px;
  background: var(--bleu);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 48px 40px;
  text-align: center;
}
.solar-sim .info-section__label { color: var(--bleu-clair); }
.solar-sim__title { font-size: 1.9rem; font-weight: 800; margin: 8px 0 6px; letter-spacing: -.02em; }
.solar-sim__sub { color: rgba(255,255,255,.7); font-size: .95rem; margin-bottom: 32px; }
.solar-sim__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; text-align: left; }
.solar-sim__controls { display: flex; flex-direction: column; gap: 18px; }
.solar-sim__field { display: flex; flex-direction: column; gap: 8px; }
.solar-sim__label { font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.85); }
.solar-sim__label strong { color: var(--bleu-clair); font-size: 1.05rem; }
.solar-sim__field select {
  font-family: 'Outfit', sans-serif; font-size: .9rem; padding: 12px 14px;
  border: 1.5px solid rgba(255,255,255,.2); border-radius: var(--r-sm);
  background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
}
.solar-sim__field select option { color: #111; }
.solar-sim__field input[type="range"] { width: 100%; accent-color: var(--bleu-clair); cursor: pointer; }
.solar-sim__results {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.solar-sim__result { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.solar-sim__result-label { font-size: .85rem; color: rgba(255,255,255,.7); }
.solar-sim__result-value { font-size: 1.3rem; font-weight: 800; white-space: nowrap; }
.solar-sim__result--hl { border-top: 1px solid rgba(255,255,255,.15); padding-top: 14px; }
.solar-sim__result--hl .solar-sim__result-value { color: var(--bleu-clair); font-size: 1.7rem; }
.solar-sim__verdict {
  font-size: .9rem; font-weight: 600; color: #fff;
  background: rgba(75,174,232,.18); border: 1px solid rgba(75,174,232,.35);
  border-radius: var(--r-sm); padding: 12px 14px; text-align: center;
}
.solar-sim__contact input {
  font-family: 'Outfit', sans-serif; font-size: .9rem; padding: 12px 14px;
  border: 1.5px solid rgba(255,255,255,.2); border-radius: var(--r-sm);
  background: rgba(255,255,255,.08); color: #fff;
}
.solar-sim__contact input::placeholder { color: rgba(255,255,255,.55); }
.solar-sim__contact input:focus { outline: none; border-color: var(--bleu-clair); }
.solar-sim__cta {
  margin-top: 6px;
  background: var(--bleu-clair); color: #fff; border: none;
  border-radius: 50px; padding: 15px 22px;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: .92rem;
  cursor: pointer; text-align: center;
  transition: background .25s, transform .25s;
}
.solar-sim__cta:hover { background: #3a9bd8; transform: translateY(-2px); }
.solar-sim__cta:disabled { opacity: .6; cursor: default; transform: none; }
.solar-sim__results { margin-top: 24px; max-width: 460px; margin-left: auto; margin-right: auto; }
.solar-sim__results[hidden] { display: none; }
.solar-sim__sent { font-size: .85rem; color: #bfe7c6; text-align: center; }
.solar-sim__note { font-size: .72rem; color: rgba(255,255,255,.45); margin-top: 22px; }
@media (max-width: 760px) {
  .solar-sim { padding: 36px 22px; }
  .solar-sim__grid { grid-template-columns: 1fr; gap: 24px; }
  .solar-sim__title { font-size: 1.5rem; }
}

.contact-form__btn {
  margin-top: 4px;
  padding: 16px 24px;
  border: none;
  border-radius: 50px;
  background: var(--bleu);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: var(--s-sm);
  transition: background var(--t), transform var(--t);
}
.contact-form__btn:hover { background: var(--bleu-clair); transform: translateY(-2px); }
@media (max-width: 560px) {
  .contact-form__row { flex-direction: column; }
}

.contact-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.contact-btn {
  flex: 0 1 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 14px;
  background: var(--surface);
  border: 1.5px solid var(--gris-mid);
  border-radius: var(--r);
  color: var(--bleu);
  text-decoration: none;
  box-shadow: var(--s-xs);
  position: relative;
  overflow: hidden;
  transition:
    color var(--t),
    border-color var(--t),
    box-shadow var(--t),
    transform var(--t);
}

/* Directional fill circle — origin set by JS */
.contact-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bleu);
  border-radius: 50%;
  width: 180%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: var(--fill-x, 50%) var(--fill-y, 50%);
  transition: transform .5s var(--ease-spring);
  pointer-events: none;
}

.contact-btn.is-hovered { color: var(--blanc); border-color: var(--bleu); box-shadow: var(--s-md); }
.contact-btn.is-hovered::before { transform: translate(-50%, -50%) scale(3); }
.contact-btn:active { transform: scale(0.97); }

/* WhatsApp */
.contact-btn--whatsapp::before { background: #1aab52; }
.contact-btn--whatsapp.is-hovered {
  border-color: #1aab52;
  box-shadow: 0 14px 40px rgba(26, 171, 82, .22);
}

/* Instagram */
.contact-btn--insta::before {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.contact-btn--insta.is-hovered {
  border-color: #dc2743;
  box-shadow: 0 14px 40px rgba(220, 39, 67, .2);
}

.contact-btn__icon {
  width: 30px;
  height: 30px;
  display: block;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.contact-btn__icon svg { width: 100%; height: 100%; fill: currentColor; }

.contact-btn__label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.contact-btn__value {
  font-size: .69rem;
  font-weight: 400;
  opacity: .6;
  position: relative;
  z-index: 1;
}


/* ================================================================
   FOOTER — off-black, glass social icons
   ================================================================ */
/* ── Fine bande de bas de page ─────────────────────────────── */
.footer {
  position: relative;
  z-index: 30;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 14px 40px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.footer__legal-links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer__legal-links a {
  font-size: .68rem;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color .2s;
}
.footer__legal-links a:hover { color: #fff; }

.footer__brand {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
  white-space: nowrap;
}

.footer__contacts {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: .72rem;
}

.footer__contacts a {
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
  transition: color .2s ease;
}
.footer__contacts a:hover { color: #fff; }

.footer__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  display: inline-block;
}

.footer__socials {
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer__socials a {
  color: rgba(255, 255, 255, .75);
  display: flex;
  align-items: center;
  transition: color .2s ease;
  line-height: 1;
}
.footer__socials a:hover { color: rgba(255, 255, 255, .78); }

.footer__socials svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

@media (max-width: 640px) {
  .footer {
    padding: 16px 20px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }
  .footer__contacts { display: none; }
  .footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
  }
  .footer__socials { justify-content: center; }
}


/* ================================================================
   INFO LIST — editorial numbered rows
   ================================================================ */
.info-section {
  padding: 0;
  margin-bottom: 64px;
}
.info-section__label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  margin-bottom: 20px;
}
.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.info-item {
  display: grid;
  grid-template-columns: 36px 1fr 1.5fr;
  gap: 0 36px;
  align-items: baseline;
  padding: 30px 0;
  border-top: 1px solid var(--gris-mid);
  transition: background var(--t-fast);
}
.info-item:last-child {
  border-bottom: 1px solid var(--gris-mid);
}
.info-item__num {
  font-size: .8rem;
  font-weight: 700;
  color: var(--bleu-clair);
  opacity: .55;
  letter-spacing: .04em;
  padding-top: 2px;
}
.info-item__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bleu);
  line-height: 1.3;
}
.info-item__text {
  font-size: .875rem;
  color: var(--ink-soft);
  line-height: 1.75;
}
.info-item__text strong {
  color: var(--bleu);
  font-weight: 600;
}

/* ================================================================
   SAVOIR-FAIRE — 3-block grid
   ================================================================ */
.sf-section {
  position: relative;
  z-index: 20;
  background: var(--gris);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 72px rgba(0, 0, 0, .28);
  padding: 72px 56px;
}

.sf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--max-w);
  margin: 0 auto;
}

.sf-block {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 48px 28px 40px;
  text-align: center;
  box-shadow: var(--s-sm);
  border: 1px solid var(--gris-mid);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
}
.sf-block:hover {
  transform: translateY(-6px);
  box-shadow: var(--s-lg);
  border-color: rgba(75,174,232,.4);
  background: rgba(75,174,232,.04);
}

/* SVG icon */
.sf-block__icon {
  width: 48px;
  height: 48px;
  display: block;
  margin: 0 auto 24px;
  color: var(--bleu-clair);
}
.sf-block__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sf-block__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bleu);
  margin-bottom: 12px;
  letter-spacing: -.01em;
}
.sf-block__text {
  font-size: .87rem;
  color: var(--ink-soft);
  line-height: 1.75;
}
.sf-block__text strong { color: var(--bleu); font-weight: 600; }


.sf-block__badge {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blanc);
  background: var(--bleu-clair);
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 8px;
  vertical-align: middle;
  line-height: 1.6;
}

.sf-bonus {
  max-width: var(--max-w);
  margin: 56px auto 0;
}


/* ================================================================
   SCROLL REVEAL — staggered entrance
   ================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .65s var(--ease-spring),
    transform .65s var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 75ms);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}


/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ================================================================
   MISC (legacy support)
   ================================================================ */
.final-cta { display: none; } /* replaced by contact-block */

.label {
  display: inline-block;
  background: rgba(75, 174, 232, .1);
  color: var(--bleu-clair);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 14px;
}

.section-title {
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  font-weight: 700;
  color: var(--bleu);
  line-height: 1.25;
  margin-bottom: 20px;
  letter-spacing: -.02em;
}

.section-text {
  font-size: .97rem;
  line-height: 1.9;
  color: var(--ink-soft);
  margin-bottom: 16px;
}

.cta-link {
  display: inline-block;
  background: var(--bleu-clair);
  color: var(--blanc);
  padding: 14px 38px;
  border-radius: 50px;
  font-weight: 600;
  font-size: .95rem;
  margin-top: 24px;
  box-shadow: 0 8px 28px rgba(75, 174, 232, .38);
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.cta-link:hover {
  background: var(--bleu);
  transform: translateY(-3px);
  box-shadow: 0 14px 44px rgba(13, 45, 110, .38);
}


/* ================================================================
   RESPONSIVE (mobile-first collapse)
   ================================================================ */
@media (max-width: 1024px) {
  .sf-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .navbar  { padding: 0 20px; }
  .navbar__logo img { height: 38px; }
  .navbar__cta { padding: 8px 16px; font-size: .8rem; }
  .navbar__link { display: none; }

  .hero {
    padding: 48px 24px;
    min-height: 52vh;
    height: auto;
    align-items: flex-end;
    padding-bottom: 52px;
  }

  .page-hero { padding: 0 24px; }
  .page-main { padding: 48px 20px; }
  .sf-section { padding: 48px 20px; }

  .cards-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); }
  .card { min-height: 300px; height: auto; }

  .quick-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .ba { height: 280px; }
  .ba__label { font-size: .62rem; padding: 5px 12px; }

  .sf-grid { grid-template-columns: 1fr; gap: 16px; }

  .contact-grid { gap: 10px; }
  .contact-btn  { flex: 0 1 140px; padding: 20px 10px; }

  .info-section { margin-bottom: 40px; }
  .info-item {
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
    gap: 8px 16px;
    padding: 22px 0;
  }
  .info-item__text { grid-column: 2; }

  /* Homepage sections */
  .hp-section { padding: 56px 24px; }
  .tarifs-grid { grid-template-columns: 1fr; gap: 16px; }


  /* Points de navigation */
  .carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
  }
  .carousel-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gris-mid);
    transition: background .3s, width .3s, border-radius .3s;
    cursor: pointer;
  }
  .carousel-dot.is-active {
    width: 20px;
    border-radius: 3px;
    background: var(--bleu-clair);
  }
  /* Dots blancs pour section navy */
  .hp-section--navy .carousel-dot { background: rgba(255,255,255,.3); }
  .hp-section--navy .carousel-dot.is-active { background: #fff; }
}

@media (max-width: 480px) {
  .hero__tagline { font-size: 1.65rem; }
  .page-hero__title { font-size: 1.7rem; }
  .card { min-height: 260px; height: auto; }
  .card__title { font-size: 1.5rem; }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ================================================================
   HOMEPAGE EXTRAS — testimonials · zone · tarifs · galerie
   ================================================================ */

/* ── Shared section header ───────────────────────────────────── */
.section-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  margin-bottom: 10px;
}
.section-heading {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--bleu);
  letter-spacing: -.04em;
  line-height: 1.1;
}
.section-heading--light { color: #fff; }
.section-sub {
  margin-top: 10px;
  font-size: .9rem;
  color: var(--ink-soft);
  max-width: 520px;
}
.section-sub--light { color: rgba(255,255,255,.55); }

/* ── Shared section wrapper ──────────────────────────────────── */
.hp-section { position: relative; z-index: 20; padding: 88px 56px; margin: 0; background: var(--gris); display: block; }
.hp-section--white { background: #fff; }
.hp-section--navy  { background: var(--bleu); }
.hp-inner { max-width: var(--max-w); margin: 0 auto; }
.hp-head  { margin-bottom: 48px; }

/* ── Testimonials ────────────────────────────────────────────── */
.testi-carousel-wrap { width: 100%; position: relative; overflow: hidden; }

.testi-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.testi-card {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: calc((100% - 48px) / 3);
  background: var(--gris);
  border: 1px solid var(--gris-mid);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow var(--t), border-color var(--t);
}
.testi-card:hover { box-shadow: var(--s-md); border-color: var(--bleu-clair); }
.testi-stars { color: #f59e0b; font-size: 1rem; letter-spacing: 2px; }
.testi-text { font-size: .88rem; color: var(--ink-soft); line-height: 1.78; font-style: italic; flex: 1; }
.testi-name { font-size: .88rem; font-weight: 700; color: var(--bleu); }
.testi-detail { font-size: .75rem; color: var(--ink-muted); margin-top: 3px; }

/* Bouton laisser un avis */
.testi-review-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border: 1.5px solid var(--bleu);
  border-radius: 50px;
  color: var(--bleu);
  font-family: 'Outfit', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .02em;
  transition: background var(--t), color var(--t), transform var(--t);
  white-space: nowrap;
}
.testi-review-btn:hover {
  background: var(--bleu);
  color: #fff;
  transform: translateY(-2px);
}

/* Contrôles carousel — flèches latérales sur desktop */
.testi-controls { display: block; }
.testi-dots { display: none; }
.testi-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--gris-mid);
  background: #fff;
  color: var(--bleu);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--s-sm);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.testi-arrow:hover { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.testi-arrow svg { width: 18px; height: 18px; }
.testi-arrow--prev { left: 6px; }
.testi-arrow--next { right: 6px; }

/* ── Carousel mobile ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .testi-carousel-wrap { overflow: hidden; width: 100%; }

  .testi-grid {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }
  .testi-card {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: unset;
    padding: 24px 20px;
  }

  /* Contrôles */
  .testi-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
  }
  .testi-arrow {
    position: static;
    transform: none;
    box-shadow: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--gris-mid);
    background: var(--gris);
    color: var(--bleu);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--t), border-color var(--t);
    flex-shrink: 0;
  }
  .testi-arrow:hover { background: var(--bleu); color: #fff; border-color: var(--bleu); }
  .testi-arrow svg { width: 18px; height: 18px; }

  .testi-dots { display: flex; gap: 8px; align-items: center; }
  .testi-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gris-mid);
    transition: background .3s, transform .3s;
  }
  .testi-dot--active {
    background: var(--bleu);
    transform: scale(1.3);
  }
}

/* ── Carousel avis : tablette — 2 avis visibles ──────────────── */
@media (min-width: 641px) and (max-width: 900px) {
  .testi-card {
    flex: 0 0 calc((100% - 24px) / 2);
    min-width: calc((100% - 24px) / 2);
  }
}

/* ── Zone d'intervention ─────────────────────────────────────── */
.zone-simple { text-align: center; }
.zone-simple__cities {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1;
}
.zone-simple__dot { color: #fff; opacity: .35; }
.zone-simple__sub {
  margin-top: 14px;
  font-size: .88rem;
  color: #fff;
  font-style: italic;
}
.zone-simple__cta {
  display: inline-block;
  margin-top: 32px;
  padding: 11px 26px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: background var(--t), border-color var(--t);
}
.zone-simple__cta:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* ── Tarifs ──────────────────────────────────────────────────── */
.tarifs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tarif-card {
  background: #fff;
  border: 1px solid var(--gris-mid);
  border-radius: var(--r-lg);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.tarif-card:hover { transform: translateY(-6px); box-shadow: var(--s-md); border-color: var(--bleu-clair); }
.tarif-card__cat {
  font-size: .65rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bleu-clair); margin-bottom: 14px;
}
.tarif-card__from { font-size: .72rem; color: var(--ink-muted); margin-bottom: 4px; }
.tarif-card__price {
  font-size: 2.4rem; font-weight: 800; color: var(--bleu);
  letter-spacing: -.05em; line-height: 1;
}
.tarif-card__unit { font-size: .75rem; color: var(--ink-muted); margin-bottom: 24px; margin-top: 4px; }
.tarif-card__list {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.tarif-card__list li {
  font-size: .82rem; color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
}
.tarif-card__list li::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: var(--bleu-clair); flex-shrink: 0;
}
.tarif-card__cta {
  display: block; text-align: center; padding: 12px;
  background: var(--bleu); color: #fff; border-radius: var(--r-sm);
  font-size: .82rem; font-weight: 700; transition: background var(--t-fast); margin-top: auto;
}
.tarif-card__cta:hover { background: var(--bleu-mid); }
.tarifs-note { text-align: center; margin-top: 18px; font-size: .75rem; color: var(--ink-muted); }


/* Contrôles social carousel — cachés sur desktop */
.social-controls { display: none; }
.social-carousel-wrap { width: 100%; }

/* ── Social cards ────────────────────────────────────────────── */
.social-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.social-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 32px 28px;
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: transform var(--t), box-shadow var(--t);
}
.social-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.social-card--insta {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
}
.social-card--fb {
  background: #1877f2;
  color: #fff;
}
.social-card__icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.2);
  border-radius: 14px;
}
.social-card__icon svg { width: 26px; height: 26px; }
.social-card__body { flex: 1; }
.social-card__name {
  display: block;
  font-size: 1.05rem; font-weight: 700; color: #fff;
  margin-bottom: 2px;
}
.social-card__label {
  display: block;
  font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  color: rgba(255,255,255,.75);
  margin-bottom: 8px;
}
.social-card__desc {
  font-size: .85rem; color: rgba(255,255,255,.85);
  line-height: 1.55; margin: 0;
}
.social-card__arrow {
  font-size: 1.4rem; color: rgba(255,255,255,.6);
  flex-shrink: 0; transition: transform var(--t);
}
.social-card:hover .social-card__arrow { transform: translateX(5px); }
.galerie-cta {
  margin-top: 28px; text-align: center;
  font-size: .82rem; color: var(--ink-muted);
}
.galerie-cta a { color: var(--bleu-clair); font-weight: 600; transition: color var(--t-fast); }
.galerie-cta a:hover { color: var(--bleu); }

/* ── FAQ ─────────────────────────────────────────────────────── */
details.faq-item { border-top: 1px solid var(--gris-mid); }
details.faq-item:last-child { border-bottom: 1px solid var(--gris-mid); }
details.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 22px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
details.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { font-size: .97rem; font-weight: 700; color: var(--bleu); }
.faq-chevron {
  width: 20px; height: 20px; color: var(--bleu-clair);
  flex-shrink: 0; transition: transform .3s var(--ease-spring);
}
details[open] .faq-chevron { transform: rotate(180deg); }
.faq-a {
  padding: 0 32px 22px 0;
  font-size: .88rem; color: var(--ink-soft); line-height: 1.78; max-width: 700px;
}
.faq-a strong { color: var(--bleu); font-weight: 600; }

/* ── Responsive extras ───────────────────────────────────────── */
@media (max-width: 960px) {
  .testi-grid { grid-template-columns: 1fr; }
  .social-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hp-section { padding: 56px 20px; }
  .social-cards { grid-template-columns: 1fr; }
  .footer { padding: 14px 20px; }
}

/* ================================================================
   SAVOIR-FAIRE v2 — full redesign
   ================================================================ */

/* Outer wrapper — slides over hero */
.sf-page {
  position: relative;
  z-index: 20;
  background: var(--bleu);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 72px rgba(0,0,0,.28);
  overflow: hidden;
  margin-top: -40px;
}

/* Sections */
.sfp-section          { padding: 88px 56px; background: var(--gris); }
.sfp-section--navy    { background: var(--bleu); }
.sfp-section--contact { background: var(--gris); padding-bottom: 80px; }

.sfp-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Section label + title */
.sfp-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  margin-bottom: 12px;
}
.sfp-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--bleu);
  letter-spacing: -.04em;
  line-height: 1.1;
  margin-bottom: 48px;
}
.sfp-title--light { color: #fff; }

/* Manifesto quote */
.sfp-quote {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.04em;
  margin-bottom: 64px;
}
.sfp-quote em { color: var(--bleu-clair); font-style: normal; }

/* Stats strip */
.sfp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 48px;
  gap: 32px;
}
.sfp-stat { display: flex; flex-direction: column; gap: 8px; }
.sfp-stat__num {
  font-size: 2.6rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -.05em;
}
.sfp-stat__plus { font-size: 1.8rem; color: var(--bleu-clair); }
.sfp-stat__label {
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

/* Equipment cards */
.sfp-equip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.sfp-equip-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg);
  padding: 28px 22px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.sfp-equip-card:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(75,174,232,.4);
  transform: translateY(-6px);
}
.sfp-equip-icon { width: 36px; height: 36px; color: var(--bleu-clair); }
.sfp-equip-icon svg {
  width: 100%; height: 100%;
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.sfp-equip-name { font-size: .95rem; font-weight: 700; color: #fff; }
.sfp-equip-desc { font-size: .8rem; line-height: 1.72; color: rgba(255,255,255,.55); }

/* Engagements — 2×2 grid using sf-block */
.sfp-engage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .sfp-section { padding: 64px 32px; }
  .sfp-stats { grid-template-columns: repeat(2, 1fr); }
  .sfp-equip { grid-template-columns: repeat(2, 1fr); }
  .sfp-engage { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sfp-section { padding: 52px 20px; }
  .sfp-equip { grid-template-columns: 1fr; }
}

/* ================================================================
   CURSOR GLOW — ambient trailing light (desktop only)
   ================================================================ */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 520px; height: 520px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(
    circle at center,
    rgba(75, 174, 232, .08) 0%,
    transparent 65%
  );
  will-change: transform;
  transition: opacity .4s ease;
}
@media (hover: none) { .cursor-glow { opacity: 0; } }


/* ================================================================
   HERO HOME — split 55 / 45 : texte gauche · vidéo droite
   ================================================================ */
.hero--home {
  height: auto !important;
  min-height: 100dvh !important;
  display: grid !important;
  grid-template-columns: 55% 45% !important;
  align-items: stretch !important;
  padding: 0 !important;
  overflow: visible;
}
.hero--home::before,
.hero--home::after { display: none !important; }

/* ── Blobs déco ────────────────────────────────────────────── */
.hero__blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.hero__blob--1 {
  width: 800px; height: 800px;
  right: -100px; bottom: -300px;
  background: radial-gradient(circle, rgba(75,174,232,.13) 0%, transparent 70%);
  animation: blob-drift 9s ease-in-out infinite;
}
.hero__blob--2 {
  width: 320px; height: 320px;
  left: -60px; top: -80px;
  background: radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 70%);
  animation: blob-drift 6.5s ease-in-out infinite reverse;
}

/* ── GAUCHE — panneau texte ────────────────────────────────── */
.hero__left {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 80px;
  gap: 28px;
}

/* Badge pill */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50px;
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  animation: fadeUp .65s var(--ease-spring) .05s both;
}
.hero__badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bleu-clair);
  flex-shrink: 0;
  display: block;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(75,174,232,.6); }
  50%       { box-shadow: 0 0 0 6px rgba(75,174,232,0); }
}

/* H1 */
.hero__title {
  font-size: clamp(3rem, 5.8vw, 5.8rem);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -.05em;
  color: var(--blanc);
  display: block;
}
.hero__line-wrap {
  display: block;
  overflow: hidden;
}
.hero__line {
  display: block;
  animation: lineReveal .9s var(--ease-spring) .1s both;
}
.hero__line-wrap:nth-child(2) .hero__line { animation-delay: .26s; }
.hero__line--accent { color: var(--bleu-clair); }
@keyframes lineReveal {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

/* Subtitle */
.hero__sub {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.8;
  color: rgba(255,255,255,.52);
  max-width: 420px;
  margin: 0;
  animation: fadeUp .7s var(--ease-spring) .42s both;
}

/* Actions */
.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  animation: fadeUp .7s var(--ease-spring) .54s both;
}

/* Primary CTA */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 42px;
  background: var(--bleu-clair);
  color: var(--blanc);
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 8px 36px rgba(75,174,232,.42);
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.hero__cta svg { width: 18px; height: 18px; transition: transform var(--t); }
.hero__cta:hover {
  background: #5bbff0;
  transform: translateY(-2px);
  box-shadow: 0 16px 52px rgba(75,174,232,.58);
}
.hero__cta:hover svg { transform: translateX(4px); }
.hero__cta:active { transform: scale(.97); }

/* Phone link */
.hero__tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.5);
  font-size: .96rem;
  transition: color var(--t);
}
.hero__tel svg { width: 17px; height: 17px; flex-shrink: 0; }
.hero__tel:hover { color: rgba(255,255,255,.9); }

/* ── Infos pratiques ───────────────────────────────────────── */
.hero__infos {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fadeUp .7s var(--ease-spring) .64s both;
}
.hero__info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .88rem;
  color: rgba(255,255,255,.42);
  font-weight: 400;
}
.hero__info svg {
  width: 17px; height: 17px;
  flex-shrink: 0;
  stroke: rgba(75,174,232,.72);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Scroll hint ───────────────────────────────────────────── */
.hero__hint {
  position: absolute;
  bottom: 44px;
  left: 27.5%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  animation: fadeUp .7s var(--ease-spring) 1.1s both;
}
.hero__hint-label {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  white-space: nowrap;
}
/* Icône souris */
.hero__hint-mouse {
  width: 26px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 13px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.hero__hint-wheel {
  width: 4px;
  height: 8px;
  background: rgba(255, 255, 255, .9);
  border-radius: 2px;
  animation: wheel-scroll 1.8s ease-in-out infinite;
}
@keyframes wheel-scroll {
  0%   { opacity: 1;   transform: translateY(0); }
  60%  { opacity: 0;   transform: translateY(12px); }
  61%  { opacity: 0;   transform: translateY(0); }
  100% { opacity: 1;   transform: translateY(0); }
}

/* ── DROITE — panneau vidéo ────────────────────────────────── */
.hero__right {
  position: relative;
  overflow: hidden;
  clip-path: inset(0);
}

.hero__img-frame {
  position: absolute;
  inset: 0;
}
.hero__img-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Bulles flottantes (stat cards) ────────────────────────── */
.stat-card {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 22px;
  background: rgba(13, 45, 110, .44);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  box-shadow:
    0 12px 48px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.14);
  animation: float-card 5s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  pointer-events: none;
}

/* Anciennes positions supprimées — voir les nouvelles plus bas */

@keyframes float-card {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
/* Bulle centrale — conserve le centrage horizontal */
@keyframes float-card-center {
  0%, 100% { transform: translateX(-50%) translateY(0px); }
  50%       { transform: translateX(-50%) translateY(-10px); }
}

.stat-card__row {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.stat-card__num {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--blanc);
  letter-spacing: -.04em;
  line-height: 1;
}
.stat-card__num--sm { font-size: 1.4rem; }
.stat-card__plus {
  font-size: .75rem;
  font-weight: 600;
  color: var(--bleu-clair);
  vertical-align: super;
}
.stat-card__label {
  font-size: .68rem;
  color: rgba(255,255,255,.52);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
}
.stat-card__icon {
  width: 22px; height: 22px;
  color: var(--bleu-clair);
  margin-bottom: 4px;
}
.stat-card__icon svg {
  width: 100%; height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ================================================================
   CARDS SECTION — shimmer top edge + taller cards
   ================================================================ */
.cards-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(75,174,232,.4) 28%,
    rgba(255,255,255,.65) 50%,
    rgba(75,174,232,.4) 72%,
    transparent
  );
}

/* Taller cards on home page — height:auto so rows stretch to fill 100dvh */
.cards-section .card { min-height: 440px; height: auto; }

/* Cards sit at bottom-left (editorial) */
.cards-section .card__content {
  justify-content: flex-end;
  align-items: flex-start;
  padding: 32px;
}
.cards-section .card__title { text-align: left; }


/* ================================================================
   CARD ARROW — SVG pill icon
   ================================================================ */
.card__arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  opacity: 0;
  transform: translateY(10px) scale(.82);
  transition:
    opacity .32s ease,
    transform .32s var(--ease-spring),
    background .26s ease,
    border-color .26s ease;
  font-size: 0;
  letter-spacing: 0;
  gap: 0;
  flex-shrink: 0;
}
.card__arrow::after { display: none !important; }
.card__arrow svg { width: 15px; height: 15px; }
.card:hover .card__arrow {
  opacity: 1;
  transform: translateY(0) scale(1);
  background: rgba(75,174,232,.28);
  border-color: rgba(75,174,232,.5);
}


/* ================================================================
   RESPONSIVE — home hero collapse
   ================================================================ */
@media (max-width: 960px) {
  .hero--home {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    min-height: auto !important;
  }
  .hero__left {
    padding: var(--nav-h) 44px 0;
  }
  .hero__right {
    height: 55vw;
    min-height: 340px;
  }
  .hero__title  { font-size: clamp(2.6rem, 8vw, 4rem); }
  .hero__sub    { max-width: 100%; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero__badge  { margin-bottom: 32px; }
  .hero__actions { margin-bottom: 40px; }
}

@media (max-width: 640px) {
  .hero__left { padding: var(--nav-h) 24px 0; }
  .hero__title { font-size: 2.5rem; }
  .hero__badge { font-size: .7rem; }
  .hero__right { height: 72vw; min-height: 260px; }
  .stat-card { transform: scale(.82); transform-origin: top left; }
  .stat-card--1 { top: 10%; right: 4%; }
  .stat-card--3 { bottom: 6%; right: 4%; }
}

@media (max-width: 768px) {
  .cards-section .card { min-height: 320px; height: auto; }
  .cards-section .card__content { padding: 22px; }
}

@media (max-width: 480px) {
  .cards-section .card { min-height: 280px; height: auto; }
}


/* ================================================================
   HERO HOME — split 55/45 · premium design
   ================================================================ */
.hero--home {
  height: auto !important;
  min-height: 100dvh !important;
  display: grid !important;
  grid-template-columns: 55% 45% !important;
  align-items: stretch !important;
  padding: 0 !important;
  overflow: visible;
}
.hero--home::before,
.hero--home::after { display: none !important; }

/* ── Séparateur lumineux vertical ─────────────────────────── */
.hero__sep {
  position: absolute;
  top: 12%; bottom: 12%;
  left: 55%;
  width: 1px;
  transform: translateX(-50%);
  z-index: 3;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(75,174,232,.5) 25%,
    rgba(255,255,255,.22) 50%,
    rgba(75,174,232,.5) 75%,
    transparent 100%
  );
  pointer-events: none;
}

/* ── Blobs décoratifs ─────────────────────────────────────── */
.hero__blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.hero__blob--1 {
  width: 900px; height: 900px;
  right: -180px; bottom: -320px;
  background: radial-gradient(circle, rgba(75,174,232,.11) 0%, transparent 70%);
  animation: blob-drift 10s ease-in-out infinite;
}
.hero__blob--2 {
  width: 360px; height: 360px;
  left: -80px; top: -120px;
  background: radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 70%);
  animation: blob-drift 7s ease-in-out infinite reverse;
}

/* ── GAUCHE — panneau texte ───────────────────────────────── */
.hero__left {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 72px;
  gap: 28px;
}

/* H1 */
.hero__title {
  font-size: clamp(3rem, 5.8vw, 5.8rem);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -.05em;
  color: var(--blanc);
  display: block;
}
.hero__line-wrap { display: block; overflow: hidden; }
.hero__line {
  display: block;
  animation: lineReveal .9s var(--ease-spring) .1s both;
}
.hero__line-wrap:nth-child(2) .hero__line { animation-delay: .26s; }
.hero__line--accent { color: var(--bleu-clair); }
@keyframes lineReveal {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

/* Badge localisation */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 36px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  animation: fadeUp .65s var(--ease-spring) .05s both;
}
.hero__badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bleu-clair);
  flex-shrink: 0;
  display: block;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(75,174,232,.6); }
  50%       { box-shadow: 0 0 0 6px rgba(75,174,232,0); }
}

/* Sous-titre */
.hero__sub {
  font-size: clamp(.9rem, 1.1vw, 1.05rem);
  line-height: 1.85;
  color: #fff;
  max-width: 400px;
  animation: fadeUp .7s var(--ease-spring) .42s both;
}

/* Lien téléphone */
.hero__tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50px;
  color: rgba(255,255,255,.85);
  font-size: .95rem;
  font-weight: 500;
  backdrop-filter: blur(8px);
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
  animation: fadeUp .7s var(--ease-spring) .54s both;
}
.hero__tel svg { width: 17px; height: 17px; flex-shrink: 0; }
.hero__tel:hover {
  background: var(--bleu-clair);
  border-color: var(--bleu-clair);
  color: var(--blanc);
  transform: translateY(-2px);
}

/* ── DROITE — panneau vidéo ───────────────────────────────── */
.hero__right {
  position: relative;
  overflow: hidden;
  clip-path: inset(0);
}

/* Fondu gauche — désactivé */
.hero__right-fade { display: none; }

.hero__img-frame {
  position: absolute;
  inset: 0;
}
.hero__img-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Bulles (stat cards) ──────────────────────────────────── */
.stat-card {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  width: max-content;
  height: auto;
  background: rgba(6, 14, 52, .86);
  border: 1px solid rgba(255,255,255,.12);
  border-top: 2px solid var(--bleu-clair);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
  animation: float-card 6s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  pointer-events: none;
  white-space: nowrap;
}

/* La bulle icône (garantie pluie) reste en ligne */
.stat-card--3 {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* Positions — dispersées dans le panneau vidéo */
.stat-card--1 {
  top: 12%; right: 5%; left: auto;
  animation: float-1 5.5s ease-in-out infinite;
}
.stat-card--2 {
  top: 50%; right: 30%; left: auto;
  animation: float-2 7s ease-in-out infinite;
  animation-delay: .8s;
}
.stat-card--3 {
  bottom: 13%; right: 6%; left: auto;
  animation: float-3 6.5s ease-in-out infinite;
  animation-delay: 1.6s;
}

@keyframes float-1 {
  0%, 100% { transform: translateY(0px)   rotate(-1deg); }
  50%       { transform: translateY(-10px) rotate(1deg); }
}
@keyframes float-2 {
  0%, 100% { transform: translateY(0px)  translateX(0px); }
  33%       { transform: translateY(-8px) translateX(4px); }
  66%       { transform: translateY(-4px) translateX(-3px); }
}
@keyframes float-3 {
  0%, 100% { transform: translateY(0px)   rotate(1deg); }
  50%       { transform: translateY(-9px)  rotate(-0.5deg); }
}

.stat-card__num {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.04em;
  line-height: 1;
}
.stat-card__plus {
  font-size: .65rem;
  font-weight: 700;
  color: #fff;
  vertical-align: super;
  margin-left: 1px;
}
.stat-card__label {
  font-size: .59rem;
  color: #fff;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 400;
}
.stat-card__icon {
  width: 13px; height: 13px;
  color: #fff;
  flex-shrink: 0;
}
.stat-card__icon svg {
  width: 100%; height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Scroll hint ──────────────────────────────────────────── */
.hero__hint {
  position: absolute;
  bottom: 38px;
  left: 27.5%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  animation: fadeUp .65s var(--ease-spring) .9s both;
}
.hero__hint-mouse {
  width: 26px; height: 40px;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 13px;
  display: flex;
  justify-content: center;
  padding-top: 7px;
}
.hero__hint-wheel {
  width: 4px; height: 8px;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
  animation: wheel-scroll 1.8s ease-in-out infinite;
}
@keyframes wheel-scroll {
  0%   { opacity: 1;   transform: translateY(0); }
  60%  { opacity: 0;   transform: translateY(12px); }
  61%  { opacity: 0;   transform: translateY(0); }
  100% { opacity: 1;   transform: translateY(0); }
}

/* ── Responsive hero ──────────────────────────────────────── */
@media (max-width: 960px) {
  .hero--home {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    min-height: auto !important;
  }
  .hero__left { padding: calc(var(--nav-h) + 56px) 40px 52px; align-items: center; text-align: center; }
  .hero__right { height: 56vw; min-height: 340px; }
  .hero__sep { display: none; }
  .hero__hint { left: 50%; }
  /* Stat cards : repositionnées dans la zone vidéo */
  .stat-card--1 { top: auto; bottom: 58%; right: 5%; left: auto; }
  .stat-card--2 { top: auto; bottom: 30%; right: 38%; left: auto; }
  .stat-card--3 { bottom: 8%; right: 5%; left: auto; }
}
@media (max-width: 640px) {
  /* Hero — hauteur fixe */
  .hero--home { min-height: 62vh !important; display: flex !important; flex-direction: column !important; }

  /* Hero gauche — tout centré */
  .hero__left {
    flex: 1 1 auto;
    padding: calc(var(--nav-h) - 16px) 20px 24px;
    gap: 14px;
    align-items: center;
    text-align: center;
    justify-content: center;
    min-height: 0;
  }

  .hero__title { font-size: 3rem; }
  .hero__sub   { font-size: .92rem; margin: 0; }

  /* Badge */
  .hero__badge { font-size: .8rem; padding: 8px 16px; gap: 8px; letter-spacing: .04em; margin: 0; }

  /* Actions — centrées */
  .hero__actions { margin: 0; gap: 14px; justify-content: center; align-items: center; flex-direction: row; flex-wrap: wrap; }

  /* Vidéo cachée sur mobile */
  .hero__right { display: none; }

  /* Stat cards — cachées sur mobile, trop encombrées */
  .stat-card { display: none; }

  .hero__hint { display: none; }
  .hero__right-fade { width: 50px; }
}


/* ================================================================
   CARDS SECTION — premium redesign
   ================================================================ */
.cards-section {
  position: relative;
  z-index: 20;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  box-shadow: 0 -24px 80px rgba(0,0,0,.42);
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  flex-direction: column;
}

/* Shimmer top */
.cards-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(75,174,232,.5) 28%,
    rgba(255,255,255,.75) 50%,
    rgba(75,174,232,.5) 72%,
    transparent
  );
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  flex: 1;
}

/* ── Carte individuelle ───────────────────────────────────── */
.card {
  position: relative;
  display: block;
  min-height: 440px;
  height: auto;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--bleu);
  z-index: 1;
  --mouse-x: 50%; --mouse-y: 50%;
}

.card__bg {
  position: absolute;
  inset: -6px;
  background-size: cover;
  background-position: center;
  transition: transform .9s var(--ease-spring);
  will-change: transform;
}
.card--professionnel .card__bg { background-image: url('https://images.unsplash.com/photo-1752754331999-a20ee211ec20?w=900&auto=format&fit=crop'); }
.card--particulier   .card__bg { background-image: url('https://images.unsplash.com/photo-1513584684374-8bab748fbf90?w=900&auto=format&fit=crop'); background-position: center center; }
.card--chantier      .card__bg { background-image: url('https://images.unsplash.com/photo-1770838773417-08b18661c62f?w=900&auto=format&fit=crop'); }
.card--solaires      .card__bg { background-image: url('https://images.unsplash.com/photo-1655300283246-1ef0317a565d?w=900&auto=format&fit=crop'); }
.card:hover .card__bg { transform: scale(1.07); }

/* Overlay — dégradé bas uniquement, pas de voile global */
.card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,10,30,.85) 0%, rgba(5,10,30,.15) 45%, transparent 70%);
  transition: background .5s var(--ease-spring);
  z-index: 1;
}
.card:hover .card__overlay {
  background: linear-gradient(to top, rgba(13,45,110,.90) 0%, rgba(13,45,110,.35) 55%, transparent 78%);
}

/* Spotlight radial */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  background: radial-gradient(
    circle 240px at var(--mouse-x) var(--mouse-y),
    rgba(75,174,232,.18),
    transparent 68%
  );
  transition: opacity .28s ease;
  pointer-events: none;
}
.card:hover::after { opacity: 1; }

/* Contenu — positionné en bas à gauche */
.card__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 36px;
  gap: 6px;
  transform: translateY(0);
  transition: transform .5s var(--ease-spring);
}
.card:hover .card__content {
  transform: translateY(-20px);
}

/* Grand numéro en filigrane */
.card__num {
  display: none;
}
.card:hover .card__num {
  color: rgba(255,255,255,.13);
  transform: scale(1.04) translateY(-4px);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card__title {
  display: inline-block;
  align-self: flex-start;
  color: var(--blanc);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: .04em;
  padding: 8px 18px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 1;
  transform: translateY(0);
  transition: background .3s ease, border-color .3s ease, padding .3s ease, transform .35s var(--ease-spring);
}
.card:hover .card__title {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 8px 0;
}

.card__desc {
  font-size: .76rem;
  color: rgba(255,255,255,.75);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s ease .18s, transform .4s var(--ease-spring) .18s;
}
.card:hover .card__desc { opacity: 1; transform: translateY(0); }

/* Flèche circulaire */
.card__arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  opacity: 0;
  transform: translateY(14px) scale(.8);
  transition:
    opacity .32s ease .28s,
    transform .42s var(--ease-spring) .28s,
    background .26s ease,
    border-color .26s ease;
  flex-shrink: 0;
}
.card__arrow svg { width: 15px; height: 15px; }
.card:hover .card__arrow {
  opacity: 1;
  transform: translateY(0) scale(1);
  background: rgba(75,174,232,.3);
  border-color: rgba(75,174,232,.55);
}

/* ── Responsive cards ─────────────────────────────────────── */
@media (max-width: 768px) {
  .cards-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); }
  .card { min-height: 300px; height: auto; }
  .card__content { padding: 24px; }
  .card__num { font-size: 3.5rem; }
}
@media (max-width: 480px) {
  .card { min-height: 260px; }
  .card__title { font-size: 1.4rem; }
}

/* ── Cards section remontée sur mobile ───────────────────── */
@media (max-width: 640px) {
  .cards-section { margin-top: -24px; }
}

/* ── Navbar mobile — boutons compacts ────────────────────── */
@media (max-width: 640px) {
  .navbar { padding: 0 14px; }
  .navbar__logo img { height: 32px; }
  .navbar__actions { gap: 6px; }
  .navbar__cta { padding: 6px 11px; font-size: .68rem; letter-spacing: 0; }
}

/* ── Carousel réseaux sociaux mobile ────────────────────── */
@media (max-width: 640px) {
  .social-carousel-wrap { overflow: hidden; width: 100%; }
  .social-cards {
    display: flex !important;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0;
    grid-template-columns: unset;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }
  .social-card {
    flex: 0 0 100% !important;
    min-width: 100%;
    padding: 24px 20px;
    gap: 16px;
  }
  .social-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
  }
  .social-arrow {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--t), border-color var(--t);
    flex-shrink: 0;
  }
  .social-arrow svg { width: 18px; height: 18px; }
  .social-dots { display: flex; gap: 8px; align-items: center; }
  .social-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    transition: background .3s, transform .3s;
  }
  .social-dot--active { background: #fff; transform: scale(1.3); }
}

/* ── Quick-grid mobile — 3 / 4 / 5 cartes ───────────────────── */
@media (max-width: 640px) {

  /* 3 cartes : ligne de 3 */
  .quick-grid--3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  /* 4 cartes : 2 × 2 */
  .quick-grid--4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* 5 cartes : 3 en haut + 2 centrés en bas */
  .quick-grid--5 {
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
  }
  .quick-grid--5 .quick-card { grid-column: span 2; }
  /* Les 2 dernières cartes : centrées sous les 3 du haut */
  .quick-grid--5 .quick-card:nth-child(4) { grid-column: 2 / span 2; }
  .quick-grid--5 .quick-card:nth-child(5) { grid-column: 4 / span 2; }
}

/* ── Quick-grid tablette — 5 cartes centrées ────────────────── */
@media (min-width: 641px) and (max-width: 900px) {
  .quick-grid--5 {
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
  }
  .quick-grid--5 .quick-card { grid-column: span 2; }
  .quick-grid--5 .quick-card:nth-child(4) { grid-column: 2 / span 2; }
  .quick-grid--5 .quick-card:nth-child(5) { grid-column: 4 / span 2; }
}


/* ================================================================
   DESIGN EDITORIAL EPURE (sk-) — partage par toutes les pages
   ================================================================ */

    /* ════════════════════════════════════════════════════════════
       SAVOIR-FAIRE — design éditorial épuré (styles scopés sk-)
       ════════════════════════════════════════════════════════════ */
    .sk-page {
      background: #fff;
      color: var(--ink);
      padding-top: var(--nav-h);
    }
    .sk-wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }

    /* ── Hero minimal ── */
    .sk-hero { padding: 110px 0 90px; }
    .sk-kicker {
      display: inline-flex; align-items: center; gap: 12px;
      font-size: .72rem; font-weight: 600;
      letter-spacing: .22em; text-transform: uppercase;
      color: var(--bleu-clair);
      margin-bottom: 30px;
    }
    .sk-kicker::before { content: ''; width: 36px; height: 1px; background: var(--bleu-clair); }
    .sk-hero h1 {
      font-size: clamp(2.4rem, 5.6vw, 4.2rem);
      font-weight: 300;
      letter-spacing: -.03em;
      line-height: 1.08;
      color: var(--bleu);
      max-width: 17ch;
    }
    .sk-hero h1 strong { font-weight: 700; }
    .sk-hero p {
      margin-top: 28px;
      max-width: 52ch;
      font-size: 1.02rem;
      line-height: 1.8;
      color: var(--ink-soft);
    }

    /* ── Bande chiffres ── */
    .sk-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid var(--gris-mid);
      border-bottom: 1px solid var(--gris-mid);
    }
    .sk-stat {
      padding: 40px 12px;
      text-align: center;
    }
    .sk-stat + .sk-stat { border-left: 1px solid var(--gris-mid); }
    .sk-stat__num {
      display: block;
      font-size: 2.4rem;
      font-weight: 300;
      letter-spacing: -.02em;
      color: var(--bleu);
    }
    .sk-stat__num sup { font-size: 1.2rem; color: var(--bleu-clair); font-weight: 600; }
    .sk-stat__label {
      display: block;
      margin-top: 8px;
      font-size: .74rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }

    /* ── Sections éditoriales : titre gauche / contenu droite ── */
    .sk-section { padding: 110px 0; }
    .sk-section + .sk-section { border-top: 1px solid var(--gris-mid); }
    .sk-cols {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 72px;
      align-items: start;
    }
    .sk-side { position: sticky; top: calc(var(--nav-h) + 40px); }
    .sk-side h2 {
      font-size: 1.9rem;
      font-weight: 300;
      letter-spacing: -.02em;
      line-height: 1.2;
      color: var(--bleu);
      margin-top: 22px;
    }
    .sk-side h2 strong { font-weight: 700; }
    .sk-side p { margin-top: 16px; font-size: .9rem; line-height: 1.75; color: var(--ink-soft); }

    /* ── Méthode : étapes ── */
    .sk-steps { display: flex; flex-direction: column; }
    .sk-step {
      display: grid;
      grid-template-columns: 86px 1fr;
      gap: 28px;
      padding: 38px 0;
    }
    .sk-step + .sk-step { border-top: 1px solid var(--gris-mid); }
    .sk-step__num {
      font-size: 2rem;
      font-weight: 200;
      color: var(--bleu-clair);
      letter-spacing: -.02em;
      line-height: 1;
      padding-top: 4px;
    }
    .sk-step h3 { font-size: 1.06rem; font-weight: 700; color: var(--bleu); margin-bottom: 10px; }
    .sk-step p  { font-size: .92rem; line-height: 1.8; color: var(--ink-soft); }

    /* ── Équipement : grille hairline ── */
    .sk-equip {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border: 1px solid var(--gris-mid);
    }
    .sk-equip-cell {
      padding: 44px 40px;
      transition: background .35s;
    }
    .sk-equip-cell:hover { background: var(--gris); }
    .sk-equip-cell:nth-child(2n) { border-left: 1px solid var(--gris-mid); }
    .sk-equip-cell:nth-child(n+3) { border-top: 1px solid var(--gris-mid); }
    .sk-equip-cell svg {
      width: 30px; height: 30px;
      stroke: var(--bleu-clair); fill: none;
      stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
      margin-bottom: 20px;
    }
    .sk-equip-cell h3 { font-size: 1rem; font-weight: 700; color: var(--bleu); margin-bottom: 10px; }
    .sk-equip-cell p  { font-size: .88rem; line-height: 1.75; color: var(--ink-soft); }

    /* ── Engagements : bande navy ── */
    .sk-promise {
      background: var(--bleu);
      color: #fff;
      padding: 100px 0;
    }
    .sk-promise .sk-kicker { color: var(--bleu-clair); }
    .sk-promise h2 {
      font-size: clamp(1.7rem, 3.4vw, 2.4rem);
      font-weight: 300;
      letter-spacing: -.02em;
      max-width: 22ch;
      line-height: 1.25;
    }
    .sk-promise h2 strong { font-weight: 700; }
    .sk-promise-list {
      margin-top: 56px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 64px;
    }
    .sk-promise-item {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 18px;
      padding: 26px 0;
      border-top: 1px solid rgba(255, 255, 255, .14);
    }
    .sk-promise-item svg {
      width: 20px; height: 20px; margin-top: 2px;
      stroke: var(--bleu-clair); fill: none;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }
    .sk-promise-item h3 { font-size: .98rem; font-weight: 700; margin-bottom: 6px; }
    .sk-promise-item h3 span {
      font-size: .62rem; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--bleu); background: var(--bleu-clair);
      border-radius: 30px; padding: 3px 10px;
      margin-left: 8px; vertical-align: 2px;
    }
    .sk-promise-item p { font-size: .86rem; line-height: 1.7; color: rgba(255, 255, 255, .65); }

    /* ── CTA final ── */
    .sk-cta { padding: 120px 0; text-align: center; }
    .sk-cta h2 {
      font-size: clamp(1.9rem, 4vw, 2.8rem);
      font-weight: 300;
      letter-spacing: -.025em;
      color: var(--bleu);
      line-height: 1.15;
    }
    .sk-cta h2 strong { font-weight: 700; }
    .sk-cta > .sk-wrap > p { margin-top: 18px; font-size: .95rem; color: var(--ink-soft); }
    .sk-cta-actions {
      margin-top: 44px;
      display: flex; gap: 14px;
      align-items: center; justify-content: center;
      flex-wrap: wrap;
    }
    .sk-btn {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 16px 38px;
      border-radius: 50px;
      font-family: 'Outfit', sans-serif;
      font-size: .92rem; font-weight: 700;
      letter-spacing: .01em;
      text-decoration: none;
      transition: transform .25s, box-shadow .25s, background .25s, color .25s;
    }
    .sk-btn--primary { background: var(--bleu); color: #fff; }
    .sk-btn--primary:hover { background: var(--bleu-clair); transform: translateY(-2px); }
    .sk-btn--ghost { border: 1.5px solid var(--gris-mid); color: var(--bleu); }
    .sk-btn--ghost:hover { border-color: var(--bleu-clair); transform: translateY(-2px); }
    .sk-cta-note { margin-top: 22px; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }

    /* ── Responsive ── */
    @media (max-width: 880px) {
      .sk-hero { padding: 70px 0 60px; }
      .sk-section { padding: 70px 0; }
      .sk-cols { grid-template-columns: 1fr; gap: 40px; }
      .sk-side { position: static; }
      .sk-stats { grid-template-columns: 1fr 1fr; }
      .sk-stat:nth-child(3) { border-left: none; }
      .sk-stat:nth-child(n+3) { border-top: 1px solid var(--gris-mid); }
      .sk-equip { grid-template-columns: 1fr; }
      .sk-equip-cell:nth-child(2n) { border-left: none; }
      .sk-equip-cell:nth-child(n+2) { border-top: 1px solid var(--gris-mid); }
      .sk-equip-cell { padding: 34px 26px; }
      .sk-promise { padding: 70px 0; }
      .sk-promise-list { grid-template-columns: 1fr; gap: 0; margin-top: 36px; }
      .sk-cta { padding: 80px 0; }
      .sk-step { grid-template-columns: 56px 1fr; gap: 18px; padding: 30px 0; }
    }
  

/* ── Ligne de tags (categories) ── */
.sk-tags {
  text-align: center;
  padding: 26px 16px;
  border-top: 1px solid var(--gris-mid);
  border-bottom: 1px solid var(--gris-mid);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.sk-tags b { color: var(--bleu-clair); font-weight: 600; padding: 0 14px; }

/* ── Avant/Apres dans une section epuree ── */
.sk-section--ba { padding: 90px 0; }
.sk-section--ba .ba { margin: 0 auto; }

/* ── Section contact epuree ── */
.sk-contact {
  padding: 110px 0;
  border-top: 1px solid var(--gris-mid);
  text-align: center;
}
.sk-contact h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -.025em;
  color: var(--bleu);
  line-height: 1.15;
}
.sk-contact h2 strong { font-weight: 700; }
.sk-contact__sub { margin-top: 14px; font-size: .9rem; color: var(--ink-soft); }
.sk-form { max-width: 640px; margin: 48px auto 0; text-align: left; }
.sk-altcontact { margin-top: 34px; font-size: .86rem; color: var(--ink-soft); }
.sk-altcontact a { color: var(--bleu); font-weight: 600; }
.sk-altcontact a:hover { color: var(--bleu-clair); }
.sk-altcontact span { color: var(--gris-mid); padding: 0 10px; }
@media (max-width: 880px) {
  .sk-contact { padding: 70px 0; }
  .sk-section--ba { padding: 60px 0; }
}

.sk-narrow { max-width: 820px; margin: 0 auto; }