/*******************************************************
  BRANT HEADER SEARCH (AWS) - FIX COMPLET
*******************************************************/

/* Le module Code Divi */
.et_pb_module.brant-header__search{
  display: flex !important;
  justify-content: flex-end !important;
}

/* Sécurité : évite tout recentrage interne */
.brant-header__search .et_pb_code_inner{
  display: flex;
  justify-content: flex-end;
}

/* Le container AWS ne doit pas se centrer tout seul */
.brant-header__search .aws-container{
  margin-left: auto !important;
  margin-right: 0 !important;
}
/* 1) Le module Divi code doit pouvoir s'étendre */
.brant-header__search,
.brant-header__search .et_pb_code_inner{
  width: 100% !important;
}

/* 2) Le container AWS : largeur desktop min/max */
.brant-header__search .aws-container{
  width: 100% !important;
}

/* Desktop : min 500 / max 530 (comme demandé) */
@media (min-width: 981px){
  .brant-header__search{
    display: flex;
    justify-content: flex-end; /* à droite comme ta maquette */
  }
  .brant-header__search .aws-container{
    min-width: 500px !important;
    max-width: 530px !important;
    width: 530px !important; /* force si le parent shrink */
    flex: 0 0 auto !important;
  }
}

/* 3) Wrapper + input : radius OK + pas de texte barré */
.brant-header__search .aws-wrapper{
  position: relative !important;
  width: 100% !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.brant-header__search .aws-search-field{
  width: 100% !important;
  height: 42px !important;

  border: 1px solid #d6d6d6 !important;
  border-radius: 999px !important;

  /* IMPORTANT: enlève l'effet "barré" */
  text-decoration: none !important;

  /* padding à droite pour l'icône */
  padding: 0 52px 0 18px !important;

  font-size: 14px !important;
  line-height: 42px !important;
  box-shadow: none !important;
  outline: none !important;

/* 4) Loupe fiable via SVG inline en background */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M10 18a8 8 0 1 1 5.293-14.293A8 8 0 0 1 10 18m0-2a6 6 0 1 0-4.243-1.757A5.96 5.96 0 0 0 10 16m11.707 5.293-5.4-5.4 1.414-1.414 5.4 5.4z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 18px 18px !important;
}

.brant-header__search .aws-search-result {
    border-radius: 15px !important;
}


/*******************************************************
  BRANT HEADER MENU (Divi Menu : logo + menu)
  Cible : module avec classe .brant-header__menu
*******************************************************/

/* Base : évite les écarts "bizarres" (padding/width) */
.brant-header__menu,
.brant-header__menu *{
  box-sizing: border-box;
}

/* Le container interne doit prendre toute la largeur */
.brant-header__menu .et_pb_menu_inner_container{
  width: 100% !important;
}

/* Desktop uniquement (on ne casse pas le menu mobile Divi) */
@media (min-width: 981px){

  /***************
    1) LAYOUT : logo à gauche, menu prend le reste
  ***************/
  /* Le wrap (menu + mobile) en flex */
  .brant-header__menu .et_pb_menu__wrap{
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  /* Bloc logo à gauche */
  .brant-header__menu .et_pb_menu__logo-wrap{
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    margin-right: 24px !important;
  }

  .brant-header__menu .et_pb_menu__logo{
    display: flex !important;
    align-items: center !important;
  }

  /* Le bloc menu prend toute la largeur disponible */
  .brant-header__menu .et_pb_menu__menu{
    flex: 1 1 auto !important;
    width: 100% !important;
    display: flex !important;
    min-width: 0 !important; /* important pour éviter le débordement */
  }

  .brant-header__menu .et_pb_menu__menu nav{
    width: 100% !important;
  }

  /***************
    2) UL en flex, full width, pas de retour à la ligne
  ***************/
  .brant-header__menu .et_pb_menu__menu > nav > ul.et-menu{
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    flex-wrap: nowrap !important;     /* empêche le menu sur 2 lignes */
    align-items: stretch !important;  /* les LI ont tous la même hauteur */
  }

  /***************
    3) LI équitables + séparateurs
  ***************/
  .brant-header__menu .et_pb_menu__menu > nav > ul.et-menu > li{
    flex: 1 1 0 !important;     /* items équitables */
    margin: 0 !important;
    padding: 0 !important;
    height: 56px !important;    /* hauteur barre menu */
    display: flex !important;
    align-items: stretch !important;
    min-width: 0 !important;    /* nécessaire pour l’ellipsis */
  }

  /* Séparateurs verticaux */
  .brant-header__menu .et_pb_menu__menu > nav > ul.et-menu > li + li{
    border-left: 1px solid #e5e5e5;
  }

  /***************
    4) A prend TOUT l'espace du LI (plus d'espace en bas/droite)
  ***************/
  .brant-header__menu .et_pb_menu__menu > nav > ul.et-menu > li > a{
    width: 100% !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 12px !important;
    line-height: 1 !important;          /* enlève le “vide” sous le texte */
    white-space: nowrap !important;     /* jamais sur 2 lignes */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #363636 !important;
  }

  /***************
    5) Actif rouge plein + hover propre
  ***************/
  .brant-header__menu .et_pb_menu__menu > nav > ul.et-menu > li.current-menu-item > a,
  .brant-header__menu .et_pb_menu__menu > nav > ul.et-menu > li.current_page_item > a{
    background: #d60000;
    color: #fff !important;
  }

  .brant-header__menu .et_pb_menu__menu > nav > ul.et-menu > li:not(.current-menu-item):not(.current_page_item) > a:hover{
    background: #0d0d0d;
	color: #FFFFFF !important; 
  }
/* Force l'état hover de "Produits" quand le mega menu est ouvert */
/* Si ton hover ajoute aussi un style au <li> */
body.brant-mm-open .js-mm-produits,
body.brant-mm-open .js-mm-produits > a{
  filter: none !important;
  opacity: 1 !important;
}
/* Onglet PRODUITS : état actif quand mega menu ouvert */
body.brant-mm-open .js-mm-produits > a{
  color: #fff !important;              /* texte blanc */
  background: #2f2f2f !important;      /* même fond que ton hover actuel */
  opacity: 1 !important;
}
body.brant-mm-open .js-mm-produits > a:hover{

  background: #0d0d0d;
	color: #FFFFFF !important;
}
	
  /***************
    6) On cache le bloc mobile sur desktop (Divi le gère parfois déjà)
  ***************/
  .brant-header__menu .et_mobile_nav_menu{
    display: none !important;
  }
}

/*******************************************************
  MOBILE/TABLETTE : on laisse Divi gérer le hamburger
*******************************************************/
@media (max-width: 980px){
  /* On n’applique pas le “menu items égaux” sur mobile,
     sinon ça casse le comportement du menu hamburger. */
}

/*******************************************************
  BRANT MEGA MENU – BLOC UNIQUE (à mettre tout en bas)
  - Panel aligné sous la barre menu
  - Contenu contraint max 1280px
  - Overlay commence sous la barre menu
  - Onglet Produits reste en "hover" (fond noir + texte blanc)
*******************************************************/

@media (min-width: 981px){
.brant-mm { background:#fff; }
.brant-mm__grid { display:grid; gap:24px; padding:24px; }
.brant-mm__cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.brant-mm__title{
  display:block; font-weight:700; text-transform:uppercase;
  margin:0 0 10px 0;
}
.mm-level { list-style:none; padding:0; margin:0; }
.mm-level-2 .mm-item { margin:6px 0; }
.mm-link { text-decoration:none; display:inline-block; }
.mm-link:hover { text-decoration:underline; }
  /* Le header/menu doit rester au-dessus de l’overlay */
  .et-l--header,
  header#main-header,
  .et_builder_inner_content,
  .brant-header__menu{
    position: relative;
    z-index: 10050;
  }

  /* Overlay : commence sous la barre menu (variable posée en JS) */
  .brant-mm-overlay{
    position: fixed !important;
    left: 0; right: 0;
    top: var(--brant-mm-top, 56px) !important;
    height: calc(100vh - var(--brant-mm-top, 56px)) !important;

    background: rgba(0,0,0,.45);
    backdrop-filter: blur(1.5px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 0s linear 220ms;
    z-index: 9998;
  }

  /* Panel : fixé, parfaitement aligné sous la barre menu */
  .brant-mm-panel{
    position: fixed !important;
    left: 0; right: 0;
    top: var(--brant-mm-top, 56px) !important;

    background: #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);

    opacity: 0;
    transform: translateY(8px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;

    z-index: 9999;
  }

  /* Conteneur interne : max 1280 + centré */
  .brant-mm-panel__inner{
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
  }

  @media (max-width: 1280px){
    .brant-mm-panel__inner{
      max-width: 100%;
      padding: 18px;
    }
  }

  /* Anti-gap (pont invisible entre la barre et le panel) */
  .brant-mm-panel::before{
    content:"";
    position:absolute;
    left:0; right:0;
    top:-14px;
    height:14px;
    background:transparent;
  }

  /* Etat ouvert */
  body.brant-mm-open .brant-mm-overlay{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 220ms ease;
  }
  body.brant-mm-open .brant-mm-panel{
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity 220ms ease, transform 220ms ease;
  }

  /* Onglet PRODUITS : forcé en hover (fond noir + texte blanc) */
  body.brant-mm-open .brant-header__menu .et-menu > li.js-mm-produits > a{
    background: #0d0d0d !important;
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
  }
  body.brant-mm-open .brant-header__menu .et-menu > li.js-mm-produits{
    opacity: 1 !important;
    filter: none !important;
  }
}
/* ===== PATCH : contraindre VISUELLEMENT le mega menu à 1280px ===== */
@media (min-width: 981px){
.brant-mm-panel__inner{ border-radius: 0 0 6px 6px; }
  /* Le panel devient "invisible" (pas de fond plein écran) */
  .brant-mm-panel{
    background: transparent !important;
    box-shadow: none !important;
  }

  /* C'est l'inner qui devient la "boîte" du mega menu */
  .brant-mm-panel__inner{
    max-width: 1280px !important;
    width: calc(100% - 48px) !important;  /* marge gauche/droite (24px + 24px) */
    margin: 0 auto !important;

    background: #fff !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.12) !important;

    padding: 24px !important;
  }

  @media (max-width: 1280px){
    .brant-mm-panel__inner{
      width: calc(100% - 36px) !important;
      padding: 18px !important;
    }
  }
}

/* Mobile : tu masques overlay, et Divi gère le hamburger */
@media (max-width: 980px){
  .brant-mm-overlay{ display:none !important; }
  .brant-mm-panel{ display:none !important; }
}


/*======================
TABLETTE 980 /PHONE/
======================*/
@media screen and (max-width: 980px){

}
/*======================
MOBILE 780 /PHONE/
======================*/
@media screen and (max-width: 767px){ 
   
}
/*======================
MOBILE 540 /PHONE/
======================*/
@media screen and (max-width: 540px){

}