/* ============================================================================
RESYNC DE LA CHARTE · 31.08.2026 · relevé et outil dans
`_charte/synchroniser_charte.py` (miroir) et ce fichier (produits, à la
main · voir le pourquoi dans son en-tête). Ancienne version conservée dans
`ARCHIVES/palambur-20260831-avant_resync_charte_site.css`.
CE QUI A BOUGÉ · le correctif d'un vrai bug de police (unicode-range
dupliqué entre `latin` et `latin-ext`, réparé côté site le 11.08.2026, six
`@font-face` ici en héritaient encore) · onze jetons de couleur ajoutés
(`--pal-navy-light`, `--pal-red-deep`, `--pal-green-deep`,
`--pal-green-light`, `--pal-red-ink[-dark]`, `--pal-green-ink[-dark]`,
`--fg-success`, `--rule-field`) · quatre règles de base additives (le mot
mis en avant dans un titre, `.lean`, l'héritage de police des champs de
formulaire, le plancher 16px anti-zoom iOS).
CE QUI N'A PAS BOUGÉ, ET POURQUOI · `.btn-primary`, `.btn-secondary`,
`.ligne-rouge[-top]`, `.hairline-top/-bottom` ont été RETIRÉS de la
feuille du site (remplacés par `tokens/boutons.css`, proposition 2 du
23.08.2026) mais restent ICI, intacts · un grep daté du 31.08.2026 les
trouve posés dans les pages vivantes des cinq produits (`apercu_jomini`,
`jomini_hors_ligne`, `apercu_corvisart`, `apercu_jacquard`,
`apercu_meneval`, `apercu_chaptal`, `outil_chaptal`…). Les retirer d'ici
sans retoucher ces pages les aurait cassées · ce chantier ne touche pas
aux maquettes (arbitrage du 31.08.2026). `--fg-signal` reste pointé sur
`--pal-red-strong` et non sur le nouveau `--pal-red-ink` du site, pour la
même raison de prudence visuelle · voir la note à côté du jeton.
CE QUI EST NEUF À CÔTÉ · `_charte/boutons.css` et `_charte/sombre.css`,
copies fraîches du miroir, prêtes pour la prochaine passe de maquettes.
Aucune page ne les lie encore · ce chantier ne pose pas de .
============================================================================ */
/* ============================================================
PALAMBUR · Fonts
Space Grotesk (titres) · Barlow (texte) · JetBrains Mono (labels).
Les trois familles sont sous licence SIL Open Font License 1.1,
qui autorise explicitement l'auto-hébergement.
Auto-hébergées dans ./fonts. Avant, un `@import` vers
fonts.googleapis.com partait à chaque ouverture d'une maquette :
une requête vers un serveur américain, donc une adresse IP suisse
transmise hors de Suisse avant tout consentement. C'est
exactement ce que Palambur reproche aux outils qu'elle remplace,
et ce qu'une Content-Security-Policy sans `connect-src` externe
bloquerait de toute façon sur la page produit Jomini.
Chemins volontairement relatifs (`fonts/…`, pas `/fonts/…`) :
ces maquettes s'ouvrent par double-clic, en file://, sans serveur.
Un chemin absolu pointerait vers la racine du disque.
Graisses retenues — mesurées dans Chrome via `document.fonts` sur
les trois aperçus produits, pas devinées en lisant le CSS :
Space Grotesk 400 · 500 · 600
Barlow 400 · 400 italique · 500 · 600
JetBrains Mono 400 · 500
Écartées car jamais peintes : Space Grotesk 700, Barlow 300 et
700, Barlow 500 italique. Le token `--w-light` (300) n'est
utilisé nulle part ; s'il le devient, il faudra ajouter la fonte.
Space Grotesk et JetBrains Mono sont des fontes variables : un
seul fichier couvre toutes leurs graisses (d'où `font-weight`
donné en intervalle). Barlow n'existe qu'en statique, donc un
fichier par graisse.
Deux sous-ensembles par fonte, départagés par `unicode-range` :
`latin` suffit au français (les accents vivent sous U+00FF), et
`latin-ext` n'est téléchargé que si un caractère l'exige.
`font-display: swap` : le texte s'affiche tout de suite dans la
police de repli, puis bascule — jamais de blanc invisible.
============================================================ */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('/fonts/space-grotesk-var-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('/fonts/space-grotesk-var-latin-ext.woff2') format('woff2');
unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Barlow';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/barlow-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Barlow';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/barlow-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Barlow';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/fonts/barlow-400-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Barlow';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/fonts/barlow-400-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Barlow';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/barlow-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Barlow';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/barlow-500-latin-ext.woff2') format('woff2');
unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Barlow';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/fonts/barlow-600-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Barlow';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/fonts/barlow-600-latin-ext.woff2') format('woff2');
unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/fonts/jetbrains-mono-var-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ============================================================
PALAMBUR · Colors
Palette ultra-restreinte : un fond, une encre, un accent,
une signature rouge. Le reste est exceptionnel.
Base palette + semantic aliases. Use the aliases in code.
============================================================ */
:root {
/* === Surfaces ============================================ */
--pal-canvas: #F8FAFC; /* main off-white canvas */
--pal-canvas-pure: #FFFFFF; /* card / utility surfaces */
--pal-ink: #0A192F; /* deep navy — dark surface / heavy text */
--pal-slate: #1E293B; /* slate alt dark surface */
--pal-slate-soft: #334155; /* secondary text on light */
/* === Brand blues ========================================= */
--pal-navy: #1E3A8A; /* Palambur Blue — wordmark + accent */
--pal-navy-deep: #0F2466; /* hover / active on navy */
--pal-navy-light: #2D52B8; /* RESYNC 31.08.2026 · le site l a ajoute pour
le degrade du bouton principal (proposition
2, boutons.css) · absent d ici jusqu ici,
aucune page produit ne le referencait */
/* === Signature =========================================== */
--pal-red: #E53935; /* lignes rouges Palambur */
--pal-red-strong: #DC2626; /* danger / strong emphasis */
--pal-red-deep: #A3171A; /* RESYNC 31.08.2026 · idem, degrade des
boutons rouges engageants */
/* === Semantic accents ==================================== */
--pal-yellow: #FEEB47; /* rare pop — dark surface only */
/* ------------------------------------------------------------------
24.08.2026 · DEUX JETONS QUI EXISTAIENT SANS ÊTRE DÉCLARÉS.
Les poses de Chaptal (poses/poser_micro.py, poser_catalogue.py,
poser_echelle_micro.py, poser_souslabel.py…) écrivent ces deux noms
dans les pages depuis des semaines · aucune charte ne les portait,
et le contrôle 8 du dépôt les voyait comme des jetons inconnus.
Un jeton qui vit dans les pages mais dans aucune charte est un jeton
que personne ne peut recalibrer · on ne sait même pas qu'il existe.
------------------------------------------------------------------ */
--pal-encre-2: #334155; /* même valeur que pal-slate-soft · le texte
secondaire des pages produit le nomme ainsi */
--pal-micro: #5D6B81; /* même valeur que pal-muted · la micro-légende
des échelles et des sous-labels */
--pal-green: #059669; /* success / conformity — TRAIT, jamais texte */
--pal-amber: #D97706; /* warning — TRAIT, jamais texte */
--pal-green-deep: #03553D; /* RESYNC 31.08.2026 · degrade du bouton
vert (proposition 2, boutons.css) */
--pal-green-light: #0A8E64; /* RESYNC 31.08.2026 · idem */
/* === Le rouge et le vert d'ECRITURE du site, RESYNC 31.08.2026 ==========
Le site resout le meme probleme que le bloc « pour ECRIRE » ci-dessous
(--pal-green-strong, --pal-amber-strong, --pal-red-on-dark, poses ici le
2026-08-12) mais sous d'autres noms et avec d'autres valeurs, calibrees
contre SON pire fond reel a lui (la couche organique, voir l en-tete de
colors.css). Les deux solutions ont grandi separement sans se voir · les
produits n'ont pas de couche organique, et rien ne prouve encore que ces
encres-ci rendraient mieux ici que les encres deja en service. On les
AJOUTE donc sans rien retirer ni repointer · aucune regle de ce fichier
ne les cite encore. Le choix entre les deux familles se tranche a la
prochaine passe de maquettes (hors perimetre de ce chantier), page par
page, a l oeil et au contrastometre · pas ici, en silence. */
--pal-red-ink: #D01F1B; /* texte rouge sur fond clair · site, 20.08.2026 */
--pal-red-ink-dark: #E95854; /* texte rouge sur fond sombre · site, 20.08.2026 */
--pal-green-ink: #047955; /* texte vert sur fond clair · site, 20.08.2026 */
--pal-green-ink-dark:#10B981; /* texte vert sur fond sombre · site, 20.08.2026 */
/* === Les mêmes signaux, mais pour ÉCRIRE =================
REMONTÉS ICI LE 2026-08-12, lot M31 · ils n'ont pas été inventés ce
jour-là. Le lot M17 les avait déjà arrêtés, mesurés, et commentés · mais
il les avait écrits dans `apercu.css`. Une page qui ne lie pas cette
feuille-là ne pouvait pas les atteindre, et le tableau de bord, qui porte
son style en ligne, ne la lie pas. Il a donc réécrit du vert de trait
dans son texte, à 3,77, sans rien enfreindre de ce qu'il pouvait voir.
UN JETON RANGÉ DANS UNE FEUILLE QUE TOUTES LES PAGES NE LISENT PAS
N'EST PAS UNE RÈGLE DE LA MAISON · C'EST UNE RÈGLE DE CETTE FEUILLE,
ET LES AUTRES PAGES SONT EN FAUTE SANS AVOIR ÉTÉ PRÉVENUES.
Ils tiennent maintenant au même rang que `--pal-red-strong`, qui, lui,
avait toujours été ici · et c'est précisément pourquoi le rouge était le
seul des trois à être correct. */
--pal-green-strong: #047857; /* vert pour ÉCRIRE · 5,48 sur blanc, 5,24 sur canvas */
--pal-amber-strong: #B45309; /* ambre pour ÉCRIRE · 5,02 sur blanc, 4,80 sur canvas */
/* === Et le rouge qui écrit SUR DU SOMBRE ==================
AJOUTÉ LE 2026-08-12, lot M31. Les trois encres ci-dessus sont FONCÉES ·
c'est ce qui les rend lisibles sur du blanc, et c'est exactement ce qui les
rend illisibles sur du bleu nuit. `--pal-red-strong` rendait 3,03 sur
`--pal-slate` dans l'aperçu de Méneval.
Ce jeton n'est pas né d'un besoin, il est né d'un CONSTAT · la valeur
#FCA5A5 était déjà écrite à la main, en dur, dans le générateur du tableau
de bord, pour ce même usage exact. Une couleur qu'on redécouvre au deuxième
endroit n'est pas un cas particulier · c'est un jeton qui n'avait pas encore
de nom, et deux copies qui n'ont pas encore divergé.
UNE VALEUR ÉCRITE DEUX FOIS À LA MAIN N'EST PAS UNE RÉPÉTITION ·
C'EST UNE RÈGLE QUI ATTEND QU'ON LA NOMME, ET QUI DIVERGERA AVANT. */
--pal-red-on-dark: #FCA5A5; /* rouge pour ÉCRIRE sur sombre · 7,71 sur slate, 9,28 sur ink */
/* === Le bleu vif du bouton de lancement · HORS PALETTE DE MARQUE ========
RATTRAPÉ LE 2026-09-01, lot M37 (RAP-0022, Méneval) · posés dans
colors.css le 01.09.2026 au soir (choix de Victor sur références,
boutons.css § SIXIÈME TYPE porte l'histoire), ces quatre jetons
n'avaient jamais rejoint CETTE feuille · toute page produit qui pose
`.btn-lancer` sans les déclarer elle-même rendait un bouton au fond
transparent (`getComputedStyle` renvoyait une chaîne vide pour
`--bl-vif`, vérifié sur apercu_meneval.html et maquette_meneval.html).
Un filet local avait été posé dans maquette_meneval.html en attendant ·
à retirer maintenant que la source est réparée ici.
Valeurs recopiées telles quelles depuis colors.css, qui fait foi. */
--bl-vif: #2E6FE0; /* générique (lancer un outil) · 4.70:1 sous blanc */
--bl-vif-p1: #4470DC; /* palier Courant · 4.57:1 · le plus clair qui passe */
--bl-vif-p2: #2456C8; /* palier Étendu · 6.48:1 */
--bl-vif-p3: #123E9E; /* palier Complet · 9.51:1 · rejoint la profondeur du navy */
/* === Neutrals ============================================ */
--pal-hairline: #E2E8F0; /* default hairline on light */
--pal-hairline-dark: #1E293B; /* hairline on dark surface */
--pal-muted: #5D6B81; /* metadata / footers on light · aligné le 20.08.2026, le site publié fait foi */
--pal-muted-dark: #94A3B8; /* metadata / footers on dark */
--pal-text-on-dark: #CBD5E1; /* body on dark surface */
/* === Semantic aliases (use these in code, not raw palette) */
--fg1: var(--pal-ink); /* primary text on light */
--fg2: var(--pal-slate); /* secondary text on light */
--fg3: var(--pal-muted); /* tertiary / labels */
--fg-accent: var(--pal-navy); /* emphasized text */
/* CORRIGÉ LE 2026-08-12 · cet alias de TEXTE pointait sur --pal-red, qui est
la couleur du TRAIT. Il rendait 4,04 sur le canvas · sous le seuil, et
partout où la charte est bien suivie, puisque c'est le jeton qu'elle
désigne. Le défaut n'était pas dans les pages, il était ici.
RESYNC 31.08.2026 · LAISSÉ TEL QUEL, ET C'EST UN ÉCART CONNU. Le site
pointe désormais son propre --fg-signal sur --pal-red-ink (#D01F1B), pas
sur son --pal-red-strong. Ici, --fg-signal reste sur --pal-red-strong ·
changer la cible changerait la couleur RENDUE du kicker rouge sur les six
produits sans qu'aucune page ne l'ait demandé, et sans preuve visuelle
que --pal-red-ink rend mieux SUR CE FOND-CI (le canvas des produits n'a
pas la couche organique du site, voir colors.css). Reste ouvert pour la
prochaine passe de maquettes. */
--fg-signal: var(--pal-red-strong); /* signature annotation · 4,83 */
/* RESYNC 31.08.2026 · alias absent d ici jusqu ici · le site le pointe sur
son --pal-green-ink. Ajouté pour que le vocabulaire Lean (.lean, ajouté
plus bas) ait un jeton à citer sans improviser une valeur en dur. */
--fg-success: var(--pal-green-ink);
--bg1: var(--pal-canvas);
--bg2: var(--pal-canvas-pure);
--bg-dark: var(--pal-ink);
--bg-dark2: var(--pal-slate);
--rule: var(--pal-hairline);
--rule-dark: var(--pal-hairline-dark);
--rule-field: var(--pal-muted); /* RESYNC 31.08.2026 · absent d ici, ajouté par le site pour le filet des champs de formulaire */
}
/* ============================================================
PALAMBUR · Typography
Space Grotesk (heads) · Barlow (body) · JetBrains Mono (code).
Two scales: web/print base, and presentation (1920×1080).
============================================================ */
:root {
/* === Families =========================================== */
--font-head: 'Space Grotesk', sans-serif;
--font-body: 'Barlow', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* === Weights ============================================ */
--w-light: 300; /* @kind font */
--w-reg: 400; /* @kind font */
--w-med: 500; /* @kind font */
--w-semi: 600; /* @kind font */
--w-bold: 700; /* @kind font */
/* === Web / print scale (px for clarity) ================= */
--type-display: 64px; /* hero web headline */
--type-h1: 48px;
--type-h2: 36px;
--type-h3: 28px;
--type-lead-web: 22px;
--type-body-web: 18px;
--type-meta-web: 14px;
/* === Presentation scale (1920×1080) ===================== */
--type-title-xxl: 168px; /* hero cover */
--type-title-xl: 120px; /* slide section breaks */
--type-section: 104px; /* chapter titles */
--type-title: 84px; /* standard slide title */
--type-stat: 280px; /* massive statistic (−40 %) */
--type-stat-md: 200px; /* medium statistic */
--type-lead: 32px; /* lead / chapeau */
--type-body: 26px; /* body */
--type-kicker: 26px; /* red italic annotation (signature) */
--type-small: 24px; /* absolute floor in presentation */
--type-meta: 24px; /* slide header / footer */
/* === Letter-spacing ===================================== */
--tracking-display: -0.025em; /* large headlines @kind other */
--tracking-tight: -0.015em; /* standard headlines @kind other */
--tracking-normal: 0; /* @kind other */
--tracking-loose: 0.10em; /* @kind other */
--tracking-label: 0.18em; /* uppercase kicker labels @kind other */
/* === Line-heights ======================================= */
--lh-display: 0.96; /* @kind other */
--lh-title: 1.02; /* @kind other */
--lh-lead: 1.4; /* @kind other */
--lh-body: 1.55; /* @kind other */
}
/* ============================================================
PALAMBUR · Spacing, shapes, elevation, motion
4px base grid. Radius 0 everywhere except the pill CTA.
Palambur uses NO shadows — the system is flat.
============================================================ */
:root {
/* === Spacing scale (4px base) =========================== */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10:128px;
/* === Slide-specific spacing (1920×1080) ================= */
--pad-x: 110px; /* horizontal frame padding */
--pad-y: 60px; /* vertical frame padding */
--gap-block: 48px; /* gap between blocks */
--gap-item: 16px; /* gap intra-block */
/* === Shapes ============================================= */
--radius-none: 0px;
--radius-pill: 9999px; /* the ONLY non-zero radius — primary CTA */
/* RATTRAPÉ LE 01.09.2026 · le site a sanctionné une DEUXIÈME exception
(`--radius-card`/`--radius-card-sm`, `src/styles/tokens/spacing.css`)
pour les surfaces-cartes (flip-cards des outils, paliers de réserve),
jamais recopiée ici · `palambur.css` reste hors de la synchronisation
automatique (§ en tête de fichier), donc rien ne l'aurait signalé tout
seul. Posé ici pour que Jomini (pupitre, § plus bas) puisse s'inspirer
des écrans d'applications Apple et Claude (Victor, 01.09.2026) sans
inventer un troisième rayon à côté du site. */
--radius-card: 20px;
--radius-card-sm: 12px;
/* === Le volet « application », RESYNC 18.09.2026 =========================
Lot C11 de `1300_PRODUITS_IA/05_CHAPTAL/RAP-0024_PLAN_TECHNIQUE_CHAPTAL.md`
· mesuré par `05_CHAPTAL/bancs/banc_chaptal.mjs`, Chaptal portait 24
ombres portées et 42 coins arrondis hors pilule non déclarés ici, tous
codés en dur dans `outil_chaptal.html`. Victor a tranché entre deux
options le 18.09.2026, en chat · « soit Chaptal rentre dans la charte
document et perd ses reliefs, soit la charte gagne un volet
"application" que les cinq outils partageront ». **Victor a choisi
l'option 2 · « option 2 »** · Chaptal garde son rendu actuel, et les
valeurs qu'il porte déjà rejoignent la charte au lieu d'être réinventées
à la prochaine page qui en aura besoin.
Ce ne sont PAS de nouveaux choix de design · ce sont les valeurs déjà
peintes par Chaptal depuis plusieurs lots, RELEVÉES à l'octet et NOMMÉES,
pour que plus aucune page ne les invente en dur. Nommées `--radius-app-*`
et `--shadow-app-*`, pas `--chaptal-*` · un futur outil qui a besoin
d'un relief les reprend sans en inventer un sixième.
Aucun radius ni aucune ombre au-delà de ce jeu fini n'est autorisé sans
repasser par ce fichier · c'est tout le sens de l'arbitrage. */
/* -- Coins arrondis « application », les 12 valeurs mesurées dans
outil_chaptal.html le 18.09.2026 (42 déclarations, 12 valeurs uniques,
hors la pilule et hors le bandeau commun, qui reste hors de ce volet
puisqu'il a déjà sa propre source, `_charte/bandeau.css`). -- */
--radius-app-2: 2px;
--radius-app-3: 3px;
--radius-app-4: 4px;
--radius-app-5: 5px;
--radius-app-7: 7px;
--radius-app-8: 8px;
--radius-app-9: 9px;
--radius-app-10: 10px;
--radius-app-12: 12px;
--radius-app-14: 14px;
--radius-app-16: 16px;
--radius-app-onglet: 11px 0 0 11px; /* le bouton « rouvrir », arrondi à gauche seulement */
/* === Elevation ========================================== */
/* Palambur is flat. This token exists only to lock that in. */
--shadow-none: none;
/* -- Ombres « application », les 12 valeurs mesurées dans
outil_chaptal.html le 18.09.2026 (15 déclarations propres à Chaptal, hors
les 9 qui vivent dans le bandeau commun incorporé, gardées chez lui).
Nommées par leur rôle, pas par leur valeur · une ombre se choisit pour ce
qu'elle soulève, pas pour son rayon de flou. -- */
--shadow-app-flottant: 0 6px 20px -10px rgba(10,25,47,.35); /* barre de recherche flottante */
--shadow-app-popover-sm: 0 14px 38px -18px rgba(10,25,47,.42); /* petit popover */
--shadow-app-popover-lg: 0 26px 60px -26px rgba(10,25,47,.5); /* grand popover / panneau */
--shadow-app-panneau: 0 12px 34px -18px rgba(10,25,47,.4); /* panneau moyen (le plus courant) */
--shadow-app-tiroir: -22px 0 54px -34px rgba(10,25,47,.55);/* tiroir latéral */
--shadow-app-anneau-navy: 0 0 0 .18em rgba(30,58,138,.28); /* anneau de focus, navy */
--shadow-app-anneau-fin: 0 0 0 1px rgba(15,36,102,.22); /* filet d un pixel */
--shadow-app-anneau-bleu: 0 0 0 2px rgba(37,99,235,.14); /* anneau de focus, bleu */
--shadow-app-carte-verrou: 0 16px 40px -12px rgba(15,36,102,.22);/* carte d abonnement verrouillée */
--shadow-app-bouton-flottant:0 12px 30px -16px rgba(10,25,47,.5); /* bouton qui rouvre un panneau */
--shadow-app-creux: inset 0 0 0 2.4px currentColor; /* état coché d une icône creuse */
--shadow-app-anneau-bandeau: 0 0 0 .18em color-mix(in srgb, var(--bd-encre) 28%, transparent); /* anneau calé sur l encre du bandeau, hors palette fixe */
/* === Motion ============================================= */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
--dur-fast: 120ms; /* @kind other */
--dur-base: 150ms; /* @kind other */
--dur-slow: 250ms; /* @kind other */
}
/* ============================================================
PALAMBUR · Base element styles + signature utility classes
Semantic defaults that consume the tokens. The Palambur
"ligne rouge", kicker, and label live here.
============================================================ */
html, body {
font-family: var(--font-body);
color: var(--fg1);
background: var(--bg1);
font-size: var(--type-body-web);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-head);
font-weight: var(--w-semi);
letter-spacing: var(--tracking-display);
color: var(--fg1);
margin: 0 0 var(--space-5);
text-wrap: balance;
}
h1 { font-size: var(--type-display); line-height: 1.02; }
h2 { font-size: var(--type-h1); line-height: 1.05; }
h3 { font-size: var(--type-h2); line-height: 1.1; }
h4 { font-size: var(--type-h3); line-height: 1.2; }
p {
font-family: var(--font-body);
font-size: var(--type-body-web);
line-height: 1.55;
color: var(--fg2);
margin: 0 0 var(--space-4);
text-wrap: pretty;
}
.lead {
font-size: var(--type-lead-web);
line-height: 1.4;
color: var(--fg2);
}
a {
color: var(--fg-accent);
text-decoration: none;
transition: color var(--dur-base) var(--ease-out);
}
/* LE SURVOL EST DU TEXTE, ET IL N'EST JAMAIS MESURÉ · lot M31.
`--pal-red` rendait 4,23 sur le canvas · sous le seuil, sur la couleur que
prend CHAQUE lien de CHAQUE page de la maison au moment où on le pointe.
Aucune sonde ne l'avait jamais vu, et aucune ne le verra · une machine qui
relève une page ne survole rien. Ce défaut-là ne se trouve qu'en lisant la
feuille, et il ne se trouve qu'en la lisant AVEC LA QUESTION EN TÊTE.
LES ÉTATS QU'UNE MACHINE NE PEUT PAS ATTEINDRE NE SONT PAS DES ÉTATS
RARES · CE SONT DES ÉTATS QUE PERSONNE NE MESURE, ET LE SURVOL EST CELUI
QUE L'UTILISATEUR VOIT LE PLUS SOUVENT. */
/* RESYNC 31.08.2026 · alias au lieu du jeton brut, comme le site. Ne change
RIEN à l'écran ici · --fg-signal vaut déjà --pal-red-strong dans ce fichier
(voir plus haut), donc même couleur rendue, juste nommée par son sens. */
a:hover { color: var(--fg-signal); }
strong, b { font-weight: var(--w-semi); color: var(--fg1); }
/* RESYNC 31.08.2026 · deux règles ajoutées depuis le site, additives · aucun
sélecteur existant n'est modifié ni retiré, donc rien ne peut casser sur
une page qui ne les emploie pas encore.
Un mot mis en avant DANS UN TITRE. Les titres sont en 600 (--w-semi),
exactement la graisse de `strong` : sans cette règle, un dans un
titre est invisible, il hérite de la valeur de son voisin. Le texte de
liaison s'allège à 400 et les mots-clés montent à 700 (--w-bold), le
sommet de l'axe de Space Grotesk · aucune couleur, le poids seul fait le
relief. `:has()` limite l'allègement aux titres QUI ONT des mots-clés ; un
vieux navigateur qui l'ignore retombe sur l'état d'avant, jamais sur un
titre cassé. */
:is(h1, h2, h3, h4):has(:is(strong, b)) { font-weight: var(--w-reg); }
:is(h1, h2, h3, h4, h5, h6) :is(strong, b) { font-weight: var(--w-bold); }
/* Le vocabulaire Lean · vert, la couleur du gain · réservé au vocabulaire
d'atelier (Lean, Kaizen, 5S, VSM, Muda, Jidoka), la signature d'expertise
de Palambur. --fg-success et non une couleur en dur, pour rester réglable
depuis un seul endroit. */
.lean { color: var(--fg-success); font-weight: var(--w-semi); }
:is(h1, h2, h3, h4, h5, h6) .lean { font-weight: var(--w-bold); }
code, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }
/* RESYNC 31.08.2026 · les contrôles de formulaire n'héritent pas de la
police du document par défaut : sans cette règle ils tombent en Arial.
Plancher à 16px sur les champs saisissables : en dessous, Safari iOS
zoome automatiquement à la prise de focus. `max()` garde les 18px du
bureau (--type-body-web) intacts. */
button, input, select, textarea { font-family: inherit; }
input, textarea, select { font-size: max(16px, var(--type-body-web)); }
hr, .hr {
border: none;
border-top: 1px solid var(--rule);
margin: var(--space-7) 0;
}
/* The Palambur kicker — italic Barlow rouge (signature annotation) */
.kicker, .pal-kicker {
font-family: var(--font-body);
font-style: italic;
font-size: var(--type-kicker);
color: var(--fg-signal);
letter-spacing: 0.01em;
margin-bottom: var(--space-4);
}
/* Uppercase spaced label */
.label, .pal-label {
font-family: var(--font-body);
font-weight: var(--w-semi);
font-size: var(--type-small);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--fg-accent);
}
/* Ligne rouge — signature vertical rule */
.ligne-rouge {
width: 2px;
background: var(--pal-red);
align-self: stretch;
}
.ligne-rouge-top {
height: 3px;
background: var(--pal-red);
width: 64px;
}
/* Dark surface scope */
.on-dark {
background: var(--bg-dark);
color: var(--pal-canvas);
}
.on-dark p, .on-dark .lead { color: var(--pal-text-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--pal-canvas); }
.on-dark .label, .on-dark .pal-label { color: var(--pal-muted-dark); }
.on-dark a { color: var(--pal-yellow); }
/* Primary CTA — the only pill in the system
DÉPASSÉ PAR boutons.css QUAND LES DEUX SONT LIÉS · relevé le 01.09.2026
(audit design) · ce bloc porte la GÉNÉRATION D'AVANT du bouton primaire
(fond uni, pas de dégradé glissant) et `_charte/boutons.css` la version
du site. Les cinq aperçus lient désormais boutons.css APRÈS cette
feuille · à spécificité égale, la dernière gagne, donc c'est la version
moderne qui rend. Ce bloc RESTE pour toute page qui ne lierait que
palambur.css (un repli honnête vaut mieux qu'un bouton nu) · ne pas le
moderniser ici, une seule source par règle (§ 7) · la source est
boutons.css. */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-head);
font-weight: var(--w-med);
font-size: var(--type-body-web);
letter-spacing: 0.02em;
padding: 14px 28px;
border: none;
border-radius: var(--radius-pill);
background: var(--pal-navy);
color: var(--pal-canvas-pure);
cursor: pointer;
transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn-primary:hover { background: var(--pal-navy-deep); }
.btn-primary:active { transform: scale(0.97); }
/* Secondary — flat, hairline */
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-head);
font-weight: var(--w-med);
font-size: var(--type-body-web);
padding: 14px 28px;
background: transparent;
color: var(--pal-navy);
border: 1px solid var(--pal-navy);
border-radius: var(--radius-pill);
cursor: pointer;
transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.btn-secondary:hover { background: var(--pal-navy); color: var(--pal-canvas-pure); }
/* Card — hairline, never a drop-shadow */
.card {
background: var(--bg2);
border: 1px solid var(--rule);
padding: var(--space-7);
border-radius: var(--radius-none);
}
.on-dark .card { background: var(--bg-dark2); border: none; }
/* Hairlines */
.hairline-top { border-top: 1px solid var(--rule); }
.hairline-bottom { border-bottom: 1px solid var(--rule); }
.on-dark .hairline-top { border-top-color: var(--rule-dark); }
.on-dark .hairline-bottom { border-bottom-color: var(--rule-dark); }