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

*{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 continu : le fil est un seul long document dans
   #feed (défilement natif). Le cartouche de l'article affiché est fixe en
   haut de l'écran (#cartouche-fixe, rempli par bonepicker.js). ---------- */
.feed{
  height:100svh;
  overflow-y:auto;
  overflow-x:hidden;
  position:relative;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.feed-track{
  position:relative;
  width:100%;
}
.page{
  position:relative;
  padding:14px 20px 16px;
  padding-top:max(14px, env(safe-area-inset-top));
  padding-right:max(20px, env(safe-area-inset-right));
  padding-bottom:max(16px, 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);
  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:max(640px, min(92vw, 1400px)); margin:0 auto; width:100%; flex:1; display:flex; flex-direction:column; padding-right:24px; }
@media (max-width:699px){
  /* Le cartouche doit occuper toute la largeur utile du téléphone : la marge
     droite de 24 px (compensation de barre de défilement sur ordinateur)
     décalait le titre et rognait la place du commutateur. */
  .page-inner{ padding-right:0; }
}

/* ---------- Cartouche (masthead + dateline) — présent sur chaque page ---------- */
/* Bandeau fixe : reste en haut de la page pendant le défilement (toutes les pages). */
.masthead{ text-align:center; padding-bottom:0; position:relative; }
/* Cartouche fixe : celui de l'article affiché, en haut de l'écran (rempli par
   bonepicker.js). La barre ne capte que ses boutons : le reste laisse passer
   le défilement vers la page en dessous. */
#cartouche-fixe{
  position:fixed; top:0; left:0; right:0; z-index:20; box-sizing:border-box;
  background:var(--paper);
  padding:max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  pointer-events:none;
}
#cartouche-fixe .masthead{ max-width:max(640px, min(92vw, 1400px)); margin:0 auto; }
#cartouche-fixe a, #cartouche-fixe button, #cartouche-fixe input, #cartouche-fixe .theme-toggle{ pointer-events:auto; }
@media (min-width:700px){
  #cartouche-fixe .masthead{ max-width:max(640px, min(96vw, 1800px)); }
}
.cartouche-reserve{ display:none; }
.masthead h1{
  font-family:'Rye', cursive; font-weight:400;
  /* 9.2vw : le titre doit tenir sur la même ligne que le commutateur
     vertical, du plus petit téléphone (320 px) aux grands iPhone. En
     dessous de 380 px, il est fixé à 32 px ; sous 340 px, le libellé du
     commutateur est masqué pour ne jamais rogner « BonePicker ». */
  font-size:clamp(32px,9.2vw,64px);
  margin:0; line-height:1;
  color:var(--ink);
  text-shadow:1px 1px 0 rgba(255,255,255,.25);
}
.masthead-title-row{
  position:relative;
  display:block;
  margin:0 0 8px;
}
.masthead-title-row h1{
  width:100%;
  text-align:center; white-space:nowrap;
}
.masthead-title-row .search-btn{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  flex:0 0 auto; margin:0;
}
/* 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;
  color:var(--ink-soft);
  white-space:nowrap;
}
.rule{ border:none; border-top:3px double var(--rule); margin:5px 0; }
.rule-thin{ border:none; border-top:1px solid var(--rule); margin:4px 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; font-size:clamp(10.5px,3.2vw,12.5px); }
.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{
  column-count:1;
  column-gap:0;
  margin:18px 0 6px;
}
/* Côte à côte dès 600px, en ordre (observation puis prévision), répartis
   pour que les deux colonnes aient à peu près la même hauteur. */
@media (min-width:600px){
  .weather-columns{ column-count:2; column-gap:34px; column-fill:balance; column-rule:1px solid var(--ink-soft); }
  /* « Prévision de base » ouvre la deuxième colonne : le relevé et la
     validité restent dans la première, puis le texte suit à la suite sur
     un écran étroit (une seule colonne, le saut est ignoré). */
  .weather-columns .weather-col .col-title--base{ break-before:column; -webkit-column-break-before:always; margin-top:0; }
}
.weather-col{ break-inside:auto; }
.weather-col + .weather-col{ margin-top:26px; }
@media (min-width:600px){ .weather-col + .weather-col{ margin-top:0; } }
.weather-col .col-title{ break-after:avoid; }
.weather-col .field-row{ break-inside:avoid; }
.weather-col .col-title--sub{ margin-top:22px; }
.weather-col .col-title--sub:first-child{ margin-top:0; }
.col-title{
  font-family:'Rye', cursive;
  font-size:clamp(12px,3.6vw,15px); 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);
}

/* Titre « Éphéméride Solaire & Lunaire » : même police que les titres de
   colonne météo (.col-title, « Prévision de base »),
   plutôt que la typo machine à écrire héritée de .weather-footer. */
.weather-footer-title{
  font-family:'Rye', cursive;
  font-size:clamp(13px,3.8vw,16px); letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:4px;
}
.weather-footer-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 20px;
}

/* Éphéméride solaire : tableau icône / libellé / heure — aubes, puis
   couchers, puis midi solaire, chaque groupe séparé par un filet. */
.weather-sun-table{ border-collapse:collapse; margin:2px auto 0; }
.weather-sun-table td{ padding:3px 6px; vertical-align:baseline; }
.weather-sun-table .sun-ico{ text-align:center; width:1.8em; padding-left:0; }
.weather-sun-table .sun-lib{ text-align:left; }
.weather-sun-table .sun-h{ text-align:right; padding-right:0; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.weather-sun-table tbody + tbody tr:first-child td{
  border-top:1px dotted var(--ink-soft); padding-top:7px;
}
.weather-sun-table tbody tr:last-child td{ padding-bottom:6px; }

/* ---------- 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;
}
.page-nav-btn--action{ font-size:13px; padding:4px 10px; }
/* Bouton poubelle dans le footer (en bas de chaque article) */
.page-nav-btn--trash-footer{
  font-size:13px;
  padding:4px 10px;
  border:1px solid var(--ink-soft);
  border-radius:3px;
  background:none;
  cursor:pointer;
  opacity:.8;
  color:var(--ink-soft);
}
.page-nav-btn--trash-footer:active{
  opacity:1;
  background:rgba(0,0,0,.06);
}
.night .page-nav-btn--trash-footer:active{
  background:rgba(255,255,255,.08);
}



.page-nav-btn--trash{ display:inline-flex; align-items:center; justify-content:center; width:14px; height:112px; padding:0; font-size:64px; border:1px solid rgba(234,216,170,.35); background:rgba(27,19,12,.6); color:#ead8aa; border-radius:4px; cursor:pointer; line-height:1; }
.page-nav-btn--trash:hover{ color:#e9b86a; border-color:#e9b86a; }

/* ---------- Almanach du jour (page frontispice) ----------
   Bloc jour / quantième / mois-année : centré, décalé vers le milieu de
   la page en hauteur (marge haute en vh), couleur assortie au kicker
   « Almanach du Jour » pour le jour et le quantième. clamp() borné pour
   que même « MERCREDI » (le plus long jour de la semaine) tienne
   toujours sur une seule ligne, y compris sur les petits écrans. */
.frontispice-cadran{
  text-align:center;
  margin:clamp(6px,2.5vh,22px) 0 18px;
}
.frontispice-jour{
  font-family:'Rye', cursive;
  font-size:clamp(30px,8vw,42px);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); white-space:nowrap;
  margin:0 0 4px;
}
.frontispice-date-num{
  font-family:'Rye', cursive; font-weight:400;
  font-size:clamp(58px,17vw,84px); line-height:.95;
  color:var(--accent);
  margin:0 0 6px;
}
.frontispice-mois-annee{
  font-family:'Rye', cursive;
  font-size:clamp(16px,4vw,20px); letter-spacing:.1em;
  line-height:1.3; color:var(--accent);
}
.frontispice-semaine{
  font-family:'Special Elite', monospace;
  font-size:clamp(13px,3.5vw,18px); letter-spacing:.08em;
  color:var(--ink-soft); text-align:center;
  margin:4px 0 2px;
  font-weight:400; font-style:italic;
}
.frontispice-jours-annee{
  font-family:'Special Elite', monospace;
  font-size:clamp(13px,3.5vw,18px); letter-spacing:.08em;
  color:var(--ink-soft); text-align:center;
  font-weight:400; font-style:italic;
  margin:16px 0 0;
}
/* ---------- Citation du jour (frontispice) ---------- */
.frontispice-citation{
  text-align:center; margin:14px 0 6px;
  font-family:'Special Elite', monospace;
  font-size:clamp(14px,3.4vw,18px); line-height:1.6;
  color:var(--ink); padding:0 10px;
}
.frontispice-citation-texte{
  margin:0 0 6px; font-weight:700;
}
.frontispice-citation-trad{
  font-weight:400; font-style:italic; color:var(--ink-soft);
}
/* ---------- Drapeaux sources ---------- */
.byline .flag,
.kicker .flag{
  font-size:1.8em;
  vertical-align:middle;
}
.frontispice-auteur{
  margin:8px 0 0; font-weight:700;
  font-family:'Special Elite', monospace;
  font-size:clamp(14px,3.4vw,18px);
  color:var(--ink);
}
h2.headline{
  font-family:'Rye', cursive; font-weight:400;
  font-size:clamp(18px,5vw,24px);
  line-height:1.25; margin:0 0 8px;
  display:flex; align-items:flex-start; gap:10px;
  min-height:1.25em;
}
h2.headline .headline-text{
  flex:1 1 auto; text-align:left; text-shadow:1px 1px 0 rgba(255,255,255,.2);
  overflow-wrap:break-word;
  min-width:0;
}
h2.headline .page-nav-btn--trash{
  flex:0 0 112px; min-width:112px;
}
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;
}

/* ---------- Image d'illustration de l'article (og:image des sources) ----------
   Sans ces règles, l'<img> s'affichait à sa taille native (souvent
   1500px de large) au lieu de s'adapter à la largeur de la page —
   débordement horizontal visible surtout sur mobile. */
.article-image{ margin:4px 0 18px; text-align:center; }
.article-image img{
  /* Hauteur FIXE, largeur = proportions d'origine (jamais déformée ni
     recadrée), image centrée. Pour changer la taille : modifier les deux height. */
  display:block; margin:0 auto;
  height:300px; width:auto; max-width:100%;
  object-fit:contain;
  border:1px solid rgba(74,58,38,.35);
}
/* Téléphone : 225 px (ordinateur : 300 px). */
@media (max-width:699px){
  .article-image img{ height:225px; }
}
.article-image figcaption{
  font-family:'Special Elite', monospace; font-size:10.5px;
  letter-spacing:.03em; color:var(--ink-soft);
  text-align:center; margin-top:6px;
}

.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 : Archive/Retour — Page X of Y — Poubelle/Œil ---------- */
.page-footer{
  margin-top:24px; padding:10px 0 12px; margin-bottom:8px;
  border-top:3px double var(--rule); border-bottom:3px double var(--rule);
  font-family:'Special Elite', monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  text-align:center; opacity:.75;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.page-footer .page-num{ flex:1; }
.page-nav-btn{
  font-family:'Special Elite', monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  background:none; border:1px solid var(--ink-soft); border-radius:3px;
  padding:5px 9px; opacity:.8; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.page-nav-btn:active{ opacity:1; background:rgba(0,0,0,.06); }
.night .page-nav-btn:active{ background:rgba(255,255,255,.08); }
.page-nav-btn--action{ font-size:13px; padding:4px 10px; }
/* Bouton poubelle dans le footer (en bas de chaque article) */
.page-nav-btn--trash-footer{
  font-size:13px;
  padding:4px 10px;
  border:1px solid var(--ink-soft);
  border-radius:3px;
  background:none;
  cursor:pointer;
  opacity:.8;
  color:var(--ink-soft);
}
.page-nav-btn--trash-footer:active{
  opacity:1;
  background:rgba(0,0,0,.06);
}
.night .page-nav-btn--trash-footer:active{
  background:rgba(255,255,255,.08);
}



/* ---------- Rubrique vide pour la vue courante (fil normal ou Archive) —
   distinct de « Aucune dépêche » (page_vide, côté Python) qui ne concerne
   que l'absence totale d'article en base. ---------- */
.vue-vide{
  position:fixed; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px;
  text-align:center; color:var(--ink-soft);
  font-family:'Old Standard TT', Georgia, serif; font-size:18px;
  background:var(--paper);
  /* Padding horizontal aligné sur .page (20px) : le cartouche (Vol/N°,
     sous-titre, bouton jour/nuit) tient sur la même largeur que sur une
     page d'article normale et ne chevauche plus sur petit écran. */
  padding:max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
          max(40px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
.vue-vide[hidden]{ display:none; }
.vue-vide-msg{ max-width:420px; margin:0; }
/* Rubrique vide : cartouche en haut, message + bouton centrés dans le reste
   de la page, et la page défile si l'écran est trop petit. */
.vue-vide{ justify-content:flex-start; overflow-y:auto; }
.vue-vide .page-inner{ flex:1; }
.vue-vide-corps{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:22px; padding:24px 0;
}
/* Fin de fil : message + bouton, centrés sous l'almanach (frontispice). */
.frontispice-fin{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:22px; padding:30px 0 10px; text-align:center;
  font-family:'Old Standard TT', Georgia, serif; font-size:22px;
  font-style:italic; color:var(--ink-soft);
}
.frontispice-fin[hidden]{ display:none; }
.frontispice-fin-msg{ margin:0; }

/* ---------- Page masquée par le filtre Fil normal / Archive (le
   pied-de-page recalcule Page X of Y sur les pages restantes). ---------- */
.page--hidden{ display:none; }
/* Article au-dessus de la fenêtre : toujours dans la mise en page (hauteur
   constante, pas de saut au défilement), mais invisible et non cliquable. */
.page--passe{ visibility:hidden; }
/* Le masthead est déplacé vers #cartouche-fixe (JS) : le padding-top de
   14px sur .page créerait un espace vide doublon. On le neutralise sauf
   sur le frontispice qui conserve son masthead en place.
   L'espacement est géré par --cart-h (JS), ici on ne fait que retirer
   le padding qui ne sert plus. */
.feed.cartouche-js > .feed-track > .page:not(.page--frontispice)
{
  padding-top: 0;
  padding-right: max(20px, env(safe-area-inset-right), 24px);
}

/* ---------- Notices / classifieds ---------- */
.notices{ font-size:16.5px; line-height:1.55; }
/* Liste à puces des points clés d'une dépêche (rendue par
   BonePicker-actualites.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é) ----------
   Taille de base pensée pour petit écran (iPhone) : un peu plus grosse
   que l'original (6px) pour rester facile à toucher. Sur PC/Mac
   (>=600px, cf. media query plus bas), les pastilles sont deux fois
   plus grosses que l'original (12px) : plus faciles à cliquer/viser
   à la souris. ---------- */
.dots{
  position:fixed; right:24px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:9px; z-index:5;
}
.dots span{
  width:8px; height:8px; 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; }
@media (min-width:600px){
  .dots{ right:14px; gap:14px; }
  .dots span{ width:12px; height:12px; }
}


/* ===========================================================
   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:#7fbf7f;
}
.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), vertical, sur la
   ligne du grand titre — comme le commutateur jour/nuit de Météo Sheila.
   Le titre et le médaillon partagent une seule ligne : on gagne toute la
   hauteur qu'occupait l'ancien médaillon horizontal dans le sous-titre. ---------- */
.masthead-sub-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:6px;
  margin:0 0 4px;
}
.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; }

.theme-toggle{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  flex:0 0 auto;
  display:flex; flex-direction:row-reverse; align-items:center; gap:5px;
  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) : le
     rembourrage vertical porte le track de 36 px à 44 px. */
  padding:4px 0; margin:0;
}
.theme-toggle:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
.toggle-track{
  display:block;
  width:20px; height:36px;
  border-radius:10px;
  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:2px; left:2px;
  width:14px; height:14px; 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:8px; 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:translateY(16px);
  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:8px; letter-spacing:.05em; text-transform:uppercase;
  line-height:1.08;
  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:7px; }
@media (min-width:420px){
  .toggle-track{ width:22px; height:40px; border-radius:11px; }
  .toggle-dot{ width:16px; height:16px; font-size:10px; }
  .night .toggle-dot{ transform:translateY(18px); }
  .toggle-label{ font-size:8.5px; }
  .theme-label-bot{ font-size:7.5px; }
}
@media (max-width:340px){
  /* À 320 px, le libellé du médaillon ne tient plus à côté du titre :
     on garde le commutateur (icône ☀/☾), le sous-titre et le numéro de
     version, qui reste très court. */
  .toggle-label{ display:none; }
}
@media (max-width:380px){
  .masthead h1{ font-size:32px; }
}


/* 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;
  }
}

/* ---------- Diligences : départs en transports publics ---------- */
.dep-row{
  display:grid;
  grid-template-columns:54px 30px 1fr;
  gap:10px; align-items:baseline;
  padding:5px 0; border-bottom:1px dotted rgba(74,58,38,.35);
  line-height:1.4; font-size:14px;
}
.dep-row:last-child{ border-bottom:none; }
.dep-heure{
  font-family:'Special Elite', monospace;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink-soft);
  white-space:nowrap; font-weight:700;
}
.dep-ligne{
  font-family:'Special Elite', monospace;
  font-variant-numeric:tabular-nums;
  text-align:right; color:var(--accent); font-weight:700;
}
.dep-dest{ font-family:'Special Elite', monospace; font-weight:700; color:var(--ink); }
/* Rangées « Chargement… » / « Aucun départ trouvé. » / erreur réseau :
   un seul message, étalé sur les 3 colonnes plutôt que casé dans la
   première. */
.dep-row .dep-msg{ grid-column:1 / -1; color:var(--ink-soft); }

/* ---------- Ordinateur (≥700 px) : points clés et résumé un cran plus
   grands (16,5 px -> 20 px). Téléphone inchangé. ---------- */
@media (min-width:700px){
  .notices, .body-text{ font-size:20px; }
}

/* ---------- Ordinateur (≥700 px) : marges latérales réduites de moitié
   (≈58 px -> ≈29 px sur 1440 px) ; le texte utilise plus de largeur.
   Téléphone inchangé. ---------- */
@media (min-width:700px){
  .page-inner{ max-width:max(640px, min(96vw, 1800px)); }
}

/* ===========================================================
   Printing Press — overlay western (lock file pendant régénération)
=========================================================== */
/* ===========================================================
   Printing Press — overlay western (lock file pendant régénération)
   Message style saloon 1875 — Frank Lawrence 1887
=========================================================== */
.printing-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(13,28,51,.92);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .35s ease, visibility .35s ease;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
.printing-overlay.printing-overlay--showing{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}
.printing-overlay.printing-overlay--hidden{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
.printing-overlay--content{
  text-align:center; padding:40px 20px;
  font-family:'Special Elite', monospace;
  color:#f5deb3; max-width:500px;
}
.printing-overlay--ornament{
  font-size:28px; letter-spacing:8px; color:#d4af37;
  margin:12px 0;
}
.printing-overlay--title{
  font-size:clamp(22px,6vw,30px); font-weight:700;
  letter-spacing:4px; text-transform:uppercase;
  margin:20px 0 8px;
  font-family:'Rye', cursive;
}
.printing-overlay--blink{
  display:inline-block; animation:printing-blink 1s steps(1) infinite;
}
@keyframes printing-blink{
  0%, 50% { opacity:1; }
  51%, 100% { opacity:0; }
}
.printing-overlay--french{
  font-size:16px; color:#a89070; font-style:italic;
  margin:8px 0 24px;
  font-family:'Special Elite', monospace;
}
.printing-overlay--subtitle{
  font-size:14px; color:#888; margin:12px 0;
  font-family:'Special Elite', monospace;
}

/* ---------- Navigation par pictogrammes (BonePicker_nav.py) ---------- */
.dateline{ align-items:center; }
.dateline .nav-icons{ margin-left:auto; display:inline-flex; align-items:center; gap:2px; }
.dateline a.nav-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:30px; box-sizing:border-box;
  border-bottom:none; padding:0; border-radius:3px;
  color:var(--ink-soft); line-height:0;
  transition:color .15s, transform .15s;
}
.dateline a.nav-ico svg{
  width:34px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; overflow:visible;
}
.dateline a.nav-ico:hover, .dateline a.nav-ico:active{ color:var(--accent); transform:translateY(-1px); border-bottom:none; }
.night .dateline a.nav-ico:hover{ color:var(--accent); }
.dateline a.nav-ico[aria-current="page"]{
  color:var(--ink); box-shadow:inset 0 -2px 0 0 var(--ink);
  border-radius:0; cursor:default;
}
@media (max-width:420px){
  .dateline a.nav-ico{ width:30px; height:28px; }
  .dateline a.nav-ico svg{ width:28px; height:20px; }
  .dateline .nav-icons{ gap:0; }
}

/* Carte du canton (bone-shaker) : pleine largeur, proportions conservées. */
.bs-carte{ width:100%; max-width:640px; margin:18px auto 6px; }
.bs-carte svg{ display:block; width:100%; height:auto; }

/* Emplacement « en préparation » : caché par défaut (data-actif="0").
   Only shown when data-actif="1" (a live scrape is underway). */
.page--preparation[data-actif="0"]{ display:none; }
.page--preparation[data-actif="1"] .headline{ font-style:italic; }
/* Message centré sur la page (horizontalement et verticalement) ; le pied de page reste en bas. */
.page--preparation .kicker,
.page--preparation .headline,
.page--preparation .subhead{ text-align:center; margin-left:auto; margin-right:auto; }
.page--preparation .kicker{ margin-top:auto; }
.page--preparation .subhead{ margin-bottom:auto; }
.prep-points span{ animation:prepPoint 1.4s infinite; opacity:.2; }
.prep-points span:nth-child(2){ animation-delay:.2s; }
.prep-points span:nth-child(3){ animation-delay:.4s; }
@keyframes prepPoint{ 0%,100%{ opacity:.2; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .prep-points span{ animation:none; opacity:.6; } }

/* Annonces (Outrun) : galerie de photos et fiche de données. */
.galerie{ margin:14px 0 6px; }
.galerie-principale{ margin:0; border:1px solid var(--ink-soft); background:var(--paper-dark); }
.galerie-principale img{ display:block; width:100%; max-height:70vh; object-fit:contain; cursor:pointer; }
.galerie-vignettes{ display:flex; gap:6px; overflow-x:auto; padding:8px 0 4px; scroll-snap-type:x proximity; }
.galerie-vignette{ flex:0 0 auto; width:84px; height:60px; padding:0; border:1px solid var(--ink-soft);
  background:var(--paper-dark); cursor:pointer; opacity:.6; scroll-snap-align:start; }
.galerie-vignette img{ display:block; width:100%; height:100%; object-fit:cover; }
.galerie-vignette.actif{ opacity:1; outline:2px solid var(--ink); outline-offset:1px; }
.galerie-compteur{ margin:2px 0 0; font-size:.8em; text-align:right; color:var(--ink-soft); font-style:italic; }
.fiche-annonce{ width:100%; border-collapse:collapse; margin:14px 0 8px;
  border-top:3px double var(--rule); border-bottom:3px double var(--rule); }
.fiche-annonce th, .fiche-annonce td{ text-align:left; padding:5px 8px; border-bottom:1px dotted var(--ink-soft); font-weight:normal; }
.fiche-annonce tr:last-child th, .fiche-annonce tr:last-child td{ border-bottom:none; }
.fiche-annonce th{ color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; font-size:.8em; width:42%; }
.fiche-annonce td{ font-weight:600; }

/* ===========================================================
   Almanach — mise en page reprise de la page Éphéméride de
   Météo Sheila : carte calendrier à gauche, éphémérides à
   droite. La citation du jour reste sous la grille, sur toute
   la largeur (aucune donnée ni fonction retirée).
=========================================================== */
.almanach-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
  align-items:start;
  margin:2px 0 0;
}
.almanach-cal{
  width:min(100%, 320px);
  margin:0 auto;
  text-align:center;
  border:1px solid var(--ink-soft);
  background:rgba(255,255,255,.08);
  padding:18px 12px 16px;
}
.almanach-cal .cal-dow{
  font-family:'Rye', cursive;
  font-size:clamp(22px,5.8vw,27px); line-height:1.05;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent);
}
.almanach-cal .cal-date-line{
  font-family:'Rye', cursive;
  font-size:clamp(12.5px,3.4vw,14px); line-height:1.25;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink);
  padding-bottom:9px; margin:6px 0 10px;
  border-bottom:1px dotted var(--ink-soft);
}
.almanach-cal .cal-week{
  font-family:'Rye', cursive;
  font-size:clamp(12.5px,3.4vw,14px); font-weight:400; line-height:1.25;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); margin-top:2px;
}
.almanach-cal .cal-j{
  font-family:'Rye', cursive;
  font-size:clamp(12.5px,3.4vw,14px); line-height:1.25;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:5px;
}
.almanach-main{ min-width:0; }
.almanach-bloc + .almanach-bloc{ margin-top:22px; }
.almanach-main .weather-footer{
  display:block;
  font-size:clamp(14px,3.7vw,16px);
  letter-spacing:.02em;
  text-align:left;
}
.almanach-main .weather-footer-title{
  font-size:clamp(14px,3.9vw,16px);
  text-align:center;
  margin:0 0 8px;
}
.almanach-main .weather-sun-table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  margin:0;
}
.almanach-main .weather-sun-table td{
  padding:7px 6px;
  font-size:15px;
  border-bottom:1px dotted rgba(74,58,38,.28);
}
.almanach-main .weather-sun-table .sun-ico{ width:38px; }
.almanach-main .weather-sun-table .sun-h{ width:96px; }
.almanach-main .weather-sun-table tbody + tbody:not(.sun-sep) tr:first-child td{
  border-top:0; padding-top:7px;
}
.almanach-main .weather-sun-table tbody.sun-sep tr td{
  border-top:2px solid var(--ink-soft);
  border-bottom:2px solid var(--ink-soft);
}
.almanach-main .weather-sun-table tbody:last-child tr:last-child td{
  border-bottom:0;
}
.almanach-main .weather-footer--saisons{
  text-align:center;
  font-size:clamp(14px,3.7vw,16px);
  line-height:1.9;
}
.almanach-main .weather-footer--saisons span{ display:block; }
.night .almanach-main .weather-sun-table td{
  border-bottom-color:rgba(242,227,198,.22);
}
.almanach-citation{
  margin:24px auto 2px;
  max-width:760px;
  padding:0 10px;
}
@media (max-width:700px){
  .almanach-layout{ grid-template-columns:1fr; gap:18px; }
  .almanach-cal{ padding:16px 12px 14px; }
  .almanach-cal .cal-dow{ font-size:32px; }
  .almanach-cal .cal-date-line{ font-size:18px; }
  .almanach-main .weather-footer{ font-size:14px; }
  .almanach-main .weather-footer-title{ font-size:14px; }
  .almanach-main .weather-sun-table td{ padding:6px 4px; font-size:14px; }
  .almanach-main .weather-sun-table .sun-ico{ width:30px; }
  .almanach-main .weather-sun-table .sun-h{ width:78px; }
  .almanach-citation{ margin-top:20px; }
}

/* ---------- Article News (fragment) ----------
   Le fragment commence à la source et à la date, puis titre, trois points
   clés, illustration et résumé complet. L'en-tête du journal reste dans
   l'enveloppe .page, jamais dans News/*.html. */
.news-item{ text-align:left; }
.news-meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
  margin:0 0 8px; font-family:'Special Elite', 'Courier New', monospace;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft);
}
.news-source{ color:var(--accent); font-weight:700; }
.news-gen{ opacity:.75; }
.news-title{ margin-top:4px; }
.news-keys{ margin-top:10px; }
.news-summary p{ margin:0 0 12px; }
.news-original{ margin-top:16px; font-size:14px; }
.news-original a{ color:var(--accent); }
@media (max-width:699px){
  .news-meta{ font-size:11px; gap:3px 8px; }
}
.news-permalink{
  margin-left:auto; font-size:15px; line-height:1; color:var(--accent);
  text-decoration:none; opacity:.8;
}
.news-permalink:hover{ opacity:1; text-decoration:underline; }
/* Champ de recherche du cartouche (formulaire serveur). */
.search-box{ display:flex; align-items:stretch; gap:6px; margin:0 0 8px; }
.search-box[hidden]{ display:none; }
.search-input{
  flex:1; min-width:0; padding:7px 9px; border:1px solid var(--rule);
  background:transparent; color:var(--ink);
  font-family:'Old Standard TT',Georgia,serif; font-size:15px;
}
.search-submit{
  padding:0 10px; border:1px solid var(--rule); background:transparent;
  color:var(--ink-soft); font-family:'Special Elite','Courier New',monospace;
  font-size:11px; letter-spacing:.06em; cursor:pointer;
}
.search-submit:hover{ color:var(--accent); border-color:var(--accent); }


/* ---------- Largeurs de lecture des dépêches (grands écrans) ----------
   Le titre et les points clés restent dans une colonne étroite et centrée ;
   le résumé et l'illustration respirent davantage, sans occuper toute la page. */
.news-item .news-title{
  display:block;
  max-width:900px;
  margin:0 auto 10px;
  text-align:center;
}
.news-item .news-keys{
  max-width:900px;
  margin:0 auto 18px;
}
.news-item .news-illustration,
.news-item .news-summary{
  max-width:1080px;
  margin-left:auto;
  margin-right:auto;
}
@media (max-width:699px){
  .news-item .news-title,
  .news-item .news-keys,
  .news-item .news-illustration,
  .news-item .news-summary{ max-width:none; }
}


/* ---------- Drapeaux-filtres des sources (page The Latest Tidings) ---------- */
.dateline-gauche{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.filtres-pays{ display:inline-flex; align-items:center; gap:4px; }
.filtre-pays{
  font-size:15px; line-height:1; padding:2px 4px; cursor:pointer;
  background:none; border:1px solid transparent; border-radius:3px;
  opacity:.35; filter:grayscale(1); -webkit-filter:grayscale(1);
  transition:opacity .15s, filter .15s, border-color .15s;
}
.filtre-pays.actif{ opacity:1; filter:none; -webkit-filter:none; border-color:rgba(74,58,38,.35); }
.night .filtre-pays.actif{ border-color:rgba(242,227,198,.35); }
.filtre-pays:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

.filtres-reinit{
  display:block; margin:16px auto 0; padding:7px 14px;
  font-family:'Special Elite', monospace; font-size:13px; letter-spacing:.03em;
  background:none; border:1px solid var(--ink-soft); border-radius:3px;
  color:var(--ink); cursor:pointer;
}
.filtres-reinit:hover{ background:rgba(0,0,0,.05); }
.night .filtres-reinit:hover{ background:rgba(255,255,255,.08); }

/* ---------- Table des matières du fil ---------- */
.page--sommaire .sommaire{ max-width:900px; margin:0 auto; }
.sommaire-titre{
  font-family:'Rye', cursive; font-weight:400; text-align:center;
  font-size:clamp(19px,4.8vw,25px); line-height:1.25; margin:6px 0 18px;
}
.sommaire-liste{ list-style:none; margin:0; padding:0; counter-reset:sommaire; display:block; }
.sommaire-item{ border-bottom:1px dotted rgba(74,58,38,.35); counter-increment:sommaire; }
.night .sommaire-item{ border-bottom-color:rgba(242,227,198,.25); }
.sommaire-lien{
  display:flex; align-items:baseline; gap:10px;
  padding:9px 2px; color:inherit; text-decoration:none;
}
.sommaire-lien::before{
  content:counter(sommaire) "."; flex:0 0 26px; text-align:right;
  font-family:'Special Elite', monospace; font-size:11px; color:var(--ink-soft);
}
.sommaire-source{
  flex:0 0 132px; font-family:'Special Elite', monospace;
  font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft);
}
.sommaire-texte{ font-family:'Playfair Display', serif; font-size:16.5px; line-height:1.35; }
.sommaire-lien:hover .sommaire-texte{ text-decoration:underline; }
@media (max-width:699px){
  .sommaire-source{ flex:0 0 auto; }
  .sommaire-lien{ flex-wrap:wrap; gap:2px 8px; }
  .sommaire-texte{ flex:1 1 100%; }
}