/* =========================================================
   MADYGOOD — projets.css — la page Projets (/projets/) : toutes les références, et rien d'autre
   Chargée après typography.css et accueil.css. Demande d'Anthony (19 oct. 2026), d'après son inspiration « planche d'artiste » : un ruban de photos de FORMATS
   DIFFÉRENTS (haut et étroit, panoramique, carré…), grandes, accrochées en haut et collées l'une à l'autre, le nom sous chacune : c'est ce qui crée le mouvement.
   Un seul effet, celui du survol des boutons (`.bd` : quatre bandes verticales qui montent l'une après l'autre), joué par le scroll :
     · on descend, le ruban défile à l'horizontale (scène épinglée : 1 px de scroll = 1,35 px de glissement) ;
     · quand une photo entre par la droite, quatre bandes de la couleur du papier la découvrent en montant l'une après l'autre ; au rythme exact du scroll
       (on remonte, elles redescendent). Rien d'autre ne bouge.
   Le mouvement est piloté par js/horizon.js (il pose --p et --m à chaque scroll : rien ne dépend d'un support CSS particulier, donc le même résultat dans tous les
   navigateurs). Mouvement réduit ou sans JavaScript : le ruban est une bande qu'on fait glisser, tout est visible. Tout est carré, sans ombre, sans filet.
   Les pages projet, elles, restent telles qu'elles sont (css/projet.css).
   ========================================================= */
.pjs{--navh:64px}
.pjs main{overflow-x:clip}

/* une photo : un cadre, une image ; --f : point de cadrage */
.m-ph{display:block;position:relative;overflow:hidden;background:var(--paper-hi)}
.m-ph img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}

/* ---------- Le ruban (par défaut : une bande qu'on fait glisser) ---------- */
.hz{--sh:min(78vh,700px);--sh:min(78svh,700px);position:relative}
.hz__pin{container-type:inline-size}
.hz__track{
  display:flex;align-items:flex-start;height:var(--sh);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--graphite) transparent;overscroll-behavior-x:contain;
}
@media (hover:none){
  .hz__track{scrollbar-width:none}
  .hz__track::-webkit-scrollbar{display:none}
}

/* le titre, en haut à gauche */
.hz__lead{flex:none;width:min(86vw,560px);padding:var(--sp-5) var(--gut) 0;scroll-snap-align:start}
.hz__title{
  text-transform:none;
  font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(64px,9vw,160px);line-height:.88;letter-spacing:-.05em;
}

/* une photo, accrochée en haut (hauteur = fraction --k de la hauteur du ruban moins la place du titre, proportions --r, jamais plus de 70 % de la largeur de l'écran), le titre du projet dessous */
.hz__a{
  --fh:min(calc((var(--sh) - 5.5rem) * var(--k,.9)),calc(70cqw / var(--r,1)));
  display:block;flex:none;width:calc(var(--fh) * var(--r,1));color:inherit;scroll-snap-align:start;
}
.hz__a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.hz__f{position:relative;margin:0;height:var(--fh);width:100%}
.hz__f .m-ph{width:100%;height:100%}
.hz__f .m-ph img{object-position:var(--f,50% 50%)}
.hz__n{
  display:block;margin-top:var(--sp-3);padding-right:var(--sp-3);text-wrap:balance;text-transform:none;
  font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(32px,2.8vw,48px);line-height:1;letter-spacing:-.03em;   /* le titre du projet, en typo à empattement (IvyPresto Thin : plancher de 32 px) */
}
.hz__a:hover .hz__n,.hz__a:focus-visible .hz__n{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* la fin : l'invitation à écrire, posée en bas du ruban */
.hz__end{flex:none;align-self:flex-end;width:clamp(300px,30vw,460px);padding:0 var(--sp-6) var(--sp-5);scroll-snap-align:start}
.hz__q{
  max-width:10em;text-wrap:balance;
  font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(32px,3.3vw,60px);line-height:1.04;letter-spacing:-.03em;   /* IvyPresto Thin : plancher de 32 px */
}
.hz__b{
  display:inline-flex;align-items:center;gap:14px;height:64px;padding:0 32px;margin-top:var(--sp-5);
  background-color:var(--red);color:var(--paper-hi);--bc:var(--paper);--bh:var(--ink);
  font-family:var(--font-sans);font-weight:var(--w-semi);font-size:15px;line-height:1;letter-spacing:var(--ls-ui);text-transform:uppercase;white-space:nowrap;
}

/* les quatre bandes de la couleur du papier posées sur chaque photo (inutilisées dans la bande glissante) */
.hz__f > i{display:none;position:absolute;top:0;bottom:0;width:25.4%;background:var(--paper);z-index:1;pointer-events:none;transform-origin:50% 0}
.hz__f > i:nth-of-type(1){left:0;--j:0}
.hz__f > i:nth-of-type(2){left:24.87%;--j:1}
.hz__f > i:nth-of-type(3){left:49.73%;--j:2}
.hz__f > i:nth-of-type(4){left:74.6%;--j:3}

@media (max-width:700px){
  .hz{--sh:min(74vh,640px);--sh:min(74svh,640px)}
  .hz__title{font-size:clamp(56px,19vw,120px)}
  .hz__end{width:min(80vw,380px)}
}
@media print{
  .hz__track{overflow:visible;flex-wrap:wrap;height:auto}
}

/* ---------- Le ruban épinglé (classe .hz--pin posée par js/horizon.js, sauf mouvement réduit) ----------
   La scène est aussi haute que l'écran + la longueur du ruban (--len) ; --p (0 → 1) est l'avancement du scroll dans la scène ;
   --m (0 → 1, sur chaque photo) est sa position à l'écran : 0 quand elle entre par la droite, 1 quand elle sort par la gauche.
   Les quatre bandes (`i`, j = 0 à 3, de gauche à droite) : la bande j monte entre m = 0,045 × j et 0,3 + 0,045 × j (le décalage de `.bd`) ; ensuite la photo reste entière. */
@media (prefers-reduced-motion:no-preference){
  .js .hz:not(.hz--pin) .hz__f{opacity:0}             /* le temps que le script pose les bandes (pas d'éclair de photos entières) */
}
.hz--pin{
  --sh:calc(100vh - var(--navh) - var(--sp-4));--sh:calc(100svh - var(--navh) - var(--sp-4));
  height:calc(100vh - var(--navh) + var(--len,0px));height:calc(100svh - var(--navh) + var(--len,0px));
}
.hz--pin .hz__pin{position:sticky;top:var(--navh);height:calc(100vh - var(--navh));height:calc(100svh - var(--navh));overflow:hidden}
.hz--pin .hz__track{
  width:max-content;overflow:visible;scroll-snap-type:none;will-change:transform;
  translate:calc(var(--p,0) * min(0px,calc(100cqw - 100%))) 0;
}
.hz--pin .hz__f > i{
  display:block;
  transform:scaleY(calc(1 - min(1,max(0,(var(--m,.5) - var(--j,0) * .045) / .3))));   /* couverture de la bande : 1 = photo cachée, 0 = photo entière */
}
@media (min-width:701px){
  .hz--pin .hz__lead{width:min(34vw,560px)}
}