.elementor-615 .elementor-element.elementor-element-52e5da5{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;overflow:visible;}.elementor-615 .elementor-element.elementor-element-b4cb59a{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;overflow:visible;}.elementor-615 .elementor-element.elementor-element-b4cb59a.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-615 .elementor-element.elementor-element-0a54a98 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-615 .elementor-element.elementor-element-0a54a98 .jet-inline-svg{max-width:9rem;}.elementor-615 .elementor-element.elementor-element-0a54a98 .jet-inline-svg__wrapper{text-align:left;}.elementor-615 .elementor-element.elementor-element-843d6db{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-615 .elementor-element.elementor-element-bd8468e.premium-ham-dropdown .premium-mobile-menu, .elementor-615 .elementor-element.elementor-element-bd8468e.premium-nav-dropdown .premium-mobile-menu, .elementor-615 .elementor-element.elementor-element-bd8468e .premium-mobile-menu-outer-container, .elementor-615 .elementor-element.elementor-element-bd8468e:not(.premium-nav-slide):not(.premium-ham-slide) .premium-mobile-menu-container{background-color:#FFFFFF;}.elementor-615 .elementor-element.elementor-element-bd8468e{width:var( --container-widget-width, 25.462% );max-width:25.462%;--container-widget-width:25.462%;--container-widget-flex-grow:0;}.elementor-615 .elementor-element.elementor-element-bd8468e > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-615 .elementor-element.elementor-element-bd8468e.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-615 .elementor-element.elementor-element-bd8468e .premium-main-nav-menu{justify-content:flex-end;}.elementor-615 .elementor-element.elementor-element-bd8468e .premium-sub-menu .premium-sub-menu-link{justify-content:flex-start;}.elementor-615 .elementor-element.elementor-element-bd8468e .premium-hamburger-toggle{justify-content:center;}.elementor-615 .elementor-element.elementor-element-bd8468e.premium-ham-dropdown .premium-mobile-menu-container, .elementor-615 .elementor-element.elementor-element-bd8468e.premium-nav-dropdown .premium-mobile-menu-container{justify-content:right;}.elementor-615 .elementor-element.elementor-element-bd8468e.premium-hamburger-menu .premium-main-mobile-menu > .premium-nav-menu-item > .premium-menu-link, .elementor-615 .elementor-element.elementor-element-bd8468e.premium-nav-dropdown .premium-main-mobile-menu > .premium-nav-menu-item > .premium-menu-link, .elementor-615 .elementor-element.elementor-element-bd8468e.premium-nav-slide .premium-main-mobile-menu > .premium-nav-menu-item > .premium-menu-link{justify-content:flex-end;}.elementor-615 .elementor-element.elementor-element-bd8468e .premium-main-nav-menu > .premium-nav-menu-item > .premium-menu-link{font-family:"Inter", Sans-serif;font-size:1em;font-weight:600;color:#097337;}.elementor-615 .elementor-element.elementor-element-bd8468e .premium-main-nav-menu > .premium-nav-menu-item:hover > .premium-menu-link{color:#0D0D0D;}.elementor-615 .elementor-element.elementor-element-bd8468e .premium-main-nav-menu > .premium-active-item > .premium-menu-link{color:#0D0D0D;}.elementor-615 .elementor-element.elementor-element-bd8468e .premium-nav-menu-item > .premium-menu-link > .premium-item-icon{order:0;}.elementor-615 .elementor-element.elementor-element-bd8468e .premium-main-nav-menu .premium-sub-menu-item:hover > .premium-sub-menu-link{color:#fff;}.elementor-615 .elementor-element.elementor-element-bd8468e .premium-main-nav-menu .premium-sub-menu-item:hover > .premium-sub-menu-link .premium-dropdown-icon{color:#fff;}.elementor-615 .elementor-element.elementor-element-bd8468e .premium-sub-menu-item .premium-sub-menu-link .premium-sub-item-icon{order:0;}.elementor-615 .elementor-element.elementor-element-bd8468e .premium-hamburger-toggle i{color:#097337;}.elementor-615 .elementor-element.elementor-element-bd8468e .premium-hamburger-toggle svg, .elementor-615 .elementor-element.elementor-element-bd8468e .premium-hamburger-toggle svg path{fill:#097337;}.elementor-615 .elementor-element.elementor-element-bd8468e .premium-hamburger-toggle .premium-toggle-text, .elementor-615 .elementor-element.elementor-element-bd8468e.premium-ham-dropdown .premium-hamburger-toggle .premium-toggle-close{color:#000000;}.elementor-615 .elementor-element.elementor-element-bd8468e .premium-hamburger-toggle:hover .premium-toggle-text, .elementor-615 .elementor-element.elementor-element-bd8468e.premium-ham-dropdown .premium-hamburger-toggle:hover .premium-toggle-close{color:#000000;}@media(max-width:1024px){.elementor-615 .elementor-element.elementor-element-843d6db{--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;}}@media(min-width:768px){.elementor-615 .elementor-element.elementor-element-b4cb59a{--width:31%;}}@media(max-width:1024px) and (min-width:768px){.elementor-615 .elementor-element.elementor-element-b4cb59a{--width:39%;}.elementor-615 .elementor-element.elementor-element-843d6db{--width:26%;}}@media(max-width:767px){.elementor-615 .elementor-element.elementor-element-b4cb59a{--width:60%;}.elementor-615 .elementor-element.elementor-element-843d6db{--width:30%;--flex-direction:column-reverse;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-615 .elementor-element.elementor-element-bd8468e .premium-hamburger-toggle i{font-size:1.5em;}.elementor-615 .elementor-element.elementor-element-bd8468e .premium-hamburger-toggle svg{width:1.5em;height:1.5em;}}/* Start custom CSS for container, class: .elementor-element-52e5da5 *//* ========================================================================== 1. HEADER BASE (État au Top - Version fine de départ) ========================================================================== */ .header-contenair { position: fixed; top: 0; left: 0; width: 100%; z-index: 99999; /* Hauteur initiale épurée au chargement de la page */ padding: 14px 0; /* Transition globale synchronisée et accélérée par le GPU */ transition: padding .4s cubic-bezier(0.16, 1, 0.3, 1), background .4s cubic-bezier(0.16, 1, 0.3, 1), border-color .4s ease, box-shadow .4s ease; will-change: padding, background, backdrop-filter; /* Optimise la fluidité sur le navigateur */ } /* ========================================================================== 2. ÉTAT STICKY / SCROLLED (Ajusté selon vos réglages + Subtilités Premium) ========================================================================== */ .header-contenair.is-scrolled { padding: 8px 0; /* Configuration d'opacité demandée (0.50) */ background: rgba(255, 255, 255, 0.50); /* Configuration du flou demandée (10px) pour l'effet dépoli */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* 🌟 SUBTILITÉ 1 : La ligne blanche très fine qui dessine le menu dans les zones sombres */ border-bottom: 1px solid rgba(255, 255, 255, 0.35); /* 🌟 SUBTILITÉ 2 : La double ombre bleue (Glow) qui réagit superbement avec le fond */ box-shadow: 0 4px 10px rgba(2, 174, 221, 0.03), 0 15px 40px rgba(2, 174, 221, 0.08); transform: translateZ(0); /* Force l'accélération matérielle */ } /* ========================================================================== 3. LOGO DYNAMIQUE (Contrôle indépendant des éléments SVG) ========================================================================== */ /* Au Top : Tout le logo s'affiche en blanc transparent */ .header-logo { color: #ffffff; --logo-accent: #ffffff; transform-origin: left center; /* Aligne la réduction vers la gauche proprement */ transition: color .35s ease, transform .4s cubic-bezier(0.16, 1, 0.3, 1); } /* Au Scroll : Lettres en Noir (#1d1d1b), Barre/Rectangle en Bleu (#02aedd) et réduction de 15% */ .header-contenair.is-scrolled .header-logo { color: #1d1d1b; --logo-accent: #02aedd; /* Cette variable contrôle la couleur du rectangle de votre SVG */ transform: scale(.85); } /* Sécurités d'intégration indispensables pour Elementor */ .header-logo a { color: inherit !important; text-decoration: none !important; } .header-logo svg { pointer-events: none; /* Évite les conflits de clic sur le tracé du SVG */ } /* ========================================================================== 4. MENU DE NAVIGATION (Traits de survol subtils et classe) ========================================================================== */ .header-menu a { position: relative; text-decoration: none !important; font-weight: 500; transition: color .3s cubic-bezier(0.16, 1, 0.3, 1); } /* Au Top : Liens du menu en Blanc */ .header-contenair:not(.is-scrolled) .header-menu a { color: #ffffff !important; } /* Au Scroll : Liens du menu en Noir */ .header-contenair.is-scrolled .header-menu a { color: #1d1d1b !important; } /* Effet de survol premium : Trait de 1.5px, fondu et glissement fluide */ .header-menu a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1.5px; background: #02aedd; /* État initial caché (légèrement abaissé) */ opacity: 0; transform: translateY(3px); transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), opacity .3s ease; } /* Au survol : Apparition en fondu avec une montée nette */ .header-menu a:hover::after { opacity: 1; transform: translateY(0); } /* Au scroll, le texte survolé passe subtilement en bleu */ .header-contenair.is-scrolled .header-menu a:hover { color: #02aedd !important; } /* ========================================================================== 5. BOUTON CONTACT STYLÉ ========================================================================== */ .header-contact a { display: inline-block; font-weight: 600; border-radius: 8px; padding: 10px 22px; transition: all .3s cubic-bezier(0.16, 1, 0.3, 1); } /* Au Top : Style épuré Transparent avec contour Blanc */ .header-contenair:not(.is-scrolled) .header-contact a { background: transparent; border: 1px solid rgba(255, 255, 255, 0.6); color: #ffffff !important; } .header-contact a:hover { transform: translateY(-1px); } .header-contenair:not(.is-scrolled) .header-contact a:hover { background: rgba(255, 255, 255, 0.15); border-color: #ffffff; } /* Au Scroll : Bouton plein en Bleu avec ombre portée légère */ .header-contenair.is-scrolled .header-contact a { background: #02aedd; color: #ffffff !important; border: 1px solid #02aedd; padding: 8px 18px; box-shadow: 0 8px 20px rgba(2, 174, 221, .15); } .header-contenair.is-scrolled .header-contact a:hover { background: #0294bd; border-color: #0294bd; box-shadow: 0 12px 24px rgba(2, 174, 221, .25); } /* ========================================================================== 6. RESPONSIVE MOBILE SÉCURISÉ ========================================================================== */ @media (max-width: 1024px) { .header-contenair { position: relative !important; top: auto; left: auto; width: 100%; padding: 16px 0 !important; background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } .header-contenair.is-scrolled { background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 18px 55px rgba(0, 0, 0, 0.12); } .header-logo { color: #1d1d1b !important; --logo-accent: #02aedd !important; transform: none !important; } .header-menu a { font-size: 15px; letter-spacing: 0.2px; padding: 8px 0; } /* Nettoyage des lignes de survol sur mobile pour le tactile */ .header-menu a::after { display: none !important; } .header-contact a { background: #02aedd !important; border-color: #02aedd !important; color: #ffffff !important; padding: 10px 16px !important; box-shadow: 0 10px 25px rgba(2, 174, 221, .25); } .header-contact a:active { transform: scale(0.97); } } @media (min-width: 1025px) { .header-contenair { position: fixed !important; } body { padding-top: 0 !important; } } /* Overrides extensions mobiles (ex: Premium Addons) */ @media (max-width: 767px) { .premium-mobile-menu-container a, .premium-mobile-menu-container a[style], div.premium-mobile-menu-container ul.premium-mobile-menu a.premium-menu-link { color: #1d1d1b !important; } div.premium-mobile-menu-container a:hover, div.premium-mobile-menu-container a:active, div.premium-mobile-menu-container .current-menu-item > a, div.premium-mobile-menu-container .current_page_item > a { color: #02aedd !important; font-weight: 600; } }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Inter'; font-display: auto; src: url('https://pyramis-ac.com/wp-content/uploads/2026/06/Inter-VariableFont_opszwght.ttf') format('truetype'); } /* End Custom Fonts CSS */