/* ================================================================ Pluriel A11y — pluriel-a11y.css Task 3 (mode sombre) + Task 4 Step 2 (application daltonisme) ================================================================ */ /* ============ Accessibilité daltonisme — soulignement conditionnel des liens ============ WCAG 1.4.1 « Use of Color » : un lien dans un bloc de texte ne doit pas être distingué par la seule couleur. Les liens en prose du thème sont en petrol sans soulignement (contraste ~1:1 avec le texte). Par choix : on ne souligne QUE lorsqu'un mode daltonisme est activé par le visiteur (attribut data-cvd présent sur ) — l'affichage par défaut reste inchangé. Ciblé sur les liens en

(prose) ; boutons/CTA/tags/badges/hero exclus. */ html[data-cvd] body p a:not([class*="btn"]):not([class*="cta"]):not([class*="tag"]):not([class*="badge"]):not([class*="hero"]):not([class*="button"]) { text-decoration: underline !important; text-underline-offset: 2px; } /* ============ Mode sombre curé (petrol-navy) ============ Remplace l'ancien mode sombre par filtre global (invert+hue-rotate) par des surcharges CSS explicites : plus de double-inversion des médias, plus de souci avec les éléments position:fixed. */ html[data-theme="dark"]{ color-scheme: dark; background:#0f1620 !important; } html[data-theme="dark"] body{ background:#0f1620 !important; color:#c7d0d8 !important; } html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] h4,html[data-theme="dark"] h5,html[data-theme="dark"] h6{ color:#eef3f6 !important; } html[data-theme="dark"] a{ color:#8fd3e0 !important; } html[data-theme="dark"] a:hover,html[data-theme="dark"] a:focus{ color:#b7e4ec !important; } /* Sections claires du design test-rg -> fond page */ html[data-theme="dark"] .test-rg-aLaUne, html[data-theme="dark"] .test-rg-groupes, html[data-theme="dark"] .test-rg-partners, html[data-theme="dark"] .test-rg-reseau, html[data-theme="dark"] .test-rg-reseau-cher, html[data-theme="dark"] .test-rg-comite{ background:#0f1620 !important; color:#c7d0d8 !important; } /* Cartes -> surface */ html[data-theme="dark"] .test-rg-card, html[data-theme="dark"] .test-rg-congres__card-actes, html[data-theme="dark"] .card, html[data-theme="dark"] .panel, html[data-theme="dark"] .well{ background:#18242e !important; color:#c7d0d8 !important; border-color:#26343f !important; } html[data-theme="dark"] .test-rg-card__image{ background:#101922 !important; } /* Sections déjà sombres -> palette */ html[data-theme="dark"] .test-rg-congres{ background:#0b2a31 !important; } /* .test-rg-header__nav = menu off-canvas sur MOBILE (fond sombre nécessaire). Sur DESKTOP c'est le conteneur borné du menu -> ne PAS l'assombrir, sinon rectangle sombre dans le header. D'où le scope mobile uniquement. */ @media (max-width: 900px){ html[data-theme="dark"] .test-rg-header__nav{ background:#0b2a31 !important; } } /* En-tête sticky : - Pages internes (en-tête blanc par défaut) -> sombre. - Home au TOP -> on NE touche PAS (header transparent = le slideshow du hero reste visible ; sinon un fond solide masque les images qui défilent). - État défilé (is-scrolled), toutes pages -> petrol sombre translucide. */ html[data-theme="dark"] body:not(.home) header.test-rg-header{ background:#0b2a31 !important; } html[data-theme="dark"] header.test-rg-header.is-scrolled, html[data-theme="dark"] #test-rg-page .test-rg-header.is-scrolled{ background: rgba(11,42,49,.95) !important; } /* Sous-menus déroulants du header en mode sombre : fond sombre + liens lisibles (les liens ont une couleur petrol foncée codée en dur -> illisible sur sombre). */ html[data-theme="dark"] .test-rg-header__nav .sub-menu, html[data-theme="dark"] .test-rg-header__nav ul ul { background-color:#18242e !important; border-color:#26343f !important; } html[data-theme="dark"] .test-rg-header__nav .sub-menu a, html[data-theme="dark"] .test-rg-header__nav ul ul a { color:#d9e0e6 !important; } html[data-theme="dark"] .test-rg-header__nav .sub-menu a:hover, html[data-theme="dark"] .test-rg-header__nav .sub-menu a:focus, html[data-theme="dark"] .test-rg-header__nav ul ul a:hover, html[data-theme="dark"] .test-rg-header__nav ul ul a:focus { color:#8fd3e0 !important; background-color:#22303a !important; } /* Boutons blancs -> surface + accent */ html[data-theme="dark"] .test-rg-btn, html[data-theme="dark"] a.test-rg-hero__cta, html[data-theme="dark"] .btn, html[data-theme="dark"] button.btn, html[data-theme="dark"] .btn-default{ background:#18242e !important; color:#8fd3e0 !important; border-color:#2a3a44 !important; } /* Footer -> fond profond */ html[data-theme="dark"] footer, html[data-theme="dark"] .container-bg-gray, html[data-theme="dark"] .container-bg-blue, html[data-theme="dark"] .obligation-link-footer-container{ background:#0b1118 !important; color:#aeb9c2 !important; } html[data-theme="dark"] footer a,html[data-theme="dark"] .obligation-link-footer-container a{ color:#8fd3e0 !important; } /* Barre mobile fixe */ html[data-theme="dark"] .pl-botbar{ background:rgba(11,17,24,.97) !important; border-top-color:#22303a !important; } html[data-theme="dark"] .pl-botbar a,html[data-theme="dark"] .pl-botbar button{ color:#c7d0d8 !important; } /* Formulaires */ html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select,html[data-theme="dark"] .form-control{ background:#101922 !important; color:#e6ecf0 !important; border-color:#2a3a44 !important; } html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{ color:#8494a0 !important; } /* Anciennes surfaces header.php (pages non refondues, au cas où) */ html[data-theme="dark"] .header-container,html[data-theme="dark"] .header-fuce-fiuc,html[data-theme="dark"] #headerScroll{ background:#0b2a31 !important; } /* Séparateurs / tableaux */ html[data-theme="dark"] hr{ border-color:#26343f !important; } html[data-theme="dark"] table,html[data-theme="dark"] td,html[data-theme="dark"] th{ border-color:#26343f !important; } /* ---- Filet large mode sombre : familles de classes du thème (test-rg + modules kai) ---- Le thème mélange plusieurs familles de classes selon les templates (test-rg-* sur les pages refondues ; chercheur-*/ressource-*/groupe-*/publication-*/… sur les fiches et modules kai). On neutralise les FONDS clairs de ces conteneurs (page ou surface élevée), puis on force un TEXTE clair dans la zone de contenu (beaucoup de textes ont une couleur sombre codée en dur). Hero, badges, boutons, icônes et barre mobile sont préservés. */ html[data-theme="dark"] main, html[data-theme="dark"] #content, html[data-theme="dark"] .content, html[data-theme="dark"] [class*="test-rg-"]:not([class*="hero"]):not([class*="badge"]):not([class*="card"]):not([class*="person"]):not([class*="item"]):not([class*="__media"]):not([class*="__image"]):not([class*="__ph"]):not([class*="__tag"]):not([class*="btn"]), html[data-theme="dark"] [class*="chercheur"]:not([class*="card"]):not([class*="btn"]):not([class*="tag"]), html[data-theme="dark"] [class*="ressource"]:not([class*="card"]):not([class*="btn"]):not([class*="tag"]), html[data-theme="dark"] [class*="groupe"]:not([class*="card"]), html[data-theme="dark"] [class*="kai-"]:not([class*="card"]):not([class*="btn"]), html[data-theme="dark"] [class*="publication"]:not([class*="card"]), html[data-theme="dark"] [class*="thematique"]:not([class*="card"]), html[data-theme="dark"] [class*="recension"]:not([class*="card"]), html[data-theme="dark"] [class*="formation"]:not([class*="card"]), html[data-theme="dark"] [class*="congres"]:not([class*="card"]), html[data-theme="dark"] [class*="universite"]:not([class*="card"]), html[data-theme="dark"] .pum-container, html[data-theme="dark"] .pum-content, html[data-theme="dark"] [class*="pl-"]:not([class*="botbar"]):not([class*="hero"]){ background-color:#0f1620 !important; } /* Surfaces élevées : cartes, personnes, médias, boutons-liens, tags */ html[data-theme="dark"] [class*="card"]:not([class*="badge"]), html[data-theme="dark"] [class*="person"], html[data-theme="dark"] [class*="__media"], html[data-theme="dark"] [class*="__image"], html[data-theme="dark"] [class*="__ph"], html[data-theme="dark"] [class*="__tag"], html[data-theme="dark"] [class*="link-btn"], html[data-theme="dark"] [class*="tag-link"], html[data-theme="dark"] .sub-menu{ background-color:#18242e !important; border-color:#26343f !important; } html[data-theme="dark"] [class*="link-btn"], html[data-theme="dark"] [class*="tag-link"]{ color:#8fd3e0 !important; } /* Texte clair forcé dans la zone de contenu (couleurs sombres codées en dur). Liens (cyan), boutons, badges, icônes et SVG exclus pour préserver les accents. */ html[data-theme="dark"] main *:not(a):not(button):not(i):not(svg):not(path):not([class*="badge"]):not([class*="btn"]), html[data-theme="dark"] #content *:not(a):not(button):not(i):not(svg):not(path):not([class*="badge"]):not([class*="btn"]), html[data-theme="dark"] [class*="chercheur"] *:not(a):not(button):not(i):not(svg):not(path):not([class*="badge"]):not([class*="btn"]), html[data-theme="dark"] [class*="ressource"] *:not(a):not(button):not(i):not(svg):not(path):not([class*="badge"]):not([class*="btn"]), html[data-theme="dark"] [class*="groupe"] *:not(a):not(button):not(i):not(svg):not(path):not([class*="badge"]):not([class*="btn"]), html[data-theme="dark"] [class*="test-rg-"]:not([class*="hero"]) *:not(a):not(button):not(i):not(svg):not(path):not([class*="badge"]):not([class*="btn"]), html[data-theme="dark"] .pum-content *:not(a):not(button):not(i):not(svg):not(path){ color:#c7d0d8 !important; } /* ============ Ajustement thème CLAIR (demande RG) ============ Fond crème (#f5f2eb) de la section « À la une » de l'accueil au lieu du blanc. Scopé au thème clair (le mode sombre garde son fond sombre). Spécificité à ID pour battre la règle du thème `#test-rg-page .test-rg-aLaUne`. */ html:not([data-theme="dark"]) #test-rg-page .test-rg-aLaUne, html:not([data-theme="dark"]) .test-rg-aLaUne { background-color:#f5f2eb !important; } /* ============ Contrôle a11y (header) ============ */ #pluriel-a11y { position: relative; display: inline-flex; align-items: center; } #pluriel-a11y-toggle { background: rgba(128,128,128,.18); border: 1px solid rgba(128,128,128,.38); border-radius: 6px; cursor: pointer; color: inherit; font-size: 18px; line-height: 1; padding: 5px 9px; display: inline-flex; align-items: center; justify-content: center; } #pluriel-a11y-toggle:hover, #pluriel-a11y-toggle:focus { background: rgba(128,128,128,.32); outline: none; } #pluriel-a11y-panel { position: absolute; top: 100%; right: 0; z-index: 9999; min-width: 220px; padding: 10px 12px; background: #fff; color: #222; border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.18); display: none; } /* ============ Placement — injecté par wp_footer, repositionné par JS ============ pluriel-a11y.js déplace #pluriel-a11y depuis la fin du vers le sélecteur de langue ou le header visible (classe --inheader), ou le laisse en position fixe si aucun ancrage n'est trouvé (classe --fixed). Le panneau (#pluriel-a11y-panel, position: absolute ci-dessus) reste correctement positionné dans les deux cas car #pluriel-a11y garde toujours une position relative ou fixed (contexte de positionnement pour l'enfant absolute). */ #pluriel-a11y.pluriel-a11y--fixed { position: fixed; top: 8px; right: 8px; z-index: 10000; } #pluriel-a11y.pluriel-a11y--inheader { position: relative; display: inline-flex; align-items: center; vertical-align: middle; margin: 0 8px; } #pluriel-a11y-panel[data-open="true"] { display: block; } .pluriel-a11y-row { display: flex; flex-wrap: wrap; gap: 4px; } /* Spécificité DOUBLE ID (#pluriel-a11y #pluriel-a11y-panel) + !important : le contrôle est injecté dans .test-rg-header__nav, qui force color:#fff sur ses descendants avec une spécificité élevée (une règle à simple ID ne suffisait pas → texte blanc sur fond clair = illisible, cf. boutons inactifs en clair). */ #pluriel-a11y #pluriel-a11y-panel h5 { margin: 8px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing:.03em; color:#333 !important; } #pluriel-a11y #pluriel-a11y-panel .pluriel-a11y-row button { border: 1px solid #bbb !important; background: #f4f4f4 !important; color: #222 !important; border-radius: 4px; padding: 4px 8px; font-size: 12px; cursor: pointer; text-shadow: none !important; /* retire l'ombre gaufrée héritée du thème */ transition: background-color .18s ease, color .18s ease, border-color .18s ease !important; } #pluriel-a11y #pluriel-a11y-panel .pluriel-a11y-row button[aria-pressed="true"] { background: #0b3a5b !important; color: #fff !important; border-color: #0b3a5b !important; } /* Survol sobre (n'affecte pas l'option déjà active) */ #pluriel-a11y #pluriel-a11y-panel .pluriel-a11y-row button:not([aria-pressed="true"]):hover { background: #e7edf1 !important; border-color: #9fb2bd !important; } html[data-theme="dark"] #pluriel-a11y #pluriel-a11y-panel .pluriel-a11y-row button:not([aria-pressed="true"]):hover { background: #1e2b36 !important; border-color: #3a4c58 !important; } /* Bouton d'ouverture : transition douce + pas d'ombre de texte */ #pluriel-a11y-toggle { text-shadow: none !important; transition: background-color .18s ease, border-color .18s ease !important; } /* RTL (arabe) : panneau ancré à gauche */ html[dir="rtl"] #pluriel-a11y-panel, body.rtl #pluriel-a11y-panel { right: auto; left: 0; } /* ============ Panneau du contrôle en mode sombre curé (double ID) ============ */ #pluriel-a11y #pluriel-a11y-panel { } html[data-theme="dark"] #pluriel-a11y #pluriel-a11y-panel{ background:#18242e !important; color:#d9e0e6 !important; border-color:#2a3a44 !important; } html[data-theme="dark"] #pluriel-a11y #pluriel-a11y-panel h5{ color:#eef3f6 !important; } html[data-theme="dark"] #pluriel-a11y #pluriel-a11y-panel .pluriel-a11y-row button{ background:#101922 !important; color:#d9e0e6 !important; border-color:#2a3a44 !important; } html[data-theme="dark"] #pluriel-a11y #pluriel-a11y-panel .pluriel-a11y-row button[aria-pressed="true"]{ background:#8fd3e0 !important; color:#0f1620 !important; border-color:#8fd3e0 !important; } /* ============ Sélecteur de langues (desktop) — demandes RG ============ Sur desktop uniquement : masquer la langue courante (gain de place) et placer le contrôle « Options d'affichage » à droite, sur la même ligne que les langues. */ @media (min-width: 901px) { /* .test-rg-header__lang est en display:block -> le

et le contrôle passaient sur deux lignes ; on le met en flex pour aligner langues + contrôle sur une ligne. */ .test-rg-header__lang { display: flex !important; align-items: center; gap: 12px; } /* Masquer la langue courante */ .test-rg-header__lang ul li.is-active { display: none; } /* Éviter un séparateur « · » orphelin quand la langue courante est la première */ .test-rg-header__lang ul li.is-active:first-child + li::before { content: none !important; } } /* ============ Libellé du bouton + placement mobile ============ */ .pa11y-toggle-label{ display:none; } @media (max-width:900px){ #pluriel-a11y.pluriel-a11y--inheader{ display:block; width:100%; margin:10px 0 0; } /* Dans le menu mobile (fond petrol sombre) : chip clair bien lisible */ #pluriel-a11y-toggle{ width:100%; justify-content:flex-start; gap:10px; font-size:16px; padding:10px 12px; background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.30) !important; color:#fff !important; } .pa11y-toggle-label{ display:inline; } #pluriel-a11y-panel{ position:static; width:100%; min-width:0; margin-top:8px; box-shadow:none; right:auto; left:auto; } } /* ============ Daltonisme (application des filtres SVG) ============ Le filtre est posé sur (élément racine), PAS sur : un filter CSS crée un bloc conteneur pour les descendants position:fixed. Sur , cela désancrait les éléments fixes (barre mobile sticky qui « disparaît »). Chromium traite spécialement le filtre sur l'élément racine et conserve l'ancrage viewport des éléments fixed. Le mode sombre étant désormais curé (aucun filtre sur ), il n'y a pas de conflit de filtres. */ html[data-cvd="prota"] { filter: url("#pluriel-daltonize-prota"); } html[data-cvd="deuter"] { filter: url("#pluriel-daltonize-deuter"); } html[data-cvd="trita"] { filter: url("#pluriel-daltonize-trita"); } /* (Achromatopsie retirée : remplacée par le mode « Contraste renforcé » ci-dessous.) */ /* ============ Contraste renforcé (option « Confort de lecture ») ============ Toggle indépendant (data-contrast sur ), composable avec le daltonisme et le thème. Renforce le contraste du texte (pas un filtre -> pas de conflit avec les filtres daltonisme). Liens de prose soulignés + accentués. */ /* Thème clair */ html[data-contrast]:not([data-theme="dark"]) body, html[data-contrast]:not([data-theme="dark"]) p, html[data-contrast]:not([data-theme="dark"]) li, html[data-contrast]:not([data-theme="dark"]) dd, html[data-contrast]:not([data-theme="dark"]) dt, html[data-contrast]:not([data-theme="dark"]) td, html[data-contrast]:not([data-theme="dark"]) th, html[data-contrast]:not([data-theme="dark"]) label, html[data-contrast]:not([data-theme="dark"]) figcaption, html[data-contrast]:not([data-theme="dark"]) [class*="lede"], html[data-contrast]:not([data-theme="dark"]) [class*="excerpt"], html[data-contrast]:not([data-theme="dark"]) [class*="meta"] { color:#111 !important; } html[data-contrast]:not([data-theme="dark"]) h1, html[data-contrast]:not([data-theme="dark"]) h2, html[data-contrast]:not([data-theme="dark"]) h3, html[data-contrast]:not([data-theme="dark"]) h4, html[data-contrast]:not([data-theme="dark"]) h5, html[data-contrast]:not([data-theme="dark"]) h6 { color:#000 !important; } /* Thème sombre */ html[data-contrast][data-theme="dark"] body, html[data-contrast][data-theme="dark"] p, html[data-contrast][data-theme="dark"] li, html[data-contrast][data-theme="dark"] dd, html[data-contrast][data-theme="dark"] dt, html[data-contrast][data-theme="dark"] td, html[data-contrast][data-theme="dark"] th, html[data-contrast][data-theme="dark"] label, html[data-contrast][data-theme="dark"] figcaption, html[data-contrast][data-theme="dark"] [class*="lede"], html[data-contrast][data-theme="dark"] [class*="excerpt"], html[data-contrast][data-theme="dark"] [class*="meta"] { color:#f4f8fa !important; } html[data-contrast][data-theme="dark"] h1, html[data-contrast][data-theme="dark"] h2, html[data-contrast][data-theme="dark"] h3, html[data-contrast][data-theme="dark"] h4, html[data-contrast][data-theme="dark"] h5, html[data-contrast][data-theme="dark"] h6 { color:#ffffff !important; } /* Liens de prose : soulignés + accentués (les deux thèmes) */ html[data-contrast] p a, html[data-contrast] li a { text-decoration: underline !important; text-underline-offset: 2px; font-weight: 600 !important; } /* Champs de formulaire : bordure renforcée */ html[data-contrast] input, html[data-contrast] textarea, html[data-contrast] select { border-width: 2px !important; }