.ct-section {
width:100%;
background-size:cover;
background-repeat:repeat;
}
.ct-section>.ct-section-inner-wrap {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.ct-div-block {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.ct-new-columns {
display:flex;
width:100%;
flex-direction:row;
align-items:stretch;
justify-content:center;
flex-wrap:wrap;
}
.ct-link-text {
display:inline-block;
}
.ct-link {
display:flex;
flex-wrap:wrap;
text-align:center;
text-decoration:none;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-link-button {
display:inline-block;
text-align:center;
text-decoration:none;
}
.ct-link-button {
background-color: #1e73be;
border: 1px solid #1e73be;
color: #ffffff;
padding: 10px 16px;
}
.ct-image {
max-width:100%;
}
.ct-fancy-icon>svg {
width:55px;height:55px;}
.ct-inner-content {
width:100%;
}
.ct-slide {
display:flex;
flex-wrap:wrap;
text-align:center;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-nestable-shortcode {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-comments {
width:100%;
text-align:left;
}
.oxy-comment-form {
width:100%;
}
.oxy-login-form {
width:100%;
}
.oxy-search-form {
width:100%;
}
.oxy-tabs-contents {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab-content {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-testimonial {
width:100%;
}
.oxy-icon-box {
width:100%;
}
.oxy-pricing-box {
width:100%;
}
.oxy-posts-grid {
width:100%;
}
.oxy-gallery {
width:100%;
}
.ct-slider {
width:100%;
}
.oxy-tabs {
display:flex;
flex-wrap:nowrap;
flex-direction:row;
align-items:stretch;
}
.ct-modal {
flex-direction:column;
align-items:flex-start;
}
.ct-span {
display:inline-block;
text-decoration:inherit;
}
.ct-widget {
width:100%;
}
.oxy-dynamic-list {
width:100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
			.ct-div-block,
			.oxy-post-content,
			.ct-text-block,
			.ct-headline,
			.oxy-rich-text,
			.ct-link-text { max-width: 100%; }
			img { flex-shrink: 0; }
			body * { min-height: 1px; }
		}            .oxy-testimonial {
                flex-direction: row;
                align-items: center;
            }
                        .oxy-testimonial .oxy-testimonial-photo-wrap {
                order: 1;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo {
                width: 125px;                height: 125px;                margin-right: 20px;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo-wrap, 
            .oxy-testimonial .oxy-testimonial-author-wrap, 
            .oxy-testimonial .oxy-testimonial-content-wrap {
                align-items: flex-start;                text-align: left;            }
            
                                                            .oxy-testimonial .oxy-testimonial-text {
                margin-bottom:8px;font-size: 21px;
line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
                                    .oxy-testimonial .oxy-testimonial-author {
                font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
            }
                            

                                                .oxy-testimonial .oxy-testimonial-author-info {
                font-size: 12px;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
             
            
                        .oxy-icon-box {
                text-align: left;                flex-direction: column;            }
            
                        .oxy-icon-box .oxy-icon-box-icon {
                margin-bottom: 12px;
                align-self: flex-start;            }
            
                                                                        .oxy-icon-box .oxy-icon-box-heading {
                font-size: 21px;
margin-bottom: 12px;            }
            
                                                                                    .oxy-icon-box .oxy-icon-box-text {
                font-size: 16px;
margin-bottom: 12px;align-self: flex-start;            }
            
                        .oxy-icon-box .oxy-icon-box-link {
                margin-top: 20px;                            }
            
            
            /* GLOBALS */

                                                            .oxy-pricing-box .oxy-pricing-box-section {
                padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: center;            }
                        
                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                justify-content: center;            }
            
            /* IMAGE */
                                                                                    .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic {
                justify-content: center;            }
            
            /* TITLE */
                                                            
                                    .oxy-pricing-box .oxy-pricing-box-title-title {
                font-size: 48px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-title-subtitle {
                font-size: 24px;
            }
            

            /* PRICE */
                                                .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                                                flex-direction: row;                                            }
            
                                    .oxy-pricing-box .oxy-pricing-box-currency {
                font-size: 28px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-main {
                font-size: 80px;
line-height: 0.7;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-decimal {
                font-size: 13px;
            }
                        
                                    .oxy-pricing-box .oxy-pricing-box-term {
                font-size: 16px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-sale-price {
                font-size: 12px;
color: rgba(0,0,0,0.5);
                margin-bottom: 20px;            }
            
            /* CONTENT */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content {
                font-size: 16px;
color: rgba(0,0,0,0.5);
            }
            
            /* CTA */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta {
                justify-content: center;            }
            
        
                                .oxy-progress-bar .oxy-progress-bar-background {
            background-color: #000000;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);            animation: none 0s paused;        }
                
                .oxy-progress-bar .oxy-progress-bar-progress-wrap {
            width: 85%;        }
        
                                                        .oxy-progress-bar .oxy-progress-bar-progress {
            background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);        
        }
                
                        .oxy-progress-bar .oxy-progress-bar-overlay-text {
            font-size: 30px;
font-weight: 900;
-webkit-font-smoothing: subpixel-antialiased;
        }
        
                        .oxy-progress-bar .oxy-progress-bar-overlay-percent {
            font-size: 12px;
        }
        
        .ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide {
				padding: 0px;			}
		
                        .oxy-superbox .oxy-superbox-secondary, 
            .oxy-superbox .oxy-superbox-primary {
                transition-duration: 0.5s;            }
            
            
            
            
            
        
        
        
        
            .oxy-shape-divider {
                width: 0px;
                height: 0px;
                
            }
            
            .oxy_shape_divider svg {
                width: 100%;
            }
            .oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{
box-shadow:px px px px ;}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{
margin-left:0px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
width:30px;
height:30px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon{
padding-top:15px;
padding-right:15px;
padding-bottom:15px;
padding-left:15px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon{
top:20px;
left:20px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
width:24px;
height:24px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{
background-color:#ffffff;
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{
background-image:url();
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{
font-size:24px;
}

.oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{
background-color:rgba(0,0,0,0.2);
border-top-style:solid;
}

.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{
                    flex-direction: row;
               }
.oxy-pro-menu .oxy-pro-menu-container .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{
                    align-items: flex-start;
                }

            .oxy-pro-menu .oxy-pro-menu-off-canvas-container{
                    top: 0;
                    bottom: 0;
                    right: auto;
                    left: 0;
               }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }

            .oxy-site-navigation {
--oxynav-brand-color:#4831B0;
--oxynav-neutral-color:#FFFFFF;
--oxynav-activehover-color:#EFEDF4;
--oxynav-background-color:#4831B0;
--oxynav-border-radius:0px;
--oxynav-other-spacing:8px;
--oxynav-transition-duration:0.3s;
--oxynav-transition-timing-function:cubic-bezier(.84,.05,.31,.93);
}

.oxy-site-navigation .oxy-site-navigation__mobile-close-wrapper{
text-align:left;
}

.oxy-site-navigation > ul{ left: 0; }
.oxy-site-navigation {
                        --oxynav-animation-name: none; 
                    }

                .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1){ 
                    background-color: var(--oxynav-brand-color);
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                    border: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2){ 
                    background: transparent;
                    border: 1px solid currentColor;
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2):not(:hover) > img{
                    filter: invert(0) !important;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover{
                    background-color: var(--oxynav-activehover-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a{
                    color: var(--oxynav-neutral-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a::after{
                    color: var(--oxynav-neutral-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > button, .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }

                .ct-section-inner-wrap, .oxy-header-container{
  max-width: 1320px;
}
body {font-family: 'Montserrat';}body {line-height: 1.6;font-size: 16px;font-weight: 400;color: #404040;}.oxy-nav-menu-hamburger-line {background-color: #404040;}h1, h2, h3, h4, h5, h6 {font-family: 'Source Sans 3';font-size: 36px;font-weight: 700;}h2, h3, h4, h5, h6{font-size: 30px;}h3, h4, h5, h6{font-size: 24px;}h4, h5, h6{font-size: 20px;}h5, h6{font-size: 18px;}h6{font-size: 16px;}a {color: #0074db;text-decoration: none;}a:hover {text-decoration: none;}.ct-link-text {text-decoration: ;}.ct-link {text-decoration: ;}.ct-link-button {border-radius: 3px;}.ct-section-inner-wrap {
padding-top: 75px;
padding-right: 20px;
padding-bottom: 75px;
padding-left: 20px;
}.ct-new-columns > .ct-div-block {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}.oxy-header-container {
padding-right: 20px;
padding-left: 20px;
}@media (max-width: 992px) {
				.ct-columns-inner-wrap {
					display: block !important;
				}
				.ct-columns-inner-wrap:after {
					display: table;
					clear: both;
					content: "";
				}
				.ct-column {
					width: 100% !important;
					margin: 0 !important;
				}
				.ct-columns-inner-wrap {
					margin: 0 !important;
				}
			}
.primary-button:hover{
}
.primary-button {
background-color :rgba(0,0,0,0);
border: 1px solid rgba(0,0,0,0);
color: #ffffff;
padding: 8px 12.8px;
}.primary-button {
 padding-top:20px;
 padding-right:30px;
 padding-bottom:20px;
 padding-left:30px;
}
@media (max-width: 479px) {
.primary-button {
}
.primary-button:not(.ct-section):not(.oxy-easy-posts),
.primary-button.oxy-easy-posts .oxy-posts,
.primary-button.ct-section .ct-section-inner-wrap{
display:none;
}
}

.cta-bloc {
}
.global-button {
background-color :#1e73be;
border: 1px solid #1e73be;
color: #ffffff;
}.global-button {
 padding-top:20px;
 padding-left:30px;
 padding-right:30px;
 padding-bottom:20px;
 margin-left:89px;
}
@media (max-width: 479px) {
.global-button {
 padding-right:30px;
 padding-left:30px;
 padding-top:20px;
 padding-bottom:20px;
 margin-left:0px;
}
.global-button:not(.ct-section):not(.oxy-easy-posts),
.global-button.oxy-easy-posts .oxy-posts,
.global-button.ct-section .ct-section-inner-wrap{
display:flex;
}
}

.link-wrapper {
 top:-50px;
 position:relative;
}
@media (max-width: 479px) {
.link-wrapper {
 top:-50px;
}
}

.footer-row {
}
.footer-row:not(.ct-section):not(.oxy-easy-posts),
.footer-row.oxy-easy-posts .oxy-posts,
.footer-row.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
}
.copyright {
}
@media (max-width: 479px) {
.copyright {
 margin-bottom:18px;
 text-align:left;
}
}

.footer-links {
}
.footer-links:not(.ct-section):not(.oxy-easy-posts),
.footer-links.oxy-easy-posts .oxy-posts,
.footer-links.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
}
@media (max-width: 479px) {
.footer-links {
 padding-bottom:20px;
 width:100%;
 min-width:414px;
}
.footer-links:not(.ct-section):not(.oxy-easy-posts),
.footer-links.oxy-easy-posts .oxy-posts,
.footer-links.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
}
}

.section-retraite {
 border-bottom-width:0px;
 border-top-style:none;
 border-right-style:none;
 border-bottom-style:solid;
 border-left-style:none;
 border-top-width:1px;
 border-right-width:1px;
 border-left-width:1px;
 font-size:26px;
 font-weight:500;
}
.section-retraite .ct-section-inner-wrap {
padding-top: 0;
padding-right: 12px;
padding-bottom: 0;
padding-left: 12px;
}
@media (max-width: 479px) {
.section-retraite {
 min-width:420px;
 width:100%;
 font-size:26px;
 font-weight:500;
 margin-bottom:16px;
 color:#0a2e38;
}
.section-retraite .ct-section-inner-wrap {
padding-top: 0;
padding-right: 12px;
padding-bottom: 0;
padding-left: 12px;
}
}

.hamburger-icon {
background-image:linear-gradient(#0a2e38, #0a2e38); background-color:#0a2e38;
}
.round-button {
padding: 20px 32px;
}.round-button {
 font-size:54px;
}
.carousel {
}
.carousel:not(.ct-section):not(.oxy-easy-posts),
.carousel.oxy-easy-posts .oxy-posts,
.carousel.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
}
.card1 {
}
.card2 {
}
.div3 {
}
.div4 {
}
.card3 {
}
.card4 {
}
.card5 {
}
.card6 {
}
.card7 {
}
.card8 {
}
.card9 {
}
.card10 {
}
.card {
 text-align:right;
 width:372px;
 height:558px;
}
.card:not(.ct-section):not(.oxy-easy-posts),
.card.oxy-easy-posts .oxy-posts,
.card.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
.carousel-button {
 border-radius:30px;
}
.swiper-wrapper {
}
.swiper-slide {
}
.fake-title {
}
.cover {
}
.approach_img {
 margin-bottom:3px;
 height:100%;
 width:100%;
 object-fit:cover;
object-fit: cover; object-position: center; width: 451px; height: 549px;
}
@media (max-width: 479px) {
.approach_img {
 width:390%;
 height:260%;
 color:#0a2e38;
}
}

.tline {
}
.social-icon {
color: #ffffff;}.social-icon 
>svg {width: 44px;height: 44px;}.social-icon {
 border-top-color:#ffffff;
 border-right-color:#ffffff;
 border-bottom-color:#ffffff;
 border-left-color:#ffffff;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 background-color:rgba(0,0,0,0);
 border-radius:44px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
}
.footer-section {
 width:100%;
 min-height:424px;
}
.footer-section .ct-section-inner-wrap {
padding-top: 45px;
padding-right: 80px;
padding-bottom: 45px;
padding-left: 80px;
}
.hero-circle {
}
@media (max-width: 479px) {
.hero-circle {
}
}

.full-bleed {
}
.two-col {
}
.col-img {
}
.col-copy {
}
.header {
 position:relative;
 top:5px;
}
.header:not(.ct-section):not(.oxy-easy-posts),
.header.oxy-easy-posts .oxy-posts,
.header.ct-section .ct-section-inner-wrap{
display:flex;
}
@media (max-width: 479px) {
.header {
 position:relative;
 top:-26px;
 width:100%;
}
.header .ct-section-inner-wrap {
padding-top: 42px;
padding-bottom: 20px;
}
}

.image-div-header {
}
.header-tel {
}

body {
  background:#0A2E38;
  overflow-x: hidden;   /* coupe le débordement horizontal global */
  

}
body, html {
  scroll-behavior: smooth;
}
h1, h2,h3, .fake-title {
  font-family: "Playfair Display", serif;
  font-size: 54px;
  line-height: 1.2;     /* au lieu de 65px fixes */
}

/* ===== HEADER ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: transparent;
  height: 160px !important; /* nav grande */
  transition: background 0.3s ease, height 0.3s ease;
}

/* Conteneur interne d’Oxygen (très important pour centrer) */
.header > .ct-section-inner-wrap {
  display: flex;
  align-items: center;       /* centre tous les enfants verticalement */
  justify-content: space-between; /* logo à gauche / menu/bouton à droite */
  height: 100%;
  padding-top: 0 !important;     /* supprime padding Oxygen */
  padding-bottom: 0 !important;
}

.header.scrolled {
  background: #0A2E38; /* ton bleu */
  height: 90px !important; /* nav réduite */
}

/* ===== LOGO (conteneur) ===== */
.image-div-header {
  width: 250px;
  height: 90px;
  display: flex;
  align-items: center; /* centre l’image verticalement */
  transition: width 0.3s ease;
}

.header.scrolled .image-div-header {
  width: 160px; /* réduit en largeur */
  height: 90px; /* reste à 90px en hauteur */
}

/* ===== LOGO (image) ===== */
#image-7-7 {
  width: 250px !important;
  height: 90px !important;
  object-fit: contain;
  display: block;
  transition: width 0.3s ease;
}

.header.scrolled #image-7-7 {
  width: 160px !important; /* réduit largeur */
  height: 90px !important; /* reste fixe en hauteur */
}

/* ===== AUTRES ÉLÉMENTS (bouton + code block) ===== */
#link_button-12-7,
#code_block-84-7 {
  display: flex;
  align-items: center;  /* contenu centré verticalement */
  height: 100%;         /* occupe toute la hauteur de la nav */
}

/* Cacher le bouton "Contactez-nous" sur mobile */
@media (max-width: 1023px) {
  #link_button-12-7 {
    display: none !important;
  }
}

.primary-button {
  background:#CA9759;
  font-size: 12px; 
  font-weight: 600;
  transition:all 0.3s  ease-in-out;
  font-family: "Lexend Zetta", sans-serif;
  color: #0A2E38;
}

.primary-button:hover {
  background:#0A2E38;
  border-color: #CA9759; 
  color: #CA9759;
}


.oxy-nav-menu-hamburger-line {
  height: 1px;            
  transform: scaleY(1);         
  background-color: #fff;        
  display: block;
  transition: all 0.3s ease-in-out;
}

.hamburger-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /
  gap: 6px; 
}

/* Ligne du milieu plus courte au repos */
.oxy-nav-menu-hamburger-line:nth-child(2) {
  width: 16px; 
}

/* Au hover du burger, la ligne du milieu s'agrandit */
.hamburger-icon:hover .oxy-nav-menu-hamburger-line:nth-child(2) {
  width: 40px; 
}

.link-wrapper {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 2px solid #CA9759;
  background: transparent;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  cursor: pointer;
  flex-shrink: 0; /* empêche de devenir ovale */
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  text-align: center;
  line-height: 1; /* empêche le texte/icone de se décaler verticalement */
}

/* Effet au survol */
.link-wrapper:hover {
  background: #CA9759;
  color: #0A2E38;
  border-color: #CA9759; /* cohérent avec le fond au hover */
  transform: translateY(8px); /* plus subtil que 15px */
}

/* Responsive tablette */
@media (max-width: 991px) {
  .link-wrapper {
    width: 120px;
    height: 120px;
    font-size: 22px;
  }
}

/* Responsive mobile */
@media (max-width: 768px) {
  .link-wrapper {
    width: 80px;
    height: 80px;
    font-size: 16px;
  }
}



.carousel-button{
  background: #FBF6F0; 
  color: #CA9759; 
  font-family: "Lexend Zetta", sans-serif;
}


.global-button{
  background: #FFFFFF;
}

/* Flèche plus grande et couleur constante */
.global-button::after {
  content: "⟶";
  font-size: 20px;              /* ↑ agrandie */
  line-height: 1;
  display: inline-block;
  margin-left: 10px;
  transition: transform .3s ease;
  color: #CA9759 !important;    /* couleur fixe */
}

/* Sécurités : même couleur sur les états */
.global-button:hover::after,
.global-button:focus::after,
.global-button:active::after {
  color: #CA9759 !important;
}



.global-button:hover{
  background: ##0A2E38;
  color: #FFFF;
}

.global-button:hover::after {
  transform: translateX(4px);  /* la flèche avance à droite */
}

.cover{
  height: 520px; 
  object-fit: cover; 
  width: 100%;
}

.tline {
  position: relative;
  padding-top: 12px;            /* espace pour respirer entre ligne et texte */
  margin-top: 12px;             /* espace depuis le titre */
}

.tline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;                   /* largeur de la ligne (ajuste selon besoin) */
  height: 1px;                  /* épaisseur de la ligne */
  background-color: #34545C;    /* gris clair, change si besoin */
}

.footer-row{
  position: relative;
  padding-top: 12px;            /* espace pour respirer entre ligne et texte */
  margin-top: 12px;    
}

.footer-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;                   /* largeur de la ligne (ajuste selon besoin) */
  height: 1px;                  /* épaisseur de la ligne */
  background-color: #34545C;    /* gris clair, change si besoin */
}



/* breadcrum juste en dessous */ 
.breadcrumb-reference {
  background-color: #0d2f36;
  padding: 10px 20px;
  font-family: 'Montserrat', Arial, sans-serif;
}

.breadcrumb-reference a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  text-transform: uppercase; /* Tous en majuscules */
}

.breadcrumb-reference a:hover {
  text-decoration: underline;
}

.breadcrumb-reference .separator {
  margin: 0 6px;
  color: #c0cfd3;
}

/* Dernier élément (actif / non cliquable) */
.breadcrumb-reference .breadcrumb-current {
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;         /* blanc */
  font-weight: 400;
  text-transform: none;   /* pas en uppercase */
  cursor: default;        /* pas de curseur "main" */
}




/* Container de la ligne du bas */
#div_block-62-7 {
  border-top: 1px solid rgba(255, 255, 255, 0.15); /* fine séparation */
  padding-top: 15px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 14px;
  color: #60767E;
}

/* Ligne du bas */
#div_block-62-7 {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 15px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 14px;
  color: #60767E;
}

/* Groupe des liens */
.footer-links {
  display: flex;
  gap: 25px;
}

.footer-links a {
  color: #60767E;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #c18b4a; /* doré au hover */
}


/* Réduit le padding bas du footer */
.ct-section.footer-section .ct-section-inner-wrap {
  padding-bottom: 20px !important; /* Ajuste la valeur à ton goût */
}

/* ===== Bouton avec flèche fine + animation ===== */
#link_button-57-10 {
  position: relative;
  padding-right: 40px !important; /* espace pour la flèche */
  overflow: visible;
}

/* Trait horizontal */
#link_button-57-10::after {
  content: "";
  position: absolute;
  right: 20px;              
  top: 50%;
  transform: translateY(-50%);
  width: 12px;              
  height: 1px;              
  background-color: #0A2E38;
  transition: all 0.3s ease;   /* animation fluide */
}

/* Chevron */
#link_button-57-10::before {
  content: "";
  position: absolute;
  right: 20px;              
  top: 50%;
  width: 9px;   /* augmenté depuis 6px */
  height: 9px;  /* augmenté depuis 6px */
  border-top: 1px solid #0A2E38;
  border-right: 1px solid #0A2E38;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.3s ease;   /* animation fluide */
}


/* Hover : tout passe en blanc + flèche glisse vers la droite */
#link_button-57-10:hover::after {
  background-color: #ffffff;
  transform: translate(4px, -50%); /* trait avance vers la droite */
}

#link_button-57-10:hover::before {
  border-color: #ffffff;
  transform: translate(4px, -50%) rotate(45deg); /* chevron avance aussi */
}

/* ===== Bouton avec flèche fine + animation ===== */
#link_button-118-10 {
  position: relative;
  padding-right: 50px !important; /* espace pour la flèche */
  overflow: visible;
}

/* Trait horizontal */
#link_button-118-10::after {
  content: "";
  position: absolute;
  right: 20px;              
  top: 50%;
  transform: translateY(-50%);
  width: 12px;              
  height: 1px;              
  background-color: #0A2E38;
  transition: all 0.3s ease;   /* animation fluide */
}

/* Chevron (agrandi) */
#link_button-118-10::before {
  content: "";
  position: absolute;
  right: 20px;              
  top: 50%;
  width: 9px;   /* augmenté */
  height: 9px;  /* augmenté */
  border-top: 1px solid #0A2E38;
  border-right: 1px solid #0A2E38;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.3s ease;   /* animation fluide */
}

/* Hover : tout passe en blanc + flèche glisse vers la droite */
#link_button-118-10:hover::after {
  background-color: #ffffff;
  transform: translate(4px, -50%); /* trait avance */
}

#link_button-118-10:hover::before {
  border-color: #ffffff;
  transform: translate(4px, -50%) rotate(45deg); /* chevron avance aussi */
}

@media (max-width: 767px) {
  section,
  .ct-section,
  .ct-section-inner-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  body, html {
    overflow-x: hidden; /* supprime tout décalage horizontal */
  }
}


/* Casser la limite de largeur Oxygen pour ta div d'avis */
#div_block-112-7 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Le shortcode à l'intérieur doit lui aussi s'étirer */
#shortcode-114-7 {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
}

/* Section héro */
#section-2-10 {
  position: relative;
  overflow: visible !important; /* important pour ne pas couper le link wrapper */
  z-index: 1; /* la section reste sous les éléments interactifs */
}

/* Overlay en arrière-plan */
#section-2-10::after {
  content: "";
  position: absolute;
  bottom: -100px; 
  right: -120px;
  width: 90%;  /* ajuste la taille */
  height: 90%;
  background: url("https://www.sepaje.websoso.fr/wp-content/uploads/2025/09/Logo-accueil-Convertio.webp") no-repeat bottom right;
  background-size: contain;
  opacity: 0.08;       /* effet filigrane */
  pointer-events: none;
  z-index: 0;          /* derrière tout le contenu */
  clip-path: inset(0); /* empêche le débordement */
  overflow: hidden;    /* sécurité supplémentaire */
}

/* Le link wrapper passe toujours devant */
#link_wrapper-47 {
  position: relative;
  z-index: 10; /* au-dessus de l’overlay */
}



#cta-block {
  position: absolute !important;
  top: 0!important;
  left: 0!important;
  width: 100%!important;
  height: 100%!important;
  background: rgba(0, 0, 0, 0.35)!important;
}


.header-tel {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #CA9759;
  color: #0A2E38;
  font-family: "Lexend Zetta", sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 20px 30px;
  border: 1px solid transparent;   /* la bordure est prête mais invisible */
  border-radius: 50px;             /* arrondi comme le bouton */
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  position: relative;
  margin-right: 15px;
}

/* Texte par défaut */
.header-tel::after {
  content: "06 63 46 12 18";
  text-align: center;
  width: 100%;
}


/* Texte au survol */
.header-tel:hover::after {
  content: "Ligne ouverte de 9h à 19h";
}




:root{
  --c-bg: #0f2c2f;            /* fond de la carte active */
  --c-text: #1d2a2e;          /* texte par défaut */
  --c-muted: #6b7a85;         /* texte secondaire */
  --c-white: #ffffff;
  --c-cream: #f6f7f8;         /* fond page */
  --c-accent: #0f2c2f;        /* bordures/CTA */
  --radius: 18px;
  --shadow: 0 8px 28px rgba(21, 25, 28, .08);
}

.services-slider{
  padding: clamp(24px, 0vw, 40px) 16px 0; /* padding-bottom à 0 */
}


/* Parent du swiper de l'accueil */
#code_block-23-10 {
  background:#ffffff !important;
}

.services-head{
  position:relative;
  gap: 16px;
  margin-bottom: clamp(16px, 2.5vw, 28px);
  flex-wrap: wrap;
  max-width: 1320px;
}

.services-title{
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.2;
  color: #1d2a2e;
  margin: 0;
  flex: 0 0 100%;
}

.services-head {
  position: relative;
}

/* Desktop : chevrons à droite */
@media (min-width: 1024px) {
  .services-nav {
    display: flex;
    gap: 12px;
    position: absolute;
    top: -40px;       /* ajuste la hauteur verticale */
    right: 20px;      /* colle les chevrons au bord droit */
    z-index: 10;
  }
}

/* Mobile : chevrons à gauche et côte à côte */
@media (max-width: 1023px) {
  .services-nav {
    position: static;                /* plus d'absolu */
    display: flex;                   /* flex obligatoire */
    flex-direction: row;             /* en ligne */
    justify-content: flex-start;     /* alignés à gauche */
    align-items: center;             /* verticalement centrés */
    margin-top: 16px;                /* petit espace */
    gap: 12px;                       /* espace entre les 2 */
  }
}







.nav-body {
  position: relative;
}

.nav-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1.5px solid #0F2C2F;  /* cercle fin bleu foncé */
  background: transparent;       /* pas de fond */
  color: #0F2C2F;                /* flèche bleu foncé */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.nav-btn:hover {
  background: #0F2C2F;   /* fond bleu foncé */
  color: #fff;           /* flèche blanche */
  border-color: #0F2C2F;
}

.nav-btn:active {
  transform: scale(0.95); /* petit effet clic */
}

.nav-btn svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* Swiper */
#services-slider .swiper { 
  overflow: hidden;                 /* mobile : on cache ce qui dépasse */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#services-slider .swiper::-webkit-scrollbar { display: none; }

.swiper-wrapper{ align-items: stretch; }
.swiper-slide{ height: auto; display:flex; }

/* À partir de la tablette, on peut laisser dépasser (pour les ombres) */
@media (min-width: 768px){
  #services-slider .swiper { overflow: visible; }
}

/* Cards */
.card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  background: #ffffff;
  color: #1d2a2e;
  box-shadow: 0 8px 28px rgba(21, 25, 28, .08);
  padding: clamp(18px, 2.2vw, 28px);
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
  min-height: 260px;
  transform: translateY(0);
}

.card:hover {
  /*transform: translateY(-8px);*/
  box-shadow: 0 16px 36px rgba(0,0,0,0.15);
}

.pill{
  font-family: 'Lexend Zetta', Arial, sans-serif;
  display:inline-block;
  font-size: 12px;
  letter-spacing:.06em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  background: #FBF6F0;
  color: #CD9759;
  font-weight: 700;
  width:max-content;
}
.pill--pro{ background:#f2efe8; }

.card-title{
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 25px;  
  line-height: 1.25;
  margin: 2px 0 0 0;
  align-self: flex-start;
  text-align:start;
}

.card-text{
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #6b7a85;
  line-height: 1.55;
  margin: 0 0 40px 0;
  align-self: flex-start;
  text-align:start;
}

/* Bouton CTA */
.card-cta{
  position: static;
  align-self: flex-end;
  margin-top: 12px;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid #cfd8de;
  display: grid; place-items: center;
  color: #1d2a2e;
  background: #ffffff;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.card-cta:hover{
  transform: translateY(-2px);
  background: #0A2E38; /* bleu foncé */
  color: #ffffff;
}

.card:hover .card-cta {
  background: #0A2E38;   /* fond bleu foncé */
  color: #fff;           /* flèche blanche */
  border-color: #0A2E38; /* bordure bleue */
}

/* Toutes les cards (hauteur fixe identique) */
.card {
  height: 649px; /* fixe au lieu de min-height */
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}

/* Slide centré */
.swiper-slide.is-center {
  z-index: 5; /* met le slide entier au-dessus des autres */
}

/* Carte au CENTRE (bleue) */
.swiper-slide.is-center .card {
  background: #0A2E38;
  color: #ffffff;

  /* Effet : grandit en hauteur mais se réduit légèrement en largeur */
  transform: scaleY(1.05) scaleX(0.98); 
  transform-origin: bottom; /* reste collée en bas */
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  position: relative;
  z-index: 5;
}

/* Texte blanc */
.swiper-slide.is-center .card .card-text {
  color: rgba(255, 255, 255, 0.85);
}

/* Pastille */
.swiper-slide.is-center .card .pill {
  background: rgba(255, 255, 255, .14);
  color: #ffffff;
}

/* CTA */
.swiper-slide.is-center .card .card-cta {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255,255,255,.25);
  transition: all 0.3s ease;
}
.swiper-slide.is-center .card .card-cta:hover {
  background: #ffffff;
  color: #0A2E38;
  border-color: #ffffff;
}




/* Responsive */
@media (min-width: 768px){
  .card{ min-height: 320px; }
}
@media (min-width: 1024px){
  .card{ min-height: 340px; }
}

.card .pill {
  align-self: flex-start;
  margin-right: auto;
}

/* La description passe sous le H2 et prend toute la ligne */
.needs__desc{
  flex: 0 0 100%;
  margin: 8px 0 0 0;          /* espace au-dessus, ajuste si besoin */
}

.card-link {
  display: block;
  color: inherit;           /* garde la couleur du parent */
  text-decoration: none;    /* enlève le soulignement */
}

.card-link:hover,
.card-link:focus {
  color: inherit;           /* évite que ça redevienne bleu au hover/focus */
}

.card-link .card {
  cursor: pointer;
}

/* Padding supplémentaire en bas de la section sur mobile */
@media (max-width: 767px) {
  .services-slider {
    padding-bottom: 60px; /* ajuste la valeur selon ton besoin */
  }
}

/* Cards compactes et fixes sur mobile */
@media (max-width: 767px) {
  .swiper-slide {
    display: flex;
    justify-content: center; /* centre la card dans le slide */
  }

  .card {
    width: 406px;        /* largeur fixe */
    min-height: 300px;   /* hauteur minimale */
    max-height: 420px;   /* hauteur maximale */
    padding: 20px;       /* padding adapté */
    overflow: hidden;    /* évite que le contenu dépasse si trop long */
  }
}




:root {
  --c-bg: #ffffff;
  --c-text: #12363D;
  --c-muted: #5c6b73;
  --container: 1200px;
  --radius: 12px;
  --shadow: 0 22px 48px rgba(0,0,0,.12);
}

/* Section générale */
.section-chiffres {
  background: var(--c-bg);
  color: var(--c-text);
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 700px;   /* hauteur uniquement desktop */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100vw;
  margin: 0;
  padding: 0;
}

/* Image de fond pleine largeur (desktop) */
.section-chiffres .image-band,
.section-chiffres .image-band img {
  width: 100vw !important;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* Version mobile */
@media (max-width: 575px) {
  .section-chiffres {
    min-height: auto;  /* supprime la contrainte de 700px */
    height: auto;      /* la section s’adapte à son contenu */
  }

  .section-chiffres .image-band img {
    width: 100% !important;  /* prend toute la largeur de l’écran */
    max-width: 430px;        /* limite pour ton design */
    height: 188px !important;
    object-fit: cover;
    display: block;
    margin: 0 auto;
  }
}



/* Contenu texte (centré dans un container limité) */
.section-chiffres .content-area {
  background: transparent;
  position: relative;
  z-index: 2;
  max-width: var(--container); /* largeur max */
  width: 100%;
  margin: 0 auto;              /* centre horizontalement */
  padding: clamp(72px, 8vw, 120px) 24px clamp(24px, 4vw, 48px);
  box-sizing: border-box;
}

/* Eyebrow */
.eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0A2E38;
  margin: 0 0 18px;
}

/* Mobile */
@media (max-width: 575px) {
  .eyebrow {
    font-size: 16px; /* on verrouille la taille */
    font-weight: 500;
  }
}



/* Titre */
.chiffres-title {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 54px;
  line-height: 1.1;
  margin: 0 0 clamp(36px,4.5vw,64px);
  color: var(--c-text);
}

/* Version mobile */
@media (max-width: 575px) {
  .chiffres-title {
    font-size: 36px;
    font-weight: 500;
    line-height: 43px;
  }
}




/* Bloc stats */
.overlap-area {
  position: relative;
  display: flex;
  justify-content: center;
  z-index: 3;
  margin-top: 40px;
  margin-bottom: -180px;  /* chevauche à moitié l’image */
}

/* Carte chiffres */
.stats-card {
  background: #fff;
  box-shadow: var(--shadow);
  width: 1192px;
  height: 264px;
  padding: 40px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Chaque bloc chiffre */
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Grille chiffres */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
}

.stat-number {
  font-family: 'Playfair Display', serif;
  font-weight: 100;
  font-size: 80px;
  line-height: 1.2;
  color: var(--c-text);
  margin: 0 0 16px;
}

.stat-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--c-muted);
}

/* Bande image */
.image-band {
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Responsive */
@media (max-width: 991px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .overlap-area {
    margin-bottom: -50px;
    padding: 0 20px;
  }
  .stats-card {
    width: 90%;
    height: auto;
    padding: 30px;
  }
  .stat-number { font-size: 60px; }
}

@media (max-width: 575px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stats-card {
    width: 100%;
    padding: 20px;
    border-radius: 0;
  }
  .overlap-area {
    margin-bottom: -40px;
    padding: 0 16px;
  }
  .stat-number {
    font-size: 60px;
    font-weight: 100;
  }
  .stat-label { font-size: 13px; }
}
<!-- =========================
  TÉMOIGNAGES — CSS
========================= -->
<style>
:root{
  --rv-bg: #0f2c2f;         /* fond de la section */
  --rv-text: #e8f0f2;       /* texte */
  --rv-muted: #a8b3b9;      /* texte secondaire */
  --rv-accent: #d1a05f;     /* doré pour quotes + dot actif */
  --rv-card: rgba(255,255,255,0.06);
  --rv-author: rgba(255,255,255,0.08);
  --rv-radius: 14px;
  --rv-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.reviews {
  background: var(--rv-bg);
  position: relative;  /* sert de référence pour les enfants absolus */
  overflow: hidden;

  height: 722px;   /* hauteur fixe */
  min-height: 722px;
  padding: 60px 16px; /* plus besoin du padding-bottom */
  display: flex;
  flex-direction: column;
}

.reviews__inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.reviews__title {
  font-family: "Playfair Display", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 36px;
  color: #FFFF;
  margin: 0 0 clamp(22px, 3vw, 28px) 0;
}

/* Version mobile */
@media (max-width: 575px) {
  .reviews__title {
    font-size: 26px;
    font-weight: 500;
  }
}


.reviews__quote {
  position: absolute;
  transform: translateY(-50%);   /* centre verticalement */
  font-size: 160px;              /* beaucoup plus grand */
  color: #CA9759;                /* doré identique */
  opacity: .9;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  font-family: "Playfair Display", serif;
  line-height: 1;
}

.reviews__quote--left {
  left: -60px;   /* décale légèrement à gauche */
  top: 20%;
}

.reviews__quote--right {
  right: -60px;  /* décale légèrement à droite */
  top: 80%;
}

/* Version mobile */
@media (max-width: 575px) {
  .reviews__quote {
    font-size: 60px;   /* taille réduite pour petit écran */
  }

  .reviews__quote--left {
    left: -5px;   /* rapproche du texte */
    top: 10%;      /* ajuste la hauteur */
  }

  .reviews__quote--right {
    right: -5px;  /* rapproche du texte */
    top: 90%;      /* ajuste la hauteur */
  }
}


/* viewport */
.reviews__viewport {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-bottom: 0; /* supprime l'espace qui poussait les dots */
}
.review{
  margin: 0;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .6s ease, transform .6s ease;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 8px;
}
.review.is-active{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}

.review__text {
  max-width: 920px;
  color: #FFFF;
  line-height: 1.7;
  font-size: 18px;
  font-weight: 400; 
  margin: 0 auto clamp(22px, 3vw, 28px);
  background: var(--rv-card);
  border-radius: var(--rv-radius);
  padding: clamp(16px, 3vw, 28px) clamp(16px, 4vw, 36px);
  box-shadow: var(--rv-shadow);
}

/* Version mobile */
@media (max-width: 575px) {
  .review__text {
    font-size: 16px;
    font-weight: 400;
  }
}


.review__author {
  width: 229px;
  height: 67px;
  background: #163942;
  color: #fff;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: .2px;
  display: flex;
  align-items: center; 
  justify-content: center;
  border-radius: 4px;
}


/* points / barres */
.reviews__dots {
  display: flex;
  justify-content: center;
  gap: 18px;

  position: absolute;
  bottom: 10px;   /* ↓ descendu un peu plus bas */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}


.reviews__dots button{
  width: 120px;
  max-width: 18vw;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-color .3s ease;
}

/* bouton actif = fond jaune */
.reviews__dots button.is-active {
  background: #CA9759;
}

.reviews__dots button:focus-visible{
  outline: 2px solid var(--rv-accent);
  outline-offset: 3px;
}

/* remplissage animé pour la slide active */
.reviews__dots button .fill{
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--rv-accent);
  transition: width .3s linear;
}
.reviews__dots button.is-active .fill{
  width: 100%;
}

.reviews__viewport {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-bottom: 0; /* supprime l'ancien padding qui poussait les dots */
}

.reviews__viewport:active {
  cursor: grabbing;       /* main fermée pendant le clic */
}


/* Accessibilité motion */
@media (prefers-reduced-motion: reduce){
  .review{ transition: none; }
  .reviews__dots button .fill{ transition: none; }
}/* =========================
   FORMULAIRE (WPForms + Oxygen)
   ========================= */

/* Typo – on force partout (sauf reCAPTCHA qui est dans un iframe) */
.contact-form,
.contact-form *:not(iframe) {
  font-family: "Montserrat", Arial, sans-serif !important;
  box-sizing: border-box;
}

/* Supprimer contours fieldset / normaliser */
.contact-form fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Masquer les labels au-dessus des champs texte/textarea/select */
.contact-form .wpforms-field:not(.wpforms-field-checkbox):not(.wpforms-field-radio):not(.wpforms-field-gdpr-checkbox) > label,
.contact-form .wpforms-field:not(.wpforms-field-checkbox):not(.wpforms-field-radio):not(.wpforms-field-gdpr-checkbox) > .wpforms-field-label,
.contact-form .wpforms-field:not(.wpforms-field-checkbox):not(.wpforms-field-radio):not(.wpforms-field-gdpr-checkbox) > legend {
  display: none !important;
}

/* ===== Corrections ciblées pour les 3 premiers champs ===== */

/* Champ "Nom" (groupé) : cache la légende + sous-labels "Prénom/Nom" + label principal */
.contact-form .wpforms-field-name > .wpforms-field-label,
.contact-form .wpforms-field-name legend,
.contact-form .wpforms-field-name .wpforms-field-sublabel {
  display: none !important;
}

/* Email */
.contact-form .wpforms-field-email > .wpforms-field-label,
.contact-form .wpforms-field-email label.wpforms-field-label {
  display: none !important;
}

/* Téléphone / Texte / Textarea / Select */
.contact-form .wpforms-field-text > .wpforms-field-label,
.contact-form .wpforms-field-phone > .wpforms-field-label,
.contact-form .wpforms-field-textarea > .wpforms-field-label,
.contact-form .wpforms-field-select > .wpforms-field-label {
  display: none !important;
}

/* Garder visibles SEULEMENT les labels des cases à cocher et radios */
.contact-form .wpforms-field-checkbox > .wpforms-field-label,
.contact-form .wpforms-field-radio > .wpforms-field-label,
.contact-form .wpforms-field-gdpr-checkbox > .wpforms-field-label {
  display: inline-block !important;
}

/* Masquer complètement le drapeau, l’arrow et la liste des pays */
.contact-form .iti__flag-container,
.contact-form .iti__selected-flag,
.contact-form .iti__arrow,
.contact-form .iti__country-list {
  display: none !important;
  visibility: hidden !important;
}

/* Supprimer la marge laissée par intl-tel-input */
.contact-form .iti {
  padding-left: 0 !important;
}

/* Masquer le bloc drapeau et sa flèche (nouvelle API intl-tel-input) */
.contact-form .iti__selected-country-primary,
.contact-form .iti__arrow {
  display: none !important;
  visibility: hidden !important;
}

/* (sécurités pour anciennes classes encore présentes parfois) */
.contact-form .iti__selected-flag,
.contact-form .iti__flag-container,
.contact-form .iti__flag {
  display: none !important;
  visibility: hidden !important;
}

/* Supprimer le padding laissé pour le drapeau, et bloquer les clics */
.contact-form .iti {
  padding-left: 0 !important;
}

.contact-form .iti input[type="tel"] {
  padding-left: 0 !important;
}

.contact-form .iti__selected-country,
.contact-form .iti__selected-country-primary {
  pointer-events: none !important;
}

/* Si le plugin réserve une largeur, on la remet à 0 */
.contact-form .iti--allow-dropdown .iti__selected-country-primary,
.contact-form .iti--separate-dial-code .iti__selected-country-primary {
  width: 0 !important;
}

/* Afficher les libellés des cases à cocher / radios (CGU etc.) */
.contact-form .wpforms-field-checkbox label,
.contact-form .wpforms-field-gdpr-checkbox label,
.contact-form .wpforms-field-radio label {
  font-family: "Montserrat", Arial, sans-serif !important;
  display: inline-block !important;
  font-size: 13px;
  color: #1d2a2e;
  font-weight: 400;
  margin: 0;
  line-height: 1.4;
}

/* Nettoyage des listes WPForms */
.contact-form .wpforms-field-checkbox ul,
.contact-form .wpforms-field-gdpr-checkbox ul,
.contact-form .wpforms-field-radio ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.contact-form .wpforms-field-checkbox li,
.contact-form .wpforms-field-gdpr-checkbox li,
.contact-form .wpforms-field-radio li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Inputs & textarea : ligne en bas uniquement */
.contact-form .wpforms-form input[type="text"],
.contact-form .wpforms-form input[type="email"],
.contact-form .wpforms-form input[type="tel"],
.contact-form .wpforms-form input[type="url"],
.contact-form .wpforms-form input[type="number"],
.contact-form .wpforms-form input[type="password"],
.contact-form .wpforms-form select,
.contact-form .wpforms-form textarea {
  width: 100%;
  border: none !important;
  border-bottom: 1px solid #cfd8de !important;
  padding: 16px 0 !important;       /* ✅ 16px en haut/bas, 0 à gauche/droite */
  margin-bottom: 24px !important;
  font-size: 18px !important;
  line-height: 27px !important;
  font-weight: 400 !important;
  color: #000 !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s ease;
  box-sizing: border-box;           /* ✅ sécurité dimension */
  height: 60px;                     /* ✅ pour assurer une hauteur uniforme */
}


/* Textarea confortable */
.contact-form .wpforms-form textarea {
  min-height: 130px;
  resize: vertical;
}

/* Focus = accent */
.contact-form .wpforms-form input:focus,
.contact-form .wpforms-form select:focus,
.contact-form .wpforms-form textarea:focus {
  border-bottom-color: #0F2C2F !important;
}

/* Placeholders */
.contact-form .wpforms-form ::placeholder {
  font-family: "Montserrat", Arial, sans-serif !important;
  color: #6b7a85 !important;
  opacity: 1;
  font-size: 16px;
  font-weight: 400;
}

/* Chrome autofill */
.contact-form .wpforms-form input:-webkit-autofill,
.contact-form .wpforms-form input:-webkit-autofill:hover,
.contact-form .wpforms-form input:-webkit-autofill:focus,
.contact-form .wpforms-form textarea:-webkit-autofill {
  -webkit-text-fill-color: #000 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  box-shadow: 0 0 0px 1000px transparent inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Cases à cocher / radios */
.contact-form .wpforms-form input[type="checkbox"],
.contact-form .wpforms-form input[type="radio"] {
  display: inline-block !important;
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  margin-top: 3px;
  accent-color: #0F2C2F;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Texte petit et libellés requis */
.contact-form small,
.contact-form .wpforms-required-label {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 13px;
  color: #1d2a2e;
}

/* Messages d'erreur WPForms */
.contact-form .wpforms-error,
.contact-form .wpforms-field .wpforms-error {
  color: #b00020 !important;
  font-size: 13px;
  margin-top: 6px;
}

/* Espacement reCAPTCHA si présent */
.contact-form .wpforms-recaptcha-container {
  margin-top: 12px;
}

/* =========================
   WPForms #108 – Champ FICHIER (STYLE CLASSIQUE)
   ========================= */

/* Bloc du champ + label/description au-dessus */
#wpforms-form-108 .wpforms-field.fichier-droit{
  display:flex; flex-direction:column;
  margin-bottom:24px;
}
#wpforms-form-108 .wpforms-field.fichier-droit > .wpforms-field-label,
#wpforms-form-108 .wpforms-field.fichier-droit > label,
#wpforms-form-108 .wpforms-field.fichier-droit > legend{
  display:inline-block!important;
  margin:0 0 24px 0;
  font-size:16px; line-height:1.4;
  color:#0A2E38; font-weight:400;
}
#wpforms-form-108 .wpforms-field.fichier-droit .wpforms-required-label{
  color:#e11d48; margin-left:.25em;
}
#wpforms-form-108 .wpforms-field.fichier-droit .wpforms-field-description{
  display:block!important; order:0;
  margin:0 0 10px 0;
  font-size:14px; line-height:1.45; color:#1d2a2e;
}

/* Input fichier (classique) : sur une ligne avec le libellé custom */
#wpforms-form-108 .wpforms-field.fichier-droit input[type="file"]{
  width:auto!important; display:inline-block; vertical-align:middle;
  border:0!important; background:transparent!important; padding:0!important; margin:0!important;
  font-size:14px;
  color:transparent!important; /* masque le texte natif “Aucun fichier choisi” */
}

/* Bouton “Choisir un fichier” (classique) */
#wpforms-form-108 .wpforms-field.fichier-droit input[type="file"]::file-selector-button,
#wpforms-form-108 .wpforms-field.fichier-droit input[type="file"]::-webkit-file-upload-button{
  padding:12px 20px;
  border:1px solid #0A2E38; border-radius:9999px;
  background:#F6F7F8; color:#637980;
  font-family:"Montserrat", Arial, sans-serif; font-weight:400;
  font-size:16px; letter-spacing:.05em;
  cursor:pointer; transition:background-color .2s, color .2s, transform .06s;
}
#wpforms-form-108 .wpforms-field.fichier-droit input[type="file"]::file-selector-button:hover,
#wpforms-form-108 .wpforms-field.fichier-droit input[type="file"]::-webkit-file-upload-button:hover{
  background:#0A2E38; color:#fff;
}
#wpforms-form-108 .wpforms-field.fichier-droit input[type="file"]:focus-visible::file-selector-button{
  box-shadow:0 0 0 3px rgba(15,44,47,.18);
}

/* Libellé custom à droite du bouton (créé/MAJ via JS) */
#wpforms-form-108 .wpforms-field.fichier-droit .o2-filelabel{
  display:inline-block; margin-left:12px; vertical-align:middle;
  font-family:"Montserrat", Arial, sans-serif; font-weight:400;
  font-size:16px; line-height:24px; color:rgb(10,46,56);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:calc(100% - 260px);
}

/* =========================
   Bouton ENVOYER (aligné à gauche)
   ========================= */
.contact-form .wpforms-submit-container{ display:flex!important; justify-content:flex-start!important; }
.contact-form .wpforms-submit,
.contact-form button[type="submit"],
.contact-form .contact-form_send{
  background:#0F2C2F!important; color:#fff!important; border:none!important;
  border-radius:999px!important; padding:16px 48px!important;
  font-family:"Lexend Zetta", Arial, sans-serif!important; font-size:12px!important; font-weight:600!important;
  letter-spacing:.05em!important; text-transform:uppercase;
  cursor:pointer; transition:all .3s ease;
  display:inline-block!important; margin:30px 0 0 0!important; line-height:1.2; max-width:280px;
}
.contact-form .wpforms-submit:hover{
  background:#fff!important; color:#0F2C2F!important; border:1px solid #0F2C2F!important;
}

/* ===== (Optionnel) mobile : passer la phrase sous le bouton ===== */
@media (max-width:480px){
  #wpforms-form-108 .wpforms-field.fichier-droit .o2-filelabel{
    display:block; margin:8px 0 0 0; max-width:100%; white-space:normal;
  }
}

/* Conteneur "ligne" pour le bouton + le libellé */
#wpforms-form-108 .wpforms-field.fichier-droit .o2-fileline{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  max-width: 100%;
}

/* Input fichier en mode classique (sur la même ligne) */
#wpforms-form-108 .wpforms-field.fichier-droit .o2-fileline input[type="file"]{
  width: auto !important;
  display: inline-block;
  vertical-align: middle;
  margin: 0; /* pas d'espace dessous */
  color: transparent !important; /* masque le “Aucun fichier choisi” natif */
}

/* Libellé custom à droite (ta charte : Montserrat 400, 16/24, #0A2E38) */
#wpforms-form-108 .wpforms-field.fichier-droit .o2-filelabel{
  display: inline-block;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgb(10, 46, 56);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 260px); 
  margin-left: -125px; 
}

/* =========
   Section formulaire – Desktop
   ========= */
@media (min-width: 992px) {
  /* Colonne du formulaire (Bootstrap) */
  .col-lg-6.col-xl-5.offset-lg-1 {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-bottom: 95px !important;
  }
}

/* Forcer une largeur visuelle proche de la capture en ≥1200px */
@media (min-width: 1200px) {
  .col-lg-6.col-xl-5.offset-lg-1 {
    max-width: 475px;            /* largeur cible */
    flex: 0 0 475px;             /* fige la largeur pour coller au visuel */
  }
}

/* (Optionnel) si la colonne contient plusieurs éléments, limiter le formulaire lui-même */
@media (min-width: 1200px) {
  .col-lg-6.col-xl-5.offset-lg-1 .contact-form {
    max-width: 475px;
    margin-left: 0;
    margin-right: 0;
  }
}
/* --- BURGER --- */
.burger {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  margin-left: 24px;
  margin-bottom: 24px;
  z-index: 10001;
}

.burger span {
  position: absolute;
  width: 100%;
  height: 4px;
  background: #fff;
  transition: all 0.4s ease;
}

.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 27px; width: 50%; left: 0; }
.burger span:nth-child(3) { top: 40px; }

.burger:hover span:nth-child(2) { width: 100%; }

.burger.active span:nth-child(1) { top: 27px; transform: rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { top: 27px; transform: rotate(-45deg); }

/* --- MENU OVERLAY --- */
.menu-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #0d2d35;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s ease;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu-overlay.open { transform: scaleY(1); }

.menu-overlay .container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 140px 40px 30px; /* même padding que ton header container */
}

/* Appliquer le margin-left seulement sur desktop */
@media (min-width: 992px) {
  .menu-overlay .container {
    margin-left: 250px;
  }
}



.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* --- Section centrale --- */
.menu-section {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0px;
}

.menu-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.menu-content li { margin: 25px 0; }

/* --- Liens principaux & sous-pages --- */
.menu-content a {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;   /* ← réduit la hauteur de ligne par défaut */
  color: #60767E;
  text-decoration: none;
  transition: color 0.3s ease;
  display: block;     /* ← au lieu de inline-block */
  padding: 0;         /* ← s’assure qu’il n’y a pas de padding résiduel */
  margin: 0;          /* ← supprime les marges résiduelles éventuelles */
}

.menu-content a:hover { color: #ccc; }

/* --- Parents avec flèche --- */
.menu-content .menu-parent {
  position: relative;
  display: block;
}

/* Flèche animée */
.menu-content .menu-parent > a::after {
  content: "➔";
  margin-left: 10px;
  font-size: 18px;
  color: #ccc;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.menu-content .menu-parent:hover > a::after {
  opacity: 1;
  transform: translateX(0);
  color: #fff;
}

/* --- Sous-menu à droite --- */
.menu-content .menu-parent .sub-menu {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 30px;
  white-space: nowrap;

  /* Invisible par défaut */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.4s; /* ← délai de disparition */
  transform: translateY(-50%); /* centre verticalement */  
}

/* Affiché au hover du parent */
.menu-content .menu-parent:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s; /* affichage immédiat */
}

.menu-content .sub-menu li {
  margin-bottom: 16px; /* espace entre chaque sous-page */
}

.menu-content .sub-menu li:last-child {
  margin-bottom: 0; /* pas d'espace après le dernier */
}

.menu-content .sub-menu li a {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 32px;
  color: #60767E;
}
.menu-content .sub-menu li a:hover { color: #fff; }

/* --- Footer Contact --- */
.menu_footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Bloc gauche : bouton "Contactez-nous" */
.menu_footer .widget_btns .btns_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu_footer .widget_btns .btns_item a {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 400;
  font-size: 28px;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.menu_footer .widget_btns .btns_item a:hover {
  color: #c18b4a;
}

/* Bloc droit : téléphone + réseaux sociaux */
.menu_footer .widget_cta {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Bouton téléphone */
.menu_footer .phone {
  display: inline-block;
  padding: 18px 24px;           /* plus de hauteur */
  border: 1px solid #c18b4a;
  border-radius: 40px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 28px;              /* comme sur ton exemple */
  font-weight: 400;
  color: #c18b4a;
  text-decoration: none;
  line-height: 1;               /* évite le surplus vertical */
  transition: all 0.3s ease;
}

.menu_footer .phone:hover {
  background: #c18b4a;
  color: #0d2d35;
}

/* Bouton LinkedIn rond */
.menu_footer .linkedin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border: 1px solid #fff;
  border-radius: 50%;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Appliquer la marge à droite seulement sur desktop */
@media (min-width: 992px) {
  .menu_footer .linkedin {
    margin-right: 300px;
  }
}


.menu_footer .linkedin:hover {
  background: #fff;
  color: #0d2d35;
}

/* --- Logo en fond du menu overlay --- */
.menu-overlay::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80%;  /* taille du logo, ajuste selon rendu */
  height: 80%;
  background: url("https://www.sepaje.websoso.fr/wp-content/uploads/2025/09/Logo-accueil-Convertio.webp") no-repeat bottom right;
  background-size: contain;
  opacity: 0.10; /* effet filigrane */
  pointer-events: none; /* évite de bloquer les clics */
  z-index: 0; /* derrière le contenu */
}

/* Assure que le contenu passe au-dessus */
.menu-overlay .container,
.menu-overlay .menu-header,
.menu-overlay .menu-section,
.menu-overlay .menu-footer {
  position: relative;
  z-index: 1;
}

.menu-overlay::before {
  background-position: right -120px bottom -130px; /* décale vers le bas et la droite */
}



/* --- LOGO HEADER --- */
#div_block-4-7 {
  position: relative;
  z-index: 10001;
}


/* --- VERSION MOBILE --- */
@media (max-width: 991px) {
  /* Section centrale */
  .menu-section {
    align-items: center;        /* centre verticalement */
    text-align: center;         /* centre les textes */
  }

  /* Liens principaux */
  .menu-content li {
    margin: 15px 0;             /* espace entre les titres */
  }

  .menu-content a {
    font-size: 22px;            /* plus petit que desktop */
    line-height: 1.4;
    display: block;
    padding: 10px 0;
  }

  /* Sous-menus */
  .menu-content .menu-parent .sub-menu {
    position: relative;
    top: auto;
    left: auto;
    margin-left: 0;
    margin-top: 10px;           /* espace sous le parent */
    padding-left: 15px;         /* légère indentation */
    transform: none;
    opacity: 0;
    visibility: hidden;
    max-height: 0;              /* masqué par défaut */
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .menu-content .menu-parent.open .sub-menu {
    opacity: 1;
    visibility: visible;
    max-height: 500px;          /* ouverture fluide */
  }

  .menu-content .sub-menu li {
    margin: 10px 0;
  }

  .menu-content .sub-menu li a {
    font-size: 18px;            /* plus petit pour les sous-pages */
    line-height: 1.3;
    padding: 6px 0;
  }

  /* Supprime la flèche quand un menu est ouvert */
  .menu-content .menu-parent.open > a::after {
    display: none;
  }

  /* --- Footer responsive --- */
  .menu_footer {
    flex-direction: column;      /* en colonne */
    align-items: flex-start;     /* aligné à gauche */
    gap: 20px;
  }

  .menu_footer .widget_btns {
    margin-bottom: 10px;
  }

  .menu_footer .widget_cta {
    flex-direction: row;         /* tel + linkedin côte à côte */
    gap: 15px;
  }

  /* Bouton téléphone (plus grand sur mobile) */
  .menu_footer .phone {
    font-size: 22px;       /* texte plus grand */
    padding: 16px 28px;    /* plus large et haut */
    border-radius: 45px;   /* arrondi un peu plus marqué */
  }

  /* Bouton LinkedIn rond (plus grand) */
  .menu_footer .linkedin {
    width: 70px;
    height: 70px;
    font-size: 20px;
  }
}


/* --- Animation slide-in pour les parents --- */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Par défaut les liens parents sont invisibles avant ouverture */
.menu-content > ul > li {
  opacity: 0;
  transform: translateX(-40px);
}

/* Quand le menu est ouvert, on déclenche l’animation */
.menu-overlay.open .menu-content > ul > li {
  animation: slideInLeft 0.6s forwards;
}

/* Décalage progressif entre chaque parent */
.menu-overlay.open .menu-content > ul > li:nth-child(1) {
  animation-delay: 0.1s;
}
.menu-overlay.open .menu-content > ul > li:nth-child(2) {
  animation-delay: 0.25s;
}
.menu-overlay.open .menu-content > ul > li:nth-child(3) {
  animation-delay: 0.4s;
}
.menu-overlay.open .menu-content > ul > li:nth-child(4) {
  animation-delay: 0.55s;
}
/* Masquer l'image de fond overlay dans le menu sur mobile */
@media (max-width: 767px) {
  .menu-overlay::before {
    display: none !important;
  }
}


/* =========================
   Variables (facile à ajuster)
   ========================= */
:root{
  --container-w: 1234px;
  --container-h: 4219px;
  --gutter: 48px;
  --bg: #ffffff;
  --text: #0d0f12;
  --muted: #6b7280;
  --brand: #0c7a6d;        /* léger vert/turquoise pour l’accent */
  --card: #f6f8f9;
  --border: #e5e7eb;
  --accent: #C79658;   /* couleur du bouton */
  --divider: #E9E9E9;  /* trait de séparation */
  --qcolor: rgb(10,46,56);

}

/* H1 colonne droite */
.content h1,
.content .page-title{
  font-family: "Playfair Display", Arial, serif; /* Family */
  font-style: normal;                            /* Style */
  font-weight: 500;                              /* Weight */
  color: rgb(10, 46, 56);                        /* Color */
  font-size: 40px;                               /* Size */
  line-height: 48px;                             /* Line Height */
  margin: 0 0 24px;  
}


/* =========================
   Conteneur principal
   ========================= */
.patrimoine-section{
  width: var(--container-w);
  height: var(--container-h);
  margin: 0 auto;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  padding: 100px 0;
  box-sizing: border-box;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Grille 2 colonnes (sidebar + contenu) */
.layout{
  display: grid;
  grid-template-columns: 300px 1fr; /* colonne gauche 300px (max souhaité) */
  gap: var(--gutter);
  align-items: stretch;                 /* remplace flex-start */
  padding-bottom: 100px;
}

/* =========================
   Sidebar (responsive) + titres centrés
   ========================= */
.sidebar{
  /* Variables locales (ajustez facilement) */
  --sb-pad-y: 16px;          /* padding top/bottom du lien */
  --sb-pad-x: 50px;          /* padding left/right du lien */
  --sb-bar-left: 18px;       /* position de la barre dorée */

  background-color: #F6F7F8; /* rectangle gris */
  border-radius: 4px;
  width: 100%;
  max-width: 300px;          /* largeur max desktop */
  height: max-content;  /* la colonne s’adapte à son contenu */
  max-height: none;   /* <-- pas de limite fixe */
  overflow: visible;  /* <-- pas de scroll interne */
  box-sizing: border-box;
  margin-top: 40px;  /* espace initial */
  position: sticky;
  top: 40px;         /* espace lorsqu'elle est sticky */

  
  /* Cacher la scrollbar visuellement */
  -ms-overflow-style: none;  /* IE/Edge (legacy) */
  scrollbar-width: none;     /* Firefox */

  /* AJOUTS sûrs pour le sticky en grid */
  align-self: start;
  z-index: 2;
}
.sidebar::-webkit-scrollbar{
  display: none;             /* Chrome/Safari/Edge */
}

/* Contenu interne sticky + padding */
.sidebar-inner{
  position: static;
  top: 32px;
  padding: 24px;
  box-sizing: border-box;
  font-family: 'Montserrat', Arial, sans-serif;
}

/* --- Titre (centré) --- */
.sidebar-title{
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #6b7280;
  margin: 0 0 16px;
  font-weight: 600;
}

/* --- Liste --- */
.sidebar-menu{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Liens (même taille + gras par défaut, centrés) */
.sidebar-menu a{
  position: relative;
  display: block;
  text-decoration: none;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 18px;
  line-height: 27px;
  padding: var(--sb-pad-y) var(--sb-pad-x);
  color: rgba(10, 46, 56, .6);
  font-weight: 600;
  border-radius: 6px;
  transition: color .2s ease;
  -webkit-font-smoothing: antialiased;
}

/* Barre dorée: hauteur = hauteur visible du lien, animée top→bottom */
.sidebar-menu a::before{
  content: "";
  position: absolute;
  left: var(--sb-bar-left);
  top: var(--sb-pad-y);
  bottom: var(--sb-pad-y);
  width: 3px;
  background-color: #C79658;
  border-radius: 2px;
  transform-origin: top;
  transform: scaleY(0);      /* repliée par défaut */
  transition: transform .30s ease;
  will-change: transform;
}

/* Au survol / actif / focus : la barre se déploie et la couleur du texte devient pleine */
.sidebar-menu a:hover::before,
.sidebar-menu li.is-active > a::before,
.sidebar-menu a:focus-visible::before{
  transform: scaleY(1);
}
.sidebar-menu a:hover,
.sidebar-menu li.is-active > a,
.sidebar-menu a:focus-visible{
  color: rgb(10, 46, 56);
}

/* Focus clavier propre */
.sidebar-menu a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(199,150,88,.25);
  border-radius: 8px;
}

/* =========================
   Breakpoints (adaptation tous formats)
   ========================= */

/* ≤ 1280px : un peu plus compact */
@media (max-width: 1280px){
  .sidebar{
    max-width: 280px;
  }
  .sidebar{
    --sb-pad-x: 44px;
    --sb-bar-left: 16px;
  }
}

/* ≤ 1024px (tablette paysage) */
@media (max-width: 1024px){
  .sidebar{
    max-width: 260px;
  }
  .sidebar-inner{
    top: 24px;
  }
  .sidebar{
    --sb-pad-x: 36px;
    --sb-bar-left: 14px;
  }
}

/* ≤ 768px (tablette portrait / mobile) : largeur pleine, pas de hauteur max ni sticky */
/* ====== MOBILE (≤ 768px) ====== */
@media (max-width: 768px){

  /* 1) Une seule colonne, pas de sidebar */
  .layout{ display: block; }
  .sidebar{ display: none; }

  /* 2) Contenu pleine largeur et sans marge gauche */
  .patrimoine-section{
    width: 100%;
    height: auto;
    padding: 24px 16px 40px;  /* marges latérales comme la maquette */
  }
  .content{
    max-width: 100%;
    margin-left: 0 !important;   /* écrase toute marge restante */
  }

  /* 3) Typo/espacement des questions (légèrement plus compact) */
  .faq-item{ padding: 22px 0; }
  .faq-question{
    font-size: 20px;
    line-height: 26px;
    padding-right: 56px;          /* espace pour le bouton rond */
  }

  /* 4) Bouton rond : bien à l’intérieur, pas collé au bord */
  .faq-question .chevron{
    right: 12px;                  /* au lieu de right: 0 */
    width: 36px;
    height: 36px;
  }

  /* 5) Réponses ouvertes : padding aligné avec le bouton */
  .faq-item.open .faq-answer{
    padding: 10px 56px 12px 0;    /* top | right | bottom | left */
  }

  /* 6) Offsets d’ancre pour le scroll (si tu cliques depuis la sidebar) */
  .faq-section{ scroll-margin-top: 80px; }
}

/* ====== PETITS MOBILES (≤ 480px) ====== */
@media (max-width: 480px){
  .faq-question{ font-size: 18px; line-height: 24px; }
  .faq-question .chevron{ right: 10px; width: 34px; height: 34px; }
  .faq-item.open .faq-answer{ padding-right: 48px; }
}


/* ≤ 480px (petits mobiles) */
@media (max-width: 480px){
  .sidebar{
    --sb-pad-x: 16px;
    --sb-bar-left: 10px;
  }
  .sidebar-title{
    font-size: 12px;
    margin-bottom: 12px;
  }
  .sidebar-menu a{
    font-size: 16px;
    line-height: 24px;
  }
}

/* =========================
   Contenu principal
   ========================= */
.content{
  max-width: 860px;
  margin-left: 92px;
}
.page-title{
  font-size: 44px;
  line-height: 1.2;
  margin: 0 0 28px;
}

/* Container de la FAQ */
.faq{
  display: flex;
  flex-direction: column;
}

/* Chaque ligne question + séparateurs comme sur la maquette */
.faq-item{
  padding: 26px 0;
  border-top: 1px solid var(--divider);
}
.faq-item:last-child{
  border-bottom: 1px solid var(--divider);
}

/* Le bouton question (texte) */
/* Le texte des questions en Montserrat 400 */
.faq-question{
  font-family: "Montserrat", Arial, sans-serif; /* ← ; manquant corrigé */
  font-style: normal;
  font-weight: 400;
  color: rgb(10, 46, 56);
  font-size: 22px;
  line-height: 26px;

  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0 56px 0 0;
  cursor: pointer;
  position: relative;
  -webkit-font-smoothing: antialiased;
}


/* Bouton rond à droite */
.faq-question .chevron{
  position: absolute;
  right: 0;
  top: 50%;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;                    /* état normal : blanc */
  border: 1.5px solid var(--accent);   /* cercle doré fin */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, border-color .2s ease;
}
.faq-question .chevron::before{
  content: "›";
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
  transform: rotate(0deg);                 /* droite */
  transition: color .2s ease, transform .25s ease;
}

/* Inversion au hover : fond doré + flèche blanche */
.faq-item:hover .chevron,
.faq-question:hover .chevron,
.faq-question:focus-visible .chevron{
  background: var(--accent);
  border-color: var(--accent);
}
.faq-item:hover .chevron::before,
.faq-question:hover .chevron::before,
.faq-question:focus-visible .chevron::before{
  color: #fff;
}

/* Quand l’item est ouvert, on garde l’état “inversé” */
.faq-item.open .chevron{
  background: var(--accent);
  border-color: var(--accent);
}
.faq-item.open .chevron::before{
  color: #fff;
  transform: rotate(90deg);                /* bas */
}

/* Accessibilité focus */
.faq-question:focus-visible{
  outline: 2px solid rgba(199,150,88,.28);
  outline-offset: 3px;
}

/* Typo des réponses */
/* Réponses : Montserrat 400 — 16/24 */
.content .faq .faq-answer,
.content .faq .faq-answer p{
  font-family: "Montserrat", Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgb(10, 46, 56);
  -webkit-font-smoothing: antialiased;
}

.content .faq .faq-answer p{ margin: 0 0 18px; }


.faq-answer{
  overflow: hidden;
  max-height: 0;
  padding: 0;
  transition: max-height .35s ease, padding .2s ease;
}

.faq-item.open .faq-answer{
  padding: 10px 56px 12px 0;   /* top | right | bottom | left */
}

.faq-section{
  padding-top: 100px;
}


/* =========================
   Accessibilité
   ========================= */
@media (prefers-reduced-motion: reduce){
  .sidebar-menu a::before{ transition: none; }
  .faq-answer{ transition: none; }
  .faq-question .chevron::before{ transition: none; }
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 980px){
  .patrimoine-section{
    width: 100%;
    height: auto;
    padding: 24px 16px 60px;
  }
  .layout{ display: block; }
  .sidebar{
    max-width: 100%;
    max-height: none;
    height: auto;
    overflow: visible;
    margin-bottom: 24px;
  }
  .sidebar-inner{ position: static; padding: 16px; }
  .content{
    margin-left: 0;       /* ← sur mobile, pas 92px */
    max-width: 100%;
  }
}

/* ============================================================
   ✅ OVERRIDES RESPONSIVE AJOUTÉS (sans rien supprimer)
   - Sidebar visible AU-DESSUS sur téléphone
   - Titre plus petit sur mobile
   - Harmonisation des states 769–980px
   ============================================================ */

/* Sidebar visible AU-DESSUS sur téléphone (écrase le display:none ci-dessus) */
@media (max-width: 768px){
  .layout{ display: block; }
  .sidebar{
    display: block !important;
    position: static;        /* plus robuste sur mobile */
    width: 100%;
    max-width: 100%;
    margin: 0 0 16px;
    border-radius: 6px;
    --sb-pad-x: 24px;
    --sb-bar-left: 12px;
  }
  .sidebar-inner{ padding: 16px; }

  .content{ margin-left: 0 !important; max-width: 100%; }

  /* Titre mobile 30/36 (comme demandé précédemment) */
  .content h1,
  .content .page-title{
    font-size: 30px !important;
    line-height: 36px !important;
  }
}

/* 769–980px : une seule colonne aussi, sidebar au-dessus (cohérence) */
@media (min-width: 769px) and (max-width: 980px){
  .layout{ display: block; }
  .sidebar{
    display: block;
    position: sticky;  /* peut rester sticky en tablette */
    top: 24px;
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px;
  }
  .content{ margin-left: 0; max-width: 100%; }
}

/* Petite amélioration : le sticky doit fonctionner en grid */
@supports (display: grid){
  .sidebar{ align-self: start; }
}

/* (Facultatif) si tu veux des ancres propres sans blanc ajouté en haut,
   garde padding-top mais ajoute aussi :
   .faq-section{ scroll-margin-top: 100px; } 
   à placer si besoin.
*/



/* Section pleine largeur */
.full-bleed > .ct-section-inner-wrap {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Layout desktop : 50/50 */
.two-col {
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* Colonne image (gauche) */
.col-img {
  flex: 0 0 50%;
  min-height: 600px;
  background-image: url('https://www.sepaje.websoso.fr/wp-content/uploads/2025/09/homme-de-dos-avec-ordinateur.jpg'); /* 👈 ajoute ton URL exacte ici */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Colonne texte (droite) */
.col-copy {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #f6f8fb; /* fond gris clair comme l'exemple */
  padding: 80px;
  box-sizing: border-box;
  text-align: left; /* texte bien à gauche */
}

.col-copy h2 {
  margin-bottom: 24px;
}

.col-copy p {
  margin-bottom: 16px;
}

/* Correctif mobile spécifique Oxygen (ID > classe) */
@media (max-width: 992px){

  /* wrapper en colonne (au cas où Oxygen garde le flex-row) */
  #new_columns-5-80.ct-new-columns.two-col{
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* colonne image : AU-DESSUS + hauteur visible garantie */
  #div_block-6-80.ct-div-block.col-img{
    order: -1; /* image avant le texte */
    width: 100% !important;
    height: 40vh !important;      /* adapte si tu veux (ex : 300px) */
    min-height: 280px !important; /* garde un minimum */
    display: block !important;

    /* s’assure que le background s’affiche */
    background-image: url('https://www.sepaje.websoso.fr/wp-content/uploads/2025/09/homme-de-dos-avec-ordinateur.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* colonne texte */
  .col-copy{
    flex-basis: 100% !important;
    width: 100% !important;
    padding: 40px 20px !important;
    text-align: left !important;
  }
}



/* ======= Correctif mobile forcé (image visible 414x294 approx) ======= */
@media (max-width: 480px){

  /* on cible la classe ET l’ID Oxygen pour être sûr de gagner la cascade */
  .col-img,
  #div_block-6-80.ct-div-block.col-img {
    /* hauteur mobile voulue */
    height: 294px !important;
    min-height: 294px !important;
    width: 100% !important;

    /* on réinitialise TOUT le background en une seule ligne */
    background: url('https://www.sepaje.websoso.fr/wp-content/uploads/2025/09/homme-de-dos-avec-ordinateur.jpg')
                center center / cover no-repeat !important;

    /* évite les soucis iOS */
    background-attachment: scroll !important;

    /* au cas où une couleur/overlay passerait dessus */
    background-color: transparent !important;
    display: block !important;
    order: -1; /* image au-dessus du texte si besoin */
  }

  /* texte plein largeur + padding mobile */
  .col-copy{
    flex-basis: 100% !important;
    width: 100% !important;
    padding: 40px 20px !important;
    text-align: left !important;
  }

  .col-copy h1,
  .col-copy h2,
  .col-copy .ct-headline,
  .col-copy #headline-10-80 {            /* garde si c'est ton ID, sinon OK tel quel */
    font-family: "Playfair Display", Arial, serif !important;
    font-weight: 500 !important;
    font-size: 26px !important;
    line-height: 31px !important;
    color: rgb(10, 46, 56) !important;
    margin-bottom: 16px !important;
  }
  /* Texte (text block) */
  .col-copy p,
  .col-copy .ct-text-block,
  .col-copy #text_block-13-80 {          /* idem : on couvre l'ID Oxygen au cas où */
    font-family: "Montserrat", Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 27px !important;
    color: rgb(10, 46, 56) !important;
  }
}