/* ============================================================================
   Medal — Recrutement · DA alignée sur medalcommunity.com
   Tokens extraits du CSS de la vitrine (fonds noirs teintés, violet #8b5cf6,
   League Spartan + Inter). Glow réservé à l'annuaire, zéro dans les zones
   fonctionnelles (formulaires, admin).
   ========================================================================== */
:root{
  --bg:#09090b;
  --bg-2:#0a0a14;
  --panel:#0e0e15;
  --panel-2:#0b0b11;
  --glass:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.18);
  --text:#f5f5f5;
  --soft:#9ca3af;
  --dim:#6b7280;
  --violet:#8b5cf6;
  --violet-2:#7c3aed;
  --fuchsia:#e879f9;
  --gold:#fbbf24;
  --amber:#f59e0b;
  --red:#ef4444;
  --green:#34d399;
  --blurple:#5865f2;
  --disp:'League Spartan', Inter, system-ui, sans-serif;
  --body:'Inter', system-ui, sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-card:16px;
  --r-ctl:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:15px; line-height:1.6;
}
a{color:var(--violet); text-decoration:none}
a:hover{color:var(--fuchsia)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--violet); outline-offset:2px; border-radius:4px;
}
img{max-width:100%}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }

/* ============================== Navigation =============================== */
.topnav{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 24px; border-bottom:1px solid var(--line);
  background:rgba(9,9,11,.82); backdrop-filter:blur(12px);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:12px; color:var(--text)}
.brand img{height:30px; width:auto; display:block}
.brand .sep{width:1px; height:20px; background:var(--line-2)}
.brand small{font-family:var(--disp); font-weight:600; font-size:11px; letter-spacing:.28em; color:var(--soft)}
.topnav nav{margin-left:auto; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.topnav nav > a{color:var(--soft); font-family:var(--disp); font-weight:600; font-size:13.5px; letter-spacing:.04em}
.topnav nav > a:hover{color:var(--text)}
.who{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--soft)}
.avatar{width:26px; height:26px; border-radius:50%; background:var(--blurple); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font:600 12px var(--body);
  object-fit:cover; overflow:hidden}
img.avatar{display:inline-block}

/* ============================== Conteneurs =============================== */
.wrap{max-width:1020px; margin:0 auto; padding:36px 20px 70px}
.wrap.narrow{max-width:780px}

/* ================================ Typo =================================== */
.eyebrow{font-family:var(--disp); font-weight:600; font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--soft)}
.eyebrow.violet{color:var(--violet)}
h1.hero{font-family:var(--disp); font-weight:800; font-size:clamp(30px,4.6vw,42px);
  line-height:1.08; margin:.35em 0 .3em; letter-spacing:.01em}
.lede{color:var(--soft); max-width:620px; margin:0}
.brandline{width:64px; height:3px; border-radius:2px; margin:18px 0 0;
  background:linear-gradient(90deg, var(--violet), var(--fuchsia))}
h2.sec{font-family:var(--disp); font-weight:700; font-size:21px; margin:0 0 4px; letter-spacing:.01em}
.mono{font-family:var(--mono); font-size:.86em; color:var(--soft)}
.muted{color:var(--soft)}
.hint{font-size:12.5px; color:var(--dim); margin-top:6px}

/* ====================== Annuaire : cartes serveurs ======================= */
.hero-zone{position:relative; padding:18px 0 8px}
.hero-zone .glow{position:absolute; top:-140px; left:-80px; width:420px; height:420px;
  background:radial-gradient(circle, rgba(139,92,246,.22), transparent 65%);
  filter:blur(80px); pointer-events:none}
.grid-servers{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px; margin-top:30px}
.scard{
  border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
  background:linear-gradient(165deg, #101019, #0b0b12 60%);
  display:flex; flex-direction:column; color:var(--text);
  transition:border-color .2s, transform .2s;
}
.scard:hover{border-color:rgba(139,92,246,.45); transform:translateY(-3px); color:var(--text)}
.scard .media{height:150px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 120%, rgba(139,92,246,.14), transparent 70%);
  border-bottom:1px solid var(--line); padding:18px}
.scard .media img{max-height:100%; width:auto; max-width:86%; object-fit:contain;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
.scard .media .noimg{font-family:var(--disp); font-weight:800; font-size:26px; color:var(--dim); letter-spacing:.06em}
.scard .body{padding:18px 18px 16px; display:flex; flex-direction:column; gap:8px; flex:1}
.scard h3{font-family:var(--disp); font-weight:700; font-size:19px; margin:0; letter-spacing:.01em}
.scard p{margin:0; font-size:13.5px; color:var(--soft); flex:1}
.scard .foot{display:flex; align-items:center; gap:10px; margin-top:6px}
.count{font-family:var(--mono); font-size:11.5px; color:var(--soft);
  border:1px solid var(--line); border-radius:999px; padding:3px 10px}
.count b{color:var(--text); font-weight:600}
.enter{margin-left:auto; font-family:var(--disp); font-weight:600; font-size:14px; color:var(--violet)}
.scard:hover .enter{color:var(--fuchsia)}
.scard.is-empty .enter{color:var(--dim)}
.scard.is-empty:hover{border-color:var(--line-2); transform:none}

.steps-home{counter-reset:s; margin:34px 0 0; padding:0; list-style:none; max-width:640px}
.steps-home li{counter-increment:s; display:flex; gap:16px; padding:14px 0; border-top:1px solid var(--line)}
.steps-home li::before{content:counter(s,decimal-leading-zero); font-family:var(--disp); font-weight:700;
  font-size:14px; color:var(--violet); padding-top:2px}
.steps-home b{display:block; font-family:var(--disp); font-weight:600}
.steps-home span{color:var(--soft); font-size:13.5px}

/* ============================ Page serveur =============================== */
.server-head{display:flex; gap:22px; align-items:center; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--r-card); padding:22px 24px;
  background:linear-gradient(160deg, #101019, #0b0b12)}
.server-head img{height:74px; width:auto; max-width:170px; object-fit:contain;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.7))}
.server-head .lede{margin:.3em 0 0; font-size:14px}
.unitgroup{margin-top:30px}
.unitgroup .ghead{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.flogo{width:34px; height:34px; border-radius:9px; border:1px solid var(--line-2);
  background:var(--panel); display:inline-flex; align-items:center; justify-content:center;
  font:700 14px var(--disp); color:var(--soft); overflow:hidden; flex:none}
.flogo img{width:100%; height:100%; object-fit:cover}
.units{border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--glass)}
.unit{display:flex; align-items:center; gap:14px; padding:15px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.unit:last-child{border-bottom:0}
.unit .name{font-family:var(--disp); font-weight:600; font-size:16px}
.tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); border:1px solid var(--line); border-radius:999px; padding:2px 9px}
.unit .cta{margin-left:auto; display:flex; align-items:center; gap:14px}
@media (max-width:600px){ .unit .cta{margin-left:0; width:100%; justify-content:flex-end} }

/* =========================== Badges d'état =============================== */
.badge{font-family:var(--disp); font-weight:600; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; border:1px solid; border-radius:999px; padding:4px 11px 3px; white-space:nowrap}
.badge.violet{color:#b89cfa; border-color:rgba(139,92,246,.5); background:rgba(139,92,246,.12)}
.badge.green{color:#6ee7b7; border-color:rgba(52,211,153,.45); background:rgba(52,211,153,.1)}
.badge.red{color:#fca5a5; border-color:rgba(239,68,68,.45); background:rgba(239,68,68,.1)}
.badge.amber{color:#fcd34d; border-color:rgba(245,158,11,.45); background:rgba(245,158,11,.1)}
.badge.dim{color:var(--dim); border-color:var(--line-2); background:transparent}
.badge.lg{font-size:13px; padding:7px 16px 6px}

/* ========================= Panneaux / documents ========================== */
.panel{border:1px solid var(--line); border-radius:var(--r-card); background:var(--panel); margin-bottom:22px; overflow:hidden}
.panel-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:18px 24px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02)}
.panel-head .chip{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--soft)}
.panel-head .chip img{height:20px; width:auto}
.panel-title{font-family:var(--disp); font-weight:700; font-size:22px; letter-spacing:.01em}
.panel-num{margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--dim); text-align:right}
.panel-body{padding:24px}
@media (max-width:560px){ .panel-body{padding:18px 16px} .panel-head{padding:14px 16px} }

/* ========================== Étapes « pièces » ============================ */
.steps{display:flex; gap:0; padding:16px 24px 0; flex-wrap:wrap}
.step{display:flex; align-items:center; gap:9px; padding:6px 18px 6px 0; color:var(--dim)}
.step + .step::before{content:""; width:26px; height:1px; background:var(--line-2); margin-right:18px}
.step .dot{width:26px; height:26px; border-radius:50%; border:1px solid var(--line-2);
  display:inline-flex; align-items:center; justify-content:center;
  font:600 12px var(--disp); flex:none}
.step b{font-family:var(--disp); font-weight:600; font-size:13px; color:inherit}
.step.is-done{color:var(--soft)}
.step.is-done .dot{background:rgba(139,92,246,.15); border-color:rgba(139,92,246,.5); color:#b89cfa}
.step.is-active{color:var(--text)}
.step.is-active .dot{border-color:var(--violet); color:var(--violet); box-shadow:0 0 0 3px rgba(139,92,246,.18)}
@media (max-width:680px){ .step + .step::before{display:none} .step{padding-right:14px} }

/* =============================== Champs ================================== */
.field{margin:0 0 20px}
.field > label{display:block; font-weight:600; font-size:14px; margin-bottom:7px}
.req{color:var(--fuchsia)}
input[type=text], input[type=number], textarea, select{
  width:100%; font:inherit; color:var(--text); background:var(--panel-2);
  border:1px solid var(--line-2); border-radius:var(--r-ctl); padding:10px 13px;
}
input::placeholder, textarea::placeholder{color:var(--dim)}
input[type=text]:focus, input[type=number]:focus, textarea:focus, select:focus{
  border-color:var(--violet); box-shadow:0 0 0 3px rgba(139,92,246,.2); outline:none}
textarea{min-height:120px; resize:vertical}
.counter{font-family:var(--mono); font-size:11px; color:var(--dim); text-align:right; margin-top:5px}
.choices label{display:flex; gap:10px; align-items:flex-start; padding:10px 13px;
  border:1px solid var(--line-2); border-radius:var(--r-ctl); margin-bottom:7px;
  cursor:pointer; background:var(--panel-2); transition:border-color .15s}
.choices label:hover{border-color:var(--violet)}
.choices .picked{border-color:var(--violet); background:rgba(139,92,246,.08)}
.choices input{margin-top:3px; accent-color:var(--violet)}
input[type=checkbox], input[type=radio]{accent-color:var(--violet)}
.field.is-error input[type=text], .field.is-error textarea{border-color:var(--red)}
.field.is-error .choices label{border-color:rgba(239,68,68,.5)}
.err{display:block; font-family:var(--mono); font-size:12px; color:#fca5a5; margin-top:7px}
.err::before{content:"\25B2 "; font-size:10px}
.check{display:flex; gap:11px; align-items:flex-start; border:1px solid var(--line-2);
  border-radius:var(--r-ctl); padding:13px 15px; margin:18px 0; background:var(--panel-2)}
.check input{margin-top:4px}

/* =============================== Boutons ================================= */
.actions{display:flex; gap:12px; align-items:center; margin-top:26px; flex-wrap:wrap}
button, .btn{font-family:var(--disp); font-weight:600; font-size:14px; letter-spacing:.02em;
  cursor:pointer; border-radius:var(--r-ctl); padding:10px 18px 9px;
  border:1px solid var(--line-2); background:transparent; color:var(--text);
  display:inline-block; transition:background .15s, border-color .15s}
button:hover, .btn:hover{background:var(--glass); border-color:var(--soft); color:var(--text)}
.btn-primary{background:var(--violet); border-color:var(--violet); color:#fff}
.btn-primary:hover{background:var(--violet-2); border-color:var(--violet-2); color:#fff}
.btn-discord{background:var(--blurple); border-color:var(--blurple); color:#fff}
.btn-discord:hover{background:#4752c4; border-color:#4752c4; color:#fff}
.btn-danger{background:var(--red); border-color:var(--red); color:#fff}
.btn-danger:hover{background:#dc2626; border-color:#dc2626; color:#fff}
.btn-sm{padding:8px 16px 7px; font-size:13.5px}
.spacer{flex:1}
a.dlink{font-family:var(--disp); font-weight:600; font-size:13.5px; color:var(--blurple)}
a.dlink:hover{color:#7984f5}

/* =============================== Encarts ================================= */
.notice, .flash{border:1px solid var(--line); border-left:3px solid var(--soft);
  border-radius:0 var(--r-ctl) var(--r-ctl) 0;
  background:var(--glass); padding:14px 17px; margin:0 0 18px; font-size:14px}
.notice .eyebrow{display:block; margin-bottom:4px; letter-spacing:.2em}
.notice.amber{border-left-color:var(--amber); background:rgba(245,158,11,.07)}
.notice.violet, .flash.info{border-left-color:var(--violet); background:rgba(139,92,246,.07)}
.notice.red, .flash.error{border-left-color:var(--red); background:rgba(239,68,68,.07)}
.notice.green, .flash.success{border-left-color:var(--green); background:rgba(52,211,153,.07)}

/* ========================== Listes & réponses ============================ */
.rows{border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--glass)}
.row{display:flex; gap:14px; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.row:last-child{border-bottom:0}
.row .o-name{font-family:var(--disp); font-weight:600; font-size:15.5px}
.row .o-guild{font-size:12.5px; color:var(--dim)}
.row .when{font-family:var(--mono); font-size:11.5px; color:var(--dim); margin-left:auto}
@media (max-width:600px){ .row .when{margin-left:0; width:100%} }
.qa{margin:0 0 16px}
.qa .eyebrow{display:block; margin-bottom:4px; letter-spacing:.18em; font-size:10.5px}
.qa p{margin:0; white-space:pre-line; color:#e5e7eb}
.recap-sec{display:flex; align-items:baseline; gap:12px; margin:26px 0 12px}
.recap-sec h2{margin:0}
.recap-sec a{font-size:13px}
.statusline{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 14px}
.statusline .when{font-family:var(--mono); font-size:12px; color:var(--dim)}
.idcard{display:flex; gap:13px; align-items:center; border:1px solid var(--line-2);
  border-radius:var(--r-ctl); padding:12px 14px; margin-bottom:10px; background:var(--panel-2)}
.idcard .avatar{width:38px; height:38px; font-size:15px}
.idcard .avatar.steam{background:#23262d; border-radius:8px}
.idcard b{display:block; font-family:var(--disp); font-weight:600}
.idcard .mono{font-size:11.5px}

/* =============================== Tableaux ================================ */
table{border-collapse:collapse; width:100%; font-size:13.5px}
th, td{border-bottom:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:middle}
th{font-family:var(--disp); font-weight:600; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim)}
tr:last-child td{border-bottom:0}

/* Compat avec les gabarits admin du Lot 2b (re-skin complet au lot admin) */
.question{margin-bottom:1.1rem}
.question label.main{display:block; font-weight:600; margin-bottom:.35rem; font-size:14px}
.question .err{margin-top:6px}
details{border:1px solid var(--line); border-radius:var(--r-ctl); padding:10px 14px; margin:14px 0; background:var(--glass)}
summary{cursor:pointer; font-family:var(--disp); font-weight:600; font-size:14px; color:var(--soft)}
hr{border:0; border-top:1px solid var(--line); margin:26px 0}

/* ============================ Espace recruteur =========================== */
.admin-tabs{display:flex; gap:8px; margin:16px 0 26px; flex-wrap:wrap}
.atab{font-family:var(--disp); font-weight:600; font-size:13px; color:var(--soft);
  border:1px solid var(--line); border-radius:999px; padding:7px 15px 6px; background:var(--glass)}
.atab:hover{color:var(--text); border-color:var(--line-2)}
.atab.is-on{color:#fff; background:var(--violet); border-color:var(--violet)}
.atab .n{font-family:var(--mono); font-size:10.5px; opacity:.8; margin-left:4px}
.pcount{font-family:var(--mono); font-size:11px; color:#b89cfa; border:1px solid rgba(139,92,246,.45);
  background:rgba(139,92,246,.12); border-radius:999px; padding:2px 9px; white-space:nowrap}
.row .o-sub{font-size:12px; color:var(--dim)}
.row .end{margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
@media (max-width:620px){ .row .end{margin-left:0; width:100%; justify-content:flex-end} }
.filters{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px}
.filters a{font-family:var(--disp); font-weight:600; font-size:12.5px; color:var(--soft);
  border:1px solid var(--line); border-radius:999px; padding:6px 13px 5px}
.filters a:hover{color:var(--text)}
.filters a.is-on{color:#fff; background:var(--violet); border-color:var(--violet)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
@media (max-width:640px){ .grid2{grid-template-columns:1fr} }
.rolebox{border:1px solid var(--line-2); border-radius:var(--r-ctl); background:var(--panel-2);
  max-height:170px; overflow:auto; padding:8px 12px}
.rolebox label{display:flex; gap:9px; align-items:center; padding:5px 0; font-size:13.5px; color:#e5e7eb}
.thumb{width:64px; height:40px; border-radius:8px; border:1px solid var(--line-2); background:var(--panel-2);
  display:inline-flex; align-items:center; justify-content:center; overflow:hidden; flex:none; vertical-align:middle}
.thumb img{max-width:90%; max-height:90%; object-fit:contain}
.btn-success{background:var(--green); border-color:var(--green); color:#06281b}
.btn-success:hover{background:#2cc287; border-color:#2cc287; color:#06281b}
.btn-xs{padding:6px 11px 5px; font-size:12.5px}
.iconb{padding:6px 10px 5px; font-size:13px; line-height:1}
.qsec{border:1px solid var(--line); border-radius:var(--r-card); background:var(--glass); margin-bottom:18px; overflow:hidden}
.qsec-head{display:flex; gap:12px; align-items:center; padding:13px 16px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02); flex-wrap:wrap}
.qsec-head .sname{font-family:var(--disp); font-weight:700; font-size:16px}
.qsec-head .end{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.qrow-editing td{background:rgba(139,92,246,.05)}
.qedit{padding:14px 16px; border-top:1px dashed var(--line-2); background:rgba(139,92,246,.04)}
.qsec details{border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; margin:0; padding:12px 16px}

/* ================================ Footer ================================= */
footer.site{border-top:1px solid var(--line); margin-top:30px}
footer.site .in{max-width:1020px; margin:0 auto; padding:20px; font-size:12.5px; color:var(--dim);
  display:flex; gap:18px; flex-wrap:wrap}
footer.site a{color:var(--soft)}
footer.site a:hover{color:var(--text)}
footer.site .ext{margin-left:auto}