/* ============================================================
 * astuces.me — homepage (kawaii lifestyle)
 * ============================================================ */

.home-main {
	flex: 1;
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 8px var(--margin-mobile) 64px;
}

@media (min-width: 1024px) {
	.home-main { padding: 16px var(--margin-desktop) 96px; }
}

/* ============================================================
 * HERO — Almanach du mois en signature
 * ============================================================ */

.hero {
	position: relative;
	width: 100%;
	border-radius: var(--r-xl);
	background: var(--primary-container);
	padding: 48px 24px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 32px;
	overflow: hidden;
	margin-bottom: 80px;
	box-shadow: var(--cloud-primary);
}

.hero::before,
.hero::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.hero::before {
	top: -50px;
	right: -50px;
	width: 256px;
	height: 256px;
	background: var(--surface);
	opacity: 0.4;
	filter: blur(40px);
}

.hero::after {
	bottom: -30px;
	left: -20px;
	width: 192px;
	height: 192px;
	background: var(--secondary-container);
	opacity: 0.5;
	filter: blur(30px);
}

@media (min-width: 768px) {
	.hero {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 64px;
		padding: 64px 56px;
	}
}

.hero-text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	max-width: 560px;
}

.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 248, 247, 0.7);
	backdrop-filter: blur(8px);
	padding: 8px 18px;
	border-radius: var(--r-full);
	color: var(--primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.hero-eyebrow .material-symbols-outlined {
	font-size: 16px;
	color: var(--secondary);
}

.hero-title {
	color: var(--on-primary-container);
	margin: 0;
}

.hero-title em {
	font-style: normal;
	color: var(--secondary);
	display: inline-block;
}

.hero-deck {
	font-size: 17px;
	line-height: 1.55;
	color: var(--on-surface-variant);
	margin: 0;
	font-weight: 500;
}

@media (min-width: 768px) {
	.hero-deck { font-size: 18px; }
}

.hero-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

.hero-illu {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 1;
	max-width: 420px;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.hero-illu { width: 45%; }
}

.hero-illu-card {
	width: 100%;
	height: 100%;
	border-radius: var(--r-xl);
	overflow: hidden;
	background: var(--surface-container);
	border: 4px solid var(--surface);
	box-shadow: 0 32px 64px -16px rgba(120, 85, 94, 0.25);
}

.hero-illu-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-sticker {
	position: absolute;
	bottom: -16px;
	left: -16px;
	background: var(--surface);
	padding: 14px 18px;
	border-radius: var(--r-full);
	box-shadow: 0 12px 32px -8px rgba(120, 85, 94, 0.25);
	transform: rotate(-6deg);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--primary);
}

.hero-sticker .material-symbols-outlined {
	font-size: 22px;
	color: var(--secondary);
	font-variation-settings: 'FILL' 1;
}

/* ============================================================
 * CATEGORIES STRIP — 5 sections en stickers
 * ============================================================ */

.cats-strip {
	margin-bottom: 80px;
}

.cats-strip-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 24px;
	padding: 0 8px;
}

.cats-strip-head h2 {
	color: var(--primary);
	margin: 0;
}

.cats-strip-head .see-all {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--secondary);
}

.cats-strip-head .see-all:hover { text-decoration: underline; }

.cats-strip-row {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 8px 0 24px;
	scroll-padding: 24px;
}

@media (min-width: 1024px) {
	.cats-strip-row {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		overflow: visible;
		gap: 20px;
	}
}

.cat-sticker {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: 132px;
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 1024px) {
	.cat-sticker { width: auto; }
}

.cat-sticker:hover { transform: scale(0.96) translateY(2px); }

.cat-sticker-bubble {
	width: 104px;
	height: 104px;
	border-radius: var(--r-full);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--pillowy-inset);
	position: relative;
}

.cat-sticker-bubble .material-symbols-outlined {
	font-size: 44px;
	transition: transform 0.3s ease;
	font-variation-settings: 'FILL' 1;
}

.cat-sticker:hover .cat-sticker-bubble .material-symbols-outlined {
	transform: scale(1.15) rotate(8deg);
}

.cat-sticker-bubble--foyer {
	background: var(--secondary-container);
	box-shadow: var(--pillowy-inset), var(--cloud-secondary);
	color: var(--on-secondary-container);
}

.cat-sticker-bubble--argent {
	background: var(--primary-container);
	box-shadow: var(--pillowy-inset), var(--cloud-primary);
	color: var(--on-primary-container);
}

.cat-sticker-bubble--sante {
	background: var(--tertiary-container);
	box-shadow: var(--pillowy-inset), var(--cloud-tertiary);
	color: var(--on-tertiary-container);
}

.cat-sticker-bubble--famille {
	background: #ffe4c4;
	box-shadow: var(--pillowy-inset), 0 24px 48px -12px rgba(255, 179, 71, 0.3);
	color: #663300;
}

.cat-sticker-bubble--mobilite {
	background: #c4e1ff;
	box-shadow: var(--pillowy-inset), 0 24px 48px -12px rgba(71, 142, 255, 0.3);
	color: #003366;
}

.cat-sticker-label {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--on-surface);
	text-align: center;
}

.cat-sticker-count {
	font-size: 11px;
	font-weight: 600;
	color: var(--outline);
	text-align: center;
	margin-top: -8px;
}

/* ============================================================
 * ALMANACH DU MOIS — Featured signature block
 * ============================================================ */

.almanach-featured {
	background: linear-gradient(135deg, var(--tertiary-container) 0%, var(--surface-container-low) 100%);
	border-radius: var(--r-xl);
	padding: 40px 24px;
	margin-bottom: 80px;
	box-shadow: var(--cloud-tertiary);
	position: relative;
	overflow: hidden;
}

@media (min-width: 768px) {
	.almanach-featured {
		padding: 56px;
		display: grid;
		grid-template-columns: 1fr 1.2fr;
		gap: 48px;
		align-items: center;
	}
}

.almanach-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--surface);
	padding: 8px 16px;
	border-radius: var(--r-full);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tertiary);
	margin-bottom: 16px;
	box-shadow: var(--cloud-soft);
}

.almanach-eyebrow .material-symbols-outlined { font-size: 16px; }

.almanach-month {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--on-tertiary-container);
	margin-bottom: 12px;
}

.almanach-title {
	font-size: 32px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--on-tertiary-container);
	margin: 0 0 16px;
}

@media (min-width: 768px) {
	.almanach-title { font-size: 40px; }
}

.almanach-deck {
	font-size: 16px;
	line-height: 1.55;
	color: var(--on-surface-variant);
	margin: 0 0 20px;
}

.almanach-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--outline);
	margin-bottom: 24px;
}

.almanach-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.almanach-meta-item .material-symbols-outlined { font-size: 16px; }

.almanach-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	background: var(--on-tertiary-container);
	color: var(--tertiary-container);
	border-radius: var(--r-full);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
	transition: transform 0.2s ease;
}

.almanach-cta:hover {
	transform: scale(0.97) translateY(2px);
	color: var(--tertiary-container);
}

.almanach-illu {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--surface);
	box-shadow: 0 24px 48px -16px rgba(99, 96, 55, 0.3);
	border: 4px solid var(--surface);
}

.almanach-illu img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================
 * SECTION : Pour vous aujourd'hui (cards bento)
 * ============================================================ */

.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
	padding: 0 4px;
}

.section-head-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.section-head h2 {
	color: var(--primary);
	margin: 0;
}

.section-head .see-all {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--secondary);
	white-space: nowrap;
}

.section-head .see-all:hover { text-decoration: underline; }

.section-head-sub {
	font-size: 14px;
	color: var(--on-surface-variant);
	font-weight: 500;
	margin: 0;
}

.section {
	margin-bottom: 80px;
}

/* Bento articles grid (Pour vous + Latest) */
.bento-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 640px) {
	.bento-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.bento-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

.bento-card {
	background: var(--surface-container-lowest);
	border: 1px solid rgba(243, 221, 221, 0.5);
	border-radius: 40px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: var(--cloud-primary);
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}

.bento-card:hover {
	transform: scale(0.985) translateY(2px);
	box-shadow: var(--cloud-soft);
	color: inherit;
}

.bento-card--secondary { box-shadow: var(--cloud-secondary); }
.bento-card--tertiary { box-shadow: var(--cloud-tertiary); }

.bento-card-photo {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 32px;
	overflow: hidden;
	background: var(--surface-container);
	margin: 0;
}

.bento-card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.bento-card:hover .bento-card-photo img { transform: scale(1.05); }

.bento-card-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	background: rgba(255, 248, 247, 0.92);
	backdrop-filter: blur(8px);
	padding: 6px 14px;
	border-radius: var(--r-full);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--primary);
}

.bento-card-badge--secondary { color: var(--secondary); }
.bento-card-badge--tertiary { color: var(--tertiary); }

.bento-card-text {
	padding: 4px 8px 16px;
}

.bento-card-title {
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--on-surface);
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}

.bento-card-deck {
	font-size: 15px;
	line-height: 1.5;
	color: var(--on-surface-variant);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bento-card-meta {
	margin-top: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--outline);
	font-size: 12px;
	font-weight: 600;
}

.bento-card-meta .material-symbols-outlined { font-size: 16px; }

/* ============================================================
 * SECTION ZONES (par catégorie, montre la profondeur du contenu)
 * ============================================================ */

.cat-zone {
	background: var(--surface-container-low);
	border-radius: var(--r-xl);
	padding: 32px 20px;
	margin-bottom: 64px;
}

@media (min-width: 768px) {
	.cat-zone { padding: 48px 40px; }
}

.cat-zone--foyer    { background: rgba(178, 238, 185, 0.18); }
.cat-zone--argent   { background: rgba(255, 209, 220, 0.30); }
.cat-zone--sante    { background: rgba(228, 223, 172, 0.30); }
.cat-zone--famille  { background: rgba(255, 228, 196, 0.30); }
.cat-zone--mobilite { background: rgba(196, 225, 255, 0.30); }

.cat-zone-head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 32px;
}

@media (min-width: 768px) {
	.cat-zone-head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}

.cat-zone-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--primary);
	margin-bottom: 4px;
}

.cat-zone-title {
	font-size: 28px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--on-surface);
	margin: 0;
}

@media (min-width: 768px) {
	.cat-zone-title { font-size: 32px; }
}

.cat-zone-sub {
	font-size: 14px;
	color: var(--on-surface-variant);
	margin: 8px 0 0;
	max-width: 480px;
}

.cat-zone-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	background: var(--surface);
	color: var(--primary);
	border-radius: var(--r-full);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	transition: transform 0.2s ease;
	box-shadow: var(--cloud-soft);
	white-space: nowrap;
	align-self: flex-start;
}

.cat-zone-cta:hover {
	transform: scale(0.95);
	color: var(--primary);
}

.cat-zone-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 640px) {
	.cat-zone-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.cat-zone-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

.cat-zone-card {
	background: var(--surface-container-lowest);
	border-radius: 32px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
	box-shadow: var(--cloud-soft);
}

.cat-zone-card:hover {
	transform: scale(0.97) translateY(2px);
	color: inherit;
}

.cat-zone-card-photo {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 24px;
	overflow: hidden;
	background: var(--surface-container);
	margin: 0;
}

.cat-zone-card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.cat-zone-card:hover .cat-zone-card-photo img {
	transform: scale(1.05);
}

.cat-zone-card-text {
	padding: 4px 8px 12px;
}

.cat-zone-card-title {
	font-size: 16px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--on-surface);
	margin: 0 0 6px;
}

.cat-zone-card-meta {
	font-size: 11px;
	font-weight: 600;
	color: var(--outline);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.cat-zone-card-meta .material-symbols-outlined { font-size: 14px; }

/* ============================================================
 * LA REDACTION — bloc des 3 personas (E-E-A-T)
 * ============================================================ */

.redaction-block {
	background: var(--secondary-container);
	border-radius: var(--r-xl);
	padding: 40px 24px;
	margin-bottom: 80px;
	box-shadow: var(--cloud-secondary);
	position: relative;
	overflow: hidden;
}

@media (min-width: 768px) {
	.redaction-block { padding: 64px 56px; }
}

.redaction-block-head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 32px;
	max-width: 640px;
}

.redaction-block-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--secondary);
}

.redaction-block-title {
	font-size: 32px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--on-secondary-container);
	margin: 0;
}

@media (min-width: 768px) {
	.redaction-block-title { font-size: 40px; }
}

.redaction-block-sub {
	font-size: 16px;
	line-height: 1.5;
	color: var(--on-secondary-container);
	opacity: 0.85;
	margin: 0;
}

.redaction-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 768px) {
	.redaction-grid { grid-template-columns: repeat(3, 1fr); }
}

.redaction-card {
	background: var(--surface);
	border-radius: var(--r-lg);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: var(--cloud-soft);
	transition: transform 0.2s ease;
	text-decoration: none;
	color: inherit;
}

.redaction-card:hover {
	transform: translateY(-4px);
	color: inherit;
}

.redaction-card-photo {
	width: 96px;
	height: 96px;
	border-radius: var(--r-full);
	overflow: hidden;
	background: var(--surface-container);
	margin: 0;
	border: 4px solid var(--surface-container-low);
}

.redaction-card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.redaction-card-name {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--on-surface);
	margin: 0;
}

.redaction-card-role {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--secondary);
	margin: -8px 0 0;
}

.redaction-card-bio {
	font-size: 14px;
	line-height: 1.55;
	color: var(--on-surface-variant);
	margin: 0;
}

.redaction-card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--primary);
}

/* ============================================================
 * RECENT POSTS (liste verticale alternative)
 * ============================================================ */

.recent-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--surface-container-lowest);
	border-radius: var(--r-xl);
	padding: 16px;
	box-shadow: var(--cloud-primary);
}

.recent-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	border-radius: var(--r-md);
	text-decoration: none;
	color: inherit;
	transition: all 0.2s ease;
}

.recent-row:hover {
	background: var(--surface-container-low);
	color: inherit;
}

.recent-row-num {
	font-size: 14px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--primary);
	flex-shrink: 0;
	width: 56px;
}

.recent-row-main {
	flex: 1;
	min-width: 0;
}

.recent-row-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--on-surface);
	margin: 0 0 4px;
	letter-spacing: -0.005em;
}

.recent-row-deck {
	font-size: 13px;
	color: var(--on-surface-variant);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.recent-row-meta {
	font-size: 11px;
	color: var(--outline);
	font-weight: 600;
	margin-top: 4px;
	display: flex;
	gap: 12px;
}

.recent-row-cat {
	display: inline-block;
	padding: 6px 12px;
	background: var(--surface-container-high);
	color: var(--primary);
	border-radius: var(--r-full);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	flex-shrink: 0;
}

@media (max-width: 639px) {
	.recent-row-cat { display: none; }
	.recent-row-num { width: 40px; font-size: 12px; }
}

.recent-row-arrow {
	color: var(--outline);
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.recent-row:hover .recent-row-arrow {
	color: var(--primary);
	transform: translateX(4px);
}

/* ============================================================
 * NEWSLETTER / ADSENSE slot placeholder (banner block)
 * ============================================================ */

.banner-block {
	background: var(--primary-container);
	border-radius: var(--r-xl);
	padding: 32px;
	margin-bottom: 64px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: var(--cloud-primary);
	text-align: center;
	align-items: center;
}

@media (min-width: 768px) {
	.banner-block {
		flex-direction: row;
		text-align: left;
		justify-content: space-between;
		padding: 40px 56px;
	}
}

.banner-block-text {
	max-width: 640px;
}

.banner-block-title {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--on-primary-container);
	margin: 0 0 6px;
}

.banner-block-sub {
	font-size: 14px;
	color: var(--on-surface-variant);
	margin: 0;
	line-height: 1.5;
}