/* ===================================
   HERO FAN ZONE
=================================== */


.fan-hero{

    position:relative;

    height:650px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

}





/* IMAGE */

.fan-hero-image{

    position:absolute;

    inset:0;

}





.fan-hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}





/* OVERLAY */

.fan-hero-couverture{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        rgba(8,28,58,0.92),

        rgba(8,28,58,0.55),

        rgba(8,28,58,0.35)

    );

}





/* CONTENT */

.fan-hero-contenu{

    position:relative;

    z-index:2;

    max-width:850px;

    padding:20px;

    text-align:center;

    color:white;

}




/* TITLE */

.fan-hero-contenu h1{

    font-size:65px;

    line-height:1.1;

    font-weight:900;

    text-transform:uppercase;

    margin:25px 0;

}





/* DESCRIPTION */

.fan-hero-contenu p{

    max-width:700px;

    margin:0 auto 40px;

    font-size:19px;

    line-height:1.8;

    color:#f1f1f1;

}





/* BUTTON */

.fan-hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 40px;

    background:#E31B23;

    color:white;

    text-decoration:none;

    border-radius:50px;

    font-size:16px;

    font-weight:900;

    transition:.3s ease;

}





.fan-hero-btn:hover{

    background:#FFC632;

    color:#081C3A;

    transform:translateY(-5px);

}





/* ANIMATION */

.fan-hero-contenu{

    animation:fanHeroAppear 1s ease forwards;

}





@keyframes fanHeroAppear{


    from{

        opacity:0;

        transform:translateY(40px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }


}






/* ===================================
   INTRO FAN ZONE
=================================== */


.fan-intro{

    padding:100px 8%;

    background:white;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}





/* TEXTE */

.fan-intro-contenu{

    max-width:600px;

}





.section-etiquette{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#E31B23;

    font-size:13px;

    font-weight:900;

    letter-spacing:2px;

    text-transform:uppercase;

}





.section-etiquette::before{

    content:"";

    width:30px;

    height:3px;

    background:#E31B23;

}





.fan-intro-contenu h2{

    font-size:42px;

    line-height:1.2;

    color:#081C3A;

    font-weight:900;

    margin:25px 0;

}





.fan-intro-contenu p{

    color:#5c6167;

    font-size:16px;

    line-height:1.8;

    margin-bottom:20px;

}





/* STATISTIQUES */

.fan-stats{

    display:grid;

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

    gap:20px;

}





.fan-stat-carte{

    background:#f7f8fa;

    padding:35px 20px;

    border-radius:20px;

    text-align:center;

    border:1px solid #e4e6e9;

    transition:.35s ease;

    position:relative;

    overflow:hidden;

}





.fan-stat-carte::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:#E31B23;

}





.fan-stat-carte:hover{

    transform:translateY(-10px);

    box-shadow:

    0 20px 35px rgba(0,0,0,0.12);

}





/* CHIFFRE */

.fan-num{

    display:block;

    color:#E31B23;

    font-size:50px;

    font-weight:900;

    margin-bottom:15px;

}





.fan-stat-carte h3{

    color:#081C3A;

    font-size:20px;

    font-weight:900;

    margin-bottom:12px;

}





.fan-stat-carte p{

    color:#5c6167;

    font-size:14px;

    line-height:1.6;

}


/* ===================================
   PREDICTOR SECTION
=================================== */


.predictor-section{

    padding:100px 8%;

    background:#f7f8fa;

}





.predictor-section .fan-section-tete{

    text-align:center;

    max-width:750px;

    margin:0 auto 60px;

}





.predictor-section .fan-section-tete h2{

    color:#081C3A;

    font-size:42px;

    font-weight:900;

    margin:25px 0;

}





.predictor-section .fan-section-tete p{

    color:#5c6167;

    font-size:16px;

    line-height:1.7;

}





/* FORMULAIRE */

.prediction-form{

    display:grid;

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

    gap:30px;

}





/* CACHER RADIO */

.equipe-choix input{

    display:none;

}





/* CARTE EQUIPE */

.fan-equipe-carte{

    background:white;

    border-radius:20px;

    padding:35px 25px;

    text-align:center;

    border:2px solid transparent;

    cursor:pointer;

    transition:.35s ease;

    height:100%;

}





.fan-equipe-carte:hover{

    transform:translateY(-8px);

    box-shadow:

    0 20px 40px rgba(0,0,0,0.12);

}





/* IMAGE DRAPEAU */

.fan-equipe-carte img{

    width:90px;

    height:60px;

    object-fit:cover;

    margin-bottom:20px;

}





.fan-equipe-carte h3{

    color:#081C3A;

    font-size:24px;

    font-weight:900;

    margin-bottom:12px;

}





.fan-equipe-carte span{

    color:#5c6167;

    font-size:14px;

}





/* EFFET SELECTION */

.equipe-choix input:checked + .fan-equipe-carte{

    border-color:#E31B23;

    background:#081C3A;

    transform:translateY(-10px);

}





.equipe-choix input:checked + .fan-equipe-carte h3{

    color:white;

}





.equipe-choix input:checked + .fan-equipe-carte span{

    color:#FFC632;

}





/* BOUTON */

.predict-btn{

    grid-column:1 / -1;

    justify-self:center;

    margin-top:30px;

    padding:16px 45px;

    border:none;

    border-radius:50px;

    background:#E31B23;

    color:white;

    font-size:16px;

    font-weight:900;

    cursor:pointer;

    transition:.3s ease;

}





.predict-btn:hover{

    background:#FFC632;

    color:#081C3A;

    transform:translateY(-5px);

}


/* ===================================
   PRONOSTICS AVANCÉS
=================================== */


.pronostic-avance{

    padding:100px 8%;

    background:white;

}





.pronostic-avance .fan-section-tete{

    max-width:750px;

    margin:0 auto 60px;

    text-align:center;

}





.pronostic-avance .fan-section-tete h2{

    color:#081C3A;

    font-size:42px;

    font-weight:900;

    margin:25px 0;

}





.pronostic-avance .fan-section-tete p{

    color:#5c6167;

    font-size:16px;

    line-height:1.7;

}





/* GRID */

.fan-grille{

    display:grid;

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

    gap:30px;

}





/* CARD */

.prediction-box{

    background:#f7f8fa;

    border:1px solid #e4e6e9;

    border-radius:20px;

    padding:35px;

    transition:.35s ease;

}





.prediction-box:hover{

    transform:translateY(-8px);

    box-shadow:

    0 20px 35px rgba(0,0,0,0.12);

}





.prediction-box h3{

    color:#081C3A;

    font-size:24px;

    font-weight:900;

    margin-bottom:15px;

}





.prediction-box p{

    color:#5c6167;

    font-size:15px;

    margin-bottom:25px;

}





/* SELECT */

.prediction-box select{

    width:100%;

    padding:15px 20px;

    border-radius:12px;

    border:1px solid #d8dce2;

    background:white;

    color:#081C3A;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    outline:none;

}





.prediction-box select:focus{

    border-color:#E31B23;

}





/* SCORE */

.score-input{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

}





.score-input input{

    width:90px;

    height:60px;

    border-radius:12px;

    border:2px solid #e4e6e9;

    text-align:center;

    font-size:25px;

    font-weight:900;

    color:#081C3A;

}





.score-input span{

    font-size:30px;

    font-weight:900;

    color:#E31B23;

}





.score-input input:focus{

    outline:none;

    border-color:#E31B23;

}





/* BOUTON VERS LEADERBOARD */

.next-section-btn{

    display:flex;

    width:max-content;

    margin:60px auto 0;

    padding:15px 35px;

    border-radius:50px;

    background:#081C3A;

    color:white;

    text-decoration:none;

    font-weight:900;

    transition:.3s ease;

}





.next-section-btn:hover{

    background:#E31B23;

    transform:translateY(-5px);

}


/* ===================================
   LEADERBOARD SECTION
=================================== */


.section-classement{

    padding:100px 8%;

    background:#f7f8fa;

}





.section-classement .fan-section-tete{

    max-width:750px;

    margin:0 auto 60px;

    text-align:center;

}





.section-classement .fan-section-tete h2{

    color:#081C3A;

    font-size:42px;

    font-weight:900;

    margin:25px 0;

}





.section-classement .fan-section-tete p{

    color:#5c6167;

    font-size:16px;

    line-height:1.7;

}







/* ===================================
   PODIUM TOP 3
=================================== */


.podium{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:30px;

    margin-bottom:70px;

}





.podium-card{

    background:white;

    width:260px;

    padding:35px 25px;

    border-radius:25px;

    text-align:center;

    border:1px solid #e4e6e9;

    transition:.35s ease;

}





.podium-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 20px 40px rgba(0,0,0,0.12);

}





/* PREMIER */

.podium-card.first{

    transform:translateY(-25px);

    border-top:5px solid #FFC632;

}





.podium-card.second{

    border-top:5px solid #bfc3c9;

}





.podium-card.third{

    border-top:5px solid #cd7f32;

}







.medaille{

    font-size:45px;

    margin-bottom:15px;

}





.avatar{

    width:80px;

    height:80px;

    margin:0 auto 20px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#081C3A;

    color:white;

    font-size:35px;

}





.podium-card h3{

    color:#081C3A;

    font-size:22px;

    font-weight:900;

    margin-bottom:10px;

}





.podium-card span{

    color:#E31B23;

    font-weight:900;

}









/* ===================================
   TABLEAU
=================================== */


.classement-table{

    max-width:1000px;

    margin:0 auto;

    background:white;

    border-radius:20px;

    overflow:hidden;

    border:1px solid #e4e6e9;

}





.table-tete{

    display:grid;

    grid-template-columns:1fr 2fr 1fr 1.5fr;

    padding:20px 30px;

    background:#081C3A;

    color:white;

    font-weight:900;

}





.table-ligne{

    display:grid;

    grid-template-columns:1fr 2fr 1fr 1.5fr;

    padding:20px 30px;

    border-bottom:1px solid #e4e6e9;

    color:#5c6167;

    font-weight:700;

    transition:.3s ease;

}





.table-ligne:hover{

    background:#f1f3f6;

    color:#081C3A;

}





.table-ligne span:nth-child(3){

    color:#E31B23;

    font-weight:900;

}