/** * Barre de notification — bandeau d'information en haut du site. * * Positionnement : flux normal (pas de `position: fixed`). * * Conséquences voulues : * - La barre prend exactement la hauteur de son contenu : pas d'espace blanc * parasite à compenser sur le ``. * - Quand la barre d'admin WordPress est visible, elle est `fixed` au-dessus * du document avec un padding-top appliqué au ``. La barre de * notification, étant en flux normal, se place donc naturellement * en-dessous de la barre d'admin (plus de masquage). * - Sur mobile, le menu sticky est rendu en `position: sticky` (cf. * sticky-menu.css). La barre de notification, insérée en premier dans le * via wp_body_open priorité 5, apparaît donc tout en haut, au-dessus * du menu sticky. Au scroll, la barre disparaît vers le haut, le menu * sticky se colle alors à `top: 0`. * * Deux modes de rendu : * - statique : texte centré. * - défilement automatique : marquee à **une seule copie** (entre par la * droite, sort par la gauche, recommence). Pas de doublon visible. * * Les couleurs et la police sont injectées en variables CSS inline par le * PHP, en référence aux presets du thème * (`--wp--preset--color--`, `--wp--preset--font-family--`). */ .tof-notification-bar { --tof-notification-bar-bg: var( --wp--preset--color--contrast, #111 ); --tof-notification-bar-color: var( --wp--preset--color--base, #fff ); --tof-notification-bar-font: inherit; --tof-notification-bar-padding-y: 0.6em; --tof-notification-bar-padding-x: 1.5rem; --tof-notification-bar-marquee-duration: 15s; width: 100%; background: var( --tof-notification-bar-bg ); color: var( --tof-notification-bar-color ); font-family: var( --tof-notification-bar-font ); font-size: var( --wp--preset--font-size--medium, 1.125rem ); line-height: 1.4; overflow: hidden; } .tof-notification-bar a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; } .tof-notification-bar a:hover, .tof-notification-bar a:focus-visible { text-decoration: none; } .tof-notification-bar a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* ---------- Mode statique ---------- */ .tof-notification-bar--static .tof-notification-bar__inner { padding: var( --tof-notification-bar-padding-y ) var( --tof-notification-bar-padding-x ); text-align: center; } .tof-notification-bar--static .tof-notification-bar__text { display: inline; } /* ---------- Mode défilement (une seule copie) ---------- * * Principe : la piste est `inline-block` avec `padding-inline-start: 100%`, * donc son contenu démarre exactement à 100 % du viewport (= juste à droite, * hors-écran). Largeur naturelle = 100 % + largeur du texte. L'animation * translate la piste de 0 à -100 % de sa largeur totale : le texte traverse * le viewport de droite à gauche puis sort à gauche, et la boucle * recommence avec le texte qui réapparaît à droite. Aucun moment où le * texte est affiché en double. */ .tof-notification-bar--marquee .tof-notification-bar__track { display: inline-block; white-space: nowrap; padding-block: var( --tof-notification-bar-padding-y ); padding-inline-start: 100%; will-change: transform; animation: tof-notification-bar-scroll var( --tof-notification-bar-marquee-duration ) linear infinite; } .tof-notification-bar--marquee .tof-notification-bar__text { display: inline; } @keyframes tof-notification-bar-scroll { from { transform: translateX( 0 ); } to { transform: translateX( -100% ); } } /* ---------- Desktop : ralentir le défilement ---------- * * Sur grands écrans, la piste a plus de chemin à parcourir (padding-inline-start * à 100 % du viewport = bien plus de pixels). Garder la même durée qu'en mobile * donnerait une vitesse perçue trop rapide. On allonge la durée au-delà de * 900 px (même breakpoint desktop que le menu sticky). */ @media ( min-width: 900px ) { .tof-notification-bar { --tof-notification-bar-marquee-duration: 25s; } } /* ---------- Accessibilité : préférence de mouvement réduit ---------- */ @media ( prefers-reduced-motion: reduce ) { .tof-notification-bar--marquee .tof-notification-bar__track { display: block; animation: none; padding: var( --tof-notification-bar-padding-y ) var( --tof-notification-bar-padding-x ); white-space: normal; text-align: center; } }