/* ============================================================
   La feuille des nouveautés.

   Deux documents s'impriment avec ces règles : le billet écrit
   pour un public — une nouveauté — et la note d'une version.
   Ils ne viennent pas de la même table, mais ils disent la même
   chose dans le même ordre : un titre, un chapeau, puis ce qui
   change, rubrique par rubrique. Deux feuilles de style les
   auraient fait diverger au premier ajustement.

   Ce n'est pas un bon de commande, et cela se voit : rien à
   remplir, rien à cocher, pas de colonne de montants. C'est un
   document qui se lit — d'où un corps de 9,5 points contre 8, des
   marges larges, et une seule colonne. Il peut aussi tenir sur
   plusieurs pages, ce qu'un bon de commande ne fait jamais : les
   règles de coupure comptent donc autant que le dessin.

   Le socle — le format A4, le cadre d'aperçu, la barre d'action,
   la règle @media print — est dans paper.css.
   ============================================================ */

.ns {
    --ns-ink: #14181d;
    --ns-muted: #5d646f;
    --ns-rule: #d9dde2;
    --ns-hair: #eceef1;
    --ns-accent: #0e6e63;

    padding: 16mm 18mm 14mm;
    font-size: 9.5pt;
    line-height: 1.45;
}

/* --- Les rubriques ---

   Une teinte par rubrique, et elle ne sert qu'à la pastille et au titre : le texte reste noir,
   parce que la feuille part chez un client et que huit lignes en couleur ne se lisent plus.
   Les quatre valeurs couvrent les deux documents — NewsKind et ReleaseItemCategory portent les
   mêmes mots, d'où les mêmes classes. */
.ns-feature {
    --ns-tone: #0e6e63;
}

.ns-improvement {
    --ns-tone: #2573c1;
}

.ns-fix {
    --ns-tone: #a8631a;
}

.ns-info,
.ns-other {
    --ns-tone: #5d646f;
}

/* --- En-tête ---

   Le filet est épais et à l'encre du texte : c'est ce qui donne au document sa tête de
   publication plutôt que de note interne. */
.ns-head {
    display: flex;
    align-items: flex-start;
    gap: 10mm;
    padding-bottom: 3mm;
    border-bottom: 2px solid var(--ns-ink);
}

.ns-head-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* Le surtitre : ce dont la feuille parle avant qu'on ait lu son titre — le produit, sa
   version, la rubrique annoncée. */
.ns-eyebrow {
    margin: 0 0 1.5mm;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2.5mm;
    font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    font-size: 7pt;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ns-accent);
}

.ns-eyebrow-sep {
    color: var(--ns-rule);
}

.ns-title {
    margin: 0;
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-size: 21pt;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.06;
    text-wrap: balance;
}

/* La date, en tête à droite avec le logo. Une note de version se retrouve par sa date au
   moins autant que par son numéro. */
.ns-stamp {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2mm;
    text-align: right;
}

.ns-stamp-logo {
    display: block;
    width: 30mm;
    height: auto;
}

.ns-stamp-date {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 7.5pt;
    letter-spacing: .04em;
    color: var(--ns-muted);
}

/* --- Le chapeau ---

   Deux ou trois phrases, en plus grand que le corps : c'est ce qu'on lit quand on ne lit que
   le début. */
.ns-lead {
    margin: 6mm 0 0;
    max-width: 150mm;
    font-size: 11.5pt;
    line-height: 1.4;
    color: var(--ns-muted);
    text-wrap: pretty;
}

/* --- Le corps rédigé ---

   Ce que le rédacteur a écrit en Markdown. Les marges sont resserrées par rapport à l'écran :
   sur papier, un paragraphe qui respire trop pousse la suite à la page suivante. */
.ns-body {
    margin-top: 5mm;
}

.ns-body > :first-child {
    margin-top: 0;
}

.ns-body p {
    margin: 0 0 2.5mm;
}

.ns-body h1,
.ns-body h2,
.ns-body h3 {
    margin: 5mm 0 1.5mm;
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-size: 11pt;
    font-weight: 600;
    line-height: 1.2;
    break-after: avoid;
}

.ns-body ul,
.ns-body ol {
    margin: 0 0 2.5mm;
    padding-left: 5mm;
}

.ns-body li {
    margin-bottom: .8mm;
}

.ns-body a {
    color: var(--ns-accent);
    text-decoration: none;
}

.ns-body code {
    font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    font-size: .92em;
    background: var(--ns-hair);
    padding: 0 1mm;
    border-radius: .8mm;
}

.ns-body img {
    max-width: 100%;
    height: auto;
}

/* --- Les rubriques ---

   Le titre porte sa pastille et son filet. « break-after: avoid » le colle à ce qu'il
   annonce : un titre de rubrique seul en bas de page ne dit rien. */
.ns-section {
    margin-top: 8mm;
}

.ns-section-head {
    display: flex;
    align-items: center;
    gap: 2.5mm;
    padding-bottom: 1.2mm;
    border-bottom: 1.5px solid var(--ns-tone, var(--ns-accent));
    break-after: avoid;
}

.ns-section-dot {
    flex: none;
    width: 2.2mm;
    height: 2.2mm;
    border-radius: 50%;
    background: var(--ns-tone, var(--ns-accent));
}

.ns-section-title {
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-size: 11pt;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--ns-tone, var(--ns-accent));
}

/* Le compte de la rubrique, à droite du filet. Trois corrections se voient avant d'être
   comptées. */
.ns-section-count {
    margin-left: auto;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 7.5pt;
    color: var(--ns-muted);
}

/* --- Les entrées ---

   Une liste sans puces : le titre de l'entrée fait office de repère, et une puce devant un
   texte en gras alourdit la colonne. Le filet de séparation est un cheveu.

   « break-inside: avoid » tient une entrée d'un seul tenant : une phrase coupée entre deux
   pages est ce qui distingue un document imprimé d'un document mis en page. */
.ns-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ns-entry {
    padding: 2.5mm 0;
    border-bottom: 1px solid var(--ns-hair);
    break-inside: avoid;
}

.ns-entry:last-child {
    border-bottom: 0;
}

.ns-entry-title {
    font-weight: 600;
}

/* La référence du ticket, pour qui suit un numéro précis. Elle n'accompagne que les documents
   internes — voir NoteSheet. */
.ns-entry-ref {
    margin-left: 2mm;
    font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    font-size: 7.5pt;
    color: var(--ns-muted);
}

.ns-entry-body {
    margin-top: .8mm;
    color: var(--ns-muted);
}

.ns-entry-body p {
    margin: 0 0 1.5mm;
}

.ns-entry-body > :last-child {
    margin-bottom: 0;
}

/* Une entrée sans phrase rédigée : seul son titre porte. Le corps ne s'affiche pas, et
   l'espacement se resserre pour que la liste reste une liste. */
.ns-entry-bare {
    padding: 1.6mm 0;
}

/* --- Ce qui se dit après la liste --- */
.ns-outro {
    margin-top: 8mm;
    padding-top: 3mm;
    border-top: 1px solid var(--ns-rule);
    font-size: 9pt;
    color: var(--ns-muted);
    break-inside: avoid;
}

/* --- Pied de page ---

   Il suit le contenu plutôt que de coller au bas de la feuille : sur un document de trois
   pages, un pied collé au bas de la première n'aurait aucun sens. */
.ns-foot {
    margin-top: 10mm;
    padding-top: 2mm;
    border-top: 1px solid var(--ns-ink);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6mm;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 6.8pt;
    letter-spacing: .05em;
    color: var(--ns-muted);
    break-inside: avoid;
}

/* Un brouillon s'imprime — il faut bien le relire — mais la feuille doit le dire d'elle-même :
   une fois posée sur un bureau, elle n'a plus la barre d'action pour l'annoncer. */
.ns-draft {
    margin-bottom: 4mm;
    padding: 1.5mm 3mm;
    border: 1px solid #d8a94b;
    border-radius: 1mm;
    background: #fdf6e7;
    color: #8a5610;
    font-size: 8pt;
    font-weight: 500;
}