/* ==========================================================================
   MG Carrelage — En-tête (Theme Builder > Header)
   Figma : composant `header` (node 3:113) — 1400×135, fond blanc,
   border-radius 20px, padding 20px. Logo circulaire 95px (fond vert sauge)
   à gauche, navigation à droite (gap 30px, Poppins Light 20 uppercase).
   ========================================================================== */

.mg-header.et_pb_section,
.mg-header {
  width: 100%;
  max-width: calc(var(--mg-largeur-page) + 2 * var(--mg-gouttiere));
  margin: 0 auto;
  padding: var(--mg-gouttiere);
  background: transparent;
}

.mg-header__inner.et_pb_row,
.mg-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mg-gap);
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: var(--mg-gouttiere);
  background-color: var(--mg-blanc);
  border-radius: var(--mg-radius);
}

/* Divi met ses colonnes en 100% de large avec une marge basse : à neutraliser
   pour que la barre reste sur une seule ligne. */
.mg-header__inner > .et_pb_column {
  width: auto;
  margin: 0 !important;
  padding: 0;
}

.mg-header__inner > .et_pb_column:last-child {
  margin-left: auto !important;
}

/* --- Logo --------------------------------------------------------------- */

.mg-header__logo,
.mg-header__logo.et_pb_image {
  margin: 0 !important;
  width: 95px;
  max-width: 95px;
  flex: 0 0 95px;
}

.mg-header__logo img,
.mg-header__logo .et_pb_image_wrap img {
  display: block;
  width: 95px;
  height: 95px;
  object-fit: cover;
  object-position: bottom;
  border-radius: 50%;
  background-color: var(--mg-vert);
}

.mg-header__logo .et_pb_image_wrap {
  display: block;
  border-radius: 50%;
  overflow: hidden;
}

/* --- Navigation --------------------------------------------------------- */

.mg-header__nav,
.mg-header__nav.et_pb_menu {
  margin: 0 !important;
  background: transparent;
}

.mg-header__nav .et_pb_menu__wrap,
.mg-header__nav .et_pb_menu__menu {
  justify-content: flex-end;
}

/* ── DOM réel du module Menu de Divi 5 ─────────────────────────────────────
   .mg-header__nav
     > .et_pb_menu_inner_container
       > .et_pb_menu__wrap
         > .et_pb_menu__menu
           > nav.et-menu-nav
             > ul.et-menu.nav
               > li > a

   Le `nav.et-menu-nav` intercalé invalide tout sélecteur en
   `.et_pb_menu__menu > ul`. C'est la liste `ul.et-menu` qu'il faut cibler —
   erreur constatée en production : les liens restaient en 14px / gris Divi.
   ────────────────────────────────────────────────────────────────────────── */

.mg-header__nav ul.et-menu,
.mg-header__nav ul.mg-nav {
  display: flex;
  align-items: center;
  /* Filet de sécurité : si le module Menu est configuré sans bascule mobile,
     ou si un menu HTML brut est utilisé, les 5 entrées passent à la ligne au
     lieu de provoquer un défilement horizontal. */
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--mg-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mg-header__nav ul.et-menu > li,
.mg-header__nav ul.mg-nav > li {
  margin: 0;
  padding: 0;
}

/* Structure seulement. Taille, graisse, casse et couleur des liens se règlent
   dans le module Menu (Design → Menu Text) — pas ici, sinon le réglage fait
   dans le Visual Builder serait écrasé. */
.mg-header__nav ul.et-menu > li > a,
.mg-header__nav ul.mg-nav > li > a {
  display: block;
  padding: 0;
  text-decoration: none;
  opacity: 1;
  transition: color var(--mg-transition);
}

/* Divi souligne l'élément courant par défaut : non prévu par la maquette. */
.mg-header__nav ul.et-menu > li > a::after {
  display: none;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1080px) {
  /* La navigation à 5 entrées ne tient plus à 20px : on resserre l'écart
     avant de basculer sur le menu hamburger de Divi. */
  .mg-header__nav ul.et-menu,
  .mg-header__nav ul.mg-nav {
    gap: 18px;
  }
}

@media (max-width: 980px) {
  /* En dessous de 980px Divi remplace le menu par le hamburger. Sa couleur se
     règle dans le module Menu (Design → Hamburger Menu) ; on ne pose ici que
     les bordures et le fond du panneau déroulant, que Divi n'expose pas. */
  .mg-header__nav .et_mobile_menu {
    border-top-color: var(--mg-vert);
    background-color: var(--mg-blanc);
  }

  .mg-header__nav .et_mobile_menu li a {
    border-bottom-color: var(--mg-bordure);
  }
}

@media (max-width: 478px) {
  .mg-header__logo,
  .mg-header__logo.et_pb_image {
    width: 68px;
    max-width: 68px;
    flex-basis: 68px;
  }

  .mg-header__logo img,
  .mg-header__logo .et_pb_image_wrap img {
    width: 68px;
    height: 68px;
  }
}