/* ════════════════════════════════════════════════════════════════════════
   Le bandeau d'annonce — ce que le bureau met en haut de tout le site.

   Cette feuille est chargée par **deux** pages : celles du site, qui portent
   le bandeau, et l'éditeur d'annonces de L'Atelier, qui en montre l'aperçu.
   C'est la raison d'être du fichier — la même que pour `prose.css` : deux
   copies d'une mise en forme finissent toujours par diverger, et c'est alors
   l'aperçu qui ment à celui qui écrit.
   ════════════════════════════════════════════════════════════════════════ */

.b-announce {
  /* défaut = info (gold de la palette) */
  --ann: var(--b-gold);
  --ann-rgb: var(--b-tan-rgb);
  position: relative;
  z-index: 5;
  background:
    linear-gradient(180deg,
      rgba(var(--ann-rgb), 0.16),
      rgba(var(--ann-rgb), 0.08));
  border-top: 1px solid rgba(var(--ann-rgb), 0.30);
  border-bottom: 1px solid var(--b-line);
}
.b-announce--cenaze   { --ann: #6E7E8C; --ann-rgb: 110, 126, 140; }
.b-announce--fermeture{ --ann: #B5852F; --ann-rgb: 181, 133, 47; }
.b-announce--urgent   { --ann: #C0492F; --ann-rgb: 192, 73, 47; }
.b-announce--info     { --ann: var(--b-gold); --ann-rgb: var(--b-tan-rgb); }

.b-announce-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.b-announce-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--ann);
  background: rgba(var(--ann-rgb), 0.14);
  border: 1px solid rgba(var(--ann-rgb), 0.34);
}
.b-announce-body {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.b-announce-tag {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ann);
}
.b-announce-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--b-ink);
}
.b-announce-text {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--b-ink-soft);
}
.b-announce-meta {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--b-mute);
  width: 100%;
}
.b-announce-cta {
  flex: none;
  margin-left: auto;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  padding: 7px 16px;
  border-radius: 999px;
  color: var(--ann);
  border: 1px solid rgba(var(--ann-rgb), 0.45);
  transition: background 0.18s ease, color 0.18s ease;
}
.b-announce-cta:hover {
  background: var(--ann);
  color: var(--b-bg);
}

/* Sur un écran étroit, l'icône et le texte se rangent l'un sous l'autre. */
@media (max-width: 640px) {
  .b-announce-in { padding: 11px 18px; gap: 11px; align-items: flex-start; }
  .b-announce-icon { width: 32px; height: 32px; }
  .b-announce-title { font-size: 17px; }
  .b-announce-cta { margin-left: 0; margin-top: 6px; }
}