/* ===========================
   ACCESSOIRES — STYLES COMPLETS
   =========================== */

/* Police Rota pour toute la page */
body {
    font-family: 'Rota-Regular', sans-serif;
}

/* Header simple (page autonome) */
.simple-header { padding:20px; text-align:left; }
.header-logo   { width:196px; height:auto; }

/* Page vs Modal containers */
.product-page-container { background:#fff; min-height:100vh; padding:20px 0; }
.product-container-page { max-width:1024px; margin:0 auto; padding:0 1.278%; }

.product-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.8);
  display:flex; align-items:center; justify-content:center;
  z-index:1000; padding:20px; box-sizing:border-box;
}

.product-container{
  position:relative;
  background:#fff; border-radius:20px; max-width:1000px; width:100%;
  max-height:90vh; overflow-y:auto; padding:0;
  box-shadow:0 10px 40px rgba(0,0,0,.30);
}

.product-page-container .product-container{
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  border-radius:12px;
}

/* Bouton fermer (modale uniquement) */
.modal-close-x{
  position:absolute; top:14px; right:16px;
  border:0; background:transparent; color:#2d3436;
  font-size:22px; line-height:1; cursor:pointer; padding:6px; border-radius:8px;
}
.modal-close-x:hover{ background:rgba(0,0,0,.06); }

/* Etiquette de mode (Achat/Location) */
.mode-indicator{
  position:absolute; top:16px; left:16px;
  background:#6c5ce7; color:#fff;
  padding:6px 12px; border-radius:999px;
  font-size:12px; font-weight:700; text-transform:uppercase;
}
.mode-indicator.location{ background:#00b894; }

/* Layout principal */
.product-content{ display:flex; min-height:600px; }

/* -------- Colonne images -------- */
.product-images-section{
  flex:1; padding:40px; background:#f8f9fa;
  border-radius:20px 0 0 20px;
  display:flex; flex-direction:column; gap:20px;
}

.product-main-image{
  flex:1; display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:15px; padding:10px; min-height:450px;
}
.product-main-image img{
  width:85%; height:85%; object-fit:contain; transition:opacity .3s ease;
}

/* Vignettes en bas */
.product-thumbnails{ display:flex; gap:15px; justify-content:flex-start; flex-wrap:wrap; }
.product-thumbnail{
  width:80px; height:80px; background:#fff; border-radius:10px; padding:10px;
  cursor:pointer; border:2px solid transparent; transition:all .3s ease;
  display:flex; align-items:center; justify-content:center;
}
.product-thumbnail:hover,
.product-thumbnail.active{
  border-color:#6c5ce7; transform:translateY(-2px);
  box-shadow:0 5px 15px rgba(108,92,231,.3);
}
.product-thumbnail img{ max-width:100%; max-height:100%; object-fit:contain; }

/* -------- Colonne détails -------- */
.product-details-section{
  flex:1; padding:40px; display:flex; flex-direction:column; gap:22px;
}

/* Fil d’ariane (texte simple) */
.product-breadcrumb{ font-size:14px; color:#666; margin-bottom:4px; }

/* Titre & sous-titre */
.product-title{ font-size:28px; font-weight:800; color:#2d3436; margin:0; }
.product-subtitle{ font-size:16px; color:#636e72; margin:0; }

/* -------- Bloc prix -------- */
.price-card{
  border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:16px 18px; background:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.04);
}
.price-card.is-rental{ border-color:#d6ecff; background:#f7fbff; }
.price-card.is-buy{    border-color:#efe7ff; background:#fbf9ff; }

.price-mainline{ display:flex; align-items:baseline; gap:10px; }
.price-current{  font-size:36px; font-weight:800; color:#2d3436; }
.price-unit{     font-size:18px; color:#636e72; }
.price-subline{  font-size:14px; color:#8a99a6; margin-top:6px; }

/* Pas de prix barré */
.price-strike{ display:none; }

/* -------- Notices (promo / info) -------- */
.notice-box{
  border-radius:10px; padding:14px 16px; line-height:1.45;
  border:1px solid transparent; background:#f6f7f9; color:#2d3436;
}
.notice-box .notice-title{ font-weight:700; margin-bottom:6px; }
.notice-box.promo{ background:#fef7e0; border-color:#f3e8c2; }
.notice-box.info{  background:#eaf4ff; border-color:#cfe6ff; }
.notice-box .highlight{ font-weight:800; color:#e17055; }

/* -------- Livraison (ligne discrète) -------- */
.delivery-row{
  display:flex; align-items:center; gap:8px;
  font-size:15px; color:#2d3436; margin-top:6px;
}
.product-delivery-icon{
  height:20px; width:auto; display:block; /* évite toute déformation */
}
.delivery-title{ font-weight:600; color:#10b981; }
.delivery-sep{   color:#a0a6ad; }
.delivery-sub{   color:#6b7280; }

/* -------- Avantages (Material Icons) -------- */
.product-features{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.product-feature{  display:flex; align-items:center; gap:10px; font-size:16px; color:#2d3436; }
.product-feature .material-icons{
  font-size:20px; color:#6c5ce7; background:#efe9ff; border-radius:999px; padding:4px;
}

/* -------- Alternative de prix (discrète) -------- */
.product-alt-price{
  margin-top:8px; font-size:13px; color:#6b7280;
}

/* -------- Espacement FAQ réduit -------- */
#section_faq {
  padding-top: 2rem !important;
}

/* -------- Détails techniques -------- */
.product-details{ 
  border-top:1px solid rgba(0,0,0,.06); 
  padding-top:12px; margin-top:8px; 
}
.product-details-title{ 
  font-weight:800; color:#2d3436; font-size:16px; margin-bottom:8px; 
}
.product-details-html ul{ 
  margin:0; padding-left:18px; color:#2d3436; 
}
.product-details-html li{ 
  margin:6px 0; line-height:1.4; 
}

/* -------- Responsive -------- */
@media (max-width: 768px){
  .product-modal{ padding:10px; }
  .product-content{ flex-direction:column; min-height:auto; }
  .product-images-section{ border-radius:20px 20px 0 0; padding:20px; }
  .product-main-image{ min-height:250px; padding:8px; }
  .product-details-section{ padding:20px; }
  .product-title{ font-size:24px; }
  .price-current{ font-size:30px; }
  .product-thumbnails{ gap:10px; }
  .product-thumbnail{ width:60px; height:60px; padding:8px; }
  
  /* Supprimer le double scroll en mobile */
  .product-container{ 
    max-height:none; overflow-y:visible; 
  }
  .product-page-container .product-container{
    max-height:none; overflow-y:visible;
  }
}

/* -------- Transitions image -------- */
.product-main-image img.fade-out{ opacity:0; }
.product-main-image img.fade-in{  opacity:1; }