/* ============================================================
   NAV.CSS — Logo fixe, Navigation verticale droite, Toggle thème
   Studio Antoine Ozen
   ============================================================ */

/* ── LOGO ── */
.logo {
  position:              fixed;
  left:                  var(--gx);
  top:                   2rem;
  z-index:               500;
  font-family:           var(--ff-display);
  font-size:             clamp(13px, 1.5vw, 35px);
  font-weight:           500;
  line-height:           0.75;
  letter-spacing:        0;
  color:                 var(--fg);
  transition:            color var(--ease-theme);
  user-select:           none;
  display:               grid;
  grid-template-columns: repeat(7, auto);
  justify-items:         center;
  gap:                   0.04em;
}

/* ── NAV VERTICALE ── */
nav {
  position:        fixed;
  right:           var(--gx);
  top:             50%;
  transform:       translateY(-50%);
  display:         flex;
  flex-direction:  column;
  align-items:     flex-end;
  gap:             0.15rem;
  z-index:         500;
}

/* Liste des liens */
.nl {
  list-style:      none;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-end;
  gap:             0.2rem;
  margin-bottom:   1.5rem;
}

.nl a {
  font-size:      14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--fg2);
  text-decoration: none;
  font-weight:    400;
  transition:     color 0.25s;
  cursor:         none;
}

.nl a:hover { color: var(--fg); }

/* Séparateur */
.nsep {
  width:      0.5px;
  height:     1.4rem;
  background: var(--bdr);
  margin:     0.4rem 0 0.4rem auto;
}

/* Lien Contact */
.nc a {
  font-size:      14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--fg2);
  text-decoration: none;
  font-weight:    400;
  transition:     color 0.25s;
  cursor:         none;
}

.nc a:hover { color: var(--fg); }

/* ── TOGGLE JOUR / NUIT ── */
.tt {
  margin-top:      1.4rem;
  display:         flex;
  align-items:     center;
  gap:             7px;
  background:      none;
  border:          none;
  cursor:          none;
  padding:         0;
  justify-content: flex-end;
}

/* Icônes soleil/lune */
.tt svg {
  width:    14px;
  height:   14px;
  overflow: visible;
}

/* stroke des icônes — variable pour le thème */
.ts {
  stroke:     var(--fg2);
  transition: stroke 0.5s;
}

.tt:hover .ts { stroke: var(--fg); }

/* Track */
.tk {
  width:         28px;
  height:        15px;
  border-radius: 8px;
  position:      relative;
  border:        0.5px solid var(--bdr);
  background:    var(--fg3);
  transition:    background 0.5s;
}

/* Thumb */
.th {
  position:   absolute;
  top:        2.5px;
  width:      10px;
  height:     10px;
  border-radius: 50%;
  background: var(--fg);
  transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.4s;
}

/* Position du thumb selon le thème */
body:not(.dark) .th { left: 15.5px; }
body.dark        .th { left: 2.5px; }