/*
 * Recherche animée du header mobile CLECOD.
 *
 * Au toucher de la loupe, le header se transforme : la loupe glisse à
 * gauche à la place du logo, un rectangle se dessine autour du champ,
 * puis le texte d'aide défile de la droite vers la gauche. Le champ est
 * éditable immédiatement et envoie la recherche WordPress (name="s").
 * Actif uniquement là où le header mobile du thème est affiché (≤ 1200px).
 */

@media (max-width: 1200px) {

	.clecod-msearch {
		position: absolute;
		inset: 0;
		z-index: 9;
		display: none;
		align-items: center;
		gap: 12px;
		margin: 0;
		padding: 0 16px;
		background: var(--qode-main-color, #e20100);
	}

	/* Le formulaire couvre exactement la barre visible du header mobile. */
	#qodef-page-mobile-header-inner {
		position: relative;
	}

	#qodef-page-mobile-header.clecod-msearch-open .clecod-msearch {
		display: flex;
	}

	/* La loupe arrive de sa position d'origine (calculée en JS) vers la
	   place du logo. */
	.clecod-msearch__go {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		color: #fff;
		cursor: pointer;
		flex-shrink: 0;
		animation: clecod-msearch-slide 0.45s cubic-bezier(0.32, 0.72, 0, 1) both;
	}

	.clecod-msearch__go svg {
		width: 19px;
		height: 19px;
		fill: currentColor;
	}

	@keyframes clecod-msearch-slide {
		from { transform: translateX(var(--msearch-dx, 160px)); }
		to { transform: none; }
	}

	/* Le champ, entouré du rectangle qui se dessine. */
	.clecod-msearch__field {
		position: relative;
		display: flex;
		align-items: center;
		height: 46px;
		flex: 1;
		min-width: 0;
	}

	.clecod-msearch__rect {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.clecod-msearch__rect rect {
		fill: none;
		stroke: rgba(255, 255, 255, 0.95);
		stroke-width: 1.5;
		vector-effect: non-scaling-stroke;
		stroke-dasharray: 400;
		stroke-dashoffset: 400;
		animation: clecod-msearch-draw 0.65s ease-out 0.38s forwards;
	}

	@keyframes clecod-msearch-draw {
		to { stroke-dashoffset: 0; }
	}

	/* Le thème borde ses inputs : ici le contour est le rectangle animé. */
	.clecod-msearch__input {
		position: relative;
		z-index: 2;
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 14px !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		color: #fff !important;
		caret-color: #fff;
		font-size: 16px !important;
		line-height: normal;
		outline: 0;
		box-shadow: none !important;
		-webkit-appearance: none;
		appearance: none;
	}

	.clecod-msearch__input::-webkit-search-cancel-button {
		display: none;
	}

	/* Le rectangle dessiné sert de contour : pas d'outline de focus en plus. */
	.clecod-msearch__input:focus,
	.clecod-msearch__input:focus-visible {
		outline: 0 !important;
		box-shadow: none !important;
	}

	/* Pas de placeholder natif : le texte défilant joue ce rôle (l'intitulé
	   complet reste porté par aria-label). */
	.clecod-msearch__input::placeholder {
		color: transparent;
		opacity: 0;
	}

	/* Texte d'aide : entre par la droite puis défile vers la gauche. */
	.clecod-msearch__ghost {
		position: absolute;
		inset: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		padding: 0 14px;
		overflow: hidden;
		pointer-events: none;
	}

	.clecod-msearch__ghost span {
		color: rgba(255, 255, 255, 0.75);
		font-size: 13px;
		letter-spacing: 0.01em;
		white-space: nowrap;
		transform: translateX(110%);
		animation: clecod-msearch-ghost 11s linear 1s infinite;
	}

	@keyframes clecod-msearch-ghost {
		from { transform: translateX(105%); }
		to { transform: translateX(-105%); }
	}

	.clecod-msearch.has-value .clecod-msearch__ghost {
		display: none;
	}

	.clecod-msearch__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		color: #fff;
		cursor: pointer;
		flex-shrink: 0;
		opacity: 0;
		animation: clecod-msearch-fade 0.3s ease-out 0.5s forwards;
	}

	.clecod-msearch__close svg {
		width: 15px;
		height: 15px;
		fill: currentColor;
	}

	@keyframes clecod-msearch-fade {
		to { opacity: 1; }
	}

	/* Le reste du header s'efface pendant la recherche. */
	#qodef-page-mobile-header.clecod-msearch-open .qodef-mobile-header-logo-link,
	#qodef-page-mobile-header.clecod-msearch-open .qodef-widget-holder,
	#qodef-page-mobile-header.clecod-msearch-open .qodef-mobile-header-opener {
		opacity: 0;
		transition: opacity 0.2s ease-out;
		pointer-events: none;
	}
}

@media (min-width: 1200.02px) {
	.clecod-msearch {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.clecod-msearch__go,
	.clecod-msearch__close {
		animation-duration: 0.01s;
		animation-delay: 0s;
	}

	.clecod-msearch__rect rect {
		animation-duration: 0.01s;
		animation-delay: 0s;
	}

	.clecod-msearch__ghost span {
		animation: none;
		transform: none;
	}
}