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;
    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%;
}



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;
}

h6 {
    color: #4a3237;
}

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

.date h1 {
    display: flex;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif !important;
}

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;
}

.para a,
.p-runcolor a {
    color: #1E88C1;
    font-style: italic;
}

.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 {
    background-color: #344ea1;
    display: flex;
    justify-content: center;
    /* Centre le contenu global */
}

/* La div qui contient tout le contenu (Haut + Bas) */
.sépa {
    width: 100%;
    max-width: 1100px;
    /* Aligné avec ton contenu de page */
    display: flex;
    flex-direction: column;
}

.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;
    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;
    justify-content: center;
    /* LOGO À GAUCHE, RÉSEAUX À DROITE */
    align-items: center;
    padding-bottom: 20px;
    border-bottom: #95aed9 2px solid;
    /* La ligne prend maintenant toute la largeur */
    width: 100%;
    gap: 20%
}

/* Correction de la taille du logo dans le footer */
.logo1 {
    width: 300px;
    height: auto;
}

/* Alignement des icônes et des textes */
.insta,
.tiktok,
.facebook {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

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

footer .bas .contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* Espace les 3 blocs */
    width: 100%;
    /* Important pour l'espacement */
    gap: 20px;
    margin-bottom: 20px;
}

footer .bas .contact a {
    text-decoration: underline;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    margin: 0;
    /* Supprime les marges par défaut qui décalent tout */
    white-space: nowrap;
}

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 */


/* 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;
}

.parcours {
    font-weight: bold;
}

.logopartenaires {
    width: 100%;
    padding: 2rem 5%;
    text-align: center;
}

/* Le conteneur de la grille */
.svg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem 3vw;
    /* Ajout d'un peu d'espace vertical entre les lignes */
    margin: 0 auto;
    max-width: 1100px;
    /* Aligné sur le reste de ton site */
}

/* On cible chaque div de partenaire à l'intérieur de la grille */
.svg>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centre l'image ET le texte horizontalement */
    text-align: center;
}

.svg img {
    width: 100%;
    max-width: 200px;
    /* Garde une taille raisonnable */
    height: 120px;
    /* Force une hauteur pour que les logos soient alignés sur la même ligne */
    object-fit: contain;
    /* Évite de déformer les logos */
    filter: grayscale(100%);
    transition: filter 0.3s ease;
    margin-bottom: 1.5rem;
}

.svg img:hover {
    filter: grayscale(0%);
}

.desc-partenaire {
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 280px;
    /* Un peu plus large pour une meilleure lecture */
    margin: 0;
    font-family: 'Lato', sans-serif;
    color: #4a3237;
    /* Ou une couleur lisible sur ton fond crème */
}

/* --- Adaptabilité Mobile --- */
@media (max-width: 768px) {
    .svg {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .svg {
        grid-template-columns: 1fr;
        /* Une seule colonne sur petit téléphone */
    }

    .partenaire7 {
        grid-column: span 2;
        /* Le dernier logo prend toute la largeur sur mobile */
    }
}

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

/*MEDIA QUERIES POUR MOBILE*/

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


@media (max-width: 768px) {

    /* 1. BLOQUE LE DÉBORDEMENT ET FORCE LE FOND CRÈME (Uniquement sur mobile) */
    html,
    body {
        max-width: 100vw;
        overflow-x: hidden;
        background-color: #fff3e6;
        margin: 0;
    }

    /* Force les éléments à ne pas dépasser de l'écran */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* 2. DÉCOLLE LE TEXTE DES BORDS DE L'ÉCRAN */
    .accueil,
    .Ekiden,
    .Histoire,
    .Partenaires,
    .Résultat {
        padding: 0 15px;
    }

    /* 3. EMPÊCHE LA CARTE ET LES LOGOS DE CASSER LA LARGEUR */
    .logos-partenaires img,
    .svg img {
        max-width: 120px;
    }

    .Ekiden .parcours iframe {
        width: 100% !important;
        height: 350px !important;
    }

    body {
        padding: 0;
    }

    .accueil,
    .Ekiden,
    .Histoire,
    .Partenaires,
    .Résultat {
        padding: 0;
    }

    /* Padding intérieur sur le contenu */
    .accueil .p-img,
    .Ekiden .Infos-pratiques,
    .Ekiden .parcours,
    .Histoire .p-histoire {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* -------------------------------------
       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;
        align-items: center;
    }

    .accueil .para {
        padding-left: 1rem;
        padding-right: 1rem;
        margin: 0 auto;
    }

    .p-runcolor,
    .animations {
        text-align: center;
    }

    /* Ajustement de la largeur de la vidéo */
    .container-video {
        align-items: center;
    }

    .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;
    }

    #countdown {
        flex-wrap: wrap;
        /* Permet aux éléments de passer à la ligne si besoin */
        gap: 10px;
        /* On réduit l'espace entre les chiffres */
        justify-content: center;
    }

    .time-segment span {
        font-size: 1.85rem;
        /* On réduit la taille des chiffres */
    }

    .time-segment p {
        font-size: 0.6rem;
        /* On réduit la taille des textes (jours, heures...) */
    }

    /* -------------------------------------
       PAGE EKIDEN
    ------------------------------------- */
    /* Empilement vertical des boutons et prise de toute la largeur */
    .button {
        flex-direction: column;
        margin-left: 5rem;
        margin-right: 5rem;
        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;
    }

    .Ekiden .titre-infos h2,
    .Ekiden .parcours h2 {
        padding-left: 0 !important;
        /* Supprime le décalage de 5.3em qui cause le débordement */
        text-align: center;
        font-size: 2rem;
        width: 100%;
    }

    /* -------------------------------------
       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;
    }

    @media (max-width: 768px) {
        .svg {
            grid-template-columns: 1fr;
            /* Une seule colonne sur mobile */
            gap: 3rem;
            /* Espace vertical entre chaque partenaire */
            padding: 0 20px;
        }

        .svg>div {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* Centre l'image et le texte */
        }

        .desc-partenaire {
            max-width: 90% !important;
            /* Le texte occupe presque toute la largeur */
            font-size: 1rem;
            text-align: center;
        }

        .svg img {
            max-width: 150px;
            /* Logos un peu plus petits sur mobile */
            height: auto;
        }
    }

}

/* -------------------------------------
       CORRECTION DÉCALAGE HORIZONTAL
    ------------------------------------- */
* {
    box-sizing: border-box;
    /* Force le calcul des bordures à l'intérieur de la largeur */
}

html,
body {
    width: 100%;
    overflow-x: hidden;
    /* Empêche le scroll horizontal parasite */
    margin: 0;
    padding: 0;
}


@media (max-width: 768px) {

    .accueil p,
    .p-histoire,
    .Ekiden .parcours p,
    .accueil ul li {
        padding: 1.5rem !important;
        /* Ajoute une marge interne de sécurité */
        font-size: 1.1rem ;
        /* Taille de lecture plus adaptée au mobile */
        text-align: left;
        /* Parfois plus lisible que "justify" sur mobile */
    }

    h6 {
        padding: 1rem !important;
    }

    .info {
        padding-right: 1rem;
        padding-left: 1rem;
    }
    
}



/* --- RESPONSIVE PARTENAIRES (MOBILE) --- */
@media (max-width: 768px) {
    /* On transforme la grille en une liste verticale centrée */
    .svg {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4rem !important; /* Espace généreux entre chaque partenaire */
        padding: 0 1.5rem !important; /* Marge de sécurité sur les côtés */
        width: 100% !important;
        margin-top: 3rem !important;
    }

    /* On cible chaque bloc de partenaire (partenaire1, partenaire2, etc.) */
    .svg > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centre l'image ET le texte par rapport au centre de l'écran */
        width: 100% !important;
        max-width: 350px !important; /* Empêche le texte de devenir trop large sur petite tablette */
    }

    /* Les logos : on les aligne sur une hauteur commune pour la propreté visuelle */
    .svg img {
        height: 100px !important;
        width: auto !important;
        max-width: 180px !important;
        object-fit: contain !important; /* Garde les proportions sans déformer */
        margin-bottom: 1.5rem !important;
        filter: grayscale(0%) !important; /* Optionnel : affiche les logos en couleur sur mobile pour plus de peps */
    }

    /* Les descriptions */
    .desc-partenaire {
        width: 100% !important;
        text-align: center !important; /* Force le texte au milieu */
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}