/* ==========================================================================
   kfa-suggestions.css — M-SEARCH.3.SUG (2026-09-20)
   LE PANNEAU DE SUGGESTIONS, UNE SEULE FOIS POUR LES DEUX MODULES.
   --------------------------------------------------------------------------
   Planche M-SEARCH.3, Tour 3 (états 2 et 3) et Tour 4 : « l'accueil porte bien
   le module de recherche — LE MÊME que dans l'en-tête des résultats ». Deux
   modules, un seul panneau : c'est la raison d'être de ce fichier.

   AVANT, il existait TROIS conceptions pour la même liste :
     · `style2.css`  (page de résultats) — Montserrat 300/13 px, survol gris,
       angles à 4 px, ombre commentée, et un `padding: 0 10px -webkit-transition`
       avalé par l'analyseur ;
     · `home-v2.css` (accueil)           — survol corail, lignes à 10/16 px ;
     · la planche, qu'aucune des deux ne suivait.

   🔑 ANCRAGE : `.drop_list.kfa-sug`, DEUX classes sur le MÊME élément. C'est ce
      qui donne à `.drop_list.kfa-sug ul li` (0,2,2) de quoi l'emporter sur
      `.kf-search-field .drop_list li` (0,2,1) sans avoir à répéter le préfixe
      de chaque page. À spécificité égale avec `style2.css`, c'est l'ordre de
      chargement qui tranche : CETTE FEUILLE SE CHARGE EN DERNIER, après
      `search-v2.css` comme après `home-v2.css`.

   ⚠️ Les valeurs sont écrites en dur plutôt qu'en jetons : les deux pages n'ont
      pas le même jeu de variables (`--kfs-*` ici, `--kf-*` là). Un fichier
      partagé ne peut dépendre ni de l'un ni de l'autre.

   🚫 Ce fichier ne s'applique QU'AUX panneaux marqués `kfa-sug` dans la vue.
      Les autres `.drop_list` du site (barre fixe, `recherche_map_google.php`,
      `compte_old.php`) ne le voient jamais.
   ========================================================================== */

.drop_list.kfa-sug{
  background:#fff;border:1px solid #dde2ed;border-radius:12px;
  box-shadow:0 12px 32px rgba(32,40,94,.14);
  padding:6px;margin-top:6px;min-width:300px;max-height:332px;overflow-y:auto;
}
.drop_list.kfa-sug ul{list-style:none;padding:0;margin:0}
.drop_list.kfa-sug .separator{display:none}
.drop_list.kfa-sug ul li{padding:0;margin:0;background:none}

/* ⚠️ PAS DE `justify-content:space-between` ICI. Le libellé métier contient un
   <strong> autour du fragment saisi : en `space-between`, ce <strong> devient
   un enfant flex à part entière et se fait projeter à l'autre bout de la ligne
   — vu en recette le 20/09, « Taille de la barbe » s'affichait
   « Taille de la    barb    e ». C'est `.kfs-sug-lib` qui pousse, et le
   département qui reste collé à droite. Une ligne reste donc lisible même si
   un nœud texte égaré se glisse dans le <a>. */
.drop_list.kfa-sug ul li a{
  display:flex;align-items:center;gap:12px;
  min-height:44px;padding:0 12px;border-radius:8px;
  font-family:inherit;font-size:15px;font-weight:500;line-height:1.3;
  color:#151a2e;text-decoration:none;transition:background .15s ease;
}

/* Chaque module compose ses champs à sa propre échelle ; dans la planche, la
   suggestion a TOUJOURS la taille du champ au-dessus d'elle. On suit cette
   relation plutôt qu'un nombre absolu : 14,5 px sur les résultats, 16 px sur
   l'accueil, exactement comme les deux saisies. */
.kf-search-v2 .drop_list.kfa-sug ul li a{font-size:14.5px}
.kf-home      .drop_list.kfa-sug ul li a{font-size:16px}

/* `is-active` = la ligne que la touche Entrée validerait. Même rendu que le
   survol, pour qu'il n'y ait jamais deux « lignes courantes » à l'écran. */
.drop_list.kfa-sug ul li a:hover,
.drop_list.kfa-sug ul li.is-active > a{
  background:#f0f4ff;color:#20285e;font-weight:600;
}
/* `home-v2.css` peignait le survol en corail sur le <li> : il déborderait
   derrière notre <a>. On l'éteint là, et seulement là. */
.drop_list.kfa-sug ul li:hover{background:none;color:inherit}

.drop_list.kfa-sug ul li a strong{font-weight:800;text-decoration:underline}

/* Le libellé prend toute la place restante : c'est lui qui repousse le
   département vers la droite, sans `space-between`. */
.drop_list.kfa-sug .kfs-sug-lib{
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* La colonne de droite reste une MENTION, pas un second libellé : elle ne
   prend ni la graisse ni l'encre de la ligne active. */
.drop_list.kfa-sug .kfs-sug-dep,
.drop_list.kfa-sug ul li.is-active > a .kfs-sug-dep{
  flex:none;font-size:13px;font-weight:400;color:#4a5268;
}

.drop_list.kfa-sug .kfs-sug-foot,
.drop_list.kfa-sug .kfs-sug-note{
  display:flex;align-items:center;min-height:36px;padding:7px 12px 1px;
  font-size:13px;line-height:1.35;color:#4a5268;cursor:default;
}
/* Le pied est COLLÉ EN BAS du panneau. Sur « saint-naz », la liste compte 28
   lieux pour 332 px de haut : sans cela, la phrase qui explique la touche
   Entrée et le rôle du département part hors de vue dès la sixième ligne,
   c'est-à-dire exactement quand elle devient utile. */
.drop_list.kfa-sug .kfs-sug-foot{
  position:sticky;bottom:-6px;z-index:1;
  margin-top:4px;padding-bottom:7px;
  border-top:1px solid #eef1f7;background:#fff;
}

/* Sous 767 px les champs s'empilent : un panneau à 300 px déborderait de
   l'écran. Il reprend alors la largeur pleine de son champ. */
@media (max-width:767px){
  .drop_list.kfa-sug{left:0;right:0;min-width:0;width:auto}
}