/*! ino-kit 1.0 — styles communs de la charte i_No · © 2026 Arnaud AMAZIAS (i_No)
   Thème : surchargez les variables --ino-* dans chaque jeu (palette propre au jeu). */
:root{
  --ino-ink:#f4ecdc;            /* texte */
  --ino-dim:rgba(244,236,220,.66);
  --ino-glow:#E8A65A;           /* lueur d'accent (à adapter par jeu) */
  --ino-glow2:#8fb4ff;          /* lueur froide secondaire */
  --ino-glass:rgba(22,26,52,.38);
  --ino-glass-hi:rgba(255,255,255,.16);
  --ino-line:rgba(255,255,255,.16);
  --ino-serif:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --ino-sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ino-ease:cubic-bezier(.2,.75,.2,1);
}
/* ---------- Intro ---------- */
.ino-intro{position:fixed;inset:0;z-index:1000;overflow:hidden;color:var(--ino-ink);opacity:0;transition:opacity .45s linear;background:#000;contain:strict}
.ino-intro.on{opacity:1}
.ino-intro.ino-cine{background:transparent;pointer-events:none}
.ino-intro.ino-cine .ino-skip,.ino-intro.ino-cine .ino-credit{pointer-events:auto}
.ino-intro.ino-out{opacity:0;transition-duration:.6s}
.ino-intro.ino-rm.ino-out{transition-duration:.3s}
.ino-black{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.ino-layer{position:absolute;inset:0}
.ino-sig{position:absolute;inset:0;opacity:0;will-change:opacity}
.ino-sig-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.ino-sig-t{position:absolute;left:0;right:0;top:79%;margin:0;text-align:center;font:italic 400 clamp(1.25rem,3.4vw,2.1rem)/1.1 var(--ino-serif);letter-spacing:.14em;color:#f6ead2;text-shadow:0 0 18px rgba(246,232,200,.45),0 0 2px rgba(0,0,0,.6);opacity:0}
.ino-cap{position:absolute;left:0;right:0;top:16%;text-align:center;opacity:0;transform:translateY(8px);transition:opacity 1.1s ease,transform 1.4s var(--ino-ease);pointer-events:none;padding:0 1rem}
.ino-cap.on{opacity:1;transform:none}
.ino-cap strong{display:block;font:400 clamp(2rem,6.4vw,4.4rem)/1.02 var(--ino-serif);letter-spacing:.01em;text-shadow:0 2px 30px rgba(0,0,0,.65),0 0 40px rgba(232,166,90,.25)}
.ino-cap span{display:block;margin-top:.6rem;font:500 clamp(.72rem,1.6vw,.95rem)/1.3 var(--ino-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--ino-dim);text-shadow:0 1px 12px rgba(0,0,0,.8)}
.ino-rm .ino-cap{transition:opacity .3s linear;transform:none}
/* ligne de crédit : petite, centrée en bas, discrète */
.ino-credit{position:absolute;left:0;right:0;bottom:max(.9rem,env(safe-area-inset-bottom));margin:0;text-align:center;font:500 .7rem/1.3 var(--ino-sans);letter-spacing:.08em;color:rgba(244,236,220,.58);text-shadow:0 1px 6px rgba(0,0,0,.85);pointer-events:none;z-index:3;padding:0 4.5rem}
.ino-credit-t{font-family:var(--ino-serif);font-size:.84rem;font-style:italic;letter-spacing:.04em;color:rgba(244,236,220,.74)}
/* bouton Passer (visible à partir de 1 s) */
.ino-skip.ino-btn{position:absolute;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));min-width:0;padding:.5rem .9rem .5rem 1.05rem;font-size:.82rem;z-index:4;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .35s,transform .45s var(--ino-ease),visibility 0s .35s}
.ino-can-skip .ino-skip.ino-btn{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .45s var(--ino-ease),visibility 0s}
.ino-skip-i{font-size:1.15rem;line-height:.8;margin-left:.35rem}
/* ---------- Bouton verre dépoli lumineux ---------- */
.ino-btn{--mx:50%;--my:0%;position:relative;display:inline-flex;align-items:center;gap:.6rem;min-width:min(19rem,78vw);padding:.85rem 1.25rem;border-radius:16px;border:1px solid var(--ino-line);color:var(--ino-ink);font:600 .95rem/1.15 var(--ino-sans);letter-spacing:.02em;text-align:left;cursor:pointer;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.03) 46%,rgba(0,0,0,.08)),var(--ino-glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.35);backdrop-filter:blur(14px) saturate(1.35);
  box-shadow:inset 0 1px 0 var(--ino-glass-hi),inset 0 -1px 0 rgba(0,0,0,.25),0 10px 30px -12px rgba(0,0,0,.7),0 0 0 0 rgba(232,166,90,0);
  transform:translateZ(0);transition:transform .35s var(--ino-ease),box-shadow .35s,border-color .35s,background-color .35s}
.ino-btn-gl{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(120% 160% at var(--mx) var(--my),rgba(255,236,200,.28),rgba(255,236,200,0) 55%)}
.ino-btn:hover,.ino-btn:focus-visible{transform:translateY(-2px) scale(1.012);border-color:rgba(255,226,180,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.25),0 14px 36px -12px rgba(0,0,0,.75),0 0 26px -4px color-mix(in srgb,var(--ino-glow) 55%,transparent)}
.ino-btn:hover .ino-btn-gl,.ino-btn:focus-visible .ino-btn-gl{opacity:1}
.ino-btn:active{transform:translateY(0) scale(.985);transition-duration:.08s}
.ino-btn:focus-visible{outline:2px solid #f2e3c6;outline-offset:3px}
.ino-btn[disabled]{opacity:.42;cursor:default;transform:none;box-shadow:inset 0 1px 0 var(--ino-glass-hi)}
.ino-btn-tx{display:flex;flex-direction:column;gap:.18rem;min-width:0}
.ino-btn-s{font-weight:400;font-size:.74rem;color:var(--ino-dim);letter-spacing:.01em}
.ino-btn-i{font-size:1.1rem;width:1.4rem;text-align:center;flex:none}
.ino-primary{border-color:color-mix(in srgb,var(--ino-glow) 60%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--ino-glow) 38%,transparent),color-mix(in srgb,var(--ino-glow) 12%,transparent) 55%,rgba(0,0,0,.1)),var(--ino-glass);box-shadow:inset 0 1px 0 rgba(255,240,215,.35),0 10px 30px -12px rgba(0,0,0,.7),0 0 22px -6px color-mix(in srgb,var(--ino-glow) 70%,transparent)}
.ino-primary .ino-btn-l{font-size:1.06rem}
/* ---------- Menu ---------- */
.ino-menu{display:flex;flex-direction:column;align-items:center;gap:1.4rem;text-align:center}
.ino-menu-k{margin:0;font:600 .72rem/1 var(--ino-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--ino-glow)}
.ino-menu-t{margin:.35rem 0 0;font:400 clamp(2.2rem,6vw,4.2rem)/1 var(--ino-serif);color:var(--ino-ink);text-shadow:0 2px 30px rgba(0,0,0,.6),0 0 36px rgba(232,166,90,.2)}
.ino-menu-t em{color:var(--ino-glow);font-style:italic}
.ino-menu-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.62rem;perspective:900px}
.ino-menu-l li{opacity:0;transform:translate3d(0,14px,-40px) rotateX(10deg);animation:inoIn .8s var(--ino-ease) forwards;animation-delay:calc(.12s + var(--i,0)*.08s)}
@keyframes inoIn{to{opacity:1;transform:none}}
/* ---------- Panneaux ---------- */
.ino-panel-bg{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:1rem;background:rgba(4,6,16,.42);opacity:0;transition:opacity .25s}
.ino-panel-bg.on{opacity:1}
.ino-panel{position:relative;width:min(34rem,100%);max-height:min(82vh,46rem);overflow:auto;padding:1.4rem 1.4rem 1.2rem;border-radius:22px;border:1px solid var(--ino-line);color:var(--ino-ink);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 40%),rgba(16,19,40,.72);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 30px 80px -20px rgba(0,0,0,.85),0 0 40px -12px color-mix(in srgb,var(--ino-glow) 45%,transparent);transform:translateY(10px) scale(.98);transition:transform .35s var(--ino-ease)}
.ino-panel-bg.on .ino-panel{transform:none}
.ino-panel-t{margin:0 0 1rem;font:400 1.9rem/1.05 var(--ino-serif);outline:none}
.ino-panel-b{display:flex;flex-direction:column;gap:.6rem;font:400 .9rem/1.5 var(--ino-sans)}
.ino-panel-b p{margin:.15rem 0}
.ino-panel-b h3{margin:.8rem 0 .1rem;font:600 .72rem/1.2 var(--ino-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ino-glow)}
.ino-panel-x.ino-btn{margin-top:1.1rem;min-width:0;justify-content:center;width:100%}
/* interrupteur */
.ino-sw{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:.75rem .9rem;border-radius:14px;border:1px solid var(--ino-line);background:rgba(255,255,255,.05);color:var(--ino-ink);font:600 .92rem/1.2 var(--ino-sans);text-align:left;cursor:pointer;transition:background .25s,border-color .25s}
.ino-sw:hover{background:rgba(255,255,255,.09);border-color:rgba(255,226,180,.35)}
.ino-sw:focus-visible{outline:2px solid #f2e3c6;outline-offset:2px}
.ino-sw-tx{display:flex;flex-direction:column;gap:.15rem}
.ino-sw-h{font-weight:400;font-size:.74rem;color:var(--ino-dim)}
.ino-sw-k{flex:none;position:relative;width:44px;height:24px;border-radius:12px;background:rgba(255,255,255,.14);box-shadow:inset 0 1px 3px rgba(0,0,0,.4);transition:background .25s}
.ino-sw-k:after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#f4ecdc;box-shadow:0 1px 4px rgba(0,0,0,.5);transition:transform .25s var(--ino-ease)}
.ino-sw[aria-checked=true] .ino-sw-k{background:color-mix(in srgb,var(--ino-glow) 75%,#000)}
.ino-sw[aria-checked=true] .ino-sw-k:after{transform:translateX(20px)}
/* ---------- Léger / mouvement réduit ---------- */
.ino-lite .ino-btn,.ino-lite.ino-btn,html.ino-lite .ino-btn,html.ino-lite .ino-panel{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 var(--ino-glass-hi)}
html.ino-lite .ino-btn{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02)),rgba(22,26,52,.82)}
html.ino-lite .ino-primary{background:linear-gradient(180deg,color-mix(in srgb,var(--ino-glow) 40%,rgba(22,26,52,.9)),rgba(22,26,52,.9))}
html.ino-lite .ino-panel{background:rgba(16,19,40,.96)}
html.ino-lite .ino-menu-l li{animation-duration:.25s;transform:none}
@media (prefers-reduced-motion:reduce){
  .ino-menu-l li{animation:none;opacity:1;transform:none}
  .ino-btn,.ino-btn:hover,.ino-btn:focus-visible{transform:none;transition:none}
  .ino-cap,.ino-panel{transition:none;transform:none}
}
html.ino-rm .ino-menu-l li{animation:none;opacity:1;transform:none}
html.ino-rm .ino-btn,html.ino-rm .ino-btn:hover{transform:none}