/* ==========================================================================
   COMPARATEUR « fond clair / fond noir »
   Chargé uniquement par la page de préparation d'image et halftone.

   Ce qu'il montre : un seul fichier, aux zones réellement transparentes,
   posé sur deux fonds. Ce n'est pas un avant/après — c'est le même fichier
   des deux côtés. Le curseur ne modifie rien : il déplace la limite entre
   les deux fonds placés DERRIÈRE l'image.

   Deux états :
     • par défaut — les deux côtés sont côte à côte, statiques. C'est ce que
       voient un navigateur sans JavaScript et une impression papier.
     • .is-pret  — posé par le script : les deux côtés se superposent et la
       limite suit le curseur.
   ========================================================================== */

.cmp {
  margin: clamp(22px, 3vh, 34px) auto 0;
  max-width: 620px;
}

/* --- Scène ---------------------------------------------------------------- */
.cmp__scene {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border-radius: var(--r-md);
}

.cmp__cote {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: 0 0 0 1px var(--line);
}
/* Deux fonds unis, et rien d'autre : ce sont eux qui tiennent le rôle du
   vêtement. Pas de damier — le damier est une convention de logiciel, pas une
   couleur de tissu, et il brouillerait ce qu'on cherche à montrer. */
.cmp__cote--clair { background-color: #EFF1F4; }
.cmp__cote--noir { background-color: #0B0B0D; }

.cmp__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

/* --- Étiquettes ----------------------------------------------------------- */
.cmp__etiq {
  position: absolute;
  bottom: 10px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.3;
  pointer-events: none;
}
.cmp__etiq--g { left: 10px; background: #071A2E; color: #F1F6FB; }
.cmp__etiq--d { right: 10px; background: #F1F6FB; color: #071A2E; }
.cmp__etiq .court { display: none; }

/* Chaque étiquette vit dans son côté : elle est donc rognée avec lui. Quand un
   côté devient trop étroit pour la porter, on la retire plutôt que d'en
   afficher un morceau. Le script pose la classe. */
.cmp__etiq[hidden] { display: none; }

/* --- Ligne de séparation et curseur : inutiles hors de l'état interactif -- */
.cmp__ligne,
.cmp__rng { display: none; }

/* ==========================================================================
   État interactif — posé par le script
   ========================================================================== */
.cmp.is-pret .cmp__scene {
  display: block;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 26px 50px -26px rgba(3, 18, 38, .9);
  /* La scène prend la hauteur de l'image du dessous ; l'autre se superpose. */
}
.cmp.is-pret .cmp__cote {
  border-radius: 0;
  box-shadow: none;
}
.cmp.is-pret .cmp__cote--noir {
  position: absolute;
  inset: 0;
  /* La limite : à gauche le fond clair, à droite le fond noir.
     Aucune transition : la limite doit se trouver exactement là où est le
     doigt, sans rattrapage. Un glissement qui traîne derrière la main donne
     l'impression que quelque chose se calcule — et il n'y a rien à calculer. */
  clip-path: inset(0 0 0 var(--p, 50%));
}
.cmp.is-pret .cmp__cote--noir .cmp__img { height: 100%; object-fit: cover; }

.cmp.is-pret .cmp__etiq--g,
.cmp.is-pret .cmp__etiq--d { bottom: 14px; }

/* Ligne verticale — elle marque la limite, elle ne la produit pas. */
.cmp.is-pret .cmp__ligne {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--p, 50%);
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, .92);
  /* Le liseré sombre n'est pas décoratif : c'est lui qui rend la ligne
     visible du côté clair, où le blanc sur blanc ne se verrait pas.
     Mesuré à 5,6:1 contre #EFF1F4 — au-dessus des 3:1 exigés pour un
     élément d'interface. */
  box-shadow: 0 0 0 1px rgba(3, 18, 38, .75);
  pointer-events: none;
}

/* La poignée visible est dessinée sur la ligne, à mi-hauteur. Le pouce du
   curseur natif reste le seul élément réellement manipulable — il est rendu
   transparent : sa position verticale varie d'un moteur à l'autre, alors que
   la poignée, elle, doit rester au milieu. */
.cmp.is-pret .cmp__ligne::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: #F1F6FB url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='16' viewBox='0 0 26 16'%3E%3Cpath d='M9.5 3 4 8l5.5 5M16.5 3 22 8l-5.5 5' fill='none' stroke='%23071A2E' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 26px 16px no-repeat;
  /* Même raison que pour la ligne : contre le fond clair, c'est l'anneau qui
     détache la poignée. Mesuré à 5,6:1 contre #EFF1F4. */
  box-shadow: 0 0 0 2px rgba(3, 18, 38, .75), 0 8px 20px -8px rgba(3, 18, 38, .9);
}
/* Le focus clavier se voit sur la poignée, pas seulement sur la zone. */
.cmp.is-pret .cmp__rng:focus-visible ~ .cmp__ligne::after {
  box-shadow: 0 0 0 3px var(--aqua), 0 8px 20px -8px rgba(3, 18, 38, .9);
}

/* Le curseur natif : un seul élément focalisable, qui répond déjà à la souris,
   au doigt et au clavier. */
.cmp.is-pret .cmp__rng {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: ew-resize;
  /* Un glissement vertical continue de faire défiler la page ; seul le
     glissement horizontal déplace la limite. */
  touch-action: pan-y;
}
.cmp__rng::-webkit-slider-runnable-track { background: transparent; border: 0; height: 100%; }
.cmp__rng::-moz-range-track { background: transparent; border: 0; height: 100%; }

/* Pouce transparent, mais bien réel : 46 px de large, c'est la cible tactile.
   Cliquer ou glisser n'importe où sur l'image amène la limite au doigt. */
.cmp__rng::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: transparent;
  cursor: ew-resize;
}
.cmp__rng::-moz-range-thumb {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: ew-resize;
}
.cmp__rng:focus { outline: none; }
.cmp__rng:focus-visible { outline: 3px solid var(--aqua); outline-offset: -3px; }

/* --- Légende et aide ------------------------------------------------------ */
.cmp__legende {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--t-2);
}
.cmp__legende b { color: var(--t-1); }

.cmp__aide {
  margin-top: 9px;
  font-size: 14px;
  color: var(--t-3);
}
.cmp:not(.is-pret) .cmp__aide { display: none; }

/* Sur surface claire, les encres suivent la section. */
.sec--clair .cmp__legende { color: var(--ink-2); }
.sec--clair .cmp__legende b { color: var(--ink-1); }
.sec--clair .cmp__aide { color: var(--ink-3); }

/* --- Petits écrans -------------------------------------------------------- */
/* Les libellés ne rétrécissent pas sur téléphone : ce sont eux qui disent ce
   qu'on regarde de chaque côté. Seul le rembourrage se resserre. */
@media (max-width: 560px) {
  .cmp__scene { gap: 8px; }
  .cmp__etiq { padding: 5px 9px; bottom: 8px; }
  .cmp.is-pret .cmp__etiq--g,
  .cmp.is-pret .cmp__etiq--d { bottom: 10px; }
  .cmp__legende { font-size: 16px; }
  .cmp__aide { font-size: 15px; }
  /* Sur téléphone, la scène fait moins de 360 px : la formule longue ne tient
     pas d'un côté de la limite. On garde le mot qui porte le sens. */
  .cmp__etiq .longue { display: none; }
  .cmp__etiq .court { display: inline; }
}

/* --- Réduction de mouvement ----------------------------------------------
   Rien à neutraliser ici, et c'est voulu : le comparateur ne lance aucun
   mouvement de lui-même, ne s'anime pas à l'arrivée, et ne fait suivre la
   limite que du geste de la personne. Il se comporte donc à l'identique avec
   ou sans `prefers-reduced-motion`. La seule chose qui change est la
   révélation d'entrée de la figure, gérée par la feuille partagée.

   La règle qui suit ne fait qu'écrire cette garantie noir sur blanc : si une
   transition était réintroduite un jour sur la limite, elle serait quand même
   coupée ici. */
@media (prefers-reduced-motion: reduce) {
  .cmp.is-pret .cmp__cote--noir,
  .cmp.is-pret .cmp__ligne { transition: none !important; }
}