article {
    background-image: url("./img/galerie/accueil/Le_Poinconneur.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 5
}

article > div {
    width: 60%;
    margin: 0 auto;
    border: solid rgb(0, 0, 0, 0) 1px;
}

article div div {
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: auto;
    width: 400px;
    background-color: #F5EFEA;
    border: solid black 0.1rem;
    padding: 15px 15px 0 15px;
}

h3 {
    font-family: 'Strong Poinco';
    font-size: 2rem;
    font-weight: 500;
    color: black;
    border: solid black 1px;
    margin: 0;
    text-align: center;
}

article p {
    font-family: "Playpen Sans";
    font-weight: 500;
    font-size: 1.3rem;
}

h2 {
    font-family: 'Strong Poinco';
    font-size: 2.7em;
    font-weight: 500;
    margin: 0;
}

.itineraire {
    border-left: 8px dashed black;
    position: absolute;
    left: 17%;
}

.itinerairePlacement {
    border-left: 8px dashed rgba(0, 0, 0, 0);
}

#itineraireDepart {
    border-left: 8px dashed rgb(0, 0, 0, 0);
}

#itineraireEscaleHaut {
    height: 105%;
    bottom: 85%;
}

#itineraireEscale {
    height: 90.6%;
}

#itineraireDestination {
    border-left: 8px dashed rgba(0, 0, 0, 0);
}

#itineraireDestinationHaut {
    border-left: 8px dashed white;
    height: 20%;
    bottom: 90%;
}

.sectionTitre {
    display: flex;
    align-items: center;
    margin-bottom: 7%;
}

.iconeHeure {
    height: 65px;
    margin: 0 1% 0 0;
}

.pointItineraire {
    position: relative;
    right: 55%
}

section > div {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 60%;
    margin: 0 auto;
    padding: 3% 0;
}

section p {
    font-family: "Playpen Sans";
    font-weight: 500;
    font-size: 1.3rem;
}

.blocTexte {
    width: 50%;
    padding-right: 7%;
}

.sectionPhoto {
    width: 50%;
    max-width: 1000px;
    overflow: hidden;
    align-self: center;
    border: solid white 10px;
    border-radius: 8px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
}

#bar .sectionPhoto {
    box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.3);
}

.photo {
    width: 100%;
    height: 100%;
    display: flex;
    animation: slide 16s infinite;
}

@keyframes slide {
    0%, 30%{
        transform: translateX(0);
    }
    40%, 60%{
        transform: translateX(-100%);
    }

    70%, 90%{
        transform: translateX(-200%);
    }

    100%{
        transform: translateX(0);
    }
}

.sectionPhoto img {
    width: 100%;
    flex-shrink: 0;
}

#cafe {
    box-shadow: 0px 0px 15px 0px black;
    position: relative;
    z-index: 4;
}

#resto {
    background-color: #C09CFF;
    box-shadow: 0px 0px 15px 0px white;
    position: relative;
    z-index: 3;
}

#bar {
    background-color: #163270;
    color: white;
    box-shadow: 0px 0px 15px 0px white;
    position: relative;
    z-index: 2;
}

#actu {
    background-color: #1E283D;
    color: white;
    padding: 3% 30%;
}

#actu div div {
    justify-content: flex-end;
}

@media only screen and (max-width: 1400px) {
    #itineraireEscale {
            height: 92.6%;
    }
}

@media only screen and (max-width: 1300px) {
    article > div {
        width: 80%;
    }

    section > div {
        width: 80%;
        margin: 0 7% 0 auto;
    }

    .itineraire {
        left: 8%;
    }

    #actu {
        padding: 3% 20%;
    }
}

@media only screen and (max-width: 1000px) {
    section p {
        font-size: 2.08vw;
    }
    
    #itineraireEscale {
        height: 94%;
    }

    .blocTexte {
        padding-right: 5%;
    }
}


@media only screen and (max-width: 900px) {
    .itineraire {
        left: 7%;
    }
}

@media only screen and (max-width: 800px) {
    article > div {
        width: 90%;
    }

    article div div {
        width: 340px;
    }

    h3 {
        font-size: 1.9rem;
    }

    article p {
        font-size: 1.1rem;
    }

    section > div {
        flex-direction: column;
    }

    .pointItineraire {
        width: 50px;
        right: 58%;
    }

    #itineraireEscaleHaut {
        bottom: 97%;
    }

    #itineraireEscale {
        height: 97%;
    }

    #itineraireDestinationHaut {
        bottom: 92%;
    }

    .blocTexte {
        padding-right: 0;
        width: 100%;
    }

    .sectionTitre {
        margin-bottom: 0;
    }

    h2 {
        font-size: 2.3em;
    }

    .iconeHeure {
        height: 50px;
    }

    section p {
        font-size: 104%;
    }

    .sectionPhoto {
        width: 80%;
        margin: 2% 0;
    }

    #actu .sectionTitre {
        margin: 3% 0 3% auto;
    }

    #actu {
        padding: 3% 10%;
    }
}


@media only screen and (max-width: 600px) {
    article {
        padding: 10%;  
    }

    article > div {
        width: 100%;
    }

    article div div {
        width: 96%;
        background-color: #f5efead6;
        padding: 3%;
        margin: 0;
    }

    article p {
        margin: 2% 0;
    }

    section > div {
        margin: 0 5% 0 auto;
    }

    #itineraireEscaleHaut {
        height: 103%;
    }
}

@media only screen and (max-width: 400px) {
    .pointItineraire {
        width: 55%;
        right: 32%;
        top: 0.45rem;
    }

    .itineraire {
        border-width: 7px;
    }

    #itineraireEscale {
        height: 97.5%;
    }

    #itineraireDestinationHaut {
        border-width: 7px;
    }

    #itineraireDestinationHaut {
        bottom: 93%;
    }
}