/* * Opera Prestige — op-header-global.css v2.0 * Système unique. Remplace op-header.css (orphelin) et l'ancienne v1. * Préfixe : .op-global-header__* / IDs : #opGlobalHeader etc. */ /* ── Variables ── */ :root { --oph-white: #F5F3EE; --oph-border: rgba(245, 243, 238, 0.10); --oph-gold: #C9A96E; --oph-ease: cubic-bezier(0.4, 0, 0.2, 1); --oph-trans: 0.35s var(--oph-ease); --oph-h: 72px; } /* ══════════════════════════════════════════════════════════════ NEUTRALISATION UNCODE — système complet v3 Cible tous les éléments que Uncode injecte via PHP et JS : header structurel, spacers sticky, burger mobile, padding body ══════════════════════════════════════════════════════════════ */ /* 1 — Header structurel Uncode + wrapper nav */ #masthead, .menu-wrapper, .menu-sticky, .navbar.menu-secondary, .menu-container-mobile, .mmb-container, .mobile-menu-button, .header-wrapper, .header-container, .header-sticky, .nav-wrapper, .row-menu-outer, .row-menu-inner, #uncode-nav, #wrapper-navbar, #header-outer { display: none !important; height: 0 !important; min-height: 0 !important; } /* 1b — Body-borders Uncode : 2 barres fixed en haut de page Quadruple sélecteur pour battre les styles inline d'Uncode via spécificité. Le JS (MutationObserver) gère la suppression DOM ; le CSS est le filet de sécurité. */ html body .body-borders, html body div.body-borders { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; } html body .body-borders *, html body .body-border-shadow, html body .top-border, html body .right-border, html body .bottom-border, html body .left-border, html body div.body-border-shadow, html body div.top-border { display: none !important; height: 0 !important; width: 0 !important; max-height: 0 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; /* Repousse hors écran même si position:fixed survive */ top: -9999px !important; left: -9999px !important; } /* 2 — Spacers / placeholders injectés par le JS Uncode sticky (Uncode mesure #masthead et injecte un div de même hauteur pour éviter que le contenu saute quand le header devient sticky) */ #push, .push, #header-placeholder, #masthead-placeholder, .header-sticky-placeholder { display: none !important; height: 0 !important; min-height: 0 !important; } /* 3 — Side-navigation icon : bouton 2-barres injecté par uncode_body_open() directement dans , hors #masthead. Selector confirmé : #side-navigation-icon + variantes connues */ #side-navigation-icon, #side-nav-icon, .side-navigation-icon, .offcanvas-toggle, .mobile-menu-toggle, #navigation-mobile, .icon-hamburger, .hamburger-wrapper, #hamburger-wrapper, .menu-hamburger, .hamburger-icon, [id*="hamburger"], [class*="hamburger"]:not(#opGlobalHeader):not(#opGlobalHeader *) { display: none !important; } /* 4 — Padding / margin injectés par Uncode JS sur body et .box-wrapper quand body.menu-force-opacity est présent */ html body, body.uncode-loaded, body.menu-force-opacity { padding-top: 0 !important; margin-top: 0 !important; } .box-wrapper, .box-container, .uncont { padding-top: 0 !important; margin-top: 0 !important; } /* Premier row Uncode dans le wrapper — Uncode JS injecte parfois un margin-top calculé depuis la hauteur du #masthead */ .box-wrapper > .box-container > .uncont > .vc_row:first-child, .box-wrapper > .uncont > .vc_row:first-child, .box-container > .uncont > .vc_row:first-child { margin-top: 0 !important; padding-top: 0 !important; } /* ── Header principal ── */ .op-global-header { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; min-height: var(--oph-h); overflow: visible !important; background: rgba(10, 10, 10, 0) !important; border-bottom: 1px solid transparent; transition: background var(--oph-trans), border-color var(--oph-trans); font-family: 'Playfair Display', Georgia, serif; } .op-global-header--scrolled { background: rgba(10, 10, 10, 0.96) !important; border-bottom-color: var(--oph-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ── Inner ── */ .op-global-header__inner { max-width: 1400px; margin-inline: auto; padding: 0 clamp(20px, 4vw, 60px); height: var(--oph-h); display: flex; align-items: center; gap: 32px; } /* ── Logo ── */ .op-global-header__logo { flex-shrink: 0; display: block; line-height: 0; } .op-global-header__logo img { height: 44px; width: auto; display: block; object-fit: contain; } /* ── Nav desktop ── */ .op-global-header__nav { flex: 1; } .op-global-header__links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(16px, 2.2vw, 38px); flex-wrap: nowrap; } .op-global-header__links li { margin: 0; padding: 0; } .op-global-header__link { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: clamp(11px, 0.95vw, 13px); letter-spacing: 0.5px; color: var(--oph-white); text-decoration: none; white-space: nowrap; transition: color var(--oph-trans), opacity var(--oph-trans); display: block; opacity: 0.88; } .op-global-header__link:hover { color: var(--oph-white); opacity: 1; } .op-global-header__link--active { color: var(--oph-white); opacity: 1; border-bottom: 1px solid rgba(245, 243, 238, 0.5); padding-bottom: 2px; } /* ── Actions droite ── */ .op-global-header__actions { display: flex; align-items: center; gap: 22px; flex-shrink: 0; } .op-global-header__phone { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 12px; letter-spacing: 0.08em; color: var(--oph-white); text-decoration: none; white-space: nowrap; opacity: 0.85; transition: opacity var(--oph-trans); } .op-global-header__phone:hover { opacity: 1; } /* ── Sélecteur langue ── */ .op-global-header__lang { position: relative; cursor: pointer; } .op-global-header__lang-current { font-family: 'Playfair Display', Georgia, serif; font-size: 11px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245, 243, 238, 0.50); transition: color var(--oph-trans); padding-bottom: 20px; display: block; user-select: none; } .op-global-header__lang:hover .op-global-header__lang-current { color: var(--oph-white); } .op-global-header__lang-dropdown { display: none; position: absolute; top: calc(100% - 16px); right: 0; list-style: none; margin: 0; padding: 8px 0; background: rgba(10, 10, 10, 0.97); border: 1px solid var(--oph-border); min-width: 110px; z-index: 100; } .op-global-header__lang:hover .op-global-header__lang-dropdown { display: block; } .op-global-header__lang-dropdown li a { display: block; padding: 8px 16px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 243, 238, 0.55); text-decoration: none; transition: color var(--oph-trans); font-family: 'Playfair Display', Georgia, serif; } .op-global-header__lang-dropdown li a:hover { color: var(--oph-white); } /* ── Instagram ── */ .op-global-header__ig { color: rgba(245, 243, 238, 0.50); transition: color var(--oph-trans); display: flex; align-items: center; line-height: 0; text-decoration: none; } .op-global-header__ig:hover { color: var(--oph-white); } /* ── Burger (masqué desktop) ── */ .op-global-header__burger { display: none; flex-direction: column; gap: 5px; background: transparent; border: none; cursor: pointer; padding: 6px; margin-left: auto; } .op-global-header__burger span { display: block; width: 22px; height: 1px; background: var(--oph-white); transition: transform var(--oph-trans), opacity var(--oph-trans); } .op-global-header__burger--open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .op-global-header__burger--open span:nth-child(2) { opacity: 0; } .op-global-header__burger--open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ── Menu mobile ── */ .op-global-header__mobile-menu { display: none; background: rgba(10, 10, 10, 0.98); border-top: 1px solid var(--oph-border); padding: 20px clamp(20px, 5vw, 40px) 28px; } .op-global-header__mobile-menu--open { display: block; } .op-global-header__mobile-menu ul { list-style: none; margin: 0; padding: 0; } .op-global-header__mobile-menu li a { display: block; padding: 12px 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 14px; letter-spacing: 0.5px; color: rgba(245, 243, 238, 0.75); border-bottom: 1px solid var(--oph-border); text-decoration: none; transition: color var(--oph-trans); } .op-global-header__mobile-menu li:last-child a { border-bottom: none; } .op-global-header__mobile-menu li a:hover, .op-global-header__mobile-menu li a.op-global-header__link--active { color: var(--oph-white); } .op-global-header__mobile-sep a { color: var(--oph-gold) !important; } /* ── Premier row Uncode : supprime le padding-top:36px résiduel ────── Uncode applique ce padding sur .row-parent par défaut. Quand son header est actif, il ajoute un offset équivalent sur body pour compenser. On neutralise body (§4 ci-dessus) mais pas ce padding interne → barre noire de 36px sur les pages avec hero plein écran. */ .wpb-content-wrapper > .row-container:first-child .row.row-parent, [data-section="0"] .row.row-parent { padding-top: 0 !important; } /* ── Décalage contenu (pages sans hero plein écran) ── */ /* Par défaut : pas de padding-top — le header est en overlay sur le hero. Ajouter la classe .has-header-offset sur le des pages sans hero. */ body { padding-top: 0; } body.has-header-offset { padding-top: var(--oph-h) !important; } /* ── Responsive ── */ @media (max-width: 1024px) { .op-global-header__nav { display: none !important; } .op-global-header__actions { display: none !important; } .op-global-header__burger { display: flex !important; } } @media (max-width: 640px) { .op-global-header__inner { padding: 0 20px; } .op-global-header__logo img { height: 36px; } }