/**
 * Success Stories — facet sidebar + results.
 *
 * Figma reference: node 152:1028.
 * Tokens taken from the design:
 *   sidebar width  287px   |  gap to content   63px
 *   text           #060F31 |  muted            #6E7281
 *   chip bg        #EBEDFD |  chip text        #4063F0
 *   card bg        #FDFDFD |  card border      #EDF1FE
 *   overlay        rgba(6,15,49,0.25)
 *
 * @package smsmode
 */

.success-filter-layout {
	--sf-text: #060f31;
	--sf-muted: #6e7281;
	--sf-chip-bg: #ebedfd;
	--sf-chip-text: #4063f0;
	--sf-card-bg: #fdfdfd;
	--sf-card-border: #edf1fe;
	--sf-rule: #e6e8f0;

	display: grid;
	grid-template-columns: 287px minmax(0, 1fr);
	gap: 63px;
	align-items: start;
	margin: 0 auto;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	box-sizing: border-box;
}

.success-filter-layout *,
.success-filter-layout *::before,
.success-filter-layout *::after {
	box-sizing: border-box;
}

.success-filter__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.success-filter__title {
	margin: 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 26px;
	color: var(--sf-text);
}

.success-filter__clear {
	padding: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 26px;
	color: var(--sf-text);
	text-decoration: underline;
	background: none;
	border: none;
	cursor: pointer;
}

.success-filter__clear[hidden] {
	display: none;
}

/**
 * Chips des filtres actifs (maquette 157:1606) : listés à plat sous le titre,
 * fond pastel, texte bleu, croix de retrait à droite.
 */
.success-filter__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 20px;
}

.success-filter__chips[hidden] {
	display: none;
}

/* Spécificité (0,2,1) : les kits Elementor stylent `.elementor button`. */
.success-filter-layout button.success-filter__chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 13px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--sf-chip-text);
	text-align: left;
	background-color: var(--sf-chip-bg);
	background-image: none;
	border: none;
	border-radius: 11px;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.success-filter-layout button.success-filter__chip:hover {
	background-color: #dfe3fb;
}

.success-filter-layout button.success-filter__chip:focus-visible {
	outline: 2px solid #7697f1;
	outline-offset: 2px;
}

.success-filter__chip-remove {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' fill='none'%3E%3Cpath d='M1 1 8 8M8 1 1 8' stroke='%234063F0' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
	opacity: 0.85;
	transition: opacity 0.18s ease;
}

.success-filter__chip:hover .success-filter__chip-remove {
	opacity: 1;
}

.success-filter__limit {
	margin: -8px 0 18px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--sf-muted);
}

.success-filter__limit[hidden] {
	display: none;
}

/**
 * Mobile filter bar. Printed by the shortcode on every viewport, revealed only
 * under 780px, where the facets turn into bottom sheets.
 */
.success-filter__bar {
	display: none;
}

.success-facet {
	border-top: 1px solid var(--sf-rule);
}

.success-facet:last-child {
	border-bottom: 1px solid var(--sf-rule);
}

.success-facet__heading {
	margin: 0;
}

.success-facet__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 14px 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 26px;
	color: var(--sf-text);
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
}

.success-facet__chevron {
	flex: 0 0 auto;
	width: 6px;
	height: 10px;
	background: url("../icons/success-chevron.svg") no-repeat center / contain;
	transform: rotate(90deg);
	transition: transform 0.2s ease;
}

.success-facet.is-open .success-facet__chevron {
	transform: rotate(-90deg);
}

.success-facet__panel[hidden] {
	display: none;
}

.success-facet__panel {
	padding-bottom: 16px;
}

.success-facet__search {
	margin-bottom: 10px;
}

.success-facet__search-input {
	width: 100%;
	height: 38px;
	padding: 0 12px 0 34px;
	font-family: inherit;
	font-size: 14px;
	color: var(--sf-text);
	background-color: #ffffff;
	background-image: url("../icons/success-search.svg");
	background-repeat: no-repeat;
	background-position: left 12px center;
	background-size: 10.953px 10.835px;
	border: 1px solid var(--sf-muted);
	border-radius: 11px;
	-webkit-appearance: none;
	appearance: none;
}

.success-facet__search-input::placeholder {
	color: var(--sf-muted);
	opacity: 1;
}

.success-facet__search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.success-facet__search-input:focus-visible {
	outline: none;
	border-color: #7697f1;
	box-shadow: 0 0 0 3px rgba(118, 151, 241, 0.2);
}

/**
 * Spécificité (0,2,1) obligatoire : le kit Elementor pose
 * `.elementor-widget-container ul { padding-left: 16px; … }`, qui pèse (0,1,1)
 * et l'emporte sur une classe seule (0,1,0) — y compris à l'intérieur d'une
 * media query, celle-ci n'ajoutant aucun poids dans la cascade.
 */
.success-filter-layout ul.success-facet__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.success-facet__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.success-facet__item[hidden] {
	display: none;
}

/**
 * Valeur sans issue : son compteur contextuel vaut zéro, la cocher ne
 * remonterait aucune story. Estompée et non cliquable, mais conservée dans la
 * liste pour que celle-ci ne saute pas à chaque sélection.
 */
.success-facet__item.is-empty {
	opacity: 0.4;
}

.success-facet__item.is-empty .success-facet__option {
	cursor: not-allowed;
}

.success-facet__option {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 7px 0;
	cursor: pointer;
}

.success-facet__checkbox {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.success-facet__box {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	background-color: #ffffff;
	border: 1px solid var(--sf-muted);
	border-radius: 5px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.success-facet__checkbox:checked + .success-facet__box {
	background-color: var(--sf-text);
	border-color: var(--sf-text);
	background-image: url("../icons/success-check.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 7px;
}

.success-facet__checkbox:focus-visible + .success-facet__box {
	outline: 2px solid #7697f1;
	outline-offset: 2px;
}

.success-facet__text {
	flex: 1 1 auto;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--sf-text);
}

.success-facet__count {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--sf-muted);
}

.success-facet__empty {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--sf-muted);
}

.success-facet__empty[hidden] {
	display: none;
}

/**
 * Éléments propres aux feuilles mobiles, injectés par le JavaScript.
 *
 * Ils restent dans le DOM au retour en desktop — le JS ne les retire pas. Sans
 * ces deux règles, leur mise en forme n'existant que sous 780px, le pied de
 * feuille réapparaissait en boutons HTML bruts au milieu de la colonne.
 * Le bloc mobile les repasse en `flex`.
 */
.success-facet__actions,
.success-filter__scrim {
	display: none;
}

.success-results {
	position: relative;
	min-height: 260px;
	transition: opacity 0.2s ease;
}

.success-results.is-loading {
	pointer-events: none;
}
.success-results.is-loading .success-card__media,
.success-results.is-loading .success-card__meta,
.success-results.is-loading .success-card__title,
.success-results.is-loading .success-card__client-name,
.success-results.is-loading .success-card__client-desc,
.success-results.is-loading .success-card__desc,
.success-results.is-loading .success-card__avatar,
.success-results.is-loading .success-card__cta {
	background-image: linear-gradient(90deg, #e4e7ef 25%, #f3f5fa 50%, #e4e7ef 75%);
	background-size: 200% 100%;
	animation: success-filter-shimmer 1.5s ease infinite;
	border-radius: 4px;
	color: transparent;
}
.success-results.is-loading .success-card__media {
	border-radius: 13px;
}
.success-results.is-loading .success-card--featured .success-card__media {
	border-radius: 23px;
}
.success-results.is-loading .success-card__avatar {
	border-radius: 50%;
}
.success-results.is-loading .success-card__cta {
	border-radius: 10px;
}
.success-results.is-loading .success-card__image,
.success-results.is-loading .success-card__overlay,
.success-results.is-loading .success-card__logo,
.success-results.is-loading .success-card__avatar img,
.success-results.is-loading .success-card__meta-icon,
.success-results.is-loading .success-card__cta-arrow,
.success-results.is-loading .success-card__title a {
	visibility: hidden;
}
.success-results.is-loading .success-results__pagination {
	opacity: 0.35;
}
@keyframes success-filter-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}
.success-results__featured {
	margin-bottom: 17px;
}
.success-results__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 17px;
}

.success-card {
	position: relative;
	background: var(--sf-card-bg);
	border: 1px solid var(--sf-card-border);
	border-radius: 21px;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.success-card:hover {
	box-shadow: 0 8px 24px rgba(6, 15, 49, 0.08);
	transform: translateY(-2px);
}
.success-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: #f2f4fb;
}
.success-card__media img.success-card__image {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}
.success-card__overlay {
	position: absolute;
	inset: 0;
	background: rgba(6, 15, 49, 0.25);
	pointer-events: none;
}
.success-card__title a {
	color: inherit;
	text-decoration: none;
}
.success-card__title a:hover {
	text-decoration: underline;
}

.success-card:not(.success-card--featured) {
	display: flex;
	flex-direction: column;
	padding: 18px 17px 22px;
}

.success-card:not(.success-card--featured) .success-card__media {
	width: 100%;
	aspect-ratio: 221 / 118;
	border-radius: 13px;
}

@supports not (aspect-ratio: 1) {
	.success-card:not(.success-card--featured) .success-card__media {
		height: 118px;
	}
}

/**
 * Cadrage des logos clients.
 *
 * Un logo n'est pas cadré par sa hauteur ni par sa largeur, mais par l'aire
 * qu'il occupe : à aire constante A, la hauteur d'un logo de rapport r vaut
 * √(A / r). Sans ça, un wordmark 6:1 et un monogramme carré contraints par la
 * même hauteur donnent deux masses visuelles sans commune mesure.
 *
 * PHP range chaque logo dans une famille de rapport (voir
 * smsmode_success_logo_shape). Ici, chaque famille reçoit la hauteur qui
 * égalise l'aire ; la largeur ne sert que de garde-fou pour les rapports
 * extrêmes, où c'est elle qui doit reprendre la main.
 *
 * Les valeurs sans classe retombent sur la famille « horizontal ».
 */
.success-card__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 100px;
	max-height: 50px;
	transform: translate(-50%, -50%);
	object-fit: contain;
	filter: brightness(0) invert(1);
}

/* Carte standard — média 221 x 118. Plafonds en pixels : la largeur du média
   suit la grille, des pourcentages feraient varier le logo d'une colonne à
   l'autre. */
.success-card__logo--tall {
	max-width: 60px;
	max-height: 68px;
}

.success-card__logo--square {
	max-width: 86px;
	max-height: 56px;
}

.success-card__logo--horizontal {
	max-width: 100px;
	max-height: 50px;
}

.success-card__logo--wide {
	max-width: 140px;
	max-height: 34px;
}

/* Carte à la une — média 273px de large, hauteur variable depuis le plafond de
   480px. Plafonds en pixels, comme la carte standard : en pourcentages, la
   taille du logo suivait la hauteur du média, donc la longueur du titre. */
.success-card--featured .success-card__logo--tall {
	max-width: 110px;
	max-height: 145px;
}

.success-card--featured .success-card__logo--square {
	max-width: 145px;
	max-height: 110px;
}

.success-card--featured .success-card__logo--horizontal {
	max-width: 200px;
	max-height: 80px;
}

.success-card--featured .success-card__logo--wide {
	max-width: 240px;
	max-height: 55px;
}
.success-card__body {
	padding-top: 14px;
}
.success-card__meta {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 400;
	color: var(--sf-muted);
}
.success-card__meta-icon {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	background: url("../icons/success-trophy.svg") no-repeat center / contain;
}
.success-card:not(.success-card--featured) .success-card__title {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 21px;
	color: var(--sf-text);
}
.success-card--featured {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 273px;
	gap: 30px;
	align-items: stretch;
	padding: 27px 30px 27px 33px;
}
/* `flex-start` : le bloc client est ancré en haut de la carte. En `center`, il
   flottait au milieu dès que le média était plus haut que le contenu — ce qui
   est devenu la règle depuis le plafond de 480px. */
.success-card--featured .success-card__content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-width: 0;
}

.success-card__client {
	display: flex;
	align-items: center;
	gap: 17px;
	margin-bottom: 22px;
}
/**
 * Pastille client de la carte à la une.
 *
 * Même raisonnement que pour le logo blanc : la hauteur reste fixe et c'est la
 * largeur de la pastille qui suit la famille de rapport du logo, de sorte que
 * l'aire occupée soit constante d'un client à l'autre.
 *
 * `contain`, jamais `cover` : `cover` remplit la boîte en rognant, ce qui
 * convient à une photo mais ampute un logo.
 */
.success-card__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: 52px;
	border-radius: 50%;
}

/**
 * Hauteur imposée, largeur libre : la pastille épouse le logo au lieu de lui
 * dicter un gabarit. Le plafond porte sur l'image et non sur la boîte — posé
 * sur la boîte, il ferait rogner par `overflow` ce qu'il empêche de tenir.
 * Au-delà du plafond, `contain` réduit l'image sans la déformer.
 */
.success-card__avatar img {
	display: block;
	width: auto;
	height: 100%;
	max-width: 120px;
	object-fit: contain;
	border-radius: 50%;
}

.success-card__avatar--tall img {
	max-width: 52px;
}

.success-card__avatar--square img {
	max-width: 96px;
}

.success-card__avatar--horizontal img {
	max-width: 120px;
}

.success-card__avatar--wide img {
	max-width: 150px;
}

/* Nom et description empilés à droite de la pastille. */
.success-card__client-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.success-card__client-name {
	font-size: 17px;
	font-weight: 500;
	line-height: 21px;
	color: var(--sf-text);
}

/* Coupée à deux lignes : la description vient du back-office, sa longueur ne
   doit pas repousser le titre. */
.success-card__client-desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--sf-muted);
}

/**
 * Description, ou extrait en repli. Coupée à trois lignes : la longueur vient
 * du contenu rédactionnel, la carte a une hauteur à tenir.
 */
.success-card__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	max-width: 340px;
	margin: -14px 0 24px;
	overflow: hidden;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--sf-muted);
}
.success-card--featured .success-card__title {
	margin: 0 0 26px;
	max-width: 340px;
	font-size: 20px;
	font-weight: 500;
	line-height: 27px;
	color: var(--sf-text);
}
.success-card__cta-wrap {
	margin: 0;
}
.success-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	font-size: 12px;
	font-weight: 500;
	line-height: 15px;
	color: var(--sf-text);
	text-decoration: none;
	background: var(--sf-chip-bg);
	border-radius: 10px;
	transition: background-color 0.18s ease;
}
.success-card__cta:hover {
	background: #dfe3fb;
}
/**
 * Flèche du bouton (Figma 157:1708) : 9x7, bleu marine.
 *
 * Tracée en SVG intégré plutôt qu'en fichier externe : `icons/success-arrow.svg`
 * porte un `fill="white"` — invisible sur le fond pastel du bouton — et mesure
 * 9,7 x 9,77, un format quasi carré qui déformait la flèche dans une boîte 9x7.
 */
.success-card__cta-arrow {
	width: 9px;
	height: 7px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='7' viewBox='0 0 9 7' fill='none'%3E%3Cpath d='M9 3.49705C9 3.38759 8.91793 3.27812 8.78115 3.25075C8.53495 3.14128 7.68693 2.73078 7.0304 2.04661C6.26444 1.28034 5.71733 0.158306 5.71733 0.130939C5.66261 0.0214722 5.52584 -0.0332613 5.38906 0.0214722C5.27964 0.0762058 5.22492 0.21304 5.27963 0.349874C5.27963 0.404607 5.8541 1.55401 6.67477 2.40238C7.0304 2.75815 7.41337 3.03182 7.769 3.25075H0.246201C0.109422 3.25075 0 3.36022 0 3.49705C0 3.63389 0.109422 3.74335 0.246201 3.74335H7.85106C7.49544 3.96229 7.08511 4.26332 6.70213 4.64646C5.88146 5.46746 5.30699 6.61686 5.30699 6.6716C5.25228 6.78107 5.30699 6.94527 5.41641 7C5.44377 7 5.49848 7 5.52584 7C5.6079 7 5.68997 6.94527 5.74468 6.86317C5.74468 6.86317 6.29179 5.74113 7.05775 4.97486C7.82371 4.20859 8.86322 3.74335 8.86322 3.74335C8.94529 3.71599 9 3.60652 9 3.52442V3.49705Z' fill='%23060F31'/%3E%3C/svg%3E") no-repeat center / contain;
}
.success-card--featured .success-card__media {
	width: 273px;
	height: 100%;
	min-height: 286px;
	border-radius: 23px;
}

/**
 * Plafond de hauteur sur desktop.
 *
 * Sans borne, la carte suit la longueur du titre : la description est déjà
 * coupée à trois lignes, le titre ne l'était pas. On le clampe donc lui aussi,
 * de sorte que le contenu tienne dans les 480px sans jamais être tranché par
 * l'`overflow: hidden` de la carte.
 *
 * Sous 780px la carte repasse en colonne et cette limite n'a plus de sens.
 */
@media (min-width: 781px) {
	.success-card--featured {
		max-height: 480px;
	}

	.success-card--featured .success-card__title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		overflow: hidden;
	}
}

.success-results__empty {
	padding: 64px 24px;
	text-align: center;
	background: #fbfcff;
	border-radius: 21px;
}
.success-results__empty-title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 500;
	color: #060f31;
}
.success-results__empty-text {
	margin: 0 0 22px;
	font-size: 15px;
	color: #6e7281;
}

.success-filter__reset {
	padding: 10px 22px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: #ffffff;
	background: #060f31;
	border: none;
	border-radius: 11px;
	cursor: pointer;
}
.success-filter__reset:hover {
	background: #101c4d;
}

.success-results__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}
.success-results__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 13px;
	font-size: 14px;
	color: #060f31;
	text-decoration: none;
	background: #ffffff;
	border: 1px solid #edf1fe;
	border-radius: 11px;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}
.success-results__pagination .page-numbers:hover {
	border-color: #7697f1;
	background: rgba(118, 151, 241, 0.1);
}
.success-results__pagination .page-numbers.current {
	color: #ffffff;
	background: #060f31;
	border-color: #060f31;
	font-weight: 500;
}
.success-results__pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

@media (max-width: 1100px) {
	.success-filter-layout {
		grid-template-columns: 250px minmax(0, 1fr);
		gap: 36px;
	}

	.success-results__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.success-card--featured {
		grid-template-columns: minmax(0, 1fr) 220px;
		gap: 22px;
		padding: 22px;
	}

	.success-card--featured .success-card__media {
		width: 220px;
	}
}
@media (max-width: 780px) {
	.success-filter-layout {
		/* minmax(0,…) : sans lui, la rangée de pastilles élargirait la page. */
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.success-filter {
		min-width: 0;
	}

	.success-card--featured {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 20px;
	}
	.success-card--featured .success-card__content {
		order: 2;
	}
	.success-card--featured .success-card__media {
		order: 1;
		width: 100%;
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.success-card--featured .success-card__title {
		max-width: none;
		margin-bottom: 18px;
	}

	/* Sous 780px le média de la carte à la une repasse en 16/9, très proche du
	   221/118 de la carte standard : les deux partagent donc le même cadrage. */
	.success-card--featured .success-card__logo--tall {
		max-width: 34%;
		max-height: 46%;
	}

	.success-card--featured .success-card__logo--square {
		max-width: 42%;
		max-height: 38%;
	}

	.success-card--featured .success-card__logo--horizontal {
		max-width: 52%;
		max-height: 26%;
	}

	.success-card--featured .success-card__logo--wide {
		max-width: 68%;
		max-height: 17%;
	}

	/* ------------------------------------------------------------------
	 * Rangée de pastilles
	 *
	 * Une pastille par facette, chacune ouvrant sa propre feuille. Le titre
	 * « Filtres » et son lien de remise à zéro laissent la place à la rangée :
	 * la hauteur du bloc ne dépend plus du nombre de valeurs ACF.
	 * ------------------------------------------------------------------ */

	.success-filter__bar {
		display: block;
	}

	.success-filter__head {
		display: none;
	}

	.success-filter__row {
		display: flex;
		gap: 8px;
		padding-bottom: 2px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.success-filter__row::-webkit-scrollbar {
		display: none;
	}

	/* Spécificité (0,2,1) : les kits Elementor stylent `.elementor button`. */
	.success-filter-layout button.success-filter__pill {
		position: relative;
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		gap: 7px;
		height: 34px;
		padding: 0 14px;
		font-family: inherit;
		font-size: 13px;
		font-weight: 500;
		line-height: 1;
		color: var(--sf-text);
		white-space: nowrap;
		background-color: #ffffff;
		background-image: none;
		border: 1px solid var(--sf-text);
		border-radius: 999px;
		box-shadow: none;
		text-shadow: none;
		scroll-snap-align: start;
		cursor: pointer;
		transition: background-color 0.16s ease, color 0.16s ease;
	}

	.success-filter-layout button.success-filter__pill.is-active {
		color: #ffffff;
		background-color: var(--sf-text);
	}

	.success-filter-layout button.success-filter__pill:focus-visible {
		outline: 2px solid #7697f1;
		outline-offset: 2px;
	}

	.success-filter__pill-count {
		display: inline-grid;
		place-items: center;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		font-size: 11px;
		font-weight: 500;
		line-height: 1;
		color: var(--sf-chip-text);
		background-color: var(--sf-chip-bg);
		border-radius: 999px;
	}

	.success-filter__pill.is-active .success-filter__pill-count {
		color: var(--sf-text);
		background-color: #ffffff;
	}

	.success-filter__pill-count[hidden] {
		display: none;
	}

	.success-filter__summary {
		display: flex;
		align-items: baseline;
		gap: 10px;
		margin: 10px 0 0;
		font-size: 12px;
		line-height: 1.4;
		color: var(--sf-muted);
	}

	.success-filter__summary[hidden] {
		display: none;
	}

	.success-filter-layout button.success-filter__clear--bar {
		font-size: 12px;
		line-height: 1.4;
	}

	.success-filter__limit {
		margin: 10px 0 0;
	}

	/* ------------------------------------------------------------------
	 * Feuilles
	 *
	 * Chaque `.success-facet` devient une feuille ancrée en bas de l'écran.
	 * Le balisage de facets.php ne change pas : seuls le pied d'actions et le
	 * voile sont ajoutés par le JavaScript.
	 *
	 * `position: fixed` suppose qu'aucun ancêtre ne porte de `transform` —
	 * si un effet de mouvement Elementor est activé sur la section, la feuille
	 * se recalerait sur cet ancêtre.
	 * ------------------------------------------------------------------ */

	/* `display: block` : la règle de base le masque pour le desktop. */
	.success-filter__scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		background-color: rgba(6, 15, 49, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.28s ease, visibility 0s linear 0.28s;
	}

	.success-filter__scrim.is-visible {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.28s ease, visibility 0s;
	}

	.success-facet {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1001;
		display: flex;
		flex-direction: column;
		max-height: 82vh;
		max-height: 82dvh;
		background-color: #ffffff;
		border: none;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -8px 30px rgba(6, 15, 49, 0.18);
		transform: translateY(100%);
		visibility: hidden;
		transition: transform 0.28s ease, visibility 0s linear 0.28s;
	}

	.success-facet:last-child {
		border-bottom: none;
	}

	.success-facet.is-sheet-open {
		transform: translateY(0);
		visibility: visible;
		transition: transform 0.28s ease, visibility 0s;
	}

	.success-facet__heading {
		flex: 0 0 auto;
		border-bottom: 1px solid var(--sf-rule);
	}

	/* Poignée : signale que le bloc est une feuille, pas une section de page. */
	.success-facet__heading::before {
		content: "";
		display: block;
		width: 38px;
		height: 4px;
		margin: 9px auto 0;
		background-color: var(--sf-rule);
		border-radius: 999px;
	}

	.success-filter-layout button.success-facet__toggle {
		padding: 14px 20px 16px;
		font-size: 16px;
	}

	/* Le chevron d'accordéon devient la croix de fermeture de la feuille. */
	.success-facet__chevron {
		width: 12px;
		height: 12px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1.6 1.6 10.4 10.4M10.4 1.6 1.6 10.4' fill='none' stroke='%23060F31' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
		transform: none;
	}

	.success-facet.is-open .success-facet__chevron {
		transform: none;
	}

	.success-facet__panel {
		flex: 1 1 auto;
		min-height: 0;
		padding: 14px 20px 6px;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* 16px : en dessous, iOS Safari zoome au focus et ne revient jamais. */
	.success-facet__search-input {
		height: 44px;
		font-size: 16px;
		border-radius: 12px;
	}

	/* `relative` ancre la case masquée en absolu sur son étiquette : sans lui
	   elle se cale sur la feuille et peut élargir le document. */
	.success-facet__option {
		position: relative;
		padding: 10px 0;
	}

	.success-facet__text,
	.success-facet__count {
		font-size: 14px;
	}

	.success-facet__actions {
		flex: 0 0 auto;
		display: flex;
		gap: 10px;
		padding: 12px 20px;
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		background-color: #ffffff;
		border-top: 1px solid var(--sf-rule);
	}

	.success-filter-layout button.success-facet__apply,
	.success-filter-layout button.success-facet__clear {
		height: 46px;
		font-family: inherit;
		font-size: 14px;
		font-weight: 500;
		line-height: 1;
		background-image: none;
		border-radius: 999px;
		box-shadow: none;
		text-shadow: none;
		cursor: pointer;
		transition: background-color 0.18s ease;
	}

	.success-filter-layout button.success-facet__apply {
		flex: 1 1 auto;
		color: #ffffff;
		background-color: var(--sf-text);
		border: none;
	}

	.success-filter-layout button.success-facet__apply:hover {
		background-color: #101c4d;
	}

	.success-filter-layout button.success-facet__clear {
		flex: 0 0 auto;
		padding: 0 18px;
		color: var(--sf-text);
		background-color: #ffffff;
		border: 1px solid var(--sf-text);
	}

	.success-filter-layout button.success-facet__apply:focus-visible,
	.success-filter-layout button.success-facet__clear:focus-visible {
		outline: 2px solid #7697f1;
		outline-offset: 2px;
	}

	/* La feuille couvre l'écran : le corps ne doit plus défiler derrière. */
	.success-filter-sheet-open {
		overflow: hidden;
	}
}

/**
 * La grille reste à deux colonnes jusqu'en bas de la plage tablette : entre 600
 * et 780px, la largeur disponible tient encore deux cartes. Elle ne passe à une
 * colonne qu'en dessous, où une carte occuperait sinon moins de 260px.
 */
@media (max-width: 600px) {
	.success-results__grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.success-card,
	.success-results,
	.success-facet,
	.success-facet__chevron,
	.success-facet__box,
	.success-filter__scrim,
	.success-filter__pill,
	.success-facet__apply,
	.success-facet__clear,
	.success-card__cta,
	.success-results__pagination .page-numbers {
		transition: none !important;
	}
	.success-card:hover {
		transform: none;
	}
	.success-results.is-loading .success-card__media,
	.success-results.is-loading .success-card__meta,
	.success-results.is-loading .success-card__title,
	.success-results.is-loading .success-card__client-name,
	.success-results.is-loading .success-card__client-desc,
	.success-results.is-loading .success-card__desc,
	.success-results.is-loading .success-card__avatar,
	.success-results.is-loading .success-card__cta {
		animation: none !important;
		background-image: none !important;
		background-color: #e4e7ef;
	}
}