/* Réclames d'avant-séance : de fausses pubs d'époque pour les fonctions du site. */
.reclames { position: relative; display: grid; }
.reclame { grid-area: 1 / 1; position: relative; display: grid; gap: 8px; justify-items: start; padding: 26px 30px 24px; border-radius: 6px; color: #2a1a14; overflow: hidden;
  background: radial-gradient(circle, rgba(42,26,20,.09) 1px, transparent 1.5px) 0 0 / 6px 6px, linear-gradient(160deg, #f6ead2, #ead8b6);
  box-shadow: inset 0 0 0 6px #ead8b6, inset 0 0 0 8px #2a1a14, 0 18px 40px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: scale(.98); transition: opacity .5s ease, transform .5s ease, visibility .5s; }
.reclame.on { opacity: 1; visibility: visible; transform: none; }
.reclame .r-sur { margin: 0; font: 800 .74rem var(--body); letter-spacing: .22em; text-transform: uppercase; color: #8f2420; }
.reclame h3 { margin: 0; font: italic 400 clamp(2.2rem, 6vw, 3.2rem)/1 var(--serif); }
.reclame .r-slogan { margin: 0; max-width: 46ch; font-size: 1.02rem; line-height: 1.5; }
.reclame .r-cta { margin-top: 4px; font: 400 1.25rem/1 var(--display); letter-spacing: .06em; color: #f5ead8; background: #8f2420; padding: 9px 16px 7px; border-radius: 4px; text-decoration: none; }
.reclame .r-cta:hover { background: #2a1a14; }
.reclame .r-tampon { position: absolute; right: 18px; bottom: 16px; font: 400 1rem/1 var(--display); letter-spacing: .2em; color: rgba(143,36,32,.5); border: 2px solid rgba(143,36,32,.45); border-radius: 4px; padding: 4px 8px 2px; transform: rotate(-8deg); }
.reclame .r-etoile { position: absolute; top: 14px; right: 18px; width: 92px; height: 92px; display: grid; place-items: center; text-align: center; transform: rotate(12deg);
  font: 400 1.05rem/1 var(--display); letter-spacing: .04em; color: #fff6e6; background: #e5413a;
  clip-path: polygon(50% 0, 61% 18%, 82% 10%, 80% 32%, 100% 40%, 85% 56%, 96% 76%, 74% 78%, 68% 100%, 50% 86%, 32% 100%, 26% 78%, 4% 76%, 15% 56%, 0 40%, 20% 32%, 18% 10%, 39% 18%); }
.r-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.r-dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 0; background: var(--seat); }
.r-dots button[aria-pressed="true"] { background: var(--bulb); }
.r-dots { align-items: center; }
.r-dots button.r-pause { width: auto; height: auto; margin-left: 6px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--seat); background: transparent; color: var(--dim); font: 700 .72rem var(--body); cursor: pointer; }
.r-dots button.r-pause:hover { color: var(--cream); border-color: rgba(255,207,107,.5); }
@media (max-width: 600px) { .reclame { padding: 22px 20px 52px; } .reclame .r-etoile { width: 70px; height: 70px; font-size: .85rem; top: 10px; right: 10px; } .reclame h3 { padding-right: 64px; } }

/* La vendeuse d'esquimaux passe dans l'allée de l'entracte. */
.entracte { position: relative; padding-bottom: 96px; overflow: hidden; }
.vendeuse { position: absolute; left: 0; bottom: 6px; width: 48px; height: 72px; padding: 0; border: 0; background: none; transform: translateX(-80px); }
.entracte.vue .vendeuse { animation: passe 14s linear both; }
.entracte .vendeuse.pause { animation-play-state: paused; }
@keyframes passe { from { transform: translateX(-80px); } to { transform: translateX(var(--allee, 800px)); } }
/* La vendeuse : petit chapeau rond, carré court, uniforme rouge à boutons dorés, plateau d'esquimaux. */
.vendeuse svg, .ouvreuse svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vendeuse svg *, .ouvreuse svg * { transform-box: view-box; }
.v-haut { transform-origin: 24px 52px; }
.v-jambe-g, .o-jambe-g { transform-origin: 22px 52px; }
.v-jambe-d, .o-jambe-d { transform-origin: 27px 52px; }
.entracte.vue .vendeuse:not(.pause) .v-haut { animation: dandine .45s ease-in-out infinite alternate; }
.entracte.vue .vendeuse:not(.pause) .v-jambe-g { animation: pas .45s ease-in-out infinite alternate; }
.entracte.vue .vendeuse:not(.pause) .v-jambe-d { animation: pas .45s ease-in-out infinite alternate-reverse; }
@keyframes dandine { to { transform: translateY(-1.5px) rotate(1.2deg); } }
@keyframes pas { from { transform: rotate(14deg); } to { transform: rotate(-14deg); } }
/* Les yeux clignent ; à l'arrêt, on respire. */
.o-haut circle[fill="#2a1a14"], .v-haut circle[fill="#2a1a14"] { transform-box: fill-box; transform-origin: center; }
.cligne .o-haut circle[fill="#2a1a14"], .cligne .v-haut circle[fill="#2a1a14"] { animation: cligne .3s; }
.v-haut circle[fill="#2a1a14"] { animation-delay: -2.1s; }
@keyframes cligne { 40% { transform: scaleY(.1); } }
.ouvreuse:not(.marche) svg { animation: souffle-o 3.4s ease-in-out infinite alternate; }
@keyframes souffle-o { to { translate: 0 -.7px; } }
.entracte .vendeuse.pause .v-haut { animation: crie .5s ease-in-out 2 alternate; }
@keyframes crie { to { transform: translateY(-2px) rotate(-3deg); } }
.v-bulle { position: absolute; left: 50%; bottom: calc(100% + 6px); padding: 3px 9px; border-radius: 8px; white-space: nowrap; background: var(--cream); color: var(--ink); font: 800 .72rem var(--body); opacity: 0; transform: translateX(-50%); pointer-events: none; }
.vendeuse.parle .v-bulle { animation: bulle 2.4s ease forwards; }

/* Le pot de pop-corn : il se vide pendant qu'on lit, on le remplit en cliquant. */
.pot { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; width: 56px; height: 70px; padding: 0; border: 0; background: none; overflow: hidden; transition: opacity .3s ease, transform .3s ease; }
.pot.away { opacity: 0; transform: translateY(14px); pointer-events: none; }
/* Le pop-corn ne dépasse jamais du pot : au-dessus du bord, il reste dans la largeur de l'ouverture ;
   en dessous, il suit les flancs du pot (même trapèze que le seau). */
.p-interieur { position: absolute; inset: 0; clip-path: polygon(5px 0, 51px 0, 51px 31px, 45px 70px, 11px 70px, 5px 31px); }
.p-mais { position: absolute; left: 6px; right: 6px; top: 7px; height: 28px; transition: transform .5s ease; transform: translateY(calc((1 - var(--niveau, 1)) * 34px));
  background: radial-gradient(circle at 15% 70%, #fff6e2 0 8px, transparent 8.5px), radial-gradient(circle at 40% 40%, #ffeec6 0 9px, transparent 9.5px), radial-gradient(circle at 65% 65%, #fff8ea 0 8px, transparent 8.5px), radial-gradient(circle at 86% 45%, #ffe7b0 0 8px, transparent 8.5px), radial-gradient(circle at 50% 85%, #fff3dc 0 9px, transparent 9.5px); }
.p-seau { position: absolute; left: 4px; right: 4px; bottom: 0; height: 40px; z-index: 1; border-radius: 3px; background: repeating-linear-gradient(90deg, #e5413a 0 8px, #f5ead8 8px 16px); clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%); box-shadow: inset 0 3px 0 rgba(0,0,0,.15); }
.pot.vide .p-seau { animation: secoue .5s ease 2; }
@keyframes secoue { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@media (max-width: 520px) { .pot { transform: scale(.82); transform-origin: 0 100%; } }

/* Le diplôme de projectionniste, quand toutes les étapes sont faites. */
.diplome-box { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 26px; border-radius: 18px; border: 1px solid rgba(255,207,107,.5); background: radial-gradient(ellipse at 50% 0, rgba(255,207,107,.16), transparent 70%), var(--velvet-2); animation: rise .5s ease both; }
.diplome-box .titre { margin: 0; font: italic 400 2.2rem/1.1 var(--serif); color: var(--bulb); }
.diplome-box p { margin: 0; color: #e6d6c8; }
.diplome-box .row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.diplome-box input { font: 600 1rem var(--body); padding: 11px 13px; border-radius: 10px; border: 1px dashed var(--bulb); background: #0f080c; color: var(--cream); min-width: 0; width: 220px; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* L'ouvreuse : elle suit la lecture et éclaire l'étape en cours avec sa lampe. */
.ouvreuse { position: fixed; top: 0; left: calc(50% - 430px - 104px); z-index: 30; width: 50px; height: 86px; cursor: pointer; will-change: transform; }
.o-haut { transform-origin: 24px 56px; }
.o-jambe-g { transform-origin: 22px 58px; } .o-jambe-d { transform-origin: 27px 58px; }
.ouvreuse.marche .o-haut { animation: dandine .3s ease-in-out infinite alternate; }
.ouvreuse.marche .o-jambe-g { animation: pas .3s ease-in-out infinite alternate; }
.ouvreuse.marche .o-jambe-d { animation: pas .3s ease-in-out infinite alternate-reverse; }
.o-lampe { position: absolute; right: -1px; top: 37.5px; width: 3px; height: 5px; border-radius: 2px; background: #fff3cf; box-shadow: 0 0 10px 4px rgba(255,220,150,.75); }
.o-bulle { position: absolute; left: 50%; bottom: calc(100% + 6px); padding: 3px 9px; border-radius: 8px; white-space: nowrap; background: var(--cream); color: var(--ink); font: 800 .72rem var(--body); opacity: 0; transform: translateX(-50%); pointer-events: none; }
.ouvreuse.parle .o-bulle { animation: bulle 2.4s ease forwards; }
.o-faisceau { position: fixed; left: 0; top: 0; z-index: 1; height: 150px; margin-top: -75px; pointer-events: none; transform-origin: 0 50%; opacity: 0; transition: opacity .4s ease; mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(255,230,170,.32), rgba(255,230,170,.04)); clip-path: polygon(0 47%, 100% 0, 100% 100%, 0 53%); }
.o-faisceau.on { opacity: 1; }
@media (max-width: 1179px) { .ouvreuse, .o-faisceau { display: none; } }
@media (prefers-reduced-motion: reduce) { .entracte.vue .vendeuse, .vendeuse svg *, .ouvreuse svg *, .pot.vide .p-seau { animation: none !important; } .vendeuse { display: none; } }