/* Feuille de section « article » : chargée uniquement avec la section (SECTION_STYLES, inc/assets.php). */

/* ==========================================================================
   Article et page simple : image à la une, corps de lecture (.wl-prose)
   ========================================================================== */

/* Image à la une : chevauche le bas de l'en-tête nuit. */
.wl-article .wl-cover {
	position: relative;
	max-width: 60rem;
	margin-top: calc(-1 * var(--wp--preset--spacing--70));
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid var(--wl-line);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: 0 32px 64px -32px rgb(7 10 26 / 0.45);
}

.wl-article .wl-cover img {
	display: block;
}

/* En-tête plus haut quand une image le chevauche. */
.wl-article:has(.wl-cover) .wl-page-head {
	padding-bottom: calc(var(--wp--preset--spacing--70) + var(--wp--preset--spacing--60));
}

/* Corps de lecture. */
.wl-prose {
	font-size: 1.0625rem;
	line-height: 1.75;
}

.wl-prose > * + * {
	margin-block-start: 1.25em;
}

.wl-prose :is(h2, h3, h4) {
	margin-block-start: 2em;
	scroll-margin-top: calc(var(--wl-header-h) + 1.5rem);
}

.wl-prose h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

.wl-prose :is(h2, h3, h4) + * {
	margin-block-start: 0.75em;
}

.wl-prose :is(ul, ol) {
	padding-left: 1.4em;
}

.wl-prose li + li {
	margin-top: 0.4em;
}

.wl-prose li::marker {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.wl-prose .wp-block-quote {
	margin-inline: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-left: 3px solid transparent;
	border-image: var(--wp--preset--gradient--marque) 1;
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.5;
}

.wl-prose .wp-block-quote p {
	margin: 0;
}

.wl-prose .wp-block-quote cite {
	display: block;
	margin-top: 0.75em;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 400;
}

/* Code : police unique Inter (aucune police monospace), chiffres tabulaires. */
.wl-prose code {
	padding: 0.1em 0.4em;
	border-radius: 0.3em;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-violet);
	font-family: inherit;
	font-size: 0.9em;
	font-variant-numeric: tabular-nums;
}

.wl-prose .wp-block-code {
	overflow-x: auto;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--night);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.wl-prose .wp-block-code code {
	padding: 0;
	background: none;
	color: #c9d4ff;
	white-space: pre;
}

/* Tableaux : défilement horizontal sur mobile plutôt que débordement. */
.wl-prose .wp-block-table {
	overflow-x: auto;
}

.wl-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.wl-prose :is(th, td) {
	padding: 0.75em 1em;
	border: 0;
	border-bottom: 1px solid var(--wl-line);
	text-align: left;
}

/* Téléphone : marges latérales réduites, pour qu'un tableau de 4 colonnes tienne sans défiler. */
@media (max-width: 30em) {
	.wl-prose :is(th, td) {
		padding-inline: 0.5em;
	}
}

.wl-prose thead th {
	border-bottom: 2px solid var(--wp--preset--color--contrast);
	font-weight: 600;
}

.wl-prose figure img {
	border-radius: var(--wp--custom--radius--medium);
}

.wl-prose figcaption {
	margin-top: 0.75em;
	text-align: center;
}

/* Fin d'article : bloc auteur à la largeur du texte. */
.wl-article .wl-author {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

/* « En bref » (pattern Article type) : points clés en carte, avant la première section. */
.wl-prose .wl-key-points {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
	background: var(--wp--preset--color--surface);
}

:root .wl-prose .wl-key-points > h2 {
	margin-block: 0 0.75rem;
}

/* FAQ dans le corps de l'article : questions sous le titre de section. */
:root .wl-prose .wl-faq > h2 {
	margin-bottom: var(--wp--preset--spacing--30);
}

:root .wl-prose > .wl-faq {
	margin-block-start: var(--wp--preset--spacing--70);
}

/* ==========================================================================
   Blocs « eye scan » des articles (patterns Article : …)
   ========================================================================== */

/* Chiffres clés : cartes en grille, valeur en dégradé de marque. */
.wl-prose .wl-keyfacts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--40);
}

.wl-prose .wl-keyfact {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wl-line);
	border-top: 3px solid transparent;
	border-radius: var(--wp--custom--radius--medium);
	background: linear-gradient(var(--wp--preset--color--base), var(--wp--preset--color--base)) padding-box, var(--wp--preset--gradient--marque) border-box;
	line-height: 1.5;
	/* Référence de largeur du chiffre (« 7 000 € » tient dans une carte étroite). */
	container-type: inline-size;
}

:root .wl-prose .wl-keyfacts > *,
:root .wl-prose .wl-keyfact > * {
	margin-block: 0;
}

.wl-keyfact__value {
	background: var(--wp--preset--gradient--marque-fonce);
	-webkit-background-clip: text;
	background-clip: text;
	font-size: min(var(--wp--preset--font-size--xx-large), 21cqi);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	-webkit-text-fill-color: transparent;
}

.wl-keyfact__label {
	flex-grow: 1;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

:root .wl-prose .wl-keyfact > .wl-keyfact__label {
	margin-top: 0.5rem;
}

.wl-keyfact__source {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

:root .wl-prose .wl-keyfact > .wl-keyfact__source {
	margin-top: 0.75rem;
}

/* Étapes : frise verticale numérotée (compteur CSS, pastille en dégradé). */
.wl-prose .wl-timeline {
	padding-left: 0;
	list-style: none;
	counter-reset: wl-timeline;
}

.wl-prose .wl-timeline > li {
	position: relative;
	padding-left: 3.25rem;
	padding-bottom: var(--wp--preset--spacing--40);
	counter-increment: wl-timeline;
}

:root .wl-prose .wl-timeline > li {
	margin-top: 0;
}

.wl-timeline > li::before {
	content: counter(wl-timeline);
	position: absolute;
	top: -0.1rem;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--wp--preset--gradient--marque-fonce);
	color: var(--wp--preset--color--accent-contrast);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* Filet entre deux pastilles. */
.wl-timeline > li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 2.4rem;
	bottom: 0.2rem;
	left: calc(1.125rem - 1px);
	width: 2px;
	background: linear-gradient(var(--wp--preset--color--brand-violet), var(--wl-line));
}

.wl-timeline > li > strong:first-child {
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
}

/* Comparatif : tableau en carte, en-tête marqué, lignes alternées. */
.wl-prose .wl-compare {
	border: 1px solid var(--wl-line);
	border-radius: var(--wp--custom--radius--medium);
}

.wl-prose .wl-compare thead {
	border-bottom: 0;
}

.wl-compare thead th {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
}

.wl-prose .wl-compare thead th {
	border-bottom: 2px solid var(--wp--preset--color--accent);
}

.wl-compare tbody tr:nth-child(even) {
	background: var(--wp--preset--color--surface);
}

.wl-compare tbody td:first-child {
	font-weight: 600;
}

.wl-prose .wl-compare tbody tr:last-child td {
	border-bottom: 0;
}

.wl-prose .wl-compare figcaption {
	margin: 0;
	padding: 0.75em 1em;
	border-top: 1px solid var(--wl-line);
	text-align: left;
}

/* À retenir : encadré à filet en dégradé. */
.wl-prose .wl-callout {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-left: 4px solid transparent;
	border-image: var(--wp--preset--gradient--marque) 1;
	background: var(--wp--preset--color--accent-soft);
}

:root .wl-prose .wl-callout > * {
	margin-block: 0;
}

:root .wl-prose .wl-callout > * + * {
	margin-top: 0.5rem;
}

.wl-callout__label {
	color: var(--wp--preset--color--accent-violet);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* CTA au fil de l'article : carte nuit, halo fixe (aucune animation). */
.wl-prose .wl-inline-cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wl-night-line);
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--night);
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.6;
}

.wl-inline-cta::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -40% -10% auto auto;
	width: 70%;
	aspect-ratio: 1;
	background: radial-gradient(closest-side, rgb(139 92 246 / 0.35), rgb(79 124 255 / 0.15) 50%, transparent);
}

:root .wl-prose .wl-inline-cta > * {
	margin-block: 0;
}

:root .wl-prose .wl-inline-cta > * + * {
	margin-top: 0.75rem;
}

:root .wl-prose .wl-inline-cta > .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--40);
}

.wl-inline-cta__title {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

/* Blocs eye scan : un peu plus d'air autour que les paragraphes. */
:root .wl-prose > :is(.wl-keyfacts, .wl-timeline, .wl-compare, .wl-callout, .wl-inline-cta) {
	margin-block: var(--wp--preset--spacing--50);
}