.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* --- Infographies agrandissables ------------------------------------------
   Les infographies contiennent du texte fin : à la taille où elles s'affichent
   dans la page, il est illisible sur téléphone. Un clic les ouvre en grand. */
.zoomable {
  cursor: zoom-in;
}
.zoomable:focus-visible {
  outline: 3px solid #4B0DE6;
  outline-offset: 3px;
}

.zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 12, 30, .92);
  /* Sans cela, l'ouverture est brutale sur un fond clair. */
  animation: zoom-fade .18s ease-out;
}
@keyframes zoom-fade { from { opacity: 0 } to { opacity: 1 } }

.zoom-overlay img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.zoom-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;               /* cible tactile confortable */
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.zoom-close:hover { background: rgba(255, 255, 255, .28); }
.zoom-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.zoom-hint {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, .75);
  font-size: 13px;
}

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  .zoom-overlay { animation: none; }
}

/* --- Collision de classe « light » ----------------------------------------
   Le CSS du concepteur définit .light comme une AMPOULE décorative :
       .light { position:absolute; width:24px; height:45px; background:#ebce59;
                border-radius:50% 50% 8px 8px; bottom:25%; right:22%; z-index:3 }
   « light » y signifie LUMIÈRE. Or les sur-titres de section utilisent
   class="section-kicker light", où « light » signifie CLAIR (couleur du texte
   sur fond foncé). Ils héritaient donc du style de l'ampoule : sortis du flux,
   écrasés dans 24 px de large, empilés au même endroit et projetés par-dessus
   l'illustration de Lina — d'où les « textes bizarres à ses pieds ».

   On neutralise cet héritage pour les seuls sur-titres. La vraie ampoule
   décorative n'est pas touchée. Spécificité 0-2-0 contre 0-1-0 : cette règle
   l'emporte sans !important. */
.section-kicker.light {
  position: static;
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
  z-index: auto;
}

/* --- Bandeau d'accueil : une photo, plus une silhouette -------------------
   Le bandeau était dessiné pour un rendu 3D détouré et vertical : image
   collée en bas (bottom:2%), limitée à 78 % de large, posée sur un halo rond
   et deux collines colorées. Une photographie en format paysage y flottait
   trop haut et trop petite. On la recentre, on l'élargit et on lui donne un
   cadre : le halo et les collines restent visibles autour, l'identité du
   bandeau est préservée. */
.home-hero .hero-visual img {
  max-width: 90%;
  height: auto;
  max-height: 84%;
  bottom: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 18px;
  box-shadow: 0 24px 55px rgba(50, 31, 64, .30);
}

/* --- Page communes : deux captures dans le bandeau ------------------------
   Le bandeau est une grille centrée prévue pour UNE capture haute (jusqu'à
   600 px). Avec deux, on réduit chaque hauteur et on ajoute une respiration,
   sinon le bloc déborde. La règle ne s'applique QUE s'il y a bien deux images,
   les autres pages ne sont donc pas touchées. */
.page-hero-image:has(img + img) {
  gap: 20px;
  padding: 40px 26px;
}
.page-hero-image:has(img + img) img {
  max-height: 330px;
  max-width: 100%;
  border-radius: 12px;
}

/* --- WatchCare : la photo puis l'infographie ------------------------------
   La photo montre la montre portée, l'infographie détaille les fonctions.
   Empilées avec une respiration ; seule l'infographie reste agrandissable,
   la photo n'a pas de texte fin à lire de près. */
.infographic-frame.watch-duo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.infographic-frame.watch-duo img {
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* --- Solutions : ce qui dépend de quoi ------------------------------------
   Question que se pose tout acheteur : faut-il tout prendre ? La réponse est
   posée dès le bandeau, avant le détail produit par produit.

   ⚠️ Le site déclare ses polices sur des sélecteurs précis (.page-lead, h2…)
   et non sur le corps de page : un bloc ajouté n'hérite donc de RIEN et
   retombe sur l'Arial du navigateur, qui jure avec le reste. On reprend donc
   explicitement la pile du site (Georgia) et sa couleur de texte.
   Filet latéral plutôt qu'un cadre complet : l'information se remarque sans
   couper le bandeau en deux. */
.eco-note {
  margin-top: 24px;
  padding: 14px 0 14px 18px;
  border-left: 3px solid #7c4dd0;
  max-width: 44ch;
}
.eco-note p {
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
  color: rgb(85, 78, 91);
  margin: 0 0 8px;
}
.eco-note p:last-child { margin-bottom: 0; }
.eco-note-t {
  font-weight: 700;
  color: rgb(36, 29, 46);
}
.eco-note b { color: rgb(36, 29, 46); }