/* --------------------------------------------------------------------------
   [soform_recherche] — barre « Trouver ma formation ».

   Le dessin reprend au pixel la carte du hero telle qu'elle est décrite dans
   .build/gen_head.py (carte blanche 16 px de rayon, filet vertical de 40 px,
   bouton encre 20/36). Les valeurs sont des jetons Blocksy : changer la palette
   dans le Customizer restyle la barre comme le reste du site.
   -------------------------------------------------------------------------- */

/* Rythme d'espacement — un seul jeu de valeurs pour toute la barre.

   L'ancienne version en avait quatre sans rapport entre elles (carte 6, champ
   18/20/18/28, bouton 20/36) : le premier libellé était à 34 px du bord de la
   carte, le bouton à 6 px de l'autre, et il flottait dans un puits de 90 px
   sans jamais toucher le haut ni le bas. C'est ce déséquilibre qui se lisait.

   Désormais : la carte a un retrait unique, les champs un padding symétrique,
   le premier reprend le retrait de bord, et le bouton occupe TOUTE la hauteur
   utile — la carte devient un bloc plein au lieu d'un cadre avec un bouton
   posé dedans. Les paliers adaptatifs ne touchent que ces variables. */

.soform-recherche {
	--soform-encre: var(--theme-palette-color-1, #17120f);
	--soform-accent: var(--theme-palette-color-2, #6b5a4c);
	--soform-texte-2: var(--theme-palette-color-4, #8c7f74);
	--soform-page: var(--theme-palette-color-8, #f6f0ea);
	--soform-carte: #ffffff;
	--soform-filet: rgba(23, 18, 15, 0.12);

	--soform-recherche-retrait: 8px;
	--soform-recherche-champ-y: 18px;
	--soform-recherche-champ-x: 24px;
	/* Retrait du premier libellé et du libellé du bouton : les deux extrémités
	   de la barre respirent de la même façon. */
	--soform-recherche-bord: 28px;

	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	/* `stretch` et non `center` : c'est ce qui laisse le bouton prendre la
	   hauteur des champs. */
	align-items: stretch;
	gap: 0;
	width: var(--soform-recherche-largeur, 100%);
	margin: var(--soform-recherche-marge, 72px) auto 0;
	padding: var(--soform-recherche-retrait);
	border-radius: 16px;
	background-color: var(--soform-carte);
	box-shadow: 0 16px 40px rgba(23, 18, 15, 0.12);
	text-align: left;
}

/* Champs ----------------------------------------------------------------- */

/* `flex: 1 1 0` et non une base en pourcentage : la barre porte deux combos
   dans le hero et trois sur le catalogue, et les champs doivent se partager
   la place à parts égales dans les deux cas. */
.soform-recherche__champ {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	margin: 0;
	padding: var(--soform-recherche-champ-y) var(--soform-recherche-champ-x);
}

.soform-recherche__champ:first-of-type {
	padding-left: var(--soform-recherche-bord);
}

.soform-recherche__champ label {
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--soform-texte-2);
}

/* Combos ----------------------------------------------------------------- */

.soform-recherche__combo {
	position: relative;
	display: flex;
	align-items: center;
}

/* Blocksy habille les `select` (bordure, fond, chevron en background-image) :
   on repart de zéro pour que le combo se lise comme la ligne de texte de la
   maquette, et le chevron est un SVG placé au-dessus. */
.soform-recherche__combo select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	/* Un `select` a une hauteur intrinsèque propre au moteur : même avec
	   `appearance: none`, padding et bordure à zéro, Chrome le rendait 40 px de
	   haut pour une ligne de 24. Les 16 px en trop se répartissaient sous la
	   valeur, si bien que le champ paraissait décalé vers le haut — 18 px
	   au-dessus du libellé, 26 px optiques sous la valeur. On le cale sur sa
	   ligne. */
	height: 24px;
	min-height: 0;
	margin: 0;
	padding: 0 24px 0 0;
	/* Zone tactile : 44 px de haut, mais la ligne reste à 24 px dans la mise
	   en page (marges négatives) — audit responsive, 07/10/2026. */
	box-sizing: content-box;
	padding-block: 10px;
	margin-block: -10px;
	border: 0;
	border-radius: 0;
	background: transparent none;
	box-shadow: none;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: var(--soform-encre);
	text-overflow: ellipsis;
	cursor: pointer;
}

.soform-recherche__combo select:focus {
	outline: 0;
	box-shadow: none;
}

.soform-recherche__combo select:focus-visible {
	outline: 2px solid var(--soform-encre);
	outline-offset: 6px;
	border-radius: 2px;
}

.soform-recherche__combo select option {
	color: var(--soform-encre);
}

.soform-recherche__chevron {
	position: absolute;
	right: 0;
	pointer-events: none;
	color: var(--soform-texte-2);
	transition: color 0.25s ease;
}

.soform-recherche__combo:hover .soform-recherche__chevron {
	color: var(--soform-encre);
}

/* Filet ------------------------------------------------------------------ */

.soform-recherche__filet {
	flex: 0 0 1px;
	align-self: center;
	width: 1px;
	height: 40px;
	background-color: var(--soform-filet);
}

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

/* Pleine hauteur utile de la carte : le bouton ferme la barre au lieu d'y
   flotter. Aucune hauteur n'est écrite — il s'étire sur celle des champs. */
.soform-recherche__submit {
	flex: 0 0 auto;
	align-self: stretch;
	margin: 0;
	/* Un libellé court (« Filtrer ») donnait un bloc presque carré : la largeur
	   minimale lui rend une proportion d'action. */
	min-width: 148px;
	padding: 0 var(--soform-recherche-bord);
	border: 0;
	/* Rayons concentriques : rayon intérieur = rayon de la carte − son retrait
	   (16 − 8). À 12 px, les deux arrondis ne se suivaient pas. */
	border-radius: calc(16px - var(--soform-recherche-retrait));
	background-color: var(--soform-encre);
	color: var(--soform-page);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.6px;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.soform-recherche__submit:hover,
.soform-recherche__submit:focus-visible {
	background-color: var(--soform-accent);
	color: var(--soform-page);
}

.soform-recherche__submit:active {
	transform: translateY(1px);
}

/* Adaptatif -------------------------------------------------------------- */

/* Les paliers ne redéclarent aucun padding : ils resserrent le rythme. */
@media (max-width: 999.98px) {
	.soform-recherche {
		--soform-recherche-champ-x: 18px;
		--soform-recherche-bord: 22px;
	}
}

/* Tablette, barre à trois menus (catalogue) : sur une seule ligne, les menus
   étaient tronqués (« Toutes les spé… »). Deux par ligne, le bouton dessous
   (audit responsive, 07/10/2026). La barre de l'accueil, à deux menus, garde
   sa ligne. */
@media (min-width: 690px) and (max-width: 999.98px) {
	.soform-recherche:has(.soform-recherche__champ ~ .soform-recherche__champ ~ .soform-recherche__champ) .soform-recherche__champ {
		flex: 1 1 40%;
	}

	/* Le troisième menu ouvre la deuxième ligne : même retrait que le premier. */
	.soform-recherche__champ ~ .soform-recherche__champ ~ .soform-recherche__champ {
		padding-left: var(--soform-recherche-bord);
	}

	.soform-recherche:has(.soform-recherche__champ ~ .soform-recherche__champ ~ .soform-recherche__champ) .soform-recherche__filet {
		display: none;
	}

	/* Le bouton se range à côté du troisième menu : 2 × 2, sans menu isolé
	   sur sa ligne. */
	.soform-recherche:has(.soform-recherche__champ ~ .soform-recherche__champ ~ .soform-recherche__champ) .soform-recherche__submit {
		flex: 0 1 40%;
		align-self: center;
		min-height: 56px;
	}
}

@media (max-width: 689.98px) {
	.soform-recherche {
		--soform-recherche-champ-y: 16px;
		--soform-recherche-champ-x: 20px;
		--soform-recherche-bord: 20px;

		margin-top: min(var(--soform-recherche-marge, 72px), 48px);
	}

	.soform-recherche__champ,
	.soform-recherche__champ:first-of-type {
		flex: 1 1 100%;
		padding: var(--soform-recherche-champ-y) var(--soform-recherche-champ-x);
	}

	/* Le filet vertical devient une séparation horizontale. */
	.soform-recherche__filet {
		flex: 1 1 100%;
		width: auto;
		height: 1px;
		margin: 0 var(--soform-recherche-champ-x);
	}

	.soform-recherche__submit {
		width: 100%;
		min-height: 56px;
		margin-top: var(--soform-recherche-retrait);
	}
}

@media (prefers-reduced-motion: reduce) {
	.soform-recherche__submit,
	.soform-recherche__chevron {
		transition: none;
	}

	.soform-recherche__submit:active {
		transform: none;
	}
}