@charset "utf-8";
/* CSS Document */
@media all and (max-width: 2100px) {
#hero-banner .btn-arrondi, #hero-banner [data-tf-live] a[data-tf-popup], .zone-tapisserie-texte .btn-arrondi, .zone-tapisserie-texte [data-tf-live] a[data-tf-popup] {margin-bottom: 10px;}
}


@media all and (max-width: 1850px) {
    h1 {font-size: 70px;}
    h2 {font-size: 40px; margin-bottom: 25px;}
    h3 {font-size: 28px; margin-bottom: 15px;}
    #free-masterclass-form h4 {font-size: 19px;}
    
    #contenu p, #contenu ul {font-size: 21px; margin-bottom: 25px;}
    
    #header-menu ul {gap: 30px;}
    #header-menu a {font-size: 14px; letter-spacing: 1px;}
    .btn-arrondi, [data-tf-live] a[data-tf-popup], #primary-menu > li:last-child > a {font-size: 14px !important; letter-spacing: 1px; padding: 8px 13px;}
    
    #zone-temoignages {padding-bottom: calc(var(--main-marge-verti) + 80px);}
    #temoignages-carrousel {padding: 0 15%;}
    
    #zone-service-cols {margin: 0 15vw;}
    
    #zone-services-image img {top: -15vw;}
    

    .col-video {width: 40%; padding-left: 10%; padding-right: auto;}
    .cols-reverse .col-video {width: 40%; padding-right: 10%; padding-left: auto;}
    
    :root {
        --main-marge-sides: 10vw;
        --main-radius: 20px;
    }
}


@media all and (max-width: 1300px) {
    h1 {font-size: 60px;}
    
    #header-logo {margin-bottom: 0;}
    #header-logo img {width: 400px;}
    .btn-arrondi, [data-tf-live] a[data-tf-popup] {line-height: 1.3; margin-bottom: 10px;}
    
    .zone-services-sub {font-size: 24px;}
    
    #zone-triptique .zone-services-sub {width: 100%; margin-left: 0;}
    .zone-triptique-chiffre {font-size: 60px;}
    
    .zone-texte-video {flex-direction: column-reverse;}    
    .zone-texte-video .col-texte {width: 100%;}
    .col-video {padding: 0 var(--main-marge-sides) 6vw var(--main-marge-sides) !important; width: calc(100% - (var(--main-marge-sides)*2)) !important;}
    .zone-texte-video .col-texte-inner {padding-right: var(--main-marge-sides) !important; padding-left: var(--main-marge-sides) !important;}
    
    #bb-zone-contact-adresses img {max-width: 40px; max-height: 40px; margin-right: 15px;}
    #bb-zone-contact-adresses span {font-size: 20px; font-weight: bold;}
    
    #zone-meet-sophie {background-size: auto 100%;}
    #zone-meet-sophie-contenu {width: 40%;} 
    
    #zone-outside {height: 800px;}
    #zone-outside-contenu {width: 70%;}
    
    #footer-l1 {flex-wrap: wrap; padding-bottom: 30px; margin-bottom: 30px;}
    #footer-l1c1 p {display: none;}
    #footer-l1c1 {width: 45%;}
    #footer-l1c1 img:first-child {width: 150px;}
    #footer-l1c1 img:nth-child(2) {width: 250px;}
    #footer-l1c1 p  {font-size: 20px;}
    #footer-l1c2 {width: 22%;}
    #footer-l1c3 {width: 22%;}
    #footer-l1c4 {width: 100%; display: flex; gap: 30px; margin-top: 30px; align-items: flex-start;}
    #footer-social {margin-top: 0; margin-left: auto;}
    #footer-l1c4 .btn-arrondi:first-of-type {display: none;}
    #footer-l1c4 h3 {margin-bottom: 0;}

}

@media all and (max-width: 1100px) {
    #footer-l1c4 h3 {display: none;}
    #bb-faq h3 {font-size: 22px;}
    .bb-pastille::before {width: 20%;}
    #zone-triptique .bb-eyebrow {font-size: 20px;}
    
    #bb-zone-contact-adresses {justify-content: left; flex-direction: column; padding: 30px 0;}
    #bb-zone-contact-adresses a {width: 100%; white-space: wrap; justify-content: left; }
    #bb-zone-contact-adresses a:first-child {margin-bottom: 20px; border-bottom: 1px solid var(--main-color-vert-f); padding-bottom: 20px;}
    
    #zone-meet-sophie {background-size: auto 500px; background-position: bottom center;}
    #zone-meet-sophie-contenu {width: 100%; padding-bottom: 500px;}
}

@media all and (max-width: 800px) {
    #header-logo img {width: 350px;}
    
    .menu-toggle, #menumain {top: 20%; right: 20px;}
    
    #temoignages-carrousel {padding: 0;}
    .flickity-prev-next-button {display: none;}
    #zone-temoignages h3 {margin-bottom: 40px;}
    
    #zone-service-cols {margin: 0 20px;}
    #zone-services h1, #zone-services .zone-services-sub {padding-left: 20px; padding-right: 20px;}
    .zone-services-sub {padding-bottom: 40px; font-size: 21px;}
    
    #zone-triptique-liste {flex-direction: column; gap: 30px;}
    .zone-triptique-element {width: 100%; padding-bottom: 30px; border-bottom: 1px solid var(--main-color-vert-p);}
    .zone-triptique-element:last-child {border: 0; padding-bottom: 0;}
    #zone-triptique h2 {margin-bottom: 50px;}
    .zone-triptique-pre {font-size: 19x;}
    #zone-triptique:has(+ .bb-pastille) {margin-bottom: 60px;}
    
    #zone-services-image {height: 25%;}
    #zone-services-image img {width: 300%; top: -130px;}
    
    .play-btn {
      width: 90px;
      font-size: 35px;
      cursor: pointer;
    }
    
    #bb-faq h3 {padding: 20px 80px 20px 0;}
    
    #footer-l1c1 {width: 100%; text-align: center; display: flex; flex-direction: column; justify-content: center; margin-bottom: 30px;}
    #footer-l1c1 img {position: relative; left: 50%; transform: translateX(-50%);}
    #footer-l1c1 img:first-child, #footer-l1c1 img:nth-child(2) {display: inline-block;}
    #footer-l1c2 {width: 100%; margin-bottom: 30px; text-align: center;}
    #footer-l1c3 {width: 100%; text-align: center;}
    #footer-l2 {flex-direction: column;}
    #footer-l2c1 {width: 100%; margin-bottom: 10px; text-align: center;}
    #footer-l2c2 {width: 100%; text-align: center;}
    
    h2 {font-size: 35px;}
    h3 {font-size: 26px;}
}

@media all and (max-width: 640px) {
    
    header {padding: 30px 0; text-align: left;}
    
    .menu-toggle, #menumain {top: 30%;}
    
    .menu-toggle, #menumain {width: 45px; height: 45px;}
    .toggled #menumain::after {transform: translateY(0) rotate(135deg);}
    .toggled #menumain #menu-graph {transform: translateY(13px) rotate(-135deg);}
    
    #primary-menu a, #primary-menu > li:last-child a {padding-left: 20px !important;}
    
    h1 {font-size: 50px;}
    h2 {font-size: 30px;}
    h3 {font-size: 24px;}
    
    #contenu p, #contenu ul {font-size: 17px;}
    
    #hero-banner {overflow: hidden;}
    #hero-banner::after { height: 100%; width: 180%;
    background: linear-gradient(
      to right,
      rgb(252, 249, 240) 0%,
      rgb(252, 249, 240) 20%,
      rgba(252, 249, 240, 0) 100%
    );}
    #hero-banner-text {width: calc(70% - var(--main-marge-sides));}
    
    .zone-tapisserie-texture-1, .zone-tapisserie-texture-2, .zone-tapisserie-texture-3 {width: 20% !important;}
    .zone-tapisserie-texture-1 .texture, .zone-tapisserie-texture-2 .texture {width: 400%;}
    .zone-tapisserie-texture-3 .texture {left: auto; right: 30px; width: 200%;}
    .zone-tapisserie-texte .col-texte-inner {padding-left: 20px;}
    
    .cols {flex-direction: column !important;}
    .cols.cols-reverse {flex-direction: column-reverse;}
    .col, .col-photo {width: 100%;}
    .col-photo {height: 60vh;}
    .col-texte {width: 100%;}
    .col-texte-inner {padding: 0 var(--main-marge-sides);}
    .col-video {padding-top: 30px !important;}
    
    .bb-dual-cta::before {display: none;}
    .bb-dual-cta .col:first-child {border-bottom: 2px solid rgba(255,255,255,0.2);}
    
    .bb-eyebrow {margin-bottom: 20px;}
    #zone-triptique h2 {margin-bottom: 30px;}
    
    #zone-service-cols {flex-direction: column;}
    .service-col {width: 100%;}
    .service-col:first-child {margin-bottom: 40px;}
    
    #zone-photo-banner {position: relative; text-align: center;}
    #zone-photo-banner .div-inner {z-index: 1; position: relative;}
    #zone-photo-banner-contenu {width: 100%;}
    #zone-photo-banner::after {position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--main-color-vert-f); z-index: 0; opacity: 0.6;}
    
    .bb-pastille::before {width: 120px; left: auto; right: 40px; transform: translate(0, -50%);}
    
    #bb-form input, #bb-form textarea {font-size: 18px; padding: 10px; border-radius: 15px; margin-bottom: 15px; width: calc(100% - 20px);}
    
    [data-tf-live] {width: 100%;}
    
    #footer-l1c4 {flex-wrap: wrap; gap: 20px; text-align: center;}
    #footer-l1c4 h3 {display: block; text-align: center; width: 100%;}
    #footer-l1c4 .btn-arrondi {width: 100%;}
    #footer-social {width: 100%; justify-content: center;}
    
    :root {
        --main-marge-sides: 20px;
        --main-marge-verti: 40px;
    }
}

@media all and (max-width: 500px) {
    
    .zone-tapisserie-texture-3 {width: 0 !important;}
    .zone-tapisserie-texte .col-texte-texture {width: 100% !important;}
    
}

@media all and (max-width: 450px) {
    
    #hero-banner { background-position: center right -400px;}
    #header-logo img {width: 300px;}
    
}

@media all and (max-width: 400px) {
    .menu-toggle, #menumain {top: 25%;}
    #header-logo img {width: 250px;}
    
}