/* ==========================================================================
   LE TIROIR DE NAVIGATION DU TÉLÉPHONE

   Remplace `maelia-mobile-sidebar.css`, cinq lignes qui posaient `1.3em` et
   `uppercase` sur le deuxième niveau.

   Ce que mesurait l'ancien tiroir à 390 px :
     — le panneau n'avait pas de fond (`rgba(0,0,0,0)`), la photo du hero
       transparaissait derrière les entrées ;
     — tout était centré, donc « Protège carnet de santé » passait sur deux
       lignes et la cible de tap devenait imprévisible ;
     — le niveau 1 faisait 24 px sans majuscules, le niveau 2 en faisait 16,6
       EN MAJUSCULES : l'œil lisait les sous-rayons comme des titres ;
     — « Boutique » ouvert portait le contenu à 3 348 px, quatre écrans.

   Le tiroir est une table des matières, pas une vitrine. Il se lit en
   diagonale, aligné à gauche, séparé par des filets plutôt que par du vide.

   Il porte le catalogue entier, « Boutique » dépliée dès l'ouverture : les
   cinq univers se lisent d'emblée, et le chevron de chacun déroule ses rayons
   sur place (`mobile_submenu_effect = accordion`, voir
   `docs/design/socle-t4.md` et `maelia_tiroir_catalogue_deplie()` dans
   `functions.php`). Deux gestes pour un rayon, contre quatre quand un panneau
   glissait par niveau.

   Les 3 348 px du premier accordéon ne reviennent pas pour autant : un seul
   univers se déplie à la fois, les « Tout X » sortent du tiroir, et les trois
   niveaux descendent en taille au lieu de monter.

   Les sélecteurs passent par `#main-menu` : le socle enfant est enfilé avant
   `flatsome-style` (priorité 9999 dans `functions.php`), donc à spécificité
   égale c'est le thème parent qui gagne. L'identifiant du tiroir tranche sans
   un seul `!important`.

   LA COULEUR DIT L'ÉTAT, PAS LA PROFONDEUR

   Le vert pâle a d'abord servi à tout à la fois : fond du bandeau de
   recherche, aplat des cinq univers, survol d'une entrée de premier niveau,
   marque de la page regardée. Quatre rôles, une seule couleur — un univers au
   repos était peint comme une entrée sous le doigt, et la page où l'on se
   trouve comme un univers de plus.

   Le panneau est donc blanc sur ses trois niveaux, et la profondeur se lit au
   décalage et aux filets. Les deux verts pâles ne servent plus qu'aux états,
   un par état :

     — `teal-100` : l'entrée sous le doigt (`:hover`, `:active`) ;
     — `teal-200` + filet `teal-600` : la page où l'on se trouve.

   Les tailles restent dans l'échelle de lecture du site. La cible tactile des
   48 px est tenue par le remplissage, jamais par le corps du texte : grossir
   la police pour atteindre une taille de doigt est le défaut que l'on corrige.
   ========================================================================== */

@media (max-width: 849px) {

	/* ----------------------------------------------------------------------
	   La feuille
	   ---------------------------------------------------------------------- */

	#main-menu.mobile-sidebar {
		background: var(--maelia-surface, #fff);
	}

	/* Flatsome centre le contenu du tiroir et met son menu en majuscules par
	   deux classes posées dans le balisage, `text-center` et `nav-uppercase`.
	   On ne peut pas les retirer sans surcharger un gabarit du thème parent,
	   donc on les annule ici, à la racine du tiroir. */
	#main-menu.mobile-sidebar .sidebar-menu,
	#main-menu.mobile-sidebar .nav-sidebar,
	#main-menu.mobile-sidebar .nav-sidebar li,
	#main-menu.mobile-sidebar .nav-sidebar a {
		text-align: left;
		text-transform: none;
	}

	#main-menu.mobile-sidebar .sidebar-menu {
		padding: 0;
		/* La barre du bas fait 56 px et flotte au-dessus de tout : sans cette
		   réserve, la dernière entrée du tiroir passe dessous. */
		padding-bottom: calc(56px + 16px + env(safe-area-inset-bottom, 0px));
	}

	#main-menu.mobile-sidebar .nav-sidebar.nav-vertical {
		padding: 0;
		border: 0;
	}

	/* ----------------------------------------------------------------------
	   La recherche, en tête de tiroir
	   ---------------------------------------------------------------------- */

	#main-menu.mobile-sidebar .nav-sidebar > li.header-search-form {
		padding: 14px 20px 16px;
		border-bottom: 1px solid var(--maelia-hairline, #D4E7E1);
	}

	#main-menu.mobile-sidebar .nav-sidebar > li.header-search-form .search-field {
		margin: 0;
		font-size: 16px; /* sous 16 px, iOS zoome sur le champ au focus */
	}

	/* ----------------------------------------------------------------------
	   Les entrées
	   ---------------------------------------------------------------------- */

	#main-menu.mobile-sidebar .nav-sidebar > li {
		border: 0;
		border-bottom: 1px solid var(--maelia-hairline, #D4E7E1);
	}

	#main-menu.mobile-sidebar .nav-sidebar > li > a {
		display: flex;
		align-items: center;
		/* Flatsome centre ce lien par `justify-content`, pas par
		   `text-align` : annuler le second ne suffisait pas. */
		justify-content: flex-start;
		min-height: 48px;
		padding: 13px 20px;
		color: var(--maelia-ink, #0E3B33);
		font-family: var(--maelia-font-text, inherit);
		font-size: 16px;
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: 0;
	}

	#main-menu.mobile-sidebar .nav-sidebar > li > a:hover,
	#main-menu.mobile-sidebar .nav-sidebar > li > a:active {
		color: var(--maelia-teal-500, #10564A);
		background: var(--maelia-teal-100, #F4FAF8);
	}

	/* La page où l'on se trouve se marque par une forme, pas par la seule
	   couleur : un filet d'encre contre le bord gauche, à l'épaisseur du
	   jeton `--maelia-rule`. C'est le langage que le site emploie déjà pour
	   dire « vous êtes ici » — le rail de la fiche produit et le panneau du
	   bureau portent la même marque. Un détecteur y lit le bandeau latéral
	   décoratif des interfaces génériques ; ici il porte un état, il est à la
	   graduation du socle, et il n'habille rien. */
	/* `active` ne sert pas de repère : en mode glissant, Flatsome la pose sur
	   l'entrée dont on vient d'ouvrir l'étage. La marque de page suit donc
	   `current-menu-item` et `maelia-menu-ici`, que PHP pose sur la branche
	   regardée. */
	/* Le chemin et le point d'arrivée ne se disent pas de la même voix. PHP
	   pose `maelia-menu-ici` sur toute la branche regardée — « Boutique »,
	   l'univers, le rayon — et trois aplats empilés feraient un bloc de
	   couleur au lieu d'un repère. La branche porte donc le filet seul ; la
	   page où l'on se trouve, elle seule, porte l'aplat. */
	#main-menu.mobile-sidebar .nav-sidebar li.maelia-menu-ici > a {
		box-shadow: inset var(--maelia-rule, 2px) 0 0 var(--maelia-teal-600, #1C6B5C);
		font-weight: 600;
	}

	#main-menu.mobile-sidebar .nav-sidebar li.current-menu-item > a,
	#main-menu.mobile-sidebar .nav-sidebar li.maelia-menu-page > a {
		box-shadow: inset var(--maelia-rule, 2px) 0 0 var(--maelia-teal-600, #1C6B5C);
		background: var(--maelia-teal-200, #E2F0EB);
		font-weight: 600;
	}

	/* ----------------------------------------------------------------------
	   « Boutique » et ses cinq univers
	   ---------------------------------------------------------------------- */

	#main-menu.mobile-sidebar .nav-sidebar > li.maelia-menu-catalogue > a {
		font-weight: 600;
	}

	/* Replié par défaut, à tous les niveaux. Le thème ne porte cette règle
	   que pour ses propres listes de widgets ; ici c'est l'état de repos du
	   tiroir, et `.active > ul` — la classe que pose le chevron, et que PHP
	   pose d'emblée sur « Boutique » — le rouvre. */
	#main-menu.mobile-sidebar .nav-sidebar li:not(.active) > ul.sub-menu,
	#main-menu.mobile-sidebar .nav-sidebar li:not(.active) > ul.children {
		display: none;
	}

	/* Le thème lave en `rgba(0,0,0,.05)` toute entrée dépliée, et le gris est
	   translucide : « Boutique » ouverte, l'univers ouvert dedans et ses
	   rayons empilaient trois voiles. Un gris de plus en plus sombre à mesure
	   qu'on descend, alors que la profondeur se lit déjà au décalage. */
	#main-menu.mobile-sidebar .nav-sidebar li.active,
	#main-menu.mobile-sidebar .nav-sidebar .sub-menu {
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
	}

	#main-menu.mobile-sidebar .nav-sidebar .sub-menu > li {
		border: 0;
		border-top: 1px solid var(--maelia-hairline, #D4E7E1);
	}

	#main-menu.mobile-sidebar .nav-sidebar .sub-menu > li > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 46px;
		/* Le décalage dit l'imbrication ; il n'y a pas de puce à dessiner. */
		padding: 11px 20px 11px 34px;
		color: var(--maelia-ink, #0E3B33);
		font-family: var(--maelia-font-text, inherit);
		/* Plus petit que son parent : la hiérarchie que l'ancien tiroir
		   inversait. */
		font-size: 14.5px;
		font-weight: 400;
		line-height: 1.3;
		text-transform: none;
	}

	#main-menu.mobile-sidebar .nav-sidebar .sub-menu > li > a:hover,
	#main-menu.mobile-sidebar .nav-sidebar .sub-menu > li > a:active {
		color: var(--maelia-teal-500, #10564A);
		background: var(--maelia-teal-100, #F4FAF8);
	}

	/* Le nombre de pièces, poussé contre la marge droite. Il informe sans
	   réclamer : un cran plus petit, en texte secondaire, et en chiffres
	   tabulaires pour que la colonne reste droite d'une ligne à l'autre. */
	#main-menu.mobile-sidebar .nav-sidebar .maelia-menu-compte {
		flex: none;
		color: var(--maelia-muted, #4A635B);
		font-size: 13px;
		font-weight: 400;
		font-variant-numeric: tabular-nums;
	}

	/* ----------------------------------------------------------------------
	   Les rayons d'un univers — le troisième niveau

	   Il n'existait pas dans le tiroir : les rayons vivaient derrière un
	   panneau à nous, puis derrière un étage glissant. Ils se déroulent
	   maintenant sous leur univers, d'un appui sur le chevron.

	   Deux décalages et deux crans de taille disent les trois niveaux sans
	   une seule puce : la racine à 16 px contre le bord, l'univers à 14,5 px
	   à 34 px du bord, le rayon à 14 px à 48 px. Aucun des trois n'a de fond
	   propre : la couleur ne dit pas la profondeur, elle dit l'état.
	   ---------------------------------------------------------------------- */

	#main-menu.mobile-sidebar .nav-sidebar .sub-menu .sub-menu > li > a {
		min-height: 44px;
		padding: 10px 20px 10px 48px;
		font-size: 14px;
	}

	/* Un univers déplié porte son nom en gras : la ligne devient le titre de
	   la liste qui la suit, le temps qu'elle reste ouverte. */
	#main-menu.mobile-sidebar .nav-sidebar .sub-menu > li.active > a {
		font-weight: 600;
	}

	/* ----------------------------------------------------------------------
	   Le chevron de l'accordéon
	   ---------------------------------------------------------------------- */

	/* Flatsome écarte d'un `em` les entrées qui ont des enfants, et laisse le
	   chevron dans le flux : chaque univers faisait 95 px de haut pour une
	   ligne de 46, et le chevron tombait sous son propre lien. La ligne est
	   donc le repère du chevron, et les entrées ne s'écartent pas. */
	#main-menu.mobile-sidebar .nav-sidebar li {
		position: relative;
		margin: 0;
	}

	#main-menu.mobile-sidebar .nav-sidebar li > .toggle {
		position: absolute;
	}

	/* Le thème écrit les parents de deuxième niveau en petites capitales
	   noires : c'est la grammaire de son méga-menu, pas celle d'une liste. */
	#main-menu.mobile-sidebar .nav-sidebar li li.menu-item-has-children > a {
		color: var(--maelia-ink, #0E3B33);
		font-size: 14.5px;
		text-transform: none;
	}

	/* La seule commande de dépliage : le nom reste un lien, qui mène à la
	   catégorie. Le bouton tient 48 px de côté — la cible au doigt — et le
	   fond du thème saute, sinon il coupe l'aplat de la ligne marquée au ras
	   du chevron. */
	/* La hauteur est celle de la ligne, pas celle de l'entrée : une entrée
	   dépliée mesure toute sa descendance, et un bouton tiré du haut au bas
	   de cette boîte emmenait son chevron au milieu des rayons — la flèche
	   quittait sa ligne au moment où elle devait dire « replier ». Les trois
	   valeurs suivent les `min-height` des liens des trois niveaux. */
	#main-menu.mobile-sidebar .nav-sidebar li > .toggle {
		top: 0;
		bottom: auto;
		right: 6px;
		width: 48px;
		height: 48px;
		margin: 0;
		background: transparent;
		color: var(--maelia-muted, #4A635B);
		opacity: 1;
	}

	#main-menu.mobile-sidebar .nav-sidebar li > .toggle i {
		font-size: 18px;
		transition: transform 0.22s var(--maelia-ease-out, ease-out);
	}

	#main-menu.mobile-sidebar .nav-sidebar li.active > .toggle i {
		transform: rotate(180deg);
	}

	#main-menu.mobile-sidebar .nav-sidebar .sub-menu > li > .toggle {
		height: 46px;
	}

	#main-menu.mobile-sidebar .nav-sidebar .sub-menu .sub-menu > li > .toggle {
		height: 44px;
	}

	/* Le nom et son compteur s'arrêtent avant le chevron. */
	#main-menu.mobile-sidebar .nav-sidebar li.has-child > a {
		padding-right: 54px;
	}

	/* ----------------------------------------------------------------------
	   Le pied : le compte client, détaché du reste

	   Ce n'est pas une entrée de menu WordPress mais un élément d'en-tête de
	   Flatsome (`element-account-sidebar.php`), d'où la classe `account-item`
	   plutôt qu'une des nôtres. Son sous-menu — commandes, adresses,
	   déconnexion — n'existe que pour une cliente connectée ; une visiteuse
	   n'y voit qu'un lien.
	   ---------------------------------------------------------------------- */

	#main-menu.mobile-sidebar .nav-sidebar > li.account-item {
		margin-top: 10px;
		border-top: 1px solid var(--maelia-hairline, #D4E7E1);
		border-bottom: 0;
	}

	#main-menu.mobile-sidebar .nav-sidebar > li.account-item > a {
		color: var(--maelia-muted, #4A635B);
		font-size: 15px;
		font-weight: 400;
	}

	#main-menu.mobile-sidebar .nav-sidebar > li.account-item .children {
		margin: 0;
		padding: 0;
	}

	#main-menu.mobile-sidebar .nav-sidebar > li.account-item .children > li {
		border: 0;
		border-top: 1px solid var(--maelia-hairline, #D4E7E1);
	}

	#main-menu.mobile-sidebar .nav-sidebar > li.account-item .children > li > a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 10px 20px 10px 34px;
		color: var(--maelia-muted, #4A635B);
		font-size: 14px;
		font-weight: 400;
		text-transform: none;
	}

	/* ----------------------------------------------------------------------
	   Les surfaces que l'on n'a pas dessinées
	   ---------------------------------------------------------------------- */

	#main-menu.mobile-sidebar ::selection {
		background: var(--maelia-teal-300, #BFE0D8);
		color: var(--maelia-ink, #0E3B33);
	}

	/* Le panneau reçoit le focus à l'ouverture ; il ne doit pas pour autant
	   se dessiner un contour, ce serait un cadre autour de tout l'écran. */
	#main-menu.mobile-sidebar:focus {
		outline: none;
	}

	#main-menu.mobile-sidebar a:focus-visible,
	#main-menu.mobile-sidebar button:focus-visible,
	#main-menu.mobile-sidebar input:focus-visible {
		outline: 2px solid var(--maelia-teal-600, #1C6B5C);
		outline-offset: -2px;
	}
}

/* ==========================================================================
   LA BARRE DU BAS S'EFFACE PENDANT QUE LE TIROIR EST OUVERT

   Les deux portent la même navigation, et le bouton « Menu » de la barre est
   sous le tiroir qu'il vient d'ouvrir. La classe est posée par
   `maelia-tiroir-mobile.js`, qui sait déjà quand le tiroir s'ouvre et se
   ferme.
   ========================================================================== */

@media (max-width: 849px) {

	body.maelia-tiroir-ouvert .maelia-barre {
		display: none;
	}
}

/* ==========================================================================
   LE BORD DU TIROIR : L'ENVELOPPE DE MAGNIFIC POPUP

   Le tiroir arrivait au centre de l'écran (`data-pos=center`) et en sombre
   (`data-color=dark`). Trois défauts venaient de là :

     — `.off-canvas-center .mfp-content` porte `padding-top: 50px`, donc le
       voile noir (#0b0b0b à 85 %) se voyait en bandeau au-dessus du tiroir ;
     — la variante `dark` posait `color: rgba(255,255,255,.8)` sur tout le
       panneau. Les entrées de menu portaient notre encre, mais les résultats
       de la recherche instantanée héritaient du blanc : blanc sur blanc, on
       ne voyait plus que la vignette du produit ;
     — la croix de fermeture restait collée au bord droit de la fenêtre, à
       cheval sur le voile et sur le panneau.

   Les deux premiers sont réglés au bon endroit, dans les réglages du thème
   (`mobile_overlay = left`, `mobile_overlay_color = ''`, à rejouer en prod,
   voir `docs/design/socle-t4.md`) : le tiroir part du bord gauche, collé en
   haut, pleine hauteur, en clair. Reste la croix, que Flatsome dessine en
   blanc à `mix-blend-mode: difference` — un glyphe qui change de couleur
   selon ce qu'il recouvre et n'appartient à aucune palette.
   ========================================================================== */

@media (max-width: 849px) {

	/* Le panneau occupe toute la largeur du tiroir et toute sa hauteur : sans
	   `min-height`, une page courte laisserait voir le voile sous la dernière
	   entrée. */
	#main-menu.mobile-sidebar {
		min-height: 100%;
		width: 100%;
	}

	/* Le tiroir prend 90 % de la largeur ; la bande restante montre la page
	   derrière lui et porte la croix. Le thème expose sa largeur en variable,
	   on la redéfinit sur l'enveloppe plutôt que de récrire ses règles. */
	.off-canvas.off-canvas-left .mfp-content {
		/* Le thème écrit cette variable dans `#custom-css`, en ligne, sur ce
		   même élément : la déclarer plus haut dans l'arbre ne suffit pas, il
		   faut la reposer ici avec une classe de plus.
		   Le plafond de 440 px vaut pour les grandes tablettes, où 90 % de la
		   largeur ferait un tiroir de 700 px pour une liste de six entrées. */
		--drawer-width: min(90vw, 440px);
	}

	/* La croix se tient dans cette bande, au-dessus du voile sombre. Flatsome
	   la dessine en blanc à `mix-blend-mode: difference` : un trait dont la
	   couleur dépend de ce qu'il recouvre, pâle sur le voile et perdu au bord
	   du panneau. Le mélange saute, le blanc reste — sur un voile à 60 % de
	   noir il se lit sans qu'on ait à lui dessiner un fond. La fermeture est
	   une sortie, pas une action à encourager : elle se voit, elle ne se
	   réclame pas.

	   Flatsome centre son icône par `line-height` sur un bouton en bloc, et un
	   SVG de 28 px posé sur la ligne de base n'y tombe pas au milieu. Une
	   boîte flexible le centre sur les deux axes.

	   Trois classes pour battre `.mfp-ready .mfp-close` : le socle enfant est
	   enfilé avant `flatsome-style`. */
	.off-canvas.off-canvas-left .mfp-close {
		display: flex;
		align-items: center;
		justify-content: center;
		top: 10px;
		right: 0;
		width: 40px;
		height: 40px;
		border-radius: var(--maelia-radius, 3px);
		background: transparent;
		box-shadow: none;
		color: #fff;
		line-height: 1;
		mix-blend-mode: normal;
		opacity: 1;
	}

	.off-canvas.off-canvas-left .mfp-close svg {
		width: 22px;
		height: 22px;
	}

	/* Au doigt, un voile clair confirme la cible sans lui dessiner un fond
	   permanent. */
	.off-canvas.off-canvas-left .mfp-close:hover,
	.off-canvas.off-canvas-left .mfp-close:active {
		background: rgba(255, 255, 255, 0.18);
		opacity: 1;
	}

	.off-canvas.off-canvas-left .mfp-close:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}

	/* ----------------------------------------------------------------------
	   Effacer ce qu'on a tapé

	   Le bouton est posé par `maelia-tiroir-mobile.js` dans la colonne du
	   champ, qui n'était pas un repère de positionnement.
	   ---------------------------------------------------------------------- */

	#main-menu.mobile-sidebar .header-search-form .flex-col.flex-grow {
		position: relative;
	}

	#main-menu.mobile-sidebar .maelia-recherche-vider {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		right: 2px;
		transform: translateY(-50%);
		width: 36px;
		height: 36px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: var(--maelia-radius, 3px);
		background: transparent;
		box-shadow: none;
		color: var(--maelia-muted, #4A635B);
		line-height: 1;
	}

	#main-menu.mobile-sidebar .maelia-recherche-vider[hidden] {
		display: none;
	}

	#main-menu.mobile-sidebar .maelia-recherche-vider:hover,
	#main-menu.mobile-sidebar .maelia-recherche-vider:active {
		background: var(--maelia-teal-200, #E2F0EB);
		color: var(--maelia-ink, #0E3B33);
	}

	/* Le texte saisi s'arrête avant la croix. */
	#main-menu.mobile-sidebar .header-search-form input.search-field {
		padding-right: 42px;
	}

	/* La croix native de WebKit ferait doublon. */
	#main-menu.mobile-sidebar .header-search-form input.search-field::-webkit-search-cancel-button {
		display: none;
	}

	/* ----------------------------------------------------------------------
	   La recherche instantanée

	   La liste est rendue hors du panneau par le script de Flatsome, d'où des
	   sélecteurs qui ne passent pas par `#main-menu`. Ils valent pour les deux
	   endroits où l'on cherche au téléphone : le tiroir de menu (`.off-canvas`)
	   et le panneau « Recherche » de la barre du bas (`.maelia-panneau`), qui
	   rendent le même formulaire.
	   ---------------------------------------------------------------------- */

	.off-canvas .autocomplete-suggestions,
	.maelia-panneau .autocomplete-suggestions {
		color: var(--maelia-ink, #0E3B33);
		font-family: var(--maelia-font-text, inherit);
	}

	.off-canvas .autocomplete-suggestion,
	.maelia-panneau .autocomplete-suggestion {
		/* Le script rend trois éléments côte à côte dans une boîte flexible :
		   sur 300 px, la vignette et la fourchette de prix écrasaient le nom à
		   73 px de large, soit six lignes de deux mots. Le prix passe sous le
		   nom, aligné sur lui. */
		flex-wrap: wrap;
		align-items: center;
		gap: 0 10px;
		padding: 8px 0;
		border-bottom: 1px solid var(--maelia-hairline, #D4E7E1);
		color: var(--maelia-ink, #0E3B33);
		font-size: 14px;
		line-height: 1.35;
	}

	.off-canvas .autocomplete-suggestion:last-child,
	.maelia-panneau .autocomplete-suggestion:last-child {
		border-bottom: 0;
	}

	.off-canvas .autocomplete-suggestion .search-image,
	.maelia-panneau .autocomplete-suggestion .search-image {
		flex: none;
	}

	.off-canvas .autocomplete-suggestion .search-name,
	.maelia-panneau .autocomplete-suggestion .search-name {
		/* `min-width: 0` sans quoi un nom long refuse de se couper et garde la
		   largeur de son plus grand mot. */
		/* Base zéro, pas `auto` : avec `auto` le nom réclame sa largeur de
		   contenu, dépasse la place restante et passe à la ligne sous la
		   vignette. */
		flex: 1 1 0;
		min-width: 0;
		padding-left: 0;
		color: var(--maelia-ink, #0E3B33);
	}

	/* Le prix accompagne le nom ; il ne lui dispute pas la lecture. */
	.off-canvas .autocomplete-suggestion .search-price,
	.maelia-panneau .autocomplete-suggestion .search-price {
		/* Ligne entière, décalée de la largeur de la vignette et de son
		   intervalle : le prix se lit sous le nom, pas à côté. */
		flex: 0 0 100%;
		padding: 2px 0 0 55px;
		color: var(--maelia-muted, #4A635B);
		font-size: 13px;
		font-variant-numeric: tabular-nums;
	}

	.off-canvas .autocomplete-suggestion.autocomplete-selected,
	.off-canvas .autocomplete-suggestion:hover,
	.maelia-panneau .autocomplete-suggestion.autocomplete-selected,
	.maelia-panneau .autocomplete-suggestion:hover {
		background: var(--maelia-teal-100, #F4FAF8);
	}

	/* Rien à proposer : le script affiche une ligne de service, qui héritait
	   elle aussi du blanc. */
	.off-canvas .autocomplete-suggestions .autocomplete-no-suggestion,
	.maelia-panneau .autocomplete-suggestions .autocomplete-no-suggestion {
		color: var(--maelia-muted, #4A635B);
		font-size: 14px;
	}
}