/*
 * FICHIER   : assets/css/nav.css
 * RÔLE      : Styles de la navigation principale, du menu mobile
 *             et du toggle de thème.
 *
 * OÙ MODIFIER QUOI
 *   Hauteur / padding de la nav desktop   → nav { padding }
 *   Couleur fond nav au scroll            → nav.scrolled { background }
 *   Liens de navigation                   → nav a
 *   Bouton "Devis Gratuit" (CTA nav)      → .nav-cta
 *   Toggle thème (bouton soleil/lune)     → .theme-toggle
 *   Menu mobile (panneau plein écran)     → .mobile-menu
 *   Hamburger (icône 3 traits)            → .hamburger
 *   Animation ouverture menu mobile       → menu.js toggleMenu()
 *
 * DÉPENDANCES
 *   base.css  → variables --g4, --g5, --g1, --muted, --text
 *   menu.js   → gère l'ouverture/fermeture du menu mobile
 *   theme.js  → gère le toggle clair/sombre
 */


/* ══════════════════════════════════════════════════════════════
   NAVIGATION PRINCIPALE
══════════════════════════════════════════════════════════════ */
nav {
  position:        fixed;
  top:             0;
  width:           100%;
  z-index:         900;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.6rem 5vw;
  transition:      all .4s;
}

/* État au scroll (fond foncé + flou)
   Classe ajoutée par assets/js/app.js sur scroll > 60px */
nav.scrolled {
  background:      rgba(6,13,10,.97);
  backdrop-filter: blur(20px);
  padding:         1rem 5vw;
  border-bottom:   1px solid rgba(57,181,74,.15);
}

/* ── Logo ─────────────────────────────────────────────────── */
.nav-logo {
  display:     flex;
  align-items: center;
  gap:         .8rem;
  text-decoration: none;
}
.nav-logo-svg {
  height:    36px;
  width:     auto;
  max-width: 160px;
}

/* ── Liens desktop ────────────────────────────────────────── */
nav ul {
  list-style:  none;
  display:     flex;
  gap:         2.5rem;
  align-items: center;
}
nav a {
  font-size:      .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.7);
  text-decoration: none;
  font-weight:    400;
  transition:     color .2s;
}
nav a:hover { color: var(--g4); }

/* ── Bouton CTA nav "Devis Gratuit" ──────────────────────── */
.nav-cta {
  background:     var(--g4)  !important;
  color:          white      !important;
  padding:        .6rem 1.7rem;
  font-weight:    600        !important;
  transition:     background .2s, transform .2s !important;
}
.nav-cta:hover {
  background:  var(--g5)            !important;
  transform:   translateY(-1px)     !important;
  color:       white                !important;
}

/* ── Toggle thème desktop ─────────────────────────────────── */
.theme-toggle {
  background:    rgba(57,181,74,.1);
  border:        1px solid rgba(57,181,74,.2);
  border-radius: 50%;
  width:         38px;
  height:        38px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  transition:    all .3s;
  margin-left:   1.5rem;
}
.theme-toggle:hover {
  background:   rgba(57,181,74,.2);
  border-color: var(--g4);
}
.theme-toggle svg {
  width:        18px;
  height:       18px;
  stroke:       var(--g4);
  fill:         none;
  stroke-width: 1.5;
  stroke-linecap:  round;
  stroke-linejoin: round;
  transition:   transform .3s;
}
body.light-mode .theme-toggle svg { transform: rotate(180deg); }


/* ══════════════════════════════════════════════════════════════
   HAMBURGER (icône mobile)
   Visible uniquement sous 768px (voir responsive.css)
   Animation (→ croix) gérée par assets/js/menu.js
══════════════════════════════════════════════════════════════ */
.hamburger {
  display:        none; /* visible via responsive.css */
  flex-direction: column;
  gap:            5px;
  cursor:         pointer;
  padding:        .5rem;
}
.hamburger span {
  width:      22px;
  height:     1.5px;
  background: white;
  transition: all .3s;
  display:    block;
}
body.light-mode .hamburger span { background: var(--cream); }


/* ══════════════════════════════════════════════════════════════
   MENU MOBILE (panneau plein écran)
   Ouvert/fermé via assets/js/menu.js → class .open
   Modifier les liens → templates/partials/mobile_menu.php
══════════════════════════════════════════════════════════════ */
.mobile-menu {
  position:        fixed;
  inset:           0;
  z-index:         800;
  background:      var(--g1);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             2rem;
  transform:       translateX(100%);
  transition:      transform .45s cubic-bezier(.4,0,.2,1);
}
.mobile-menu.open { transform: translateX(0); }

.mobile-menu a {
  font-family:     'Playfair Display', serif;
  font-size:       2rem;
  color:           var(--text);
  text-decoration: none;
  transition:      color .2s;
}
.mobile-menu a:hover,
.mobile-menu a.green { color: var(--g4); }
body.light-mode .mobile-menu a { color: #2c3e30; }

/* Toggle thème dans le menu mobile */
.mobile-menu-theme {
  display:     flex;
  align-items: center;
  gap:         .8rem;
  margin-top:  1.2rem;
}
.mobile-menu-theme span {
  font-size:      .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--muted);
}
.mobile-theme-toggle {
  background:    rgba(57,181,74,.1);
  border:        1px solid rgba(57,181,74,.25);
  border-radius: 50px;
  width:         60px;
  height:        30px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  transition:    all .3s;
  padding:       0 .4rem;
  touch-action:  manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select:   none;
}
.mobile-theme-toggle .tt-icon {
  font-size:      .9rem;
  pointer-events: none;
}