/* * REI — Feuille de style principale * Portail du Judo Taïso Cuvry — https://rei.judo-taiso-cuvry.fr * * Organisation : * 1. Jetons de design (couleurs, espacements, typographie) * 2. Réinitialisation et bases * 3. Structure applicative (barre latérale, entête, contenu, navigation mobile) * 4. Composants (cartes, boutons, formulaires, tableaux, pastilles…) * 5. Écrans spécifiques (connexion, trombinoscope, planning, discussions) * 6. Utilitaires et impression * * Les couleurs principales sont injectées depuis les paramètres * d'administration via des variables CSS posées sur (voir base.html). * * Auteur : Guillaume EVAIN (EV1) */ /* ========================================================================== 1. Jetons de design ========================================================================== */ :root { /* Couleurs du club (valeurs de repli, surchargées en ligne par le serveur) */ --brand: #f85a16; --brand-2: #0eb290; --ink: #263036; /* Déclinaisons calculées */ --brand-soft: color-mix(in srgb, var(--brand) 12%, white); --brand-softer: color-mix(in srgb, var(--brand) 6%, white); --brand-dark: color-mix(in srgb, var(--brand) 82%, black); --brand-2-soft: color-mix(in srgb, var(--brand-2) 14%, white); /* Surfaces */ --bg: #f6f4f1; --surface: #ffffff; --surface-2: #fbfaf8; --sidebar: var(--ink); --sidebar-ink: #e8edf0; /* Texte */ --text: #1d2529; --text-muted: #5f6f78; --text-faint: #8b9aa3; /* Traits */ --border: #e3e0da; --border-strong: #cfcac1; /* Sémantique */ --ok: #17935f; --ok-soft: #e6f5ee; --warn: #c87500; --warn-soft: #fdf2e0; --danger: #cf3838; --danger-soft: #fdeceb; --info: #2a6fb5; --info-soft: #eaf2fb; /* Rayons et ombres */ --r-sm: 8px; --r: 14px; --r-lg: 20px; --r-full: 999px; --shadow-xs: 0 1px 2px rgba(38, 48, 54, .06); --shadow: 0 2px 6px rgba(38, 48, 54, .07), 0 12px 28px -18px rgba(38, 48, 54, .35); --shadow-lg: 0 8px 20px rgba(38, 48, 54, .1), 0 32px 60px -28px rgba(38, 48, 54, .45); /* Rythme */ --gap: 18px; --pad: 22px; --sidebar-w: 258px; --topbar-h: 62px; /* Typographie */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace; } /* Thème sombre : suit la préférence système, forçable via data-theme */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #14181b; --surface: #1c2226; --surface-2: #222a2f; --sidebar: #10161a; --text: #e7edf0; --text-muted: #9fb0ba; --text-faint: #75868f; --border: #2c353b; --border-strong: #3b464d; --brand-soft: color-mix(in srgb, var(--brand) 22%, #1c2226); --brand-softer: color-mix(in srgb, var(--brand) 12%, #1c2226); --brand-2-soft: color-mix(in srgb, var(--brand-2) 20%, #1c2226); --ok-soft: color-mix(in srgb, var(--ok) 20%, #1c2226); --warn-soft: color-mix(in srgb, var(--warn) 20%, #1c2226); --danger-soft: color-mix(in srgb, var(--danger) 20%, #1c2226); --info-soft: color-mix(in srgb, var(--info) 20%, #1c2226); --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 2px 8px rgba(0, 0, 0, .35); --shadow-lg: 0 20px 50px rgba(0, 0, 0, .5); } } /* ========================================================================== 2. Réinitialisation et bases ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; letter-spacing: -.018em; font-weight: 700; } h1 { font-size: 1.6rem; } h2 { font-size: 1.22rem; } h3 { font-size: 1.02rem; } h4 { font-size: .92rem; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: var(--brand-dark); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } hr { border: 0; border-top: 1px solid var(--border); margin: var(--gap) 0; } code, kbd { font-family: var(--font-mono); font-size: .85em; } :focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; border-radius: 4px; } ::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); } /* ========================================================================== 3. Structure applicative ========================================================================== */ .app-shell { display: flex; min-height: 100vh; } /* * La barre latérale est « sticky » sur 100vh : sur une page longue, la colonne * de gauche resterait blanche sous elle (visible en capture pleine page ou à * l'impression). On peint donc le fond de la colonne au niveau de la coquille. */ @media (min-width: 901px) { .app-shell { background: linear-gradient( to right, var(--sidebar) 0 var(--sidebar-w), var(--bg) var(--sidebar-w) ); } } /* --- Barre latérale ------------------------------------------------------ */ .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--sidebar); color: var(--sidebar-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; } .sidebar__brand { display: flex; align-items: center; gap: 11px; padding: 18px 20px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .09); } .sidebar__brand:hover { text-decoration: none; } .sidebar__logo { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(140deg, color-mix(in srgb, var(--brand) 88%, white), color-mix(in srgb, var(--brand) 72%, black)); display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #fff; letter-spacing: -.03em; box-shadow: 0 4px 14px -4px var(--brand); flex: 0 0 auto; } .sidebar__title { font-weight: 700; font-size: 15px; line-height: 1.15; } .sidebar__subtitle { font-size: 11px; color: rgba(255, 255, 255, .55); letter-spacing: .04em; text-transform: uppercase; } .sidebar__nav { padding: 12px 12px 26px; flex: 1; } .nav-group { margin-bottom: 20px; } .nav-group__title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: rgba(255, 255, 255, .4); padding: 0 10px 7px; font-weight: 600; } .nav-link { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; color: rgba(255, 255, 255, .76); font-size: 14px; font-weight: 500; transition: background .14s, color .14s; } .nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; } .nav-link.is-active { background: var(--brand); color: #fff; box-shadow: 0 6px 16px -8px var(--brand); } .nav-link__icon { width: 19px; text-align: center; font-size: 15px; flex: 0 0 auto; } .nav-link__badge { margin-left: auto; background: rgba(255, 255, 255, .16); border-radius: var(--r-full); padding: 1px 7px; font-size: 11px; font-weight: 700; } .nav-link.is-active .nav-link__badge { background: rgba(0, 0, 0, .22); } .sidebar__footer { padding: 14px 18px; border-top: 1px solid rgba(255, 255, 255, .09); font-size: 11.5px; color: rgba(255, 255, 255, .42); } .sidebar__footer a { color: rgba(255, 255, 255, .62); } /* --- Colonne principale --------------------------------------------------- */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: var(--topbar-h); display: flex; align-items: center; gap: 14px; padding: 0 clamp(14px, 3vw, 30px); background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; } .topbar__title { font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; } .topbar__crumb { font-size: 12px; color: var(--text-faint); } .topbar__spacer { flex: 1; } .icon-btn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); display: grid; place-items: center; cursor: pointer; font-size: 16px; position: relative; transition: background .14s, color .14s, border-color .14s; } .icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); text-decoration: none; } .icon-btn__dot { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full); background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--surface); } .content { padding: clamp(16px, 3vw, 30px); max-width: 1180px; width: 100%; margin: 0 auto; flex: 1; } .content--wide { max-width: 1500px; } .page-head { margin-bottom: var(--gap); } .page-head__row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .page-head h1 { margin-bottom: 2px; } .page-head__lead { color: var(--text-muted); font-size: 14px; margin: 0; } .page-head__actions { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; } /* --- Navigation mobile ---------------------------------------------------- */ .mobile-nav { display: none; } @media (max-width: 900px) { .sidebar { display: none; } .content { padding-bottom: 86px; } .mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px) saturate(1.7); border-top: 1px solid var(--border); padding: 7px 6px calc(7px + env(safe-area-inset-bottom)); z-index: 60; } .mobile-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px; font-size: 10.5px; font-weight: 600; color: var(--text-faint); border-radius: 10px; } .mobile-nav a.is-active { color: var(--brand); background: var(--brand-softer); } .mobile-nav a:hover { text-decoration: none; } .mobile-nav span:first-child { font-size: 18px; line-height: 1; } } /* ========================================================================== 4. Composants ========================================================================== */ /* --- Cartes --------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-xs); } .card__head { padding: 15px var(--pad); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 11px; flex-wrap: wrap; } .card__head h2, .card__head h3 { margin: 0; } .card__head .card__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } .card__body { padding: var(--pad); } .card__body--flush { padding: 0; } .card__foot { padding: 13px var(--pad); border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r) var(--r); display: flex; gap: 9px; align-items: center; flex-wrap: wrap; } .card--accent { border-left: 3px solid var(--brand); } .grid { display: grid; gap: var(--gap); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); } .grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(275px, 1fr); align-items: start; } @media (max-width: 900px) { .grid--sidebar { grid-template-columns: 1fr; } } .stack { display: flex; flex-direction: column; gap: var(--gap); } .stack--sm { gap: 10px; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .row--between { justify-content: space-between; } .row--end { justify-content: flex-end; } /* --- Boutons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: 10px; border: 1px solid transparent; background: var(--brand); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: filter .14s, background .14s, border-color .14s, transform .06s; white-space: nowrap; text-decoration: none; } .btn:hover { filter: brightness(1.06); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled, .btn.is-disabled { opacity: .5; cursor: not-allowed; filter: none; } .btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border); } .btn--ghost:hover { background: var(--surface-2); border-color: var(--border-strong); filter: none; } .btn--soft { background: var(--brand-soft); color: var(--brand-dark); } .btn--soft:hover { background: color-mix(in srgb, var(--brand) 20%, var(--surface)); filter: none; } .btn--dark { background: var(--ink); } .btn--ok { background: var(--ok); } .btn--danger { background: var(--danger); } .btn--sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; } .btn--lg { padding: 12px 22px; font-size: 15px; border-radius: 12px; } .btn--block { width: 100%; } .btn--link { background: none; color: var(--brand-dark); padding: 4px 2px; } .btn--link:hover { text-decoration: underline; filter: none; } /* --- Pastilles et étiquettes ---------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2.5px 9px; border-radius: var(--r-full); font-size: 11.5px; font-weight: 650; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); white-space: nowrap; } .badge--success { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .badge--warning { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .badge--danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .badge--info { background: var(--info-soft); color: var(--info); border-color: transparent; } .badge--brand { background: var(--brand-soft); color: var(--brand-dark); border-color: transparent; } .badge--neutral { background: var(--surface-2); color: var(--text-faint); } .badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; font-weight: 550; color: var(--text-muted); } .chip--active { background: var(--brand); color: #fff; border-color: transparent; } .chip a { color: inherit; } /* --- Alertes -------------------------------------------------------------- */ .alert { display: flex; gap: 11px; align-items: flex-start; padding: 13px 16px; border-radius: var(--r); font-size: 14px; border: 1px solid transparent; line-height: 1.45; } .alert__icon { font-size: 17px; line-height: 1.35; flex: 0 0 auto; } .alert__body { flex: 1; min-width: 0; } .alert__title { font-weight: 700; margin-bottom: 1px; } .alert a { color: inherit; font-weight: 650; text-decoration: underline; } .alert--success { background: var(--ok-soft); color: var(--ok); } .alert--warning { background: var(--warn-soft); color: var(--warn); } .alert--error, .alert--danger { background: var(--danger-soft); color: var(--danger); } .alert--info { background: var(--info-soft); color: var(--info); } .alert--urgent { background: var(--danger); color: #fff; } .flash-stack { position: fixed; top: calc(var(--topbar-h) + 12px); right: 18px; z-index: 90; display: flex; flex-direction: column; gap: 9px; max-width: min(420px, calc(100vw - 36px)); } .flash-stack .alert { box-shadow: var(--shadow-lg); background-color: var(--surface); } .flash-stack .alert--success { background: var(--ok); color: #fff; } .flash-stack .alert--error { background: var(--danger); color: #fff; } .flash-stack .alert--warning { background: var(--warn); color: #fff; } .flash-stack .alert--info { background: var(--info); color: #fff; } /* --- Formulaires ---------------------------------------------------------- */ .form { display: flex; flex-direction: column; gap: 15px; } .form-row { display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .field > label, .field__label { font-size: 12.5px; font-weight: 650; color: var(--text-muted); letter-spacing: .008em; } .field__hint { font-size: 12px; color: var(--text-faint); } .field__error { font-size: 12px; color: var(--danger); font-weight: 600; } .field--required > label::after { content: " *"; color: var(--brand); } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], input[type="url"], input[type="search"], select, textarea { width: 100%; padding: 9.5px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; transition: border-color .14s, box-shadow .14s; } input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border-strong)); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand) 16%, transparent); } input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--text-faint); cursor: not-allowed; } textarea { resize: vertical; min-height: 92px; line-height: 1.5; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235f6f78' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } input[type="color"] { padding: 3px; height: 40px; cursor: pointer; } input[type="file"] { font-size: 13px; padding: 8px; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface-2); width: 100%; } .check { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); cursor: pointer; transition: border-color .14s, background .14s; } .check:hover { border-color: var(--border-strong); background: var(--surface-2); } .check input { margin-top: 2px; accent-color: var(--brand); width: 17px; height: 17px; flex: 0 0 auto; cursor: pointer; } .check__label { font-weight: 600; font-size: 14px; } .check__hint { font-size: 12.5px; color: var(--text-faint); } .check:has(input:checked) { border-color: var(--brand); background: var(--brand-softer); } .switch { display: flex; align-items: center; gap: 11px; cursor: pointer; } .switch input { appearance: none; width: 42px; height: 24px; border-radius: var(--r-full); background: var(--border-strong); position: relative; cursor: pointer; transition: background .18s; flex: 0 0 auto; margin: 0; } .switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .switch input:checked { background: var(--brand); } .switch input:checked::after { transform: translateX(18px); } fieldset { border: 0; margin: 0; padding: 0; } legend { font-weight: 700; font-size: 14px; padding: 0; margin-bottom: 9px; } /* --- Tableaux ------------------------------------------------------------- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .055em; color: var(--text-faint); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; } .table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover { background: var(--surface-2); } .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; } .table .cell-actions { text-align: right; white-space: nowrap; } /* --- Avatars et trombinoscope --------------------------------------------- */ .avatar { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; background: var(--brand-soft); color: var(--brand-dark); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: 0 0 auto; border: 1px solid var(--border); overflow: hidden; letter-spacing: -.02em; } .avatar--sm { width: 30px; height: 30px; border-radius: 9px; font-size: 11.5px; } .avatar--lg { width: 66px; height: 66px; border-radius: 18px; font-size: 22px; } .avatar--xl { width: 116px; height: 116px; border-radius: 24px; font-size: 36px; } .avatar--round { border-radius: 50%; } .identity { display: flex; align-items: center; gap: 11px; min-width: 0; } .identity__name { font-weight: 650; line-height: 1.25; } .identity__meta { font-size: 12.5px; color: var(--text-faint); } /* --- Ceintures ------------------------------------------------------------ */ .belt { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .belt__swatch { width: 30px; height: 11px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .22); flex: 0 0 auto; } /* --- Statistiques --------------------------------------------------------- */ .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow-xs); } .stat__label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 650; } .stat__value { font-size: 27px; font-weight: 750; letter-spacing: -.03em; line-height: 1.15; margin-top: 3px; font-variant-numeric: tabular-nums; } .stat__hint { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; } .stat--brand { background: linear-gradient(145deg, var(--brand), var(--brand-dark)); border: 0; color: #fff; } .stat--brand .stat__label, .stat--brand .stat__hint { color: rgba(255, 255, 255, .78); } .progress { height: 7px; background: var(--border); border-radius: var(--r-full); overflow: hidden; } .progress__bar { height: 100%; background: var(--brand); border-radius: var(--r-full); transition: width .4s ease; } .progress__bar--ok { background: var(--ok); } .progress__bar--warn { background: var(--warn); } /* --- Listes --------------------------------------------------------------- */ .list { display: flex; flex-direction: column; } .list__item { display: flex; align-items: center; gap: 12px; padding: 13px var(--pad); border-bottom: 1px solid var(--border); color: inherit; } .list__item:last-child { border-bottom: 0; } a.list__item:hover { background: var(--surface-2); text-decoration: none; } .list__main { flex: 1; min-width: 0; } .list__title { font-weight: 600; } .list__meta { font-size: 12.5px; color: var(--text-faint); } .list__aside { margin-left: auto; text-align: right; flex: 0 0 auto; } .empty { text-align: center; padding: 40px 20px; color: var(--text-faint); } .empty__icon { font-size: 36px; opacity: .5; margin-bottom: 8px; } .empty__title { font-weight: 650; color: var(--text-muted); margin-bottom: 3px; } .empty p { font-size: 13.5px; margin: 0 auto; max-width: 44ch; } /* --- Onglets -------------------------------------------------------------- */ .tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--border); overflow-x: auto; margin-bottom: var(--gap); } .tabs a { padding: 9px 15px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; } .tabs a:hover { color: var(--text); text-decoration: none; } .tabs a.is-active { color: var(--brand); border-bottom-color: var(--brand); } /* --- Fenêtres modales ------------------------------------------------------ */ dialog.modal { border: 0; border-radius: var(--r-lg); padding: 0; max-width: min(560px, calc(100vw - 32px)); width: 100%; box-shadow: var(--shadow-lg); background: var(--surface); color: var(--text); } dialog.modal::backdrop { background: rgba(22, 28, 32, .55); backdrop-filter: blur(3px); } .modal__head { padding: 17px var(--pad) 0; } .modal__body { padding: var(--pad); } .modal__foot { padding: 13px var(--pad); border-top: 1px solid var(--border); display: flex; gap: 9px; justify-content: flex-end; background: var(--surface-2); } /* ========================================================================== 5. Écrans spécifiques ========================================================================== */ /* --- Pages publiques (connexion, inscription) ----------------------------- */ .auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; background: var(--bg); } @media (max-width: 940px) { .auth { grid-template-columns: 1fr; } .auth__aside { display: none; } } .auth__aside { background: linear-gradient(155deg, var(--ink) 0%, #14191d 62%, color-mix(in srgb, var(--brand) 30%, #14191d) 100%); color: #fff; padding: clamp(30px, 5vw, 58px); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .auth__aside::after { content: ""; position: absolute; right: -130px; bottom: -160px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 42%, transparent) 0%, transparent 68%); } .auth__kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); font-weight: 700; } .auth__aside h2 { font-size: clamp(27px, 3.4vw, 40px); line-height: 1.09; margin: 12px 0 14px; letter-spacing: -.032em; } .auth__aside p { color: rgba(255, 255, 255, .72); max-width: 42ch; font-size: 15px; } .auth__signature { font-size: 12px; color: rgba(255, 255, 255, .4); position: relative; } .auth__signature a { color: rgba(255, 255, 255, .62); } .auth__panel { display: flex; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 50px) 20px; } .auth__box { width: 100%; max-width: 396px; } .auth__logo { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; } .auth__logo .sidebar__logo { width: 44px; height: 44px; border-radius: 13px; font-size: 17px; } .auth__box h1 { font-size: 25px; margin-bottom: 5px; } .auth__box .lead { color: var(--text-muted); font-size: 14.5px; margin-bottom: 22px; } .auth__foot { margin-top: 20px; font-size: 13px; color: var(--text-faint); text-align: center; } /* --- Trombinoscope --------------------------------------------------------- */ .roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 14px; } .roster__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 11px; text-align: center; box-shadow: var(--shadow-xs); color: inherit; transition: transform .12s, box-shadow .12s, border-color .12s; } a.roster__card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand); text-decoration: none; } .roster__card .avatar { margin: 0 auto 9px; } .roster__name { font-weight: 650; font-size: 13.5px; line-height: 1.25; } .roster__meta { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; } /* --- Appel des présences --------------------------------------------------- */ .callroll { display: flex; flex-direction: column; gap: 9px; } .callroll__row { display: flex; align-items: center; gap: 13px; padding: 10px 13px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); transition: border-color .14s, background .14s; } .callroll__row[data-status="present"] { border-color: var(--ok); background: var(--ok-soft); } .callroll__row[data-status="absent"] { border-color: var(--danger); background: var(--danger-soft); } .callroll__row[data-status="excused"] { border-color: var(--warn); background: var(--warn-soft); } .callroll__choices { margin-left: auto; display: flex; gap: 5px; } .callroll__choice { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); border-radius: 9px; padding: 7px 13px; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: all .12s; } .callroll__choice:hover { border-color: var(--text-faint); } .callroll__choice.is-on[data-value="present"] { background: var(--ok); border-color: var(--ok); color: #fff; } .callroll__choice.is-on[data-value="absent"] { background: var(--danger); border-color: var(--danger); color: #fff; } .callroll__choice.is-on[data-value="excused"] { background: var(--warn); border-color: var(--warn); color: #fff; } /* --- Planning -------------------------------------------------------------- */ .planning-day { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--border); } .planning-day:last-child { border-bottom: 0; } .planning-day__date { font-size: 13px; color: var(--text-muted); } .planning-day__date strong { display: block; font-size: 21px; color: var(--text); letter-spacing: -.02em; line-height: 1.1; } .planning-day--today .planning-day__date strong { color: var(--brand); } .planning-day__items { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .session-card { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--r-sm); background: var(--surface); color: inherit; } a.session-card:hover { background: var(--surface-2); text-decoration: none; } .session-card--cancelled { opacity: .55; border-left-color: var(--danger); } .session-card--cancelled .session-card__name { text-decoration: line-through; } .session-card__time { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; flex: 0 0 auto; } .session-card__name { font-weight: 600; } .session-card__meta { font-size: 12.5px; color: var(--text-faint); } /* --- Discussions ----------------------------------------------------------- */ .messages { display: flex; flex-direction: column; gap: 3px; padding: 6px 0; } .message { display: flex; gap: 11px; padding: 8px var(--pad); } .message:hover { background: var(--surface-2); } .message__body { min-width: 0; flex: 1; } .message__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .message__author { font-weight: 650; font-size: 13.5px; } .message__time { font-size: 11.5px; color: var(--text-faint); } .message__text { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; } .message--staff .message__author { color: var(--brand-dark); } .composer { display: flex; gap: 10px; align-items: flex-end; padding: 13px var(--pad); border-top: 1px solid var(--border); background: var(--surface-2); } .composer textarea { min-height: 44px; max-height: 180px; border-radius: 11px; } /* --- Explorateur de documents ---------------------------------------------- */ .breadcrumb { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-faint); flex-wrap: wrap; } .breadcrumb a { color: var(--text-muted); font-weight: 550; } .breadcrumb span { opacity: .6; } .file-row { display: flex; align-items: center; gap: 12px; padding: 11px var(--pad); border-bottom: 1px solid var(--border); } .file-row:last-child { border-bottom: 0; } .file-row:hover { background: var(--surface-2); } .file-row__icon { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-size: 15px; flex: 0 0 auto; } /* --- Texte long (charte, RGPD) --------------------------------------------- */ .prose { max-width: 76ch; font-size: 14.5px; line-height: 1.68; } .prose h2 { margin-top: 1.7em; font-size: 1.13rem; } .prose h2:first-child { margin-top: 0; } .prose h3 { margin-top: 1.4em; font-size: 1rem; } .prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 1em; } .prose li { margin-bottom: .38em; } .prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 13.5px; } .prose th, .prose td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; } .prose th { background: var(--surface-2); font-weight: 650; } .prose blockquote { margin: 1em 0; padding: .6em 1em; border-left: 3px solid var(--brand); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .prose code { background: var(--surface-2); padding: .12em .38em; border-radius: 4px; } /* --- Assistant d'inscription ------------------------------------------------ */ .steps { display: flex; gap: 5px; margin-bottom: 26px; flex-wrap: wrap; } .step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-faint); font-weight: 600; } .step__num { width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; } .step.is-current { color: var(--text); } .step.is-current .step__num { background: var(--brand); color: #fff; border-color: transparent; } .step.is-done .step__num { background: var(--ok); color: #fff; border-color: transparent; } .step::after { content: ""; width: 22px; height: 1px; background: var(--border); margin: 0 4px; } .step:last-child::after { display: none; } .choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 13px; } .choice { border: 1.5px solid var(--border); border-radius: var(--r); padding: 18px; background: var(--surface); cursor: pointer; text-align: left; transition: border-color .14s, background .14s, transform .1s; display: block; } .choice:hover { border-color: var(--brand); transform: translateY(-1px); } .choice input { position: absolute; opacity: 0; pointer-events: none; } .choice:has(input:checked) { border-color: var(--brand); background: var(--brand-softer); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 13%, transparent); } .choice__icon { font-size: 25px; margin-bottom: 7px; } .choice__title { font-weight: 700; font-size: 15px; } .choice__text { font-size: 13px; color: var(--text-muted); margin-top: 3px; } /* --- QR Code ---------------------------------------------------------------- */ .qr-panel { text-align: center; } .qr-panel img { margin: 0 auto; width: 236px; height: 236px; border-radius: var(--r); border: 1px solid var(--border); background: #fff; padding: 9px; } /* ========================================================================== 6. Utilitaires ========================================================================== */ .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .small { font-size: 12.5px; } .tiny { font-size: 11.5px; } .strong { font-weight: 650; } .center { text-align: center; } .right { text-align: right; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .hidden { display: none !important; } .full { width: 100%; } .danger-text { color: var(--danger); } .ok-text { color: var(--ok); } @media print { .sidebar, .topbar, .mobile-nav, .page-head__actions, .btn, .flash-stack { display: none !important; } body { background: #fff; } .card { box-shadow: none; border-color: #ccc; break-inside: avoid; } .content { max-width: none; padding: 0; } }