/** * accessibility.css — Rendu accessible aux daltoniens. * * TOUT ce fichier est inerte tant que ne porte pas data-color-mode="daltonien". * Aucune règle ne peut donc altérer le rendu standard. * * Il complète colorMode.js : celui-ci remappe les COULEURS (Okabe-Ito, sûres pour les * trois types de daltonisme), ce fichier ajoute les deux autres canaux — MOTIF et * CONTRASTE TEXTE — pour que l'information reste lisible même en niveaux de gris. * * Les motifs sont des background-image en noir semi-transparent : ils se superposent à * n'importe quelle couleur de fond, y compris celles posées en style inline par les vues. * L'attribut data-cvd est posé par ColorMode.attrs(). */ /* ------------------------------------------------------------------ * * 1. Motifs par type de vacation * ------------------------------------------------------------------ */ /* * Chaque motif est déclaré une seule fois dans une variable, puis APPLIQUÉ là où on le * veut. C'est ce qui permet à la carte de la vue semaine de ne pas se trâmer elle-même * (fond blanc) tout en trâmant sa barre latérale via ::before, qui hérite de la variable. */ html[data-color-mode="daltonien"] [data-cvd="hatch"] { --cvd-pattern: repeating-linear-gradient( 45deg, transparent 0 4px, rgba(0, 0, 0, 0.24) 4px 8px ); } html[data-color-mode="daltonien"] [data-cvd="vhatch"] { --cvd-pattern: repeating-linear-gradient( 90deg, transparent 0 4px, rgba(0, 0, 0, 0.24) 4px 7px ); } html[data-color-mode="daltonien"] [data-cvd="grid"] { --cvd-pattern: repeating-linear-gradient(45deg, transparent 0 4px, rgba(0, 0, 0, 0.22) 4px 7px), repeating-linear-gradient(-45deg, transparent 0 4px, rgba(0, 0, 0, 0.22) 4px 7px); } html[data-color-mode="daltonien"] [data-cvd="dots"] { --cvd-pattern: radial-gradient(rgba(0, 0, 0, 0.32) 1.4px, transparent 1.5px); --cvd-pattern-size: 7px 7px; } /* "solid" n'a volontairement pas de motif : c'est le repère de référence. */ /* * Application : sur les éléments effectivement REMPLIS de la couleur. Ceux marqués * data-cvd-edge ne portent la couleur que sur une bordure (fond blanc) : les remplir * masquerait leur texte — voir la note sur data-cvd-edge plus bas. * * !important est ici indispensable, pas défensif : la plupart des vues posent la couleur * avec le RACCOURCI `style="background: #xxx"`, qui réinitialise background-image à none. * Une déclaration inline l'emporterait sur cette règle et le motif disparaîtrait * silencieusement — c'est ce qui arrivait aux vues mois, mois par agent, année et mobile, * seule la vue condensée (qui utilise background-color) était épargnée. */ html[data-color-mode="daltonien"] [data-cvd]:not([data-cvd-edge]) { background-image: var(--cvd-pattern) !important; background-size: var(--cvd-pattern-size, auto) !important; } /* ------------------------------------------------------------------ * * 2. Contraste du texte au-dessus des motifs * ------------------------------------------------------------------ */ /* * L'exclusion des éléments data-cvd-edge est indispensable : leur fond reste blanc, * seule leur bordure est colorée. Sans elle, tone="dark" y écrirait blanc sur blanc. */ html[data-color-mode="daltonien"] [data-cvd-tone="light"]:not([data-cvd-edge]) { color: #111111 !important; text-shadow: 0 0 3px rgba(255, 255, 255, 0.95); } html[data-color-mode="daltonien"] [data-cvd-tone="dark"]:not([data-cvd-edge]) { color: #ffffff !important; text-shadow: 0 0 3px rgba(0, 0, 0, 0.75); } /* Le code du type ne doit jamais être tronqué : c'est le canal texte. */ html[data-color-mode="daltonien"] .condensed-has-assignment, html[data-color-mode="daltonien"] .year-day-code, html[data-color-mode="daltonien"] .assignment-type { font-weight: 700; letter-spacing: 0.02em; } /* ------------------------------------------------------------------ * * 3. Repères calendaires (week-end / férié / aujourd'hui) * En standard ils ne se distinguent que par un fond pastel. * ------------------------------------------------------------------ */ html[data-color-mode="daltonien"] .condensed-weekend, html[data-color-mode="daltonien"] .day-cell.weekend, html[data-color-mode="daltonien"] .month-day.weekend, html[data-color-mode="daltonien"] .year-day.weekend { box-shadow: inset 0 -3px 0 0 #4d4d4d; } html[data-color-mode="daltonien"] .condensed-holiday, html[data-color-mode="daltonien"] .day-cell.holiday, html[data-color-mode="daltonien"] .month-day.holiday, html[data-color-mode="daltonien"] .month-staff-day.holiday, html[data-color-mode="daltonien"] .year-day.holiday { box-shadow: inset 0 -3px 0 0 #d55e00; } html[data-color-mode="daltonien"] .condensed-today, html[data-color-mode="daltonien"] .day-cell.today, html[data-color-mode="daltonien"] .month-day.today, html[data-color-mode="daltonien"] .year-day.today { outline: 2px solid #0072b2; outline-offset: -2px; } html[data-color-mode="daltonien"] .condensed-table thead th.condensed-weekend-header::after { content: " ▪"; } html[data-color-mode="daltonien"] .condensed-table thead th.condensed-holiday-header::after { content: " ●"; color: #d55e00; } /* ------------------------------------------------------------------ * * 4. Vue semaine : la couleur est portée par une bordure gauche fine * ------------------------------------------------------------------ */ /* * En mode standard, le code du type est un simple texte à la couleur du type — le JS * expose cette couleur en variable et c'est le CSS qui décide quoi en faire. */ .assignment-code { color: var(--vt-color); } /* * En mode daltonien il devient une pastille : la couleur passe en fond, le motif et le * contraste texte suivent automatiquement via [data-cvd] / [data-cvd-tone]. * C'est le vocabulaire visuel des vues mois et année, appliqué à la vue semaine. */ html[data-color-mode="daltonien"] .assignment-code { display: inline-block; background-color: var(--vt-color); padding: 0 5px; border-radius: 3px; font-weight: 700; } html[data-color-mode="daltonien"] .assignment-item { border-left-width: 6px; } /* * La barre latérale de la carte : border-left ne peut pas porter de background-image, * on superpose donc un ::before exactement dessus. Positionné en absolu, il se réfère à * la boîte de padding — d'où le left négatif de la largeur de bordure. */ html[data-color-mode="daltonien"] .assignment-card { position: relative; border-left-width: 8px; } /* * Règle générique : tout élément marqué data-cvd-edge voit sa bordure gauche trâmée. * Un nouvel appelant n'a qu'à passer { edge: true } — et à déclarer --cvd-edge-width * si sa bordure ne fait pas 8px. */ html[data-color-mode="daltonien"] [data-cvd-edge] { position: relative; } html[data-color-mode="daltonien"] [data-cvd-edge]::before { content: ''; position: absolute; left: calc(-1 * var(--cvd-edge-width, 8px)); top: 0; bottom: 0; width: var(--cvd-edge-width, 8px); background-image: var(--cvd-pattern); background-size: var(--cvd-pattern-size, auto); pointer-events: none; } html[data-color-mode="daltonien"] .rotation-card-header[data-cvd-edge] { --cvd-edge-width: 6px; } html[data-color-mode="daltonien"] .service-card[data-cvd-edge] { --cvd-edge-width: 6px; border-left-width: 6px; } /* ------------------------------------------------------------------ * * 5. Vue mois mobile : la pastille devient une puce portant le code * ------------------------------------------------------------------ */ html[data-color-mode="daltonien"] .mobile-month-dot { width: auto; min-width: 14px; height: auto; padding: 0 2px; border-radius: 3px; font-size: 0.5rem; font-weight: 800; line-height: 1.35; text-align: center; overflow: hidden; } /* ------------------------------------------------------------------ * * 6. Badges de statut : en standard, ⏳ et 🗑️ n'ont qu'un title * ------------------------------------------------------------------ */ html[data-color-mode="daltonien"] .cvd-badge-label { display: inline; margin-left: 2px; font-size: 0.625rem; font-weight: 700; } .cvd-badge-label { display: none; } /* ------------------------------------------------------------------ * * 7. Dashboard — indicateurs de couverture * * Le chiffre (3/2) est bien affiché, mais le STATUT « conforme / limite / * critique » ne repose que sur la teinte du fond. On ajoute un symbole. * ------------------------------------------------------------------ */ html[data-color-mode="daltonien"] .slot-indicator, html[data-color-mode="daltonien"] .sector-slot { border: 1px solid transparent; } html[data-color-mode="daltonien"] .slot-indicator.ok::after, html[data-color-mode="daltonien"] .sector-slot.ok::after { content: " \2713"; /* ✓ */ } html[data-color-mode="daltonien"] .slot-indicator.warning::after, html[data-color-mode="daltonien"] .sector-slot.warning::after { content: " !"; } html[data-color-mode="daltonien"] .slot-indicator.critical::after, html[data-color-mode="daltonien"] .sector-slot.critical::after { content: " \2715"; /* ✕ */ } html[data-color-mode="daltonien"] .slot-indicator.empty::after, html[data-color-mode="daltonien"] .sector-slot.empty::after { content: " \2013"; /* – */ } html[data-color-mode="daltonien"] .slot-indicator.ok, html[data-color-mode="daltonien"] .sector-slot.ok { background: #d6f0e7; border-color: #009e73; color: #00654a; } html[data-color-mode="daltonien"] .slot-indicator.warning, html[data-color-mode="daltonien"] .sector-slot.warning { background: #fdf0d5; border-color: #e69f00; color: #8a6000; } html[data-color-mode="daltonien"] .slot-indicator.critical, html[data-color-mode="daltonien"] .sector-slot.critical { background: #fbe3d5; border-color: #d55e00; color: #8a3d00; } html[data-color-mode="daltonien"] .slot-indicator.empty, html[data-color-mode="daltonien"] .sector-slot.empty { border-color: #b0b0b0; } /* ------------------------------------------------------------------ * * 8. Pastilles d'identité (secteurs, roulements) * * Petits carrés / ronds de couleur, toujours accompagnés d'un libellé : * le motif sert à distinguer deux entités entre elles, pas à nommer. * ------------------------------------------------------------------ */ html[data-color-mode="daltonien"] .sector-color, html[data-color-mode="daltonien"] .cvd-swatch { border: 1px solid rgba(0, 0, 0, 0.35); } /* * Badges de code des listes de configuration (horaires journaliers, qualifications). * En standard, le fond est la couleur à ~13% d'opacité (suffixe « 22 » / « 20 ») avec * le texte dans la même teinte : trop faible pour porter une trame. En daltonien il * passe en couleur pleine, et le contraste texte suit via data-cvd-tone. */ html[data-color-mode="daltonien"] .cvd-code-badge { background-color: var(--vt-color) !important; border-color: rgba(0, 0, 0, 0.35) !important; font-weight: 700; } /* ------------------------------------------------------------------ * * 9. Bouton de bascule dans le header * ------------------------------------------------------------------ */ .header-btn[aria-pressed="true"] { background: var(--primary, #4f46e5); border-color: var(--primary, #4f46e5); color: #ffffff; } .header-btn[aria-pressed="true"] svg { stroke: #ffffff; }