/* Rôle : haut de page commun aux pages thématiques et aux pages villes (« le même héro ») :
 * bandeau de filtre « Tous · En ligne · En cabinet », titre et phrase d'introduction. Domaine : annuaire public.
 * Méthode : feuille liée après la feuille de la page. Tokens dans /css/base.css. Guide : docs/csp-annuaire.md. */
/* Bandeau de filtre « Tous · En ligne · En cabinet » sous l'en-tête du site, pleine largeur, inspiré de psychologue.net
   en plus épuré (Alexandre, lot 2.5) : fond clair, sélecteur en pilule, l'option choisie en blanc, les autres en gris. */
.filtre-bandeau{background:var(--bg-alt);border-bottom:1px solid var(--line);padding:var(--palette-espacement-cabinet-conversation-6) 0}
.filtre-liste{display:inline-flex;gap:2px;padding:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--palette-rayon-home)}
.filtre-liste button{display:inline-flex;align-items:center;justify-content:center;gap:var(--palette-espacement-cabinet-conversation-11);min-height:40px;padding:0 var(--palette-espacement-cabinet-conversation-6);border:1px solid transparent;border-radius:var(--palette-rayon-home);font-size:var(--palette-typographie-cabinet-conversation-2);font-weight:600;color:var(--ink-mute);background:transparent;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.filtre-liste button svg{width:17px;height:17px;flex:none}
.filtre-liste button span{font-weight:500;opacity:.75}
.filtre-liste button[aria-pressed="true"]{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:0 4px 14px -10px var(--palette-ombre-composants-7)}
.filtre-masque{display:none !important}
.filtre-bandeau .wrap{display:flex;align-items:center;gap:var(--palette-espacement-cabinet-conversation-6);flex-wrap:wrap}
@media(max-width:760px){
  .filtre-liste{display:flex;flex:1 1 100%}
  .filtre-liste button{flex:1 1 0;min-height:42px;padding:0 var(--palette-espacement-cabinet-conversation-9)}
}
/* Rythme vertical du haut de page (Alexandre : « gérer l'espacement ») : bandeau de filtre, 32 px, titre, 24 px, première
   carte ; 24 et 20 px sur mobile. */
section.hero{padding-top:var(--palette-espacement-cabinet);padding-bottom:0}
section.hero h1{font-size:var(--palette-typographie-cabinet-conversation);line-height:1.25;margin:0 0 var(--palette-espacement-cabinet-conversation);max-width:760px}
@media(max-width:760px){
  section.hero{padding-top:var(--palette-espacement-cabinet-conversation)}
  section.hero h1{font-size:var(--palette-typographie-components-6);margin-bottom:var(--palette-espacement-cabinet-conversation-10)}
}
/* Phrase d'introduction sous le titre : le titre se rapproche, l'espace passe sous la phrase. */
section.hero h1{margin-bottom:var(--palette-espacement-cabinet-conversation-7)}
section.hero .hero-intro{max-width:820px;margin:0 0 var(--palette-espacement-cabinet-conversation);font-size:var(--palette-typographie-composants-9);line-height:1.55;color:var(--ink-soft)}
@media(max-width:760px){section.hero h1{margin-bottom:var(--palette-espacement-cabinet-conversation-6)}section.hero .hero-intro{font-size:var(--palette-typographie-cabinet-conversation-5);margin-bottom:var(--palette-espacement-cabinet-conversation-10)}}
/* Barre de recherche ville + motif dans le bandeau : sur ordinateur, à la hauteur du filtre de
   gauche (50 px : 4 px de marge, 40 px de contenu, bordure), une barre blanche à deux
   champs (étiquette discrète au-dessus de la valeur) et le bouton à droite ; sur mobile, un résumé « Ville · Motif »
   qui déplie les champs en colonne. Suggestions de villes en liste flottante. */
.filtre-bandeau .wrap{flex-wrap:nowrap}
.rech{position:relative;flex:1 1 auto;min-width:0;display:flex;justify-content:flex-end}
.rech-resume{display:none}
.rech-champs{display:flex;align-items:stretch;width:100%;max-width:720px;background:var(--surface);border:1px solid var(--line);border-radius:var(--palette-rayon-home);padding:4px;box-shadow:0 4px 14px -12px var(--palette-ombre-composants-7)}
.rech-champ{position:relative;display:flex;flex-direction:column;justify-content:center;flex:1 1 0;min-width:0;min-height:40px;padding:0 var(--palette-espacement-cabinet-conversation-5) 0 40px;border-radius:var(--palette-rayon-home);cursor:text}
/* Séparateur droit entre les champs (un trait de bordure suivait l'arrondi en pilule : trait courbe, retour d'Alexandre). */
.rech-champ+.rech-champ::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--line)}
.rech-champ:focus-within{background:var(--bg-alt)}
.rech-champ>svg{position:absolute;left:var(--palette-espacement-cabinet-conversation-5);top:50%;width:17px;height:17px;transform:translateY(-50%);color:var(--accent);pointer-events:none}
.rech-champ label{font-size:var(--palette-typographie-cabinet-conversation-4);font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.1;color:var(--ink-mute);cursor:inherit}
.rech-champ input,.rech-champ select{width:100%;min-width:0;margin:0;padding:0;border:0;outline:0;background:transparent;font:inherit;font-size:var(--palette-typographie-cabinet-conversation-5);font-weight:600;line-height:1.35;color:var(--ink);-webkit-appearance:none;appearance:none}
.rech-champ input::placeholder{color:var(--ink-mute);font-weight:500}
.rech-motif{cursor:pointer}
.rech-motif select{cursor:pointer;padding-right:var(--palette-espacement-cabinet-conversation-8)}
.rech-motif::after{content:"";position:absolute;right:var(--palette-espacement-cabinet-conversation-5);top:50%;width:7px;height:7px;border:solid var(--ink-mute);border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.rech-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--palette-espacement-cabinet-conversation-11);min-height:40px;padding:0 var(--palette-espacement-cabinet-conversation-8);border-radius:var(--palette-rayon-home);font-size:var(--palette-typographie-cabinet-conversation-5);white-space:nowrap;flex:none}
.rech-btn svg{width:17px;height:17px}
.rech-liste{position:absolute;top:calc(100% + 8px);left:0;z-index:40;width:max(100%,300px);max-height:320px;overflow:auto;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--palette-rayon-composants);box-shadow:0 24px 48px -24px var(--palette-ombre-composants-7)}
.rech-liste[hidden]{display:none}
.rech-liste li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--palette-espacement-cabinet-conversation-7);padding:var(--palette-espacement-cabinet-conversation-4) var(--palette-espacement-cabinet-conversation-7);border-radius:var(--palette-rayon-home);font-size:var(--palette-typographie-cabinet-conversation-5);color:var(--ink);cursor:pointer}
.rech-liste li[aria-selected="true"],.rech-liste li:hover{background:var(--accent-softer);color:var(--accent-deep)}
.rech-liste .rech-l-cp{font-size:var(--palette-typographie-cabinet-conversation-3);color:var(--ink-mute)}
.rech-liste .rech-vide{color:var(--ink-mute);cursor:default;background:none}
@media(max-width:760px){
  .filtre-bandeau .wrap{flex-direction:column;align-items:stretch;gap:var(--palette-espacement-cabinet-conversation-11)}
  .rech{display:block}
  .rech-resume{display:flex;align-items:center;gap:var(--palette-espacement-cabinet-conversation-6);width:100%;min-height:44px;padding:0 var(--palette-espacement-cabinet-conversation-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--palette-rayon-home);font:inherit;font-size:var(--palette-typographie-cabinet-conversation-2);color:var(--ink);text-align:left;cursor:pointer}
  .rech-resume svg{width:17px;height:17px;flex:none;color:var(--accent)}
  .rech-resume-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rech-resume-m{flex:none;font-size:var(--palette-typographie-cabinet-conversation-3);font-weight:700;color:var(--accent)}
  .rech-champs{display:none;max-width:none}
  .rech.rech-ouverte .rech-champs{display:flex;flex-direction:column;gap:4px;margin-top:var(--palette-espacement-cabinet-conversation-11);padding:6px}
  .rech.rech-ouverte .rech-champs{border-radius:var(--palette-rayon-composants)}
  .rech-ouverte .rech-champ{border-radius:var(--palette-rayon-composants)}
  .rech-ouverte .rech-champ+.rech-champ::before{left:12px;right:12px;top:0;bottom:auto;width:auto;height:1px}
  /* 16 px au moins : en dessous, l'iPhone zoome dans le champ et décale la page. */
  .rech-champ input,.rech-champ select{font-size:16px}
  .rech-ouverte .rech-btn{width:100%;margin-top:4px}
  .rech-ouverte .rech-resume-m{visibility:hidden}
}