body{
    position: relative;
}
#titre-et-description{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f6fa;
    padding: 30px 0;
    margin-bottom: 10px;
}#titre-et-description div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--width);
    color: #2d3436;
}#titre-et-description h1{
    width: 300px;
    text-transform: uppercase;
    font-weight: bold;
    font-family: Britannic Bold, serif;
    font-size: 50px;
    color: inherit;
}#titre-et-description.bureau_reglable h1{
    font-size: 30px;
    width: 340px;
}#titre-et-description.separateur_bureau h1{
    font-size: 30px;
    width: 383px;
}#titre-et-description p{
    width: 500px;
    font-style: italic;
    font-size: 13px;
    text-align: justify;
    font-family: var(--police-menu);
    font-weight: 400;
    line-height: 23.4px;
    color: inherit;
}.box-buble{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    border: 1px solid #dfe6e9;
    padding: 20px;
}.box-buble a {
    color: #2d3436;
    text-decoration: none;
}.box-buble .boxImage{
    width: 250px;
    height: 250px;
    position: relative;
}.box-buble img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}.box-buble .color{
    height: 50px;
}.box-buble .titre-et-detail{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}.titre-et-detail h3,
.titre-details-vote h2{
    text-align: left;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', sans-serif;
    font-style: italic;
    text-transform: capitalize;
    font-size: 20px;
    font-weight: 600;
}.titre-et-detail a#detail{
    text-align: right;
    font-family: consolas;
    font-size: 13px;
    position: relative;
}.titre-et-detail a#detail::after{
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: red;
    bottom: -5px;
    left: 0;
    transition: .5s ease;
}.titre-et-detail a#detail:hover::after{
    width: 100%;
}.titre-et-detail .fa{
    margin-right: 6px;
    color: red;
}.box-buble legend{
    text-align: center;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', sans-serif;
    font-style: italic;
    color: #929292;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 20px;
}.box-buble .grid-color{
    width: 80%;
    display: grid;
    grid-template-columns: repeat(4, 50px);
    grid-template-rows: repeat(5, 50px);
    grid-auto-flow: dense;
    grid-gap: 15px;
    justify-content: center;
    margin: auto;
}.grid-color div{
    border-radius: 10%;
}.elements-1{

    background: #000;
}
.elements-2{

    background: #3498db;
}
.elements-3{

    background: #9b59b6;
}
.elements-4{

    background: #1abc9c;
}

.elements-5{

    background: #f1c40f;
}
.elements-6{

    background: #e67e22;
}
.elements-7{

    background: #e74c3c;
}
.elements-8{

    background: #7f8c8d;
}
.elements-9{

    background: #badc58;
}
.elements-10{

    background: #dff9fb;
}
.elements-11{

    background: #30336b;
}
.elements-12{

    background: #e056fd;
}
.elements-13{

    background: #6ab04c;
}
.elements-14{

    background: #833471;
}
.elements-15{

    background: #6F1E51;
}
.elements-16{

    background: #1289A7;
}
.elements-17{

    background: #FDA7DF;
}
.elements-18{

    background: #12CBC4;
}
.elements-19{

    background: #5758BB;
}
.elements-20{

    background: #0652DD;
}

.grid-smart-office{
    width: var(--width);
    display: grid;
    grid-template-columns: repeat(auto-fill, 360px);
    grid-auto-flow: dense;
    justify-content: center;
    margin: auto;
}

.produit1 img{
    width: 400px;
    height: auto;
}.produit2 img{
    width: 50px;
    height: auto;
}.slick-next,
.slick-prev{
    display: none !important;
}
.slick-slider{
    width: 400px;
}#galerie-bubles{
    display: flex;
    flex-direction: column;
    align-items: center;
}.titre-details-vote{
    width: 675px;
    margin-right: 57px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}.titre-details-vote h2{
    margin-bottom: 10px;
    font-size: 25px;
}.titre-details-vote p{
    text-align: justify;
    font-family: var(--police-menu);
    font-size: 13px;
    margin-bottom: 10px;
    color: rgb(146, 146, 146);
    line-height: 20.4px;
}.titre-details-vote button{
    outline: none;
    border: none;
    box-shadow: none;
    background: #4cd137;
    padding: 10px;
    font-weight: bold;
    color: #fff;
    border-radius: 5px;
    margin-top: 10px;
    cursor: pointer;
}.titre-details-vote{
    display: block;
    width: 543px;
    margin-top: 20px;
}.titre-details-vote img{
    width: 400px;
    height: auto;
}main{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--width);
    margin: 40px auto;
}

#lightbox{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .8);
    z-index: 100;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -ms-backdrop-filter: blur(5px);
    -o-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    transform: scale(0);
    opacity: 0;
    transition: all .5s ;
}#lightbox.active{
    transform: scale(1);
    pointer-events: all;
    opacity: 1;
}#lightbox .grid-devis{
    position: relative;
    width: 900px;
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 0 1px #fff;
}#lightbox .grid-devis::after{
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background: rgba(0, 0, 0, .8);
    pointer-events: none;
    border-radius: 10px;
}#lightbox img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    pointer-events: none;
    user-select: none;
    z-index: -1;
    border-radius: 10px;
}#lightbox h1{
    color: #fff;
    font-family: var(--police-menu);
    z-index: 1;
    margin-top: 40px;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: bold;
}.form{
    display: grid;
    grid-template-areas: "nom prenom"
                         "telephone email"
                         "societe societe"
                         "submit .";
    grid-gap: 40px;
    justify-content: center;
    width: 90%;
    position: absolute;
    z-index: 2;
    padding: 40px;
    margin-top: 50px;
}.form .group-line:nth-child(1){
    grid-area: nom;
}.form .group-line:nth-child(2){
    grid-area: prenom;
}.form .group-line:nth-child(3){
    grid-area: telephone;
}.form .group-line:nth-child(4){
    grid-area: email;
}.form .group-line:nth-child(5){
    grid-area: societe;
}.form .group-line{
    height: 40px;
    width: 400px;
    position: relative;
}.form input,
.form textarea{
    outline: none;
    border: none;
    box-shadow: none;
    background: none;
    display: block;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #fff;
    border-radius: 0;
    color: var(--gray-150);
    font-weight: 100;
    resize: none;
}.form textarea{
    width: 210%;
}.form label{
    position: absolute;
    top: 25%;
    font-size: 15px;
    font-weight: 400;
    left: 10px;
    color: #fff;
    transition: all .3s ease-in;
}.form input:valid + label,
.form input:focus + label,
.form textarea:valid + label,
.form textarea:focus + label{
    font-size: 10px;
    background: var(--pistache);
    padding: 0px 7px;
    border-radius: 5px;
    top: -15px;
    left: 0;
}.form button{
    border-radius: 5px;
    cursor: pointer;
}.form button[type="submit"]{
    background: var(--green);
}.form button[type="reset"]{
    background: var(--red-light);
}#fermer{
    z-index: 1;
    position: absolute;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -3%;
    right: -1%;
    cursor: pointer;
    background: var(--red-light);
}#fermer .fa{
    font-size: 20px;
}

.colors{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
}.colors .color{
    width: 40px;
    height: 40px;
    border-radius: 10%;
}.colors .color:nth-child(1){
    background: #2d3436;
}.colors .color:nth-child(2){
    background: #000;
}.colors .color:nth-child(3){
    background: #bdc3c7;
}
@media all and (max-width: 949px){
    main{
        flex-direction: column;
    }.titre-details-vote{
        margin-right: 0;
    }
}
@media all and (max-width: 638px){
    #titre-et-description div {
        display: flex;
        flex-direction: column;
    }#titre-et-description h1{
        margin-bottom: 20px;
        text-align: center;
    }
}@media all and (max-width: 931px){
    #lightbox .grid-devis{
        width: var(--width);
        height: calc(var(--width) / 2);
    }
}@media all and (max-width: 900px){
    .form .group-line {
        width: calc((var(--width) / 2) - 50px);
    }.form{
        grid-gap: 20px;
    }#lightbox .grid-devis{
        height: calc(var(--width) - 250px);
    }
}@media all and (max-width: 638px){
    #lightbox .grid-devis{
        height: calc(var(--width) - 150px);
    }
}@media all and (max-width: 557px){
    #lightbox h1{
        text-align: center;
        font-size: 20px;
    }
    .form{
        grid-template-areas: "nom"
                             "prenom"
                             "telephone"
                             "email"
                             "societe"
                             "submit";
        grid-gap: 20px;
    }.form .group-line {
        width: calc(var(--width) - 40px);
    }
    #lightbox .grid-devis{
        height: calc(var(--width) + 50px);
    }.form label{
        font-size: 13.5px;
    }.form textarea{
        width: 100%;
    }
}@media all and (max-width: 451px){
    .titre-details-vote img{
        width: var(--width);
    }.produit1 img{
        margin-top: 20px;
        width: var(--width);
    }
    .slick-slider {
        width: var(--width);
    }
}@media all and (max-width: 544px){
    .titre-details-vote{
        width: var(--width);
    }
}@media all and (max-width: 512px){
    #titre-et-description p{
        width: var(--width);
    }
}@media all and (max-width: 417px){
    #lightbox .grid-devis{
        height: calc(var(--width) + 150px);
    }
}@media all and (max-width: 386px){
    #titre-et-description h1,
    #titre-et-description.separateur_bureau h1,
    #titre-et-description.bureau_reglable h1{
        width: var(--width);
        font-size: 30px;
    }
}@media all and (max-width: 362px){
    .grid-smart-office {
        grid-template-columns: repeat(auto-fill, 320px);
    }
}@media all and (max-width: 342px){
    .grid-smart-office {
        grid-template-columns: repeat(auto-fill, 300px);
    }
}