/**
 * PMP Search — styles publics.
 *
 * Les variables CSS permettent d'ajuster l'apparence depuis le thème :
 * .pmp-search { --pmp-search-accent: #c00; }
 */

.pmp-search {
	--pmp-search-panel-width: 260px;
	--pmp-search-bg: #fff;
	--pmp-search-text: #1e1e1e;
	--pmp-search-border: rgba(0, 0, 0, 0.15);
	--pmp-search-button-bg: currentColor;
	--pmp-search-button-bg-hover: currentColor;
	--pmp-search-button-color: #fff;
	--pmp-search-button-width: 42px;
	--pmp-search-radius: 4px;
	--pmp-search-gap: 8px;

	position: relative;
	display: inline-flex;
	align-items: center;
}

/* Bouton loupe ---------------------------------------------------------- */

.pmp-search .pmp-search__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	padding: 6px;
	margin: 0;
	border: 0;
	border-radius: var(--pmp-search-radius);
	background: none;
	background-color: transparent;
	color: inherit;
	font: inherit;
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.pmp-search .pmp-search__toggle:hover,
.pmp-search .pmp-search__toggle:focus-visible {
	background: none;
	background-color: transparent;
	color: inherit;
	opacity: 0.75;
}

.pmp-search__icon {
	display: block;
	width: 20px;
	height: 20px;
	flex: none;
}

/* La bascule loupe/croix ne concerne QUE le bouton du menu : sans cette
   restriction, elle masque aussi la loupe du bouton de soumission, qui
   n'apparaît que panneau ouvert (bouton vide à l'écran). */

.pmp-search .pmp-search__toggle .pmp-search__icon--close,
.pmp-search.is-open .pmp-search__toggle .pmp-search__icon--search {
	display: none;
}

.pmp-search.is-open .pmp-search__toggle .pmp-search__icon--close {
	display: block;
}

/* Panneau --------------------------------------------------------------- */

.pmp-search__panel {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 999;
	margin-top: var(--pmp-search-gap);
	padding: var(--pmp-search-gap);
	width: var(--pmp-search-panel-width);
	max-width: calc(100vw - 32px);
	background: var(--pmp-search-bg);
	color: var(--pmp-search-text);
	border: 1px solid var(--pmp-search-border);
	border-radius: var(--pmp-search-radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.pmp-search--left .pmp-search__panel {
	right: auto;
	left: 0;
}

.pmp-search.is-open .pmp-search__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Formulaire ------------------------------------------------------------ */

/* Champ et bouton forment un seul bloc : la bordure est portée par le
   formulaire, pas par ses enfants. Sélecteurs doublés pour passer devant
   les styles de boutons/champs des thèmes. */

.pmp-search .pmp-search__form {
	display: flex;
	align-items: stretch;
	margin: 0;
	background: var(--pmp-search-bg);
	border: 1px solid var(--pmp-search-border);
	border-radius: var(--pmp-search-radius);
	overflow: hidden;
}

.pmp-search .pmp-search__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 10px 12px;
	font: inherit;
	font-size: 15px;
	line-height: 1.3;
	color: var(--pmp-search-text);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

/* Pas d'état focus sur le champ (demandé). */
.pmp-search .pmp-search__input:focus,
.pmp-search .pmp-search__input:focus-visible {
	outline: 0;
	border: 0;
	box-shadow: none;
}

/* Croix native WebKit du type=search. */
.pmp-search .pmp-search__input::-webkit-search-cancel-button,
.pmp-search .pmp-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* Par défaut le bouton reste discret et prend la couleur du texte : il
   s'intègre à n'importe quel thème. Une couleur d'accent définie dans les
   réglages le bascule en bouton plein (voir --solid plus bas). */

.pmp-search .pmp-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--pmp-search-button-width);
	min-width: var(--pmp-search-button-width);
	height: auto;
	padding: 0;
	margin: 0;
	border: 0;
	border-left: 1px solid var(--pmp-search-border);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pmp-search .pmp-search__submit:hover,
.pmp-search .pmp-search__submit:focus,
.pmp-search .pmp-search__submit:focus-visible {
	background: rgba(0, 0, 0, 0.06);
	color: inherit;
	opacity: 1;
}

/* Bouton plein, activé dès qu'une couleur est choisie dans les réglages. */

.pmp-search--solid .pmp-search__submit {
	border-left: 0;
	background: var(--pmp-search-button-bg);
	color: var(--pmp-search-button-color);
}

.pmp-search--solid .pmp-search__submit:hover,
.pmp-search--solid .pmp-search__submit:focus,
.pmp-search--solid .pmp-search__submit:focus-visible {
	background: var(--pmp-search-button-bg-hover);
	color: var(--pmp-search-button-color);
}

.pmp-search .pmp-search__submit .pmp-search__icon {
	width: 18px;
	height: 18px;
	stroke: currentColor;
}

/* Accessibilité --------------------------------------------------------- */

.pmp-search .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Mobile ---------------------------------------------------------------- */

/* 980 px : bascule du menu en version mobile (breakpoint de Divi). L'icône
   se retrouve alors collée aux éléments voisins, d'où la marge. */
@media (max-width: 980px) {
	.pmp-search {
		margin-left: 20px;
	}
}

@media (max-width: 600px) {
	.pmp-search__panel {
		position: fixed;
		top: auto;
		left: 16px;
		right: 16px;
		width: auto;
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pmp-search__panel {
		transition: none;
	}
}