.elementor-6837 .elementor-element.elementor-element-534d959{--display:flex;--position:absolute;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;top:0px;}body:not(.rtl) .elementor-6837 .elementor-element.elementor-element-534d959{left:0px;}body.rtl .elementor-6837 .elementor-element.elementor-element-534d959{right:0px;}.elementor-6837 .elementor-element.elementor-element-ce629be{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6837 .elementor-element.elementor-element-d4615fc{--display:flex;}.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-6837 .elementor-element.elementor-element-9609c5d{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before, .elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-6837 .elementor-element.elementor-element-1e99a58 .elementor-menu-toggle{margin:0 auto;}.elementor-6837 .elementor-element.elementor-element-1e99a58 .elementor-nav-menu .elementor-item{font-family:"Poppins", Sans-serif;font-size:18px;font-weight:300;}.elementor-6837 .elementor-element.elementor-element-1e99a58 .elementor-nav-menu--main .elementor-item{color:#F1EFE7;fill:#F1EFE7;}.elementor-6837 .elementor-element.elementor-element-1e99a58 .elementor-nav-menu--main .elementor-item:hover, .elementor-6837 .elementor-element.elementor-element-1e99a58 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-6837 .elementor-element.elementor-element-1e99a58 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-6837 .elementor-element.elementor-element-1e99a58 .elementor-nav-menu--main .elementor-item:focus{color:#F1EFE7;fill:#F1EFE7;}.elementor-6837 .elementor-element.elementor-element-1e99a58 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#F1EFE7;}.elementor-6837 .elementor-element.elementor-element-4958503{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6837 .elementor-element.elementor-element-138945a{--display:flex;--min-height:0px;--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;--gap:1% 1%;--row-gap:1%;--column-gap:1%;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:#F1EFE700;--border-color:#F1EFE700;--border-radius:0px 0px 1px 0px;--padding-top:0%;--padding-bottom:0%;--padding-left:4%;--padding-right:5%;--z-index:99;}.elementor-6837 .elementor-element.elementor-element-138945a:not(.elementor-motion-effects-element-type-background), .elementor-6837 .elementor-element.elementor-element-138945a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#04000600;}.elementor-widget-ucaddon_uc_liquid_full_screen_menu .menu-item a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-ucaddon_uc_liquid_full_screen_menu .sub-menu .menu-item a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-6837 .elementor-element.elementor-element-87cdb0b .uc_liquid_hamburger{width:60px;height:60px;--current-calc-size-value:60px;border-radius:100px;}.elementor-6837 .elementor-element.elementor-element-87cdb0b .uc_liquid_hamburger::after{border-radius:100px;}.elementor-6837 .elementor-element.elementor-element-87cdb0b .menu-item a{font-family:"Poppins", Sans-serif;font-weight:400;color:#F1EFE7;}.elementor-6837 .elementor-element.elementor-element-87cdb0b .menu-item:hover > a{color:#7007D4;}.elementor-6837 .elementor-element.elementor-element-87cdb0b .menu-item.current_page_item a{color:#7007D4;}.elementor-6837 .elementor-element.elementor-element-87cdb0b .uc-list-menu{gap:5px;}.elementor-6837 .elementor-element.elementor-element-87cdb0b .sub-menu .menu-item a{font-family:"Poppins", Sans-serif;font-weight:400;}.elementor-6837 .elementor-element.elementor-element-87cdb0b .sub-menu .menu-item{margin-top:5px;}.elementor-6837 .elementor-element.elementor-element-87cdb0b .menu-item a:after{height:2px;}.elementor-6837 .elementor-element.elementor-element-87cdb0b .menu-item a:hover:after{background:#FFFFFF00;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-6837 .elementor-element.elementor-element-d4615fc{--width:15%;}.elementor-6837 .elementor-element.elementor-element-138945a{--content-width:1200px;}}@media(max-width:1024px){.elementor-6837 .elementor-element.elementor-element-138945a{--min-height:0px;--gap:2% 2%;--row-gap:2%;--column-gap:2%;--padding-top:0%;--padding-bottom:0%;--padding-left:3%;--padding-right:3%;}.elementor-6837 .elementor-element.elementor-element-87cdb0b.elementor-element{--align-self:flex-end;}.elementor-6837 .elementor-element.elementor-element-87cdb0b .uc-list-menu{gap:15px;}}@media(max-width:767px){.elementor-6837 .elementor-element.elementor-element-138945a{--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-6837 .elementor-element.elementor-element-87cdb0b.elementor-element{--align-self:center;}.elementor-6837 .elementor-element.elementor-element-87cdb0b .menu-item a{font-size:22px;}.elementor-6837 .elementor-element.elementor-element-87cdb0b .uc-list-menu{gap:20px;}.elementor-6837 .elementor-element.elementor-element-87cdb0b .sub-menu .menu-item a{font-size:17px;}}/* Start custom CSS for container, class: .elementor-element-ce629be *//* ============================================ REFLET DIGITAL CONSULTING SIGNATURE LIQUID GLASS VERSION CHARTE GRAPHIQUE ============================================ */ /* ============================================ 01 — HEADER SUR LE CONTENU ============================================ */ .elementor-location-header { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; overflow: visible !important; z-index: 9999 !important; } /* ============================================ 02 — CAPSULE PRINCIPALE ============================================ */ .reflet-glass { /* Palette officielle Reflet */ --rf-black: #040006; --rf-beige: #F1EFE7; --rf-purple: #7007D4; --rf-gold: #E6CD8C; position: fixed !important; top: 18px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; /* Dimensions conservées */ width: calc(100% - 40px) !important; max-width: 850px !important; min-height: 55px !important; height: auto !important; margin: 0 !important; padding: 6px 20px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; box-sizing: border-box !important; border-radius: 100px !important; /* Verre sombre, légèrement teinté */ background: linear-gradient( 110deg, rgba(112,7,212,0.055) 0%, rgba(4,0,6,0.03) 45%, rgba(230,205,140,0.055) 100% ), rgba(4,0,6,0.29) !important; /* Effet verre */ -webkit-backdrop-filter: blur(18px) saturate(165%); backdrop-filter: blur(18px) saturate(165%); /* Contour léger */ border: 1px solid rgba(241,239,231,0.28) !important; /* Profondeur et relief */ box-shadow: inset 0 1px 1px rgba(255,255,255,0.30), inset 0 -1px 1px rgba(112,7,212,0.12), 0 8px 28px rgba(0,0,0,0.18) !important; isolation: isolate; overflow: visible !important; z-index: 9999 !important; transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } /* ============================================ 03 — HALOS SIGNATURE VIOLET / OR ============================================ */ .reflet-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: /* Halo violet */ radial-gradient( ellipse 36% 150% at 7% 0%, rgba(112,7,212,0.20) 0%, transparent 75% ), /* Transition centrale */ radial-gradient( ellipse 32% 130% at 52% 100%, rgba(112,7,212,0.055) 0%, transparent 75% ), /* Halo doré */ radial-gradient( ellipse 34% 150% at 97% 100%, rgba(230,205,140,0.16) 0%, transparent 75% ), /* Brillance du verre */ linear-gradient( 140deg, rgba(255,255,255,0.10), transparent 45%, rgba(241,239,231,0.045) ); } /* ============================================ 04 — REFLET SUPÉRIEUR ============================================ */ .reflet-glass::after { content: ""; position: absolute; top: 1px; left: 9%; width: 82%; height: 1px; pointer-events: none; z-index: 0; background: linear-gradient( 90deg, transparent, rgba(184,135,236,0.38) 25%, rgba(241,239,231,0.52) 50%, rgba(230,205,140,0.40) 77%, transparent ); } /* ============================================ 05 — CONTENU AU PREMIER PLAN ============================================ */ .reflet-glass > * { position: relative; z-index: 1; min-height: 0 !important; } /* ============================================ 06 — SURVOL DE LA CAPSULE ============================================ */ @media (hover: hover) { .reflet-glass:hover { background: linear-gradient( 110deg, rgba(112,7,212,0.09), rgba(4,0,6,0.04) 48%, rgba(230,205,140,0.08) ), rgba(4,0,6,0.34) !important; border-color: rgba(241,239,231,0.36) !important; box-shadow: inset 0 1px 2px rgba(255,255,255,0.38), inset 0 -1px 2px rgba(112,7,212,0.14), 0 10px 32px rgba(0,0,0,0.22) !important; } } /* ============================================ 07 — SOUS-MENU LIQUID GLASS ============================================ */ .reflet-glass .elementor-nav-menu--main .sub-menu { min-width: 270px !important; margin-top: 0 !important; padding: 10px !important; border-radius: 20px !important; /* Fond sombre et lisible */ background: radial-gradient( ellipse at 10% 0%, rgba(112,7,212,0.16), transparent 65% ), radial-gradient( ellipse at 100% 100%, rgba(230,205,140,0.07), transparent 65% ), linear-gradient( 145deg, rgba(29,17,39,0.97), rgba(10,6,16,0.98) ) !important; -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(241,239,231,0.23) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,0.20), 0 16px 40px rgba(0,0,0,0.28) !important; overflow: hidden; } /* ============================================ 08 — LIENS DU SOUS-MENU ============================================ */ .reflet-glass .elementor-nav-menu--main .sub-menu a { color: #F1EFE7 !important; background: transparent !important; border: none !important; border-radius: 11px !important; padding: 12px 15px !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.45 !important; text-decoration: none !important; transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important; } /* ============================================ 09 — SURVOL DES SERVICES ============================================ */ .reflet-glass .elementor-nav-menu--main .sub-menu a:hover, .reflet-glass .elementor-nav-menu--main .sub-menu a:focus-visible { color: #FFFFFF !important; /* Dégradé signature discret */ background: linear-gradient( 105deg, rgba(112,7,212,0.28), rgba(230,205,140,0.075) ) !important; box-shadow: inset 0 0 0 1px rgba(241,239,231,0.10) !important; } /* ============================================ 10 — PAGE ACTIVE ============================================ */ .reflet-glass .elementor-nav-menu--main .sub-menu a.elementor-item-active { color: #E6CD8C !important; background: rgba(112,7,212,0.16) !important; } /* ============================================ 11 — SUPPRESSION DES SÉPARATEURS ============================================ */ .reflet-glass .elementor-nav-menu--main .sub-menu li { border: none !important; } /* ============================================ 12 — TABLETTE ET MENU DÉROULANT ============================================ */ @media (max-width: 1024px) { .reflet-glass { width: calc(100% - 30px) !important; padding: 8px 18px !important; } .reflet-glass .elementor-nav-menu--dropdown { background: radial-gradient( ellipse at 10% 0%, rgba(112,7,212,0.14), transparent 65% ), linear-gradient( 145deg, rgba(29,17,39,0.97), rgba(10,6,16,0.98) ) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(241,239,231,0.25) !important; border-radius: 18px !important; box-shadow: 0 14px 35px rgba(0,0,0,0.25) !important; } .reflet-glass .elementor-nav-menu--dropdown a { color: #F1EFE7 !important; background: transparent !important; } .reflet-glass .elementor-nav-menu--dropdown a:hover, .reflet-glass .elementor-nav-menu--dropdown a:focus-visible { color: #F1EFE7 !important; background: rgba(112,7,212,0.22) !important; } } /* ============================================ 13 — MOBILE ============================================ */ @media (max-width: 767px) { .reflet-glass { top: 12px !important; width: calc(100% - 24px) !important; min-height: 54px !important; padding: 8px 16px !important; border-radius: 100px !important; } .reflet-glass .elementor-nav-menu--dropdown { max-width: calc(100vw - 24px) !important; } } /* ============================================ 14 — ACCESSIBILITÉ ============================================ */ @media (prefers-reduced-motion: reduce) { .reflet-glass, .reflet-glass .elementor-nav-menu--main .sub-menu a { transition: none !important; } } /* ========================================== REFLET — SMART HEADER Masquage au scroll sur ordinateur ========================================== */ @media (min-width: 1025px) { .reflet-glass { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important; will-change: transform, opacity; } /* Menu masqué */ .reflet-glass.rf-header-hidden { transform: translate(-50%, calc(-100% - 40px)) !important; opacity: 0 !important; pointer-events: none !important; } } /* Respect des animations réduites */ @media (prefers-reduced-motion: reduce) { .reflet-glass { transition: none !important; } }/* End custom CSS */