/* ============================================================
   Blog — index des articles et article seul.
   Chargé uniquement sur is_home() et is_singular('post').

   Aucune couleur en dur : tous les tokens viennent du :root de
   main.css. Le vocabulaire visuel est celui des cartes du site
   (.case-card, .testi-card) : fond chalk, bordure line, rayon 22px,
   soulèvement et ombre au survol.
   ============================================================ */

/* ─── EN-TÊTE (variante compacte du héro de page) ────────────
   La barre de navigation est fixe et transparente tant qu'on n'a pas
   défilé : il faut donc une zone sombre en haut de page, sinon les
   liens blancs se posent sur du crème. D'où le padding-top de 8rem
   et le voile dégradé, repris du héro des pages intérieures.
   -------------------------------------------------- */
.blog-hero{
	position:relative;
	min-height:clamp(320px,42vh,460px);
	display:flex;
	align-items:flex-end;
	overflow:hidden;
	padding-top:8rem;
	padding-bottom:clamp(2.2rem,4vw,3.4rem);
}
.blog-hero-img{
	position:absolute;inset:0;
	width:100%;height:100%;
	object-fit:cover;object-position:center 32%;
	z-index:0;
}
.blog-hero::after{
	content:'';position:absolute;inset:0;z-index:1;
	background:linear-gradient(178deg,rgba(28,24,18,.62) 0%,rgba(28,24,18,.26) 42%,rgba(28,24,18,.8) 100%);
}
.blog-hero-inner{position:relative;z-index:2;width:100%;}
.blog-hero .eyebrow{color:var(--amber-lt);}
.blog-hero h1{
	font-size:clamp(2rem,3.6vw,3.15rem);
	max-width:24ch;
	text-shadow:0 2px 34px rgba(0,0,0,.4);
	background:linear-gradient(100deg,var(--chalk) 0%,var(--amber-lt) 100%);
	-webkit-background-clip:text;background-clip:text;
	-webkit-text-fill-color:transparent;color:transparent;
}
.blog-hero .lead{color:#F0E9DE;max-width:58ch;margin-top:1.1rem;}

/* Sur un article, le titre peut être long : on lui laisse plus de place. */
.blog-hero--article h1{max-width:30ch;}
.article-meta{
	margin-top:1rem;
	font-family:'JetBrains Mono',monospace;
	font-size:.72rem;
	letter-spacing:.09em;
	text-transform:uppercase;
	color:var(--amber-lt);
	display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.article-meta-sep{opacity:.5;}

@media(max-width:760px){
	.blog-hero{min-height:auto;padding-top:6.5rem;padding-bottom:2.4rem;}
	.blog-hero h1{font-size:clamp(1.9rem,7vw,2.6rem);max-width:100%;}
	.blog-hero .lead{font-size:.98rem;margin-top:.9rem;}
}

/* ─── GRILLE DE CARTES ─────────────────────────────── */
.blog-list{background:var(--cream);}
.blog-list--related{background:var(--sand);}
.blog-list--related h2{margin-bottom:2rem;}

.blog-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1.25rem;
	align-items:stretch;
}
.blog-card{
	background:var(--chalk);
	border:1px solid var(--line);
	border-radius:22px;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	transition:box-shadow .4s cubic-bezier(.22,.61,.36,1),transform .2s;
}
.blog-card:hover{box-shadow:0 14px 32px -16px rgba(28,24,18,.18);transform:translateY(-3px);}

.blog-card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--sand);}
.blog-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1);}
.blog-card:hover .blog-card-media img{transform:scale(1.04);}

.blog-card-body{padding:1.6rem;display:flex;flex-direction:column;gap:.7rem;flex:1;}
.blog-card-date{
	font-family:'JetBrains Mono',monospace;
	font-size:.65rem;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--ink-3);
}
.blog-card-title{
	font-family:'Space Grotesk',sans-serif;
	font-weight:700;
	font-size:1.15rem;
	line-height:1.35;
	letter-spacing:-.01em;
	color:var(--ink);
}
.blog-card-title a{color:inherit;}
.blog-card:hover .blog-card-title a{color:var(--amber);}
.blog-card-excerpt{font-size:.88rem;color:var(--ink-2);line-height:1.6;flex:1;}

.blog-card-link{
	display:inline-flex;align-items:center;gap:.4rem;
	font-size:.88rem;font-weight:700;
	color:var(--amber);
	margin-top:.3rem;
	align-self:flex-start;
}
.blog-card-link svg{transition:transform .15s ease;}
.blog-card:hover .blog-card-link svg{transform:translateX(4px);}
/* Kadence force a:hover en bleu : même correctif que la section 2 des overrides. */
.blog-card-link:hover,
.blog-card-link:focus{color:var(--amber-dk) !important;}
.blog-card-title a:hover,
.blog-card-title a:focus{color:var(--amber) !important;}

/* Retour à la liste : flèche inversée, dessinée en CSS puisqu'il n'y a
   pas de pendant à sbd_arrow() pointant vers la gauche. */
.blog-card-link--back::before{content:'\2190';font-size:1.05em;line-height:1;}
.blog-card-link--back:hover::before{transform:translateX(-3px);}
.article-back{margin-top:2.5rem;padding-top:1.6rem;border-top:1px solid var(--sand-2);}

@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:620px){.blog-grid{grid-template-columns:1fr;}}

/* ─── CORPS DE L'ARTICLE ────────────────────────────
   main.css remet à zéro les marges du contenu et retire les puces des
   listes, ce qui convient aux blocs de la maquette mais pas à du texte
   long. On rétablit ici, et uniquement ici, une typographie de lecture.
   -------------------------------------------------- */
.article-section{background:var(--cream);}
.article-body{max-width:72ch;margin-inline:auto;}

.article-body > * + *{margin-top:1.25rem;}
.article-body p{font-size:1.02rem;line-height:1.8;color:var(--ink-2);}
.article-body p strong{color:var(--ink);font-weight:700;}

.article-body h2{
	font-size:clamp(1.45rem,2.6vw,1.95rem);
	line-height:1.25;
	color:var(--ink);
	margin-top:2.8rem;
}
.article-body h3{
	font-size:1.2rem;
	color:var(--ink);
	margin-top:2rem;
}
.article-body h2 + p,
.article-body h3 + p{margin-top:.8rem;}

.article-body ul,
.article-body ol{padding-left:1.3rem;display:flex;flex-direction:column;gap:.55rem;}
.article-body ul{list-style:disc;}
.article-body ol{list-style:decimal;}
.article-body li{font-size:1rem;line-height:1.7;color:var(--ink-2);}
.article-body li::marker{color:var(--amber);}

.article-body a:not(.btn){color:var(--amber);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.article-body a:not(.btn):hover{color:var(--amber-dk) !important;}

.article-body blockquote{
	border-left:3px solid var(--amber);
	padding-left:1.5rem;
	margin-block:2rem;
}
.article-body blockquote p{
	font-family:'Space Grotesk',sans-serif;
	font-weight:600;
	font-size:1.15rem;
	line-height:1.55;
	color:var(--ink);
	font-style:italic;
}

.article-body img,
.article-body figure img{width:100%;height:auto;border-radius:16px;}
.article-body figure{margin-block:2rem;}
.article-body figcaption{
	font-size:.8rem;color:var(--ink-3);margin-top:.6rem;text-align:center;
}

.article-body hr{border:none;border-top:1px solid var(--sand-2);margin-block:2.5rem;}

.article-body code{
	font-family:'JetBrains Mono',monospace;
	font-size:.86em;
	background:var(--amber-pale);
	color:var(--amber-dk);
	padding:.12em .4em;
	border-radius:5px;
}
.article-body pre{
	background:var(--ink);
	color:#EDE6D0;
	padding:1.3rem 1.5rem;
	border-radius:16px;
	overflow-x:auto;
	font-family:'JetBrains Mono',monospace;
	font-size:.85rem;
	line-height:1.65;
}
.article-body pre code{background:none;color:inherit;padding:0;}

.article-body table{width:100%;border-collapse:collapse;font-size:.9rem;}
.article-body th,
.article-body td{border:1px solid var(--sand-2);padding:.7rem .9rem;text-align:left;}
.article-body th{background:var(--sand);font-weight:700;color:var(--ink);}

/* ─── PAGINATION ─────────────────────────────────── */
.pagination{margin-top:3rem;display:flex;justify-content:center;}
.pagination .nav-links{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;}
.pagination .page-numbers{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:42px;height:42px;padding:0 .9rem;
	border:1px solid var(--sand-2);
	border-radius:100px;
	background:var(--chalk);
	font-size:.88rem;font-weight:600;
	color:var(--ink-2);
	transition:border-color .2s,color .2s,background .2s;
}
.pagination .page-numbers:hover{border-color:var(--amber-lt);color:var(--amber) !important;}
.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--cream);}
.pagination .page-numbers.dots{border-color:transparent;background:none;}

/* \u2500\u2500\u2500 CTA FINAL, VARIANTE SOMBRE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
   L'aplat --amber de la maquette est pense pour trancher avec du creme.
   Sur les vues de blog, deja claires, il ecrase la page. On reprend ici le
   traitement des sections sombres du site : fond --ink, halo rose en angle,
   titre en degrade de texte.
   -------------------------------------------------- */
.cta-final--dark{background:var(--ink);}
.cta-final--dark::before{background:radial-gradient(ellipse at 80% 50%,rgba(154,89,92,.38),transparent 62%);}
.cta-final--dark h2{
	background:linear-gradient(100deg,var(--chalk) 0%,var(--amber-lt) 100%);
	-webkit-background-clip:text;background-clip:text;
	-webkit-text-fill-color:transparent;color:transparent;
}
.cta-final--dark p{color:#A89880;}