/* ------------------------------------------------------------------------------------------------------------------------------
   Blog Blokkus — grille d'articles (index) + mise en page des articles (charte graphique factorisée)
   ------------------------------------------------------------------------------------------------------------------------------ */

/* ---- Grille d'articles (page /blog/) ---- */

.bk-blog-grid{
	max-width:1180px;
	margin:0 auto 60px auto;
	padding:0 12px;
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
	gap:28px;
}

.bk-blog-card{
	display:flex;
	flex-direction:column;
	background:var(--blokkus-surface, #ffffff);
	border-radius:16px;
	border:1.5px solid var(--blokkus-line, #e1e1e4);
	box-shadow:0 4px 18px rgba(28,40,92,0.07);
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	transition:transform .2s ease, box-shadow .2s ease;
}
.bk-blog-card:hover{
	transform:translateY(-4px);
	box-shadow:0 14px 32px rgba(28,40,92,0.14);
}

.bk-blog-card-media{
	aspect-ratio:16/9;
	overflow:hidden;
	background:linear-gradient(135deg,var(--blokkus-surface-alt,#eef1fb),var(--blokkus-fog,#f5f7fa));
	border-bottom:3px solid var(--blokkus-deep, #1c285c);
}
.bk-blog-card-media img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .3s ease;
}
.bk-blog-card:hover .bk-blog-card-media img{ transform:scale(1.05); }

.bk-blog-card-body{
	flex:1;
	display:flex;
	flex-direction:column;
	padding:22px 24px 26px 24px;
}
.bk-blog-card-body h2{
	font-family:var(--blokkus-font-heading);
	font-size:1.15em;
	font-weight:700;
	color:var(--blokkus-deep, #1c285c);
	line-height:1.3;
	margin:0 0 10px 0;
}
.bk-blog-card-body p{
	font-family:var(--blokkus-font-body);
	color:var(--blokkus-muted, #3f4f74);
	font-size:0.95em;
	line-height:1.55;
	margin:0 0 18px 0;
	flex:1;
}
.bk-blog-card-more{
	font-family:var(--blokkus-font-heading);
	font-weight:700;
	font-size:0.85em;
	letter-spacing:.02em;
	text-transform:uppercase;
	color:var(--blokkus-accent, #d61742);
}
.bk-blog-card-more::after{ content:" →"; transition:margin .18s ease; }
.bk-blog-card:hover .bk-blog-card-more::after{ margin-left:4px; }

/* ---- Mise en page d'un article de blog ---- */

.bk-article-lead{
	font-family:var(--blokkus-font-body);
	color:var(--blokkus-muted, #3f4f74);
	font-size:1.15em;
	line-height:1.6;
	margin:20px 0 0 0;
	max-width:720px;
}

.bk-article-wrap{
	max-width:1040px;
	margin:0 auto 60px auto;
	padding:0 12px;
	display:flex;
	flex-direction:column;
	gap:32px;
}

/* ---- Points clés en tête d'article ---- */
.bk-article-keypoints{
	background:var(--blokkus-surface-alt, #f8f8fa);
	border:1.5px solid var(--blokkus-line, #e1e1e4);
	border-left:4px solid var(--blokkus-deep, #1c285c);
	border-radius:16px;
	padding:24px 28px;
}
.bk-article-keypoints h2{
	font-family:var(--blokkus-font-heading);
	color:var(--blokkus-deep, #1c285c);
	font-size:1.1em;
	font-weight:700;
	margin:0 0 12px 0;
}
.bk-article-keypoints ul{
	margin:0;
	padding-left:1.2em;
	list-style:disc;
}
.bk-article-keypoints li{
	font-family:var(--blokkus-font-body);
	color:var(--blokkus-muted, #3f4f74);
	line-height:1.6;
	margin:0 0 6px 0;
}
.bk-article-keypoints li:last-child{ margin-bottom:0; }

/* blokkus.css force tous les h2 du contenu à 2rem en mobile (!important) :
   ce titre de bloc doit rester à la taille d'un intertitre. */
@media (max-width:600px){
	#div_padding_contenu .bk-article-keypoints{ padding:20px 20px; }
	#div_padding_contenu .bk-article-keypoints h2{
		font-size:1.1em !important;
		line-height:1.3 !important;
		margin:0 0 12px 0 !important;
	}
}

.bk-article-block{
	display:flex;
	align-items:center;
	gap:40px;
	background:var(--blokkus-surface, #ffffff);
	border-radius:16px;
	border:1.5px solid var(--blokkus-line, #e1e1e4);
	box-shadow:0 4px 18px rgba(28,40,92,0.07);
	padding:32px;
}
.bk-article-block--reverse{ flex-direction:row-reverse; }

.bk-article-media{ flex:0 0 42%; margin:0; }
.bk-article-media img{ width:100%; border-radius:12px; display:block; }
.bk-article-media figcaption{ font-size:0.78em; color:var(--blokkus-muted, #8993ab); margin-top:8px; }

.bk-article-text{ flex:1 1 auto; min-width:0; }
.bk-article-text h2{
	font-family:var(--blokkus-font-heading);
	color:var(--blokkus-deep, #1c285c);
	font-size:1.4em;
	font-weight:700;
	margin:0 0 14px 0;
}
.bk-article-copy{
	font-family:var(--blokkus-font-body);
	color:var(--blokkus-muted, #3f4f74);
	line-height:1.75;
}
.bk-article-copy strong{ color:var(--blokkus-deep, #1c285c); }
.bk-article-copy a{ color:var(--blokkus-deep, #1c285c); text-decoration:underline; }

.bk-article-links{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; }
.bk-article-links .btn-ghost{ padding:11px 22px; font-size:0.85em; }

.bk-article-figure{
	max-width:1040px;
	margin:0 auto;
	padding:0 12px;
	text-align:center;
}
.bk-article-figure img{ max-width:100%; border-radius:14px; box-shadow:0 4px 18px rgba(28,40,92,0.07); }
.bk-article-figure figcaption{ font-size:0.78em; color:var(--blokkus-muted, #8993ab); margin-top:8px; }

.bk-article-meta{
	text-align:center;
	color:var(--blokkus-muted, #8993ab);
	font-size:0.85em;
	margin:-8px auto 0 auto;
}

@media (max-width:800px){
	.bk-article-block,
	.bk-article-block--reverse{ flex-direction:column; padding:22px; gap:20px; }
	.bk-article-media{ flex:none; width:100%; }
}

@media (max-width:600px){
	.bk-blog-grid{ grid-template-columns:1fr; gap:20px; }
}