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

   Parti pris : beaucoup de blanc, une seule couleur de fond (blanc) pour
   les trois sections de contenu, la hiérarchie vient de la typographie,
   de la composition en grille et des effets partagés (effets.css), pas
   d'un changement de couleur de fond entre chaque bloc.
   ═════════════════════════════════════════════════════════════════ */

/* Les classes partagées entre modèles (.op-eyebrow, .op-img-placeholder,
   .op-page-hero et ses variantes) sont définies dans main.css, chargé sur
   toutes les pages. */

/* Tête de section, commune aux blocs de contenu de cette page. Le filet
   décoratif qui suivait le titre est retiré : la hiérarchie d'espacement du
   Design Lock sépare par l'écart, pas par le trait. */
.op-sv-blog__head,
.op-sv-une__head,
.op-sv-faq__head {
	max-width: 34rem;
	margin: 0 0 var(--sp-group);
}

.op-sv-blog__title,
.op-sv-une__title,
.op-sv-faq__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);
}

/* La section « Conseils de prévention » n'est plus rendue : ses styles
   partent avec elle. Le groupe Gutenberg, lui, reste en place. */

/* ── Le dernier article ───────────────────────────────────────────────
   FeaturedArticle : visuel à gauche, métadonnée, titre, chapeau et lien
   affirmé à droite. Un seul groupe, écarts internes serrés. */

.op-sv-une {
	background: var(--c-white);
}

/* 7.5rem au-dessus, 5rem en dessous : l'article en avant et la liste qui
   suit appartiennent au même mouvement de lecture. */
.op-sv-une .op-container {
	padding: 7.5rem 0 5rem;
}

/* Quand « Tous les articles » n'existe pas — un seul article valide — la
   section respire en bas comme une fin de séquence. */
.op-sv-une:has(+ .op-sv-faq) .op-container {
	padding-bottom: 8.125rem;
}

.op-sv-featured {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 4.375rem;
	align-items: center;
}

.op-sv-featured__media {
	display: block;
	height: 26rem;
	border-radius: var(--r-media);
	overflow: hidden;
}

.op-sv-featured__media img,
.op-sv-featured__media .op-img-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Métadonnée commune au mis en avant et aux cartes : catégorie en casse
   naturelle, filet court, date. */
.op-sv-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.625rem;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	line-height: 1.4;
	color: var(--c-gray);
}

.op-sv-meta__sep {
	width: 0.75rem;
	height: 0.0625rem;
	background: var(--c-rule-pale);
}

.op-sv-featured__title {
	margin: 0 0 1rem;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 2.5rem;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.op-sv-featured__title a {
	color: var(--c-navy);
}

.op-sv-featured__title a:hover {
	color: var(--c-navy-footer);
	opacity: 1;
}

.op-sv-featured__excerpt {
	margin: 0 0 1.75rem;
	max-width: 30rem;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--c-gray);
}

.op-sv-featured__more {
	margin: 0;
}

/* ── Tous les articles ────────────────────────────────────────────────
   Grille de trois cartes sur surface pâle. L'écart entre deux articles
   (3.75rem en rangée, 2.5rem en colonne) est nettement plus large que les
   écarts internes à une carte (1.25rem, 0.625rem, 1rem) : c'est ce qui fait
   lire chaque carte comme un groupe. */

.op-sv-blog {
	background: var(--c-blue-pale);
}

.op-sv-blog .op-container {
	padding: 6.875rem 0 8.125rem;
}

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

.op-sv-article {
	min-width: 0;
}

.op-sv-article__media {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	margin-bottom: 1.25rem;
	border-radius: var(--r-media);
	overflow: hidden;
}

.op-sv-article__media img,
.op-sv-article__media .op-img-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.op-sv-article__title {
	margin: 0 0 1rem;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.op-sv-article__title a {
	color: var(--c-navy);
}

.op-sv-article__title a:hover {
	color: var(--c-navy-footer);
	opacity: 1;
}

.op-sv-article__more {
	margin: 0;
}

/* ── Pagination numérotée ─────────────────────────────────────────────
   Navigation standard sur ?paged=N : aucun chargement progressif, aucun
   AJAX. Pastilles de 2.75rem, page courante en plein, flèches d'extrémité
   atténuées quand elles ne mènent nulle part. */

.op-sv-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 4.375rem;
}

.op-sv-pagination__list {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.op-sv-pagination__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--op-tap);
	min-height: var(--op-tap);
	padding: 0 0.5rem;
	border-radius: var(--r-pill);
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 1rem;
	color: var(--c-navy);
	transition: background-color 160ms ease-out;
}

a.op-sv-pagination__num:hover {
	background: var(--c-rule-pale);
	color: var(--c-navy);
	opacity: 1;
}

.op-sv-pagination__num.is-current {
	background: var(--c-navy);
	color: var(--c-white);
	font-weight: 600;
}

.op-sv-pagination__ellipse {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	min-height: var(--op-tap);
	color: var(--c-rule-pale);
}

/* Flèches d'extrémité : chevron du système, la précédente retournée. */
.op-sv-pagination__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--op-tap);
	min-height: var(--op-tap);
	color: var(--c-navy);
}

.op-sv-pagination__arrow::after {
	content: '';
	width: 0.4375rem;
	height: 0.4375rem;
	border-right: 0.09375rem solid currentColor;
	border-top: 0.09375rem solid currentColor;
	transform: rotate(45deg);
}

.op-sv-pagination__arrow--prev::after {
	transform: rotate(45deg) scaleX(-1) scaleY(-1);
}

.op-sv-pagination__arrow.is-disabled {
	color: var(--c-rule-pale);
	opacity: 0.4;
}

/* ── Foire aux questions ──────────────────────────────────────────── */
/* Liste sobre à filets, sans fond de carte : la FAQ se lit comme un
   sommaire de magazine plutôt que comme un bloc encadré. */

.op-sv-faq {
	background: var(--c-white);
}

/* Sans « Tous les articles », la FAQ reprend la surface pâle que cette
   section portait : l'alternance blanc / pâle de la page est préservée. */
.op-sv-faq--pale {
	background: var(--c-blue-pale);
}

.op-sv-faq--pale .op-sv-faq__grid {
	padding: 6.875rem 0;
}

/* Tête de section et liste se répondent en deux colonnes. */
.op-sv-faq__grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 5rem;
	align-items: start;
	padding: var(--sp-section) 0;
}

.op-sv-faq__head {
	margin: 0;
}

.op-sv-faq__list {
	display: flex;
	flex-direction: column;
	max-width: 40rem;
}

.op-sv-faq .op-faq-item {
	border-top: 0.0625rem solid var(--c-rule);
}

.op-sv-faq .op-faq-item:last-child {
	border-bottom: 0.0625rem solid var(--c-rule);
}

.op-sv-faq .op-faq-item__heading {
	margin: 0;
}

.op-sv-faq .op-faq-item__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	width: 100%;
	min-height: var(--op-tap);
	padding: 1.75rem 0;
	background: transparent;
	border: 0;
	text-align: left;
	cursor: pointer;
}

/* Même traitement que l'accordéon de l'accueil : la graisse passe de 500 à
   600 à l'ouverture, l'état n'étant jamais porté par le seul chevron. */
.op-sv-faq .op-faq-item__question {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

.op-sv-faq .op-faq-item__toggle[aria-expanded="true"] .op-faq-item__question {
	font-weight: 600;
}

/* Chevron du système : bas fermé, haut ouvert. */
.op-sv-faq .op-faq-item__sign {
	position: relative;
	flex: 0 0 0.625rem;
	width: 0.625rem;
	height: 0.625rem;
	border: 0;
	border-right: 0.09375rem solid var(--c-navy);
	border-top: 0.09375rem solid var(--c-navy);
	border-radius: 0;
	transform: rotate(135deg) translate(-0.15rem, 0.15rem);
	transition: transform 200ms ease-out;
}

.op-sv-faq .op-faq-item__sign::before,
.op-sv-faq .op-faq-item__sign::after {
	content: none;
}

.op-sv-faq .op-faq-item__toggle[aria-expanded="true"] .op-faq-item__sign {
	transform: rotate(-45deg) translate(-0.15rem, 0.15rem);
}

.op-sv-faq .op-faq-item__panel {
	overflow: hidden;
	transition: height 220ms ease-out;
}

.op-sv-faq .op-faq-item__panel p {
	margin: 0;
	padding: 0 0 1.75rem;
	max-width: 32rem;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--c-gray);
}

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

@media (max-width: 1279px) {
	:root {
		--sp-section: 6.875rem;
	}
		.op-sv-blog__head,
	.op-sv-une__head {
		margin-bottom: 2.5rem;
	}
	.op-sv-une .op-container {
		padding: var(--sp-section) 0 3.75rem;
	}
	.op-sv-featured {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.op-sv-featured__media {
		height: 20rem;
	}
	.op-sv-blog .op-container {
		padding: 5.625rem 0 6.25rem;
	}
	.op-sv-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3.125rem 2.5rem;
	}
	.op-sv-faq__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

/* ── Mobile ───────────────────────────────────────────────────────────
   Composition mobile approuvée : le mis en avant est conservé, la liste des
   articles passe en rangées de ligne — date, titre, chevron — sans visuel
   ni chapeau, puis la même pagination numérotée. */

@media (max-width: 767px) {
		.op-sv-blog__title,
	.op-sv-une__title,
	.op-sv-faq__title {
		font-size: 1.875rem;
	}
		.op-sv-blog__head,
	.op-sv-une__head {
		margin-bottom: 1.5rem;
	}

	.op-sv-une .op-container {
		padding: 3.125rem 0 2.5rem;
	}
	.op-sv-featured {
		gap: 1.75rem;
	}
	.op-sv-featured__media {
		height: 13rem;
	}
	.op-sv-featured__title {
		font-size: 1.75rem;
	}
	.op-sv-featured__excerpt {
		font-size: 1rem;
	}
	.op-sv-featured__more .op-textlink--l {
		font-size: 1rem;
	}

	/* ArticleCard en variante ligne : plus de visuel, plus de chapeau, un
	   chevron en bout de rangée. Le titre reste la cible. */
	.op-sv-blog .op-container {
		padding: 2.5rem 0 3.125rem;
	}
	.op-sv-blog__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.op-sv-article {
		display: flex;
		flex-direction: column;
		min-height: var(--op-tap);
		padding: 0.9375rem 0;
		box-shadow: inset 0 -0.0625rem 0 0 var(--c-rule-pale);
	}
	.op-sv-article__media,
	.op-sv-article__more {
		display: none;
	}
	.op-sv-article .op-sv-meta {
		margin-bottom: 0.1875rem;
	}
	.op-sv-article__title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin: 0;
		font-size: 1.0625rem;
	}
	.op-sv-article__title a::after {
		content: '';
		display: inline-block;
		width: 0.5rem;
		height: 0.5rem;
		margin-left: 0.75rem;
		border-right: 0.09375rem solid currentColor;
		border-top: 0.09375rem solid currentColor;
		transform: rotate(45deg) translateY(-0.125rem);
	}
	.op-sv-pagination {
		margin-top: 2rem;
		gap: 0.25rem;
	}
	.op-sv-pagination__num {
		font-size: 0.9375rem;
	}

	.op-sv-faq__grid {
		padding: var(--sp-section) 0;
	}
	.op-sv-faq .op-faq-item__toggle {
		padding: 1.5rem 0;
		gap: 1.25rem;
	}
	.op-sv-faq .op-faq-item__question {
		font-size: 1.125rem;
	}
	.op-sv-faq .op-faq-item__panel p {
		padding: 0 0 1.5rem;
		font-size: 1rem;
	}
}

/* ── Aperçu éditorial ─────────────────────────────────────────────────
   Un article listable dont le corps n'est pas encore rédigé garde sa carte,
   mais elle ne mène nulle part : ni lien, ni survol, ni curseur de main. Le
   contenu reste exact — titre, visuel, métadonnée — et rien n'est inventé
   pour combler le manque. La carte redevient cliquable dès que l'article est
   écrit. */

.op-sv-featured--apercu .op-sv-featured__media,
.op-sv-article--apercu .op-sv-article__media {
	cursor: default;
}

/* ── Aperçus de visualisation ─────────────────────────────────────────
   Repli temporaire : tant qu'aucun article n'est publiable, les conseils déjà
   présents dans la page occupent les compositions approuvées. Ils n'ont ni
   méta, ni action, ni lien — seulement un visuel, un titre et un texte. La
   composition, elle, ne change pas : mêmes grilles, mêmes surfaces, mêmes
   dimensions. */

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

@media (max-width: 767px) {
	.op-sv-article__texte {
		font-size: 0.9375rem;
	}
}