/* ============================================================
   YOLO Blog — article à la une + grille d'articles
   Aligné sur la DA du site (Syne / Fraunces / coral·indigo·navy·gold·cream).
   Les couvertures sont des PHOTOS ; le bloc couleur sert de repli.
   ============================================================ */
.yblog {
	--yb-coral:#FF5635;
	--yb-coral-deep:#E8613A;
	--yb-coral-soft:#FDE8E0;
	--yb-indigo:#6D5EFF;
	--yb-indigo-deep:#4A43FF;
	--yb-indigo-soft:#ECEAFF;
	--yb-navy:#0A0044;
	--yb-gold:#E09C4A;
	--yb-gold-soft:#F7E9D3;
	--yb-cream:#FAF3EB;
	--yb-cream-line:#E8E0D6;
	--yb-muted:#6B6560;
	--yb-radius:24px;
	--yb-shadow:0 18px 50px -22px rgba(17,0,80,.22);

	--yb-f-display:'Syne', sans-serif;
	--yb-f-serif:'Fraunces', serif;
	--yb-f-body:'Open Sans', sans-serif;

	color:var(--yb-navy);
	font-family:var(--yb-f-body);
}
.yblog *,
.yblog *::before,
.yblog *::after { box-sizing:border-box; }

/* ---------- accent par catégorie ---------- */
.yblog .is-coral  { --yb-accent:var(--yb-coral);  --yb-accent-2:#FF7A52; }
.yblog .is-indigo { --yb-accent:var(--yb-indigo); --yb-accent-2:#8A7DFF; }
.yblog .is-navy   { --yb-accent:var(--yb-navy);   --yb-accent-2:#241466; }
.yblog .is-gold   { --yb-accent:var(--yb-gold);   --yb-accent-2:#EBB873; }
.yblog .is-cream  { --yb-accent:#E4D2BC;          --yb-accent-2:#EDD9C4; }

/* ============================================================
   COUVERTURE (photo + repli couleur + mot-clé + icône)
   ============================================================ */
.yblog__cover {
	position:relative;
	overflow:hidden;
	border-radius:var(--yb-radius);
	isolation:isolate;
	display:block;
	background:linear-gradient(150deg, var(--yb-accent, #ccc), var(--yb-accent-2, #aaa));
}
.yblog__cover img {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
/* voile pour la lisibilité du mot-clé + reflet haut */
.yblog__cover::before {
	content:"";
	position:absolute;
	inset:0;
	z-index:1;
	background:
		radial-gradient(120% 120% at 80% -10%, rgba(255,255,255,.30), transparent 55%),
		linear-gradient(180deg, transparent 45%, rgba(10,0,68,.45));
}
.yblog__kw {
	position:absolute;
	left:24px;
	bottom:18px;
	z-index:2;
	font-family:var(--yb-f-serif);
	font-style:italic;
	font-weight:400;
	line-height:1;
	color:rgba(255,255,255,.94);
	pointer-events:none;
}
.yblog__ic {
	position:absolute;
	top:20px;
	right:20px;
	z-index:2;
	width:46px;
	height:46px;
	border-radius:50%;
	border:1.5px solid rgba(255,255,255,.55);
	display:grid;
	place-items:center;
	background:rgba(0,0,0,.06);
	backdrop-filter:blur(2px);
}
.yblog__ic svg { width:22px; height:22px; stroke:#fff; fill:none; stroke-width:1.8; }

/* ============================================================
   BOUTON (repris des tokens du site)
   ============================================================ */
.yblog__btn {
	display:inline-flex;
	align-items:center;
	gap:var(--btn-gap, 14px);
	padding:var(--btn-pad, 8px 8px 8px 26px);
	border-radius:100px;
	border:none;
	cursor:pointer;
	font-family:var(--yb-f-body);
	font-size:19px;
	font-weight:600;
	line-height:1;
	color:#fff;
	background:var(--yb-coral);
	text-decoration:none;
	transition:transform .18s ease, box-shadow .18s ease;
}
.yblog__circ {
	width:var(--btn-icon, 46px);
	height:var(--btn-icon, 46px);
	border-radius:50%;
	flex:0 0 auto;
}
.yblog__circ svg { width:100%; height:100%; display:block; transition:transform .4s cubic-bezier(0.22, 1, 0.36, 1); }
.yblog__circ circle { fill:#fff; }
.yblog__circ path { stroke:var(--yb-navy); }
.yblog__btn:hover { transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(255,86,53,.6); }
.yblog__btn:hover .yblog__circ svg { transform:translateX(3px); }

/* ============================================================
   TAG PILLS (par catégorie)
   ============================================================ */
.yblog__tag {
	display:inline-flex;
	align-items:center;
	padding:8px 16px;
	border-radius:100px;
	font-size:13px;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
}
.yblog .tag-coral  { background:var(--yb-coral-soft);  color:var(--yb-coral-deep); }
.yblog .tag-indigo { background:var(--yb-indigo-soft); color:var(--yb-indigo-deep); }
.yblog .tag-gold   { background:var(--yb-gold-soft);   color:#B6781F; }
.yblog .tag-cream  { background:var(--yb-cream);       color:var(--yb-navy); }
.yblog .tag-navy   { background:rgba(10,0,68,.08);     color:var(--yb-navy); }

/* ============================================================
   ARTICLE À LA UNE
   ============================================================ */
.yblog__featured {
	display:grid;
	grid-template-columns:1.15fr 1fr;
	gap:54px;
	align-items:center;
	margin-bottom:96px;
	border-radius:var(--yb-radius);
}
.yblog__featured .yblog__cover { height:460px; }
.yblog__featured-body .yblog__tag { margin-bottom:18px; }
.yblog__featured h2 {
	font-family:var(--yb-f-display);
	font-weight:700;
	font-size:46px;
	line-height:1.08;
	letter-spacing:-.01em;
	margin:0 0 18px;
	color:var(--yb-navy);
}
.yblog__featured p {
	font-size:19px;
	color:var(--yb-muted);
	line-height:1.6;
	margin:0 0 28px;
	max-width:46ch;
}

/* le titre à la une est un lien : il doit hériter de la typo du h2 (sinon il
   reprend la police des liens du thème) */
.yblog__featured h2 a {
	font:inherit;
	color:inherit;
	letter-spacing:inherit;
	text-decoration:none;
}

/* mot mis en valeur dans le titre de section : accent Fraunces italique coral */
.yblog__head h3 em,
.yblog__head h3 span {
	font-family:var(--yb-f-serif);
	font-style:italic;
	font-weight:400;
	color:var(--yb-navy);
}

/* ============================================================
   GRILLE
   ============================================================ */
.yblog__head {
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	margin-bottom:40px;
	gap:24px;
	flex-wrap:wrap;
}
.yblog__head h3 {
	font-family:var(--yb-f-display);
	font-weight:700;
	font-size:38px;
	letter-spacing:-.01em;
	margin:0;
	color:var(--yb-navy);
}
.yblog__grid {
	display:grid;
	grid-template-columns:repeat(var(--yb-cols, 3), 1fr);
	gap:44px 36px;
}
.yblog__card { display:flex; flex-direction:column; border-radius:var(--yb-radius); }
.yblog__card .yblog__cover {
	height:230px;
	margin-bottom:20px;
	transition:transform .35s ease;
}
.yblog__card:hover .yblog__cover { transform:translateY(-6px); }
.yblog__card .yblog__tag { margin-bottom:14px; align-self:flex-start; }
.yblog__card h4 {
	font-family:var(--yb-f-display);
	font-weight:600;
	font-size:24px;
	line-height:1.22;
	letter-spacing:-.005em;
	margin:0 0 10px;
	color:var(--yb-navy);
	transition:color .2s ease;
}
.yblog__card:hover h4 { color:var(--yb-coral); }
.yblog__card p {
	font-size:16px;
	color:var(--yb-muted);
	line-height:1.55;
	margin:0;
}
.yblog__card-link { color:inherit; text-decoration:none; display:flex; flex-direction:column; }

/* tailles de mot-clé selon le contexte */
.yblog__featured .yblog__kw { font-size:0; } /* pas de mot-clé sur la une */
.yblog__card .yblog__kw { font-size:46px; }

/* état vide (éditeur sans articles) */
.yblog__empty {
	padding:60px 24px;
	text-align:center;
	color:var(--yb-muted);
	border:1.5px dashed var(--yb-cream-line);
	border-radius:var(--yb-radius);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px) {
	.yblog__featured { grid-template-columns:1fr; gap:30px; margin-bottom:64px; }
	.yblog__featured .yblog__cover { height:320px; }
	.yblog__featured h2 { font-size:36px; }
	.yblog__grid { --yb-cols:2; }
}
@media (max-width:680px) {
	.yblog__grid { --yb-cols:1; }
	.yblog__head h3 { font-size:30px; }
	.yblog__card .yblog__kw { font-size:38px; }
}

@media (prefers-reduced-motion: reduce) {
	.yblog__card .yblog__cover,
	.yblog__circ svg,
	.yblog__btn { transition:none; }
}