/* ============================================================
   TOUITIGROUP — nav.css
   Navigation unifiée (barre fixe + menu déroulant « Services »
   + menu mobile). Chargée par TOUTES les pages sauf l'accueil
   index.html (nav inline). Dépend seulement de tokens.css :
   fonctionne aussi bien avec base.css (nouveau système) qu'avec
   identity.css (ancien système).
   Ordre des <link> : … tokens.css → (base → service) → nav.css → footer.css

   <header class="tg-nav" id="tgNav">
     <div class="tg-nav-inner">
       <a class="tg-nav-logo" href="/"><img src="/images/logo-tg.png" alt="TOUITIGROUP" width="900" height="672"></a>
       <nav aria-label="Navigation principale">
         <ul class="tg-nav-links">
           <li class="tg-nav-item tg-nav-item--sub">
             <a class="tg-nav-link" href="/fr/services/">Services</a>
             <button class="tg-nav-sub-toggle" type="button" aria-expanded="false" aria-controls="tgNavSub" aria-label="…">▾</button>
             <ul class="tg-nav-sub" id="tgNavSub"> <li><a class="tg-nav-sub-link" href="…">…</a></li> … </ul>
           </li>
           <li class="tg-nav-item"><a class="tg-nav-link" href="…">…</a></li> …
         </ul>
       </nav>
       <div class="tg-nav-actions">
         <div class="tg-nav-lang">…</div>
         <a class="tg-nav-cta" href="https://wa.me/…">Demander un devis</a>
         <button class="tg-nav-toggle" type="button" aria-expanded="false" aria-controls="tgMobileMenu" aria-label="…">…</button>
       </div>
     </div>
   </header>
   <div class="tg-mobile-menu" id="tgMobileMenu">
     <div class="tg-mobile-group">
       <div class="tg-mobile-group-head"><a href="/fr/services/">Services</a><button class="tg-mobile-sub-toggle" …></button></div>
       <ul class="tg-mobile-sub" id="tgMobileSub"> … </ul>
     </div>
     <a href="…">…</a> …
     <a class="tg-nav-cta tg-nav-cta--block" href="…">Demander un devis</a>
   </div>

   États posés par le JS (assets/js/nav.js) :
     html.js                       JS actif (sinon : ouverture du déroulant au survol / focus en CSS pur)
     .tg-nav.is-solid              après ~10px de scroll
     .tg-nav.is-menu-open          menu mobile ouvert (la nav passe au-dessus du menu)
     .tg-nav-item--sub.is-open     déroulant « Services » ouvert
     .tg-mobile-menu.is-open       menu mobile ouvert
     .tg-mobile-group.is-open      sous-liste « Services » du menu mobile ouverte
     body.tg-no-scroll             bloque le défilement pendant l'ouverture
   ============================================================ */

/* ----- Barre ----- */
.tg-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--tg-z-nav);
  height: var(--tg-nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--tg-duration) var(--tg-ease),
    border-color var(--tg-duration) var(--tg-ease),
    backdrop-filter var(--tg-duration) var(--tg-ease);
}
.tg-nav.is-solid,
.tg-nav.is-menu-open {
  background: var(--tg-color-overlay-strong);
  -webkit-backdrop-filter: blur(var(--tg-blur));
  backdrop-filter: blur(var(--tg-blur));
  border-bottom-color: var(--tg-color-border);
}
.tg-nav.is-menu-open { z-index: calc(var(--tg-z-overlay) + 1); }

.tg-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tg-space-lg);
  width: 100%;
  max-width: var(--tg-container-max);
  margin-inline: auto;
  padding-inline: var(--tg-container-pad);
}

.tg-nav-logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  border-radius: var(--tg-radius-sm);
}
.tg-nav-logo img {
  display: block;
  width: auto;
  height: calc(var(--tg-nav-h) - var(--tg-space-lg)); /* 48px */
}

/* Boutons de la nav : remis à zéro ici (les pages de l'ancien système ne chargent pas base.css).
   :where() = spécificité minimale, les classes ci-dessous l'emportent toujours. */
:where(.tg-nav, .tg-mobile-menu) button {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.tg-nav a:focus-visible,
.tg-nav button:focus-visible,
.tg-mobile-menu a:focus-visible,
.tg-mobile-menu button:focus-visible {
  outline: 2px solid var(--tg-focus-color, var(--tg-color-gold));
  outline-offset: 2px;
}

/* ----- Liens : masqués sur mobile, visibles à partir de xl (7 liens = besoin de place) ----- */
.tg-nav-links {
  display: none;
  align-items: center;
  gap: var(--tg-space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tg-nav-item { position: relative; }
.tg-nav-item--sub {
  display: flex;
  align-items: center;
  gap: 2px;
}

.tg-nav-link {
  position: relative;
  display: inline-block;
  padding-block: var(--tg-space-sm);
  font-size: var(--tg-text-sm);
  font-weight: var(--tg-weight-medium);
  line-height: 1.5;
  color: var(--tg-color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--tg-duration) var(--tg-ease);
}
.tg-nav-link::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: var(--tg-space-xs);
  width: 100%;
  height: 1px;
  background: var(--tg-color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tg-duration) var(--tg-ease);
}
[dir="rtl"] .tg-nav-link::after { transform-origin: right; }
.tg-nav-link:hover,
.tg-nav-link.is-active,
.tg-nav-link[aria-current="page"] { color: var(--tg-color-gold); }
.tg-nav-link:hover::after,
.tg-nav-link.is-active::after,
.tg-nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* ----- Déroulant « Services » (desktop) ----- */
.tg-nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--tg-radius-sm);
  color: var(--tg-color-text-muted);
  transition: color var(--tg-duration) var(--tg-ease);
}
.tg-nav-sub-toggle svg,
.tg-mobile-sub-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform var(--tg-duration) var(--tg-ease);
}
.tg-nav-item--sub:hover .tg-nav-sub-toggle,
.tg-nav-sub-toggle[aria-expanded="true"] { color: var(--tg-color-gold); }
.tg-nav-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.tg-nav-sub {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: calc(-1 * var(--tg-space-md));
  z-index: 1;
  min-width: 16rem;
  margin: 0;
  padding: var(--tg-space-sm) 0;
  list-style: none;
  background: var(--tg-color-dark);
  border: 1px solid var(--tg-color-border);
  border-top: 2px solid var(--tg-color-gold);
  border-radius: 0 0 var(--tg-radius-sm) var(--tg-radius-sm);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  translate: 0 var(--tg-space-sm);
  transition:
    opacity var(--tg-duration) var(--tg-ease),
    translate var(--tg-duration) var(--tg-ease),
    visibility 0s linear var(--tg-duration);
}
/* Ouverture : état JS, ou survol / focus quand le JS est absent */
.tg-nav-item--sub.is-open > .tg-nav-sub,
html:not(.js) .tg-nav-item--sub:hover > .tg-nav-sub,
html:not(.js) .tg-nav-item--sub:focus-within > .tg-nav-sub {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition:
    opacity var(--tg-duration) var(--tg-ease),
    translate var(--tg-duration) var(--tg-ease),
    visibility 0s;
}
.tg-nav-sub-link {
  display: block;
  padding: 0.625rem var(--tg-space-lg);
  font-size: var(--tg-text-sm);
  font-weight: var(--tg-weight-medium);
  line-height: 1.4;
  color: var(--tg-color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  border-inline-start: 2px solid transparent;
  transition:
    color var(--tg-duration) var(--tg-ease),
    background-color var(--tg-duration) var(--tg-ease),
    border-color var(--tg-duration) var(--tg-ease);
}
.tg-nav-sub-link:hover,
.tg-nav-sub-link:focus-visible,
.tg-nav-sub-link[aria-current="page"] {
  color: var(--tg-color-gold);
  background: var(--tg-color-gold-light);
  border-inline-start-color: var(--tg-color-gold);
}

/* ----- Méga-menu (Façades / Finition intérieure) : icône + titre + description ----- */
.tg-nav-mega {
  min-width: 22rem;
  padding: var(--tg-space-sm);
}
.tg-nav-mega .tg-nav-sub-link {
  display: flex;
  align-items: center;
  gap: var(--tg-space-md);
  padding: 0.75rem var(--tg-space-md);
  white-space: normal;
  border-radius: var(--tg-radius-sm);
}
.tg-mega-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--tg-color-gold);
  border: 1px solid var(--tg-color-border-strong);
  border-radius: var(--tg-radius-sm);
}
.tg-mega-icon svg { width: 1.25rem; height: 1.25rem; }
.tg-mega-text { display: flex; flex-direction: column; gap: 2px; }
.tg-mega-title {
  font-size: var(--tg-text-sm);
  font-weight: var(--tg-weight-semibold);
  color: var(--tg-color-text);
  transition: color var(--tg-duration) var(--tg-ease);
}
.tg-mega-desc {
  font-size: var(--tg-text-xs);
  font-weight: var(--tg-weight-regular);
  line-height: 1.4;
  color: var(--tg-color-text-subtle);
}
.tg-nav-mega .tg-nav-sub-link:hover .tg-mega-title,
.tg-nav-mega .tg-nav-sub-link:focus-visible .tg-mega-title,
.tg-nav-mega .tg-nav-sub-link[aria-current="page"] .tg-mega-title { color: var(--tg-color-gold); }

/* ----- Actions (langue, devis, hamburger) ----- */
.tg-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--tg-space-md);
}

/* Sélecteur de langue : masqué sur très petit écran (présent dans le menu mobile) */
.tg-nav-lang {
  display: none;
  align-items: center;
  gap: var(--tg-space-xs);
  font-size: var(--tg-text-xs);
  font-weight: var(--tg-weight-semibold);
  letter-spacing: var(--tg-tracking-wide);
  color: var(--tg-color-text-subtle);
}
.tg-nav-lang a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tg-control-h);
  padding-inline: var(--tg-space-xs);
  color: var(--tg-color-text-muted);
  text-decoration: none;
  transition: color var(--tg-duration) var(--tg-ease);
}
.tg-nav-lang a:hover,
.tg-nav-lang a[aria-current="true"] { color: var(--tg-color-gold); }

/* Bouton « Demander un devis » (or) — autonome : pas de dépendance à .tg-btn */
.tg-nav-cta {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: var(--tg-control-h);
  padding: var(--tg-space-sm) var(--tg-space-lg);
  font-size: var(--tg-text-sm);
  font-weight: var(--tg-weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tg-tracking-wide);
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  color: var(--tg-color-black);
  background: var(--tg-color-gold-gradient);
  border-radius: var(--tg-radius-sm);
  transition:
    box-shadow var(--tg-duration) var(--tg-ease),
    translate var(--tg-duration) var(--tg-ease);
}
.tg-nav-cta:hover {
  box-shadow: var(--tg-shadow-gold);
  translate: 0 calc(-0.5 * var(--tg-space-xs));
}
:lang(ar) .tg-nav-cta { font-size: var(--tg-text-base); letter-spacing: 0; }

/* Hamburger */
.tg-nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tg-space-xs);
  width: var(--tg-control-h);
  height: var(--tg-control-h);
  border-radius: var(--tg-radius-sm);
}
.tg-nav-toggle span {
  display: block;
  width: var(--tg-space-lg);
  height: 2px;
  background: var(--tg-color-gold);
  border-radius: 1px;
  transition: transform var(--tg-duration) var(--tg-ease), opacity var(--tg-duration);
}
/* écart 4px + barre 2px = décalage de 6px pour former la croix */
.tg-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(calc(var(--tg-space-xs) + 2px)) rotate(45deg); }
.tg-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tg-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(calc(-1 * (var(--tg-space-xs) + 2px))) rotate(-45deg); }

/* ----- Menu mobile : panneau qui glisse depuis le bord de fin (droite en LTR, gauche en RTL) ----- */
.tg-mobile-menu {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--tg-z-overlay);
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-xs);
  width: min(100%, 24rem);
  padding: calc(var(--tg-nav-h) + var(--tg-space-lg)) var(--tg-container-pad) var(--tg-space-xl);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--tg-color-dark);
  border-inline-start: 1px solid var(--tg-color-border);
  translate: 100% 0;
  visibility: hidden;
  transition:
    translate var(--tg-duration) var(--tg-ease),
    visibility 0s linear var(--tg-duration);
}
[dir="rtl"] .tg-mobile-menu { translate: -100% 0; }
.tg-mobile-menu.is-open {
  translate: 0 0;
  visibility: visible;
  transition: translate var(--tg-duration) var(--tg-ease), visibility 0s;
  /* voile sur le reste de la page (non cliquable : le JS ferme au clic extérieur) */
  box-shadow: 0 0 0 100vmax var(--tg-color-overlay);
}

.tg-mobile-menu a:not(.tg-nav-cta) {
  display: flex;
  align-items: center;
  min-height: var(--tg-control-h);
  padding-inline: var(--tg-space-sm);
  font-size: var(--tg-text-lg);
  font-weight: var(--tg-weight-medium);
  color: var(--tg-color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--tg-color-border);
  transition: color var(--tg-duration) var(--tg-ease), background-color var(--tg-duration);
}
.tg-mobile-menu a:not(.tg-nav-cta):hover,
.tg-mobile-menu a.is-active,
.tg-mobile-menu a[aria-current="page"] {
  color: var(--tg-color-gold);
  background: var(--tg-color-gold-light);
}

/* Groupe « Services » : lien + bouton qui déplie la liste verticale des 6 services */
.tg-mobile-group-head {
  display: flex;
  align-items: stretch;
}
.tg-mobile-group-head a { flex: 1; }
.tg-mobile-sub-toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--tg-control-h);
  color: var(--tg-color-gold);
  border-bottom: 1px solid var(--tg-color-border);
}
.tg-mobile-sub-toggle svg { width: 14px; height: 14px; }
.tg-mobile-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.tg-mobile-sub {
  display: none;
  margin: 0;
  padding: var(--tg-space-xs) 0 var(--tg-space-sm);
  list-style: none;
  border-bottom: 1px solid var(--tg-color-border);
}
.tg-mobile-group.is-open .tg-mobile-sub { display: block; }
.tg-mobile-menu .tg-mobile-sub a:not(.tg-nav-cta) {
  min-height: 2.75rem;
  padding-inline-start: var(--tg-space-lg);
  font-size: var(--tg-text-base);
  color: var(--tg-color-text-muted);
  border-bottom: 0;
}

.tg-nav-cta--block {
  display: flex;
  width: 100%;
  margin-top: var(--tg-space-lg);
}

/* Bloque le défilement de la page quand le menu est ouvert (classe posée par le JS sur <body>) */
.tg-no-scroll { overflow: hidden; }

@media (min-width: 640px) {
  .tg-nav-lang { display: flex; }
}
@media (min-width: 768px) {
  .tg-nav-cta { display: inline-flex; }
  .tg-nav-cta--block { display: flex; }
}
@media (min-width: 1280px) {
  .tg-nav-links { display: flex; }
  .tg-nav-toggle,
  .tg-mobile-menu { display: none; }
}
/* 8 entrées + 2 menus : on resserre les écarts jusqu'à 1440px */
@media (min-width: 1280px) and (max-width: 1439px) {
  .tg-nav-inner,
  .tg-nav-links { gap: var(--tg-space-md); }
  .tg-nav-actions { gap: var(--tg-space-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .tg-nav-sub,
  .tg-mobile-menu,
  .tg-nav-sub-toggle svg,
  .tg-mobile-sub-toggle svg { transition: none; }
}