/* Police Roboto Slab hébergée localement (static/oscar/fonts/RobotoSlab/) : aucun appel à Google (RGPD) */
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/RobotoSlab/roboto-slab-v36-latin-regular.woff2') format('woff2'),
         url('../fonts/RobotoSlab/roboto-slab-v36-latin-regular.woff') format('woff');
}

/*li.mobile{
display:none !important;
}*/

#phone_link i.fa-phone{
  color:#c49c48;
}

#login_link i.fa-user{
  color:#c49c48;
}

#contact_link i.fa-envelope{
  color:#c49c48;
}

.btn-gold {
    color: #c49c48;
    background-color: transparent;
    border: 1px solid #c49c48;
}

.btn-gold:hover,
.btn-gold:focus,
.btn-group.show .btn-gold {
    color: #fff;
    background-color: #c49c48;
    border-color: #c49c48;
}


#basket-total-wrapper {
    color: #c49c48;
}


.text-warning-credit-note{
  color:rgb(0, 63.96, 132.6);
}

.zoomable {
    transition: transform 1s ease;
}

.zoomable-list {
    transition: transform 0.5s ease;
}

.zoomable:hover {
    transform: scale(1.4);
}

.zoomable-list:hover {
    transform: scale(1.2);
}

.zoomable-category-list:hover {
    transform: scale(1.1);
}

.zoomable-category-list{
  transition: transform 0.5s ease;
}

tr.total_incl_tax{
  font-size:1.1em !important;
}

tr.basket-order-row {
  font-size: 0.9em;
}

li.mobile{
  display:block !important;
}

.dropdown-menu.show.mobile{
  width:200%;
  padding:10px;
}

/* tablette (md) : navbar encore en hamburger → même comportement que mobile */
@media (min-width: 768px) and (max-width: 991.98px) {
    .dropdown-menu.show.mobile { width: 100%; }
    .nav-item.dropdown.mobile { width: 100%; }
}


.insufficient_stock {
  font-size: 0.75rem;
}

.navbar{
  padding: 0.5rem 0.5rem !important;
}

.checkout-quantity .input-group{
    max-width:180px;
}

.col-price.col-md-1.text-right{
    padding-left: 0px;
}

.original.line-through{
    color:rgb(0, 0, 0);
    text-decoration: line-through;
}

html, body {
    height: 100%;
    margin: 0;
}


body.dashboard_page{
    background-color: #f9f9f9 !important;
}
/* Wrapper flex pour body */
body.default,
body.account-profile {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #fff;
    }

#top_page {
    /*background-color: #FEFAF3 !important;
    /*background-image: url('/static/oscar/img/fp_banderole2.png');*/
    background-position: top;
    background-size: cover;
}

aside.sidebar{
    /*background-image: url('/static/oscar/img/fiesta_palace.png');*/
}

/*div.col-sm-8{
    /*background-image: url('/static/oscar/img/fiesta_palace.png');
    background-color: #FEFAF3 !important;
}*/

.text-secondary.text-size{
    font-size: 1.125rem;
}

.product_pod_without_price{
    /*height: 350px;*/
}

.product_pod{
    /*height: 420px;*/
}

/* 1. Le li (col-*) devient flex pour que l'article le remplisse */
ol.row > li {
    display: flex;
    overflow: visible;
    margin-bottom: 20px;   /* espace vertical entre deux rangées de produits */
}

/* 2. product_pod : remplit le li (étiré par Bootstrap à la hauteur max de la rangée) */
.product_pod {
    height: 100% !important;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    background-color: #fff;
    border-radius: 6px;
}

/* 3. Prix : sortir de l'absolu, pousser en bas via flex */
.product_pod .product_price {
    position: static !important;
    margin-top: auto;
    width: 100%;
}

/* 4. Formulaire compact dans le pod */
.lp-compact-basket-wrap {
    padding: 0 0.25rem;
}
/* Neutraliser la marge du <p> généré par basket_form.as_p */
.lp-compact-basket-form p {
    margin-top: 0;
    margin-bottom: 0.25rem;
}
/* Label quantité inline avec l'input dans le pod */
.lp-compact-basket-form label {
    font-size: 0.85rem;
    margin-bottom: 0;
    margin-right: 0.25rem;
    vertical-align: middle;
}
/* Input quantité : style Bootstrap cohérent, largeur fixe, sans flèches spinner */
.lp-compact-basket-form input[type="number"] {
    width: 60px;
    padding: 0.25rem 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.2rem;
    font-size: 0.875rem;
    vertical-align: middle;
    -moz-appearance: textfield;
    appearance: textfield;
}
.lp-compact-basket-form input[type="number"]::-webkit-inner-spin-button,
.lp-compact-basket-form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Alerte produit épuisé : même largeur que le bouton */
.lp-pod-alert {
    display: block;
    width: 100%;
    text-align: center;
}
/* Disponibilité dans un pod (ex: "Nouvel arrivage") : annuler les contraintes du .container Bootstrap */
.product_pod .availability.container {
    max-width: 100%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.product_pod .availability .alert {
    width: 100%;
    box-sizing: border-box;
}


.custom-info{
  margin-top: 10px;
  margin-bottom:10px;
  background-color: blueviolet;
}

p {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /*font-size:0.8rem !important;*/
    font-size:1rem;
}

.size-form{
    width:20% !important;
}

.collapse-toggle {
    cursor: pointer;
    font-weight: bold;
    color: #0056b3;
    text-decoration: underline;
}
.collapse-toggle:hover {
    color: #004085;
}

.parcel-form {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

/* Flèche par défaut */
.arrow {
    color:blueviolet;
    display: inline-block;
    transition: transform 0.3s ease; /* Animation douce */
}

/* Flèche vers le haut lorsque le collapse est ouvert */
[data-toggle="collapse"][aria-expanded="true"] .arrow {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}


.subcategory-list {
    display: none;
    margin-left: 15px;
    list-style-type: none;
}

.display_categories {
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #000000 !important;
    background: none !important;
}

.mobile_display_categories {
  border: none;
    cursor: pointer;
    font-size: 14px;
    background: none !important;
}

a.size_link{
    width:100%;
    display: inline-block;
}

a.size_link.active {
    font-weight: bold;
}

.size_link_mobile{
    width:100%;
    display: inline-block;
}

.link_more_categories{
    display:flex;
}

div.page_inner{
    padding: 10px 5px 10px !important;
    background-color: #fff;
}

/* rangées Bootstrap du contenu de la page : 5px à gauche et à droite */
.page_inner .row {
    padding-left: 5px;
    padding-right: 5px;
}

/* boule à facettes : uniquement sur les pages dont le body a la classe with-discoball
   (accueil, catalogue, catégories : voir block body_class de catalogue/browse.html) ;
   les autres pages gardent le fond blanc de page_inner */
.with-discoball .container.page .page_inner {
    /* voile noir à 50 % par-dessus l'image : augmenter 0.5 pour assombrir, baisser pour éclaircir */
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url('../img/discoball_background_resource.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* titre de la page (nom de la catégorie), « Résultats trouvés. », nombre de résultats
   et « Pas de produits trouvés. » en doré */
.with-discoball #title_show,
.with-discoball .lp-results-count,
.with-discoball .nonefound,
.with-discoball .lp-search-facets,        /* recherche : « Affiner votre recherche », gammes de prix */
.with-discoball .lp-search-facets a,
.with-discoball .lp-search-facets .nav-header,
.with-discoball .container.page .page-header h1 {
    color: #c49c48;
}

.header .page_inner {
    padding: 10px 15px !important;
}

.card-body{
    padding:0.5rem;
}


.cat_pod {
  height: 300px !important;
  border: 1px solid black;
}


/*.animated-border-hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-style: solid;
  border-width: 4px;
  border-radius: 50%;
  border-color: transparent;
  padding: 0; 
  width: 80px; 

  transition: border-color 0.3s ease;
}

.animated-border-hover:hover {
  animation: borderColors 6s linear infinite;
}


@keyframes borderColors {
  0% {
    border-top-color: red;
    border-right-color: orange;
    border-bottom-color: yellow;
    border-left-color: green;
  }
  14% {
    border-top-color: green;
    border-right-color: blue;
    border-bottom-color: violet;
    border-left-color: #ff69b4; 
  28% {
    border-top-color: #ff69b4;
    border-right-color: red;
    border-bottom-color: orange;
    border-left-color: yellow;
  }
  42% {
    border-top-color: yellow;
    border-right-color: green;
    border-bottom-color: blue;
    border-left-color: violet;
  }
  56% {
    border-top-color: violet;
    border-right-color: #ff69b4;
    border-bottom-color: red;
    border-left-color: orange;
  }
  70% {
    border-top-color: orange;
    border-right-color: yellow;
    border-bottom-color: green;
    border-left-color: blue;
  }
  84% {
    border-top-color: blue;
    border-right-color: violet;
    border-bottom-color: #ff69b4;
    border-left-color: red;
  }
  100% {
    border-top-color: red;
    border-right-color: orange;
    border-bottom-color: yellow;
    border-left-color: green;
  }
}
  */


.glow-border {
  width: 80px;
  border-radius: 10%;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.glow-border::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -5px;
  right: -5px;
  bottom: 0px;
  background: linear-gradient(270deg, 
    red, orange, yellow, green, cyan, blue, violet, red);
  background-size: 400%;
  border-radius: 10%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: discoGlow 15s linear infinite;
  filter: blur(3px);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  padding:7px;
}

.glow-border:hover::before {
  opacity: 1;
}

.glow-border img {
  width: 80px;
  border-radius: 10%;
  display: block;
  position: relative;
  z-index: 2;
}
@keyframes discoGlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

.glow-text {
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.glow-text:hover {
  background: linear-gradient(270deg,
    red, orange, yellow, green, cyan, blue, violet, red);
  background-size: 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: discoText 10s linear infinite;
}

@keyframes discoText {
  0%   { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

  .fade-in-image {
    opacity: 0;
    animation: fadeIn 2s forwards;
  }

  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }

#map {
    height: 400px;
}

#scrollTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 14px;
  background-color: #13a5be;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  z-index: 1000;
}
#scrollTopBtn:hover {
  background-color: #117bdf;
}

form.form-stacked.wysiwyg.fixed-actions > div.row{
padding-bottom: 80px;
}

/*.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
  display: none;
  position: absolute;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}*/

/*.dropdown-submenu {
    position: relative;
    z-index: 1050 !important;
}*/

.dropdown-submenu > .dropdown-menu {
    display: none;
    position: absolute !important;
    top: 0;
    left: 100%;
    margin-top: 0;
    z-index: 1 !important;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
    z-index: 1 !important;
}

/*.dropdown-submenu{
    max-height: 120vh;     
    overflow-y: auto;      
    overflow-x: hidden;
}*/

/* Assure que le conteneur du menu a position relative et un z-index élevé */
/*.navbar, .dropdown-menu {
  position: relative; ou absolute si nécessaire 
  z-index: 1 !important;
}
*/
#id_quantity{
  width:70px;
}

.unavailable{
  background:#effa5ef5;
  color:black;
  font-weight: 600;
  padding-top:3px;
  padding-bottom:3px;
}

.image_container {
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.image_container a {
  max-width: 100%;
}

.sub-image {
  display: block;
  max-width: 100%;
}

.sub-image img,
.preview-img {
  max-width: 100%;
  height: auto;
}

.product_pod .img-thumbnail {
    /*height: 155px;*/
    max-width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


@media (min-width: 768px) {
    .special-menu.is-catalogue {
        display:none;
    }
    .product_pod{
      height:400px;
    }
}

@media (max-width: 991px) {
    /* search results — "Produits correspondant à ..." */
    .page-header h1 { font-size: 1.4rem; }
}

@media (max-width: 767px) {
    aside.sidebar { display: none; }
    body.account-profile aside.sidebar { display: block; flex: 0 0 100%; max-width: 100%; }
    aside.sidebar + div { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
    /* detail.html — carousel product gallery */
    #product_gallery .carousel-inner > .carousel-item {
        height: auto;
        line-height: normal;
    }
    /* detail.html — title */
    .product_page .product_main h1 { font-size: 1.25rem; }
    /* search results — "Produits correspondant à ..." */
    .page-header h1 { font-size: 1.1rem; }
}

@media (max-width: 1180px) {
.product_pod_without_price{
      height: 350px;
  }

  .product_pod{
      height: 420px;
  }
}


@media (max-width: 991.98px) {
    header.header .page_inner { display: none !important; }
    .container.page .page_inner { padding-top: 1rem; }
    #messages .alert { padding: 0.4rem 0.75rem; font-size: 0.85rem; }
    #messages .alertinner { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
    .lp-breadcrumb { font-size: 0.8rem; flex-wrap: nowrap; overflow: hidden; margin-bottom: 0.25rem; }
    .lp-bc-fixed { flex-shrink: 0; white-space: nowrap; }
    .lp-bc-shrink { flex: 0 1 auto; min-width: 2em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .lp-bc-full { flex-shrink: 0; white-space: normal; word-break: break-word; }
    /* Titre produit */
    .product_page .product_main h1 { font-size: 1.4rem; }
}

@media (max-width: 767.98px) {
    .lp-homepage-tagline { font-size: 0.85rem; }
}

@media (max-width: 767.98px) {

.special-menu{
    display:block;
  }

.dropdown-menu.show.mobile{
  width:100%;
} 

.nav-item.dropdown.mobile{
width: 100%;
}

  .product_pod_without_price{
      height: 350px;
  }

  .product_pod{
      height: 420px;
  }

  div.logo-phone-desktop{
      display:none !important;
    }
    div.logo-phone{
      display:block !important;
    }
    img.img-fluid.img-logo-phone {
      width: 130px !important; /* réduit le logo sur mobile */    
    }
    div.col-md-9.pl-sm-4.shop-tagline{
      display: none !important;
    }
    i.fas.fa-user.mr-2.fa-2x{
      font-size: 24px !important;  /* ou en em, rem, % */
    }
    i.fas.fa-sign-out-alt.mr-2.fa-2x{
      font-size: 24px !important;
    }
    i.fas.fa-envelope.mr-2.fa-2x{
      font-size: 24px !important;
    }
    i.fas.fa-phone.fa-2x {
      font-size: 24px !important;  /* écrase fa-2x seulement sur mobile */
    }
    i.fas.fa-list-ul.mr-2.fa-2x{
      font-size: 24px !important;
    }
    a.dashboard{
      display:none;
    }
    img.racoon{
      width:40px !important;
    }
    .phone-responsive{
      display:none;
    }
    /*.carousel-item img {
      width:80% !important;
    }*/
    
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #2225dd !important;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% 50%;
  transition: background-color 0.3s ease;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
  background-color: #4c4fe0 !important; 
}

.carousel-control-prev, .carousel-control-next{
  opacity: 1;
}

.category_name {
  background-color: #00408556;
}

a.nav-link.glow-text{
  color:black;
  padding: 0.5rem !important;
}

a.nav-link.glow-text.lp-reseller-link {
  color: #fff !important;
}

/* toutes les icônes de l'en-tête en doré, connecté ou non
   (mon compte, notifications, dashboard, déconnexion, contact, téléphone, compte revendeur) */
a.nav-link.glow-text i {
  color: #c49c48;
}

/* ── nav_accounts : tagline + panier ─────────────────────────── */
.lp-accounts-tagline {
    font-family: 'Roboto Slab', serif !important;
    font-size: 0.9rem;
    color: #c49c48 !important;
    padding-bottom: 0.25rem;
}

/* menu des catégories de la colonne de gauche (catalogue/browse.html et catalogue/detail.html) */
/* même bleu que le body (body.default, plus bas) */
.side_categories {
  background-color: #0b1d3a;
}

/* noms des catégories du menu de gauche (dont « Nouveautés ») */
.side_categories a {
  font-family: 'Roboto Slab', serif;
  color: #c49c48;
}

/* boutons « + » des sous-catégories : doré au lieu du noir imposé par .display_categories */
.side_categories .display_categories {
  color: #c49c48 !important;
}

/* fil d'Ariane (Accueil / catégorie / produit) : même style que le menu de gauche */
.breadcrumb {
  background-color: #0b1d3a;
  font-family: 'Roboto Slab', serif;
}

.breadcrumb a,
.breadcrumb-item,          /* éléments sans lien, ex. « Rechercher » dans search/results.html */
.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before {
  color: #c49c48;
}

/* noms des sous-catégories sous leurs images (catalogue/category.html) */
.category-card h5 {
  color: #c49c48;
}

/* texte doré réutilisable (ex. titre « Actuellement » de la page d'accueil) */
.lp-text-gold {
  color: #c49c48;
}

/* noms des vignettes de la page d'accueil (browse.html : grille, carousel.html : mobile) */
.lp-card-name {
  color: #c49c48;
}

/* tagline affichée sous le logo en responsive (browse.html, d-lg-none) */
.lp-homepage-tagline {
  font-family: 'Roboto Slab', serif;
  color: #c49c48;
}

body.default, body.account-profile {
    background-color: #0b1d3a !important;
}

div.logo-phone{
  display: none;
}

.container {
  /*width: 95% !important;          /* prend presque toute la largeur */
  max-width: 1400px !important;   /* limite sur très grands écrans */
  margin: 0 auto !important;      /* centre le contenu */
}


/* to display or not the point on a list */
.no-bullets {
    list-style-type: none; /* removes the bullets */
    padding-left: 0;       /* optional: remove left indent */
}

/* Override Oscar's white-space:nowrap on availability to allow multi-line messages */
.product_pod .availability {
  white-space: normal;
}

/* css hijack */

.djhj {
  /* stylelint-disable-next-line */
  --system-font:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  position: fixed;
  /*bottom: 0;*/
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;

  .djhj-notification {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    border-radius: 0.5rem;
    padding: 1rem 1rem 0;
    margin: 1rem;
    max-width: 800px;
    box-shadow: 0 0 0.5em rgba(0 0 0 / 30%);
    font-family: var(--system-font);
    font-size: initial;
    color: light-dark(#111, white);
  }

  .djhj-message,
  .djhj-actions {
    padding: 0 0 1rem;
    width: 100%;
  }

  .djhj-message {
    flex: 1 1 auto;
    font-family: var(--system-font);
    font-size: initial;

    em {
      font-weight: 500;
    }
  }

  .djhj-actions {
    display: flex;
    flex: 0 1 auto;
    text-align: center;
    justify-content: space-around;
  }

  .djhj-button {
    appearance: none;
    border: none;
    /*background-color: transparent;*/
    font-weight: 500;
    padding: 0.5em;
    cursor: pointer;
    font-family: var(--system-font);
    font-size: initial;

    &::first-letter {
      text-transform: capitalize;
    }
  }
}


/* ════════════════════════════════════════════════════════════════
   NAVBAR FIXE + SMART SCROLL + DRAWER OFFCANVAS
   Mobile & tablette uniquement (< 992px)
   ════════════════════════════════════════════════════════════════ */

/* ── Logo dans la navbar ─────────────────────────────────────── */
.lp-navbar-logo {
    flex: 1;
    display: flex;
    justify-content: left;
    align-items: center;
}
.lp-navbar-logo img {
    max-height: 44px;
    width: auto;
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .lp-navbar-logo img { max-height: 58px; }

    /* Boutons compte/panier : taille normale au lieu de btn-sm */
    .lp-quick-actions .btn {
        padding: 0.4rem 0.85rem;
        font-size: 1rem;
    }
    .lp-quick-actions .btn .fas {
        font-size: 1.1rem;
    }
    /* Badge panier */
    .lp-quick-actions .badge {
        font-size: 0.8rem;
    }
    /* Champ de recherche */
    .lp-quick-actions .form-control {
        height: calc(1.5em + 0.8rem + 2px);
        font-size: 1rem;
        width: 200px !important;
    }
    /* Bouton loupe de la recherche */
    .lp-quick-actions .btn .fa-search {
        font-size: 1rem;
    }
    /* Hamburger */
    .navbar-toggler {
        padding: 0.5rem 0.85rem;
        font-size: 1.4rem;
    }
    .navbar-toggler-icon {
        width: 1.6em;
        height: 1.6em;
    }
}


/* Checkout nav : dans le flux normal, pas de sticky sur mobile/tablette */

/* ── Header sticky sur desktop, hide-on-scroll via top ──────── */
@media (min-width: 992px) {
    #lp-top-header {
        position: sticky;
        top: 0;
        z-index: 1030;
        transition: top 0.5s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }
    /*img.img-fluid.img-logo-phone {
        max-height: 80px;
        width: auto;
    }*/
    img.img-fluid.img-logo-phone{
      max-width: 100% !important;
      height:auto !important;
    }

    nav#top_page{
      background-color: #0b1d3a !important;
    }

}

/* ── Navbar fixe sur mobile/tablette ─────────────────────────── */
@media (max-width: 991.98px) {

    #lp-main-navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        transition: transform 0.3s ease;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    #lp-main-navbar.lp-nav-hidden {
        transform: translateY(-100%);
    }

    #lp-main-navbar .navbar-collapse {
        display: none !important;
    }
}

/* ── Fond semi-transparent derrière le drawer ────────────────── */
.lp-drawer-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9040;
    pointer-events: auto;
}
.lp-drawer-overlay.open {
    display: block;
}

/* ── Panneau latéral (drawer) ────────────────────────────────── */
.lp-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    max-width: 85vw;  /* ne dépasse pas 85% de l'écran sur très petit mobile */
    height: 100%;
    background: #343a40;  /* même couleur que navbar-dark / bg-dark */
    color: #fff;
    z-index: 9050;
    /* Par défaut : caché hors écran à gauche */
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;  /* scroll interne si beaucoup de catégories */
}

/* Classe ajoutée par JS à l'ouverture → glisse dans l'écran */
.lp-drawer.open {
    transform: translateX(0);
}

/* ── Bouton fermer (✕) ───────────────────────────────────────── */
.lp-drawer-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}
.lp-drawer-close:hover {
    color: #fff;
}

/* ── Zone de contenu du drawer ───────────────────────────────── */
.lp-drawer-content {
    padding: 3.5rem 0 2rem;  /* 3.5rem en haut pour laisser place au bouton ✕ */
}

/* ── Liste de navigation ─────────────────────────────────────── */
.lp-drawer-nav { margin: 0; padding: 0; }

/* Titre de section (ex: "Parcourir la boutique") */
.lp-drawer-section-title {
    padding: 0.75rem 1.25rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
}

.lp-drawer-item { list-style: none; }

/* Lien cliquable : barre gauche colorée au survol */
.lp-drawer-link {
    display: block;
    padding: 0.6rem 1.25rem;
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    font-size: 0.95rem;
    border-left: 3px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.lp-drawer-link:hover,
.lp-drawer-link:focus {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: #fff;
    color: #fff !important;
}
.lp-drawer-link.active {
    font-weight: bold;
    color: #fff !important;
    border-left-color: #fff;
}

/* Icônes du menu mobile en doré (le texte des liens garde sa couleur) */
.lp-drawer .fas,
.lp-drawer .far {
    color: #c49c48;
}

/* Séparateur horizontal entre sections */
.lp-drawer-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0.75rem 1.25rem;
    list-style: none;
}

/* ── Logo en haut du drawer ──────────────────────────────────── */
.lp-drawer-logo {
    padding: 0 1.25rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0.5rem;
}
.lp-drawer-logo img {
    max-height: 55px;
}

/* ── Ligne catégorie avec flèche expand ──────────────────────── */
.lp-drawer-cat-row {
    display: flex;
    align-items: center;
}
.lp-drawer-cat-row .lp-drawer-link {
    flex: 1;
    min-width: 0;
}
.lp-drawer-expand {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    padding: 0.6rem 1rem 0.6rem 0.5rem;
    cursor: pointer;
    font-size: 0.65rem;
    line-height: 1;
    transition: color 0.15s;
}
.lp-drawer-expand:hover {
    color: #fff;
}

/* ── Sous-listes (sous-catégories et sous-sous-catégories) ───── */
.lp-drawer-sublist {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}
.lp-drawer-sublist .lp-drawer-link {
    padding-left: 2.25rem;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.7) !important;
}
.lp-drawer-sublist .lp-drawer-sublist .lp-drawer-link {
    padding-left: 3.25rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55) !important;
}
.lp-drawer-sublist .lp-drawer-link:hover,
.lp-drawer-sublist .lp-drawer-link:focus {
    color: #fff !important;
}

/* ── Barre de progression checkout ──────────────────────────── */
nav.navbar.lp-nav-checkout,
.lp-nav-checkout {
    background-color: #1d3557 !important;  /* bleu nuit */
}
.lp-co-nav-side {
    flex-shrink: 0;
    width: 2rem;
    text-align: center;
    opacity: 0.7;
}

/* Checkout — boutons btn-sm avec texte légèrement plus lisible */
.ship-address,
#new_shipping_address .btn-sm,
.address-controls .btn-sm {
    font-size: 0.9rem;
}

/* Lien déconnexion — couleur distincte */
.lp-drawer-logout {
    color: rgba(255, 160, 150, 0.85) !important;
}
.lp-drawer-logout:hover,
.lp-drawer-logout:focus {
    color: #ffb3aa !important;
    border-left-color: #ffb3aa;
}

/* ── Page d'erreur 500 ── */
.error-page {
    background: #f8f9fa;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
}
.error-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,.1);
    max-width: 540px;
    width: 100%;
    padding: 2.5rem;
    text-align: center;
}
.error-icon { font-size: 3rem; margin-bottom: 1rem; }
.error-card h1 { font-size: 1.5rem; margin-bottom: 0.75rem; color: #c0392b; }
.error-card p { line-height: 1.6; color: #555; margin-bottom: 0.75rem; }
.error-actions {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.error-actions a {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
}
.error-actions .btn-primary { background: #2980b9; color: #fff; }
.error-actions .btn-secondary { background: #ecf0f1; color: #333; border: 1px solid #ccc; }
.error-actions a:hover { opacity: .85; }

div.box-old-customer{
  background-image:
    radial-gradient(ellipse at center, rgba(30, 25, 70, .72) 30%, rgba(30, 25, 70, .35) 100%),
    url('/static/oscar/img/Fond-bleu-min.png');
  background-size: cover;
  background-position: center;
  border: 1px solid #c49c48;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  transition: color .2s, box-shadow .2s;
}

div.box-old-customer:hover{
  color: #f3d58a !important; /* override Bootstrap .text-white (!important) */
  box-shadow: 0 0 0 3px #c49c48, 0 6px 18px rgba(0, 0, 0, .35);
}