/* ===================================================================
socle.css — jetons partagés de la vitrine Radar Création
Créé le 19 août 2026.
RÔLE
Porter UNE seule échelle (espacement, typographie, rayons, largeurs,
points de rupture) partagée par la charte sombre de l'accueil et la
charte claire du reste du site. Avant ce fichier, cinq systèmes CSS
cohabitaient : 8 paddings de section, 14 rayons, 10 points de rupture,
6 tailles de corps de texte, 13 largeurs de contenu sur la seule page
d'accueil.
RÈGLES DE CE FICHIER, à ne pas contourner
1. AUCUN sélecteur nu. Ni `section`, ni `h2`, ni `.wrap`, ni `.carte`,
ni `.btn`. Ces noms sont déjà pris avec des sens différents :
`.wrap` vaut 1160 sur l'accueil, 920 dans metier.css, 720 dans
abonnement.ejs ; `.carte` existe dans trois fichiers. Le socle
expose des JETONS que les règles existantes consomment.
2. AUCUNE couleur en dur hors des deux classes d'activation. Le socle
consomme des jetons de surface (--rc-fond, --rc-encre, --rc-trait,
--rc-accent) que .rc-sombre et .rc-clair alimentent.
3. Tout est préfixé --rc-* / .rc-*. Ce préfixe évite :
- --bleu --encre --clair --signal --gris --bordure (radar.css,
metier.css, consommés par pied.css) ;
- --e-* --t-* --r-* --largeur-page --police* (radar.css) ;
- --bg --fg --cyan --line --bg-panel --bg-raised (index.html) ;
- --pied-largeur, qui reste DÉCLARÉ PAR CHAQUE PAGE (contrat de
pied.css:9 : max-width: var(--pied-largeur, 1080px)).
Contrôle avant chaque commit, sortie attendue vide :
comm -12 \
<(grep -oE -- '--rc-[a-z0-9-]+' web/public/socle.css | sort -u) \
<(grep -rhoE -- '--[a-z0-9-]+' web/public/radar.css \
web/public/metier.css web/public/pied.css \
web/public/index.html web/views/abonnement.ejs | sort -u)
4. Les deux classes d'activation se posent sur , JAMAIS sur
:root. Une redéfinition au niveau :root fuirait vers pied.css et
metier.css et reteindrait silencieusement le pied de la page.
5. Ne jamais écrire de séquence d'échappement CSS par script :
`content: "\0d7"` a déjà produit un octet NUL et rendu index.html
binaire pour grep et Git. Écrire le caractère directement.
ORDRE DE CHARGEMENT
accueil et outils.html seulement
ici
TOUJOURS en dernier (source unique du pied)
=================================================================== */
/* -------------------------------------------------------------------
1. Jetons partagés — identiques dans les deux chartes
------------------------------------------------------------------- */
:root {
/* --- Espacement : progression base 4, dérivée des valeurs réelles
de l'accueil (16/18/20/22/24/26/28/30/34/56/108). ------------ */
--rc-e-1: 4px;
--rc-e-2: 8px;
--rc-e-3: 12px;
--rc-e-4: 16px;
--rc-e-5: 24px;
--rc-e-6: 32px;
--rc-e-7: 48px;
--rc-e-8: 72px;
--rc-e-9: 108px;
/* Rythme vertical des sections. En clamp plutôt qu'en media query :
le repli mobile d'index.html:404 était mort depuis la refonte du
18/08 sans que personne le voie. Plus de règle = plus rien à casser. */
--rc-section-y: clamp(72px, 9vw, 108px);
--rc-section-y-court: clamp(48px, 6vw, 72px);
--rc-tete-bas: 56px; /* en-tête de section -> contenu */
--rc-gap-grille: 20px; /* absorbe les gap 16/18/20/22 existants */
--rc-gap-serre: 12px;
--rc-carte-p: 26px 24px; /* absorbe 26/22, 26/24, 28/26, 30/20 */
--rc-page-x: 24px; /* padding horizontal, unique sur tout le site */
/* --- Typographie -------------------------------------------------
Les deux clamps de titre sont repris À L'IDENTIQUE d'index.html
(lignes 81 et 135) : zéro régression de rendu sur l'accueil. */
--rc-t-micro: 11.5px; /* légendes de source, mentions */
--rc-t-xs: 12.5px; /* kickers, méta */
--rc-t-sm: 13.5px; /* texte de carte secondaire */
--rc-t-md: 15px; /* corps de carte, listes, prose légale */
--rc-t-lg: 17px; /* sous-titre de section */
--rc-t-h3: 19px; /* TOUS les h3 de carte (6 tailles avant) */
--rc-t-h3-caps: 15px; /* le seul h3 en capitales (.colonne) */
--rc-t-h2: clamp(28px, 4vw, 42px);
--rc-t-h1: clamp(38px, 6.4vw, 74px);
--rc-t-chiffre: 42px; /* .cout-stat b (42) et .roi-stat b (40) fusionnés */
--rc-t-chiffre-sm: 28px;
--rc-lh-h1: .98;
--rc-lh-h2: 1.08;
--rc-lh-h3: 1.25; /* les h3 héritaient du 1.6 de body : 30px
d'interligne sous un h2 à 1.08 */
--rc-lh-corps: 1.6;
--rc-lh-large: 1.65;
--rc-ls-h1: -2.5px;
--rc-ls-h2: -1px;
--rc-ls-h3: -.3px; /* et non -1px : sur un titre de 15px, le
resserrement était 3x trop fort */
--rc-ls-caps: 1.6px;
/* --- Rayons : registre data B2B, angles bas. Les deux premiers crans
sont les valeurs actuelles de l'accueil, donc aucun pixel ne
bouge sur la charte sombre. ---------------------------------- */
--rc-r-xs: 3px; /* boutons, puces, badges */
--rc-r-sm: 4px; /* cartes */
--rc-r-md: 8px; /* panneaux et encarts de la charte claire */
--rc-r-lg: 12px; /* tableaux, blocs de contenu long */
--rc-r-plein: 999px;
/* --- Largeurs de conteneur : 5 valeurs, pas une de plus.
Sur l'accueil, 13 blocs avaient chacun la sienne. ------------- */
--rc-l-page: 1160px; /* nav, pied, fonds de section, grille de 8 */
--rc-l-contenu: 960px; /* grilles de cartes, visuels, tableaux */
--rc-l-texte: 720px; /* prose et listes verticales (~68ch) */
--rc-l-tete: 680px; /* en-têtes de section, blocs à 2 cartes */
--rc-l-formulaire: 560px; /* formulaires et cartes d'action */
/* --- Durées : reprises de radar.css pour rester accordées ---------- */
--rc-d-rapide: .15s;
--rc-d-moyen: .28s;
--rc-d-lent: .6s;
/* --- POINTS DE RUPTURE — 4 valeurs, à écrire en littéral -----------
Une variable CSS ne fonctionne PAS dans une requête @media : ces
jetons servent de référence documentaire, pas de valeur calculée.
1080px absorbe l'ancien 1100
820px absorbe 900 et 720
560px absorbe 540 et 520
420px absorbe 480
Toute cinquième valeur qui réapparaît est une régression : le
contrôle 11 de outils/mesure-socle.mjs la détecte. */
--rc-bp-lg: 1080px;
--rc-bp-md: 820px;
--rc-bp-sm: 560px;
--rc-bp-xs: 420px;
}
/* -------------------------------------------------------------------
2. Charte sombre — accueil et outils.html
Ne définit AUCUNE couleur : elle alias les jetons que l'accueil
possède déjà, pour que la palette continue de vivre dans index.html.
Conséquence : l'accueil ne change pas d'un pixel de couleur.
------------------------------------------------------------------- */
.rc-sombre {
--rc-fond: var(--bg);
--rc-fond-panneau: var(--bg-panel);
--rc-fond-carte: var(--bg-raised); /* index.html:46, déclaré et
utilisé zéro fois avant : c'est
la valeur qui manquait aux
cartes « Sources » invisibles */
--rc-encre: var(--fg);
--rc-encre-2: var(--fg-2);
--rc-encre-3: var(--fg-3);
--rc-trait: var(--line);
--rc-trait-fort: var(--line-2);
--rc-accent: var(--cyan);
--rc-accent-voile: var(--cyan-dim);
--rc-accent-trait: var(--cyan-line);
--rc-accent-contraste: #00201f;
}
/* -------------------------------------------------------------------
3. Charte claire — légal, guides, tunnel (et, plus tard, métier + blog)
Aucune couleur inventée : chaque valeur existe déjà dans le projet.
L'accent est le bleu souverain #000091, qui est déjà la couleur des
titres et des liens sur les pages claires.
------------------------------------------------------------------- */
.rc-clair {
--rc-fond: #ffffff;
--rc-fond-panneau: #f7f8fd; /* = --clair de radar.css */
--rc-fond-carte: #ffffff;
--rc-encre: #10122b; /* = --encre de radar.css */
--rc-encre-2: #4a5170;
--rc-encre-3: #6b7099; /* = --gris de metier.css */
--rc-trait: #bec4dd; /* = --bordure de radar.css. 1,73:1 sur blanc,
1,63:1 sur le panneau. #e7e9f4 valait 1,21. */
--rc-trait-fort: #8b95bb; /* 2,95:1 : le seuil des contours de champs. */
--rc-accent: #000091; /* bleu souverain */
--rc-accent-voile: #eef0fb;
--rc-accent-trait: #c9cfee;
--rc-accent-contraste: #ffffff;
}
/* -------------------------------------------------------------------
4. Conteneurs — classes préfixées, à appliquer explicitement
Aucune ne s'applique toute seule : une page les adopte en ajoutant la
classe. `.rc-page` remplace l'ancien couple .wrap/section dont le
raccourci `padding: 0 24px` écrasait le padding vertical (défaut racine
corrigé le 19/08 ; voir docs/vitrine-seo.md).
⚠ padding-inline et padding-block, jamais le raccourci `padding` :
c'est ce qui empêche structurellement une règle d'annuler l'autre.
------------------------------------------------------------------- */
.rc-page,
.rc-contenu,
.rc-texte,
.rc-tete,
.rc-formulaire {
margin-inline: auto;
padding-inline: var(--rc-page-x);
width: 100%;
}
.rc-page { max-width: var(--rc-l-page); }
.rc-contenu { max-width: var(--rc-l-contenu); }
.rc-texte { max-width: var(--rc-l-texte); }
.rc-tete { max-width: var(--rc-l-tete); }
.rc-formulaire { max-width: var(--rc-l-formulaire); }
/* Conteneur imbriqué : le padding horizontal est déjà porté par le
parent, le redoubler décalerait le bloc de 24px de chaque côté. */
.rc-page .rc-contenu,
.rc-page .rc-texte,
.rc-page .rc-tete,
.rc-page .rc-formulaire { padding-inline: 0; }
.rc-section { padding-block: var(--rc-section-y); }
.rc-section-court { padding-block: var(--rc-section-y-court); }
/* Ancres : compense la barre de navigation fixe. Sans cette règle, le
titre visé arrive 67px sous la barre. Mesuré sur l'accueil le 18/08. */
.rc-ancres [id] { scroll-margin-top: 82px; }
/* -------------------------------------------------------------------
5. Prose — longueur de ligne bridée
Les pages légales affichaient ~105 caractères par ligne (main à 760px,
texte à 15px, aucun max-width sur les paragraphes). 68ch ramène à ~72.
------------------------------------------------------------------- */
.rc-prose {
color: var(--rc-encre);
font-size: var(--rc-t-md);
line-height: var(--rc-lh-large);
}
.rc-prose p,
.rc-prose li,
.rc-prose dd { max-width: 68ch; }
.rc-prose h2 {
font-size: clamp(22px, 2.6vw, 27px);
line-height: var(--rc-lh-h2);
letter-spacing: var(--rc-ls-h2);
color: var(--rc-accent);
margin-block: var(--rc-e-7) var(--rc-e-4);
}
.rc-prose h3 {
font-size: var(--rc-t-h3);
line-height: var(--rc-lh-h3);
letter-spacing: var(--rc-ls-h3);
color: var(--rc-encre);
margin-block: var(--rc-e-6) var(--rc-e-3);
}
.rc-prose p { margin-block: 0 var(--rc-e-4); }
.rc-prose ul,
.rc-prose ol { margin-block: 0 var(--rc-e-4); padding-inline-start: var(--rc-e-5); }
.rc-prose li { margin-block: 0 var(--rc-e-2); }
.rc-prose a { color: var(--rc-accent); text-underline-offset: 2px; }
.rc-prose strong { color: var(--rc-encre); font-weight: 700; }
/* -------------------------------------------------------------------
6. Surfaces
------------------------------------------------------------------- */
.rc-carte {
background: var(--rc-fond-carte);
border: 1px solid var(--rc-trait);
border-radius: var(--rc-r-sm);
padding: var(--rc-carte-p);
}
/* Cartes de hauteur égale : le CTA ou les puces se calent en bas quel
que soit le nombre de lignes du titre.
⚠ Un badge à l'intérieur a besoin d'align-self: flex-start, sinon le
passage en flex l'étire sur toute la largeur (piège documenté). */
.rc-carte-egale { display: flex; flex-direction: column; height: 100%; }
.rc-carte-bas { margin-top: auto; }
.rc-panneau {
background: var(--rc-fond-panneau);
border-radius: var(--rc-r-md);
}
/* -------------------------------------------------------------------
7. Grilles — colonnes explicites et paliers, pas d'auto-fit
auto-fit + minmax produit des rangées orphelines dès que le nombre de
cartes n'est pas un multiple du nombre de colonnes calculé : 8 cartes
en 3 colonnes donnent 3/3/2, 4 cartes donnent 3+1 étirée. Les paliers
explicites suppriment ces plages.
------------------------------------------------------------------- */
.rc-grille { display: grid; gap: var(--rc-gap-grille); }
.rc-grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rc-grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rc-grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) {
.rc-grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
.rc-grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.rc-grille-2,
.rc-grille-3,
.rc-grille-4 { grid-template-columns: minmax(0, 1fr); }
}
/* -------------------------------------------------------------------
8. Barre de navigation légère — pages sans nav complète
Les trois pages légales n'avaient qu'un logo, sans lien de retour ni
appel à l'action.
⚠ Le libellé du CTA est figé : « Ma campagne d'essai » en nav,
« Recevoir ma campagne d'essai » au pied. Ce qu'on envoie n'est plus
un échantillon de données. Ne pas le réécrire.
------------------------------------------------------------------- */
.rc-barre {
background: var(--rc-fond);
border-bottom: 1px solid var(--rc-trait);
}
.rc-barre-inner {
display: flex; align-items: center; justify-content: space-between;
gap: var(--rc-e-4);
padding-block: var(--rc-e-3);
}
.rc-marque {
display: inline-flex; align-items: center; gap: var(--rc-e-2);
font-weight: 800; font-size: var(--rc-t-lg); letter-spacing: -.4px;
color: var(--rc-encre); text-decoration: none;
}
.rc-marque-point {
width: 9px; height: 9px; border-radius: var(--rc-r-plein);
background: var(--rc-accent); flex: none;
}
.rc-barre-liens {
display: flex; align-items: center; gap: var(--rc-e-5);
font-size: var(--rc-t-sm);
}
.rc-barre-liens a { color: var(--rc-encre-3); text-decoration: none; }
.rc-barre-liens a:hover { color: var(--rc-encre); }
/* -------------------------------------------------------------------
9. Boutons
------------------------------------------------------------------- */
.rc-btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--rc-e-2);
padding: 13px 22px;
font-size: var(--rc-t-sm); font-weight: 700; letter-spacing: .2px;
text-decoration: none; cursor: pointer;
border: 1px solid transparent; border-radius: var(--rc-r-xs);
transition: background var(--rc-d-rapide), border-color var(--rc-d-rapide),
color var(--rc-d-rapide);
}
.rc-btn-plein { background: var(--rc-accent); color: var(--rc-accent-contraste); }
.rc-btn-contour { background: transparent; color: var(--rc-accent); border-color: var(--rc-accent-trait); }
.rc-btn-contour:hover { background: var(--rc-accent-voile); }
/* -------------------------------------------------------------------
10. Lien d'évitement — accessibilité clavier
------------------------------------------------------------------- */
.rc-evitement {
position: absolute; left: -9999px;
background: var(--rc-accent); color: var(--rc-accent-contraste);
padding: var(--rc-e-3) var(--rc-e-4); border-radius: var(--rc-r-xs);
font-size: var(--rc-t-sm); font-weight: 700; text-decoration: none;
z-index: 100;
}
.rc-evitement:focus { left: var(--rc-e-4); top: var(--rc-e-4); }
/* -------------------------------------------------------------------
11. Mouvement — « rien ne bondit, tout émerge »
Charte Signal Souverain : mouvement lent et régulier, 1 à 2 animations
par vue. Et le réglage système est honoré, ce qui n'était le cas que
sur l'accueil et outils.html.
------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.rc-anime { animation: none !important; transition: none !important; }
}