/* Blog général de lune-azur.fr — complète accueil.css (jetons, ciel, footer, eyebrow, h1). */

.journal {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  width: min(940px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2.5rem 1.25rem 2rem;
}

.journal__retour {
  align-self: flex-start;
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--text-muted);
  text-decoration: none;
  padding: .35rem .1rem;
}
.journal__retour:hover { color: var(--text); }
.journal__retour:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.journal__tete { text-align: center; }
.journal__tete h1 { margin-bottom: .5rem; }

.journal__intro {
  max-width: 58ch;
  margin: 1rem auto 0;
  color: var(--text-muted);
  text-align: center;
}
.journal__intro strong { color: var(--text); font-weight: 500; }
/* La phrase de rattachement porte le sens ; la note pratique passe au second plan. */
.journal__intro--suite { margin-top: .55rem; font-size: .88rem; opacity: .8; }

/* ─── Filtres par catégorie ────────────────────────────────────────────────── */

.filtres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}

.filtre {
  min-height: 38px;
  padding: .4rem 1rem;
  font: inherit;
  font-size: .85rem;
  letter-spacing: .03em;
  color: var(--text-muted);
  background: rgba(233, 233, 237, .06);
  border: 1px solid var(--divider);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.filtre:hover { color: var(--text); background: rgba(233, 233, 237, .12); }
.filtre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.filtre[aria-pressed="true"] {
  color: #14172b;
  background: var(--accent);
  border-color: transparent;
  font-weight: 500;
}

/* ─── Liste des articles ───────────────────────────────────────────────────── */

.journal__etat {
  text-align: center;
  color: var(--text-muted);
  padding: 1.5rem 0;
}
.journal__etat[hidden] { display: none; }

.actus {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}

.actu__lien {
  display: block;
  padding: 1.15rem 1.35rem;
  text-decoration: none;
  color: inherit;
  background: rgba(16, 23, 49, .5);
  border: 1px solid var(--divider);
  border-radius: 12px;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.actu__lien:hover {
  background: rgba(26, 35, 72, .72);
  border-color: rgba(170, 204, 255, .35);
  transform: translateY(-1px);
}
.actu__lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.actu__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .7rem;
  margin: 0 0 .5rem;
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--text-muted);
}

.actu__classe {
  padding: .18rem .6rem;
  border-radius: 999px;
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .1em;
  border: 1px solid transparent;
}
.actu__classe--litterature { color: #cfe0ff; background: rgba(90, 130, 220, .18); border-color: rgba(140, 175, 255, .35); }
.actu__classe--info        { color: #d8d2ff; background: rgba(130, 110, 220, .18); border-color: rgba(170, 150, 255, .35); }
.actu__classe--auteurs     { color: #ffe2c9; background: rgba(210, 145, 85, .16); border-color: rgba(235, 180, 125, .32); }
.actu__classe--pro         { color: #c9f0e4; background: rgba(75, 165, 140, .16); border-color: rgba(125, 210, 185, .32); }

.actu__source { font-weight: 500; color: var(--text); }
.actu__date { margin-left: auto; }

.actu__titre {
  margin: 0 0 .4rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text);
}
.actu__lien:hover .actu__titre { color: var(--accent); }

.actu__resume {
  margin: 0;
  color: var(--text-muted);
  font-size: .9rem;
  line-height: 1.55;
}

.actu__hote {
  display: inline-block;
  margin-top: .6rem;
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--text-muted);
  opacity: .65;
}

/* ─── Secours : sans JavaScript, ou si la liste ne répond pas ──────────────── */

.secours {
  border-top: 1px solid var(--divider);
  padding-top: 1.25rem;
  color: var(--text-muted);
  font-size: .9rem;
}
.secours[hidden] { display: none; }
.secours ul { margin: .6rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.secours a { color: var(--accent); }

.journal footer { text-align: center; }

@media (max-width: 560px) {
  .actu__date { margin-left: 0; width: 100%; }
  .actu__titre { font-size: 1.2rem; }
}