/* ============================================================
   SH-ALAUNE — Bento Grid
   1 featured (col 1-4 / row 1-2) | 1 right tall (col 5-6 / row 1-2)
   | 3 bottom equal (row 3, 2 cols each)
   ============================================================ */

/* Reset & section background */
.sh-alaune-wrap {
	background: #0F0C35;
	border-radius: 16px;
	padding: 24px;
	margin-inline: 24px;
}
.sh-alaune-wrap * {
	box-sizing: border-box;
}

/* ── Header ───────────────────────────────────────────────── */
.sh-alaune-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.sh-alaune-label {
	display: flex;
	align-items: center;
	gap: 10px;
}
.sh-live-dot {
	width: 8px;
	height: 8px;
	background: #EF4444;
	border-radius: 50%;
	flex-shrink: 0;
	animation: sh-blink 1.5s ease-in-out infinite;
}
@keyframes sh-blink {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.3; }
}
.sh-live-label {
	font-size: 1.05rem;
	font-weight: 800;
	color: #EF4444;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.sh-live-text {
	font-size: 1.05rem;
	font-weight: 800;
	color: #EF4444;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.sh-header-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: #FFFFFF;
}
.sh-all-link {
	font-size: 0.8rem;
	font-weight: 600;
	color: rgba(255,255,255,0.55);
	text-decoration: none;
	border: 1px solid rgba(255,255,255,0.15);
	padding: 5px 14px;
	border-radius: 20px;
	transition: color 0.2s, border-color 0.2s;
}
.sh-all-link:hover {
	color: #A78BFA;
	border-color: rgba(167,139,250,0.5);
	text-decoration: none;
}

/* ── Bento Grid ───────────────────────────────────────────── */
.sh-bento {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: 1fr 1fr 0.85fr;
	gap: 10px;
	height: 490px;
}

/* ── Base card ────────────────────────────────────────────── */
.sh-bc {
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none !important;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sh-bc:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(0,0,0,0.5);
	text-decoration: none !important;
}
.sh-bc-empty {
	background: rgba(255,255,255,0.03);
	border: 1px dashed rgba(255,255,255,0.08);
	pointer-events: none;
}

/* Overlay commun (featured + right) */
.sh-bc-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(6,4,26,0.96) 0%,
		rgba(6,4,26,0.55) 45%,
		rgba(6,4,26,0.08) 100%
	);
}

/* Badges communs */
.sh-bc-badges { display: flex; gap: 7px; flex-wrap: wrap; }
.sh-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 3px 9px;
	border-radius: 4px;
	line-height: 1.5;
}
.sh-badge-live {
	background: linear-gradient(135deg, #DC2626, #B91C1C);
	color: #FFFFFF;
}
.sh-badge-cat {
	background: rgba(255,255,255,0.14);
	backdrop-filter: blur(6px);
	color: rgba(255,255,255,0.9);
	border: 1px solid rgba(255,255,255,0.2);
}
.sh-bc-cat {
	font-size: 9.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #A78BFA;
}
.sh-bc-date {
	font-size: 0.68rem;
	color: rgba(255,255,255,0.4);
	margin-top: auto;
}
.sh-bc-read {
	font-size: 0.79rem;
	font-weight: 700;
	color: #A78BFA;
	letter-spacing: 0.02em;
}
.sh-bc-read--sm { font-size: 0.75rem; }

/* ═══════════════════════════════════════════════════════════
   ①  FEATURED  —  col 1-4 / row 1-2
═══════════════════════════════════════════════════════════ */
.sh-bc-feat {
	grid-column: 1 / 5;
	grid-row: 1 / 3;
	background-color: #1E1B4B;
	background-size: cover;
	background-position: center;
	justify-content: flex-end;
	color: #FFFFFF !important;
}
.sh-bc-feat-body {
	position: relative;
	z-index: 1;
	padding: 24px 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sh-bc-feat-h {
	font-size: clamp(1.25rem, 1.5vw + 0.4rem, 1.85rem) !important;
	font-weight: 800 !important;
	color: #FFFFFF !important;
	line-height: 1.25 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.sh-bc-feat-ex {
	font-size: 0.86rem;
	color: rgba(255,255,255,0.72);
	line-height: 1.55;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   ②  RIGHT SINGLE CARD  —  col 5-6 / row 1-2
═══════════════════════════════════════════════════════════ */
.sh-bc-right {
	grid-column: 5 / 7;
	grid-row: 1 / 3;
	background-color: #1A1848;
	background-size: cover;
	background-position: center;
	justify-content: flex-end;
	color: #FFFFFF !important;
}
.sh-bc-right-body {
	position: relative;
	z-index: 1;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.sh-bc-right-h {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   ③ ④ ⑤  BOTTOM MEDIUM CARDS  —  row 3, 2 cols chacune
═══════════════════════════════════════════════════════════ */
.sh-bc-md {
	grid-row: 3;
	background: #1A1848;
	border: 1px solid rgba(255,255,255,0.1);
	color: #FFFFFF !important;
	flex-direction: row;
	align-items: stretch;
}
.sh-bc-md:hover {
	background: #22206A;
	border-color: rgba(124,58,237,0.6);
}
.sh-bc-b1 { grid-column: 1 / 3; }
.sh-bc-b2 { grid-column: 3 / 5; }
.sh-bc-b3 { grid-column: 5 / 7; }

.sh-bc-md-img {
	width: 38%;
	min-width: 38%;
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}
.sh-bc-md-body {
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	min-width: 0;
	justify-content: center;
}
.sh-bc-md-h {
	font-size: 0.92rem !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	line-height: 1.32 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Responsive ───────────────────────────────────────────── */

/* Tablette ≤ 960px */
@media (max-width: 960px) {
	.sh-bento {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto auto;
		height: auto;
	}
	.sh-bc-feat  { grid-column: 1 / 3; grid-row: 1; min-height: 260px; }
	.sh-bc-right { grid-column: 1 / 3; grid-row: 2; min-height: 200px; }
	.sh-bc-b1    { grid-column: 1;     grid-row: 3; }
	.sh-bc-b2    { grid-column: 2;     grid-row: 3; }
	.sh-bc-b3    { grid-column: 1 / 3; grid-row: 4; }
}

/* Mobile ≤ 640px */
@media (max-width: 640px) {
	.sh-bento {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.sh-bento > .sh-bc {
		grid-column: 1 !important;
		grid-row: auto !important;
	}
	.sh-bc-feat, .sh-bc-right { min-height: 200px; }
	.sh-bc-md { flex-direction: row; }
	.sh-bc-md-img { width: 35%; min-width: 35%; }
}