@charset "UTF-8";
@import url("normalize.css");
@import url("grilles.css");

@import url("https://fonts.googleapis.com/css2?family=Style+Script&display=swap");


/* ALLER AU CONTENU */

body{
    height: 70vh;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='rgb(255,155,76)' /%3E%3C/svg%3E "), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='rgb(167, 203, 199)' /%3E%3C/svg%3E "), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='rgb(245, 211, 217)' /%3E%3C/svg%3E ");
    background-position: 25vh -10vh, -20vh 280vh, 15vh 450vh;
    background-size: 700px, 500px, 500px;
    background-repeat: no-repeat;
    transition: background-position;
    margin: 0;
}
@media (min-width: 800px){
    body{
        height: 70vh;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='rgb(255,155,76)' /%3E%3C/svg%3E "), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='rgb(167, 203, 199)' /%3E%3C/svg%3E "), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='rgb(245, 211, 217)' /%3E%3C/svg%3E ");
        background-position: 40vh -10vh, -20vh 240vh, 30vh 300vh;
        background-size: 650px, 500px, 800px;

    }
}
@media (min-width: 1000px){
    body {
        height: 70vh;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='rgb(255,155,76)' /%3E%3C/svg%3E "), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='rgb(167, 203, 199)' /%3E%3C/svg%3E "), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='rgb(245, 211, 217)' /%3E%3C/svg%3E ");
        background-position: 45vh -13vh, -20vh 250vh, 40vh 300vh;
        background-size: 850px, 500px, 800px;

    }
}
@media (min-width: 1200px){
    body {
        height: 70vh;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='rgb(255,155,76)' /%3E%3C/svg%3E "), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='rgb(167, 203, 199)' /%3E%3C/svg%3E "), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='rgb(245, 211, 217)' /%3E%3C/svg%3E ");
        background-position: 100vh -13vh, -20vh 230vh, 60vh 300vh;

    }
}

.main{
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
}

/*ALLER DIRECTEMENT AU CONTENU*/
.screen-reader-only,
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.screen-reader-only.focusable:active,
.screen-reader-only.focusable:focus,
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*ARRIÈRE-PLAN*/
.filAriane,
.grilleUn,
.grilleTrois,
.grilleCinq{
    color: #442B33;
    padding-top: 1em;
    padding-bottom: 1em;
}

.grilleUn{
    max-width: 100%;
    padding-left: 2em;
    margin: 0 ;
    align-self: center;

}
@media (max-width: 600px) {
    .grilleUn{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }
}
@media (min-width: 800px) {
    .grilleUn{
        padding-left: 2em;
        margin-left: 2em;

    }
}
@media (min-width: 1200px) {
    .grilleUn{
        padding-left: 2em;
        margin-left: 2em;

    }
}

.filAriane{
    text-align: right;
    padding-top: 1em;
    padding-bottom: 1em;
}

.pair{
    color: #ffffff;
    background-color: #442B33;
}

.hautPage{
    height: 50px;
    width: 100%;
}
.logo{
    padding-left: 2em;
}

.main{
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
}

/*CONTENEURS*/
.pair,
.impair{
    padding: 2em 0em;
}

/* POLICES */

.titre1{
    font-family: Roboto, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 4vh;
    max-width: 100%;
    align-self: stretch;
    padding-right: 1em;
    padding-left: 1em;
}

@media (max-width: 1000px) {
    .titre1{
        letter-spacing: -.04em;
        font-size: 3.5vh;
        max-width: available;
    }
}

@media (min-width: 1300px) {
    .titre1{
        letter-spacing: -.05em;
        font-size: 7vh;
    }
}


.titre2,
.titre3,
.titre4,
.titre5{
    font-family: "Style Script", fantasy;
    font-size: 5vh;
}
@media (min-width: 1000px) {
    .titre2,
    .titre3,
    .titre4,
    .titre5{
        font-size: 7vh;
    }
}
@media (min-width: 1000px) {
    .titre2,
    .titre3,
    .titre4,
    .titre5{
        font-size: 10vh;
    }
}

.filAriane,
.texte1,
.texte2,
.texte3,
.texte4{
    font-family: Roboto, Arial, sans-serif;
    font-size: 1em;
}


/*IMAGES*/

.imageEnTete{
    object-fit: contain;
    max-width: 100%;
    height: auto;
    box-shadow: -1em 1em #F5D3D9;
    z-index: -1;
    order: 1;
}
@media(min-width: 801px){
    .imageEnTete{
        order: 1;
        max-width: 500px;
        box-shadow: -1em 1em #F5D3D9;
    }
}
@media(min-width: 1250px){
    .imageEnTete{
        object-fit: content;
        box-shadow: -1em 1em #F5D3D9;
        max-width: 500px;
    }
}

.image2{
    box-shadow: -.8em .8em #A7CBC7;
    order: 2;
    max-width: 400px;
    margin: 20px 2em;
    object-fit: contain;
}
@media (min-width: 1000px){
    .image2{
        margin: 0 0;
        max-height: 100%;
    }
}

.image3{
    box-shadow: .8em .8em #FF9B4C;
    max-height: 350px;
}

.image4{
    box-shadow: -.6em .6em #A7CBC7;
    max-width: 100%;
}

/*GRILLES*/
.grilleUn{
    max-width: 100%;
}
.grilleDeux,
.grilleTrois,
.grilleQuatre{
    padding-bottom: 2em;
}


/*EN-TÊTE*/
@media(min-width: 801px){
    .titre1{
        order: 2;
    }
}
.texte1{
    max-width: 100%;
    padding-top: 1em;
    padding-right: 2em;
    order: 3;
}
@media(min-width: 801px){
    .texte1{
        order: 3;
        width: auto;
    }
}
@media (min-width: 800px){
    .texte1{
        padding-right: ;
    }
}


/** CORPS DU TEXTE **/
.titre2,
.titre3,
.titre4{
    padding-left: .5em;
    margin-top: 0;
    margin-bottom: 0;
}
.texte2,
.texte3,
.texte4{
    padding-right: 1em;
    padding-left: 1em;
    margin-bottom: 0;
}
@media(min-width: 600px){
    .texte1,
    .texte2,
    .texte4{
        padding-left: 3em;
    }
}

.titre2{
    align-self: start;
}
@media (min-width: 600px){
    .titre2{
        order: 2;
    }
}

.texte2{
    padding-left: 1em;
}
@media (min-width: 800px){
    .texte2{
        order: 2;
        padding: 0em 1em;
    }
}
@media (min-width: 1000px){
    .texte2{
        padding: 0em 1em;
    }
}
.texte2,
.image2{
    align-items: center;
}
.texte2{
    order: 3;
}

.texte3,
.texte4{
    padding-bottom: 1em;
}

/*TOURNÉE*/
.grilleQuatre{

}
.citation{
    font-family: "Style Script", fantasy;
    font-size: 2.5em;
    padding-top: 1em;
    padding-right: 2em;git status
    padding-left: 2em;
}
.dateTournee{
    list-style-type: none;
}
.listeTournee>li{
    margin-bottom: 1em;
}
.listeTournee div{
    text-indent: 1em;
}

.auteur{
    text-align: left;
}

.references{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
}
.references>ul {
    display: inline;
    list-style: none;
}
.references a{
    color: #442B33;
}


/*PIED DE PAGE*/
.footer .orange{
    height: 150px;
    background-color: #FF9B4C;
    background-image: url("../images/logo_timzine.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 250px 150px;
}
@media (min-width: 500px){
    .footer .orange{
        background-size: contain;
    }
}
.footer .rose{
    height: 50px;
    background-color: #F5D3D9;
}
.footer .brun{
    height: 100px;
    background-color: #442B33;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.reseauxSociaux_icone{
    padding: .5em;
    max-height: 60%;
    max-width: 60%;
}