/* Page académique de Jordan Serres. Feuille unique, sans dépendance externe. Aucun JavaScript n'est requis pour la mise en page ; seul MathJax est chargé, et uniquement là où il y a des formules. */ /* Thème clair : valeurs par défaut. */ :root { color-scheme: light; --bg: #fffefb; --fg: #1c1c1a; --muted: #5f5f59; --link: #17458f; --link-hover: #a3352a; --border: #e4e2dc; --mark: #fff3bf; --measure: 44rem; /* largeur de lecture confortable */ } /* Thème sombre. Il s'applique dans deux cas, d'où la règle dédoublée : - réglage système du lecteur, tant qu'il n'a pas demandé le clair ; - choix explicite via le bouton (data-theme sur ). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #15171a; --fg: #e3e2de; --muted: #9c9a93; --link: #8fb6e8; --link-hover: #e8a898; --border: #2c2f35; --mark: #4a4325; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #15171a; --fg: #e3e2de; --muted: #9c9a93; --link: #8fb6e8; --link-hover: #e8a898; --border: #2c2f35; --mark: #4a4325; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* Colonne pleine hauteur : sur une page courte, le pied de page va se caler en bas de la fenêtre au lieu de remonter contre le texte. */ body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font: 1.0625rem/1.65 Georgia, "Iowan Old Style", Palatino, "Palatino Linotype", "Times New Roman", serif; overflow-wrap: break-word; } main { flex: 1 0 auto; } .site-footer { margin-top: auto; } .wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.25rem; } /* La bibliographie a besoin de plus de large que la prose. */ .wrap--wide { max-width: 58rem; } /* ---------- Liens ---------- */ a { color: var(--link); text-underline-offset: 0.13em; text-decoration-thickness: 0.06em; } a:hover { color: var(--link-hover); } :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 0.5rem; top: 0.5rem; z-index: 10; background: var(--bg); border: 1px solid var(--border); padding: 0.5rem 0.75rem; } /* ---------- En-tête et navigation ---------- */ .site-header { border-bottom: 1px solid var(--border); } .site-header .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.5rem; padding-top: 1.6rem; padding-bottom: 1.2rem; max-width: 58rem; } .site-title { margin-right: auto; font-size: 1.3rem; font-weight: 700; color: var(--fg); text-decoration: none; letter-spacing: 0.01em; } .site-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; } .site-nav a { color: var(--muted); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; } .site-nav a:hover { color: var(--link); } .site-nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--fg); } /* Bascule clair/sombre. Le bouton est écrit masqué dans le HTML et n'est révélé que par theme.js : sans JavaScript il n'apparaît pas, et le thème suit alors simplement le réglage système. Cette règle est indispensable — sans elle, le display:flex ci-dessous l'emporterait sur l'attribut hidden et le bouton resterait visible. */ .theme-toggle[hidden] { display: none; } .theme-toggle { flex: none; display: flex; align-items: center; padding: 0.3rem; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; line-height: 0; } .theme-toggle:hover { color: var(--link); border-color: var(--border); } .theme-toggle svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } /* Le bouton affiche la cible du clic : lune en clair, soleil en sombre. */ .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ---------- Corps ---------- */ main.wrap { padding-top: 2.5rem; padding-bottom: 4rem; } h1, h2, h3 { line-height: 1.25; } h1 { font-size: 1.85rem; font-weight: 700; margin: 0 0 1.4rem; } h2 { font-size: 1.3rem; margin: 2.2rem 0 0.8rem; } h3 { font-size: 1.1rem; } p { margin: 0 0 1.1rem; } ul, ol { padding-left: 1.4rem; } hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; } /* ---------- Accueil ---------- */ /* Le contenu de l'accueil est court : on le centre dans la hauteur restante plutôt que de le laisser collé sous l'en-tête. « safe » empêche le débordement d'être rogné par le haut quand la fenêtre est plus basse que le contenu ; les navigateurs qui l'ignorent gardent la déclaration « center » précédente. */ main.centered { display: flex; flex-direction: column; justify-content: center; justify-content: safe center; } /* Le portrait occupe toute la largeur en tête, le texte vient dessous. 440px est la résolution native du fichier : au-delà, l'image serait agrandie et perdrait en netteté. */ .intro img { display: block; width: 440px; max-width: 100%; height: auto; margin: 0 auto 2rem; border-radius: 4px; } /* ---------- Blocs dépliants ---------- */ details { border-top: 1px solid var(--border); } summary { cursor: pointer; padding: 0.7rem 0; font-weight: 700; } summary:hover { color: var(--link); } /* Titres de groupe de premier niveau (page Research). */ summary .grp { font-size: 1.12rem; } details details { margin-left: 1.1rem; border-top: 1px dotted var(--border); } details details summary { font-weight: 400; font-style: italic; } /* ---------- Bibliographie ---------- */ .bib { width: 100%; border-collapse: collapse; } .bib td { padding: 0.55rem 0; vertical-align: top; } td.bibtexnumber { width: 3.2rem; padding-right: 0.7rem; text-align: right; white-space: nowrap; color: var(--muted); } /* Surligne l'entrée atteinte depuis un renvoi du texte. */ tr:has(> td > a[id]:target) { background: var(--mark); } a.bibref { text-decoration: none; } a.bibref:hover { text-decoration: underline; } /* ---------- Formules ---------- */ /* Une formule trop large défile dans son cadre au lieu d'élargir la page. */ mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; padding: 0.2rem 0; } /* Les renvois d'équation ne sont pas des liens cliquables. */ mjx-container a.mjx-eqnref, mjx-container a.mjx-ref, mjx-container [href^="#mjx-eqn"] { color: currentColor; text-decoration: none; pointer-events: none; cursor: default; } /* ---------- Pied de page ---------- */ .site-footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; } .site-footer .wrap { padding-top: 1.4rem; padding-bottom: 2.2rem; max-width: 58rem; } /* ---------- Impression ---------- */ @media print { .site-nav, .site-footer, .skip-link { display: none; } body { background: #fff; color: #000; font-size: 11pt; } a { color: #000; } /* Les URL des liens externes sont sinon perdues sur papier. */ main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; } }