/* ============================================================
   Bulletin municipal — kiosque + fiche (/bulletins/)
   CSS COMMUN à tous les thèmes, volontairement NEUTRE :
   aucune variable de thème (chaque thème a ses propres tokens),
   couleurs en currentColor / rgba / teintes fixes qui passent
   en mode clair comme en mode sombre. Chargé conditionnellement
   par public/bulletins.php via $headExtra (pattern tourisme).
   ============================================================ */

/* ---------- Couverture (vraie image OU générée) ---------- */
.blt-cover { display: block; aspect-ratio: 1 / 1.414; border-radius: 7px; overflow: hidden; position: relative;
  box-shadow: 0 8px 22px rgba(15, 25, 40, .22); background: #23364e; }
.blt-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Couverture générée (pas d'image fournie) : dégradé + textes — le kiosque reste présentable. */
.blt-couv-gen { width: 100%; height: 100%; color: #fff; padding: 7% 8% 8%;
  display: flex; flex-direction: column; }
.blt-couv-gen .blt-cg-masthead { font-size: .58em; letter-spacing: .06em; text-transform: uppercase;
  opacity: .9; font-weight: 700; line-height: 1.25; }
.blt-couv-gen .blt-cg-titre { font-family: Georgia, 'Times New Roman', serif; font-weight: 700;
  font-size: 1em; line-height: 1.15; margin-top: .3em; overflow-wrap: anywhere; }
.blt-couv-gen .blt-cg-art { flex: 1; margin: 8% 0; border-radius: 4px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); }
.blt-couv-gen .blt-cg-foot { font-size: .62em; font-weight: 700; letter-spacing: .03em; }
.blt-couv-gen .blt-cg-foot b { display: block; font-size: 1.35em; font-family: Georgia, 'Times New Roman', serif; }
/* 5 dégradés en rotation (id % 5) — mêmes tons que la maquette validée */
.blt-c0 { background: linear-gradient(150deg, #1b5fb0, #0d3b78); }
.blt-c1 { background: linear-gradient(150deg, #2e7d5b, #14503a); }
.blt-c2 { background: linear-gradient(150deg, #b5642a, #7c3d17); }
.blt-c3 { background: linear-gradient(150deg, #5a4b8a, #332a5c); }
.blt-c4 { background: linear-gradient(150deg, #a53a4e, #6c2130); }

/* ---------- Boutons (neutres : lisibles sur tous les thèmes, clair/sombre) ---------- */
.blt-btn { display: inline-block; font-size: .88rem; font-weight: 700; border-radius: 8px;
  padding: .55rem 1rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; line-height: 1.3; }
.blt-btn-p { background: #1f2937; color: #fff !important; }
.blt-btn-p:hover { background: #111827; text-decoration: none; }
.blt-btn-g { background: transparent; color: inherit !important; border-color: rgba(128, 128, 128, .45); }
.blt-btn-g:hover { border-color: currentColor; text-decoration: none; }

/* ---------- Kiosque ---------- */
.blt-kiosque .blt-intro { opacity: .8; margin-top: .25rem; }

.blt-hero { display: grid; grid-template-columns: 190px 1fr; gap: 1.6rem; align-items: center;
  padding: 1.4rem 0 1.6rem; border-bottom: 1px dashed rgba(128, 128, 128, .35); margin-bottom: 1.6rem; }
.blt-hero .blt-cover { font-size: 11px; }
/* Fond doré foncé : blanc sur #7a5a12 ≈ 5,6:1 → conforme WCAG AA / RGAA (texte ~11px). */
.blt-badge { display: inline-block; font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: #fff; background: #7a5a12; padding: .2rem .55rem; border-radius: 20px;
  margin-bottom: .5rem; }
.blt-hero h2 { font-size: 1.45rem; margin: .1rem 0 .4rem; }
.blt-hero .blt-hero-extrait { opacity: .85; font-size: .95rem; margin: 0 0 1rem; max-width: 62ch; }
.blt-hero .blt-hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.blt-annee { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .05em; opacity: .75;
  margin: 1.6rem 0 .8rem; padding-bottom: .3rem; border-bottom: 1px solid rgba(128, 128, 128, .25); }

.blt-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.2rem;
  margin-bottom: 2rem; }
/* Tout lien-couverture (hero ET grille) : neutralise le style de lien du thème. */
a.blt-item { text-decoration: none; color: inherit; display: block; }
a.blt-item:hover { text-decoration: none; }
.blt-grille a.blt-item { min-width: 0; transition: transform .15s ease; }
.blt-grille a.blt-item:hover { transform: translateY(-3px); }
.blt-grille .blt-cover { font-size: 9px; }
.blt-cap { display: block; font-size: .78rem; opacity: .75; text-align: center; margin-top: .45rem; line-height: 1.3; }
.blt-cap b { display: block; font-size: .85rem; opacity: 1; }

.blt-pagination { display: flex; gap: .4rem; justify-content: center; margin: 2rem 0 .5rem; flex-wrap: wrap; }
.blt-pagination a, .blt-pagination span { padding: .35rem .75rem; border-radius: 6px;
  border: 1px solid rgba(128, 128, 128, .35); text-decoration: none; color: inherit; font-size: .88rem; }
.blt-pagination span[aria-current] { background: #1f2937; color: #fff; border-color: #1f2937; }

/* ---------- Fiche d'un numéro ---------- */
.blt-fiche { display: grid; grid-template-columns: 230px 1fr; gap: 1.8rem; align-items: start; }
.blt-fiche .blt-cover { position: sticky; top: 1rem; font-size: 13px; }
.blt-surtitre { font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  opacity: .7; }
.blt-fiche h1 { margin: .2rem 0 .6rem; }
.blt-edito { font-size: .96rem; }
.blt-som { margin-top: 1.3rem; border-top: 1px solid rgba(128, 128, 128, .25); padding-top: .9rem; }
.blt-som h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; margin: 0 0 .5rem; }
.blt-som ul { list-style: none; padding: 0; margin: 0; }
.blt-som li { display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0;
  border-bottom: 1px solid rgba(128, 128, 128, .18); font-size: .92rem; }
.blt-som li .blt-som-page { opacity: .65; white-space: nowrap; font-variant-numeric: tabular-nums; }
.blt-fiche-actions { margin-top: 1.3rem; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .blt-hero { grid-template-columns: 130px 1fr; gap: 1rem; }
  .blt-hero .blt-cover { font-size: 8px; }
  .blt-fiche { grid-template-columns: 1fr; }
  .blt-fiche .blt-cover { position: static; max-width: 240px; margin: 0 auto; }
  .blt-grille { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .blt-hero { grid-template-columns: 1fr; }
  .blt-hero .blt-cover { max-width: 190px; margin: 0 auto; }
}