/* ============================================================================
   ZERO COMPLEXE — DESIGN SYSTEM DES CATEGORY HUBS
   2026-08-21. Charge uniquement sur les categories disposant d'une
   configuration dans hubs-config.php. N'affecte aucune autre page du site.
   Aucune police externe : pile serif systeme pour l'editorial.
   ========================================================================= */

:root {
	--zch-bg:         #faf8f4;
	--zch-card:       #ffffff;
	--zch-text:       #2f2d29;
	--zch-muted:      #706b63;
	--zch-sage:       #7c9068;
	--zch-sage-dark:  #63764f;
	--zch-sage-soft:  #eef1e9;
	--zch-beige:      #f4ece3;
	--zch-cream:      #fbf7f1;
	--zch-border:     rgba(47, 45, 41, .09);
	--zch-radius:     20px;
	--zch-radius-lg:  26px;
	--zch-serif:      Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
	--zch-pad:        clamp(40px, 4.5vw, 64px);
}

/* --- Neutralisation du conteneur Astra, hubs uniquement ------------------ */
body.zch-hub .site-content > .ast-container {
	max-width: 100%;
	padding: 0;
	margin: 0;
}
body.zch-hub .site-content { background: var(--zch-bg); }
body.zch-hub .ast-separate-container .ast-article-single,
body.zch-hub .ast-separate-container .ast-article-post { padding: 0; border: 0; }

.zch { background: var(--zch-bg); color: var(--zch-text); }
.zch *, .zch *::before, .zch *::after { box-sizing: border-box; }
.zch img { max-width: 100%; display: block; }

.zch-container {
	width: min(1200px, 100% - 40px);
	margin-inline: auto;
}
.zch-section { padding-block: var(--zch-pad); }

/* --- Rail de contenu unique ---------------------------------------------
   Les .zch-panel portent un padding lateral qui decalait leur contenu vers
   l'interieur, tandis que les blocs sans panneau restaient au bord du
   conteneur : le bord gauche alternait 105px / 161px d'une section a
   l'autre. On ramene le conteneur a la largeur du contenu et on laisse les
   panneaux ressortir de leur propre padding. Tout s'aligne sur le meme axe
   et les blocs teintes conservent exactement leur largeur actuelle.
   Applique des 769px. En dessous, le panneau retombe a 18px de padding :
   l'ecart residuel vaut 18px et n'est pas traite, pour ne pas retrecir
   les cartes sur mobile. */
@media (min-width: 769px) {
	.zch-container { width: min(1088px, 100% - 40px - 2 * clamp(28px, 4vw, 56px)); }
	.zch-container > .zch-panel { margin-inline: 0; padding-inline: clamp(20px, 2.2vw, 32px); }

	/* Hero : la colonne texte etait trop etroite (42fr) et le H1 limite a
	   14ch, ce qui cassait les <br> voulus en 5 lignes au lieu de 3 et
	   faisait depasser le texte de 176px sous l'image. */
	.zch .zch-hero-grid { grid-template-columns: 47fr 53fr; }
	.zch .zch-hero h1   { font-size: clamp(30px, 3.5vw, 46px); max-width: 20ch; }
}

/* --- Typographie --------------------------------------------------------- */
.zch h1, .zch h2, .zch h3, .zch .zch-serif {
	font-family: var(--zch-serif);
	font-weight: 400;
	color: var(--zch-text);
	letter-spacing: -.01em;
}
.zch h1 {
	font-size: clamp(38px, 4.9vw, 62px);
	line-height: 1.06;
	margin: 0 0 18px;
	max-width: 14ch;
}
.zch h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.18; margin: 0 0 14px; }
.zch h3 { font-size: 19px; line-height: 1.3; margin: 0 0 8px; }
.zch p  { color: var(--zch-muted); line-height: 1.68; margin: 0 0 14px; font-size: 15.5px; }
.zch a  { color: inherit; }

.zch-eyebrow {
	font-family: inherit;
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--zch-sage);
	font-weight: 600;
	margin: 0 0 14px;
}
.zch-lead { font-size: 16.5px; }

/* petit filet decoratif */
.zch-rule {
	width: 54px; height: 1px; background: var(--zch-sage);
	opacity: .5; margin: 0 0 22px;
}
.zch-rule--center { margin-inline: auto; }

.zch-head { text-align: center; margin-bottom: clamp(24px, 2.6vw, 36px); }
.zch-head p { max-width: 56ch; margin-inline: auto; }

/* --- Boutons ------------------------------------------------------------- */
.zch-btn {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--zch-sage); color: #fff;
	padding: 14px 26px; border-radius: 100px;
	font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; text-decoration: none;
	transition: background .2s ease;
}
.zch-btn:hover { background: var(--zch-sage-dark); color: #fff; }
.zch-btn svg { width: 15px; height: 15px; }

.zch-link {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--zch-sage); text-decoration: none;
	font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.zch-link:hover { color: var(--zch-sage-dark); }
.zch-link svg { width: 15px; height: 15px; }

/* --- 1. HERO ------------------------------------------------------------- */
.zch-hero { padding-block: clamp(32px, 4.5vw, 68px) var(--zch-pad); }
.zch-hero-grid {
	display: grid; grid-template-columns: 42fr 58fr;
	gap: clamp(28px, 4vw, 64px); align-items: center;
}
.zch-hero-visual { position: relative; }
.zch-hero-visual img {
	width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
	border-radius: var(--zch-radius-lg);
}
.zch-principles {
	position: absolute; right: 22px; bottom: 22px;
	background: var(--zch-card); border: 1px solid var(--zch-border);
	border-radius: 18px; padding: 20px 22px;
	width: min(272px, 62%);
	box-shadow: 0 12px 34px rgba(47, 45, 41, .07);
}
.zch-principle { display: flex; gap: 12px; align-items: flex-start; }
.zch-principle + .zch-principle { margin-top: 15px; }
.zch-principle-ico {
	flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
	background: var(--zch-sage-soft); color: var(--zch-sage);
	display: grid; place-items: center;
}
.zch-principle-ico svg { width: 17px; height: 17px; }
.zch-principle b { display: block; font-size: 13.5px; font-weight: 600; color: var(--zch-text); }
.zch-principle span { font-size: 12.5px; color: var(--zch-muted); line-height: 1.45; }

/* --- Panneau teinte ------------------------------------------------------ */
.zch-panel { border-radius: var(--zch-radius-lg); padding: clamp(26px, 3vw, 42px) clamp(28px, 4vw, 56px); }
.zch-panel--cream { background: var(--zch-cream); }
.zch-panel--beige { background: var(--zch-beige); }
.zch-panel--sage  { background: var(--zch-sage-soft); }

/* --- 2. LES GRANDS AXES -------------------------------------------------- */
.zch-axes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.zch-axe {
	background: var(--zch-card); border: 1px solid var(--zch-border);
	border-radius: var(--zch-radius); padding: 26px 24px 28px;
}
.zch-axe-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.zch-num {
	font-family: var(--zch-serif); font-size: 20px; color: var(--zch-text);
	background: var(--zch-sage-soft); border-radius: 50%;
	width: 42px; height: 42px; display: grid; place-items: center;
}
.zch-axe-ico { color: var(--zch-sage); opacity: .85; }
.zch-axe-ico svg { width: 26px; height: 26px; }
.zch-axe p { font-size: 14px; margin: 0; }

/* --- 3. BLOC EDITORIAL SIGNATURE ---------------------------------------- */
.zch-sig { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(24px, 3.5vw, 52px); align-items: center; }
.zch-sig-head h2 { margin-bottom: 10px; }
.zch-sig-head p { margin: 0; font-size: 14.5px; }
.zch-sig-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.zch-sig-item { display: flex; gap: 14px; align-items: flex-start; }
.zch-sig-ico {
	flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%;
	background: var(--zch-card); color: var(--zch-sage);
	display: grid; place-items: center; border: 1px solid var(--zch-border);
}
.zch-sig-ico svg { width: 22px; height: 22px; }
.zch-sig-item b { display: block; font-family: var(--zch-serif); font-size: 16px; margin-bottom: 5px; }
.zch-sig-item p { font-size: 13.5px; margin: 0; line-height: 1.5; }

/* --- 4. GUIDES ESSENTIELS ------------------------------------------------ */
.zch-guides { display: grid; grid-template-columns: 1fr; gap: 22px; }
.zch-guides--two { grid-template-columns: 1.45fr 1fr; }
.zch-guide {
	background: var(--zch-card); border: 1px solid var(--zch-border);
	border-radius: var(--zch-radius); overflow: hidden;
	display: flex; flex-direction: column;
}
.zch-guide-visual {
	min-height: 132px; display: grid; place-items: center;
	background: var(--zch-sage-soft); color: var(--zch-sage);
}
.zch-guide-visual svg { width: 46px; height: 46px; opacity: .75; }
.zch-guide--side .zch-guide-visual { background: var(--zch-beige); }
.zch-guide-body { padding: 26px 28px 28px; flex: 1; display: flex; flex-direction: column; }
.zch-badge {
	display: inline-block; align-self: flex-start;
	background: var(--zch-sage-soft); color: var(--zch-sage-dark);
	font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	padding: 5px 11px; border-radius: 6px; margin-bottom: 12px;
}
.zch-guide h3 { font-size: 24px; margin-bottom: 10px; }
.zch-benefits { list-style: none; margin: 4px 0 20px; padding: 0; }
.zch-benefits li {
	display: flex; gap: 9px; align-items: flex-start;
	font-size: 14px; color: var(--zch-muted); margin-bottom: 7px;
}
.zch-benefits svg { width: 15px; height: 15px; color: var(--zch-sage); flex: 0 0 15px; margin-top: 3px; }
.zch-guide .zch-btn, .zch-guide .zch-link { margin-top: auto; align-self: flex-start; }

/* --- Guides : variante a trois cartes (1 phare + 2 secondaires) ---------- */
.zch-guides--three { grid-template-columns: 1.4fr 1fr 1fr; }
/* Une seule carte : largeur de carte plutot qu'un etirement sur tout le
   rail, et calage a gauche comme le reste de la page. */
.zch-guides--one { grid-template-columns: 1fr; }
.zch-guides--one .zch-guide { flex-direction: row; align-items: stretch; }
.zch-guides--one .zch-guide-visual { flex: 0 0 210px; }
.zch-guides--one .zch-guide-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 40px;
	align-items: center;
	padding: 30px 34px;
}
.zch-guides--one .zch-guide-body > .zch-badge,
.zch-guides--one .zch-guide-body > h3,
.zch-guides--one .zch-guide-body > p,
.zch-guides--one .zch-guide-body > .zch-benefits { grid-column: 1; justify-self: start; }
.zch-guides--one .zch-guide-body > p { margin-bottom: 0; }
.zch-guides--one .zch-guide-body > .zch-btn,
.zch-guides--one .zch-guide-body > .zch-link {
	grid-column: 2; grid-row: 1 / -1;
	align-self: center; margin-top: 0; white-space: nowrap;
}
@media (max-width: 768px) {
	.zch-guides--one .zch-guide { flex-direction: column; }
	.zch-guides--one .zch-guide-visual { flex: 0 0 auto; }
	.zch-guides--one .zch-guide-body { grid-template-columns: 1fr; }
	.zch-guides--one .zch-guide-body > .zch-btn,
	.zch-guides--one .zch-guide-body > .zch-link {
		grid-column: 1; grid-row: auto; justify-self: start; margin-top: 18px;
	}
}
@media (max-width: 1024px) { .zch-guides--three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px)  { .zch-guides--three { grid-template-columns: 1fr; } }

/* --- 5. ARTICLES --------------------------------------------------------- */
.zch-articles { display: grid; gap: 22px; }
.zch-articles--grid { grid-template-columns: repeat(3, 1fr); }
.zch-art {
	background: var(--zch-card); border: 1px solid var(--zch-border);
	border-radius: var(--zch-radius); overflow: hidden;
}
.zch-art--wide { display: grid; grid-template-columns: 42fr 58fr; align-items: stretch; }
.zch-art-img { display: block; overflow: hidden; }
.zch-art-img img { width: 100%; height: 100%; min-height: 210px; object-fit: cover; }
.zch-articles--grid .zch-art-img img { min-height: 190px; aspect-ratio: 3 / 2; }
.zch-art-body { padding: 26px 30px 28px; display: flex; flex-direction: column; }
.zch-art h3 { font-size: 23px; line-height: 1.26; margin-bottom: 10px; }
.zch-articles--grid .zch-art h3 { font-size: 18px; }
.zch-art p { font-size: 14.5px; }
.zch-art-foot { display: flex; align-items: center; gap: 18px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.zch-readtime {
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--zch-cream); border: 1px solid var(--zch-border);
	border-radius: 100px; padding: 6px 13px;
	font-size: 12px; color: var(--zch-muted);
}
.zch-readtime svg { width: 13px; height: 13px; }
.zch-empty { color: var(--zch-muted); font-size: 15px; margin: 0; }

/* --- 6. BLOC DE MARQUE --------------------------------------------------- */
.zch-brand { text-align: center; }
.zch-brand .zch-eyebrow { color: var(--zch-sage-dark); }
.zch-brand h2 { max-width: 20ch; margin-inline: auto; margin-bottom: 34px; }
.zch-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: left; }
.zch-value { display: flex; gap: 15px; align-items: flex-start; }
.zch-value-ico {
	flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%;
	background: var(--zch-card); color: var(--zch-sage);
	display: grid; place-items: center;
}
.zch-value-ico svg { width: 23px; height: 23px; }
.zch-value b { display: block; font-family: var(--zch-serif); font-size: 17px; margin-bottom: 6px; }
.zch-value p { font-size: 13.8px; margin: 0; line-height: 1.55; }

/* --- 7. POUR ALLER PLUS LOIN -------------------------------------------- */
.zch-next { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.zch-next-card {
	background: var(--zch-card); border: 1px solid var(--zch-border);
	border-radius: var(--zch-radius); overflow: hidden;
	display: grid; grid-template-columns: 40fr 60fr;
}
.zch-next-card img { width: 100%; height: 100%; min-height: 176px; object-fit: cover; }
.zch-next-body { padding: 24px 26px; display: flex; flex-direction: column; }
.zch-next-body h3 { font-size: 21px; margin-bottom: 8px; }
.zch-next-body p { font-size: 13.8px; }
.zch-next-body .zch-link { margin-top: auto; }

/* --- Encadre d'avertissement -------------------------------------------- */
.zch-note {
	background: var(--zch-cream); border: 1px solid var(--zch-border);
	border-radius: 16px; padding: 20px 24px; margin-top: 34px;
}
.zch-note p { font-size: 13.5px; margin: 0; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
	.zch-hero-grid { grid-template-columns: 1fr; }
	.zch-hero-visual { order: 2; }
	.zch-hero-text  { order: 1; }
	.zch h1 { max-width: 100%; }
	.zch-principles {
		position: static; width: 100%; margin-top: 16px;
		box-shadow: none; order: 3;
	}
	.zch-axes { grid-template-columns: repeat(2, 1fr); }
	.zch-sig  { grid-template-columns: 1fr; }
	.zch-guides--two { grid-template-columns: 1fr; }
	.zch-articles--grid { grid-template-columns: repeat(2, 1fr); }
	.zch-values { grid-template-columns: 1fr; gap: 22px; }
	.zch-next { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.zch-container { width: min(1200px, 100% - 32px); }
	.zch-axes { grid-template-columns: 1fr; }
	.zch-sig-items { grid-template-columns: 1fr; gap: 18px; }
	.zch-art--wide { grid-template-columns: 1fr; }
	.zch-art-img img { min-height: 0; aspect-ratio: 3 / 2; }
	.zch-articles--grid { grid-template-columns: 1fr; }
	.zch-next-card { grid-template-columns: 1fr; }
	.zch-next-card img { min-height: 0; aspect-ratio: 16 / 9; }
	.zch-art-body, .zch-guide-body, .zch-next-body { padding: 22px 20px 24px; }
	.zch-panel { padding: 24px 18px; border-radius: 20px; }
}

/* --- Variantes de grille articles ---------------------------------------- */
.zch-articles--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px) { .zch-articles--two { grid-template-columns: 1fr; } }

/* icone dans la carte "aller plus loin" : ne pas etirer en colonne flex */
.zch-next-body .zch-principle-ico { align-self: flex-start; }

/* le lien du titre de carte garde la couleur du texte */
.zch h3 a { color: inherit; text-decoration: none; }
.zch h3 a:hover { color: var(--zch-sage); }
.zch-art-img { line-height: 0; }