/* ============================================================ Charte graphique « Lumière allumée / lumière éteinte » ------------------------------------------------------------ Un seul fichier de tokens + composants pour les 11 pages. - Monde CLAIR (défaut) : préparation, gestion, émargement. - Monde SOMBRE (body.sombre) : le direct — la salle éteinte. L'accent « faisceau » (--beam) traverse les deux mondes ; le branding d'un atelier le surcharge via style inline sur (voir index.html) — ne jamais redéfinir --beam sur body.sombre. ============================================================ */ /* ---------- Polices auto-hébergées (boîtier 100 % hors-ligne) ---------- */ @font-face { font-family: 'Hanken Grotesk'; font-weight: 400; font-style: normal; font-display: swap; src: url('/vendor/fonts/hanken-grotesk-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+20AC; } @font-face { font-family: 'Hanken Grotesk'; font-weight: 400; font-style: normal; font-display: swap; src: url('/vendor/fonts/hanken-grotesk-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Hanken Grotesk'; font-weight: 700; font-style: normal; font-display: swap; src: url('/vendor/fonts/hanken-grotesk-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+20AC; } @font-face { font-family: 'Hanken Grotesk'; font-weight: 700; font-style: normal; font-display: swap; src: url('/vendor/fonts/hanken-grotesk-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Hanken Grotesk'; font-weight: 800; font-style: normal; font-display: swap; src: url('/vendor/fonts/hanken-grotesk-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+20AC; } @font-face { font-family: 'Hanken Grotesk'; font-weight: 800; font-style: normal; font-display: swap; src: url('/vendor/fonts/hanken-grotesk-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+20AC; } @font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex-mono-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+20AC; } @font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Tokens ---------- */ :root { /* monde clair (défaut) */ --papier: #F7F5F1; /* fond de page */ --carte: #FFFFFF; /* fond des cartes */ --champ: #FFFFFF; /* fond des champs */ --encre: #1D2430; /* texte principal */ --encre-dim: #5C6675; /* texte secondaire */ --ligne: #E4E0D8; /* bordures */ --salle: #14171C; /* graphite du monde sombre (constant) */ --beam: #E8A33D; /* faisceau — surchargé par le branding d'atelier */ --beam-txt: #8F6210; /* faisceau en usage TEXTE sur fond clair (AA) */ --beam-ink: #241A05; /* texte posé SUR un aplat faisceau */ --ok: #2E7D4F; --ok-bg: rgba(46, 125, 79, 0.10); --danger: #B3402F; --info: #2C5AA0; --info-bg: rgba(44, 90, 160, 0.10); --sans: 'Hanken Grotesk', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace; } /* monde sombre : le direct (« on éteint la lumière ») */ body.sombre { --papier: #14171C; --carte: #1F242E; --champ: #171B22; --encre: #ECEAE4; --encre-dim: #98A0AD; --ligne: #2B313C; --beam-txt: #FFC766; --ok: #7ED492; --ok-bg: rgba(126, 212, 146, 0.14); --danger: #E07A6B; --info: #8AB8FF; --info-bg: rgba(138, 184, 255, 0.14); } /* ---------- Base ---------- */ * { box-sizing: border-box; margin: 0; } body { background: var(--papier); color: var(--encre); font-family: var(--sans); font-size: 15.5px; line-height: 1.55; min-height: 100vh; } a { color: var(--beam-txt); } h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; } .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--beam-txt); } /* ---------- Barre de navigation (pages staff) ---------- */ .topbar { display: flex; align-items: center; gap: 18px; background: var(--carte); border-bottom: 1px solid var(--ligne); padding: 10px 22px; flex-wrap: wrap; position: sticky; top: 0; z-index: 50; } .topbar .brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15px; letter-spacing: -0.01em; color: var(--encre); text-decoration: none; white-space: nowrap; } .topbar .brand .dot { width: 11px; height: 11px; border-radius: 50%; background: linear-gradient(135deg, #FFC766, var(--beam)); flex: none; } .topbar nav { display: flex; gap: 4px; flex-wrap: wrap; } .topbar nav a { color: var(--encre-dim); text-decoration: none; font-size: 14px; padding: 6px 11px; border-radius: 8px; } .topbar nav a:hover { color: var(--encre); background: var(--papier); } .topbar nav a.on { color: var(--beam-txt); font-weight: 700; background: color-mix(in srgb, var(--beam) 14%, var(--carte)); } .topbar .topuser { margin-left: auto; font-size: 13.5px; color: var(--encre-dim); display: flex; align-items: center; gap: 10px; white-space: nowrap; } .topbar .topuser strong { color: var(--encre); font-weight: 700; } .topbar .topuser a { color: var(--encre-dim); } .topbar .topuser a:hover { color: var(--beam-txt); } /* ---------- Gabarit de page ---------- */ .page { width: 100%; max-width: 1060px; margin: 0 auto; padding: 30px 22px 90px; } .page.narrow { max-width: 720px; } .page.mid { max-width: 920px; } .page-head { margin-bottom: 22px; } .page-head .eyebrow { margin-bottom: 6px; } .page-head .lede { color: var(--encre-dim); font-size: 14.5px; margin-top: 6px; } .stack { display: flex; flex-direction: column; gap: 16px; } /* ---------- Cartes ---------- */ .card { background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px; padding: 22px 24px; } .card h2 { font-size: 12.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--encre-dim); margin-bottom: 15px; font-weight: 700; } /* ---------- Formulaires ---------- */ label { display: block; font-size: 13px; color: var(--encre-dim); margin-bottom: 5px; } input, select, textarea { font: inherit; width: 100%; background: var(--champ); color: var(--encre); border: 1px solid var(--ligne); border-radius: 9px; padding: 10px 12px; } textarea { resize: vertical; line-height: 1.5; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--beam); outline-offset: 1px; border-color: transparent; } input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--encre-dim) 72%, transparent); } input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--beam); } /* ---------- Boutons ---------- */ button { font: inherit; font-weight: 700; padding: 11px 20px; border-radius: 9px; border: none; cursor: pointer; background: var(--beam); color: var(--beam-ink); transition: transform 0.08s ease, opacity 0.15s ease; } button:hover { opacity: 0.92; } button:active { transform: scale(0.98); } button:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; } button:disabled { opacity: 0.4; cursor: default; } button.ghost { background: transparent; color: var(--encre); border: 1px solid var(--ligne); } button.ghost:hover { border-color: var(--beam); color: var(--beam-txt); opacity: 1; } button.danger { background: transparent; color: var(--danger); border: 1px solid var(--ligne); } button.danger:hover { border-color: var(--danger); opacity: 1; } button.small { padding: 6px 12px; font-size: 13px; font-weight: 600; } button.primary { background: var(--beam); color: var(--beam-ink); } @media (prefers-reduced-motion: reduce) { button { transition: none; } } /* ---------- Tableaux ---------- */ table { width: 100%; border-collapse: collapse; font-size: 14px; } th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--encre-dim); font-weight: 700; padding: 8px 9px; border-bottom: 1px solid var(--ligne); } td { padding: 10px 9px; border-bottom: 1px solid color-mix(in srgb, var(--ligne) 55%, transparent); vertical-align: middle; } tr:last-child td { border-bottom: none; } /* ---------- Badges d'état ---------- */ .badge { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 11px; border: 1px solid var(--ligne); color: var(--encre-dim); background: var(--carte); } .badge.actif { color: var(--ok); background: var(--ok-bg); border-color: transparent; } .badge.programme { color: var(--info); background: var(--info-bg); border-color: transparent; } .badge.cloture { opacity: 0.6; } /* ---------- Le code sous le faisceau (signature de la charte) ---------- */ .code-beam { display: inline-block; font-family: var(--mono); font-weight: 600; letter-spacing: 0.3em; padding: 0 0.1em 8px 0; background: linear-gradient(90deg, var(--beam), rgba(232, 163, 61, 0)) no-repeat left bottom / 100% 4px; } /* ---------- Filtre de recherche des listes ---------- */ .filtre-row { margin-bottom: 12px; } input.filtre { max-width: 300px; padding: 8px 12px; font-size: 14px; background: var(--papier); } input.filtre:focus-visible { background: var(--champ); } /* ---------- Messages, états ---------- */ .error { color: var(--danger); font-size: 14px; } .okmsg, .msg.ok { color: var(--ok); font-size: 14px; } .msg.err { color: var(--danger); font-size: 14px; } .field-hint, .note { font-size: 13px; color: var(--encre-dim); line-height: 1.5; } .empty { color: var(--encre-dim); font-size: 14px; } /* ---------- Transition « on éteint la lumière » ---------- */ body.fondu { transition: background-color 0.4s ease, color 0.4s ease; } @media (prefers-reduced-motion: reduce) { body.fondu { transition: none; } }