.recherche_form {
background:var(--blanc);
border-radius:var(--rayon);
box-shadow:var(--ombre);
padding:clamp(18px, 3vw, 32px)
}

.recherche_champs {
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:18px 24px
}

.recherche_champ {
position:relative;
z-index:1
}

.recherche_champ:focus-within { z-index:80 }

*:has(> .suggest_box:not(:empty)) { z-index:80 }

.recherche_form { position:relative }

#home_recherche {
position:relative;
z-index:10
}

.recherche_champ label {
display:flex;
align-items:center;
gap:8px;
text-transform:uppercase;
font-family:var(--fonteTitre);
font-size:14px;
font-weight:600;
letter-spacing:.05em;
color:var(--marine);
margin:0 0 6px
}

.recherche_champ label i { color:var(--or) }

.recherche_champ input {
width:100%;
min-height:48px;
background:var(--papier);
border:2px solid var(--ligne);
border-radius:var(--rayonPetit);
font-size:16px;
font-family:var(--fonteTexte);
color:var(--encre);
transition:border-color var(--transition), background var(--transition);
padding:12px 44px 12px 14px
}

.recherche_champ input:focus {
outline:none;
background:var(--blanc);
border-color:var(--or)
}

.recherche_effacer {
position:absolute;
display:none;
align-items:center;
justify-content:center;
width:30px;
height:30px;
background:var(--ligne);
border:none;
border-radius:50%;
font-size:13px;
color:var(--gris);
cursor:pointer;
transition:background var(--transition), color var(--transition);
right:8px;
bottom:9px
}

.recherche_effacer:hover {
background:var(--marine);
color:var(--blanc)
}

.recherche_champ input:not(:placeholder-shown) ~ .recherche_effacer { display:inline-flex }

.recherche_suggestions {
position:absolute;
z-index:120;
width:100%;
overflow:hidden;
background:var(--blanc);
border-radius:var(--rayonPetit);
box-shadow:var(--ombreHaut);
top:calc(100% + 6px);
left:0
}

.recherche_suggestions:empty { display:none }

.recherche_suggestions a, .recherche_suggestions button, #hero_suggestions a, #hero_suggestions button {
display:block;
width:100%;
background:transparent;
border:none;
text-align:left;
text-decoration:none;
font-family:var(--fonteTexte);
font-size:15px;
color:var(--encre);
cursor:pointer;
transition:background var(--transition);
padding:11px 16px
}

.recherche_suggestions a:hover, .recherche_suggestions button:hover, #hero_suggestions a:hover, #hero_suggestions button:hover { background:var(--papier) }

.recherche_actions {
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:12px;
border-top:1px solid var(--ligne);
margin:22px 0 0;
padding:20px 0 0
}

@media (max-width:700px) {
.recherche_champs {
	grid-template-columns:1fr;
	gap:16px
}

.recherche_actions {
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:10px;
	margin:20px 0 0;
	padding:18px 0 0
}

.recherche_actions .btn {
	width:100%;
	font-size:14px;
	letter-spacing:.02em;
	padding:10px 8px
}

.recherche_actions [type="submit"] {
	grid-column:1 / -1
}
}

*:has(> .suggest_box) { position:relative }

.suggest_box {
position:absolute;
z-index:130;
width:100%;
max-height:300px;
overflow-y:auto;
background:var(--blanc);
border:1px solid var(--ligne);
border-radius:var(--rayonPetit);
box-shadow:var(--ombreHaut);
top:calc(100% + 6px);
left:0;
overscroll-behavior:contain
}

.suggest_box:not(:has(li)) { display:none }

.suggest_box li:focus-visible {
outline:2px solid var(--or);
outline-offset:-2px
}