/* ═════════════════════════════════════════════════════════════════
   Ophtapod : page Pathologies (template-pathologies.php)
   Tailles en rem (voir la convention dans main.css) pour que le module
   d'accessibilité puisse mettre le texte à l'échelle.
   ═════════════════════════════════════════════════════════════════ */

/* Les classes partagées entre modèles vivent dans main.css, chargé sur toutes
   les pages : .op-eyebrow, .op-page-hero, le gabarit .op-trouble-item des
   quatre fiches fréquentes, et .op-artcard pour les articles systémiques.
   Ne reste ici que ce qui est propre à cette page. Toutes les sections
   partagent .op-container, donc la même marge latérale. */

/* ── Les plus fréquentes ──────────────────────────────────────────── */

.op-patho-liste {
	background: var(--c-white);
}

.op-patho-liste .op-container {
	padding: 7.5rem 0 8.75rem;
}

/* Fiches ancrées (menu) : on compense le header. */
.op-patho-liste .op-trouble-item {
	scroll-margin-top: 7rem;
}

.op-patho-liste__head {
	max-width: 34rem;
	margin-bottom: 2.75rem;
}

.op-patho-liste__title {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 2.75rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

.op-patho-liste__texte {
	margin: 1rem 0 0;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--c-gray);
}

/* ── Toutes les autres pathologies ────────────────────────────────────
   Une liste de noms, sans ligne de repère ni chevron : aucune ne mène à une
   fiche de détail. Trois colonnes typographiques en desktop, liste complète.
   Le contrôle « Voir plus » n'existe qu'en mobile, où il est le seul de la
   V1. La section entière ne se rend pas si aucun nom n'est fourni. */

.op-patho-autres {
	background: var(--c-blue-pale);
}

.op-patho-autres .op-container {
	padding: 6.875rem 0;
}

.op-patho-autres__head {
	max-width: 34rem;
	margin-bottom: 2.75rem;
}

.op-patho-autres__title {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 2.75rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

.op-patho-autres__intro {
	margin: 1rem 0 0;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--c-gray);
}

/* Colonnes typographiques, et non une grille : la liste se remplit colonne
   par colonne, comme dans la source, et son nombre d'entrées peut varier
   sans laisser de trous. */
.op-patho-autres__liste {
	column-count: 3;
	column-gap: 5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.op-patho-autres__nom {
	display: flex;
	align-items: center;
	break-inside: avoid;
	min-height: var(--op-tap);
	padding: 0.625rem 0;
	box-shadow: inset 0 -0.0625rem 0 0 var(--c-rule-pale);
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 1.0625rem;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

/* Le contrôle n'existe qu'en mobile, et seulement si le script tourne :
   sans JavaScript la liste reste complète, un bouton inopérant n'aurait
   rien à commander. En desktop la liste est complète de toute façon. */
.op-patho-autres__plus {
	display: none;
	margin: var(--sp-group) 0 0;
}

/* ── Maladies systémiques ─────────────────────────────────────────────
   Section blanche : tête de section avec son renvoi vers le blog, puis les
   articles désignés par le client. Autant de cartes que d'articles choisis,
   jamais de carte de remplissage. */

.op-patho-syst {
	background: var(--c-white);
}

.op-patho-syst .op-container {
	padding: 8.75rem 0;
}

.op-patho-syst__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin-bottom: 2.75rem;
}

.op-patho-syst__head-texte {
	max-width: 34rem;
}

.op-patho-syst__title {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 2.75rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

.op-patho-syst__texte {
	margin: 1rem 0 0;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--c-gray);
}

.op-patho-syst__lien {
	margin: 0;
}

.op-patho-syst__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
	align-items: start;
}

/* ── Bande finale ─────────────────────────────────────────────────────
   CtaBand ton « pale » : rangée, titre à gauche, action à droite. */

.op-patho-cta {
	background: var(--c-blue-pale);
	padding: 5.625rem var(--section-px);
}

.op-patho-cta .op-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2.5rem;
}

.op-patho-cta__title {
	margin: 0;
	max-width: 34rem;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 2.25rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

.op-patho-cta__btn {
	margin: 0;
}

/* ═════════════════════════════════════════════════════════════════
   Responsive
   ═════════════════════════════════════════════════════════════════ */

@media (max-width: 1279px) {
	:root {
		--sp-section: 6.875rem;
	}
	.op-patho-liste .op-container {
		padding: 5.625rem 0 6.875rem;
	}
	.op-patho-autres__liste {
		column-count: 2;
		column-gap: 3.125rem;
	}
	.op-patho-syst .op-container {
		padding: 6.875rem 0;
	}
	.op-patho-syst__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 3.125rem;
	}
}

/* ── Mobile : 767px et moins ──────────────────────────────────────────
   La liste des autres pathologies passe sur une colonne et n'affiche que
   six noms ; le contrôle déplie le reste sur place. C'est le seul « Voir
   plus » de la V1 : la section suivante reste immédiatement accessible,
   la zone repliée ne conservant aucune hauteur. */

@media (max-width: 767px) {
	.op-patho-liste .op-container {
		padding: 3.75rem 0 4.375rem;
	}
	.op-patho-liste__head {
		margin-bottom: 1.5rem;
	}
	.op-patho-liste__title,
	.op-patho-autres__title,
	.op-patho-syst__title,
	.op-patho-cta__title {
		font-size: 1.75rem;
		line-height: 1.15;
	}
	.op-patho-liste__texte,
	.op-patho-autres__intro,
	.op-patho-syst__texte {
		font-size: 1rem;
	}

	.op-patho-autres .op-container {
		padding: 3.125rem 0;
	}
	.op-patho-autres__head {
		margin-bottom: 1.5rem;
	}
	.op-patho-autres__liste {
		column-count: 1;
	}
	.op-patho-autres__nom {
		font-size: 1rem;
	}
	/* Repli : la suite sort du flux, elle ne laisse donc aucune hauteur
	   derrière elle et la section suivante reste à portée immédiate. */
	.op-patho-autres__liste.is-replie .op-patho-autres__nom--suite {
		display: none;
	}
	.op-js .op-patho-autres__plus {
		display: block;
		margin-top: 1.5rem;
	}
	.op-patho-autres__toggle {
		width: 100%;
	}

	/* Articles systémiques : une carte, puis des rangées de ligne — la
	   transformation mobile que la source donne pour ArticleCard. */
	.op-patho-syst .op-container {
		padding: 3.75rem 0 4.375rem;
	}
	.op-patho-syst__head {
		display: block;
		margin-bottom: 1.75rem;
	}
	.op-patho-syst__head-texte {
		max-width: none;
	}
	.op-patho-syst__lien {
		margin-top: 1.25rem;
	}
	.op-patho-syst__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.op-patho-syst__grid .op-artcard:first-child {
		margin-bottom: 2rem;
	}
	.op-patho-syst__grid .op-artcard:nth-child(n + 2) {
		gap: 0.1875rem;
		padding: 0.9375rem 0;
		box-shadow: inset 0 -0.0625rem 0 0 var(--c-rule);
	}
	.op-patho-syst__grid .op-artcard:nth-child(n + 2) .op-artcard__media,
	.op-patho-syst__grid .op-artcard:nth-child(n + 2) .op-artcard__lien {
		display: none;
	}
	.op-patho-syst__grid .op-artcard:nth-child(n + 2) .op-artcard__meta {
		margin-bottom: 0;
	}
	.op-patho-syst__grid .op-artcard:nth-child(n + 2) .op-artcard__titre {
		margin: 0;
		font-size: 1.0625rem;
	}

	.op-patho-cta {
		padding: 3.75rem var(--section-px);
	}
	.op-patho-cta .op-container {
		flex-direction: column;
		align-items: stretch;
		gap: 1.5rem;
	}
	.op-patho-cta__title {
		max-width: none;
	}
	.op-patho-cta__btn .op-btn {
		width: 100%;
	}
}