/* ==============================================
   MAKENA VOYAGES — Selecteur de langue
   A charger APRES makena.css : reprend ses variables
   (--ocean-deep, --sand-white, --border, --font-body...).
   Mobile-first 375px. Aucun italique. Aucun element flottant.
   Aucun deplacement au survol.
   ============================================== */

.mk-lang {
    position: relative;
    display: inline-block;
    font-family: var(--font-body);
}

/* ---- Declencheur ---- */

.mk-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;              /* cible tactile */
    padding: 0 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-light);
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.mk-lang-btn:hover { border-color: var(--ocean-mid); color: var(--ocean-deep); }
.mk-lang-btn:focus-visible { outline: 2px solid var(--ocean-mid); outline-offset: 2px; }
.mk-lang.is-open .mk-lang-btn { border-color: var(--ocean-deep); color: var(--ocean-deep); }

.mk-lang-globe {
    width: 16px; height: 16px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 0;                   /* le caractere de repli ne doit pas depasser */
    flex: 0 0 auto;
    position: relative;
}
.mk-lang-globe::before {
    content: "";
    position: absolute;
    top: 50%; left: -1.5px; right: -1.5px;
    height: 1.5px;
    background: currentColor;
    transform: translateY(-50%);
}

.mk-lang-code { text-transform: uppercase; }

/* Sur petit ecran le bouton reste compact : code seul (FR, EN, NL...).
   Le nom complet apparait a partir de la tablette. */
.mk-lang-name { display: none; }

.mk-lang-caret {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}
.mk-lang.is-open .mk-lang-caret { transform: rotate(180deg); }

/* ---- Panneau ---- */

.mk-lang-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1100;                 /* au-dessus du header fixe (1000) */
    min-width: 220px;
    padding: 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

.mk-lang-panel[hidden] { display: none; }

.mk-lang-title {
    margin: 0 0 8px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.mk-lang-list { list-style: none; margin: 0; padding: 0; }

.mk-lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mk-lang-item:hover { background: var(--sand-warm); color: var(--ocean-deep); }
.mk-lang-item:focus-visible { outline: 2px solid var(--ocean-mid); outline-offset: -2px; }

.mk-lang-item.is-current {
    background: var(--ocean-pale);
    color: var(--ocean-deep);
    font-weight: 700;
}

.mk-lang-flag { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.mk-lang-label { flex: 1 1 auto; }
.mk-lang-tick { flex: 0 0 auto; font-size: 13px; color: var(--ocean-mid); }

/* ---- Variante pied de page : liste a plat, pas de menu ---- */

.mk-lang-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mk-lang-inline a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.mk-lang-inline a:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.45); }
.mk-lang-inline a[aria-current="true"] { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.55); }

/* ---- Proposition de langue
   Bande discrete, dans le flux, jamais flottante et jamais automatique :
   elle propose, l'URL decide. ---- */

.mk-lang-offer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px var(--gutter);
    background: var(--ocean-pale);
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: var(--ocean-deep);
}

.mk-lang-offer p { margin: 0; }

.mk-lang-offer-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.mk-lang-offer-yes,
.mk-lang-offer-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--ocean-deep);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.mk-lang-offer-yes { background: var(--ocean-deep); color: var(--white); }
.mk-lang-offer-yes:hover { background: var(--ocean-mid); border-color: var(--ocean-mid); }
.mk-lang-offer-no { background: transparent; color: var(--ocean-deep); }
.mk-lang-offer-no:hover { background: rgba(11,57,84,0.08); }

/* ---- Tablette et plus ---- */

@media (min-width: 768px) {
    .mk-lang-name { display: inline; }
    .mk-lang-btn { padding: 0 14px; gap: 10px; }
    .mk-lang-code { display: none; }              /* le nom suffit, on evite la redite */
    .mk-lang-offer { flex-direction: row; align-items: center; justify-content: center; gap: 16px; }
}

/* ---- Preferences systeme ---- */

@media (prefers-reduced-motion: reduce) {
    .mk-lang-btn,
    .mk-lang-caret,
    .mk-lang-item,
    .mk-lang-inline a,
    .mk-lang-offer-yes,
    .mk-lang-offer-no { transition: none; }
}

/* ---- Recette : ?mk_i18n_audit=1 marque les chaines rendues en repli.
   Invisible en navigation normale, l'attribut n'est pose que dans ce mode. ---- */

[data-i18n-fallback] { outline: 1px dashed var(--coral); outline-offset: 2px; }