/* ============================================================
   Carte annuaire praticiens (Leaflet) — layout + markers + popup.
   Scopé au conteneur .alm-prat-layout (n'affecte que /specialistes/ des sites activés).
   DA Almaviva : point lieu #639922, patient #185FA5 (L4), RDV #004899.
   ============================================================ */

/* ---- Layout base : mobile + tablette — carte bandeau pleine largeur EN HAUT, liste dessous.
   Cadre horizontal IDENTIQUE (max-width + gouttières + margin auto) à la barre unifiée → alignés
   au pixel. Le passage carte 38% gauche (sticky) + liste 62% droite se fait ≥1200px (plus bas). */
.alm-prat-layout { display: block; max-width: var(--alm-container); margin-inline: auto; padding-inline: 0; margin-bottom: clamp(48px, 6vw, 88px); }
/* carte et liste remplissent le cadre (pas de gouttière interne propre qui décalerait les bords). */
.alm-prat-map-section { position: relative; margin: 0 0 clamp(20px, 4vw, 32px); max-width: none; padding-inline: 0; }
.alm-prat-layout .alm-block-annuaire .alm-container { max-width: none; margin-inline: 0; padding-inline: 0; }
.alm-prat-map {
  position: relative;
  width: 100%;
  height: 300px;          /* tablette 768-1199 : bandeau */
  min-height: 250px;
  border-radius: 12px;
  overflow: hidden;
  background: #eef2f6;
  border: 1px solid #CBD9E8;
  z-index: 1;
}
.alm-prat-map__loading { margin: 0; padding: 24px; text-align: center; color: #64748b; font-size: .9rem; }
/* Message « 0 résultat » superposé à la carte (filtre spécialité sans point). */
.alm-prat-map__msg {
  position: absolute; z-index: 500; left: 50%; top: 16px; transform: translateX(-50%);
  max-width: 90%; background: rgba(255, 255, 255, .96); color: #04264d;
  border: 1px solid #e3e9f0; border-radius: 10px; padding: 10px 16px;
  font-size: .88rem; font-weight: 600; text-align: center; box-shadow: 0 4px 16px rgba(4, 38, 77, .12);
}

/* Badge total praticiens (haut-droite) + légende point lieu (bas-gauche), overlay carte.
   pointer-events:none → n'intercepte pas les interactions carte. Z au-dessus des marqueurs. */
.alm-prat-map__badge {
  position: absolute; z-index: 640; top: 12px; right: 12px; pointer-events: none;
  background: #004899; color: #fff; font-size: .8rem; font-weight: 700; line-height: 1;
  padding: 7px 13px; border-radius: 999px; box-shadow: 0 2px 8px rgba(4, 38, 77, .28);
}
.alm-prat-map__legend {
  position: absolute; z-index: 640; left: 12px; bottom: 12px; pointer-events: none;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .96); border: 1px solid #CBD9E8; color: #042C53;
  font-size: .76rem; font-weight: 600; line-height: 1; padding: 7px 11px; border-radius: 8px;
  box-shadow: 0 2px 8px rgba(4, 38, 77, .12);
}
.alm-prat-map__legend-dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; background: #639922; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(99, 153, 34, .55); }
/* Contrôles zoom Leaflet : bordure DA #CBD9E8, chevrons #004899. */
.alm-prat-map .leaflet-control-zoom { border: 1px solid #CBD9E8; border-radius: 9px; box-shadow: 0 2px 8px rgba(4, 38, 77, .12); overflow: hidden; }
.alm-prat-map .leaflet-control-zoom a { color: #004899; border-bottom-color: #CBD9E8; width: 44px; height: 44px; line-height: 44px; font-size: 20px; }
.alm-prat-map .leaflet-control-zoom a:hover { background: #EEF4FB; color: #003670; }

/* ---- ≥1200px : carte 38% gauche (sticky, 90vh) + liste 62% droite ---- */
@media (min-width: 1200px) {
  .alm-prat-layout {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    gap: clamp(24px, 2.6vw, 40px);
    align-items: start;
  }
  /* Colonne carte étirée à la hauteur de la colonne liste (align-self:stretch) ; carte sticky
     plafonnée à min(90vh, hauteur colonne) → 90vh si la liste est longue, = hauteur liste si
     elle est plus courte que 90vh (filtre restrictif) → PAS de grand vide. */
  .alm-prat-map-section { align-self: stretch; margin: 0; }
  .alm-prat-map { position: sticky; top: 100px; height: min(90vh, 100%); min-height: 360px; }

  /* Le bloc annuaire à droite : neutralise son conteneur centré + padding de section. */
  .alm-prat-layout .alm-block-annuaire { padding-block: 0; background: transparent; }
  .alm-prat-layout .alm-block-annuaire .alm-container { max-width: none; margin: 0; padding: 0; }
}

/* ---- Grille et géométrie de fiche : PLUS D'OVERRIDE ICI (2026-08-24).

   Ces règles imposaient 1/2/3 colonnes en `!important` selon le VIEWPORT, et
   redéclaraient `flex-direction: column` + `height: 100%` sur la fiche. Deux
   conséquences, mesurées : à 1200 px elles forçaient trois colonnes dans une
   liste qui n'occupe que 62 % de la ligne — la carte prend le reste — et elles
   annulaient la disposition horizontale posée dans le build du bloc.

   Le nombre de colonnes se déduit maintenant de la largeur RÉELLE du cadre
   (`auto-fill` + `minmax`, cf. src/blocks/annuaire/style.scss), qui est la
   seule règle capable de servir à la fois les 41 sites sans carte et les 15
   qui en ont une. Ne rien redéclarer ici. ---- */
.alm-prat-layout .alm-block-annuaire__grid { align-items: stretch; }

/* B — noms/spécialités longs : coupe propre (pas mid-mot brut). Spécialité = 2 lignes max avec
   ellipsis ET hauteur réservée constante -> rythme interne identique quelle que soit la longueur. */
.alm-prat-layout .alm-block-annuaire__name { overflow-wrap: anywhere; hyphens: auto; }
.alm-prat-layout .alm-block-annuaire__spec {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; hyphens: auto;
  min-height: calc(2 * 1.4em); /* réserve 2 lignes -> pas de décalage entre cartes */
}

/* 981–1199 px : la colonne liste (60%) est étroite ; le toolbar annuaire (recherche + select
   + compteur/reset) ne tient PAS en ligne et débordait de ~24px (scroll horizontal parasite,
   le bouton « Effacer » sortait du cadre). On le stacke (comme son layout mobile) UNIQUEMENT
   dans cette plage — scopé .alm-prat-layout. ≥1200 px la colonne est assez large -> inchangé. */
@media (min-width: 981px) and (max-width: 1199px) {
  .alm-prat-layout .alm-block-annuaire__toolbar { flex-direction: column; align-items: stretch; min-width: 0; }
  .alm-prat-layout .alm-block-annuaire__filters-row { flex-direction: column; min-width: 0; }
  /* empilés proprement : recherche + select en pleine largeur (mêmes bords). */
  .alm-prat-layout .alm-block-annuaire__search,
  .alm-prat-layout .alm-block-annuaire__select-wrap { width: 100%; }
}

/* Recherche « Praticien » et select « Toutes les spécialités » = MÊME largeur (50/50) sur
   desktop (toolbar en ligne, ≥1200 px). Le compteur + « Effacer » (meta-row) restent à droite,
   largeur auto. Scopé .alm-prat-layout (page annuaire Alma) — l'annuaire des autres étabs
   n'est PAS touché. En colonne étroite (981–1199) et mobile, les deux s'empilent (100%). */
@media (min-width: 1200px) {
  .alm-prat-layout .alm-block-annuaire__filters-row .alm-block-annuaire__search,
  .alm-prat-layout .alm-block-annuaire__filters-row .alm-block-annuaire__select-wrap {
    flex: 1 1 0; min-width: 0; width: auto;
  }
}

/* ---- Recherche sticky (au-dessus de la liste) ---- */
@media (min-width: 981px) {
  .alm-prat-layout .alm-block-annuaire__toolbar {
    position: sticky;
    top: 88px;
    z-index: 5;
    background: #fff;
    padding-block: 8px;
  }
}

/* ---- Marker point lieu (#639922), cible tactile ≥ 28px ---- */
.alm-prat-marker-wrap { background: none !important; border: 0 !important; }
.alm-prat-marker {
  display: block;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #639922;
  border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .45);
}
.leaflet-marker-icon:focus .alm-prat-marker,
.alm-prat-marker-wrap:hover .alm-prat-marker { background: #4e7a1a; transform: scale(1.12); }
.alm-prat-marker { transition: transform .12s ease, background .12s ease; }
/* Cluster : teinte verte cohérente */
.alm-prat-layout .marker-cluster-small,
.alm-prat-layout .marker-cluster-medium,
.alm-prat-layout .marker-cluster-large { background: rgba(99, 153, 34, .35); }
.alm-prat-layout .marker-cluster-small div,
.alm-prat-layout .marker-cluster-medium div,
.alm-prat-layout .marker-cluster-large div { background: #639922; color: #fff; font-weight: 700; }

/* ---- Popup ---- */
.alm-prat-popup { font-size: .9rem; }
.alm-prat-popup__place { font-family: var(--font-title, inherit); font-weight: 700; color: #04264d; font-size: 1rem; }
.alm-prat-popup__addr { color: #4b5563; font-size: .8rem; margin: 2px 0 8px; }
.alm-prat-popup__list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.alm-prat-popup__list li { padding: 8px 0; border-top: 1px solid #eef1f6; }
.alm-prat-popup__list li:first-child { border-top: 0; }
.alm-prat-popup__name { display: block; font-weight: 600; color: #04264d; }
.alm-prat-popup__spec { display: block; font-size: .78rem; color: #64748b; margin-top: 1px; }
.alm-prat-popup__links { display: flex; gap: 14px; margin-top: 5px; }
.alm-prat-popup__links a { color: #004899; font-weight: 600; font-size: .82rem; text-decoration: underline; }
.alm-prat-popup__links a:hover, .alm-prat-popup__links a:focus-visible { color: #003670; }
.alm-prat-popup__rdv { color: #004899; }

/* ---- Highlight de la carte praticien depuis un clic sur un point ---- */
.alm-block-annuaire__card.is-map-highlight {
  outline: 3px solid #639922;
  outline-offset: 2px;
  border-radius: 12px;
  transition: outline-color .2s ease;
}

/* ---- Mobile : carte bandeau ~250px, cibles tactiles marker ≥ 24px ---- */
@media (max-width: 980px) { .alm-prat-marker { width: 24px; height: 24px; } }
@media (max-width: 767px) { .alm-prat-map { height: 250px; min-height: 220px; } }

/* ============================================================
   BARRE DE RECHERCHE UNIFIÉE (.alm-prat-searchbar) — fusion adresse + filtres.
   Palette : encart #EEF4FB/#D6E4F2, champs blancs bordure #CBD9E8, radius 11-14.
   Les champs filtre (nom/spéc/compteur/reset) du bloc annuaire mutualisé sont DÉPLACÉS
   ici par JS (classe .is-fused). Frame identique au layout -> alignement conservé.
   ============================================================ */
.alm-prat-searchbar { max-width: var(--alm-container); margin: clamp(24px, 3.5vw, 40px) auto clamp(16px, 2.5vw, 26px); padding-inline: 0; box-sizing: border-box; }
.alm-prat-searchbar__inner {
  background: #EEF4FB; border: 1px solid #D6E4F2; border-radius: 14px;
  padding: clamp(16px, 2.5vw, 22px); box-shadow: 0 1px 4px rgba(4, 38, 77, .05);
}
.alm-prat-searchbar__title { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 15px; font-weight: 500; color: #042C53; }
.alm-prat-searchbar__pin { color: #004899; line-height: 0; display: inline-flex; }
.alm-prat-searchbar__row { display: flex; gap: 10px; align-items: stretch; }
.alm-prat-searchbar__row--filters { margin-top: 10px; }
.alm-prat-searchbar__row--meta { align-items: center; justify-content: space-between; margin-top: 12px; }

/* ligne 1 — adresse (mise en avant), 52px */
.alm-prat-searchbar__addr { position: relative; flex: 1 1 auto; min-width: 0; }
.alm-prat-searchbar__ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8CA3BC; line-height: 0; pointer-events: none; }
/* 2 classes (0,0,2,0) : bat le reset global `input` du thème qui écrasait le padding-left en 16px
   (placeholder sous la loupe). Le texte démarre APRÈS l'icône (icône 18px @ left:14px -> 42px). */
.alm-prat-searchbar .alm-prat-searchbar__input {
  width: 100%; height: 52px; padding: 0 14px 0 42px; box-sizing: border-box;
  border: 1px solid #CBD9E8; border-radius: 11px; background: #fff; font-size: 15px; color: #042C53;
}
.alm-prat-searchbar__input::placeholder { color: #8CA3BC; }
.alm-prat-searchbar__input:focus { outline: 2px solid #185FA5; outline-offset: 0; border-color: #185FA5; }
.alm-prat-searchbar__suggest {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid #CBD9E8; border-radius: 11px;
  box-shadow: 0 10px 28px rgba(4, 38, 77, .14); list-style: none; margin: 0; padding: 4px; max-height: 264px; overflow-y: auto;
}
.alm-prat-searchbar__suggest li { padding: 10px; border-radius: 7px; cursor: pointer; font-size: .9rem; color: #42546B; }
.alm-prat-searchbar__suggest li[aria-selected="true"], .alm-prat-searchbar__suggest li:hover { background: #EAF1FB; }
/* LES TROIS !important RESTENT, ET C'EST LA MESURE SUR LE RENDU QUI L'A TRANCHE.
   Retires le 10/09/2026, le bouton a rendu color rgb(51,51,51) au lieu de blanc
   et une bordure grise au lieu d'orange : un reset du theme parent l'emporte
   reellement sur `color` et `border`. Une simulation CSSOM — neutraliser la
   priorite a chaud, sans toucher la source — avait conclu l'inverse aux quatre
   etats : elle ne reproduit PAS un retrait en source, et elle s'est trompee.
   Ne pas les retirer sans re-mesurer SUR LE RENDU.
   Le survol, lui, se marque a l'opacite : la charte n'a qu'un seul orange. */
.alm-prat-searchbar__locate {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 22px; box-sizing: border-box;
  background: var(--alm-orange) !important; color: #fff !important; border: 1px solid var(--alm-orange) !important; border-radius: 11px;
  font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap;
}
.alm-prat-searchbar__locate:hover, .alm-prat-searchbar__locate:focus-visible {
  background: var(--alm-orange) !important; border-color: var(--alm-orange) !important; color: #fff !important; opacity: .85;
}
.alm-prat-searchbar__locate .alm-prat-searchbar__ico { position: static; transform: none; color: #fff; }

.alm-prat-searchbar__sep { height: 1px; background: #D6E4F2; margin: 14px 0 0; border: 0; }
.alm-prat-searchbar__status { margin: 8px 0 0; font-size: .85rem; min-height: 1.15em; color: #42546B; }
.alm-prat-searchbar__status.is-error { color: #b91c1c; }
.alm-prat-searchbar__status.is-ok { color: #15803d; }

/* dégradation gracieuse : slots filtres/meta masqués tant que non fusionné (JS pose .is-fused). */
.alm-prat-searchbar__row--filters, .alm-prat-searchbar__sep, .alm-prat-searchbar__row--meta { display: none; }
.alm-prat-searchbar.is-fused .alm-prat-searchbar__row--filters, .alm-prat-searchbar.is-fused .alm-prat-searchbar__row--meta { display: flex; }
.alm-prat-searchbar.is-fused .alm-prat-searchbar__sep { display: block; }
.alm-prat-layout.is-fused .alm-block-annuaire__toolbar { display: none !important; } /* toolbar d'origine vidé -> masqué */

/* slots */
.alm-prat-searchbar__slot[data-slot="name"] { flex: 1 1 auto; min-width: 0; }
.alm-prat-searchbar__slot[data-slot="spec"] { flex: 0 0 240px; min-width: 0; }
.alm-prat-searchbar__slot[data-slot="count"], .alm-prat-searchbar__slot[data-slot="reset"] { flex: 0 0 auto; }

/* champs filtre DÉPLACÉS (ligne 2), 48px, harmonisés */
.alm-prat-searchbar .alm-block-annuaire__search,
.alm-prat-searchbar .alm-block-annuaire__select-wrap { width: 100%; position: relative; margin: 0; }
.alm-prat-searchbar .alm-block-annuaire__search-input,
.alm-prat-searchbar .alm-block-annuaire__select {
  width: 100%; height: 48px; box-sizing: border-box; border: 1px solid #CBD9E8 !important; border-radius: 11px;
  background: #fff; font-size: 14px; color: #042C53;
}
.alm-prat-searchbar .alm-block-annuaire__search-input { padding: 0 14px 0 40px; }
.alm-prat-searchbar .alm-block-annuaire__select { padding: 0 34px 0 40px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.alm-prat-searchbar .alm-block-annuaire__search-input:focus,
.alm-prat-searchbar .alm-block-annuaire__select:focus { outline: 2px solid #185FA5; border-color: #185FA5; }
.alm-prat-searchbar .alm-block-annuaire__search-input::placeholder { color: #8CA3BC; }
/* pictos user-search (nom) + stethoscope (spéc) */
.alm-prat-searchbar .alm-block-annuaire__search::before,
.alm-prat-searchbar .alm-block-annuaire__select-wrap::before {
  content: ''; position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; z-index: 1; pointer-events: none; background-repeat: no-repeat; background-size: contain;
}
.alm-prat-searchbar .alm-block-annuaire__search::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%238CA3BC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='7' r='4'/%3E%3Cpath d='M10.3 15H7a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='17' cy='17' r='3'/%3E%3Cpath d='m21 21-1.9-1.9'/%3E%3C/svg%3E"); }
.alm-prat-searchbar .alm-block-annuaire__select-wrap::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%238CA3BC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 2.3A.3.3 0 1 0 5 2a.3.3 0 0 0-.2.3'/%3E%3Cpath d='M8 15a6 6 0 0 0 12 0v-3'/%3E%3Cpath d='M11 3H9v2a4 4 0 0 0 8 0V3h-2'/%3E%3Ccircle cx='20' cy='10' r='2'/%3E%3C/svg%3E"); }
.alm-prat-searchbar .alm-block-annuaire__search-icon { display: none; }
/* libellés « Recherche »/« Spécialité » = screen-reader-only (masqués visuellement, la barre
   utilise placeholder + picto). */
.alm-prat-searchbar .alm-block-annuaire__sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.alm-prat-searchbar .alm-block-annuaire__select-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #8CA3BC; pointer-events: none; }

/* compteur + reset (ligne meta) */
.alm-prat-searchbar .alm-block-annuaire__count { font-size: 14px; color: #42546B; }
.alm-prat-searchbar .alm-block-annuaire__count::after { content: ' trouvés'; }
.alm-prat-searchbar .alm-block-annuaire__count-num { color: #004899; font-weight: 500; }
.alm-prat-searchbar .alm-block-annuaire__reset { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 8px; background: none; border: 0; color: #42546B; font-size: 14px; cursor: pointer; }
.alm-prat-searchbar .alm-block-annuaire__reset:hover { color: #004899; }

/* Point patient (#185FA5) */
.alm-prat-marker--patient { display: block; width: 20px; height: 20px; border-radius: 50%; background: #185FA5; border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(24, 95, 165, .30), 0 1px 5px rgba(0, 0, 0, .4); }

/* CTA « Prendre RDV » — marque #004899 (mutualisé le rend #1e3a8a). Scopé .alm-prat-layout. */
.alm-prat-layout .alm-block-annuaire__rdv,
.alm-prat-layout .alm-block-annuaire__rdv:link,
.alm-prat-layout .alm-block-annuaire__rdv:visited { background: #004899 !important; color: #fff !important; }
/* (le gabarit du bouton — padding, taille, rayon — vient du build du bloc ; il
   y est calibré pour tenir dans les 82 px de la fiche. Seule la teinte diffère
   ici, et c'est la seule chose que cette feuille a à dire.) */
.alm-prat-layout .alm-block-annuaire__rdv:hover,
.alm-prat-layout .alm-block-annuaire__rdv:focus-visible { background: #003670 !important; color: #fff !important; }

/* Cartes praticien : compactes, bordure #E4EAF1 + relief + photo coins hauts arrondis (11px). */
.alm-prat-layout .alm-block-annuaire__card {
  position: relative; background: #fff; border: 1px solid #E4EAF1; border-radius: 11px;
  box-shadow: 0 2px 12px rgba(4, 38, 77, .06); transition: box-shadow .15s ease, border-color .15s ease;
}
.alm-prat-layout .alm-block-annuaire__card:hover { box-shadow: 0 6px 20px rgba(4, 38, 77, .10); border-color: #d7e0ec; }
/* (la pastille est ronde depuis le build du bloc : plus de rayon « coins hauts »
   à poser ici, et plus de `__more` — le chevron l'a remplacé.) */
.alm-prat-card-km { position: absolute; top: 8px; right: 8px; z-index: 3; background: #004899; color: #fff; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .02em; pointer-events: none; }

/* Responsive barre : empilé sous 620px */
@media (max-width: 620px) {
  .alm-prat-searchbar__row--address, .alm-prat-searchbar__row--filters { flex-wrap: wrap; }
  .alm-prat-searchbar__addr { flex-basis: 100%; }
  .alm-prat-searchbar__locate { flex: 1 1 100%; justify-content: center; }
  .alm-prat-searchbar__slot[data-slot="name"], .alm-prat-searchbar__slot[data-slot="spec"] { flex-basis: 100%; }
}

/* Réduire l'animation si demandé */
@media (prefers-reduced-motion: reduce) {
  .alm-prat-marker { transition: none; }
}