/**
 * Catalogue « Offrir » — Villa Victoria Spa.
 *
 * Reprend la composition de la démonstration « Project » du thème Serava
 * (filtres, grandes cartes texte / photo) dans la charte Villa Victoria :
 * navy #0F1F34, texte #5A6676, doré #C39A6B, brume #F5F7FA, filets pleins.
 * Toutes les règles sont préfixées .vv-offrir : rien ne fuit hors de la page.
 */

.vv-offrir {
	--vv-navy: #0F1F34;
	--vv-navy-clair: #13253A;
	--vv-texte: #5A6676;
	--vv-or: #C39A6B;
	--vv-brume: #F5F7FA;
	--vv-filet: rgba(15, 31, 52, 0.12);
	--vv-filet-fort: rgba(15, 31, 52, 0.28);

	width: 100%;
}

/* ------------------------------------------------------------- filtres -- */

.vv-offrir__filtres {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 56px;
}

.vv-offrir__filtre {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 17px;
	border: 1px solid var(--vv-filet);
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--vv-navy);
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.vv-offrir__filtre:hover,
.vv-offrir__filtre:focus-visible {
	border-color: var(--vv-navy);
}

.vv-offrir__filtre.is-active {
	border-color: var(--vv-navy);
	background: var(--vv-navy);
	color: #FFFFFF;
}

.vv-offrir__compte {
	display: inline-block;
	min-width: 20px;
	padding: 2px 6px;
	border-radius: 999px;
	background: var(--vv-brume);
	color: var(--vv-texte);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-align: center;
}

.vv-offrir__filtre.is-active .vv-offrir__compte {
	background: rgba(255, 255, 255, 0.16);
	color: #FFFFFF;
}

/* --------------------------------------------------------------- liste -- */

.vv-offrir__liste {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.vv-offrir__carte {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	align-items: stretch;
	border: 1px solid var(--vv-filet);
	background: #FFFFFF;
	overflow: hidden;
	transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.vv-offrir__carte:hover {
	border-color: var(--vv-filet-fort);
	box-shadow: 0 18px 48px rgba(15, 31, 52, 0.08);
}

.vv-offrir__carte[hidden] {
	display: none;
}

.vv-offrir__texte {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 44px 48px;
}

.vv-offrir__univers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	color: var(--vv-or);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.22em;
	line-height: 1.4;
	text-transform: uppercase;
}

.vv-offrir__vedette {
	padding: 4px 12px;
	border: 1px solid var(--vv-or);
	border-radius: 999px;
	color: var(--vv-or);
	font-size: 10px;
	letter-spacing: 0.16em;
}

.vv-offrir__titre {
	margin: 0 0 14px;
	color: var(--vv-navy);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.16;
	text-transform: none;
}

.vv-offrir__titre a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

.vv-offrir__titre a:hover {
	color: var(--vv-or);
}

.vv-offrir__extrait {
	margin: 0 0 26px;
	max-width: 54ch;
	color: var(--vv-texte);
	font-size: 16px;
	line-height: 1.75;
}

/* ------------------------------------------------------------ formules -- */

.vv-offrir__formules,
.vv-offrir__options {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vv-offrir__formules {
	border-top: 1px solid var(--vv-filet);
}

.vv-offrir__formule {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 0;
	border-bottom: 1px solid var(--vv-filet);
}

.vv-offrir__formule-nom {
	flex: 0 0 auto;
	color: var(--vv-navy);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* Le prix se cale à droite ; plus aucun trait de conduite entre le libellé et
   lui : l'œil relie les deux sans aide, et le filet alourdissait la carte. */
.vv-offrir__formule-prix {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--vv-navy);
	font-size: 17px;
	font-weight: 500;
	white-space: nowrap;
}

.vv-offrir__ajout {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 116px;
	padding: 11px 22px;
	border: 1px solid var(--vv-navy);
	background: var(--vv-navy);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.vv-offrir__ajout:hover,
.vv-offrir__ajout:focus-visible {
	border-color: var(--vv-or);
	background: var(--vv-or);
	color: #FFFFFF;
}

.vv-offrir__ajout.is-busy {
	opacity: 0.7;
	pointer-events: none;
}

.vv-offrir__ajout.is-done {
	border-color: var(--vv-or);
	background: #FFFFFF;
	color: var(--vv-or);
}

.vv-offrir__ajout.is-error {
	border-color: #8A2F2F;
	background: #FFFFFF;
	color: #8A2F2F;
}

/* -------------------------------------------------------------- option -- */

.vv-offrir__options {
	margin-top: 14px;
}

.vv-offrir__option {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: var(--vv-brume);
}

.vv-offrir__option-nom {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--vv-texte);
	font-size: 14px;
	line-height: 1.5;
}

.vv-offrir__ajout--discret {
	min-width: 96px;
	padding: 9px 18px;
	border-color: var(--vv-filet-fort);
	background: transparent;
	color: var(--vv-navy);
	font-size: 11px;
}

/* --------------------------------------------------------- sur demande -- */

.vv-offrir__demande {
	padding: 20px 22px;
	border-top: 1px solid var(--vv-filet);
	border-bottom: 1px solid var(--vv-filet);
	background: var(--vv-brume);
}

.vv-offrir__demande-tarif {
	margin: 0 0 6px;
	color: var(--vv-navy);
	font-size: 19px;
	font-weight: 500;
}

.vv-offrir__demande-texte {
	margin: 0 0 16px;
	color: var(--vv-texte);
	font-size: 15px;
	line-height: 1.65;
}

.vv-offrir__tel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 116px;
	padding: 11px 22px;
	border: 1px solid var(--vv-navy);
	background: transparent;
	color: var(--vv-navy);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.vv-offrir__tel:hover,
.vv-offrir__tel:focus-visible {
	background: var(--vv-navy);
	color: #FFFFFF;
}

/* -------------------------------------------------------------- détail -- */

.vv-offrir__detail {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 24px;
	color: var(--vv-navy);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.3s ease;
}

.vv-offrir__detail:hover {
	color: var(--vv-or);
}

.vv-offrir__fleche {
	transition: transform 0.3s ease;
}

.vv-offrir__detail:hover .vv-offrir__fleche {
	transform: translateX(5px);
}

/* -------------------------------------------------------------- visuel -- */

/* La photo ne doit jamais commander la hauteur de la carte : plusieurs
   visuels de la bibliotheque sont au format portrait et etiraient la carte
   sur pres de mille pixels. Le bloc de texte fixe la hauteur, la photo la
   remplit en position absolue. */
.vv-offrir__visuel {
	position: relative;
	min-width: 0;
	min-height: 320px;
	overflow: hidden;
	background: var(--vv-brume);
}

.vv-offrir__visuel a {
	position: absolute;
	inset: 0;
	display: block;
}

.vv-offrir__visuel img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.vv-offrir__carte:hover .vv-offrir__visuel img {
	transform: scale(1.04);
}

/* ---------------------------------------------------- voir plus / note -- */

.vv-offrir__vide {
	margin: 40px 0;
	color: var(--vv-texte);
	font-size: 16px;
	text-align: center;
}

.vv-offrir__plus {
	display: flex;
	justify-content: center;
	margin-top: 44px;
}

.vv-offrir__plus[hidden] {
	display: none;
}

.vv-offrir__plus-btn {
	padding: 16px 40px;
	border: 1px solid var(--vv-navy);
	background: transparent;
	color: var(--vv-navy);
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.vv-offrir__plus-btn:hover,
.vv-offrir__plus-btn:focus-visible {
	background: var(--vv-navy);
	color: #FFFFFF;
}

.vv-offrir__note {
	margin: 40px auto 0;
	max-width: 62ch;
	color: var(--vv-texte);
	font-size: 14px;
	line-height: 1.7;
	text-align: center;
}

.vv-offrir__note a {
	color: var(--vv-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1200px) {

	.vv-offrir__texte {
		padding: 38px 36px;
	}

	.vv-offrir__titre {
		font-size: 27px;
	}
}

@media (max-width: 1024px) {

	.vv-offrir__carte {
		grid-template-columns: minmax(0, 1fr);
	}

	.vv-offrir__visuel {
		order: -1;
		min-height: 0;
		height: 300px;
	}

	.vv-offrir__texte {
		padding: 34px 32px 38px;
	}

	.vv-offrir__detail {
		margin-top: 24px;
		padding-top: 0;
	}
}

@media (max-width: 767px) {

	.vv-offrir__filtres {
		gap: 8px;
		margin-bottom: 40px;
	}

	.vv-offrir__filtre {
		padding: 9px 16px;
		font-size: 11px;
		letter-spacing: 0.1em;
	}

	.vv-offrir__liste {
		gap: 22px;
	}

	.vv-offrir__texte {
		padding: 28px 22px 32px;
	}

	.vv-offrir__titre {
		font-size: 24px;
	}

	.vv-offrir__extrait {
		font-size: 15px;
		margin-bottom: 22px;
	}

	/* Carte en une colonne : le lien de fin de carte se centre. */
	.vv-offrir__detail {
		align-self: center;
		justify-content: center;
		text-align: center;
	}

	/* La hauteur se regle sur le conteneur, jamais sur la photo : fixer
	   l'image a 230 px dans un bloc de 300 px laissait une bande de fond
	   visible sous chaque visuel. */
	.vv-offrir__visuel {
		height: 230px;
	}

	.vv-offrir__formule {
		flex-wrap: wrap;
		gap: 10px 12px;
	}

	.vv-offrir__formule-nom {
		flex: 1 1 auto;
		min-width: 0;
	}

	.vv-offrir__ajout {
		flex: 1 1 100%;
		min-width: 0;
	}

	.vv-offrir__ajout--discret {
		flex: 1 1 100%;
	}

	.vv-offrir__plus-btn {
		width: 100%;
		padding: 16px 20px;
	}
}

@media (max-width: 420px) {

	.vv-offrir__texte {
		padding: 24px 18px 28px;
	}

	.vv-offrir__option {
		padding: 12px 14px;
	}
}

/* ==========================================================================
   Page « Offrir » — corrections sur les widgets du thème
   Les identifiants d'éléments sont posés par vv-offrir/creer-page.php ; ils
   sont stables, contrairement à une classe de conteneur (Elementor ne rend
   pas `css_classes` sur les conteneurs).
   ========================================================================== */

/* Deux boutons côte à côte gardent la même largeur (les deux paires de la
   page), et le thème n'impose plus « Appeler La Villa » en capitales. */
.elementor-element-vvofb1 .btn,
.elementor-element-vvofb2 .btn,
.elementor-element-vvofb3 .btn,
.elementor-element-vvofb4 .btn {
	min-width: 262px;
	justify-content: center;
	text-align: center;
	text-transform: none;
	font-size: 16px;
	letter-spacing: 0.02em;
}

/* Bouton principal sur fond navy : blanc à texte navy, doré au survol
   (le survol navy du thème serait invisible sur un aplat navy). */
.elementor-element-vvofb1 .btn.btn-default,
.elementor-element-vvofb3 .btn.btn-default {
	background-color: #FFFFFF;
	color: #0F1F34;
}

.elementor-element-vvofb1 .btn.btn-default:hover,
.elementor-element-vvofb3 .btn.btn-default:hover {
	background-color: #C39A6B;
	color: #FFFFFF;
}

/* Bouton secondaire sur fond navy : bordé et écrit en blanc. Le thème le
   dessine en navy sur fond clair, illisible ici. */
.elementor-element-vvofb2 .btn.btn-outline,
.elementor-element-vvofb4 .btn.btn-outline {
	border-color: rgba(255, 255, 255, 0.55);
	color: #FFFFFF;
}

.elementor-element-vvofb2 .btn.btn-outline:before,
.elementor-element-vvofb4 .btn.btn-outline:before {
	background-color: #FFFFFF;
}

.elementor-element-vvofb2 .btn.btn-outline:hover,
.elementor-element-vvofb4 .btn.btn-outline:hover {
	border-color: #FFFFFF;
	color: #0F1F34;
}

/* Les trois gestes et les questions fréquentes : filet plein, titres serrés. */
.elementor-element-vvofcomg .pxl-heading .pxl-item--title,
.elementor-element-vvoffaqg .pxl-heading .pxl-item--title {
	text-transform: none;
}

/* Sur mobile, les deux boutons de chaque paire (« Choisir une prestation /
   Appeler la villa » du hero, « Appeler le … / Écrire à la villa » de la
   section sur mesure) font exactement la même largeur. Le `min-width` fixe
   ci-dessus laissait 1,4 px d'écart entre le bouton au numéro et l'autre,
   et un conteneur « centré » empilait deux largeurs différentes. Chaque
   bouton devient donc une part égale de la ligne : côte à côte tant que les
   deux tiennent, sinon pleine largeur l'un sous l'autre. */
@media (max-width: 767px) {

	.elementor-element-vvofheb,
	.elementor-element-vvofsurb {
		width: 100%;
		flex-wrap: wrap;
		align-items: stretch;
	}

	.elementor-element-vvofb1 .pxl-button,
	.elementor-element-vvofb2 .pxl-button,
	.elementor-element-vvofb3 .pxl-button,
	.elementor-element-vvofb4 .pxl-button,
	.elementor-element-vvofb1 .btn,
	.elementor-element-vvofb2 .btn,
	.elementor-element-vvofb3 .btn,
	.elementor-element-vvofb4 .btn {
		min-width: 0;
		width: 100%;
	}
}

/* Tant que les deux tiennent sur la ligne, chacun en prend la moitié exacte.
   (En colonne, sous 576 px, une part égale s'appliquerait à la hauteur : le
   conteneur les étire déjà sur toute la largeur.) */
@media (min-width: 576px) and (max-width: 767px) {

	.elementor-element-vvofb1,
	.elementor-element-vvofb2,
	.elementor-element-vvofb3,
	.elementor-element-vvofb4 {
		flex: 1 1 262px;
		min-width: 0;
	}
}

/* --------------------------------------------------------------- mobile -- */

/* Sept univers empilés sur cinq lignes de pastilles mangeaient tout l'écran :
   sous 768 px la barre de filtres défile horizontalement, sur une seule
   ligne, avec un arrêt sur chaque pastille. */
@media (max-width: 767px) {

	.vv-offrir__filtres {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin-right: -16px;
		margin-left: -16px;
		padding: 2px 16px 10px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.vv-offrir__filtres::-webkit-scrollbar {
		display: none;
	}

	.vv-offrir__filtre {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

/* ----------------------------------------------------------- recherche -- */

/* Un panneau blanc posé sur la brume de la section : sur-titre doré, titre en
   Melodrama, champ avec loupe et bouton, exemples cliquables, puis l'état. */

.vv-offrir__recherche {
	position: relative;
	width: 100%;
	margin: 0 0 48px;
	padding: 48px 48px 42px;
	border: 1px solid var(--vv-filet);
	background: #FFFFFF;
	box-shadow: 0 24px 60px rgba(15, 31, 52, 0.06);
	text-align: center;
}

/* Court filet doré d'accroche, comme un signet, au-dessus du sur-titre. */
.vv-offrir__recherche::before {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	margin: 0 auto 20px;
	background: var(--vv-or);
}

.vv-offrir__recherche-surtitre {
	margin: 0 0 12px;
	color: var(--vv-or);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.22em;
	line-height: 1.4;
	text-transform: uppercase;
}

.vv-offrir__recherche-titre {
	display: block;
	max-width: 760px;
	margin: 0 auto 28px;
	color: var(--vv-navy);
	font-family: "Melodrama", serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.25;
	text-transform: none;
	text-wrap: balance;
	cursor: text;
}

.vv-offrir__recherche-champ {
	position: relative;
	display: flex;
	max-width: 820px;
	margin: 0 auto;
	align-items: stretch;
	border: 1px solid var(--vv-filet-fort);
	background: #FFFFFF;
	text-align: left;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.vv-offrir__recherche-champ:focus-within {
	border-color: var(--vv-or);
	box-shadow: 0 14px 36px rgba(15, 31, 52, 0.08);
}

/* Filet doré qui va et vient pendant la requête. */
.vv-offrir__recherche-champ::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background: var(--vv-or);
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

.vv-offrir__recherche.is-busy .vv-offrir__recherche-champ::after {
	opacity: 1;
	animation: vvOffrirBarre 1.1s ease-in-out infinite;
}

@keyframes vvOffrirBarre {
	0% { transform: scaleX(0); transform-origin: left; }
	50% { transform: scaleX(1); transform-origin: left; }
	51% { transform: scaleX(1); transform-origin: right; }
	100% { transform: scaleX(0); transform-origin: right; }
}

.vv-offrir__recherche-icone {
	flex: 0 0 auto;
	align-self: center;
	width: 20px;
	height: 20px;
	margin-left: 22px;
	color: var(--vv-navy);
}

/* Le thème impose aux input[type=search] height:50px, padding:10px et
   margin-bottom:20px, avec une spécificité (élément + classe) supérieure à
   celle d'une classe seule : le texte saisi se retrouvait collé en haut d'un
   rectangle gonflé par cette marge. D'où le sélecteur à deux classes, la
   hauteur rendue au flex et la marge remise à zéro. */
.vv-offrir__recherche .vv-offrir__recherche-input {
	flex: 1 1 auto;
	align-self: stretch;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 19px 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--vv-navy);
	font-family: inherit;
	font-size: 17px;
	line-height: 1.4;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.vv-offrir__recherche .vv-offrir__recherche-input::placeholder {
	color: var(--vv-texte);
	opacity: 0.75;
}

.vv-offrir__recherche-input::-webkit-search-decoration,
.vv-offrir__recherche-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.vv-offrir__recherche-effacer {
	flex: 0 0 auto;
	align-self: center;
	width: 40px;
	height: 40px;
	margin: 0 2px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--vv-texte);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s ease;
}

.vv-offrir__recherche-effacer:hover,
.vv-offrir__recherche-effacer:focus-visible {
	color: var(--vv-navy);
}

.vv-offrir__recherche-effacer[hidden] {
	display: none;
}

.vv-offrir__recherche-bouton {
	flex: 0 0 auto;
	margin: 6px;
	padding: 0 28px;
	border: 0;
	background: var(--vv-navy);
	color: #FFFFFF;
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.vv-offrir__recherche-bouton:hover,
.vv-offrir__recherche-bouton:focus-visible {
	background: var(--vv-or);
}

.vv-offrir__recherche-exemples {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-width: 900px;
	margin: 20px auto 0;
}

.vv-offrir__recherche-exemples-label {
	flex: 1 0 100%;
	margin: 0 0 4px;
	color: var(--vv-texte);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.vv-offrir__exemple {
	margin: 0;
	padding: 8px 15px;
	border: 1px solid var(--vv-filet);
	border-radius: 999px;
	background: var(--vv-brume);
	color: var(--vv-navy);
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.vv-offrir__exemple::before {
	content: "« ";
	color: var(--vv-or);
}

.vv-offrir__exemple::after {
	content: " »";
	color: var(--vv-or);
}

.vv-offrir__exemple:hover,
.vv-offrir__exemple:focus-visible,
.vv-offrir__exemple.is-active {
	border-color: var(--vv-navy);
	background: var(--vv-navy);
	color: #FFFFFF;
}

.vv-offrir__exemple:hover::before,
.vv-offrir__exemple:hover::after,
.vv-offrir__exemple.is-active::before,
.vv-offrir__exemple.is-active::after {
	color: var(--vv-or);
}

.vv-offrir__recherche-etat {
	margin: 20px 0 0;
	color: var(--vv-navy);
	font-size: 15px;
	line-height: 1.6;
}

.vv-offrir__recherche-etat:empty {
	display: none;
}

.vv-offrir__recherche-etat.is-vide {
	color: var(--vv-texte);
}

/* Lien de sortie de la recherche, sous la ligne d'état. */
.vv-offrir__recherche-retour {
	display: inline-block;
	margin: 12px 0 0;
	padding: 0 0 3px;
	border: 0;
	border-bottom: 1px solid var(--vv-navy);
	background: transparent;
	color: var(--vv-navy);
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.vv-offrir__recherche-retour:hover,
.vv-offrir__recherche-retour:focus-visible {
	border-color: var(--vv-or);
	color: var(--vv-or);
}

.vv-offrir__recherche-retour[hidden] {
	display: none;
}

/* Pendant une recherche, les filtres par univers ne s'appliquent pas : on les estompe. */
.vv-offrir.is-recherche .vv-offrir__filtres {
	opacity: 0.55;
	transition: opacity 0.3s ease;
}

.vv-offrir.is-recherche .vv-offrir__filtres:hover,
.vv-offrir.is-recherche .vv-offrir__filtres:focus-within {
	opacity: 1;
}

/* Les cartes trouvées apparaissent en fondu, l'une après l'autre. */
.vv-offrir__carte.is-apparue {
	animation: vvOffrirApparition 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes vvOffrirApparition {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.vv-offrir__carte.is-apparue {
		animation: none;
	}

	.vv-offrir__recherche.is-busy .vv-offrir__recherche-champ::after {
		animation: none;
		transform: scaleX(1);
	}
}

/* « Pourquoi ce choix » sous la description de chaque carte trouvée. */
.vv-offrir__pourquoi {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin: -8px 0 24px;
	padding: 10px 16px;
	border-left: 2px solid var(--vv-or);
	background: var(--vv-brume);
	color: var(--vv-navy);
	font-size: 14px;
	line-height: 1.6;
}

.vv-offrir__pourquoi-label {
	flex: 0 0 auto;
	color: var(--vv-or);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1.9;
	text-transform: uppercase;
}

.vv-offrir__pourquoi-texte {
	flex: 1 1 200px;
}

.vv-offrir.is-recherche .vv-offrir__plus {
	display: none;
}

@media (max-width: 1024px) {

	.vv-offrir__recherche {
		padding: 40px 32px 34px;
	}
}

@media (max-width: 767px) {

	.vv-offrir__recherche {
		margin-bottom: 32px;
		padding: 28px 20px 26px;
	}

	.vv-offrir__recherche::before {
		margin-bottom: 16px;
	}

	.vv-offrir__recherche-surtitre {
		font-size: 11px;
	}

	.vv-offrir__recherche-titre {
		margin-bottom: 20px;
		font-size: 22px;
	}

	.vv-offrir__recherche-champ {
		flex-wrap: wrap;
	}

	.vv-offrir__recherche-icone {
		margin-left: 16px;
	}

	.vv-offrir__recherche .vv-offrir__recherche-input {
		flex: 1 1 0;
		padding: 15px 12px;
		font-size: 16px;
	}

	.vv-offrir__recherche-bouton {
		flex: 1 0 100%;
		height: 50px;
		margin: 0;
		border-top: 1px solid var(--vv-filet);
	}

	.vv-offrir__recherche-exemples {
		gap: 6px;
		margin-top: 16px;
	}

	.vv-offrir__exemple {
		padding: 7px 12px;
		font-size: 12px;
	}

	.vv-offrir__recherche-etat {
		margin-top: 16px;
		font-size: 14px;
	}

	.vv-offrir__pourquoi {
		margin: -4px 0 20px;
		padding: 9px 14px;
		font-size: 13px;
	}
}

@media (max-width: 420px) {

	.vv-offrir__recherche {
		padding: 26px 16px 22px;
	}
}