/* ============================================================
   Fiche projet — complète l'esprit projet.css d'Enzo
============================================================ */

.fiche-projet { padding-top: 0; }

.projet-hero-category {
  display: inline-block;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 0.6rem;
}
.projet-hero-category a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.projet-hero-category a:hover { border-color: rgba(255, 255, 255, 0.9); }

.projet-description {
  max-width: 820px;
  margin: 4rem auto;
  padding: 0 2rem;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
}
.projet-description__inner p {
  margin: 0 0 1rem;
}

.projet-credit {
  max-width: 1800px;
  margin: 2rem auto 0;
  padding: 1rem 2rem 3rem;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #aaa;
  text-align: left;
  font-style: italic;
}

.projet-carte {
  max-width: 100%;
  margin: 3rem 0;
  padding: 0;
}
.projet-carte h2 {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  text-align: center;
  margin: 0 0 1.5rem;
}
.projet-carte__placeholder {
  background: #f5efe6;
  border: 1px dashed #d6c9b3;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-style: italic;
}

.fiche-projet-nav {
  text-align: center;
  padding: 3rem 2rem 5rem;
}
/* Nav en haut de fiche (juste sous le hero) : compact, collé à gauche */
.fiche-projet-nav--top {
  text-align: left;
  padding: 1.5rem 1.5rem 0.5rem;
  max-width: none;
  margin: 0;
}
.fiche-projet-nav--top .btn-retour {
  font-size: 0.78rem;
  padding: 0.6rem 1.4rem;
}

/* ============================================================
   MOSAÏQUE GALERIE PROJET — grille 6 colonnes, gap uniforme,
   recadrage cover automatique, tailles variables (span aléatoire
   par photo, différent à chaque render).
============================================================ */
.projet-galerie-mosaic-section {
  max-width: 1800px;
  margin: 2rem auto 4rem;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
/* Galerie secondaire — séparateur + opacité réduite */
.projet-galerie-secondary {
  margin-top: 0;
  opacity: 0.8;
}
.projet-galerie-separator {
  text-align: center;
  padding: 1rem 0 2rem;
}
.projet-galerie-separator span {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #aaa;
  position: relative;
  display: inline-block;
  padding: 0 1.5rem;
}
.projet-galerie-separator span::before,
.projet-galerie-separator span::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 60px;
  height: 1px;
  background: #ddd;
}
.projet-galerie-separator span::before { right: 100%; }
.projet-galerie-separator span::after { left: 100%; }
/* Mode B : flex-rows */
.mosaic-row {
  display: flex;
  gap: 0.4rem;
}
/* Mode A : masonry colonnes */
.mosaic-masonry {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
}
.mosaic-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
/* Commun aux deux modes */
.mosaic-tile {
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mosaic-tile:hover { transform: scale(1.01); }
.mosaic-tile picture {
  display: block;
  width: 100%;
}
.mosaic-tile picture img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s ease;
}
.mosaic-tile:hover picture img { transform: scale(1.04); }

@media (max-width: 768px) {
  .projet-galerie-mosaic-section { gap: 0.3rem; }
  .mosaic-row { gap: 0.3rem; }
  .mosaic-masonry { gap: 0.3rem; }
  .mosaic-column { gap: 0.3rem; }
}
.btn-retour {
  display: inline-block;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #B5A48A;
  text-decoration: none;
  padding: 0.8rem 2rem;
  border: 1px solid #B5A48A;
  transition: background 0.2s, color 0.2s;
}
.btn-retour:hover {
  background: #B5A48A;
  color: #fff;
}

/* La fiche projet utilise navbar-scrolled fond blanc */
/* Fiche projet : nav transparente par défaut (au-dessus du hero image),
   scrolled au scroll — géré par script.js naturellement.
   Projet privé (sans hero) : on force scrolled directement. */
body:has(.fiche-privee) .navbar { display: none !important; }
body:has(.fiche-privee) .navbar-scrolled {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================
   Page projet privé — minimaliste
============================================================ */
.fiche-privee {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 2rem 4rem;
  text-align: center;
}
.fiche-privee__inner {
  max-width: 600px;
}
.fiche-privee h1 {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: 2.5rem;
  letter-spacing: 0.04em;
  margin: 0 0 1.5rem;
  color: #1a1a1a;
}
.fiche-privee p {
  font-family: 'Josefin Sans', sans-serif;
  color: #666;
  margin: 0 0 1rem;
  line-height: 1.7;
}
.fiche-privee a { color: #B5A48A; }

/* Photos de la galerie : on s'assure du remplissage */
.projet-galerie .projet-img-large picture,
.projet-galerie .projet-img-small picture,
.projet-galerie .projet-img-full picture {
  display: block;
  width: 100%;
  height: 100%;
}
.projet-galerie .projet-img-large picture img,
.projet-galerie .projet-img-small picture img,
.projet-galerie .projet-img-full picture img {
  width: 100%;
  height: auto;
  display: block;
}