/* Font Awesome 6 auto-hébergé (assets/fontawesome, copie de la lib creativeelements 2.14) :
   requis pour les icônes fas/far du menu — la prod a un Creative Elements ancien (FA 4.7)
   qui ne fournit pas ces classes. Doit rester AVANT toute autre règle (contrainte @import). */
@import url('../fontawesome/css/solid.min.css');
@import url('../fontawesome/css/regular.min.css');

/* =========================================================================
   Naturabox – Méga-menu (ets_megamenu) – feuille de style dédiée
   Reproduit les maquettes /maquettes/menu. Markup custom = classes .nb-mm-*
   placées dans le content des blocs HTML.
   NB: le module ets_megamenu applique des règles très spécifiques
   (#header .ets_mm_block_content a, hover -> display:block, .mm_columns_li{float}).
   On les surclasse via le préfixe .ets_mm_megamenu + !important ciblés.
   ========================================================================= */

.ets_mm_megamenu{
  --nb-primary:#499c6f;
  --nb-green:#4d7c3a;
  --nb-green-d:#2f4a2a;
  --nb-orange:#d98c34;
  --nb-text:#2c3a2c;
  --nb-sub:#9a9a9a;
  --nb-cream:#f5f1e9;
  --nb-line:#ececec;
}

/* ===== Barre de navigation : transparente, sans fond ni bordure ========== */
.ets_mm_megamenu,
.ets_mm_megamenu .ets_mm_megamenu_content,
.ets_mm_megamenu .ets_mm_megamenu_content_content,
.layout_layout1 .ets_mm_megamenu_content,
#header .layout_layout1 .ets_mm_megamenu_content{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
/* ===== DESKTOP (≥1200px) : barre horizontale + panneau multi-colonnes ===== */
@media (min-width: 1200px) {
.ets_mm_megamenu .ets_mm_megamenu_content{ padding:1.5rem !important; }
.ets_mm_megamenu .mm_menus_ul{
  background:transparent !important; border:none !important;
  display:flex !important; flex-wrap:nowrap !important; align-items:center;
  justify-content:center;
}
.ets_mm_megamenu .mm_menus_ul > .mm_menus_li.close_menu{ display:none !important; }
.ets_mm_megamenu .mm_menus_ul > .mm_menus_li{
  border:none !important; background:transparent !important;
  float:none !important; white-space:nowrap;
}

/* items de la barre : texte simple, pas de fond/bordure au repos */
.ets_mm_megamenu .mm_menus_ul > .mm_menus_li > a,
#header .ets_mm_megamenu .mm_menus_ul > .mm_menus_li > a{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:none !important;
  box-shadow:none !important;
  color:var(--nb-text) !important;
  font-weight:600;
  padding:0 !important;
  border-radius:6px 6px 0 0;
  transition:background-color .15s ease, color .15s ease;
}
.ets_mm_megamenu .mm_menus_li > a:before,
.ets_mm_megamenu .mm_menus_li > a:after{ display:none !important; }

/* survol / actif / ouvert : highlight crème + texte vert */
.ets_mm_megamenu .mm_menus_ul > .mm_menus_li:hover > a,
.ets_mm_megamenu .mm_menus_ul > .mm_menus_li.menu_hover > a,
.ets_mm_megamenu .mm_menus_ul > .mm_menus_li.active > a,
.ets_mm_megamenu .mm_menus_ul > .mm_menus_li.open_li > a,
#header .ets_mm_megamenu .mm_menus_ul > .mm_menus_li:hover > a,
#header .ets_mm_megamenu .mm_menus_ul > .mm_menus_li.menu_hover > a,
#header .ets_mm_megamenu .mm_menus_ul > .mm_menus_li.active > a{
  background:var(--nb-primary) !important;
  background-color:var(--nb-primary) !important;
  color:#fff !important;
}
.ets_mm_megamenu .mm_menus_li > a .mm_menu_content_title,
.ets_mm_megamenu .mm_menus_li > a i{ color:inherit !important; }
.ets_mm_megamenu .mm_menus_ul > .mm_menus_li > a .mm_menu_content_title{
  min-height:50px;
  font-size:15px !important;
  display:flex; align-items:center; justify-content:center;
  padding:0 13px;
}

/* ===== Panneau déroulant : disposition multi-colonnes ===================== */
.ets_mm_megamenu .mm_menus_li .mm_columns_ul{
  display:flex !important;
  flex-wrap:nowrap !important;
  white-space:normal !important;
  background:#fff !important;
  border:none !important;
  border-radius:14px !important;
  box-shadow:0 18px 50px rgba(0,0,0,.12) !important;
  padding:26px 30px 22px !important;
  margin-top:0 !important;
}
.ets_mm_megamenu .mm_menus_li .mm_columns_ul:before{ display:none !important; }

/* colonnes : on neutralise float/width du module, on passe en flex égales */
.ets_mm_megamenu .mm_menus_li .mm_columns_ul > .mm_columns_li{
  float:none !important;
  width:auto !important;
  flex:1 1 0 !important;
  min-width:0 !important;
  padding:0 22px !important;
  margin:0 !important;
  border-right:1px solid var(--nb-line);
}
.ets_mm_megamenu .mm_menus_li .mm_columns_ul > .mm_columns_li:last-child{ border-right:none; }
/* colonne visuelle (promo) plus large, sans bordure */
.ets_mm_megamenu .mm_menus_li .mm_columns_ul > .mm_columns_li:has(.nb-mm-promo){
  flex:0 0 304px !important; border-right:none; padding-right:0 !important;
}
} /* ===== fin DESKTOP ===== */

/* blocs : full width dans la colonne, sans float/padding du module */
.ets_mm_megamenu .mm_columns_ul .mm_blocks_ul,
.ets_mm_megamenu .mm_columns_ul .mm_blocks_li{
  float:none !important; width:auto !important; padding:0 !important; margin:0 !important;
  list-style:none !important;
}
.ets_mm_megamenu .mm_columns_ul .ets_mm_block{ margin:0 !important; }
.ets_mm_megamenu .mm_columns_ul .ets_mm_block_content{ overflow:visible !important; color:inherit !important; }
/* reset du style de lien générique du module à l'intérieur de nos blocs */
.ets_mm_megamenu .ets_mm_block_content a{ line-height:1.3; text-decoration:none; }

/* ===== Colonne texte ===================================================== */
.ets_mm_megamenu .nb-mm-col{ display:flex; flex-direction:column; height:100%; }

/* En-tête de section : pastille + libellé coloré */
.ets_mm_megamenu .nb-mm-head{
  display:flex !important; align-items:center; gap:12px;
  font-size:15px; font-weight:700; letter-spacing:.02em; line-height:1.2 !important;
  text-transform:uppercase; text-decoration:none;
  margin:0 0 18px !important; padding:0 !important; border:none !important;
  white-space:normal; overflow-wrap:break-word;
}
/* Maquette B : titre de section sans pastille (texte simple) */
.ets_mm_megamenu .nb-mm-head.nb-mm-noic{ display:block !important; }
.ets_mm_megamenu .nb-mm-head .nb-mm-ic{
  width:38px; height:38px; flex:0 0 38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--nb-cream); font-size:16px;
}
.ets_mm_megamenu .nb-mm-green{ color:var(--nb-green) !important; }
.ets_mm_megamenu .nb-mm-green .nb-mm-ic{ color:var(--nb-green); }
.ets_mm_megamenu .nb-mm-orange{ color:var(--nb-orange) !important; }
.ets_mm_megamenu .nb-mm-orange .nb-mm-ic{ color:var(--nb-orange); }

/* Item : pastille + (titre / sous-titre) */
.ets_mm_megamenu .nb-mm-item{
  display:flex !important; align-items:center; gap:12px;
  text-decoration:none; padding:7px 0 !important; line-height:1.3 !important;
}
.ets_mm_megamenu .nb-mm-item .nb-mm-ic{
  width:38px; height:38px; flex:0 0 38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--nb-cream); color:var(--nb-green);
  font-size:15px; transition:transform .15s ease;
}
.ets_mm_megamenu .nb-mm-orange-items .nb-mm-item .nb-mm-ic{ color:var(--nb-orange); }
.ets_mm_megamenu .nb-mm-item:hover .nb-mm-ic{ transform:scale(1.06); }
.ets_mm_megamenu .nb-mm-item{ min-width:0; }
.ets_mm_megamenu .nb-mm-item-txt{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.ets_mm_megamenu .nb-mm-item-title,
.ets_mm_megamenu .nb-mm-item-sub{ overflow-wrap:break-word; white-space:normal; }
.ets_mm_megamenu .nb-mm-item-title{ color:var(--nb-green-d) !important; font-weight:600; font-size:14.5px; }
.ets_mm_megamenu .nb-mm-item-sub{ color:var(--nb-sub) !important; font-size:12px; margin-top:2px; }
.ets_mm_megamenu .nb-mm-item:hover .nb-mm-item-title{ color:var(--nb-green) !important; }

/* Item avec vignette photo (Coup de cœur, Idées de séjours, Le blog) */
.ets_mm_megamenu .nb-mm-item--photo{ padding:6px 0 !important; }
.ets_mm_megamenu .nb-mm-thumb{
  flex:0 0 56px; width:56px; height:46px; border-radius:8px;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}

/* Étape numérotée (Comment ça marche) */
.ets_mm_megamenu .nb-mm-item .nb-mm-num{ font-weight:700; color:var(--nb-green); font-size:15px; }
.ets_mm_megamenu .nb-mm-orange-items .nb-mm-item .nb-mm-num{ color:var(--nb-orange); }

/* Variante compacte (régions, univers) : petite icône plate */
.ets_mm_megamenu .nb-mm-col--compact .nb-mm-item{ padding:5px 0 !important; }
.ets_mm_megamenu .nb-mm-col--compact .nb-mm-item .nb-mm-ic{
  width:26px; height:26px; flex-basis:26px; background:transparent; font-size:15px;
}

/* Liste compacte (occasions, idées cadeaux) */
.ets_mm_megamenu .nb-mm-links{ display:flex; flex-direction:column; }
.ets_mm_megamenu .nb-mm-link{
  display:flex !important; align-items:flex-start; gap:10px; padding:5.5px 0 !important;
  text-decoration:none; color:var(--nb-green-d) !important; font-size:13.5px; font-weight:500;
  line-height:1.3 !important; min-width:0;
}
.ets_mm_megamenu .nb-mm-link i{ color:var(--nb-green); font-size:13px; flex:0 0 16px; width:16px; text-align:center; margin-top:3px; }
.ets_mm_megamenu .nb-mm-link-tx{ flex:1 1 auto; min-width:0; overflow-wrap:break-word; white-space:normal; }
.ets_mm_megamenu .nb-mm-link:hover{ color:var(--nb-green) !important; }

/* Lien « Voir tous » */
.ets_mm_megamenu .nb-mm-more{
  margin-top:auto; padding-top:16px;
  display:inline-flex !important; align-items:center; gap:7px;
  font-size:13px; font-weight:600; text-decoration:none; color:var(--nb-green) !important;
}
.ets_mm_megamenu .nb-mm-orange-items .nb-mm-more{ color:var(--nb-orange) !important; }
.ets_mm_megamenu .nb-mm-more:after{ content:"\2192"; font-size:15px; }

/* Bloc logos */
.ets_mm_megamenu .nb-mm-logo-grid{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:4px; }
.ets_mm_megamenu .nb-mm-logo-grid img{ max-height:60px; max-width:100%; width:auto; object-fit:contain; display:block; margin:0 auto; }
/* Bloc 191 "Nos labels & partenaires" : logos empilés verticalement et centrés */
.ets_mm_megamenu .nb-mm-block-191 .nb-mm-logo-grid{ flex-direction:column; align-items:center; justify-content:center; }

/* ===== Carte promo (colonne visuelle) =================================== */
.ets_mm_megamenu .nb-mm-promo{
  position:relative; display:flex !important; flex-direction:column;
  justify-content:flex-end; align-items:center; text-align:center;
  min-height:330px; border-radius:14px; overflow:hidden;
  background-size:cover; background-position:center; text-decoration:none;
  padding:22px 24px !important;
}
.ets_mm_megamenu .nb-mm-promo:before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,40,20,.15) 0%,rgba(20,40,20,.65) 100%);
}
.ets_mm_megamenu .nb-mm-promo > *{ position:relative; z-index:1; }
.ets_mm_megamenu .nb-mm-promo-badge{
  align-self:center; display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.92); color:var(--nb-green-d);
  font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:6px 12px; border-radius:20px; margin-bottom:12px;
}
.ets_mm_megamenu .nb-mm-promo-title{ color:#fff; font-size:24px; font-weight:800; line-height:1.12; margin:0 0 6px; white-space:normal; overflow-wrap:break-word; max-width:100%; }
.ets_mm_megamenu .nb-mm-promo-sub{ color:rgba(255,255,255,.92); font-size:14px; margin-bottom:16px; white-space:normal; overflow-wrap:break-word; max-width:100%; }
.ets_mm_megamenu .nb-mm-promo-btn{
  align-self:center; background:var(--nb-green); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:11px 20px; border-radius:6px;
}
.ets_mm_megamenu .nb-mm-promo:hover .nb-mm-promo-btn{ background:var(--nb-green-d); }

/* ===== MOBILE : tiroir latéral réutilisant le contenu du méga-menu ======== */
#nb-mobile-menu, #nb-mobile-overlay{ display:none; }
@media (max-width: 1199px) {
  #nb-mobile-menu{
    display:block; position:fixed; top:0; left:0; bottom:0; width:88%; max-width:380px;
    background:#fff; z-index:100001; transform:translateX(-102%); transition:transform .28s ease;
    overflow-y:auto; -webkit-overflow-scrolling:touch; box-shadow:0 0 40px rgba(0,0,0,.25);
  }
  #nb-mobile-menu.open{ transform:none; }
  #nb-mobile-overlay{
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:100000;
    opacity:0; visibility:hidden; transition:opacity .28s ease;
  }
  #nb-mobile-overlay.open{ opacity:1; visibility:visible; }
  body.nb-mob-noscroll{ overflow:hidden; }

  .nb-mob-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px;
    border-bottom:1px solid var(--nb-line); position:sticky; top:0; background:#fff; z-index:2; }
  .nb-mob-title{ font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--nb-green-d); }
  .nb-mob-close{ background:none; border:none; font-size:28px; line-height:1; color:var(--nb-text); cursor:pointer; }

  #nb-mobile-menu .mm_menus_ul, #nb-mobile-menu .mm_columns_ul, #nb-mobile-menu .mm_blocks_ul,
  #nb-mobile-menu li{ list-style:none; margin:0; padding:0; }

  /* entrée de 1er niveau (accordéon) */
  #nb-mobile-menu .nb-mob-body > .ets_mm_megamenu > .mm_menus_ul > .mm_menus_li{ border-bottom:1px solid var(--nb-line); }
  #nb-mobile-menu .mm_menus_li > a{
    display:flex !important; align-items:center; justify-content:space-between;
    float:none !important; width:auto !important;
    padding:15px 18px !important; color:var(--nb-green-d) !important; font-weight:600;
    text-transform:uppercase; font-size:14px; text-decoration:none; background:transparent !important; border-radius:0 !important;
  }
  /* sécurité : aucun flottant résiduel du module dans le tiroir */
  #nb-mobile-menu .mm_menus_li, #nb-mobile-menu .mm_columns_li, #nb-mobile-menu .mm_blocks_li{ float:none !important; }
  #nb-mobile-menu .mm_menus_li > a .mm_menu_content_title{ min-height:0 !important; padding:0 !important; justify-content:flex-start; font-size:14px !important; display:inline; }
  #nb-mobile-menu .nb-has-sub > a:after{ content:"\203A"; font-size:22px; transform:rotate(90deg); transition:transform .2s; color:var(--nb-sub); }
  #nb-mobile-menu .nb-has-sub.nb-open > a{ background:var(--nb-cream) !important; color:var(--nb-green) !important; }
  #nb-mobile-menu .nb-has-sub.nb-open > a:after{ transform:rotate(270deg); color:var(--nb-green); }

  /* sous-menu déployé en accordéon, colonnes empilées */
  #nb-mobile-menu .mm_columns_ul{ display:none !important; background:#faf9f6; padding:6px 0 12px !important;
    box-shadow:none !important; border:none !important; border-radius:0 !important; position:static !important; }
  #nb-mobile-menu .mm_menus_li.nb-open > .mm_columns_ul{
    display:block !important; visibility:visible !important; opacity:1 !important;
    max-height:none !important; max-width:none !important; height:auto !important;
    transform:none !important; pointer-events:auto !important; margin:0 !important;
  }
  #nb-mobile-menu .mm_columns_li{ width:100% !important; float:none !important; display:block !important; padding:0 18px !important; border:none !important; }
  #nb-mobile-menu .mm_blocks_ul, #nb-mobile-menu .mm_blocks_li, #nb-mobile-menu .ets_mm_block,
  #nb-mobile-menu .ets_mm_block_content{ width:auto !important; float:none !important; }
  #nb-mobile-menu .nb-mm-col{ display:block !important; width:100% !important; height:auto !important; padding:10px 0; }
  #nb-mobile-menu .nb-mm-item, #nb-mobile-menu .nb-mm-link, #nb-mobile-menu .nb-mm-head,
  #nb-mobile-menu .nb-mm-links, #nb-mobile-menu .nb-mm-more{ width:100%; }
  #nb-mobile-menu .mm_columns_li + .mm_columns_li{ border-top:1px solid var(--nb-line); }

  /* promo compacte */
  #nb-mobile-menu .nb-mm-promo{ min-height:150px; margin:10px 0; }
  #nb-mobile-menu .nb-mm-promo-title{ font-size:19px; }
  #nb-mobile-menu .nb-mm-thumb{ flex-basis:46px; width:46px; height:38px; }
  #nb-mobile-menu .nb-mm-head{ margin-bottom:10px !important; }
}