body {
    padding: 0;
    margin: 0;
    background-color: #fff3e6;
    overflow-x: hidden;
 
}


.accueil p {
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    line-height: 1.6;
}

.accueil ul, .accueil li {
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 5px;
    margin-top: 0;
}

.accueil ul{
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 0px;
}

.accueil h6 {
    font-family: 'Lato', sans-serif;
    font-size: 2rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    line-height: 1.6;
}

.accueil .p-img .para .équipe {
    width: 50%;
}

.accueil .p-img .para{

}

header {
    background-color: #344ea1;
}

.header-accueil {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem 2rem;
}



nav {
    background-color: #344ea1;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-left: 2rem;
    padding-right: 3rem;
    padding-top: 2vw;
    padding-bottom: 2vw;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    gap: 7rem;
    border-bottom: #ffffff solid;
}



nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 2rem;
}

.date {
    display: flex;
    justify-content: center;
}

h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 5rem;
    font-weight: 400;
    color: #f05453;
    position: relative;
    display: inline-block;
}

h1::after {
    content: "";
    position: absolute;
    bottom: -2vh;
    left: 15%;
    width: 70%;
    height: 0.5rem;
    background-color: #f05453;
}

.page {
    color: #1b263b;
}

.p-histoire {
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    line-height: 1.6;
}

p {
    color: #95aed9;
    margin-bottom: 1.2rem;
    text-align: justify;
}

h2 {
    font-size: 2.2rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
    color: #f26e68;
    font-family: 'lato', sans-serif;
}


h3 {
    font-size: 1.8rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: #4a3237;
    font-family: 'lato', sans-serif;
}

.photos-accueil {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 3rem auto;
    max-width: 1000px;
    padding: 0 2rem;
}

.photos-accueil img {
    width: 30%;
    object-fit: cover;
    border-radius: 8px;
}

.button {
    display: flex;
    justify-content: space-between;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 4rem;
}

.button-page {
    background-color: #344ea1;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 1rem 2rem;
    font-family: 'lato', sans-serif;
    font-size: 1rem;
}

button {
    background-color: #49be97;
    color: black;
    border: none;
    border-radius: 5px;
    padding: 1rem 2rem;
    font-family: 'lato', sans-serif;
    font-size: 1rem;
}

button:hover {
    background-color: #344ea1;
    color: white;
    transition: 0.4s ease;
}

.Histoire .p-histoire a {
    color: #1E88C1;
}

.Ekiden .Infos-pratiques {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-direction: row;
    padding-left: 16rem;
    padding-right: 16rem;
}

.Ekiden .titre-infos h2 {
    font-family: 'Bebas Neue', sans-serif;
    padding-left: 5.3em;
    font-size: 3em;
    font-weight: 300;
    padding-bottom: 20px;
}

.Ekiden .Infos-pratiques div {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
}

.Ekiden h3 {
    font-size: 1.3em;
    font-family: 'Roboto Condensed', sans-serif;
    margin-top: none;
}

.Ekiden .Infos-pratiques p,
ul li {
    max-width: 12rem;
    justify-content: center;
    color: #95aed9;
    font-family: 'Lato', sans-serif;
    text-align: center;
}

.Ekiden .règlement a {
    color: #f9743b;
    font-family: 'roboto', sans-serif;
    text-decoration: underline;
    font-weight: bold;
}

.Ekiden .règlement {
    display: flex;
    margin-top: 2rem;
    padding-left: 16rem;
    gap: 1em;
    align-items: center;
    justify-content: flex-start;
}

.Ekiden .Infos-pratiques div img {
    width: 50px;
    height: 50px;
}

.Ekiden .Infos-pratiques div .Ravitaillement p,
ul,
li {
    margin-bottom: 0;
    margin-top: 0;
}

.Ekiden .règlement img {
    width: 35px;
    height: 35px;

}


.Ekiden .info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    margin-top: 2rem;
    font-family: 'Lato', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
}

.Ekiden .info a {
    color: #f05453;
    text-decoration: underline;
}

.Ekiden .info p {
    color: #f05453;
}

.Ekiden .info img {
    width: 38px;
    height: 38px;

}

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    background-color: #344ea1;

}

.Ekiden .parcours {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-top: 2rem;
    background-color: #c9c9c9;
    overflow-x: hidden;

}

.Ekiden .parcours p,
.Ekiden .parcours a {
    color: #135e74;
    font-family: 'roboto', sans-serif;
    padding-left: 16em;
}

.Ekiden .parcours h2 {
    padding-left: 5.3em;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3em;
    font-weight: 300;
    padding-bottom: 05px;
}



.Ekiden .commune {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: 50% 35%;
    padding-top: 30px;

}

.Ekiden .parcours .map {
    width: 100%;
    height: 430px;
    /* La hauteur que tu veux afficher */
    overflow: hidden;
    /* C'est ça qui va couper le bandeau noir */
    padding: 10px;
    box-sizing: border-box;
}

.Ekiden .parcours iframe {
    width: 100%;
    height: 480px;
    /* Plus grand que le conteneur pour compenser le décalage */
    margin-top: -50px;
    /* Fait remonter le bandeau noir hors de la zone visible */
    border: none;
}

footer .réseaux {
    display: flex;
    flex-direction: column;
    padding-top: 25px;
    gap: 8px;
}

footer .réseaux .insta img {
    width: 30px;
    height: 30px;
}

footer .réseaux .facebook img {
    width: 30px;
    height: 30px;
}

footer .réseaux .tiktok img {
    width: 40px;
    height: 40px;
}

.insta,
.tiktok,
.facebook {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    ;
}

footer .réseaux .insta a,
footer .réseaux .facebook a,
footer .réseaux .tiktok a {
    color: #95aed9;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
}

footer .haut {
    display: flex;
    flex-direction: row;
    gap: 50px;
    border-bottom: #95aed9 2px solid;
}

footer .bas {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 10px;
    color: #95aed9;
    font-family: 'Lato', sans-serif;
    font-size: 0.9rem;
}

footer .bas .contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20vw;
    padding-top: 20px;
}

footer .bas .contact a {
    text-decoration: underline;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
}

footer .bas .mentions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding-top: 10px;
}

footer a {
    color: #95aed9;
}

.accueil .p-img {
    display: flex;
    flex-direction: column;  /* temporaire */
    padding: 20px;
    align-items: center;
    justify-content: center;
}

.accueil .p-img p {
    color: #95aed9;
    font-family: 'Lato', sans-serif;
    text-align: center;
    padding-right: 20px;
}

.accueil .affiche {
    width: 100%;
    max-width: 350px;
    display: block;
    margin: 2rem auto;
    border-radius: 8px;
}

.accueil .para {
    max-width: 1100px;
    color: #95aed9;
    font-family: 'Lato', sans-serif;
    text-align: center;
    
}


/* --- SECTION SLIDER COMPLET --- */
.slider-container {
    position: relative;
    max-width: 800px;
    /* Largeur fixe plus simple pour commencer */
    height: 450px;
    /* Hauteur définie pour voir les images */
    margin: 50px auto;
    /* Espace avec le texte et le footer */
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    background-color: #eee;
    /* Fond gris si l'image charge mal */
}

.slider {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.slider img {
    min-width: 100%;
    /* Chaque image prend 100% du container */
    height: 100%;
    object-fit: cover;
    /* Recadre proprement sans déformer */
}

/* Boutons de navigation */
.slider-container button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 20px;
    z-index: 10;
    transition: 0.3s;
    border-radius: 5px;
}

.slider-container button:hover {
    background: #f05453;
    /* Rappel de ta couleur h1 */
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* Points indicateurs */
.dots {
    position: absolute;
    bottom: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 10;
}

.dot {
    height: 12px;
    width: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.dot.active {
    background-color: #fff;
    transform: scale(1.3);
}

/* Correction Footer pour pas qu'il remonte */
footer {
    clear: both;
    margin-top: 60px;
}

.container-video {
    display: flex;
    flex-direction: column; /* FORCE LE TITRE AU-DESSUS DE LA VIDÉO */
    align-items: center;    /* CENTRE LE TITRE ET LA VIDÉO */
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
}

.container-video h2 {
    /* Tu peux ajuster le style du titre ici */
    margin-bottom: 20px;    /* Espace entre le titre et la vidéo */
    text-align: center;
}

.container-video video {
    width: 50%;             /* Garde la largeur réduite */
    max-width: 650px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.countdown-container {
    text-align: center;
    padding: 2rem;
    padding-top: 0;
    margin: 20px 0;
}

.countdown-container h2 {
    padding-left: 0 !important; 
    margin-top: 0;
}

#countdown {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-family: 'Bebas Neue', sans-serif;
}

.time-segment {
    display: flex;
    flex-direction: column;
}

.time-segment span {
    font-size: 2rem;
    color: #f05453; 
}

.time-segment p {
    color: white;
    text-align: center;
    font-size: 0.8rem;
    margin: 0;
}

.Résultat p {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 2rem;
    color: #344ea1;
    font-size: 50px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
}

.partenaires-container {
    width: 100%;
    text-align: center;
    margin: 50px 0; /* Espace entre la vidéo et le footer */
    padding: 0 2rem;
}

.partenaires-container h2 {
    margin-bottom: 30px;
}

.logos-partenaires {
    display: flex;
    justify-content: center; /* Centre le groupe d'images */
    align-items: center;     /* Aligne les logos sur la même ligne */
    gap: 4rem;               /* Espace entre chaque logo */
    flex-wrap: wrap;         /* Permet de passer à la ligne sur petit écran */
}

.logos-partenaires img {
    width: 150px;            /* Taille fixe pour l'alignement */
                /* Garde les proportions */
}

.logo{
    width: 300px;
}
.logopartenaires {
    width: 100%;
    padding: 2rem 5%; /* Valeur relative pour les côtés */
    text-align: center;
}

/* La grille qui contient les logos */
.svg {
    display: grid;
    /* On crée 3 colonnes de largeur égale (fractionnelle) */
    grid-template-columns: repeat(3, 1fr);
    /* Espacement relatif entre les logos */
    gap: 3vw; 
    max-width: 80rem; /* Limite la largeur max en rem */
    margin: 0 auto;
    align-items: center;
}

/* Style individuel des blocs partenaires */
.svg > div {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Style des images SVG */
.svg img {
    width: 100%;      /* Prend toute la place de sa colonne */
    height: auto;
    max-width: 12rem; /* Évite que le logo soit trop grand */
    object-fit: contain;
    filter: grayscale(100%); /* Optionnel : logos en gris */
    transition: filter 0.3s ease;
}

.svg img:hover {
    filter: grayscale(0%); /* Le logo reprend ses couleurs au survol */
}

/* Centrage du 7ème logo sur la dernière ligne */
.partenaire7 {
    grid-column: 2; /* Place le 7ème élément dans la colonne du milieu (2) */
}

/* --- Adaptabilité Mobile (Responsive) --- */
@media (max-width: 768px) {
    .svg {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablette */
    }
    .partenaire7 {
        grid-column: span 2; /* Le dernier logo prend toute la largeur sur mobile */
    }
}

/*  -------------------------------------------------------------------------------------------------------- */

   /*MEDIA QUERIES POUR MOBILE*/

/*  -------------------------------------------------------------------------------------------------------- */


@media (max-width: 768px) {
    /* -------------------------------------
       TYPOGRAPHIE GLOBALE
    ------------------------------------- */
    /* Réduction des titres principaux pour éviter les débordements */
    h1 {
        font-size: 3rem;
    }
    
    h2 {
        font-size: 1.8rem;
        text-align: center;
        padding-left: 0 !important; /* Écrase les paddings spécifiques (ex: Ekiden) */
    }

    /* -------------------------------------
       HEADER & NAVIGATION
    ------------------------------------- */
    /* Centrage du logo et de la navigation, réduction de l'espacement */
    .header-accueil {
        justify-content: center;
        padding: 1rem;
    }
    
    .logo {
        width: 200px;
        margin-bottom: 1rem;
    }

    nav {
        gap: 1rem;
        justify-content: center;
        padding: 1rem 0;
    }

    nav a {
        font-size: 1.2rem;
    }

    /* -------------------------------------
       PAGE ACCUEIL
    ------------------------------------- */
    /* Passage du bloc de présentation en colonne et annulation de la marge gauche */
    .accueil .p-img {
        flex-direction: column;
        padding: 1rem;
    }

    .accueil .para {
        padding-left: 0;
        padding-right: 0;
    }

    /* Ajustement de la largeur de la vidéo */
    .container-video video {
        width: 90%; 
    }

    /* Réduction de la hauteur du slider pour l'adapter aux écrans mobiles */
    .slider-container {
        height: 250px;
        margin: 2rem 1rem;
    }

    /* -------------------------------------
       PAGE EKIDEN
    ------------------------------------- */
    /* Empilement vertical des boutons et prise de toute la largeur */
    .button {
        flex-direction: column;
        margin-left: 1rem;
        margin-right: 1rem;
        gap: 1rem;
    }

    .button-page, button {
        width: 100%;
    }

    /* Suppression des immenses paddings latéraux et passage en colonne */
    .Ekiden .Infos-pratiques {
        flex-direction: column;
        padding-left: 1rem;
        padding-right: 1rem;
        gap: 2.5rem;
    }

    .Ekiden .règlement {
        padding-left: 1rem;
        justify-content: center;
        flex-direction: column;
    }

    .Ekiden .parcours p, 
    .Ekiden .parcours a {
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: center;
        display: block;
    }

    /* -------------------------------------
       PAGE HISTOIRE
    ------------------------------------- */
    /* Affichage des images de l'histoire les unes sous les autres */
    .photos-accueil {
        flex-direction: column;
        align-items: center;
    }

    .photos-accueil img {
        width: 100%;
    }

    /* -------------------------------------
       RÉSULTATS
    ------------------------------------- */
    /* Réduction du texte qui était à 50px */
    .Résultat p {
        font-size: 1.5rem;
        text-align: center;
    }

    /* -------------------------------------
       FOOTER & PARTENAIRES
    ------------------------------------- */
    /* Empilement des sections du footer et centrage */
    footer .haut {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        text-align: center;
    }

    footer .bas .contact {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    /* Espacement réduit pour les logos partenaires */
    .logos-partenaires {
        gap: 2rem;
    }
}

/* -------------------------------------
       CORRECTION DÉCALAGE HORIZONTAL
    ------------------------------------- */
    * {
        box-sizing: border-box;
    }

    html, body {
        width: 100%;
        overflow-x: hidden;
    }