/* =========================
   PORTFOLIO - VERSION PREMIUM
   ========================= */

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
}

.project {
  position: relative;
  height: 420px; /* Légèrement plus grand pour laisser respirer le contenu */
  border-radius: 20px;
  overflow: hidden;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
}

/* Effet de lueur au survol */
.project:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

/* --- IMAGE DE FOND --- */
.project img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
}

/* --- CONTENU TEXTUEL --- */
.project .content {
  position: absolute;
  inset: 0;
  /* Dégradé plus pro : part du transparent vers un noir profond */
  background: linear-gradient(to top, 
    rgba(2, 6, 23, 1) 3%, 
    rgba(2, 6, 23, 0.785) 70%, 
    transparent 100%);
  padding: 35px 25px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 5;
}

/* --- ÉTAT ACTIF --- */
.project.is-tapped .content {
  opacity: 1;
  transform: translateY(0);
}

.project.is-tapped img {
  transform: scale(1.1);
  filter: scale(1.05) blur(2px) brightness(0.4);
}

/* --- TYPOGRAPHIES --- */
.project h3 { 
  font-size: 1.6rem; 
  margin-bottom: 12px; 
  font-weight: 700; 
  color: #fff;
  letter-spacing: -0.5px;
}

.project p { 
  font-size: 0.9rem; 
  margin-bottom: 12px; 
  line-height: 1.5; 
  color: rgba(255, 255, 255, 0.8);
}

.project strong {
  color: var(--accent-2, #3b82f6); /* Couleur d'accentuation */
}

.project .project-note {
  font-size: 0.8rem;
  font-style: italic;
  opacity: 0.7;
  margin-bottom: 15px;
}

/* Boutons côte à côte */
.project .links-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.project a {
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}

.project a:hover {
  background: #fff;
  color: #000;
  transform: translateY(-2px);
}

/* --- LE BOUTON (+) --- */
.project-hint {
  position: absolute;
  top: 20px; /* Déplacé en haut pour plus de style */
  right: 20px;
  width: 40px;
  height: 40px;
  background: rgb(15, 23, 42);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  transition: all 0.4s ease;
}

.project-hint span {
  color: white;
  font-size: 20px;
  transition: transform 0.4s ease;
}

.project.is-tapped .project-hint {
  transform: rotate(135deg);
  background: var(--accent-2); /* Rouge ou ta couleur d'accent pour "fermer" */
  border-color: transparent;
}

/* Desktop Hover */
@media (hover: hover) {
  .project:hover:not(.is-tapped) .project-hint {
    background: var(--accent-2, #3b82f6);
    transform: scale(1.1);
  }
}