/*
 * cs-explorer — styles des composants. Mobile-first strict (85,6 % du trafic).
 * Aucune couleur en dur : uniquement des var(--csx-*) définies dans tokens.css.
 * Aucun JavaScript requis.
 */

/* ---------------------------------------------------------------------------
   Socle
   --------------------------------------------------------------------------- */

.csx {
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 auto;
	overflow-x: hidden;
	color: var(--csx-text);
	font-family: var(--csx-font-body);
	font-size: 16px;
	line-height: 1.55;
}

.csx *,
.csx *::before,
.csx *::after {
	box-sizing: inherit;
}

/* Isolation vis-à-vis du thème.
   Divi applique `#left-area ul { list-style-type: disc; padding: 0 0 23px 1em }`,
   et la plupart des thèmes ont un équivalent porté par un identifiant. Un
   sélecteur d'identifiant (1,0,1) l'emporte sur n'importe quelle combinaison de
   classes : `!important` est ici le seul moyen de garantir le rendu, et il est
   strictement limité aux trois propriétés de remise à zéro des listes. Aucune
   autre déclaration du plugin n'utilise `!important`. */
.csx ul,
.csx ol {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.csx li {
	list-style: none !important;
	margin: 0;
}

.csx li::marker {
	content: none;
}

/* Marges de paragraphe du thème neutralisées — sur l'axe VERTICAL seulement.
   Un `margin: 0` remettrait aussi l'axe horizontal à zéro et, à spécificité
   (0,1,1), écraserait le `margin-inline: auto` des paragraphes centrés : la
   boîte se collerait à gauche de son conteneur, laissant un vide à droite. */
.csx p {
	margin-block: 0;
}

.csx a {
	color: var(--csx-text);
	text-decoration: none;
}

.csx a:hover,
.csx a:focus-visible {
	color: var(--csx-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.csx a:focus-visible {
	outline: 2px solid var(--csx-accent);
	outline-offset: 2px;
}

.csx img {
	max-width: 100%;
	height: auto;
}

/* Réserve visuelle : même ratio que l'image absente, zéro CLS, zéro octet.
   Cette règle ne fixe volontairement PAS de largeur : chaque contexte impose la
   sienne (68 px en collection, 56 px dans le mini-Explorer, 100 % en vignette).
   Une largeur ici, à spécificité (0,2,0), écraserait celle des composants. */
.csx .csx-media--empty {
	display: block;
	background: var(--csx-panel-alt);
	border-radius: var(--csx-radius);
}

.csx-count {
	color: var(--csx-muted);
	font-size: 0.8em;
	white-space: nowrap;
}

.csx-kicker {
	margin: 0 0 10px;
	color: var(--csx-accent);
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.csx-kicker--block,
.csx-kicker--season,
.csx-kicker--pin {
	color: var(--csx-accent-2);
}

/* ---------------------------------------------------------------------------
   Fil d'Ariane et entête
   --------------------------------------------------------------------------- */

.csx-breadcrumb {
	max-width: var(--csx-maxw);
	margin: 0 auto;
	padding: 20px 0 0;
	color: var(--csx-muted);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.csx-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* Zone tappable de 44 px conservée jusque dans le fil d'Ariane. */
.csx-breadcrumb a {
	display: inline-block;
	min-height: var(--csx-tap);
	padding: 14px 0;
	line-height: 16px;
	color: var(--csx-muted);
}

.csx-breadcrumb__item--current {
	color: var(--csx-text);
}

.csx-header {
	max-width: 780px;
	margin: 0 auto;
	padding: 34px 0 8px;
	text-align: center;
}

.csx-h1 {
	margin: 0 0 18px;
	font-family: var(--csx-font-head);
	font-weight: 700;
	font-size: clamp(30px, 6vw, 46px);
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--csx-text);
}

.csx-chapo {
	max-width: 620px;
	margin-block: 0;
	margin-inline: auto;
	color: var(--csx-muted);
	font-size: clamp(16px, 2.2vw, 19px);
	line-height: 1.6;
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   Blocs
   --------------------------------------------------------------------------- */

.csx-block {
	max-width: var(--csx-maxw);
	margin: 0 auto;
	padding: var(--csx-block-gap) 0 0;
}

.csx-block__head {
	margin-bottom: 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--csx-border);
}

.csx-block__title {
	margin: 0 0 8px;
	font-family: var(--csx-font-head);
	font-weight: 700;
	font-size: clamp(22px, 3.4vw, 30px);
	line-height: 1.2;
	color: var(--csx-text);
}

.csx-block__intro {
	max-width: var(--csx-measure);
	color: var(--csx-muted);
	font-size: 16px;
}

.csx-more {
	margin: 20px 0 0;
	font-size: 16px;
}

/* Sélecteurs préfixés par .csx : ils doivent l'emporter sur la règle
   générique « .csx a » définie plus haut, sans recourir à !important. */
.csx a.csx-more__link {
	display: inline-block;
	min-height: var(--csx-tap);
	padding: 10px 0;
	color: var(--csx-accent);
	border-bottom: 1px solid var(--csx-border-strong);
}

/* Listes de liens ---------------------------------------------------------- */

.csx-links__item {
	border-top: 1px solid var(--csx-rule);
}

.csx-links__item > a {
	display: block;
	min-height: var(--csx-tap);
	padding: 12px 2px;
	font-size: 17px;
}

.csx-links__sub {
	display: block;
	padding: 0 2px 10px;
	color: var(--csx-muted);
	font-size: 14px;
}

/* Deux colonnes de liens dès 600 px : la liste reste balayable au pouce. */
@media (min-width: 600px) {
	.csx-links--split {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
	}
}

/* Bloc « liste + encadré » -------------------------------------------------- */

.csx-block__body--aside {
	display: grid;
	gap: 26px;
}

@media (min-width: 900px) {
	.csx-block__body--aside {
		grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
		gap: 30px;
		align-items: start;
	}

	.csx-block__body--aside .csx-links--split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.csx-panel {
	padding: 22px 20px 18px;
	background: var(--csx-panel);
	border: 1px solid var(--csx-border-strong);
	border-radius: var(--csx-radius);
}

.csx-panel__badge {
	width: 34px;
	height: 34px;
	margin: 0 0 12px;
	background: var(--csx-accent);
	color: var(--csx-on-accent);
	border-radius: 50%;
	font-family: var(--csx-font-head);
	font-size: 20px;
	line-height: 34px;
	text-align: center;
}

.csx-panel__title {
	margin: 0 0 8px;
	font-family: var(--csx-font-head);
	font-weight: 700;
	font-size: 20px;
}

.csx-panel__intro {
	margin: 0 0 12px;
	color: var(--csx-muted);
	font-size: 15px;
}

.csx-links--panel .csx-links__item {
	border-top-color: var(--csx-border-strong);
}

.csx-links--panel .csx-links__item > a {
	font-size: 16px;
}

/* Bloc « feature » (conserves) --------------------------------------------- */

.csx-block--feature {
	padding-top: var(--csx-block-gap);
}

.csx-block__body--feature {
	display: grid;
	gap: 24px;
}

@media (min-width: 900px) {
	.csx-block__body--feature {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 30px 44px;
		align-items: start;
	}
}

.csx-block--feature .csx-block__title {
	margin-bottom: 12px;
}

.csx-block--feature .csx-block__intro {
	margin-bottom: 24px;
	max-width: 60ch;
}

.csx-feature__img,
.csx-feature__media .csx-media--empty {
	display: block;
	width: 100%;
	height: clamp(200px, 34vw, 360px);
	object-fit: cover;
	border-radius: var(--csx-radius);
}

.csx-subcols {
	display: grid;
	gap: 24px;
}

@media (min-width: 560px) {
	.csx-subcols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 34px;
	}
}

.csx-subcol__title,
.csx-col__title {
	margin: 0 0 10px;
	font-family: var(--csx-font-head);
	font-weight: 700;
	font-size: 19px;
}

/* Colonnes (techniques) ---------------------------------------------------- */

.csx-cols {
	display: grid;
	gap: 26px;
}

@media (min-width: 560px) {
	.csx-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 34px;
	}
}

@media (min-width: 900px) {
	.csx-cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Bandeau saisonnier ------------------------------------------------------- */

.csx-season {
	max-width: none;
	margin-top: 44px;
	/* L'aplat déborde de la colonne de texte sans provoquer de scroll
	   horizontal : le débordement est repris par le padding de .csx-season__inner. */
	margin-right: -22px;
	margin-left: -22px;
	padding: 0;
	background: var(--csx-panel);
	border-top: 1px solid var(--csx-border-strong);
	border-bottom: 1px solid var(--csx-border-strong);
}

.csx-season__inner {
	display: grid;
	gap: 18px;
	max-width: var(--csx-maxw);
	margin: 0 auto;
	/* Respiration horizontale : l'aplat déborde du texte, il ne le touche pas. */
	padding: 26px 22px;
	align-items: center;
}

@media (min-width: 760px) {
	.csx-season__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 20px 40px;
	}
}

.csx-season__title {
	margin: 0 0 8px;
	font-family: var(--csx-font-head);
	font-weight: 700;
	font-size: clamp(21px, 3.2vw, 28px);
}

.csx-season__intro {
	max-width: 48ch;
	color: var(--csx-muted);
	font-size: 16px;
}

.csx-season__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.csx a.csx-btn,
.csx .csx-btn {
	display: inline-block;
	min-height: var(--csx-tap);
	padding: 12px 20px;
	border: 1px solid var(--csx-border-strong);
	border-radius: var(--csx-radius);
	background: var(--csx-card);
	color: var(--csx-text);
	font-size: 16px;
	text-align: center;
}

.csx a.csx-btn:hover,
.csx a.csx-btn:focus-visible {
	border-color: var(--csx-accent);
	color: var(--csx-accent);
	text-decoration: none;
}

.csx a.csx-btn--primary,
.csx .csx-btn--primary {
	background: var(--csx-accent);
	border-color: var(--csx-accent);
	color: var(--csx-on-accent);
	font-weight: 700;
}

.csx a.csx-btn--primary:hover,
.csx a.csx-btn--primary:focus-visible {
	background: var(--csx-accent-hover);
	border-color: var(--csx-accent-hover);
	color: var(--csx-on-accent);
}

/* Vignettes (envies) ------------------------------------------------------- */

.csx-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 16px;
}

@media (min-width: 700px) {
	.csx-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px 18px;
	}
}

.csx-card__link {
	display: block;
}

.csx-card__media {
	display: block;
	width: 100%;
	height: clamp(110px, 26vw, 158px);
	object-fit: cover;
	border-radius: 3px;
}

.csx-card__label {
	display: block;
	padding: 10px 0 0;
	font-family: var(--csx-font-head);
	font-weight: 700;
	font-size: 17px;
}

.csx-card__sub {
	display: block;
	color: var(--csx-muted);
	font-size: 13px;
}

/* Pastilles (ingrédients) -------------------------------------------------- */

.csx-pills {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

@media (min-width: 560px) {
	.csx-pills {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}
}

@media (min-width: 900px) {
	.csx-pills {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.csx-pill__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: var(--csx-tap);
	padding: 11px 14px;
	background: var(--csx-card);
	border: 1px solid var(--csx-border);
	border-radius: var(--csx-radius-pill);
	font-size: 15px;
}

.csx-pill__link:hover,
.csx-pill__link:focus-visible {
	border-color: var(--csx-brand);
	text-decoration: none;
}

/* Collections -------------------------------------------------------------- */

.csx-block__body--collections {
	display: grid;
	gap: 26px;
}

@media (min-width: 900px) {
	.csx-block__body--collections {
		grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
		gap: 30px 40px;
		align-items: start;
	}
}

.csx-collections {
	display: grid;
	gap: 12px;
}

.csx-collection__link {
	display: flex;
	gap: 14px;
	align-items: center;
	min-height: var(--csx-tap);
	padding: 10px;
	background: var(--csx-card);
	border: 1px solid var(--csx-border);
	border-radius: var(--csx-radius);
}

.csx-collection__media {
	flex: 0 0 68px;
	width: 68px;
	max-width: 68px;
	height: 68px;
	object-fit: cover;
	border-radius: 3px;
}

.csx-collection__text {
	flex: 1 1 auto;
	min-width: 0;
}

.csx-collection__label {
	display: block;
	font-family: var(--csx-font-head);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.25;
}

.csx-collection__sub {
	display: block;
	color: var(--csx-muted);
	font-size: 14px;
}

.csx-pin {
	display: block;
	overflow: hidden;
	background: var(--csx-card);
	border: 1px solid var(--csx-border);
	border-radius: var(--csx-radius);
}

.csx-pin__media {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

.csx-pin__text {
	display: block;
	padding: 14px 16px 16px;
}

.csx-pin__label {
	display: block;
	padding-top: 4px;
	font-family: var(--csx-font-head);
	font-weight: 700;
	font-size: 22px;
}

/* Équipement --------------------------------------------------------------- */

.csx-block--equipment {
	margin-top: var(--csx-block-gap);
	padding: 26px 20px 22px;
	background: var(--csx-panel-alt);
	border: 1px solid var(--csx-border);
	border-radius: var(--csx-radius);
}

.csx-block--equipment .csx-block__head {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 18px;
}

.csx-equips {
	display: grid;
	gap: 0 32px;
}

@media (min-width: 700px) {
	.csx-equips {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.csx-equip {
	padding: 10px 0;
	border-top: 1px solid var(--csx-border);
}

.csx-equip__link {
	display: inline-block;
	min-height: var(--csx-tap);
	padding: 11px 0;
	line-height: 22px;
	font-size: 16px;
}

.csx-equip__related {
	display: block;
	color: var(--csx-muted);
	font-size: 14px;
	line-height: 20px;
}

.csx-equip__related a {
	display: inline-block;
	min-height: var(--csx-tap);
	padding: 12px 0;
	line-height: 20px;
	color: var(--csx-accent);
}

.csx-disclosure {
	max-width: 70ch;
	margin: 18px 0 0;
	padding: 12px 14px;
	background: var(--csx-card);
	border: 1px solid var(--csx-border);
	border-radius: 3px;
	color: var(--csx-muted);
	font-size: 14px;
}

/* Écosystème --------------------------------------------------------------- */

.csx-block--ecosystem {
	display: grid;
	gap: 10px 32px;
	margin-top: 34px;
	padding: 18px 0;
	border-top: 1px solid var(--csx-border);
	border-bottom: 1px solid var(--csx-border);
	/* Alignement par le haut, pas au centre : dès que les deux liens passent à
	   la ligne, un libellé centré semble être passé *sous* eux. */
	align-items: start;
}

@media (min-width: 760px) {
	.csx-block--ecosystem {
		grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	}
}

.csx-eco__title {
	/* Même retrait vertical que les liens voisins : les lignes de base s'alignent. */
	margin: 0;
	padding: 11px 0;
	color: var(--csx-muted);
	font-family: var(--csx-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
}

.csx-eco__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 26px;
}

.csx-eco__item > a {
	display: inline-block;
	min-height: var(--csx-tap);
	padding: 11px 0;
	font-size: 16px;
}

/* Newsletter --------------------------------------------------------------- */

.csx-block--newsletter {
	display: grid;
	gap: 20px;
	margin-top: 44px;
	padding: 26px 20px;
	background: var(--csx-panel);
	border: 1px solid var(--csx-border-strong);
	border-radius: var(--csx-radius);
	align-items: center;
}

@media (min-width: 800px) {
	.csx-block--newsletter {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 26px 44px;
	}
}

.csx-block--newsletter .csx-block__title {
	margin-bottom: 8px;
}

.csx-form__label {
	margin: 0 0 8px;
	color: var(--csx-text);
	font-size: 15px;
}

.csx-form__legal {
	margin: 8px 0 0;
	color: var(--csx-muted);
	font-size: 14px;
}

/* Le formulaire MailPoet garde son propre balisage : on ne fait qu'aligner
   les gabarits de champs sur la grille du bloc. */
.csx-form--mailpoet .mailpoet_form,
.csx-form--mailpoet .mailpoet_paragraph {
	margin: 0;
	padding: 0;
}

.csx-form--mailpoet input[type="email"],
.csx-form--mailpoet input[type="text"] {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--csx-border-strong);
	border-radius: 3px;
	background: var(--csx-card);
	color: var(--csx-text);
	font-family: var(--csx-font-body);
	font-size: 16px;
}

.csx-form--mailpoet input[type="submit"],
.csx-form--mailpoet button[type="submit"] {
	min-height: 48px;
	margin-top: 10px;
	padding: 12px 22px;
	border: 0;
	border-radius: 3px;
	background: var(--csx-accent);
	color: var(--csx-on-accent);
	font-family: var(--csx-font-body);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.csx-form--mailpoet input[type="submit"]:hover,
.csx-form--mailpoet button[type="submit"]:hover {
	background: var(--csx-accent-hover);
}

.csx-form__cta {
	margin: 4px 0 0;
}

/* Rappel newsletter de fin de page ----------------------------------------- */

.csx-block--cta {
	display: grid;
	gap: 16px;
	margin-top: 40px;
	padding: 22px 0 0;
	border-top: 1px solid var(--csx-border);
	align-items: center;
}

@media (min-width: 700px) {
	.csx-block--cta {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 20px 32px;
	}
}

.csx-cta__title {
	margin: 0 0 4px;
	font-family: var(--csx-font-head);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.3;
}

.csx-cta__intro {
	max-width: 56ch;
	color: var(--csx-muted);
	font-size: 16px;
}

.csx-cta__action {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Mini-Explorer — tient sous deux écrans mobiles (≈ 520 px à 390 px de large)
   --------------------------------------------------------------------------- */

.csx-mini {
	max-width: 760px;
	margin: 32px auto;
	padding: 20px 16px 18px;
	background: var(--csx-bg);
	border: 1px solid var(--csx-border);
	border-radius: 5px;
	color: var(--csx-text);
	font-family: var(--csx-font-body);
	font-size: 16px;
	line-height: 1.5;
}

.csx-mini__title {
	margin: 0 0 8px;
	font-family: var(--csx-font-head);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
}

.csx-mini__intro {
	margin: 0 0 16px;
	color: var(--csx-muted);
	font-size: 15px;
}

.csx-mini__cards {
	display: grid;
	gap: 10px;
}

@media (min-width: 700px) {
	.csx-mini__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.csx-mini__link {
	display: flex;
	gap: 12px;
	align-items: center;
	min-height: var(--csx-tap);
	padding: 10px;
	background: var(--csx-card);
	border: 1px solid var(--csx-border);
	border-radius: var(--csx-radius);
}

.csx-mini__link--explorer {
	background: var(--csx-panel);
	border-color: var(--csx-border-strong);
}

.csx-mini__media {
	flex: 0 0 56px;
	width: 56px;
	max-width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 3px;
}

.csx-mini__text {
	min-width: 0;
}

.csx-mini__arrow {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--csx-accent);
	color: var(--csx-on-accent);
	border-radius: 3px;
	font-family: var(--csx-font-head);
	font-size: 24px;
}

.csx-mini__label {
	display: block;
	font-family: var(--csx-font-head);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.25;
}

.csx-mini__sub {
	display: block;
	color: var(--csx-muted);
	font-size: 13px;
}

.csx-mini .csx-form {
	margin: 16px 0 0;
	padding: 14px 12px 12px;
	background: var(--csx-panel-alt);
	border-radius: var(--csx-radius);
}

/* ---------------------------------------------------------------------------
   Impression et préférences système
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.csx * {
		transition: none !important;
		animation: none !important;
	}
}

@media print {
	.csx-block--newsletter,
	.csx-mini .csx-form {
		display: none;
	}
}