/* Le journal — ce que lisent les membres (65+).
   Toutes les règles de .claude/rules/design.md §5 s'appliquent au maximum :
   Fraunces uniquement, 22 px, aucune italique, aucune capitale, jamais justifié.
   Et ça doit rester lisible en noir et blanc sur une photocopie fatiguée. */

body { font-size: var(--mt-size-body); background: var(--mt-ground); }

.page { max-width: 760px; margin: 0 auto; padding: 3rem 3.2rem;
  background: var(--mt-surface); border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius); box-shadow: 0 12px 32px -18px rgba(0,0,0,.35); }

.ourlet { display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap; border-bottom: 3px solid var(--mt-text);
  padding-bottom: .6rem; }
.ourlet h1 { font-size: 2.5rem; margin: 0; font-weight: 400; }
.ourlet h1 b { font-weight: 900; color: var(--mt-amber-text); }
.num { font-size: 1.05rem; color: var(--mt-text-soft); }
.sous { color: var(--mt-text-soft); font-size: 1.05rem; margin: .5rem 0 2rem; }

.chapo { font-size: var(--mt-size-lead); line-height: 1.55; margin: 1.4rem 0 2.2rem;
  padding-left: 1rem; border-left: 4px solid var(--mt-amber); }

.mt-article { margin-bottom: 2.4rem; padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--mt-line); }
.mt-article:last-of-type { border-bottom: 0; }
.mt-article h2 { font-size: 1.95rem; margin: .4rem 0 .8rem; font-weight: 600; }

/* Côté membres : casse normale, aucun monospace. La version mono/capitales
   est réservée au back-office. */
.etiq { display: inline-block; padding: .3rem .75rem; border-radius: var(--mt-radius-sm);
  font-weight: 600; font-size: 1.05rem; margin-bottom: .5rem; }
.etiq.danger { background: var(--mt-danger-wash); color: var(--mt-danger); border: 1px solid var(--mt-danger); }
.etiq.safe   { background: var(--mt-safe-wash);   color: var(--mt-safe);   border: 1px solid var(--mt-safe); }
.etiq.info   { background: var(--mt-info-wash);   color: var(--mt-info);   border: 1px solid var(--mt-info); }
/* `neutre` est l'un des quatre tons qu'une veille peut donner à sa rubrique,
   et le seul qui n'avait pas d'étiquette : elle sortait sans fond ni
   bordure, illisible sur le papier. */
.etiq.neutre { background: var(--mt-surface); color: var(--mt-text);
  border: 1px solid var(--mt-text-soft); }

/* Le libellé d'un bloc, quand la veille en déclare plusieurs. Discret :
   il annonce un paragraphe, il ne rivalise pas avec le titre de l'article.
   Pas d'italique et pas de mono — règle « 65+ » de design.md. */
.intertitre { font-size: 1.2rem; font-weight: 600; margin: 1.2rem 0 .3rem;
  color: var(--mt-text-soft); }

.encadre { border: 2px solid var(--mt-safe); background: var(--mt-safe-wash);
  border-radius: var(--mt-radius); padding: 1.1rem 1.4rem; margin-top: 1.2rem; }
.encadre h3 { margin: 0 0 .6rem; font-size: 1.25rem; color: var(--mt-safe); }
.encadre ul { margin: 0; padding-left: 1.3rem; }
.encadre li { margin-bottom: .5rem; }

.origine { font-size: 1rem; color: var(--mt-text-soft); }
.pied { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 3px solid var(--mt-text);
  font-size: 1.15rem; }
.pied b { font-size: 1.2rem; }

@media print {
  @page { size: A4; margin: 15mm; }
  body { background: #fff; font-size: 14pt; color: #000; }
  .page { padding: 0; max-width: none; box-shadow: none; border: 0; }

  /* LES ARTICLES PEUVENT SE COUPER D'UNE PAGE À L'AUTRE.
     `break-inside: avoid` les gardait d'un seul tenant — raisonnable pour
     des brèves, désastreux ici : un article de cette veille occupe presque
     une page entière, donc il ne tenait jamais dans ce qui restait et
     basculait en bloc. Le PDF sortait avec un titre suivi d'une page
     blanche, puis l'article seul sur la suivante. Vu le 28/07/2026.
     Un journal coupe ses articles ; il ne laisse pas de pages vides. */
  .mt-article { orphans: 3; widows: 3; }
  /* Ce qui ne doit PAS se couper : un titre séparé de son texte, une
     étiquette séparée de son titre, un encadré coupé en deux. */
  .mt-article h2 { break-after: avoid; }
  .etiq { break-after: avoid; }
  .encadre, .intertitre { break-inside: avoid; }
  .intertitre { break-after: avoid; }

  /* Une photocopieuse de mairie écrase les nuances : tout passe en noir sur
     blanc. Il FAUT reprendre les sélecteurs à deux classes (.etiq.danger…) :
     sinon leur spécificité l'emporte, les étiquettes restent colorées et
     ressortent en gris moyen sur gris pâle — illisibles.
     Constaté au test papier du 25/07/2026. */
  .etiq, .etiq.danger, .etiq.safe, .etiq.info, .etiq.neutre,
  .encadre { border: 2px solid #000; color: #000; background: #fff; }
  .encadre h3, .origine, .num, .sous, .ourlet h1 b, .chapo,
  .intertitre { color: #000; }
  .chapo { border-left-color: #000; }
  /* Sur papier, une adresse doit pouvoir être recopiée à la main. */
  a { color: #000; text-decoration: none; }
  .mt-article a::after { content: " (" attr(href) ")"; font-size: 11pt; word-break: break-all; }
}

/* L'illustration d'un article, sur la page publique d'une édition.
   Ratio fixe et recadrage : les images des flux ont toutes des formats
   différents, et une colonne de lecture qui change de rythme à chaque
   article fatigue plus qu'elle n'aide. */
.art-illustration { display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: 10px; border: 1px solid var(--mt-line);
  margin: .8rem 0 1rem; background: var(--mt-sunken); }

@media print {
  /* À l'impression, l'illustration passe en petit : l'encre coûte cher et
     ce qu'on distribue autour d'une table, c'est du texte. */
  .art-illustration { max-width: 45%; float: right; margin: 0 0 .6rem .8rem; }
}