html,
body {
    box-sizing: border-box;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* NUM & EMAIL */
#container-num {
    display: flex;
    width: 100%;
    height: 53px;
    background-color: var(--white-color);
    align-items: center;
    padding: 10px;
}

#container-num .container-icon-popup {
    display: none;
}

.menu-menu-principal-container {
    box-sizing: border-box;
    padding-bottom: 23px;
}


/* Sous-menu */
nav ul.sub-menu {
    flex-direction: column;
    display: none;
    width: 150%;
    text-align: center;
    padding: 30px 0;
    background-color: var(--main-color);
    height: fit-content;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 30px 30px;
    margin-top: 21px;
    transition: 200ms linear;
    transform: translateX(-15%);
    height: auto !important;
}

nav ul.sub-menu li {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding: 10px;
}


nav ul.sub-menu li a {
    color: white;
}

nav ul.sub-menu li:hover a {
    color: var(--main-color);
}

nav ul.sub-menu li:hover {
    transition: linear 200ms;
    background-color: var(--white-color);
}

#menu-item-259 {
    max-width: 200.66px;
    text-align: center;
    box-sizing: border-box;
}


/* Liens */
a {
    text-decoration: none;
}

/* Header */
#icon-menu,
#icon-close {
    display: none;
}

#menu-item-334{
    padding-right: 0;
}

nav {
    width: 100%;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--white-color);
    box-shadow: var(--header-shadow);
    padding: 0 70px;
    box-sizing: border-box;
    position: fixed;
    z-index: 99;
    flex-direction: column;
}

#container-nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-logo-link {
    width: 100px;
}

.custom-logo-link img {
    width: 280px;
    height: 98px;
}

nav ul {
    display: flex;
    list-style-type: none;
    height: 41px;
    padding-top: 15px;
}

nav ul li {
    padding: 0 30px;
}

nav a {
    color: var(--black-color);
}

nav a:hover {
    color: var(--main-color);
    transition: 100ms smooth;
}

nav ul li:hover {
    border-bottom: solid 8px var(--main-color);
    transition: 200ms ease-in-out;
}

/* All conatiner */
#container-apropos,
#container-vignettes,
#container-localisation,
#container-presta {
    padding: 0px 70px;
    box-sizing: border-box;
}

/* Home page */
#container-home-page {
    display: grid;
    grid-template-columns: 2.2fr 4.8fr;
    grid-template-rows: 1fr;
    height: 100vh;
    padding-left: 100px;
    background-color: var(--main-color);
    box-sizing: border-box;
}

#content-background-site {
    background-size: cover !important;
}

#container- {
    display: flex;
    margin: 30px 39% 0 0;
}

/* A PROPOS */
/* slider */
#container-slider {
    position: relative;
    height: 500px;
}

.slider-home .slick-list .slick-track{
    width: 100%;
    height: 500px;
}

.img-slider-home{
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.slick-prev, .slick-next {
    background-color: var(--main-color)!important;
    width: 40px!important;
    height: 40px!important;
    border-radius: 50%;
    z-index: 20!important;
    box-shadow: 0px 0px 30px rgb(0 0 0 / 15%);
}

.slick-prev{
    left: 1%;
}

.slick-next{
    right: 1%;
}

.slick-list .slick-track{
    height: 300px;
}

.container-cta-slider {
    width: 23px;
}

.first{
    display: block !important;
}

#container-apropos {
    width: 100%;
    text-align: center;
    margin-bottom: 100px;
}

#container-localisation {
    width: 100%;
    text-align: center;
    margin-bottom: 200px;
}

#content-apropos,
#content-localisation {
    display: flex;
    text-align: left;
}

#content-apropos {
    flex-direction: column;
}

h2::after {
    content: "";
    width: 15%;
    height: 14px;
    display: block;
    background-color: var(--main-color);
    margin-top: 7px;
}

.h2-white::after {
    background-color: var(--white-color);
}

.thumbnail {
    width: 558px;
    height: 100%;
}

#container-horaires {
    display: flex;
    flex-direction: column;
}

#content-horaires {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0px 30px;
}

#titre-horaires {
    margin-top: 40px;
}

/* VIGNETTES */
#wrapper-container-vignettes {
    background-color: var(--main-color);
    clip-path: polygon(0 28%, 100% 59%, 100% 100%, 0 70%);
    width: 100vw;
    height: 330px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

#container-vignettes {
    width: 100vw;
    height: 191px;
    margin: 300px auto;
    position: relative;
}

#content-vignettes {
    width: 100vw;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#content-vignettes li {
    margin: 0 80px;
    padding: 10px;
    width: 247px;
    height: 230px;
    background-color: var(--white-color);
    border-radius: 50px;
    position: relative;
    list-style-type: none;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
}

.content-block-vignettes {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    text-align: center;
    width: 85%;
}

.content-block-vignettes img,
.content-block-presta img {
    width: 70px;
    height: 70px;
}

.part-location {
    margin-top: 100px;
}

/* PRESTATIONS */

#container-scroll {
    display: none;
}

#container-presta {
    width: 100%;
}

#content-presta {
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
}

#content-presta li {
    list-style-type: none;
}

.content-block-presta {
    width: 30%;
    height: auto;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
    border-radius: 50px;
    text-align: center;
    padding: 30px;
    box-sizing: border-box;
    position: relative;
}

.desc-presta {
    text-align: center;
    font-size: 14px;
    padding-bottom: 30px;
}

.btn {
    width: 258px;
    height: 53px;
    border: 2px solid #f9a03f;
    box-sizing: border-box;
    border-radius: 30px;
    position: relative;
    margin: auto;
}

.btn-presta {
    position: absolute !important;
    ;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#container-btn {
    display: flex;
}

.btn-more,
.btn-contact {
    width: 195px;
    height: 53px;
    border: 2px solid #001845;
    box-sizing: border-box;
    border-radius: 30px;
    position: relative;
    margin-top: 30px;
}

.text-btn-contact,
.text-btn-more {
    color: white;
    font-family: "Montserrat", "Arial";
    font-size: 20px;
}


.btn-more {
    margin-right: 40px;
}


.btn:hover {
    background-color: #f9a03f;
    transition: 100ms ease-in-out;
    border: 2px solid var(--secondary-color);
}

.btn:hover .btn-text {
    color: var(--white-color);
    transition: 100ms ease-in-out;
}

.btn-white {
    border: 2px solid var(--white-color);
    float: right;
    margin-right: 110px;
}

.btn-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

/* CONTACT */
#container-contact {
    background-color: var(--main-color);
    margin-top: 200px;
}

#content-contact-grid {
    display: grid;
    grid-template-columns: 2.2fr 4.8fr;
    grid-template-rows: 1fr;
    padding-right: 100px;
}

#contact {
    margin-left: 200px;
}

#container-form {
    margin-bottom: 100px;
}

#container-thumbnail-contact {
    clip-path: polygon(0 0, 98% 0, 50% 100%, 0% 100%);
}

#content-form {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 110px;
}

input,
textarea {
    background: #FCFCFC;
    border-radius: 10px;
    border: none;
    height: 49px;
    margin-bottom: 15px !important;
}

.nom,
.prenom,
.tel,
.email {
    width: 300px;
    box-sizing: border-box;
}

.part-textarea {
    width: 100%;
    height: 150px;
    margin-bottom: 50px;
}

.msg {
    height: 100%;
    box-sizing: border-box;
}

.text-form {
    color: var(--white-color);
    margin-bottom: 10px;
}

.desc-contact {
    padding: 0px 110px;
    margin-bottom: 50px;
}

.desc-contact p {
    color: var(--white-color) !important;
}

.part-form {
    display: flex;
    flex-direction: column;
}

input:focus,
textarea:focus {
    background-color: rgba(0, 0, 0, 0.1);
    border: 2px solid var(--white-color);
    color: white;
    font-family: "Montserrat", "Arial";
    outline: none;
}

.cta-send {
    margin-right: 0;
}

#content-background-site {
    clip-path: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
}

/* FOOTER */

footer {
    width: 100vw;
    background-color: var(--white-color);
    box-sizing: border-box;
}

#container-footer {
    width: 100vw;
    height: auto;
    padding: 50px 70px 0 70px;
    justify-content: space-between;
    display: flex;
    box-sizing: border-box;
}

.title-footer {
    width: 100%;
    text-align: left;
}

#content-coordonnes-footer {
    display: flex;
    flex-direction: column;
}

.icon-footer {
    width: 22px;
    height: 22px;
}

.icon-info {
    display: flex;
    align-items: center;
}

.icon-footer {
    margin-right: 20px;
}

#container-map {
    width: 273px;
    height: auto;
    margin: 25px auto;
}

#map {
    width: 100%;
    height: 100%;
}

.text-coordo {
    margin: 10px 0;
}

#mention-legales {
    width: 100vw;
    text-align: center;
    font-size: 12px;
}

#content-horaires-footer,
#content-coordonnes-footer {
    width: 33%;
    font-size: 14px;
}

.text-footer {
    list-style-type: none;
    margin-top: 15px;
}

.day {
    text-align: right;
}

.hour {
    text-align: left;
}








.content-thumbnail-article {
    box-sizing: border-box;
    width: 100%;
    height: 543px;
}

.right {
    margin-left: 100px;
}

.left {
    margin-right: 100px;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-article {
    width: 100%;
}





/* PAGE PRESTATIONS */
.container-presta {
    width: 100vw;
    box-sizing: border-box;
}

.long-thumbnail {
    width: 100vw;
    height: 540px;
    margin: 100px 0;
}

.container-desc-presta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    padding: 0 100px;
    box-sizing: border-box;
    margin-bottom: 100px;
}

.content-first-desc-presta {
    padding-right: 100px;
    box-sizing: border-box;
}

.content-second-desc-presta {
    padding-left: 100px;
    box-sizing: border-box;
    margin-bottom: 250px;
}

.container-infos {
    width: 100vw;
    position: relative;
    padding: 50px 30%;
    box-sizing: border-box;
    text-align: center;
}

.wrapper-info {
    width: 100vw;
    background-color: var(--main-color);
    height: 480px;
    clip-path: polygon(0 18%, 100% 54%, 100% 100%, 0% 100%);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.btn-info {
    border: solid 1px var(--white-color);
}

.text-infos {
    color: var(--white-color);
    text-align: center;
    margin-bottom: 55px;
}

#title-page-presta {
    margin-top: 300px;
    margin-top: 200px;
}

.cta-contact {
    width: fit-content;
}

.wpcf7-form{
    display: grid;
    justify-content: center;
    width: 100%;
    grid-template-columns: repeat(2, 40%);
    grid-column-gap: 50px;
    box-sizing: border-box;
}

#wpcf7-f420-o1 p {
    width: 100%;
}

#wpcf7-f420-o1 {
    display: flex;
    flex-wrap: wrap;
}

.button-send {
    width: 100%;
}

.wpcf7 form.sent .wpcf7-response-output{
    border-color: #46b450;
    color: #46b450;
    font-family: Montserrat, Arial;
    border-radius: 30px;
    padding: 14px;
    box-sizing: border-box;
}

.wpcf7-submit {
    width: 200px;
    border-radius: 30px;
    margin-top: 20px;
}

.wpcf7-submit:hover {
    background-color: var(--secondary-color);
    color: var(--white-color);
}

.input-msg {
    width: 100%;
    margin-right: 14%;
    box-sizing: border-box;
}

/* CTA TOP */
.cta-top {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--white-color);
    padding: 15px;
    box-sizing: border-box;
    position: fixed;
    bottom: 7%;
    right: 1.5%;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
    transform: translate(-90deg);
}

.icon-cta-top {
    width: 100%;
    z-index: 99;
}

/* Page Docs */
#content-docs {
    width: 100%;
    padding: 0 300px;
    margin: 150px auto;
    box-sizing: border-box;
}

#container-uploads-docs {
    margin: 0 auto 200px auto;
    padding: 20px;
    text-align: center;
    border: 2px solid var(--secondary-color);
    border-radius: 35px;
    width: 460px;
}

#container-uploads-docs:hover {
    background-color: var(--secondary-color);
    transition: 100ms ease-in-out;
}

#container-uploads-docs:hover #content-title-docs {
    color: white;
}

#content-title-docs {
    font-size: 18px;
    color: var(--secondary-color);
    font-family: Montserrat, Arial;
}

#title-documents {
    margin-top: 200px;
}

/* PAGE NEWS */
#container-news{
    display: grid;
    grid-template-columns: repeat(auto-fill, 400px);
    grid-template-rows: repeat(auto-fill, 400px);
    grid-gap: 70px 70px;
    padding: 0 70px;
    margin: 300px 0;
}