/* =====================================================================
css/modules/contenu.css — Rendu des contenus éditables
---------------------------------------------------------------------
Habille le HTML sorti de l'éditeur, partout où il s'affiche : pages
légales, encadrés d'information, aperçu de l'administration, et la
zone d'édition de TinyMCE elle-même — l'éditeur charge cette feuille
dans son iframe, ce qui fait que le rédacteur écrit dans la mise en
forme finale plutôt que dans une approximation.
Tout est porté par une seule classe, .irp-contenu, posée sur le
conteneur. Les règles ne s'appliquent donc qu'au texte édité, jamais
au reste de la page : le CSE peut écrire un sans risquer de
déplacer un titre de l'interface.
Sommaire
1. Rythme vertical
2. Titres
3. Listes, citations, code
4. Liens et images
5. Tableaux
6. Liens mis en valeur
7. Encadrés côte à côte
===================================================================== */
.irp-contenu {
color: var(--bs-body-color);
line-height: 1.65;
overflow-wrap: break-word;
}
/* =====================================================================
1. RYTHME VERTICAL
Les marges sont posées vers le bas uniquement, et le dernier élément
n'en porte pas : un contenu placé dans une carte ne creuse pas un
blanc sous sa dernière ligne.
===================================================================== */
.irp-contenu > *:first-child { margin-top: 0; }
.irp-contenu > *:last-child { margin-bottom: 0; }
.irp-contenu p {
margin: 0 0 1rem;
}
.irp-contenu hr {
margin: 1.75rem 0;
border: 0;
border-top: 1px solid var(--irp-border);
opacity: 1;
}
/* =====================================================================
2. TITRES
L'éditeur ne propose que h2 à h4 : le h1 d'une page est son titre,
rendu par le gabarit. La hiérarchie reste donc lisible par un lecteur
d'écran quel que soit le texte saisi.
===================================================================== */
.irp-contenu h2,
.irp-contenu h3,
.irp-contenu h4,
.irp-contenu h5,
.irp-contenu h6 {
margin: 1.75rem 0 0.65rem;
color: var(--irp-heading);
font-weight: 600;
line-height: 1.3;
}
.irp-contenu h2 { font-size: 1.25rem; }
.irp-contenu h3 { font-size: 1.0625rem; }
.irp-contenu h4 { font-size: 1rem; }
.irp-contenu h5,
.irp-contenu h6 { font-size: 0.9375rem; }
/* =====================================================================
3. LISTES, CITATIONS, CODE
===================================================================== */
.irp-contenu ul,
.irp-contenu ol {
margin: 0 0 1rem;
padding-left: 1.4rem;
}
.irp-contenu li { margin-bottom: 0.3rem; }
.irp-contenu li:last-child { margin-bottom: 0; }
/* Une liste imbriquée est plus serrée : elle appartient à sa ligne
parente, elle ne recommence pas un bloc. */
.irp-contenu li > ul,
.irp-contenu li > ol {
margin: 0.3rem 0 0;
}
.irp-contenu dl { margin: 0 0 1rem; }
.irp-contenu dt { font-weight: 600; }
.irp-contenu dd { margin: 0 0 0.5rem 1rem; }
.irp-contenu blockquote {
margin: 0 0 1rem;
padding: 0.15rem 0 0.15rem 1rem;
border-left: 3px solid var(--irp-cyan-200);
color: var(--irp-text-muted);
}
.irp-contenu blockquote > *:last-child { margin-bottom: 0; }
.irp-contenu code {
padding: 0.1rem 0.3rem;
font-size: 0.875em;
background: var(--irp-surface-3);
border-radius: var(--irp-radius-sm);
}
/* Un bloc préformaté ne doit jamais élargir la page : il défile seul. */
.irp-contenu pre {
margin: 0 0 1rem;
padding: 0.85rem 1rem;
overflow-x: auto;
background: var(--irp-surface-3);
border-radius: var(--irp-radius-sm);
}
.irp-contenu pre code {
padding: 0;
background: none;
}
/* =====================================================================
4. LIENS ET IMAGES
===================================================================== */
/* Le soulignement est conservé : dans un paragraphe, la couleur seule ne
suffit pas à distinguer un lien pour qui perçoit mal les contrastes. */
.irp-contenu a {
color: var(--bs-link-color);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.irp-contenu a:hover {
color: var(--bs-link-hover-color);
}
.irp-contenu img {
max-width: 100%;
height: auto;
border-radius: var(--irp-radius-sm);
}
.irp-contenu figure {
margin: 0 0 1rem;
}
.irp-contenu figcaption {
margin-top: 0.4rem;
font-size: 0.8125rem;
color: var(--irp-text-muted);
}
/* =====================================================================
5. TABLEAUX
Le tableau défile dans son propre cadre plutôt que d'imposer une barre
de défilement à la page entière : sur téléphone, un tableau à quatre
colonnes déborde toujours.
===================================================================== */
.irp-contenu table {
display: block;
width: 100%;
max-width: 100%;
margin: 0 0 1rem;
overflow-x: auto;
border-collapse: collapse;
}
.irp-contenu th,
.irp-contenu td {
padding: 0.5rem 0.75rem;
border: 1px solid var(--irp-border);
text-align: left;
vertical-align: top;
}
.irp-contenu th {
background: var(--irp-surface-2);
font-weight: 600;
color: var(--irp-heading);
}
.irp-contenu caption {
padding-bottom: 0.4rem;
color: var(--irp-text-muted);
font-size: 0.8125rem;
text-align: left;
}
/* =====================================================================
6. LIENS MIS EN VALEUR
Insérés par le bouton « lien mis en valeur » de l'éditeur (editeur.js) :
un encart ou un bouton vers une page du site.
Titre
Phrase
Texte
Texte
Tout le style porte sur le lien : un paragraphe créé par Entrée à la
suite hérite de la classe mais, sans lien, reste un paragraphe
ordinaire. Les valeurs de repli des variables servent dans la zone
d'édition, où theme.css n'est pas chargée.
===================================================================== */
.irp-contenu .irp-lien-encart a {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 36rem;
min-height: 3rem;
padding: .45rem 1rem .45rem 3.4rem;
border: 1px solid var(--irp-border, #c8d0dc);
border-left: 4px solid var(--irp-cyan, #1b9dd9);
border-radius: var(--irp-radius, 10px);
background: var(--irp-surface, #fff);
box-shadow: var(--irp-shadow-sm, 0 1px 3px rgba(28, 51, 80, .07));
color: var(--irp-text, #1c3350);
text-decoration: none;
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
/* Pastille fléchée : la flèche est dessinée en SVG, le fond reste
translucide pour convenir aux deux thèmes. */
.irp-contenu .irp-lien-encart a::before {
content: '';
position: absolute;
top: 50%;
left: .8rem;
width: 1.85rem;
height: 1.85rem;
margin-top: -.925rem;
border-radius: 50%;
background: rgba(27, 157, 217, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b9dd9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / .95rem no-repeat;
transition: transform 160ms ease;
}
.irp-contenu .irp-lien-encart a:hover,
.irp-contenu .irp-lien-encart a:focus-visible {
border-color: var(--irp-cyan-200, #a6d9f1);
border-left-color: var(--irp-cyan, #1b9dd9);
box-shadow: 0 4px 14px rgba(28, 51, 80, .12);
color: var(--irp-text, #1c3350);
transform: translateY(-1px);
}
.irp-contenu .irp-lien-encart a:hover::before { transform: translateX(3px); }
.irp-contenu .irp-lien-encart strong {
display: block;
font-size: .9375rem;
font-weight: 600;
line-height: 1.3;
color: var(--irp-heading, #1c3350);
}
.irp-contenu .irp-lien-encart .irp-lien-encart__texte {
display: block;
margin-top: .05rem;
font-size: .8125rem;
line-height: 1.35;
color: var(--irp-text-muted, #6c7f99);
}
/* Lien simple : souligné et en gras, dans le fil du texte. Ni encadré ni
pastille — quand un encart ferait trop d'effet pour un simple renvoi,
et qu'un bouton donnerait à une note de bas de page l'allure d'une
action. Le soulignement est explicite : il ne dépend pas du réglage
de l'éditeur ni du thème.
Deux écritures, et les deux comptent. L'éditeur pose désormais la
classe sur le lien lui-même (« la rubrique Ludothèque du
site ») : c'est la seule façon de rester au fil d'une phrase. Les
textes rédigés avant portent un paragraphe autour, qui les jetait à
la ligne ; ils restent lisibles tels quels, le rédacteur les remet
au fil du texte en rouvrant le lien s'il le souhaite. */
.irp-contenu .irp-lien-simple a,
.irp-contenu a.irp-lien-simple {
font-weight: 600;
color: var(--irp-cyan-700, #10658c);
text-decoration: underline;
text-underline-offset: .18em;
text-decoration-thickness: .08em;
}
.irp-contenu .irp-lien-simple a:hover,
.irp-contenu .irp-lien-simple a:focus-visible,
.irp-contenu a.irp-lien-simple:hover,
.irp-contenu a.irp-lien-simple:focus-visible {
color: var(--irp-cyan, #1b9dd9);
text-decoration-thickness: .12em;
}
/* Cyan foncé plutôt que le cyan des boutons : le texte blanc y garde un
contraste de 4,5:1, exigé pour un texte de taille courante. */
.irp-contenu .irp-lien-bouton a {
display: inline-flex;
align-items: center;
gap: .45rem;
min-height: 2.25rem;
padding: .35rem 1rem;
font-size: .875rem;
line-height: 1.3;
border-radius: var(--irp-radius-pill, 999px);
background: var(--irp-cyan-700, #10658c);
box-shadow: 0 1px 2px rgba(21, 128, 179, .28);
color: #fff;
font-weight: 600;
text-decoration: none;
transition: background-color 160ms ease, box-shadow 160ms ease;
}
.irp-contenu .irp-lien-bouton a::after {
content: '';
width: .85rem;
height: .85rem;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.irp-contenu .irp-lien-bouton a:hover,
.irp-contenu .irp-lien-bouton a:focus-visible {
background: var(--irp-slate, #1c3350);
box-shadow: 0 3px 10px rgba(21, 128, 179, .30);
color: #fff;
}
.irp-contenu .irp-lien-encart a:focus-visible,
.irp-contenu .irp-lien-bouton a:focus-visible {
outline: 2px solid var(--irp-cyan-600, #1580b3);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.irp-contenu .irp-lien-encart a,
.irp-contenu .irp-lien-encart a::before { transition: none; }
.irp-contenu .irp-lien-encart a:hover { transform: none; }
}
/* =====================================================================
7. ENCADRÉS CÔTE À CÔTE
Insérés par le bouton « encadrés côte à côte » de l'éditeur
(editeur.js) : deux ou trois blocs de même largeur, sur une ligne.
Le nombre de colonnes n'est PAS écrit dans une classe : la grille le
déduit du nombre de blocs (auto-fit). En ajouter un quatrième ne
demande donc rien de plus, et rien ne peut mentir sur le compte réel.
LA PISTE S'ARRÊTE AU TEXTE (max-content), elle ne s'étire pas (1fr).
Deux fiches de contact sur une page large donnaient deux cadres de
600 px pour quatre lignes chacun : l'encadré doit border le texte, pas
occuper la place disponible. Le minimum de 12rem évite l'inverse — un
cadre plus étroit que sa propre ponctuation — et fait passer les blocs
les uns sous les autres dès qu'ils n'y tiennent plus.
Le plafond vit sur le bloc (max-width) et non sur la piste : c'est lui
qui borne la contribution max-content, donc un pavé de texte s'y replie
au lieu d'étirer la grille.
===================================================================== */
.irp-contenu .irp-colonnes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, max-content));
justify-content: start;
gap: 1rem;
margin: 0 0 1rem;
}
.irp-contenu .irp-colonne {
/* Sans cela, un courriel long élargit sa piste au lieu d'aller à la
ligne, et les colonnes cessent d'être de même largeur. */
min-width: 0;
max-width: 24rem;
padding: .9rem 1.1rem;
border: 1px solid var(--irp-border, #c8d0dc);
border-radius: var(--irp-radius, 10px);
background: var(--irp-surface, #fff);
}
.irp-contenu .irp-colonne > *:first-child { margin-top: 0; }
.irp-contenu .irp-colonne > *:last-child { margin-bottom: 0; }
/* Variante sans cadre : la même mise en colonnes, mais rien autour —
pour deux listes qu'on veut lire de front sans les encadrer. */
.irp-contenu .irp-colonnes--nues .irp-colonne {
padding: 0;
border: 0;
background: none;
}