:root { --bg: #f8fafa; --fg: #111a19; --muted: #5f6b69; --accent: #2f7d79; --accent-soft: #d1e5e5; --rule: #dee8e7; --code-bg: #eef4f4; } @media (prefers-color-scheme: dark) { :root { --bg: #101614; --fg: #e4eae9; --muted: #98a4a2; --accent: #6fc3bf; --accent-soft: #234240; --rule: #24302e; --code-bg: #182120; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0 1.5rem; background: var(--bg); color: var(--fg); font-family: ui-serif, Georgia, "Times New Roman", serif; font-size: 1.125rem; line-height: 1.7; } header.site, main, footer.site { max-width: 40rem; margin: 0 auto; } header.site { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 2.5rem 0 3rem; font-family: ui-sans-serif, system-ui, sans-serif; } .site-name { font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; color: var(--fg); padding-bottom: 0.2rem; border-bottom: 2px solid var(--accent); } header.site nav { display: flex; gap: 0.5rem; } header.site nav a { font-size: 0.75rem; color: var(--muted); text-decoration: none; padding: 0.3rem 0.8rem; border: 1px solid var(--rule); border-radius: 999px; transition: border-color 0.15s, color 0.15s, transform 0.15s ease; } header.site nav a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); } .site-name { margin-right: auto; } .lang { order: 1; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem 0.3rem 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); text-decoration: none; border: 1px solid var(--rule); border-radius: 999px; transition: border-color 0.15s, color 0.15s, transform 0.15s ease; } .lang:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); } .lang .flag { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08); } .menu-toggle { order: 2; display: none; background: none; cursor: pointer; align-items: center; padding: 0.4rem 0.7rem; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; } .menu-toggle:hover, .menu-toggle[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); } @media (max-width: 34rem) { header.site { position: relative; } .js .menu-toggle { display: inline-flex; } /* Sans JavaScript le bouton ne replie rien : la nav doit rester visible, d'où le repli piloté par .js posé dans le . */ .js header.site nav { display: none; position: absolute; top: calc(100% - 2rem); right: 0; z-index: 10; min-width: 11rem; padding: 0.4rem; background: var(--bg); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.1); } .js header.site nav.open { display: flex; } header.site nav { flex-direction: column; align-items: stretch; gap: 0.15rem; } header.site nav a { border: 0; border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.8125rem; } header.site nav a:hover { background: var(--code-bg); transform: none; } } a { color: var(--accent); } h1, h2, h3, h4 { font-family: ui-sans-serif, system-ui, sans-serif; line-height: 1.25; letter-spacing: -0.015em; } h1 { font-size: 2rem; margin: 0 0 0.5rem; } h2 { font-size: 1.375rem; margin: 2.5rem 0 0.75rem; color: var(--accent); } h3 { font-size: 1.125rem; margin: 2rem 0 0.5rem; } .table-of-contents { margin: 0 0 3rem; padding: 1.25rem 1.5rem 1.4rem; background: var(--code-bg); border-left: 2px solid var(--accent); border-radius: 0 6px 6px 0; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.9375rem; line-height: 1.5; list-style: none; } html[lang="en"] .table-of-contents::before { content: 'Contents'; } .table-of-contents::before { content: 'Sommaire'; display: block; margin-bottom: 0.9rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .table-of-contents li { display: flex; gap: 0.6rem; margin-bottom: 0.5rem; } .table-of-contents li::before { content: '–'; flex: none; color: var(--accent); opacity: 0.55; } .table-of-contents li:last-child { margin-bottom: 0; } .table-of-contents a { color: var(--accent); text-decoration: none; } .table-of-contents a:hover { text-decoration: underline; } .heading-permalink { margin-left: 0.4rem; user-select: none; color: var(--rule); text-decoration: none; font-weight: 400; opacity: 0; transition: opacity 0.15s; } h2:hover .heading-permalink, h3:hover .heading-permalink, .heading-permalink:focus-visible { opacity: 1; color: var(--accent); } .social { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.95rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--muted); text-decoration: none; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.875rem; transition: border-color 0.15s, color 0.15s, transform 0.15s ease; } .social svg { width: 16px; height: 16px; fill: currentColor; } .social:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); } .back { display: inline-block; margin-bottom: 2rem; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.8125rem; color: var(--muted); text-decoration: none; } .back:hover { color: var(--accent); } .intro { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 3.5rem; } .intro img { width: 104px; height: 104px; flex: none; } .intro p { margin: 0; } .intro .tagline { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.35rem; } .portrait { width: 168px; height: 168px; display: block; margin: 0 0 2rem; } @media (max-width: 34rem) { .intro { flex-direction: column; align-items: flex-start; gap: 1rem; } .articles li { padding: 1rem 1.25rem; margin: 0 -1.25rem 0.5rem; } } .articles { list-style: none; margin: 0; padding: 0; } .section-title { margin: 0 0 1.25rem; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .articles li { position: relative; padding: 1.25rem 1.5rem; margin: 0 -1.5rem 0.75rem; border: 1px solid var(--rule); border-radius: 8px; transition: background 0.15s, border-color 0.15s, transform 0.15s ease; } /* Sur tactile il n'y a pas de survol : la bordure au repos est le seul signal que le bloc se touche. Le soulèvement, lui, n'a de sens qu'au pointeur fin. */ .articles li:active, .articles li:focus-within { background: var(--code-bg); border-color: var(--accent-soft); } @media (hover: hover) and (pointer: fine) { .articles li:hover { background: var(--code-bg); border-color: var(--accent-soft); transform: translateY(-2px); } } .articles h3 { margin: 0.25rem 0 0.5rem; font-size: 1.375rem; } .articles h3 a { color: var(--fg); text-decoration: none; } /* Le lien du titre s'étire sur toute la carte. Envelopper le
  • dans un ferait lire la date et la description comme libellé du lien ; ici il n'y a qu'une seule cible, et elle couvre la zone entière. */ .articles h3 a::after { content: ''; position: absolute; inset: 0; } .articles li:active h3 a, .articles li:focus-within h3 a { color: var(--accent); } @media (hover: hover) and (pointer: fine) { .articles li:hover h3 a { color: var(--accent); } } .articles p { margin: 0; color: var(--muted); } /* Repère visuel seulement : le lien étiré du titre couvre déjà la carte, un second ici serait annoncé en double. D'où le et l'aria-hidden. */ .read-more { display: inline-block; margin-top: 0.875rem; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); } .read-more::after { content: '→'; display: inline-block; margin-left: 0.35rem; transition: transform 0.15s ease; } @media (hover: hover) and (pointer: fine) { .articles li:hover .read-more::after { transform: translateX(4px); } } time, .meta { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.8125rem; color: var(--muted); letter-spacing: 0.03em; } .meta { display: flex; gap: 0.75rem; margin: 0 0 2.5rem; } .empty { color: var(--muted); } article img, article video { display: block; max-width: 100%; height: auto; margin-inline: auto; } blockquote { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 2px solid var(--accent-soft); color: var(--muted); font-style: italic; } .footnotes { font-size: 0.95em; } .footnotes li { padding: 0.25rem 0.75rem; border-left: 2px solid transparent; border-radius: 6px; } .footnotes li:target { background: var(--code-bg); border-left-color: var(--accent-soft); } .footnotes li:target code { background: var(--bg); } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; } code { background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 3px; } pre { position: relative; background: var(--code-bg); padding: 1rem 1.25rem; border-radius: 6px; overflow-x: auto; line-height: 1.55; } pre code { background: none; padding: 0; } /* Le schéma ASCII a une largeur propre, plus étroite que l'encadré : on centre le bloc sans toucher à l'alignement de ses lignes. */ pre:has(> code.language-text) { text-align: center; } /* Spécificité : le thème highlight.js pose `pre code.hljs { display: block }`. */ pre:has(> code.language-text) > code { display: inline-block; text-align: left; } /* Les blocs de code débordent la colonne de texte : à 40rem, une ligne de PHP dépasse 71 caractères et devient illisible sans scroll horizontal. */ @media (min-width: 60rem) { article pre { width: calc(100% + 10rem); margin-left: -5rem; } } footer.site .translation-note { flex-basis: 100%; margin-top: 1.25rem; font-size: 0.75rem; opacity: 0.85; } .copy { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.25rem 0.6rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg); color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.75rem; cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s, border-color 0.15s, transform 0.15s ease; } pre:hover .copy, .copy:focus-visible { opacity: 1; } .copy:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); } table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; display: block; overflow-x: auto; } th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--rule); } thead th { background: var(--accent-soft); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.8125rem; letter-spacing: 0.02em; } hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; } footer.site { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 5rem; padding: 2rem 0 3rem; border-top: 2px solid var(--accent-soft); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.8125rem; color: var(--muted); } footer.site p { margin: 0; } footer.site a { color: var(--muted); text-decoration: none; } footer.site a:hover { color: var(--accent); text-decoration: underline; } pre code.hljs { background: none; padding: 0; } ::selection { background: var(--accent-soft); color: var(--fg); } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { header.site nav a:hover, .social:hover, .copy:hover, .articles li:hover, .articles li:hover .read-more::after { transform: none; } }