/* Barre BRNSG : bandeau commun des sites de démonstration. Chargée dans AVANT la feuille de style de la démo : les règles qui suivent verrouillent donc couleur, fond et soulignement dans tous les états (repos, survol, focus, actif) avec une spécificité supérieure aux règles nues des démos (a:hover, button:hover, :focus-visible, p { ... }). Contrat : hauteur 36 px exposée dans --brnsg-barre (0 px une fois repliée) ; hauteur de l'onglet replié exposée dans --brnsg-onglet (32 px une fois repliée, 0 px sinon). Tout élément fixe ou collant ancré en haut utilise top: var(--brnsg-barre, 0px) ; tout élément fixé en bas (barre d'appel mobile, toast) réserve var(--brnsg-onglet, 0px) en bas ou laisse libres les 90 px du bord droit. */ html { --brnsg-barre: 36px; --brnsg-onglet: 0px; } html.brnsg-barre-repliee { --brnsg-barre: 0px; --brnsg-onglet: 32px; } .brnsg-barre { box-sizing: border-box; position: sticky; top: 0; z-index: 9990; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; height: 36px; margin: 0; padding: 0 16px; background: #0A0A0A; color: #F4F4F2; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.2; letter-spacing: normal; text-align: left; text-transform: none; border: 0; border-radius: 0; box-shadow: none; } html.brnsg-barre-repliee .brnsg-barre { display: none; } /* Le paragraphe occupe toute la hauteur (36 px) et déborde de 4 px à gauche et à droite (marge négative compensée par le remplissage) : le contour de focus du lien (2 px + décalage 2 px) tient dans sa boîte malgré overflow: hidden, nécessaire à l'ellipse. Le texte reste aligné au même endroit. */ .brnsg-barre .brnsg-barre__texte { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0 -4px; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: inherit; line-height: 36px; color: inherit; letter-spacing: normal; text-align: left; text-indent: 0; text-shadow: none; text-transform: none; } .brnsg-barre__court { display: none; } /* Lien : la feuille de la démo étant chargée après, une règle nue a:hover (0,1,1) battrait .brnsg-barre__lien (0,1,0) ; les états sont donc écrits à (0,3,0). */ .brnsg-barre .brnsg-barre__lien, .brnsg-barre .brnsg-barre__lien:hover, .brnsg-barre .brnsg-barre__lien:focus, .brnsg-barre .brnsg-barre__lien:active { display: inline; margin: 0; padding: 0; color: #F4F4F2; background: transparent; opacity: 1; font: inherit; letter-spacing: normal; text-transform: none; text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 2px; border: 0; border-radius: 0; box-shadow: none; transform: none; } .brnsg-barre .brnsg-barre__lien:hover, .brnsg-barre .brnsg-barre__lien:focus-visible { text-decoration-thickness: 2px; } .brnsg-barre .brnsg-barre__replier, .brnsg-barre .brnsg-barre__replier:focus, .brnsg-barre .brnsg-barre__replier:active { flex: 0 0 auto; -webkit-appearance: none; appearance: none; display: inline-block; width: auto; min-width: 0; height: 24px; min-height: 0; margin: 0; padding: 0 10px; background: transparent; color: #F4F4F2; opacity: 1; border: 1px solid #F4F4F2; border-radius: 0; box-shadow: none; font: inherit; line-height: 22px; letter-spacing: normal; text-transform: none; text-decoration: none; transform: none; cursor: pointer; } .brnsg-barre .brnsg-barre__replier:hover { background: #F4F4F2; color: #0A0A0A; } /* Onglet fixe créé par le script quand la barre est repliée : 32 px de haut, environ 80 px de large, coin inférieur droit. Il est enfant direct de ; html body .brnsg-onglet:hover (0,2,2) bat body button:hover (0,1,2). */ html body .brnsg-onglet, html body .brnsg-onglet:hover, html body .brnsg-onglet:focus, html body .brnsg-onglet:active { position: fixed; top: auto; right: 0; bottom: 0; bottom: env(safe-area-inset-bottom, 0px); left: auto; z-index: 9990; -webkit-appearance: none; appearance: none; box-sizing: border-box; display: block; width: auto; min-width: 0; height: 32px; min-height: 0; margin: 0; padding: 0 14px; background: #0A0A0A; color: #F4F4F2; opacity: 1; border: 0; border-radius: 0; box-shadow: none; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; font-style: normal; font-weight: 600; line-height: 32px; letter-spacing: 0.08em; text-transform: none; text-decoration: none; transform: none; cursor: pointer; } html body .brnsg-onglet:hover, html body .brnsg-onglet:focus-visible { text-decoration: underline; text-underline-offset: 3px; } /* Focus visible : contour clair de 2 px, sans ombre, angles droits */ .brnsg-barre .brnsg-barre__lien:focus-visible, .brnsg-barre .brnsg-barre__replier:focus-visible { outline: 2px solid #F4F4F2; outline-offset: 2px; } html body .brnsg-onglet:focus-visible { outline: 2px solid #F4F4F2; outline-offset: -4px; } /* Écrans étroits : une seule ligne, texte court, ellipse si besoin. Le texte long à 13 px en police système mesure environ 550 px ; avec les marges (32 px), l'écart (16 px) et le bouton (70 px) il lui faut 670 px : la bascule se fait à 720 px pour ne jamais tronquer le lien. */ @media (max-width: 720px) { .brnsg-barre { gap: 10px; padding: 0 12px; } .brnsg-barre__long { display: none; } .brnsg-barre__court { display: inline; } } /* Aucune transition ni animation quand le visiteur les refuse */ @media (prefers-reduced-motion: reduce) { .brnsg-barre, .brnsg-barre *, .brnsg-onglet { transition: none !important; animation: none !important; } } @media print { .brnsg-barre, .brnsg-onglet { display: none; } }