/*
Theme Name: Vision du 15e
Theme URI:
Author: BluedyRimuru
Author URI: https://github.com/BluedyRimuru
Description: Thème utilisé pour le site de Vision du 15e
Version: 1.0
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 5px;
    height: 7px;
}

::-webkit-scrollbar-thumb {
    background: #5AC8DC;
    height: 10px;
    border-radius: 20px;
}

::-webkit-scrollbar-track {
    background: #1D1E22;
}

/*

  _   _             _                          _   _             _             _   _
 | \ | | __ ___   _| |__   __ _ _ __          | \ | | __ ___   _(_) __ _  __ _| |_(_) ___  _ __
 |  \| |/ _` \ \ / / '_ \ / _` | '__|  _____  |  \| |/ _` \ \ / / |/ _` |/ _` | __| |/ _ \| '_ \
 | |\  | (_| |\ V /| |_) | (_| | |    |_____| | |\  | (_| |\ V /| | (_| | (_| | |_| | (_) | | | |
 |_| \_|\__,_| \_/ |_.__/ \__,_|_|            |_| \_|\__,_| \_/ |_|\__, |\__,_|\__|_|\___/|_| |_|
                                                                   |___/
                                   Navbar - Navigation
 */

.menu {
    display: flex;
    justify-content: center;
    align-items: center;
}
.mobile_ul {
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
}

.navbar-contenu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 30px 10%;
    background-color: #24252a;
}

.logo {
    margin-right: auto;
}

.nav__links {
    list-style: none;
    display: flex;
}

.nav__links a,
.last,
.overlay__contents div ul li a {
    font-weight: 500;
    font-size: 1.1em;
    color: #edf0f1;
    text-decoration: none;
}

ul li {
    padding: 0px 20px;
}

ul li a {
    transition: all 0.3s ease 0s;
}

.last a:hover {
    color: white;
}

ul li a:hover {
    color: #0088a9;
}

.last {
    margin-left: 20px;
    padding: 9px 25px;
    background-color: rgba(0, 136, 169, 1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

.last:hover {
    background-color: rgba(0, 136, 169, 0.8);
}

/* Navbar - Mobile Navigation */

.nav-menu {
    display: none;
}

.logo-menu {
    display: none;
}

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    /*background-color: #24252a;*/
    background-color: rgba(36, 37, 42, 0.9);
    overflow-x: hidden;
    transition: all 0.5s ease 0s;
}

.overlay--active {
    width: 100%;
}

.overlay__contents {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.overlay a {
    padding: 15px;
    font-size: 36px;
    display: block;
    transition: all 0.3s ease 0s;
}

.overlay a:hover,
.overlay a:focus {
    color: #0088a9;
}

.overlay .close {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    color: #edf0f1;
    cursor: pointer;
}

@media screen and (max-height: 450px) {
    .overlay a {
        font-size: 20px;
    }

    .overlay .close {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}

@media only screen and (max-width: 879px) {
    .nav__links,
    .last {
        display: none;
    }

    .mobile_ul .last {
        display: initial;
    }

    .nav-menu {
        display: initial;
    }

    .logo-menu {
        display: initial;
    }

    li {
        list-style-type: none;
    }

    .nav__links a,
    .overlay__contents div ul li a {
        font-weight: 500;
        font-size: 2em;
        color: #edf0f1;
        text-decoration: none;
    }

    .mobile_ul li a,
    .last {
        margin-left: 0;
        padding: 0 0;
        border: none;
        border-radius: 0;
        color: #edf0f1;
        text-decoration: none;
    }

    .mobile_ul li {
        padding-left: 0;
    }

    .cta2 {
        margin-left: 20px;
        padding: 9px 25px;
        background-color: rgba(0, 136, 169, 1);
        border: none;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.3s ease 0s;
        color: white;
    }
    .overlay a {
        transition: 0s;
    }
}
/*

  _____           _                      ____  _          _       _        ____
 |  ___|__   ___ | |_ ___ _ __          |  _ \(_) ___  __| |   __| | ___  |  _ \ __ _  __ _  ___
 | |_ / _ \ / _ \| __/ _ \ '__|  _____  | |_) | |/ _ \/ _` |  / _` |/ _ \ | |_) / _` |/ _` |/ _ \
 |  _| (_) | (_) | ||  __/ |    |_____| |  __/| |  __/ (_| | | (_| |  __/ |  __/ (_| | (_| |  __/
 |_|  \___/ \___/ \__\___|_|            |_|   |_|\___|\__,_|  \__,_|\___| |_|   \__,_|\__, |\___|
                                                                                      |___/
                      Footer - Pied de Page - Copyright
 */

.copyright {
    padding: 20px 45px;
    /*border-top: 2px solid rgba(0, 0, 0, 0.1);*/
    /*border-top-color: aquamarine;*/
    text-align: center;
    background: #1c2127;
}

.copyright p:nth-child(1) {
    color: white;
}

.copyright a {
    color: #fb911f;
    text-decoration: none;
    font-weight: 600;
    font-style: italic;
}

/*

  ____                        _ _ ___           _
 |  _ \ __ _  __ _  ___    __| ( )_ _|_ __   __| | _____  __
 | |_) / _` |/ _` |/ _ \  / _` |/ | || '_ \ / _` |/ _ \ \/ /
 |  __/ (_| | (_| |  __/ | (_| |  | || | | | (_| |  __/>  <
 |_|   \__,_|\__, |\___|  \__,_| |___|_| |_|\__,_|\___/_/\_\
             |___/
              Page d'Index - index.php - Accueil
 */


.banniereAccueil {
    position: relative;
    width: 100%;
    /*min-height: 100vh;*/
    /*background-color: #0a4b78;*/
    background-color: #ffffff;
    background-position: center;
    background-size: cover;

}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.nav-opacity {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #1d1e227c;
    height: 45px;
}

.nav-opacity a:hover {
    color: #5AC8DC;
}

.iconsAppli {
    margin: 10px;
    text-decoration: none;
    color: white;
}

.contenu-img-vitrine {
    padding-top: 50px;
    padding-right: 200px;
    padding-left: 200px;
}

.contenu-img-border {
    display: flex;
    justify-content: space-between;
}

.img-girl {
    width: 25%;
    height: auto;
}

.img-oeil {
    width: 35%;
    height: auto;
}

.img-accueil-vitrine {
    /*width: auto;*/
    /*height: 300px;*/
    border-radius: 20px;
}

.contenu-qsn {
    padding-right: 200px;
    padding-left: 200px;
}

.contenu-qsn-text {
    background-color: #ececec;
    /* background-color: #222831; */
    /* background-color: #e1dada; */
    border-radius: 10px;
    padding: 20px;
}

.contenu-qsn-text h1 {
    /*display: flex;*/
    /*justify-content: center;*/
    padding-bottom: 20px;
    font-size: 30px;
    font-weight: 800;
    background: -webkit-linear-gradient(45deg, #453cd5, #a0edca 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

.contenu-qsn-text p {
    /*color: white;*/
    color: #1d3848;
}

.avis-contenu {
    /*border-top: 2px solid rgba(0, 0, 0, 0.1);*/
    /*border-top-color: aquamarine;*/
    background: #1c2127;
}

/*
        Mbappé - Catégorie
 */

.img-mbappe {
    width: 20%;
    height: auto;
}

.contenu-col-text-a p:nth-child(1) {
    padding-bottom: 30px;
}

.contenu-collections {
    display: flex;
    align-content: center;
}

.contenu-col-text-a {
    width: 100%;
}

.btn-collection {
    margin-left: 20px;
    padding: 9px 25px;
    background: #579AF6;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    color: white;
    font-weight: 500;
    text-decoration: none;
}

.btn-collection:hover {
    background: #4c87d8;
}

.btn-collection a {
    color: white;
    text-decoration: none;
}

.div-line {
    padding: 60px;
    width: auto;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-content: center;
}

.top-space {
    padding-top: 50px;
}

@media screen and (max-width: 1120px) {
    .responsive-img-vitrine {
        display: none;
    }
    .img-girl {
        width: 40%;
        height: auto;
    }
    .img-oeil {
        width: 55%;
        height: auto;
    }
}

@media screen and (max-width: 1120px) {
    .contenu-qsn {
        padding-right: 25px;
        padding-left: 25px;
    }
    .contenu-img-vitrine {
        padding-right: 25px;
        padding-left: 25px;
    }
}

@media screen and (max-width: 850px) {
    .img-mbappe {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .img-girl {
        display: none;
    }
    .img-oeil {
        width: 100%;
        height: auto;
    }
}

/* Page d'Informations - Informations */

.tittle{
    margin-top: 50px;
}

.img-logo{
    border-radius: 50%;
}

.flex{
    display: flex;
    justify-content: center;
    margin: 10px 0;
}
.flex-ctc{
    display: flex;
    justify-content: center;
    margin-top: 75px;
}


hr{
    border-top: solid grey;
    margin: 20px 50px;
}

.informations {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.w40{
    margin: 0 100px;
}
.w10{
    width: 10%;
    min-width: 40px;
    margin: 0 10px 0 50px;

}
.w90{
    width: 90%;
    margin: auto;
}
.button-gmaps{
    background: #579AF6;
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    margin: 20px 150px;
    display: flex;
    justify-content: center;
}
.button-gmaps:hover{
    background: #4c87d8;
}

.formulaire{
    font-size: 20px;
    margin-top: 50px;
}
textarea {
    resize: none;
}

.contenu-gauche{
    vertical-align: center;
}
@media screen and (max-width:  1120px) {
    .flex-ctc{
        display: block;
    }
    .contenu-droite{
        text-align: center;
        margin-top: 50px;
    }
    .formulaire{
        margin-top: 50px;
    }
    .button-gmaps{
        margin: 20px 130px;
    }
    .w10{
        width: auto;
        margin: 0 10px 0 100px;
    }
    .w90{
        width: 70%;
    }
    hr{
        margin: 20px 100px;
    }
}

@media screen and (max-width:  850px) {
    .w10{
        margin: 0 10px 0 50px;
    }
    .flex-ctc{
        margin-top: 20px;
    }
    .formulaire{
        margin-top: 50px;
    }
}

@media screen and (max-width:  650px) {
    .w10{
        margin: 0 10px 0 20px;
    }
    .button-gmaps{
        margin: 20px 100px;
    }
    hr{
        margin: 20px;
    }
    .img-devanture{
        width: 300;
        height: 300;
    }
    .w40{
        margin: 0;
    }
    .formulaire{
        margin-left: 20px;
        margin-right: 20px;
    }
}
/* Page d'erreur - Erreur */
.img-404{
    margin: 50px 0 100px;
}

.aligncenter, div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.alignleft {
    float: left;
}
.alignright {
    float: right;
}

.content{
    min-height: calc(100vh - 65px - 111.42px);
}

@media screen and (max-width: 879px) {
    .content {
        min-height: calc(100vh - 65px - 103px);
    }
}

@media screen and (max-width: 879px) {
    .content {
        min-height: calc(100vh - 65px - 103px);
    }
}

@media screen and (max-width: 500px) {
    .content {
        min-height: calc(100vh - 90px - 103px);
    }
}

h2{
    margin: 20px 0;
}
.text-decoration{
    text-decoration: none;
}

/* Page politique de confidentialité - Politique de confidentialité */
.politique{
    margin: 50px 200px;
}

@media screen and (max-width:  1120px) {
    .politique{
        margin: 30px;
    }
}

/*
  _   _              ____      _ _           _   _
 | \ | | ___  ___   / ___|___ | | | ___  ___| |_(_) ___  _ __  ___
 |  \| |/ _ \/ __| | |   / _ \| | |/ _ \/ __| __| |/ _ \| '_ \/ __|
 | |\  | (_) \__ \ | |__| (_) | | |  __/ (__| |_| | (_) | | | \__ \
 |_| \_|\___/|___/  \____\___/|_|_|\___|\___|\__|_|\___/|_| |_|___/
                        Nos collections
 */

.art-collection h1 {
    font-weight: 800;
    font-size: 30px;
    /*background: -webkit-linear-gradient(315deg, rgba(255,238,101,1) 0%, rgba(230,179,23,1) 35%, rgba(232,142,6,1) 100%);*/
    background: linear-gradient(90deg, rgba(101,122,255,1) 0%, rgb(53, 112, 202) 35%, rgb(27, 73, 179) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-content: center;
}

.container-collection {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 30px;
    background-color: #ececec;
    /* background-color: #e1dada; */
    border-radius: 20px;
}

.container-collection h2 {
    margin-bottom: 10px;
    background: -webkit-linear-gradient(45deg, #453cd5, #a0edca 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sect-noscollections {
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 200px;
    padding-right: 200px;
    min-height: calc(100vh - 115px - 103px);
    width: 100%;
    background-color: #ffffff;
    /* background-color: #c3c0c0; */
}

@media screen and (max-width:  1120px) {
    .sect-noscollections {
        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 100px;
        padding-right: 100px;
    }
}
@media screen and (max-width:  600px) {
    .sect-noscollections {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 25px;
        padding-right: 25px;
    }
}