/* ============================================
   VAF — Mods (V21) — front
   Aligné sur l'ADN du thème : accent blanc, glassmorphism,
   cards #1a1a1a à angles droits, badges 3px, bouton blanc.
   ============================================ */

.vaf-mods-section{
	background:#0a0a0a;
	padding:8rem 5% 12rem;
}
.vaf-mods-inner{max-width:1600px;margin:0 auto}

/* ---------- Section header (centered, Teams/Events pattern) ---------- */
.vaf-mods-head{text-align:center;margin-bottom:6rem}
.vaf-mods-eyebrow{
	font-size:.8rem;letter-spacing:4px;font-weight:700;text-transform:uppercase;
	color:rgba(255,255,255,.4);margin-bottom:2rem;
}
.vaf-mods-title{
	font-family:'Roboto Condensed',sans-serif;font-weight:900;text-transform:uppercase;
	font-size:clamp(4rem,10vw,8rem);line-height:.85;margin:0;color:#fff;
}

/* ---------- Filters (identical to Events Archive) ---------- */
.vaf-mods-filters{
	background:rgba(0,0,0,.4);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
	border:1px solid rgba(255,255,255,.1);border-radius:15px;padding:3rem;margin-bottom:6rem;
}
.vaf-mods-filter-form{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:2rem;align-items:end;
}
.vaf-mods-apply{
	width:100%;background:#fff;color:#000;border:none;border-radius:5px;padding:15px;
	font-weight:900;font-size:16px;cursor:pointer;text-transform:uppercase;letter-spacing:1px;
	font-family:'Roboto',sans-serif;transition:all .3s cubic-bezier(.4,0,.2,1);
}
.vaf-mods-apply:hover{box-shadow:0 0 30px rgba(255,255,255,.4)}
.vaf-mods-filter-form select{appearance:none;cursor:pointer}

/* ---------- Grille ---------- */
.vaf-mods-list{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
	gap:3rem;margin-bottom:2rem;
}
.vaf-mod-card{
	background:#1a1a1a;border:1px solid rgba(255,255,255,.1);overflow:hidden;
	display:flex;flex-direction:column;height:100%;
}

.vaf-mod-cover{
	position:relative;height:200px;background:#000;overflow:hidden;
	border-bottom:1px solid rgba(255,255,255,.1);
}
.vaf-mod-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vaf-mod-cover-ph{
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	font-family:'Roboto Condensed',sans-serif;font-weight:900;text-transform:uppercase;
	font-size:clamp(2.6rem,6vw,4.5rem);color:rgba(255,255,255,.05);
	letter-spacing:-2px;white-space:nowrap;
}
.vaf-mod-cat{
	position:absolute;top:1.5rem;left:1.5rem;
	background:rgba(0,0,0,.6);backdrop-filter:blur(10px);
	border:1px solid rgba(255,255,255,.3);color:#fff;
	padding:.6rem 1.2rem;font-size:.72rem;font-weight:900;letter-spacing:2px;
	text-transform:uppercase;border-radius:3px;font-family:'Roboto Condensed',sans-serif;
}
.vaf-mod-sims{position:absolute;bottom:1rem;left:1.5rem;display:flex;gap:.5rem}
.vaf-mod-sims span{
	background:rgba(0,0,0,.6);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);
	color:rgba(255,255,255,.85);padding:.35rem .7rem;font-size:.68rem;font-weight:700;
	letter-spacing:1px;border-radius:3px;
}

.vaf-mod-body{padding:2.5rem;display:flex;flex-direction:column;flex:1}
.vaf-mod-body h3{
	font-family:'Roboto',sans-serif;font-weight:700;text-transform:uppercase;
	font-size:1.5rem;line-height:1.2;margin:0 0 .8rem;color:#fff;
}
.vaf-mod-body p{color:rgba(255,255,255,.6);font-weight:300;font-size:.98rem;line-height:1.5;margin:0 0 1.5rem}

.vaf-mod-meta{
	display:flex;gap:1.8rem;flex-wrap:wrap;padding:1.3rem 0;margin-top:auto;
	border-top:1px solid rgba(255,255,255,.08);
}
.vaf-mod-meta div{display:flex;flex-direction:column}
.vaf-mod-meta span{
	font-size:.68rem;letter-spacing:1px;text-transform:uppercase;
	color:rgba(255,255,255,.4);font-weight:700;margin-bottom:.3rem;
}
.vaf-mod-meta b{font-family:'Roboto Condensed',sans-serif;font-size:1.05rem;font-weight:700;color:#fff}

.vaf-mod-foot{display:flex;align-items:center;gap:1.2rem;padding-top:1.5rem}
.vaf-mod-dl{
	flex:1;background:#fff;color:#000;border:none;padding:1rem 1.5rem;
	font-weight:900;font-size:.95rem;text-transform:uppercase;letter-spacing:1.5px;
	text-align:center;text-decoration:none;cursor:pointer;font-family:'Roboto',sans-serif;
	transition:all .3s cubic-bezier(.4,0,.2,1);
}
.vaf-mod-dl:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(255,255,255,.5);color:#000}
.vaf-mod-dl--off{background:rgba(255,255,255,.1);color:rgba(255,255,255,.5);cursor:default}
.vaf-mod-dl--off:hover{transform:none;box-shadow:none}
.vaf-mod-dcount{font-size:.9rem;color:rgba(255,255,255,.4);white-space:nowrap;font-weight:700}
.vaf-mod-dcount b{color:#fff}

/* ---------- Vide ---------- */
.vaf-mods-empty{
	text-align:center;padding:6rem 2rem;border:1px solid rgba(255,255,255,.1);
	background:rgba(0,0,0,.3);border-radius:15px;
}
.vaf-mods-empty b{
	display:block;color:#fff;font-family:'Roboto Condensed',sans-serif;font-weight:900;
	text-transform:uppercase;font-size:1.5rem;margin-bottom:.5rem;
}
.vaf-mods-empty span{color:rgba(255,255,255,.5)}

/* ---------- Responsive ---------- */
@media(max-width:768px){
	.vaf-mods-section{padding:7rem 5% 4rem}
	.vaf-mods-filters{padding:2rem}
	.vaf-mods-stats{gap:2rem}
	.vaf-mod-body{padding:2rem}
}
@media(prefers-reduced-motion:reduce){
	.vaf-mod-dl,.vaf-mods-apply{transition:none}
}