/* ========================================================================
   Before/After Slider Block — léger, générique, sans dépendances
   - Fallback no-JS : split statique (width inline), range masqué
   - JS : ajoute .baf--js -> range actif
   - Ratios : aspect-ratio + object-fit cover
   - Ombres : presets via variable --baf-shadow
   - Arrondis : --baf-radius
   - Labels : variables couleur/opacité + preset discret
   ======================================================================== */

.baf-slider{
  --baf-radius: 16px;
  --baf-accent: #2563eb; /* couleur poignée (modifiable via CSS global si besoin) */
  --baf-text: #111827;
  --baf-shadow: 0 12px 26px rgba(0,0,0,.16);

  --baf-label-bg-rgb: 0,0,0;
  --baf-label-bg-opacity: .45;
  --baf-label-text: #ffffff;

  position: relative;
  overflow: hidden;
  border-radius: var(--baf-radius);
  box-shadow: var(--baf-shadow);
  background: #111;
  user-select: none;
  touch-action: pan-y; /* Permet le scroll vertical tout en bloquant horizontal */
  max-width: 100%;
  
  /* Amélioration performance */
  contain: layout style paint;
}

/* Max-height desktop (optionnel via --baf-maxh-desktop) */
@media (min-width: 768px){
  .baf-slider{
    max-height: var(--baf-maxh-desktop, 99999px);
  }
}

/* Ombres — presets */
.baf--shadow-none{   --baf-shadow: none; }
.baf--shadow-soft{   --baf-shadow: 0 12px 26px rgba(0,0,0,.16); }
.baf--shadow-medium{ --baf-shadow: 0 16px 34px rgba(0,0,0,.20); }
.baf--shadow-strong{ --baf-shadow: 0 22px 46px rgba(0,0,0,.26); }

/* Images de base */
.baf-img{
  width: 100%;
  height: auto;
  display: block;
}

.baf-after{
  position: relative;
  z-index: 1;
}

.baf-before{
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
  /* width contrôlé inline via start% */
  /* Amélioration performance */
  will-change: width;
}

.baf-before-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ========================================================================
   Ratios
   ======================================================================== */

.baf--ratio-16x9{ aspect-ratio: 16 / 9; }
.baf--ratio-1x1{  aspect-ratio: 1 / 1; }
.baf--ratio-9x16{ aspect-ratio: 9 / 16; }

/* En mode ratio, l'image after remplit le cadre */
.baf--ratio-16x9 .baf-after,
.baf--ratio-1x1  .baf-after,
.baf--ratio-9x16 .baf-after{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Fallback pour navigateurs qui ne supportent pas aspect-ratio */
@supports not (aspect-ratio: 1) {
  .baf--ratio-16x9 { padding-bottom: 56.25%; }
  .baf--ratio-1x1  { padding-bottom: 100%; }
  .baf--ratio-9x16 { padding-bottom: 177.78%; }
  
  .baf--ratio-16x9 .baf-after,
  .baf--ratio-1x1  .baf-after,
  .baf--ratio-9x16 .baf-after {
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* ========================================================================
   Range input (masqué par défaut pour fallback no-JS)
   ======================================================================== */

.baf-range{ 
  display: none; 
}

/* Activé uniquement quand JS tourne */
.baf-slider.baf--js .baf-range{
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 4;
  cursor: ew-resize;
  margin: 0;
  padding: 0;
}

/* Amélioration accessibilité : focus visible sur le range */
.baf-slider.baf--js .baf-range:focus-visible {
  outline: 3px solid var(--baf-accent);
  outline-offset: -3px;
}

/* ========================================================================
   Handle (poignée)
   ======================================================================== */

.baf-handle{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255,255,255,.85);
  z-index: 3;
  transform: translateX(-1px);
  pointer-events: none; /* Ne bloque pas les événements pointer */
  /* Amélioration performance */
  will-change: left;
}

/* Cercle de la poignée */
.baf-handle::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  border: 3px solid var(--baf-accent);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Icône de la poignée */
.baf-handle::after{
  content: "⟷";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 18px;
  color: var(--baf-text);
  line-height: 1;
}

/* Animation hover sur le slider (effet sur la poignée) */
.baf-slider:hover .baf-handle::before,
.baf-slider:focus-within .baf-handle::before {
  transform: translate(-50%,-50%) scale(1.1);
  box-shadow: 0 12px 28px rgba(0,0,0,.3);
}

/* État actif/dragging */
.baf-slider:active .baf-handle::before {
  transform: translate(-50%,-50%) scale(1.05);
}

/* ========================================================================
   Labels (génériques + réglables)
   ======================================================================== */

.baf-label{
  position: absolute;
  top: 16px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .4px;
  line-height: 1.2;
  color: var(--baf-label-text);
  background: rgba(var(--baf-label-bg-rgb), var(--baf-label-bg-opacity));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); /* Safari */
  z-index: 5;
  pointer-events: none;
  
  /* Amélioration lisibilité */
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
}

.baf-label--before{ left: 16px; }
.baf-label--after{ right: 16px; }

/* Preset "discret" */
.baf--labels-discreet .baf-label{
  top: 12px;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .25px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Responsive labels pour mobiles */
@media (max-width: 480px) {
  .baf-label {
    font-size: 12px;
    padding: 8px 10px;
    top: 12px;
  }
  
  .baf--labels-discreet .baf-label {
    font-size: 11px;
    padding: 6px 8px;
  }
}

/* ========================================================================
   Helpers éditeur (Gutenberg)
   ======================================================================== */

.baf-editor__pickers{
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.baf-editor__hint{
  opacity: .75;
  margin: 0;
  padding: 12px;
  background: #f0f0f1;
  border-radius: 4px;
  font-size: 14px;
}

/* ========================================================================
   Mode print
   ======================================================================== */

@media print {
  .baf-slider {
    box-shadow: none;
  }
  
  .baf-handle,
  .baf-range,
  .baf-label {
    display: none !important;
  }
  
  /* En mode print, affiche les deux images côte à côte */
  .baf-before {
    position: relative;
    width: 50% !important;
    display: inline-block;
    vertical-align: top;
  }
  
  .baf-after {
    display: inline-block;
    width: 50%;
    vertical-align: top;
  }
}

/* ========================================================================
   Mode réduit motion (accessibilité)
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  .baf-handle::before {
    transition: none;
  }
}