/* Scène Zaiko : l'identité du film (fond #0B0F14, vert #3FAE6B, danger #E1584B, Sora), un entrepôt de nuit. */
@font-face{font-family:"Sora";src:url("../assets/fonts/Sora600.woff2") format("woff2");font-weight:600;font-display:swap}
.zk{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:#0B0F14;color:#E7EBF0;font-family:"Public Sans",Arial,sans-serif;--u:1px;--vert:#3FAE6B;--rouge:#E1584B;--gris:#8B94A3;--surface:#12171D;--ligne:#232A33}
.zk p{margin:0}
.zk img{user-select:none;-webkit-user-drag:none;pointer-events:none}
.zk-monde{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform,opacity;z-index:1;font-size:94px}
.zk-p{position:absolute;display:block;max-width:none}
.zk-baie,.zk-rouge,.zk-ombre,.zk-vertes,.zk-nuit{will-change:opacity}
.zk-ombre{transform-origin:50% 50%;will-change:transform,opacity}
.zk-nuit{filter:brightness(.16)}
.zk-charge{position:absolute;left:0;top:0;width:0;height:0;will-change:transform,opacity}
.zk-chariot{will-change:transform}
.zk-cable{position:absolute;display:block;width:.022em;height:1em;margin-left:-.011em;background:#9aa4ae;transform-origin:50% 0;will-change:transform}
.zk-zone{position:absolute;overflow:visible;pointer-events:none;opacity:0;--f:0}
.zk-zone polygon{fill:rgba(63,174,107,calc(var(--f)*.55));stroke:#3FAE6B;stroke-width:.03;stroke-dasharray:.16 .11;stroke-linejoin:round}
.zk-balai{position:absolute;left:-1.1em;top:-9em;width:2.2em;height:18em;background:linear-gradient(90deg,#bfe8d000,#bfe8d040 50%,#bfe8d000);transform-origin:50% 50%;rotate:34.5deg;opacity:0;will-change:transform,opacity;pointer-events:none}
.zk-halo{position:absolute;display:block;width:1.6em;height:1.6em;margin:-.8em 0 0 -.8em;border-radius:50%;background:radial-gradient(circle,#ff8a78c8 0,#e1584b55 28%,#e1584b00 68%);opacity:0;will-change:opacity;pointer-events:none}
.zk-noir{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 62% 66% at 50% 52%,#0B0F1400 34%,#0B0F14e0 76%,#0B0F14 100%);opacity:0}

.zk-tete{position:absolute;left:clamp(12px,calc(var(--u)*44),44px);right:clamp(12px,calc(var(--u)*48),48px);top:clamp(8px,calc(var(--u)*30),30px);display:flex;justify-content:space-between;align-items:flex-start;z-index:12;pointer-events:none;opacity:0}
.zk-logo{display:flex;align-items:center;gap:calc(var(--u)*12);font:800 clamp(19px,calc(var(--u)*32),32px)/1 Sora,sans-serif}
.zk-logo u,.zk-couv u,.zk-fin u{display:grid;place-items:center;background:var(--vert);color:#0B0F14;text-decoration:none;font-family:Sora,sans-serif;font-weight:800}
.zk-logo u{width:clamp(30px,calc(var(--u)*48),48px);height:clamp(30px,calc(var(--u)*48),48px);border-radius:calc(var(--u)*12);font-size:clamp(17px,calc(var(--u)*27),27px)}
.zk-droite{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.zk-etapes{position:relative;display:block;width:220px;height:13px}
.zk-etape{position:absolute;right:0;top:0;font:600 13px/1 Sora,sans-serif;letter-spacing:.14em;white-space:pre;opacity:0;color:var(--vert)}
.zk-pied{font:500 clamp(9px,calc(var(--u)*13),13px)/1 "Public Sans",sans-serif;letter-spacing:.15em;color:var(--gris)}

.zk-etiqs{position:absolute;inset:0;z-index:5;pointer-events:none}
.zk-e{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;padding:clamp(6px,calc(var(--u)*9),9px) clamp(10px,calc(var(--u)*15),15px);background:#12171Df2;border:1px solid var(--ligne);border-radius:clamp(7px,calc(var(--u)*10),10px);font:500 clamp(11.5px,calc(var(--u)*15),15px)/1.32 "Public Sans",sans-serif;color:var(--gris);white-space:nowrap;opacity:0;will-change:transform,opacity;transition:border-color .3s,color .3s}
.zk-e b{font:600 clamp(13px,calc(var(--u)*18),18px)/1.25 Sora,sans-serif;color:#E7EBF0}
.zk-e__a{font-style:normal;color:#F08A7F}
.zk-e.est-livre .zk-e__a{color:#62CF8E}
.zk-e.est-eteint{border-color:#1f262f;color:#8B94A3}
.zk-e.est-eteint b{color:#A5AEBB}
.zk-e:focus{outline:none}
.zk-e:focus-visible{outline:2px solid #E7EBF0;outline-offset:2px}
.zk-e.est-reponse{border-color:var(--vert);box-shadow:0 0 0 1px var(--vert),0 0 calc(var(--u)*26) #3fae6b55}

.zk-tag{position:absolute;left:0;top:0;z-index:6;padding:calc(var(--u)*6) calc(var(--u)*12);background:#12171Df2;border:1px solid var(--ligne);border-radius:calc(var(--u)*8);font:500 clamp(12px,calc(var(--u)*16),16px)/1.2 "Public Sans",sans-serif;color:#C8D0DA;white-space:nowrap;opacity:0;pointer-events:none;will-change:transform,opacity}
.zk-tag b{font:800 1.08em/1 Sora,sans-serif;color:#62CF8E}
.zk-deposer{-webkit-appearance:none;appearance:none;position:absolute;left:0;top:0;z-index:7;min-height:44px;padding:calc(var(--u)*11) calc(var(--u)*30);border:0;border-radius:calc(var(--u)*11);background:var(--vert);color:#07110B;font:600 clamp(15px,calc(var(--u)*21),21px)/1 Sora,sans-serif;cursor:pointer;opacity:0;box-shadow:0 calc(var(--u)*5) 0 #1d6b3f,0 calc(var(--u)*14) calc(var(--u)*28) #0008;transition:translate .12s,box-shadow .12s,background-color .15s;will-change:transform,opacity}
.zk-deposer:hover{background:#57C783}
.zk-deposer:active,.zk-deposer.est-presse{translate:0 calc(var(--u)*4);box-shadow:0 calc(var(--u)*1) 0 #1d6b3f,0 calc(var(--u)*6) calc(var(--u)*14) #0008}
.zk-deposer:focus-visible{outline:3px solid #E7EBF0;outline-offset:3px}
.zk-cible{-webkit-appearance:none;appearance:none;position:absolute;left:0;top:0;z-index:6;padding:0;border:0;background:none;cursor:pointer;pointer-events:none;will-change:transform}
.zk-plus{position:absolute;left:0;top:0;z-index:7;font:800 clamp(34px,calc(var(--u)*58),58px)/1 Sora,sans-serif;color:#62CF8E;text-shadow:0 0 calc(var(--u)*22) #3fae6b90,0 2px 6px #000a;opacity:0;pointer-events:none;will-change:transform,opacity}

.zk-bon{position:absolute;right:clamp(16px,calc(var(--u)*150),150px);bottom:clamp(76px,calc(var(--u)*205),205px);width:clamp(290px,calc(var(--u)*520),520px);z-index:6;opacity:0;pointer-events:none}
.zk-bon__clip{position:relative;overflow:hidden;padding:0 calc(var(--u)*14);margin-bottom:calc(var(--u)*-2)}
.zk-bon__papier{position:relative;background:#E7EBF0;color:#12171D;border-radius:calc(var(--u)*4) calc(var(--u)*4) 0 0;padding:calc(var(--u)*18) calc(var(--u)*22) calc(var(--u)*14);box-shadow:0 0 calc(var(--u)*30) #0007;will-change:transform}
.zk-bon__papier header{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:calc(var(--u)*11);border-bottom:calc(var(--u)*2) solid #12171D;font:500 clamp(11px,calc(var(--u)*15),15px)/1.2 "Public Sans",sans-serif;color:#4b5563}
.zk-bon__papier header b{font:800 clamp(14px,calc(var(--u)*22),22px)/1.1 Sora,sans-serif;color:#12171D}
.zk-m{display:grid;grid-template-columns:calc(var(--u)*78) 1fr auto;align-items:center;gap:calc(var(--u)*12);padding:calc(var(--u)*13) 0;border-bottom:1px dashed #9aa4ae}
.zk-m:last-child{border-bottom:0}
.zk-m__q{font:800 clamp(19px,calc(var(--u)*31),31px)/1 Sora,sans-serif;color:#1d7a45}
.zk-m__moins{color:#B23A2E}
.zk-m p strong{display:block;font:600 clamp(12.5px,calc(var(--u)*18),18px)/1.25 Sora,sans-serif}
.zk-m p span{display:block;font:500 clamp(11.5px,calc(var(--u)*15.5),15.5px)/1.3 "Public Sans",sans-serif;color:#4b5563}
.zk-m small{font:400 clamp(10px,calc(var(--u)*13),13px)/1.35 "IBM Plex Mono",ui-monospace,monospace;color:#4b5563;text-align:right;white-space:nowrap}
.zk-bon__fente{position:absolute;left:0;right:0;bottom:calc(var(--u)*-16);height:calc(var(--u)*16);background:#1A2029;border:1px solid #2c3540;border-radius:calc(var(--u)*5);box-shadow:0 calc(var(--u)*12) calc(var(--u)*30) #000a;z-index:1}

.zk-q{position:absolute;left:50%;top:clamp(84px,calc(var(--u)*118),118px);width:min(calc(100% - 28px),calc(var(--u)*760));translate:-50% 0;padding:calc(var(--u)*17) calc(var(--u)*24) calc(var(--u)*18);background:#12171Df4;border:1px solid var(--ligne);border-radius:calc(var(--u)*14);z-index:7;opacity:0;pointer-events:none}
.zk-q small{display:block;font:600 clamp(11px,calc(var(--u)*14),14px)/1.2 Sora,sans-serif;letter-spacing:.06em;color:var(--vert);margin-bottom:calc(var(--u)*6)}
.zk-q__t{font:600 clamp(16px,calc(var(--u)*27),27px)/1.25 Sora,sans-serif;min-height:1.25em}
.zk-q__r{font:800 clamp(19px,calc(var(--u)*34),34px)/1.15 Sora,sans-serif;color:#62CF8E;margin-top:calc(var(--u)*9)!important;opacity:0}
.zk-q__n{font:500 clamp(12px,calc(var(--u)*16),16px)/1.3 "Public Sans",sans-serif;color:var(--gris);margin-top:calc(var(--u)*6)!important;opacity:0}

.zk-titre{position:absolute;left:clamp(14px,calc(var(--u)*48),48px);bottom:clamp(40px,calc(var(--u)*60),60px);width:calc(var(--u)*760);font:800 clamp(24px,calc(var(--u)*50),50px)/1.08 Sora,sans-serif;letter-spacing:-.02em;z-index:8;opacity:0;pointer-events:none;text-shadow:0 0 calc(var(--u)*18) #0B0F14,0 0 calc(var(--u)*6) #0B0F14}
.zk-titre small{display:block;font:500 clamp(13.5px,calc(var(--u)*22),22px)/1.3 "Public Sans",sans-serif;letter-spacing:0;color:#B4BCC8;margin-top:calc(var(--u)*11)}
.zk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.zk-sr:focus{outline:none}

.zk-couv,.zk-fin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 16px;background:#0B0F14;z-index:9;pointer-events:none}
.zk-couv u{width:calc(var(--u)*128);height:calc(var(--u)*128);min-width:76px;min-height:76px;border-radius:calc(var(--u)*30);font-size:clamp(46px,calc(var(--u)*78),78px)}
.zk-couv__m{font:800 clamp(60px,calc(var(--u)*128),128px)/1 Sora,sans-serif;letter-spacing:-.03em;margin-top:calc(var(--u)*18)!important}
.zk-couv__s{font:600 clamp(16px,calc(var(--u)*30),30px)/1.25 Sora,sans-serif;color:#B4BCC8;margin-top:calc(var(--u)*16)!important}
.zk-couv__h{font:500 clamp(12px,calc(var(--u)*18),18px)/1.2 "Public Sans",sans-serif;color:var(--gris);margin-top:calc(var(--u)*14)!important}
.zk-fin{z-index:13}
.zk-fin>*{opacity:0}
.zk-fin u{width:calc(var(--u)*88);height:calc(var(--u)*88);min-width:58px;min-height:58px;border-radius:calc(var(--u)*21);font-size:clamp(34px,calc(var(--u)*54),54px)}
.zk-fin__m{font:800 clamp(46px,calc(var(--u)*92),92px)/1 Sora,sans-serif;letter-spacing:-.03em;margin-top:calc(var(--u)*12)!important}
.zk-fin__d{font:600 clamp(16px,calc(var(--u)*30),30px)/1.25 Sora,sans-serif;margin-top:calc(var(--u)*10)!important}
.zk-fin__p{font:600 clamp(13.5px,calc(var(--u)*22),22px)/1.3 Sora,sans-serif;color:#62CF8E;margin-top:calc(var(--u)*24)!important}
.zk-fin__r{font:500 clamp(13.5px,calc(var(--u)*21),21px)/1.35 "Public Sans",sans-serif;color:#B4BCC8;margin-top:calc(var(--u)*7)!important}
.zk-fin__l{font:500 clamp(12px,calc(var(--u)*17),17px)/1.35 "Public Sans",sans-serif;color:var(--gris);max-width:calc(var(--u)*820);margin-top:calc(var(--u)*14)!important}
.zk-fin__a{pointer-events:auto;display:inline-flex;align-items:center;margin-top:calc(var(--u)*20);padding:calc(var(--u)*11) calc(var(--u)*24);min-height:44px;box-sizing:border-box;border:1px solid var(--vert);border-radius:calc(var(--u)*10);color:#E7EBF0;font:600 clamp(14px,calc(var(--u)*20),20px)/1.2 Sora,sans-serif;text-decoration:none;transition:background-color .15s,color .15s}
.zk-fin__a:hover{background:var(--vert);color:#07110B}
.zk-fin__a:focus-visible{outline:3px solid #E7EBF0;outline-offset:3px}

/* Téléphone debout : la caméra visite les magasins un par un. */
.zk.est-haut .zk-titre{width:calc(100% - 28px);top:54px;bottom:auto;font-size:25px}
.zk.est-haut .zk-titre small{font-size:14px;margin-top:6px}
.zk.est-haut .zk-etapes{width:150px}
.zk.est-haut .zk-etape{font-size:10.5px}
.zk.est-haut .zk-droite{gap:4px}
.zk.est-haut .zk-deposer{padding:0 26px;font-size:17px}
.zk.est-haut .zk-bon{left:50%;right:auto;width:min(calc(100% - 24px),400px);translate:-50% 0;bottom:64px}
.zk.est-haut .zk-q{top:auto;bottom:62px}
.zk.est-court .zk-titre small{display:none}
@media (max-height:520px){.zk-etape,.zk-pied{font-size:10px}.zk-etapes{height:10px}}
/* Fin commune (css/fin.css) aux couleurs de Zaiko */
.zk-fin.fc{padding:6vh 6vw 12vh;--fc-texte:#E7EBF0;--fc-texte-2:#B4BCC8;--fc-accent:#3FAE6B;--fc-sur-accent:#07110B;--fc-accent-texte:#62CF8E;--fc-trait:#232A33;--fc-corps:"Public Sans",Arial,sans-serif;--fc-titre:800 1em/1 Sora,sans-serif}
.zk-fin.fc .fc__logo u{width:clamp(56px,calc(var(--fe)*6.4),88px);height:clamp(56px,calc(var(--fe)*6.4),88px);border-radius:22%;font-size:clamp(30px,calc(var(--fe)*3.8),54px)}