/* ==========================================================================
   Campagne Été 2026
   Bandeau promotionnel, compte à rebours et affichage des prix barrés.
   ========================================================================== */

:root {
  /* Dégradé estival : jaune chaud vers le rose Premium Personnel. */
  --promo-from: #ffc862;
  --promo-to: #ffd2d7;
  --promo-ink: #140f0f;
}

/* --------------------------------------------------------------------------
   Bandeau
   -------------------------------------------------------------------------- */
.promo-bar {
  position: relative;
  z-index: calc(var(--z-header) + 1);
  background: linear-gradient(90deg, var(--promo-from) 0%, var(--promo-to) 100%);
  color: var(--promo-ink);
}

.promo-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 10px 48px 10px 16px;
}

.promo-bar__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
}

.promo-bar__tag {
  padding: 3px 10px;
  border-radius: var(--radius-button);
  background: var(--promo-ink);
  color: #fff;
  font-size: var(--fs-marginal);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.promo-bar__claim {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Compte à rebours
   -------------------------------------------------------------------------- */
.promo-bar__countdown {
  display: flex;
  align-items: center;
  gap: 6px;
}

.promo-unit {
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(20, 15, 15, 0.1);
}
.promo-unit b {
  /* Chiffres tabulaires : la largeur ne saute pas à chaque seconde. */
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1;
}
.promo-unit i {
  font-size: 11px;
  font-style: normal;
  opacity: 0.7;
}

.promo-bar__over {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */
.promo-bar__cta {
  padding: 7px 18px;
  border-radius: var(--radius-button);
  background: var(--promo-ink);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 700;
  white-space: nowrap;
  transition: transform var(--duration-base) var(--ease-productive);
}
@media (prefers-reduced-motion: no-preference) {
  .promo-bar__cta:hover {
    transform: scale(1.04);
  }
}

.promo-bar__close {
  position: absolute;
  top: 50%;
  right: 12px;
  display: flex;
  padding: 6px;
  border: 0;
  background: none;
  color: var(--promo-ink);
  cursor: pointer;
  transform: translateY(-50%);
}
.promo-bar__close svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.promo-bar__close:focus-visible {
  outline: 2px solid var(--promo-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sous 640 px le bandeau s'empile : accroche, compteur, bouton. */
@media (max-width: 639px) {
  .promo-bar__inner {
    flex-direction: column;
    gap: 8px;
    padding: 12px 40px 12px 16px;
    text-align: center;
  }
  .promo-unit {
    padding: 3px 6px;
  }
  .promo-unit b {
    font-size: var(--fs-small);
  }
}

/* --------------------------------------------------------------------------
   Prix promotionnels
   Le prix barré rappelle le tarif habituel à côté du prix de campagne.
   -------------------------------------------------------------------------- */
.prix-avant {
  margin-right: 6px;
  color: var(--text-marginal);
  font-weight: 400;
  text-decoration: line-through;
}

/* Badge « -83 % » et consorts, posé sur une carte d'abonnement. */
.promo-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--promo-from);
  color: var(--promo-ink);
  font-size: var(--fs-marginal);
  font-weight: 700;
  vertical-align: middle;
}

/* ==========================================================================
   Bannière commerciale du hero (accueil)
   Le hero porte la campagne : il doit être lisible d'emblée, sur mobile comme
   sur ordinateur, et pousser vers le bouton d'abonnement.
   ========================================================================== */

/* Pas de voile sombre derrière le texte : sur ce hero la moitié gauche est
   déjà quasi noire, et un panneau assombri se lit comme un défaut de rendu.
   La lisibilité est assurée par l'ombre portée du titre (comme sur la source)
   et, en mobile, par le fondu de l'image vers le fond de page. */

/* --- Sur-titre : emoji + nom de l'offre + badge --------------------------- */
.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--promo-from);
}
.hero__emoji {
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
}

/* Badge « Offre limitée » : pastille pleine, légère pulsation. */
.hero__badge {
  padding: 4px 12px;
  border-radius: var(--radius-button);
  background: var(--promo-from);
  color: var(--promo-ink);
  font-size: var(--fs-marginal);
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__badge {
    animation: promo-pulse 2.4s var(--ease-productive) infinite;
  }
}
@keyframes promo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 98, 0.55); }
  55%      { box-shadow: 0 0 0 10px rgba(255, 200, 98, 0); }
}

/* --- Titre et argument prix ---------------------------------------------- */
.hero--promo .hero__title {
  font-size: clamp(30px, calc(30px + 22 * ((100vw - 320px) / 1120)), 52px);
  line-height: 1.04;
}

.hero--promo .hero__subtitle {
  max-width: 30ch;
  font-size: clamp(17px, calc(17px + 4 * ((100vw - 320px) / 1120)), 21px);
  line-height: 1.4;
}

/* Le prix est l'accroche : il doit se lire avant le reste de la phrase. */
.hero__price {
  display: inline-block;
  margin: 0 2px;
  color: var(--promo-from);
  font-size: 1.55em;
  font-weight: 900;
  letter-spacing: -0.02em;
  vertical-align: -0.06em;
}
.hero__price span {
  font-size: 0.6em;
  font-weight: 700;
}

/* --- Compte à rebours intégré -------------------------------------------- */
.hero__countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}
.hero__countdown-label {
  margin-right: 2px;
  font-size: var(--fs-marginal);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subdued);
}
/* Sur fond sombre, les pastilles du compteur s'inversent. */
.hero__countdown .promo-unit {
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-base);
}
.hero__countdown .promo-unit b {
  font-size: var(--fs-lead);
}
.hero__countdown .promo-unit i {
  opacity: 0.75;
}

/* --- Boutons -------------------------------------------------------------- */
.hero--promo .hero__actions {
  margin: 26px 0 20px;
}
.hero--promo .sp-btn--accent {
  min-height: 54px;
  padding-inline: 36px;
  font-size: var(--fs-lead);
}

.hero--promo .hero__legal {
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Mobile : le message passe devant le visuel, au-dessus de la ligne de
   flottaison. Le bloc texte reste entièrement lisible sans défilement.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero--promo .hero__content {
    /* Première couche : fondu de l'image vers le fond de page, pour que le
       message repose sur une surface unie sans panneau rapporté. */
    padding-top: 50%;
    background-image:
      linear-gradient(
        180deg,
        rgba(18, 18, 18, 0) 0%,
        rgba(18, 18, 18, 0.35) 30%,
        rgba(18, 18, 18, 0.9) 58%,
        var(--bg-base) 72%
      ),
      image-set(
        url("../assets/img/mobile-hero-ltr.webp") type("image/webp"),
        url("../assets/img/mobile-hero-ltr.png") type("image/png")
      ),
      linear-gradient(0deg, rgba(255, 210, 215, 0) 45%, var(--gradient-color) 100%);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 100% 72%, 122% auto, 100% 40%;
    background-position: center top, right -8% top, center -25%;
  }
  .hero--promo .hero__body {
    padding-top: 4px;
  }
  .hero--promo .hero__subtitle {
    max-width: none;
  }
  .hero__countdown {
    gap: 6px;
    margin-top: 18px;
  }
  .hero__countdown-label {
    flex: 1 0 100%;
    margin-bottom: 2px;
  }
  .hero__countdown .promo-unit {
    padding: 5px 8px;
  }
  .hero__countdown .promo-unit b {
    font-size: var(--fs-body);
  }
  .hero--promo .sp-btn--accent {
    min-height: 52px;
    font-size: var(--fs-body);
  }
}