/* ================= HERO =================
   Le premier écran, épinglé pendant que cinq toiles encadrées tombent : js/hero.js règle la chute d'après le défilement,
   avec les réglages de js/data.js (DATA.heroFall et DATA.hero). Il n'a pas de fond à lui : on voit le mur de béton de la page.
   À gauche le monogramme V M, à droite les toiles, penchées ; leurs traits de vitesse ne paraissent que pendant qu'elles bougent.
   Seuls transform et opacity sont animés ; seul le tracé des traits de vitesse touche à stroke-dashoffset.
   --pin (posé par hero.js) : la durée de l'épinglage, en hauteurs d'écran ; sans script, le hero fait un seul écran. */
.hero{position:relative;height:calc(100vh + var(--pin,0) * 100vh)}
.hero__pin{
  position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;
  padding:calc(96px + env(safe-area-inset-top,0px)) var(--gutter) 15vh;
}

/* ---------- le texte ---------- */
/* js/hero.js le fait monter doucement et pâlir un peu pendant la chute ; il passe devant les toiles pour rester lisible */
.hero__copy{position:relative;z-index:3;max-width:min(52vw,820px);pointer-events:none}
.hero__copy a{pointer-events:auto}
.hero__eyebrow{
  font:300 clamp(11px,.95vw,14px)/1.2 var(--font-body);letter-spacing:.2em;
  margin:0 0 clamp(14px,1.5vw,22px) .12em;
}
/* Le monogramme V M, construit à la manière art déco (index.html) : même pente pour toutes les branches, même trait,
   la jambe gauche du M parallèle à la branche droite du V. Chaque lettre est un seul trait épais, tracé d'un geste au rythme
   de l'arrivée des toiles : la première moitié se dessine pendant qu'elles tombent (la branche gauche du V ; la jambe gauche
   et la première diagonale du M), la seconde pendant qu'elles rebondissent et se posent, avec le même élan qu'elles
   (même durée, même courbe). Trois bleus filent devant l'encre, qui les recouvre : au repos les lettres sont noires.
   Le M part un peu après le V. --n : le rang du passage (0 à 3), chacun part 75 ms après le précédent ; --m : le retard du M. */
.hero__v{width:min(60vh,39vw);margin:0 0 clamp(22px,2.6vw,40px) 0;line-height:0}
.hero__v svg{display:block;width:100%;height:auto}
.v{fill:none;stroke:var(--ink);stroke-width:36;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:1 1.2}
.v--1{stroke:var(--blue-2)}
.v--2{stroke:var(--blue-3)}
.v--3{stroke:var(--cobalt)}
.js .hero .v{stroke-dashoffset:1}
.js .hero.is-in .v{animation:vDraw 1.5s calc(.15s + var(--n,0) * 75ms + var(--m,0s)) both}
@keyframes vDraw{
  0%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.5,0,.85,.55)}      /* la chute : de plus en plus vite */
  45%{stroke-dashoffset:.5;animation-timing-function:cubic-bezier(.15,.75,.25,1)}   /* la pointe, puis la remontée, qui ralentit */
  100%{stroke-dashoffset:0}
}
.js .hero__v svg{transform:translate3d(0,-7vh,0);transition:transform 1.3s cubic-bezier(.3,1.2,.5,1) .15s}
.js .hero.is-in .hero__v svg{transform:none}
/* le bouton « Voir les toiles » : la grande plaque (.plate-btn--lg, css/base.css), sans effet au survol (--still) ; il mène aux toiles du mois */
.hero__cta{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap}

/* ---------- les toiles ---------- */
/* la scène : un cadre aux proportions de la maquette (5 pour 4), calé à droite, pour que le groupe de toiles
   garde la même composition sur tous les écrans ; sur un écran plus étroit, elle prend toute la largeur ; sur téléphone
   tenu droit, elle couvre tout l'écran et hero.js y place chaque toile (voir plus bas) */
.hero__stage{position:absolute;z-index:2;top:0;bottom:0;right:0;width:min(100%,125vh);display:block;color:inherit}
/* tout le groupe est un seul lien (vers les toiles du mois, comme le bouton) */
.hero__stage:focus-visible{outline:2px solid var(--cobalt);outline-offset:-10px}
/* une toile : --x, --y son centre, --s sa largeur (--w ; sur téléphone tenu droit, --mx, --my et --ms), --ar ses proportions */
.faller{
  --s:var(--w);
  position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:var(--ar);
  margin:calc(var(--s) / var(--ar) / -2) 0 0 calc(var(--s) / -2);
}
/* trois enveloppes, une par mouvement : la chute au défilement (hero.js), l'arrivée à l'ouverture, le flottement au repos */
.faller__fall,.faller__drop,.faller__float{position:absolute;inset:0}
.faller__fall{z-index:1;will-change:transform}   /* toutes les toiles passent devant tous les traits de vitesse */
/* à l'ouverture, chaque toile tombe du haut de l'écran et se pose avec un léger rebond */
.js .faller__drop{
  transform:translate3d(0,-125vh,0) rotate(var(--in,-14deg));
  transition:transform 1.3s cubic-bezier(.3,1.2,.5,1) calc(var(--i) * 120ms + .15s);
}
.js .hero.is-in .faller__drop{transform:none}
/* au repos, elle flotte de quelques pixels, chacune à son rythme */
.faller__float{animation:heroFloat var(--fd,7s) ease-in-out var(--fdel,0s) infinite alternate}
@keyframes heroFloat{
  from{transform:translate3d(0,calc(var(--fa,6px) * -1),0) rotate(-.6deg)}
  to{transform:translate3d(0,var(--fa,6px),0) rotate(.7deg)}
}
.hero.is-away .faller__float{animation-play-state:paused}

/* La toile : le dessin de la maquette, découpé sur fond transparent, avec son cadre noir et sa perspective déjà dessinés.
   C'est une image plate : hero.js la fait tourner à plat pendant la chute, et à peine basculer en volume (chute, survol). */
.box{position:absolute;inset:0;display:block;width:100%;height:100%;will-change:transform}
.box .art img{object-fit:contain}

/* ---------- les traits de vitesse ---------- */
/* Des courbes à l'encre autour de chaque toile, tracées dans son repère (elle y fait 100 de large). Invisibles au repos :
   hero.js ne les fait paraître que pendant que la toile bouge. Chaque courbe naît en son milieu, là où le trait est le plus
   appuyé, et s'allonge vers ses deux pointes à mesure que la vitesse monte ; elle se rétracte de même quand la vitesse retombe.
   --d (posé par hero.js sur le groupe) : l'ampleur des traits, de 0 à 1, selon la vitesse du moment ;
   --th : le seuil du trait (les grandes courbes paraissent d'abord, les petits traits seulement à pleine vitesse) ;
   --a, --b : la portion de la courbe que couvre ce passage de plume ; --w : la part de ce passage qui est tracée ;
   --u : ce que vaut un pixel dans ce repère (posé par hero.js) ; --sw : l'épaisseur du trait en pixels. */
@property --d{syntax:'<number>';inherits:true;initial-value:0}
.faller__lines{
  position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;
  opacity:0;transform-origin:50% 50%;
}
.faller__lines path{
  --w:clamp(0, clamp(0, (var(--d) - var(--th,0)) / (1 - var(--th,0)), 1) / (var(--b,1) - var(--a,0)), 1);
  fill:none;stroke:var(--ink);stroke-linecap:round;
  stroke-width:calc(var(--u,1) * var(--sw,1.8) * var(--lw,1) * min(1, var(--w) * 30));   /* un passage pas encore né n'a pas d'épaisseur */
  stroke-dasharray:calc(var(--w)) 2;stroke-dashoffset:calc(var(--w) / 2 - .5);
}
/* à l'ouverture, les toiles tombent du haut de l'écran : leurs traits tombent avec elles, puis se rétractent quand elles se posent */
.js .hero.is-in .faller__lines{
  animation:linesDrop 1.3s cubic-bezier(.3,1.2,.5,1) calc(var(--i) * 120ms + .15s) backwards,
            linesSwell 1.9s cubic-bezier(.4,0,.2,1) calc(var(--i) * 120ms + .15s) backwards;
}
@keyframes linesDrop{from{transform:translate3d(0,-125vh,0)}to{transform:none}}
@keyframes linesSwell{0%{--d:0;opacity:1}28%,52%{--d:1;opacity:1}100%{--d:0;opacity:1}}

@supports (height:100svh){
  .hero{height:calc(100svh + var(--pin,0) * 100svh)}
  .hero__pin{height:100svh}
}

/* ---------- tablette : la composition se resserre ---------- */
@media (max-width:1100px){
  .hero__copy{max-width:50vw}
}

/* ---------- tablette et téléphone : la même chute que sur ordinateur (--pin-m, posé par hero.js) ;
   la mise en page reste celle de l'ordinateur, sauf sur téléphone tenu droit (plus bas) ---------- */
@media (max-width:860px){
  .hero{height:calc(100vh + var(--pin-m,0) * 100vh)}
  .faller{--lw:.55}   /* --lw : des traits de vitesse plus fins sur petit écran */
}
@media (max-width:860px){
  @supports (height:100svh){
    .hero{height:calc(100svh + var(--pin-m,0) * 100svh)}
  }
}

/* ---------- téléphone tenu droit : la composition de l'ordinateur, resserrée autour du texte ----------
   Le V M et le bouton à gauche, au milieu de l'écran ; la grande toile à leur droite, deux toiles au-dessus et deux en
   dessous (DATA.hero, m). hero.js mesure l'écran et pose : --vmw (la largeur du V M ; l'eyebrow passe à la ligne dans la
   même largeur), --ct (le haut du texte) et, sur chaque toile, --mx, --my (son centre) et --ms (sa largeur).
   La scène couvre tout l'écran épinglé, mais seules les toiles se touchent. La requête doit rester celle de hero.js (PHONE.media). */
@media (max-width:600px) and (orientation:portrait){
  .hero__pin{align-items:flex-start;padding:var(--ct,calc(96px + env(safe-area-inset-top,0px))) var(--gutter) 0}
  .hero__copy{max-width:none}
  .hero__eyebrow{max-width:var(--vmw,none);font-size:11px;letter-spacing:.12em;line-height:1.5}
  .hero__v{width:var(--vmw,min(58vw,30vh));margin-bottom:20px}
  .hero__cta .plate-btn--lg{font-size:13px}
  .hero__cta .plate-btn--lg .plate-btn__label{padding:16px 20px 15px 22px}
  .hero__cta .plate-btn--lg .plate-btn__go{width:50px}
  .hero__stage{inset:0;width:auto;pointer-events:none}
  .faller{left:var(--mx,50%);top:var(--my,50%);--s:var(--ms,30vw);pointer-events:auto}
}

/* ---------- mouvement réduit : ni épinglage ni chute, les toiles sont simplement là ---------- */
@media (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .hero__pin{position:relative}
  .js .faller__drop{transform:none}
  .faller__float{animation:none}
  .js .hero.is-in .faller__lines{animation:none}
}