/* ── Navigation précédent / index / suivant ──
   Partagée entre fiches projet et articles de blog. Sans marge horizontale :
   la vue appelante gère le débord (plein cadre) selon son propre padding. */
.projet-nav {
  display: grid; grid-template-columns: 1fr auto 1fr;
  border-top: 1px solid var(--border);
  margin-top: 50px;
}
.projet-nav-index {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 40px 32px;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  color: var(--muted); transition: color .2s, background .2s;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; text-decoration: none;
}
.projet-nav-index:hover { color: var(--text); background: var(--hover-tint); }
.projet-nav-item {
  padding: 40px;
  border: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center;
  transition: background .2s;
  position: relative; overflow: hidden;
  min-height: 220px; text-decoration: none; color: inherit;
}
.projet-nav-item:hover { background: var(--hover-tint); }
.projet-nav-item + .projet-nav-item { border-left: 1px solid var(--border); }
.projet-nav-label {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.projet-nav-label svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.projet-nav-title {
  font-family: var(--f-head);
  font-size: clamp(1.1rem, 2.5vw, 1.8rem);
  font-weight: 100;
  line-height: 1.2;
}
.projet-nav-thumb {
  position: absolute; inset: 0;
  object-fit: cover; width: 100%; height: 100%;
  opacity: 0; transform: scale(1);
  transition: opacity .4s ease, transform .6s cubic-bezier(.16,1,.3,1);
  z-index: 0;
}
.projet-nav-item:hover .projet-nav-thumb { opacity: 1; transform: scale(1.1); }
/* Masque au survol pour faire ressortir le texte */
.projet-nav-item::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: rgba(0,0,0,.45); opacity: 0; transition: opacity .4s ease;
}
.projet-nav-item:hover::before { opacity: 1; }
.projet-nav-content { position: relative; z-index: 2; }
.projet-nav-item:hover .projet-nav-label,
.projet-nav-item:hover .projet-nav-title { color: #fff; }

@media (max-width: 768px) {
  .projet-nav { grid-template-columns: 1fr; }
  .projet-nav-index { flex-direction: row; padding: 20px; border-left: none; border-right: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .projet-nav-item + .projet-nav-item { border-left: none; border-top: 1px solid var(--border); }
  .projet-nav-item { padding: 28px 20px; min-height: auto; }
  .projet-nav-item.next { align-items: flex-start; text-align: left; }
}