/* ============================================================
   PORTFOLIO.CSS — Version flat (sidebar + display)
   
   Structure :
   1. Layout principal (sidebar + zone d'affichage)
   2. Sidebar (liste des projets)
   3. Boutons de projet dans la sidebar
   4. Zone d'affichage (détails du projet)
   5. Contenu du projet (image, titre, desc, tags)
   6. État vide (aucun projet sélectionné)
   7. Responsive
   ============================================================ */

/* ---- 1. LAYOUT PRINCIPAL ---- */
.portfolio {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* ---- 2. SIDEBAR ---- */
.portfolio__sidebar {
  width: 300px;
  min-width: 300px;
  min-height: 100vh;
  padding: var(--space-lg);
  background: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  overflow-y: auto;
}

/* Lien retour */
.portfolio__back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  width: 41px;
  padding: var(--space-sm) 14px 10px 14px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-secondary);
  background: var(--color-default);
  border-radius: 50px;
  cursor: pointer;
  position: relative;        /* Nécessaire pour le ::before */
  overflow: hidden;           /* Cache le ::before qui déborde */
  z-index: 1;                /* Le texte reste cliquable */
  transition: color var(--transition-base);
}

/* Barre de remplissage (pseudo-élément) */
.portfolio__back-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;                  /* Invisible par défaut */
  height: 0;
  background: var(--color-secondary);
  transition: height 0.2s ease;
  z-index: -1;               /* Derrière le texte */
}

/* Hover : le remplissage s'étend + le texte change de couleur */
.portfolio__back-link:hover {
  color: var(--color-default);
}

.portfolio__back-link:hover::before {
  height: 100%;               /* Remplit tout le bouton */
}

/* Titre sidebar */
.portfolio__sidebar-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

/* ---- 3. NAVIGATION — BOUTONS DE PROJET ---- */
.portfolio__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.portfolio__nav-btn {
  width: 100%;
  text-align: left;
  padding: var(--space-md) var(--space-md);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  cursor: pointer;
  transition:
    border-color var(--transition-base),
    background var(--transition-base),
    transform var(--transition-fast);
}

.portfolio__nav-btn:hover {
  border-color: var(--color-cyan-dim);
  background: var(--color-bg-elevated);
  transform: translateX(4px);
}

/* Bouton actif (projet sélectionné) */
.portfolio__nav-btn.is-active {
  border-color: var(--color-cyan);
  background: var(--color-bg-elevated);
  box-shadow: inset 3px 0 0 var(--color-cyan);
}

.portfolio__nav-btn-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.portfolio__nav-btn-category {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
}

.portfolio__nav-btn.is-active .portfolio__nav-btn-title {
  color: var(--color-cyan);
}
.portfolio__nav-btn.is-active .portfolio__nav-btn-category {
  color: var(--color-text-secondary);
}

/* ---- 4. ZONE D'AFFICHAGE ---- */
.portfolio__display {
  flex: 1;
  min-height: 100vh;
  padding: var(--space-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

/* ---- 5. CONTENU DU PROJET ---- */
.portfolio__project {
  display: none;
  width: 100%;
  max-width: 900px;
  animation: project-fade-in 0.4s ease forwards;
}
.portfolio__project.is-visible {
  display: block;
}

@keyframes project-fade-in {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Image du projet */
.portfolio__project-visual {
  width: 100%;
  margin-bottom: var(--space-xl);
  overflow: hidden;
}

.portfolio__project-img,.portfolio__project-video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 20px;
}

/* Placeholder quand pas d'image */
.portfolio__project-img[src=""],
.portfolio__project-img:not([src]) {
  min-height: 300px;
  background: var(--color-bg-elevated);
}

/* Infos du projet */
.portfolio__project-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.portfolio__project-category {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-magenta);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.portfolio__project-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.portfolio__project-desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* Tags */
.portfolio__project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.portfolio__project-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: 3px 12px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  letter-spacing: 0.05em;
}

/* Lien externe */
.portfolio__project-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  width:160px;
  padding: var(--space-sm) 14px 10px 14px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-secondary);
  background: var(--color-default);
  border-radius: 50px;
  cursor: pointer;
  position: relative;        /* Nécessaire pour le ::before */
  overflow: hidden;           /* Cache le ::before qui déborde */
  z-index: 1;                /* Le texte reste cliquable */
  transition: color var(--transition-base);
}

/* Barre de remplissage (pseudo-élément) */
.portfolio__project-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;                  /* Invisible par défaut */
  height: 0;
  background: var(--color-secondary);
  transition: height 0.2s ease;
  z-index: -1;               /* Derrière le texte */
}

/* Hover : le remplissage s'étend + le texte change de couleur */
.portfolio__project-link:hover {
  color: var(--color-default);
}

.portfolio__project-link:hover::before {
  height: 100%;               /* Remplit tout le bouton */
}

/* ---- 6. ÉTAT VIDE ---- */
.portfolio__empty {
  text-align: center;
}

.portfolio__empty-text {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
}

/* ---- 7. RESPONSIVE ---- */

/* Tablette : sidebar plus étroite */
@media (max-width: 900px) {
  .portfolio__sidebar {
    width: 220px;
    min-width: 220px;
    padding: var(--space-md);
  }
  .portfolio__display {
    padding: var(--space-lg);
  }
}

/* Mobile : layout vertical (sidebar en haut, display en bas) */
@media (max-width: 600px) {
  .portfolio {
    flex-direction: column;
  }
  .portfolio__sidebar {
    width: 100%;
    min-width: 100%;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
  .portfolio__nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .portfolio__nav-btn {
    width: auto;
    flex: 1;
    min-width: 140px;
  }
  .portfolio__nav-btn:hover {
    transform: none;
  }
  .portfolio__display {
    min-height: auto;
    padding: var(--space-lg) var(--space-md);
  }
}