/*___________________________________________*/


/*GLOBAL BODY STYLE FOR WEBSITE*/

body {
    overflow-x: hidden;
    max-width: 100%;
    min-height: 100%;
    height: auto;
    background: #f2f2f2;
    color: rgba(29, 31, 32, 0.75);
    margin: 0;
    padding: 0;
    font-family: "Manrope", sans-serif;
    display: flex;
    flex-direction: column;
    align-content: center;
    font-size: 14px;
    /*SIDENAV MARGIN STYLE*/
    /*ONEPAGE MARGIN STYLE*/
}

@media screen and (min-width: 1920px) {
    body {
        font-size: 16px;
    }
}

@media screen and (max-width: 720px) {
    body {
        font-size: 12px;
        padding-bottom: 100px;
    }
    .name-input {
        display: none;
    }
    iframe {
        width: 250px;
    }
}

body * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body #sidenav {
    display: flex;
    width: 20%;
    position: fixed;
    top: 0;
    left: 0vw;
    bottom: 0;
    z-index: 100;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

body #page {
    position: relative;
    left: 15%;
    width: 85%;
    padding: 4vw;
    z-index: 0;
}

@media screen and (max-width: 1024px) {
    body #sidenav {
        width: 15%;
    }
    body #sidenav ul {
        display: none;
    }
    body #page {
        left: 5%;
        margin: 0 auto;
        width: 85%;
    }
}

@media screen and (max-width: 720px) {
    body #sidenav {
        width: 15%;
        height: 5%;
        position: absolute;
    }
    body #sidenav ul {
        display: none;
    }
    body #page {
        padding-top: 0;
        padding: 0;
        left: 0;
        width: 90%;
    }
    body #gestion_de_parc .card-large {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        padding-top: 10vw;
        justify-content: center;
    }
}


/*PLACEMENT TYPE*/

*[class*="columns"] {
    display: flex;
    flex-wrap: wrap;
}

@media screen and (max-width: 1024px) {
    *[class*="columns"] {
        flex-direction: column;
    }
}

*[class*="columns"][class*="middle"] {
    align-items: center;
}

@media screen and (max-width: 1024px) {
    *[class*="columns"][class*="middle"] {
        justify-content: center;
    }
}

*[class*="columns"][class*="baseline"] {
    align-items: baseline;
}

*[class*="columns"][class*="spcbtwn"] {
    justify-content: space-between;
}

*[class*="columns"][class*="spcrnd"] {
    justify-content: space-around;
}

*[class*="columns"] .column {
    min-width: 300px;
}

@media screen and (max-width: 720px) {
    *[class*="columns"] .column {
        min-width: 200px;
        max-width: 90%;
    }
}

*[class*="columns"] .column[role="text"] {
    flex: 1;
    order: 2;
    padding: 5vw;
}

*[class*="columns"] .column[role="img"] {
    flex: 1.5;
    order: 2;
}

*[class*="columns"] .column[role="form"] {
    order: 1;
    padding: 5vw;
}

.listes {
    padding: 5vh 5vw 16vh;
}

.sidenav li a {
    padding: 6px;
    text-decoration: none;
    font-size: 1em;
    padding: 0.5em 0;
    color: #1d1f20;
    text-align: center;
    display: block;
    transition: all 0.2s ease-in-out;
}

.sidenav li a:hover {
    font-size: 1.5em;
}

.sidenav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 0;
}

.sidenav li {
    list-style: none;
}

.sidenav li.active>a {
    font-weight: bold;
}

.sidenav img {
    display: block;
    width: 4vw;
    min-width: 48px;
    max-width: 86px;
    border-radius: 0 0 6px 6px;
}

.hr_line_sidenav {
    margin: 6px;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#sidenav {
    font-family: "Bai Jamjuree", sans-serif;
    -webkit-transition: 0.5s all ease-out;
    -moz-transition: 0.5s all ease-out;
    transition: 0.5s all ease-out;
    color: black;
}

#sidenav a:hover {
    color: darkgrey;
}

.active a {
    color: black;
}

body .totop {
    color: #ff6b00;
    font-weight: bold;
    width: 4vw;
    min-width: 48px;
    max-width: 86px;
    padding: 1em 0;
    height: 6em;
    text-align: center;
    position: relative;
    /**/
    background-color: white;
    border-radius: 1em;
    box-shadow: -30px 30px 100px rgba(129, 87, 204, 0.15), 30px -30px 100px rgba(255, 207, 168, 0.3);
    display: block;
    visibility: hidden;
}

body .totop::before {
    border-radius: 1em;
    top: 0;
    bottom: -1em;
    left: 0;
    right: 0;
    position: absolute;
    content: "";
    z-index: -1;
    background: white;
}

@media screen and (max-width: 720px) {
    body .totop {
        position: fixed;
        bottom: 0;
    }
}

body.on-scroll .totop {
    visibility: visible;
}


/*CARDS MARGIN STYLE*/

[class*="card"] {
    /*SIZE LARGE*/
    /*SIZE MEDIUM*/
}

[class*="card"][class*="-large"] {
    justify-content: center;
    align-items: center;
    min-height: 40vh;
    /*LARGE TYPE CONTACT*/
}

[class*="card"][class*="-large"][role="contact"] {
    margin: 5vw 0;
}

@media screen and (max-width: 1024px) {
    [class*="card"][class*="-large"][role="contact"] {
        align-items: flex-start;
    }
}

[class*="card"][class*="-large"][role="contact"] .column {
    width: 70%;
}

[class*="card"][class*="-medium"] {
    min-width: 250px;
    max-width: 100%;
    padding: 2em;
    margin: 5vw 3vw 3vw;
}

@media screen and (max-width: 720px) {
    [class*="card"][class*="-medium"] {
        margin: 4em 0;
    }
}


/*PICTOGRAMM GRID MARGIN STYLE*/

.picto-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: row;
    flex: 1;
    order: 3;
    /*INSDE BOX MARGIN STYLE*/
}

.picto-grid .picto-box {
    width: 30vw;
    height: 30vw;
    max-width: 150px;
    max-height: 150px;
    /**/
    margin: 1em;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    position: relative;
    /**/
    background-color: white;
    border-radius: 1em;
    box-shadow: -30px 30px 100px rgba(129, 87, 204, 0.15), 30px -30px 100px rgba(255, 207, 168, 0.3);
}

.picto-grid .picto-box::before {
    border-radius: 1em;
    top: 0;
    bottom: -1em;
    left: 0;
    right: 0;
    position: absolute;
    content: "";
    z-index: -1;
    background: white;
}

.picto-grid .picto-box img {
    width: auto;
    height: auto;
    flex-grow: 1;
    overflow: hidden;
    display: block;
    object-fit: contain;
}

.picto-grid .picto-box figcaption {
    text-align: center;
    padding: 0 0.5em 0.5em;
    flex-grow: 0;
}

#modules_complementaires .grid-modules {
    flex-direction: row;
}

#modules_complementaires .grid-modules [class*="-medium"] {
    position: relative;
    /**/
    background-color: white;
    border-radius: 3em;
    box-shadow: -30px 30px 100px rgba(129, 87, 204, 0.15), 30px -30px 100px rgba(255, 207, 168, 0.3);
    flex: 1;
    order: 2;
    max-width: 40%;
    text-align: center;
}

#modules_complementaires .grid-modules [class*="-medium"]::before {
    border-radius: 3em;
    top: 0;
    bottom: -1em;
    left: 0;
    right: 0;
    position: absolute;
    content: "";
    z-index: -1;
    background: white;
}

@media screen and (max-width: 720px) {
    #modules_complementaires .grid-modules #contrat-card {
        order: 1;
    }
}


/*___________________________________________*/

body {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
}

.grid-modules {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.card-large[role="contact"] {
    background-image: url(../imgs/tuyau.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom right;
}

@media screen and (max-width: 1024px) {
    .card-large[role="contact"] {
        background-size: 50%;
    }
}


/*BACKGROUND PATTERN STYLE*/

#pattern {
    opacity: 0.4;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    /**/
    background-position: center center;
    background-size: cover;
    background-image: url(../imgs/pattern.webp);
}

#pattern:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(0deg, #f2f2f2 0%, rgba(242, 242, 242, 0) 100%);
}

h1,
h2,
h3,
h4 {
    color: #1d1f20;
    margin: 0;
    font-weight: bolder;
    font-family: "Bai Jamjuree", sans-serif;
}

h1 {
    font-size: 3em;
}

h1 span {
    color: #ff6b00;
}

.medium-fontsize,
h3 {
    font-size: 1.3em;
}

.large-fontsize,
h2 {
    font-size: 2.5em;
}

.huge-fontsize {
    font-size: 3em;
}

.cap {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1em;
}

a {
    text-decoration: none;
    display: inline-block;
    color: rgba(29, 31, 32, 0.75);
}

.listes ul {
    padding: 0 5vw 0 0;
    margin: 0;
}

.listes ul li {
    font-size: 1.2em;
    list-style: none;
    border-style: solid;
    border-width: 0 0 0 3px;
    border-color: #ff6b00;
    padding-left: 15px;
    margin-top: 1em;
    margin-right: 1em;
}

[class*="card"][class*="-large"] {
    position: relative;
    /**/
    background-color: white;
    border-radius: 3em;
    box-shadow: -30px 30px 100px rgba(129, 87, 204, 0.15), 30px -30px 100px rgba(255, 207, 168, 0.3);
}

[class*="card"][class*="-large"]::before {
    border-radius: 3em;
    top: 0;
    bottom: -1em;
    left: 0;
    right: 0;
    position: absolute;
    content: "";
    z-index: -1;
    background: white;
}

[class*="card"][role*="contact"] {
    position: relative;
    /**/
    background-color: #ff6b00;
    border-radius: 3em;
    box-shadow: -30px 30px 100px rgba(129, 87, 204, 0.15), 30px -30px 100px rgba(255, 207, 168, 0.3);
}

[class*="card"][role*="contact"]::before {
    border-radius: 3em;
    top: 0;
    bottom: -1em;
    left: 0;
    right: 0;
    position: absolute;
    content: "";
    z-index: -1;
    background: #ff6b00;
}


/*ALL BUTTONS STYLES*/

*[class*="-btn"] {
    /**/
    padding: 1em 1.5em;
    border-radius: 2em;
    /**/
    outline: none;
    font-family: "Bai Jamjuree", sans-serif;
    text-decoration: none;
    border: none;
    color: white;
    font-weight: 600;
    background: gray;
    text-transform: uppercase;
    position: relative;
    z-index: 0;
    cursor: pointer;
    margin: 1em 0;
    /*BUTTON FOR MAIN ACTION - REDIRECTION*/
    /*STYLE FOR CLOSE BUTTON FANCYBOX*/
    /**/
}

.button-form {
    background-color: #696969;
    box-shadow: 0 10px rgba(255, 107, 0, 0.5);
    color: white;
}


*[class*="-btn"][class*="primary"] {
    background-color: #ff6b00;
    box-shadow: 0 10px rgba(255, 107, 0, 0.5);
    color: white;
}

*[class*="-btn"][class*="primary"]:hover {
    box-shadow: 0 8px rgba(255, 107, 0, 0.5);
    top: 2px;
}

*[class*="-btn"][class*="primary"]:active {
    box-shadow: 0 0 #ff6b00;
    top: 10px;
}

*[class*="-btn"][class*="primary"][class*="-style2"] {
    background-color: #8157cc;
    box-shadow: 0 10px rgba(129, 87, 204, 0.5);
    color: white;
}

*[class*="-btn"][class*="primary"][class*="-style2"]:hover {
    box-shadow: 0 8px rgba(129, 87, 204, 0.5);
    top: 2px;
}

*[class*="-btn"][class*="primary"][class*="-style2"]:active {
    box-shadow: 0 0 #8157cc;
    top: 10px;
}

*[class*="-btn"][class*="secondary"] {
    background-color: white;
    box-shadow: 0 -6px rgba(129, 87, 204, 0.1);
    color: #8157cc;
}

*[class*="-btn"][class*="secondary"]:hover {
    box-shadow: 0 -4px rgba(129, 87, 204, 0.1);
    top: -2px;
}

*[class*="-btn"][class*="secondary"]:active {
    box-shadow: 0 0 white;
    top: -6px;
}

*[class*="-btn"][class*="tertiary"] {
    background-color: white;
    box-shadow: 0 10px rgba(255, 255, 255, 0.5);
    color: #1d1f20;
}

*[class*="-btn"][class*="tertiary"]:hover {
    box-shadow: 0 8px rgba(255, 255, 255, 0.5);
    top: 2px;
}

*[class*="-btn"][class*="tertiary"]:active {
    box-shadow: 0 0 white;
    top: 10px;
}

*[class*="-btn"][class*="close"] {
    background-color: white;
    box-shadow: 0 10px rgba(0, 0, 0, 0.1);
    color: #1d1f20;
}

*[class*="-btn"][class*="close"]:hover {
    box-shadow: 0 8px rgba(0, 0, 0, 0.1);
    top: 2px;
}

*[class*="-btn"][class*="close"]:active {
    box-shadow: 0 0 white;
    top: 10px;
}

.fancybox__slide {
    background: #f2f2f2b6;
}

.fancybox__content {
    position: relative;
    /**/
    background-color: white;
    border-radius: 3em !important;
    box-shadow: -30px 30px 100px rgba(129, 87, 204, 0.15), 30px -30px 100px rgba(255, 207, 168, 0.3) !important;
    padding: 50px !important;
}

.fancybox__content::before {
    border-radius: 3em;
    top: 0;
    bottom: -1em;
    left: 0;
    right: 0;
    position: absolute;
    content: "";
    z-index: -1;
    background: white;
}

.fancybox__content[role="info-popup"] {
    align-items: center !important;
    text-align: center;
}

.fancybox__active main {
    filter: blur(5px);
}

.fancybox__active header {
    filter: blur(5px);
}

.fancybox__active footer {
    filter: blur(5px);
}

.fancybox__active nav {
    filter: blur(5px);
}

.container-button{
    display: flex;
}

.fancybox__content>.carousel__button.is-close{
    display: none;
}

img {
    width: 100%;
}

img[role="header"] {
    max-width: 512px;
    width: 40%;
    display: block;
    margin: 0;
    min-width: 200px;
    padding: 0 5vw;
    order: 3;
}

@media screen and (max-width: 1024px) {
    img[role="header"] {
        max-width: 80%;
        order: 0;
        padding: 5vw 5vw 0;
    }
}

img[role="mockup"] {
    min-width: 200px;
    padding: 0 5vw;
    flex: 2;
}

@media screen and (max-width: 1024px) {
    img[role="mockup"] {
        margin-top: -10%;
    }
}

img[role="module"] {
    width: 85%;
    max-width: 300px;
    margin-top: -30%;
}

img[role="dolipartner"] {
    display: block;
    margin-bottom: 1em;
    max-width: 105px;
}

img[role="fusee"] {
    position: absolute;
    width: 25vw;
    max-width: 256px;
    z-index: -1;
    right: 0;
    opacity: 0.7;
    transform: translateX(-50%) translateY(-50%) rotate(30deg);
}

@media screen and (max-width: 1024px) {
    img[role="fusee"] {
        transform: translateX(-40%) translateY(-50%) rotate(20deg);
    }
}

@media screen and (max-width: 720px) {
    img[role="fusee"] {
        transform: translateX(-50%) translateY(-50%) rotate(15deg);
    }
}

.titlecontent h1 {
    line-height: 1em;
    height: 4em;
}

@media screen and (min-width: 1920px) {
    .titlecontent h1 {
        height: 3em;
    }
}

@media screen and (max-width: 540px) {
    .titlecontent h1 {
        font-size: 2.5em;
    }
}

.title {
    width: auto;
    margin: 0 5vw;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.title img {
    width: 100%;
    min-height: 30vh;
}

.title .column {
    background: radial-gradient(circle, #f2f2f2 0%, rgba(242, 242, 242, 0) 100%);
    padding: 1em;
    position: absolute;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title .column *:not(hr) {
    background: #f2f2f2;
    box-shadow: 0 0 1em #f2f2f2;
}

hr {
    border: 0;
    background-color: #ff6b00;
    margin: 16px 0;
    height: 4px;
    max-width: 45px;
    width: 100%;
}

i {
    font-size: 70%;
}

.formSend{
    color: #ff6b00;
font-size: 1.3em;
font-weight: bold;
padding: 1em;
margin: 2em;
text-align: center;
background-color: white;
border-radius: 100px;
}

div.cc-window {
    border-radius: 2em;
    overflow: hidden;
}

div.cc-window .cc-allow {
    background-color: #1d1f20;
    box-shadow: 0 10px rgba(29, 31, 32, 0.6);
    color: white;
}

div.cc-window .cc-allow:hover {
    box-shadow: 0 8px rgba(29, 31, 32, 0.6);
    top: 2px;
}

div.cc-window .cc-allow:active {
    box-shadow: 0 0 #1d1f20;
    top: 10px;
}

div.cc-window .cc-link {
    display: none;
}

#mentions_legales {
    max-width: 960px;
    margin-top: 5vh;
    margin-bottom: 5vh;
}

div input {
    height: 2rem;
    margin: 3%;
    border-radius: 2rem;
    /* border: none; */
}

div textarea {
    border-radius: 0.8rem;
}

.content {
    padding: 3rem;
}


/* Captcha */

.hidden {
    display: none;
}

.show {
    display: block;
}


.old-price{
    text-decoration: line-through;
}

.promotion {
    font-weight: bold;
    color: #ff6b00;
    font-size: 1.1em;
}

.obligatoire{
    color: #8157cc;
    font-weight: bold;
}


/*___________________________________________*/


/*# sourceMappingURL=style.css.map */