/* ==========================================================
   ARTICLE / CONTENU WYSIWYG
   ========================================================== */

.contenu-article.fl-rich-text {
	font-family: var(--typo-secondaire) !important;
	font-weight: var(--regular);
	font-size: var(--size-contenu-2);
	line-height: 1.6;
	overflow-wrap: break-word;
	word-break: normal;
}


/* ==========================================================
   PARAGRAPHES
   ========================================================== */

.contenu-article.fl-rich-text p {
	margin-top: 0;
	margin-bottom: 1.25em;
	font-family: var(--typo-secondaire) !important;
	font-size: inherit;
	line-height: inherit;
}

.contenu-article.fl-rich-text p:last-child {
	margin-bottom: 0;
}


/* ==========================================================
   TITRES
   ========================================================== */

.contenu-article.fl-rich-text :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 1.8em;
	margin-bottom: 0.65em;

	font-family: var(--typo-principale) !important;
	font-weight: var(--bold);
	line-height: 1.15;

	text-wrap: balance;
}

.contenu-article.fl-rich-text :is(h1, h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}


/* H1 : à éviter normalement dans le contenu d'un article
   si le titre de l'article est déjà le H1 de la page */
.contenu-article.fl-rich-text h1 {
	font-size: var(--size-titre-1);
}

.contenu-article.fl-rich-text h2 {
	font-size: var(--size-titre-2);
}

.contenu-article.fl-rich-text h3 {
	font-size: var(--size-titre-3);
}

.contenu-article.fl-rich-text h4 {
	font-size: var(--size-titre-4);
}

.contenu-article.fl-rich-text h5 {
	font-size: var(--size-titre-5);
}

.contenu-article.fl-rich-text h6 {
	font-size: var(--size-contenu-1);
}


/* ==========================================================
   LIENS
   ========================================================== */

.contenu-article.contenu-hyperlien.fl-rich-text a {
	position: relative;

	display: inline;

	color: var(--couleur-3);

	font-family: inherit !important;
	font-size: inherit;
	font-weight: inherit;

	text-decoration-line: underline;
	text-decoration-color: color-mix(
		in srgb,
		var(--couleur-3) 35%,
		transparent
	);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;

	transition:
		text-decoration-color 180ms ease-out,
		text-underline-offset 180ms ease-out;
}

.contenu-article.contenu-hyperlien.fl-rich-text a:hover,
.contenu-article.contenu-hyperlien.fl-rich-text a:focus-visible {
	color: var(--couleur-3);

	text-decoration-color: var(--couleur-3);
	text-underline-offset: 0.15em;
}

.contenu-article.contenu-hyperlien.fl-rich-text a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}


/* ==========================================================
   GRAS / ITALIQUE / TEXTE
   ========================================================== */

.contenu-article.fl-rich-text strong,
.contenu-article.fl-rich-text b {
	font-weight: var(--bold);
}

.contenu-article.fl-rich-text em,
.contenu-article.fl-rich-text i {
	font-style: italic;
}

.contenu-article.fl-rich-text u {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.contenu-article.fl-rich-text del,
.contenu-article.fl-rich-text s {
	text-decoration-thickness: 1px;
}

.contenu-article.fl-rich-text small {
	font-size: var(--size-legende);
	line-height: 1.4;
}

.contenu-article.fl-rich-text sub,
.contenu-article.fl-rich-text sup {
	position: relative;
	font-size: 0.7em;
	line-height: 0;
	vertical-align: baseline;
}

.contenu-article.fl-rich-text sup {
	top: -0.5em;
}

.contenu-article.fl-rich-text sub {
	bottom: -0.25em;
}


/* ==========================================================
   LISTES
   ========================================================== */

.contenu-article.fl-rich-text :is(ul, ol) {
	margin-top: 0;
	margin-bottom: 1.5em;
	padding-left: 1.5em;
}

.contenu-article.fl-rich-text ul {
	list-style-type: disc;
}

.contenu-article.fl-rich-text ol {
	list-style-type: decimal;
}

.contenu-article.fl-rich-text li {
	margin-bottom: 0.5em;

	font-family: inherit !important;
	font-size: inherit;
	line-height: inherit;
}

.contenu-article.fl-rich-text li:last-child {
	margin-bottom: 0;
}

/* Listes imbriquées */
.contenu-article.fl-rich-text li :is(ul, ol) {
	margin-top: 0.5em;
	margin-bottom: 0;
}

.contenu-article.fl-rich-text ul ul {
	list-style-type: circle;
}

.contenu-article.fl-rich-text ul ul ul {
	list-style-type: square;
}


/* ==========================================================
   LISTE DE DÉFINITION
   ========================================================== */

.contenu-article.fl-rich-text dl {
	margin: 0 0 1.5em;
}

.contenu-article.fl-rich-text dt {
	margin-top: 1em;
	font-weight: var(--bold);
}

.contenu-article.fl-rich-text dd {
	margin: 0.35em 0 0 1.5em;
}


/* ==========================================================
   CITATIONS
   ========================================================== */

.contenu-article.fl-rich-text blockquote {
	margin: 2em 0;
	padding: 0.4em 0 0.4em 1.5em;

	border-left: 3px solid var(--couleur-3);

	font-family: var(--typo-secondaire) !important;
	font-style: italic;
	font-size: 1.1em;
	line-height: 1.55;
}

.contenu-article.fl-rich-text blockquote > :last-child {
	margin-bottom: 0;
}

.contenu-article.fl-rich-text cite {
	display: block;
	margin-top: 0.75em;

	font-size: var(--size-legende);
	font-style: normal;
	font-weight: var(--bold);
}

.contenu-article.fl-rich-text q {
	font-style: italic;
}


/* ==========================================================
   SÉPARATEUR
   ========================================================== */

.contenu-article.fl-rich-text hr {
	width: 100%;
	height: 1px;

	margin: 2.5em 0;

	border: 0;
	background: #D6D6D6;
}


/* ==========================================================
   IMAGES
   ========================================================== */

/*.contenu-article.fl-rich-text img {
	display: block;

	max-width: 100%;
	height: auto;

	margin: 2em auto;
}*/


/* Image intégrée dans un lien */
.contenu-article.fl-rich-text a img {
	margin: 0;
}


/* ==========================================================
   FIGURE / LÉGENDE
   ========================================================== */

.contenu-article.fl-rich-text figure {
	max-width: 100%;
	margin: 2em 0;
}

.contenu-article.fl-rich-text figure img {
	margin: 0;
}

.contenu-article.fl-rich-text figcaption {
	margin-top: 0.75em;

	font-family: var(--typo-secondaire) !important;
	font-size: var(--size-legende);
	font-weight: var(--regular);
	line-height: 1.4;
}


/* ==========================================================
   WORDPRESS : ALIGNEMENTS D'IMAGES
   ========================================================== */

.contenu-article.fl-rich-text .aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.contenu-article.fl-rich-text .alignleft {
	float: left;
	margin: 0.5em 2em 1em 0;
}

.contenu-article.fl-rich-text .alignright {
	float: right;
	margin: 0.5em 0 1em 2em;
}


/* Évite que les floats débordent du contenu */
.contenu-article.fl-rich-text::after {
	content: "";
	display: table;
	clear: both;
}


/* ==========================================================
   TABLEAUX
   ========================================================== */

.contenu-article.fl-rich-text table {
	display: block;

	width: 100%;
	max-width: 100%;

	margin: 2em 0;

	border-collapse: collapse;
	overflow-x: auto;

	-webkit-overflow-scrolling: touch;
}

.contenu-article.fl-rich-text :is(th, td) {
	padding: 0.8em 1em;

	border: 1px solid #D6D6D6;

	text-align: left;
	vertical-align: top;

	font-family: inherit !important;
	font-size: inherit;
	line-height: 1.4;
}

.contenu-article.fl-rich-text th {
	font-weight: var(--bold);
}


/* ==========================================================
   CODE
   ========================================================== */

.contenu-article.fl-rich-text code,
.contenu-article.fl-rich-text kbd,
.contenu-article.fl-rich-text samp {
	font-family: monospace !important;
	font-size: 0.9em;
}

.contenu-article.fl-rich-text code {
	padding: 0.15em 0.4em;

	background: rgba(0, 0, 0, 0.06);

	border-radius: 3px;
}

.contenu-article.fl-rich-text pre {
	max-width: 100%;

	margin: 2em 0;
	padding: 1.25em;

	overflow-x: auto;

	background: rgba(0, 0, 0, 0.06);

	font-family: monospace !important;
	font-size: 0.9em;
	line-height: 1.5;

	white-space: pre;
}

.contenu-article.fl-rich-text pre code {
	padding: 0;

	background: transparent;

	font-size: inherit;
}


/* ==========================================================
   TEXTE SURLIGNÉ
   ========================================================== */

.contenu-article.fl-rich-text mark {
	padding: 0.05em 0.2em;

	background: var(--couleur-principale);
	color: inherit;
}


/* ==========================================================
   ADRESSE
   ========================================================== */

.contenu-article.fl-rich-text address {
	margin-bottom: 1.5em;

	font-style: normal;
	line-height: inherit;
}


/* ==========================================================
   VIDÉOS / IFRAMES / EMBEDS
   ========================================================== */

.contenu-article.fl-rich-text :is(
	iframe,
	video,
	embed,
	object
) {
	display: block;

	max-width: 100%;
	margin: 2em auto;
}

.contenu-article.fl-rich-text video {
	height: auto;
}


/* ==========================================================
   WORDPRESS GALLERY
   ========================================================== */

.contenu-article.fl-rich-text .gallery {
	margin: 2em 0;
}

.contenu-article.fl-rich-text .gallery img {
	margin: 0;
}


/* ==========================================================
   ACCESSIBILITÉ
   ========================================================== */

.contenu-article.fl-rich-text :target {
	scroll-margin-top: 120px;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 768px) {

	.contenu-article.fl-rich-text :is(h1, h2, h3, h4, h5, h6) {
		text-wrap: pretty;
	}

	.contenu-article.fl-rich-text .alignleft,
	.contenu-article.fl-rich-text .alignright {
		float: none;

		display: block;

		margin: 1.5em auto;
	}

	.contenu-article.fl-rich-text blockquote {
		padding-left: 1em;
	}

	.contenu-article.fl-rich-text :is(th, td) {
		padding: 0.65em 0.75em;
	}

}