/* ==========================================================================
   Mes déchets — Montpellier Méditerranée Métropole

   Habillage aligné sur la charte de montpellier.fr : bleu #0356F2, menthe
   #51EDC6, prune #3B2D4C, titres en « Montpellier », textes en « Barlow »,
   boutons en pilules.

   Deux couleurs seulement sont porteuses d'information et échappent à la
   charte : celles des bacs (jaune, gris, marron, vert bouteille). Elles ne
   servent jamais à décorer.

   La page est prévue pour vivre dans une iframe sur montpellier.fr : aucun
   fond de page, aucune hauteur en vh, aucun élément en position fixe.
   ========================================================================== */

/* ————————————————————————————————————————————————— polices

   « Montpellier » pour les titres, « Barlow » pour les textes : les deux
   polices du site, recopiées dans public/fonts/ pour que l'outil ait le même
   rendu où qu'il soit hébergé. Elles proviennent du thème montpellier3m.      */

@font-face { font-family: "MTP Titre"; font-display: swap; font-weight: 400;
  src: url("../fonts/Montpellier-Regular.woff2") format("woff2"),
       url("../fonts/Montpellier-Regular.woff") format("woff"); }
@font-face { font-family: "MTP Titre"; font-display: swap; font-weight: 500;
  src: url("../fonts/Montpellier-Medium.woff2") format("woff2"),
       url("../fonts/Montpellier-Medium.woff") format("woff"); }
@font-face { font-family: "MTP Titre"; font-display: swap; font-weight: 700;
  src: url("../fonts/Montpellier-Bold.woff2") format("woff2"),
       url("../fonts/Montpellier-Bold.woff") format("woff"); }
@font-face { font-family: "MTP Titre"; font-display: swap; font-weight: 900;
  src: url("../fonts/Montpellier-Black.woff2") format("woff2"),
       url("../fonts/Montpellier-Black.woff") format("woff"); }

@font-face { font-family: "MTP Texte"; font-display: swap; font-weight: 400;
  src: url("../fonts/barlow-Regular.woff2") format("woff2"),
       url("../fonts/barlow-Regular.woff") format("woff"); }
@font-face { font-family: "MTP Texte"; font-display: swap; font-weight: 600;
  src: url("../fonts/barlow-SemiBold.woff2") format("woff2"),
       url("../fonts/barlow-SemiBold.woff") format("woff"); }
@font-face { font-family: "MTP Texte"; font-display: swap; font-weight: 700;
  src: url("../fonts/barlow-Bold.woff2") format("woff2"),
       url("../fonts/barlow-Bold.woff") format("woff"); }

:root {
  --titre: "MTP Titre", "Barlow", "Segoe UI", system-ui, sans-serif;
  --texte-police: "MTP Texte", "Barlow", "Segoe UI", system-ui, sans-serif;

  /* charte montpellier.fr */
  --bleu:        #0356f2;
  --bleu-fonce:  #0242bb;
  --bleu-nuit:   #022f83;
  --menthe:      #51edc6;
  --menthe-vive: #1ee8b5;
  --prune:       #3b2d4c;
  --rose:        #e6007e;
  --texte:       #4e4e4e;
  --texte-doux:  #6b7280;
  --trait:       #e6e6e6;
  --gris-clair:  #f3f5fa;
  --blanc:       #ffffff;
  --noir:        #161616;
  --alerte:      #e02424;

  /* couleurs des bacs — porteuses d'information */
  --om:      #6b7280;
  --ts:      #f2c200;
  --bio:     #8a6a3c;
  --verre:   #1e8a5f;
  --enc:     #3b2d4c;
  --textile: #e6007e;

  --rayon:      16px;
  --rayon-fort: 22px;
  --gouttiere:  1.25rem;
  --largeur:    50rem;
}

*, *::before, *::after { box-sizing: border-box; }

/* Une classe qui pose un display l'emporterait sur la règle navigateur. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--texte-police);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--titre);
  font-weight: 700;
  color: var(--prune);
  letter-spacing: -.025em;
  line-height: 1.15;
}

p { margin: 0 0 .75em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
a { color: var(--bleu); }

:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lien-evitement {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .75rem 1rem; background: var(--bleu); color: #fff;
}
.lien-evitement:focus { left: 0; }

/* ————————————————————————————————————————————————— coquille

   L'outil vit dans une page de montpellier.fr : ni fond, ni carte blanche, ni
   largeur maximale, ni marges. C'est la page hôte qui décide de tout cela, en
   iframe comme en autonome.                                                   */

/* 5 px : la place du contour de focus (3 px + 2 px d'écart), que le bord de
   l'iframe couperait sinon. */
.coquille { max-width: none; margin: 0; padding: 5px; }

/* La page hôte peut être large : on borne la longueur des lignes de texte
   pour rester lisible, sans contraindre la carte ni les listes. */
.invite__texte, .semaine__note, .info__texte, .recherche__aide { max-width: 68ch; }

/* ————————————————————————————————————————————————— barre d'adresse */

.entete { border-bottom: 1px solid var(--trait); }

.adresse {
  display: flex; align-items: center; gap: .75rem;
  padding: 0 0 1rem;
}

.adresse__ouvrir {
  display: flex; align-items: center; gap: .75rem; flex: 1; min-width: 0;
  padding: 0; background: none; border: 0; cursor: pointer; text-align: left;
}

.adresse__puce {
  flex: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--trait); box-shadow: 0 0 0 4px var(--gris-clair);
}
.adresse--definie .adresse__puce { background: var(--menthe); }

.adresse__texte {
  flex: 1; min-width: 0;
  font-family: var(--titre); font-weight: 700; font-size: 1.0625rem;
  color: var(--prune); letter-spacing: -.02em; line-height: 1.25;
  /* L'adresse entière, quitte à passer à la ligne sur téléphone. */
  overflow-wrap: anywhere;
}

.adresse__action, .adresse__effacer {
  flex: none; padding: .375rem .875rem; border-radius: 999px;
  border: 1px solid var(--bleu); background: var(--blanc); color: var(--bleu);
  font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
}
.adresse__ouvrir:hover .adresse__action { background: var(--bleu); color: #fff; }

/* Adresse connue : crayon et croix, deux pastilles rondes de même taille. */
.adresse__picto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0;
}
.adresse__picto svg { width: 1.125rem; height: 1.125rem; }

/* Effacer est une action de repli : présente, mais discrète. */
.adresse__effacer { border-color: var(--trait); color: var(--texte-doux); }
.adresse__effacer:hover { border-color: var(--texte-doux); color: var(--prune); }

/* ————————————————————————————————————————————————— structure */

.vue { padding: 1.5rem 0 .5rem; }
.vue[hidden] { display: none; }

.titre-section { font-size: 1.25rem; margin-bottom: .75rem; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.5rem; border-radius: 999px;
  border: 1px solid var(--bleu); background: var(--blanc); color: var(--bleu);
  font-weight: 600; font-size: .9375rem; cursor: pointer; text-decoration: none;
}
.bouton:hover { background: var(--gris-clair); }
.bouton--fort { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.bouton--fort:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }
.bouton--discret { width: 100%; }

/* ————————————————————————————————————————————————— invitation

   Sans adresse, l'outil reste utile : la carte montre tous les points. Cette
   bande propose simplement d'aller plus loin.                                */

.invite {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.125rem 1.25rem; margin-bottom: 1.5rem;
  background: var(--gris-clair); border-radius: var(--rayon);
}
.invite__texte { margin: 0; flex: 1 1 18rem; }
.invite .bouton { flex: none; }

/* ————————————————————————————————————————————————— la semaine

   Du lundi au samedi : le dimanche n'apparaît que pour les rares adresses qui
   y ont vraiment une collecte. Aujourd'hui est la seule case mise en avant.   */

.semaine { margin-bottom: 1.75rem; }
.semaine__sans-collecte { margin: .75rem 0 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--prune); }
#bloc-adresse { padding-top: .25rem; }

/* La grille, comme sur l'affiche imprimée : jours en colonnes, flux en
   lignes, un trait entre chaque ligne. Aujourd'hui est la seule colonne
   mise en avant.                                                            */
.grille { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--blanc); }
.grille th, .grille td {
  border-bottom: 1px solid var(--trait); padding: .625rem .125rem;
  text-align: center; vertical-align: middle;
}
.grille thead th { border-bottom: 2px solid var(--prune); padding: 0 .125rem .375rem; }
.grille__coin { width: 40%; text-align: left !important; font-family: var(--titre); font-weight: 700; font-size: .875rem; color: var(--prune); }
.grille__jour { font-family: var(--titre); font-weight: 700; font-size: .875rem; color: var(--prune); }
.grille__jour-long { display: none; }
.grille__jour--aujourdhui { color: var(--bleu); }
.grille__jour--ferie { color: var(--rose); }
.grille__case--aujourdhui { background: rgba(3, 86, 242, .06); }
.grille__flux { text-align: left !important; padding-right: .5rem !important; }
/* Le nom du flux ouvre sa fiche. */
.grille__nom {
  display: inline-flex; align-items: center; gap: .5rem; text-align: left;
  padding: .125rem .3125rem; margin: -.125rem -.3125rem;
  background: none; border: 0; border-radius: 6px; cursor: pointer; font: inherit;
  font-weight: 700; font-size: .9375rem; color: var(--prune); line-height: 1.2;
}
.grille__nom:hover { background: rgba(3, 86, 242, .08); }
.grille__libelle { border-bottom: 1px dotted var(--trait); }
.grille__nom:hover .grille__libelle { color: var(--bleu); border-bottom-color: currentColor; }
.grille__pastille { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--c); flex: none; }
.grille__case .grille__pastille { width: 18px; height: 18px; margin: 0 auto; }
.grille__mode { display: block; margin: .125rem 0 0 1.375rem; font-size: .75rem; font-weight: 400; color: var(--texte-doux); }
.grille__mode--large { display: none; }
.grille__moment { display: none; margin-top: .25rem; font-size: .8125rem; font-weight: 600; color: var(--prune); }

.semaine__note {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem;
  margin: .75rem 0 0; font-size: .9375rem;
}
.semaine__note strong { color: var(--rose); }
.semaine__puce {
  width: 12px; height: 12px; border-radius: 50%; background: var(--c);
  align-self: center;
}
.semaine__ferie { color: var(--rose); font-weight: 600; flex-basis: 100%; }

/* Les flux absents de la grille : une ligne chacun, mêmes disques et même
   taille de texte que les noms de flux de la grille.                      */
.autres-flux { list-style: none; margin: .75rem 0 0; padding: 0; }
.autres-flux__ligne {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .25rem 0; font-size: .9375rem; line-height: 1.35; color: var(--prune);
}
.autres-flux__puces { display: inline-flex; gap: .1875rem; flex: none; align-self: flex-start; margin-top: .2rem; }
.autres-flux__puces .lien-flux__puce { width: 14px; height: 14px; }
/* Quand sortir le bac : une ligne par moment de collecte de l'adresse. */
.sortie { margin-top: 1rem; font-size: .9375rem; color: var(--prune); }
.sortie__titre { font-weight: 700; margin: 0 0 .25rem; }
.sortie__liste { margin: 0; padding-left: 1.125rem; }
.sortie__liste li { padding: .0625rem 0; }
/* Deux vignettes pour choisir le format avant d'ouvrir la feuille : un croquis
   de la page, pas une capture, pour ne rien charger de plus.                */
.semaine__imprimer { margin: 1.75rem 0; }
.semaine__imprimer-titre { margin: 0 0 .5rem; font-weight: 600; font-size: .9375rem; }
.apercus { display: flex; flex-wrap: wrap; gap: .75rem; }
.apercu {
  display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto;
  column-gap: .75rem; align-content: center; align-items: center;
  padding: .625rem .875rem .625rem .625rem; border: 1px solid var(--trait); border-radius: .75rem;
  color: inherit; text-decoration: none; min-width: 15rem; flex: 1 1 15rem; max-width: 22rem;
}
.apercu:hover, .apercu:focus-visible { border-color: var(--bleu); }
.apercu__img { grid-row: 1 / 3; justify-self: center; height: 68px; width: auto; display: block; }
.apercu__nom { color: var(--bleu); font-weight: 600; align-self: end; }
.apercu__detail { font-size: .8125rem; color: var(--texte-doux); align-self: start; }

/* Le nom du flux, cliquable : il ouvre sa fiche. */
.lien-flux {
  display: inline; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; font-weight: 700; color: var(--prune); cursor: pointer; text-align: left;
  border-bottom: 1px dotted var(--trait);
}
.lien-flux:hover { color: var(--bleu); border-bottom-color: currentColor; }
.lien-flux__puce { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--c); flex: none; }
.lien-carte {
  display: inline; padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--bleu); text-align: left;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.lien-carte:hover { text-decoration-thickness: 2px; }
/* Un numéro de téléphone : un appui pour appeler, sans retour à la ligne. */
a.tel { color: var(--bleu); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }

/* ————————————————————————————————————————————————— informations locales */

.infos { margin-top: 1.75rem; }
.info {
  background: var(--gris-clair); border-radius: var(--rayon);
  padding: 1.125rem 1.25rem; margin-bottom: .625rem;
}
.info__titre {
  font-family: var(--titre); font-weight: 700; font-size: 1.0625rem;
  color: var(--prune); letter-spacing: -.02em; margin-bottom: .25rem;
}
.info__texte { font-size: .9375rem; }
.info a { font-weight: 600; }

/* ————————————————————————————————————————————————— carte */

.filtres { display: flex; flex-wrap: wrap; gap: .375rem; padding-bottom: 1rem; }

/* Les filtres sont des interrupteurs, pas de la navigation : la menthe reste
   réservée aux onglets, et c'est la pastille de couleur du bac qui porte
   l'information. Éteint, le filtre se décolore. */
.filtre {
  display: inline-flex; align-items: center; gap: .4375rem; flex: none;
  padding: .3125rem .6875rem .3125rem .5625rem; border-radius: 999px;
  border: 1px solid var(--trait); background: var(--blanc); color: var(--texte-doux);
  font-size: .8125rem; font-weight: 600; line-height: 1.35; cursor: pointer;
  white-space: nowrap;
}
.filtre::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c);
  opacity: .25;
}
.filtre:hover { border-color: var(--bleu); }
.filtre[aria-pressed="true"] {
  background: #eef3fd; border-color: var(--bleu); color: var(--prune);
}
.filtre[aria-pressed="true"]::before { opacity: 1; }

/* Carte seule (?vue=carte) : ni adresse, ni jours de collecte, ni titre. */
:root[data-vue="carte"] :is(.entete, #invite-adresse, #bloc-adresse, #titre-carte-section) {
  display: none !important;
}
:root[data-vue="carte"] .vue { padding: 0; }

/* Sans la carte (?carte=non) : ni titre, ni filtres, ni carte, ni liste de repli. */
:root[data-carte="non"] :is(#titre-carte-section, #barre-adresse, #filtres, .carte-zone, #proches) {
  display: none !important;
}

/* Le champ d'adresse au-dessus de la carte ; les propositions passent par-dessus. */
.barre-adresse { position: relative; margin-bottom: .75rem; }
.barre-adresse .champ { margin: 0; }
.barre-adresse .champ input { padding-right: 3rem; }
.barre-adresse__position {
  position: absolute; top: 50%; right: .375rem; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%;
  background: none; color: var(--bleu); cursor: pointer;
}
.barre-adresse__position:hover, .barre-adresse__position:focus-visible { background: var(--gris-clair); }
.barre-adresse__position[aria-busy] { animation: clignote 1s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: .3; } }
.barre-adresse .champ__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.barre-adresse__deroulant {
  position: absolute; z-index: 20; top: calc(100% + .25rem); left: 0; right: 0;
  background: var(--blanc); border-radius: 10px; box-shadow: 0 8px 24px rgba(2, 47, 131, .18);
}
.barre-adresse__deroulant:not(:has(li, p:not([hidden]))) { display: none; }
.barre-adresse__deroulant > * { margin: 0; padding: .5rem; }
.barre-adresse__deroulant .suggestions { margin: 0; }

.carte-zone { position: relative; border-radius: var(--rayon); overflow: hidden;
  border: 1px solid var(--trait); }
#carte { height: 27rem; background: var(--gris-clair); }

.maplibregl-map { font-family: var(--texte-police); }
.maplibregl-ctrl-group { border-radius: 10px !important; box-shadow: 0 1px 6px rgba(59, 45, 76, .2) !important; }
.maplibregl-ctrl-attrib { font-size: 11px; }
.maplibregl-ctrl-attrib a { color: var(--texte-doux); }

/* Le repère de l'adresse de l'habitant : le seul marqueur en HTML, les points
   de dépôt étant dessinés par la carte elle-même. */
.pastille-carte--vous {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bleu); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(2, 47, 131, .45);
}
.pastille-carte--vous svg { width: 20px; height: 20px; fill: #fff; }

.carte-indisponible {
  padding: 2.5rem 1.5rem; text-align: center; color: var(--texte-doux);
  background: var(--gris-clair); margin: 0;
}

.proches { margin-top: 1.75rem; }
.proches__groupe {
  font-family: var(--titre); font-weight: 700; font-size: .9375rem;
  color: var(--prune); letter-spacing: -.01em; padding: 1.25rem 0 .375rem;
}
.proches__groupe:first-child { padding-top: 0; }

.proche {
  display: grid; grid-template-columns: 11px 1fr auto; gap: 1rem; align-items: center;
  padding: .875rem 0; border: 0; border-bottom: 1px solid var(--trait);
  background: none; width: 100%; text-align: left; cursor: pointer;
}
.proche:hover .proche__nom { color: var(--bleu); }
.proche__puce { width: 11px; height: 11px; border-radius: 50%; background: var(--c); }
.proche__nom { font-weight: 600; font-size: .9375rem; color: var(--prune); }
.proche__detail { font-size: .875rem; color: var(--texte-doux); }
.proche__distance {
  font-size: .875rem; font-weight: 700; color: var(--prune);
  font-variant-numeric: tabular-nums;
}

.etat {
  display: inline-block; margin-top: .25rem; padding: .125rem .625rem;
  border-radius: 999px; font-size: .75rem; font-weight: 600;
}
.etat--ouvert { background: var(--menthe); color: var(--noir); }
.etat--ferme { background: var(--gris-clair); color: var(--texte-doux); }

/* ————————————————————————————————————————————————— objets */

.recherche { margin-bottom: 1.25rem; }
.recherche__label { display: block; font-size: .9375rem; color: var(--texte-doux); margin-bottom: .375rem; }
.recherche__champ, .champ input {
  width: 100%; padding: .875rem 1.125rem; font: inherit;
  border: 1px solid var(--trait); border-radius: 999px; background: var(--blanc);
  color: var(--texte);
}
.recherche__champ:focus, .champ input:focus { border-color: var(--bleu); }
.recherche__champ { font-size: 1.0625rem; }
.recherche__aide { font-size: .875rem; color: var(--texte-doux); margin: .625rem 0 0; }

.objet {
  width: 100%; text-align: left; background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 1rem 1.125rem; margin-bottom: .625rem; cursor: pointer;
}
.objet:hover { border-color: var(--bleu); }
.objet__nom {
  display: block; font-family: var(--titre); font-weight: 700; font-size: 1.0625rem;
  color: var(--prune); letter-spacing: -.02em;
}
.objet__syn { display: block; font-size: .875rem; color: var(--texte-doux); }
.objet__dest { display: flex; gap: .375rem; flex-wrap: wrap; margin-top: .625rem; }
.etiquette {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .75rem; font-weight: 600; padding: .25rem .625rem .25rem .5rem;
  border-radius: 999px; background: var(--gris-clair); color: var(--prune);
}
.etiquette::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--texte-doux)); }

.vide-recherche { color: var(--texte-doux); padding: 1.5rem 0; }
.suggestion__numero { color: var(--bleu); }

/* Quand la rue est choisie sans numéro : les numéros connus, à cliquer. */
.numeros { display: flex; flex-wrap: wrap; gap: .375rem; padding: .25rem 0; }
.numero {
  font: inherit; font-size: .9375rem; font-weight: 600; color: var(--prune);
  background: var(--gris-clair); border: 1px solid transparent; border-radius: 999px;
  min-width: 2.75rem; padding: .375rem .625rem; cursor: pointer;
}
.numero:hover, .numero:focus-visible { border-color: var(--bleu); color: var(--bleu); }
.numero--sans { background: none; border-color: var(--trait); color: var(--texte-doux); font-weight: 400; }

/* ————————————————————————————————————————————————— panneaux

   Ni <dialog> ni position fixe : en iframe, une modale centrée sur la hauteur
   du cadre tomberait hors de l'écran. Le panneau se pose en haut de la zone
   réellement visible, que la page hôte nous indique.                         */

.panneau[hidden] { display: none; }

.panneau {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: end center;
  padding: clamp(.75rem, 4vh, 3rem) var(--gouttiere) 20px;
  /* Le fond se floute plutôt que de s'assombrir. */
  background: rgba(255, 255, 255, .15);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  overflow-y: auto;
}
/* Le voile couvre tout le cadre ; la boîte se cale à 20 px du bas de la zone
   visible. En hauteur automatique, 100vh est la hauteur du cadre entier. */
:root[data-hauteur="auto"] .panneau {
  position: absolute; inset: 0; overflow: visible; padding-top: 0;
  padding-bottom: calc(100vh - var(--fenetre-haut, 0px) - var(--fenetre-hauteur, 100vh) + 20px);
}

.panneau__boite {
  width: min(32rem, 100%); background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-fort); overflow: hidden;
  box-shadow: 0 20px 60px rgba(2, 47, 131, .3);
}

.panneau__entete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.375rem 1rem; border-bottom: 1px solid var(--trait);
}
.panneau__entete h2 { font-size: 1.375rem; }
.panneau__fermer {
  background: var(--gris-clair); border: 0; border-radius: 50%;
  width: 34px; height: 34px; font-size: 1.375rem; line-height: 1;
  cursor: pointer; color: var(--prune); flex: none;
}
.panneau__fermer:hover { background: var(--bleu); color: #fff; }

.panneau__corps { padding: 1.25rem 1.375rem 1.5rem; max-height: 70vh; overflow-y: auto; }
/* En hauteur automatique, « vh » vaut la hauteur du cadre entier, pas celle de
   l'écran : on se cale sur la portion visible signalée par la page hôte. */
:root[data-hauteur="auto"] .panneau__corps {
  max-height: calc(var(--fenetre-hauteur, 70vh) - 9rem);
}
/* Une fiche longue (emballages…) défile dans sa boîte plutôt que de couvrir l'écran. */
#pan-fiche .panneau__corps { max-height: min(24rem, 70vh); }
:root[data-hauteur="auto"] #pan-fiche .panneau__corps {
  max-height: min(24rem, calc(var(--fenetre-hauteur, 70vh) - 9rem));
}
.panneau__actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.25rem; }
.panneau__erreur { color: var(--alerte); font-size: .9375rem; margin-top: .75rem; font-weight: 600; }

.champ { display: block; margin-bottom: .875rem; }
.champ__label { display: block; font-size: .9375rem; color: var(--texte-doux); margin-bottom: .375rem; }
.champ__aide { font-size: .875rem; color: var(--texte-doux); }

.separateur { display: flex; align-items: center; gap: .75rem; color: var(--texte-doux);
  font-size: .875rem; margin: 1.125rem 0; }
.separateur::before, .separateur::after { content: ""; flex: 1; height: 1px; background: var(--trait); }

.suggestions { max-height: 16rem; overflow-y: auto; margin-bottom: .5rem; }
.suggestion {
  display: block; width: 100%; text-align: left; padding: .6875rem .875rem;
  background: none; border: 0; border-radius: 10px; cursor: pointer;
}
.suggestion:hover, .suggestion[aria-selected="true"] { background: var(--gris-clair); }
.suggestion__voie { display: block; font-weight: 600; color: var(--prune); }
.suggestion__commune { display: block; font-size: .875rem; color: var(--texte-doux); }

/* contenu des fiches */
.fiche__intro { color: var(--texte-doux); margin-bottom: 1rem; }
.fiche__liste { margin-bottom: 1rem; }
.fiche__liste li { padding: .3125rem 0 .3125rem 1.625rem; position: relative; font-size: .9375rem; }
.fiche__liste li::before { position: absolute; left: 0; top: .3125rem; font-weight: 700; }
.fiche__liste--oui li::before { content: "+"; color: var(--verre); }
.fiche__liste--non li::before { content: "–"; color: var(--alerte); }
.fiche__quand {
  padding: .75rem .875rem; background: var(--gris-clair); border-radius: 10px;
  font-size: .9375rem;
}
.fiche__quand strong { color: var(--prune); }

.fiche__sous-titre {
  font-family: var(--titre); font-weight: 700; font-size: 1.0625rem; color: var(--prune);
  letter-spacing: -.02em; margin: 1.25rem 0 .375rem;
}
.fiche__horaires { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.fiche__horaires th { text-align: left; font-weight: 400; color: var(--texte-doux); padding: .3125rem 0; }
.fiche__horaires td { text-align: right; padding: .3125rem 0; font-variant-numeric: tabular-nums; }
.fiche__horaires tr[data-aujourdhui] th,
.fiche__horaires tr[data-aujourdhui] td { font-weight: 700; color: var(--prune); }

/* ————————————————————————————————————————————————— pied */



/* ————————————————————————————————————————————————— écrans larges */

@media (min-width: 44em) {
  body { font-size: 1.125rem; }
  .titre-section { font-size: 1.5rem; }
  #carte { height: 30rem; }
  .vue { padding-top: 1.75rem; }

  /* Assez de place pour le moment dans chaque case, comme sur l'affiche. */
  .grille__coin { width: 13rem; font-size: 1rem; }
  .grille__jour { font-size: 1rem; }
  .grille__jour-long { display: inline; }
  .grille__jour-court { display: none; }
  .grille__nom, .autres-flux__ligne { font-size: 1.0625rem; }
  .grille__mode--large { display: block; }
  .grille__mode--etroit { display: none; }
  .grille__moment { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}