/* ===== MODALE PRODUIT + CARROUSEL ===== */

.modal{
  position:fixed;
  inset:0;
  background:rgba(10,8,6,.62);
  backdrop-filter:blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:9999;
}

.modal.is-open{display:flex;}

/* Carte */
.modal-card{
  width:min(980px, 100%);
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border-radius:22px;
  box-shadow:0 28px 90px rgba(0,0,0,.28);
  border:1px solid rgba(225,216,207,.8);
}

/* Zone top (carousel + texte) */
.modal-top{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:18px;
  padding:16px;
}

@media (max-width: 820px){
  .modal-top{grid-template-columns:1fr;}
}

/* Bouton fermer */
.modal-close{
  position:sticky;
  top:10px;
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(225,216,207,.9);
  background:rgba(255,255,255,.92);
  cursor:pointer;
  box-shadow:0 10px 25px rgba(0,0,0,.10);
  z-index:2;
}

/* Texte */
.modal-text{
  padding:2px 2px 12px;
}

#modal-title{
  font-family:"Playfair Display", serif;
  font-size:1.55rem;
  line-height:1.15;
  margin:0 0 8px;
}

#modal-description{
  color: var(--text-muted, #6b6460);
  font-size:.92rem;
  margin:0 0 14px;
}

/* Titres des sections */
.modal-text h4{
  font-weight:800;
  font-size:.95rem;
  margin:12px 0 6px;
}

/* Listes */
.modal-text ul{
  margin-left:18px;
  color:#4f463f;
  font-size:.92rem;
}

.modal-text li{margin:4px 0;}

/* Prix */
.modal-text p{
  margin-top:10px;
  color:#4f463f;
  font-size:.95rem;
}

.modal-text p strong{
  font-weight:800;
}

/* CTA mail dans la modale (si tu utilises .btn-primary du HTML, il gardera le style inline) */
.modal-text .btn-primary{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  text-align:center;
  text-decoration:none;
}

/* ===== CAROUSEL ===== */

.carousel{
  border-radius:18px;
  overflow:hidden;
  background:#f1e7d8;
  position:relative;
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* L’image prend toute la zone et reste centrée */
.carousel img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:none;
}

.carousel img.is-active{display:block;}

/* Controls (prev/dots/next) */
.carousel-controls{
  position:absolute;
  inset:auto 12px 12px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  pointer-events:none; /* on rend cliquable seulement les boutons */
}

.carousel-btn,
.carousel-dots{
  pointer-events:auto;
}

.carousel-btn{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.45);
  color:#fff;
  cursor:pointer;
  font-size:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .12s ease, background .2s ease;
}

.carousel-btn:hover{
  transform:translateY(-1px);
  background:rgba(0,0,0,.60);
}

.carousel-dots{
  display:flex;
  gap:6px;
  justify-content:center;
  flex:1;
}

.carousel-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.15);
  cursor:pointer;
}

.carousel-dot.is-active{background:#fff;}

/* ===== Rend la carte bûche cliquable ===== */
.buche-card{
  cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease;
}

.buche-card:hover{
  transform:translateY(-2px);
}

/* ===== Responsive ===== */
@media (max-width: 768px){
  .carousel{min-height:260px;}
  .carousel-controls{inset:auto 10px 10px 10px;}
  .carousel-btn{width:42px;height:42px;font-size:18px;}
}