/* =========================================================
   RESET DE BASE
   ========================================================= */
* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* =========================================================
   THEMES - light (defaut) / dark, choisis via le petit switch
   en bas a gauche (cf. .theme-switcher). Seul le chrome du site
   (bandeau, fonds de page, textes) suit le theme ; le panneau
   projet (fond rose) n'est pas concerne pour le moment, il sera
   repense a part.
   ========================================================= */
:root {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #b3b3b3;
  --muted-2: #9a9a9a;
  --accent-pink: #ffc5dd;
  /* Vert pastel utilise brievement au clic sur tout element rose
     (demande explicite : "on garde l'option rose mais quand on clique
     dessus ca devient vert pastel juste le moment du clic et puis ca
     redevient rose") — meme douceur/saturation que le rose. */
  --accent-green: #c9ecc9;
  /* Helvetica Regular (demande explicite du client, capture a l'appui) :
     sans-serif nette, tout en majuscules, petite taille, graisse
     normale — utilisee partout dans l'interface (menu, horloge,
     bascules plan/grille et clair/sombre) pour une typo coherente sur
     tout le site. */
  --font-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html[data-theme="dark"] {
  --bg: #000000;
  --fg: #ffffff;
  --muted: #767676;
  --muted-2: #9a9a9a;
}

/* =========================================================
   EFFET DE CLIC ROSE -> VERT PASTEL (demande explicite) : tout lien
   ou bouton qui porte l'accent rose du site passe brievement au vert
   pastel au moment du clic, puis reprend son rose habituel. La classe
   .is-pink-flash est ajoutee/retiree en JS (script.js) ; la transition
   est portee par chaque element concerne pour que l'aller ET le retour
   soient fondus (pas un changement de couleur instantane). */
.site-nav a,
.theme-btn,
.works-view-btn,
.about-link,
.work-grid-index {
  transition: color 0.18s ease;
}

.is-pink-flash {
  color: var(--accent-green) !important;
}

/* La page HOME reste TOUJOURS blanche, meme si le theme sombre est
   actif ailleurs sur le site (demande explicite) — script.js ajoute
   cette classe sur <html> uniquement pendant que la page Home est
   affichee. Meme specificite que la regle [data-theme="dark"]
   ci-dessus : placee apres, elle l'emporte toujours quand les deux
   s'appliquent en meme temps. */
html.home-light-lock {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #b3b3b3;
  --muted-2: #9a9a9a;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  font-family: var(--font-ui);
  overflow: hidden;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.intro-locked {
  overflow: hidden;
  height: 100vh;
}

/* =========================================================
   ENTREE - fond blanc, "Fayma Houlame" au centre : le texte
   remonte depuis le bas (masque overflow-hidden) pendant qu'un
   degrade le remplit de gris vers noir, de gauche a droite,
   pilote par la custom property --progress (meme technique que
   jeankhamkwan.com). Se joue seul au chargement (script.js
   ajoute .is-revealed), puis une petite video prend le relais
   au centre (.show-video), puis enchaine automatiquement sur le
   site ; un clic/touche pendant l'anim saute direct dedans.
   ========================================================= */
@property --progress {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

#intro-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  cursor: pointer;
  transition: opacity 0.6s ease;
}

#intro-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.intro-name-mask {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  display: inline-block;
  padding: 0 0.05em;
  opacity: 1;
  transition: opacity 0.4s ease;
}

#intro-screen.show-video .intro-name-mask {
  opacity: 0;
}

.intro-name {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 11px;
  --progress: 0%;
  background-image: linear-gradient(
    to right,
    #000000 0%,
    #000000 var(--progress),
    #ffc5dd var(--progress),
    #ffc5dd 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transform: translateY(100%);
  transition: --progress 1.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#intro-screen.is-revealed .intro-name {
  --progress: 100%;
  transform: translateY(0%);
}

.intro-video-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(46vw, 540px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

#intro-screen.show-video .intro-video-wrap {
  opacity: 1;
}

#intro-video {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
   SITE PRINCIPAL - revele apres l'intro
   ========================================================= */
#site-content {
  opacity: 0;
  transition: opacity 0.4s ease;
  height: 100%;
}

#site-content.is-visible {
  opacity: 1;
}

/* Nav - bandeau fixe colle au bord (top:0, 20px de marge gauche/droite),
   liens groupes a gauche, l'horloge en haut a droite. Helvetica
   Regular partout (demande explicite, capture a l'appui), 12px,
   graisse normale/400, pas de tracking ajoute, tout en majuscules.
   Page courante dans le rose exact fourni par le client, meme
   principe applique aux deux bascules en bas de page (plan/grille,
   clair/sombre) pour rester coherent sur toute l'interface. */
.site-nav {
  position: fixed;
  top: 0;
  left: 20px;
  right: 20px;
  z-index: 100;
  height: 42px;
  font-family: var(--font-ui);
}

/* 4 elements positionnes independamment (mockup client, capture a
   l'appui) : Home colle a gauche, horloge+Paris vers 57%, About vers
   80%, Projects (ex-Work, renomme) tout a droite en rose — plus un
   simple groupe de liens + horloge a droite, chaque element a sa
   propre position en % de la largeur du bandeau. */
.site-nav a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a.is-active {
  color: #ffc5dd;
}

.site-nav-home {
  left: 0;
}

/* About et Work ont echange leurs positions (demande explicite) :
   About est maintenant tout a droite, Work reprend l'emplacement vers
   80% qu'occupait About. */
.site-nav-about {
  right: 0;
  left: auto;
}

.site-nav-projects {
  left: 80%;
}

@media (max-width: 480px) {
  .site-nav {
    left: 16px;
    right: 16px;
  }

  .site-nav a {
    font-size: 12px;
  }

  .site-nav-projects {
    left: 74%;
  }
}

/* Horloge Paris - meme ligne "12:03 AM PARIS" (demande explicite),
   positionnee vers 57% de la largeur du bandeau (mockup client),
   entre Home et About. */
.site-clock {
  position: absolute;
  top: 50%;
  left: 57%;
  transform: translateY(-50%);
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--fg);
  pointer-events: none;
}

.top-bar-time {
  color: var(--fg);
}

.top-bar-city {
  color: #ffc5dd;
}

@media (max-width: 480px) {
  .site-clock {
    left: 42%;
    font-size: 12px;
    gap: 4px;
  }
}

/* Bas gauche : bascule Map / Grid (demande explicite : prend la place
   qu'occupait le switch de theme). Bas droite : switch de theme
   (prend la place qu'occupait l'horloge). Meme style texte simple,
   separateur "/" entre les deux options des deux groupes. */
.theme-switcher {
  position: fixed;
  bottom: 22px;
  right: 32px;
  z-index: 90;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
}

/* Cache sur la page Home : le theme sombre n'a de toute facon aucun
   effet visible dessus (elle reste toujours blanche). */
.theme-switcher.is-hidden {
  display: none;
}

/* Cache aussi des qu'un panneau projet est ouvert (page-works) : sur
   un projet video, le bandeau de controles sur-mesure (PAUSE/MUTE, cf.
   .work-video-controls plus bas) est deja en bas de l'ecran -> le
   switch LIGHT/DARK par-dessus rendait la zone confuse/chargee (retour
   client repete). Plus fiable qu'une marge calculee au pixel pres, qui
   depend du ratio de chaque video : on masque simplement le switch
   tant que .work-detail est ouvert, quel que soit le format du media. */
main:has(.work-detail.is-open) .theme-switcher {
  display: none;
}

.theme-btn-sep {
  color: var(--muted);
}

.theme-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--fg);
  cursor: pointer;
  transition: color 0.2s ease;
}

.theme-btn:hover,
.theme-btn.is-active {
  color: #ffc5dd;
}

@media (max-width: 480px) {
  .theme-switcher {
    right: 16px;
    bottom: 16px;
  }
}

/* =========================================================
   PAGES - une seule visible a la fois
   ========================================================= */
.page {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.page.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* --- WORKS ---
   Plan pannable en pleine page (meme moteur que la page Home/Index,
   tailles tres variees, larges espaces blancs, aucune categorie —
   tous les projets sont toujours presents) + bascule vers une grille
   masonry classique. Un HUD minimal (bascule Canvas/Grid + titre du
   projet survole) flotte en haut a gauche, texte simple sans ombre
   portee ni halo. */
.works-wrap {
  position: absolute;
  inset: 0;
}

/* Plan pannable a l'infini (drag souris/doigt ou molette/trackpad,
   avec inertie) : toutes les covers, sans decoupage par categorie,
   disposees en mosaique a tailles tres variees. Aucun nom sous les
   images — seul le HUD affiche le titre au survol. */
.works-canvas-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.works-canvas-wrap.is-dragging {
  cursor: grabbing;
}

.works-canvas-wrap.is-hidden {
  display: none;
}

.works-canvas {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}

.works-canvas-item {
  position: absolute;
  cursor: pointer;
  user-select: none;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
  will-change: transform;
}

.works-canvas-item img,
.works-canvas-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  background: #000;
}

/* Effet "focus" au survol (demande explicite) : la vignette survolee
   se detache legerement du plan (zoom doux), sans assombrir/estomper
   les autres (l'opacite sur les autres vignettes a ete retiree,
   demande explicite). */
.works-canvas-item.is-hovered {
  transform: scale(1.06);
  z-index: 2;
}

/* Bascule d'affichage (demande explicite) : texte separe par "/"
   (Map / Grid), prend desormais la place qu'occupait le switch de
   theme, en bas a gauche. */
.works-view-switch {
  position: fixed;
  bottom: 22px;
  left: 32px;
  z-index: 60;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
}

.works-view-sep {
  color: var(--muted);
}

.works-view-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--fg);
  cursor: pointer;
  transition: color 0.2s ease;
}

.works-view-btn:hover,
.works-view-btn.is-active {
  color: #ffc5dd;
}

@media (max-width: 900px) {
  .works-view-switch {
    left: 24px;
    bottom: 18px;
  }
}

/* --- Vue grille : alternative classique au plan pannable (demande
   explicite, esprit suzieandleo.com/projects) — grille fixe a 6
   colonnes, une image ou video par projet en respectant son propre
   ratio (pas de recadrage force), legende [numero / titre] dessous,
   melange photo/video au fil de la meme selection deja triee pour le
   plan. Defilement vertical classique (molette/trackpad), pas de
   glisser-deposer. */
.works-grid-wrap {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.works-grid-wrap.is-hidden {
  display: none;
}

/* Grille en lignes de 6 (esprit exact suzieandleo.com/projects, demande
   explicite) : les 55 projets restent dans leur ordre, groupes ligne
   par ligne — pas une mosaique qui reordonne dans la colonne la plus
   courte. Chaque carte garde une largeur de colonne fixe et une
   hauteur naturelle (son propre ratio, aucun recadrage force) ; le
   flex-wrap forme les lignes tout seul et align-items:flex-end cale
   toutes les legendes d'une meme ligne sur la meme ligne horizontale
   du bas — un visuel plus court que son voisin laisse naturellement
   une zone blanche au-dessus de lui (comme sur la reference : 007 en
   video n'est pas tres haut, 009 tres haut juste a cote, et c'est
   cette irregularite qui fait "respirer" la page). Pur CSS, pas de JS
   de positionnement : flex-wrap regroupe deja automatiquement 6
   cartes par ligne (6 x 1/6 de largeur = 100%), puis 4 et 2 aux
   paliers mobiles ci-dessous. */
.works-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 28px 20px;
  padding: calc(var(--top-bar-h, 84px) + 48px) 40px 90px;
}

.work-grid-card {
  display: block;
  width: calc((100% - 20px * 5) / 6);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.work-grid-media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio, 0.8);
  overflow: hidden;
  background: var(--muted);
}

.work-grid-media img,
.work-grid-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  background: #000;
}

.work-grid-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
}

.work-grid-index {
  color: #ffc5dd;
  flex: none;
}

.work-grid-title {
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

/* 4 colonnes (meme palier que l'ancienne CSS grid) : le flex-wrap
   regroupe alors 4 cartes par ligne au lieu de 6. */
@media (max-width: 1100px) {
  .work-grid-card {
    width: calc((100% - 20px * 3) / 4);
  }
}

@media (max-width: 700px) {
  .works-grid {
    gap: 20px 14px;
    padding: calc(var(--top-bar-h, 140px) + 32px) 20px 70px;
  }

  .work-grid-card {
    width: calc((100% - 14px * 1) / 2);
  }
}

/* =========================================================
   PAGE PROJET (esprit ruesaintabel.paris : cliquer une image du flux
   ou de la grille ouvre une page projet dediee en lecture
   horizontale) : plein ecran, galerie (ou video) cote a cote,
   defilement horizontal, credits fixes en haut a gauche.
   ========================================================= */
.work-detail {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.work-detail.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}

/* --- entete : titre + credits a gauche, fermeture a droite, sous
   le bandeau superieur qui reste visible et cliquable par-dessus --- */
.work-detail-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  /* Marge gauche alignee sur celle du bandeau (.site-nav a le sien a
     20px), pour que le nom du projet tombe exactement sous HOME
     (demande explicite : "EMA PRESS doit etre aligne a HOME"). */
  padding: calc(var(--top-bar-h, 84px) + 24px) 32px 16px 20px;
}

.work-detail-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.work-detail-code {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--fg);
}

.work-detail-credits {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.work-detail-credits:empty {
  display: none;
}

/* Une ligne complete par credit : "ROLE — NOM(S)" cote a cote (demande
   explicite). Le panneau (.work-detail-info-panel, plus bas) est assez
   large pour que ces lignes ne se coupent pas au milieu. */
.work-detail-credits p {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--muted-2);
  line-height: 1.6;
}

/* Role ("Photographie", "Stylisme"...) mis en avant dans le rose de
   l'interface, comme les libelles Year/Client/Type du panneau. */
.work-detail-credit-role {
  color: var(--accent-pink);
}

/* Nom/compte credite, cliquable vers son profil Instagram quand un
   lien est fourni — meme logique que les liens de la page About
   (couleur neutre, rose au survol). */
.work-detail-credit-link {
  color: var(--muted-2);
  text-decoration: none;
  transition: color 0.18s ease;
}

.work-detail-credit-link:hover {
  color: #ffc5dd;
}

/* --- credits du projet : rond "C" a cote du nom du projet (donc pres
   du lien HOME, tout en haut a gauche), invisible tant qu'on n'a pas
   atteint la derniere photo du defilement horizontal (cf. work-canvas.js
   qui bascule .is-visible), et sans donnees pour le moment -> .is-empty
   le masque completement (l'interface est prete, le contenu viendra
   projet par projet). Le detail (annee/client/type + roles-noms) se
   revele au survol du rond, ou au clic (pour le tactile). --- */
.work-detail-info {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.35s ease, visibility 0s linear 0.35s, transform 0.35s ease;
}

.work-detail-info.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.35s ease, visibility 0s linear 0s, transform 0.35s ease;
}

.work-detail-info.is-empty {
  display: none;
}

.work-detail-info-toggle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--accent-pink);
  background: none;
  color: var(--accent-pink);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.work-detail-info-toggle:hover,
.work-detail-info.is-open .work-detail-info-toggle {
  background: var(--accent-pink);
  color: var(--bg);
}

.work-detail-info-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 190px;
  /* S'ajuste a son contenu (les lignes de credit ne doivent jamais se
     couper au milieu, cf. .work-detail-credits p) plutot qu'une largeur
     fixe trop etroite, avec un plafond pour rester lisible/rester dans
     l'ecran meme si une ligne est tres longue. */
  width: max-content;
  max-width: min(90vw, 420px);
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--muted);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s, transform 0.2s ease;
}

.work-detail-info:hover .work-detail-info-panel,
.work-detail-info.is-open .work-detail-info-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.2s ease, visibility 0s linear 0s, transform 0.2s ease;
}

.work-detail-info-meta {
  margin: 0 0 8px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
}

.work-detail-info-meta:empty {
  display: none;
  margin-bottom: 0;
}

.work-detail-info-meta dt {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--accent-pink);
}

.work-detail-info-meta dd {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--muted-2);
}

.work-detail-close {
  flex: 0 0 auto;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--fg);
  cursor: pointer;
  padding: 0;
}

.work-detail-close:hover {
  opacity: 0.6;
}

/* --- filmstrip horizontal : images cote a cote, marges entre chaque
   media et centrees verticalement dans la bande (esprit worldplus.fr/
   worlds : .project-media-wrapper a des marges entre vignettes et une
   video toujours bien centree, jamais collee/etiree). --- */
.work-detail-viewer {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  /* "safe center" : centre la video/galerie quand elle tient dans
     l'ecran (comme sur worldplus.fr), mais revient a un alignement
     normal des qu'il y a plus de contenu que de place, pour ne
     jamais rendre le debut du defilement horizontal inaccessible. */
  justify-content: flex-start;
  justify-content: safe center;
  gap: 28px;
  padding: 0 40px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.work-detail-media {
  display: block;
  height: 100%;
  max-height: 100%;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  align-self: center;
}

video.work-detail-media {
  background: #000;
  object-fit: contain;
}

/* --- controles video sur-mesure (page projet a video unique) : plus
   d'icones natives du lecteur (juges "moches", demande explicite) —
   un bandeau texte en bas de la video, meme esprit typographique que
   le reste du site (Helvetica Neue, majuscules, graisse normale) :
   temps ecoule / duree, barre de progression fine, PAUSE/PLAY et
   MUTE/UNMUTE cliquables (cf. attachVideoControls() dans
   work-canvas.js). Le conteneur reprend exactement le gabarit de
   .work-detail-media pour que le bandeau se superpose pile sur la
   video, quelle que soit sa proportion. --- */
.work-video-wrap {
  position: relative;
  display: inline-flex;
  height: 100%;
  max-height: 100%;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  align-self: center;
}

.work-video-wrap .work-detail-media {
  height: 100%;
  width: auto;
  max-width: none;
}

.work-video-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Marge basse genereuse : le switch clair/sombre du site (.theme-switcher)
     est fixe en bas a droite de l'ecran (bottom:22px) par-dessus tout le
     reste -> sans cet espace, PAUSE/MUTE et LIGHT/DARK se chevauchaient
     visuellement (demande explicite : les vouloir clairement separes). */
  padding: 14px 18px 52px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.work-video-controls * {
  pointer-events: auto;
}

.work-video-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.work-video-row-time {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
}

.work-video-progress {
  height: 2px;
  width: 100%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

.work-video-progress-fill {
  height: 100%;
  width: 0%;
  background: #ffffff;
}

.work-video-row-actions {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.work-video-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.18s ease;
}

.work-video-btn:hover {
  opacity: 0.6;
}

@media (max-width: 780px) {
  .work-detail-viewer {
    gap: 16px;
    padding: 0 20px;
  }
}

@media (max-width: 780px) {
  .work-detail-head {
    padding: calc(var(--top-bar-h, 140px) + 16px) 20px 12px 20px;
  }
}

/* =========================================================
   ABOUT (esprit Sept. 1 valide par Fayma) : colonne de texte centree,
   pas d'image — nom, lieu, roles, contact. La page utilise le
   centrage par defaut de .page (cf. plus haut).
   ========================================================= */

.about-inner {
  max-width: 480px;
  text-align: center;
  font-family: var(--font-ui);
}

.about-name {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #ffc5dd;
}

.about-location {
  margin: 0 0 28px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--fg);
}

.about-roles {
  margin: 0 0 36px;
}

.about-roles p {
  margin: 2px 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--fg);
}

.about-contact-label {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: normal;
  font-size: 12px;
  font-weight: 400;
  color: #ffc5dd;
}

.about-link {
  display: block;
  margin: 2px 0;
  color: var(--fg);
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
}

.about-link:hover {
  color: #ffc5dd;
}

/* Credit studio, coin bas gauche de la page About (demande explicite) :
   meme registre visuel/positionnement en miroir que .theme-switcher
   (bas droite). .page-about est deja position:fixed + inset:0, donc
   sert directement de repere pour ce positionnement absolu. */
.about-credits {
  position: absolute;
  bottom: 22px;
  left: 32px;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--muted-2);
}

@media (max-width: 480px) {
  .about-credits {
    left: 16px;
    bottom: 16px;
  }
}

/* =========================================================
   INDEX - mosaique eparpillee (esprit ard.ac/archives) : toutes
   les images sont disposees en colonnes avec une taille et un
   decalage aleatoires (mais stables, seed par index) plutot
   qu'une grille stricte. Cliquer sur une image l'ouvre en grand
   au centre, fond flouté, avec le nom en bas a gauche et le
   numero en bas a droite.
   ========================================================= */
.page-index {
  display: block;
  overflow: hidden;
}


/* Plan pannable a l'infini (esprit ard.ac/archives) : pas de scroll de
   page, on se deplace dans toutes les directions a la souris/trackpad
   (drag ou molette), avec une inertie qui continue puis ralentit. Le
   contenu est un motif qui se repete (tuile) : au bout d'une tuile on
   revient silencieusement au debut, donc ca semble infini et les looks
   se "renouvellent" en boucle dans toutes les directions. */
.index-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.index-wrap.is-dragging {
  cursor: grabbing;
}

.index-canvas {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}

.index-item {
  position: absolute;
  cursor: pointer;
  user-select: none;
}

/* Meme echelle de silhouette pour tous les looks (l'element a deja les
   bonnes dimensions exactes — hauteur commune, largeur = hauteur x
   ratio reel — calculees en JS), object-fit: contain en filet de
   securite pour ne jamais recadrer. */
.index-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  transition: opacity 0.35s ease;
}

.index-item:hover img {
  opacity: 0.75;
}

.index-detail {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.index-detail.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}

.index-detail-media-wrap {
  max-width: min(70vw, 780px);
  max-height: 68vh;
  cursor: default;
}

.index-detail-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(70vw, 780px);
  max-height: 68vh;
}

.index-detail-num {
  position: fixed;
  left: 20px;
  bottom: 24px;
  z-index: 510;
  margin: 0;
  font-family: var(--font-ui) !important;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-pink);
  cursor: default;
}

.index-detail-close {
  position: fixed;
  top: 56px;
  right: 24px;
  z-index: 510;
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--fg);
  cursor: pointer;
  padding: 0;
}

.index-detail-close:hover {
  opacity: 0.6;
}

@media (max-width: 780px) {
  .index-detail-media-wrap,
  .index-detail-img {
    max-width: 92vw;
  }
}