body {
    background-color: #000;
    /* background-image, background-size, etc. sont maintenant gérés par les vidéos */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Aligne le contenu en haut pour laisser de la place aux vidéos */
    min-height: 100vh;
    position: relative; /* Nécessaire pour positionner les éléments enfants */
    overflow-x: hidden; /* Empêche le défilement horizontal */
}

.video-background {
    position: fixed; /* Fixe les vidéos en arrière-plan */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Cache tout ce qui dépasse */
    z-index: -1; /* Place les vidéos derrière le contenu textuel */
    display: flex; /* Pour disposer les vidéos côte à côte ou les unes sur les autres */
}

.video-background iframe {
    position: absolute;
    /* Ancien code: width: 100%; height: 100%; */
    
    /* === NOUVELLES MODIFICATIONS ICI === */
    width: 180vw; /* Rend la vidéo 180% de la largeur de la fenêtre (viewport width) */
    height: 180vh; /* Rend la vidéo 180% de la hauteur de la fenêtre (viewport height) */
    /* Ces valeurs garantissent que la vidéo est toujours plus grande que l'écran */

    top: 50px; /* Centre verticalement */
    left: 50px; /* Centre horizontalement */
    transform: translate(-50%, -50%); /* Déplace la vidéo pour un centrage parfait */
    /* === FIN DES NOUVELLES MODIFICATIONS === */

    object-fit: cover; /* S'assure que la vidéo couvre sans déformer */
    opacity: 0.6;
    pointer-events: none;
    z-index: -1; /* Assure que les iframes sont en arrière-plan */
}

/* Pour que les vidéos se suivent de droite à gauche, tu pourrais avoir besoin d'un peu de JS
   ou de jouer avec les positions absolues de chaque iframe et leur z-index.
   Pour l'instant, elles sont superposées. Tu peux les positionner manuellement ou avec un script. */
.video-background iframe:nth-child(1) {
    /* Exemple: la première vidéo */
    left: 0%;
}
.video-background iframe:nth-child(2) {
    /* Exemple: la deuxième vidéo, pour qu'elle s'affiche à côté ou après */
    /* left: 100%; */ /* Si tu veux qu'elles se suivent sur une très grande largeur */
    /* display: none; */ /* Si tu veux n'en afficher qu'une à la fois et switcher avec JS */
}


.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end; /* Aligne le h1 à droite */
    align-items: flex-start; /* Aligne le h1 en haut */
    padding: 20px;
    box-sizing: border-box;
    z-index: 1; /* S'assure que le h1 est au-dessus des vidéos */
}

h1 {
    font-family: 'VT323', sans-serif;
    color: #ffffff;
    font-size: 5em;
    margin: 0; /* Supprime la marge par défaut du h1 */
}

.content-container {
    position: relative; /* Pour que le contenu soit au-dessus des vidéos */
    z-index: 2; /* S'assure que le contenu est au-dessus du titre et des vidéos */
    display: flex;
    flex-direction: column; /* Organise le contenu en colonne */
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 900px; /* Réduit la largeur pour mieux encadrer le texte */
    margin-top: 150px; /* Espace pour le titre */
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.7); /* Fond semi-transparent pour le texte */
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.text-content {
    text-align: justify;
    padding: 20px;
}

h2 {
    color: #ffffff;
    font-size: 2.5em; /* Ajuste la taille */
    text-align: center;
    margin-bottom: 20px;
}

p, ul, a {
    color: #ffffff;
    font-size: 1.2em; /* Ajuste la taille */
    text-align: justify;
    line-height: 1.6;
}

a {
    color: #00a6ff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Style pour le lien neocities en bas */
body > p { /* Cible spécifiquement le paragraphe en dehors du content-container */
    position: relative;
    z-index: 2;
    color: #ffffff;
    margin-top: 50px; /* Ajuste l'espacement */
}

body > img[alt="Neocities"] { /* Cible spécifiquement l'image en dehors du content-container */
    position: relative;
    z-index: 2;
    margin-top: 20px;
    max-width: 100px; /* Ajuste la taille si nécessaire */
}