/* Theme Name: Kadence Child - Étreux Description: Thème enfant de Kadence pour la commune d'Étreux. Contient les correctifs et personnalisations spécifiques au site, isolés du thème parent pour survivre aux mises à jour. Template: kadence Version: 1.0.0 Text Domain: kadence-child-etreux */ /* ========================================================================== Header opaque et dans le flux normal sur les pages MEC sans image hero ========================================================================== Le mode transparent global de Kadence force .wp-block-kadence-header en height:0 et son conteneur interne .kb-header-container en position:absolute avec un fond transparent -- pensé pour cohabiter avec une image hero. Deux templates MEC n'en ont pas dans ce sens (pas d'image hero PLEINE LARGEUR derrière le header lui-même) : - l'archive des événements (body.post-type-archive-mec-events) - la fiche d'un événement (body.single-mec-events), où l'image mise en avant de l'événement démarre SOUS le header, pas derrière lui HAUTEUR FIXE (118px) plutôt que "auto" -- choix délibéré, pas un oubli : le sticky natif de Kadence reste actif sur ces pages (cohérence visuelle avec le reste du site : header qui se "colle" en haut au scroll). Pour ce faire, le conteneur interne .kb-header-container doit pouvoir passer en position:fixed comme partout ailleurs -- mais s'il sort ainsi du flux, un
en height:auto n'aurait plus rien à mesurer et sa hauteur retomberait à 0 (bug observé et corrigé ici). Une hauteur EXPLICITE évite ce problème : elle ne dépend plus du contenu interne, peu importe son état fixed/relative. Contrepartie à garder en tête : si le header est modifié plus tard (logo, police, menu) et que sa hauteur réelle change, cette valeur devra être ajustée en conséquence -- vérifier dans les DevTools (getComputedStyle(header).height) et mettre à jour les deux règles ci-dessous si besoin. Portée : uniquement ces deux contextes. Aucune autre page -- y compris le blog, qui garde son header transparent et son comportement sticky normal au scroll, inchangé. */ body.post-type-archive-mec-events .wp-block-kadence-header.header-desktop-transparent, body.post-type-archive-mec-events .wp-block-kadence-header.header-tablet-transparent, body.post-type-archive-mec-events .wp-block-kadence-header.header-mobile-transparent, body.single-mec-events .wp-block-kadence-header.header-desktop-transparent, body.single-mec-events .wp-block-kadence-header.header-tablet-transparent, body.single-mec-events .wp-block-kadence-header.header-mobile-transparent { height: 118px !important; } body.post-type-archive-mec-events .wp-block-kadence-header.header-desktop-transparent .kb-header-container, body.post-type-archive-mec-events .wp-block-kadence-header.header-tablet-transparent .kb-header-container, body.post-type-archive-mec-events .wp-block-kadence-header.header-mobile-transparent .kb-header-container, body.single-mec-events .wp-block-kadence-header.header-desktop-transparent .kb-header-container, body.single-mec-events .wp-block-kadence-header.header-tablet-transparent .kb-header-container, body.single-mec-events .wp-block-kadence-header.header-mobile-transparent .kb-header-container { background: var(--kb-stuck-header-bg, var(--kb-header-bg, #fff)); } /* Couleur du texte de navigation (menu, boutons) : en mode transparent, Kadence force --kb-nav-top-link-color à la couleur palette9 (#ffffff), pensée pour rester lisible sur une image hero sombre. Sur fond clair (cf. ci-dessus), ce blanc devient illisible. On réinjecte une couleur sombre via la même variable CSS native, sur le même principe que le mode "tablet-transparent" de Kadence qui applique déjà nativement #2d3748 au lieu du blanc -- on applique simplement la même logique au desktop ici. */ body.post-type-archive-mec-events .header-desktop-transparent [class*="wp-block-kadence-navigation"], body.single-mec-events .header-desktop-transparent [class*="wp-block-kadence-navigation"] { --kb-nav-top-link-color: #2d3748; } /* Bouton "Nous contacter" (et tout bouton du header) : même logique que le menu ci-dessus. En mode transparent, Kadence donne au bouton un style "outline" blanc (texte + bordure en --global-palette9) pensé pour contraster sur une image hero sombre -- ici invisible sur fond clair. On force une couleur sombre cohérente (même gris que la navigation) pour le texte et la bordure au repos ; le survol garde la couleur de marque déjà définie nativement par Kadence (rgb(189, 18, 18)), inchangée. */ body.post-type-archive-mec-events .header-desktop-transparent .wp-block-kadence-advancedbtn .kb-button, body.single-mec-events .header-desktop-transparent .wp-block-kadence-advancedbtn .kb-button { color: #2d3748; border-color: #2d3748; } /* Au survol, Kadence applique un fond rouge plein (couleur de marque) sur ce bouton -- mécanisme natif, inchangé. On force seulement le texte en blanc à ce moment précis pour rester lisible sur ce fond rouge (au repos, le texte sombre défini ci-dessus reste correct, sans fond derrière lui). */ body.post-type-archive-mec-events .header-desktop-transparent .wp-block-kadence-advancedbtn .kb-button:hover, body.single-mec-events .header-desktop-transparent .wp-block-kadence-advancedbtn .kb-button:hover { color: #ffffff; } /* Espacement de respiration entre le bas du header (redevenu opaque et dans le flux, cf. plus haut) et le contenu MEC. Sans cette règle, le contenu démarre exactement au pixel où se termine le header -- correct mécaniquement (plus de chevauchement) mais visuellement trop serré. #main-content est le même ID sur l'archive et sur la fiche single (les deux templates MEC utilisent le même filtre mec_*_page_html_id avec la même valeur par défaut). */ body.post-type-archive-mec-events #main-content, body.single-mec-events #main-content { padding-top: 48px; } /* Séparation visuelle entre le header (désormais opaque et fixe dans le flux sur ces pages) et le contenu. Même esprit que l'ombre habituellement appliquée au header en mode "stuck" au scroll sur les autres pages, mais ici permanente puisque le header n'a plus de comportement transparent à distinguer d'un état scrollé -- il est opaque d'emblée. */ body.post-type-archive-mec-events .wp-block-kadence-header.header-desktop-transparent .kb-header-container, body.single-mec-events .wp-block-kadence-header.header-desktop-transparent .kb-header-container { transition: box-shadow 0.4s ease-in-out; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); }