/* La façade : une photographie, deux états alignés au pixel (nuit, matin), six fenêtres et la fenêtre du dirigeant.
   Les variables --day, --out, --on (par fenêtre), --t (par dépendance) et --end sont écrites par fx.js ; sans JS l'état final est affiché. */

.fxp{--ar:1.2;position:absolute;left:50%;top:50%;width:max(100vw,calc(100svh * var(--ar)));aspect-ratio:var(--ar);transform:translate(-50%,-50%)}
@media (max-aspect-ratio:1/1){.fxp{--ar:.6667}}
.fxp picture{position:absolute;inset:0;display:block}
.fxp img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill}
.fxp__matin{opacity:var(--day,1)}

/* fenêtres : coordonnées en pourcentage de la photo (grand format, puis portrait) */
.fxw{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);pointer-events:none}
.fxw--1{--l:17.08%;--t:40.15%;--w:4.77%;--h:7.11%}.fxw--2{--l:29.23%;--t:40.15%;--w:4.77%;--h:7.11%}.fxw--3{--l:41.46%;--t:40.15%;--w:4.77%;--h:7.11%}
.fxw--4{--l:54.38%;--t:40.15%;--w:4.77%;--h:7.11%}.fxw--5{--l:66.54%;--t:40.15%;--w:4.77%;--h:7.11%}.fxw--6{--l:78.54%;--t:40.15%;--w:4.77%;--h:7.11%}
.fxw--out{--l:66.62%;--t:56.86%;--w:4.62%;--h:8.31%}
@media (max-aspect-ratio:1/1){
  .fxw--1{--l:7.75%;--t:36.39%;--w:7.33%;--h:6.67%}.fxw--2{--l:24.42%;--t:36.39%;--w:7.33%;--h:6.67%}.fxw--3{--l:39.42%;--t:36.39%;--w:7.33%;--h:6.67%}
  .fxw--4{--l:54%;--t:36.39%;--w:7.33%;--h:6.67%}.fxw--5{--l:68.83%;--t:36.39%;--w:7.33%;--h:6.67%}.fxw--6{--l:85.33%;--t:36.39%;--w:7.33%;--h:6.67%}
  .fxw--out{--l:69%;--t:51.5%;--w:7%;--h:7.39%}
}
/* une pièce éclairée : la lumière se mêle à la photo (lames de volets et vitres restent visibles), sans pastille */
.fxw:not(.fxw--out){opacity:calc(var(--on,1) * (1 - .25 * var(--day,1)));mix-blend-mode:screen;background:
  radial-gradient(ellipse 60% 70% at 50% 45%,rgba(255,176,82,.95) 0%,rgba(244,128,32,.8) 55%,rgba(200,90,20,.35) 100%) 50% 0/64% 100% no-repeat}
.fxw:not(.fxw--out)::before{content:"";position:absolute;inset:-60% -110%;background:radial-gradient(closest-side,rgba(255,170,70,.3),transparent);z-index:-1;mix-blend-mode:screen}
.fxw:not(.fxw--out)::after{content:"";position:absolute;left:18%;right:18%;top:48%;height:1.5px;background:rgba(14,21,36,.55)}
.fxw i{display:none}
/* la fenêtre du dirigeant qui s'éteint */
.fxw--out{opacity:var(--out,1);background:linear-gradient(180deg,#26324e 0%,#141e36 55%,#0f1829 100%);box-shadow:inset 0 0 0 2px rgba(10,16,30,.7)}

/* ------------------------------------------------------------ l'acte pic -- */
.fx{position:relative;color:var(--moon);background:var(--night)}
.fx.fx-live{height:calc(100svh * var(--span,4.6))}
.fx__stage{position:relative;min-height:100svh;overflow:hidden;background:color-mix(in oklab,var(--night) calc((1 - var(--day,1)) * 100%),var(--stone))}
.fx.fx-live .fx__stage{position:sticky;top:0;height:100svh}
.fx__plate{position:absolute;inset:0;overflow:hidden}
.fx .fxp{left:auto;right:0;top:0;width:calc(100svh * var(--ar));height:100svh;transform:none}
.fx__copy{position:relative;z-index:2;display:grid;align-content:center;min-height:100svh;padding:calc(var(--sh-h) + 1.5rem) clamp(1.5rem,2.4vw,3rem) 3rem var(--gut);width:min(36rem,38vw);background:color-mix(in oklab,var(--night) calc((1 - var(--day,1)) * 100%),var(--stone))}
.fx__h{font:600 clamp(1.6rem,1rem + 1.6vw,2.4rem)/1.08 var(--serif);margin:0 0 1.2rem;color:var(--fx-ink,var(--stone))}
.fx__list{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.fx .tx{--t:1;min-height:4.1rem;position:relative;display:grid;grid-template-columns:2rem 1fr;gap:.9rem;align-items:start;padding:.55rem 0;border-top:1px solid color-mix(in oklab,var(--fx-ink,var(--stone)) 18%,transparent);margin:0}
.fx .tx::before{content:attr(data-n);grid-column:1;grid-row:1;width:1.65rem;height:1.65rem;border-radius:50%;display:grid;place-items:center;font:600 .78rem/1 var(--sans);color:color-mix(in oklab,var(--amber) calc(var(--t) * 100%),var(--moon-soft));box-shadow:inset 0 0 0 1.5px currentColor;background:color-mix(in oklab,var(--amber) calc(var(--t) * 22%),transparent)}
.fx .tx span{grid-column:2;grid-row:1;font:400 clamp(1rem,.85rem + .5vw,1.28rem)/1.34 var(--serif);transition:none}
.fx .tx__dep{color:var(--moon);opacity:clamp(0,calc((.6 - var(--t)) / .25),1)}
.fx .tx__done{color:var(--fx-ink,var(--stone));font-weight:600;opacity:clamp(0,calc((var(--t) - .4) / .25),1)}
.fx__count{margin:1rem 0 0;font:500 .9rem/1 var(--sans);color:var(--moon-soft);font-variant-numeric:tabular-nums}
.fx__count b{color:var(--amber)}
.fx__endwrap{display:grid}
.fx__list,.fx__end{grid-area:1/1}
.fx__end{opacity:var(--end,1);pointer-events:none;align-self:start}
.fx__end h2{font:600 clamp(2.4rem,1rem + 4vw,4.2rem)/1 var(--serif);margin:0 0 .8rem;color:var(--fx-ink,var(--stone))}
.fx__end p{color:var(--fx-ink-soft,var(--moon));max-width:30ch}
.fx__end .btn,.fx__end a{pointer-events:auto}
.fx.is-day{--fx-ink:var(--ink);--fx-ink-soft:var(--ink-soft)}
.fx.is-day .tx__dep,.fx.is-day .fx__count{color:var(--ink-soft)}
.fx.is-day .fx__count b{color:var(--amber-deep)}
.fx.is-day .tx::before{color:color-mix(in oklab,var(--amber-deep) calc(var(--t) * 100%),var(--ink-soft))}
.fx:not(.fx-live){--day:1;--end:1}
.fx:not(.fx-live) .fx__stage{--fx-ink:var(--ink);--fx-ink-soft:var(--ink-soft)}
.fx:not(.fx-live) .tx__dep{display:none}
.fx:not(.fx-live) .fx__end{grid-area:auto;margin-top:2rem;pointer-events:auto}
.fx:not(.fx-live) .fx__endwrap{display:block}
.fx:not(.fx-live) .fx__count{display:none}

@media (max-aspect-ratio:1/1),(max-width:760px){
  .fx__plate{inset:0 0 auto 0;height:50svh}
  .fx .fxp{left:50%;right:auto;top:-9%;width:max(100vw,calc(50svh * 1.45 * var(--ar)));height:auto;aspect-ratio:var(--ar);transform:translateX(-52%);-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 16%);mask-image:linear-gradient(0deg,transparent 0,#000 16%)}
  .fx__copy{position:absolute;left:0;right:0;bottom:0;width:100%;min-height:0;align-content:start;padding:1rem var(--gut) 1.2rem;height:50svh;box-shadow:none;clip-path:none}
  .fx__h{font-size:1.55rem;margin-bottom:.5rem}
  .fx .tx{min-height:0}
  .fx .tx{padding:.32rem 0;gap:.7rem;grid-template-columns:1.6rem 1fr}
  .fx .tx::before{width:1.4rem;height:1.4rem;font-size:.7rem}
  .fx .tx span{font-size:.98rem;line-height:1.32}
  .fx__count{margin-top:.5rem;font-size:.85rem}
  .fx__end h2{font-size:2.2rem}
  .fx__end p{font-size:.98rem;margin-bottom:.8rem}
}
@media (prefers-reduced-motion:reduce){.fx.fx-live{height:auto}.fx.fx-live .fx__stage{position:relative;height:auto}}