/* ==================================================
   Mobile Menu Redesign - Tex Logistics
   Menu mobile propre, moderne et fonctionnel
   ================================================== */

/* Variables de couleurs */
:root {
  --mobile-menu-bg: #101010;
  --mobile-menu-primary: #F85C00;
  --mobile-menu-text: #ffffff;
  --mobile-menu-border: rgba(255, 255, 255, 0.15);
}

/* ==================================================
   OVERRIDE CRITIQUE - Forcer la visibilité immédiate
   Cette règle doit être la première pour surcharger style.css
   ================================================== */
@media only screen and (max-width: 992px) {
  /* Override style.css ligne 12484 qui cache le header */
  body header,
  html body header,
  header.transparent,
  header.header-static,
  header.header-mobile,
  header.fixed,
  header.autoshow {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Override style.css ligne 1041 qui cache le bouton */
  body #menu-btn,
  html body #menu-btn,
  button#menu-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Forcer menu_side_area visible */
  body .menu_side_area,
  html body .menu_side_area {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ==================================================
   OVERRIDE GLOBAL - Forcer la visibilité sur mobile
   Override style.css ligne 12484 qui cache le header
   ================================================== */
@media only screen and (max-width: 992px) {
  /* Override pour max-width: 992px (style.css ligne 12379) */
  header,
  header.transparent,
  header.header-static,
  header.header-mobile,
  header.fixed,
  header.autoshow {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media only screen and (max-width: 767.98px) {
  
  /* FORCER le header à être visible - Override style.css ligne 12484 */
  header,
  header.transparent,
  header.header-static,
  header.header-mobile,
  header.fixed,
  header.autoshow {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    background: var(--mobile-menu-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--mobile-menu-border) !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5) !important;
    z-index: 10000 !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* FORCER le bouton menu à être visible - Override style.css ligne 1041 et 12455 */
  #menu-btn,
  button#menu-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    float: none !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    padding: 12px 10px !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid var(--mobile-menu-text) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    z-index: 10001 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* FORCER menu_side_area à être visible */
  .menu_side_area {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 10001 !important;
  }
  
  /* FORCER le logo à être visible */
  header #logo {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  header #logo img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ==================================================
   MOBILE HEADER (< 768px) - Styles détaillés
   ================================================== */
@media only screen and (max-width: 767.98px) {
  
  /* ============================================
     HEADER FIXE EN HAUT - TRÈS VISIBLE
     ============================================ */
  header,
  header.transparent,
  header.header-static {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--mobile-menu-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--mobile-menu-border) !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5) !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Container du header */
  header .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px !important;
    margin: 0 !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  header .row {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  header .col-md-12 {
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* Flex container */
  header .de-flex {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 70px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
  }
  
  header .de-flex-col {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 70px !important;
  }
  
  header .de-flex-col:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  
  header .de-flex-col:last-child {
    flex: 0 0 auto !important;
    margin-left: 15px !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* ============================================
     LOGO
     ============================================ */
  header #logo {
    display: flex !important;
    align-items: center !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }
  
  header #logo a {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    text-decoration: none !important;
  }
  
  header .logo-mobile {
    max-width: 140px !important;
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
  }
  
  header .logo-main,
  header .logo-scroll {
    display: none !important;
  }
  
  /* ============================================
     BOUTON HAMBURGER - TRÈS VISIBLE ET FONCTIONNEL
     ============================================ */
  .menu_side_area {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10001 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  #menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    padding: 12px 10px !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid var(--mobile-menu-text) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10001 !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3) !important;
    touch-action: manipulation !important;
    transition: all 0.3s ease !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    pointer-events: auto !important;
    flex-direction: column !important;
  }
  
  #menu-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--mobile-menu-primary) !important;
  }
  
  #menu-btn:active {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(0.95) !important;
  }
  
  /* Hamburger avec 3 lignes HTML - Toujours visibles */
  #menu-btn {
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-image: none !important;
  }
  
  /* Lignes du hamburger */
  #menu-btn .hamburger-line {
    display: block !important;
    width: 26px !important;
    height: 3px !important;
    background-color: var(--mobile-menu-text) !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Espacement entre les lignes */
  #menu-btn .hamburger-line:nth-child(1) {
    margin-top: 0 !important;
  }
  
  #menu-btn .hamburger-line:nth-child(2) {
    margin-top: 5px !important;
  }
  
  #menu-btn .hamburger-line:nth-child(3) {
    margin-top: 5px !important;
  }
  
  /* Icône Font Awesome - Optionnel, masquée par défaut */
  #menu-btn:before {
    display: none !important;
  }
  
  /* Menu ouvert - Transformer en X */
  #menu-btn.menu-open {
    border-color: var(--mobile-menu-primary) !important;
    background-color: rgba(248, 92, 0, 0.15) !important;
    box-shadow: 0 2px 12px rgba(248, 92, 0, 0.4) !important;
    transform: none !important;
    justify-content: center !important;
  }
  
  /* Première ligne devient diagonale (haut-gauche vers bas-droite) */
  #menu-btn.menu-open .hamburger-line:nth-child(1) {
    transform: rotate(45deg) !important;
    background-color: var(--mobile-menu-primary) !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin-left: -13px !important;
    margin-top: -1.5px !important;
  }
  
  /* Deuxième ligne disparaît */
  #menu-btn.menu-open .hamburger-line:nth-child(2) {
    opacity: 0 !important;
    transform: scale(0) !important;
  }
  
  /* Troisième ligne devient diagonale inverse (haut-droite vers bas-gauche) */
  #menu-btn.menu-open .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) !important;
    background-color: var(--mobile-menu-primary) !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin-left: -13px !important;
    margin-top: -1.5px !important;
  }
  
  /* Si Font Awesome charge, on peut l'utiliser en option */
  #menu-btn:before {
    display: none !important;
  }
  
  #menu-btn.menu-open:before {
    display: none !important;
  }
  
  /* Cacher btn-extra */
  #btn-extra {
    display: none !important;
  }
  
  /* ============================================
     MENU CACHÉ PAR DÉFAUT
     ============================================ */
  .header-col-mid {
    display: none !important;
  }
  
  #mainmenu {
    display: none !important;
  }
  
  /* ============================================
     MENU OUVERT - OVERLAY FULLSCREEN
     ============================================ */
  header.menu-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    background: var(--mobile-menu-bg) !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  header.menu-open .container {
    height: auto !important;
    min-height: 100vh !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-top: 0 !important;
    padding-bottom: 40px !important;
  }
  
  /* Logo visible en haut quand menu ouvert */
  header.menu-open .de-flex-col:first-child {
    position: fixed !important;
    top: 15px !important;
    left: 20px !important;
    z-index: 100001 !important;
    height: auto !important;
  }
  
  header.menu-open .de-flex {
    flex-direction: column !important;
    align-items: flex-start !important;
    height: auto !important;
    width: 100% !important;
    padding: 0 !important;
    margin-top: 80px !important;
  }
  
  header.menu-open .header-col-mid {
    display: block !important;
    width: 100% !important;
    margin-top: 20px !important;
    padding: 0 20px !important;
  }
  
  header.menu-open #mainmenu {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  
  header.menu-open #mainmenu li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--mobile-menu-border) !important;
    list-style: none !important;
  }
  
  header.menu-open #mainmenu li:last-child {
    border-bottom: none !important;
  }
  
  header.menu-open #mainmenu li a.menu-item {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 20px 0 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--mobile-menu-text) !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
  }
  
  header.menu-open #mainmenu li a.menu-item:active,
  header.menu-open #mainmenu li a.menu-item:hover {
    color: var(--mobile-menu-primary) !important;
    padding-left: 15px !important;
  }
  
  header.menu-open #mainmenu li a.menu-item:before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 0 !important;
    background: var(--mobile-menu-primary) !important;
    transition: height 0.3s ease !important;
    border-radius: 0 2px 2px 0 !important;
  }
  
  header.menu-open #mainmenu li a.menu-item:hover:before,
  header.menu-open #mainmenu li a.menu-item:active:before {
    height: 30px !important;
  }
  
  /* Bouton menu positionné en haut à droite quand ouvert */
  header.menu-open .menu_side_area {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 100002 !important;
  }
  
  /* ============================================
     ESPACEMENT CONTENU
     ============================================ */
  body {
    padding-top: 0 !important;
  }
  
  header + #content {
    margin-top: 70px !important;
    padding-top: 0 !important;
  }
  
  header + #content > section:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Carrousel - ajustement */
  section.text-light.no-top.no-bottom {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  section.text-light.no-top.no-bottom .mh-800 {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Subheader - ajustement */
  #subheader {
    padding-top: 90px !important;
    margin-top: 0 !important;
  }
  
  /* S'assurer que le contenu n'est pas trop grand */
  #content {
    margin-top: 70px !important;
    padding-top: 0 !important;
  }
  
  /* Fix pour éviter les éléments énormes */
  * {
    box-sizing: border-box !important;
  }
  
  img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  /* Fix pour les sections qui deviennent trop grandes */
  section {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
  }
  
  .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .container-fluid {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
  }
  
  /* Fix pour éviter les débordements horizontaux */
  body, html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  #wrapper {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  /* Fix pour les éléments qui deviennent trop grands */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  
  [class*="col-"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 100% !important;
  }
}

/* ==================================================
   TABLETTE (768px - 991px)
   ================================================== */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  
  header {
    position: relative !important;
    background: var(--mobile-menu-bg) !important;
    min-height: 80px !important;
    padding: 15px 0 !important;
  }
  
  header.transparent {
    background: var(--mobile-menu-bg) !important;
  }
  
  header .logo-mobile {
    max-width: 160px !important;
  }
  
  #menu-btn {
    width: 50px !important;
    height: 50px !important;
    border: 2px solid var(--mobile-menu-text) !important;
    border-radius: 8px !important;
  }
  
  #menu-btn:before {
    font-size: 22px !important;
  }
  
  header.menu-open {
    height: 100vh !important;
  }
  
  header + #content {
    margin-top: 0 !important;
  }
  
  #subheader {
    padding-top: 100px !important;
  }
}