/* Graphen Studio — Création de contenu
   Un plan de travail infini : les visuels sont posés autour du centre de
   l'écran et la molette fait avancer la vue « dans » l'image. Rien ne défile,
   tout grossit : chaque visuel s'éloigne du centre en grandissant, sort de
   l'écran, et un autre réapparaît au centre à sa place.

   Le placement et l'échelle sont entièrement posés par archive.js ;
   ce fichier ne décrit que le cadre et l'apparence. */

html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

.canvas {
  position: fixed;
  inset: 0;
  background: #fff;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.canvas:active { cursor: grabbing; }

/* Chaque visuel est posé en haut à gauche du cadre puis déplacé et mis à
   l'échelle par une seule transformation : aucun calcul de mise en page
   pendant le mouvement. */
.canvas__item {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
  display: grid;
  place-items: center;
  pointer-events: none;
}
/* Cadre carré, image centrée dedans. archive.js la ramène à sa proportion une
   fois chargée : seule l'image reçoit les clics, jamais les bandes vides du
   carré, qui masquaient les visuels de derrière. */
.canvas__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: auto;
}
/* Visuel éteint ou presque transparent : il laisse passer les clics */
.canvas__item.is-inerte img { pointer-events: none; }

/* Vignette périphérique blanche */
.canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: .65;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 45%, #fff 100%);
}

/* Un visuel ouvert en grand, par-dessus le plan de travail. Le fondu est celui
   des transitions de page : même durée, même courbe. */
.canvas-plein {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #fff;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity .5s var(--ease-page);
}
.canvas-plein.is-on { opacity: 1; }

/* Le cadre est donné en unités d'écran, pas en pourcentages : la rangée de la
   grille est en `auto`, et un pourcentage ne se résout pas contre une hauteur
   indéfinie — les visuels hauts s'affichaient alors à leur taille naturelle et
   débordaient par le bas. « contain » les ramène entiers dans ce cadre, qu'ils
   soient plus grands ou plus petits que l'écran. */
.canvas-plein img {
  width: calc(100vw - 40px);
  height: calc(100vh - 40px);
  height: calc(100dvh - 40px);
  object-fit: contain;
}

/* Titre de la page : à gauche, à mi-hauteur, au-dessus du plan de travail */
.archive-title {
  position: fixed;
  left: var(--edge);
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.025em;
  mix-blend-mode: difference;
  color: #fff;
}

/* Le logo du pied de page passe aussi au-dessus des visuels */
.p-foot { mix-blend-mode: difference; }
.p-foot .wordmark__g, .p-foot .wordmark__s { color: #fff; }
.menu-btn { mix-blend-mode: difference; --c1: #fff; }

/* Disposition sous 1200 px */
@media (max-width: 1199px) {
  .archive-title { font-size: 18px; }
  .m-header { mix-blend-mode: difference; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .m-header .wordmark__g, .m-header .wordmark__s { color: #fff; }
}