/* ============================================================ TOUS ALLUMÉS — MODE ACCESSIBLE (malvoyants / basse vision) ------------------------------------------------------------ Interrupteur unique dans le header : PARTI PRIS — accessible ne veut pas dire fade. Le thème n'est pas un thème « à part » : c'est la charte retournée. Le fond prend l'encre (#141310), le texte prend le papier (#f2eee4) — deux couleurs déjà présentes dans style.css. Le bleu Klein est éclairci juste ce qu'il faut pour rester lisible sur fond sombre, l'orange aussi. On garde : l'Archivo Black en capitales, les étiquettes Space Mono, l'italique Instrument Serif dans les très gros titres, les ombres portées franches, les filets de 2 px, l'astérisque partout. On enlève : le mouvement (rotation, défilé, apparitions), le texte en contour vide, les gris trop faibles, les corps de texte minuscules, l'italique aux petites tailles. Contrastes mesurés sur le fond principal : texte principal #f2eee4 .... 16,0:1 texte secondaire #c9c4b8 .... 10,7:1 bleu #a2a9ff .... 8,5:1 orange #ff8f5e .... 8,3:1 filets #8a8375 .... 4,9:1 (3:1 requis hors texte) Le seuil WCAG AAA est de 7:1. On est au-dessus partout. ============================================================ */ /* ============================================================ PARTIE A — AMÉLIORATIONS ACTIVES EN PERMANENCE (pas seulement en mode accessible) ============================================================ */ /* ---------- A.1 Lien d'évitement ---------- Premier élément tabulable de chaque page : il permet de sauter la navigation pour aller droit au contenu. */ .saut-contenu { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--encre); color: var(--papier); font-family: var(--font-mono); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; padding: .9rem 1.4rem; border: var(--ligne); border-top: none; border-left: none; text-decoration: none !important; } .saut-contenu:focus { left: 0; outline: 3px solid var(--bleu); outline-offset: 2px; } /* ---------- A.2 Focus clavier visible partout ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; } /* ---------- A.3 Respect du réglage système « réduire les animations » ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .aster-deco { animation: none; } .marquee-piste { animation: none; transform: none; } .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { transition-duration: .01ms !important; } } /* ============================================================ PARTIE B — LA BARRE D'EN-TÊTE Vaut pour les trois thèmes. ============================================================ */ /* ---------- B.1 Un alignement par construction ---------- Tous les éléments cliquables de la barre partagent une même hauteur, et centrent leur texte dedans. Résultat : leurs milieux coïncident, quel que soit le thème et quelle que soit la taille des libellés. Le point délicat : un en inline-flex posé dans un
  • se cale sur la ligne de base du li, qui garde de la place pour les jambages en dessous — d'où un décalage de 8 px des liens du menu par rapport aux boutons. On rend donc le
  • lui-même flex : le lien devient un enfant de flex, et la ligne de base ne s'en mêle plus. */ :root { --h-controle: 36px; } .nav-inner { align-items: center; } nav ul { align-items: stretch; } nav ul li { display: flex; align-items: center; } nav ul li > a, .a11y-btn, .retro-btn { height: var(--h-controle); display: inline-flex; align-items: center; justify-content: center; } /* Le « Menu » n'existe qu'en petit écran : on lui donne la hauteur commune sans toucher à son display, sinon la règle ci-dessus le ferait réapparaître sur grand écran. */ .burger { height: var(--h-controle); align-items: center; justify-content: center; } /* Respiration entre le groupe « bascules de thème » et le menu : sans elle, le bouton se colle à « Accueil » et on lit une seule série d'items au lieu de deux groupes distincts. */ .nav-inner nav { margin-left: 1rem; } /* Au doigt, on remonte la cible à 44 px. */ @media (max-width: 860px) { :root { --h-controle: 44px; } .burger { display: inline-flex; } /* Le menu déroulant reprend la main : les liens y sont des blocs pleine largeur, pas des puces alignées. */ nav ul li { display: block; } nav ul li > a { height: auto; min-height: var(--h-controle); display: flex; } } /* ---------- B.2 Le bouton d'accessibilité ---------- Volontairement discret : une puce à filet fin, sans aplat ni ombre portée. Il ne doit pas peser plus lourd que « Rejoindre », qui reste l'action principale de la barre. L'état ne s'écrit pas (« ON / OFF » ajoutait 45 px de large pour redire ce que la page entière montre déjà) : le bouton est cerclé quand le mode est éteint, plein quand il est allumé. aria-pressed le dit aux lecteurs d'écran. */ .a11y-btn { margin-left: auto; gap: .45rem; padding: 0 .8rem; font-family: var(--font-mono); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: transparent; color: var(--encre-2); border: 1px solid var(--encre-2); cursor: pointer; /* Évite le zoom au double-tap quand on martèle le bouton (easter egg) */ touch-action: manipulation; user-select: none; transition: background .15s, color .15s, border-color .15s; } .a11y-btn:hover { background: var(--encre); border-color: var(--encre); color: var(--papier); } .a11y-btn .ico { font-family: var(--font-serif); font-size: 1.15rem; line-height: 0; color: var(--bleu); } .a11y-btn:hover .ico { color: var(--papier); } /* ---------- B.3 Pliage en petit écran ---------- Sous 620 px la barre ne tient plus sur une ligne : logo + bouton + « Menu » débordaient, et c'est le « Menu » qui sortait du cadre. Elle se plie donc en deux — logo et Menu en haut, la bascule (et, si elle est là, la pastille 90's) en dessous. On ne rapetisse PAS le bouton pour le faire rentrer : un bouton réduit à un pictogramme est précisément ce qu'un utilisateur malvoyant ne peut pas identifier. Le libellé reste entier. */ @media (max-width: 620px) { .nav-inner { flex-wrap: wrap; row-gap: .6rem; } .a11y-btn { order: 3; flex: 1 1 58%; /* assez large pour forcer le pliage, et remplit la ligne quand il y est seul */ margin-left: 0; } } @media (max-width: 420px) { .nav-inner { padding-left: .9rem; padding-right: .9rem; gap: .6rem; } .a11y-btn { letter-spacing: .04em; } } /* Entre 861 et 1010 px le menu déroulant a disparu (le « burger » s'arrête à 860) mais la barre reste juste : le menu horizontal grossi du mode accessible, ou la pastille 90's en plus, sortaient du cadre. Même remède, sur cette tranche seulement. */ @media (min-width: 861px) and (max-width: 1010px) { /* En thème normal, il ne manquait qu'une poignée de pixels : on resserre les gouttières plutôt que de plier la barre. */ .nav-inner { gap: .8rem; } nav ul { gap: 1.15rem; } html.a11y .nav-inner, html.pastille-90 .nav-inner { flex-wrap: wrap; row-gap: .6rem; } html.a11y .a11y-btn, html.pastille-90 .a11y-btn { order: 3; flex: 0 1 auto; margin-left: 0; } } /* ---------- B.4 Zone d'annonce pour lecteurs d'écran ---------- */ .a11y-annonce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ============================================================ PARTIE C — LE MODE ACCESSIBLE ============================================================ */ /* ---------- C.1 La charte, retournée ---------- */ html.a11y { --papier: #141310; /* l'encre de la charte devient le fond */ --papier-2: #201d17; /* surfaces alternées / survol */ --encre: #f2eee4; /* le papier de la charte devient le texte */ --encre-2: #c9c4b8; /* déjà utilisé dans le pied de page — 10,7:1 */ --bleu: #a2a9ff; /* Klein éclairci pour tenir sur fond sombre */ --orange: #ff8f5e; --filet: #8a8375; /* filets secondaires */ --ligne: 2px solid #f2eee4; --ombre: 6px 6px 0 #a2a9ff; /* l'ombre franche passe en bleu */ scroll-behavior: auto; background: #141310; } /* ---------- C.2 Typographie : mêmes polices, plus de place ---------- On garde Archivo Black, Space Mono et Instrument Serif. Ce qui change : le corps, l'interlignage, la longueur de ligne et l'interlettrage — pas l'identité. */ html.a11y body { background: var(--papier); color: var(--encre); font-size: 1.22rem; /* ~ +16 % */ line-height: 1.75; letter-spacing: .012em; word-spacing: .05em; } /* Aération des paragraphes — cantonnée au contenu. Ces règles visaient « p, li, dd » sans distinction : le margin-bottom retombait sur les
  • du menu, qui décalaient d'un cran les liens par rapport aux boutons, et sur les
  • de la liste d'étapes, qui se décollaient de leur cadre. Les listes de ce site sont toutes structurelles (menu, pied de page, étapes) : seul le texte courant a besoin d'air. */ html.a11y main p, html.a11y main dd { margin-bottom: .85em; } html.a11y main p:last-child { margin-bottom: 0; } /* Longueur de ligne bornée : l'œil retrouve le début de la ligne suivante sans se perdre. Sur les étapes, c'est le bloc de texte qu'on borne, pas le
  • — qui porte la grille. */ html.a11y main p, html.a11y .etapes li > div { max-width: 64ch; } /* Les capitales sont conservées là où elles sont courtes (titres, étiquettes, boutons) : elles ne gênent que la lecture suivie, jamais un libellé de deux mots. En revanche on desserre l'interlettrage, qui était poussé jusqu'à .14em, et on redresse l'interlignage des titres. */ html.a11y h1, html.a11y h2, html.a11y h3 { line-height: 1.05; letter-spacing: 0; } html.a11y h1 { font-size: clamp(2.6rem, 7.5vw, 5.4rem); margin-bottom: 1.6rem; max-width: 17ch; } html.a11y h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); margin-bottom: 1.6rem; } html.a11y h3 { font-size: 1.2rem; line-height: 1.25; margin-bottom: .55rem; } html.a11y h4 { font-size: 1rem; letter-spacing: .1em; color: var(--encre-2); } /* L'italique Instrument Serif ne survit QUE dans les très gros titres, où sa taille compense ses déliés fins. Partout ailleurs (citations, sources), on repasse en Archivo droit. */ html.a11y h1 .serif, html.a11y h2 .serif { font-family: var(--font-serif); font-style: italic; font-size: 1.06em; } html.a11y .citation p.texte, html.a11y .serif:not(h1 .serif):not(h2 .serif) { font-family: var(--font-body); font-style: normal; } /* Étiquettes Space Mono : conservées, mais lisibles. .78rem → .95rem, et .14em d'interlettrage → .08em. */ html.a11y .section-label, html.a11y .hero .meta, html.a11y nav a, html.a11y .carte .index, html.a11y .membre .role, html.a11y .pole .domaine, html.a11y .citation .source, html.a11y .footer-bas, html.a11y .formulaire label, html.a11y .note-configuration, html.a11y .marquee-piste { font-size: 1rem; letter-spacing: .08em; } /* ---------- C.3 Liens : toujours soulignés ---------- */ html.a11y a { color: var(--bleu); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } html.a11y a:hover { color: var(--encre); text-decoration-thickness: 3px; } html.a11y ::selection { background: var(--bleu); color: var(--papier); } /* ---------- C.4 Le mouvement, et lui seul, disparaît ---------- Les ombres portées et les astérisques restent : ils ne gênent personne, et c'est eux qui font le site. */ html.a11y *, html.a11y *::before, html.a11y *::after { animation: none !important; transition: none !important; } html.a11y .reveal { opacity: 1 !important; transform: none !important; } /* Rien ne se déplace sous le curseur : l'ombre grandit, le bloc ne bouge pas. Une cible qui recule est un piège en basse vision. */ html.a11y .btn:hover, html.a11y .btn:active, html.a11y nav a.cta:hover, html.a11y nav a.cta:active { transform: none; } /* L'astérisque du hero : immobile, et toujours là. */ html.a11y .aster-deco { animation: none; color: var(--bleu); opacity: .85; } /* Le bandeau ne défile plus — il se range sur plusieurs lignes, centré. On lit enfin ce qu'il contient. */ html.a11y .marquee { background: var(--papier-2); color: var(--encre); border-top: var(--ligne); border-bottom: var(--ligne); padding: 1rem 1.4rem; } html.a11y .marquee-piste { width: auto; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; white-space: normal; transform: none; } html.a11y .marquee-piste .ast { color: var(--orange); } /* Le HTML duplique la liste pour que le défilé boucle sans couture. Arrêté, il l'afficherait deux fois : on masque le second jeu. */ html.a11y .marquee-piste > *:nth-child(n+13) { display: none; } /* ---------- C.5 Header ---------- La hauteur commune passe à 46 px : le texte est plus gros, les cibles suivent. Tout le reste de l'alignement est déjà réglé en B.1, il n'y a rien à réajuster ici. */ html.a11y { --h-controle: 46px; } html.a11y header { background: var(--papier); border-bottom: var(--ligne); } html.a11y .logo { color: var(--encre); font-size: 1.15rem; } html.a11y .logo .ast { color: var(--bleu); } html.a11y .logo:hover .ast { transform: none; } html.a11y nav ul { gap: 1.4rem; } html.a11y nav a { color: var(--encre); text-decoration: none; border-bottom: 2px solid transparent; padding: 0; } html.a11y nav a:hover { color: var(--bleu); border-bottom-color: var(--bleu); } html.a11y nav a.active { color: var(--bleu); border-bottom-color: var(--bleu); } html.a11y nav a.cta { background: var(--bleu); color: var(--papier); border: 2px solid var(--bleu); box-shadow: none; padding: 0 1.1rem; } html.a11y nav a.cta:hover { background: var(--encre); border-color: var(--encre); color: var(--papier); } html.a11y .burger { color: var(--encre); border: 2px solid var(--encre); font-size: 1rem; padding: 0 .8rem; } html.a11y nav { background: var(--papier); border-bottom-color: var(--encre); } /* Le bouton, une fois le mode actif : plein, donc « allumé ». Même gabarit que « Rejoindre », pas plus lourd. */ html.a11y .a11y-btn { background: var(--bleu); color: var(--papier); border: 2px solid var(--bleu); font-size: 1rem; letter-spacing: .04em; padding: 0 1rem; } html.a11y .a11y-btn .ico { color: var(--papier); } html.a11y .a11y-btn:hover { background: var(--encre); border-color: var(--encre); color: var(--papier); } html.a11y .a11y-btn:hover .ico { color: var(--papier); } /* ---------- C.6 Hero ---------- */ html.a11y .hero { padding: 4rem 0 3.4rem; } html.a11y .hero .meta { color: var(--encre-2); } html.a11y .hero .meta .sep { color: var(--bleu); } html.a11y .hero p.chapo { font-size: 1.3rem; max-width: 60ch; color: var(--encre); } /* Le surlignage dégradé était trop pâle sur fond sombre : on garde l'idée du surlignage, en plein. */ html.a11y .hero p.chapo strong { background: var(--bleu); color: var(--papier); padding: 0 .25em; } /* ---------- C.7 Étiquettes de section ---------- */ html.a11y .section-label { color: var(--encre-2); border-top: var(--ligne); } html.a11y .section-label .num { color: var(--bleu); } html.a11y .section-label::after { border-top-color: var(--filet); opacity: .8; } /* ---------- C.8 Boutons ---------- */ html.a11y .btn { background: var(--papier); color: var(--encre); border: var(--ligne); box-shadow: var(--ombre); font-size: 1.05rem; letter-spacing: .06em; padding: 1rem 1.7rem; min-height: 48px; } html.a11y .btn:hover { background: var(--bleu); color: var(--papier); box-shadow: 8px 8px 0 var(--encre); } html.a11y .btn-plein { background: var(--bleu); color: var(--papier); box-shadow: 6px 6px 0 var(--encre); } html.a11y .btn-plein:hover { background: var(--encre); color: var(--papier); } html.a11y .btn-orange { background: var(--orange); color: var(--papier); box-shadow: 6px 6px 0 var(--encre); } html.a11y .btn-orange:hover { background: var(--encre); color: var(--papier); } /* ---------- C.9 Grilles & cartes ---------- */ /* La grille : filets clairs entre les cartes, mais la case vide de fin de grille reste sombre (avec une gouttière colorée, elle formait un gros aplat beige qui n'avait aucun sens). */ html.a11y .grille { border: var(--ligne); background: var(--papier-2); gap: 0; } html.a11y .grille .carte { border: 1px solid var(--filet); } html.a11y .carte { background: var(--papier); } html.a11y .carte:hover { background: var(--papier-2); } html.a11y .carte p { color: var(--encre-2); font-size: 1.08rem; } html.a11y .carte .index { color: var(--bleu); } /* L'astérisque des cartes reste, en plus contrasté. */ html.a11y .carte .glyphe { color: var(--encre); opacity: .45; } html.a11y .carte:hover .glyphe { color: var(--bleu); opacity: 1; transform: none; } html.a11y .carte.inverse { background: var(--bleu); color: var(--papier); } html.a11y .carte.inverse:hover { background: var(--encre); } html.a11y .carte.inverse h3, html.a11y .carte.inverse p, html.a11y .carte.inverse .index { color: var(--papier); } html.a11y .carte.inverse .glyphe { color: var(--papier); opacity: .6; } html.a11y a.carte { color: var(--encre); text-decoration: none; } html.a11y a.carte.inverse h3 { text-decoration: underline; text-underline-offset: 4px; } /* ---------- C.10 Bandeau d'appel ---------- */ html.a11y .bandeau { background: var(--bleu); color: var(--papier); border: var(--ligne); box-shadow: 6px 6px 0 var(--encre); } html.a11y .bandeau h2 { color: var(--papier); } html.a11y .bandeau p { color: var(--papier); } html.a11y .bandeau .btn { background: var(--papier); color: var(--encre); box-shadow: 6px 6px 0 rgba(0,0,0,.55); } html.a11y .bandeau .btn:hover { background: var(--encre); color: var(--papier); box-shadow: 8px 8px 0 rgba(0,0,0,.55); } /* ---------- C.11 Pôles (page activités) ---------- */ html.a11y .poles { border: var(--ligne); } html.a11y .pole { background: var(--papier); border-bottom: 1px solid var(--filet); } html.a11y .pole:hover { background: var(--papier-2); } html.a11y .pole p { color: var(--encre-2); max-width: 64ch; } html.a11y .pole .domaine { color: var(--encre); border: 1px solid var(--filet); padding: .3rem .7rem; } /* Les numéros étaient en texte creux (contour seul, remplissage transparent) : illisible dès qu'on change de fond. On remplit. */ html.a11y .pole .num, html.a11y .etapes li::before { color: var(--bleu) !important; -webkit-text-stroke: 0 !important; } /* ---------- C.12 Citation ---------- */ html.a11y .citation { background: var(--papier-2); border: var(--ligne); border-left: 10px solid var(--bleu); box-shadow: var(--ombre); } html.a11y .citation p.texte { font-size: 1.35rem; line-height: 1.6; } html.a11y .citation .source { color: var(--encre-2); } /* ---------- C.13 Équipe ---------- */ html.a11y .membre .initiales { background: var(--papier-2); border: var(--ligne); box-shadow: 4px 4px 0 var(--bleu); color: var(--encre); } html.a11y .membre .role { color: var(--encre-2); } /* ---------- C.14 Tableaux ---------- */ html.a11y .fiche { background: var(--papier); border: var(--ligne); font-size: 1.05rem; } html.a11y .fiche th, html.a11y .fiche td { border-bottom: 1px solid var(--filet); color: var(--encre); padding: .85rem 1.2rem; } html.a11y .fiche th { font-size: 1rem; letter-spacing: .08em; border-right: 1px solid var(--filet); } html.a11y .fiche tr:hover td { background: var(--papier-2); } /* ---------- C.15 Étapes ---------- */ html.a11y .etapes { border: var(--ligne); } html.a11y .etapes li { background: var(--papier); border-bottom: 1px solid var(--filet); } html.a11y .etapes li:hover { background: var(--papier-2); } /* ---------- C.16 HelloAsso ---------- */ html.a11y .helloasso-cadre { background: var(--papier); border: var(--ligne); box-shadow: var(--ombre); } html.a11y .helloasso-cadre::before { background: var(--papier); color: var(--bleu); font-size: 1rem; } html.a11y .helloasso-attente .pictogramme { color: var(--bleu); } html.a11y .note-configuration { color: var(--encre-2); border-top-color: var(--filet); } html.a11y .note-configuration code { background: var(--bleu); color: var(--papier); } /* ---------- C.17 Contact ---------- */ html.a11y .contact-carte { background: var(--papier); border: var(--ligne); box-shadow: var(--ombre); } html.a11y .contact-carte + .contact-carte { box-shadow: 6px 6px 0 var(--encre); } html.a11y .gros-mail a { color: var(--encre); } html.a11y .gros-mail a:hover { color: var(--bleu); } /* ---------- C.18 Formulaires ---------- */ html.a11y .formulaire { background: var(--papier); border: var(--ligne); box-shadow: var(--ombre); } html.a11y .formulaire label { color: var(--encre); margin-bottom: .5rem; } html.a11y .formulaire input[type="text"], html.a11y .formulaire input[type="email"], html.a11y .formulaire textarea { background: var(--papier-2); color: var(--encre); border: var(--ligne); font-size: 1.1rem; min-height: 48px; } html.a11y .formulaire input:focus, html.a11y .formulaire textarea:focus { background: var(--papier-2); outline: 3px solid var(--bleu); outline-offset: 0; } html.a11y .formulaire ::placeholder { color: var(--encre-2); opacity: .75; } html.a11y .form-statut { font-size: 1rem; } html.a11y .form-statut.ok { color: var(--bleu); } html.a11y .form-statut.erreur { color: var(--orange); } /* ---------- C.19 Pied de page ---------- */ html.a11y footer { background: var(--papier-2); color: var(--encre); border-top: 6px solid var(--bleu); } /* Sélecteur volontairement long : « html.a11y footer p » plus bas l'emporterait sinon sur le lettrage géant du pied de page. */ html.a11y footer .footer-wordmark { color: var(--encre); font-size: clamp(2.2rem, 8vw, 5.5rem); line-height: .95; max-width: none; } html.a11y footer .footer-wordmark .ast { color: var(--bleu); } html.a11y footer h4 { color: var(--encre-2); } html.a11y footer p { color: var(--encre-2); font-size: 1.05rem; } html.a11y footer a { color: var(--bleu); } html.a11y footer a:hover { color: var(--orange); } html.a11y footer li { margin-bottom: .55rem; } html.a11y .footer-bas { color: var(--encre-2); border-top: 1px solid var(--filet); } /* ---------- C.20 Lien d'évitement ---------- */ html.a11y .saut-contenu { background: var(--bleu); color: var(--papier); font-size: 1rem; } /* ---------- C.21 Neutralisation des styles écrits en dur ---------- Plusieurs pages fixent des tailles dans l'attribut style (« font-size:.76rem » pour les mentions légales). Un style inline l'emporte sur la feuille : seul !important le contre. Le sélecteur ne vise QUE les valeurs sous 1 rem — celles qui commencent par un point. */ html.a11y [style*="font-size:."] { font-size: 1.05rem !important; } html.a11y [style*="letter-spacing:.14em"] { letter-spacing: .08em !important; } html.a11y [style*="max-width:72ch"], html.a11y [style*="max-width:68ch"] { max-width: 64ch !important; } /* Le code promo était en orange sur clair (2,6:1) ; ici il tient. */ html.a11y [style*="color:var(--orange)"] { color: var(--orange) !important; } /* ---------- C.22 Impression ---------- */ @media print { html.a11y, html.a11y body { background: #fff; color: #000; } .a11y-btn, .saut-contenu { display: none; } }