/* * Jetons de conception, remise a zero et typographie. * * Palette derivee du logo de l'application (chien + chat dans un hexagone) : * navy #021e40, bleu profond #163e6b, bleu moyen #28649f, cyan #1081b5 et * bleu ciel #6fc0e4. Les deux themes ne redefinissent QUE ces jetons : aucun * composant ne doit coder une couleur en dur, sinon le theme sombre casse. */ :root { color-scheme: light; /* Marque */ --rh-brand-950: #021e40; --rh-brand-800: #163e6b; --rh-brand-600: #28649f; --rh-brand-500: #1081b5; --rh-brand-300: #6fc0e4; /* Surfaces et texte */ --rh-bg: #eef2f7; --rh-bg-accent: radial-gradient(1200px 420px at 50% -220px, #dce9f5 0%, transparent 70%); --rh-surface: #ffffff; --rh-surface-muted: #f7fafc; --rh-surface-strong: #e9f0f8; --rh-ink: #0d1f33; --rh-ink-soft: #3a4f66; --rh-muted: #6a7f95; --rh-line: #dae3ed; --rh-line-strong: #b2c3d5; /* Actions */ --rh-primary: #28649f; --rh-primary-hover: #1d4d7e; --rh-primary-ink: #ffffff; --rh-primary-soft: #e7f0f9; --rh-primary-line: #b9d2e8; --rh-accent: #0f6d99; --rh-accent-soft: #e2f1f8; --rh-accent-line: #b3daea; /* Semantique */ --rh-success: #0f7a52; --rh-success-soft: #e6f6ef; --rh-success-line: #b3e0cd; --rh-warning: #96610b; --rh-warning-soft: #fdf3e2; --rh-warning-line: #edd6a8; --rh-danger: #b42318; --rh-danger-soft: #fdecea; --rh-danger-line: #f1c2bd; --rh-info: #1d5fd0; --rh-info-soft: #ecf2fe; --rh-info-line: #c2d5f7; --rh-alternance: #6d3bb3; --rh-alternance-soft: #f2ebfb; --rh-alternance-line: #d8c4f0; /* Formes */ --rh-radius-sm: 6px; --rh-radius-md: 9px; --rh-radius-lg: 14px; --rh-radius-pill: 999px; --rh-shadow-sm: 0 1px 2px rgb(13 31 51 / 6%), 0 6px 16px rgb(13 31 51 / 5%); --rh-shadow-md: 0 2px 4px rgb(13 31 51 / 6%), 0 14px 34px rgb(13 31 51 / 8%); --rh-shadow-lg: 0 24px 60px rgb(13 31 51 / 16%); --rh-ring: 0 0 0 3px rgb(40 100 159 / 28%); /* Rythme */ --rh-space-1: 4px; --rh-space-2: 8px; --rh-space-3: 12px; --rh-space-4: 16px; --rh-space-5: 22px; --rh-space-6: 30px; --rh-space-7: 42px; --rh-page-width: 1520px; /* Typographie */ --rh-font-sans: Inter, "Segoe UI Variable Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --rh-font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace; } /* * Theme sombre. Pose sur par le script anti-flash de * base.html.twig, puis bascule par le controleur Stimulus `theme`. */ :root[data-theme="dark"] { color-scheme: dark; --rh-bg: #0a1420; --rh-bg-accent: radial-gradient(1200px 420px at 50% -220px, #12293f 0%, transparent 70%); --rh-surface: #12202e; --rh-surface-muted: #0e1a26; --rh-surface-strong: #1b2f43; --rh-ink: #e7eff7; --rh-ink-soft: #b6c6d6; --rh-muted: #8599ad; --rh-line: #22364a; --rh-line-strong: #35506b; --rh-primary: #6fc0e4; --rh-primary-hover: #93d3ee; --rh-primary-ink: #04182b; --rh-primary-soft: #14314a; --rh-primary-line: #2b5878; --rh-accent: #7ed0ee; --rh-accent-soft: #10304a; --rh-accent-line: #2a5c7c; --rh-success: #46cf9c; --rh-success-soft: #0d2f26; --rh-success-line: #1f5a49; --rh-warning: #f0b429; --rh-warning-soft: #35290d; --rh-warning-line: #6a5320; --rh-danger: #ff8a80; --rh-danger-soft: #391b19; --rh-danger-line: #6f3630; --rh-info: #7fb2ff; --rh-info-soft: #16273f; --rh-info-line: #2d4a75; --rh-alternance: #c9a7ff; --rh-alternance-soft: #2d2142; --rh-alternance-line: #62488c; --rh-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%), 0 6px 16px rgb(0 0 0 / 30%); --rh-shadow-md: 0 2px 4px rgb(0 0 0 / 40%), 0 14px 34px rgb(0 0 0 / 42%); --rh-shadow-lg: 0 24px 60px rgb(0 0 0 / 55%); --rh-ring: 0 0 0 3px rgb(111 192 228 / 32%); } /* Remise a zero ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* L'attribut `hidden` doit toujours masquer : toute regle posant un `display` (grid, flex...) ecrase silencieusement le `display: none` du navigateur. */ [hidden] { display: none !important; } html { min-height: 100%; -webkit-text-size-adjust: 100%; } body { min-height: 100vh; margin: 0; background-color: var(--rh-bg); background-image: var(--rh-bg-accent); background-repeat: no-repeat; color: var(--rh-ink); font-family: var(--rh-font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* `body` est exclu volontairement : l'y inclure poserait `font-family: inherit` sur lui, donc la police par defaut de (un serif), en ecrasant la declaration ci-dessus. Seuls les controles de formulaire ont besoin d'heriter. */ input, select, textarea, button { font-family: inherit; } img, svg { max-width: 100%; height: auto; } /* Typographie ------------------------------------------------------------ */ h1, h2, h3, h4, p, ul, ol, dl, figure { margin-top: 0; } h1, h2, h3, h4 { margin-bottom: var(--rh-space-2); color: var(--rh-ink); font-weight: 700; letter-spacing: -0.012em; line-height: 1.2; text-wrap: balance; } h1 { font-size: 1.65rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } h4 { font-size: 0.875rem; text-transform: none; } p { margin-bottom: var(--rh-space-3); } p:last-child { margin-bottom: 0; } small { font-size: 0.8125rem; } strong { font-weight: 650; } /* Pas de `font-weight` ici : un lien peut envelopper tout un bloc (carte du tableau de bord) et le gras se propagerait a son contenu. Les composants qui ont besoin d'un lien appuye le declarent eux-memes. */ a { border-radius: var(--rh-radius-sm); color: var(--rh-accent); text-decoration-color: color-mix(in srgb, currentcolor 35%, transparent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--rh-primary-hover); text-decoration-color: currentcolor; } code, kbd { padding: 0.1em 0.4em; border: 1px solid var(--rh-line); border-radius: var(--rh-radius-sm); background: var(--rh-surface-muted); color: var(--rh-ink-soft); font-family: var(--rh-font-mono); font-size: 0.86em; overflow-wrap: anywhere; } hr { height: 1px; margin: var(--rh-space-5) 0; border: 0; background: var(--rh-line); } /* Accessibilite --------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--rh-primary); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Lien d'evitement : visible seulement au clavier. */ .skip-link { position: absolute; z-index: 100; top: var(--rh-space-2); left: 50%; padding: var(--rh-space-2) var(--rh-space-4); border-radius: var(--rh-radius-pill); background: var(--rh-primary); color: var(--rh-primary-ink); font-weight: 600; transform: translate(-50%, -220%); transition: transform 140ms ease; } .skip-link:focus-visible { color: var(--rh-primary-ink); transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }