/* ============================================================
   Menu-Ling.css — additions du menu vertical SÉJOUR LINGUISTIQUE
   Chargé EN PLUS de Menu.css (la base header/footer est inchangée) :
   - .lingm-nav : nav déroulante « Séjours linguistiques » (hover
     desktop + clic/tap via .is-open posé par Menu-Ling.js)
   - boutons Contact/Devis : réutilisent .hdr-btn--ghost / --primary
     de Menu.css (seul le responsive est géré ici)
   ============================================================ */

/* ---- Nav déroulante ---- */
.lingm-nav {
    flex-shrink: 0;
    margin-left: 24px;
}

.lingm-item {
    position: relative;
}

.lingm-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    font-family: 'Roboto', sans-serif;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

.lingm-link:hover {
    color: var(--color-primary-dark);
}

.lingm-arrow {
    display: inline-flex;
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.lingm-arrow svg {
    width: 100%;
    height: 100%;
}

.lingm-item:hover .lingm-arrow,
.lingm-item.is-open .lingm-arrow {
    transform: rotate(180deg);
}

/* Panneau déroulant */
.lingm-drop {
    position: absolute;
    top: 100%;
    left: -16px;
    min-width: 250px;
    padding: 10px 0;
    background: var(--color-white);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(31, 41, 55, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 300;
}

.lingm-item:hover .lingm-drop,
.lingm-item.is-open .lingm-drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lingm-drop a {
    display: block;
    padding: 11px 22px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9688rem;
    color: var(--color-dark);
    text-decoration: none;
    white-space: nowrap;
}

.lingm-drop a:hover {
    background: var(--color-white-grey);
    color: var(--color-primary);
}

/* ---- Responsive ---- */
/* Le header tourisme masque déjà la recherche desktop en mobile (Menu.css) ;
   ici on resserre la nav, puis (≤800px) on la passe sur une 2e rangée, et on
   sacrifie Contact sous 640px (le Devis reste, c'est le CTA). */
@media (max-width: 900px) {
    .lingm-nav { margin-left: 12px; }
    .lingm-link { font-size: 0.9688rem; }
    /* en tactile le hover n'existe pas : le clic pose .is-open (Menu-Ling.js) */
}

/* HEADER SUR DEUX RANGEES — correctif du scroll horizontal.
   Le header LINGUA porte une nav que le header tourisme n'a pas. Avec le
   `nowrap` herite de Menu.css, logo + nav + Devis + loupe + langue debordaient
   de l'ecran des que la place manquait (mesure : 525px de contenu pour 351px
   utiles a 375px de large -> scrollWidth 422 pour 375).
   Largeur necessaire pour tenir sur UNE rangee, mesuree dans les 6 langues
   (le russe est le pire cas) : 772px sous 900px de viewport, 791px au-dessus.
   D'ou le seuil a 800px — un seuil a 640px laissait une bande 641-790px qui
   debordait encore.
   Au-dela de 992px le champ de recherche desktop reapparait (Menu.css) mais il
   est flexible, il absorbe donc l'espace : pas de debordement.
   On fait passer la nav sur une 2e rangee plutot que de sacrifier la recherche
   ou le selecteur de langue. Le header est en position: relative (Menu.css),
   sa hauteur variable ne decale donc rien.
   Ces regles ne s'appliquent qu'aux pages lingua : Menu-Ling.css n'est charge
   que par elles, meme si .header-inner est une classe partagee. */
@media (max-width: 800px) {
    .header-inner {
        height: auto;
        min-height: 60px;
        flex-wrap: wrap;
        row-gap: 8px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .lingm-nav {
        order: 3;              /* apres logo et actions -> passe a la ligne */
        flex: 1 0 100%;
        margin-left: 0;
    }
    /* Pleine largeur disponible : plus besoin de tronquer le libelle
       (les intitules RU et ES sont les plus longs). */
    .lingm-link {
        justify-content: space-between;
        width: 100%;
    }
    .lingm-link span:first-child { max-width: none; }
    .lingm-drop { left: 0; right: 0; min-width: 0; }
}

@media (max-width: 640px) {
    .lingm-btn-contact { display: none; }
    /* Le libelle du bouton devis varie beaucoup selon la langue (« Devis » 71px
       mais « Presupuesto » 119px) : sans ce resserrage, l'espagnol fait passer
       le bloc d'actions sur une 3e rangee et laisse le logo seul sur sa ligne. */
    .header-actions { gap: 6px; }
    .header-actions .hdr-btn { padding: 0 12px; }
}