/* ============================================================
   BLOC AVANT/APRES : comparateur a curseur, accessible.
   Structure neutre : roles semantiques uniquement.
   Le curseur est un input range natif (clavier, tactile, lecteur
   d'ecran) qui deplace la ligne de partage. Aucune dependance.
   ============================================================ */

.bloc-avap {
  background: var(--surface);
  padding-block: var(--sp-9);
}

.avap-entete {
  text-align: center;
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-bottom: var(--sp-7);
}

.avap-titre {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: var(--tt-display);
  text-wrap: balance;
  color: var(--ink);
}

.avap-soustitre {
  margin-top: var(--sp-3);
  font-size: var(--fs-base);
  color: var(--ink-muted);
}

.avap {
  max-width: 56rem;
  margin-inline: auto;
}

/* Scene : l'image APRES en fond, l'AVANT par-dessus, rognee
   a la position du curseur (--pos) */
.avap-scene {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  border: var(--bw-1) solid var(--border);
  box-shadow: var(--shadow-card);
}

.avap-scene img {
  width: 100%;
  height: auto; /* neutralise l'attribut height : sans lui, l'aspect-ratio serait ignore */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.avap-avant {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

/* Rendu "avant" de demonstration : la meme photo, eteinte.
   Sur un vrai chantier client, deux vraies photos remplacent
   ce filtre (note dans bloc.json). */
.avap-avant img {
  filter: grayscale(0.85) brightness(0.72) contrast(0.92) sepia(0.18);
}

.avap-ligne {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: var(--surface-raised);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent);
  pointer-events: none;
}

.avap-tag {
  position: absolute;
  top: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--w-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-raised);
  color: var(--ink);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-3);
  box-shadow: var(--sh-1);
  pointer-events: none;
}
.avap-tag--avant { left: var(--sp-3); }
.avap-tag--apres { right: var(--sp-3); }

/* Curseur */
.avap-controle {
  display: block;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--w-strong);
  color: var(--ink-muted);
}
.avap-controle input[type='range'] {
  width: 100%;
  margin-top: var(--sp-2);
  accent-color: var(--accent);
}

.avap-legende {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  text-align: center;
}
.avap-legende strong { color: var(--ink); font-weight: var(--w-strong); }

@media (max-width: 640px) {
  .bloc-avap { padding-block: var(--sp-7); }
  .avap-scene img { aspect-ratio: 4 / 3; }
}