/* =========================================
   LAB — la table en vrac (js/lab-table.js)
   Un seul ecran, pas de scroll : les visuels sont poses de travers et
   derivent ; legende des projets en bas a gauche, compteur et bouton
   "shuffle" en bas a droite ; fiche projet en surimpression au clic.
   ========================================= */

body[data-page="lab"] {
  overflow: hidden;
  height: 100svh;
  overscroll-behavior: none;
}

/* La table : toute la fenetre. isolation : les z-index des cartes (qui
   montent a chaque prise) restent sous la nav et le bouton retour. */
.lab-table {
  position: fixed;
  inset: 0;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- Table lumineuse (negatoscope) ----------
   Sans couleur ni lueur : ce qui fait lire le retro-eclairage, c'est le
   contraste. La piece est d'un gris neutre plus sombre ; au centre, un
   caisson lumineux (cadre alu gris, dalle d'un blanc pur, plus claire au
   centre) qui est la chose la plus claire de la page. Les cartes sont
   des tirages poses dessus, traverses par la lumiere : elles se
   multiplient avec la dalle (mix-blend-mode), donc la ou deux cartes se
   chevauchent la zone fonce, comme des calques sur une table lumineuse.
   Au survol ou en main, la carte quitte la dalle : elle redevient
   opaque et fait une ombre. */
body[data-page="lab"] {
  background: #fff;
}

.lab-table::before,
.lab-table::after {
  content: '';
  position: absolute;
  inset: 100px 10% 68px;
  border-radius: 2px;
  z-index: -1;
  pointer-events: none;
}

/* Le caisson : dalle blanche, simple filet gris et ombre tres legere */
.lab-table::before {
  /* Blanc pur partout, sauf dans les quatre coins ou la lumiere retombe
     (vignettage concentre sur les angles, les bords droits restent
     blancs) : on lit un caisson eclaire par l'arriere. */
  background:
    radial-gradient(circle at 0 0, rgba(10, 10, 10, .2) 0, rgba(10, 10, 10, .07) 160px, transparent 320px),
    radial-gradient(circle at 100% 0, rgba(10, 10, 10, .2) 0, rgba(10, 10, 10, .07) 160px, transparent 320px),
    radial-gradient(circle at 0 100%, rgba(10, 10, 10, .2) 0, rgba(10, 10, 10, .07) 160px, transparent 320px),
    radial-gradient(circle at 100% 100%, rgba(10, 10, 10, .2) 0, rgba(10, 10, 10, .07) 160px, transparent 320px),
    #ffffff;
  box-shadow:
    0 0 0 1px rgba(10, 10, 10, .1),
    0 12px 32px rgba(10, 10, 10, .06);
}

/* Graduation fine sur la dalle, qui s'estompe vers les bords */
.lab-table::after {
  background-image:
    linear-gradient(rgba(10, 10, 10, .095) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, .095) 1px, transparent 1px),
    linear-gradient(rgba(10, 10, 10, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, .04) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 45%, transparent 100%);
          mask-image: radial-gradient(80% 80% at 50% 50%, #000 45%, transparent 100%);
}

@media (max-width: 720px) {
  .lab-table::before,
  .lab-table::after { inset: 88px 4% 68px; }
  .lab-table::before {
    box-shadow:
      0 0 0 1px rgba(10, 10, 10, .1),
      0 8px 20px rgba(10, 10, 10, .06);
  }
}

/* ---------- Bras articules ----------
   Quatre bras (photo sur fond blanc, fondue dans la page par multiply)
   viennent pincer la dalle a ses coins ; leur tige sort de l'ecran.
   Memes retraits que la dalle : haut 100px, cotes 10 %, bas 68px.
   L'image a la pince a gauche : on la retourne pour les bras de gauche. */
.lt-arms {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  /* Sur le conteneur (et non sur chaque image) : le conteneur forme son
     propre groupe, c'est lui qu'il faut fondre avec la page */
  mix-blend-mode: multiply;
}

.lt-arm {
  --arm-w: clamp(170px, 13vw, 280px);
  --grip: calc(var(--arm-w) * .16); /* longueur de pince posee sur la dalle */
  position: absolute;
  width: var(--arm-w);
  height: auto;
  -webkit-user-drag: none;
}

/* Droite : pince a gauche de l'image, tige vers la droite */
.lt-arm--tr,
.lt-arm--br {
  left: calc(90% - var(--grip));
  transform-origin: 0 50%;
}
.lt-arm--tr { top: 118px; transform: translateY(-50%) rotate(-7deg); }
.lt-arm--br { bottom: 86px; transform: translateY(50%) rotate(-2deg); }

/* Gauche : image retournee, pince a droite, tige vers la gauche */
.lt-arm--tl,
.lt-arm--bl {
  /* retourne autour de son centre : il garde sa place */
  left: calc(10% + var(--grip) - var(--arm-w));
  transform-origin: 50% 50%;
}
.lt-arm--tl { top: 118px; transform: translateY(-50%) rotate(7deg) scaleX(-1); }
.lt-arm--bl { bottom: 86px; transform: translateY(50%) rotate(2deg) scaleX(-1); }

@media (max-width: 720px) {
  .lt-arm { --arm-w: 27vw; }
  .lt-arm--tr, .lt-arm--br { left: calc(96% - var(--grip)); }
  .lt-arm--tl, .lt-arm--bl { left: calc(4% + var(--grip) - var(--arm-w)); }
  .lt-arm--tr, .lt-arm--tl { top: 100px; }
  .lt-arm--br, .lt-arm--bl { bottom: 80px; }
}

.lt-card {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  will-change: transform;
  /* Posee a plat sur la dalle : pas d'ombre */
  box-shadow: 0 0 0 1px rgba(10, 10, 10, .06);
  transition: opacity .35s ease, box-shadow .3s ease;
  -webkit-tap-highlight-color: transparent;
}

.lt-card > * {
  opacity: .88;
  /* Chaque carte assombrit un peu ce qu'elle recouvre : plus il y a de
     cartes empilees, plus le blanc fonce, comme des tirages superposes
     sur une table lumineuse. */
  filter: brightness(.94);
  transition: opacity .3s ease, filter .3s ease;
}

/* Toutes les cartes se multiplient avec la dalle et entre elles */
.lt-card { mix-blend-mode: multiply; }

/* Bords plus sombres, comme une lamelle ou un film vu en transparence :
   la lumiere traverse plus de matiere sur la tranche. Un filet net et un
   degrade court vers l'interieur. */
.lt-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(10, 10, 10, .12),
    inset 0 0 6px rgba(10, 10, 10, .06);
  transition: opacity .3s ease;
}
.lt-card:hover::after,
.lt-card.is-drag::after { opacity: .35; }

/* Croquis et plans (papier blanc) : la lumiere les traverse. Le blanc du
   papier se fond dans la dalle, seul le trait reste, et deux feuilles
   superposees se lisent l'une a travers l'autre. Les photos et visuels
   sombres n'ont pas ce traitement (ils feraient des pavés noirs). */

/* Soulevee de la dalle : opaque, ombre, plus de transparence */
.lt-card:hover,
.lt-card.is-drag { mix-blend-mode: normal; }
.lt-card:hover > *,
.lt-card.is-drag > * { opacity: 1; filter: none; }
.lt-card img,
.lt-card video {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  transition: transform .45s var(--ease-out);
}

.lt-card { overflow: hidden; }

/* Carte Lottie : cadre 16:9, fond pose en style par js/lab-table.js */
.lt-lottie {
  width: 100%;
  aspect-ratio: 16 / 9;
  pointer-events: none;
}
.lt-lottie svg,
.lt-sheet__lottie svg { display: block; width: 100% !important; height: 100% !important; }

.lt-sheet__lottie {
  position: absolute;
  inset: 0;
}
/* Le display:block des medias de la fiche ecrasait l'attribut hidden : la
   video Boost restait par-dessus les images des autres projets. */
.lt-sheet__media [hidden] { display: none !important; }
/* Survol : la carte se souleve un peu de la plaque */
.lt-card:hover {
  box-shadow: 0 0 0 1px rgba(10, 10, 10, .1), 0 10px 24px rgba(10, 10, 10, .12);
}

/* Prise en main : une vraie ombre apparait */
.lt-card.is-drag {
  cursor: grabbing;
  box-shadow: 0 0 0 1px rgba(10, 10, 10, .1), 0 22px 48px rgba(10, 10, 10, .18);
}
.lt-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Survol d'un projet : le reste de la table s'efface un peu */
.lab-table.is-focus .lt-card:not(.is-on) { opacity: .28; }
.lab-table.is-dragging .lt-card { opacity: 1; }

/* Etiquette qui suit le curseur */
.lt-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  pointer-events: none;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: pre;
  color: #fff;
  background: var(--ink);
  padding: .35rem .6rem;
  border-radius: 100px;
  opacity: 0;
  transition: opacity .2s ease;
}
.lt-tip.is-on { opacity: 1; }

/* ---------- Legende (bas gauche) et compteur (bas droite) ---------- */
.lt-legend,
.lt-hud {
  position: fixed;
  bottom: clamp(1rem, 2.5vh, 1.75rem);
  z-index: 110;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lt-legend {
  left: var(--gutter);
  list-style: none;
  margin: 0;
  padding: .6rem .8rem;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
}

.lt-legend button {
  display: grid;
  grid-template-columns: 2.4em auto 2em;
  align-items: baseline;
  width: 100%;
  padding: .22rem 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .2s ease;
}
.lt-legend button:hover,
.lt-legend button.is-on { color: var(--ink); }
.lt-legend__n { text-align: right; opacity: .6; }

.lt-hud {
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--ink-soft);
}

.lt-hud__hint { opacity: .8; }

.lt-shuffle {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: #fff;
  background: var(--ink);
  border: 0;
  border-radius: 100px;
  padding: .55rem 1rem;
  cursor: pointer;
  transition: transform .3s var(--ease-out);
}
.lt-shuffle:hover { transform: scale(1.05); }

/* ---------- Fiche projet ---------- */
.lt-sheet {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}

.lt-sheet[hidden] { display: none; }

.lt-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .35s ease;
}

.lt-sheet__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(16rem, 1fr);
  width: min(1180px, 100%);
  max-height: 100%;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(10, 10, 10, .18);
  opacity: 0;
  transform: translateY(16px) scale(.97);
  transition: opacity .35s ease, transform .45s var(--ease-out);
}

.lt-sheet.is-open .lt-sheet__backdrop { opacity: 1; }
.lt-sheet.is-open .lt-sheet__panel { opacity: 1; transform: none; }

.lt-sheet__media {
  position: relative;
  background: #fff;
  aspect-ratio: 4 / 3;
  cursor: pointer;
}

.lt-sheet__media img,
.lt-sheet__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Fleches precedent / suivant, sur les bords du grand visuel */
.lt-sheet__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 2.6rem;
  height: 2.6rem;
  translate: 0 -50%;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(10, 10, 10, .12);
  transition: transform .3s var(--ease-out);
}
.lt-sheet__arrow[hidden] { display: none; }
.lt-sheet__arrow--prev { left: .9rem; }
.lt-sheet__arrow--next { right: .9rem; }
.lt-sheet__arrow:hover { transform: scale(1.1); }

.lt-sheet__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  overflow-y: auto;
}

.lt-sheet__num {
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--ink-soft);
}

.lt-sheet__name {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1;
}

.lt-sheet__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem 1rem;
  margin: 0;
  font-size: .78rem;
}
.lt-sheet__meta dt {
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .66rem;
  padding-top: .1rem;
}
.lt-sheet__meta dd { margin: 0; }

.lt-sheet__desc {
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.lt-sheet__count {
  display: flex;
  gap: .8rem;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: auto;
}
.lt-sheet__count span:first-child { color: var(--ink); }

.lt-sheet__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 6px;
}
.lt-sheet__thumbs button {
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  border-radius: 4px;
  background: #eee center / cover no-repeat;
  cursor: pointer;
  opacity: .45;
  transition: opacity .2s ease;
}
.lt-sheet__thumbs button:hover,
.lt-sheet__thumbs button.is-on { opacity: 1; }
.lt-sheet__thumbs button.is-on { outline: 1.5px solid var(--ink); outline-offset: 2px; }

.lt-sheet__nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .5rem;
  border-top: 1px solid var(--line);
}
.lt-sheet__nav button {
  border: 0;
  background: none;
  padding: .4rem 0;
  font: inherit;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.lt-sheet__nav button:hover { opacity: .6; }

.lt-sheet__close {
  position: absolute;
  top: .8rem;
  right: .8rem;
  z-index: 2;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(10, 10, 10, .12);
  transition: transform .3s var(--ease-out);
}
.lt-sheet__close:hover { transform: rotate(90deg); }

/* ---------- Telephone ---------- */
@media (max-width: 720px) {
  .lt-legend {
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    border-radius: 0;
    padding: .6rem var(--gutter);
    scrollbar-width: none;
  }
  .lt-legend::-webkit-scrollbar { display: none; }
  .lt-legend li { flex: 0 0 auto; }
  .lt-legend button {
    display: flex;
    gap: .4rem;
    white-space: nowrap;
    padding: .45rem .7rem;
    border: 1px solid var(--line);
    border-radius: 100px;
  }
  .lt-legend__n { display: none; }

  .lt-hud {
    bottom: auto;
    top: 4.6rem;
    right: var(--gutter);
  }
  .lt-hud__hint,
  .lt-hud__count { display: none; }

  .lt-sheet { padding: 0; }
  .lt-sheet__panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    border-radius: 0;
  }
  .lt-sheet__media { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .lt-sheet__panel, .lt-sheet__backdrop, .lt-card { transition: none; }
}

/* ---------- Telephone : table longue, a faire defiler ----------
   Sur un petit ecran, toutes les cartes sur un seul ecran se recouvraient
   au point de devenir illisibles. La dalle s'allonge donc vers le bas
   (hauteur --lab-h calculee par js/lab-table.js selon le nombre de
   cartes) et la page defile. Pas de glisser-deposer : le doigt fait
   defiler, un toucher ouvre la fiche. Les bras suivent la dalle. */
@media (max-width: 720px) {
  body[data-page="lab"] {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    overscroll-behavior: auto;
  }

  .lab-page {
    position: relative;
    height: var(--lab-h, 100svh);
  }

  .lab-table,
  .lt-arms {
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--lab-h, 100svh);
  }

  .lab-table { touch-action: pan-y; }

  .lt-card { cursor: pointer; touch-action: pan-y; }
}