/* ===================================================================== Gazon Oli — app.css Feuille de style unique, dérivée de design/tokens.css (source de vérité). Thème clair (défaut) + sombre via [data-theme="dark"] sur . ===================================================================== */ /* ---------------------------------------------------------------- Tokens */ :root { --bg:#f2f4ef; --surface:#ffffff; --surface-2:#e9ece4; --surface-3:#f6f8f3; --border:#dbe0d5; --border-strong:#c3cab9; --text:#191c16; --text-muted:#5b6157; --text-faint:#8a9083; --accent:#2f9e44; --accent-strong:#238038; --accent-soft:#e4f3e8; --on-accent:#ffffff; --success:#2f9e44; --success-soft:#e4f3e8; --warning:#c98a12; --warning-soft:#fbf1dc; --danger:#cf4040; --danger-soft:#fae9e9; --on-danger:#ffffff; --field-bg:#f6f8f3; --field-border:#cdd4c5; --shadow-sm:0 1px 2px rgba(24,40,18,.07); --shadow-md:0 4px 16px rgba(24,40,18,.10); --shadow-lg:0 12px 40px rgba(24,40,18,.16); --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:22px; --radius-pill:999px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --font-sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; } [data-theme="dark"] { --bg:#10130d; --surface:#191d15; --surface-2:#232820; --surface-3:#1e231a; --border:#323829; --border-strong:#454d3a; --text:#edf0e8; --text-muted:#a0a795; --text-faint:#767d6b; --accent:#43b85c; --accent-strong:#59c56f; --accent-soft:#1d3122; --on-accent:#08140a; --success:#43b85c; --success-soft:#1d3122; --warning:#e0a63a; --warning-soft:#33290f; --danger:#e56a6a; --danger-soft:#3a1e1e; --on-danger:#160808; --field-bg:#20251c; --field-border:#3a4130; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 16px rgba(0,0,0,.45); --shadow-lg:0 14px 44px rgba(0,0,0,.6); } /* ---------------------------------------------------------------- Reset */ * { box-sizing:border-box; } html, body { margin:0; padding:0; } body { font-family:var(--font-sans); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; min-height:100vh; transition:background .2s, color .2s; } a { color:inherit; } button { font-family:inherit; } .tnum { font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } @keyframes pop { 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} } @keyframes toastIn { 0%{transform:translateY(20px);opacity:0} 100%{transform:translateY(0);opacity:1} } @keyframes spin { to{ transform:rotate(360deg); } } /* ------------------------------------------------------------ Typographie */ .page-title { font:800 clamp(22px,4vw,28px)/1.1 var(--font-sans); letter-spacing:-.01em; margin:0; } .page-sub { color:var(--text-muted); font-size:14px; margin-top:2px; } .section-title { font:700 16px/1.2 var(--font-sans); margin:0; } .muted { color:var(--text-muted); } .faint { color:var(--text-faint); } .caption { font:500 12px/1.3 var(--font-sans); color:var(--text-muted); } .amount { font-variant-numeric:tabular-nums; font-weight:700; } .amount--due { color:var(--danger); } .amount--advance { color:var(--accent-strong); } /* ------------------------------------------------------------ Utilitaires */ .row { display:flex; align-items:center; gap:10px; } .between { justify-content:space-between; } .wrap { flex-wrap:wrap; } .stack { display:flex; flex-direction:column; gap:12px; } .grow { flex:1; } .only-desktop { display:none !important; } .only-mobile { display:revert; } @media (min-width:900px){ .only-desktop { display:revert !important; } .only-mobile { display:none !important; } } /* ---------------------------------------------------------------- Boutons */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 18px; border-radius:var(--radius-md); font:700 15px/1 var(--font-sans); cursor:pointer; border:1px solid transparent; text-decoration:none; transition:background .12s, border-color .12s; } .btn svg { width:18px; height:18px; } .btn--primary { background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-sm); } .btn--primary:hover { background:var(--accent-strong); } .btn--secondary { background:var(--surface); color:var(--text); border-color:var(--border-strong); font-weight:600; } .btn--secondary:hover { background:var(--surface-2); } .btn--danger { background:var(--danger-soft); color:var(--danger); border-color:var(--danger); } .btn--ghost { background:transparent; color:var(--text-muted); } .btn--ghost:hover { background:var(--surface-2); color:var(--text); } .btn--block { width:100%; } .btn--lg { height:56px; font-size:16px; } .btn--sm { height:38px; padding:0 12px; font-size:13px; border-radius:var(--radius-sm); } .btn--sm svg { width:16px; height:16px; } /* ----------------------------------------------------------------- Champs */ .field-group { margin-bottom:16px; } .label { display:block; font:600 13px/1 var(--font-sans); color:var(--text-muted); margin-bottom:7px; } .input { width:100%; height:46px; padding:0 14px; border:1px solid var(--field-border); border-radius:11px; background:var(--field-bg); color:var(--text); font:400 15px/1 var(--font-sans); } .input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } /* Recherche */ .search { position:relative; } .search svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-faint); } .search .input { height:46px; padding-left:42px; border-radius:var(--radius-pill); } /* ------------------------------------------------------------------ Chips */ .chip { display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:var(--radius-pill); font:700 12px/1 var(--font-sans); } .chip--paid, .chip--advance { background:var(--accent-soft); color:var(--accent-strong); } .chip--due { background:var(--danger-soft); color:var(--danger); } .chip--season { background:var(--accent-soft); color:var(--accent-strong); } .chip--temp { background:var(--warning-soft); color:var(--warning); } .chip--neutral { background:var(--surface-2); color:var(--text-muted); } /* Chips-filtres (sélectionnables) */ .filter { display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:var(--radius-pill); border:1px solid var(--border-strong); background:var(--surface); color:var(--text-muted); font:600 13px/1 var(--font-sans); cursor:pointer; } .filter.is-active { background:var(--accent-soft); border-color:transparent; color:var(--accent-strong); } /* ---------------------------------------------------------------- Cartes */ .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); } .card--pad { padding:20px; } /* Avatar (initiales) */ .avatar { display:inline-flex; align-items:center; justify-content:center; flex:none; width:38px; height:38px; border-radius:50%; background:var(--accent-soft); color:var(--accent-strong); font:700 13px/1 var(--font-sans); } .avatar--lg { width:52px; height:52px; font-size:17px; } /* -------------------------------------------------------------- Tuiles KPI */ .kpi-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .kpi { border-radius:var(--radius-lg); padding:18px 20px; border:1px solid var(--border); background:var(--surface); } .kpi__label { font:600 13px/1.2 var(--font-sans); color:var(--text-muted); } .kpi__value { font:800 30px/1.05 var(--font-sans); letter-spacing:-.02em; margin-top:6px; font-variant-numeric:tabular-nums; } .kpi__meta { font:500 12px/1.2 var(--font-sans); color:var(--text-muted); margin-top:6px; } .kpi--accent { background:var(--accent); border-color:transparent; color:var(--on-accent); } .kpi--accent .kpi__label { color:color-mix(in srgb, var(--on-accent) 80%, transparent); } .kpi--danger { background:var(--danger-soft); border-color:transparent; } .kpi--danger .kpi__value { color:var(--danger); } .kpi--wide { grid-column:1 / -1; } @media (min-width:900px){ .kpi-grid { grid-template-columns:repeat(3,1fr); } .kpi--wide { grid-column:auto; } .kpi__value { font-size:34px; } } /* --------------------------------------------------------------- Sections */ .section { margin-top:22px; } .section__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } /* ------------------------------------------------------------------ Listes */ .list { display:flex; flex-direction:column; } .list-row { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--border); } .list-row:last-child { border-bottom:none; } .list-row__main { min-width:0; flex:1; } .list-row__title { font:600 15px/1.2 var(--font-sans); } .list-row__sub { font:400 13px/1.2 var(--font-sans); color:var(--text-muted); margin-top:2px; } /* -------------------------------------------------------------- Tableau */ .table-wrap { overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--border); } .table { width:100%; border-collapse:collapse; background:var(--surface); } .table thead th { text-align:left; font:600 12px/1 var(--font-sans); letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); padding:13px 16px; background:var(--surface-3); } .table tbody td { padding:14px 16px; border-top:1px solid var(--border); font-size:15px; } .table tbody tr:hover { background:var(--surface-3); } .table .num { text-align:right; font-variant-numeric:tabular-nums; } /* ------------------------------------------------------------ Sélecteur année */ .year-sel { display:inline-flex; align-items:center; gap:2px; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-pill); padding:4px; } .year-sel button { width:32px; height:32px; border:none; background:transparent; border-radius:var(--radius-pill); cursor:pointer; color:var(--text-muted); display:flex; align-items:center; justify-content:center; } .year-sel button:hover { background:var(--surface-2); color:var(--text); } .year-sel button svg { width:18px; height:18px; } .year-sel__val { font:700 15px/1 var(--font-sans); padding:0 6px; font-variant-numeric:tabular-nums; } /* -------------------------------------------------------- Bascule de thème */ .theme-toggle, .icon-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; border-radius:var(--radius-pill); border:1px solid var(--border-strong); background:var(--surface); color:var(--text); cursor:pointer; font:600 13px/1 var(--font-sans); } .theme-toggle { padding:0 14px; } .icon-btn { width:40px; } .theme-toggle svg, .icon-btn svg { width:17px; height:17px; } .theme-toggle .theme-toggle__dark { display:none; } [data-theme="dark"] .theme-toggle .theme-toggle__light { display:none; } [data-theme="dark"] .theme-toggle .theme-toggle__dark { display:inline; } /* ================================================================ LAYOUT */ .app-layout { min-height:100vh; } @media (min-width:900px){ .app-layout { display:grid; grid-template-columns:236px 1fr; } } /* Sidebar (bureau) */ .sidebar { display:none; } @media (min-width:900px){ .sidebar { display:flex; flex-direction:column; gap:4px; padding:20px 16px; border-right:1px solid var(--border); background:var(--surface-3); position:sticky; top:0; height:100vh; } } .sidebar__brand { display:flex; align-items:center; gap:10px; padding:6px 8px 14px; } .brand-mark { width:34px; height:34px; border-radius:9px; background:var(--accent); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); flex:none; } .brand-mark svg { width:20px; height:20px; } .brand-name { font:800 16px/1.1 var(--font-sans); letter-spacing:-.01em; } .nav { display:flex; flex-direction:column; gap:2px; } .nav__item { display:flex; align-items:center; gap:12px; height:44px; padding:0 12px; border-radius:var(--radius-md); color:var(--text-muted); font:600 14px/1 var(--font-sans); text-decoration:none; } .nav__item:hover { background:var(--surface-2); color:var(--text); } .nav__item.is-active { background:var(--accent-soft); color:var(--accent-strong); } .nav__item svg { width:20px; height:20px; flex:none; } .sidebar__cta { margin:12px 0; } .sidebar__spacer { flex:1; } .sidebar__foot { display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px solid var(--border); } .sidebar__foot .grow { min-width:0; } .sidebar__foot .who { font:600 13px/1.1 var(--font-sans); } /* Barre supérieure (mobile) */ .topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); } @media (min-width:900px){ .topbar { display:none; } } .topbar__left { display:flex; align-items:center; gap:10px; } .topbar__title { font:800 17px/1.1 var(--font-sans); } /* Zone principale */ .app-main { min-width:0; } .page { padding:18px 16px 96px; max-width:1080px; margin:0 auto; } @media (min-width:900px){ .page { padding:28px 32px 40px; } } .page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; } /* Barre de navigation du bas (mobile) */ .bottomnav { position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; align-items:flex-end; justify-content:space-around; padding:6px 6px calc(6px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--border); box-shadow:var(--shadow-md); } @media (min-width:900px){ .bottomnav { display:none; } } .bnav { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; padding:6px 0; color:var(--text-muted); font:600 11px/1 var(--font-sans); text-decoration:none; min-height:44px; } .bnav.is-active { color:var(--accent-strong); } .bnav svg { width:22px; height:22px; } .bnav__fab { width:52px; height:52px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); margin-top:-24px; border:4px solid var(--bg); } .bnav__fab svg { width:26px; height:26px; } /* =============================================================== AUTH */ .auth { min-height:100vh; display:flex; flex-direction:column; } .auth__theme { position:fixed; top:14px; right:14px; z-index:10; } .auth-split { display:grid; grid-template-columns:1fr; min-height:100vh; } @media (min-width:900px){ .auth-split { grid-template-columns:1.05fr 1fr; } } .auth-brand { display:none; } @media (min-width:900px){ .auth-brand { display:flex; flex-direction:column; justify-content:center; gap:18px; padding:56px; background:var(--accent); color:var(--on-accent); } } .auth-brand__mark { width:56px; height:56px; border-radius:16px; background:color-mix(in srgb, var(--on-accent) 18%, transparent); display:flex; align-items:center; justify-content:center; } .auth-brand__mark svg { width:32px; height:32px; } .auth-brand h1 { font:800 34px/1.1 var(--font-sans); margin:0; letter-spacing:-.02em; } .auth-brand p { font-size:16px; opacity:.9; max-width:34ch; margin:0; } .auth-form-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding:24px; } .auth-card { width:100%; max-width:400px; } .auth-card__head { display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:22px; text-align:center; } .auth-card__head .brand-mark { width:44px; height:44px; } .auth-card__head .brand-mark svg { width:26px; height:26px; } .auth-title { font:800 22px/1.2 var(--font-sans); } /* Pavé numérique + puces NIP */ .pad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .pad button { height:62px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--surface); font:600 22px/1 var(--font-sans); color:var(--text); cursor:pointer; font-variant-numeric:tabular-nums; } .pad button:hover { background:var(--surface-2); } .pad button.pad--muted { background:transparent; border-color:transparent; } .pin-dots { display:flex; gap:14px; justify-content:center; margin:20px 0; } .pin-dot { width:14px; height:14px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border-strong); } .pin-dot.is-filled { background:var(--accent); border-color:var(--accent); } /* Cases de code (2FA) */ .code-boxes { display:flex; gap:8px; justify-content:center; } .code-box { width:46px; height:56px; border:1px solid var(--field-border); border-radius:var(--radius-md); background:var(--field-bg); text-align:center; font:700 24px/56px var(--font-sans); color:var(--text); } .code-box:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } /* --------------------------------------------- Icône de bascule de thème */ .tic-light { display:inline-flex; align-items:center; } .tic-dark { display:none; align-items:center; } [data-theme="dark"] .tic-light { display:none; } [data-theme="dark"] .tic-dark { display:inline-flex; } /* ------------------------------------------------------- Feuille du bas */ .sheet-backdrop { position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.4); display:flex; align-items:flex-end; } .sheet-backdrop[hidden] { display:none; } .sheet { width:100%; background:var(--surface); border-radius:var(--radius-xl) var(--radius-xl) 0 0; padding:12px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow:var(--shadow-lg); animation:toastIn .2s ease; } .sheet__grip { width:40px; height:4px; border-radius:999px; background:var(--border-strong); margin:4px auto 12px; } .sheet__item { display:flex; align-items:center; gap:12px; height:52px; padding:0 8px; border-radius:var(--radius-md); color:var(--text); text-decoration:none; font:600 15px/1 var(--font-sans); } .sheet__item:hover { background:var(--surface-2); } .sheet__item svg { width:20px; height:20px; color:var(--text-muted); } @media (min-width:900px){ .sheet-backdrop { display:none; } } /* ---------------------------------------------------------------- Toast */ .toast { position:fixed; left:50%; bottom:88px; transform:translateX(-50%); z-index:70; background:var(--text); color:var(--bg); padding:12px 18px; border-radius:var(--radius-pill); font:600 14px/1 var(--font-sans); box-shadow:var(--shadow-lg); animation:toastIn .28s ease; } /* -------------------------------------------------------------- Divers */ .divider { height:1px; background:var(--border); border:none; margin:16px 0; } /* ------------------------------------------------------------ Placeholder */ .placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:64px 20px; text-align:center; color:var(--text-muted); } .placeholder__icon { width:56px; height:56px; border-radius:16px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; } .placeholder__icon svg { width:28px; height:28px; color:var(--text-faint); } /* -------------------------------------------------- Indicateurs & divers */ .avatar--done { background:var(--accent); color:var(--on-accent); } .avatar--todo { background:var(--surface-2); color:var(--text-faint); } .list-row__amount { margin-left:auto; } a.list-row { text-decoration:none; color:inherit; } a.list-row:hover .list-row__title { color:var(--accent-strong); } .detail-grid { display:grid; gap:14px; } @media (min-width:720px){ .detail-grid { grid-template-columns:1fr 1fr; } } .page-actions { display:flex; gap:10px; flex-wrap:wrap; } .kv { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:15px; } .kv:last-child { border-bottom:none; } .kv__k { color:var(--text-muted); min-width:104px; } .big-amount { font:800 clamp(30px,7vw,40px)/1 var(--font-sans); letter-spacing:-.02em; font-variant-numeric:tabular-nums; } /* ===================================================================== PARTIE 2 — composants des écrans restants ===================================================================== */ /* Contrôle segmenté (moyen de paiement, onglets courts) */ .seg { display:inline-flex; width:100%; background:var(--surface-2); border-radius:var(--radius-md); padding:4px; gap:4px; } .seg__opt { flex:1; height:42px; border:none; background:transparent; border-radius:9px; color:var(--text-muted); font:600 14px/1 var(--font-sans); cursor:pointer; } .seg__opt.is-active { background:var(--surface); color:var(--accent-strong); box-shadow:var(--shadow-sm); font-weight:700; } [data-theme="dark"] .seg__opt.is-active { background:var(--surface-3); } /* Interrupteur (toggle) */ .switch { width:48px; height:28px; border-radius:var(--radius-pill); border:none; position:relative; cursor:pointer; transition:background .15s; background:var(--border-strong); flex:none; } .switch[aria-checked="true"] { background:var(--accent); } .switch__knob { position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:left .15s; } .switch[aria-checked="true"] .switch__knob { left:22px; } /* Grande case à cocher + rangée cliquable */ .check { width:34px; height:34px; border-radius:10px; border:2px solid var(--border-strong); background:var(--surface); display:inline-flex; align-items:center; justify-content:center; flex:none; color:transparent; transition:all .12s; } .check.is-checked { background:var(--accent); border-color:var(--accent); color:var(--on-accent); } .check svg { width:20px; height:20px; } .tickrow { display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid var(--border); cursor:pointer; } .tickrow:last-child { border-bottom:none; } .tickrow__main { flex:1; min-width:0; } .tickrow__title { font:600 15px/1.2 var(--font-sans); } .tickrow__sub { font:400 13px/1.2 var(--font-sans); color:var(--text-muted); margin-top:2px; } /* Barre d'enregistrement (grille de tontes) */ .savebar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; } .savebar__count { font:700 15px/1 var(--font-sans); } /* Écran paiement */ .pay { max-width:460px; margin:0 auto; } .pay__amount { text-align:center; padding:6px 0; } .pay__amount .lbl { font:600 12px/1 var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); } .pay__amount .val { font:800 56px/1.05 var(--font-sans); letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-top:8px; } .pay__after { color:var(--text-muted); font-size:14px; margin-top:8px; } .pay__field { margin-top:18px; } .pay__field > .lbl { display:block; font:600 13px/1 var(--font-sans); color:var(--text-muted); margin-bottom:8px; } /* Écran pointage (punch) */ .punch { display:flex; flex-direction:column; align-items:center; gap:22px; padding:16px 0; } .punch__status { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:var(--radius-pill); font:700 13px/1 var(--font-sans); } .punch__status--in { background:var(--accent-soft); color:var(--accent-strong); } .punch__status--out { background:var(--surface-2); color:var(--text-muted); } .punch-btn { width:212px; height:212px; border-radius:50%; border:none; cursor:pointer; color:var(--on-accent); background:var(--accent); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; font:800 22px/1.1 var(--font-sans); } .punch-btn.is-in { background:var(--danger); } .punch-btn svg { width:40px; height:40px; } /* Boutons IN/OUT (pointage d'équipe) */ .io { display:inline-flex; gap:6px; } .io__btn { height:36px; padding:0 14px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--surface); color:var(--text-muted); font:700 12px/1 var(--font-sans); cursor:pointer; letter-spacing:.03em; } .io__btn--in.is-active { background:var(--accent); color:var(--on-accent); border-color:transparent; } .io__btn--out.is-active { background:var(--danger-soft); color:var(--danger); border-color:var(--danger); } /* Onglets (rapports) */ .tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin-bottom:18px; } .tab { height:42px; padding:0 14px; border:none; background:transparent; color:var(--text-muted); font:600 14px/1 var(--font-sans); cursor:pointer; border-bottom:2px solid transparent; } .tab.is-active { color:var(--accent-strong); border-bottom-color:var(--accent); } /* Tuiles statistiques (rapports) */ .stat-grid { display:grid; gap:12px; grid-template-columns:repeat(2,1fr); } @media (min-width:760px){ .stat-grid { grid-template-columns:repeat(4,1fr); } } .stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; } .stat__label { font:600 12px/1.2 var(--font-sans); color:var(--text-muted); } .stat__value { font:800 24px/1.1 var(--font-sans); margin-top:6px; font-variant-numeric:tabular-nums; } /* Formulaires */ .form-grid { display:grid; gap:0 16px; grid-template-columns:1fr; } @media (min-width:640px){ .form-grid { grid-template-columns:1fr 1fr; } } .form-grid .full { grid-column:1 / -1; } .textarea { width:100%; min-height:84px; padding:12px 14px; border:1px solid var(--field-border); border-radius:11px; background:var(--field-bg); color:var(--text); font:400 15px/1.4 var(--font-sans); resize:vertical; } .select { width:100%; height:46px; padding:0 12px; border:1px solid var(--field-border); border-radius:11px; background:var(--field-bg); color:var(--text); font:400 15px/1 var(--font-sans); } /* Rangée clé/valeur pour réglages & tableaux compacts */ .setting-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--border); } .setting-row:last-child { border-bottom:none; } .setting-row__label { font:600 14px/1.3 var(--font-sans); } .setting-row__desc { font:400 13px/1.3 var(--font-sans); color:var(--text-muted); margin-top:2px; } /* Avis / bannière */ .notice { display:flex; gap:10px; padding:12px 14px; border-radius:var(--radius-md); background:var(--accent-soft); color:var(--accent-strong); font-size:14px; } .notice--muted { background:var(--surface-2); color:var(--text-muted); } .notice--error { background:var(--danger-soft); color:var(--danger); } /* Reçu (papier — toujours clair, indépendant du thème) */ .receipt { background:#ffffff; color:#1a1a1a; border:1px solid #e6e6e6; border-radius:12px; padding:26px; max-width:420px; box-shadow:var(--shadow-md); } .receipt__brand { display:flex; align-items:center; gap:10px; margin-bottom:16px; } .receipt__brand .brand-mark { width:34px; height:34px; } .receipt__name { font:800 17px/1 var(--font-sans); } .receipt hr { border:none; border-top:1px solid #ececec; margin:14px 0; } .receipt__row { display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:14px; } .receipt__row .k { color:#6b6b6b; } .receipt__total { display:flex; justify-content:space-between; align-items:center; background:#eef7f0; color:#1a1a1a; border-radius:10px; padding:12px 14px; margin-top:12px; font-weight:800; } .receipt__foot { color:#8a8a8a; font-size:12px; margin-top:14px; text-align:center; } /* Courriel (aperçu) */ .email { max-width:420px; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); } .email__head { background:var(--accent); color:var(--on-accent); padding:22px; font:800 18px/1.2 var(--font-sans); } .email__body { padding:20px; } .two-col { display:grid; gap:16px; grid-template-columns:1fr; } @media (min-width:820px){ .two-col { grid-template-columns:1fr 1fr; align-items:start; } } /* Shell employé (mobile centré, toujours visible) */ .emp { max-width:460px; margin:0 auto; } .emp-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); } .emp-nav { position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; justify-content:center; gap:24px; padding:6px 12px calc(6px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--border); box-shadow:var(--shadow-md); } .emp-nav .bnav { flex:0 1 160px; }