/* ==========================================================
   05 — PROJETS
   Maquette Figma : 05_PROJECTS (1440 × 1100 px)
   ========================================================== */

.projets {
  aspect-ratio: 1440 / 1100;
  --hauteur: 1100;
  /* Vert olive à 92 % posé sur le fond crème de la page, comme dans Figma */
  background-color: rgba(56, 71, 31, 0.92);
  color: var(--creme);
}

/* ---------- Décor ---------- */

/* Noix de coco adoucies, qui se fondent progressivement dans le vert olive */
.projets__coco {
  max-width: none;
  object-fit: cover;
  opacity: 0.38;
  filter: saturate(0.55) contrast(0.8);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.7) 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.7) 40%, transparent 100%);
  pointer-events: none;
}

/* Grands écrans : la photo de fond et son fondu vont jusqu'aux bords de l'écran.
   Les panneaux restent à l'échelle des cartes, dans la composition. */
.projets__coco,
.projets__fondu {
  left: 0;
  width: 100%;
}

.projets__panneau--rose {
  background-color: var(--rose);
}

.projets__panneau--marron {
  background-color: var(--marron);
}

.projets__panneau--creme {
  background-color: var(--creme);
}

.projets__fondu {
  background-image: linear-gradient(to top, var(--vert-mousse), rgba(72, 86, 49, 0));
}

/* ---------- Titre « MES PROJETS » ---------- */

.projets__titre {
  margin: 0;
  /* Comme pour « À propos », la grande lettrine abaisse la ligne du titre */
  padding-top: calc(78 * var(--u));
  font-family: var(--police-capitales);
  font-size: calc(64 * var(--u));
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}

/* La jambe droite du « M » d'Aston Script s'arrête à 1,92 fois la taille de la lettre :
   avec une largeur de 2em, « ES PROJETS » commence juste après, avec un petit espace.
   Le « M » et « ES PROJETS » partagent la même ligne de base. */
.projets__lettrine {
  display: inline-block;
  width: 2em;
  font-family: var(--police-script);
  font-size: calc(var(--lettrine-echelle) * 1.3em);
  line-height: 0;
  text-transform: none;
}

.projets__studio {
  margin: 0;
  font-family: var(--police-serif);
  font-size: calc(64 * var(--u));
  line-height: normal;
  white-space: nowrap;
}

/* ---------- Boutons (texte placé comme dans Figma grâce à --tx et --ty) ---------- */

.projets__bouton {
  display: block;
  /* Le navigateur place Inria Serif un peu plus bas que Figma : −0,08 em compense */
  padding: calc((var(--ty) - 1) * var(--u) - 0.08em) 0 0 calc((var(--tx) - 1) * var(--u));
  border: calc(1 * var(--u)) solid var(--noir);
  border-radius: calc(20 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25);
  font-family: var(--police-serif);
  font-size: calc(32 * var(--u));
  line-height: normal;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.projets__bouton:focus-visible {
  outline: 2px solid var(--creme);
  outline-offset: 4px;
}

.projets__bouton--site {
  border-radius: calc(31 * var(--u));
  background-color: var(--gris-bouton);
  color: var(--noir);
  font-size: calc(40 * var(--u));
}

.projets__bouton--creme {
  background-color: var(--creme);
  color: var(--vert-mousse);
}

.projets__bouton--olive {
  background-color: var(--vert-mousse);
  color: var(--creme);
}

.projets__bouton--rose {
  background-color: var(--rose);
  color: var(--marron);
}

/* ---------- Cartes Polaroid ---------- */

.projets__cartes {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Les éléments de chaque carte sont placés directement dans la section (positions Figma) */
.projet {
  display: contents;
}

.projet__photo {
  border-radius: calc(23 * var(--u));
  object-fit: cover;
}

.projet__trombone {
  pointer-events: none;
}

/* ---------- Carte au premier plan ----------
   Seuls les panneaux se chevauchent : toute la carte suit son panneau.
   L'attribut data-selection, posé par js/interactions.js, active la montée et l'assombrissement :
   sans JavaScript, les cartes restent à leur place, avec leur luminosité d'origine. */

.projet > * {
  z-index: var(--plan);
}

.projet--active > * {
  z-index: 4;
}

.projets[data-selection] .projet > * {
  cursor: pointer;
  transform: translateY(calc(8 * var(--u)));
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.4s ease,
    translate 0.3s ease;
}

.projets[data-selection] .projet--active > * {
  transform: translateY(calc(-18 * var(--u)));
}

.projets[data-selection] .projet:not(.projet--active) > * {
  filter: brightness(0.55);
}

/* Le panneau devient un bouton (créé par js/interactions.js) */
.projets__panneau:is(button) {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.projets__panneau:focus-visible {
  outline: 3px solid var(--noir);
  outline-offset: calc(-10 * var(--u));
  box-shadow: inset 0 0 0 calc(10 * var(--u)) var(--creme);
}

@media (hover: hover) {
  .projets[data-selection] .projet:not(.projet--active):hover > * {
    filter: brightness(0.8);
  }

  .projets[data-selection] .projet:hover > :is(.projet__photo, .projet__trombone, .projets__bouton) {
    translate: 0 calc(-3 * var(--u));
  }
}

@media (prefers-reduced-motion: reduce) {
  .projets[data-selection] .projet > * {
    transition: none;
  }

  .projets[data-selection] .projet:hover > :is(.projet__photo, .projet__trombone, .projets__bouton) {
    translate: none;
  }
}