/* ============================================================
   ANIMAL SHADOW · /projets · la vitrine du studio
   ============================================================
   VERROU DA, pose avant la première ligne, comme l'exige
   ~/.claude/ANTI-AI-DESIGN.md section 2.

   1. CONCEPT. Une salle de projection noire. Chaque projet est projete
      plein cadre sur son propre ecran, numerote comme une bobine, et la
      lumiere de l'ecran deborde dans la salle.
   2. PALETTE. Le noir de salle #060606, plus sombre que le noir du site,
      parce que la seule lumiere doit venir des projets. Le blanc casse
      #f5f5f5 pour lire. L'or #cda85c pour la numerotation, c'est la
      couleur des etiquettes de bobine. AUCUNE couleur d'accent fixe : la
      teinte de chaque ecran est prelevee sur la capture reelle du site
      projete (voir data/projets.json).
   3. TYPOGRAPHIE. Benzin pour les noms de projets, en très grand : un nom
      de projet est une affiche. Oswald en capitales espacees pour les
      repères. Montserrat pour lire.
   4. SIGNATURE. La couleur du projet qui DEBORDE dans la salle et change a
      chaque ecran. Elle montre sans le dire ce que le studio vend : chaque
      projet a sa propre identité, aucun ne ressemble a l'autre.
   5. TON. Tutoiement, phrases courtes, aucune promesse chiffree qui ne
      soit affichee par le projet lui-meme. Exemple reel de la page :
      « Chaque projet de cette page est sorti du même atelier. »
   6. REFERENCES. Les generiques de film et les salles de projection ; les
      index de projets plein ecran des studios independants ; la page
      /origine du site pour le rythme.

   CE QUI EST VOLONTAIREMENT ABSENT, et il faut le garder absent :
   - aucun detournement du defilement. Le defilement est NATIF, l'accroche
     ecran par ecran est un scroll-snap CSS, et chaque animation suit la
     position du doigt ou de la molette au lieu d'imposer son rythme. Les
     signes 218 et 220 du referentiel (section bloquee, lecture empechee)
     sont exactement ce qu'on évite ;
   - aucun inclinaison 3D, aucun bouton magnetique, aucun texte lettre par
     lettre (signes 214 a 216) ;
   - aucun contenu cache sans JavaScript : tout est visible par défaut,
     l'etat d'avant animation n'existe que sous .pj-anime, pose par le
     script quand GSAP est la ET que le mouvement est autorise.
   ============================================================ */

/* Benzin est DÉCLARÉE ici. Aucune feuille partagee du site ne la déclare :
   fonts-local.css n'en porte aucune, le bundle non plus, et chaque page qui
   veut Benzin doit la declarer elle-meme. Mesure le 2026-09-27 en production
   sur /diagnostic : le fichier est precharge, la famille est demandee, mais
   faute de @font-face le titre retombe sur la police de repli. Ici, le nom
   d'un projet EST le design de l'ecran : swap plutôt qu'optional, pour que
   Benzin s'affiche des la première visite. */
@font-face { font-family: 'Benzin'; src: url('/assets/fonts/Benzin-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Benzin'; src: url('/assets/fonts/Benzin-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

@property --pj-teinte {
  syntax: '<color>';
  inherits: true;
  initial-value: #ae0000;
}
@property --pj-x {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 70%;
}

.pj {
  --pj-noir: #060606;
  --pj-papier: #f5f5f5;
  --pj-lire: #c4c4c4;       /* 11,1 sur le noir de salle */
  --pj-gris: #9d9d9d;       /* 7,2 sur le noir de salle */
  --pj-or: #cda85c;
  --pj-filet: rgba(245, 245, 245, .12);
  --pj-t: 'Benzin', 'Oswald', sans-serif;
  --pj-e: 'Oswald', sans-serif;
  --pj-c: 'Montserrat', system-ui, sans-serif;
  --pj-nav: var(--as-nav-h, 120px);
  background: var(--pj-noir);
  color: var(--pj-papier);
}

/* ---- l'accroche ecran par ecran ---------------------------------------
   Seulement la ou un ecran contient son projet en entier : au-dela de
   900 px de large ET de 700 px de haut. En dessous, un ecran de projet
   depasse la hauteur de la fenetre, et une accroche obligatoire rendrait
   une partie du texte inaccessible. */
@media (min-width: 900px) and (min-height: 700px) {
  html:has(body.pj) { scroll-snap-type: y mandatory; }
  .pj-ecran { scroll-snap-align: start; }
  /* Sans cette ligne, le pied de page devient inatteignable : l'accroche
     ramenerait toujours sur le dernier ecran. */
  .pj .footer, .pj footer { scroll-snap-align: end; }
}

/* ---- la salle ----------------------------------------------------------
   Une couche fixe derriere tout. La lumiere part du cote ou se trouve
   l'ecran du projet (--pj-x) et prend sa couleur (--pj-teinte). Les deux
   proprietes sont enregistrees avec @property, donc elles se transitionnent
   au lieu de sauter. Intensite plafonnee a 34 % : c'est une lumiere
   d'ambiance, pas une lueur decorative. */
.pj-salle {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 70% at var(--pj-x) 52%,
      color-mix(in srgb, var(--pj-teinte) 34%, transparent) 0%,
      color-mix(in srgb, var(--pj-teinte) 10%, transparent) 42%,
      transparent 72%),
    var(--pj-noir);
  transition: --pj-teinte .9s cubic-bezier(.22, .8, .24, 1), --pj-x .9s cubic-bezier(.22, .8, .24, 1);
}
.pj-main { position: relative; z-index: 1; }
/* Le pied de page du site est statique. Or la salle est FIXE a z-index 0,
   et un element positionne a z-index 0 se peint au-dessus de tout element
   statique : sans cette regle, la salle recouvrait le pied de page entier,
   ses 24 liens et le crédit obligatoire, et il ne restait qu'un mot visible.
   Constate au rendu le 2026-09-27. */
.pj > footer, .pj .footer { position: relative; z-index: 1; }

/* ---- structure commune d'un ecran ------------------------------------ */
.pj-ecran {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--pj-nav) + clamp(1.4rem, 3vh, 2.6rem)) clamp(1.2rem, 5vw, 5.5rem) clamp(2rem, 5vh, 3.6rem);
  display: grid;
  align-items: center;
}
.pj-wrap { width: min(1320px, 100%); margin-inline: auto; }

.pj-k {
  font-family: var(--pj-e);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--pj-or);
  margin: 0 0 1rem;
}

/* ---- ecran d'ouverture ------------------------------------------------ */
.pj-ouverture .pj-wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.pj-h1 {
  font-family: var(--pj-t);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .98;
  letter-spacing: -.01em;
  /* Repli pour un navigateur sans unites de conteneur, puis la vraie regle :
     le mot le plus long du titre, IDENTITES., mesure 7,51 em en Benzin. La
     taille est donc la largeur de la colonne divisee par 7,8, jamais plus. */
  font-size: clamp(2rem, 3.8vw, 3.6rem);
  font-size: min(4.8rem, calc(100cqi / 7.8));
  overflow-wrap: normal;
  word-break: normal;
  margin: 0 0 1.4rem;
  color: var(--pj-papier);
}
.pj-ouverture__texte,
.pj-projet__texte { container-type: inline-size; }
.pj-h1 span { display: block; color: var(--pj-or); }
.pj-intro {
  font-family: var(--pj-c);
  font-size: clamp(.98rem, 1.25vw, 1.1rem);
  line-height: 1.7;
  color: var(--pj-lire);
  max-width: 42ch;
  margin: 0 0 1.6rem;
}
.pj-compte {
  display: flex;
  gap: 1.6rem;
  font-family: var(--pj-e);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pj-gris);
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--pj-filet);
}
.pj-compte b { color: var(--pj-papier); font-weight: 600; margin-right: .4rem; }

/* Le sommaire visuel : dix vignettes rangees par nature. C'est la navigation
   principale de la page, pas une decoration : chaque vignette est un lien
   vers l'ecran du projet. */
.pj-planche {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.55rem, 1vw, .9rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pj-planche li { margin: 0; }
/* Dix vignettes sur trois colonnes laissaient une vignette seule en bas.
   Le premier projet et le studio prennent deux cases : 8 + 2 x 2 = 12, soit
   quatre rangees pleines. Ce n'est pas un calage : c'est le phare et
   l'atelier, les deux bornes du récit de la page. */
.pj-planche li:first-child,
.pj-planche li:last-child { grid-column: span 2; }
.pj-planche li:first-child img,
.pj-planche li:last-child img { aspect-ratio: 16 / 5; object-position: 50% 30%; }
.pj-planche a {
  display: block;
  position: relative;
  text-decoration: none;
  color: var(--pj-papier);
  border: 1px solid var(--pj-filet);
  overflow: hidden;
  background: #111;
  transition: border-color .25s ease;
}
.pj-planche img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: grayscale(.55) brightness(.62);
  transition: filter .45s ease, transform .7s cubic-bezier(.16, .84, .44, 1);
}
.pj-planche__legende {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .55rem .7rem .5rem;
  background: linear-gradient(to top, rgba(6, 6, 6, .92), rgba(6, 6, 6, 0));
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.pj-planche__n {
  font-family: var(--pj-e);
  font-size: .66rem;
  letter-spacing: .14em;
  color: var(--pj-or);
}
.pj-planche__nom {
  font-family: var(--pj-e);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.2;
}
.pj-planche a:hover, .pj-planche a:focus-visible { border-color: var(--pj-teinte-carte, var(--pj-or)); }
.pj-planche a:hover img, .pj-planche a:focus-visible img { filter: none; transform: scale(1.04); }
.pj-planche a:focus-visible { outline: 2px solid var(--pj-or); outline-offset: 3px; }

/* ---- un ecran de projet ----------------------------------------------- */
.pj-projet .pj-wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
}
.pj-projet--droite .pj-projet__texte { order: 2; }
.pj-projet--droite .pj-wrap { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); }

.pj-bobine {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin: 0 0 1.1rem;
  font-family: var(--pj-e);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.pj-bobine b {
  font-family: var(--pj-t);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  letter-spacing: 0;
  color: var(--pj-or);
  line-height: 1;
}
.pj-bobine span { font-size: .72rem; color: var(--pj-gris); }

.pj-nom {
  font-family: var(--pj-t);
  font-weight: 800;
  /* PAS de capitales forcees : kXfer, ReKlip, Lynks Pro et Kreative Monster
     ont une casse qui fait partie de leur identité, et respecter l'identité
     de chaque projet est tout le propos de la page. */
  text-transform: none;
  line-height: .96;
  letter-spacing: -.01em;
  /* Chaque nom se dimensionne sur SA colonne, d'apres la largeur reelle de
     son mot le plus long (--pj-em, mesure en Benzin). Aucun mot n'est jamais
     coupe : de 3,45 em pour kXfer a 12,16 em pour XTREMOTIVATION, chacun
     prend toute la place disponible et pas un pixel de plus. */
  font-size: clamp(1.6rem, 3vw, 3rem);
  font-size: min(4.6rem, calc(100cqi / (var(--pj-em, 8) + .3)));
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
  margin: 0 0 1.1rem;
  color: var(--pj-papier);
}

.pj-sous {
  font-family: var(--pj-c);
  font-size: clamp(1.02rem, 1.4vw, 1.22rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--pj-papier);
  margin: 0 0 .9rem;
}
.pj-desc {
  font-family: var(--pj-c);
  font-size: clamp(.94rem, 1.1vw, 1.02rem);
  line-height: 1.7;
  color: var(--pj-lire);
  max-width: 44ch;
  margin: 0 0 1.5rem;
}
.pj-credit {
  font-family: var(--pj-e);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pj-gris);
  margin: 0 0 1.4rem;
  padding-left: .9rem;
  border-left: 2px solid var(--pj-teinte-projet, var(--pj-or));
}
.pj-credit a { color: var(--pj-papier); text-decoration: underline; text-underline-offset: .2em; }

.pj-voir {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 48px;
  padding: 0 1.4rem;
  font-family: var(--pj-e);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pj-noir);
  background: var(--pj-papier);
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.pj-voir:hover { background: #fff; transform: translateX(3px); }
.pj-voir:focus-visible { outline: 2px solid var(--pj-or); outline-offset: 4px; }
.pj-voir svg { width: 16px; height: 16px; flex: none; }

/* L'ecran projete. Une barre fine porte le VRAI domaine : c'est une
   information, pas un decor de faux navigateur. */
.pj-ecran-projete { margin: 0; position: relative; }
.pj-cadre {
  position: relative;
  border: 1px solid rgba(245, 245, 245, .16);
  background: #0d0d0d;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85);
  overflow: hidden;
}
.pj-cadre__barre {
  display: flex;
  align-items: center;
  gap: .55rem;
  height: 30px;
  padding: 0 .9rem;
  border-bottom: 1px solid rgba(245, 245, 245, .1);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--pj-gris);
  background: #0a0a0a;
}
.pj-cadre__barre::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pj-teinte-projet, var(--pj-or));
  flex: none;
}
.pj-cadre img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 900;
  object-fit: cover;
  object-position: top;
}
.pj-ecran-projete figcaption {
  margin-top: .8rem;
  font-family: var(--pj-e);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pj-gris);
}

/* ---- en preparation -------------------------------------------------- */
.pj-bientot .pj-wrap { max-width: 1100px; }
.pj-h2 {
  font-family: var(--pj-t);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(2rem, 4.4vw, 4rem);
  margin: 0 0 1.2rem;
}
.pj-bientot__liste {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  border-top: 1px solid var(--pj-filet);
}
.pj-bientot__liste li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(.9rem, 2vh, 1.3rem) 0;
  border-bottom: 1px solid var(--pj-filet);
}
.pj-bientot__nom {
  font-family: var(--pj-t);
  font-weight: 700;
  text-transform: none;   /* KlipReator et Zyxtrin ont leur casse, comme les autres */
  font-size: clamp(1.3rem, 2.8vw, 2.4rem);
  color: #8e8e8e;     /* 6,2 sur le noir : on lit, mais on sent que ce n'est pas sorti */
  line-height: 1.05;
}
.pj-bientot__etat {
  font-family: var(--pj-e);
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--pj-or);
  white-space: nowrap;
}

/* ---- l'appel final --------------------------------------------------- */
.pj-fin { text-align: left; }
.pj-fin .pj-wrap { max-width: 1100px; }
.pj-fin .pj-h2 { font-size: clamp(2.4rem, 6.4vw, 6rem); }
.pj-fin .pj-intro { max-width: 52ch; }
.pj-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1.8rem 0 1.2rem; }
.pj-cta {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 52px;
  padding: 0 1.7rem;
  font-family: var(--pj-e);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.pj-cta--or { color: #1a1306; background: linear-gradient(135deg, #cda85c, #e8c47a); }
.pj-cta--or:hover { transform: translateY(-2px); }
.pj-cta--trait { color: var(--pj-papier); border: 1px solid rgba(245, 245, 245, .4); }
.pj-cta--trait:hover { border-color: var(--pj-papier); }
.pj-cta:focus-visible { outline: 2px solid var(--pj-or); outline-offset: 4px; }
.pj-prix { font-family: var(--pj-e); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pj-gris); margin: 0; }
.pj-prix b { color: var(--pj-papier); font-weight: 600; }

/* ---- navigation : le rail de droite (grands ecrans) ------------------- */
.pj-rail {
  position: fixed;
  right: clamp(.8rem, 1.6vw, 1.6rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
}
@media (min-width: 1280px) and (min-height: 700px) {
  .pj-rail { display: block; }
  /* la place du rail, pour qu'il ne passe jamais sur une vignette ou un ecran */
  .pj-ecran { padding-right: calc(clamp(1.2rem, 5vw, 5.5rem) + 150px); }
}
.pj-rail ol { list-style: none; margin: 0; padding: 0; }
.pj-rail__nature {
  font-family: var(--pj-e);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pj-gris);
  text-align: right;
  margin: .9rem 0 .25rem;
}
.pj-rail__nature:first-child { margin-top: 0; }
.pj-rail a {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .6rem;
  min-height: 26px;
  text-decoration: none;
  color: var(--pj-gris);
  font-family: var(--pj-e);
  font-size: .7rem;
  letter-spacing: .12em;
}
.pj-rail__nom {
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap;
}
/* Le trait grandit par transform, jamais par width : animer une largeur force
   un recalcul de mise en page à chaque image. La boîte garde ses 30 px, donc les
   numéros du rail ne bougent plus quand un projet devient actif. */
.pj-rail__trait {
  width: 30px; height: 2px;
  background: currentColor;
  transform: scaleX(.4667);
  transform-origin: right center;
  transition: transform .3s cubic-bezier(.22, .8, .24, 1), background-color .3s ease;
}
.pj-rail a:hover .pj-rail__nom,
.pj-rail a:focus-visible .pj-rail__nom,
.pj-rail a[aria-current="true"] .pj-rail__nom { opacity: 1; transform: none; }
.pj-rail a[aria-current="true"] { color: var(--pj-papier); }
.pj-rail a[aria-current="true"] .pj-rail__trait { transform: scaleX(1); background: var(--pj-teinte); }
.pj-rail a:focus-visible { outline: 2px solid var(--pj-or); outline-offset: 2px; }

/* Dans le pied de page, le rail et la pastille s'effacent. */
.pj-rail, .pj-pastille { transition: opacity .3s ease, visibility .3s; }
.pj-au-pied .pj-rail, .pj-au-pied .pj-pastille { opacity: 0; visibility: hidden; }

/* ---- navigation : le sommaire mobile ---------------------------------- */
/* En bas a DROITE : le coin gauche est déjà pris par le bouton des succès
   du site (.achieve-toggle, 44 px), qui recouvrait la pastille. Mesure au
   rendu le 2026-09-27 a 375 px. */
.pj-pastille {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 46px;
  padding: 0 1rem;
  border: 1px solid rgba(245, 245, 245, .22);
  background: rgba(10, 10, 10, .92);
  color: var(--pj-papier);
  font-family: var(--pj-e);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.pj-pastille b { color: var(--pj-or); font-weight: 600; }
.pj-pastille:focus-visible { outline: 2px solid var(--pj-or); outline-offset: 3px; }
@media (min-width: 1280px) and (min-height: 700px) { .pj-pastille { display: none; } }

.pj-sommaire {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  background: rgba(6, 6, 6, .98);
  color: var(--pj-papier);
}
.pj-sommaire::backdrop { background: rgba(0, 0, 0, .6); }
.pj-sommaire__in { padding: 1.4rem 1.2rem calc(2rem + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin-inline: auto; }
.pj-sommaire__tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.pj-sommaire__fermer {
  min-width: 46px; min-height: 46px;
  background: none;
  border: 1px solid rgba(245, 245, 245, .25);
  color: var(--pj-papier);
  font-family: var(--pj-e);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 1rem;
}
.pj-sommaire__nature {
  font-family: var(--pj-e);
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--pj-or);
  margin: 1.2rem 0 .3rem;
}
.pj-sommaire ol { list-style: none; margin: 0; padding: 0; }
.pj-sommaire a {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  min-height: 48px;
  align-items: center;
  border-bottom: 1px solid var(--pj-filet);
  text-decoration: none;
  color: var(--pj-papier);
  font-family: var(--pj-e);
  font-size: 1rem;
  letter-spacing: .04em;
}
.pj-sommaire a span { color: var(--pj-gris); font-size: .74rem; letter-spacing: .14em; }
.pj-sommaire a:focus-visible { outline: 2px solid var(--pj-or); outline-offset: 2px; }

/* ---- le mouvement ------------------------------------------------------
   Les etats d'avant animation n'existent QUE sous .pj-anime, que le script
   pose seulement quand GSAP est charge ET que le système n'a pas demande
   de reduire les animations. Sans lui, tout est visible et immobile. */
/* Le titre d'ouverture n'est PAS masque : il est a l'ecran des le premier
   affichage, et le cacher le temps que le script arrive produirait un flash
   visible puis cache puis revele, en retardant l'affichage principal. Seuls
   les noms de projets, sous la ligne de flottaison, se devoilent. */
.pj-anime .pj-nom { clip-path: inset(0 0 100% 0); }
.pj-anime .pj-cadre { transform-origin: 50% 60%; }

@media (prefers-reduced-motion: reduce) {
  .pj-salle { transition: none; }
  .pj-planche img, .pj-voir, .pj-cta, .pj-rail__nom, .pj-rail__trait { transition: none; }
}

/* ---- téléphone et tablette -------------------------------------------- */
@media (max-width: 899px) {
  .pj-ecran {
    padding-top: calc(var(--pj-nav) + 1.6rem);
    padding-bottom: 3rem;
    align-items: start;
  }
  .pj-ouverture .pj-wrap,
  .pj-projet .pj-wrap,
  .pj-projet--droite .pj-wrap { grid-template-columns: 1fr; gap: 1.8rem; }
  .pj-projet--droite .pj-projet__texte { order: 0; }
  .pj-planche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-compte { flex-wrap: wrap; gap: .8rem 1.4rem; }
  .pj-bientot__liste li { flex-direction: column; gap: .3rem; }
  .pj-actions { flex-direction: column; }
  .pj-cta { justify-content: center; }
  /* la pastille ne doit pas cacher le dernier bouton */
  .pj-fin { padding-bottom: 6rem; }
}