/* UX t941 : menu du haut du site au design de la maquette blog de Béryl (en-tête blanc, entrées en pilule, menus déroulants en carte).
   Contenu inchangé (mêmes liens, mêmes textes, même ordre) ; balisage dans header.tag (fragment-header.tag de la maquette).
   À charger après custom.css (règles t104 de .md-entete gardées : une ligne dès 992 px, largeur du contenu, barre de 80 px).
   Couleurs de la charte : noir #000, blanc #fff, gris clair #f8f8f8, lime #e7fdba ; trait #e6e5ef et texte secondaire #55536b repris de la maquette de Béryl.
   Police : Roboto (md-polices.css). Menus déroulants en <details> : ouverts et fermés sans JavaScript ; md-menu.js ne fait que fermer les autres. */

/* En-tête blanc fermé par un trait fin (ombre intérieure : la hauteur de 130 px de t104 ne change pas) */
.navbar.white.md-entete { border: 0; background: #fff; box-shadow: inset 0 -1px 0 #e6e5ef; }

/* ---------- Liste du menu (ordinateur, dès 992 px : une ligne à droite du logo, t104) ---------- */
.md-entete .md-menu { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.md-entete .md-menu > li { position: relative; flex: 0 0 auto; margin: 0; }

/* Entrées : lien simple (Location, Boutique, Mes Devis) et titre d'un menu déroulant (Formation, Prestation, compte) */
.md-entete .md-menu-lien,
.md-entete .md-menu-deroulant > .md-menu-titre {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 10px 12px; border-radius: 999px;
    font: 700 15px/1.4 Roboto, Arial, sans-serif; color: #000;
    text-decoration: none; white-space: nowrap; cursor: pointer; background: transparent;
}
.md-entete .md-menu-lien:hover,
.md-entete .md-menu-lien:focus,
.md-entete .md-menu-deroulant > .md-menu-titre:hover,
.md-entete .md-menu-deroulant[open] > .md-menu-titre { background: #f8f8f8; color: #000; text-decoration: none; }
/* Rubrique de la page en cours : fond lime */
.md-entete .md-menu-lien[aria-current],
.md-entete .md-menu-actif > .md-menu-titre { background: #e7fdba; }
.md-entete .md-menu-lien .fa,
.md-entete .md-menu-titre .fa { margin-right: 2px; }

/* Menus déroulants */
.md-entete .md-menu-deroulant { position: relative; }
.md-entete .md-menu-deroulant > summary { list-style: none; }
.md-entete .md-menu-deroulant > summary::-webkit-details-marker { display: none; }
.md-entete .md-menu-deroulant > .md-menu-titre::after {
    content: ""; width: 0; height: 0; margin: 5px 0 0 4px;
    border: 5px solid transparent; border-top-color: #55536b;
}
.md-entete .md-menu-panneau {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 1000;
    width: 360px; margin: 0; padding: 8px; list-style: none;
    background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    text-align: left;
}
/* Menus du bord droit (compte, pays) : ouverts vers la gauche, pour ne pas sortir de l'écran */
.md-entete .md-menu-panneau--compte,
.md-entete .md-menu-panneau--pays { left: auto; right: 0; width: 240px; }

/* Choix d'un menu : icône sur 28 px, titre en gras, description dessous */
.md-entete .md-menu-choix {
    display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start;
    padding: 10px; border-radius: 10px;
    font: 400 14px/1.4 Roboto, Arial, sans-serif; color: #55536b;
    text-decoration: none; white-space: normal;
}
.md-entete .md-menu-choix:hover,
.md-entete .md-menu-choix:focus { background: #f8f8f8; color: #55536b; text-decoration: none; }
.md-entete .md-menu-choix strong { display: block; color: #000; font-size: 15px; font-weight: 700; }
.md-entete .md-menu-emo { font-size: 20px; line-height: 1.2; text-align: center; color: #000; }
.md-entete .md-menu-emo .fa,
.md-entete .md-menu-emo .glyphicon { font-size: 16px; line-height: 24px; }
.md-entete .md-menu-separateur { height: 1px; margin: 6px 10px; background: #e6e5ef; }
.md-entete .md-menu-drapeau { display: block; width: 22px; height: auto; max-width: 22px; margin: 2px auto 0; border-radius: 2px; box-shadow: 0 0 0 1px #e6e5ef; }

/* Actions à droite : « Se Connecter » en pilule à contour, téléphone et pays en boutons ronds de 44 px */
.md-entete .md-menu > li.md-menu-action { margin-left: 6px; }
.md-entete .md-menu > li.md-menu-action--premier { margin-left: 14px; }
.md-entete .md-menu-pilule {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
    border: 1px solid #e6e5ef; border-radius: 999px; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    font: 400 15px/1.2 Roboto, Arial, sans-serif; color: #000; text-decoration: none; white-space: nowrap;
}
.md-entete .md-menu-rond,
.md-entete .md-menu-deroulant > summary.md-menu-rond {
    display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid #e6e5ef; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    font-size: 17px; line-height: 1; color: #000; text-decoration: none; cursor: pointer;
}
.md-entete .md-menu-pilule:hover,
.md-entete .md-menu-pilule:focus,
.md-entete .md-menu-rond:hover,
.md-entete .md-menu-rond:focus,
.md-entete .md-menu-deroulant[open] > summary.md-menu-rond { background: #f8f8f8; color: #000; text-decoration: none; }

/* Focus clavier visible (comme la maquette de Béryl) */
.md-entete .md-menu a:focus-visible,
.md-entete .md-menu summary:focus-visible { outline: 3px solid #000; outline-offset: 3px; }

/* De 992 à 1199 px (conteneur de 970 px, t104) : entrées resserrées pour que le menu d'un client connecté tienne sur une ligne
   (nom du compte coupé à 120 px par la règle t104) */
@media (min-width: 992px) and (max-width: 1199px) {
    .md-entete .md-menu { gap: 0; }
    .md-entete .md-menu-lien,
    .md-entete .md-menu-deroulant > .md-menu-titre { padding: 10px 5px; font-size: 14px; }
    .md-entete .md-menu-deroulant > .md-menu-titre::after { margin-left: 2px; }
    .md-entete .md-menu-pilule { padding: 0 14px; font-size: 14px; }
    .md-entete .md-menu > li.md-menu-action { margin-left: 4px; }
    .md-entete .md-menu > li.md-menu-action--premier { margin-left: 8px; }
}

/* ---------- Téléphone et tablette (jusqu'à 991 px : menu burger, t223) ---------- */
/* Bouton burger rond de 44 px, centré sur la barre du logo (75 px) */
.md-entete .navbar-toggle.md-menu-burger {
    width: 44px; height: 44px; margin: 15px 15px 15px 0; padding: 0;
    border: 1px solid #e6e5ef; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.md-entete .navbar-toggle.md-menu-burger:hover,
.md-entete .navbar-toggle.md-menu-burger:focus { background: #f8f8f8; }
.md-entete .navbar-toggle.md-menu-burger .icon-bar { width: 18px; height: 2px; margin: 0 auto; border-radius: 2px; background: #000; }
.md-entete .navbar-toggle.md-menu-burger .icon-bar + .icon-bar { margin-top: 4px; }

@media (max-width: 991px) {
    /* Menu ouvert : une entrée par ligne, puis « Se Connecter », téléphone et pays sur une même ligne (t222) */
    .md-entete .md-menu { flex-wrap: wrap; gap: 2px 8px; padding: 8px 0 16px; border-top: 1px solid #e6e5ef; }
    .md-entete .md-menu > li { flex: 0 0 100%; }
    .md-entete .md-menu > li.md-menu-action,
    .md-entete .md-menu > li.md-menu-action--premier { flex: 0 0 auto; margin: 8px 0 0; }
    .md-entete .md-menu-lien,
    .md-entete .md-menu-deroulant > .md-menu-titre { display: flex; width: 100%; padding: 12px; font-size: 16px; }
    /* Sous-menus dépliés dans la liste, sans ombre */
    .md-entete .md-menu-panneau { position: static; width: auto; padding: 0 0 4px 8px; box-shadow: none; }
    /* Menu des pays : reste une carte ouverte sous le drapeau */
    .md-entete .md-menu-panneau.md-menu-panneau--pays { position: absolute; right: 0; left: auto; width: 220px; padding: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
    .md-entete .md-menu-panneau.md-menu-panneau--compte { width: auto; }
    .md-entete .md-entete-nom { max-width: 220px; }
}