/*
 * Blog : page /blog/ (page-blog.php) et articles (single.php).
 * Même vocabulaire que les pages expertises (bandes bordées d'encre, stickers, ombres décalées),
 * mais une mise en page de lecture : liste éditoriale, colonne de texte, sommaire en marge.
 */

.blog, .article { --encre: var(--wp--preset--color--encre); --accent: var(--wp--preset--color--vert); }

/* ---------- Page /blog/ : ouverture (contenu de la page, blocs natifs) ---------- */
.blog-ouverture {
	padding-block: clamp(140px, 13vw, 180px) clamp(56px, 7vw, 90px);
	background: var(--wp--preset--color--menthe);
}
.blog-ouverture > * { margin-block: 0; }
.blog-ouverture > * + * { margin-top: 22px; }
.blog-ouverture h1 { font-size: clamp(42px, 6.4vw, 100px); line-height: .95; letter-spacing: -.04em; }
.blog-ouverture h1 em { display: block; }
.blog-ouverture .service-fil { margin-bottom: 0; font-size: 14px; font-weight: 600; }
.blog-ouverture .service-fil + * { margin-top: 24px; }
.blog-ouverture p:not(.is-style-sticker) { max-width: 46ch; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.45; }

/* ---------- Article le plus récent ---------- */
.blog-une-zone { padding-block: clamp(56px, 7vw, 96px) 0; }
.blog-une {
	position: relative; display: grid; grid-template-columns: 5fr 7fr; align-items: center; gap: clamp(28px, 4vw, 56px);
	padding: clamp(24px, 3vw, 40px); background: var(--wp--preset--color--blanc);
	border: 2px solid var(--encre); border-radius: 28px; box-shadow: var(--wp--preset--shadow--decale);
}
.blog-une--sans-image { grid-template-columns: 1fr; }
.blog-une__texte > * { margin: 0; }
.blog-une__texte > * + * { margin-top: 16px; }
.blog-une__etiquette { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.blog-une__titre { font-size: clamp(28px, 3vw, 44px); line-height: 1.02; letter-spacing: -.03em; }
.blog-une__titre a { color: inherit; text-decoration: none; }
.blog-une__titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.blog-une__extrait { font-size: 18px; line-height: 1.5; }
.blog-une__visuel { overflow: hidden; border: 2px solid var(--encre); border-radius: 20px; aspect-ratio: 16 / 10; }
.blog-une__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.blog-une:hover .blog-une__image { transform: scale(1.03); }
.blog-meta { margin: 0; font-size: 14px; font-weight: 600; color: var(--wp--preset--color--texte-doux); }

/* ---------- Liste de tous les articles ---------- */
.blog-liste-zone { padding-block: clamp(64px, 8vw, 110px) clamp(80px, 9vw, 130px); }
.blog-liste-zone__titre { margin: 0 0 28px; font-size: clamp(32px, 3.6vw, 54px); line-height: 1; letter-spacing: -.035em; }
.blog-liste-zone__titre em { font-style: normal; font-weight: 400; }

.blog-filtres { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 40px; padding: 0; list-style: none; }
.blog-filtres li {
	position: relative; display: flex; align-items: center; padding: 7px 16px;
	border: 2px solid var(--encre); border-radius: 99px; background: var(--wp--preset--color--blanc);
	transition: background .2s, transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.blog-filtres li:hover { transform: rotate(-2deg); }
.blog-filtres a { color: var(--encre); font-size: 15px; font-weight: 700; text-decoration: none; }
.blog-filtres a::after { content: ""; position: absolute; inset: 0; }
.blog-filtres span { margin-left: 4px; font-weight: 500; opacity: .7; }
.blog-filtres .est-actif { background: var(--encre); }
.blog-filtres .est-actif a { color: var(--wp--preset--color--blanc); }
.blog-filtres a:focus-visible { outline: none; }
.blog-filtres li:has(a:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }

.blog-liste { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--encre); }
.blog-ligne {
	position: relative; display: grid; grid-template-columns: 200px 1fr auto; column-gap: clamp(20px, 3vw, 40px); row-gap: 6px;
	align-items: baseline; padding: 24px 0; border-bottom: 2px solid var(--encre);
}
.blog-ligne > * { margin: 0; }
.blog-ligne__theme { grid-row: 1 / span 2; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--wp--preset--color--texte-doux); }
.blog-ligne__titre { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.15; letter-spacing: -.02em; }
.blog-ligne__titre a { color: inherit; text-decoration: none; }
.blog-ligne__titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.blog-ligne__titre a::before {
	content: "→"; position: absolute; right: 0; top: 24px; font-weight: 400;
	opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.blog-ligne:hover .blog-ligne__titre a::before, .blog-ligne:focus-within .blog-ligne__titre a::before { opacity: 1; transform: none; }
.blog-ligne .blog-meta { grid-column: 2; }
.blog-ligne:hover .blog-ligne__titre a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--accent); }
/* Vignette : seulement au survol, sur ordinateur, pour les articles qui en ont une. */
.blog-ligne__vignette {
	position: absolute; right: 48px; top: 50%; z-index: 2; width: 200px; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
	border: 2px solid var(--encre); border-radius: 14px; box-shadow: 6px 6px 0 var(--encre); pointer-events: none;
	opacity: 0; transform: translateY(-50%) rotate(3deg) scale(.92); transition: opacity .25s, transform .35s cubic-bezier(.3, 1.4, .5, 1);
}
.blog-ligne:hover .blog-ligne__vignette { opacity: 1; transform: translateY(-50%) rotate(3deg); }
.blog-ligne[hidden] { display: none; }
.blog-ligne.est-revele { animation: blog-revele .45s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes blog-revele { from { opacity: 0; transform: translateY(12px); } }
.blog-plus { margin: 40px 0 0; text-align: center; }
.blog-plus__bouton { border: 2px solid var(--encre); cursor: pointer; font: inherit; font-weight: 800; }

/* ---------- Article : en-tête ---------- */
.article-entete { padding-block: clamp(140px, 13vw, 180px) clamp(48px, 6vw, 80px); background: var(--wp--preset--color--menthe); }
.article-entete__interieur > * { margin: 0; }
.article-entete__titre { max-width: 22ch; margin-top: 24px !important; font-size: clamp(36px, 5vw, 76px); line-height: 1; letter-spacing: -.035em; overflow-wrap: normal; hyphens: manual; }
.article-entete__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 28px !important; font-weight: 600; }
.article-entete__theme {
	display: inline-flex; padding: 8px 14px; background: var(--wp--preset--color--blanc);
	border: 2px solid var(--encre); border-radius: 999px; box-shadow: 3px 3px 0 var(--encre);
	font-size: 14px; font-weight: 800; line-height: 1; transform: rotate(-3deg);
}
:is(.article, .blog) .service-fil { font-size: 14px; font-weight: 600; color: var(--wp--preset--color--texte-doux); }
:is(.article, .blog) .service-fil a { color: inherit; text-decoration: none; }
:is(.article, .blog) .service-fil a:hover { color: var(--encre); text-decoration: underline; }
:is(.article, .blog) .service-fil li + li::before { content: "/"; margin-right: 8px; }
:is(.article, .blog) .service-fil li:last-child { color: var(--encre); }
.blog-ouverture .service-stickers { display: flex; flex-wrap: wrap; gap: 12px; }

.article-image { max-width: calc(860px + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right)); margin: clamp(-40px, -3vw, -24px) auto 0; }
.article-image img { display: block; width: 100%; height: auto; border: 2px solid var(--encre); border-radius: 24px; box-shadow: var(--wp--preset--shadow--decale); }

/* ---------- Article : sommaire et texte ---------- */
.article-grille { padding-block: clamp(48px, 6vw, 80px) 0; }
.article-grille--sommaire { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.article-sommaire { position: sticky; top: 24px; }
.article-sommaire details { padding: 20px 20px 16px; background: var(--wp--preset--color--blanc); border: 2px solid var(--encre); border-radius: 22px; box-shadow: 6px 6px 0 var(--encre); }
.article-sommaire summary { cursor: pointer; font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; list-style: none; }
.article-sommaire summary::-webkit-details-marker { display: none; }
.article-sommaire ol { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: s; max-height: calc(100vh - 140px); overflow: auto; }
.article-sommaire li { counter-increment: s; border-top: 2px solid var(--encre); }
.article-sommaire a { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; color: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; text-decoration: none; }
/* Numéro dans une pastille ronde, comme le sommaire des pages expertises ; l'intertitre en cours
   passe en vert, sans aplat noir. */
.article-sommaire a::before {
	content: counter(s, decimal-leading-zero); flex: none; display: grid; place-items: center;
	width: 28px; height: 28px; margin-top: -4px; border: 2px solid var(--encre); border-radius: 50%;
	background: var(--wp--preset--color--blanc); font-size: 11px; font-weight: 800;
	transition: background-color .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.article-sommaire a:hover::before { background: var(--wp--preset--color--menthe); }
.article-sommaire a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.article-sommaire a.est-actif { font-weight: 800; }
.article-sommaire a.est-actif::before { background: var(--accent); transform: rotate(-10deg); }

.article-corps { max-width: 72ch; margin-inline: auto; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.7; }
.article-grille--sommaire .article-corps { margin-inline: 0; }
.article-corps > * { max-width: none; margin-block: 0; }
.article-corps > * + * { margin-top: 1.1em; }
.article-corps h2 { margin-top: 2.2em !important; padding-top: 18px; border-top: 2px solid var(--encre); font-size: clamp(26px, 2.4vw, 38px); line-height: 1.1; letter-spacing: -.025em; scroll-margin-top: 24px; }
.article-corps h3 { margin-top: 1.8em !important; font-size: clamp(21px, 1.7vw, 26px); line-height: 1.2; letter-spacing: -.015em; }
.article-corps h4 { margin-top: 1.5em !important; font-size: 19px; }
.article-corps :is(h2, h3, h4) + * { margin-top: .7em; }
.article-corps a:not(.wp-block-button__link) { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.article-corps a:not(.wp-block-button__link):hover { text-decoration-color: var(--encre); }
.article-corps ul, .article-corps ol { padding-left: 1.4em; }
.article-corps li + li { margin-top: .45em; }
.article-corps ul > li::marker { content: "●  "; color: var(--accent); font-size: .8em; }
.article-corps .wp-block-image img, .article-corps .wp-block-media-text__media img { height: auto; border: 2px solid var(--encre); border-radius: 18px; }
.article-corps .wp-block-image { margin-block: 1.8em; }
.article-corps .wp-block-image figcaption { font-size: 14px; color: var(--wp--preset--color--texte-doux); text-align: center; }
.article-corps .wp-block-quote { margin: 1.8em 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--accent); font-size: 1.15em; font-weight: 600; line-height: 1.5; }
.article-corps .wp-block-quote cite { display: block; margin-top: 8px; font-size: 15px; font-weight: 500; font-style: normal; }
.article-corps .wp-block-table { overflow-x: auto; margin-block: 1.8em; }
.article-corps .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.article-corps .wp-block-table :is(th, td) { padding: 10px 14px; border: 2px solid var(--encre); text-align: left; vertical-align: top; }
.article-corps .wp-block-table thead th, .article-corps .wp-block-table tr:first-child th { background: var(--wp--preset--color--menthe); }
.article-corps .wp-block-embed { margin-block: 1.8em; }
.article-corps .wp-block-embed__wrapper iframe { max-width: 100%; border-radius: 18px; }
.article-corps .wp-block-buttons { margin-block: 1.6em; }
.article-corps pre, .article-corps code { font-size: .88em; }
.article-corps pre { overflow-x: auto; padding: 16px 18px; border: 2px solid var(--encre); border-radius: 14px; background: var(--wp--preset--color--menthe); }
.article-corps .faq-section { margin-block: 1.8em; }
.article-corps .wp-block-details { margin-top: 12px; border: 2px solid var(--encre); border-radius: 18px; padding: 14px 18px; }
.article-corps .wp-block-details summary { font-weight: 800; cursor: pointer; }

/* ---------- Encart de fin et articles liés ---------- */
.article-fin { padding-block: clamp(64px, 8vw, 100px) 0; }
.article-fin__carte {
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px;
	padding: clamp(24px, 3vw, 36px); background: var(--wp--preset--color--jaune-clair);
	border: 2px solid var(--encre); border-radius: 28px; box-shadow: var(--wp--preset--shadow--decale);
}
.article-fin__carte > * { margin: 0; }
.article-fin__carte .bloc-mascotte, .article-fin__carte > svg { transform: rotate(-6deg); }
.article-fin__texte > * { margin: 0; }
.article-fin__texte > * + * { margin-top: 8px; }
.article-fin__titre { font-size: clamp(26px, 2.4vw, 36px); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.article-fin__titre em { font-style: normal; font-weight: 400; }
.article-fin__texte a { color: inherit; font-weight: 800; }
.article-lies { padding-block: clamp(64px, 8vw, 100px) clamp(80px, 9vw, 130px); }
.article-lies__titre { margin: 0 0 24px; font-size: clamp(30px, 3vw, 46px); line-height: 1; letter-spacing: -.03em; }
.article-lies__titre em { font-style: normal; font-weight: 400; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.article-grille--sommaire { display: block; }
	.article-sommaire { position: static; margin-bottom: 32px; }
	.article-sommaire ol { max-height: none; }
}
@media (max-width: 781px) {
	.blog-une { grid-template-columns: 1fr; box-shadow: 6px 6px 0 var(--encre); }
	.blog-une__visuel { order: -1; }
	.blog-filtres { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--wp--style--root--padding-left)); padding: 4px var(--wp--style--root--padding-left) 10px; }
	.blog-filtres li { flex: none; }
	.blog-ligne { grid-template-columns: 1fr; padding: 20px 0; }
	.blog-ligne__theme { grid-row: auto; }
	.blog-ligne .blog-meta { grid-column: 1; }
	.blog-ligne__vignette, .blog-ligne__titre a::before { display: none; }
	.article-image img { box-shadow: 6px 6px 0 var(--encre); border-radius: 18px; }
	.article-fin__carte { grid-template-columns: 1fr; box-shadow: 6px 6px 0 var(--encre); }
	.article-fin__carte > svg, .article-fin__carte .bloc-mascotte { display: none; }
}
@media (hover: none) {
	.blog-ligne__vignette { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.blog-ligne.est-revele { animation: none; }
	.blog-une__image, .blog-ligne__vignette { transition: none; }
}
.article-entete__titre .insecable { white-space: nowrap; }