/* components.css — Design system Grimpe Référents. * * Variables centralisées + composants réutilisables. * Mode sombre via [data-theme="dark"] sur . * * À importer en supplément (ou remplacement) de style.css * sur toutes les pages GCIP. */ /* ============================================================ 1. VARIABLES (light theme par défaut) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&family=Roboto+Mono:wght@400;500&display=swap'); :root { /* Couleurs primaires — bleu ardoise neutre (Material) */ --color-primary: #3B5B7A; --color-primary-hover: #2E4A66; --color-primary-soft: #D3E3F7; --color-primary-border: #A9C4E0; /* Statuts (sémantique Material) */ --color-success: #2E7D46; --color-success-soft: #C9EBD2; --color-success-text: #0C3A1D; --color-warning: #8A5A00; --color-warning-soft: #FCE1A8; --color-warning-text: #3F2A00; --color-danger: #BA1A1A; --color-danger-soft: #FFDAD6; --color-danger-text: #410002; --color-danger-hover: #93000A; --color-info: #3B5B7A; --color-info-soft: #D3E3F7; --color-info-text: #0C1D2E; /* Neutres Material (froids, légers) */ --color-bg: #FAFAFB; --color-bg-subtle: #F1F2F5; --color-bg-elevated: #FFFFFF; --color-border: #E2E3E8; --color-border-strong: #C9CACF; --color-text: #1A1C1F; --color-text-muted: #44474C; --color-text-subtle: #74777C; /* Accent secondaire — ardoise */ --color-accent: #4A6572; --color-accent-hover: #3A515C; --color-accent-soft: #D6E3E9; --color-accent-text: #17323D; /* Lavis neutre — empty states, hover */ --color-warm-soft: #EEF1F6; /* Espacement */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; /* Radius Material */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* Ombres — élévation Material */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.28), 0 1px 3px 1px rgba(0,0,0,0.12); --shadow-md: 0 1px 2px rgba(0,0,0,0.28), 0 2px 6px 2px rgba(0,0,0,0.14); --shadow-lg: 0 4px 8px 3px rgba(0,0,0,0.14), 0 1px 3px rgba(0,0,0,0.28); --shadow-xl: 0 8px 12px 6px rgba(0,0,0,0.14), 0 4px 4px rgba(0,0,0,0.28); /* Typographie Material */ --font-display: 'Roboto', system-ui, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-sans: 'Roboto', system-ui, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Échelle z-index — alignée avec style.css */ --z-base: 1; --z-sticky: 100; --z-floating: 500; --z-nav: 1000; --z-modal: 10000; --z-toast: 11000; } /* ============================================================ 2. MODE SOMBRE — Granite sombre (unique thème sombre) ============================================================ */ [data-theme="granite-dark"] { --color-primary: #A6C8EC; --color-primary-hover: #C0D9F5; --color-primary-soft: #26435F; --color-primary-border: #3D5B78; --color-success: #8ED39D; --color-success-soft: #23492F; --color-success-text: #C9EBD2; --color-warning: #F0C069; --color-warning-soft: #5E4100; --color-warning-text: #FCE1A8; --color-danger: #FFB4AB; --color-danger-soft: #601410; --color-danger-text: #FFDAD6; --color-danger-hover: #FF897D; --color-info: #A6C8EC; --color-info-soft: #26435F; --color-info-text: #D3E3F7; --color-bg: #121316; --color-bg-subtle: #0D0E11; --color-bg-elevated: #1E2126; --color-border: rgba(226,227,232,0.12); --color-border-strong: rgba(226,227,232,0.24); --color-text: #E3E2E6; --color-text-muted: #C5C6CB; --color-text-subtle: #8E9195; /* Accent secondaire (dark — ardoise pâle) */ --color-accent: #B0CBD8; --color-accent-hover: #C6DDE8; --color-accent-soft: #2A3A42; --color-accent-text: #CDE7F0; /* Lavis neutre (dark) */ --color-warm-soft: rgba(226,232,240,0.06); --shadow-sm: 0 1px 2px rgba(0,0,0,0.5), 0 1px 3px 1px rgba(0,0,0,0.30); --shadow-md: 0 1px 2px rgba(0,0,0,0.5), 0 2px 6px 2px rgba(0,0,0,0.35); --shadow-lg: 0 4px 8px 3px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.5); --shadow-xl: 0 8px 12px 6px rgba(0,0,0,0.35), 0 4px 4px rgba(0,0,0,0.5); } /* Finition : valeurs KPI en mono (chiffres tabulaires) */ .ds-kpi-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Background body — color override seulement, le grain est défini dans style.css */ body { background-color: var(--color-bg-subtle); color: var(--color-text); font-family: var(--font-sans); transition: background-color 200ms, color 200ms; } /* ============================================================ 3. BOUTONS ============================================================ */ .ds-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 24px; border-radius: var(--radius-pill); font-size: 0.875em; font-family: inherit; font-weight: 500; letter-spacing: 0.01em; cursor: pointer; border: 1px solid transparent; text-decoration: none; line-height: 1.2; transition: background 120ms, border-color 120ms, color 120ms, box-shadow 150ms; } /* State layer Material (voile currentColor au survol / press) */ .ds-btn::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity 120ms; pointer-events: none; } .ds-btn:hover:not(:disabled)::before { opacity: 0.08; } .ds-btn:active:not(:disabled)::before { opacity: 0.14; } .ds-btn:disabled { opacity: 0.5; cursor: not-allowed; } .ds-btn-primary { background: var(--color-primary); color: white; border-color: var(--color-primary); box-shadow: var(--shadow-sm); } .ds-btn-primary:hover:not(:disabled) { box-shadow: var(--shadow-md); } .ds-btn-secondary { background: var(--color-bg-elevated); color: var(--color-primary); border-color: var(--color-primary); } .ds-btn-secondary:hover:not(:disabled) { background: var(--color-primary-soft); } .ds-btn-ghost { background: transparent; color: var(--color-text-muted); border-color: var(--color-border-strong); } .ds-btn-ghost:hover:not(:disabled) { background: var(--color-bg-subtle); color: var(--color-text); } .ds-btn-danger { background: var(--color-bg-elevated); color: var(--color-danger); border-color: var(--color-danger); } .ds-btn-danger:hover:not(:disabled) { background: var(--color-danger); color: white; } .ds-btn-danger-solid { background: var(--color-danger); color: white; border-color: var(--color-danger); } .ds-btn-danger-solid:hover:not(:disabled) { background: var(--color-danger-hover); } .ds-btn-sm { padding: 5px 10px; font-size: 0.85em; } .ds-btn-lg { padding: 10px 18px; font-size: 1em; } /* ============================================================ 4. CARDS / PANELS ============================================================ */ .ds-panel { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-xl); margin-bottom: var(--space-xl); box-shadow: var(--shadow-sm); } .ds-panel h2 { margin-top: 0; margin-bottom: var(--space-md); font-size: 1.1em; color: var(--color-text); } .ds-card { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-lg); transition: transform 100ms, box-shadow 100ms, border-color 100ms; } .ds-card.ds-card-link { text-decoration: none; color: inherit; display: block; } .ds-card.ds-card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--color-border-strong); } .ds-card.highlight { border-color: var(--color-warning); background: linear-gradient(180deg, var(--color-warning-soft) 0%, var(--color-bg-elevated) 60%); } .ds-card.danger { border-color: var(--color-danger); background: linear-gradient(180deg, var(--color-danger-soft) 0%, var(--color-bg-elevated) 60%); } /* ============================================================ 5. FORMS ============================================================ */ .ds-field { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-md); } .ds-field label { font-size: 0.85em; font-weight: 600; color: var(--color-text-muted); } .ds-input, .ds-select, .ds-textarea { padding: 8px 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font-size: 1em; font-family: inherit; background: var(--color-bg-elevated); color: var(--color-text); transition: border-color 100ms, outline 100ms; } .ds-input:focus, .ds-select:focus, .ds-textarea:focus { outline: 2px solid var(--color-primary); outline-offset: -1px; border-color: var(--color-primary); } .ds-input[readonly], .ds-readonly { background: var(--color-bg-subtle); color: var(--color-text-muted); cursor: default; } .ds-readonly { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.95em; } /* ============================================================ 6. BADGES ============================================================ */ .ds-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 0.75em; font-weight: 600; line-height: 1.4; background: var(--color-primary-soft); color: var(--color-primary); } .ds-badge-success { background: var(--color-success-soft); color: var(--color-success-text); } .ds-badge-warning { background: var(--color-warning-soft); color: var(--color-warning-text); } .ds-badge-danger { background: var(--color-danger-soft); color: var(--color-danger-text); } .ds-badge-info { background: var(--color-info-soft); color: var(--color-info-text); } .ds-badge-neutral { background: var(--color-bg-subtle); color: var(--color-text-muted); } /* ============================================================ 7. KPI — Carnet de bord (chiffres tabulaires, filets terracotta) ============================================================ */ .ds-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-xl); margin: var(--space-md) 0 var(--space-2xl); padding-top: var(--space-sm); border-top: 1px solid var(--color-border); } .ds-kpi-card { background: transparent; border: 0; border-radius: 0; padding: var(--space-md) 0 0; display: flex; flex-direction: column; gap: 0; position: relative; } .ds-kpi-card.ds-card-link { text-decoration: none; color: inherit; transition: none; } .ds-kpi-card.ds-card-link:hover { transform: none; box-shadow: none; } /* Numérotation topo : 01 / 02 / 03 en mono, suivi d'un filet */ .ds-kpi-index { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.72em; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.1em; margin-bottom: var(--space-md); display: inline-flex; align-items: center; gap: 8px; line-height: 1; } .ds-kpi-index::after { content: ""; display: inline-block; width: 28px; height: 1px; background: currentColor; opacity: 0.5; } /* Legacy fallback */ .ds-kpi-icon { display: none; } .ds-kpi-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(2.4em, 8vw, 3.2em); font-weight: 500; color: var(--color-text); line-height: 0.95; letter-spacing: -0.02em; position: relative; padding-bottom: 14px; margin-bottom: var(--space-xs); } .ds-kpi-value.small { font-family: var(--font-display); font-size: 1.3em; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; } .ds-kpi-value::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 2px; background: var(--color-primary); } .ds-kpi-label { font-size: 0.82em; font-weight: 500; color: var(--color-text-muted); letter-spacing: 0.01em; line-height: 1.3; } .ds-kpi-card.ds-card-link .ds-kpi-label::after { content: " →"; display: inline-block; transition: transform 140ms ease-out; color: var(--color-primary); font-weight: 700; letter-spacing: 0; } .ds-kpi-card.ds-card-link:hover .ds-kpi-label { color: var(--color-primary); } .ds-kpi-card.ds-card-link:hover .ds-kpi-label::after { transform: translateX(4px); } .ds-kpi-sub { font-family: var(--font-display); font-style: normal; font-size: 0.9em; font-weight: 400; color: var(--color-text-subtle); margin-top: 8px; line-height: 1.35; } /* ============================================================ 8. EMPTY STATES ============================================================ */ .ds-empty { text-align: center; padding: var(--space-2xl) var(--space-xl); color: var(--color-text-muted); background: var(--color-warm-soft); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); } .ds-empty-emoji { font-size: 2.4em; margin-bottom: var(--space-sm); opacity: 0.7; } .ds-empty-illustration { width: 64px; height: 64px; margin: 0 auto var(--space-md); color: var(--color-primary); opacity: 0.85; } .ds-empty-illustration svg { width: 100%; height: 100%; } .ds-empty-title { font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: 1.15em; color: var(--color-text); margin: 0 0 var(--space-sm); line-height: 1.3; } .ds-empty-hint { font-size: 0.92em; color: var(--color-text-muted); margin: 0 0 var(--space-md); line-height: 1.45; } .ds-empty p { margin: var(--space-sm) 0; } .ds-empty a { color: var(--color-primary); text-decoration: none; font-weight: 600; font-size: 0.9em; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color 120ms; } .ds-empty a:hover { border-bottom-color: var(--color-primary); } /* ============================================================ 9. SKELETON LOADERS ============================================================ */ .ds-skeleton { background: linear-gradient(90deg, var(--color-bg-subtle) 0%, var(--color-border) 50%, var(--color-bg-subtle) 100%); background-size: 200% 100%; animation: ds-skeleton-shimmer 1.4s infinite; border-radius: var(--radius-md); color: transparent; user-select: none; } @keyframes ds-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .ds-skeleton-text { height: 0.95em; } .ds-skeleton-title { height: 1.4em; margin-bottom: 0.5em; } .ds-skeleton-line { height: 0.85em; margin-bottom: 0.5em; } .ds-skeleton-line:last-child { margin-bottom: 0; width: 70%; } .ds-skeleton-block { height: 80px; margin-bottom: var(--space-md); } .ds-skeleton-card { border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-lg); margin-bottom: var(--space-md); } /* ============================================================ 10. TABLES ============================================================ */ .ds-table { width: 100%; border-collapse: collapse; font-size: 0.9em; } .ds-table th, .ds-table td { padding: 8px 10px; border-bottom: 1px solid var(--color-border); text-align: left; } .ds-table thead { background: var(--color-bg-subtle); } .ds-table thead th { color: var(--color-text-muted); font-weight: 600; } .ds-table tbody tr:hover { background: var(--color-bg-subtle); } /* ============================================================ 11. PROGRESS BAR ============================================================ */ .ds-progress { background: var(--color-border); height: 8px; border-radius: var(--radius-sm); overflow: hidden; } .ds-progress-fill { background: var(--color-primary); height: 100%; transition: width 200ms; } /* ============================================================ 12. UTILITIES ============================================================ */ .ds-hidden { display: none !important; } .ds-text-muted { color: var(--color-text-muted); } .ds-text-subtle { color: var(--color-text-subtle); } .ds-text-danger { color: var(--color-danger); } .ds-text-success { color: var(--color-success); } .ds-mt-sm { margin-top: var(--space-sm); } .ds-mt-md { margin-top: var(--space-md); } .ds-mt-lg { margin-top: var(--space-lg); } .ds-mb-sm { margin-bottom: var(--space-sm); } .ds-flex { display: flex; } .ds-flex-row { display: flex; flex-direction: row; gap: var(--space-sm); align-items: center; } .ds-flex-col { display: flex; flex-direction: column; gap: var(--space-sm); } .ds-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } .ds-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-md); } @media (max-width: 720px) { .ds-grid-2, .ds-grid-3 { grid-template-columns: 1fr; } } /* ============================================================ 13. RESPONSIVE GLOBAL — fixes mobiles pour les templates legacy ============================================================ */ @media (max-width: 720px) { /* Grilles inline statiques utilisées dans les templates */ [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns:1fr 1fr 1fr"], [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; } /* Tableaux qui débordent : scroll horizontal */ table { display: block; overflow-x: auto; } /* Conteneur max-width avec padding moins serré */ body > div[style*="max-width"] { padding: 0 12px !important; } /* Filtres en colonne sur mobile */ .filters, .toolbar-row { flex-direction: column; align-items: stretch; } .filters > *, .toolbar-row > * { width: 100%; } /* Cards full-width et stack */ .kpi-grid, .ds-kpi-grid { grid-template-columns: 1fr 1fr !important; } /* Quick actions en colonne */ .quick-actions { flex-direction: column; } .quick-actions > * { width: 100%; text-align: center; } /* Inputs et selects 100% */ .field-row input, .field-row select, .field-row textarea, .ds-field input, .ds-field select, .ds-field textarea { width: 100%; box-sizing: border-box; } /* Bulk bar en bas centrée */ .bulk-bar { left: 8px !important; right: 8px !important; transform: none !important; flex-wrap: wrap; justify-content: center; } } @media (max-width: 480px) { .kpi-grid, .ds-kpi-grid { grid-template-columns: 1fr !important; } } /* ============================================================ 14. AVATARS ============================================================ */ .ds-avatar { vertical-align: middle; } .ds-avatar-stack { display: inline-flex; } .ds-avatar-stack > .ds-avatar:not(:first-child) { margin-left: -8px; box-shadow: 0 0 0 2px var(--color-bg-elevated); } /* ============================================================ 15. TYPO HIERARCHIE ============================================================ */ .ds-h1 { font-size: 1.8em; font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-md); line-height: 1.2; } .ds-h2 { font-size: 1.25em; font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-sm); line-height: 1.3; } .ds-h3 { font-size: 0.95em; font-weight: 600; color: var(--color-text-muted); margin: var(--space-lg) 0 var(--space-xs); letter-spacing: 0.01em; } /* ============================================================ 16. ANIMATIONS ============================================================ */ .ds-card-link:hover { border-color: var(--color-primary-border); } .ds-fade-in { animation: ds-fade-in 250ms ease-out; } @keyframes ds-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ 17. EMPTY STATES ILLUSTRÉS ============================================================ */ .ds-empty-illustration { width: 120px; height: 120px; margin: 0 auto var(--space-md); opacity: 0.65; } /* ============================================================ 18. PROGRESS PASTILLE (vue semaine slots) ============================================================ */ .ds-mini-progress { display: inline-block; width: 32px; height: 4px; background: var(--color-border); border-radius: 2px; overflow: hidden; vertical-align: middle; } .ds-mini-progress > span { display: block; height: 100%; background: var(--color-success); } /* ============================================================ 19. SVG ICONS HELPERS ============================================================ */ .ds-icon { vertical-align: -3px; } .ds-icon-lg { width: 22px; height: 22px; } /* ============================================================ 20. AUTH — Le seuil du refuge (login / signup / onboarding) ============================================================ */ .auth-wrap { max-width: 440px; margin: 0 auto; padding: 44px 20px 60px; position: relative; isolation: isolate; } .auth-wrap::before { content: ""; position: absolute; top: -20px; right: -80px; width: 280px; height: 280px; background: radial-gradient(circle at 35% 35%, var(--color-primary) 0%, transparent 65%); opacity: 0.10; z-index: -1; pointer-events: none; } .auth-head { text-align: center; margin-bottom: 22px; } .auth-picto { width: 46px; height: 46px; margin: 0 auto 10px; color: var(--color-primary); } .auth-picto svg { width: 100%; height: 100%; } .auth-head h2 { font-family: var(--font-display, 'Fraunces', Georgia, serif); font-weight: 600; font-size: 1.7em; letter-spacing: -0.015em; color: var(--color-text); margin: 0; line-height: 1.15; } .auth-head h2 em { font-style: italic; font-weight: 500; color: var(--color-primary); } .auth-sub { margin: 8px auto 0; max-width: 34ch; color: var(--color-text-muted); font-size: 0.93em; line-height: 1.45; } .auth-card { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 24px 22px 22px; box-shadow: var(--shadow-md); } .auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; text-align: left; } .auth-field label { font-size: 0.85em; font-weight: 500; letter-spacing: 0.01em; color: var(--color-text-muted); } .auth-field input, .auth-field select { width: 100%; box-sizing: border-box; border-radius: var(--radius-md); } .auth-submit { width: 100%; margin-top: 6px; padding: 13px 16px; background: var(--color-primary); color: white; border: 1px solid var(--color-primary); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); font-family: inherit; font-size: 0.95em; font-weight: 500; letter-spacing: 0.01em; cursor: pointer; transition: background 120ms, border-color 120ms, box-shadow 150ms; } .auth-submit:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } .auth-submit:active:not(:disabled) { transform: translateY(1px); } .auth-submit:disabled { opacity: 0.6; cursor: wait; } .auth-error { color: var(--color-danger); font-size: 0.9em; min-height: 1.3em; margin: 12px 0 0; } .auth-error.ok { color: var(--color-success-text); } .auth-links { margin-top: 18px; text-align: center; font-size: 0.88em; color: var(--color-text-muted); } .auth-links a { color: var(--color-primary); font-weight: 700; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; transition: border-color 120ms; } .auth-links a:hover { border-bottom-color: var(--color-primary); } .auth-sep { color: var(--color-border-strong); margin: 0 8px; } /* Encart « ce qui t'attend » (signup) */ .auth-perks { list-style: none; padding: 14px 16px; margin: 0 0 18px; background: var(--color-warm-soft); border: 1px dashed var(--color-border-strong); display: flex; flex-direction: column; gap: 9px; } .auth-perks li { display: flex; align-items: center; gap: 10px; font-size: 0.9em; color: var(--color-text); } .auth-perks svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-primary); } /* Étapes topo (onboarding — demande envoyée) */ .auth-steps { list-style: none; padding: 0; margin: 16px 0 0; text-align: left; } .auth-steps li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; font-size: 0.92em; color: var(--color-text); line-height: 1.4; } .auth-steps li + li { border-top: 1px dashed var(--color-border); } .auth-steps .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.82em; font-weight: 600; color: var(--color-primary); flex-shrink: 0; } .auth-steps li.done { color: var(--color-text-muted); } .auth-steps li.done .num { color: var(--color-success); } /* Consignes à valider (onboarding + page /consignes) */ .consignes-scroll { max-height: 300px; overflow-y: auto; padding: 14px 16px; margin-bottom: 14px; background: var(--color-bg); border: 1px solid var(--color-border-strong); -webkit-overflow-scrolling: touch; } .consignes-doc { font-size: 0.9em; line-height: 1.5; color: var(--color-text); } .consignes-doc h3 { font-family: var(--font-display, 'Fraunces', Georgia, serif); font-size: 1.12em; font-weight: 600; color: var(--color-text); margin: 18px 0 6px; letter-spacing: -0.01em; } .consignes-doc h3:first-child { margin-top: 0; } .consignes-doc h4 { font-size: 0.95em; font-weight: 700; color: var(--color-primary); margin: 12px 0 4px; } .consignes-doc p { margin: 6px 0; } .consignes-doc ul { margin: 6px 0; padding-left: 20px; } .consignes-doc li { margin: 4px 0; } .consignes-doc .consignes-important { background: var(--color-warm-soft); border-left: 3px solid var(--color-primary); padding: 8px 12px; margin: 10px 0; font-weight: 600; } .consignes-doc .consignes-subtitle { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8em; color: var(--color-text-muted); margin-top: 12px; } /* Case à cocher d'acceptation */ .consignes-accept { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 14px; background: var(--color-warm-soft); border: 1px dashed var(--color-border-strong); cursor: pointer; font-size: 0.92em; line-height: 1.4; color: var(--color-text); } .consignes-accept input[type="checkbox"] { flex-shrink: 0; margin-top: 1px; width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; } .consignes-accept a { color: var(--color-primary); font-weight: 600; } /* ============================================================ 21. STYLES IMPRESSION SOMBRE → FORCE LIGHT ============================================================ */ @media print { :root, [data-theme="dark"] { --color-bg: white !important; --color-bg-elevated: white !important; --color-bg-subtle: white !important; --color-text: #1F2937 !important; --color-text-muted: #6B7280 !important; --color-border: #e5e7eb !important; } body { background: white !important; color: #1F2937 !important; } }