/* =====================================================================
   MOTEUR DE RECHERCHE INTERNE - overlay du header
   ---------------------------------------------------------------------
   Charge apres theme.css et custom.css par php/head-css.php, donc sur
   TOUTES les pages du site : l'overlay vit dans le header.

   Les styles de la page de resultats sont dans un fichier SEPARE,
   assets/css/recherche-page.css, charge par la seule page qui en a
   besoin. Ils representaient 45 % du module et bloquaient inutilement le
   rendu des 84 autres pages du site.

   POURQUOI UN FICHIER DEDIE plutot qu'un ajout a theme.css (183 Ko) ou
   custom.css (36 Ko) : le module est autonome, versionne separement par
   filemtime, et supprimable d'un bloc. Le cout d'une requete
   supplementaire en HTTP/2 sur le meme hote est negligeable devant le
   cout de maintenance d'un fichier de 200 Ko de plus.

   TOKENS : ce fichier ne definit AUCUNE couleur en dur. Il declare ses
   propres variables --acr-s-*, toutes derivees de theme.css. Changer la
   charte du site change la recherche, sans toucher a ce fichier.

   ACCESSIBILITE, regles non negociables reprises telles quelles :
    - l'etat actif n'est JAMAIS porte par la seule couleur : fond teinte
      ET filet lateral ;
    - cible tactile de 44 px minimum sur les options (WCAG 2.2) ;
    - focus visible partout, jamais d'outline:none sans remplacement ;
    - prefers-reduced-motion respecte.
   ===================================================================== */

:root{
	--acr-s-bg:            rgba(2,9,23,.92);
	--acr-s-panel:         rgba(12,19,32,.98);
	--acr-s-field:         rgba(255,255,255,.06);
	--acr-s-field-focus:   rgba(255,255,255,.09);
	--acr-s-border:        var(--border-subtle, rgba(5,152,245,.12));
	--acr-s-border-strong: var(--border-glow, rgba(54,227,255,.25));
	--acr-s-accent:        var(--primary-fluo, #36e3ff);
	--acr-s-accent-2:      var(--secondary-medium, #f50538);
	--acr-s-text:          var(--text-primary, #f0f4f8);
	--acr-s-text-soft:     var(--text-secondary, rgba(255,255,255,.8));
	--acr-s-text-mute:     rgba(255,255,255,.55);
	--acr-s-hover:         rgba(5,152,245,.10);
	--acr-s-radius:        .85rem;
	--acr-s-radius-sm:     .55rem;
	--acr-s-shadow:        0 30px 70px rgba(0,0,0,.55);
	--acr-s-tr:            .22s ease;
}

/* =====================================================================
   1. BOUTON D'OUVERTURE
   Herite entierement de .nav-shop (rond 46 px, 38 px sous 576 px) :
   aucune dimension n'est redefinie ici, sinon les deux paliers
   responsive de la navbar seraient a maintenir en double.
   ===================================================================== */
.acr-search-toggle{
	border:0;
	font:inherit;
	cursor:pointer;
	padding:0;
}
.acr-search-toggle .acr-kbd{
	display:none;
}
/* A partir de 1200 px la barre a de la place : on affiche le raccourci
   clavier, qui fait decouvrir la fonction sans ajouter de texte. */
@media(min-width:1200px){
	.acr-search-toggle{
		width:auto;
		min-width:11rem;
		border-radius:50px;
		padding:0 .5rem 0 1rem;
		gap:.65rem;
		justify-content:space-between;
		background:var(--acr-s-field);
		border:1px solid var(--acr-s-border);
	}
	.acr-search-toggle:hover{
		background:var(--acr-s-field-focus);
		border-color:var(--acr-s-border-strong);
		transform:none;
	}
	.acr-search-toggle .acr-search-toggle-label{
		font-size:.82rem;
		font-weight:500;
		color:var(--acr-s-text-mute);
		white-space:nowrap;
	}
	.acr-search-toggle .acr-kbd{
		display:inline-flex;
		align-items:center;
		gap:.15rem;
		padding:.15rem .45rem;
		border:1px solid var(--acr-s-border);
		border-radius:.35rem;
		font-size:.68rem;
		font-weight:600;
		line-height:1.4;
		color:var(--acr-s-text-mute);
		background:rgba(255,255,255,.04);
	}
}
.acr-search-toggle-label{display:none}
@media(min-width:1200px){.acr-search-toggle-label{display:inline}}

/* Le burger masque les icones quand il est ouvert (theme.css:2794) :
   la loupe suit la meme regle pour rester coherente. */
body.menu-open .acr-search-toggle{opacity:0;visibility:hidden;pointer-events:none}

/* =====================================================================
   2. OVERLAY
   Un SEUL composant pour mobile et bureau, ce qui garantit qu'il n'y a
   pas deux comportements a recetter. Le panneau est centre et borne sur
   grand ecran, plein cadre sur petit.
   ===================================================================== */
.acr-search-overlay{
	position:fixed;
	inset:0;
	z-index:2300; /* au-dessus de .full-menu-overlay (2100) et de #mainNav en menu ouvert (2200) */
	display:flex;
	align-items:flex-start;
	justify-content:center;
	padding:max(4.5rem,8vh) 1rem 1rem;
	background:var(--acr-s-bg);
	backdrop-filter:blur(14px) saturate(140%);
	-webkit-backdrop-filter:blur(14px) saturate(140%);
	opacity:0;
	visibility:hidden;
	transition:opacity var(--acr-s-tr),visibility var(--acr-s-tr);
}
.acr-search-overlay.is-open{opacity:1;visibility:visible}

.acr-search-panel{
	width:100%;
	max-width:44rem;
	max-height:100%;
	display:flex;
	flex-direction:column;
	background:var(--acr-s-panel);
	border:1px solid var(--acr-s-border);
	border-radius:var(--acr-s-radius);
	box-shadow:var(--acr-s-shadow);
	overflow:hidden;
	transform:translateY(-14px) scale(.985);
	transition:transform var(--acr-s-tr);
}
.acr-search-overlay.is-open .acr-search-panel{transform:none}

/* Liseré de marque en haut du panneau : rappelle le soulignement des
   liens de navigation, sans ajouter d'element au DOM. */
.acr-search-panel::before{
	content:'';
	display:block;
	height:3px;
	flex:0 0 auto;
	background:linear-gradient(90deg,var(--acr-s-accent),var(--acr-s-accent-2));
}

/* ---- Barre de saisie ---- */
.acr-search-head{
	display:flex;
	align-items:center;
	gap:.6rem;
	padding:.85rem;
	border-bottom:1px solid var(--acr-s-border);
	flex:0 0 auto;
}
.acr-search-form{
	position:relative; /* ancre de la listbox */
	flex:1;
	display:flex;
	align-items:center;
	gap:.5rem;
	min-width:0;
	padding:.35rem .35rem .35rem 1rem;
	background:var(--acr-s-field);
	border:1px solid var(--acr-s-border);
	border-radius:50px;
	transition:border-color var(--acr-s-tr),background var(--acr-s-tr);
}
.acr-search-form:focus-within{
	background:var(--acr-s-field-focus);
	border-color:var(--acr-s-accent);
	box-shadow:0 0 0 3px rgba(54,227,255,.15);
}
.acr-search-form>.fa-magnifying-glass{color:var(--acr-s-accent);font-size:.95rem;flex:0 0 auto}
.acr-search-input{
	flex:1;
	min-width:0;
	background:transparent;
	border:0;
	outline:0;
	padding:.55rem 0;
	font-family:inherit;
	font-size:1rem;
	color:var(--acr-s-text);
}
.acr-search-input::placeholder{color:var(--acr-s-text-mute)}
/* La croix native de Chrome sur input[type=search] est illisible sur
   fond sombre et n'est pas annoncee : on la retire, Echap fait le meme
   travail et il est documente dans l'aide du champ. */
.acr-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

.acr-search-submit,
.acr-search-close{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:38px;
	height:38px;
	border:0;
	border-radius:50%;
	cursor:pointer;
	transition:background var(--acr-s-tr),color var(--acr-s-tr),transform var(--acr-s-tr);
}
.acr-search-submit{background:var(--acr-s-accent);color:#04121c}
.acr-search-submit:hover{filter:brightness(1.1);transform:scale(1.06)}
.acr-search-close{background:rgba(255,255,255,.07);color:var(--acr-s-text-soft);width:44px;height:44px;font-size:1.05rem}
.acr-search-close:hover{background:var(--acr-s-accent-2);color:#fff}

/* ---- Listbox de suggestions ----
   Positionnee en absolu SOUS le champ et dans le formulaire : ancree sur
   l'en-tete, elle passerait sinon sous le bouton de fermeture. */
.acr-search-suggest{
	position:absolute;
	top:calc(100% + .55rem);
	left:-.35rem;
	right:-.35rem;
	z-index:5;
	margin:0;
	padding:.3rem;
	list-style:none;
	max-height:min(58vh,26rem);
	overflow-y:auto;
	overscroll-behavior:contain;
	background:var(--acr-s-panel);
	border:1px solid var(--acr-s-border-strong);
	border-radius:var(--acr-s-radius-sm);
	box-shadow:0 24px 50px rgba(0,0,0,.5);
}
.acr-search-suggest[hidden]{display:none}
.acr-search-suggest li{
	display:flex;
	align-items:flex-start;
	gap:.7rem;
	min-height:44px; /* WCAG 2.2 Target Size */
	padding:.55rem .7rem;
	border-radius:var(--acr-s-radius-sm);
	cursor:pointer;
	/* Filet lateral transparent par defaut : reserver la place ici evite
	   que la ligne ne se decale de 3 px quand elle devient active. */
	box-shadow:inset .2rem 0 0 -.02rem transparent;
	transition:background .12s ease,box-shadow .12s ease;
}
/* DEUX signaux pour l'option active, jamais la couleur seule : fond
   teinte ET filet lateral. C'est la regle d'accessibilite la plus
   souvent oubliee sur les autocompletions. */
.acr-search-suggest li:hover,
.acr-search-suggest li.is-active{
	background:var(--acr-s-hover);
	box-shadow:inset .2rem 0 0 -.02rem var(--acr-s-accent);
}
.acr-suggest-ico{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:2rem;
	height:2rem;
	margin-top:.1rem;
	border-radius:.5rem;
	background:rgba(5,152,245,.12);
	color:var(--acr-s-accent);
	font-size:.85rem;
}
.acr-suggest-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.08rem}
.acr-suggest-type{
	font-size:.68rem;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--acr-s-text-mute);
}
.acr-suggest-titre{
	font-size:.92rem;
	font-weight:600;
	color:var(--acr-s-text);
	line-height:1.3;
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
}
.acr-suggest-extrait{
	font-size:.8rem;
	color:var(--acr-s-text-soft);
	line-height:1.35;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.acr-search-suggest li.is-tous{
	justify-content:center;
	align-items:center;
	gap:.45rem;
	margin-top:.2rem;
	font-size:.85rem;
	font-weight:700;
	color:var(--acr-s-accent);
	background:rgba(5,152,245,.08);
	border-top:1px solid var(--acr-s-border);
	border-radius:var(--acr-s-radius-sm);
}
.acr-search-suggest li.is-vide{
	justify-content:center;
	color:var(--acr-s-text-mute);
	font-size:.88rem;
	cursor:default;
}
.acr-search-suggest li.is-vide:hover{background:none;box-shadow:none}

/* ---- Corps : raccourcis et suggestions tendance ---- */
.acr-search-body{
	flex:1;
	overflow-y:auto;
	padding:1.1rem 1.15rem 1.4rem;
}
.acr-search-body h3{
	margin:0 0 .7rem;
	font-size:.72rem;
	font-weight:800;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--acr-s-accent);
}
.acr-search-body h3:not(:first-child){margin-top:1.5rem}
.acr-search-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.acr-search-tags button{
	font:inherit;
	font-size:.83rem;
	font-weight:500;
	padding:.42rem .85rem;
	border-radius:50px;
	border:1px solid var(--acr-s-border);
	background:rgba(255,255,255,.04);
	color:var(--acr-s-text-soft);
	cursor:pointer;
	transition:all var(--acr-s-tr);
}
.acr-search-tags button:hover{
	background:rgba(5,152,245,.14);
	border-color:var(--acr-s-accent);
	color:var(--acr-s-text);
	transform:translateY(-1px);
}
.acr-search-quick{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem}
@media(min-width:560px){.acr-search-quick{grid-template-columns:repeat(3,1fr)}}
.acr-search-quick a{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:.45rem;
	min-height:5rem;
	padding:.85rem .5rem;
	text-align:center;
	text-decoration:none;
	border:1px solid var(--acr-s-border);
	border-radius:var(--acr-s-radius-sm);
	background:rgba(255,255,255,.03);
	color:var(--acr-s-text-soft);
	transition:all var(--acr-s-tr);
}
.acr-search-quick a:hover{
	background:rgba(5,152,245,.10);
	border-color:var(--acr-s-accent);
	color:var(--acr-s-text);
	transform:translateY(-2px);
}
.acr-search-quick i{font-size:1.25rem;color:var(--acr-s-accent)}
.acr-search-quick span{font-size:.8rem;font-weight:600;line-height:1.25}

/* ---- Paliers ---- */
@media(max-width:575.98px){
	.acr-search-overlay{padding:0}
	.acr-search-panel{max-width:none;height:100%;border:0;border-radius:0}
	.acr-search-panel::before{height:2px}
	.acr-search-head{padding:.7rem}
	.acr-search-suggest{max-height:min(52vh,22rem)}
	.acr-search-body{padding:1rem .9rem 2rem}
}
/* Mobile paysage : l'en-tete doit rester atteignable. */
@media(max-height:520px){
	.acr-search-overlay{padding-top:0}
	.acr-search-body h3:not(:first-child){margin-top:1rem}
	.acr-search-quick a{min-height:3.6rem;padding:.5rem}
	.acr-search-quick i{font-size:1rem}
}

body.acr-search-open{overflow:hidden}

/* =====================================================================
   4. PREFERENCES SYSTEME
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
	.acr-search-overlay,
	.acr-search-panel,
	.acr-search-suggest li,
	.acr-search-quick a,
	.acr-search-tags button{transition:none}
	.acr-search-overlay.is-open .acr-search-panel{transform:none}
	.acr-search-quick a:hover{transform:none}
}
/* Focus visible partout : aucun outline n'est supprime sans remplacement. */
.acr-search-toggle:focus-visible,
.acr-search-submit:focus-visible,
.acr-search-close:focus-visible,
.acr-search-tags button:focus-visible,
.acr-search-quick a:focus-visible{
	outline:3px solid var(--acr-s-accent);
	outline-offset:2px;
}