/* Bandeau « traduction automatique » — chargé uniquement par les pages générées.

   Posé en bas, pas en haut : en haut il pousserait le contenu et entrerait en concurrence avec la
   barre utilitaire et le menu, alors que c'est une information de second plan. En bas il est vu
   sans rien déplacer, et il se ferme d'un geste. */

.mt-notice {
    position: fixed;
    inset-inline: 16px;
    bottom: 16px;
    margin-inline: auto;
    max-width: 640px;
    z-index: 1200;              /* au-dessus du header collant (1000) et du menu de langue (1001) */

    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;

    background-color: rgba(28, 31, 54, 0.97);
    color: var(--text-secondary, #e0e0e0);
    border: 1px solid rgba(56, 177, 237, 0.28);
    border-radius: var(--radius, 12px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);

    font-size: 0.88rem;
    line-height: 1.45;

    /* État de départ de l'animation d'entrée : la classe .mt-notice-in est posée au tick suivant. */
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .22s ease, transform .22s ease;
}

.mt-notice-in {
    opacity: 1;
    transform: translateY(0);
}

/* Un globe, le même dessin que le sélecteur de langue : c'est le même sujet, ça doit se
   reconnaître. En masque plutôt qu'en image de fond, pour suivre la couleur du texte. */
.mt-notice-icon {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex: none;
    background-color: var(--primary-color, #38b1ed);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 2.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38zm2.57-6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 2.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38zm2.57-6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mt-notice-text {
    flex: 1 1 auto;
}

.mt-notice-link {
    flex: none;
    color: var(--primary-color, #38b1ed);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
    /* Le lien pointe vers une page anglaise : son libellé est écrit dans la langue de la page, mais
       il reste isolé du sens de lecture ambiant pour les langues RTL. */
    unicode-bidi: isolate;
}

.mt-notice-close {
    flex: none;
    background: none;
    border: 0;
    padding: 0 2px;
    margin-inline-start: 2px;
    color: var(--text-muted, #9ca3af);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: color .2s;
}

.mt-notice-close:hover,
.mt-notice-close:focus-visible {
    color: var(--text-light, #fff);
}

/* Sur petit écran le message passe au-dessus du lien plutôt que de se comprimer sur une ligne :
   une phrase de trois mots par ligne est illisible. */
@media (max-width: 560px) {
    .mt-notice {
        flex-wrap: wrap;
        font-size: 0.84rem;
        inset-inline: 10px;
        bottom: 10px;
    }

    .mt-notice-text {
        flex: 1 1 100%;
        order: 2;
    }

    .mt-notice-link {
        order: 3;
    }

    .mt-notice-close {
        margin-inline-start: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mt-notice {
        transition: none;
    }
}