/**
 * Bandeau d'annonce du header — feuille PARTAGÉE (thème-agnostique).
 *
 * Règles tenues ici :
 *  - aucune couleur en dur : tout vient des tokens du thème actif, avec un
 *    repli neutre si le token n'existe pas encore chez ce thème ;
 *  - propriétés LOGIQUES (margin-inline, padding-inline, border-inline) donc
 *    le RTL fonctionne sans feuille miroir ;
 *  - mobile-first : une seule ligne, ellipsis, jamais de débordement ;
 *  - hauteur fixe et réservée => pas de layout shift au chargement.
 *
 * Les thèmes n'ont qu'à surcharger .sws-announce--{variante} pour leur identité.
 */

.sws-announce {
  /* Tokens du thème avec repli neutre : le bandeau reste lisible même sur un
     thème qui ne déclare pas encore de token dédié. */
  --_ab-bg:     var(--announce-bg, var(--color-secondary, #0F0F0F));
  --_ab-fg:     var(--announce-fg, #FFFFFF);
  --_ab-accent: var(--announce-accent, var(--color-accent, var(--color-primary, #D42B3A)));

  background: var(--_ab-bg);
  color: var(--_ab-fg);
  font-size: 12px;
  line-height: 1.4;
  /* min-height plutôt que height : le texte long ne déborde pas de la boîte. */
  min-height: var(--announce-height, 34px);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.sws-announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding-block: 6px;
  /* Logique : en RTL, le décalage suit le sens de lecture sans règle miroir. */
  padding-inline: clamp(12px, 3vw, 28px);
}

.sws-announce__text {
  margin: 0;
  min-width: 0;                /* indispensable pour que l'ellipsis s'applique */
  display: flex;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
}

.sws-announce__message {
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sws-announce__secondary {
  opacity: .75;
  font-weight: 400;
  white-space: nowrap;
}

.sws-announce__cta {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
  padding-block: 2px;
  border-bottom: 1px solid currentColor;
  transition: opacity .18s ease;
}

.sws-announce__cta:hover,
.sws-announce__cta:focus {
  color: inherit;
  opacity: .78;
  text-decoration: none;
}

.sws-announce__arrow {
  /* Logique : la flèche bascule de côté en RTL sans sélecteur dédié. */
  margin-inline-start: 4px;
}

/* La flèche pointe vers le sens de lecture : ‹ au lieu de › en RTL. */
[dir="rtl"] .sws-announce__arrow {
  transform: scaleX(-1);
  display: inline-block;
}

/* ── Réassurance : plusieurs promesses ─────────────────────────────────── */

.sws-announce__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(12px, 4vw, 32px);
  min-width: 0;
  overflow: hidden;
}

.sws-announce__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sws-announce__item i {
  opacity: .8;
  font-size: 11px;
}

/* ── Urgence (fin de campagne proche) ──────────────────────────────────── */

.sws-announce.is-urgent {
  background: var(--_ab-accent);
}

/* ── Variante « luxe » : sobriété premium, pas de bloc de couleur ──────── */

.sws-announce--luxe {
  --_ab-bg: var(--announce-bg, var(--color-background, #FBF6EF));
  --_ab-fg: var(--announce-fg, var(--color-text, #3A2C34));

  border-bottom: 1px solid var(--color-border, #E7DBCF);
  font-size: 12.5px;
  letter-spacing: .02em;
}

.sws-announce--luxe .sws-announce__message {
  font-family: var(--font-family-heading, Georgia, serif);
  font-weight: 500;
}

.sws-announce--luxe .sws-announce__cta {
  border-bottom-color: var(--_ab-accent);
  color: var(--_ab-accent);
}

/* En luxe, l'urgence reste discrète : on colore le texte, pas le fond. */
.sws-announce--luxe.is-urgent {
  background: var(--_ab-bg);
}

.sws-announce--luxe.is-urgent .sws-announce__message {
  color: var(--_ab-accent);
}

/* ── Mobile ────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .sws-announce {
    font-size: 11.5px;
  }

  .sws-announce__inner {
    gap: 8px;
  }

  .sws-announce__secondary {
    display: none;          /* la date passe à la trappe avant le message */
  }

  /* Au-delà de 2 promesses, l'écran mobile ne peut pas suivre : on garde
     les deux premières plutôt que de laisser la ligne déborder. */
  .sws-announce__item:nth-child(n+3) {
    display: none;
  }
}

@media (max-width: 400px) {
  .sws-announce__item:nth-child(n+2) {
    display: none;
  }
}

/* Respecte le réglage système : aucune transition imposée. */
@media (prefers-reduced-motion: reduce) {
  .sws-announce__cta {
    transition: none;
  }
}