/* =====================================================================
   VISIORA — Kit commun des démos : bandeau « site fictif », apparitions,
   message, visionneuse d'images. Chaque démo garde SON identité dans
   /demos/<slug>/style.css (variables --dk-* pour accorder le kit).
   ===================================================================== */
:root{--dk-flag-bg:#0d0a08;--dk-flag-fg:#f4e6d6;--dk-accent:#ff9a3d;--dk-ease:cubic-bezier(.16,1,.3,1)}
.dk-flag{position:relative;z-index:200;background:var(--dk-flag-bg);color:var(--dk-flag-fg);font:500 12.5px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;text-align:center;padding:7px 14px;letter-spacing:.01em}
.dk-flag b{font-weight:700}.dk-flag a{color:var(--dk-accent);text-underline-offset:2px}
/* Apparitions */
.dk-js:not(.dk-reduced) [data-reveal]{transition:opacity .9s var(--dk-ease),transform 1.1s var(--dk-ease),clip-path 1.2s var(--dk-ease);will-change:transform,opacity}
.dk-js:not(.dk-reduced) [data-reveal]:not(.is-in){opacity:0;transform:translate3d(0,40px,0)}
.dk-js:not(.dk-reduced) [data-reveal=fade]:not(.is-in){transform:none}
.dk-js:not(.dk-reduced) [data-reveal=left]:not(.is-in){transform:translate3d(-48px,0,0)}
.dk-js:not(.dk-reduced) [data-reveal=right]:not(.is-in){transform:translate3d(48px,0,0)}
.dk-js:not(.dk-reduced) [data-reveal=scale]:not(.is-in){transform:scale(.94)}
.dk-js:not(.dk-reduced) [data-reveal=clip]:not(.is-in){opacity:1;transform:none;clip-path:inset(12% 12% 12% 12% round 24px)}
.dk-js:not(.dk-reduced) [data-reveal=clip]{clip-path:inset(0 0 0 0 round 0)}
.dk-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.dk-w>span{display:inline-block}
.dk-js:not(.dk-reduced) [data-split] .dk-w>span{transition:transform 1s var(--dk-ease),opacity .8s var(--dk-ease)}
.dk-js:not(.dk-reduced) [data-split]:not(.is-in) .dk-w>span{transform:translate3d(0,105%,0);opacity:0}
.dk-menu-open,.dk-menu-open body{overflow:hidden}
/* Formulaires */
form[data-demo-form] [aria-invalid=true]{outline:2px solid #d93b30;outline-offset:1px}
form[data-demo-form] [data-success][hidden]{display:none}
form[data-demo-form].is-sent>*:not([data-success]){display:none}
[type=submit].is-loading{opacity:.7;cursor:progress}
/* Message */
.dk-toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:400;max-width:min(92vw,440px);transform:translate(-50%,24px);opacity:0;pointer-events:none;background:#14100d;color:#fbf4ec;border-radius:14px;padding:12px 18px;font:500 14px/1.4 system-ui,-apple-system,sans-serif;box-shadow:0 18px 40px -12px rgba(0,0,0,.5);transition:opacity .35s,transform .5s var(--dk-ease)}
.dk-toast.on{opacity:1;transform:translate(-50%,0)}
/* Visionneuse d'images */
.dk-lb{position:fixed;inset:0;z-index:500;background:rgba(10,8,6,.92);display:grid;grid-template-columns:56px 1fr 56px;align-items:center;padding:16px}
.dk-lb[hidden]{display:none}
.dk-lb figure{margin:0;display:grid;justify-items:center;gap:12px;min-width:0}
.dk-lb img{max-width:100%;max-height:80vh;max-height:80dvh;border-radius:6px;object-fit:contain}
.dk-lb figcaption{color:#f2e9df;font:500 14px/1.4 system-ui,sans-serif;text-align:center}
.dk-lb button{background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:50%;width:48px;height:48px;font-size:28px;line-height:1;cursor:pointer}
.dk-lb button:hover{background:rgba(255,255,255,.22)}
.dk-lb .dk-lb-x{position:absolute;top:14px;right:14px}
@media (max-width:600px){.dk-lb{grid-template-columns:1fr;padding:60px 10px}.dk-lb .dk-lb-p,.dk-lb .dk-lb-n{position:absolute;bottom:18px}.dk-lb .dk-lb-p{left:calc(50% - 60px)}.dk-lb .dk-lb-n{right:calc(50% - 60px)}}
.dk-skip{position:absolute;left:12px;top:-60px;z-index:600;background:#000;color:#fff;padding:10px 16px;border-radius:8px}
.dk-skip:focus{top:12px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}