:root{
  --paper:#d7cbb0;
  --paper-dark:#cfc19d;
  --ink:#241a10;
  --ink-soft:#4a3a26;
  --rule:#241a10;
  --accent:#7c2d12;
  --hausse-soft:#ad9f87;
}

*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;
  height:100%;
  overflow:hidden; /* la page externe ne doit jamais pouvoir défiler elle-même */
  overscroll-behavior:none;
}
body{
  background:#1b130c;
  font-family:'Old Standard TT', Georgia, serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ---------- Défilement « article après article », avec résistance ----------
   NB iOS : on utilise 100svh (small viewport height, stable) plutôt que 100dvh,
   et html/body sont verrouillés (overflow:hidden) pour qu'il n'existe qu'UN
   SEUL conteneur qui bouge (.feed-track). Le passage d'une page à l'autre
   n'est plus un scroll natif avec scroll-snap (trop « fluide », sans effort à
   fournir) : c'est un petit moteur en JS (voir bonepicker-bill.js) qui suit le
   doigt avec un amortissement (« résistance en élastique ») pendant le
   glissement, puis ne bascule sur la page suivante/précédente que si le
   geste dépasse un certain seuil de distance ou de vitesse — sinon la page
   revient d'elle‑même en place. Tant qu'on n'est pas en haut/bas d'une page,
   celle‑ci défile normalement en interne (overflow-y:auto sur .page) : on
   peut lire tout l'article avant que le geste ne « tourne la page ». */
.feed{
  height:100svh;
  overflow:hidden;
  position:relative;
}
.feed-track{
  position:relative;
  width:100%;
  will-change:transform;
}
.page{
  position:relative;
  height:100svh;
  overflow-y:auto;
  -webkit-overflow-scrolling:auto;
  overscroll-behavior-y:contain;
  padding:26px 20px 40px;
  padding-top:max(26px, env(safe-area-inset-top));
  padding-right:max(20px, env(safe-area-inset-right));
  padding-bottom:max(40px, env(safe-area-inset-bottom));
  padding-left:max(20px, env(safe-area-inset-left));
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(ellipse at 90% 100%, rgba(0,0,0,.10), transparent 55%),
    var(--paper);
  border-bottom:6px solid #1b130c;
  box-shadow:inset 0 0 90px rgba(60,40,15,.35), inset 0 0 3px rgba(0,0,0,.4);
}
.page::before{ /* grain / bruit du papier */
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events:none;
  mix-blend-mode:multiply;
}
.page-inner{ position:relative; max-width:640px; margin:0 auto; width:100%; flex:1; display:flex; flex-direction:column; }

/* ---------- Cartouche (masthead + dateline) — présent sur chaque page ---------- */
.masthead{ text-align:center; padding-bottom:0; }
.masthead h1{
  font-family:'Rye', cursive; font-weight:400;
  /* 10.7vw (au lieu de 13vw) : mesuré avec la vraie police Rye pour que
     « Bonepicker Bill » tienne sur une seule ligne du plus petit au plus
     grand téléphone courant (375px à 440px, iPhone 17 Pro Max inclus),
     marge de sécurité >= 9px dans tous les cas. */
  font-size:clamp(40px,10.7vw,64px);
  margin:2px 0 14px; line-height:1.15;
  color:var(--ink);
  text-shadow:1px 1px 0 rgba(255,255,255,.25);
}
/* Sous-titre du cartouche : identifie la section (« The Latest Tidings »
   sur les pages d'actu, « Signs of the Sky » sur la page météo). Toujours
   sur une seule ligne : police et taille choisies pour ne jamais déborder,
   même sur un petit écran de téléphone. */
.masthead-section{
  font-family:'Rye', cursive;
  text-transform:uppercase;
  font-size:clamp(12px,3.6vw,15px);
  letter-spacing:.08em;
  margin:0 0 8px;
  color:var(--ink-soft);
  white-space:nowrap;
}
.rule{ border:none; border-top:3px double var(--rule); margin:8px 0; }
.rule-thin{ border:none; border-top:1px solid var(--rule); margin:6px 0; }
.weather-divider{ border:none; border-top:1px solid var(--rule); margin:18px 0; }
/* Cartouche en 3 colonnes fixes : Vol./N° à gauche, date au centre,
   lien de navigation à droite — identique sur toutes les pages. */
.dateline{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:4px 10px;
  font-family:'Special Elite', monospace;
  font-size:clamp(9px,2.6vw,10.5px); letter-spacing:.02em; text-transform:uppercase;
  color:var(--ink-soft); padding:2px 0;
}
.dateline .gen-date{ text-align:left; }
.dateline .nav-link{ text-align:right; white-space:nowrap; }
.dateline a{
  color:inherit; text-decoration:none;
  border-bottom:1px dotted var(--ink-soft);
}
.dateline a:hover, .dateline a:active{ color:var(--accent); border-bottom-color:var(--accent); }

/* ---------- Bulletin météo : deux colonnes (METAR/TAF à gauche, modèle à
   droite), chacune en fiche libellé/valeur — empilées sur petit écran,
   côte à côte à partir de 600px ---------- */
.weather-columns{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  margin:18px 0 6px;
}
@media (min-width:600px){
  .weather-columns{ grid-template-columns:1fr 1fr; gap:30px; }
}
.col-title{
  font-family:'Special Elite', monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin:0 0 10px;
  border-bottom:1px solid var(--ink-soft); padding-bottom:6px;
}
.col-title--sub{ margin-top:18px; }
.field-list{ font-size:14px; }
.field-row{
  display:flex; gap:10px; align-items:baseline;
  padding:5px 0; border-bottom:1px dotted rgba(74,58,38,.35);
  line-height:1.4;
}
.field-row:last-child{ border-bottom:none; }
.field-label{
  font-family:'Special Elite', monospace; font-size:10.5px;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink-soft);
  flex:0 0 106px; white-space:normal;
}
.field-value{ flex:1 1 auto; }
/* Empilement en colonne : chaque rangée (soleil / lune / phase) est un
   bloc à part entière, garanti sur sa propre ligne quel que soit l'écran
   (contrairement à un <br> dans un conteneur flex, pas fiable sur Safari
   iPad). À l'intérieur de chaque rangée, les éléments peuvent eux-mêmes
   passer à la ligne et se centrent. */
.weather-footer{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:'Special Elite', monospace; font-size:11.5px;
  letter-spacing:.02em; color:var(--ink-soft); text-align:center;
}
.weather-footer + .weather-footer{
  margin-top:10px; padding-top:12px; border-top:1px dashed var(--ink-soft);
}
.weather-footer-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 20px;
}

/* ---------- Article ---------- */
.kicker{
  font-family:'Special Elite', monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); text-align:center; margin:0 0 6px;
}
h2.headline{
  font-family:'Rye', cursive; font-weight:400;
  font-size:clamp(22px,6.2vw,30px);
  line-height:1.25; text-align:center; margin:0 0 8px;
  text-shadow:1px 1px 0 rgba(255,255,255,.2);
}
p.subhead{
  font-family:'Playfair Display', serif; font-style:italic; font-weight:600;
  text-align:center; font-size:16px; color:var(--ink-soft);
  margin:0 0 10px;
}
/* Phrase unique de tête du bulletin météo (température / ciel / vent),
   à la place d'un grand titre — police plus petite, ton de dépêche. */
p.weather-lede{
  font-family:'Rye', cursive; font-weight:400;
  text-align:center; font-size:clamp(17px,4.6vw,21px); line-height:1.5; color:var(--ink);
  margin:0 0 18px;
}
p.weather-lede .lede-location{
  display:inline-block; text-transform:uppercase; letter-spacing:.03em;
}
p.weather-lede .lede-detail{
  display:inline-block; font-size:0.76em; color:var(--ink-soft);
}
p.byline a{ color:inherit; }
p.byline{
  font-family:'Special Elite', monospace; font-size:11px;
  text-align:center; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 16px;
}

.body-text{ column-count:1; font-size:16.5px; line-height:1.55; }
.body-text p{ margin:0 0 12px; text-align:justify; hyphens:auto; }
.body-text p:first-of-type::first-letter{
  font-family:'Playfair Display', serif; font-weight:800;
  float:left; font-size:52px; line-height:40px;
  padding:4px 6px 0 0; color:var(--accent);
}

/* Regroupe la dépêche et le tampon pour qu'ils restent collés ensemble,
   poussés en bloc en bas de page (au lieu que le tampon parte seul via
   son propre margin-top:auto, laissant la dépêche « flotter » plus haut
   sur les écrans larges où la colonne de droite est plus courte). */
.weather-tail{
  margin-top:auto; text-align:center;
}

.stamp{
  align-self:center; margin-top:auto; padding-top:18px;
  font-family:'Special Elite', monospace; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  opacity:.7; text-align:center;
}

/* ---------- Pied de page : numéro de page / nombre total de pages ---------- */
.page-footer{
  margin-top:14px; padding-top:10px;
  border-top:1px dashed var(--ink-soft);
  font-family:'Special Elite', monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  text-align:center; opacity:.75;
}

/* ---------- Notices / classifieds ---------- */
.notices{ font-size:16.5px; line-height:1.55; }
/* Liste à puces des points clés d'une dépêche (rendue par
   actualites-bonepicker-bill.py) — était en style en dur dans le Python. */
.notices--puces{
  text-align:left; list-style:disc;
  padding-left:22px; margin:14px 0;
}
/* ---------- Pastille de progression (points sur le côté) ---------- */
.dots{
  position:fixed; right:10px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:8px; z-index:5;
}
.dots span{
  width:6px; height:6px; border-radius:50%;
  cursor:pointer;
  background:rgba(239,226,196,.35);
  transition:background .25s, transform .25s;
}
.dots span.active{ background:#efe2c4; transform:scale(1.5); }
.dots span:focus-visible{ outline:2px solid #efe2c4; outline-offset:3px; }


/* ===========================================================
   Thème jour / nuit — bascule automatique (lever/coucher du
   soleil à Genève) avec possibilité de forcer manuellement.
   Habillage « médaillon de cuivre » assorti au style western.
=========================================================== */
:root.night{
  --paper:#0d1c33;
  --paper-dark:#0a1729;
  --ink:#f2e3c6;
  --ink-soft:#d8c9a3;
  --rule:#f2e3c6;
  --accent:#e0a85c;
  --hausse-soft:#4a5055;
}
.night body{ background:#050d1a; }
.night .page{
  border-bottom-color:#050d1a;
  box-shadow:inset 0 0 90px rgba(0,10,30,.45), inset 0 0 3px rgba(0,0,0,.5);
}
.night .masthead h1,
.night h2.headline{
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
}
.night .dateline a:hover, .night .dateline a:active{ color:var(--accent); border-bottom-color:var(--accent); }
.night .page::before{ mix-blend-mode:soft-light; opacity:.7; }

/* ---------- Bouton de thème (médaillon de cuivre), ancré à droite du
   titre « Bonepicker Bill », dans le flux normal (défile avec la page,
   répété sur le cartouche de chaque page) ---------- */
/* Le médaillon partage la ligne du sous-titre (jamais celle du grand
   titre « Bonepicker Bill », qui est déjà trop large sur un petit écran pour
   laisser de la place à côté) : grille à 3 colonnes, comme le cartouche
   « Vol./date/lien » plus bas, pour garder le sous-titre bien centré. */
.masthead-sub-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:6px;
  margin:0 0 8px;
}
.masthead-sub-row .vol-no{
  grid-column:1; justify-self:start; min-width:0;
  font-family:'Special Elite', monospace;
  font-size:clamp(8px,2.2vw,9.5px); letter-spacing:.02em;
  text-transform:uppercase; color:var(--ink-soft); white-space:nowrap;
}
.masthead-sub-row .masthead-section{ grid-column:2; min-width:0; margin:0; }
.masthead-sub-row .theme-toggle{ grid-column:3; justify-self:end; min-width:0; }

.theme-toggle{
  display:flex; flex-direction:row-reverse; align-items:center; gap:6px;
  cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent;
  /* remise à zéro de l'habillage natif du <button> */
  -webkit-appearance:none; appearance:none;
  background:none; border:0; color:inherit; font:inherit; text-align:inherit;
  /* zone tactile d'environ 44 px de haut (recommandation Apple) sans
     déplacer le médaillon : le rembourrage est compensé par la marge. */
  padding:11px 0; margin:-11px 0;
}
.theme-toggle:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
.toggle-track{ display:block; }
.toggle-track{
  width:40px; height:22px;
  border-radius:12px;
  background:linear-gradient(180deg,#3a2a18,#1e150c);
  border:2px solid #a9803f;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.5);
  position:relative;
  flex:0 0 auto;
  transition:background .5s ease, border-color .5s ease;
}
.night .toggle-track{
  background:linear-gradient(180deg,#16223a,#0a1121);
  border-color:#5c7099;
}
.toggle-dot{
  position:absolute; top:1px; left:1px;
  width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #f6e7c8, #c99a4e 65%, #7c5a28);
  border:1px solid #6b4a20;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; line-height:1;
  box-shadow:0 1px 2px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.15);
  transition:transform .45s cubic-bezier(.34,1.4,.64,1), background .5s ease, border-color .5s ease;
}
.night .toggle-dot{
  transform:translateX(18px);
  background:radial-gradient(circle at 35% 30%, #eef3ff, #9fb3d6 65%, #5c6f92);
  border-color:#3d4d6b;
}
.toggle-icon{ filter:drop-shadow(0 1px 0 rgba(0,0,0,.3)); }
.toggle-label{
  font-family:'Special Elite', monospace;
  font-size:9px; letter-spacing:.05em; text-transform:uppercase;
  line-height:1.3;
  color:#efe2c4;
  text-shadow:1px 1px 0 rgba(0,0,0,.6);
  display:flex; flex-direction:column;
  align-items:flex-end;
  text-align:right;
  white-space:nowrap;
}
.theme-label-bot{ opacity:.75; font-size:8px; }
@media (min-width:420px){
  .toggle-track{ width:48px; height:26px; border-radius:14px; }
  .toggle-dot{ width:20px; height:20px; font-size:12px; }
  .night .toggle-dot{ transform:translateX(22px); }
  .toggle-label{ font-size:10px; }
  .theme-label-bot{ font-size:9px; }
}


/* Relevé du jour : la liste récapitulative sous le titre du bulletin.
   Une ligne par valeur, centrée, chiffres à chasse fixe pour que les
   montants s'alignent à l'œil comme dans une colonne de cours. */
.releve-jour{
  text-align:center;
  margin:-4px 0 4px;
  font-family:'Old Standard TT', Georgia, serif;
  font-size:clamp(15px,4.2vw,17px);
  line-height:1.65;
  color:var(--ink);
}
.releve-ligne{ font-variant-numeric:tabular-nums; }
.releve-nom{
  font-family:'Special Elite', monospace;
  font-size:.8em; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft);
}
.releve-valeur{ font-weight:700; }

/* ===========================================================
   Bulletin des mines — cours de l'once d'or et d'argent.
   Mise en page de cartouche gravé : filet double, blason
   alchimique (☉ le Soleil pour l'or, ☽ la Lune pour l'argent),
   chiffre de cours en gros caractères de titre, puis le tableau
   des écarts en petites capitales de machine à écrire.
   Tout est en encre : la hausse se lit à la flèche, pas à la
   couleur — comme sur une gazette d'époque.
=========================================================== */
.mines-grille{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
  margin:20px 0 6px;
}
/* Empilées (téléphone), deux fiches qui se suivent donnent deux filets
   doubles consécutifs : on n'en garde qu'un. Côte à côte, chacune
   retrouve son encadrement complet. */
.mines-fiche + .mines-fiche{ border-top:none; padding-top:2px; }
@media (min-width:600px){
  .mines-grille{ grid-template-columns:1fr 1fr; gap:26px; }
  .mines-fiche + .mines-fiche{ border-top:3px double var(--rule); padding-top:16px; }
}

.mines-fiche{
  text-align:center;
  padding:16px 14px 14px;
  border-top:3px double var(--rule);
  border-bottom:3px double var(--rule);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.14), transparent 70%);
}

.mines-blason{
  font-size:26px; line-height:1;
  color:var(--accent);
  margin-bottom:4px;
}

.mines-metal{
  font-family:'Rye', cursive; font-weight:400;
  font-size:clamp(19px,5.2vw,23px);
  margin:0 0 2px;
  color:var(--ink);
}
/* Fleurons de composition, de part et d'autre du nom du métal. */
.mines-metal::before{ content:"❧ "; color:var(--accent); font-family:serif; }
.mines-metal::after{ content:" ☙"; color:var(--accent); font-family:serif; }

.mines-unite{
  font-family:'Special Elite', monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:10px;
}

.mines-cours{
  font-family:'Playfair Display', serif; font-weight:800;
  font-size:clamp(34px,9.5vw,44px);
  line-height:1; color:var(--ink);
  margin-bottom:9px;
  text-shadow:1px 1px 0 rgba(255,255,255,.18);
}
.night .mines-cours{ text-shadow:1px 1px 0 rgba(0,0,0,.45); }
.mines-centimes{ font-size:.5em; font-weight:600; }

/* « CHF » accolé au cours : taille en em, donc toujours proportionnée au
   chiffre, qui grandit avec la largeur de l'écran. */
.mines-devise{
  font-family:'Special Elite', monospace;
  font-size:.32em; letter-spacing:.08em;
  color:var(--ink-soft);
  margin-left:.15em;
}

.mines-alt{
  font-family:'Playfair Display', serif; font-style:italic;
  font-size:14px; color:var(--ink-soft);
  padding-bottom:10px;
  border-bottom:1px dashed var(--ink-soft);
}

.mines-variations{ margin-top:8px; }
.mines-ligne{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:10px; padding:4px 0;
  border-bottom:1px dotted rgba(74,58,38,.3);
}
.night .mines-ligne{ border-bottom-color:rgba(216,201,163,.22); }
.mines-ligne:last-child{ border-bottom:none; }
.mines-quand{
  font-family:'Special Elite', monospace;
  font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft);
}
.mines-ecart{
  font-family:'Old Standard TT', Georgia, serif;
  font-size:13.5px; font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.mines-ecart--hausse{ color:var(--hausse-soft); font-weight:700; }
.mines-ecart--baisse{ color:var(--accent); }

.mines-silence{
  font-family:'Playfair Display', serif; font-style:italic;
  text-align:center; color:var(--ink-soft);
  margin:26px 0;
}

/* ---------- Réglage système « réduire les animations » ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}