/*!
 * annuaire.css — Horizon Santé
 * Annuaire des praticiens (medecins.html) : filtres et état vide.
 * Chargée après styles.css, dans les mêmes couches (@layer déclarées dans styles.css).
 */

@layer components {
  .facts { display: grid; gap: 0.55rem; margin: 0; max-inline-size: none; }
  .facts > div { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.6rem; align-items: start; }
  .facts dt { color: var(--color-teal); padding-block-start: 0.1rem; }
  .facts dd { margin: 0; line-height: 1.45; }
  .facts dd strong { font-variant-numeric: tabular-nums; }
  .absence-note { color: var(--color-warn); font-weight: 700; font-size: var(--step--1); }
  .doctor__more { padding: 0 1.4rem 1.4rem; display: grid; gap: 0.75rem; font-size: 1.0625rem; }
  .doctor__more ul { padding-inline-start: 1.1rem; }
  .doctor__more h3 { font-size: 1.0625rem; }
}

@layer pages {
  .directory { display: grid; gap: var(--space-6); align-items: start; }
  .filters { position: relative; border: var(--bw) solid var(--color-border); border-radius: var(--radius-panel); background: #fff; box-shadow: var(--shadow-1); }
  .filters > summary { display: flex; align-items: center; gap: 0.6rem; min-block-size: 3.5rem; padding: 0 1.25rem; font-weight: 700; cursor: pointer; list-style: none; }
  .filters > summary::-webkit-details-marker { display: none; }
  .filters > summary .chev { margin-inline-start: auto; transition: transform var(--dur-2) var(--ease); }
  .filters[open] > summary .chev { transform: rotate(180deg); }
  @media (min-width: 64em) {
    .filters > summary { pointer-events: none; }
    .filters > summary .chev { display: none; }
  }
  .filters__form { display: grid; gap: 1.1rem 1.25rem; padding: 0.25rem 1.25rem 1.25rem; align-items: end; }
  @media (min-width: 40em) {
    .filters__form { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 1.5rem; }
    .f-span2 { grid-column: 1 / -1; }
    .filters__actions { grid-column: 1 / -1; }
  }
  @media (min-width: 64em) {
    .filters__form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .f-span2, .f-tri { grid-column: span 2; }
    .filters__actions { grid-column: span 1; }
  }
  .filters .day-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
  @media (min-width: 40em) {
    .filters .day-checks { grid-template-columns: repeat(6, 1fr); }
  }
  .day-check { position: relative; display: grid; place-items: center; min-block-size: var(--target); border: 2px solid var(--color-border-ui); border-radius: var(--radius-field); font-weight: 700; cursor: pointer; background: #fff; transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
  .day-check:hover { border-color: var(--color-teal-deep); }
  .day-check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .day-check:has(input:checked) { border-color: var(--color-teal-deep); background: var(--color-mint); box-shadow: inset 0 0 0 1px var(--color-teal-deep); }
  .day-check:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
  .radio-stack { display: grid; gap: 0.4rem; }
  @media (min-width: 40em) {
    .radio-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .radio-stack .radio { border-radius: var(--radius-field); }
  @media (min-width: 40em) {
    .radio-stack .radio { white-space: nowrap; padding-inline: 0.6rem; gap: 0.45rem; font-size: 1rem; }
  }
  .filters__actions { display: grid; gap: 0.5rem; align-content: end; }
  @media (min-width: 64em) {
    .filters__actions .btn--primary { display: none; }
  }
  .results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-5); }
  .results-count { font-weight: 700; font-size: 1.1875rem; }
  .results-count:focus-visible { outline-offset: 6px; }
  .empty-state { display: grid; gap: var(--space-4); justify-items: start; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-panel); border: 2px dashed var(--color-border-ui); background: var(--color-surface); }
}