/* univers3 (30/10/2026) : menu principal en 3 univers - Animaux à Fibre, Animaux de Compagnie, Chats Libres - puis Tarifs.
   Menu rendu par includes/u3_nav.php (pages PHP, api/u3-nav.php) et écrit dans les pages HTML statiques. */

/* Intertitres et séparateurs dans les sous-menus */
.fh-header.fh-idh .fh-dropdown .fh-u3-dd-group { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #5A6650; padding: 10px 14px 2px; list-style: none; }
.fh-header.fh-idh .fh-dropdown .fh-u3-dd-sep { height: 1px; background: #D5DCC8; margin: 6px 10px; list-style: none; }
.fh-header.fh-idh .fh-u3-col { list-style: none; }
.fh-header.fh-idh .fh-u3-col > ul { list-style: none; margin: 0; padding: 0; }

/* « Animaux à Fibre » (beaucoup d'entrées) : 3 colonnes sur grand écran */
@media (min-width: 1160px) {
  .fh-header.fh-idh .fh-u3-mega > .fh-dropdown { display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); column-gap: 8px; min-width: 640px; }
}
/* Menu replié (fond vert foncé) : intertitres lisibles */
@media (max-width: 900px) {
  /* menu-clair1 : le menu replié a un fond crème (#F6F3EC) : intertitres en vert foncé lisible (ils étaient presque invisibles) */
  .fh-header.fh-idh .fh-dropdown .fh-u3-dd-group { color: #5A6650; padding-left: 0; }
  .fh-header.fh-idh .fh-dropdown .fh-u3-dd-sep { background: #D5DCC8; margin-left: 0; }
}

/* Libellé sur une ligne hors barre bureau (menu replié) */
.fh-header .fh-u3-two { display: none; }

/* Barre bureau : 19 px gras gardé ; « Animaux » / « à Fibre » et « Animaux » / « de Compagnie » sur deux lignes centrées,
   flèche à côté, centrée verticalement. */
@media (min-width: 901px) {
  .fh-header.fh-idh.fh-header--u3 .fh-nav-list > li[data-nav] > button.fh-nav-btn { display: inline-flex; align-items: center; gap: 4px; padding-top: 1px; padding-bottom: 1px; box-sizing: border-box; min-height: calc(1.2em + 18px); }
  .fh-header.fh-idh .fh-nav-list > li > button > .fh-u3-one { display: none; }
  .fh-header.fh-idh .fh-nav-list > li > button > .fh-u3-two { display: inline-flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.05; white-space: nowrap; }
  .fh-header.fh-idh.fh-header--u3in { --hdr1-colgap: 12px; }
  .fh-header.fh-idh.fh-header--u3 .fh-nav-list > li > a,
  .fh-header.fh-idh.fh-header--u3 .fh-nav-list > li > button.fh-nav-btn { padding-left: 9px; padding-right: 9px; }
}

/* menu-clair1 (31/10/2026) : chaque univers du menu = un vrai lien vers sa page principale (a.fh-u3-top)
   + un bouton flèche séparé (button.fh-nav-btn.fh-u3-chev) qui ouvre le sous-menu.
   Ordinateur : survol = sous-menu comme avant, clic sur le nom = page principale.
   Smartphone : le nom mène à la page, le bouton carré à droite ouvre / ferme le sous-menu. */
html body .fh-header.fh-idh .fh-nav-list > li.fh-u3-split { display: flex; align-items: center; }
html body .fh-header.fh-idh .fh-nav-list > li.fh-u3-split > button.fh-u3-chev { justify-content: center; }
html body .fh-header.fh-idh .fh-nav-list > li.fh-u3-split > button.fh-u3-chev .fh-caret {
  display: inline-block; font-size: 12px; opacity: .95; margin: 0; transform: none; transition: transform .15s;
}
html body .fh-header.fh-idh .fh-nav-list > li.fh-u3-split.open > button.fh-u3-chev .fh-caret { transform: rotate(180deg); }
@media (min-width: 901px) {
  html body .fh-header.fh-idh .fh-nav-list > li.fh-u3-split > a.fh-u3-top { display: inline-flex; align-items: center; padding-top: 1px; padding-bottom: 1px; box-sizing: border-box; min-height: calc(1.2em + 18px); padding-right: 2px; }
  .fh-header.fh-idh .fh-nav-list > li > a.fh-u3-top > .fh-u3-one { display: none; }
  .fh-header.fh-idh .fh-nav-list > li > a.fh-u3-top > .fh-u3-two { display: inline-flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.05; white-space: nowrap; }
  html body .fh-header.fh-idh .fh-nav-list > li.fh-u3-split > button.fh-u3-chev { min-height: 0; padding: 6px 7px 6px 3px; border-bottom-color: transparent; }
  html body .fh-header.fh-idh .fh-nav-list > li.fh-u3-split:hover > button.fh-u3-chev .fh-caret,
  html body .fh-header.fh-idh .fh-nav-list > li.fh-u3-split:focus-within > button.fh-u3-chev .fh-caret { transform: rotate(180deg); }
  html body .fh-header.fh-idh .fh-nav-list > li.fh-u3-split.is-active > button.fh-u3-chev { border-bottom-color: transparent; }
}
@media (max-width: 900px) {
  html body .fh-header.fh-idh .fh-nav-list > li.fh-u3-split { flex-wrap: wrap; border-bottom: 1px solid #E2E6DC; }
  html body .fh-header.fh-idh .fh-nav-list > li.fh-u3-split > a.fh-u3-top { flex: 1 1 0; width: auto; min-width: 0; justify-content: flex-start; border-bottom: 0; }
  html body .fh-header.fh-idh .fh-nav-list > li.fh-u3-split > button.fh-u3-chev {
    flex: 0 0 44px; width: 44px; height: 40px; padding: 0; margin: 4px 0 4px 8px;
    border: 1px solid #B8C2A8; border-radius: 10px; background: #fff; color: #2C3820;
  }
  html body .fh-header.fh-idh .fh-nav-list > li.fh-u3-split.open > button.fh-u3-chev { background: #E4EBD6; border-color: #5C7640; }
  html body .fh-header.fh-idh .fh-nav-list > li.fh-u3-split > button.fh-u3-chev .fh-caret { font-size: 16px; }
  html body .fh-header.fh-idh .fh-nav-list > li.fh-u3-split > .fh-dropdown { flex: 0 0 100%; width: 100%; box-sizing: border-box; }
  html body .fh-header.fh-idh .fh-nav-list > li.fh-u3-split.is-active > a.fh-u3-top { border-bottom: 0; text-decoration: underline; text-decoration-color: #5C7640; text-decoration-thickness: 2px; text-underline-offset: 4px; }
}