/* ========================================================================= Feuille de style — thème clair (beige) / sombre (noir pur), piloté par [data-theme] sur . Parti pris minimaliste : pas de bordure ni d'ombre décorative, pas de forme superflue. La hiérarchie se fait par l'espacement, la taille et le poids du texte — pas par des cadres. ========================================================================= */ :root { --bg: #ede6d3; --surface: #f8f4e7; --surface-2: #e2d8bc; --line: #d6caa9; --line-soft: #e0d5b5; --text: #333130; --text-soft: #7c7873; --text-faint: #a8a49d; --accent: #d17c4c; --now: #dd7562; --alert: #c34a3a; --alert-bg: #f6e2de; --radius: 8px; --gutter: 38px; --pad: 20px; } html[data-theme="dark"] { --bg: #111113; --surface: #1e1e1e; --surface-2: #262625; --line: #2d2c2a; --line-soft: #212020; --text: #e6e2dc; --text-soft: #a29d96; --text-faint: #726e68; --accent: #e69a6d; --now: #e69783; --alert: #e58a6e; --alert-bg: #3a2620; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; } button, input, select { font: inherit; color: inherit; } /* ------------------------------------------------------------------ barre */ .topbar { flex: none; padding-top: env(safe-area-inset-top); } .topbar__row--main { display: flex; align-items: center; gap: 32px; padding: 22px var(--pad) 18px; flex-wrap: wrap; } .brand { min-width: 0; } .brand__button { appearance: none; background: transparent; border: 0; padding: 2px 14px 2px 0; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 3px center, right -1px center; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; } .brand__button:hover { color: var(--text-soft); } .brand__button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .period { display: flex; align-items: center; gap: 6px; min-width: 0; } .date-picker-toggle { position: relative; } .date-picker-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .date-picker-input.is-open { opacity: 1; position: static; width: auto; height: auto; pointer-events: auto; padding: 4px 0; border: 0; border-bottom: 1px solid var(--line); background: none; outline: none; } .date-picker-input.is-open:focus { border-bottom-color: var(--accent); } .period__label { margin: 0 0 0 12px; font-size: 14px; font-weight: 500; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; } .tools { display: flex; align-items: center; gap: 22px; margin-left: auto; } /* Boutons sans cadre : seule la couleur du texte réagit. */ .icon-btn, .pill { border: 0; background: none; padding: 4px 2px; cursor: pointer; color: var(--text-soft); line-height: 1; white-space: nowrap; } .icon-btn { width: 20px; font-size: 14px; } .pill { padding: 4px 4px; } .icon-btn:hover, .pill:hover { color: var(--text); } .icon-btn:focus-visible, .pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .segmented { display: inline-flex; gap: 16px; } .segmented--wide { gap: 18px; } .segmented__btn { border: 0; background: none; padding: 2px 0; font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); cursor: pointer; white-space: nowrap; } .segmented__btn:hover { color: var(--text-soft); } .segmented__btn[aria-selected="true"], .segmented__btn.is-active { color: var(--text); font-weight: 700; } .search { width: 110px; padding: 4px 0; border: 0; border-bottom: 1px solid transparent; background: none; outline: none; } .search::placeholder { color: var(--text-faint); } .search:focus { border-bottom-color: var(--line); } /* La barre d'état ne s'affiche qu'en cas de chargement, d'erreur ou de cache périmé : en régime nominal elle disparaît. */ .status { display: none; padding: 6px var(--pad); font-size: 12px; color: var(--text-faint); gap: 8px; align-items: center; } .status.is-shown { display: flex; } .status.is-error { color: var(--now); } .status__spinner { width: 9px; height: 9px; flex: none; border: 1.5px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .status__action { margin-left: auto; border: 0; background: none; color: var(--accent); font-size: 12px; cursor: pointer; text-decoration: underline; } /* ------------------------------------------------------------------- vues */ .main { flex: 1; min-height: 0; overflow: auto; } /* La dernière rangée occupe la hauteur restante : la journée tient dans l'écran, sans défilement, quelle que soit l'amplitude horaire. */ .grid { display: grid; grid-template-columns: var(--gutter) repeat(var(--cols), minmax(0, 1fr)); height: 100%; min-height: calc(var(--hours) * 30px + 56px); padding: 0 var(--pad) 14px 0; } .dayhead { padding: 10px 6px 8px; text-align: center; background: var(--bg); } .dayhead--gutter { padding: 0; } .dayhead__name { font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } .dayhead__num { font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--text-soft); } .dayhead.is-today .dayhead__name, .dayhead.is-today .dayhead__num { color: var(--accent); font-weight: 600; } .gutter { position: relative; } .gutter__hour { position: absolute; right: 8px; transform: translateY(-50%); font-size: 10px; font-variant-numeric: tabular-nums; color: var(--text-faint); } /* Filets horaires très pâles, tracés en fond plutôt qu'en bordures. */ .daycol { position: relative; background-image: repeating-linear-gradient( to bottom, var(--line-soft) 0, var(--line-soft) 1px, transparent 1px, transparent calc(100% / var(--hours)) ); } /* Les en-têtes sont frères des colonnes, pas leurs parents : la classe doit être posée sur .dayhead pour que le sélecteur porte. */ .dayhead.is-weekend .dayhead__name, .dayhead.is-weekend .dayhead__num { color: var(--text-faint); } .allday { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 1px 6px; } .allday--gutter { padding: 0; } .allday__chip { flex: 1 1 auto; min-width: 0; border: 0; padding: 2px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 500; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; background: var(--ev-bg); color: var(--ev-fg); } .allday__chip.is-alert { font-weight: 700; } /* ---------------------------------------------------------------- séances */ .event { position: absolute; overflow: hidden; padding: 3px 6px; border: 0; border-radius: var(--radius); background: var(--ev-bg); color: var(--ev-fg); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 1px; } .event:hover { filter: brightness(0.97); } html[data-theme="dark"] .event:hover { filter: brightness(1.15); } .event.is-past { opacity: 0.45; } .event.is-now { box-shadow: inset 0 0 0 1.5px var(--now); } .event:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Absence enseignant : signal fort et constant, indépendant de la matière, pour ressortir immédiatement dans la grille. */ .event.is-alert { font-weight: 700; } .event__time { font-size: 10px; font-variant-numeric: tabular-nums; opacity: 0.75; } .event__title { font-size: 11.5px; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .event__meta { font-size: 10px; opacity: 0.75; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: auto; } .event--compact { flex-direction: row; align-items: baseline; gap: 4px; padding: 1px 6px; } .event--compact .event__title { -webkit-line-clamp: 1; } .event--compact .event__meta { display: none; } .nowline { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--now); z-index: 6; pointer-events: none; } .nowline::before { content: ""; position: absolute; left: -2px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--now); } /* ------------------------------------------------------------------ liste */ .list { max-width: 640px; margin: 0 auto; padding: 8px var(--pad) 64px; } .list__day { display: grid; grid-template-columns: 54px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line-soft); } .list__day:first-child { border-top: 0; } .list__date { position: sticky; top: 8px; align-self: start; font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.5; } .list__date em { display: block; font-style: normal; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; text-transform: none; color: var(--text); } .list__date.is-today em, .list__date.is-today { color: var(--accent); } .list__items { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* Pas de carte : une ligne, un point de couleur, rien d'autre. */ .card { display: grid; grid-template-columns: 84px 1fr; gap: 12px; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px; background: none; color: inherit; text-align: left; cursor: pointer; align-items: baseline; } .card:hover { background: var(--surface-2); } .card.is-past { opacity: 0.4; } .card.is-now .card__title { color: var(--now); } .card.is-alert .card__title, .card.is-alert .card__meta { color: var(--alert); font-weight: 700; } .card:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; } .card__time { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--text-faint); } .card__title { font-size: 13.5px; font-weight: 500; } .card__meta { font-size: 12px; color: var(--text-faint); margin-top: 1px; } .card__dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--ev-fg); margin-right: 8px; vertical-align: 2px; } /* -------------------------------------------------------------- messages */ .empty { display: grid; place-content: center; justify-items: center; gap: 6px; padding: 64px 24px; text-align: center; color: var(--text-faint); } .empty__title { font-size: 14px; font-weight: 600; color: var(--text-soft); } .empty__text { max-width: 380px; font-size: 13px; margin: 0; } .empty code { font-size: 12px; } /* --------------------------------------------------------------- dialogs */ .sheet { width: min(440px, calc(100vw - 28px)); max-height: 84vh; padding: 0; border: 0; border-radius: 12px; background: var(--surface); color: var(--text); overflow: auto; } .sheet::backdrop { background: rgba(30, 26, 20, 0.35); } .sheet__close-form { position: sticky; top: 0; height: 0; z-index: 2; } .sheet__close { position: absolute; right: 14px; top: 14px; } .sheet__body { padding: 26px; display: flex; flex-direction: column; gap: 24px; } .sheet__title { margin: 0; font-size: 15px; font-weight: 700; } .detail { padding: 26px; } .detail__type { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ev-fg); } .detail__type--alert { color: var(--alert); } .detail__title { margin: 6px 32px 2px 0; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; } .detail__when { color: var(--text-soft); font-size: 13px; text-transform: capitalize; } .detail__rows { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px; } .detail__key { color: var(--text-faint); } .detail__val { white-space: pre-wrap; } .field { display: flex; flex-direction: column; gap: 8px; } .field__label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); } .field__input { width: 100%; padding: 7px 0; border: 0; border-bottom: 1px solid var(--line); background: none; outline: none; } .field__input:focus { border-bottom-color: var(--accent); } .field__help { font-size: 11.5px; line-height: 1.5; color: var(--text-faint); } .field .pill { align-self: flex-start; color: var(--now); } /* ------------------------------------------------------------------ picker */ /* Choix de classe en trois étapes (année → groupe → sous-groupe), au centre de l'écran via