/* L'espace entre les wagons — feuille de style maison (direction v4). */

:root {
  /* Palette ferroviaire sourde — noms conservés pour ne rien casser dans le
     reste de la CSS, mais "--blue" est un bleu acier et "--lime" un ocre
     rouille. --rule*/-*soft/ dérivent de --ink (28,37,48) pour garder la
     cohérence des filets et bordures. */
  --blue: #2B3A55;        /* ex-cobalt → bleu acier profond (titres/forts)  */
  --blue-deep: #1A2437;   /* deeper steel, fond hero fallback + footer      */
  --lime: #B0552F;        /* ex-lime → ocre rouille (accent, boutons)       */
  --paper: #F4F1EA;       /* papier chaud                                    */
  --card: #FFFFFF;        /* cartes — blanc franc sur papier chaud           */
  --ink: #1C2530;         /* encre bleutée                                   */
  --muted: #5F6875;       /* gris-rail (nuance ↘ pour AA sur --paper)        */
  --rule: rgba(28, 37, 48, .78);
  --rule-soft: rgba(28, 37, 48, .14);
  --r: 14px;
  --rb: 10px;

  /* Police des titres de contenu (hero, sections, pages, cartes). Slab serif
     éditorial (esprit Usbek & Rica). Nunito reste réservée à l'identité de
     marque (wordmark masthead, site-brand-name du header). */
  --font-title: 'Zilla Slab', 'Roboto Slab', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Spectral', Georgia, serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

a { color: inherit; text-decoration: none; }
.ui { font-family: 'Nunito', sans-serif; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; width: 100%; flex: 1; }

/* — Header papier — passe sur fond clair avec texte encre, esprit revue. */
.site-header {
  position: relative;
  background: var(--paper);
  color: var(--ink);
}

/* Étage 1 — main header (avec logo + tagline sous le nom) */
.site-header-main { border-bottom: 1px solid var(--rule-soft); }
.site-header-main-grid {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.site-header-side { display: flex; align-items: center; gap: 12px; }
.site-header-side-left { justify-content: flex-start; }
.site-header-side-right { justify-content: flex-end; }

.site-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  justify-self: center;
  color: var(--ink);
  text-align: center;
  line-height: 1;
}
.site-brand-mark {
  display: block;
  height: 32px;
  width: auto;
  color: var(--ink);
}
.site-brand-name {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -.01em;
}
.site-brand-sub {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: clamp(17px, 1.75vw, 22px);
  letter-spacing: .003em;
  text-transform: none;
  color: var(--muted);
  max-width: 38em;
  line-height: 1.3;
  margin: 10px 0 4px;
}

.btn-subscribe {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 16px;
  background: var(--lime);
  color: #fff;
  border: 1.5px solid var(--lime);
  border-radius: var(--rb);
  white-space: nowrap;
  transition: filter .12s;
}
.btn-subscribe:hover { filter: brightness(1.08); }

.btn-search {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(28, 37, 48, .28);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.btn-search:hover { border-color: var(--lime); color: var(--lime); }
.btn-search svg { width: 18px; height: 18px; }

/* Étage 2 — nav */
.site-nav {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 0;
  padding: 12px 28px;
  font-family: 'Nunito', sans-serif;
  font-size: 13.5px;
  letter-spacing: .005em;
  text-transform: none;
  font-weight: 700;
}
.site-nav a {
  position: relative;
  color: var(--ink);
  padding: 4px 22px;
  border-bottom: 2px solid transparent;
  transition: border-color .12s, color .12s;
}
.site-nav a:hover,
.site-nav a.is-active {
  border-bottom-color: var(--lime);
  color: var(--lime);
}
.site-nav a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(28, 37, 48, .18);
}
.site-nav-sep {
  color: rgba(28, 37, 48, .35);
  font-weight: 400;
  padding: 0 12px;
  user-select: none;
}

.site-nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 38px; height: 38px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(28, 37, 48, .28);
  border-radius: 8px;
  cursor: pointer;
}
.site-nav-toggle-bar {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

@media (max-width: 820px) {
  .site-header-main-grid {
    padding: 12px 18px;
    gap: 12px;
  }
  .site-brand { gap: 6px; }
  .site-brand-mark { height: 26px; }
  .site-brand-name { font-size: 17px; }
  .site-brand-sub { font-size: 15px; line-height: 1.28; margin: 7px 0 2px; }
  .btn-subscribe { display: none; }
  .site-nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 22px 16px;
    background: var(--paper);
    border-top: 1px solid var(--rule-soft);
    box-shadow: 0 12px 30px -20px rgba(28, 37, 48, .35);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 10;
  }
  .site-nav.is-open {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .site-nav a {
    padding: 12px 2px;
    border-bottom: 1px solid var(--rule-soft);
  }
  .site-nav a:last-of-type { border-bottom: 0; }
  .site-nav a + a::before { display: none; }
  .site-nav-sep { display: none; }
}

/* — Masthead — bandeau posé sur papier chaud, esprit revue. Anciennement
   cobalt + blanc — reconverti pour rester lisible avec la palette sourde. */
.masthead { background: var(--paper); color: var(--ink); margin: 0 0 28px; border-bottom: 1px solid var(--rule-soft); }
.masthead .inner { max-width: 920px; margin: 0 auto; padding: 30px 28px; }
.topline {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'Nunito', sans-serif; font-size: 12px; letter-spacing: .13em; font-weight: 700;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px;
}
.wordmark {
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: clamp(31px, 7.2vw, 60px); line-height: .96; letter-spacing: -.02em;
  margin: 0 0 12px; color: var(--ink);
}
.wordmark a { color: inherit; }
.desc {
  font-family: 'Nunito', sans-serif; font-size: 12.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lime); font-weight: 800; margin: 0 0 14px;
}
.tagline {
  font-size: clamp(15px, 2.2vw, 18.5px); max-width: 35em; margin: 0; line-height: 1.5; color: var(--ink);
}

/* — Hero desktop — vidéo en fond (via .hero-media), overlay compact posé en
   bas à gauche par-dessus. Sur mobile (< 900 px) le layout bascule : la vidéo
   devient une bande courte au-dessus, entièrement visible, et l'overlay passe
   sous elle en version éditoriale claire (voir @media ci-dessous). */
.hero {
  position: relative;
  margin: 0 0 28px;
  color: var(--paper);
  height: clamp(480px, 78vh, 820px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
/* Le média — vidéo + fallback poster — est isolé dans son propre conteneur.
   Ça permet, sous prefers-reduced-motion, de cacher <video> et de peindre le
   poster sur .hero-media sans dépendre de la hauteur du parent. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--blue-deep);
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
/* Fondu papier haut — prolonge la navbar claire dans la vidéo, adoucit la
   cassure. rgba(244, 241, 234, ...) = --paper décomposé pour le stop
   transparent (linear-gradient n'interpole pas var()→0 proprement). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 100px;
  background: linear-gradient(180deg,
    var(--paper)              0%,
    rgba(244, 241, 234, 0)  100%
  );
  pointer-events: none;
  z-index: 1;
}
/* Motion réduite : cache la vidéo, .hero-media peint le poster à la place. */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-media {
    background-image: var(--hero-poster);
    background-size: cover;
    background-position: center;
  }
}

/* — Overlay du hero (desktop) — barre compacte semi-transparente en bas
   à gauche, titre au-dessus, email + bouton sur une même ligne. */
.hero-overlay {
  position: relative;
  z-index: 3;
  max-width: 640px;
  margin: 0 0 clamp(28px, 4vh, 48px) clamp(28px, 5vw, 72px);
  padding: clamp(18px, 2vw, 26px) clamp(22px, 2.4vw, 30px);
  background: rgba(0, 0, 0, .30);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--rb);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--paper);
}
.hero-overlay-title {
  margin: 0 0 14px;
  font-family: var(--font-title);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.28;
  letter-spacing: -.006em;
  color: var(--paper);
}

/* Formulaire hero — desktop : email + submit alignés sur une même ligne. */
.hero-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 0;
}
.hero-form input[type="email"] {
  flex: 1;
  min-width: 0;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1.5px solid rgba(255, 255, 255, .55);
  background: transparent;
  color: var(--paper);
  border-radius: 0;
  transition: border-color .12s;
}
.hero-form input[type="email"]::placeholder { color: rgba(255, 255, 255, .58); }
.hero-form input[type="email"]:focus {
  outline: none;
  border-bottom-color: var(--paper);
  border-bottom-width: 2px;
  padding-bottom: 9px;
}
.hero-form input[type="submit"] {
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 11px 18px;
  border: 1.5px solid var(--lime);
  background: var(--lime);
  color: #fff;
  cursor: pointer;
  border-radius: var(--rb);
  transition: filter .12s;
}
.hero-form input[type="submit"]:hover { filter: brightness(1.06); }
.hero-note {
  margin: 10px 0 0;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .72);
}

/* — Mobile (< 900 px) — la vidéo devient une bande courte entièrement visible
   en haut ; l'overlay passe SOUS la vidéo en version éditoriale claire (fond
   papier, titre cobalt, formulaire aéré sans cadre). Même markup, styles
   inversés via ce media query. */
@media (max-width: 900px) {
  .hero {
    display: block;
    height: auto;
    overflow: visible;
  }
  .hero-media {
    position: relative;
    inset: auto;
    height: clamp(220px, 42vh, 340px);
  }
  .hero::before { height: 72px; }

  .hero-overlay {
    position: static;
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(36px, 6vw, 56px) 22px clamp(28px, 5vw, 40px);
    background: var(--paper);
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--ink);
  }
  .hero-overlay-title {
    margin: 0 0 clamp(24px, 4vw, 40px);
    font-size: clamp(24px, 5.4vw, 36px);
    line-height: 1.18;
    letter-spacing: -.013em;
    color: var(--blue);
  }
  .hero-form { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-form input[type="email"] {
    border-bottom-color: var(--ink);
    color: var(--ink);
    font-size: 16px;
  }
  .hero-form input[type="email"]::placeholder { color: var(--muted); }
  .hero-form input[type="email"]:focus { border-bottom-color: var(--blue); }
  .hero-form input[type="submit"] {
    width: 100%;
    padding: 13px 22px;
    font-size: 13px;
  }
  .hero-note {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 12.5px;
  }
}

/* — Règle « horaire » — */
.gaprule { display: flex; align-items: center; }
.gaprule .seg { flex: 1; height: 0; border-top: 1.5px solid var(--rule); }
.gaprule .void {
  width: 26px; display: flex; justify-content: space-between; align-items: center; height: 11px;
}
.gaprule .void span { width: 2px; height: 11px; background: var(--blue); border-radius: 2px; }

/* — Couleurs par rubrique (position 1..4) — */
.rubrique-1 { --rb-color: #1C46E8; --rb-ink: #fff; }   /* Dans la peau de…  → bleu cobalt */
.rubrique-2 { --rb-color: #A6E22E; --rb-ink: #15161A; } /* Pourquoi ça coûte ça → lime */
.rubrique-3 { --rb-color: #B85E22; --rb-ink: #fff; }   /* Le train d'après  → terre cuite (désaturé) */
.rubrique-4 { --rb-color: #5A3FA8; --rb-ink: #fff; }   /* Si vert que ça ?  → violet sombre (désaturé) */
.rubrique-0 { --rb-color: var(--muted); --rb-ink: #fff; }

/* — Grille de cards — */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
  margin: 0 0 8px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px rgba(21, 22, 26, .35);
  border-color: rgba(21, 22, 26, .22);
}

.card-image {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper);
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.card:hover .card-image img { transform: scale(1.03); }
.card-image-tag {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--rb-color);
  color: var(--rb-ink);
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  z-index: 1;
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .55);
}

/* Fallback : bloc couleur rubrique + signature des voids/filets v4 */
.card-fallback {
  position: absolute;
  inset: 0;
  background: var(--rb-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.card-fallback-rule {
  flex: 1;
  height: 0;
  border-top: 1.5px solid rgba(255, 255, 255, .55);
  max-width: 38%;
}
.card-fallback-void {
  width: 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 22px;
  margin: 0 14px;
}
.card-fallback-void span {
  width: 3px;
  height: 22px;
  background: rgba(255, 255, 255, .9);
  border-radius: 2px;
}

.card-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.card-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(18px, 2.3vw, 22px);
  line-height: 1.22;
  letter-spacing: -.006em;
  margin: 0;
  color: var(--ink);
}
.card-title a { transition: color .12s; }
.card-title a:hover { color: var(--rb-color); }

.card-excerpt {
  font-family: 'Spectral', Georgia, serif;
  font-size: 15px;
  line-height: 1.5;
  color: #33353d;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-byline {
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .02em;
  display: flex;
  gap: 7px;
  align-items: baseline;
  flex-wrap: wrap;
  margin: auto 0 0;
}
.card-byline .byline-dot { color: var(--rule-soft); }

/* — À la une (lead éditorial sous le hero) — */
.home-lead {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 36px;
  align-items: center;
  margin: 32px 0 8px;
}
.home-lead-image {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--paper);
}
.home-lead-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.home-lead:hover .home-lead-image img { transform: scale(1.02); }
.home-lead-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.home-lead-tags {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.home-lead-pin {
  display: inline-block;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 5px 10px 4px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
}
.home-lead-tag {
  display: inline-block;
  background: var(--rb-color);
  color: var(--rb-ink);
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 0;
  transition: filter .12s;
}
.home-lead-tag:hover { filter: brightness(0.92); }
.home-lead-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.12;
  letter-spacing: -.008em;
  margin: 0;
}
.home-lead-title a { color: var(--ink); transition: color .12s; }
.home-lead-title a:hover { color: var(--rb-color); }
.home-lead-excerpt {
  font-family: 'Spectral', Georgia, serif;
  font-size: 17.5px;
  line-height: 1.55;
  color: #2b2d33;
  margin: 0;
}
.home-lead-byline {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.home-lead-byline .byline-author { color: var(--ink); font-weight: 800; }
.home-lead-byline .byline-sep,
.home-lead-byline .byline-dot { color: var(--rule-soft); }

@media (max-width: 760px) {
  .home-lead { grid-template-columns: 1fr; gap: 18px; margin-top: 24px; }
  .home-lead-image { aspect-ratio: 16 / 10; }
}

/* — Sections de l'accueil (Derniers articles + sections par rubrique) — */
.home-section {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--rule-soft);
}
.home-section-title {
  text-align: center;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -.002em;
  margin: 0 0 28px;
  color: var(--ink);
}
.home-section-title a { color: inherit; transition: color .12s; }
.home-section-title a:hover { color: var(--rb-color); }
.home-section-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  background: var(--rb-color, var(--ink));
  margin: 12px auto 0;
  border-radius: 2px;
}
.home-section.section-latest .home-section-title::after {
  background: var(--ink);
}

/* — Newsletter — */
.news {
  background: var(--blue); color: #fff; margin: 24px 0 0; padding: 30px 28px;
  border-radius: var(--r);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px 40px; align-items: center;
}
.news h3 {
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: 25px; line-height: 1.1; margin: 0 0 8px; letter-spacing: -.015em; color: #fff;
}
.news p { font-size: 15px; margin: 0; max-width: 31em; color: #D7E0FF; }
.form { display: flex; gap: 8px; }
.form input {
  flex: 1; min-width: 0; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 600;
  padding: 12px 14px; border: 1.5px solid #fff; background: transparent; color: #fff; border-radius: var(--rb);
}
.form input::placeholder { color: #B9C6F5; }
.form input:focus { outline: none; box-shadow: 0 0 0 3px rgba(166, 226, 46, .5); }
.form button {
  font-family: 'Nunito', sans-serif; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 800; padding: 12px 20px; border: 1.5px solid var(--lime); background: var(--lime); color: var(--ink);
  cursor: pointer; border-radius: var(--rb); transition: background .12s, color .12s;
}
.form button:hover { background: transparent; color: #fff; }

/* — Footer — l'espace au-dessus (clamp responsive) donne au pied de page l'air
   éditorial qui lui manquait — s'applique à toutes les pages. */
footer.site {
  background: var(--blue-deep); color: #B6C2EE; margin-top: clamp(40px, 5vw, 64px); padding: 26px 28px;
  font-family: 'Nunito', sans-serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
footer.site .y { color: var(--lime); }
footer.site a { transition: color .12s; }
footer.site a:hover { color: #fff; }

/* — Page article — */
.article-page { margin: 18px 0 40px; }
.article-page .kicker {
  font-family: 'Nunito', sans-serif; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue); font-weight: 800;
  display: flex; gap: 13px; align-items: center; flex-wrap: wrap;
}
.article-page .kicker .dot { color: var(--muted); }
.article-page h1 {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(31px, 5.6vw, 52px); line-height: 1.08; letter-spacing: -.008em;
  margin: 14px 0 18px; color: var(--ink);
}
.article-page .feature {
  margin: 22px 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule-soft);
}
.article-page .feature img { display: block; width: 100%; height: auto; }
.article-page .excerpt {
  font-size: clamp(17px, 2.2vw, 20px); line-height: 1.55; color: #33353d; max-width: 37em;
  margin: 0 0 24px; font-style: italic;
}
.article-page .prose {
  background: var(--card); border: 1px solid var(--rule-soft); border-radius: var(--r);
  padding: 30px;
}
.prose h1, .prose h2, .prose h3 {
  font-family: 'Nunito', sans-serif; font-weight: 800; line-height: 1.2;
  letter-spacing: -.012em; margin: 1.6em 0 .5em;
}
.prose h1 { font-size: 26px; }
.prose h2 { font-size: 22px; }
.prose h3 { font-size: 18px; }
.prose p { margin: 0 0 1.1em; }
.prose a { color: var(--blue); border-bottom: 1px solid rgba(28, 70, 232, .35); }
.prose a:hover { border-bottom-color: var(--blue); }
.prose ul, .prose ol { margin: 0 0 1.1em 1.4em; }
.prose blockquote {
  margin: 1.2em 0; padding: .2em 1em; border-left: 3px solid var(--blue);
  color: #33353d; font-style: italic;
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
  background: rgba(21, 22, 26, .05); padding: 1px 5px; border-radius: 4px;
}
.prose pre {
  background: var(--ink); color: #EAEFFF; padding: 16px 18px; border-radius: var(--rb);
  overflow: auto; font-size: 13.5px; line-height: 1.5;
}
.prose pre code { background: transparent; padding: 0; }
.prose img { max-width: 100%; height: auto; border-radius: var(--rb); }

/* — Page rubrique — */
.rubrique-page { margin: 18px 0 40px; }
.rubrique-page .head {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-left: 6px solid var(--rb-color, var(--blue));
  border-radius: var(--r);
  padding: 28px 30px 28px 36px;
  margin-bottom: 6px;
}
.rubrique-page .head .kicker {
  font-family: 'Nunito', sans-serif; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rb-color, var(--muted)); font-weight: 800;
}
.rubrique-page .head h1 {
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: clamp(28px, 5vw, 44px); line-height: 1.05; letter-spacing: -.02em;
  margin: 8px 0 14px; color: var(--ink);
}
.rubrique-page .head p { margin: 0; max-width: 37em; color: #33353d; }
.empty {
  background: var(--card); border: 1px dashed var(--rule-soft); border-radius: var(--r);
  padding: 24px; text-align: center; color: var(--muted);
  font-family: 'Nunito', sans-serif; font-weight: 600;
}

/* — Page À propos (mise en page éditoriale) — */
.about-page {
  /* Grille « full-bleed » : la colonne « main » contient le texte (~36em ≈
     720 px au max), les images débordent jusqu'à l'extérieur du wrap.
     Le middle track est plafonné à `100% - 56px` (56 = 28×2 des gouttières
     min) — sinon, sur viewport étroit (< 632 px), 36em > 100%, le track du
     milieu se cale à 100% et les 28 px min de chaque côté font dépasser la
     grille de son conteneur, provoquant un scroll horizontal. */
  display: grid;
  grid-template-columns:
    [full-start] minmax(28px, 1fr)
    [main-start] min(36em, calc(100% - 56px)) [main-end]
    minmax(28px, 1fr) [full-end];
  margin: 0 calc(50% - 50vw) 80px;
  max-width: 100vw;
  row-gap: 0;
}
.about-page > * { grid-column: main; }
.about-page > .about-image { grid-column: full; }

/* — En-tête : titre généreux + paragraphe d'intro plus grand. Un filet ocre
   court juste au-dessus du titre l'ancre dans la page (pas flottant). */
.about-head { padding: 52px 0 12px; }
.about-head h1 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(38px, 6.5vw, 62px);
  line-height: 1.06;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  color: var(--ink);
}
.about-head h1::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--lime);
  margin: 0 0 22px;
}
.about-head h1 .anchor { display: none; }
.about-head p {
  font-family: 'Spectral', Georgia, serif;
  font-size: clamp(20px, 2.4vw, 23px);
  line-height: 1.55;
  color: #33353d;
  margin: 0;
}

/* — Image illustrative (large, coins arrondis v4). Marge verticale généreuse
   pour donner de la respiration éditoriale entre les blocs de texte. */
.about-image {
  margin: clamp(56px, 8vw, 96px) auto;
  width: min(1080px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--blue);
}
.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback : signature v4 — cobalt + filets interrompus + voids verticaux */
.about-image-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .12), transparent 60%),
    var(--blue);
}
.about-image-rule {
  flex: 1;
  height: 0;
  border-top: 1.5px solid rgba(255, 255, 255, .55);
  max-width: 32%;
}
.about-image-void {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 64px;
  height: 36px;
  margin: 0 22px;
}
.about-image-void span {
  width: 5px;
  height: 36px;
  background: rgba(255, 255, 255, .92);
  border-radius: 2px;
}

/* — Sections : air vertical + colonne lisible — */
.about-section { padding: 32px 0 40px; }

/* La dernière section ("Le nom") est plus courte que les autres et n'est
   suivie d'aucune image : sans cet ajustement, sa padding-top/bottom héritée
   la fait paraître survolumée par rapport aux autres sections. Sélectionnée
   par sa position devant .about-cta (le CTA sort de la boucle). */
.about-section:has(+ .about-cta) { padding: 20px 0 24px; }

.about-section h2 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.14;
  letter-spacing: -.008em;
  color: var(--blue-deep);
  margin: 0 0 .65em;
}
.about-section h2 .anchor { display: none; }

.about-section p {
  font-family: 'Spectral', Georgia, serif;
  font-size: clamp(18px, 1.9vw, 20px);
  line-height: 1.75;
  color: #2b2c33;
  margin: 0 0 1.25em;
}
.about-section p:last-child { margin-bottom: 0; }

.about-section em {
  font-style: normal;
  background: linear-gradient(transparent 62%, rgba(166, 226, 46, .45) 62%);
  padding: 0 .1em;
}

.about-section strong { color: var(--ink); }

.about-section a {
  color: var(--blue);
  border-bottom: 1px solid rgba(28, 70, 232, .35);
}
.about-section a:hover { border-bottom-color: var(--blue); }

.about-section ul {
  padding: 0;
  list-style: none;
  margin: 1.2em 0;
}
.about-section ul li {
  font-family: 'Spectral', Georgia, serif;
  font-size: clamp(17px, 1.85vw, 19px);
  line-height: 1.65;
  padding: 6px 0 6px 22px;
  border-left: 3px solid var(--lime);
  margin-bottom: 18px;
  color: #2b2c33;
}
.about-section ul li strong { color: var(--ink); font-weight: 800; }

/* — Séparateur entre sections : filet fin discret, centré, court. Remplace
   l'ancien gaprule qui pesait visuellement entre chaque bloc de texte. */
.about-rule {
  margin: 16px auto 20px;
  max-width: 96px;
  border: 0;
  border-top: 1px solid rgba(28, 37, 48, .22);
  height: 0;
}

/* — Cartouche d'inscription en pied — */
.about-cta {
  margin-top: 40px;
  background: var(--blue);
  color: #fff;
  border-radius: var(--r);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}
.about-cta p {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 17px;
  margin: 0;
  color: #EAEFFF;
  max-width: 24em;
}
.about-cta .btn {
  background: var(--lime);
  border-color: var(--lime);
}

/* — Bloc auteur en pied — portrait + bio, coda éditoriale sous la CTA.
   Photo servie depuis les assets locaux (pas via R2). Sur desktop : photo à
   gauche, texte à droite ; sur mobile : empilé (photo centrée, texte gauche). */
.about-author {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--rule-soft);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  align-items: start;
}
.about-author-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--rule-soft);
}
.about-author-eyebrow {
  margin: 0 0 6px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lime);
}
.about-author-name {
  margin: 0 0 12px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.2;
  letter-spacing: -.006em;
  color: var(--ink);
}
.about-author-bio {
  margin: 0;
  font-family: 'Spectral', Georgia, serif;
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.65;
  color: var(--ink);
}
.about-author-note {
  margin: 12px 0 0;
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 15.5px);
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 620px) {
  .about-head { padding: 40px 0 8px; }
  .about-head h1::before { width: 44px; margin-bottom: 16px; }
  .about-image { margin: 36px auto; aspect-ratio: 4 / 3; }
  .about-section { padding: 22px 0 28px; }
  .about-cta { padding: 24px 22px; }
  .about-author {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 32px;
    margin-top: 44px;
  }
  .about-author-photo { width: 120px; height: 120px; }
}

/* — Pages utilitaires (inscription, confirmation, désinscription, erreurs admin) — */
.utility {
  background: var(--card); border: 1px solid var(--rule-soft); border-radius: var(--r);
  padding: 30px; margin: 18px 0 40px;
}
.utility h1 {
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 28px;
  margin: 0 0 12px; letter-spacing: -.015em;
}
.utility p { margin: 0 0 14px; }
.utility .actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .02em;
  padding: 11px 19px; border-radius: var(--rb); border: 1.5px solid var(--ink); color: var(--ink);
  background: var(--lime); cursor: pointer; transition: background .12s, color .12s;
}
.btn:hover { background: #b8f04a; }
.btn.secondary { background: transparent; }
.btn.secondary:hover { background: var(--ink); color: #fff; }

/* — Zone repliable de secours : coller le texte d'un article quand la
   récupération auto échoue (site protégé). Native <details>/<summary>. */
.paste-zone {
  margin: -6px 0 14px;
  border-top: 1px dashed var(--rule-soft);
  padding-top: 10px;
}
.paste-toggle {
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 4px 0;
  list-style: none;
  user-select: none;
}
.paste-toggle::-webkit-details-marker { display: none; }
.paste-toggle::before {
  content: "▸";
  display: inline-block;
  width: 14px;
  color: var(--lime);
  transition: transform .12s;
}
.paste-zone[open] > .paste-toggle::before {
  content: "▾";
}
.paste-toggle:hover { color: var(--ink); }
.paste-content {
  padding: 10px 0 4px;
}

/* — Pills de suggestion de commentaire (admin, form « Nouveau lien »).
   Brouillon éditorial : fond papier, texte en Spectral italique comme le
   commentaire final, filet ocre à gauche pour marquer la proposition.
   Multi-lignes (une suggestion peut faire 300 caractères), texte
   left-aligned et wrap normal. Cliquer place la valeur dans le textarea. */
.suggestion-pill {
  display: block;
  width: 100%;
  text-align: left;
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--lime);
  border-radius: var(--rb);
  padding: 12px 14px;
  cursor: pointer;
  white-space: normal;
  transition: background .12s, border-color .12s, color .12s;
}
.suggestion-pill:hover,
.suggestion-pill:focus-visible {
  background: #fff;
  border-color: var(--ink);
  border-left-color: var(--lime);
  color: var(--ink);
  outline: none;
}
.suggestion-pill:focus-visible {
  box-shadow: 0 0 0 2px var(--lime);
}
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label {
  font-family: 'Nunito', sans-serif; font-size: 12.5px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 800; color: var(--muted);
}
.field input[type="email"], .field input[type="text"], .field input[type="password"],
.field input[type="datetime-local"], .field textarea, .field select {
  font-family: 'Nunito', sans-serif; font-size: 15px; padding: 11px 13px;
  border: 1.5px solid var(--rule-soft); background: #fff; color: var(--ink); border-radius: var(--rb);
  width: 100%;
}
.field textarea { font-family: 'Spectral', Georgia, serif; min-height: 320px; line-height: 1.55; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(28, 70, 232, .15);
}
.flash {
  font-family: 'Nunito', sans-serif; font-weight: 700; padding: 12px 16px;
  border-radius: var(--rb); margin: 0 0 18px;
}
.flash.notice { background: rgba(166, 226, 46, .25); color: var(--ink); }
.flash.alert  { background: rgba(232, 28, 28, .15); color: #7a0d0d; }

/* — Toasts flash — bande fixe en haut, centrée. Chaque toast entre en fondu +
   glissement, tient ~5s, sort en fondu. Retiré du DOM par le controller
   Stimulus (app/javascript/controllers/flash_controller.js). */
.flash-toasts {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(560px, calc(100% - 32px));
  pointer-events: none;
}
.flash-toast {
  pointer-events: auto;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  padding: 14px 22px;
  border-radius: var(--rb);
  box-shadow:
    0 10px 30px -10px rgba(28, 37, 48, .35),
    0 4px 12px  -6px rgba(28, 37, 48, .25);
  color: #fff;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .28s ease-out, transform .28s cubic-bezier(.22, .61, .36, 1);
}
.flash-toast.is-visible { opacity: 1; transform: translateY(0); }
.flash-toast.is-leaving { opacity: 0; transform: translateY(-8px); }
.flash-toast--notice { background: var(--lime); }               /* ocre, succès */
.flash-toast--alert  { background: #7A2B22; }                    /* rouge sourd */

/* Motion réduite : pas d'animation. Toast visible d'emblée ; le controller
   Stimulus détecte la préférence et retire l'élément sans transition. */
@media (prefers-reduced-motion: reduce) {
  .flash-toast {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .flash-toast.is-leaving { opacity: 0; }
}

/* — Erreurs de formulaire — */
.errors {
  background: rgba(232, 28, 28, .1); border: 1px solid rgba(232, 28, 28, .25);
  border-radius: var(--rb); padding: 12px 16px; margin: 0 0 18px;
  color: #7a0d0d; font-family: 'Nunito', sans-serif; font-size: 14px;
}
.errors ul { margin: 6px 0 0 18px; }

/* — Admin (sobre, fonctionnel) — */
.admin-bar {
  background: var(--ink); color: #fff; padding: 10px 28px;
  font-family: 'Nunito', sans-serif; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700;
  display: flex; gap: 18px; align-items: center;
}
.admin-bar a { color: var(--lime); }
.admin-bar a:hover { color: #fff; }
.admin-bar .spacer { flex: 1; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--r); overflow: hidden; }
.admin-table th, .admin-table td {
  padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--rule-soft);
  font-family: 'Nunito', sans-serif; font-size: 14px;
}
.admin-table th {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); background: var(--paper);
}
.admin-table tr:last-child td { border-bottom: 0; }
.tag {
  display: inline-block; font-family: 'Nunito', sans-serif; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 800;
  padding: 3px 8px; border-radius: 999px;
}
.tag.draft { background: rgba(94, 100, 112, .15); color: var(--muted); }
.tag.published { background: rgba(166, 226, 46, .35); color: var(--ink); }

.admin-bar .admin-user {
  font-family: 'Nunito', sans-serif; font-size: 11.5px; letter-spacing: .08em;
  text-transform: none; color: rgba(255,255,255,.65); font-weight: 500;
}
.admin-bar .admin-logout {
  background: transparent; color: var(--lime); border: 1px solid var(--lime);
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
}
.admin-bar .admin-logout:hover { background: var(--lime); color: var(--ink); }

.admin-signin {
  max-width: 420px; margin: 32px auto; padding: 28px 32px 24px;
  background: var(--card); border-radius: var(--r);
  border-top: 4px solid var(--blue);
}
.admin-signin h1 {
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 22px;
  margin: 0 0 6px;
}
.admin-signin .signin-sub {
  color: var(--muted); font-size: 13px; margin: 0 0 18px;
}
.admin-signin .actions { margin-top: 12px; }
.admin-signin .signin-links {
  margin-top: 14px; font-size: 13px; color: var(--muted);
}
.admin-signin .signin-links a { color: var(--blue); }

/* — Le fil — veille de liens externes commentés.
   Liste statique : pas d'animation, pas de carrousel. Le titre source garde la
   police slab (comme les titres du site) ; le commentaire est en Spectral
   italique pour marquer nettement ce qui est de la maison. */
.fil-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 44em;
  margin: 0 auto;
}
.fil-entry {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule-soft);
}
.fil-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.fil-meta {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 8px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.fil-meta-sep { color: var(--rule-soft); }
.fil-source { color: var(--blue); }
.fil-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.25;
  letter-spacing: -.005em;
  margin: 0 0 10px;
  color: var(--ink);
}
.fil-title a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: color .12s, border-color .12s;
}
.fil-title a:hover {
  color: var(--lime);
  border-bottom-color: var(--lime);
}
.fil-comment {
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: #33353d;
  margin: 0;
  max-width: 38em;
}

/* — Page /le-fil — */
.fil-page { margin: 18px 0 40px; }
.fil-page-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule-soft);
}
.fil-page-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(31px, 5.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -.008em;
  margin: 0 0 10px;
  color: var(--ink);
}
.fil-page-lede {
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  color: var(--muted);
  font-size: clamp(15px, 1.8vw, 17px);
  margin: 0 auto;
  max-width: 36em;
}

/* — Bandeau du fil (défilement horizontal) —
   Un filet éditorial en tête de la home : fond bleu nuit (même variable
   que le footer), texte clair repris du footer, source en terracotta.
   L'étiquette est isolée par un filet vertical terracotta.
   La liste est dupliquée dans le HTML et animée en translateX(-50%) pour
   boucler sans saut. */
.fil-ticker {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  background: var(--blue-deep);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  font-family: 'Nunito', sans-serif;
  font-size: 13.5px;
  color: #B6C2EE;
  overflow: hidden;
}
.fil-ticker-label {
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--blue-deep);
  color: #fff;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  border-right: 2px solid var(--lime);
}
.fil-ticker-label:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fil-ticker-viewport {
  overflow: hidden;
  position: relative;
  min-width: 0;
}
.fil-ticker-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: fil-ticker-scroll 28s linear infinite;
  will-change: transform;
}
.fil-ticker:hover .fil-ticker-track,
.fil-ticker:focus-within .fil-ticker-track,
.fil-ticker.is-paused .fil-ticker-track {
  animation-play-state: paused;
}
.fil-ticker-item {
  display: flex;
  align-items: center;
  padding: 10px 22px;
  position: relative;
  white-space: nowrap;
}
.fil-ticker-item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: var(--muted);
}
.fil-ticker-item a {
  color: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 2px;
  border-radius: 3px;
}
.fil-ticker-item a:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}
.fil-ticker-date {
  font-weight: 800;
  font-size: 11px;
  color: #B6C2EE;
  white-space: nowrap;
}
.fil-ticker-source {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #B6C2EE;
}
.fil-ticker-title {
  font-weight: 500;
  color: #B6C2EE;
}
.fil-ticker-item a:hover .fil-ticker-title,
.fil-ticker-item a:hover .fil-ticker-source {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fil-ticker-toggle {
  border: 0;
  background: transparent;
  border-left: 1px solid var(--muted);
  padding: 0 14px;
  cursor: pointer;
  color: #B6C2EE;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
}
.fil-ticker-toggle:hover { color: #fff; }
.fil-ticker-toggle:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -2px;
}
.fil-ticker-toggle-icon {
  display: block;
  width: 10px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(0 0, 3px 0, 3px 100%, 0 100%, 0 0, 7px 0, 10px 0, 10px 100%, 7px 100%, 7px 0);
}
.fil-ticker.is-paused .fil-ticker-toggle-icon {
  clip-path: polygon(0 0, 10px 50%, 0 100%);
  width: 10px;
  height: 12px;
}

@keyframes fil-ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 620px) {
  .fil-ticker { font-size: 12.5px; }
  .fil-ticker-label { padding: 0 12px; font-size: 10.5px; }
  .fil-ticker-item { padding: 9px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .fil-ticker-track {
    animation: none;
    width: auto;
  }
  .fil-ticker-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .fil-ticker-toggle { display: none; }
}

/* — Responsive — */
@media (max-width: 620px) {
  .news { grid-template-columns: 1fr; }
  footer.site { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}