/* =========================
   ELITE MOBILE (max 991px)
   clean + light + conversions
========================= */

body{
  background: #f4efe9 !important;
  color: #2c2c2c !important;
}

/* Marble léger (comme desktop) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: url('/themes/diabloelite/assets/img/marble-light.jpg') center/cover no-repeat;
  opacity: 0.12;
  z-index: -1;
}

/* NAV mobile compact */
.elite-nav{
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 8px 0 !important;
}

.elite-logo{
  height: 40px !important;
}

.navbar-toggler{
  padding: 6px 10px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.70) !important;
}

.elite-menu .nav-link{
  margin: 0 !important;
  padding: 10px 10px !important;
  border-radius: 14px !important;
}

.elite-right{
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  padding: 10px 0 2px !important;
}

.elite-support-btn,
.elite-account-btn,
.elite-lang,
.elite-icon-btn{
  height: 40px !important;
}

/* HERO mobile: stack + tailles */
.elite-hero{
  padding: 26px 0 16px !important;
}

.elite-hero-inner{
  flex-direction: column !important;
  gap: 16px !important;
}

.elite-title{
  font-size: 34px !important;
  line-height: 1.05 !important;
}

.elite-sub{
  font-size: 15px !important;
  line-height: 1.55 !important;
}

/* Carte droite du hero plus basse */
.elite-hero-right{
  min-height: 140px !important;
  border-radius: 22px;
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.06) !important;
}

/* Stop le "dark" caché: on force les backgrounds en transparent */
main,
.hero-home-bg,
.hero-home-bg.hero-streaming,
.hero-slide,
.hero-slider-container{
  background: transparent !important;
}

/* =========================
   MOBILE DEBUG: KILL DARK
   (temporaire)
========================= */
@media (max-width: 991px){

  /* 1) Force fond clair global */
  html, body, main,
  .container, .container-fluid, .lp-container,
  section, header, footer, nav,
  .card, .row, .col, [class*="bg-"]{
    background-color: #f4efe9 !important;
    color: #1f1f1f !important;
  }

  /* 2) Si Bootstrap text-light/bg-dark traînent */
  .bg-dark, .text-bg-dark{
    background-color: #f4efe9 !important;
    color: #1f1f1f !important;
  }
  .text-light{
    color: #1f1f1f !important;
  }

  /* 3) Images/card overlays qui “teintent” en noir */
  [class*="overlay"], [class*="shadow"], [class*="dark"]{
    background-color: transparent !important;
  }
}


@media (max-width: 768px){


/* Mobile: la VIP card ne doit pas passer avant la bannière */
.elite-hero-right{ display: none !important; }

  /* Cache la bannière/slider injecté par $bannerHtml */
  .elite-banner-strip .hero-slider-container,
  .elite-banner-strip .hero-slide,
  .elite-banner-strip img{
    display: none !important;
  }

  /* Bannière mobile fixe */
  .elite-banner-strip .lp-container::before{
    content: "";
    display: block;
    width: 100%;
    height: 520px;
    border-radius: 18px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 18px 40px rgba(0,0,0,.10);
  }

  /* Lun-Ven */
  body.is-weekday .elite-banner-strip .lp-container::before{
    background-image: url("/themes/diabloelite/assets/img/banner_week-day.webp");
  }

  /* Sam-Dim */
  body.is-weekend .elite-banner-strip .lp-container::before{
    background-image: url("/themes/diabloelite/assets/img/banner_week-end.webp");
  }
}
@media (max-width: 768px){

  /* La section bannière peut dépasser le container */
  .elite-banner-strip{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* On élargit le container UNIQUEMENT pour la bannière */
  .elite-banner-strip .lp-container{
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 8px !important;   /* ajuste: 0, 8, 12 */
    padding-right: 8px !important;
  }

  /* La bannière prend toute la largeur disponible */
  .elite-banner-strip .lp-container::before{
    width: 100% !important;
    border-radius: 22px !important;  /* look premium */
  }
}

@media (max-width: 768px){

  /* On veut un contexte pour position absolute */
  .elite-banner-strip .lp-container{
    position: relative !important;
  }

  /* Le visuel mobile (ton ::before) doit être sous le lien */
  .elite-banner-strip .lp-container::before{
    position: relative;
    z-index: 5;
  }

  /* Le slider HTML doit être en dessous et non cliquable */
  .elite-banner-strip .hero-slider-container,
  .elite-banner-strip .hero-slide,
  .elite-banner-strip .hero-slide-link,
  .elite-banner-strip img{
    pointer-events: none !important;
  }

  /* Le lien cliquable au-dessus de tout */
  .elite-banner-strip .mobile-banner-link{
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999 !important;
    display: block !important;
    border-radius: 22px;
    background: transparent;
  }

  /* Switch weekday/weekend */
  body.is-weekday .mobile-banner-weekend{ display:none !important; }
  body.is-weekend .mobile-banner-weekday{ display:none !important; }
}

@media (max-width: 768px){

  /* 1) Sur mobile: on met le FORM avant la description */
  .elite-product-bottom{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .elite-product-bottom .elite-form{ order: 1; }
  .elite-product-bottom .elite-details{ order: 2; }

  /* 2) On enlève un peu de “longueur” inutile */
  .elite-zoom-hint{ display:none !important; } /* “Cliquer pour agrandir” */
  .elite-media-main img{ height: 240px !important; } /* moins tall */

  /* 3) Description: clamp (pliable) */
  .elite-details-text{
    display: -webkit-box;
    -webkit-line-clamp: 7;          /* 7 lignes visibles */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .elite-details-text.is-open{
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  /* Bouton lire la suite */
  .elite-readmore{
    display: inline-flex;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.75);
    font-weight: 800;
    color: #8b6516;
    cursor: pointer;
  }

  /* 4) Sticky bar */
  .elite-sticky-buy{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 76px;                  /* laisse la place au bouton chat */
    z-index: 9999;
    padding: 10px;
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
    display: none;                 /* affiché via JS */
  }

  .elite-sticky-buy .elite-cta-btn{
    height: 52px;
    border-radius: 16px;
    width: 100%;
    font-size: 16px;
  }

  /* espace en bas pour sticky + chat */
  body{ padding-bottom: 190px !important; }
}

@media (max-width: 768px){

  /* PRODUCT PAGE: full width (stop la colonne skinny) */
  .elite-product .lp-container{
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* La carte doit occuper la largeur */
  .elite-product-card{
    width: 100% !important;
    border-radius: 18px !important;
  }

  /* Moins de padding interne = plus de place pour les options */
  .elite-product-head{
    padding: 18px 14px 8px !important;
  }

  .elite-product-top{
    padding: 14px !important;
    grid-template-columns: 1fr !important; /* au cas où */
  }

  .elite-product-bottom{
    padding: 14px !important;
  }

  /* Form: plein large */
  .elite-form{
    width: 100% !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  /* Champs plus gros et full */
  .elite-label{
    font-size: 15px !important;
  }

  .elite-control{
    width: 100% !important;
    height: 54px !important;
    font-size: 16px !important;
    border-radius: 16px !important;
  }

  .elite-form .elite-cta-btn{
    width: 100% !important;
    height: 58px !important;
    font-size: 18px !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 768px){

  /* MAC row: autorise wrap et évite débordement */
  .elite-mac-row{
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Prefix sur sa propre ligne si nécessaire */
  .elite-mac-prefix{
    width: 100% !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  /* Les inputs prennent la largeur restante */
  .elite-mac-inputs{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .elite-mac-field{
    width: 100% !important;
    height: 54px !important;
    font-size: 18px !important;
    border-radius: 14px !important;
  }

  /* Empêche les éléments de sortir du card */
  .elite-form{
    overflow: hidden !important;
  }
}

/* =========================
   CART — Mobile cards (Elite)
========================= */
@media (max-width: 991px){

  /* Layout: stack */
  .cart-layout{
    gap: 14px !important;
  }

  /* Table devient des cartes */
  .cart-desktop table,
  .cart-desktop thead{
    display: none !important; /* on cache le header */
  }

  .cart-desktop table{
    display: block !important;
    width: 100% !important;
  }

  .cart-desktop tbody{
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .cart-desktop tbody tr{
    display: grid !important;
    grid-template-columns: 110px 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.06) !important;
    overflow: hidden !important;
  }

  /* Cells = blocks */
  .cart-desktop tbody tr td{
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  /* 1) Produit: image + nom à gauche */
  .cart-desktop tbody tr td:nth-child(1){
    grid-column: 1 / 2 !important;
  }
  .cart-desktop tbody tr td:nth-child(1) img{
    width: 100% !important;
    max-width: 110px !important;
    height: 110px !important;
    max-height: 110px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0,0,0,.08) !important;
  }
  .cart-desktop tbody tr td:nth-child(1) .mt-2{
    margin-top: 8px !important;
    text-align: left !important;
    font-weight: 900 !important;
    font-size: 15px !important;
  }

  /* 2) Détails: à droite */
  .cart-desktop tbody tr td:nth-child(2){
    grid-column: 2 / 3 !important;
    font-size: 14px !important;
    color: rgba(20,20,20,.78) !important;
  }
  .cart-desktop tbody tr td:nth-child(2) ul{
    margin: 0 !important;
    padding-left: 18px !important;
  }
  .cart-desktop tbody tr td:nth-child(2) li{
    margin-bottom: 4px !important;
  }

  /* 3) Qty + OK + Prix + Delete en bas */
  .cart-desktop tbody tr td:nth-child(3){
    grid-column: 1 / 3 !important;
    margin-top: 8px !important;
  }
  .cart-desktop tbody tr td:nth-child(3) form{
    justify-content: flex-start !important;
  }
  .cart-desktop tbody tr td:nth-child(3) input[type="number"]{
    width: 86px !important;
    height: 46px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
  }

  .cart-desktop tbody tr td:nth-child(4){
    grid-column: 1 / 2 !important;
    margin-top: 10px !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    text-align: left !important;
  }

  .cart-desktop tbody tr td:nth-child(5){
    grid-column: 2 / 3 !important;
    margin-top: 10px !important;
    text-align: right !important;
  }
  .cart-desktop tbody tr td:nth-child(5) .btn-danger{
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    padding: 0 !important;
  }

  /* SUMMARY: cartes verticales, full width */
  .cart-summary-desktop .card{
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.08) !important;
    color: #1f1f1f !important;
  }

  .cart-summary-desktop h4{
    font-weight: 900 !important;
    margin-bottom: 12px !important;
  }

  .cart-summary-desktop .table{
    margin-bottom: 10px !important;
  }

  .cart-summary-desktop .table tr,
  .cart-summary-desktop .table td,
  .cart-summary-desktop .table th{
    background: transparent !important;
    color: #1f1f1f !important;
    border-color: rgba(0,0,0,.06) !important;
  }

  .cart-summary-desktop .cart-total-row th{
    font-size: 20px !important;
  }

  /* CTA en bas: gros bouton */
  .cart-summary-desktop .btn.btn-primary.btn-lg{
    height: 68px !important;
    border-radius: 18px !important;
    font-weight: 900 !important;
  }
}

.elite-proof{
  font-size: 14.5px;
}
.elite-proof-icon{ font-size: 18px; line-height: 1; }

@media (max-width: 991px){
  .vip-mini-card{ display:none !important; }
}