/* Style du bouton panier */
.container h2 {
    font-size: 24px;
    color: #C59D5F;
    font-weight: bold;
    text-align: center;
}
  
h1, h5, h6 {
    color: #C59D5F;
    font-size: 18px;
    text-transform: none !important; /* Empêche toute mise en majuscule */
    font-family: var(--bs-body-font-family);
}

h2 {
    color: #C59D5F;
    font-size: 22px;
    text-transform: none !important; /* Empêche toute mise en majuscule */
    font-family: var(--bs-body-font-family);
}
h4{
    color: #C59D5F;
    font-size: 18px;
    text-transform: none !important; /* Empêche toute mise en majuscule */
    font-family: var(--bs-body-font-family);
}


h3 {
    color: #fff;
    text-transform: uppercase;
    font-size: 28px;
    text-transform: none !important; /* Empêche toute mise en majuscule */
    font-family: var(--bs-body-font-family); /* Police élégante */
}
/* === HEADER MODERNE STYLE PALAIS DES THÉS === */

.header-modern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #3a3a3a;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 50px;
  flex-wrap: wrap;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.logo-modern {
  height: 160px;
  display: block;
}
.trademark {
  font-size: 11px;
  color: #fff;
  margin-top: -10px;
  text-align: center;
}

.header-center {
  flex: 1;
  max-width: 500px;
  margin: 10px 30px;
  position: relative;
}

.search-form {
  display: flex;
}

.search-input {
  flex: 1;
  padding: 10px 15px;
  border-radius: 20px 0 0 20px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.search-button {
  padding: 10px 20px;
  background-color: #E4B01A;
  border: none;
  border-radius: 0 20px 20px 0;
  color: white;
  cursor: pointer;
}

.search-button:hover {
  background-color: #d3c8c8;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.user-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
  color: #333;
}

.user-box i {
  font-size: 20px;
  color: #4CAF50;
}

#panier-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: black;
  color: white;
  font-size: 14px;
  border-radius: 50%;
  padding: 2px 6px;
  min-width: 18px;
  text-align: center;
  line-height: 1;
}
@media (max-width: 768px) {
  #panier-badge {
    top: -6px;
    right: -15px;
    font-size: 12px;
    padding: 1px 5px;
  }
}

/* Sous-titre sous le header */
.header-subtitle {
  text-align: center;
  font-size: 22px;
  color: #fff;
  padding: 5px 10 10px;
  font-family: 'Cinzel', serif;
}
/* Cacher le saut de ligne par défaut */
.line-break-mobile {
  display: none;
}

/* Sur les petits écrans : on affiche le saut de ligne et on ajuste la position */
@media (max-width: 768px) {
  .line-break-mobile {
    display: inline;
  }

  .responsive-subtitle {
    top: 2px !important; /* On le descend un peu par rapport à ta version desktop */
    font-size: 16px; /* Optionnel : un peu plus petit sur mobile */
  }
}

/* === MENU PRINCIPAL NAVBAR === */
.main-navbar {
  position: fixed;
  top: 200px; /* hauteur du header-modern */
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-family: Arial, sans-serif;
  padding: 0 20px;
}

.nav-items {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
  margin: 0;
}

.nav-items > li {
  position: relative;
}

.nav-items a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  padding: 5px 10px;
  font-size: 14px;
}

.nav-items a:hover {
  color: #E3B019;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #3a3a3a !important;
  border: 1px solid #ddd;
  padding: 10px 0;
  z-index: 999;
  min-width: 250px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

  max-height: 420px;     /* hauteur visible = environ 10 lignes */
  overflow-y: auto;      /* scroll vertical */
  overflow-x: hidden;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  width: 100%;
}

.dropdown-menu a {
  display: block;
  padding: 8px 15px;
  color: #fff;
  white-space: nowrap;
}

.dropdown-menu a:hover {
  background-color: #f0f0f0;
  color: #000;
}

/* === Responsive navbar === */
@media (max-width: 768px) {
  .nav-items {
    flex-direction: column;
    align-items: flex-start;
  }

  .dropdown-menu {
    position: relative;
    box-shadow: none;
    border: none;
    padding-left: 15px;
  }

  .header-top {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .header-right {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }

  .header-center {
    margin: 0;
    width: 100%;
  }
}

.logout-btn {
  position: absolute;
  top: -8px;
  right: -15px;
  font-size: 12px;
  color: #E4B01A;
  text-decoration: none;
}

.logout-btn:hover {
  color: #FFF;
}

.hero-section {
  display: flex;
  height: 500px;
  width: 100%;
  overflow: hidden;
  position: relative;
  top: 30px;
}

@media (max-width: 991px) {

  .hero-section {
    height: auto !important;
    min-height: 320px;
    display: block !important;
    top: 0 !important;
  }

  .hero-section {
    background-size: cover !important;
    background-position: center center !important;
  }

}

/* MOBILE PLUS PRÉCIS */
@media (max-width: 768px) {

  .hero-section {
    min-height: 260px;
  }

}

/* PETITS MOBILES */
@media (max-width: 480px) {

  .hero-section {
    min-height: 220px;
  }

}

.hero-video,
.hero-slider {
  flex: 1;
  min-width: 50%;
  height: 100%;
  position: relative;
}

.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-slider {
  background: #EAD0941C;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
}

/* === Slider automatique === */
.slide-container {
  display: flex;
  width: 400%; /* ✅ 4 slides = 4 * 100% */
  height: 100%;
  animation: slideShow 24s infinite;
}


@keyframes slideShow {
  0%   { transform: translateX(0%); }
  20%  { transform: translateX(0%); }

  25%  { transform: translateX(-100%); }
  45%  { transform: translateX(-100%); }

  50%  { transform: translateX(-200%); }
  70%  { transform: translateX(-200%); }

  75%  { transform: translateX(-300%); }
  100% { transform: translateX(-300%); }
}


/* === Slide unique === */
.slide {
  flex: 0 0 100%;
  padding: 20px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* === Animation entrée image === */
.slide img {
  max-width: 80%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 15px;
  opacity: 0;
  transform: translateX(-50px);
  animation: imgEnter 1s forwards;
  animation-delay: var(--img-delay, 0s);
}

/* === Animation entrée texte === */
.slide-text {
  opacity: 0;
  transform: translateX(50px);
  animation: textEnter 1s forwards;
  animation-delay: var(--text-delay, 1s);
}

@keyframes imgEnter {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes textEnter {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* === Texte === */
.slide-text h2 {
  font-size: 24px;
  margin: 10px 0;
}

.slide-text p {
  font-size: 14px;
  margin-bottom: 10px;
}

.slide-text a {
  background-color: #5a3c1a;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.slide-text a:hover {
  background-color: #3d2912;
}

.hero-presentation {
  max-width: 1000px;
  margin: auto;
  padding: 2rem;
  font-family: "Segoe UI", sans-serif;
  color: #2f2f2f;
}

.intro-card {
  background: #fffaf0;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: all 0.3s ease-in-out;
}

.intro-card h1 {
  text-align: center;
  font-size: 1.8rem;
  color: #5a3c1a;
  margin-bottom: 1rem;
}

.intro-card h4 {
  text-align: center;
  margin-top: 2rem;
  color: #5a3c1a;
  font-size: 1.3rem;
}

.intro-card p {
  font-size: 1rem;
  line-height: 1.6;
  text-align: justify;
  margin: 1rem 0;
}

.certification-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.cert-logo {
  height: 80px;
}

.cert-logo-small {
  height: 40px;
}

.cert-text {
  font-size: 0.9rem;
  max-width: 600px;
  text-align: justify;
  color: #333;
}

.label-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 2rem 0;
}

.label-icon {
  height: 90px;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1));
}

.section-divider {
  border: none;
  border-top: 1px solid #ccc;
  margin: 3rem 0 1.5rem;
}

/* Animations tendances */
.animate-fade {
  animation: fadeIn 1s ease forwards;
  opacity: 0;
}

.animate-zoom {
  animation: zoomIn 1s ease forwards;
  opacity: 0;
}

.animate-slide {
  animation: slideUp 1s ease forwards;
  opacity: 0;
}

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

@keyframes zoomIn {
  0% { transform: scale(0.95); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes slideUp {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.product-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease;
  position: relative;
  padding: 0.5rem;
  font-size: 0.75rem;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.product-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.product-title {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 5px;
  text-align: center;
}

.product-nature {
  font-size: 0.85rem;
  text-align: center;
  color: #777;
}

.product-price {
  font-size: 1.1rem;
  color: #C59D5F;
}

.product-weight {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  gap: 5px;
  color: #333;
}

.icon-weight {
  width: 18px;
  height: auto;
}

.product-extra {
  font-size: 0.75rem;
}

.likes {
  font-size: 0.85rem;
  color: #444;
}

.ribbon {
  position: absolute;
  top: 12px;
  left: -20px;
  background: #5cb85c;
  color: white;
  padding: 5px 25px;
  font-size: 0.75rem;
  font-weight: bold;
  transform: rotate(-45deg);
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.btn-like {
  background: none;
  border: none;
  color: #C59D5F;
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

.btn-like:hover {
  color: #a77c38;
}

.product-card {
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 550px !important;
  font-size: 1rem;
}

/* Réduction de l’image produit */
.card-img-top {
    height: 200px !important;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.card-title {
  font-weight: bold;
  color: #333;
  font-size: 0.95rem;
}

.container {
    max-width: 1600px;
    margin: auto;
    padding: 0px 0px;
    font-family: 'Segoe UI', sans-serif;
    background: #f5f5f500;
}

/* SECTION CONTAINER */
.section-container {
  width: 100%;
  padding: 2rem 1rem;
  box-sizing: border-box;
}


/* BOX QUI CONTIENT LE TITRE + GRID */
.section-box {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
  max-width: 1600px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: hidden;
}

.section-box1 {
    flex: 1 1 48%;
    background: #bfd1e11c;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    padding: 30px;
    transition: transform 0.3s ease;
}

.section-box:hover {
    transform: translateY(-5px);
}

.section-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 600;
    color: #C59D5F;
    margin-bottom: 30px;
}

/* GRILLE ADAPTATIVE */
.grid-thes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 20px;
}

/* CARTE DE PRODUIT */
.famille-card {
  background: #fcfcfc;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.famille-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* IMAGE */
.famille-image {
  width: 100%;
  height: 150px;
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 10px;
}

.selection-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 15px;
}

/* INFOS DU PRODUIT */
.famille-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.famille-nature {
  color: #888;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.famille-price {
  font-size: 1rem;
  font-weight: 500;
  color: #444;
}

/* STOCK + BOUTON */
.stock-badge {
  display: inline-block;
  padding: 5px 10px;
  font-size: 0.85rem;
  border-radius: 20px;
  font-weight: bold;
}

.stock-yes {
  color: #2e7d32;
  background-color: #e8f5e9;
}

.stock-no {
  color: #c62828;
  background-color: #ffebee;
}

.btn {
  display: inline-block;
  background-color: #C59D5F;
  color: white;
  padding: 8px 15px;
  border-radius: 30px;
  margin-top: 12px;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #b38850;
}

/* RESPONSIVE */

@media (max-width: 768px) {
  .section-box {
    padding: 1.5rem 0.5rem;
  }

  .section-box1 {
    padding: 1.5rem 0.5rem;
  }

  .grid-thes {
    gap: 1rem;
  }

  /* Tablette / petits laptops */
@media (max-width: 1024px) {
  .grid-thes {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .grid-thes {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Très petits écrans */
@media (max-width: 480px) {
  .grid-thes {
    grid-template-columns: 1fr;
  }
}  

  .famille-card {
    padding: 10px;
    border-radius: 8px;
  }

  .famille-image {
    height: 100px;
    margin-bottom: 8px;
  }

  .famille-title {
    font-size: 1rem;
    margin-bottom: 4px;
  }

  .famille-nature {
    font-size: 0.8rem;
    margin-bottom: 8px;
  }

  .famille-price {
    font-size: 0.9rem;
    margin-top: 6px;
  }

  .stock-badge {
    font-size: 0.75rem;
    padding: 4px 8px;
    margin-top: 6px;
  }

  .btn {
    font-size: 0.8rem;
    padding: 6px 10px;
    margin-top: 10px;
  }
}


.grid-selections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  justify-content: center; /* ✅ Centrage horizontal */
  padding: 1rem;
  max-width: 1200px; /* ✅ Empêche l'étirement excessif */
  margin: 0 auto;    /* ✅ Centre le conteneur dans la page */
}


.selection-card {
  background: #fff;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  position: relative;
}

.selection-card:hover {
  transform: translateY(-5px);
}

.selection-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.card-title {
  font-size: 1.1rem;
  margin: 0.5rem 0;
}

.selection-description {
  font-size: 0.9rem;
  color: #555;
}

.famille-price {
  font-size: 1rem;
  color: #333;
  margin-top: 0.5rem;
}

.stock-info {
  margin-top: 0.5rem;
}

.stock-info1 {
  margin-top: 1.8rem;
}

.stock-badge {
  padding: 0.3rem 0.6rem;
  border-radius: 20px;
  font-size: 0.85rem;
}

.stock-yes {
  background-color: #e0f8e0;
  color: #2e7d32;
}

.stock-no {
  background-color: #f8e0e0;
  color: #c62828;
}

.read-more {
  margin-top: 1rem;
  text-align: center;
}

.read-more .btn {
  background: #222;
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 20px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.3s;
}

.read-more .btn:hover {
  background: #444;
}

@media (max-width: 600px) {
  .card-title {
    font-size: 1rem;
  }

  .selection-description {
    font-size: 0.85rem;
  }

  .famille-price {
    font-size: 0.95rem;
  }

  .read-more .btn {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
  }
}


/* Responsive */
@media (max-width: 1024px) {
    .grid-selections {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 400px) {
    .grid-selections {
        grid-template-columns: 4fr;
    }
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

@media (max-width: 1200px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 992px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 600px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 450px) {
    .product-grid {
        grid-template-columns: repeat(1, 1fr); /* ✅ 2 colonnes sur petits écrans */
    }
}

.presentation-section {
    display: flex;
    gap: 0px;
    padding: 60px;
    flex-wrap: wrap;
}

.presentation-slider {
    flex: 1;
    max-width: 60%;
    display: flex;
    align-items: center;      /* Centre verticalement */
    justify-content: center;  /* Centre horizontalement */
    height: 100%;             /* Important si parent a une hauteur définie */
    padding-top: 5px;
}


.presentation-slide-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 370px;
    overflow: hidden;
}


.presentation-slide {
    position: absolute;
    top: 0;
    left: 120px;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out;
}

.presentation-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.presentation-slide img {
    width: 800px;
    height: 480px;
    object-fit: contain;
    display: block;
    padding: 20px; 
}

.presentation-slide-text {
    position: absolute;
    bottom: 30%;
    left: 14%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 40px;
    border-radius: 8px;
}

/* TEXTE DROIT */
.presentation-text {
    flex: 1;
    max-width: 60%;
}

.promo-carousel {
  position: relative;
  z-index: 100;
  overflow: hidden;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.1rem;
  text-align: center;
  
  /* Supprime top: 50px; */
  margin-top: 60px; /* Crée l'espace avec le menu au-dessus */
  margin-bottom: -30px; /* Optionnel : crée un espace avec le contenu en dessous */
  
  padding: 0 10px;
  background-color: #f9f9f9;
}

/* ✅ Responsive mobile */
@media (max-width: 768px) {
  .promo-carousel {
    height: auto;           /* auto ajuste la hauteur selon le contenu */
    font-size: 0.8rem;      /* un peu plus petit pour mobile */
    top: -40px;              /* moins d’espace au-dessus si nécessaire */
    padding: 10px 12px;     /* plus de confort visuel */
    line-height: 1.4;       /* meilleure lisibilité si texte sur 2 lignes */
  }
}

.promo-slide {
  position: absolute;
  opacity: 0;
  animation: promoFade 12s infinite;
  width: 100%;
}

.promo-slide:nth-child(1) {
  animation-delay: 0s;
}
.promo-slide:nth-child(2) {
  animation-delay: 4s;
}
.promo-slide:nth-child(3) {
  animation-delay: 8s;
}

@keyframes promoFade {
  0%, 100% {
    opacity: 0;
    transform: translateY(20%);
  }
  10%, 30% {
    opacity: 1;
    transform: translateY(0);
  }
  40%, 100% {
    opacity: 0;
    transform: translateY(-20%);
  }
}


/* === Mega Menu Wrapper caché par défaut === */
.mega-menu-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  width: 30vw;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 20px;
  z-index: 1000;
  display: none; /* caché par défaut */
}

/* === Affiche le menu lors du survol === */
.mega-dropdown:hover .mega-menu-wrapper {
  display: block;
}

/* === Structure horizontale scrollable === */
.mega-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  gap: 20px;
  scroll-behavior: smooth;
  padding: 10px 40px;
  position: relative;
  max-width: 100%; /* important pour éviter débordement */
}

/* === Colonnes par nature === */
.mega-column {
  min-width: 200px;
  flex-shrink: 0;
}

.nature-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 2px solid #E3B019;
  padding-bottom: 5px;
  color: #28a745;
}

.article-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  text-decoration: none;
  color: #333;
}

.article-link img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

.article-link:hover {
  color: #28a745;
}

/* === Zones invisibles pour scroll automatique === */
/* Scroll zones */
.scroll-zone {
  position: absolute;
  top: 0;
  width: 60px;
  height: 100%;
  z-index: 20;
}

.scroll-left-zone {
  left: 0;
}

.scroll-right-zone {
  right: 0;
}

/* Optionnel : curseur spécial au survol des zones */
.scroll-zone:hover {
  cursor: ew-resize;
}

/* Colonne promo qui prend tout l'espace restant */
.promo-column {
  flex: 1; /* occupe l'espace restant */
  background: #f7f7f7;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #ddd;
  box-sizing: border-box;
}

/* Lien et contenu centré */
.promo-link {
  text-align: center;
  text-decoration: none;
  color: #333;
  width: 100%;
}

/* Image bien grande mais responsive */
.promo-link img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 15px;
}

/* Texte sous l’image */
.promo-text {
  font-size: 16px;
  font-weight: bold;
  color: #28a745;
}

/* === Mega menu wrapper spécifique aux coffrets === */
.coffret-mega-menu-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  width: 30vw;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 20px;
  z-index: 1000;
  display: none;
}

.mega-dropdown:hover .coffret-mega-menu-wrapper {
  display: block;
}

.coffret-mega-menu {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  scroll-behavior: smooth;
  padding: 10px 30px;
  position: relative;
}

.coffret-column {
  min-width: 200px;
  max-width: 220px;
  flex-shrink: 0;
   margin-left: 50px;
}

.coffret-title {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 2px solid #E3B019;
  padding-bottom: 5px;
  color: #28a745;
}

.coffret-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: #333;
  gap: 8px;
  margin-bottom: 10px;
}

.coffret-link img {
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  border-radius: 6px;
}

.coffret-link span {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  word-wrap: break-word;
  max-width: 200px;
}

/* Colonne promo spéciale */
.coffret-promo-column {
  min-width: 160px;
  flex-shrink: 0;
}

.coffret-promo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: #333;
  width: 100%;
}

.coffret-promo-link img {
  width: 200%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 10px;
}

.coffret-promo-text {
  font-size: 12px;
  color: #28a745;
  font-weight: bold;
  text-align: center;
}

/* === Mega menu wrapper spécifique aux collections === */
.collection-mega-menu-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  width: 30vw;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 20px;
  z-index: 1000;
  display: none;
}

.mega-dropdown:hover .collection-mega-menu-wrapper {
  display: block;
}

.collection-mega-menu {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  scroll-behavior: smooth;
  padding: 10px 30px;
  position: relative;
}

.collection-column {
  min-width: 200px;
  max-width: 220px;
  flex-shrink: 0;
  margin-left: 50px;
}

.collection-title {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 2px solid #E3B019;
  padding-bottom: 5px;
  color: #28a745;
}

.collection-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: #333;
  gap: 8px;
  margin-bottom: 10px;
}

.collection-link img {
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  border-radius: 6px;
}

.collection-link span {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  word-wrap: break-word;
  max-width: 200px;
}

/* Colonne promo spécifique */
.collection-promo-column {
  min-width: 160px;
  flex-shrink: 0;
}

.collection-promo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: #333;
  width: 100%;
}

.collection-promo-link img {
  width: 200%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 10px;
}

.collection-promo-text {
  font-size: 12px;
  color: #28a745;
  font-weight: bold;
  text-align: center;
}

.epices-mega-menu-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  width: 30vw;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 20px;
  z-index: 1000;
  display: none;
}

.mega-dropdown:hover .epices-mega-menu-wrapper {
  display: block;
}

.epices-mega-menu {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  scroll-behavior: smooth;
  padding: 10px 30px;
  position: relative;
}

.epices-column {
  min-width: 90px;
  max-width: 180px;
  flex-shrink: 0;
  margin-left: 10px;
}

.epices-title {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 5px;
  border-bottom: 2px solid #E3B019;
  padding-bottom: 5px;
  color: #28a745;
}

.epices-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: #333;
  gap: 8px;
  margin-bottom: 10px;
}

.epices-link img {
  width: 100%;
  max-height: 80px;
  object-fit: contain;
  border-radius: 6px;
}

.epices-link span {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  word-wrap: break-word;
  max-width: 200px;
}

.epices-promo-column {
  min-width: 160px;
  flex-shrink: 0;
}

.epices-promo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: #333;
  width: 100%;
}

.epices-promo-link img {
  width: 200%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 10px;
}

.epices-promo-text {
  font-size: 12px;
  color: #e67e22;
  font-weight: bold;
  text-align: center;
}

.accessoires-mega-menu-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  width: 30vw;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 20px;
  z-index: 1000;
  display: none;
}

.mega-dropdown:hover .accessoires-mega-menu-wrapper {
  display: block;
}

.accessoires-mega-menu {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  scroll-behavior: smooth;
  padding: 10px 30px;
  position: relative;
}

.accessoires-column {
  min-width: 200px;
  max-width: 220px;
  flex-shrink: 0;
  margin-left: 50px;
}

.accessoires-title {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 2px solid #E3B019;
  padding-bottom: 5px;
  color: #28a745;
}

.accessoires-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: #333;
  gap: 8px;
  margin-bottom: 10px;
}

.accessoires-link img {
  width: 80%;
  max-height: 120px;
  object-fit: contain;
  border-radius: 6px;
}

.accessoires-link span {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  word-wrap: break-word;
  max-width: 200px;
}

.accessoires-promo-column {
  min-width: 160px;
  flex-shrink: 0;
}

.accessoires-promo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: #333;
  width: 100%;
}

.accessoires-promo-link img {
  width: 200%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 10px;
}

.accessoires-promo-text {
  font-size: 12px;
  color: #17a2b8;
  font-weight: bold;
  text-align: center;
}

.vaisselle-mega-menu-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  width: 25vw;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 20px;
  z-index: 1000;
  display: none;
}

.mega-dropdown:hover .vaisselle-mega-menu-wrapper {
  display: block;
}

.vaisselle-mega-menu {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  scroll-behavior: smooth;
  padding: 10px 30px;
  position: relative;
}

.vaisselle-column {
  min-width: 200px;
  max-width: 220px;
  flex-shrink: 0;
  margin-left: 50px;
}

.vaisselle-title {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 2px solid #E3B019;
  padding-bottom: 5px;
  color: #28a745;
}

.vaisselle-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: #333;
  gap: 8px;
  margin-bottom: 10px;
}

.vaisselle-link img {
  width: 80%;
  max-height: 120px;
  object-fit: contain;
  border-radius: 6px;
}

.vaisselle-link span {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  word-wrap: break-word;
  max-width: 200px;
}

.vaisselle-promo-column {
  min-width: 160px;
  flex-shrink: 0;
}

.vaisselle-promo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: #333;
  width: 100%;
}

.vaisselle-promo-link img {
  width: 200%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 10px;
}

.vaisselle-promo-text {
  font-size: 12px;
  color: #d63384;
  font-weight: bold;
  text-align: center;
}

/* Décale le contenu principal pour ne pas qu’il passe sous le header */
body {
  padding-top: 180px; /* Ajuste selon la hauteur combinée header + navbar */
}

/* Empêche que les menus se fassent couper */
.mega-menu-wrapper,
.epices-mega-menu-wrapper,
.accessoires-mega-menu-wrapper,
.vaisselle-mega-menu-wrapper,
.collection-mega-menu-wrapper,
.coffret-mega-menu-wrapper {
  z-index: 1001;
}

@media (max-width: 768px) {
  .header-modern,
  .main-navbar {
    position: static;
  }

  body {
    padding-top: 0;
  }
}

.header-modern, .main-navbar {
  transition: top 0.3s ease-in-out;
}

@media (max-width: 768px) {
  .header-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .header-left,
  .header-center,
  .header-right {
    width: 100%;
    justify-content: center;
    display: flex;
    margin-bottom: 10px;
  }

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

  .logo-modern {
    max-width: 120px;
    height: auto;
  }

  .trademark {
    font-size: 11px;
  }

  .search-form {
    width: 120%;
  }

  .compte-wrapper {
    justify-content: center;
    margin: 0 8px;
  }

  .btn-panier {
    margin-left: 10px;
  }
}

/* ----- RESPONSIVE MENU POUR MOBILE ----- */
@media (max-width: 768px) {
  .main-navbar {
    position: relative;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    top: 0;
    padding: 8px 12px;
    z-index: 999;
  }

  .nav-items {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
  }

  .nav-items > li {
    border-bottom: 1px solid #eee;
    position: relative;
  }

  .nav-items > li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    background-color: #fdfdfd00;
  }

  .nav-items > li:hover > a,
  .nav-items > li > a:focus {
    background-color: #e9f5f2;
  }

  .nav-items > li > a::after {
    content: "▾";
    font-size: 12px;
    transition: transform 0.3s;
  }

  .nav-items > li.open > a::after {
    transform: rotate(180deg);
  }

  .mega-menu-wrapper,
  .coffret-mega-menu-wrapper,
  .collection-mega-menu-wrapper,
  .epices-mega-menu-wrapper,
  .accessoires-mega-menu-wrapper,
  .vaisselle-mega-menu-wrapper,
  .recettes-mega-menu-wrapper,
  .dropdown-menu {
    display: none;
    padding: 12px;
    background-color: #f9f9f9;
    border-top: 1px solid #ddd;
    overflow-x: auto;
  }

  .nav-items > li.open > .mega-menu-wrapper,
.nav-items > li.open > .coffret-mega-menu-wrapper,
.nav-items > li.open > .collection-mega-menu-wrapper,
.nav-items > li.open > .epices-mega-menu-wrapper,
.nav-items > li.open > .accessoires-mega-menu-wrapper,
.nav-items > li.open > .vaisselle-mega-menu-wrapper,
.nav-items > li.open > .recettes-mega-menu-wrapper,
.nav-items > li.open > .dropdown-menu {
    display:block;
}

  .mega-menu,
  .coffret-mega-menu,
  .collection-mega-menu,
  .epices-mega-menu,
  .accessoires-mega-menu,
  .vaisselle-mega-menu,
  .recettes-mega-menu { /* Ajouté */
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-x: hidden;
    padding: 10px 0;
  }

  .mega-column,
  .coffret-column,
  .collection-column,
  .epices-column,
  .accessoires-column,
  .vaisselle-column,
  .recettes-column { /* Ajouté */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    gap: 10px;
  }

  .article-link,
.coffret-link,
.collection-link,
.epices-link,
.accessoires-link,
.vaisselle-link,
.recettes-link {
   width:100%;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .article-link img,
  .coffret-link img,
  .collection-link img,
  .epices-link img,
  .accessoires-link img,
  .vaisselle-link img,
  .recettes-link img { /* Ajouté */
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
  }

  .article-link span,
  .coffret-link span,
  .collection-link span,
  .epices-link span,
  .accessoires-link span,
  .vaisselle-link span,
  .recettes-link span { /* Ajouté */
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: normal;
    text-align: left;
  }

  .nature-title,
  .coffret-title,
  .collection-title,
  .epices-title,
  .accessoires-title,
  .vaisselle-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
  }

  .promo-column,
  .coffret-promo-column,
  .collection-promo-column,
  .accessoires-promo-column,
  .vaisselle-promo-column {
    background: #eafcf3;
  }

  .promo-text,
  .coffret-promo-text,
  .collection-promo-text,
  .accessoires-promo-text,
  .vaisselle-promo-text {
    font-size: 0.85em;
    color: #1b5e20;
  }

  .mega-menu-wrapper,
.coffret-mega-menu-wrapper,
.collection-mega-menu-wrapper,
.epices-mega-menu-wrapper,
.accessoires-mega-menu-wrapper,
.vaisselle-mega-menu-wrapper,
.recettes-mega-menu-wrapper {
  overflow-x: hidden;
  white-space: normal;
    padding: 12px;
  }

  .mega-menu,
.coffret-mega-menu,
.collection-mega-menu,
.epices-mega-menu,
.accessoires-mega-menu,
.vaisselle-mega-menu,
.recettes-mega-menu {
  min-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mega-column,
.coffret-column,
.collection-column,
.epices-column,
.accessoires-column,
.vaisselle-column,
.recettes-column {
  width: 100%;
  min-width: auto;
  display: flex;
  flex-direction: column;
}

  /* --- Ajout pour réduire taille image promo sur mobile --- */
  .promo-link img,
  .coffret-promo-link img,
  .collection-promo-link img,
  .accessoires-promo-link img,
  .vaisselle-promo-link img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }

  /* Limiter hauteur des images de promo */
  .promo-link img,
  .coffret-promo-link img,
  .collection-promo-link img,
  .accessoires-promo-link img,
  .vaisselle-promo-link img {
    max-height: 100px;
    object-fit: contain;
  }
}


@media (max-width: 768px) {
  /* HERO SECTION */
  .hero-section {
  display: none;
  }

  .hero-video {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
    top: 5px;
  }

  .bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .slide img {
    width: 50%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .slide-text {
    text-align: center;
  }

  .slide-text h2 {
    font-size: 14px;
  }

  .slide-text p {
    font-size: 14px;
  }

  .slide-text a {
    font-size: 14px;
    padding: 0.5rem 1rem;
    display: inline-block;
  }

  /* PRESENTATION SECTION */
  .presentation-section {
    flex-direction: column;
    display: flex;
    align-items: center;
    padding: 1rem;
  }

  .presentation-slider,
  .presentation-text {
    width: 100%;
    max-width: 100%
  }

  .presentation-slide {
    left: -20px;
  }

  .presentation-slide-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    height: 170px;
  }

  .presentation-slide img {
    width: 500px;
    height: auto;
    display: block;
  }

  .presentation-slide-text {
    text-align: center;
  }

  .presentation-slide-text h2 {
    font-size: 18px;
  }

  .card-privilege {
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      max-width: 1500px;
      margin: 20px auto;
      font-size: 1.1rem;
      line-height: 1.6;
    }

  .presentation-slide-text p,
  .card-privilege p {
    font-size: 14px;
    line-height: 1.5;
  }

  /* Appliquer une hauteur différente sur mobile */
@media (max-width: 768px) {
  .presentation-slide-container {
    height: 220px;
  }
}


  .card-privilege h1 {
    font-size: 20px;
    margin-bottom: 1rem;
  }

  .card-privilege h6 {
    font-size: 16px;
    margin-top: 1.5rem;
  }

  .container h2 {
    font-size: 1.2rem;
    color: #000;
    font-weight: bold;
    text-align: center;
}
.section-box2 {
    flex: 1 1 48%;
    background: #CFF0E42B;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    
    transition: transform 0.3s ease;
}
}

.user-label {
    font-size: 0.85em;
    text-align: center;
}


.partenaire-icon:hover {
    color: #FFF;
}

.mega-dropdown {
  position: relative;
}

.recettes-mega-menu-wrapper {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  z-index: 1000;
  padding: 15px;
  min-width: 250px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.mega-dropdown:hover .recettes-mega-menu-wrapper {
  display: block;
}

.recettes-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 8px;
  color: #333;
}

.recettes-link img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 5px;
}

.top-50 {
  top: 50% !important;
}

.top-501 {
  top: 65% !important;
}

/* === HAMBURGER === */
.menu-toggle {
  display: none; /* Caché par défaut (desktop) */
}
@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* <-- centrer les barres */
    gap: 6px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: #3a3a3a;
    border: none;
    padding: 5px; /* optionnel pour mieux centrer */
  }

  .menu-toggle .bar {
    height: 3px;
    width: 24px; /* réduit pour un look plus clean */
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
  }
}

/* Animation lorsqu'on ouvre le menu */
.menu-toggle.open .bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.open .bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle.open .bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}


/* === Responsive navigation === */
@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
    position: absolute;
    right: 1px;
    top: 1px;
  }

  .nav-items {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #f5f5f5;
    padding: 15px 20px;
    border-top: 1px solid #ddd;
    z-index: 999;
  }

  .nav-items.active {
    display: flex;
  }

  .dropdown .dropdown-menu,
  .mega-dropdown .mega-menu-wrapper {
    position: relative;
    display: none;
  }

  .dropdown:hover .dropdown-menu,
  .mega-dropdown:hover .mega-menu-wrapper {
    display: block;
  }
}

/* Style des titres */
h2 {
    color: #FFF;

}

.header-right-icons {
    display: flex;
    align-items: center;
    gap: 40px; /* Espace horizontal entre chaque icône */
}

.partenaire-icon,
.user-icon,
.panier-icon {
    font-size: 2em;
    color: #E4B01A;
    transition: transform 0.2s ease;
}

.partenaire-icon-link,
.user-icon-link,
.btn-panier {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.compte-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.logout-btn i {
    margin-left: 8px;
    color: #e00;
    font-size: 1.3em;
}

.user-label {
    font-size: 0.8em;
    margin-top: 2px;
    color: #fff
}

.user-icon:hover {
    color: #FFF;
}

.panier-icon:hover {
    color: #FFF;
}

.search-form1 {
    display: inline-block;
    width: 100%;
    max-width: 350px;
  }

  .search-input {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    box-sizing: border-box;
  }

  .search-button {
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
  }

  @media (max-width: 480px) {
    .search-form1 {
      max-width: 100%;
    }
    .search-input {
      font-size: 13px;
      padding: 6px;
    }
    .search-button {
      padding: 6px 10px;
    }
  }
.card-privilege {
      background: white;
      padding: 27px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      max-width: 1600px;
      margin: 20px auto;
      font-size: 1.1rem;
      line-height: 1.6;
    }

.section-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 0px;
}
.section-box {
    flex: 1 1 48%;
    background: #EABD210A;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    padding: 20px;
}
.section-title {
    text-align: center;
    color: #C59D5F;
    margin-bottom: 25px;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
}
.famille-card, .selection-card {
    background: #f9f9f9;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.famille-image {
    width: 100%;
    height: 180px;
    object-fit: contain;
    border-radius: 10px;
}
.selection-image {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 10px;
}
.famille-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-top: 10px;
}
.famille-price {
    font-size: 1rem;
    color: #333;
}

.btn-like i {
    transition: transform 0.2s ease;
}
.btn-like:active i {
    transform: scale(1.3);
}

/* =========================
   DESKTOP
   ========================= */
.search-input {
  width: 250px;
}

/* =========================
   TABLETTE UNIQUEMENT
   ========================= */
@media (min-width: 769px) and (max-width: 991px) {
  .search-input {
    width: 180px; /* valeur tablette */
  }
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 768px) {
  .search-input {
    width: 150px;
  }
}

@media (max-width: 768px) {
  /* WRAPPERS en mobile */
  .mega-menu-wrapper,
  .coffret-mega-menu-wrapper,
  .collection-mega-menu-wrapper,
  .epices-mega-menu-wrapper,
  .accessoires-mega-menu-wrapper,
  .vaisselle-mega-menu-wrapper {
    width: 90vw;
    padding: 20px;
    left: 0;
    top: 100%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
    position: absolute;
  }

  /* COLUMNS en mobile */
  .collection-column,
  .coffret-column,
  .accessoires-column,
  .vaisselle-column {
    min-width: 200px;
    max-width: 1000px;
    flex-shrink: 0;
    margin-left: 2px;
  }

  .epices-column {
    min-width: 90px;
    max-width: 300px;
    flex-shrink: 0;
    margin-left: 2px;
  }
}
@media (max-width: 768px) {
  .header-modern {
    width: 100%;       /* ou un % qui convient à ta mise en page */
    margin: 0 auto;   /* centre horizontalement */
  }

  /* Optionnel : réduire un peu le padding pour mieux centrer */
  .header-modern > .header-top {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Image Bonne Année */
.newyear-image {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
}

/* Bouton continuer - desktop */
.btn-continue {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

/* ===== MOBILE ===== */
@media (max-width: 576px) {

    .modal-body {
        flex-direction: column;
        height: 50vh;
        padding: 20px;
    }

    .newyear-image {
        max-height: 65vh;
        margin-bottom: 15px;
    }

    .btn-continue {
        position: static; /* enlève absolute */
        transform: none;
        margin-top: 10px;
    }
}

.logo-group {
    text-align: center;
}

.logo-img {
    width: 100%;
    max-width: 750px;   /* largeur max sur desktop */
    height: auto;
    display: block;
    margin: 20px auto;  /* centre horizontalement */
}

@media (max-width: 768px) {

    .livraison-banner {
        width: 115vw;               /* largeur écran totale */
        margin-left: 100%;
        transform: translateX(-35%); /* centrage parfait */
    }

    .logo-img {
        width: 100%;
        max-width: none;
        margin: 10px auto;
    }
}

.livraison-banner {
    text-align: center;
    margin-top: 20px;
}

/* Overlay (bloque le site) */
#cookie-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
    z-index: 9998;
    display: none;
}

/* Bandeau */
#cookie-banner {
    position: fixed;
    left: 0;
    width: 100%;
    background: #1e1e1e;
    color: #fff;
    padding: 20px;
    box-shadow: 0 -2px 15px rgba(0,0,0,0.2);
    z-index: 9999;
    display: none;
    animation: slideUp 0.4s ease;
    bottom: 0; /* Desktop normal */
}

/* 🔥 Ajustement mobile */
@media (max-width: 768px) {
    #cookie-banner {
        bottom: 90px; /* espace pour la barre Tawk */
    }
}

.cookie-content {
    max-width: 1100px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cookie-text {
    font-size: 0.95rem;
    line-height: 1.4;
}

.cookie-actions button {
    min-width: 120px;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.prix-barre {
    text-decoration: line-through;
    color: #f20675;
    font-size: 0.9rem;
    margin-right: 6px;
}

.prix-promo {
    color: #EE9343;
    font-weight: bold;
    font-size: 1rem;
}

.prix-barre,
.prix-promo {
    display: inline-block;
}

.prix-promo {
    color: #631ec7;
    font-weight: 700;
    font-size: 1.05rem;
}
/* Badge promotion avec dégradé */
.badge-promo {
    position: absolute;
    top: -5px;       /* distance depuis le haut de l'image */
    left: 200px;      /* distance depuis la gauche de l'image */
    background: linear-gradient(135deg, #3B50FF, #FF6B6B); /* dégradé rouge vif vers rouge clair */
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9em;
    z-index: 20;     
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .badge-promo {
        top: -5px;   /* décale davantage sur mobile */
        left: 100px;
        font-size: 0.8em; /* légèrement plus petit pour écran réduit */
        padding: 4px 8px;
    }
}

.dropdown-menu,
.mega-menu-wrapper,
.coffret-mega-menu-wrapper,
.collection-mega-menu-wrapper,
.epices-mega-menu-wrapper,
.accessoires-mega-menu-wrapper,
.vaisselle-mega-menu-wrapper,
.recettes-mega-menu-wrapper {

    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

.dropdown-menu::-webkit-scrollbar,
.mega-menu-wrapper::-webkit-scrollbar {
    width: 8px;
}

.dropdown-menu::-webkit-scrollbar-thumb,
.mega-menu-wrapper::-webkit-scrollbar-thumb {
    background: #C59D5F;
    border-radius: 10px;
}



/* CONTENEUR */
.grammage-zone{
    background:#fff;
    border-radius:24px;
    padding:30px;
    border:1px solid #f0f0f0;
    box-shadow:0 20px 45px rgba(0,0,0,0.07);
    margin-top:20px;
}

.grammage-hidden-select{
    display:none;
}

/* GRILLE */
.grammage-cards{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    align-items:flex-end;
}

/* CARD */
.grammage-card{
    width:120px;
    padding:14px;
    border-radius:20px;
    border:2px solid #efefef;
    background:#fff;
    text-align:center;
    cursor:pointer;
    transition:all .25s ease;
    position:relative;
}

.grammage-card:hover{
    transform:translateY(-6px);
    border-color:#C59D5F;
    box-shadow:0 16px 30px rgba(238,147,67,.18);
}

.grammage-card.active{
    border-color:#C59D5F;
    background:linear-gradient(180deg,#fff,#fff8f2);
    box-shadow:0 18px 35px rgba(238,147,67,.22);
}

/* BOITE DE THÉ */
.tea-box{
    width:58px;
    margin:auto;
    background:linear-gradient(180deg,#1e1e1e,#2f2f2f);
    border-radius:8px 8px 14px 14px;
    position:relative;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.1),
        0 10px 16px rgba(0,0,0,.18);
}

.tea-box-top{
    position:absolute;
    top:-8px;
    left:8px;
    right:8px;
    height:8px;
    background:#444;
    border-radius:8px 8px 0 0;
}

.tea-box-label{
    position:absolute;
    left:6px;
    right:6px;
    top:45%;
    transform:translateY(-50%);
    background:#C59D5F;
    color:#fff;
    font-size:9px;
    font-weight:700;
    padding:4px 2px;
    border-radius:6px;
    letter-spacing:.5px;
}

/* tailles */
.small .tea-box{
    height:62px;
}

.medium .tea-box{
    height:82px;
}

.large .tea-box{
    height:102px;
}

/* texte */
.g-weight{
    display:block;
    margin-top:14px;
    font-size:16px;
    font-weight:800;
    color:#222;
}

.g-price{
    display:block;
    margin-top:4px;
    font-size:14px;
    font-weight:700;
    color:#EE9343;
}

/* bouton */
.btn-add-premium{
    width:100%;
    border:none;
    padding:16px;
    border-radius:18px;
    background:linear-gradient(135deg,#0f0303,#E39417);
    color:#fff;
    font-size:16px;
    font-weight:800;
    transition:.25s;
    box-shadow:0 16px 28px rgba(238,147,67,.28);
}

.btn-add-premium:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 35px rgba(238,147,67,.35);
}

.btn-add-premium:disabled{
    background:#ccc;
    box-shadow:none;
    cursor:not-allowed;
}

/* =====================================================
   GRAMMAGE RESPONSIVE PROPRE
   Desktop inchangé
   Tablette + Mobile compact premium
   ===================================================== */


/* =========================
   DESKTOP = ON TOUCHE PAS
   ========================= */
@media (min-width: 992px){

.grammage-zone{
    padding:30px;
}

.grammage-cards{
    display:flex;
}

.grammage-card{
    width:120px;
}

}


/* =========================
   TABLETTE
   ========================= */
@media (max-width: 991px){

.grammage-zone{
    padding:18px !important;
    border-radius:18px !important;
    margin-top:18px;
}

.grammage-cards{
    justify-content:center;
    gap:12px !important;
}

.grammage-card{
    width:92px !important;
    padding:10px !important;
    border-radius:16px !important;
}

/* effet hover neutralisé tactile */
.grammage-card:hover{
    transform:none;
}

/* boîte thé réduite */
.tea-box{
    width:46px !important;
}

/* tailles boîte */
.small .tea-box{
    height:48px !important;
}

.medium .tea-box{
    height:62px !important;
}

.large .tea-box{
    height:76px !important;
}

/* couvercle */
.tea-box-top{
    top:-6px !important;
    left:6px !important;
    right:6px !important;
    height:6px !important;
}

/* étiquette */
.tea-box-label{
    left:5px !important;
    right:5px !important;
    font-size:7px !important;
    padding:3px 2px !important;
    border-radius:5px !important;
}

/* texte */
.g-weight{
    margin-top:10px !important;
    font-size:14px !important;
}

.g-price{
    margin-top:3px !important;
    font-size:13px !important;
}

/* bouton */
.btn-add-premium{
    padding:13px !important;
    font-size:15px !important;
    border-radius:14px !important;
}

}


/* =========================
   MOBILE
   ========================= */
@media (max-width: 768px){

.grammage-zone{
    padding:14px !important;
    border-radius:14px !important;
    margin-top:14px;
}

.grammage-cards{
    justify-content:center;
    gap:8px !important;
}

.grammage-card{
    width:76px !important;
    padding:8px !important;
    border-radius:12px !important;
}

/* boîte thé mini */
.tea-box{
    width:36px !important;
}

/* tailles */
.small .tea-box{
    height:36px !important;
}

.medium .tea-box{
    height:48px !important;
}

.large .tea-box{
    height:60px !important;
}

/* top */
.tea-box-top{
    top:-5px !important;
    left:5px !important;
    right:5px !important;
    height:5px !important;
}

/* label */
.tea-box-label{
    left:4px !important;
    right:4px !important;
    font-size:6px !important;
    padding:2px 1px !important;
    border-radius:4px !important;
    letter-spacing:0 !important;
}

/* texte */
.g-weight{
    margin-top:8px !important;
    font-size:12px !important;
    line-height:1;
}

.g-price{
    margin-top:2px !important;
    font-size:11px !important;
    line-height:1;
}

/* bouton */
.btn-add-premium{
    padding:11px !important;
    font-size:14px !important;
    border-radius:12px !important;
}

}


/* =========================
   PETITS MOBILES
   ========================= */
@media (max-width: 420px){

.grammage-cards{
    gap:7px !important;
}

.grammage-card{
    width:68px !important;
    padding:7px !important;
}

.tea-box{
    width:32px !important;
}

.small .tea-box{
    height:32px !important;
}

.medium .tea-box{
    height:42px !important;
}

.large .tea-box{
    height:52px !important;
}

.g-weight{
    font-size:11px !important;
}

.g-price{
    font-size:10px !important;
}

.btn-add-premium{
    padding:10px !important;
    font-size:13px !important;
}

}



/* CONTENEUR */
.spice-zone{
    background:#fff;
    border-radius:24px;
    padding:30px;
    border:1px solid #f0f0f0;
    box-shadow:0 20px 45px rgba(0,0,0,0.07);
}

/* SELECT CACHÉ */
.grammage-hidden-select{
    display:none;
}

/* GRID */
.grammage-cards{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    align-items:flex-end;
}

/* CARD */
.spice-card{
    width:120px;
    padding:14px;
    border-radius:20px;
    border:2px solid #efefef;
    background:#fff;
    text-align:center;
    cursor:pointer;
    transition:.25s;
}

.spice-card:hover{
    transform:translateY(-6px);
    border-color:#d98a2b;
    box-shadow:0 16px 28px rgba(217,138,43,.18);
}

.spice-card.active{
    border-color:#d98a2b;
    background:linear-gradient(180deg,#fff,#fff8ef);
    box-shadow:0 18px 32px rgba(217,138,43,.22);
}

/* POT À ÉPICES */
.spice-jar{
    width:56px;
    margin:auto;
    border-radius:10px 10px 14px 14px;
    background:linear-gradient(180deg,#ffffff,#f4f4f4);
    border:2px solid #d9d9d9;
    position:relative;
    overflow:hidden;
    box-shadow:0 8px 18px rgba(0,0,0,.10);
}

.jar-cap{
    height:12px;
    background:linear-gradient(180deg,#b67a35,#8e5c24);
    border-radius:8px 8px 0 0;
}

.jar-content{
    position:absolute;
    left:6px;
    right:6px;
    bottom:8px;
    height:45%;
    background:linear-gradient(180deg,#c46a22,#8a4315);
    border-radius:6px;
}

.jar-label{
    position:absolute;
    left:5px;
    right:5px;
    top:26px;
    background:#fff;
    border-radius:6px;
    font-size:8px;
    font-weight:800;
    padding:3px;
    color:#444;
    z-index:2;
}

/* tailles */
.small .spice-jar{
    height:64px;
}

.medium .spice-jar{
    height:84px;
}

.large .spice-jar{
    height:104px;
}

/* texte */
.g-weight{
    display:block;
    margin-top:14px;
    font-weight:800;
    color:#222;
    font-size:16px;
}

.g-price{
    display:block;
    margin-top:4px;
    color:#d98a2b;
    font-size:14px;
    font-weight:700;
}

/* bouton */
.btn-add-premium{
    width:100%;
    border:none;
    padding:16px;
    border-radius:18px;
    background:llinear-gradient(135deg,#0f0303,#E39417);
    color:#fff;
    font-size:16px;
    font-weight:800;
    transition:.25s;
    box-shadow:0 16px 28px rgba(217,138,43,.28);
}

.btn-add-premium:hover{
    transform:translateY(-3px);
}

.btn-add-premium:disabled{
    background:#ccc;
    box-shadow:none;
}

/* mobile */
@media(max-width:768px){

    .spice-zone{
        padding:22px;
    }

    .grammage-cards{
        justify-content:center;
    }

    .spice-card{
        width:105px;
    }
}


/* CONTENEUR */
.accessory-zone{
    background:#fff;
    border-radius:24px;
    padding:30px;
    border:1px solid #f0f0f0;
    box-shadow:0 20px 45px rgba(0,0,0,.07);
}

/* cache select */
.grammage-hidden-select{
    display:none;
}

/* grille */
.grammage-cards{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    align-items:flex-end;
}

/* card */
.accessory-card{
    width:120px;
    padding:14px;
    border-radius:20px;
    border:2px solid #ececec;
    background:#fff;
    text-align:center;
    cursor:pointer;
    transition:.25s;
}

.accessory-card:hover{
    transform:translateY(-6px);
    border-color:#4f6f8f;
    box-shadow:0 16px 28px rgba(79,111,143,.18);
}

.accessory-card.active{
    border-color:#4f6f8f;
    background:linear-gradient(180deg,#fff,#f6f9fc);
    box-shadow:0 18px 32px rgba(79,111,143,.20);
}

/* ICONE ACCESSOIRE STYLE THÉIÈRE */
.accessory-box{
    width:62px;
    height:62px;
    margin:auto;
    position:relative;
}

.acc-body{
    width:52px;
    height:42px;
    background:linear-gradient(180deg,#5e738a,#33485f);
    border-radius:16px 16px 22px 22px;
    position:absolute;
    bottom:0;
    left:5px;
    box-shadow:0 10px 16px rgba(0,0,0,.15);
}

.acc-handle{
    width:18px;
    height:18px;
    border:4px solid #33485f;
    border-radius:50%;
    position:absolute;
    right:-2px;
    top:20px;
}

/* tailles */
.small .accessory-box{
    transform:scale(.88);
}

.medium .accessory-box{
    transform:scale(1);
}

.large .accessory-box{
    transform:scale(1.12);
}

/* texte */
.g-weight{
    display:block;
    margin-top:14px;
    font-size:16px;
    font-weight:800;
    color:#222;
}

.g-price{
    display:block;
    margin-top:4px;
    font-size:14px;
    font-weight:700;
    color:#4f6f8f;
}

/* bouton */
.btn-add-premium{
    width:100%;
    border:none;
    padding:16px;
    border-radius:18px;
    background:linear-gradient(135deg,#0f0303,#E39417);
    color:#fff;
    font-size:16px;
    font-weight:800;
    transition:.25s;
    box-shadow:0 16px 28px rgba(79,111,143,.28);
}

.btn-add-premium:hover{
    transform:translateY(-3px);
}

.btn-add-premium:disabled{
    background:#ccc;
    box-shadow:none;
}

/* =====================================================
   SPICES + ACCESSORIES RESPONSIVE
   Desktop inchangé
   Tablette + Mobile compact premium
   ===================================================== */


/* =========================
   TABLETTE
   ========================= */
@media (max-width: 991px){

/* ===== CONTENEURS ===== */
.spice-zone,
.accessory-zone{
    padding:18px !important;
    border-radius:18px !important;
}

/* ===== GRID ===== */
.grammage-cards{
    justify-content:center;
    gap:10px !important;
}

/* =====================================================
   SPICES
   ===================================================== */
.spice-card{
    width:92px !important;
    min-width:92px;
    padding:8px !important;
    border-radius:16px !important;
}

.spice-card:hover{
    transform:none;
}

/* pot */
.spice-jar{
    width:44px !important;
}

.small .spice-jar{
    height:48px !important;
}

.medium .spice-jar{
    height:62px !important;
}

.large .spice-jar{
    height:76px !important;
}

.jar-cap{
    height:8px !important;
}

.jar-content{
    left:5px !important;
    right:5px !important;
    bottom:6px !important;
}

.jar-label{
    top:20px !important;
    left:4px !important;
    right:4px !important;
    font-size:6px !important;
    padding:2px !important;
}

/* =====================================================
   ACCESSOIRES
   ===================================================== */
.accessory-card{
    width:92px !important;
    min-width:92px;
    padding:8px !important;
    border-radius:16px !important;
}

.accessory-card:hover{
    transform:none;
}

/* icône */
.accessory-box{
    width:46px !important;
    height:46px !important;
}

.acc-body{
    width:38px !important;
    height:30px !important;
    left:4px !important;
    border-radius:12px 12px 16px 16px !important;
}

.acc-handle{
    width:14px !important;
    height:14px !important;
    border:3px solid #33485f !important;
    right:-1px !important;
    top:15px !important;
}

/* =====================================================
   TEXTES
   ===================================================== */
.g-weight{
    margin-top:10px !important;
    font-size:14px !important;
}

.g-price{
    margin-top:3px !important;
    font-size:13px !important;
}

/* bouton */
.btn-add-premium{
    padding:14px !important;
    font-size:15px !important;
    border-radius:14px !important;
}

}


/* =========================
   MOBILE
   ========================= */
@media (max-width: 768px){

/* conteneurs */
.spice-zone,
.accessory-zone{
    padding:12px !important;
    border-radius:14px !important;
}

/* grid */
.grammage-cards{
    justify-content:center;
    gap:8px !important;
}

/* =====================================================
   SPICES
   ===================================================== */
.spice-card{
    width:72px !important;
    min-width:72px;
    padding:6px !important;
    border-radius:12px !important;
}

.spice-jar{
    width:36px !important;
}

.small .spice-jar{
    height:36px !important;
}

.medium .spice-jar{
    height:48px !important;
}

.large .spice-jar{
    height:60px !important;
}

.jar-cap{
    height:6px !important;
}

.jar-content{
    left:4px !important;
    right:4px !important;
    bottom:5px !important;
}

.jar-label{
    top:16px !important;
    left:3px !important;
    right:3px !important;
    font-size:5px !important;
    padding:1px !important;
}

/* =====================================================
   ACCESSOIRES
   ===================================================== */
.accessory-card{
    width:72px !important;
    min-width:72px;
    padding:6px !important;
    border-radius:12px !important;
}

.accessory-box{
    width:38px !important;
    height:38px !important;
}

.acc-body{
    width:30px !important;
    height:24px !important;
    left:4px !important;
    border-radius:10px 10px 14px 14px !important;
}

.acc-handle{
    width:12px !important;
    height:12px !important;
    border:2px solid #33485f !important;
    right:-1px !important;
    top:12px !important;
}

/* =====================================================
   TEXTES
   ===================================================== */
.g-weight{
    margin-top:8px !important;
    font-size:12px !important;
    line-height:1;
}

.g-price{
    margin-top:2px !important;
    font-size:11px !important;
    line-height:1;
}

/* bouton */
.btn-add-premium{
    padding:12px !important;
    font-size:14px !important;
    border-radius:12px !important;
}

}


/* =========================
   PETITS MOBILES
   ========================= */
@media (max-width: 420px){

.grammage-cards{
    gap:7px !important;
}

.spice-card,
.accessory-card{
    width:68px !important;
    min-width:68px;
    padding:6px !important;
}

.spice-jar{
    width:32px !important;
}

.small .spice-jar{
    height:32px !important;
}

.medium .spice-jar{
    height:42px !important;
}

.large .spice-jar{
    height:52px !important;
}

.accessory-box{
    width:34px !important;
    height:34px !important;
}

.acc-body{
    width:28px !important;
    height:22px !important;
}

.g-weight{
    font-size:11px !important;
}

.g-price{
    font-size:10px !important;
}

.btn-add-premium{
    padding:10px !important;
    font-size:13px !important;
}

}

/* CONTENEUR */
.tableware-zone{
    background:#fff;
    border-radius:24px;
    padding:30px;
    border:1px solid #f0f0f0;
    box-shadow:0 20px 45px rgba(0,0,0,.07);
}

.grammage-hidden-select{
    display:none;
}

/* grille */
.grammage-cards{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    align-items:flex-end;
}

/* carte */
.tableware-card{
    width:120px;
    padding:14px;
    border-radius:20px;
    border:2px solid #ececec;
    background:#fff;
    text-align:center;
    cursor:pointer;
    transition:.25s;
}

.tableware-card:hover{
    transform:translateY(-6px);
    border-color:#7f8c8d;
    box-shadow:0 16px 28px rgba(127,140,141,.18);
}

.tableware-card.active{
    border-color:#7f8c8d;
    background:linear-gradient(180deg,#fff,#f8f9fa);
    box-shadow:0 18px 32px rgba(127,140,141,.20);
}

/* TASSE PREMIUM */
.cup-icon{
    width:52px;
    margin:auto;
    position:relative;
    background:linear-gradient(180deg,#ffffff,#e8ecef);
    border:2px solid #000;
    border-radius:0 0 14px 14px;
    box-shadow:0 10px 18px rgba(0,0,0,.10);
}

.cup-handle{
    position:absolute;
    right:-16px;
    top:1px;
    width:16px;
    height:18px;
    border:3px solid #000;
    border-left:none;
    border-radius:0 10px 10px 0;
}

/* tailles */
.small .cup-icon{
    height:42px;
}

.medium .cup-icon{
    height:58px;
}

.large .cup-icon{
    height:74px;
}

/* texte */
.g-weight{
    display:block;
    margin-top:14px;
    font-size:16px;
    font-weight:800;
    color:#222;
}

.g-price{
    display:block;
    margin-top:4px;
    font-size:14px;
    font-weight:700;
    color:#7f8c8d;
}

/* bouton */
.btn-add-premium{
    width:100%;
    border:none;
    padding:16px;
    border-radius:18px;
    background:linear-gradient(135deg,#0f0303,#E39417);
    color:#fff;
    font-size:16px;
    font-weight:800;
    transition:.25s;
    box-shadow:0 16px 28px rgba(127,140,141,.28);
}

.btn-add-premium:hover{
    transform:translateY(-3px);
}

.btn-add-premium:disabled{
    background:#ccc;
    box-shadow:none;
}


/* =====================================================
   TABLEWARE / MOBILE + TABLETTE COMPACT
   Harmonisation avec le format premium/grammage
   ===================================================== */

/* =========================
   TABLETTE
   ========================= */
@media (max-width: 991px){

.tableware-zone{
    padding:18px !important;
    border-radius:18px !important;
}

.grammage-cards{
    justify-content:center;
    gap:10px !important;
}

/* carte plus compacte */
.tableware-card{
    width:92px !important;
    min-width:92px;
    padding:8px !important;
    border-radius:16px !important;
    font-size:.7rem !important;
    line-height:1.05 !important;
    box-shadow:0 8px 18px rgba(0,0,0,.08) !important;
}

/* image réduite */
.tableware-card img{
    max-height:50px !important;
}

/* texte ajusté */
.tableware-card span,
.tableware-card p{
    font-size:.68rem !important;
    line-height:1 !important;
}

/* cup icon */
.cup-icon{
    width:42px !important;
    border-radius:0 0 12px 12px !important;
    box-shadow:0 8px 14px rgba(0,0,0,.08) !important;
}

.small .cup-icon{
    height:34px !important;
}

.medium .cup-icon{
    height:46px !important;
}

.large .cup-icon{
    height:58px !important;
}

/* poignée */
.cup-handle{
    right:-14px !important;
    top:1px !important;
    width:14px !important;
    height:16px !important;
    border:2px solid #000 !important;
    border-left:none !important;
    border-radius:0 8px 8px 0 !important;
}

.btn-add-premium{
    padding:14px !important;
    font-size:15px !important;
    border-radius:14px !important;
}

}


/* =========================
   MOBILE
   ========================= */
@media (max-width: 768px){

.tableware-zone{
    padding:12px !important;
    border-radius:14px !important;
}

.grammage-cards{
    justify-content:center;
    gap:8px !important;
}

/* carte ultra compacte */
.tableware-card{
    width:72px !important;
    min-width:72px;
    padding:6px !important;
    border-radius:12px !important;
    font-size:.65rem !important;
    line-height:1 !important;
    box-shadow:0 6px 14px rgba(0,0,0,.06) !important;
}

/* image réduite */
.tableware-card img{
    max-height:40px !important;
}

/* texte ultra compact */
.tableware-card span,
.tableware-card p{
    font-size:.62rem !important;
    line-height:1 !important;
}

/* cup icon mobile */
.cup-icon{
    width:38px !important;
    border-radius:0 0 10px 10px !important;
    box-shadow:0 6px 12px rgba(0,0,0,.08) !important;
}

.small .cup-icon{
    height:30px !important;
}

.medium .cup-icon{
    height:40px !important;
}

.large .cup-icon{
    height:52px !important;
}

.cup-handle{
    right:-12px !important;
    top:1px !important;
    width:12px !important;
    height:14px !important;
    border:2px solid #000 !important;
    border-left:none !important;
    border-radius:0 8px 8px 0 !important;
}

/* bouton */
.btn-add-premium{
    padding:12px !important;
    font-size:14px !important;
    border-radius:12px !important;
}

}

/* ===============================
   BLOC PRODUIT PREMIUM
=================================*/

.col-md-6 .card{
    border:none;
    border-radius:28px;
    background:#ffffff;
    box-shadow:0 25px 60px rgba(0,0,0,0.08);
    padding:25px;
    overflow:hidden;
}

/* zone image */
.card-img-container{
    background:linear-gradient(145deg,#fafafa,#f4f4f4);
    border-radius:24px;
    position:relative;
    min-height:520px;
    padding:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

/* image principale */
#mainImage{
    width:100% !important;
    max-width:520px;
    height:420px !important;
    object-fit:contain;
    transition:all .35s ease;
    filter:drop-shadow(0 20px 25px rgba(0,0,0,.10));
}

#mainImage:hover{
    transform:scale(1.08);
}

#mainImage:hover{
    transform:scale(1.06);
}

/* badge promo */
.badge-promo{
    position:absolute;
    top:18px;
    left:18px;
    background:linear-gradient(135deg,#ff5b5b,#e12626);
    color:#fff;
    font-size:13px;
    font-weight:700;
    padding:12px 14px;
    border-radius:18px;
    line-height:1.3;
    box-shadow:0 12px 25px rgba(255,0,0,.18);
    z-index:5;
}

/* logo coin */
.responsive-img{
    border-radius:14px;
    box-shadow:0 10px 20px rgba(0,0,0,.08);
}

/* miniatures */
.image-container{
    background:#fff;
    border:1px solid #efefef;
    border-radius:18px;
    padding:8px;
    transition:.25s ease;
    min-width:90px;
}

.image-container:hover{
    transform:translateY(-4px);
    border-color:#C59D5F;
    box-shadow:0 15px 30px rgba(238,147,67,.14);
}

.mini-image{
    border:none !important;
    border-radius:12px !important;
}

/* ===============================
   STOCK
=================================*/

.badge.bg-success{
    background:linear-gradient(135deg,#19b86c,#0c8e50)!important;
    border-radius:12px;
    font-size:13px;
    padding:10px 16px !important;
    margin-top:18px;
}

.badge.bg-danger{
    background:linear-gradient(135deg,#ff5656,#cf1d1d)!important;
    border-radius:12px;
    font-size:13px;
    padding:10px 16px !important;
    margin-top:18px;
}

/* ===============================
   TITRE + INFOS
=================================*/

h1.text-center{
    font-size:24px;
    font-weight:800;
    margin-top:22px;
    color:#1f1f1f;
    letter-spacing:-0.5px;
}



p strong{
    color:#111;
}

/* ===============================
   PRIX PREMIUM
=================================*/

#prix-barre{
    font-size:18px;
    margin-right:10px;
    opacity:.55;
}

#prix-dynamique{
    font-size:28px !important;
    font-weight:800 !important;
    color:#EE9343 !important;
    letter-spacing:-1px;
}

#poids-dynamique{
    font-weight:700;
    color:#222;
}

#prix-kg{
    font-weight:700;
    font-size:18px;
}

/* ===============================
   INGREDIENTS
=================================*/

div[style*="text-align: justify"]{
    background:#fafafa;
    border-radius:18px;
    padding:18px;
    border:1px solid #f1f1f1;
    margin-top:18px;
}

/* ===============================
   FORMULAIRE
=================================*/

.ajoutPanierForm{
    margin-top:22px;
}

/* ===============================
   MOBILE
=================================*/

@media(max-width:768px){

    .col-md-6 .card{
        padding:18px;
        border-radius:20px;
    }

    .card-img-container{
        min-height:auto;
        padding:20px;
    }

    #mainImage{
        width:240px !important;
        height:240px !important;
    }

    h1.text-center{
        font-size:20px;
    }

    #prix-dynamique{
        font-size:24px !important;
    }

}

/* =====================================
   HISTOIRE & ORIGINE - VERSION PREMIUM
===================================== */

.cadre-noir{
    background:linear-gradient(145deg,#ffffff,#fafafa);
    border:1px solid #ececec;
    border-radius:28px;
    padding:38px !important;
    box-shadow:0 20px 55px rgba(0,0,0,0.07);
    position:relative;
    overflow:hidden;
}

/* petit effet déco haut droite */
.cadre-noir::before{
    content:"";
    position:absolute;
    top:-80px;
    right:-80px;
    width:220px;
    height:220px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(238,147,67,.12), transparent 70%);
}

/* effet léger bas gauche */
.cadre-noir::after{
    content:"";
    position:absolute;
    bottom:-70px;
    left:-70px;
    width:180px;
    height:180px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(0,0,0,.03), transparent 70%);
}

/* titre premium */
.titre-dore{
    font-size:20px;
    font-weight:800;
    color:#1e1e1e;
    margin-bottom:28px;
    letter-spacing:-0.5px;
    line-height:1.3;
    position:relative;
    z-index:2;
}

/* soulignement moderne */
.titre-dore u{
    text-decoration:none;
    position:relative;
}

.titre-dore u::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:100%;
    height:4px;
    border-radius:10px;
    background:linear-gradient(90deg,#EE9343,#f5be7a);
}

/* contenu texte */
.cadre-noir .texte-justifie{
    font-size:17px;
    line-height:1.95;
    color:#444;
    position:relative;
    z-index:2;
}

/* paragraphes auto espacés */
.cadre-noir .texte-justifie p{
    margin-bottom:18px;
}

/* gras plus élégant */
.cadre-noir strong{
    color:#111;
    font-weight:700;
}

/* liens éventuels */
.cadre-noir a{
    color:#EE9343;
    text-decoration:none;
    font-weight:600;
}

.cadre-noir a:hover{
    text-decoration:underline;
}

/* mobile */
@media(max-width:768px){

    .cadre-noir{
        padding:24px !important;
        border-radius:20px;
    }

    .titre-dore{
        font-size:20px;
        margin-bottom:20px;
    }

    .cadre-noir .texte-justifie{
        font-size:15.5px;
        line-height:1.8;
    }
}

/* ===================================
   BOUTON PLUS DE DETAILS PREMIUM
=================================== */

#toggle-details{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(135deg,#ffffff,#f8f8f8);
    border:1px solid #ececec;
    padding:14px 22px !important;
    border-radius:40px;
    color:#1f1f1f !important;
    font-weight:700 !important;
    font-size:15px;
    text-decoration:none !important;
    box-shadow:0 10px 28px rgba(0,0,0,.06);
    transition:all .25s ease;
}

#toggle-details:hover{
    transform:translateY(-3px);
    border-color:#EE9343;
    color:#EE9343 !important;
    box-shadow:0 18px 35px rgba(238,147,67,.16);
}

/* ===================================
   BLOC DETAILS CACHE
=================================== */

#details-complementaires{
    margin-top:20px;
    background:linear-gradient(145deg,#ffffff,#fafafa);
    border:1px solid #ededed;
    border-radius:28px;
    padding:30px;
    box-shadow:0 18px 45px rgba(0,0,0,.06);
    animation:fadeDetails .35s ease;
}

/* animation ouverture */
@keyframes fadeDetails{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ===================================
   TEXTE GENERAL
=================================== */

#details-complementaires p,
#details-complementaires li{
    font-size:16px;
    color:#444;
    line-height:1.8;
    margin-bottom:12px;
}

#details-complementaires strong{
    color:#111;
    font-weight:700;
}

/* titres */
#details-complementaires u{
    text-decoration:none;
    position:relative;
}

#details-complementaires u::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:100%;
    height:3px;
    border-radius:20px;
    background:linear-gradient(90deg,#EE9343,#f4bf81);
}

/* ===================================
   BLOCS DESCRIPTION / GOUT
=================================== */

#details-complementaires .texte-justifie{
    background:#fff;
    border:1px solid #f0f0f0;
    border-radius:18px;
    padding:18px;
    margin:14px 0;
    line-height:1.9;
}

/* ===================================
   PREPARATION
=================================== */

#details-complementaires .list-unstyled{
    display:grid;
    gap:12px;
    padding-left:0;
    margin-top:14px;
}

#details-complementaires .list-unstyled li{
    list-style:none;
    background:#fff;
    border:1px solid #efefef;
    border-radius:16px;
    padding:14px 16px;
    box-shadow:0 8px 20px rgba(0,0,0,.03);
}

/* icones dorées */
.icone-doree{
    color:#EE9343;
    margin-right:8px;
    font-size:15px;
}

/* ===================================
   BENEFICES
=================================== */

#details-complementaires p:last-of-type{
    background:#E7CBA024;
    border:1px solid #f7e3c8;
    padding:16px;
    border-radius:18px;
}

/* ===================================
   VIDEO
=================================== */

.video-container{
    display:flex;
    justify-content:center;
    margin-top:25px;
}

.video-container video{
    border-radius:22px !important;
    box-shadow:0 18px 35px rgba(0,0,0,.10);
    border:4px solid #fff;
}

/* ===================================
   MOBILE
=================================== */

@media(max-width:768px){

    #toggle-details{
        width:50%;
        justify-content:center;
        font-size:14px;
        padding:14px 18px !important;
    }

    #details-complementaires{
        padding:22px;
        border-radius:22px;
    }

    #details-complementaires p,
    #details-complementaires li{
        font-size:15px;
    }

}

/* UNIQUEMENT produits similaires */

.similaire-header .mini-label{
    display:inline-block;
    background:#fff3e8;
    color:#EE9343;
    padding:6px 14px;
    border-radius:50px;
    font-size:16px;
    font-weight:700;
    margin-bottom:10px;
}

.similaire-header h2{
    font-weight:800;
    color:#1d1d1d;
}

.produit-similaire-card{
    border-radius:20px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,0.07);
    transition:0.25s ease;
}

.produit-similaire-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 35px rgba(0,0,0,0.12);
}

.similaire-image-box{
    position:relative;
    height:220px;
    background:linear-gradient(135deg,#fafafa,#f3f3f3);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
}

.similaire-image{
    max-height:180px;
    object-fit:contain;
    transition:0.3s ease;
}

.produit-similaire-card:hover .similaire-image{
    transform:scale(1.06);
}

.badge-similaire-promo{
    position:absolute;
    top:12px;
    left:12px;
    background:#ff4d4d;
    color:#fff;
    padding:7px 10px;
    border-radius:10px;
    font-size:12px;
    font-weight:700;
}

.nature-chip{
    display:inline-block;
    background:#f8f8f8;
    color:#555;
    font-size:12px;
    padding:6px 10px;
    border-radius:30px;
    font-weight:600;
}

.produit-title{
    min-height:44px;
    color:#222;
    font-size:15px;
}

.old-price{
    text-decoration:line-through;
    color:#999;
    font-size:13px;
    margin-right:6px;
}

.new-price{
    color:#EE9343;
    font-weight:800;
    font-size:18px;
}

.stock-ok{
    color:#1c9b4a;
    font-size:13px;
    font-weight:600;
}

.stock-ko{
    color:#d63333;
    font-size:13px;
    font-weight:600;
}

.btn-similaire{
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#EE9343,#d97823);
    color:#fff;
    font-weight:700;
    padding:10px;
}

.btn-similaire:hover{
    color:#fff;
    transform:translateY(-1px);
}

@media(max-width:768px){

    .similaire-image-box{
        height:180px;
    }

    .similaire-image{
        max-height:140px;
    }

    .produit-title{
        font-size:14px;
        min-height:auto;
    }
}


/* =====================================================
   PRODUITS SIMILAIRES
   Desktop inchangé
   Mobile + Tablette : blocs visibles en entier
   ===================================================== */


/* =========================
   DESKTOP (NE PAS TOUCHER)
   ========================= */
@media (min-width: 992px){

.produit-similaire-card{
height:100%;
}

}


/* =========================
   TABLETTE + MOBILE
   ========================= */
@media (max-width: 991px){

/* conteneur avec marge écran */
.container.mt-4{
padding-left:12px !important;
padding-right:12px !important;
overflow:hidden;
}

/* ligne bootstrap corrigée */
.container.mt-4 .row{
margin-left:0 !important;
margin-right:0 !important;
row-gap:14px !important;
column-gap:0 !important;
justify-content:center !important;
}

/* colonnes visibles entières */
.container.mt-4 .row > [class*="col-"]{
padding-left:6px !important;
padding-right:6px !important;
}

/* tablette = 2 cartes propres */
.container.mt-4 .row > .col-6,
.container.mt-4 .row > .col-md-4{
width:50% !important;
max-width:50% !important;
flex:0 0 50% !important;
}

/* carte */
.produit-similaire-card{
width:100%;
max-width:100%;
border-radius:16px !important;
overflow:hidden;
box-shadow:0 8px 18px rgba(0,0,0,.06);
}

/* image */
.similaire-image-box{
height:140px !important;
padding:10px !important;
display:flex;
align-items:center;
justify-content:center;
}

.similaire-image{
max-height:118px !important;
max-width:100% !important;
object-fit:contain;
}

/* contenu */
.produit-similaire-card .card-body{
padding:10px !important;
}

/* nature */
.nature-chip{
font-size:.64rem !important;
padding:4px 8px !important;
line-height:1.1;
display:inline-block;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

/* titre */
.produit-title{
font-size:.82rem !important;
line-height:1.15 !important;
min-height:34px !important;
margin-bottom:8px !important;
overflow:hidden;
}

/* prix */
.old-price{
display:block;
font-size:.68rem !important;
margin-bottom:2px;
}

.new-price{
display:block;
font-size:.92rem !important;
font-weight:800;
line-height:1.1;
}

/* stock */
.stock-ok,
.stock-ko{
font-size:.68rem !important;
line-height:1.1;
margin-top:auto;
}

/* badge promo */
.badge-similaire-promo{
top:8px !important;
left:8px !important;
font-size:.62rem !important;
padding:4px 7px !important;
border-radius:999px !important;
}

}


/* =========================
   MOBILE
   ========================= */
@media (max-width: 767px){

/* toujours 2 cartes visibles entières */
.container.mt-4{
padding-left:10px !important;
padding-right:10px !important;
}

.container.mt-4 .row{
row-gap:12px !important;
}

.container.mt-4 .row > .col-6,
.container.mt-4 .row > .col-md-4,
.container.mt-4 .row > .col-lg-3{
width:50% !important;
max-width:50% !important;
flex:0 0 50% !important;
padding-left:5px !important;
padding-right:5px !important;
}

/* carte compacte */
.produit-similaire-card{
border-radius:14px !important;
}

/* image */
.similaire-image-box{
height:118px !important;
padding:8px !important;
}

.similaire-image{
max-height:96px !important;
}

/* contenu */
.produit-similaire-card .card-body{
padding:8px !important;
}

/* titre */
.produit-title{
font-size:.76rem !important;
min-height:30px !important;
line-height:1.1 !important;
}

/* prix */
.new-price{
font-size:.86rem !important;
}

.old-price{
font-size:.64rem !important;
}

/* stock */
.stock-ok,
.stock-ko{
font-size:.62rem !important;
}

/* badge */
.badge-similaire-promo{
top:6px !important;
left:6px !important;
font-size:.56rem !important;
padding:3px 6px !important;
}

}


/* =========================
   PETITS MOBILES
   ========================= */
@media (max-width: 420px){

.container.mt-4{
padding-left:8px !important;
padding-right:8px !important;
}

/* on garde 2 cartes complètes */
.container.mt-4 .row > .col-6,
.container.mt-4 .row > .col-md-4,
.container.mt-4 .row > .col-lg-3{
padding-left:4px !important;
padding-right:4px !important;
}

/* image */
.similaire-image-box{
height:108px !important;
}

.similaire-image{
max-height:88px !important;
}

/* titre */
.produit-title{
font-size:.72rem !important;
min-height:28px !important;
}

/* prix */
.new-price{
font-size:.82rem !important;
}

/* stock */
.stock-ok,
.stock-ko{
font-size:.58rem !important;
}

/* badge promo */
.badge-similaire-promo{
font-size:.52rem !important;
padding:3px 5px !important;
}

}

/* =========================
   MOBILE NAV CLEAN FIX
   ========================= */
@media (max-width: 991px){

/* menu principal */
.nav-items{
display:none;
flex-direction:column;
position:absolute;
top:100%;
left:0;
width:100%;
background:#fff;
z-index:9999;
box-shadow:0 10px 20px rgba(0,0,0,.08);
max-height:90vh;
overflow-y:auto;
}

.nav-items.active{
display:flex;
}

.nav-items li{
width:100%;
border-bottom:1px solid #eee;
position:relative;
}

.nav-items li a{
display:block;
padding:14px 18px;
}

/* =========================
   IMPORTANT : on NE CASSE PAS le layout
   ========================= */

/* cache menus par défaut */
.mega-menu-wrapper,
.coffret-mega-menu-wrapper,
.collection-mega-menu-wrapper,
.epices-mega-menu-wrapper,
.accessoires-mega-menu-wrapper,
.vaisselle-mega-menu-wrapper,
.recettes-mega-menu-wrapper,
.dropdown-menu{
display:none;
position:relative;
width:100%;
box-shadow:none;
opacity:1;
visibility:visible;
transform:none;
}

/* ouverture menus */
.nav-items li.open > .mega-menu-wrapper,
.nav-items li.open > .coffret-mega-menu-wrapper,
.nav-items li.open > .collection-mega-menu-wrapper,
.nav-items li.open > .epices-mega-menu-wrapper,
.nav-items li.open > .accessoires-mega-menu-wrapper,
.nav-items li.open > .vaisselle-mega-menu-wrapper,
.nav-items li.open > .recettes-mega-menu-wrapper,
.nav-items li.open > .dropdown-menu{
display:block;
}

/* =========================
   MEGA MENUS STRUCTURE
   ========================= */

.mega-menu,
.coffret-mega-menu,
.collection-mega-menu,
.epices-mega-menu,
.accessoires-mega-menu,
.vaisselle-mega-menu,
.recettes-mega-menu{
display:flex;
flex-direction:column;
gap:0;
width:100%;
max-height:none;
overflow:visible;
padding:0;
}

/* CHAQUE COLONNE = pleine largeur */
.mega-column,
.coffret-column,
.collection-column,
.epices-column,
.accessoires-column,
.vaisselle-column,
.recettes-column{
width:100%;
display:block;
padding:12px 15px;
border-bottom:1px solid #eee;
}

/* TITRES */
.nature-title,
.coffret-title,
.collection-title,
.epices-title,
.accessoires-title,
.vaisselle-title{
display:block;
font-weight:700;
margin:0 0 8px 0;
font-size:15px;
}

/* LIENS */
.article-link,
.coffret-link,
.collection-link,
.epices-link,
.accessoires-link,
.vaisselle-link,
.recettes-link{
display:flex;
align-items:center;
gap:10px;
padding:8px 0;
text-decoration:none;
}

/* IMAGES */
.article-link img,
.coffret-link img,
.collection-link img,
.epices-link img,
.accessoires-link img,
.vaisselle-link img,
.recettes-link img{
width:42px;
height:42px;
object-fit:cover;
border-radius:6px;
}

/* BURGER */
.menu-toggle{
display:flex;
flex-direction:column;
gap:4px;
background:none;
border:none;
padding:10px;
}

.menu-toggle .bar{
width:26px;
height:3px;
background:#000;
}

}

/* =========================
   DESKTOP (inchangé logique)
   ========================= */
@media (min-width: 992px){

.dropdown-menu,
.mega-menu-wrapper {
display:none;
}

.dropdown.open .dropdown-menu,
.dropdown.open .mega-menu-wrapper {
display:block;
}

}

/* =========================
   MOBILE FOOTER
   ========================= */
  
@media (max-width: 768px) {

    footer {
        padding-left: 16px !important;
        padding-right: 16px !important;
        overflow-x: hidden;
    }

    footer .container {
        padding-left: 12px;
        padding-right: 12px;
        max-width: 100%;
    }

    footer .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    footer .row > div {
        padding-left: 10px !important;
        padding-right: 10px !important;
        text-align: center;
    }

    footer ul {
        padding-left: 0;
        margin-left: 0;
    }

    footer li {
        list-style: none;
    }

    footer p {
        padding-left: 5px;
        padding-right: 5px;
    }

    /* Contact bloc mieux centré */
    .footer-contact li {
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-bottom: 8px;
    }

    /* Images footer mieux contenues */
    footer img {
        max-width: 90% !important;
        margin: 0 auto;
    }

    /* Réseaux sociaux centrés proprement */
    footer .text-center {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ==========================================
   FOOTER LIGNE FINALE
   Desktop inchangé
   Mobile + Tablette optimisé
   ========================================== */


/* DESKTOP = on ne touche rien */
@media (min-width: 992px){

.border-top.border-secondary.mt-4.pt-3.text-center.small.text-white-50{
display:block;
}

}


/* TABLETTE + MOBILE */
@media (max-width: 991px){

.border-top.border-secondary.mt-4.pt-3.text-center.small.text-white-50{
padding-top:14px !important;
margin-top:18px !important;
font-size:.82rem !important;
line-height:1.45;
padding-left:12px;
padding-right:12px;
}

/* espace entre les 2 lignes */
.border-top.border-secondary.mt-4.pt-3.text-center.small.text-white-50 > div{
margin-bottom:6px;
}

/* lien */
.border-top.border-secondary.mt-4.pt-3.text-center.small.text-white-50 a{
display:inline-block;
margin-top:2px;
font-size:.84rem !important;
word-break:break-word;
}

}


/* MOBILE */
@media (max-width: 767px){

.border-top.border-secondary.mt-4.pt-3.text-center.small.text-white-50{
font-size:.76rem !important;
line-height:1.4;
padding-left:10px;
padding-right:10px;
}

/* texte sur 2 vraies lignes propres */
.border-top.border-secondary.mt-4.pt-3.text-center.small.text-white-50 > div{
margin-bottom:5px;
}

/* lien légèrement plus petit */
.border-top.border-secondary.mt-4.pt-3.text-center.small.text-white-50 a{
font-size:.78rem !important;
}

}


/* PETITS MOBILES */
@media (max-width: 420px){

.border-top.border-secondary.mt-4.pt-3.text-center.small.text-white-50{
font-size:.72rem !important;
line-height:1.35;
}

.border-top.border-secondary.mt-4.pt-3.text-center.small.text-white-50 a{
font-size:.74rem !important;
}

}