/* =========================================================================== * a11y.css — Panneau « Paramètres » du widget POLD (WIDG-09, RGAA). * * Chargé via [UI] custom_css dans app/.chainlit/config.toml. Injecté DANS le * shadow root du Copilot (isolation) ET dans la surface plein écran. * * Présentation (façon panneau « Paramètres » de référence, style Rueil/Cleed) : * - En-tête : bandeau navy commune, titre centré + « ● En ligne », ✕ à droite. * - Corps : lignes blanches sectionnées par des filets 1px ; à gauche un * libellé gras + une description grise, à droite le contrôle (toggle iOS, * dropdown arrondi, ou boutons d'action). * - Pied : « Propulsé par EcoLLM » centré, discret. * - Mobile first : pleine largeur, cibles tactiles ≥ 56px. * * Thème commune : les accents (bandeau, toggles ON) utilisent les CSS custom * properties `--primary` / `--accent` (triplets HSL posés par theme-*.css sur * :root et #cl-shadow-root), avec repli POLD si absentes. * * Fournit aussi : * - les classes de TAILLE de texte : a11y-font-s | a11y-font-m | a11y-font-l * - la classe de CONTRASTE renforcé : a11y-contrast (au-delà du dark natif) * * Les classes de réglage sont posées par a11y.js sur la racine de l'app * (#cl-shadow-root en Copilot, en plein écran). * ======================================================================== */ /* --- 0. Jetons de thème (repli POLD si --primary/--accent absents) -------- */ .pold-a11y-panel, .pold-a11y-toggle { /* hsl(var(--primary)) → couleur commune ; sinon navy POLD #004a99. */ --pold-accent: hsl(var(--primary, 211 100% 27%)); --pold-accent-2: hsl(var(--accent, 199 89% 48%)); --pold-header-fg: #ffffff; --pold-row-h: 56px; } /* --- 1. Taille du texte (échelle sur la racine de l'app) ----------------- */ /* On agit sur font-size de la racine + descendants relatifs (rem/em/%). * Chainlit utilise des unités relatives : scaler la racine suffit largement. * Fallback : cibler aussi les paragraphes de message. */ .a11y-font-s { font-size: 90%; } .a11y-font-m { font-size: 100%; } .a11y-font-l { font-size: 118%; } .a11y-font-l p, .a11y-font-l li, .a11y-font-l .message-content { font-size: 1.08em; line-height: 1.65; } .a11y-font-s p, .a11y-font-s li, .a11y-font-s .message-content { line-height: 1.5; } /* --- 2. Contraste renforcé (RGAA — au-delà du dark natif) ----------------- */ /* Force des contrastes élevés : texte quasi-noir sur fond blanc, liens et * bordures marqués. Complète (n'écrase pas) le dark mode Chainlit natif. */ .a11y-contrast { --primary: 210 100% 22% !important; --primary-foreground: 0 0% 100% !important; --accent: 210 100% 22% !important; --ring: 48 100% 40% !important; } .a11y-contrast, .a11y-contrast p, .a11y-contrast li, .a11y-contrast span, .a11y-contrast .message-content { color: #000 !important; } .a11y-contrast a { color: #0b3d91 !important; text-decoration: underline !important; } .a11y-contrast a:focus, .a11y-contrast button:focus, .a11y-contrast input:focus, .a11y-contrast select:focus, .a11y-contrast [tabindex]:focus { outline: 3px solid #ffcc00 !important; outline-offset: 2px !important; } .a11y-contrast .pold-a11y-panel, .a11y-contrast .pold-a11y-toggle { border: 2px solid #000 !important; } /* En contraste renforcé, les toggles ON restent bien visibles. */ .a11y-contrast .pold-a11y-toggle-switch input:checked + .pold-a11y-slider { background: #0b3d91 !important; } /* --- 3. Bouton flottant d'ouverture -------------------------------------- */ .pold-a11y-toggle { position: fixed; right: 1rem; bottom: 1rem; z-index: 2147483000; width: 3rem; height: 3rem; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.65); background: var(--pold-accent); color: var(--pold-header-fg); font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); display: flex; align-items: center; justify-content: center; } .pold-a11y-toggle:hover { filter: brightness(1.08); } .pold-a11y-toggle:focus-visible, .pold-a11y-toggle:focus { outline: 3px solid #ffcc00; outline-offset: 2px; } /* --- 4. Panneau (carte / overlay) ---------------------------------------- */ /* Le panneau est CONFINÉ à sa surface : * - En Copilot (.pold-a11y-in-copilot) : position:absolute; inset:0 dans * l'app-shell positionné → il remplit la BULLE et glisse par-dessus les * messages, sans overlay fixé à la fenêtre. * - En plein écran (.pold-a11y-fullscreen) : idem, confiné à la zone d'app * (l'app-shell occupant tout l'écran, l'effet visuel reste plein écran mais * reste borné à l'app, pas au viewport). * Base commune : carte blanche, flex-column, en-tête figé + corps scrollable. */ .pold-a11y-panel { z-index: 2147483001; overflow: hidden; display: flex; flex-direction: column; background: #ffffff; color: #1a1a1a; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .pold-a11y-panel[hidden] { display: none; } /* Copilot : remplit la bulle (app-shell positionné) et glisse sur les messages. */ .pold-a11y-panel.pold-a11y-in-copilot { position: absolute; inset: 0; width: auto; max-width: none; max-height: none; border: none; border-radius: 0; box-shadow: none; } /* Plein écran : confiné à la zone d'app (pas au viewport). Même remplissage. */ .pold-a11y-panel.pold-a11y-fullscreen { position: absolute; inset: 0; width: auto; max-width: none; max-height: none; border: none; border-radius: 0; box-shadow: none; } /* Repli défensif : si aucune classe de contexte n'est posée (montage très * précoce), on garde l'ancien comportement de carte flottante confinée au coin * bas-droit, sans overlay plein viewport. */ .pold-a11y-panel:not(.pold-a11y-in-copilot):not(.pold-a11y-fullscreen) { position: absolute; right: 1rem; bottom: 4.5rem; width: 21rem; max-width: calc(100% - 2rem); max-height: 80vh; border-radius: 0.9rem; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.30); } /* --- 4a. En-tête : bandeau navy commune ---------------------------------- */ .pold-a11y-head { position: relative; display: flex; align-items: center; justify-content: center; padding: 0.85rem 2.75rem; background: var(--pold-accent); color: var(--pold-header-fg); } .pold-a11y-head-titles { text-align: center; line-height: 1.2; } .pold-a11y-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--pold-header-fg); } .pold-a11y-status { margin: 0.15rem 0 0; font-size: 0.78rem; font-weight: 500; color: rgba(255, 255, 255, 0.88); display: inline-flex; align-items: center; gap: 0.35rem; } .pold-a11y-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #34d27b; box-shadow: 0 0 0 2px rgba(52, 210, 123, 0.28); display: inline-block; } .pold-a11y-close { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); border: none; background: transparent; font-size: 1rem; line-height: 1; cursor: pointer; color: var(--pold-header-fg); width: 2rem; height: 2rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; } .pold-a11y-close:hover { background: rgba(255, 255, 255, 0.18); } .pold-a11y-close:focus-visible, .pold-a11y-close:focus { outline: 3px solid #ffcc00; outline-offset: 2px; } /* --- 4b. Corps : lignes sectionnées -------------------------------------- */ .pold-a11y-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 1rem; background: #ffffff; } /* En panneau confiné (inset:0), le pied reste collé en bas (le corps prend la * place restante ci-dessus). */ .pold-a11y-panel.pold-a11y-in-copilot .pold-a11y-foot, .pold-a11y-panel.pold-a11y-fullscreen .pold-a11y-foot { flex: 0 0 auto; } .pold-a11y-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: var(--pold-row-h); padding: 0.6rem 0; border-top: 1px solid rgba(0, 0, 0, 0.08); } .pold-a11y-item:first-child { border-top: none; } .pold-a11y-item-text { min-width: 0; } .pold-a11y-item-label { font-size: 0.95rem; font-weight: 600; color: #1a1f2b; } .pold-a11y-item-desc { margin-top: 0.12rem; font-size: 0.78rem; color: #6b7280; line-height: 1.3; } /* --- 4c. Toggle iOS ------------------------------------------------------- */ .pold-a11y-toggle-switch { position: relative; display: inline-flex; flex: 0 0 auto; width: 2.85rem; height: 1.6rem; cursor: pointer; } .pold-a11y-toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .pold-a11y-slider { position: absolute; inset: 0; border-radius: 999px; background: #d1d5db; transition: background-color 0.18s ease; } .pold-a11y-slider::before { content: ""; position: absolute; top: 50%; left: 0.18rem; transform: translateY(-50%); width: 1.24rem; height: 1.24rem; border-radius: 999px; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.18s ease; } .pold-a11y-toggle-switch input:checked + .pold-a11y-slider { background: var(--pold-accent); } .pold-a11y-toggle-switch input:checked + .pold-a11y-slider::before { transform: translateY(-50%) translateX(1.25rem); } .pold-a11y-toggle-switch input:focus-visible + .pold-a11y-slider, .pold-a11y-toggle-switch input:focus + .pold-a11y-slider { outline: 3px solid #ffcc00; outline-offset: 2px; } /* --- 4d. Dropdown arrondi ------------------------------------------------- */ .pold-a11y-select-wrap { position: relative; flex: 0 0 auto; } .pold-a11y-select-wrap::after { content: ""; position: absolute; right: 0.7rem; top: 50%; width: 0.5rem; height: 0.5rem; border-right: 2px solid #6b7280; border-bottom: 2px solid #6b7280; transform: translateY(-65%) rotate(45deg); pointer-events: none; } .pold-a11y-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; min-width: 7rem; padding: 0.5rem 2rem 0.5rem 0.8rem; border-radius: 0.6rem; border: 1px solid rgba(0, 0, 0, 0.18); background: #ffffff; color: #1a1f2b; font-size: 0.88rem; font-family: inherit; cursor: pointer; } .pold-a11y-select:hover { border-color: rgba(0, 0, 0, 0.32); } .pold-a11y-select:focus-visible, .pold-a11y-select:focus { outline: 3px solid #ffcc00; outline-offset: 2px; border-color: var(--pold-accent); } /* --- 4e. Actions TTS (Écouter / Arrêter) --------------------------------- */ .pold-a11y-tts-actions { display: flex; gap: 0.5rem; padding: 0 0 0.85rem; } .pold-a11y-tts-actions[hidden] { display: none; } .pold-a11y-action { flex: 1 1 auto; min-height: 2.5rem; padding: 0.45rem 0.7rem; border-radius: 0.6rem; border: 1px solid rgba(0, 0, 0, 0.18); background: #f4f6f9; color: #1a1f2b; font-size: 0.88rem; font-family: inherit; cursor: pointer; } .pold-a11y-action:hover { background: #e6ebf2; } .pold-a11y-action-primary { background: var(--pold-accent); color: var(--pold-header-fg); border-color: var(--pold-accent); } .pold-a11y-action-primary:hover { filter: brightness(1.06); background: var(--pold-accent); } .pold-a11y-action:focus-visible, .pold-a11y-action:focus { outline: 3px solid #ffcc00; outline-offset: 2px; } /* --- 4f. Pied : « Propulsé par EcoLLM » ---------------------------------- */ .pold-a11y-foot { padding: 0.7rem 1rem 0.85rem; text-align: center; font-size: 0.72rem; color: #9ca3af; border-top: 1px solid rgba(0, 0, 0, 0.06); background: #fafbfc; } /* Texte réservé aux lecteurs d'écran (annonces TTS indispo / pas de réponse). */ .pold-a11y-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- 5. Dark mode natif Chainlit : panneau lisible sur fond sombre -------- */ .dark .pold-a11y-panel, [data-theme="dark"] .pold-a11y-panel { background: #1e1e24; color: #f2f2f2; border-color: rgba(255, 255, 255, 0.12); } .dark .pold-a11y-body, [data-theme="dark"] .pold-a11y-body { background: #1e1e24; } .dark .pold-a11y-item, [data-theme="dark"] .pold-a11y-item { border-top-color: rgba(255, 255, 255, 0.1); } .dark .pold-a11y-item-label, [data-theme="dark"] .pold-a11y-item-label { color: #f2f2f2; } .dark .pold-a11y-item-desc, [data-theme="dark"] .pold-a11y-item-desc { color: #a4adba; } .dark .pold-a11y-select, [data-theme="dark"] .pold-a11y-select { background: #2b2b33; color: #f2f2f2; border-color: rgba(255, 255, 255, 0.18); } .dark .pold-a11y-select-wrap::after, [data-theme="dark"] .pold-a11y-select-wrap::after { border-color: #a4adba; } .dark .pold-a11y-slider, [data-theme="dark"] .pold-a11y-slider { background: #4b5563; } .dark .pold-a11y-action, [data-theme="dark"] .pold-a11y-action { background: #2b2b33; color: #f2f2f2; border-color: rgba(255, 255, 255, 0.18); } .dark .pold-a11y-foot, [data-theme="dark"] .pold-a11y-foot { background: #191920; border-top-color: rgba(255, 255, 255, 0.08); color: #7b828f; } /* --- 6. Mobile First (WIDG-05) ------------------------------------------- */ /* Le clavier virtuel ne doit pas masquer la saisie : on garde le panneau * dans la fenêtre visuelle réelle et on limite sa hauteur. En petit écran, le * panneau occupe (quasi) toute la largeur, comme les captures de référence. */ @media (max-width: 480px) { /* Le panneau confiné (inset:0) remplit déjà toute la surface : rien à forcer. * On n'ajuste que le repli « carte flottante » (contexte non détecté). */ .pold-a11y-panel:not(.pold-a11y-in-copilot):not(.pold-a11y-fullscreen) { right: 0.5rem; left: 0.5rem; width: auto; bottom: 4.5rem; max-height: 72vh; } .pold-a11y-toggle { right: 0.75rem; bottom: 0.75rem; } .pold-a11y-item { min-height: 60px; /* cible tactile confortable */ } .pold-a11y-select { min-width: 6.5rem; } } /* =========================================================================== * 7. Bande de titre brandée en HAUT de la bulle Copilot (WIDG-UI, item 3) * * Injectée par a11y.js UNIQUEMENT en contexte Copilot (`buildCopilotHeader`), * en première position de l'app-shell. Fond à la couleur commune (--primary), * repli navy POLD ; titre commune + statut « ● En ligne » vert. * * En plein écran, aucun header custom n'est injecté (l'en-tête Chainlit natif * est conservé) → pas de doublon. * ======================================================================== */ .pold-copilot-header { /* Jetons de thème (repli POLD si --primary/--accent absents). */ --pold-accent: hsl(var(--primary, 211 100% 27%)); --pold-header-fg: #ffffff; flex: 0 0 auto; display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; background: var(--pold-accent); color: var(--pold-header-fg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); position: relative; z-index: 5; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .pold-copilot-header-titles { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .pold-copilot-header-title { font-size: 0.98rem; font-weight: 700; color: var(--pold-header-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pold-copilot-header-status { margin-top: 0.12rem; font-size: 0.74rem; font-weight: 500; color: rgba(255, 255, 255, 0.9); display: inline-flex; align-items: center; gap: 0.35rem; } .pold-copilot-header-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #34d27b; box-shadow: 0 0 0 2px rgba(52, 210, 123, 0.28); display: inline-block; flex: 0 0 auto; } /* Contraste renforcé : bande de titre marquée. */ .a11y-contrast .pold-copilot-header { border-bottom: 2px solid #000 !important; } /* =========================================================================== * 8. Champ de saisie BLANC (composer Chainlit) (WIDG-UI, item 2) * * Objectif : composer propre et net — fond BLANC, bordure 1px gris clair, coins * arrondis (pilule ~24px), padding confortable, placeholder gris. Actuellement * le champ paraît gris/transparent. * * Sélecteurs ROBUSTES (structurels + aria + attributs stables Chainlit). FLAG : * les noms de classe internes du composer Chainlit sont RUNTIME — sélecteurs à * confirmer en navigateur (voir message final). On vise : * - le conteneur de saisie (barre du bas) via des repères stables, * - le