/*
Theme Name: Minimog Child
Theme URI: https://minimog.thememove.com
Template: minimog
Author: ThemeMove
Author URI: https://thememove.com
Description: A Complete eCommerce Solution which is built by experts. Unlock the power of your online store today with Minimog!
Tags: editor-style,featured-images,microformats,post-formats,rtl-language-support,sticky-post,threaded-comments,translation-ready
Version: 3.9.4.1773276191
Updated: 2026-03-12 01:43:11

*/

/* ================================================================
   MEGA-MENU — STYLE OFFROAD MOTORS (inspiré Yamaha Motor France)
   Date    : 2026-03-12
   FTP     : /home/offroaz/www/wp-content/themes/minimog-child/style.css

   ARCHITECTURE :
   Le mega-menu est un widget HTML Elementor brut injecté dans
   un <ul class="children mega-menu"> par SmartMenus.
   Fix critique : SmartMenus cache tous les <ul> descendants de .sm
   via `display:none`. On surcharge avec !important.
   ================================================================ */

/* ------------------------------------------------
   1. FIX CRITIQUE — Visibilité des ul dans .mega-menu
   ------------------------------------------------ */
.desktop-menu .sm .mega-menu ul,
.desktop-menu .sm-simple .mega-menu ul {
  display: block !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

/* ------------------------------------------------
   2. PANNEAU MEGA-MENU — Style Yamaha Motor
   ------------------------------------------------ */
.desktop-menu .sm-simple .mega-menu,
.desktop-menu .sm-simple ul.children.mega-menu {
  background: #ffffff !important;
  border-top: 3px solid var(--minimog-color-primary, #e2231a) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
  padding: 40px 60px !important;
}

/* ------------------------------------------------
   3. WRAPPER ELEMENTOR — Pleine largeur
   ------------------------------------------------ */
.desktop-menu .sm-simple .mega-menu .elementor-widget-html,
.desktop-menu .sm-simple .mega-menu .elementor-widget-container {
  width: 100%;
}

/* Container flex principal issu du widget HTML */
.desktop-menu .sm-simple .mega-menu .elementor-widget-container > div,
.desktop-menu .sm-simple .mega-menu .elementor-widget-html > div {
  display: flex !important;
  gap: 0 !important;
  align-items: flex-start !important;
}

/* Colonnes internes */
.desktop-menu .sm-simple .mega-menu .elementor-widget-container > div > div,
.desktop-menu .sm-simple .mega-menu .elementor-widget-html > div > div {
  flex: 1 1 0;
  min-width: 150px;
  padding: 0 30px !important;
  border-right: 1px solid #eeeeee !important;
}

/* Dernière colonne : pas de bordure droite */
.desktop-menu .sm-simple .mega-menu .elementor-widget-container > div > div:last-child,
.desktop-menu .sm-simple .mega-menu .elementor-widget-html > div > div:last-child {
  border-right: 0 !important;
  padding-right: 0 !important;
}

/* Première colonne : pas de padding gauche */
.desktop-menu .sm-simple .mega-menu .elementor-widget-container > div > div:first-child,
.desktop-menu .sm-simple .mega-menu .elementor-widget-html > div > div:first-child {
  padding-left: 0 !important;
}

/* ------------------------------------------------
   4. IMAGES dans le mega-menu
   ------------------------------------------------ */
.desktop-menu .sm-simple .mega-menu img {
  display: block !important;
  width: 100% !important;
  max-height: 120px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  margin-bottom: 14px !important;
}

/* ------------------------------------------------
   5. TITRES DE COLONNES h4
   ------------------------------------------------ */
.desktop-menu .sm-simple .mega-menu h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: #111111 !important;
  margin: 0 0 12px 0 !important;
  padding: 0 0 10px 0 !important;
  border-bottom: 2px solid #eeeeee !important;
  line-height: 1.3 !important;
}

/* ------------------------------------------------
   6. SÉPARATEURS — h4 après ul (sections consécutives)
   ------------------------------------------------ */
.desktop-menu .sm-simple .mega-menu ul + h4,
.desktop-menu .sm-simple .mega-menu .mm-col ul + h4 {
  margin-top: 24px !important;
  padding-top: 16px !important;
  border-top: 1px solid #e0e0e0 !important;
}

/* ------------------------------------------------
   7. LISTES ul / li
   ------------------------------------------------ */
.desktop-menu .sm-simple .mega-menu ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.desktop-menu .sm-simple .mega-menu ul li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  line-height: 1 !important;
  border: 0 !important;
}

/* ------------------------------------------------
   7. LIENS — style Yamaha Motor
   ------------------------------------------------ */
.desktop-menu .sm-simple .mega-menu ul li a,
.desktop-menu .sm-simple .mega-menu .elementor-widget-html a {
  display: block !important;
  color: #444444 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 2.4 !important;
  padding: 0 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  white-space: normal !important;
  transition: color 0.18s ease, padding-left 0.18s ease !important;
  position: relative !important;
}

/* Flèche → sur hover (pseudo-element) */
.desktop-menu .sm-simple .mega-menu ul li a::after,
.desktop-menu .sm-simple .mega-menu .elementor-widget-html a::after {
  content: '' !important;
  display: inline-block !important;
  width: 0 !important;
  overflow: hidden !important;
  transition: width 0.18s ease, opacity 0.18s ease !important;
  opacity: 0 !important;
  vertical-align: middle !important;
}

.desktop-menu .sm-simple .mega-menu ul li a:hover,
.desktop-menu .sm-simple .mega-menu .elementor-widget-html a:hover {
  color: var(--minimog-color-primary, #e2231a) !important;
  padding-left: 8px !important;
  background: transparent !important;
}

.desktop-menu .sm-simple .mega-menu ul li a:hover::after,
.desktop-menu .sm-simple .mega-menu .elementor-widget-html a:hover::after {
  content: ' →' !important;
  width: auto !important;
  opacity: 1 !important;
  font-size: 11px !important;
  margin-left: 4px !important;
}

/* ------------------------------------------------
   8. PADDING INTERNE — Container Elementor >= 1200px
   ------------------------------------------------ */
@media (min-width: 1200px) {
  .desktop-menu .sm-simple .mega-menu .e-con-inner,
  .desktop-menu .sm-simple .mega-menu .elementor-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  .desktop-menu .sm-simple .mega-menu,
  .desktop-menu .sm-simple ul.children.mega-menu {
    padding: 40px 60px !important;
  }
}

/* ------------------------------------------------
   9. MENU MOBILE — Compatibilité drawer
   ------------------------------------------------ */
.page-mobile-main-menu .mega-menu ul {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.page-mobile-main-menu .mega-menu ul li {
  display: block !important;
}

.page-mobile-main-menu .mega-menu ul li a {
  display: block !important;
  color: var(--mobile-menu-text-color, #444) !important;
  padding: 8px 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  transition: none !important;
}

.page-mobile-main-menu .mega-menu ul li a::after {
  display: none !important;
}

.page-mobile-main-menu .mega-menu h4 {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  margin: 14px 0 6px 0 !important;
  color: var(--mobile-menu-heading-color, #111) !important;
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
  padding-bottom: 5px !important;
}

.page-mobile-main-menu .mega-menu img {
  display: none !important;
}

/* =============================================
   10. CLASSES mm-cols / mm-col — Méga-menus JS injectés
   Date : 2026-03-13
   FTP  : /home/offroaz/www/wp-content/themes/minimog-child/style.css
   ============================================= */
.mm-cols {
  display: flex !important;
  gap: 0 !important;
  width: 100% !important;
  padding: 30px 40px !important;
}
.mm-col {
  flex: 1 !important;
  min-width: 150px !important;
  padding-right: 40px !important;
  border-right: 1px solid #eeeeee !important;
}
.mm-col:last-child {
  border-right: none !important;
  padding-right: 0 !important;
}
.mm-col + .mm-col {
  padding-left: 40px !important;
}

/* VÉHICULES — espacement h4 après ul (Quads SSV, etc.) */
.desktop-menu .sm-simple .mega-menu .elementor-widget-html ul + h4 {
  margin-top: 20px !important;
}

/* =============================================
   11. NAV TOP-LEVEL — Compacte pour 7 colonnes
   Date : 2026-03-14
   FTP  : /home/offroaz/www/wp-content/themes/minimog-child/style.css
   Raison : ajout colonne ENTRETIEN (7 items) — nav était 15px / letter-spacing:1px
   Réduit à 13px + letter-spacing 0.5px pour tenir sur une ligne à 1280px+
   ============================================= */
.menu--primary > ul > li > a,
.desktop-menu .sm-simple > li > a {
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
}

/* =============================================
   12. PIÈCES DÉTACHÉES — Réduction police (9 colonnes)
   Date : 2026-03-15
   FTP  : /home/offroaz/www/wp-content/themes/minimog-child/style.css
   ============================================= */
.menu-item-27125 .mega-menu h4 {
  font-size: 13px !important;
}
.menu-item-27125 .mega-menu ul li a {
  font-size: 12px !important;
  line-height: 2 !important;
}