/* style.css - Theme clair et moderne (Style 1) */
* { box-sizing: border-box; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: #f3f6f9;
    color: #222;
    margin: 0;
    padding: 0;
}
.site-header .banner {
	background-image: url('../img/banniere.jpg');
    background-size: contain;      /* L'image entière sera visible */
    background-repeat: no-repeat;  /* Empêche la répétition */
    background-position: center;   /* Centre l'image */

    width: 100%;
    height: 540px;                /* <- Hauteur fixe correspondant à ton image */
    
    display: flex;                 
    align-items: center;           
    justify-content: center;       
    
    padding: 0;                    /* Retire le padding qui réduit l'espace visuel */
    box-sizing: border-box;
}
.banner-logo img {
    max-width: 620px;      /* taille optimale du logo */
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
    transition: transform 0.25s ease;
}
.banner-logo img:hover {
    transform: scale(1.05);
}
@media (max-width: 1200px) {
    .site-header .banner {
        height: 420px;  /* adapte la hauteur pour écrans plus petits */
    }
}
@media (max-width: 768px) {
    .site-header .banner {
        height: 320px;
    }
}
.logo-text {
    font-size: 28px;
    color: #ffffff;
    text-decoration: none;
    background: rgba(0,0,0,0.35);
    padding: 10px 14px;
    border-radius: 8px;
}
.navbar {
    background: #ffffff;
    border-bottom: 1px solid #e6e9ee;
    display: flex;
    justify-content: center;
    padding: 10px 20px;
}
.nav-links { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; align-items: center; }
.nav-links li { position: relative; }
.nav-links a { color: #333; text-decoration: none; padding: 8px 10px; display: inline-block; }
.nav-links a:hover { color: #0073e6; }
.dropdown { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #eee; box-shadow: 0 6px 18px rgba(0,0,0,0.06); border-radius: 6px; padding: 6px 0; min-width: 200px; z-index: 50; }
.dropdown li { white-space: nowrap; }
.has-dropdown:hover .dropdown { display: block; }

.content { max-width: 1100px; margin: 28px auto; padding: 0 20px 60px; }

/* Nation / classes grid */
.nation { background: #fff; padding: 26px; border-radius: 12px; margin-bottom: 28px; box-shadow: 0 6px 22px rgba(0,0,0,0.03); }
.nation h2 { margin-top: 0; text-align: center; }
.dirigeant { text-align: center; color: #666; font-style: italic; margin-bottom: 12px; }
.classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; margin-top: 18px; }
.classe { text-align: center; background: #fbfdff; border-radius: 10px; padding: 12px; }
.img-wrapper { width: 100%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background: #f0f4f8; border-radius: 8px; overflow: hidden; }
.classe img { width: 100%; height: 100%; object-fit: contain; }

/* News */
.news { display: grid; gap: 12px; }
.news-item { background: #fff; padding: 16px; border-radius: 10px; border-left: 4px solid #0073e6; }
.news-item h3 { margin: 0 0 8px 0; }
.meta { color: #666; font-size: 0.9rem; margin-bottom: 10px; }

/* Online table */
.table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.03); }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid #f1f3f5; text-align: left; }
.table th { background: #fafcff; font-weight: 600; }

/* Footer */
.site-footer { background: #ffffff; border-top: 1px solid #e6e9ee; padding: 18px 20px; text-align: center; margin-top: 30px; }