/* ============================================================================= * MAPIRANDO — Bascule sombre + jaune : chrome global du site * ============================================================================= * * Créé le 2026-09-03. Palette et règles dans _variables.css — ce fichier * applique ces jetons aux éléments COMMUNS À TOUTE PAGE : fond du corps, * texte par défaut, en-tête Blocksy, pied de page. Les composants propres à * un module (bouton, carte topo, formulaire...) se convertissent module par * module, dans leur propre feuille. * * En-tête ET pied de page Blocksy n'ont pas de fond à eux (vérifié : leur * background calculé est transparent) — c'est le fond du qui se voit * au travers. Assombrir body suffit donc pour la zone d'en-tête ; le pied de * page, lui, a son propre fond clair (.ct-footer) à traiter séparément. * * Chargée en toute dernière position (priorité 999 + dépendance à * ct-main-styles, voir mapirando-community.php) : le même mécanisme que * toutes les feuilles qui redressent le thème dans ce plugin. * ---------------------------------------------------------------------------- */ html, body { background-color: var(--mapi-ground, #0a0b0d) !important; color: var(--mapi-text-primary, #f4f3f0); } /* En-tête : logo et liens de menu, actuellement en encre sombre (pensés pour un fond clair) — passés en clair. Le logo (réglé dans Personnaliser → En-tête, pas dans ce plugin) est remplacé par une variante à deux tons — montagne en jaune d'accent, mot- symbole en clair — générée depuis le même fichier source à l'encre noire (assets/branding/mapirando-logo-noir.png → -clair.png, alpha préservé, coupure mesurée au pixel entre l'icône et le texte). PIÈGE CORRIGÉ le 2026-09-03 (capture d'écran de Remy : logo énorme) : content:url() remplace le rendu de l'élément à la taille INTRINSÈQUE de la nouvelle image, en ignorant la contrainte de hauteur que Blocksy applique normalement à .default-logo. Vérifié sur le vrai site : Blocksy contraint ce logo à 78px de haut (width:auto) via sa propre règle interne — jamais trouvée avec certitude (feuille générée dynamiquement), donc plutôt que de la deviner, la hauteur mesurée est réappliquée ici explicitement. */ .site-branding img, .site-branding img.default-logo { content: url('../branding/mapirando-logo-clair.png'); height: 78px !important; width: auto !important; max-width: none !important; } #header a, .ct-header-menu a, .ct-header .site-title, .ct-header .site-title a { color: var(--mapi-text-primary, #f4f3f0) !important; } .ct-header-menu a:hover { color: var(--mapi-accent, #fff200) !important; } /* Pied de page Blocksy : a son propre fond clair, contrairement à l'en-tête. */ .ct-footer, #colophon, .site-footer { background-color: var(--mapi-surface, #141619) !important; color: var(--mapi-text-secondary, #9aa3ad) !important; } .ct-footer a, #colophon a, .site-footer a { color: var(--mapi-text-primary, #f4f3f0) !important; } /* Titres : hérite du texte clair par défaut, mais Blocksy fixe parfois une couleur de titre spécifique par variable interne — on la réaligne. */ h1, h2, h3, h4, h5, h6 { color: var(--mapi-text-primary, #f4f3f0); } /* Liens de contenu courant : le bleu Blocksy par défaut reste lisible sur fond sombre, mais l'accent jaune identifie mieux la marque. CORRIGÉ le 2026-09-03 (capture d'écran de Remy) : le périmètre était .entry-content ENTIER — bien plus large que « le texte courant » prévu. .entry-content contient AUSSI les titres de vignette (topo, sortie, article), qui sont des comme n'importe quel lien : ils devenaient jaunes eux aussi, alors qu'ils doivent rester clairs (« ça rend mal »). Recentré sur les deux VRAIS conteneurs de prose du plugin — la description d'un topo et le corps d'un article — plutôt que sur toute la zone de contenu. Les titres de vignette, hors de ces conteneurs, ne sont plus concernés du tout : plus besoin de les exclure un par un. */ .mapi-topo-description a:not(.btn-signet-dark):not(.btn-signet-light), .mapi-article-content a:not(.btn-signet-dark):not(.btn-signet-light) { color: var(--mapi-accent, #fff200); } /* Panneaux qui se déploient au clic/survol (sous-menus Blocksy) : sans fond propre, hérite parfois d'un blanc posé plus haut dans le thème. */ .sub-menu, .ct-mega-menu, .ct-dropdown-content { background-color: var(--mapi-surface-raised, #1c1f24) !important; } .sub-menu a, .ct-mega-menu a, .ct-dropdown-content a { color: var(--mapi-text-primary, #f4f3f0) !important; } /* En-tête "collant" de Blocksy : un SECOND

existe dans le DOM, positionné hors écran (au-dessus) tant qu'on n'a pas défilé — Blocksy le fait glisser en place au scroll. Filet de sécurité : si Blocksy lui donne un jour un fond plein (collant, mobile...), qu'il soit sombre. */ .ct-header { background-color: var(--mapi-ground, #0a0b0d); } /* La ligne RÉELLEMENT visible n'est pas .ct-header lui-même mais un

sans classe juste en dessous — déjà documenté dans CLAUDE.md (« #header n'utilise PAS .site-header » ; la rangée visible est #header > div:first-child, ~140px sur bureau). Trouvé en vérifiant sur MOBILE (2026-09-03) : ce sélecteur ne suffit pas — sur petit écran, c'est un

PLUS PROFOND (grand-enfant, pas enfant direct de #header) qui porte le fond blanc. Plutôt que deviner encore une profondeur d'imbrication, ciblé par son vrai attribut structurel Blocksy : chaque rangée d'en-tête porte data-row="top|middle|bottom", peu importe où elle se trouve dans l'arbre — sélecteur qui survivra à un changement de structure HTML de Blocksy, contrairement à "> div:first-child". */ #header [data-row], .ct-header [data-row] { background-color: var(--mapi-ground, #0a0b0d); }