/* ======================================================
   BANDEAU D'ABONNEMENT — DESKTOP ≥1024px
====================================================== */

.subscribe-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 450;
  background: var(--redlina-background-1);
  border-bottom:1px 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%);
}

.subscribe-banner-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* À gauche : 30px + la largeur de la navbar fermée (60px).
     Le texte est ainsi centré sur la zone de contenu, comme les cartes. */
  padding: 12px 30px 12px 90px;
  font-size: 13px;
  line-height: 20px;
  color: var(--redlina-black);
  text-decoration: none;
  transition: padding-left 0.25s ease;
}

/* Navbar ouverte (180px) : le texte suit le contenu, mêmes règles que
   .app-content dans navbar.css */
body.navbar-open .subscribe-banner-link {
  padding-left: 210px;
}

/* État initial sans flash, navbar ouverte au chargement */
html.navbar-is-open .subscribe-banner-link {
  padding-left: 210px;
  transition: none;
}

/* Le chiffre : seul élément en gras, c'est l'accroche */
.subscribe-banner-link strong {
  font-weight: 600;
}

/* Icône d'alerte au début du texte */
.sb-icon {
  color: var(--redlina-black);
  min-width: 14px;
  margin-right: 14px;
  vertical-align: -2px;
}

/* Point médian entre les deux parties.
   Une espace suit déjà le point : la marge de droite est donc plus petite
   que celle de gauche, pour un espacement visuellement égal des deux côtés. */
.sb-sep {
  margin-left: 8px;
  margin-right: 4px;
}

/* L'action : soulignée en permanence, discrètement, pour signaler le lien */
.sb-cta {
  text-decoration: underline;
  text-decoration-color: var(--redlina-graytext-1);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

/* Au survol : le soulignement fonce */
.subscribe-banner-link:hover .sb-cta {
  text-decoration-color: var(--redlina-black);
}

/* Le prix : dans l'action, souligné avec elle, en gris */
.sb-price {
  color: var(--redlina-graytext-2);
  white-space: nowrap;
}

/* Chevron en fin d'action : même SVG que le bouton des cartes floutées,
   tourné vers la droite. Avance légèrement au survol. */
.sb-chevron {
  color: var(--redlina-black);
  margin-left: 4px;
  vertical-align: -3px;
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}

.subscribe-banner-link:hover .sb-chevron {
  transform: translateX(3px) rotate(-90deg);
}

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


/* ─── 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, 44px);
}

html.has-subscribe-banner .navbar {
  top: var(--banner-h, 44px);
  height: calc(100vh - var(--banner-h, 44px));
}

html.has-subscribe-banner .logo {
  top: calc(22px + var(--banner-h, 44px));
}


/* ─── 1re apparition : le contenu descend avec le bandeau ─ */
/* sb-deploying n'est présent que pendant l'animation (0,4 s).
   Les transitions existantes de la navbar et du logo sont conservées. */

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

html.sb-deploying .navbar {
  transition: width 0.25s ease, top 0.4s ease, height 0.4s ease;
}

html.sb-deploying .logo {
  transition: left 0.25s ease, top 0.4s ease;
}