body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
}

header {
    background-color: #f8f9fa;
    text-align: center;
    padding: 20px;
}

nav {
    background-color: #343a40;
}

nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px 0;
}

nav ul li {
    font-size: 1em;
    margin: 0 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 15px 0;
    display: block;
}

nav ul li a:hover {
    text-decoration: underline;
}

section {
    padding: 20px;
    margin: 20px;
}

.banner {
    width: 100%;
    height: 250px;
    background: url('/themes/images/banner.jpg') center/cover no-repeat;
    border-radius: 50px 50px 50px 50px;
    overflow: hidden;
}

@media (min-width: 2501px) {
    .banner {
        /*height: 220px;*/
        /*height: 160px;*/
        background-size:60% auto;
        border-radius: 40px 40px 40px 40px;
    }
}

@media (max-width: 2500px) {
    .banner {
        /*height: 220px;*/
        /*height: 160px;*/
        background-size:80% auto;
        border-radius: 40px 40px 40px 40px;
    }
}

@media (max-width: 2100px) {
    .banner {
        /*height: 220px;*/
        /*height: 160px;*/
        background-size: 100% auto;
        border-radius: 40px 40px 40px 40px;
    }
}

@media (max-width: 1700px) {
    .banner {
        /*height: 220px;*/
        /*height: 160px;*/
        background-size: 120% auto;
        border-radius: 40px 40px 40px 40px;
    }
}

@media (max-width: 1430px) {
    .banner {
        /*height: 180px;*/
        background-size: 140% auto;
        /*background-position: center bottom;*/
        border-radius: 30px 30px 30px 30px;
    }
}

@media (max-width: 1250px) {
    .banner {
        /*height: 180px;*/
        background-size: 160% auto;
        /*background-position: center bottom;*/
        border-radius: 30px 30px 30px 30px;
    }
}

@media (max-width: 1080px) {
    .banner {
        /*height: 180px;*/
        background-size: 180% auto;
        /*background-position: center bottom;*/
        border-radius: 30px 30px 30px 30px;
    }
}

@media (max-width: 950px) {
    .banner {
        /*height: 180px;*/
        background-size: 220% auto;
        /*background-position: center bottom;*/
        border-radius: 30px 30px 30px 30px;
    }
}

@media (max-width: 830px) {
    .banner {
        /*height: 180px;*/
        background-size: 240% auto;
        /*background-position: center bottom;*/
        border-radius: 30px 30px 30px 30px;
    }
}

@media (max-width: 740px) {
    .banner {
        /*height: 180px;*/
        background-size: 260% auto;
        /*background-position: center bottom;*/
        border-radius: 30px 30px 30px 30px;
    }
}

@media (max-width: 700px) {
    .banner {
        /*height: 180px;*/
        background-size: 280% auto;
        /*background-position: center bottom;*/
        border-radius: 30px 30px 30px 30px;
    }
}

@media (max-width: 660px) {
    .banner {
        /*height: 180px;*/
        background-size: 300% auto;
        /*background-position: center bottom;*/
        border-radius: 30px 30px 30px 30px;
    }
}

@media (max-width: 630px) {
    .banner {
        /*height: 180px;*/
        background-size: 320% auto;
        /*background-position: center bottom;*/
        border-radius: 30px 30px 30px 30px;
    }
}

@media (max-width: 570px) {
    .banner {
        /*height: 180px;*/
        background-size: 340% auto;
        /*background-position: center bottom;*/
        border-radius: 30px 30px 30px 30px;
    }
}

@media (max-width: 540px) {
    .banner {
        /*height: 180px;*/
        background-size: 360% auto;
        /*background-position: center bottom;*/
        border-radius: 30px 30px 30px 30px;
    }
}

*/

.video-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centre les vidéos horizontalement */
    align-items: center; /* Centre verticalement si nécessaire */
    gap: 20px;
}

.video-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre la vidéo et le texte en colonne */
    width: 100%;
    max-width: 560px;
}

.video-item iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.video-comment {
    text-align: center;
    margin-top: 10px;
}

footer {
    background-color: #f8f9fa;
    text-align: center;
    padding: 20px;
}

.social-media a {
    margin: 0 10px;
    text-decoration: none;
    color: #343a40;
}

.social-media a:hover {
    text-decoration: underline;
}

.word-cloud {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
    font-size: 1.2em;
    text-align: center;
    color: #555;
}

.word-cloud span {
    display: inline-block;
    margin: 5px;
}

.word-cloud span:nth-child(odd) {
    font-size: 1.5em;
}

.word-cloud span:nth-child(even) {
    font-size: 1.1em;
}

.social-media {
    margin-top: 40px;
    text-align: center;
}

.social-media a {
    margin: 0 10px;
    display: inline-block;
}

.social-media img {
    width: 40px;
    height: 40px;
}