/* ============================================================
   PULSAR VOLT — page PRODUITS
   ------------------------------------------------------------
   Cette feuille se charge APRÈS css/style.css et ne fait que
   compléter le système existant : mêmes variables de couleur,
   mêmes 7 espacements, mêmes 6 tailles de texte, mêmes rayons.
   Aucune couleur nouvelle n'est inventée ici.

   Toutes les classes commencent par « pv- » pour ne jamais
   entrer en conflit avec le reste du site.
   ============================================================ */

:root {
  /* Une seule courbe d'accélération pour toute la page. */
  --pv-courbe: cubic-bezier(0.32, 0.72, 0, 1);
  /* Hauteur réservée à la barre du site + la sous-navigation. */
  --pv-haut-nav: 78px;
  --pv-haut-total: 146px;
}


/* ============================================================
   1. APPARITIONS AU DÉFILEMENT
   ------------------------------------------------------------
   🔴 Le contenu n'est masqué QUE si le navigateur exécute du
   JavaScript ET que les animations sont autorisées. Sans JS,
   ou en « mouvement réduit », la page s'affiche telle quelle :
   elle ne peut jamais rester blanche.
   ============================================================ */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .pv-rev {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--pv-courbe), transform 0.7s var(--pv-courbe);
    transition-delay: var(--pv-d, 0s);
  }
  .pv-rev.vu { opacity: 1; transform: none; }
}


/* ============================================================
   2. STRUCTURE GÉNÉRALE
   ============================================================ */
.pv-sec { padding: var(--e6) var(--e4); }
.pv-sec-gris { background: var(--gris-05); }

/* Les ancres visées par la sous-navigation doivent s'arrêter
   sous les deux barres fixes. */
.pv-gamme, #m600, #eclairage-appoint { scroll-margin-top: var(--pv-haut-total); }

.pv-lead {
  margin-top: var(--e3);
  max-width: 40em;
  color: var(--encre-2);
  font-size: var(--t-lead);
  line-height: 1.6;
}
.pv-lead + .pv-lead { margin-top: var(--e2); }


/* ============================================================
   3. OUVERTURE DE PAGE
   ============================================================ */
.pv-tete {
  padding: calc(var(--e6) + var(--e5)) var(--e4) var(--e6);
  text-align: center;
  background: var(--blanc);
}
.pv-tete-in { max-width: 780px; margin: 0 auto; }
.pv-tete-logo { width: min(300px, 62vw); margin: 0 auto var(--e4); }
.pv-tete .sur-titre { margin-bottom: var(--e2); }
.pv-tete h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); line-height: 1.04; letter-spacing: -0.035em; }
.pv-tete-sous {
  margin: var(--e3) auto 0;
  max-width: 32em;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--encre-2);
}
.pv-tete-actions { margin-top: var(--e4); }

.pv-tete-photo {
  margin: var(--e5) auto 0;
  max-width: 1140px;
  border-radius: var(--r-carte);
  overflow: hidden;
  background: var(--gris-05);
}
.pv-tete-photo img {
  width: 100%;
  aspect-ratio: 16 / 9;              /* 16/7,5 coupait la moitié de la machine */
  object-fit: cover;
  object-position: center 52%;
}
@media (max-width: 700px) {
  .pv-tete-photo img { aspect-ratio: 4 / 3; }
}


/* ============================================================
   4. SOUS-NAVIGATION COLLANTE
   ============================================================ */
.pv-sousnav {
  position: sticky;
  top: var(--pv-haut-nav);
  z-index: 60;
  padding: 0 var(--e3);
  pointer-events: none;   /* seul le rail intérieur reçoit les clics */
}
.pv-sousnav-in {
  pointer-events: auto;
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: 6px 6px 6px var(--e3);
  border: 1px solid var(--trait);
  border-radius: var(--r-pilule);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  backdrop-filter: saturate(150%) blur(18px);
  box-shadow: var(--ombre);
}
.pv-sousnav-marque {
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--encre-2);
  white-space: nowrap;
}
.pv-onglets {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.pv-onglets > a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--e3);
  border-radius: var(--r-pilule);
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--encre-2);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.pv-onglets > a:hover { color: var(--encre); }
.pv-onglets > a.actif { color: var(--encre); }

/* Le repère qui glisse d'un onglet à l'autre. */
.pv-repere {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  border-radius: var(--r-pilule);
  background: var(--gris-10);
  opacity: 0;
  transform: translateX(0);
  transition: transform 0.55s var(--pv-courbe),
              width 0.55s var(--pv-courbe),
              opacity 0.3s ease;
}
.pv-repere.visible { opacity: 1; }

.pv-sousnav-devis {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--e3);
  border-radius: var(--r-pilule);
  background: var(--btn-fond);
  color: var(--btn-texte);
  font-size: var(--t-petit);
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.pv-sousnav-devis:hover { opacity: 0.85; }

/* Le repère au clavier : l'onglet visé doit se voir. */
.pv-onglets > a:focus-visible {
  outline: 2px solid var(--or-texte);
  outline-offset: -2px;
}


/* ============================================================
   4 bis. LE CHANGEMENT D'ONGLET
   ------------------------------------------------------------
   🔴 Une gamme n'est masquée QUE par l'attribut « hidden », et cet
   attribut n'est posé que par js/produits.js. Sans JavaScript,
   aucune règle ici ne cache quoi que ce soit : les trois gammes
   restent affichées l'une sous l'autre, dans l'ordre.

   L'apparition est volontairement discrète : la gamme se révèle en
   fondu, et seule son ouverture monte légèrement. On n'anime PAS la
   gamme entière en « transform » : elle contient l'image fixe de la
   démonstration M600, et un « transform » sur un parent casserait
   son « position: sticky ».
   ============================================================ */
.pv-gamme[hidden] { display: none; }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .pv-gamme.pv-entre { animation: pv-onglet-fondu 0.5s var(--pv-courbe) both; }
  .pv-gamme.pv-entre > .pv-ouverture {
    animation: pv-onglet-monte 0.75s var(--pv-courbe) both;
  }
}
@keyframes pv-onglet-fondu {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pv-onglet-monte {
  from { transform: translateY(16px); }
  to   { transform: none; }
}


/* ============================================================
   5. OUVERTURE D'UNE GAMME
   ============================================================ */
.pv-ouverture { padding-bottom: var(--e5); }
.pv-ouverture-in { max-width: 760px; margin: 0 auto; text-align: center; }
.pv-ouverture-in .pv-lead { margin-left: auto; margin-right: auto; }
.pv-gamme-logo { height: 58px; width: auto; margin: 0 auto var(--e4); }
.pv-ouverture h2 {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.pv-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  margin-bottom: var(--e3);
  padding: 5px 14px;
  border-radius: var(--r-pilule);
  background: var(--gris-10);
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--encre-2);
}
.pv-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--or);
}

/* La bande d'image pleine largeur : le « grand moment » de chaque gamme. */
.pv-bande {
  width: 100%;
  overflow: hidden;
  background: var(--gris-05);
}
/* Chaque bande porte son propre point de visée dans le HTML
   (`style="--ph-pos: center 70%"`), parce qu'une valeur unique ne
   peut pas convenir à des photos de formats aussi différents :
   la station en plein air fait 1,47 de large, la lampe 1,05, et
   dans les deux cas le sujet est en BAS de l'image. Une visée au
   centre leur coupait les pieds. */
.pv-bande img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--ph-pos, center 45%);
  display: block;
}
.pv-bande-large img { aspect-ratio: 1282 / 414; max-height: 480px; }
/* 2,5/1 coupait trop : panneau-pliable fait 1,47 et la lampe de chevet 1,05. */
.pv-bande-moyen img { aspect-ratio: 2 / 1; max-height: 560px; }
@media (max-width: 700px) {
  .pv-bande-large img, .pv-bande-moyen img { aspect-ratio: 3 / 2; }
}


/* Sur la gamme solaire, le liseré du mot mis en avant passe au bleu :
   c'est la couleur de cette gamme dans tout le site. */
#solaire .accent {
  background-image: linear-gradient(var(--bleu), var(--bleu));
}


/* ============================================================
   6. L'ÉCHELLE DES PUISSANCES
   ============================================================ */
.pv-echelle-sec { padding-top: var(--e6); }
.pv-echelle-tete { max-width: 620px; margin: 0 0 var(--e5); }
.pv-echelle-tete h3 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.025em; }

.pv-rail-cadre {
  padding: var(--e4) var(--e3) var(--e3);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  background: var(--blanc);
}

/* Sans JavaScript, le rail n'aurait aucun effet : on ne l'affiche pas
   et les 11 fiches restent toutes visibles en dessous. */
.pv-rail { display: none; }
@media (scripting: enabled) {
  .pv-rail {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: var(--e1);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

.pv-cran,
.pv-cran-fin {
  flex: 1 0 auto;
  min-width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e1);
  padding: var(--e2) 4px var(--e1);
  border: none;
  background: none;
  font: inherit;
  color: var(--encre-2);
  cursor: pointer;
  scroll-snap-align: center;
  border-radius: var(--r-petit);
  transition: color 0.25s ease, background 0.25s ease;
}
.pv-cran-fin { cursor: default; flex: 0 0 auto; min-width: 74px; }

.pv-cran-barre {
  display: block;
  width: 100%;
  max-width: 30px;
  height: var(--h, 40px);
  border-radius: 3px 3px 0 0;
  background: var(--gris-10);
  transition: background 0.3s ease, transform 0.45s var(--pv-courbe);
  transform-origin: bottom center;
}
.pv-cran-fin .pv-cran-barre {
  height: 124px;
  background: repeating-linear-gradient(
    to bottom,
    var(--gris-10) 0 6px,
    transparent 6px 12px
  );
}
.pv-cran-nb {
  font-size: var(--t-petit);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pv-cran-fin .pv-cran-nb { color: var(--encre-2); font-weight: 400; }

.pv-cran:hover { color: var(--encre); }
.pv-cran:hover .pv-cran-barre { background: #d5d9df; }
.pv-cran.actif { color: var(--encre); }
.pv-cran.actif .pv-cran-barre { background: var(--or); transform: scaleY(1.06); }
.pv-cran:focus-visible { outline: 2px solid var(--or-texte); outline-offset: 2px; }

.pv-rail-legende {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  margin-top: var(--e2);
  padding-top: var(--e2);
  border-top: 1px solid var(--trait);
  font-size: var(--t-petit);
  color: var(--encre-2);
}
.pv-rail-unite { font-weight: 600; color: var(--encre); }

/* --- Les fiches de puissance --- */
.pv-panneaux { margin-top: var(--e3); }

.pv-panneau {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e4);
  align-items: center;
  padding: var(--e4);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  background: var(--blanc);
}

/* ⚠️ Ce bloc doit rester APRÈS la règle ci-dessus : à spécificité
   égale, c'est la dernière écrite qui gagne. Avec JavaScript, une
   seule fiche est visible ; sans JavaScript, les onze restent là. */
@media (scripting: enabled) {
  .pv-panneau { display: none; }
  .pv-panneau.actif { display: grid; }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .pv-panneau.actif { animation: pv-entre 0.5s var(--pv-courbe) both; }
}
@keyframes pv-entre {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.pv-panneau + .pv-panneau { margin-top: var(--e3); }
.pv-panneau:focus-visible { outline: 2px solid var(--or-texte); outline-offset: 3px; }
.pv-panneau-photo {
  border-radius: var(--r-petit);
  overflow: hidden;
  background: var(--gris-05);
}
.pv-panneau-photo img {
  width: 100%; aspect-ratio: 4 / 3;
  object-fit: contain; padding: var(--e3); box-sizing: border-box;
}
.pv-panneau-photo.pv-scene img { object-fit: cover; padding: 0; }
.pv-panneau-nb { display: flex; align-items: baseline; gap: 6px; }
.pv-panneau-nb b {
  font-size: clamp(2.75rem, 6vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.pv-panneau-nb span { font-size: var(--t-lead); font-weight: 600; color: var(--encre-2); }
.pv-panneau-desc {
  margin: var(--e2) 0 var(--e3);
  color: var(--encre-2);
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: 26em;
}
.pv-panneau .pv-specs { margin-bottom: var(--e3); }

.pv-echelle-pied {
  margin-top: var(--e3);
  font-size: var(--t-petit);
  color: var(--encre-2);
}


/* ============================================================
   7. LISTES DE CARACTÉRISTIQUES
   ============================================================ */
.pv-specs { margin: 0; font-size: var(--t-petit); }
.pv-specs > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  padding: 5px 0;
}
.pv-specs dt { color: var(--encre-2); flex: 0 0 auto; }
.pv-specs dd { margin: 0; text-align: right; line-height: 1.45; }
.pv-specs > div + div { border-top: 1px solid rgba(226, 229, 234, 0.6); }

.pv-specs-empile > div { display: block; padding: 7px 0; }
.pv-specs-empile dt { margin-bottom: 1px; }
.pv-specs-empile dd { text-align: left; }


/* ============================================================
   8. CARTES PRODUIT
   ============================================================ */
.pv-titre-simple { margin-bottom: var(--e5); }
.pv-titre-simple h3 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.025em; }

.pv-cartes { display: grid; gap: var(--e3); align-items: stretch; }
.pv-cartes-3 { grid-template-columns: repeat(3, 1fr); }
.pv-cartes-large { grid-template-columns: repeat(2, 1fr); }
.pv-cartes-bento { grid-template-columns: repeat(2, 1fr); }
.pv-cartes-bento > .pv-carte-vedette { grid-column: 1 / -1; }

.pv-carte {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  transition: transform 0.5s var(--pv-courbe),
              box-shadow 0.5s var(--pv-courbe),
              border-color 0.3s ease;
}
/* Le détail qui se révèle au survol : un liseré doré qui se trace. */
.pv-carte::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--pv-courbe);
  pointer-events: none;
}
.pv-carte-bleu::after { background: var(--bleu); }

/* ══════════════ LES PHOTOS ══════════════
   Deux natures de photo, deux traitements. C'est la règle à retenir :

   - PHOTO DE PRODUIT (le produit détouré sur fond de studio) :
     « contain ». Le produit se voit ENTIER, quel que soit son format
     d'origine — un panneau solaire fait 2,56 de large, un groupe fait
     1,33 : les enfermer dans le même cadre en « cover » les coupait.
     Le cadre garde une hauteur régulière pour que les cartes s'alignent,
     et c'est l'image qui s'adapte au cadre.

   - PHOTO D'AMBIANCE (une scène, un lieu, des gens) : « cover ».
     Une scène supporte le recadrage. Ces conteneurs portent la classe
     « pv-scene » dans le HTML.

   Trois réglages se posent photo par photo, dans le HTML :
     --ph-pos    le point de visée d'une scène (« 78% center »),
                 quand le sujet n'est pas au milieu de l'image ;
     --ph-marge  la marge autour d'un produit détouré ;
     .pv-photo-blanc  pour un produit détouré sur fond BLANC PUR :
                 le cadre passe au blanc, et la photo n'a plus de
                 bord visible. Sur fond gris, on voyait un rectangle
                 blanc flotter au milieu de la carte.
   ══════════════════════════════════════════ */
.pv-photo { overflow: hidden; background: var(--gris-05); }
.pv-photo-blanc { background: var(--blanc); }
.pv-photo img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;               /* le cadre : le même pour toute une rangée */
  object-fit: contain;               /* produit vu en entier */
  object-position: var(--ph-pos, center);
  padding: var(--ph-marge, var(--e3));
  box-sizing: border-box;
  transition: transform 0.9s var(--pv-courbe);
}
.pv-photo.pv-scene img {
  object-fit: cover;                 /* scène : le recadrage est permis */
  padding: 0;
}

@media (hover: hover) {
  .pv-carte:hover { transform: translateY(-5px); box-shadow: var(--ombre); border-color: #cfd4db; }
  .pv-carte:hover::after { transform: scaleX(1); }
  /* en « contain » l'image ne remplit pas le cadre : on l'agrandit moins,
     sinon le produit semble sortir de sa boîte. */
  .pv-carte:hover .pv-photo img { transform: scale(1.03); }
  .pv-carte:hover .pv-photo.pv-scene img { transform: scale(1.05); }
  .pv-carte:hover .pv-fleche { transform: translateX(4px); }
}
.pv-carte:focus-within { border-color: #cfd4db; }
.pv-carte:focus-within::after { transform: scaleX(1); }

.pv-carte-corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--e3);
}
.pv-carte-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  margin-bottom: var(--e2);
}
.pv-carte-logo { height: 32px; width: auto; }
.pv-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pilule);
  background: var(--gris-10);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--encre-2);
  white-space: nowrap;
}
.pv-tag-bleu { background: rgba(31, 168, 255, 0.12); color: var(--bleu-texte); }

.pv-carte h4 { font-size: var(--t-sous); font-weight: 600; letter-spacing: -0.02em; }
.pv-carte-nb {
  margin: 2px 0 var(--e2);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--or-texte);
}
.pv-carte-nb-bleu { color: var(--bleu-texte); }

.pv-note {
  margin-top: var(--e3);
  padding: var(--e2);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  background: var(--gris-05);
  font-size: var(--t-petit);
  line-height: 1.55;
  color: var(--encre-2);
}
.pv-note b { color: var(--encre); font-weight: 600; }

.pv-carte-pied {
  margin-top: auto;
  padding-top: var(--e3);
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
}
.pv-lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--bleu-texte);
}
.pv-lien:hover { text-decoration: underline; }
.pv-fleche { display: inline-block; transition: transform 0.4s var(--pv-courbe); }

/* Cartes à mise en page horizontale (solaire, éclairage vedette) */
@media (min-width: 900px) {
  /* 🔴 La mise en page horizontale n'a de sens que sur une carte qui
     occupe TOUTE la largeur. Dans une grille à deux colonnes, la
     colonne image ne faisait que 222 px pour 845 px de haut : le
     produit y tenait en timbre-poste. Ces cartes-là restent donc
     verticales, image en haut, sur toute la largeur de la carte. */
  .pv-carte-h:not(.pv-carte-vedette) { flex-direction: column; }
  .pv-carte-h:not(.pv-carte-vedette) .pv-photo {
    flex: none; width: 100%; padding: 0;
    background: var(--gris-05); border-bottom: 1px solid var(--trait);
  }
  /* ⚠️ à garder après la règle ci-dessus, sinon le fond gris l'emporte
     et l'on revoit un rectangle blanc flotter au milieu de la carte. */
  .pv-carte-h:not(.pv-carte-vedette) .pv-photo-blanc { background: var(--blanc); }
  /* 🔴 Le cadre est passé de 16/10 à 4/3, et ce n'est pas un détail
     de goût. En 16/10 on ne voyait qu'une bande de 62 % de la hauteur
     d'origine : la station à roulettes y perdait sa poignée et ses
     roues, et le panneau solaire, très large, se retrouvait réduit à
     un trait au milieu du cadre. Un cadre plus haut laisse chaque
     produit tenir en entier ET s'afficher plus grand. */
  .pv-carte-h:not(.pv-carte-vedette) .pv-photo img {
    position: static; width: 100%; height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    padding: var(--ph-marge, var(--e3));
    box-sizing: border-box;
  }
  .pv-carte-h:not(.pv-carte-vedette) .pv-photo.pv-scene img {
    object-fit: cover; padding: 0;
  }

  .pv-carte-vedette.pv-carte-h { flex-direction: row; align-items: stretch; }
  /* 🔴 La colonne image ne remplit PLUS toute la hauteur de la carte.
     Avant, une image large (la station en cuisine fait 2,28 de large)
     était étalée dans une colonne étroite et haute : il ne restait
     qu'un bout de mur. On lui donne maintenant un cadre 4/3 centré,
     et c'est l'image qui s'y range — le produit reste reconnaissable. */
  .pv-carte-vedette .pv-photo {
    flex: 0 0 44%;
    display: flex; align-items: center; justify-content: center;
    padding: var(--e3);
  }
  .pv-carte-vedette .pv-photo img {
    position: static;
    width: 100%; height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;             /* produit vu en entier */
    padding: 0;
  }
  .pv-carte-vedette .pv-photo.pv-scene { padding: 0; }
  .pv-carte-vedette .pv-photo.pv-scene img {
    height: 100%; aspect-ratio: auto;
    object-fit: cover;
    object-position: var(--ph-pos, center 45%);
  }
  .pv-carte-h .pv-carte-corps { padding: var(--e4); }
  .pv-carte-vedette .pv-photo { flex: 0 0 42%; }
}


/* ============================================================
   9. LE VAISSEAU AMIRAL SOLAIRE
   ============================================================ */
.pv-amiral {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  background: var(--blanc);
  transition: box-shadow 0.5s var(--pv-courbe), border-color 0.3s ease;
}
.pv-amiral:hover { box-shadow: var(--ombre); border-color: #cfd4db; }
.pv-amiral-photo { overflow: hidden; background: var(--gris-05); min-height: 380px; }
.pv-amiral-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* La colonne est plus haute que large : le recadrage se fait donc
     sur les côtés. On vise le premier module de la pile plutôt que
     le milieu, sinon on coupe une moitié de machine de chaque bord. */
  object-position: var(--ph-pos, 30% center);
  transition: transform 1s var(--pv-courbe);
}
@media (hover: hover) {
  .pv-amiral:hover .pv-amiral-photo img { transform: scale(1.04); }
}
.pv-amiral-corps { padding: var(--e5) var(--e4); }
.pv-amiral-corps h3 { font-size: 1.75rem; letter-spacing: -0.03em; margin-bottom: var(--e2); }
.pv-amiral-txt { color: var(--encre-2); max-width: 32em; line-height: 1.6; }

.pv-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e3);
  margin: var(--e4) 0;
  padding: var(--e3) 0;
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}
.pv-stats b {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.pv-stats span { display: block; margin-top: 2px; font-size: var(--t-petit); color: var(--encre-2); }


/* ============================================================
   10. ZOOM M600 — l'image reste, le texte défile
   ============================================================ */
.pv-zoom-tete { max-width: 620px; margin-bottom: var(--e5); }
.pv-zoom-tete h3 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.025em; }

.pv-sticky { display: grid; gap: var(--e4); }
.pv-media {
  border-radius: var(--r-carte);
  overflow: hidden;
  background: var(--gris-05);
  border: 1px solid var(--trait);
}
.pv-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--ph-pos, center);
  aspect-ratio: var(--ph-cadre, 4 / 3);
}
/* 🔴 « Quatre façons de la remplir » n'est pas une photo mais une
   PLANCHE de quatre vignettes. Le moindre recadrage ampute deux
   vignettes sur quatre. On donne donc à son cadre le format exact de
   l'image (1600 × 1376) : plus rien n'est coupé, et aucune bande vide
   n'apparaît sur les côtés. */
.pv-media-planche img { --ph-cadre: 1600 / 1376; }
.pv-cadre-video { line-height: 0; }
.pv-cadre-video video { width: 100%; display: block; }

.pv-volet h4 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  letter-spacing: -0.03em;
  margin-bottom: var(--e2);
}
.pv-volet > p { color: var(--encre-2); line-height: 1.6; max-width: 30em; }
.pv-volet .btn { margin-top: var(--e4); }

.pv-compteurs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e3);
  margin-top: var(--e4);
}
.pv-compteur {
  padding-top: var(--e2);
  border-top: 2px solid var(--or);
}
.pv-compteur b {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.pv-compteur i {
  font-style: normal;
  font-size: 1.125rem;
  font-weight: 600;
  margin-left: 3px;
  color: var(--encre-2);
}
.pv-compteur span {
  display: block;
  margin-top: var(--e1);
  font-size: var(--t-petit);
  color: var(--encre-2);
  line-height: 1.4;
}

.pv-usages { list-style: none; margin: var(--e4) 0 0; padding: 0; display: grid; gap: var(--e2); }
.pv-usages li {
  display: grid;
  grid-template-columns: 26px auto 1fr;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  background: var(--blanc);
}
.pv-usages svg {
  width: 22px; height: 22px;
  color: var(--or-texte);
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.pv-usages li.pv-usage-bleu svg { color: var(--bleu-texte); }
.pv-usages b {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.pv-usages span { font-size: var(--t-petit); color: var(--encre-2); }

/* Le procédé « image fixe, texte qui défile » : ordinateur uniquement,
   et seulement si le JavaScript peut piloter le changement d'image.
   Sans JS ou sur téléphone, images et textes alternent normalement. */
@media (min-width: 900px) and (scripting: enabled) {
  .pv-sticky {
    grid-template-columns: 46% 1fr;
    grid-template-rows: repeat(3, auto);
    column-gap: var(--e6);
    row-gap: 0;
  }
  .pv-sticky > .pv-media {
    grid-column: 1;
    grid-row: 1 / 4;
    position: sticky;
    top: calc(var(--pv-haut-total) + var(--e3));
    align-self: start;
    opacity: 0;
    transition: opacity 0.55s var(--pv-courbe);
  }
  .pv-sticky > .pv-media.actif { opacity: 1; }
  .pv-sticky > .pv-volet {
    grid-column: 2;
    min-height: 66vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--e4) 0;
  }
  .pv-sticky > [data-pv-volet="0"] { grid-row: 1; }
  .pv-sticky > [data-pv-volet="1"] { grid-row: 2; }
  .pv-sticky > [data-pv-volet="2"] { grid-row: 3; }
}
@media (min-width: 900px) and (scripting: enabled) and (prefers-reduced-motion: reduce) {
  .pv-sticky > .pv-media { transition: none; }
}


/* ============================================================
   11. ÉCLAIRAGE — de l'appoint, pas un plafonnier
   ============================================================ */
.pv-appoint {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: var(--e6);
  align-items: start;
}
.pv-appoint h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.03em; margin-bottom: var(--e3); }
.pv-appoint p { color: var(--encre-2); line-height: 1.65; margin-bottom: var(--e2); }
.pv-appoint .btn { margin-top: var(--e4); }

.pv-puces { list-style: none; margin: var(--e3) 0; padding: 0; }
.pv-puces li { position: relative; padding: 5px 0 5px var(--e3); color: var(--encre-2); }
.pv-puces li::before {
  content: "";
  position: absolute;
  left: 0; top: 15px;
  width: 8px; height: 2px;
  background: var(--or);
}

.pv-echelle-lm {
  display: grid;
  gap: var(--e2);
  padding: var(--e4);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  background: var(--blanc);
}
.pv-lm { display: flex; align-items: baseline; gap: var(--e3); }
.pv-lm b {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  min-width: 3.6em;
  color: var(--encre);
}
.pv-lm span { font-size: var(--t-petit); color: var(--encre-2); line-height: 1.45; }
.pv-lm-ref { padding-top: var(--e2); border-top: 1px solid var(--trait); }
.pv-lm-ref b { color: var(--encre-2); }

.pv-appoint-photo {
  margin-top: var(--e3);
  border-radius: var(--r-carte);
  overflow: hidden;
  background: var(--gris-10);
}
/* La veilleuse est tout en haut de la photo : une visée au centre la
   coupait net. */
.pv-appoint-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--ph-pos, center 34%);
}


/* ============================================================
   12. CATALOGUE COMPLET — du texte, pas des cartes
   ============================================================ */
.pv-catalogue-tete { max-width: 700px; margin-bottom: var(--e5); }
.pv-catalogue-tete h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); letter-spacing: -0.03em; }

.pv-catalogue {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e4) var(--e3);
}
.pv-cat-bloc { padding-top: var(--e3); border-top: 2px solid var(--encre); }
.pv-cat-bleu { border-top-color: var(--bleu); }
.pv-cat-bloc h3 { font-size: var(--t-base); font-weight: 600; margin-bottom: var(--e2); }
.pv-cat-bloc ul { list-style: none; margin: 0; padding: 0; }
.pv-cat-bloc li {
  padding: 6px 0;
  font-size: var(--t-petit);
  line-height: 1.55;
  color: var(--encre-2);
}
.pv-cat-bloc li b { color: var(--encre); font-weight: 600; }


/* ============================================================
   13. TABLETTE
   ============================================================ */
@media (max-width: 1080px) {
  .pv-cartes-3 { grid-template-columns: repeat(2, 1fr); }
  .pv-catalogue { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .pv-sec { padding: var(--e6) var(--e3); }
  .pv-tete { padding: calc(var(--e5) + var(--e5)) var(--e3) var(--e5); }
  .pv-panneau { grid-template-columns: 1fr; gap: var(--e3); padding: var(--e3); }
  .pv-amiral { grid-template-columns: 1fr; }
  .pv-amiral-photo { min-height: 0; }
  .pv-amiral-photo img { aspect-ratio: 16 / 10; }
  .pv-amiral-corps { padding: var(--e4) var(--e3); }
  .pv-appoint { grid-template-columns: 1fr; gap: var(--e5); }
  .pv-cartes-bento { grid-template-columns: 1fr; }
  .pv-cartes-large { grid-template-columns: 1fr; }
}


/* ============================================================
   14. TÉLÉPHONE (jusqu'à 390 px vérifié)
   ============================================================ */
@media (max-width: 700px) {
  .pv-sec { padding: var(--e5) var(--e3); }
  .pv-ouverture { padding-bottom: var(--e4); }
  .pv-tete-photo img { aspect-ratio: 4 / 3; }
  .pv-tete-actions .btn { width: 100%; }

  .pv-sousnav { padding: 0 var(--e2); top: calc(var(--pv-haut-nav) - 8px); }
  .pv-sousnav-in { padding: 4px; gap: 0; }
  .pv-sousnav-marque { display: none; }
  .pv-sousnav-devis { display: none; }
  .pv-onglets { width: 100%; }
  .pv-onglets > a { flex: 1; justify-content: center; padding: 0 var(--e1); }

  .pv-cartes-3 { grid-template-columns: 1fr; }
  .pv-catalogue { grid-template-columns: 1fr; gap: var(--e4); }

  .pv-rail-cadre { padding: var(--e3) var(--e2) var(--e2); }
  .pv-rail-legende { flex-direction: column; gap: 4px; }
  .pv-cran, .pv-cran-fin { min-width: 46px; }

  .pv-stats { grid-template-columns: 1fr 1fr; gap: var(--e2); }
  .pv-compteurs { grid-template-columns: 1fr 1fr; gap: var(--e2); }
  .pv-compteur b { font-size: 1.625rem; }

  .pv-usages li { grid-template-columns: 22px auto; grid-template-areas: "i v" ". t"; }
  .pv-usages svg { grid-area: i; }
  .pv-usages b { grid-area: v; }
  .pv-usages span { grid-area: t; }

  .pv-lm b { font-size: 2rem; min-width: 3.2em; }
  .pv-bande-large img { aspect-ratio: 16 / 9; }
  .pv-bande-moyen img { aspect-ratio: 4 / 3; }

  .pv-carte-pied { gap: var(--e2); }
  .pv-carte-pied .btn { width: 100%; }
}

@media (max-width: 400px) {
  .pv-tete h1 { font-size: 2.1rem; }
  .pv-onglets > a { font-size: 0.8125rem; }
  .pv-carte-tete { flex-wrap: wrap; gap: var(--e1); }
}


/* ============================================================
   15. MOUVEMENT RÉDUIT — on coupe tout, sans rien masquer
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pv-rev { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pv-carte, .pv-carte::after, .pv-photo img, .pv-fleche,
  .pv-amiral, .pv-amiral-photo img, .pv-repere, .pv-cran-barre,
  .pv-media { transition: none !important; }
  .pv-carte:hover { transform: none; }
  .pv-carte:hover .pv-photo img,
  .pv-amiral:hover .pv-amiral-photo img { transform: none; }
  .pv-panneau.actif { animation: none; }
}

/* ============================================================
   LE CHOIX DES TROIS GAMMES  (2026-09-10)
   ------------------------------------------------------------
   Remplace les onglets, qui masquaient deux gammes sur trois.
   ============================================================ */
.pv-choix-sec { padding-top: var(--e5); }
.pv-choix-tete { max-width: 46em; margin-bottom: var(--e5); }

.pv-choix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e3);
}

.pv-choix-carte {
  display: flex; flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .34s cubic-bezier(.22,1,.36,1),
              box-shadow .34s cubic-bezier(.22,1,.36,1),
              border-color .34s ease;
}
.pv-choix-carte:hover,
.pv-choix-carte:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--ombre);
  border-color: #d3d8e0;
}

.pv-choix-photo { aspect-ratio: 16 / 10; overflow: hidden; background: var(--gris-05); }
.pv-choix-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.pv-choix-carte:hover .pv-choix-photo img { transform: scale(1.04); }

.pv-choix-corps { display: flex; flex-direction: column; padding: var(--e3); flex: 1; }
.pv-choix-logo { height: 28px; width: auto; align-self: flex-start; }
.pv-choix-corps h2 { font-size: var(--t-sous); line-height: 1.25; margin-top: var(--e2); }
.pv-choix-mesure {
  font-size: var(--t-petit); font-weight: 600; color: var(--or-texte); margin-top: 2px;
}
.pv-choix-texte { font-size: var(--t-petit); color: var(--encre-2); margin-top: var(--e2); }

.pv-choix-points { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e3); }
.pv-choix-points li {
  font-size: var(--t-petit); color: var(--encre-2);
  background: var(--gris-10); border-radius: var(--r-pilule); padding: 2px 12px;
}

.pv-choix-lien {
  margin-top: auto; padding-top: var(--e3);
  display: inline-flex; align-items: center; gap: var(--e1);
  font-size: var(--t-petit); font-weight: 600; color: var(--bleu-texte);
}
.pv-choix-lien svg { width: 14px; height: 14px; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.pv-choix-carte:hover .pv-choix-lien svg { transform: translateX(3px); }

/* Sur une page de gamme, le catalogue n'a plus que deux blocs :
   celui de la gamme, et les services. */
.pv-catalogue-duo { grid-template-columns: repeat(2, 1fr); }
.pv-catalogue-lien { margin-top: var(--e4); font-size: var(--t-petit); }
.pv-catalogue-lien a { color: var(--bleu-texte); font-weight: 600; }

@media (max-width: 900px) {
  .pv-choix { grid-template-columns: 1fr; gap: var(--e2); }
  .pv-catalogue-duo { grid-template-columns: 1fr; }
  .pv-choix-tete { margin-bottom: var(--e4); }
}