/* ════════════════════════════════════════════════════════════
PostSingularity Institute — Thème Hugo « synthese »
Palette de marque + système de 4 phylum + mode daltonien (CUD).
Source : PSI_brand_spec_design (spécification de marque v1).
════════════════════════════════════════════════════════════ */
/* ── Tokens de base — mode clair (ivoire / encre) ── */
:root {
--bg: #f6f5f1;
--surface: #fffef9;
--ink: #14181d;
--ink-soft: #4c545c;
--ink-faint: #868d94;
--line: #e0ddd3;
--line-strong: #c9c5b8;
--accent: #1f4e79; /* bleu d'encre — accent de marque */
--accent-hover: #173a5a;
--accent-soft: #e7edf3;
/* Phylum par défaut (neutre = accent de marque) ; surchargé par [data-phylum] */
--ph: #1f4e79;
--ph-soft: #e7edf3;
--shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05);
--shadow-float: 0 5px 14px rgba(0,0,0,0.10), 0 2px 5px rgba(0,0,0,0.06);
--radius: 12px;
--header-h: 58px;
--font-title: "Archivo Narrow", "Helvetica Neue Condensed Bold", "Arial Narrow", sans-serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--star: #b4681a; /* étoiles = ambre, constant quel que soit le phylum */
}
/* ── Tokens de base — mode sombre ── */
[data-theme="dark"] {
--bg: #0f1216;
--surface: #171b21;
--ink: #eef0f2;
--ink-soft: #a7afb8;
--ink-faint: #6d757e;
--line: #282e36;
--line-strong: #39414b;
--accent: #5b9bd5;
--accent-hover: #7db0de;
--accent-soft: #1a2634;
--ph: #5b9bd5;
--ph-soft: #1a2634;
--shadow: 0 1px 3px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.4);
--shadow-float: 0 5px 14px rgba(0,0,0,0.5), 0 2px 5px rgba(0,0,0,0.3);
--star: #d69a52;
}
/* ════════════════════════════════════════════════════════════
SYSTÈME DE PHYLUM — palette standard
La couleur découle du frontmatter `phylum` (data-phylum),
plus aucune injection de CSS par note.
════════════════════════════════════════════════════════════ */
[data-phylum="formel"] { --ph:#1d5aa0; --ph-soft:#e6eef7; }
[data-phylum="vivant"] { --ph:#2e8b4e; --ph-soft:#e7f3ec; }
[data-phylum="applique"] { --ph:#0e8fa8; --ph-soft:#e2f2f5; }
[data-phylum="humain"] { --ph:#b4681a; --ph-soft:#f6ecdf; }
[data-theme="dark"] [data-phylum="formel"] { --ph:#5b9bd5; --ph-soft:#16273a; }
[data-theme="dark"] [data-phylum="vivant"] { --ph:#5fbe7d; --ph-soft:#16301f; }
[data-theme="dark"] [data-phylum="applique"] { --ph:#3fc0d4; --ph-soft:#123033; }
[data-theme="dark"] [data-phylum="humain"] { --ph:#d69a52; --ph-soft:#302516; }
/* ── Palette daltonien (CUD) — activée par [data-palette="cud"] sur ──
Optimisée pour rester distinguable sous deutéranopie, protanopie et
tritanopie (proche d'Okabe-Ito). Le cyan « applique » devient violet. */
[data-palette="cud"] [data-phylum="formel"] { --ph:#004c97; --ph-soft:#e4ecf5; }
[data-palette="cud"] [data-phylum="vivant"] { --ph:#3ca35b; --ph-soft:#e7f3ec; }
[data-palette="cud"] [data-phylum="applique"] { --ph:#9970ab; --ph-soft:#efe9f2; }
[data-palette="cud"] [data-phylum="humain"] { --ph:#d55e00; --ph-soft:#f8e6da; }
[data-palette="cud"][data-theme="dark"] [data-phylum="formel"],
[data-palette="cud"] [data-theme="dark"] [data-phylum="formel"] { --ph:#5b9bd5; --ph-soft:#16273a; }
[data-palette="cud"][data-theme="dark"] [data-phylum="vivant"],
[data-palette="cud"] [data-theme="dark"] [data-phylum="vivant"] { --ph:#6fc07f; --ph-soft:#16301f; }
[data-palette="cud"][data-theme="dark"] [data-phylum="applique"],
[data-palette="cud"] [data-theme="dark"] [data-phylum="applique"] { --ph:#c79fdb; --ph-soft:#241a30; }
[data-palette="cud"][data-theme="dark"] [data-phylum="humain"],
[data-palette="cud"] [data-theme="dark"] [data-phylum="humain"] { --ph:#f08a3c; --ph-soft:#302516; }
/* Libellé public du phylum : le titre lui-même porte le sous-titre pédagogique
au survol de sa zone. Le title natif reste présent en repli navigateur. */
.phylum-label {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
width: fit-content;
padding: 4px 9px;
border: 1px solid color-mix(in srgb, var(--ph) 32%, transparent);
border-radius: 999px;
background: var(--ph-soft);
color: var(--ph);
font-weight: 700;
line-height: 1.18;
cursor: help;
vertical-align: middle;
}
.phylum-label-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--ph);
flex: 0 0 auto;
}
.phylum-label-name {
min-width: 0;
overflow-wrap: anywhere;
}
.phylum-label::after {
content: attr(data-tooltip);
position: absolute;
left: 0;
bottom: calc(100% + 8px);
z-index: 500;
width: max-content;
max-width: min(280px, 82vw);
padding: 7px 10px;
border: 1px solid var(--line-strong);
border-radius: 7px;
background: var(--ink);
color: var(--bg);
box-shadow: var(--shadow-float);
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0;
line-height: 1.35;
white-space: normal;
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity 0.12s, transform 0.12s, visibility 0.12s;
pointer-events: none;
}
.phylum-label:hover::after,
.phylum-label:focus-visible::after {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.phylum-label:focus-visible {
outline: 2px solid var(--ph);
outline-offset: 2px;
}
.phylum-label-card {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.035em;
}
.phylum-label-hero {
font-size: 0.9rem;
}
.phylum-label-demo,
.phylum-label-landing,
.phylum-label-editorial {
font-size: inherit;
}
/* ════════════════════════════════════════════════════════════
BASE
════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--ink);
font-size: 16px;
line-height: 1.6;
transition: background 0.3s, color 0.3s;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
/* ── Header ── */
.site-header {
position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--line); z-index: 100; transition: background 0.3s;
}
.header-inner {
max-width: 1100px; margin: 0 auto; padding: 0 20px;
display: flex; align-items: center; gap: 24px; height: var(--header-h);
}
.site-logo {
display: flex; align-items: center; gap: 9px;
font-family: var(--font-title); font-size: 1.1rem; font-weight: 700;
color: var(--ink); text-decoration: none; flex-shrink: 0; letter-spacing: 0;
}
.site-logo:hover { text-decoration: none; }
.logo-mark { width: 26px; height: 26px; flex: none; }
.site-nav { display: flex; gap: 4px; flex: 1; }
.nav-link {
padding: 6px 12px; border-radius: 7px; font-size: 0.9rem;
color: var(--ink-soft); transition: background 0.15s, color 0.15s;
}
.nav-link:hover, .nav-link.active {
background: var(--accent-soft); color: var(--accent); text-decoration: none;
}
.header-actions { display: flex; align-items: center; gap: 8px; }
.nav-toggle { display: none; }
/* Sélecteur de langue */
.lang-selector { position: relative; }
.lang-current {
background: none; border: 1px solid var(--line-strong); cursor: pointer;
color: var(--ink-soft); padding: 4px 10px; border-radius: 7px;
font-size: 0.82rem; font-weight: 600; display: flex; align-items: center; gap: 4px;
transition: background 0.15s, color 0.15s;
}
.lang-current:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.lang-menu {
position: absolute; top: calc(100% + 6px); right: 0;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow);
min-width: 160px; overflow: hidden; z-index: 200; list-style: none; padding: 0;
}
.lang-option { display: block; padding: 9px 14px; font-size: 0.85rem; color: var(--ink); transition: background 0.12s; }
.lang-option:hover { background: var(--accent-soft); text-decoration: none; }
.lang-option.active { color: var(--accent); font-weight: 600; }
/* Boutons d'action (thème + palette daltonien) */
.icon-btn {
background: none; border: 1px solid var(--line-strong); cursor: pointer; color: var(--ink-soft);
padding: 5px 8px; border-radius: 7px; display: flex; align-items: center;
transition: background 0.15s, color 0.15s; font-size: 0.95rem;
}
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.icon-btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.theme-toggle .icon-dark { display: none; }
[data-theme="dark"] .theme-toggle .icon-light { display: none; }
[data-theme="dark"] .theme-toggle .icon-dark { display: inline; }
/* ── Main ── */
.site-main { padding-top: calc(var(--header-h) + 32px); padding-bottom: 64px; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
/* ════════════════════════════════════════════════════════════
HERO / CATALOGUE (page liste)
════════════════════════════════════════════════════════════ */
.hero { text-align: center; padding: 40px 0 28px; }
.hero-title {
font-family: var(--font-title); font-size: 3.2rem;
font-weight: 700; letter-spacing: 0; color: var(--ink); margin-bottom: 12px;
}
.hero-subtitle { font-size: 1.05rem; color: var(--ink-soft); max-width: 620px; margin: 0 auto; }
.hero-stats {
display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
margin-top: 14px; font-size: 0.85rem; color: var(--ink-soft);
}
.hero-stats strong { color: var(--accent); }
.stat-sep { color: var(--line-strong); }
/* ── Recherche : uniquement le catalogue des syntheses ── */
.catalogue-search { position: relative; z-index: 30; margin: 2px 0 26px; }
.search-bar { max-width: 720px; margin: 0 auto; }
#search {
position: relative;
}
/* ── LA GÉOMÉTRIE DU CHAMP PASSE PAR L'ÉCHELLE, PAS PAR DES SURCHARGES ──────
⚠ HISTORIQUE — 14.08.2026. Ce raisonnement portait sur le widget Pagefind et
sa variable `--pagefind-ui-scale`, retirés ce jour. Il est conservé parce que
sa LEÇON vaut pour tout widget tiers : régler une géométrie par la variable
d'échelle que le composant expose, plutôt que par cinq surcharges qui se
contredisent. Le champ actuel, servi par FTS5, est dimensionné en clair
ci-dessous — il n'y a plus d'échelle à régler.
Corrigé le 05.08.2026, sur constat d'Olivier : « le champ est trop large,
l'icône loupe se superpose au texte, et il ne se plie pas à la CSS globale ».
CE QUI SE PASSAIT, mesuré sur `pagefind-ui.css` du bundle installé :
Pagefind dessine sa loupe en `::before` SUR LE FORMULAIRE — 18×18 px,
à gauche=20, haut=23 — et réserve la place dans le CHAMP :
`padding: 0 70px 0 54px`. Le texte commence donc à 54 px, la loupe
s'arrête à 38. Cohérent.
Notre surcharge imposait `padding: 11px 42px 11px 14px`. Le texte
commençait à 14 px, sous une loupe qui court de 20 à 38 :
DIX-HUIT PIXELS DE RECOUVREMENT — exactement le symptôme.
`min-height: 46px` ne servait à rien : Pagefind pose `height: 64px`, et
`min-height` ne remplace pas `height`. Le champ restait haut de 64 px avec
un texte de 15 px — d'où l'impression de démesure. `font-weight: 700`
survivait aussi, le texte de recherche était en gras.
POURQUOI L'ÉCHELLE ET NON CINQ SURCHARGES. `--pagefind-ui-scale` est la
variable que Pagefind expose exactement pour cela : hauteur, marges, taille
de la loupe, position de la loupe et corps du texte en dérivent tous par
`calc()`. Une seule valeur, et la géométrie reste cohérente PAR
CONSTRUCTION — y compris le centrage vertical de l'icône, qu'un réglage à la
main casse à la première retouche de hauteur.
À 0,72 : champ 46 px, texte à 39 px, loupe de 14 à 27 px — 11,5 px de
dégagement —, corps 15 px, icône centrée. C'est la hauteur que la surcharge
visait sans l'atteindre.
PORTÉE AU FORMULAIRE, PAS À `#search` : le tiroir de résultats est un frère
du formulaire, et nos propres règles le dimensionnent déjà. L'y soumettre
rétrécirait ce que nous avons réglé ailleurs.
CE QUI RESTE SURCHARGÉ : les couleurs, la bordure, l'ombre, la police et la
graisse — la charte. Pas les dimensions. */
#search .recherche__form {
position: relative;
}
#search .recherche__search-input {
/* L'APPARENCE NATIVE EST DÉSARMÉE. `type="search"` déclenche le rendu WebKit :
coins en pilule, hauteur imposée, bouton d'effacement propriétaire — et la
règle ci-dessous n'était plus appliquée. Constaté le 09.08.2026 : le champ
paraissait arrondi, petit et décentré alors que rien ne le demandait. */
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
width: 100%;
padding: 12px 14px;
font-size: 1rem;
line-height: 1.3;
border: 1px solid var(--line-strong);
border-radius: 4px;
/* `background-color` et non le raccourci `background` : celui-ci remet
`background-image` à `none`, ce qui n'a pas d'effet ici mais efface en
silence toute décoration qu'une version future poserait sur le champ. */
background-color: var(--surface);
color: var(--ink);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
font-family: var(--font-body);
/* Pagefind met le texte de recherche en gras (700). Une saisie n'est pas un
titre. */
font-weight: 500;
}
#search .recherche__search-input:focus {
border-color: var(--accent);
outline: 2px solid color-mix(in srgb, var(--accent) 24%, transparent);
outline-offset: 1px;
}
#search .recherche__search-clear,
#search .recherche__search-input::placeholder { color: var(--ink-faint); }
#search .recherche__drawer {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
z-index: 80;
max-height: min(66vh, 620px);
overflow-y: auto;
border: 1px solid var(--line-strong);
border-radius: 8px;
background: var(--surface) !important;
opacity: 1;
isolation: isolate;
box-shadow: var(--shadow-float);
}
#search .recherche__results-area,
#search .recherche__results,
#search .recherche__message { background: var(--surface) !important; }
#search .recherche__message {
padding: 14px 16px;
color: var(--ink-soft);
font-family: var(--font-body);
font-size: 0.88rem;
}
/* 09.08.2026 — LA LIGNE ENTIÈRE EST LE LIEN, demande d'Olivier. `site.js` bâtit
désormais le bloc comme une ANCRE et non comme un `div` : d'où `display:
block`, sans lequel la zone cliquable se réduirait au texte, et l'annulation
du soulignement et de la couleur de lien — le titre et l'extrait portent les
leurs. */
#search .recherche__result {
display: block;
margin: 0;
padding: 15px 16px;
border-top: 1px solid var(--line);
background: var(--surface) !important;
color: inherit;
text-decoration: none;
cursor: pointer;
}
#search .recherche__result:first-child { border-top: 0; }
/* Survol et sélection au clavier partagent le même rendu : le lecteur qui passe
de la souris aux flèches ne change pas de repère. `--actif` est posée par
`site.js`, qui écrit aussi `aria-selected` et `aria-activedescendant`. */
#search .recherche__result:hover,
#search .recherche__result--actif { background: var(--accent-soft) !important; }
#search .recherche__result--actif { outline: 2px solid var(--accent); outline-offset: -2px; }
#search .recherche__compteur {
position: sticky;
top: 0;
z-index: 1;
padding: 6px 12px 6px 16px;
border-bottom: 1px solid var(--line);
background: var(--surface);
color: var(--ink-faint);
font-family: var(--font-body);
font-size: 0.78rem;
text-align: right;
}
/* Le titre est maintenant un `span` dans l'ancre — imbriquer deux ancres est
invalide et les navigateurs défont l'imbrication en silence. La classe ne
change pas : toute la mise en forme la vise. */
#search .recherche__result-link {
display: block;
color: var(--ink);
font-family: var(--font-title);
font-size: 1.08rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1.2;
}
#search .recherche__result:hover .recherche__result-link,
#search .recherche__result--actif .recherche__result-link { color: var(--accent); }
#search .recherche__result-excerpt { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.5; }
#search .recherche__result-excerpt mark { background: var(--accent-soft); color: var(--ink); padding: 0 2px; }
#search .recherche__button {
margin: 12px 16px 16px;
border: 1px solid var(--line-strong);
border-radius: 7px;
background: var(--surface);
color: var(--accent);
font-family: var(--font-body);
font-size: 0.86rem;
font-weight: 600;
}
#search .recherche__button:hover { border-color: var(--accent); background: var(--accent-soft); }
/* ── Filtres ── */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
.filter-label { font-size: 0.85rem; color: var(--ink-soft); font-weight: 500; }
.filter-btn {
background: var(--accent-soft); border: 0;
border-radius: 4px; padding: 2px 8px; font-size: 0.72rem;
line-height: 1.35; cursor: pointer; color: var(--accent); transition: opacity 0.15s;
}
.filter-btn:hover, .filter-btn.active { background: var(--accent); color: #fff; text-decoration: none; }
/* ── Barre de résultats et tri ── */
.results-bar {
display: flex; justify-content: space-between; align-items: center;
margin: 12px 0 16px; padding: 8px 0; border-bottom: 1px solid var(--line);
}
.results-count { font-size: 0.82rem; color: var(--ink-soft); font-weight: 500; }
.sort-controls { display: flex; gap: 6px; }
.sort-btn {
background: var(--surface); border: 1px solid var(--line);
color: var(--ink-soft); font-size: 0.78rem; padding: 4px 10px;
border-radius: 6px; cursor: pointer; transition: all 0.15s;
}
.sort-btn.active, .sort-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
/* ════════════════════════════════════════════════════════════
GRILLE + CARTE DE TUIT
Le filet supérieur (6px) + la pastille pleine portent le signal
de phylum ; la couleur seule ne porte jamais l'information.
════════════════════════════════════════════════════════════ */
.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.note-card {
background: var(--surface); border-radius: var(--radius);
border-top: 6px solid var(--ph);
box-shadow: var(--shadow); overflow: visible;
transition: transform 0.2s, box-shadow 0.2s;
display: flex; flex-direction: column;
}
.note-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
.card-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; border-radius: var(--radius) var(--radius) 0 0; }
.card-thumb-placeholder {
width: 100%; aspect-ratio: 16/9;
background: linear-gradient(135deg, var(--ph-soft) 0%, var(--line) 100%);
display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--ph);
border-radius: var(--radius) var(--radius) 0 0;
}
.card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-meta-top { display: flex; justify-content: space-between; align-items: center; }
.card-classifiers { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.card-domain {
font-size: 0.72rem; font-weight: 700; color: var(--ink-soft);
text-transform: uppercase; letter-spacing: 0.04em;
display: inline-flex; align-items: center; gap: 6px;
}
.card-lang {
font-size: 0.7rem; background: var(--ph-soft); color: var(--ph);
padding: 2px 7px; border-radius: 4px; font-weight: 600;
}
.card-title { font-family: var(--font-title); font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.card-title a { color: var(--ink); }
.card-title a:hover { color: var(--ph); text-decoration: none; }
/* 12.08.2026 — LA DURÉE DE LA VIDÉO PASSE SOUS LA DATE (demande d'Olivier).
`align-items` passe de `center` à `flex-start` : la colonne de droite compte
maintenant deux lignes, et un centrage vertical ferait descendre l'auteur
entre la date et la durée au lieu de le laisser sur la ligne de la date. */
.card-author-row { display: flex; justify-content: space-between; align-items: flex-start; font-size: 0.82rem; color: var(--ink-soft); }
.card-date-col { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.card-duree { font-size: 0.76rem; color: var(--ink-soft); opacity: 0.8; }
.card-author { font-weight: 500; }
.card-stars { font-size: 0.9rem; display: flex; align-items: center; gap: 3px; }
.star.filled { color: var(--star); }
.star.empty { color: var(--line-strong); }
.card-note-num { font-size: 0.75rem; color: var(--ink-soft); margin-left: 4px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
/* 10.08.2026 — UNE SEULE RÈGLE POUR LES DEUX EMPLACEMENTS : le tag sur une
carte et le mot-clé sur une fiche. Les deux déclarations étaient identiques
au caractère près et vivaient à quatre-vingts lignes d'écart — la prochaine
retouche n'en aurait touché qu'une, et les deux familles auraient divergé
sans qu'aucune erreur ne soit levée. C'est l'objet même du chantier C.
PLUS DE RÈGLE `:hover` : ce ne sont plus des liens. Un retour au survol
promettrait un clic qui ne fait rien — et sur une carte, il ferait même
croire que le tag ouvre autre chose que la fiche. */
.card-tag, .keyword-pill {
font-size: 0.72rem; background: var(--ph-soft); color: var(--ph);
padding: 2px 8px; border-radius: 4px;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .note-card { animation: fadeIn 0.3s ease both; } }
/* ── Pagination JS ── */
.js-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 40px; flex-wrap: wrap; }
.pag-btn {
min-width: 38px; height: 38px; padding: 0 10px; border-radius: 7px; font-size: 0.88rem; cursor: pointer;
border: 1px solid var(--line); background: var(--surface); color: var(--ink);
transition: background 0.15s, color 0.15s; display: inline-flex; align-items: center; justify-content: center;
}
.pag-btn:hover:not(.pag-disabled):not(.pag-active) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pag-active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; cursor: default; }
.pag-disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.pag-ellipsis { padding: 0 4px; color: var(--ink-soft); font-size: 0.88rem; display: inline-flex; align-items: center; }
/* ════════════════════════════════════════════════════════════
PAGE DE NOTE (single) — rendu depuis le frontmatter Markdown
Coloration par --ph (phylum de la note, posé sur .note-single).
════════════════════════════════════════════════════════════ */
.note-single { max-width: 820px; margin: 0 auto; }
.note-hero { display: flex; flex-direction: column; gap: 18px; margin-bottom: 32px; }
.note-hero-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.note-hero h1 { font-family: var(--font-title); font-size: 2.4rem; font-weight: 700; line-height: 1.15; letter-spacing: 0; }
.note-byline { color: var(--ink-soft); font-size: 1rem; }
.note-byline strong { color: var(--ph); }
.note-phylum { margin-top: 10px; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
font-size: 0.8rem; background: var(--ph-soft); color: var(--ph);
padding: 4px 11px; border-radius: 20px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px;
}
/* Pie-charts de score */
.pie-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 8px; }
.pie-item { text-align: center; }
.pie-label { font-size: 0.75rem; color: var(--ink-soft); margin-top: 4px; }
/* Bandeau des langues disponibles pour une note. Volontairement neutre : le
phylum commun classe le contenu, tandis que ce bandeau décrit seulement les
traductions disponibles. */
.lang-availability {
display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
margin: 4px 0 4px; padding: 8px 12px; border-radius: var(--radius);
background: var(--surface-soft, var(--accent-soft)); font-size: 0.82rem;
}
.lang-avail-label { color: var(--ink-soft); font-weight: 600; margin-right: 2px; }
.lang-avail-pill {
padding: 3px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 500;
background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink);
}
.lang-avail-current { color: var(--ink-soft); }
.lang-avail-current em { font-style: normal; opacity: 0.75; }
/* La couleur du PHYLUM, pas l'accent de marque : sur une fiche, tout le
code couleur découle de data-phylum — le bandeau de langues détonnait en
bleu sur une fiche orange (revue d'Olivier, 04.08.2026). Le repli sur
--accent couvre tout contexte hors fiche. */
.lang-avail-link { color: var(--ph, var(--accent)); text-decoration: none; transition: background 0.15s, color 0.15s; }
.lang-avail-link:hover { background: var(--ph, var(--accent)); color: #fff; text-decoration: none; }
/* Sections de contenu */
.note-section { font-family: var(--font-title); font-weight: 700; font-size: 1.4rem; margin: 32px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--ph); letter-spacing: 0; }
.note-card-block {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: 20px 22px; box-shadow: var(--shadow); line-height: 1.7;
}
.note-card-block p { margin-bottom: 12px; }
.note-card-block p:last-child { margin-bottom: 0; }
.note-card-block a { color: var(--ph); }
/* Badge discret de nombre de mots, en fin de section (Résumé, Évaluation
critique, Apport & Nouveautés). Volontairement très atténué : c'est une
information secondaire, pas un élément de mise en avant. */
.word-count-badge {
text-align: right; font-size: 0.72rem; color: var(--ink-soft); opacity: 0.65;
margin: 4px 2px 0 0; font-style: italic;
}
.keywords { display: flex; flex-wrap: wrap; gap: 5px; }
/* L'aspect de `.keyword-pill` est déclaré AVEC `.card-tag`, section « Cartes » :
une seule règle pour les deux emplacements (chantier C, 10.08.2026). */
.moments { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.moments li a { display: flex; gap: 10px; align-items: baseline; color: var(--ink); }
.moments li a:hover { text-decoration: none; color: var(--ph); }
.timestamp { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ph); font-weight: 500; flex: none; }
.sources-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.sources-list li { padding-left: 16px; position: relative; }
.sources-list li::before { content: "→"; position: absolute; left: 0; color: var(--ph); }
.card-apport { background: var(--ph-soft); border-left: 3px solid var(--ph); border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 22px; line-height: 1.7; }
.card-apport a { color: var(--ph); font-weight: 500; }
/* Radar récapitulatif */
.radar-section { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; margin: 32px 0; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.radar-svg-wrap { flex: 0 0 210px; width: 210px; }
.radar-legend { flex: 1 1 290px; min-width: 0; margin-top: 12px; padding-left: 20px; border-left: 1px solid var(--line); }
.radar-legend h3 { font-family: var(--font-title); font-weight: 700; font-size: 1.1rem; margin-bottom: 6px; }
.radar-interp { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 12px; }
.reliability-badge { display: inline-flex; align-items: baseline; gap: 5px; font-size: 0.85rem; color: var(--ink-soft); }
.reliability-badge .big { font-family: var(--font-title); font-weight: 700; font-size: 1.8rem; color: var(--ph); }
.comments-trend { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-strong); color: var(--ink-soft); font-size: 0.85rem; line-height: 1.4; }
/* ── Pages editoriales simples ── */
.page-single { max-width: 760px; margin: 0 auto; }
.page-content {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: clamp(24px, 5vw, 42px); box-shadow: var(--shadow);
}
.page-content h2 {
font-family: var(--font-title); font-size: 1.45rem; margin: 28px 0 10px; color: var(--ink);
}
.page-content h2:first-child { margin-top: 0; }
.page-content p, .page-content li { color: var(--ink-soft); margin-bottom: 12px; }
.page-content ul, .page-content ol { padding-left: 22px; margin-bottom: 18px; }
.page-content strong { color: var(--ink); }
.page-content a { color: var(--accent); font-weight: 600; }
/* ════════════════════════════════════════════════════════════
TAXONOMIE + TAGS
════════════════════════════════════════════════════════════ */
/* LISTES DE TERMES EN COLONNES, non plus en nuage de plaques.
Décision d'Olivier, 04.08.2026 : « alignées en colonnes, par ordre
alphabétique, sans la décoration plaque — cela ajouterait de la lisibilité et
du sérieux ».
`columns` plutôt qu'une grille : le flux reste alphabétique EN COLONNE — A en
haut à gauche, la suite dessous — au lieu de courir de gauche à droite ligne
par ligne, ce qui rend une liste alphabétique pénible à parcourir.
Largeur minimale de colonne, pas nombre fixe : sur 229 domaines dont certains
portent des noms longs, un nombre fixe couperait les libellés. */
.taxonomy-grid {
columns: 4 15rem;
column-gap: 2rem;
margin-top: 24px;
}
.taxonomy-term {
/* `break-inside` : une entrée ne doit jamais être coupée entre deux colonnes. */
display: flex;
justify-content: space-between;
align-items: baseline;
gap: .5rem;
break-inside: avoid;
padding: 3px 0;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid transparent;
}
/* Le fond doux rend le survol visible EN MODE CLAIR aussi : l'accent clair
(#1f4e79) est trop proche de l'encre pour porter seul le signal — revue
d'Olivier, 04.08.2026, « ok en sombre, pas en clair ». */
/* Même traitement décisif que .tag-item : le fond doux restait discret. */
.taxonomy-term:hover { color: #fff; background: var(--accent);
text-decoration: none;
border-bottom-color: transparent; }
.taxonomy-term:hover .term-count { color: #fff; opacity: .85; }
/* Un cran plus grand qu'en plaque : le texte est désormais seul à porter la
lisibilité, sans fond coloré pour le détacher. */
.term-name { font-weight: 500; font-size: 0.85rem; }
/* ══ LES FONDS CLOS — 20260827, demande d'Olivier ═══════════════════════════
Une chaîne dont la fiche la plus récente a plus d'un an se distingue en
bleu, avec sa mention au survol (attribut `title`, posé par le gabarit
depuis i18n — jamais écrit dans le gabarit).
⚠ SÉLECTION PAR ATTRIBUT, comme `[data-phylum]` ailleurs dans ce fichier :
l'état d'une entrée est une donnée, pas une variante de nom de classe.
`var(--accent)` et NON une couleur écrite : c'est le bleu d'encre #1F4E79
en thème clair et le bleu clair #5B9BD5 en sombre. Une valeur en dur aurait
été juste sur un thème et fausse sur l'autre.
⚠ LA COULEUR N'EST PAS LE SEUL SIGNAL : le décompte prend la même teinte et
l'entrée porte un pointeur d'aide. Distinguer par la seule couleur exclut
qui ne la perçoit pas. */
.taxonomy-term[data-clos] { color: var(--accent); cursor: help; }
.taxonomy-term[data-clos] .term-count { color: var(--accent); opacity: .7; }
.taxonomy-term[data-clos]:hover, .taxonomy-term[data-clos]:hover .term-count { color: #fff; }
/* Le décompte s'efface : c'est un repère, pas l'information principale. */
.term-count { color: var(--ink-faint); font-size: 0.72rem; font-weight: 600;
font-variant-numeric: tabular-nums; }
.tags-controls { margin: 20px 0 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tags-sort-bar { display: flex; gap: 6px; }
.tags-letter-filter { display: flex; flex-wrap: wrap; gap: 4px; }
.letter-btn { background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); font-size: 0.75rem; padding: 3px 8px; border-radius: 5px; cursor: pointer; transition: all 0.12s; }
.letter-btn.active, .letter-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
/* Même traitement que les listes de termes — voir `.taxonomy-grid`. */
.tags-cloud { columns: 4 15rem; column-gap: 2rem; margin-top: 12px; }
/* `display:flex` et non `inline` : le tri par JavaScript remet les éléments
dans l'ordre du flux, et un élément en ligne s'y replacerait au fil du texte
au lieu de tenir sa ligne. */
.tag-item { display: flex; justify-content: space-between; align-items: baseline;
gap: .5rem; break-inside: avoid; padding: 3px 0; color: var(--ink);
font-size: 0.85rem; text-decoration: none;
border-bottom: 1px solid transparent; }
/* Survol DÉCISIF — fond plein, encre blanche : l'accent clair (#1f4e79)
posé sur l'encre noire était à peine visible en mode clair, et la page
Tags emploie .tag-item, PAS .taxonomy-term — le premier correctif visait
la mauvaise classe (revue d'Olivier, 04.08.2026, seconde passe). */
.tag-item:hover { background: var(--accent); color: #fff; text-decoration: none;
border-bottom-color: transparent; }
.tag-item:hover .tag-count { color: #fff; opacity: .85; }
.tag-count { font-size: 0.72rem; color: var(--ink-faint); font-weight: 600;
font-variant-numeric: tabular-nums; margin-left: 0;
vertical-align: baseline; top: 0; }
/* ── Footer du site ── */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: 24px 0; margin-top: 64px; }
.footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-left p { font-size: 0.82rem; color: var(--ink-soft); }
.footer-sub { font-size: 0.75rem !important; }
.footer-right { display: flex; gap: 16px; }
.footer-link { font-size: 0.82rem; color: var(--ink-soft); display: flex; align-items: center; gap: 5px; }
.footer-link:hover { color: var(--accent); text-decoration: none; }
/* ── Responsive ── */
@media (max-width: 768px) {
.hero-title { font-size: 2.2rem; }
.note-hero h1 { font-size: 1.7rem; }
.header-inner { gap: 10px; }
.site-nav {
display: none;
position: absolute;
top: var(--header-h);
left: 12px;
right: 12px;
padding: 8px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--surface);
box-shadow: var(--shadow-float);
}
.site-nav.is-open { display: grid; }
.site-nav .nav-link { padding: 9px 12px; }
.nav-toggle { display: flex; }
.site-logo { margin-right: auto; }
.notes-grid { grid-template-columns: 1fr; }
.footer-inner { flex-direction: column; }
.radar-section { flex-direction: column; gap: 16px; }
.radar-legend { flex-basis: auto; width: 100%; margin-top: 0; padding: 16px 0 0; border-top: 1px solid var(--line); border-left: 0; }
}
/* ════════════════════════════════════════════════════════════
PAGE D'ACCUEIL / LANDING (layouts/index.html)
Bandes pleine largeur (.lp-band) débordant du .container ;
contenu contraint par .lp-wrap.
════════════════════════════════════════════════════════════ */
.lp-band { width: 100vw; margin-left: calc(50% - 50vw); padding: 72px 0; }
.lp-band.raised { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lp-wrap { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.lp-eyebrow { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.lp-kicker { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.lp-title { font-family: var(--font-title); font-weight: 700; font-size: 2.4rem; letter-spacing: 0; margin-bottom: 10px; }
.lp-sub { color: var(--ink-soft); max-width: 62ch; }
/* Hero */
.lp-hero { position: relative; padding: 84px 0 64px; overflow: hidden; }
.lp-hero-grid { position: absolute; inset: 0; background-image:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 44px 44px; opacity: 0.5; mask-image: radial-gradient(ellipse 80% 60% at 30% 0%, #000 30%, transparent 75%); }
.lp-hero-inner { position: relative; max-width: 780px; }
.lp-h1 { font-family: var(--font-title); font-weight: 700; font-size: 4rem; line-height: 1.05; letter-spacing: 0; margin: 14px 0 18px; }
.lp-lede { font-size: 1.3rem; color: var(--ink-soft); max-width: 60ch; line-height: 1.55; }
.lp-lede .term { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--accent-soft); }
.lp-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 9px; font-weight: 600; font-size: 0.95rem; transition: all 0.15s; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); text-decoration: none; }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
/* Formule 1h → 5min */
.lp-formula { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 44px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.f-item { flex: 1; min-width: 180px; }
.f-big { display: block; font-family: var(--font-title); font-weight: 700; font-size: 1.2rem; }
.f-lbl { display: block; font-size: 0.85rem; color: var(--ink-faint); margin-top: 2px; }
.f-arrow { font-size: 1.6rem; color: var(--accent); }
/* Définition du tuit */
.tuit-def { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center; }
@media (max-width: 820px) { .tuit-def { grid-template-columns: 1fr; gap: 28px; } }
.tuit-text .lead { font-size: 1.15rem; color: var(--ink); margin-bottom: 14px; }
.tuit-text p { color: var(--ink-soft); margin-bottom: 14px; }
.etymo { background: var(--ph-soft, var(--accent-soft)); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 14px 16px; margin-top: 8px; }
.etymo-tag { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); display: block; margin-bottom: 4px; }
/* Carte de tuit (démo landing) */
.tuit-card { background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--ph); border-radius: var(--radius); box-shadow: var(--shadow-float); overflow: visible; }
.tc-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tc-classifiers { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.tc-domain { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.tc-lang { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-faint); }
.tc-body { padding: 16px; }
.tc-title { font-family: var(--font-title); font-weight: 700; font-size: 1.15rem; line-height: 1.25; margin-bottom: 4px; }
.tc-author { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 14px; }
.tc-scores { display: flex; gap: 14px; margin-bottom: 14px; }
.tc-score { text-align: center; }
.tc-score .ring { width: 40px; height: 40px; border-radius: 50%; background: var(--ph); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-weight: 700; }
.tc-score .sl { font-size: 0.68rem; color: var(--ink-faint); margin-top: 3px; }
.tc-foot { display: flex; align-items: center; gap: 12px; font-size: 0.8rem; color: var(--ink-soft); padding-top: 12px; border-top: 1px solid var(--line); }
.tc-stars { color: var(--star); }
/* Quatre piliers */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; margin-top: 28px; }
.pillar { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.p-num { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent); font-weight: 600; }
.pillar h3 { font-family: var(--font-title); font-weight: 700; margin: 8px 0 6px; }
.pillar p { font-size: 0.9rem; color: var(--ink-soft); }
/* Carte du savoir — 4 phylum */
.phylum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 28px; }
.phy { padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--ph); }
.phy h3 { font-family: var(--font-title); font-weight: 700; color: var(--ph); margin-bottom: 8px; }
.phy-subtitle { font-size: 0.82rem; color: var(--ink-faint); margin-bottom: 10px; font-style: italic; }
.phylum-method-link { margin-top: 12px; color: var(--ink-soft); font-size: 0.9rem; }
.phylum-method-link a { color: var(--accent); font-weight: 600; }
.phy-explain { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 12px; line-height: 1.5; }
.phy-examples { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ph); margin-bottom: 6px; }
.phy ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.phy li { font-size: 0.88rem; color: var(--ink-soft); padding-left: 14px; position: relative; }
.phy li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ph); }
/* Outils */
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 28px; }
.tool { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); position: relative; }
.tool.live { border-color: var(--accent); }
.tool.soon { opacity: 0.72; }
.t-ic { color: var(--accent); margin-bottom: 12px; }
.tool h3 { font-family: var(--font-title); font-weight: 700; margin-bottom: 8px; }
.tool p { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 12px; }
.t-link { font-size: 0.88rem; font-weight: 600; color: var(--accent); }
/* Manifeste */
.manifesto blockquote { font-family: var(--font-title); font-weight: 700; font-size: 2.1rem; line-height: 1.3; letter-spacing: 0; max-width: 22ch; margin: 0 auto; text-align: center; }
@media (max-width: 768px) {
.lp-title { font-size: 1.7rem; }
.lp-h1 { font-size: 2.4rem; }
.lp-lede { font-size: 1.05rem; }
.manifesto blockquote { font-size: 1.5rem; }
}
.m-attrib { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); text-align: center; margin-top: 18px; }
/* Contexte de source (concordantes/discordantes/citées) */
.source-context { color: var(--ink-soft); font-size: 0.9em; }
/* Compte dans les filtres de domaine */
.filter-count { font-size: 0.75em; opacity: 0.6; }
/* Pagination serveur (remplace la pagination JS) */
.server-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 32px 0; }
.server-pagination .pag-btn { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 0.9rem; text-decoration: none; transition: background 0.15s, color 0.15s; }
.server-pagination a.pag-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); text-decoration: none; }
.server-pagination .pag-active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.server-pagination .pag-disabled { opacity: 0.4; cursor: default; }
/* ─────────────────────────────────────────────────────────────────────────
CARTE DE TUIT ENTIÈREMENT CLIQUABLE (stretched link)
Toute la surface de .note-card ouvre la fiche. Le lien du titre (.card-stretch)
est étendu à la carte via un ::after absolu. Les tags restent cliquables
séparément en passant au-dessus (position:relative + z-index).
───────────────────────────────────────────────────────────────────────── */
.note-card { position: relative; }
.card-stretch::after {
content: "";
position: absolute;
inset: 0; /* couvre toute la carte (top/right/bottom/left = 0) */
z-index: 1;
}
.card-stretch { text-decoration: none; color: inherit; }
/* La vignette et le corps ne capturent pas le clic à la place du lien étendu. */
.note-card .card-thumb-link,
.note-card .card-thumb-placeholder { position: relative; z-index: 0; }
/* 10.08.2026 — LES TAGS NE REMONTENT PLUS au-dessus du lien étendu, parce
qu'ils ont cessé d'être des liens (chantier C). Les laisser sur la couche 2
aurait creusé trois zones mortes dans la surface cliquable de chaque carte :
le lecteur qui vise un tag n'aurait rien ouvert du tout. Le phylum reste un
lien et garde sa couche — c'est ce qui justifie la règle, pas l'habitude. */
.note-card .phylum-label { position: relative; z-index: 2; }
/* Retour visuel au survol de la carte entière. */
.note-card:hover { cursor: pointer; }
/* Le domaine, à côté du phylum sur la fiche — un lien, pas une étiquette
morte (demande Olivier, 04.08.2026). */
/* Le domaine, à côté du phylum : MÊME code couleur et MÊME typographie que
l'étiquette de phylum (revue d'Olivier, 04.08.2026) — fond doux, encre et
liseré du phylum, graisse identique. Seul le fond plein au survol dit
« ceci est un lien ». */
.note-domaine { display:inline-flex; align-items:center; margin-left:.55rem;
padding:4px 9px; border:1px solid color-mix(in srgb, var(--ph) 32%, transparent);
border-radius:999px; background:var(--ph-soft); color:var(--ph);
font-weight:700; line-height:1.18; font-size:inherit;
text-decoration:none; vertical-align:middle; }
.note-domaine:hover, .note-domaine:focus-visible {
background:var(--ph); color:#fff; text-decoration:none; }
/* Le classement Thema, à la suite du phylum et du domaine — 10.08.2026.
TROIS AXES SUR UNE LIGNE, DONC TROIS POIDS. Le phylum est plein, le domaine
porte la couleur du phylum ; les plaques Thema restent NEUTRES. Sans cette
gradation la ligne devient un mur de pastilles colorées où plus rien ne
ressort, et c'est le phylum — le classement propre à PSI — qui se perdrait.
La forme reste celle du domaine : même pastille, même hauteur, même
alignement, pour qu'on lise une suite et non trois dispositifs. */
.note-thema { display:inline-flex; align-items:baseline; gap:.34rem;
margin-left:.55rem; padding:4px 9px;
border:1px solid var(--line-strong); border-radius:999px;
background:transparent; color:var(--ink-soft);
font-weight:600; line-height:1.18; font-size:inherit;
text-decoration:none; vertical-align:middle;
/* TRONCATURE, comme les 151 plaques du catalogue — demande d'Olivier,
10.08.2026, la ligne passant sinon sur deux rangs.
LA LIMITE EST MESURÉE, PAS CHOISIE. La colonne de l'article fait 820 px,
même sur un écran de 1 218. L'étiquette de phylum en prend de 230 à 279
selon le phylum, le domaine de 58 (« Biologie ») à 250 (« Sciences de la
Terre & Géographie ») : c'est le domaine qui décide, et il varie du simple
au quadruple. La part des fiches tenant sur UNE ligne a donc été calculée
sur les 131 couples (phylum, domaine) réels, pondérés par leurs 8 216
fiches, avec les polices effectivement appliquées :
10 rem → 95,4 % 12 rem → 45,3 % 14 rem → 20,5 %
11 rem → 85,8 % 13 rem → 36,0 % 15 rem → 12,5 %
Cette limite ne vaut QUE pour la plaque SEULE, qui partage la ligne avec
le phylum et le domaine — le duo descend à la ligne suivante et dispose de
toute la colonne (règle plus bas).
LE PIRE CAS EST RÉEL, PAS THÉORIQUE : les 41 domaines et les 4 phylums ont
été mesurés avec leurs polices, et le couple le plus large qui EXISTE dans
le corpus est « Sciences humaines, sociales & pensée » + « Sciences de la
Terre & Géographie » — 529 px, 7 fiches. Il laisse 273 px, soit 17,1 rem.
16 rem PLUTÔT QUE 17 : à 17 rem la marge serait de 1 px, et un rendu de
police légèrement différent — autre système, autre zoom — ferait passer la
plaque à la ligne. 16 rem laisse 17 px pour deux caractères de moins.
RIEN N'EST PERDU : l'infobulle porte la CHAÎNE ENTIÈRE, du code de tête
au granulaire — donc plus que le libellé coupé. */
max-width:16rem; }
/* LE GROUPE — 10.08.2026, demande d'Olivier.
Une plaque reste sur la ligne du phylum et du domaine ; deux descendent
ENSEMBLE à la ligne suivante, parce qu'elles forment une chaîne — parent
puis enfant — et que la couper entre deux lignes ferait lire deux
classements au lieu d'un.
Le mécanisme tient dans le passage de `inline` à `flex` : un conteneur flex
est de niveau bloc, il commence donc une nouvelle ligne de lui-même. Ni
`
`, ni règle sur ce qui précède. */
.note-thema-groupe { display:inline; }
.note-thema-groupe--duo { display:flex; flex-wrap:wrap; gap:.55rem;
margin-top:.45rem; }
/* SEULES SUR LEUR LIGNE, LES DEUX PLAQUES RESPIRENT. La limite de 17 rem
venait du partage de la ligne avec le phylum et le domaine ; ce partage
n'existe plus ici. La colonne fait 820 px, deux plaques et leur écart
tiennent donc en 24 rem chacune (2 × 384 + 9 = 777 px), ce qui montre une
quarantaine de caractères au lieu de quinze — et le libellé médian en
compte 26. La troncature reste là pour les libellés extrêmes, jusqu'à 88
caractères dans la norme. */
.note-thema-groupe--duo .note-thema { margin-left:0; max-width:24rem; }
/* L'ancêtre est le plus grossier des deux : il s'efface d'un cran, ce qui dit
le sens de lecture sans qu'aucun mot ne l'explique. */
.note-thema--parent { color:var(--ink-faint); border-color:var(--line); }
a.note-thema:hover, a.note-thema:focus-visible {
background:var(--ink-soft); color:var(--surface);
border-color:var(--ink-soft); text-decoration:none; }
/* Repli sur un `thema` scalaire : la plaque s'affiche, elle ne se suit pas.
Le liseré en pointillés le dit sans mot — c'est la convention déjà employée
pour distinguer ce qui n'est pas cliquable. */
.note-thema--inerte { border-style:dashed; cursor:default; }
.note-thema:hover .note-thema-code { color:inherit; opacity:.7; }
/* Le code, en chasse fixe et atténué — MÊME traitement que `.term-code` sur la
page des 1 049. Côte à côte, `UYQ` puis `UYQF` montrent la parenté d'un
coup d'œil, ce que deux libellés seuls ne diraient pas. */
.note-thema-code { font-family:var(--font-mono); font-size:0.72em;
letter-spacing:.02em; opacity:.55;
/* LE CODE NE SE TRONQUE JAMAIS. C'est l'identifiant stable, celui qu'on cite
et qu'on retrouve chez EDItEUR ; un `PSV` coupé en `PS…` désignerait un
AUTRE code de la norme. C'est le libellé qui cède la place. */
flex:0 0 auto; }
/* `min-width:0` est la pièce qui fait fonctionner l'ellipse : sans elle, un
élément flex refuse de descendre sous la taille de son contenu, et le
libellé pousserait la plaque au lieu d'être coupé. */
.note-thema-nom { flex:1 1 auto; min-width:0;
overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
/* `.keyword-plain` A ÉTÉ RETIRÉ le 10.08.2026 (chantier C).
Il distinguait le mot-clé SANS page de tag — neutre, en pointillés — de
celui qui en avait une. Cette distinction n'a plus d'objet : aucun mot-clé
n'est un lien, aucun n'a donc à porter la marque de son absence de lien.
Elle avait sa raison au 04.08.2026, et deux versions (l'opacité .72,
indiscernable en mode sombre, puis les pointillés) ; elle disparaît avec le
mécanisme qu'elle signalait, pas par négligence. */
/* Le code Thema à côté du libellé — 09.08.2026, demande d'Olivier.
Sur la page qui EXPOSE la norme, l'identifiant doit se lire sans survoler :
c'est lui qu'on cite, qu'on retrouve chez EDItEUR, et qui reste stable quand
le libellé est traduit ou révisé.
Il s'efface visuellement — plus petit, en chasse fixe, atténué — pour rester
une référence et non un concurrent du libellé. La chasse fixe parce qu'un
code se lit caractère par caractère : `PBF` n'est pas un mot. */
.term-code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.72em;
font-weight: 400;
opacity: 0.45;
letter-spacing: 0.02em;
}
/* LE CODE EN TÊTE, EN COLONNE — décision d'Olivier du 09.08.2026, après
comparaison des deux formes à l'écran.
POURQUOI EN TÊTE PLUTÔT QU'À LA SUITE. En fin de libellé, le code se
retrouvait à une abscisse différente sur chaque ligne, et passait seul à la
ligne quand le libellé remplissait la sienne — une quinzaine d'entrées sur
1 049. En tête et aligné, il devient un REPÈRE : chercher `PBF` ou voir que
`KC`, `KCK`, `KCVD` forment une branche se fait d'un coup d'œil. Cette page
n'est pas de la prose, c'est un index.
`min-width` en `em` et non en pixels : la colonne suit la taille du texte.
4,6 em couvrent les codes jusqu'à cinq caractères, la longueur maximale
observée dans la norme.
UNE SEULE LIGNE, ET LE RESTE AU SURVOL. Le libellé est tronqué ; l'infobulle
porte le code ET le libellé entier, complément compris. Ce qui est coupé
n'est donc jamais perdu. */
.taxonomy-grid--thema .taxonomy-term {
gap: 0;
align-items: baseline;
}
.taxonomy-grid--thema .term-code {
flex: 0 0 auto;
min-width: 4.6em;
padding-right: .55em;
}
.taxonomy-grid--thema .term-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: .6em;
}
.taxonomy-grid--thema .term-count { flex: 0 0 auto; }
/* ── Les deux filtres du catalogue ──────────────────────────────────────────
09.08.2026, spécification d'Olivier.
MÊME PRÉSENTATION POUR LES DEUX, et la même que la page /thema/ : les 41
domaines de base et les 151 codes étendus sont deux niveaux d'une même
chose, il serait absurde qu'ils se ressemblent moins qu'ils ne se
ressemblent. Trois colonnes ici — la page /thema/ en garde quatre, elle n'a
qu'elles à montrer.
LE BOUTON REMPLACE LE TITRE. Il n'y a plus « Filtrer : Tous » ni « Thema » :
un intitulé qui ne fait rien coûte une ligne pour rien, et « Tous » ne
menait qu'à la page où l'on se trouve déjà. */
.filtres { margin: 0 0 18px; }
/* TROIS PLAQUES CÔTE À CÔTE — 09.08.2026. Elles disent trois profondeurs d'une
même chose ; les mettre en colonne les faisait lire comme trois dispositifs
successifs. `flex-wrap` : sur écran étroit elles s'empilent d'elles-mêmes. */
.filtres-boutons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px;
}
.filtres-boutons .filtre-bascule { flex: 1 1 16rem; width: auto; }
.filtre-bascule {
/* UNE PLAQUE À BORDS CARRÉS, ET LES DEUX DE MÊME TAILLE — 09.08.2026.
`width` fixe et non `min-width` : les deux libellés diffèrent de longueur
(« Cacher les domaines de base » contre « … Thema étendus »), et ils
changent au clic. Sans largeur imposée, la plaque respirerait à chaque
bascule et les deux boutons ne s'aligneraient jamais.
La police est celle des TITRES DE TUIT — `--font-title`, 1.05rem, 700 —
pour que ces commandes aient le même poids que ce qu'elles gouvernent. */
display: inline-flex;
align-items: center;
gap: .5em;
width: 26rem; /* remplacée par `flex` dans `.filtres-boutons` */
max-width: 100%;
box-sizing: border-box;
padding: 9px 14px;
border: 1px solid var(--line-strong);
border-radius: 0; /* bords carrés, demandés */
background: var(--accent-soft);
color: var(--accent);
font-family: var(--font-title);
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
text-align: left;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.filtre-bascule::before {
content: "▾";
font-size: .75em;
transition: transform .15s;
}
/* Le chevron suit l'état RÉEL, lu sur `aria-expanded` — une seule source pour
l'assistance vocale et pour l'œil. */
.filtre-bascule[aria-expanded="false"]::before { transform: rotate(-90deg); }
/* BOUTONS ACTIFS : survol, appui, et focus clavier visible. Sans le dernier,
celui qui navigue au clavier ne sait pas où il est. */
.filtre-bascule:hover { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.filtre-bascule:active { transform: translateY(1px); }
.filtre-bascule:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.taxonomy-grid--filtre {
columns: 3 14rem; /* les domaines de base : trois colonnes */
column-gap: 2rem;
margin-top: 8px;
margin-bottom: 0;
}
.filtre-suite { margin: 10px 0 0; font-size: 0.82rem; }
.filtre-suite a { color: var(--accent); font-weight: 600; }
/* La taille de caractères de la page /thema/, pour les deux listes : c'est le
point 5 de la spécification — un seul corps de texte partout. */
.taxonomy-grid--filtre .term-name { font-weight: 500; font-size: 0.85rem; }
/* Thema en DEUX colonnes — 09.08.2026. Ses libellés portent un code en tête et
sont bien plus longs que ceux des domaines : à trois colonnes, « Affirmation
de soi, moti… » perdait l'essentiel. Deux colonnes rendent une quinzaine de
caractères à chaque ligne. */
.taxonomy-grid--filtre.taxonomy-grid--thema { columns: 2 20rem; }
/* LA TROISIÈME PLAQUE MÈNE AILLEURS, et le dit. Un chevron annonce un pli, une
FLÈCHE annonce un départ : sans cette différence, le lecteur cliquerait en
croyant déplier et quitterait la page. Elle est aussi la seule à ne pas
changer de libellé, puisqu'elle n'a pas d'état. */
.filtre-bascule--depart { text-decoration: none; }
.filtre-bascule--depart::before { content: none; }
.filtre-bascule--depart::after { content: "→"; margin-left: auto; padding-left: .6em; }
/* ── Page Thema granulaire ──────────────────────────────────────────────────
09.08.2026, spécification d'Olivier.
DEUX COLONNES et non quatre. Les libellés portent un code en tête et sont
plus longs que ceux des domaines ; à quatre colonnes, la troncature mangeait
l'essentiel. Deux colonnes rendent près de la moitié de la largeur.
LA DATE EN HAUT À DROITE, discrète. `position: absolute` dans un `hero`
rendu relatif : elle ne doit pas décaler le titre ni prendre une ligne. Sur
écran étroit elle repasse dans le flux, au-dessus — mieux vaut une ligne de
plus qu'un chevauchement.
L'ASTUCE DE RECHERCHE EST UNE LIGNE ÉCRITE, sous le sous-titre. Elle avait
d'abord été mise en infobulle sur le titre ; Olivier l'a écartée après essai,
et il avait raison : une infobulle ne se découvre que par hasard — il faut
savoir qu'il y a quelque chose à survoler pour survoler. */
.hero--thema { position: relative; }
.hero-maj {
position: absolute;
top: 0;
right: 0;
margin: 0;
color: var(--ink-faint);
font-family: var(--font-body);
font-size: 0.72rem;
}
@media (max-width: 700px) {
.hero-maj { position: static; text-align: right; margin-bottom: 6px; }
}
.taxonomy-grid--thema-page { columns: 2 22rem; }
.hero-astuce {
margin: 4px 0 0;
color: var(--ink-faint);
font-family: var(--font-body);
font-size: 0.78rem;
}
/* ══════════════════════════════════════════════════════════════════════════
LA PAGE DE MÉTHODE — /phylums/ · décision d'Olivier, 20260819
══════════════════════════════════════════════════════════════════════════
⚠ TOUT EST PORTÉ PAR `.page-phylums`, ET C'EST LE POINT CENTRAL. Cette page
RÉEMPLOIE les classes de la page d'accueil — `lp-band`, `lp-wrap`,
`lp-kicker`, `lp-title`, `phylum-grid`, `phy`, `pillars`, `tools` — sans en
redéfinir UNE SEULE globalement. Les deux surcharges ci-dessous changeraient
l'accueil si elles n'étaient pas préfixées : `lp-sub` y garde sa mesure de
62ch, et `.phy` ses angles arrondis. Corriger une page ne doit pas en
modifier une autre en silence. */
/* LES PARAGRAPHES EN PLEINE LARGEUR, AU CORPS DU HERO — demande d'Olivier.
MESURÉ sur les 952 px utiles de `.lp-wrap` : la ligne passe de ~125 à ~92
caractères. La typographie de lecture en recommande 65 à 75 — on ne les
atteint pas, mais élargir la colonne SANS agrandir le corps était le pire
des deux réglages : une ligne longue ET petite.
⚠ `:not(.lp-kicker)` N'EST PAS UN ORNEMENT — le kicker est lui aussi un `p`
enfant direct de `.lp-wrap`, et sans cette exclusion il passerait à 1.3rem,
ce qui détruirait la hiérarchie qu'il sert à poser. */
.page-phylums .lp-band > .lp-wrap > p:not(.lp-kicker) {
font-size: 1.3rem; line-height: 1.6; color: var(--ink-soft); max-width: none;
}
.page-phylums .lp-band > .lp-wrap > p:not(.lp-kicker) strong { color: var(--ink); }
/* LES BOÎTES DE PHYLUM À BORDS CARRÉS — demande d'Olivier, 20260819.
La plaque désignée est `.filtre-bascule`, dont la CSS dit « UNE PLAQUE À
BORDS CARRÉS », `border-radius: 0`, décision du 09.08.2026. Ce n'est PAS
`.phylum-label`, l'autre « plaque » : elle vaut 999px, donc PLUS ronde que
ce qu'on corrige, et la demande disait « trop rondes ». */
.page-phylums .phy { border-radius: 0; }
/* LES TROIS PROFONDEURS */
.page-phylums .prof-suite { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.page-phylums .prof {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: 22px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.page-phylums .prof::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); }
/* ⚠ LA POLICE DES TITRES, PAS LA CHASSE FIXE. Dans une monospace, TOUT
caractère occupe la même cellule — y compris U+202F, l'espace fine
insécable que `lang.FormatNumber` produit : « 1 685 » s'y lisait
« 1 685 ». Poser la fine et la rendre en chasse fixe s'annulent. */
.page-phylums .prof .pn {
font-family: var(--font-title); font-size: 2.1rem; font-weight: 700; color: var(--accent);
font-variant-numeric: tabular-nums; line-height: 1; display: block; margin-bottom: .35rem;
}
.page-phylums .prof h3 { font-family: var(--font-title); font-size: 1.05rem; margin: 0 0 .45rem; }
.page-phylums .prof p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-soft); }
.page-phylums .prof .calc { display: block; margin-top: .7rem; font-size: .76rem; color: var(--ink-faint); font-family: var(--font-mono); }
/* LA FIGURE THEMA */
.page-phylums .thema-fig {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: 28px 24px 20px; box-shadow: var(--shadow); margin-top: 26px; text-align: center;
}
.page-phylums .thema-fig figcaption { font-size: .88rem; color: var(--ink-soft); line-height: 1.6; max-width: 62ch; margin: 16px auto 0; text-align: left; }
/* LES CARTES ÉDITORIALES */
.page-phylums .edito { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 26px; }
.page-phylums .edito .e {
background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent);
border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 20px;
}
.page-phylums .edito .e h3 { font-family: var(--font-title); font-size: 1rem; margin: 0 0 .4rem; }
.page-phylums .edito .e p { margin: 0; font-size: .9rem; line-height: 1.58; color: var(--ink-soft); }
/* LES FONDS CLOS */
.page-phylums .clos-band { display: grid; grid-template-columns: auto 1fr; gap: 0 34px; align-items: center; background: var(--accent-soft); border-radius: var(--radius); padding: 26px 30px; margin-top: 24px; }
.page-phylums .clos-band .kpi { text-align: center; }
.page-phylums .clos-band .kpi b { display: block; font-family: var(--font-title); font-size: 2.6rem; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; }
.page-phylums .clos-band .kpi span { font-size: .78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.page-phylums .clos-band p { margin: 0 0 .8rem; line-height: 1.62; color: var(--ink-soft); font-size: 1rem; }
.page-phylums .clos-band p:last-child { margin-bottom: 0; }
/* CE QUE LA MÉTHODE NE GARANTIT PAS — la divergence fr/en */
.page-phylums .ecart { margin-top: 30px; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 24px 26px; background: var(--bg); }
.page-phylums .ecart-lab { font: 600 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 14px; }
.page-phylums .ecart p { line-height: 1.65; color: var(--ink-soft); margin: 0 0 1rem; font-size: 1rem; }
.page-phylums .ecart p:last-child { margin-bottom: 0; }
.page-phylums .ecart strong { color: var(--ink); }
.page-phylums .ecart-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 20px 0 22px; padding: 20px 0; border-block: 1px solid var(--line); }
.page-phylums .ecart-chiffres b { display: block; font-family: var(--font-title); font-size: 1.9rem; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: .4rem; }
.page-phylums .ecart-chiffres span { font-size: .85rem; line-height: 1.5; color: var(--ink-soft); display: block; }
@media (max-width: 820px) {
.page-phylums .prof-suite,
.page-phylums .edito,
.page-phylums .ecart-chiffres { grid-template-columns: 1fr; }
.page-phylums .clos-band { grid-template-columns: 1fr; gap: 18px; }
}
/* ══════════════════════════════════════════════════════════════════════════
LA BANDE « CARTE DU SAVOIR » MÈNE À LA MÉTHODE — Olivier, 20260819
══════════════════════════════════════════════════════════════════════════
La page de méthode existait et n'était atteinte que par une phrase en petits
caractères sous la grille. Le titre devient un lien, et la question devient
une promesse et un bouton. */
/* LE TITRE-LIEN. ⚠ IL NE DOIT PAS RESSEMBLER À UN LIEN DE CORPS DE TEXTE :
souligné et coloré, il casserait la ligne de titres de la page. Il hérite
donc la couleur du titre, et ne se signale qu'au survol et au focus — plus
un chevron, qui dit « ça mène ailleurs » sans rien peindre. */
.lp-title-lien { color: inherit; text-decoration: none; }
/* ⚠ LE CHEVRON EST DESSINÉ, PLUS UN CARACTÈRE — corrigé le 20260819, Olivier
l'ayant vu partiellement masqué.
La première version employait `content: " ›"`, soit U+203A — un GUILLEMET
simple chevron, pas une flèche — rendu dans `--font-title`, qu'AUCUN
`@font-face` ne charge : le site compte sur « Archivo Narrow » installée et
retombe sinon sur Arial Narrow, puis sur une sans-serif quelconque. Trois
fontes possibles, trois dessins possibles pour ce glyphe, et un
`font-weight: 400` qui en demandait une quatrième graisse.
Un tracé SVG ne dépend d'aucune fonte : même géométrie partout, sur toutes
les machines. `currentColor` et `em` le font suivre la couleur et la taille
du titre sans qu'on ait à les répéter. */
.lp-title-chevron {
width: .62em; height: .62em; margin-left: .28em;
vertical-align: baseline; color: var(--accent);
transition: transform .15s; overflow: visible;
}
.lp-title-lien:hover, .lp-title-lien:focus-visible { color: var(--accent); text-decoration: none; }
.lp-title-lien:hover .lp-title-chevron { transform: translateX(4px); }
.lp-title-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 3px; }
/* LE BLOC DE MÉTHODE — le signal de couleur, le bouton, puis les deux nombres.
⚠ `align-items: flex-start` et non `center` : le bouton doit s'aligner sur
la colonne de texte, pas flotter au milieu d'une bande de 1 000 px. */
.lp-methode { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 22px; }
.lp-signal { color: var(--ink-faint); font-size: .92rem; margin: 0; }
.lp-methode-sub {
margin: 0; font-family: var(--font-mono); font-size: .82rem; color: var(--ink-faint);
font-variant-numeric: tabular-nums;
}
/* LES PILULES DES CARTES DE PHYLUM PRENNENT LA COURBURE DU BOUTON — Olivier,
20260819.
`.phylum-label` vaut `border-radius: 999px`, une pilule pleine. Dans les
quatre cartes de la bande carte-du-savoir, elle voisine désormais le bouton
de méthode, qui vaut 9px : deux courbures très différentes à quelques
centimètres l'une de l'autre.
⚠ PORTÉE VOLONTAIREMENT ÉTROITE — `.phy .phylum-label`, soit les pilules
DANS les cartes de phylum, et elles seules. La même classe habille la carte
de démonstration au-dessus (`variant demo`), les cartes de tuit du catalogue
(`card`) et l'en-tête d'une fiche (`hero`) : les toucher toutes changerait
des pages qu'on ne m'a pas demandé de changer.
9px est repris de `.btn` — non recopié à la main : si le bouton change un
jour, cette ligne devra suivre, et ce commentaire est là pour le dire. */
.phy .phylum-label { border-radius: 9px; }
/* ══ LE 42e DOMAINE — 20260826, décision d'Olivier ════════════════════════
« Prospective & Science-fiction » est le 42e domaine. Trois variantes de
texte vivent dans le DOM, une seule s'affiche, tirée au chargement.
⚠ LE REPLI SANS JAVASCRIPT EST LA PREMIÈRE RÈGLE, PAS UNE PRÉCAUTION :
`:first-child` montre la variante A par défaut. `.c42--js` n'est posée QUE
si le script s'est exécuté — c'est seulement alors que le tirage prend la
main. Un bloc vide serait pire qu'un bloc figé. */
.c42 {
max-width: 620px;
margin: 22px auto 0;
padding: 14px 18px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
}
.c42-var { display: none; align-items: center; gap: 14px; text-align: left; }
.c42-var:first-child { display: flex; }
.c42--js .c42-var:first-child { display: none; }
/* ⚠ LA SPÉCIFICITÉ, ET LE RENDU SEUL L'A MONTRÉE : `:first-child` est une
pseudo-classe, elle COMPTE. `.c42--js .c42-var:first-child` pèse 0,3,0 et
battait `.c42--js .c42-var--vue` à 0,2,0 — quand le tirage désignait la
variante A, le bloc restait VIDE, une fois sur trois. La classe est donc
redoublée pour peser autant, et elle vient après. */
.c42--js .c42-var.c42-var--vue { display: flex; }
/* ⚠ DEUX BOÎTES, PAS UNE — les deux dessins n'ont pas les mêmes proportions :
2,21 pour le « 42 » avec sa galaxie, 0,45 pour le linge, étroit et haut. Une
boîte unique aurait laissé l'un ou l'autre flotter dans du vide. Elles
partagent la HAUTEUR pour que les variantes s'alignent.
⚠ ET DEUX FICHIERS PAR DESSIN, UN PAR THÈME : une image matricielle ne se
recolore pas comme le faisait `currentColor` sur les SVG. `background-image`
plutôt que `![]()
` — le navigateur ne télécharge QUE celle qui s'applique. */
.c42-glyph { display: block; background-repeat: no-repeat;
background-position: center; background-size: contain; }
.c42-glyph--42 { width: 102px; height: 46px; flex: 0 0 102px;
background-image: url("/img/c42-42-clair.png"); }
/* ⚠ LE LINGE EST PLUS HAUT QUE LE « 42 », ET C'EST MESURÉ. À hauteur égale
(46 px) sa largeur tombait à 21 px : il se lisait comme une BARRE VERTICALE,
bandes et franges perdues. Cinq tailles ont été comparées au rendu — il
devient lisible à 29 et franc à 32×72. Une seule variante s'affichant à la
fois, la hauteur supplémentaire ne décale rien pour le lecteur. */
.c42-glyph--linge { width: 32px; height: 72px; flex: 0 0 32px;
background-image: url("/img/c42-linge-clair.png"); }
[data-theme="dark"] .c42-glyph--42 { background-image: url("/img/c42-42-sombre.png"); }
[data-theme="dark"] .c42-glyph--linge { background-image: url("/img/c42-linge-sombre.png"); }
.c42-texte { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); font-style: italic; }
/* LES GUILLEMETS SUIVENT LA LANGUE, ILS NE SONT PAS ÉCRITS DANS LE TEXTE.
`` laisse la feuille de style choisir : chevrons et espaces insécables en
français, guillemets anglais en anglais. Deux niveaux sont déclarés — la
variante B cite Douglas Adams À L'INTÉRIEUR de sa propre citation, et un
emboîtement de chevrons dans des chevrons est une faute de typographie. */
.c42-texte q { quotes: "\00ab\00a0" "\00a0\00bb" "\201c" "\201d"; }
[lang="en"] .c42-texte q { quotes: "\201c" "\201d" "\2018" "\2019"; }
@media (max-width: 560px) {
.c42 { margin-top: 18px; }
.c42-var { flex-direction: column; text-align: center; gap: 10px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
PAGE « AJOUTER » — Olivier, 20260901 : même style qu'accueil et phylums.
⚠ TOUT EST SCOPÉ SOUS `.page-ajouter`, exactement comme `.page-phylums`.
La page réemploie `lp-band`, `lp-wrap`, `lp-kicker`, `lp-title`, `btn` et
`f-item` — qui servent aussi à l'accueil. Rien ici ne doit la déplacer d'un
pixel : aucune règle ne cible un composant partagé sans le préfixe.
⚠ Aucune couleur en dur : uniquement les jetons du site, qui portent déjà
le thème sombre et les palettes pour daltonismes.
═════════════════════════════════════════════════════════════════════════ */
/* ── Le formulaire ──────────────────────────────────────────────────────── */
.page-ajouter .form-demande {
display: grid;
gap: 22px;
max-width: 640px;
margin: 28px 0 8px;
}
.page-ajouter .fd-champ { display: grid; gap: 7px; }
.page-ajouter .fd-champ label {
font-family: var(--font-title);
font-weight: 600;
color: var(--ink);
}
.page-ajouter .fd-champ input,
.page-ajouter .fd-champ select {
font: inherit;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
padding: 11px 13px;
width: 100%;
}
.page-ajouter .fd-champ input:focus,
.page-ajouter .fd-champ select:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
border-color: var(--accent);
}
/* Le champ prérempli par l'extension se signale : le lecteur doit voir que
la valeur ne vient pas de lui, et pouvoir la corriger. */
.page-ajouter .fd-champ input[data-prerempli] { background: var(--accent-soft); }
.page-ajouter .fd-aide { color: var(--ink-soft); font-size: .92rem; margin: 0; }
.page-ajouter .fd-aide code,
.page-ajouter .mode-explain code { font-family: var(--font-mono); font-size: .88em; }
.page-ajouter .fd-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.page-ajouter .fd-etat { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.page-ajouter .fd-etat.ok { color: var(--accent); font-weight: 600; }
/* ⚠ Le refus ne se dit PAS par la couleur seule — le texte porte toujours le
motif. Une couleur d'erreur qui serait le seul signal exclurait les
lecteurs qui ne la distinguent pas. */
.page-ajouter .fd-etat.ko { color: var(--ink); font-weight: 600; }
.page-ajouter .fd-apres { color: var(--ink-soft); max-width: 640px; }
/* ── Les modes ──────────────────────────────────────────────────────────── */
.page-ajouter .modes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 18px;
margin-top: 26px;
}
.page-ajouter .mode {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
padding: 18px 20px;
}
.page-ajouter .mode h3 { margin: 0 0 4px; font-size: 1rem; }
.page-ajouter .mode h3 code {
font-family: var(--font-mono);
color: var(--accent);
font-size: 1em;
}
.page-ajouter .mode-portee {
margin: 0 0 8px;
color: var(--ink-soft);
font-size: .9rem;
text-transform: uppercase;
letter-spacing: .04em;
}
.page-ajouter .mode-explain { margin: 0; }
/* ── Les étapes ─────────────────────────────────────────────────────────── */
.page-ajouter .etapes {
list-style: none;
counter-reset: none;
padding: 0;
margin: 26px 0 0;
display: grid;
gap: 20px;
}
.page-ajouter .etapes > li {
border-left: 3px solid var(--accent);
padding-left: 18px;
}
.page-ajouter .etapes h3 { margin: 0 0 5px; font-size: 1.02rem; }
.page-ajouter .etapes p { margin: 0; color: var(--ink-soft); }
/* ── Données : ce qu'on garde / ce qu'on ne garde pas ───────────────────── */
.page-ajouter .donnees-duo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 26px;
}
.page-ajouter .dn {
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px 22px;
background: var(--surface);
}
.page-ajouter .dn h3 { margin: 0 0 10px; font-size: 1rem; }
.page-ajouter .dn ul { margin: 0; padding-left: 20px; }
.page-ajouter .dn li { margin: 6px 0; }
/* La distinction se dit par le TRAIT et par le titre, pas par la couleur
seule — même raison que pour l'état du formulaire. */
.page-ajouter .dn-oui { border-left: 3px solid var(--accent); }
.page-ajouter .dn-non { border-left: 3px solid var(--ink-faint); }
/* ── Limites ────────────────────────────────────────────────────────────── */
.page-ajouter .limites { margin: 22px 0 0; padding-left: 20px; }
.page-ajouter .limites li { margin: 10px 0; }
/* ═══ LE TITRE DANS LA LANGUE DU LECTEUR — Olivier, 20260903 ═══════════════
⭐ LA LIGNE S AFFICHE TOUJOURS — decision d Olivier, 20260903, prise en voyant
le rendu telephone : « le rendu telephone est bien meilleur que l infobulle,
donc nous allons l adopter pour tous les cas ».
⚠⚠ ELLE NE S AFFICHE PAS POUR AUTANT PARTOUT : le gabarit ne l emet QUE si
`titre_localise` est renseigne, et `markdown_writer.titre_dans_la_langue` le
laisse VIDE quand la video parle deja la langue de la page. La condition
n est pas dans le CSS, elle est dans la DONNEE — c est ce qui la rend juste
par langue sans une seule regle de plus.
⚠ AUCUNE HAUTEUR N EST A CONTRAINDRE : `.note-card` est un flex en colonne,
`.card-body` porte `flex: 1`, et `.notes-grid` n impose pas de
`grid-auto-rows`. Les rangees se dimensionnent sur la plaque la plus haute,
donc la grille grandit d elle-meme.
L attribut `title` reste sur le lien et sur le h1 : il ne coute rien et rend
le texte entier au survol quand la ligne est longue. */
.card-title-loc,
.note-title-loc {
display: block;
margin: 4px 0 0;
font-size: .85em;
font-style: italic;
color: var(--ink-soft, var(--ink-faint));
line-height: 1.35;
}