/* ===========================
   STYLE GÉNÉRAL
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#f5f7fa;
    color:#222;
}

/* ===========================
   MENU
=========================== */

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 8%;
    background:#0B1F3A;
    position:sticky;
    top:0;
    z-index:1000;
}

.logo h2{
    color:#F4C542;
    font-size:28px;
}

.menu{
    display:flex;
    list-style:none;
}

.menu li{
    margin-left:30px;
}

.menu li a{
    text-decoration:none;
    color:white;
    font-weight:500;
    transition:.3s;
}

.menu li a:hover,
.active{
    color:#F4C542;
}

/* ===========================
   HERO
=========================== */

.hero{
    height:90vh;
    background:linear-gradient(rgba(11,31,58,.65),
    rgba(11,31,58,.65)),
    url("../images/hero.jpg");

    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.hero-text{
    color:white;
    width:70%;
}

.hero-text h1{
    font-size:60px;
    margin-bottom:15px;
}

.hero-text h3{
    color:#F4C542;
    margin-bottom:20px;
}

.hero-text p{
    font-size:18px;
    line-height:30px;
    margin-bottom:35px;
}

.btn{
    display:inline-block;
    background:#F4C542;
    color:#0B1F3A;
    padding:15px 35px;
    border-radius:8px;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}

.btn:hover{
    background:white;
    transform:translateY(-5px);
}

/* ===========================
MATCHS
=========================== */

.live{

    width:90%;
    margin:auto;
    padding:70px 0;

}

.live h2{

    text-align:center;
    margin-bottom:40px;
    color:#0B1F3A;

}

.match-container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.match-card{

background:white;

padding:30px;

border-radius:15px;

text-align:center;

box-shadow:0 10px 25px rgba(0,0,0,.1);

transition:.4s;

position:relative;

}

.match-card:hover{

transform:translateY(-10px);

}

.live-badge{

position:absolute;

top:15px;

right:15px;

background:red;

color:white;

padding:5px 12px;

border-radius:20px;

font-size:13px;

}

/* ===========================
ACTUALITES
=========================== */

.news{

background:#eef2f7;

padding:80px 0;

}

.news h2{

text-align:center;

margin-bottom:50px;

color:#0B1F3A;

}

.news-container{

width:90%;

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:30px;

}

.news-card{

background:white;

border-radius:15px;

overflow:hidden;

box-shadow:0 8px 20px rgba(0,0,0,.12);

transition:.4s;

}

.news-card:hover{

transform:translateY(-10px);

}

.news-card img{

width:100%;

height:220px;

object-fit:cover;

}

.content{

padding:25px;

}

.content h3{

margin-bottom:15px;

color:#0B1F3A;

}

.content p{

line-height:28px;

margin-bottom:20px;

}

.content a{

text-decoration:none;

font-weight:bold;

color:#1565C0;

}

.content a:hover{

color:#F4C542;

}

/* ===========================
FOOTER
=========================== */

footer{

background:#0B1F3A;

color:white;

text-align:center;

padding:30px;

margin-top:70px;

}
.icon {
  vertical-align: middle;
  margin-right: 8px;
}


/*======================
PAGE TITLE
======================*/

.page-title{

background:#0B1F3A;

color:white;

text-align:center;

padding:70px 20px;

}

.page-title h1{

font-size:45px;

margin-bottom:15px;

}

.page-title p{

font-size:18px;

}

/*======================
HISTORY
======================*/

.history{

width:90%;

margin:70px auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

align-items:center;

}

.history img{

width:100%;

border-radius:15px;

}

.history h2{

margin-bottom:20px;

color:#0B1F3A;

}

.history p{

line-height:30px;

text-align:justify;

}

/*======================
HOSTS
======================*/

.hosts{

padding:70px 0;

background:#eef2f7;

}

.hosts h2{

text-align:center;

margin-bottom:50px;

color:#0B1F3A;

}

.host-container{

width:90%;

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:30px;

}

.host-card{

background:white;

border-radius:15px;

overflow:hidden;

box-shadow:0 8px 20px rgba(0,0,0,.1);

transition:.4s;

}

.host-card:hover{

transform:translateY(-10px);

}

.host-card img{

width:100%;

height:220px;

object-fit:cover;

}

.host-card h3{

text-align:center;

margin:20px 0;

color:#0B1F3A;

}

.host-card p{

padding:0 20px 25px;

line-height:28px;

text-align:center;

}

.filter{

text-align:center;

margin:40px 0;

}

.filter button{

background:#0B1F3A;

color:white;

padding:12px 25px;

border:none;

margin:10px;

border-radius:8px;

cursor:pointer;

transition:.3s;

}

.filter button:hover{

background:#F4C542;

color:#0B1F3A;

}

.matchs{

width:90%;

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:30px;

padding-bottom:60px;

}

.info-equipe{

width:90%;

margin:60px auto;

background:white;

padding:40px;

border-radius:15px;

box-shadow:0 10px 20px rgba(0,0,0,.1);

}

.info-equipe h2{

color:#0B1F3A;

margin-bottom:20px;

}

.info-equipe p{

line-height:30px;

font-size:18px;

}

.host-card{

cursor:pointer;

}

.host-card img{

width:100%;
height:220px;
object-fit:cover;

}

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

.prediction{

width:60%;

margin:60px auto;

background:white;

padding:40px;

border-radius:15px;

box-shadow:0 10px 20px rgba(0,0,0,.1);

}

.prediction input,
.prediction select{

width:100%;

padding:15px;

margin:15px 0;

border:1px solid #ccc;

border-radius:8px;

font-size:16px;

}

.prediction button{

background:#0B1F3A;

color:white;

padding:15px 30px;

border:none;

border-radius:8px;

cursor:pointer;

font-size:17px;

}

.prediction button:hover{

background:#F4C542;

color:#0B1F3A;

}

#message{

margin-top:20px;

font-weight:bold;

color:green;

}

.leaderboard{

width:80%;

margin:60px auto;

}

.leaderboard table{

width:100%;

border-collapse:collapse;

}

.leaderboard th,
.leaderboard td{

padding:15px;

border:1px solid #ddd;

text-align:center;

}

.leaderboard th{

background:#0B1F3A;

color:white;

}

/*==========================
BOUTIQUE
==========================*/

.products{

width:90%;

margin:60px auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.product-card{

background:white;

padding:20px;

border-radius:15px;

text-align:center;

box-shadow:0 8px 20px rgba(0,0,0,.1);

transition:.3s;

}

.product-card:hover{

transform:translateY(-10px);

}

.product-card img{

width:100%;

height:220px;

object-fit:cover;

border-radius:10px;

}

.product-card h3{

margin:20px 0 10px;

}

.product-card button{

background:#0B1F3A;

color:white;

padding:12px 25px;

border:none;

border-radius:8px;

cursor:pointer;

margin-top:15px;

}

.product-card button:hover{

background:#F4C542;

color:#0B1F3A;

}

.panier{

width:90%;

margin:50px auto;

background:white;

padding:30px;

border-radius:15px;

text-align:center;

box-shadow:0 8px 20px rgba(0,0,0,.1);

}

/*=========================
CONTACT
=========================*/

.contact-container{

width:90%;

margin:70px auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

}

.contact-info{

background:#0B1F3A;

color:white;

padding:40px;

border-radius:15px;

}

.contact-info h2{

margin-bottom:20px;

}

.contact-info p{

margin:20px 0;

line-height:28px;

}

.contact-form{

background:white;

padding:40px;

border-radius:15px;

box-shadow:0 10px 20px rgba(0,0,0,.1);

}

.contact-form input,
.contact-form textarea{

width:100%;

padding:15px;

margin-bottom:20px;

border:1px solid #ccc;

border-radius:8px;

font-size:16px;

}

.contact-form button{

background:#0B1F3A;

color:white;

padding:15px;

width:100%;

border:none;

border-radius:8px;

cursor:pointer;

font-size:17px;

}

.contact-form button:hover{

background:#F4C542;

color:#0B1F3A;

}

#confirmation{

margin-top:20px;

font-weight:bold;

color:green;

text-align:center;

}

/* ===== Badges des phases ===== */

.phase{

display:inline-block;

padding:8px 18px;

border-radius:25px;

font-size:14px;

font-weight:bold;

color:white;

margin-bottom:15px;

}

/* 16e de finale */

.seizieme{

background:#3498db;

}

/* Quart de finale */

.quart{

background:#f39c12;

}

/* Demi-finale */

.demi{

background:#9b59b6;

}

/* Finale */

.finale{

background:#e74c3c;

}

/* Match d'ouverture */

.ouverture{

background:#2ecc71;

}

.seizieme{
    background:#3498db;
    color:white;
}