/* ════════════════════════════════════════════════════════════
   SMARTSUN — PAGE PRODUIT SIGENMATE 2700 ULTRA  v2
   Palette : navy commun (style.css) · #1ab977 (mint) · #f6f9fb (bg)
   Typo    : Inter (titres + corps) — aligne avec le reste du site
   ════════════════════════════════════════════════════════════ */

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

/* La fiche produit avait son propre navy — #13354d, quatre points sous celui
   de la charte. L'écart ne se voit pas sur la page ; il se voit au moment où
   on y arrive depuis le site, la navbar restant en #173b59 au-dessus d'un
   contenu qui, lui, avait glissé. Les trois jetons reprennent la rampe
   commune, avec repli en dur pour le cas où product.css serait chargé seul. */
:root {
  --navy:      var(--dark, #173b59);
  --navy-d:    var(--dark-900, #0e263b);
  --navy-l:    var(--dark-600, #1f4d72);
  --mint:      var(--green); /* identique à #1ab977, aligné sur le token global (style.css) */
  --mint-d:    #14a066;
  --mint-xl:   rgba(26,185,119,.08);
  --mint-sm:   rgba(26,185,119,.18);
  --bg:        #f6f9fb;
  --white:     #ffffff;
  --gray50:    #f0f4f8;
  --gray100:   #e2e8f0;
  --gray300:   #cbd5e1;
  --gray400:   #94a3b8;
  --gray600:   #475569;
  --gray800:   #1e293b;
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;

  /* Largeur de contenu. Elle doit rester égale au max-width de .container
     dans style.css (1320 px) : la navbar et le pied de page de la fiche
     produit sont ceux du site et s'alignent dessus. À 1180 px, tout le
     contenu produit était en retrait de 70 px de chaque côté par rapport au
     cadre qui l'entoure — l'œil lisait deux marges au lieu d'une. Les trois
     enveloppes du produit (.pdp-container, .pdp-benefit-row, .pdp-dyn-inner)
     partagent ce token pour ne plus pouvoir diverger. */
  --pdp-w: 1320px;

  /* Respiration verticale entre sections. Une fiche produit longue se
     parcourt au scroll : chaque section payait 88 px en haut et 88 en bas,
     soit 176 px de vide entre deux contenus, répétés quatorze fois — plus
     de 2 400 px, deux écrans et demi de rien. Ramené à 64 px, ce qui laisse
     encore deux fois l'interligne d'un titre.

     Trois paliers plutôt qu'une valeur unique, pour garder la hiérarchie qui
     existait : --sec-lg pour les sections qui ouvrent ou ferment (héro,
     bénéfices), --sec pour le régime courant, --sec-sm pour les bandeaux de
     transition. Réduire tout au même chiffre ferait perdre le rythme en même
     temps que le vide. */
  --pdp-sec-lg: 4.5rem;
  --pdp-sec:    4rem;
  --pdp-sec-sm: 3.25rem;

  /* Ombres à deux couches : une ombre de contact courte et dense qui pose
     l'objet, une ombre d'ambiance large et très diluée qui lui donne son
     volume. Une seule couche floue, comme auparavant, donne un halo gris
     uniforme — la différence entre un objet posé et un autocollant. */
  --shadow-xs: 0 1px 2px rgba(19,53,77,.05), 0 2px 8px rgba(19,53,77,.04);
  --shadow:    0 1px 2px rgba(19,53,77,.05), 0 8px 26px rgba(19,53,77,.07);
  --shadow-md: 0 2px 4px rgba(19,53,77,.05), 0 16px 44px rgba(19,53,77,.10);
  --shadow-lg: 0 4px 8px rgba(19,53,77,.05), 0 30px 76px rgba(19,53,77,.13);

  /* Couleurs ponctuelles (bloc avis + Tarifs dynamiques).
     --warn-bg / --warn-text ont disparu avec la pastille de remise ambrée :
     ils n'avaient pas d'autre point d'usage. */
  --gold-rating: #f59e0b;
  --dyn-grad-1:  #3ddb95;
  --dyn-grad-2:  #35c6f4;
}

/* Sur mobile la page est en colonne unique : elle fait déjà trois fois la
   hauteur du desktop, chaque respiration y coûte donc trois fois plus cher.
   Redéfinir les trois paliers ici les rabaisse partout d'un coup — plusieurs
   sections (fiche technique, FAQ, CTA final) n'avaient aucune règle mobile
   et gardaient les 64 px du desktop. */
@media (max-width: 768px) {
  :root {
    --pdp-sec-lg: 3.25rem;
    --pdp-sec:    3rem;
    --pdp-sec-sm: 2.5rem;
  }
}

/* Pages produit univers SmartWater : recolore tout le système pdp-* en cyan sans toucher au SigenMate (vert) */
body.universe-water {
  --mint:    var(--w-accent, #00b4d8);
  --mint-d:  var(--w-accent2, #0077b6);
  --mint-xl: rgba(0,180,216,.08);
  --mint-sm: rgba(0,180,216,.18);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--gray800);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.2;
  color: var(--navy);
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }

.pdp-container {
  max-width: var(--pdp-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ════════════════════════════════════════════
   BANDEAU RÉASSURANCE
   ════════════════════════════════════════════ */
.pdp-topbar {
  background: var(--navy);
  color: rgba(255,255,255,.8);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: .55rem 1rem;
  position: relative;
  z-index: 1000;
}
.pdp-topbar-inner {
  max-width: var(--pdp-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem .9rem;
}
.pdp-topbar span {
  display: flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}
.pdp-topbar i { color: var(--mint); font-size: .72rem; }
.pdp-topbar-sep { color: rgba(255,255,255,.2); font-size: .9rem; }

/* ════════════════════════════════════════════
   HEADER COLLANT
   ════════════════════════════════════════════ */
.pdp-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.pdp-header.scrolled {
  border-color: var(--gray100);
  box-shadow: 0 2px 24px rgba(19,53,77,.07);
}
.pdp-header-inner {
  max-width: var(--pdp-w);
  margin: 0 auto;
  padding: .9rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.pdp-logo {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--navy);
  flex-shrink: 0;
  letter-spacing: -.01em;
}
.pdp-logo span { color: var(--mint); }

.pdp-nav {
  display: flex;
  gap: 1.75rem;
  flex: 1;
}
.pdp-nav a {
  font-size: .875rem;
  font-weight: 500;
  color: var(--gray600);
  transition: color .15s;
  position: relative;
}
.pdp-nav a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 2px;
  background: var(--mint);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform .2s;
}
.pdp-nav a:hover { color: var(--navy); }
.pdp-nav a:hover::after { transform: scaleX(1); }

/* ════════════════════════════════════════════
   BOUTONS
   ════════════════════════════════════════════ */
.pdp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--mint);
  color: var(--white);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: .9rem;
  padding: .75rem 1.6rem;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .25s;
  /* Le bouton portait un halo vert saturé qui débordait largement de sa
     forme — l'effet « néon » des pages SaaS. On lui applique la même
     grammaire qu'aux cartes : une arête claire sur le bord supérieur, une
     ombre de contact, une ombre d'ambiance à peine teintée. Le bouton a du
     volume au lieu de briller. */
  background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 1px 2px rgba(19,53,77,.14),
    0 8px 22px rgba(26,185,119,.22);
  text-decoration: none;
  white-space: nowrap;
}
.pdp-btn-primary:hover {
  background-color: var(--mint-d);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 2px 4px rgba(19,53,77,.14),
    0 14px 32px rgba(26,185,119,.28);
}
.pdp-btn-primary:active { transform: translateY(0); }
.pdp-btn-primary:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }

.pdp-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  color: var(--navy);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: .9rem;
  padding: .73rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--navy);
  cursor: pointer;
  transition: background .2s, color .2s, transform .15s;
  text-decoration: none;
  white-space: nowrap;
}
.pdp-btn-outline:hover {
  background: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
}
.pdp-btn-outline:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

.pdp-btn-outline-light {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  color: var(--white);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: .9rem;
  padding: .73rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 2px solid rgba(255,255,255,.45);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
  text-decoration: none;
  white-space: nowrap;
}
.pdp-btn-outline-light:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.8);
  transform: translateY(-2px);
}
.pdp-btn-outline-light:focus-visible { outline: 3px solid rgba(255,255,255,.6); outline-offset: 3px; }

.pdp-btn-full  { width: 100%; justify-content: center; }
.pdp-btn-lg    { padding: .95rem 2.2rem; font-size: 1rem; }
/* Variante <a> d'un bouton : neutralise le soulignement et la couleur de lien. */
.pdp-btn-link  { text-decoration: none; color: var(--white); }
.pdp-btn-link:hover { color: var(--white); }

/* ════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════ */
.pdp-hero {
  background: var(--white);
  padding: var(--pdp-sec-lg) 0;
}
.pdp-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 5.5rem;
  align-items: start;
}

/* ── Galerie ── */
.pdp-gallery {
  position: sticky;
  top: 90px;
}
.pdp-gallery-main {
  position: relative;
  background: var(--gray50);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  margin-bottom: .9rem;
  box-shadow: var(--shadow-lg);
}
/* Les photos produit sont sombres et vont jusqu'au bord : sans ce liseré
   intérieur, leurs angles arrondis mangeaient le fond blanc et le cadre
   paraissait bavé. Il est posé en superposition pour ne pas dépendre du
   fond de l'image. */
.pdp-gallery-main::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(19,53,77,.08);
  pointer-events: none;
}
.pdp-hero-video,
.pdp-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Photos produit SmartWater : fond studio clair, aucun recadrage */
body.universe-water .pdp-gallery-main,
body.universe-water .pdp-thumb { background: linear-gradient(160deg, #f5fbfd, #e2f0f7); }
body.universe-water .pdp-hero-img,
body.universe-water .pdp-thumb img { object-fit: contain; }

.pdp-gallery-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(23,59,89,.72);
  color: var(--white);
  font-size: .7rem;
  font-weight: 600;
  padding: .28rem .7rem;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  letter-spacing: .03em;
}
.pdp-gallery-badge--play { background: rgba(26,185,119,.82); }

.pdp-gallery-thumbs {
  display: flex;
  gap: .75rem;
}
/* Bordure ramenée de 2 px à 1 px : à côté de photos sombres, un cadre gris
   épais se voyait plus que la vignette qu'il entourait. La sélection ne
   passe plus par l'épaisseur mais par un anneau vert, qui se distingue sans
   déplacer le contenu. */
.pdp-thumb {
  flex: 1;
  background: var(--gray50);
  border:  1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  transition: border-color .2s, box-shadow .2s, transform .25s cubic-bezier(.22,1,.36,1);
  font-size: .68rem;
  font-weight: 500;
  color: var(--gray600);
  padding: .2rem;
}
.pdp-thumb:hover { transform: translateY(-2px); }
.pdp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Rayon intérieur = rayon extérieur moins le cadre (1 px de bordure +
     3 px de retrait) : sans cet écart, les deux arrondis sont concentriques
     et le liseré paraît s'épaissir dans les angles. */
  border-radius: var(--radius-sm);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.pdp-thumb:hover img { transform: scale(1.04); }
.pdp-thumb i { font-size: 1.35rem; color: var(--navy); }
.pdp-thumb--active {
  border-color: var(--mint);
  box-shadow: 0 0 0 3px var(--mint-sm);
}
.pdp-thumb:hover { border-color: var(--mint); }
.pdp-thumb:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }

/* ── Bloc achat ── */
.pdp-buy-block { padding-top: .25rem; }

/* Rangée d'alignement des deux pastilles d'en-tête. Elle n'existe que sur la
   fiche SigenMate ; les 17 fiches SmartWater n'affichent que la pastille de
   catégorie, seule avant le titre. La marge basse reste donc portée par la
   pastille elle-même, et c'est la rangée qui l'annule quand elle la reprend
   à son compte — sinon le titre venait coller au badge sur toutes les pages
   eau. */
.pdp-hero-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.1rem;
}
/* Sélecteur volontairement nommé plutôt que `> *` : à poids égal, c'est la
   règle la plus tardive qui l'emporte, et .pdp-badge-cat est déclarée plus
   bas. La marge restait alors active et décalait la pastille vers le haut,
   puisqu'un conteneur flex centre la boîte de marge, pas la bordure. */
.pdp-hero-badges > .pdp-badge-cat,
.pdp-hero-badges > .pdp-brand-pill { margin-bottom: 0; }

/* Hauteur commune imposée aux deux pastilles plutôt que déduite de leur
   contenu : l'une est remplie par du texte, l'autre par une image, et deux
   contenus de natures différentes ne retombent jamais sur la même hauteur
   par hasard. Le remplissage vertical est donc nul, c'est min-height qui
   fixe le gabarit et le centrage qui place le contenu. */
.pdp-badge-cat,
.pdp-brand-pill {
  min-height: 38px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: var(--radius-pill);
}

.pdp-badge-cat {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--mint-xl);
  color: var(--mint-d);
  font-size: .76rem;
  font-weight: 700;
  padding-left: .95rem;
  padding-right: .95rem;
  border: 1px solid var(--mint-sm);
  letter-spacing: .02em;
  margin-bottom: 1.1rem;
}

.pdp-brand-pill {
  display: inline-flex;
  align-items: center;
  background: var(--white);
  border:  1px solid var(--line);
  padding-left: .8rem;
  padding-right: .9rem;
  box-shadow: var(--shadow-xs);
  gap: .5rem;
}
/* 20 px : en deçà, le mot SIGENERGY du logotype passe sous les 6 px de
   hauteur d'œil et n'est plus déchiffrable — la pastille annonce alors une
   marque qu'on ne peut pas lire. */
.pdp-brand-img { height: 20px; width: auto; object-fit: contain; display: block; }
.pdp-brand-name {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: .75rem;
  font-weight: 700;
  color: var(--gray600);
  letter-spacing: .03em;
}

/* Le nom du produit était plus petit que le prix affiché juste dessous : sur
   une fiche produit, c'est l'objet qu'on vend, pas la remise. Il passe donc
   devant, avec un interlettrage resserré — au-delà de 2,5 rem, l'espacement
   par défaut d'Inter creuse les mots. */
.pdp-product-title {
  font-size: clamp(2.3rem, 3.2vw, 3rem);
  font-weight: 800;
  margin-bottom: .6rem;
  line-height: 1.08;
  letter-spacing: -.033em;
}

/* La pastille de catégorie vit désormais à l'intérieur du H1 (voir le
   commentaire de la fiche produit dans index.tsx : le H1 ne portait aucun
   mot-clé). Ce conteneur ne fait rien d'autre que lui rendre sa ligne — sans
   lui, l'inline-flex de .pdp-badge-cat se colle au nom du modèle sur la même
   ligne de texte. La pastille fixe sa taille de police en rem, elle n'hérite
   donc pas du corps du titre. */
.pdp-h1-cat {
  display: block;
}

.pdp-product-subtitle {
  font-size: 1rem;
  color: var(--gray600);
  margin-bottom: 1.35rem;
  line-height: 1.7;
  max-width: 46ch;
}

.pdp-rating {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.35rem;
}
.pdp-stars { color: var(--gold-rating); font-size: .95rem; letter-spacing: .06em; }
.pdp-rating-count { font-size: .8rem; color: var(--gray600); }
.pdp-rating-sep { color: var(--gray300); font-size: .7rem; }
.pdp-rating-verified {
  font-size: .76rem;
  color: var(--mint-d);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .2rem;
}

.pdp-price-block {
  display: flex;
  align-items: flex-end;
  gap: .4rem;
  margin-bottom: .35rem;
}
.pdp-price {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 2.7rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -.02em;
}
.pdp-price sup { font-size: 1.3rem; vertical-align: super; font-weight: 700; }
/* « À partir de » : le prix affiché est celui de la configuration la plus
   petite, trois sont commandables. La mention est en retrait — elle qualifie
   le chiffre, elle ne doit pas le concurrencer. */
.pdp-price-from {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray400);
  margin-bottom: .55rem;
  align-self: flex-end;
}
.pdp-price-label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--gray400);
  margin-bottom: .3rem;
}
/* La remise était habillée en étiquette de soldes : pastille orange vif sur
   fond ambre, à côté d'un prix barré bien lisible. C'est le signal le plus
   « déstockage » de la page, et il tombait juste sous le nom du produit.
   L'information reste — elle est due au client — mais elle redevient une
   mention, pas une accroche : gris, sans pastille, en retrait du prix. */
.pdp-price-old {
  font-size: .95rem;
  color: var(--gray400);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  margin-bottom: .35rem;
  align-self: center;
}
.pdp-price-save {
  display: inline-block;
  background: none;
  color: var(--gray400);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 0;
  align-self: center;
  margin-bottom: .35rem;
}

.pdp-price-note {
  font-size: .79rem;
  color: var(--gray600);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.pdp-price-note i { color: var(--mint); font-size: .75rem; }

/* ── Variantes ──
   L'intitulé se rapproche de son contrôle (.45rem) et s'éloigne du groupe
   précédent (1rem) : l'écart entre deux rubriques doit rester plus grand
   que l'écart interne à une rubrique, sinon on ne sait plus quel titre
   commande quel champ. C'est ce rapport qui compte, pas les valeurs. */
.pdp-variant-group { margin-bottom: 1rem; }
.pdp-variant-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--gray600);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .45rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
/* Les pictogrammes de ces intitulés (cubes, calques, clé) sont décoratifs :
   ils nomment une rubrique, ils n'indiquent rien. En vert, ils mettaient sur
   le même plan que l'option cochée et le prix — les endroits où le vert dit
   vraiment quelque chose. En gris, l'accent redevient un signal. */
.pdp-variant-label i { color: var(--gray400); }

/* La rangée de trois chiffres de puissance (.pdp-pw) qui se trouvait ici a été
   retirée du bloc d'achat, avec ses styles : elle séparait le prix du choix de
   la réserve et redisait la capacité que le sélecteur ci-dessous fait choisir. */

/* ── Argumentaire de la première étape ──
   Une liste qu'on parcourt, pas qu'on lit : chaque ligne tient sur une ou
   deux lignes et commence par son icône, alignée en colonne. */
.pdp-sell {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.pdp-sell li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--gray600);
}
.pdp-sell li i {
  width: 1.1rem;
  flex-shrink: 0;
  text-align: center;
  color: var(--mint);
  font-size: .85rem;
  margin-top: .18rem;
}

/* ── Batterie d'extension ──
   Présentée comme un article de catalogue : photo, intitulé, prix unitaire et
   compteur. C'est ce que remplace l'ancien choix entre trois totaux, où le
   prix du module n'apparaissait jamais. */
/* Deux rangées et non trois colonnes : la carte vit dans la colonne d'achat,
   large de 500 px environ, où une troisième colonne pour le prix ne laissait
   que 260 px au texte — la ligne de caractéristiques y partait sur trois
   lignes et coupait « charge 1 800 W / décharge 1 200 W » en son milieu. Le
   prix et le compteur descendent donc sur leur propre rangée, ce qui rend au
   texte la pleine largeur et vaut aussi bien sur téléphone. */
.pdp-ext {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
  padding: .9rem;
  border: 2px solid var(--mint);
  border-radius: var(--radius);
  background: var(--white);
}
.pdp-ext-img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--gray50);
}
.pdp-ext-body { min-width: 0; }
.pdp-ext-t {
  font-size: .92rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
  line-height: 1.25;
}
.pdp-ext-s {
  font-size: .76rem;
  color: var(--gray600);
  margin: .22rem 0 0;
  line-height: 1.4;
}
.pdp-ext-note {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .5rem 0 0;
  padding: .3rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .72rem;
  color: var(--gray600);
}
.pdp-ext-note i { color: var(--gray400); }
.pdp-ext-side {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .2rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
}
.pdp-ext-p {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  white-space: nowrap;
}
/* Le montant seul se lisait comme le prix de la configuration : il est celui
   d'un module, et le compteur juste à côté en fait commander plusieurs. */
.pdp-ext-pu {
  font-size: .72rem;
  font-weight: 600;
  color: var(--gray600);
}
/* Le compteur atteint une borne : le bouton devient inerte et le dit. */
.pdp-ext-side .cart-qty-stepper button:disabled,
#pdp-bats-stepper button:disabled { opacity: .35; cursor: default; }

.pdp-ext-tot {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .75rem 0 0;
  font-size: .82rem;
  color: var(--gray600);
}
.pdp-ext-tot i { color: var(--mint); }
.pdp-ext-tot strong { color: var(--navy); font-weight: 800; }

@media (max-width: 560px) {
  /* La photo cède la place au texte : sur téléphone, la ligne de
     caractéristiques est ce qui décide, pas la vignette. */
  .pdp-ext { grid-template-columns: 64px minmax(0, 1fr); gap: .7rem; }
  .pdp-ext-img { width: 64px; height: 64px; }
}

/* ── Configurateur en trois étapes ──────────────────────────────────────
   Sans JavaScript, les trois volets s'affichent à la suite et le fil d'étapes
   est masqué : il n'annoncerait qu'un découpage qui n'a pas lieu. Ce n'est
   qu'une fois la classe --js posée que le bloc devient un pas-à-pas. */
.pdp-stepper { display: none; }

/* Les colonnes sont plafonnées et le fil centré, au lieu de trois fractions
   étirées sur toute la largeur de la carte : à 1fr, chaque étape occupait
   150 px pour un libellé de 50 px, et le trait de liaison faisait à lui seul
   plus du double de la pastille. Le minmax(0, …) laisse les colonnes se
   resserrer d'elles-mêmes quand la carte est plus étroite que 336 px —
   inutile de prévoir une règle mobile. */
.pdp-config--js .pdp-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 112px));
  justify-content: center;
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
}
.pdp-stepper-i { position: relative; min-width: 0; }
/* Le trait de liaison part du centre de la pastille vers celle de droite. Il
   est tracé par l'étape elle-même plutôt que par une bordure du conteneur :
   c'est la seule façon qu'il change de couleur au fur et à mesure. */
.pdp-stepper-i::after {
  content: '';
  position: absolute;
  top: 13px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: var(--gray100);
}
.pdp-stepper-i:last-child::after { display: none; }
.pdp-stepper-i.is-done::after { background: var(--mint); }

.pdp-stepper-i button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--gray400);
}
/* Une étape non atteinte n'est pas grisée « pour faire joli » : elle est
   réellement désactivée côté JS. Le curseur doit le dire avant le clic. */
.pdp-stepper-i button:disabled { cursor: default; }

.pdp-stepper-dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gray100);
  font-size: .78rem;
  font-weight: 800;
  color: var(--gray400);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.pdp-stepper-lab {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.pdp-stepper-i.is-done .pdp-stepper-dot {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--white);
}
.pdp-stepper-i.is-done button { color: var(--gray600); }
.pdp-stepper-i.is-on .pdp-stepper-dot {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.pdp-stepper-i.is-on button { color: var(--navy); }

/* Les volets. Le repli montre tout ; le mode pas-à-pas n'en montre qu'un. */
.pdp-config--js .pdp-pane { display: none; }
.pdp-config--js .pdp-pane.is-on { display: block; }
/* Le volet reçoit le focus au changement d'étape : sans ce retrait, un halo
   de mise au point s'afficherait autour d'un bloc entier, ce qui désigne une
   zone plutôt qu'une commande. Le fil d'étapes, lui, garde le sien. */
.pdp-pane:focus { outline: none; }
.pdp-config--js .pdp-pane.is-on { animation: pdpPaneIn .22s ease both; }
@keyframes pdpPaneIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pdp-config--js .pdp-pane.is-on { animation: none; }
}

/* Pied : le total et l'action, toujours au même endroit d'une étape à
   l'autre — c'est ce qui fait qu'on avance sans chercher le bouton. */
/* Le filet reste plus près de ce qu'il annonce que de ce qu'il clôt : la
   marge au-dessus est un peu supérieure au retrait en dessous, faute de
   quoi il paraîtrait appartenir au bloc précédent. */
.pdp-config-foot {
  margin-top: 1.1rem;
  padding-top: .95rem;
  border-top: 1px solid var(--line);
}
.pdp-config-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.pdp-config-total-lab {
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
}
.pdp-config-total-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.02em;
}
.pdp-config-total-note {
  font-size: .72rem;
  color: var(--gray400);
  margin: .15rem 0 .9rem;
}
.pdp-config-foot .pdp-btn-outline { margin-top: .6rem; }
/* L'attribut hidden ne vaut qu'un display:none de la feuille du navigateur :
   la règle d'auteur qui met les boutons en inline-flex le bat, et « Ajouter au
   panier » restait affiché dès la première étape malgré son hidden. */
.pdp-config-foot [hidden] { display: none; }

/* Récapitulatif de la dernière étape */
.pdp-recap {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pdp-recap-li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem .9rem;
  background: var(--white);
}
.pdp-recap-li + .pdp-recap-li { border-top: 1px solid var(--line); }
.pdp-recap-txt { display: flex; flex-direction: column; min-width: 0; }
.pdp-recap-t {
  font-size: .85rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.pdp-recap-s {
  font-size: .74rem;
  color: var(--gray600);
  line-height: 1.35;
  margin-top: .12rem;
}
.pdp-recap-p {
  font-size: .88rem;
  font-weight: 800;
  color: var(--navy);
  white-space: nowrap;
}
.pdp-recap-p--offert { color: var(--mint); }


/* Le sélecteur de trois packs (.pdp-packs / .pdp-pack) qui se trouvait ici a
   été remplacé par le compteur de modules d'extension : il faisait choisir
   entre trois totaux sans jamais montrer le prix d'un module. Ses styles
   partent avec lui. */

/* Ligne IA. Conteneur en flex : le texte doit rester dans un <span>, sinon
   chaque nœud de texte formerait une colonne. */
.pdp-packs-ai {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: .7rem;
  font-size: .76rem;
  color: var(--gray600);
  line-height: 1.6;
}
.pdp-packs-ai i { color: var(--mint); margin-top: .22rem; flex-shrink: 0; }
.pdp-packs-ai strong { color: var(--navy); font-weight: 700; }
.pdp-packs-ai a { color: var(--mint-d); font-weight: 700; text-decoration: underline; }

/* ── CTAs ── */
.pdp-cta-group {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1.35rem;
}

/* ── Réassurance mini ── */
.pdp-reassurance {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.25rem 1.35rem;
  background: var(--gray50);
  border-radius: var(--radius);
  border:  1px solid var(--line);
}
.pdp-reassurance li {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .83rem;
  color: var(--gray600);
}
/* Largeur fixe pour la colonne d'icônes : les glyphes Font Awesome n'ont pas
   tous la même chasse, si bien que les quatre libellés commençaient à quatre
   abscisses différentes. */
.pdp-reassurance li i { width: 1rem; text-align: center; }
.pdp-reassurance li i { color: var(--gray400); font-size: .78rem; flex-shrink: 0; }
/* Le délai de rétractation renvoie à l'article 7 des CGV, qui donne les
   conditions que la ligne n'a pas la place de porter (état d'origine, frais
   de retour). La règle globale rend les liens invisibles — `color: inherit`,
   pas de soulignement : sans ce rappel, le renvoi n'existerait que pour la
   souris qui passe dessus par hasard. */
.pdp-reassurance li a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gray400);
  text-underline-offset: 2px;
}
.pdp-reassurance li a:hover { color: var(--navy); text-decoration-color: currentColor; }

/* Accroche vers la section tarifs dynamiques (ancre #pdp-dyn) */
.pdp-hero-teaser {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: .9rem;
  padding: .95rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(23,59,89,.14);
  background: linear-gradient(105deg, rgba(23,59,89,.05), rgba(26,185,119,.09));
  text-decoration: none;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.pdp-hero-teaser:hover {
  border-color: rgba(26,185,119,.5);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(23,59,89,.45);
}
.pdp-hero-teaser-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--navy, #173b59);
  color: #fff;
  font-size: .9rem;
}
.pdp-hero-teaser-txt {
  display: block;
  font-size: .79rem;
  line-height: 1.5;
  color: var(--gray600);
}
.pdp-hero-teaser-txt strong {
  display: block;
  font-size: .89rem;
  font-weight: 800;
  color: var(--navy, #173b59);
  margin-bottom: .15rem;
}
.pdp-hero-teaser-arrow {
  flex-shrink: 0;
  color: var(--mint);
  font-size: .85rem;
  transition: transform .25s;
}
.pdp-hero-teaser:hover .pdp-hero-teaser-arrow { transform: translateX(4px); }

/* ════════════════════════════════════════════
   CONTRAINTES D'INSTALLATION
   Quatre profils de logement, en cartes de même hauteur. Fond blanc : la
   section des tarifs dynamiques qui la précède est sombre, et celle des
   bénéfices qui la suit est claire — ce blanc fait la respiration entre les
   deux sans introduire une troisième teinte.
   ════════════════════════════════════════════ */
/* ════════════════════════════════════════════
   TROIS FAÇONS DE LE REMPLIR
   La page racontait trois histoires sans les relier : les panneaux, le
   surplus d'une installation existante, et les heures creuses pour qui n'a
   rien. Présentées séparément, elles se contredisaient — chaque section
   semblait s'adresser à quelqu'un d'autre. Ce bloc les pose comme trois
   entrées d'un même mécanisme, et rappelle que la sortie, elle, est
   toujours la même : effacer les heures pleines.
   ════════════════════════════════════════════ */
.pdp-src {
  background: var(--bg);
  padding: var(--pdp-sec) 0;
}
.pdp-src-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: stretch;
  max-width: 1000px;
  margin: 0 auto;
}
.pdp-src-card {
  background: var(--white);
  border:  1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.5rem;
  box-shadow: var(--shadow-xs);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.pdp-src-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pdp-src-ico {
  width: 46px; height: 46px;
  margin-bottom: 1rem;
  border-radius: var(--radius-ico);
  display: grid; place-items: center;
  background: var(--mint-xl);
  color: var(--mint-d);
  font-size: 1.05rem;
}
.pdp-src-card h3 {
  font-size: 1rem; font-weight: 800; color: var(--navy);
  letter-spacing: -.01em; margin-bottom: .5rem;
}
.pdp-src-card p { font-size: .88rem; color: var(--gray600); line-height: 1.65; }
.pdp-src-card strong { color: var(--navy); font-weight: 700; }
.pdp-src-card a { color: var(--mint-d); font-weight: 600; }

.pdp-src-band {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  max-width: 1000px;
  margin: 1.3rem auto 0;
  padding: 1.15rem 1.5rem;
  background: var(--navy);
  border-radius: var(--radius);
  color: rgba(255,255,255,.82);
  font-size: .9rem;
  line-height: 1.65;
}
.pdp-src-band i { color: var(--mint); flex: 0 0 auto; }
.pdp-src-band strong { color: var(--white); font-weight: 700; }
.pdp-src-band a { color: var(--mint); font-weight: 600; }

/* L'argument qui empêche le module d'extension de passer pour un supplément
   décoratif : la recharge réseau garantit qu'il se remplit toutes les nuits,
   soleil ou pas. Sans cette phrase, un visiteur du Nord pouvait conclure
   qu'un deuxième module resterait vide six mois par an. */
.pdp-src-key {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  max-width: 1000px;
  margin: 1.1rem auto 0;
  font-size: .89rem;
  color: var(--gray600);
  line-height: 1.7;
}
.pdp-src-key i { color: var(--mint); flex: 0 0 auto; }
.pdp-src-key strong { color: var(--navy); font-weight: 700; }

@media (max-width: 900px) {
  .pdp-src-grid { grid-template-columns: 1fr; max-width: 520px; }
}
@media (max-width: 480px) {
  .pdp-src { padding: 3.5rem 0; }
  .pdp-src-card { padding: 1.3rem 1.2rem; }
  .pdp-src-band { padding: 1rem 1.15rem; font-size: .85rem; }
}

.pdp-fit {
  background: var(--white);
  padding: var(--pdp-sec) 0;
}
.pdp-fit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}
.pdp-fit-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(158deg, var(--white), #f4f8fb);
  border:  1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1.4rem;
  box-shadow: var(--shadow-xs);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .3s;
}
.pdp-fit-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--mint-sm);
}
/* La carte « aucun panneau » est le cas que la section vient défendre : elle
   est tenue en avant par la bordure et le fond, pas par une pastille de
   plus — les trois autres profils restent des réponses légitimes. */
.pdp-fit-card--hl {
  background: linear-gradient(158deg, var(--mint-xl), var(--white));
  border-color: var(--mint-sm);
}
.pdp-fit-ico {
  width: 46px; height: 46px;
  margin-bottom: 1rem;
  border-radius: var(--radius-ico);
  display: grid; place-items: center;
  font-size: 1.15rem;
  color: var(--mint-d);
  background: linear-gradient(150deg, var(--mint-sm), var(--mint-xl));
  border: 1px solid var(--mint-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.pdp-fit-card h3 {
  font-size: 1rem; font-weight: 800; color: var(--navy);
  letter-spacing: -.01em; margin-bottom: .5rem;
}
.pdp-fit-card p {
  font-size: .87rem; color: var(--gray600); line-height: 1.65;
}
.pdp-fit-card strong { color: var(--navy); font-weight: 700; }

/* Bandeau de faits : ce qui reste vrai quel que soit le profil. */
.pdp-fit-facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 1100px;
  margin: 1.1rem auto 0;
  background: var(--gray100);
  border:  1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.pdp-fit-facts li {
  display: flex; align-items: center; gap: .6rem;
  background: var(--white);
  padding: .95rem 1.1rem;
  font-size: .82rem; color: var(--gray600); line-height: 1.45;
}
.pdp-fit-facts i { color: var(--mint); flex-shrink: 0; }

/* Réserve sur les autorisations. Conteneur en flex : le texte doit être
   enveloppé dans un <span>, sinon chaque nœud de texte forme une colonne. */
.pdp-fit-foot {
  display: flex; align-items: flex-start; gap: .5rem;
  max-width: 780px; margin: 1.6rem auto 0;
  font-size: .8rem; color: var(--gray400); line-height: 1.65;
}
.pdp-fit-foot i { color: var(--mint); margin-top: .25rem; flex-shrink: 0; }
.pdp-fit-foot strong { color: var(--gray600); font-weight: 700; }
.pdp-fit-foot a { color: var(--mint-d); font-weight: 700; text-decoration: underline; }

@media (max-width: 1000px) {
  .pdp-fit-grid,
  .pdp-fit-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .pdp-fit { padding: 3rem 0; }
  .pdp-fit-grid { grid-template-columns: 1fr; gap: .9rem; }
  .pdp-fit-facts { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   BANDEAU CHIFFRES-CLÉS
   ════════════════════════════════════════════ */
.pdp-kpi-bar {
  background: var(--navy);
  padding: var(--pdp-sec-sm) 0 1.5rem;
  position: relative;
  overflow: hidden;
}
.pdp-kpi-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(26,185,119,.07) 0%, transparent 65%);
  pointer-events: none;
}
.pdp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative;
}
.pdp-kpi {
  padding: 1rem .5rem;
  border-right: 1px solid rgba(255,255,255,.07);
}
.pdp-kpi:last-child { border-right: none; }

.pdp-kpi-val {
  display: block;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--mint);
  line-height: 1.1;
  margin-bottom: .4rem;
  letter-spacing: -.02em;
}
.pdp-kpi-val sup { font-size: .95rem; color: rgba(26,185,119,.65); vertical-align: super; }
.pdp-kpi-lbl {
  display: block;
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  font-weight: 500;
  line-height: 1.4;
}
.pdp-kpi-footnote {
  font-size: .72rem;
  color: rgba(255,255,255,.35);
  text-align: center;
  padding-bottom: .5rem;
  position: relative;
  line-height: 1.6;
}

/* ════════════════════════════════════════════
   SECTIONS BÉNÉFICES ALTERNÉES
   ════════════════════════════════════════════ */
.pdp-benefits {
  background: var(--white);
  padding: var(--pdp-sec-lg) 0;
}

.pdp-benefit-row {
  max-width: var(--pdp-w);
  margin: 0 auto 4rem;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.pdp-benefit-row:last-child { margin-bottom: 0; }

/* Bloc pleine largeur intercalé entre deux rangées de bénéfices (tableau
   d'autonomie). Il n'a pas de style propre : il emprunte la grille de la
   fiche technique et l'encadré mint. Seul l'espacement est à reprendre, pour
   qu'il respire comme une rangée de bénéfices et non comme une carte
   collée à la précédente. */
.pdp-autonomy { margin-bottom: 4rem; }

/* Alternance gauche/droite par direction RTL */
.pdp-benefit-row--reverse { direction: rtl; }
.pdp-benefit-row--reverse > * { direction: ltr; }

/* 3/2 et non 4/3. Ces quatre visuels sont les plus hauts éléments de la
   page : en 4/3 sur une colonne de 596 px ils font 447 px chacun, soit 100
   à 160 px de plus que le texte qu'ils illustrent — la colonne de droite se
   termine bien avant l'image et on scrolle dans du vide. En 3/2 ils tombent
   à 397 px, à hauteur du texte, et la page perd 200 px. L'élargissement du
   conteneur à 1320 px les avait mécaniquement fait grandir de 53 px chacun ;
   ce format le rattrape. */
.pdp-benefit-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 3/2;
  position: relative;
}
.pdp-benefit-img::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px rgba(19,53,77,.06);
  pointer-events: none;
}
.pdp-benefit-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.pdp-benefit-img:hover img { transform: scale(1.04); }

.pdp-benefit-num {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
}
.pdp-benefit-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: var(--mint-xl);
  border: 1.5px solid var(--mint-sm);
  color: var(--mint-d);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: .8rem;
  font-weight: 800;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.pdp-benefit-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--mint-d);
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .9rem;
}
.pdp-benefit-label i { font-size: .8rem; }
.pdp-benefit-label--light { color: rgba(26,185,119,.88); }

.pdp-benefit-text h2 {
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: .9rem;
  line-height: 1.22;
  letter-spacing: -.02em;
}
.pdp-benefit-text > p {
  font-size: .94rem;
  color: var(--gray600);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.pdp-benefit-checks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.pdp-benefit-checks li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--gray800);
  line-height: 1.5;
}
.pdp-benefit-checks li i {
  color: var(--mint);
  font-size: .8rem;
  flex-shrink: 0;
  margin-top: .2rem;
}

/* ════════════════════════════════════════════
   VIDÉO DE PRÉSENTATION
   Section sombre, entre le bandeau de chiffres et les tarifs dynamiques qui
   le sont aussi : la vidéo s'insère dans la bande foncée plutôt que de la
   couper. Une image sur fond clair paraîtrait délavée.
   ════════════════════════════════════════════ */
.pdp-video {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-d) 100%);
  padding: var(--pdp-sec-sm) 0 var(--pdp-sec);
}
.pdp-video-header h2 { color: var(--white); }
.pdp-video-header p { color: rgba(255,255,255,.62); }
.pdp-video-box {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--dark-950, #0a1c2b);
  box-shadow: 0 24px 60px rgba(0,0,0,.38);
}
.pdp-video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: none;
  display: grid;
  place-items: center;
}
.pdp-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* L'affiche est assombrie pour que le bouton de lecture reste lisible quel
     que soit le cadre — elle sert de fond, pas d'illustration. */
  filter: brightness(.72);
  transition: filter .35s, transform .5s cubic-bezier(.22,1,.36,1);
}
.pdp-video-facade:hover .pdp-video-poster { filter: brightness(.82); transform: scale(1.03); }
.pdp-video-play {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: var(--white);
  background: var(--mint);
  box-shadow: 0 10px 30px rgba(26,185,119,.45);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
  /* Le triangle de lecture est optiquement décentré : on le décale. */
  padding-left: 5px;
}
.pdp-video-facade:hover .pdp-video-play {
  transform: scale(1.08);
  box-shadow: 0 14px 40px rgba(26,185,119,.6);
}
.pdp-video-facade:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.pdp-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Conteneur en flex : le texte reste dans un <span>, sinon chaque nœud de
   texte deviendrait une colonne. */
.pdp-video-note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  max-width: 760px;
  margin: 1.3rem auto 0;
  font-size: .78rem;
  color: rgba(255,255,255,.5);
  line-height: 1.65;
}
.pdp-video-note i { color: var(--mint); margin-top: .25rem; flex-shrink: 0; }
.pdp-video-note strong { color: rgba(255,255,255,.8); font-weight: 700; }

@media (max-width: 620px) {
  .pdp-video { padding: 3.5rem 0 4rem; }
  .pdp-video-play { width: 60px; height: 60px; font-size: 1.15rem; }
}

/* ════════════════════════════════════════════
   LES DEUX APPAREILS
   Même fond que la fiche technique qui suit : les deux sections répondent à
   la même question, une seule zone claire les regroupe. Un filet les sépare
   sans introduire une troisième teinte.
   ════════════════════════════════════════════ */
.pdp-units {
  background: var(--bg);
  padding: var(--pdp-sec) 0 var(--pdp-sec-sm);
  border-bottom: 1px solid var(--gray100);
}
.pdp-units-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
  align-items: stretch;
  max-width: 1000px;
  margin: 0 auto;
}
.pdp-unit {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border:  1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  box-shadow: var(--shadow-xs);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .3s;
}
.pdp-unit:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--mint-sm);
}
/* L'unité principale est celle qu'on achète : c'est elle qui porte l'accent.
   Le module reste neutre — le mettre au même niveau ferait croire qu'il faut
   choisir entre les deux, alors que l'un ne va pas sans l'autre. */
.pdp-unit--main { border-color: var(--mint-sm); }
.pdp-unit-head {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--gray100);
}
.pdp-unit-role {
  display: inline-block;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mint-d);
  background: var(--mint-xl);
  border: 1px solid var(--mint-sm);
  border-radius: var(--radius-pill);
  padding: .22rem .6rem;
  margin-bottom: .7rem;
}
.pdp-unit-role--opt {
  color: var(--gray400);
  background: var(--gray50);
  border-color: var(--gray300);
}
.pdp-unit-head h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.pdp-unit-tag {
  font-size: .84rem;
  color: var(--gray600);
  margin-top: .25rem;
}
.pdp-unit-tag em { font-style: normal; font-weight: 800; color: var(--mint-d); }
.pdp-unit-lede {
  font-size: .88rem;
  color: var(--gray600);
  line-height: 1.7;
  margin-bottom: 1.2rem;
}
.pdp-unit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-top: auto;
}
/* Chaque puce est une ligne de flex : le texte doit rester enveloppé dans un
   <span>, sinon chaque nœud de texte deviendrait une colonne à part. */
.pdp-unit-list li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .84rem;
  color: var(--gray600);
  line-height: 1.6;
}
.pdp-unit-list i {
  color: var(--mint);
  font-size: .8rem;
  margin-top: .28rem;
  flex-shrink: 0;
  width: 15px;
  text-align: center;
}
.pdp-unit-list strong { color: var(--navy); font-weight: 700; }

/* Encadré parallèle : lève la confusion entre autonomie et puissance. */
.pdp-units-note {
  max-width: 1000px;
  margin: 1.6rem auto 0;
  background: var(--white);
  border:  1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.8rem;
}
.pdp-units-note h3 {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .95rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: .6rem;
}
.pdp-units-note h3 i { color: var(--mint); font-size: .85rem; }
.pdp-units-note p {
  font-size: .85rem;
  color: var(--gray600);
  line-height: 1.7;
}
.pdp-units-note strong { color: var(--navy); font-weight: 700; }
.pdp-units-par {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 1.1rem 0;
  background: var(--gray100);
  border:  1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pdp-units-par li {
  background: var(--gray50);
  padding: .9rem 1rem;
  text-align: center;
}
.pdp-units-par-n {
  display: block;
  font-size: .74rem;
  color: var(--gray400);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pdp-units-par-v {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  margin-top: .2rem;
  letter-spacing: -.02em;
}
.pdp-units-par-foot {
  font-size: .8rem !important;
  color: var(--gray400) !important;
}
.pdp-units-par-foot a { color: var(--mint-d); font-weight: 700; text-decoration: underline; }

@media (max-width: 860px) {
  .pdp-units { padding: 3rem 0 2.75rem; }
  .pdp-units-grid { grid-template-columns: 1fr; gap: 1rem; max-width: 520px; }
  .pdp-unit { padding: 1.6rem 1.4rem; }
}
@media (max-width: 520px) {
  .pdp-units-par { grid-template-columns: 1fr; }
  .pdp-units-note { padding: 1.4rem 1.2rem; }
}

/* ════════════════════════════════════════════
   BLOC CARACTÉRISTIQUES TECHNIQUES
   ════════════════════════════════════════════ */
.pdp-specs {
  background: var(--bg);
  padding: var(--pdp-sec) 0;
}
.pdp-section-header {
  text-align: center;
  margin-bottom: 2.1rem;
}
.pdp-section-header h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-top: .55rem;
  letter-spacing: -.02em;
}
.pdp-section-header p {
  font-size: .92rem;
  color: var(--gray600);
  margin-top: .6rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.pdp-specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--gray100);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 2rem;
}
/* Ces cellules ne se soulèvent pas au survol, contrairement aux autres cartes
   de la page : elles forment un tableau dont les filets sont le fond gris
   laissé apparent par un `gap: 1px`. Décaler une cellule déchirerait le filet
   et laisserait voir la doublure. Le relief se limite donc au dégradé. */
.pdp-spec-item {
  background: linear-gradient(158deg, var(--white), #f7fafc);
  padding: 1.2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  transition: background .15s;
}
.pdp-spec-item:hover { background: var(--mint-xl); }
.pdp-spec-icon { color: var(--mint); font-size: .85rem; margin-bottom: .1rem; }
.pdp-spec-key {
  font-size: .73rem;
  font-weight: 600;
  color: var(--gray400);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pdp-spec-val {
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}

/* ── TABLEAU COMPARATIF EC 2700 / BAT 2700 ──
   Deux colonnes plutôt qu'une grille à plat : la question du visiteur n'est
   pas « quelles sont les specs » mais « qu'est-ce que j'ai en plus si
   j'ajoute un module ». Un tableau répond en une lecture horizontale. */
.pdp-tbl-wrap {
  background: var(--white);
  border:  1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.pdp-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.pdp-tbl caption {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pdp-tbl thead th {
  background: var(--gray50);
  padding: 1.1rem 1.25rem;
  text-align: left;
  vertical-align: bottom;
  border-bottom: 2px solid var(--gray100);
}
.pdp-tbl thead td { background: var(--gray50); border-bottom: 2px solid var(--gray100); }
.pdp-tbl-unit {
  display: block;
  font-size: .98rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.01em;
}
.pdp-tbl-sub {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  color: var(--gray400);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .15rem;
}
/* La colonne de l'unité principale est celle qu'on achète en premier : elle
   porte l'accent, l'autre reste neutre. */
.pdp-tbl thead th.pdp-tbl-main { background: var(--mint-xl); border-bottom-color: var(--mint); }
.pdp-tbl tbody td.pdp-tbl-main { background: rgba(26,185,119,.04); }
.pdp-tbl tbody th {
  text-align: left;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray600);
  padding: .9rem 1.25rem;
  white-space: nowrap;
}
.pdp-tbl tbody td {
  padding: .9rem 1.25rem;
  color: var(--navy);
  line-height: 1.45;
  vertical-align: top;
}
.pdp-tbl tbody td strong { font-weight: 800; }
.pdp-tbl tbody tr + tr th,
.pdp-tbl tbody tr + tr td { border-top: 1px solid var(--gray100); }
.pdp-tbl-note { font-size: .78rem; color: var(--gray400); font-weight: 500; }
.pdp-tbl-na { color: var(--gray400); font-size: .86rem; }

.pdp-tbl-common {
  background: var(--white);
  border:  1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-xs);
}
.pdp-tbl-common h3 {
  font-size: .76rem;
  font-weight: 700;
  color: var(--gray400);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .9rem;
}
.pdp-tbl-common ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem 1.4rem;
}
.pdp-tbl-common li {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  font-size: .9rem;
  color: var(--gray600);
}
.pdp-tbl-common li i { color: var(--mint); font-size: .82rem; flex: 0 0 auto; }
.pdp-tbl-common li strong { color: var(--navy); font-weight: 700; }

/* En dessous de 820 px, trois colonnes ne tiennent plus : chaque ligne
   devient une carte et les deux valeurs s'empilent, chacune réétiquetée avec
   le nom du boîtier — l'en-tête du tableau n'est plus là pour le dire. */
@media (max-width: 820px) {
  .pdp-tbl-wrap { border: 0; background: none; box-shadow: none; overflow: visible; }
  .pdp-tbl thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .pdp-tbl, .pdp-tbl tbody, .pdp-tbl tr, .pdp-tbl th, .pdp-tbl td { display: block; }
  .pdp-tbl tbody tr {
    background: var(--white);
    border:  1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .85rem 1.05rem;
    margin-bottom: .55rem;
    box-shadow: var(--shadow-xs);
  }
  .pdp-tbl tbody th {
    padding: 0 0 .5rem;
    white-space: normal;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .7rem;
  }
  /* La valeur est enveloppée dans un span : en flex, chaque nœud texte nu
     deviendrait un élément flexible à part, et « 2 688 Wh par module » se
     serait scindé en deux morceaux poussés aux deux bouts de la ligne. */
  .pdp-tbl tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .45rem 0;
    text-align: right;
  }
  .pdp-tbl tbody td > span { flex: 1 1 auto; }
  .pdp-tbl tbody td.pdp-tbl-main { background: none; }
  .pdp-tbl tbody td::before {
    content: attr(data-l);
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 600;
    color: var(--gray400);
    text-align: left;
  }
  .pdp-tbl tbody tr + tr th,
  .pdp-tbl tbody tr + tr td { border-top: 0; }
  .pdp-tbl tbody td + td { border-top: 1px dashed var(--gray100); }
  .pdp-tbl-common ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pdp-tbl-common { padding: 1.1rem 1.15rem; }
  .pdp-tbl-common ul { grid-template-columns: 1fr; }
}

.pdp-specs-dl {
  display: flex;
  justify-content: center;
}

/* ── TROIS CONFIGURATIONS ──
   Le sélecteur du bloc d'achat est en haut de page ; qui a lu la fiche
   technique en entier est à 10 000 px de là. Cette section reprend les mêmes
   trois configurations, nommées cette fois par l'objectif du client et non
   par leur capacité — on n'achète pas 5 376 Wh, on achète une soirée. */
.pdp-configs {
  padding: var(--pdp-sec) 0;
  background: var(--bg);
  border-top: 1px solid var(--gray100);
}
.pdp-configs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  align-items: stretch;
}
.pdp-config {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border:  1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-xs);
  transition: transform .18s, box-shadow .18s;
}
.pdp-config:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pdp-config--hl {
  border: 2px solid var(--mint);
  box-shadow: var(--shadow);
  padding-top: 2.1rem;
}
.pdp-config-flag {
  position: absolute;
  top: -.72rem;
  left: 1.4rem;
  background: var(--mint);
  color: var(--white);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .28rem .7rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
/* « Le système », « + 1 module », « + 2 modules ». Sans ce libellé les trois
   cartes se lisaient comme trois produits concurrents, et le module
   d'extension passait pour un supplément facultatif au lieu d'un étage. */
.pdp-config-step {
  font-size: .7rem;
  font-weight: 700;
  color: var(--mint-d);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .35rem;
}
.pdp-config-goal {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin-bottom: .5rem;
}
.pdp-config-cap {
  font-size: .88rem;
  color: var(--gray600);
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px dashed var(--gray100);
}
.pdp-config-cap strong { color: var(--mint-d); font-weight: 800; }
.pdp-config-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1.4rem;
  flex: 1 1 auto;
}
.pdp-config-list li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: .87rem;
  color: var(--gray600);
  line-height: 1.5;
}
.pdp-config-list li i { color: var(--mint); font-size: .78rem; flex: 0 0 auto; }
.pdp-config-list li strong { color: var(--navy); font-weight: 700; }
.pdp-config-price {
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}
.pdp-config-price span { font-size: .78rem; font-weight: 600; color: var(--gray400); letter-spacing: 0; }
.pdp-config-btn { width: 100%; justify-content: center; }

.pdp-configs-foot {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  max-width: 720px;
  margin: 1.8rem auto 0;
  font-size: .85rem;
  color: var(--gray600);
  line-height: 1.6;
}
.pdp-configs-foot i { color: var(--mint); flex: 0 0 auto; }
.pdp-configs-foot a { color: var(--mint-d); font-weight: 600; }

@media (max-width: 900px) {
  .pdp-configs-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  /* La pastille dépasse en haut de la carte : sans cette marge, elle
     chevaucherait la carte précédente une fois les cartes empilées. */
  .pdp-config--hl { margin-top: .8rem; }
}
@media (max-width: 480px) {
  .pdp-configs { padding: 3.5rem 0; }
  .pdp-config { padding: 1.3rem 1.15rem; }
  .pdp-config--hl { padding-top: 1.9rem; }
}

.pdp-simple-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--mint-xl);
  border: 1px solid var(--mint-sm);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-bottom: 1.5rem;
}
.pdp-simple-callout i { color: var(--mint); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
.pdp-simple-callout p { font-size: .92rem; color: var(--navy); line-height: 1.6; margin: 0; }
.pdp-simple-callout strong { font-weight: 700; }

.pdp-spec-note {
  font-size: .78rem;
  font-weight: 400;
  font-style: italic;
  color: var(--gray400);
  line-height: 1.4;
}

/* ════════════════════════════════════════════
   VISIO D'ACCOMPAGNEMENT
   Le fond gris sépare la section de la mise en service et de la FAQ, toutes
   deux blanches. Tout le reste emprunte la grammaire des cartes de service :
   même carte claire, même pastille d'icône mint, même ombre.
   Cette section ne porte pas d'agenda — la réservation vit sur la page de
   confirmation de commande, habillée par style.css (.conf-rdv).
   ════════════════════════════════════════════ */
.pdp-rdv {
  background: var(--bg);
  padding: var(--pdp-sec) 0;
}

/* Les trois étapes. Numéros en pastille plutôt qu'en liste ordonnée native :
   la puce du navigateur ne se met pas à la taille des titres et casse
   l'alignement des cartes. D'où list-style:none et un compteur écrit à la
   main dans le balisage, tout en gardant un <ol> pour l'ordre. */
.pdp-rdv-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto 1.75rem;
}
.pdp-rdv-step {
  background: var(--white);
  border:  1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: 1.6rem 1.4rem;
}
.pdp-rdv-step-num {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  margin-bottom: .9rem;
  border-radius: 50%;
  font-size: .95rem; font-weight: 800;
  color: var(--white);
  background: linear-gradient(140deg, var(--mint), var(--mint-d));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.pdp-rdv-step h3 {
  font-size: .98rem; font-weight: 800; color: var(--navy);
  letter-spacing: -.01em; margin-bottom: .35rem;
}
.pdp-rdv-step p {
  font-size: .87rem; color: var(--gray600); line-height: 1.6;
}

/* Périmètre de la visio, en deux colonnes. Le « non » n'est pas mis en rouge
   ni en encadré d'alerte : ce n'est pas un avertissement, c'est une
   orientation vers le pack vidéo. Il est simplement tenu en gris à côté du
   vert, pour qu'on lise les deux et non l'un contre l'autre. */
.pdp-rdv-scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  max-width: 900px;
  margin: 0 auto 1.75rem;
  background: var(--gray100);
  border:  1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.pdp-rdv-scope-col { background: var(--white); padding: 1.5rem 1.6rem; }
.pdp-rdv-scope-col--no { background: linear-gradient(158deg, var(--white), #f4f7fa); }
.pdp-rdv-scope-col h3 {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 700; color: var(--navy);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: .9rem;
}
.pdp-rdv-scope-col--yes h3 i { color: var(--mint); }
.pdp-rdv-scope-col--no  h3 i { color: var(--gray400); }
.pdp-rdv-scope-col ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.pdp-rdv-scope-col li {
  position: relative; padding-left: 1rem;
  font-size: .88rem; color: var(--gray600); line-height: 1.55;
}
.pdp-rdv-scope-col li::before {
  content: ''; position: absolute; left: 0; top: .5rem;
  width: 5px; height: 5px; border-radius: 50%; background: var(--mint);
}
.pdp-rdv-scope-col--no p {
  font-size: .88rem; color: var(--gray600); line-height: 1.6; margin-bottom: .7rem;
}
.pdp-rdv-scope-col--no p:last-child { margin-bottom: 0; }
.pdp-rdv-scope-col--no strong { color: var(--navy); font-weight: 700; }
.pdp-rdv-scope-col--no a { color: var(--mint-d); font-weight: 700; text-decoration: underline; }

.pdp-rdv-box {
  max-width: 900px;
  margin: 0 auto;
  background: linear-gradient(158deg, var(--white), #f2f7fa);
  border:  1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.pdp-rdv-invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1.75rem;
}
.pdp-rdv-invite-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(--mint-d);
  background: linear-gradient(150deg, var(--mint-sm), var(--mint-xl));
  border: 1px solid var(--mint-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.pdp-rdv-invite h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.01em;
}
.pdp-rdv-invite > p {
  font-size: .92rem;
  color: var(--gray600);
  line-height: 1.65;
  margin: .5rem 0 1.6rem;
  max-width: 420px;
}

/* Avertissement tiers : il doit être lisible sans arrêter le regard, puisque
   c'est le bouton qu'on vient chercher ici. D'où le corps réduit et le gris
   moyen, mais aucun repli derrière un lien « en savoir plus » : le visiteur
   doit savoir ce qu'il déclenche avant de cliquer, pas après. */
.pdp-rdv-note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  max-width: 520px;
  margin: 1.4rem auto 0;
  font-size: .78rem;
  color: var(--gray400);
  line-height: 1.6;
  text-align: left;
}
.pdp-rdv-note i { color: var(--mint); margin-top: .2rem; flex-shrink: 0; }
.pdp-rdv-note strong { color: var(--gray600); font-weight: 700; }
.pdp-rdv-note a { color: var(--mint-d); font-weight: 700; text-decoration: underline; }

@media (max-width: 768px) {
  .pdp-rdv { padding: 3rem 0; }
  .pdp-rdv-steps { grid-template-columns: 1fr; gap: .9rem; }
  .pdp-rdv-scope { grid-template-columns: 1fr; }
  .pdp-rdv-invite { padding: 2.25rem 1.25rem; }
}

/* ════════════════════════════════════════════
   FAQ ACCORDÉON
   ════════════════════════════════════════════ */
.pdp-faq {
  background: var(--white);
  padding: var(--pdp-sec) 0;
}
.pdp-faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Pas de soulèvement ici non plus : une question qu'on survole avant de la
   déplier bougerait deux fois, une fois sous le curseur puis une fois en
   s'ouvrant. L'ombre suffit à détacher la carte du fond blanc. */
.pdp-faq-item {
  background: linear-gradient(158deg, var(--white), var(--bg));
  border-radius: var(--radius);
  border: 1.5px solid var(--gray100);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: border-color .2s, box-shadow .25s;
}
.pdp-faq-item:hover { border-color: var(--gray300); box-shadow: var(--shadow); }
.pdp-faq-item.open { border-color: var(--mint); box-shadow: var(--shadow); }

.pdp-faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 20px 22px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color .15s;
}
.pdp-faq-q:hover { color: var(--mint-d); }
.pdp-faq-q:focus-visible { outline: 3px solid var(--mint); outline-offset: -3px; border-radius: var(--radius); }

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

.pdp-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
}
.pdp-faq-item.open .pdp-faq-a { grid-template-rows: 1fr; }
.pdp-faq-a > div { overflow: hidden; }
.pdp-faq-a > div > p {
  padding: 0 22px 20px;
  font-size: .92rem;
  color: var(--gray600);
  line-height: 1.8;
}

/* ════════════════════════════════════════════
   CTA FINAL
   ════════════════════════════════════════════ */
.pdp-cta-final {
  background: var(--navy);
  padding: var(--pdp-sec) 0;
  position: relative;
  overflow: hidden;
}
.pdp-cta-final::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,185,119,.08) 0%, transparent 70%);
  top: -200px; right: -100px;
  pointer-events: none;
}
.pdp-cta-final::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,185,119,.05) 0%, transparent 70%);
  bottom: -150px; left: -100px;
  pointer-events: none;
}
.pdp-cta-final-inner {
  text-align: center;
  position: relative;
  z-index: 1;
}
.pdp-cta-final-inner h2 {
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--white);
  margin: .8rem 0 .9rem;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.pdp-cta-final-inner > p {
  color: rgba(255,255,255,.65);
  font-size: .95rem;
  margin-bottom: 2.25rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.75;
}
.pdp-cta-final-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.pdp-cta-final-trust {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.pdp-cta-trust-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  color: rgba(255,255,255,.5);
}
.pdp-cta-trust-item i { color: var(--mint); font-size: .75rem; }

/* ════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════ */
.pdp-footer {
  background: var(--navy-d);
  padding: var(--pdp-sec-sm) 0 1.75rem;
  border-top: 1px solid rgba(255,255,255,.05);
}
.pdp-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}
.pdp-footer .pdp-logo { font-size: 1.55rem; }
.pdp-footer-slogan {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--mint);
  letter-spacing: .02em;
}
.pdp-footer-sub {
  font-size: .82rem;
  color: rgba(255,255,255,.45);
}
.pdp-footer-divider {
  width: 40px;
  height: 2px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
}
.pdp-footer-links {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.pdp-footer-links a {
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  transition: color .15s;
}
.pdp-footer-links a:hover { color: var(--mint); }
.pdp-footer-legal {
  font-size: .7rem;
  color: rgba(255,255,255,.28);
  max-width: 560px;
  line-height: 1.65;
  margin-top: .25rem;
}

/* ════════════════════════════════════════════
   STICKY BUY BAR (mobile)
   ════════════════════════════════════════════ */
.pdp-sticky-buy {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-top: 1px solid var(--gray100);
  box-shadow: 0 -4px 24px rgba(19,53,77,.12);
  padding: .9rem 1.25rem;
  z-index: 800;
  gap: .75rem;
  align-items: center;
}
.pdp-sticky-buy-info {
  flex: 1;
  min-width: 0;
}
.pdp-sticky-buy-name {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: .875rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdp-sticky-buy-price {
  font-size: .82rem;
  color: var(--gray600);
}
.pdp-sticky-buy-price strong {
  color: var(--mint-d);
  font-weight: 700;
}

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .pdp-hero-grid { gap: 3rem; }
  .pdp-benefit-row { gap: 3rem; }
  .pdp-kpi-grid { grid-template-columns: repeat(2,1fr); }
  .pdp-kpi { border-right: none; }
  .pdp-specs-grid { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 768px) {
  .pdp-nav { display: none; }

  .pdp-hero { padding: 2.5rem 0 3.5rem; }
  .pdp-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .pdp-gallery { position: static; }

  .pdp-product-title { font-size: 1.65rem; }
  .pdp-price { font-size: 2.1rem; }

  .pdp-benefits { padding: 3.25rem 0; }
  .pdp-benefit-row {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
  }
  .pdp-benefit-row--reverse { direction: ltr; }
  .pdp-benefit-text h2 { font-size: 1.4rem; }

  .pdp-specs-grid { grid-template-columns: repeat(2,1fr); }

  .pdp-kpi-val { font-size: 1.6rem; }
  .pdp-cta-final-inner h2 { font-size: 1.65rem; }

  .pdp-topbar-sep { display: none; }
  .pdp-topbar span {
    background: rgba(255,255,255,.06);
    border-radius: var(--radius-pill);
    padding: .2rem .6rem;
  }

  .pdp-sticky-buy { display: flex; }
  body { padding-bottom: 72px; }
}

@media (max-width: 480px) {
  .pdp-specs-grid { grid-template-columns: 1fr 1fr; }
  .pdp-kpi-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .pdp-cta-final-btns { flex-direction: column; align-items: stretch; max-width: 320px; margin: 0 auto; }
  .pdp-btn-lg { width: 100%; justify-content: center; }
  .pdp-product-title { font-size: 1.45rem; }
  .pdp-price { font-size: 1.9rem; }
  .pdp-benefit-text h2 { font-size: 1.25rem; }
  .pdp-cta-final-inner h2 { font-size: 1.4rem; }
  .pdp-section-header h2 { font-size: 1.5rem; }
  .pdp-gallery-thumbs { gap: .5rem; }
}

/* ════════════════════════════════════════════
   TARIFS DYNAMIQUES — bloc pédagogique (fond navy)
   ════════════════════════════════════════════ */
.pdp-dyn {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(26,185,119,.14), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(0,102,204,.16), transparent 55%),
    linear-gradient(180deg, var(--navy-d) 0%, var(--dark-950, #0a1c2b) 100%);
  color: var(--white);
  padding: var(--pdp-sec) 0;
  /* Cible d'ancre depuis l'accueil (/sigenmate#pdp-dyn) : le saut natif du
     navigateur ignore l'offset appliqué par initSmoothScroll aux clics internes,
     la navbar fixe masquerait sinon le haut de la section. */
  scroll-margin-top: var(--nav-h, 76px);
}
.pdp-dyn-inner { max-width: var(--pdp-w); margin: 0 auto; padding: 0 1.5rem; }

.pdp-dyn-header { text-align: center; max-width: 720px; margin: 0 auto 2.25rem; }
.pdp-dyn-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--dyn-grad-1); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  background: rgba(61,219,149,.1); border: 1px solid rgba(61,219,149,.28);
  padding: 7px 16px; border-radius: var(--radius-pill); margin-bottom: 1.1rem;
}
.pdp-dyn-header h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.35rem); font-weight: 800;
  line-height: 1.2; letter-spacing: -.02em; margin-bottom: 1rem; color: var(--white);
}
.pdp-dyn-hl {
  background: linear-gradient(100deg, var(--dyn-grad-1), var(--dyn-grad-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pdp-dyn-header > p { font-size: 1.02rem; color: rgba(255,255,255,.72); line-height: 1.7; }

/* Chiffres chocs */
.pdp-dyn-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: .9rem;
}
/* Attribution des chiffres de marché : ils viennent du constructeur, pas de nous. */
.pdp-dyn-stats-src {
  font-size: .76rem; color: rgba(255,255,255,.42); text-align: center; margin-bottom: 2.5rem;
}
.pdp-dyn-stats-src strong { color: rgba(255,255,255,.62); font-weight: 700; }

/* Seul bloc sombre de la page : il reçoit la grammaire des cartes SmartWater
   telle quelle — dégradé depuis le haut-gauche, arête claire sur le bord
   supérieur, ombre portée dessous. L'aplat uniforme précédent laissait la
   carte flotter sans épaisseur sur le fond navy. */
.pdp-dyn-stat {
  background: linear-gradient(158deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md); padding: 1.6rem 1.5rem; text-align: center;
  box-shadow: 0 16px 36px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.09);
  transition: border-color .25s, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.pdp-dyn-stat:hover {
  border-color: rgba(61,219,149,.4);
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.14);
}
.pdp-dyn-stat-num {
  display: block; font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(100deg, var(--dyn-grad-1), var(--dyn-grad-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: .6rem;
}
.pdp-dyn-stat-lbl { font-size: .86rem; color: rgba(255,255,255,.68); line-height: 1.55; }
.pdp-dyn-stat-lbl strong { color: var(--white); font-weight: 700; }

/* Explication + schéma */
.pdp-dyn-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 2.5rem;
}
.pdp-dyn-explain h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: 1rem; color: var(--white); letter-spacing: -.01em; }
.pdp-dyn-explain > p { font-size: .95rem; color: rgba(255,255,255,.74); line-height: 1.8; margin-bottom: 1rem; }
.pdp-dyn-explain strong { color: var(--white); }
.pdp-dyn-explain em { color: var(--dyn-grad-1); font-style: normal; font-weight: 600; }
.pdp-dyn-callout {
  display: flex; gap: .8rem; align-items: flex-start;
  background: rgba(61,219,149,.08); border-left: 3px solid var(--dyn-grad-1);
  border-radius: var(--radius-sm); padding: 1rem 1.2rem; margin-top: 1.4rem;
}
.pdp-dyn-callout i { color: var(--dyn-grad-1); font-size: 1.05rem; margin-top: .15rem; flex-shrink: 0; }
.pdp-dyn-callout p { font-size: .9rem; color: rgba(255,255,255,.85); line-height: 1.6; margin: 0; }
.pdp-dyn-callout strong { color: var(--white); }

/* Visualisation / mini-graphe */
.pdp-dyn-viz {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg); padding: 1.6rem 1.6rem 1.4rem;
}
.pdp-dyn-viz-title {
  display: block; font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: rgba(255,255,255,.55); margin-bottom: 1.2rem;
}
.pdp-dyn-chart { margin-bottom: 1.1rem; }
.pdp-dyn-bars {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: .5rem; height: 150px; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
.pdp-dyn-bar {
  position: relative; flex: 1; height: var(--h);
  background: linear-gradient(180deg, rgba(53,198,244,.55), rgba(53,198,244,.2));
  border-radius: 6px 6px 0 0; min-height: 8px;
  transition: filter .2s;
}
.pdp-dyn-bar--low {
  background: linear-gradient(180deg, var(--dyn-grad-1), rgba(61,219,149,.35));
  box-shadow: 0 0 18px rgba(61,219,149,.5);
}
.pdp-dyn-bar--peak {
  background: linear-gradient(180deg, #ff7a59, rgba(255,122,89,.35));
  box-shadow: 0 0 18px rgba(255,122,89,.4);
}
.pdp-dyn-bar-t {
  position: absolute; bottom: -1.4rem; left: 50%; transform: translateX(-50%);
  font-size: .62rem; color: rgba(255,255,255,.5); white-space: nowrap;
}
.pdp-dyn-legend { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.6rem; }
.pdp-dyn-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.85);
}
.pdp-dyn-tag i { font-size: .7rem; width: 16px; text-align: center; }
.pdp-dyn-tag--low i { color: var(--dyn-grad-1); }
.pdp-dyn-tag--peak i { color: #ff7a59; }
.pdp-dyn-viz-note { font-size: .84rem; color: rgba(255,255,255,.6); line-height: 1.6; margin: 0; }

/* ── Encart partenaire Sobry ──────────────────────────────────────
   Volontairement discret. Il reprend la surface des autres blocs de la
   section — le même voile clair posé sur le navy que .pdp-dyn-viz — et
   n'emprunte à Sobry que la couleur de son nom et du bouton. La version
   précédente, carte orange pleine largeur à fond dégradé, ramassait toute
   l'attention de la section sur un partenaire alors que la page vend le
   SigenMate.

   Le bouton reste en contour et non en aplat : dans cette section, le seul
   bouton plein doit être « Configurer mon SigenMate ». Deux aplats de
   couleur à quelques centimètres l'un de l'autre feraient hésiter sur
   lequel est l'action principale.

   La marge basse sépare l'encart de la bande CTA qui suit : collés, les
   deux blocs formeraient une seule zone d'appel à l'action. */
.pdp-sobry {
  --sobry: #e8703a;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "body  side"
    "facts facts";
  column-gap: 2.5rem; row-gap: 1.5rem;
  align-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg); padding: 1.85rem 2.1rem;
  margin-bottom: 2rem;
}
.pdp-sobry-body { grid-area: body; }
.pdp-sobry-facts { grid-area: facts; }
.pdp-sobry-side { grid-area: side; }
.pdp-sobry-id { display: flex; align-items: center; gap: .75rem; margin: 0 0 .8rem; }
.pdp-sobry-tag {
  font-size: .67rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.4);
}
/* Le mot « sobry » du logo est noir : posé directement sur le navy de la
   section, il serait illisible. La pastille claire le rend visible sans
   toucher au fichier du partenaire — un filtre CSS pour le passer en blanc
   emporterait aussi l'orange du sigle. */
.pdp-sobry-chip {
  display: inline-flex; align-items: center;
  background: var(--white); border-radius: var(--radius-pill);
  padding: 7px 14px;
}
.pdp-sobry-img { height: 17px; width: auto; display: block; }

.pdp-sobry-lede {
  font-size: .92rem; color: rgba(255,255,255,.74); line-height: 1.7;
  margin: 0; max-width: 66ch;
}
.pdp-sobry-lede strong { color: var(--white); font-weight: 700; }

/* Quatre pastilles de largeur égale sur une seule ligne. La grille à quatre
   colonnes fixes est délibérée : en flex avec wrap, « Sans marge sur le kWh »
   basculait à la ligne suivante dès que la fenêtre se resserrait un peu, et
   les quatre arguments ne se lisaient plus d'un bloc. */
.pdp-sobry-facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem;
}
.pdp-sobry-facts li {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: .75rem .65rem;
  font-size: .82rem; font-weight: 600; line-height: 1.3;
  color: rgba(255,255,255,.9); text-align: center;
}
.pdp-sobry-facts li i { font-size: .72rem; flex-shrink: 0; color: var(--sobry); }

.pdp-sobry-side { text-align: right; }
.pdp-sobry-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: transparent; color: var(--sobry);
  border: 1px solid rgba(232,112,58,.5);
  padding: 11px 20px; border-radius: var(--radius-pill);
  font-size: .87rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.pdp-sobry-btn i { font-size: .74rem; }
.pdp-sobry-btn:hover { background: var(--sobry); border-color: var(--sobry); color: #fff; }
.pdp-sobry-fine { display: block; margin-top: .6rem; font-size: .7rem; color: rgba(255,255,255,.35); }

@media (max-width: 900px) {
  .pdp-sobry {
    grid-template-columns: 1fr;
    grid-template-areas: "body" "facts" "side";
    row-gap: 1.35rem; padding: 1.55rem 1.4rem;
  }
  /* Deux colonnes plutôt que quatre : à cette largeur, quatre pastilles
     côte à côte tomberaient à deux ou trois lignes de texte chacune. */
  .pdp-sobry-facts { grid-template-columns: repeat(2, 1fr); }
  .pdp-sobry-side { text-align: left; }
  .pdp-sobry-btn { width: 100%; }
}
@media (max-width: 420px) {
  .pdp-sobry-facts { grid-template-columns: 1fr; }
  .pdp-sobry-facts li { justify-content: flex-start; text-align: left; padding: .65rem .85rem; }
}

/* Bande CTA finale */
.pdp-dyn-cta-band {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; align-items: center;
  background: linear-gradient(120deg, rgba(26,185,119,.12), rgba(0,102,204,.12));
  border: 1px solid rgba(61,219,149,.25); border-radius: var(--radius-lg); padding: 2.5rem;
}
.pdp-dyn-cta-text h3 { font-size: 1.45rem; font-weight: 800; color: var(--white); margin-bottom: .8rem; letter-spacing: -.01em; }
.pdp-dyn-cta-text > p { font-size: .92rem; color: rgba(255,255,255,.75); line-height: 1.75; margin-bottom: 1.2rem; }
.pdp-dyn-cta-text strong { color: var(--white); }
.pdp-dyn-cta-band .pdp-benefit-checks li { color: rgba(255,255,255,.9); }
.pdp-dyn-cta-band .pdp-benefit-checks li i { color: var(--dyn-grad-1); }
.pdp-dyn-cta-action { text-align: center; }
.pdp-dyn-cta-figure { margin-bottom: 1.1rem; line-height: 1.2; }
.pdp-dyn-cta-figure span { display: block; font-size: .8rem; color: rgba(255,255,255,.6); }
.pdp-dyn-cta-figure strong {
  display: block; font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; margin: .1rem 0;
  background: linear-gradient(100deg, var(--dyn-grad-1), var(--dyn-grad-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pdp-dyn-cta-action .pdp-btn-primary { width: 100%; }
.pdp-dyn-cta-fine { display: block; font-size: .68rem; color: rgba(255,255,255,.45); margin-top: .8rem; line-height: 1.4; }

/* Responsive */
@media (max-width: 900px) {
  .pdp-dyn-grid { grid-template-columns: 1fr; gap: 2rem; }
  .pdp-dyn-cta-band { grid-template-columns: 1fr; gap: 1.8rem; }
}
@media (max-width: 680px) {
  .pdp-dyn-stats { grid-template-columns: 1fr; }
  .pdp-dyn { padding: 3rem 0; }
  .pdp-dyn-cta-band { padding: 1.8rem; }
}

/* ═══════════════════════════════════════════════════════════
   OPTIMISATION MOBILE — page produit SigenMate
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Cibles tactiles */
  .pdp-btn-primary,
  .pdp-btn-outline,
  .pdp-btn-full { min-height: 48px; }
  .pdp-nav-link, .nav-back { min-height: 44px; display: inline-flex; align-items: center; }

  /* Champs / sélecteurs d'options assez grands */
  .pdp-option-btn { min-height: 46px; }

  /* Titres qui s'adaptent */
  .pdp-benefit-text h2 { font-size: 1.4rem; }
  .pdp-dyn-header h2 { font-size: clamp(1.5rem, 6.5vw, 1.9rem); }

  /* Empêche le zoom iOS sur les champs */
  .pdp-buy-block input,
  .pdp-buy-block select { font-size: 16px; }
}

/* cf. style.css : sous 420px le nowrap des CTA fait déborder la grille produit */
@media (max-width: 420px) {
  .pdp-btn-primary,
  .pdp-btn-outline,
  .pdp-btn-outline-light { white-space: normal; text-align: center; padding-left: 1rem; padding-right: 1rem; }
}

/* Bloc tarifs dynamiques : graphe + CTA en mobile */
@media (max-width: 680px) {
  .pdp-dyn-bars { height: 120px; gap: .35rem; }
  .pdp-dyn-bar-t { font-size: .55rem; }
  .pdp-dyn-cta-figure strong { font-size: 2rem; }
  .pdp-dyn-viz { padding: 1.2rem; }
  .pdp-dyn-stat-num { font-size: 1.8rem; }
}

/* ════════════════════════════════════════════
   OPTION PAYANTE DU BLOC D'ACHAT
   La case à cocher native est masquée mais reste dans le flux et focusable :
   c'est elle qui porte l'état et le clavier. Le carré visible est le `mark`,
   piloté par `:checked` sur le frère précédent.
   ════════════════════════════════════════════ */
.pdp-opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  background: linear-gradient(158deg, var(--white), #f4f8fb);
  border: 2px solid var(--gray100);
  border-radius: var(--radius-sm);
  padding: .85rem .95rem;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color .2s, box-shadow .3s, background .2s;
}
.pdp-opt:hover { border-color: var(--mint); }

/* `opacity: 0` plutôt que `display: none` : une case masquée par `display`
   sort de l'ordre de tabulation et devient inatteignable au clavier. */
.pdp-opt-input {
  position: absolute;
  width: 20px; height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.pdp-opt-mark {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: .15rem;
  border: 2px solid var(--gray300);
  border-radius: 6px;
  background: var(--white);
  display: grid;
  place-items: center;
  color: var(--white);
  font-size: .62rem;
  transition: background .18s, border-color .18s, transform .18s;
}
.pdp-opt-mark i { opacity: 0; transition: opacity .15s; }
.pdp-opt-input:checked + .pdp-opt-mark {
  background: var(--mint);
  border-color: var(--mint);
}
.pdp-opt-input:checked + .pdp-opt-mark i { opacity: 1; }
.pdp-opt-input:focus-visible + .pdp-opt-mark {
  outline: 3px solid var(--mint);
  outline-offset: 2px;
}
.pdp-opt:has(.pdp-opt-input:checked) {
  border-color: var(--mint);
  background: var(--mint-xl);
  box-shadow: 0 0 0 3px var(--mint-sm), var(--shadow-xs);
}

.pdp-opt-text { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.pdp-opt-title { font-size: .875rem; font-weight: 700; color: var(--navy); line-height: 1.3; }
.pdp-opt-sub { font-size: .76rem; color: var(--gray600); line-height: 1.5; }
.pdp-opt-price {
  flex-shrink: 0;
  font-size: .875rem;
  font-weight: 800;
  color: var(--mint-d);
  white-space: nowrap;
  margin-top: .1rem;
}
/* Deux lignes de service empilées : l'acquise puis la payante. */
.pdp-opt + .pdp-opt { margin-top: .55rem; }

/* Ligne acquise. Placée après `.pdp-opt:hover`, à égalité de spécificité
   (0,2,0) : c'est l'ordre du fichier qui la fait gagner, pas son poids.
   `cursor: default` parce qu'il n'y a rien à cliquer — un curseur main sur
   une ligne inerte promet une interaction qui n'existe pas. */
.pdp-opt--acquis {
  cursor: default;
  border-color: var(--mint-sm);
  background: linear-gradient(158deg, var(--white), var(--mint-xl));
}
.pdp-opt--acquis:hover { border-color: var(--mint-sm); }
/* Pastille ronde, pas carrée. Une fois l'option payante cochée, les deux
   lignes affichaient la même coche verte dans le même carré : la ligne
   offerte semblait décochable. Le disque est le signe de l'acquis, le carré
   celui du choix — la forme distingue ce que la couleur ne distingue plus. */
.pdp-opt-mark--acquis {
  background: var(--mint);
  border-color: var(--mint);
  border-radius: 50%;
}
.pdp-opt-mark--acquis i { opacity: 1; }

/* Le vert disait « gratuit » sur la ligne offerte et « 250 € » sur la ligne
   payante : la même couleur pour un cadeau et pour un supplément. Le montant
   passe en navy, le vert reste réservé à ce qui ne coûte rien. */
.pdp-opt-price--payant { color: var(--navy); }

/* ════════════════════════════════════════════
   MISE EN SERVICE ACCOMPAGNÉE
   Section prise en sandwich entre deux blocs — caractéristiques (gris) puis
   FAQ (blanc). Un aplat blanc de plus l'aurait soudée à la FAQ ; le lavis
   mint en haut lui donne sa propre assise sans introduire une quatrième
   couleur de fond dans la page.
   ════════════════════════════════════════════ */
.pdp-serv {
  background:
    radial-gradient(900px 320px at 50% 0%, var(--mint-xl), transparent 70%),
    var(--white);
  padding: var(--pdp-sec) 0;
}

.pdp-serv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
  align-items: stretch;
  max-width: 1000px;
  margin: 0 auto;
}

/* Même grammaire que les étapes des pages SmartWater : dégradé orienté depuis
   le haut-gauche, ombre portée dessous, soulèvement au survol. Pas de
   rotation — le texte d'une carte doit se lire d'aplomb. */
.pdp-serv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(158deg, var(--white), #f2f7fa);
  border:  1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.35rem 1.5rem;
  box-shadow: var(--shadow);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .3s;
}
.pdp-serv-card:hover {
  transform: translateY(-8px);
  border-color: var(--mint);
  box-shadow: var(--shadow-lg);
}
/* La seule carte payante est aussi la seule cerclée : le regard doit pouvoir
   séparer d'un coup d'œil ce qui vient avec l'appareil de ce qui s'achète. */
.pdp-serv-card--paid {
  border-color: var(--mint-sm);
  background: linear-gradient(158deg, var(--white), var(--mint-xl));
}

.pdp-serv-n {
  position: absolute;
  top: -13px; left: 50%; transform: translateX(-50%);
  width: 27px; height: 27px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--white);
  font-size: .78rem; font-weight: 800;
  display: grid; place-items: center;
  /* L'anneau reprend le fond de la section pour détacher la pastille du
     bord de la carte qu'elle chevauche. */
  box-shadow: 0 0 0 4px var(--white), 0 4px 14px var(--mint-sm);
}

.pdp-serv-ico {
  width: 58px; height: 58px;
  margin: .35rem 0 1rem;
  border-radius: var(--radius-ico);
  display: grid; place-items: center;
  font-size: 1.4rem;
  color: var(--mint-d);
  background: linear-gradient(150deg, var(--mint-sm), var(--mint-xl));
  border: 1px solid var(--mint-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.pdp-serv-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
  margin-bottom: .5rem;
}
.pdp-serv-card p {
  font-size: .84rem;
  line-height: 1.65;
  color: var(--gray600);
}
/* `margin-top: auto` colle l'étiquette au bas de la carte : les trois
   descriptions n'ont pas la même longueur, et sans cela les étiquettes
   flottaient à trois hauteurs différentes sur une rangée de cartes égales. */
.pdp-serv-tag {
  display: inline-block;
  margin-top: auto;
  padding-top: .95rem;
  font-size: .7rem;
  font-weight: 700;
  color: var(--mint-d);
}
/* Pas de `margin-top` ici : la valeur fixe que portait cette règle annulait
   le `auto` ci-dessus, et la pastille payante se retrouvait 12 px plus haut
   que les deux étiquettes voisines — le défaut même que le `auto` corrige. */
.pdp-serv-tag--paid {
  color: var(--navy);
  background: var(--mint-sm);
  border-radius: var(--radius-pill);
  padding: .28rem .75rem;
}

.pdp-serv-foot {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: .55rem;
  max-width: 720px;
  margin: 2.25rem auto 0;
  font-size: .84rem;
  color: var(--gray600);
  line-height: 1.6;
  text-align: center;
}
.pdp-serv-foot i { color: var(--mint); font-size: .85rem; margin-top: .25rem; flex-shrink: 0; }
.pdp-serv-foot a { color: var(--mint-d); font-weight: 700; text-decoration: underline; }

@media (max-width: 860px) {
  .pdp-serv-grid { grid-template-columns: 1fr; gap: 2rem; max-width: 460px; }
  .pdp-serv { padding: 3rem 0; }
}

/* Le soulèvement est un agrément, pas une information : on le retire quand
   l'utilisateur a demandé moins d'animation. */
@media (prefers-reduced-motion: reduce) {
  .pdp-serv-card,
  .pdp-dyn-stat,
  .pdp-unit { transition: box-shadow .01ms, border-color .01ms; }
  .pdp-serv-card:hover,
  .pdp-dyn-stat:hover,
  .pdp-unit:hover { transform: none; }
}