/* ───────────────────────────────────────────────────────────────────────── SOCLE DE PLATEFORME — servi à tout site AUTONOME, avant sa feuille. Ce fichier n'habille pas un cabinet. Il porte ce que la plateforme RENDA dans `_base/layout.html`, hors de tout {% block %}, et qu'un cabinet ne peut donc ni retirer ni déplacer : le lien d'évitement, l'anneau de focus, le modèle de boîte. ── POURQUOI IL EXISTE (F-D1 de l'audit du 25/08) ──────────────────────── Un site autonome ne recevait QUE sa feuille. Il devait donc habiller lui-même du HTML qu'il ne possède pas — et deux cabinets avaient déjà écrit DEUX liens d'évitement différents, l'un posant un fond couleur de page sans déclarer de couleur de texte. Le mécanisme d'accessibilité le plus normé du web divergeait au bout de deux sites, et rien ne contrôlait son contraste. C'est l'article III, règle d'or, pris à revers : « ce qui a un effet SEO, légal ou d'accessibilité vit HORS de sites/ ». Ce fichier l'y remet. ── CE QU'IL NE FAIT PAS, ET C'EST AUSSI IMPORTANT ─────────────────────── Il ne porte NI `.header`, NI `.footer`, NI `.nav`, NI `.container`, NI la typographie. Ces surfaces-là sont le DESSIN du cabinet : les mutualiser ferait ressembler deux sites l'un à l'autre, ce que tout le pivot existe pour empêcher. La duplication qui reste entre deux feuilles sur ces classes n'est pas une dette — c'est de la diversité, et elle se paie. La frontière est donc : **fonctionnel et normé ici, esthétique chez le cabinet.** Si l'on hésite, la question à poser est « un défaut ici se voit-il en accessibilité ou seulement à l'œil ? ». Il ne porte pas non plus de bloc `prefers-reduced-motion: reduce`. Servi AVANT la feuille du site, il serait écrasé par la moindre transition déclarée hors media query — un garde-fou inopérant est pire qu'absent. Le mouvement reste contrôlé chez le cabinet, où le harnais le vérifie et BLOQUE (contrôle « a11y-css »). ── SURCHARGE ──────────────────────────────────────────────────────────── La feuille du cabinet est servie APRÈS celle-ci : à spécificité égale, il gagne toujours. Rien ici n'emploie `!important`, et rien ne doit en employer — ce serait reprendre d'une main ce que la surcharge donne. ───────────────────────────────────────────────────────────────────────── */ /* Modèle de boîte. Les trois feuilles du dépôt le posaient à l'identique : c'est un socle, pas un choix. */ *, *::before, *::after { box-sizing: border-box; } /* Anneau de focus par DÉFAUT. Un cabinet qui veut le sien le redéclare — les deux sites actuels le font, avec des épaisseurs différentes, et c'est légitime. Ce qui ne l'est pas, c'est qu'il MANQUE : une navigation au clavier sans focus visible est inutilisable, et l'oubli ne se voit pas à la souris. */ :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } /* ── Lien d'évitement ───────────────────────────────────────────────────── Le premier élément du , rendu par le layout sur toutes les pages. Hors écran tant qu'il n'a pas le focus, visible dès qu'il l'a. `transform` et non `left: -9999px` : un élément déplacé au négatif reste dans le flux de lecture de certaines aides techniques, et surtout il traîne une zone cliquable à gauche du document. La translation le sort proprement sans le retirer de l'ordre de tabulation. Les couleurs viennent du vocabulaire FERMÉ, donc du contrôle de contraste du harnais : `--color-primary` et `--color-on-primary` forment une paire vérifiée AA. C'est précisément ce qu'un habillage écrit par cabinet ne garantissait pas. */ .skip-link { position: absolute; top: 0; left: 0; z-index: 100; padding: 0.75rem 1rem; background: var(--color-primary); color: var(--color-on-primary); transform: translateY(-150%); } .skip-link:focus { transform: translateY(0); }