/*
 * Extension métier du DSFR pour l'annuaire territorial.
 * Aucun système graphique parallèle : espacements, couleurs, typographie,
 * états et composants reposent sur les jetons et classes DSFR 1.14.4.
 */

html { scroll-behavior: smooth; }

.app-hero {
  background: var(--background-alt-blue-france);
  border-bottom: 1px solid var(--border-default-grey);
}

.app-section { padding-block: 2rem; }

.app-section-header,
.app-commune-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.app-eyebrow {
  color: var(--text-action-high-blue-france);
  margin-bottom: .5rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.app-narrow { max-width: 50rem; }

.app-map-shell {
  position: relative;
  overflow: hidden;
  padding: 1rem;
  background: var(--background-default-grey);
  border: 1px solid var(--border-default-grey);
}

.territory-map {
  display: block;
  width: 100%;
  height: auto;
  min-height: 30rem;
}

.commune-link path {
  fill: var(--background-action-low-blue-france);
  stroke: var(--border-action-high-blue-france);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  transition: fill .15s ease, stroke-width .15s ease;
}

.commune-link text {
  fill: var(--text-title-grey);
  font-family: Marianne, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--background-default-grey);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

.commune-link:hover path,
.commune-link:focus path,
.commune-link.is-selected path {
  fill: var(--background-contrast-blue-france);
  stroke-width: 2;
}

.commune-link:focus { outline: none; }

.commune-link:focus-visible path {
  stroke: var(--border-action-high-blue-france);
  stroke-width: 4;
}

.app-map-tooltip {
  position: fixed;
  z-index: 2000;
  max-width: 22rem;
  padding: .75rem 1rem;
  white-space: pre-line;
  color: var(--text-inverted-blue-france);
  background: var(--background-action-high-blue-france);
  pointer-events: none;
}

.app-map-tooltip[hidden] { display: none; }

.app-commune-list {
  columns: 3;
  column-gap: 2rem;
  padding-left: 0;
  list-style: none;
}

.app-commune-list li {
  break-inside: avoid;
  margin-bottom: .75rem;
}

.app-org-list {
  display: grid;
  gap: 1.5rem;
}

.app-org-card .fr-card__content { min-width: 0; }

.app-org-details dl {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  gap: .5rem 1rem;
  margin-block: 1rem;
}

.app-org-details dt { font-weight: 700; }
.app-org-details dd { margin: 0; min-width: 0; }

.app-hours-list {
  margin: 0;
  padding-left: 1.25rem;
}

.app-hours-list li + li { margin-top: .25rem; }

.app-identifier {
  display: inline-block;
  padding: .125rem .5rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--text-default-grey);
  background: var(--background-contrast-grey);
}

.app-blason {
  width: 6rem;
  height: 6rem;
  object-fit: contain;
  float: left;
  margin: 0 1rem .5rem 0;
  padding: .5rem;
  background: var(--background-default-grey);
  border: 1px solid var(--border-default-grey);
}

.app-stat .fr-tile__title,
.app-dashboard-card .fr-tile__title {
  font-size: 2rem;
  line-height: 1.15;
}

.app-stat .fr-tile__body,
.app-dashboard-card .fr-tile__body { min-height: 100%; }

.app-table {
  overflow-x: auto;
  max-width: 100%;
  margin-block: 1.5rem;
}

.app-table > .fr-table__table { min-width: 100%; }

.app-admin-layout { min-height: 60vh; }

.app-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  align-items: end;
}

.app-field { min-width: 0; }

.app-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}

.app-panel { margin-block: 1.5rem; }

.app-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.app-code { text-transform: none; }

.app-btn--danger {
  color: var(--text-default-error);
  box-shadow: inset 0 0 0 1px var(--border-plain-error);
}

.app-btn--danger:hover {
  background-color: var(--background-contrast-error-hover);
}

.app-empty { margin-block: 1rem; }

.app-login {
  width: min(100%, 36rem);
  margin: 4rem auto;
}

.inline-checks {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  border: 0;
  margin-block: 1rem;
}

.inline-checks > label {
  display: inline-flex;
  gap: .5rem;
  align-items: flex-start;
}

.blason {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: contain;
  border: 1px solid var(--border-default-grey);
  background: var(--background-default-grey);
  padding: .5rem;
}

.details-list {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  gap: .5rem 1rem;
}

.details-list dt { font-weight: 700; }
.details-list dd { margin: 0; }

.org-list {
  display: grid;
  gap: 1.5rem;
}

.hours-list { margin: .25rem 0; padding-left: 1.25rem; }
.hours-list li + li { margin-top: .25rem; }

@media (max-width: 62em) {
  .app-commune-list { columns: 2; }
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .territory-map { min-height: 22rem; }
  .commune-link text { font-size: 8px; }
}

@media (max-width: 48em) {
  .app-commune-list { columns: 1; }
  .app-grid { grid-template-columns: 1fr; }
  .territory-map { min-height: auto; }
  .commune-link text { font-size: 7px; }
  .app-org-details dl,
  .details-list { grid-template-columns: 1fr; }
  .app-org-details dt,
  .details-list dt { margin-top: .5rem; }
}

@media print {
  .fr-header,
  .fr-footer,
  .fr-breadcrumb,
  .fr-sidemenu,
  .fr-accordions-group,
  .app-map-shell,
  [data-print-page] { display: none !important; }

  .fr-card,
  .fr-callout,
  .fr-tile { break-inside: avoid; }
}