/* Memoria — la feuille unique de la console : système « Épure » (charte M1, choisie le 14/10/2026). * * L'idée : un luxe minimal d'aujourd'hui, la sobriété d'une maison de parfum ou d'un éditeur de * design. Fond blanc cassé, encre presque noire teintée de vert, UNE couleur signature (vert forêt) * posée avec parcimonie : le bouton principal, l'emblème, la page courante, le soulignement des * liens, un beau souvenir. Ni or, ni serif, ni dégradé, ni ombre (sauf ce qui flotte : messages, * dialogues, menus) : le chic vient des titres serrés, des filets d'un pixel, de la grille et du vide. * * Police : Aptos (ex-Bierstadt), appelée par son NOM seulement. Licence Microsoft : aucun fichier de * police dans le dépôt ni servi, ni @font-face ni local() ; à défaut, la police du système. Graisses * réelles 400 et 700, italique 400 ; font-synthesis: none interdit tout gras ou italique simulé. * Une exception fonctionnelle : la chasse fixe du système pour les codes à recopier (--f-mono). * * Ce qui ne bouge pas (principes ISA-101, recherche ux-console.md) : * - l'écran est neutre ; une couleur d'état n'apparaît que pour ce qui demande une action : * bleu = action humaine, ambre = attention, rouge = critique, vert pré = atteint. La signature * n'en est jamais une (vert forêt sombre et bleuté en clair ; en sombre, jade pâle, et le bouton * principal passe en blanc d'encre) ; * - chaque voix a sa teinte (la personne bleu canard, l'IA prune, vous bleu), toujours doublée * d'un libellé ; * - contrastes WCAG, clair comme sombre : texte ≥ 4,5:1, bordures, focus et repères ≥ 3:1 * (tests/unit/test_charte.py lit les blocs « @jetons » ci-dessous) ; * - cibles de 44 px, pages et console ; * - aucune ressource externe (CSP default-src 'self') : l'emblème et les pictogrammes de l'en-tête * sont des SVG en data: URI. * * CLAIR PAR DÉFAUT (demande du fondateur, 15/10/2026), même quand l'ordinateur est en sombre : sans * attribut sur (pages produites par le serveur, premier rendu avant tout script), la feuille * est claire. Le sombre ne s'applique que sur data-theme="dark" (bouton de l'en-tête, Réglages → * Sombre), ou sur data-theme="auto" (Réglages → Comme l'ordinateur) quand le système est en sombre. * * Plan : 1. jetons clairs · 2. jetons sombres (deux copies identiques : « Comme l'ordinateur », choix * du sombre) · 3. base · 4. en-tête · 5. bandeaux · 6. boutons · 7. formulaires · 8. cartes et sections · * 9. étiquettes · 10. tableaux · 11. listes, jauges, onglets · 12. messages et dialogues · puis les * pages (accueil, personnes, fiche, console, rapport, résultats, données et réglages, accès), * les petites largeurs et l'impression. La charte expliquée : docs/Charte graphique — Épure.md. */ /* ================================================================== 1. JETONS — CLAIR */ /* Le clair est le thème de base : contrôles natifs et barres de défilement clairs eux aussi, même système en sombre (« light dark » les laissait suivre le système sous une page claire). */ :root { color-scheme: light; /* @jetons clair */ --bg: #F3F4F1; /* gris vert très clair : la page (direction « Tableau de bord », 20/10/2026) */ --surface: #FFFFFF; /* blanc : cartes, champs, sous-titres */ --surface-2: #F0EFEA; /* aplat discret : survol, champ inactif, ligne système */ --line: #E4E7E2; /* filet d'un pixel (décoratif) */ --line-strong: #7E847F; /* bordure de champ et de bouton (≥ 3:1) */ --ink: #111814; /* encre presque noire, teintée de vert */ --ink-2: #3B4440; --ink-3: #59625D; --accent: #1B4434; /* LA signature : vert forêt (emblème, page courante, liens, beau souvenir) */ --accent-soft: #E6EEEA; --plein: #1B4434; /* fond du bouton principal */ --plein-survol: #123227; --sur-plein: #FFFFFF; /* texte du bouton principal */ --on-fill: #FFFFFF; /* texte sur les aplats d'état (bleu, rouge, vert) */ --senior: #0B5D69; /* la personne : bleu canard */ --senior-soft: #DDEDED; --agent: #5F447E; /* l'IA : prune */ --agent-soft: #EEE8F4; --magicien: #2452A4; /* vous, et toute action humaine : bleu */ --magicien-soft: #E0E7FA; /* bleu pâle : ΔE2000 ≥ 10 avec le vert pâle de la signature */ --ok: #2E6A22; /* atteint : vert pré, plus clair et plus jaune que la signature */ --ok-soft: #E8F2D2; /* aplat jaune-vert : ΔE2000 ≥ 10 avec le vert pâle de la signature */ --warn: #7A5000; /* attention : ambre (teinte OKLCH 74°, à 45° du rouge critique) */ --warn-soft: #FBF0D6; --danger: #B2231B; /* critique : vermillon */ --danger-soft: #FBE3DF; --focus: #1B4434; /* anneau de focus : 2 px, décalé de 3 px */ --panneau-acces: #1B4434; /* connexion : le panneau vert plein (la seule grande surface de vert) */ --panneau-texte: #F3F4EF; /* la marque posée sur ce panneau */ /* @fin */ --voile: rgb(17 24 20 / .42); /* La seule ombre : ce qui flotte (messages, dialogues, menus, « Retour au direct »). */ --ombre: 0 1px 2px rgb(17 24 20 / .06), 0 18px 40px -18px rgb(17 24 20 / .28); /* L'emblème : deux arches d'un trait (un « m », deux voix qui se répondent), posé sur la signature. */ --embleme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19V10.5a3.5 3.5 0 0 1 7 0V19M12 10.5a3.5 3.5 0 0 1 7 0V19' fill='none' stroke='%23FFFFFF' stroke-width='1.9'/%3E%3C/svg%3E"); /* Le même, au trait clair, sur le panneau de connexion ; et en filigrane, avec sa silhouette en écho. */ --embleme-panneau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19V10.5a3.5 3.5 0 0 1 7 0V19M12 10.5a3.5 3.5 0 0 1 7 0V19' fill='none' stroke='%23F3F4EF' stroke-width='1.9'/%3E%3C/svg%3E"); --filigrane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 400' fill='none' stroke='%23F3F4EF' stroke-opacity='.16' stroke-width='1.5'%3E%3Cpath d='M60 400V190a70 70 0 0 1 140 0v210M200 190a70 70 0 0 1 140 0v210'/%3E%3Cpath d='M40 400V190A90 90 0 0 1 200 133.4A90 90 0 0 1 360 190V400' stroke-opacity='.09'/%3E%3C/svg%3E"); /* Les pictogrammes de l'en-tête, au trait fin comme l'emblème (24 × 24, trait 1,6, bouts ronds) ; posés en MASQUE (.picto) : ils prennent la couleur du texte du bouton, en clair comme en sombre. L'œil barré : le mode écran partagé (la barre coupe le contour et la pupille, avec un jour). */ --icone-oeil-barre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.13 6.17A10.52 10.52 0 0 1 21.5 12A10.52 10.52 0 0 1 19.15 15.19M13.87 17.83A10.52 10.52 0 0 1 2.5 12A10.52 10.52 0 0 1 4.85 8.81M12.2 8.81A3.2 3.2 0 0 1 15.19 11.8M11.8 15.19A3.2 3.2 0 0 1 8.81 12.2M4.5 4.5l15 15'/%3E%3C/svg%3E"); /* Le bouton de thème montre où il mène : la lune en clair (« Passer en sombre »), le soleil en sombre. */ --icone-lune: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.97 12.7A8 8 0 1 1 11.3 4.03A6.3 6.3 0 0 0 19.97 12.7Z'/%3E%3C/svg%3E"); --icone-soleil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.6'/%3E%3Cpath d='M12 3.4v2.4M12 18.2v2.4M3.4 12h2.4M18.2 12h2.4M5.92 5.92l1.7 1.7M16.38 16.38l1.7 1.7M5.92 18.08l1.7-1.7M16.38 7.62l1.7-1.7'/%3E%3C/svg%3E"); /* L'icône du bouton de thème suit le thème AFFICHÉ, par la feuille seule (pas par aria-pressed, posé par les modules) : dès la première image, même avant le JavaScript, la lune en clair, le soleil en sombre. */ --icone-theme: var(--icone-lune); /* Menu latéral (refonte du 20/10/2026) : un panneau d'encre verte, le même en clair et en sombre. */ --nav-l: 236px; /* Les cartes, légèrement soulevées (direction « Tableau de bord ») ; la tuile principale en vert plein. */ --ombre-carte: 0 1px 2px rgb(17 24 20 / .05), 0 6px 18px -10px rgb(17 24 20 / .16); --tuile-forte: #1B4434; --tuile-forte-texte: #FFFFFF; --tuile-forte-doux: #CFE3DA; --pastille: #E3EFE9; --i-cle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l8-8M16 7l2 2M14 9l2 2'/%3E%3C/svg%3E"); --nav-bg: #13211B; --nav-ink: #B9C6BF; --nav-ink-fort: #FFFFFF; --nav-filet: #2A3A33; --nav-survol: #1C2D25; --nav-actif: #24392F; --nav-repere: #8FD3B3; --nav-marque: #2F7A5C; --i-accueil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-6 8 6v8a1 1 0 0 1-1 1h-4v-6h-6v6H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); --i-personnes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 11 0M15.5 5.2a3 3 0 0 1 0 5.6M17.5 14.2a5 5 0 0 1 3 4.8'/%3E%3C/svg%3E"); --i-resultats: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M21 20H3'/%3E%3C/svg%3E"); --i-donnees: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='2.8'/%3E%3Cpath d='M5 6v12c0 1.5 3.1 2.8 7 2.8s7-1.3 7-2.8V6M5 12c0 1.5 3.1 2.8 7 2.8s7-1.3 7-2.8'/%3E%3C/svg%3E"); --i-reglages: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h4M12 17h8'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='10' cy='17' r='2'/%3E%3C/svg%3E"); /* Typographie : une seule famille, deux graisses (400, 700). */ --f-sans: "Aptos", "Bierstadt", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* codes à recopier seulement */ --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-md: 1.0625rem; --fs-lg: 1.1875rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.75rem; --fs-4xl: 3.5rem; --fs-capitales: .75rem; /* libellés en petites majuscules */ --capitales: .16em; /* leur interlettrage */ --serre: -.035em; /* interlettrage des grands titres */ --lh-body: 1.6; --lh-read: 1.65; --lh-tight: 1.15; /* Espaces, formes, mouvement. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --r-ctl: 4px; --r-card: 6px; --r-cartouche: 3px; --r-pill: 999px; --t-fast: 120ms; --t-med: 200ms; --ease: cubic-bezier(.2, .7, .2, 1); /* Cibles de 44 px partout ; la console règle seulement la marge et le corps de ses libellés. */ --cible-console: 44px; --ctl-h: 44px; --ctl-h-petit: 44px; --btn-px: var(--sp-5); --fs-libelle: var(--fs-md); } /* ================================================================== 2. JETONS — SOMBRE (encre de nuit) */ /* Deux copies identiques : « Comme l'ordinateur » (data-theme="auto") quand le système est en sombre, puis le choix du sombre (data-theme="dark" : bouton de l'en-tête, Réglages). Sans attribut, CLAIR. */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --bg: #0E1210; --surface: #151A17; --surface-2: #1C2320; --line: #2A322E; --line-strong: #7A847E; --ink: #ECEEE9; --ink-2: #C3C9C4; --ink-3: #9AA39D; --accent: #A7D0C2; --accent-soft: #1A2A24; --plein: #ECEEE9; --plein-survol: #FFFFFF; --sur-plein: #0E1210; --on-fill: #0E1210; --senior: #7BCFD6; --senior-soft: #12302F; --agent: #C7AEE6; --agent-soft: #2A2238; --magicien: #93B8F5; --magicien-soft: #1A2A42; --ok: #93CF88; --ok-soft: #203214; --warn: #E8B65A; --warn-soft: #352A12; --danger: #FF8B80; --danger-soft: #45201C; --focus: #A7D0C2; --panneau-acces: #12291F; --voile: rgb(0 0 0 / .62); --ombre: 0 18px 40px -16px rgb(0 0 0 / .75); --embleme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19V10.5a3.5 3.5 0 0 1 7 0V19M12 10.5a3.5 3.5 0 0 1 7 0V19' fill='none' stroke='%230E1210' stroke-width='1.9'/%3E%3C/svg%3E"); --icone-theme: var(--icone-soleil); } } :root[data-theme="dark"] { /* @jetons sombre */ --bg: #0E1210; --surface: #151A17; --surface-2: #1C2320; --line: #2A322E; --line-strong: #7A847E; --ink: #ECEEE9; --ink-2: #C3C9C4; --ink-3: #9AA39D; --accent: #A7D0C2; --accent-soft: #1A2A24; --plein: #ECEEE9; --plein-survol: #FFFFFF; --sur-plein: #0E1210; --on-fill: #0E1210; --senior: #7BCFD6; --senior-soft: #12302F; --agent: #C7AEE6; --agent-soft: #2A2238; --magicien: #93B8F5; --magicien-soft: #1A2A42; --ok: #93CF88; --ok-soft: #203214; --warn: #E8B65A; --warn-soft: #352A12; --danger: #FF8B80; --danger-soft: #45201C; --focus: #A7D0C2; --panneau-acces: #12291F; /* @fin */ --voile: rgb(0 0 0 / .62); --ombre: 0 18px 40px -16px rgb(0 0 0 / .75); --embleme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19V10.5a3.5 3.5 0 0 1 7 0V19M12 10.5a3.5 3.5 0 0 1 7 0V19' fill='none' stroke='%230E1210' stroke-width='1.9'/%3E%3C/svg%3E"); --icone-theme: var(--icone-soleil); } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; } } /* ================================================================== 3. BASE : une famille, deux graisses */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-block: 96px 120px; font-synthesis: none; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 400 var(--fs-md)/var(--lh-body) var(--f-sans); font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Titres : gras, serrés ; le h1 est le seul cri de la page. */ h1, h2, h3, h4 { margin: 0 0 var(--sp-3); font-family: var(--f-sans); font-weight: 700; line-height: var(--lh-tight); } h1 { font-size: var(--fs-3xl); line-height: 1.02; letter-spacing: var(--serre); } h2 { font-size: var(--fs-xl); letter-spacing: -.022em; } h3 { font-size: var(--fs-md); letter-spacing: -.012em; } p { margin: 0 0 var(--sp-3); } /* Pas de mot orphelin en fin de paragraphe ; titres équilibrés. */ p, li, .guide, .aide { text-wrap: pretty; } h1, h2, .titre-mode { text-wrap: balance; } strong, b { font-weight: 700; } /* Le chapeau sous le titre : ce qu'on fait ici, en gris d'encre, sur une mesure courte. */ .guide { font: 400 var(--fs-lg)/1.55 var(--f-sans); color: var(--ink-2); max-width: 58ch; margin: 0 0 var(--sp-2); } /* Les liens : l'encre, soulignée d'un trait vert fin (la signature, à petite dose). */ a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px; } a:hover { text-decoration-thickness: 2px; } code, .mono { font-family: var(--f-mono); font-size: .9em; } ul, ol { padding-inline-start: 1.25em; margin: 0 0 var(--sp-3); } hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; } img, svg, canvas { max-width: 100%; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } ::selection { background: var(--accent-soft); color: var(--ink); } .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; } .lien-evitement { position: absolute; left: var(--sp-3); top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-ctl); } .lien-evitement:focus { top: var(--sp-2); } /* Chiffres alignés (horaires, chrono, compteurs) — en Aptos, pas en machine à écrire. */ .tc, .chrono, td.nombre { font-variant-numeric: tabular-nums; } .discret { color: var(--ink-3); } .petit { font-size: var(--fs-sm); } .tres-petit { font-size: var(--fs-xs); } /* « .serif » (nom gardé par le JavaScript) : la parole de la personne citée — en Aptos, comme tout. */ .serif { font-family: var(--f-sans); } .nowrap { white-space: nowrap; } .pile > * + * { margin-top: var(--sp-3); } .pile-l > * + * { margin-top: var(--sp-5); } .ligne-flex { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } .ligne-flex.espace { justify-content: space-between; } .pousse { margin-inline-start: auto; } .pseudo-discret { font: 700 var(--fs-capitales)/1 var(--f-sans); letter-spacing: .08em; color: var(--ink-3); font-variant-numeric: tabular-nums; } /* Petites majuscules espacées, discrètes : surtitres, légendes, en-têtes de tableau, fil d'Ariane. */ .surtitre, legend, .accueil-date, .fil-ariane, .tableau thead th, .fil-conteneur > header h2, .carte-prochaine > h2:first-child { font-family: var(--f-sans); font-weight: 400; font-size: var(--fs-capitales); line-height: 1.3; letter-spacing: var(--capitales); text-transform: uppercase; color: var(--ink-2); } .surtitre { margin: 0 0 var(--sp-4); } /* .petit (15 px) l'emportait sur legend et sur l'en-tête de colonne : « PROPOSITIONS », « (INDICATIF) ». */ legend.petit { font-size: var(--fs-capitales); } .tableau thead th .petit { font-size: 1em; } /* Page : la grille et le vide. */ .contenu { max-width: 1160px; margin: 0 auto; padding: var(--sp-8) var(--sp-7) 120px; } .contenu.large { max-width: 1440px; } .en-tete-page { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; padding-bottom: var(--sp-6); margin-bottom: var(--sp-7); border-bottom: 1px solid var(--line); } .en-tete-page h1 { font-size: var(--fs-4xl); margin: 0 0 var(--sp-4); } /* « Personnes (3) » : le compte en exposant, comme une note de magazine. */ .en-tete-page h1 .discret { font-size: .32em; font-weight: 400; letter-spacing: .04em; vertical-align: super; margin-inline-start: .3em; } .en-tete-page .guide { margin: var(--sp-1) 0 0; } .en-tete-page .actions-page { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; } /* ================================================================== 4. EN-TÊTE : une ligne, un filet */ .entete { display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap; min-height: 72px; padding: 0 var(--sp-7); background: var(--bg); border-bottom: 1px solid var(--line); } /* La marque : l'emblème, puis MEMORIA en capitales très espacées (une griffe). */ .marque { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font: 700 .875rem/1 var(--f-sans); letter-spacing: .34em; text-transform: uppercase; color: var(--ink); text-decoration: none; margin-inline-end: -.34em; } .marque::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 5px; background: var(--accent) var(--embleme) center / 18px no-repeat; } .nav-principale ul { display: flex; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .nav-principale a { display: inline-flex; align-items: center; min-height: 72px; padding: 0 14px; white-space: nowrap; font: 400 var(--fs-sm)/1 var(--f-sans); letter-spacing: .005em; color: var(--ink-2); text-decoration: none; } .nav-principale a:hover { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink-3); } /* Page courante : l'encre en gras, et deux pixels de vert posés sur le filet. */ .nav-principale a[aria-current="page"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); } .entete-outils { margin-inline-start: auto; display: flex; gap: var(--sp-1); align-items: center; } .entete-outils .btn { min-height: 44px; min-width: 44px; } .entete-outils .btn-rond { border-color: var(--line-strong); background: transparent; } /* ================================================================== 5. BANDEAUX (toutes les pages) */ /* Une couleur d'état, un trait de 4 px à gauche, un filet dessous. Rouge par défaut (critique). */ .bandeau-global { display: flex; align-items: center; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; padding: var(--sp-3) var(--sp-7); font-weight: 700; background: var(--danger-soft); color: var(--danger); border-bottom: 1px solid var(--danger); border-inline-start: 4px solid var(--danger); } .bandeau-global.attention { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); } .bandeau-global.info { background: var(--magicien-soft); color: var(--magicien); border-color: var(--magicien); } .page-console .bandeau-global { padding-inline: var(--sp-5); } /* Dans la console d'un appel, les bandeaux de page (rendez-vous, accès) passent au second plan : fond de carte, texte à leur couleur d'état, filet gardé ; ils ne se collent pas en haut (au zoom 200 %, le bandeau d'un rendez-vous manqué recouvrait la bande d'état critique). Seule .bande-mode est franche. */ .page-console .bandeau-global { background: var(--surface); font-weight: 400; } .page-console .bandeau-global :is(strong, b) { font-weight: 700; } .page-console :is(.bandeau-rendez-vous, .bandeau-acces, .bandeau-veille) { position: static; } /* Un lien seul dans un bandeau (« Page de connexion ↗ ») : une cible de 44 px, à la couleur du bandeau. */ .bandeau-global a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration-color: currentColor; } /* Veille hors console : alerte urgente de la conversation en cours (détresse…), jusqu'à « J'ai vu ». */ .bandeau-veille { position: sticky; top: 0; z-index: 45; border-bottom-width: 2px; } .bandeau-veille .texte { flex: 1 1 32ch; min-width: 0; } .bandeau-veille .btn-discret { color: var(--danger); } /* Rappel d'un rendez-vous (un quart d'heure avant, puis tant qu'il attend) : sur toutes les pages, sous le bandeau d'accès. Ambre quand il approche, rouge quand il attend sans personne, calme quand quelqu'un est à l'écoute. Le bouton mène à la console du rendez-vous. */ .bandeau-rendez-vous { position: sticky; top: 0; z-index: 44; } .bandeau-rendez-vous .texte { flex: 1 1 32ch; min-width: 0; } .bandeau-rendez-vous .btn { white-space: nowrap; } /* Alerte d'accès (console en ligne) : l'autre fondateur est entré par une voie de secours, ou son accès a changé. Ambre, calme, sur toutes les pages, jusqu'à « J'ai vu ». */ .bandeau-acces { position: sticky; top: 0; z-index: 43; font-weight: 400; } .bandeau-acces .texte { flex: 1 1 40ch; min-width: 0; } .bandeau-acces .btn { white-space: nowrap; } /* Mode écran partagé : une ligne bleue en tête (action humaine en cours : vous montrez l'écran). */ .bandeau-partage { position: sticky; top: 0; z-index: 40; text-align: center; padding: var(--sp-1) var(--sp-3); background: var(--magicien); color: var(--on-fill); font-size: var(--fs-sm); font-weight: 700; } /* ================================================================== 6. BOUTONS */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--ctl-h); padding: 0 var(--btn-px); border-radius: var(--r-ctl); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 700 var(--fs-sm)/1.2 var(--f-sans); letter-spacing: .005em; text-decoration: none; cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast); -webkit-user-select: none; user-select: none; position: relative; overflow: hidden; text-align: center; } .btn:hover { background: var(--surface-2); border-color: var(--ink-3); } .btn:active { transform: translateY(1px); } .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; } /* Le bouton principal : vert forêt plein en clair, blanc d'encre en sombre (jamais une pastille d'état). */ .btn-primaire { background: var(--plein); border-color: var(--plein); color: var(--sur-plein); } .btn-primaire:hover { background: var(--plein-survol); border-color: var(--plein-survol); } .btn-humain { background: var(--magicien); border-color: var(--magicien); color: var(--on-fill); } .btn-humain:hover { background: var(--magicien); border-color: var(--magicien); filter: brightness(.94); } .btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-fill); } .btn-danger:hover { background: var(--danger); border-color: var(--danger); filter: brightness(.94); } .btn-contour-danger { border-color: var(--danger); color: var(--danger); } .btn-contour-danger:hover { background: var(--danger-soft); border-color: var(--danger); } .btn-discret { border-color: transparent; background: transparent; color: var(--ink-2); } .btn-discret:hover { background: var(--surface-2); border-color: transparent; color: var(--ink); } .btn-lien { border: 0; background: none; padding: 0; min-height: 24px; color: var(--ink); font-weight: 400; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; } .btn-lien:hover { background: none; text-decoration-thickness: 2px; } /* Un lien-bouton hors d'une phrase (« ▸ 9:49 ») : 24 px à l'œil, 44 px au doigt. */ .btn-lien { overflow: visible; position: relative; } .btn-lien::after { content: ""; position: absolute; inset: -10px -4px; } .btn-petit { min-height: var(--ctl-h-petit); padding: 0 var(--sp-4); font-size: .875rem; } .btn-grand { min-height: var(--cible-console); padding: 0 var(--sp-5); font-size: var(--fs-md); } .btn-icone { min-width: var(--ctl-h); padding: 0 var(--sp-2); } .btn-rond { border-radius: var(--r-pill); } .btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); } /* Pictogramme au trait (jetons --icone-…), en masque : il prend la couleur du texte du bouton (gris d'encre, l'encre au survol, la page sur le bouton pressé de l'écran partagé). */ .picto { flex: none; display: block; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--picto) center / contain no-repeat; mask: var(--picto) center / contain no-repeat; } .picto-ecran-partage { --picto: var(--icone-oeil-barre); } .picto-theme { --picto: var(--icone-theme); } /* lune en clair, soleil en sombre : jetons 1 et 2 */ /* Le bouton de thème dit « thème sombre » (aria-pressed) : en sombre, il reste discret (le soleil suffit) ; seul l'écran partagé, un mode qui floute, s'affiche pressé à l'aplat d'encre. */ .btn.btn-discret[data-action="theme"][aria-pressed="true"] { background: transparent; color: var(--ink-2); border-color: transparent; } .btn.btn-discret[data-action="theme"][aria-pressed="true"]:hover { background: var(--surface-2); color: var(--ink); } @media (forced-colors: active) { .picto { forced-color-adjust: none; background: ButtonText; } } .btn .touche { margin-inline-start: var(--sp-1); } .btn .sous-libelle { font-weight: 400; } /* Appui maintenu 1 s : la barre se remplit (--progression 0→1, piloté par JS). */ .btn-maintenu::before { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: currentColor; opacity: .85; transform-origin: left center; transform: scaleX(var(--progression, 0)); } .btn-maintenu.en-maintien { outline: 2px dashed currentColor; outline-offset: -5px; } .btn-maintenu .sous-libelle { display: block; font-size: var(--fs-xs); opacity: .9; } /* Touches : un cartouche au trait, à la couleur du texte qui l'entoure. */ kbd, .touche { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7em; height: 1.7em; padding: 0 .35em; border: 1px solid color-mix(in srgb, currentColor 55%, transparent); border-radius: var(--r-cartouche); font: 700 .6875rem/1 var(--f-sans); letter-spacing: 0; vertical-align: middle; } /* ================================================================== 7. FORMULAIRES */ label, .libelle { font-weight: 700; font-size: var(--fs-libelle); color: var(--ink); letter-spacing: -.003em; } .champ { display: flex; flex-direction: column; gap: var(--sp-1); } .champ + .champ { margin-top: var(--sp-4); } .champs-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); } .champs-grille .champ + .champ { margin-top: 0; } input[type="text"], input[type="tel"], input[type="search"], input[type="number"], input[type="datetime-local"], input[type="date"], input[type="time"], select, textarea { font: inherit; font-size: var(--fs-md); color: var(--ink); background-color: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); min-height: var(--ctl-h); padding: var(--sp-2) var(--sp-3); width: 100%; } /* Une liste au libellé long (« Ses paroles — transcription soignée… ») ne déborde jamais de la page : à 320 px (zoom 400 %), le rapport défilait à l'horizontale (WCAG 1.4.10, revue du 15/10). Les éléments flexibles qui la portent peuvent rétrécir sous la largeur de leur contenu. */ select { max-width: 100%; min-width: 0; } .carte-titre > *, .ligne-flex > label, .rapport-grille > * { min-width: 0; max-width: 100%; } input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; } textarea { min-height: 96px; line-height: var(--lh-read); resize: vertical; } input:disabled, select:disabled, textarea:disabled, textarea[readonly], input[readonly] { background-color: var(--surface-2); color: var(--ink-2); } input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); } input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; flex: none; } input[type="range"] { accent-color: var(--ink-2); width: 100%; min-height: 44px; } .case { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 400; cursor: pointer; min-height: 44px; } .aide { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-3); font-weight: 400; margin: 0; } /* Une aide en suit un autre texte : sur sa propre ligne (« ✓ citation retrouvéesouvenir heureux… »). */ span.aide { display: block; margin-top: 2px; } .erreur-champ { font-size: var(--fs-sm); color: var(--danger); font-weight: 700; margin: 0; } fieldset { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-4); margin: 0 0 var(--sp-4); } legend { padding: 0 var(--sp-2); } .choix-segment { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); overflow: hidden; flex-wrap: wrap; } .choix-segment label { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); min-height: var(--ctl-h); cursor: pointer; font-weight: 400; border-inline-end: 1px solid var(--line); } .choix-segment label:last-child { border-inline-end: 0; } .choix-segment label:has(input:checked) { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--accent); font-weight: 700; } .choix-segment label.indisponible { color: var(--ink-3); cursor: not-allowed; } .choix-segment input { width: 16px; height: 16px; } /* Puces (sujets à éviter, prénoms) : des cartouches au trait ; ajout et retrait au clavier. */ .puces { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0 0 var(--sp-2); padding: 0; } .puce { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 32px; padding: 0 var(--sp-1) 0 var(--sp-3); border-radius: var(--r-cartouche); background: var(--surface); border: 1px solid var(--line-strong); font-size: var(--fs-sm); } /* Le « × » : 28 px à l'œil, 44 px au doigt. */ .puce button { position: relative; border: 0; background: none; color: var(--ink-2); width: 28px; height: 28px; border-radius: var(--r-cartouche); cursor: pointer; font: inherit; font-size: 1rem; line-height: 1; } .puce button::after { content: ""; position: absolute; inset: -8px; } .puce button:hover { background: var(--surface-2); color: var(--ink); } .ajout-puce { display: flex; gap: var(--sp-2); } .ajout-puce input { flex: 1; } /* Bornes de saisie (« 3/8 ») : la limite de ce que l'IA recevra, visible avant le refus. */ .borne { font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-inline-start: var(--sp-1); } .borne.pleine { color: var(--warn); font-weight: 700; } /* ================================================================== 8. CARTES & SECTIONS */ /* Les cartes sont posées, pas soulevées : blanches, un filet, coins de 6 px, aucune ombre. */ .carte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-6) 36px; min-width: 0; } .carte > h2:first-child:not(.surtitre) { font-size: 1.25rem; letter-spacing: -.02em; margin: 0 0 var(--sp-5); } .carte > h3:first-child, .carte > header:first-child { margin-top: 0; } .carte-titre { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); } .carte-titre h2, .carte-titre h3 { margin: 0; font-size: 1.125rem; letter-spacing: -.015em; } .carte-titre .discret.petit { font-size: var(--fs-capitales); letter-spacing: .08em; } .carte.calme { background: var(--surface-2); border-color: transparent; } /* Cartes à sens : un trait de deux pixels en tête (vert = à faire ici ; prune = ce que l'IA saura). */ .carte.ia-saura { box-shadow: inset 0 2px 0 var(--agent); } .carte.ia-saura .carte-titre .discret { color: var(--agent); } .carte.pour-vous { border: 1px dashed var(--line-strong); background: transparent; } /* Bandeau dans une page (état d'une conversation, accès de secours) : neutre, info, ou décision requise. */ .bandeau-carte { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); } .bandeau-carte.info { background: var(--magicien-soft); border-color: var(--magicien); } .bandeau-carte.crit { background: var(--danger-soft); border-color: var(--danger); border-inline-start: 4px solid var(--danger); } .bandeau-carte.att { background: var(--warn-soft); border-color: var(--warn); border-inline-start: 4px solid var(--warn); } .bandeau-carte > .texte { flex: 1 1 28ch; min-width: 0; } .grille-2 { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); } .grille-12 { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .section + .section { margin-top: var(--sp-8); } /* Titre de section : grand, serré, posé sur un filet. */ .section-titre { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); justify-content: space-between; flex-wrap: wrap; padding-bottom: var(--sp-4); margin-bottom: var(--sp-6); border-bottom: 1px solid var(--line); } .section-titre h2 { margin: 0; font-size: 2rem; letter-spacing: -.03em; } .section-titre .aide { flex-basis: 100%; } .vide { color: var(--ink-3); font-style: italic; padding: var(--sp-4) 0; } .chargement { color: var(--ink-3); } .chargement::after { content: " …"; } details > summary { cursor: pointer; font-weight: 700; min-height: var(--ctl-h); display: flex; align-items: center; gap: var(--sp-2); } details > summary::marker { color: var(--ink-3); } summary .discret, summary .petit { font-weight: 400; } .liste-def { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; } .liste-def dt { color: var(--ink-3); font-size: var(--fs-sm); } .liste-def dd { margin: 0; } /* Repli (objectifs de recrutement, options) : un cadre, un titre cliquable de 44 px. */ .repli { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-2) var(--sp-5); background: var(--surface); } .repli > summary { min-height: 44px; font-size: var(--fs-md); } .repli[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: var(--sp-3); } .zone-danger { border: 1px solid var(--danger); border-radius: var(--r-card); padding: var(--sp-5); background: var(--danger-soft); } .zone-danger h2, .zone-danger h3 { color: var(--danger); } /* ================================================================== 9. ÉTIQUETTES & STATUTS (jamais la couleur seule) */ /* Des cartouches nets, coins presque droits ; colorés seulement quand un état l'exige. */ .etiquette { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--surface-2); font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); white-space: nowrap; } .etiquette.ok { color: var(--ok); background: var(--ok-soft); } .etiquette.att { color: var(--warn); background: var(--warn-soft); } .etiquette.crit { color: var(--danger); background: var(--danger-soft); } .etiquette.grand { min-height: 30px; padding: 0 var(--sp-3); font-size: var(--fs-md); } .statut { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 700; } .statut.ok { color: var(--ok); } .statut.att { color: var(--warn); } .statut.crit { color: var(--danger); } .statut.neutre { color: var(--ink-3); font-weight: 400; } /* ================================================================== 10. TABLEAUX */ /* En-tête : petites majuscules sur un filet d'encre ; les lignes, sur des filets clairs. position: relative — un .sr-only (position absolue) d'un tableau défilant s'en échappait et allongeait la page (défilement horizontal à 390 px, revue du 4/10). */ .defilement-x { position: relative; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } table.tableau { width: 100%; border-collapse: collapse; font-size: var(--fs-md); } .tableau th, .tableau td { text-align: left; padding: var(--sp-4); border-bottom: 1px solid var(--line); vertical-align: top; } .tableau thead th { padding: 0 var(--sp-4) var(--sp-2); border-bottom: 1px solid var(--ink); vertical-align: bottom; white-space: nowrap; } .tableau thead th:first-child, .tableau tbody > tr > :first-child { padding-inline-start: 0; } .tableau tbody tr:hover td, .tableau tbody tr:hover th { background: color-mix(in srgb, var(--surface-2) 60%, transparent); } .tableau th button.tri { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: flex-end; min-height: 44px; line-height: 1.3; } .tableau th button.tri:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .tableau th[aria-sort="ascending"] button.tri::after { content: "▲"; font-size: .7em; } .tableau th[aria-sort="descending"] button.tri::after { content: "▼"; font-size: .7em; } .tableau .btn { white-space: nowrap; } /* Liens des tableaux (pseudonyme, conversation) : 44 px de haut, sans épaissir la ligne. */ .tableau a:not(.btn):not(.lien-cellule) { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; } .tableau .id-pseudo { font: 700 .8125rem/1 var(--f-sans); letter-spacing: .08em; color: var(--ink-2); text-decoration-color: var(--accent); } .tableau .id-pseudo:hover { text-decoration: underline; text-decoration-thickness: 2px; } .tableau tr.ligne-seuil td, .tableau tr.ligne-seuil th { background: var(--surface-2); font-weight: 700; } .tableau tr.ligne-alerte td, .tableau tr.ligne-alerte th { background: var(--danger-soft); } .tableau tr.ligne-notable td { background: var(--surface-2); } /* Journal des accès (revue du 28/10/2026) : une ligne de titre par jour ; la cible sur une ligne. */ .tableau-audit tr.jour th { text-align: start; font-weight: 700; font-size: .8rem; color: var(--ink-3); background: var(--surface-2); padding-block: .45rem; text-transform: capitalize; } .tableau-audit td.cible { white-space: nowrap; } .tableau-audit details summary { cursor: pointer; } .tableau-audit details ul { margin: .4rem 0 0; padding-inline-start: 1rem; } /* ================================================================== 11. LISTES DE CONTRÔLE, JAUGES, ONGLETS */ /* Avant d'appeler, fin d'appel, état du poste : une ligne par point, sur un filet ; teintée seulement quand elle demande quelque chose (ambre) ou bloque (rouge). */ .checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; } .checklist li { display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-2); align-items: center; min-height: 44px; padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--line); } .checklist li:last-child { border-bottom: 0; } .checklist .icone { font-weight: 700; text-align: center; line-height: 1.5; color: var(--ink-3); } .checklist li.ok .icone { color: var(--ok); } .checklist li.att { background: var(--warn-soft); box-shadow: inset 4px 0 0 var(--warn); } .checklist li.att .icone { color: var(--warn); } .checklist li.bloquant { background: var(--danger-soft); box-shadow: inset 4px 0 0 var(--danger); } .checklist li.bloquant .icone, .checklist li.bloquant strong { color: var(--danger); } .checklist li .aide { margin-top: 2px; } /* Prénom de la fiche cité dans un sujet à éviter (CONV-25) : l'avertissement, sous la liste des sujets. */ .avert-sujets { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); color: var(--ink-2); background: var(--warn-soft); box-shadow: inset 4px 0 0 var(--warn); } .avert-sujets p { margin: 0; } .avert-sujets p + p { margin-top: var(--sp-2); } .avert-sujets span[aria-hidden] { color: var(--warn); font-weight: 700; } /* Jauges : un trait de 4 px, rempli d'encre ou de la couleur d'un état ; le seuil, un trait d'encre. */ .jauge { position: relative; height: 4px; background: var(--line); overflow: hidden; min-width: 60px; } .jauge > span { position: absolute; inset: 0 auto 0 0; width: calc(var(--valeur, 0) * 100%); background: var(--ink-3); transition: width var(--t-med) var(--ease); } .jauge.ok > span { background: var(--ok); } .jauge.att > span { background: var(--warn); } .jauge.crit > span { background: var(--danger); } .jauge .repere { position: absolute; top: 0; bottom: 0; width: 2px; left: calc(var(--pos, 0) * 100%); background: var(--ink); } /* Onglets : des mots sur un filet ; le courant en gras, souligné de deux pixels verts. */ .onglets { display: flex; gap: var(--sp-2); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-4); flex-wrap: wrap; } .onglets [role="tab"] { border: 0; background: none; color: var(--ink-2); font: 400 var(--fs-md)/1 var(--f-sans); min-height: 44px; padding: 0 var(--sp-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .onglets.onglets-outils [role="tab"] { font-size: var(--fs-sm); } /* Outils du test : les quatre onglets sur UNE ligne, même dans la colonne de 500 px (1440 px) ; un libellé passe plutôt sur deux lignes (« Repères de l'appel » tombait seul sous les autres). */ .onglets.onglets-outils { flex-wrap: nowrap; gap: 0; } .onglets.onglets-outils [role="tab"] { flex: 1 1 auto; white-space: normal; line-height: 1.25; padding: var(--sp-2) var(--sp-3); text-align: left; } .onglets [role="tab"][aria-selected="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); } .onglets [role="tab"]:hover { color: var(--ink); } /* ================================================================== 12. MESSAGES & DIALOGUES (ce qui flotte : les seules ombres) */ .toasts { position: fixed; z-index: 90; right: var(--sp-4); bottom: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); max-width: min(420px, calc(100vw - 32px)); pointer-events: none; } .page-console .toasts { bottom: 110px; } .toast { pointer-events: auto; display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-ctl); background: var(--ink); color: var(--bg); box-shadow: var(--ombre); font-size: var(--fs-sm); animation: entree var(--t-med) var(--ease); } .toast.erreur { background: var(--danger); color: var(--on-fill); } .toast.succes { background: var(--ok); color: var(--on-fill); } .toast .btn { min-height: 44px; background: transparent; color: inherit; border-color: currentColor; } .toast .btn:hover { background: color-mix(in srgb, currentColor 14%, transparent); border-color: currentColor; } /* Sur l'aplat du message, l'anneau vert ne se verrait pas : il prend la couleur de la page. */ .toast :focus-visible { outline-color: var(--bg); } @keyframes entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } dialog { border: 1px solid var(--line); border-radius: var(--r-card); padding: 0; background: var(--surface); color: var(--ink); box-shadow: var(--ombre); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); } dialog.large { width: min(820px, calc(100vw - 32px)); } dialog::backdrop { background: var(--voile); } .dialogue-corps { padding: var(--sp-6) var(--sp-6) var(--sp-5); overflow: auto; } .dialogue-corps h2 { font-size: 1.5rem; letter-spacing: -.025em; margin-bottom: var(--sp-3); } .dialogue-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--line); background: var(--bg); border-radius: 0 0 var(--r-card) var(--r-card); } .dialogue-actions .gauche { margin-inline-end: auto; } dialog.danger { border-color: var(--danger); border-width: 2px; } .raccourcis-liste { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-4); } .raccourcis-liste dt { white-space: nowrap; } .raccourcis-liste dd { margin: 0; color: var(--ink-2); } /* Titre qui reçoit le focus à l'ouverture (annoncé par le lecteur d'écran) : sans anneau. */ dialog h2[tabindex="-1"]:focus { outline: none; } /* Mode écran partagé : flou des données personnelles. */ .ecran-partage .pii { filter: blur(7px); -webkit-user-select: none; user-select: none; } .ecran-partage input.pii, .ecran-partage textarea.pii { color: transparent; text-shadow: 0 0 10px var(--ink); filter: none; } /* ================================================================== ACCUEIL */ /* La page se compose comme une couverture de rapport : « Bonjour. » à gauche, les trois chiffres de l'avancement à droite, sur le même filet ; puis la prochaine conversation et ce qu'il reste à faire. Trois colonnes (5 · gouttière · 7) : les deux rangées tombent sur la même grille. */ .accueil-bonjour { font: 700 5rem/.95 var(--f-sans); letter-spacing: -.05em; margin: 0 0 var(--sp-4); } .accueil-date { margin: 0; } .accueil-grille { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .contenu:has(> .accueil-grille) { display: grid; grid-template-columns: minmax(0, 5fr) var(--sp-6) minmax(0, 7fr); align-items: start; } .contenu:has(> .accueil-grille) > * { grid-column: 1 / -1; } .contenu:has(> .accueil-grille) > .en-tete-page { grid-column: 1 / 3; grid-row: 1; align-self: stretch; margin-bottom: var(--sp-7); } .contenu:has(> .accueil-grille) > .section:has(> #titre-test) { grid-column: 3; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; margin: 0 0 var(--sp-7); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); } .contenu:has(> .accueil-grille) > .accueil-grille { margin-top: 0; } .contenu:has(> .accueil-grille) > .etat-technique { margin-top: var(--sp-7); } /* La prochaine conversation : une carte blanche, ouverte par deux pixels de vert ; l'heure en grand. */ .carte-prochaine { box-shadow: inset 0 2px 0 var(--accent); padding-inline: var(--sp-6); } .carte.carte-prochaine > h2:first-child { font-size: var(--fs-capitales); line-height: 1.3; letter-spacing: var(--capitales); color: var(--accent); margin-bottom: var(--sp-5); } .carte-prochaine .vide { padding: var(--sp-2) 0; } .carte-prochaine .petit.discret { color: var(--ink-3); } .carte-prochaine .btn-primaire { min-height: 52px; padding-inline: var(--sp-5); margin-top: var(--sp-3); font-size: 1rem; } .carte-prochaine .aide { margin-top: var(--sp-3); } .prochain .heure { font: 700 1.875rem/1.1 var(--f-sans); letter-spacing: var(--serre); font-variant-numeric: tabular-nums; margin-bottom: var(--sp-2); } .prochain .heure .discret { font: 400 var(--fs-md)/1.4 var(--f-sans); letter-spacing: 0; color: var(--ink-2); } .prochain .qui { font: 400 1rem/1.4 var(--f-sans); color: var(--ink-2); margin: var(--sp-1) 0 var(--sp-2); } .prochain .qui strong { color: var(--ink); font-size: var(--fs-lg); } .prochain .qui .pseudo-discret { margin-inline-start: var(--sp-2); } /* Ce qu'il reste à faire : une ligne par geste, sur un filet ; l'icône dit l'urgence. */ #nb-a-faire { font-size: .875rem; font-weight: 400; letter-spacing: .04em; color: var(--ink-3); vertical-align: super; } .a-faire { list-style: none; padding: 0; margin: 0; } .a-faire li { display: grid; grid-template-columns: 24px 1fr auto; gap: var(--sp-4); align-items: center; padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); font-size: .9688rem; line-height: 1.5; } .a-faire li:first-child { padding-top: var(--sp-1); } .a-faire li:last-child { border-bottom: 0; } /* « Rien en attente » : une phrase seule, pas une ligne à trois colonnes (elle s'écrivait un mot par ligne). */ .a-faire li.vide { display: block; } .a-faire .icone { font-size: 1rem; text-align: center; color: var(--ink-3); font-weight: 700; } .a-faire li.urgent .icone { color: var(--warn); } .a-faire li.bloquant .icone { color: var(--danger); } .a-faire li.bloquant > span:nth-child(2) { font-weight: 700; color: var(--ink); } .a-faire a, .a-faire .btn { white-space: nowrap; } /* Rendez-vous d'une personne : la ligne, puis ses gestes (sa console, déplacer, annuler, agenda). */ .a-faire li.rendez-vous { grid-template-columns: 24px minmax(0, 1fr); } .a-faire li.rendez-vous .actions-rdv { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--sp-2); } /* « Agenda » (bouton discret) seul sous trois boutons bordés se lisait comme un libellé : même contour qu'eux. */ .actions-rdv .btn-discret { border-color: var(--line-strong); } .a-faire li.rendez-vous.passe { color: var(--ink-2); padding: var(--sp-2) 0; } .a-faire li.rendez-vous.passe > span:last-child { display: none; } #planif-passes { margin-top: var(--sp-3); } /* Avancement du test : trois chiffres de rapport annuel, sur un filet d'encre. Le libellé au-dessus, le chiffre dessous ; le premier compteur se lit d'une traite (« 3 personnes sur 10 »). */ #titre-test.surtitre { margin-bottom: 0; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--ink); } .compteurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: start; } .compteur { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: var(--sp-4) var(--sp-5) var(--sp-1) 0; color: var(--ink-2); } .compteur + .compteur { padding-inline-start: var(--sp-5); border-inline-start: 1px solid var(--line); } .compteur:first-child { flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 10px; padding-top: calc(var(--sp-4) + 1.5rem + 6px); } .compteur strong { font: 700 2.5rem/1 var(--f-sans); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; margin: 0; } .compteur span { font-size: var(--fs-sm); line-height: 1.5rem; } #titre-test ~ p.petit { margin-top: var(--sp-4); } #titre-test ~ p.petit > a { display: inline-flex; align-items: center; min-height: 44px; } /* État technique du poste : une ligne grise, en bas. */ .etat-technique { color: var(--ink-3); font-size: var(--fs-sm); margin: var(--sp-6) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--line); } /* ================================================================== PERSONNES */ .quotas { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); align-items: center; font-size: var(--fs-md); margin: var(--sp-3) 0; } .tableau-personnes td, .tableau-personnes th { padding-block: 22px; vertical-align: middle; } .personne-cellule { display: grid; gap: 6px; } .personne-cellule .id-pseudo { font-size: .8125rem; display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; margin-inline-end: 6px; } .personne-cellule .serif { font: 700 1.375rem/1 var(--f-sans); letter-spacing: -.03em; color: var(--ink); } .personne-cellule .profil-texte { font-size: .8125rem; color: var(--ink-3); font-weight: 400; } .ou-en-est { font-weight: 700; } .ou-en-est .detail { display: block; margin-top: 2px; font-weight: 400; font-size: var(--fs-sm); color: var(--ink-3); } /* ================================================================== FICHE D'UNE PERSONNE */ .fil-ariane { margin-bottom: var(--sp-2); color: var(--ink-3); } .fil-ariane a { color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .fil-ariane a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); } .fiche-entete { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } .en-tete-page .fiche-entete h1 { margin: 0; font-size: 4rem; letter-spacing: -.045em; } .fiche-entete .pseudo { font: 700 var(--fs-capitales)/1 var(--f-sans); letter-spacing: .1em; color: var(--ink-2); font-variant-numeric: tabular-nums; border: 1px solid var(--line-strong); border-radius: var(--r-cartouche); padding: 6px 8px 5px; } /* L'essentiel et UNE action en haut. */ .fiche-action { display: grid; gap: var(--sp-2); justify-items: start; } .fiche-action .btn { min-height: 52px; padding-inline: var(--sp-5); font-size: var(--fs-md); } .fiche-action .aide { max-width: 36ch; } /* Le sommaire : une ligne de mots entre deux filets, collée en haut au défilement (un seul jeu de filets sous la fiche : celui du sommaire, pas celui de l'en-tête). */ .en-tete-page:has(+ .sommaire) { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--sp-6); } .sommaire { position: sticky; top: 0; z-index: 10; background: var(--bg); border-block: 1px solid var(--line); margin: 0 0 var(--sp-7); padding: 0; } .sommaire ul { display: flex; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .sommaire a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font: 400 var(--fs-sm)/1 var(--f-sans); color: var(--ink-2); text-decoration: none; } .sommaire a:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); } .telephone-masque { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; } .telephone-masque output { font: 700 var(--fs-lg)/1 var(--f-sans); letter-spacing: .04em; font-variant-numeric: tabular-nums; } /* Accords signés : une ligne par accord ; le formulaire de saisie en colonne, à droite, sans écraser le texte (un