html,
      body {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 600;
        background: #F3F4F6;
        color: #a47864;

      }

      .domain-rotator {
        display: flex;
        justify-content: center;
        align-items: center;

        box-sizing: border-box;

        width: 100%;
        min-height: 90px;

        padding: 5px;

        background: #a47864;
        color: #ffffff !important;
      }

      .domain-text {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2.5rem;
        font-weight: 500;
        line-height: 1.1;

        white-space: nowrap;

        opacity: 0;
        transform: translateY(6px);

        transition:
          opacity 0.45s ease,
          transform 0.45s ease;
      }

      .domain-text.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      header {
        margin-top: 0;
        text-align: center;
      }

      .header-menu {
        padding: 10px 0;

        background-color: blanchedalmond;

        text-align: center;
      }

      .menu-item,
      .menu-link {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2.5rem;
        font-weight: 400;
        line-height: 1.1;

        white-space: nowrap;

        color: #a47864;
      }

      .menu-container {
        display: none;
      }

      option {
        font-weight: 900;
      }

      #frameBas {
        display: block;

        width: 100%;

        border: 0;
      }

      @media (max-width: 900px) {
        .domain-rotator {
          min-height: 70px;
        }
      }

      .icone-commentaires {
    font-size: 3rem;
    text-align: center;
}




          .comment-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.25em;
        text-decoration: none;
      }

      .comment-logo {
        width: 1em;
        height: 1rem;
        font-weight: 400;
        font-size: 2rem;
        color: #a47864;

        vertical-align: -0.1em;
        animation: blinkComment 1s steps(2, start) infinite;
      }

      .comment-link:hover .comment-logo,
      .comment-link:focus .comment-logo {
        transform: scale(1.12);
      }

      @keyframes blinkComment {
        0%,
        45% {
          opacity: 1;
        }

        46%,
        100% {
          opacity: 0.25;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .comment-logo {
          animation: none;
        }
      }



      .comment-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.8em;
    height: 1.4em;
    color: inherit;
    text-decoration: none;
}

.comment-logo-window,
.comment-word {
    position: absolute;
    inset: 0;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-logo-window {
    animation: commentLogoCycle 8s linear infinite;
}

.comment-logo {
    width: 2em;
    height: 2em;
    fill: currentColor;
    animation: blinkComment 0.8s steps(2, start) infinite;
}

.comment-word {
    opacity: 0;
    font-size: 2em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    animation: commentWordCycle 8s linear infinite;
}

@keyframes blinkComment {
    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0.25;
    }
}

@keyframes commentLogoCycle {
    0%,
    62% {
        opacity: 1;
    }

    63%,
    100% {
        opacity: 0;
    }
}

@keyframes commentWordCycle {
    0%,
    62% {
        opacity: 0;
    }

    63%,
    88% {
        opacity: 1;
    }

    89%,
    100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .comment-logo-window,
    .comment-logo,
    .comment-word {
        animation: none;
    }

    .comment-word {
        opacity: 0;
    }

    .comment-logo-window {
        opacity: 1;
    }
}


/* ============================================================
   STABILISATION DU MENU MULTILINGUE
   Empêche les drapeaux / l'iframe de bouger quand le menu change
   ============================================================ */

.header-menu {
    min-height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.menu-container {
    width: 100%;
    justify-content: center;
    align-items: center;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4em 0.7em;
    margin: 0;
    padding: 0;
}

.menu-item,
.menu-link,
.comment-link {
    line-height: 1.15;
}

/* Sur petit écran, on laisse plus d'espace */
@media (max-width: 900px) {
    .header-menu {
        min-height: 210px;
    }
}


/* ============================================================
   STABILISATION CIBLÉE : CHINE / JAPON / POLOGNE
   Ces menus sont ceux qui font encore bouger la page.
   ============================================================ */

.header-menu {
    min-height: 175px;
}

/* Menus plus longs ou plus instables */
#menu-zh .menu-link,
#menu-ja .menu-link,
#menu-pl .menu-link,
#menu-zh .comment-link,
#menu-ja .comment-link,
#menu-pl .comment-link {
    font-size: 2.15rem;
}

/* Réduit un peu l'espace pour éviter une ligne de trop */
#menu-zh .menu,
#menu-ja .menu,
#menu-pl .menu {
    gap: 0.25em 0.45em;
}

/* Le mot Commentaires traduit ne doit pas pousser le menu */
#menu-zh .comment-word,
#menu-ja .comment-word,
#menu-pl .comment-word {
    font-size: 1.45em;
}

/* Réserve un peu plus d'espace sur les petits écrans */
@media (max-width: 900px) {
    .header-menu {
        min-height: 240px;
    }

    #menu-zh .menu-link,
    #menu-ja .menu-link,
    #menu-pl .menu-link,
    #menu-zh .comment-link,
    #menu-ja .comment-link,
    #menu-pl .comment-link {
        font-size: 1.85rem;
    }
}
/* =========================================================
   MOT SURVOLÉ DANS LES MENUS DE FRAMEBAS
   ========================================================= */

#survol-framebas {
    width: 100%;
    min-height: 1.4em;

    margin: 8px auto 12px;

    text-align: center;

    font-size: 2.2rem;
    font-weight: 600;

    color: white;

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.15s ease;
}

#survol-framebas.est-visible {
    opacity: 1;
    visibility: visible;
}
/* ============================================================
   COMMENTAIRES STABLE : bulle dans le menu, mot en étiquette
   Ne pousse plus MUSIQUE sur une autre ligne
   ============================================================ */

.comment-link {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 1.7em !important;
    width: 1.7em !important;
    min-width: 1.7em !important;
    max-width: 1.7em !important;

    height: 1.4em !important;
    overflow: visible !important;
    text-decoration: none !important;
}

.comment-logo-window {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.7em !important;
    height: 1.4em !important;
    animation: commentLogoCycle 8s linear infinite;
}

.comment-logo {
    width: 1.1em !important;
    height: 1.1em !important;
    fill: currentColor !important;
    animation: blinkComment 0.8s steps(2, start) infinite;
}

/* Le mot apparaît sous la bulle, sans prendre de place dans le menu */
.comment-word {
    position: absolute !important;
    top: 1.55em !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    opacity: 0;
    z-index: 20;

    padding: 0.15em 0.45em;
    border-radius: 0.35em;

    background: blanchedalmond;
    color: #a47864;

    font-size: clamp(0.9rem, 1.4vw, 1.25rem) !important;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;

    pointer-events: none;

    animation: commentWordCycle 8s linear infinite;
}

/* Un peu plus bas pour les langues longues */
#menu-de .comment-word,
#menu-pl .comment-word,
#menu-ru .comment-word,
#menu-uk .comment-word,
#menu-el .comment-word,
#menu-pt-BR .comment-word,
#menu-pt-PT .comment-word {
    font-size: clamp(0.8rem, 1.2vw, 1.05rem) !important;
}

/* Sur cellulaire : seulement la bulle, pas le mot */
@media (max-width: 760px) {
    .comment-word {
        display: none !important;
    }

    .comment-logo-window {
        opacity: 1 !important;
    }

    .comment-link {
        flex: 0 0 1.7em !important;
        width: 1.7em !important;
        min-width: 1.7em !important;
        max-width: 1.7em !important;
    }
}

/* ============================================================
   AJUSTEMENT DEMANDÉ — MENU NOIR + NOM DE LANGUE AU SURVOL
   ============================================================ */

/* Menu principal : couleur et taille stables. */
.header-menu .menu-link,
.header-menu .comment-link {
    color: #754633 !important;
    font-weight: 500 !important;
    font-size: 2rem !important;
}

/* Bulle commentaires également en noir */
.header-menu .comment-logo {
    color: #000000 !important;
    fill: currentColor !important;
}

/* Étiquette Commentaires : plus discrète pour ne pas casser le menu */
.header-menu .comment-word {
    color: #000000 !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
}

/* Sélecteur de langue + nom affiché à droite */
.language-selector {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2rem !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#langue-select {
    flex: 0 1 auto !important;
}

/* Nom de la langue survolée / active */
.nom-langue-survolee {
    display: inline-block;
    min-width: 12ch;
    text-align: left;

    font-size: 4em;
    font-weight: 600;
    line-height: 1;

    color: #000000;
    white-space: nowrap;
}

/* Ajustements pour écrans moyens */
@media (max-width: 1100px) {
    .nom-langue-survolee {
        font-size: 3em;
        min-width: 10ch;
    }
}

/* Ajustements pour cellulaire : même fonction, sans débordement */
@media (max-width: 760px) {
    .language-selector {
        gap: 0.7rem !important;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    .nom-langue-survolee {
        font-size: 1.6em;
        min-width: 7ch;
    }

    .header-menu .menu-link,
    .header-menu .comment-link {
        font-size: 1.5rem !important;
    }
}


/* ============================================================
   ORGANISATION STABLE DU HAUT DE PAGE
   1. Domaine en blanc, un seul à la fois, sur une ligne
   2. Sélecteur de langues en dessous
   3. Mot du menu survolé en dessous
   ============================================================ */

body > header:first-of-type {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
}

.domain-rotator {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 4.2rem !important;
    padding: 0.35rem 0.5rem !important;
    box-sizing: border-box !important;
    background: #a47864 !important;
    color: #ffffff !important;
    overflow: hidden !important;
}

.domain-text {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(1.7rem, 3.2vw, 2.7rem) !important;
    font-weight: 500 !important;
    line-height: 1.05 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.domain-text.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.language-selector {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 0 !important;
    min-height: 2.4rem !important;
    box-sizing: border-box !important;
}

.menu-hover-display {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 4.4em !important;
    box-sizing: border-box !important;
}

#langue-nom-survol.nom-menu-survole {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 14ch !important;
    height: 1.05em !important;

    font-size: 4em !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    color: #ffffff !important;
    white-space: nowrap !important;

    opacity: 0;
    visibility: hidden;
    text-transform: uppercase !important;
}

#langue-nom-survol.nom-menu-survole.est-visible {
    opacity: 1;
    visibility: visible;
}

/* Header 2 : mêmes lettres avant et pendant le survol.
   Pas de réduction de taille, ni de retour au noir. */
.header-menu {
    min-height: 72px !important;
    padding: 4px 0 !important;
}

.header-menu .menu {
    gap: 0.28em 0.55em !important;
}

.header-menu .menu-link,
.header-menu .comment-link {
    color: #754633 !important;
    -webkit-text-fill-color: #754633 !important;
    font-size: 2rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    transform: none !important;
}

.header-menu .menu-link:is(:hover, :focus, :focus-visible),
.header-menu .comment-link:is(:hover, :focus, :focus-visible) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: #65463a !important;
    font-size: 2rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    transform: none !important;
}

.header-menu .menu a:is(:hover, :focus, :focus-visible) :is(span, svg, path) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    fill: currentColor !important;
}

.header-menu .comment-logo {
    color: #000000 !important;
    fill: currentColor !important;
}

@media (max-width: 760px) {
    .domain-rotator {
        min-height: 3.3rem !important;
    }

    .domain-text {
        font-size: clamp(1.15rem, 6vw, 1.7rem) !important;
    }

    .menu-hover-display {
        min-height: 2.8em !important;
    }

    #langue-nom-survol.nom-menu-survole {
        min-width: 10ch !important;
        font-size: 1.8em !important;
    }

    .header-menu {
        min-height: 62px !important;
    }

    .header-menu .menu-link,
    .header-menu .comment-link,
    .header-menu .menu-link:is(:hover, :focus, :focus-visible),
    .header-menu .comment-link:is(:hover, :focus, :focus-visible) {
        font-size: 1.5rem !important;
        font-weight: 500 !important;
    }
}