/* ================================================================
   NAV — v2 : transparente au-dessus du hero, crème ensuite
   ================================================================
   Par défaut : fond crème légèrement translucide + flou, texte sombre.
   Quand la classe .nav--sur-video est active (au-dessus de la vidéo
   hero), la nav devient transparente et son texte passe en blanc.
   La classe .nav--cachee la masque hors écran (auto-hide au scroll).
   ================================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: var(--espace-s) var(--padding-cote);

  /* État "hors hero" : fond crème translucide + flou. */
  background-color: rgba(244, 240, 234, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  color: var(--couleur-texte);

  transition:
    transform        var(--duree-moyenne) var(--ease-doux),
    background-color var(--duree-moyenne) var(--ease-doux),
    color            var(--duree-moyenne) var(--ease-doux);
}

/* Au-dessus de la vidéo hero : nav invisible, texte blanc. */
.nav--sur-video {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #FFFFFF;
}

/* Auto-hide au scroll vers le bas. */
.nav--cachee {
  transform: translateY(-100%);
}


/* LOGO (V svg à gauche) */

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--espace-s);

  color: inherit;                /* suit la couleur de la nav (noir ou blanc) */
  transition: opacity var(--duree-courte) var(--ease-doux);
}

.nav__logo:hover {
  opacity: 0.7;
}

.nav__logo-svg {
  width: 28px;
  height: 28px;
  display: block;
}

.nav__logo-texte {
  font-family: var(--typo-corps);
  font-size: var(--taille-s);
  font-variation-settings: 'wght' 500, 'wdth' 100;
  letter-spacing: 0.02em;
}


/* LIENS DE NAVIGATION (droite) */

.nav__liens {
  display: flex;
  gap: var(--espace-m);
  list-style: none;
}

.nav__lien {
  font-family: var(--typo-corps);
  font-size: var(--taille-s);
  font-variation-settings: 'wght' 400, 'wdth' 100;
  text-transform: lowercase;
  letter-spacing: 0.02em;

  color: var(--couleur-texte-doux);
  transition: color var(--duree-courte) var(--ease-doux);
}

.nav__lien:hover {
  color: var(--couleur-texte);
}

/* Quand la nav est au-dessus de la vidéo : les liens passent en blanc. */
.nav--sur-video .nav__lien {
  color: rgba(255, 255, 255, 0.8);
}

.nav--sur-video .nav__lien:hover {
  color: #FFFFFF;
}


/* Bouton "index" : se comporte comme un lien mais c'est un <button> */
.nav__index-bouton {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}


/* ================================================================
   INDEX OVERLAY — liste cliquable de toutes les sections
   ================================================================ */

.index-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay, 9000);
  background-color: rgba(15, 14, 12, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #FFFFFF;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity     var(--duree-moyenne) var(--ease-doux),
    visibility  0s linear var(--duree-moyenne);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espace-xl) var(--padding-cote);
  overflow-y: auto;
}

.index-overlay--ouvert {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity     var(--duree-moyenne) var(--ease-doux),
    visibility  0s;
}

.index-overlay__fermer {
  position: fixed;
  top: var(--espace-s);
  right: var(--padding-cote);
  width: 48px;
  height: 48px;
  border: 0;
  background: none;
  color: #FFFFFF;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity var(--duree-courte) var(--ease-doux);
}
.index-overlay__fermer:hover { opacity: 1; }

.index-overlay__contenu {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.index-overlay__titre {
  display: block;
  font-family: var(--typo-corps);
  font-size: var(--taille-xs);
  font-variation-settings: 'wght' 500, 'wdth' 100;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--espace-l);
}

/* La liste est un <div> qui contient 8 <section.bloc> (un par catégorie).
   Chaque bloc embarque son titre <h3.categorie> et sa <ol> de projets.
   On utilise une grille auto-fit pour que l'ensemble tienne d'un coup
   d'œil sur l'écran. Le compteur d'index reste global (01 à 20). */
.index-overlay__liste {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--espace-l) var(--espace-l);
  counter-reset: idx;
  align-items: start;     /* chaque bloc commence en haut, pas étiré */
}

/* Chaque bloc catégorie reste solidaire — h3 + ol ne sont jamais séparés. */
.index-overlay__bloc {
  display: flex;
  flex-direction: column;
  min-width: 0;
  break-inside: avoid;
}

/* En-tête de catégorie : picto Material Symbols + label en capitales */
.index-overlay__categorie {
  margin: 0 0 var(--espace-xs);
  padding: var(--espace-xs) 0;
  font-family: var(--typo-corps);
  font-size: var(--taille-xs);
  font-variation-settings: 'wght' 600, 'wdth' 100;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--couleur-accent, #ff4d00);

  display: flex;
  align-items: center;
  gap: var(--espace-s);

  /* Petit trait sous le titre pour matérialiser la séparation */
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.index-overlay__categorie::before {
  content: attr(data-picto);
  font-family: 'Material Symbols Outlined';
  font-size: 22px;
  letter-spacing: 0;          /* annule l'espacement uppercase pour le picto */
  color: var(--couleur-accent, #ff4d00);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  text-transform: none;
}

/* Liste de projets sous chaque catégorie */
.index-overlay__liste ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.index-overlay__liste li {
  counter-increment: idx;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--espace-s);
  min-width: 0;
}
.index-overlay__liste ol li:first-child {
  border-top: none;           /* le titre de catégorie sert déjà de séparateur */
}

.index-overlay__liste li::before {
  content: counter(idx, decimal-leading-zero);
  font-family: var(--typo-corps);
  font-size: 11px;
  font-variation-settings: 'wght' 500, 'wdth' 100;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.15em;
  margin-right: 8px;
  flex-shrink: 0;
}

.index-overlay__liste a {
  flex: 1;
  min-width: 0;
  font-family: var(--typo-titre);
  font-size: clamp(15px, 1.1vw, 19px);
  line-height: 1.2;
  color: #FFFFFF;
  font-variation-settings: 'opsz' 48, 'wght' 500, 'SOFT' 0, 'WONK' 0;
  transition:
    color var(--duree-courte) var(--ease-doux),
    font-variation-settings var(--duree-courte) var(--ease-doux);
}
.index-overlay__liste a:hover {
  color: var(--couleur-accent, #ff4d00);
  font-variation-settings: 'opsz' 48, 'wght' 500, 'SOFT' 80, 'WONK' 1;
}

.index-overlay__liste span {
  font-family: var(--typo-corps);
  font-size: 10px;
  font-variation-settings: 'wght' 400, 'wdth' 100;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 800px) {
  .index-overlay__liste { grid-template-columns: 1fr; }
}


/* ================================================================
   BACK TO TOP — flèche flottante en bas à droite
   ================================================================ */

.back-top {
  position: fixed;
  right: var(--espace-m);
  bottom: var(--espace-m);
  z-index: var(--z-header);

  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background-color: rgba(15,14,12,0.85);
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity     var(--duree-moyenne) var(--ease-doux),
    transform   var(--duree-moyenne) var(--ease-doux),
    background  var(--duree-courte)  var(--ease-doux);
}

.back-top--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-top:hover { background-color: var(--couleur-accent, #ff4d00); }

.back-top svg {
  width: 20px;
  height: 20px;
  display: block;
}


/* Sur téléphone, les 4 liens tiennent sur une ligne : le logo V seul
   (le nom est déjà en géant dans le hero), liens resserrés sans retour
   à la ligne — avant, « contact » débordait et élargissait la page. */
@media (max-width: 640px) {
  .nav__logo-texte { display: none; }
  .nav__liens { gap: var(--espace-s); }
  .nav__lien { font-size: var(--taille-xs); white-space: nowrap; }
}


/* ================================================================
   ESSAI LOT 3 — index / about / contact en pictogrammes,
   le lien vers l'autre monde (perso ↔ pro) mis en avant en pastille
   ================================================================ */

.nav__liens {
  align-items: center;
}

.nav__lien--picto {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.nav__picto {
  font-family: 'Material Symbols Outlined';
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* « personal work → » : sans pastille, juste le lime de la page perso */
.nav .nav__lien.nav__lien--monde {
  color: #B7FF1A;
  font-variation-settings: 'wght' 500, 'wdth' 100;
  transition: color var(--duree-courte) var(--ease-doux);
}

.nav .nav__lien.nav__lien--monde:hover {
  color: #FFFFFF;
}

/* hors du hero, la nav passe sur le crème où le lime serait illisible :
   texte sombre, souligné lime */
.nav:not(.nav--sur-video) .nav__lien.nav__lien--monde:not(.nav__lien--monde-pro) {
  color: var(--couleur-texte);
  text-decoration: underline;
  text-decoration-color: #B7FF1A;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* sur la page perso, « pro work → » prend l'orange de la page pro */
.nav .nav__lien.nav__lien--monde-pro {
  color: #FF4D00;
}

.nav .nav__lien.nav__lien--monde-pro:hover {
  color: #F4F0EA;
}