) en item séparé et déchirent la phrase. Le
reste un bloc normal ; c'est LUI qu'on centre dans sa zone. */
align-self: center; margin-top: 0;
}
}
.chiffres { background: var(--teinte); max-width: none; }
/* =========================================================================
34. Carrousel des preuves, façon « exemple » : carte active au centre,
voisines qui dépassent des deux côtés, points dessous.
========================================================================= */
/* pleine largeur de page (retour propriétaire) : le carrousel s'évade
du wrap — technique du débord centré, contenue par le clip du body */
.carrousel--preuves {
width: 100vw;
margin-inline: calc(50% - 50vw);
}
.carrousel--preuves { --carte: min(30vw, 380px); }
.carrousel--preuves .carrousel__piste {
/* cartes plus petites, hauteur alignée sur le PLUS GRAND texte :
l'étirement flex (align-items par défaut) donne à toutes la hauteur
de la plus fournie — plus de vide en pied de carte. L'écart entre
cartes est calculé pour que la rangée touche les deux bords quand
une carte du milieu est centrée : g = 50vw − 1,5 × largeur. */
display: flex;
scroll-snap-type: x mandatory;
padding-inline: calc(50vw - var(--carte) / 2);
}
.carrousel--preuves .preuve {
flex: 0 0 var(--carte);
/* rapprochées : chaque carte mord de 10 pour cent sur la suivante —
l'éventail (z-index du script) et l'estompage font lire les couches */
margin-inline-end: calc(var(--carte) * -0.1);
position: relative;
}
@media (max-width: 760px) {
.carrousel--preuves { --carte: 78vw; }
}
.carrousel--preuves .preuve:last-child { margin-inline-end: 0; }
/* les cartes recouvertes reculent : leur contenu s'estompe pour que les
bribes de texte qui dépassent se lisent comme des couches, pas comme
des phrases coupées */
.carrousel--preuves .preuve > * { transition: opacity .3s ease; }
.carrousel--preuves .preuve:not(.est-centrale) > * { opacity: .45; }
.carrousel--preuves .preuve {
scroll-snap-align: center;
background: var(--teinte);
border-color: transparent;
transition: background-color .3s ease, box-shadow .3s ease, translate .3s ease;
}
.carrousel--preuves .preuve.est-centrale {
background: var(--surface);
translate: 0 -6px;
box-shadow: 0 18px 38px var(--ombre);
}
.carrousel--preuves .carrousel__cmd { justify-content: center; }
@media (prefers-reduced-motion: reduce) {
.carrousel--preuves .preuve { transition: none; translate: none; }
}
/* =========================================================================
35. Piles raster — « cartes » et « table »
Ces deux pièces reviennent au DESSIN FOURNI plutôt qu'à la
vectorisation maison : celle-ci perdait les aplats blancs (les cartes
se traversaient) et fabriquait des masses noires parasites sous la
table. Deux couches empilées, détourées depuis la source (voir
outils/couches_raster.py) :
· accent (l'ocre seul) DESSOUS, pour rester animable au défilement ;
· encre (trait + aplats blancs, ocre troué) DESSUS.
Le z-index est explicite : sans lui, la couche absolue passerait
au-dessus du flux et l'ocre recouvrirait son propre contour.
========================================================================= */
.croquis-pile { position: relative; }
.croquis-pile__accent {
position: absolute; inset: 0; z-index: 0; display: block;
}
.croquis-pile__encre { position: relative; z-index: 1; display: block; }
.croquis-pile picture img { display: block; width: 100%; height: auto; }
/* Thème sombre : l'inversion de la seule couche d'encre donne exactement
la lecture attendue — trait pâle, aplats sombres. L'ocre, lui, n'est
pas inversé : il reste l'ocre de marque dans les deux thèmes. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="clair"]) .croquis-pile__encre { filter: invert(1); }
}
:root[data-theme="sombre"] .croquis-pile__encre { filter: invert(1); }
/* =========================================================================
36. « Pour qui » — le tirage du visuel 4, à droite du bloc de titre
========================================================================= */
.pourqui__tete {
display: grid; grid-template-columns: 1fr;
gap: clamp(28px, 4vw, 56px);
align-items: center;
margin-bottom: clamp(30px, 3.4vw, 48px);
}
@media (min-width: 950px) {
.pourqui__tete { grid-template-columns: 1.1fr .9fr; }
}
.pourqui__tete .section__head { margin-bottom: 0; }
.pourqui__photo { rotate: 1.2deg; }
.pourqui__photo img { height: clamp(230px, 26vw, 330px); object-position: 50% 45%; }
@media (max-width: 700px) { .pourqui__photo { rotate: none; max-width: 480px; } }
/* =========================================================================
37. Pages Ressources (BRIEF_RESSOURCES.md)
-------------------------------------------------------------------------
Trois objets seulement, et uniquement parce que la v4 n'avait aucun
équivalent : un fil d'Ariane, la liste d'entrées du hub, la liste de
sources numérotée. Tout le reste de ces pages réutilise l'existant —
.page-head, .prose, .billet, .ref, .cta-milieu, .horschamp — comme le
demande le brief §3.2.
========================================================================= */
/* Fil d'Ariane. Discret par construction : c'est un repère de position,
pas un chemin qu'on invite à parcourir. */
.fil {
font-size: .9rem; color: var(--texte-doux);
margin-bottom: clamp(14px, 1.6vw, 22px);
}
.fil a { color: inherit; }
.fil a:hover { color: var(--texte-lien); }
.fil span { margin-inline: .4em; opacity: .55; }
/* Les entrées du hub, en cartes : un dessin, la question entière, une
phrase d'appel. Le libellé du lien EST la question (brief §4) — pas de
« en savoir plus », qui ne dit ni où l'on va ni pourquoi. */
.cartes-ress {
list-style: none; margin: 0; padding: 0;
display: grid; gap: clamp(20px, 2.4vw, 30px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
/* Deux colonnes et non `auto-fit` au-delà : à quatre entrées, l'ajustement
automatique donnait une rangée de trois puis une carte seule, ce qui se
lit comme un oubli. Un carré 2 x 2 se lit comme un ensemble. */
@media (min-width: 880px) { .cartes-ress { grid-template-columns: repeat(2, 1fr); } }
.carte-ress { display: flex; }
/* Toute la carte est cliquable, et c'est UN seul lien : deux zones
cliquables pour une même destination doublent la tabulation sans rien
apporter. */
.carte-ress__lien {
display: flex; flex-direction: column; width: 100%;
background: var(--surface);
border: 1px solid var(--bordure-douce);
border-radius: var(--r2);
padding: clamp(20px, 2.2vw, 28px);
text-decoration: none; color: inherit;
transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.carte-ress__lien:hover, .carte-ress__lien:focus-visible {
box-shadow: 0 14px 30px var(--ombre-portee);
border-color: var(--pale);
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .carte-ress__lien { transition: none; }
.carte-ress__lien:hover { transform: none; } }
/* Boîte CARRÉE, parce que les dessins le sont devenus : les variantes de
`assets/img/carre/` partagent toutes le viewBox `0 0 1000 1000`, sujet
centré à 8 % de marge (outils/carrer_croquis.py). La régularité de la
rangée vient de là et non d'ici — en CSS, une hauteur fixe cadre la
boîte du fichier, jamais le sujet. */
.carte-ress__visuel {
display: grid; place-items: center;
width: clamp(120px, 12vw, 156px);
aspect-ratio: 1;
margin-bottom: clamp(14px, 1.6vw, 20px);
}
.carte-ress__visuel svg { width: 100%; height: 100%; }
.carte-ress__titre {
font-size: clamp(1.05rem, .98rem + .4vw, 1.22rem);
line-height: 1.28; margin: 0 0 .55rem;
}
.carte-ress__lien:hover .carte-ress__titre { color: var(--texte-lien); }
.carte-ress__accroche { display: block; color: var(--texte-doux); font-size: 1rem; }
/* La capsule repliable des sources. natif : pas de script,
état annoncé aux lecteurs d'écran, ouvrable au clavier — et si les
scripts sont bloqués, les sources restent atteignables.
Bleu nuit et pleine largeur du wrap : sur une page de preuve, le bloc
des sources est un objet à part, pas la fin du texte courant. */
.capsule {
background: var(--surface-nuit); color: var(--sur-nuit);
border-radius: var(--pill);
margin-block: clamp(30px, 3.4vw, 46px);
}
.capsule[open] { border-radius: var(--r2); }
.capsule__tete {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: clamp(18px, 2vw, 26px) clamp(24px, 3vw, 40px);
cursor: pointer; list-style: none;
font-weight: 800; font-size: clamp(1.05rem, .98rem + .4vw, 1.22rem);
/* SC 2.5.8 : la tête sert de cible tactile, elle doit rester
confortablement au-dessus de 24 px. */
min-height: 44px;
border-radius: inherit;
}
.capsule__tete::-webkit-details-marker { display: none; }
.capsule__titre { font-size: inherit; font-weight: inherit; margin: 0; }
.capsule__tete:hover { color: var(--pale); }
/* Le chevron est dessiné en CSS et non posé en balise : le modèle de
contenu de admet UN élément de titre, ou du contenu de
phrasé — pas un titre PLUS un span. Le titre étant devenu un
(navigation par titres au lecteur d'écran), la flèche doit sortir du
flux de contenu. */
.capsule__tete::after {
content: ""; flex: none;
width: 11px; height: 11px;
border-right: 2.4px solid currentColor;
border-bottom: 2.4px solid currentColor;
rotate: 45deg; translate: 0 -3px;
transition: rotate .22s ease, translate .22s ease;
}
.capsule[open] .capsule__tete::after { rotate: 225deg; translate: 0 3px; }
@media (prefers-reduced-motion: reduce) { .capsule__tete::after { transition: none; } }
.capsule__corps {
padding: clamp(20px, 2.2vw, 28px) clamp(24px, 3vw, 40px) clamp(24px, 2.8vw, 34px);
border-top: 1px solid rgba(255,255,255,.14);
/* Le texte des références reste à mesure lisible même si le bloc, lui,
prend toute la largeur. */
max-width: 78ch;
}
.capsule__corps p { color: rgba(255,255,255,.82); }
/* Les liens DOI en bleu pâle : le bleu-canard des liens du site donne
1,4:1 sur le bleu nuit. Le pâle donne 8:1. */
.capsule a { color: var(--pale); }
.capsule a:hover { color: #FFFFFF; }
.capsule .sources-liste li { color: var(--sur-nuit); }
/* La note de méthode qui ferme le hub : pleine largeur, en petit, mais
en deux colonnes au-delà de 900 px — une ligne de 120 caractères ne se
lit pas, même en petit corps. */
.note-methode {
margin-top: clamp(34px, 4vw, 56px);
padding-top: clamp(22px, 2.4vw, 30px);
border-top: 1px solid var(--bordure-douce);
font-size: .92rem; line-height: 1.6; color: var(--texte-doux);
}
.note-methode p { margin: 0 0 .9em; }
@media (min-width: 900px) {
.note-methode { columns: 2; column-gap: clamp(34px, 4vw, 64px); }
.note-methode p { break-inside: avoid; }
}
.mention-legale { font-size: .88rem; color: var(--texte-doux); font-style: italic; }
/* Liste de sources numérotée. Le DOI est sur sa propre ligne : une URL
longue coupée au milieu d'une phrase est illisible. */
.sources-liste { padding-left: 1.4rem; }
.sources-liste li { margin-bottom: .85rem; line-height: 1.5; }
.sources-liste a { font-size: .94rem; word-break: break-word; }
/* =========================================================================
38. Page /l-outil/ — l'explorateur (BRIEF_PAGE_OUTIL.md)
-------------------------------------------------------------------------
Registre SOBRE : pas de scotch, pas d'inclinaison. Le risque de cette
page est l'allure de panneau d'administration ; tout ce qui suit vise
à l'éviter — pas de cases, pas de facettes, pas de compteurs.
========================================================================= */
.axe__grille { display: grid; gap: clamp(26px, 3vw, 44px); }
@media (min-width: 900px) {
.axe__grille { grid-template-columns: minmax(240px, 320px) 1fr; align-items: start; }
}
/* --- la colonne de gauche --------------------------------------------- */
.entrees { display: grid; gap: 2px; }
.entree {
display: block; width: 100%; text-align: left;
/* Densifié (§2.2) : 44 px de haut au lieu de ~74, pour voir douze entrées
au lieu de six. C'est une EXCEPTION assumée à l'échelle typographique
du site — un panneau dense n'est pas du texte courant, et cette page
s'adresse à des professionnels de santé. Ce n'est pas une régression :
ne pas « corriger » vers l'échelle générale. Le minimum de 44 px de la
SC 2.5.8 reste tenu, et le panneau d'accessibilité agrandit toujours. */
min-height: 44px; padding: .5em .85em; font-size: .97rem; line-height: 1.3;
font: inherit; font-weight: 600; color: var(--texte);
background: transparent; border: 0; border-radius: var(--r1);
cursor: pointer;
transition: background-color .16s ease, opacity .16s ease, color .16s ease;
}
.entree:hover { background: var(--teinte); }
.entree[aria-current="true"] {
background: var(--surface-nuit); color: var(--sur-nuit); font-weight: 800;
}
/* L'estompage de la lentille passe par l'OPACITÉ SEULE : jamais
display:none, jamais aria-hidden. Un domaine estompé reste cliquable,
focusable et lu par un lecteur d'écran — on hiérarchise, on n'enlève
rien. Le focus ramène l'opacité pleine, sinon la cible disparaît sous
les doigts de qui navigue au clavier. */
@media (prefers-reduced-motion: reduce) { .entree { transition: none; } }
/* --- la fiche : un visuel en haut, le texte en bas (§3.1) ------------------ */
.fiche {
background: var(--surface);
border: 1px solid var(--bordure-douce);
border-radius: var(--r2);
/* densifié (§2.2) : un panneau n'est pas du texte courant */
padding: clamp(16px, 1.6vw, 22px);
display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 18px);
}
/* §4 — le fondu des visuels. Pas de pellicule empilée : les fiches sont
déjà exclusives, et passer de `display: none` à visible RELANCE une
animation CSS. Un fondu de 280 ms suffit donc, sans une ligne de
JavaScript ni onze copies du même dessin dans le DOM.
Neutralisé sous mouvement réduit : bascule instantanée, pas
d'atténuation. */
@keyframes fiche-apparait { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
.has-js .fiche:not([hidden]) { animation: fiche-apparait .28s ease both; }
}
/* Sans JS, les 81 fiches s'affichent les unes sous les autres : c'est long
mais complet. Avec JS, seule l'active reste. */
.fiche + .fiche { margin-top: clamp(20px, 2.4vw, 30px); }
.has-js .fiche[hidden] { display: none; }
/* Le visuel domine : capture sur l'onglet Domaine, croquis en grand sur
Pathologie et Type, qui n'ont pas de capture (§3.2). */
/* Le visuel est dimensionné par son RATIO, pas par la place restante.
Premier essai en `flex: 1 1 auto` : le texte le comprimait jusqu'à zéro
sur les fiches denses, `min-height: 0` autorisant l'écrasement complet.
Un 16:10 pleine largeur occupe naturellement la majorité de la colonne
(~440 px pour 705 de large), ce que demande le §3.1, et le plafond
`46vh` l'empêche de tout manger sur un écran haut. */
.fiche__visuel { margin: 0; flex: none; }
.fiche__visuel picture { display: block; }
.fiche__visuel--capture img {
display: block; width: 100%; height: auto;
aspect-ratio: 16 / 10; /* place réservée : aucun décalage le jour
où les vrais visuels remplacent les placeholders */
max-height: 38vh; /* ~60 % de la colonne, la cible du §3.1 */
object-fit: cover;
border-radius: var(--r1); border: 1px solid var(--bordure-douce);
}
.fiche__visuel figcaption {
flex: none; margin-top: .5rem; font-size: .88rem; color: var(--texte-doux);
}
/* Pathologie et Type n'ont pas de capture : le croquis du domaine parent
monte à sa place. Hauteur bornée, sinon un dessin carré occuperait toute
la colonne. */
.fiche__visuel--croquis {
/* La hauteur est posée dans une variable et RÉUTILISÉE par la pile, au
lieu d'un `height: 100%` : dans une colonne qui défile, ce pourcentage
ne se résolvait pas et le dessin reprenait sa taille naturelle — 560 px
au lieu de 216, mais seulement sur l'onglet Type, celui dont la
colonne dépasse. Une valeur explicite ne dépend de rien. */
--h-croquis: clamp(150px, 24vh, 260px);
display: grid; place-items: center;
height: var(--h-croquis);
}
/* Le dessin est carré : on le borne par la HAUTEUR disponible, sinon une
colonne large l'étirerait au-delà du cadre. */
/* Le dessin est carré : il se borne par la HAUTEUR de la case, sinon une
colonne large l'étirerait au-delà du cadre. `width` reste NON déclarée —
avec une hauteur définie et un `aspect-ratio`, le navigateur la déduit ;
écrire `width: auto` dans une case centrée la renvoie au contenu, et le
calcul devient circulaire (la pile mesurait 547 px au lieu de 216). */
.fiche__visuel--croquis .croquis-pile {
display: block; height: var(--h-croquis); aspect-ratio: 1;
}
.fiche__visuel--croquis .croquis-pile picture,
.fiche__visuel--croquis .croquis-pile picture img {
width: 100%; height: 100%; object-fit: contain;
}
.fiche__corps { flex: 0 0 auto; }
.fiche__entete { display: flex; align-items: center; gap: .8rem; }
.fiche__titre { font-size: 1.25rem; margin: 0; flex: 1 1 auto; }
/* Le croquis ne descend à côté du titre que si une capture occupe déjà le
haut : jamais deux fois le même dessin dans la même fiche. */
.fiche__vignette { flex: none; width: 48px; display: block; }
/* Les visuels de domaine sont des piles raster à deux couches : la pile
doit être un bloc pour que la couche d'accent, posée en absolu, ait une
boîte de référence. */
.fiche__vignette .croquis-pile { display: block; width: 100%; }
.fiche__surtitre { margin: .25rem 0 0; font-size: .92rem; color: var(--texte-doux); }
.fiche__desc {
color: var(--texte-doux); max-width: 74ch;
font-size: 1rem; line-height: 1.45; margin: .5rem 0 0;
}
/* Métadonnées en ligne (§3.3) : empilées, elles mangeaient toute la
hauteur. `dt` et `dd` sur la même ligne, pastilles serrées. */
.fiche__meta {
display: grid; gap: .3rem .9rem; margin: .9rem 0 0;
padding-top: .8rem; border-top: 1px solid var(--bordure-douce);
font-size: .95rem;
}
@media (min-width: 560px) {
.fiche__meta { grid-template-columns: max-content 1fr; align-items: baseline; }
}
.fiche__meta dt {
font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--ocre-texte); margin: 0; white-space: nowrap;
}
.fiche__meta dd { margin: 0; color: var(--texte); line-height: 1.4; }
/* La ligne des références est l'argument le plus fort de la page : elle se
lit en plein texte, pas en petit gris. */
.fiche__refs { font-weight: 600; }
/* --- §5 : sous 900 px ------------------------------------------------------
Le viewport-height ne tient pas sur mobile — barres d'interface
escamotables, clavier virtuel. La hauteur redevient `auto`, la page
défile normalement, et les colonnes s'empilent : liste au-dessus, fiche
en dessous. La liste se replie en bande horizontale défilante plutôt
qu'en `