/*
 * Annuaire public des soignants libéraux.
 * Charte Teoudoc (bleu ciel, gris ardoise, turquoise, Inter) avec une
 * typographie de titrage plus affirmée. Tout est scopé sous .directory.
 */
.directory {
  --dir-ink: #2D3033;
  --dir-sky: #C2D6EC;
  --dir-sky-deep: #8FA8C9;
  --dir-mist: #E5EEF9;
  --dir-paper: #F6F9FD;
  --dir-lagoon: #60C2C5;
  --dir-lagoon-deep: #237477;
  --dir-muted: #5A6472;
  --dir-line: #D8E2EE;
  --dir-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --dir-radius: 0.875rem;
  --dir-header-height: 4.25rem;

  font-family: "Inter", system-ui, sans-serif;
  color: var(--dir-ink);
  background: var(--dir-paper);
  font-size: 1rem;
  line-height: 1.55;
}

.directory :focus-visible {
  outline: 3px solid var(--dir-lagoon);
  outline-offset: 2px;
  border-radius: 0.375rem;
}

/* En-tête */
.directory-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: var(--dir-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem clamp(1rem, 3vw, 2rem);
  background: #fff;
  border-bottom: 1px solid var(--dir-line);
}
.directory-brand { display: flex; align-items: center; gap: 0.875rem; color: inherit; text-decoration: none; min-width: 0; }
.directory-logo { height: 2.25rem; width: auto; }
.directory-brand-label {
  font-family: var(--dir-display);
  font-weight: 650;
  font-size: 1rem;
  padding-left: 0.875rem;
  border-left: 1px solid var(--dir-line);
  white-space: nowrap;
}
.directory-nav { display: flex; align-items: center; gap: 0.5rem; }
.directory-nav-link, .directory-nav-cta {
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  color: var(--dir-ink);
  text-decoration: none;
  white-space: nowrap;
}
.directory-nav-link:hover { background: var(--dir-mist); }
.directory-nav-cta { background: var(--dir-sky); }
.directory-nav-cta:hover { background: var(--dir-sky-deep); }

/* Mise en page liste + carte */
.directory-split {
  display: grid;
  grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "intro map" "results map";
}
.directory-intro { grid-area: intro; padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem) 1.5rem; }
.directory-results { grid-area: results; display: block; padding: 0 clamp(1rem, 3vw, 2.5rem) 3rem; }
.directory-map-area {
  grid-area: map;
  position: sticky;
  top: var(--dir-header-height);
  align-self: start;
  height: calc(100vh - var(--dir-header-height));
  border-left: 1px solid var(--dir-line);
}

.directory-title {
  font-family: var(--dir-display);
  font-weight: 750;
  font-size: clamp(2.125rem, 1.35rem + 2.4vw, 3.375rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 15ch;
  margin: 0 0 1rem;
  font-variation-settings: "opsz" 96;
}
.directory-lede { max-width: 34rem; color: var(--dir-muted); font-size: 1.0625rem; margin: 0 0 1.75rem; }
.directory-lede strong {
  font-family: var(--dir-display);
  font-weight: 750;
  font-size: 1.375rem;
  color: var(--dir-lagoon-deep);
  font-variant-numeric: tabular-nums;
}

/* Recherche */
.directory-search { display: grid; gap: 0.875rem; }
.directory-label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.375rem; }
.directory-query { display: flex; gap: 0.5rem; }
.directory-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.directory-input {
  width: 100%;
  height: 3rem;
  padding: 0 0.875rem;
  font: inherit;
  font-size: 1rem;
  color: var(--dir-ink);
  background: #fff;
  border: 1px solid var(--dir-line);
  border-radius: var(--dir-radius);
  appearance: auto;
}
.directory-input:hover { border-color: var(--dir-sky-deep); }
.directory-input:focus { outline: none; border-color: var(--dir-lagoon-deep); box-shadow: 0 0 0 3px rgba(96, 194, 197, 0.35); }
.directory-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding: 0 1.25rem;
  font: inherit;
  font-weight: 650;
  color: var(--dir-ink);
  background: var(--dir-sky);
  border: 0;
  border-radius: var(--dir-radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.directory-button:hover { background: var(--dir-sky-deep); }
.directory-button--quiet { background: #fff; border: 1px solid var(--dir-line); height: 2.5rem; }

/* Carte */
.directory-map { position: relative; height: 100%; background: var(--dir-mist); }
.directory-map-status {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
  margin: 0;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(45, 48, 51, 0.12);
}
.directory-map-legend {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 500;
  max-width: 19rem;
  margin: 0;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--dir-muted);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--dir-line);
  border-radius: 0.625rem;
}
.directory .leaflet-container { font-family: "Inter", system-ui, sans-serif; background: var(--dir-mist); }
.directory .leaflet-tile-pane { opacity: 0.55; filter: grayscale(1) sepia(0.2) hue-rotate(180deg) saturate(0.7) brightness(1.05) contrast(0.9); }
.directory .leaflet-overlay-pane { animation: directory-dots-in 700ms ease-out both; }
.leaflet-tooltip.directory-tooltip {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #2D3033;
  border: 0;
  border-radius: 0.5rem;
  padding: 0.375rem 0.625rem;
  box-shadow: 0 2px 8px rgba(45, 48, 51, 0.16);
}
@keyframes directory-dots-in { from { opacity: 0; } to { opacity: 1; } }

/* Résultats */
.directory-results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 1.25rem 0 0.75rem;
  border-bottom: 1px solid var(--dir-ink);
}
.directory-count {
  margin: 0;
  font-family: var(--dir-display);
  font-weight: 650;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.directory-commune {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.25rem 0.375rem 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--dir-mist);
  border-radius: 999px;
}
.directory-commune-clear {
  padding: 0.125rem 0.5rem;
  color: var(--dir-lagoon-deep);
  background: #fff;
  border-radius: 999px;
  text-decoration: none;
}
.directory-commune-clear:hover { text-decoration: underline; }

.directory-list { list-style: none; margin: 0; padding: 0; }
.directory-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.875rem;
  padding: 0.8125rem 0.25rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--dir-line);
}
.directory-row:hover .directory-row-name { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--dir-lagoon); }
.directory-row-body { display: grid; min-width: 0; }
.directory-row-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.directory-row-meta { font-size: 0.9375rem; color: var(--dir-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Monogramme : la teinte encode la famille de métier */
.directory-monogram {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-family: var(--dir-display);
  font-weight: 650;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  border-radius: 50%;
}
.directory-monogram--reeducation { background: #DDF2F3; color: #1F6467; }
.directory-monogram--soins { background: #E0EAF6; color: #3A5A80; }
.directory-monogram--psy { background: #FBEEDB; color: #7E4309; }
.directory-monogram--appareillage { background: #FFE6E7; color: #9C3438; }
.directory-monogram--autres { background: #EBEEF2; color: #434D5A; }
.directory-monogram--large { width: 5rem; height: 5rem; font-size: 1.625rem; }

.directory-pagination { padding-top: 1.5rem; }
/* Le thème Kaminari partagé porte des utilitaires Tailwind : on les neutralise ici. */
.directory-pagination nav { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; box-shadow: none; }
.directory-pagination nav > a,
.directory-pagination nav > span {
  display: inline-grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  margin-left: 0 !important;
  padding: 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--dir-ink);
  background: #fff;
  border: 1px solid var(--dir-line);
  border-radius: 0.625rem;
  text-decoration: none;
}
.directory-pagination nav > a:hover { border-color: var(--dir-sky-deep); background: #fff; }
.directory-pagination nav > span[aria-current="page"] { color: #fff; background: var(--dir-ink); border-color: var(--dir-ink); }
.directory-pagination nav svg { width: 1.125rem; height: 1.125rem; }

.directory-empty { padding: 2.5rem 0; color: var(--dir-muted); }
.directory-empty p { margin: 0 0 0.5rem; }
.directory-empty-title { font-family: var(--dir-display); font-weight: 650; font-size: 1.25rem; color: var(--dir-ink); }
.directory-empty .directory-button { margin-top: 0.75rem; }

/* Fiche praticien */
.directory-profile { max-width: 68rem; margin: 0 auto; padding: 1.5rem clamp(1rem, 3vw, 2rem) 4rem; }
.directory-breadcrumb { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.9375rem; color: var(--dir-muted); margin-bottom: 2rem; }
.directory-breadcrumb a { color: var(--dir-lagoon-deep); text-decoration: none; }
.directory-breadcrumb a:hover { text-decoration: underline; }
.directory-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: stretch;
}
.directory-profile-name {
  font-family: var(--dir-display);
  font-weight: 750;
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 1.25rem 0 0.5rem;
  overflow-wrap: anywhere;
}
.directory-profile-role { font-size: 1.1875rem; color: var(--dir-muted); margin: 0 0 2rem; }
.directory-facts { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--dir-ink); }
.directory-facts > div {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--dir-line);
}
.directory-facts dt { font-size: 0.9375rem; color: var(--dir-muted); }
.directory-facts dd { margin: 0; font-weight: 600; }
.directory-rpps { font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
.directory-profile-map {
  position: relative;
  min-height: 20rem;
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--dir-mist);
  border: 1px solid var(--dir-line);
}

.directory-section { margin-top: 3rem; }
.directory-section-title {
  font-family: var(--dir-display);
  font-weight: 650;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}
.directory-muted { color: var(--dir-muted); margin: 0; }
.directory-source {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--dir-mist);
  border-radius: var(--dir-radius);
  font-size: 0.9375rem;
}
.directory-source p { margin: 0; }
.directory-source p + p { margin-top: 0.375rem; }
.directory-source a { color: var(--dir-lagoon-deep); font-weight: 600; }
.directory-list--compact { border-top: 1px solid var(--dir-line); }
.directory-back {
  display: inline-block;
  margin-top: 2.5rem;
  font-weight: 600;
  color: var(--dir-lagoon-deep);
  text-decoration: none;
}
.directory-back:hover { text-decoration: underline; }

/* Mobile et tablette */
@media (max-width: 960px) {
  .directory-split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "intro" "map" "results";
  }
  .directory-map-area { position: relative; top: auto; height: auto; border-left: 0; border-block: 1px solid var(--dir-line); }
  .directory-map { height: 58vh; min-height: 22rem; }
  .directory-map-legend { position: static; max-width: none; border: 0; border-radius: 0; background: #fff; padding: 0.625rem clamp(1rem, 3vw, 2.5rem); }
  .directory-row-name, .directory-row-meta { white-space: normal; }
  .directory-pagination nav > a, .directory-pagination nav > span { min-width: 2.25rem; padding: 0 0.5rem; }
  .directory-results { padding-top: 0.5rem; }
  .directory-profile-grid { grid-template-columns: minmax(0, 1fr); }
  .directory-profile-map { min-height: 16rem; }
}

@media (max-width: 560px) {
  .directory-brand-label { display: none; }
  .directory-selects { grid-template-columns: minmax(0, 1fr); }
  .directory-query { flex-direction: column; }
  .directory-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .directory .leaflet-overlay-pane { animation: none; }
}

/* Recherche par expertise : suggestions */
.directory-expertise-search { position: relative; }
.directory-suggestions {
  position: absolute;
  z-index: 1100;
  left: 0;
  right: 0;
  top: calc(100% + 0.25rem);
  margin: 0;
  padding: 0.375rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--dir-line);
  border-radius: var(--dir-radius);
  box-shadow: 0 8px 24px rgba(45, 48, 51, 0.12);
}
.directory-suggestions button {
  display: block;
  width: 100%;
  padding: 0.5rem 0.625rem;
  font: inherit;
  text-align: left;
  color: var(--dir-ink);
  background: none;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
}
.directory-suggestions button:hover, .directory-suggestions button:focus-visible { background: var(--dir-mist); }

/* Filtres actifs */
.directory-active-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Expertises affichées sur la fiche */
.directory-expertises { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.directory-expertises a {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: #1F6467;
  background: #DDF2F3;
  border-radius: 999px;
  text-decoration: none;
}
.directory-expertises a:hover { background: #C9EBEC; }

/* Encart d'activation sur la fiche */
.directory-claim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 2rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--dir-line);
  border-left: 4px solid var(--dir-lagoon);
  border-radius: var(--dir-radius);
}
.directory-claim-title { margin: 0 0 0.25rem; font-family: var(--dir-display); font-weight: 650; font-size: 1.25rem; }
.directory-claim p { margin: 0; }
.directory-claim .directory-muted { font-size: 0.9375rem; }
.directory-claim form { margin: 0; }
.directory-button--strong { background: var(--dir-ink); color: #fff; }
.directory-button--strong:hover { background: #474C51; }
.directory-notice {
  margin: 0 0 1.5rem;
  padding: 0.875rem 1.125rem;
  font-weight: 600;
  background: #DDF2F3;
  color: #1F6467;
  border-radius: var(--dir-radius);
}
.directory-notice--alert { background: #FFE6E7; color: #9C3438; }

/* Formulaires : activation et « Ma fiche » */
.directory-panel {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem) 4rem;
}
.directory-panel-title {
  font-family: var(--dir-display);
  font-weight: 750;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.875rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}
.directory-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin: 1.75rem 0;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--dir-line);
  border-radius: var(--dir-radius);
}
.directory-summary p { margin: 0; }
.directory-form { display: grid; gap: 1.125rem; }
.directory-field-hint { margin: 0.375rem 0 0; font-size: 0.875rem; color: var(--dir-muted); }
.directory-checkbox { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9375rem; }
.directory-checkbox input { width: 1.125rem; height: 1.125rem; margin-top: 0.2rem; accent-color: var(--dir-lagoon-deep); }
.directory-checkbox a { color: var(--dir-lagoon-deep); font-weight: 600; }
.directory-errors {
  margin: 0;
  padding: 0.875rem 1.125rem 0.875rem 2.25rem;
  color: #9C3438;
  background: #FFE6E7;
  border-radius: var(--dir-radius);
}
.directory-removal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--dir-line);
}
.directory-removal-title { margin: 0 0 0.25rem; font-weight: 650; }
.directory-removal p { margin: 0 0 0.875rem; color: var(--dir-muted); }
.directory-link-button {
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: #9C3438;
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* Saisie des expertises */
.directory-tags-field { position: relative; }
.directory-tags-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid var(--dir-line);
  border-radius: var(--dir-radius);
}
.directory-tags-box:focus-within { border-color: var(--dir-lagoon-deep); box-shadow: 0 0 0 3px rgba(96, 194, 197, 0.35); }
.directory-tags { display: contents; list-style: none; }
.directory-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.25rem 0.25rem 0.75rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: #1F6467;
  background: #DDF2F3;
  border-radius: 999px;
}
.directory-tag-remove {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.125rem;
  line-height: 1;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.directory-tag-remove:hover { background: #C9EBEC; }
.directory-tags-input {
  flex: 1 1 12rem;
  min-width: 8rem;
  height: 2.25rem;
  padding: 0 0.375rem;
  font: inherit;
  color: var(--dir-ink);
  background: transparent;
  border: 0;
  outline: none;
}
.directory-tags-meta { display: flex; justify-content: space-between; gap: 1rem; }
.directory-tags-meta > p:last-child { flex-shrink: 0; white-space: nowrap; }
.directory-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.directory-actions a { color: var(--dir-lagoon-deep); font-weight: 600; }

@media (max-width: 560px) {
  .directory-claim { grid-template-columns: minmax(0, 1fr); }
}

/* L'encart de debug ActionCable (rendu en développement uniquement) masquerait l'en-tête de l'annuaire. */
body:has(.directory) [data-controller="action-cable-debug"] { display: none; }