/* ========================================================================== base.css — reset, variables (couleurs, typo), grille Seul fichier où sont définies la palette et les tailles. Identité alignée sur les visuels flow. : crème, encre, serif, mono. ========================================================================== */ @font-face { font-family: "DM Serif Display"; src: url("../fonts/dm-serif-display-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } @font-face { font-family: "Space Mono"; src: url("../fonts/space-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Space Mono"; src: url("../fonts/space-mono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } :root { /* Surfaces */ --paper: #faf9f5; --paper-deep: #f2f0ea; --line: #e4e1d9; --line-strong: #cbc7bd; /* Encre */ --ink: #111111; --ink-soft: #3b3a37; --muted: #6f6d67; /* Accents flow. — un seul accent par visuel, jamais bleu et vert ensemble */ --blue: #4a6fa5; --green: #3d7a5c; --orange: #d97a0a; --red: #a8453f; /* même famille de ton que bleu/vert, contraste AA avec du texte blanc */ --purple: #6a4c85; /* Typo */ --display: "DM Serif Display", Georgia, serif; --serif: "Source Serif 4", Georgia, "Times New Roman", serif; --mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace; --fs-label: 0.74rem; --fs-base: 1.125rem; --fs-lede: clamp(1.2rem, 2.3vw, 1.7rem); --fs-h3: 1.45rem; --fs-h2: clamp(1.9rem, 3.6vw, 2.6rem); --fs-h1: clamp(2.8rem, 9.4vw, 7.6rem); /* Espacements / formes */ --gutter: 1.25rem; --max: 1080px; --max-text: 64ch; --radius: 8px; --header-h: 64px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); color-scheme: light; } body { min-height: 100vh; font-family: var(--serif); font-size: var(--fs-base); line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga", "onum"; } img, svg, video { display: block; max-width: 100%; height: auto; } ul[class], ol[class] { list-style: none; padding: 0; } button { font: inherit; color: inherit; } /* ---------- Typographie ---------- */ h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; } /* Titres de page : pleine largeur, lignes remplies (pas d'équilibrage) */ h1 { font-size: var(--fs-h1); line-height: 0.98; letter-spacing: -0.02em; text-wrap: pretty; } h2 { font-size: var(--fs-h2); margin-bottom: 1rem; } h3 { font-size: var(--fs-h3); margin-bottom: 0.35rem; } /* Tous les textes sont justifiés */ p, li, dd, figcaption { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } p { max-width: var(--max-text); } p + p { margin-top: 1em; } strong { font-weight: 700; color: var(--bar, var(--blue)); } a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { text-decoration-color: var(--ink); } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; } /* .bar : les h1 n'ont plus de trait, seuls les intertitres h2/h3 sont surlignés (plus bas). */ .bar { position: relative; } .bar.green { --bar: var(--green); } .bar.ink { --bar: var(--ink); } /* Intertitres (h2, h3) : surlignage plein à la couleur du thème, texte blanc. Une catégorie = une couleur, posée une fois sur (voir body.theme-*). */ h2.bar, h3.bar { display: inline-block; background: var(--bar, var(--blue)); color: #fff; padding: 0.1em 0.5em 0.16em; border-radius: 6px; text-wrap: balance; } /* Label mono en capitales */ .label { font-family: var(--mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } /* Paragraphe « manifeste » : serif gras, justifié */ .lede { font-size: var(--fs-lede); font-weight: 600; line-height: 1.45; text-align: justify; hyphens: auto; } .lede em { font-style: normal; color: var(--bar, var(--blue)); } .muted { color: var(--muted); } /* Wordmarks : flow• et Ric• */ .flow, .mark { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; white-space: nowrap; } .flow .dot, .mark .dot { color: var(--orange); } /* Un thème de couleur par catégorie de page */ body.theme-green { --bar: var(--green); } body.theme-red { --bar: var(--red); } body.theme-purple { --bar: var(--purple); } /* Contenu à compléter : repérable (grep "todo") */ .todo { background: #fbecd6; color: #8a4a05; padding: 0 0.3em; font-style: normal; font-weight: 400; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Grille ---------- */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .grid { display: grid; gap: 2rem 1.75rem; } .grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }