/* ==========================================================================
   projet.css — pages projets (Music video, …)
   Complète style.css, chargé avant.
   ========================================================================== */


.ticket__entete a { color: inherit; }
.ticket__entete a:hover { color: var(--papier); }

/* l'œil de lumière, en fond */
.oeil-lumiere { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* mots en désordre */
.projet-intro { position: relative; height: 100vh; z-index: 4; pointer-events: none; }  /* premier écran, qui défile */
.mots { margin: 0; }
.mots span {
  position: absolute; left: 0; top: 0;
  font: 700 12px/1 "Inter Bold", "Inter", Helvetica, Arial, sans-serif;
  letter-spacing: 0; text-transform: uppercase; white-space: nowrap;
  color: #f2f2ee;
  opacity: 0;
}
.mots .mot--titre {
  font-size: clamp(34px, 5.6vw, 104px);
  letter-spacing: -.035em;
  color: #cceee9;                                   /* même lumière que l'œil (blanc bleu-vert) */
  text-shadow: 0 0 24px rgba(204, 238, 233, .35);
}
@media (max-width: 760px) {
  .mots span { font-size: 10px; }
  .mots .mot--titre { font-size: clamp(30px, 11vw, 54px); }
}

/* ==========================================================================
   Clips : lecteur + ticket qui s'imprime au survol
   ========================================================================== */
.clips { position: relative; z-index: 4; }
.clip { min-height: 100vh; padding: 12vh var(--marge) 10vh; }
.clip__entete { font-size: clamp(12px, 1vw, 16px); }
.clip__scene {
  display: grid;
  grid-template-columns: minmax(300px, 38ch) 1fr;
  column-gap: clamp(24px, 4vw, 72px);
  align-items: start;
  margin-top: 6vh;
}

/* le ticket : 38 caractères de large, lignes imprimées une à une */
.clip__recu { font-size: 11px; line-height: 1.7; width: calc(38 * (1ch + .06em)); }
.recu__ligne { margin: 0; white-space: pre; visibility: hidden; }
.recu__texte { white-space: normal; text-transform: none; letter-spacing: .02em; }
.recu__titre { color: var(--papier); }
.recu__texte i { font-style: italic; }
.recu__refs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; white-space: normal; }
.recu__refs img {
  height: 58px; width: auto; display: block;
  clip-path: inset(0 0 100% 0);
  filter: grayscale(.2) contrast(1.05);
}
.clip__recu.est-imprime .recu__ligne { visibility: visible; }
.clip__recu.est-imprime .recu__refs img { clip-path: inset(0 0 0 0); transition: clip-path .45s steps(5); }

/* lecteur */
.clip__lecteur { margin: 0; width: min(100%, calc(62vh * 16 / 9)); justify-self: end; }  /* tient dans l'écran avec ses commandes */
.clip__cadre {
  position: relative; aspect-ratio: 16 / 9; background: #000;
  outline: 1px solid rgba(237, 237, 234, .55); outline-offset: 6px;   /* le fin cadre blanc */
  overflow: hidden; cursor: pointer;
}
.clip__cadre video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lect {
  display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 2ch;
  margin-top: 18px;
}
.lect button { color: var(--gris); transition: color .2s; white-space: pre; }
.lect button:hover, .lect button[aria-pressed="true"] { color: var(--papier); }
.lect__barre {
  position: relative; height: 13px; cursor: pointer;
  background: linear-gradient(90deg, rgba(237,237,234,.35) 0 2px, transparent 2px) 0 50% / 6px 1px repeat-x;  /* pointillés de ticket */
}
.lect__progres {
  position: absolute; left: 0; top: 50%; height: 1px; width: 0;
  background: var(--papier); transform: translateY(-50%);
}
.lect__progres::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; background: var(--papier); }
.lect__temps { color: var(--gris); white-space: pre; }
.clip__credits { margin-top: 14px; text-align: right; color: var(--papier); line-height: 1.8; }
.clip__lecteur:fullscreen { background: #000; display: grid; grid-template-rows: 1fr auto; padding: 24px; }
.clip__lecteur:fullscreen .clip__cadre { aspect-ratio: auto; outline: none; }
.clip__lecteur:fullscreen .clip__credits { display: none; }

@media (max-width: 900px) {
  .clip__scene { grid-template-columns: 1fr; row-gap: 5vh; }
  .clip__lecteur { order: -1; width: 100%; }
  .clip__recu { width: auto; max-width: calc(38 * (1ch + .06em)); }
  .lect { grid-template-columns: auto 1fr auto; row-gap: 10px; }
  .lect__temps { grid-column: 3; }
  .lect__son { grid-column: 1 / 3; justify-self: start; }
  .lect__plein { grid-column: 3; justify-self: end; }
}

/* page Music video : grain de pellicule plus discret */
.page-music-video .pellicule { opacity: .4; }

/* ==========================================================================
   Page EIN : intro (vidéo, fente qui s'ouvre sur EIN, datamosh vers EDIT ICONIC NORMS)
   ========================================================================== */
@font-face { font-family: "Uncut Sans"; src: url("../fonts/uncut-sans.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "Inter Var"; src: url("../fonts/inter-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
.ein-video { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #000; }
.ein-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.ein-video__haut { clip-path: inset(0 0 50% 0); }
.ein-video__bas  { clip-path: inset(50% 0 0 0); }
.ein-scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.ein-defile { position: relative; z-index: 4; }
.ein-etapes { height: 420vh; }        /* défilement de l'intro (seuils dans REGLAGES de ein-intro.js) */
.page-ein .pellicule { opacity: .45; }

/* petits textes tapés à la machine, Inter 11 px resserré (comme sur l'ancien site) */
.ein-notes { position: fixed; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; color: #fff;
  font: 400 11px/1.25 "Inter Var", "Inter", Helvetica, Arial, sans-serif; text-transform: uppercase; }
.ein-notes p { margin: 0; min-height: 1.25em; white-space: pre-wrap; }
.ein-notes__annee { position: absolute; top: 198px; right: 16px; width: 135px; text-align: right;
  transform: scaleX(.8); transform-origin: right top; }
.ein-notes__desc { position: absolute; top: 266px; right: 16px; width: 340px;
  transform: scaleX(.8); transform-origin: right top; }
.ein-scroll { position: fixed; left: 50%; bottom: 17vh; z-index: 3; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
  font: 700 10px/1 "Inter Var", "Inter", Helvetica, Arial, sans-serif; letter-spacing: 2px; color: #fff; transition: opacity .5s; }
.ein-scroll i { width: 1px; height: 20px; background: #fff; transform-origin: top; animation: ein-trait 1.8s ease-in-out infinite; }
@keyframes ein-trait { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 760px) {
  .ein-notes { font-size: 8px; }
  .ein-notes__annee { top: 150px; right: 12px; }
  .ein-notes__desc { top: 140px; left: 8px; width: 62vw; }
}