, qui est `inline-flex` avec
`align-items: center` : le y est CENTRE et garde la hauteur de sa ligne.
Les deux bandes restantes appartiennent au paragraphe, pas au lien. Mesure au
gate independant, confirmee ici par balayage `elementFromPoint` : le
n offre que 31,09 px a 1440 et 1280, et 29,55 px a 390 et 320.
DEUX CANDIDATS MESURES PUIS ECARTES.
1. `display: inline-flex; align-items: center; min-height: 44px` sur le
atteint bien 44 px, mais le `border-block-end` herite de
`.pf-formation__inner a` descend au bas de la boite : soulignement +6,5 px
et texte -6,4 px a 1440. Composition modifiee sans necessite.
2. `inset-block: -7px` sur un pseudo-element atteint 45 px a 1440 et 1280,
mais seulement 43 px a 320 — sous le seuil.
RETENU : un pseudo-element transparent dont la hauteur est CALCULEE, donc
exacte quelles que soient les metriques de fonte. Mesure apres correction :
45 px a 1440, 1280, 390 et 320, avec texte, soulignement, hauteur de document
et position de la byline IDENTIQUES a la ligne de base. Aucun fond, aucune
bordure, aucune couleur, aucun retrait horizontal, aucun deplacement.
Le pseudo reste contenu dans les 44 px que le reserve deja : il ne peut
pas voler le clic d un element voisin.
PORTEE ETENDUE A TOUTE LA BRANCHE — BUILD-13.1R4, sur arbitrage du 2026-08-22.
R3 avait borne la correction a `.pf-formation-module`, tout en declarant que
le lien de la carte de `/formation/` — « Programme complet » — partageait
cette classe et presentait le meme defaut, mesure a 31,09 / 29,55 px, sans le
corriger. Le proprietaire a autorise l extension stricte a ce second lien.
La portee passe donc a `.pf-formation-page`, qui couvre EXACTEMENT les deux
instances de cette classe dans la branche : la carte de `/formation/` et le
lien de fin de programme de la page module. La page qualite n en porte aucune.
Mesure sur la carte apres extension : 45 px a 1440, 1280, 390 et 320, sans
trou dans la zone, sans recouvrement d un autre element interactif, texte et
soulignement inchanges au dixieme de pixel. */
.pf-formation-page .pf-formation__module-lien a { position: relative; }
.pf-formation-page .pf-formation__module-lien a::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block: calc((100% - 44px) / 2);
}
/* --- Tableau d'organisation — forme du bloc « Territoire » ---------------- */
.pf-formation-page .pf-formation__org {
display: grid;
grid-template-columns: 220px 1fr;
margin-block: var(--pf-espace-l) 0;
border-block-start: 1px solid var(--pf-encre);
}
.pf-formation-page .pf-formation__org dt,
.pf-formation-page .pf-formation__org dd {
padding-block: var(--pf-espace-xs);
border-block-end: 1px solid var(--pf-filet);
line-height: 1.55;
}
.pf-formation-page .pf-formation__org dt {
margin: 0;
padding-block-start: calc(var(--pf-espace-xs) + 3px);
font-size: 0.78125rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--pf-encre-2);
}
.pf-formation-page .pf-formation__org dd {
margin: 0;
font-size: 0.9375rem;
}
/* --- Sessions et demande -------------------------------------------------- */
.pf-formation-page .pf-formation__sessions {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: var(--pf-espace-l);
align-items: start;
margin-block: var(--pf-espace-l) 0;
}
.pf-formation-page .pf-formation__dates,
.pf-formation-page .pf-formation__demande {
min-width: 0;
padding: var(--pf-espace-m);
background-color: var(--pf-fond);
border: 1px solid var(--pf-filet);
border-radius: var(--pf-rayon-m);
}
.pf-formation-page .pf-formation__dates-titre {
margin-block: 0 var(--pf-espace-xs);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--pf-encre-2);
}
.pf-formation-page .pf-formation__demande-titre {
margin-block: 0 var(--pf-espace-xs);
font-size: 1.0625rem;
font-weight: 650;
color: var(--pf-encre);
}
/* Coquille visuelle du formulaire — BUILD-13 première passe.
Les champs sont `disabled` : ils ne peuvent être ni focalisés, ni soumis, et
aucun élément `form` n'existe. Le dispositif d'envoi relève d'une phase de
recette distincte ; le bandeau d'attente ci-dessous le dit tant que le site
n'est pas public, et disparaît de lui-même à l'ouverture. */
.pf-formation-page .pf-formation__champ { margin-block-start: var(--pf-espace-s); }
.pf-formation-page .pf-formation__champ label {
display: block;
margin-block-end: var(--pf-espace-3xs);
font-size: 0.78125rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--pf-encre-2);
}
.pf-formation-page .pf-formation__champ input,
.pf-formation-page .pf-formation__champ textarea {
width: 100%;
padding: var(--pf-espace-2xs) var(--pf-espace-xs);
font-family: inherit;
font-size: 0.9375rem;
color: var(--pf-encre-2);
background-color: #fff;
border: 1px solid var(--pf-filet);
border-radius: var(--pf-rayon-s);
}
.pf-formation-page .pf-formation__champ textarea { min-height: 5.5rem; resize: vertical; }
.pf-formation-page .pf-formation__envoi {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-block-start: var(--pf-espace-m);
padding-inline: var(--pf-espace-m);
font-family: inherit;
font-size: 0.9375rem;
font-weight: 650;
color: var(--pf-ivoire);
background-color: var(--pf-accent);
border: 0;
border-radius: var(--pf-rayon-s);
}
/* Coquille non fonctionnelle : l'état désactivé doit SE VOIR. Un bouton inerte
qui garde l'apparence d'un bouton actif ferait croire à un envoi possible. */
.pf-formation-page .pf-formation__champ input:disabled,
.pf-formation-page .pf-formation__champ textarea:disabled,
.pf-formation-page .pf-formation__envoi:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.pf-formation-page .pf-formation__finalite {
margin-block: var(--pf-espace-s) 0;
font-size: 0.8125rem;
line-height: 1.55;
color: var(--pf-encre-2);
}
/* --- Repère de construction — pré-production seulement --------------------
Même mécanisme que l'emplacement de portrait de l'accueil : le repère est
conditionné à `body.pf-preprod`, posé tant que `blog_public` vaut 0. Il
disparaît de lui-même à l'ouverture publique, sans suppression manuelle. */
.pf-formation-page .pf-formation__attente { display: none; }
.pf-formation-page.pf-preprod .pf-formation__attente {
display: block;
margin-block: var(--pf-espace-s) 0;
padding: var(--pf-espace-xs) var(--pf-espace-s);
font-size: 0.8125rem;
line-height: 1.5;
color: var(--pf-vigilance-texte);
background-color: var(--pf-vigilance-fond);
border: 1px dashed var(--pf-vigilance-bord);
border-radius: var(--pf-rayon-s);
}
/* --- Formulaire fonctionnel — BUILD-13.2B --------------------------------
S'ajoute à la coquille visuelle ci-dessus, sans la modifier : les champs
texte, le bouton et le paragraphe de finalité gardent exactement leurs
règles de BUILD-13. Ce bloc ne traite que ce qui n'existait pas — le groupe
de boutons radio, les états d'erreur, la confirmation et le piège à robots.
AUCUNE COULEUR NOUVELLE. Les états d'erreur reprennent le triplet
`--pf-vigilance-*`, déjà canonique et déjà employé dans cette zone même par
le repère de pré-production. Le triplet CLINIQUE `--pf-urgence-*` n'est pas
touché : il est réservé à la vigilance clinique, et une erreur de saisie
n'en relève pas. */
.pf-formation-page .pf-formation__form { margin: 0; }
/* Piège à robots. Retiré de l'affichage sans `display: none`, que certains
robots savent ignorer, et sans décalage négatif, qui peut créer un
débordement horizontal. `clip-path` le sort de la vue en le laissant dans
l'arbre. Le champ est en outre `tabindex="-1"` et son conteneur
`aria-hidden` : sans ces deux-là, le piège attraperait aussi la navigation
au clavier et les lecteurs d'écran. */
.pf-formation-page .pf-formation__piege {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* Groupe « objet de la demande ». Le `fieldset` ne porte PAS la classe
`pf-formation__champ` : il hériterait sinon du style des libellés de champs
texte — majuscules, 0,78 rem, couleur secondaire — qui ne convient pas à des
intitulés de choix destinés à être lus. */
.pf-formation-page .pf-formation__objet {
margin-block-start: var(--pf-espace-s);
padding: 0;
border: 0;
}
.pf-formation-page .pf-formation__objet legend {
padding: 0;
margin-block-end: var(--pf-espace-3xs);
font-size: 0.78125rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--pf-encre-2);
}
/* 44 px de haut : un bouton radio nu mesure une quinzaine de pixels, et le
libellé qui l'enveloppe est la cible réelle. Même exigence que partout
ailleurs dans le thème. */
.pf-formation-page .pf-formation__choix {
display: flex;
align-items: center;
gap: var(--pf-espace-2xs);
min-height: 44px;
font-size: 0.9375rem;
line-height: 1.4;
color: var(--pf-encre);
cursor: pointer;
}
.pf-formation-page .pf-formation__choix input { flex: none; }
/* `:has()` n'est pas indispensable : sans lui, le bouton reste désactivé et
simplement moins visiblement grisé. Aucune fonction n'en dépend. */
.pf-formation-page .pf-formation__choix:has(input:disabled) {
opacity: 0.55;
cursor: not-allowed;
}
/* Marqueurs d'obligation. Ils sont ÉCRITS, et non signalés par un astérisque :
un astérisque demande une légende, et une légende se lit rarement. */
.pf-formation-page .pf-formation__requis,
.pf-formation-page .pf-formation__facultatif {
font-weight: 500;
letter-spacing: 0.02em;
text-transform: lowercase;
color: var(--pf-encre-2);
}
.pf-formation-page .pf-formation__aide {
margin-block: var(--pf-espace-3xs) 0;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--pf-encre-2);
}
/* Récapitulatif d'erreurs, en tête de formulaire. Il porte `role="alert"` et
`tabindex="-1"` : le script facultatif y amène le focus, et sans script il
reste le premier élément lu après le titre. */
.pf-formation-page .pf-formation__erreurs {
margin-block-end: var(--pf-espace-s);
padding: var(--pf-espace-xs) var(--pf-espace-s);
font-size: 0.875rem;
line-height: 1.55;
color: var(--pf-vigilance-texte);
background-color: var(--pf-vigilance-fond);
border: 1px solid var(--pf-vigilance-bord);
border-radius: var(--pf-rayon-s);
}
.pf-formation-page .pf-formation__erreurs p { margin: 0; }
.pf-formation-page .pf-formation__erreurs ul {
margin-block: var(--pf-espace-2xs) 0;
padding-inline-start: var(--pf-espace-s);
}
/* CIBLE TACTILE DU RÉCAPITULATIF — R2. Ces liens mesuraient 18 px de haut : une
boîte EN LIGNE prend la hauteur de la police, pas celle de la ligne. Pire, un
libellé replié se fragmentait en deux boîtes et laissait, entre les deux
lignes, un TROU non cliquable — mesuré à 390 px avant correction.
`display: block` supprime les deux défauts d'un coup : une seule boîte, qui
couvre toutes ses lignes. Aucun pseudo-élément : sa zone échouerait justement
sur les fragments de ligne, comme on l'a vu ailleurs dans cette feuille.
Le padding est en PIXELS, non en jeton d'espacement, et c'est délibéré : il
vise un seuil chiffré — ligne de 21,7 px + 2 × 6 px ≈ 34 px, au-dessus des
24 px exigés, avec de la marge pour les arrondis. Un jeton modifié ailleurs
ferait passer la cible sous le seuil sans que rien ne le signale.
Le `li` reçoit le même rythme, SAUF s'il porte un lien : sans cela, une entrée
sans ancre — délai, transmission — serait visiblement plus serrée que ses
voisines. Là où `:has()` n'existe pas, la règle est simplement ignorée : les
entrées avec lien deviennent un peu plus hautes, jamais plus basses.
Ni couleur, ni fond, ni bordure : cela reste un lien, pas un bouton. */
.pf-formation-page .pf-formation__erreurs li { padding-block: 6px; }
.pf-formation-page .pf-formation__erreurs li:has(> a) { padding-block: 0; }
.pf-formation-page .pf-formation__erreurs a {
display: block;
padding-block: 6px;
color: inherit;
}
.pf-formation-page .pf-formation__erreur {
margin-block: var(--pf-espace-3xs) 0;
font-size: 0.8125rem;
font-weight: 600;
color: var(--pf-vigilance-texte);
}
/* L'erreur n'est JAMAIS portée par la seule couleur : chaque champ fautif a son
texte, son `aria-invalid` et son entrée dans le récapitulatif. La bordure ne
fait que confirmer ce qui est déjà écrit. */
.pf-formation-page .pf-formation__champ input[aria-invalid="true"],
.pf-formation-page .pf-formation__champ textarea[aria-invalid="true"] {
border-color: var(--pf-vigilance-texte);
}
/* Confirmation. Sobre, sans couleur d'accent : elle annonce que le message est
parti, pas une réussite à fêter. */
.pf-formation-page .pf-formation__succes {
margin-block: 0 var(--pf-espace-s);
padding: var(--pf-espace-xs) var(--pf-espace-s);
font-size: 0.9375rem;
line-height: 1.55;
color: var(--pf-encre);
background-color: var(--pf-papier);
border: 1px solid var(--pf-filet);
border-radius: var(--pf-rayon-s);
}
/* --- Formateur ------------------------------------------------------------ */
.pf-formation-page .pf-formation__formateur {
display: grid;
grid-template-columns: 96px 1fr;
gap: var(--pf-espace-m);
align-items: start;
margin-block: var(--pf-espace-l) 0;
}
.pf-formation-page .pf-formation__monogramme {
display: flex;
align-items: center;
justify-content: center;
min-height: 88px;
font-family: var(--pf-fonte-editoriale);
font-size: 1.75rem;
color: var(--pf-encre-2);
background-color: var(--pf-papier);
border: 1px solid var(--pf-filet);
}
.pf-formation-page .pf-formation__formateur-nom {
margin-block: 0 var(--pf-espace-3xs);
font-family: var(--pf-fonte-editoriale);
font-size: 1.1875rem;
font-weight: 600;
color: var(--pf-encre);
}
.pf-formation-page .pf-formation__formateur-meta {
margin-block: 0 var(--pf-espace-xs);
font-size: 0.875rem;
color: var(--pf-encre-2);
}
/* --- Organisme et certification ------------------------------------------ */
.pf-formation-page .pf-formation__organisme {
display: grid;
grid-template-columns: 300px 1fr;
gap: var(--pf-espace-m);
align-items: start;
margin-block: var(--pf-espace-l) 0;
}
/* LOGO QUALIOPI OFFICIEL EN PLACE DEPUIS LE 2026-08-27 — media 102,
`LogoQualiopi-300dpi-Avec_Marianne.png`, 633 x 338 px, fichier d'origine intact.
Les TROIS regles qui compensaient son absence sont RETIREES, et non neutralisees :
`display: none` sur `.pf-formation__logo`, la reduction de la grille a une colonne
hors pre-production, et le cadre pointille de l'emplacement reserve. Elles n'avaient
de sens que tant qu'aucune image n'existait ; les conserver aurait masque le logo en
public tout en le montrant sur le staging — exactement le defaut que l'avertissement
de BUILD-13 annoncait a cet endroit.
La colonne passe de 150 px a 300 px : c'est la largeur d'affichage visee, et l'actif
fait 633 px de large, donc l'image est TOUJOURS REDUITE, jamais agrandie. En dessous
de 600 px, la regle de media existante ramene la grille a une colonne ; `width: 100%`
avec `max-width: 300px` fait alors suivre le logo sans jamais deborder. */
.pf-formation-page .pf-formation__logo {
margin-block: 0;
}
.pf-formation-page .pf-formation__logo img {
display: block;
width: 100%;
max-width: 300px;
height: auto;
}
.pf-formation-page .pf-formation__organisme-mention {
margin-block: var(--pf-espace-xs) 0;
font-size: 0.875rem;
line-height: 1.6;
color: var(--pf-encre-2);
}
/* --- Byline --------------------------------------------------------------- */
.pf-formation-page .pf-formation__byline {
background-color: var(--pf-strate);
color: var(--pf-ivoire-2);
}
.pf-formation-page .pf-formation__byline .pf-formation__inner {
padding-block: var(--pf-espace-l);
}
.pf-formation-page .pf-formation__byline-texte {
max-width: var(--pf-largeur-lecture);
margin-block: 0;
font-size: 0.875rem;
line-height: 1.7;
}
.pf-formation-page .pf-formation__byline-texte strong { color: var(--pf-ivoire); font-weight: 600; }
/* ==========================================================================
PAGE DE PROGRAMME — `.pf-formation-module`
========================================================================== */
.pf-formation-module .pf-formation__hero .pf-formation__inner {
padding-block: var(--pf-espace-l);
}
.pf-formation-module .pf-formation__titre { max-width: 26ch; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.4rem); }
.pf-formation-page .pf-formation__module-ident {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--pf-espace-s);
margin-block: var(--pf-espace-l) 0;
}
.pf-formation-page .pf-formation__ident-case {
min-width: 0;
padding: var(--pf-espace-xs) var(--pf-espace-s);
background-color: var(--pf-fond);
border: 1px solid var(--pf-filet);
border-radius: var(--pf-rayon-s);
}
.pf-formation-page .pf-formation__ident-case--large { grid-column: 1 / -1; }
.pf-formation-page .pf-formation__ident-label {
display: block;
margin-block-end: var(--pf-espace-3xs);
font-size: 0.71875rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--pf-encre-2);
}
.pf-formation-page .pf-formation__ident-valeur {
display: block;
font-size: 0.9375rem;
line-height: 1.5;
}
.pf-formation-page .pf-formation__jours {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--pf-espace-m);
margin-block: var(--pf-espace-l) 0;
}
.pf-formation-page .pf-formation__jour {
min-width: 0;
padding: var(--pf-espace-m);
background-color: var(--pf-fond);
border: 1px solid var(--pf-filet);
border-radius: var(--pf-rayon-m);
}
.pf-formation-page .pf-formation__jour-titre {
margin-block: 0 var(--pf-espace-xs);
font-size: 1rem;
font-weight: 650;
color: var(--pf-encre);
}
.pf-formation-page .pf-formation__sequence {
margin-block: var(--pf-espace-s) var(--pf-espace-3xs);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pf-encre-2);
}
.pf-formation-page .pf-formation__jour ul { margin: 0 0 0 1.15em; padding: 0; }
.pf-formation-page .pf-formation__jour li { font-size: 0.9375rem; line-height: 1.55; }
/* ==========================================================================
PAGE QUALITÉ — `.pf-formation-qualite`
Page documentaire : hero clair, pas de seuil sombre. Le sommaire est ancré,
les sections sont nommées par l'obligation qu'elles remplissent.
========================================================================== */
.pf-formation-qualite .pf-formation__hero {
background-color: var(--pf-papier);
color: var(--pf-encre);
border-block-end: 1px solid var(--pf-filet);
}
.pf-formation-qualite .pf-formation__hero::before { content: none; }
.pf-formation-qualite .pf-formation__hero .pf-formation__inner { padding-block: var(--pf-espace-l); }
.pf-formation-qualite .pf-formation__kicker { color: var(--pf-accent); }
.pf-formation-qualite .pf-formation__titre { max-width: 24ch; color: var(--pf-encre); }
/* Le hero de cette page est CLAIR : le chapô ne peut pas garder l'ivoire prévu
pour le seuil sombre — contraste insuffisant, relevé au rendu de contrôle. */
.pf-formation-qualite .pf-formation__definition { color: var(--pf-encre-2); }
.pf-formation-qualite .pf-formation__sommaire {
display: flex;
flex-wrap: wrap;
gap: var(--pf-espace-xs) var(--pf-espace-m);
margin-block: var(--pf-espace-m) 0;
padding: 0;
list-style: none;
font-size: 0.9375rem;
}
.pf-formation-qualite .pf-formation__sommaire li { margin: 0; }
/* La section documentaire suit la convention du site : le bloc « alignfull »
ne porte QUE le filet de séparation, et le retrait latéral est porté par
« __inner ». Le faire porter par le bloc lui-même serait perdu : la règle
« .pf-formation-page .entry-content > .alignfull » pèse 0,3,0 et remet le
« padding-inline » à zéro. Défaut mesuré au rendu de contrôle du
2026-08-22, puis corrigé ici. */
.pf-formation-page .pf-formation__qsec { border-block-end: 1px solid var(--pf-filet); }
.pf-formation-page .pf-formation__qsec .pf-formation__inner { padding-block: var(--pf-espace-l); }
.pf-formation-page .pf-formation__qsec-titre {
margin-block: 0 var(--pf-espace-xs);
font-size: 1.25rem;
font-weight: 650;
color: var(--pf-encre);
}
.pf-formation-page .pf-formation__qsec p,
.pf-formation-page .pf-formation__qsec li {
max-width: var(--pf-largeur-lecture);
line-height: 1.65;
}
.pf-formation-page .pf-formation__qsec ul { margin: var(--pf-espace-xs) 0 0 1.15em; padding: 0; }
.pf-formation-page .pf-formation__qsec li { margin-block-end: var(--pf-espace-2xs); }
/* Tableau des indicateurs — la STRUCTURE existe avant les données. Les cellules
portent un tiret cadratin, jamais un zéro ni un pourcentage : un tableau
daté et vide se lit, un chiffre non consolidé induirait en erreur. */
.pf-formation-page .pf-formation__indicateurs { margin-block: var(--pf-espace-m) 0; overflow-x: auto; }
.pf-formation-page .pf-formation__indicateurs table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.pf-formation-page .pf-formation__indicateurs th,
.pf-formation-page .pf-formation__indicateurs td {
padding: var(--pf-espace-2xs) var(--pf-espace-xs);
text-align: left;
vertical-align: top;
border: 1px solid var(--pf-filet);
}
.pf-formation-page .pf-formation__indicateurs th {
font-weight: 650;
background-color: var(--pf-papier);
}
/* ==========================================================================
ADAPTATIONS INTERMÉDIAIRES ET MOBILES — BUILD-13
========================================================================== */
@media (max-width: 1023px) {
.pf-formation-page .pf-formation__module-ident { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.pf-formation-page .pf-formation__perimetre,
.pf-formation-page .pf-formation__sessions,
.pf-formation-page .pf-formation__jours {
grid-template-columns: 1fr;
}
/* Le tableau d'organisation passe en lecture verticale : l'intitulé au-dessus
de sa valeur, sans jamais perdre le filet qui sépare deux entrées. */
.pf-formation-page .pf-formation__org { grid-template-columns: 1fr; }
.pf-formation-page .pf-formation__org dt {
padding-block: var(--pf-espace-xs) 0;
border-block-end: 0;
}
.pf-formation-page .pf-formation__org dd { padding-block-start: var(--pf-espace-3xs); }
/* La carte de module empile numéro, corps, puis lien. */
.pf-formation-page .pf-formation__module { grid-template-columns: 1fr; }
/* Empilee, la pastille ne doit pas devenir une bande vide sur toute la
largeur de la carte : elle se reduit a son contenu. */
.pf-formation-page .pf-formation__module-num {
justify-content: center;
width: fit-content;
min-width: 3.25rem;
min-height: 0;
padding: var(--pf-espace-2xs) var(--pf-espace-s);
}
}
@media (max-width: 600px) {
.pf-formation-page .pf-formation__inner {
padding-inline: var(--pf-espace-s);
padding-block: var(--pf-espace-l);
}
.pf-formation-page .pf-formation__hero .pf-formation__inner {
padding-block: var(--pf-espace-l) var(--pf-espace-m);
}
.pf-formation-page .pf-formation__fil-inner { padding-inline: var(--pf-espace-s); }
.pf-formation-page .pf-formation__qsec { padding-inline: var(--pf-espace-s); }
.pf-formation-page .pf-formation__titre { max-width: none; }
.pf-formation-page .pf-formation__module-ident { grid-template-columns: 1fr; }
.pf-formation-page .pf-formation__volet,
.pf-formation-page .pf-formation__module,
.pf-formation-page .pf-formation__dates,
.pf-formation-page .pf-formation__demande,
.pf-formation-page .pf-formation__jour { padding: var(--pf-espace-s); }
.pf-formation-page .pf-formation__formateur,
.pf-formation-page .pf-formation__organisme { grid-template-columns: 1fr; }
.pf-formation-page .pf-formation__monogramme {
justify-content: center;
width: fit-content;
min-width: 3.25rem;
min-height: 0;
padding: var(--pf-espace-2xs) var(--pf-espace-s);
}
/* AUCUN MOTIF SOUS CE SEUIL — alignement sur la planche V3, dont la vue
mobile ne porte aucun motif. Sous 600 px, le titre occupe toute la largeur
du hero : l'axe, les paliers et l'arc le croisaient. BUILD-13.1R exige
l'absence de collision avec le H1 et le chapô ; la version de poche de
BUILD-13 est donc retirée, et non seulement atténuée. Le motif reprend
normalement au-dessus du seuil. */
.pf-formation-page .pf-formation__hero::before,
.pf-formation-page .pf-formation__hero::after { content: none; }
}
/* Le motif n'est pas une information : il disparaît lorsque le contraste
renforcé est demandé, comme les autres trames du site. */
@media (prefers-contrast: more) {
.pf-formation-page .pf-formation__hero::before,
.pf-formation-page .pf-formation__hero::after { content: none; }
}
/* ==========================================================================
HUB TENDINEUX — CSS PROPRE À `tendinites-tendinopathies` (BUILD-TENDONS-V1)
Source : planche `2026-08-25_TENDONS_HUB_5G_PLANCHE_SUPERSESSION_R4.html`,
validée `PASS` par la revue Codex ciblée du 2026-08-25 · D-059.
PÉRIMÈTRE. Toutes les règles de ce bloc sont portées par des classes qui
n'existent que sur le hub tendineux : `pf-hero-clinique--fibres`,
`pf-portes--tendons`, `pf-reperes--charge`, `pf-tendons-axe*`. Aucune règle
générique n'est redéfinie, aucune page existante n'est atteinte — le
centrage approuvé des cartes d'accueil (`.pf-douleurs .pf-portes`) et le
rendu du pilier `comprendre-douleurs-persistantes` restent hors d'atteinte.
AUCUN SECOND SYSTÈME DE COMPOSANTS. Le hub réutilise `pf-kicker`,
`pf-chapo`, `pf-perimetre`, `pf-statut-encart`, `pf-reperes`, `pf-portes`,
`pf-vigilance`, `pf-sources` et `pf-byline` tels qu'ils existent. Ce bloc ne
crée qu'UNE figure — l'axe de charge — que le système ne portait pas, et
trois adaptations de mesure sur des composants existants.
========================================================================== */
/* --- 5G — fibres parallèles ------------------------------------------------
Huitième trame de la famille clinique. Géométrie relevée sur la planche R4 :
UNE famille de lignes à 84°, période 16 px, trait de 1 px en `--pf-strate-2`
sur le fond `--pf-strate`. Le jeton est employé, pas une copie : la planche
écrit `#2B2620`, qui EST `--pf-strate-2`.
Distincte des sept autres, et vérifiable : `--faisceau` porte DEUX familles
quasi verticales (86° et 94°) dont l'interférence fait le motif,
`--trajectoires` deux familles divergentes (74° et 106°), `--cordon` deux
familles obliques déformées par `skewX`. Ici : une seule famille, aucune
déformation, aucune interférence.
CE QUE CETTE TRAME NE FAIT PAS. Elle ne figure aucun tendon, aucune fibre
anatomique, aucune insertion. Elle est IDENTIQUE partout dans le hero — même
angle, même période, même opacité, d'un bord à l'autre — donc elle ne peut
pas raconter un avant/après. C'est le refus que 5L a formulé et que la
famille tient depuis : une trame qui passerait du désordre à l'ordre
encoderait « la méthode réorganise les fibres », et installerait la lecture
« douleur = fibres encore désordonnées ». Rien ici ne varie, donc rien ne
raconte.
POURQUOI CE SÉLECTEUR, ET PAS `.pf-hero-clinique--fibres`. Les sept autres
trames sont posées par une classe que `pf_clinique_trame()` ajoute au hero.
Cette entrée n'a pas pu être écrite : `inc/pf-clinique.php` est du PHP, et la
capacité d'écriture disponible refuse d'atteindre un fichier PHP hors du bac
à sable Novamira ; la contourner par une capacité d'exécution générique est
interdite par les règles du dépôt. La version précédente de ce bloc visait
donc une classe modificatrice que rien ne posait — un sélecteur qui ne
correspondait à AUCUN élément, mesuré et déclaré comme tel.
Le hero est produit AVANT le contenu — offsets mesurés dans le HTML servi :
hero 462, axe de charge 7 758, grille de portes 16 381. Aucun sélecteur de
descendance ni de voisinage ne peut donc remonter du contenu vers le hero.
`:has()` sur l'ancêtre commun le peut.
L'ancre est DOUBLÉE sur les deux composants exclusifs du hub — l'axe de
charge et sa grille de portes. Recensement exhaustif du site : ces deux noms
n'apparaissent dans aucun autre contenu, dans aucun fichier du thème, dans
aucune option ; les sept autres pages cliniques en comptent zéro et portent
chacune sa propre classe de trame. Aucune dépendance à `page-id-86`, à un
identifiant de staging ou à un domaine : le sélecteur suit le CONTENU, pas
l'installation — le rapport de réinjection du 2026-08-17 établit que les
identifiants numériques, eux, ne sont pas portables.
FALLBACK SÛR, et c'est la doctrine que le thème tient déjà en douze endroits :
là où `:has()` n'existe pas, la règle est simplement ignorée et le hub
retrouve exactement le DÉFAUT SÛR de `pf_clinique_trame()` — un aplat sombre
uni. Jamais pire que sans cette règle.
Le socle `[class*="pf-hero-clinique--"]::before` ne s'applique pas ici, faute
de classe modificatrice : `content`, `position` et `pointer-events` sont donc
redéclarés. `.pf-hero-clinique` porte déjà `position: relative` et
`overflow: hidden`, `__inner` porte `z-index: 1` : la trame reste derrière le
texte.
COUPLAGE ASSUMÉ. Si l'axe de charge ET la grille de portes disparaissaient un
jour du contenu, la trame disparaîtrait avec eux. C'est un effet visible, pas
silencieux — et préférable à un identifiant de page codé en dur. */
body.pf-clinique:has(.pf-tendons-axe, .pf-portes--tendons) .pf-hero-clinique::before {
content: "";
position: absolute;
pointer-events: none;
inset: -30% -14%;
background: repeating-linear-gradient(84deg, transparent 0 7px, var(--pf-strate-2) 7px 8px, transparent 8px 16px);
opacity: 0.9;
}
/* --- Mesure des figures : aucune règle, et c'est mesuré ---------------------
Une première version de ce bloc bornait les figures à 53,75 rem, en visant
`.entry-content[data-ast-blocks-layout] > :where(…)`. Cette règle NE
S'APPLIQUAIT À RIEN : le gabarit clinique enveloppe chaque section dans
`.pf-sec > .pf-sec__inner`, si bien qu'aucune figure n'est enfant direct de
`.entry-content`. Mesuré au banc, `max-width` valait `none`.
Elle n'est pas réécrite avec un sélecteur qui fonctionnerait, parce que la
borne elle-même ne se transpose pas. La planche donne 860 px à l'axe et
900 px aux portes dans une page de 920 px de contenu — 93 % et 98 % de sa
mesure. Le gabarit rend ses sections dans une bande de 1 152 px : les
mêmes proportions y vaudraient 1 075 et 1 130 px, soit la bande. Une borne
absolue produirait donc une figure plus étroite que la planche, pas plus
fidèle.
Mesuré à 1440 px : prose 641 px, figures 1 152 px, `pf-sources` 1 152 px.
Les figures prennent exactement la mesure que la famille clinique donne
déjà à sa bibliographie. Aucune règle n'est ajoutée ici. */
/* --- Quatre portes : 2 × 2 -------------------------------------------------
`.pf-portes` vaut trois colonnes au-dessus de 1100 px — la mesure de
l'accueil, qui en porte cinq ou six. Le hub en porte QUATRE : trois colonnes
y produiraient une rangée de trois puis une porte seule, le défaut de
quinconce que le propriétaire a relevé sur l'accueil le 2026-08-25. La
planche R4 les donne en 2 × 2 ; la règle ne vaut qu'au-dessus du palier, en
dessous duquel `.pf-portes` passe déjà à deux colonnes puis à une. */
@media (min-width: 1101px) {
.pf-portes--tendons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* --- Le triptyque de la charge : trois colonnes ----------------------------
`.pf-reperes` vaut deux colonnes à partir de 640 px. Les trois repères de la
charge forment un SPECTRE — trop peu, adapté, trop — et 2 + 1 casserait la
lecture en isolant le troisième terme. Trois colonnes seulement là où la
mesure le permet. */
@media (min-width: 900px) {
.pf-reperes--charge { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* --- Axe de charge ---------------------------------------------------------
La seule figure que le système de composants ne portait pas. Trois zones
contiguës et une bande de tolérance en pointillés, décalée et débordante.
CE QU'ELLE MONTRE : un principe — adaptation, dose, récupération.
CE QU'ELLE NE MONTRE PAS, et la légende de la page le dit en toutes
lettres : aucun seuil universel, aucun protocole, aucune genèse de
tendinopathie. La bande déborde volontairement des zones et ne s'aligne sur
aucune frontière : sa position et sa largeur ne se lisent pas sur un dessin.
Aucune image, aucun SVG, aucune requête réseau — même technique que les
trames. Le rôle `img` et le libellé accessible sont portés par le contenu. */
.pf-tendons-axe {
margin-block-start: var(--pf-espace-m);
padding: var(--pf-espace-m);
border: 1px solid var(--pf-filet);
background-color: var(--pf-fond);
}
.pf-tendons-axe__intitule {
margin-block: 0 var(--pf-espace-xs);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
text-align: center;
color: var(--pf-encre-2);
}
.pf-tendons-axe__zones {
position: relative;
display: flex;
min-height: 4.625rem;
border: 1px solid var(--pf-filet);
}
.pf-tendons-axe__zone {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: var(--pf-espace-2xs) var(--pf-espace-xs);
font-size: 0.8125rem;
line-height: 1.45;
text-align: center;
color: var(--pf-encre);
}
.pf-tendons-axe__zone--faible {
background: repeating-linear-gradient(84deg, var(--pf-ivoire) 0 6px, color-mix(in srgb, var(--pf-filet) 45%, var(--pf-ivoire)) 6px 7px);
}
.pf-tendons-axe__zone--adaptee {
border-inline: 1px solid var(--pf-filet);
background-color: color-mix(in srgb, var(--pf-filet) 55%, var(--pf-papier));
}
.pf-tendons-axe__zone--au-dela {
background: repeating-linear-gradient(84deg, color-mix(in srgb, var(--pf-marque) 10%, var(--pf-fond)) 0 6px, color-mix(in srgb, var(--pf-marque) 24%, var(--pf-fond)) 6px 7px);
}
/* Débordement volontaire de 9 px en haut et en bas : la bande n'est pas une
zone de plus, elle se superpose et déborde — c'est ce qui l'empêche d'être
lue comme une quatrième catégorie. */
.pf-tendons-axe__bande {
position: absolute;
inset-block: -9px;
inset-inline-start: 31%;
width: 38%;
border: 1.5px dashed var(--pf-accent);
pointer-events: none;
}
.pf-tendons-axe__legende {
margin-block: var(--pf-espace-s) 0;
font-size: 0.75rem;
font-weight: 600;
text-align: center;
color: var(--pf-accent);
}
.pf-tendons-axe__graduation {
display: flex;
justify-content: space-between;
margin-block: var(--pf-espace-2xs) 0;
font-size: 0.6875rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pf-encre-2);
}
@media (max-width: 600px) {
.pf-tendons-axe { padding: var(--pf-espace-s); }
.pf-tendons-axe__zone {
padding: var(--pf-espace-2xs);
font-size: 0.75rem;
line-height: 1.35;
}
}
/* ==========================================================================
SPOKE TENDINOPATHIE PERSISTANTE — CSS PROPRE À `tendinopathie-persistante`
Source : planche `2026-08-25_5M_PLANCHE_TENDINOPATHIE_PERSISTANTE_SUPERSESSION_R1.html`,
validée `PASS — 0 C, 0 B, 3 N` par la revue Codex ciblée du 2026-08-25 · D-060.
PÉRIMÈTRE. Toutes les règles de ce bloc sont portées par des classes qui
n'existent que sur ce spoke : `pf-dimensions*` et `pf-portes--persistance`.
Recensement exhaustif effectué avant écriture : ces deux noms n'apparaissent
dans AUCUN autre contenu (requête `LIKE` sur tous les `post_content`, hors
révisions), dans AUCUN fichier `.php` / `.css` / `.js` du thème enfant
(parcours récursif), dans AUCUNE option et dans AUCUNE `postmeta`. Une seule
page du site matche l'ancre.
AUCUN SECOND SYSTÈME DE COMPOSANTS. Le spoke réutilise `pf-kicker`,
`pf-chapo`, `pf-perimetre`, `pf-statut-encart`, `pf-reperes`, `pf-portes`,
`pf-vigilance`, `pf-sources`, `pf-byline` et `pf-retour` tels qu'ils
existent. Ce bloc ne crée qu'UNE figure — les trois dimensions — que le
système ne portait pas, plus une mesure de grille et un état de lien.
========================================================================== */
/* --- 5M — strates décalées -------------------------------------------------
Neuvième trame de la famille clinique. Géométrie relevée sur la planche R1 :
DEUX familles strictement horizontales (180°), périodes 34 px et 62 px,
traits de 1 px en `--pf-strate-2` et `#31291F`, opacités 0,9 et 0,55.
Distincte des huit autres, et vérifiable : `--segments` (5R) est la plus
proche mais ses deux familles sont INCLINÉES (177° et 171°) et ses périodes
bien plus larges (61 px et 177 px) ; `--fibres` (hub) est une famille unique
à 84°, quasi verticale ; `--axial` et `--lignes` ne portent qu'une couche.
Ici : deux familles, horizontales exactes, périodes serrées.
CE QUE CETTE TRAME NE FAIT PAS. Elle ne figure aucun tendon, aucune fibre,
aucune insertion, et surtout aucune chronologie — elle est IDENTIQUE d'un
bord à l'autre du hero, même angle, même période, même opacité. Elle ne peut
donc raconter aucun avant/après. C'est le refus que la famille tient depuis
5L : une trame qui passerait du désordre à l'ordre encoderait « la méthode
réorganise les fibres ». Rien ici ne varie, donc rien ne raconte. Le motif
dit la TEMPORALITÉ — des strates qui se déposent — pas la matière.
POURQUOI CE SÉLECTEUR, ET PAS `.pf-hero-clinique--strates`. Les huit autres
trames sont posées par une classe que `pf_clinique_trame()` ajoute au hero.
Cette entrée n'a PAS pu être écrite : `inc/pf-clinique.php` est du PHP, et
`novamira/edit-file` refuse explicitement d'atteindre un fichier PHP hors du
bac à sable — refus obtenu et consigné dans cette passe, non supposé. La
contourner par une capacité d'exécution générique est interdite par D-015 et
par `CLAUDE.md` §3. Même doctrine, et même sélecteur de repli, que le hub
tendineux au 2026-08-25.
Le hero est produit AVANT le contenu : aucun sélecteur de descendance ni de
voisinage ne peut remonter du contenu vers le hero. `:has()` sur l'ancêtre
commun le peut.
L'ancre est DOUBLÉE sur les deux composants exclusifs du spoke — la figure
des trois dimensions et sa grille de portes — pour qu'aucun des deux ne
porte seul la trame.
FALLBACK SÛR. Là où `:has()` n'existe pas, la règle est ignorée et le hero
retrouve exactement le DÉFAUT SÛR de `pf_clinique_trame()` : un aplat sombre
uni. Jamais pire que sans cette règle.
Le socle `[class*="pf-hero-clinique--"]::before` ne s'applique pas ici, faute
de classe modificatrice : `content`, `position` et `pointer-events` sont donc
redéclarés. `.pf-hero-clinique` porte déjà `position: relative` et
`overflow: hidden`, `__inner` porte `z-index: 1` : la trame reste derrière le
texte. Sous 782 px, `.pf-clinique .pf-hero-clinique::after` est déjà masqué
par la règle existante — la seconde couche disparaît donc d'elle-même sur
mobile, conformément à la doctrine de la famille.
COUPLAGE ASSUMÉ. Si la figure ET la grille de portes disparaissaient un jour
du contenu, la trame disparaîtrait avec elles. C'est un effet visible, pas
silencieux — et préférable à un identifiant de page codé en dur, que le
rapport de réinjection du 2026-08-17 a établi comme non portable. */
body.pf-clinique:has(.pf-dimensions, .pf-portes--persistance) .pf-hero-clinique::before {
content: "";
position: absolute;
pointer-events: none;
inset: -30% -14%;
background: repeating-linear-gradient(180deg, transparent 0 13px, var(--pf-strate-2) 13px 14px, transparent 14px 34px);
opacity: 0.9;
}
body.pf-clinique:has(.pf-dimensions, .pf-portes--persistance) .pf-hero-clinique::after {
content: "";
position: absolute;
pointer-events: none;
inset: -30% -14%;
background: repeating-linear-gradient(180deg, transparent 0 27px, #31291F 27px 28px, transparent 28px 62px);
opacity: 0.55;
}
/* --- Figure des trois dimensions -------------------------------------------
La planche porte un SVG unique de 800 × 250 contenant ses propres libellés.
Transposé tel quel, il se réduirait à 0,49× sur un mobile de 390 px et ses
textes tomberaient sous 6 px. La figure est donc reconstruite en HTML — un
libellé réel par piste, et un tracé SVG sans aucun texte —, ce qui reflue
naturellement. La géométrie des trois courbes est reprise de la planche,
translatée dans un `viewBox` par piste ; `preserveAspectRatio: none` étire
horizontalement, et `vector-effect: non-scaling-stroke` maintient l'épaisseur
du trait constante à toute largeur.
CE QUE LA FIGURE NE DIT PAS. Aucune échelle, aucune valeur, aucune durée,
aucun ordre : les trois pistes sont SÉPARÉES, chacune sur sa propre ligne de
base, sans axe commun. C'est exactement la correction B03 de 5M.4 — des
courbes superposées sur un axe partagé suggéraient une séquence-type. Le
texte de la figure et le `role="img"` le disent, et l'encadré `pf-perimetre`
qui la suit le répète. */
.pf-clinique .pf-dimensions {
margin-block: var(--pf-espace-m) 0;
padding: var(--pf-espace-m);
border: 1px solid var(--pf-filet);
background-color: var(--pf-fond);
}
.pf-clinique .pf-dimensions__intitule {
margin: 0 0 var(--pf-espace-2xs);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pf-encre-2);
text-align: center;
}
.pf-clinique .pf-dimensions__amorce {
margin: 0 0 var(--pf-espace-s);
font-size: 0.875rem;
line-height: 1.5;
color: var(--pf-encre-2);
}
.pf-clinique .pf-dimensions__piste {
display: grid;
grid-template-columns: 7.5rem 1fr;
align-items: center;
gap: var(--pf-espace-xs);
margin-block-start: var(--pf-espace-2xs);
}
.pf-clinique .pf-dimensions__nom {
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.3;
color: var(--pf-encre);
}
.pf-clinique .pf-dimensions__nom--douleur { color: var(--pf-accent); }
.pf-clinique .pf-dimensions__nom--imagerie { color: var(--pf-encre-2); }
.pf-clinique .pf-dimensions__nom--capacite { color: #2F6B52; }
.pf-clinique .pf-dimensions__trace {
display: block;
width: 100%;
height: 3.5rem;
}
.pf-clinique .pf-dimensions__base {
stroke: var(--pf-filet);
stroke-width: 1;
}
.pf-clinique .pf-dimensions__trace path { stroke-width: 2; }
.pf-clinique .pf-dimensions__trace--douleur path { stroke: var(--pf-accent); }
.pf-clinique .pf-dimensions__trace--imagerie path { stroke: #8A8175; stroke-dasharray: 7 5; }
.pf-clinique .pf-dimensions__trace--capacite path { stroke: #2F6B52; }
.pf-clinique .pf-dimensions__mesure {
margin: var(--pf-espace-s) 0 0;
padding-block-start: var(--pf-espace-2xs);
border-block-start: 1px dotted var(--pf-filet);
font-size: 0.8125rem;
line-height: 1.5;
color: var(--pf-encre-2);
}
@media (max-width: 640px) {
.pf-clinique .pf-dimensions { padding: var(--pf-espace-s); }
.pf-clinique .pf-dimensions__piste { grid-template-columns: 1fr; gap: var(--pf-espace-3xs); }
.pf-clinique .pf-dimensions__trace { height: 2.75rem; }
}
/* --- Grille des quatre portes ----------------------------------------------
`.pf-portes` est une grille à trois colonnes : quatre portes y produiraient
une rangée orpheline. Deux colonnes à partir de 640 px donnent 2 × 2. Sous
ce seuil, la grille générique retombe déjà sur une colonne. Le modificateur
n'existe que sur ce spoke — il ne peut atteindre ni l'accueil, ni le hub, ni
`/vos-douleurs/`. */
@media (min-width: 640px) {
.pf-clinique .pf-portes--persistance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* --- Renvoi de la carte tendons sur l'accueil, à l'état lié -----------------
Le renvoi `pf-porte__renvoi` était rendu « comme un libellé, jamais comme un
lien actif », faute de destination. La destination existe désormais et le
renvoi devient un lien. D-058 §3 et D-059 §3 le maintiennent en ACCÈS
SECONDAIRE : il ne doit pas se lire comme une septième porte. Le lien
conserve donc l'encre secondaire du renvoi — et non l'accent des titres de
porte — et prend un soulignement pour l'affordance.
CONTRASTES MESURÉS, non supposés, sur le rendu réel :
`--pf-encre-2` #56514B sur `--pf-fond` #FAF9F6 = 7,46:1 ;
sur `--pf-papier` #F3EFE7, fond au survol de la carte = 6,84:1.
Les deux dépassent le seuil AA de 4,5:1 pour du texte normal. */
.pf-clinique .pf-porte__renvoi a,
.pf-douleurs .pf-porte__renvoi a {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-thickness: 1px;
}
.pf-clinique .pf-porte__renvoi a:hover,
.pf-douleurs .pf-porte__renvoi a:hover {
color: var(--pf-accent);
}
.pf-clinique .pf-porte__renvoi a:focus-visible,
.pf-douleurs .pf-porte__renvoi a:focus-visible {
outline: 2px solid var(--pf-accent);
outline-offset: 3px;
}
/* ==========================================================================
FOCUS CLAVIER DES CHAMPS DU FORMULAIRE — CORRECTIF WCAG 2.4.7
LE DÉFAUT. La règle générique `input:focus-visible` du socle (ligne 234) est
correcte, mais elle perd la cascade contre une règle du bloc inline
`astra-theme-css-inline-css` :
input[type="text"]:focus, …, select:focus, textarea:focus
{ border-color:#046BD2; box-shadow:none; outline:none; }
Spécificité (0,2,1) contre (0,1,1) : Astra l'emporte. Résultat mesuré au
clavier sur la page 66 : `outline-style: none` sur « Nom et prénom »,
« Adresse électronique » et « Année », et aucun contour visible sur le
« Message » — alors que `:focus-visible` correspond bien. Les radios, le
bouton d'envoi et les liens n'étaient pas touchés.
POURQUOI CE SÉLECTEUR-LÀ. `body.pf-formation-page` porte la spécificité à
(0,3,2), ce qui dépasse Astra sans recourir à `!important`. Le préfixe `body`
n'est pas décoratif : c'est lui qui fait la différence, la classe seule
n'apportant que (0,2,2) sur `input[type="…"]`.
PORTÉE VOLONTAIREMENT ÉTROITE. Seuls les types réellement présents dans le
formulaire sont visés : `text`, `email`, et le `textarea`. Astra neutralise
aussi `number`, `url`, `password`, `search`, `tel`, `date` et `select` : si
un champ de l'un de ces types était ajouté à une page Formation, le défaut
reviendrait et CETTE RÈGLE DEVRAIT SUIVRE. C'est le coût assumé d'une portée
restreinte à ce qui est testé.
RÉSULTAT MESURÉ. Contour relevé dans les pixels du rendu, à 1440, 768 et
390 px, après navigation clavier réelle :
- Nom et prénom, Adresse électronique, Année : contour de 3 px sur les
quatre côtés. Il n'y en avait AUCUN avant ce correctif.
- Message : cette règle lui appliquait, elle aussi, un contour de 3 px
conforme sur les quatre côtés. Il est de nouveau couvert par ce groupe,
et les quatre champs partagent donc le même anneau d'accent.
Les radios et le bouton d'envoi restent à 3 px : aucune régression.
RIEN NE CHANGE AU REPOS. Ces déclarations ne s'appliquent qu'à l'état
`:focus-visible`, c'est-à-dire à la navigation clavier. Aucune géométrie
n'est touchée : `outline` ne participe pas au flux, donc aucun déplacement
de mise en page.
========================================================================== */
body.pf-formation-page input[type="text"]:focus-visible,
body.pf-formation-page input[type="email"]:focus-visible,
body.pf-formation-page textarea:focus-visible {
outline: 3px solid var(--pf-accent);
outline-offset: 2px;
}
/* ==========================================================================
FOCUS CLAVIER — BOUTON GLOBAL « RETOUR EN HAUT »
Passe du 2026-08-28. Technique WCAG C40, indicateur bicolore.
LE DÉFAUT. Ce bouton peignait 3 px de `var(--pf-accent)`, mais il flotte
au-dessus du pied de page `#221E1A`, où ce contour ne donne que 2,5893:1
— sous le seuil de 3:1 de WCAG 1.4.11. Mesure stable : identique
immédiatement et après stabilisation.
POURQUOI DEUX COULEURS. Un contour d'une seule couleur ne peut pas être
contrasté à la fois sur fond clair et sur fond sombre. C40 superpose deux
bandes : la claire ressort sur le sombre, la sombre ressort sur le clair.
Il y a donc toujours une bande d'au moins 3:1 quel que soit ce qui se
trouve derrière — et ce bouton, précisément, traverse les deux. Mesuré :
14,4338:1 sur fond clair, 15,7224:1 sur le pied de page sombre.
POURQUOI DES COULEURS LITTÉRALES. `var(--pf-accent)` ne vaut pas la même
chose partout : #AA3814 à la racine, une teinte plus sourde à l'intérieur
du conteneur Formation. Un indicateur qui doit rester prévisible sur tout
le site ne peut pas dépendre d'une variable contextuelle.
GÉOMÉTRIE. `outline` de 2 px à l'offset 0, puis `box-shadow` d'étalement
4 px : l'outline recouvre les 2 px internes de l'ombre, ce qui laisse voir
2 px de chaque couleur. Ni l'un ni l'autre ne participe au flux : aucun
déplacement de mise en page, aucun reflow.
COULEURS FORCÉES. Le `box-shadow` y est supprimé par le système, pas
l'`outline`. C'est pourquoi l'indicateur ne repose JAMAIS sur la seule
ombre — vérifié sous `forced-colors: active`.
SPÉCIFICITÉ, SANS `!important`. (1,1,0), ce qui dépasse la règle
`#ast-scroll-top { outline: inherit }` d'Astra (1,0,0).
PORTÉE GLOBALE, ASSUMÉE. Ce bouton est un composant d'Astra présent sur
TOUT le site et traversant des arrière-plans clairs et sombres : la règle
est délibérément globale et remplace une version bornée aux pages
Formation, afin qu'il n'existe qu'une seule définition.
CE BLOC NE CONCERNE QUE CE BOUTON. Un temps, la zone « Message » du
formulaire a reçu le même indicateur. C'était fondé sur un constat de
« contour de 1 px » qui s'est révélé être une ERREUR DE MESURE : le
relevé avait été fait pendant la transition de 0,2 s du champ. Le constat
est rétracté et le double anneau a été retiré du champ — les quatre
champs du formulaire partagent de nouveau l'anneau d'accent, plus haut
dans ce fichier.
========================================================================== */
#ast-scroll-top:focus-visible {
outline: 2px solid #F9F9F9;
outline-offset: 0;
box-shadow: 0 0 0 4px #221E1A;
}