/* ==========================================================================
   nexusbuild.eu — Projets
   ========================================================================== */

.nx-header__actions { display: flex; gap: var(--nx-3); }

.page-head { padding-block: var(--nx-24) var(--nx-12); }
.page-head h1 { margin-bottom: var(--nx-6); }
.section-head { max-width: 62ch; margin-bottom: var(--nx-12); }

/* --- EXISTANT / PROJET ------------------------------------------------
   Juxtaposition, pas superposition : les deux prises de vue n'ont ni le
   même point de vue ni le même format. Un curseur les aurait opposées au
   lieu de les rapprocher.
   ---------------------------------------------------------------------- */
.featured__head { max-width: 62ch; margin-bottom: var(--nx-12); }
.featured__head h2 { margin-bottom: var(--nx-6); }

.pair {
  display: grid; gap: var(--nx-8);
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.pair__item { margin: 0; }
.pair__media {
  border: 1px solid var(--nx-line); border-radius: var(--nx-radius);
  overflow: hidden; background: var(--nx-mist);
}
/* Le même ratio pour les deux : c'est la mise en page qui les rend
   comparables, puisque les sources ne le sont pas. */
.pair__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.pair figcaption {
  margin-top: var(--nx-4);
  font-size: var(--nx-text-sm); color: var(--nx-ink-soft);
  max-width: 42ch;
}
.pair__tag {
  display: inline-block; margin-right: var(--nx-2);
  padding: 1px var(--nx-3);
  font-size: var(--nx-text-xs); font-weight: 600;
  letter-spacing: var(--nx-tracking-label); text-transform: uppercase;
  border-radius: 100px;
}
.pair__tag--avant { background: var(--nx-mist); color: var(--nx-ink); }
.pair__tag--apres { background: var(--nx-green); color: var(--nx-white); }

.featured__credit {
  margin-top: var(--nx-8);
  font-size: var(--nx-text-xs); color: var(--nx-ink-soft);
}

@media (max-width: 800px) {
  .pair { grid-template-columns: 1fr; gap: var(--nx-12); }
}

/* --- CARTES -----------------------------------------------------------
   Survol sur desktop + clic/tap partout + focus clavier. Le survol seul
   serait mort sur tactile et inaccessible.
   ---------------------------------------------------------------------- */
.cards {
  display: grid; gap: var(--nx-6);
  grid-template-columns: repeat(3, 1fr);
}
.card { display: flex; flex-direction: column; }

.card__trigger {
  position: relative; display: block; padding: 0; border: 0;
  background: none; cursor: pointer; text-align: left;
  border-radius: var(--nx-radius); overflow: hidden;
  font: inherit; color: inherit;
}
.card__media { display: block; }
.card__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 600ms var(--nx-ease);
}
.card__trigger:hover .card__media img,
.card__trigger:focus-visible .card__media img { transform: scale(1.03); }

.card__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--nx-1); padding: var(--nx-6);
  /* Le voile doit couvrir toute la zone de texte, pas seulement le bas :
     les rendus sont clairs et le méta vert y disparaissait. */
  background: linear-gradient(to top,
    rgba(22, 34, 30, 0.95) 0%,
    rgba(22, 34, 30, 0.88) 42%,
    rgba(22, 34, 30, 0.38) 72%,
    rgba(22, 34, 30, 0) 100%);
  color: var(--nx-white);
}
.card__meta {
  font-size: var(--nx-text-xs); font-weight: 600;
  letter-spacing: var(--nx-tracking-label); text-transform: uppercase;
  /* Revue bêta, diapo 5 : le méta vert sur photo était illisible. Teinte
     claire (≈9:1 sur le voile), distincte du titre blanc par la casse et
     l'interlettrage. Le vert reste aux actions. */
  color: #D2DAD7;
}
.card__titre {
  font-family: var(--nx-font-display); font-size: var(--nx-text-lg);
  font-weight: 600; line-height: var(--nx-leading-snug);
  letter-spacing: var(--nx-tracking-tight);
}
.card__more {
  font-size: var(--nx-text-sm); font-weight: 600; color: var(--nx-white);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--nx-dur) var(--nx-ease), transform var(--nx-dur) var(--nx-ease);
}
.card__trigger:hover .card__more,
.card__trigger:focus-visible .card__more { opacity: 1; transform: none; }
/* Sur tactile, pas de survol : l'appel à l'action reste visible. */
@media (hover: none) { .card__more { opacity: 1; transform: none; } }

.card__detail {
  border: 1px solid var(--nx-line); border-top: 0;
  border-radius: 0 0 var(--nx-radius) var(--nx-radius);
  padding: var(--nx-6);
  background: var(--nx-cream);
}
.card__detail h3 { margin: var(--nx-3) 0 var(--nx-4); font-size: var(--nx-text-lg); }
.card__badge {
  display: inline-block; padding: 2px var(--nx-3);
  font-size: var(--nx-text-xs); font-weight: 600;
  letter-spacing: var(--nx-tracking-label); text-transform: uppercase;
  border-radius: 100px;
}
.card__badge--livre       { background: var(--nx-green); color: var(--nx-white); }
.card__badge--en-chantier { background: var(--nx-ink); color: var(--nx-white); }
.card__badge--a-venir     { background: var(--nx-mist); color: var(--nx-ink); }
/* Statut non confirmé : visible, pour qu'on ne l'oublie pas en production. */
.card__badge--todo {
  background: repeating-linear-gradient(45deg, #F3D9A4, #F3D9A4 6px, #EFCE8A 6px, #EFCE8A 12px);
  color: #5A4409;
}

.card__facts { display: grid; gap: var(--nx-3); margin-bottom: var(--nx-4); }
.card__facts > div {
  display: grid; grid-template-columns: 10ch 1fr; gap: var(--nx-4);
  padding-bottom: var(--nx-3); border-bottom: 1px solid var(--nx-mist);
}
.card__facts dt {
  font-size: var(--nx-text-xs); font-weight: 600;
  letter-spacing: var(--nx-tracking-label); text-transform: uppercase;
  color: var(--nx-ink-soft);
}
.card__facts dd { font-size: var(--nx-text-sm); }
.card__resume { font-size: var(--nx-text-sm); color: var(--nx-ink-soft); }
.card__credit {
  margin-top: var(--nx-4); font-size: var(--nx-text-xs); color: var(--nx-ink-soft);
}

/* --- CTA -------------------------------------------------------------- */
.cta__inner { text-align: center; }
.cta__inner h2 { max-width: 22ch; margin-inline: auto; }
.cta__inner .nx-lede { margin: var(--nx-6) auto var(--nx-8); }

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 1024px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .nx-nav { display: none; } }
@media (max-width: 640px)  { .cards { grid-template-columns: 1fr; } }