/* =========================================================================
   THREADEDUCATION — HOMEPAGE
   Hero éditorial · bento "En ce moment" · Décryptage split · 5 piliers circulaires
   ========================================================================= */

/* =========================================================================
   HERO — split text + image
   ========================================================================= */
.hero {
	padding-top: var(--section-gap);
	padding-bottom: var(--section-gap);
}
.hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.hero-text {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-right: 24px;
}
.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	border-radius: var(--radius-pill);
	background: var(--secondary-container);
	color: var(--on-secondary-container);
	font-family: var(--body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	width: max-content;
}
.hero-eyebrow .material-symbols-outlined {
	font-size: 16px;
	color: var(--primary);
}
.hero-title {
	font-family: var(--display);
	font-size: clamp(36px, 5.5vw, 48px);
	line-height: 1.1;
	letter-spacing: -.02em;
	font-weight: 600;
	color: var(--primary);
	margin: 0;
}
.hero-deck {
	font-family: var(--body);
	font-size: 18px;
	line-height: 1.6;
	color: var(--on-surface-variant);
	max-width: 30em;
}
.hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}
.hero-ctas .btn-pill { padding: 14px 28px; }

.hero-image {
	position: relative;
	height: 500px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--surface-container);
}
.hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .95;
}
.hero-image-placeholder {
	width: 100%;
	height: 100%;
	background:
		radial-gradient(ellipse at 30% 30%, var(--secondary-container) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 70%, var(--primary-fixed) 0%, transparent 55%),
		linear-gradient(135deg, var(--tertiary-fixed), var(--secondary-fixed));
}

@media (max-width: 960px) {
	.hero-grid { grid-template-columns: 1fr; gap: 32px; }
	.hero-text { padding-right: 0; }
	.hero-image { height: 320px; }
}

/* =========================================================================
   EN CE MOMENT — bento layout (1 main + 2 side stacked)
   ========================================================================= */
.featured {
	padding-bottom: var(--section-gap);
}
.featured-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--gutter);
}

.feat-main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--surface-container);
	border-radius: var(--radius-sm);
	overflow: hidden;
	min-height: 400px;
	color: var(--on-surface);
	transition: opacity .15s ease;
}
.feat-main:hover { opacity: .92; }
.feat-main-photo {
	position: relative;
	overflow: hidden;
	background: var(--surface-high);
}
.feat-main-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s ease;
}
.feat-main:hover .feat-main-photo img { transform: scale(1.05); }
.feat-main-photo-placeholder {
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 30% 40%, var(--tertiary-fixed) 0%, transparent 60%),
		linear-gradient(135deg, var(--secondary-fixed), var(--primary-fixed));
}
.feat-main-text {
	padding: clamp(28px, 4vw, 48px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}
.feat-chips {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.feat-chips .meta {
	font-family: var(--body);
	font-size: 12px;
	color: var(--secondary);
}
.feat-main-title {
	font-family: var(--display);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--primary);
	letter-spacing: -.01em;
	transition: color .15s ease;
}
.feat-main:hover .feat-main-title { color: var(--tertiary-container); }
.feat-main-deck {
	font-family: var(--body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--on-surface-variant);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.feat-side {
	display: flex;
	flex-direction: column;
	gap: var(--gutter);
}
.feat-side-card {
	padding: 24px;
	border-radius: var(--radius-sm);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
	min-height: 180px;
	color: var(--on-surface);
	transition: opacity .15s ease;
}
.feat-side-card:hover { opacity: .85; }
.feat-side-card.style-cream { background: var(--tertiary-fixed); }
.feat-side-card.style-neutral {
	background: var(--surface-low);
	border: 1px solid var(--surface-variant);
}
.feat-side-card .feat-side-title {
	font-family: var(--display);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--primary);
	letter-spacing: -.005em;
	margin-bottom: 8px;
}
.feat-side-card .feat-side-deck {
	font-family: var(--body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--on-tertiary-fixed);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.feat-side-card.style-neutral .feat-side-deck { color: var(--on-surface); }
.feat-side-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-family: var(--body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--secondary);
}
.feat-side-cta .material-symbols-outlined { font-size: 16px; }

@media (max-width: 960px) {
	.featured-grid { grid-template-columns: 1fr; }
	.feat-main { grid-template-columns: 1fr; min-height: auto; }
	.feat-main-photo { aspect-ratio: 16 / 10; }
}

/* =========================================================================
   DÉCRYPTAGE — quote + analyse split
   ========================================================================= */
.decryptage {
	background: var(--surface-low);
	padding-top: var(--section-gap);
	padding-bottom: var(--section-gap);
}
.decryptage-grid {
	display: grid;
	grid-template-columns: 5fr 6fr;
	gap: clamp(40px, 6vw, 80px);
}
.decryptage-quote {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: 24px;
	border-right: 1px solid var(--outline-variant);
}
.decryptage-quote .quote-mark {
	font-size: 80px;
	line-height: 1;
	color: var(--tertiary-container);
	margin-bottom: 16px;
	font-family: var(--display);
}
.decryptage-quote h2 {
	font-family: var(--display);
	font-size: clamp(24px, 3vw, 28px);
	line-height: 1.35;
	font-weight: 500;
	color: var(--primary);
	margin-bottom: 24px;
	letter-spacing: -.01em;
}
.decryptage-quote .attrib {
	font-family: var(--body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--secondary);
}
.decryptage-analysis {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.decryptage-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	color: var(--primary);
}
.decryptage-head h3 {
	font-family: var(--display);
	font-size: 22px;
	font-weight: 500;
	color: var(--primary);
	letter-spacing: -.01em;
}
.decryptage-head .material-symbols-outlined { color: var(--primary); }
.decryptage-subtitle {
	font-family: var(--body);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--on-surface);
	margin-bottom: 16px;
}
.decryptage-body {
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--on-surface-variant);
	margin-bottom: 32px;
}
.decryptage-link {
	display: inline-block;
	font-family: var(--body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--primary);
	border-bottom: 1px solid var(--primary);
	padding-bottom: 2px;
	transition: color .15s;
	width: max-content;
}
.decryptage-link:hover { color: var(--primary-container); }

@media (max-width: 960px) {
	.decryptage-grid { grid-template-columns: 1fr; gap: 40px; }
	.decryptage-quote { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--outline-variant); padding-bottom: 40px; }
}

/* =========================================================================
   PILIERS — 5 catégories en cercles
   ========================================================================= */
.piliers {
	padding-top: var(--section-gap);
	padding-bottom: var(--section-gap);
	text-align: center;
}
.piliers-title {
	font-family: var(--display);
	font-size: clamp(28px, 4vw, 32px);
	font-weight: 500;
	line-height: 1.2;
	color: var(--primary);
	letter-spacing: -.01em;
	margin-bottom: 56px;
}
.piliers-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 32px;
}
.pilier {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--on-surface);
	transition: opacity .15s ease;
}
.pilier:hover { opacity: .9; }
.pilier-circle {
	width: 96px;
	height: 96px;
	border-radius: var(--radius-pill);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
	transition: background-color .15s ease;
}
.pilier-circle .material-symbols-outlined {
	font-size: 32px;
}
.pilier-circle.style-recherche { background: var(--surface-variant); color: var(--on-surface-variant); }
.pilier:hover .pilier-circle.style-recherche { background: var(--surface-dim); }
.pilier-circle.style-corps { background: var(--secondary-fixed); color: var(--on-secondary-container); }
.pilier:hover .pilier-circle.style-corps { background: var(--secondary-fixed-dim); }
.pilier-circle.style-assiette { background: var(--primary-fixed); color: var(--on-primary-fixed); }
.pilier:hover .pilier-circle.style-assiette { background: var(--primary-fixed-dim); }
.pilier-circle.style-esprit { background: var(--tertiary-fixed); color: var(--on-tertiary-fixed); }
.pilier:hover .pilier-circle.style-esprit { background: var(--tertiary-fixed-dim); }
.pilier-circle.style-quotidien { background: var(--surface-variant); color: var(--on-surface-variant); }
.pilier:hover .pilier-circle.style-quotidien { background: var(--surface-dim); }

.pilier-name {
	font-family: var(--display);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--primary);
	margin-bottom: 6px;
	letter-spacing: -.005em;
}
.pilier-desc {
	font-family: var(--body);
	font-size: 12px;
	line-height: 1.4;
	color: var(--on-surface-variant);
	max-width: 200px;
}
.pilier-count {
	font-family: var(--body);
	font-size: 11px;
	font-weight: 600;
	color: var(--secondary);
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-top: 8px;
}

@media (max-width: 960px) {
	.piliers-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (max-width: 640px) {
	.piliers-grid { grid-template-columns: repeat(2, 1fr); }
	.pilier-circle { width: 80px; height: 80px; }
}

/* =========================================================================
   DERNIERS ARTICLES — index table
   ========================================================================= */
.latest {
	padding-bottom: var(--section-gap);
}
.latest-list {
	display: flex;
	flex-direction: column;
}
.latest-row {
	display: grid;
	grid-template-columns: 100px 1fr 140px 100px 40px;
	gap: 24px;
	align-items: baseline;
	padding: 20px 0;
	border-top: 1px solid var(--outline-variant);
	transition: background-color .15s, padding-left .15s;
	color: var(--on-surface);
}
.latest-row:last-child { border-bottom: 1px solid var(--outline-variant); }
.latest-row:hover {
	background: var(--surface-low);
	padding-left: 12px;
}
.latest-row:hover .latest-title { color: var(--primary-container); }

.latest-num {
	font-family: var(--body);
	font-size: 12px;
	font-weight: 600;
	color: var(--primary);
	letter-spacing: .04em;
	font-feature-settings: "tnum";
}
.latest-title {
	font-family: var(--display);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--primary);
	letter-spacing: -.005em;
	transition: color .15s;
}
.latest-cat {
	font-family: var(--body);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--secondary);
	text-align: right;
}
.latest-date {
	font-family: var(--body);
	font-size: 12px;
	color: var(--secondary);
	text-align: right;
	font-feature-settings: "tnum";
}
.latest-arrow {
	font-family: var(--body);
	font-size: 18px;
	color: var(--secondary);
	text-align: right;
	transition: color .15s, transform .15s;
}
.latest-row:hover .latest-arrow {
	color: var(--primary);
	transform: translateX(4px);
}

@media (max-width: 960px) {
	.latest-row {
		grid-template-columns: 80px 1fr 30px;
	}
	.latest-cat, .latest-date { display: none; }
}