/* DP – Documents à télécharger
---------------------------------------------------------------------------
Neuf traitements d'un même contenu, en deux familles.
Les quatre premiers — `cards`, `columns`, `chips`, `dome` — sont ceux
d'origine. `columns` et `chips` viennent du design system et en gardent les
mesures : le filet vertical entre colonnes, la capsule à 56 px de pastille.
`cards` et `dome` les prolongent avec le vocabulaire de l'identité 2026.
Les cinq suivants — `sommaire`, `registre`, `encadre`, `feuilles`, `une` —
datent de septembre 2026 et sont écrits en bas de cette feuille, sous leur
propre en-tête. `encadre` est le design par défaut du bloc.
Ce que la feuille ne fait pas : peindre la carte. `.dp-dl__card` est inscrit
dans la liste des cartes de `nouvelle-charte.css`, qui lui donne son fond,
son arrondi et son ombre bleu-gris. Les valeurs posées ici le sont sur la
classe seule — spécificité (0,1,0) — pour que la charte l'emporte toujours,
quel que soit l'ordre de chargement des feuilles. */
.dp-dl {
/* Chaîne à trois niveaux : variable locale (override Elementor), jeton de
la charte, puis repli. Le repli ne sert que si la charte est absente.
Les rôles que `nouvelle-charte.css` peint elle-même — sur-titre, titres,
textes, filets, cartes, liens — passent d'abord par son jeton `--dp-nc-*`.
Ce qui est réglé dans « Identité 2026 » descend donc jusqu'ici, et ce qui
est écrit ici avant que la feuille de charte arrive dit déjà la même
chose : rien ne saute au chargement. */
--dp-dl-eyebrow: var(--dp-nc-eyebrow, var(--dp-color-primary-strong, #417e88));
--dp-dl-title: var(--dp-nc-title, var(--dp-color-text, #303030));
--dp-dl-intro: var(--dp-nc-text, var(--dp-color-text-muted, #5b5b5b));
--dp-dl-item-title: var(--dp-nc-title, var(--dp-color-text, #303030));
--dp-dl-desc: var(--dp-nc-text, var(--dp-color-text-muted, #5b5b5b));
/* Le format et le poids : une information, donc du texte lisible.
`--dp-color-text-faint` (#8a8a8a) ne donne que 3,45:1 sur blanc, sous les
4,5:1 exigés — il portait pourtant le poids du fichier jusqu'ici. L'encre
atténuée (#5c5c5c) donne 6,69:1. `text-faint` ne reste que sur le numéro
du sommaire, décoratif et masqué aux lecteurs d'écran. */
--dp-dl-meta: var(--dp-color-text-muted, #5b5b5b);
--dp-dl-rule: var(--dp-nc-rule, var(--dp-color-border, #dedede));
/* La marque colorée : l'arc des colonnes, le dôme, la pastille. */
--dp-dl-accent: var(--dp-color-primary, #61c2d0);
--dp-dl-badge-bg: var(--dp-color-primary-soft, #ecf8f9);
--dp-dl-badge-text: var(--dp-color-primary-deep, #325f66);
/* Deux jetons, deux surfaces (cf. dp-charte §3a-bis) : la pastille est
posée sur une teinte très claire, le dôme sur la teinte pleine. Un seul
jeton pour les deux rendrait l'un des deux illisible en pastel. */
--dp-dl-dome-text: var(--dp-color-on-primary-base, #303030);
--dp-dl-action: var(--dp-nc-link, var(--dp-color-link, #417e88));
--dp-dl-action-hover: var(--dp-nc-link-hover, var(--dp-color-link-hover, #325f66));
/* Le fond et l'arrondi des cartes appartiennent à la charte : ces deux
valeurs ne sont qu'un repli, sans contrôle Elementor en face. En ouvrir
un ici donnerait deux réglages pour une même couleur, dont un seul —
celui de la charte, plus spécifique — serait suivi. */
--dp-dl-card-bg: var(--dp-nc-card-bg, var(--dp-color-surface, #ffffff));
--dp-dl-card-radius: var(--dp-nc-card-radius, var(--dp-radius-lg, 20px));
--dp-dl-card-pad: clamp(22px, 2.4vw, 30px);
/* La capsule, elle, n'est pas une carte de la charte : son fond est réglable
depuis le bloc. */
--dp-dl-chip-bg: var(--dp-nc-card-bg, var(--dp-color-surface, #ffffff));
--dp-dl-button-bg: var(--dp-nc-btn-bg, var(--dp-color-primary-fill, #61c2d0));
/* `on-primary`, jamais `surface` : ce dernier vaut toujours blanc, et un
aplat pastel ne porte pas de texte blanc. */
--dp-dl-button-text: var(--dp-nc-btn-text, var(--dp-color-on-primary, #303030));
--dp-dl-button-radius: var(--dp-nc-btn-radius, var(--dp-radius-pill, 999px));
/* Le verrou. L'encre atténuée plutôt que la couleur de marque : une entrée
verrouillée n'est pas une entrée mise en avant, et un cadenas en teinte
d'accent se lit comme une nouveauté. */
--dp-dl-lock: var(--dp-color-text-muted, #5b5b5b);
--dp-dl-hint-bg: var(--dp-color-text, #303030);
--dp-dl-hint-text: #ffffff;
/* Les jetons des cinq dessins de septembre 2026. */
--dp-dl-row-pad: 20px;
--dp-dl-num: var(--dp-color-border, #dedede);
--dp-dl-hover-surface: var(--dp-color-surface-alt, #fafafa);
--dp-dl-frame-radius: var(--dp-radius-xl, 32px);
--dp-dl-frame-pad: clamp(24px, 3vw, 40px);
--dp-dl-frame-bg: var(--dp-gradient-brand-soft, linear-gradient(120deg, #cfeaef 0%, #dcefe8 34%, #e4efda 63%, #fffbdd 100%));
--dp-dl-panel-bg: var(--dp-color-surface, #ffffff);
--dp-dl-panel-radius: var(--dp-radius-lg, 20px);
--dp-dl-panel-pad: clamp(6px, 1.4vw, 14px) clamp(18px, 2.4vw, 30px);
--dp-dl-lisere: 6px;
--dp-dl-feature-bg: var(--dp-color-primary-soft, #e4f0f4);
--dp-dl-paper: var(--dp-nc-card-bg, var(--dp-color-surface, #ffffff));
display: block;
font-family: var(--dp-font-base, inherit);
}
/* =====================================================================
* En-tête
* ===================================================================== */
.dp-dl__header {
display: flex;
flex-direction: column;
align-items: var(--dp-dl-header-align, start);
text-align: var(--dp-dl-header-align, start);
gap: 12px;
margin-bottom: var(--dp-dl-header-gap, 34px);
}
/* L'arc du Ô, coiffant l'en-tête. Dessiné en masque et non en image : la
couleur suit alors la charte. Le repli en URL relative compte — sans lui, un
plugin servi sans ses jetons laisserait un rectangle plein. */
.dp-dl__arc {
display: block;
width: var(--dp-dl-arc-width, 44px);
aspect-ratio: 32.244 / 14.379;
background-color: var(--dp-dl-accent);
-webkit-mask-image: var(--dp-asset-arc, url(../img/pictos/arc-dark.svg));
mask-image: var(--dp-asset-arc, url(../img/pictos/arc-dark.svg));
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.dp-dl__eyebrow {
margin: 0;
font-family: var(--dp-font-heading, inherit);
font-weight: 700;
font-size: 11px;
letter-spacing: var(--dp-tracking-caps, 0.12em);
text-transform: uppercase;
color: var(--dp-dl-eyebrow);
}
/* Couleur explicite : beaucoup de thèmes imposent `h1–h6 { color: inherit }`,
et le titre remonterait jusqu'à la global color d'Elementor. */
.dp-dl__title {
margin: 0;
font-family: var(--dp-font-heading, inherit);
font-weight: var(--dp-font-heading-weight, 700);
font-size: clamp(26px, 3vw, 40px);
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--dp-dl-title);
}
.dp-dl__intro {
margin: 0;
max-width: 54ch;
font-size: 17px;
line-height: var(--dp-leading-relaxed, 1.65);
color: var(--dp-dl-intro);
}
/* =====================================================================
* La liste, et ce que toutes les entrées partagent
* ===================================================================== */
.dp-dl__list {
max-width: var(--dp-dl-list-max, none);
margin-inline: auto;
}
.dp-dl__item {
text-decoration: none;
color: inherit;
}
/* Le corps de l'entrée : titre, description, poids. En flex plutôt qu'en
grille — le format, le poids et la description sont chacun facultatifs, et
une grille à colonnes fixes se décale dès qu'il en manque un. */
.dp-dl__body {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.dp-dl__item-title {
display: block;
font-family: var(--dp-font-heading, inherit);
font-weight: var(--dp-font-heading-weight, 700);
font-size: 17px;
line-height: 1.25;
color: var(--dp-dl-item-title);
}
.dp-dl__desc {
display: block;
font-size: 14px;
line-height: 1.6;
color: var(--dp-dl-desc);
}
/* Le poids : une méta, donc la famille des dates et des compteurs — capitales
suivies, encre estompée, jamais la couleur de marque. */
.dp-dl__size {
display: block;
font-family: var(--dp-font-heading, inherit);
font-weight: 700;
font-size: 11px;
letter-spacing: var(--dp-tracking-caps, 0.12em);
text-transform: uppercase;
color: var(--dp-dl-meta);
}
/* La pastille de format : pill, capitales suivies, teinte claire de la charte
et texte soutenu. La forme définitive vient de `nouvelle-charte.css`. */
.dp-dl__badge {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: 56px;
padding: 8px 14px;
border-radius: var(--dp-radius-pill, 999px);
background: var(--dp-dl-badge-bg);
font-family: var(--dp-font-heading, inherit);
font-weight: 700;
font-size: 10px;
line-height: 1;
letter-spacing: var(--dp-tracking-caps, 0.12em);
text-transform: uppercase;
color: var(--dp-dl-badge-text);
}
/* Le lien de téléchargement des dessins nus — capitales suivies, la flèche est
le caractère « ↓ » et non une icône : la charte n'a pas de jeu d'icônes. */
.dp-dl__action {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
font-family: var(--dp-font-heading, inherit);
font-weight: 700;
font-size: 11px;
letter-spacing: var(--dp-tracking-caps, 0.12em);
text-transform: uppercase;
color: var(--dp-dl-action);
transition: color var(--dp-duration, 0.2s) ease;
}
.dp-dl__item:hover .dp-dl__action,
.dp-dl__item:focus-visible .dp-dl__action {
color: var(--dp-dl-action-hover);
}
/* Le bouton des dessins en carte. Classe distincte du lien, et non un
modificateur : `nouvelle-charte.css` range l'un dans ses boutons et l'autre
dans ses liens d'action, et une entrée portant les deux prendrait les deux
dessins. */
.dp-dl__button {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
margin-top: auto;
padding: 12px 22px;
border-radius: var(--dp-dl-button-radius);
background: var(--dp-btn-bg, var(--dp-dl-button-bg));
color: var(--dp-btn-text, var(--dp-dl-button-text));
font-family: var(--dp-font-heading, inherit);
font-weight: 700;
font-size: 14px;
line-height: 1;
transition: var(--dp-transition-base, all 0.2s ease);
}
/* Le bouton ne changeait pas de couleur au survol : rien ne portait les deux
réglages de survol. Sans réglage, les replis reprennent l'état de repos et
le dessin ne bouge pas. */
.dp-dl__item:not(.dp-dl__item--locked) .dp-dl__button:hover,
.dp-dl__item:not(.dp-dl__item--locked) .dp-dl__button:focus-visible {
background: var(--dp-btn-bg-hover, var(--dp-btn-bg, var(--dp-dl-button-bg)));
color: var(--dp-btn-text-hover, var(--dp-btn-text, var(--dp-dl-button-text)));
}
/* La flèche descend de 2 px au survol de l'entrée entière, pas du seul libellé :
c'est l'entrée qui est cliquable. */
.dp-dl__arrow {
display: inline-block;
transition: transform var(--dp-duration-slow, 0.25s) ease;
}
.dp-dl__item:hover .dp-dl__arrow,
.dp-dl__item:focus-visible .dp-dl__arrow {
transform: translateY(2px);
}
/* L'anneau de focus n'est jamais retiré : c'est la seule affordance des
personnes au clavier. */
.dp-dl__item:focus-visible {
outline: 2px solid var(--dp-dl-action);
outline-offset: 3px;
}
/* =====================================================================
* Les entrées réservées aux vétérinaires
* =====================================================================
* Le cadenas est visible sans survol, et c'est la seule décision qui compte
* ici : un écran tactile n'a pas de survol, un lecteur d'écran non plus, et
* une affordance qui n'existe qu'à la souris ne dit rien à la moitié des
* visiteurs. Le survol ajoute la phrase, il ne révèle pas l'état.
*
* L'entrée n'est pas grisée. Elle reste cliquable — vers la connexion — et un
* document grisé se lit comme indisponible, ce qu'il n'est pas.
* ===================================================================== */
.dp-dl__item--locked {
position: relative;
}
.dp-dl__item--locked .dp-dl__action,
.dp-dl__item--locked .dp-dl__button {
color: var(--dp-dl-lock);
}
/* Le bouton verrouillé perd son aplat : un aplat de marque promet le
téléchargement, et ce bouton n'y mène pas. */
.dp-dl__item--locked .dp-dl__button {
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--dp-dl-rule);
}
.dp-dl__item--locked .dp-dl__action svg,
.dp-dl__item--locked .dp-dl__button svg {
flex: 0 0 auto;
}
/* Le message : posé en absolu, au-dessus de l'entrée. En flux, il décalerait
la rangée entière au passage de la souris. */
.dp-dl__hint {
position: absolute;
inset-inline: 0;
/* Sous l'entrée, toujours. Au-dessus, la première rangée d'une grille
sortait de la section et il fallait deviner en CSS où commence une
rangée — un `nth-child` qui se trompait dès qu'on changeait le nombre de
colonnes. En dessous, il n'y a rien à deviner. */
top: calc(100% + 8px);
z-index: 2;
margin-inline: auto;
width: max-content;
max-width: 100%;
padding: 9px 14px;
border-radius: var(--dp-radius-sm, 10px);
background: var(--dp-dl-hint-bg);
color: var(--dp-dl-hint-text);
font-size: 12px;
line-height: 1.4;
text-align: center;
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity var(--dp-duration, 0.2s) ease, transform var(--dp-duration, 0.2s) ease;
}
.dp-dl__item--locked:hover .dp-dl__hint,
.dp-dl__item--locked:focus-visible .dp-dl__hint {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.dp-dl__hint {
transition: none;
transform: none;
}
}
/* =====================================================================
* Les grilles
* ===================================================================== */
.dp-dl--columns .dp-dl__list,
.dp-dl--cards .dp-dl__list,
.dp-dl--dome .dp-dl__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dp-dl--cols-2 .dp-dl__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dp-dl--cols-3 .dp-dl__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dp-dl--cols-4 .dp-dl__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dp-dl--cards .dp-dl__list,
.dp-dl--dome .dp-dl__list {
gap: var(--dp-dl-gap, 20px);
}
/* =====================================================================
* Design « columns » — colonnes typographiques, marquées par l'arc du Ô
* =====================================================================
* La séparation est un filet vertical, et rien d'autre : pas de carte, pas
* d'ombre. Une liste de documents est un sommaire, et l'encadrer colonne par
* colonne la ferait lire comme une grille de produits.
* ===================================================================== */
.dp-dl--columns .dp-dl__list {
gap: var(--dp-dl-gap, 0px);
}
.dp-dl--columns .dp-dl__item {
display: flex;
flex-direction: column;
gap: 12px;
min-height: 176px;
padding: 4px 0 4px var(--dp-dl-col-pad, 26px);
border-inline-start: 1px solid var(--dp-dl-rule);
}
/* La première colonne de chaque rangée n'a pas de filet : un filet en tête de
rangée sépare la grille de la marge, pas deux colonnes. */
.dp-dl--columns.dp-dl--cols-2 .dp-dl__item:nth-child(2n + 1),
.dp-dl--columns.dp-dl--cols-3 .dp-dl__item:nth-child(3n + 1),
.dp-dl--columns.dp-dl--cols-4 .dp-dl__item:nth-child(4n + 1) {
border-inline-start: 0;
padding-inline-start: 0;
padding-inline-end: var(--dp-dl-col-pad, 26px);
}
.dp-dl--columns .dp-dl__mark {
display: block;
width: var(--dp-dl-arc-width, 38px);
/* Le rapport du fichier livré avec la charte : l'écrire ici évite que l'arc
s'aplatisse quand on change sa largeur. */
aspect-ratio: 32.244 / 14.379;
background-color: var(--dp-dl-accent);
-webkit-mask-image: var(--dp-asset-arc, url(../img/pictos/arc-dark.svg));
mask-image: var(--dp-asset-arc, url(../img/pictos/arc-dark.svg));
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: transform 0.3s var(--dp-ease, ease);
}
.dp-dl--columns .dp-dl__item:hover .dp-dl__mark,
.dp-dl--columns .dp-dl__item:focus-visible .dp-dl__mark {
transform: translateY(-3px) scaleX(1.12);
}
.dp-dl--columns .dp-dl__action {
margin-top: auto;
}
/* =====================================================================
* Design « chips » — lignes en capsules, format en pastille
* ===================================================================== */
.dp-dl--chips .dp-dl__list {
display: flex;
flex-direction: column;
gap: var(--dp-dl-gap, 10px);
/* Une capsule de 1 200 px de large étire son libellé d'action à l'autre
bout de l'écran ; on s'arrête là où le design system s'arrête. */
max-width: var(--dp-dl-list-max, 860px);
}
.dp-dl--chips .dp-dl__item {
display: flex;
align-items: center;
gap: 22px;
padding: 14px 22px 14px 14px;
border: 1px solid var(--dp-dl-rule);
border-radius: var(--dp-radius-pill, 999px);
background: var(--dp-dl-chip-bg);
transition: var(--dp-transition-base, all 0.2s ease);
}
.dp-dl--chips .dp-dl__body {
flex: 1 1 auto;
gap: 3px;
}
.dp-dl--chips .dp-dl__desc {
font-size: 13px;
}
.dp-dl--chips .dp-dl__item:hover,
.dp-dl--chips .dp-dl__item:focus-visible {
border-color: var(--dp-dl-accent);
}
/* =====================================================================
* Design « cards » — une carte par document, dessin de la charte 2026
* =====================================================================
* Fond, arrondi et ombre viennent de `nouvelle-charte.css` : `.dp-dl__card`
* est inscrit dans sa liste de cartes. Les trois valeurs posées ici le sont
* sur la classe seule, pour servir de repli si la feuille de charte manque —
* et pour perdre l'arbitrage avec elle le reste du temps.
* ===================================================================== */
.dp-dl__card {
background: var(--dp-dl-card-bg);
border-radius: var(--dp-dl-card-radius);
box-shadow: var(--dp-shadow-sm, 0 2px 10px rgba(16, 51, 96, 0.06));
}
.dp-dl--cards .dp-dl__item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: var(--dp-dl-card-pad);
}
.dp-dl--cards .dp-dl__body {
flex: 1 1 auto;
}
.dp-dl--cards .dp-dl__item-title {
font-size: 19px;
}
/* =====================================================================
* Design « dome » — le format dans la silhouette du dôme
* =====================================================================
* Le dôme est la forme signature de l'identité : un demi-ovale posé à plat.
* Il porte le format parce qu'il faut bien qu'il porte quelque chose — un
* dôme vide au-dessus d'un titre serait une décoration, et la charte n'en
* veut pas.
* ===================================================================== */
.dp-dl--dome .dp-dl__item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: var(--dp-dl-card-pad);
}
.dp-dl__dome-cap {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: var(--dp-dl-dome-height, 108px);
/* La silhouette de la charte, en rayons de bordure. Pas de contrôle
d'arrondi exposé dessus : c'est une forme, pas une carte. */
border-radius: var(--dp-radius-dome, 50% 50% 0 0 / 78% 78% 0 0);
background: var(--dp-dl-accent);
transition: transform 0.3s var(--dp-ease, ease);
}
.dp-dl--dome .dp-dl__item:hover .dp-dl__dome-cap,
.dp-dl--dome .dp-dl__item:focus-visible .dp-dl__dome-cap {
transform: translateY(-3px);
}
.dp-dl__dome-format {
font-family: var(--dp-font-heading, inherit);
font-weight: 700;
font-size: 15px;
letter-spacing: var(--dp-tracking-caps, 0.12em);
text-transform: uppercase;
/* Posé sur la teinte pleine : c'est `on-…-base` que la charte calcule pour
cette surface, jamais un blanc en dur. */
color: var(--dp-dl-dome-text);
}
.dp-dl--dome .dp-dl__body {
flex: 1 1 auto;
}
.dp-dl--dome .dp-dl__item-title {
font-size: 19px;
}
/* =====================================================================
* Les quatre teintes qui tournent
* =====================================================================
* C'est la rangée bariolée voulue par l'identité. Chaque teinte emmène avec
* elle la couleur de texte que la charte a calculée pour elle : sans cela, le
* quaternaire — un jaune pâle — porterait un libellé illisible.
* ===================================================================== */
.dp-dl--tints .dp-dl__item:nth-child(4n + 2) {
--dp-dl-accent: var(--dp-color-secondary, #98d0c1);
--dp-dl-dome-text: var(--dp-color-on-secondary-base, #303030);
--dp-dl-badge-bg: var(--dp-color-secondary-soft, #eef8f5);
--dp-dl-badge-text: var(--dp-color-secondary-deep, #2f5c50);
}
.dp-dl--tints .dp-dl__item:nth-child(4n + 3) {
--dp-dl-accent: var(--dp-color-tertiary, #a9cf8e);
--dp-dl-dome-text: var(--dp-color-on-tertiary-base, #303030);
--dp-dl-badge-bg: var(--dp-color-tertiary-soft, #f1f8ec);
--dp-dl-badge-text: var(--dp-color-tertiary-deep, #46612f);
}
.dp-dl--tints .dp-dl__item:nth-child(4n + 4) {
--dp-dl-accent: var(--dp-color-quaternary, #fff399);
--dp-dl-dome-text: var(--dp-color-on-quaternary-base, #303030);
--dp-dl-badge-bg: var(--dp-color-quaternary-soft, #fffcea);
--dp-dl-badge-text: var(--dp-color-quaternary-deep, #6b6218);
}
/* =====================================================================
* Responsive — les trois seuils du design system
* =====================================================================
* Une précaution qui n'a rien d'évident : le filet du dessin en colonnes est
* posé par `nth-child`, donc il compte sur le nombre de colonnes RÉELLEMENT
* affichées, pas sur celui qu'a réglé l'auteur. Une grille de quatre qui passe
* à trois sans que les règles suivent donne un filet en tête de rangée et une
* colonne indentée au milieu de nulle part — c'est exactement ce qu'on voyait
* à 900 px.
*
* D'où deux décisions. Le dessin en colonnes ne connaît qu'un seul palier,
* quatre puis deux : il est typographique et tient à 900 px, là où une carte
* avec son bouton ne tient pas. Et chaque redéclaration reprend la forme
* `.dp-dl--columns.dp-dl--cols-N .dp-dl__item:nth-child(...)`, le `:nth-child(n)`
* ne servant qu'à retrouver la spécificité des règles de base — sans lui, la
* règle du dessus resterait la plus forte et rien ne bougerait.
* ===================================================================== */
/* Les cartes et les dômes desserrent d'un cran ; les colonnes tiennent. */
@media (max-width: 1080px) {
.dp-dl--cards.dp-dl--cols-4 .dp-dl__list,
.dp-dl--dome.dp-dl--cols-4 .dp-dl__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 860px) {
.dp-dl--cols-3 .dp-dl__list,
.dp-dl--cols-4 .dp-dl__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dp-dl--columns.dp-dl--cols-3 .dp-dl__item:nth-child(n),
.dp-dl--columns.dp-dl--cols-4 .dp-dl__item:nth-child(n) {
min-height: 0;
border-inline-start: 1px solid var(--dp-dl-rule);
padding-inline: var(--dp-dl-col-pad, 26px) 0;
}
.dp-dl--columns.dp-dl--cols-3 .dp-dl__item:nth-child(2n + 1),
.dp-dl--columns.dp-dl--cols-4 .dp-dl__item:nth-child(2n + 1) {
border-inline-start: 0;
padding-inline: 0 var(--dp-dl-col-pad, 26px);
}
}
@media (max-width: 620px) {
.dp-dl--cols-2 .dp-dl__list,
.dp-dl--cols-3 .dp-dl__list,
.dp-dl--cols-4 .dp-dl__list {
grid-template-columns: minmax(0, 1fr);
}
/* Une seule colonne : le filet redevient horizontal, et la liste se ferme
sur un dernier filet — les lignes filetées du design system. */
.dp-dl--columns.dp-dl--cols-2 .dp-dl__item:nth-child(n),
.dp-dl--columns.dp-dl--cols-3 .dp-dl__item:nth-child(n),
.dp-dl--columns.dp-dl--cols-4 .dp-dl__item:nth-child(n) {
min-height: 0;
border-inline-start: 0;
border-top: 1px solid var(--dp-dl-rule);
padding: 22px 0 0;
}
.dp-dl--columns .dp-dl__item:last-child {
border-bottom: 1px solid var(--dp-dl-rule);
padding-bottom: 22px;
}
/* La capsule se déplie : un libellé d'action tassé contre un titre à
400 px de large devient illisible. */
.dp-dl--chips .dp-dl__item {
flex-direction: column;
align-items: flex-start;
gap: 12px;
border-radius: var(--dp-radius-lg, 20px);
padding: 18px 20px;
}
}
/* Sous `prefers-reduced-motion`, la charte met déjà les durées à zéro pour tout
ce qui est enveloppé de `.dp-nc`. On retire en plus les transformations, qui
ne sont pas des durées — et on le fait ici aussi, pour le cas où le bloc est
rendu hors de ce conteneur (aperçu d'éditeur, export). */
@media (prefers-reduced-motion: reduce) {
.dp-dl__arrow,
.dp-dl__mark,
.dp-dl__dome-cap {
transition: none;
}
.dp-dl__item:hover .dp-dl__arrow,
.dp-dl__item:hover .dp-dl__mark,
.dp-dl__item:hover .dp-dl__dome-cap,
.dp-dl__item:focus-visible .dp-dl__arrow,
.dp-dl__item:focus-visible .dp-dl__mark,
.dp-dl__item:focus-visible .dp-dl__dome-cap {
transform: none;
}
}
/* =====================================================================
* LES CINQ DESSINS DE SEPTEMBRE 2026
* =====================================================================
* Ce qui suit habille `sommaire`, `registre`, `encadre`, `feuilles` et `une`.
* Tout ce que ces cinq dessins partagent avec les quatre premiers — corps de
* l'entrée, pastille, verrou, message au survol, anneau de focus — est déjà
* écrit plus haut et n'est pas redit.
*
* Trois règles les tiennent ensemble, détaillées dans l'en-tête du widget :
* une seule action par entrée, une seule marque colorée par bloc, et la flèche
* « → » de la charte.
* ===================================================================== */
/* La flèche glisse, elle ne tombe pas : c'est « → » que le PHP rend ici. */
.dp-dl--sommaire .dp-dl__arrow,
.dp-dl--registre .dp-dl__arrow,
.dp-dl--encadre .dp-dl__arrow,
.dp-dl--feuilles .dp-dl__arrow,
.dp-dl--une .dp-dl__arrow {
transition: transform var(--dp-duration-slow, 0.25s) var(--dp-ease, cubic-bezier(.4, 0, .2, 1));
}
.dp-dl--sommaire .dp-dl__item:hover .dp-dl__arrow,
.dp-dl--registre .dp-dl__item:hover .dp-dl__arrow,
.dp-dl--encadre .dp-dl__item:hover .dp-dl__arrow,
.dp-dl--feuilles .dp-dl__item:hover .dp-dl__arrow,
.dp-dl--une .dp-dl__item:hover .dp-dl__arrow,
.dp-dl--sommaire .dp-dl__item:focus-visible .dp-dl__arrow,
.dp-dl--registre .dp-dl__item:focus-visible .dp-dl__arrow,
.dp-dl--encadre .dp-dl__item:focus-visible .dp-dl__arrow,
.dp-dl--feuilles .dp-dl__item:focus-visible .dp-dl__arrow,
.dp-dl--une .dp-dl__item:focus-visible .dp-dl__arrow {
transform: translateX(4px);
}
/* =====================================================================
* La mention « Réservé », visible sans survol
* =====================================================================
* Le bloc livré n'annonce la raison du cadenas qu'au survol. Un écran tactile
* n'a pas de survol, et « ne compter que sur le survol » est l'anti-motif n° 2
* du référentiel UX consulté, au même rang que le contraste. Le cadenas seul
* dit qu'il y a une condition ; il ne dit pas laquelle.
*
* Une mention courte, en capitales suivies, la dit sans survol. Le message
* complet reste au survol pour qui le veut, et l'`aria-label` du lien continue
* de la porter pour les lecteurs d'écran.
*
* Élément à ajouter au PHP : `Réservé`.
* ===================================================================== */
.dp-dl__reserved {
display: inline-flex;
align-items: center;
gap: 5px;
flex: 0 0 auto;
font-family: var(--dp-font-heading, inherit);
font-weight: 700;
font-size: 10px;
line-height: 1;
letter-spacing: var(--dp-tracking-caps, 0.12em);
text-transform: uppercase;
color: var(--dp-dl-lock);
}
.dp-dl__reserved svg { flex: 0 0 auto; }
/* Hors colonne — c'est-à-dire sur mobile — la mention de format s'aligne sur le
texte. Centrée, elle flotte au milieu d'une ligne dont elle est le seul
élément court. */
@media (max-width: 720px) {
.dp-dl--sommaire .dp-dl__badge,
.dp-dl--registre .dp-dl__badge,
.dp-dl--encadre .dp-dl__badge {
justify-content: flex-start;
min-width: 0;
}
}
/* =====================================================================
* 1 — « sommaire » : le sommaire numéroté
* =====================================================================
* Le vocabulaire vient de la marque elle-même : le sommaire du modèle de
* présentation, ses numéros à deux chiffres, ses filets. Aucune carte, aucune
* ombre, aucun aplat — une liste de documents EST un sommaire, et c'est le seul
* dessin des cinq qui ne coûte rien en surface.
*
* La couleur n'apparaît qu'au survol, sur le numéro. Au repos la rangée est en
* encre et en filets : douze documents à la suite restent lisibles, ce qu'une
* grille de cartes ne permet pas.
*
* Élément à ajouter au PHP : `01`.
* ===================================================================== */
/* `margin-inline: 0` contre le centrage hérité de la feuille du bloc : une liste
centrée sous un en-tête aligné à gauche décale les deux d'une demi-gouttière,
et c'est le genre de décalage qu'on ne voit qu'une fois qu'il est corrigé. */
.dp-dl--sommaire .dp-dl__list {
display: block;
max-width: var(--dp-dl-list-max, 980px);
margin-inline: 0;
}
.dp-dl--sommaire .dp-dl__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: baseline;
column-gap: clamp(16px, 2.2vw, 30px);
padding: var(--dp-dl-row-pad) 0;
border-top: 1px solid var(--dp-dl-rule);
}
.dp-dl--sommaire .dp-dl__item:last-child {
border-bottom: 1px solid var(--dp-dl-rule);
}
/* Le numéro : chiffres à chasse fixe, sinon « 01 » et « 11 » ne s'alignent pas
et la colonne ondule. */
.dp-dl--sommaire .dp-dl__num {
font-family: var(--dp-font-heading, inherit);
font-weight: 800;
font-size: var(--dp-dl-num-size, clamp(26px, 2.6vw, 34px));
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
/* Seul emploi conservé de `text-faint` : le numéro est `aria-hidden`, ne
porte aucune information que l'ordre du DOM ne donne pas déjà, et relève
donc de la décoration — la seule chose que le contraste minimal exempte. */
color: var(--dp-dl-num);
transition: color var(--dp-duration, 0.2s) ease;
}
.dp-dl--sommaire .dp-dl__item:hover .dp-dl__num,
.dp-dl--sommaire .dp-dl__item:focus-visible .dp-dl__num {
color: var(--dp-dl-accent);
}
/*
* Les quatre cellules sont placées explicitement, et non laissées à
* l'auto-placement.
*
* Le gabarit rend la pastille de format AVANT le corps de l'entrée — c'est
* l'ordre qui convient aux dessins où le format est à gauche, comme l'encadré.
* Laissée à l'ordre du DOM, la grille mettrait ici le format en première
* colonne et le titre en deuxième, c'est-à-dire l'inverse de ce dessin. Nommer
* les colonnes coûte quatre lignes et rend la grille indépendante du gabarit.
*/
.dp-dl--sommaire .dp-dl__num { grid-column: 1; grid-row: 1; }
.dp-dl--sommaire .dp-dl__body { grid-column: 2; grid-row: 1; }
.dp-dl--sommaire .dp-dl__badge { grid-column: 3; grid-row: 1; }
.dp-dl--sommaire .dp-dl__action { grid-column: 4; grid-row: 1; }
.dp-dl--sommaire .dp-dl__body {
gap: 5px;
padding-block: 2px;
}
.dp-dl--sommaire .dp-dl__item-title {
font-size: var(--dp-dl-title-size, 20px);
line-height: 1.2;
}
.dp-dl--sommaire .dp-dl__desc {
max-width: 56ch;
}
/* La pastille perd sa pilule : dans un sommaire, le format est une mention, pas
une étiquette. Même DOM, autre habit. */
.dp-dl--sommaire .dp-dl__badge {
min-width: 0;
padding: 0;
background: none;
color: var(--dp-dl-meta);
font-size: 11px;
}
.dp-dl--sommaire .dp-dl__action {
gap: 10px;
}
@media (max-width: 720px) {
.dp-dl--sommaire .dp-dl__item {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 14px;
}
/* Plus de grille, donc plus de colonnes : c'est `order` qui rétablit
l'ordre voulu, que le gabarit ne donne pas. */
.dp-dl--sommaire .dp-dl__num { order: 1; flex: 0 0 auto; font-size: 20px; }
.dp-dl--sommaire .dp-dl__body { order: 2; flex: 1 1 200px; }
.dp-dl--sommaire .dp-dl__badge { order: 3; }
.dp-dl--sommaire .dp-dl__action { order: 4; margin-left: auto; }
}
/* =====================================================================
* 2 — « registre » : le tableau de documents
* =====================================================================
* Le dessin des listes longues. Un en-tête de colonnes, des filets, des valeurs
* alignées : la forme que prend un registre documentaire partout ailleurs
* qu'sur une page d'accueil. Il assume d'être administratif, et c'est
* exactement ce qu'on demande à une liste de notices et de RCP.
*
* Le format n'est plus une pastille colorée mais une valeur de colonne, en
* encre : une colonne entière de pastilles pastel serait un damier.
*
* Élément à ajouter au PHP : la ligne d'en-tête `.dp-dl__thead`.
* ===================================================================== */
.dp-dl--registre .dp-dl__list {
display: block;
max-width: var(--dp-dl-list-max, 1040px);
margin-inline: 0;
}
.dp-dl--registre .dp-dl__thead,
.dp-dl--registre .dp-dl__item {
display: grid;
grid-template-columns: minmax(0, 1fr) 84px 88px var(--dp-dl-action-col, 136px);
align-items: center;
column-gap: clamp(14px, 2vw, 28px);
}
/*
* Les trois replis du tableau. Une piste qu'on met à zéro garderait sa
* gouttière ; c'est le gabarit entier qu'il faut réécrire, et replacer les
* cellules avec lui. Le poids est masqué par défaut : le cas le plus fréquent
* est donc le deuxième.
*/
.dp-dl--registre.dp-dl--no-format:not(.dp-dl--no-size) .dp-dl__thead,
.dp-dl--registre.dp-dl--no-format:not(.dp-dl--no-size) .dp-dl__item {
grid-template-columns: minmax(0, 1fr) 88px var(--dp-dl-action-col, 136px);
}
.dp-dl--registre.dp-dl--no-size:not(.dp-dl--no-format) .dp-dl__thead,
.dp-dl--registre.dp-dl--no-size:not(.dp-dl--no-format) .dp-dl__item {
grid-template-columns: minmax(0, 1fr) 84px var(--dp-dl-action-col, 136px);
}
.dp-dl--registre.dp-dl--no-format.dp-dl--no-size .dp-dl__thead,
.dp-dl--registre.dp-dl--no-format.dp-dl--no-size .dp-dl__item {
grid-template-columns: minmax(0, 1fr) var(--dp-dl-action-col, 136px);
}
/* L'en-tête de colonnes perd la cellule correspondante, sans quoi « Format »
se retrouverait au-dessus des poids. */
.dp-dl--registre.dp-dl--no-format .dp-dl__thead span:nth-child(2),
.dp-dl--registre.dp-dl--no-size .dp-dl__thead span:nth-child(3) {
display: none;
}
.dp-dl--registre.dp-dl--no-format .dp-dl__size { grid-column: 2; }
.dp-dl--registre.dp-dl--no-format .dp-dl__action { grid-column: 3; }
.dp-dl--registre.dp-dl--no-size .dp-dl__action { grid-column: 3; }
.dp-dl--registre.dp-dl--no-format.dp-dl--no-size .dp-dl__action { grid-column: 2; }
.dp-dl--registre .dp-dl__thead {
/* Mêmes débord et rembourrage que les rangées : deux grilles indépendantes
n'alignent leurs colonnes que si leurs conteneurs ont la même largeur. */
padding: 0 12px 12px;
margin-inline: -12px;
font-family: var(--dp-font-heading, inherit);
font-weight: 700;
font-size: 10px;
letter-spacing: var(--dp-tracking-caps, 0.12em);
text-transform: uppercase;
color: var(--dp-dl-meta);
}
.dp-dl--registre .dp-dl__item {
min-height: 44px;
padding: 15px 12px;
/* Marge négative pour que la surface de survol déborde du texte sans
décaler la colonne — un rembourrage seul aurait indenté tout le tableau. */
margin-inline: -12px;
border-top: 1px solid var(--dp-dl-rule);
border-radius: var(--dp-radius-sm, 10px);
transition: background-color var(--dp-duration, 0.2s) ease;
}
.dp-dl--registre .dp-dl__item:last-child {
border-bottom: 1px solid var(--dp-dl-rule);
}
.dp-dl--registre .dp-dl__item:hover,
.dp-dl--registre .dp-dl__item:focus-visible {
background: var(--dp-dl-hover-surface);
}
/* Le libellé d'action ne se coupe pas : « Se connecter » sur deux lignes dans
une colonne de tableau désaligne toute la rangée. */
.dp-dl--registre .dp-dl__action { white-space: nowrap; }
.dp-dl--registre .dp-dl__body { gap: 3px; }
.dp-dl--registre .dp-dl__item-title { font-size: 16px; }
.dp-dl--registre .dp-dl__desc { font-size: 13px; }
/* Le poids et le format sont ici des COLONNES, pas des métas glissées sous le
titre : le gabarit les sort du corps de l'entrée. Les quatre cellules sont
placées explicitement pour la même raison que dans le sommaire — l'ordre du
gabarit n'est pas celui de ce dessin. */
.dp-dl--registre .dp-dl__body { grid-column: 1; grid-row: 1; }
.dp-dl--registre .dp-dl__badge { grid-column: 2; grid-row: 1; }
.dp-dl--registre .dp-dl__size { grid-column: 3; grid-row: 1; align-self: center; }
.dp-dl--registre .dp-dl__action { grid-column: 4; grid-row: 1; }
.dp-dl--registre .dp-dl__badge {
justify-content: flex-start;
min-width: 0;
padding: 0;
background: none;
color: var(--dp-dl-item-title);
font-size: 11px;
}
/* Le tableau se déplie : sans colonnes, il n'y a plus de tableau. Le titre
prend la ligne, le format, le poids et l'action se partagent la suivante. */
@media (max-width: 720px) {
.dp-dl--registre .dp-dl__thead { display: none; }
.dp-dl--registre .dp-dl__item {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
padding: 16px 12px;
}
.dp-dl--registre .dp-dl__body { order: 1; flex: 1 1 100%; }
.dp-dl--registre .dp-dl__badge { order: 2; }
.dp-dl--registre .dp-dl__size { order: 3; }
.dp-dl--registre .dp-dl__action { order: 4; margin-left: auto; }
}
/* =====================================================================
* 3 — « encadre » : l'encadré blanc de l'identité
* =====================================================================
* Le dispositif signature de la charte, et le seul des cinq à le convoquer :
* une surface en dégradé pastel, un panneau blanc arrondi posé dedans. La
* couleur est dans le CADRE, une fois, et plus sur les entrées — ce qui règle
* d'un coup le reproche des quatre pastels qui tournent.
*
* L'en-tête reste dans le pastel, en encre : « le texte sur un pastel est
* toujours en encre » (readme du design system, Couleur).
*
* Rien à changer au PHP.
* ===================================================================== */
.dp-dl--encadre {
padding: var(--dp-dl-frame-pad);
border-radius: var(--dp-dl-frame-radius);
}
/*
* Le cadre se peint lui-même TANT QU'AUCUNE surface de la charte n'est posée.
*
* Dès qu'il en porte une, c'est `nouvelle-charte.css` qui donne le fond, l'encre
* et le grain — et la feuille du bloc se contente de lui passer son rembourrage
* et son arrondi par les deux variables que la charte lit déjà. Déclarer ici un
* `background` ou un `border-radius` de plus ferait un arbitrage de spécificité
* avec elle, que l'ordre de chargement des feuilles trancherait au hasard ; et
* il écraserait la silhouette des deux surfaces en dôme.
*/
.dp-dl--encadre:not(.dp-dl--surfaced) {
background: var(--dp-dl-frame-bg);
}
.dp-dl--encadre.dp-dl--surfaced {
--dp-nc-surface-pad: var(--dp-dl-frame-pad);
--dp-nc-surface-radius: var(--dp-dl-frame-radius);
}
/*
* Les deux surfaces sombres retournent l'encre de la charte pour tout ce
* qu'elles contiennent. Le panneau, lui, reste blanc — c'est ce qui fait
* l'encadré blanc — et son contenu doit donc redescendre en encre, sans quoi
* le titre d'un document s'écrirait en blanc sur blanc.
*
* Ce sont les jetons de la CHARTE qu'on rétablit, `--dp-nc-*`, et pas seulement
* ceux du bloc. La charte peint les rôles de texte en direct — son sélecteur de
* titres nomme `.dp-dl__item-title` — et une règle de couleur passe devant un
* jeton que plus personne ne lit. Ne rétablir que `--dp-dl-item-title` laissait
* le titre blanc sur le panneau blanc : l'erreur ne se voit pas en relisant la
* feuille du bloc, seulement à l'écran.
*
* Posé sur le panneau et non sur le cadre : l'en-tête, lui, est bien sur le fond
* sombre et doit rester clair. Il est hors de `__list`, donc hors de portée.
*/
.dp-dl--frame-invert .dp-dl__list {
--dp-nc-title: var(--dp-color-text, #303030);
--dp-nc-text: var(--dp-color-text-muted, #5b5b5b);
--dp-nc-rule: var(--dp-color-border, #dedede);
--dp-nc-link: var(--dp-color-link, #417e88);
--dp-nc-link-hover: var(--dp-color-link-hover, #325f66);
--dp-dl-item-title: var(--dp-color-text, #303030);
--dp-dl-desc: var(--dp-color-text-muted, #5b5b5b);
--dp-dl-meta: var(--dp-color-text-muted, #5b5b5b);
--dp-dl-rule: var(--dp-color-border, #dedede);
--dp-dl-action: var(--dp-color-link, #417e88);
--dp-dl-action-hover: var(--dp-color-link-hover, #325f66);
--dp-dl-lock: var(--dp-color-text-muted, #5b5b5b);
}
/* La charte pose aussi une `color` héritée sur les deux surfaces sombres, que
le panneau blanc ne doit pas reprendre. */
.dp-dl--frame-invert .dp-dl__list {
color: var(--dp-color-text, #303030);
}
.dp-dl--encadre .dp-dl__header {
margin-bottom: clamp(20px, 2.4vw, 30px);
}
.dp-dl--encadre .dp-dl__eyebrow { color: var(--dp-color-primary-dark, #125e6d); }
.dp-dl--encadre .dp-dl__intro { color: var(--dp-dl-title); }
/* Enfant direct du cadre : c'est ce qui le place au-dessus de la couche de
grain, que la charte glisse entre le fond et les enfants du conteneur. */
.dp-dl--encadre .dp-dl__list {
display: block;
max-width: none;
padding: var(--dp-dl-panel-pad);
border-radius: var(--dp-dl-panel-radius);
background: var(--dp-dl-panel-bg);
}
.dp-dl--encadre .dp-dl__item {
display: grid;
grid-template-columns: 62px minmax(0, 1fr) auto;
align-items: center;
column-gap: clamp(14px, 2vw, 26px);
padding: 18px 0;
border-top: 1px solid var(--dp-dl-rule);
}
/* Placement explicite, pour la même raison que dans le sommaire et le
registre : l'auto-placement suivrait l'ordre du gabarit, et une entrée dont
le format est vide verrait son titre tomber dans la colonne de 62 px. */
.dp-dl--encadre .dp-dl__badge { grid-column: 1; grid-row: 1; }
.dp-dl--encadre .dp-dl__body { grid-column: 2; grid-row: 1; }
.dp-dl--encadre .dp-dl__action { grid-column: 3; grid-row: 1; }
/* Format masqué : la colonne qui lui était réservée disparaît, gouttière
comprise. */
.dp-dl--encadre.dp-dl--no-format .dp-dl__item {
grid-template-columns: minmax(0, 1fr) auto;
}
.dp-dl--encadre.dp-dl--no-format .dp-dl__body { grid-column: 1; }
.dp-dl--encadre.dp-dl--no-format .dp-dl__action { grid-column: 2; }
.dp-dl--encadre .dp-dl__item:first-child { border-top: 0; }
.dp-dl--encadre .dp-dl__body { gap: 4px; }
.dp-dl--encadre .dp-dl__item-title { font-size: 17px; }
.dp-dl--encadre .dp-dl__desc { font-size: 13px; }
.dp-dl--encadre .dp-dl__badge {
justify-content: flex-start;
min-width: 0;
padding: 0;
background: none;
color: var(--dp-dl-meta);
font-size: 11px;
}
/* Le titre fonce au survol — la charte n'autorise que ça sur un lien : « les
liens foncent, jamais de changement de teinte ». */
.dp-dl--encadre .dp-dl__item:hover .dp-dl__item-title,
.dp-dl--encadre .dp-dl__item:focus-visible .dp-dl__item-title {
color: var(--dp-dl-action-hover);
}
/* Le format passe SOUS le titre et non au-dessus : en colonne il précédait le
titre, ce qui se lisait « PDF — Télécharger — Catalogue 2026 ». */
@media (max-width: 620px) {
.dp-dl--encadre .dp-dl__item {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
}
.dp-dl--encadre .dp-dl__body { flex: 1 1 100%; order: -1; }
.dp-dl--encadre .dp-dl__action { margin-left: auto; }
}
/* =====================================================================
* 4 — « feuilles » : la fiche, et son lisere de 6 px
* =====================================================================
* Le remplaçant direct de `cards`, avec trois changements et pas un de plus :
*
* - le bouton plein disparaît. L'entrée entière est un lien ; la flèche en
* pied de fiche suffit à le dire, et la fiche cesse de ressembler à une
* carte produit ;
* - la couleur descend du dôme de 108 px au lisere de 6 px sur l'arête haute
* — la seule marque colorée que la charte autorise sur une carte ;
* - un pied de fiche filetté, où le format et le poids se lisent comme la
* légende d'un document.
*
* Le fond, l'arrondi et l'ombre restent à `nouvelle-charte.css` : l'entrée
* garde sa classe `dp-dl__card`.
*
* Élément à ajouter au PHP : `` et
* `