/* ========================================================================== THÈME SOLAIRE — Visuel 4 Clair chaleureux premium : fond sable, cartes ivoire, orange brûlé raffiné. Garde l'ADN orange de la marque, en version épurée 2026. Se charge APRÈS style.css et ne redéfinit que l'apparence (zéro logique). ========================================================================== */ :root { /* Couleurs dérivées du thème choisi en base (onglet Enseignants) : le JS pose --bg-start / --bg-end / --color-accent-rgb sur , tout le thème se recalcule automatiquement à partir d'elles. */ --so-accent: var(--bg-start, #FF6B35); --so-accent-end: var(--bg-end, #C0392B); --so-accent-rgb: var(--color-accent-rgb, 255, 107, 53); --so-accent-deep: color-mix(in srgb, var(--bg-end, #C0392B) 68%, #1C1917 32%); --so-accent-soft: color-mix(in srgb, var(--bg-start, #FF6B35) 10%, #FFFFFF 90%); --so-grad: linear-gradient(135deg, var(--bg-start, #FF6B35) 0%, var(--bg-end, #C0392B) 100%); /* Halo lumineux et anneau de focus : dérivés DIRECTEMENT de --bg-start (et non du triplet --color-accent-rgb), pour qu'ils suivent toujours la couleur du bouton même sur les pages où le JS n'a pas posé le triplet. */ --so-glow: color-mix(in srgb, var(--bg-start, #FF6B35) 45%, transparent); --so-ring: color-mix(in srgb, var(--bg-start, #FF6B35) 24%, transparent); --so-bg: color-mix(in srgb, var(--bg-start, #FF6B35) 5%, #FBF8F4 95%); --so-surface: #FFFFFF; --so-surface-2: color-mix(in srgb, var(--bg-start, #FF6B35) 3%, #FCFAF7 97%); --so-border: color-mix(in srgb, var(--bg-start, #FF6B35) 9%, #ECE8E1 91%); --so-border-strong: color-mix(in srgb, var(--bg-start, #FF6B35) 16%, #DFD8CD 84%); --so-text: #1C1917; --so-text-2: #57534E; --so-text-3: #A8A29E; --so-success: #15803D; --so-danger: #B91C1C; /* Variables globales de style.css recalibrées pour le fond clair (sinon elles restent blanches et deviennent illisibles) */ --color-muted: #57534E; --color-border: rgba(28, 25, 23, 0.1); --color-success: #15803D; --color-danger: #B91C1C; /* Liquid glass : surfaces translucides + flou + reflet spéculaire en bord supérieur (lumière qui accroche le verre, façon Apple). */ --so-glass: rgba(255, 255, 255, 0.52); --so-glass-strong: rgba(255, 255, 255, 0.68); --so-glass-border: rgba(255, 255, 255, 0.78); --so-blur: blur(26px) saturate(170%); --so-specular: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.30); --so-shadow-sm: 0 1px 2px rgba(87, 53, 21, 0.06); --so-shadow-md: 0 12px 32px -10px rgba(var(--so-accent-rgb), 0.18), 0 2px 6px rgba(87, 53, 21, 0.05); --so-shadow-lg: 0 18px 44px -10px rgba(var(--so-accent-rgb), 0.26), 0 2px 8px rgba(87, 53, 21, 0.06); --so-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ── Fond : canevas beige + couche fixe de halos ────────────────────────── Défilement NATUREL (le contenu peut descendre jusqu'au bord, derrière la pilule Safari). Le fond vit sur DEUX couches : le canevas html (couleur beige --so-bg, la seule chose qu'iOS peint dans la fine bande basse et pendant un flash) et html::before (fixe, les halos qui finissent en beige en bas). Les deux finissant sur le même beige, le raccord du bas est invisible. */ html { /* CANEVAS = beige de base --so-bg. C'est lui qui remplit la fine bande Safari (derrière la pilule) et un éventuel flash ; comme le fond FINIT en ce même beige en bas, le raccord est invisible. */ background-color: var(--so-bg) !important; background-image: none !important; } /* FOND FIXE plein écran (position:fixed; inset:0 dans style.css), STATIQUE pendant que le contenu défile dessous. Halos colorés sur fond beige qui FONDENT vers --so-bg en bas (1er calque = voile beige croissant) : ainsi la fine bande basse rognée par iOS (remplie par le canevas --so-bg) se raccorde sans coupure visible. */ html::before { background-color: var(--so-bg) !important; background-image: linear-gradient(to bottom, transparent 84%, var(--so-bg) 98%), radial-gradient(55% 38% at 82% -8%, rgba(var(--so-accent-rgb), 0.26), transparent 65%), radial-gradient(45% 30% at 8% -4%, rgba(252, 211, 77, 0.22), transparent 60%), radial-gradient(40% 34% at 28% 52%, color-mix(in srgb, var(--bg-end, #C0392B) 14%, transparent), transparent 70%), radial-gradient(50% 40% at 78% 88%, rgba(var(--so-accent-rgb), 0.16), transparent 62%), radial-gradient(32% 26% at 70% 18%, rgba(var(--so-accent-rgb), 0.18), transparent 70%), radial-gradient(26% 22% at 22% 36%, rgba(252, 211, 77, 0.14), transparent 70%), radial-gradient(30% 26% at 55% 80%, color-mix(in srgb, var(--bg-end, #C0392B) 12%, transparent), transparent 70%) !important; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: transparent; /* inutilisé : les halos sont sur html::before */ } /* ── Dégradé de raccord en haut (portail) ── Voile beige doux : part du fond Safari (--so-bg), le tient sur la safe-area, puis se fond vers le bas. Efface la ligne sous la barre d'état sur la page de connexion (qui n'a pas de bandeau). Suit le thème. */ .login-page::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: calc(env(safe-area-inset-top, 0px) + 150px); z-index: -1; pointer-events: none; background: linear-gradient( to bottom, var(--so-bg) 0, var(--so-bg) calc(env(safe-area-inset-top, 0px) + 36px), transparent 100% ); } .teacher-page { color: var(--so-text); text-shadow: none; background: transparent !important; /* transparent : le contenu défile par-dessus le fond fixe html::before */ } /* ── Focus clavier ── */ :focus-visible { outline: 2px solid var(--so-accent); outline-offset: 2px; } .btn:focus-visible, button:focus-visible { outline: 2px solid var(--so-accent); outline-offset: 2px; box-shadow: 0 0 0 4px var(--so-ring); } /* ── Onglets : aucune animation d'entrée. Les barres d'action (Imprimer, Exporter, le « i »…) restent EXACTEMENT à la même position d'un onglet à l'autre — on a l'impression d'un seul et même bouton qui ne bouge pas quand on change de page. ── */ /* ========================================================================= En-tête ========================================================================= */ .teacher-header { /* sticky (et non relative) : reste collé en haut au scroll, le contenu passe dessous et se floute. Garde un contexte de positionnement pour ::after. */ position: sticky; top: 0; z-index: 100; /* Vraiment translucide : c'est le flou FORT (26px) + les liserés blancs qui donnaient un effet opaque/givré, pas l'opacité du fond. On allège tout. */ background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); border-bottom: 1px solid rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); } /* Filet lumineux aux couleurs du thème sous l'en-tête */ .teacher-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(var(--so-accent-rgb), 0.55) 30%, rgba(var(--so-accent-rgb), 0.55) 70%, transparent 100%); } .teacher-header h1 { color: var(--so-text); font-weight: 700; letter-spacing: -0.02em; } .teacher-name-badge { color: var(--so-text-3); } .teacher-header .btn--ghost { background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.85); color: var(--so-text-2); box-shadow: var(--so-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: background 0.15s, border-color 0.15s, box-shadow 0.2s, transform 0.08s; } .teacher-header .btn--ghost:hover { background: var(--so-accent-soft); color: var(--so-accent-deep); } .msg-dot { background: var(--so-accent); box-shadow: 0 0 0 2px #fff, 0 0 10px var(--so-glow); } /* ========================================================================= Onglets ========================================================================= */ .tabs { background: var(--so-glass); backdrop-filter: var(--so-blur); -webkit-backdrop-filter: var(--so-blur); border: 1px solid var(--so-glass-border); box-shadow: var(--so-shadow-sm), var(--so-specular); } .tab { color: var(--so-text-2); transition: background 0.2s var(--so-ease), color 0.2s var(--so-ease), box-shadow 0.2s var(--so-ease); } .tab:hover { color: var(--so-text); background: var(--so-accent-soft); } .tab--active, .tab--active:hover { background-image: var(--so-grad); color: #fff; box-shadow: 0 4px 14px -3px var(--so-glow), 0 0 22px -4px var(--so-glow), 0 1px 0 rgba(255, 255, 255, 0.3) inset; } /* Barre flottante du bas (≤1024px) : l'onglet actif ne projette plus son halo coloré — il débordait sous la pastille en « ombre violette ». On garde le dégradé et le liseré intérieur, on retire les deux glows extérieurs. */ @media (max-width: 1024px) { .tab--active, .tab--active:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset; } } /* ========================================================================= Boutons ========================================================================= */ .btn { transition: transform 0.08s ease, opacity 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.22s var(--so-ease); } .btn--primary { position: relative; overflow: hidden; background-image: var(--so-grad); background-size: 150% 150%; background-position: 0% 50%; color: #fff; text-shadow: none; box-shadow: 0 4px 16px -4px var(--so-glow), 0 0 26px -6px var(--so-glow), 0 1px 0 rgba(255, 255, 255, 0.28) inset; transition: background-position 0.4s var(--so-ease), transform 0.08s ease, box-shadow 0.22s var(--so-ease); } /* Reflet lumineux qui balaie le bouton au survol (transform : GPU) */ .btn--primary::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 55%; pointer-events: none; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-18deg); } @media (hover: hover) and (pointer: fine) { .btn--primary:hover::before { animation: so-shine 0.65s var(--so-ease); } } @keyframes so-shine { from { transform: translateX(0) skewX(-18deg); } to { transform: translateX(320%) skewX(-18deg); } } .btn--primary:hover { opacity: 1; background-position: 90% 50%; box-shadow: 0 6px 22px -4px var(--so-glow), 0 0 34px -6px var(--so-glow), 0 1px 0 rgba(255, 255, 255, 0.28) inset; } .btn--ghost { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.85); color: var(--so-text-2); box-shadow: var(--so-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .btn--ghost:hover { background: var(--so-accent-soft); color: var(--so-accent-deep); } .btn--danger { background: var(--so-surface); border: 1px solid #FCA5A5; color: var(--so-danger); } .btn--danger:hover { background: #FEF2F2; } .settings-card--danger { border-color: #FECACA; } .settings-card--danger h2 { color: var(--so-danger); } .btn--close { background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.8); color: var(--so-text-2); } .icon-btn { background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.8); color: var(--so-text-2); transition: background 0.15s, transform 0.08s; } .icon-btn:hover { background: var(--so-accent-soft); color: var(--so-accent-deep); } .icon-btn--danger:hover { background: #FEF2F2; color: var(--so-danger); } /* ========================================================================= Champs de formulaire ========================================================================= */ input[type=text], input[type=password], input[type=email], input[type=color], select, textarea { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.85); color: var(--so-text); box-shadow: var(--so-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: border-color 0.15s, box-shadow 0.18s, background 0.18s; } input:focus, select:focus, textarea:focus { background: rgba(255, 255, 255, 0.8); } input::placeholder, textarea::placeholder { color: var(--so-text-3); } input:focus, select:focus, textarea:focus { border-color: var(--so-accent); box-shadow: 0 0 0 4px var(--so-ring); } select option { background: #fff; color: var(--so-text); } label { color: var(--so-text-2); } .form-error { color: var(--so-danger); } .form-success { color: var(--so-success); } /* ========================================================================= Barre d'actions + contrôles de tri ========================================================================= */ .sort-control { background: var(--so-glass-strong); backdrop-filter: var(--so-blur); -webkit-backdrop-filter: var(--so-blur); border: 1px solid var(--so-glass-border); box-shadow: var(--so-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: border-color 0.15s, box-shadow 0.2s var(--so-ease); } .sort-control:hover, .sort-control:focus-within { border-color: color-mix(in srgb, var(--so-accent) 40%, var(--so-border-strong) 60%); box-shadow: 0 4px 14px -6px rgba(var(--so-accent-rgb), 0.35), var(--so-shadow-sm); } .sort-control::after { color: var(--so-text-3); } .sort-control__label { color: var(--so-text-2); } .sort-control__select { color: var(--so-text); } #drp-apply { background-image: var(--so-grad); box-shadow: 0 2px 10px -2px var(--so-glow); } .drp { box-shadow: var(--so-shadow-lg); border: 1px solid var(--so-border); } .drp__nav { color: var(--so-accent); } .drp__month-title { color: var(--so-text); } .drp__day--start, .drp__day--end { background: var(--so-accent) !important; } .drp__day:not(:empty):not(.drp__day--disabled):hover { background: var(--so-accent-soft); } .drp__day--in-range { background: var(--so-accent-soft); } /* ========================================================================= Tableau de progression — carte ivoire ========================================================================= */ .table-wrapper { background: var(--so-glass); backdrop-filter: var(--so-blur); -webkit-backdrop-filter: var(--so-blur); border: 1px solid var(--so-glass-border); border-radius: 18px; box-shadow: var(--so-shadow-md), var(--so-specular); } .progress-table th { color: var(--so-text-3); font-size: 11px; letter-spacing: 0.07em; background: rgba(255, 255, 255, 0.4); border-bottom: 1px solid rgba(255, 255, 255, 0.7); } .progress-table th, .progress-table td { border-bottom: 1px solid rgba(255, 255, 255, 0.55); } .progress-table td { color: var(--so-text); } .progress-table tbody tr { transition: background 0.12s; } .progress-table tbody tr:hover { background: rgba(var(--so-accent-rgb), 0.05); } /* Colonne Élève : verre dépoli — les scores qui défilent derrière sont floutés */ .progress-table th:first-child, .progress-table td:first-child { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-right: 1px solid rgba(255, 255, 255, 0.8); color: var(--so-text); } .progress-table th:first-child { background: rgba(255, 255, 255, 0.62); } .cell-score { color: var(--so-text); } .cell-empty { color: var(--so-text-3); } [data-ex-card]:hover { background: rgba(var(--so-accent-rgb), 0.06) !important; } [data-ex-card].ex-card--active { background: var(--so-accent-soft) !important; border-color: var(--so-accent) !important; box-shadow: 0 0 14px -4px var(--so-glow); } .ex-students-row .ex-students-td { background: var(--so-surface-2); border-bottom: 1px solid var(--so-border); } .ex-students-title { color: var(--so-text); } .ex-students-avg { color: var(--so-text-2); } .ex-students-avg b { color: var(--so-text); } .exs-chip { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: var(--so-shadow-sm); } .exs-chip--weak { background: #FEF2F2; border-color: #FCA5A5; } .exs-chip__name { color: var(--so-text); } .exs-score { background: var(--so-surface-2); border: 1px solid var(--so-border); } .exs-score--none { color: var(--so-text-3); } /* ========================================================================= Cartes (colonnes, réglages, aperçu élève) ========================================================================= */ .col, .settings-card, .student-preview-section { background: var(--so-glass); backdrop-filter: var(--so-blur); -webkit-backdrop-filter: var(--so-blur); border: 1px solid var(--so-glass-border); box-shadow: var(--so-shadow-md), var(--so-specular); } .section-header h2, .settings-card h2 { color: var(--so-text); font-weight: 700; letter-spacing: -0.015em; } .settings-col-title { color: var(--so-text-3); } .settings-hint { color: var(--so-text-2); } .settings-card form textarea { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.85); color: var(--so-text); } .settings-card form textarea::placeholder { color: var(--so-text-3); } .student-preview-section__header { color: var(--so-text); border-bottom: 1px solid var(--so-border); } /* Toggles */ .toggle-row input[type="checkbox"] { background: #E7DDD0; border-color: #E7DDD0; } .toggle-row input[type="checkbox"]:checked { background-image: var(--so-grad); border-color: transparent; box-shadow: 0 0 12px -2px var(--so-glow); } .toggle-label-text { color: var(--so-text); } /* ========================================================================= Réglages façon « Réglages » d'Apple — habillage liquid glass clair (structure / positionnement : voir style.css) ========================================================================= */ .set-nav { background: var(--so-glass); backdrop-filter: var(--so-blur); -webkit-backdrop-filter: var(--so-blur); border: 1px solid var(--so-glass-border); box-shadow: var(--so-shadow-md), var(--so-specular); } .set-row { color: var(--so-text); transition: background 0.18s var(--so-ease), color 0.18s var(--so-ease); } .set-row:hover, .set-row:active { background: var(--so-accent-soft); } .set-row__title { color: inherit; } .set-row__chev { color: var(--so-text-3); } /* Pastille d'icône = couleur du thème (gradient pris en DB), glyphe blanc. */ .set-row__icon { background-image: var(--so-grad); color: #fff; box-shadow: 0 2px 6px -2px var(--so-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4); } /* Rubrique sélectionnée (ordi / iPad en paysage) : ligne pleine couleur, comme un onglet actif. */ @media (min-width: 1024px) { .set-row--active, .set-row--active:hover { background-image: var(--so-grad); color: #fff; box-shadow: 0 4px 14px -3px var(--so-glow), 0 0 22px -4px var(--so-glow), 0 1px 0 rgba(255, 255, 255, 0.3) inset; } .set-row--active .set-row__icon { background-image: none; background: rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); } .set-row--active .set-row__chev { color: rgba(255, 255, 255, 0.85); } } .set-pane__title { color: var(--so-text); letter-spacing: -0.02em; } /* Bouton retour rond « Liquid Glass » : verre blanc, chevron noir, halo couleur du thème. */ .set-back { background: var(--so-glass-strong); backdrop-filter: var(--so-blur); -webkit-backdrop-filter: var(--so-blur); border: 1px solid var(--so-glass-border); color: var(--so-text); box-shadow: var(--so-shadow-md), var(--so-specular); transition: background 0.15s var(--so-ease), color 0.15s, transform 0.08s ease; } .set-back:hover { background: var(--so-accent-soft); color: var(--so-accent-deep); } .set-back:active { transform: scale(0.93); } /* Listes (matières, élèves, groupes) */ .subject-item, .exercise-item, .student-item { background: rgba(255, 255, 255, 0.42); border: 1px solid rgba(255, 255, 255, 0.7); color: var(--so-text); transition: background 0.12s, border-color 0.12s; } .subject-item:hover, .student-item:hover { background: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.95); } .subject-item__name, .exercise-item__main { color: var(--so-text); } .exercise-item__main strong { color: var(--so-text); } .exercise-item__main small { color: var(--so-text-2); } .streak-badge { background: #FEF3C7; color: #B45309; } .degre-select { background: var(--so-surface); border-color: var(--so-border-strong); color: var(--so-text); } .degre-bulk { border-bottom: 1px solid var(--so-border); } .degre-bulk__label { color: var(--so-text-2); } /* ========================================================================= Onglet Exercices — sidebar, breadcrumb, pills ========================================================================= */ .ex-sidebar { scrollbar-color: var(--so-border-strong) transparent; } .ex-main { scrollbar-color: var(--so-border-strong) transparent; } .ex-nav-item { color: var(--so-text-2); } .ex-nav-item:hover { background: var(--so-surface-2); color: var(--so-text); } .ex-nav-item--active { background: var(--so-accent-soft) !important; color: var(--so-accent-deep) !important; } .ex-nav-item--active .ex-nav-count { color: var(--so-accent-deep); opacity: 0.6; } .ex-nav-item--subcat { color: var(--so-text-3); } .ex-nav-item--subcat:hover { color: var(--so-text); } .ex-nav-item--subcat.ex-nav-item--active { color: var(--so-accent-deep) !important; } .ex-nav-children { border-left: 2px solid var(--so-border); } .ex-nav-count { color: var(--so-text-3); } .ex-bc-item { background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.8); color: var(--so-text-2); } .ex-bc-item:hover { background: var(--so-accent-soft); } .ex-bc-item--active, .ex-bc-item--active:hover { background: var(--so-accent-soft); border-color: var(--so-accent); color: var(--so-accent-deep); } .ex-bc-sep { color: var(--so-text-3); } .ex-section-label { color: var(--so-text-3); } .ex-section-label:hover { color: var(--so-text-2); } .ex-section-label::after { background: var(--so-border); } .ex-pill { background: rgba(255, 255, 255, 0.48); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); transition: background 0.15s, border-color 0.15s, transform 0.18s var(--so-ease), box-shadow 0.22s var(--so-ease); } .ex-pill:hover { background: rgba(255, 255, 255, 0.68); border-color: color-mix(in srgb, var(--so-accent) 35%, rgba(255, 255, 255, 0.8) 65%); transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(var(--so-accent-rgb), 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .ex-pill__name { color: var(--so-text); text-decoration-color: var(--so-border-strong); } .ex-pill__name:hover { text-decoration-color: var(--so-accent); } .ex-pill__desc { color: var(--so-text-2); } .ex-pill__level--facile { background: #ECFDF5; color: #15803D; } .ex-pill__level--moyen { background: #FFFBEB; color: #B45309; } .ex-pill__level--difficile { background: #FEF2F2; color: #B91C1C; } .ex-pill__type--probleme { background: #F5F3FF; color: #6D28D9; } .ex-pill--probleme { box-shadow: inset 0 0 0 1px #DDD6FE; } .ex-pill__action-btn { background: var(--so-surface); border: 1px solid var(--so-border-strong); color: var(--so-text-2); } .ex-pill__action-btn:hover { background: var(--so-accent-soft); } .ex-pill__action-btn--danger:hover { background: #FEF2F2; color: var(--so-danger); } /* ========================================================================= Modales ========================================================================= */ .modal { background: rgba(41, 25, 12, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .modal__content { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 1px solid var(--so-glass-border); box-shadow: var(--so-shadow-lg), var(--so-specular); animation: so-pop 0.26s var(--so-ease); } @keyframes so-pop { from { opacity: 0; transform: translateY(9px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal__header { border-bottom: 1px solid var(--so-border); } .modal__header h3 { color: var(--so-text); letter-spacing: -0.015em; } .modal__header .btn--close { background: var(--so-surface-2); color: var(--so-text-2); } .form-help { background: var(--so-accent-soft); border-left: 3px solid var(--so-accent); color: var(--so-text-2); } .form-help code { background: color-mix(in srgb, var(--so-accent) 16%, #FFFFFF 84%); color: var(--so-accent-deep); } .checkbox-label { color: var(--so-text-2); } .confirm-modal__msg { color: var(--so-text-2); } /* Impression des évaluations — listes à cocher */ .eval-print-section__head { color: var(--so-text); } .eval-print-all { color: var(--so-text-2); } .eval-print-list { background: var(--so-surface-2); border: 1px solid var(--so-border); } .eval-print-item { color: var(--so-text-2); } .eval-print-empty { color: var(--so-text-3); } .eval-tip { background: var(--so-surface-2); border: 1px dashed var(--so-border-strong); color: var(--so-text-2); } .eval-tip strong { color: var(--so-text); } .eval-degre-badge { background: var(--so-accent-soft); color: var(--so-accent-deep); } /* Évaluations : harmonise la feuille blanche avec le reste */ #tab-students .table-wrapper { border: 1px solid var(--so-border); box-shadow: var(--so-shadow-md); } /* ========================================================================= Onglet Enseignants (superadmin) ========================================================================= */ .teacher-item { background: var(--so-surface-2); border: 1px solid var(--so-border); } .teacher-item__name { color: var(--so-text); } .teacher-item__badge { background: var(--so-accent-soft); border: 1px solid color-mix(in srgb, var(--so-accent) 30%, #FFFFFF 70%); color: var(--so-accent-deep); } .teacher-item__meta { color: var(--so-text-2); } /* ========================================================================= États vides / chargement ========================================================================= */ .loading, .empty { color: var(--so-text-2); } .empty-state { color: var(--so-text-2); } .empty-state svg { color: var(--so-text-3); } .empty-state h2 { color: var(--so-text); } .empty-state p { color: var(--so-text-2); } /* ========================================================================= Overlays mobiles plein écran ========================================================================= */ .mobile-overlay { background-color: var(--so-bg) !important; background-image: none !important; color: var(--so-text); } .mobile-overlay__header { background: rgba(255, 255, 255, 0.5); backdrop-filter: var(--so-blur); -webkit-backdrop-filter: var(--so-blur); border-bottom: 1px solid rgba(255, 255, 255, 0.7); } .mobile-overlay__header h3 { color: var(--so-text); } .mobile-ex-card { background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: var(--so-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.85); } .mobile-ex-card:active { background: var(--so-accent-soft); } /* ========================================================================= Responsive — reprend les points où style.css force d'autres couleurs ========================================================================= */ @media (max-width: 1024px) { #btn-refresh-progress, #btn-print { background: var(--so-glass-strong); backdrop-filter: var(--so-blur); -webkit-backdrop-filter: var(--so-blur); border: 1px solid var(--so-glass-border); color: var(--so-accent-deep); box-shadow: var(--so-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .actions-bar .sort-control::after { color: var(--so-text-3); } /* Colonne Élève : verre dépoli au-dessus des scores qui défilent */ .progress-table td:first-child { background: rgba(255, 255, 255, 0.55) !important; border-right: 1px solid rgba(255, 255, 255, 0.8); } /* Barre d'onglets flottante en bas — capsule de verre. AUCUNE ombre portée (l'« ombre violette » est supprimée). On garde seulement le liseré intérieur (--so-specular) qui dessine le bord du verre. */ .tabs { background: var(--so-glass); backdrop-filter: var(--so-blur); -webkit-backdrop-filter: var(--so-blur); border: 1px solid var(--so-glass-border); box-shadow: var(--so-specular); } } /* ========================================================================= Correctif iOS — éléments « plats » effacés au-dessus du verre flou ------------------------------------------------------------------------- Sur iPhone/iPad, un bouton ou un titre SANS verre flou à lui, posé près d'une surface en verre « sticky » ou animée (colonne figée du tableau, glissement d'un panneau de réglages…), est effacé par Safari : il reste cliquable mais invisible (parfois après un bref clignotement). La parade : le forcer sur sa propre couche GPU (translateZ) pour qu'iOS le redessine toujours. Invisible à l'œil. @supports (-webkit-touch-callout) ne cible QUE les navigateurs iOS, donc zéro impact sur ordinateur. ========================================================================= */ @supports (-webkit-touch-callout: none) { #btn-print-eval, .set-pane__title { -webkit-transform: translateZ(0); transform: translateZ(0); } } /* ========================================================================= Portail de connexion (portail.html) ========================================================================= */ .login-page { color: var(--so-text); } .login-title { color: var(--so-text); text-shadow: none; letter-spacing: -0.02em; } .login-subtitle { color: var(--so-text-2); } .login-step, .login-card { background: var(--so-glass); backdrop-filter: var(--so-blur); -webkit-backdrop-filter: var(--so-blur); border: 1px solid var(--so-glass-border); box-shadow: var(--so-shadow-md), var(--so-specular); color: var(--so-text); } .login-back { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.85); color: var(--so-text-2); } .login-form label { color: var(--so-text-2); } .login-loading { color: var(--so-text-2); } .login-hint { color: var(--so-text-3, var(--so-text-2)); } .login-link { color: var(--so-accent, var(--so-text-2)); } .login-or { color: var(--so-text-3, var(--so-text-2)); } .login-or::before, .login-or::after { background: var(--so-line, rgba(0,0,0,0.12)); } .login-role-card, .login-class-card { background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.8); color: var(--so-text); box-shadow: var(--so-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: background 0.15s, border-color 0.15s, transform 0.15s var(--so-ease), box-shadow 0.2s var(--so-ease); } .login-role-card:hover, .login-class-card:hover { background: rgba(255, 255, 255, 0.72); border-color: color-mix(in srgb, var(--so-accent) 30%, rgba(255, 255, 255, 0.8) 70%); transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(var(--so-accent-rgb), 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .login-class-card__teacher { color: var(--so-text-2); } .btn--glass { background: var(--so-glass-strong); backdrop-filter: var(--so-blur); -webkit-backdrop-filter: var(--so-blur); border: 1.5px solid var(--so-glass-border); color: var(--so-accent-deep); box-shadow: var(--so-shadow-md), var(--so-specular); } @media (hover: hover) and (pointer: fine) { .btn--glass:hover { background: rgba(255, 255, 255, 0.85); box-shadow: 0 14px 36px -10px rgba(var(--so-accent-rgb), 0.35), var(--so-specular); } } .site-credits { color: var(--so-text-3); } .credits-title strong { color: var(--so-text-2); } /* ========================================================================= Page détail d'exercice (exercice-detail.html) ========================================================================= */ .exd-header { background: rgba(255, 255, 255, 0.55); backdrop-filter: var(--so-blur); -webkit-backdrop-filter: var(--so-blur); border-bottom: 1px solid rgba(255, 255, 255, 0.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); } .exd-close { background: rgba(255, 255, 255, 0.6); color: var(--so-text-2); border: 1px solid rgba(255, 255, 255, 0.9); } .exd-close:hover { background: var(--so-accent-soft); color: var(--so-accent-deep); } .exd-breadcrumb { color: var(--so-text-3); } .exd-breadcrumb a { color: var(--so-text-2); } .exd-breadcrumb a:hover { background: rgba(var(--so-accent-rgb), 0.1); color: var(--so-accent-deep); } .exd-title { color: var(--so-text); } .exd-id { color: var(--so-text-3); } .exd-card { background: var(--so-glass); backdrop-filter: var(--so-blur); -webkit-backdrop-filter: var(--so-blur); border: 1px solid var(--so-glass-border); box-shadow: var(--so-shadow-md), var(--so-specular); color: var(--so-text); } .exd-card h2 { color: var(--so-text-3); } .exd-description { color: var(--so-text-2); } .exd-description--empty { color: var(--so-text-3); } .exd-meta-row { border-bottom: 1px solid rgba(255, 255, 255, 0.6); } .exd-meta-label { color: var(--so-text-2); } .exd-meta-value { color: var(--so-text); } .exd-level--facile { background: #ECFDF5; color: #15803D; } .exd-level--moyen { background: #FFFBEB; color: #B45309; } .exd-level--difficile { background: #FEF2F2; color: #B91C1C; } .exd-probleme-badge { background: #F5F3FF; color: #6D28D9; } .exd-btn { background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.8); color: var(--so-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); } .exd-btn:hover { background: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.95); } .exd-btn--primary { background: var(--so-grad); color: #fff; box-shadow: 0 4px 16px -4px var(--so-glow), 0 1px 0 rgba(255, 255, 255, 0.28) inset; } .exd-btn--danger { color: var(--so-danger); border-color: #FCA5A5; } .exd-btn--danger:hover { background: #FEF2F2; } .exd-q-item { border-bottom: 1px solid rgba(255, 255, 255, 0.6); } .exd-q-num { background: rgba(var(--so-accent-rgb), 0.12); color: var(--so-accent-deep); } .exd-q-text { color: var(--so-text); } .exd-q-answer { color: #15803D; } .exd-q-answer__label { color: var(--so-text-3); } .exd-q-answer__alt { color: #4D7C0F; } .exd-q-solution { color: var(--so-text-2); } .exd-q-instr { color: #6D28D9; } .exd-loading, .exd-empty { color: var(--so-text-3); } .exd-spinner { border-color: rgba(var(--so-accent-rgb), 0.25); border-top-color: var(--so-accent); } .exd-error { color: var(--so-text-2); }