/* =========================
   HP Language Switcher
   ========================= */

.hp-lang{
  --hp-lang-blue: var(--hp-blue, #0B3A78); /* ton bleu */
  --hp-flag-size: 26px;                   /* taille drapeau */
  --hp-btn-size: 28px;                    /* diamètre du bouton (cercle) */
  --hp-menu-gap: 8px;

  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle; /* aide dans les lignes de header */
  line-height: 1;
}

/* ===== Bouton (drapeau courant) : cercle + ombre ronde ===== */
.hp-lang__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--hp-btn-size);
  height: var(--hp-btn-size);

  padding: 0;
  margin: 0;

  background: #fff;
  border: 0;
  border-radius: 999px;

  cursor: pointer;

  /* ombre ronde */
  box-shadow: 0 2px 10px rgba(0,0,0,.18);

  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.hp-lang__btn img{
  width: var(--hp-flag-size);
  height: var(--hp-flag-size);
  display: block;
}

/* Hover bouton : fond bleu derrière le drapeau */
.hp-lang__btn:hover{
  background: var(--hp-lang-blue);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  transform: translateY(-1px);
}

/* ===== Dropdown ===== */
.hp-lang__menu{
    position: absolute;
    

    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 10px 22px rgba(0,0,0,.14);
    min-width: 46px;
    padding: 0px;
    margin: 0;
    list-style: none;

    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    top: calc(100% + var(--hp-menu-gap)) !important;

    display: none;
    z-index: 99999;
}

/* IMPORTANT: le menu reste visible quand ouvert */
.hp-lang.is-open .hp-lang__menu{
  display: block;
}

/* Items drapeaux-only */
.hp-lang__item{
  margin: 0;
  padding: 0;
}

.hp-lang__item a{
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 6px;
    border-bottom: 1px solid rgba(0,0,0,.12);
    text-decoration: none;
    background: transparent;
}

/* drapeaux dans le menu */
.hp-lang__item img{
  width: var(--hp-flag-size);
  height: var(--hp-flag-size);
  display: block;
}

/* hover menu */
.hp-lang__item a:hover{
  background: var(--hp-lang-blue);
}

/* Texte caché (si tu gardes le <span>) */
.hp-lang__item a span{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Mobile */
@media (max-width: 767px){
  .hp-lang__menu{ right: auto; left: 0; }
}