/* ============================================================================ * Pistes Pragmatiques — cn-theme v0.9.0 * * Styles dédiés au CPT cn_piste_pragmatique : * - single piste-pragmatique.twig * - archive archive-pistes-pragmatiques.twig * * Chargé conditionnellement (enqueue.php) sur les pages PP uniquement. * Toutes les valeurs s'appuient sur les design tokens définis dans variables.css. * Inter unique pour rester cohérent avec le reste du thème. * ========================================================================== */ /* ============================================================================ * SINGLE — HEADER * ========================================================================== */ .cn-pp-header { background-color: var(--cn-bleu-nuit); color: var(--cn-ivoire); /* v0.11.26 : élimine la bande ivoire visible entre le filet or du sticky-top et le bloc bleu du header. CAUSE Le sticky-top du thème est position:fixed (components.css §28). Pour compenser, main.js pose dynamiquement un padding-top sur
égal à la hauteur visuelle du sticky-top. Cette zone de padding apparaît en background --cn-ivoire-95 du body — créant une bande ivoire au-dessus du bloc bleu de la PP. FIX Le .cn-pp-header glisse SOUS le sticky-top via margin-top négatif, compensé par un padding-top augmenté de la même valeur. Conséquences : - Le bord supérieur visible du bloc bleu touche directement le filet or (plus aucune bande ivoire). - Le contenu intérieur (eyebrow, titre, sous-titre, meta-row) garde sa position visuelle exacte. - La portion du bloc bleu qui dépasse vers le haut est masquée par le sticky-top (z-index: 100 vs auto). --cn-sticky-top-height est posée par main.js sur . Au premier paint avant exécution JS, fallback à 0 → comportement d'avant le fix (bande ivoire visible, transitoire). */ margin-top: calc(-1 * var(--cn-sticky-top-height, 0px)); padding: calc(var(--cn-space-12) + var(--cn-sticky-top-height, 0px)) 0 var(--cn-space-16); } .cn-pp-header__code { color: var(--cn-or); font-weight: var(--cn-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--cn-text-sm); margin: 0 0 var(--cn-space-4); } .cn-pp-header__flagship { color: var(--cn-or); font-size: var(--cn-text-base); margin-left: var(--cn-space-2); } .cn-pp-header__title { color: var(--cn-ivoire); font-size: var(--cn-text-5xl); font-weight: var(--cn-weight-bold); line-height: var(--cn-leading-tight); margin: 0 0 var(--cn-space-4); /* v0.10.10 : retrait du max-width 22ch — laisse le titre s'étaler sur toute la largeur du container ultra. Plus de coupures artificielles sur 2 lignes quand il y a de la place. */ } .cn-pp-header__subtitle { color: var(--cn-bleu-nuit-20); font-size: var(--cn-text-2xl); font-style: italic; line-height: var(--cn-leading-snug); font-weight: var(--cn-weight-regular); margin: 0 0 var(--cn-space-8); /* v0.10.22 : retiré max-width 56ch — laisse le sous-titre exploiter toute la largeur du container ultra. Plus de coupure prématurée sur grand écran. */ } .cn-pp-header__meta-row { list-style: none; margin: 0; /* v0.10.24 : padding-top retiré du