/* ROSTERIA — Feuille globale, sans framework ni dépendance. Charger avant les styles propres aux pages. Thème : ou . Sans attribut (ou avec data-theme="system"), suit le système. Classes principales : .container .card .btn .badge .field .table-wrap. Les variables --r-* permettent de personnaliser les composants. */ /* 1. Identité et palette claire */ :root { color-scheme: light; --r-bg: #f8f9fb; --r-surface: #ffffff; --r-surface-alt: #f2f3f7; --r-text: #191c25; --r-text-muted: #626877; --r-border: #e6e8ee; --r-input-border: #7d8391; --r-primary: #6d4aff; --r-primary-hover: #5935e8; --r-primary-active: #4c2bc7; --r-on-primary: #ffffff; --r-primary-soft: #f0ecff; --r-success: #16724d; --r-success-soft: #eaf6ef; --r-warning: #986010; --r-warning-soft: #fff4df; --r-danger: #b4233a; --r-danger-soft: #fff0f2; --r-info: #245ea8; --r-info-soft: #edf4ff; --r-shadow-sm: 0 2px 8px rgb(25 28 37 / 4%); --r-shadow-md: 0 8px 28px rgb(25 28 37 / 7%); --r-shadow-lg: 0 24px 70px rgb(25 28 37 / 12%); --r-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --r-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace; --r-radius-sm: 6px; --r-radius: 10px; --r-radius-lg: 15px; --r-radius-xl: 22px; --r-space-1: .25rem; --r-space-2: .5rem; --r-space-3: .75rem; --r-space-4: 1rem; --r-space-5: 1.5rem; --r-space-6: 2rem; --r-space-7: 3rem; --r-space-8: 4rem; --r-duration: 160ms; --r-container: 1160px; } /* 2. Palette sombre explicite */ :root[data-theme="dark"] { color-scheme: dark; --r-bg: #111318; --r-surface: #1b1e26; --r-surface-alt: #242832; --r-text: #f3f4f7; --r-text-muted: #a6adbb; --r-border: #30343f; --r-input-border: #777e8d; --r-primary: #a594ff; --r-primary-hover: #b9abff; --r-primary-active: #9580f0; --r-on-primary: #171124; --r-primary-soft: #30284c; --r-success: #83dcb2; --r-success-soft: #1d362d; --r-warning: #efc378; --r-warning-soft: #3a3020; --r-danger: #ff9aaa; --r-danger-soft: #3d232d; --r-info: #9cc5ff; --r-info-soft: #20324b; --r-shadow-sm: 0 2px 8px rgb(0 0 0 / 12%); --r-shadow-md: 0 8px 28px rgb(0 0 0 / 18%); --r-shadow-lg: 0 24px 70px rgb(0 0 0 / 28%); } /* Même palette quand le choix est laissé au système. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]), :root[data-theme="system"] { color-scheme: dark; --r-bg: #111318; --r-surface: #1b1e26; --r-surface-alt: #242832; --r-text: #f3f4f7; --r-text-muted: #a6adbb; --r-border: #30343f; --r-input-border: #777e8d; --r-primary: #a594ff; --r-primary-hover: #b9abff; --r-primary-active: #9580f0; --r-on-primary: #171124; --r-primary-soft: #30284c; --r-success: #83dcb2; --r-success-soft: #1d362d; --r-warning: #efc378; --r-warning-soft: #3a3020; --r-danger: #ff9aaa; --r-danger-soft: #3d232d; --r-info: #9cc5ff; --r-info-soft: #20324b; --r-shadow-sm: 0 2px 8px rgb(0 0 0 / 12%); --r-shadow-md: 0 8px 28px rgb(0 0 0 / 18%); --r-shadow-lg: 0 24px 70px rgb(0 0 0 / 28%); } } /* 3. Base et typographie */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; } body { margin: 0; background: var(--r-bg); color: var(--r-text); font-family: var(--r-font); font-size: 1rem; line-height: 1.6; letter-spacing: -.015em; overflow-wrap: break-word; } [hidden] { display: none !important; } img, video { display: block; max-width: 100%; height: auto; } svg { vertical-align: middle; } button, input, textarea, select { font: inherit; } button, a, input, select, textarea, summary { touch-action: manipulation; } h1, h2, h3, h4, h5, h6 { margin: 0 0 .75rem; color: var(--r-text); line-height: 1.2; font-weight: 650; letter-spacing: -.035em; text-wrap: balance; } h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); } h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); } h3 { font-size: 1.25rem; } h4, h5, h6 { font-size: 1rem; } p { margin: 0 0 1rem; } small, .text-small { font-size: .875rem; } strong { font-weight: 650; } ul, ol { padding-inline-start: 1.5rem; } hr { margin-block: 1.5rem; border: 0; border-top: 1px solid var(--r-border); } code, pre { font-family: var(--r-font-mono); font-size: .875em; } code { background: var(--r-surface-alt); padding: .15em .35em; border-radius: 4px; } pre { padding: 1rem; background: var(--r-surface-alt); border-radius: var(--r-radius); overflow-x: auto; } pre code { padding: 0; } ::selection { background: var(--r-primary); color: var(--r-on-primary); } :focus-visible { outline: 3px solid var(--r-primary); outline-offset: 3px; } /* 4. Liens : soulignement conservé dans le contenu */ a { color: var(--r-primary); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; } a:hover { color: var(--r-primary-hover); } a:active { color: var(--r-primary-active); } .link-muted { color: var(--r-text-muted); } .nav-link { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: .65rem .9rem; border-radius: var(--r-radius); color: var(--r-text-muted); text-decoration: none; font-size: .875rem; } .nav-link:hover { background: var(--r-surface-alt); color: var(--r-text); } .nav-link[aria-current="page"], .nav-link.is-active { background: var(--r-primary-soft); color: var(--r-primary); font-weight: 600; } /* 5. Boutons : les