/* ═══════════════════════════════════════════════════════════════
   LE JOURNAL (/blog.html) — refonte du 15/10/2026
   Une page de magazine plutôt qu'une grille de fiches :
   · les articles sur le crème, sans carton : la couverture porte la
     carte, le texte respire dessous ;
   · le plus récent « à la une », en grand (classe posée par
     js/v4/journal.js, sans rien insérer) ;
   · une barre de tri claire, avec le nombre d'articles par rubrique
     (attribut data-nb, lu sur les cartes) ;
   · l'encart final en carte noire à liseré doré.
   Préfixe propre : .jn- ; les classes .tri-* et .billet-* viennent de
   pages.css et sont seulement réglées ici pour le fond clair.
   ═══════════════════════════════════════════════════════════════ */

/* ─── La barre de tri, sur fond clair ─── */
.jn-plage .tri {
  position: relative;
  gap: var(--e4);
  margin-top: var(--e6);
  padding: var(--e4) var(--e4) var(--e4) var(--e5);
  border: 1px solid var(--trait);
  border-radius: 22px;
  background: var(--carte);
  box-shadow: 0 24px 48px -38px rgba(0, 0, 0, 0.35);
}
.jn-plage .tri-rubriques { gap: 6px; }
.jn-plage .tri-puce {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--trait);
  background: transparent;
  color: var(--encre-2, #2A2A2A);
}
.jn-plage .tri-puce[data-nb]::after {
  content: attr(data-nb);
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 99px;
  background: rgba(209, 163, 38, 0.14);
  color: var(--or-lisible);
  font-size: 10.5px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--net) ease, color var(--net) ease;
}
.jn-plage .tri-puce:hover { border-color: rgba(0, 0, 0, 0.35); color: var(--encre); }
.jn-plage .tri-puce[aria-pressed="true"] { background: var(--noir); border-color: var(--noir); color: #fff; }
.jn-plage .tri-puce[aria-pressed="true"]::after { background: var(--or); color: var(--noir); }
.jn-plage .tri-outils { padding-top: var(--e4); border-top: 1px dashed rgba(209, 163, 38, 0.55); }
.jn-plage .tri-ordre { border-color: var(--trait); background: var(--fond); }
.jn-plage .tri-bascule { color: var(--encre-3); }
.jn-plage .tri-bascule:hover { color: var(--encre); }
.jn-plage .tri-bascule[aria-pressed="true"] { background: var(--noir); color: #fff; }
.jn-plage .tri-etiquette { color: var(--encre-3); }
.jn-plage .tri-choix {
  border-color: var(--trait);
  background-color: var(--fond);
  color: var(--encre);
}
.jn-plage .tri-choix:hover { border-color: rgba(0, 0, 0, 0.35); }
.jn-plage .tri-choix option { background: #fff; color: var(--encre); }
.plage.jn-plage p.tri-compte {
  margin-left: auto;
  color: var(--encre-3);
  font-size: var(--p-5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plage.jn-plage p.tri-compte span { color: var(--encre); font-weight: 600; }
.plage.jn-plage p.tri-vide {
  margin-top: var(--e6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3) var(--e4);
  color: var(--encre-3);
}
.jn-plage .tri-raz { color: var(--or-lisible); border-color: var(--or); }
.jn-plage .tri-raz:hover { background: var(--or); color: var(--noir); }

/* ─── La grille du magazine ─── */
.jn-plage .journal {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e7) var(--e5);
  margin-top: var(--e7);
}
.jn-plage .billet {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  align-content: start;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  color: var(--encre);
  transition: none;
}
.jn-plage .billet:hover { transform: none; box-shadow: none; }
.jn-plage .billet-couv {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 16px;
  background: var(--fond-2);
  box-shadow: 0 0 0 1px var(--trait), 0 26px 44px -34px rgba(0, 0, 0, 0.45);
  transition: transform 600ms var(--ressort), box-shadow 500ms ease;
}
.jn-plage .billet-couv img { transition: transform 1200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.jn-plage .billet:hover .billet-couv { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(209, 163, 38, 0.6), 0 34px 54px -34px rgba(0, 0, 0, 0.5); }
.jn-plage .billet:hover .billet-couv img { transform: scale(1.035); }
.jn-plage .billet-meta {
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: var(--e4) 2px 0;
  color: var(--encre-3);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.jn-plage .billet-cat {
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(209, 163, 38, 0.13);
  color: var(--or-lisible);
  font-weight: 600;
}
.jn-plage .billet-nom {
  padding: 10px 2px 0;
  font-size: 1.22rem;
  font-weight: 500;
  line-height: 1.28;
  text-wrap: balance;
}
.jn-plage .billet:hover .billet-nom { color: var(--encre); }
.jn-plage .billet-chapo {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 10px 2px 0;
  color: var(--encre-3);
  font-size: var(--p-4);
  line-height: 1.55;
}
.jn-plage .billet-lire {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  margin-top: var(--e4);
  padding: 0 2px 4px;
  color: var(--encre);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: inset 0 -1.5px 0 var(--or);
}
.jn-plage .billet-lire .fleche { display: inline-block; color: var(--or-lisible); transition: transform 400ms var(--ressort); }
.jn-plage .billet:hover .billet-lire .fleche { transform: translateX(5px); }
.jn-plage .billet:focus-visible { outline: 2px solid var(--or-lisible); outline-offset: 8px; border-radius: 18px; }

/* ─── À la une : le plus récent, en grand ───
   Classe posée par journal.js quand rien n'est filtré et que l'ordre
   est « du plus récent ». Sans script, la grille reste régulière. */
.jn-plage .journal.a-une .billet.est-une {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: var(--e7);
  align-items: start;
  padding-bottom: var(--e7);
  border-bottom: 1px solid var(--trait);
}
.jn-plage .journal.a-une .billet.est-une .billet-couv {
  grid-column: 1;
  grid-row: 1 / span 5;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
}
.jn-plage .journal.a-une .billet.est-une .billet-meta::before {
  content: var(--jn-une, 'À la une');
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--noir);
  color: var(--or);
  font-weight: 600;
  letter-spacing: 0.12em;
}
.jn-plage .journal.a-une .billet.est-une > :not(.billet-couv) { grid-column: 2; }
.jn-plage .journal.a-une .billet.est-une .billet-meta { padding-top: var(--e3); }
.jn-plage .journal.a-une .billet.est-une .billet-nom {
  padding-top: var(--e4);
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.jn-plage .journal.a-une .billet.est-une .billet-chapo {
  -webkit-line-clamp: 5;
  padding-top: var(--e4);
  font-size: var(--p-3, 1.05rem);
}
.jn-plage .journal.a-une .billet.est-une .billet-lire { margin-top: var(--e5); }

/* ─── L'encart final ─── */
.jn-fin {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--e7);
  padding: clamp(28px, 5vw, 64px);
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(209, 163, 38, 0.22), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(209, 163, 38, 0.1), transparent 70%),
    var(--noir);
  color: var(--sur-noir);
  box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.35);
}
.jn-fin .donnee { color: var(--sur-noir-2); }
.jn-fin-titre { margin-top: var(--e4); color: #fff; }
.jn-fin-lead { max-width: 44ch; margin-top: var(--e4); color: var(--sur-noir-2); }
.jn-fin-boutons { justify-content: flex-start; margin-top: var(--e6); }
.jn-bouton-clair { --fond-bouton: transparent; --encre-bouton: #fff; --trait-bouton: rgba(255, 255, 255, 0.35); }
.jn-fin-sommaire {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jn-fin-sommaire li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: var(--p-3, 1.05rem);
}
.jn-fin-puce {
  flex: none;
  width: 10px; height: 10px;
  background: var(--or);
  transform: rotate(45deg);
  box-shadow: 0 0 0 4px rgba(209, 163, 38, 0.18);
}

/* ─── Les écrans moyens et petits ─── */
@media (max-width: 1100px) {
  .jn-plage .journal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jn-plage .journal.a-une .billet.est-une { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .jn-plage .journal.a-une .billet.est-une .billet-couv { grid-row: auto; }
  .jn-plage .journal.a-une .billet.est-une > :not(.billet-couv) { grid-column: 1; }
  .jn-fin { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .jn-plage .tri { padding: var(--e4); border-radius: 18px; }
  .jn-plage .tri-rubriques { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--e4) * -1); padding-inline: var(--e4); scrollbar-width: none; }
  .jn-plage .tri-rubriques::-webkit-scrollbar { display: none; }
  .jn-plage .tri-puce { flex: none; }
  .plage.jn-plage p.tri-compte { margin-left: 0; }
  .jn-plage .journal { grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
  .jn-plage .journal.a-une .billet.est-une { padding-bottom: var(--e6); }
  .jn-plage .journal.a-une .billet.est-une .billet-nom { font-size: 1.55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .jn-plage .billet-couv, .jn-plage .billet-couv img, .jn-plage .billet-lire .fleche { transition: none; }
}

/* ─── La signature des billets (15/10/2026) : Thomas Podéroso ou Capucine Morreaux ─── */
.billet-auteur { display: inline-flex; align-items: center; gap: 8px; color: var(--encre-3); font-size: var(--p-5); }
.billet-auteur i { position: relative; display: grid; place-items: center; width: 22px; height: 22px; font-style: normal; font-size: 8.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--or); }
.billet-auteur i::before { content: ''; position: absolute; inset: 4px; z-index: -1; border-radius: 3px; background: var(--noir); transform: rotate(45deg); }
.billet-auteur i { isolation: isolate; }
.billet-auteur--capucine i { color: var(--or-lisible); }
.billet-auteur--capucine i::before { background: #FBF3DE; box-shadow: inset 0 0 0 1px var(--or); }