/* ============================================================================
   Couverture mobile par commune
   ----------------------------------------------------------------------------
   Même DA que le reste du site : un relevé, pas un tableau de bord. Les
   chiffres sont en chasse fixe et alignés à droite pour se comparer d'une
   ligne à l'autre ; le nom d'opérateur est un en-tête de ligne, pas une
   cellule. Aucune couleur ne porte seule une information — le RGAA l'interdit
   (critère 3.1) et un relevé imprimé en noir et blanc doit rester lisible.

   Cette feuille est chargée APRÈS style.css, donc après responsive.css. Ses
   media queries sont donc écrites ici, dans ce fichier : une règle mobile
   posée dans responsive.css ne pourrait plus rattraper celles-ci.
   ========================================================================== */

/* ── Le relevé ───────────────────────────────────────────────────────────── */
.tableau-defilant {
  overflow-x: auto;
  margin: 1.5rem 0;
  /* Un tableau qui défile doit être atteignable au clavier pour être
     défilable : sans tabindex, l'utilisateur clavier ne peut pas voir les
     colonnes de droite (RGAA 13.x / WCAG 2.1.1). */
  -webkit-overflow-scrolling: touch;
}

.tableau-defilant:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.tableau-couverture {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  font-size: 0.95rem;
}

/* Le <caption> est le TITRE du tableau (RGAA 5.4), pas sa légende : court, en
   haut, il tient dans la largeur d'un téléphone même quand le tableau défile.
   L'explication longue vit dans `.legende-tableau`, hors du cadre défilant. */
.tableau-couverture caption {
  caption-side: top;
  padding: 0 0.25rem 0.6rem;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.tableau-couverture th,
.tableau-couverture td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border-light);
  text-align: left;
  vertical-align: baseline;
}

.tableau-couverture thead th {
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.tableau-couverture tbody th {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* 🚨 La cellule doit porter sa propre taille de police. Sans elle, le `td`
   hérite du 16 px du corps et le strut de la ligne décale les chiffres d'un
   ou deux pixels par rapport à leur en-tête — visible sur une colonne de
   nombres, invisible sur du texte. */
.tableau-couverture .num {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.tableau-couverture tbody tr:last-child th,
.tableau-couverture tbody tr:last-child td {
  border-bottom: none;
}

.tableau-couverture tbody tr:hover {
  background: var(--color-bg-card-hover);
}

/* Une ligne « absent » se lit sans la couleur : le texte de la cellule le dit,
   l'italique et l'encre pâle ne font que le confirmer. */
.op-absent td {
  font-style: italic;
  color: var(--color-text-tertiary);
}

/* ── Listes de liens (voisins, départements) ─────────────────────────────── */
.liste-voisins,
.liste-departements {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.liste-voisins li,
.liste-departements li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
}

.liste-voisins a,
.liste-departements a {
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}

.liste-voisins a:hover,
.liste-departements a:hover,
.liste-voisins a:focus-visible,
.liste-departements a:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.distance,
.dept-code {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/* ── Mentions de source ──────────────────────────────────────────────────── */
.mention-donnee {
  font-size: 0.88rem;
  color: var(--color-text-tertiary);
  border-left: 2px solid var(--color-border);
  padding-left: 0.9rem;
  margin: 1.25rem 0;
}

.appel-mesure {
  margin: 1.75rem 0;
}

/* ── Étroit ───────────────────────────────────────────────────────────────
   Le tableau garde ses six colonnes et défile : les replier en cartes ferait
   perdre la comparaison d'un opérateur à l'autre, qui est tout l'intérêt de
   la page. */
@media (max-width: 640px) {
  .tableau-couverture {
    font-size: 0.9rem;
    min-width: 32rem;
  }

  .tableau-couverture th,
  .tableau-couverture td {
    padding: 0.5rem 0.6rem;
  }

  .liste-voisins,
  .liste-departements {
    grid-template-columns: 1fr;
  }
}

/* Un en-tête de colonne numérique s'aligne à droite comme ses nombres, mais
   garde la fonte des en-têtes : la chasse fixe est réservée à ce qui se
   compare chiffre à chiffre. */
.tableau-couverture thead th.num {
  font-family: inherit;
  font-size: 0.8rem;
  text-align: right;
}

/* 🚨 La légende ne doit PAS vivre dans le cadre défilant : elle y hériterait
   du `min-width` du tableau et sa fin sortirait de l'écran sans un signe.
   Le <caption> reste dans le tableau en `.sr-only` — un lecteur d'écran
   attend la légende À l'intérieur — et le texte visible est ce paragraphe. */
.legende-tableau {
  margin: 0.75rem 0 1.5rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-tertiary);
}

/* ── La carte ─────────────────────────────────────────────────────────────
   Deux états d'un même bloc : le plan SVG, toujours là, imprimable et lisible
   sans script ; et la carte des rues, qui prend sa place à la demande. */
.carte-antennes {
  margin: 1.5rem 0 2rem;
}

.carte-plan {
  position: relative;
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.plan-svg {
  display: block;
  width: 100%;
  height: auto;
  /* Le plan est carré : sans ratio explicite, il saute d'une hauteur à l'autre
     pendant le chargement des polices et fait bouger tout le texte en dessous. */
  aspect-ratio: 1 / 1;
  max-width: 100%;
}

.carte-ouvrir {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
}

.carte-interactive {
  width: 100%;
  height: 26rem;
  border: 1px solid var(--color-border);
}

.carte-en-echec::after {
  content: "Le fond de carte n'a pas pu être chargé.";
  display: block;
  padding: 1rem;
  color: var(--color-text-tertiary);
}

.carte-antennes figcaption {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-text-tertiary);
}

.carte-legende {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  padding: 0;
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.carte-legende li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.marque {
  display: inline-flex;
  line-height: 0;
}

@media print {
  /* À l'impression, le bouton n'a plus de sens et la carte des rues ne sort
     pas : le plan, lui, fait partie du relevé. */
  .carte-ouvrir,
  .carte-interactive { display: none; }
}

@media (max-width: 640px) {
  .carte-interactive { height: 20rem; }

  .carte-ouvrir {
    position: static;
    display: block;
    width: 100%;
    margin: 0;
    border-radius: 0;
  }
}

/* Une fois la carte des rues montée, le plan SVG ferait doublon à l'écran.
   Il n'est pas retiré pour autant : c'est LUI qui s'imprime, la carte des
   rues ne sortant pas sur papier. */
.carte-plan.carte-montee .plan-svg {
  display: none;
}

@media print {
  .carte-plan.carte-montee .plan-svg {
    display: block;
  }
}

/* La croix et le cercle d'échelle appartiennent au plan SVG. Dès que la carte
   des rues le remplace, ces repères n'existent plus à l'écran : la phrase qui
   les décrit doit disparaître avec eux. */
.carte-plan.carte-montee ~ figcaption .mention-plan,
.carte-antennes:has(.carte-montee) .mention-plan {
  display: none;
}