:root{
    --primary: #0f1724;
    --accent: #d4af37;
    --bg1: linear-gradient(135deg,#e9f0fb,#e6eef8);
    --glass: rgba(255,255,255,0.75);
    --muted: #6b7280;
    --success: #16a34a;
    --danger: #ef4444;
    --card-w: 360px;
    --card-h: 520px;
    --radius: 18px;
    --transition: 300ms cubic-bezier(.2,.9,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
    font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: var(--bg1);
    color: var(--primary);
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:100vh;
    gap:1rem;
    padding:1rem;
}

button, select, option {font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
button, select {
    font-family: inherit;
    font-size: 1rem;
}
#titre-section-persona {margin-top: 3rem;font-size:1.3rem;color:var(--muted)}
.graphique {width:100%;height:auto;margin-top:0.5rem;margin-bottom:0.5rem;}
.visually-hidden{
    position:absolute!important;
    height:1px;width:1px;
    overflow:hidden;clip:rect(1px,1px,1px,1px);
    white-space:nowrap;border:0;padding:0;margin:-1px;
}

/*HEADER*/
header{
    text-align:center;padding:1rem 0;
}
h1{font-weight:700;letter-spacing:2px}
.subtitle{color:var(--muted);font-size:0.95rem}
.hint{display:block;color:var(--muted);font-size:0.85rem;margin-top:0.25rem}

/*SIDEBAR*/
#sidebar{
    position:fixed;left:12px;top:50%;transform:translateY(-50%);
    display:flex;flex-direction:column;gap:10px;z-index:60;
}
.side-btn{
    width:48px;height:48px;border-radius:10px;border:0;background:var(--glass);
    display:inline-grid;place-items:center;font-weight:800;color:var(--primary);
    box-shadow:0 6px 18px rgba(15,23,36,0.08);cursor:pointer;transition:transform var(--transition),box-shadow var(--transition);
    backdrop-filter: blur(6px);
    font-size: 1.3rem;
}
.side-btn:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(15,23,36,0.12)}
.side-btn[aria-pressed="true"]{background:var(--primary);color:white;box-shadow:0 8px 28px rgba(0,0,0,0.18)}

/*CONTOLS*/
#controls{margin-top:0.5rem;display:flex;gap:1rem;align-items:center}
#dept-selector{
    padding:10px 14px;border-radius:12px;border:1px solid rgba(0,0,0,0.06);
    background:var(--glass);backdrop-filter:blur(8px);font-size:1rem;cursor:pointer;
}

/*JEU CARTE*/
#deck-container{perspective:1200px;display:flex;align-items:center;justify-content:center;min-height:60vh;position:relative}
.card{width:var(--card-w);height:var(--card-h);cursor:pointer;position:relative;outline:none}
.card-inner{
    position:relative;width:100%;height:100%;text-align:center;transition:transform 0.8s cubic-bezier(.2,.9,.3,1);
    transform-style:preserve-3d;border-radius:var(--radius);box-shadow:0 18px 40px rgba(2,6,23,0.08);
}
.card.is-flipped .card-inner{transform:rotateY(180deg)}
.card-front,.card-back{
    position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:var(--radius);
    display:flex;flex-direction:column;justify-content:space-between;padding:1.6rem;background:linear-gradient(145deg,#ffffff,#f3f6fb);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
}
.card-back{background:linear-gradient(145deg,#0f1724,#0b1220);color:white;transform:rotateY(180deg)}

/*CONTENU CARTE*/
.card-header{display:flex;justify-content:flex-start}
.faxion-tag{background:var(--primary);color:white;padding:6px 12px;border-radius:999px;font-weight:600;font-size:0.85rem}
.card-body{display:flex;flex-direction:column;align-items:center;gap:0.5rem}
#card-title{font-size:1.6rem;text-transform:uppercase;letter-spacing:1px}
.symbol{font-size:4.5rem;filter:drop-shadow(0 8px 20px rgba(2,6,23,0.08))}

/*BOUTONS FOOTER*/
.card-footer{display:flex;gap:0.6rem;justify-content:center}
.small-btn{padding:8px 12px;border-radius:10px;border:0;background:rgba(0,0,0,0.06);cursor:pointer;transition:all var(--transition);font-weight:600}
.small-btn:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(2,6,23,0.06)}
.card-back .small-btn{background:rgba(255,255,255,0.08);color:white}

/*STATS*/
.stats-content{width:100%;margin-top:0.6rem;text-align:left}
.stat-row{margin:10px 0}
.stat-label{display:flex;justify-content:space-between;font-size:0.9rem;color:rgba(255,255,255,0.9)}
.stat-bar-container{background:rgba(255,255,255,0.08);height:12px;border-radius:8px;margin-top:6px;overflow:hidden}
.stat-bar-fill{height:100%;background:var(--accent);width:0%;transition:width 900ms cubic-bezier(.2,.9,.3,1)}

/*FALLBACK*/
.fallback{max-width:var(--card-w);padding:1rem;border-radius:12px;background:rgba(255,255,255,0.9);box-shadow:0 12px 30px rgba(2,6,23,0.06);text-align:center}
.hidden{display:none}

/*MODALES*/
.modal-overlay{position:fixed;inset:0;background:rgba(2,6,23,0.5);z-index:80}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(680px,92%);background:white;border-radius:12px;padding:1rem;z-index:90;box-shadow:0 30px 80px rgba(2,6,23,0.2)}
.modal header{display:flex;justify-content:space-between;align-items:center}
.modal h2{font-size:1.1rem}
.modal-body{margin-top:0.6rem;color:var(--muted);padding-bottom:1rem;}
.modal-body p{white-space:pre-line;}
.modal-close{background:transparent;border:0;font-size:1.5rem;cursor:pointer;margin-right:1rem;}

/*MESSAGE TOAST*/
.toast{position:fixed;right:18px;bottom:18px;background:var(--primary);color:white;padding:10px 14px;border-radius:10px;z-index:120;box-shadow:0 12px 30px rgba(2,6,23,0.12)}

/*MENTIONS FOOTER*/
#mentions{display:flex; gap:8rem;}
.mention{font-size:0.8rem;color:#b1b1b1;text-decoration:none;}

/*RESPONSIF*/
@media (max-width:900px){
    :root{--card-w:320px;--card-h:480px}
    #sidebar{left:8px}
}
@media (max-width:520px){
    header{padding:0.6rem}
    :root{--card-w:300px;--card-h:440px}
    #sidebar{left:6px}
    .side-btn{width:40px;height:40px}
    .symbol{font-size:3.6rem}
}