/* Déclic : effets de lumière et d'appareil photo (accueil et studio). */

/* ----- Flash et image rémanente ----- */
#flash{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:100;
  background:radial-gradient(circle at 50% 35%,#FFFFFF 0,#FFF8EA 45%,#FFE7C0 100%)}
#flash.on{animation:flash .95s cubic-bezier(.2,.8,.3,1)}
@keyframes flash{0%{opacity:0}5%{opacity:calc(.96 * var(--intensite,1))}100%{opacity:0}}
.remanence{position:fixed;z-index:99;pointer-events:none;border-radius:40px;background:radial-gradient(closest-side,rgba(92,255,222,.22),rgba(92,255,222,.08) 60%,transparent);filter:blur(34px);mix-blend-mode:screen;opacity:0;animation:remanence 1.6s .12s ease-out forwards}
@keyframes remanence{0%{opacity:0;transform:scale(.96)}14%{opacity:.9}100%{opacity:0;transform:scale(1.04)}}

/* ----- Diaphragme ----- */
.iris{position:fixed;z-index:98;pointer-events:none;border-radius:50%;overflow:hidden}
.iris i{position:absolute;left:50%;top:50%;width:100%;height:200%;margin-top:-100%;transform-origin:0 50%;
  background:linear-gradient(90deg,#2B2327 0,#161114 30%,#0B080A 100%);box-shadow:inset 1.5px 0 0 rgba(235,210,156,.35)}

/* ----- Ambiance de studio ----- */
.ambiance{position:absolute;inset:0;pointer-events:none;overflow:hidden;overflow:clip;z-index:0}
/* fenêtre collante : la lumière n'est calculée que sur la partie visible de la page */
.ambiance .ecran{position:sticky;top:0;display:block;width:100%;height:100vh}
.ambiance canvas{position:absolute;inset:0;width:100%;height:100%}
.faisceau{position:absolute;top:-6%;width:62%;height:125%;transform-origin:50% 0;mix-blend-mode:screen;filter:blur(8px);opacity:.9;transition:opacity 1.2s;
  background:conic-gradient(from 180deg at 50% 0%,transparent 158deg,rgba(255,232,190,.13) 170deg,rgba(255,238,205,.22) 180deg,rgba(255,232,190,.13) 190deg,transparent 202deg)}
.faisceau.g{left:-12%;rotate:-16deg;animation:balaye-g 11s ease-in-out infinite alternate}
.faisceau.d{right:-12%;rotate:16deg;animation:balaye-d 13s ease-in-out infinite alternate}
@keyframes balaye-g{to{rotate:-8deg}}
@keyframes balaye-d{to{rotate:9deg}}
.inactinique{position:absolute;inset:0;opacity:0;transition:opacity 1.4s;mix-blend-mode:screen;
  background:radial-gradient(70% 45% at 50% 0%,rgba(214,32,32,.42),transparent 72%),radial-gradient(120% 70% at 50% 110%,rgba(140,12,24,.3),transparent 70%)}
.fuite{position:absolute;width:60%;height:62%;border-radius:50%;filter:blur(70px);opacity:0;mix-blend-mode:screen}
.fuite.f1{left:-18%;top:6%;background:radial-gradient(#FF8A3D,transparent 66%)}
.fuite.f2{right:-18%;bottom:-4%;background:radial-gradient(#FF3D8B,transparent 66%)}
.ambiance.fuite-on .fuite{animation:fuite 3s ease-out}
.ambiance.fuite-on .fuite.f2{animation-delay:.25s}
@keyframes fuite{0%{opacity:0;translate:0 0}25%{opacity:.6}100%{opacity:0;translate:30px -20px}}

/* Chambre noire : on éteint, la lampe inactinique s'allume en grésillant et se balance au bout de son fil */
.chambre-noire .inactinique{opacity:1;animation:inactinique 3.6s ease-in-out infinite}
.chambre-noire .faisceau{opacity:.08}
@keyframes inactinique{50%{filter:brightness(1.25)}}
.scene::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:#050103;opacity:0}
.scene.chambre-noire::after{animation:extinction 1.4s ease-out}
@keyframes extinction{0%{opacity:0}12%{opacity:.92}55%{opacity:.7}100%{opacity:0}}
.lampe{position:absolute;right:8%;top:0;width:70px;height:140px;transform-origin:50% 0;opacity:0;translate:0 -80px;
  transition:opacity .4s,translate .9s cubic-bezier(.3,1.5,.5,1)}
.chambre-noire .lampe{opacity:1;translate:0 0;animation:balance-lampe 5.5s ease-in-out infinite}
@keyframes balance-lampe{0%,100%{rotate:-5deg}50%{rotate:5deg}}
.lampe .cordon{position:absolute;left:34px;top:0;width:2px;height:92px;background:linear-gradient(#0B0709,#3A2A30)}
.lampe .abat{position:absolute;left:12px;top:88px;width:46px;height:24px;border-radius:24px 24px 5px 5px/22px 22px 5px 5px;
  background:linear-gradient(#34282D,#141013);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.lampe .ampoule{position:absolute;left:22px;top:104px;width:26px;height:24px;border-radius:50% 50% 46% 46%;
  background:radial-gradient(circle at 40% 35%,#FFB3A5,#E3221C 55%,#8A0B0B);box-shadow:0 0 16px 6px rgba(255,40,30,.75),0 0 60px 22px rgba(255,30,20,.35)}
.lampe .flaque{position:absolute;left:50%;top:116px;width:1000px;height:1000px;margin:-500px 0 0 -500px;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,45,30,.3),rgba(200,20,20,.09) 45%,transparent)}
.chambre-noire .lampe .ampoule,.chambre-noire .lampe .flaque{animation:allume 1.4s linear both}
@keyframes allume{0%,14%{opacity:0}18%{opacity:.9}24%{opacity:.08}34%{opacity:1}42%{opacity:.3}52%,100%{opacity:1}}
@media (max-width:880px){.lampe{right:1%;scale:.7}}

/* ----- Studio : le tirage ----- */
.scene > :not(.ambiance){position:relative;z-index:1}
.tirage{--rx:0deg;--ry:0deg;--lx:50%;--ly:-30%}
.tirage canvas{transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .3s ease-out}
.tirage .brillance{position:absolute;inset:0;pointer-events:none;z-index:2;mix-blend-mode:soft-light;transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .3s ease-out;
  background:radial-gradient(circle at var(--lx) var(--ly),rgba(255,255,255,.55),transparent 42%)}

/* Mise au point dans le viseur */
.tirage.mise-au-point canvas{animation:mise-au-point 2.4s ease-in-out}
@keyframes mise-au-point{0%{filter:blur(7px)}35%{filter:blur(1.5px)}55%{filter:blur(4px)}85%,100%{filter:blur(0)}}

/* Développement : sous la lumière rouge, le papier baigne dans le révélateur et l'image monte peu à peu (--dev de 0 à 1) */
.tirage.developpe canvas{transition:filter 2.4s ease-out;
  filter:url(#eau) grayscale(1) brightness(calc(1.8 - var(--dev,0) * .95)) contrast(calc(.1 + var(--dev,0) * 1.1)) blur(calc((1 - var(--dev,0)) * 2.4px))}
/* sous la lampe inactinique, le papier blanc paraît rouge */
.tirage.developpe::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:#D4281F;mix-blend-mode:multiply;opacity:.84;animation:apparait 1.4s ease-out}
/* reflet de la surface du révélateur sur le papier ; il glisse quand le liquide bascule */
.tirage .bain{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;mix-blend-mode:screen;animation:apparait 1.6s ease-out}
.tirage .bain::before{content:"";position:absolute;left:-50%;right:-50%;top:30%;height:40%;
  rotate:calc(var(--bascule,0) * -20deg);translate:calc(var(--bascule,0) * -12%) calc(var(--houle,0) * 30% + var(--bascule,0) * var(--bascule,0) * 20%);will-change:rotate,translate;
  background:linear-gradient(180deg,transparent 0,rgba(255,140,120,.05) 30%,rgba(255,185,165,.3) 48%,rgba(255,150,130,.1) 56%,transparent 100%)}
.tirage.developpe.leger canvas{filter:grayscale(1) brightness(calc(1.8 - var(--dev,0) * .95)) contrast(calc(.1 + var(--dev,0) * 1.1))}
.tirage .caustiques{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:.3;animation:apparait 1.6s ease-out}
@keyframes apparait{from{opacity:0}}
.tirage.developpe{box-shadow:0 26px 44px -16px rgba(0,0,0,.8),0 0 0 1px rgba(255,60,50,.25),0 0 60px -10px rgba(255,40,30,.35)}
.tirage.agite canvas{animation:agite 1.5s ease-in-out}
@keyframes agite{25%{translate:5px 2px;rotate:.7deg}60%{translate:-4px -1px;rotate:-.5deg}}

/* Sortie du bain : le papier ruisselle et brille encore */
.tirage.mouille::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(160deg,rgba(255,255,255,.55),transparent 28%,transparent 58%,rgba(255,255,255,.3) 72%,transparent 84%);animation:seche 3.2s ease-out forwards}
@keyframes seche{from{opacity:1}to{opacity:0}}
.goutte{position:absolute;top:var(--y);width:7px;height:10px;margin-left:-3.5px;z-index:4;pointer-events:none;opacity:0;
  border-radius:50% 50% 50% 50%/62% 62% 38% 38%;box-shadow:0 1px 2px rgba(0,0,0,.25);
  background:radial-gradient(circle at 35% 32%,#fff,rgba(215,230,240,.7) 38%,rgba(120,140,160,.45));
  animation:goutte 1.5s var(--d) cubic-bezier(.55,0,1,.45) forwards}
@keyframes goutte{0%{opacity:0;transform:translateY(-4px) scaleY(.6)}18%{opacity:1;transform:translateY(0) scaleY(1.15)}100%{opacity:0;transform:translateY(var(--h)) scaleY(1.6)}}

/* Reflet qui balaie le tirage une fois révélé */
.tirage.reflet::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 49%,rgba(255,255,255,.1) 55%,transparent 62%);background-size:260% 100%;
  animation:reflet 1.5s ease-in-out forwards}
@keyframes reflet{from{background-position:130% 0}to{background-position:-40% 0}}

/* Cachet « ACHETÉ » tamponné */
.cachet.frais{animation:tampon .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes tampon{from{transform:rotate(8deg) scale(2.4);opacity:0}60%{transform:rotate(8deg) scale(.9);opacity:1}to{transform:rotate(8deg) scale(1)}}

/* ----- Viseur ----- */
.viseur{position:absolute;inset:12px;z-index:6;pointer-events:none;color:#fff;font-family:var(--texte);
  background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(10,4,8,.45));animation:viseur-in .35s ease-out}
@keyframes viseur-in{from{opacity:0;transform:scale(1.04)}}
.viseur .coin{position:absolute;width:34px;height:34px;border:0 solid #fff;filter:drop-shadow(0 0 1.5px rgba(20,8,16,.9)) drop-shadow(0 0 5px rgba(20,8,16,.5))}
.viseur .hg{left:0;top:0;border-width:3px 0 0 3px}.viseur .hd{right:0;top:0;border-width:3px 3px 0 0}
.viseur .bg{left:0;bottom:0;border-width:0 0 3px 3px}.viseur .bd{right:0;bottom:0;border-width:0 3px 3px 0}
.viseur .mire{position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;border:1.5px solid rgba(255,255,255,.7);border-radius:50%;box-shadow:0 0 0 1px rgba(20,8,16,.25)}
.viseur .collimateurs i{position:absolute;width:22px;height:16px;border:1.5px solid rgba(255,255,255,.85);border-radius:2px;box-shadow:0 0 0 1px rgba(20,8,16,.3);transition:border-color .2s,box-shadow .2s}
.viseur .collimateurs i:nth-child(1){left:28%;top:34%}.viseur .collimateurs i:nth-child(2){right:28%;top:34%}
.viseur .collimateurs i:nth-child(3){left:28%;bottom:34%}.viseur .collimateurs i:nth-child(4){right:28%;bottom:34%}
.viseur.net .collimateurs i{border-color:#7CFFB2;box-shadow:0 0 10px rgba(124,255,178,.7)}
.viseur .expo{position:absolute;left:50%;bottom:12px;translate:-50% 0;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.08em;font-variant-numeric:tabular-nums;padding:4px 10px;border-radius:99px;background:rgba(20,8,16,.62)}
.viseur .statut{position:absolute;left:14px;top:12px;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;padding:4px 10px 4px 8px;border-radius:99px;background:rgba(20,8,16,.62)}
.viseur .statut i{width:8px;height:8px;border-radius:50%;background:#FF4D4D;box-shadow:0 0 8px #FF4D4D;animation:clignote .6s steps(2) infinite}
.viseur.net .statut i{background:#7CFFB2;box-shadow:0 0 8px #7CFFB2;animation:none}
.viseur .chiffre{position:absolute;left:50%;top:50%;width:112px;height:112px;margin:-56px 0 0 -56px;display:grid;place-items:center}
.viseur .chiffre svg{position:absolute;inset:0;transform:rotate(-90deg)}
.viseur .chiffre circle{fill:rgba(20,8,16,.35);stroke:var(--laiton-clair);stroke-width:4;stroke-dasharray:276.5;stroke-linecap:round}
.viseur .chiffre b{font-family:var(--titre);font-size:54px;font-weight:700;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.viseur .chiffre b.tic{animation:tic .8s ease-out}
@keyframes tic{from{transform:scale(1.6);opacity:0}30%{opacity:1}to{transform:scale(1)}}

/* ----- Étapes de création : les trois bacs du laboratoire ----- */
#etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:min(640px,100%);min-width:0;padding:0;margin:0;list-style:none;background:none;box-shadow:none}
#etapes li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:0;padding:0;background:none;
  color:rgba(238,235,239,.42);font-size:12.5px;line-height:1.35;transition:color .5s}
#etapes li::before,#etapes li.active::before,#etapes li.faite::before,#etapes li.active::after{content:none}
#etapes .cuve{position:relative;display:block;width:100%;height:50px;margin-bottom:7px;border-radius:7px;overflow:hidden;
  background:linear-gradient(#2B1D23,#160F13);box-shadow:inset 0 0 0 2px #3C2A33,inset 0 7px 10px rgba(0,0,0,.65),0 12px 18px -10px rgba(0,0,0,.85);transition:box-shadow .6s}
#etapes .liquide{position:absolute;inset:6px 6px 6px;border-radius:3px;overflow:hidden;--bain:rgba(255,90,70,.2);--fond:rgba(110,10,20,.42)}
/* le bain : sa surface reste horizontale quand on penche le téléphone, donc elle bascule dans le bac */
#etapes .liquide::after{content:"";position:absolute;left:-60%;right:-60%;top:34%;height:260%;transform-origin:50% 0;
  rotate:calc(var(--bascule,0) * -10deg);translate:0 calc(var(--houle,0) * 5px);will-change:rotate,translate;
  border-top:1.5px solid rgba(255,175,155,.55);box-shadow:0 -3px 9px -2px rgba(255,80,60,.35);
  background:repeating-radial-gradient(ellipse at 50% 12%,rgba(255,170,150,.13) 0 3px,transparent 3px 12px),linear-gradient(var(--bain),var(--fond) 40%);
  background-size:130px 60px,100% 100%;animation:ondes 5s linear infinite}
@keyframes ondes{to{background-position:130px 0,0 0}}
#etapes .papier{position:absolute;left:32%;right:32%;top:13px;bottom:11px;border-radius:1px;background:#F2E6E0;opacity:0;transform:translateY(-14px) rotate(-6deg);transition:opacity .5s,transform .7s cubic-bezier(.3,1.4,.5,1)}
#etapes li.active{color:rgba(238,235,239,.92)}
#etapes li.active .cuve{box-shadow:inset 0 0 0 2px #7C2B2B,inset 0 7px 10px rgba(0,0,0,.6),0 0 26px -2px rgba(255,45,30,.5)}
#etapes li.active .liquide{--bain:rgba(255,100,80,.45);--fond:rgba(160,15,25,.66)}
#etapes .papier{translate:calc(var(--bascule,0) * 9px) 0}
#etapes li.active .papier{opacity:.9;transform:none;animation:flotte 2.3s ease-in-out infinite}
@keyframes flotte{50%{translate:3px 1px;rotate:2.5deg}}
#etapes li.faite{color:rgba(238,235,239,.72)}
#etapes li b{font-family:var(--titre);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:rgba(235,210,156,.45)}
#etapes li.active b{color:#FF8E7E}
#etapes li.faite b{color:rgba(235,210,156,.85)}
#etapes li.faite b::before{content:"✓ ";color:#7CFFB2}

/* ----- Boutons laiton : reflet au survol, déclencheur à l'appui ----- */
.btn.laiton{position:relative;overflow:hidden}
.btn.laiton::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);transition:left .7s ease}
.btn.laiton:hover::after{left:135%}
.btn.declenche{animation:declenche .45s ease-out}
@keyframes declenche{30%{transform:scale(.965);box-shadow:inset 0 -1px 0 var(--laiton-fonce),0 0 0 8px rgba(212,175,106,.35)}}

/* ----- Envol vers « Mes cadres » ----- */
.envol{position:fixed;z-index:96;pointer-events:none;transform-origin:center;border:5px solid #fff;box-shadow:0 20px 40px rgba(0,0,0,.45)}

/* ----- Mes cadres : les tirages se balancent en arrivant sur le fil ----- */
dialog.galerie[open] .photo-fil{animation:balance 1.3s cubic-bezier(.3,1.7,.5,1) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes balance{from{rotate:-16deg;translate:0 -40px;opacity:0}35%{opacity:1}to{rotate:0deg;translate:0 0}}

/* ----- Accueil : la borne crépite quand un tirage sort ----- */
.eclat{position:absolute;left:50%;top:58px;width:340px;height:120px;margin-left:-170px;pointer-events:none;z-index:4;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,236,190,.5) 45%,transparent);mix-blend-mode:screen}
.eclat.on{animation:eclat .9s ease-out}
@keyframes eclat{0%{opacity:0;transform:scale(.4)}8%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
.chapiteau.crepite .ampoules i{animation:crepite .7s steps(2) 1}
@keyframes crepite{0%,100%{box-shadow:0 0 18px 4px #FFE08A;background:#FFF6D6}}
.heros > :not(.ambiance){position:relative;z-index:1}

/* Accueil : chaque case de la bande photomaton est « prise » au flash */
.bande .case{position:relative;overflow:hidden}
.bande .case::after{content:"";position:absolute;inset:0;background:#FFF8EA;opacity:0;pointer-events:none}
.bande .case.prise::after{animation:prise .9s ease-out}
.bande .case.prise{animation:revele 1.6s ease-out}
@keyframes prise{0%{opacity:0}8%{opacity:.95}100%{opacity:0}}
@keyframes revele{from{filter:grayscale(1) contrast(.8) brightness(1.15)}to{filter:none}}

@media (prefers-reduced-motion:reduce){
  #flash.on,.remanence,.faisceau,.fuite,.chambre-noire .inactinique,.tirage.mise-au-point canvas,.tirage.reflet::after,.tirage.agite canvas,
  .cachet.frais,.viseur,.viseur .chiffre b.tic,.btn.declenche,dialog.galerie[open] .photo-fil,.eclat.on,.scene.chambre-noire::after,
  .chambre-noire .lampe,.chambre-noire .lampe .ampoule,.chambre-noire .lampe .flaque,#etapes .liquide::after,#etapes li.active .papier,
  .chapiteau.crepite .ampoules i,.bande .case.prise,.bande .case.prise::after{animation:none!important}
  .btn.laiton::after{display:none}
  .tirage canvas,.tirage .brillance{transform:none;transition:none}
  .tirage.developpe canvas{filter:grayscale(1)}
}
@media (max-width:880px){#etapes{gap:8px}#etapes li{font-size:11.5px}}
/* projecteur : calque lumière adouci par le navigateur, net sur écrans haute densité */
.ambiance canvas.lumiere{filter:blur(14px);mix-blend-mode:screen;transform:translateZ(0)}
.ambiance.leger canvas.lumiere{filter:blur(9px)}
/* bain simulé par la carte graphique : il remplace l'aperçu pendant le développement */
.tirage canvas.eau{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;touch-action:pan-y;animation:apparait 1.2s ease-out}
.tirage.developpe.gl canvas:not(.eau){filter:none;opacity:0;transition:none}
.tirage.developpe.gl::after{display:none}
.tirage.developpe.gl canvas.eau{filter:none}
.tirage.developpe.gl{background:#8E2F28}

/* ===== Chambre noire en plein écran : pendant la création, le laboratoire occupe toute la fenêtre ===== */
html.labo-ouvert{overflow:hidden}
.labo{display:none}
.scene.plein-ecran{--phosphore:#CFFFA6;position:fixed;inset:0;z-index:60;height:100vh;height:100dvh;overflow:hidden auto;padding:0;gap:0;
  display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"tete tete" "infos bac";align-items:center;
  background:radial-gradient(80% 70% at 82% -12%,rgba(196,26,22,.36),transparent 60%),radial-gradient(70% 60% at 12% 112%,rgba(120,10,20,.3),transparent 70%),#080204;
  animation:labo-entre .9s ease-out}
@keyframes labo-entre{from{filter:brightness(0)}}
.scene.plein-ecran .labo{display:contents}
.scene.plein-ecran > #etapes,.scene.plein-ecran > #message,.scene.plein-ecran > #laboAgrandir,.scene.plein-ecran > .pupitre,.scene.plein-ecran > .variantes,.scene.plein-ecran > .vues,.scene.plein-ecran .fente,.scene.plein-ecran .cachet{display:none!important}
.scene.plein-ecran .lampe{right:17%;top:-52px}
.scene.plein-ecran .faisceau{display:none}

/* en-tête discret : où l'on est, et comment en sortir */
.labo-tete{grid-area:tete;position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 28px 0}
.labo-nom{font-family:var(--titre);font-size:13px;font-weight:500;letter-spacing:.01em;color:rgba(255,214,204,.62)}
.labo-reduire{font:inherit;font-size:13.5px;font-weight:600;color:rgba(255,224,216,.82);background:rgba(255,120,100,.08);border:1px solid rgba(255,150,130,.22);border-radius:10px;padding:8px 14px;cursor:pointer;transition:background .2s,color .2s}
.labo-reduire:hover{background:rgba(255,120,100,.16);color:#fff}
.lien.clair{color:rgba(238,235,239,.72);font-size:13px}

/* le bac : le papier baigne dans le révélateur */
.scene.plein-ecran .imprimante{grid-area:bac;width:auto;justify-self:center;padding:10px 44px 44px}
.scene.plein-ecran .sortie{position:relative;overflow:visible;clip-path:none;width:auto;margin:0;padding:clamp(18px,3.4vmin,40px);border-radius:24px;
  background:linear-gradient(#24131A,#0F070A);
  box-shadow:inset 0 0 0 2px #45232C,inset 0 2px 0 3px rgba(255,150,130,.07),0 50px 70px -34px #000,0 0 120px -30px rgba(255,40,24,.42)}
.scene.plein-ecran .sortie::before{content:"";position:absolute;inset:9px;border-radius:16px;box-shadow:inset 0 14px 26px rgba(0,0,0,.72),inset 0 -2px 0 rgba(255,150,130,.1);
  background:repeating-radial-gradient(ellipse at 28% 18%,rgba(255,160,140,.085) 0 2px,transparent 2px 30px),radial-gradient(130% 100% at 78% -6%,rgba(255,84,60,.62),rgba(138,14,22,.8) 55%,rgba(52,4,10,.94));
  background-size:260px 150px,100% 100%;animation:ondes-bac 11s linear infinite}
@keyframes ondes-bac{to{background-position:260px 0,0 0}}
.scene.plein-ecran .tirage{width:min(calc(100vw - 560px),calc((100vh - 260px) * var(--ratio,.667)),880px)!important;
  box-shadow:0 14px 22px -8px rgba(30,0,4,.75),0 0 0 1px rgba(255,90,70,.3);animation:derive 9s ease-in-out infinite}
@supports (height:100dvh){.scene.plein-ecran .tirage{width:min(calc(100vw - 560px),calc((100dvh - 260px) * var(--ratio,.667)),880px)!important}}
@keyframes derive{0%,100%{rotate:-.7deg;translate:0 0}50%{rotate:.6deg;translate:3px 2px}}
.scene.plein-ecran .tirage canvas,.scene.plein-ecran .tirage .brillance{transform:none}

/* la colonne du laborantin : minuterie, étape en cours, les trois bains */
.labo-infos{grid-area:infos;align-self:start;position:relative;z-index:2;display:grid;gap:26px;padding:max(28px,calc(50vh - 330px)) 0 60px 64px;color:rgba(255,224,216,.86)}
.labo-horloge{display:flex;align-items:center;gap:18px}
.minuterie{width:132px;height:132px;flex:0 0 auto;filter:drop-shadow(0 16px 22px rgba(0,0,0,.7))}
.minuterie .boitier{fill:#12070A;stroke:#3F1F27;stroke-width:3}
.minuterie .cadran{fill:#0A0406;stroke:rgba(255,120,100,.14);stroke-width:1}
.minuterie .graduations line{stroke:rgba(207,255,166,.34);stroke-width:1.4;stroke-linecap:round}
.minuterie .graduations line.forte{stroke:var(--phosphore);stroke-width:2.6}
.minuterie text{font-family:var(--titre);font-size:15px;font-weight:500;fill:var(--phosphore);text-anchor:middle;dominant-baseline:central}
.minuterie .phosphore{filter:drop-shadow(0 0 3px rgba(170,255,120,.75))}
.minuterie .aiguille{transform-origin:100px 100px;animation:tour 60s linear infinite}
.minuterie .aiguille line{stroke:var(--phosphore);stroke-width:3.4;stroke-linecap:round}
.minuterie .axe{fill:#1B0C10;stroke:var(--phosphore);stroke-width:2.4}
@keyframes tour{to{transform:rotate(360deg)}}
.labo-temps{font-family:var(--titre);font-size:30px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--phosphore);text-shadow:0 0 14px rgba(170,255,120,.45)}
.labo-etape{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(40px,4.6vw,64px);line-height:1.02;letter-spacing:-.01em;color:#FFE3DB;text-shadow:0 0 34px rgba(255,70,50,.5)}
.labo-detail{margin-top:10px;font-size:15.5px;line-height:1.5;max-width:30ch;color:rgba(255,220,212,.74)}
.labo-bacs{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:330px;padding:0;margin:0}
.labo-bacs li{display:grid;gap:8px;font-size:11.5px;font-weight:600;line-height:1.25;color:rgba(255,214,204,.36);transition:color .5s}
.labo-bacs .cuve{position:relative;display:block;height:36px;border-radius:7px;overflow:hidden;background:linear-gradient(#22131A,#0D0609);
  box-shadow:inset 0 0 0 1.5px #3A1E26,inset 0 6px 9px rgba(0,0,0,.7);transition:box-shadow .6s}
.labo-bacs .cuve::after{content:"";position:absolute;left:-60%;right:-60%;top:38%;height:260%;transform-origin:50% 0;rotate:calc(var(--bascule,0) * -10deg);translate:0 calc(var(--houle,0) * 4px);
  border-top:1.5px solid rgba(255,170,150,.38);background:linear-gradient(rgba(255,84,64,.16),rgba(96,8,16,.4) 40%);transition:background .6s,border-color .6s}
.labo-bacs .cuve i{position:absolute;left:30%;right:30%;top:10px;bottom:8px;border-radius:1px;background:#F2DDD6;opacity:0;transform:translateY(-10px) rotate(-6deg);transition:opacity .5s,transform .7s cubic-bezier(.3,1.4,.5,1);z-index:1}
.labo-bacs li.active{color:#FFD9CF}
.labo-bacs li.active .cuve{box-shadow:inset 0 0 0 1.5px #8A2C2C,inset 0 6px 9px rgba(0,0,0,.6),0 0 22px -2px rgba(255,45,30,.6)}
.labo-bacs li.active .cuve::after{border-top-color:rgba(255,190,170,.75);background:linear-gradient(rgba(255,104,84,.5),rgba(170,16,26,.7) 40%)}
.labo-bacs li.active .cuve i{opacity:.92;transform:none;animation:flotte 2.3s ease-in-out infinite}
.labo-bacs li.faite{color:rgba(207,255,166,.72)}
.labo-bacs li.faite .cuve{box-shadow:inset 0 0 0 1.5px rgba(207,255,166,.3),inset 0 6px 9px rgba(0,0,0,.7)}
.labo-note{font-size:13px;line-height:1.5;max-width:34ch;color:rgba(255,214,204,.5)}
.labo-note:empty{display:none}

/* écrans étroits : le bac d'abord, les repères dessous */
@media (max-width:940px){
  .scene.plein-ecran{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"tete" "bac" "infos";align-content:start;align-items:start}
  .labo-tete{padding:14px 16px 0}
  .scene.plein-ecran .imprimante{padding:14px 16px 18px}
  .scene.plein-ecran .sortie{padding:16px;border-radius:18px}.scene.plein-ecran .sortie::before{inset:7px;border-radius:12px}
  .scene.plein-ecran .tirage{width:min(calc(100vw - 72px),calc((100vh - 368px) * var(--ratio,.667)),720px)!important}
  @supports (height:100dvh){.scene.plein-ecran .tirage{width:min(calc(100vw - 72px),calc((100dvh - 368px) * var(--ratio,.667)),720px)!important}}
  .labo-infos{grid-template-columns:auto minmax(0,1fr);gap:14px 16px;align-items:center;padding:4px 20px 28px;align-self:auto}
  .labo-horloge{flex-direction:column;gap:6px}.minuterie{width:84px;height:84px}.labo-temps{font-size:17px}
  .labo-etape{font-size:36px}.labo-detail{margin-top:4px;font-size:14px;max-width:none}
  .labo-bacs,.labo-note{grid-column:1 / -1;max-width:none}
  .scene.plein-ecran .lampe{right:32%;top:-64px}
}
@media (prefers-reduced-motion:reduce){
  .scene.plein-ecran,.scene.plein-ecran .tirage,.scene.plein-ecran .sortie::before,.minuterie .aiguille,.labo-bacs li.active .cuve i{animation:none!important}
}