/* ════════════════════════════════════════════════════════════
   SMARTSUN + SMARTWATER — CSS Premium Style inspiré smart-sun.fr
   Navy commun aux deux univers : #0a1c2b → #275e85, ancré sur #173b59.
   Accents : #1ab977 (SmartSun) · #00b4d8 (SmartWater) · #fff
   ════════════════════════════════════════════════════════════ */

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── LE NAVY ──
   Il y en avait une vingtaine. Quatre systèmes indépendants — le navy
   SmartSun de ce fichier, le navy SmartWater (#04141f, nettement plus
   froid), celui de la fiche produit (#13354d) et celui des fiches eau
   (#0a2b42) — plus une douzaine d'arrêts de dégradé écrits à la main
   (#020c15, #082840, #0c2033, #0d2c40, #071523…). Chacun est défendable
   isolément ; ensemble ils font que le fond sombre n'est pas le même d'une
   page à l'autre, et c'est exactement ce qui se voit en naviguant.

   Une seule rampe, donc, et tout la référence. Elle est linéaire : les
   trois composantes gardent le rapport 0,26 / 0,66 / 1 de #173b59, ce qui
   est la définition d'un dégradé de la même couleur — les navies écartés
   n'avaient pas ce rapport (#04141f vaut 0,13 sur le rouge : d'où sa
   froideur), et c'est pourquoi ils juraient les uns à côté des autres.

   L'univers reste lisible : c'est l'accent qui le porte, vert ou cyan, pas
   le fond. */
:root {
  /* SmartSun */
  --dark-950:    #0a1c2b; /* fonds de dégradé les plus profonds */
  --dark:        #173b59;
  --dark-900:    #0e263b;
  --dark-800:    #112e47;
  --dark-700:    #1a4264;
  --dark-600:    #1f4d72;
  --dark-400:    #275e85;
  --dark-muted:  #c5d5e2; /* texte secondaire sur fond sombre (lead, cta-band...) */
  --green:       #1ab977;
  --green-dark:  #0d9660;
  --green-light: #25d48a;
  --mint-soft:   #e7f7f0; /* fond pastille vert clair (badges, tags) */

  /* SmartWater — même navy que SmartSun, seul l'accent change */
  --w-bg:        var(--dark-950);
  --w-surface:   var(--dark-800);
  --w-card:      var(--dark-700);
  --w-accent:    #00b4d8;
  --w-accent2:   #0077b6;
  --w-light:     #48cae4;
  --w-muted:     #5baec8;
  --accent-current: var(--green); /* bascule selon univers */
  --accent-rgb: 26, 185, 119;     /* même accent, en composantes, pour les rgba() */

  /* Neutres */
  --white:       #ffffff;
  --gray-50:     #f9fafb;
  --gray-100:    #f3f4f6;
  --gray-200:    #e5e7eb;
  --gray-400:    #9ca3af;
  --gray-600:    #6b7280;
  --gray-800:    #1f2937;

  /* Tokens */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 100px;
  /* Pastilles d'icône (carrées). Le site en comptait 23, de 26 à 62 px de
     côté, avec dix rayons différents distribués sans rapport avec la taille :
     une pastille de 58 px arrondie à 14 px paraissait plus dure qu'une de
     38 px arrondie à 10 px. Un pourcentage donne le même arrondi *relatif*
     partout, ce qui est la seule définition d'uniformité valable entre
     pastilles de tailles différentes. 28 % est la moyenne des ratios déjà
     en place : chaque pastille bouge de moins de 2 px, mais elles finissent
     toutes avec le même galbe. */
  --radius-ico:  28%;
  /* Filet neutre des cartes. Il existait quatre gris pour ce seul usage :
     #e4eaee (le repli de `var(--line, …)`, jamais défini jusqu'ici), #e5e7eb
     (--gray-200), #e8edf2 en dur, et #e2e8f0 (--gray100, product.css). Tous
     séparés par deux ou trois points : invisibles isolément, mais deux cartes
     voisines issues de deux pages différentes n'avaient pas le même contour.
     --line tranche pour le gris légèrement froid, cohérent avec le navy. */
  --line:        #e4eaee;

  /* Ces trois-là étaient appelés sans jamais avoir été déclarés. La section
     bestsellers était écrite contre eux : `.bs-section{background:var(--surface)}`
     et `.bs-card{background:var(--card);border:1px solid var(--border)}`. Une
     `var()` non résolue invalide la déclaration entière au calcul — les cartes
     n'avaient donc ni fond ni contour, et la bordure retombait sur `currentColor`
     avec une épaisseur de 0. La « carte » vedette du produit phare était en
     réalité du texte posé à même la page. D'où l'impression qu'il ne s'y passe
     rien : il n'y avait pas de carte.
     Ils pointent sur les neutres déjà en place, `--line` ayant justement été
     créé pour le filet des cartes. */
  --surface:     var(--gray-50);
  --card:        var(--white);
  --border:      var(--line);

  --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:   0 4px 20px rgba(0,0,0,.12);
  --shadow-lg:   0 12px 48px rgba(0,0,0,.18);
  --shadow-green:0 0 40px rgba(26,185,119,.2);
  --shadow-cyan: 0 0 40px rgba(0,180,216,.2);
  --trans:       all .3s cubic-bezier(.4,0,.2,1);
  --trans-slow:  all .6s cubic-bezier(.4,0,.2,1);
  --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Échelle d'espacements (valeurs actuelles recensées — harmonisation en Phase 4) */
  --space-4:  4px;
  --space-6:  6px;
  --space-8:  8px;
  --space-9:  9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-17: 17px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-36: 36px;
  --space-60: 60px;

  /* Hauteur de la navbar fixe (76px, identique desktop/mobile) */
  --nav-h: 76px;

  /* Tailles de police des composants structurants (échelle typographique complète en Phase 3) */
  --fs-xs:    .75rem;
  --fs-sm:    .85rem;
  --fs-nav:   .88rem;
  --fs-base:  .95rem;
  --fs-md:    1rem;
  --fs-lg:    1.05rem;
  --fs-title: clamp(2rem, 4vw, 3rem);
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font);
  color: var(--dark);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; transition: var(--trans); }
ul { list-style: none; }

.container {
  --container-pad: var(--space-24);
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section-pad { padding: clamp(64px, 8vh, 96px) 0; }

/* ── TYPOGRAPHIE ─────────────────────────────────────────── */
/* Le sur-titre de section existait en deux versions : texte nu sur 69 emplois,
   pastille bordée sur 15 (`.section-label w-section-label`) — et une troisième
   sur les fiches produit (`.wpx-eyebrow`), elle aussi en pastille. Même
   composant, trois allures selon l'ancienneté de la page. C'est la pastille
   qui l'emporte : c'est la forme des pages les plus récentes, et elle donne au
   sur-titre le poids d'un repère plutôt que celui d'une ligne de texte perdue
   au-dessus du titre.

   Les couleurs passent par --accent-current / --accent-rgb : la bascule
   SmartSun ↔ SmartWater (body.universe-water) recolore la pastille toute
   seule, sans classe supplémentaire — c'est ce qui rend `.w-section-label`
   inutile. */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-current);
  background: rgba(var(--accent-rgb), .10);
  border: 1px solid rgba(var(--accent-rgb), .22);
  padding: var(--space-6) var(--space-13);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-12);
}

.section-title {
  font-size: var(--fs-title);
  font-weight: 800;
  line-height: 1.15;
  color: var(--dark);
  margin-bottom: var(--space-20);
  letter-spacing: -.02em;
}

.section-desc {
  font-size: var(--fs-lg);
  color: var(--gray-600);
  max-width: 560px;
  line-height: 1.75;
}

.section-header { text-align: center; margin-bottom: var(--space-60); }
.section-header .section-desc { margin: 0 auto; }

.gradient-text {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dark section overrides */
/* Ces blocs ne redéfinissent plus `color` sur le sur-titre mais l'accent
   lui-même : depuis que `.section-label` est une pastille, ne repeindre que
   le texte donnait du cyan sur un fond et un liseré restés verts. Les
   sections eau de l'accueil cohabitent avec les sections solaires dans le
   même document, sans body.universe-water pour les distinguer — l'accent
   doit donc basculer au niveau de la section. */
.dark-section { background: var(--dark); color: var(--white); }
.dark-section .section-title { color: var(--white); }
.dark-section .section-desc  { color: rgba(255,255,255,.65); }

/* Water dark section — même fond que `.dark-section`. Les deux cohabitent
   dans le document de l'accueil : tant que l'eau était sur un navy plus
   profond, deux bandes sombres de la même page ne tombaient pas sur la même
   couleur. Ce qui les sépare est la ligne suivante — l'accent. */
.water-dark-section { background: var(--dark); color: var(--white); }
.water-dark-section, .w-section, .wp-catalog-hero, .page-header--water {
  --accent-current: var(--w-accent);
  --accent-rgb: 0, 180, 216;
}
.water-dark-section .section-title { color: var(--white); }
.water-dark-section .section-desc  { color: rgba(255,255,255,.65); }

/* ── BOUTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-13) var(--space-26);
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--fs-base);
  cursor: pointer;
  border: none;
  transition: var(--trans);
  white-space: nowrap;
  letter-spacing: -.01em;
}
.btn-lg { padding: var(--space-17) var(--space-36); font-size: var(--fs-md); }
.btn-sm { padding: var(--space-9) var(--space-20); font-size: var(--fs-sm); }
.btn-block { width: 100%; justify-content: center; }

.btn-primary {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: var(--white);
  box-shadow: 0 4px 20px rgba(26,185,119,.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(26,185,119,.5); }

.btn-ghost {
  background: rgba(255,255,255,.1);
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.2);
}
.btn-ghost:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }

.btn-outline {
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green);
}
.btn-outline:hover { background: var(--green); color: var(--white); }

.btn-nav {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: var(--white);
  padding: var(--space-10) var(--space-22);
  font-size: var(--fs-nav);
  box-shadow: 0 2px 12px rgba(26,185,119,.3);
}
.btn-nav:hover { box-shadow: 0 4px 20px rgba(26,185,119,.5); transform: translateY(-1px); }

/* Water buttons */
.btn-water {
  background: linear-gradient(135deg, var(--w-accent2), var(--w-accent));
  color: var(--white);
  box-shadow: 0 4px 20px rgba(0,180,216,.3);
}
.btn-water:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,180,216,.5); }

.btn-water-ghost {
  background: rgba(0,180,216,.1);
  color: var(--white);
  border: 1.5px solid rgba(0,180,216,.25);
}
.btn-water-ghost:hover { background: rgba(0,180,216,.2); border-color: rgba(0,180,216,.45); }

.btn-water-outline {
  background: transparent;
  color: var(--w-accent);
  border: 2px solid var(--w-accent);
}
.btn-water-outline:hover { background: var(--w-accent); color: var(--white); }

/* ── Verre sur les boutons secondaires ──────────────────────
   Trois familles de boutons restent volontairement en dehors, pour trois
   raisons distinctes :

   — les boutons d'achat et de conversion (`.btn-primary`, `.btn-water`,
     `.btn-nav`) gardent leur aplat. Un bouton qui commande doit être
     l'élément le plus opaque et le plus contrasté de l'écran ; le verre le
     ferait reculer d'un plan au moment précis où il doit avancer. C'est
     aussi la seule famille que portent les boutons « Ajouter au panier » et
     « Commander » — l'exclusion est donc écrite, pas laissée au hasard du
     balisage : `.btn--solid` permet de la forcer si l'un d'eux changeait un
     jour de classe.
   — `.btn-outline` et `.btn-water-outline` vivent sur fond blanc, où il n'y
     a rien derrière à réfracter. Le flou y coûterait un calque composité
     pour ne rien produire — l'erreur que le reste de ce fichier corrige.
   — restent les boutons posés sur les fonds sombres et les photos, où le
     verre a de la matière. Ceux-là le reçoivent. */
.btn-ghost,
.btn-water-ghost,
.btn-outline-light {
  --lg-blur: 22px;
  position: relative;
  isolation: isolate;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 1px 2px rgba(10,28,43,.18),
    0 10px 24px -12px rgba(10,28,43,.45);
}
.btn-ghost::before,
.btn-water-ghost::before,
.btn-outline-light::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(142deg,
    rgba(255,255,255,.60) 0%, rgba(255,255,255,0) 38%,
    rgba(255,255,255,0) 62%, rgba(255,255,255,.26) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.btn-ghost:hover, .btn-water-ghost:hover, .btn-outline-light:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.44),
    0 2px 4px rgba(10,28,43,.20),
    0 16px 30px -12px rgba(10,28,43,.52);
}

/* L'échappatoire : un bouton d'achat qui porterait par accident une classe
   en verre redevient plein. */
.btn--solid {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.btn--solid::before { display: none; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn-ghost, .btn-water-ghost, .btn-outline-light {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .btn-ghost, .btn-water-ghost, .btn-outline-light {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ════════════════════════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════════════════════════ */
/* La transition était sur `all`. Depuis que la barre porte un flou, `all`
   inclut `backdrop-filter` : le fond était recalculé à chaque image pendant
   les 300 ms qui suivent chaque bascule de défilement — précisément le coût
   que le primitif de verre s'interdit sur ses propres survols. On nomme donc
   les deux propriétés qui doivent réellement s'animer. */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0;
  transition: background-color .3s cubic-bezier(.4,0,.2,1),
              box-shadow .3s cubic-bezier(.4,0,.2,1);
}

/* Le fond descend à 74 % d'opacité (96 % à l'origine, 82 % ensuite).

   Le pire cas est la barre au-dessus d'une section blanche : le fond
   composité y vaut rgb(83, 110, 132), soit 5,3:1 avec le texte blanc de la
   navigation — au-delà du seuil AA de 4,5:1 exigé pour du texte de cette
   taille. Le plancher réel est aux alentours de 70 % (4,7:1) ; 74 % garde
   une marge sans annuler l'effet qu'on vient de renforcer.

   La version précédente de ce commentaire refusait de descendre sous 82 %
   au motif que « la marge reposerait sur le flou, qui disparaît quand le
   navigateur ne sait pas le composer ». C'était un raisonnement faux à deux
   titres. D'une part le flou n'entre pas dans le calcul : la composition
   alpha ne dépend que de l'opacité, et du blanc flouté reste du blanc.
   D'autre part les deux cas sans flou — @supports not (backdrop-filter) et
   prefers-reduced-transparency — repassent déjà la barre à 98 % d'opacité
   plus bas dans ce fichier. La lisibilité ne dépendait donc jamais du flou. */
.navbar.scrolled {
  background: rgba(23,59,89,.74);
  /* La barre garde un liseré plus discret que les cartes : le sien court sur
     toute la largeur de l'écran, où l'intensité qui donne une arête à une
     carte de 300 px devient un trait lumineux permanent. */
  --lg-rim: .44;
}

.nav-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  height: 76px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-logo { flex-shrink: 0; display: flex; align-items: center; }
.nav-logo-text {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -.03em;
}
.nav-logo-accent { color: var(--green); transition: color .4s; }
body.universe-water { --accent-current: var(--w-accent); --accent-rgb: 0, 180, 216; }
body.universe-water .nav-logo-accent { color: var(--w-accent); }

.nav-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
  align-items: center;
}

/* Nav groups : un seul visible à la fois */
.sun-nav-group, .water-nav-group {
  display: flex;
  gap: 28px;
  align-items: center;
}
.water-nav-group { display: none; }
body.universe-water .sun-nav-group { display: none; }
body.universe-water .water-nav-group { display: flex; }

/* ── Glissement SmartSun ⇄ SmartWater (piloté par animerBascule dans app.js) ──
   display n'étant pas animable, JS enchaîne trois temps : .uni-out (le panneau
   sortant s'efface en glissant), permutation des display, .uni-in (le panneau
   entrant est figé à sa position de départ, transition coupée), puis retrait de
   la classe — la transition ramène alors le panneau à zéro.

   Le conteneur porte .uni-stage, les panneaux .uni-pane. Deux scènes existent :
   la barre de liens (.nav-links) et, sur l'accueil, les deux univers entiers
   (.uni-stage--page), qui glissent d'une amplitude plus large.
   Le clip horizontal n'est posé que pendant l'animation : en permanence il
   casserait les menus déroulants et les éléments collants. */
.uni-stage > .uni-pane {
  transition: opacity .19s ease, transform .19s ease;
}
.uni-stage.uni-out, .uni-stage.uni-in { overflow-x: clip; }

.uni-stage.uni-out > .uni-pane { opacity: 0; pointer-events: none; }
.uni-stage.uni-out[data-uni-dir="to-water"] > .uni-pane { transform: translateX(calc(-1 * var(--uni-shift, 20px))); }
.uni-stage.uni-out[data-uni-dir="to-sun"]   > .uni-pane { transform: translateX(var(--uni-shift, 20px)); }

.uni-stage.uni-in > .uni-pane { transition: none; opacity: 0; }
.uni-stage.uni-in[data-uni-dir="to-water"] > .uni-pane { transform: translateX(var(--uni-shift, 20px)); }
.uni-stage.uni-in[data-uni-dir="to-sun"]   > .uni-pane { transform: translateX(calc(-1 * var(--uni-shift, 20px))); }

.uni-stage--page { --uni-shift: 44px; }

/* ── Rideau de transition (accueil) ───────────────────────────────────────
   Le blanc venait de la façon dont le masquage était construit : tant que le
   contenu s'efface en opacité, il finit forcément par laisser voir le fond de
   la page, et aucun voile placé derrière lui n'y change quoi que ce soit — deux
   calques à moitié transparents ne masquent rien.

   On inverse donc le principe. Sur l'accueil, le contenu ne devient jamais
   transparent : il ne fait que glisser, à opacité pleine. C'est un rideau posé
   PAR-DESSUS qui assure le masquage, opaque à l'instant exact de la permutation.
   Le blanc devient impossible par construction, quel que soit l'ordre de
   peinture des blocs sous-jacents.

   z-index 900 : au-dessus du contenu, sous la navbar (1000), le panier (1100)
   et les notifications — la barre reste donc nette et joue sa propre bascule.
   position:fixed : la scène fait plus de dix mille pixels de haut, un dégradé
   posé dessus s'étirerait jusqu'à devenir invisible. */
.uni-stage--page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity .19s ease;
  background:
    radial-gradient(60% 60% at 25% 35%, rgba(26,185,119,.28), transparent 65%),
    radial-gradient(60% 60% at 78% 68%, rgba(0,180,216,.30), transparent 65%),
    linear-gradient(140deg, var(--dark-900) 0%, var(--dark) 55%, var(--dark-800) 100%);
}
.uni-stage--page.uni-out::before { opacity: 1; }
/* Maintenu opaque pendant la permutation, puis le retrait de la classe
   déclenche l'extinction et découvre le nouvel univers. */
.uni-stage--page.uni-in::before { opacity: 1; transition: none; }

/* Le fondu d'opacité des panneaux reste en place pour la navbar, où il n'y a
   pas de fond à laisser voir, mais il est neutralisé sur l'accueil : ici c'est
   le rideau qui masque, le contenu se contente de glisser. */
.uni-stage--page.uni-out > .uni-pane,
.uni-stage--page.uni-in > .uni-pane { opacity: 1; }

/* Le panneau glisse de 44 px : il découvre une bande de cette largeur sur le
   côté, qui laisserait voir le blanc de la page. Couleur plate — le dégradé est
   déjà porté par le rideau, inutile de l'étirer sur toute la hauteur. */
.uni-stage--page.uni-out,
.uni-stage--page.uni-in { background: var(--dark-800); }

@media (prefers-reduced-motion: reduce) {
  .uni-stage > .uni-pane { transition: none; }
  .uni-stage--page::before { transition: none; }
}

.nav-links a {
  color: rgba(255,255,255,.8);
  font-size: .88rem;
  font-weight: 500;
  position: relative;
  padding-bottom: 2px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transition: transform .3s ease;
  border-radius: 2px;
}
body.universe-water .nav-links a::after { background: var(--w-accent); }
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { transform: scaleX(1); }

/* Universe Switcher */
.universe-switcher {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 2px;
  flex-shrink: 0;
}
.sw-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: rgba(255,255,255,.5);
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--trans);
  white-space: nowrap;
}
.sw-btn i { font-size: .78rem; }
.sw-btn:hover { color: rgba(255,255,255,.85); }
.sw-btn.active[data-u="sun"] { background: linear-gradient(135deg, var(--green), var(--green-dark)); color: var(--white); }
.sw-btn.active[data-u="water"] { background: linear-gradient(135deg, var(--w-accent2), var(--w-accent)); color: var(--white); }
.sw-divider { width: 1px; height: 18px; background: rgba(255,255,255,.1); flex-shrink: 0; }

/* ── Icône panier navbar ── */
.nav-cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  color: rgba(255,255,255,.85);
  font-size: 1.15rem;
  cursor: pointer;
  transition: color .2s ease, transform .2s ease;
  flex-shrink: 0;
  padding: 0;
}
.nav-cart:hover {
  color: var(--accent-current);
  transform: scale(1.12);
}
.nav-cart-badge {
  position: absolute;
  top: -3px;
  right: -4px;
  background: var(--accent-current);
  color: var(--white);
  font-size: .58rem;
  font-weight: 800;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

/* ── Icône accueil navbar ── */
.nav-home-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  color: rgba(255,255,255,.85);
  font-size: 1.15rem;
  cursor: pointer;
  transition: color .2s ease, transform .2s ease;
  flex-shrink: 0;
  padding: 0;
  text-decoration: none;
}
.nav-home-icon:hover {
  color: var(--accent-current);
  transform: scale(1.12);
}

/* ── Pictogramme téléphone navbar (→ /contact) ── */
.nav-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--accent-current);
  font-size: .92rem;
  flex-shrink: 0;
  text-decoration: none;
  background: rgba(var(--accent-rgb), .13);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .3), 0 0 12px rgba(var(--accent-rgb), .32);
  animation: navPhoneGlow 3s ease-in-out infinite;
  /* pas de transition sur background : au changement d'univers la couleur
     vient d'une variable héritée et Chrome resterait figé sur l'ancienne */
  transition: transform .2s ease;
}
.nav-phone:hover {
  transform: scale(1.12);
  background: rgba(var(--accent-rgb), .22);
}
/* Le cyan #00b4d8 se dilue dans le bleu de la navbar SmartWater là où le vert
   ressort sur le navy. Même traitement cerné qu'en SmartSun, mais basculé sur
   le cyan clair et les opacités relevées pour retrouver le même poids visuel.
   Redéfinir --accent-rgb ici suffit : le halo animé le lit sur l'élément. */
body.universe-water .nav-phone,
.navbar--water .nav-phone {
  --accent-rgb: 72, 202, 228;
  color: var(--w-light);
  background: rgba(var(--accent-rgb), .18);
}
body.universe-water .nav-phone:hover,
.navbar--water .nav-phone:hover {
  background: rgba(var(--accent-rgb), .28);
}

@keyframes navPhoneGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .3), 0 0 10px rgba(var(--accent-rgb), .28); }
  50%      { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .5), 0 0 20px rgba(var(--accent-rgb), .55); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-phone { animation: none; }
}

/* ════════════════════════════════════════════
   DRAWER PANIER
   ════════════════════════════════════════════ */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  backdrop-filter: blur(3px);
}
.cart-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 95vw;
  height: 100dvh;
  /* Le seul verre clair du site, et le seul dont la transparence assombrit
     le fond au lieu de l'éclaircir : derrière lui il y a l'overlay noir à
     55 %. À 82 %, le panneau composité tombe au pire à rgb(209) et le texte
     navy y garde 7,5:1 — mais on ne descend pas plus bas, parce que le gris
     qui monte n'a plus l'air d'un verre, il a l'air d'un blanc sali. */
  background: rgba(255,255,255,.82);
  z-index: 1101;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 40px rgba(0,0,0,.18);
}
.cart-drawer.open {
  transform: translateX(0);
}

/* Header */
.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.cart-drawer-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
}
.cart-drawer-header h3 i { color: var(--accent-current); }
.cart-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--gray-600);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.cart-close:hover { background: var(--gray-100); color: var(--gray-800); }

/* Body */
.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Article panier */
.cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 1rem;
  align-items: start;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #f0f0f0;
}
.cart-item-img {
  background: #f8f9fa;
  border-radius: var(--radius-md);
  padding: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
}
.cart-item-img img {
  max-height: 44px;
  max-width: 56px;
  object-fit: contain;
}
.cart-item-name {
  font-weight: 700;
  font-size: .95rem;
  color: var(--gray-800);
  margin: 0 0 .2rem;
}
.cart-item-sub {
  font-size: .78rem;
  color: var(--gray-600);
  margin: 0 0 .5rem;
}
.cart-item-specs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.cart-item-specs li {
  font-size: .75rem;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  gap: .35rem;
}
.cart-item-specs li i { color: var(--accent-current); font-size: .65rem; }
.cart-qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--gray-100);
  border-radius: var(--radius-pill);
  padding: .3rem .5rem;
  margin-top: .4rem;
}
.cart-qty-stepper button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--white);
  color: var(--gray-800);
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  transition: color .15s ease;
}
.cart-qty-stepper button:hover { color: var(--accent-current); }
.cart-qty-stepper span { font-size: .85rem; font-weight: 700; color: var(--gray-800); min-width: 14px; text-align: center; }
.cart-item-price {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gray-800);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.cart-item-price span { font-size: .75rem; font-weight: 500; color: var(--gray-600); }

/* Récap prix */
.cart-summary {
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: .88rem;
  color: var(--gray-600);
}
.cart-summary-row strong { color: var(--gray-800); }
.cart-summary-row--total {
  padding-top: .5rem;
  border-top: 1px solid #ddd;
  font-size: 1rem;
  font-weight: 700;
}
.cart-summary-row--total span,
.cart-summary-row--total strong { color: var(--gray-800); font-size: 1.05rem; }

/* Info block */
.cart-info-block {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: var(--radius-md);
  padding: .85rem 1rem;
}
.cart-info-block i { color: var(--accent-current); margin-top: .1rem; flex-shrink: 0; }
.cart-info-block p { font-size: .78rem; color: var(--gray-600); margin: 0; line-height: 1.5; }
/* Le délai de rétractation renvoie à l'article des CGV qui le fixe. La règle
   globale met les liens en `color: inherit` sans soulignement : sans ce rappel,
   le lien serait indiscernable du texte autour, et la mention du délai
   ressemblerait à une promesse en l'air plutôt qu'à un renvoi au contrat. */
.cart-info-block a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(var(--accent-rgb), .45);
  text-underline-offset: 2px;
}
.cart-info-block a:hover { color: var(--accent-current); text-decoration-color: currentColor; }

/* Footer drawer */
.cart-drawer-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex-shrink: 0;
}
.cart-continue {
  background: none;
  border: none;
  color: var(--gray-600);
  font-size: .83rem;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: color .15s ease;
}
.cart-continue:hover { color: var(--gray-800); }

/* Mobile burger */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-burger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: var(--trans);
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
/* Le menu reste plus dense que la navbar (78 % contre 74 %) : il porte une
   liste de liens à lire, pas une barre à survoler. Son navy est aussi plus
   sombre (17,46,71), ce qui lui laisse de la marge — 7,0:1 au-dessus d'une
   section blanche, là où la navbar est à 5,3:1. */
.mobile-menu {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: rgba(17,46,71,.78);
  --lg-rim: .42;
  padding: 20px 24px 28px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.mobile-menu.open { display: block; }
.mobile-menu ul { display: flex; flex-direction: column; gap: 4px; }
.mobile-link {
  display: block;
  padding: 12px 16px;
  color: rgba(255,255,255,.8);
  font-size: .95rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.mobile-link:hover { background: rgba(255,255,255,.07); color: var(--white); }
.btn-mobile {
  margin-top: 10px;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: var(--white) !important;
  text-align: center;
  border-radius: var(--radius-pill);
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════
   HERO SMARTSUN
   ════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  background: linear-gradient(160deg, var(--dark-800) 0%, var(--dark) 50%, var(--dark-700) 100%);
  overflow: hidden;
  padding: clamp(110px,14vh,160px) clamp(32px,5vw,80px) clamp(60px,8vh,100px);
  max-width: 100%;
}

.hero-bg { position: absolute; inset: 0; pointer-events: none; }

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .2;
}
.hero-glow-1 {
  width: 600px; height: 600px;
  background: var(--green);
  top: -150px; right: -100px;
  animation: pulse-glow 6s ease-in-out infinite;
}
.hero-glow-2 {
  width: 400px; height: 400px;
  background: #0066cc;
  bottom: -100px; left: -80px;
  animation: pulse-glow 8s ease-in-out infinite reverse;
}

@keyframes pulse-glow {
  0%, 100% { opacity: .12; transform: scale(1); }
  50%       { opacity: .28; transform: scale(1.1); }
}

/* Grille décorative */
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26,185,119,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,185,119,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(26,185,119,.12);
  border: 1px solid rgba(26,185,119,.3);
  color: var(--green-light);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 28px;
  width: fit-content;
}

/* La pastille du hero vit désormais à l'intérieur du H1 (voir le commentaire
   de l'accueil dans index.tsx : le H1 ne portait ni le métier ni le lieu).
   Ce conteneur ne fait que deux choses : lui rendre sa ligne — sans lui,
   l'inline-flex de .hero-badge se colle au titre — et couper l'héritage du
   corps de titre. .hero-badge fixe déjà sa taille, sa graisse et son
   interlettrage, mais .badge-dot et tout ce qu'on ajouterait plus tard ne les
   fixent pas : la remise à zéro est faite ici une fois pour toutes. */
.hero-h1-badge {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5;
}

.badge-dot {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}

.hero-title {
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--white);
  margin-bottom: 24px;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: rgba(255,255,255,.72);
  line-height: 1.75;
  margin-bottom: 36px;
  max-width: 520px;
}
.hero-subtitle strong { color: var(--green-light); font-weight: 700; }

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero-stats {
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: nowrap;
}
.stat-item { display: flex; flex-direction: column; gap: 2px; }
.stat-number {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.stat-unit { font-size: 1.1rem; font-weight: 700; color: var(--green); }
.stat-label { font-size: .72rem; color: rgba(255,255,255,.45); font-weight: 500; letter-spacing: .02em; }
.stat-divider { width: 1px; height: 40px; background: rgba(255,255,255,.12); }

/* Bannière financement */
.hero-financement {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  padding: 24px 28px;
  background: rgba(26,185,119,.12);
  border: 1.5px solid rgba(26,185,119,.4);
  border-radius: 10px;
  font-size: 1rem;
  color: rgba(255,255,255,.9);
  --lg-glow: rgba(26,185,119,.15);
  max-width: 540px;
}
.hero-financement i { color: var(--green); font-size: 1.5rem; flex-shrink: 0; }
.hero-financement strong { color: var(--green-light); font-weight: 800; font-size: 1.05rem; display: block; margin-bottom: 2px; }

/* Hero visual (colonne droite) */
.hero-visual {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
}

/* Le halo vert passe par `--lg-glow` : il faisait partie de l'ombre écrite à
   la main, il devient un jeton pour survivre à l'ombre partagée du verre. */
.realisation-card {
  width: 340px;
  background: rgba(255,255,255,.16);
  --lg-glow: rgba(26,185,119,.10);
  border: 1px solid rgba(26,185,119,.3);
  border-radius: var(--radius-xl);
  overflow: hidden;
  animation: float 4s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s;
}
.realisation-card:hover {
  border-color: rgba(26,185,119,.6);
  --lg-glow: rgba(26,185,119,.24);
  transform: translateY(-6px);
  animation: none;
}
/* Le reflet se renforce quand la carte monte vers la lumière. */
.realisation-card:hover::before { --lg-rim: .96; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

.realisation-img-wrap { position: relative; height: 200px; overflow: hidden; }
.realisation-img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(26,185,119,.15), rgba(0,102,204,.15));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: rgba(26,185,119,.4);
}
.realisation-card-body { padding: 18px 20px 22px; background: linear-gradient(180deg, rgba(11,29,51,.85), rgba(8,22,40,.92)); }
.realisation-tag {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-light);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}
.realisation-title { font-size: 1.1rem; font-weight: 800; color: var(--white); letter-spacing: -.02em; line-height: 1.2; margin-bottom: 4px; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.realisation-desc { font-size: .85rem; color: rgba(255,255,255,.82); line-height: 1.5; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.realisation-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--green-light);
  margin-top: 10px;
  transition: gap .2s ease;
}
.realisation-card:hover .realisation-link { gap: 10px; }

/* Mini stats card */
.hero-mini-card {
  width: 280px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  animation: float 5s ease-in-out infinite reverse;
  align-self: flex-start;
  margin-right: 20px;
}
.mini-card-icon {
  width: 44px; height: 44px;
  background: rgba(26,185,119,.15);
  border-radius: var(--radius-ico);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--green);
  flex-shrink: 0;
}
.mini-card-val { font-size: 1.4rem; font-weight: 800; color: var(--white); letter-spacing: -.03em; line-height: 1; }
.mini-card-label { font-size: .78rem; color: rgba(255,255,255,.5); margin-top: 2px; }

/* Hero scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.35);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  animation: bounce-scroll 2s ease-in-out infinite;
}
.hero-scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(255,255,255,.35), transparent); }

@keyframes bounce-scroll {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: .5; }
  50%       { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

/* ════════════════════════════════════════════════════════════
   TRUST BAR
   ════════════════════════════════════════════════════════════ */
.trust-bar {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: 36px 0;
}

.trust-items {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 200px;
}

.trust-icon {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: var(--white);
  border-radius: var(--radius-ico);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(26,185,119,.3);
}
.trust-item strong { display: block; font-size: .88rem; font-weight: 700; color: var(--dark); }
.trust-item span { font-size: .8rem; color: var(--gray-600); }

/* ════════════════════════════════════════════════════════════
   SOLUTIONS
   ════════════════════════════════════════════════════════════ */
.solutions-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.sol-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--gray-200);
  background: transparent;
  color: var(--gray-600);
  font-family: var(--font);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: var(--trans);
}
.sol-tab-btn:hover { border-color: var(--green); color: var(--green); }
.sol-tab-btn.active { background: var(--dark); border-color: var(--dark); color: var(--white); }

.sol-tab-content { display: none; }
.sol-tab-content.active { display: block; }

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.solution-card {
  background: var(--white);
  border:  1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  position: relative;
  transition: var(--trans);
  overflow: hidden;
}
.solution-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--green-light));
  opacity: 0;
  transition: var(--trans);
}
.solution-card:hover { border-color: rgba(var(--accent-rgb), .3); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.solution-card:hover::before { opacity: 1; }
.solution-card.featured { background: var(--dark); border-color: var(--dark); }
.solution-card.featured::before { opacity: 1; }
.solution-card.featured h3,
.solution-card.featured p,
.solution-card.featured li { color: rgba(255,255,255,.8); }
.solution-card.featured h3 { color: var(--white); }

.solution-badge {
  position: absolute;
  top: 18px; right: 18px;
  background: var(--green);
  color: var(--white);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

/* La pastille lisait `--green` en dur, donc une carte SmartWater posée dans
   une page SmartSun affichait une goutte d'eau verte. Passer par les jetons
   d'accent ne change rien partout ailleurs — `--accent-current` vaut `--green`
   par défaut — mais la pastille suit désormais la bascule d'univers, comme le
   fait déjà `.section-label`. */
.solution-icon {
  width: 54px; height: 54px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .04));
  border-radius: var(--radius-ico);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--accent-current);
  margin-bottom: 20px;
}
.solution-card.featured .solution-icon { background: rgba(var(--accent-rgb), .18); }

.solution-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--dark); margin-bottom: 10px; letter-spacing: -.02em; }
.solution-card p { font-size: .88rem; color: var(--gray-600); line-height: 1.7; margin-bottom: 18px; }

.solution-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .88rem;
  color: var(--gray-600);
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-100);
}
.solution-card.featured .solution-features li { border-bottom-color: rgba(255,255,255,.06); }
.solution-features li i { color: var(--accent-current); font-size: .8rem; flex-shrink: 0; }
.solution-features { margin-bottom: 24px; }

/* Autres solutions */
.other-solutions {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.other-sol-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border:  1px solid var(--line);
  border-radius: var(--radius-md);
  transition: var(--trans);
  cursor: pointer;
}
.other-sol-card:hover { border-color: rgba(26,185,119,.3); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.other-sol-card i { font-size: 1.4rem; color: var(--green); flex-shrink: 0; }
.other-sol-card strong { display: block; font-size: .9rem; font-weight: 700; color: var(--dark); margin-bottom: 2px; }
.other-sol-card span { font-size: .8rem; color: var(--gray-600); }

/* ════════════════════════════════════════════════════════════
   AVANTAGES (dark section)
   ════════════════════════════════════════════════════════════ */
.avantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.avantage-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  position: relative;
  transition: var(--trans);
  overflow: hidden;
}
.avantage-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(26,185,119,.3);
  transform: translateY(-4px);
}
.avantage-number {
  position: absolute;
  top: 20px; right: 20px;
  font-size: 4rem;
  font-weight: 900;
  color: rgba(255,255,255,.04);
  line-height: 1;
  letter-spacing: -.04em;
}
.avantage-icon {
  width: 52px; height: 52px;
  background: rgba(26,185,119,.15);
  border-radius: var(--radius-ico);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--green);
  margin-bottom: 20px;
}
.avantage-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 10px; letter-spacing: -.02em; }
.avantage-card p { font-size: .88rem; color: rgba(255,255,255,.58); line-height: 1.75; }

/* ════════════════════════════════════════════════════════════
   ÉTAPES TIMELINE
   ════════════════════════════════════════════════════════════ */
.etapes-timeline {
  display: flex;
  flex-direction: column;
  max-width: 760px;
  margin: 0 auto 48px;
}

.etape-item {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding-bottom: 40px;
  position: relative;
}
.etape-item::before {
  content: '';
  position: absolute;
  left: 27px; top: 56px; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--green), rgba(26,185,119,.1));
}
.etape-item:last-child::before { display: none; }
.etape-item:last-child { padding-bottom: 0; }

.etape-number {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: var(--white);
  font-size: .82rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(26,185,119,.4);
  z-index: 1;
}

.etape-content {
  background: var(--white);
  border:  1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  flex: 1;
  transition: var(--trans);
}
.etape-content:hover { border-color: rgba(26,185,119,.3); box-shadow: var(--shadow-md); }

.etape-icon {
  width: 38px; height: 38px;
  background: rgba(26,185,119,.1);
  border-radius: var(--radius-ico);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  color: var(--green);
  margin-bottom: 10px;
}
.etape-content h3 { font-size: 1.05rem; font-weight: 700; color: var(--dark); margin-bottom: 8px; letter-spacing: -.02em; }
.etape-content p { font-size: .88rem; color: var(--gray-600); line-height: 1.7; }

/* ════════════════════════════════════════════════════════════
   CALCULATEUR (dark section)
   ════════════════════════════════════════════════════════════ */
.economies-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.economies-text h2 { color: var(--white); }
.economies-text p { color: rgba(255,255,255,.68); font-size: 1.05rem; line-height: 1.75; margin-bottom: 28px; }

.eco-features { display: flex; flex-direction: column; gap: 12px; }
.eco-feature { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.8); font-size: .92rem; }
.eco-feature i { color: var(--green); font-size: 1rem; flex-shrink: 0; }

.calculateur-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-lg);
  color: var(--dark);
}
.calculateur-card h3 { font-size: 1.35rem; font-weight: 800; color: var(--dark); margin-bottom: 28px; letter-spacing: -.02em; }

.calc-field { margin-bottom: 24px; }
.calc-field label { display: block; font-size: .82rem; font-weight: 600; color: var(--dark); margin-bottom: 8px; }

.calc-input-wrap { display: flex; flex-direction: column; gap: 6px; }

#calcSlider {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--gray-200);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
}
#calcSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(26,185,119,.4);
}

.calc-value-display { font-size: 1.4rem; font-weight: 800; color: var(--dark); letter-spacing: -.02em; }

.calc-type-group { display: flex; gap: 8px; }
.calc-type-opt {
  flex: 1;
  padding: 9px 8px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  transition: var(--trans);
  text-align: center;
}
.calc-type-opt:hover { border-color: var(--green); color: var(--green); }
.calc-type-opt.active { border-color: var(--green); background: var(--green); color: var(--white); }

.calc-results { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.calc-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--gray-50);
}
.calc-result-row.highlight {
  background: linear-gradient(135deg, var(--dark), var(--dark-600));
}
.calc-result-row.highlight .calc-r-label { color: rgba(255,255,255,.65); }
.calc-result-row.highlight .calc-r-value { color: var(--green-light); font-size: 1.2rem; }

.calc-r-label { font-size: .82rem; color: var(--gray-600); }
.calc-r-value { font-size: .95rem; font-weight: 700; color: var(--dark); }

.calc-disclaimer { font-size: .73rem; color: var(--gray-400); text-align: center; margin-top: 10px; }

/* ════════════════════════════════════════════════════════════
   ILLUSTRATIONS SMARTWATER
   ════════════════════════════════════════════════════════════ */
.w-illus {
  position: relative;
  max-width: 940px;
  margin: 48px auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(4,20,31,.28);
}
.w-illus img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
.w-illus figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 44px 26px 18px;
  background: linear-gradient(to top, rgba(10,28,43,.88), transparent);
  color: rgba(255,255,255,.88);
  font-size: .82rem;
  font-style: italic;
  line-height: 1.5;
}
.w-illus--side { max-width: none; margin: 0 0 20px; }
.w-illus--side img { aspect-ratio: 16 / 10; }

/* ════════════════════════════════════════════════════════════
   BLOC PFAS — page « Pourquoi produire son eau ? »
   ════════════════════════════════════════════════════════════ */
/* voile cyan : distingue cette section claire de la section « facture » (blanche) qui la suit */
.pfas-section { background: linear-gradient(180deg, #f1fafd, var(--white) 65%); }

.pfas-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pfas-stat {
  background: var(--white);
  border: 1px solid rgba(0,180,216,.2);
  border-left: 3px solid var(--w-accent);
  border-radius: var(--radius-md);
  padding: 24px 22px;
  transition: var(--trans);
}
.pfas-stat:hover { box-shadow: 0 10px 30px -18px rgba(0,119,182,.55); }
.pfas-stat b {
  display: block;
  font-size: 2.2rem; font-weight: 900; line-height: 1.05; letter-spacing: -.03em;
  color: var(--w-accent2);
}
.pfas-stat b small { font-size: .95rem; font-weight: 700; letter-spacing: 0; }
.pfas-stat span { display: block; margin-top: 10px; font-size: .82rem; line-height: 1.6; color: var(--gray-600); }

.pfas-focus {
  margin-top: 40px;
  background: var(--white);
  border:  1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px;
  box-shadow: 0 18px 44px -30px rgba(19,53,77,.4);
}
.pfas-focus h3 { font-size: 1.18rem; font-weight: 800; color: var(--dark); margin-bottom: 12px; }
.pfas-focus h3 i { color: var(--w-accent); margin-right: 8px; }
.pfas-focus > p { font-size: .92rem; line-height: 1.75; color: var(--gray-600); }

.pfas-sites { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0 20px; }
.pfas-site {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--gray-50);
  border:  1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 15px 18px;
}
.pfas-site-name { font-size: .92rem; font-weight: 700; color: var(--dark); }
.pfas-site-name small { display: block; margin-top: 3px; font-size: .76rem; font-weight: 500; color: var(--gray-600); }
.pfas-site-val { flex-shrink: 0; font-size: 1.05rem; font-weight: 800; color: var(--w-accent2); white-space: nowrap; }

.pfas-note {
  display: flex; gap: 13px; align-items: flex-start;
  background: rgba(0,180,216,.07);
  border: 1px solid rgba(0,180,216,.22);
  border-radius: var(--radius-md);
  padding: 17px 19px;
  font-size: .85rem; line-height: 1.7; color: var(--gray-600);
}
.pfas-note i { flex-shrink: 0; margin-top: 4px; color: var(--w-accent2); }
.pfas-note strong { color: var(--dark); }

.pfas-cross { margin-top: 44px; }
.pfas-cross h3 { font-size: 1.18rem; font-weight: 800; color: var(--dark); }
.pfas-cross h3 span { color: var(--w-accent); }
.pfas-cross-lead { margin: 10px 0 26px; font-size: .92rem; line-height: 1.75; color: var(--gray-600); max-width: 780px; }
/* .trust-item-water est calibré pour les sections sombres : ici le fond est clair */
.pfas-cross .trust-item-water strong { color: var(--dark); }
.pfas-cross .trust-item-water span { color: var(--gray-600); }

.pfas-bridge {
  margin-top: 40px;
  border-left: 3px solid var(--w-accent);
  padding: 4px 0 4px 24px;
}
.pfas-bridge p { font-size: .95rem; line-height: 1.85; color: var(--gray-600); }
.pfas-bridge p + p { margin-top: 14px; }
.pfas-bridge strong { color: var(--dark); }

.w-sources { margin-top: 32px; font-size: .78rem; line-height: 1.75; color: var(--gray-400); }
.w-sources strong { color: var(--gray-600); }
.w-sources a { color: var(--w-accent2); text-decoration: underline; }

@media (max-width: 980px) {
  .pfas-stats { grid-template-columns: repeat(2, 1fr); }
  .pfas-sites { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pfas-stats { grid-template-columns: 1fr; }
  .pfas-focus { padding: 24px 20px; }
  .pfas-bridge { padding-left: 18px; }
}

/* ── ALERTE PFAS — ACCUEIL SMARTWATER ────────────────────────
   Seule section claire de l'univers eau, qui est sinon entièrement sur
   le navy profond. La respiration est voulue : elle isole visuellement le
   passage de sensibilisation du reste du discours commercial.
   Jeu .wpf-* parallèle aux .pfas-* de /pourquoi-produire-son-eau, dont
   la mise en page diffère (4 colonnes, bloc comparatif). */
.wpf { position: relative; background: linear-gradient(180deg, #f1fafd, var(--white) 60%); color: var(--dark); overflow: hidden; }
.wpf-inner { position: relative; z-index: 1; }
/* Voiles cyan très dilués : rappellent l'univers eau sans recharger le fond. */
.wpf-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 15% 0%, rgba(0,180,216,.10), transparent 70%),
    radial-gradient(50% 60% at 90% 100%, rgba(0,119,182,.07), transparent 70%);
}
/* La pastille est désormais portée par `.section-label` ; il ne reste ici que
   la bascule d'accent, pour que fond, liseré et texte restent de la même
   couleur (le texte était en --w-accent2, plus foncé que son propre fond). */
.wpf-label { --accent-current: var(--w-accent); --accent-rgb: 0, 180, 216; }
.wpf .section-title { color: var(--dark); }
.wpf-hl { color: var(--w-accent2); }
.wpf .section-desc { color: var(--gray-600); }

.wpf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; }
.wpf-stat {
  padding: 26px 22px;
  background: var(--white);
  border: 1px solid rgba(0,119,182,.14);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 4px 18px -12px rgba(0,119,182,.35);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.wpf-stat:hover { border-color: rgba(0,180,216,.45); box-shadow: 0 10px 30px -18px rgba(0,119,182,.55); }
.wpf-stat b {
  display: block; font-size: 2.4rem; font-weight: 800; line-height: 1;
  color: var(--w-accent2); letter-spacing: -.02em;
}
.wpf-stat b small { margin-left: 6px; font-size: .9rem; font-weight: 700; color: var(--gray-400); letter-spacing: 0; }
.wpf-stat span { display: block; margin-top: 12px; font-size: .84rem; line-height: 1.65; color: var(--gray-600); }
.wpf-stat strong { color: var(--dark); font-weight: 700; }

/* Garde-fou juridique : les captages cités sont conformes. Ce bloc porte
   cette nuance et ne doit pas être supprimé avec les chiffres. */
.wpf-note {
  display: flex; gap: 14px; margin-top: 28px; padding: 22px 24px;
  background: rgba(0,180,216,.07);
  border: 1px solid rgba(0,180,216,.2);
  border-radius: var(--radius-lg, 16px);
  font-size: .88rem; line-height: 1.75; color: var(--gray-600);
}
.wpf-note i { flex-shrink: 0; margin-top: 5px; color: var(--w-accent2); }
.wpf-note strong { color: var(--dark); font-weight: 700; }

.wpf-bridge { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; margin-top: 56px; }
.wpf-bridge h3 { font-size: 1.35rem; font-weight: 800; color: var(--dark); margin-bottom: 16px; }
.wpf-bridge p { font-size: .93rem; line-height: 1.8; color: var(--gray-600); }
.wpf-bridge p + p { margin-top: 14px; }
.wpf-bridge strong { color: var(--dark); font-weight: 700; }
.wpf-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.wpf-compare {
  padding: 26px; background: var(--white);
  border: 1px solid rgba(0,119,182,.14); border-radius: var(--radius-lg, 16px);
  box-shadow: 0 4px 18px -12px rgba(0,119,182,.35);
}
.wpf-compare-row { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: var(--radius-md); }
.wpf-compare-row i { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-ico); font-size: .95rem; }
.wpf-compare-row strong { display: block; font-size: .95rem; font-weight: 700; }
.wpf-compare-row span { display: block; margin-top: 5px; font-size: .82rem; line-height: 1.6; color: var(--gray-600); }
.wpf-compare-row--off { background: var(--gray-100); }
.wpf-compare-row--off i { background: rgba(0,0,0,.06); color: var(--gray-400); }
.wpf-compare-row--off strong { color: var(--gray-600); }
.wpf-compare-row--on { background: rgba(0,180,216,.08); border: 1px solid rgba(0,180,216,.25); }
.wpf-compare-row--on i { background: linear-gradient(135deg, var(--w-accent2), var(--w-accent)); color: var(--white); }
.wpf-compare-row--on strong { color: var(--dark); }
.wpf-compare-sep { padding: 10px 0; text-align: center; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-400); }

.wpf-sources { margin-top: 44px; font-size: .76rem; line-height: 1.75; color: var(--gray-400); }
.wpf-sources strong { color: var(--gray-600); }
.wpf-sources a { color: var(--w-accent2); text-decoration: underline; }

@media (max-width: 1000px) {
  .wpf-stats { grid-template-columns: repeat(2, 1fr); }
  .wpf-bridge { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .wpf-stats { grid-template-columns: 1fr; }
  .wpf-stat { padding: 22px 20px; }
  .wpf-stat b { font-size: 2.1rem; }
  .wpf-note { padding: 20px; }
  .wpf-compare { padding: 18px; }
  .wpf-ctas .btn { width: 100%; justify-content: center; }
}

@media (max-width: 768px) {
  .w-illus { margin-top: 32px; }
  .w-illus img { aspect-ratio: 16 / 10; }
  .w-illus figcaption { font-size: .76rem; padding: 34px 18px 14px; }
}

/* ════════════════════════════════════════════════════════════
   HISTOIRE / ABOUT
   ════════════════════════════════════════════════════════════ */
.histoire-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.histoire-text h2 { margin-bottom: 20px; }
.histoire-text p { font-size: .95rem; color: var(--gray-600); line-height: 1.8; margin-bottom: 16px; }
.histoire-text p strong { color: var(--dark); font-weight: 700; }
.histoire-text em { color: var(--gray-600); font-style: italic; }

/* Fond blanc explicite : le bloc peut se retrouver sur une section grisée, et le
   logo QualiPV fourni est aplati sur blanc (pas de transparence). */
.cert-block {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--white, #fff);
  border:  1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 24px 0 4px;
}
.cert-logo { width: auto; height: auto; max-height: 58px; max-width: 150px; flex-shrink: 0; display: block; }
.cert-text strong { display: block; color: var(--dark); font-size: .95rem; margin-bottom: 3px; }
.cert-text span { color: var(--gray-600, #5c6f7d); font-size: .85rem; line-height: 1.5; }
@media(max-width:520px){
  .cert-block { flex-direction: column; align-items: flex-start; gap: 12px; }
}

.histoire-chiffres {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 36px;
}
.chiffre-card {
  background: var(--gray-50);
  border:  1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  text-align: center;
  transition: var(--trans);
}
.chiffre-card:hover { border-color: rgba(26,185,119,.3); box-shadow: var(--shadow-sm); }
.chiffre-num { font-size: 2.4rem; font-weight: 900; color: var(--dark); letter-spacing: -.03em; line-height: 1; }
.chiffre-num span { color: var(--green); }
.chiffre-label { font-size: .8rem; color: var(--gray-600); margin-top: 4px; }

/* Carte agences */
.carte-section { margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--gray-200); }
.carte-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

.carte-map-wrap {
  background: var(--gray-50);
  border:  1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.carte-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--gray-400);
}
.carte-placeholder i { font-size: 3rem; color: var(--green); opacity: .4; }
.carte-placeholder p { font-size: .85rem; color: var(--gray-400); }

/* Smarty est en portrait : le 4/3 du bloc carte le réduirait à une vignette. */
.carte-map-wrap--smarty {
  aspect-ratio: 3/4;
  background: radial-gradient(circle at 50% 40%, rgba(26,185,119,.14), var(--gray-50) 70%);
}
.carte-smarty { width: auto; height: 92%; max-width: 88%; object-fit: contain; display: block; }

.carte-agences { display: flex; flex-direction: column; gap: 16px; }
.carte-agences h3 { font-size: 1.2rem; font-weight: 700; color: var(--dark); margin-bottom: 8px; }

.agence-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border:  1px solid var(--line);
  border-radius: var(--radius-md);
  transition: var(--trans);
}
.agence-item:hover { border-color: rgba(26,185,119,.3); box-shadow: var(--shadow-sm); }
.agence-dot {
  width: 10px; height: 10px;
  background: var(--green);
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(26,185,119,.5);
}
.agence-item strong { display: block; font-size: .9rem; font-weight: 700; color: var(--dark); margin-bottom: 2px; }
.agence-item span { font-size: .82rem; color: var(--gray-600); line-height: 1.5; }

/* ════════════════════════════════════════════════════════════
   TÉMOIGNAGES SLIDER
   ════════════════════════════════════════════════════════════ */
.rating-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.stars-display { color: #f59e0b; font-size: 1.05rem; letter-spacing: 2px; }
.rating-summary span { font-size: .88rem; color: var(--gray-600); font-weight: 500; }

.temoignages-slider { position: relative; overflow: hidden; }

.temoignages-track {
  display: flex;
  gap: 24px;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}

.temoignage-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  flex-shrink: 0;
  width: calc(33.333% - 16px);
  box-shadow: var(--shadow-sm);
  border:  1px solid var(--line);
  transition: var(--trans);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.temoignage-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(26,185,119,.2); }

.temoignage-stars { color: #f59e0b; font-size: .88rem; letter-spacing: 2px; }
.temoignage-card > p { font-size: .92rem; color: var(--gray-800); line-height: 1.75; font-style: italic; flex: 1; }

.temoignage-author { display: flex; align-items: center; gap: 12px; }
.author-avatar {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--dark), var(--dark-600));
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.temoignage-author strong { display: block; font-size: .88rem; font-weight: 700; color: var(--dark); }
.temoignage-author span { font-size: .78rem; color: var(--gray-600); }

.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 36px;
}
.slider-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--gray-200);
  background: var(--white);
  color: var(--dark);
  font-size: .88rem;
  cursor: pointer;
  transition: var(--trans);
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-btn:hover { border-color: var(--green); color: var(--green); background: rgba(26,185,119,.05); }

.slider-dots { display: flex; gap: 8px; align-items: center; }
.slider-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-200); cursor: pointer; transition: var(--trans); border: none; padding: 0; }
.slider-dot.active { background: var(--green); width: 24px; border-radius: 4px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-200); cursor: pointer; transition: var(--trans); }
.dot.active { background: var(--green); width: 24px; border-radius: 4px; }

/* ════════════════════════════════════════════════════════════
   FAQ (dark section, layout sticky)
   ════════════════════════════════════════════════════════════ */
.faq-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 80px;
  align-items: start;
}

.faq-sticky {
  position: sticky;
  top: 96px;
}
.faq-sticky .section-title { color: var(--white); margin-bottom: 14px; }
.faq-sticky p { color: rgba(255,255,255,.6); font-size: .95rem; line-height: 1.75; margin-bottom: 24px; }

.faq-list { display: flex; flex-direction: column; gap: 10px; }

.faq-item {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--trans);
}
.faq-item.open { background: rgba(255,255,255,.07); border-color: rgba(26,185,119,.3); }

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--white);
  font-family: var(--font);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.4;
}

.faq-icon { flex-shrink: 0; color: var(--green); font-size: .75rem; transition: transform .3s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-answer p { padding: 0 22px 20px; font-size: .92rem; color: rgba(255,255,255,.75); line-height: 1.8; }
.faq-answer p strong { color: var(--green-light); }
.faq-item.open .faq-answer { max-height: 400px; }

/* ════════════════════════════════════════════════════════════
   CONTACT (section blanche)
   ════════════════════════════════════════════════════════════ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.contact-guarantees { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.guarantee-item { display: flex; align-items: center; gap: 14px; }
.guarantee-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: var(--white);
  border-radius: var(--radius-ico);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}
.guarantee-item strong { display: block; font-size: .88rem; font-weight: 700; color: var(--dark); }
.guarantee-item span { font-size: .8rem; color: var(--gray-600); }

.tel-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -.02em;
  margin-bottom: 4px;
}
.tel-link i { color: var(--green); }
.tel-link:hover { color: var(--green); }
.tel-hours { font-size: .8rem; color: var(--gray-600); margin-left: 34px; }

.contact-form-card {
  background: var(--white);
  border:  1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 44px;
  box-shadow: var(--shadow-lg);
}
.contact-form-card h3 { font-size: 1.3rem; font-weight: 800; color: var(--dark); margin-bottom: 28px; letter-spacing: -.02em; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: .82rem; font-weight: 600; color: var(--dark); margin-bottom: 7px; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--dark);
  font-family: var(--font);
  font-size: .92rem;
  outline: none;
  transition: var(--trans);
  resize: vertical;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(26,185,119,.1); }
.form-group option { background: var(--white); color: var(--dark); }

/* Water form focus */
.water-form .form-group input:focus,
.water-form .form-group select:focus,
.water-form .form-group textarea:focus { border-color: var(--w-accent); box-shadow: 0 0 0 3px rgba(0,180,216,.1); }

/* Form success */
.form-success { display: none; text-align: center; padding: 40px 20px; }
.form-success.visible { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.success-icon { font-size: 3.5rem; color: var(--accent-current); animation: pop-in .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes pop-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.form-success h3 { font-size: 1.4rem; font-weight: 800; color: var(--dark); }
.form-success p { font-size: .92rem; color: var(--gray-600); line-height: 1.7; max-width: 400px; }

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
.footer { background: var(--dark-800); color: var(--white); padding: 60px 0 0; }

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-logo-text { font-size: 1.5rem; font-weight: 900; color: var(--white); letter-spacing: -.03em; margin-bottom: 14px; }
.footer-logo-accent { color: var(--green); transition: color .4s; }
body.universe-water .footer-logo-accent { color: var(--w-accent); }

.footer-brand p { font-size: .85rem; color: rgba(255,255,255,.48); line-height: 1.75; margin-bottom: 22px; }

.footer-socials { display: flex; gap: 10px; }
.footer-socials a {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.07);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5);
  font-size: .85rem;
  transition: var(--trans);
}
.footer-socials a:hover { background: var(--green); color: var(--white); }

/* Le logo est aplati sur blanc : sur le footer sombre il faut un cartouche blanc,
   sinon le bloc apparaît comme un rectangle qui déborde. */
.footer-cert-logo {
  width: auto; height: auto; max-height: 52px; max-width: 140px;
  display: block; margin-top: 22px;
  background: #fff; border-radius: var(--radius-sm); padding: 7px 10px;
}
body.universe-water .footer-socials a:hover { background: var(--w-accent); }

.footer-col h4 { font-size: .82rem; font-weight: 700; color: var(--white); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: .85rem; color: rgba(255,255,255,.48); display: flex; align-items: center; gap: 7px; }
.footer-col a:hover { color: var(--green); }
body.universe-water .footer-col a:hover { color: var(--w-accent); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom p { font-size: .78rem; color: rgba(255,255,255,.35); }
.footer-bottom strong { color: var(--green); }
body.universe-water .footer-bottom strong { color: var(--w-accent); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-legal a { font-size: .78rem; color: rgba(255,255,255,.35); }
.footer-legal a:hover { color: rgba(255,255,255,.7); }

/* ════════════════════════════════════════════════════════════
   ██  SMARTWATER UNIVERSE  ██
   ════════════════════════════════════════════════════════════ */

/* ── HERO WATER ─────────────────────────────────────────── */
.hero-water {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  align-items: center;
  gap: clamp(40px,5vw,80px);
  background: linear-gradient(160deg, var(--dark-950) 0%, var(--dark-900) 50%, var(--dark-800) 100%);
  overflow: hidden;
  padding: clamp(110px,14vh,160px) clamp(32px,5vw,80px) clamp(60px,8vh,100px);
}

.hero-water-bg { position: absolute; inset: 0; pointer-events: none; }

.water-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .18;
}
.water-glow-1 {
  width: 600px; height: 600px;
  background: var(--w-accent);
  top: -150px; right: -100px;
  animation: pulse-glow 6s ease-in-out infinite;
}
.water-glow-2 {
  width: 400px; height: 400px;
  background: var(--w-accent2);
  bottom: -100px; left: -80px;
  animation: pulse-glow 8s ease-in-out infinite reverse;
}

.hero-water-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,180,216,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,180,216,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

/* Bulles */
.water-bubbles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bubble {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,180,216,.2);
  animation: float-bubble 8s ease-in-out infinite;
}
.b1 { width: 90px; height: 90px; left: 8%; bottom: 25%; animation-delay: 0s; background: radial-gradient(circle, rgba(0,180,216,.05), transparent); }
.b2 { width: 50px; height: 50px; left: 28%; bottom: 45%; animation-delay: 2s; background: radial-gradient(circle, rgba(72,202,228,.05), transparent); }
.b3 { width: 120px; height: 120px; right: 12%; bottom: 35%; animation-delay: 4s; background: radial-gradient(circle, rgba(0,119,182,.05), transparent); }
.b4 { width: 35px; height: 35px; right: 32%; bottom: 65%; animation-delay: 1s; background: radial-gradient(circle, rgba(0,180,216,.07), transparent); }
.b5 { width: 70px; height: 70px; left: 58%; bottom: 18%; animation-delay: 3s; background: radial-gradient(circle, rgba(72,202,228,.05), transparent); }

@keyframes float-bubble {
  0%, 100% { transform: translateY(0) scale(1); opacity: .5; }
  50%       { transform: translateY(-28px) scale(1.05); opacity: 1; }
}

/* Water badge */
.hero-water-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,180,216,.12);
  border: 1px solid rgba(0,180,216,.3);
  color: var(--w-light);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 28px;
  width: fit-content;
}
.water-badge-dot {
  width: 6px; height: 6px;
  background: var(--w-accent);
  border-radius: 50%;
  animation: blink 2s ease-in-out infinite;
}

.gradient-text-water {
  background: linear-gradient(135deg, var(--w-accent), var(--w-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Trust bar water */
.trust-bar-water {
  /* opaque : le semi-transparent d'origine se composait sur le fond blanc du body et virait au gris */
  background: var(--dark-900);
  border-top: 1px solid rgba(0,180,216,.12);
  border-bottom: 1px solid rgba(0,180,216,.12);
  padding: 36px 0;
}
.trust-icon-water {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--w-accent2), var(--w-accent));
  color: var(--white);
  border-radius: var(--radius-ico);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,180,216,.3);
}
.trust-item-water strong { display: block; font-size: .92rem; font-weight: 700; color: var(--white); line-height: 1.3; margin-bottom: 2px; }
.trust-item-water span { display: block; font-size: .8rem; color: var(--w-light); line-height: 1.4; }

/* Visual card water */
.water-visual-card {
  width: 340px;
  background: rgba(0,180,216,.14);
  --lg-glow: rgba(0,180,216,.10);
  border: 1px solid rgba(0,180,216,.2);
  border-radius: var(--radius-xl);
  overflow: hidden;
  animation: float 4s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s;
}
.water-visual-card:hover::before { --lg-rim: .96; }
.water-visual-card:hover {
  border-color: rgba(0,180,216,.45);
  box-shadow: var(--shadow-lg), 0 0 80px rgba(0,180,216,.25);
  transform: translateY(-6px);
  animation: none;
}

.wvc-img-wrap {
  height: 200px;
  background: linear-gradient(135deg, rgba(0,119,182,.3), rgba(0,180,216,.15));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  color: rgba(0,180,216,.4);
  position: relative;
  overflow: hidden;
}
.wvc-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wvc-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(10,28,43,.6) 100%);
}

.wvc-body { padding: 18px 20px 22px; }
.wvc-tag { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--w-accent); display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
.wvc-title { font-size: 1.05rem; font-weight: 800; color: var(--white); letter-spacing: -.02em; line-height: 1.2; margin-bottom: 4px; }
.wvc-desc { font-size: .8rem; color: rgba(255,255,255,.45); line-height: 1.5; }
.wvc-link { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--w-accent); margin-top: 10px; transition: gap .2s; }
.water-visual-card:hover .wvc-link { gap: 10px; }

/* Mini card water */
.hero-mini-card-water {
  width: 270px;
  background: rgba(0,180,216,.07);
  border: 1px solid rgba(0,180,216,.15);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  animation: float 5s ease-in-out infinite reverse;
  align-self: flex-start;
  margin-right: 20px;
}
.mini-card-icon-water {
  width: 42px; height: 42px;
  background: rgba(0,180,216,.15);
  border-radius: var(--radius-ico);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  color: var(--w-accent);
  flex-shrink: 0;
}

/* ── WATER TABS ─────────────────────────────────────────── */
.water-tabs-nav {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.water-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  border: 2px solid rgba(0,180,216,.2);
  background: transparent;
  color: var(--w-muted);
  font-family: var(--font);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: var(--trans);
}
.water-tab-btn:hover { border-color: var(--w-accent); color: var(--w-accent); }
/* background-origin: le dégradé est sinon dimensionné sur la boîte de padding
   puis répété sous la bordure transparente de 2px, ce qui fait réapparaître un
   liseré de la couleur de départ aux deux extrémités de la pilule. */
.water-tab-btn.active { background: linear-gradient(135deg, var(--w-accent2), var(--w-accent)); background-origin: border-box; border-color: transparent; color: var(--white); box-shadow: 0 4px 20px rgba(0,180,216,.3); }

.water-tab-content { display: none; }
.water-tab-content.active { display: block; }

/* ── WATER SOLUTION CARDS ───────────────────────────────── */
.w-solution-card {
  background: rgba(10,51,82,.4);
  border: 1px solid rgba(0,180,216,.15);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  position: relative;
  transition: var(--trans);
  overflow: hidden;
}
.w-solution-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--w-accent2), var(--w-light));
  opacity: 0;
  transition: var(--trans);
}
.w-solution-card:hover { border-color: rgba(0,180,216,.35); transform: translateY(-4px); box-shadow: 0 12px 48px rgba(0,0,0,.3); }
.w-solution-card:hover::before { opacity: 1; }
.w-solution-card.featured { background: rgba(0,119,182,.15); border-color: rgba(0,180,216,.35); }
.w-solution-card.featured::before { opacity: 1; }

.w-solution-icon {
  width: 54px; height: 54px;
  background: rgba(0,180,216,.12);
  border-radius: var(--radius-ico);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: var(--w-accent);
  margin-bottom: 20px;
}
.w-solution-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--white); margin-bottom: 10px; letter-spacing: -.02em; }
.w-solution-card p { font-size: .88rem; color: rgba(255,255,255,.55); line-height: 1.7; margin-bottom: 18px; }
.w-solution-card .solution-features li { color: rgba(255,255,255,.6); border-bottom-color: rgba(0,180,216,.08); }
.w-solution-card .solution-features li i { color: var(--w-accent); }

/* Filtration steps */
.filtration-timeline { display: flex; flex-direction: column; max-width: 760px; margin: 0 auto 48px; }
.filt-item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding-bottom: 32px;
  position: relative;
}
.filt-item::before {
  content: '';
  position: absolute;
  left: 23px; top: 48px; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--w-accent), rgba(0,180,216,.1));
}
.filt-item:last-child::before { display: none; }
.filt-item:last-child { padding-bottom: 0; }

.filt-num {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--w-accent2), var(--w-accent));
  color: var(--white);
  font-size: .8rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,180,216,.4);
  z-index: 1;
}
.filt-content {
  background: rgba(10,51,82,.5);
  border: 1px solid rgba(0,180,216,.15);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  flex: 1;
  transition: var(--trans);
}
.filt-content:hover { border-color: rgba(0,180,216,.3); }
.filt-icon { width: 34px; height: 34px; background: rgba(0,180,216,.12); border-radius: var(--radius-ico); display: flex; align-items: center; justify-content: center; font-size: .9rem; color: var(--w-accent); margin-bottom: 8px; }
.filt-content h4 { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.filt-content p { font-size: .86rem; color: rgba(255,255,255,.55); line-height: 1.7; }

/* Specs table */
.specs-wrap {
  background: rgba(10,51,82,.4);
  border: 1px solid rgba(0,180,216,.15);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th {
  background: rgba(0,180,216,.1);
  color: var(--w-accent);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .85rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid rgba(0,180,216,.15);
}
.specs-table td { padding: .75rem 1.25rem; font-size: .87rem; color: rgba(255,255,255,.65); border-bottom: 1px solid rgba(0,180,216,.06); }
.specs-table tr:last-child td { border-bottom: none; }
.specs-table tr:hover td { background: rgba(0,180,216,.04); }
.spec-v { color: var(--white); font-weight: 600; }

/* En clair : résumé simple au-dessus de la fiche technique */
.w-simple-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(0,180,216,.08);
  border: 1px solid rgba(0,180,216,.25);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-bottom: 1.25rem;
}
.w-simple-callout i { color: var(--w-accent); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
.w-simple-callout p { font-size: .92rem; color: rgba(255,255,255,.85); line-height: 1.6; margin: 0; }
.w-simple-callout strong { color: var(--white); }
.w-spec-note { font-size: .78rem; font-style: italic; color: rgba(255,255,255,.4); }

/* Production bars */
.prod-bars { display: flex; flex-direction: column; gap: 14px; }
.prod-chart-note { margin: 1.1rem 0 0; font-size: .76rem; line-height: 1.55; color: var(--w-muted); }
.prod-chart-link {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem;
  font-size: .82rem; font-weight: 700; color: var(--water); text-decoration: none;
}
.prod-chart-link:hover { text-decoration: underline; }
.prod-chart-link i { font-size: .72rem; transition: transform .2s; }
.prod-chart-link:hover i { transform: translateX(3px); }
.prod-row { display: flex; align-items: center; gap: 12px; }
.prod-hr-label { font-size: .78rem; color: var(--w-muted); width: 52px; flex-shrink: 0; }
.prod-bar-bg { flex: 1; height: 28px; background: rgba(0,180,216,.08); border-radius: var(--radius-pill); overflow: hidden; }
.prod-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--w-accent2), var(--w-accent));
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  transition: width 1.2s ease;
}
.prod-bar-fill span { font-size: .72rem; font-weight: 700; color: var(--white); white-space: nowrap; }

/* Usage cards water */
.w-usage-card {
  background: rgba(10,51,82,.4);
  border: 1px solid rgba(0,180,216,.15);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: var(--trans);
}
.w-usage-card:hover { transform: translateY(-4px); border-color: rgba(0,180,216,.3); box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.w-usage-icon {
  width: 52px; height: 52px;
  background: rgba(0,180,216,.12);
  border-radius: var(--radius-ico);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  color: var(--w-accent);
  margin-bottom: 18px;
}
.w-usage-card h4 { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.w-usage-card p { font-size: .86rem; color: rgba(255,255,255,.55); line-height: 1.7; margin-bottom: 14px; }
.w-usage-list li { font-size: .83rem; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.w-usage-list li i { color: var(--w-accent); font-size: .75rem; flex-shrink: 0; }

/* Avantage cards water */
.w-avantage-card {
  background: rgba(10,51,82,.4);
  border: 1px solid rgba(0,180,216,.12);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  position: relative;
  transition: var(--trans);
  overflow: hidden;
}
.w-avantage-card:hover { background: rgba(10,51,82,.6); border-color: rgba(0,180,216,.3); transform: translateY(-4px); }
.w-avantage-number { position: absolute; top: 18px; right: 18px; font-size: 3.5rem; font-weight: 900; color: rgba(0,180,216,.06); line-height: 1; letter-spacing: -.04em; }
.w-avantage-icon { width: 50px; height: 50px; background: rgba(0,180,216,.12); border-radius: var(--radius-ico); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--w-accent); margin-bottom: 18px; }
.w-avantage-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.w-avantage-card p { font-size: .86rem; color: rgba(255,255,255,.55); line-height: 1.75; }

/* Placeholder blocks */
.placeholder-block {
  background: rgba(10,51,82,.3);
  border: 2px dashed rgba(0,180,216,.25);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
}
.placeholder-block h4 { font-size: 1.05rem; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.placeholder-block > p { font-size: .88rem; color: rgba(255,255,255,.5); margin-bottom: 16px; }
.placeholder-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.placeholder-list li { font-size: .84rem; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 8px; }
.placeholder-list li i { color: var(--w-accent); font-size: .75rem; }
.placeholder-note { font-size: .78rem; color: var(--w-muted); margin-top: 12px; padding: 8px 14px; background: rgba(0,180,216,.06); border-radius: var(--radius-sm); }

/* Savings cards */
.savings-layout { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 16px; }
.savings-card {
  background: rgba(10,51,82,.4);
  border: 1px solid rgba(0,180,216,.15);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  text-align: center;
  transition: var(--trans);
}
.savings-card:hover { transform: translateY(-3px); }
.savings-card.featured { background: rgba(0,119,182,.15); border-color: rgba(0,180,216,.35); box-shadow: 0 8px 32px rgba(0,180,216,.12); }
.savings-profile { font-size: .8rem; color: var(--w-muted); margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.savings-val { font-size: 2.4rem; font-weight: 900; color: var(--w-accent); line-height: 1; }
.savings-val small { font-size: .95rem; font-weight: 500; color: rgba(255,255,255,.4); }
.savings-vs { font-size: .75rem; color: rgba(255,255,255,.35); margin-top: 6px; }

/* Synergie banner */
.synergy-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, rgba(26,185,119,.06), rgba(0,180,216,.06));
  border: 1px solid rgba(0,180,216,.2);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  margin-top: 40px;
}
.synergy-icons { display: flex; align-items: center; gap: 8px; font-size: 1.6rem; }
.synergy-icons .fa-sun { color: var(--green); }
.synergy-icons .fa-plus { font-size: .8rem; color: rgba(255,255,255,.25); }
.synergy-icons .fa-droplet, .synergy-icons .fa-hot-tub { color: var(--w-accent); }
.synergy-text h4 { font-size: .95rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.synergy-text p { font-size: .85rem; color: rgba(255,255,255,.5); line-height: 1.7; }

/* CTA tab band */
.tab-cta {
  background: linear-gradient(135deg, rgba(0,119,182,.2), rgba(72,202,228,.1));
  border: 1px solid rgba(0,180,216,.2);
  border-radius: var(--radius-lg);
  padding: 48px;
  text-align: center;
  margin-top: 48px;
}
.tab-cta h3 { font-size: 1.6rem; font-weight: 800; color: var(--white); margin-bottom: 8px; }
.tab-cta p { color: rgba(255,255,255,.55); margin-bottom: 24px; }

/* ── WATER FAQ ──────────────────────────────────────────── */
.w-faq-item {
  background: rgba(10,51,82,.4);
  border: 1px solid rgba(0,180,216,.12);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--trans);
}
.w-faq-item.open { background: rgba(10,51,82,.6); border-color: rgba(0,180,216,.3); }
.w-faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--white);
  font-family: var(--font);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.4;
}
.w-faq-icon { flex-shrink: 0; color: var(--w-accent); font-size: .75rem; transition: transform .3s ease; }
.w-faq-item.open .w-faq-icon { transform: rotate(45deg); }
.w-faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.w-faq-a p { padding: 0 22px 20px; font-size: .9rem; color: rgba(255,255,255,.7); line-height: 1.8; }
.w-faq-item.open .w-faq-a { max-height: 400px; }

/* ── WATER CONTACT ──────────────────────────────────────── */
.w-contact-card {
  background: rgba(10,51,82,.4);
  border: 1px solid rgba(0,180,216,.2);
  border-radius: var(--radius-xl);
  padding: 44px;
}
.w-contact-card h3 { font-size: 1.3rem; font-weight: 800; color: var(--white); margin-bottom: 28px; }
.w-form-group input,
.w-form-group select,
.w-form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid rgba(0,180,216,.2);
  border-radius: var(--radius-sm);
  background: rgba(0,180,216,.05);
  color: var(--white);
  font-family: var(--font);
  font-size: .92rem;
  outline: none;
  transition: var(--trans);
  resize: vertical;
}
.w-form-group input::placeholder,
.w-form-group select::placeholder,
.w-form-group textarea::placeholder { color: rgba(255,255,255,.3); }
.w-form-group select option { background: var(--w-bg); color: var(--white); }
.w-form-group input:focus,
.w-form-group select:focus,
.w-form-group textarea:focus { border-color: var(--w-accent); box-shadow: 0 0 0 3px rgba(0,180,216,.1); }
.w-form-group label { display: block; font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.7); margin-bottom: 7px; }
.w-form-group { margin-bottom: 16px; }

/* ════════════════════════════════════════════════════════════
   SMARTWATER — SYSTEM DE CLASSES SÉMANTIQUES v2
   (remplace tous les styles inline)
   ════════════════════════════════════════════════════════════ */

/* Utilitaires de couleur */
.w-strong, .hero-subtitle strong.w-strong, p strong.w-strong { color: var(--w-light); }
.w-accent-text     { color: var(--w-accent); }
.w-muted-text      { color: rgba(255,255,255,.45); }
.w-icon-accent     { color: var(--w-accent); }
/* `.w-section-label` ne sert plus à rien : `.section-label` est désormais une
   pastille et se recolore seule en cyan sous body.universe-water. La classe
   reste déclarée, vide, parce qu'elle est encore posée sur 15 sections dans
   src/index.tsx — la retirer du HTML est un nettoyage à part. */
.w-section-label   { /* absorbé par .section-label */ }
.w-section-title   { color: var(--white); }

/* Section spacing */
.w-section { padding: 100px 0; }
.w-block-gap { margin-bottom: 4.5rem; }
.w-avantages-grid { margin-bottom: 4.5rem; }

/* Hero stats water */
.w-hero-stats .stat-number  { color: var(--w-accent); }
.w-hero-stats .stat-unit    { color: var(--w-light); }
.w-hero-financement         { background: rgba(0,180,216,.1); border-color: rgba(0,180,216,.35); box-shadow: 0 4px 24px rgba(0,180,216,.12); }
.w-hero-financement .fas    { color: var(--w-accent); }

/* Eyebrow (micro-label au-dessus du titre) */
.w-eyebrow {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--w-accent);
  margin-bottom: .6rem;
}

/* ── TAB INTRO — grille 2 colonnes ── */
.tab-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 3rem;
  background: rgba(10,51,82,.45);
  border: 1px solid rgba(0,180,216,.15);
  border-radius: var(--radius-lg);
  margin-bottom: 5rem;
}

.tab-intro-title {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -.025em;
  margin: .4rem 0 1.1rem;
}

.tab-intro-desc {
  font-size: .97rem;
  color: rgba(255,255,255,.62);
  line-height: 1.85;
  margin-bottom: 1.6rem;
}

/* Tags / badges */
.w-tags {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.w-tags-cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.w-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .76rem;
  font-weight: 600;
  padding: .35rem .9rem;
  border-radius: var(--radius-pill);
  background: rgba(0,180,216,.1);
  color: var(--w-light);
  border: 1px solid rgba(0,180,216,.22);
  transition: var(--trans);
}
.w-tag:hover { background: rgba(0,180,216,.18); }

/* Visual droit du tab-intro : carte process */
.tab-intro-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.w-process-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  background: rgba(0,180,216,.04);
  border: 1px solid rgba(0,180,216,.14);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 280px;
}

.w-process-card--horizontal {
  flex-direction: row;
  max-width: 100%;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 2rem 2.5rem;
}

.w-process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
}

.w-process-step--dim .w-process-icon {
  background: rgba(0,180,216,.08);
  border-color: rgba(0,180,216,.18);
  color: rgba(0,180,216,.45);
}

.w-process-step--main .w-process-icon {
  background: rgba(0,180,216,.2);
  border-color: rgba(0,180,216,.35);
  color: var(--w-accent);
  box-shadow: 0 4px 20px rgba(0,180,216,.25);
}

.w-process-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: var(--trans);
}

.w-process-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--w-muted);
  letter-spacing: .02em;
  max-width: 90px;
}

.w-process-arrow {
  color: var(--w-accent);
  font-size: .9rem;
  opacity: .7;
}

.w-process-arrow--right {
  display: flex;
  align-items: center;
  align-self: center;
}

/* ── SOUS-TITRES DE SECTION dans les tabs ── */
.w-subsection-header {
  text-align: center;
  margin-bottom: 2.75rem;
  margin-top: .5rem;
}

.w-subsection-title {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -.025em;
  margin: .6rem 0 0;
}

/* ── FILTRATION TIMELINE — correction max-width et espacement ── */
.filtration-timeline {
  max-width: 820px;
  margin: 0 auto 5rem;
}

/* ── SPECS + PROD GRID ── */
.specs-prod-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 5rem;
  align-items: start;
}

.prod-chart-card {
  background: rgba(10,51,82,.45);
  border: 1px solid rgba(0,180,216,.15);
  border-radius: var(--radius-lg);
  padding: 2rem;
  height: 100%;
}

.prod-chart-title {
  font-size: .97rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0,180,216,.1);
}

/* ── USAGES GRID (uniformisé) ── */
.w-usages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

/* ── SAVINGS (tab 3) ── */
.savings-layout { margin-bottom: 1.25rem; }

.w-disclaimer {
  font-size: .74rem;
  color: rgba(255,255,255,.3);
  text-align: center;
  margin-bottom: 3.5rem;
}

/* ── PLACEHOLDER icon ── */
.placeholder-icon {
  font-size: 2rem;
  color: var(--w-muted);
  margin-bottom: 1rem;
}

/* ── SPECS WRAP faded (placeholder) ── */
.specs-wrap--faded { margin-top: 1.25rem; opacity: .5; }

/* ── CONTACT SECTION WATER ── */
.w-contact-section {
  background: linear-gradient(160deg, var(--dark-950), var(--dark-900));
}

.w-contact-intro {
  color: rgba(255,255,255,.62);
  font-size: .97rem;
  line-height: 1.8;
  margin-bottom: 2rem;
}

.w-guarantee-icon {
  background: linear-gradient(135deg, var(--w-accent2), var(--w-accent));
}

/* guarantee item text colors */
.guarantee-item .w-strong    { color: var(--white); display: block; }
.guarantee-item .w-muted-text{ color: rgba(255,255,255,.5); display: block; font-size: .83rem; }

/* ── TRUST BAR WATER — espacement items ── */
.trust-bar-water .trust-items { gap: 0; }
.trust-bar-water .trust-item  { padding: 0 2.5rem; }
.trust-bar-water .trust-item + .trust-item { border-left: 1px solid rgba(0,180,216,.12); }

/* ════════════════════════════════════════════════════════════
   REVEAL ANIMATIONS
   ════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal:nth-child(2) { transition-delay: .08s; }
.reveal:nth-child(3) { transition-delay: .16s; }
.reveal:nth-child(4) { transition-delay: .24s; }
.reveal:nth-child(5) { transition-delay: .32s; }
.reveal:nth-child(6) { transition-delay: .4s; }

/* Toast */
/* Il suit la navbar sans aller aussi loin (78 % contre 74 %) : il confirme
   une action et disparaît. S'il faut le relire, c'est raté. */
.toast {
  position: fixed;
  bottom: 2rem; right: 2rem;
  background: rgba(23,59,89,.78);
  border: 1px solid rgba(26,185,119,.3);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-size: .88rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  transform: translateY(80px);
  opacity: 0;
  transition: var(--trans);
  z-index: 9999;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast i { color: var(--accent-current); font-size: 1.1rem; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero, .hero-water { grid-template-columns: 1fr; text-align: left; }
  .hero-visual, .hero-water-visual { display: none; }
  .economies-layout { grid-template-columns: 1fr; gap: 48px; }
  .faq-layout { grid-template-columns: 1fr; gap: 40px; }
  .faq-sticky { position: static; }
  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .histoire-layout { grid-template-columns: 1fr; gap: 48px; }
  .carte-layout { grid-template-columns: 1fr; }
  .other-solutions { grid-template-columns: 1fr; }
  .savings-layout { grid-template-columns: 1fr; gap: 12px; }
  /* SmartWater */
  .tab-intro { grid-template-columns: 1fr; gap: 2.5rem; }
  .w-process-card--horizontal { flex-direction: column; max-width: 260px; }
  .specs-prod-grid { grid-template-columns: 1fr; }
  .w-usages-grid { grid-template-columns: 1fr 1fr; }
  .trust-bar-water .trust-items { gap: 0; flex-wrap: wrap; }
  .trust-bar-water .trust-item { padding: 1rem 1.5rem; border-left: none !important; border-top: 1px solid rgba(0,180,216,.1); }
}

@media (max-width: 768px) {
  .section-pad { padding: 56px 0; }
  .w-section { padding: 64px 0; }
  .container { --container-pad: 18px; }
  .section-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }

  .nav-links { display: none; }
  .universe-switcher { display: none; }
  .nav-burger { display: flex; margin-left: auto; }

  .hero { padding: 110px 18px 64px; min-height: auto; }
  .hero-water { padding: 110px 18px 64px; min-height: auto; }
  .hero-stats { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; scrollbar-width: none; }
  .hero-stats::-webkit-scrollbar { display: none; }
  .stat-item { flex-shrink: 0; }
  .stat-divider { display: none; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-financement { flex-direction: column; gap: 10px; padding: 18px 20px; }

  .trust-items { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .trust-bar-water .trust-items { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }

  .solutions-tabs, .water-tabs-nav { gap: 6px; }
  .sol-tab-btn, .water-tab-btn { padding: 9px 16px; font-size: .82rem; }
  .solutions-grid { grid-template-columns: 1fr; }
  .solution-card { padding: 24px 20px; }

  .avantages-grid { grid-template-columns: 1fr; gap: 14px; }
  .avantage-card { padding: 22px 18px; }

  .temoignage-card { width: calc(100vw - 36px); min-width: calc(100vw - 36px); }

  .form-row { grid-template-columns: 1fr; }
  .contact-form-card { padding: 28px 20px; }
  .w-contact-card { padding: 28px 20px; }

  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal { justify-content: center; }

  .histoire-chiffres { grid-template-columns: 1fr 1fr; gap: 12px; }

  .synergy-banner { grid-template-columns: 1fr; text-align: center; }

  .tab-cta { padding: 36px 22px; }
  .tab-cta h3 { font-size: 1.3rem; }

  .calc-type-group { flex-wrap: wrap; }

  .savings-layout { grid-template-columns: 1fr; }

  /* SmartWater mobile */
  .tab-intro { padding: 1.75rem; margin-bottom: 3rem; gap: 2rem; }
  .tab-intro-title { font-size: clamp(1.5rem, 5vw, 2rem); }
  .w-subsection-title { font-size: clamp(1.3rem, 4.5vw, 1.7rem); }
  .w-usages-grid { grid-template-columns: 1fr; gap: 1rem; }
  .filtration-timeline { margin-bottom: 3rem; }
  .specs-prod-grid { gap: 1rem; margin-bottom: 3rem; }
  .w-block-gap { margin-bottom: 3rem; }
  .w-avantages-grid { margin-bottom: 3rem; }
}

@media (max-width: 480px) {
  .hero { padding: 100px 14px 56px; }
  .hero-water { padding: 100px 14px 56px; }
  .trust-items { grid-template-columns: 1fr; }
  .trust-bar-water .trust-items { grid-template-columns: 1fr; }
  .histoire-chiffres { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .w-usages-grid { grid-template-columns: 1fr; }
  .savings-layout { grid-template-columns: 1fr; }
  .tab-intro { padding: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════
   BESTSELLERS SECTION
═══════════════════════════════════════════════════════ */

.bs-section {
  background: var(--surface);
  position: relative;
}
/* Le halo de section était ambré, comme le bloc prix et le badge bestseller
   plus bas : trois touches chaudes sur un site qui n'a que deux accents, le
   vert et le cyan. C'est ce qui faisait que la carte vedette ne ressemblait
   pas au reste de la page. Il prend l'accent courant. */
.bs-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(26,185,119,.07), transparent);
  pointer-events: none;
}

/* ── Layout grille ── */
.bs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.bs-small-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* ── Carte de base ── */
/* L'ombre au repos manquait : une carte qui n'a d'ombre qu'au survol est plate
   tant qu'on ne la touche pas, et sur mobile on ne la touche jamais. Elle est
   teintée navy plutôt que noire — une ombre noire sur un fond gris clair
   grisaille, une ombre navy assombrit dans la couleur du site. */
.bs-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(23, 59, 89, .05), 0 12px 32px -20px rgba(23, 59, 89, .22);
  transition: transform .3s ease, box-shadow .3s ease;
}
.bs-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(23, 59, 89, .06), 0 28px 60px -28px rgba(23, 59, 89, .38);
}

/* ── Hero card ──
   La colonne de texte gagne du terrain sur la vidéo. Ce n'est pas une question
   d'esthétique : à 1.1fr la colonne faisait 593 px, ce qui mettait trois des
   quatre paragraphes sur trois lignes et poussait la carte à 897 px de haut —
   pour 724 px utiles sur un écran de portable, navbar collante déduite. On ne
   pouvait donc jamais voir le nom du produit et son prix en même temps.
   La vidéo est cadrée en `cover` : elle perd de la largeur, pas du sujet. */
.bs-card--hero {
  display: grid;
  grid-template-columns: 1fr 1.32fr;
  align-items: stretch;
}

.bs-hero-video-wrap {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  height: 100%;
  background: #0a0a12;
}
.bs-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bs-hero-overlay {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
}

/* ── Small card ── */
.bs-card--small {
  display: flex;
  flex-direction: column;
}

/* 20 px de moins sur la vignette : c'est ce qui manquait aux petites cartes
   pour tenir elles aussi dans une fenêtre de portable. Une photo de toiture en
   `cover` ne perd rien à être un peu moins haute — le texte, si. */
.bs-small-img-wrap {
  position: relative;
  overflow: hidden;
  height: 200px;
  background: #0a0a12;
  flex-shrink: 0;
}
.bs-small-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.bs-card--small:hover .bs-small-img {
  transform: scale(1.04);
}

/* ── Corps de carte ── */
.bs-card-body {
  padding: 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.bs-card-top {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bs-card-category {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-current);
  margin-bottom: .25rem;
}
.bs-card-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  margin: 0 0 .5rem;
}

/* La carte SigenMate de l'accueil ne menait nulle part : elle proposait
   d'ajouter au panier et renvoyait à la fiche technique du fabricant, mais
   pas à la page produit du site. Le titre devient donc un vrai lien, et ce
   lien s'étend à toute la carte.

   L'ancre porte le nom du produit plutôt qu'un « en savoir plus » : c'est ce
   que lisent les lecteurs d'écran et les moteurs. La zone cliquable passe
   par un ::after étiré, pas par un <a> englobant, parce que la carte contient
   déjà un bouton et un lien externe — les imbriquer serait invalide. Ils
   restent au-dessus grâce à leur z-index. */
.bs-card--hero { position: relative; }
.bs-card-link { color: inherit; }
.bs-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Ce qui doit rester cliquable par-dessus la zone étirée. */
.bs-card--hero .bs-card-actions,
.bs-card--hero .bs-features a,
.bs-card--hero .bs-brand-logo-wrap { position: relative; z-index: 2; }
/* Le titre suit l'accent au survol de la carte, pour que la zone cliquable
   se signale — sinon rien n'indique que la carte entière mène quelque part. */
.bs-card--hero:hover .bs-card-link { text-decoration: underline; text-underline-offset: 3px; }
.bs-card-desc {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── Accroche de la carte vedette ──
   La carte annonçait « Système tout-en-un · Plug & Play · IA embarquée », puis
   quatre lignes de caractéristiques. C'est une fiche technique, pas une
   promesse : le visiteur devait déduire lui-même ce que l'appareil lui apporte.
   L'accroche dit maintenant le bénéfice en une ligne et la description
   l'explique en deux — le détail chiffré vit sur /sigenmate, où il a sa place. */
.bs-card-slogan {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 .6rem;
  letter-spacing: -.01em;
}

/* ── Preuves ──
   Trois arguments là où il y avait sept puces. Chacun porte un titre qui se lit
   seul et une justification d'une ligne : on peut ne lire que les titres et
   avoir compris le produit. */
.bs-proofs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .55rem;
}
.bs-proofs li {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .7rem 1rem;
  border-radius: var(--radius-md);
  background: rgba(23, 59, 89, .035);
  border: 1px solid rgba(23, 59, 89, .07);
  transition: background .25s ease, border-color .25s ease;
}
.bs-card--hero:hover .bs-proofs li {
  background: rgba(23, 59, 89, .055);
  border-color: rgba(23, 59, 89, .11);
}
.bs-proofs li > i {
  color: var(--accent-current);
  font-size: 1rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  margin-top: .15rem;
}
/* Les titres sont des phrases, pas des étiquettes : on doit pouvoir ne lire
   qu'eux. Ils prennent donc assez d'écart avec la justification pour qu'on les
   distingue au premier coup d'œil. */
.bs-proofs strong {
  display: block;
  font-size: .98rem;
  font-weight: 750;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: .25rem;
}
.bs-proofs span {
  display: block;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ── Bandeau de caractéristiques ──
   Ce que la fiche technique avait de rassurant sans être vendeur : conservé,
   mais au rang typographique qui lui revient. */
.bs-specs-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  margin: 0;
  font-size: .74rem;
  color: var(--text-muted);
  opacity: .85;
}
.bs-specs-strip span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.bs-specs-strip span + span::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}

/* ── Prix ──
   Le bloc était ambré et centré : la tache la plus voyante de la carte était
   une couleur qui n'existe nulle part ailleurs sur le site. Il passe au navy
   de la charte et se range à côté des boutons plutôt qu'au-dessus du texte,
   pour que prix et achat forment un seul geste. */
.bs-buy {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.bs-price-block {
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.bs-price-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 .1rem;
}
/* Pas de crénage négatif ici : à 900 de graisse il resserre surtout l'espace
   des milliers, et « 1 340 » finissait par se lire « 1340 ». */
.bs-price {
  font-size: 2.15rem;
  font-weight: 900;
  color: var(--text);
  margin: 0;
  line-height: 1.05;
  white-space: nowrap;
}
.bs-price-currency {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
}
.bs-price-sub {
  font-size: .72rem;
  color: var(--text-muted);
  margin: .3rem 0 0;
  opacity: .85;
}

/* ── Features ── */
.bs-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.bs-features li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .88rem;
  color: var(--text-muted);
}
.bs-features li i {
  color: var(--accent-current);
  font-size: .8rem;
  width: 16px;
  flex-shrink: 0;
}

.bs-features--compact {
  gap: .38rem;
}
.bs-features--compact li {
  font-size: .82rem;
}

/* ── Actions ── */
.bs-card-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: auto;
}
/* Dans le bandeau d'achat, les boutons ne sont plus en bas d'une colonne mais
   à droite d'une ligne : le `margin-top: auto` ci-dessus n'a plus de sens. */
.bs-buy .bs-card-actions {
  margin-top: 0;
  margin-left: auto;
}

/* ── Lien secondaire ──
   Deux boutons côte à côte demandaient 420 px alors que la ligne d'achat n'en
   offrait que 419 à 1200 px de large : elle passait sur deux lignes et la carte
   gagnait 64 px de haut, juste assez pour déborder de la fenêtre. Le second
   appel n'avait de toute façon pas à peser autant que « Ajouter au panier » —
   en lien texte il rend ses ~40 px de rembourrage et la hiérarchie devient
   lisible : une action, un renvoi.
   La flèche avance au survol, seul mouvement qui reste. */
.bs-link-more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  padding: .35rem 0;
  border-bottom: 1px solid rgba(23, 59, 89, .22);
  transition: color .2s ease, border-color .2s ease;
}
.bs-link-more i {
  font-size: .78rem;
  color: var(--accent-current);
  transition: transform .2s ease;
}
.bs-link-more:hover {
  color: var(--accent-current);
  border-bottom-color: var(--accent-current);
}
.bs-link-more:hover i { transform: translateX(3px); }

.bs-devis-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* ── Badges ── */
.bs-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .85rem;
  border-radius: var(--radius-pill);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* Le badge était un dégradé orange→rouge posé sur la vidéo : la couleur la plus
   saturée de la page servait à dire « bestseller », c'est-à-dire l'information
   la moins utile de la carte. Il passe en verre sombre, l'accent ne portant
   plus que l'icône — le badge se lit, sans crier. */
.bs-badge--bestseller {
  --lg-tint: 10, 28, 43;
  --lg-fill-a: .52;
  --lg-fill-b: .34;
  --lg-rim: .34;
  background: linear-gradient(140deg,
    rgba(10, 28, 43, .52), rgba(10, 28, 43, .34));
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--white);
  box-shadow: 0 6px 22px -8px rgba(10, 28, 43, .5);
}
.bs-badge--bestseller i { color: var(--accent-current); }
.bs-badge--new {
  background: linear-gradient(135deg, var(--accent-current), #6366f1);
  color: var(--white);
}
.bs-badge--pro {
  background: linear-gradient(135deg, #10b981, #059669);
  color: var(--white);
}

/* ── Logo marque partenaire ── */
/* Un carton blanc à ombre portée sur un fond de carte déjà blanc : l'ombre
   était la seule chose qui le dessinait, et elle le faisait flotter. Un simple
   liseré suffit à isoler le logo du fabricant. */
.bs-brand-logo-wrap {
  display: inline-flex;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .25rem .6rem;
  margin-bottom: .55rem;
}
.bs-brand-logo {
  height: 26px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ════════════════════════════════════════════
   TEASER TARIFS DYNAMIQUES (accueil → /sigenmate#pdp-dyn)
   ════════════════════════════════════════════ */
.dyn-teaser {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}
.dyn-teaser-inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 3rem;
  align-items: center;
}
.dyn-teaser-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--green);
  background: var(--mint-soft);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 1.1rem;
}
.dyn-teaser-text h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--dark);
  margin-bottom: 1rem;
}
.dyn-teaser-text > p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--gray-600);
  margin-bottom: 1.6rem;
}
.dyn-teaser-figures {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.dyn-teaser-fig {
  background: #fff;
  border:  1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.3rem 1.4rem;
  transition: border-color .25s, transform .25s;
}
.dyn-teaser-fig:hover { border-color: rgba(26,185,119,.45); transform: translateY(-2px); }
.dyn-teaser-fig-num {
  display: block;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--green);
  margin-bottom: .35rem;
}
.dyn-teaser-fig-lbl {
  display: block;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--gray-600);
}
/* Attribution : ces chiffres viennent du constructeur, pas de SmartSun. */
.dyn-teaser-src {
  font-size: .74rem;
  color: var(--gray-600);
  margin: 0;
}
@media (max-width: 900px) {
  .dyn-teaser-inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* ════════════════════════════════════════════
   SECTION ILS NOUS FONT CONFIANCE
   ════════════════════════════════════════════ */
.confiance-section {
  background: var(--gray-100);
}

/* Carrousel sens inverse + vitesse différente */
.partners-track--slow {
  animation-name: partners-scroll-rtl;
  animation-duration: 36s;
}

@keyframes partners-scroll-rtl {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Logos hauts (Tautavel, Jardins du Roussillon) */
.partner-logo-img--tall {
  max-height: 56px;
  max-width: 120px;
}

/* Logos quasi-carrés (BIP Padel, Jardins du Roussillon) */
.partner-logo-img--square {
  max-height: 72px;
  max-width: 140px;
}

/* Carte fond sombre pour logo avec background noir */
.partner-logo-card--dark {
  background: #1a1a1a;
  border-color: #333;
}
.partner-logo-card--dark:hover {
  border-color: var(--accent-current);
  background: #222;
}

/* ════════════════════════════════════════════
   SECTION PARTENAIRES / MARQUES
   ════════════════════════════════════════════ */
.partners-section {
  background: var(--white);
  overflow: hidden;
}

/* Wrapper avec masque de fondu sur les bords */
.partners-track-wrapper {
  position: relative;
  overflow: hidden;
  /* le débord ne doit jamais dépasser le padding du .container, sinon overflow-x */
  margin: 0 calc(min(1rem, var(--container-pad, 1rem)) * -1);
}
.partners-track-wrapper::before,
.partners-track-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.partners-track-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--white) 0%, transparent 100%);
}
.partners-track-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--white) 0%, transparent 100%);
}

/* Piste défilante */
.partners-track {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: max-content;
  animation: partners-scroll 28s linear infinite;
  padding: 0.5rem 1rem;
}
.partners-track:hover {
  animation-play-state: paused;
}

@keyframes partners-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Carte logo individuelle */
.partner-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border: 1.5px solid #e9ecef;
  border-radius: var(--radius-md);
  padding: 1rem 1.75rem;
  min-width: 180px;
  height: 90px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
  text-decoration: none;
  flex-shrink: 0;
}
.partner-logo-card:hover {
  border-color: var(--accent-current);
  box-shadow: 0 6px 24px rgba(245,158,11,.18);
  transform: translateY(-3px);
  background: var(--white);
}

/* Image logo */
.partner-logo-img {
  max-height: 44px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(100%);
  opacity: .55;
  transition: filter .3s ease, opacity .3s ease;
}
.partner-logo-card:hover .partner-logo-img {
  filter: grayscale(0%);
  opacity: 1;
}
/* Pause du défilement au survol du carrousel entier */
.partners-track-wrapper:hover .partners-track {
  animation-play-state: paused;
}

/* Ajustements spécifiques par logo */
.partner-logo-img--sigenergy {
  max-height: 56px;  /* logo vertical, besoin de plus de hauteur */
  max-width: 100px;
}
.partner-logo-img--longi {
  max-height: 52px;
  max-width: 120px;
}
.partner-logo-img--dmegc {
  max-height: 38px;
  max-width: 140px;
}
.partner-logo-img--technideal {
  max-height: 48px;
  max-width: 160px;
}

/* Légende sous les logos */
.partners-caption {
  text-align: center;
  color: var(--text-muted);
  font-size: .82rem;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.partners-caption i {
  color: var(--accent-current);
}

/* ── Responsive bestsellers ── */

/* Entre 1024 et 1400 px, la colonne de texte se resserre assez pour que trois
   blocs repassent sur une ligne de plus, et la carte regagne les 60 px qu'on
   venait de lui retirer. La vidéo cède donc un peu plus de largeur : c'est le
   seul réglage qui rende la hauteur à peu près stable sur toute la plage des
   écrans de portable, plutôt que juste sur celui où on l'a mesurée. */
@media (min-width: 1281px) and (max-width: 1400px) {
  .bs-card--hero {
    grid-template-columns: 1fr 1.55fr;
  }
}
@media (min-width: 1200px) and (max-width: 1280px) {
  .bs-card--hero {
    grid-template-columns: 1fr 1.75fr;
  }
}

/* Sous 1200 px, resserrer la grille ne suffit plus : le bandeau d'achat n'a plus
   la place de tenir le prix et les deux appels sur une ligne, il passe à la
   ligne suivante et la carte prend 64 px d'un coup. On empile donc les deux
   appels à droite du prix — c'est trois pixels de plus, pas soixante — et on
   retire un cran de rembourrage partout. Mesuré à 1025 px : carte vedette
   723 px, petites cartes 716 px, pour 724 px utiles sous une navbar collante. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .bs-card--hero {
    grid-template-columns: 1fr 1.95fr;
  }
  .bs-buy .bs-card-actions {
    flex-direction: column;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: .45rem;
  }
  .bs-card-body {
    padding: 1.5rem 1.7rem;
    gap: .85rem;
  }
  .bs-proofs { gap: .45rem; }
  .bs-proofs li { padding: .6rem .9rem; }
  .bs-small-img-wrap { height: 180px; }
}

@media (max-width: 1024px) {
  .bs-card--hero {
    grid-template-columns: 1fr;
  }
  .bs-hero-video-wrap {
    min-height: 320px;
  }
  .bs-price-block {
    max-width: 280px;
  }
}

@media (max-width: 768px) {
  .bs-small-grid {
    grid-template-columns: 1fr;
  }
  .bs-card-body {
    padding: 1.5rem;
  }
  .bs-hero-video-wrap {
    min-height: 240px;
  }
  .bs-card-top {
    gap: 1rem;
  }
  .bs-price {
    font-size: 1.7rem;
  }
  .bs-card-slogan {
    font-size: 1.18rem;
  }
  /* Le bandeau d'achat repasse en colonne : côte à côte, le prix et deux
     boutons ne tiennent pas sous 400 px sans que le bouton d'achat se retrouve
     coupé en deux lignes. */
  .bs-buy {
    flex-direction: column;
    align-items: stretch;
    gap: 1.1rem;
  }
  .bs-buy .bs-card-actions {
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .85rem;
  }
  .bs-buy .bs-card-actions .btn {
    width: 100%;
    justify-content: center;
  }
  /* Le lien se centre sous le bouton plutôt que de rester collé à gauche. */
  .bs-link-more {
    align-self: center;
  }
  /* Les puces de séparation se placent avant chaque élément : quand la ligne
     passe à la suivante, la nouvelle ligne commence par une puce orpheline.
     En colonne, la question ne se pose plus. */
  .bs-specs-strip {
    flex-direction: column;
    gap: .3rem;
  }
  .bs-specs-strip span + span::before { display: none; }
}

/* ═══════════════════════════════════════════
   AJOUTS CORRECTIONS — badges qualitatifs & Google Reviews
═══════════════════════════════════════════ */
.stat-badge{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:var(--green);margin-bottom:6px;
}
.chiffre-badge{
  font-size:1.9rem;color:var(--green);margin-bottom:4px;line-height:1;
}
.google-reviews-placeholder{
  max-width:640px;margin:0 auto;padding:44px 24px;
  background:var(--white);border:1px dashed #d5dde3;
  border-radius:var(--radius-md);text-align:center;
}
.grw-logo{font-size:2.4rem;margin-bottom:14px;color:#4285F4;}
.grw-text{color:var(--gray-600,#5c6f7d);margin-bottom:18px;font-size:15px;}

/* Image réelle dans le rectangle "dernière réalisation" */
.realisation-img{
  width:100%;height:100%;object-fit:cover;display:block;
}
a.realisation-card{text-decoration:none;display:block;}
a.realisation-card .realisation-title,
a.realisation-card .realisation-desc{text-decoration:none;}

/* ═══════════════════════════════════════════
   RÉORGANISATION HOME + PAGES DÉDIÉES
═══════════════════════════════════════════ */

/* Grille avantages : 4 fixes desktop, 2 tablette, 1 mobile */
.avantages-grid--3{
  grid-template-columns:repeat(4,1fr);
}
@media(max-width:1100px){ .avantages-grid--3{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .avantages-grid--3{grid-template-columns:1fr;} }
/* la carte n'a plus de numéro dans la version fusionnée : centrer le contenu */
.avantages-grid--3 .avantage-card{padding-top:28px;}

/* Bouton outline clair (sur fond sombre) */
.btn-outline-light{
  background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.35);
}
.btn-outline-light:hover{border-color:var(--white);background:rgba(255,255,255,.08);}

/* ---------- TEASER SIMULATEUR ---------- */
.simu-teaser{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.simu-teaser-text .section-title{color:var(--white);}
.simu-teaser-text p{color:#b8ccda;margin-bottom:24px;font-size:1rem;}
.simu-teaser-visual{display:flex;justify-content:center;}
.simu-teaser-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);padding:36px;text-align:center;min-width:280px;
  box-shadow:0 20px 60px -25px rgba(0,0,0,.5);
}
.simu-teaser-icon{width:58px;height:58px;margin:0 auto 16px;border-radius: var(--radius-ico);background:rgba(26,185,119,.16);color:var(--green,#1ab977);display:flex;align-items:center;justify-content:center;font-size:24px;}
.simu-teaser-big{font-size:2.4rem;font-weight:800;color:var(--green,#1ab977);line-height:1;}
.simu-teaser-sub{color:#b8ccda;font-size:.9rem;margin-top:6px;}
.simu-teaser-hint{margin-top:18px;font-size:.85rem;color:#8fb0c4;display:flex;align-items:center;gap:7px;justify-content:center;}
@media(max-width:820px){.simu-teaser{grid-template-columns:1fr;gap:28px;}}

/* ---------- MINI AGENCES ---------- */
.mini-agences-section{background:var(--gray-100,#f6f9fb);}
.mini-agences-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.mini-agence-card{
  background:var(--white);border: 1px solid var(--line);border-radius:var(--radius-md);padding:22px 24px;position:relative;
}
.mini-agence-card strong{display:block;color:var(--dark);font-size:1.05rem;margin:6px 0 4px;}
.mini-agence-card span{color:var(--muted,#5c6f7d);font-size:.88rem;line-height:1.5;}
.mini-agence-dot{width:10px;height:10px;border-radius:50%;background:var(--green,#1ab977);box-shadow:0 0 10px var(--green,#1ab977);}
/* Les trois logos de région ont des proportions incompatibles (Occitanie est
   carré, Auvergne-Rhône-Alpes fait cinq fois sa hauteur) : on borne les deux
   dimensions plutôt que la seule hauteur, sinon la ligne part en vrille. */
.mini-agence-region{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line,#e4eaee);min-height:52px;
}
.mini-agence-card .mini-agence-region span{color:var(--muted,#5c6f7d);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;}
.mini-agence-region img{max-height:44px;max-width:160px;width:auto;height:auto;object-fit:contain;flex-shrink:0;}
@media(max-width:820px){.mini-agences-grid{grid-template-columns:1fr;}}

/* ---------- PAGES SECONDAIRES ---------- */
.navbar--solid{background:var(--dark);position:sticky;top:0;}
.nav-back{color:var(--white);font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:7px;text-decoration:none;opacity:.85;}
.nav-back:hover{opacity:1;}
@media (max-width: 560px) {
  .nav-back span { display: none; }
  .nav-back { width: 40px; height: 40px; justify-content: center; }
}
.subpage{min-height:60vh;}
.subpage-hero{background:linear-gradient(160deg,var(--dark-900),var(--dark));color:var(--white);padding:70px 0 56px;text-align:center;}
.subpage-hero--dark{padding-bottom:40px;}
.subpage-hero .section-label{color:var(--green,#1ab977);justify-content:center;}
.subpage-title{font-size:2.6rem;font-weight:800;margin:10px 0 16px;letter-spacing:-.02em;}
.subpage-lead{max-width:56ch;margin:0 auto;color:var(--dark-muted);font-size:1.05rem;}
.footer-bottom-simple{text-align:center;padding:28px 0;}
.footer-slogan-mini{color:var(--green,#1ab977);font-weight:600;margin:6px 0 14px;}
.footer-slogan-mini--water{color:var(--w-accent,#00b4d8);}

/* ---------- KITS RECOMMANDÉS ---------- */
.kits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.kit-card{background:var(--white);border: 1px solid var(--line);border-radius:var(--radius-md);padding:28px 24px;display:flex;flex-direction:column;gap:12px;}
.kit-card--featured{border-color:var(--green,#1ab977);box-shadow:0 16px 44px -22px rgba(26,185,119,.5);}
.kit-badge{align-self:flex-start;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--green,#1ab977);background:var(--mint-soft);padding:5px 12px;border-radius: var(--radius-pill);}
.kit-card h3{color:var(--dark);font-size:1.15rem;}
.kit-card p{color:var(--muted,#5c6f7d);font-size:.9rem;flex-grow:1;}
.kit-card .btn{align-self:flex-start;margin-top:6px;}
@media(max-width:820px){.kits-grid{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════════
   HERO VISUAL — carte principale seule, pleine largeur
═══════════════════════════════════════════ */
.hero-visual{ align-items: stretch; }
/* La carte réalisation occupe toute la colonne droite */
.hero-visual > .realisation-card{
  width: 100%;
  max-width: 460px;
  margin-left: auto;
}
.hero-visual > .realisation-card .realisation-img-wrap{ height: 260px; }
/* Idem côté SmartWater. Les deux cartes de hero sont des jumelles : le
   basculement d'univers ne doit pas les faire changer de taille. */
#hero-water-visual{ align-items: stretch; }
#hero-water-visual > .water-visual-card{
  width: 100%;
  max-width: 460px;
  margin-left: auto;
}
#hero-water-visual > .water-visual-card .wvc-img-wrap{ height: 260px; }
/* .realisation-tag est repris plus bas en pilule (règle de /realisations) :
   le tag SmartWater doit suivre le même traitement, sinon 12px d'écart. */
#hero-water-visual .wvc-tag{
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: #e0f4fa;
  color: var(--w-accent2);
  letter-spacing: .05em;
  margin-bottom: 10px;
}
#hero-water-visual .wvc-title{ font-size: 1.1rem; }
#hero-water-visual .wvc-desc{ font-size: .85rem; color: rgba(255,255,255,.82); }
/* Deux lignes réservées de part et d'autre : sans ça la hauteur de carte
   dépend de la longueur du texte de chaque univers. */
.hero-visual > .realisation-card .realisation-desc,
#hero-water-visual > .water-visual-card .wvc-desc{ min-height: 2.55rem; }

/* ═══════════════════════════════════════════
   FIX alignement boutons "Devis gratuit" / "Demander une étude" dans la nav
═══════════════════════════════════════════ */
.nav-links a.btn-nav,
.nav-links a.btn-water{
  padding: 11px 22px;          /* padding homogène haut/bas */
  display: inline-flex;
  align-items: center;
  line-height: 1;
  border-radius: var(--radius-pill);
}
/* pas de soulignement animé sur le bouton */
.nav-links a.btn-nav::after,
.nav-links a.btn-water::after{ display: none; }
.nav-links a.btn-nav:hover,
.nav-links a.btn-water:hover{ color: var(--white); }

/* ═══════════════════════════════════════════
   PAGE-HEADER UNIFIÉ (pages internes) — raccord home
═══════════════════════════════════════════ */
.page-header{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--dark-900) 0%,var(--dark) 60%,var(--dark-600) 100%);
  color:var(--white);padding:56px 0 52px;
}
.page-header-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.ph-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;}
.ph-glow-1{width:360px;height:360px;background:var(--green,#1ab977);top:-140px;right:-80px;animation:pulse-glow 6s ease-in-out infinite;}
.ph-glow-2{width:280px;height:280px;background:#2f7fc4;bottom:-120px;left:-60px;animation:pulse-glow 8s ease-in-out infinite reverse;}
.page-header-inner{position:relative;z-index:1;}

.breadcrumb{display:flex;align-items:center;gap:9px;font-size:.82rem;color:rgba(255,255,255,.55);margin-bottom:18px;}
.breadcrumb a{color:rgba(255,255,255,.75);text-decoration:none;transition:color .2s;}
.breadcrumb a:hover{color:var(--white);}
.breadcrumb i{font-size:.6rem;opacity:.5;}
.breadcrumb span{color:var(--green,#1ab977);font-weight:600;}

.ph-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--green,#1ab977);background:rgba(26,185,119,.12);
  border:1px solid rgba(26,185,119,.25);
  padding:7px 15px;border-radius: var(--radius-pill);margin-bottom:18px;
}
.ph-title{
  font-size:2.6rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;
  margin-bottom:14px;max-width:20ch;
}
.ph-lead{max-width:60ch;color:var(--dark-muted);font-size:1.05rem;line-height:1.6;}

@media(max-width:640px){
  .ph-title{font-size:2rem;}
  .page-header{padding:40px 0 38px;}
}

/* ═══════════════════════════════════════════
   HALOS PULSANTS — signature visuelle globale
   Appliqués à toutes les sections sombres via pseudo-éléments.
   Même intensité que le hero (pulse-glow).
═══════════════════════════════════════════ */
.dark-section,
.water-dark-section,
.page-header{
  position: relative;
  overflow: hidden;
}
/* le contenu passe au-dessus des halos */
.dark-section > *,
.water-dark-section > *{
  position: relative;
  z-index: 1;
}

/* Halo 1 (vert) — haut droite */
.dark-section::before,
.water-dark-section::before{
  content:"";
  position:absolute;
  width:600px;height:600px;
  border-radius:50%;
  filter:blur(80px);
  top:-180px;right:-120px;
  pointer-events:none;
  z-index:0;
  background:var(--green,#1ab977);
  animation:pulse-glow 6s ease-in-out infinite;
}
/* Halo 2 (bleu) — bas gauche */
.dark-section::after,
.water-dark-section::after{
  content:"";
  position:absolute;
  width:420px;height:420px;
  border-radius:50%;
  filter:blur(80px);
  bottom:-150px;left:-100px;
  pointer-events:none;
  z-index:0;
  background:#0066cc;
  animation:pulse-glow 8s ease-in-out infinite reverse;
}
/* Teinte des halos côté SmartWater */
.water-dark-section::before{ background:var(--w-accent,#00b4d8); }
.water-dark-section::after{ background:#0066cc; }

/* Respect de prefers-reduced-motion : on fige les halos */
@media (prefers-reduced-motion: reduce){
  .dark-section::before,.dark-section::after,
  .water-dark-section::before,.water-dark-section::after{
    animation:none;opacity:.18;
  }
}

/* ═══════════════════════════════════════════
   HERO — photo de fond + overlay navy (remplace le quadrillage)
   Déposer la photo dans /static/hero-toiture.webp (toiture panneaux solaires)
═══════════════════════════════════════════ */
.hero-photo{
  position:absolute;inset:0;z-index:0;
  background-image:url('/static/hero-toiture.webp');
  background-size:cover;
  background-position:center;
  /* légère désaturation pour se fondre dans la charte */
  filter:saturate(.9);
}
/* Overlay navy très sombre : texte ultra-lisible, photo discrète */
.hero-photo-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(160deg,
      rgba(14,38,59,.92) 0%,
      rgba(23,59,89,.88) 50%,
      rgba(14,38,59,.94) 100%);
}
/* Les halos passent au-dessus de l'overlay, le contenu encore au-dessus */
.hero-bg .hero-glow{ z-index:2; }

/* ═══════════════════════════════════════════
   MASCOTTE SMARTY — apparition discrète (B2C)
═══════════════════════════════════════════ */
.smarty-float{
  position:absolute;
  z-index:1;
  pointer-events:none;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.35));
}
.smarty-float--avantages{
  width:150px;
  top:40px;right:40px;
}
/* masquer sur mobile pour ne pas gêner le contenu */
@media(max-width:900px){ .smarty-float--avantages{ display:none; } }

/* ═══════════════════════════════════════════
   PHOTOS DANS KITS + CALEPINAGE + SMARTY SIMU
═══════════════════════════════════════════ */
/* Photo en tête d'un kit */
.kit-photo{
  margin:-28px -24px 4px;
  height:150px;overflow:hidden;
  border-radius:var(--radius-md) 16px 0 0;
}
.kit-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.kit-card--featured .kit-photo{ margin-top:-28px; }

/* Bloc étude / calepinage */
.etude-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.etude-visual img{width:100%;border-radius:var(--radius-md);box-shadow:var(--shadow-lg,0 20px 50px -20px rgba(19,53,77,.4));display:block;}
.etude-text .section-title{color:var(--dark);}
.etude-text p{color:var(--muted,#5c6f7d);margin:14px 0 22px;font-size:1rem;}
@media(max-width:820px){ .etude-layout{grid-template-columns:1fr;gap:28px;} .etude-visual{order:-1;} }

/* Smarty présentateur à côté du simulateur */
.smarty-float--simu{
  width:170px;
  bottom:20px;left:0;
  top:auto;right:auto;
}
@media(max-width:1000px){ .smarty-float--simu{ display:none; } }

/* ═══════════════════════════════════════════
   GALERIE RÉALISATION VINGRAU + placeholder étude
═══════════════════════════════════════════ */
.vingrau-gallery{
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:14px;
  height:460px;
}
.vg-item{
  overflow:hidden;border-radius:var(--radius-md);display:block;position:relative;
  box-shadow:0 10px 30px -15px rgba(19,53,77,.4);
}
.vg-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.vg-item:hover img{transform:scale(1.05);}
.vg-item--big{grid-row:1 / span 2;}
@media(max-width:820px){
  .vingrau-gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto;}
  .vg-item--big{grid-column:1 / span 2;height:240px;}
  .vg-item:not(.vg-item--big){height:170px;}
}

/* Placeholder image d'étude (en attente de photo) */
.etude-placeholder{
  width:100%;aspect-ratio:16/11;
  background:#eef3f7;border:1px dashed var(--gray-300,#d5dde3);
  border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--muted,#5c6f7d);
}
.etude-placeholder i{font-size:2rem;opacity:.4;}
.etude-placeholder span{font-size:.9rem;}

/* ═══════════════════════════════════════════
   LOGOS OFFICIELS (images) — navbar + footer
═══════════════════════════════════════════ */
.nav-logo-img{
  height:38px;width:auto;display:block;
}
/* SmartWater a une baseline sur 2 lignes -> ratio plus ramassé,
   on augmente sa hauteur pour équilibrer visuellement avec SmartSun */
.nav-logo-img--water{ height:52px; display:none; }
body.universe-water .nav-logo-img--sun{ display:none; }
body.universe-water .nav-logo-img--water{ display:block; }

.footer-logo-img{
  height:44px;width:auto;display:block;margin-bottom:4px;
}
.footer-logo-img--water{ height:60px; }

/* Ajustement hauteur navbar si besoin */
@media(max-width:600px){
  .nav-logo-img{ height:30px; }
  .footer-logo-img{ height:36px; }
}


/* Fix couleurs SmartWater — forcer les accents adaptatifs */
body.universe-water .hero-subtitle strong,
body.universe-water .hero-subtitle strong.w-strong,
body.universe-water .w-strong { color: var(--w-light) !important; }
body.universe-water .success-icon,
body.universe-water .w-tag i.fa-check-circle { color: var(--w-accent) !important; }

/* ═══════════════════════════════════════════
   BLOC CTA HOME (remplace réalisation phare)
═══════════════════════════════════════════ */
.cta-band .cta-band-inner{
  text-align:center;max-width:680px;margin:0 auto;
}
.cta-band .section-label{ justify-content:center; }
.cta-band .section-title{ color:var(--white); }
.cta-band .section-desc{ color:var(--dark-muted); margin:0 auto 28px; }
.cta-band-btns{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
}

/* ═══════════════════════════════════════════
   KITS — prix, points, mention légale, CTA étude
═══════════════════════════════════════════ */
.kit-price{
  font-family:'Inter',sans-serif;font-size:1.05rem;color:var(--dark);
  margin:2px 0 10px;line-height:1.3;
}
.kit-price strong{ color:var(--green,#1ab977);font-size:1.35rem;font-weight:800; }
.kit-price sup{ color:var(--muted,#5c6f7d);font-size:.7rem; }
.kit-price--featured strong{ display:inline-block;font-size:1.15rem; }

.kit-points{
  list-style:none;margin:6px 0 16px;padding:0;display:flex;flex-direction:column;gap:7px;
}
.kit-points li{
  display:flex;gap:9px;align-items:flex-start;font-size:.86rem;color:var(--ink,#1a2a37);line-height:1.4;
}
.kit-points li i{ color:var(--green,#1ab977);font-size:.8rem;margin-top:3px;flex-shrink:0; }

.kits-legal{
  max-width:800px;margin:24px auto 0;text-align:center;
  font-size:.78rem;color:var(--muted,#5c6f7d);line-height:1.5;
}
.kits-legal sup{ color:var(--green,#1ab977); }

.kits-cta{
  margin-top:40px;
  background:linear-gradient(135deg,var(--dark),var(--dark-900));
  border-radius:var(--radius-lg);padding:32px 36px;position:relative;overflow:hidden;
}
.kits-cta-inner{
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  position:relative;z-index:1;
}
.kits-cta h3{ color:var(--white);font-size:1.4rem;margin-bottom:6px; }
.kits-cta p{ color:var(--dark-muted);font-size:.95rem;max-width:46ch; }
.kits-cta .btn{ flex-shrink:0; }
@media(max-width:720px){
  .kits-cta-inner{ flex-direction:column;align-items:flex-start;text-align:left; }
}

/* ═══════════════════════════════════════════
   MENU DÉROULANT NAV (À propos + agences)
═══════════════════════════════════════════ */
.nav-dropdown{ position:relative; display:inline-block; }
.nav-dropdown-toggle{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.nav-dropdown-toggle i{ font-size:.7rem; transition:transform .25s; }
.nav-dropdown:hover .nav-dropdown-toggle i{ transform:rotate(180deg); }

/* Les menus déroulants sont, avec le tiroir panier, les seules surfaces qui
   recouvrent vraiment du contenu : le verre y est à sa place. Il reste dosé
   à 88 % — un menu se lit, et il est imbriqué dans une navbar elle-même
   floutée, ce qui limite ce que le navigateur accepte de rééchantillonner
   dessous. À cette opacité, l'effet est un bonus là où il fonctionne, et le
   menu reste un menu blanc propre là où il ne fonctionne pas.

   La transition portait sur `all`, donc désormais sur le flou : elle nomme
   maintenant les trois propriétés qui doivent réellement s'animer. */
.nav-dropdown-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  min-width:260px; background:rgba(255,255,255,.88); border-radius:var(--radius-md);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  isolation:isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 20px 50px -15px rgba(19,53,77,.35);
  border: 1px solid var(--line);
  padding:8px; opacity:0; visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease, transform .22s ease;
  z-index:100;
}
/* Le liseré ne peut pas passer par `::before` : il porte déjà le pont
   invisible qui évite de perdre le menu entre le lien et sa liste. */
.nav-dropdown-menu::after{
  content:''; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; padding:1px;
  background:linear-gradient(142deg,
    rgba(19,53,77,.14) 0%, rgba(19,53,77,0) 34%,
    rgba(19,53,77,0) 64%, rgba(19,53,77,.06) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
.nav-dropdown:hover .nav-dropdown-menu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(6px);
}
/* petit pont invisible pour ne pas perdre le survol */
.nav-dropdown-menu::before{
  content:""; position:absolute; top:-10px; left:0; right:0; height:10px;
}
.nav-dropdown-menu a{
  display:flex !important; align-items:center; gap:11px;
  padding:11px 14px; border-radius:var(--radius-sm); font-size:.9rem; color:var(--ink,#1a2a37);
  transition:background .15s, color .15s; white-space:nowrap;
}
.nav-dropdown-menu a::after{ display:none !important; }
.nav-dropdown-menu a i{ color:var(--green,#1ab977); font-size:.85rem; width:16px; text-align:center; }
.nav-dropdown-menu a:hover{ background:var(--mint-soft,#e7f7f0); color:var(--dark); }

/* sur navbar transparente (home hero) le toggle reste blanc */
.navbar:not(.scrolled):not(.navbar--solid) .nav-dropdown-toggle{ color:var(--white); }

@media(max-width:960px){
  .nav-dropdown-menu{ position:static; transform:none; box-shadow:none; opacity:1; visibility:visible; min-width:0; padding:0 0 0 16px; border:none; background:transparent; }
  .nav-dropdown-menu a{ color:var(--white); }
}

/* ═══════════════════════════════════════════
   PAGES AGENCES (SEO local)
═══════════════════════════════════════════ */
.agence-detail-layout{ display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:start; }
.agence-detail-main h2{ font-size:1.6rem; color:var(--dark); margin-bottom:14px; letter-spacing:-.01em; }
.agence-detail-main h3{ font-size:1.2rem; color:var(--dark); margin:28px 0 12px; }
.agence-detail-main p{ color:var(--ink,#33475a); line-height:1.7; margin-bottom:14px; }
.communes-list{ list-style:none; padding:0; margin:6px 0 10px; display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; }
.communes-list li{ display:flex; align-items:center; gap:9px; font-size:.92rem; color:var(--ink,#33475a); }
.communes-list li i{ color:var(--green,#1ab977); font-size:.8rem; }
.communes-note{ font-size:.85rem; color:var(--muted,#5c6f7d); font-style:italic; }

.agence-detail-side{ position:sticky; top:100px; display:flex; flex-direction:column; gap:18px; }
.agence-cta-card{ background:linear-gradient(160deg,var(--dark-900),var(--dark)); color:var(--white); border-radius:var(--radius-md); padding:28px 26px; }
.agence-cta-card h3{ color:var(--white); font-size:1.25rem; margin-bottom:8px; }
.agence-cta-card p{ color:var(--dark-muted); font-size:.9rem; line-height:1.6; margin-bottom:18px; }
.agence-cta-card .btn{ width:100%; margin-bottom:10px; justify-content:center; }
.agence-zone-card{ background:var(--gray-100,#f6f9fb); border: 1px solid var(--line); border-radius:var(--radius-md); padding:20px 22px; text-align:center; }
.agence-zone-icon{ font-size:1.6rem; color:var(--green,#1ab977); margin-bottom:8px; }
.agence-zone-card strong{ display:block; color:var(--dark); margin-bottom:4px; }
.agence-zone-card span{ color:var(--muted,#5c6f7d); font-size:.88rem; }
/* Logo institutionnel de la région, placé sous l'intitulé « Zone d'intervention »
   qui le présente comme un territoire couvert et non comme un partenariat. Ne pas
   déplacer le logo hors de cette carte : c'est cet intitulé qui donne le contexte. */
.agence-zone-logo{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line,#e4eaee); }
/* Plaque blanche : les trois logos n'ont pas le même fond (Occitanie est un bloc
   rouge, Auvergne-Rhône-Alpes traîne un rectangle blanc). Sans elle, ce rectangle
   se détache sur le gris de la carte. */
.agence-zone-logo img{ width:auto; height:auto; max-height:52px; max-width:160px; display:block; margin:0 auto; object-fit:contain; background:var(--white,#fff); border-radius:var(--radius-sm); padding:6px 10px; box-sizing:border-box; }

.agence-cert-card{ background:var(--white,#fff); border: 1px solid var(--line); border-radius:var(--radius-md); padding:18px 22px 16px; text-align:center; margin-top:16px; }
.agence-cert-card img{ width:auto; height:auto; max-height:62px; max-width:170px; display:block; margin:0 auto 10px; }
.agence-cert-card span{ display:block; color:var(--muted,#5c6f7d); font-size:.82rem; line-height:1.5; }

@media(max-width:900px){
  .agence-detail-layout{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .agence-detail-side{ position:static; }
  .communes-list{ grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════
   PAGES SOLUTIONS (SEO)
═══════════════════════════════════════════ */
.sol-intro-layout{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.sol-intro-visual img{ width:100%; height:auto; border-radius:var(--radius-md); box-shadow:var(--shadow-lg,0 20px 50px -20px rgba(19,53,77,.4)); display:block; }
/* Photo verticale : sans plafond de hauteur elle occupe toute la colonne et
   écrase la colonne de texte, que le grid centre alors dans le vide. */
.sol-intro-visual--portrait img{ width:auto; max-width:100%; max-height:520px; margin:0 auto; }
.sol-intro-text h2{ font-size:1.7rem; color:var(--dark); margin-bottom:16px; letter-spacing:-.01em; }
.sol-intro-text p{ color:var(--ink,#33475a); line-height:1.7; margin-bottom:14px; }
.sol-intro-text .btn{ margin-top:8px; }
@media(max-width:820px){ .sol-intro-layout{ grid-template-columns:minmax(0,1fr); gap:28px; } .sol-intro-visual{ order:-1; } }

.sol-benefits-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.sol-benefit{ background:var(--white); border: 1px solid var(--line); border-radius:var(--radius-md); padding:26px 22px; }
.sol-benefit-icon{ width:48px; height:48px; border-radius: var(--radius-ico); background:var(--mint-soft,#e7f7f0); color:var(--green,#1ab977); display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:14px; }
.sol-benefit h3{ font-size:1.02rem; color:var(--dark); margin-bottom:8px; line-height:1.3; }
.sol-benefit p{ font-size:.88rem; color:var(--muted,#5c6f7d); line-height:1.55; }
.sol-benefits-grid--3{ grid-template-columns:repeat(3,1fr); max-width:900px; margin:0 auto; }
/* Lien de renvoi vers une page dédiée, en bas d'une carte teaser : il doit se
   détacher du paragraphe qui le précède, sinon les deux se lisent d'un seul bloc. */
.sol-benefit-link{ margin-top:14px; }
.sol-benefit-link a{ color:var(--green,#1ab977); font-weight:700; text-decoration:none; }
.sol-benefit-link a:hover{ text-decoration:underline; }
.sol-benefit-link i{ font-size:.78rem; margin-left:4px; }
@media(max-width:1000px){ .sol-benefits-grid, .sol-benefits-grid--3{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .sol-benefits-grid, .sol-benefits-grid--3{ grid-template-columns:1fr; } }

.sol-steps{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:22px; }
.sol-step{ display:flex; gap:20px; align-items:flex-start; background:var(--white); border: 1px solid var(--line); border-radius:var(--radius-md); padding:22px 24px; }
.sol-step-num{ flex-shrink:0; width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--green,#1ab977),var(--green-dark,#128a5a)); color:var(--white); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; }
.sol-step h3{ font-size:1.08rem; color:var(--dark); margin-bottom:5px; }
.sol-step p{ font-size:.92rem; color:var(--ink,#33475a); line-height:1.6; }

/* Ligne d'attribution sous un bloc de chiffres : chaque donnée affichée doit
   pouvoir être rattachée à sa source publique. */
.pv-src{ margin-top:22px; font-size:.8rem; line-height:1.65; color:var(--muted,#5c6f7d); text-align:center; max-width:820px; margin-left:auto; margin-right:auto; }
.pv-src a{ color:var(--green,#1ab977); font-weight:600; }

/* Bandeau de photos de chantier. Les clichés sont au format portrait : on impose
   un ratio commun en object-fit plutôt qu'une hauteur fixe, sinon des photos de
   proportions différentes désalignent les légendes. */
.sol-photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.sol-photo{ margin:0; }
/* height:auto est indispensable : les attributs width/height du <img> — présents
   pour réserver la place au chargement — imposent sinon la hauteur native du
   fichier et neutralisent l'aspect-ratio. */
.sol-photo img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-md); display:block; box-shadow:var(--shadow-lg,0 20px 50px -20px rgba(19,53,77,.4)); }
.sol-photo figcaption{ margin-top:12px; font-size:.85rem; line-height:1.55; color:var(--muted,#5c6f7d); }
.sol-photo figcaption strong{ display:block; color:var(--dark); font-size:.95rem; margin-bottom:3px; }
/* Variante paysage, pour les bandeaux dont les visuels sont en 4/3 ou 16/9 :
   les recadrer en 4/5 amputerait les côtés de l'image. */
.sol-photos--wide .sol-photo img{ aspect-ratio:4/3; }
@media(max-width:820px){ .sol-photos{ grid-template-columns:1fr; max-width:420px; margin:0 auto; } }

/* ═══════════════════════════════════════════
   ENCART SUNLIB (page pro)
═══════════════════════════════════════════ */
.sunlib-section{ background:var(--gray-100,#f6f9fb); }
.sunlib-card{
  background:var(--white); border: 1px solid var(--line); border-radius:var(--radius-lg);
  padding:44px 48px; max-width:1000px; margin:0 auto;
  box-shadow:0 24px 60px -30px rgba(19,53,77,.35); position:relative; overflow:hidden;
}
.sunlib-card::before{
  content:""; position:absolute; top:-120px; right:-80px; width:320px; height:320px;
  background:radial-gradient(circle, rgba(26,185,119,.12), transparent 70%); pointer-events:none;
}
.sunlib-card-head{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.sunlib-logo{ height:42px; width:auto; }
.sunlib-tag{
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--green,#1ab977); background:var(--mint-soft,#e7f7f0);
  padding:6px 14px; border-radius: var(--radius-pill);
}
.sunlib-title{ font-size:1.9rem; color:var(--dark); line-height:1.2; margin-bottom:14px; letter-spacing:-.01em; }
.sunlib-intro{ color:var(--ink,#33475a); line-height:1.7; max-width:70ch; margin-bottom:24px; }

.sunlib-price{
  display:inline-flex; flex-direction:column; align-items:flex-start;
  background:linear-gradient(135deg,var(--dark-900),var(--dark)); color:var(--white);
  border-radius:var(--radius-md); padding:18px 28px; margin-bottom:30px;
}
.sunlib-price-from{ font-size:.8rem; opacity:.7; }
.sunlib-price-value{ font-size:2.2rem; font-weight:800; line-height:1; color:var(--green-light,#25d48a); }
.sunlib-price-value span{ font-size:1rem; font-weight:600; opacity:.9; }
.sunlib-price-note{ font-size:.72rem; opacity:.6; margin-top:6px; }

.sunlib-benefits{ display:grid; grid-template-columns:1fr 1fr; gap:18px 32px; margin-bottom:30px; }
.sunlib-benefit{ display:flex; gap:14px; align-items:flex-start; }
.sunlib-benefit i{
  flex-shrink:0; width:38px; height:38px; border-radius: var(--radius-ico);
  background:var(--mint-soft,#e7f7f0); color:var(--green,#1ab977);
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.sunlib-benefit strong{ display:block; color:var(--dark); font-size:.98rem; margin-bottom:3px; }
.sunlib-benefit span{ color:var(--muted,#5c6f7d); font-size:.86rem; line-height:1.5; }

.sunlib-cta{ text-align:center; border-top:1px solid var(--line,#e4eaee); padding-top:26px; }
.sunlib-legal{ font-size:.76rem; color:var(--muted,#5c6f7d); margin-top:14px; max-width:60ch; margin-left:auto; margin-right:auto; line-height:1.5; }

@media(max-width:720px){
  .sunlib-card{ padding:32px 24px; }
  .sunlib-benefits{ grid-template-columns:1fr; }
  .sunlib-title{ font-size:1.5rem; }
}

/* ═══════════════════════════════════════════
   FIX FAQ sur fond CLAIR (pages solutions)
   Le style FAQ de base est pour fond sombre (texte blanc).
   Ici on l'adapte quand la section a un fond clair.
═══════════════════════════════════════════ */
.section-pad:not(.dark-section):not(.water-dark-section) .faq-item{
  background:var(--white);
  border: 1px solid var(--line);
}
.section-pad:not(.dark-section):not(.water-dark-section) .faq-item.open{
  background:var(--white);
  border-color:rgba(26,185,119,.4);
  box-shadow:0 8px 24px -12px rgba(19,53,77,.25);
}
.section-pad:not(.dark-section):not(.water-dark-section) .faq-question{
  color:var(--dark);
}
.section-pad:not(.dark-section):not(.water-dark-section) .faq-answer p{
  color:var(--ink,#33475a);
}
.section-pad:not(.dark-section):not(.water-dark-section) .faq-answer p strong{
  color:var(--green-dark,#0d9660);
}

/* ═══════════════════════════════════════════
   PANIER — état vide + bouton retirer
═══════════════════════════════════════════ */
.cart-empty{ text-align:center; padding:40px 20px; }
.cart-empty-icon{
  width:70px; height:70px; border-radius:50%; margin:0 auto 18px;
  background:var(--gray-100,#f3f4f6); color:var(--gray-400,#9ca3af);
  display:flex; align-items:center; justify-content:center; font-size:1.8rem;
}
.cart-empty-title{ font-size:1.1rem; font-weight:700; color:var(--dark); margin-bottom:8px; }
.cart-empty-text{ font-size:.9rem; color:var(--muted,#5c6f7d); line-height:1.6; margin-bottom:22px; max-width:36ch; margin-left:auto; margin-right:auto; }

/* ── Panier vide : bascule SmartSun / SmartWater ──
   L'accueil porte les deux univers dans le même DOM : le message et le CTA du
   panier vide existent en double et c'est body.universe-water qui tranche. */
.cart-empty--water{ display:none; }
body.universe-water .cart-empty--sun{ display:none; }
body.universe-water p.cart-empty--water{ display:block; }
body.universe-water a.cart-empty--water{ display:inline-flex; }
/* Les pages produit SmartWater et le pied du drawer construisent leurs boutons
   en .btn-primary (vert) : on les repeint côté eau plutôt que de dupliquer le
   markup dans chaque template. */
body.universe-water .cart-drawer .btn-primary{
  background: linear-gradient(135deg, var(--w-accent2), var(--w-accent));
  box-shadow: 0 4px 20px rgba(0,180,216,.3);
}
body.universe-water .cart-drawer .btn-primary:hover{ box-shadow: 0 8px 32px rgba(0,180,216,.5); }

.cart-item-remove{
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  color:var(--muted,#9ca3af); font-size:.9rem; padding:4px;
  transition:color .15s;
}
.cart-item-remove:hover{ color:#ef4444; }

/* ═══════════════════════════════════════════
   WIDGET LEAD — étude gratuite (version sobre)
═══════════════════════════════════════════ */
.lead-widget{
  position:fixed; bottom:24px; right:24px; z-index:1200;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .4s ease, transform .4s ease, visibility .4s;
}
.lead-widget.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* Bouton pilule discret */
.lead-widget-btn{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--white); color:var(--dark);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding:11px 20px; cursor:pointer;
  font-family:var(--font); font-size:.9rem; font-weight:600;
  box-shadow:0 6px 24px -10px rgba(19,53,77,.3);
  transition:transform .2s, box-shadow .2s;
}
.lead-widget-btn i{ color:var(--accent-current,#1ab977); font-size:.95rem; }
.lead-widget-cta{
  display:flex; align-items:center; justify-content:center; width:100%;
  background:var(--accent-current); color:var(--white); border:none; border-radius:var(--radius-pill);
  padding:12px 20px; font-family:var(--font); font-size:.9rem; font-weight:700; cursor:pointer;
  box-shadow:0 4px 20px -8px rgba(19,53,77,.4); transition:transform .15s ease, box-shadow .15s ease;
}
.lead-widget-cta:hover{ transform:translateY(-2px); }
.lead-widget-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 28px -10px rgba(19,53,77,.4); }

/* Panneau */
.lead-widget-panel{
  position:absolute; bottom:56px; right:0; width:300px;
  background:var(--white); border-radius:var(--radius-md); padding:22px;
  box-shadow:0 24px 60px -20px rgba(19,53,77,.4); border: 1px solid var(--line);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:.22s ease;
}
.lead-widget.panel-open .lead-widget-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.lead-widget-close{
  position:absolute; top:12px; right:14px; background:none; border:none;
  font-size:1.4rem; line-height:1; color:var(--muted,#9ca3af); cursor:pointer;
}
.lead-widget-close:hover{ color:var(--dark); }
.lead-widget-title{ display:block; color:var(--dark); font-size:1.05rem; margin-bottom:8px; padding-right:20px; }
.lead-widget-text{ color:var(--ink,#33475a); font-size:.86rem; line-height:1.6; margin-bottom:16px; }

@media(max-width:600px){
  .lead-widget{ bottom:16px; right:16px; }
  .lead-widget-panel{ width:min(300px,calc(100vw - 32px)); }
  .lead-widget-btn span{ display:none; }
  .lead-widget-btn{ padding:13px; border-radius:50%; }
}
@media(prefers-reduced-motion:reduce){ .lead-widget{ transition:opacity .2s; } }

/* ═══════════════════════════════════════════
   MENU SOLUTIONS — 2 colonnes (Particulier / Pro)
═══════════════════════════════════════════ */
.nav-dropdown-menu--cols{
  display:flex; gap:6px; min-width:440px; padding:14px;
}
.nav-dd-col{ flex:1; display:flex; flex-direction:column; gap:2px; }
.nav-dd-col + .nav-dd-col{ border-left:1px solid var(--line,#e4eaee); padding-left:14px; }
.nav-dd-head{
  display:flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted,#5c6f7d); padding:6px 12px 10px;
}
.nav-dd-head i{ color:var(--green,#1ab977); font-size:.8rem; }
.nav-dropdown-menu--cols a{
  display:flex !important; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--radius-sm); font-size:.88rem; color:var(--ink,#1a2a37);
  white-space:nowrap; transition:background .15s, color .15s;
}
.nav-dropdown-menu--cols a::after{ display:none !important; }
.nav-dropdown-menu--cols a i{ color:var(--green,#1ab977); font-size:.85rem; width:16px; text-align:center; }
.nav-dropdown-menu--cols a:hover{ background:var(--mint-soft,#e7f7f0); color:var(--dark); }

@media(max-width:960px){
  .nav-dropdown-menu--cols{ flex-direction:column; min-width:0; gap:12px; }
  .nav-dd-col + .nav-dd-col{ border-left:none; padding-left:0; border-top:1px solid var(--line,#e4eaee); padding-top:12px; }
}

/* ═══════════════════════════════════════════
   FIX ALIGNEMENT NAVBAR — tout sur une ligne
   Uniformise liens simples et dropdowns (même hauteur/baseline)
═══════════════════════════════════════════ */
.sun-nav-group, .water-nav-group{ align-items:center; }
/* Tous les items directs du groupe nav : même comportement flex, centrés */
.sun-nav-group > a,
.sun-nav-group > .nav-dropdown,
.water-nav-group > a,
.water-nav-group > .nav-dropdown{
  display:inline-flex;
  align-items:center;
  height:40px;               /* hauteur commune -> alignement vertical parfait */
  padding-bottom:0;          /* retire le padding-bottom qui décalait les liens simples */
  line-height:1;
  white-space:nowrap;        /* sans quoi « À propos » se casse en deux lignes dès que la barre se resserre */
}
/* le soulignement animé des liens simples : le repositionner proprement sans padding-bottom */
.sun-nav-group > a::after,
.water-nav-group > a::after{ bottom:6px; }
/* le toggle du dropdown occupe toute la hauteur de l'item pour un survol cohérent */
.nav-dropdown{ height:40px; display:inline-flex; align-items:center; }
.nav-dropdown-toggle{ height:40px; }

/* ═══════════════════════════════════════════
   LIEN SIGENMATE mis en avant dans la navbar
═══════════════════════════════════════════ */
.nav-link-featured{
  display:inline-flex !important; align-items:center; gap:6px;
  color:var(--green-light,#25d48a) !important; font-weight:700 !important;
  padding:6px 14px !important; border:1px solid rgba(37,212,138,.4);
  border-radius: var(--radius-pill); height:auto !important;
  transition:background .2s, border-color .2s;
}
.nav-link-featured i{ font-size:.72rem; }
.nav-link-featured::after{ display:none !important; }
.nav-link-featured:hover{
  background:rgba(37,212,138,.12); border-color:var(--green-light,#25d48a);
  color:var(--white) !important;
}

/* ═══════════════════════════════════════════
   PAGE RÉALISATIONS — galerie
═══════════════════════════════════════════ */
/* Scopé à la grille : sans le parent, ces règles écrasaient aussi la carte
   flottante du hero d'accueil, qui porte les mêmes classes mais un thème sombre. */
.realisations-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
/* width:auto neutralise le width:340px de la carte hero, qui déborde la grille sous 380px. */
.realisations-grid .realisation-card{ width:auto; background:var(--white); border: 1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; transition:transform .18s, box-shadow .18s; }
.realisations-grid .realisation-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -20px rgba(19,53,77,.35); }
/* height:auto neutralise le height:100% de la règle destinée à l'<img> de la carte
   hero, qui porte la même classe : dans la grille (items étirés) elle donnait à
   l'image toute la hauteur de la carte et poussait le texte hors du overflow. */
.realisation-img{ aspect-ratio:4/3; height:auto; overflow:hidden; }
.realisation-img img{ width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.realisations-grid .realisation-card:hover .realisation-img img{ transform:scale(1.05); }
.realisation-body{ padding:20px 22px; }
/* Volontairement non scopé : la pilule sert aussi au tag du hero d'accueil,
   sur lequel le tag SmartWater (.wvc-tag) est calé. */
.realisation-tag{ display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--green,#1ab977); background:var(--mint-soft,#e7f7f0); padding:4px 12px; border-radius: var(--radius-pill); margin-bottom:10px; }
.realisation-body h3{ font-size:1.1rem; color:var(--dark); margin-bottom:8px; }
.realisation-body p{ font-size:.88rem; color:var(--muted,#5c6f7d); line-height:1.6; }
@media(max-width:900px){ .realisations-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .realisations-grid{ grid-template-columns:minmax(0,1fr); } }

/* ═══════════════════════════════════════════
   SMARTWATER — Nav enrichie + sensibilisation
═══════════════════════════════════════════ */

/* Variante "featured" du lien nav, teinte eau */
.nav-link-featured--water{
  color: var(--w-light,#48cae4) !important;
  border-color: rgba(72,202,228,.4);
}
.nav-link-featured--water:hover{
  background: rgba(72,202,228,.12);
  border-color: var(--w-light,#48cae4);
  color:var(--white) !important;
}

/* Menu déroulant eau : même structure que le solaire, teinte bleue */
.nav-dropdown-menu--water .nav-dd-head{ color: var(--w-accent,#00b4d8); }
.nav-dropdown-menu--water .nav-dd-head i,
.nav-dropdown-menu--water a i{ color: var(--w-accent,#00b4d8); }
.nav-dropdown-menu--water a:hover{ background: rgba(0,180,216,.12); color: var(--w-light,#48cae4); }

/* Navbar + en-tête de page dédiés à une page SmartWater autonome (ex: sensibilisation)

   La barre portait ici son propre fond, un cran sous celui des pages
   SmartSun : en passant de l'une à l'autre, l'élément censé rester fixe était
   précisément celui qui changeait de couleur. Elle garde donc le fond de
   `.navbar--solid` ; l'univers se lit au logo et à l'accent. */
/* Nav d'une page SmartWater autonome (pas de toggle sun/water, donc pas de .water-nav-group
   dont l'affichage est repris en main par app.js pour l'état initial de la page d'accueil) */
.water-static-nav{ display:flex; gap:28px; align-items:center; }
.water-static-nav > a{ display:inline-flex; align-items:center; height:40px; padding-bottom:0; line-height:1; }
.water-static-nav > a::after{ bottom:6px; }
/* Mêmes deux premiers arrêts que `.page-header` : le navy est celui du site.
   Seul le troisième diffère, et c'est celui-là qui dit l'univers — le bleu
   de l'eau là où la version solaire monte vers le navy clair. */
.page-header--water{
  background: linear-gradient(160deg, var(--dark-900) 0%, var(--dark) 60%, var(--w-accent2,#0077b6) 100%);
}
.page-header--water .breadcrumb span{ color: var(--w-accent,#00b4d8); }
.page-header--water .ph-eyebrow{
  color: var(--w-accent,#00b4d8); background: rgba(0,180,216,.12); border-color: rgba(0,180,216,.25);
}
.page-header--water .ph-glow-1{ background: var(--w-accent,#00b4d8); }
.page-header--water .ph-glow-2{ background: var(--w-accent2,#0077b6); }

/* Bandeau de sensibilisation à l'eau (universe water only) */
.water-awareness-strip{
  display:none;
  background: linear-gradient(90deg, var(--dark), var(--w-accent2) 55%, var(--w-accent));
  border-bottom:1px solid rgba(72,202,228,.35);
  position:sticky; top:0; z-index:900; /* reste visible pendant tout le scroll de la homepage eau ; sous la navbar (1000) et sous les overlays (1100+) */
  padding-top: var(--nav-h); /* le bandeau est le 1er élément du flux : son fond doit s'étendre derrière la navbar fixe (transparente tant qu'on n'a pas scrollé), sinon le texte blanc de la navbar devient illisible sur le fond blanc du body */
}
body.universe-water .water-awareness-strip{ display:block; }
.water-awareness-inner{
  display:flex; align-items:center; gap:16px;
  padding:9px 24px; min-height:44px;
}
.waw-pulse{
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-size:.8rem;
  animation: wawPulse 2.4s ease-in-out infinite;
}
@keyframes wawPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,.35); }
  50%{ box-shadow:0 0 0 8px rgba(255,255,255,0); }
}
.waw-rotator{ position:relative; flex:1; display:grid; overflow:hidden; }
.waw-item{
  grid-area:1/1; /* toutes les phrases empilées dans la même cellule : la plus haute fixe la hauteur du bandeau */
  color:#eaf7fb; font-size:.86rem; line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transform:translateY(100%);
  transition:opacity .5s ease, transform .5s ease;
}
.waw-item.active{ opacity:1; transform:translateY(0); }
.waw-item strong{ color:var(--white); font-weight:800; }
.waw-src{ color:rgba(234,247,251,.6); font-weight:500; font-size:.8rem; }
.waw-cta{
  flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
  background:var(--white); color:#0077b6 !important; font-weight:700; font-size:.82rem;
  padding:7px 16px; border-radius: var(--radius-pill); white-space:nowrap;
  transition:transform .2s, box-shadow .2s;
}
.waw-cta:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.22); }
.waw-cta i{ font-size:.72rem; }

@media(max-width:820px){
  .waw-rotator .waw-item{ white-space:normal; }
  .water-awareness-inner{ flex-wrap:wrap; gap:10px; padding:10px 16px; }
  .waw-cta{ margin-left:auto; }
}
@media(max-width:560px){
  .waw-src{ display:none; }
  /* le bandeau étant sticky, son CTA rognerait un quart de l'écran en forçant le texte sur 4 lignes ; le bouton flottant « Étude gratuite » le remplace */
  .waw-cta{ display:none; }
}

/* ═══════════════════════════════════════════════════════════
   PAGE CONTACT — /contact
═══════════════════════════════════════════════════════════ */
.ct-page.is-water {
  --accent-current: var(--w-accent);
  --accent-rgb: 0, 180, 216;
}
.ct-page.is-water .gradient-text {
  background: linear-gradient(135deg, var(--w-accent), var(--w-light));
  -webkit-background-clip: text;
  background-clip: text;
}

.ct-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  margin: 0 auto;
  background: var(--white);
  border:  1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.ct-uni {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--gray-600);
  font-family: var(--font);
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--trans);
  white-space: nowrap;
}
.ct-uni:hover { color: var(--dark); }
.ct-uni.is-actif[data-ct="sun"] {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: var(--white);
  box-shadow: 0 4px 14px rgba(26,185,119,.3);
}
.ct-uni.is-actif[data-ct="water"] {
  background: linear-gradient(135deg, var(--w-light), var(--w-accent));
  color: var(--white);
  box-shadow: 0 4px 14px rgba(0,180,216,.3);
}

.ct-switch-wrap { text-align: center; margin-bottom: 18px; }
.ct-lead {
  max-width: 640px;
  margin: 0 auto 52px;
  text-align: center;
  color: var(--gray-600);
  font-size: .97rem;
  line-height: 1.75;
}

.ct-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: start;
}

/* Colonne gauche — moyens de contact directs */
.ct-direct { display: flex; flex-direction: column; gap: 14px; }
.ct-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  background: var(--white);
  border:  1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--trans);
}
a.ct-card:hover {
  border-color: var(--accent-current);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.ct-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent-current);
  font-size: 1.05rem;
}
.ct-card-body { min-width: 0; }
.ct-card-label {
  display: block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 5px;
}
.ct-card-value {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.35;
  word-break: break-word;
}
.ct-card-note {
  display: block;
  margin-top: 4px;
  font-size: .84rem;
  color: var(--gray-600);
}

.ct-zones {
  padding: 22px 24px;
  background: var(--gray-50);
  border:  1px solid var(--line);
  border-radius: var(--radius-md);
}
.ct-zones h3 {
  font-size: .95rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 14px;
}
.ct-zones a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  color: var(--gray-600);
  font-size: .89rem;
  text-decoration: none;
  transition: color .2s ease;
}
.ct-zones a:hover { color: var(--accent-current); }
.ct-zones a strong { color: var(--dark); font-weight: 700; }
.ct-zones a i { color: var(--accent-current); font-size: .78rem; }

/* Colonne droite — formulaire */
.ct-form-card {
  padding: 34px;
  background: var(--white);
  border:  1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.ct-form-card h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 6px;
}
.ct-form-intro {
  font-size: .88rem;
  color: var(--gray-600);
  margin-bottom: 24px;
}
.ct-form-card .form-group { margin-bottom: 16px; }
.ct-form-card .form-group label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 7px;
}
.ct-form-card input,
.ct-form-card select,
.ct-form-card textarea {
  width: 100%;
  padding: 12px 14px;
  border:  1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: var(--font);
  font-size: .92rem;
  color: var(--dark);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ct-form-card input:focus,
.ct-form-card select:focus,
.ct-form-card textarea:focus {
  outline: none;
  border-color: var(--accent-current);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
}
.ct-form-card textarea { resize: vertical; }
.ct-consent {
  font-size: .78rem;
  color: var(--gray-400);
  line-height: 1.6;
  margin-top: 16px;
}
.ct-consent a { color: var(--gray-600); }

@media (max-width: 900px) {
  .ct-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ct-form-card { padding: 26px 20px; }
  .ct-lead { margin-bottom: 34px; }
}
@media (max-width: 460px) {
  .ct-uni { padding: 11px 16px; font-size: .85rem; }
}

/* ═══════════════════════════════════════════════════════════
   OPTIMISATION MOBILE & ERGONOMIE — passe globale
   Objectif : cibles tactiles ≥ 44px, confort de lecture,
   pas de débordement. Ajouté en fin de fichier pour primer.
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* — Cibles tactiles : minimum 44×44px (norme iOS/Android) — */
  .nav-burger {
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    align-items: center;
  }
  .nav-cart,
  .nav-home-icon,
  .nav-phone {
    width: 44px;
    height: 44px;
  }
  /* logo + jusqu'à 4 cibles de 44px : le gap de 40px du desktop déborde de l'écran */
  .nav-container { gap: 8px; padding: 0 12px; }
  .nav-phone { margin-left: auto; }
  .nav-logo img { min-height: 32px; }
  .nav-logo { padding: 6px 0; min-height: 44px; }

  .tel-link,
  .lead-widget-btn {
    min-height: 44px;
  }
  .lead-widget-btn { padding: 13px 20px; }
  .lead-widget-close {
    width: 44px;
    height: 44px;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Onglets solutions / eau : plus hauts et scrollables si besoin */
  .sol-tab-btn,
  .water-tab-btn {
    min-height: 44px;
    padding: 11px 18px;
  }

  /* — Confort de lecture : éviter les titres trop gros qui débordent — */
  .hero-title,
  .hero-water-title { font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.15; }
  .hero-subtitle { font-size: 1rem; }

  /* — Le bandeau eau : le CTA passe sous le texte proprement — */
  .water-awareness-inner { flex-wrap: wrap; }
  .waw-cta {
    min-height: 40px;
    padding: 9px 16px;
  }

  /* — Formulaires : champs assez hauts pour le doigt, pas de zoom iOS — */
  input, select, textarea,
  .w-form-group input,
  .w-form-group select,
  .w-form-group textarea {
    font-size: 16px; /* empêche le zoom auto de Safari iOS au focus */
    min-height: 46px;
  }
  textarea { min-height: 90px; }

  /* — Boutons pleine largeur plus confortables — */
  .btn { min-height: 46px; }

  /* — Espacements verticaux resserrés mais respirants — */
  section { padding-left: 0; padding-right: 0; }
  .container { --container-pad: 18px; }
}

/* — Menu mobile : liens bien espacés, plein écran lisible — */
@media (max-width: 768px) {
  .mobile-menu { padding: 8px 18px 24px; }
  .mobile-link {
    min-height: 48px;
    display: flex;
    align-items: center;
    font-size: 1.05rem;
  }
  /* Le menu s'adapte à l'univers actif (voir app.js) */
  body.universe-water .mobile-only-sun { display: none; }
  body:not(.universe-water) .mobile-only-water { display: none; }
}

/* Très petits écrans (≤ 380px) : derniers ajustements */
@media (max-width: 380px) {
  .container { --container-pad: 14px; }
  .hero-badge, .section-label, .w-section-label { font-size: .68rem; }
  .nav-logo img { max-height: 30px; }
}

/* Sous 420px, un libellé de bouton en nowrap impose sa largeur min-content
   à toute la grille parente et fait déborder la page : on autorise le retour
   à la ligne plutôt que de rogner le texte. */
@media (max-width: 420px) {
  .btn { white-space: normal; text-align: center; }
  .btn-lg { padding: var(--space-17) var(--space-20); }
  .checkout-steps { flex-wrap: wrap; row-gap: .4rem; }
}

/* Lien logo footer : cible tactile suffisante */
@media (max-width: 768px) {
  .footer-bottom-simple a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 8px;
  }
}

/* ═══════════════════════════════════════════════════════════
   SMARTWATER — passe qualité : lisibilité, contraste, alignement
   Objectif : même niveau de finition que SmartSun, dans les
   codes couleur de l'eau.
═══════════════════════════════════════════════════════════ */

/* — Contraste des libellés trop pâles (#5baec8 -> plus clair) — */
.w-process-label {
  color: #9fdcec;           /* était --w-muted #5baec8, trop faible */
  font-size: .8rem;
}
body.universe-water .w-tag {
  color: #bfeaf6;            /* tags plus lisibles sur navy */
}

/* — Stats du hero eau : plus lisibles, pas de scroll caché — */
.w-hero-stats .stat-label {
  color: rgba(255,255,255,.72);   /* était .45, trop faible */
  font-size: .78rem;
}

/* — Alignement vertical propre des blocs stat — */
.w-hero-stats .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

/* — Financement / bandeau "énergie gratuite" : texte plus net — */
.w-hero-financement span {
  color: rgba(255,255,255,.75);
  line-height: 1.5;
}

/* ── MOBILE SmartWater ── */
@media (max-width: 768px) {
  /* Stats hero : grille 2×2 lisible au lieu d'un scroll horizontal */
  .w-hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 20px 12px;
    overflow: visible !important;
    padding: 0;
  }
  .w-hero-stats .stat-divider { display: none; }
  .w-hero-stats .stat-number,
  .w-stat-number { font-size: 1.7rem; }
  .w-hero-stats .stat-label { font-size: .74rem; line-height: 1.35; }

  /* Titres eau qui s'adaptent */
  .hero-water-title { font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.15; }

  /* Process (schéma filtration) : passe en colonne, labels lisibles */
  .w-process-label { max-width: none; font-size: .82rem; }

  /* FAQ : la zone de réponse peut être haute sur petit écran */
  .w-faq-item.open .w-faq-a { max-height: 900px; }
  .w-faq-q { font-size: .95rem; padding: 18px 18px; }

  /* Onglets solutions : scroll horizontal fluide si trop larges */
  .water-tabs, .w-tabs {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .water-tabs::-webkit-scrollbar, .w-tabs::-webkit-scrollbar { display: none; }
  .water-tab-btn { white-space: nowrap; flex-shrink: 0; }
}

@media (max-width: 480px) {
  .w-hero-stats { grid-template-columns: 1fr 1fr; }
  .w-hero-stats .stat-number, .w-stat-number { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════
   TUNNEL DE COMMANDE (/commande, /commande/confirmation)
   Template réutilisable pour les futurs produits SmartWater
═══════════════════════════════════════════ */
.checkout-nav .nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.checkout-nav-secure {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--gray-200, #e5e7eb);
}
.checkout-nav-secure i { color: var(--accent-current); }

.checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.5rem 1rem 1rem;
  max-width: 640px;
  margin: 0 auto;
}
.checkout-step {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--gray-600);
  white-space: nowrap;
}
.checkout-step--done { color: var(--accent-current); }
.checkout-step--done i {
  background: var(--accent-current);
  color: var(--white);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
}
.checkout-step--active { color: var(--gray-800); }
.checkout-step-sep {
  width: 28px;
  height: 1px;
  background: var(--gray-200);
  flex-shrink: 0;
}

.checkout-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 24px 5rem;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
  align-items: start;
}
#checkout-content {
  display: contents;
}
.checkout-empty {
  grid-column: 1 / -1;
  text-align: center;
  max-width: 420px;
  margin: 3rem auto;
  padding: 3rem 2rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.checkout-block {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem;
}
.checkout-block-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gray-800);
  margin: 0 0 1.25rem;
}
.checkout-block-title i { color: var(--accent-current); font-size: .95rem; }
.checkout-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}
.checkout-note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .82rem;
  color: var(--gray-600);
  line-height: 1.5;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
  margin: 0 0 1.25rem;
}
.checkout-note i { color: var(--accent-current); margin-top: .15rem; flex-shrink: 0; }
.checkout-payment-icons {
  display: flex;
  gap: .9rem;
  font-size: 1.7rem;
  color: var(--gray-600);
  margin-bottom: 1.5rem;
}
.checkout-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.1rem 1.5rem;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent-current);
  color: var(--white);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform .15s ease, box-shadow .15s ease;
}
.checkout-submit:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.checkout-summary-col { position: sticky; top: 100px; }
.checkout-summary-card {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem;
}
.checkout-summary-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gray-800);
  margin: 0 0 1.25rem;
}
#checkout-items-list .cart-item { padding-bottom: 1rem; margin-bottom: 1rem; }
#checkout-items-list .cart-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.checkout-confirmation {
  max-width: 560px;
  margin: 0 auto;
  padding: 4rem 24px 2.5rem;
  text-align: center;
}
.checkout-confirmation h1 { font-size: 1.9rem; font-weight: 800; color: var(--gray-800); margin: 1rem 0 .6rem; }
.checkout-confirmation-sub { font-size: .95rem; color: var(--gray-600); line-height: 1.6; margin: 0 0 1.5rem; }

/* ── Visio d'accompagnement : réservation après commande ──
   Cette section vit hors de .checkout-confirmation, dont la largeur est
   bornée à 560 px : l'agenda Calendly y serait à l'étroit, il lui faut
   900 px pour afficher un mois et ses créneaux côte à côte.
   Elle est masquée par l'attribut `hidden` tant que le script n'a pas
   reconnu un SigenMate dans la commande. */
.conf-rdv { padding: 0 24px; }
.conf-rdv[hidden] { display: none; }
.conf-outro { text-align: center; padding: 2.5rem 24px 6rem; }
.conf-rdv-box {
  max-width: 900px;
  margin: 0 auto;
  background: var(--white);
  border:  1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.conf-rdv-invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1.75rem;
}
.conf-rdv-badge {
  display: inline-block;
  margin-bottom: 1.1rem;
  padding: .32rem .85rem;
  border-radius: var(--radius-pill);
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--green-dark);
  background: var(--mint-soft);
}
.conf-rdv-ico {
  width: 62px; height: 62px;
  margin-bottom: 1.1rem;
  border-radius: var(--radius-ico);
  display: grid; place-items: center;
  font-size: 1.5rem;
  color: var(--green-dark);
  background: var(--mint-soft);
  border: 1px solid rgba(26,185,119,.18);
}
.conf-rdv-invite h2 {
  font-size: 1.35rem; font-weight: 800;
  color: var(--gray-800); letter-spacing: -.01em;
}
.conf-rdv-invite > p {
  font-size: .92rem; color: var(--gray-600); line-height: 1.65;
  margin: .5rem 0 1.6rem; max-width: 460px;
}

/* Avertissement tiers : lisible sans arrêter le regard, puisque c'est le
   bouton qu'on vient chercher ici. Aucun repli derrière un « en savoir
   plus » — le visiteur doit savoir ce qu'il déclenche avant de cliquer.
   Conteneur en flex : le texte doit être enveloppé dans un <span>, sinon
   chaque nœud de texte forme une colonne à lui seul. */
.conf-rdv-note {
  display: flex; align-items: flex-start; gap: .5rem;
  max-width: 560px; margin: 1.4rem auto 0;
  font-size: .78rem; color: var(--gray-400); line-height: 1.6;
  text-align: left;
}
.conf-rdv-note i { color: var(--green); margin-top: .2rem; flex-shrink: 0; }
.conf-rdv-note strong { color: var(--gray-600); font-weight: 700; }
.conf-rdv-note a { color: var(--green-dark); font-weight: 700; text-decoration: underline; }
.agenda-note--err { color: var(--gray-600); }
.agenda-note--err i { color: #dc2626; }

/* Hauteur imposée à l'agenda : Calendly rend dans une iframe qui ne sait pas
   se dimensionner toute seule. Trop court, le visiteur défile à l'intérieur
   d'un cadre au milieu d'une page qui défile déjà. */
.conf-rdv-widget { min-width: 0; height: 700px; }

@media (max-width: 768px) {
  .conf-rdv-invite { padding: 2.25rem 1.25rem; }
  .conf-rdv-widget { height: 1000px; }
}

@media (max-width: 860px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-summary-col { position: static; order: -1; }
  .checkout-nav-secure { display: none; }
  .checkout-grid-2 { grid-template-columns: 1fr; }
  .checkout-steps { gap: .35rem; padding: 1.1rem .75rem .75rem; }
  .checkout-step { font-size: .72rem; }
  .checkout-step-sep { width: 16px; }
}

/* ═══════════════════════════════════════════
   PAGES LÉGALES (/mentions-legales, /cgv)
   Template réutilisable pour SmartWater
═══════════════════════════════════════════ */
.legal-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 24px 6rem;
}
.legal-updated {
  font-size: .85rem;
  color: var(--gray-600);
  margin: 0 0 2.5rem;
}
.legal-content h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gray-800);
  margin: 2.5rem 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--gray-200);
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-800);
  margin: 1.5rem 0 .75rem;
}
.legal-content p, .legal-content li {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--gray-600);
}
.legal-content p { margin: 0 0 1rem; }
.legal-content ul, .legal-content ol {
  margin: 0 0 1.25rem;
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.legal-content a { color: var(--accent-current); font-weight: 600; }
.legal-content strong { color: var(--gray-800); }
.legal-toc {
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  margin: 0 0 2rem;
}
.legal-toc p { font-weight: 700; color: var(--gray-800); margin: 0 0 .75rem; font-size: .9rem; }
.legal-toc ol { margin: 0; padding-left: 1.2rem; gap: .35rem; }
.legal-toc a { font-size: .88rem; font-weight: 500; color: var(--gray-600); }
.legal-toc a:hover { color: var(--accent-current); }
.legal-placeholder {
  display: inline;
  background: #fef3c7;
  color: #92400e;
  padding: .1rem .4rem;
  border-radius: 5px;
  font-size: .88em;
  font-weight: 600;
}
.legal-withdraw-form {
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  margin: 1rem 0 1.5rem;
}
.legal-withdraw-form p { margin: 0 0 .5rem; }

/* ════════════════════════════════════════════
   CATALOGUE PRODUITS SMARTWATER (générateurs & dessalinisateurs)
════════════════════════════════════════════ */
.wp-catalog-hero {
  background: linear-gradient(160deg, var(--dark) 0%, var(--dark-900) 100%);
  padding: 90px 0 60px;
  text-align: center;
  color: var(--white);
}
.wp-catalog-hero .section-label { justify-content: center; }
.wp-catalog-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 14px 0 12px; letter-spacing: -.02em; }
.wp-catalog-hero p { max-width: 640px; margin: 0 auto; color: rgba(255,255,255,.75); font-size: 1rem; line-height: 1.7; }

.wp-catalog-section { padding: 60px 0 90px; background: var(--bg, #f6f9fb); }
.wp-catalog-groupline {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  margin: 0 0 30px; padding-top: 40px;
}
.wp-catalog-groupline:first-child { padding-top: 0; }
.wp-catalog-groupline h2 { font-size: 1.3rem; color: var(--gray-800); white-space: nowrap; }
@media (max-width: 600px) {
  .wp-catalog-groupline h2 { white-space: normal; font-size: 1.15rem; }
}
.wp-catalog-groupline span { color: var(--gray-400); font-size: .88rem; }
.wp-catalog-groupline::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }

.wp-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 26px;
  margin-bottom: 10px;
}

.wp-card {
  background: var(--white);
  border:  1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--trans);
}
.wp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(0,180,216,.35); }
.wp-card-img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--dark); }
/* L'offre se pose sur la photo, en bas à gauche : elle ne recouvre ni le titre
   ni le prix, les deux informations qu'on vient réellement comparer. Le vert
   tranche volontairement sur le cyan de la gamme — c'est la seule chose de la
   carte qui ne décrive pas l'appareil. */
.wp-card-media { position: relative; }
.wp-card-offer {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(26,185,119,.95); color: var(--white);
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.wp-card-offer i { font-size: .7rem; }
.wp-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.wp-card-tag {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--w-accent); margin-bottom: 8px;
}
.wp-card-body h3 { font-size: 1.08rem; color: var(--gray-800); margin-bottom: 8px; letter-spacing: -.01em; }
.wp-card-spec { font-size: .84rem; color: var(--gray-600); line-height: 1.6; margin-bottom: 16px; flex: 1; }
.wp-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.wp-card-price { font-weight: 800; font-size: 1.15rem; color: var(--gray-800); }
.wp-card-price small { font-weight: 500; font-size: .7rem; color: var(--gray-400); display: block; }
.wp-card-consult { font-weight: 700; font-size: .88rem; color: var(--w-accent2); }

/* Renvoi vers les consommables, en pied de catalogue */
.wp-catalog-consumables {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 44px;
  padding: 22px 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: var(--trans);
}
.wp-catalog-consumables:hover {
  border-color: rgba(0,180,216,.35);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.wp-cc-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(0,180,216,.1);
  color: var(--w-accent);
  font-size: 1.1rem;
}
.wp-cc-text { display: flex; flex-direction: column; gap: 3px; }
.wp-cc-text strong { color: var(--gray-800); font-size: 1rem; }
.wp-cc-text span { color: var(--gray-600); font-size: .86rem; line-height: 1.55; }
.wp-cc-arrow { margin-left: auto; color: var(--w-accent); flex-shrink: 0; }
@media (max-width: 600px) {
  .wp-catalog-consumables { flex-wrap: wrap; }
  .wp-cc-arrow { display: none; }
}

/* ════════════════════════════════════════════
   CONSOMMABLES SMARTWATER (/consommables)

   Une carte de consommable ne porte pas de photo, et ce n'est pas un
   manque à combler : une cartouche de charbon actif ressemble à toutes
   les cartouches de charbon actif, la photo n'aide personne à choisir.
   Ce qui aide, c'est de savoir sur quelle machine elle se monte et à
   quel rang de la ligne — c'est donc ce que porte la vignette.
════════════════════════════════════════════ */
.wc-picker {
  position: sticky;
  top: 76px;
  z-index: 20;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.wc-picker-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.wc-picker label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--gray-600);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.wc-picker label i { color: var(--w-accent); }
.wc-picker select {
  flex: 1;
  max-width: 380px;
  padding: 10px 14px;
  font: inherit;
  font-size: .9rem;
  color: var(--gray-800);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--trans);
}
.wc-picker select:hover,
.wc-picker select:focus { border-color: var(--w-accent); outline: none; }
/* Un liseré quand un appareil est choisi : sans lui, on ne voit pas
   pourquoi la page vient de raccourcir. */
.wc-picker--active { border-bottom-color: rgba(0,180,216,.45); }

.wc-section { padding-top: 48px; }

.wc-line { padding-top: 34px; }
.wc-line:first-child { padding-top: 0; }
.wc-line-head { margin-bottom: 20px; }
.wc-line-eyebrow {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--w-accent);
}
.wc-line-head h2 { font-size: 1.35rem; color: var(--gray-800); margin: 6px 0 0; letter-spacing: -.01em; }
.wc-line-flow {
  margin: 8px 0 0;
  font-size: .85rem;
  color: var(--gray-400);
  display: flex; align-items: center; gap: 8px;
}
.wc-line-cta { margin-top: 4px; }

.wc-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 22px;
  padding: 14px 18px;
  background: rgba(0,180,216,.06);
  border: 1px solid rgba(0,180,216,.18);
  border-radius: var(--radius-md);
  font-size: .87rem;
  line-height: 1.65;
  color: var(--gray-600);
}
.wc-note i { color: var(--w-accent); margin-top: 3px; flex-shrink: 0; }

.wc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.wc-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  transition: var(--trans);
}
.wc-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(0,180,216,.35); }
.wc-item-visual {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(150deg, #0077b6 0%, #00b4d8 100%);
  color: var(--white);
  font-size: 1.25rem;
  margin-bottom: 16px;
}
.wc-item-body { flex: 1; }
.wc-item-body h3 { font-size: .98rem; color: var(--gray-800); margin: 0 0 8px; line-height: 1.35; }
.wc-item-role { font-size: .84rem; color: var(--gray-600); line-height: 1.6; margin: 0; }
.wc-item-qty {
  margin: 12px 0 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-600);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px;
  background: var(--gray-100);
  border-radius: var(--radius-pill);
}
.wc-item-qty i { color: var(--w-accent); font-size: .7rem; }
.wc-item-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.wc-price { font-weight: 800; font-size: 1.05rem; color: var(--gray-800); }
.wc-price small { font-weight: 500; font-size: .68rem; color: var(--gray-400); display: block; }
/* Le prix barré du kit n'est pas un prix de référence sorti d'un chapeau :
   c'est le total des cartes voisines, que le visiteur peut refaire de tête.
   Il reste donc discret — il informe, il ne crie pas la bonne affaire. */
.wc-price s { font-weight: 600; font-size: .8rem; color: var(--gray-400); margin-right: 5px; }
.wc-consult { font-weight: 700; font-size: .82rem; color: var(--w-accent2); display: inline-flex; align-items: center; gap: 6px; }
.wc-item-btn { padding: 8px 16px; font-size: .82rem; white-space: nowrap; }
/* L'économie du kit se lit en vert : c'est la seule couleur de la page qui
   ne soit pas de la famille eau, et c'est voulu — elle marque le seul
   argument qui n'est pas technique. */
.wc-item-save { background: rgba(26,185,119,.1); color: #0f7a4d; }
.wc-item-save i { color: #16a06a; }

/* Le kit reprend le fond de la section : il appartient à la ligne sans
   se faire passer pour un organe de plus. */
.wc-item--kit {
  background: linear-gradient(160deg, rgba(0,180,216,.07) 0%, rgba(0,119,182,.04) 100%);
  border-style: dashed;
  border-color: rgba(0,180,216,.35);
}

.wc-help {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 34px;
  align-items: center;
  margin-top: 56px;
  padding: 32px 34px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.wc-help-main h2 { font-size: 1.3rem; color: var(--gray-800); margin: 0 0 12px; }
.wc-help-main p { font-size: .9rem; color: var(--gray-600); line-height: 1.7; margin: 0 0 10px; }
.wc-help-main p:last-child { margin-bottom: 0; }
.wc-help-main .wc-help-fine { font-size: .82rem; color: var(--gray-500); font-style: italic; }
.wc-help-cta { display: flex; flex-direction: column; gap: 12px; }
.wc-help-phone {
  text-align: center;
  font-size: .88rem;
  font-weight: 600;
  color: var(--gray-600);
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.wc-help-phone i { color: var(--w-accent); }
.wc-help-phone:hover { color: var(--w-accent); }

@media (max-width: 860px) {
  .wc-help { grid-template-columns: 1fr; gap: 24px; padding: 26px 22px; }
}
@media (max-width: 600px) {
  .wc-picker-inner { flex-wrap: wrap; gap: 10px; }
  .wc-picker select { max-width: none; width: 100%; }
}

/* Bandeau "Sur devis / Nous consulter" en fiche produit */
.wp-consult-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,180,216,.1); color: var(--w-accent2);
  border: 1px solid rgba(0,180,216,.3); border-radius: var(--radius-pill);
  padding: 7px 16px; font-size: .82rem; font-weight: 700; margin-bottom: 14px;
}

/* ============ BLOG ============ */
.blog-pledge {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 760px; margin: 22px auto 0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-md); padding: 14px 18px;
  font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.82); text-align: left;
}
.blog-pledge i { color: var(--accent-current); margin-top: 3px; flex-shrink: 0; }

/* La classe .section n'existe pas dans cette feuille : sans padding bas explicite,
   le dernier bloc (crosslink, sources) se colle au footer. */
.blog-section { padding-top: 60px; padding-bottom: clamp(64px, 8vh, 96px); }
.blog-featured-wrap { margin-bottom: 34px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px; }

.blog-card {
  display: flex; flex-direction: column; background: #fff;
  border:  1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: var(--trans); box-shadow: 0 2px 14px rgba(23,59,89,.05);
}
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(23,59,89,.13); border-color: var(--accent-current); }
.blog-card-media {
  height: 128px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(23,59,89,.94), rgba(23,59,89,.72));
  position: relative;
}
/* La vignette d'article portait un navy pour l'eau et un autre pour le solaire.
   Le navy étant commun, la surcharge n'a plus d'objet : ce qui distingue les
   deux univers sur cette carte, c'est l'icône et l'accent. */
.blog-card-media::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 78% 22%, rgba(255,255,255,.14), transparent 62%);
}
.blog-card-media i { font-size: 2.5rem; color: var(--accent-current); position: relative; z-index: 1; }
.blog-card-media--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Le halo radial est calibré pour un fond uni : sur une photo il délave le coin
   supérieur droit. On le garde en voile discret pour l'unité avec les cartes à icône. */
.blog-card-media--photo::after { background: radial-gradient(circle at 78% 22%, rgba(255,255,255,.07), transparent 62%); }
.blog-card-body { padding: 22px 24px 20px; display: flex; flex-direction: column; flex: 1; }
.blog-card-cat {
  align-self: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-current);
  background: color-mix(in srgb, var(--accent-current) 12%, transparent);
  border-radius: var(--radius-pill); padding: 5px 12px; margin-bottom: 12px;
}
.blog-card-title { font-size: 1.14rem; line-height: 1.35; font-weight: 800; color: var(--dark); margin: 0 0 10px; }
.blog-card-excerpt { font-size: .92rem; line-height: 1.6; color: #5b6b7c; margin: 0 0 18px; flex: 1; }
.blog-card-meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: .8rem; color: #8a99a8; border-top: 1px solid #eef2f6; padding-top: 14px;
}
.blog-card-meta i { margin-right: 5px; }
.blog-card-more { margin-left: auto; color: var(--accent-current); font-weight: 700; }
.blog-card-more i { margin: 0 0 0 5px; transition: var(--trans); }
.blog-card:hover .blog-card-more i { transform: translateX(4px); }

.blog-card--featured { flex-direction: row; align-items: stretch; }
.blog-card--featured .blog-card-media { height: auto; width: 240px; flex-shrink: 0; }
.blog-card--featured .blog-card-media i { font-size: 3.4rem; }
.blog-card--featured .blog-card-body { padding: 32px 36px; }
.blog-card--featured .blog-card-title { font-size: 1.62rem; }
.blog-card--featured .blog-card-excerpt { font-size: 1rem; }

.blog-crosslink {
  display: flex; align-items: center; gap: 22px; margin-top: 46px;
  background: var(--gray-50); border:  1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 30px;
}
.blog-crosslink > i { font-size: 1.5rem; color: var(--accent-current); flex-shrink: 0; }
.blog-crosslink strong { display: block; font-size: 1.08rem; color: var(--dark); margin-bottom: 5px; }
.blog-crosslink p { margin: 0; font-size: .9rem; line-height: 1.55; color: #5b6b7c; }
.blog-crosslink .btn { flex-shrink: 0; }
.blog-crosslink-btn { color: var(--accent-current); border-color: var(--accent-current); }
.blog-crosslink-btn:hover { background: var(--accent-current); color: #fff; }

/* ---- Article ---- */
.page-header--article .ph-title { max-width: 900px; }
.article-meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px;
  font-size: .86rem; color: rgba(255,255,255,.72);
}
.article-meta i { margin-right: 6px; color: var(--accent-current); }

.article-section { padding-top: 58px; padding-bottom: clamp(64px, 8vh, 96px); }
.article-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 54px; align-items: start; }

.article-toc {
  position: sticky; top: calc(var(--nav-h) + 24px);
  background: var(--gray-50); border:  1px solid var(--line);
  border-radius: var(--radius-md); padding: 22px 20px;
}
.article-toc-head {
  display: block; font-size: .74rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-current); margin-bottom: 14px;
}
.article-toc ol { margin: 0; padding-left: 18px; }
.article-toc li { margin-bottom: 10px; font-size: .88rem; line-height: 1.4; }
.article-toc a { color: #4a5b6c; text-decoration: none; transition: var(--trans); }
.article-toc a:hover { color: var(--accent-current); }

.article-body { max-width: 760px; font-size: 1.03rem; line-height: 1.78; color: #37474f; }
.article-hero-img {
  width: 100%; max-height: 420px; object-fit: cover; display: block;
  border-radius: var(--radius-lg); margin: 0 0 32px;
}
.article-body h2 {
  font-size: 1.6rem; font-weight: 800; color: var(--dark);
  margin: 54px 0 18px; padding-top: 10px; scroll-margin-top: calc(var(--nav-h) + 20px);
}
.article-body h2::before {
  content: ''; display: block; width: 46px; height: 3px;
  background: var(--accent-current); border-radius: 2px; margin-bottom: 16px;
}
.article-body h3 { font-size: 1.2rem; font-weight: 700; color: var(--dark); margin: 32px 0 12px; }
.article-body p { margin: 0 0 18px; }
.article-body .article-lead {
  font-size: 1.16rem; line-height: 1.7; color: var(--dark); font-weight: 500;
  border-left: 3px solid var(--accent-current); padding-left: 22px; margin-bottom: 30px;
}
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 24px; }
.article-body li { margin-bottom: 10px; }
.article-body strong { color: var(--dark); font-weight: 700; }
.article-body a:not(.btn) { color: var(--accent-current); }
.article-body sup { font-size: .7em; }

.article-quote {
  margin: 0 0 16px; padding: 18px 24px;
  background: color-mix(in srgb, var(--accent-current) 7%, transparent);
  border-left: 3px solid var(--accent-current);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic; font-size: 1.02rem; line-height: 1.65; color: var(--dark);
}

.article-callout {
  display: flex; gap: 16px; align-items: flex-start; margin: 28px 0;
  background: var(--gray-50); border: 1px solid #e4eaf0;
  border-left: 3px solid var(--accent-current);
  border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 20px 24px;
  font-size: .96rem; line-height: 1.65;
}
.article-callout > i { font-size: 1.15rem; color: var(--accent-current); margin-top: 3px; flex-shrink: 0; }
.article-callout--warn { background: #fff8ec; border-color: #f3dfba; border-left-color: #e8a33d; }
.article-callout--warn > i { color: #d98216; }

.article-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin: 30px 0;
}
.a-stat {
  background: var(--dark); border-radius: var(--radius-md);
  padding: 20px 18px; text-align: center;
}
.a-stat-val { display: block; font-size: 1.55rem; font-weight: 900; color: var(--accent-current); line-height: 1.15; }
.a-stat-lab { display: block; margin-top: 8px; font-size: .78rem; line-height: 1.4; color: rgba(255,255,255,.72); }

.article-takeaways {
  margin: 54px 0 0; background: var(--gray-50);
  border:  1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 32px;
}
.article-takeaways h2 { margin-top: 0 !important; font-size: 1.3rem !important; }
.article-takeaways ul { list-style: none; padding: 0; margin: 0; }
.article-takeaways li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; font-size: .96rem; line-height: 1.6; }
.article-takeaways li i { color: var(--accent-current); margin-top: 5px; flex-shrink: 0; }

.article-cta {
  margin: 40px 0; border-radius: var(--radius-lg); padding: 34px 36px;
  background: linear-gradient(135deg, var(--dark), var(--dark-800)); color: #fff;
}
.article-cta h3 { margin: 0 0 10px; font-size: 1.34rem; font-weight: 800; color: #fff; }
.article-cta p { margin: 0 0 22px; font-size: .98rem; line-height: 1.65; color: rgba(255,255,255,.82); }
.article-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.article-cta-btns .btn-outline { color: #fff; border-color: rgba(255,255,255,.4); }
.article-cta-btns .btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.article-sources { margin-top: 50px; padding-top: 30px; border-top: 1px solid #e8edf2; }
.article-sources h2 { margin-top: 0 !important; font-size: 1.3rem !important; }
.article-sources ol { padding-left: 22px; }
.article-sources li { margin-bottom: 12px; font-size: .92rem; line-height: 1.55; }
.article-body .article-sources a { color: #4a5b6c; text-decoration: none; border-bottom: 1px solid #d6dee6; transition: var(--trans); }
.article-body .article-sources a:hover { color: var(--accent-current); border-color: var(--accent-current); }
.article-sources a i { font-size: .68em; margin-left: 5px; opacity: .6; }
.article-disclaimer { margin-top: 20px; font-size: .84rem; line-height: 1.6; color: #8a99a8; font-style: italic; }

.article-related { margin-top: 54px; }
.article-related h2 { font-size: 1.3rem !important; }
.blog-grid--related { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.blog-grid--related .blog-card-media { height: 96px; }
.blog-grid--related .blog-card-media i { font-size: 2rem; }
.blog-grid--related .blog-card-body { padding: 18px 20px 16px; }
.blog-grid--related .blog-card-title { font-size: 1rem; }
.blog-grid--related .blog-card-excerpt { font-size: .86rem; }

@media (max-width: 1024px) {
  .article-wrap { grid-template-columns: 1fr; gap: 30px; }
  .article-toc { position: static; }
  .article-toc ol { columns: 2; column-gap: 26px; }
}
@media (max-width: 768px) {
  .blog-card--featured { flex-direction: column; }
  .blog-card--featured .blog-card-media { width: 100%; height: 128px; }
  .blog-card--featured .blog-card-body { padding: 22px 24px 20px; }
  .blog-card--featured .blog-card-title { font-size: 1.3rem; }
  .blog-crosslink { flex-direction: column; align-items: flex-start; gap: 16px; }
  .article-toc ol { columns: 1; }
  .article-body { font-size: 1rem; }
  .article-body h2 { font-size: 1.35rem; margin-top: 42px; }
  .article-body .article-lead { font-size: 1.06rem; padding-left: 16px; }
  .article-cta, .article-takeaways { padding: 24px 22px; }
  .blog-grid { grid-template-columns: 1fr; }
}

/* — Menu mobile des sous-pages (markup généré par src/nav.ts) — */
@media (max-width: 768px) {
  /* le burger s'ajoute au logo + maison + contact + panier : sans resserrer les
     gaps, la barre déborde et provoque un scroll horizontal sous 400px */
  .nav-container { gap: 10px; padding: 0 14px; }
  /* le libellé du lien de retour ne tient plus : flèche seule, la destination
     reste accessible depuis le menu */
  .nav-back { font-size: 0; justify-content: center; }
  .nav-back i { font-size: 1rem; }

  .mobile-menu {
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .navbar--water .mobile-menu { background: rgba(10, 51, 82, .98); }

  .mobile-menu-head {
    padding: 16px 16px 4px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
  }
  .mobile-menu-head i { margin-right: 7px; }

  .mobile-link--featured { color: var(--white); font-weight: 700; }
  .mobile-link--featured i { color: var(--green); margin-right: 8px; }
  .mobile-link--featured-water i { color: var(--w-accent); }

  .mobile-menu-sep {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .mobile-link--water i { color: var(--w-accent); margin-right: 8px; }
  .mobile-link--sun i { color: var(--green); margin-right: 8px; }

  .btn-mobile { justify-content: center; }
  .btn-mobile--water { background: linear-gradient(135deg, var(--w-accent), var(--w-accent2)); }
}

/* Sur les petits écrans, les pages avec lien de retour (article, fiche produit)
   alignent 6 éléments dans la barre : logo resserré pour éviter le débordement */
@media (max-width: 430px) {
  .nav-container { gap: 8px; }
  /* min-height: 32px est imposé plus haut pour la cible tactile ; la cible reste
     assurée par le padding vertical de .nav-logo */
  .nav-logo img { min-height: 0; }
  .nav-logo-img { height: 26px; }
}

/* ════════════════════════════════════════════════════════════════════
   LIQUID GLASS
   ════════════════════════════════════════════════════════════════════
   Le site empilait déjà des « verres dépolis » : un fond blanc à 90 %
   d'opacité et un blur. C'est un calque translucide, pas du verre — il
   manque ce qui fait qu'on reconnaît une tranche de verre à l'œil :

     1. la saturation. Une vraie épaisseur de verre ne se contente pas de
        flouter ce qu'il y a derrière, elle en ravive les couleurs.
     2. le reflet spéculaire. La lumière n'attrape pas les quatre arêtes de
        la même façon : elle allume celle qui lui fait face et laisse
        l'opposée dans l'ombre. C'est ce liseré dissymétrique, et lui seul,
        qui donne l'épaisseur.
     3. l'ombre portée en deux temps — une ombre de contact courte et
        serrée, une ombre d'ambiance longue et diffuse.

   `.lg` réunit les trois. Le liseré passe par un ::before masqué plutôt
   que par `border-image`, qui ne suit pas `border-radius`.

   Deux variantes selon ce qu'il y a derrière : `.lg` teinte au blanc pour
   les fonds sombres, `.lg--dark` teinte au navy pour les fonds clairs, où
   un verre blanc sur blanc ne se verrait tout simplement pas. */
/* Les six jetons ci-dessous sont le seul endroit où se règle l'intensité du
   verre.

   Le remplissage redescend (.20/.085 → .14/.055) pour laisser mieux voir au
   travers. Le liseré, lui, ne bouge pas : c'est le reflet qui fait lire une
   tranche de verre, et l'affaiblir en même temps que le remplissage ne
   rendrait pas la surface plus transparente — elle disparaîtrait, ce qui
   n'est pas la même chose. Plus le fond s'efface, plus l'arête doit tenir
   seule le contour.

   Sur les 72 surfaces `.lg` du site, le remplissage est blanc sur fond
   sombre : le baisser assombrit la carte et augmente donc le contraste du
   texte blanc posé dessus. Cette baisse-là ne coûte rien à la lisibilité. */
:root {
  --lg-blur: 30px;
  --lg-sat: 200%;
  --lg-tint: 255, 255, 255;
  --lg-fill-a: .14;
  --lg-fill-b: .055;
  --lg-rim: .78;
}

.lg {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(158deg,
      rgba(var(--lg-tint), var(--lg-fill-a)),
      rgba(var(--lg-tint), var(--lg-fill-b)));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border: 1px solid rgba(var(--lg-tint), .17);
  border-radius: var(--radius-lg, 18px);
  box-shadow:
    inset 0 1px 0 rgba(var(--lg-tint), .34),
    0 1px 2px rgba(10, 28, 43, .22),
    0 22px 48px -22px rgba(10, 28, 43, .58);
}

/* Le liseré. Un dégradé qui n'allume que le coin haut-gauche et, plus
   faiblement, le bas-droit : entre les deux il tombe à zéro, sinon on
   obtient un contour uniforme — un cadre, pas un reflet. Le masque évide
   l'intérieur pour ne garder que l'épaisseur du padding. */
.lg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(142deg,
    rgba(var(--lg-tint), var(--lg-rim)) 0%,
    rgba(var(--lg-tint), 0) 34%,
    rgba(var(--lg-tint), 0) 64%,
    rgba(var(--lg-tint), calc(var(--lg-rim) * .42)) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Sur fond clair, le verre se teinte au navy. Il monte du même cran, mais pas
   dans les mêmes proportions : ici le remplissage assombrit la surface, donc
   il pèse directement sur le contraste du texte. .10 de fond navy sur blanc
   donne rgb(232,236,240) — le texte y perd 4 % de contraste, ce qui reste
   très au-dessus du seuil. Le liseré, lui, peut doubler sans rien coûter. */
.lg--dark {
  --lg-tint: 23, 59, 89;
  --lg-fill-a: .07;
  --lg-fill-b: .022;
  --lg-rim: .20;
  border-color: rgba(23, 59, 89, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .90),
    0 1px 2px rgba(23, 59, 89, .08),
    0 20px 44px -24px rgba(23, 59, 89, .32);
}

/* Le verre s'anime en montant vers la lumière : le reflet se renforce et
   l'ombre s'allonge. Le blur ne bouge pas — l'animer force un recalcul du
   backdrop à chaque image et fait tomber le défilement sous 60 ips. */
.lg--hover { transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s, background .28s; }
.lg--hover:hover {
  transform: translateY(-4px);
  background:
    linear-gradient(158deg,
      rgba(var(--lg-tint), calc(var(--lg-fill-a) + .05)),
      rgba(var(--lg-tint), calc(var(--lg-fill-b) + .03)));
  box-shadow:
    inset 0 1px 0 rgba(var(--lg-tint), .46),
    0 2px 6px rgba(10, 28, 43, .24),
    0 34px 62px -24px rgba(10, 28, 43, .62);
}
.lg--hover:hover::before { --lg-rim: .96; }

/* ── Le verre appliqué au reste du site ──
   Le primitif ci-dessus n'était porté que par quatre cartes. Partout
   ailleurs, le site empilait sept flous différents — 3, 8, 10, 12, 16, 20 et
   24 px — dont un seul avec saturation et aucun avec liseré : exactement le
   « calque translucide, pas du verre » que décrit l'en-tête. La navbar
   poussait la contradiction au bout, avec un fond à 96 % d'opacité sous un
   blur(20px) qui n'avait donc rien à flouter.

   Ces surfaces rejoignent le primitif sans perdre leur identité : chacune
   garde son fond et sa bordure, et ne reçoit d'ici que ce qui lui manquait —
   la saturation, le liseré spéculaire et les deux ombres. Ce qui les
   distingue passe par des jetons : `--lg-tint` pour la couleur du reflet,
   `--lg-glow` pour le halo d'accent que deux cartes portaient déjà. */
.lg-surface,
.navbar.scrolled,
.mobile-menu,
.hero-mini-card,
.hero-mini-card-water,
.realisation-card,
.water-visual-card,
.hero-financement,
.cart-drawer,
.toast {
  isolation: isolate;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow:
    inset 0 1px 0 rgba(var(--lg-tint), .34),
    0 1px 2px rgba(10, 28, 43, .22),
    0 22px 48px -22px rgba(10, 28, 43, .58),
    0 0 60px var(--lg-glow, transparent);
}

.lg-surface::before,
.navbar.scrolled::before,
.mobile-menu::before,
.hero-mini-card::before,
.hero-mini-card-water::before,
.realisation-card::before,
.water-visual-card::before,
.hero-financement::before,
.cart-drawer::before,
.toast::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(142deg,
    rgba(var(--lg-tint), var(--lg-rim)) 0%,
    rgba(var(--lg-tint), 0) 34%,
    rgba(var(--lg-tint), 0) 64%,
    rgba(var(--lg-tint), calc(var(--lg-rim) * .42)) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Le liseré est en `position: absolute` : il lui faut un parent positionné.
   Mais la règle partagée ne doit surtout pas l'imposer — la navbar est
   `fixed`, le tiroir panier et le toast aussi, le menu mobile est `absolute`.
   Un `position: relative` groupé les décrochait tous (la navbar, plus fixée,
   défilait avec la page). Seules les surfaces réellement statiques le
   reçoivent. */
.lg-surface,
.hero-mini-card,
.hero-mini-card-water,
.realisation-card,
.water-visual-card,
.hero-financement {
  position: relative;
}

/* Une barre pleine largeur n'a pas de coin à allumer : son épaisseur se lit
   sur l'arête basse, celle qui surplombe le contenu qui défile dessous. Le
   dégradé passe donc de diagonal à vertical. */
.navbar.scrolled::before,
.mobile-menu::before {
  background: linear-gradient(180deg,
    rgba(var(--lg-tint), calc(var(--lg-rim) * .45)) 0%,
    rgba(var(--lg-tint), 0) 38%,
    rgba(var(--lg-tint), 0) 62%,
    rgba(var(--lg-tint), var(--lg-rim)) 100%);
}

/* Le tiroir panier est le seul verre clair : il est posé sur la page
   assombrie, où un reflet blanc sur blanc ne se verrait pas — sa teinte
   passe donc au navy, comme `.lg--dark`. Son ombre reste portée vers la
   gauche : elle dit par quel bord le panneau est entré, ce que l'ombre
   descendante partagée effacerait. */
.cart-drawer {
  --lg-tint: 23, 59, 89;
  --lg-rim: .22;
  --lg-blur: 30px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    -8px 0 40px rgba(4, 20, 31, .18);
}

/* Le toast est petit et bref : son ombre reste courte, une ombre longue le
   ferait flotter beaucoup trop haut pour ce qu'il annonce. */
.toast {
  --lg-rim: .52;
  --lg-blur: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 1px 2px rgba(4, 20, 31, .28),
    0 16px 34px -14px rgba(4, 20, 31, .55);
}

/* ── Replis ──
   Sans `backdrop-filter`, le fond translucide laisse passer le texte de la
   section : il faut un fond plein. Firefox ne l'a activé par défaut que
   récemment, et les navigateurs embarqués de certaines applications ne
   l'ont toujours pas. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg { background: rgba(255, 255, 255, .16); }
  .lg--dark { background: #ffffff; }
  /* Sans flou, l'opacité qu'on vient d'abaisser n'est plus un effet mais un
     défaut : le texte de la page traverserait la navbar et le menu. Ces
     surfaces-là redeviennent donc pleines. Les cartes du hero, elles, sont
     posées sur un fond sombre uni et restent lisibles translucides. */
  .navbar.scrolled { background: rgba(23,59,89,.98); }
  .mobile-menu     { background: rgba(17,46,71,.98); }
  .cart-drawer     { background: #ffffff; }
  .toast           { background: var(--dark); }
}

/* Réglage système « réduire la transparence » : on rend le verre opaque et
   on retire le flou, qui est précisément ce que le réglage vise. */
@media (prefers-reduced-transparency: reduce) {
  .lg {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, .18);
  }
  .lg--dark { background: #ffffff; }
  .lg-surface, .navbar.scrolled, .mobile-menu, .hero-mini-card,
  .hero-mini-card-water, .realisation-card, .water-visual-card,
  .hero-financement, .cart-drawer, .toast {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .navbar.scrolled { background: rgba(23,59,89,.98); }
  .mobile-menu     { background: rgba(17,46,71,.98); }
  .cart-drawer     { background: #ffffff; }
  .toast           { background: var(--dark); }
}
@media (prefers-reduced-motion: reduce) {
  .lg--hover, .lg--hover:hover { transition: none; transform: none; }
}

/* Titre lu par les lecteurs d'écran mais retiré du flux visuel. Sert aux
   pages qui n'ont pas de titre affiché (tunnel de commande) : un document
   sans <h1> n'est pas navigable au clavier ni annonçable. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   AVIS GOOGLE — Composant custom (5 avis SmartSun/SmartWater)
   ═══════════════════════════════════════════════════════════════════ */
.google-reviews-section .section-header { text-align: center; margin-bottom: 2.5rem; }

/* Bandeau note globale */
.grw-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  max-width: 720px; margin: 0 auto 2.5rem;
  padding: 20px 28px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.grw-summary-score { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.grw-summary-num { font-size: 40px; font-weight: 800; color: #173b59; line-height: 1; }
.grw-summary-stars { color: #fbbc04; font-size: 22px; letter-spacing: 2px; }
.grw-summary-label { color: #6b7280; font-size: 14px; }
.grw-summary-cta { flex-shrink: 0; }

/* Grille */
.grw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Carte */
.grw-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 22px;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
}
.grw-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(23, 59, 89, 0.10);
  border-color: #1ab977;
}

.grw-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.grw-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 18px;
  flex-shrink: 0;
}

.grw-author { flex: 1; min-width: 0; }
.grw-author-name {
  font-weight: 600; color: #173b59; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grw-author-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; }

.grw-card-google { color: #4285f4; font-size: 18px; flex-shrink: 0; }

.grw-badge-new {
  background: linear-gradient(135deg, #1ab977, #0d9660);
  color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 4px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.grw-card-rating {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.grw-stars { color: #fbbc04; font-size: 16px; letter-spacing: 1px; }
.grw-date { color: #9ca3af; font-size: 12px; }

.grw-card-text {
  color: #374151;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.grw-cta-bottom {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.grw-cta-text {
  color: #6b7280;
  font-size: 14px;
}
.grw-cta-text a {
  color: #1ab977;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted #1ab977;
}
.grw-cta-text a:hover { color: #0d9660; }

/* Mobile */
@media (max-width: 600px) {
  .grw-summary { flex-direction: column; text-align: center; padding: 20px; }
  .grw-summary-score { justify-content: center; }
  .grw-summary-num { font-size: 32px; }
  .grw-grid { grid-template-columns: 1fr; gap: 16px; }
  .grw-card { padding: 18px 20px; }
}