.mc-product-search{
	position:relative;
	width:100%;
	max-width:100%;
}

/* Formulaire */
.mc-product-search__form{
	position:relative;
	display:flex;
	align-items:center;
	gap:0;
	width:100%;
	max-width:760px; /* ajuste si besoin */
}

/* Champ */
.mc-product-search__input{
	width:100%;
	height:60px;
	padding:0 170px 0 24px; /* place pour le bouton à droite */
	border:1px solid #d9d9d9;
	border-radius:999px;
	background:#fff;
	font-size:16px;
	line-height:1;
	color:#666;
	box-shadow:none;
	appearance:none;
	-webkit-appearance:none;
}

.mc-product-search__input::placeholder{
	color:#666;
	opacity:1;
}

.mc-product-search__input:focus{
	outline:none;
	border-color:#cfcfcf;
	color:#666;
	box-shadow:none;
}

/* Bouton */
.mc-product-search__button{
	position:absolute;
	right:8px;
	top:50%;
	transform:translateY(-50%);
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:44px;
	min-height:44px;
	padding:0 20px !important;
	margin:0 !important;
	border:0 !important;
	border-radius:999px !important;
	background:#d9d9d9 !important;
	color:#666 !important;
	font-size:16px;
	font-weight:500;
	line-height:1;
	text-decoration:none;
	white-space:nowrap;
	cursor:pointer;
	box-shadow:none !important;
	appearance:none;
	-webkit-appearance:none;
}

/* Hover / focus */
.mc-product-search__button:hover,
.mc-product-search__button:focus{
	background:#cfcfcf !important;
	color:#c89b00 !important;
	border:0 !important;
	box-shadow:none !important;
	text-decoration:none;
}

/* Neutralise les styles Divi du module button */
.mc-product-search__button.et_pb_button{
	padding:0 20px !important;
}

.mc-product-search__button.et_pb_button:after,
.mc-product-search__button:after{
	display:none !important;
	content:none !important;
}

.mc-product-search__button:before{
	display:none !important;
	content:none !important;
}

/* Dropdown autocomplete */
.mc-product-search__dropdown{
	position:absolute;
	z-index:99999;
	top:calc(100% + 8px);
	left:0;
	right:0;
	background:#fff;
	border:1px solid #e6e6e6;
	border-radius:12px;
	box-shadow:0 12px 30px rgba(0,0,0,.08);
	overflow:hidden;
	max-height:420px;
	overflow-y:auto;
	overflow-x:hidden;
	-webkit-overflow-scrolling:touch;
}

/* Liste */
.mc-product-search__list{
	list-style:none !important;
	margin:0 !important;
	padding:0 !important;
}

.mc-product-search__list li{
	list-style:none !important;
	margin:0 !important;
	padding:0 !important;
}

.mc-product-search__list li::before,
.mc-product-search__list li::marker{
	display:none !important;
	content:none !important;
}

/* Lignes */
.mc-product-search__list a{
	display:block;
	padding:16px 20px;
	margin:0 !important;
	text-decoration:none;
	color:#333;
	border-bottom:1px solid #f1f1f1;
	background:#fff;
	transition:background-color .2s ease;
}

.mc-product-search__list a:hover,
.mc-product-search__list a:focus{
	background:#fafafa;
	color:#333;
}

.mc-product-search__list li:last-child a{
	border-bottom:0;
}

/* Titre suggestion */
.mc-product-search__title{
	display:block;
	font-size:15px;
	line-height:1.4;
	font-weight:400;
	color:#333;
}

/* Extrait suggestion */
.mc-product-search__excerpt{
	display:block;
	margin-top:4px;
	font-size:13px;
	line-height:1.45;
	font-weight:400;
	color:#777;
}

/* Aucun résultat */
.mc-product-search__empty{
	padding:16px 20px;
	font-size:14px;
	line-height:1.4;
	color:#777;
	background:#fff;
}

/* Lien tous les résultats */
.mc-product-search__all{
	display:block;
	padding:14px 20px;
	text-decoration:none;
	font-size:14px;
	font-weight:500;
	color:#666;
	background:#fcfcfc;
	border-top:1px solid #f1f1f1;
}

.mc-product-search__all:hover,
.mc-product-search__all:focus{
	background:#f7f7f7;
	color:#666;
}

/* Scrollbar légère */
.mc-product-search__dropdown::-webkit-scrollbar{
	width:10px;
}

.mc-product-search__dropdown::-webkit-scrollbar-track{
	background:#f5f5f5;
	border-radius:10px;
}

.mc-product-search__dropdown::-webkit-scrollbar-thumb{
	background:#d4d4d4;
	border-radius:10px;
	border:2px solid #f5f5f5;
}

.mc-product-search__dropdown::-webkit-scrollbar-thumb:hover{
	background:#c6c6c6;
}

/* Responsive */
@media (max-width:767px){
	.mc-product-search__form{
		max-width:100%;
	}

	.mc-product-search__input{
		height:56px;
		padding:0 140px 0 18px;
		font-size:15px;
	}

	.mc-product-search__button{
		right:6px;
		height:40px;
		padding:0 18px;
		font-size:15px;
	}

	.mc-product-search__dropdown{
		max-height:320px;
	}
}

/* ------------------------------------------------------------------
   Gamme ou référence — l'étiquette de chaque suggestion
   ------------------------------------------------------------------
   Les gammes remontent en tête de liste : elles mènent à un choix, là
   où une référence est un cul-de-sac si ce n'était pas exactement
   celle que l'on cherchait. L'étiquette dit laquelle est laquelle —
   la position seule ne se remarque pas. */

.mc-product-search__ligne {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.mc-product-search__type {
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6E767C;
}

.mc-product-search__list li.is-gamme .mc-product-search__title {
	font-weight: 600;
}

.mc-product-search__list li.is-gamme .mc-product-search__type {
	color: #D5AE05;
}

/* ------------------------------------------------------------------
   LA LISTE DE SUGGESTIONS PASSAIT SOUS LES CARTES
   ------------------------------------------------------------------

   Le z-index de la liste est à 99 999 depuis toujours, et il ne servait
   à rien : un z-index ne classe un élément QUE parmi les siens, à
   l'intérieur du contexte d'empilement où il se trouve. La liste était
   donc bien la première de sa rangée — et la rangée suivante, celle des
   trois cartes du catalogue, se dessinait par-dessus la rangée entière.

   Ce n'est donc pas la liste qu'il faut remonter, c'est la RANGÉE qui
   la contient. Une fois celle-ci positionnée et classée au-dessus de
   ses voisines, la liste retrouve son effet.

   Relevé le 01/10 sur l'accueil, section Produits. */

#page-container .et_pb_row:has(.mc-product-search),
#page-container .et_pb_module:has(.mc-product-search) {
	position: relative;
	z-index: 30;
}

/* Repli pour les navigateurs sans :has() — la recherche elle-même porte
   le contexte, ce qui suffit tant qu'elle n'est pas dans une colonne
   qui en crée un autre. */
.mc-product-search {
	position: relative;
	z-index: 30;
}