/* Version imprimable des jours de collecte : une feuille A4, noir sur blanc,
   où seules les couleurs des bacs sont en couleur. À l'écran, la feuille est
   posée sur un fond gris pour qu'on voie ce qui sera imprimé.                */

@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 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;
  --bleu: #0356f2;
  --texte: #000;
  --texte-doux: #333;
  /* Assez foncé pour survivre à une imprimante de bureau. */
  --trait: #8c8c8c;
  --gris-clair: #f3f5fa;
  --om: #6b7280; --ts: #f2c200; --bio: #8a6a3c; --verre: #1e8a5f;
  --enc: #3b2d4c; --textile: #e6007e;
}

* { box-sizing: border-box; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body {
  margin: 0; background: #e9ecf2; color: var(--texte);
  font-family: var(--texte-police); font-size: 10.5pt; line-height: 1.35;
}

/* ————————————————————————————————————————————————— barre écran */
.outils {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 210mm; margin: 0 auto; padding: 1rem .5rem .5rem;
}
.outils a { color: var(--bleu); font-weight: 600; text-decoration: none; }
.outils__actions { display: flex; gap: .5rem; align-items: center; }
.outils__imprimer, .outils__pdf {
  font: inherit; font-weight: 700; color: #fff; background: var(--bleu);
  border: 0; border-radius: 999px; padding: .5rem 1.25rem; cursor: pointer;
  text-decoration: none;
}
.outils__pdf { color: var(--bleu); background: #fff; box-shadow: inset 0 0 0 2px var(--bleu); }
/* Le choix du format : deux pilules, celle en cours pleine. */
.outils__formats { display: flex; gap: .25rem; padding: .2rem; border-radius: 999px; background: #fff; }
.outils__formats a { padding: .35rem .9rem; border-radius: 999px; font-size: .9375rem; }
.outils__formats a[aria-current="page"] { background: var(--bleu); color: #fff; }
body[data-format="affiche"] .outils { max-width: 297mm; }

/* ————————————————————————————————————————————————— feuille */
.feuille {
  display: flex; flex-direction: column;
  width: 210mm; height: 297mm; margin: 0 auto 2rem;
  /* Mêmes marges qu'à l'impression : ce qui tient à l'écran tient sur papier. */
  padding: 12mm 14mm; background: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .12);
}
/* Le pied se cale en bas : la feuille est pleine, quel que soit le profil. */
#feuille-corps { display: flex; flex-direction: column; flex: 1; }
/* Le bandeau des affiches de la Métropole : logo à gauche, slogan à droite. */
.bandeau {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin: 0 0 8mm; padding-bottom: 3mm; border-bottom: 1px solid var(--trait);
}
.bandeau__logo { width: 20mm; height: auto; }
.bandeau__slogan {
  margin: 0; text-align: right; font-size: 12pt; line-height: 1.25; color: #000;
}
.bandeau__slogan strong { font-weight: 700; }

.attente, .vide { color: var(--texte-doux); }
.vide a { color: var(--bleu); }

h1 {
  font-family: var(--titre); font-weight: 700; color: #000;
  font-size: 18pt; line-height: 1.1; margin: 0 0 .1rem;
}

h2 {
  font-family: var(--titre); font-weight: 700; color: #000;
  font-size: 11.5pt; margin: 3.5mm 0 1.5mm;
}

/* La semaine : une case par jour, les bacs à sortir dedans. */
.pastille {
  flex: none; width: 3.6mm; height: 3.6mm; border-radius: 50%;
  background: var(--c); display: inline-block; vertical-align: -0.5mm;
}

/* Chaque bac : quand et comment. */
.bacs {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 6mm;
}
.bac {
  display: grid; grid-template-columns: 5mm 1fr; column-gap: 2mm;
  padding: 1.5mm 0; break-inside: avoid;
}
.bac .pastille { width: 4.5mm; height: 4.5mm; margin-top: .8mm; }
.bac__nom { font-weight: 700; margin: 0; }
.bac__consigne { margin: .3mm 0 0; color: #000; font-size: 9pt; line-height: 1.3; }
.bac__liste { margin: .8mm 0 0; font-size: 9pt; line-height: 1.3; color: var(--texte); }

/* Les blocs d'information, comme dans l'outil. */
.infos { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm; }
.info { background: var(--gris-clair); border-radius: 3mm; padding: 2.5mm 3.5mm; margin: 0; break-inside: avoid; }
.info--large { grid-column: 1 / -1; }
.info__titre { font-weight: 700; margin: 0 0 .3mm; }
.info__texte { margin: 0; font-size: 9.5pt; }

.pied {
  display: flex; align-items: center; justify-content: space-between; gap: 6mm;
  margin-top: auto; padding-top: 3mm; border-top: 1px solid var(--trait);
  color: var(--texte-doux); font-size: 8.5pt;
}
.pied p { margin: 0 0 1mm; }
.pied__texte p:first-child { font-size: 10.5pt; color: var(--texte); }
.pied__lien { color: var(--bleu); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pied__qr { flex: none; width: 18mm; height: 18mm; }

/* ————————————————————————————————————————————————— affiche (paysage)

   Pour le frigo ou le hall d'immeuble : le semainier occupe toute la hauteur
   disponible, lisible à deux mètres. Le reste tient en deux lignes.          */
body[data-format="affiche"] .feuille { width: 297mm; height: 210mm; }
body[data-format="affiche"] .bandeau { margin-bottom: 4mm; }
body[data-format="affiche"] h1 { font-size: 22pt; }
/* La grille : jours en colonnes, flux en lignes, un trait entre chaque ligne.
   Mêmes proportions sur les deux formats, en plus grand sur l'affiche.     */
.grille { width: 100%; border-collapse: collapse; margin-top: 5mm; table-layout: fixed; }
.grille th, .grille td { border-bottom: 1px solid var(--trait); padding: 2mm 1mm; text-align: center; vertical-align: middle; }
.grille thead th { border-bottom: 2px solid #000; padding-top: 0; }
.grille__coin { width: 46mm; text-align: left !important; }
.grille__coin, .grille__jour { font-family: var(--titre); font-weight: 700; font-size: 11pt; }
.grille__flux { text-align: left !important; }
.grille__nom { display: flex; align-items: center; gap: 2mm; font-size: 11pt; font-weight: 700; }
.grille__nom .pastille { width: 4mm; height: 4mm; }
.grille__mode { display: block; margin: .6mm 0 0 6mm; font-size: 9pt; font-weight: 400; }
.grille__case .pastille { width: 5mm; height: 5mm; display: block; margin: 0 auto; }
.grille__moment { display: block; margin-top: .6mm; font-size: 9pt; font-weight: 600; }

body[data-format="affiche"] .grille th, body[data-format="affiche"] .grille td { padding: 3.5mm 2mm; }
body[data-format="affiche"] .grille thead th { padding-top: 0; }
body[data-format="affiche"] .grille__coin { width: 78mm; }
body[data-format="affiche"] .grille__coin, body[data-format="affiche"] .grille__jour { font-size: 16pt; }
body[data-format="affiche"] .grille__nom { gap: 2.5mm; font-size: 16pt; }
body[data-format="affiche"] .grille__nom .pastille { width: 6mm; height: 6mm; }
body[data-format="affiche"] .grille__mode { margin: 1mm 0 0 8.5mm; font-size: 12pt; }
body[data-format="affiche"] .grille__case .pastille { width: 8mm; height: 8mm; }
body[data-format="affiche"] .grille__moment { margin-top: 1mm; font-size: 12.5pt; }

.particularite {
  margin: 5mm 0 0; padding: 2.5mm 3.5mm; border-radius: 3mm;
  background: var(--gris-clair); font-size: 11.5pt;
}
/* Les flux sans jour de collecte, sous la grille comme à l'écran : une ligne
   chacun, disque et nom à la taille de ceux de la grille.                  */
.autres { list-style: none; margin: 2.5mm 0 0; padding: 0 0 0 1mm; font-size: 11pt; }
.autres__ligne { display: flex; align-items: baseline; gap: 2mm; padding: .6mm 0; }
.autres__puces { display: inline-flex; gap: .8mm; flex: none; align-self: center; }
.autres .pastille { width: 4mm; height: 4mm; }
body[data-format="affiche"] .autres { font-size: 16pt; margin-top: 4mm; padding-left: 2mm; }
body[data-format="affiche"] .autres__ligne { gap: 2.5mm; padding: 1mm 0; }
body[data-format="affiche"] .autres .pastille { width: 6mm; height: 6mm; }
.pied__contact { font-weight: 600; color: var(--texte); }

/* ————————————————————————————————————————————————— impression
   L'orientation de la page (@page) est posée par imprimer.js selon le format. */
@media print {
  body { background: #fff; }
  .outils { display: none; }
  /* Pas de marge de page (@page, posé par imprimer.js) : les marges sont dans
     la feuille, égales en haut et en bas, assez larges (12 mm) pour qu'aucune
     imprimante de bureau ne rogne le logo. Ainsi le rendu est le même que
     Chrome soit réglé sur « Marges : par défaut » ou « Aucune ». Hauteur un
     cheveu sous la page : à hauteur exacte, Chrome ajoute une page blanche. */
  .feuille { width: auto; height: 296.5mm; margin: 0; box-shadow: none; overflow: hidden; }
  body[data-format="affiche"] .feuille { width: auto; height: 209.5mm; }

}

/* Quand sortir le bac : sous la liste des autres flux, à la même taille. */
.sortie { margin: 2.5mm 0 0 1mm; font-size: 10pt; line-height: 1.35; }
.sortie__titre { font-weight: 700; margin: 0 0 .5mm; }
.sortie__ligne { margin: 0; }
body[data-format="affiche"] .sortie { font-size: 13pt; margin: 4mm 0 0 2mm; }