/* LES SIX SOMMAIRES (primaire, college, lycee, prepa, licence, master), et eux seuls : cette feuille n est chargee que par eux, et chaque regle passe par `body.sommaire`. Demande de l utilisateur du 28/10/2026, deux captures de /college/ sur telephone : « le titre est trop gros ; le texte est trop centre il devrait etre plus elargi sur les cotes ; il faut vraiment s adapter a l ecran au maximum ; reduire la police d ecriture ». CE QUI CENTRAIT LE TEXTE, MESURE A 375 PX AVANT LA CORRECTION : `main` pose deja 16 px de gouttiere, et `.hero` comme `.parts` en ajoutaient 6vw (22,5 px) de chaque cote — le texte commencait a 39 px du bord et tenait dans 298 px sur 375. A 1425 px, `main` plafonnait a 1060 px et le texte commencait a 323 px du bord. La gouttiere de `main` reste la seule : 16 px sur telephone, 24 a 40 au-dela. LA MESURE DE LECTURE est relachee a 100ch dans l en-tete : la demande est de ne plus enfermer le texte dans une colonne etroite, et 66ch (569 px) l y enfermait sur tout ecran d ordinateur. */ body.sommaire .content>main{max-width:min(1280px,100%)} body.sommaire .hero{padding:var(--e-5) 0 var(--e-4)} body.sommaire .hero .eyebrow{font-size:var(--t-1);margin:0 0 var(--e-2)} body.sommaire .hero h1{font-size:clamp(24px,1.1rem + 1.4vw,38px);line-height:1.15;letter-spacing:-.025em;margin:0 0 var(--e-3);max-width:none} body.sommaire .hero h1 br{display:none} body.sommaire :is(.hero,.som-apropos) p{font-size:clamp(15px,.85rem + .3vw,18px);line-height:1.55;max-width:100ch;margin:0 0 var(--e-3)} body.sommaire :is(.hero,.som-apropos) .lead{font-size:clamp(16px,.9rem + .35vw,19px)} body.sommaire :is(.hero,.som-apropos) .small{font-size:var(--t-2)} /* « EN SAVOIR PLUS SUR … » : sommaire.js y range, a toutes les largeurs, les paragraphes de l en-tete autres que le chapeau (la structure des modules, les prerequis), APRES les boites et fermes. Le premier ecran montre le titre, le chapeau et les classes ; le reste s ouvre a la demande. Un filet le separe de la derniere boite. style.css donne a tout
une marge, un filet et une encre grise : on les remplace ici, pas en plus. */ body.sommaire details.som-apropos{margin:0;border-top:1px solid var(--line);padding:var(--e-3) 0 var(--e-6);color:var(--fg)} body.sommaire details.som-apropos>summary{min-height:24px;padding:var(--e-2) 0;font-size:var(--t-3);font-weight:600;color:var(--accent)} body.sommaire details.som-apropos>summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px} body.sommaire details.som-apropos[open]>summary{margin-bottom:var(--e-3)} @media (max-width:640px){body.sommaire.som-active .hero{padding-bottom:var(--e-2)}body.sommaire.som-active .hero h1{margin-bottom:var(--e-2)}} /* La liste d origine, telle que la voit une page sans script : memes gouttieres, titres ramenes a l echelle. */ body.sommaire .parts{padding:0 0 var(--e-8);gap:var(--e-6)} body.sommaire .part h2{font-size:clamp(20px,1rem + 1vw,28px)} body.sommaire .part .sub{font-size:var(--t-3)} body.sommaire h3.matiere{font-size:var(--t-2)} /* LES COULEURS DES CLASSES, prises dans la charte (style.css : --violet, --deep, --coral, --apricot, leurs lavis --tone-*, et le cyan du logo). Une boite = son lavis, un filet de sa couleur franche a gauche, une pastille pleine. L ENCRE DE LA PASTILLE est reglee contre SA couleur, dans chaque theme (rapports mesures le 28/10/2026) : clair : blanc sur violet 6,71 ; #0b110f sur cyan fonce 5,67 ; blanc sur vert profond 8,63 ; #0b110f sur corail fonce 5,37, sur abricot fonce 5,66. sombre : #0b110f sur violet eclairci 6,34, sur cyan 9,19, sur vert 4,99, sur corail 6,66, sur abricot 10,96. Le texte de la boite est --fg et --muted sur le lavis : 10,65 et 5,64 au plus bas en clair, 12,02 et 7,01 en sombre. tests/api.test.mjs recalcule ces rapports a partir des jetons. EN CLAIR, TROIS COULEURS FRANCHES SONT FONCEES (decision de l utilisateur du 28/10/2026 : « des couleurs un peu plus foncees en theme clair » — « oui »). Le filet et la pastille sont des elements graphiques : 3:1 au moins contre ce qui les borde, le lavis de leur boite ET la page. Mesure avant : cyan 1,87 sur son lavis, abricot 1,55, corail 2,44. Les seules variantes foncees de la charte sont des couleurs A SENS (--ko, --warn) : la 4e se serait lue comme une erreur, la CM2 comme un avertissement. Chacune est donc DERIVEE de sa couleur par la regle de la charte (style.css, « clarte HSL seule ») : meme teinte, meme saturation, et la clarte la plus HAUTE (pas de 0,1 %) qui tient 3:1 contre son lavis et contre la page — « un peu » plus foncee, pas davantage. Plus bas, le corail et l abricot rejoignaient --ko et --warn, et la CM1 se confondait avec la CM2 en deuteranopie. L encre sombre qu elles portent y garde plus de 4,5. Le violet (5,85) et le vert profond (7,73) passaient deja : ils ne bougent pas. Le sombre ne change pas : ses deux blocs remettent les couleurs d origine. cyan #00c3f5 hsl(192°,100 %,48 %) -> #0098bf (37,5 %) : lavis 3,02, page 3,36, encre #0b110f 5,67 ; corail #e97957 hsl(14°,77 %,63 %) -> #e45d34 (55,0 %) : lavis 3,03, page 3,55, encre #0b110f 5,37 ; abricot #f2bb66 hsl(36°,84 %,67 %) -> #c27d11 (41,4 %) : lavis 3,01, page 3,37, encre #0b110f 5,66. Le lavis reste celui de la charte : le texte de la boite y garde les rapports ci-dessus. */ body.sommaire{ --som-1-fond:var(--tone-lilac);--som-1-fort:var(--violet);--som-1-encre:#fff; --som-2-fond:var(--tone-blue);--som-2-fort:#0098bf;--som-2-encre:#0b110f; --som-3-fond:var(--tone-sage);--som-3-fort:var(--deep);--som-3-encre:#fff; --som-4-fond:var(--tone-rose);--som-4-fort:#e45d34;--som-4-encre:#0b110f; --som-5-fond:var(--tone-apricot);--som-5-fort:#c27d11;--som-5-encre:#0b110f; } @media (prefers-color-scheme:dark){:root:not([data-theme=light]) body.sommaire{ --som-1-encre:#0b110f;--som-3-encre:#0b110f; --som-2-fort:#00c3f5;--som-4-fort:var(--coral);--som-5-fort:var(--apricot); }} :root[data-theme=dark] body.sommaire{ --som-1-encre:#0b110f;--som-3-encre:#0b110f; --som-2-fort:#00c3f5;--som-4-fort:var(--coral);--som-5-fort:var(--apricot); } body.sommaire [data-teinte="1"]{--som-fond:var(--som-1-fond);--som-fort:var(--som-1-fort);--som-encre:var(--som-1-encre)} body.sommaire [data-teinte="2"]{--som-fond:var(--som-2-fond);--som-fort:var(--som-2-fort);--som-encre:var(--som-2-encre)} body.sommaire [data-teinte="3"]{--som-fond:var(--som-3-fond);--som-fort:var(--som-3-fort);--som-encre:var(--som-3-encre)} body.sommaire [data-teinte="4"]{--som-fond:var(--som-4-fond);--som-fort:var(--som-4-fort);--som-encre:var(--som-4-encre)} body.sommaire [data-teinte="5"]{--som-fond:var(--som-5-fond);--som-fort:var(--som-5-fort);--som-encre:var(--som-5-encre)} /* LA NAVIGATION A TROIS NIVEAUX (assets/sommaire.js). */ body.sommaire .som{padding:0 0 var(--e-8)} /* UNE VUE AMENEE EN HAUT DE L ECRAN (sommaire.js, amener) TIENT AU MOINS UN ECRAN : une page plus courte ne defile pas jusque-la, et l en-tete reste coupe par le bord haut (a 375 px, 7 vues d annee sur 38 apres « En savoir plus » ferme ; relecture du 28/10/2026). 100vh et non 100svh : sur telephone, la barre d adresse se replie en defilant et l ecran grandit d autant. La page ouverte sans adresse n a pas la classe, ni la liste des classes quel que soit le chemin qui y ramene (troisieme relecture du 28/10/2026) : rien ne change sous ses boites. Jamais a l impression (le bloc d impression, en fin de feuille). */ body.sommaire.som-active .som.som-calee{min-height:100vh} body.sommaire .som-fil{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-4);margin:0 0 var(--e-4);font-size:var(--t-2)} body.sommaire .som-fil[hidden]{display:none} body.sommaire .som-fil ol{display:flex;flex-wrap:wrap;gap:var(--e-1) var(--e-2);list-style:none;padding:0;margin:0;max-width:none} body.sommaire .som-fil li{margin:0;font-size:var(--t-2);color:var(--muted)} /* Le separateur suit l etape qu il ferme : a 320 px, porte par l etape suivante (li+li::before), il ouvrait la seconde ligne, seul (« › Physique-chimie »). */ body.sommaire .som-fil li:not(:last-child)::after{content:'›';margin-left:var(--e-2);color:var(--muted)} body.sommaire .som-fil a{color:var(--accent);display:inline-flex;align-items:center;min-height:24px} body.sommaire .som-fil [aria-current]{color:var(--fg);font-weight:600} body.sommaire .som-retour{border:1px solid var(--accent-line);border-radius:var(--r-pill);padding:var(--e-1) var(--e-3);text-decoration:none;background:var(--accent-l)} body.sommaire .som-titre{font-size:clamp(20px,1rem + 1vw,28px);line-height:1.2;letter-spacing:-.02em;margin:0 0 var(--e-2)} body.sommaire .som-meta{color:var(--muted);font-size:var(--t-2);margin:0 0 var(--e-4)} body.sommaire .som-intro{font-size:var(--t-3);line-height:1.5;color:var(--muted);max-width:100ch;margin:0 0 var(--e-4)} body.sommaire .som-desc{margin:0 0 var(--e-4)} body.sommaire .som-desc>.som-intro{margin:0 0 var(--e-2)} body.sommaire .som-desc>.som-intro:last-child{margin-bottom:0} /* LES GROUPES D UNE ANNEE (la vue M2 : le parcours Data & BI et ses neuf themes, puis l ingenierie de l IA). Le titre du groupe est un h3 sous le h2 de la vue ; ses boites suivent, dans la meme grille que les autres. */ body.sommaire .som-groupe{margin:0 0 var(--e-7)} body.sommaire .som-groupe:last-child{margin-bottom:0} body.sommaire .som-groupe-titre{font-size:var(--t-5);line-height:1.25;letter-spacing:-.01em;margin:var(--e-5) 0 var(--e-1)} body.sommaire .som-groupe-meta{color:var(--muted);font-size:var(--t-2);margin:0 0 var(--e-3)} /* LE REPLI (sommaire.js), et lui seul : CHAQUE REGLE PASSE PAR `.som-active`, la classe que pose le script. Sans script, aucun texte ne se replie et aucun bouton n existe : la page est celle d avant. Le texte entier reste dans le DOM ; la feuille ne fait que borner sa hauteur. - le chapeau de l en-tete : trois lignes sur telephone, entier au-dela ; - la description d une vue ou d un groupe : deux lignes PAR PARAGRAPHE, a toutes les largeurs (le second paragraphe du parcours Data & BI commence par le lien vers les jeux de donnees, qui reste a l ecran) ; - la description d une carte de module : deux lignes sur telephone, trois au-dela, tant que SA liste ne porte pas `som-ouvert` — le bouton « Descriptions en entier », juste avant la liste, la lui donne (decision de la session principale du 28/10/2026 : la page d un module ne reprend presque jamais le texte de sa carte). Le numero et le titre ne se replient jamais : le cadenas et le badge « Essai » d app.js s accrochent au titre. LE NOMBRE DE LIGNES EST UN JETON, --som-lignes, pose sur la zone : le repli l emploie, et sommaire.js le lit pour mesurer une zone OUVERTE sans la replier (troisieme relecture du 28/10/2026 : retirer `som-ouvert` le temps de mesurer faisait sauter la page). Le chapeau n en a pas au-dela de 640 px : il ne s y replie pas. */ body.sommaire.som-active .som-desc{--som-lignes:2} body.sommaire.som-active .som .modules{--som-lignes:3} @media (max-width:640px){body.sommaire.som-active .hero .lead.som-repli{--som-lignes:3}body.sommaire.som-active .som .modules{--som-lignes:2}} body.sommaire.som-active .som-desc:not(.som-ouvert)>p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--som-lignes);line-clamp:var(--som-lignes);overflow:hidden} @media (max-width:640px){body.sommaire.som-active .hero .lead.som-repli:not(.som-ouvert){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--som-lignes);line-clamp:var(--som-lignes);overflow:hidden}} body.sommaire.som-active .som .modules:not(.som-ouvert) .desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--som-lignes);line-clamp:var(--som-lignes);overflow:hidden} /* « LIRE LA SUITE », « RÉDUIRE », « DESCRIPTIONS EN ENTIER » : un lien d apparence, pas un bouton plein. style.css donne a tout