/* ==========================================================================
   INFOGRAPHIES DU SITE — jardin-helvetia.com (Mission C, 26/09/2026)
   Composants pour les contenus SANS chiffre ni date : fiches à picto, étapes,
   comparo à privilégier/à éviter, astuce, calendrier du jardin.
   Réutilise UNIQUEMENT les tokens déjà déclarés dans style.css (:root) —
   aucune couleur/police redéfinie ici, mode clair uniquement (CM-0750/752).
   Préfixe de classes : jh- (R-0794 — jamais sbs_ dans le rendu visuel).
   ========================================================================== */

.jh-pictos,
.jh-pasapas-bloc,
.jh-comparo,
.jh-astuce,
.jh-calendrier {
	margin: 40px 0;
	max-width: 100%;
}

.jh-pictos-titre,
.jh-pasapas-titre,
.jh-calendrier-titre {
	display: block;
	font-family: var(--jh-font-titre);
	font-size: 1.05rem;
	color: var(--jh-encre);
	margin: 0 0 16px;
}

/* --------------------------------------------------------------------
   1. FICHES À PICTO — grille adaptée au nombre réel d'items (R-0552) :
      jamais de carte seule orpheline sur la dernière ligne.
   -------------------------------------------------------------------- */
.jh-pictos-liste {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.jh-pictos-liste[data-total="2"] { grid-template-columns: repeat(2, 1fr); }
	.jh-pictos-liste[data-total="3"] { grid-template-columns: repeat(3, 1fr); }
	.jh-pictos-liste[data-total="4"] { grid-template-columns: repeat(2, 1fr); } /* 2×2, demandé par Mathias */
	.jh-pictos-liste[data-total="5"],
	.jh-pictos-liste[data-total="6"] { grid-template-columns: repeat(3, 1fr); } /* 3+2 ou 3+3, jamais 1 seul en bas */
	.jh-pictos-liste[data-total="1"] { max-width: 360px; }
}

.jh-pictos-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
	background: var(--jh-surface);
	border: 1px solid var(--jh-trait);
	border-radius: var(--jh-rayon-petit);
	padding: 16px;
}

.jh-pictos-icone {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--jh-teinte-mousse);
	color: var(--jh-buis);
}

.jh-pictos-corps {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1 1 auto;
}

.jh-pictos-nom {
	font-family: var(--jh-font-titre);
	color: var(--jh-encre);
	font-size: 1rem;
	overflow-wrap: anywhere;
}

.jh-pictos-texte {
	color: var(--jh-texte2);
	font-size: .92rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.jh-pictos-pastille {
	align-self: flex-start;
	margin-top: 2px;
	font-family: var(--jh-font-titre);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--jh-buis);
	background: var(--jh-paille);
	border-radius: 999px;
	padding: 3px 10px;
}

/* --------------------------------------------------------------------
   2. ÉTAPES NUMÉROTÉES — horizontales sur ordinateur, verticales sur
      mobile ; jamais de texte coincé derrière le numéro (R-0552).
   -------------------------------------------------------------------- */
.jh-pasapas-liste {
	display: flex;
	flex-direction: column;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.jh-pasapas-item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-left: 56px;
	min-width: 0;
}

.jh-pasapas-item::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 40px;
	bottom: -24px;
	width: 2px;
	background: var(--jh-trait);
}

.jh-pasapas-item:last-child::before { display: none; }

.jh-pasapas-num {
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--jh-buis);
	color: #fff;
	font-family: var(--jh-font-titre);
	font-size: 1.05rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.jh-pasapas-nom {
	display: block;
	font-family: var(--jh-font-titre);
	color: var(--jh-encre);
	font-size: 1rem;
	overflow-wrap: anywhere;
}

.jh-pasapas-texte {
	display: block;
	color: var(--jh-texte2);
	font-size: .92rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

@media (min-width: 780px) {
	.jh-pasapas-liste {
		display: grid;
		gap: 28px 20px;
	}
	.jh-pasapas-liste[data-total="1"] { grid-template-columns: 1fr; max-width: 420px; }
	.jh-pasapas-liste[data-total="2"] { grid-template-columns: repeat(2, 1fr); }
	.jh-pasapas-liste[data-total="3"] { grid-template-columns: repeat(3, 1fr); }
	.jh-pasapas-liste[data-total="4"] { grid-template-columns: repeat(4, 1fr); }
	.jh-pasapas-liste[data-total="5"],
	.jh-pasapas-liste[data-total="6"] { grid-template-columns: repeat(3, 1fr); }

	/* En ligne(s), le numéro passe au-dessus, centré : le texte garde toute la largeur
	   de la carte (jamais coincé derrière), et la ligne devient horizontale entre cartes
	   d'une même rangée plutôt que verticale. */
	.jh-pasapas-item {
		padding-left: 0;
		padding-top: 52px;
		text-align: center;
		align-items: center;
	}
	.jh-pasapas-num {
		left: 50%;
		top: 0;
		transform: translateX(-50%);
	}
	.jh-pasapas-item::before {
		left: -10px;
		right: auto;
		top: 19px;
		bottom: auto;
		width: calc(100% - 20px);
		height: 2px;
	}
	.jh-pasapas-item:first-child::before { display: none; }
	.jh-pasapas-liste[data-total="5"] .jh-pasapas-item::before,
	.jh-pasapas-liste[data-total="6"] .jh-pasapas-item::before { display: none; } /* rangées multiples : pas de ligne qui saute d'une ligne à l'autre */
}

/* --------------------------------------------------------------------
   3. À PRIVILÉGIER / À ÉVITER — deux colonnes contrastées, toujours
      complètes (jamais d'orpheline : 2 colonnes fixes).
   -------------------------------------------------------------------- */
.jh-comparo {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 640px) {
	.jh-comparo { grid-template-columns: 1fr 1fr; }
}

.jh-comparo-col {
	border-radius: var(--jh-rayon-carte);
	padding: 20px 22px;
	min-width: 0;
}

.jh-comparo-col--oui { background: var(--jh-teinte-mousse); border: 1px solid rgba(35,83,58,.18); }
.jh-comparo-col--non { background: var(--jh-teinte-secateur); border: 1px solid rgba(181,36,28,.18); }

.jh-comparo-titre {
	display: block;
	font-family: var(--jh-font-titre);
	font-size: 1rem;
	margin: 0 0 12px;
}

.jh-comparo-col--oui .jh-comparo-titre { color: var(--jh-buis); }
.jh-comparo-col--non .jh-comparo-titre { color: var(--jh-secateur-appuye); }

.jh-comparo-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.jh-comparo-liste li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--jh-encre);
	font-size: .94rem;
	line-height: 1.5;
}

.jh-comparo-liste li > span:last-child { min-width: 0; overflow-wrap: anywhere; }

.jh-comparo-picto { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; }
.jh-comparo-col--oui .jh-comparo-picto { color: var(--jh-buis); }
.jh-comparo-col--non .jh-comparo-picto { color: var(--jh-secateur); }

/* --------------------------------------------------------------------
   4. POINT CLÉ / "LE SAVIEZ-VOUS ?" — encadré, respiration généreuse
      avant la section suivante (R-0652).
   -------------------------------------------------------------------- */
.jh-astuce {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: var(--jh-paille);
	border-left: 4px solid var(--jh-buis);
	border-radius: 0 var(--jh-rayon-carte) var(--jh-rayon-carte) 0;
	padding: 24px 28px;
	margin: 48px 0;
}

.jh-astuce-icone {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	color: var(--jh-buis);
}

.jh-astuce-corps { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.jh-astuce-titre {
	font-family: var(--jh-font-titre);
	color: var(--jh-encre);
	font-size: 1.02rem;
}

.jh-astuce-texte {
	color: var(--jh-texte2);
	font-size: .95rem;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------
   5. CALENDRIER DU JARDIN — frise horizontale, un mois = une carte.
   -------------------------------------------------------------------- */
.jh-calendrier-liste {
	display: flex;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 4px 4px 12px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
}

.jh-calendrier-mois {
	scroll-snap-align: start;
	flex: 0 0 auto;
	width: 168px;
	background: var(--jh-surface);
	border: 1px solid var(--jh-trait);
	border-top: 3px solid var(--jh-buis);
	border-radius: var(--jh-rayon-petit);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.jh-calendrier-icone {
	width: 28px;
	height: 28px;
	color: var(--jh-mousse);
}

.jh-calendrier-nom {
	font-family: var(--jh-font-titre);
	color: var(--jh-encre);
	font-size: .95rem;
}

.jh-calendrier-texte {
	color: var(--jh-texte2);
	font-size: .88rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------
   6. Pictos SVG — communs à tous les composants ci-dessus.
   -------------------------------------------------------------------- */
.jh-picto { width: 22px; height: 22px; fill: currentColor; display: block; }