.elementor-12 .elementor-element.elementor-element-63436f4{--display:flex;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-4e5cda9 */:root { --red: #e73350; --dark: #333; --nav-height: 5em; /* hauteur du header */ --menu-font-size: 1em; /* taille du texte */ } /* Reset */ * { box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; padding-top: var(--nav-height); } /* ================= HEADER ================= */ header.navbar { position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-height); background: rgba(255,255,255,0.9); /* 90% opacité */ display: flex; align-items: center; justify-content: space-between; padding: 0 2.5em; box-shadow: 0 0.125em 0.625em rgba(0,0,0,0.1); z-index: 9999; } /* LOGO */ .navbar-logo img { height: 3.75em; } /* ================= MENU LINKS ================= */ .navbar-links { overflow: visible; } /* Menu background avec opacité */ .navbar-links { .navbar-links { background: transparent; } } .main-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.875em; align-items: center; } .main-menu a { font-size: var(--menu-font-size); font-weight: 700; color: var(--dark); text-decoration: none; position: relative; padding-bottom: 0.375em; transition: color 0.3s ease; } /* Trait rouge animé sous le texte */ .main-menu a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 0.125em; background: var(--red); transition: width 0.3s ease; } /* Hover */ .main-menu a:hover { color: var(--red); } .main-menu a:hover::after { width: 100%; } /* ================= SUBMENU ================= */ .has-submenu { position: relative; } .submenu { position: absolute; top: calc(100% +625em); left: 0; background: rgba(255,255,255,0.9); /* 90% opacité */ list-style: none; margin: 0; padding: 0.75em 1.125em; display: none; flex-direction: column; gap: 0.625em; box-shadow: 0 0.625em 1.875em rgba(0,0,0,0.15); z-index: 10000; } .submenu a { font-size: var(--menu-font-size); font-weight: 600; white-space: nowrap; } @media (min-width: 769px) { .has-submenu:hover .submenu { display: flex; } } /* ================= CONTACT BUTTON ================= */ .contact-button { text-decoration: none; color: var(--dark); border: 0.125em solid var(--dark); padding: 0.5em 1.25em; border-radius: 0.3125em; font-weight: 500; transition: all 0.3s ease; font-size: var(--menu-font-size); } .contact-button:hover { background: var(--red); border-color: var(--red); color: #ffffff; } /* ================= BURGER ================= */ .menu-toggle { display: none; font-size: 1.75em; background: none; border: none; cursor: pointer; color: #000; } .menu-toggle:hover { background: none; color: #000; } /* ================= MOBILE ================= */ @media (max-width: 768px) { header.navbar { padding: 0 1.25em; height: 4.375em; } .menu-toggle { display: block; z-index: 10001; } .navbar-links { position: fixed; top: 4.375em; left: 0; width: 100%; height: calc(100% - 4.375em); display: none; flex-direction: column; justify-content: flex-start; align-items: center; padding-top: 1.875em; overflow-y: auto; z-index: 9999; background: rgba(255,255,255,0.9); /* opacité 90% */ backdrop-filter: blur(5px); /* effet blur si tu veux */ } body.menu-open .navbar-links { display: flex; } .main-menu { flex-direction: column; gap: 1.25em; text-align: center; } .main-menu a { font-size: var(--menu-font-size); } .submenu { position: static; box-shadow: none; padding: 0; display: none; flex-direction: column; gap: 0.625em; } .has-submenu.open .submenu { display: flex; } /* contact mobile légèrement plus haut */ .navbar-contact-mobile { margin-top: 2em; /* plus haut que le bas */ padding: 1.25em 0; } .navbar-contact { display: none; } } /* ================= CONTACT PC ================= */ @media (min-width: 769px) { .navbar-contact { display: block; } .navbar-contact-mobile { display: none; } }/* End custom CSS */