/* ==========================================================================
   Comparateur « housse en coton / housse transparente » — CBS Emballages
   Fichier associé : comparateur.js. Aucune dépendance, aucune ressource distante.

   Balisage attendu (contrat commun) :
   figure.cmp[data-cmp]
     .cmp-stage[style="--pos:50%"]
       img.cmp-coton      couche du dessous, toujours entière
       img.cmp-transp     couche du dessus, découpée de 0 à --pos
       input.cmp-range    0 → 100 (clavier et lecteurs d'écran)
       span.cmp-handle    filet droit de haut en bas + rond central
       span.cmp-lab-l     « Housse en coton »      (curseur à gauche, 0)
       span.cmp-lab-r     « Housse transparente »  (curseur à droite, 100)
     figcaption.credit

   Sens : --pos = part de la largeur occupée par la housse transparente,
   comptée depuis le bord gauche. 100 % = toute la housse transparente,
   0 % = toute la housse en coton.

   Variables posées par le script sur .cmp-stage :
   --pos           position en pourcentage (ex. 50%)
   --cmp-n         la même valeur sans unité (ex. 50)
   --cmp-o-coton   opacité de l'étiquette « Housse en coton » (0 à 1)
   --cmp-o-transp  opacité de l'étiquette « Housse transparente » (0 à 1)
   ========================================================================== */

/* Gabarit par défaut. :where() garde une spécificité nulle : la page peut
   placer le comparateur dans une colonne en redéfinissant simplement .cmp. */
:where(.cmp) {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
}

.cmp-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  background: #EEE9E0;
  cursor: ew-resize;
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Les deux photos, superposées au même cadrage */
.cmp .cmp-stage > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.cmp .cmp-stage > .cmp-coton { z-index: 0; }

.cmp .cmp-stage > .cmp-transp {
  z-index: 1;
  -webkit-clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

/* Curseur natif : invisible, il porte le clavier et l'accessibilité.
   Le pointeur (souris, doigt, stylet) est géré sur toute la surface par le script. */
.cmp-range {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  opacity: 0;
  pointer-events: none;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}

/* Poignée : filet blanc de 2 px sur toute la hauteur */
.cmp-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  z-index: 4;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 6px rgba(18, 26, 39, .10);
  pointer-events: none;
}

/* Rond central de 44 px, doubles flèches en SVG */
.cmp-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121A27' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7.5 4.5 12 9 16.5M15 7.5l4.5 4.5-4.5 4.5'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
  box-shadow: 0 2px 10px rgba(18, 26, 39, .16), 0 0 0 1px rgba(18, 26, 39, .05);
  transition: transform .2s ease;
}

@media (hover: hover) {
  .cmp-stage:hover .cmp-handle::after { transform: scale(1.04); }
}
.cmp-stage.is-drag .cmp-handle::after { transform: scale(.96); }

/* Focus clavier : contour autour de l'image et anneau sur la poignée.
   Le script pose .is-kbd quand le focus vient du clavier (Tab, flèches),
   jamais après un clic ou un toucher. */
.cmp-range:focus { outline: none; }

.cmp-stage.is-kbd {
  outline: 2px solid var(--cmp-focus, #121A27);
  outline-offset: 3px;
}

.cmp-stage.is-kbd .cmp-handle::after {
  box-shadow: 0 0 0 2px var(--cmp-focus, #121A27), 0 2px 10px rgba(18, 26, 39, .16);
}

/* Même contour tant que le script n'a pas démarré (.is-ready absent) */
.cmp:not(.is-ready) .cmp-stage:has(.cmp-range:focus-visible) {
  outline: 2px solid var(--cmp-focus, #121A27);
  outline-offset: 3px;
}

.cmp:not(.is-ready) .cmp-range:focus-visible ~ .cmp-handle::after {
  box-shadow: 0 0 0 2px var(--cmp-focus, #121A27), 0 2px 10px rgba(18, 26, 39, .16);
}

/* Étiquettes : chacune est posée sur la zone qu'elle nomme et s'estompe
   quand le filet arrive dessus. La housse transparente occupe la gauche
   (de 0 à --pos), la housse en coton la droite.
   Les suffixes -l et -r du contrat désignent la position du curseur :
   à gauche (0) tout est en coton, à droite (100) tout est transparent.
   L'opacité est mesurée par le script (part de l'étiquette posée sur sa
   housse) ; le calcul après la virgule sert de repli sans mesure. */
.cmp-lab {
  position: absolute;
  bottom: 14px;
  z-index: 3;
  padding: 6px calc(10px - .14em) 6px 10px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #121A27;
  font-family: IN, Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.cmp-lab-r {
  left: 14px;
  opacity: var(--cmp-o-transp, clamp(0, calc((var(--cmp-n, 50) - 6) / 30), 1));
}

.cmp-lab-l {
  right: 14px;
  opacity: var(--cmp-o-coton, clamp(0, calc((94 - var(--cmp-n, 50)) / 26), 1));
}

/* Image étroite (colonne serrée, téléphone) : étiquettes resserrées */
@container (max-width: 430px) {
  .cmp-lab {
    bottom: 8px;
    padding: 5px calc(6px - .06em) 5px 6px;
    letter-spacing: .06em;
  }
  /* Les étiquettes occupent une plus grande part de la largeur : repli ajusté */
  .cmp-lab-r {
    left: 8px;
    opacity: var(--cmp-o-transp, clamp(0, calc((var(--cmp-n, 50) - 6) / 40), 1));
  }
  .cmp-lab-l {
    right: 8px;
    opacity: var(--cmp-o-coton, clamp(0, calc((94 - var(--cmp-n, 50)) / 40), 1));
  }
}

/* Très étroite : les étiquettes passent sur deux lignes pour rester
   chacune dans sa moitié d'image */
@container (max-width: 348px) {
  .cmp-lab {
    line-height: 1.35;
    white-space: normal;
  }
  .cmp-lab-r { width: min-content; }
  .cmp-lab-l {
    max-width: 80px;
    text-align: right;
  }
}

/* Mention sous l'image : 11 px, gris discret. Spécificité nulle : si la page
   définit déjà .credit pour toutes ses photos, sa règle reste prioritaire
   et la mention du comparateur est identique aux autres. */
:where(.cmp .credit) {
  display: block;
  margin: 8px 0 0;
  padding: 0;
  color: #6B7280;
  font-family: IN, Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: .01em;
}

@media (prefers-reduced-motion: reduce) {
  .cmp-handle::after { transition: none; }
  .cmp-stage:hover .cmp-handle::after,
  .cmp-stage.is-drag .cmp-handle::after { transform: none; }
}

@media (forced-colors: active) {
  .cmp-handle { background: CanvasText; }
  .cmp-handle::after { border: 1px solid CanvasText; }
}

/* harmonisation teinte vue coton */
.cmp .cmp-coton{filter: saturate(.888) hue-rotate(1.1deg) brightness(.962)}