/* -------- WAYVES — Charte graphique --------
   Primaire (rose):     #FFC6F3
   Secondaire (gold):   #DCB267 → #FFE19D
   Fond (noir):         #1A1A1A
   Texte (blanc doux):  #EFEFEF
------------------------------------------------ */

:root{
    --bg:#1a1a1a;      /* fond */
    --fg:#efefef;      /* texte principal */
    --muted:#b9b9b9;   /* texte secondaire */

    /* Couleurs brand */
    --primary:#ffc6f3; /* ROSE = couleur principale */
    --secondary1:#dcb267; /* GOLD = couleur secondaire (dégradé) */
    --secondary2:#ffe19d;

    --radius:20px;
    --gap:24px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
    line-height:1.6;
    background:var(--bg);
    color:var(--fg);
}

/* Liens & boutons (primaire rose) */
a{color:var(--primary);text-decoration:none;}
a:hover{opacity:.9}

.button{
    display:inline-block;
    padding:12px 18px;
    border-radius:999px;
    font-weight:600;
    background:var(--primary);
    color:#1a1a1a;                      /* contraste sur rose */
    border:0;
    transition:transform .15s ease,filter .15s ease,opacity .15s ease;
}
.button:hover{transform:translateY(-1px);filter:saturate(1.05);}

/* Variante secondaire (gold) */
.button.secondary{
    background:linear-gradient(90deg,var(--secondary1),var(--secondary2));
    color:#1a1a1a;
}

/* Bouton fantôme (contour rose) */
.button.ghost{
    background:transparent;
    color:var(--fg);
    outline:2px solid var(--primary);
}

/* Containers */
.container{max-width:1100px;margin:0 auto;padding:64px 20px;}
.sub{color:var(--muted);margin-top:-10px}

/* Header */
.site-header{
    position:sticky;top:0;z-index:10;
    display:flex;align-items:center;justify-content:space-between;
    background:rgba(26,26,26,.7);backdrop-filter:blur(6px);
    padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header .brand{display:flex;align-items:center;gap:10px}
.site-header nav{display:flex;gap:18px;align-items:center}
.site-header nav a{
    padding:8px 12px;border-radius:999px;
    color:var(--fg);opacity:.85;font-weight:600;letter-spacing:.02em;
    border:2px solid transparent;
}
.site-header nav a:hover{opacity:1}
.site-header nav a.active{
    opacity:1;
    border-color:var(--primary);                 /* actif = rose */
    background:#2a2a2a;
}

/* Hero avec vidéo de fond */
.hero{position:relative;min-height:70vh;display:grid;place-items:center;overflow:hidden;}
.bg-video{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    filter:grayscale(.15) contrast(1.05) brightness(.65);
}
.hero .overlay{position:relative;text-align:center;padding:40px;z-index:1}
.hero h1{
    font-size:clamp(40px,8vw,92px);
    line-height:1.05;margin:0 0 18px;font-weight:800;letter-spacing:.02em
}
/* highlight du mot WAYVES en ROSE (primaire) */
.hero h1 span{
    color:var(--primary);
}
.hero p{max-width:720px;margin:0 auto 26px;color:var(--muted);font-size:clamp(16px,2.6vw,20px)}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Intro */
.intro{border-top:1px solid rgba(255,255,255,.06);background:#121212;}
.intro .container{padding-block:48px}

/* Roster (avatars ronds) */
.roster h1{margin-bottom:6px}
.cards{
    margin:24px 0 0;padding:0;list-style:none;
    display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);
}
.card{
    background:#111;border:1px solid rgba(255,255,255,.06);
    border-radius:var(--radius);padding:18px;text-align:center;
}
.avatar{
    width:140px;height:140px;border-radius:50%;
    margin:8px auto 12px;overflow:hidden;
    /* anneau rose (primaire) */
    border:3px solid var(--primary);
    background:#111;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}
/* hover subtil gold en secondaire */
.card:hover .avatar{
    border:3px solid transparent;
    background:
            linear-gradient(#111,#111) padding-box,
            linear-gradient(90deg,var(--secondary1),var(--secondary2)) border-box;
}

/* Tableau des résultats */
.table-wrap{overflow:auto;border-radius:var(--radius);border:1px solid rgba(255,255,255,.06);}
.results{width:100%;border-collapse:collapse;min-width:680px;background:#111}
.results thead th{font-weight:800;text-align:left;background:#151515}
.results th,.results td{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.results tbody tr:hover{background:#171717}
.win{color:#9be49b}
.loss{color:#ff8a8a}
.draw{color:#ffd27a}

/* Contact */
.contact .grid{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-bottom:var(--gap)
}
.contact-form input,.contact-form textarea{
    width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.16);
    background:#0e0e0e;color:var(--fg);font:inherit;outline:none;
}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--primary)}
.contact-extra{margin-top:18px;color:var(--muted)}
.contact a{color:var(--primary)}

/* Footer */
.site-footer{
    padding:28px 20px;border-top:1px solid rgba(255,255,255,.06);
    text-align:center;color:var(--muted);background:#0f0f0f
}

/* Responsive */
@media (max-width:1000px){
    .cards{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
    .cards{grid-template-columns:repeat(2,1fr)}
    .contact .grid{grid-template-columns:1fr}
    .hero{min-height:60vh}
}

/* ===== Roster (cartes enrichies) ===== */
.roster h1{margin-bottom:6px}
.cards{
    margin:24px 0 0;padding:0;list-style:none;
    display:grid;gap:var(--gap);
}
/* Grille roster : 5 en haut, 2 centrés en dessous */
.cards-7 {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:var(--gap);
}

/* Placer les 2 subs */
.cards-7 > .card:nth-child(6) {
    grid-column:2; /* sub 1 */
}
.cards-7 > .card:nth-child(7) {
    grid-column:4; /* sub 2 */
}

/* Responsif : retombe naturellement en grille */
@media (max-width:1000px){
    .cards-7 {grid-template-columns:repeat(3,1fr);}
    .cards-7 > .card:nth-child(6),
    .cards-7 > .card:nth-child(7) {grid-column:auto;}
}
@media (max-width:640px){
    .cards-7 {grid-template-columns:repeat(2,1fr);}
}


.card{
    background:#111;
    border:1px solid rgba(255,255,255,.06);
    border-radius:var(--radius);
    padding:18px 18px 16px;
    text-align:center;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{
    transform:translateY(-2px);
    border-color:rgba(255,255,255,.14);
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.avatar{
    width:140px;height:140px;border-radius:50%;
    margin:8px auto 12px;overflow:hidden;
    border:3px solid var(--primary); /* anneau ROSE (primaire) */
    background:#111;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}

.card-body h3{margin:6px 0 6px;font-size:20px}
.role.badge{
    display:inline-block;
    padding:6px 10px;border-radius:999px;
    background:var(--primary); color:#1a1a1a; font-weight:700;
    font-size:12px; letter-spacing:.02em;
}
.role.badge.ghost{
    background:transparent; color:var(--primary);
    outline:2px solid var(--primary);
}

/* petites étiquettes or (secondaire) */
.tags{margin-top:10px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.tag{
    display:inline-block;font-size:12px;font-weight:600;
    padding:6px 10px;border-radius:999px;color:#1a1a1a;
    background:linear-gradient(90deg,var(--secondary1),var(--secondary2));
}

/* ===== Social (Twitter) ===== */
.social{
    display:inline-flex;align-items:center;gap:8px;
    margin-top:10px;font-weight:600;
}
.social.twitter{
    color:var(--primary);
    position:relative;padding-left:24px;
}

.mvp {
    font-weight: 700;
    position: relative;
    background: linear-gradient(90deg, var(--secondary1), var(--secondary2), var(--secondary1));
    background-size: 200% auto; /* pour faire "bouger" le dégradé */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;

    animation: shine 2s linear infinite; /* dégradé qui glisse */
    text-shadow: 0 0 8px rgba(220,178,103,0.6), 0 0 12px rgba(255,225,157,0.5); /* glow doré */
}

@keyframes shine {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}