/* =========================================================
   HERO QUI RETRECIT — mecanique relevee sur bright-avenue.jp (29/09/2026), reecrite sans GSAP.
   Plein ecran : video + bandeau de texte en verre qui defile. Au defilement (une hauteur d'ecran),
   la video se decoupe jusqu'a une carte 300 x 390 (x1,25 des 1600 px), quatre photos arrivent des
   cotes, le titre est blanc sur la video et fonce en dehors. Sous 1024 px : pas d'animation.
   ========================================================= */
@font-face { font-family: "Jost"; font-weight: 400; font-display: swap; src: url("../fonts/jost-400.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-display: swap; src: url("../fonts/jost-500.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-400.woff2") format("woff2"); }

.hr {
  --hr-fond: #f5f5f5; --hr-encre: #17181a; --hr-texte-taille: 210px;
  position: relative; height: 200vh; background: var(--hr-fond); color: var(--hr-encre);
  font-family: "Jost", system-ui, sans-serif;
}
.hr__sticky { position: sticky; top: 0; height: 100vh; overflow: clip; }

/* Bandeau de texte : une ligne, deux phrases identiques, defilement en boucle (JS) */
.hr__bandeau {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-size: var(--hr-texte-taille); font-weight: 500; line-height: .83; letter-spacing: -.02em;
  text-transform: uppercase; white-space: nowrap; pointer-events: none; user-select: none;
}
.hr__rangee { display: flex; will-change: transform; }
.hr__rangee span { flex: 0 0 auto; padding-right: .35em; }
.hr__bandeau--dehors { z-index: 1; color: var(--hr-encre); opacity: .1; }

/* Galeries : 01/02 devant la video, 04/05 derriere */
.hr__galerie { position: absolute; inset: 0; pointer-events: none; }
.hr__galerie--devant { z-index: 4; }
.hr__galerie--derriere { z-index: 2; }
.hr__photo { position: absolute; margin: 0; will-change: transform; backface-visibility: hidden; }
.hr__photo img { display: block; width: 100%; aspect-ratio: 1.6; object-fit: cover; border-radius: 5px; }
.hr__photo--01 { width: 308px; top: 265px; left: calc(50vw - 335px); }
.hr__photo--02 { width: 248px; top: 150px; left: calc(50vw - 127.5px); }
.hr__photo--04 { width: 248px; top: 361px; right: calc(50vw - 127.5px); }
.hr__photo--05 { width: 308px; top: 476px; right: calc(50vw - 331px); }

/* La video decoupee (clip-path pose par le script) */
.hr__decoupe { position: absolute; inset: 0; z-index: 3; clip-path: inset(0); background: #000; }
.hr__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: center; }
.hr__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 30%, rgba(0,0,0,.28)); }
/* Texte en verre : image floue de la video decoupee dans les lettres + reflet */
.hr__bandeau--verre { z-index: 1; color: rgba(255,255,255,.12); }
.hr__bandeau--verre .hr__rangee {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(236,238,242,.55) 38%, rgba(150,158,170,.35) 62%, rgba(255,255,255,.75) 100%),
    var(--hr-flou);
  background-repeat: no-repeat; background-size: 100vw 100vh, 100vw 100vh;
  -webkit-background-clip: text; background-clip: text;
  filter: saturate(.6) contrast(1.15) drop-shadow(0 1px 0 rgba(255,255,255,.5)) drop-shadow(0 20px 34px rgba(0,0,0,.22));
}

/* Contenu : deux calques identiques, blanc dans la video, fonce en dehors (masques complementaires) */
.hr__contenu { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hr__contenu--clair { color: #fff; }
.hr__contenu--fonce { color: var(--hr-encre); }
.hr__accroche { position: absolute; left: 66.5vw; top: calc(100vh - 240px); max-width: 30vw; }
.hr__titre { font-family: "Cormorant", Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.2; margin: 0 0 22px; }
.hr__texte { font-size: 12.5px; line-height: 1.75; margin: 0; }
.hr__adresse { position: absolute; left: 40px; top: calc(100vh - 110px); font-size: 10.5px; line-height: 1.5; margin: 0; }
.hr__contenu a { pointer-events: auto; color: inherit; }

/* Etapes : chaque photo grandit jusqu'au plein ecran avec son texte.
   Par defaut (telephone, sans JS) : une liste simple de grandes images legendees. */
.hr__etapes { list-style: none; margin: 0; padding: 0; background: var(--hr-fond); }
.hr__etape { position: relative; height: 82svh; overflow: hidden; isolation: isolate; --voile: 1; }
.hr__etape img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hr__etape::after { content: ""; position: absolute; inset: 0; opacity: var(--voile);
  background: linear-gradient(90deg, rgba(10,10,12,.62) 0%, rgba(10,10,12,.25) 45%, rgba(10,10,12,0) 70%), linear-gradient(0deg, rgba(10,10,12,.45), rgba(10,10,12,0) 45%); }
.hr__etape-texte { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 36px; color: #fff; }
.hr__etape-ligne { overflow: hidden; }
.hr__etape-ligne > * { display: block; }
.hr__etape-num { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; margin: 0 0 14px; opacity: .85; }
.hr__etape-titre { font-family: "Cormorant", Georgia, serif; font-weight: 400; font-size: clamp(34px, 4.4vw, 68px); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 18px; }
.hr__etape-desc { font-size: 15px; line-height: 1.7; margin: 0; max-width: 34em; }

/* Ordinateur : les etapes sont epinglees dans le hero et posees par le script */
.hr__etapes--epingle { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: none; }
.hr__etapes--epingle .hr__etape { position: absolute; height: auto; visibility: hidden; will-change: left, top, width, height; }
.hr__etapes--epingle .hr__etape-texte { left: 6vw; right: auto; bottom: 10vh; max-width: 44vw; }
.hr__etapes--epingle .hr__etape-ligne > * { transform: translateY(110%); opacity: 0; }

/* Mouvement reduit : video plein ecran fixe, pas de galerie, etapes en liste */
@media (prefers-reduced-motion: reduce) {
  .hr { height: auto; }
  .hr__sticky { position: relative; height: 100svh; }
  .hr__galerie, .hr__bandeau--dehors, .hr__contenu--fonce { display: none; }
  .hr__contenu--clair { clip-path: none !important; }
  .hr { --hr-texte-taille: 110px; }
  .hr__accroche { left: 20px; right: 20px; top: calc(100svh - 300px); max-width: none; }
  .hr__adresse { left: 20px; top: calc(100svh - 70px); }
}

/* Telephone et tablette anime (01/10/2026) : meme mouvement qu'a l'ordinateur, a l'echelle. La carte
   finale fait 70 % de la largeur ; les quatre photos encadrent la carte, deux au-dessus, deux dessous. */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .hr { --hr-texte-taille: 124px; }
  /* Le moteur decale chaque photo de sa propre largeur a l'arrivee (vers la gauche pour 01/02, vers
     la droite pour 04/05) : les positions ci-dessous en tiennent compte. Arrivees : 01 a 4 vw, 02 a
     58 vw, sous l'en-tete ; 04 a 8 vw et 05 a 56 vw, sous la carte. */
  .hr__photo--01 { width: 40vw; top: 15svh; left: 44vw; }
  .hr__photo--02 { width: 34vw; top: 11svh; left: 92vw; }
  .hr__photo--04 { width: 34vw; top: auto; bottom: 14svh; right: auto; left: -26vw; }
  .hr__photo--05 { width: 40vw; top: auto; bottom: 6svh; right: auto; left: 16vw; }
  .hr__accroche { left: 20px; right: 20px; top: auto; bottom: 8svh; max-width: none; }
  .hr__adresse { display: none; }
  .hr__etapes--epingle .hr__etape-texte { left: 20px; right: 20px; bottom: 9svh; max-width: none; }
}