/*------------------------------------------------------------*/
/* Burgbacher Kelian */
/* Finit le 13 janvier */
/* Cette page est dédiée à mettre du style à la page de présentation des activités */
/*------------------------------------------------------------*/
body{
    margin: 0;
    background: 
        linear-gradient(to bottom, rgba(4, 43, 151, 0.9) 30%, #5c566e 100%), /* gradient */ 
        url("../image/homepageMountains.png") no-repeat center top;   /* image centrée */;
    background-size: cover; /* couvrir tout l'écran */
    background-attachment: fixed; /* faire que les montagnes soient toujours là */
    font-family: Arial, Helvetica, sans-serif;
    transition: all 1.5s ease-in-out;
}
body::before, body::after {
    content: "";
    position: fixed;
    inset: 0;       /* top:0; left:0; right:0; bottom:0 */
    z-index: -1;    /* derrière tout le contenu */
    transition: opacity 1.5s ease-in-out; /* affecte que les transitions d'opacity */
}
@keyframes fondFade{ /* animation */
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
/* partie été */
body::before {
    background: 
    linear-gradient(to bottom, rgba(4, 43, 151, 0.9) 0%, #5c566e 100%), /* gradient */ 
    url("../images/montains.png") no-repeat center top;   /* image centrée */;
    opacity: 1;
}

/* partie hiver */
body::after {
    background: linear-gradient(
        #000615,
        #9BCFFF, 75%,
        rgba(155,207,255,0.75) 90%,
        #FFFFFF
    ), url("../images/montains.png") no-repeat center top;   /* image centrée */;

    opacity: 0;
}

/* On active hiver */
body.hiver::before {
    opacity: 0;  /* fade out été */
}

body.hiver::after {
    opacity: 1;  /* fade in hiver */
}
.carteActivite{
    background: linear-gradient(rgb(255, 255, 255, 0) ,rgb(0, 0, 0));
    width: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 15px;
    height: 100%;
    white-space: normal;
}
.carteActivite div{
    background-color: transparent;
}
a{
    text-decoration: none; /* enlever le soulignement */
    color: white;
}

.carteActiviteimg{
    width: 50px;
}
.activiteAvecSwitch{
    display: flex; 
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 50%;
    color: white;
}
main{
    display:flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    align-items: center;
    gap: 5%;
}
#cartes{
    width: 70%;
    height: 39%;
    white-space: nowrap; /* empèche le retour à la ligne du texte*/
    overflow: hidden; /* cacher ce qui déborde*/
}
#cartes div {
    display: inline-block;
    width: 100%;
    height: 100%;
}
#switchSeason{
    display: flex;
    align-items: center;
    gap: 10px;
}
#hiver{
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
#ete{
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.display{
    opacity: 1 !important; /* priorité */
    transition: all .5s ease-in-out;
}
#carteHiver, #carteEte{ /* concerne les deux */
    text-align: center;
    word-wrap: break-word; /* retour à la ligne si texte trop long*/
    margin-top: 5%;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    height: 100%;
    width: 100%;
}
@media (max-width: 768px) { /* média querys */
    #cartes{
        width: 100vw;
    }
    .activiteAvecSwitch{
        gap: 20px
    }
    .carteActivite{
        width: 90%;
        max-width: 350px;
    }
    .activiteDesc{
        display: none;
    }
    h2{
        font-size: small;
    }
}

#cartes > div { /* sert à sélectionner l'enfant juste en dessous qui correspond */
    transition: transform 0.6s ease-in-out;
}

#cartes.slideHiver > div {
    transform: translateX(-100%);
}