/* ADD RESET */

/* FONT */
@font-face {
    font-family: 'BodoniModa';
    src: url('../fonts/BodoniModa-VariableFont.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'BodoniModa';
    src: url('../fonts/BodoniModa-Italic-VariableFont.woff2') format('woff2');
    font-weight: 400 900;
    font-style: italic;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'BrandonGrotesque';
    src: url('../fonts/BrandonGrotesque-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'BrandonGrotesque';
    src: url('../fonts/BrandonGrotesque-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'BrandonGrotesque';
    src: url('../fonts/BrandonGrotesque-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'BrandonGrotesque';
    src: url('../fonts/BrandonGrotesque-Italic-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'BrandonGrotesque';
    src: url('../fonts/BrandonGrotesque-Italic-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'BrandonGrotesque';
    src: url('../fonts/BrandonGrotesque-Italic-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'BrownStd';
    src: url('../fonts/BrownStd-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'BrownStd';
    src: url('../fonts/BrownStd-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'EBGaramond';
    src: url('../fonts/EBGaramond-VariableFont.woff2') format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'EBGaramond';
    src: url('../fonts/EBGaramond-Italic-VariableFont.woff2') format('woff2');
    font-weight: 400 800;
    font-style: italic;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'ErasITC';
    src: url('../fonts/ErasITC-Demi.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'ErasITC';
    src: url('../fonts/ErasITC-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'Georgia';
    src: url('../fonts/Georgia-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'Georgia';
    src: url('../fonts/Georgia-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'HartwellAlt';
    src: url('../fonts/HartwellAlt-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'HartwellAlt';
    src: url('../fonts/HartwellAlt-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'Kobe11';
    src: url('../fonts/Kobe11-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'Kobe11';
    src: url('../fonts/Kobe11-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'Kobe11';
    src: url('../fonts/Kobe11-Oblique.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-VariableFont.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Italic-VariableFont.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-VariableFont.woff2') format('woff2');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Italic-VariableFont.woff2') format('woff2');
    font-weight: 300 800;
    font-style: italic;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-VariableFont.woff2') format('woff2');
    font-weight: 200 700;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'PoiretOne';
    src: url('../fonts/PoiretOne-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Italic-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Italic-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Italic-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'PublicSans';
    src: url('../fonts/PublicSans-VariableFont.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'PublicSans';
    src: url('../fonts/PublicSans-Italic-VariableFont.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-VariableFont.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Italic-VariableFont.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

@font-face {
    font-family: 'TenorSans';
    src: url('../fonts/TenorSans.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* https://developer.mozilla.org/fr/docs/Web/CSS/@font-face/font-display */
}

/* liste */

li {
    list-style-type: none;
}

/* separation */
.sep {
    margin: 15px 0;
    height: 1px;
    background-color: #d4d8da;
}


/* `Clear Floated Elements */
.wrap,
.clear,
.line,
.row {
    clear: both;
}

.masque, .hidden {
    display: none;
}


/* Button */
.button {
    position: relative;
    display: inline-block;
    border: 1px solid #77d23b;
    color: #fff;
    text-transform: uppercase;
    padding: 8px 15px;
    line-height: 1.3;
    cursor: pointer;
    text-align: center;
    background-color: #77d23b;
    transition: all .1s ease-in;
}

.button.button-vert {
    background-color: #6cc332;
    color: #fff;
    border: 1px solid #6cc332;
}

.button.button-rouge {
    background-color: #dd3b59;
    color: #fff;
    border: 1px solid #dd3b59;
}

.button.button-orange {
    background-color: #f88e13;
    color: #ffe7cb;
    border: 1px solid #ffb560;
}

.button.button-violet {
    background-color: #92278f;
    color: #fff;
    border: 1px solid #92278f;
}

.button.button-blanc {
    background-color: #fff;
    color: #3d3d3d;
    border: 1px solid #3d3d3d;
}

.button.button-bleu-clair {
    background-color: #26AFB8;
    color: #fff;
    border: 1px solid #26AFB8;
    padding: 5px 40px;
    margin-top: 2rem;
}

.button.button-vert:hover,
.button.button-vert:focus {
    background-color: rgba(255, 255, 255, 0.8);
    color: #6cc332;
    border: 1px solid #6cc332;
}

.button.button-rouge:hover,
.button.button-rouge:focus {
    background-color: rgba(255, 255, 255, 0.8);
    color: #dd3b59;
    border: 1px solid #dd3b59;
}

.button.button-violet:hover,
.button.button-violet:focus {
    background-color: #fff;
    color: #92278f;
    border: 1px solid #92278f;
}

.button.button-blanc:hover,
.button.button-blanc:focus {
    background-color: #3d3d3d;
    color: #fff;
    border: 1px solid #3d3d3d;
}

.button.button-bleu-clair:hover,
.button.button-bleu-clair:focus {
    background-color: rgba(255, 255, 255, 0.8);
    color: #26AFB8;
    border: 1px solid #26AFB8;
}


.button.button-color1 {
    background-color: var(--color1);
    color: #fff;
    border: 1px solid var(--color1);
    padding: 5px 40px;
    margin-top: 2rem;
}

.button.button-color2 {
    background-color: var(--color2);
    color: #fff;
    border: 1px solid var(--color2);
    padding: 5px 40px;
    margin-top: 2rem;
}

.button.button-color1:hover,
.button.button-color1:focus {
    background-color: rgba(255, 255, 255, 0.8);
    color: var(--color1);
    border: 1px solid var(--color1);
}

.button.button-color2:hover,
.button.button-color2:focus {
    background-color: rgba(255, 255, 255, 0.8);
    color: var(--color2);
    border: 1px solid var(--color2);
}

.button.button-alt-color2 {
    background-color: #fff;
    color: var(--color2);
    border: 1px solid var(--color2);
    padding: 5px 40px;
    margin-top: 2rem;
}

.button.button-alt-color2:hover,
.button.button-alt-color2:focus {
    opacity: .8;
}

.button:hover,
.button:focus {
    background-color: #fff;
    border: 1px solid #77d23b;
    color: #77d23b;
    text-decoration: none;
}

.button.btn-small {
    font-size: 10px;
    padding: 5px 10px;
}

.button.btn-big {
    font-size: 14px;
    padding: 15px 25px;
}

.button.btn-block {
    display: block;
    width: 100%;
}

.button.btn-inline {
    display: inline-block;
}

.button.btn-rounded,
.news_article .article a .button.btn-rounded {
    border-radius: 30px 0 0 30px;
    border-right: none;
}

.button.btn-rounded:hover,
.button.btn-rounded:focus,
.news_article .article a:hover .button.btn-rounded,
.news_article .article a:focus .button.btn-rounded {
    padding-left: 20px;
    padding-right: 20px;
}

/*** TITRE ***/
h1,
.h1,
.titre {
    text-align: center;
    font-size: 4rem;
    line-height: 1;
    font-family: var(--font2), sans-serif;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--color7);
}

h2,
.h2,
.stitre,
.s_titre {
    font-size: 3.2rem;
    line-height: 40px;
    font-family: var(--font2), sans-serif;
    font-weight: 400;
    text-transform: none;
    color: var(--color7);
}

h3,
.h3,
body#cms h3,
.sstitre,
.ss_titre {
    font-size: 2.8rem;
    line-height: 30px;
    font-family: var(--font2), sans-serif;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color7);
}

h4,
.h4,
body#cms h4,
.ssstitre {
    font-size: 2.4rem;
    font-family: var(--font1), sans-serif;
    font-weight: 400;
    line-height: 22px;
    text-transform: none;
    color: var(--color8);
}

h5,
.h5 {
    font-size: 2rem;
    font-family: var(--font1), sans-serif;
    font-weight: 400;
    line-height: 22px;
    text-transform: none;
    color: var(--color5);
}

h6,
.h6 {
    font-size: 1.8rem;
    font-family: var(--font1), sans-serif;
    font-weight: 400;
    line-height: 30px;
    text-transform: none;
    color: var(--color8);
}

.font-medium {
    font-weight: 500;
}

strong,
.strong,
.font-bold,
.bold {
    font-weight: 700;
}

.font-family-1 {
    font-family: var(--font1), sans-serif;
}

.font-family-2 {
    font-family: var(--font2), sans-serif;
}

.container-xl {
    margin-left: 4rem;
    margin-right: 4rem;
}

.vertical_center {
    display: flex;
}

.vertical_center > div,
#grid_builder .vertical_center > div {
    margin-top: auto;
    margin-bottom: auto;
}


/* liste */

#builder .texte_content ul,
#builder .texte_content ol,
.mce-content-body ul,
.mce-content-body ol,
.cms ul,
.cms ol,
.faq_answer ul,
.faq_answer ol {
    line-height: 1.5rem;
    list-style-type: inherit;
}

#builder .texte_content ul li,
#builder .texte_content ol li,
.mce-content-body ul li,
.mce-content-body ol li,
.cms ul li,
.cms ol li,
.faq_answer ul li,
.faq_answer ol li {
    list-style-position: inside;
    margin: 4px auto 4px 20px;
}

#builder .texte_content ol,
.mce-content-body ol,
.cms ol,
.faq_answer ol {
    list-style-type: decimal;
}

.liste li {
    list-style-type: square;
    list-style-position: inside;
    margin-left: 1em;
    padding: 2px 0;
}

/* Table */
.table {
    display: table;
    border: 1px solid #e3e3e3;
    border-collapse: collapse;
    font-size: 1.1rem;
    background-color: #fff;
    color: var(--text);
}

.table-container {
    width: 100%;
    overflow-y: auto;
}

.table th,
.table td {
    border: 1px solid #e3e3e3;
    padding: 5px 10px;
}

.table th {
    padding: 10px 10px;
}

.td {
    display: table-cell;
}

/* Slider pour le builder en association */
#cms .slider_container {
    margin-top: -3rem;
}

#cms ul.noslideshow {
    padding-left: 0;
}

#cms .slider_container .bx-viewport,
#cms .slider_container .slider,
#cms .slider_container .noslideshow,
#cms .slider_container .slide {
    height: 100px !important;
}

/*Accordéon*/

.entete_accordeon,
.ui-accordion .entete_accordeon {
    background: #209cbf none repeat scroll 0 0;
    border: 1px solid #209cbf;
    color: #fff;
    font-size: 1.9rem;
    padding: 0.3em 1em;
    border-radius: 0 0 0 0;
}

.mce-content-body h2:after,
.mce-content-body h2.entete_accordeon:after,
.mce-content-body .stitre.entete_accordeon:after {
    border-bottom: none;
    margin: auto;
    width: auto;
    display: inline-block;
}

/* Images */

.cms img,
p img {
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Responsive pour les videos intégrées par builder pour backo et front  */

#grid_builder .content.type-video,
#form-builder .liste-content .video_content,
#video_home .video_c {
    width: 100%;
    padding-top: 56%;
    height: 0;
    position: relative;
}

#grid_builder .content.type-video .abs_ratio,
#video_home .absolute_c {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#grid_builder .content.type-video iframe,
#form-builder .liste-content .video_content iframe,
#video_home .absolute_c iframe {
    max-width: 100%;
    min-width: 100%;
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (max-width: 991px) {
    .container-xl {
        margin-left: 2rem;
        margin-right: 2rem;
    }
}

@media screen and (max-width: 767px) {
    h1,
    .h1,
    .titre {
        font-size: 3.5rem;
    }

    h2,
    .h2,
    .stitre {
        font-size: 2.2rem;
    }

    h3,
    .h3,
    .sstitre {
        font-size: 1.8rem;
    }

    h4,
    .h4,
    .ssstitre {
        font-size: 1.6rem;
    }

    h5,
    .h5 {
        font-size: 1.6rem;
    }

    h6,
    .h6 {
        font-size: 1.6rem;
    }

}