/* Maison de l'Europe - barre supérieure du header, v1.0.2.
   Les pictogrammes sont ceux du prototype homepage validé.
   Sélecteurs volontairement limités au header : aucun effet sur le footer. */
#header .header-nav .mde-headerbar {
  --mde-social-size: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1;
  box-sizing: border-box;
  /* Ajustement fin pour aligner visuellement la barrette MDE sur
     Français / Connexion / Panier du thème Classic. */
  transform: translateY(2px);
}

#header .header-nav .mde-header-contact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  color: #666;
  text-decoration: none;
  line-height: 1;
}

#header .header-nav .mde-header-contact:hover,
#header .header-nav .mde-header-contact:focus {
  color: #23798b;
  text-decoration: none;
}

#header .header-nav .mde-contact-icon-img {
  width: 17px;
  height: 17px;
  display: block;
  flex: 0 0 17px;
  object-fit: contain;
}

#header .header-nav .mde-header-separator {
  width: 1px;
  height: 18px;
  display: inline-block;
  flex: 0 0 1px;
  background: #d6d6d6;
  margin: 0 1px;
}

#header .header-nav .mde-header-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
}

#header .header-nav .mde-social-link {
  width: var(--mde-social-size);
  height: var(--mde-social-size);
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--mde-social-size);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-decoration: none;
  line-height: 1;
  box-shadow: none;
  opacity: .86;
  transition: opacity .15s ease, transform .15s ease;
}

#header .header-nav .mde-social-icon-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

#header .header-nav .mde-social-link:hover,
#header .header-nav .mde-social-link:focus {
  opacity: 1;
  transform: translateY(-1px);
  background: transparent;
  text-decoration: none;
  outline: none;
  box-shadow: none;
}

/* Tablette / petit desktop : garder displayNav1 sur la même ligne que
   Français / Connexion / Panier sans empiéter dessus. */
@media (max-width: 991px) {
  #header .header-nav .mde-headerbar {
    --mde-social-size: 20px;
    gap: 6px;
    font-size: 12px;
  }

  #header .header-nav .mde-header-social {
    gap: 6px;
  }

  #header .header-nav .mde-contact-icon-img {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }

  #header .header-nav .mde-header-email .mde-header-contact-text {
    display: none;
  }

  #header .header-nav .mde-header-separator {
    margin: 0;
  }
}

/* Le thème Classic remplace son header par la version mobile sous ce seuil.
   displayNav1 n'y est plus rendu : rien n'est forcé dans le header smartphone. */