/* ========================================================================== Chaqar Academia — jetons de design (lot 2 de la refonte de l'interface) Source unique de vérité visuelle. Chargé AVANT style.css et les feuilles d'espace (etudiant.css, enseignant.css, admin.css, bibliotheque.css). Règles d'usage pour tout nouveau code : - couleurs : uniquement var(--…) de ce fichier, jamais de valeur hexadécimale ; - tailles : --taille-* (9 tailles) ; - espaces : --espace-* (grille de 4 px) ; - rayons : --rayon-champ, --rayon-carte, --rayon-pilule (3 rayons) ; - ombres : --ombre-1, --ombre-2, --ombre-3 (3 niveaux) ; - mouvement : --duree-* et --courbe. Les anciens noms (--radius-*, --shadow-*) restent disponibles en alias pour que l'existant continue de fonctionner ; ils disparaîtront au fil des lots de migration (5 à 8). ========================================================================== */ /* Police de lecture (lot 8) : Literata, dessinée pour la lecture longue, réservée au texte biblique et aux citations. Licence SIL OFL (fonts/LITERATA-OFL.txt). Le navigateur ne la télécharge que sur les pages qui l'affichent. */ @font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;src:url("/static/suivi/fonts/literata-latin-400-normal.a1e47c1196a7.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Literata';font-style:italic;font-weight:400;font-display:swap;src:url("/static/suivi/fonts/literata-latin-400-italic.eec593fa1065.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Literata';font-style:normal;font-weight:600;font-display:swap;src:url("/static/suivi/fonts/literata-latin-600-normal.1761fd55ed1a.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Literata';font-style:italic;font-weight:600;font-display:swap;src:url("/static/suivi/fonts/literata-latin-600-italic.d6d854e204b4.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{ /* --- Couleur de marque ------------------------------------------------- --marque est la couleur choisie dans Paramètres système. Elle est réinjectée par suivi/_jetons_marque.html APRÈS ce fichier ; toutes les déclinaisons (survol, fond doux, bordure douce) en sont dérivées, pour que la couleur configurée s'applique réellement partout. */ --marque:#4F46E5; /* --- Surfaces ------------------------------------------------------------ */ --bg:#F6F7FB; --surface:#FFFFFF; --surface-2:#FAFAFD; --border:#ECEDF5; --border-soft:#F1F2F8; /* --- Texte --------------------------------------------------------------- */ --ink:#111827; --ink-2:#374151; --muted:#6B7280; --muted-2:#69727E; /* 4.87:1 sur --surface, 4.55:1 sur --bg (WCAG AA) */ /* --- Accent (dérivé de --marque) ----------------------------------------- */ --accent:var(--marque); --accent-hover:color-mix(in srgb,var(--marque) 85%,#000); --accent-soft:color-mix(in srgb,var(--marque) 9%,#fff); --accent-soft-border:color-mix(in srgb,var(--marque) 18%,#fff); --on-accent:#FFFFFF; /* Fond plein (boutons, pastilles de compteur) : toujours assez sombre pour un texte blanc lisible (WCAG AA), y compris en thème sombre. */ --accent-plein:var(--marque); --accent-plein-survol:var(--accent-hover); /* --- Couleurs de statut -------------------------------------------------- */ --purple:#7C3AED; --purple-soft:#F3EEFE; --amber:#D97706; --amber-soft:#FEF3E2; --amber-soft-border:#F5DDB0; --amber-texte:#B45309; /* texte ambre : 4.58:1 sur --amber-soft (--amber seul : 2.9:1) — lot 1 */ --green:#15803D; --green-soft:#E6F7EC; --green-soft-border:#B7E4C7; --red:#DC2626; --red-soft:#FDECEC; --red-soft-border:#F3C2C2; --blue:#1D4ED8; --blue-soft:#E7EEFE; /* --- Typographie ---------------------------------------------------------- Inter pour toute l'interface ; Literata (--font-lecture) pour le seul texte biblique et les citations. 9 tailles (plus quelques chiffres d'affichage exceptionnels, > 32 px, laissés tels quels). Graisses : 400 texte, 500 libellés, 600 boutons et intertitres, 700 titres. */ --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --font-display:var(--font-body); --font-lecture:"Literata",Georgia,"Times New Roman",serif; /* texte biblique uniquement */ --taille-2xs:11px; /* micro-libellés (badges, compteurs) */ --taille-xs:12px; /* mentions, métadonnées */ --taille-sm:13px; /* texte secondaire, tableaux denses */ --taille-base:14px; /* texte courant de l'application */ --taille-md:16px; /* texte de lecture, sous-titres */ --taille-lg:18px; /* h2 */ --taille-xl:22px; /* grands chiffres, titres de carte importants */ --taille-2xl:26px; /* h1 de page */ --taille-3xl:32px; /* titres d'accueil */ --graisse-normale:400; --graisse-moyenne:500; --graisse-forte:600; --graisse-titre:700; --interligne-serre:1.25; --interligne:1.55; --interligne-lecture:1.7; /* --- Espacements (grille de 4 px) ---------------------------------------- */ --espace-1:4px; --espace-2:8px; --espace-3:12px; --espace-4:16px; --espace-5:20px; --espace-6:24px; --espace-8:32px; --espace-10:40px; --espace-12:48px; /* --- Rayons (3 seulement) ------------------------------------------------ */ --rayon-champ:10px; /* champs, boutons, petits blocs */ --rayon-carte:16px; /* cartes, panneaux, fenêtres */ --rayon-pilule:999px; /* badges, pastilles, onglets arrondis */ /* --- Ombres (3 niveaux, très diffuses) ----------------------------------- */ --ombre-1:0 1px 2px rgba(16,24,40,.04); --ombre-2:0 1px 2px rgba(16,24,40,.04),0 4px 12px rgba(16,24,40,.05); --ombre-3:0 2px 4px rgba(16,24,40,.04),0 12px 32px rgba(16,24,40,.08); /* --- Mouvement ----------------------------------------------------------- */ --duree-rapide:120ms; --duree:180ms; --duree-lente:260ms; --courbe:cubic-bezier(.2,0,0,1); /* --- Focus clavier ------------------------------------------------------- */ --focus-couleur:color-mix(in srgb,var(--accent) 45%,transparent); --focus-anneau:0 0 0 3px var(--focus-couleur); /* --- Mise en page -------------------------------------------------------- */ --sidebar-w:264px; /* --- Alias des anciens noms (ne pas utiliser dans du nouveau code) ------- */ --radius-sm:var(--rayon-champ); --radius:var(--rayon-carte); --radius-lg:var(--rayon-carte); --radius-pill:var(--rayon-pilule); --shadow-sm:var(--ombre-1); --shadow:var(--ombre-2); --shadow-lg:var(--ombre-3); } [data-theme="sombre"]{ --bg:#0F1117; --surface:#171923; --surface-2:#1D2029; --border:#2A2D3A; --border-soft:#242733; --ink:#F3F4F6; --ink-2:#D1D5DB; --muted:#9AA1AE; --muted-2:#7D848A; /* La marque est éclaircie sur fond sombre pour rester lisible. */ /* Texte et liens : éclaircis pour rester lisibles sur fond sombre (≥ 4,5:1). Les fonds pleins gardent la couleur de marque (--accent-plein). */ --accent:color-mix(in srgb,var(--marque) 62%,#fff); --accent-hover:color-mix(in srgb,var(--marque) 50%,#fff); --accent-plein:var(--marque); --accent-plein-survol:color-mix(in srgb,var(--marque) 85%,#fff); --accent-soft:color-mix(in srgb,var(--marque) 28%,#171923); --accent-soft-border:color-mix(in srgb,var(--marque) 40%,#171923); --on-accent:#FFFFFF; --purple:#A78BFA; --purple-soft:#241E3D; --amber:#F0A93D; --amber-soft:#332711; --amber-soft-border:#4D3A18; --amber-texte:var(--amber); --green:#4ADE80; --green-soft:#123420; --green-soft-border:#1B4D2E; --red:#F87171; --red-soft:#3A1A1A; --red-soft-border:#5A2727; --blue:#60A5FA; --blue-soft:#16233F; --ombre-1:0 1px 2px rgba(0,0,0,.25); --ombre-2:0 1px 2px rgba(0,0,0,.2),0 4px 14px rgba(0,0,0,.28); --ombre-3:0 2px 4px rgba(0,0,0,.2),0 12px 32px rgba(0,0,0,.36); } /* Navigateurs sans color-mix() (anciens Safari/Firefox) : valeurs fixes de la palette d'origine, pour que rien ne disparaisse. */ @supports not (color:color-mix(in srgb,red 50%,blue)){ :root{--accent-hover:#4338CA;--accent-soft:#EEF0FE;--accent-soft-border:#E0E3FB;--focus-couleur:rgba(79,70,229,.45)} [data-theme="sombre"]{--accent:#9C97F2;--accent-hover:#A9A3F2;--accent-soft:#232242;--accent-soft-border:#302E57} } /* ========================================================================== Comportements globaux portés par les jetons ========================================================================== */ /* Anneau de focus doux, visible uniquement à la navigation clavier. Les champs de formulaire gardent leur propre style de focus (style.css). */ :where(a,button,summary,[role="button"],[role="tab"],[role="menuitem"],[tabindex]:not([tabindex="-1"])):focus-visible{ outline:2px solid var(--accent); outline-offset:2px; box-shadow:var(--focus-anneau); } :where(a,button,summary,[role="button"],[tabindex]):focus:not(:focus-visible){outline:none} /* Mouvement réduit : on respecte le réglage du système d'exploitation. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }