/* ================================================================== Thème commun de la plateforme « Mes cours » — M. Courcelle ------------------------------------------------------------------ Une seule feuille pour toute la plateforme : la page d'aiguillage, les index de classe et les pages de module partagent ces jetons, cette typographie et ces composants. Les feuilles spécialisées (exercices-commune.css, jeux-differenciee.css, atelier-texte.css) ne redéfinissent jamais une couleur en dur : elles consomment les variables déclarées ici. Pour ajouter une classe : 1. un couple --xxx-fond / --xxx-trait / --xxx-encre dans :root ; 2. une règle .classe-xxx plus bas ; 3. les règles de la tuile (.classe--xxx) dans index.html. ================================================================== */ :root { /* --- encres et papiers ------------------------------------------ */ --encre: #16302B; /* texte principal, vert très sombre */ --encre-douce: #3E5751; /* texte secondaire, AA sur tous les fonds */ --papier: #FBFCFB; /* fond de page */ --blanc: #FFFFFF; /* fond des cartes et des champs */ --trait: #D5DEDA; /* bordures neutres */ --trait-fort: #B3C2BC; /* --- couleurs par classe ---------------------------------------- */ /* -fond : aplat pâle ; -trait : filet vif, jamais du texte ; -encre : variante sombre du filet, contraste AA pour du texte. */ --tc-fond: #FBE1E7; --tc-trait: #D6336C; --tc-encre: #B82A59; --diff-fond: #DDF5EC; --diff-trait: #05BC8A; --diff-encre: #036F51; --comm-fond: #FDF0CF; --comm-trait: #E0A100; --comm-encre: #7F5B00; --ts-fond: #DFEAFB; --ts-trait: #2F6FDB; --ts-encre: #215FC2; --ae-fond: #F1E3F7; --ae-trait: #9B4DCA; --ae-encre: #8840B4; /* --- couleurs de verdict ---------------------------------------- */ --juste: #1E7A4C; --juste-fond: #E3F3EA; --erreur: #B0322A; --erreur-fond: #F9E5E3; --cible: #F5C542; /* surlignage, marqueur */ --cible-fond: #FDF6E1; /* --- accent courant --------------------------------------------- */ /* Neutre par défaut ; chaque page de classe le remplace en posant une classe .classe-xxx sur . Tout le reste de la plateforme ne connaît que --accent, --accent-fond et --accent-encre. */ --accent: var(--encre); --accent-fond: #EDF2F0; --accent-encre: var(--encre); /* --- typographie ------------------------------------------------- */ --police-titre: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace; --police-texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --police-doc: Cambria, Georgia, "Times New Roman", serif; /* specimens de traitement de texte */ /* --- mesures ------------------------------------------------------ */ --lecture: 64ch; /* largeur de confort d'un paragraphe */ --page: 58rem; /* largeur de la colonne de contenu */ --gouttiere: 1.5rem; /* marge latérale, identique partout */ --base: 17px; } /* Identité de classe : posée sur . */ .classe-tc { --accent: var(--tc-trait); --accent-fond: var(--tc-fond); --accent-encre: var(--tc-encre); } .classe-diff { --accent: var(--diff-trait); --accent-fond: var(--diff-fond); --accent-encre: var(--diff-encre); } .classe-comm { --accent: var(--comm-trait); --accent-fond: var(--comm-fond); --accent-encre: var(--comm-encre); } .classe-ts { --accent: var(--ts-trait); --accent-fond: var(--ts-fond); --accent-encre: var(--ts-encre); } .classe-ae { --accent: var(--ae-trait); --accent-fond: var(--ae-fond); --accent-encre: var(--ae-encre); } /* ================================================================== Base ================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-size: var(--base); scroll-behavior: smooth; scroll-padding-top: 1rem; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--papier); color: var(--encre); font-family: var(--police-texte); font-size: 1rem; line-height: 1.55; -webkit-text-size-adjust: 100%; } /* Mode projection : agrandit toute la page d'un coup pour le TBI. Le jeton doit être posé sur et non sur : c'est qui porte font-size, et donc la valeur du rem pour toute la page. */ html.projection { --base: 25px; } p, ul, ol { max-width: var(--lecture); } p { margin: 0 0 .9rem; } li { margin-bottom: .35rem; } a { color: var(--accent-encre); } a:hover { text-decoration-thickness: 2px; } strong { font-weight: 600; } code, kbd { font-family: ui-monospace, "JetBrains Mono", Consolas, "Courier New", monospace; font-size: .92em; background: var(--accent-fond); padding: .05rem .3rem; border-radius: .2rem; } :focus-visible { outline: 3px solid var(--accent-encre); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } /* ================================================================== En-tête de page Fil d'Ariane, titre, sous-titre, et le filet de couleur de la classe — le même motif que les tuiles de la page d'accueil. ================================================================== */ .entete { background: var(--blanc); border-bottom: .5rem solid var(--accent); } .entete__interieur { max-width: calc(var(--page) + 2 * var(--gouttiere)); margin: 0 auto; padding: 1rem var(--gouttiere) 1.1rem; } .ariane { font-size: .85rem; color: var(--encre-douce); margin-bottom: .5rem; } .ariane a { color: var(--encre-douce); } .ariane a:hover { color: var(--accent-encre); } .ariane span[aria-hidden] { padding: 0 .35rem; color: var(--trait-fort); } .ariane strong { color: var(--encre); font-weight: 600; } .entete h1 { margin: 0; font-family: var(--police-titre); font-size: clamp(1.35rem, 3.2vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } .entete__meta { margin: .35rem 0 0; max-width: none; color: var(--encre-douce); font-size: .95rem; } /* Outils à droite du titre (bouton « Agrandir », par exemple) */ .entete__barre { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: flex-end; justify-content: space-between; } /* ================================================================== Corps de page ================================================================== */ .contenu { flex: 1; width: 100%; max-width: calc(var(--page) + 2 * var(--gouttiere)); margin: 0 auto; padding: 2rem var(--gouttiere) 4rem; } .chapeau { font-size: 1.08rem; color: var(--encre-douce); max-width: var(--lecture); } h2 { font-family: var(--police-titre); font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin: 2.8rem 0 .8rem; padding-top: .8rem; border-top: 2px solid var(--accent); max-width: var(--lecture); } .contenu > h2:first-child, section > h2:first-child, .inner > h2:first-child { border-top: 0; padding-top: 0; margin-top: .5rem; } h3 { font-family: var(--police-titre); font-size: 1.02rem; font-weight: 700; margin: 1.8rem 0 .5rem; color: var(--accent-encre); } h4 { font-size: .95rem; font-weight: 600; margin: 1.2rem 0 .4rem; } /* ================================================================== Encadrés .encadre rappel neutre .encadre--theorie ce qu'il faut savoir avant de jouer .encadre--cle la règle à retenir .encadre--attention piège fréquent ================================================================== */ .encadre { background: var(--accent-fond); border-left: .4rem solid var(--accent); border-radius: 0 .4rem .4rem 0; padding: .9rem 1.1rem; margin: 1.4rem 0; max-width: var(--lecture); } .encadre > :first-child { margin-top: 0; } .encadre > :last-child { margin-bottom: 0; } .encadre h3 { margin-top: 0; color: var(--encre); } .encadre--theorie { background: var(--accent-fond); } .encadre--cle { background: var(--cible-fond); border-left-color: var(--cible); } .encadre--attention { background: var(--erreur-fond); border-left-color: var(--erreur); } /* ================================================================== Boutons ================================================================== */ .action { font: inherit; font-weight: 600; font-size: .95rem; background: var(--encre); color: var(--papier); border: 2px solid var(--encre); border-radius: .4rem; padding: .5rem 1.05rem; cursor: pointer; } .action:hover { background: var(--accent-encre); border-color: var(--accent-encre); } .action--secondaire { background: var(--blanc); color: var(--encre); } .action--secondaire:hover { background: var(--encre); color: var(--papier); border-color: var(--encre); } .action[disabled] { opacity: .5; cursor: default; } .action[disabled]:hover { background: var(--encre); border-color: var(--encre); } .actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .9rem 0; } /* ================================================================== Sommaire d'un module (bandeau de blocs / de séances) ================================================================== */ .sommaire { background: var(--accent-fond); border-bottom: 1px solid var(--trait); } .sommaire__interieur { max-width: calc(var(--page) + 2 * var(--gouttiere)); margin: 0 auto; padding: .7rem var(--gouttiere); display: flex; flex-wrap: wrap; gap: .4rem; } .sommaire a, .sommaire button { font: inherit; font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--encre); background: var(--blanc); border: 1px solid var(--trait-fort); border-radius: .35rem; padding: .35rem .8rem; cursor: pointer; } .sommaire a:hover, .sommaire button:hover { border-color: var(--encre); } .sommaire a[aria-current="page"], .sommaire button[aria-current="true"] { background: var(--encre); border-color: var(--encre); color: var(--papier); } /* ================================================================== Index de classe : la liste des modules Un

par module. Voir le gabarit en commentaire dans chaque index de classe. ================================================================== */ .modules { list-style: none; padding: 0; margin: 1.2rem 0 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; } .module { margin: 0; } .module__lien { display: flex; flex-direction: column; height: 100%; gap: .3rem; background: var(--blanc); border: 1px solid var(--trait); border-top: .4rem solid var(--accent); border-radius: .5rem; padding: 1.1rem 1.2rem 1.2rem; color: var(--encre); text-decoration: none; } @media (hover: hover) { .module__lien:hover { border-color: var(--accent); border-top-color: var(--accent); } .module__lien:hover .module__titre { text-decoration: underline; text-decoration-thickness: 2px; } } .module__num { font-family: var(--police-titre); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-encre); } .module__titre { font-family: var(--police-titre); font-size: 1.12rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; } .module__resume { color: var(--encre-douce); font-size: .95rem; margin-top: .2rem; } .module__meta { margin-top: auto; padding-top: .8rem; color: var(--encre-douce); font-size: .85rem; } /* Module annoncé mais pas encore en ligne : même carte, sans lien. */ .module--bientot .module__lien { border-top-color: var(--trait-fort); background: var(--papier); color: var(--encre-douce); cursor: default; } .module--bientot .module__num { color: var(--encre-douce); } /* Classe sans aucun module publié */ .vide { background: var(--blanc); border: 2px dashed var(--trait-fort); border-radius: .5rem; padding: 2rem 1.5rem; text-align: center; color: var(--encre-douce); max-width: none; } /* ================================================================== Tableaux, figures, captures ================================================================== */ table { border-collapse: collapse; width: 100%; max-width: var(--lecture); margin: 1.2rem 0; font-size: .95rem; } th, td { border-bottom: 1px solid var(--trait); padding: .45rem .6rem; text-align: left; vertical-align: top; } th { background: var(--accent-fond); border-bottom: 2px solid var(--accent); font-weight: 600; } figure { margin: 1.4rem 0; max-width: var(--lecture); } figure img { width: 100%; display: block; border: 1px solid var(--trait); border-radius: .3rem; } figcaption { font-size: .86rem; color: var(--encre-douce); margin-top: .4rem; } /* Capture pas encore déposée : la page reste lisible et dit quoi ajouter. */ .manque { border: 2px dashed var(--trait-fort); background: var(--papier); border-radius: .3rem; padding: 2rem 1rem; text-align: center; color: var(--encre-douce); font-size: .9rem; } /* ================================================================== Pied de page ================================================================== */ .pied { border-top: 1px solid var(--trait); background: var(--blanc); color: var(--encre-douce); font-size: .88rem; } .pied__interieur { max-width: calc(var(--page) + 2 * var(--gouttiere)); margin: 0 auto; padding: 1.2rem var(--gouttiere) 2rem; } .pied a { color: var(--encre-douce); } /* ================================================================== Impression ================================================================== */ @media print { body { background: #fff; } .sommaire, .action, .actions, .entete__barre button { display: none; } .entete { border-bottom-width: 2px; } .contenu { max-width: none; padding: 0; } }