/* =========================================================
   COMPOSANTS COMMUNS ACTUALITÉS / AGENDA — vue habitant
   Extrait prudemment de actualites.css et agenda.css.
   Ne contient que des déclarations identiques entre les deux pages.
   ========================================================= */
/* Commun #1 */
.actualites-icon-btn,
.agenda-icon-btn {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  font-size: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Commun #2 */
.actualites-mobile-header,
.agenda-mobile-header {
  background:
    linear-gradient(180deg, rgba(7,16,34,.98) 0%, rgba(7,16,34,.94) 58%, rgba(7,13,26,0) 100%),
    radial-gradient(circle at 90% 0%, rgba(139,92,246,.26), transparent 34%),
    radial-gradient(circle at 10% 18%, rgba(59,163,255,.16), transparent 34%) !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
  margin-bottom: -10px !important;
  padding-bottom: 18px !important;
}

/* Commun #3 */
.actualites-mobile-header,
.agenda-mobile-header {
  padding: calc(18px + env(safe-area-inset-top)) 18px 8px !important;
  background: radial-gradient(circle at 90% 0%, rgba(139,92,246,.28), transparent 36%),
              radial-gradient(circle at 10% 18%, rgba(59,163,255,.18), transparent 34%),
              rgba(7,16,34,.96) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

/* Commun #4 */
.actualites-tab.active::after,
.actualites-tab.is-active::after,
.actualites-tab[aria-current="page"]::after,
.agenda-period-tabs .date-chip.active::after {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  margin-left: 7px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 0 10px rgba(255,255,255,.55) !important;
  flex: 0 0 auto !important;
}

/* Commun #5 */
.actualites-tab.active,
.actualites-tab.is-active,
.actualites-tab[aria-current="page"],
.agenda-period-tabs .date-chip.active {
  color: #fff !important;
  background: linear-gradient(145deg, #8f4cff 0%, #5a35e8 58%, #3c20a7 100%) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 12px 28px rgba(89,57,230,.33), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* Commun #6 */
body:has(.actualites-mobile-header),
.app:has(.actualites-mobile-header),
body:has(.agenda-mobile-header),
.agenda-app,
.app:has(.agenda-mobile-header) {
  background:
    radial-gradient(circle at 90% 0%, rgba(139,92,246,.24), transparent 34%),
    radial-gradient(circle at 10% 14%, rgba(59,163,255,.14), transparent 32%),
    linear-gradient(180deg, #071022 0%, #070d1a 42%, #070d1a 100%) !important;
}

/* Commun #7 */
.actualites-topbar,
.agenda-topbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  grid-template-columns: none !important;
  min-height: 52px !important;
  gap: 12px !important;
}

/* Commun #8 */
.actualites-page-title h1,
.agenda-page-title h1 {
  font-size: 42px !important;
  line-height: .95 !important;
  font-weight: 900 !important;
  margin: 0 !important;
  letter-spacing: -1px !important;
}

/* Commun #9 */
.actualites-carousel,
.actualites-carousel-track,
.actualites-carousel-slide,
.agenda-hero-carousel,
.agenda-hero-track,
.agenda-hero-slide {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* Commun #10 */
.actualites-page-content,
.agenda-page-content.agenda-premium-page,
.agenda-page-content {
  background: transparent !important;
  padding-top: 0 !important;
}

/* Commun #11 */
.actualites-page-title,
.agenda-page-title {
  margin-top: 30px !important;
  margin-bottom: 18px !important;
}

/* Commun #12 */
.actualites-topbar h1,
.agenda-topbar h1 {
  flex: 1 1 auto !important;
  text-align: center !important;
}

/* Commun #13 */
.actualites-icon-btn i,
.agenda-icon-btn i {
  font-size: 26px !important;
  line-height: 1 !important;
}

/* Commun #14 */
.actualites-tab:hover,
.actualites-tab:focus,
.agenda-highlight:hover,
.agenda-highlight:focus,
.agenda-hero-slide:hover,
.agenda-hero-slide:focus {
  color: #fff;
  text-decoration: none;
}

/* Commun #15 */
body:has(.actualites-mobile-header),
.app:has(.actualites-mobile-header),
body:has(.agenda-mobile-header),
.agenda-app,
.app:has(.agenda-mobile-header) {
  background: #020713 !important;
}

/* Commun #16 */
.gallery-section,
.article-gallery-section {
  margin-bottom: 24px !important;
}

/* Commun #17 */
.actualites-page-title p,
.agenda-page-title p {
  max-width: 330px !important;
}

/* Commun #18 */
.detail-navigation,
.post-navigation,
.article-navigation,
.event-navigation {
  margin-top: 24px !important;
}

/* Commun #19 */
.actualites-featured-section,
.agenda-featured-section {
  margin-top: 0 !important;
}

/* Commun #20 */
.actualites-tabs::-webkit-scrollbar,
.news-row.dynamic-news-row > .news-row-content > p,
.actualites-mobile-header .actualites-topbar h1,
.agenda-filter-block.agenda-period-tabs::-webkit-scrollbar,
.agenda-period-tabs .date-chip span,
.agenda-mobile-header .agenda-topbar h1 {
  display: none !important;
}

/* Commun #21 */
.actualites-carousel img,
.actualites-carousel a,
.agenda-hero-carousel img,
.agenda-hero-carousel a {
  -webkit-user-drag: none;
}

/* ==========================================================================
   Badges & catégories partagés Actualités / Agenda
   --------------------------------------------------------------------------
   Zone sensible : ces couleurs portent l'identité visuelle des catégories.
   Ne pas supprimer lors des purges, même si certaines catégories semblent
   peu utilisées dans les jeux de données de test.
   ========================================================================== */

.category-pill,
.mini-pill,
.news-category,
.featured-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 0 !important;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  color: #ffffff;
  line-height: 1 !important;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(0,0,0,.16);
}

.category-pill {
  min-height: 32px;
  padding: 8px 12px;
  font-size: .78rem;
}

.mini-pill,
.news-category {
  min-height: 28px;
  padding: 6px 10px;
  font-size: .72rem;
}

.featured-label {
  padding: 8px 12px;
  color: #111827;
  font-size: .78rem;
  background: linear-gradient(135deg,#FDE68A,#F59E0B);
}

.news-badges,
.featured-badges,
.featured-category-row,
.badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.featured-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  margin: 0;
  border: 1px solid #F59E0B;
  color: #F59E0B;
  background: transparent;
}

.category-information {
  background: linear-gradient(135deg, #2773D5, #1D4ED8) !important;
  color: #fff !important;
}

.category-alerte {
  background: linear-gradient(135deg, #EF4444, #B91C1C) !important;
  color: #fff !important;
}

.category-travaux {
  background: linear-gradient(135deg, #F59E0B, #D97706) !important;
  color: #fff !important;
}

.category-evenement {
  background: linear-gradient(135deg, #5536D0, #3F22B5) !important;
  color: #fff !important;
}

.category-association {
  background: linear-gradient(135deg, #03A663, #047857) !important;
  color: #fff !important;
}

.category-ecole {
  background: linear-gradient(135deg, #FACC15, #EAB308) !important;
  color: #111827 !important;
}

.category-sport {
  background: linear-gradient(135deg, #84CC16, #4D7C0F) !important;
  color: #fff !important;
}

.category-culture {
  background: linear-gradient(135deg, #DB4467, #BE185D) !important;
  color: #fff !important;
}

.category-vie-municipale {
  background: linear-gradient(135deg, #64748B, #334155) !important;
  color: #fff !important;
}

.pill-purple {
  background: linear-gradient(145deg, #8b5cf6, #4f20d8) !important;
  color: #fff !important;
}