/* Classical — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */ /* Les polices sont chargées par + dans chaque page : un @import ici sérialisait CSS → CSS → police et retardait le premier texte peint. */ :root { --color-bg: #0f1730; --color-surface: #16204a; --color-text: #f4f5fa; --color-accent: #ff8a4c; --color-accent-2: #ff8a4c; --color-divider: color-mix(in srgb, #f4f5fa 18%, transparent); /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the same step of any role matches the others in visual value. */ --color-neutral-100: #1a2340; --color-neutral-200: #232d4f; --color-neutral-300: #2f3a5e; --color-neutral-400: #4a5578; --color-neutral-500: #6b7594; --color-neutral-600: #9098b3; --color-neutral-700: #b7bdd0; --color-neutral-800: #d8dbe8; --color-neutral-900: #f4f5fa; --color-accent-100: #3a2211; --color-accent-200: #5c3417; --color-accent-300: #8c4c1e; --color-accent-400: #c1651f; --color-accent-500: #ff8a4c; --color-accent-600: #ffa066; --color-accent-700: #ffb98c; --color-accent-800: #ffd6b3; --color-accent-900: #ffe9d6; --color-accent-2-100: #3a2211; --color-accent-2-200: #5c3417; --color-accent-2-300: #8c4c1e; --color-accent-2-400: #c1651f; --color-accent-2-500: #ff8a4c; --color-accent-2-600: #ffa066; --color-accent-2-700: #ffb98c; --color-accent-2-800: #ffd6b3; --color-accent-2-900: #ffe9d6; --font-heading: "Archivo", system-ui, sans-serif; --font-heading-weight: 800; --font-body: "Instrument Sans", system-ui, sans-serif; --space-1: 4.6px; --space-2: 9.2px; --space-3: 13.8px; --space-4: 18.4px; --space-5: 23px; --space-6: 27.6px; --space-7: 32.2px; --space-8: 36.8px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 7px; /* Elevation — derived from the ground: soft ink-tinted shadows on a light theme, a hairline edge + ambient darkness on a dark one. */ --shadow-sm: 0 1px 2px color-mix(in srgb, #000 30%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #000 34%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #000 44%, transparent); } /* Clair option — a crisp, cool-neutral light alternative (distinct from the warm cream/sepia tones), cycled in before the default dark ground. */ html[data-theme="clair"] { --color-bg: #f7f7f8; --color-surface: #ececef; --color-text: #17181d; --color-accent: #b6672c; --color-accent-2: #b6672c; --color-divider: color-mix(in srgb, #17181d 12%, transparent); --color-neutral-100: #f3f3f5; --color-neutral-200: #e7e7ea; --color-neutral-300: #d3d3d9; --color-neutral-400: #aeaeb8; --color-neutral-500: #86868f; --color-neutral-600: #63636b; --color-neutral-700: #46464d; --color-neutral-800: #2b2b30; --color-neutral-900: #17181d; --color-accent-100: #f7e6d2; --color-accent-200: #f0cda3; --color-accent-300: #e2a86a; --color-accent-400: #cf8a45; --color-accent-500: #b6672c; --color-accent-600: #99551f; --color-accent-700: #7a4318; --color-accent-800: #5c3211; --color-accent-900: #3a2211; --color-accent-2-100: #f7e6d2; --color-accent-2-200: #f0cda3; --color-accent-2-300: #e2a86a; --color-accent-2-400: #cf8a45; --color-accent-2-500: #b6672c; --color-accent-2-600: #99551f; --color-accent-2-700: #7a4318; --color-accent-2-800: #5c3211; --color-accent-2-900: #3a2211; --shadow-sm: 0 1px 2px color-mix(in srgb, #17181d 8%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #17181d 12%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #17181d 18%, transparent); } html[data-theme="clair"] .plate { border-color: var(--color-surface); } /* Cream option — a lighter, warmer alternative palette the visitor can pick instead of the site's default dark ground. Toggled via [data-theme="cream"] on by theme-toggle.js; falls back silently if unset. */ html[data-theme="cream"] { --color-bg: #f7f2e6; --color-surface: #efe6d1; --color-text: #29231a; --color-accent: #b6672c; --color-accent-2: #b6672c; --color-divider: color-mix(in srgb, #29231a 14%, transparent); --color-neutral-100: #f4efe0; --color-neutral-200: #ece2cb; --color-neutral-300: #ddd0b2; --color-neutral-400: #c2b28e; --color-neutral-500: #9c8b68; --color-neutral-600: #786a4d; --color-neutral-700: #574c37; --color-neutral-800: #3a3123; --color-neutral-900: #211b12; --color-accent-100: #f7e5cd; --color-accent-200: #efcb9e; --color-accent-300: #e0a563; --color-accent-400: #cc8641; --color-accent-500: #b6672c; --color-accent-600: #97531f; --color-accent-700: #784118; --color-accent-800: #593010; --color-accent-900: #38200f; --color-accent-2-100: #f7e5cd; --color-accent-2-200: #efcb9e; --color-accent-2-300: #e0a563; --color-accent-2-400: #cc8641; --color-accent-2-500: #b6672c; --color-accent-2-600: #97531f; --color-accent-2-700: #784118; --color-accent-2-800: #593010; --color-accent-2-900: #38200f; --shadow-sm: 0 1px 2px color-mix(in srgb, #29231a 10%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #29231a 14%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #29231a 20%, transparent); } html[data-theme="cream"] .plate { border-color: var(--color-surface); } /* Sepia option — a second warm alternative, higher-contrast than cream. */ html[data-theme="sepia"] { --color-bg: #efe3cd; --color-surface: #e4d3ae; --color-text: #241a0d; --color-accent: #8a4a1c; --color-accent-2: #8a4a1c; --color-divider: color-mix(in srgb, #241a0d 18%, transparent); --color-neutral-100: #ebdcc0; --color-neutral-200: #e0cba3; --color-neutral-300: #cdb27f; --color-neutral-400: #ab8c5c; --color-neutral-500: #83693f; --color-neutral-600: #614d2d; --color-neutral-700: #453620; --color-neutral-800: #2c2113; --color-neutral-900: #1a1409; --color-accent-100: #f0dcbf; --color-accent-200: #e3bd85; --color-accent-300: #cf9752; --color-accent-400: #ac6f2e; --color-accent-500: #8a4a1c; --color-accent-600: #6e3b16; --color-accent-700: #542c10; --color-accent-800: #3b1f0b; --color-accent-900: #241207; --color-accent-2-100: #f0dcbf; --color-accent-2-200: #e3bd85; --color-accent-2-300: #cf9752; --color-accent-2-400: #ac6f2e; --color-accent-2-500: #8a4a1c; --color-accent-2-600: #6e3b16; --color-accent-2-700: #542c10; --color-accent-2-800: #3b1f0b; --color-accent-2-900: #241207; --shadow-sm: 0 1px 2px color-mix(in srgb, #241a0d 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #241a0d 18%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #241a0d 26%, transparent); } html[data-theme="sepia"] .plate { border-color: var(--color-surface); } /* Amande option — a soft almond-green alternative. */ html[data-theme="amande"] { --color-bg: #f2f5ea; --color-surface: #e6ecd6; --color-text: #20261a; --color-accent: #5f7a3d; --color-accent-2: #5f7a3d; --color-divider: color-mix(in srgb, #20261a 18%, transparent); --color-neutral-100: #e9efdb; --color-neutral-200: #dbe4c4; --color-neutral-300: #c3d1a0; --color-neutral-400: #a2b878; --color-neutral-500: #7e9757; --color-neutral-600: #5f7a3d; --color-neutral-700: #435728; --color-neutral-800: #2c3a19; --color-neutral-900: #1a230f; --color-accent-100: #e6edd4; --color-accent-200: #c9d9a3; --color-accent-300: #a7c072; --color-accent-400: #82a34c; --color-accent-500: #5f7a3d; --color-accent-600: #4c6230; --color-accent-700: #3a4a25; --color-accent-800: #29341a; --color-accent-900: #19200f; --color-accent-2-100: #e6edd4; --color-accent-2-200: #c9d9a3; --color-accent-2-300: #a7c072; --color-accent-2-400: #82a34c; --color-accent-2-500: #5f7a3d; --color-accent-2-600: #4c6230; --color-accent-2-700: #3a4a25; --color-accent-2-800: #29341a; --color-accent-2-900: #19200f; --shadow-sm: 0 1px 2px color-mix(in srgb, #20261a 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #20261a 18%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #20261a 26%, transparent); } html[data-theme="amande"] .plate { border-color: var(--color-surface); } /* Rose option — a soft pastel-pink alternative. */ html[data-theme="rose"] { --color-bg: #faf1f2; --color-surface: #f2dfe2; --color-text: #2b171a; --color-accent: #a85a72; --color-accent-2: #a85a72; --color-divider: color-mix(in srgb, #2b171a 18%, transparent); --color-neutral-100: #f5e3e6; --color-neutral-200: #edd0d5; --color-neutral-300: #ddadb6; --color-neutral-400: #c48594; --color-neutral-500: #a5657a; --color-neutral-600: #834f60; --color-neutral-700: #613a47; --color-neutral-800: #40262f; --color-neutral-900: #26161a; --color-accent-100: #f6e1e7; --color-accent-200: #e9bccb; --color-accent-300: #d493ab; --color-accent-400: #bf6e8d; --color-accent-500: #a85a72; --color-accent-600: #86485c; --color-accent-700: #653645; --color-accent-800: #45252f; --color-accent-900: #29161c; --color-accent-2-100: #f6e1e7; --color-accent-2-200: #e9bccb; --color-accent-2-300: #d493ab; --color-accent-2-400: #bf6e8d; --color-accent-2-500: #a85a72; --color-accent-2-600: #86485c; --color-accent-2-700: #653645; --color-accent-2-800: #45252f; --color-accent-2-900: #29161c; --shadow-sm: 0 1px 2px color-mix(in srgb, #2b171a 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2b171a 18%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2b171a 26%, transparent); } html[data-theme="rose"] .plate { border-color: var(--color-surface); } /* — theme switch control, injected by theme-toggle.js next to .nav-brand — */ .theme-switch { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--space-2); padding: 6px 12px; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: transparent; color: var(--color-text); cursor: pointer; font-family: var(--font-body); font-size: 13px; line-height: 1; } .theme-switch { min-height: 36px; } .theme-switch:hover { border-color: var(--color-accent); } .theme-switch:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .theme-switch svg { width: 14px; height: 14px; flex: none; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); } .plate{filter:sepia(0.22) saturate(0.82) contrast(1.05);box-sizing:border-box; border:6px solid var(--color-surface);outline:1px solid var(--color-divider)} /* ══════════════════════════════════════════════════════════════════════════ Components — built with the tokens above. Plain CSS on plain HTML: no JavaScript, no build step. Each class is documented in readme.md and demonstrated in foundations/ and components/. ══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-size: 18px; line-height: 1.6; font-weight: 400; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 var(--space-2); } h1 { font-size: 56px; } h2 { font-size: 40px; } h3 { font-size: 28px; } h4 { font-size: 22px; } h5 { font-size: 18px; } h6 { font-size: 14px; } h6 { letter-spacing: 0.08em; text-transform: uppercase; } /* Surtitre de page ou de section. Visuellement identique à un h6, mais ce n'est pas un titre : placé avant le h1, il créait un saut de niveau 1→6 dans la structure du document et un intitulé parasite dans la liste des titres des lecteurs d'écran. */ .page-kicker { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.05; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--space-2); } section[data-fiche] .page-kicker, .rap .page-kicker, .apercu-feuille .page-kicker { color: #6d4f1a; } p { margin: 0 0 var(--space-3); } a { color: var(--color-accent); text-underline-offset: 3px; } img { display: block; max-width: 100%; } figure { margin: 0; } figcaption { font-size: 12px; margin-top: var(--space-1); color: var(--color-text); } .text-muted { color: color-mix(in srgb, var(--color-text) 85%, transparent); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } /* — rules — */ .hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); } /* — buttons — */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px — the pair sits side by side in sign-up rows */ background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); } .btn svg { display: block; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary { color: var(--color-accent-700); border-color: var(--color-accent); } /* trait accent, texte au pas foncé pour tenir 4,5:1 */ .btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); } .btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); } .btn-secondary { border-color: var(--color-divider); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); } .btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-2); border-color: transparent; } .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } .btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); } .btn-icon { width: 36px; height: 36px; padding: 0; } .btn-block { width: 100%; margin-top: var(--space-2); } /* — forms — */ .field > label, .field > .field-legend { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 88%, transparent); } .input { width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: transparent; border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } textarea.input { min-height: 90px; resize: vertical; } .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; } .radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-divider); } .radio:hover .dot { border-color: var(--color-accent); } .radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); } .radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; } .seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; } .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); } .seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); } .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; } /* — cards — */ .card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-divider); transition: border-color .15s ease; } details.card > summary { list-style: none; } details.card:hover, a.card:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-divider)); } .card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); } /* AA à 10px : l'accent pur mesure 3,4:1 */ .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; line-height: 1.2; } .card-body { margin: 0; font-size: 16px; opacity: 0.97; flex: 1; } .card-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: color-mix(in srgb, var(--color-text) 82%, transparent); } .elev-sm { box-shadow: var(--shadow-sm); } .elev-md { box-shadow: var(--shadow-md); } .elev-lg { box-shadow: var(--shadow-lg); } /* — tags — */ .tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); } .tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); } .tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); } .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); } .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); } /* — navigation — */ .nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); } .nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; } a.card { transition: border-color .15s, background .15s; } a.card:hover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, transparent); } a.card:active { border-color: var(--color-accent-600); } a.card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .nav a { color: inherit; text-decoration: none; font-size: 14px; white-space: nowrap; } .nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); } /* — tables — */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-900); padding: var(--space-2); border-bottom: 1px solid var(--color-divider); } .table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); } .table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } /* — dialog — */ .dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); } .dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); border: 1px solid var(--color-divider); } .dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; } .dialog-body { font-size: 15px; opacity: 0.97; } .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); } @media print { .nav, .btn-secondary, footer { display: none !important; } .print-header { display: block !important; margin-bottom: var(--space-4); } .print-only { display: block !important; } .no-print { display: none !important; } section { padding: 0 !important; max-width: none !important; } [style*="position:sticky"] { position: static !important; } [style*="grid-template-columns:0.85fr"] { display: block !important; } [style*="filter:blur"] { filter: none !important; pointer-events: auto !important; user-select: auto !important; } .card { break-inside: avoid; box-shadow: none !important; } .elev-sm, .elev-md { box-shadow: none !important; } } .print-only { display: none; } .help-dot { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; background:var(--color-neutral-300); color:var(--color-text); font-size:10px; font-weight:700; cursor:help; margin-left:4px; vertical-align:middle; } /* launch: responsive */ @media (max-width: 900px) { /* L'en-tête est monté avec un style en ligne (flex-wrap:nowrap; white-space:nowrap) qui l'emportait sur cette règle : sur mobile la barre dépassait la fenêtre de 78 px et TOUTES les pages défilaient horizontalement. */ .nav { flex-wrap: wrap !important; white-space: normal !important; row-gap: var(--space-2); padding-left: var(--space-3); padding-right: var(--space-3); } .nav .btn { margin-left: 0 !important; } [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } [style*="max-width:1120px"], [style*="max-width:820px"] { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; } h1 { font-size: clamp(28px, 7vw, 40px) !important; } h2 { font-size: clamp(22px, 5.5vw, 30px) !important; } section[style*="height:72vh"] { height: auto !important; min-height: 0 !important; padding: var(--space-8) 0 !important; } } /* Un tableau à en-têtes insécables impose sa largeur minimale à toute la page : sur mobile les fiches de dossier défilaient horizontalement en entier. Le tableau devient sa propre zone de défilement — la page, elle, reste dans la fenêtre. À l'écran seulement : à l'impression le tableau doit rester un tableau. */ @media screen and (max-width: 720px) { .table { display: block; overflow-x: auto; max-width: 100%; } /* Un élément de grille ne descend pas sous la largeur minimale de son contenu tant que min-width vaut auto : la colonne restait à la largeur du tableau qu'elle contenait. */ /* Un élément de grille ou de flex ne descend pas sous la largeur minimale de son contenu tant que min-width vaut auto : une colonne restait à la largeur du tableau ou du champ qu'elle contenait, et toute la page défilait. Spécificité nulle : une largeur minimale explicitement déclarée ailleurs continue de l'emporter. */ body * { min-width: 0; } /* Barres de boutons en ligne (pagination du dossier, actions) : le style en ligne impose une rangée unique, qui dépassait la fenêtre. */ [style*="display:flex"][style*="space-between"], [style*="display: flex"][style*="space-between"] { flex-wrap: wrap !important; } } @media (max-width: 620px) { /* Les cibles tactiles sont fixées plus bas dans la feuille (bloc « cibles minimales mobiles ») : declarees ici, elles etaient annulees par les regles .btn/.input de la section « saisies et boutons », posterieures et de meme specificite. */ .nav { gap: var(--space-2); } .nav form { width: 100%; margin-left: 0 !important; order: 10; } .nav form .input { width: 100% !important; } .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } [style*="grid-template-columns:220px 1fr"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns:1fr 100px 100px auto"] { grid-template-columns: 1fr !important; } input.input[style*="width:"], select.input[style*="width:"] { width: 100% !important; max-width: 100% !important; } } /* ══ Passe d'amélioration — lisibilité des résultats, ergonomie des saisies ══ */ /* Chiffres alignés : tous les montants, tableaux et champs numériques */ .table, .input, [data-figure], [data-hero-figure], .kpi-value, input[type="number"], td, th { font-variant-numeric: tabular-nums; } /* Tableaux de résultats : zébrure, en-tête collant, colonnes chiffrées à droite */ /* L'en-tête à 60 % d'opacité du jeu de styles importé mesurait 4,36:1 à 11 px, sous le seuil AA. Relevé à 80 % : même effet d'atténuation, contraste conforme. La règle porte sur thead th pour l'emporter sur .table th quel que soit l'ordre des feuilles. */ .table thead th { position: sticky; top: 0; z-index: 2; background: var(--color-bg); color: color-mix(in srgb, var(--color-text) 80%, transparent); } .table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--color-text) 3%, transparent); } .table tbody tr:hover { background: color-mix(in srgb, var(--color-accent) 9%, transparent); } .table td[data-num], .table th[data-num] { text-align: right; } .table tfoot td { font-weight: 600; border-top: 2px solid var(--color-divider); border-bottom: 0; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-height: 60vh; overflow-y: auto; } /* Graphiques SVG : texte jamais sous 11px, lignes nettes */ svg text { font-family: var(--font-body); font-size: max(11px, 1em); } svg .grid line, svg [data-grid] { stroke: var(--color-divider); shape-rendering: crispEdges; } /* Saisies : cibles confortables, pas de flèches parasites, états explicites */ .input { min-height: 40px; transition: border-color .12s ease, box-shadow .12s ease; } .input:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); } .input:disabled, .input[readonly] { opacity: .6; cursor: not-allowed; background: color-mix(in srgb, var(--color-text) 4%, transparent); } .input[aria-invalid="true"] { border-color: #d4553c; } .input::placeholder { color: color-mix(in srgb, var(--color-text) 45%, transparent); } input[type="number"].input { text-align: right; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } select.input { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .field > label, .field > .field-legend { font-size: 12.5px; letter-spacing: .01em; } .field + .field { margin-top: var(--space-3); } .field-hint { display: block; font-size: 11.5px; margin-top: 4px; color: color-mix(in srgb, var(--color-text) 62%, transparent); } .seg-opt { min-height: 36px; } input[type="range"] { width: 100%; height: 22px; accent-color: var(--color-accent); } input[type="range"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Boutons : cible minimale et transition sobre */ .btn { min-height: 38px; transition: background-color .12s ease, border-color .12s ease; } /* Boutons secondaires d'action en ligne (appliquer, annuler, retirer…) : une seule taille compacte au lieu des styles en ligne 11/12/12,5 px dispersés dans les pages. Placé après la règle .btn ci-dessus pour l'emporter ; la cible tactile de 44 px du bloc mobile en fin de feuille reste prioritaire (media query postérieure). */ .btn-sm { font-size: 12px; padding: 4px 12px; min-height: 30px; white-space: nowrap; } .btn-ghost.btn-sm { padding-inline: var(--space-2); } /* Boutons de ligne de tableau (Espace client, Espace admin) : le cran en dessous. */ .btn-xs { font-size: 11px; padding: 2px 8px; min-height: 24px; white-space: nowrap; } /* Boutons qui sont en réalité des liens de texte (« Mot de passe oublié ? », « Renvoyer un code ») : ils étaient écrits en ghost + padding:0 en ligne, donc sans aucun soulignement ni affordance, dans une boîte de 38 px. */ .btn-link { padding: 0; min-height: 24px; border: 0; font-size: 13px; color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--color-accent) 45%, transparent); } .btn-link:hover, .btn-link:active { background: none; text-decoration-color: currentColor; } /* Typographie de lecture */ p, li { text-wrap: pretty; } h1, h2, h3, h4 { text-wrap: balance; } :where(p, li, td, th, label, .card-body) { overflow-wrap: anywhere; } html { scroll-behavior: smooth; } /* Respect des préférences système */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* Impression : tableaux entiers, en-têtes répétés */ @media print { .table thead th { position: static; background: transparent; } .table-wrap { max-height: none; overflow: visible; } thead { display: table-header-group; } tr { break-inside: avoid; } } /* ══ Teintes supplémentaires ══ */ html[data-theme="encre"] { --color-bg: #0d1220; --color-surface: #161f36; --color-text: #eef1f7; --color-accent: #ff8a4c; --color-accent-2: #ff8a4c; --color-divider: color-mix(in srgb, #eef1f7 18%, transparent); --color-neutral-100: color-mix(in oklab, #eef1f7 6%, #0d1220); --color-neutral-200: color-mix(in oklab, #eef1f7 13%, #0d1220); --color-neutral-300: color-mix(in oklab, #eef1f7 24%, #0d1220); --color-neutral-400: color-mix(in oklab, #eef1f7 40%, #0d1220); --color-neutral-500: color-mix(in oklab, #eef1f7 56%, #0d1220); --color-neutral-600: color-mix(in oklab, #eef1f7 70%, #0d1220); --color-neutral-700: color-mix(in oklab, #eef1f7 82%, #0d1220); --color-neutral-800: color-mix(in oklab, #eef1f7 92%, #0d1220); --color-neutral-900: #eef1f7; --color-accent-100: color-mix(in oklab, #ff8a4c 8%, black); --color-accent-200: color-mix(in oklab, #ff8a4c 22%, black); --color-accent-300: color-mix(in oklab, #ff8a4c 45%, black); --color-accent-400: color-mix(in oklab, #ff8a4c 72%, black); --color-accent-500: #ff8a4c; --color-accent-600: color-mix(in oklab, #ff8a4c 82%, white); --color-accent-700: color-mix(in oklab, #ff8a4c 64%, white); --color-accent-800: color-mix(in oklab, #ff8a4c 44%, white); --color-accent-900: color-mix(in oklab, #ff8a4c 26%, white); --color-accent-2-100: color-mix(in oklab, #ff8a4c 8%, black); --color-accent-2-200: color-mix(in oklab, #ff8a4c 22%, black); --color-accent-2-300: color-mix(in oklab, #ff8a4c 45%, black); --color-accent-2-400: color-mix(in oklab, #ff8a4c 72%, black); --color-accent-2-500: #ff8a4c; --color-accent-2-600: color-mix(in oklab, #ff8a4c 82%, white); --color-accent-2-700: color-mix(in oklab, #ff8a4c 64%, white); --color-accent-2-800: color-mix(in oklab, #ff8a4c 44%, white); --color-accent-2-900: color-mix(in oklab, #ff8a4c 26%, white); --shadow-sm: 0 1px 2px color-mix(in srgb, #000 30%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #000 34%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #000 44%, transparent); } html[data-theme="encre"] .plate { border-color: var(--color-surface); } html[data-theme="foret"] { --color-bg: #0e1a13; --color-surface: #17281e; --color-text: #eaf2ea; --color-accent: #d9a648; --color-accent-2: #d9a648; --color-divider: color-mix(in srgb, #eaf2ea 18%, transparent); --color-neutral-100: color-mix(in oklab, #eaf2ea 6%, #0e1a13); --color-neutral-200: color-mix(in oklab, #eaf2ea 13%, #0e1a13); --color-neutral-300: color-mix(in oklab, #eaf2ea 24%, #0e1a13); --color-neutral-400: color-mix(in oklab, #eaf2ea 40%, #0e1a13); --color-neutral-500: color-mix(in oklab, #eaf2ea 56%, #0e1a13); --color-neutral-600: color-mix(in oklab, #eaf2ea 70%, #0e1a13); --color-neutral-700: color-mix(in oklab, #eaf2ea 82%, #0e1a13); --color-neutral-800: color-mix(in oklab, #eaf2ea 92%, #0e1a13); --color-neutral-900: #eaf2ea; --color-accent-100: color-mix(in oklab, #d9a648 8%, black); --color-accent-200: color-mix(in oklab, #d9a648 22%, black); --color-accent-300: color-mix(in oklab, #d9a648 45%, black); --color-accent-400: color-mix(in oklab, #d9a648 72%, black); --color-accent-500: #d9a648; --color-accent-600: color-mix(in oklab, #d9a648 82%, white); --color-accent-700: color-mix(in oklab, #d9a648 64%, white); --color-accent-800: color-mix(in oklab, #d9a648 44%, white); --color-accent-900: color-mix(in oklab, #d9a648 26%, white); --color-accent-2-100: color-mix(in oklab, #d9a648 8%, black); --color-accent-2-200: color-mix(in oklab, #d9a648 22%, black); --color-accent-2-300: color-mix(in oklab, #d9a648 45%, black); --color-accent-2-400: color-mix(in oklab, #d9a648 72%, black); --color-accent-2-500: #d9a648; --color-accent-2-600: color-mix(in oklab, #d9a648 82%, white); --color-accent-2-700: color-mix(in oklab, #d9a648 64%, white); --color-accent-2-800: color-mix(in oklab, #d9a648 44%, white); --color-accent-2-900: color-mix(in oklab, #d9a648 26%, white); --shadow-sm: 0 1px 2px color-mix(in srgb, #000 30%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #000 34%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #000 44%, transparent); } html[data-theme="foret"] .plate { border-color: var(--color-surface); } html[data-theme="anthracite"] { --color-bg: #161719; --color-surface: #212328; --color-text: #f1f2f4; --color-accent: #e08a4f; --color-accent-2: #e08a4f; --color-divider: color-mix(in srgb, #f1f2f4 18%, transparent); --color-neutral-100: color-mix(in oklab, #f1f2f4 6%, #161719); --color-neutral-200: color-mix(in oklab, #f1f2f4 13%, #161719); --color-neutral-300: color-mix(in oklab, #f1f2f4 24%, #161719); --color-neutral-400: color-mix(in oklab, #f1f2f4 40%, #161719); --color-neutral-500: color-mix(in oklab, #f1f2f4 56%, #161719); --color-neutral-600: color-mix(in oklab, #f1f2f4 70%, #161719); --color-neutral-700: color-mix(in oklab, #f1f2f4 82%, #161719); --color-neutral-800: color-mix(in oklab, #f1f2f4 92%, #161719); --color-neutral-900: #f1f2f4; --color-accent-100: color-mix(in oklab, #e08a4f 8%, black); --color-accent-200: color-mix(in oklab, #e08a4f 22%, black); --color-accent-300: color-mix(in oklab, #e08a4f 45%, black); --color-accent-400: color-mix(in oklab, #e08a4f 72%, black); --color-accent-500: #e08a4f; --color-accent-600: color-mix(in oklab, #e08a4f 82%, white); --color-accent-700: color-mix(in oklab, #e08a4f 64%, white); --color-accent-800: color-mix(in oklab, #e08a4f 44%, white); --color-accent-900: color-mix(in oklab, #e08a4f 26%, white); --color-accent-2-100: color-mix(in oklab, #e08a4f 8%, black); --color-accent-2-200: color-mix(in oklab, #e08a4f 22%, black); --color-accent-2-300: color-mix(in oklab, #e08a4f 45%, black); --color-accent-2-400: color-mix(in oklab, #e08a4f 72%, black); --color-accent-2-500: #e08a4f; --color-accent-2-600: color-mix(in oklab, #e08a4f 82%, white); --color-accent-2-700: color-mix(in oklab, #e08a4f 64%, white); --color-accent-2-800: color-mix(in oklab, #e08a4f 44%, white); --color-accent-2-900: color-mix(in oklab, #e08a4f 26%, white); --shadow-sm: 0 1px 2px color-mix(in srgb, #000 30%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #000 34%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #000 44%, transparent); } html[data-theme="anthracite"] .plate { border-color: var(--color-surface); } html[data-theme="papier"] { --color-bg: #ffffff; --color-surface: #f1f1f2; --color-text: #111214; --color-accent: #a85d24; --color-accent-2: #a85d24; --color-divider: color-mix(in srgb, #111214 14%, transparent); --color-neutral-100: color-mix(in oklab, #111214 6%, #ffffff); --color-neutral-200: color-mix(in oklab, #111214 13%, #ffffff); --color-neutral-300: color-mix(in oklab, #111214 24%, #ffffff); --color-neutral-400: color-mix(in oklab, #111214 40%, #ffffff); --color-neutral-500: color-mix(in oklab, #111214 56%, #ffffff); --color-neutral-600: color-mix(in oklab, #111214 70%, #ffffff); --color-neutral-700: color-mix(in oklab, #111214 82%, #ffffff); --color-neutral-800: color-mix(in oklab, #111214 92%, #ffffff); --color-neutral-900: #111214; --color-accent-100: color-mix(in oklab, #a85d24 8%, white); --color-accent-200: color-mix(in oklab, #a85d24 22%, white); --color-accent-300: color-mix(in oklab, #a85d24 45%, white); --color-accent-400: color-mix(in oklab, #a85d24 72%, white); --color-accent-500: #a85d24; --color-accent-600: color-mix(in oklab, #a85d24 82%, black); --color-accent-700: color-mix(in oklab, #a85d24 64%, black); --color-accent-800: color-mix(in oklab, #a85d24 44%, black); --color-accent-900: color-mix(in oklab, #a85d24 26%, black); --color-accent-2-100: color-mix(in oklab, #a85d24 8%, white); --color-accent-2-200: color-mix(in oklab, #a85d24 22%, white); --color-accent-2-300: color-mix(in oklab, #a85d24 45%, white); --color-accent-2-400: color-mix(in oklab, #a85d24 72%, white); --color-accent-2-500: #a85d24; --color-accent-2-600: color-mix(in oklab, #a85d24 82%, black); --color-accent-2-700: color-mix(in oklab, #a85d24 64%, black); --color-accent-2-800: color-mix(in oklab, #a85d24 44%, black); --color-accent-2-900: color-mix(in oklab, #a85d24 26%, black); --shadow-sm: 0 1px 2px color-mix(in srgb, #111214 10%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #111214 14%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #111214 20%, transparent); } html[data-theme="papier"] .plate { border-color: var(--color-surface); } html[data-theme="ardoise"] { --color-bg: #eef1f5; --color-surface: #e0e6ee; --color-text: #161c25; --color-accent: #b6672c; --color-accent-2: #b6672c; --color-divider: color-mix(in srgb, #161c25 14%, transparent); --color-neutral-100: color-mix(in oklab, #161c25 6%, #eef1f5); --color-neutral-200: color-mix(in oklab, #161c25 13%, #eef1f5); --color-neutral-300: color-mix(in oklab, #161c25 24%, #eef1f5); --color-neutral-400: color-mix(in oklab, #161c25 40%, #eef1f5); --color-neutral-500: color-mix(in oklab, #161c25 56%, #eef1f5); --color-neutral-600: color-mix(in oklab, #161c25 70%, #eef1f5); --color-neutral-700: color-mix(in oklab, #161c25 82%, #eef1f5); --color-neutral-800: color-mix(in oklab, #161c25 92%, #eef1f5); --color-neutral-900: #161c25; --color-accent-100: color-mix(in oklab, #b6672c 8%, white); --color-accent-200: color-mix(in oklab, #b6672c 22%, white); --color-accent-300: color-mix(in oklab, #b6672c 45%, white); --color-accent-400: color-mix(in oklab, #b6672c 72%, white); --color-accent-500: #b6672c; --color-accent-600: color-mix(in oklab, #b6672c 82%, black); --color-accent-700: color-mix(in oklab, #b6672c 64%, black); --color-accent-800: color-mix(in oklab, #b6672c 44%, black); --color-accent-900: color-mix(in oklab, #b6672c 26%, black); --color-accent-2-100: color-mix(in oklab, #b6672c 8%, white); --color-accent-2-200: color-mix(in oklab, #b6672c 22%, white); --color-accent-2-300: color-mix(in oklab, #b6672c 45%, white); --color-accent-2-400: color-mix(in oklab, #b6672c 72%, white); --color-accent-2-500: #b6672c; --color-accent-2-600: color-mix(in oklab, #b6672c 82%, black); --color-accent-2-700: color-mix(in oklab, #b6672c 64%, black); --color-accent-2-800: color-mix(in oklab, #b6672c 44%, black); --color-accent-2-900: color-mix(in oklab, #b6672c 26%, black); --shadow-sm: 0 1px 2px color-mix(in srgb, #161c25 10%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #161c25 14%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #161c25 20%, transparent); } html[data-theme="ardoise"] .plate { border-color: var(--color-surface); } html[data-theme="sable"] { --color-bg: #f5f0e5; --color-surface: #eae1ce; --color-text: #241f16; --color-accent: #a2622c; --color-accent-2: #a2622c; --color-divider: color-mix(in srgb, #241f16 14%, transparent); --color-neutral-100: color-mix(in oklab, #241f16 6%, #f5f0e5); --color-neutral-200: color-mix(in oklab, #241f16 13%, #f5f0e5); --color-neutral-300: color-mix(in oklab, #241f16 24%, #f5f0e5); --color-neutral-400: color-mix(in oklab, #241f16 40%, #f5f0e5); --color-neutral-500: color-mix(in oklab, #241f16 56%, #f5f0e5); --color-neutral-600: color-mix(in oklab, #241f16 70%, #f5f0e5); --color-neutral-700: color-mix(in oklab, #241f16 82%, #f5f0e5); --color-neutral-800: color-mix(in oklab, #241f16 92%, #f5f0e5); --color-neutral-900: #241f16; --color-accent-100: color-mix(in oklab, #a2622c 8%, white); --color-accent-200: color-mix(in oklab, #a2622c 22%, white); --color-accent-300: color-mix(in oklab, #a2622c 45%, white); --color-accent-400: color-mix(in oklab, #a2622c 72%, white); --color-accent-500: #a2622c; --color-accent-600: color-mix(in oklab, #a2622c 82%, black); --color-accent-700: color-mix(in oklab, #a2622c 64%, black); --color-accent-800: color-mix(in oklab, #a2622c 44%, black); --color-accent-900: color-mix(in oklab, #a2622c 26%, black); --color-accent-2-100: color-mix(in oklab, #a2622c 8%, white); --color-accent-2-200: color-mix(in oklab, #a2622c 22%, white); --color-accent-2-300: color-mix(in oklab, #a2622c 45%, white); --color-accent-2-400: color-mix(in oklab, #a2622c 72%, white); --color-accent-2-500: #a2622c; --color-accent-2-600: color-mix(in oklab, #a2622c 82%, black); --color-accent-2-700: color-mix(in oklab, #a2622c 64%, black); --color-accent-2-800: color-mix(in oklab, #a2622c 44%, black); --color-accent-2-900: color-mix(in oklab, #a2622c 26%, black); --shadow-sm: 0 1px 2px color-mix(in srgb, #241f16 10%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #241f16 14%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #241f16 20%, transparent); } html[data-theme="sable"] .plate { border-color: var(--color-surface); } html[data-theme="lin"] { --color-bg: #f0f2ec; --color-surface: #e2e7da; --color-text: #1e231a; --color-accent: #6b7a4a; --color-accent-2: #6b7a4a; --color-divider: color-mix(in srgb, #1e231a 14%, transparent); --color-neutral-100: color-mix(in oklab, #1e231a 6%, #f0f2ec); --color-neutral-200: color-mix(in oklab, #1e231a 13%, #f0f2ec); --color-neutral-300: color-mix(in oklab, #1e231a 24%, #f0f2ec); --color-neutral-400: color-mix(in oklab, #1e231a 40%, #f0f2ec); --color-neutral-500: color-mix(in oklab, #1e231a 56%, #f0f2ec); --color-neutral-600: color-mix(in oklab, #1e231a 70%, #f0f2ec); --color-neutral-700: color-mix(in oklab, #1e231a 82%, #f0f2ec); --color-neutral-800: color-mix(in oklab, #1e231a 92%, #f0f2ec); --color-neutral-900: #1e231a; --color-accent-100: color-mix(in oklab, #6b7a4a 8%, white); --color-accent-200: color-mix(in oklab, #6b7a4a 22%, white); --color-accent-300: color-mix(in oklab, #6b7a4a 45%, white); --color-accent-400: color-mix(in oklab, #6b7a4a 72%, white); --color-accent-500: #6b7a4a; --color-accent-600: color-mix(in oklab, #6b7a4a 82%, black); --color-accent-700: color-mix(in oklab, #6b7a4a 64%, black); --color-accent-800: color-mix(in oklab, #6b7a4a 44%, black); --color-accent-900: color-mix(in oklab, #6b7a4a 26%, black); --color-accent-2-100: color-mix(in oklab, #6b7a4a 8%, white); --color-accent-2-200: color-mix(in oklab, #6b7a4a 22%, white); --color-accent-2-300: color-mix(in oklab, #6b7a4a 45%, white); --color-accent-2-400: color-mix(in oklab, #6b7a4a 72%, white); --color-accent-2-500: #6b7a4a; --color-accent-2-600: color-mix(in oklab, #6b7a4a 82%, black); --color-accent-2-700: color-mix(in oklab, #6b7a4a 64%, black); --color-accent-2-800: color-mix(in oklab, #6b7a4a 44%, black); --color-accent-2-900: color-mix(in oklab, #6b7a4a 26%, black); --shadow-sm: 0 1px 2px color-mix(in srgb, #1e231a 10%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #1e231a 14%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #1e231a 20%, transparent); } html[data-theme="lin"] .plate { border-color: var(--color-surface); } html[data-theme="bordeaux"] { --color-bg: #faf7f7; --color-surface: #f0e8e9; --color-text: #221618; --color-accent: #8c2f3f; --color-accent-2: #8c2f3f; --color-divider: color-mix(in srgb, #221618 14%, transparent); --color-neutral-100: color-mix(in oklab, #221618 6%, #faf7f7); --color-neutral-200: color-mix(in oklab, #221618 13%, #faf7f7); --color-neutral-300: color-mix(in oklab, #221618 24%, #faf7f7); --color-neutral-400: color-mix(in oklab, #221618 40%, #faf7f7); --color-neutral-500: color-mix(in oklab, #221618 56%, #faf7f7); --color-neutral-600: color-mix(in oklab, #221618 70%, #faf7f7); --color-neutral-700: color-mix(in oklab, #221618 82%, #faf7f7); --color-neutral-800: color-mix(in oklab, #221618 92%, #faf7f7); --color-neutral-900: #221618; --color-accent-100: color-mix(in oklab, #8c2f3f 8%, white); --color-accent-200: color-mix(in oklab, #8c2f3f 22%, white); --color-accent-300: color-mix(in oklab, #8c2f3f 45%, white); --color-accent-400: color-mix(in oklab, #8c2f3f 72%, white); --color-accent-500: #8c2f3f; --color-accent-600: color-mix(in oklab, #8c2f3f 82%, black); --color-accent-700: color-mix(in oklab, #8c2f3f 64%, black); --color-accent-800: color-mix(in oklab, #8c2f3f 44%, black); --color-accent-900: color-mix(in oklab, #8c2f3f 26%, black); --color-accent-2-100: color-mix(in oklab, #8c2f3f 8%, white); --color-accent-2-200: color-mix(in oklab, #8c2f3f 22%, white); --color-accent-2-300: color-mix(in oklab, #8c2f3f 45%, white); --color-accent-2-400: color-mix(in oklab, #8c2f3f 72%, white); --color-accent-2-500: #8c2f3f; --color-accent-2-600: color-mix(in oklab, #8c2f3f 82%, black); --color-accent-2-700: color-mix(in oklab, #8c2f3f 64%, black); --color-accent-2-800: color-mix(in oklab, #8c2f3f 44%, black); --color-accent-2-900: color-mix(in oklab, #8c2f3f 26%, black); --shadow-sm: 0 1px 2px color-mix(in srgb, #221618 10%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #221618 14%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #221618 20%, transparent); } html[data-theme="bordeaux"] .plate { border-color: var(--color-surface); } html[data-theme="prusse"] { --color-bg: #f4f6f8; --color-surface: #e6ebf0; --color-text: #141a20; --color-accent: #1f4d70; --color-accent-2: #1f4d70; --color-divider: color-mix(in srgb, #141a20 14%, transparent); --color-neutral-100: color-mix(in oklab, #141a20 6%, #f4f6f8); --color-neutral-200: color-mix(in oklab, #141a20 13%, #f4f6f8); --color-neutral-300: color-mix(in oklab, #141a20 24%, #f4f6f8); --color-neutral-400: color-mix(in oklab, #141a20 40%, #f4f6f8); --color-neutral-500: color-mix(in oklab, #141a20 56%, #f4f6f8); --color-neutral-600: color-mix(in oklab, #141a20 70%, #f4f6f8); --color-neutral-700: color-mix(in oklab, #141a20 82%, #f4f6f8); --color-neutral-800: color-mix(in oklab, #141a20 92%, #f4f6f8); --color-neutral-900: #141a20; --color-accent-100: color-mix(in oklab, #1f4d70 8%, white); --color-accent-200: color-mix(in oklab, #1f4d70 22%, white); --color-accent-300: color-mix(in oklab, #1f4d70 45%, white); --color-accent-400: color-mix(in oklab, #1f4d70 72%, white); --color-accent-500: #1f4d70; --color-accent-600: color-mix(in oklab, #1f4d70 82%, black); --color-accent-700: color-mix(in oklab, #1f4d70 64%, black); --color-accent-800: color-mix(in oklab, #1f4d70 44%, black); --color-accent-900: color-mix(in oklab, #1f4d70 26%, black); --color-accent-2-100: color-mix(in oklab, #1f4d70 8%, white); --color-accent-2-200: color-mix(in oklab, #1f4d70 22%, white); --color-accent-2-300: color-mix(in oklab, #1f4d70 45%, white); --color-accent-2-400: color-mix(in oklab, #1f4d70 72%, white); --color-accent-2-500: #1f4d70; --color-accent-2-600: color-mix(in oklab, #1f4d70 82%, black); --color-accent-2-700: color-mix(in oklab, #1f4d70 64%, black); --color-accent-2-800: color-mix(in oklab, #1f4d70 44%, black); --color-accent-2-900: color-mix(in oklab, #1f4d70 26%, black); --shadow-sm: 0 1px 2px color-mix(in srgb, #141a20 10%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #141a20 14%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #141a20 20%, transparent); } html[data-theme="prusse"] .plate { border-color: var(--color-surface); } html[data-theme="bouteille"] { --color-bg: #f4f7f4; --color-surface: #e5ede7; --color-text: #141d18; --color-accent: #22563c; --color-accent-2: #22563c; --color-divider: color-mix(in srgb, #141d18 14%, transparent); --color-neutral-100: color-mix(in oklab, #141d18 6%, #f4f7f4); --color-neutral-200: color-mix(in oklab, #141d18 13%, #f4f7f4); --color-neutral-300: color-mix(in oklab, #141d18 24%, #f4f7f4); --color-neutral-400: color-mix(in oklab, #141d18 40%, #f4f7f4); --color-neutral-500: color-mix(in oklab, #141d18 56%, #f4f7f4); --color-neutral-600: color-mix(in oklab, #141d18 70%, #f4f7f4); --color-neutral-700: color-mix(in oklab, #141d18 82%, #f4f7f4); --color-neutral-800: color-mix(in oklab, #141d18 92%, #f4f7f4); --color-neutral-900: #141d18; --color-accent-100: color-mix(in oklab, #22563c 8%, white); --color-accent-200: color-mix(in oklab, #22563c 22%, white); --color-accent-300: color-mix(in oklab, #22563c 45%, white); --color-accent-400: color-mix(in oklab, #22563c 72%, white); --color-accent-500: #22563c; --color-accent-600: color-mix(in oklab, #22563c 82%, black); --color-accent-700: color-mix(in oklab, #22563c 64%, black); --color-accent-800: color-mix(in oklab, #22563c 44%, black); --color-accent-900: color-mix(in oklab, #22563c 26%, black); --color-accent-2-100: color-mix(in oklab, #22563c 8%, white); --color-accent-2-200: color-mix(in oklab, #22563c 22%, white); --color-accent-2-300: color-mix(in oklab, #22563c 45%, white); --color-accent-2-400: color-mix(in oklab, #22563c 72%, white); --color-accent-2-500: #22563c; --color-accent-2-600: color-mix(in oklab, #22563c 82%, black); --color-accent-2-700: color-mix(in oklab, #22563c 64%, black); --color-accent-2-800: color-mix(in oklab, #22563c 44%, black); --color-accent-2-900: color-mix(in oklab, #22563c 26%, black); --shadow-sm: 0 1px 2px color-mix(in srgb, #141d18 10%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #141d18 14%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #141d18 20%, transparent); } html[data-theme="bouteille"] .plate { border-color: var(--color-surface); } /* — sélecteur de teinte (menu) — */ .theme-menu-wrap { position: relative; display: inline-flex; } .theme-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 210px; max-height: 60vh; overflow: auto; padding: 6px; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .theme-menu-group { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); padding: 8px 8px 4px; } .theme-opt { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 6px 8px; border: 0; border-radius: var(--radius-md); cursor: pointer; background: transparent; color: var(--color-text); font-family: var(--font-body); font-size: 13.5px; text-align: left; } .theme-opt:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); } .theme-opt[aria-checked="true"] { color: var(--color-accent); } .theme-opt .chip { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent); background: linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50% 100%); } .theme-opt .tick { margin-left: auto; opacity: 0; font-size: 12px; } .theme-opt[aria-checked="true"] .tick { opacity: 1; } .pdf-export-mode, .pdf-export-mode * { color: #1a1a18 !important; background-color: #ffffff !important; box-shadow: none !important; } /* ——— BelleViager — impression ——— Le papier est blanc, quelle que soit la teinte à l'écran. Sans cette remise à plat, une page imprimée depuis une teinte sombre sortait quasi vierge : le fond était forcé en blanc mais --color-text restait #f4f5fa, et les navigateurs ne peignent pas les fonds de cartes. On rejoue donc localement la palette claire pour TOUTES les teintes, sur html comme sur les blocs qui la redéfinissent. */ @media print { html, html[data-theme] { --color-bg: #ffffff; --color-surface: #ececef; --color-text: #17181d; --color-accent: #b6672c; --color-accent-2: #b6672c; --color-divider: color-mix(in srgb, #17181d 24%, transparent); --color-neutral-100: #f3f3f5; --color-neutral-200: #e7e7ea; --color-neutral-300: #d3d3d9; --color-neutral-400: #aeaeb8; --color-neutral-500: #86868f; --color-neutral-600: #63636b; --color-neutral-700: #46464d; --color-neutral-800: #2b2b30; --color-neutral-900: #17181d; --color-accent-100: #f7e6d2; --color-accent-200: #f0cda3; --color-accent-300: #e2a86a; --color-accent-400: #cf8a45; --color-accent-500: #b6672c; --color-accent-600: #99551f; --color-accent-700: #7a4318; --color-accent-800: #5c3211; --color-accent-900: #3a2211; --color-accent-2-100: #f7e6d2; --color-accent-2-200: #f0cda3; --color-accent-2-300: #e2a86a; --color-accent-2-400: #cf8a45; --color-accent-2-500: #b6672c; --color-accent-2-600: #99551f; --color-accent-2-700: #7a4318; --color-accent-2-800: #5c3211; --color-accent-2-900: #3a2211; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; } body { color: var(--color-text) !important; } .card { background: transparent !important; border-color: var(--color-divider) !important; } .no-print { display: none !important; } html, body { background: #fff !important; } .card, details, figure, .plate, [data-duo] > * { break-inside: avoid; page-break-inside: avoid; } /* Un tableau ne se coupe plus en deux pages : s'il ne tient pas dans la place restante, il bascule entier sur la page suivante. Les tableaux plus longs qu'une page restent fractionnes par le moteur d'impression (ligne par ligne). */ table, .table-wrap, figure > table { break-inside: avoid; page-break-inside: avoid; } caption { break-after: avoid; } thead { display: table-header-group; } tfoot { display: table-footer-group; } tr, img { break-inside: avoid; page-break-inside: avoid; } h1, h2, h3, h4, .card-title { break-after: avoid; page-break-after: avoid; } p, li { orphans: 3; widows: 3; } [data-print-break] { break-before: page; page-break-before: always; } a[href]:after { content: ""; } } /* — feuilles blanches (fiches, synthèses, rapports imprimables) — Ces blocs sont du papier : ils ne doivent jamais hériter d'un thème d'interface pensé pour un fond sombre. Les variables de couleur sont redéfinies localement, et les éléments que la couche composants colore (th, liens, kickers) sont reciblés avec une spécificité suffisante. */ /* .apercu-feuille : l'aperçu de dossier de l'espace client est la même feuille blanche, mais montée dans un
— sans elle, sur une teinte sombre le tableau qu'elle contient héritait de l'en-tête sombre et du texte clair de l'interface, illisibles sur du papier. */ section[data-fiche], .rap, .apercu-feuille { --color-text: #201f1d; --color-accent: #7a5a20; --color-accent-600: #7a5a20; --color-accent-700: #6d4f1a; --color-accent-300: #d9c9a6; --color-accent-100: #f4ece0; --color-neutral-600: #4a4844; --color-neutral-900: #201f1d; --color-neutral-200: #efece7; --color-neutral-100: #f6f4f1; --color-divider: #d8d5d0; --color-bg: #ffffff; --color-surface: #ffffff; color: #201f1d; } section[data-fiche] p, section[data-fiche] li, section[data-fiche] span, section[data-fiche] h1, section[data-fiche] h2, section[data-fiche] h3, section[data-fiche] h4, section[data-fiche] h5, section[data-fiche] h6, section[data-fiche] dt, section[data-fiche] dd, section[data-fiche] small, section[data-fiche] strong, section[data-fiche] em, section[data-fiche] caption, .rap p, .rap li, .rap span, .rap h1, .rap h2, .rap h3, .rap h4, .rap h5, .rap h6, .rap dt, .rap dd, .rap small, .rap strong, .rap em, .rap caption, .apercu-feuille :is(p, li, span, h1, h2, h3, h4, h5, h6, dt, dd, small, strong, em, caption) { color: #201f1d; } section[data-fiche] table th, section[data-fiche] table td, .rap table th, .rap table td, .apercu-feuille table th, .apercu-feuille table td { color: #201f1d; border-color: #d8d5d0; } section[data-fiche] table th, .rap table th, .apercu-feuille table th { background: #f4f2ef; } section[data-fiche] .card-kicker, .rap .card-kicker, section[data-fiche] h6, .rap h6, .apercu-feuille .card-kicker, .apercu-feuille h6 { color: #6d4f1a; } section[data-fiche] a, .rap a, .apercu-feuille a { color: #6d4f1a; } section[data-fiche] .card, .rap .card, .apercu-feuille .card { background: #ffffff; border-color: #d8d5d0; } .apercu-feuille .table tbody tr:hover { background: #f7f5f2; } /* ══ Contraste du texte en accent sur les teintes claires ══ Le pas 500 de l'accent (#b6672c et ses équivalents) ne tient que 3,6:1 sur la surface claire : insuffisant pour du texte de petite taille — étiquettes, liens de note, en-têtes de tableau — qui l'utilisent partout. Sur les teintes claires l'accent de texte descend donc d'un pas (600), qui tient 4,8:1 ; les pas 100-400 des fonds teintés et l'accent des teintes sombres sont inchangés. */ html[data-theme="clair"], html[data-theme="papier"], html[data-theme="ardoise"], html[data-theme="cream"], html[data-theme="sable"], html[data-theme="sepia"], html[data-theme="lin"], html[data-theme="amande"], html[data-theme="rose"], html[data-theme="bordeaux"], html[data-theme="prusse"], html[data-theme="bouteille"] { --color-accent: var(--color-accent-600); --color-accent-2: var(--color-accent-2-600); } /* Sections de fond (data-seo-content) et cadre légal : repliées par défaut, le titre servant de commande. Le contenu reste dans le DOM, donc indexable. */ [data-seo-details] > summary { cursor: pointer; list-style: none; } [data-seo-details] > summary::-webkit-details-marker { display: none; } [data-seo-details] > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; } [data-seo-details] > summary:hover h2 { color: var(--color-accent-800); } [data-seo-chevron] { transition: transform .15s ease; } [data-seo-details][open] [data-seo-chevron] { transform: rotate(90deg); } [data-seo-hint-open] { display: none; } [data-seo-details][open] [data-seo-hint-open] { display: inline; } [data-seo-details][open] [data-seo-hint-closed] { display: none; } /* ══ Cibles minimales mobiles ══ Doit rester en fin de feuille : ces règles ont la même spécificité que .btn/.input/.seg-opt plus haut et ne l'emportent que par leur position. Sous 620 px, toute commande tactile mesure au moins 44 px (recommandation WCAG 2.2 « Target Size » et charte du site). */ @media (max-width: 620px) { .btn { min-height: 44px; } /* Le lien-bouton garde son allure de lien (pas de padding latéral) mais retrouve la hauteur de cible : la règle .btn ci-dessus s'applique aussi à lui. */ .btn-link { padding-inline: 0; } .input { min-height: 44px; } .seg-opt { min-height: 44px; } .theme-opt { min-height: 44px; } /* Chrome d'en-tête : le sélecteur de teinte et les trois « A » de taille du texte échappaient à la règle (le premier n'est pas un .btn, les seconds sont stylés en ligne par texte-plus.js) — ils restaient à 28 et 20 px sur mobile. */ .theme-switch { min-height: 44px; } /* !important : texte-plus.js pose min-width/min-height en ligne (36 px), et un style en ligne l'emporte sur la feuille — sans cela la règle mobile restait sans effet. */ [data-text-scale] button { min-width: 44px !important; min-height: 44px !important; } }