#reservationUi h2 {
    text-align: center;
    margin: 0px;
}

#reservationUi h3 {
    text-align: center;
    margin: 0px;

}

.canicule {
    background-color: #3e76b7 !important;
    background-image: url(sentier-des-lumieres/fond-canicule.jpg);
    color: #ffffff !important;
    padding: 10px !important;
    border-radius: 20px 0px 20px 0px;
}

@media (min-width: 501px) {
    
    #sentierContainer {
        display: grid;
        width: 100%;
        grid-template-areas: "a" "d" "e";
        justify-content: center;
        background-color: rgb(255, 255, 255);
        position: relative;
    }
    
    #sentPicContainer {
        position: relative;
    }
    
    #topIllustration {
        max-width: 100%;
        grid-area: a;
    }
    
    #topIllustrationSm {
        display: none;
    }
    
    @keyframes halo {
        0% {
            box-shadow: 0px 0px 10px rgba(196, 186, 107, 0.55);
        }10% {
            box-shadow: 0px 0px 10px rgba(148, 196, 107, 0.6);
        }20% {
            box-shadow: 0px 0px 10px rgba(196, 155, 107, 0.58);
        }30% {
            box-shadow: 0px 0px 10px rgba(148, 196, 107, 0.62);
        }40% {
            box-shadow: 0px 0px 10px rgba(196, 186, 107, 0.6);
        }50% {
            box-shadow: 0px 0px 10px rgba(196, 152, 107, 0.55);
        }60% {
            box-shadow: 0px 0px 10px rgba(148, 196, 107, 0.61);
        }70% {
            box-shadow: 0px 0px 10px rgba(196, 158, 107, 0.58);
        }80% {
            box-shadow: 0px 0px 10px rgba(196, 134, 107, 0.6);
        }90% {
            box-shadow: 0px 0px 10px rgba(175, 196, 107, 0.6);
        }
        100% {
            box-shadow: 0px 0px 10px rgba(175, 196, 107, 0.63);
        }
    }
    
    #sentierUiContainer {
        grid-area: a;
        position: absolute;
        bottom: 160px;
        right: 16px;
        background-color: rgb(255, 255, 255);
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-name: halo;
    }

    #sentierUi {
        align-self: center;
        color: #4d4d4d;
        padding: 8px;
        width: 300px;
        float: right;
    }
    
    #reservationUi h2 {
        color: #e56f26;
    }
    
    #reservationUi h3 {
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-name: gratuit6and;
    }
    
    @keyframes gratuit6and {
        0% {
            color: #e56f26;
        }
        80% {
            color: #e56f26;
        }
        81% {
            color: #ffffff;
        }
        99% {
            color: #ffffff;
        }
    }
    

    #sentierDates {
        grid-area: d;
        width: 100%;
    }
    
    .dates {
        font-size: 1.3em;
        text-align: center;
        color: #3e76b7;
    }
    .neufdate {
        font-size: 1.8em;
    }
    
    .pic {
        max-width: 100%;
        max-height: 100%;
    }
    
    #pic1 {
        grid-area: a;
        width: 100%;
        height: 100%;
        object-fit: contain;
        align-self: center;
    }

    #pic2 {
        grid-area: c;
        width: 100%;
        height: 100%;
        object-fit: contain;
        align-self: center;
    }
    
    #nombreUi {
        display: flex;
        justify-content: center;
        align-items:  center;
    }
    
    #nombrePlace {
        width: 64px;
        font-size: 16px;
        border: solid 2px #3e76b7;
        border-radius: 8px;
        text-align: center;
        padding: 4px;
    }
    
    #vipass {
        width: 128px;
        font-size: 16px;
        border: solid 2px #3e76b7;
        border-radius: 8px;
        text-align: center;
        padding: 4px;
        display: block;
        margin-right: 10px;
    }
    
    #bt_vipass {
        width: 38px;
        height: 38px;
        background-image: url(pics/bt_vipass_small.png);
    }
    
    #bt_vipass:hover {
        opacity: 0.7;   
    }

    .sentierLabel {
        color: #3e76b7;
        font-weight: bold;
        margin-right: 32px;
    }

    .fiche {
        border-radius: 8px;
        background-color: #215b95;
        padding: 4px;
        color: aliceblue;
        margin: 8px;
        display: inline-grid;
        grid-template-areas: "a b" "c b";
        width: 30%;
        cursor: pointer;
    }

    #dateDisplayer {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .ficheDate {
        grid-area: a;
        align-self: center;
        font-size: 18px;
        text-align: center;
        /*background-color: rgba(240, 248, 255, 0.49);*/
    }

    .ficheHeure {
        grid-area: c;
        justify-self: center;
        align-self: center;
        font-size: 16px;
    }

    .ficheBouton {
        grid-area: b;
        background-color: #932179;
        color: #eac3e4;
        display: inline-block;
        border-radius: 8px;
        align-self: end;
        justify-self: end;
        width: 48px;
        height: 48px;
        text-align: center;
        margin: 8px;
        cursor: pointer;
        background-image: url(pics/choisir_sentier.png);
    }

    .ficheBouton:hover {
        background-color: #b7409c;
    } 
    
    #textContent {
        grid-area: e;
        width: 70%;
        margin: 0px auto;
        padding-top: 64px;
        font-size: 1.3em;
        background-color: rgba(255, 255, 255, 0.6);
        padding: 10px;
    }
    
    #textContent p{
        grid-area: e;
        width: 95%;
        margin: 0px auto;
        font-size: 1em;
        background-color: rgba(255, 255, 255, 0.6);
        padding: 0px 10px;
        text-align: justify;
        line-height: 1.5em;
        color: #747474;
    }
    
    #textContent h1 {
        font-size: 1.4em;
        text-align: center;
        color: #3e76b7;
    }
    
    .firstTitle {
        font-size: 2em !important;    
    }
    
    .sentierIllustration {
        float: left;
        margin: 10px;
        border: solid 1px #000000;
    }
    
    /*-------------------------- Diary ----------------------------*/
    
    .titreDiary {
        font-size: 2em;
        text-align: center;
        color: #3e76b7;
    }
    
    /*----------------------- revue de presse -----------------*/
    
    #revueDePresseMobil {
        display: none;
    }
    
    #revueDePresseDeskTop {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    /*------------------------------------ images larges -------------*/
    
    .panoImage {
        text-align: center;
        padding: 4px;
        margin: 20px 0px;
    }
    
    .panoParag {
        width: 100%;
        text-align: center;
        color: #ce35c2 !important;
    }
    
    .bigImage {
        max-width: 450px;
    }
    
    /*-----------------------*/
    
    @keyframes lutOffert {
        0% {
            color: aliceblue;
        }
        50% {
            color: aliceblue;
        }
        51% {
            color: #3e76b7;
        }
        60% {
            color: aliceblue;
        }
        61% {
            color: #3e76b7;
        }
        70% {
            color: aliceblue;
        }
        71% {
            color: #3e76b7;
        }
        80% {
            color: aliceblue;
        }
        100% {
            color: aliceblue;
        }
    }
    
    .lutinOffert {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #3e76b7;
        border-radius: 8px;
        font-size: 14px;
        color: #ffffff;
        padding: 8px 0px;
        margin-top: 8px;
        animation-name: lutOffert;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
    
    .sentierInterrog {
        width: 30px;
        height: 30px;
        background-image: url(pics/sentier_interrog_sm.png);
        margin-left: 10px;
    }
    
}

@media (max-width: 500px) { /*------------------------------------------------ MOBIL -----------------*/
    
    #nombreUi {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    #topIllustration {
        display: none;
    }
    
    #topIllustrationSm {
        margin-top: 16px;
    }
    
    #reservationUi {
        background-color: #3e76b7;
        margin: 32px;
        padding: 16px;
        color: #ffffff;
    }
   
    
    @keyframes gratuit6Mobil {
        0% {
            color: #ffffff;
        }
        80% {
            color: #ffffff;  
        }
        100% {
            color: rgba(4, 217, 36, 0);
        }
    }
    
    #reservationUi h3 {
        animation-name: gratuit6Mobil;
        animation-duration: 1s;
        animation-iteration-count: infinite;
    }
    
    #nombrePlace {
        width: 64px;
        font-size: 32px;
        border: solid 2px #215b95;
        border-radius: 8px;
        text-align: center;
    }
    
    #vipass {
        width: 256px;
        font-size: 32px;
        border: solid 2px #3e76b7;
        border-radius: 8px;
        text-align: center;
        padding: 4px;
        display: block;
        margin-right: 10px;
    }
    
     #bt_vipass {
        width: 55px;
        height: 55px;
        background-image: url(pics/bt_vipass_big.png);
    }
    
    .sentierLabel {
        color: #ffffff;
        font-weight: bold;
    }
    
    .fiche {
        width: 80%;
        border-radius: 8px;
        background-color: #d12c85;
        padding: 4px;
        color: aliceblue;
        margin: 0px auto;
        margin-bottom: 8px;
        display: grid;
        grid-template-areas: "a b" "c b";
    }
    
    .dates {
        font-size: 1.3em;
        text-align: center;
        color: #3e76b7;
    }
    .neufdate {
        font-size: 1.8em;
        display: block;
    }
    
    #sentierUi {
        grid-area: b;
    }

    #sentierDates {
        grid-area: d;
    }
    
    .ficheDate {
        grid-area: a;
        text-align: center;
    }
    
    .ficheHeure {
        grid-area: c;
        text-align: center;
    }
    
    .ficheBouton {
        grid-area: b;
        background-color: #932179;
        color: #eac3e4;
        display: inline-block;
        /*padding: 4px;*/
        border-radius: 8px;
        align-self: center;
        justify-self: end;
        width: 48px;
        height: 48px;
        background-image: url(pics/choisir_sentier.png);
    }
    
    /*#sentierContainer {
        display: grid;
        width: 100%;
        grid-template-areas: "b" "d" "a" "c";
    }*/
    
    .pic {
        max-width: 100%;
        max-height: 100%;
    }
    
    #pic1 {
        grid-area: a;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    #pic2 {
        grid-area: c;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    #textContent p{
        grid-area: e;
        width: 95%;
        margin: 0px auto;
        padding-top: 64px;
        font-size: 1em;
        background-color: rgba(255, 255, 255, 0.6);
        padding: 10px;
        text-align: justify;
        line-height: 1.2em;
        color: #747474;
    }
    
    #textContent h1 {
        background-color: #90b21c;
        color: #ffffff;
        font-size: 1.2em;
        padding 8px;
        text-align: center;
    }
    
    .sentierIllustration {
        display: block;
        width: 450px;
        margin: 0px auto;
        border: solid 1px #000000;
    }
    
    /*-------------------------- Diary ----------------------------*/
    
    .titreDiary {
        background-color: #90b21c;
        color: #ffffff;
        font-size: 1.2em;
        padding 8px;
        text-align: center;
    }
    
    /*-------------------------- revue de press --------------------*/
    
    #revueDePresseDeskTop {
        display: none;
    }
    
    #revueDePresseMobil {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    /*-----------------*/
    
    .panoImage img {
        max-width: 500px;
        margin: 40px 0px;
    }
    
    .panoParag {
        width: 100%;
        text-align: center;
        color: #ce35c2 !important;
        
    }
    
    /*------------------------------*/
    
    @keyframes lutOffert {
        0% {
            color: aliceblue;
        }
        50% {
            color: aliceblue;
        }
        51% {
            color: #3e76b7;
        }
        60% {
            color: aliceblue;
        }
        61% {
            color: #3e76b7;
        }
        70% {
            color: aliceblue;
        }
        71% {
            color: #3e76b7;
        }
        80% {
            color: aliceblue;
        }
        100% {
            color: aliceblue;
        }
    }
    
    .lutinOffert {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #315a89;
        border-radius: 8px;
        font-size: 22px;
        color: #ffffff;
        padding: 8px 0px;
        margin-top: 8px;
        animation-name: lutOffert;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
    
    .sentierInterrog {
        width: 30px;
        height: 30px;
        background-image: url(pics/sentier_interrog_sm.png);
        margin-left: 10px;
    }
}

#partenaires {
    text-align: center;
    padding-top: 32px;
}

.revueDePresseMini {
    border: solid 1px #bfbfbf;
}

/*------------------------------ diaporama -------------------------------*/
    
.diaporamaContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.diaporamaMini {
    border: solid 1px #000000;
    margin: 5px;
    cursor: pointer;
}

strong {
    color: #3e76b7;
}