/* =============================
   CARTES SERVICES DEVIS
============================= */

.service-card{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 25px rgba(0,0,0,0.12);
  transition:all .25s ease;
  cursor:pointer;
  border:2px solid transparent;
}

/*.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 15px 35px rgba(0,0,0,0.18);
}*/

.service-card-label{
  display:block;
  cursor:pointer;
}

/* image principale */

.service-image{
  width:100%;
  overflow:hidden;
  position:relative;
  z-index:1;
}

.service-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}

.service-card:hover .service-image img{
  transform:scale(1.08);
}

/* icone ronde */

.service-icon{
  width:60px;
  height:60px;
  margin:-30px auto 10px auto;
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 15px rgba(0,0,0,0.15);
  position:relative;
  z-index:2;
  transition:transform .3s ease;
}

.service-icon img{
  width:70px;
  object-fit:contain;
}

.service-card:hover .service-icon{
  transform:scale(1.2);
}

/* contenu */

.service-content{
  text-align:center;
  padding:10px 20px 20px;
}

.service-content h4{
  font-weight:700;
  margin-bottom:8px;
}

.service-content p{
  font-size:14px;
  color:#666;
}

/* sélection */

.item.is-active.service-card{
  border-color:var(--accent-color);
  box-shadow:0 0 0 2px rgba(142,68,173,0.2), 0 10px 25px rgba(0,0,0,0.15);
}

.formule-card{
  cursor:pointer;
  transition:all .25s ease;
}

.formule-card:hover{
  transform:scale(1.02);
}

.item.is-active{
  border:2px solid #ff3d8e;
}


/* =============================
   PREVIEW CONFIGURATEUR
============================= */

.image-preview-container{
  display:flex;
  flex-direction:column;
  gap:30px;
}


/* =============================
   PREVIEW EVENEMENT
============================= */

.preview-event{
  position:relative;
  width:50%;
  border-radius:14px;
  overflow:hidden;
}

.preview-event img{
  width:100%;
  display:none;
}


/* =============================
   PREVIEW SCENE
============================= */

.preview-scene{
  position:relative;
  width:100%;
  border-radius:14px;
  overflow:hidden;
}

.preview-scene img{
  width:100%;
}

/* base scène */

#overlay-base{
  display:none;
}


/* =============================
   OVERLAYS OPTIONS
============================= */

.overlay-scene{
  position:absolute;
  inset:0;
  display:none;
  pointer-events:none;
}


/* =============================
   ANIMATION APPARITION
============================= */

.preview-event img,
.preview-scene img{
  opacity:0;
  transition:opacity .35s ease;
}

.preview-event img[style*="display: block"],
.preview-scene img[style*="display: block"]{
  opacity:1;
}
/* =============================
   CORRECTION PREVIEW KARAOKE
============================= */

/* images evenement = normales */

.preview-event img{
  position:relative !important;
  inset:auto !important;
}

/* image base scène = normale */

.preview-scene #overlay-base{
  position:relative !important;
  inset:auto !important;
  display:none;
}

/* overlays scène = superposition */

.preview-scene .overlay-scene{
  position:absolute !important;
  inset:0 !important;
}

/* =============================
   RECAP
============================= */

.preview-recap{
display:none;
}
.preview-event-recap{
  display:flex;
  gap:15px;
  align-items:flex-start;
}

.preview-recap{
  background:#fff;
  border-radius:10px;
  padding:15px;
  box-shadow:0 5px 20px rgba(0,0,0,0.1);
  font-size:14px;
  max-width:300px;
}

.preview-recap h5{
  font-weight:700;
}

.preview-recap p{
  margin-bottom:10px;
}
/* =============================
   RECAP CONFIGURATEUR
============================= */

.preview-recap{
background:#fff;
border-radius:14px;
padding:25px;
box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

.recap-section{
margin-bottom:20px;
}

.recap-section h6{
font-weight:700;
margin-bottom:10px;
color:#333;
}

.recap-list{
list-style:none;
padding-left:0;
margin:0;
}

.recap-list li{
padding:6px 10px;
margin-bottom:6px;
background:#f6f7fb;
border-radius:6px;
font-size:14px;
display:flex;
align-items:center;
gap:6px;
}

.recap-list li::before{
content:"✔";
color:#ff3d8e;
font-weight:bold;
}
/* =============================
   PLANNING
============================= */

.planning-container{
display:flex;
flex-direction:column;
gap:20px;
}

.planning-calendar{
max-width:250px;
}

/* créneaux */

.slots-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
}

.slot-btn{
border:none;
background:#f6f7fb;
padding:10px;
border-radius:8px;
font-weight:600;
cursor:pointer;
transition:.2s;
}

.slot-btn:hover{
background:#eceefe;
}

.slot-btn.active{
background:#ff3d8e;
color:white;
}

.slot-btn.disabled{
background:#eee;
color:#aaa;
cursor:not-allowed;
}
/* =============================
   PLANNING TYPE CALENDLY
============================= */

.planning-wrapper{
display:flex;
gap:30px;
align-items:flex-start;
flex-wrap:wrap;
}

/* calendrier */

.calendar-box{
background:#fff;
border-radius:14px;
padding:20px;
box-shadow:0 8px 25px rgba(0,0,0,0.12);
width:320px;
}

/* header */

.calendar-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px;
}

.calendar-nav{
border:none;
background:#f4f4f4;
width:32px;
height:32px;
border-radius:6px;
cursor:pointer;
font-size:18px;
}

/* grid */

.calendar-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:6px;
}

/* jour */

.calendar-day{
padding:8px;
text-align:center;
border-radius:6px;
cursor:pointer;
transition:.2s;
font-size:14px;
}

.calendar-day:hover{
background:#f6f7fb;
}

.calendar-day.active{
background:#ff3d8e;
color:#fff;
}

.calendar-day.disabled{
color:#bbb;
cursor:not-allowed;
}

/* créneaux */

.slots-box{
flex:1;
background:#fff;
border-radius:14px;
padding:20px;
box-shadow:0 8px 25px rgba(0,0,0,0.12);
min-width:250px;
}

.slots-title{
margin-bottom:15px;
font-weight:600;
}

.slots-container{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}

.slot{
border:1px solid #eee;
padding:10px;
text-align:center;
border-radius:8px;
cursor:pointer;
font-weight:600;
transition:.2s;
}

.slot:hover{
border-color:#ff3d8e;
}

.slot.active{
background:#ff3d8e;
color:#fff;
border-color:#ff3d8e;
}

.slots-placeholder{
color:#888;
font-size:14px;
}

/* Dates réservées */

.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
}

.calendar-weekday{
  font-weight:600;
  text-align:center;
  padding:6px;
  font-size:13px;
  color:#666;
}

.calendar-empty{
  height:40px;
}

.calendar-day{
  text-align:center;
  padding:10px;
  border-radius:8px;
  cursor:pointer;
  background:#f5f5f5;
}

.calendar-day:hover{
  background:#eaeaea;
}

.calendar-day.reserved{
  background:#ddd;
  color:#999;
  cursor:not-allowed;
}

.calendar-day.disabled{
  background:#f1f1f1;
  color:#bbb;
  cursor:not-allowed;
}

.calendar-day.active{
  background:#ff3d8e;
  color:#fff;
}