:root {
    /* couleurs*/
    --fond-orange:  rgb(244, 194, 108);
    --fond-orange-foncé:  rgb(246, 182, 72);
    --couleur-rouge: rgb(200, 1, 1);
    /*tailles*/
    --taille-5: clamp(5px,0.4vw,5px);
    --taille-10: clamp(8px,0.7vw,10px);
    --taille-15: clamp(10px,1vw,15px);
    --taille-20: clamp(12px,1.3vw,20px);
    --taille-25: clamp(15px,1.6vw,25px);
    --taille-30: clamp(18px,2vw,30px);
    --taille-35: clamp(22px,2.3vw,35px);
    --taille-40: clamp(25px,2.6vw,40px);
    --taille-45: clamp(30px,3vw,45px);
    --taille-50: clamp(32px,3.3vw,50px);
    --taille-55: clamp(35px,3.6vw,55px);
    --taille-60: clamp(38px,4vw,60px);
    --taille-65: clamp(42px,4.3vw,65px);
    --taille-70: clamp(45px,4.6vw,70px);
    --taille-75: clamp(50px,5vw,75px);
    --taille-80: clamp(52px,5.3vw,80px);
    --taille-85: clamp(55px,5.6vw,85px);
    --taille-90: clamp(60px,6vw,90px);
    --taille-95: clamp(62px,6.3vw,95px);
    --taille-100: clamp(65px,6.6vw,100px);
    --taille-105: clamp(70px,7vw,105px);
    --taille-110: clamp(72px,7.3vw,110px);
    --taille-115: clamp(75px,7.6vw,115px);
    --taille-120: clamp(80px,8vw,120px);
    --taille-125: clamp(82px,8.3vw,125px);
    --taille-130: clamp(85px,8.6vw,130px);
    --taille-135: clamp(90px,9vw,135px);
    --taille-140: clamp(92px,9.3vw,140px);
    --taille-145: clamp(95px,9.6vw,145px);
    --taille-150: clamp(100px,10vw,150px);
    --taille-200: clamp(138px,13vw,200px);
    --taille-150: clamp(100px, 10vw, 150px);
    --taille-175: clamp(120px, 11.5vw, 175px);
    --taille-200: clamp(130px, 13vw, 200px);
    --taille-225: clamp(145px, 14.5vw, 225px);
    --taille-250: clamp(160px, 16vw, 250px);
    --taille-275: clamp(175px, 17.5vw, 275px);
    --taille-280: clamp(180px, 18vw, 280px);
    --taille-300: clamp(190px, 19vw, 300px);
    --taille-320: clamp(200px, 20vw, 320px);
    --taille-350: clamp(220px, 22vw, 350px);
    --taille-375: clamp(240px, 23.5vw, 375px);
    --taille-400: clamp(250px, 25vw, 400px);
    --taille-450: clamp(280px, 28vw, 450px);
    --taille-500: clamp(320px, 32vw, 500px);
    --taille-550: clamp(350px, 35vw, 550px);
    --taille-600: clamp(380px, 38vw, 600px);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 100%;
}
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}
main {
    flex: 1;
    padding-top: var(--taille-120);
}

/*tous les liens ne sont plus soulignés*/
a {
    text-decoration: none;
    color: black;
}


.bouton-inscription {
    background: var(--fond-orange-foncé);
    color: black;
    padding: var(--taille-10) var(--taille-20);
    border-radius: var(--taille-10);
    font-weight: bold;
    margin-top: var(--taille-10);
    transition: 0.3s;
    font-size: var(20);
    border: 2px solid red;

    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--taille-10);
}
.bouton-inscription:hover {
    background: var(--fond-orange-foncé);
    color: var(--couleur-rouge);
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!en-tête!!!!!!!!!!!!! */
.en-tete {
    display: flex;
    justify-content: space-between;
    position: fixed;
    align-items: center;
    justify-content: space-between;
    background: var(--fond-orange);
    font-size: var(--taille-20);
    height: var(--taille-120);
    top: 0;
    left: 0;
    right: 0;

    padding: 0 var(--taille-30);
    z-index: 1000;
}
.partie-gauche {
    display: flex;
    align-items: center;
    gap: var(--taille-40);
}
.image-logo {
    position: relative;
    display: block;
    height: var(--taille-120);
    width: auto;
}
.groupe-menu {
    display: flex;
    list-style: none;
    gap: var(--taille-30);
    align-items: center;
    font-family: "Antonio", sans-serif;
    font-weight: bold;
}
.groupe-menu.actif{
    display:flex;
    position:absolute;
    top:100%;
    right:0;
    flex-direction:column;
    background:var(--fond-orange);
}
.groupe-menu a {
    display: flex;
    align-items: center;
    gap: var(--taille-5);
}
.menu-complet {
    position: relative;
}

/* taille et position des icones*/
.icone {
    width: var(--taille-20);
    height: var(--taille-20);
    margin-right: var(--taille-5);
}
.sous-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    background: var(--fond-orange);
    padding: var(--taille-15);
    min-width: var(--taille-200);
    z-index: 1000;
    font-size: var(--taille-15);
    line-height: 3;
}
.sous-menu li{
    margin-bottom: var(--taille-10);
}
.sous-menu li:last-child {
    margin-bottom: 0;
}
.menu-complet:hover .sous-menu {
    display: block;
}
#bouton-inscription1 {
    font-size: var(--taille-20);
    margin-right: var(--taille-5);
}

.bouton-traits {
    display: none;
    background: none;
    border: none;
    font-size: var(--taille-35);
    cursor: pointer;
}
.bouton-traits img {
    width: var(--taille-30);
    height: var(--taille-30);
    max-width: 100%;
    max-height: 100%;
    display: block;
}
/* Les sous-menus sont fermés */
.sous-menu{
    display:none;
}
/* Sous-menu ouvert */
.menu-complet.ouvert .sous-menu{
    display:block;
}
/* ===================== */
/* TABLETTE */
@media (max-width:1024px){
.en-tete{
    padding:0 20px;
}
.image-logo{
    height:90px;
}
.groupe-menu{
    gap:20px;
    background: var(--fond-orange-foncé);
}
.groupe-menu a{
    font-size:16px;
}
#bouton-inscription1{
    display:none;
}
}
/* ===================== */
/* TELEPHONE */
/* ===================== */

@media (max-width:768px){
.en-tete{
    height:90px;
    padding:0 20px;
}
main{
    padding-top:90px;
}
.image-logo{
    height:75px;
}
/* Bouton hamburger */
.bouton-traits{
    display:flex;
    align-items:center;
    justify-content:center;
    width:45px;
    height:45px;
    z-index:2001;
}
/* Menu */
.groupe-menu{
    position:fixed;
    top:90px;
    left:-280px;
    width:260px;
    height:calc(100vh - 90px);
    background:var(--fond-orange-foncé);
    flex-direction:column;
    align-items:flex-start;
    gap:25px;
    padding:30px;
    transition:.35s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
/* Menu ouvert */
.groupe-menu.actif{
    left:0;
}
.groupe-menu li{
    width:100%;
}
.groupe-menu a{
    width:100%;
    font-size:20px;
}
#bouton-inscription1{
    display:none;
}
/* Sous-menu */
.sous-menu{
    position:static;
    background:none;
    padding-left:20px;
    box-shadow:none;
}
}
/* ================= PETIT TELEPHONE ================= */
@media(max-width:400px){
    .en-tete{
        padding:0 var(--taille-10);
    }
    .image-logo{
        height:var(--taille-70);
    }
    .bouton-traits{
        font-size:var(--taille-25);
    }
}




/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!pied de page!!!!!!!!!!!*/
.bas-page {
    display: grid;
    background: gray;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: var(--taille-30);
}
/*mise à la ligne des liens*/
.bas-page a {
    display: block;
    margin-bottom: 0;
}

/* taille et position des icones*/
.icone {
    width: var(--taille-20);
    height: var(--taille-20);
    margin-right: var(--taille-5);
}

/*tous les textes du pied de page*/
.titre-pied-page {
    font-size: var(--taille-30);
    font-weight: bold;
    margin-bottom: var(--taille-30);
    margin-top: var(--taille-20);
}
.info {
    margin-bottom: var(--taille-5);
    line-height: var(--taille-30);
}
.logo-pied-page {
    position: relative;
    display: block;
    height: var(--taille-130);
    width: auto;
    margin-left: var(--taille-55);
    margin-bottom: var(--taille-10);
}
.colonne1 {
    margin-top: var(--taille-60);
}
/* ===================== */
/* TABLETTE */
@media(max-width:1024px){
.bas-page{
    grid-template-columns:1fr 1fr;
    gap:var(--taille-30);
    padding:var(--taille-20);
}
.logo-pied-page{
    margin-left:0;
    height:var(--taille-110);
}
.colonne1{
    margin-top:var(--taille-20);
}
}/* ===================== */
/* TELEPHONE */
@media(max-width:768px){
.bas-page{
    grid-template-columns:1fr;
    text-align:center;
    gap:var(--taille-20);
}
.titre-pied-page{
    font-size:var(--taille-25);
}
.logo-pied-page{
    margin:auto;
    height:var(--taille-90);
}
.colonne1{
    margin-top:0;
}
.icone{
    width:var(--taille-15);
    height:var(--taille-15);
}
}/* ===================== */
/* PETIT TELEPHONE */
@media(max-width:400px){
.bas-page{
    padding:var(--taille-15);
}
.titre-pied-page{
    font-size:var(--taille-20);
}
}



/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!Accueil!!!!!!!!!!!!!! */
/*section 1*/
.partie-1 {
    display: flex;
    position: sticky;
    background: var(--fond-orange);
    align-items: center;
    gap: var(--taille-50);
}

/*affiche*/
.affiche {
    width: var(--taille-450);
    height: auto;
    margin-top: var(--taille-30);
    margin-bottom: var(--taille-30);
    margin-left: var(--taille-90);
    margin-right: var(--taille-90);
    border-radius: var(--taille-10);
}

/*texte*/
.texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: var(--taille-20);
}

#p1-titre1 {
    font-family: "Antonio", sans-serif;
    font-size: var(--taille-70);
    text-align: center;
    margin-bottom: 0;
    letter-spacing: var(--taille-10);
    margin-right: var(--taille-20);
}

#p1-titre2 {
    font-family: Georgia, serif;
    font-size: var(--taille-35);
    text-align: center;
    margin-bottom: var(--taille-30);
    margin-top: 0;
    margin-right: var(--taille-20);
}

#paragraphe {
    font-size: var(--taille-20);
    line-height: 1.5;
    color: white;
    margin-top: var(--taille-10);
    margin-bottom: var(--taille-15);
}

/*section2*/
#p2-titre1 {
    font-family: "Antonio", sans-serif;
    font-size: var(--taille-70);
    text-align: center;
    margin-bottom: 0;
    letter-spacing: var(--taille-10);
}
.courses {
    padding-top: var(--taille-40);
    padding-bottom: var(--taille-70);
    margin-left: var(--taille-50);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--taille-30);
    /*background-image: url(Images/Départ.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;*/
}
.carte-course {
    width: var(--taille-350);
    padding: var(--taille-20);
    border-radius: var(--taille-15);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
.titre-carte {
    font-family: "Antonio", sans-serif;

    font-size: var(--taille-30);
    text-align: center;
    margin-bottom: 0;
    letter-spacing: 1px;
    padding: var(--taille-10);
    font-weight: bold;
}
.carte-course:hover {
    transform: scale(1.05);
}
.photo-carte {
    height: var(--taille-200);
    width: var(--taille-300);
    object-fit: cover;
    border-radius: var(--taille-10);
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.detail-carte {
    line-height: var(--taille-30);
    padding: var(--taille-10);
}
.decouvrir {
    background: white;
    color: black;
    padding: var(--taille-10) var(--taille-20);
    border-radius: var(--taille-10);
    font-weight: bold;
    margin-top: var(--taille-5);
    transition: 0.3s;
    font-size: var(--taille-20);
    border: 2px solid black;

    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.decouvrir:hover {
    background: var(--fond-orange-foncé);
    color: black;
}
.icone-carte {
    width: var(--taille-20);
    height: var(--taille-20);
    margin-right: var(--taille-5);
    position: relative;
    top: 3.5px;
}


/*section 3*/
.partie-3 {
    display: flex;
    position: sticky;
    background: var(--fond-orange);
    padding-top: var(--taille-100);
    left: 0;
    right: 0;
    align-items: center;
    gap: var(--taille-50);
}
#p3-titre {
    font-family: "Antonio", sans-serif;
    font-size: var(--taille-50);
    text-align: center;
    margin-bottom: var(--taille-20);
    letter-spacing: 3px;
    margin-left: var(--taille-30);
}
#p3-texte {
    font-size: var(--taille-20);
    line-height: 1.4;
    color: white;
    margin-left: var(--taille-30);
}

#parcours {
    background: var(--fond-orange-foncé);
    color: black;
    padding: var(--taille-10) var(--taille-20);
    border-radius: var(--taille-10);
    font-weight: bold;
    margin-top: var(--taille-10);
    margin-bottom: var(--taille-40);
    transition: 0.3s;
    font-size: var(--taille-20);

    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
#parcours:hover {
    background: var(--fond-orange-foncé);
    color: var(--couleur-rouge);
}

#p3-image {
    width: var(--taille-500);
    height: auto;
    margin-top: var(--taille-20);
    margin-bottom: var(--taille-50);
    margin-left: var(--taille-90);
    margin-right: var(--taille-90);
    border-radius: var(--taille-10);
}





/*section 4*/
#p4-titre {
    font-family: "Antonio", sans-serif;
    font-size: var(--taille-70);
    text-align: center;
    margin-bottom: 0;
    letter-spacing: clamp(2px, 2vw,8px);
}
.info-pratique {
    padding-top: var(--taille-40);
    padding-bottom: var(--taille-70);
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--taille-320));
    justify-content: center;
    gap: var(--taille-30);
}
.carte-info {
    width: var(--taille-320);
    height: var(--taille-320);
    border-radius: var(--taille-15);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
.carte-info:hover {
    transform: scale(1.05);
}

#carte-info1{
    background-image: url(Images/foretpo.jpg);
    background-size: cover;
    background-position: center;
}
#carte-info2{
    background-image: url(Images/parking.jpg);
    background-size: cover;
    background-position: center;
}
#carte-info3{
    background-image: url(Images/foretpo\ \(3\).jpg);
    background-size: cover;
    background-position: center;
}

.titre-carte-info {
    font-family: "Antonio", sans-serif;
    color: white;
    font-size: var(--taille-30);
    text-align: center;
    margin-top: var(--taille-20);
    letter-spacing: 1px;
    padding: clamp(2px, 2vw,8px);
    font-weight: bold;
}
.partie-4 .bouton-lire-plus {
    background: var(--fond-orange-foncé);
    color: white;
    padding: var(--taille-10) var(--taille-25);
    font-weight: bold;
    transition: 0.3s;
    font-size: var(--taille-20);
    border-radius: var(--taille-25);
    display: block;
    width: fit-content;
    margin: 0 auto var(--taille-20);
}
.bouton-lire-plus:hover {
    background: white;
    color: black;
    border: 1px solid black;
}
/*TABLETTE*/
@media(max-width:1024px){
.partie-1,
.partie-3{
    gap:var(--taille-20);
}
.affiche,
#p3-image{
    width:var(--taille-350);
    margin-left:var(--taille-30);
    margin-right:var(--taille-30);
}
#p1-titre1,
#p2-titre1,
#p4-titre{
    font-size:var(--taille-55);
}
.courses{
    grid-template-columns:repeat(2,1fr);
    margin-left:0;
    gap: var(--taille-30);
}
.partie-4 .info-pratique{
    grid-template-columns:repeat(auto-fit, var(--taille-280));
    justify-content:center;
    gap: var(--taille-30);
}
.carte-course{
    width:var(--taille-280);
}
.partie-4 .carte-info{
    width:var(--taille-280);
    height:var(--taille-280);
}
}
/*TELEPHONE*/
@media(max-width:768px){
.partie-1,
.partie-3{
    flex-direction:column;
    position:relative;
    text-align:center;
}
.affiche,
#p3-image{
    width:90%;
    margin:20px auto;
}
#p1-titre1,
#p2-titre1,
#p4-titre{
    font-size:var(--taille-40);
    letter-spacing:var(--taille-3);
}
#p1-titre2{
    font-size:var(--taille-25);
}
#paragraphe,
#p3-texte{
    padding:0 var(--taille-20);
}
.courses,
.partie-4 .info-pratique{
    grid-template-columns:1fr;
    margin:0;
    justify-items:center;
    gap: var(--taille-30);
}
.carte-course,
.partie-4 .carte-info{
    width:90%;
}
.photo-carte{
    width:100%;
}

}

/*PETIT TELEPHONE*/
@media(max-width:400px){
#p1-titre1,
#p2-titre1,
#p4-titre{
    font-size:var(--taille-30);
}
#p1-titre2{
    font-size:var(--taille-20);
}
.carte-course,
.carte-info{
    padding:var(--taille-15);
}
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!page course!!!!!!!!!!!!!!!*/
#debut-page-course {
    background-image: url(Images/foretp.jpg);
    background-size: cover;
    background-position: center;
    height: var(--taille-350);
    display: flex;
    justify-content: center; 
    align-items: center;
}



/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! page course enfant!!!!!!!!!!!!!!!*/

/*section1*/
#debut-page-course-enfants {
    background-image: url(Images/foretp.jpg);
    background-size: cover;
    background-position: center;
    height: var(--taille-350);
    display: flex;
    justify-content: center; 
    align-items: center;
}
#titre-debut-page-course-enfants {
    font-family: "antonio" sans-serif;
    color: white;
    font-size: var(--taille-100);
    font-weight: bold;
}


/*section2*/
#p2-titre1-enfants {
    font-family: "Antonio", sans-serif;
    font-size: var(--taille-70);
    text-align: center;
    margin-bottom: 0;
    letter-spacing: var(--taille-10);
}
.courses-enfants {
    display: grid;
    grid-template-columns: repeat(3, var(--taille-350));
    justify-content: center;
    gap: var(--taille-40);
    padding: var(--taille-50) 0 var(--taille-80);
}
.carte-course-enfants {
    width: var(--taille-350);
    padding: var(--taille-25);
    border-radius: var(--taille-15);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
.titre-carte-enfant {
    font-family: "Antonio", sans-serif;
    font-size: var(--taille-25);
    text-align: center;
    margin-top: var(--taille-15);
    margin-bottom: var(--taille-5);
    letter-spacing: 1px;
    font-weight: bold;
}
.carte-course-enfants:hover {
    transform: scale(1.05);
}
.photo-carte-enfants {
    height: var(--taille-200);
    width: 100%;
    object-fit: cover;
    border-radius: var(--taille-10);
    display: block;
    margin: 0 auto;
}
.detail-carte-enfant {
    line-height: 1.6;
    padding: var(--taille-10) var(--taille-5);
}
.decouvrir-enfants {
    background: white;
    color: black;
    padding: var(--taille-10) var(--taille-20);
    border-radius: var(--taille-10);
    font-weight: bold;
    margin-top: var(--taille-10);
    transition: 0.3s;
    font-size: var(--taille-20);
    border: 2px solid black;

    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.decouvrir-enfants:hover {
    background: var(--fond-orange-foncé);
    color: black;
}
.icone-carte-enfants {
    width: 18px;
    height: 18px;
    margin-right: var(--taille-5);
    position: relative;
    top: 3.5px;
}







/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!page course individuelle!!!!!!!!!!!!!!!!!!!!*/
/*section 1*/
#page-course-individuelle-1 {
    background-image: url(Images/foretp\ \(2\).jpg);
    background-size: cover;
    background-position: center;
    height: var(--taille-350);
    display: flex;
    justify-content: center; 
    align-items: center;
}
#titre-debut-page-course-individuelle {
    font-family: "antonio" sans-serif;
    color: white;
    font-size: var(--taille-100);
    font-weight: bold;
}

/*section 2*/
#page-course-individuelle-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: var(--taille-30);
}
.image-colonne {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    height: var(--taille-150);
    width: auto;
    max-width: 100%;
}
.titre-colonne {
    font-size: var(--taille-40);
    font-weight: bold;
    font-family: "antonio", sans-serif;
    text-align: center;
    margin-top: var(--taille-20);
}

/*section 3*/
#page-course-individuelle-3 {
    display: flex;
    position: sticky;
    background: var(--fond-orange);
    align-items: center;
    gap: var(--taille-50);
}

/*Photo*/
#photo-page-course-individuelle-3 {
    width: var(--taille-500);
    height: auto;
    margin-top: var(--taille-50);
    margin-bottom: var(--taille-50);
    margin-left: var(--taille-90);
    margin-right: var(--taille-90);
    border-radius: var(--taille-10);
}
#titre-page-course-individuelle-3{
    font-family: "Antonio", sans-serif;
    font-size: var(--taille-70);
    text-align: center;
    margin-bottom: 0;
    letter-spacing: var(--taille-10);
    margin-right: var(--taille-20);
}
/*texte*/
#texte-page-course-individuelle-3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: var(--taille-20);
    margin-top: var(--taille-40);
    margin-bottom: var(--taille-40);
    line-height: 1.6;
}



/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!page challenge equipe!!!!!!!!!!!!!!!!*/
/*section 1*/
#page-challenge-equipe-1 {
    background-image: url(Images/foretp\ \(3\).jpg);
    background-size: cover;
    background-position: center;
    height: var(--taille-350);
    display: flex;
    justify-content: center; 
    align-items: center;
}
#titre-debut-page-challenge-equipe {
    font-family: "antonio" sans-serif;
    color: white;
    font-size: var(--taille-100);
    font-weight: bold;
}

/*section 2*/
#page-challenge-equipe-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: var(--taille-30);
}
.image-colonne {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    height: var(--taille-150);
    width: auto;
    max-width: 100%;
}
.titre-colonne {
    font-size: var(--taille-40);
    font-weight: bold;
    font-family: "antonio", sans-serif;
    text-align: center;
    margin-top: var(--taille-20);
}

/*section 3*/
#page-challenge-equipe-3 {
    display: flex;
    position: sticky;
    background: var(--fond-orange);
    align-items: center;
    gap: var(--taille-50);
}

/*Photo*/
#photo-page-challenge-equipe-3 {
    width: var(--taille-500);
    height: auto;
    margin-top: var(--taille-50);
    margin-bottom: var(--taille-50);
    margin-left: var(--taille-90);
    margin-right: var(--taille-90);
    border-radius: var(--taille-10);
}
#titre-page-challenge-equipe-3{
    font-family: "Antonio", sans-serif;
    font-size: var(--taille-70);
    text-align: center;
    margin-bottom: 0;
    letter-spacing: var(--taille-10);
    margin-right: var(--taille-20);
}
/*texte*/
#texte-page-challenge-equipe-3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: var(--taille-20);
    margin-top: var(--taille-40);
    margin-bottom: var(--taille-40);
    line-height: 1.6;
}




/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!page course enfant 1!!!!!!!!!!!!!!!!*/
/*section 1*/
#page-course-enfant-1-1 {
    background-image: url(Images/foretp\ \(3\).jpg);
    background-size: cover;
    background-position: center;
    height: var(--taille-350);
    display: flex;
    justify-content: center; 
    align-items: center;
}
#titre-debut-page-course-enfant {
    font-family: "antonio" sans-serif;
    color: white;
    font-size: var(--taille-100);
    font-weight: bold;
}

/*section 2*/
#page-course-enfant-1-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: var(--taille-30);
}
.image-colonne {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    height: var(--taille-150);
    width: auto;
    max-width: 100%;
}
.titre-colonne {
    font-size: var(--taille-40);
    font-weight: bold;
    font-family: "antonio", sans-serif;
    text-align: center;
    margin-top: var(--taille-20);
}

/*section 3*/
#page-course-enfant-1-3 {
    display: flex;
    position: sticky;
    background: var(--fond-orange);
    align-items: center;
    gap: var(--taille-50);
}

/*Photo*/
#photo-page-course-enfant-1-3 {
    width: var(--taille-500);
    height: auto;
    margin-top: var(--taille-50);
    margin-bottom: var(--taille-50);
    margin-left: var(--taille-90);
    margin-right: var(--taille-90);
    border-radius: var(--taille-10);
}
#titre-page-course-enfant-1-3{
    font-family: "Antonio", sans-serif;
    font-size: var(--taille-70);
    text-align: center;
    margin-bottom: 0;
    letter-spacing: var(--taille-10);
    margin-right: var(--taille-20);
}
/*texte*/
#texte-page-course-enfant-1-3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: var(--taille-20);
}


/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!page course enfant 2!!!!!!!!!!!!!!!!*/
/*section 1*/
#page-course-enfant-2-1 {
    background-image: url(Images/foretp\ \(3\).jpg);
    background-size: cover;
    background-position: center;
    height: var(--taille-350);
    display: flex;
    justify-content: center; 
    align-items: center;
}
#titre-debut-page-course-enfant {
    font-family: "antonio" sans-serif;
    color: white;
    font-size: var(--taille-100);
    font-weight: bold;
}

/*section 2*/
#page-course-enfant-2-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: var(--taille-30);
}
.image-colonne {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    height: var(--taille-150);
    width: auto;
    max-width: 100%;
}
.titre-colonne {
    font-size: var(--taille-40);
    font-weight: bold;
    font-family: "antonio", sans-serif;
    text-align: center;
    margin-top: var(--taille-20);
}

/*section 3*/
#page-course-enfant-2-3 {
    display: flex;
    position: sticky;
    background: var(--fond-orange);
    align-items: center;
    gap: var(--taille-50);
}

/*Photo*/
#photo-page-course-enfant-2-3 {
    width: var(--taille-500);
    height: auto;
    margin-top: var(--taille-50);
    margin-bottom: var(--taille-50);
    margin-left: var(--taille-90);
    margin-right: var(--taille-90);
    border-radius: var(--taille-10);
}
#titre-page-course-enfant-2-3{
    font-family: "Antonio", sans-serif;
    font-size: var(--taille-70);
    text-align: center;
    margin-bottom: 0;
    letter-spacing: var(--taille-10);
    margin-right: var(--taille-20);
}
/*texte*/
#texte-page-course-enfant-2-3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: var(--taille-20);
}


/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! page programme !!!!!!!!!!!!!!!!!!!!!*/
.partie-1-programme {
    background-image: url(Images/foretp\ \(4\).jpg);
    background-size: cover;
    background-position: center;
    height: var(--taille-350);
    display: flex;
    justify-content: center; 
    align-items: center;
}
#titre-programme {
    font-family: "antonio" sans-serif;
    color: white;
    font-size: var(--taille-100);
    font-weight: bold;
}
.timeline-jour {
    padding: var(--taille-60) var(--taille-30);
}
.timeline-jour-clair {
    background: white;
}
.timeline-jour-fonce {
    background: var(--fond-orange);
}
.timeline-jour-titre {
    font-family: "Antonio", sans-serif;
    font-size: var(--taille-50);
    text-align: center;
    letter-spacing: 2px;
    margin: 0 0 var(--taille-50);
}
.timeline-jour-fonce .timeline-jour-titre {
    color: white;
}
.timeline {
    position: relative;
    max-width: var(--taille-600);
    margin: 0 auto;
}
.timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--taille-50) / 2 - 1.5px);
    width: 3px;
    background: var(--fond-orange-foncé);
}
.timeline-event {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--taille-25);
    margin-bottom: var(--taille-35);
}
.timeline-event:last-child {
    margin-bottom: 0;
}
.timeline-point {
    position: relative;
    z-index: 1;
    flex: 0 0 var(--taille-50);
    width: var(--taille-50);
    height: var(--taille-50);
    border-radius: 50%;
    background: white;
    border: 3px solid var(--fond-orange-foncé);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
.timeline-point img {
    width: var(--taille-25);
    height: var(--taille-25);
}
.timeline-contenu {
    background: white;
    border-radius: var(--taille-15);
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    padding: var(--taille-15) var(--taille-20);
    flex: 1;
    margin-top: var(--taille-5);
}
.timeline-heure {
    display: block;
    font-family: "Antonio", sans-serif;
    font-weight: bold;
    font-size: var(--taille-25);
    color: var(--couleur-rouge);
    letter-spacing: 0.5px;
    margin-bottom: var(--taille-5);
}
.timeline-texte {
    font-size: var(--taille-20);
    line-height: 1.4;
}
/*TABLETTE*/
@media(max-width:1024px){
.timeline {
    max-width: var(--taille-500);
}
}
/*TELEPHONE*/
@media(max-width:768px){
.timeline-jour {
    padding: var(--taille-40) var(--taille-15);
}
.timeline-jour-titre {
    font-size: var(--taille-35);
    margin-bottom: var(--taille-30);
}
.timeline-event {
    gap: var(--taille-15);
    margin-bottom: var(--taille-25);
}
.timeline-point {
    flex: 0 0 var(--taille-40);
    width: var(--taille-40);
    height: var(--taille-40);
}
.timeline-point img {
    width: var(--taille-20);
    height: var(--taille-20);
}
.timeline::before {
    left: calc(var(--taille-40) / 2 - 1.5px);
}
.timeline-contenu {
    padding: var(--taille-10) var(--taille-15);
}
}


/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! page accès !!!!!!!!!!!!!!!!!!!!!!!!!!*/
.partie-1-acces {
    background-image: url(Images/foretp\ \(4\).jpg);
    background-size: cover;
    background-position: center;
    height: var(--taille-350);
    display: flex;
    justify-content: center; 
    align-items: center;
}
#titre-acces {
    font-family: "antonio" sans-serif;
    color: white;
    font-size: var(--taille-100);
    font-weight: bold;
}

/* section 2*/
.partie-2-acces {
    display: flex;
    position: sticky;
    background: white;
    padding-top: var(--taille-100);
    left: 0;
    right: 0;
    align-items: center;
    gap: var(--taille-50);
}
#p2-titre-acces {
    font-family: "Antonio", sans-serif;
    font-size: var(--taille-50);
    text-align: center;
    margin-bottom: var(--taille-20);
    letter-spacing: 3px;
    margin-left: var(--taille-30);
}
#p2-texte-acces {
    font-size: var(--taille-20);
    line-height: 1.4;
    color: black;
    margin-left: var(--taille-30);
}

#maps {
    background: var(--fond-orange-foncé);
    color: black;
    padding: var(--taille-10) var(--taille-20);
    border-radius: var(--taille-10);
    font-weight: bold;
    margin-top: var(--taille-10);
    margin-bottom: var(--taille-40);
    transition: 0.3s;
    font-size: var(--taille-20);

    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
#maps:hover {
    background: var(--fond-orange-foncé);
    color: var(--couleur-rouge);
}

#p2-image-acces {
    width: var(--taille-500);
    height: auto;
    margin-top: var(--taille-20);
    margin-bottom: var(--taille-50);
    margin-left: var(--taille-90);
    margin-right: var(--taille-90);
    border-radius: var(--taille-10);
}

/*section 3*/
.partie-3-acces {
    display: flex;
    position: sticky;
    background: var(--fond-orange);
    padding-top: var(--taille-100);
    left: 0;
    right: 0;
    align-items: center;
    gap: var(--taille-50);
}
#p3-titre-acces {
    font-family: "Antonio", sans-serif;
    font-size: var(--taille-50);
    text-align: center;
    margin-bottom: var(--taille-20);
    letter-spacing: 3px;
    margin-left: var(--taille-30);
}
#p3-texte-acces {
    font-size: var(--taille-20);
    line-height: 1.4;
    color: white;
    margin-right: var(--taille-30);
}

#maps {
    background: var(--fond-orange-foncé);
    color: black;
    padding: var(--taille-10) var(--taille-20);
    border-radius: var(--taille-10);
    font-weight: bold;
    margin-top: var(--taille-10);
    margin-bottom: var(--taille-40);
    transition: 0.3s;
    font-size: var(--taille-20);

    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
#maps:hover {
    background: var(--fond-orange-foncé);
    color: var(--couleur-rouge);
}

#p3-image-acces {
    width: var(--taille-500);
    height: auto;
    margin-top: var(--taille-20);
    margin-bottom: var(--taille-50);
    margin-left: var(--taille-90);
    margin-right: var(--taille-90);
    border-radius: var(--taille-10);
}

/* section 4*/
.partie-4-acces {
    display: flex;
    position: sticky;
    background: white;
    padding-top: var(--taille-100);
    left: 0;
    right: 0;
    align-items: center;
    gap: var(--taille-50);
}
#p4-titre-acces {
    font-family: "Antonio", sans-serif;
    font-size: var(--taille-50);
    text-align: center;
    margin-bottom: var(--taille-20);
    letter-spacing: 3px;
    margin-left: var(--taille-30);
}
#p4-texte-acces {
    font-size: var(--taille-20);
    line-height: 1.4;
    color: black;
    margin-left: var(--taille-30);
}

#p4-image-acces {
    width: var(--taille-500);
    height: auto;
    margin-top: var(--taille-20);
    margin-bottom: var(--taille-50);
    margin-left: var(--taille-90);
    margin-right: var(--taille-90);
    border-radius: var(--taille-10);
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! page contact !!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.partie-1-contact {
    background-image: url(Images/foretp\ \(5\).jpg);
    background-size: cover;
    background-position: center;
    height: var(--taille-350);
    display: flex;
    justify-content: center; 
    align-items: center;
}
#titre-contact {
    font-family: "antonio" sans-serif;
    color: white;
    font-size: var(--taille-100);
    font-weight: bold;
}

/* section 2*/
.partie-2-contact {
    display: flex;
    position: sticky;
    background: var(--fond-orange);
    padding-top: var(--taille-100);
    left: 0;
    right: 0;
    gap: var(--taille-50);
}
#p2-titre-contact-1 {
    font-family: "Antonio", sans-serif;
    font-size: var(--taille-50);
    text-align: center;
    letter-spacing: 3px;
    margin-left: var(--taille-30);
}
#P2-titre-contact-2 {
    font-size: var(--taille-35);
    margin-left: var(--taille-20);
    margin-top: var(--taille-20);
    margin-bottom: var(--taille-30);
}
.titre-liste-contact {
    list-style: none;
    font-size: var(--taille-25);
    margin-left: var(--taille-15);
    margin-top: var(--taille-10);
}
.sous-liste-contact {
    line-height: 2;
    list-style: none;
    font-size: var(--taille-20);
    margin-left: var(--taille-40);
}

#p2-image-contact {
    width: var(--taille-500);
    height: auto;
    margin-top: var(--taille-20);
    margin-bottom: var(--taille-50);
    margin-left: var(--taille-90);
    margin-right: var(--taille-90);
    border-radius: var(--taille-10);
}


/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! page edition !!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.debut-page-edition {
    background-image: url(Images/foretp\ \(6\).jpg);
    background-size: cover;
    background-position: center;
    height: var(--taille-350);
    display: flex;
    justify-content: center; 
    align-items: center;
}
#titre-debut-page-edition {
    font-family: "Antonio", sans-serif;
    font-size: var(--taille-50);
    text-align: center;
    margin-bottom: var(--taille-20);
    letter-spacing: 3px;
    margin-left: var(--taille-30);
}

.edition-2026 {
    display: flex;
    position: sticky;
    background: white;
    padding-top: var(--taille-100);
    left: 0;
    right: 0;
    align-items: center;
    gap: var(--taille-50);
}
.edition-2025 {
    display: flex;
    position: sticky;
    background: var(--fond-orange);
    padding-top: var(--taille-100);
    left: 0;
    right: 0;
    align-items: center;
    gap: var(--taille-50);
}
.titre-edition {
    font-family: "Antonio", sans-serif;
    font-size: var(--taille-50);
    text-align: center;
    letter-spacing: 3px;
    margin-left: var(--taille-30);
}
.texte-edition {
    font-size: var(--taille-20);
    line-height: 1.4;
    margin-left: var(--taille-30);
}
.edition-2025 .texte-edition {
    color: white;
}
.image-edition {
    width: var(--taille-500);
    height: auto;
    margin-top: var(--taille-20);
    margin-bottom: var(--taille-50);
    margin-left: var(--taille-90);
    margin-right: var(--taille-90);
    border-radius: var(--taille-10);
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! page galeries photos !!!!!!!!!!!!!!!!*/
#debut-page-galerie {
    background-image: url(Images/foretp\ \(5\).jpg);
    background-size: cover;
    background-position: center;
    height: var(--taille-350);
    display: flex;
    justify-content: center; 
    align-items: center;
}
#titre-debut-page-galerie {
    font-family: "antonio" sans-serif;
    color: white;
    font-size: var(--taille-100);
    font-weight: bold;
}

.galerie-2026 {
    display: flex;
    position: sticky;
    background: white;
    padding-top: var(--taille-80);
    padding-bottom: var(--taille-80);
    gap: var(--taille-50);
}
.galerie-2025 {
    display: flex;
    position: sticky;
    background: var(--fond-orange);
    padding-top: var(--taille-80);
    padding-bottom: var(--taille-80);
    gap: var(--taille-50);
}
#titre-galerie {
    font-family: "Antonio", sans-serif;
    font-size: var(--taille-50);
    letter-spacing: 3px;
    text-align: center;
}
.image-galerie {
    width: var(--taille-500);
    height: auto;
    margin-top: var(--taille-20);
    margin-bottom: var(--taille-50);
    margin-left: var(--taille-90);
    margin-right: var(--taille-90);
    border-radius: var(--taille-10);
}
.bouton-galerie {
    background: var(--fond-orange-foncé);
    color: black;
    padding: var(--taille-10) var(--taille-20);
    border-radius: var(--taille-10);
    font-weight: bold;
    margin-top: var(--taille-35);
    margin-left: var(--taille-30);
    transition: 0.3s;
    font-size: var(--taille-20);
    border: 2px solid black;

    display: block;
    width: fit-content;
}
.bouton-galerie:hover {
    background: var(--fond-orange-foncé);
    color: var(--couleur-rouge);
}
.sous-titre-galerie {
    font-size: var(--taille-25);
    margin-top: var(--taille-20);
    margin-bottom: var(--taille-20);
    margin-left: var(--taille-30);
}
.lien-insta-galerie {
    display: flex;
    font-size: var(--taille-20);
    margin-left: var(--taille-40);
    margin-right: var(--taille-30);
}
.icone-galerie {
    width: var(--taille-20);
    height: var(--taille-20);
    margin-right: var(--taille-5);
}


/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! page partenaires !!!!!!!!!!!!!!!!!!!!!*/
#debut-page-partenaire {
    background-image: url(Images/foretp\ \(5\).jpg);
    background-size: cover;
    background-position: center;
    height: var(--taille-350);
    display: flex;
    justify-content: center; 
    align-items: center;
}
#titre-debut-page-partenaire {
    font-family: "antonio" sans-serif;
    color: white;
    font-size: var(--taille-100);
    font-weight: bold;
}
.titre-principale-partenaire {
    font-family: "Antonio", sans-serif;
    font-size: var(--taille-70);
    text-align: center;
    margin-bottom: 0;
    letter-spacing: var(--taille-10);
}
.section-carte-partenaire {
    padding-top: var(--taille-40);
    padding-bottom: var(--taille-70);
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--taille-320));
    justify-content: center;
    gap: var(--taille-30);
}
.carte-partenaire {
    width: var(--taille-320);
    padding: var(--taille-20);
    border-radius: var(--taille-15);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    margin-bottom: var(--taille-30);
    display: flex;
    flex-direction: column;
}
.titre-carte-partenaire {
    font-family: "Antonio", sans-serif;

    font-size: var(--taille-30);
    text-align: center;
    margin-bottom: 0;
    letter-spacing: 1px;
    padding: var(--taille-10);
    font-weight: bold;
}
.carte-partenaire:hover {
    transform: scale(1.05);
}
.photo-carte-partenaire {
    height: auto;
    width: var(--taille-300);
    border-radius: var(--taille-10);
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.liste-info-partenaire {
    font-size: var(--taille-20);
    list-style: none;
    line-height: 2;
}
.bouton-partenaire {
    background: white;
    color: black;
    padding: var(--taille-10) var(--taille-20);
    border-radius: var(--taille-10);
    font-weight: bold;
    transition: 0.3s;
    font-size: var(--taille-20);
    border: 2px solid black;

    display: block;
    width: fit-content;
    margin: auto auto 0;
}
.bouton-partenaire:hover {
    background: var(--fond-orange-foncé);
    color: black;
}
/*TABLETTE*/
@media(max-width:1024px){
.titre-principale-partenaire{
    font-size: var(--taille-55);
    padding:0 var(--taille-20);
}
.section-carte-partenaire{
    grid-template-columns: repeat(auto-fit, var(--taille-280));
}
.carte-partenaire{
    width: var(--taille-280);
}
}
/*TELEPHONE*/
@media(max-width:768px){
.section-carte-partenaire{
    grid-template-columns: 1fr;
    justify-items:center;
}
.carte-partenaire{
    width:90%;
}
.photo-carte-partenaire{
    width:100%;
}
}


/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! page Documents !!!!!!!!!!!!!!!!!!!!!*/
#debut-page-document {
    background-image: url(Images/foretp\ \(5\).jpg);
    background-size: cover;
    background-position: center;
    height: var(--taille-350);
    display: flex;
    justify-content: center; 
    align-items: center;
}
#titre-debut-page-document {
    font-family: "antonio" sans-serif;
    color: white;
    font-size: var(--taille-100);
    font-weight: bold;
}
.documents-pdf{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--taille-40);
    width:90%;
    max-width:1400px;
    margin:var(--taille-60) auto;
}
.pdf{
    display:flex;
    flex-direction:column;
    align-items:center;
}
.pdf iframe{
    width:100%;
    height:600px;
    border:none;
    border-radius:12px;
    box-shadow:0 var(--taille-5) var(--taille-15) rgba(0,0,0,.2);
}
.pdf h3{
    margin-top:var(--taille-20);
    font-family:"Antonio",sans-serif;
    font-size:var(--taille-30);
    text-align:center;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! pages secondaires (responsive) !!!!!!!!!!!!!!!!!!!!!*/
/*TABLETTE*/
@media(max-width:1024px){
#page-course-individuelle-2,
#page-challenge-equipe-2,
#page-course-enfant-1-2,
#page-course-enfant-2-2{
    grid-template-columns: repeat(2,1fr);
    gap: var(--taille-20);
}
.courses-enfants{
    grid-template-columns: repeat(2, var(--taille-350));
    gap: var(--taille-30);
}
#page-course-individuelle-3,
#page-challenge-equipe-3,
#page-course-enfant-1-3,
#page-course-enfant-2-3,
.partie-2-acces,
.partie-3-acces,
.partie-4-acces,
.partie-2-contact,
.edition-2026,
.edition-2025,
.galerie-2026,
.galerie-2025{
    gap: var(--taille-20);
}
#photo-page-course-individuelle-3,
#photo-page-challenge-equipe-3,
#photo-page-course-enfant-1-3,
#photo-page-course-enfant-2-3,
#p2-image-acces,
#p3-image-acces,
#p4-image-acces,
#p2-image-contact,
.image-edition,
.image-galerie{
    width: var(--taille-350);
    margin-left: var(--taille-30);
    margin-right: var(--taille-30);
}
}

/*TELEPHONE*/
@media(max-width:768px){
#page-course-individuelle-2,
#page-challenge-equipe-2,
#page-course-enfant-1-2,
#page-course-enfant-2-2{
    grid-template-columns: 1fr;
    padding: var(--taille-20);
    justify-items: center;
}
#page-course-individuelle-3,
#page-challenge-equipe-3,
#page-course-enfant-1-3,
#page-course-enfant-2-3,
.partie-2-acces,
.partie-3-acces,
.partie-4-acces,
.partie-2-contact,
.edition-2026,
.edition-2025,
.galerie-2026,
.galerie-2025{
    flex-direction: column;
    position: relative;
    text-align: center;
    padding-top: var(--taille-40);
    gap: var(--taille-20);
}
#titre-page-course-individuelle-3,
#titre-page-challenge-equipe-3,
#titre-page-course-enfant-1-3,
#titre-page-course-enfant-2-3,
#p2-titre-acces,
#p3-titre-acces,
#p4-titre-acces,
#p2-titre-contact-1,
.titre-edition,
#titre-galerie{
    margin-left: 0;
}
#p2-texte-acces,
#p3-texte-acces,
#p4-texte-acces,
.texte-edition{
    margin-left: 0;
    padding: 0 var(--taille-20);
}
#texte-page-course-individuelle-3,
#texte-page-challenge-equipe-3,
#texte-page-course-enfant-1-3,
#texte-page-course-enfant-2-3{
    margin-right: 0;
    align-items: center;
}
#photo-page-course-individuelle-3,
#photo-page-challenge-equipe-3,
#photo-page-course-enfant-1-3,
#photo-page-course-enfant-2-3,
#p2-image-acces,
#p3-image-acces,
#p4-image-acces,
#p2-image-contact,
.image-edition,
.image-galerie{
    width: 90%;
    margin: var(--taille-20) auto;
}
.courses-enfants{
    grid-template-columns: 1fr;
    justify-content: center;
    padding: var(--taille-30) 0;
}
.carte-course-enfants{
    width: 90%;
    margin: 0 auto;
}
.photo-carte-enfants{
    width: 100%;
}
.texte-info{
    margin-left: var(--taille-20);
    flex-wrap: wrap;
}
#P2-titre-contact-2,
.titre-liste-contact,
.sous-liste-contact{
    margin-left: var(--taille-15);
}
.documents-pdf{
    grid-template-columns: 1fr;
}
.pdf iframe{
    height: var(--taille-400);
}
}

/*PETIT TELEPHONE*/
@media(max-width:400px){
.pdf iframe{
    height: var(--taille-300);
}
}