/* Aucune police téléchargée, aucune variable CSS, aucun flexbox-gap :
   compatible jusqu'aux navigateurs Android 4.x. Poids : environ 3 Ko. */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #F3F5EE; color: #16241C;
  font: 15px/1.45 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  padding-bottom: 60px;
  -webkit-text-size-adjust: 100%;
}
a { color: #16241C; text-decoration: none; }
main, .tete > * { max-width: 760px; margin: 0 auto; padding: 0 12px; }

/* ---------------------------------------------------------------- en-tête */
.tete { background: #FFF; border-bottom: 1px solid #D6DCCE; padding: 8px 0 6px; }
.rang { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; padding-bottom: 6px; }
.marque { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.liens a { font-size: 12px; color: #6F786C; margin-left: 10px; }
.liens a.fort { color: #FFF; background: #2E6B44; padding: 4px 9px; border-radius: 3px; }

form.rang { padding-bottom: 8px; }
.q { flex: 1; min-width: 0; border: 1px solid #D6DCCE; border-radius: 3px;
     padding: 7px 10px; font-size: 15px; background: #FFF; color: #16241C; }
.go { border: 1px solid #2E6B44; background: #2E6B44; color: #FFF;
      border-radius: 3px; padding: 7px 12px; margin-left: 6px; font-size: 15px; cursor: pointer; }

/* Les filtres défilent horizontalement : aucun repli, aucune hauteur perdue. */
.filtre { display: flex; align-items: center; overflow-x: auto; white-space: nowrap;
          padding-top: 3px; padding-bottom: 5px; -webkit-overflow-scrolling: touch; }
.filtre::-webkit-scrollbar { display: none; }
.etiq { font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
        color: #9AA396; margin-right: 8px; flex: none; }
.puce { flex: none; font-size: 13px; color: #6F786C; border: 1px solid #D6DCCE;
        border-radius: 12px; padding: 3px 10px; margin-right: 5px; background: #FFF; }
.puce.on { background: #2E6B44; border-color: #2E6B44; color: #FFF; }
.filtre.pub .puce.on { background: #B27E09; border-color: #B27E09; }

/* ---------------------------------------------------------------- bilan */
.bilan { display: flex; justify-content: space-between; align-items: baseline;
         padding-top: 12px; padding-bottom: 6px; font-size: 12px; color: #6F786C; }
.bilan b { color: #16241C; font-size: 13px; }

/* --------------------------------------------------------------- épisodes */
.liste { list-style: none; }
.ep { border-bottom: 1px solid #E2E7DA; padding: 11px 0; }
.ep h2 { font-size: 16px; line-height: 1.3; font-weight: 600; }
.ep h2 a:active { color: #2E6B44; }
.res { font-size: 13px; color: #6F786C; margin-top: 2px;
       display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta { margin-top: 6px; font-size: 11px; line-height: 1.9; }
.meta span, .meta a { display: inline-block; margin-right: 5px; }
.th { color: #2E6B44; background: #E4EEE6; padding: 1px 7px; border-radius: 3px; font-weight: 600; }
.ci { color: #8A6407; background: #FBF0D8; padding: 1px 7px; border-radius: 3px; }
.nb { color: #9AA396; }
.cout { font-weight: 600; color: #B27E09; }
.dl { color: #2E6B44; font-weight: 600; text-decoration: underline; }

.vide, .pied { padding: 24px 0; font-size: 12px; color: #9AA396; line-height: 1.8; }

/* ---------------------------------------------------------------- lecteur */
.lect { position: fixed; left: 0; right: 0; bottom: 0; background: #16241C; color: #F3F5EE;
        display: flex; align-items: center; padding: 8px 12px; font-size: 13px; }
.lect button { border: 0; background: none; color: #F3F5EE; font-size: 15px; cursor: pointer; padding: 4px 8px; }
.lect span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; }

:focus { outline: 2px solid #2E6B44; outline-offset: 1px; }

/* Écran large : deux colonnes de filtres côte à côte, rien d'autre ne change. */
@media (min-width: 700px) {
  .ep { padding: 13px 0; }
  .ep h2 { font-size: 17px; }
}