:root {
  
  --piste: 280svh;                              
  --fantome: .10;                               
  --acte-col-facture: clamp(260px, 26%, 360px); 
  --fiche-min: 738px;                           
  --acte-pad: clamp(12px, 3vh, 32px);           
  --acte-cap: 112px;                            
}
@media (max-width: 1139px) { :root { --piste: 240svh; } }

.acte__piste { position: relative; margin-top: clamp(16px, 3vh, 28px); }
.note > .acte__piste { grid-column: 1 / -1; }
.acte__scene { container-type: inline-size; }
.acte { position: relative; }
.acte__haut { position: relative; }
.acte__papier { display: block; z-index: 1; background: var(--blanc); border-radius: 2px; opacity: .35; box-shadow: 0 0 0 1px color-mix(in srgb, var(--noir) 10%, transparent), 0 26px 44px -28px color-mix(in srgb, var(--noir) 60%, transparent); }
.acte__donnees { display: block; z-index: 2; filter: drop-shadow(0 18px 26px color-mix(in srgb, var(--noir) 34%, transparent)); }
.acte__donnees img { display: block; width: 100%; height: auto; }
.acte__fiche { position: relative; overflow: hidden; border-radius: 10px; background: var(--blanc); box-shadow: 0 0 0 1px color-mix(in srgb, var(--noir) 26%, transparent), 0 28px 48px -32px color-mix(in srgb, var(--noir) 46%, transparent); }
.acte__base { display: block; width: 100%; height: auto; }

.fenetre { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none;
  clip-path: inset(calc(var(--y0) * 1%) calc(100% - var(--x1) * 1%) calc(100% - var(--y1) * 1%) calc(var(--x0) * 1%) round 4px); }

.acte__vol { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pastille { position: absolute; opacity: 0; filter: drop-shadow(0 10px 16px color-mix(in srgb, var(--noir) 38%, transparent)); }
.pastille img { display: block; width: 100%; height: 100%; max-width: none; }
.en-jeu .pastille, .en-jeu .fenetre, .en-jeu .acte__papier, .en-jeu .acte__pile { will-change: transform, opacity; }
.acte__legende { max-width: 30em; font: 400 var(--fs-3)/1.5 var(--f-corps); color: color-mix(in srgb, var(--lumiere) 92%, transparent); text-wrap: pretty; }

.etiquette { position: absolute; z-index: 2; font: 500 var(--fs-2)/1.2 var(--f-corps); letter-spacing: .01em; color: var(--lumiere); white-space: nowrap; pointer-events: none; }

.acte__pile--tel { display: none; }
@media (max-width: 737px) {
  .acte__pile--large { display: none; }
  .acte__pile--tel { display: grid; row-gap: 12px; }
  .acte__vue { margin-inline: calc(-1 * var(--marge)); }
  .acte__fiche--haut { border-radius: 0; }
  .acte__fiche--totaux { justify-self: end; width: max(60%, 212px); border-radius: 8px 0 0 8px; } 
}

@media (min-width: 1140px) {
  .acte__scene {
    container-type: size; display: grid; align-items: center;
    width: min(calc(100% + var(--gouttiere) - var(--marge)), 1344px);
    height: calc(100svh - var(--barre-h)); min-height: 560px;
    margin-left: max(calc(var(--marge) - var(--gouttiere)), calc((100% - 1344px) / 2));
    padding-block: var(--acte-pad);
  }
  .acte {
    --k: min(300px, calc((100cqh - var(--acte-cap)) / 1.9126), calc(26cqw / 1.163));
    display: grid; grid-template-columns: min(var(--acte-col-facture), calc(var(--k) * 1.163)) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto; column-gap: clamp(28px, 3.6vw, 56px); align-items: start;
  }
  .acte__haut { grid-column: 1; grid-row: 1; height: calc(var(--k) * 1.9126); }
  .acte__papier { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform: translateX(-46%); }
  .acte__donnees { position: absolute; right: 0; top: calc(var(--k) * .2962); width: var(--k); }
  .acte__legende { grid-column: 1; grid-row: 2; align-self: end; padding-top: 18px; }
  .acte__vue { grid-column: 2; grid-row: 1 / 3; justify-self: center; width: min(100%, calc(100cqh * 1878 / 1701)); }
  
  .acte__scene { padding-top: max(var(--acte-pad), 30px); }
  
  .etiquette--voir { left: calc(100% - var(--k)); bottom: calc(100% + 8px); }
  .etiquette--lit { left: calc(100% - var(--k)); top: calc(100% + 8px); }
  .acte__legende { margin-left: calc(100% - var(--k)); }
}

@media (min-width: 1140px) {
  @container (max-height: 668px) {
    html.js-acte .acte__vue { width: min(100%, var(--fiche-min)); max-height: 100cqh; overflow: hidden; border-radius: 10px; }
  }
}

@media (max-width: 1139px) {
  .acte { --z: clamp(200px, 34svh, 300px); display: flex; flex-direction: column; row-gap: 14px; }
  .acte__haut { flex: none; height: var(--z); --paire: calc(var(--z) * 1.3338); --carte-d: max(0px, calc((100% - var(--paire)) / 2)); }
  .acte__donnees { position: absolute; top: 0; right: var(--carte-d); width: calc(var(--z) * 600 / 612); height: 100%; }
  .acte__papier { position: absolute; top: 0; height: 100%; width: auto; aspect-ratio: 1080 / 1528; right: calc(var(--carte-d) + var(--z) * 600 / 612 - var(--z) * .3534); }
  .acte__pile--large .acte__fiche { width: min(100%, var(--fiche-min)); margin-inline: auto; }
  .acte__legende { padding-inline: 2px; font-size: var(--fs-2); }
  
  .acte__haut { margin-top: 20px; }
  .etiquette { bottom: calc(100% + 4px); }
  .etiquette--voir { left: max(0px, calc(100% - var(--carte-d) - var(--z) * 600 / 612 + var(--z) * .3534 - var(--z) * 1080 / 1528)); }
  .etiquette--lit { right: var(--carte-d); }
}

@media (min-width: 738px) and (max-width: 799px) {
  .acte__vue { margin-inline: calc(-1 * var(--marge)); }
}

html.js-acte .acte__piste { height: var(--piste); }
html.js-acte .acte__scene { position: sticky; top: var(--barre-h); }
html.js-acte .acte__papier { opacity: 0; transform: translateX(12%); }
html.js-acte .acte__donnees { opacity: 0; }
html.js-acte .acte__base { opacity: var(--fantome); }

html.js-acte .etiquette, html.js-acte .acte__legende { opacity: 0; }
@media (max-width: 1139px) {
  html.js-acte .acte__scene { container-type: size; height: calc(100svh - var(--barre-h)); padding-block: var(--acte-pad); }
  html.js-acte .acte { height: 100%; }
  html.js-acte .acte__vue { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  
  html.js-acte .acte__haut { z-index: 2; }
  html.js-acte .acte__haut::before { content: ''; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--marge)) -14px; background: var(--plan-fond); }
  html.js-acte .acte__vue { position: relative; z-index: 1; margin-top: calc(-14px - var(--z)); }
}

@media (prefers-reduced-motion: reduce) {
  .pastille { display: none; }
}
@media print {
  html.js-acte .acte__piste { height: auto; }
  html.js-acte .acte__scene { position: static; height: auto; }
  html.js-acte .acte__vue { overflow: visible; }
  .acte__vol { display: none; }
  .acte__papier, .acte__donnees, .acte__base, .acte__haut, .etiquette, .acte__legende { opacity: 1 !important; }
  html.js-acte .acte__vue { margin-top: 0; }
  html.js-acte .acte__haut::before { display: none; }
}