/* ================================================================
   PLUS BELLE LA VAPE – CSS PREMIUM 2025 – VERSION COMPLETE
   Compatible PrestaShop 8.1.4 – Bootstrap 5
================================================================ */

/* -------------------- PALETTE -------------------- */
:root{
  --ocean-premium:#0F3A4F;
  --ocean-teal:#106D7A;
  --ocean-turquoise:#27C8B8;
  --ocean-turquoise-dark:#22B3A5;
  --ocean-turquoise-light:#7EF1E6;

  --bg-light:#F1F7F9;
  --white:#FFFFFF;
  --text-dark:#06222E;

  --gradient-ocean:linear-gradient(180deg,#0F3A4F 0%,#106D7A 100%);
  --shadow-light:rgba(0,0,0,0.06);
  --shadow-medium:rgba(0,0,0,0.14);
}

/* -------------------- GLOBAL -------------------- */
html,body,#wrapper{
  background:var(--bg-light) !important;
  color:var(--text-dark);
  font-family:"Poppins",sans-serif;
  margin:0;
  padding:0;
  overflow-x:hidden !important;
}

a{
  color:var(--ocean-teal) !important;
  transition:.25s;
}
a:hover{color:var(--ocean-turquoise) !important;}

#user_cart a[href*="contact"],
#_desktop_user_info a[href*="contact"],
.mobile-icons a[href*="contact"]{
  display:none !important;
}

/* ================================================================
   HEADER — DESKTOP (≥ 992px)
================================================================ */
@media(min-width:992px){

  #header.header-main{
    background:var(--gradient-ocean) !important; 
    padding:0 30px;
    box-shadow:0 2px 8px var(--shadow-light);
    border-bottom:1px solid var(--shadow-medium);
    display:flex;
    flex-direction:column;
    height:88px;
    justify-content:center;
    position:relative;
    z-index:999;
  }

  .header-row-1{
    display:grid;
    grid-template-columns:180px 1fr 180px;
    align-items:center;
    height:44px;
  }

  .header-logo-left img{
    height:80px !important;
    width:auto;
    object-fit:contain;
    background:white;
    border-radius:8px;
    padding:3px;
    box-shadow:0 3px 10px var(--shadow-light);
}
/* FIX POSITION LOGO – DESKTOP */
.header-logo-left{
  display:flex;
  align-items:center;
  height:100%;
}

.header-logo-left h1{
  margin:0 !important;
  line-height:1 !important;
  display:flex;
  align-items:center;
}

.header-logo-left a{
  display:flex;
  align-items:center;
}

  .header-row-2{
    display:grid;
    grid-template-columns:180px 1fr 260px;
    align-items:center;
    height:44px;
    margin-top:-8px;
  }

  .header-search-wrapper{
    display:flex;
    justify-content:center;
    margin-top:-12px !important;
  }

  #search_widget form{
    width:420px !important;
    background:white;
    border:2px solid var(--ocean-turquoise);
    border-radius:10px;
    height:40px;
    display:flex;
    align-items:center;
    overflow:hidden;
  }

  #search_widget input{
    flex:1;
    height:40px;
    padding-left:14px;
    border:none !important;
  }

  #search_widget button{
    background:var(--ocean-premium);
    color:white;
    height:40px;
    padding:0 20px;
    border:none;
  }

  .header-support{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:15px;
    font-weight:500;
    color:white !important;
    white-space:nowrap;
    margin-left:auto;
    margin-right:20px;
  }

  .header-user{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:30px !important;
    font-size:15px;
    color:white !important;
  }

  .header-user a{
    color:white !important;
    display:flex !important;
    align-items:center !important;
    line-height:1 !important;
  }

  .header-user .cart-preview{
    display:flex !important;
    align-items:center !important;
  }

  #_mobile_logo,
  #search_widget_mobile,
  .mobile-nav-bar{
    display:none !important;
  }
}

/* ================================================================
   FIX ALIGNEMENT CONNEXION + PANIER (DESKTOP)
================================================================ */
#_desktop_user_info,
#user_cart{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:25px !important;
}

#_desktop_user_info a,
#user_cart .header{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  color:white !important;
}

#_desktop_user_info i.material-icons,
#user_cart i.material-icons{
  font-size:22px !important;
  width:22px !important;
  height:22px !important;
  display:inline-flex !important;
  justify-content:center !important;
  align-items:center !important;
  color:white !important;
}

#_desktop_user_info span,
#user_cart span{
  display:inline-flex !important;
  align-items:center !important;
  color:white !important;
  font-size:15px !important;
  line-height:1 !important;
}

/* ================================================================
   MOBILE & TABLET (< 992px)
================================================================ */
@media(max-width:991px){

  #header.header-main{
    background:white;
    padding:12px 15px 8px;
    box-shadow:0 2px 6px var(--shadow-light);
    border-bottom:1px solid var(--shadow-medium);
  }

  #_mobile_logo{
    display:flex !important;
    justify-content:center;
    margin-bottom:8px;
  }

  #_mobile_logo img{
    width:130px !important;
    height:auto;
  }

  #search_widget_mobile{
    display:flex !important;
    justify-content:center;
    margin-bottom:10px;
  }

  #search_widget_mobile form{
    width:90% !important;
    border:2px solid var(--ocean-turquoise);
    border-radius:10px;
    background:white;
  }

  .mobile-nav-bar{
    display:flex !important;
    justify-content:space-between;
    align-items:center;
    padding:6px 0;
  }

  .mobile-menu-toggle{
    display:flex;
    flex-direction:column;
    gap:3px;
    background:transparent;
    border:none;
  }

  .burger-line{
    width:26px;
    height:3px;
    background:var(--ocean-premium);
    border-radius:3px;
  }

  .mobile-icons{
    display:flex;
    gap:18px !important;
  }

  .header-row-1,
  .header-row-2{
    display:none !important;
  }
}

/* ================================================================
   MENU PRINCIPAL — PREMIUM
================================================================ */
#main_menu{
  background:var(--ocean-premium) !important;
  padding:8px 0 !important;
  border-bottom:3px solid var(--ocean-turquoise);
  text-align:center;
}

#main_menu > ul{
  display:inline-flex !important;
  gap:40px !important;
}

#main_menu > ul > li > a{
  padding:10px 22px !important;
  font-size:14px !important;
  font-weight:600 !important;
  transition:0.25s ease;
}

#_desktop_top_menu .top-menu > li > a{
  color:#FFFFFF !important;
}

#_desktop_top_menu .top-menu > li{
  padding:0 18px !important;
}

#main_menu > ul > li > a:hover{
  background:#33D1C4 !important;
  color:white !important;
  border-radius:4px;
}

/* ================================================================
   SOUS-MENU PREMIUM
================================================================ */
#_desktop_top_menu .sub-menu,
#_desktop_top_menu .top-menu .sub-menu,
#_desktop_top_menu .top-menu .popover{
  background:var(--ocean-turquoise) !important;
  padding:6px 10px !important;
  border:none !important;
  margin-top:0 !important;
}

#_desktop_top_menu .sub-menu a{
  color:white !important;
  font-size:14px !important;
  padding:6px 10px !important;
  line-height:1.2 !important;
  text-align:center !important;
  display:block !important;
}

#_desktop_top_menu .sub-menu a:hover{
  background:#33D1C4 !important;
  border-radius:4px;
}

/* ================================================================
   FOOTER PREMIUM
================================================================ */
.footer-container,
#footer{
  background:var(--gradient-ocean) !important;
  padding:60px 40px !important;
  border-top:3px solid var(--ocean-turquoise) !important;
  color:white !important;
}

#footer *{
  color:#ffffff !important;
  text-shadow:none !important;
}

#footer h4{
  font-weight:700 !important;
  font-size:17px !important;
  text-transform:uppercase !important;
  padding-left:8px !important;
  border-left:3px solid var(--ocean-turquoise) !important;
  margin-bottom:12px !important;
}

#footer a{
  color:#ffffff !important;
  font-size:15px !important;
  text-decoration:none !important;
  transition:0.25s ease;
}

#footer a:hover{
  color:var(--ocean-turquoise-light) !important;
}

#footer ul{
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
}

#footer li{
  margin:6px 0 !important;
}

.footer-social{
  text-align:center !important;
  margin-top:40px !important;
  width:100%;
  overflow:hidden !important;
}

.footer-social-title{
  font-size:18px !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  margin-bottom:15px !important;
}

.footer-social-icons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  padding:0 10px;
}

.social-icon{
  width:48px;
  height:48px;
  background:rgba(255,255,255,0.15);
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:.25s;
}

.social-icon:hover{
  background:var(--ocean-turquoise);
  transform:translateY(-3px);
}

.social-icon img{
  width:25px !important;
  height:25px !important;
  object-fit:contain;
}

.footer-copyright{
  margin-top:25px !important;
  font-size:13px !important;
  color:rgba(255,255,255,0.8) !important;
  text-align:center !important;
}

/* ================================================================
   RESPONSIVE
================================================================ */
@media(max-width:768px){
  #footer{
    padding:40px 20px !important;
  }

  .social-icon{
    width:42px !important;
    height:42px !important;
  }

  .social-icon img{
    width:20px !important;
    height:20px !important;
  }
}

/* ================================================================
   FIX SAFARI iPHONE – DÉBORDEMENT LOGOS
================================================================ */
@supports (-webkit-touch-callout: none){
  .footer-social-icons{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 22px !important;
    box-sizing:border-box !important;
  }

  .social-icon{
    margin:5px !important;
  }
}

/* ================================================================
   AJOUTS FINAUX — SOUS-MENU (SEULE MODIF)
================================================================ */
#_desktop_top_menu .sub-menu{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}

#_desktop_top_menu .sub-menu li{
  margin:0 !important;
  padding:0 !important;
}

#_desktop_top_menu .sub-menu a:hover{
  background:#0F3A4F !important;
  color:#FFFFFF !important;
}

/* ================================================================
   OVERRIDE FINAL — ALIGNEMENTS MENU & FOOTER
================================================================ */
#main_menu{
  padding:6px 0 !important;
}

#main_menu > ul > li > a{
  padding:6px 22px !important;
  line-height:1.3 !important;
}

#_desktop_top_menu .sub-menu,
#_desktop_top_menu .top-menu .sub-menu{
  padding:6px 0 !important;
}

#_desktop_top_menu .sub-menu a{
  padding:6px 22px !important;
  line-height:1.3 !important;
}

.footer-copyright{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  text-align:center !important;
}

/* ================================================================
   🔥 PATCH FINAL — BLOCS FOOTER MOBILE (QUI MARCHE)
================================================================ */
@media (max-width:768px){

  #footer .block-links,
  #footer .block-content{
    background:#ffffff !important;
    border-radius:10px;
    padding:12px 14px;
  }

  #footer .block-links a,
  #footer .block-links li a,
  #footer .links a{
    color:var(--ocean-premium) !important;
    font-weight:500;
  }

  #footer .block-links a:hover{
    color:var(--ocean-turquoise) !important;
  }

  #footer .block-title,
  #footer .block-title span,
  #footer .block-title i{
    color:var(--ocean-premium) !important;
  }
}
@media (max-width: 991px){
  #left-column{
    position: relative;
  }

  #left-column .block-categories{
    max-height: 70vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}
/* ==========================================================
   MOBILE – SUPPRESSION DES FLÈCHES MENU (UX PRO)
   Les catégories sont des liens, pas des accordéons
========================================================== */
@media (max-width:768px){

  /* Supprime les icônes flèche / caret */
  #_mobile_top_menu .top-menu i,
  #_mobile_top_menu .top-menu .dropdown-toggle::after,
  #_mobile_top_menu .top-menu .expand-more{
    display:none !important;
  }

  /* Assure que le lien prend toute la largeur */
  #_mobile_top_menu .top-menu > li > a{
    display:block;
  }

}

/* ==========================================================
   MOBILE – CORRECTION CATÉGORIES (Prestashop 8 – Classic)
   - Supprime la liste TEXTE en doublon
   - Garde les catégories AVEC images
========================================================== */
@media (max-width:768px){

  /* ❌ Liste texte inutile */
  #category .category-sub-menu{
    display:none !important;
  }

  /* ✅ Grille visuelle des sous-catégories */
  #category .block-subcategories{
    display:block !important;
  }
}
/* FIX DEFINITIF – ETS AGE VERIFICATION (texte lisible) */
#footer .ets_av_content_popup,
#footer .ets_av_content_popup * {
  color: #06222E !important;
}

/* COOKIE BANNER – FIX MOBILE UNIQUEMENT */
@media (max-width: 480px) {
  .ets_cookie_banner_footer {
    flex-direction: column !important;
    gap: 10px;
  }

  .ets_cookie_banner_footer a {
    width: 100% !important;
    white-space: normal !important;
  }
}
/* ==========================================================
   🔥 SUPPRESSION RÉELLE DU NIVEAU 3 – PRESTASHOP 8 CLASSIC
   Garde titres (niveau 2), cache les liens enfants (niveau 3)
========================================================== */

@media (min-width: 992px) {

  /* Cache les listes internes = niveau 3 */
  #_desktop_top_menu .sub-menu li ul {
    display: none !important;
  }

}
/* ==========================================================
   PRESTASHOP 8 – SOUS-CATÉGORIES (VERSION FINALE PRO)
   - Images si elles existent
   - Texte seul compact si pas d’image
   - AUCUNE hauteur fantôme
========================================================== */

/* ===== SUPPRESSION HEADER CATÉGORIE ===== */
#category .block-category,
#category .block-category img,
#category .category-cover {
  display: none !important;
}

/* ===== RESET CARTES PRESTASHOP ===== */
#category .block-subcategories .card,
#category .block-subcategories .card-block {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ===== GRILLE ===== */
#category .subcategories-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin-top: 20px;
}

/* ===== TUILE BASE ===== */
#category .subcategories-list li {
  background: #fff;
  border: 1px solid #e8eef3;
  text-align: center;
  transition: border-color 0.2s ease;
}

/* Hover */
#category .subcategories-list li:hover {
  border-color: #0097a7;
}

/* ===== CONTENEUR IMAGE (NE RÉSERVE JAMAIS D’ESPACE) ===== */
#category .sub-category-image {
  display: block;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Image réelle */
#category .sub-category-image img {
  display: block;
  max-width: 140px;
  max-height: 140px;
  object-fit: contain;
  margin: 14px auto 8px;
}

/* ===== SI AUCUNE IMAGE → ON SUPPRIME LE BLOC ===== */
#category .sub-category-image:not(:has(img)) {
  display: none !important;
}

/* ===== TUILE AVEC IMAGE ===== */
#category .subcategories-list li:has(img) {
  padding-bottom: 14px;
}

/* ===== TUILE SANS IMAGE (MODE TEXTE SEUL) ===== */
#category .subcategories-list li:not(:has(img)) {
  padding: 10px 8px !important;
}

/* ===== TITRE ===== */
#category .subcategories-list h5 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 8px 0;
  color: #006b7c;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  #category .subcategories-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  #category .sub-category-image img {
    max-width: 110px;
    max-height: 110px;
  }
}
/* ==========================================================
   BANDEAU INFO – VERSION FINALE SANS TROU
========================================================== */

.top-marquee{
  width:100%;
  background:var(--ocean-premium);
  color:#ffffff;
  overflow:hidden;
  font-size:13px;
  font-weight:500;
  border-bottom:1px solid rgba(255,255,255,0.15);
  position:relative;
  z-index:1000;
}

/* Masques latéraux premium */
.top-marquee::before,
.top-marquee::after{
  content:"";
  position:absolute;
  top:0;
  width:60px;
  height:100%;
  z-index:2;
  pointer-events:none;
}

.top-marquee::before{
  left:0;
  background:linear-gradient(to right,var(--ocean-premium),transparent);
}

.top-marquee::after{
  right:0;
  background:linear-gradient(to left,var(--ocean-premium),transparent);
}

/* Track continu */
.top-marquee-track{
  display:flex;
  width:max-content;
  animation: marquee-premium 70s linear infinite;
}

/* Messages */
.top-marquee span{
  white-space:nowrap;
  padding:8px 26px;   /* ESPACE ÉQUILIBRÉ */
  display:flex;
  align-items:center;
  gap:6px;
}

/* Animation CONTINUE SANS BLANC */
@keyframes marquee-premium{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* Mobile */
@media(max-width:768px){
  .top-marquee{
    font-size:12px;
  }

  .top-marquee span{
    padding:6px 18px;
  }
}
/* Séparateur discret entre messages */
.top-marquee span:not(:last-child)::after{
  content:"•";
  margin-left:24px;
  color:rgba(255,255,255,0.45);
  font-weight:400;
}