/* ==========================================================================
   Recherche — Radio Anar
   Complète rubrique.css (à charger avant) : formulaire de recherche et
   surlignage des termes trouvés dans les résultats.
   Utilise les variables --rub-* définies dans rubrique.css.
   ========================================================================== */

/* ---- Conteneur de page ---------------------------------------------------- */
/* Filet de sécurité : si recherche.html ne charge pas aussi article.css,
   .rp-container n'a pas de largeur bornée. Même repère que scheduler.css. */

.rp-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

.rech-layout {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* ---- Formulaire ----------------------------------------------------------- */
/* Une règle globale du site transforme visiblement label/input/bouton en
   cellules de grille avec des largeurs imposées (voir la capture : le
   label et le champ se chevauchent comme des cases fixes). `all: revert`
   efface d'abord tout ce que le CSS global a pu poser sur ces éléments
   (display, largeur, grille, bordures…), puis chaque propriété est
   reconstruite ci-dessous à partir de zéro, via des id (#rech-form,
   #rech-field, #rech-q, #rech-submit) pour rester prioritaire partout,
   y compris dans les media queries en bas de fichier.
   `revert` ne fonctionne que si la règle en conflit n'est pas elle-même
   en !important — si le problème persiste après ce fichier, dis-le-moi :
   il faudra alors soit trouver et corriger cette règle à la source, soit
   remplacer form/label/input/button par des div/span génériques. */

#rech-form {
	all: revert;
	display: block;
	width: 100%;
	max-width: 520px;
	margin: 0 0 36px;
	padding: 0;
	border: none;
	background: none;
	box-sizing: border-box;
}

#rech-form .rech-label {
	all: revert;
	display: block;
	width: 100%;
	margin: 0 0 10px;
	padding: 0;
	font-family: var(--rub-font-mono);
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--rub-muted);
}

#rech-field {
	all: revert;
	display: flex;
	width: 100%;
	gap: 10px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

#rech-q {
	all: revert;
	display: block;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	padding: 12px 16px;
	margin: 0;
	font-family: var(--rub-font-body);
	font-size: 17px;
	color: var(--rub-ink);
	background: var(--rub-paper-raised);
	border: 2px solid var(--rub-ink);
	border-radius: 2px;
	box-sizing: border-box;
	/* neutralise le style natif iOS/Android sur les champs de recherche */
	-webkit-appearance: none;
	appearance: none;
}

#rech-q::placeholder {
	color: var(--rub-muted);
	opacity: 0.75;
}

#rech-q:focus-visible {
	outline: 2px solid var(--rub-accent);
	outline-offset: 2px;
}

#rech-submit {
	all: revert;
	display: block;
	flex-shrink: 0;
	width: auto;
	padding: 12px 22px;
	margin: 0;
	font-family: var(--rub-font-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rub-paper);
	background: var(--rub-accent);
	border: 2px solid var(--rub-ink);
	border-radius: 2px;
	box-shadow: 3px 3px 0 var(--rub-ink);
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#rech-submit:hover,
#rech-submit:focus-visible {
	transform: translate(-1px, -2px);
	box-shadow: 5px 5px 0 var(--rub-ink);
}

#rech-submit:focus-visible {
	outline: 2px solid var(--rub-ink);
	outline-offset: 2px;
}

/* ---- Surlignage des termes trouvés ---------------------------------------- */
/* Non utilisé pour l'instant : le filtre SPIP |surligner n'est pas dans le
   cœur (c'est un filtre de plugin, absent par défaut). Cette classe reste
   prête si tu ajoutes un jour ce filtre, ou ton propre filtre équivalent
   dans mes_fonctions.php, réappliqué avec |surligner{#GET{recherche}}
   sur #TITRE, #DESCRIPTIF et #TEXTE dans recherche.html. */
.spip_surligne {
	background: #e9d46a; /* même jaune que les post-it du tableau */
	padding: 0 2px;
	border-radius: 1px;
}

/* ==========================================================================
   ACCESSIBILITÉ / MOUVEMENT RÉDUIT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	#rech-submit {
		transition: none;
	}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 480px) {
	#rech-field {
		flex-direction: column;
	}

	#rech-submit {
		width: 100%;
	}
}