/* =========================================================================
   EPICVIEW — Page Audiovisuel (audiovisuel.css)
   Réutilise communitymanagement.css (mêmes composants : .cm2 carrousel,
   .cm-split, .cm-flip, .cm-plan, boutons...). Ce fichier n'ajoute QUE les
   deux composants médias propres à cette page (remplacent 3D / vidéo mockup) :
   - .av-compare : comparateur avant/après (glisser) — post-prod & VFX
   - .av-duo     : duo d'images en parallaxe — motion design & visite 3D
   ========================================================================= */

/* =========================================================================
   AV-COMPARE — slider avant / après (brut vs étalonné + VFX)
   ========================================================================= */
.av-compare {
  position: relative; width: min(460px, 88vw); aspect-ratio: 4/5; margin-inline: auto;
  border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  cursor: ew-resize; -webkit-user-select: none; user-select: none; touch-action: pan-y;
}
.av-compare__after, .av-compare__before {
  position: absolute; top: 0; left: 0; height: 100%; overflow: hidden;
}
.av-compare__after { width: 100%; }
.av-compare__before { width: 50%; }
.av-compare img {
  -webkit-user-drag: none; user-drag: none;
  -webkit-user-select: none; user-select: none;
  pointer-events: none; /* le parent .av-compare gère seul le pointeur */
}
.av-compare__after img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.12) contrast(1.06) brightness(1.02);
}
.av-compare__before img {
  position: absolute; top: 0; left: 0; height: 100%;
  width: var(--av-fullw, 460px); max-width: none; object-fit: cover;
  filter: grayscale(.88) contrast(.8) brightness(.82) saturate(.55);
}
.av-compare__handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
  background: linear-gradient(var(--ev-red-lite), var(--ev-red));
  box-shadow: 0 0 14px rgba(164,0,0,.6); transform: translateX(-50%); z-index: 3; pointer-events: none;
}
.av-compare__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%; background: #0b0b0d;
  border: 2px solid var(--ev-red-lite); display: grid; place-items: center;
  color: #fff; font-size: 1.05rem; box-shadow: 0 8px 20px rgba(0,0,0,.5); pointer-events: none;
}
.av-compare__tag {
  position: absolute; top: 14px; z-index: 3; font-family: ui-monospace,Menlo,monospace;
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  padding: .4rem .8rem; border-radius: 100px; background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.2); color: #fff; pointer-events: none;
}
.av-compare__tag--before { left: 14px; }
.av-compare__tag--after { right: 14px; border-color: rgba(164,0,0,.55); color: var(--ev-red-lite); }
.av-compare:focus-visible { outline: 2px solid var(--ev-red-lite); outline-offset: 4px; }

/* =========================================================================
   AV-DUO — deux visuels superposés, tilt en parallaxe (motion design / 3D)
   ========================================================================= */
.av-duo { position: relative; width: min(440px, 84vw); aspect-ratio: 1/1; margin-inline: auto; perspective: 1100px; }
.av-duo__card {
  position: absolute; border-radius: 18px; overflow: hidden; background: #111;
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 24px 50px rgba(0,0,0,.5);
  transition: transform .5s var(--ev-ease), inset .5s var(--ev-ease),
              filter .5s var(--ev-ease), box-shadow .5s var(--ev-ease);
  will-change: transform;
}
.av-duo__card img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-drag: none; }
.av-duo__card--back { inset: 0 14% 14% 0; z-index: 1; filter: brightness(.72) saturate(.9); }
.av-duo__card--front { inset: 14% 0 0 14%; z-index: 2; box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(164,0,0,.28); }
/* au survol : la carte arrière passe devant pour devenir accessible/visible */
.av-duo.is-swapped .av-duo__card--back {
  inset: 14% 0 0 14%; z-index: 2; filter: brightness(1) saturate(1);
  box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(164,0,0,.28);
}
.av-duo.is-swapped .av-duo__card--front {
  inset: 0 14% 14% 0; z-index: 1; filter: brightness(.72) saturate(.9);
  box-shadow: 0 24px 50px rgba(0,0,0,.5);
}
.av-duo__tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 3; font-size: .76rem; font-weight: 700;
  letter-spacing: .03em; color: #fff; background: rgba(0,0,0,.55); padding: .35rem .75rem; border-radius: 100px;
}

@media (max-width: 640px) {
  .av-compare { width: min(360px, 84vw); }
  .av-duo { width: min(320px, 80vw); }
}