/* ════════════════════════════════════════════════════════════════
   SmartWater — Fiches produits premium
   Sections additionnelles : KPI, procédé 3D, coupe fonctionnelle,
   chaîne de filtration, specs groupées, comparatif de gamme.
   Se superpose à product.css (tokens --mint/--navy déjà recolorés
   en cyan par body.universe-water).
   ════════════════════════════════════════════════════════════════ */

/* Ces deux fonds formaient un navy de plus, indépendant de celui du reste du
   site et nettement plus froid : la fiche eau ne tombait donc pas sur la même
   couleur que la page qui y mène. Ils pointent sur la rampe commune de
   style.css, et seuls les halos cyan disent encore l'univers. */
.wpx {
  --wpx-deep:    var(--dark-950, #0a1c2b);
  --wpx-deep-2:  var(--dark-700, #1a4264);
  --wpx-line:    rgba(0,180,216,.22);
  --wpx-glow:    rgba(0,180,216,.35);
}

/* ── Base de section ─────────────────────────────────────────── */
.wpx-section { padding: 5rem 0; position: relative; }
.wpx-section--tint { background: linear-gradient(180deg, #f2f9fc, #ffffff); }
.wpx-section--dark {
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(0,180,216,.16), transparent 62%),
    radial-gradient(760px 380px at 88% 100%, rgba(0,119,182,.20), transparent 60%),
    linear-gradient(160deg, var(--dark-900, #0e263b), var(--dark, #173b59));
  color: #e8f6fb;
}
.wpx-section--dark h2,
.wpx-section--dark h3 { color: #ffffff; }

.wpx-head { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.wpx-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mint);
  background: var(--mint-xl); border: 1px solid var(--mint-sm);
  padding: .4rem .9rem; border-radius: var(--radius-pill); margin-bottom: 1rem;
}
.wpx-section--dark .wpx-eyebrow {
  background: rgba(0,180,216,.14); border-color: var(--wpx-line); color: #7fdcf3;
}
/* `balance` répartit les mots à égalité entre les lignes au lieu de remplir
   la première : sans lui, « De l’humidité de l’air ambiant au verre d’eau »
   laissait « d’eau » seul sur la seconde ligne. Le navigateur qui ne connaît
   pas la propriété l’ignore et retombe sur la coupe habituelle. */
.wpx-head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800;
  letter-spacing: -.02em; margin-bottom: .85rem;
  text-wrap: balance;
}
.wpx-head p { font-size: 1.02rem; color: var(--gray600); line-height: 1.7; }
.wpx-section--dark .wpx-head p { color: rgba(232,246,251,.72); }

/* ── Bandeau KPI ─────────────────────────────────────────────────
   Les quatre chiffres du modèle sont l'argument le plus fort de la page :
   ils remontent donc à cheval sur le hero, sur un panneau surélevé, et
   chaque carte se redresse à l'arrivée à l'écran pendant que sa valeur
   monte (voir countUp). Le nombre affiché reste celui du catalogue. */
.wpx-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--gray100);
  border:  1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; margin-top: -2.6rem; position: relative; z-index: 4;
  box-shadow: 0 32px 70px -34px rgba(4,20,31,.55), 0 2px 8px rgba(4,20,31,.06);
  perspective: 1000px;
}
/* Colonne flex avec le libellé poussé en bas : certaines valeurs de la gamme
   Marine tiennent sur deux lignes (« 7200 L/jour (360 L/heure) »). Sans cela
   leur libellé descend et se désaligne de celui des trois autres cartes. */
.wpx-kpi {
  background: #fff; padding: 1.8rem 1.4rem; text-align: center;
  display: flex; flex-direction: column;
  transition: background .2s, transform .3s cubic-bezier(.22,1,.36,1);
}
.wpx-kpi i { font-size: 1.15rem; color: var(--mint); margin-bottom: .6rem; display: block; }
.wpx-kpi-val {
  display: block; font-size: clamp(1.55rem, 2.4vw, 2rem); font-weight: 800;
  color: var(--navy); letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.wpx-kpi--long .wpx-kpi-val { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
.wpx-kpi-key { display: block; font-size: .74rem; font-weight: 600; color: var(--gray400); text-transform: uppercase; letter-spacing: .07em; margin-top: auto; padding-top: .4rem; }
/* Les chiffres comptés sont en chasse fixe : sans cela, la largeur saute à
   chaque incrément et toute la carte tremble pendant l'animation. */
.wpx-num { display: inline-block; font-variant-numeric: tabular-nums; }

/* ── Entrée en profondeur, carte par carte ───────────────────────
   Le conteneur porte `.wpx-reveal3d` et la perspective ; ses enfants
   directs se redressent l'un après l'autre, le décalage venant de
   `--wpx-i` posé au rendu. Réutilisé par le bandeau de chiffres, le
   parcours d'achat et les cartes de garantie. */
.wpx-reveal3d { perspective: 1000px; }
.wpx-reveal3d > * {
  opacity: 0; transform: rotateX(-38deg) translateZ(-40px);
  transform-origin: 50% 100%;
  transition: opacity .6s ease, transform .75s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--wpx-i, 0) * 90ms);
}
.wpx-reveal3d.is-in > * { opacity: 1; transform: none; }
/* Le survol doit reprendre la main une fois la carte en place : sans
   sélecteur au moins aussi spécifique que celui du repos, il ne passerait
   jamais — et sans transition plus courte, il traînerait sur .75 s. */
.wpx-reveal3d.is-in .wpx-kpi:hover {
  background: var(--mint-xl); transform: translateY(-3px);
  transition: background .2s, transform .25s cubic-bezier(.22,1,.36,1);
  transition-delay: 0s;
}

/* ── Ce qui distingue l'appareil ──────────────────────────────────
   La section arrive avant le mode d'emploi : elle répond au « pourquoi
   celui-là » pendant que le lecteur a encore le prix en tête, le « comment
   ça marche » vient après.

   C'est ici que le verre dépoli du site (.lg, style.css) est le plus juste :
   un fond sombre, deux halos colorés dessous, et des cartes qui laissent
   passer la couleur en la floutant. D'où `.wpx-edge-fx` — sans quelque chose
   à réfracter, un backdrop-filter posé sur un aplat ne produit rien. */
.wpx-edge { overflow: hidden; }
.wpx-edge-fx { position: absolute; inset: 0; pointer-events: none; }
/* Les halos descendent volontairement DERRIÈRE la rangée de cartes : posés
   plus haut, ils éclairaient la section mais le verre n'avait toujours rien
   à refracter, et le flou restait invisible. */
.wpx-edge-fx span {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .85;
}
.wpx-edge-fx span:first-child {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  top: 26%; left: -10%; background: radial-gradient(circle, rgba(0,180,216,.62), transparent 66%);
}
.wpx-edge-fx span:last-child {
  width: 42vw; height: 42vw; max-width: 560px; max-height: 560px;
  top: 34%; right: -8%; background: radial-gradient(circle, rgba(0,119,182,.70), transparent 66%);
}
.wpx-edge .pdp-container { position: relative; z-index: 1; }

.wpx-edge-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem; align-items: stretch;
}
/* `.lg` porte le verre (flou, teinte, liseré, ombres) ; il ne reste ici que
   la mise en page et la typographie. */
/* Liseré remonté à .78 : sur ce fond très sombre, la valeur par défaut (.55)
   se perdait et la carte n'avait plus d'arête — donc plus d'épaisseur. */
.wpx-edge-c { padding: 1.65rem 1.4rem 1.45rem; --lg-rim: .78; }
.wpx-edge-c h3 {
  font-size: .98rem; font-weight: 800; line-height: 1.35;
  letter-spacing: -.015em; margin: 1rem 0 .5rem; color: #fff;
}
.wpx-edge-c p { font-size: .84rem; line-height: 1.62; color: rgba(232,246,251,.68); margin: 0; }
.wpx-edge-ico {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: var(--radius-ico); font-size: 1.1rem; color: #7fdcf3;
  background: linear-gradient(150deg, rgba(0,180,216,.28), rgba(0,119,182,.10));
  border: 1px solid var(--wpx-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform .35s cubic-bezier(.22,1,.36,1), color .3s;
}
/* Trois classes pour battre `.wpx-reveal3d.is-in > *` (0,2,1), qui remet le
   transform à `none` une fois la carte arrivée — même piège que .wpx-kpi. */
.wpx-reveal3d.is-in .wpx-edge-c:hover {
  transform: translateY(-5px);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, background .3s;
  transition-delay: 0s;
}
.wpx-edge-c:hover .wpx-edge-ico { transform: scale(1.06) rotate(-3deg); color: #a5e9fb; }

@media (prefers-reduced-motion: reduce) {
  .wpx-reveal3d.is-in .wpx-edge-c:hover { transform: none; }
  .wpx-edge-c:hover .wpx-edge-ico { transform: none; }
}

/* ── Procédé — les étapes en enfilade ────────────────────────── */
/* Grille plutôt que flex : les cartes étaient dimensionnées par leur contenu
   (`flex: 1 1 165px`), si bien qu'au retour à la ligne la seconde rangée était
   plus large et plus courte que la première. En colonnes égales, toutes les
   rangées se ressemblent et les cartes s'alignent verticalement. */
.wpx-flow {
  display: grid;
  grid-template-columns: repeat(var(--wpx-cols, 4), minmax(0, 1fr));
  gap: .9rem; align-items: stretch;
}
/* Les cartes étaient pivotées en permanence (rotateX 9° / rotateY -11°) et
   ne se redressaient qu'au survol. Deux choses n'allaient pas : le texte
   d'une étape se lisait sur un plan incliné, et survoler une carte la
   remettait d'aplomb au milieu de voisines restées de biais — la rangée
   paraissait cassée. Le relief passe donc par la lumière, comme sur la vue
   en coupe : dégradé orienté depuis le haut-gauche, arête claire sur le
   bord supérieur, ombre portée dessous. La carte reste d'équerre. */
.wpx-step {
  position: relative;
  background: linear-gradient(158deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 1px solid var(--wpx-line);
  border-radius: var(--radius);
  padding: 1.6rem 1.15rem 1.3rem;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.09);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .3s;
}
.wpx-step:hover,
.wpx-step:focus-within {
  transform: translateY(-8px);
  border-color: var(--mint);
  box-shadow: 0 26px 56px rgba(0,0,0,.42), 0 0 0 1px var(--wpx-glow), inset 0 1px 0 rgba(255,255,255,.14);
}
.wpx-step-n {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--mint); color: var(--dark-950, #0a1c2b);
  font-size: .78rem; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: 0 0 0 4px var(--wpx-deep-2), 0 4px 14px var(--wpx-glow);
}
.wpx-step-ico {
  width: 58px; height: 58px; margin: .35rem auto 1rem; border-radius: var(--radius-ico);
  display: grid; place-items: center; font-size: 1.4rem; color: #7fdcf3;
  background: linear-gradient(150deg, rgba(0,180,216,.24), rgba(0,119,182,.12));
  border: 1px solid var(--wpx-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.wpx-step h3 { font-size: .95rem; font-weight: 700; margin-bottom: .45rem; letter-spacing: -.01em; }
.wpx-step p { font-size: .8rem; line-height: 1.55; color: rgba(232,246,251,.66); }
.wpx-step-tag {
  display: inline-block; margin-top: .7rem; font-size: .7rem; font-weight: 700;
  color: #7fdcf3; background: rgba(0,180,216,.13);
  border: 1px solid var(--wpx-line); border-radius: var(--radius-pill); padding: .22rem .6rem;
}

/* ── Coupe fonctionnelle ─────────────────────────────────────── */
.wpx-cut-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 3rem; align-items: center;
}
/* Le schéma paysage (synoptique du dessalinisateur) passe pleine largeur et
   sa légende sous lui, en deux colonnes : à mi-largeur ses libellés tombaient
   sous les 10 px, donc sous le seuil de lisibilité. Le schéma portrait
   (générateur atmosphérique) reste à côté de sa légende, sa hauteur s'y
   prête. */
.wpx-cut-grid--wide { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.wpx-cut-grid--wide .wpx-cut-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }

.wpx-cut-stage {
  position: relative;
  /* Quadrillage discret sous le dessin : il l'ancre comme un plan technique
     plutôt que comme une illustration posée sur un fond. Le voile radial
     posé en premier éclaire le centre et laisse retomber les angles — le
     dessin repose alors dans une lumière au lieu de flotter sur un aplat.
     Il reprend l'axe d'éclairage du SVG lui-même (haut-gauche). */
  background:
    radial-gradient(120% 90% at 28% 6%, rgba(139,214,238,.11), transparent 62%),
    linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    repeating-linear-gradient(0deg, rgba(139,214,238,.055) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(139,214,238,.055) 0 1px, transparent 1px 34px);
  border: 1px solid var(--wpx-line); border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: 0 20px 54px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.07);
}
.wpx-cut-stage svg { width: 100%; height: auto; display: block; position: relative; }

/* ── Mouvement des fluides ───────────────────────────────────────
   Trois animations, toutes strictement décoratives : elles indiquent un
   sens de circulation, jamais un débit ni une cadence. Rien n'y est
   chiffré, et le bloc « mouvement réduit » les éteint sans perte. */
.wxq-flow, .wxq-air-dash { stroke-dasharray: 9 13; animation: wxqFlow 1.9s linear infinite; }
@keyframes wxqFlow { to { stroke-dashoffset: -44; } }
/* Le condensat qui tombe de l'échangeur dans le bac : trois gouttes
   décalées, pour que la chute paraisse continue sans en dessiner dix. */
.wxq-drop { animation: wxqDrop 2.6s ease-in infinite; }
.wxq-drop--b { animation-delay: .85s; }
.wxq-drop--c { animation-delay: 1.7s; }
@keyframes wxqDrop {
  0% { opacity: 0; transform: translateY(0); }
  18%, 78% { opacity: 1; }
  100% { opacity: 0; transform: translateY(26px); }
}
/* Le tracé de la vague couvre deux motifs de plus que le réservoir : le
   translater d'exactement deux périodes (2 × 48 unités) reboucle sans
   raccord visible. */
.wxq-wave { animation: wxqWave 8s linear infinite; }
@keyframes wxqWave { to { transform: translateX(-96px); } }

.wpx-hot { cursor: pointer; }
.wxq-lead { transition: stroke .25s; }
.wpx-hot:hover .wxq-lead, .wpx-hot.is-on .wxq-lead { stroke: rgba(139,214,238,.8); }
/* Le liseré clair de la pastille est posé en attribut de présentation dans
   le SVG ; toute règle CSS qui touche `stroke` l'emporterait dessus, il faut
   donc le redéclarer ici plutôt que de le neutraliser. */
.wpx-hot .wpx-hot-dot {
  transition: r .25s, fill .25s, stroke .25s, stroke-width .25s;
  stroke: rgba(255,255,255,.5); stroke-width: 1.1; paint-order: stroke;
}
.wpx-hot:hover .wpx-hot-dot,
.wpx-hot.is-on .wpx-hot-dot {
  r: 15; fill: #ffffff;
  stroke: rgba(0,180,216,.55); stroke-width: 6;
}
/* Halo : discret au repos, il ne fait qu'asseoir la pastille sur le dessin ;
   il s'ouvre quand le repère est actif. */
.wpx-hot-halo { transition: fill .25s, r .25s; }
.wpx-hot:hover .wpx-hot-halo,
.wpx-hot.is-on .wpx-hot-halo { fill: rgba(0,180,216,.34); }
.wpx-hot:focus-visible { outline: none; }
.wpx-hot:focus-visible .wpx-hot-dot { r: 15; fill: #fff; stroke: #48cae4; stroke-width: 6; }
.wpx-hot-part { transition: opacity .25s, filter .25s; }
.wpx-hot-part.is-on { filter: drop-shadow(0 0 10px rgba(72,202,228,.95)) drop-shadow(0 0 22px rgba(72,202,228,.45)); }

.wpx-cut-list { display: flex; flex-direction: column; gap: .65rem; }
.wpx-cut-item {
  display: flex; gap: .95rem; align-items: flex-start;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding: .95rem 1.1rem;
  cursor: pointer; text-align: left; width: 100%;
  transition: background .22s, border-color .22s, transform .22s;
}
.wpx-cut-item:hover { background: rgba(0,180,216,.10); border-color: var(--wpx-line); transform: translateX(4px); }
.wpx-cut-item.is-on { background: rgba(0,180,216,.15); border-color: var(--mint); }
.wpx-cut-num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--mint); color: var(--dark-950, #0a1c2b); font-size: .76rem; font-weight: 800;
  display: grid; place-items: center; margin-top: .1rem;
}
.wpx-cut-item h4 { font-size: .92rem; font-weight: 700; color: #fff; margin-bottom: .18rem; }
.wpx-cut-item p { font-size: .81rem; line-height: 1.55; color: rgba(232,246,251,.66); }

.wpx-disclaimer {
  display: flex; gap: .6rem; align-items: flex-start;
  margin-top: 1.6rem; font-size: .78rem; line-height: 1.55;
  color: var(--gray400);
}
.wpx-disclaimer i { color: var(--mint); margin-top: .18rem; }
.wpx-section--dark .wpx-disclaimer { color: rgba(232,246,251,.5); }

/* ── Chaîne de filtration ────────────────────────────────────── */
.wpx-chain { display: flex; align-items: stretch; gap: .45rem; flex-wrap: wrap; justify-content: center; }
.wpx-chain-node {
  flex: 1 1 150px; max-width: 205px;
  background: #fff; border:  1px solid var(--line); border-left: 3px solid var(--mint);
  border-radius: var(--radius); padding: 1.25rem 1.05rem;
  box-shadow: var(--shadow-xs); position: relative;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.wpx-chain-node:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.wpx-chain-i {
  width: 40px; height: 40px; border-radius: var(--radius-ico); display: grid; place-items: center;
  background: var(--mint-xl); color: var(--mint); font-size: 1rem; margin-bottom: .8rem;
}
.wpx-chain-node h4 { font-size: .88rem; font-weight: 700; color: var(--navy); margin-bottom: .3rem; }
.wpx-chain-node p { font-size: .78rem; line-height: 1.55; color: var(--gray600); }
.wpx-chain-sep { align-self: center; color: var(--mint); opacity: .5; font-size: .9rem; }

/* ── La dérivation de rejet ──
   La vanne de régulation ne traite pas l'eau qu'on boit : elle règle le débit
   du concentré salin qui repart à la mer. Rendue comme les autres cartes,
   sous un titre qui promet que chaque étage traite ce que le précédent laisse
   passer, elle se lisait comme un étage traversé par l'eau potable. Elle
   prend donc la teinte de la saumure du synoptique, une flèche de dérivation
   au lieu du chevron de suite, et le dit en étiquette. */
.wpx-chain-sep--rejet { color: #b8916f; opacity: .8; }
.wpx-chain-node--rejet {
  border-left-color: #cbaa8c;
  background: linear-gradient(180deg, rgba(203,170,140,.08), rgba(203,170,140,.02));
}
.wpx-chain-node--rejet .wpx-chain-i { background: rgba(203,170,140,.16); color: #a87f5c; }
.wpx-chain-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .7rem; padding: .22rem .55rem;
  border: 1px solid rgba(203,170,140,.5); border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #a87f5c;
}
.wpx-chain-src {
  margin-top: 1.75rem; text-align: center;
  font-size: .8rem; color: var(--gray600);
  background: var(--gray50); border: 1px dashed var(--gray300);
  border-radius: var(--radius); padding: .9rem 1.2rem;
}
.wpx-chain-src code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .79rem; color: var(--navy); font-weight: 600;
}

/* Renvoi vers les consommables. Sa place est ici et nulle part ailleurs :
   c'est en lisant la chaîne qu'on se demande ce qui s'y remplace. */
.wpx-chain-link {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: 1.1rem;
  font-size: .88rem; font-weight: 650;
  color: var(--w-accent2, #0077b6);
  text-decoration: none;
}
.wpx-chain-link i { font-size: .78rem; transition: transform .2s ease; }
.wpx-chain-link:hover { text-decoration: underline; }
.wpx-chain-link:hover i { transform: translateX(3px); }

/* ── Fiche technique groupée ─────────────────────────────────── */
.wpx-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 1.35rem; }
.wpx-group {
  background: #fff; border:  1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs);
}
.wpx-group-h {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.05rem 1.3rem; background: var(--gray50);
  border-bottom: 1px solid var(--gray100);
  font-size: .82rem; font-weight: 700; color: var(--navy);
  text-transform: uppercase; letter-spacing: .06em;
}
.wpx-group-h i { color: var(--mint); }
.wpx-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem;
  padding: .95rem 1.3rem; border-bottom: 1px solid var(--gray50);
}
.wpx-row:last-child { border-bottom: 0; }
.wpx-row-k { font-size: .84rem; color: var(--gray600); flex: 1 1 auto; }
.wpx-row-v { font-size: .89rem; font-weight: 700; color: var(--navy); text-align: right; flex: 0 0 auto; max-width: 58%; }
.wpx-row-note {
  display: block; padding: 0 1.3rem .95rem; margin-top: -.4rem;
  font-size: .78rem; font-style: italic; line-height: 1.5; color: var(--gray400);
  border-bottom: 1px solid var(--gray50);
}

/* ── Certifications ──────────────────────────────────────────── */
.wpx-certs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.wpx-cert {
  background: #fff; border:  1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.5rem 1.2rem; text-align: center; box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.wpx-cert:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--mint-sm); }
.wpx-cert i {
  width: 46px; height: 46px; border-radius: var(--radius-ico); display: grid; place-items: center;
  background: var(--mint-xl); color: var(--mint); font-size: 1.1rem; margin: 12px 0 .3rem;
}
/* Même bande de 58 px que l'icône ci-dessus pour que les cartes à logo et les
   cartes à icône gardent la même ligne de base. La largeur est plafonnée :
   les logos très horizontaux (RoHS) écraseraient sinon les logos carrés (ISO). */
.wpx-cert-logo { height: 58px; width: auto; max-width: 130px; object-fit: contain; margin-bottom: .3rem; }
.wpx-cert-n { font-size: 1rem; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.wpx-cert-d { font-size: .78rem; line-height: 1.5; color: var(--gray600); }

/* ── Choisir son modèle ──────────────────────────────────────────
   La gamme s'affichait en tableau, une ligne par référence. Elle se lit
   maintenant avec les cartes de configuration de la fiche SigenMate
   (.pdp-config*, product.css) : mêmes composants, une seule direction
   artistique sur toutes les pages commandables du site. Le fichier
   product.css étant chargé avant celui-ci, il suffit d'ajuster ce que le
   contexte « eau » change — le fond teinté de la section et la carte du
   modèle courant, qui doit rester lisible dessus. */
.wpx-choice .pdp-configs-grid { align-items: stretch; }
.wpx-choice .pdp-config { background: var(--white); }
/* Le dégradé de la section finit en blanc, exactement la couleur des cartes :
   à mi-hauteur, la bordure claire ne suffisait plus à les détacher du fond.
   Une ombre de contact les repose dessus plutôt que de les y fondre. */
.wpx-choice .pdp-config:not(.pdp-config--hl) { box-shadow: 0 1px 2px rgba(19,53,77,.05), 0 8px 24px rgba(19,53,77,.06); }
/* Le libellé d'étape porte ici le nom du modèle : il doit rester lisible en
   entier, y compris « SmartWater Marine 1800 XL ». */
.wpx-choice .pdp-config-step { font-size: .74rem; letter-spacing: .06em; }
.wpx-choice .pdp-config-list li span { flex: 1 1 auto; }
.wpx-choice .pdp-config-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .45rem; }
/* « Sur devis » à 1,55 rem et 900 de graisse hurlait plus fort que les prix
   affichés des modèles voisins, alors que c'est justement l'absence de prix.
   Sélecteur complet obligatoire : `.pdp-config-price span` réduit déjà tous
   les <span> de la ligne au format de la mention légale, et l'emporterait
   sur une classe seule. */
.wpx-choice .pdp-config-price .wpx-choice-devis {
  font-size: 1.15rem; font-weight: 800; color: var(--navy); letter-spacing: -.01em;
}
/* Bouton porté par un <a> : sans cela, le soulignement et la couleur de lien
   du thème traversent le fond plein du bouton principal. */
.wpx-choice a.pdp-config-btn { text-decoration: none; }
.wpx-choice a.pdp-btn-primary { color: var(--white); }

@media (max-width: 900px) {
  /* La pastille « Le modèle de cette page » dépasse en haut de la carte : une
     fois les cartes empilées, elle chevaucherait la précédente. product.css
     pose déjà cette marge, on la rappelle ici pour les cartes de tête, où la
     carte courante peut être la première de la pile. */
  .wpx-choice .pdp-config--hl { margin-top: .8rem; }
}

/* ── Après votre commande : parcours + garanties ─────────────── */
.wpx-jrn {
  list-style: none; margin: 0 0 2.4rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem;
  counter-reset: jrn;
}
.wpx-jrn-i {
  position: relative; background: rgba(255,255,255,.055);
  border: 1px solid var(--wpx-line); border-radius: var(--radius-lg);
  padding: 1.6rem 1.4rem 1.4rem;
}
/* La flèche relie visuellement les étapes : le parcours doit se lire comme
   une suite, pas comme quatre arguments juxtaposés. Masquée dès qu'une
   colonne saute à la ligne, sinon elle pointerait dans le vide. */
.wpx-jrn-i::after {
  content: '→'; position: absolute; right: -1rem; top: 50%; transform: translateY(-50%);
  color: rgba(0,180,216,.55); font-size: 1.1rem; font-weight: 700; z-index: 1;
}
.wpx-jrn-i:last-child::after { content: none; }
.wpx-jrn-n {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--mint); color: var(--dark-950, #0a1c2b);
  font-size: .78rem; font-weight: 800; margin-bottom: .9rem;
}
.wpx-jrn-i > i { color: var(--mint); font-size: 1.05rem; margin-left: .6rem; }
.wpx-jrn-i h3 { font-size: .98rem; font-weight: 800; color: #fff; margin: .5rem 0 .45rem; line-height: 1.35; }
.wpx-jrn-i p { font-size: .84rem; line-height: 1.62; color: rgba(232,246,251,.68); margin: 0; }

.wpx-guar { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.wpx-guar-c {
  background: linear-gradient(158deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid var(--wpx-line); border-radius: var(--radius-lg); padding: 1.4rem;
}
.wpx-guar-c > i { color: var(--mint); font-size: 1.15rem; }
.wpx-guar-c h4 { font-size: .92rem; font-weight: 800; color: #fff; margin: .7rem 0 .45rem; }
.wpx-guar-c p { font-size: .82rem; line-height: 1.62; color: rgba(232,246,251,.62); margin: 0; }
.wpx-guar-c a { display: inline-block; margin-top: .7rem; font-size: .8rem; font-weight: 700; color: #7fdcf3; }
.wpx-guar-c a:hover { text-decoration: underline; }
.wpx-guar-c a i { font-size: .7rem; margin-left: .25rem; }

/* ── CTA final ───────────────────────────────────────────────── */
.wpx-cta { text-align: center; }
.wpx-cta h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; margin-bottom: .9rem; }
.wpx-cta p { max-width: 560px; margin: 0 auto 1.9rem; color: rgba(232,246,251,.72); line-height: 1.7; }
.wpx-cta-btns { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.wpx-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.9rem; border-radius: var(--radius-pill);
  font-weight: 700; font-size: .95rem; border: 2px solid transparent;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.wpx-btn--fill { background: var(--mint); color: var(--dark-950, #0a1c2b); box-shadow: 0 8px 26px rgba(0,180,216,.32); }
.wpx-btn--fill:hover { transform: translateY(-2px); box-shadow: 0 13px 34px rgba(0,180,216,.42); }
.wpx-btn--ghost { border-color: rgba(255,255,255,.28); color: #fff; }
.wpx-btn--ghost:hover { background: rgba(255,255,255,.09); transform: translateY(-2px); }
/* Le CTA final déclenche désormais la commande : c'est un <button>, il faut
   donc lui redonner ce que le navigateur ne lui donne pas comme à un lien. */
button.wpx-btn { font-family: inherit; cursor: pointer; }
/* Sélecteurs qualifiés : « .wpx-cta p » impose sinon sa marge de 1.9rem. */
.wpx-cta p.wpx-cta-sub { max-width: 620px; margin: 1.4rem auto 0; font-size: .82rem; color: rgba(232,246,251,.55); }
.wpx-cta p.wpx-cta-sub a { color: rgba(232,246,251,.82); text-decoration: underline; }
.wpx-cta p.wpx-cta-alt { margin: 1.4rem auto 0; font-size: .85rem; }
.wpx-cta p.wpx-cta-alt a { color: #7fdcf3; font-weight: 700; }
.wpx-cta p.wpx-cta-alt a:hover { text-decoration: underline; }
.wpx-cta p.wpx-cta-alt i { font-size: .72rem; margin-left: .25rem; }

/* ── Révélation au scroll ────────────────────────────────────── */
.wpx-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.wpx-reveal.is-in { opacity: 1; transform: none; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 980px) {
  /* Au-delà de trois colonnes les cartes tombent sous ~180 px et le texte
     d'étape se casse mot à mot. On replie donc à trois, quel que soit le
     nombre d'étapes du modèle. */
  .wpx-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wpx-cut-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .wpx-cut-grid--wide .wpx-cut-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .wpx-section { padding: 3.5rem 0; }
  .wpx-flow { grid-template-columns: 1fr; }
  .wpx-step:hover, .wpx-step:focus-within { transform: translateY(-4px); }
  .wpx-chain-node { max-width: none; flex-basis: 100%; }
  .wpx-chain-sep { transform: rotate(90deg); }
  .wpx-kpis { margin-top: 0; }
  /* La coupe portrait tient dans la largeur d'un téléphone en gardant ses
     libellés au-dessus de 10 px : on la laisse se réduire, plutôt que de
     forcer un défilement qui cacherait les repères posés à droite du
     dessin. Le synoptique paysage, lui, est trois fois plus large que
     haut ; réduit à la même largeur son texte tomberait à 4 px, on impose
     donc un plancher et c'est le cadre qui défile. */
  .wpx-cut-stage { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: .85rem; }
  .wpx-cut-grid--wide .wpx-cut-stage svg { min-width: 820px; }
}

/* ════════════════════════════════════════════════════════════════
   Hero premium, barre d'achat persistante, climat de l'adresse
   ════════════════════════════════════════════════════════════════ */

/* ── Hero : fond technique ───────────────────────────────────── */
.wpx-hero { position: relative; overflow: hidden; isolation: isolate; }
.wpx-hero-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wpx-hero-glow {
  position: absolute; left: -8%; top: -30%; width: 62%; height: 130%;
  background: radial-gradient(closest-side, rgba(0,180,216,.20), transparent 72%);
  filter: blur(6px);
}
.wpx-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(23,59,89,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,59,89,.055) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 90% at 22% 32%, #000 12%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 22% 32%, #000 12%, transparent 72%);
}

/* ── Hero : socle du visuel produit, en volume ────────────────
   La scène est une vraie boîte 3D : `.wpx-stage` porte la perspective,
   `.wpx-stage-main` s'incline, et ses enfants sont répartis en profondeur.
   D'où deux contraintes à ne pas casser :
   1. `.wpx-stage-main` ne doit PAS avoir overflow/clip-path/filter — ce sont
      des propriétés « groupantes » qui aplatissent le contexte 3D et
      annuleraient tout le relief ;
   2. le fond flouté, qui a besoin d'être rogné, est donc déporté dans un
      élément à lui (`.wpx-stage-bg`) qui se rogne tout seul. */
.wpx-stage { perspective: 1400px; perspective-origin: 50% 42%; }
.wpx-stage-main {
  background: #eef6fb;
  border: 1px solid rgba(0,180,216,.16);
  box-shadow: 0 24px 60px -28px rgba(4,20,31,.45), inset 0 1px 0 rgba(255,255,255,.9);
  overflow: visible;
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow .4s ease;
}
.wpx-stage-main.is-tilt {
  box-shadow: 0 40px 90px -34px rgba(4,20,31,.6), 0 0 0 1px rgba(0,180,216,.28), inset 0 1px 0 rgba(255,255,255,.9);
}
/* Les visuels du catalogue sont recadrés en 4/3 (scripts/pad-product-images.mjs)
   et remplissent donc exactement la scène. Filet de sécurité pour un visuel qui
   ne serait pas au format : une copie floutée prolonge sa teinte de fond, plutôt
   que de laisser apparaître un rectangle net autour du produit. */
.wpx-stage-bg {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; overflow: hidden; pointer-events: none;
}
.wpx-stage-bg::before {
  content: ''; position: absolute; inset: -6%;
  background-image: var(--wpx-img); background-size: cover; background-position: center;
  filter: blur(48px) saturate(.75); opacity: .9;
}
/* Le produit décolle du socle : c'est ce retrait qui crée la parallaxe. */
.wpx-stage-img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: contain; border-radius: inherit;
  transform: translateZ(34px);
}
.wpx-stage-main::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(62% 48% at 50% 92%, rgba(0,180,216,.20), transparent 72%);
}
/* Reflet spéculaire : une tache de lumière qui suit le curseur, comme sur
   une vitrine. Elle n'apparaît qu'au survol, jamais au repos. */
.wpx-sheen {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity .4s ease;
  transform: translateZ(52px);
  background: radial-gradient(34% 34% at var(--wpx-mx, 50%) var(--wpx-my, 50%), rgba(255,255,255,.7), transparent 68%);
  mix-blend-mode: soft-light;
}
.wpx-stage-main.is-tilt .wpx-sheen { opacity: 1; }
/* Bascule au changement de vue depuis les vignettes. */
@keyframes wpxSwap {
  from { opacity: 0; transform: translateZ(34px) rotateY(-16deg) scale(.96); }
  to   { opacity: 1; transform: translateZ(34px) rotateY(0) scale(1); }
}
.wpx-stage-img.wpx-swap { animation: wpxSwap .5s cubic-bezier(.22,1,.36,1); }

.wpx-chip {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(0,180,216,.28);
  border-radius: var(--radius-pill); padding: .5rem .95rem;
  font-size: .8rem; font-weight: 700; color: var(--navy); white-space: nowrap;
  box-shadow: 0 10px 26px -12px rgba(4,20,31,.4);
  animation: wpxFloat 5.5s ease-in-out infinite;
}
.wpx-chip i { color: var(--mint); }
/* Les pastilles sont la couche la plus avancée : elles doublent leur
   déplacement par rapport au produit quand la scène s'incline. */
.wpx-chip--a { top: 6%; right: 5%; --wpx-z: 78px; }
.wpx-chip--b { bottom: 8%; left: 5%; --wpx-z: 62px; animation-delay: -2.6s; }
/* La profondeur passe par la translation elle-même : une transform ne
   s'additionne pas, l'animation de flottement doit donc la reconduire. */
@keyframes wpxFloat {
  0%, 100% { transform: translate3d(0, 0, var(--wpx-z, 0)); }
  50%      { transform: translate3d(0, -7px, var(--wpx-z, 0)); }
}

/* Les réponses d'achat renvoient aux CGV et aux mentions légales : sans
   distinction visuelle, ces liens vérifiables passent inaperçus. */
.wpx .pdp-faq-a a { color: var(--mint); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ── Hero : prix, aide à la décision, réassurance ────────────── */
.wpx .pdp-price-tax {
  font-size: .82rem; font-weight: 700; color: var(--gray400);
  margin-left: .45rem; letter-spacing: .04em;
}
/* « Livraison incluse » est collé au prix, pas relégué en note : c'est ce
   qui fait que le chiffre affiché est bien le chiffre final. */
.wpx .pdp-price-ship {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-left: auto; align-self: center;
  background: var(--mint-xl); color: var(--mint);
  border: 1px solid var(--mint-sm); border-radius: var(--radius-pill);
  padding: .3rem .7rem; font-size: .74rem; font-weight: 700;
  letter-spacing: .01em; white-space: nowrap;
}
.wpx .pdp-price-ship i { font-size: .7rem; }

/* ── Offre en cours ──
   Sur cette page tout est cyan : `--mint` est recoloré par
   body.universe-water, si bien qu'un encart aux tokens de la fiche
   disparaîtrait dans le décor. L'offre sort donc au vert SmartSun, en dur —
   c'est le même parti pris que l'économie du kit sur /consommables, et la
   seule chose de la colonne d'achat qui ne décrive pas l'appareil.

   Encadré discret et non bandeau clignotant : le visiteur qui lit un prix à
   quatre chiffres doute d'une page qui crie. Le cadeau se mentionne, il ne
   se hurle pas. */
.wpx .wpx-offer {
  margin: .9rem 0 0;
  padding: .85rem 1rem;
  border: 1px solid rgba(26,185,119,.3);
  border-radius: var(--radius-md, 12px);
  background: linear-gradient(180deg, rgba(26,185,119,.09), rgba(26,185,119,.04));
}
.wpx .wpx-offer-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .01em;
  color: #0f7a4d; text-transform: uppercase;
}
.wpx .wpx-offer-tag i { color: #16a06a; font-size: .8rem; }
.wpx .wpx-offer-detail {
  margin: .4rem 0 0; font-size: .84rem; line-height: 1.6; color: var(--gray600);
}
.wpx .wpx-offer-until {
  margin: .35rem 0 0; font-size: .76rem; font-weight: 700; color: #0f7a4d;
}

.wpx .wpx-sticky-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.wpx .wpx-sticky-price small { font-size: .66rem; font-weight: 600; color: var(--mint); letter-spacing: .02em; }
/* Placée sous les boutons, pas au-dessus : elle rassure celui qui hésite
   sans détourner celui qui est déjà décidé. */
.wpx .pdp-cta-help {
  margin: .9rem 0 0; font-size: .82rem; color: var(--gray500); text-align: center;
}
.wpx .pdp-cta-help a { color: var(--mint); font-weight: 700; white-space: nowrap; }
.wpx .pdp-cta-help a:hover { text-decoration: underline; }
.wpx .pdp-cta-help i { font-size: .72rem; margin-right: .2rem; }
.wpx-trust-i a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.wpx-trust-i a:hover { color: var(--mint); }
.wpx-trust {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem 1.1rem; margin-top: 1.6rem;
  padding-top: 1.4rem; border-top: 1px solid var(--gray100);
}
.wpx-trust-i { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--gray600); font-weight: 600; }
.wpx-trust-i i {
  width: 26px; height: 26px; flex: none; border-radius: var(--radius-ico);
  display: grid; place-items: center; font-size: .75rem;
  background: var(--mint-xl); color: var(--mint);
}

/* ── Barre d'achat persistante ───────────────────────────────── */
.wpx-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--gray100);
  box-shadow: 0 -14px 40px -22px rgba(4,20,31,.55);
  transform: translateY(105%); opacity: 0; visibility: hidden;
  transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s, visibility .25s;
}
.wpx-sticky.is-on { transform: translateY(0); opacity: 1; visibility: visible; }
.wpx-sticky-in { display: flex; align-items: center; gap: 1rem; padding-top: .7rem; padding-bottom: .7rem; }
.wpx-sticky-img { width: 44px; height: 44px; object-fit: contain; border-radius: var(--radius-sm); background: var(--gray50); flex: none; }
.wpx-sticky-txt { display: flex; flex-direction: column; min-width: 0; }
.wpx-sticky-txt strong { font-size: .92rem; color: var(--navy); font-weight: 800; letter-spacing: -.01em; }
.wpx-sticky-txt span { font-size: .76rem; color: var(--gray400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpx-sticky-price { margin-left: auto; font-size: 1.15rem; font-weight: 800; color: var(--navy); white-space: nowrap; }
.wpx-sticky-cta {
  flex: none; display: inline-flex; align-items: center; gap: .5rem;
  background: var(--mint); color: #fff; border: none; cursor: pointer;
  font-family: inherit; font-size: .88rem; font-weight: 700;
  padding: .78rem 1.5rem; border-radius: var(--radius-pill); text-decoration: none;
  box-shadow: 0 10px 24px -10px var(--wpx-glow);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.wpx-sticky-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* ── Chaîne courte : cartes élargies plutôt qu'une ligne vide ── */
.wpx-chain--wide { gap: 1rem; }
.wpx-chain--wide .wpx-chain-node { flex: 1 1 250px; max-width: 320px; padding: 1.7rem 1.5rem; }
.wpx-chain--wide .wpx-chain-i { width: 48px; height: 48px; font-size: 1.2rem; border-radius: var(--radius-ico); }
.wpx-chain--wide .wpx-chain-node h4 { font-size: 1rem; }
.wpx-chain--wide .wpx-chain-node p { font-size: .84rem; }

/* ── L'air de chez vous ──────────────────────────────────────── */
.wpx-clim {
  background: linear-gradient(158deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid var(--wpx-line); border-radius: var(--radius-lg);
  padding: 1.8rem;
}

.wpx-geo { position: relative; max-width: 520px; }
.wpx-geo > label {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(232,246,251,.55); margin-bottom: .45rem;
}
.wpx-geo-in { position: relative; }
.wpx-geo-in > i {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: rgba(232,246,251,.4); font-size: .9rem; pointer-events: none;
}
.wpx-geo-in input {
  width: 100%; padding: .95rem 2.6rem; border-radius: var(--radius);
  background: rgba(10,28,43,.6); border: 1px solid var(--wpx-line);
  color: #fff; font-size: .95rem; font-family: inherit;
}
.wpx-geo-in input::placeholder { color: rgba(232,246,251,.35); }
.wpx-geo-in input:focus { outline: 2px solid var(--wpx-glow); outline-offset: 1px; border-color: transparent; }
.wpx-geo-load { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--mint); }
.wpx-geo-list {
  display: none; position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + .4rem);
  background: var(--wpx-deep-2); border: 1px solid var(--wpx-line); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.wpx-geo-list.is-open { display: block; }
.wpx-geo-item {
  display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left;
  padding: .8rem 1rem; background: none; border: 0; cursor: pointer;
  color: rgba(232,246,251,.85); font-size: .88rem; font-family: inherit;
}
.wpx-geo-item:hover, .wpx-geo-item:focus-visible { background: rgba(0,180,216,.16); color: #fff; }
.wpx-geo-item i { color: var(--mint); font-size: .8rem; }
.wpx-geo-empty { padding: .8rem 1rem; font-size: .86rem; color: rgba(232,246,251,.55); }
.wpx-geo-sep {
  padding: .55rem 1rem .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(232,246,251,.4); border-top: 1px solid var(--wpx-line);
}

/* ── Échelle « Production selon l'humidité » ──────────────────────────
   L'axe court de 0 à 100 % d'humidité relative, et non sur la seule plage
   de l'appareil : la position d'un repère EST son pourcentage, ce qui rend
   le placement exact sans calcul, et un climat plus sec que la borne basse
   se voit tomber hors de la bande colorée au lieu d'être écrasé au bord.
   Les deux pastilles de production sont posées aux taux où le catalogue les
   déclare ; rien n'est tracé entre elles, faute de courbe mesurée. */
.wpx-scale { margin-top: 2rem; }
.wpx-scale-top h3 {
  margin: 0; font-size: 1rem; font-weight: 800; color: #fff; letter-spacing: -.01em;
}
.wpx-scale-top h3 i { color: var(--mint); margin-right: .45rem; }
.wpx-scale-top p { margin: .3rem 0 0; font-size: .82rem; color: rgba(232,246,251,.55); }
/* L'axe est encastré horizontalement : les pastilles sont centrées sur leur
   taux d'humidité et débordent donc de part et d'autre. Sans cette réserve,
   celle de 90 % dépasserait le cadre. L'axe gradué reçoit exactement le même
   encastrement, faute de quoi les repères 0 % et 100 % ne tomberaient plus en
   face des extrémités de la piste.
   La marge haute, elle, dégage la hauteur des étiquettes, qui montent
   au-dessus de la piste. */
.wpx-scale-rail { margin-inline: clamp(1.6rem, 8%, 3.4rem); }
.wpx-scale-track {
  position: relative; height: 4px; margin: 7rem 0 0; border-radius: var(--radius-pill);
  background: rgba(232,246,251,.12);
}
/* Domaine d'emploi : la seule zone où l'appareil est donné pour fonctionner. */
.wpx-scale-band {
  position: absolute; top: 0; height: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(0,180,216,.45), var(--mint));
}
/* Pastille de production, ancrée à son taux d'humidité et centrée dessus.
   `max-width` + `translateX` bornés évitent qu'elle déborde du cadre aux
   deux extrémités de l'axe. */
.wpx-scale-pt {
  position: absolute; left: var(--x); bottom: calc(100% + .9rem); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; text-align: center; white-space: nowrap;
}
.wpx-scale-pt::after {
  content: ''; position: absolute; top: 100%; left: 50%; width: 1px; height: .9rem;
  background: linear-gradient(180deg, var(--mint), rgba(0,180,216,.2));
}
.wpx-scale-pt b { font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1; }
.wpx-scale-pt i { font-style: normal; font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(232,246,251,.45); }
.wpx-scale-pt em {
  font-style: normal; margin-top: .3rem; font-size: .7rem; font-weight: 700;
  color: var(--mint); background: rgba(0,180,216,.12); border: 1px solid rgba(0,180,216,.3);
  border-radius: var(--radius-pill); padding: .15rem .5rem;
}
/* Repères du climat du visiteur : sous l'axe, pour ne pas se mêler aux
   valeurs constructeur qui, elles, sont au-dessus. */
.wpx-scale-me { position: absolute; inset: 0; }
.wpx-scale-dot {
  position: absolute; left: var(--x); top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(4,20,31,.75), 0 0 12px rgba(255,255,255,.5);
  opacity: 0; transform: scale(.4);
  animation: wpxDot .45s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--wpx-i, 0) * 90ms);
}
@keyframes wpxDot { to { opacity: 1; transform: scale(1); } }
/* Fondu seul : une transform déclarée dans l'animation remplacerait celle de
   l'élément — l'étiquette, centrée par translateX(-50%), se décalerait d'une
   demi-largeur à la fin du fondu. */
@keyframes wpxFade { to { opacity: 1; } }
/* Un seul intervalle sous la piste plutôt que quatre étiquettes : les
   trimestres d'un climat maritime tiennent en cinq points d'humidité et se
   chevaucheraient systématiquement. Les crochets marquent le trimestre le
   plus sec et le plus humide de l'année. */
.wpx-scale-span {
  position: absolute; top: calc(100% + .85rem); height: 2px; border-radius: var(--radius-pill);
  background: rgba(232,246,251,.45);
  opacity: 0; animation: wpxFade .5s ease .3s forwards;
}
.wpx-scale-span::before, .wpx-scale-span::after {
  content: ''; position: absolute; top: -3px; width: 2px; height: 8px;
  background: rgba(232,246,251,.45); border-radius: 1px;
}
.wpx-scale-span::before { left: 0; }
.wpx-scale-span::after { right: 0; }
.wpx-scale-tip {
  position: absolute; top: calc(100% + 1.55rem); transform: translateX(-50%);
  white-space: nowrap; font-size: .72rem; font-weight: 600; color: rgba(232,246,251,.6);
  opacity: 0; animation: wpxFade .5s ease .38s forwards;
}
.wpx-scale-tip b { color: #fff; font-weight: 800; }
.wpx-scale-axis {
  display: flex; justify-content: space-between; margin-top: 5.4rem;
  font-size: .66rem; color: rgba(232,246,251,.3);
}
/* Les graduations extrêmes sont centrées sur leur trait : on les décale d'une
   demi-largeur vers l'intérieur pour qu'elles tombent en face du bord de la
   piste plutôt qu'à côté. */
.wpx-scale-axis span:first-child { margin-left: -.5rem; }
.wpx-scale-axis span:last-child { margin-right: -.9rem; }
.wpx-scale-leg {
  margin: .7rem 0 0; display: flex; align-items: center; gap: .5rem;
  font-size: .74rem; color: rgba(232,246,251,.5);
}
.wpx-scale-key {
  flex: none; width: 26px; height: 4px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(0,180,216,.45), var(--mint));
}

.wpx-cl-head { margin-top: 1.6rem; font-size: .82rem; color: rgba(232,246,251,.62); }
.wpx-cl-head b { color: #fff; }
.wpx-cl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: .9rem; margin-top: .9rem; }
.wpx-cl-card {
  background: rgba(10,28,43,.5); border: 1px solid var(--wpx-line);
  border-radius: var(--radius); padding: 1.1rem 1.15rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.wpx-cl-s { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7fdcf3; }
/* Les mois sous le nom de saison : « Été » ne désigne pas les mêmes mois
   des deux côtés de l'équateur, l'intervalle lève l'ambiguïté. */
.wpx-cl-m { font-size: .68rem; color: rgba(232,246,251,.4); margin-top: -.2rem; }
.wpx-cl-zone {
  margin-top: .9rem; font-size: .75rem; line-height: 1.55; color: rgba(232,246,251,.5);
}
.wpx-cl-zone i { color: var(--mint); margin-right: .35rem; }
.wpx-cl-hr { display: flex; align-items: baseline; gap: .4rem; font-size: 1.7rem; font-weight: 800; color: #fff; letter-spacing: -.03em; }
.wpx-cl-hr small { font-size: .68rem; font-weight: 600; letter-spacing: .04em; color: rgba(232,246,251,.5); }
.wpx-cl-t { font-size: .78rem; color: rgba(232,246,251,.6); }
.wpx-cl-t i { color: var(--mint); margin-right: .35rem; }
.wpx-cl-err { font-size: .77rem; line-height: 1.55; color: rgba(232,246,251,.6); margin-top: .35rem; }
.wpx-cl-err i { color: #f0b429; margin-right: .35rem; }
.wpx-clim-note {
  margin: 1.5rem 0 0; display: flex; gap: .6rem; font-size: .76rem;
  line-height: 1.6; color: rgba(232,246,251,.52);
}
.wpx-clim-note i { color: var(--mint); margin-top: .18rem; }
.wpx-clim-note b { color: rgba(232,246,251,.8); font-weight: 700; }

@media (max-width: 760px) {
  .wpx-chip { font-size: .72rem; padding: .42rem .75rem; }
  .wpx-chip--a { top: 4%; right: 3%; }
  .wpx-chip--b { bottom: 4%; left: 3%; }
  .wpx-trust { grid-template-columns: 1fr; }
  .wpx-sticky-img, .wpx-sticky-txt { display: none; }
  .wpx-sticky-in { padding-top: .6rem; padding-bottom: .6rem; gap: .7rem; }
  .wpx-sticky-price { margin-left: 0; font-size: 1.05rem; }
  .wpx-sticky-cta { margin-left: auto; padding: .7rem 1.2rem; }
  .wpx-clim { padding: 1.3rem 1.1rem; }
  .wpx-cl-grid { grid-template-columns: 1fr; }
  /* Sur un écran étroit, les deux étiquettes de production se rapprochent :
     on les compose plus petit pour qu'elles ne se recouvrent pas. */
  .wpx-scale-pt b { font-size: 1.2rem; }
  .wpx-scale-pt em { font-size: .62rem; padding: .12rem .4rem; }
  .wpx-scale-pt i { font-size: .6rem; }
  .wpx-scale-axis span:nth-child(2), .wpx-scale-axis span:nth-child(4) { display: none; }
  /* Empilées, les étapes s'enchaînent vers le bas : la flèche latérale
     n'a plus de sens et doit disparaître plutôt que pointer dans le vide. */
  .wpx-jrn { grid-template-columns: 1fr; }
  .wpx-jrn-i::after { content: none; }
  .wpx-guar { grid-template-columns: 1fr; }
  .wpx-chain--wide .wpx-chain-node { max-width: none; }
}

/* ── Accessibilité : mouvement réduit ──────────────────────────
   Tout le relief est décoratif : rien n'y est porteur d'information, on
   peut donc l'éteindre intégralement sans rien perdre. Les chiffres, eux,
   sont déjà écrits dans le HTML — countUp ne se déclenche pas ici. */
@media (prefers-reduced-motion: reduce) {
  .wpx-reveal { opacity: 1; transform: none; transition: none; }
  .wpx-reveal3d, .wpx-reveal3d > * { perspective: none; opacity: 1; transform: none; transition: none; }
  .wpx-step { transition: none; }
  .wpx-step:hover, .wpx-step:focus-within { transform: none; }
  .wpx-chip { animation: none; transform: none; }
  .wpx-stage { perspective: none; }
  .wpx-stage-main { transform: none !important; transform-style: flat; }
  .wpx-stage-img { transform: none; }
  .wpx-stage-img.wpx-swap { animation: none; }
  .wpx-sheen { display: none; }
  .wpx-sticky { transition: none; }
  /* Sur l'échelle, l'animation ne fait pas qu'orner : les repères partent
     d'une opacité nulle et ne deviennent visibles qu'à son terme. Les
     éteindre sans rétablir l'opacité effacerait les relevés du visiteur.
     On ne touche pas au transform des étiquettes, qui les centre sur leur
     taux d'humidité et n'a rien de décoratif. */
  .wpx-scale-dot, .wpx-scale-span, .wpx-scale-tip { animation: none; opacity: 1; }
  .wpx-scale-dot { transform: scale(1); }
  /* Sur le schéma en coupe, les traits pointillés restent — c'est leur
     défilement qui s'arrête. Les gouttes de condensat, elles, n'existent
     que par leur chute : figées, elles resteraient collées sous
     l'échangeur, on les retire. */
  .wxq-flow, .wxq-air-dash, .wxq-wave { animation: none; }
  .wxq-drop { display: none; }
}