/*
Theme Name:   Autospa Child
Template:     autospa
Author:       QuanticaLabs
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  autospa-child
*/


/* BACKGROUND COLOR JAUNE BEIGE */
.theme-page-content {
    background-color: #F7F4EC !important;
}

/* ==================CSS AVANT APRES ==================   */

.dj-ba{
  --dj-yellow:#FFC107;
  --dj-text:#1a2b3c;
  max-width:1280px;
  margin:0 auto;
  padding:8px 16px 48px;
  font-family:inherit;
}
.dj-ba__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

/* ---------- Vignette ---------- */
.dj-ba__item{
  position:relative;
  margin:0;
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(20,50,90,.10);
  user-select:none;
}
.dj-ba__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Calque "après" : révélé selon --pos */
.dj-ba__apres{
  position:absolute;
  inset:0;
  clip-path:inset(0 0 0 var(--pos));
}
/* l'image interne garde la taille du conteneur → pas de déformation */
.dj-ba__apres .dj-ba__img{ position:absolute; inset:0; }

/* ---------- Poignée ---------- */
.dj-ba__handle{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--pos);
  width:3px;
  background:#fff;
  transform:translateX(-50%);
  box-shadow:0 0 8px rgba(0,0,0,.35);
  pointer-events:none;
}
.dj-ba__handle::after{
  content:"\2194";              /* ↔ */
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--dj-yellow);
  color:var(--dj-text);
  font-size:18px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.30);
}

/* ---------- Badges ---------- */
.dj-ba__badge{
  position:absolute;
  bottom:10px;
  padding:4px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#fff;
  background:rgba(26,43,60,.75);
  pointer-events:none;
}
.dj-ba__badge--avant{ left:10px; }
.dj-ba__badge--apres{ right:10px; }

/* ---------- Range invisible par-dessus tout ---------- */
.dj-ba__range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
  -webkit-appearance:none;
  appearance:none;
  touch-action:none; /* évite le scroll parasite pendant le drag mobile */
}
/* agrandir la zone du curseur natif pour un drag fluide */
.dj-ba__range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:60px;
  height:100vh;
}
.dj-ba__range::-moz-range-thumb{
  width:60px;
  height:100vh;
  border:0;
}
/* focus clavier visible sur la vignette */
.dj-ba__item:has(.dj-ba__range:focus-visible){
  outline:3px solid var(--dj-yellow);
  outline-offset:2px;
}

/* ---------- CTA ---------- */
.dj-ba__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:24px;
  padding:12px 22px;
  border:1px solid #d5dde6;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  color:var(--dj-text);
  text-decoration:none;
  transition:border-color .2s ease, background .2s ease;
}
.dj-ba__cta::after{ content:"\2192"; }
.dj-ba__cta:hover{
  border-color:var(--dj-yellow);
  background:rgba(255,193,7,.10);
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .dj-ba__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .dj-ba__grid{ grid-template-columns:1fr; gap:16px; }
}

/* Bouton jaune dans le menu */
.menu-btn-jaune > a{
  background:#FFC107 !important;
  color:#1a2b3c !important;
  border-radius:8px !important;
  padding:8px 20px !important;
  font-weight:700 !important;
  margin-left:12px !important;
  display:inline-block !important;
}
.menu-btn-jaune > a:hover{
  background:#FFB300 !important;
  color:#1a2b3c !important;
}
/* Retire le soulignement habituel des liens du menu */
.menu-btn-jaune > a::after{
  display:none !important;
}

.theme-page-header-top .theme-page-header-top-menu .theme-page-header-top-menu-default .menu-btn-jaune{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
}

.menu-btn-jaune{
  float:left !important;
  margin-top:28px !important; /* ajuste selon la hauteur du header */
}

.menu-btn-tel > a{
  background:#2E8EB7 !important;
  color:#fff !important;
  border-radius:8px !important;
  padding:8px 20px !important;
  font-weight:700 !important;
  margin-left:8px !important;
  display:inline-block !important;
  margin-top:28px !important;
}
.menu-btn-tel > a:hover{
  background:#2E8EB7 !important;
  color:#fff !important;
}
.menu-btn-tel > a::after{
  display:none !important;
}

.theme-icon-meta-cart{
  display:none !important;
}