/* ═══════════════════════════════════════════════
   ANNOUNCEMENT BANNER (site-wide top bar)
═══════════════════════════════════════════════ */
.announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100; /* above navbar */
  width: 100%;
  padding: 0.55rem var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  line-height: 1.4;
  transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
  overflow: hidden;
}

/* Variants — fond opaque pour éviter le bleed-through au scroll */
.announcement-bar--info    { background: #0a1a22; border-bottom: 1px solid rgba(0, 180, 219, 0.35); color: var(--color-white); }
.announcement-bar--success { background: #0a1a0f; border-bottom: 1px solid rgba(34, 197, 94, 0.35); color: var(--color-white); }
.announcement-bar--warning { background: #1a1508; border-bottom: 1px solid rgba(251, 191, 36, 0.40); color: var(--color-white); }
.announcement-bar--promo   { background: linear-gradient(90deg, #081620 0%, #0a0f22 100%); border-bottom: 1px solid rgba(0, 180, 219, 0.30); color: var(--color-white); }

/* Pill badge */
.announcement-bar__badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 999px;
}
.announcement-bar--info    .announcement-bar__badge { background: rgba(0,180,219,0.25); color: #00B4DB; }
.announcement-bar--success .announcement-bar__badge { background: rgba(34,197,94,0.25); color: #22c55e; }
.announcement-bar--warning .announcement-bar__badge { background: rgba(251,191,36,0.25); color: #fbbf24; }
.announcement-bar--promo   .announcement-bar__badge { background: rgba(0,180,219,0.2); color: #00B4DB; }

.announcement-bar__text {
  flex: 1;
  text-align: center;
  color: var(--color-white-dim);
}

.announcement-bar__text strong {
  color: var(--color-white);
  font-weight: var(--weight-semi);
}

.announcement-bar__link {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-green);
  white-space: nowrap;
  transition: color var(--duration-fast);
}
.announcement-bar__link:hover { color: var(--color-white); }

.announcement-bar__close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white-muted);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast), background var(--duration-fast);
  margin-left: var(--space-2);
}
.announcement-bar__close:hover {
  color: var(--color-white);
  background: rgba(255,255,255,0.07);
}

/* Hidden state */
.announcement-bar.is-dismissed {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 640px) {
  .announcement-bar {
    padding: 0.5rem var(--space-4);
    font-size: var(--text-xs);
  }
  .announcement-bar__badge { display: none; }
}


/* ═══════════════════════════════════════════════
   ANNOUNCEMENTS SECTION (home page)
═══════════════════════════════════════════════ */
.announcements-section {
  padding-block: var(--space-20);
}

.announcements-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.announcements-section__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-green);
  margin-bottom: var(--space-2);
}

.announcements-section__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  line-height: var(--leading-tight);
}

.announcements-section__all {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--color-green);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: gap var(--duration-fast);
}
.announcements-section__all:hover { gap: var(--space-3); }
.announcements-section__all svg { width: 14px; height: 14px; }

/* Grid */
.announcements-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-5);
}

.announcements-grid__secondary {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Card */
.ann-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  transition: border-color var(--duration-normal), transform var(--duration-normal);
  position: relative;
  overflow: hidden;
}

.ann-card:hover {
  border-color: var(--color-border-green);
  transform: translateY(-2px);
}

/* Image */
.ann-card__img-wrap {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.ann-card--featured .ann-card__img-wrap {
  height: min(42vw, 320px);
  min-height: 280px;
}
.announcements-grid__secondary .ann-card__img-wrap {
  height: 160px;
}
.ann-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.75) grayscale(15%);
  transition: transform 0.6s var(--ease-out), filter 0.6s;
}
.ann-card:hover .ann-card__img {
  transform: scale(1.05);
  filter: brightness(0.85) grayscale(0%);
}
.ann-card__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(8,8,8,0.55) 100%);
}

/* Stripe colorée en haut de l'image */
.ann-card__img-wrap::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.ann-card--info    .ann-card__img-wrap::after { background: #00B4DB; }
.ann-card--success .ann-card__img-wrap::after { background: #22c55e; }
.ann-card--warning .ann-card__img-wrap::after { background: #fbbf24; }
.ann-card--promo   .ann-card__img-wrap::after { background: linear-gradient(90deg, #00B4DB, #2f55d4); }

/* Content zone */
.ann-card__content {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}
.ann-card--featured .ann-card__content {
  padding: var(--space-8) var(--space-10);
  gap: var(--space-5);
}

.ann-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.ann-card__type {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 999px;
}
.ann-card--info    .ann-card__type { background: rgba(0,180,219,0.15); color: #00B4DB; }
.ann-card--success .ann-card__type { background: rgba(34,197,94,0.15);  color: #22c55e; }
.ann-card--warning .ann-card__type { background: rgba(251,191,36,0.15); color: #fbbf24; }
.ann-card--promo   .ann-card__type { background: rgba(47,85,212,0.15);  color: #6b8ef5; }

.ann-card__date,
.ann-card__read-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-white-muted);
}

.ann-card__deadline {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fbbf24;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.12);
}

.ann-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  line-height: var(--leading-snug);
}
.ann-card--featured .ann-card__title {
  font-size: var(--text-2xl);
}

.ann-card__body {
  font-size: var(--text-sm);
  color: var(--color-white-muted);
  line-height: var(--leading-normal);
}

.ann-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-white-dim, #c8c8c8);
  line-height: var(--leading-relaxed, 1.65);
}

.ann-card__highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ann-card__highlights li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--text-sm);
  color: var(--color-white-muted);
  line-height: var(--leading-snug);
}

.ann-card__highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-green);
}

.ann-card__highlights--compact {
  gap: var(--space-1);
}

.ann-card__extras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-border);
}

.ann-card__extra {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-white-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


.ann-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--color-green);
  margin-top: auto;
  transition: gap var(--duration-fast);
}
.ann-card__link:hover { gap: var(--space-3); }
.ann-card__link svg { width: 14px; height: 14px; }

/* Empty state */
.announcements-empty {
  grid-column: 1 / -1;
  padding: var(--space-16);
  text-align: center;
  color: var(--color-white-muted);
  font-size: var(--text-sm);
}

@media (max-width: 900px) {
  .announcements-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .announcements-section__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .announcements-section__title {
    font-size: var(--text-2xl);
  }
  .ann-card--featured .ann-card__img-wrap {
    min-height: 220px;
    height: 52vw;
  }
  .ann-card--featured .ann-card__content {
    padding: var(--space-6) var(--space-6);
  }
}