/* Band by Band: a council's figures set as a newspaper front page (concept A "La Une", structure S2).
   Printer's red on white, IM Fell Double Pica for the headlines, Manuale for the text. The street of houses is plain
   HTML and CSS: wall height = the band's yearly charge on one scale shared by all councils, house width = its share
   of the council's homes. Every text is 16 px or more, drawing labels included. */
@font-face { font-family: "Fell DP"; src: url(polices/im-fell-double-pica-400-normal.woff2) format("woff2"); font-weight: 400; font-display: optional; }
@font-face { font-family: "Manuale"; src: url(polices/manuale-400-normal.woff2) format("woff2"); font-weight: 400; font-display: optional; }
@font-face { font-family: "Manuale"; src: url(polices/manuale-700-normal.woff2) format("woff2"); font-weight: 700; font-display: optional; }

:root {
  --papier: #ffffff;
  --encre: #141414;
  --rouge: #a8111a;      /* printer's red: masthead, roofs, margin figures */
  --gris: #4a4a4a;
  --voile: #f3f4f6;      /* cool tint for table rows and the footer */
  --titre: "Fell DP", "Iowan Old Style", Georgia, serif;
  --texte: "Manuale", Georgia, serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 19px/1.5 var(--texte); overflow-wrap: break-word; }
a { color: var(--encre); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rouge); }
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }
.saut { position: absolute; left: -999px; top: 0; background: var(--encre); color: #fff; padding: 10px 14px; z-index: 5; }
.saut:focus { left: 0; }

/* ---------- masthead with two ears ---------- */
.tete {
  max-width: 1340px; margin: 0 auto; padding: 22px 48px 0;
  display: grid; grid-template-columns: 360px minmax(0, 1fr) 250px; grid-template-areas: "g t d"; gap: 32px; align-items: start;
}
.titre-journal { grid-area: t; text-align: center; min-width: 0; }
.oreille-g { grid-area: g; }
.oreille-d { grid-area: d; font-size: 17px; line-height: 1.45; }
.nom { margin: 0; font: 400 84px/0.95 var(--titre); white-space: nowrap; letter-spacing: -0.01em; }
.nom a { color: var(--rouge); text-decoration: none; }
.nom i { font-size: 0.62em; }
.ligne-date { margin: 10px 0 0; font: 400 21px/1.3 var(--titre); }
.menu ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; }
.menu a { font-size: 18px; }
.menu [aria-current] { color: var(--rouge); font-weight: 700; }
.oreille-t { display: block; margin: 0 0 8px; font: 700 17px/1.3 var(--texte); color: var(--rouge); }
.oreille p { margin: 0 0 8px; }
.independant { font-style: normal; color: var(--gris); }
/* the setter: the one action of the page, as heavy as the masthead */
.oreille-g { background: var(--voile); padding: 16px 18px 14px; }
.oreille-g .oreille-t { font-size: 21px; margin-bottom: 10px; }
.champ { display: flex; gap: 0; }
.champ input {
  flex: 1; min-width: 0; height: 60px; padding: 0 14px; font: 400 22px var(--texte); color: var(--encre);
  background: #fff; border: 0; border-bottom: 3px solid var(--rouge); border-radius: 0;
}
.champ button {
  height: 60px; padding: 0 22px; border: 0; background: var(--rouge); color: #fff; font: 700 20px var(--texte); cursor: pointer;
}
.champ button:hover { background: var(--encre); }
.aide { font-size: 16px; color: var(--gris); margin: 8px 0 0 !important; }
.erreur { color: var(--rouge); font-weight: 700; font-size: 17px; }
.mobile-seul { display: none; }

/* ---------- the front page ---------- */
main { max-width: 1340px; margin: 0 auto; padding: 0 48px; }
.une { padding-top: 26px; }
h1 { margin: 0; font: 400 56px/1.04 var(--titre); letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; }
.chapo { margin: 14px 0 0; font: 400 25px/1.35 var(--titre); max-width: 62ch; }
.grille { display: grid; grid-template-columns: 170px minmax(0, 1fr) 450px; grid-template-rows: auto 1fr; gap: 22px 34px; align-items: start; }
.titraille { grid-column: 1 / 3; min-width: 0; }
.bandes { grid-column: 3; grid-row: 1 / 3; min-width: 0; }
.marge { grid-column: 1; grid-row: 2; padding-top: 6px; }
.rue { grid-column: 2; grid-row: 2; margin: 0; min-width: 0; }
.marge p { margin: 0 0 20px; font-size: 16px; line-height: 1.35; color: var(--gris); }
.marge b { display: block; font: 400 42px/1 var(--titre); color: var(--rouge); margin-bottom: 4px; }

/* the street */
.lecture { margin: 0 0 16px; padding: 10px 14px; background: var(--voile); font: 400 18px/1.4 var(--texte); min-height: 4.2em; }
.dessin { --haut: 330px; display: grid; grid-template-columns: 58px minmax(0, 1fr); padding: 26px 6px 48px 0; }
.axe { position: relative; height: var(--haut); }
.axe span { position: absolute; right: 8px; bottom: calc(var(--y) * 1%); transform: translateY(50%); font: 400 16px/1 var(--texte); color: var(--gris); }
.maisons {
  list-style: none; margin: 0; padding: 0; height: var(--haut); display: flex; gap: 6px; align-items: flex-end;
  border-bottom: 3px solid var(--encre);
  background: repeating-linear-gradient(to top, transparent 0, transparent calc(var(--pas) - 1px), #d9dbe0 calc(var(--pas) - 1px), #d9dbe0 var(--pas));
}
.maison { position: relative; height: calc(var(--h) * 1%); flex: var(--w) 1 0; min-width: 20px; cursor: pointer; }
.toit { position: absolute; left: -3px; right: -3px; bottom: 100%; height: 20px; background: var(--rouge); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.mur {
  position: absolute; inset: 0; border: 1.5px solid var(--encre);
  background: repeating-linear-gradient(45deg, var(--encre) 0, var(--encre) 1.3px, #fff 1.3px, #fff 5px);
}
.mur::before {
  content: ""; position: absolute; inset: 8px 3px 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='30'%3E%3Crect x='6.5' y='8.5' width='9' height='13' fill='%23fff' stroke='%23141414' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 22px 30px space;
}
.mur::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 10px; height: 20px; margin-left: -5px; background: #fff; border: 1.2px solid var(--encre); border-bottom: 0; }
.lettre { position: absolute; top: 100%; left: -4px; right: -4px; margin-top: 8px; text-align: center; font: 400 26px/1 var(--titre); color: var(--encre); }
.maison.choisi .toit, .maison.survol .toit { background: var(--encre); }
.maison.choisi .mur { border-width: 3px; }
.maison.survol .mur { outline: 3px solid var(--rouge); outline-offset: 1px; }
.maison.choisi .lettre, .maison.survol .lettre { color: var(--rouge); }
.rue figcaption { margin-top: 0; font-size: 16px; line-height: 1.4; color: var(--gris); }
.etroites { margin: 8px 0 0; font-size: 16px; line-height: 1.4; color: var(--encre); }
.etroites:empty { display: none; }

/* the table */
.bandes h2 { margin: 0 0 8px; font: 400 30px/1.1 var(--titre); overflow-wrap: anywhere; }
.tableau { overflow-x: auto; }
.corps { min-width: 0; }
.corps table { table-layout: fixed; max-width: 100%; }
.corps td, .corps th { overflow-wrap: anywhere; }
.tableau:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
thead th { font: 700 16px/1.2 var(--texte); text-align: right; padding: 0 8px 8px; color: var(--gris); vertical-align: bottom; }
thead th:first-child { text-align: left; }
tbody tr:nth-child(odd) { background: var(--voile); }
tbody th { font: 400 28px/1 var(--titre); text-align: left; padding: 4px 8px; color: var(--rouge); width: 56px; }
tbody td { text-align: right; padding: 8px 8px; font-size: 18px; white-space: nowrap; }
tbody td:nth-child(2) { font-weight: 700; font-size: 20px; }
tbody td:last-child { white-space: normal; }
tbody tr:hover, tbody tr.survol { background: #e6e8ec; }
tbody tr.choisi { background: #f2dcde; }
.b-bande { font: 400 28px/1 var(--titre); color: var(--rouge); background: none; border: 0; min-width: 44px; min-height: 44px; padding: 0 6px; cursor: pointer; text-align: left; }
.b-bande[aria-pressed="true"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.note { font-size: 16px; line-height: 1.45; color: var(--gris); margin: 10px 0 0; }

/* below the front page */
.colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 56px 0 0; }
.colonnes h2 { margin: 0 0 8px; font: 400 28px/1.15 var(--titre); color: var(--rouge); }
.colonnes p { margin: 0 0 10px; }
.comparer .champ { margin: 4px 0 10px; }
.comparer h2 label { font: inherit; }

/* an editorial text written for one council or one band (donnees: texte, texte_source) */
.local { max-width: 46rem; margin: 48px 0 0; }
.local h2 { margin: 0 0 8px; font: 400 30px/1.15 var(--titre); color: var(--rouge); }
.local p { margin: 0 0 12px; }

/* the band page: one band in every council, the margin beside the reader's council and the extremes */
.bande-page .grille { grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto auto; }
.bande-page .titraille { grid-column: 1 / -1; }
.bande-page .marge { grid-row: 2; }
.bande-page .bandes { grid-column: 2; grid-row: 2; max-width: 52rem; }
.bande-page h3 { margin: 28px 0 6px; font: 400 26px/1.15 var(--titre); color: var(--rouge); }
.b-choix label { display: block; font: 700 17px/1.3 var(--texte); margin: 0 0 6px; }
.b-choix .champ { max-width: 34rem; }
.b-choix .champ input { background: var(--voile); }
.b-choix .erreur { margin: 8px 0 0; }
.bande-page .lecture { margin: 14px 0 0; min-height: 5.6em; }
.classement tbody th { font: 400 18px/1.3 var(--texte); color: var(--encre); width: auto; padding: 7px 8px; }
.classement tbody td, .classement tbody td:nth-child(2) { font-size: 18px; font-weight: 400; }
.classement .c-m { font-weight: 700; }
.classement .c-nat, .classement thead .c-g { text-align: left; }
.classement td:first-child { text-align: right; color: var(--gris); }
.classement.court td { white-space: nowrap; }
.tout { margin: 22px 0 0; }
.b-tout { min-height: 48px; padding: 10px 18px; border: 2px solid var(--rouge); background: #fff; color: var(--rouge); font: 700 18px/1.2 var(--texte); cursor: pointer; }
.b-tout:hover { background: var(--rouge); color: #fff; }
#b-liste { margin-top: 14px; }
.repartition { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 62rem; }
.repartition h2 { font-size: 26px; }
/* the councils proper to a band, set close like a newspaper's small-print listings */
.repere { margin: 56px 0 0; padding-top: 18px; border-top: 3px solid var(--encre); }
.repere h2 { margin: 26px 0 8px; font: 400 28px/1.15 var(--titre); color: var(--rouge); }
.repere h2:first-child { margin-top: 0; }
.repere p { margin: 0 0 10px; max-width: 72rem; }
.repere p.noms { max-width: 72rem; font-size: 17px; line-height: 1.6; }

.noms b { font-weight: 400; color: var(--rouge); font-variant-numeric: tabular-nums; white-space: nowrap; }
.autres-bandes { margin: 40px 0 0; padding-top: 14px; border-top: 1px solid #d9dbe0; }
.autres-bandes p { margin: 0; }

/* guides and fixed pages */
.texte { max-width: 46rem; margin: 0 auto; padding: 34px 0 0; }
.texte h1 { font-size: 46px; }
.corps h2 { margin: 1.6em 0 0.4em; font: 400 32px/1.15 var(--titre); color: var(--rouge); }
.corps h3 { margin: 1.4em 0 0.3em; font: 700 21px/1.3 var(--texte); }
.corps p, .corps li { max-width: 62ch; }
.renvoi { margin-top: 2em; padding-top: 1em; border-top: 1px solid #d9dbe0; }

/* footer */
.pied { max-width: 1340px; margin: 56px auto 0; padding: 26px 48px 40px; background: var(--voile); font-size: 16px; line-height: 1.5; }
.pied h2 { margin: 0 0 6px; font: 400 24px var(--titre); }
.pied ul { margin: 0 0 10px; padding-left: 20px; }
.pied p { margin: 0 0 8px; }
.pied .liens-pied { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; }
.pied .liens-pied a { display: inline-block; min-height: 24px; padding: 6px 0; }

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) {
  .tete { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "t t" "g d"; gap: 18px 32px; }
  .grille { grid-template-columns: 130px minmax(0, 1fr); }
  .titraille { grid-column: 1 / -1; }
  .bandes { grid-column: 1 / -1; grid-row: auto; }
  .bande-page .grille { grid-template-columns: 180px minmax(0, 1fr); }
  .bande-page .bandes { grid-column: 2; }
}
@media (max-width: 760px) {
  body { font-size: 18px; }
  .tete { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "g"; padding: 14px 18px 0; gap: 14px; }
  .nom { font-size: 58px; }
  .ligne-date { font-size: 17px; margin-top: 4px; }
  .oreille-g { padding: 12px 14px; }
  .oreille-g .oreille-t { font-size: 19px; }
  .champ input, .champ button { height: 56px; }
  main { padding: 0 18px; }
  .une { padding-top: 12px; }
  h1 { font-size: 34px; }
  .chapo { font-size: 20px; }
  .grille, .bande-page .grille { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .titraille, .bandes, .marge, .rue, .bande-page .bandes, .bande-page .marge { grid-column: 1; grid-row: auto; }
  .oreille-d { display: none; }
  .mobile-seul { display: block; max-width: 1340px; margin: 36px auto 0; padding: 0 18px; }
  .mobile-seul h2 { margin: 0 0 8px; font: 400 26px var(--titre); color: var(--rouge); }
  .titraille { order: -1; }
  .bandes { order: 0; }
  .rue { order: 1; }
  .marge { order: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .marge p { margin: 0; font-size: 16px; }
  .marge b { font-size: 30px; }
  .dessin { --haut: 250px; grid-template-columns: 50px minmax(0, 1fr); }
  .maisons { gap: 4px; }
  .maison { min-width: 17px; }
  .lettre { font-size: 22px; }
  .c10, tbody td:nth-child(3) { display: none; }
  thead th { padding: 0 4px 6px; }
  tbody td { padding: 7px 4px; font-size: 17px; }
  tbody td:nth-child(2) { font-size: 17px; }
  tbody th { padding: 2px 2px; width: 44px; }
  .colonnes { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 36px; }
  .pied { padding: 20px 18px 30px; }
  .bande-page .classement tbody th { font-size: 17px; padding: 6px 4px; }
  .bande-page .classement tbody td { display: table-cell; font-size: 17px; padding: 6px 4px; }
  .bande-page .classement .c-nat, .bande-page .classement .c12, .bande-page .classement .c-rang { display: none; }
  .repartition { grid-template-columns: minmax(0, 1fr); }
  .texte h1 { font-size: 34px; }
  .texte { padding-top: 14px; }
}
@media (max-width: 400px) { .nom { font-size: 46px; } h1 { font-size: 30px; } .axe span { right: 4px; } }
@media (max-width: 340px) { .nom { font-size: 40px; } .tete, main { padding-left: 14px; padding-right: 14px; } tbody td { padding: 7px 3px; font-size: 16px; } .dessin { grid-template-columns: 46px minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* tableaux des guides : pas les réglages du tableau des bandes */
.corps tbody td, .corps tbody td:nth-child(2), .corps tbody td:nth-child(3) { white-space: normal; text-align: left; font-weight: 400; font-size: 17px; display: table-cell; }