/* ======================================================
   BANDEAU D'ABONNEMENT — MOBILE <1024px
   Deux colonnes : l'icône à gauche, alignée avec le logo de la
   barre du haut, et le texte à droite, sur deux lignes.
   Pas de survol sur mobile : l'action est soulignée en permanence.
====================================================== */

.subscribe-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 450;
  background: var(--redlina-black);
  border-bottom: 0px solid var(--redlina-grayline-1);
  transition: transform 0.4s ease;
}

/* Point de départ de la 1re apparition : caché au-dessus de l'écran */
.subscribe-banner.sb-hidden {
  transform: translateY(-100%);
}

/* 17px à gauche : même marge que le logo dans .mobile-topbar,
   l'icône est donc alignée avec lui */
.subscribe-banner-link {
  display: block;
  padding: 17px 17px;
  font-size: 13px;
  line-height: 20px;
  color: var(--redlina-whitetext-1);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Version desktop masquée sur mobile */
.sb-text-desktop {
  display: none;
}


/* ─── Deux colonnes : icône | texte ────────────────── */

.sb-text-mobile {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Icône d'alerte, centrée verticalement sur les deux lignes */
.sb-icon {
  color: var(--redlina-whitetext-1);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}


/* ─── Deux lignes de texte ─────────────────────────── */

/* min-width: 0 : autorise la coupure du nom par « … » */
.sb-lines {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* 1re ligne : le chiffre, seul élément en gras */
.sb-lines strong {
  font-weight: 600;
}

/* 2e ligne : l'action et le chevron, toujours sur une seule ligne */
.sb-line2 {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* L'action : soulignée en permanence pour signaler le lien.
   Si le nom de l'entreprise est trop long, il est coupé par « … »
   et le chevron reste visible au bout. */
.sb-cta {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-bottom: 2px; /* laisse la place au soulignement */
  text-decoration: underline;
  text-decoration-color: var(--redlina-graytext-1);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Chevron en fin d'action, tourné vers la droite, jamais coupé */
.sb-chevron {
  color: var(--redlina-whitetext-1);
  flex-shrink: 0;
  margin-left: 4px;
  transform: rotate(-90deg);
}


/* ─── Décalage de la page sous le bandeau ──────────── */
/* --banner-h est mesuré par subscribe-banner.js */

html.has-subscribe-banner body {
  padding-top: var(--banner-h, 60px);
}

html.has-subscribe-banner .mobile-topbar {
  top: var(--banner-h, 60px);
}


/* ─── 1re apparition : le contenu descend avec le bandeau ─ */
/* sb-deploying n'est présent que pendant l'animation (0,4 s) */

html.sb-deploying body {
  transition: padding-top 0.4s ease;
}

html.sb-deploying .mobile-topbar {
  transition: top 0.4s ease;
}