/* =============================================================================
   LA BARRE DE RECHERCHE DE L'EN-TÊTE
   Posée le 10/09/2026 — « refonte et amélioration complète du moteur de
   recherche du header : plus moderne, plus design, plus fluide, plus
   intelligent, plus pro […] dark mode complet ».

   ⛔ CE N'EST PAS `css/recherche.css`. Ce fichier-là existe déjà et porte la
      refonte des quatre onglets de `/search-results` (148 règles `umc-rs`).
      L'écraser aurait rendu ces quatre pages nues d'un coup — sans erreur,
      sans 500 : elles auraient répondu 200, en HTML brut. Signalé par la
      console 11 avant que la faute soit commise.

   ⚠️ Tout est préfixé `umc-hr` (la barre) et `umc-sg` (les suggestions). Cette
      feuille est chargée sur des pages qui portent encore le gabarit Worketic,
      et rien ne doit fuir vers lui — ni l'inverse. Aucune règle ne cible une
      balise nue.

   ⛔ AUCUNE ICÔNE DE POLICE. `master.blade.php` charge Font Awesome 5 puis 4,
      et la v4 gagne : les noms v5 rendent un vide. Tout est en SVG.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   LES JETONS

   ⛔ ILS SONT REDÉCLARÉS AVEC LEURS REPLIS SOMBRES, et ce n'est pas décoratif.
      La page d'accueil ne charge PAS `refonte.css` : elle déclare ses propres
      jetons. Sur elle, un `var(--umc-ink, #101114)` tombe sur son repli CLAIR —
      barre blanche à texte noir posée sur une page sombre. Constaté le 09/09
      sur l'en-tête, exactement pour cette raison.
   --------------------------------------------------------------------------- */
/* ⛔ LE PANNEAU DECLARE SES JETONS SEUL, sans passer par `.umc-hr` : il sert
   aussi la barre du hero de l'accueil, qui n'a pas cette classe. */
.umc-hr,
.umc-sg{
    --r-ink:var(--umc-ink,#101114);
    --r-ink2:var(--umc-ink-2,#3d414a);
    --r-ink3:var(--umc-ink-3,#6b7280);
    --r-line:var(--umc-line,#e7e8ec);
    --r-line2:var(--umc-line-strong,#d3d6dd);
    --r-surface:var(--umc-surface,#fff);
    --r-bg2:var(--umc-bg-2,#f5f6f8);
    --r-accent:var(--umc-accent,#ff6300);
    --r-accent-doux:var(--umc-accent-soft,#fff3ea);
    --r-accent-txt:var(--umc-accent-txt,#9a3b00);
    --r-sur-accent:#14100c;
    --r-ombre:0 1px 2px rgba(16,17,20,.06),0 14px 38px rgba(16,17,20,.14);
}
html[data-theme="dark"] .umc-hr,
html[data-theme="dark"] .umc-sg{
    --r-ink:var(--umc-ink,#e9eaee);
    --r-ink2:var(--umc-ink-2,#b3b7c0);
    --r-ink3:var(--umc-ink-3,#868c98);
    --r-line:var(--umc-line,#282c34);
    --r-line2:var(--umc-line-strong,#343943);
    --r-surface:var(--umc-surface,#16181d);
    --r-bg2:var(--umc-bg-2,#1c1f25);
    --r-accent:var(--umc-accent,#ff7a24);
    /* ⛔ Pas le beige clair du mode jour : sur fond sombre il éclate. Un voile
          de la couleur d'accent, à faible opacité, tient les deux modes. */
    --r-accent-doux:rgba(255,122,36,.16);
    --r-accent-txt:var(--umc-accent-txt,#ff9a55);
    --r-sur-accent:#1a1206;
    --r-ombre:0 1px 2px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.55);
}

/* ---------------------------------------------------------------------------
   LA BARRE
   --------------------------------------------------------------------------- */
.umc-hr{
    flex:1 1 auto;min-width:0;max-width:620px;
    display:flex;align-items:stretch;
    position:relative;
    height:42px;
    border:1px solid var(--r-line2);
    border-radius:999px;
    background:var(--r-surface);
    /* ⚠️ Le gabarit Worketic fait flotter presque tout. */
    box-sizing:border-box;
    transition:border-color .16s ease,box-shadow .16s ease;
}
.umc-hr *{box-sizing:border-box;}

.umc-hr:focus-within{
    border-color:var(--r-accent);
    box-shadow:0 0 0 3px var(--r-accent-doux);
}
/* Quand la liste est ouverte, la barre se pose « au-dessus » de la page : elle
   et son panneau forment un seul objet. */
.umc-hr.umc-hr-ouvert{
    border-color:var(--r-accent);
    box-shadow:0 0 0 3px var(--r-accent-doux);
}

/* ⛔ IL N'Y A PLUS DE MENU DE PORTEE DANS LA BARRE — mesure du 10/09.
   Il prenait 117 des 477 pixels disponibles pour ne montrer QU'UNE valeur a la
   fois, et le champ de saisie tombait a 131 px : huit caracteres visibles.
   Les quatre portees sont devenues les pastilles `.umc-sg-portees`, en bas du
   panneau, montrees seulement quand on a tape quelque chose.
   📏 Une mesure prise a l'ecran vaut tous les avis sur la maquette. */

.umc-hr-sep{
    flex:0 0 1px;width:1px;background:var(--r-line);
    margin:9px 0;
}

/* ------------------------------------------------------------- un champ --- */
.umc-hr-champ{
    position:relative;
    display:flex;align-items:center;gap:8px;
    min-width:0;padding:0 12px;
}
/* 62/38 et pas moitie-moitie : « Que cherchez-vous ? » recoit des phrases
   (« plombier fuite chauffe-eau »), « Ou ? » recoit un nom de commune. Mesure
   sur les 366 px restants : 227 px pour la saisie, 139 pour le lieu. */
.umc-hr-champ--quoi{flex:1 1 62%;}
.umc-hr-champ--ou{flex:1 1 38%;}

.umc-hr-champ > .umc-hr-ic{
    flex:none;width:16px;height:16px;
    fill:none;stroke:var(--r-ink3);stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;
}
.umc-hr-champ input{
    flex:1 1 auto;min-width:0;
    border:0;background:transparent;
    font:inherit;font-size:14px;color:var(--r-ink);
    height:38px;padding:0;
}
.umc-hr-champ input:focus{outline:none;}
.umc-hr-champ input::placeholder{color:var(--r-ink3);opacity:1;}
/* La croix native de Chrome/Edge ferait doublon avec la nôtre. */
.umc-hr-champ input::-webkit-search-cancel-button{display:none;}

/* La croix d'effacement : elle n'apparaît que s'il y a quelque chose à
   effacer, et elle reste une VRAIE cible au doigt. */
.umc-hr-vider{
    flex:none;width:22px;height:22px;padding:0;
    display:inline-flex;align-items:center;justify-content:center;
    border:0;border-radius:50%;cursor:pointer;
    background:var(--r-bg2);color:var(--r-ink3);
    font-size:15px;line-height:1;
}
.umc-hr-vider[hidden]{display:none;}
.umc-hr-vider:hover{background:var(--r-line2);color:var(--r-ink);}

/* L'attente : un fin trait qui court sous le champ. ⛔ Pas un sablier au
   milieu de la saisie — il déplacerait le texte à chaque frappe. */
.umc-hr-champ.umc-hr-attend::after{
    content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;
    border-radius:2px;overflow:hidden;
    background:linear-gradient(90deg,transparent,var(--r-accent),transparent);
    background-size:200% 100%;
    animation:umc-hr-court 1s linear infinite;
}
@keyframes umc-hr-court{
    from{background-position:200% 0;}
    to{background-position:-200% 0;}
}
@media (prefers-reduced-motion:reduce){
    .umc-hr-champ.umc-hr-attend::after{animation:none;opacity:.5;}
}

/* ------------------------------------------------------------- le bouton --- */
/* ⛔ ROND, SANS MOT — mesure du 10/09. Le libelle « Chercher » coutait 73 des
      477 pixels de la barre, pendant que le champ du lieu tombait a 88 px de
      saisie : on ne pouvait pas relire « Saint-Laurent-du-Var ». */
.umc-hr-go{
    flex:0 0 auto;
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;margin:3px;padding:0;
    border:0;border-radius:50%;cursor:pointer;
    background:var(--r-accent);color:var(--r-sur-accent);
    font:inherit;
    transition:filter .15s ease;
}
.umc-hr-go:hover{filter:brightness(.93);}
.umc-hr-go:focus-visible{outline:2px solid var(--r-accent);outline-offset:2px;}
.umc-hr-go svg{
    width:16px;height:16px;flex:none;
    fill:none;stroke:currentColor;stroke-width:2.3;
    stroke-linecap:round;stroke-linejoin:round;
}

/* =============================================================================
   LE PANNEAU DE SUGGESTIONS
   ========================================================================== */
.umc-sg{
    position:absolute;top:calc(100% + 10px);left:-13px;
    z-index:300;
    min-width:min(420px,92vw);
    text-align:left;
    background:var(--r-surface);
    color:var(--r-ink);
    border:1px solid var(--r-line);
    border-radius:16px;
    box-shadow:var(--r-ombre);
    overflow:hidden;
    /* ⭐ DEUX ZONES : `.umc-sg-liste` défile, `.umc-sg-bas` ne bouge pas.
          ⚠️ MESURE AVANT : 608 px de contenu pour 540 de place, et ce qui
             tombait sous le pli était « Rechercher « … » » — la sortie quand
             aucune suggestion ne convient, donc la dernière chose qui devrait
             disparaître. Un panneau qui déborde ne se signale pas : il montre
             simplement moins.
          📏 Ce qu'on coupe en dernier n'est pas ce qu'on a mis en dernier. */
    display:flex;flex-direction:column;
    max-height:min(74vh,540px);
    -webkit-overflow-scrolling:touch;
    font-size:14px;line-height:1.45;
    /* ⚠️ Le panneau appartient au champ, pas à la page : il ne doit hériter
          d'aucun `text-align` ni d'aucune casse du thème. */
    text-transform:none;
}
.umc-sg[hidden]{display:none;}
/* ⭐ Dans le hero de l'accueil, la barre est large et seule : le panneau prend
      exactement sa largeur, sans le décalage de 13 px qui aligne le texte des
      lignes sur celui du champ dans la barre du bandeau. */
[data-sugg-boite] > .umc-sg{left:0;right:0;min-width:0;}

/* La case « où » est à droite : son panneau s'aligne sur SA droite, sinon il
   déborde de la fenêtre sur un écran de portable. */
.umc-hr-champ--ou .umc-sg{left:auto;right:-13px;}

@media (prefers-reduced-motion:no-preference){
    .umc-sg{animation:umc-sg-ouv .13s ease-out;}
    @keyframes umc-sg-ouv{
        from{opacity:0;transform:translateY(-6px);}
        to{opacity:1;transform:none;}
    }
}


/* ⛔ `min-height:0` n'est pas decoratif : sans lui, un enfant flexible refuse
      de descendre sous la hauteur de son contenu et le `overflow` ne prend
      jamais la main — la liste pousse le pied hors du panneau. */
.umc-sg-liste{
    flex:1 1 auto;min-height:0;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.umc-sg-bas{
    flex:none;
    border-top:1px solid var(--r-line);
    background:var(--r-bg2);
}
/* Dans le pied, les groupes n'ont plus besoin de leur propre trait : le pied
   en porte un, et deux traits colles font une double ligne. */
.umc-sg-bas .umc-sg-groupe{border-top:0;}
.umc-sg-bas .umc-sg-item{background:transparent;}
.umc-sg-bas .umc-sg-item:hover,
.umc-sg-bas .umc-sg-item[aria-selected="true"]{background:var(--r-accent-doux);}
.umc-sg-bas .umc-sg-pied{border-top:1px solid var(--r-line);}

.umc-sg-groupe{border-top:1px solid var(--r-line);padding:4px 0;}
.umc-sg-groupe:first-child{border-top:0;}

.umc-sg-titre{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    font-weight:700;color:var(--r-ink3);
    padding:8px 16px 5px;
}
.umc-sg-effacer{
    border:0;background:none;cursor:pointer;
    font:inherit;font-size:10.5px;letter-spacing:.06em;font-weight:700;
    text-transform:uppercase;color:var(--r-ink3);
    padding:2px 4px;border-radius:6px;
}
.umc-sg-effacer:hover{color:var(--r-accent-txt);background:var(--r-accent-doux);}

/* ------------------------------------------------------------ une ligne --- */
.umc-sg-item{
    display:flex;align-items:center;gap:11px;
    width:100%;padding:9px 16px;
    background:none;border:0;cursor:pointer;
    font:inherit;color:var(--r-ink);text-decoration:none;
}
/* ⭐ Le survol et la sélection au clavier partagent le MÊME état visuel : deux
      apparences pour « l'élément courant » obligent l'œil à apprendre deux
      codes pour une seule idée. */
.umc-sg-item:hover,
.umc-sg-item[aria-selected="true"]{
    background:var(--r-accent-doux);
    color:var(--r-accent-txt);
    text-decoration:none;
}

.umc-sg-ic{
    flex:none;
    width:30px;height:30px;border-radius:9px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--r-bg2);
    color:var(--r-ink3);
}
.umc-sg-item:hover .umc-sg-ic,
.umc-sg-item[aria-selected="true"] .umc-sg-ic{
    background:var(--r-surface);color:var(--r-accent-txt);
}
/* ⚠️ `flex:none` sur le dessin lui-même : sans lui, un SVG sans dimensions
      prend la taille de son conteneur. C'est exactement ce qui a produit des
      icônes de partage de 318 px le 10/09 au matin. */
.umc-sg-i{
    width:16px;height:16px;flex:none;display:block;
    fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;
}

.umc-sg-txt{
    min-width:0;flex:1 1 auto;
    display:flex;flex-direction:column;gap:1px;
}
.umc-sg-txt b{
    font-weight:600;font-size:14px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.umc-sg-txt i{
    font-style:normal;font-size:12.5px;color:var(--r-ink3);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.umc-sg-item:hover .umc-sg-txt i,
.umc-sg-item[aria-selected="true"] .umc-sg-txt i{color:inherit;opacity:.85;}

/* La partie déjà tapée : on voit d'un coup d'œil POURQUOI la ligne est là. */
.umc-sg-txt mark{
    background:transparent;color:inherit;font-weight:800;
    text-decoration:underline;text-underline-offset:2px;
}

.umc-sg-badge{
    flex:none;font-size:10px;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;padding:3px 8px;border-radius:20px;
    background:var(--umc-ok-soft,#e3f0e7);color:var(--umc-ok,#1d6b3f);
}
html[data-theme="dark"] .umc-sg-badge{
    background:rgba(45,170,110,.18);color:#68d29b;
}

/* ⭐ « Plombier à Nice » : la ligne qui a compris la phrase entière. Elle est
      la réponse, pas une piste — elle se distingue. */
.umc-sg-item--fort{
    background:var(--r-accent-doux);
}
.umc-sg-item--fort .umc-sg-ic{
    background:var(--r-accent);color:var(--r-sur-accent);
}
.umc-sg-item--fort .umc-sg-txt b{color:var(--r-accent-txt);}

.umc-sg-vide{
    padding:16px;font-size:13.5px;color:var(--r-ink3);
}

/* -------------------------------------------------------------- le pied --- */
.umc-sg-pied{
    display:flex;gap:16px;align-items:center;
    padding:8px 16px;
    border-top:1px solid var(--r-line);
    background:var(--r-bg2);
    font-size:11px;color:var(--r-ink3);
}
.umc-sg-pied kbd{
    display:inline-block;min-width:17px;text-align:center;
    padding:1px 4px;margin-right:3px;
    border:1px solid var(--r-line2);border-bottom-width:2px;
    border-radius:5px;background:var(--r-surface);
    font-family:inherit;font-size:10.5px;line-height:1.4;color:var(--r-ink2);
}


/* -------------------------------------------------- les autres portées --- */
/* ⭐ Ce que le menu déroulant faisait, en mieux : les trois autres portées
      visibles d'un coup, et seulement quand on a tapé quelque chose à y
      chercher. Elles vivent dans le pied du panneau, après les réponses —
      elles ne sont pas des réponses. */
.umc-sg-portees{padding-bottom:10px;}
.umc-sg-rang{
    display:flex;flex-wrap:wrap;gap:7px;
    padding:2px 16px 4px;
}
.umc-sg-pastille{
    display:inline-flex;align-items:center;
    height:29px;padding:0 12px;
    border:1px solid var(--r-line2);border-radius:999px;
    background:var(--r-surface);
    color:var(--r-ink2);
    font-size:12.5px;font-weight:600;line-height:1;
    text-decoration:none;white-space:nowrap;
    transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.umc-sg-pastille:hover,
.umc-sg-pastille:focus-visible{
    background:var(--r-accent);border-color:var(--r-accent);
    color:var(--r-sur-accent);text-decoration:none;
}
.umc-sg-pastille:focus-visible{outline:2px solid var(--r-accent);outline-offset:2px;}

/* =============================================================================
   LES ÉCRANS ÉTROITS

   ⛔ LES POINTS DE RUPTURE DE LA BARRE NE SONT PAS ICI, ET C'EST VOLONTAIRE.
      Où la barre se place dans l'en-tête, ce qu'elle abandonne quand la place
      manque et à quelle largeur elle passe à la ligne : tout cela vit dans
      `css/header.css`, mesuré au pixel près à 900, 720, 620, 420 et 380 px —
      « à 360 px la recherche était écrasée à 2 px : présente, inutilisable ».
      Réécrire ces largeurs ici en donnerait DEUX jeux, qui divergeraient à la
      première retouche.
      📏 Une mesure ne se recopie pas : elle vit à un seul endroit.

   Ce qui reste ici ne concerne QUE l'apparence de la barre et son panneau.
   ========================================================================== */

@media (max-width:1080px){
    .umc-hr{max-width:none;}
}

/* Le panneau ne peut pas être plus large que la fenêtre : à 360 px, une liste
   de 420 déborde et une partie des lignes devient inatteignable. */
@media (max-width:720px){
    .umc-sg,
    .umc-hr-champ--ou .umc-sg{left:-13px;right:-13px;min-width:0;}
    .umc-sg-pied{display:none;}   /* aucune touche à rappeler au doigt */
}

@media (max-width:480px){
    .umc-hr-champ{padding:0 10px;}
    /* Sous le pouce, une cible de moins de 44 px se rate. */
    .umc-sg-item{padding:12px 14px;}
    .umc-sg-ic{width:34px;height:34px;}
}