/* ============================================================ DESIGN TOKENS — Site de cours Palette : Vert forêt | Typographie : DM Sans + Inter ============================================================ */ /* Reset - ne pas inclure les commandes du navigateur */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ------------------------------------------------------------ 1. IMPORTS DES POLICES Chargement depuis Google Fonts. DM Sans : titres (h1, h2, h3) Inter : corps de texte, UI, métadonnées On charge uniquement les graisses utilisées (400 et 500) pour éviter de surcharger le chargement de la page. À importer depuis le base.html /!\ ------------------------------------------------------------ */ /* ------------------------------------------------------------ 2. VARIABLES GLOBALES Toutes les décisions de design centralisées ici. Modifier une valeur ici la propage sur tout le site. ------------------------------------------------------------ */ :root { /* ---------------------------------------------------------- 2a. COULEURS — FONDS Trois niveaux de fond qui créent la hiérarchie visuelle sans avoir besoin de bordures ou d'ombres partout. ---------------------------------------------------------- */ --bg-page: #F4F6F4; /* Fond de toutes les pages (body). Légèrement verdâtre, jamais blanc pur — réduit la fatigue visuelle lors des longues sessions de lecture. */ --bg-card: #FFFFFF; /* Fond des cartes (cours, TP, DS, TD). Le contraste blanc / fond verdâtre suffit à faire ressortir les cartes même sans bordure agressive. */ --bg-subtle: #EDF0ED; /* Fond des éléments de second plan : chips de filtre inactifs, lignes alternées dans l'archive, encadrés de note. Un cran plus foncé que bg-page, jamais utilisé pour du texte long. */ /* ---------------------------------------------------------- 2b. COULEURS — TEXTE Trois niveaux de texte qui créent la hiérarchie de lecture. Règle absolue : ne jamais utiliser text-primary pour du corps de texte long — réservé aux titres uniquement. ---------------------------------------------------------- */ --text-primary: #1E2E1E; /* Titres de page (h1, h2), titres de cartes, texte de navigation. Tout ce qui doit être lu en premier. */ --text-secondary: #4A5E4A; /* Corps de texte, descriptions de cartes, contenu principal. Légèrement plus clair que text-primary pour créer une hiérarchie naturelle sans effort. */ --text-muted: #7A917A; /* Métadonnées discrètes : labels de filtres inactifs, placeholders des champs de recherche, légendes, footer. Jamais utilisé pour du contenu important. */ /* ---------------------------------------------------------- 2c. COULEURS — ACCENT (vert) Le vert est la SEULE couleur d'interaction du site. Règle : si un élément est en couleur accent, il doit être cliquable. Ne jamais utiliser accent comme décoration. ---------------------------------------------------------- */ --accent: #2E7D52; /* Liens cliquables, boutons primaires (télécharger PDF, voir le cours), item actif dans la nav, filtre sélectionné. État repos uniquement. */ --accent-hover: #236040; /* État hover et focus des éléments accent. Jamais utilisé à l'état repos — uniquement en CSS :hover et :focus-visible. */ --accent-subtle: #E8F5EE; /* Fond du chip de filtre actif, fond du badge de section en cours dans la nav, fond de la ligne survolée dans l'archive. Toujours associé à du texte --accent par-dessus, jamais seul. */ /* ---------------------------------------------------------- 2d. COULEURS — BORDURES Deux niveaux de bordure selon l'importance de l'élément. Toujours en 0.5px — des bordures plus épaisses alourdissent l'interface. ---------------------------------------------------------- */ --border: #D4DDD4; /* Bordure par défaut : cartes, séparateurs entre sections, contour des inputs au repos. Très discret. */ --border-strong: #B0C4B0; /* Bordure renforcée : hover des cartes, contour des inputs en focus (avant le ring vert), séparateur du header. */ /* ---------------------------------------------------------- 2e. COULEURS — STATUT Une seule couleur de statut pour la v1. Ne pas ajouter de couleur success ou warning avant d'en avoir un besoin réel — chaque couleur supplémentaire affaiblit les autres. ---------------------------------------------------------- */ --danger: #C0392B; /* Messages d'erreur uniquement : document introuvable, erreur de chargement PDF. Jamais utilisé comme décoration ou pour attirer l'attention sur autre chose qu'une erreur. */ /* ---------------------------------------------------------- 2e-bis. COULEURS — RUBRIQUES DU CAHIER DE TEXTE Couleurs CATÉGORIELLES, jamais interactives : elles disent de quelle nature est une séance, pas qu'on peut cliquer. Le lien à l'intérieur d'un bloc reste en --accent. La teinte porte la famille, la nuance le membre, et le libellé de rubrique lève l'ambiguïté pour qui ne distingue pas les nuances. Usage strictement limité aux blocs du cahier de texte. ---------------------------------------------------------- */ --rub-cours: #9A5B12; --rub-td: #C2632B; --rub-tp: #1D5F92; --rub-ds: #55308A; --rub-dm: #7A57B0; --rub-ic: #9B7BC4; --rub-pc: #157A72; --rub-cc: #5F7A3A; /* ---------------------------------------------------------- 2f. TYPOGRAPHIE — FAMILLES ---------------------------------------------------------- */ --font-title: 'DM Sans', sans-serif; /* Utilisée uniquement pour les titres (h1, h2, h3). Ne pas l'utiliser pour du corps de texte ou des labels UI — le mélange trop fréquent casse la cohérence. */ --font-body: 'Inter', sans-serif; /* Utilisée pour tout le reste : corps, navigation, boutons, labels, métadonnées. Conçue spécifiquement pour les écrans, excellente lisibilité à toutes les tailles. */ /* ---------------------------------------------------------- 2g. TYPOGRAPHIE — NIVEAUX Syntaxe : font-weight font-size/line-height font-family Line-height en valeur sans unité (ratio) — plus robuste que des valeurs en px qui cassent quand on zoome. Plancher absolu : 12px. En dessous, accessibilité dégradée. ---------------------------------------------------------- */ --text-h1: 500 32px/1.2 var(--font-title); /* Titre principal de page. Une seule occurrence par page : hero de l'accueil, titre de la page archive. Couleur : text-primary. */ --text-h2: 500 22px/1.3 var(--font-title); /* Titre de section : "Derniers ajouts", "Thème : Algèbre". Peut apparaître plusieurs fois par page. Couleur : text-primary. */ --text-h3: 500 16px/1.4 var(--font-title); /* Titre de carte : nom du chapitre dans une carte cours, TP ou DS. Doit rester lisible dans la grille compacte. Couleur : text-primary. */ --text-body: 400 15px/1.7 var(--font-body); /* Corps de texte principal : descriptions de cartes, contenu des pages. Line-height 1.7 pour faciliter la lecture longue. Couleur : text-secondary. */ --text-ui: 400 13px/1.6 var(--font-body); /* Texte interactif : navigation, labels de filtres, liens dans les cartes, texte des boutons. Pas destiné à être lu longuement. Couleur : text-secondary. */ --text-meta: 400 12px/1.5 var(--font-body); /* Métadonnées et annotations : badges, footer, informations secondaires. Valeur plancher — ne pas descendre en dessous. Couleur : text-muted. */ /* ---------------------------------------------------------- 2h. ESPACEMENT Tout est multiple de 4px — unité de base du système. Les petits espacements (xs, sm, md) sont fixes sur tous les appareils. Seuls lg et xl s'adaptent (voir media queries ci-dessous). ---------------------------------------------------------- */ --space-xs: 4px; /* Espace micro : entre une icône et son label, entre un badge et son texte. Jamais utilisé pour séparer des blocs. */ --space-sm: 8px; /* Espace petit : entre le titre et la description dans une carte, entre deux éléments de navigation. */ --space-md: 16px; /* Espace moyen : gap entre les cartes dans la grille, padding horizontal interne des cartes. Valeur la plus utilisée. */ --space-lg: 32px; /* Espace grand : padding vertical interne des cartes, espace entre deux sections de page. Réduit sur mobile (voir media queries). */ --space-xl: 64px; /* Espace très grand : espace entre le header et le premier bloc de contenu, marges verticales entre sections majeures. Réduit significativement sur mobile. */ /* ---------------------------------------------------------- 2i. MISE EN PAGE ---------------------------------------------------------- */ --page-margin: 40px; /* Marge latérale entre le bord de l'écran et le contenu. Valeur desktop et tablette. Réduite sur mobile. */ --max-width: 1100px; /* Largeur maximale du conteneur de page. Au-delà de 1100px, le contenu ne s'élargit plus — ce sont les marges qui grandissent. Empêche les lignes de texte de devenir illisibles sur les grands écrans. */ --radius: 8px; /* Rayon des coins arrondis des cartes et des composants UI. Assez arrondi pour être moderne, pas assez pour faire "application mobile ludique". */ } /* ------------------------------------------------------------ 3. ADAPTATIONS MOBILE On ne redéfinit que ce qui change — les petits espacements (xs, sm, md) et le radius restent identiques. Breakpoint 768px = limite conventionnelle mobile/tablette. ------------------------------------------------------------ */ @media (max-width: 768px) { :root { --space-lg: 24px; /* Réduit de 32px → 24px */ --space-xl: 32px; /* Réduit de 64px → 32px */ --page-margin: 20px; /* Marges latérales plus serrées */ } } /* ------------------------------------------------------------ 4. ADAPTATIONS TABLETTE Entre 769px et 1024px — valeurs intermédiaires. ------------------------------------------------------------ */ @media (min-width: 769px) and (max-width: 1024px) { :root { --space-lg: 28px; /* Intermédiaire entre mobile et desktop */ --space-xl: 48px; /* Intermédiaire entre mobile et desktop */ --page-margin: 40px; /* Même que desktop */ } }