/* Structure générale : fond, en-tête, navigation, typo, boutons, fenêtres, notifications. */
/* ============ Fond ============ */
.bgdeco{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bgdeco::before{content:'';position:absolute;left:50%;top:-22%;width:min(980px,150vw);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(137,54,255,.15),rgba(137,54,255,.06) 38%,transparent 66%)}
.bgdeco::after{content:'';position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.05) .7px,transparent .8px) 0 0/24px 24px;
  -webkit-mask:linear-gradient(180deg,#000,transparent 55%);mask:linear-gradient(180deg,#000,transparent 55%)}

/* `display` posé sur une classe l'emporterait sur la règle du navigateur : on tranche. */
[hidden]{display:none!important}

/* ============ Tête ============ */
.top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(9px + env(safe-area-inset-top,0px)) 16px 10px;
  background:linear-gradient(180deg,rgba(12,9,16,.97),rgba(12,9,16,.74));border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
#brand{display:flex;align-items:center;user-select:none;cursor:pointer}
#brand img{display:block;height:clamp(34px,10vw,46px);width:auto;filter:drop-shadow(0 0 18px rgba(169,92,242,.4))}
.pill{position:relative;display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:6px 15px 6px 11px;font-family:var(--display);font-weight:900;font-size:14px}
.pill .pk{width:20px;height:auto;flex:0 0 auto;filter:drop-shadow(0 0 7px rgba(137,54,255,.5))}

main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:14px 16px 26px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
main>*{max-width:1180px;margin-inline:auto}

/* ============ Navigation ============ */
/* Tout est accroché à #nav, et non à l'élément <nav> : le panneau du tiroir en
   est un aussi, et héritait sinon de la mise en colonne de la barre du bas. */
#nav{position:relative;z-index:3;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
  padding:7px 10px calc(7px + env(safe-area-inset-bottom,0px));
  /* Un fond plus clair que la page : la réserve du bas se lit alors comme le bas
     de la barre, et non comme un trou. */
  background:linear-gradient(180deg,rgba(28,22,38,.97),rgba(20,15,27,.99));
  border-top:1px solid var(--line-2);backdrop-filter:blur(14px)}

/* Filet de sécurité : si le navigateur rend quand même la page plus courte que
   l'écran, cette bande peint le bas aux couleurs de la barre. */
body::after{content:'';position:fixed;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  height:env(safe-area-inset-bottom,0px);background:rgba(20,15,27,.99)}
#nav button{position:relative;background:none;border:0;padding:8px 0 7px;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:10px;font-weight:800;letter-spacing:.01em;color:var(--muted);border-radius:var(--radius-sm);white-space:nowrap;
  transition:color .16s,background .16s}
#nav button:hover{color:var(--subtle);background:rgba(255,255,255,.03)}
#nav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* L'étoile du logo est pleine : elle sert de marque, pas d'icône au trait. */
#nav svg.ico-star,.btn svg.ico-star{width:24px;height:17px;stroke:none;fill:currentColor}
#nav button.on svg.ico-star{fill:var(--accent-soft);filter:drop-shadow(0 0 9px rgba(137,54,255,.8))}
#nav button.on{color:var(--text);background:linear-gradient(180deg,rgba(137,54,255,.22),rgba(137,54,255,.06))}
#nav button.on svg{stroke:var(--accent-soft)}
#nav button.on::after{content:'';position:absolute;top:0;left:26%;right:26%;height:3px;border-radius:0 0 3px 3px;background:var(--accent-soft);
  box-shadow:0 0 12px var(--accent)}
body.intheater #nav,body.intheater .top,body.intheater main,body.intheater .bgdeco{visibility:hidden}

/* ============ Typo ============ */
h1{font-family:var(--display);font-stretch:112%;font-weight:900;font-style:italic;font-size:25px;margin:6px 0 4px;letter-spacing:-.025em;line-height:1.05}
h2{font-family:var(--display);font-stretch:106%;font-weight:800;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:24px 0 10px}
p{line-height:1.5;margin:6px 0}
.muted{color:var(--muted)}.small{font-size:13px}

/* ============ Boutons pressables ============ */
/* Un rebord plein sous le bouton : il s'enfonce au clic, comme dans les jeux de cartes mobiles. */
.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:0;border-radius:999px;
  padding:15px 24px;font-family:var(--display);font-weight:900;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,var(--accent-soft),var(--accent));
  box-shadow:0 5px 0 var(--accent-deep),0 12px 22px rgba(137,54,255,.26),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .09s ease-out,box-shadow .09s ease-out,filter .15s}
.btn:hover:not(:disabled){filter:brightness(1.07)}
.btn:active:not(:disabled){transform:translateY(5px);box-shadow:0 0 0 var(--accent-deep),0 4px 10px rgba(137,54,255,.2),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.ghost{background:linear-gradient(180deg,var(--surface-2),var(--surface));color:var(--text);
  box-shadow:0 4px 0 #100c15,0 8px 16px rgba(0,0,0,.4),inset 0 0 0 1px var(--line-2)}
.btn.ghost:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 #100c15,0 3px 8px rgba(0,0,0,.35),inset 0 0 0 1px var(--line-2)}
.btn.ghost.dark{background:rgba(255,255,255,.1);color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.16)}
.btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:0 4px 0 rgba(0,0,0,.4)}
.btn svg{width:19px;height:19px;flex:0 0 auto}
.linkbtn{background:none;border:0;color:var(--muted);font-weight:700;font-size:13px;padding:6px}
.linkbtn:hover{color:var(--text)}
.row{display:flex;gap:10px;align-items:center}.row>.btn{flex:1}

/* ============ Puces, panneaux ============ */
.chips{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto;border:0;background:linear-gradient(180deg,var(--surface-2),var(--surface));color:var(--subtle);
  padding:8px 16px;font-size:12.5px;font-weight:800;border-radius:999px;box-shadow:0 3px 0 #100c15,inset 0 0 0 1px var(--line);
  transition:color .14s,transform .09s,box-shadow .09s}
.chips button:hover{color:var(--text)}
.chips button:active{transform:translateY(3px);box-shadow:0 0 0 #100c15,inset 0 0 0 1px var(--line)}
.chips button.on{background:linear-gradient(180deg,var(--accent-soft),var(--accent));color:#fff;box-shadow:0 3px 0 var(--accent-deep),inset 0 1px 0 rgba(255,255,255,.3)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2px 16px 18px;margin-bottom:12px}
.panel h2{margin-top:16px}
.empty{text-align:center;padding:60px 10px;color:var(--muted)}

/* ============ Blocs dépliants, réglages ============ */
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin:10px 0}
summary{font-weight:700;cursor:pointer}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface-2);border-radius:var(--radius-sm);
  padding:12px 14px;margin-bottom:8px;font-weight:600}
.toggle input{width:20px;height:20px;accent-color:var(--accent)}

/* ============ Feuille, toast ============ */
.sheet-wrap{position:fixed;inset:0;background:rgba(6,4,8,.74);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.sheet-wrap[hidden]{display:none}
.sheet{position:relative;background:var(--surface);border:1px solid var(--line);border-bottom:0;width:100%;max-width:520px;
  padding:22px 18px calc(18px + env(safe-area-inset-bottom,0px));max-height:90%;overflow-y:auto;border-radius:var(--radius) var(--radius) 0 0;
  animation:up .26s cubic-bezier(.2,1.1,.4,1)}
@keyframes up{from{transform:translateY(60px);opacity:.3}}
.sheet h3{font-family:var(--display);font-stretch:108%;font-weight:900;font-style:italic;margin:2px 0 10px;font-size:20px}
.sheet .acts{display:flex;flex-direction:column;gap:10px;margin-top:18px}
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 82px);transform:translateX(-50%);background:var(--surface-2);
  border:1px solid var(--line-2);color:var(--text);padding:11px 18px;border-radius:999px;font-weight:600;font-size:13.5px;z-index:80;opacity:0;
  pointer-events:none;transition:opacity .2s;max-width:90%;text-align:center}
#toast.on{opacity:1}

/* Réduction des animations si demandé par le système */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}