/* =========================================
   COVERS — sommaire des projets
   Une seule rangee de vignettes carrees, jointives,
   centree dans la fenetre. Le nom et une ligne de
   description n'apparaissent qu'au survol, sous la
   vignette — rien d'autre sur la page.
   ========================================= */

/* Les mains debordent de la fenetre (les bras sortent par les cotes) :
   la page coupe ce qui depasse, sans quoi elle defilerait en largeur.
   Padding haut > bas : la rangee se pose un peu sous le milieu, comme
   sur la maquette (52% de la hauteur). */
.covers-page {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8.5rem var(--gutter) 5.5rem;
  overflow: hidden;
}

/* ========== LA SCENE ==========
   --sw est la largeur de la rangee. Tout le reste — taille, position et
   angle des mains — en est une fraction, mesuree sur la maquette en y
   superposant la pose "ouverte" de chaque main. La composition garde
   donc ses proportions a toutes les tailles d'ecran.
   63.4vw : la part de la largeur qu'occupe la rangee sur la maquette.
   Le plafond en vh protege les ecrans tres larges et tres bas.
   Les valeurs ci-dessous sont l'etat final, au repos. Pendant l'ouverture,
   covers.js rapproche les mains et reduit la rangee, puis les ramene ici. */
.covers-stage {
  --sw: min(63.4vw, 170vh);
  position: relative;
  width: var(--sw);
}

/* Chaque vignette prend une part egale de la largeur, sans gouttiere :
   les carres se touchent. `min-width: 0` est indispensable — sans lui,
   la largeur minimale d'un element flex est celle de son contenu, et la
   rangee deborderait des qu'on ajoute un projet.
   Au-dessus des mains : sur la maquette, les paumes passent derriere.
   Pendant l'ouverture, covers.js la met a l'echelle autour de son centre ;
   au repos elle est a sa taille reelle (textes des legendes nets). */
.covers {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  transform-origin: 50% 50%;
}

/* Les mains : deux <canvas> dans lesquels covers.js dessine les images de
   la sequence. Pivot au coin haut-gauche (transform-origin: 0 0), comme
   dans la mesure ; `rotate` et `translate` sont des proprietes separees,
   si bien que l'animation deplace la main sans toucher a son angle.
   aspect-ratio = cadre des images recadrees : la taille affichee ne
   depend donc pas de la resolution interne du canvas, que le script
   ajuste a la densite de l'ecran. */
.covers-hand {
  position: absolute;
  z-index: 0;
  display: block;
  height: auto;
  transform-origin: 0 0;
  pointer-events: none;
  user-select: none;
}

/* Valeurs issues de la superposition sur la maquette (bandeau de 996px
   de large a x=295, y=359), exprimees en fractions de --sw. */
.covers-hand--left {
  left:  calc(var(--sw) * -0.6386);
  top:   calc(var(--sw) * -0.1419);
  width: calc(var(--sw) *  0.8993);
  aspect-ratio: 1158 / 706;
  rotate: -3.2deg;
}

.covers-hand--right {
  left:  calc(var(--sw) *  0.8644);
  top:   calc(var(--sw) * -0.2228);
  width: calc(var(--sw) *  0.9259);
  aspect-ratio: 1326 / 638;
  rotate: 13.1deg;
}

.cover {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  color: var(--ink);
}

.cover__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-2);
}

.cover__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s var(--ease-out);
}

.cover:hover .cover__img {
  transform: scale(1.05);
}

/* La legende est hors flux : elle apparait sans rien decaler. Elle peut
   etre plus large que sa case (une seule est visible a la fois). */
.cover__info {
  position: absolute;
  top: calc(100% + .85rem);
  left: 0;
  width: max(100%, 10rem);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .45s var(--ease-out);
  pointer-events: none;
}

.cover:hover .cover__info,
.cover:focus-visible .cover__info {
  opacity: 1;
  transform: none;
}

.cover__name {
  display: block;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.045em;
}

.cover__desc {
  display: block;
  margin-top: .2rem;
  font-size: .7rem;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

/* Projet non publie : la vignette n'est pas un lien. */
.cover--soon {
  cursor: default;
}

/* Fleche de retour vers le sommaire works (projets / cine / lab).
   Meme traitement que le retour des pages projet. */
.covers-back {
  position: fixed;
  /* Centre vertical = centre de la ligne du header : padding haut de la
     nav (1.5rem) + moitie de la hauteur du logo (34px de large -> 29.6px). */
  top: calc(1.5rem + 14.8px);
  translate: 0 -50%;
  left: calc(var(--gutter) + 4rem);
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  letter-spacing: .1em;
  color: var(--ink);
  padding: .5rem 1rem;
  background: rgba(255, 255, 255, 0.94); /* sans flou d'arriere-plan (couteux) */
  border-radius: 100px;
  transition: transform .4s var(--ease-out), color .3s ease;
}

.covers-back:hover {
  transform: translateX(-4px);
  color: var(--accent);
}

.covers-back svg { transition: transform .4s var(--ease-out); }
.covers-back:hover svg { transform: translateX(-3px); }

/* ========== MOBILE ==========
   Six carres sur une ligne seraient illisibles : on passe en grille de
   deux colonnes, bord a bord, sans marge ni gouttiere — un seul bloc
   d'images sur toute la largeur. Pas de legendes (pas de survol sur un
   ecran tactile) : on touche directement la vignette ; le alt de l'image
   donne son nom au lien. Les mains, calees sur une rangee unique, n'ont
   plus de sens : on les retire. covers.js ne charge alors aucune image
   et ne lance pas d'ouverture (meme seuil, 900px, des deux cotes). */
@media (max-width: 900px) {
  .covers-page {
    display: block;
    min-height: 0;
    padding: 8rem 0 0;
  }

  .covers-stage { width: 100%; }
  .covers-hand  { display: none; }

  .covers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    width: 100%;
  }

  .cover__info { display: none; }

  .covers-back {
    left: calc(var(--gutter) + 3rem);
  }
}

/* Telephone : un projet par ligne, bord a bord, on defile vers le bas. */
@media (max-width: 640px) {
  .covers { grid-template-columns: 1fr; }
}