/* L'entrée : le rideau métallique peint se lève au défilement sur l'atelier, puis le mur
   monte par-dessus. Scène collante dans une piste : --leve (course du rideau), --pause
   (l'atelier seul), puis 100svh pendant lesquels le mur recouvre la scène. */

.entree {
  --leve: 90svh; --pause: 14svh;
  position: relative; z-index: 1;
  height: calc(var(--utile) + var(--leve) + var(--pause) + 100svh);
}
@media (max-width: 767px) { .entree { --leve: 62svh; --pause: 10svh; } }

.scene {
  position: sticky; top: calc(var(--demobar-offset, 0px) + var(--caisson-h));
  height: var(--utile); overflow: clip; background: var(--caisson);
}
.scene__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.scene__legende {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 1; pointer-events: none;
}
.scene__legende p {
  display: inline-block; padding: 8px 14px; border-radius: 3px;
  background: var(--caisson); color: var(--blanc); font: 500 16px/1.3 var(--meca);
}

/* Lames de 28 px : un reflet, le corps bleu émail, une gorge bleu profond. */
.rideau {
  position: absolute; inset: 0; z-index: 2; will-change: transform;
  background-color: var(--bleu);
  background-image:
    linear-gradient(90deg, rgb(255 255 255 / .05), transparent 28%, rgb(8 26 71 / .10) 72%, rgb(255 255 255 / .03)),
    repeating-linear-gradient(180deg, #2a58c2 0 1px, var(--bleu) 1px 21px, #13398f 21px 22px, var(--caisson) 22px 27px, #0b2257 27px 28px);
}
/* Les gorges repassent sur le lettrage : il est peint sur la tôle, pas posé dessus. */
.rideau::after {
  content: ""; position: absolute; inset: 0 0 26px; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 22px, rgb(14 39 102 / .3) 22px 27px, transparent 27px 28px);
}
.rideau__lettrage {
  position: absolute; left: 0; right: 0; z-index: 1;
  bottom: calc(26px + var(--bandeau-h) + 36px + 6svh);
}
.rideau__h1 {
  font: 400 12vw/.92 var(--script); color: var(--blanc);
  margin-left: .07em; white-space: nowrap;
}
.rideau__h1 span { display: inline; }
.rideau__sous { margin-top: clamp(10px, 1.6svh, 22px); max-width: 60ch; font: 600 clamp(18px, 1.45vw, 26px)/1.35 var(--meca); }
.rideau__sous span { display: block; white-space: nowrap; }
.rideau__sous i { display: none; }

.pancarte {
  position: absolute; z-index: 3; top: 30%; right: max(var(--marge), calc((100% - var(--largeur)) / 2));
  width: 196px; transform-origin: 50% 0; pointer-events: none;
}
.pancarte__clou {
  display: block; width: 12px; height: 12px; margin: 0 auto; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #e6ebf5, #8a96ad 60%, #3b4661);
  box-shadow: 0 2px 3px rgb(0 0 0 / .45);
}
.pancarte__fils { display: block; width: 120px; height: 34px; margin: -6px auto 0; }
.pancarte__plaque {
  display: grid; justify-items: center; gap: 2px; padding: 12px 10px 14px; border-radius: 3px;
  background: var(--blanc); color: var(--bleu);
  box-shadow: inset 0 0 0 5px var(--blanc), inset 0 0 0 7px var(--bleu), 0 14px 24px -14px rgb(0 0 0 / .7);
}
.pancarte__mot { font: 400 46px/1 var(--script); }
.pancarte__quand { font: 600 17px/1.2 var(--meca); }
.pancarte.est-ferme .pancarte__mot { color: var(--rouge); }

/* Barre basse du rideau : plus lourde, deux poignées, la serrure au milieu. */
.rideau__barre {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26px; z-index: 3; transform-origin: 50% 100%;
  background: linear-gradient(180deg, #2a58c2 0 2px, var(--caisson) 2px 20px, var(--levre) 20px);
}
.rideau__barre i, .rideau__barre b { position: absolute; top: 8px; }
.rideau__barre i { width: 64px; height: 9px; border-radius: 4px; background: linear-gradient(#c9d2e3, #69769a); }
.rideau__barre i:first-child { left: 22%; }
.rideau__barre i:last-child { right: 22%; }
.rideau__barre b { left: 50%; width: 14px; height: 14px; margin: -2px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f2f5fb, #8a96ad 60%, #3b4661); }

@media (max-width: 767px) {
  .rideau__h1 { font-size: 17vw; line-height: .95; white-space: normal; }
  .rideau__h1 span { display: block; }
  .rideau__sous { font-size: 17px; max-width: 30ch; }
  .rideau__sous span { display: block; }
  .rideau__sous i { display: none; }
  .rideau__lettrage { bottom: calc(26px + var(--bandeau-h) + 36px + 4svh); }
  .pancarte { top: 16%; width: 150px; }
  .pancarte__mot { font-size: 36px; }
  .pancarte__quand { font-size: 15px; }
  .pancarte__fils { width: 96px; height: 28px; }
  .rideau__barre i { width: 44px; }
  .scene__legende p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .entree { --leve: 0px; --pause: 0px; }
  .pancarte { top: 52%; }
  .rideau { transform: translateY(-40%) !important; }
}