@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Lora:wght@400;600&display=swap');
:root{ --olive:#6B7A47; --terre:#866B3B; --creme:#F8F5EF; --gris:#EAE7E0; --txt:#2E2A25; }
body{ background:var(--creme); color:var(--txt); font-family:"Lora",serif; }
.h-script{ font-family:"Great Vibes",cursive; }
.shadow-soft{ box-shadow: 0 10px 25px rgba(0,0,0,.08); }

.text-shadow { text-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* ========== Avant/Après + Carousel + Lightbox (version clean) ========== */

/* Taille contrôlée (responsive) */
.ba-box{ width:100%; margin:0 auto; }        /* le ratio sera mis en JS */
.ba-box.landscape{ max-width:980px; }         /* largeur max si paysage */
.ba-box.portrait { max-width:560px; }         /* largeur max si portrait */

/* Slider core */
.ba{
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: 16px;
  box-shadow: none !important;
  background:#6B7A47; /* FOND OLIVE demandé */
}
.ba::before,
.ba::after{
  position: absolute;
  top: 10px;
  padding: 4px 10px;
  font-size: .85rem;
  font-weight: 600;
  border-radius: 6px;
  background: rgba(255,255,255,0.86);
  color: var(--txt);
  z-index: 3;
  letter-spacing: .2px;
  user-select: none;
  pointer-events: none;
}
.ba::before{ content: "Avant"; left: 10px; }
.ba::after{  content: "Après"; right: 10px; }

.ba__wrap{ position: relative; width: 100%; height: 100%; }
.ba__img{
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;        /* montre ENTIER portrait/paysage */
  background: #4f5a34;    /* laisse voir l’olive derrière */
  user-select: none;
}
.ba__clip{
  position: absolute; inset: 0;
  clip-path: inset(0 50% 0 0);   /* démarre au milieu */
  pointer-events: none;
  z-index: 1;
}
.ba__handle{ position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ba__bar{
  position: absolute; top: 0; bottom: 0;
  width: 2px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 0 8px rgba(0,0,0,.15) inset;
}
.ba__knob{
  position: absolute; top: 50%;
  width: 34px; height: 34px;
  transform: translate(-50%, -50%);
  background: var(--olive, #6B7A47);
  border-radius: 9999px;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  display: grid; place-items: center;
  color: #fff; font-size: 14px; font-weight: 700;
}
@media (max-width: 640px){
  .ba::before, .ba::after{ font-size: .78rem; padding: 3px 8px; top: 8px; }
  .ba__knob{ width: 28px; height: 28px; font-size: 12px; }
}

/* Bouton plein écran */
.ba__zoom{
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  width: 38px; height: 38px; border-radius: 9999px; display: grid; place-items: center;
  background: rgba(0,0,0,.55); color: #fff; border: 1px solid rgba(255,255,255,.5);
  cursor: pointer;
}
.ba__zoom:hover{ background: rgba(0,0,0,.7); }

/* Carousel (scroll-snap) */
.carousel{ position: relative; }
.carousel-track{
  display: flex; gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .5rem;
}
.slide{ flex: 0 0 100%; scroll-snap-align: center; display: flex; justify-content: center; }
@media (min-width: 640px){  .slide{ flex-basis: 90%; } }
@media (min-width: 1024px){ .slide{ flex-basis: 75%; } }

/* scrollbar masquée */
.no-scrollbar::-webkit-scrollbar{ display: none; }
.no-scrollbar{ -ms-overflow-style: none; scrollbar-width: none; }

/* Flèches du carousel */
.car-btn{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 9999px;
  background: rgba(0,0,0,.45); color: #fff; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.4); cursor: pointer; user-select: none;
  z-index: 20;
}
.car-btn:hover{ background: rgba(0,0,0,.6); }
.car-btn.prev{ left: 6px; } .car-btn.next{ right: 6px; }

/* Lightbox */
.lb{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.8);
  display: none; align-items: center; justify-content: center;
  z-index: 50;
}
.lb.open{ display: flex; }
.lb-inner{ width: min(96vw, 1200px); height: min(86vh, 700px); position: relative; }
.lb-close{
  position: absolute; top: 10px; right: 10px;
  width: 42px; height: 42px; border-radius: 9999px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.6); color: #fff; border: 1px solid rgba(255,255,255,.5);
  cursor: pointer; z-index: 60;
}

.section-avant-apres{ background:#7e924f; }

.ba__wrap{ width:100%; height:100%; }
.ba__img{
  width:100%; height:100%;
  object-fit:contain;                         /* montre tout, portrait/paysage */
  background:transparent;
}

/* Badges Avant/Après plus grands */
.ba::before,
.ba::after{
  font-size: 1.3rem;         /* ~ +50% */
  padding: 6px 14px;
}

/* Un peu plus raisonnable sur mobile */
@media (max-width:640px){
  .ba::before, .ba::after{ font-size: 1rem; padding: 5px 10px; }
}

.carousel{ position: relative; overflow: hidden; }         /* masque les bords */
.carousel-track{
  display: flex;
  gap: 0;                                                  /* <-- pas d'espace entre slides */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;                                /* <-- force l'arrêt pile sur une slide */
  scroll-behavior: smooth;
  padding-bottom: .5rem;
}
.slide{
  flex: 0 0 100%;                                          /* <-- chaque slide = 100% de la largeur visible */
  scroll-snap-align: center;
  display: flex;
  justify-content: center;                                 /* <-- centre la .ba-box plus étroite */
}