/* ==========================================================
   PearlBike — Custom UI (Version Intégrale & Optimisée)
   ========================================================== */

:root {
  /* Brand Tokens */
  --pb-primary: #177CD2;
  --pb-primary-hover: #1369B3;
  --pb-accent: #42C0F0;
  --pb-ink: #0b1b2b;
  --pb-muted: rgba(11,27,43,.68);

  /* Geometry */
  --pb-radius: 16px;
  --pb-radius-lg: 22px;

  /* Glassmorphism */
  --pb-glass-bg: rgba(255,255,255,.74);
  --pb-glass-bg-strong: rgba(255,255,255,.92);
  --pb-glass-border: rgba(23,124,210,.16);
  --pb-glass-shadow: 0 22px 70px rgba(0,0,0,.14);

  /* Animation */
  --pb-speed-1: 140ms;
  --pb-speed-2: 220ms;
  --pb-ease: cubic-bezier(.2,.8,.2,1);
  --pb-ring: 0 0 0 .22rem rgba(66,192,240,.28);
}

/* ==========================================================
   1. GLOBAL & BOUTONS
   ========================================================== */
button.btn.btn-primary, a.btn.btn-primary {
  background-color: var(--pb-primary) !important;
  border-color: var(--pb-primary) !important;
  color: #fff !important;
  transition: all var(--pb-speed-2) var(--pb-ease) !important;
}
button.btn.btn-primary:hover, a.btn.btn-primary:hover {
  background-color: var(--pb-primary-hover) !important;
  transform: translateY(-1px);
}
button.btn.btn-primary:focus, a.btn.btn-primary:focus {
  box-shadow: var(--pb-ring) !important;
}

/* Badges & Flags */
ul.product-flags li.badge { color:#fff !important; border: 0 !important; }
ul.product-flags li.badge.new { background: var(--pb-accent) !important; }
ul.product-flags li.badge.out_of_stock { background: #616161 !important; }

/* Titres Produits */
p.product-miniature__title { color: var(--pb-primary) !important; transition: color var(--pb-speed-1); }
.product-miniature:hover p.product-miniature__title { color: var(--pb-accent) !important; }

/* ==========================================================
   2. HEADER & NAVIGATION
   ========================================================== */
#_desktop_cart { position: relative; z-index: 5001 !important; }
.header-block.blockcart { pointer-events: auto !important; }

@media (min-width: 992px) {
  #header, #header .header-nav, #header .header-top, #header .main-menu, #header .top-menu { overflow: visible; }
}

#header .header-bottom {
  background: var(--pb-glass-bg) !important;
  border-bottom: 1px solid rgba(23,124,210,.10) !important;
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  z-index: 1000;
}

/* Alignement Logo */
.header-bottom__row { align-items: center !important; min-height: 90px; }
.header-bottom .logo img { max-height: 65px; width: auto; transition: transform 0.3s var(--pb-ease); }
.header-bottom .logo img:hover { transform: scale(1.05); }

/* Navigation Pills */
#header .js-menu-desktop #top-menu > li { position: relative !important; } 

#header .js-menu-desktop #top-menu > li > a.pb-nav-link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 999px;
  color: var(--pb-ink); font-weight: 600; text-decoration: none;
  transition: all var(--pb-speed-2) var(--pb-ease);
}

#header .js-menu-desktop #top-menu > li > a.pb-nav-link:hover,
#header .js-menu-desktop #top-menu > li.pb-click-open > a.pb-nav-link {
    background: rgba(66, 192, 240, 0.12);
    color: var(--pb-primary);
}
/* Indicateur Premium sous bouton */
#header .js-menu-desktop #top-menu > li > a.pb-nav-link::after {
  content: ''; position: absolute; bottom: 5px; left: 50%; width: 0; height: 2px;
  background: var(--pb-accent); transition: all 0.3s var(--pb-ease); transform: translateX(-50%); border-radius: 2px;
}
#header .js-menu-desktop #top-menu > li:hover > a.pb-nav-link::after { width: 20px; }

/* ==========================================================
   3. MEGA MENU (ALIGNE & SÉCURISÉ)
   ========================================================== */
#header .js-menu-desktop .main-menu__tree__item { position: static; }

#header .js-menu-desktop #top-menu > li > .pb-mega-container {
    position: absolute !important;
    top: calc(100% + 8px) !important; 
    left: 0 !important;
    width: 850px; 
    z-index: 9999 !important;
    
    /* On retire la liaison invisible */
    padding-top: 0 !important;  
    margin-top: 0 !important;  
    background: transparent !important;
    
    /* Animation de transition */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--pb-speed-2) var(--pb-ease), transform var(--pb-speed-2) var(--pb-ease);
    pointer-events: none;
}


.pb-mega-surface {
    background: #ffffff !important; 
    border-radius: var(--pb-radius-lg) !important; 
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important; /* Ombre plus douce et profonde */
    overflow: hidden; /* Empêche le contenu de masquer les arrondis */
}
/* Contenu de la Grille */
.pb-mega-head {
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 16px 20px;
    background: #f8fafd !important; /* Teinte très légère */
    border-radius: var(--pb-radius-lg) var(--pb-radius-lg) 0 0 !important;
    border-bottom: 1px solid rgba(23, 124, 210, 0.05) !important;
}
.pb-mega-head__label { font-weight: 800; color: var(--pb-ink); font-size: 1.1rem; }
.pb-mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 20px; }
.pb-mega-heading { font-weight: 800; color: var(--pb-ink); text-decoration: none; padding: 10px; border-radius: 12px; transition: all 0.2s; display: block; }
.pb-mega-heading:hover { background: rgba(23, 124, 210, 0.05); color: var(--pb-primary); }
.pb-mega-link { display: block; padding: 8px 12px; color: var(--pb-muted); text-decoration: none; border-radius: 10px; transition: all 0.2s; }
.pb-mega-link:hover { background: #fff; color: var(--pb-primary); transform: translateX(4px); }
/* Supprime le lien "Tout voir" / "View all" */
.pb-mega-head__link, 
.pb-mega-head a,
#top-menu .view-all { 
    display: none !important; 
}

/* On centre le titre du coup pour que ce soit plus joli */
.pb-mega-head {
    justify-content: center !important;
}

//* ==========================================================
   FIX DÉFINITIF : VERROUILLAGE DU MENU DÉROULANT
   ========================================================== */

/* 1. On crée une zone tampon pour que le curseur ne "quitte" jamais le menu entre le bouton et la liste */
#header .js-menu-desktop #top-menu > li.pb-click-open::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -20px; /* Pont invisible de 20px vers le bas */
    z-index: 1;
}

/* 2. On neutralise toute animation qui pourrait ralentir l'interaction et créer un lag de fermeture */
#header .js-menu-desktop #top-menu > li.pb-click-open > .pb-mega-container {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* 3. On empêche le clic sur le lien parent de re-déclencher une fermeture immédiate */
#header .js-menu-desktop #top-menu > li.pb-click-open > a {
    pointer-events: none !important; 
}
/* Mais on réactive le clic sur le texte lui-même pour la navigation */
#header .js-menu-desktop #top-menu > li.pb-click-open > a span {
    pointer-events: auto !important;
}

/* 4. Désactivation des effets de survol natifs qui pourraient interférer avec notre JS de clic */
.js-menu-desktop .menu-dropdown, 
.js-menu-desktop .popover {
    display: none !important;
}
/* ==========================================================
   4. AJUSTEMENT FINAL : HAUTEUR & ALIGNEMENT
   ========================================================== */
@media screen and (max-width: 991px) {
    /* 1. On libère la hauteur du header pour accueillir les boutons */
    #header .header-bottom,
    #header .header-bottom .container {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        padding-bottom: 15px !important;
        overflow: visible !important; /* Pour que les boutons ne soient plus coupés */
    }

    /* 2. On repositionne le logo pour qu'il ne pousse pas tout */
    #header .header-bottom .row {
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
    }

    /* 3. Le ruban de boutons (Pills) */
    body #header #top-menu {
        display: block !important;
		white-space: nowrap !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px !important;
        margin: 5px 0 0 0 !important; /* Un peu d'espace sous le logo */
        border: none !important;
    }

    /* 4. Style ajusté des boutons */
    body #header #top-menu > li {
        flex: 0 0 auto !important;
        list-style: none !important;
    }

    body #header #top-menu > li > a.pb-nav-link {
        background: #f1f5f9 !important;
        color: #177CD2 !important;
        padding: 6px 14px !important; /* On réduit un peu la taille pour que ça rentre mieux */
        border-radius: 50px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        margin-right: 8px !important;
        border: 1px solid rgba(23, 124, 210, 0.1) !important;
    }

    /* 5. On cache les résidus du thème mobile */
    #header .menu-icon, .pb-mega-container { 
        display: none !important; 
    }
}
/* ==========================================================
   PearlBike — NAVIGATION PROPRE (Alignement Gauche/Droite)
   ========================================================== */
@media screen and (min-width: 1200px) {

  /* 1) LIGNE DU HEADER (wrap autorisé, dropdown safe) */
  #header .header-bottom .container > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    overflow: visible !important;
  }

  #header .header-bottom .container > .row > div {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* 2) MENU : on fait grandir LA COLONNE PrestaShop (pousseur) */
  #_desktop_top_menu {
    flex: 1 1 auto !important;     /* pousse mécaniquement les boutons à droite */
    min-width: 0 !important;
    overflow: visible !important;
    position: static !important;   /* demandé */
    z-index: 2 !important;
  }

  /* (optionnel mais sûr) : on garde le flux du menu en nowrap */
  #_desktop_top_menu ul#top-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
  }

  #_desktop_top_menu ul#top-menu > li {
    margin-right: 40px !important;
    white-space: nowrap !important;
    position: relative !important;
  }

  /* 3) RECHERCHE : on force LA COLONNE PrestaShop en ligne 2 */
  #_desktop_search_widget {
    flex: 0 0 100% !important;
    width: 100% !important;
    order: 99 !important;
    margin-top: 10px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;         /* sous le dropdown */
  }

  /* Le widget reste à gauche et ne dépasse pas 520px */
  #_desktop_search_widget #search_widget,
  #_desktop_search_widget .search-widget {
    width: 100% !important;
    max-width: 520px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 4) BOUTONS : calés à droite, sans écrasement */
  #_desktop_user_info {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important; /* garde le push à droite sur la ligne 1 */
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
    order: 40 !important;
    position: relative !important;
    z-index: 3 !important;
  }

  #_desktop_cart {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: 20px !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
    order: 50 !important;
    position: relative !important;
    z-index: 3 !important;
  }

  /* 5) MENU DÉROULANT (INCHANGÉ) */
  #header .js-menu-desktop #top-menu > li > .pb-mega-container {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    width: 850px !important;
    z-index: 9999 !important;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    max-width: 90vw !important;
  }

  #header .js-menu-desktop #top-menu > li.pb-click-open > .pb-mega-container {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
}



/* 1. ON FORCE LA COULEUR PARTOUT (PC + MOBILE) */
.pb-title, .pb-sub {
    color: #187dd2 !important;
}
/* ==========================================================
   PearlBike — BASE VALIDÉE + FIX HAUTEUR MANUELLE
   ========================================================== */

@media screen and (max-width: 767px) {

    /* 1. DISPARITION TOTALE DES IMAGES */
    #homepage-slider, 
    .carousel, 
    .carousel-item, 
    .carousel-inner {
        background-image: none !important;
        background: #f9f9f9 !important;
    }

    .carousel-item img, 
    .homeslider-container img {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* 2. RÉPARATION DES BOUTONS (FLÈCHES) */
    .carousel-control-prev, 
    .carousel-control-next, 
    .direction {
        z-index: 9999 !important;
        display: flex !important;
        opacity: 1 !important;
        background: rgba(0,0,0,0.05) !important;
        width: 15% !important;
    }

    /* 3. POSITIONNEMENT ET AJUSTEMENT MANUEL */
    .carousel-caption, 
    .caption, 
    .pb-hero-text {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        background: transparent !important;
        
        /* --- PARAMÈTRES À MODIFIER --- */
        padding-top: 150px !important;    /* 1. AUGMENTER ICI pour descendre le titre (Navbar) */
        padding-bottom: 100px !important; /* 2. AUGMENTER ICI pour agrandir le bloc vers le bas */
        /* ---------------------------- */

        padding-left: 15% !important;
        padding-right: 15% !important;
    }

    .pb-title {
        color: #187dd2 !important;
        font-size: 1rem !important; /* Taille réduite pour éviter les 2 lignes */
        text-align: center !important;
        margin-bottom: 10px !important;
        font-weight: bold !important;
    }

    .pb-sub {
        color: #187dd2 !important;
        font-size: 0.9rem !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }
}