/*
 * Contenus éditables (aide, CGU, confidentialité, à propos, contact,
 * nouveautés…) — LOT 2.
 * Mise en page de lecture (article + navigation entre les pages
 * d'information) et typographie du HTML saisi dans WordPress.
 * Uniquement des variables de tokens.css.
 */

/* =============================================================================
 * Mise en page : article ; navigation à droite sur grand écran, dessous sinon.
 * ========================================================================== */
.contenu-mise-en-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--espace-10);
}

@media (min-width: 900px) {
	.contenu-mise-en-page {
		grid-template-columns: minmax(0, var(--largeur-texte)) var(--largeur-menu-compte);
		justify-content: space-between;
		align-items: start;
	}
}

/* =============================================================================
 * Article
 * ========================================================================== */
.contenu-editorial__entete {
	display: flex;
	flex-direction: column;
	gap: var(--espace-2);
	margin-bottom: var(--espace-8);
	padding-bottom: var(--espace-6);
	border-bottom: 1px solid var(--couleur-bordure);
}

.contenu-editorial__entete .surtitre {
	color: var(--couleur-or);
}

.contenu-editorial__texte {
	max-width: 70ch;
	color: var(--couleur-texte-doux);
	font-size: var(--taille-base);
	line-height: 1.75;
	overflow-wrap: break-word;
}

.contenu-editorial__texte > * + * {
	margin-top: var(--espace-4);
}

.contenu-editorial__texte h2,
.contenu-editorial__texte h3,
.contenu-editorial__texte h4 {
	color: var(--couleur-texte);
	line-height: var(--interligne-serre);
	scroll-margin-top: calc(var(--hauteur-en-tete) + var(--espace-4));
}

.contenu-editorial__texte h2 {
	margin-top: var(--espace-10);
	font-size: var(--taille-xl);
	font-weight: var(--graisse-forte);
	letter-spacing: -0.01em;
}

.contenu-editorial__texte h3 {
	margin-top: var(--espace-8);
	font-size: var(--taille-l);
	font-weight: var(--graisse-semi);
}

.contenu-editorial__texte h4 {
	margin-top: var(--espace-6);
	font-size: var(--taille-base);
	font-weight: var(--graisse-semi);
}

.contenu-editorial__texte h2 + *,
.contenu-editorial__texte h3 + *,
.contenu-editorial__texte h4 + * {
	margin-top: var(--espace-3);
}

.contenu-editorial__texte strong,
.contenu-editorial__texte b {
	color: var(--couleur-texte);
	font-weight: var(--graisse-semi);
}

.contenu-editorial__texte a {
	color: var(--couleur-or-clair);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.contenu-editorial__texte a:hover {
	color: var(--couleur-or);
}

.contenu-editorial__texte ul,
.contenu-editorial__texte ol {
	padding-left: var(--espace-6);
}

.contenu-editorial__texte li + li {
	margin-top: var(--espace-2);
}

.contenu-editorial__texte li::marker {
	color: var(--couleur-or);
}

.contenu-editorial__texte blockquote {
	margin: var(--espace-6) 0 0;
	padding: var(--espace-3) var(--espace-5);
	border-left: 3px solid var(--couleur-or);
	border-radius: 0 var(--rayon-m) var(--rayon-m) 0;
	background: var(--couleur-surface);
	color: var(--couleur-texte);
}

.contenu-editorial__texte hr {
	margin: var(--espace-8) 0;
	border: 0;
	border-top: 1px solid var(--couleur-bordure);
}

.contenu-editorial__texte img,
.contenu-editorial__texte video,
.contenu-editorial__texte iframe {
	max-width: 100%;
	height: auto;
	border-radius: var(--rayon-m);
}

.contenu-editorial__texte figure {
	margin: var(--espace-6) 0 0;
}

.contenu-editorial__texte figcaption {
	margin-top: var(--espace-2);
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-s);
	text-align: center;
}

.contenu-editorial__texte code,
.contenu-editorial__texte kbd {
	padding: 1px 6px;
	border-radius: var(--rayon-s);
	background: var(--couleur-surface-2);
	color: var(--couleur-texte);
	font-size: 0.9em;
}

.contenu-editorial__texte pre {
	overflow-x: auto;
	padding: var(--espace-4);
	border: 1px solid var(--couleur-bordure);
	border-radius: var(--rayon-m);
	background: var(--couleur-surface);
}

.contenu-editorial__texte pre code {
	padding: 0;
	background: none;
}

/* Tableaux : défilement horizontal plutôt que débordement sur mobile. */
.contenu-editorial__texte table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: var(--taille-m);
}

.contenu-editorial__texte th,
.contenu-editorial__texte td {
	padding: var(--espace-2) var(--espace-3);
	border: 1px solid var(--couleur-bordure);
	text-align: left;
	vertical-align: top;
}

.contenu-editorial__texte th {
	background: var(--couleur-surface-2);
	color: var(--couleur-texte);
	font-weight: var(--graisse-semi);
}

/* =============================================================================
 * Navigation entre les pages d'information
 * ========================================================================== */
.contenu-navigation {
	padding: var(--espace-3);
	border: 1px solid var(--couleur-bordure);
	border-radius: var(--rayon-l);
	background: var(--couleur-surface);
}

@media (min-width: 900px) {
	.contenu-navigation {
		position: sticky;
		top: calc(var(--hauteur-en-tete) + var(--espace-6));
	}
}

.contenu-navigation__titre {
	padding: var(--espace-2) var(--espace-3) var(--espace-3);
}

.contenu-navigation__liste {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.contenu-navigation__lien {
	display: flex;
	align-items: center;
	gap: var(--espace-3);
	padding: var(--espace-3);
	border-radius: var(--rayon-m);
	color: var(--couleur-texte-doux);
	font-size: var(--taille-m);
}

.contenu-navigation__lien .icone {
	color: var(--couleur-texte-secondaire);
}

.contenu-navigation__lien:hover {
	background: var(--couleur-surface-2);
	color: var(--couleur-texte);
}

.contenu-navigation__lien[aria-current='page'] {
	background: var(--couleur-surface-2);
	color: var(--couleur-texte);
}

.contenu-navigation__lien[aria-current='page'] .icone {
	color: var(--couleur-or);
}