/* ===== Section « zoom » Oreka — la douchette vue de près, au défilement =====
   À inclure après style.css. Palette : blanc, noir, gris #B5BAC0 seulement. */

.zoom { position: relative; height: 420vh; background: #fff; }
.zoom__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.zoom__scene { position: absolute; inset: 0; }
.zoom__img {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  will-change: transform;
  max-width: none; /* neutralise la règle générale img { max-width: 100% } de style.css : la taille est calculée par zoom.js */
  user-select: none; -webkit-user-drag: none;
}
/* couche haute résolution de la douchette, superposée exactement à l'image (même transformation) */
.zoom__detail {
  position: absolute; transform-origin: 0 0; will-change: transform;
  max-width: none; /* même raison que .zoom__img */
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
/* voile léger qui s'intensifie avec le zoom pour faire ressortir le produit et les légendes */
.zoom__voile { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
/* dégradé blanc derrière le texte d'introduction, pour la lisibilité sur la photo */
.zoom__degrade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 32%, rgba(255,255,255,0) 62%); }
@media (max-width: 720px) { .zoom__degrade { background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 38%, rgba(255,255,255,0) 60%); } }

/* raccord avec le film qui précède : sur bureau, le haut de la cuisine part du bleu du bas du film (le film reste intact,
   jet compris) ; sur téléphone, le film est suivi de son texte sur fond blanc, donc le raccord part du blanc.
   S'efface dès le début du défilement dans la section (zoom.js). */
.zoom__fondu { position: absolute; left: 0; right: 0; top: 0; height: 30vh; pointer-events: none;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.75) 35%, rgba(255,255,255,0) 100%); }
@media (min-width: 768px) {
  .zoom__fondu { height: 42vh;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.8) 25%, rgba(255,255,255,0) 100%); height: 28vh; }
}
@media (prefers-reduced-motion: reduce) { .zoom__fondu { opacity: 0; } }

.zoom__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
/* lignes et points en blanc : ils restent visibles sur le mur sombre */
.zoom__lines path { fill: none; stroke: #fff; stroke-opacity: .7; stroke-width: 1; }
.zoom__lines circle.pt { fill: #fff; }                                   /* rond plein de 6,4 px (r = 3,2 dans zoom.js) */
.zoom__lines circle.halo { fill: none; stroke: #fff; stroke-width: 1; opacity: .55; }   /* anneau de 22 px (r = 11 en fin d'apparition) */

.zoom__intro {
  position: absolute; left: clamp(20px, 6vw, 96px); top: clamp(88px, 14vh, 160px);
  max-width: 38ch; color: #000;
}
.zoom__intro .pilule {
  display: inline-block; font: 500 12px/1 "Switzer", "Inter", system-ui, sans-serif;
  letter-spacing: .04em; border: 1px solid #000; border-radius: 999px; padding: 7px 12px; margin-bottom: 18px;
}
.zoom__intro h2 { font: 600 clamp(22px, 2.6vw, 36px)/1.1 "Switzer", "Inter", system-ui, sans-serif; letter-spacing: .01em; text-transform: uppercase; margin: 0 0 16px; }
.zoom__intro p { font: 400 clamp(15px, 1.3vw, 18px)/1.55 "Switzer", "Inter", system-ui, sans-serif; margin: 0; max-width: 46ch; }

.zoom__hint {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  font: 500 11px/1 "Switzer", "Inter", system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #000; opacity: .55;
}
.zoom__hint::after { content: ""; display: block; width: 1px; height: 28px; background: #000; margin: 10px auto 0; animation: zoomHint 1.6s ease-in-out infinite; }
@keyframes zoomHint { 0%, 100% { transform: scaleY(.3); transform-origin: top; opacity: .3 } 50% { transform: scaleY(1); opacity: 1 } }

/* légendes en « verre clair » : fond crème translucide flouté, filet noir de 2 px en haut, numéro au-dessus du titre */
.zoom__callout {
  position: absolute; max-width: 320px;
  background: rgba(244,242,238,.92);                    /* sans flou d'arrière-plan : plus opaque */
  border: 0; border-top: 2px solid #111; border-radius: 2px; box-shadow: none;
  padding: 22px 26px 24px; color: #111;
  opacity: 0; transform: translateY(6px); will-change: opacity, transform;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .zoom__callout { background: rgba(244,242,238,.78); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
}
.zoom__callout::before { content: attr(data-num); display: block; margin-bottom: 10px; font: 500 11px/1 "Switzer", "Inter", system-ui, sans-serif; letter-spacing: .24em; color: #6b6b6b; }
.zoom__callout strong { display: block; font: 600 13px/1.3 "Switzer", "Inter", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #111; margin-bottom: 10px; }
.zoom__callout span { display: block; font: 400 15.5px/1.55 "Switzer", "Inter", system-ui, sans-serif; color: #3c3c3c; }

@media (max-width: 720px) {
  .zoom { height: 460vh; }
  .zoom__intro { top: 84px; left: 20px; right: 20px; max-width: none; }
  /* voile blanc propre au texte d'introduction : il s'efface en même temps que le texte (même opacité),
     pour que le titre et le paragraphe restent noirs sur clair jusqu'à leur disparition */
  .zoom__intro { isolation: isolate; }
  .zoom__intro::before {
    content: ""; position: absolute; z-index: -1; left: -20px; right: -20px; top: -84px; bottom: -48px; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.88) 78%, rgba(255,255,255,0) 100%);
  }
  .zoom__callout { max-width: 60vw; padding: 14px 16px; }
  .zoom__callout strong { font-size: 11.5px; }
  .zoom__callout span { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .zoom { height: auto; }
  .zoom__pin { position: relative; height: 100vh; }
  .zoom__hint { display: none; }
}