/* =========================================================
   DESIGNER BY NATURE — 07. PROJETS
   Surface noire. En-tête titre / action, quatre catégories en
   cartes légèrement décalées, puis la grille des réalisations.

   DEUX NIVEAUX, PAS TROIS
   Les catégories servent d'index, la grille montre le travail.
   La version précédente empilait trois traitements du même sujet —
   catégories, projet vedette, galerie horizontale — sans hiérarchie
   entre eux : on ne savait plus lequel regarder.
   ========================================================= */

.projets { overflow: hidden; }

/* ---------- GRILLE DE CATÉGORIES ---------- */

.projets__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gouttiere);
  list-style: none;
}

.projets__grille > li { display: contents; }

.categorie {
  position: relative;
  display: block;
  color: var(--ivoire);
}

/* ---------- CADRE ET IMAGE ---------- */

.categorie__cadre {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ratio-carte, 4 / 5);
  background-color: var(--noir-2);

  /* « Coins très subtils » : deux pixels. Assez pour adoucir l'angle
     sous la lumière d'un écran, trop peu pour lire comme un arrondi. */
  border-radius: 2px;
}

/* Couche de parallaxe. Elle déborde de 14 % de chaque côté pour que la
   course de 44 px tienne toujours dans la marge — y compris sur la carte
   la plus basse, celle du format paysage sous 480 px, qui ne mesure que
   220 px de haut. À 10 %, cette carte-là n'offrait plus aucune marge. */
.categorie__zoom {
  position: absolute;
  inset: -14% 0;
}

/* L'image porte le seul grossissement au survol. La séparer de la
   couche de parallaxe évite que CSS et GSAP écrivent tous deux dans
   la même matrice de transformation. */
.categorie__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .7s var(--ease-sortie);
}

.categorie:hover .categorie__img,
.categorie:focus-visible .categorie__img { transform: scale(1.05); }

/* ---------- VOILE ---------- */
/* Élément dédié plutôt que pseudo-élément : son dégradé change au
   survol, et une transition sur `background-image` ne s'anime pas.
   Deux couches superposées dont on fait varier l'opacité, si. */

.categorie__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(
    to top,
    rgba(17, 17, 15, .90) 0%,
    rgba(17, 17, 15, .55) 32%,
    rgba(17, 17, 15, .10) 64%,
    rgba(17, 17, 15, 0) 100%
  );
  transition: opacity var(--dur-moyen) var(--ease-net);
  pointer-events: none;
}

/* Au survol, un second voile plus chaud et plus dense monte par-dessus :
   la carte se ferme légèrement sur elle-même au lieu de s'éclaircir. */
.categorie__voile::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    rgba(17, 17, 15, .94) 0%,
    rgba(31, 24, 17, .70) 46%,
    rgba(48, 40, 32, .34) 100%
  );
  opacity: 0;
  transition: opacity var(--dur-moyen) var(--ease-net);
}

.categorie:hover .categorie__voile::after,
.categorie:focus-visible .categorie__voile::after { opacity: 1; }

/* ---------- NUMÉRO ---------- */
/* Posé en haut à droite du cadre, révélé au survol. C'est le seul
   élément qui n'existe qu'en interaction : il récompense le geste. */

.categorie__numero {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 2;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--or);
  opacity: 0;
  transform: translateY(-.5rem);
  transition:
    opacity var(--dur-moyen) var(--ease-sortie),
    transform var(--dur-moyen) var(--ease-sortie);
}

.categorie:hover .categorie__numero,
.categorie:focus-visible .categorie__numero {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- CONTENU ---------- */

.categorie__contenu {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transform: translateY(0);
  transition: transform var(--dur-moyen) var(--ease-sortie);
}

.categorie:hover .categorie__contenu,
.categorie:focus-visible .categorie__contenu {
  transform: translateY(-.5rem);
}

/* Pastille ronde à anneau doré fin — le petit élément graphique de la
   maquette. */
.categorie__icone {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: var(--trait) solid rgba(182, 154, 104, .55);
  border-radius: var(--rayon-rond);
  color: var(--or);
  transition:
    background-color var(--dur-court) var(--ease-net),
    color var(--dur-court) var(--ease-net),
    border-color var(--dur-court) var(--ease-net);
}

.categorie__icone svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

.categorie:hover .categorie__icone,
.categorie:focus-visible .categorie__icone {
  background-color: var(--or);
  border-color: var(--or);
  color: var(--noir);
}

.categorie__nom {
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.3;
}

.categorie__compte {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  color: var(--or);
}

/* Filet doré tracé en bas de carte au survol. */
.categorie__cadre::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 100%;
  height: 2px;
  background-color: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-moyen) var(--ease-sortie);
}

.categorie:hover .categorie__cadre::after,
.categorie:focus-visible .categorie__cadre::after { transform: scaleX(1); }

/* ---------- RESPONSIVE ---------- */

@media (min-width: 64rem) {
  .projets__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Asymétrie légère : une carte sur deux descend d'un cran et s'allonge.
     L'écart reste inférieur à un dixième de la hauteur de carte — la
     ligne se lit encore comme une ligne, elle n'est plus rigide.

     Le rang se compte sur le <li>, pas sur la carte : chaque carte est
     seule dans son élément de liste, elle est donc toujours la première
     de son parent. Le compter sur elle n'aurait jamais rien décalé. */
  .projets__grille > li:nth-child(even) .categorie {
    margin-top: clamp(1.5rem, 3vw, 3rem);
    --ratio-carte: 4 / 5.4;
  }
}

/* Sous 480 px, quatre cartes en deux colonnes deviennent illisibles. */
@media (max-width: 30rem) {
  .projets__grille { grid-template-columns: minmax(0, 1fr); }
  .categorie__cadre { --ratio-carte: 3 / 2; }
}

/* =========================================================
   LES RÉALISATIONS
   Six projets sur une grille de six colonnes, en rythme alterné :
   large / étroit, puis étroit / large, puis deux moitiés.

   L'ASYMÉTRIE EST RÉGULIÈRE
   Elle alterne selon un motif qui se retient au deuxième coup d'œil.
   Une asymétrie tirée au hasard se lit comme du désordre ; celle-ci
   se lit comme une mise en page.
   ========================================================= */

.realisations__entete {
  margin-top: var(--sp-bloc);
  margin-bottom: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.realisations__entete .trait-h { flex: 1; }

.realisations {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8) var(--gouttiere);
  list-style: none;
  counter-reset: projet;
}

/* ---------- CARTE PROJET ---------- */

.projet { position: relative; }

.projet__lien {
  display: block;
  color: var(--fg);
}

.projet__cadre {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ratio-projet, 3 / 2);
  background-color: var(--noir-2);
  border-radius: 2px;
}

/* Couche de parallaxe : elle déborde de 12 % de chaque côté, de quoi
   absorber la course sans jamais découvrir le cadre. */
.projet__zoom {
  position: absolute;
  inset: -12% 0;
}

/* L'image porte le grossissement au survol, la couche au-dessus porte
   la parallaxe : deux transformations, deux éléments. */
.projet__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .8s var(--ease-sortie);
}

.projet__lien:hover .projet__img,
.projet__lien:focus-visible .projet__img { transform: scale(1.045); }

/* Voile discret : il ne porte aucun texte, il ne sert qu'à asseoir
   l'image sur le noir de la section. Il se densifie au survol. */
.projet__voile {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    rgba(17, 17, 15, .55) 0%,
    rgba(17, 17, 15, .12) 45%,
    rgba(17, 17, 15, 0) 100%
  );
  opacity: .8;
  transition: opacity var(--dur-moyen) var(--ease-net);
  pointer-events: none;
}

.projet__lien:hover .projet__voile { opacity: 1; }

/* Filet doré tracé sous l'image au survol. */
.projet__cadre::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-moyen) var(--ease-sortie);
}

.projet__lien:hover .projet__cadre::after,
.projet__lien:focus-visible .projet__cadre::after { transform: scaleX(1); }

/* ---------- LÉGENDE ---------- */
/* Sous l'image, jamais dessus. Les métadonnées d'un projet — lieu,
   surface, année — se lisent, elles ne se devinent pas à travers un
   dégradé. C'est ce qui distingue une réalisation d'une vignette. */

.projet__legende {
  position: relative;
  padding-top: var(--sp-4);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--sp-4);
  row-gap: var(--sp-2);
}

/* Un numéro, pas un paragraphe : il garde le corps des compteurs et ne
   suit pas le passage du texte courant à seize pixels. */
.projet__index {
  font-family: var(--display);
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--or);
  line-height: 1.3;
}

.projet__nom {
  font-family: var(--display);
  font-size: var(--fs-h4);
  font-weight: 400;
  letter-spacing: var(--ls-titre);
  line-height: 1.25;
  transition: color var(--dur-court) var(--ease-net);
}

.projet__lien:hover .projet__nom { color: var(--or); }

.projet__meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}

.projet__meta li { position: relative; }

/* Séparateur discret entre les métadonnées, jamais avant la première. */
.projet__meta li + li::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-4) / -2);
  top: 50%;
  width: var(--trait);
  height: .7em;
  transform: translateY(-50%);
  background-color: rgba(216, 207, 192, .35);
}

/* La première métadonnée est la catégorie : elle se distingue. */
.projet__meta li:first-child { color: var(--or); }

/* ---------- RESPONSIVE ---------- */

@media (min-width: 48rem) {
  .realisations { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  /* Rangée 1 : large puis étroit. Rangée 2 : étroit puis large.
     Rangée 3 : deux moitiés. Le motif s'inverse d'une rangée à
     l'autre, ce qui empêche l'œil de descendre en ligne droite. */
  .projet--large { grid-column: span 4; --ratio-projet: 16 / 10; }
  .projet--etroit { grid-column: span 2; --ratio-projet: 4 / 5; }
  .projet--moitie { grid-column: span 3; --ratio-projet: 3 / 2; }

  /* Le second projet large occupe la droite de sa rangée. */
  .projet--large:nth-of-type(4) { grid-column: 3 / span 4; }
}

@media (min-width: 64rem) {
  .realisations { gap: var(--sp-9) var(--gouttiere); }
  .realisations__entete { margin-top: clamp(3rem, 6vw, 6rem); }
}