/* =========================================================================
   ASTUCES.MAISON — HOMEPAGE
   Hero asymétrique · bento catégories · dernières fiches
   ========================================================================= */

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
	border-bottom: 1px solid var(--outline);
	padding-top: clamp(60px, 12vh, 160px);
	padding-bottom: clamp(60px, 12vh, 160px);
}

.hero-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--gutter);
}

/* Sidebar : index des 5 catégories + total */
.hero-meta { grid-column: span 2; }
.hero-meta-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.hero-meta-label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--outline);
	margin-bottom: 12px;
}
.hero-cat {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 12px 0;
	border-top: 1px solid var(--outline);
	color: var(--ink);
	transition: padding-left .15s ease, color .15s ease;
}
.hero-cat:first-of-type { border-top: 1px solid var(--ink); }
.hero-cat:last-of-type { border-bottom: 1px solid var(--ink); }
.hero-cat:hover { padding-left: 6px; color: var(--accent); }
.hero-cat-name {
	font-family: var(--display);
	font-size: 17px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -.012em;
}
.hero-cat-num {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--secondary);
	font-feature-settings: "tnum";
}
.hero-cat:hover .hero-cat-num { color: var(--accent); }

.hero-meta-rule {
	width: 32px;
	height: 1px;
	background: var(--ink);
	margin-top: 24px;
	margin-bottom: 16px;
}
.hero-meta-total {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.hero-meta-total .hero-meta-label { margin-bottom: 4px; }
.hero-meta-value {
	font-family: var(--display);
	font-size: 36px;
	line-height: 1;
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -.02em;
	font-feature-settings: "tnum";
}
.hero-meta-value.accent { color: var(--accent); }

/* Main hero — titre + deck + CTAs */
.hero-main { grid-column: span 10; }
.hero-title {
	font-family: var(--display);
	font-size: clamp(48px, 9vw, 120px);
	line-height: .9;
	letter-spacing: -.03em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 32px;
	font-optical-sizing: auto;
}
.hero-title .accent { color: var(--accent); }

.hero-bottom {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gutter);
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--outline);
}
.hero-deck {
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.7;
	color: var(--ink-soft);
	max-width: 36em;
}
.hero-cta-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 22px;
	border: 1px solid var(--ink);
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink);
	transition: background-color .12s, color .12s, border-color .12s;
	min-width: 320px;
	background: transparent;
}
.cta:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.cta.cta-soft {
	border-color: var(--outline);
	color: var(--secondary);
	background: var(--surface-low);
}
.cta.cta-soft:hover { color: var(--ink); border-color: var(--ink); background: var(--surface-low); }
.cta .arrow { transition: transform .15s ease; }
.cta:hover .arrow { transform: translateX(4px); }

/* =========================================================================
   BENTO CATÉGORIES — Tout le manuel
   ========================================================================= */
.cats-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: minmax(0, auto);
	gap: var(--gutter);
}
.cat {
	border: 1px solid var(--ink);
	background: var(--surface);
	padding: 28px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	transition: background-color .12s;
	min-height: 240px;
	color: var(--ink);
}
.cat:hover { background: var(--surface-mid); }
.cat:hover .cat-name { color: var(--accent); }

.cat-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 24px;
}
.cat-tag {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .05em;
	color: var(--secondary);
}
.cat-num {
	font-family: var(--mono);
	font-size: 48px;
	line-height: 1;
	font-weight: 700;
	color: var(--outline-soft);
}
.cat-body { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.cat-name {
	font-family: var(--display);
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.1;
	letter-spacing: -.02em;
	text-transform: uppercase;
	font-weight: 600;
	transition: color .12s;
}
.cat-desc {
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--ink-soft);
}
.cat-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink);
}
.cat:hover .cat-link { color: var(--accent); }
.cat-link .material-symbols-outlined { font-size: 16px; }

/* Variantes layout */
.cat-big {
	grid-column: span 5;
	grid-row: span 2;
	min-height: 480px;
}
.cat-big .cat-num { font-size: 64px; }
.cat-big .cat-name { font-size: clamp(40px, 5vw, 64px); }
.cat-big .cat-desc { font-size: 19px; }
.cat-big::before, .cat-big::after,
.cat-big > .corner-tl, .cat-big > .corner-tr {
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	border-color: var(--ink);
}
.cat-big::before {
	bottom: -1px; left: -1px;
	border-top: 1px solid var(--ink);
	border-right: 1px solid var(--ink);
	background: var(--bg);
}
.cat-big::after {
	bottom: -1px; right: -1px;
	border-top: 1px solid var(--ink);
	border-left: 1px solid var(--ink);
	background: var(--bg);
}
.cat-big > .corner-tl {
	top: -1px; left: -1px;
	border-bottom: 1px solid var(--ink);
	border-right: 1px solid var(--ink);
	background: var(--bg);
}
.cat-big > .corner-tr {
	top: -1px; right: -1px;
	border-bottom: 1px solid var(--ink);
	border-left: 1px solid var(--ink);
	background: var(--bg);
}

.cat-wide    { grid-column: span 7; }
.cat-mid     { grid-column: span 4; }
.cat-thin    { grid-column: span 3; }
.cat-inverse { grid-column: span 5; }

/* Accent variant — fond rust */
.cat-accent {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}
.cat-accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.cat-accent:hover .cat-name { color: #fff; }
.cat-accent .cat-tag { color: rgba(255,255,255,.7); }
.cat-accent .cat-num { color: rgba(255,255,255,.45); }
.cat-accent .cat-desc { color: rgba(255,255,255,.92); }
.cat-accent .cat-link { color: #fff; }
.cat-accent:hover .cat-link { color: #fff; opacity: .75; }

/* Inverse variant — Notre méthode (noir, hover rust) */
.cat-inverse {
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
}
.cat-inverse:hover { background: var(--accent); border-color: var(--accent); }
.cat-inverse:hover .cat-name { color: #fff; }
.cat-inverse .cat-tag { color: rgba(255,255,255,.55); }
.cat-inverse .cat-arrow-mark {
	font-family: var(--mono);
	font-size: 32px;
	line-height: 1;
	color: var(--accent);
	transition: transform .2s ease, color .15s;
}
.cat-inverse:hover .cat-arrow-mark { color: #fff; transform: translateX(6px); }
.cat-inverse .cat-desc { color: rgba(255,255,255,.85); }
.cat-inverse .cat-link { color: #fff; }
.cat-inverse:hover .cat-link { color: #fff; opacity: .85; }

/* =========================================================================
   DERNIÈRES FICHES
   ========================================================================= */
.latest {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--gutter);
}
.latest-side { grid-column: span 3; }
.latest-side h2 {
	font-family: var(--display);
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.1;
	letter-spacing: -.02em;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 24px;
}
.latest-side-note {
	border-left: 1px solid var(--ink);
	padding-left: 16px;
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .05em;
	color: var(--secondary);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.latest-side-note a {
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-transform: uppercase;
	letter-spacing: .1em;
}
.latest-side-note a:hover { color: var(--accent); }
.latest-side-note .material-symbols-outlined { font-size: 16px; }

.latest-list {
	grid-column: span 9;
	display: flex;
	flex-direction: column;
}

.fiche {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 24px 0;
	border-top: 1px solid var(--outline);
	transition: background-color .12s, padding-left .15s;
	text-decoration: none;
	color: var(--ink);
}
.fiche:last-child { border-bottom: 1px solid var(--outline); }
.fiche:hover {
	background: var(--surface-low);
	padding-left: 12px;
}
.fiche:hover .fiche-title { color: var(--accent); }
.fiche:hover .fiche-arrow { background: var(--ink); color: #fff; }
.fiche:hover .fiche-num   { color: var(--accent); }

.fiche-code {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 128px;
	flex-shrink: 0;
}
.fiche-num {
	font-family: var(--display);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--ink);
	line-height: 1.1;
	font-feature-settings: "tnum";
}
.fiche-date {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--secondary);
	line-height: 1.3;
}

.fiche-main { flex: 1; min-width: 0; padding-right: 24px; }
.fiche-title {
	font-family: var(--display);
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.015em;
	margin-bottom: 6px;
	transition: color .12s;
}
.fiche-deck {
	font-family: var(--body);
	font-size: 15px;
	line-height: 1.45;
	color: var(--ink-soft);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.fiche-right {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}
.fiche-cat {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--secondary);
	padding: 4px 8px;
	border: 1px solid var(--outline);
}
.fiche-arrow {
	width: 40px;
	height: 40px;
	border: 1px solid var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .12s, color .12s;
}

/* =========================================================================
   RESPONSIVE — homepage
   ========================================================================= */
@media (max-width: 1080px) {
	.hero-meta { display: none; }
	.hero-main { grid-column: span 12; }
	.hero-bottom { grid-template-columns: 1fr; }

	.cat-big { grid-column: span 12; grid-row: auto; min-height: 360px; }
	.cat-wide { grid-column: span 12; }
	.cat-mid  { grid-column: span 6; }
	.cat-thin { grid-column: span 6; }
	.cat-inverse { grid-column: span 12; }

	.latest-side, .latest-list { grid-column: span 12; }
	.fiche { flex-wrap: wrap; }
	.fiche-code { width: 100%; margin-bottom: 8px; }
}

@media (max-width: 640px) {
	.hero-title { font-size: 48px; }
	.cta { min-width: 0; width: 100%; }
	.cat-mid, .cat-thin, .cat-inverse { grid-column: span 12; }
	.fiche-right { width: 100%; justify-content: space-between; }
}