:root { --ryna-bg: #f5f7fb; --ryna-surface: #ffffff; --ryna-border: #e5eaf1; --ryna-text: #10213a; --ryna-muted: #6a7484; /* assombri du #6d7888 d'origine : 4.48:1 sur blanc, sous le seuil WCAG AA 4.5:1 (rapport ChatGPT 26/07/2026) ; nouvelle valeur ~4.73:1 */ --ryna-sidebar-width: 272px; --ryna-sidebar-collapsed-width: 86px; --ryna-topbar-height: 76px; --ryna-radius: 16px; --ryna-shadow: 0 8px 24px rgba(15, 35, 65, .07); --client-primary: #179447; --client-secondary: #06264a; --client-accent: #f4a900; --ryna-safe-top: env(safe-area-inset-top, 0px); --ryna-safe-right: env(safe-area-inset-right, 0px); --ryna-safe-bottom: env(safe-area-inset-bottom, 0px); --ryna-safe-left: env(safe-area-inset-left, 0px); --ryna-viewport-height: 100dvh; } /* ===== Etape 5 - mode sombre (28/07/2026) ===== Bootstrap 5.3 re-theme automatiquement les composants standards (card, table, modal, form-control, dropdown, offcanvas...) des que data-bs-theme="dark" est pose sur (voir le script inline dans , resources/views/layouts/app.php). Cette variante ne redefinit donc que la palette custom RYNA (--ryna-*, hors --client-* qui restent geres par PHP/ClientTheme.php par client). Les classes custom RYNA qui codaient une couleur en dur (#fff, color-mix(..., white NN%), etc.) au lieu de referencer une variable sont corrigees plus bas dans le fichier, sous la meme condition [data-bs-theme="dark"]. Palette batie sur le bleu marine RYNA (#06264a, deja utilise pour la bannière hors-ligne / l'invite PWA / la visionneuse PDF). Contrastes verifies manuellement (meme formule que ClientTheme::contrastRatio()) : --ryna-text sur --ryna-bg : ~18.9:1 --ryna-text sur --ryna-surface : ~12.9:1 --ryna-muted sur --ryna-bg : ~8.6:1 --ryna-muted sur --ryna-surface : ~7.1:1 Tous largement au-dessus du seuil WCAG AA (4.5:1) exige par le projet. */ html[data-bs-theme="dark"] { --ryna-bg: #0b1a2e; --ryna-surface: #132a45; --ryna-border: #24405e; --ryna-text: #eef2f7; --ryna-muted: #a9b7c9; } * { box-sizing: border-box; } html { min-width: 320px; min-height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-width: 320px; min-height: 100%; color: var(--ryna-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; overflow-wrap: anywhere; } button, a, input, select, textarea { touch-action: manipulation; } .app-authenticated { background: var(--client-background, var(--ryna-bg)); min-height: 100vh; } .app-shell { min-height: 100vh; min-height: var(--ryna-viewport-height); } .app-sidebar { --bs-offcanvas-width: var(--ryna-sidebar-width); position: fixed; inset: 0 auto 0 0; width: var(--ryna-sidebar-width); z-index: 1050; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--client-secondary), #03152b 28%), color-mix(in srgb, var(--client-secondary), #020c18 55%)); border: 0; display: flex; flex-direction: column; box-shadow: 12px 0 32px rgba(4, 24, 48, .08); transition: width .2s ease, transform .22s ease; } .sidebar-brand { padding: 24px 20px 20px; border-bottom: 1px solid rgba(255,255,255,.1); } .sidebar-brand-link { color: #fff; display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; } .sidebar-logo { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 12px; padding: 5px; } .brand-mark { width: 42px; height: 42px; border-radius: 12px; display: block; object-fit: contain; flex: 0 0 auto; background: #141414; box-shadow: 0 7px 18px rgb(0 0 0 / 28%); } .brand-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; } .brand-copy strong { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-copy small { color: rgba(255,255,255,.62); font-size: .7rem; margin-top: 4px; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 18px 14px; } .sidebar-link { display: flex; align-items: center; gap: 13px; color: rgba(255,255,255,.78); padding: 11px 13px; margin: 3px 0; border-radius: 11px; text-decoration: none; font-weight: 600; font-size: .92rem; transition: color .18s ease, background .18s ease, transform .18s ease, padding .18s ease; } .sidebar-link i { width: 22px; text-align: center; font-size: 1.05rem; } .sidebar-link:hover { color: #fff; background: rgba(255,255,255,.08); transform: translateX(2px); } .sidebar-link.active { color: #fff; background: var(--client-primary); box-shadow: 0 9px 20px color-mix(in srgb, var(--client-primary), transparent 70%); } .sidebar-section-label { padding: 18px 13px 7px; color: rgba(255,255,255,.38); font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .sidebar-footer { margin: 0 18px 18px; padding: 16px 4px 0; border-top: 1px solid rgba(255,255,255,.12); display: flex; gap: 11px; align-items: center; } .sidebar-footer-mark { color: var(--client-accent); font-size: 1.35rem; } .sidebar-footer div:last-child { display: flex; flex-direction: column; font-size: .82rem; } .sidebar-footer small { color: rgba(255,255,255,.55); font-size: .67rem; } .app-main { min-height: 100vh; min-height: var(--ryna-viewport-height); margin-left: var(--ryna-sidebar-width); display: flex; flex-direction: column; transition: margin-left .2s ease; } .app-topbar { height: var(--ryna-topbar-height); position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 14px; padding: 0 32px; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--ryna-border); backdrop-filter: blur(14px); } .topbar-menu { font-size: 1.35rem; padding: 5px 9px; } .sidebar-collapse-toggle { flex: 0 0 auto; } .topbar-client { display: flex; flex-direction: column; line-height: 1.12; } .topbar-client strong { font-size: .98rem; } .topbar-eyebrow { color: var(--ryna-muted); font-size: .69rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } .topbar-user { display: flex; align-items: center; gap: 10px; } .user-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--client-primary); background: color-mix(in srgb, var(--client-primary), white 88%); flex: 0 0 auto; } .user-avatar-logo { width: 42px; height: 38px; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--ryna-border); padding: 4px; } .user-avatar-logo img { width: 100%; height: 100%; display: block; object-fit: contain; } .user-copy { flex-direction: column; line-height: 1.12; } .user-copy strong { font-size: .82rem; } .user-copy small { color: var(--ryna-muted); font-size: .66rem; text-transform: capitalize; } .btn-icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--ryna-muted); border: 1px solid var(--ryna-border); border-radius: 10px; } .app-content { flex: 1; padding: 26px 32px 38px; } .content-container { max-width: 1600px; margin: 0 auto; } .page-actions { max-width: 1600px; margin: 0 auto 16px; display: flex; gap: 8px; } .app-footer { padding: 17px 32px; border-top: 1px solid var(--ryna-border); color: var(--ryna-muted); text-align: center; font-size: .73rem; background: #fff; } .app-mobile-nav { display: none; } @media (min-width: 992px) { .app-sidebar-collapsed .app-sidebar { width: var(--ryna-sidebar-collapsed-width); --bs-offcanvas-width: var(--ryna-sidebar-collapsed-width); } .app-sidebar-collapsed .app-main { margin-left: var(--ryna-sidebar-collapsed-width); } .app-sidebar-collapsed .sidebar-brand { padding: 22px 14px 18px; } .app-sidebar-collapsed .sidebar-brand-link, .app-sidebar-collapsed .sidebar-footer { justify-content: center; } .app-sidebar-collapsed .brand-copy, .app-sidebar-collapsed .sidebar-link span, .app-sidebar-collapsed .sidebar-footer div:last-child { display: none; } .app-sidebar-collapsed .sidebar-nav { padding: 18px 12px; } .app-sidebar-collapsed .sidebar-link { justify-content: center; gap: 0; padding: 12px 10px; } .app-sidebar-collapsed .sidebar-link i { width: auto; font-size: 1.14rem; } .app-sidebar-collapsed .sidebar-link:hover { transform: none; } .app-sidebar-collapsed .sidebar-section-label { height: 1px; margin: 15px 12px 8px; padding: 0; overflow: hidden; color: transparent; background: rgba(255,255,255,.16); border-radius: 999px; } .app-sidebar-collapsed .sidebar-footer { margin: 0 18px 18px; padding-top: 14px; } .app-sidebar-collapsed .sidebar-footer-mark { font-size: 1.2rem; } } h1, h2, h3, h4, h5, h6 { color: var(--ryna-text); font-weight: 750; letter-spacing: -.025em; } .text-muted { color: var(--ryna-muted)!important; } .card { border: 1px solid var(--ryna-border); border-radius: var(--ryna-radius); box-shadow: var(--ryna-shadow); overflow: hidden; } .card-header { color: var(--ryna-text); background: color-mix(in srgb, var(--client-accent), white 86%); border-bottom-color: color-mix(in srgb, var(--client-accent), var(--ryna-border) 72%); } .card-body { padding: 1.25rem; } .table { --bs-table-bg: transparent; --bs-table-striped-bg: #f7f9fc; --bs-table-hover-bg: color-mix(in srgb, var(--client-primary), white 95%); color: var(--ryna-text); } .table > :not(caption) > * > * { padding: .82rem .9rem; border-bottom-color: var(--ryna-border); vertical-align: middle; } .table thead th { color: #647084; background: #f7f9fc; font-size: .72rem; text-transform: uppercase; letter-spacing: .045em; border-bottom-width: 1px; white-space: nowrap; } .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: #fbfcfe; } .form-control, .form-select { min-height: 43px; border-color: #dce3ec; border-radius: 10px; } .form-label { color: var(--ryna-text); font-weight: 700; letter-spacing: .01em; } .form-control:focus, .form-select:focus { border-color: var(--client-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--client-primary), transparent 83%); } .btn { border-radius: 10px; font-weight: 650; } .btn-primary { background: var(--client-primary); border-color: var(--client-primary); } .btn-outline-primary { color: var(--client-primary); border-color: var(--client-primary); } .btn-outline-primary:hover { background: var(--client-primary); border-color: var(--client-primary); } .badge { border-radius: 7px; padding: .48em .7em; font-weight: 650; } .alert { border: 0; border-radius: 12px; } .list-group-item { padding: 1rem 1.15rem; border-color: var(--ryna-border); } .ryna-admin-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--client-secondary), #03152b 28%), var(--client-primary)); color: #fff; border: 0; border-radius: 20px; box-shadow: 0 16px 34px color-mix(in srgb, var(--client-secondary), transparent 78%); } .ryna-admin-hero h1 { color: #fff; } .metric-card .card-body { display: flex; align-items: center; gap: 14px; min-height: 112px; } .metric-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: var(--client-primary); background: color-mix(in srgb, var(--client-primary), white 88%); font-size: 1.2rem; } .metric-label { color: var(--ryna-muted); font-size: .78rem; } .metric-value { margin: 2px 0 0; color: var(--ryna-text); font-size: 1.6rem; font-weight: 800; line-height: 1.1; } .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .section-heading h2 { margin: 0; font-size: 1rem; } .dashboard-module-links { display: grid; grid-template-columns: repeat(4, minmax(104px, 1fr)); gap: 6px; width: min(100%, 570px); } .dashboard-module-links a { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: .38rem .55rem; color: var(--client-primary); background: color-mix(in srgb, var(--client-primary), white 92%); border: 1px solid color-mix(in srgb, var(--client-primary), white 80%); border-radius: 8px; font-size: .68rem; font-weight: 750; text-decoration: none; } .dashboard-module-links a:hover { color: #fff; background: var(--client-primary); } .dashboard-module-links i { flex: 0 0 auto; } .dashboard-mini-kpi { --mini-color: var(--client-primary); color: var(--ryna-text); text-decoration: none; border-top: 3px solid var(--mini-color); border-radius: 13px; transition: transform .18s ease, box-shadow .18s ease; } .dashboard-mini-kpi:hover { color: var(--ryna-text); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(15,35,65,.1); } .dashboard-mini-kpi .card-body { min-height: 82px; display: flex; align-items: center; gap: 10px; padding: .75rem .8rem; } .dashboard-mini-kpi .card-body > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: var(--mini-color); background: color-mix(in srgb, var(--mini-color), white 88%); border-radius: 10px; } .dashboard-mini-kpi .card-body > div { min-width: 0; display: grid; } .dashboard-mini-kpi small { overflow: hidden; margin-top: 2px; color: var(--ryna-muted); font-size: .78rem; font-weight: 700; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .dashboard-mini-kpi strong { color: var(--ryna-text); font-size: 1.25rem; font-weight: 850; line-height: 1.1; white-space: nowrap; } .dashboard-mini-kpi em { font-size: .62rem; font-style: normal; } .dashboard-mini-primary { --mini-color: var(--client-primary); } .dashboard-mini-secondary { --mini-color: var(--client-secondary); } .dashboard-mini-accent { --mini-color: var(--client-accent); } .dashboard-mini-success { --mini-color: #198754; } .dashboard-mini-danger { --mini-color: #dc3545; } .dashboard-admin-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 26px; color: #fff; background: radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--client-accent), transparent 70%) 0 2px, transparent 3px), linear-gradient(130deg, color-mix(in srgb, var(--client-secondary), #020c18 18%), var(--client-primary)); background-size: 26px 26px, auto; border-radius: 18px; box-shadow: 0 16px 34px color-mix(in srgb, var(--client-secondary), transparent 78%); } .dashboard-admin-hero > div:first-child { flex: 0 0 auto; } .dashboard-admin-hero h1 { margin: 3px 0; color: #fff; font-size: clamp(1.55rem, 3vw, 2rem); white-space: nowrap; } .dashboard-admin-hero p { margin: 0; color: rgba(255,255,255,.76); font-size: .9rem; } .dashboard-hero-kicker { display: flex; align-items: center; gap: 7px; color: var(--client-accent); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .09em; } .dashboard-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .dashboard-hero-actions .btn { white-space: nowrap; } .dashboard-kpi { --kpi-color: var(--client-primary); position: relative; color: var(--ryna-text); border-top: 4px solid var(--kpi-color); transition: transform .18s ease, box-shadow .18s ease; } .dashboard-kpi:hover { color: var(--ryna-text); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(15,35,65,.11); } .dashboard-kpi .card-body, .dashboard-consumption-card .card-body { display: flex; align-items: center; gap: 14px; min-height: 112px; padding: 1rem 1.1rem; } .dashboard-kpi-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; color: var(--kpi-color, var(--client-primary)); background: color-mix(in srgb, var(--kpi-color, var(--client-primary)), white 88%); border-radius: 13px; font-size: 1.15rem; } .dashboard-kpi-label { color: var(--ryna-muted); font-size: .75rem; font-weight: 700; } .dashboard-kpi-value { margin-top: 2px; color: var(--ryna-text); font-size: 1.65rem; font-weight: 850; line-height: 1; } .dashboard-kpi-value small { font-size: .75rem; } .dashboard-kpi-detail { margin-top: 5px; color: var(--ryna-muted); font-size: .72rem; } .dashboard-kpi-primary { --kpi-color: var(--client-primary); } .dashboard-kpi-secondary { --kpi-color: var(--client-secondary); } .dashboard-kpi-accent { --kpi-color: var(--client-accent); } .dashboard-kpi-success { --kpi-color: #198754; } .dashboard-kpi-danger { --kpi-color: #dc3545; } .dashboard-block { border-radius: 16px; } .dashboard-block-header { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: .85rem 1rem; background: color-mix(in srgb, var(--client-accent), white 89%); } .dashboard-block-header a { color: var(--client-primary); font-size: .75rem; font-weight: 750; text-decoration: none; } .dashboard-block-title { display: flex; align-items: center; gap: 8px; color: var(--ryna-text); font-size: .95rem; font-weight: 800; } .dashboard-block-title > i { color: var(--client-primary); } .dashboard-agenda-preview { display: grid; } .dashboard-agenda-row { display: grid; grid-template-columns: 42px 38px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 68px; padding: 9px 14px; color: var(--ryna-text); text-decoration: none; border-bottom: 1px solid var(--ryna-border); } .dashboard-agenda-row:hover { color: var(--ryna-text); background: color-mix(in srgb, var(--client-primary), white 96%); } .dashboard-agenda-date { display: grid; justify-items: center; line-height: 1; } .dashboard-agenda-date strong { font-size: 1.15rem; } .dashboard-agenda-date span { margin-top: 4px; color: var(--ryna-muted); font-size: .64rem; text-transform: uppercase; } .dashboard-event-mark { --event-color: var(--client-primary); width: 36px; height: 36px; display: grid; place-items: center; color: var(--event-color); background: color-mix(in srgb, var(--event-color), white 88%); border-radius: 11px; } .dashboard-event-mark-transport, .dashboard-event-badge-transport { --event-color: #1655a8; } .dashboard-event-mark-eir, .dashboard-event-badge-eir { --event-color: #0f766e; } .dashboard-event-mark-maintenance, .dashboard-event-badge-maintenance { --event-color: #b7791f; } .dashboard-event-mark-rappel, .dashboard-event-badge-rappel { --event-color: #6b34c9; } .dashboard-event-mark-planning, .dashboard-event-badge-planning { --event-color: var(--client-primary); } .dashboard-agenda-content { min-width: 0; } .dashboard-agenda-content > div { display: flex; align-items: center; gap: 7px; min-width: 0; } .dashboard-agenda-content strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; } .dashboard-agenda-content > span { display: block; margin-top: 3px; overflow: hidden; color: var(--ryna-muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; } .dashboard-event-badge { color: var(--event-color); background: color-mix(in srgb, var(--event-color), white 88%); font-size: .62rem; } .dashboard-block-footer { display: flex; justify-content: space-between; gap: 12px; padding: .75rem 1rem; background: #fff; } .dashboard-block-footer a { color: var(--client-primary); font-size: .75rem; font-weight: 750; text-decoration: none; } .dashboard-watch-list .list-group-item, .dashboard-activity-list .list-group-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: .8rem 1rem; } .dashboard-priority-settings { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.1rem; padding: .85rem 1rem; background: color-mix(in srgb, var(--client-primary), white 96%); border-bottom: 1px solid var(--ryna-border); } .dashboard-priority-settings > div { display: grid; margin-right: auto; } .dashboard-priority-settings > div span { color: var(--ryna-muted); font-size: .72rem; } .dashboard-priority-settings .form-check { margin: 0; font-size: .78rem; } .dashboard-watch-list .list-group-item > div, .dashboard-activity-list .list-group-item > div { min-width: 0; display: grid; gap: 2px; } .dashboard-watch-list strong, .dashboard-activity-list strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; } .dashboard-watch-list div span, .dashboard-activity-list div span { color: var(--ryna-muted); font-size: .68rem; } .dashboard-activity-list b { color: var(--client-primary); font-size: .82rem; white-space: nowrap; } .dashboard-activity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1rem; align-items: stretch; } .dashboard-activity-grid > [class*="col-"] { width: auto; max-width: none; padding: 0; } .dashboard-consumption-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding: 1rem; } .dashboard-consumption-summary > div { display: grid; gap: .15rem; padding: .75rem; background: color-mix(in srgb, var(--client-primary), white 94%); border-radius: 10px; } .dashboard-consumption-summary strong { color: var(--client-primary); font-size: 1.15rem; } .dashboard-consumption-summary span { color: var(--ryna-muted); font-size: .7rem; } .maintenance-week-agenda { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); overflow-x: auto; border: 1px solid var(--ryna-border); border-radius: 12px; } .maintenance-agenda-day { min-height: 150px; border-right: 1px solid var(--ryna-border); background: #fff; } .maintenance-agenda-day:last-child { border-right: 0; } .maintenance-agenda-day.is-today { background: color-mix(in srgb, var(--client-primary), white 95%); } .maintenance-agenda-day-head { display: flex; justify-content: space-between; gap: .5rem; padding: .65rem .7rem; border-bottom: 1px solid var(--ryna-border); font-size: .75rem; } .maintenance-agenda-day-head span { color: var(--ryna-muted); } .maintenance-agenda-events { display: grid; gap: .45rem; padding: .55rem; } .maintenance-agenda-event { display: grid; gap: .15rem; padding: .5rem; border-left: 3px solid #b7791f; border-radius: 7px; background: #fff8e8; font-size: .7rem; } .maintenance-agenda-event.is-request { border-left-color: #6f42c1; background: #f4efff; } .maintenance-agenda-event span, .maintenance-agenda-empty { color: var(--ryna-muted); font-size: .65rem; } .maintenance-vehicle-filter { width: min(100%, 260px); } .dashboard-empty { min-height: 160px; display: grid; place-content: center; justify-items: center; gap: 5px; padding: 24px; color: var(--ryna-muted); text-align: center; } .dashboard-empty i { color: var(--client-primary); font-size: 1.5rem; } .dashboard-empty strong { color: var(--ryna-text); font-size: .85rem; } .dashboard-empty span { font-size: .72rem; } .dashboard-empty-sm { min-height: 92px; } .dashboard-consumption-card { --kpi-color: var(--client-primary); color: var(--ryna-text); background: linear-gradient(135deg, color-mix(in srgb, var(--client-accent), white 91%), #fff); border-top: 4px solid var(--client-accent); } .dashboard-consumption-card:hover { color: var(--ryna-text); } @media (max-width: 991.98px) { .dashboard-admin-hero { align-items: flex-start; flex-direction: column; } .dashboard-hero-actions { justify-content: flex-start; } .dashboard-module-links { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; } } @media (max-width: 575.98px) { .dashboard-admin-hero { padding: 20px; } .dashboard-hero-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .dashboard-hero-actions .btn { font-size: .72rem; } .dashboard-kpi .card-body { min-height: 136px; align-items: flex-start; flex-direction: column; gap: 8px; padding: .85rem; } .dashboard-kpi-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 1rem; } .dashboard-kpi-value { font-size: 1.4rem; } .dashboard-kpi-detail { font-size: .66rem; } .dashboard-agenda-row { grid-template-columns: 38px 34px minmax(0,1fr); gap: 8px; padding-inline: 10px; } .dashboard-agenda-row > .bi-chevron-right { display: none; } .dashboard-event-badge { display: none; } .dashboard-module-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-block-footer { flex-direction: column; } } .dashboard-planning { --agenda-border: #e6e9f2; --agenda-muted: #626b7d; --agenda-soft: #f3f5fa; --agenda-grid: #edf1f6; --event-transport: #1655a8; --event-eir: #0f766e; --event-maintenance: #b7791f; --event-rappel: #6b34c9; --event-planning: var(--client-primary); border: 1px solid var(--ryna-border); border-radius: 8px; background: #fff; box-shadow: var(--ryna-shadow); overflow: hidden; } .dashboard-planning-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--agenda-border); background: #fff; } .dashboard-planning-nav { display: flex; align-items: center; gap: 8px; } .dashboard-planning-title { font-size: .95rem; font-weight: 800; } .dashboard-planning-range { color: var(--agenda-muted); font-size: .78rem; font-weight: 650; } .dashboard-planning-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 14px; color: var(--agenda-muted); font-size: .76rem; } .dashboard-planning-legend span { display: inline-flex; align-items: center; gap: 6px; } .planning-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; } .planning-dot-transport { background: var(--event-transport); } .planning-dot-eir { background: var(--event-eir); } .planning-dot-maintenance { background: var(--event-maintenance); } .planning-dot-rappel { background: var(--event-rappel); } .dashboard-agenda { overflow-x: auto; } .dashboard-planning.is-compact .dashboard-agenda { max-height: 318px; overflow: auto; } .dashboard-planning:not(.is-compact) .dashboard-agenda { max-height: none; } .dashboard-planning-condensed .dashboard-day-col { background: repeating-linear-gradient(to bottom, var(--agenda-grid) 0 1px, transparent 1px 24px), #fff; } .dashboard-planning-condensed .dashboard-day-col.is-today { background-color: color-mix(in srgb, var(--client-primary), white 96%); } .dashboard-planning-condensed .dashboard-event { padding: 3px 5px; border-radius: 6px; } .dashboard-planning-condensed .dashboard-event strong { font-size: .64rem; } .dashboard-planning-condensed .dashboard-event span { font-size: .56rem; } .dashboard-agenda-head, .dashboard-agenda-body { display: grid; grid-template-columns: 54px repeat(6, minmax(118px, 1fr)); min-width: 840px; } .dashboard-agenda-head { border-top: 1px solid var(--agenda-border); border-bottom: 1px solid var(--agenda-border); background: var(--agenda-soft); } .dashboard-day-head { text-align: center; border-left: 1px solid var(--agenda-border); padding: 8px 4px; } .dashboard-day-name { color: var(--agenda-muted); text-transform: capitalize; font-size: .72rem; font-weight: 750; } .dashboard-day-number { color: var(--ryna-text); font-size: 1rem; font-weight: 850; } .dashboard-day-head.is-today .dashboard-day-number { color: var(--client-primary); } .dashboard-hour-gutter { position: relative; background: #fff; } .dashboard-hour { position: absolute; right: 7px; color: var(--agenda-muted); font-size: .7rem; font-weight: 700; transform: translateY(-50%); } .dashboard-day-col { position: relative; border-left: 1px solid var(--agenda-border); background: repeating-linear-gradient(to bottom, var(--agenda-grid) 0 1px, transparent 1px 42px), #fff; } .dashboard-day-col.is-today { background-color: color-mix(in srgb, var(--client-primary), white 96%); } .dashboard-event { --event-color: var(--event-planning); position: absolute; left: 4px; right: 4px; display: grid; gap: 1px; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--event-color), white 64%); border-left: 4px solid var(--event-color); border-radius: 7px; background: color-mix(in srgb, var(--event-color), white 88%); color: #142033; text-decoration: none; overflow: hidden; box-shadow: 0 3px 9px rgba(15, 35, 65, .08); } .dashboard-event:hover { filter: brightness(.98); box-shadow: 0 6px 16px rgba(15, 35, 65, .14); z-index: 4; } .dashboard-event strong { color: var(--event-color); font-size: .7rem; line-height: 1.14; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dashboard-event span { color: color-mix(in srgb, var(--event-color), #253247 45%); font-size: .62rem; line-height: 1.12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dashboard-event-transport { --event-color: var(--event-transport); } .dashboard-event-eir { --event-color: var(--event-eir); } .dashboard-event-maintenance { --event-color: var(--event-maintenance); } .dashboard-event-rappel { --event-color: var(--event-rappel); } .dashboard-event-planning { --event-color: var(--event-planning); } .theme-preview { min-height: 210px; display: grid; grid-template-columns: minmax(135px, 34%) 1fr; overflow: hidden; border: 1px solid var(--ryna-border); border-radius: 14px; background: var(--preview-background, #f5f7fb); box-shadow: var(--ryna-shadow); } .theme-preview-sidebar { display: flex; flex-direction: column; gap: 7px; padding: 17px 12px; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--preview-secondary), #03152b 25%), color-mix(in srgb, var(--preview-secondary), #020c18 50%)); } .theme-preview-sidebar > strong { color: var(--preview-accent); margin: 0 6px 10px; font-size: .82rem; } .theme-preview-link { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 7px; color: rgba(255,255,255,.72); font-size: .67rem; } .theme-preview-link.active { color: #fff; background: var(--preview-primary); } .theme-preview-content { padding: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; background: var(--preview-background, #f5f7fb); } .theme-preview-kicker { color: var(--preview-accent); font-size: .63rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .theme-preview-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin: 6px 0 8px; } .theme-preview-cards span { height: 54px; border-radius: 8px; border: 1px solid #e4e9f0; background: #fff; box-shadow: 0 4px 12px rgba(15,35,65,.05); } .theme-preview-content .btn { color: #fff; background: var(--preview-primary); } .app-guest { min-height: 100vh; min-height: var(--ryna-viewport-height); background: radial-gradient(circle at top right, color-mix(in srgb, var(--client-primary), white 83%), transparent 38%), #f4f7fb; } .guest-main { min-height: 100vh; min-height: var(--ryna-viewport-height); display: flex; flex-direction: column; } .guest-brand { display: flex; align-items: center; gap: 10px; padding: 24px 30px; font-size: 1.1rem; } .guest-content { width: 100%; max-width: 540px; margin: auto; padding: 24px; } .guest-content .row > * { width: 100%; } .guest-content .card { border: 0; box-shadow: 0 20px 50px rgba(20,43,74,.12); } .guest-content .card-body { padding: 2rem; } .guest-login-card .form-control { font-size: 1rem; } .guest-footer { color: var(--ryna-muted); text-align: center; padding: 22px; font-size: .74rem; } @media (max-width: 991.98px) { .app-sidebar { position: fixed; width: min(88vw, 340px); max-width: 100%; padding-top: var(--ryna-safe-top); padding-bottom: var(--ryna-safe-bottom); transform: translateX(-100%); transition: transform .22s ease; visibility: hidden; } .app-sidebar.show { transform: translateX(0); visibility: visible; } .app-main { margin-left: 0; } .app-topbar { height: calc(var(--ryna-topbar-height) + var(--ryna-safe-top)); padding: var(--ryna-safe-top) max(18px, var(--ryna-safe-right)) 0 max(18px, var(--ryna-safe-left)); } .topbar-menu, .btn-icon { min-width: 44px; min-height: 44px; } .topbar-client { min-width: 0; } .topbar-client strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-logout { display: none; } .app-content { padding: 20px max(16px, var(--ryna-safe-right)) calc(104px + var(--ryna-safe-bottom)) max(16px, var(--ryna-safe-left)); } .page-actions { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; } .page-actions::-webkit-scrollbar { display: none; } .page-actions .btn { min-height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; } .sidebar-link { min-height: 48px; padding-block: 12px; } .offcanvas-header { min-height: 60px; padding-inline: 20px; } .app-mobile-nav { position: fixed; inset: auto 0 0; z-index: 1040; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 7px max(8px, var(--ryna-safe-right)) calc(7px + var(--ryna-safe-bottom)) max(8px, var(--ryna-safe-left)); background: rgba(255,255,255,.97); border-top: 1px solid var(--ryna-border); box-shadow: 0 -10px 28px rgba(15,35,65,.1); backdrop-filter: blur(16px); } .app-mobile-nav form { display: contents; } .app-mobile-nav-item { min-width: 0; min-height: 52px; display: grid; place-content: center; justify-items: center; gap: 2px; padding: 5px 3px; color: var(--ryna-muted); background: transparent; border: 0; border-radius: 12px; font: inherit; text-decoration: none; } .app-mobile-nav-item i { font-size: 1.14rem; line-height: 1; } .app-mobile-nav-item span { overflow: hidden; max-width: 100%; font-size: .66rem; font-weight: 750; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .app-mobile-nav-item.active, .app-mobile-nav-item:active { color: var(--client-primary); background: color-mix(in srgb, var(--client-primary), white 91%); } .app-footer { margin-bottom: calc(66px + var(--ryna-safe-bottom)); padding-left: max(18px, var(--ryna-safe-left)); padding-right: max(18px, var(--ryna-safe-right)); } .modal-content { border: 0; border-radius: 18px; overflow: hidden; } } /* Garanties fonctionnelles (cibles tactiles, anti-zoom iOS, zones de securite) etendues au-dela du seul telephone en portrait : un iPhone en paysage ou une tablette a doigt depassent souvent 575.98px mais restent des ecrans tactiles. Rapport ChatGPT du 26/07/2026, revue Etape 1, sections "Cibles tactiles", "Zoom involontaire iOS" et "Zones de securite". Les seuils Bootstrap (991.98/767.98/575.98px) restent inchanges pour la mise en page ; seule la couverture des regles fonctionnelles est etendue ici. */ .color-swatch { width: 34px; height: 34px; border-radius: 8px; } @media (max-width: 991.98px), (hover: none) and (pointer: coarse) and (max-width: 1180px) { .btn, .btn-sm, .btn-close, .dashboard-module-links a, .dashboard-block-header a, .dashboard-block-footer a, .color-swatch { min-width: 44px; min-height: 44px; } .form-check { min-height: 44px; display: flex; align-items: center; } .form-control, .form-select, .form-control-sm, .form-select-sm { min-height: 48px; font-size: 16px; } .modal-dialog { margin-top: max(.5rem, var(--ryna-safe-top)); margin-right: max(.5rem, var(--ryna-safe-right)); margin-bottom: max(.5rem, var(--ryna-safe-bottom)); margin-left: max(.5rem, var(--ryna-safe-left)); } .app-sidebar { padding-left: var(--ryna-safe-left); } .app-authenticated .offline-sync-banner, .app-authenticated .pwa-install-invite, .app-authenticated .offline-queue-button { bottom: calc(76px + var(--ryna-safe-bottom)); } } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid #0b5ed7; outline-offset: 2px; } @media (max-width: 575.98px) { :root { --ryna-topbar-height: 66px; } .topbar-eyebrow { display: none; } .topbar-user { gap: 4px; } .user-avatar-logo { width: 46px; } .app-content { padding-top: 16px; } .card-body { padding: 1rem; } .table > :not(caption) > * > * { padding: .7rem; } .form-control, .form-select { min-height: 48px; font-size: 16px; } .btn:not(.btn-sm), .modal-footer .btn { min-height: 46px; } .alert { padding: .85rem 1rem; } .modal-dialog { margin: max(.5rem, var(--ryna-safe-top)) max(.5rem, var(--ryna-safe-right)) max(.5rem, var(--ryna-safe-bottom)) max(.5rem, var(--ryna-safe-left)); } .modal-footer { gap: .5rem; padding-bottom: max(.75rem, var(--ryna-safe-bottom)); } .guest-brand { padding: calc(18px + var(--ryna-safe-top)) max(20px, var(--ryna-safe-right)) 12px max(20px, var(--ryna-safe-left)); } .guest-content { max-width: 460px; padding: 14px max(16px, var(--ryna-safe-right)) 18px max(16px, var(--ryna-safe-left)); } .guest-content .card-body { padding: 1.4rem; } .guest-login-card { border-radius: 20px; } .guest-login-card .metric-icon { width: 44px; height: 44px; margin-bottom: .75rem!important; } .guest-login-card h1 { font-size: 1.65rem; } .guest-footer { padding: 14px max(16px, var(--ryna-safe-right)) calc(16px + var(--ryna-safe-bottom)) max(16px, var(--ryna-safe-left)); } } /* Ecart releve par la recette visible ChatGPT du 26/07/2026 (Etape 1) : ces deux regles etaient limitees a <= 575.98px, donc absentes en paysage sur un telephone large (ex. Galaxy S26 Ultra, ~1040px de large en paysage) ; le clavier ouvert faisait alors remonter le champ actif presque entierement hors ecran. .keyboard-open est deja un signal comportemental (clavier virtuel reellement ouvert, cf. app.js) : pas besoin d'une largeur d'ecran en plus pour l'appliquer sans risque cote desktop. */ .keyboard-open .guest-brand, .keyboard-open .guest-footer { display: none; } .keyboard-open .guest-content { margin: 0 auto auto; padding-top: 10px; } .offline-sync-banner { position: fixed; right: 1rem; bottom: 1rem; z-index: 2100; max-width: min(420px, calc(100vw - 2rem)); padding: .9rem 1rem; border-radius: 1rem; background: #06264a; color: #fff; box-shadow: 0 22px 70px rgba(2, 6, 23, .28); font-weight: 700; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .offline-sync-banner.show { opacity: 1; transform: translateY(0); } .refacturation-modal { max-width: min(1120px, calc(100vw - 1rem)); height: calc(100dvh - 1rem); margin: .5rem auto; } .refacturation-modal .modal-content, .refacturation-modal form { max-height: 100%; min-height: 0; } .refacturation-modal form { display: flex; flex-direction: column; } .refacturation-modal .modal-body { overflow: auto; min-height: 0; } .refacturation-modal .modal-footer { position: sticky; bottom: 0; z-index: 2; background: #fff; border-top: 1px solid var(--ryna-border); } .refacturation-modal table { min-width: 760px; } @media (max-width: 575.98px) { .refacturation-modal { max-width: 100vw; height: 100dvh; margin: 0; } /* Plein ecran voulu, mais les zones de securite doivent rester visibles : appliquees en padding interne plutot qu'en marge exterieure (annulee par le "margin: 0" ci-dessus). Rapport ChatGPT du 26/07/2026, section "Zones de securite". */ .refacturation-modal .modal-content { padding-top: var(--ryna-safe-top); padding-right: var(--ryna-safe-right); padding-left: var(--ryna-safe-left); } .refacturation-modal .modal-footer { padding-bottom: max(.75rem, var(--ryna-safe-bottom)); } .refacturation-modal table { min-width: 680px; } .refacturation-modal .modal-footer .btn { flex: 1 1 auto; } } .offline-sync-banner[data-type="success"] { background: #179447; } .offline-sync-banner[data-type="error"] { background: #b42318; } .offline-sync-banner[data-type="pending"] { background: linear-gradient(135deg, #06264a, #0f766e); } .offline-sync-banner[data-type="offline"] { background: #495464; } /* Etape 4 - indicateur de chargement generique (haut d'ecran, navigation MPA). */ .ryna-progress-bar { position: fixed; top: var(--ryna-safe-top, 0px); left: 0; width: 100%; height: 3px; z-index: 1500; background: transparent; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .15s ease; } .ryna-progress-bar.is-active { opacity: 1; } .ryna-progress-bar.is-active::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 40%; background: var(--client-primary); border-radius: 0 2px 2px 0; animation: ryna-progress-slide 1.1s ease-in-out infinite; } @keyframes ryna-progress-slide { 0% { left: -40%; } 60% { left: 100%; } 100% { left: 100%; } } .is-submitting { opacity: .7; } .ryna-spin { display: inline-block; animation: ryna-spin-rotate .8s linear infinite; } @keyframes ryna-spin-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .pwa-install-invite { position: fixed; left: 50%; bottom: 1rem; z-index: 2200; width: min(760px, calc(100vw - 2rem)); display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 1.35rem; background: linear-gradient(135deg, #06264a, #074033); color: #fff; box-shadow: 0 28px 90px rgba(2, 6, 23, .32); opacity: 0; transform: translate(-50%, 20px); transition: opacity .22s ease, transform .22s ease; } .pwa-install-invite.show { opacity: 1; transform: translate(-50%, 0); } .pwa-install-icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 1rem; background: var(--client-primary, #179447); font-weight: 900; color: #fff; } .pwa-install-copy { display: grid; gap: .15rem; } .pwa-install-copy strong { font-size: 1rem; } .pwa-install-copy span { color: rgba(255, 255, 255, .78); font-size: .9rem; } .pwa-install-actions { display: flex; align-items: center; gap: .45rem; } @media (max-width: 720px) { .pwa-install-invite { grid-template-columns: auto 1fr; } .pwa-install-actions { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; } } .dashboard-place-assignment { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 320px) auto; align-items: center; gap: .75rem; } .dashboard-place-assignment-name { display: flex; flex-direction: column; min-width: 0; } .dashboard-place-assignment-name strong, .dashboard-place-assignment-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dashboard-place-assignment-name span { color: var(--bs-secondary-color); font-size: .78rem; } @media (max-width: 767.98px) { .dashboard-place-assignment { grid-template-columns: 1fr; } } /* ===== Etape 2 - feuille de route mobile (26/07/2026) ===== Trois vues adaptees en parallele par des agents distincts, chacun scope a ses propres classes pour eviter toute collision : dashboard Super Admin, dashboard Admin client/Exploitant/Lecture seule, portail Chauffeur. Fusionne ici en une seule passe. */ /* --- Dashboard Super Admin --- */ @media (max-width: 991.98px), (hover: none) and (pointer: coarse) and (max-width: 1180px) { .dashboard-super-admin-hero-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .dashboard-super-admin-hero-actions .btn { width: 100%; justify-content: center; white-space: nowrap; } } @media (max-width: 575.98px) { .dashboard-super-admin-hero-actions .btn { font-size: .72rem; } .dashboard-super-admin-kpis .metric-card .card-body { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 108px; padding: .85rem; } .dashboard-super-admin-kpis .metric-icon { width: 36px; height: 36px; font-size: 1rem; } .dashboard-super-admin-kpis .metric-value { font-size: 1.3rem; } } .dashboard-super-admin-table { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; scrollbar-width: none; } .dashboard-super-admin-table::-webkit-scrollbar { display: none; } @media (max-width: 767.98px) { .dashboard-super-admin-table table { min-width: 700px; } } /* --- Dashboard Admin client / Exploitant / Lecture seule --- */ @media (max-width: 991.98px), (hover: none) and (pointer: coarse) and (max-width: 1180px) { .dashboard-watch-list .list-group-item, .dashboard-activity-list .list-group-item { min-height: 44px; padding-block: .95rem; } } @media (max-width: 991.98px) { .dashboard-agenda { -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; } } @media (max-width: 575.98px) { .dashboard-place-assignment { gap: 1rem; } } /* --- Portail Chauffeur --- */ .chauffeur-portal .chauffeur-action-card .card-body { padding: 1rem 1.1rem; } .chauffeur-portal .chauffeur-action-text { min-width: 0; } .chauffeur-portal .chauffeur-action-text p { overflow-wrap: anywhere; } .chauffeur-portal .chauffeur-action-arrow { font-size: 1.1rem; } .chauffeur-portal .action-card { transition: background-color .12s ease, transform .12s ease; } .chauffeur-portal .action-card:active { background-color: color-mix(in srgb, var(--client-primary), white 92%); transform: scale(0.98); } .chauffeur-portal .chauffeur-row-text { min-width: 0; overflow-wrap: anywhere; } .chauffeur-portal #demande-maintenance { scroll-margin-top: calc(var(--ryna-topbar-height) + var(--ryna-safe-top) + 12px); } @media (max-width: 991.98px), (hover: none) and (pointer: coarse) and (max-width: 1180px) { .chauffeur-portal .chauffeur-submit-btn { width: 100%; } .chauffeur-portal .chauffeur-quick-actions { row-gap: 0.85rem; } } /* ===== Etape 3 - feuille de route mobile (26/07/2026) ===== */ /* Empilement optionnel en "cartes" pour les tableaux a beaucoup de colonnes (utilise data-label sur chaque ; sans cette classe, .table-responsive suffit et le comportement reste inchange). Propose par l'agent Referentiels, reutilisable par les autres modules si besoin. */ @media (max-width: 767.98px) { .table-stack-sm thead { display: none; } .table-stack-sm, .table-stack-sm tbody, .table-stack-sm tr, .table-stack-sm td { display: block; width: 100%; } .table-stack-sm tr { border: 1px solid var(--ryna-border); border-radius: var(--ryna-radius); margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; box-shadow: var(--ryna-shadow); } .table-stack-sm td { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; border: none !important; white-space: normal; } .table-stack-sm td::before { content: attr(data-label); flex: 0 0 40%; font-weight: 600; color: var(--ryna-muted); } .table-stack-sm td > *:not(form) { flex: 1 1 auto; min-width: 0; } } /* Corrections recette ChatGPT Etape 3 (26/07/2026) : tableaux d'edition inline (Chauffeurs, Utilisateurs client) se comprimaient au lieu de defiler horizontalement dans .table-responsive, rendant les champs illisibles/tronques en portrait. On force une largeur minimale de table pour que le defilement se declenche au lieu du tassement, et on garantit une largeur mini utilisable a chaque champ inline. */ @media (max-width: 991.98px), (hover: none) and (pointer: coarse) and (max-width: 1180px) { .table-force-scroll { min-width: 760px; } .table-force-scroll .form-control-sm, .table-force-scroll .form-select-sm { min-width: 110px; } } /* ===== Etape 5 - mode sombre (28/07/2026), suite ===== Overrides des classes custom RYNA dont le fond (ou une variable scopee type --agenda-*) etait code en dur en clair (#fff, color-mix(..., white NN%)) et ne suit donc pas automatiquement --ryna-bg/--ryna-surface redefinis plus haut. Portee volontairement limitee aux cas ou du texte (var(--ryna-text) / var(--ryna-muted)) se retrouverait sinon illisible sur un fond reste clair - les puces d'icone purement decoratives (.metric-icon, .dashboard-kpi-icon, .dashboard-event-mark, etc., teinte claire + icone coloree, sans texte de corps dessus) sont laissees telles quelles : elles restent lisibles dans les deux themes et beaucoup d'interfaces sombres gardent ce type de pastille claire par choix. */ html[data-bs-theme="dark"] .app-topbar { background: rgba(19, 42, 69, .92); border-bottom-color: var(--ryna-border); } html[data-bs-theme="dark"] .app-mobile-nav { background: rgba(19, 42, 69, .92); border-top-color: var(--ryna-border); } html[data-bs-theme="dark"] .app-footer, html[data-bs-theme="dark"] .dashboard-block-footer, html[data-bs-theme="dark"] .refacturation-modal .modal-footer { background: var(--ryna-surface); } html[data-bs-theme="dark"] .card-header { background: color-mix(in srgb, var(--client-accent), var(--ryna-surface) 80%); border-bottom-color: color-mix(in srgb, var(--client-accent), var(--ryna-border) 55%); } html[data-bs-theme="dark"] .table { --bs-table-striped-bg: color-mix(in srgb, var(--ryna-surface), white 5%); --bs-table-hover-bg: color-mix(in srgb, var(--client-primary), var(--ryna-surface) 85%); } html[data-bs-theme="dark"] .table thead th { color: var(--ryna-muted); background: color-mix(in srgb, var(--ryna-surface), black 14%); } html[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: color-mix(in srgb, var(--ryna-surface), white 5%); } html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select { border-color: var(--ryna-border); } html[data-bs-theme="dark"] .dashboard-agenda-row:hover { background: color-mix(in srgb, var(--client-primary), var(--ryna-surface) 85%); } html[data-bs-theme="dark"] .dashboard-consumption-summary > div { background: color-mix(in srgb, var(--client-primary), var(--ryna-surface) 82%); } html[data-bs-theme="dark"] .dashboard-consumption-card { background: linear-gradient(135deg, color-mix(in srgb, var(--client-accent), var(--ryna-surface) 80%), var(--ryna-surface)); } html[data-bs-theme="dark"] .dashboard-module-links a { background: color-mix(in srgb, var(--client-primary), var(--ryna-surface) 85%); border-color: color-mix(in srgb, var(--client-primary), var(--ryna-surface) 65%); } html[data-bs-theme="dark"] .chauffeur-portal .action-card:active { background-color: color-mix(in srgb, var(--client-primary), var(--ryna-surface) 85%); } html[data-bs-theme="dark"] .app-guest { background: radial-gradient(circle at top right, color-mix(in srgb, var(--client-primary), var(--ryna-bg) 78%), transparent 38%), var(--ryna-bg); } /* Planning/agenda (dashboard + maintenance) : plusieurs fonds codes en dur (#fff) independants des variables scopees --agenda-*, corriges ici. */ html[data-bs-theme="dark"] .dashboard-planning { --agenda-border: var(--ryna-border); --agenda-muted: var(--ryna-muted); --agenda-soft: color-mix(in srgb, var(--ryna-surface), black 10%); --agenda-grid: color-mix(in srgb, var(--ryna-surface), white 6%); background: var(--ryna-surface); } html[data-bs-theme="dark"] .dashboard-planning-toolbar, html[data-bs-theme="dark"] .dashboard-hour-gutter { background: var(--ryna-surface); } html[data-bs-theme="dark"] .dashboard-day-col { background: repeating-linear-gradient(to bottom, var(--agenda-grid) 0 1px, transparent 1px 42px), var(--ryna-surface); } html[data-bs-theme="dark"] .dashboard-day-col.is-today, html[data-bs-theme="dark"] .dashboard-planning-condensed .dashboard-day-col.is-today { background-color: color-mix(in srgb, var(--client-primary), var(--ryna-surface) 85%); } html[data-bs-theme="dark"] .maintenance-agenda-day { background: var(--ryna-surface); } html[data-bs-theme="dark"] .maintenance-agenda-day.is-today { background: color-mix(in srgb, var(--client-primary), var(--ryna-surface) 85%); } html[data-bs-theme="dark"] .maintenance-agenda-event { background: color-mix(in srgb, #b7791f, var(--ryna-surface) 78%); } html[data-bs-theme="dark"] .maintenance-agenda-event.is-request { background: color-mix(in srgb, #6f42c1, var(--ryna-surface) 78%); } /* Bouton de bascule clair/sombre (topbar desktop + mobile, voir app.js et layouts/app.php) : reutilise .btn-icon, deja theme via --ryna-muted et --ryna-border, donc aucun style dedie necessaire au-dela de l'icone geree en JS (bi-moon-stars / bi-sun selon l'etat courant). */ /* Bug releve par la recette ChatGPT du 28/07/2026 (Etape 5) : .app-authenticated utilise `background: var(--client-background, var(--ryna-bg))` - or --client-background est TOUJOURS definie (ClientTheme::cssVariables la pose inconditionnellement sur :root pour chaque client), donc le fallback vers --ryna-bg ne se declenche jamais et le fond restait clair en mode sombre pendant que les titres passaient en --ryna-text clair (texte quasi blanc sur fond quasi blanc, illisible sur tous les ecrans authentifies). Priorite explicite a --ryna-bg des que le mode sombre est actif, quelle que soit la couleur de fond personnalisee du client - aucun client n'a aujourd'hui de fond sombre dedie, donc rien d'autre a distinguer pour l'instant.*/ html[data-bs-theme="dark"] .app-authenticated { background: var(--ryna-bg); }