/* ============================================================
   HOMIO — nav.css : en-tête commun à toutes les pages
   Barre principale (logo, À propos, Avis, Prendre rendez-vous, langue)
   + bande des 3 services + menu burger à deux niveaux.
   Chargé APRÈS la feuille de la page (styles.css, inspection.css, alya.css).
   ============================================================ */
:root { --nav-h: 68px; --service-bar-h: 58px; }

/* En-tête fixe : la barre principale et la bande des services défilent ensemble */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.site-header > nav { position: relative; }
main section[id] { scroll-margin-top: 0; }

/* Bande des services, sous la barre principale, visible à toutes les largeurs.
   Ordre : État des lieux | Gestion immobilière | Service Alya. Grille 1fr 1fr 1fr :
   Gestion reste au centre exact de la page (en RTL, start/end s'inversent). */
body { padding-top: var(--service-bar-h); }
html { scroll-padding-top: calc(var(--nav-h) + var(--service-bar-h) + 1rem); }
.service-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; column-gap: 0.75rem; height: var(--service-bar-h); padding: 0 5vw; background: rgba(241,246,243,0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(94,155,132,0.14); }
.service-bar a { display: flex; align-items: center; justify-content: center; padding: 0.55rem 1.4rem; border-radius: 999px; background: rgba(94,155,132,0.08); border: 1px solid rgba(94,155,132,0.25); text-decoration: none; font-family: inherit; font-size: 1.08rem; font-weight: 600; color: var(--green-dark); white-space: nowrap; transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.service-bar a:nth-child(1) { justify-self: start; }
.service-bar a:nth-child(2) { justify-self: center; }
.service-bar a:nth-child(3) { justify-self: end; }
@media (hover: hover) {
  .service-bar a:not([aria-current="page"]):hover { color: var(--green-deep); background: rgba(94,155,132,0.18); border-color: var(--green-mid); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(28,61,51,0.12); }
}
.service-bar a[aria-current="page"] { color: white; background: var(--green-dark); border-color: var(--green-dark); cursor: default; }
.service-bar a:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 3px; }
.service-bar .svc-short { display: none; }

/* Barre principale : 3 entrées, visibles dès 768 px ; burger en dessous */
@media (min-width: 768px) {
  nav ul { display: flex; }
  .hamburger { display: none; }
  .site-header .mobile-menu.open { display: none; }
}
/* Tablette : onglets un peu plus serrés pour tenir sur une ligne (libellés EN les plus longs) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .service-bar { column-gap: 0.25rem; }
  .service-bar a { padding: 0.55rem 1rem; }
}
@media (max-width: 767.98px) {
  nav ul { display: none; }
  .hamburger { display: flex; }
  /* Bande mobile : 3 boutons égaux, libellés courts sur une ligne.
     Padding vertical 4px : 52 px de bande - 2 x 4 px = 44 px de zone tactile */
  :root { --service-bar-h: 52px; }
  .service-bar { gap: 6px; padding: 4px 3vw; }
  .service-bar a,
  .service-bar a:nth-child(n) { justify-self: stretch; min-width: 0; min-height: 44px; padding: 0 0.4rem; font-size: 0.9rem; text-align: center; overflow: hidden; text-overflow: ellipsis; }
  .service-bar a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .service-bar .svc-long { display: none; }
  .service-bar .svc-short { display: block; }
}

/* Menu burger : dans l'en-tête, sous la barre principale et la bande des services */
.site-header .mobile-menu { position: static; max-height: calc(100vh - var(--nav-h) - var(--service-bar-h)); max-height: calc(100dvh - var(--nav-h) - var(--service-bar-h)); overflow-y: auto; gap: 0.9rem; }
.site-header .mobile-menu > a:not(:last-child) { display: flex; align-items: center; min-height: 44px; }
.mobile-group { display: flex; flex-direction: column; }
.mobile-group-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-mid); margin-bottom: 0.2rem; }
.mobile-menu .mobile-group a,
.mobile-menu .mobile-group a:last-child { background: none; color: var(--text); text-align: start; border-radius: 0; margin: 0; font-weight: 500; display: flex; align-items: center; min-height: 44px; padding: 0.55rem 0; padding-inline-start: 0.9rem; border-bottom: 1px solid rgba(191,215,206,0.3); border-inline-start: 2px solid rgba(191,215,206,0.5); }
.mobile-menu .mobile-group a[aria-current="page"] { color: var(--green-deep); font-weight: 600; border-inline-start-color: var(--green-mid); }