@charset "utf-8";
/* CSS Document */

:root {
    --main-color-orange: #cca57e;
    --main-color-beige: #ddcfb3;
    --main-color-creme: #f6eed9;
    --main-color-vert-f: #0d3328;
    --main-color-vert-m: #2c443f;
    --main-color-vert-p: #7e8a77;
    --main-color-vert-tp: #e2e7db;
    
    --main-marge-sides: 15vw;
    --main-marge-verti: 6vw;
    --main-radius: 30px;
}

@font-face {
    font-family: 'Quine';
    src: url(../fonts/Quine.woff2);
    font-weight: 400;
}

* {margin: 0; padding: 0; border: 0;}
img {display: block;}

html { scroll-behavior: smooth; -webkit-scroll-behavior: smooth;}

body {font-family: "Lato", sans-serif; color: var(--main-color-vert-f); line-height: 1.4;}

.landing-mode header {
    display: none;
}

.div-inner {margin: 0 var(--main-marge-sides);}

h1, h2, h3 {
    font-family: 'Quine', serif;
    line-height: 1.1;
    font-weight: 400;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "clig" 0;
}

h1 {font-size: 80px; margin-bottom: 30px;}
h2 {font-size: 50px; margin-bottom: 30px;}
h3 {font-size: 35px; margin-bottom: 20px;}

#contenu p, #contenu ul {font-size: 22px; margin-bottom: 30px; font-weight: 300;}
strong {font-weight: 800;}
#contenu p:last-child {margin-bottom: 0px;}
#contenu ul {list-style: circle; padding-left: 40px;}
#contenu ul li {position: relative; /*padding-left: 20px;*/ margin-bottom: 15px;}
/*#contenu ul li::before {content: "-"; position: absolute; left: 0; top: 0;}*/

[data-tf-live] {display: inline-block;}
.btn-arrondi, #primary-menu > li:last-child > a, [data-tf-live] a[data-tf-popup], #bb-form .gform_button {font-size: 16px !important; letter-spacing: 2px; display: inline-block; padding: 13px 18px; border-radius: var(--main-radius); text-transform: uppercase; text-decoration: none !important; line-height: 1;}
.btn-arrondi, [data-tf-live] a[data-tf-popup], #bb-form .gform_button {margin-right: 15px;}



/***************** STRUCTURE DE BASE *******************/

header {background-color: var(--main-color-vert-f); padding: 3vw 0; text-align: center; position: relative;}
#header-logo { margin-bottom: 2vw;}
#header-logo img {display: inline-block; width: 40%;} 



/* === Desktop Menu Styles === */
@media screen and (min-width: 1300px) {
    #primary-menu {display: flex; gap: 2vw; justify-content: center; align-items: center; list-style: none;}
    #primary-menu > li > a {text-decoration: none; color: #fff; font-size: 16px; font-weight: 300; text-transform: uppercase; letter-spacing: 2px; line-height: 1;}
    #primary-menu > li > a:hover {color: var(--main-color-beige);}
    #primary-menu > li:last-child > a {background-color: #fff; color: var(--main-color-vert-f); margin-right: 0;}
    #primary-menu > li:last-child > a:hover {background-color: var(--main-color-beige);}
    
    .menu-toggle {
        display: none;
    }

    #primary-menu > li {
        position: relative;
        padding-bottom: 20px;
    }

    #primary-menu li > ul {
        display: none; list-style: none; box-shadow: 0 0 20px rgba(0,0,0,0.2); transform: translateX(-50%); left: 50%; top: 100%;
        position: absolute;
        background: #fff;
        min-width: 200px;
        z-index: 999;
        padding: 20px;
        border-radius: 10px;
    }

    #primary-menu li:hover > ul {
        display: block;
    }

    #primary-menu li > ul > li {width: 100%; border-bottom: 1px solid rgba(0,0,0,0.1);}
    #primary-menu li > ul > li a {text-decoration: none; color: var(--main-color-vert-f); font-size: 16px; display: block; padding: 10px 0;}
    #primary-menu li > ul > li a:hover {}
    #primary-menu li > ul > li:first-child a {padding-top: 0;}
    #primary-menu li > ul > li:last-child {border: 0;}
    #primary-menu li > ul > li:last-child a { padding-bottom: 0;}
    
    #primary-menu li > ul::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -12px;
    transform: translateX(-50%);

    /* This fills the gap so hover isn't lost */
    width: 24px;
    height: 12px;

    /* White triangle */
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    background: #fff;
    }
    
    #header-scroll {padding: 20px 0 0 0; background-color: var(--main-color-vert-f); position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; transform: translateY(-100%); opacity: 0;}
    #header-scroll .menu-header-main-container {margin-left: auto;}
    #header-scroll .div-inner {display: flex; align-items: center;}
    #header-scroll.header-scroll-actif { transform: translateY(0); opacity: 1;}
    #header-scroll-logo { width: 60px; margin-right: 30px;}
    #header-scroll-logo img {width: 100%; height: auto; padding-bottom: 20px;}
}



/* === Mobile Menu Styles === */
@media screen and (max-width: 1299px) {

#header-scroll {display: none;}
    
#menumain {position: absolute; width: 50px; z-index: 2; cursor: pointer;}

#menumain::after,
#menumain #menu-graph {
  background-color: #fff; z-index: 1; position: relative;
  content: "";
  display: block;
  height: 3px;
  margin: 10px 0;
  transition: 0.5s;
  border-radius: 3px;
}
    
.toggled #menumain::after {transform: translateY(0) rotate(135deg); background-color: #fff !important;}
.toggled #menumain::before {opacity: 0; color: #000 !important;}
.toggled #menumain #menu-graph {transform: translateY(13px) rotate(-135deg); background-color: #fff !important;}
    
.menu-toggle {text-indent: -9999px; line-height: 0; width: 60px; height: 60px; border: 0; background: none; position: absolute; z-index: 3; cursor: pointer;}
.menu-toggle, #menumain {top: 30%; right: 30px; position: absolute;}

.menu-header-main-container {opacity: 0; max-height: 0; height: 0; overflow: hidden; width: 100%; left: 0; position: absolute; z-index: 999; background-color: var(--main-color-vert-f); margin-top: 20px;}
.toggled .menu-header-main-container {opacity: 1; overflow: hidden; max-height: 100vh; height: 100vh;}
#primary-menu {list-style: none; width: 80%; padding: 0 10%;}
#primary-menu > li {border-bottom: 1px solid rgba(255,255,255,0.2); padding: 5px 0;}
#primary-menu a {text-decoration: none; color: #fff; font-size: 18px !important; font-weight: bold; display: block; padding: 5px 0;}
#primary-menu ul {list-style: none;}
#primary-menu ul a { font-size: 16px !important; font-weight: normal; color: var(--main-color-vert-tp);}
    
#menumain #menu-bg {position: absolute; content: ""; height: 170%; aspect-ratio: 1 / 1; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0,0,0,0.4); border-radius: 50%; z-index: 0; opacity: 0;}
#menumain.header-scroll #menu-bg {opacity: 1;}
.toggled #menumain #menu-bg {opacity: 0;}
    
    #primary-menu > li:last-child {padding: 0;}
    #primary-menu > li:last-child a {color: var(--main-color-vert-f); display: block; background-color: var(--main-color-beige); border-radius: 0; padding: 20px 0 !important;}
    
}



footer {padding: var(--main-marge-verti) 0;}
.footer-titre {text-transform: uppercase; letter-spacing: 2px; font-size: 16px; margin-bottom: 10px; font-weight: bold;}
#footer-l1 { padding-bottom: 3vw; margin-bottom: 3vw; border-bottom: 1px solid var(--main-color-vert-f); display: flex; gap: 5%;}
#footer-l1c1 {width: 20%;}
#footer-l1c1 img {margin-bottom: 20px;}
#footer-l1c1 img:first-child {width: 80%;}
#footer-l1c1 p  {font-size: 20px;}
#footer-l1c2 {width: 20%;}
#footer-l1c3 {width: 20%;}
#footer-l1c4 {width: 30%;}
#footer-l1c4 [data-tf-live] a[data-tf-popup] {background-color: var(--main-color-vert-f); color: var(--main-color-creme) !important; margin-bottom: 20px;}
#footer-l1c4 [data-tf-live] a[data-tf-popup]:hover {background-color: var(--main-color-vert-p); color: var(--main-color-creme) !important;}
#footer-l1c4 .btn-arrondi:last-of-type {background-color: var(--main-color-beige); color: var(--main-color-vert-f);}
#footer-l1c4 .btn-arrondi:last-of-type:hover {background-color: var(--main-color-creme); color: var(--main-color-vert-f);}

#footer-social  {display: flex; margin-top: 3vw;}
#footer-social a {display: block; width: 40px; height: 40px; margin-right: 10px;}
#footer-social a:first-child {margin-right: 0;}
#footer-social a img {position: absolute; top: 50%; left: 50%; width: 60%; height: auto; transform: translate(-50%, -50%);}

#footer-l2 {display: flex;}
#footer-l2c1 {width: 50%;}
#footer-l2c2 {width: 50%; text-align: right;}
#footer-l2c2 a {color: var(--main-color-vert-f); text-decoration: none;}

footer ul {list-style: none;}
footer ul a {text-decoration: none; color: var(--main-color-vert-f); font-weight: bold; padding: 5px 0; display: block;}
footer ul a:hover {text-decoration: underline;}




/***************** ÉLÉMENTS RÉCURRENTS *******************/

.bb-eyebrow {text-transform: uppercase; letter-spacing: 2px; font-size: 18px; margin-bottom: 30px; font-weight: bold;}

#hero-banner {background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; min-height: 70vh; display: flex; align-items: center;}
#hero-banner::after {
    background: linear-gradient(
      to right,
      rgb(252, 249, 240) 0%,
      rgb(252, 249, 240) 30%,
      rgba(252, 249, 240, 0) 100%
    );
    width: 80%; height: 100%; position: absolute; z-index: 0; content: ""; top: 0; left: 0;}
#hero-banner-text {width: calc(50% - (var(--main-marge-sides) + 6vw)); padding-left: var(--main-marge-sides); padding-right: 6vw; padding-top: var(--main-marge-verti); padding-bottom: var(--main-marge-verti); position: relative; z-index: 1;}
#hero-banner h3 {margin-bottom: 50px;}
.home #hero-banner h3 {margin-bottom: 10px;}

.zone-texte-photo {
    min-height: 80vh;
}

.cols {
    display: flex;
    align-items: stretch;
}

.cols-reverse {
    flex-direction: row-reverse;
}

.col {
    width: 50%;
    position: relative;
}

.col-texte {
    padding: var(--main-marge-verti) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.col-texte-inner {padding: 0 var(--main-marge-sides) 0 calc(var(--main-marge-sides)/2);}
.cols-reverse .col-texte-inner {padding: 0 calc(var(--main-marge-sides)/2) 0 var(--main-marge-sides);}

.col-photo {
    overflow: hidden;
}

.col-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bloc-texte-photo-sous-titre {font-size: 20px; font-style: italic; display: inline-block; margin-bottom: 40px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2);}


.bb-dual-cta {text-align: center; position: relative;}
.bb-dual-cta::before {position: absolute; content: ""; width: 2px; height: 70%; background-color: rgba(255,255,255,0.3); top: 50%; left: 50%; transform: translateY(-50%);}
.bb-dual-cta .col-texte-inner {padding: 0 calc(var(--main-marge-sides)/2);}
.bb-dual-cta .col-texte:last-child .btn-arrondi {background-color: var(--main-color-beige);}
.bb-dual-cta .col-texte:last-child .btn-arrondi:hover {background-color: var(--main-color-vert-p);}

#zone-temoignages {padding: var(--main-marge-verti) 0; text-align: center;}
#zone-temoignages h2 {margin-bottom: 0;}
#zone-temoignages h3 {margin-bottom: 3vw;}
#temoignages-carrousel {padding: 0 30%;}
.temoignages-carrousel-element p {font-style: italic;}
.temoignages-carrousel-nom {font-weight: bold;}
#zone-temoignages .flickity-prev-next-button {background-color: transparent; border: 1px solid var(--main-color-vert-f);}
#zone-temoignages .flickity-button {color: var(--main-color-vert-f);}
#zone-temoignages .flickity-prev-next-button .flickity-button-icon { width: 40%; height: 40%; top: 30%; left: 30%;}
#zone-temoignages .flickity-page-dots {left: 0; bottom: -60px;}
#zone-temoignages .flickity-page-dots .dot {background-color: var(--main-color-vert-f); width: 8px; height: 8px; margin: 5px;}

.bg-creme #temoignages-carrousel .bb-video-open {margin-top: 40px; background-color: #fff !important; color: var(--main-color-vert-f) !important;}
.bg-creme #temoignages-carrousel .bb-video-open:hover {background-color: var(--main-color-vert-p) !important; color: var(--main-color-creme) !important;}

.page-id-277 #zone-temoignages h2, .page-id-277 #zone-temoignages h3 {display: none;}

#bb-video-lightbox{

    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.82);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;

    z-index:99999;
    
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);

}

#bb-video-lightbox.active{

    opacity:1;
    visibility:visible;

}

.bb-video-overlay{

    position:absolute;
    inset:0;

}

.bb-video-panel{

    position:relative;

    width:min(90vw,1200px);

    transform:scale(.96);

    transition:transform .35s ease;

}

#bb-video-lightbox.active .bb-video-panel{

    transform:none;

}

.bb-video-wrapper{

    aspect-ratio:16/9;

    background:#000;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 25px 80px rgba(0,0,0,.45);

}

.bb-video-wrapper iframe{

    width:100%;
    height:100%;
    border:0;

}

.bb-video-close{
transform-origin:center;
    position:absolute;

    top:-55px;
    right:0;

    width:44px;
    height:44px;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:0;

    border:none;

    cursor:pointer;

    font-size:30px;
    line-height:1;

    color:#fff;
    background-color: transparent;

}





#zone-services { padding: var(--main-marge-verti) 0; position: relative; text-align: center;}
#zone-services-image {position: absolute; top: 0; left: 0; width: 100%; height: 45%; overflow: hidden; z-index: 0; background-color: var(--main-color-vert-f);}
#zone-services-image img {width: 100%; height: auto; object-fit: cover; position: absolute; top: -10vw; opacity: 0.2;}
#zone-service-cols, #zone-services h1, .zone-services-sub {position: relative; z-index: 1;}
#zone-services h1 {color: var(--main-color-creme);}
.zone-services-sub {color: #fff; font-size: 24px; padding-bottom: 4vw; font-weight: 300;}
#zone-service-cols {margin: 0 25vw; display: flex; gap: 6vw;}
.service-col {width: calc(50% - 3vw);}
.service-img {width: 100%; aspect-ratio: 1 / 1; margin-bottom: 40px;}
.service-img img {object-fit: cover; width: 100%; height: 100%; object-position: center center;}


#zone-photo-banner {background-size: cover; background-position: top center; background-repeat: no-repeat; min-height: 80vh; position: relative;}
#zone-photo-banner::after {
    background: linear-gradient(
      to right,
      rgb(13, 51, 40) 0%,
      rgb(13, 51, 40) 30%,
      rgba(13, 51, 40, 0) 100%
    );
    width: 80%; height: 100%; position: absolute; z-index: 0; content: ""; top: 0; left: 0; opacity: 0.5;}
#zone-photo-banner-contenu {padding: var(--main-marge-verti) 0; width: 50%; position: relative; z-index: 1;}
#zone-photo-banner-contenu p {font-size: 30px; font-weight: 400;}


#zone-triptique { padding: var(--main-marge-verti) 0; text-align: center;}
#zone-triptique .bb-eyebrow {font-size: 24px; font-weight: 400;}
#zone-triptique:has(+ .bb-pastille) {margin-bottom: 3vw;}
#zone-triptique h2 {margin-bottom: 80px;}
#zone-triptique h2:has(+ .zone-services-sub) {margin-bottom: 10px;}
#zone-triptique p {font-size: 18px !important; margin-bottom: 20px;}
#zone-triptique p:has(+ .btn-arrondi) {margin-bottom: 40px;}
#zone-triptique .zone-services-sub {color: var(--main-color-vert-f); width: 50%; margin-left: 25%;}
#zone-triptique-liste {display: flex; gap: 6vw;}
.zone-triptique-element {width: calc((100% / 3) - 2vw);}
.zone-triptique-chiffre {font-family: 'Quine', serif; color: var(--main-color-beige); font-size: 80px;}
.zone-triptique-pre {color: var(--main-color-orange); font-weight: bold; text-transform: uppercase; font-size: 22px; letter-spacing: 3px; margin-bottom: 5px;}
.page-id-27 #zone-triptique {background-color: var(--main-color-creme);}
#zone-triptique .btn-arrondi {margin-right: 0;}

.zone-tapisserie-texte .col-texte-inner {padding-left: 0;}
.zone-tapisserie-texte.cols-reverse .col-texte-inner {padding-left: var(--main-marge-sides); padding-right: 0;}

.zone-tapisserie-texture-1, .zone-tapisserie-texture-2, .zone-tapisserie-texture-3 {position: relative; overflow: hidden;}
.zone-tapisserie-texture-1 .texture {
    position: absolute;
    top: -15vw;
    left: -4vw;
    width: 100%;
    height: auto;
    opacity: 0.3;
}
.cols-reverse .zone-tapisserie-texture-1 .texture {left: auto; right: -15vw;}

.zone-tapisserie-texture-2 .texture {
    position: absolute;
    width: 70%;
    left: 6vw;
    height: auto;
    opacity: 0.1;
}

.zone-tapisserie-texture-3 .texture {
    position: absolute;
    width: 50%;
    left: 25%;
    height: auto;
    opacity: 0.8;
}


.bb-faq-contenant .col-texte-inner, .zone-texte-video .col-texte-inner, .zone-texte-video .col-texte-inner {padding-right: var(--main-marge-sides); padding-left: 3vw;}
.cols-reverse.bb-faq-contenant .col-texte-inner, .zone-texte-video.cols-reverse .col-texte-inner {padding-right: 3vw; padding-left: var(--main-marge-sides);}


.bb-faq-contenant {}
#bb-faq {}
#bb-faq h3 {font-family: "Lato", sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; padding: 30px 80px 30px 0; color: #fff; cursor: pointer; border-top: 1px solid var(--main-color-vert-f); position: relative; margin-bottom: 0;}
#bb-faq h3:first-of-type {border: 0;}
#bb-faq h3::after {position: absolute; top: 24px; right: 20px; content: "+"; color: var(--main-color-vert-f); font-size: 18px;}
h3.ui-accordion-header-active::after {content: "-" !important; font-size: 22px !important;}
.bb-faq-element { padding-bottom: 20px;}
.bb-faq-element p {}


.zone-texte-video {align-items: center;}
.col-video {width: 35%; padding-left: 15%; padding-right: auto;}
.cols-reverse .col-video {width: 35%; padding-right: 15%; padding-left: 0;}
.bb-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.bb-video {
  position: relative;
  overflow: hidden;
}

.bb-video iframe,
.bb-video video {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    object-fit: cover;
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);

  display: flex;
  justify-content: center;
  align-items: center;

  transition: .3s;
}

.play-btn {
  width: 120px; aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: none;
  font-size: 45px;
  cursor: pointer;
  background-color: var(--main-color-vert-f);
}

.play-icon {
    display: block;
    width: 0;
    height: 0;

    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 25px solid #fff;
    
    position: relative; left: 50%; transform: translateX(-50%);
}

.play-btn:hover {background-color: var(--main-color-vert-p);}

.bb-pastille {position: relative;}
.bb-pastilles .cols {position: relative; z-index: 1;}
.bb-pastille::before {position: absolute; content: ""; z-index: 2; width: 12%; aspect-ratio: 1 / 1; top: 0; left: 50%; transform: translate(-50%, -50%); background: url("../images/BeyondBirthing_Icon_3a.png") center center no-repeat var(--main-color-creme); background-size: 95%; border-radius: 50%;}

#video-seul {padding: var(--main-marge-verti) 0; text-align: center;}
#video-seul h2 {margin-bottom: 10px;}
#video-seul h3 {margin-bottom: 50px;}

#free-masterclass-form {background-color: var(--main-color-vert-f); text-align: center; padding: var(--main-marge-verti) 0;}
#free-masterclass-form form {display: inline-block;}
#free-masterclass-form h4 {text-transform: uppercase; font-size: 22px; font-weight: bold; letter-spacing: 2px; color: var(--main-color-creme);}

.formkit-form .formkit-alert-success {background-color: transparent !important; border-width: 0 !important; color: #fff !important;}
.formkit-powered-by-convertkit-container {display: none!important;}


/**************** SECTION VIDÉOS ****************/

.bb-tabs-nav{
    display:flex;
    gap:10px;
    margin-bottom:30px;
}

.bb-tabs-nav button {
    cursor:pointer; border-radius: 15px;
    padding:12px 24px;
    border:none;
    background:var(--main-color-beige);
}

.bb-tabs-nav button:hover {
    background:var(--main-color-vert-m);
    color: var(--main-color-creme);
}

.bb-tabs-nav button.active{
    background:var(--main-color-vert-f);
    color:var(--main-color-creme);
}

/* TAB PANELS */
.bb-tab{
    display: none;
}

/* ACTIVE TAB PANEL */
.bb-tab.active{
    display: block;
}

/* CONTENT WRAPPER (optional but cleaner control) */
.bb-tab-content{
    /* you can leave empty or style spacing here */
}

.sby_lb-video-heading {border-color: var(--main-color-vert-p) !important;}
.sby_meta {display: none !important;}
.sby_load_btn {background-color:var(--main-color-vert-f) !important; color: var(--main-color-creme) !important;}
.sby_follow_btn a, .sby-lb-subscribe-btn {background-color:var(--main-color-orange) !important;}
.sby_lb-caption, .sby-no-comments {background-color: var(--main-color-creme) !important;}
.sby_lb-more-info-btn, .sby-view-all-button {background-color: var(--main-color-beige) !important;}
.sby_caption {display: none;}
.sby-comment-text p a {color: var(--main-color-vert-f) !important;}



@media (max-width:768px){


.bb-tabs-nav{
    position:relative;
    display:flex;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}
    
.bb-tabs-nav button {
  white-space: nowrap;
  flex-shrink: 0;
}

.bb-tabs-nav::-webkit-scrollbar{
    display:none;
}

.bb-tabs-nav::after{
    content:"";
    position:sticky;
    right:0;
    width:30px;
    flex:0 0 30px;
    pointer-events:none;
    background:linear-gradient(to left, #f6eed9, rgba(246,238,217,0));
}

}



/***************** MEET SOPHIE *******************/

#zone-meet-sophie {padding: var(--main-marge-verti) 0; background: url("../images/photos/beyond-birthing-meet-sophie.webp") top right var(--main-marge-sides) no-repeat var(--main-color-creme); background-size: 30% auto; min-height: 60vh; display: flex; align-items: center;}
#zone-meet-sophie-contenu {width: 50%;}

#zone-outside {min-height: 70vh; background-repeat: no-repeat; background-size: cover; background-position: center center; overflow: hidden; position: relative;}
#zone-outside-contenu {width: 30%; margin: 0 auto; text-align: center; padding-top: var(--main-marge-verti); position: relative; z-index: 1;}
#zone-outside-contenu h2 {color: #fff;}
#zone-outside-contenu p {font-weight: normal;}
#zone-outside-image {position: absolute; z-index: 0; top: -5%; left: 0; width: 100%; height: 105%;}
#zone-outside-image img {width: 100%; height: 100%; object-fit: cover; object-position: center center;}



/***************** PAGE CONTACT *******************/

#bb-form input, #bb-form textarea {width: 100%; display: inline; font-family: "Lato", sans-serif; font-size: 20px; padding: 15px; background-color: var(--main-color-creme); border-radius: 20px; color: var(--main-color-vert-f);}
#bb-form input:focus, #bb-form textarea:focus {background-color: #fff; outline: 0;}
#bb-form textarea {height: 300px;}
/* #bb-form .btn-arrondi {background-color: var(--main-color-vert-f); color: var(--main-color-creme);}
#bb-form .btn-arrondi:hover {background-color: var(--main-color-beige); color: var(--main-color-vert-f);} */

.bb-zone-contact {}
#bb-zone-contact-adresses {display: flex; align-items: center; justify-content: center; padding: 2vw 0;}
#bb-zone-contact-adresses a {text-decoration: none; color: var(--main-color-vert-f); display: flex; align-items: center; justify-content: center; white-space: nowrap; width: 50%;}
#bb-zone-contact-adresses img {max-width: 60px; max-height: 60px; margin-right: 20px;}
#bb-zone-contact-adresses span {font-size: 22px; font-weight: bold;}

#acf-map {
    width: 100%;
    height: 700px;
    overflow: hidden;
}



/***************** AUTRES PAGES *******************/

/* PRIIVACY POLICY et 404 */ #page-privacy, #page-404 {padding: var(--main-marge-verti) 0; background-color: var(--main-color-creme);}
#page-404 {text-align: center;}

#page-privacy h3 {margin-top: 60px;}




/***************** TRANSITIONS ******************/

/* rapide */

a, a *, .play-btn, .play-btn span, #bb-form input, #bb-form textarea, #header-scroll, .bb-tabs-nav button {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}

/* lente */

.menu-header-main-container {
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
-ms-transition: 0.8s;
transition: 0.8s;
}


/***************** COULEURS ET MIXTES *******************/

.bg-photo h2, .bg-photo h3 {color: #fff;}
.bg-photo p, .bg-photo ul {color: #fff;}
.bg-photo .btn-arrondi, .bg-photo [data-tf-live] a[data-tf-popup] {background-color: var(--main-color-beige); color: var(--main-color-vert-f) !important;}
.bg-photo .btn-arrondi:hover, .bg-photo [data-tf-live] a[data-tf-popup]:hover {background-color: var(--main-color-vert-f); color: var(--main-color-creme) !important;}

.bg-creme {background-color: var(--main-color-creme);}
.bg-creme p a, .bg-creme p ul a {color: var(--main-color-vert-f);}
.bg-creme p a:hover, .bg-creme p ul a:hover {text-decoration: none; background-color: var(--main-color-vert-f); color: var(--main-color-creme);}
.bg-creme #bb-faq h3 {color: var(--main-color-vert-f);}

.bg-vert-f {background-color: var(--main-color-vert-f);}
.bg-vert-f h2, .bg-vert-f h3 {color: #fff;}
.bg-vert-f p, .bg-vert-f ul {color: var(--main-color-beige);}
.bg-vert-f .btn-arrondi, .bg-vert-f [data-tf-live] a[data-tf-popup] {background-color: #fff; color: var(--main-color-vert-f) !important;}
.bg-vert-f .btn-arrondi:nth-of-type(2):last-of-type, .bg-vert-f [data-tf-live] ~ .btn-arrondi {background-color: var(--main-color-beige);}
.bg-vert-f .btn-arrondi:hover, .bg-vert-tp .btn-arrondi:hover, .bg-vert-f [data-tf-live] a[data-tf-popup]:hover, .bg-vert-tp [data-tf-live] a[data-tf-popup]:hover {background-color: var(--main-color-vert-p);}
.bg-vert-f .btn-arrondi:nth-of-type(2):last-of-type:hover, .bg-vert-f [data-tf-live] ~ .btn-arrondi:hover {background-color: var(--main-color-vert-p); color: var(--main-color-creme) !important;}
.bg-vert-f p a, .bg-vert-f p ul a {color: var(--main-color-beige);}
.bg-vert-f p a:hover, .bg-vert-f p ul a:hover {text-decoration: none; background-color: var(--main-color-beige); color: var(--main-color-vert-f);}
.bg-vert-f #bb-faq h3 {color: var(--main-color-beige);}
.bg-vert-f .bb-eyebrow, .bg-vert-f .bloc-texte-photo-sous-titre {color: var(--main-color-creme);}

.bg-vert-m {background-color: var(--main-color-vert-m);}
.bg-vert-m h2, .bg-vert-m h3 {color: var(--main-color-beige);}
.bg-vert-m p, .bg-vert-m ul {color: #fff;}
.bg-vert-m .zone-tapisserie-texture-3 .texture {opacity: 0.2;}
.bg-vert-m .btn-arrondi, .bg-vert-m [data-tf-live] a[data-tf-popup] {background-color: var(--main-color-creme); color: var(--main-color-vert-f) !important;}
.bg-vert-m .btn-arrondi:hover, .bg-vert-m [data-tf-live] a[data-tf-popup]:hover {background-color: var(--main-color-vert-f); color: var(--main-color-creme) !important;}
.bg-vert-m p a, .bg-vert-m p ul a {color: var(--main-color-creme);}
.bg-vert-m p a:hover, .bg-vert-m p ul a:hover {text-decoration: none; background-color: var(--main-color-creme); color: var(--main-color-vert-f);}
.bg-vert-m #bb-faq h3 {color: var(--main-color-creme);}
.bg-vert-m .bb-eyebrow, .bg-vert-m .bloc-texte-photo-sous-titre {color: var(--main-color-creme);}

.bg-vert-p {background-color: var(--main-color-vert-p);}
.bg-vert-p h2, .bg-vert-p h3 {color: #fff;}
.bg-vert-p p, .bg-vert-p ul {color: #fff}
.bg-vert-p .zone-tapisserie-texture-3 .texture {opacity: 0.3;}
.bg-vert-p .btn-arrondi, .bg-vert-p [data-tf-live] a[data-tf-popup], #bb-form .gform_button {background-color: var(--main-color-vert-f); color: var(--main-color-creme) !important; cursor: pointer;}
.bg-vert-p .btn-arrondi:hover, .bg-vert-p [data-tf-live] a[data-tf-popup]:hover, #bb-form .gform_button:hover {background-color: var(--main-color-beige); color: var(--main-color-vert-f) !important;}
.bg-vert-p p a, .bg-vert-p p ul a {color: #fff;}
.bg-vert-p p a:hover, .bg-vert-p p ul a:hover {text-decoration: none; background-color: #fff; color: var(--main-color-vert-f);}
.bg-vert-p #bb-faq h3 {color: #fff;}

.bg-orange {background-color: var(--main-color-orange);}
.bg-orange h2, .bg-orange h3 {color: #fff;}
.bg-orange p, .bg-orange ul {color: var(--main-color-vert-f);}
.bg-orange .btn-arrondi, .bg-orange [data-tf-live] a[data-tf-popup] {background-color: var(--main-color-creme); color: var(--main-color-vert-f) !important;}
.bg-orange .btn-arrondi:hover, .bg-orange [data-tf-live] a[data-tf-popup]:hover {background-color: var(--main-color-vert-f); color: var(--main-color-creme) !important;}
.bg-orange p a, .bg-orange p ul a {color: var(--main-color-creme);}
.bg-orange p a:hover, .bg-orange p ul a:hover {text-decoration: none; background-color: var(--main-color-creme); color: var(--main-color-vert-f);}
.bg-orange #bb-faq h3 {color: #fff;}

.bg-vert-tp {background-color: var(--main-color-vert-tp);}

.bg-blanc h2, .bg-blanc h3, .bg-blanc p, .bg-blanc ul, .bg-creme h2, .bg-creme h3, .bg-creme p, .bg-creme ul {color: var(--main-color-vert-f);}
.bg-blanc .btn-arrondi, .bg-vert-tp .btn-arrondi, .bg-creme .btn-arrondi,
.bg-blanc [data-tf-live] a[data-tf-popup], .bg-vert-tp [data-tf-live] a[data-tf-popup], .bg-creme [data-tf-live] a[data-tf-popup] {background-color: var(--main-color-vert-f); color: var(--main-color-creme) !important;}
.bg-blanc .btn-arrondi:nth-of-type(2):last-of-type, .bg-blanc [data-tf-live] ~ .btn-arrondi {background-color: var(--main-color-vert-p);}
.bg-blanc .btn-arrondi:hover, .bg-vert-tp .btn-arrondi:hover, .bg-creme .btn-arrondi:hover,
.bg-blanc [data-tf-live] a[data-tf-popup]:hover, .bg-vert-tp [data-tf-live] a[data-tf-popup]:hover, .bg-creme [data-tf-live] a[data-tf-popup]:hover {background-color: var(--main-color-vert-p);}
.bg-blanc .btn-arrondi:nth-of-type(2):last-of-type:hover, .bg-blanc [data-tf-live] ~ .btn-arrondi:hover {background-color: var(--main-color-creme); color: var(--main-color-vert-f) !important;}
.bg-blanc p a, .bg-blanc p ul a, .bg-creme p a, .bg-creme p ul a {color: var(--main-color-vert-f);}
.bg-blanc p a:hover, .bg-blanc p ul a:hover, .bg-creme p a:hover, .bg-creme p ul a:hover {text-decoration: none; background-color: var(--main-color-creme); color: var(--main-color-vert-f);}
.bg-blanc #bb-faq h3, .bg-creme #bb-faq h3 {color: var(--main-color-vert-f);}
.bg-blanc .bloc-texte-photo-sous-titre, .bg-creme .bloc-texte-photo-sous-titre {background-color: var(--main-color-vert-tp);}
.bg-blanc .zone-triptique-chiffre, .bg-creme .zone-triptique-chiffre {color: var(--main-color-vert-p);}


/* FILTRES */

/* Vert foncé */
#footer-social a, .bg-vert-p .zone-tapisserie-texture-3 .texture, #bb-zone-contact-adresses img {filter: brightness(0) saturate(100%) invert(14%) sepia(22%) saturate(1312%) hue-rotate(112deg) brightness(95%) contrast(93%);}


/* Beige */
.zone-tapisserie-texture-3 .texture {filter: brightness(0) saturate(100%) invert(95%) sepia(12%) saturate(715%) hue-rotate(332deg) brightness(92%) contrast(87%);}


/* Crème */
.zone-tapisserie-texture-2 .texture {filter: brightness(0) saturate(100%) invert(89%) sepia(21%) saturate(293%) hue-rotate(336deg) brightness(107%) contrast(93%);}



/*************** COOKIES ******************/

#klaro-cookie-notice { background-color: var(--main-color-creme);}
#klaro #id-cookie-notice {font-size: 16px; margin-top: 0; margin-bottom: 20px; color: var(--main-color-vert-f);}
#klaro #id-cookie-notice strong {font-weight: 400; color: var(--main-color-vert-f);}
.klaro .cookie-modal a, .klaro .context-notice a, .klaro .cookie-notice a {color: var(--main-color-vert-f);}
.klaro .cookie-modal .cm-btn.cm-btn-success, .klaro .context-notice .cm-btn.cm-btn-success, .klaro .cookie-notice .cm-btn.cm-btn-success {background-color: var(--main-color-vert-f);}
#klaro .cn-body {padding: 20px;}
.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider, .klaro .context-notice .cm-list-input.required:checked + .cm-list-label .slider, .klaro .cookie-notice .cm-list-input.required:checked + .cm-list-label .slider, .klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider, .klaro .context-notice .cm-list-input.half-checked:checked + .cm-list-label .slider, .klaro .cookie-notice .cm-list-input.half-checked:checked + .cm-list-label .slider, .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider, .klaro .context-notice .cm-list-input:checked + .cm-list-label .slider, .klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {background-color: var(--main-color-vert-p) !important;}

.klaro .cookie-notice .cn-decline {color: var(--main-color-vert-f); background-color: var(--main-color-beige);}
.klaro.cm-as-context-notice {padding: 0 !important;}
.klaro .context-notice p a {color: var(--main-color-vert-f);}

#klaro .cm-header p {font-size: 19px;}
#klaro .cm-list-description {font-size: 14px !important; margin: 10px 0 !important;}

.klaro .cookie-modal .cm-btn.cm-btn-success-var, .klaro .context-notice .cm-btn.cm-btn-success-var, .klaro .cookie-notice .cm-btn.cm-btn-success-var {background-color: var(--main-color-vert-m) !important;}

@media (min-width: 1024px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    border-radius: 5px;
    max-width: 350px;
  }
}