/* The Notice Board — st-johns-aberdeen.org · direction 16 L'Atelier de Papiers Collés
   Feuillets posés en biais tenus par des bouts de ruban. Ombres dures décalées (sauge),
   jamais de flou. Filets pleine largeur. Source Serif en display, Inter en texte, Plex Mono
   pour les cotes. */
@font-face { font-family: 'Source Serif 4'; src: url('/source-serif-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('/source-serif-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/ibm-plex-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --nb-creme: #FAF6EF;
  --nb-papier: #fffdf8;
  --nb-papier-fonce: #f1e9dc;
  --nb-encre: #1e2933;
  --nb-encre-douce: #4c5866;
  --nb-mure: #8c3f59;
  --nb-mure-pale: #e7d3da;
  --nb-sauge: #9bae9a;
  --nb-sauge-pale: #d9e2d7;
  --nb-filet: color-mix(in srgb, var(--nb-encre) 14%, var(--nb-creme));
  --nb-ruban: color-mix(in srgb, var(--nb-mure) 24%, var(--nb-papier));
  --nb-srm: #8c3f59;
  --nb-ntc: #33624f;
  --nb-par: #a05a2c;
  --nb-fab: #3d4f7c;
  --nb-serif: 'Source Serif 4', Georgia, serif;
  --nb-sans: 'Inter', 'Segoe UI', sans-serif;
  --nb-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.nb-page {
  margin: 0; background: var(--nb-creme); color: var(--nb-encre);
  font-family: var(--nb-sans); font-size: 1rem; line-height: 1.68;
  background-image: repeating-linear-gradient(0deg, transparent 0 2.4rem, color-mix(in srgb, var(--nb-sauge) 12%, transparent) 2.4rem calc(2.4rem + 1px));
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--nb-mure); text-decoration-color: color-mix(in srgb, var(--nb-mure) 45%, transparent); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--nb-mure); }

.nb-acces-direct { position: absolute; left: -9999px; top: 0; background: var(--nb-encre); color: var(--nb-papier); padding: 0.5rem 1rem; z-index: 50; }
.nb-acces-direct:focus { left: 0.5rem; }

/* ——— fronton : la baguette du panneau ——— */
.nb-fronton { border-bottom: 1px solid var(--nb-filet); background: var(--nb-papier); }
.nb-fronton__grille {
  max-width: 78rem; margin: 0 auto; min-height: 5.5rem; padding: 0 1.4rem;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem;
}
.nb-enseigne {
  position: relative; font-family: var(--nb-serif); font-weight: 700; font-size: 1.32rem;
  letter-spacing: -0.03em; color: var(--nb-encre); text-decoration: none; padding: 0.42rem 0.9rem 0.5rem;
  background: var(--nb-papier-fonce); border-radius: 3px; transform: rotate(-1.4deg);
  box-shadow: 0.35rem 0.35rem 0 var(--nb-sauge-pale);
}
.nb-enseigne__ruban {
  position: absolute; top: -0.5rem; left: 50%; width: 2.6rem; height: 0.85rem; margin-left: -1.3rem;
  background: var(--nb-ruban); transform: rotate(-4deg); border-radius: 1px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--nb-mure) 30%, transparent);
}
.nb-devise { margin: 0; font-family: var(--nb-mono); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--nb-encre-douce); text-align: right; max-width: 22ch; }
.nb-parcours ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem 1.3rem; list-style: none; margin: 0; padding: 0; }
.nb-parcours__lien {
  font-family: var(--nb-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--nb-encre-douce); text-decoration: none; padding: 0.25rem 0.1rem;
}
.nb-parcours__lien:hover, .nb-parcours__lien[aria-current="page"] { color: var(--nb-mure); border-bottom: 2px solid var(--nb-mure); }

main { display: block; }
.nb-zone { max-width: 78rem; margin: 0 auto; padding: 2.6rem 1.4rem 2.8rem; border-top: 1px solid var(--nb-filet); }
.nb-zone:first-of-type { border-top: 0; }
.nb-zone__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.4rem; margin-bottom: 1.8rem; }
.nb-zone__tete h2 { font-family: var(--nb-serif); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -0.045em; margin: 0; }
.nb-zone__tete h2 a { color: var(--nb-encre); text-decoration: none; }
.nb-zone__tete h2 a:hover { color: var(--nb-mure); }
.nb-zone__phrase { margin: 0; color: var(--nb-encre-douce); font-size: 0.92rem; max-width: 58ch; }
.nb-zone__decompte { margin-left: auto; font-family: var(--nb-mono); font-size: 0.72rem; color: var(--nb-encre-douce); }
.nb-zone__renvoi { margin: 1.4rem 0 0; }
.nb-renvoi { font-family: var(--nb-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--nb-mure); padding-bottom: 0.15rem; }

/* ——— liminaire ——— */
.nb-liminaire { padding-top: 3.4rem; }
.nb-liminaire__sur { font-family: var(--nb-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nb-mure); margin: 0 0 0.9rem; }
.nb-liminaire__titre {
  font-family: var(--nb-serif); font-weight: 700; font-size: clamp(2.8rem, 8vw, 7.2rem);
  letter-spacing: -0.055em; line-height: 0.98; margin: 0 0 1.4rem; max-width: 15ch; color: var(--nb-encre);
}
.nb-liminaire__intro { font-size: 1.06rem; max-width: 68ch; color: var(--nb-encre-douce); margin: 0 0 1.6rem; }
.nb-bilan { display: flex; flex-wrap: wrap; gap: 1rem 2.6rem; list-style: none; margin: 0; padding: 1.1rem 0 0; border-top: 1px solid var(--nb-filet); }
.nb-bilan__poste { display: flex; flex-direction: column; }
.nb-bilan__chiffre { font-family: var(--nb-serif); font-weight: 700; font-size: 1.7rem; letter-spacing: -0.03em; }
.nb-bilan__libelle { font-family: var(--nb-mono); font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--nb-encre-douce); }

/* ——— vedette : le feuillet du haut ——— */
.nb-vedette {
  position: relative; display: grid; grid-template-columns: minmax(0, 42rem) minmax(0, 1fr); gap: 2.2rem;
  background: var(--nb-papier); padding: 1.6rem; border-radius: 4px; transform: rotate(-0.7deg);
  box-shadow: 1rem 1rem 0 var(--nb-sauge-pale);
}
.nb-vedette::before, .nb-vedette::after {
  content: ""; position: absolute; top: -0.7rem; width: 5.4rem; height: 1.5rem;
  background: var(--nb-ruban); border-radius: 2px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--nb-mure) 28%, transparent);
}
.nb-vedette::before { left: 12%; transform: rotate(-5deg); }
.nb-vedette::after { right: 10%; transform: rotate(3deg); }
.nb-vedette__figure { margin: 0; }
.nb-vedette__figure img { width: 100%; border-radius: 3px; }
.nb-vedette__texte { align-self: center; }
.nb-vedette__intitule { font-family: var(--nb-serif); font-weight: 700; font-size: clamp(1.9rem, 4vw, 3.1rem); letter-spacing: -0.05em; line-height: 1.04; margin: 0.4rem 0 0.8rem; }
.nb-vedette__intitule a { color: var(--nb-encre); text-decoration: none; }
.nb-vedette__intitule a:hover { color: var(--nb-mure); }
.nb-vedette__abrege { color: var(--nb-encre-douce); max-width: 52ch; margin: 0 0 0.8rem; }

/* ——— feuillets : les papiers du tableau ——— */
.nb-tableau { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 2rem 1.7rem; }
.nb-feuillet {
  position: relative; background: var(--nb-papier); padding: 0.9rem 0.9rem 1.1rem; border-radius: 3px;
  box-shadow: 0.55rem 0.55rem 0 var(--nb-sauge-pale);
  transition: transform 0.18s ease;
}
.nb-feuillet::before {
  content: ""; position: absolute; top: -0.55rem; left: 50%; width: 3.4rem; height: 1.05rem; margin-left: -1.7rem;
  background: var(--nb-ruban); transform: rotate(-5deg); border-radius: 1px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--nb-mure) 26%, transparent);
}
.nb-feuillet--r1 { transform: rotate(-1.6deg); } .nb-feuillet--r1::before { transform: rotate(4deg); }
.nb-feuillet--r2 { transform: rotate(1.2deg); } .nb-feuillet--r2::before { transform: rotate(-6deg); }
.nb-feuillet--r3 { transform: rotate(-0.8deg); } .nb-feuillet--r3::before { transform: rotate(2deg); }
.nb-feuillet--r4 { transform: rotate(1.8deg); } .nb-feuillet--r4::before { transform: rotate(-3deg); }
.nb-feuillet--r5 { transform: rotate(-2.1deg); } .nb-feuillet--r5::before { transform: rotate(5deg); }
.nb-feuillet:hover { transform: rotate(0deg); }
.nb-feuillet__figure { margin: 0 0 0.9rem; }
.nb-feuillet__figure img { width: 100%; border-radius: 2px; }
.nb-feuillet__texte { padding: 0 0.3rem; }
.nb-feuillet__meta { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.5rem; }
.nb-feuillet__file { font-family: var(--nb-mono); font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--nb-encre-douce); }
.nb-feuillet__intitule { font-family: var(--nb-serif); font-weight: 700; font-size: 1.28rem; letter-spacing: -0.03em; line-height: 1.12; margin: 0 0 0.55rem; }
.nb-feuillet__intitule a { color: var(--nb-encre); text-decoration: none; }
.nb-feuillet__intitule a:hover { color: var(--nb-mure); }
.nb-feuillet__abrege { font-size: 0.9rem; color: var(--nb-encre-douce); margin: 0 0 0.7rem; }
.nb-feuillet__datation { font-family: var(--nb-mono); font-size: 0.68rem; color: var(--nb-encre-douce); margin: 0; }

/* feuillet en ligne (files et rubriques) */
.nb-file { display: flex; flex-direction: column; gap: 1.1rem; }
.nb-feuillet--ligne { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 1.2rem; align-items: center; padding: 0.8rem 1.1rem; }
.nb-feuillet--ligne .nb-feuillet__figure { margin: 0; }
.nb-feuillet--ligne::before { left: 1.6rem; margin-left: 0; top: -0.5rem; }

/* ——— cotes par file ——— */
.nb-cote { font-family: var(--nb-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; padding: 0.14rem 0.5rem; border-radius: 2px; color: var(--nb-papier); white-space: nowrap; }
.nb-cote--the-sermons { background: var(--nb-srm); }
.nb-cote--the-notices { background: var(--nb-ntc); }
.nb-cote--the-parish { background: var(--nb-par); }
.nb-cote--the-building { background: var(--nb-fab); }

/* ——— registre dense ——— */
.nb-zone--registre { background: var(--nb-papier-fonce); border-radius: 6px; }
.nb-registre { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 3rem; }
.nb-registre__entree {
  display: flex; align-items: baseline; gap: 0.8rem; padding: 0.42rem 0;
  border-bottom: 1px dotted var(--nb-filet); break-inside: avoid; font-size: 0.9rem;
}
.nb-registre__entree a { color: var(--nb-encre); text-decoration: none; flex: 1; }
.nb-registre__entree a:hover { color: var(--nb-mure); }
.nb-registre__entree time { font-family: var(--nb-mono); font-size: 0.66rem; color: var(--nb-encre-douce); white-space: nowrap; }

/* ——— files de rubrique : teinte de fond par file ——— */
.nb-zone--the-sermons { background: color-mix(in srgb, var(--nb-srm) 5%, var(--nb-creme)); }
.nb-zone--the-notices { background: color-mix(in srgb, var(--nb-ntc) 6%, var(--nb-creme)); }
.nb-zone--the-parish { background: color-mix(in srgb, var(--nb-par) 6%, var(--nb-creme)); }
.nb-zone--the-building { background: color-mix(in srgb, var(--nb-fab) 6%, var(--nb-creme)); }

/* ——— note sombre ——— */
.nb-note-sombre { background: var(--nb-encre); color: var(--nb-papier); border-radius: 8px; padding: 2.2rem 2.4rem; }
.nb-note-sombre h2 { font-family: var(--nb-serif); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.03em; margin: 0 0 0.6rem; }
.nb-note-sombre p { margin: 0; color: color-mix(in srgb, var(--nb-papier) 82%, var(--nb-sauge)); max-width: 62ch; }

/* ——— réseau : petits feuillets ——— */
.nb-autres-panneaux__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 1.5rem; }
.nb-autres-panneaux__item { position: relative; background: var(--nb-papier); padding: 1.1rem 1.3rem; border-radius: 3px; box-shadow: 0.45rem 0.45rem 0 var(--nb-sauge-pale); }
.nb-autres-panneaux__item::after { content: ""; position: absolute; bottom: -0.5rem; right: 1.2rem; width: 1.3rem; height: 0.58rem; background: var(--nb-ruban); transform: rotate(-5deg); border-radius: 1px; }
.nb-autres-panneaux__item p { margin: 0; font-size: 0.9rem; color: var(--nb-encre-douce); }

/* ——— remontée ——— */
.nb-remontee { max-width: 78rem; margin: 0 auto; padding: 1.1rem 1.4rem 0; }
.nb-remontee ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin: 0; padding: 0; font-family: var(--nb-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; }
.nb-remontee li + li::before { content: "→"; margin-right: 0.9rem; color: var(--nb-sauge); }
.nb-remontee a { color: var(--nb-encre-douce); text-decoration: none; }
.nb-remontee a:hover { color: var(--nb-mure); }
.nb-remontee [aria-current] { color: var(--nb-mure); }

/* ——— onglets de rubrique ——— */
.nb-onglets { max-width: 78rem; margin: 0 auto; padding: 0 1.4rem 1.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nb-onglet {
  font-family: var(--nb-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--nb-encre-douce); text-decoration: none; padding: 0.4rem 0.9rem; background: var(--nb-papier);
  border: 1px solid var(--nb-filet); border-radius: 3px; box-shadow: 0.18rem 0.18rem 0 var(--nb-sauge-pale);
}
.nb-onglet--courant { background: var(--nb-mure); color: var(--nb-papier); border-color: var(--nb-mure); box-shadow: 0.18rem 0.18rem 0 color-mix(in srgb, var(--nb-mure) 35%, var(--nb-creme)); }

/* ——— article ——— */
.nb-page-article { max-width: 78rem; margin: 0 auto; padding: 1.4rem 1.4rem 3rem; }
.nb-entete-article { max-width: 46rem; padding: 1.4rem 0 2rem; }
.nb-entete-article .nb-feuillet__meta { margin-bottom: 0.8rem; }
.nb-mention { font-family: var(--nb-mono); font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--nb-encre-douce); text-decoration: none; }
.nb-mention:hover { color: var(--nb-mure); }
.nb-entete-article__titre { font-family: var(--nb-serif); font-weight: 700; font-size: clamp(2.4rem, 6vw, 4.6rem); letter-spacing: -0.055em; line-height: 1.0; margin: 0.7rem 0 1rem; max-width: 17ch; }
.nb-chapeau { font-size: 1.08rem; color: var(--nb-encre-douce); max-width: 62ch; margin: 0 0 1.1rem; }
.nb-datation { font-family: var(--nb-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--nb-encre-douce); margin: 0; }
.nb-figure-article { position: relative; margin: 0 0 2.4rem; background: var(--nb-papier); padding: 1rem 1rem 0.8rem; border-radius: 4px; transform: rotate(-0.6deg); box-shadow: 0.9rem 0.9rem 0 var(--nb-sauge-pale); max-width: 62rem; }
.nb-figure-article::before { content: ""; position: absolute; top: -0.6rem; left: 50%; width: 4.6rem; height: 1.3rem; margin-left: -2.3rem; background: var(--nb-ruban); transform: rotate(-4deg); border-radius: 2px; }
.nb-figure-article img { width: 100%; border-radius: 3px; }
.nb-figure-article figcaption { font-family: var(--nb-mono); font-size: 0.68rem; color: var(--nb-encre-douce); padding: 0.65rem 0.2rem 0; }

.nb-duo { display: grid; grid-template-columns: minmax(0, 44rem) minmax(0, 1fr); gap: 3rem; align-items: start; }
.nb-corps { font-size: 1.02rem; max-width: 68ch; }
.nb-corps p { margin: 0 0 1.25rem; }
.nb-corps h2 { font-family: var(--nb-serif); font-weight: 700; font-size: 1.65rem; letter-spacing: -0.04em; margin: 2.4rem 0 0.9rem; }
.nb-corps h3 { font-family: var(--nb-serif); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.03em; margin: 2rem 0 0.7rem; }
.nb-corps ul, .nb-corps ol { padding-left: 1.4rem; margin: 0 0 1.25rem; }
.nb-corps li { margin-bottom: 0.35rem; }
.nb-corps blockquote { margin: 1.8rem 0; padding: 0.2rem 0 0.2rem 1.4rem; border-left: 3px solid var(--nb-mure); font-family: var(--nb-serif); font-size: 1.15rem; font-style: italic; color: var(--nb-encre); }
.nb-corps > p:first-of-type::first-letter { font-family: var(--nb-serif); font-weight: 700; font-size: 3.4em; line-height: 0.85; float: left; padding: 0.06em 0.12em 0 0; color: var(--nb-mure); }

.nb-marge { position: sticky; top: 1.4rem; background: var(--nb-papier-fonce); border-radius: 6px; padding: 1.3rem 1.4rem; font-size: 0.86rem; }
.nb-marge h2 { font-family: var(--nb-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nb-encre-douce); margin: 0 0 0.7rem; }
.nb-marge h2 + ol, .nb-marge h2 + ul { margin-bottom: 1.4rem; }
.nb-marge ol, .nb-marge ul { margin: 0; padding-left: 1.1rem; }
.nb-marge li { margin-bottom: 0.4rem; }
.nb-marge a { color: var(--nb-encre); text-decoration: none; border-bottom: 1px dotted var(--nb-sauge); }
.nb-marge a:hover { color: var(--nb-mure); }

/* ——— pied ——— */
.nb-pied { margin-top: 2rem; background: var(--nb-encre); color: var(--nb-papier); }
.nb-pied__colonnes { max-width: 78rem; margin: 0 auto; padding: 3rem 1.4rem 2rem; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; }
.nb-pied__colonne h2 { font-family: var(--nb-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--nb-sauge); margin: 0 0 0.9rem; }
.nb-pied__colonne p { font-size: 0.9rem; color: color-mix(in srgb, var(--nb-papier) 80%, var(--nb-sauge)); margin: 0 0 0.8rem; max-width: 46ch; }
.nb-pied__colonne ul { list-style: none; margin: 0; padding: 0; }
.nb-pied__colonne li { margin-bottom: 0.4rem; }
.nb-pied__colonne a { color: var(--nb-papier); text-decoration: none; font-size: 0.88rem; }
.nb-pied__colonne a:hover { color: var(--nb-sauge); }
.nb-pied__note { font-family: var(--nb-mono); font-size: 0.7rem !important; }
.nb-pied__ligne { max-width: 78rem; margin: 0 auto; padding: 1.2rem 1.4rem 2rem; border-top: 1px solid color-mix(in srgb, var(--nb-papier) 16%, transparent); font-family: var(--nb-mono); font-size: 0.68rem; color: color-mix(in srgb, var(--nb-papier) 55%, var(--nb-encre)); }

/* ——— responsive ——— */
@media (max-width: 62rem) {
  .nb-duo { grid-template-columns: 1fr; }
  .nb-marge { position: static; }
  .nb-vedette { grid-template-columns: 1fr; }
  .nb-pied__colonnes { grid-template-columns: 1fr; gap: 1.8rem; }
  .nb-registre { columns: 1; }
}
@media (max-width: 40rem) {
  .nb-fronton__grille { grid-template-columns: 1fr; gap: 0.6rem; padding: 1rem 1.2rem; text-align: left; }
  .nb-parcours ul { justify-content: flex-start; }
  .nb-devise { text-align: left; }
  .nb-zone { padding: 2rem 1rem 2.2rem; }
  .nb-feuillet--ligne { grid-template-columns: 1fr; }
  .nb-feuillet--ligne .nb-feuillet__figure { max-width: 14rem; }
  .nb-page-article { padding: 1rem 1rem 2.4rem; }
}