/* Recherche du site : champ de l'en-tête et ses suggestions (/js/recherche.js), page /recherche. Couleurs : theme.css. */

/* Ordre des éléments de l'en-tête : logo, recherche, menu, loupe (écrans étroits), « Appeler », menu du téléphone. */
.site-head .brand{order:0}
.site-head .recherche{order:1}
.site-head .nav{order:2}
.ouvrir-recherche{order:3}
.site-head .appel-tete,.site-head .head-cta{order:4}
.site-head .menu,.site-head .burger{order:5}

.site-head .recherche{position:relative;display:flex;align-items:center;flex:1 1 200px;max-width:300px}
.site-head .recherche .icone-loupe{position:absolute;left:11px;width:17px;height:17px;color:var(--doux);pointer-events:none}
.site-head .recherche input{width:100%;font:inherit;font-size:.92rem;color:var(--texte);background:var(--surface);
  border:1px solid var(--bord);border-radius:10px;padding:9px 34px 9px 36px}
.site-head .recherche input::placeholder{color:var(--doux)}
.site-head .recherche input:focus{outline:3px solid var(--accent-2);outline-offset:1px}
.site-head .recherche kbd{position:absolute;right:9px;font:inherit;font-size:.75rem;color:var(--doux);border:1px solid var(--bord);
  border-radius:5px;padding:0 6px;line-height:1.5}
.site-head .recherche input:focus ~ kbd{display:none}

.ouvrir-recherche{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;
  color:var(--sur-entete);border:1px solid color-mix(in srgb,var(--sur-entete) 35%,transparent)}
.ouvrir-recherche .icone-loupe{width:20px;height:20px}

/* Suggestions */
.suggestions{position:absolute;top:calc(100% + 6px);left:0;width:min(440px,calc(100vw - 32px));max-height:min(70vh,520px);overflow:auto;
  background:var(--surface);border:1px solid var(--bord);border-radius:12px;padding:6px;z-index:60;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.suggestions[hidden]{display:none}
.suggestions .groupe{padding:10px 10px 4px;font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--doux)}
.suggestion{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:8px;color:var(--texte)}
.suggestion:hover,.suggestion.actif{background:var(--bleu-doux)}
.suggestion-texte{display:flex;flex-direction:column;min-width:0}
.suggestion b{font-weight:600;font-size:.94rem}
.suggestion .extrait{font-size:.82rem;color:var(--doux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suggestion.tout{margin-top:4px;border-top:1px solid var(--bord);border-radius:0 0 8px 8px;color:var(--accent);font-weight:600;font-size:.9rem}
.suggestions .aucun{padding:12px 10px;font-size:.9rem;color:var(--doux)}

/* Accueil : son en-tête porte déjà le bouton du téléphone ; la recherche y prend la forme de la loupe à toutes les
   largeurs (sinon le champ est écrasé et le numéro passe sur deux lignes, contrôle visuel du 17/10). */
.site-head .head-cta{white-space:nowrap}
.site-head:has(.head-cta) .recherche{display:none}
.site-head:has(.head-cta) .ouvrir-recherche{display:inline-flex;margin-left:16px}
.site-head.recherche-ouverte:has(.head-cta) .recherche{display:flex;position:absolute;left:16px;right:16px;top:calc(100% + 8px);max-width:none;z-index:61}
.site-head:has(.head-cta) .head-in{position:relative}

/* Écrans moyens et étroits : le champ laisse sa place à la loupe et s'ouvre sous l'en-tête. */
@media(max-width:1180px){
  .site-head .recherche{display:none}
  .ouvrir-recherche{display:inline-flex;margin-left:16px}
  .site-head.recherche-ouverte .recherche{display:flex;position:absolute;left:16px;right:16px;top:calc(100% + 8px);max-width:none;z-index:61}
  .site-head .head-in{position:relative}
}
@media(max-width:980px){
  .ouvrir-recherche{margin-left:auto}
  .site-head .appel-tete,.site-head .head-cta{margin-left:10px}
}
/* Très petits téléphones : le nom à côté du logo laisse la place à la loupe. */
@media(max-width:360px){
  .site-head .brand span{display:none}
}

/* Page /recherche */
.recherche-page{margin-top:22px;max-width:720px}
.recherche-page label{display:block;font-weight:600;color:var(--texte);margin-bottom:8px}
.ligne-recherche{display:flex;gap:10px}
.ligne-recherche input{flex:1;min-width:0;font:inherit;color:var(--texte);background:var(--surface);border:1px solid var(--bord);border-radius:10px;padding:12px 14px}
.compte{color:var(--doux);margin-bottom:14px}
.resultats{list-style:none;display:grid;gap:10px;max-width:820px}
.resultats a{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:14px 16px;border:1px solid var(--bord);border-radius:12px;background:var(--surface)}
.resultats a:hover{border-color:var(--accent)}
.resultats b{color:var(--texte);font-weight:600}
.resultats .extrait{flex-basis:100%;font-size:.92rem;color:var(--doux)}
.badge{display:inline-block;font-size:.74rem;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--bleu-doux);color:var(--bleu-texte)}
.badge-action{background:var(--fond-bouton);color:var(--sur-accent)}
.badge-prestation{background:var(--vert-doux);color:var(--vert)}
.badge-question{background:var(--zone);color:var(--texte);border:1px solid var(--bord)}
.vide{color:var(--doux);max-width:66ch}
.vide a{color:var(--accent);text-decoration:underline}
@media(max-width:640px){.ligne-recherche{flex-direction:column}}