/* Xiony — thème commun « Cinéma sombre » (kit de marque : Sora, corail #FF6B4A, violet #8C6CFF, fond #0E0D1A).
   Chargé APRÈS le style propre à chaque page : il remplace les couleurs et donne la même allure partout. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&display=swap');

:root{
  --bg:#0E0D1A; --panel:#1A1830; --panel2:#211F38; --deep:#12101F; --line:#2A2744;
  --text:#F5F3FF; --mute:#ADA8C8; --acc:#FF6B4A; --acc2:#FF8566; --vio:#8C6CFF; --vio-text:#A991FF;
  --on-acc:#0E0D1A; --ok:#5FBF8F; --bad:#E2685C; --warn:#E0A33E; --r:14px; --r-lg:22px;
}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{color:var(--text);font:15px/1.55 'Sora',system-ui,sans-serif}
a{color:var(--vio-text)}a:hover{color:var(--text)}
select,input,textarea,button{font-family:'Sora',system-ui,sans-serif}
select,input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{
  background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:12px!important;padding:10px 12px;color:var(--text)}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--vio)!important}
button{background:transparent;border:1px solid var(--line);border-radius:12px;padding:9px 16px;min-height:40px;color:var(--text);font-weight:600;cursor:pointer}
button:hover{border-color:var(--vio)}
button.main{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:700}
button.main:hover{background:var(--acc2);border-color:var(--acc2)}
button.vio{background:var(--vio);border-color:var(--vio);color:var(--on-acc);font-weight:700}
section{background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:var(--r-lg)!important}
h1,h2,h3{font-weight:700;letter-spacing:-.2px}
h2 b,.scene h3 b{color:var(--acc)}
.sub{color:var(--mute)}
.pill{background:var(--deep);border:1px solid var(--line);border-radius:999px}
dialog{background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:var(--r-lg)!important;color:var(--text)}
dialog::backdrop{background:rgba(5,4,12,.75)}
#job{background:var(--panel)!important;border:1px solid var(--line)!important}
#job i{background:var(--vio)!important}

/* En-tête commun */
header.xh{display:flex;align-items:center;gap:14px;padding:14px 32px;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;background:rgba(14,13,26,.94);backdrop-filter:blur(10px);flex-wrap:wrap}
.xh .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.xh .brand b{font-weight:800;font-size:21px;letter-spacing:-.5px}
.xh .crumb{color:var(--mute);font-size:14px;display:flex;align-items:center;gap:12px}
.xh .crumb::before{content:'/';color:var(--line)}
.xh .grow{flex:1}
.xh select{max-width:300px;min-height:40px}
#xionyMe{display:flex;align-items:center;gap:10px;font-size:14px;white-space:nowrap}
#xionyMe .credit{display:flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--line);border-radius:999px}
#xionyMe .credit span{color:var(--mute)}
#xionyMe .avatar{width:38px;height:38px;border-radius:999px;background:var(--vio);color:var(--on-acc);display:flex;align-items:center;justify-content:center;font-weight:700;border:0;padding:0;min-height:0}
#xionyMe .menu{position:absolute;right:24px;top:62px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px;display:none;flex-direction:column;min-width:200px;z-index:30}
#xionyMe .menu.open{display:flex}
#xionyMe .menu a,#xionyMe .menu button{display:block;text-align:left;border:0;border-radius:10px;padding:10px 12px;color:var(--text);text-decoration:none;background:transparent;font-weight:500;font-size:14px}
#xionyMe .menu a:hover,#xionyMe .menu button:hover{background:var(--panel2)}
.label{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--mute)}
@media(max-width:700px){header.xh{padding:12px 16px;gap:10px}.xh .crumb{display:none}#xionyMe .credit span{display:none}}