/* ═══════════════════════════════════════════════════════════════
PAGES INTÉRIEURES - /therapies/, /a-propos/, /contact/, /articles/,
un article, les pages légales et la 404.
Ces pages ne sont PAS dans la maquette Figma : Sébastien n'a dessiné
que l'accueil. Il n'y a donc rien à reproduire au pixel ici, et tout
à raccorder : les gabarits du parent (page.php, single.php, home.php,
page-therapies.php, page-contact.php, 404.php) restent tels quels et
c'est cette feuille qui les fait parler la même langue que l'accueil
(fontes, encres, filets, ombres, boutons).
Portée : TOUT est préfixé par `body.vf-interieure`. Deux raisons.
1. On surcharge des classes du PARENT (.pagehero, .page__body, .card,
.toc, .contactgrid…) : sans le préfixe on écraserait aussi ces
mêmes classes sur l'accueil, où elles ne servent plus mais où le
parent pourrait en réutiliser une.
2. La redéfinition de --teal/--gold ci-dessous ne doit surtout PAS
atterrir dans :root : le parent s'en sert aussi dans son hero et
son footer d'origine, et un changement global sortirait du
périmètre de cette section.
Ce que fait cette feuille, dans l'ordre :
A. neutralise les deux accents du parent (teal, or) ;
B. remet la tête de page SOUS la nav, en cohérence avec la maquette ;
C. repasse titres en Instrument Sans / corps en Schibsted ;
D. rhabille sommaire, corps de texte, cartes d'articles, contact ;
E. paliers responsive.
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
A. NEUTRALISATION DES ACCENTS DU PARENT
═══════════════════════════════════════════════════════════════ */
/* Le parent construit tout son habillage sur deux accents que la
maquette validée n'a pas :
--teal #447583 boutons pleins, liens de corps, dates, étiquettes ;
--gold #cab27a filets, puces de liste, séparateurs du fil d'Ariane ;
--wa #5b97a8 bouton WhatsApp flottant (déjà traité par base.css,
on le neutralise ici aussi pour les boutons de page).
Plutôt que de rechercher les ~30 règles qui les utilisent une par une
(et d'en oublier à la prochaine évolution du parent), on redéfinit les
custom properties elles-mêmes sur le des pages intérieures :
la cascade fait le reste, y compris pour les règles du parent qu'on ne
connaît pas encore.
--teal et --wa passent à l'encre (--ink-fort), comme le demande la
spec. --gold n'est pas mentionné par la spec mais suit la même
logique : c'est l'autre accent du parent, et le laisser produirait des
filets dorés au milieu d'une page dont plus rien d'autre n'est doré.
On l'envoie sur --argent-2, le gris des filets de la maquette, sauf
là où il portait du texte (traité au cas par cas plus bas : un gris
clair sur fond clair ne passerait pas les 4.5:1).
PIÈGE : les valeurs rgba() codées en dur du parent (par exemple
`rgba(202,178,122,.6)` pour les filets de .pull, ou
`rgba(68,117,131,.35)` sous les liens de corps) n'utilisent PAS les
variables et survivent donc à cette redéfinition. Elles sont reprises
explicitement dans les sections D ci-dessous. */
body.vf-interieure{
--teal:var(--ink-fort);
--wa:var(--ink-fort);
--wa-fonce:#000;
--gold:var(--argent-2);
/* Le parent pose --cream:#faf8f4 (son beige) : les textes clairs sur
les fonds sombres du parent doivent virer au blanc cassé de la
maquette, sinon la tête de page tire au jaune à côté du footer. */
--cream:var(--page);
--ink:var(--ink-fort);
--ink-soft:var(--texte);
--ink-muted:var(--muted);
/* Le beige du parent (#faf8f4) sert de fond aux cartes et cellules :
il devient le fond de page de la maquette. */
--sable:var(--argent);
}
/* Le fond de page : le parent pose --cream sur , déjà redirigé
ci-dessus, mais base.css a la main. On confirme pour que les pages
intérieures aient exactement le même gris chaud que l'accueil. */
body.vf-interieure{background:var(--page)}
/* ═══════════════════════════════════════════════════════════════
B. TÊTE DE PAGE - la nav repasse au-dessus, pas dedans
Le parent imbrique `parts/nav.php` DANS `.pagehero__inner`, donc à
l'intérieur du bloc photo : sa nav était transparente, posée sur
l'image, logo inversé. Le nouveau parts/nav.php (thème enfant) est une
barre opaque de 109.4px sur fond --page, avec un filet encre en bas.
Placée telle quelle à l'intérieur du .pagehero, elle mange le haut de
la photo mais reste visuellement correcte : c'est exactement le rendu
voulu (barre claire, puis photo dessous). Il n'y a donc RIEN à
déplacer dans le balisage - ce qu'on ne pourrait pas faire de toute
façon, les gabarits du parent étant hors périmètre.
Ce qu'il faut en revanche garantir ici :
- que .pagehero (position:relative; overflow:hidden) ne rogne pas le
méga-menu Thérapies qui s'ouvre depuis la nav ;
- que la photo commence SOUS la barre et non derrière elle ;
- que la barre garde son fond opaque malgré le contexte sombre.
═══════════════════════════════════════════════════════════════ */
/* La photo et son voile sont en position:absolute;inset:0 dans le
parent : ils couvrent donc TOUTE la tête de page, barre de nav
comprise. On les décale de la hauteur exacte de la barre (109.4px,
cf. header.css) pour que l'image démarre juste sous le filet.
Une variable locale : la barre se resserre dans les paliers bas et
les deux valeurs doivent rester synchronisées. */
body.vf-interieure{--vf-barre:109.4px}
body.vf-interieure .pagehero{
position:relative;
/* Fond de page et non --ink : la barre de nav est dans ce bloc, elle
doit reposer sur le gris chaud de la maquette, pas sur du noir qui
transparaîtrait autour d'elle le temps du chargement de l'image. */
background:var(--page);
/* Le parent fixe 520px ; on ajoute la barre par-dessus pour que la
PHOTO conserve sa hauteur utile, sinon la nav la rogne d'autant. */
height:calc(520px + var(--vf-barre));
min-height:0;
/* MÉGA-MENU ET RECADRAGE (parade unique, relevée par le vérificateur).
Le parent pose overflow:hidden sur .pagehero pour contenir sa photo,
et les gabarits page.php, page-therapies.php, single.php,
page-contact.php et 404.php placent parts/nav.php DANS
.pagehero__inner : le panneau du sous-menu Thérapies, bien qu'en
position:absolute, y était donc découpé. Deux cas mesurés :
- entre 901 et 1005px, la tête de page retombe à 440px (palier 1180
du parent) pendant que le panneau grandit à ~509px, les libellés
des thérapies passant sur deux lignes : le dernier item était
tranché en son milieu et « Voir toutes les thérapies » disparaissait ;
- à 1440 sur un ARTICLE, dont la tête est un .pagehero--plain en
height:auto (style.css parent l. 1024) : 451px de haut pour un
panneau qui descend à 491. Ni /a-propos/, ni /therapies/, ni
/contact/ ne le montrent, leur pagehero gardant ses 520px fixes.
L'accueil était indemne (front-page.php appelle la nav hors du
pagehero) : le défaut restait invisible si l'on ne vérifiait que lui.
On lève donc le recadrage EN PERMANENCE, ici et une seule fois. La
photo et son voile sont en position:absolute;inset:0 avec
object-fit:cover : ils ne débordent jamais de la boîte, lever overflow
n'a aucun effet visible sur la tête de page. Une variante conditionnelle
en :has(.nav__group:hover) existait dans header.css : elle est retirée,
car elle faisait vivre deux définitions concurrentes du même overflow
sur le même sélecteur, et elle dépendait d'un :has() qu'il fallait
doubler d'un @supports. Une déclaration constante rend les deux
inutiles. Le parent applique du reste déjà la même parade pour le menu
mobile (style.css l. 1697-1702). */
overflow:visible;
}
/* La photo et le voile sont recadrés à eux deux, sans toucher au bloc :
clip-path plutôt que overflow, pour ne pas rétablir le découpage qui
couperait le méga-menu. */
body.vf-interieure .pagehero__img,
body.vf-interieure .pagehero__veil{
top:var(--vf-barre);
height:calc(100% - var(--vf-barre));
}
/* Voile : le parent superpose un dégradé encre réglé par page
(--veil-top / --veil-bot posés en style inline). On le garde - le
réglage éditorial reste utile - mais on l'aligne sur le noir de la
maquette (--sombre) au lieu du #121212 du parent, pour que la tête de
page et le bloc contact du bas soient du même noir.
ACCESSIBILITÉ - PLANCHER DE CONTRASTE, mesuré et non supposé.
Le titre, le fil d'Ariane, le chapô et les métadonnées sont posés en
texte crème sur une photo TÉLÉVERSÉE : le contraste dépend donc d'un
contenu que personne ne contrôle. Le seul assombrissement du parent
est piloté par --veil-top / --veil-bot, posés en style inline sur
.pagehero, donc réglables page par page depuis l'administration et
abaissables jusqu'à 0. Une photo claire mise en médiathèque demain
ferait tomber le fil d'Ariane sous 4.5:1 sans aucun signal.
On pose donc ici un voile PLANCHER, opaque et constant, totalement
indépendant des deux variables : le réglage éditorial ne peut plus
que l'assombrir davantage, jamais l'éclaircir.
Pourquoi un aplat et non un dégradé ancré en bas (l'état précédent,
qui ne faisait rien au-dessus de 42 %) : la position verticale du
texte dans le voile n'est PAS stable. Mesures sur le site :
/therapies/ à 1440 met le fil d'Ariane à 69 % du voile, mais à 768 le
bloc titre passe en hauteur automatique et le fil d'Ariane remonte à
49 % ; /a-propos/ et /contact/ à 768 le mettent à 39,6 %. Un dégradé
bas laissait donc ces trois cas quasi nus. Un aplat couvre toutes les
hauteurs de tête de page, toutes les variantes de gabarit et tous les
paliers d'un coup.
Calibrage (photo BLANCHE, cas le plus défavorable, --veil-top et
--veil-bot forcés à 0 ; composition src-over puis ratio WCAG 2.1) :
alpha minimal pour tenir 4.5:1 = .600 pour du crème opaque, .640 à
88 % (le chapô), .665 à 82 % (les métadonnées). On retient .72, qui
couvre les trois avec de la marge et laisse encore lire la photo.
Résultat mesuré sur blanc pur : fil d'Ariane 7,09:1, chapô 5,94:1,
métadonnées 5,41:1. Sur la photo réelle du cabinet, tout monte
au-delà de 10:1. */
body.vf-interieure .pagehero__veil{
/* UNE SEULE couche encre, à opacité plancher.
PIÈGE RENCONTRÉ, corrigé : la première tentative empilait le
plancher PAR-DESSUS le voile éditorial. Les deux se composaient
(1 - (1-.72)(1-.82) = .95) et la photo du cabinet devenait
indiscernable à 1440 - le rendu précédent culminait à .82/.886.
Le poser en background-color sous l'image ne change rien : deux
couches restent deux couches.
On ne superpose donc plus : on remplace le dégradé du parent par une
couche unique dont l'opacité est le MAXIMUM entre le réglage
éditorial et le plancher. CSS ne sait pas faire max() sur le canal
alpha d'un rgba, mais il sait le faire sur un nombre : on calcule
l'alpha avec max(), puis on l'injecte dans le rgba. Un navigateur
sans max() dans rgba() (aucun de la cible) retomberait sur la
déclaration de repli posée juste au-dessus. */
background:linear-gradient(180deg,
rgba(14,15,16,.72),
rgba(14,15,16,.72));
background:linear-gradient(180deg,
rgba(14,15,16, max(var(--veil-top,.7), .72)),
rgba(14,15,16, max(var(--veil-bot,.5), .72)));
}
/* Variante sans photo (articles, pages légales, 404) : le parent la met
en hauteur automatique sur fond --ink. On la passe au dégradé sombre
de la maquette, celui des blocs Jung / Levine / contact, pour que la
page s'ouvre sur exactement la même matière que celle qui la ferme. */
body.vf-interieure .pagehero--plain{
height:auto;
min-height:0;
background:var(--grad-sombre);
}
/* Le dégradé du parent démarrait sous la barre de nav claire : ici il
part du haut du bloc et passerait DERRIÈRE la nav. La nav portant son
propre fond opaque (--page), rien ne transparaît ; on n'ajoute donc
pas de décalage, mais on retire la photo/le voile qui n'existent pas
dans cette variante. */
/* Le conteneur interne du parent est plafonné à --shell (1440px) avec sa
propre gouttière. On l'aligne sur .vf-shell de la maquette (1296 +
2×gut) pour que le titre de page tombe sur la même verticale que le
logo de la nav juste au-dessus : sans ça, le décalage de 72px se voit
immédiatement à 1440. */
/* 09/09, retour d'Emmanuel : au-delà de 1440px, plafonner ce conteneur
encastrait aussi le HEADER qu'il contient (fond clair de 1440 centré
sur un bloc sombre pleine largeur), alors que sur l'accueil la nav va
bord à bord. Le conteneur redevient donc pleine largeur ; c'est le
bloc titre, seul, qui reprend la largeur de la maquette et se centre.
Le header centre déjà son contenu à 1440 par son propre .vf-shell.
Pas d'astuce 100vw : elle déborde de la largeur de la barre de
défilement sous Windows. */
body.vf-interieure .pagehero__inner{
max-width:none;
margin:0;
padding:0;
}
body.vf-interieure .pagehero__title{
max-width:calc(var(--contenu) + 2 * var(--gut));
margin-inline:auto;
box-sizing:border-box;
}
/* La zone titre : le parent la plaque en bas de la photo sur deux
colonnes. On conserve la composition, on change la voix. */
body.vf-interieure .pagehero__title{
padding:0 var(--gut) 64px;
gap:64px;
align-items:end;
}
/* H1 : Instrument Sans 600 comme le H1 de l'accueil (--fs-h1 = 48px,
interlignage 53). Le parent était à 72px en AGaramond ; 48 suffit
largement au-dessus d'une photo et évite que « Prendre rendez-vous »
passe sur deux lignes à 1024. Clamp identique à celui du hero de
l'accueil pour que les deux titres se répondent d'un palier à l'autre. */
body.vf-interieure .pagehero__title h1{
margin:0;
max-width:16ch;
font-family:var(--font-display);
font-weight:600;
font-size:clamp(30px, 3.4vw, var(--fs-h1));
line-height:1.1;
letter-spacing:-.01em;
color:var(--page);
}
/* Variante sans photo : même échelle (le parent montait à 62px). Le
fond est le dégradé sombre, la lisibilité est acquise. */
body.vf-interieure .pagehero--plain .pagehero__title{padding-top:72px}
body.vf-interieure .pagehero--plain .pagehero__title h1{
font-size:clamp(30px, 3.4vw, var(--fs-h1));
max-width:22ch;
}
/* Chapô : Schibsted au corps du hero de l'accueil (16/28). Le filet
gauche passe de l'or au gris argent de la maquette. */
body.vf-interieure .pagehero__lead{
margin:0 0 8px;
padding-left:30px;
border-left:1px solid var(--argent-2);
font-family:var(--font-ui);
font-weight:400;
font-size:var(--fs-lead);
line-height:28px;
/* Blanc cassé à 88 % sur le voile encre : ≈ 12:1, très au-delà du
seuil. Un rgba plutôt que --gris-clair, qui virerait au bleu sur
une photo. */
color:rgba(245,244,241,.88);
}
/* Fil d'Ariane : registre des surtitres de la maquette (Schibsted 500,
11.5px, interlettrage 2.53px, capitales). C'est le texte le plus
fragile de la tête de page : le plus petit corps, le plus interlettré,
et il est informatif (navigation). Il passe donc en --page PLEIN, sans
aucune transparence - une opacité, même à 84 %, ne se justifiait que
par un effet de hiérarchie qui ne vaut pas 1,5 point de ratio ici.
Sur le plancher .72 et une photo blanche : 7,09:1. */
body.vf-interieure .breadcrumb{
margin-bottom:24px;
gap:10px;
font-family:var(--font-ui);
font-weight:500;
font-size:var(--fs-surtitre);
letter-spacing:var(--ls-surtitre);
text-transform:uppercase;
color:var(--page);
}
body.vf-interieure .breadcrumb a{color:inherit}
body.vf-interieure .breadcrumb a:hover{color:var(--page)}
/* Le séparateur « / » était doré ; il passe au même gris que les filets
de la maquette. Décoratif (aria-hidden), le contraste n'est pas
normatif ici. */
body.vf-interieure .breadcrumb span[aria-hidden]{color:var(--argent-2)}
/* Métadonnées d'article (date · auteur), sous le H1 d'un single. */
body.vf-interieure .pagehero__meta{
margin-top:24px;
font-family:var(--font-ui);
font-weight:400;
font-size:var(--fs-etiquette);
letter-spacing:var(--ls-surtitre);
text-transform:uppercase;
/* .82 et non .72 : à .72 la ligne de métadonnées tombait sous 4.5:1
sur une photo claire, même voile haut appliqué (mesure WCAG). */
color:rgba(245,244,241,.82);
}
body.vf-interieure .pagehero__meta .sep{background:rgba(245,244,241,.35)}
/* ═══════════════════════════════════════════════════════════════
C. GRILLE SOMMAIRE + CORPS
═══════════════════════════════════════════════════════════════ */
/* Le parent : grille 280px + 1fr, gouttière 96, dans .shell (1440).
On la ramène à la largeur de contenu de la maquette (1296) pour que le
sommaire s'aligne sur le logo de la nav et le corps sur le reste du
site. .page.shell et non .page : WordPress pose la classe « page » sur
le lui-même, qui deviendrait sinon une grille (piège documenté
par le parent). */
body.vf-interieure .page.shell{
max-width:calc(var(--contenu) + 2 * var(--gut));
margin-inline:auto;
grid-template-columns:280px minmax(0, 1fr);
gap:0 96px;
padding:96px var(--gut) 120px;
}
/* Colonne unique (pages légales, article sans sommaire) : le parent
plafonne à 920px. On garde, en ajoutant la gouttière qui manquait au
niveau du bloc (elle était portée par .page.shell seul). */
body.vf-interieure .page--narrow{
max-width:calc(920px + 2 * var(--gut));
margin-inline:auto;
padding:96px var(--gut) 120px;
}
/* ─── Sommaire collant ─── */
/* top:142px chez le parent, calé sur son header rappelé de 119px. La
barre de la maquette fait 109.4px : 132px laisse le même filet d'air
de ~22px sous elle. */
body.vf-interieure .toc{top:132px}
body.vf-interieure .toc__label{
font-family:var(--font-ui);
font-weight:500;
font-size:var(--fs-etiquette);
letter-spacing:var(--ls-surtitre);
text-transform:uppercase;
color:var(--muted);
}
body.vf-interieure .toc__nav{
padding-left:18px;
border-left:1px solid var(--argent);
}
body.vf-interieure .toc__link{
font-family:var(--font-ui);
font-weight:400;
font-size:13.5px;
line-height:1.5;
color:var(--texte);
}
/* Lien survolé ou section en cours : encre pleine + graisse. Le parent
ne jouait que sur la couleur (teal), devenue identique à --ink-fort :
sans la graisse, l'état actif serait invisible. */
body.vf-interieure .toc__link:hover,
body.vf-interieure .toc__link.is-active{
color:var(--ink-fort);
font-weight:500;
}
body.vf-interieure .toc__cta{
border-top:1px solid var(--argent);
padding-top:26px;
margin-top:32px;
}
body.vf-interieure .toc__question{
font-family:var(--font-display);
font-weight:500;
font-size:19px;
line-height:1.3;
color:var(--ink-fort);
}
/* ─── Boutons du parent (.btn) ───
Le parent a son propre système de boutons (.btn / .btn--primary /
.btn--sm), utilisé dans le sommaire et sur la page contact. Les
gabarits étant hors périmètre, on ne peut pas leur substituer
.btn-plein : on aligne donc .btn--primary sur son rendu (encre +
reflet, capitales espacées, aucun arrondi - déjà neutralisé par
base.css). --teal ayant été redirigé plus haut, le fond est déjà à
l'encre ; il reste la matière du bouton et la typographie. */
body.vf-interieure .btn--primary{
background:var(--grad-bouton);
color:var(--page);
border:1px solid var(--ink-fort);
font-family:var(--font-ui);
font-weight:500;
letter-spacing:var(--ls-bouton);
text-transform:uppercase;
transition:opacity .25s var(--ease);
}
body.vf-interieure .btn--primary:hover,
body.vf-interieure .btn--primary:focus-visible{opacity:.88}
/* L'icône WhatsApp du parent : même opacité que dans les boutons de la
maquette (.btn-plein__icone). */
body.vf-interieure .btn--primary .btn__icon{opacity:.85}
/* ─── Corps de texte ───
Schibsted, échelle un cran au-dessus des cartes de l'accueil (14px)
parce qu'il s'agit ici de lecture longue : 16/28, la mesure du chapô
du hero. Le parent était à 17/1.9 en Roboto 300. */
body.vf-interieure .page__body{max-width:70ch}
body.vf-interieure .page__body p{
margin:0 0 24px;
font-family:var(--font-ui);
font-weight:400;
font-size:var(--fs-lead);
line-height:28px;
color:var(--texte);
}
/* Chapô éditorial : Instrument Sans, dans la lignée des accroches de
cartes de l'accueil (19/27.6) mais un cran plus haut, c'est un lead. */
body.vf-interieure .page__lead{
margin:0 0 48px;
font-family:var(--font-display);
font-weight:500;
font-size:26px;
line-height:1.45;
color:var(--ink-fort);
}
/* Sections d'une page de contenu : filet gris, pas doré. */
body.vf-interieure .section{
padding-top:48px;
margin-bottom:72px;
border-top:1px solid var(--argent);
}
/* Titre de section : Instrument Sans 600, dans l'esprit du « Thérapies »
de l'accueil (56px) mais ramené à la largeur d'une colonne de texte.
Le clamp du parent est en cqi (unité de conteneur, .page__body porte
container-type) : on le conserve, il suit la colonne et non la
fenêtre. */
body.vf-interieure .section__title{
margin:0 0 22px;
font-family:var(--font-display);
font-weight:600;
font-size:clamp(26px, 5.2cqi, 38px);
line-height:1.15;
letter-spacing:-.01em;
color:var(--ink-fort);
}
body.vf-interieure .section__sub{
font-family:var(--font-display);
font-weight:400;
font-style:normal;
font-size:21px;
color:var(--muted);
}
/* Le numéro de section était doré et en AGaramond : il devient le
chiffre gris des cartes thérapie de l'accueil. Décoratif. */
body.vf-interieure .section__num{
font-family:var(--font-display);
font-weight:400;
font-size:30px;
color:var(--gris);
}
/* PIÈGE trouvé à la vérification : le contenu de /a-propos/ (et de
plusieurs pages légales) contient des titres marqués
`class="screen-reader-text"`, la convention WordPress pour un titre
réservé aux lecteurs d'écran et au sommaire. Or NI le parent NI le
cœur de WordPress ne définissent cette classe côté front : le titre
« Ma pratique » s'affichait donc en toutes lettres, en doublon du
sommaire, depuis toujours (il passait inaperçu dans l'AGaramond du
parent, il saute aux yeux en Instrument Sans).
On pose ici la règle standard de masquage accessible : l'élément
reste dans l'arbre d'accessibilité et dans le flux du sommaire
(vanessa_toc_items() lit le HTML, pas le CSS) mais disparaît de
l'écran. clip-path ET clip : le second pour les navigateurs anciens,
le premier parce que `clip` est déprécié. */
body.vf-interieure .screen-reader-text:not(:focus):not(:focus-within){
position:absolute !important;
width:1px;
height:1px;
margin:-1px;
padding:0;
border:0;
overflow:hidden;
white-space:nowrap;
clip:rect(0 0 0 0);
clip-path:inset(50%);
}
/* Intertitres nus sortis de Gutenberg (h2/h3 sans classe). */
body.vf-interieure .page__body > h2:not([class]){
margin:56px 0 20px;
padding-top:44px;
border-top:1px solid var(--argent);
font-family:var(--font-display);
font-weight:600;
/* Plancher relevé à 26px : la colonne de texte fait 599px à 1440,
donc 4.6cqi ne vaut que 27.5px et l'intertitre se distinguait à
peine du corps. 5.4cqi porte le titre à 32px sur cette largeur. */
font-size:clamp(26px, 5.4cqi, 34px);
line-height:1.2;
letter-spacing:-.01em;
color:var(--ink-fort);
}
body.vf-interieure .page__body h3{
font-family:var(--font-display);
font-weight:500;
font-size:21px;
line-height:1.3;
color:var(--ink-fort);
}
/* Liens dans le corps : le parent posait un teal souligné d'un rgba
codé en dur (rgba(68,117,131,.35)) que la redirection de --teal ne
touche pas. On repasse à l'encre soulignée de gris. */
body.vf-interieure .page__body p a:not(.btn):not(.link-underline),
body.vf-interieure .page__body li a{
color:var(--ink-fort);
border-bottom:1px solid var(--argent);
}
body.vf-interieure .page__body p a:not(.btn):not(.link-underline):hover,
body.vf-interieure .page__body li a:hover{border-bottom-color:var(--ink-fort)}
/* Listes : la puce du parent est un disque doré de 5px en border-radius.
La maquette n'a AUCUN arrondi : on la remplace par un carré de 4px à
l'encre, cohérent avec les filets et les angles vifs de l'accueil. */
body.vf-interieure .page__body ul li{
font-family:var(--font-ui);
font-weight:400;
font-size:15.5px;
line-height:1.75;
color:var(--texte);
}
body.vf-interieure .page__body ul li::before{
top:.72em;
width:4px;
height:4px;
border-radius:0;
background:var(--ink-fort);
}
/* Exergue (.pull) : le parent l'encadre de deux filets dorés et le met
en AGaramond italique. Il devient le registre des accroches de cartes
de l'accueil : Instrument Sans 400, filets gris. Les !important du
parent obligent à en remettre ici, sinon ses valeurs gagnent.
PIÈGE de hiérarchie relevé à la vérification : à 24px l'exergue
passait DEVANT les intertitres h2 (27.5px au clamp courant) et se
lisait comme un titre de chapitre - « La parole guide, le corps
transcende. » ouvrait visuellement une section qu'il ne fait que
ponctuer. On le ramène à 20px en graisse 400 : il reste plus gros que
le corps (16px) sans concurrencer les h2. Les filets et l'air
suffisent à le détacher. */
body.vf-interieure .pull{
margin:40px 0 36px !important;
padding:28px 0;
border-top:1px solid var(--argent);
border-bottom:1px solid var(--argent);
font-family:var(--font-display) !important;
font-weight:400 !important;
font-style:normal !important;
font-size:20px !important;
line-height:1.5 !important;
color:var(--ink-fort) !important;
}
/* Sur /therapies/, l'accroche (.pull) suit IMMÉDIATEMENT le titre de
section, qui porte déjà un filet au-dessus de lui. Les deux filets se
retrouvaient à ~40px l'un de l'autre et enfermaient le titre dans une
fausse boîte. On retire le filet haut de l'exergue dans ce cas précis :
le titre lui sert de bord supérieur. */
body.vf-interieure .section__title + .pull{
margin-top:0 !important;
padding-top:0;
border-top:0;
}
/* Citation nue (Gutenberg) : filet gauche gris, Instrument Sans. */
body.vf-interieure .page__body blockquote:not([class]){
padding-left:26px;
border-left:1px solid var(--argent);
}
body.vf-interieure .page__body blockquote:not([class]) p{
font-family:var(--font-display);
font-weight:500;
font-style:normal;
font-size:20px;
line-height:1.5;
color:var(--ink-fort);
}
/* Notes de bas de page, crédits. --muted (#5b6066) sur --page : 6.5:1. */
body.vf-interieure .page__body small,
body.vf-interieure .page__body .footnote{
border-top:1px solid var(--argent);
font-family:var(--font-ui);
font-size:12.5px;
color:var(--muted);
}
/* Tableaux d'article. Ni le parent (style.css) ni cette feuille n'en
habillaient : l'article « Le Breathwork et le corps » sortait donc avec
les styles par défaut du navigateur (padding de cellule 1px, aucune
bordure, pas de width:100%), ses deux colonnes de texte dense collées
l'une à l'autre. Registre des cartes de l'accueil : filet --argent,
Schibsted 14/1.6, pas d'arrondi. */
body.vf-interieure .page__body table{
width:100%;
border-collapse:collapse;
margin:32px 0;
font-family:var(--font-ui);
font-size:14px;
line-height:1.6;
}
body.vf-interieure .page__body th,
body.vf-interieure .page__body td{
padding:14px 18px;
border:1px solid var(--argent);
color:var(--texte);
vertical-align:top;
text-align:left;
}
/* En-têtes : même graisse que les dt du pied « à propos », encre forte
pour tenir la hiérarchie de lecture. */
body.vf-interieure .page__body th{
font-weight:600;
color:var(--ink-fort);
}
/* Encadré d'avertissement éditorial (pages légales en attente). */
body.vf-interieure .notice{
border:1px solid var(--argent);
background:var(--blanc);
font-family:var(--font-ui);
font-size:14px;
line-height:1.7;
color:var(--texte);
}
body.vf-interieure .notice strong{font-weight:600;color:var(--ink-fort)}
/* Lien souligné générique du parent (« Lire l'article », « Tous les
articles ») : registre des étiquettes de la maquette. Le
border-bottom du parent est un rgba teal codé en dur, à reprendre. */
body.vf-interieure .link-underline{
font-family:var(--font-ui);
font-weight:500;
font-size:var(--fs-etiquette);
letter-spacing:var(--ls-etiquette);
text-transform:uppercase;
color:var(--ink-fort);
border-bottom:1px solid var(--argent-2);
padding-bottom:4px;
}
body.vf-interieure .link-underline:hover{border-bottom-color:var(--ink-fort)}
/* Tarif en pied de thérapie (page /therapies/) : exactement le pied des
cartes thérapie de l'accueil (.vf-therapie__tarif). */
/* PIÈGE CORRIGÉ : le gabarit du parent sort
DANS .page__body. Le sélecteur nu (0,2,1) perdait donc contre
`.page__body p` (0,3,1) écrit plus haut : taille, graisse, couleur
et margin-top étaient écrasées, le tarif rendait en 16px/400/--texte.
On qualifie par .page__body p pour passer à (0,4,1) sans !important. */
body.vf-interieure .page__body p.therapie__meta{
margin-top:28px;
padding-top:13px;
border-top:1px solid var(--argent);
font-family:var(--font-ui);
font-weight:500;
font-size:var(--fs-etiquette);
letter-spacing:var(--ls-etiquette);
text-transform:uppercase;
color:var(--muted);
}
/* Bloc citation de bas de page (page « approches » du parent) : filets
gris, Instrument Sans, auteur dans le registre des cites de
l'accueil. */
body.vf-interieure .signature{
background:transparent;
border-bottom:0;
max-width:calc(var(--contenu) + 2 * var(--gut));
margin-inline:auto;
padding:64px var(--gut);
}
body.vf-interieure .signature__rule{background:var(--argent)}
body.vf-interieure .signature__text{
font-family:var(--font-display);
font-weight:500;
font-style:normal;
font-size:clamp(20px, 2.2vw, 28px);
line-height:1.4;
color:var(--ink-fort);
}
body.vf-interieure .signature__author{
font-family:var(--font-ui);
font-weight:400;
font-size:var(--fs-surtitre);
letter-spacing:var(--ls-surtitre);
text-transform:uppercase;
color:var(--muted);
}
/* ═══════════════════════════════════════════════════════════════
D. LISTE DES ARTICLES (home.php)
La maquette a des cartes d'articles sur l'accueil (.vf-article) :
fond blanc, filet haut gris, ombre douce, titre Brygada 1918, aucun
arrondi. On applique ce même vocabulaire à la grille de la page
/articles/ - c'est le seul endroit du site où deux composants
représentent la même chose, ils doivent se ressembler.
Le parent construit ses séparateurs par un `gap:1px` sur un fond gris
(les cartes crème laissent voir le fond entre elles). Ce procédé est
incompatible avec des cartes qui portent une ombre : on repasse en
grille classique avec de vraies gouttières.
═══════════════════════════════════════════════════════════════ */
body.vf-interieure .articles.shell{
max-width:calc(var(--contenu) + 2 * var(--gut));
margin-inline:auto;
padding:96px var(--gut) 120px;
}
/* ─── Filtre par catégorie (10/09) ───
Ruban de liens au-dessus de la grille, sur la page Articles et sur les
archives de catégorie. L'espace au-dessus de la grille existait déjà
(96px de retrait haut) : le ruban s'y loge, on réduit donc l'écart qui
le sépare des cartes plutôt que d'ajouter de la hauteur à la page.
Pas de barre de défilement horizontale : sur les écrans étroits les
entrées passent à la ligne (flex-wrap). Un ruban qui défile masquerait
les dernières catégories sans l'annoncer, et rien n'indique à l'oeil
qu'il reste du contenu à droite. */
body.vf-interieure .vf-filtre{
margin:0 0 48px;
/* Le retrait haut de la section suffit : ce trait sépare le ruban de la
grille, pas du bloc de tête. */
padding-bottom:28px;
border-bottom:1px solid var(--gris-bd);
}
body.vf-interieure .vf-filtre__liste{
display:flex;
flex-wrap:wrap;
gap:10px 12px;
margin:0;
padding:0;
list-style:none;
}
body.vf-interieure .vf-filtre__item{margin:0}
/* Même typographie que les surtitres du site (Schibsted, lettres
espacées, capitales) : le ruban se lit comme une navigation, pas comme
du contenu. Hauteur de 40px : cible tactile confortable sans peser
autant que les 44px de la pagination, qui est isolée en bas de page. */
body.vf-interieure .vf-filtre__lien{
display:inline-flex;
align-items:center;
height:40px;
padding:0 18px;
border:1px solid var(--gris-bd);
box-sizing:border-box;
font-family:var(--font-ui);
font-size:12px;
font-weight:500;
letter-spacing:var(--ls-surtitre);
text-transform:uppercase;
color:var(--texte);
text-decoration:none;
transition:border-color .2s, color .2s;
}
body.vf-interieure .vf-filtre__lien:hover{
border-color:var(--ink-fort);
color:var(--ink-fort);
}
/* Carte masquée par le filtre JavaScript.
L'attribut hidden ne suffit PAS ici : la feuille du parent pose
.card{display:flex}, et une règle de feuille de style l'emporte
toujours sur le display:none que le navigateur applique par défaut à
[hidden]. Les cartes recevaient donc bien l'attribut (vérifié : 9 sur
10 après un clic) tout en restant parfaitement visibles.
!important parce que la règle du parent a la même spécificité qu'une
règle de classe : sans lui, l'ordre de chargement suffirait mais le
moindre ajout ultérieur dans le parent rouvrirait le défaut. */
body.vf-interieure .card[hidden]{display:none!important}
/* Entrée active : plein encre. Le contraste (fond sombre, texte crème)
la distingue sans dépendre de la seule couleur, et aria-current la
signale aux lecteurs d'écran. */
body.vf-interieure .vf-filtre__lien.est-actif{
background:var(--ink-fort);
border-color:var(--ink-fort);
color:var(--page);
}
body.vf-interieure .articles__grid{
grid-template-columns:repeat(3, minmax(0, 1fr));
/* Gouttières de la grille d'articles de l'accueil : 40 / 42. */
column-gap:var(--gap-article);
row-gap:var(--gap-article-v);
/* Le fond gris du parent servait de séparateur : plus de séparateur,
plus de fond. */
background:none;
}
body.vf-interieure .card{
gap:16px;
padding:27px 26px;
background:var(--blanc);
border-top:1px solid var(--argent-2);
box-shadow:var(--ombre-carte);
min-height:145px;
transition:transform .25s var(--ease), border-color .25s var(--ease);
}
body.vf-interieure a.card:hover{
background:var(--blanc);
transform:translateY(-2px);
border-top-color:var(--ink-fort);
}
/* Date : étiquette grise, plus l'accent teal du parent. --muted sur
blanc = 7.0:1. */
body.vf-interieure .card__date{
font-family:var(--font-ui);
font-weight:500;
font-size:var(--fs-etiquette);
letter-spacing:var(--ls-etiquette);
text-transform:uppercase;
color:var(--muted);
}
/* Titre : Brygada 1918 600, comme les cartes de l'accueil. La serif est
le seul endroit du site où elle apparaît : c'est la signature
éditoriale du journal, elle doit être la même des deux côtés. */
body.vf-interieure .card__title{
font-family:var(--font-article);
font-weight:600;
font-size:var(--fs-article-titre);
line-height:1.25;
color:var(--ink-fort);
}
body.vf-interieure .card__excerpt{
font-family:var(--font-ui);
font-weight:400;
font-size:var(--fs-corps);
line-height:1.75;
color:var(--texte);
}
body.vf-interieure .card__soon{
font-family:var(--font-ui);
font-weight:500;
font-size:var(--fs-etiquette);
letter-spacing:var(--ls-etiquette);
text-transform:uppercase;
color:var(--muted);
}
/* ═══════════════════════════════════════════════════════════════
E. PAGE CONTACT (page-contact.php)
═══════════════════════════════════════════════════════════════ */
body.vf-interieure .contactpage.shell{
max-width:calc(var(--contenu) + 2 * var(--gut));
margin-inline:auto;
padding:96px var(--gut) 120px;
}
body.vf-interieure .contactpage__intro{
font-family:var(--font-display);
font-weight:500;
font-size:26px;
line-height:1.45;
color:var(--ink-fort);
}
body.vf-interieure .contactpage__text{
font-family:var(--font-ui);
font-weight:400;
font-size:var(--fs-lead);
line-height:28px;
color:var(--texte);
}
/* Ligne « bouton + canal + numéro ». */
body.vf-interieure .rdv{margin-bottom:40px}
body.vf-interieure .rdv__label{
font-family:var(--font-ui);
font-weight:400;
font-size:14.5px;
letter-spacing:0;
color:var(--texte);
}
body.vf-interieure .rdv__tel{
font-family:var(--font-ui);
font-weight:500;
font-size:14.5px;
letter-spacing:.04em;
color:var(--ink-fort);
}
/* Grille de coordonnées : même remarque que pour les cartes d'articles,
le parent sépare ses cellules par un gap de 1px sur fond gris. Ici on
garde le principe (ce sont des cellules d'information, pas des cartes
flottantes) mais on le rend explicite par de vrais filets : le fond
gris se voyait dans les coins et sur les bords extérieurs. */
body.vf-interieure .contactgrid{
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:0;
background:none;
margin-top:56px;
border-top:1px solid var(--argent);
}
body.vf-interieure .contactgrid__cell{
padding:34px 34px 34px 0;
background:transparent;
}
body.vf-interieure .contactgrid__cell + .contactgrid__cell{
padding-left:34px;
border-left:1px solid var(--argent);
}
/* Intitulé de cellule : surtitre de la maquette. MÊME PIÈGE que le pied
de tarif : le gabarit produit
et la règle
générique `.contactgrid__cell p` ci-dessous (0,3,1) la battait sur la
spécificité ET sur l'ordre, d'où des intitulés en 15px/400/--texte,
indiscernables des lignes d'adresse. On qualifie ici (0,4,1) plutôt que
d'ajouter un :not() sur la règle générique, qui reste ainsi intacte. */
body.vf-interieure .contactgrid__cell p.contactgrid__label{
font-family:var(--font-ui);
font-weight:500;
font-size:var(--fs-surtitre);
letter-spacing:var(--ls-surtitre);
text-transform:uppercase;
color:var(--muted);
}
body.vf-interieure .contactgrid__cell p,
body.vf-interieure .contactgrid__cell address{
font-family:var(--font-ui);
font-weight:400;
font-size:15px;
line-height:1.8;
color:var(--texte);
}
/* Liens de cellule : soulignés, faute de couleur d'accent pour les
distinguer du texte courant. Sans le soulignement, --teal étant
devenu --ink-fort, ils ne se verraient plus du tout. */
body.vf-interieure .contactgrid__cell a{
color:var(--ink-fort);
border-bottom:1px solid var(--argent);
padding-bottom:2px;
}
body.vf-interieure .contactgrid__cell a:hover{
opacity:1;
border-bottom-color:var(--ink-fort);
}
/* ═══════════════════════════════════════════════════════════════
F. PALIERS RESPONSIVE
Ceux du parent (1180 gouttière, 1000, 900, 700, 480) plus les
paliers propres à la maquette. On ne redéfinit jamais --gut : le
parent l'abaisse déjà à 40 sous 1180 et à 24 sous 480.
═══════════════════════════════════════════════════════════════ */
/* --vf-barre doit TOUJOURS valoir la hauteur réelle de la barre de nav,
sinon la photo de tête laisse une bande de fond clair sous le filet de
la nav (ou le recouvre). Relevé dans header.css : .vf-nav__shell est à
min-height:109.4px (l. 50) et retombe à 78px au palier 900 (l. 555),
seul endroit où la hauteur change. PIÈGE CORRIGÉ : le commentaire
précédent affirmait que la barre restait à 109.4 jusqu'en bas, d'où
31.4px de fond nu entre la nav et la photo sur tous les paliers
<= 900 (mesuré : navBottom 78 contre imgTop 109.4). Toute nouvelle
hauteur de barre dans header.css doit être répliquée ici. */
@media (max-width:1024px){
body.vf-interieure .pagehero{height:calc(440px + var(--vf-barre))}
body.vf-interieure .pagehero__title{gap:40px;padding-bottom:52px}
body.vf-interieure .page.shell{
grid-template-columns:230px minmax(0, 1fr);
gap:0 56px;
padding:72px var(--gut) 88px;
}
body.vf-interieure .page--narrow{padding:72px var(--gut) 88px}
body.vf-interieure .articles.shell,
body.vf-interieure .contactpage.shell{padding:72px var(--gut) 88px}
/* 3 → 2 colonnes, comme la grille d'articles de l'accueil. */
body.vf-interieure .articles__grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:900px){
/* Resynchronisation de la variable sur la barre réelle : header.css
l. 555 pose .vf-nav__shell{min-height:78px} à ce même palier. */
body.vf-interieure{--vf-barre:78px}
/* Le sommaire collant n'a plus de colonne à lui : il repasse dans le
flux, au-dessus du texte. Le parent ne le prévoyait pas (sa grille
restait à deux colonnes jusqu'en bas), ce qui écrasait le corps de
texte à moins de 300px sur tablette. */
body.vf-interieure .page.shell{
grid-template-columns:minmax(0, 1fr);
gap:40px;
}
body.vf-interieure .toc{
position:static;
padding-bottom:32px;
border-bottom:1px solid var(--argent);
}
body.vf-interieure .toc__cta{
/* Le bouton et son intitulé passent sur une ligne : en pleine
largeur ils occuperaient tout l'écran pour rien. */
display:flex;
align-items:center;
flex-wrap:wrap;
gap:16px;
border-top:0;
padding-top:0;
margin-top:24px;
}
body.vf-interieure .toc__question{margin:0}
/* La barre de nav laisse place au burger : elle se resserre, la
tête de page suit. */
body.vf-interieure .pagehero{height:calc(380px + var(--vf-barre))}
}
@media (max-width:768px){
body.vf-interieure .pagehero{height:auto;min-height:0}
/* Hauteur libre : à cette largeur le titre passe sur trois lignes et
une hauteur fixe le ferait déborder de la photo. Le bloc est en
colonne, la photo tient le fond. */
body.vf-interieure .pagehero__title{
grid-template-columns:minmax(0, 1fr);
gap:24px;
padding:120px var(--gut) 48px;
}
body.vf-interieure .pagehero--plain .pagehero__title{padding-top:56px}
body.vf-interieure .pagehero__lead{
padding-left:20px;
font-size:15px;
line-height:26px;
}
body.vf-interieure .page.shell,
body.vf-interieure .page--narrow,
body.vf-interieure .articles.shell,
body.vf-interieure .contactpage.shell{padding:56px var(--gut) 72px}
/* Cellules de contact en pile : les filets verticaux deviennent
horizontaux, sinon la dernière cellule garde un filet orphelin. */
body.vf-interieure .contactgrid{grid-template-columns:minmax(0, 1fr);border-top:0}
body.vf-interieure .contactgrid__cell{padding:26px 0}
body.vf-interieure .contactgrid__cell + .contactgrid__cell{
padding-left:0;
border-left:0;
border-top:1px solid var(--argent);
}
}
@media (max-width:640px){
/* Une colonne d'articles, comme sur l'accueil. */
body.vf-interieure .articles__grid{grid-template-columns:minmax(0, 1fr)}
/* Sous 640px, huit entrées plus « Tous » occupent plusieurs lignes :
on resserre pour limiter la hauteur avalée avant le premier article. */
body.vf-interieure .vf-filtre{margin-bottom:36px;padding-bottom:22px}
body.vf-interieure .vf-filtre__liste{gap:8px}
body.vf-interieure .vf-filtre__lien{height:36px;padding:0 14px;font-size:11px}
/* Une entrée longue (« Troubles du comportement alimentaire (TCA) »)
passait sur deux lignes et déformait la rangée : les voisines,
étirées à la même hauteur par le flex, perdaient leur alignement.
On la garde sur une ligne et on tronque au-delà de la largeur
disponible ; le nom complet reste dans l'attribut title.
La contrainte se pose sur le
, PAS sur le lien : un pourcentage
sur le lien se résout par rapport au , qui est lui-même dimensionné
par son contenu. Le lien ne rétrécissait donc jamais, et le ruban
débordait de l'écran. Le , lui, est un enfant du conteneur flex :
100% l'y borne réellement. */
body.vf-interieure .vf-filtre__item{
max-width:100%;
min-width:0; /* un enfant flex refuse de passer sous la
largeur de son contenu sans ceci */
}
body.vf-interieure .vf-filtre__lien{
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
display:block; /* ellipsis inopérant sur inline-flex */
line-height:34px; /* recentre le texte, align-items ne
s'applique plus hors du flex */
}
body.vf-interieure .page__body p{font-size:15.5px;line-height:27px}
body.vf-interieure .page__lead{font-size:22px}
body.vf-interieure .pull{font-size:20px !important;padding:24px 0}
body.vf-interieure .section{padding-top:36px;margin-bottom:56px}
/* Sous 640 seulement : un tableau à deux colonnes de texte dense ne
tient plus dans 390px sans casser les mots. On le rend défilant
horizontalement DANS son propre bloc (display:block + overflow-x),
ce qui préserve scrollWidth === clientWidth sur la page. Réservé à ce
palier : display:block casserait la répartition des colonnes en
desktop. */
body.vf-interieure .page__body table{
display:block;
overflow-x:auto;
}
}
@media (max-width:480px){
body.vf-interieure .pagehero__title{padding-top:96px;padding-bottom:40px}
body.vf-interieure .breadcrumb{
/* L'interlettrage de 2.53px sur trois segments faisait déborder le
fil d'Ariane des articles (« Accueil / Articles / ») à
320-390px. On l'enroule et on desserre légèrement. */
flex-wrap:wrap;
row-gap:4px;
font-size:10.5px;
letter-spacing:1.8px;
}
body.vf-interieure .card{padding:24px 22px}
body.vf-interieure .toc__cta .btn--primary{width:100%;justify-content:center}
}
/* ─── Marbre derrière les pages intérieures (proposition du 09/09) ───
Pour que tout le site partage la matière de l'accueil. Couche FIXE
plein écran derrière le contenu : contrairement à un fond posé sur
body, elle ne s'étire pas avec la longueur d'un article et fonctionne
sur iOS, où background-attachment:fixed est ignoré. Même cadrage que
le hero (zone haute de la texture, auto 232 % de la hauteur du
viewport) : la grande veine entre par le haut et sort par la droite,
jamais d'extrémité visible. Chemin en clair et non var(--marbre) :
un url() dans une custom property se résout depuis la feuille qui
l'utilise (piège documenté dans tokens.css). */
body.vf-interieure{position:relative;background:var(--page)}
body.vf-interieure::before{
content:'';
position:fixed;
inset:0;
z-index:-1;
/* Quasi 1:1 (115 % de la largeur) : la texture ne fait que 1440x1301
px, tout agrandissement la rend baveuse, surtout sur Retina (retour
d'Emmanuel du 09/09 : « vraiment pourrie » à 232 % de la hauteur).
115 % et non 100 %, calée à GAUCHE : les 13 % de droite de l'image,
là où la grande veine s'éteint, sortent du champ et la veine file
jusqu'au bord de l'écran (second retour : « ça devrait toucher le
bord »). La vraie solution reste une texture plus grande de la
part de Sébastien. */
background:var(--page) url('../img/v-marbre.png') 0 0 / 115% auto no-repeat;
pointer-events:none;
}
/* ─── Avis « contenu à livrer » (pages légales, 09/09) ───
Texte volontairement vide tant que Vanessa n'a pas tranché l'option
de rédaction du devis. L'avis doit sauter aux yeux : rouge, encadré.
Le style inline du paragraphe (rouge, gras) sert de filet si cette
feuille manque. Contraste du rouge sur le marbre : 5,9:1. */
body.vf-interieure .contenu-a-livrer{
margin:0 0 32px;
padding:22px 26px;
border:1px solid #b3261e;
color:#b3261e;
font-weight:600;
font-size:16px;
line-height:1.6;
background:rgba(179,38,30,.05);
}
/* ─── Archive de catégorie (10/09) ───
La section « Journal » de l'accueil liste désormais les catégories : ce
gabarit (category.php) est leur destination. Il réutilise les classes de
la page Journal du parent (.articles, .card), il n'y a donc rien à
habiller pour la grille elle-même. Restent deux cas que le parent ne
connaissait pas : la catégorie vide et la pagination. */
/* Catégorie sans article : les huit catégories existent avant que les
articles y soient rangés, l'état est réel pendant la recette. */
body.vf-interieure .vf-vide{
margin:0;
padding:48px 0 64px;
font-size:18px;
line-height:1.7;
color:var(--texte);
}
body.vf-interieure .vf-vide a{
color:var(--ink-fort);
text-decoration:underline;
text-underline-offset:4px;
}
/* Pagination : absente de la page Journal du parent, qui tient sur un
écran, mais une catégorie nourrie dépassera les 10 articles par page. */
body.vf-interieure .pagination{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:56px;
}
body.vf-interieure .pagination .screen-reader-text{
position:absolute;
width:1px;height:1px;
margin:-1px;padding:0;border:0;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap;
}
body.vf-interieure .pagination .page-numbers{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:44px; /* cible tactile de 44px, WCAG 2.5.8 */
height:44px;
padding:0 12px;
border:1px solid var(--gris-bd);
box-sizing:border-box;
font-family:var(--font-ui);
font-size:15px;
color:var(--ink-fort);
text-decoration:none;
}
body.vf-interieure .pagination .page-numbers:hover{border-color:var(--ink-fort)}
body.vf-interieure .pagination .page-numbers.current{
background:var(--ink-fort);
border-color:var(--ink-fort);
color:var(--page);
}