/* ==========================================================================
   Talia — Bandeau promo
   --------------------------------------------------------------------------
   SEUL fichier de style du bandeau. Markup : parts/promo-banner.php
   Rendu et injection : inc/blocks/promo-banner.php

   Le bandeau vit au-dessus du header. Sur les landings à hero plein écran il
   reste dans le flux en position sticky, tandis que le header passe en fixed :
   sa hauteur est mesurée en JS et publiée dans --hero-promo-height, que le hero
   consomme pour se caler dessous (cf. landing-hero-header.js).
   ========================================================================== */

body.landing-minimal-header-hero #page > .talia-promo-banner {
  position: sticky;
  top: 0;
  z-index: 10002;
}

body.admin-bar.landing-minimal-header-hero #page > .talia-promo-banner {
  top: 32px;
}

.talia-promo-banner {
  background: var(--promo-bg, #0f172a);
  color: var(--promo-color, #ffffff);
  position: relative;
  /* Pleine largeur, que le bandeau soit injecté au-dessus du header (enfant
     direct de #page) ou posé dans le contenu (enfant de la colonne de texte) :
     dans le premier cas le calcul vaut 0, dans le second il annule la colonne.
     `body` porte déjà overflow-x: hidden, pas de débordement horizontal. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Au-dessus du header sticky (10000) si chevauchement ; zone cliquable pleine largeur */
  z-index: 10002;
  isolation: isolate;
}

.talia-promo-banner__link {
  /* flex + 100% : inline-flex ne couvrait que la largeur du texte (clics sur le fond noir inactifs) */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}

.talia-promo-banner .container {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
}

.talia-promo-banner__link:hover,
.talia-promo-banner__link:focus-visible {
  opacity: 0.92;
}

.talia-promo-banner__icon {
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  align-self: center;
}

.talia-promo-banner__icon-image {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  align-self: center;
  flex-shrink: 0;
}

.talia-promo-banner__text {
  display: inline;
  white-space: normal;
  line-height: 1.2;
}

.talia-promo-banner__text mark {
  background-color: transparent !important;
  padding: 0 !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar.landing-minimal-header-hero #page > .talia-promo-banner {
      top: 46px;
    }
}


@media (max-width: 767.98px) {
    .talia-promo-banner .container {
      display: flex;
      justify-content: center;
      /*
        Marge latérale explicite. Le `.container` du thème n'en pose aucune ici,
        et le bandeau est en pleine largeur d'écran : sans elle, l'icône et le
        texte collaient au bord — la pièce se retrouvait à moitié sous l'arrondi
        de l'écran, constaté en QA sur iPhone SE.
      */
      padding-left: 14px;
      padding-right: 14px;
    }

    .talia-promo-banner__link {
      width: 100%;
      max-width: 100%;
      justify-content: flex-start;
      align-items: center;
      text-align: left;
      /*
        Le bandeau est une mention, pas un titre. En 15px capitales grasses
        espacées de 0,08em, il pesait autant que le hero derrière lui et
        débordait sur trois lignes en 320px. On redescend la taille et on
        resserre l'interlettrage : les capitales n'ont pas besoin d'autant
        d'air pour rester lisibles à cette échelle.
      */
      font-size: 0.75rem;
      letter-spacing: 0.04em;
      line-height: 1.35;
      gap: 10px;
    }
}

/* Le bandeau est un lien de surface, pas un lien de texte : ni couleur de lien,
   ni soulignement, y compris après visite. L'exclusion correspondante est posée
   dans gutenberg-blocks.css (règle « APPROCHE NUCLEAIRE »). */
.talia-promo-banner .talia-promo-banner__link,
.talia-promo-banner .talia-promo-banner__link:visited,
.talia-promo-banner .talia-promo-banner__link:hover,
.talia-promo-banner .talia-promo-banner__link:focus {
  color: var(--promo-color, #ffffff);
  text-decoration: none;
}

.talia-promo-banner .talia-promo-banner__link:hover {
  opacity: 0.9;
}