/**
 * Editorial blocks used inside articles: summary box, callouts, verdict,
 * affiliate call to action, author, related posts.
 */

/* --------------------------------------------------------------------------
   L'essentiel, en tête d'article
   -------------------------------------------------------------------------- */

.af .af-tldr {
	margin: 0 0 30px;
	padding: 24px 26px;
	border-radius: var(--af-r-lg);
	background: var(--af-neutral-bg);
}

.af .af-tldr__legend {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: var(--af-muted);
}

.af .af-tldr ul { margin: 0; padding: 0; list-style: none; }

.af .af-tldr li {
	position: relative;
	padding-left: 26px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--af-text);
}

.af .af-tldr li + li { margin-top: 10px; }

.af .af-tldr li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 9px;
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--af-accent-fonce);
	border-bottom: 2px solid var(--af-accent-fonce);
	transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Encarts d'information
   -------------------------------------------------------------------------- */

.af .af-note {
	margin: 30px 0;
	padding: 20px 24px;
	border-left: 3px solid var(--af-blue);
	border-radius: 0 var(--af-r-md) var(--af-r-md) 0;
	background: var(--af-blue-bg);
}

.af .af-note__legend {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: var(--af-blue);
}

.af .af-note p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--af-text);
}

.af .af-note p + p { margin-top: 10px; }

.af .af-note--avert { border-left-color: var(--af-orange); background: var(--af-orange-bg); }
.af .af-note--avert .af-note__legend { color: var(--af-orange); }

.af .af-note--ok { border-left-color: var(--af-green); background: var(--af-green-bg); }
.af .af-note--ok .af-note__legend { color: var(--af-green); }

/* --------------------------------------------------------------------------
   Verdict, en fin d'avis
   -------------------------------------------------------------------------- */

.af .af-verdict {
	margin: 44px 0;
	padding: 30px;
	border: 1px solid var(--af-border);
	border-radius: var(--af-r-xl);
	background: var(--af-surface);
	box-shadow: var(--af-shadow-card);
}

.af .af-verdict__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}

.af .af-verdict__note {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: var(--af-navy);
	color: #ffffff;
	font-family: var(--af-titre);
	font-size: 25px;
	font-weight: 800;
	line-height: 1;
}

.af .af-verdict__note span {
	margin-top: 3px;
	font-family: var(--af-texte);
	font-size: 11px;
	font-weight: 600;
	color: var(--af-on-dark-soft);
}

.af .af-verdict__titre {
	font-family: var(--af-titre);
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	color: var(--af-navy);
}

.af .af-verdict__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 22px;
}

.af .af-verdict__col { flex: 1 1 220px; min-width: 0; }

.af .af-verdict__col h4 {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.af .af-verdict__col--plus h4 { color: var(--af-green); }
.af .af-verdict__col--moins h4 { color: var(--af-orange); }

.af .af-verdict__col ul { margin: 0; padding: 0; list-style: none; }

.af .af-verdict__col li {
	position: relative;
	padding-left: 22px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--af-text-soft);
}

.af .af-verdict__col li + li { margin-top: 8px; }

.af .af-verdict__col li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 800;
}

.af .af-verdict__col--plus li::before { content: "+"; color: var(--af-green); }
.af .af-verdict__col--moins li::before { content: "\2212"; color: var(--af-orange); }

/* --------------------------------------------------------------------------
   Appel à l'action partenaire
   -------------------------------------------------------------------------- */

.af .af-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin: 38px 0;
	padding: 26px 28px;
	border-radius: var(--af-r-xl);
	background: var(--af-navy);
}

.af .af-cta__text { flex: 1 1 260px; min-width: 0; }

.af .af-cta__titre {
	font-family: var(--af-titre);
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 800;
	color: #ffffff;
}

.af .af-cta p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--af-on-dark);
}

.af .af-cta .af-btn--accent { flex: 0 0 auto; }

.af .af-cta__mention {
	flex-basis: 100%;
	margin: 0;
	font-size: 13px;
	color: var(--af-on-dark-soft);
}

/* --------------------------------------------------------------------------
   Auteur
   -------------------------------------------------------------------------- */

.af .af-auteur {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 50px 0 0;
	padding: 24px 26px;
	border: 1px solid var(--af-border);
	border-radius: var(--af-r-lg);
	background: var(--af-surface);
}

.af .af-auteur img {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.af .af-auteur__text { flex: 1 1 240px; min-width: 0; }

.af .af-auteur__nom {
	font-family: var(--af-titre);
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 800;
	color: var(--af-navy);
}

.af .af-auteur p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--af-text-soft);
}

/* --------------------------------------------------------------------------
   À lire ensuite
   -------------------------------------------------------------------------- */

.af .af-suite { margin-top: 56px; }

.af .af-suite__legend {
	font-family: var(--af-titre);
	margin: 0 0 20px;
	font-size: 22px;
	font-weight: 800;
	color: var(--af-navy);
}

@media (max-width: 575px) {
	.af .af-cta { padding: 22px; }
	.af .af-verdict { padding: 22px; }
}

/* --------------------------------------------------------------------------
   Encarts repris d'Elementor
   -------------------------------------------------------------------------- */

/* Ces blocs portent leur propre dessin, préfixé par leur classe d'isolement.
   Le style de lien du corps d'article les abîmerait, il est neutralisé ici. */

.af .af-body .af-encart {
	margin: 36px 0;
}

.af .af-body .af-encart a,
.af .af-body .af-encart a:link,
.af .af-body .af-encart a:visited,
.af .af-body .af-encart a:hover {
	text-decoration: none;
}

/* Le gabarit impose sa typographie et ses couleurs à tout le corps. Dans un
   encart, ces règles produisaient du bleu nuit sur bleu nuit. Tout hérite donc
   du conteneur, et le dessin propre de l'encart, plus spécifique, l'emporte. */

.af .af-body .af-encart p,
.af .af-body .af-encart li,
.af .af-body .af-encart td,
.af .af-body .af-encart th,
.af .af-body .af-encart span,
.af .af-body .af-encart div,
.af .af-body .af-encart strong,
.af .af-body .af-encart em {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.af .af-body .af-encart h1,
.af .af-body .af-encart h2,
.af .af-body .af-encart h3,
.af .af-body .af-encart h4,
.af .af-body .af-encart h5,
.af .af-body .af-encart h6 {
	color: inherit !important;
	letter-spacing: normal;
	margin-top: 0;
	scroll-margin-top: 0;
}

.af .af-body .af-encart a,
.af .af-body .af-encart a:link,
.af .af-body .af-encart a:visited,
.af .af-body .af-encart a:hover {
	color: inherit;
}

/* Les boutons du corps n'ont rien à faire ici non plus : ces encarts portent
   déjà leur propre bouton, dessiné avec eux. */
.af .af-body .af-encart .wp-block-button__link,
.af .af-body .af-encart .wp-element-button,
.af .af-body .af-encart .elementor-button {
	min-height: 0;
	padding: inherit !important;
	border-radius: inherit !important;
	background: none !important;
	box-shadow: none;
	font-size: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
}

.af .af-body .af-encart ul > li { padding-left: 0; }
.af .af-body .af-encart ul > li::before { display: none; }

/* Les tableaux de ces encarts gardent leur propre mise en forme. */
.af .af-body .af-encart table {
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: inherit;
}

.af .af-body .af-encart thead th {
	font-family: inherit;
	letter-spacing: normal;
}

.af .af-body .af-encart tbody tr:nth-child(even) { background: none; }

/* --------------------------------------------------------------------------
   Notation en étoiles
   -------------------------------------------------------------------------- */

.af .af-body .af-etoiles {
	display: flex;
	justify-content: center;
	margin: 26px 0;
}

.af .af-etoiles__suite {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	padding: 12px 20px;
	border-radius: var(--af-r-pill);
	background: var(--af-surface);
	border: 1px solid var(--af-border);
	color: var(--af-accent);
	box-shadow: var(--af-shadow-card);
}

.af .af-etoiles__suite svg { display: block; }

/* --------------------------------------------------------------------------
   Lignes et colonnes reprises d'Elementor
   -------------------------------------------------------------------------- */

/* Les pages construites visuellement rangeaient leurs blocs côte à côte. La
   structure est conservée ici, seules les couleurs changent. */

/* La gouttière passe à l'intérieur des colonnes plutôt qu'entre elles : les
   largeurs héritées du constructeur sont des pourcentages qui totalisent
   exactement 100, et une gouttière ajoutée par-dessus faisait repartir la
   dernière colonne à la ligne, seule et pleine largeur. */
.af .af-body .af-ligne {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	column-gap: 0;
	row-gap: 24px;
	margin: 32px -12px;
}

.af .af-body .af-ligne > * {
	padding-inline: 12px;
}

.af .af-body .af-colonne {
	flex: 1 1 260px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 24px;
}

.af .af-body .af-colonne > *:first-child { margin-top: 0; }
.af .af-body .af-colonne > *:last-child { margin-bottom: 0; }

/* Une colonne qui portait un fond pâle devient une carte, et les cartes d'une
   même ligne prennent chacune leur couleur : le site en compte quatre, autant
   s'en servir plutôt que de tout poser sur le même gris. */
.af .af-body .af-carte {
	border: 1px solid var(--af-border);
	border-radius: var(--af-r-xl);
	box-shadow: var(--af-shadow-card);
	overflow: hidden;
	position: relative;
	padding-top: 30px;
	background: var(--af-carte-fond, var(--af-blue-bg));
}

.af .af-body .af-carte::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 5px;
	background: var(--af-carte-trait, var(--af-blue));
}

.af .af-body .af-ligne > .af-carte:nth-child(4n + 1) {
	--af-carte-fond: var(--af-blue-bg);
	--af-carte-trait: var(--af-blue);
}

.af .af-body .af-ligne > .af-carte:nth-child(4n + 2) {
	--af-carte-fond: var(--af-green-bg);
	--af-carte-trait: var(--af-green);
}

.af .af-body .af-ligne > .af-carte:nth-child(4n + 3) {
	--af-carte-fond: var(--af-orange-bg);
	--af-carte-trait: var(--af-orange);
}

.af .af-body .af-ligne > .af-carte:nth-child(4n + 4) {
	--af-carte-fond: var(--af-violet-bg);
	--af-carte-trait: var(--af-violet);
}

/* Le titre de la carte prend la couleur de son trait. */
.af .af-body .af-carte > div:first-child p,
.af .af-body .af-carte > p:first-child {
	color: var(--af-carte-trait, var(--af-blue));
}

/* Le premier paragraphe d'une carte lui sert de titre : il tient sur deux
   lignes réservées, pour que les images des cartes voisines se répondent. */
.af .af-body .af-carte > div:first-child p,
.af .af-body .af-carte > p:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.1em;
	margin: 0 0 14px;
	font-family: var(--af-titre);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--af-navy);
	text-align: center;
}

/* L'image occupe la même hauteur dans chaque carte, et le texte qui suit est
   poussé en bas : les cartes se terminent alors à la même ligne. */
.af .af-body .af-colonne figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 150px;
	margin: 0 0 14px;
}

/* Dans une carte, toutes les images s'arrêtent à la même hauteur, sinon la
   rangée de cartes part en dents de scie. Hors carte, l'image garde le
   plafond commun du corps. */
.af .af-body .af-carte figure.wp-block-image img,
.af .af-body .af-carte figure img {
	max-height: 220px;
}

.af .af-body .af-colonne figure img {
	width: auto;
	margin: 0 auto;
}

.af .af-body .af-colonne > *:last-child { margin-top: auto; }

.af .af-body .af-colonne img {
	margin-left: auto;
	margin-right: auto;
}

.af .af-body .af-bloc {
	margin: 32px 0;
}

.af .af-body .af-bloc > .af-ligne:first-child { margin-top: 0; }
.af .af-body .af-bloc > .af-ligne:last-child { margin-bottom: 0; }

/* Un bloc sans fond ne doit pas creuser un espace de plus. */
.af .af-body .af-bloc:not([style*="background"]) { margin: 0; }

@media (max-width: 767px) {
	.af .af-body .af-ligne { gap: 16px; }
	.af .af-body .af-colonne { flex-basis: 100% !important; }
}

/* --------------------------------------------------------------------------
   Les bandeaux pâles du constructeur
   -------------------------------------------------------------------------- */

/* Un titre posé sur une bande de couleur pâle pleine largeur ne donnait rien
   de bon : la bande est retirée et le surlignage passe sur le texte. */

.af .af-body .af-bloc--titre {
	background: none !important;
	padding: 0 !important;
	margin: 52px 0 34px;
	/* Le titre passe en inline pour que le surlignage épouse le texte : le bloc
	   doit donc porter lui-même l'air qui le sépare du paragraphe suivant. */
	display: block;
	overflow: hidden;
}

.af .af-body .af-bloc--titre h2,
.af .af-body .af-bloc--titre h3,
.af .af-body .af-bloc--titre h4 {
	display: inline;
	margin: 0;
	padding: 0 0.14em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	background-image: linear-gradient(transparent 62%, rgba(249, 195, 0, 0.55) 62%);
	line-height: 1.5;
}

/* Les autres blocs pâles n'apportaient qu'un gris de plus sur du blanc. Ils
   gardent leur rythme, la couleur vient des cartes et des encarts. */
.af .af-body .af-bloc--teinte {
	background: none !important;
	padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Tuiles de liens : comparatifs, avis, rayons
   -------------------------------------------------------------------------- */

.af .af-body .af-bloc.af-liens { margin: var(--af-gap-xl) 0; padding: 0 !important; }

.af .af-body .af-liens__legend {
	font-family: var(--af-titre);
	margin: 0 0 var(--af-gap-md);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--af-muted);
}

.af .af-body .af-liens__legend--second { margin-top: var(--af-gap-xl); }

.af .af-body .af-tuiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.af .af-body .af-tuile,
.af .af-body .af-tuile:link,
.af .af-body .af-tuile:visited {
	position: relative;
	display: block;
	padding: 22px 46px 22px 22px;
	border: 1px solid var(--af-border);
	border-radius: var(--af-r-lg);
	background: var(--af-surface);
	text-decoration: none !important;
	color: var(--af-navy) !important;
	transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.af .af-body .af-tuile:hover {
	border-color: var(--af-navy);
	transform: translateY(-2px);
	box-shadow: var(--af-shadow-card);
}

.af .af-body .af-tuile__eyebrow {
	display: block;
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--af-orange);
}

.af .af-body .af-tuile__titre {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.af .af-body .af-tuile__fleche {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: var(--af-muted);
	transition: transform 0.18s ease, color 0.18s ease;
}

.af .af-body .af-tuile:hover .af-tuile__fleche {
	transform: translate(4px, -50%);
	color: var(--af-navy);
}

@media (max-width: 991px) { .af .af-body .af-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .af .af-body .af-tuiles { grid-template-columns: 1fr; } }

/* Les pastilles de rayon sont déjà dessinées pour les pages de liste : ici il
   suffit d'annuler le soulignement que le corps de page impose aux liens. */
.af .af-body .af-chips .af-chip,
.af .af-body .af-chips .af-chip:link,
.af .af-body .af-chips .af-chip:visited {
	text-decoration: none;
	color: var(--af-navy);
}

.af .af-body .af-chips .af-chip:hover { color: var(--af-navy); }

/* Les tableaux posés dans un encart gardent leur largeur minimale de contenu
   et débordaient la page sur un téléphone. Ils défilent à l'horizontale
   plutôt que d'élargir le document. */
@media (max-width: 767px) {
	.af .af-body .af-encart table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* Un bloc de couleur posé dans le contenu : la marge haute de son titre
   s'ajoute au cadre, pendant que la marge basse du dernier paragraphe s'en
   échappe par fusion. Le texte se retrouvait poussé contre le bord bas.

   Les cadres s'emboîtent sur plusieurs niveaux : la règle vise le premier
   et le dernier enfant à toute profondeur, pas seulement l'enfant direct. */
.af .af-body .af-bloc[style*="background"] :first-child {
	margin-top: 0;
}

.af .af-body .af-bloc[style*="background"] :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Images du corps : une hauteur commune
   -------------------------------------------------------------------------- */

/* Une capture d'écran en portrait occupait l'écran entier pendant que sa
   voisine en colonne tenait dans 150 pixels. Un plafond commun remet toutes
   les illustrations à la même échelle. */
.af .af-body figure.wp-block-image {
	text-align: center;
}

/* En bloc, sinon la légende remonte se coller à droite de l'image. */
.af .af-body figure.wp-block-image img {
	display: block;
	max-height: 520px;
	width: auto;
	margin-inline: auto;
}

.af .af-body figure.wp-block-image figcaption {
	display: block;
	clear: both;
}

/* Plusieurs captures qui se suivent : une grille, pas une colonne sans fin. */
.af .af-body .af-galerie {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: var(--af-gap-md);
	align-items: start;
	margin-block: var(--af-gap-lg);
}

.af .af-body .af-galerie figure {
	margin: 0;
}

.af .af-body .af-galerie img {
	max-height: 340px;
}