/* ==========================================================================
   RECHERCHE DU SITE — panneau plein écran.
   Même vocabulaire que les pages : fond cloud, titres Filson Soft à pastille,
   boutons en pilule, bleu foncé pour le texte.
   ========================================================================== */

html.aura-recherche-ouverte,
html.aura-recherche-ouverte body {
	overflow: hidden;
}

.aura-recherche {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	justify-content: center;
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	pointer-events: none;
	transition: opacity 240ms ease;
}

/* `display:flex` ci-dessus l'emporte sur l'attribut `hidden` du navigateur :
   sans cette règle, le panneau fermé restait posé, transparent, par-dessus
   toute la page et avalait les clics — dont celui de la loupe. */
.aura-recherche[hidden] {
	display: none;
}

.aura-recherche.is-open {
	opacity: 1;
	pointer-events: auto;
}

.aura-recherche__fond {
	position: fixed;
	inset: 0;
	background:
		radial-gradient(60% 50% at 88% 8%, rgba(109, 87, 153, .16) 0%, rgba(109, 87, 153, 0) 70%),
		radial-gradient(55% 45% at 6% 96%, rgba(48, 178, 159, .18) 0%, rgba(48, 178, 159, 0) 70%),
		rgba(243, 240, 236, .97);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.aura-recherche__panneau {
	position: relative;
	width: min(100% - 40px, 980px);
	margin-inline: auto;
	padding-block: clamp(28px, 6vh, 72px) 64px;
	translate: 0 14px;
	transition: translate 360ms cubic-bezier(.2, .7, .2, 1);
}

.aura-recherche.is-open .aura-recherche__panneau {
	translate: 0 0;
}

/* --- Tête ----------------------------------------------------------------- */

.aura-recherche__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.aura-recherche__titre {
	margin: 0;
	font-family: var(--ds-font-heading);
	font-size: clamp(28px, 3.47vw, 45px);
	font-weight: var(--ds-weight-medium);
	-webkit-text-stroke: .5px currentColor;
	color: var(--ds-color-bleu-fonce);
}

.aura-recherche__fermer {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 10px;
	padding: 8px 8px 8px 16px;
	border: 1px solid rgba(52, 73, 94, .22);
	border-radius: 999px;
	background: transparent;
	color: var(--ds-color-bleu-fonce);
	font-family: var(--ds-font-heading);
	font-size: var(--ds-text-sm);
	cursor: pointer;
	transition: background 200ms ease, border-color 200ms ease;
}

.aura-recherche__fermer:hover {
	border-color: var(--ds-color-bleu-fonce);
	background: rgba(52, 73, 94, .06);
}

.aura-recherche kbd {
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(52, 73, 94, .1);
	font-family: inherit;
	font-size: 12px;
	line-height: 1.4;
}

/* --- Champ ------------------------------------------------------------------ */

.aura-recherche__form {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: clamp(24px, 4vh, 44px);
	padding: 10px 10px 10px 22px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 18px 50px rgba(52, 73, 94, .12);
}

.aura-recherche__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Loupe dessinée en CSS : un cercle et un manche. */
.aura-recherche__loupe,
.aura-header__recherche-icone {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
}

.aura-recherche__loupe::before,
.aura-header__recherche-icone::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 1px;
	width: 13px;
	height: 13px;
	border: 2.4px solid currentColor;
	border-radius: 50%;
}

.aura-recherche__loupe::after,
.aura-header__recherche-icone::after {
	content: "";
	position: absolute;
	left: 14px;
	top: 14px;
	width: 7px;
	height: 2.4px;
	border-radius: 2px;
	background: currentColor;
	rotate: 45deg;
	transform-origin: 0 50%;
}

.aura-recherche__loupe {
	color: var(--ds-color-violet-care);
}

.aura-recherche__champ {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 0;
	border: 0;
	background: transparent;
	color: var(--ds-color-bleu-fonce);
	font-family: var(--ds-font-heading);
	font-size: clamp(18px, 1.8vw, 24px);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.aura-recherche__champ::placeholder {
	color: rgba(52, 73, 94, .45);
}

.aura-recherche__champ::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.aura-recherche__form:focus-within {
	box-shadow: 0 18px 50px rgba(52, 73, 94, .12), 0 0 0 3px var(--ds-color-violet-care);
}

.aura-recherche__envoyer.aura-recherche__envoyer {
	flex: none;
	border: 0;
	cursor: pointer;
}

.aura-recherche.is-loading .aura-recherche__loupe {
	animation: aura-recherche-pulse 900ms ease-in-out infinite;
}

@keyframes aura-recherche-pulse {
	50% { opacity: .35; }
}

/* --- Corps ------------------------------------------------------------------ */

.aura-recherche__corps {
	margin-top: 34px;
}

.aura-recherche__intertitre {
	margin: 0 0 12px;
	font-family: var(--ds-font-heading);
	font-size: var(--ds-text-sm);
	font-weight: var(--ds-weight-medium);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(52, 73, 94, .7);
}

.aura-recherche__pistes .aura-recherche__intertitre + .aura-recherche__puces {
	margin-bottom: 28px;
}

.aura-recherche__puces {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aura-recherche__puces li {
	margin: 0;
	list-style: none;
}

.aura-recherche__puce {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1px solid rgba(52, 73, 94, .2);
	border-radius: 999px;
	background: #fff;
	color: var(--ds-color-bleu-fonce);
	font-family: var(--ds-font-heading);
	font-size: var(--ds-text-base);
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease, translate 260ms cubic-bezier(.34, 1.56, .64, 1);
}

.aura-recherche__puce:hover,
.aura-recherche__puce:focus-visible {
	border-color: var(--ds-color-vert-dental);
	background: var(--ds-color-vert-dental);
	color: #fff;
	translate: 0 -2px;
	text-decoration: none;
}

/* Hauteur réservée : le texte du statut change sans pousser les résultats. */
.aura-recherche__statut {
	min-height: 1.5em;
	margin: 0 0 14px;
	color: rgba(52, 73, 94, .75);
	font-size: var(--ds-text-sm);
	line-height: 1.5;
}

/* Pendant qu'une nouvelle recherche part, les résultats affichés restent en
   place, simplement estompés, jusqu'à ce que les suivants les remplacent. */
.aura-recherche__resultats {
	transition: opacity 180ms ease;
}

.aura-recherche.is-loading .aura-recherche__resultats {
	opacity: .55;
}

.aura-recherche__groupe + .aura-recherche__groupe {
	margin-top: 30px;
}

.aura-recherche__cartes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.aura-recherche__groupe--meilleur .aura-recherche__cartes {
	grid-template-columns: minmax(0, 1fr);
}

/* --- Carte de résultat ---------------------------------------------------- */

.aura-recherche__carte {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 18px 12px 12px;
	border-radius: 14px;
	background: #fff;
	color: var(--ds-color-bleu-fonce);
	text-decoration: none;
	box-shadow: 0 1px 0 rgba(52, 73, 94, .06);
	transition: box-shadow 220ms ease, translate 220ms ease;
}

.aura-recherche__carte:hover,
.aura-recherche__carte.is-active,
.aura-recherche__carte:focus-visible {
	box-shadow: 0 14px 34px rgba(52, 73, 94, .14);
	translate: 0 -2px;
	text-decoration: none;
	color: var(--ds-color-bleu-fonce);
	outline: none;
}

.aura-recherche__carte.is-active,
.aura-recherche__carte:focus-visible {
	box-shadow: 0 14px 34px rgba(52, 73, 94, .14), 0 0 0 2px var(--ds-color-violet-care);
}

.aura-recherche__carte--meilleure {
	padding: 16px 22px 16px 16px;
	background: var(--ds-color-violet-care);
	color: #fff;
}

.aura-recherche__carte--meilleure:hover,
.aura-recherche__carte--meilleure.is-active,
.aura-recherche__carte--meilleure:focus-visible {
	color: #fff;
}

.aura-recherche__carte--meilleure + .aura-recherche__carte--meilleure {
	background: #fff;
	color: var(--ds-color-bleu-fonce);
}

.aura-recherche__vignette {
	flex: none;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: 10px;
	background: rgba(48, 178, 159, .16);
}

.aura-recherche__carte--meilleure .aura-recherche__vignette {
	width: 88px;
	height: 88px;
	rotate: 2deg;
}

.aura-recherche__vignette img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aura-recherche__vignette--vide {
	position: relative;
	background: rgba(109, 87, 153, .12);
}

.aura-recherche__vignette--vide::before {
	content: "?";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--ds-font-heading);
	font-size: 26px;
	color: var(--ds-color-violet-care);
}

.aura-recherche__texte {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}

.aura-recherche__contexte {
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .7;
}

.aura-recherche__nom {
	font-family: var(--ds-font-heading);
	font-size: var(--ds-text-lg);
	font-weight: var(--ds-weight-medium);
	line-height: 1.25;
}

.aura-recherche__carte--meilleure .aura-recherche__nom {
	font-size: clamp(22px, 2vw, 28px);
}

.aura-recherche__extrait {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: var(--ds-text-sm);
	line-height: 1.45;
	opacity: .85;
}

.aura-recherche mark {
	padding: 0 1px;
	border-radius: 3px;
	background: rgba(245, 235, 115, .85);
	color: inherit;
}

.aura-recherche__carte--meilleure mark {
	background: rgba(245, 235, 115, .95);
	color: var(--ds-color-bleu-fonce);
}

.aura-recherche__fleche {
	flex: none;
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	rotate: 45deg;
	opacity: .5;
	transition: translate 220ms ease, opacity 220ms ease;
}

.aura-recherche__carte:hover .aura-recherche__fleche,
.aura-recherche__carte.is-active .aura-recherche__fleche {
	translate: 3px 0;
	opacity: 1;
}

/* --- Suggestions instantanées --------------------------------------------- */

.aura-recherche__lignes {
	display: grid;
	gap: 2px;
}

.aura-recherche__suggestion {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 14px;
	border-radius: 10px;
	color: var(--ds-color-bleu-fonce);
	text-decoration: none;
}

.aura-recherche__suggestion:hover,
.aura-recherche__suggestion.is-active {
	background: #fff;
	color: var(--ds-color-bleu-fonce);
	text-decoration: none;
}

.aura-recherche__suggestion .aura-recherche__nom {
	font-size: var(--ds-text-base);
}

/* --- Aucun résultat --------------------------------------------------------- */

.aura-recherche__vide {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	padding: 28px;
	border-radius: 14px;
	background: #fff;
	color: var(--ds-color-bleu-fonce);
}

.aura-recherche__vide p {
	margin: 0;
}

/* --- Bouton loupe de l'en-tête -------------------------------------------- */

.aura-header__recherche {
	display: inline-flex;
	flex: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ds-color-bleu-fonce);
	cursor: pointer;
	transition: background 220ms ease, scale 260ms cubic-bezier(.34, 1.56, .64, 1);
}

.aura-header__recherche:hover {
	background: rgba(52, 73, 94, .08);
	scale: 1.06;
}

.aura-header__recherche:focus-visible {
	outline: 3px solid var(--ds-color-bleu-fonce);
	outline-offset: 2px;
}

/* ==========================================================================
   NEUTRALISATION DU THÈME BEAVER BUILDER.
   ==========================================================================
   Le thème habille TOUS les boutons et tous leurs états (fond bleu #2b7bb9,
   bordure, marge interne, coins arrondis, taille de texte, `outline:none` et
   `position:relative` au focus), et tous les `input[type=search]` (fond gris,
   bordure, pleine largeur). Ses règles `button:hover` ou `.fl-page button`
   pèsent plus qu'une simple classe. Chaque état est donc redéfini ici sous les
   identifiants #aura-header et #aura-recherche, qui l'emportent quel que soit
   l'ordre de chargement des feuilles.
   -------------------------------------------------------------------------- */

/* --- Loupe de l'en-tête --------------------------------------------------- */
#aura-header .aura-header__recherche,
#aura-header .aura-header__recherche:hover,
#aura-header .aura-header__recherche:focus,
#aura-header .aura-header__recherche:active {
	display: inline-flex;
	width: 44px;
	height: 44px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	text-shadow: none;
	color: var(--ds-color-bleu-fonce);
	font-size: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	position: relative;
	-webkit-appearance: none;
	appearance: none;
}

#aura-header .aura-header__recherche:hover {
	background: rgba(52, 73, 94, .08);
}

#aura-header .aura-header__recherche:active {
	background: rgba(52, 73, 94, .14);
}

#aura-header .aura-header__recherche:focus {
	outline: none;
}

#aura-header .aura-header__recherche:focus-visible {
	outline: 3px solid var(--ds-color-bleu-fonce);
	outline-offset: 2px;
}

/* --- Bouton « Fermer » ---------------------------------------------------- */
#aura-recherche .aura-recherche__fermer,
#aura-recherche .aura-recherche__fermer:hover,
#aura-recherche .aura-recherche__fermer:focus,
#aura-recherche .aura-recherche__fermer:active {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
	margin: 0;
	padding: 8px 8px 8px 16px;
	border: 1px solid rgba(52, 73, 94, .22);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	text-shadow: none;
	color: var(--ds-color-bleu-fonce);
	font-family: var(--ds-font-heading);
	font-size: var(--ds-text-sm);
	font-weight: 400;
	line-height: 1.2;
	text-transform: none;
	position: relative;
	-webkit-appearance: none;
	appearance: none;
}

#aura-recherche .aura-recherche__fermer:hover {
	border-color: var(--ds-color-bleu-fonce);
	background: rgba(52, 73, 94, .06);
}

#aura-recherche .aura-recherche__fermer:active {
	background: rgba(52, 73, 94, .12);
}

#aura-recherche .aura-recherche__fermer:focus {
	outline: none;
}

#aura-recherche .aura-recherche__fermer:focus-visible {
	outline: 3px solid var(--ds-color-bleu-fonce);
	outline-offset: 2px;
}

/* --- Puces (liens et boutons) -------------------------------------------- */
#aura-recherche .aura-recherche__puce,
#aura-recherche .aura-recherche__puce:visited,
#aura-recherche .aura-recherche__puce:hover,
#aura-recherche .aura-recherche__puce:focus,
#aura-recherche .aura-recherche__puce:active {
	display: inline-flex;
	align-items: center;
	width: auto;
	margin: 0;
	padding: 8px 16px;
	border: 1px solid rgba(52, 73, 94, .2);
	border-radius: 999px;
	background: #fff;
	box-shadow: none;
	text-shadow: none;
	color: var(--ds-color-bleu-fonce);
	font-family: var(--ds-font-heading);
	font-size: var(--ds-text-base);
	font-weight: 400;
	line-height: 1.3;
	text-decoration: none;
	text-transform: none;
	position: relative;
	-webkit-appearance: none;
	appearance: none;
}

#aura-recherche .aura-recherche__puce:hover,
#aura-recherche .aura-recherche__puce:focus-visible {
	border-color: var(--ds-color-vert-dental);
	background: var(--ds-color-vert-dental);
	color: #fff;
}

#aura-recherche .aura-recherche__puce:active {
	border-color: #279383;
	background: #279383;
	color: #fff;
}

#aura-recherche .aura-recherche__puce:focus {
	outline: none;
}

#aura-recherche .aura-recherche__puce:focus-visible {
	outline: 3px solid var(--ds-color-bleu-fonce);
	outline-offset: 2px;
}

/* --- Bouton « Rechercher » -----------------------------------------------
   Il garde l'habillage du CTA du site (.clq-cta) ; on ne retire que ce que le
   thème ajoute par-dessus. */
#aura-recherche .aura-recherche__envoyer,
#aura-recherche .aura-recherche__envoyer:hover,
#aura-recherche .aura-recherche__envoyer:focus,
#aura-recherche .aura-recherche__envoyer:active {
	margin: 0;
	border: 0;
	box-shadow: none;
	text-shadow: none;
	text-transform: none;
	position: relative;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

#aura-recherche .aura-recherche__envoyer:focus {
	outline: none;
}

#aura-recherche .aura-recherche__envoyer:focus-visible {
	outline: 3px solid var(--ds-color-bleu-fonce);
	outline-offset: 3px;
}

/* --- Champ de saisie ------------------------------------------------------ */
#aura-recherche .aura-recherche__champ,
#aura-recherche .aura-recherche__champ:hover,
#aura-recherche .aura-recherche__champ:focus,
#aura-recherche .aura-recherche__champ:active {
	display: block;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 10px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	background-image: none;
	box-shadow: none;
	outline: none;
	color: var(--ds-color-bleu-fonce);
	font-family: var(--ds-font-heading);
	font-size: clamp(18px, 1.8vw, 24px);
	line-height: 1.3;
	transition: none;
	-webkit-appearance: none;
	appearance: none;
}

#aura-recherche .aura-recherche__champ::-webkit-input-placeholder {
	color: rgba(52, 73, 94, .45);
	opacity: 1;
}

#aura-recherche .aura-recherche__champ::-moz-placeholder {
	color: rgba(52, 73, 94, .45);
	opacity: 1;
}

#aura-recherche .aura-recherche__champ::placeholder {
	color: rgba(52, 73, 94, .45);
	opacity: 1;
}

/* --- Liens des résultats : jamais soulignés, dans aucun état ------------- */
#aura-recherche a,
#aura-recherche a:visited,
#aura-recherche a:hover,
#aura-recherche a:focus,
#aura-recherche a:active {
	text-decoration: none;
}

#aura-recherche .aura-recherche__carte:visited,
#aura-recherche .aura-recherche__suggestion:visited {
	color: var(--ds-color-bleu-fonce);
}

#aura-recherche .aura-recherche__carte--meilleure:visited {
	color: #fff;
}

/* La seconde meilleure réponse est sur fond blanc : texte foncé, visité ou non. */
#aura-recherche .aura-recherche__carte--meilleure + .aura-recherche__carte--meilleure,
#aura-recherche .aura-recherche__carte--meilleure + .aura-recherche__carte--meilleure:visited,
#aura-recherche .aura-recherche__carte--meilleure + .aura-recherche__carte--meilleure:hover {
	color: var(--ds-color-bleu-fonce);
}

#aura-recherche .aura-recherche__carte:focus,
#aura-recherche .aura-recherche__suggestion:focus {
	outline: none;
}

#aura-recherche .aura-recherche__suggestion:focus-visible {
	background: #fff;
	box-shadow: 0 0 0 2px var(--ds-color-violet-care);
}

/* --- Écrans étroits --------------------------------------------------------- */

@media (max-width: 768px) {
	.aura-recherche__panneau {
		width: min(100% - 32px, 980px);
		padding-top: 20px;
	}

	.aura-recherche__form {
		padding: 6px 6px 6px 16px;
		border-radius: 18px;
	}

	.aura-recherche__envoyer.aura-recherche__envoyer {
		display: none;
	}

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

	.aura-recherche__fermer span {
		display: none;
	}

	.aura-recherche__carte--meilleure .aura-recherche__vignette {
		width: 64px;
		height: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aura-recherche,
	.aura-recherche__panneau,
	.aura-recherche__carte,
	.aura-recherche__puce,
	.aura-header__recherche {
		transition: none;
	}

	.aura-recherche.is-loading .aura-recherche__loupe {
		animation: none;
	}
}