/* =================================
   NOVARIS ESPORT - ACCUEIL
================================= */


body {

    background:#05080f;

}



/* HERO */

.hero {

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    radial-gradient(
        circle at top,
        #10294a,
        #05080f 70%
    );

    padding-top:90px;

}



.hero-content {

    text-align:center;

    max-width:900px;

}



.hero-logo {

    width:230px;

    display:block;

    margin:0 auto 35px auto;

}



.hero h1 {

    font-size:85px;

    letter-spacing:8px;

    font-weight:800;

}



.hero h1 span {

    color:#4DA8FF;

}



.hero p {

    margin:35px auto;

    max-width:700px;

    color:#b8b8b8;

    font-size:20px;

    line-height:1.7;

}



.hero-buttons {

    display:flex;

    justify-content:center;

    gap:20px;

}



/* BOUTONS */


.btn {

    padding:15px 35px;

    background:#4DA8FF;

    border-radius:8px;

    color:white;

    font-weight:700;

    transition:.3s;

}



.btn:hover {

    transform:translateY(-4px);

    box-shadow:
    0 0 25px #4DA8FF;

}



.btn-outline {

    padding:15px 35px;

    border:1px solid #4DA8FF;

    border-radius:8px;

}



/* SECTIONS */


.section {

    padding:120px 0;

}



.dark-section {

    background:#080d16;

}



.container {

    width:90%;

    max-width:1400px;

    margin:auto;

}



h2 {

    text-align:center;

    font-size:45px;

    margin-bottom:70px;

}



h3 {

    margin-bottom:20px;

}




/* PRESENTATION */


.two-columns {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}



.two-columns p {

    color:#bdbdbd;

    line-height:1.8;

    font-size:18px;

}



.info-card {


background:#101722;

border:1px solid rgba(255,255,255,.1);

padding:40px;

border-radius:15px;

}




/* CARTES */


.cards {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.card {


background:#101722;

border:1px solid rgba(255,255,255,.1);

padding:35px;

border-radius:15px;

transition:.3s;


}



.card:hover {


transform:translateY(-10px);

border-color:#4DA8FF;


}



.card p {

color:#bdbdbd;

line-height:1.6;

}




/* STATS */


.stats {


display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

text-align:center;


}



.stats div {


background:#101722;

padding:40px;

border-radius:15px;

border:1px solid rgba(255,255,255,.1);


}



.stats strong {


font-size:50px;

color:#4DA8FF;


}



/* ROSTER */


.roster {


display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;


}



.player-card {


background:#101722;

padding:40px;

border-radius:15px;

text-align:center;

border:1px solid rgba(255,255,255,.1);


}



.player-avatar {


width:90px;

height:90px;

border-radius:50%;

background:#0B1F3A;

display:flex;

align-items:center;

justify-content:center;

margin:0 auto 20px;

font-size:30px;

color:#4DA8FF;


}



/* MATCH */


.match {


display:flex;

justify-content:center;

align-items:center;

gap:50px;

background:#101722;

padding:40px;

border-radius:15px;

font-size:25px;

}




/* ACTUALITES */


.news-grid {


display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;


}



/* RECRUTEMENT */


.join-section {


padding:120px 0;

text-align:center;

background:#0B1F3A;


}



.join-section p {


margin:30px;

font-size:20px;

}



/* ANIMATIONS */


.reveal {

opacity:0;

transform:translateY(60px);

transition:1s ease;

}



.reveal.visible {

opacity:1;

transform:translateY(0);

}





@media(max-width:900px){


.hero h1 {

font-size:45px;

}


.two-columns,
.cards,
.stats,
.roster,
.news-grid {

grid-template-columns:1fr;

}


}

.news-placeholder {

    background:#101722;

    border:1px solid rgba(255,255,255,0.1);

    padding:50px;

    border-radius:15px;

    text-align:center;

    color:#bdbdbd;

    font-size:20px;

}

.player-avatar {

    width:100px;
    height:100px;

    border-radius:50%;

    overflow:hidden;

    display:block;

    border:2px solid #ff7a00;

}


.player-avatar img {

    width:100%;
    height:100%;

    object-fit:cover;

}



.player-name {

    margin-top:15px;

}