/* ==========================================================================
   Cabinets et semaine
   ========================================================================== */

.office-grid {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
}

/* Un filet entre deux cabinets, et rien autour : le haut et le bas de la liste
   sont déjà fermés par le changement de fond de la section. */
.office-card {
  display: grid;
  gap: 18px;
  padding: clamp(26px, 3vw, 38px) 0;
  border-top: 1px solid var(--hairline);
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 2fr);
}

.office-card:first-child {
  border-top: 0;
  padding-top: 0;
}

.office-card h3 {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.office-card address {
  margin-bottom: 10px;
  color: var(--muted);
  font-style: normal;
}

/* Ligne compacte de l’accueil, identité, jours, action. */
.office-card-compact {
  align-items: center;
  padding: clamp(20px, 2.2vw, 28px) 0;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1fr) auto;
}

.office-body {
  display: grid;
  gap: 18px;
  align-content: start;
}

.office-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.office-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--green);
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* La semaine du cabinet, motif signature du site. */
.week {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  border-top: 1px solid var(--green-dark);
}

/* Le filet est à gauche et non à droite : c'est lui qui ouvre la colonne, et le
   jour comme les prénoms lui laissent la même respiration qu'au bord opposé. La
   première colonne n'a pas de filet, elle s'aligne sur le bord du bloc. */
.week-day {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 12px 14px 16px;
  border-left: 1px solid var(--hairline);
}

.week-day:first-child {
  padding-left: 0;
  border-left: 0;
}

.week-label {
  color: var(--green);
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.week-names {
  display: grid;
  gap: 4px;
  font-size: 0.95rem;
  font-weight: 600;
}

.week-empty {
  color: var(--muted);
}

.week-note {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 0.78rem;
}

/* Horaires d'ouverture du cabinet, distincts des présences de praticiens. */
.office-hours {
  margin: 10px 0 0;
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 0.8rem;
}

/* Bande de jours de l'accueil. Les colonnes sont fixes et non le contenu, un
   jour tombe à la même abscisse sur les trois cabinets, c'est la lecture en
   colonne qui dit qui ouvre quand. */
.office-days {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 6px;
  margin: 0;
}

.office-days > span {
  padding: 6px 4px;
  background: var(--tint);
  color: var(--green-dark);
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

/* Un jour de fermeture garde sa colonne, il n'en garde pas l'encre. */
.office-days > .office-day-off {
  background: transparent;
  color: var(--muted);
}

.schedule {
  display: grid;
  gap: 10px;
  margin: 0;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}

.schedule dt {
  color: var(--green);
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.schedule dd {
  margin: 0;
  font-size: 0.95rem;
}

/* Leaflet empile ses calques jusqu'à z-index 1000, bien au dessus de l'en-tête
   fixe. Le conteneur ouvre son propre contexte d'empilement, tout ce que la
   carte dessine reste donc enfermé dedans. */
#map {
  position: relative;
  z-index: 0;
  height: clamp(340px, 52vh, 560px);
  border: 1px solid var(--hairline);
  background: var(--green-soft);
}

/* La façade précède la carte : on reconnaît un bâtiment plus vite qu'on ne lit un
   plan. Même filet que la carte, les deux disent la même chose, comment arriver. */
.office-front {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
}

/* La mise en colonne retire au titre sa marge basse, la carte qui suit la reprend. */
.split + #map {
  margin-top: clamp(32px, 4vw, 56px);
}

.map-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 0.74rem;
}

/* Leaflet embarque trois familles à lui, Helvetica pour le corps, Lucida Console
   pour les boutons de zoom et Tahoma pour la croix de fermeture. Le site n'en a
   que deux, la carte s'y range. Les deux dernières sont posées sur l'élément par
   une notation raccourcie font, il faut donc les viser une à une. */
.leaflet-container,
.leaflet-container .leaflet-control,
.leaflet-container .leaflet-popup-content,
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-zoom-in,
.leaflet-container .leaflet-control-zoom-out,
.leaflet-container a.leaflet-popup-close-button {
  font-family: var(--font-body);
}