/* ====================================================================== Direction A « Console » — Bibliothèque de composants partagée Consomme les variables de tokens.css. Chargé globalement. Toutes les transitions sont sur les composants, jamais sur la racine. ====================================================================== */ /* ---------- Reset (remplace l'ancien * { Overpass; 1rem }) ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } /* Échelle globale de l'app authentifiée : racine à 20px (= 16 × 1.25). Comme toutes les tailles sont en rem (base 16), tout est agrandi de 1.25×. Scopé à (base.html.twig) → login / page d'erreur (base_public, sans cette classe) restent à 16px, rendu identique. */ html.app-scale { font-size: 125%; } body { font-family: var(--font-ui); font-size: 1rem; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } .u-mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } /* Libellé de section discret (au-dessus d'une grille/liste) */ .section-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.0312rem; text-transform: uppercase; color: var(--faint); margin: 1.875rem 0 0.75rem; } .section-label:first-child { margin-top: 0; } /* ====================================================================== SHELL : sidebar (CSS dans sidebar.css) + app-main + topbar + contenu ====================================================================== */ body { display: flex; min-height: 100vh; } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .app-content { flex: 1; width: 100%; max-width: 82.5rem; margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.375rem) clamp(1rem, 3vw, 2.375rem) 5rem; } /* ---------- Topbar (header sticky 3.625rem) ---------- */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 0.875rem; height: 3.625rem; padding: 0 clamp(1rem, 3vw, 2.125rem); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(0.75rem); -webkit-backdrop-filter: blur(0.75rem); border-bottom: 1px solid var(--border); } .topbar__spacer { flex: 1; } /* Faux champ de recherche (visuel, non fonctionnel) */ .topbar__search { display: flex; align-items: center; gap: 0.5625rem; width: 18.75rem; max-width: 34vw; padding: 0.5rem 0.75rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); color: var(--faint); font-size: 0.8125rem; cursor: text; user-select: none; } .topbar__search-kbd { margin-left: auto; font-family: var(--font-mono); font-size: 0.6875rem; padding: 0.125rem 0.375rem; border-radius: 0.3125rem; border: 1px solid var(--border-strong); } /* Bouton icône générique (toggle thème, hamburger, menu) */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; flex-shrink: 0; border-radius: 0.5625rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: transform 0.2s ease, border-color 0.15s ease, color 0.15s ease; } .icon-btn:hover { border-color: var(--border-strong); } .icon-btn svg { width: 1.125rem; height: 1.125rem; } /* Toggle thème : rotation au survol */ .theme-toggle:hover { transform: rotate(15deg); } /* ---------- En-tête de page ---------- */ .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.875rem; margin-bottom: 1.5rem; } .page-head__intro { min-width: 0; } .page-head__kicker { font-size: 0.7812rem; font-weight: 600; letter-spacing: 0.0187rem; color: var(--accent); margin-bottom: 0.375rem; } .page-head__title { font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 800; letter-spacing: -0.05rem; line-height: 1.1; display: flex; align-items: center; gap: 0.75rem; } .page-head__actions { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; } .page-head__count { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 0.25rem 0.625rem; border-radius: 0.5rem; } /* Étiquette pilule « N membres actifs » (surface, s'adapte au thème) */ .count-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: 0.8125rem; font-weight: 600; color: var(--text); white-space: nowrap; } .count-pill__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--positive); flex-shrink: 0; } .count-pill__num { color: var(--text); } /* ====================================================================== BOUTONS ====================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; border-radius: var(--radius); border: 1px solid transparent; background: var(--surface); color: var(--text); font-size: 0.8125rem; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; transition: filter 0.15s ease, transform 0.12s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .btn svg { width: 1rem; height: 1rem; flex-shrink: 0; } .btn--primary { background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow); } .btn--primary:hover { filter: brightness(1.07); transform: translateY(-1px); } .btn--primary:active { transform: translateY(0); } .btn--secondary { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); } .btn--secondary:hover { border-color: var(--accent); color: var(--accent); } .btn--success { background: var(--positive); color: #fff; box-shadow: var(--shadow); } .btn--success:hover { filter: brightness(1.06); } .btn--danger { background: transparent; border-color: var(--danger); color: var(--danger); } .btn--danger:hover { background: var(--danger); color: #fff; } .btn--ghost { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; } .btn--ghost:hover { color: var(--text); background: var(--surface-2); } .btn--sm { padding: 0.4375rem 0.75rem; font-size: 0.7812rem; } .btn--block { width: 100%; } /* Bouton action-icône (poubelle, etc.) */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5625rem; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .btn-icon svg { width: 1rem; height: 1rem; } .btn-icon--danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); } /* ====================================================================== CARTES ====================================================================== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow); } .card--pad { padding: 1.125rem; } .card--interactive { transition: transform 0.16s ease, border-color 0.16s ease; } .card--interactive:hover { transform: translateY(-0.125rem); border-color: var(--border-strong); } /* Carte stat (label + valeur mono + delta) */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr)); gap: 0.8125rem; } .stat-card { padding: 1rem 1.0625rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow); transition: transform 0.16s ease, border-color 0.16s ease; } .stat-card:hover { transform: translateY(-0.125rem); border-color: var(--border-strong); } .stat-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5625rem; } .stat-card__label { font-size: 0.7188rem; font-weight: 600; color: var(--muted); } .stat-card__dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; flex-shrink: 0; } .stat-card__value { font-family: var(--font-mono); font-size: 1.6875rem; font-weight: 600; letter-spacing: -1px; line-height: 1; } .stat-card__delta { margin-top: 0.5625rem; font-size: 0.7188rem; font-weight: 600; } .stat-card__delta--muted { color: var(--faint); } .stat-card__delta--positive { color: var(--positive); } .stat-card__delta--warning { color: var(--warning); } .stat-card__delta--danger { color: var(--danger); } /* Liste de lignes (archives, etc.) */ .list-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow); overflow: hidden; } .list-row { display: flex; align-items: center; gap: 0.8125rem; padding: 0.8125rem 1rem; border-bottom: 1px solid var(--border); color: var(--text); cursor: pointer; transition: background 0.14s ease; } .list-row:last-child { border-bottom: none; } .list-row:hover { background: var(--surface-2); } .list-row__icon { display: flex; align-items: center; justify-content: center; width: 2.125rem; height: 2.125rem; flex-shrink: 0; border-radius: 0.5625rem; background: var(--accent-soft); color: var(--accent); } .list-row__icon svg { width: 1.0625rem; height: 1.0625rem; } .list-row__body { flex: 1; min-width: 0; } .list-row__title { font-size: 0.8438rem; font-weight: 600; } .list-row__meta { font-size: 0.7188rem; color: var(--faint); } .list-row__chevron { color: var(--faint); flex-shrink: 0; } /* Timeline (activité récente) */ .timeline { display: flex; flex-direction: column; } .timeline__item { display: flex; gap: 0.75rem; padding: 0.6875rem 0.875rem; } .timeline__rail { display: flex; flex-direction: column; align-items: center; } .timeline__dot { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; margin-top: 0.25rem; flex-shrink: 0; } .timeline__line { flex: 1; width: 0.125rem; background: var(--border); margin-top: 0.25rem; } .timeline__item:last-child .timeline__line { display: none; } .timeline__text { font-size: 0.8125rem; line-height: 1.4; } .timeline__when { font-size: 0.6875rem; color: var(--faint); margin-top: 0.125rem; } /* Avatar initiales (dégradé) */ .avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-weight: 700; border-radius: 0.75rem; } /* ====================================================================== TABLEAUX DE DONNÉES ====================================================================== */ .data-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow); overflow: hidden; } .data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .data-table thead th { text-align: left; padding: 0.75rem 1.125rem; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.0312rem; text-transform: uppercase; color: var(--faint); } .data-table tbody td { padding: 0.75rem 1.125rem; border-bottom: 1px solid var(--border); vertical-align: middle; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr { transition: background 0.12s ease; } .data-table tbody tr:hover { background: var(--surface-2); } /* ====================================================================== BADGES DE STATUT (pilule + point) ====================================================================== */ .badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.5625rem; border-radius: var(--radius-pill); font-size: 0.6875rem; font-weight: 700; white-space: nowrap; } .badge::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; flex-shrink: 0; } .badge--nodot::before { display: none; } .badge--positive { background: var(--positive-soft); color: var(--positive); } .badge--warning { background: var(--warning-soft); color: var(--warning); } .badge--danger { background: var(--danger-soft); color: var(--danger); } .badge--accent { background: var(--accent-soft); color: var(--accent); } .badge--muted { background: var(--surface-2); color: var(--faint); } /* ====================================================================== SEGMENTED CONTROL (pilule surélevée) ====================================================================== */ .segmented { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 0.6875rem; background: var(--surface-2); border: 1px solid var(--border); } .segmented__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4375rem; padding: 0.4375rem 0.8125rem; border: none; border-radius: 0.5rem; background: transparent; color: var(--muted); font-size: 0.7812rem; font-weight: 600; cursor: pointer; transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease; } .segmented__btn svg { width: 1.0625rem; height: 1.0625rem; } .segmented__btn.is-active, .segmented__btn--active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); } /* ====================================================================== TOGGLE SWITCH ====================================================================== */ .switch { position: relative; width: 2.875rem; height: 1.625rem; flex-shrink: 0; border: none; border-radius: var(--radius-pill); background: var(--border-strong); cursor: pointer; transition: background 0.2s ease; padding: 0; } .switch__knob { position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.3); transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .switch.is-on, .switch[aria-checked="true"] { background: var(--positive); } .switch.is-on .switch__knob, .switch[aria-checked="true"] .switch__knob { left: 1.4375rem; } /* ====================================================================== CHAMPS DE FORMULAIRE ====================================================================== */ .field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.125rem; } .field__label { font-size: 0.7812rem; font-weight: 600; color: var(--text); } .input { width: 100%; padding: 0.6875rem 0.875rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 0.875rem; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .input::placeholder { color: var(--faint); } .input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 0.1875rem var(--ring); } /* Dropzone (upload) */ .dropzone { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; padding: 2.125rem; border-radius: 0.75rem; border: 0.0938rem dashed var(--border-strong); background: var(--surface-2); text-align: center; transition: border-color 0.15s ease; } .dropzone:hover { border-color: var(--accent); } .dropzone__icon { display: flex; align-items: center; justify-content: center; width: 2.875rem; height: 2.875rem; border-radius: 0.75rem; background: var(--accent-soft); color: var(--accent); } /* ====================================================================== FLASHES ====================================================================== */ .flash { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.875rem; border: 1px solid transparent; } .flash--success { background: var(--positive-soft); color: var(--positive); border-color: color-mix(in srgb, var(--positive) 25%, transparent); } .flash--error, .flash--danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); } .flash--warning { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 25%, transparent); } /* ====================================================================== OVERLAY DRAWER (mobile) — la sidebar elle-même est dans sidebar.css ====================================================================== */ .drawer-overlay { display: none; position: fixed; inset: 0; z-index: 40; background: rgba(8, 8, 12, 0.5); backdrop-filter: blur(0.125rem); -webkit-backdrop-filter: blur(0.125rem); } /* Visible uniquement quand la sidebar (drawer) est ouverte. Placé comme frère APRÈS la sidebar dans le DOM pour que le combinateur ~ matche. */ .sidebar.active ~ .drawer-overlay { display: block; } /* ---------- Responsive : passage en drawer ---------- */ @media (max-width: 880px) { .topbar__search { display: none; } }