/* ==========================================================================
   NAV.CSS — Phaneon Portfolio
   Contient : barre de navigation fixe, logo avec point violet,
              liens de navigation, bouton CTA "Contactez-moi"
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. BARRE DE NAVIGATION PRINCIPALE
   Position fixe en haut de l'écran avec effet de flou (glassmorphism).
   Le padding est réduit dynamiquement au scroll via main.js.
   -------------------------------------------------------------------------- */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100; /* Au-dessus de tout le contenu */
  padding: 1.3rem 6vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, .88); /* Blanc semi-transparent */
  backdrop-filter: blur(20px);          /* Effet de flou sur le contenu derrière */
  border-bottom: 1px solid var(--c-border);
  transition: padding .3s; /* Transition douce lors du shrink au scroll */
}


/* --------------------------------------------------------------------------
   2. LOGO IMAGE SVG
   Le logo Phaneon est affiché en tant qu'image SVG.
   Hauteur fixe dans la nav pour ne pas écraser la barre.
   Le fond du SVG (cercle lavande) est visible sur fond blanc — parfait.
   -------------------------------------------------------------------------- */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0; /* Empêche le logo de se rétrécir si peu de place */
}

/* Image du logo dans la nav */
.nav-logo img {
  height: 44px;     /* Hauteur fixe — ajuster si besoin */
  width: auto;      /* Largeur automatique pour conserver les proportions */
  display: block;
  transition: opacity .2s;
}
.nav-logo:hover img {
  opacity: .8;
}

/* Classe .logo-dot conservée pour le footer (voir contact.css) */
.logo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
}


/* --------------------------------------------------------------------------
   3. LISTE DES LIENS DE NAVIGATION
   Affichée horizontalement sur desktop, cachée sur mobile (< 600px)
   -------------------------------------------------------------------------- */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

/* Liens individuels */
.nav-links a {
  text-decoration: none;
  color: var(--c-muted);
  font-size: .9rem;
  font-weight: 600;
  transition: color .2s;
}
.nav-links a:hover {
  color: var(--c-text);
}


/* --------------------------------------------------------------------------
   4. BOUTON CTA "CONTACTEZ-MOI" (dernier lien de la nav)
   Surcharge les styles du lien standard avec un fond violet arrondi.
   Reproduit fidèlement le bouton "Contactez Moi 🔔" du site original.
   -------------------------------------------------------------------------- */
.nav-cta {
  background: var(--c-accent) !important;
  color: #fff !important;
  padding: .6rem 1.5rem;
  border-radius: 50px;
  font-weight: 700 !important;
  font-size: .85rem !important;
  transition: background .2s, transform .2s !important;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.nav-cta:hover {
  background: var(--c-accent2) !important;
  transform: translateY(-2px);
}


/* --------------------------------------------------------------------------
   5. RESPONSIVE
   Sur mobile, on cache les liens pour ne garder que le logo.
   (Un menu hamburger peut être ajouté ultérieurement)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  nav {
    padding: 1rem 5vw;
  }
  .nav-links {
    display: none; /* À remplacer par un menu burger si besoin */
  }
}


/* --------------------------------------------------------------------------
   6. BOUTON TOGGLE MODE SOMBRE — Soleil / Lune
   Positionné entre les liens et le CTA dans la nav.
   L'icône change via JS selon le thème actif.
   -------------------------------------------------------------------------- */
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: border-color .2s, background .2s, transform .3s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--c-accent);
  background: rgba(91, 91, 214, .08);
  transform: rotate(20deg);
}

/* Icône selon le thème actif — géré via JS */
.theme-toggle .icon-light { display: inline; } /* Soleil affiché en mode clair */
.theme-toggle .icon-dark  { display: none;   } /* Lune masquée en mode clair */

[data-theme="dark"] .theme-toggle .icon-light { display: none;   }
[data-theme="dark"] .theme-toggle .icon-dark  { display: inline; }

/* Même logique pour la détection système */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-dark  { display: inline; }
}

/* Ajuste la nav en mode sombre */
[data-theme="dark"] nav {
  background: var(--c-nav-bg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) nav {
    background: var(--c-nav-bg);
  }
}