/* ========================================================================== assets/css/entete-pied.css -------------------------------------------------------------------------- [idh_header] (.entete + #idh-menu-mobile) et [idh_footer] (.pied). Repris de la maquette « idhotes-maquette-3-styles ». Zéro couleur/rayon en dur : tout passe par var(--idh-*) (includes/tokens.php). NB : .entete est position:fixed. Sur une page SANS bandeau plein cadre ([idh_hero]) au-dessus, prévoir un padding-top sur le contenu. ========================================================================== */ /* ========================================================================== EN-TÊTE ========================================================================== */ .entete { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px var(--idh-cadre, var(--rail)); color: #fff; transition: background-color .5s, color .5s, padding .5s; } .entete.pose { background: var(--idh-bg); color: var(--idh-ink); padding-block: 14px; border-bottom: 1px solid var(--idh-line); } .entete .lien { color: inherit; } .entete .marque { display: inline-flex; align-items: center; font-family: var(--idh-font-display); font-size: 1.3rem; font-weight: 700; font-variation-settings: "wdth" 84; letter-spacing: -0.025em; text-decoration: none; white-space: nowrap; color: inherit; } .entete .marque .jalon { width: .78em; height: .78em; margin-right: .5em; color: var(--idh-accent); flex-shrink: 0; } /* Hauteur plafonnée : !important pour battre « .elementor img { height:auto } » (le shortcode est souvent dans un widget Elementor). --idh-entete-logo-h surchargeable via un style inline sur .entete si besoin. */ .marque__logo { display: block; height: auto !important; max-height: var(--idh-entete-logo-h, 72px) !important; width: auto !important; max-width: 240px; object-fit: contain; } .entete.pose .marque__logo { max-height: calc(var(--idh-entete-logo-h, 72px) - 8px) !important; } /* Bascule des deux logos : bandeau (fond foncé) / au scroll (fond blanc). */ .marque__logo--pose { display: none; } .entete.pose .marque__logo--bandeau { display: none; } .entete.pose .marque__logo--pose { display: block; } .nav { display: flex; gap: 26px; align-items: center; font-size: .92rem; } .nav > a, .nav .nav__item > a { text-decoration: none; opacity: .88; } .nav > a:hover, .nav .nav__item > a:hover { opacity: 1; } .nav .bouton { padding: 11px 22px; } .entete:not(.pose) .nav .bouton { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; } .entete:not(.pose) .nav .bouton:hover { background: #fff; color: var(--idh-ink); border-color: #fff; } /* --- Sous-menu --------------------------------------------------------- */ .nav__item { position: relative; } /* Pont invisible link → sous-menu : sans lui, la souris traverse un « trou » entre le lien et le panneau, le survol se perd et le sous-menu se referme avant qu'on ait pu cliquer. Ne décale rien (position:absolute). */ .nav__item::after { content: ""; position: absolute; left: -14px; right: -14px; top: 100%; height: 20px; } .sous-menu { position: absolute; top: calc(100% + 14px); left: 50%; min-width: 210px; transform: translate(-50%, 4px); background: var(--idh-bg); color: var(--idh-ink); border-radius: var(--idh-radius); box-shadow: 0 24px 46px -24px rgba(0,0,0,.4); padding: 8px; display: grid; gap: 2px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .nav__item:hover .sous-menu, .nav__item:focus-within .sous-menu { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } .sous-menu__lien { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: var(--idh-radius); font-size: .87rem; text-decoration: none; color: var(--idh-ink); opacity: 1; } .sous-menu__lien:hover { background: var(--idh-bg-alt); } .sous-menu__lien span { margin-left: auto; font-size: .76rem; opacity: .56; } /* --- Bouton + réseaux/langues empilés dessous ------------------------- */ .nav__droite { position: relative; display: flex; align-items: center; } .nav__utilitaires { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 16px; display: flex; align-items: center; gap: 10px; white-space: nowrap; width: max-content; } .nav__reseau { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: inherit; opacity: .78; } .nav__reseau:hover { opacity: 1; background: rgba(255,255,255,.16); } .entete.pose .nav__reseau:hover { background: var(--idh-bg-alt); } .nav__reseau svg { width: 16px; height: 16px; flex: none; } .nav__separateur-vertical { flex: none; width: 1px; height: 15px; background: currentColor; opacity: .3; } .nav__langues { display: flex; align-items: center; gap: 8px; font-size: .82rem; letter-spacing: .02em; } /* GTranslate & consorts : neutralise leur mise en forme par défaut + drapeaux un peu plus grands (par défaut GTranslate rend des png ~16px). */ .idh-langues .gtranslate_wrapper, .idh-langues .gt_selector, .idh-langues select { font: inherit; color: inherit; background: transparent; border: 0; } .idh-langues img { height: 20px !important; width: auto !important; vertical-align: middle; } .idh-langues a { display: inline-flex; align-items: center; } /* #idh-burger (ID, pas .burger) : nécessaire pour battre en spécificité le CSS du kit global Elementor (.elementor-kit-11 button { background / border-radius en dur }), qui s'applique sinon à N'IMPORTE QUEL