/* ═══════════════════════════════════════════════════════════════ Tenaë — Header global v1.0 Chargé via wp_enqueue_scripts → dans sur toutes les pages. ═══════════════════════════════════════════════════════════════ */ /* ── Hauteur du header (variable CSS globale) ───────────────── */ :root { --tee-header-h: 100px; } .admin-bar { --tee-header-h: 132px; } @media screen and (max-width: 1100px) { :root { --tee-header-h: 76px; } .admin-bar { --tee-header-h: 108px; } } @media screen and (max-width: 782px) { .admin-bar { --tee-header-h: 122px; } } /* ── Pousse le contenu sous le header fixe ──────────────────── */ /* ⚠️ !important : les global styles Gutenberg (global-styles-inline-css, theme.json) émettent `body{padding:0}` APRÈS cette feuille dans le head — sans lui, l'offset perd la cascade et les titres passent sous le header fixe (incident du 31/07/2026). */ body { padding-top: var(--tee-header-h) !important; } /* ── Masque le header par défaut de Hello Elementor ─────────── */ /* (ne s'affiche que si Elementor ne prend pas la main — on le cache par sécurité) */ #site-header.site-header { display: none !important; } /* ── Header fixe ─────────────────────────────────────────────── */ .tee-site-header { position: fixed; top: 0; left: 0; right: 0; background: var(--tee-cream, #F7F3EE); border-bottom: 1px solid #E4EDEB; z-index: 9990; box-sizing: border-box; } .admin-bar .tee-site-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .tee-site-header { top: 46px; } } .tee-site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 18px 56px; position: relative; } /* Logo */ .tee-hdr-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; text-decoration: none; } .tee-hdr-logo img { height: 64px; width: auto; display: block; } /* Burger — masqué sur desktop */ /* Reset visuel sur tous les états — NE PAS mettre display ici */ .tee-hdr-burger, .tee-hdr-burger:hover, .tee-hdr-burger:focus, .tee-hdr-burger:active { background: none !important; background-color: transparent !important; background-image: none !important; border: none !important; outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent !important; -webkit-appearance: none !important; appearance: none !important; color: inherit !important; text-decoration: none !important; } /* display séparé : display:none sur desktop, display:flex sur mobile via media query */ .tee-hdr-burger { display: none; width: 32px; height: 32px; flex-direction: column; justify-content: center; gap: 5px; padding: 0; cursor: pointer; flex-shrink: 0; } .tee-hdr-burger:focus-visible { outline: 2px solid #7B938C !important; outline-offset: 4px; } .tee-hdr-burger span { display: block; width: 22px; height: 1.5px; background: var(--tee-green-dark, #3B4933); transition: transform 0.25s, opacity 0.2s; } .tee-hdr-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .tee-hdr-burger.open span:nth-child(2) { opacity: 0; } .tee-hdr-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Nav desktop */ .tee-hdr-nav { display: flex; align-items: center; gap: 32px; } .tee-hdr-nav-list { display: flex; align-items: center; gap: 32px; list-style: none !important; margin: 0 !important; padding: 0 !important; } .tee-hdr-nav-list > li { list-style: none !important; } /* Pas de flash bleu système au tap sur les liens du menu (mobile). */ .tee-hdr-nav a { -webkit-tap-highlight-color: transparent !important; } /* Liens nav */ .tee-hdr-nav-list > li > a { font-family: 'Raleway', sans-serif !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--tee-green-dark, #3B4933) !important; text-decoration: none !important; padding: 6px 0; transition: color 0.25s ease; white-space: nowrap; display: inline-block; } .tee-hdr-nav-list > li > a:hover { color: var(--tee-gold, #CC9C71) !important; text-decoration: none !important; } .tee-hdr-nav-list > li > a:active { color: #A87B4F !important; } /* Page active — couleur fixée, hover identique */ .tee-hdr-nav-list > li.current-menu-item > a, .tee-hdr-nav-list > li.current-menu-ancestor > a, .tee-hdr-nav-list > li.current-page-ancestor > a { color: var(--tee-gold, #CC9C71) !important; } .tee-hdr-nav-list > li.current-menu-item > a:hover, .tee-hdr-nav-list > li.current-menu-ancestor > a:hover, .tee-hdr-nav-list > li.current-page-ancestor > a:hover { color: var(--tee-gold, #CC9C71) !important; } /* Bouton RÉSERVER */ .tee-hdr-btn-reserver { font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; /* Couleur FIXE (hors thème) — décision volontaire : le CTA marketing garde son sage identitaire quel que soit le thème de l'app. */ background: #7B938C; color: #FFFFFF !important; text-decoration: none !important; padding: 14px 28px; white-space: nowrap; flex-shrink: 0; transition: background 0.25s ease; display: inline-block; } .tee-hdr-btn-reserver:hover { background: #65786F !important; color: #FFFFFF !important; } /* Dropdown */ .tee-hdr-nav-list > li.menu-item-has-children { position: relative; } .tee-hdr-nav-list > li.menu-item-has-children > a { display: inline-flex !important; align-items: center; gap: 4px; } .tee-hdr-nav-list > li.menu-item-has-children > a::after { content: ''; width: 5px; height: 5px; flex-shrink: 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.25s ease; } .tee-hdr-nav-list > li.menu-item-has-children:hover > a::after { transform: translateY(0) rotate(225deg); } /* Bridge transparent : couvre le gap entre le lien et le dropdown */ .tee-hdr-nav-list > li.menu-item-has-children::before { content: ''; position: absolute; top: 100%; left: -12px; right: -12px; height: 20px; background: transparent; z-index: 9990; } .tee-hdr-nav-list > li.menu-item-has-children > .sub-menu { position: absolute !important; top: calc(100% + 10px) !important; left: 50% !important; transform: translateX(-50%) !important; background: #fff !important; box-shadow: 0 14px 38px rgba(59,73,51,0.14) !important; min-width: 252px !important; padding: 8px 0 !important; z-index: 9991 !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.25s ease !important; list-style: none !important; margin: 0 !important; } .tee-hdr-nav-list > li.menu-item-has-children:hover > .sub-menu { opacity: 1 !important; visibility: visible !important; } .tee-hdr-nav-list > li.menu-item-has-children > .sub-menu > li { list-style: none !important; } .tee-hdr-nav-list > li.menu-item-has-children > .sub-menu > li > a { display: block !important; width: 100%; padding: 12px 24px !important; white-space: nowrap; font-family: 'Raleway', sans-serif !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.12em !important; color: var(--tee-green-dark, #3B4933) !important; text-decoration: none !important; transition: background 0.15s, color 0.15s; text-transform: uppercase !important; } .tee-hdr-nav-list > li.menu-item-has-children > .sub-menu > li > a:hover { color: var(--tee-gold, #CC9C71) !important; background: var(--tee-cream, #F7F3EE) !important; } /* ── Mobile ≤ 1100px ─────────────────────────────────────────── */ @media screen and (max-width: 1100px) { .tee-site-header-inner { padding: 14px 20px; gap: 16px; } .tee-hdr-logo img { height: 48px; } .tee-hdr-burger { display: flex; } .tee-hdr-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--tee-cream, #F7F3EE); flex-direction: column; align-items: flex-start; gap: 0; padding: 0; border-bottom: 1px solid #E4EDEB; max-height: 0; overflow: hidden; transition: max-height 0.35s ease; z-index: 9992; } .tee-hdr-nav.open { max-height: 700px; padding: 8px 0 16px; /* Le panneau se détache de la page (ombre seulement ouvert — un max-height:0 fermé afficherait quand même le filet d'ombre). */ box-shadow: 0 18px 32px rgba(59,73,51,0.16); } .tee-hdr-nav-list { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; width: 100%; } .tee-hdr-nav-list > li { width: 100%; } .tee-hdr-nav-list > li > a { display: block !important; width: 100%; padding: 14px 24px !important; border-bottom: 1px solid rgba(228,237,235,0.5) !important; border-left: 3px solid transparent !important; box-sizing: border-box; } /* Retour visuel au tap : fond crème + accent — remplace le flash bleu système. */ .tee-hdr-nav-list > li > a:active, .tee-hdr-nav-list > li.menu-item-has-children > .sub-menu > li > a:active { background: #EFE9E1 !important; color: var(--tee-gold, #CC9C71) !important; } /* Page courante : liseré + fond léger — repère immédiat dans le menu déplié. */ .tee-hdr-nav-list > li.current-menu-item > a, .tee-hdr-nav-list > li.current-menu-ancestor > a, .tee-hdr-nav-list > li.current-page-ancestor > a { border-left-color: var(--tee-gold, #CC9C71) !important; background: rgba(204,156,113,0.08) !important; } /* RÉSERVER mobile */ .tee-hdr-btn-reserver { margin: 12px 24px 4px; padding: 14px 28px; display: inline-block; } /* Dropdown mobile — déplié inline */ .tee-hdr-nav-list > li.menu-item-has-children > a::after { display: none; } .tee-hdr-nav-list > li.menu-item-has-children > .sub-menu { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; top: auto !important; left: auto !important; padding: 0 !important; box-shadow: none !important; min-width: 0 !important; background: transparent !important; } .tee-hdr-nav-list > li.menu-item-has-children > .sub-menu > li { background: transparent !important; } .tee-hdr-nav-list > li.menu-item-has-children > .sub-menu > li > a { padding: 12px 24px 12px 44px !important; color: #6B7A66 !important; border-bottom: 1px solid rgba(228,237,235,0.5) !important; background: transparent !important; text-transform: uppercase !important; } }