/* ============================================================ BASE — Reset, Google Fonts, Typographie, Éléments HTML ============================================================ */ /* Google Fonts sont chargés via dans chaque HTML */ /* ===== RESET ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-normal); line-height: var(--lh-normal); color: var(--text-primary); background: radial-gradient(ellipse 65% 45% at 12% 18%, rgba(37,99,168,0.10) 0%, transparent 60%), radial-gradient(ellipse 55% 40% at 88% 78%, rgba(35,140,95,0.08) 0%, transparent 55%), radial-gradient(ellipse 40% 30% at 68% 8%, rgba(212,146,13,0.06) 0%, transparent 50%), linear-gradient(160deg, #edf1f7 0%, #f0f3f8 55%, #edf1f7 100%); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ===== TYPOGRAPHIE ===== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--text-primary); } h1 { font-size: var(--text-5xl); font-weight: 900; letter-spacing: -0.025em; } h2 { font-size: var(--text-4xl); letter-spacing: -0.015em; } h3 { font-size: var(--text-3xl); letter-spacing: -0.01em; } h4 { font-size: var(--text-2xl); } h5 { font-size: var(--text-xl); } h6 { font-size: var(--text-lg); } p { line-height: var(--lh-relaxed); color: var(--text-secondary); } a { color: var(--text-link); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--primary-dark); text-decoration: underline; } strong { font-weight: var(--fw-semibold); } em { font-style: italic; } small { font-size: var(--text-sm); color: var(--text-muted); } ul, ol { padding-left: 1.5rem; color: var(--text-secondary); line-height: var(--lh-relaxed); } li { margin-bottom: 0.35rem; } img { max-width: 100%; height: auto; display: block; } table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } th { background-color: var(--primary-color); color: var(--text-inverse); font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--text-sm); text-align: left; padding: 12px 16px; letter-spacing: 0.025em; } td { padding: 11px 16px; border-bottom: 1px solid var(--border-light); color: var(--text-secondary); vertical-align: middle; } tr:hover td { background-color: var(--primary-100); } tr:last-child td { border-bottom: none; } /* ===== ACCESSIBILITÉ ===== */ :focus-visible { outline: 3px solid var(--primary-light); outline-offset: 2px; border-radius: var(--radius-sm); } /* ===== SÉLECTION ===== */ ::selection { background-color: var(--primary-200); color: var(--primary-dark); } /* ===== SCROLLBAR (webkit) ===== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-surface); } ::-webkit-scrollbar-thumb { background: var(--primary-200); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--primary-light); } /* ===== UTILITAIRES DE BASE ===== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .container { width: 100%; max-width: var(--content-max-w); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } @media (max-width: 767px) { .container { padding-left: 16px; padding-right: 16px; } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } } /* ===== MODE IMPRESSION ===== */ @media print { .no-print, header, footer, .nav-sections, .sidebar-admin { display: none !important; } body { background: white; color: black; font-size: 12pt; } .container { max-width: 100%; padding: 0; } .card { box-shadow: none !important; border: 1px solid #ccc !important; } a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #666; } h2, h3 { page-break-after: avoid; } .section-block { page-break-inside: avoid; } }