/* ========================================================================= SGS Salott-iT — Design system « macOS » (Lot 13) Thème clair/sombre via [data-bs-theme] + variables CSS. ========================================================================= */ :root { --sit-marine: #1B3A6B; --sit-bleu: #2196F3; --sit-orange: #EF6B45; --sit-radius: 14px; --sit-radius-sm: 9px; --sit-shadow: 0 8px 30px rgba(27, 58, 107, .10), 0 2px 8px rgba(0, 0, 0, .04); --sit-shadow-sm: 0 2px 10px rgba(0, 0, 0, .06); /* Surfaces claires */ --sit-bg: #eaeef4; --sit-surface: #ffffff; --sit-surface-2: #f6f8fb; --sit-border: #e2e7ee; --sit-text: #1f2733; --sit-muted: #6b7686; --sit-topbar: rgba(20, 33, 61, .82); --sit-header: rgba(255, 255, 255, .72); --sit-sidebar: rgba(255, 255, 255, .66); } [data-bs-theme="dark"] { --sit-bg: #0f1420; --sit-surface: #1a2130; --sit-surface-2: #141a26; --sit-border: #2a3242; --sit-text: #e7ecf5; --sit-muted: #9aa6b8; --sit-shadow: 0 8px 30px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3); --sit-topbar: rgba(6, 10, 20, .82); --sit-header: rgba(26, 33, 48, .72); --sit-sidebar: rgba(20, 26, 38, .6); } /* ========================================================================= Palettes de couleurs (axe indépendant du clair/sombre). Chaque palette remappe le trio de tokens de marque (--sit-marine = primaire, --sit-bleu = secondaire/dégradés/boutons, --sit-orange = accent) + teinte la topbar. Placées APRÈS :root et [data-bs-theme=dark] pour les surcharger. Sélection via [data-sit-palette] sur (JS + anti-flash ). ========================================================================= */ /* Vert / Orange */ [data-sit-palette="green"] { --sit-marine: #155e3c; --sit-bleu: #1f9d57; --sit-orange: #f97316; --sit-topbar: rgba(9, 46, 30, .85); } [data-sit-palette="green"][data-bs-theme="dark"] { --sit-marine: #3ddc8f; --sit-bleu: #22b466; --sit-orange: #ff8a3d; --sit-topbar: rgba(6, 28, 18, .85); } /* Marron */ [data-sit-palette="maroon"] { --sit-marine: #5c2f1b; --sit-bleu: #a05a2c; --sit-orange: #e0a13c; --sit-topbar: rgba(48, 24, 14, .86); } [data-sit-palette="maroon"][data-bs-theme="dark"] { --sit-marine: #d99a6c; --sit-bleu: #c07b45; --sit-orange: #f0b95c; --sit-topbar: rgba(34, 18, 10, .86); } /* Bleu (azur / indigo) */ [data-sit-palette="blue"] { --sit-marine: #1e3a8a; --sit-bleu: #3b82f6; --sit-orange: #06b6d4; --sit-topbar: rgba(15, 23, 60, .85); } [data-sit-palette="blue"][data-bs-theme="dark"] { --sit-marine: #60a5fa; --sit-bleu: #3b82f6; --sit-orange: #22d3ee; --sit-topbar: rgba(8, 12, 32, .85); } /* Rouge */ [data-sit-palette="red"] { --sit-marine: #8b1a1a; --sit-bleu: #dc2626; --sit-orange: #f59e0b; --sit-topbar: rgba(58, 12, 12, .86); } [data-sit-palette="red"][data-bs-theme="dark"] { --sit-marine: #f87171; --sit-bleu: #ef4444; --sit-orange: #fbbf24; --sit-topbar: rgba(40, 8, 8, .86); } * { -webkit-font-smoothing: antialiased; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--sit-text); background-color: var(--sit-bg); /* Motif façon Apple : fine grille (quadrillage léger), teintée par la palette active (lignes 1px, maille 30px, faible opacité). */ background-image: linear-gradient(color-mix(in srgb, var(--sit-marine) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--sit-marine) 7%, transparent) 1px, transparent 1px); background-size: 30px 30px; background-attachment: fixed; min-height: 100vh; } /* Grille un peu plus présente sur fond sombre pour rester perceptible. */ [data-bs-theme="dark"] body { background-image: linear-gradient(color-mix(in srgb, var(--sit-marine) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--sit-marine) 10%, transparent) 1px, transparent 1px); background-size: 30px 30px; } /* ---- Barres translucides (vibrancy macOS) ------------------------------- */ .topbar-sit { background: var(--sit-topbar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); color: #fff; padding: .35rem 1rem; position: sticky; top: 0; z-index: 1030; font-size: .9rem; } .topbar-sit .topbar-brand { font-weight: 600; letter-spacing: .2px; display: flex; align-items: center; gap: .5rem; } .topbar-sit img { height: 22px; } .topbar-sit .btn, .topbar-sit .badge { border-radius: 999px; } .topbar-sit .btn-ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); padding: .12rem .55rem; line-height: 1.4; } .topbar-sit .btn-ghost:hover { background: rgba(255, 255, 255, .18); } .topbar-sit .sit-version { font-variant-numeric: tabular-nums; opacity: .85; font-size: .8rem; } /* ---- Header (barre établissement) --------------------------------------- */ .navbar-sit { background: var(--sit-header) !important; backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--sit-border); position: sticky; top: 0; z-index: 1020; } .navbar-sit .navbar-brand, .navbar-sit .nav-link, .navbar-sit .dropdown-toggle { color: var(--sit-text) !important; } .navbar-sit .school-logo { height: 34px; width: 34px; object-fit: cover; border-radius: 9px; box-shadow: var(--sit-shadow-sm); } .navbar-sit .school-name { font-weight: 600; color: var(--sit-marine); } [data-bs-theme="dark"] .navbar-sit .school-name { color: #7fb2f0; } /* ---- Avatar (rond photo/initiales) -------------------------------------- */ .sit-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, var(--sit-bleu), var(--sit-marine)); color: #fff; font-weight: 600; overflow: hidden; flex: 0 0 auto; width: 32px; height: 32px; font-size: .8rem; text-transform: uppercase; cursor: pointer; user-select: none; } .sit-avatar img { width: 100%; height: 100%; object-fit: cover; } .sit-avatar-sm { width: 24px; height: 24px; font-size: .68rem; } .sit-avatar-lg { width: 84px; height: 84px; font-size: 1.8rem; } /* Avatar ouvrant une mini-fiche au clic. */ .sit-avatar-clic { transition: transform .12s ease, box-shadow .12s ease; } .sit-avatar-clic:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(0, 0, 0, .2); } /* Cellule « nom + avatar » : garde le nom et le rond alignés sans saut de ligne. */ .sit-citation { display: inline-flex; align-items: center; gap: .5rem; } /* Ligne de tableau cliquable (ouvre le « voir » de la ligne). */ tr[data-row-url] { cursor: pointer; } /* Mini-fiche (contenu de #app-modal pour un utilisateur). */ .sit-fiche { text-align: center; } .sit-fiche .sit-fiche-nom { font-weight: 700; font-size: 1.1rem; } .sit-fiche dl { margin-bottom: 0; text-align: left; } .sit-fiche dt { color: var(--sit-muted); font-weight: 600; font-size: .8rem; } .sit-fiche dd { margin-bottom: .5rem; } .sit-userchip { display: inline-flex; align-items: center; gap: .5rem; color: var(--sit-text); } /* ---- Sidebar (accordéon translucide, harmonisé) ------------------------- */ .sidebar-sit { background: var(--sit-sidebar); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); min-height: calc(100vh - 100px); overflow: visible; position: sticky; top: 0; border-right: 1px solid var(--sit-border); padding-bottom: 2rem; scrollbar-width: thin; } /* Bouton de catégorie : icône + libellé à gauche, flèche à droite. Au clic il ouvre un pop-over (flyout) listant les liens de la catégorie. */ .sidebar-sit .sidebar-cat { width: 100%; text-align: left; background: transparent; border: 0; color: var(--sit-muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .6rem .85rem; margin-top: .12rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-radius: var(--sit-radius-sm); transition: color .12s ease, background .12s ease; } .sidebar-sit .sidebar-grp-titre { display: flex; align-items: center; gap: .6rem; min-width: 0; } .sidebar-sit .sidebar-grp-titre .bi { font-size: 1rem; width: 1.2rem; text-align: center; flex: none; opacity: .9; } .sidebar-sit .sidebar-cat-arrow { font-size: .7rem; opacity: .5; transition: transform .12s ease; } .sidebar-sit .sidebar-cat:hover { color: var(--sit-text); background: var(--sit-surface-2); } .sidebar-sit .sidebar-cat:hover .sidebar-cat-arrow { transform: translateX(2px); } /* Catégorie contenant la page active : repère de position. */ .sidebar-sit .sidebar-cat.est-actif { color: var(--sit-marine); background: var(--sit-surface-2); } [data-bs-theme="dark"] .sidebar-sit .sidebar-cat.est-actif { color: #9EC0EF; } .sidebar-sit .sidebar-cat[aria-expanded="true"] .sidebar-cat-arrow { transform: rotate(90deg); } /* Menu déroulant (dropdown Bootstrap) des liens d'une catégorie. */ .sidebar-cat-wrap { position: relative; } .sidebar-drop { min-width: 236px; max-height: 80vh; overflow-y: auto; border: 1px solid var(--sit-border); border-radius: var(--sit-radius); box-shadow: var(--sit-shadow); padding: .4rem; background: var(--sit-surface); z-index: 1065; } .sidebar-drop .dropdown-header { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sit-muted); padding: .3rem .55rem .5rem; border-bottom: 1px solid var(--sit-border); margin-bottom: .3rem; } .sidebar-drop .dropdown-item { display: flex; align-items: center; color: var(--sit-text); font-weight: 500; font-size: .92rem; border-radius: var(--sit-radius-sm); padding: .45rem .6rem; margin: 1px 0; white-space: normal; } .sidebar-drop .dropdown-item .bi { width: 1.2rem; text-align: center; flex: none; margin-right: .5rem; } .sidebar-drop .dropdown-item:hover, .sidebar-drop .dropdown-item:focus { background: var(--sit-surface-2); color: var(--sit-marine); } [data-bs-theme="dark"] .sidebar-drop .dropdown-item:hover, [data-bs-theme="dark"] .sidebar-drop .dropdown-item:focus { color: #fff; } .sidebar-drop .dropdown-item.active { background: linear-gradient(135deg, var(--sit-bleu), var(--sit-marine)); color: #fff; } /* Lien plat de premier niveau (Bureau). */ .sidebar-sit .nav-link { position: relative; color: var(--sit-text); font-weight: 500; font-size: .92rem; border-radius: var(--sit-radius-sm); margin: 1px 0; padding: .45rem .7rem; display: flex; align-items: center; transition: background .12s ease, color .12s ease; } .sidebar-sit .nav-link .bi { width: 1.2rem; text-align: center; flex: none; margin-right: .5rem; } .sidebar-sit .nav-link.sidebar-flat { font-weight: 600; margin: .15rem .4rem .5rem; background: var(--sit-surface-2); text-transform: none; letter-spacing: 0; color: var(--sit-text); } .sidebar-sit .nav-link:hover { background: var(--sit-surface-2); color: var(--sit-marine); } [data-bs-theme="dark"] .sidebar-sit .nav-link:hover { color: #fff; } .sidebar-sit .nav-link.active { background: linear-gradient(135deg, var(--sit-bleu), var(--sit-marine)); color: #fff; box-shadow: 0 2px 8px rgba(27, 58, 107, .18); } .sidebar-sit .nav-link.sidebar-flat.active { color: #fff; } /* Barre d'accent orange sur le lien plat actif. */ .sidebar-sit .nav-link.sidebar-flat.active::before { content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 3px; border-radius: 3px; background: var(--sit-orange); } /* ---- Cartes & surfaces --------------------------------------------------- */ .card { border: 1px solid var(--sit-border); border-radius: var(--sit-radius); box-shadow: var(--sit-shadow); background: var(--sit-surface); } .card .card-header { background: var(--sit-surface-2); border-bottom: 1px solid var(--sit-border); font-weight: 600; border-radius: var(--sit-radius) var(--sit-radius) 0 0 !important; } .modal-content { border-radius: var(--sit-radius); border: 1px solid var(--sit-border); box-shadow: 0 24px 70px rgba(0, 0, 0, .28); } .btn { border-radius: var(--sit-radius-sm); } .btn-sit-primary { background: linear-gradient(135deg, var(--sit-bleu), color-mix(in srgb, var(--sit-bleu) 62%, #000)); border: 0; color: #fff; } .btn-sit-primary:hover { filter: brightness(1.06); color: #fff; } .btn-sit-orange { background-color: var(--sit-orange); border-color: var(--sit-orange); color: #fff; } /* ---- Authentification (login) ------------------------------------------- */ .auth-card { max-width: 440px; margin: 7vh auto; border-radius: var(--sit-radius); box-shadow: 0 24px 70px rgba(27, 58, 107, .22); } .auth-logo { height: 96px; /* logo login agrandi ×2 (48 → 96) */ margin-bottom: .5rem; } .auth-card .card-header { background: linear-gradient(135deg, var(--sit-marine), color-mix(in srgb, var(--sit-marine) 68%, #000)); color: #fff; text-align: center; } /* ---- Divers -------------------------------------------------------------- */ footer.footer-sit { color: var(--sit-muted); font-size: .82rem; padding: 1rem 0; text-align: center; } .flag-btn { font-size: 1.05rem; line-height: 1; } /* Pastille d'aperçu de palette (menu de sélection des couleurs). */ .sit-swatch { display: inline-block; width: 15px; height: 15px; border-radius: 50%; margin-right: .55rem; border: 1px solid rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }