@font-face {
    font-family: "KingthingsPetrock";
    src: url(../font/title/kingthings-petrock/KingthingsPetrock.ttf);
}
@font-face {
    font-family: "BlendaScript";
    src: url(../font/text/blenda_script/BlendaScript.otf);
}
/*Stockage de Propriétés*/
:root{
    --btn-color-- : #BF6A1F;
    --bg-color-- : #8c441be6;
    --text-color--: rgb(255, 255, 255);
    --border-card-radius--: 30px;
    --border-form-radius--:10px;
    --border-footer-radius--:60px;
}
body{
    box-sizing: border-box;
    vertical-align: baseline;
    margin: 0 auto;
    scroll-behavior: smooth;
    /*Ajout de l'image de Fond en  mobile*/
    background: no-repeat url(../img/bg_mobile.png);
    background-size: cover;
    color: var(--text-color--);
}
.center-form{
    display:flex;
    justify-content: center;
    align-items: center;
}
.card,.nav-color{
    background-color: var(--bg-color--);
}
.button-color{
    background-color: var(--btn-color--);
    color: var(--text-color--);
    border-radius: var(--border-card-radius--) ;
}
.button-color:hover{
    background-color: var(--bg-color--);
    border-color: var(--btn-color--);
}
.card-color{
    background-color: var(--bg-color--);
    border-radius: var(--border-card-radius--);
    color: var(--text-color--);

}
.icons:hover{
    color: var(--text-color--);
}
.link{
    color: var(--text-color--);
}
.bg-color{
    background-color: var(--bg-color--);
}
.text-color{
    color:var(--text-color--);
}
.contact, .find-us{
    background-color: var(--bg-color--);
}
.rounded{
    border-radius: var(--border-footer-radius--);
}
.text-sm {
    font-size: .85rem;
}
.text-xs { 
    font-size: .80rem;
}
.title{
    font-family: "KingthingsPetrock";
}
.text{
    font-family: "BlendaScript";
}
.shrink{
    width: 315px;
}
.event-list{
    display:flex;
    flex-direction: column;
}
.logo{
    width: 325px;
}
.card-width{
    width:350px;
    margin-left: 50px;
}
.find-us{
    width: 375px;
    padding-bottom: 20px;
}
.contact{
    width: 375px;
    display: flex;
    flex-direction: column;
    margin-top: 50px;
}
/*Ajout de l'affichage en colonne du footer*/
.footer{
    display: flex;
    flex-direction: column;
}
.icon-box{
    display: flex;
    flex-direction: row;
}
.icons{
    color: var(--btn-color--);
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}
.next-event{
    width: 100%;
    max-width: 860px;
    padding: 25px;
}
.next-event-inner{
    padding: 12px;
    margin-bottom: 16px;
}
.events-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
}
.event-card{
    width: 75%;
    overflow: hidden;
    border-radius: var(--border-card-radius--);
}
.section-box {
    width: 100%;
    max-width: 860px;
}
.form{
    color: var(--text-color--);
    width: 90%;
    display: flex;
    align-content: center;
    margin-left: 7%;
    margin-right: 3%;

}


@media screen and (min-width: 900px) {
    body{
        /*Ajout de l'image de fond PC*/
        background-image: url(../img/bg_pc.png);
    }
    .logo{
        width: 33%;
    }
    .contact,.find-us{
        margin-left: 30px;
        margin-top: 50px;
        padding-bottom: 0;
    }
    .footer{
        flex-direction: row;
        justify-content: space-between ;
        padding: 28px 24px;
    }
    .events-box{
        flex-wrap: nowrap;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
    .event-card{
        width: calc(33% - 10px);
        max-width: 300px;
    }
    .event-list{
        flex-direction: row;
    }
    .form{
        width: 40%;
        margin: auto;
    }
}