/* ==========================================================================
IMPRA — COMPOSITION
Couche de système, chargée juste après signature.impra.css et donc avant
toutes les feuilles de page. Elle ne contient que des primitives : une
mesure, et une manière d'ouvrir une section. Aucune règle de page.
§1 LE CONTENEUR LARGE
§2 LA SIGNATURE DE SECTION
========================================================================== */
/* ==========================================================================
1. LE CONTENEUR LARGE
Le conteneur de lecture ne bouge pas : 1200 px, la mesure d'Officevibe,
celle de toutes les colonnes de texte du site. Une ligne de 1200 px porte
déjà 90 caractères ; l'élargir dégraderait la lecture.
Mais une composition n'est pas une colonne de texte. Au-delà de 1440 px,
l'en-tête et le hero cessaient d'habiter l'écran : à 1920, 360 px de vide
de chaque côté d'un bloc conçu pour 1440. Une seconde mesure s'ouvre donc,
réservée aux compositions.
Elle prend deux tiers de ce que la fenêtre gagne au-delà de 1440 :
1440 → 1200 (inchangé)
1600 → 1307 (marges 146)
1920 → 1520 (marges 200)
2560 → 1520 (plafond)
Le tiers restant reste de la marge : au-dessus de 1920, la composition
cesse de grandir. Un hero de 1900 px de large ne se lit plus d'un regard.
========================================================================== */
:root {
--container-wide: clamp(1200px, 1200px + (100vw - 1440px) * 0.6667, 1520px);
}
/* 0-1-0 comme .container, déclaré plus tard : la surcharge tient sans
qualifier. Une classe suffit — inutile de monter en spécificité. */
.container--wide { max-width: var(--container-wide); }
/* ==========================================================================
2. LA SIGNATURE DE SECTION
Les titres étaient bons, les surtitres aussi. Le défaut était ailleurs :
le paragraphe d'introduction tombait sous le titre comme un de plus,
sans mesure propre, sans place réservée. Il paraissait ajouté.
Une introduction IMPRA a trois pièces, et pas une de plus :
1 LE REPÈRE DE CHAPITRE le slash bleu, le libellé, une règle
2 LE TITRE roman, avec l'accent italique
3 LE CHAPEAU un texte tenu, pas un résidu
Deux compositions, un seul langage :
.sig--split grille de 12 · titre sur 7, chapeau sur 4
pour les sections narratives
.sig--center tout centré, mesure stricte
pour la conversion — tarifs, avis, FAQ, CTA
Le chapeau est facultatif. Une section qui n'a rien à ajouter à son titre
n'invente pas une phrase pour remplir la colonne : elle s'arrête au titre.
C'est ce qui empêche le système de devenir dix fois le même composant.
========================================================================== */
:root {
/* Rythme vertical de l'introduction. Trois valeurs, pas une de plus. */
--sig-gap-marker: var(--space-20); /* repère → titre : 20 */
--sig-gap-deck: var(--space-32); /* titre → chapeau : 32 */
--sig-gap-body: clamp(52px, 4.4vw, 80px); /* intro → contenu : 52→80 */
}
/* Le flux d'une section : l'introduction, puis ce qu'elle introduit.
Remplace les `style="gap:var(--space-40)"` posés au cas par cas. */
.section-flow { display: flex; flex-direction: column; gap: var(--sig-gap-body); }
/* La forme de base : empilée. C'est ce que rendent les introductions qui
vivent déjà dans une colonne — l'aside de la FAQ, par exemple — et que les
deux variantes ci-dessous recomposent. */
.sig { display: flex; flex-direction: column; gap: var(--sig-gap-marker); }
.sig > .sig__deck { margin-top: calc(var(--sig-gap-deck) - var(--sig-gap-marker)); max-width: 46ch; }
.sig__title { margin: 0; }
.sig__deck {
margin: 0;
font-size: var(--text-body);
/* 1.75 au lieu de 1.6 : le chapeau se lit plus lentement que le corps.
C'est la différence entre un paragraphe et une adresse au lecteur. */
line-height: 1.75;
color: var(--impra-muted);
}
/* ── LE REPÈRE ────────────────────────────────────────────────────────────
Il n'invente aucune marque : c'est l'eyebrow existant — même graisse, même
tracking, même slash bleu (DA §8.1) — auquel s'ajoute une règle qui court
jusqu'au bord de la colonne du titre.
Cette règle n'est pas un ornement : elle donne à voir la largeur de la
colonne avant que le titre ne la remplisse. Elle disparaît partout où elle
ne mesurerait plus rien — au centre, elle ne serait qu'un trait.
Un numéro de chapitre a été écarté : les sept cartes métier portent déjà
01 à 07. Deux numérotations sur la même page se seraient contredites. */
.sig__marker { display: flex; align-items: center; }
.sig__rule {
flex: 1 1 auto;
height: 1px;
margin-left: var(--space-16);
background: var(--impra-border);
}
/* ── VARIANTE A · SPLIT ÉDITORIAL ─────────────────────────────────────────
Grille de 12. Le titre tient 7 colonnes, une colonne les sépare, le
chapeau en occupe 4. Le chapeau n'est plus sous le titre : il est en face.
C'est la composition, pas la taille du texte, qui le rend volontaire. */
.sig--split {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--element-gap);
row-gap: var(--sig-gap-marker);
align-items: start;
}
/* Le repère tient les 7 colonnes du titre, pas les 12 de la section : la
règle s'arrête exactement là où le titre s'arrêtera. Menée jusqu'au bord
droit, elle aurait cessé d'annoncer une colonne pour devenir un
. */
.sig--split > .sig__marker { grid-column: 1 / span 7; }
.sig--split > .sig__title { grid-column: 1 / span 7; grid-row: 2; }
.sig--split > .sig__deck {
grid-column: 9 / span 4; grid-row: 2;
max-width: 46ch;
padding-left: var(--space-24);
/* Le rail est neutre, pas bleu. Le slash porte déjà le signal bleu de
l'introduction ; un second bleu dans le même bloc le banaliserait, et
un filet bleu à gauche d'un paragraphe se lit comme un lien (DA §5). */
border-left: 1px solid var(--impra-border);
/* La première ligne du chapeau vient chercher celle du titre. Sans ce
décalage, le chapeau démarre plus haut que la hauteur d'x du titre et
les deux colonnes ne se répondent plus. */
padding-top: 0.28em;
}
/* ── VARIANTE B · CENTRÉE, CONVERSION ─────────────────────────────────────
Tarifs, avis, FAQ, CTA final : là où le lecteur doit décider, pas suivre
un récit. Mesure stricte — un chapeau centré qui court sur toute la page
ne se lit pas. */
.sig--center {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--sig-gap-marker);
}
.sig--center .sig__rule { display: none; }
.sig--center > .sig__title { text-wrap: balance; }
.sig--center > .sig__deck {
max-width: 56ch;
/* 20 de gouttière + 12 = les 32 du rythme titre → chapeau. */
margin-top: calc(var(--sig-gap-deck) - var(--sig-gap-marker));
}
/* ── SUR SURFACE SOMBRE ───────────────────────────────────────────────────
Le bleu du slash tient son rôle de repère sur navy ; il ne porte aucun
texte. Seuls la règle et le chapeau sont retendus. */
.band-ink .sig__rule { background: color-mix(in srgb, var(--impra-surface) 24%, transparent); }
.band-ink .sig__deck { color: var(--color-lavender-mist); }
.band-ink .sig--split > .sig__deck { border-left-color: color-mix(in srgb, var(--impra-surface) 20%, transparent); }
/* ── EMPILEMENT ───────────────────────────────────────────────────────────
Sous 1120 px, la colonne de 4 tomberait à 285 px : le chapeau y perdrait
sa respiration avant d'y gagner une composition. Il repasse sous le titre,
sans rail — une bordure gauche isolée n'indique plus aucune colonne. */
@media (max-width: 1120px) {
.sig--split { grid-template-columns: minmax(0, 1fr); }
/* Le repère aussi : laissé sur 7 colonnes, il en aurait créé six
implicites et le titre serait retombé à 58 % de la largeur. */
.sig--split > .sig__marker,
.sig--split > .sig__title,
.sig--split > .sig__deck { grid-column: 1; grid-row: auto; }
.sig--split > .sig__deck {
max-width: 60ch;
padding: 0; border-left: 0;
margin-top: calc(var(--sig-gap-deck) - var(--sig-gap-marker));
}
}