/* art-felx.com — Stabilisation ciblee des trois bandeaux (octobre 2026).
   A charger APRES style-main.css, index-main.css et lecture.css.
   Ne modifie ni la selection de langue ni le lecteur vocal.
*/

/* 1. Bandeau superieur : domaines -> langues -> menu miroir -> libelle. */
html body > #header-langues {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
html body > #header-langues > .domain-rotator {
  order: -2;
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 90px !important;
  height: auto !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  background: #a47864 !important;
  color: #fff !important;
}
html body #header-langues #domainText {
  max-width: 100% !important;
  color: #fff !important;
}
html body > #header-langues > .language-selector { order: -1; }
html body > #header-langues > #menu-haut {
  order: 0;
  box-sizing: border-box !important; /* width + padding restent dans l'ecran */
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
html body > #header-langues > .menu-hover-display { order: 1; }
html body #header-langues #menu-haut .menu {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  max-width: 100% !important;
}

/* 2. Bandeau gris : hauteur naturelle. Les commandes et la voix restent intactes. */
html body > #af-lecture-header.af-lecture-header {
  position: relative !important;
  inset: auto !important;
  clear: both !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* 3. Menu inferieur : 100 px au minimum, sans couper les liens au zoom.
      Ne PAS donner display:flex aux .menu-container : script.js pilote leur affichage. */
html body > #header-navigation.header-menu {
  position: relative !important;
  inset: auto !important;
  clear: both !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100px !important;
  max-height: none !important;
  padding: 10px !important;
  overflow: visible !important;
  justify-content: center !important;
  align-items: center !important;
}
html body #header-navigation > .menu-container {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
html body #header-navigation > .menu-container > .menu {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 4. Blanc au survol ET au clavier, dans les deux menus seulement.
      Specificite superieure aux anciennes regles noires, meme !important. */
html body #header-langues #menu-haut .menu a:is(.menu-link,.comment-link):is(:hover,:focus-visible),
html body #header-navigation.header-menu .menu-container .menu a:is(.menu-link,.comment-link):is(:hover,:focus-visible) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background-color: #50372f !important;
  text-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
}
html body #header-langues #menu-haut .menu a:is(:hover,:focus-visible) :is(svg,path,span),
html body #header-navigation.header-menu .menu-container .menu a:is(:hover,:focus-visible) :is(svg,path,span) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  fill: currentColor !important;
}

/* 5. Sur telephone, les libelles longs (notamment en polonais) ne
      doivent pas elargir artificiellement la page. */
@media (max-width: 600px) {
  html body #header-langues #menu-haut .menu .menu-item {
    max-width: 100% !important;
    white-space: normal !important;
  }
  html body #header-langues #menu-haut .menu a:is(.menu-link,.comment-link) {
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: center !important;
  }
}

/* 6. Fort grossissement (200 % et plus) : eviter qu'une largeur minimale
      du selecteur ou du volet vocal force un defilement horizontal. */
@media (max-width: 650px) {
  html body #header-langues #langue-select {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  html body #header-langues #af-lecture-menu.af-menu-vocal {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Les libelles des rubriques (y compris les mentions legales en polonais)
   peuvent passer a la ligne en cas de tres fort zoom. */
@media (max-width: 650px) {
  html body #header-navigation .menu-container .menu-item {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  html body #header-navigation .menu-container .menu .menu-link {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}