@layer base { /* ---- Focus ----------------------------------------------------------- Toujours visible. Anneau or sur fond sombre, ou le noir disparaitrait. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--focus-ring-w) solid var(--c-ink-900); outline-offset: var(--focus-ring-offset); border-radius: var(--r-xs); } .site-footer :focus-visible, .hero :focus-visible, .mbr-sidebar :focus-visible, .trail-hero :focus-visible { outline-color: var(--c-gold-500); } /* Sur la carte, le fond est imprevisible : anneau double clair + sombre. */ .map :focus-visible { outline-color: var(--c-ink-900); box-shadow: 0 0 0 var(--focus-ring-w) var(--c-white); } :focus:not(:focus-visible) { outline: none; } /* ---- Lien d'evitement ------------------------------------------------ */ .skip-link { position: absolute; left: var(--sp-4); top: var(--sp-2); z-index: var(--z-toast); transform: translateY(-250%); padding: var(--sp-3) var(--sp-5); background: var(--c-gold-500); color: var(--c-ink-900); font-weight: var(--fw-bold); text-decoration: none; border-radius: var(--r-sm); transition: transform var(--dur) var(--ease-out); } .skip-link:focus { transform: translateY(0); } /* ---- Masquage visuel, mais lu par les technologies d'assistance ------ */ .u-visually-hidden:not(:focus):not(:active) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- Etat de session, resolu AVANT le premier rendu ------------------ Un script synchrone dans pose data-auth et data-role sur . Zero clignotement, et aucune decision de securite cote client : l'API refait systematiquement le controle. */ html[data-auth="out"] [data-auth-only="in"], html[data-auth="in"] [data-auth-only="out"], html:not([data-auth]) [data-auth-only] { display: none !important; } html:not([data-role~="admin"]):not([data-role~="webmaster"]) [data-role-only="admin"] { display: none !important; } html:not([data-role~="webmaster"]) [data-role-only="webmaster"] { display: none !important; } /* Sans JavaScript on retombe sur l'etat deconnecte, jamais sur du vide. */ html:not(.js) [data-auth-only="in"] { display: none !important; } html:not(.js) [data-auth-only="out"] { display: revert !important; } /* ---- Cibles tactiles -------------------------------------------------- */ :where(a.btn, button, [role="button"], .chip, .site-nav__link) { min-height: var(--hit-target); } [hidden] { display: none !important; } [inert] { cursor: default; } }