/* Widget Google Website Translator (FR→EN), rendu par
   kn_google_translate_widget() dans inc/common_fcn.php.
   Contient l'intégration au top-header + les overrides pour neutraliser
   les injections DOM/CSS agressives de Google (barre en haut de page,
   tooltip de survol, iframe cachée). */

/* ─────────── Neutralisation des injections Google ───────────────────── */

/* Barre "Google Traduit en Anglais" que Google injecte en haut de page une
   fois la traduction active. Sans ces overrides, elle décale tout le layout
   de ~40px, ce qui recouvre le top-header et pousse tout vers la droite.
   ATTENTION : NE PAS cacher `.skiptranslate` tout seul — Google en pose sur
   le wrapper INTERNE du widget lui-même (le dropdown), ça le ferait disparaître.
   On cible spécifiquement l'iframe de la barre. */
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
.goog-te-ftab,
#goog-gt-tt,
.goog-tooltip,
.goog-text-highlight {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
}

/* Google pose `body { top: 40px; position: relative; }` quand actif —
   ces règles décalent tout vers le bas pour laisser place à sa barre.
   On les annule pour recoller au haut de page (la barre étant masquée). */
body,
body.translated-ltr,
body.translated-rtl,
html.translated-ltr body,
html.translated-rtl body {
    top: 0 !important;
    position: static !important;
    min-height: 100vh;
}

/* ─────────── Intégration dans le top-header ─────────────────────────── */

/* On force le layout flex du top-header pour garantir que :
   - le widget de traduction reste à gauche
   - le top_menu (Congrès, Agenda…) est poussé à droite via margin-left: auto,
     même si le widget est encore vide (script Google en cours de chargement ou
     bloqué par un ad-blocker / CSP). Sans ce forçage, un widget à largeur nulle
     laisse le menu remonter à gauche. */
.top-header__inner {
    display: flex !important;
    align-items: center;
    gap: 16px;
}

/* header_and_menu.css applique `width: 100%` sur .top-header__nav en desktop
   (héritage de l'ex-layout avec Polylang inclus DANS le nav). Notre widget
   FR/EN est maintenant HORS du nav → on rend au nav sa largeur naturelle et
   on l'aligne à droite via margin-left: auto (pris en compte par flex parent). */
@media (min-width: 768px) {
    .top-header__nav {
        width: auto !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }
}
.top-header__nav {
    margin-left: auto;
}

.kn-gtranslate {
    display: inline-flex;
    align-items: center;
    min-height: 22px; /* évite un léger reflow quand le widget monte */
    font-size: 0.8125rem;
    line-height: 1;
}

.kn-gtranslate #google_translate_element {
    display: inline-flex;
    align-items: center;
}

/* Layout SIMPLE : Google rend une div .goog-te-gadget-simple contenant une
   icône globe + un <span class="goog-te-menu-value"> avec la langue courante.
   On aplatit tout ça au style du top-header. */
.kn-gtranslate .goog-te-gadget {
    font-family: inherit;
    font-size: inherit;
    color: currentColor;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.kn-gtranslate .goog-te-gadget-simple {
    background: transparent !important;
    border: none !important;
    padding: 4px 8px;
    border-radius: 4px;
    color: currentColor;
    cursor: pointer;
    transition: background-color .15s ease;
}

.kn-gtranslate .goog-te-gadget-simple:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.kn-gtranslate .goog-te-gadget-simple .goog-te-menu-value {
    color: inherit !important;
    text-decoration: none;
    margin: 0 4px;
}

.kn-gtranslate .goog-te-gadget-simple .goog-te-menu-value span {
    color: inherit !important;
    border: none !important;
}

/* Icône globe injectée par Google : image locale de Google, on la laisse
   telle quelle mais on ajuste la taille pour rester compact. */
.kn-gtranslate .goog-te-gadget-simple img {
    display: none; /* On la cache — le libellé "Select Language" suffit */
}

/* Variante quand seul le widget est dans le top-header (pas de top_menu) :
   aligné à gauche (position naturelle du sélecteur langue). */
.top-header--translate-only .top-header__inner {
    justify-content: flex-start;
}