/*
  Bannière « à la une » — rendue par `site/snippets/banner.php`.
  Barre pleine largeur, fond contrasté, bouton d'appel à l'action.
  Ce fichier est inclus depuis `site/snippets/header.php`.
  `assets/css/index.css` n'est jamais modifié : tout est confiné ici.
*/

/*
  `100vw` inclut la largeur de la barre de défilement sur les systèmes à
  scrollbars classiques (Windows) : sans cela, la bannière pleine largeur
  provoquerait un léger défilement horizontal. `clip` n'introduit pas de
  conteneur de défilement, `position: sticky` continue donc de fonctionner.
*/
html {
  overflow-x: clip;
}

.banner {
  /* Surchargées en ligne par le snippet (champ `banner_bg`, champ `banner_image`) */
  --banner-bg: #000;
  --banner-fg: #fff;

  box-sizing: border-box;
  /*
    Pleine largeur du viewport, quel que soit le conteneur parent
    (body en 70rem centré, ou `.topbar` avec ses marges négatives).
  */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background-color: var(--banner-bg);
  color: var(--banner-fg);
}

/* Image de fond + voile sombre, pour garder le texte blanc lisible */
.banner--has-image {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    var(--banner-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Toute la barre est cliquable */
.banner__link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.banner__inner {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  /*
    Seul le fond va bord à bord : le contenu reste aligné sur la grille du site.
    70rem = max-width du body, 1.5rem = son padding horizontal (--padding).
  */
  max-width: calc(70rem + 2 * var(--padding, 1.5rem));
  margin: 0 auto;
  padding: 1rem var(--padding, 1.5rem);
}

.banner__text {
  font-weight: 600;
  line-height: 1.3;
}

/* Le CTA n'est pas un lien imbriqué : c'est l'affordance visuelle du lien parent */
.banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.5rem 1.1rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.banner__arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

/* Survol / focus : inversion des couleurs + la flèche glisse vers la droite */
.banner__link:hover .banner__cta,
.banner__link:focus-visible .banner__cta {
  background-color: var(--banner-fg);
  color: var(--banner-bg);
}

.banner__link:hover .banner__arrow,
.banner__link:focus-visible .banner__arrow {
  transform: translateX(0.3rem);
}

/*
  Avec une image de fond, `--banner-bg` peut être clair alors que le voile est
  sombre : on force un contraste franc au survol.
*/
.banner--has-image .banner__link:hover .banner__cta,
.banner--has-image .banner__link:focus-visible .banner__cta {
  background-color: #fff;
  color: #000;
}

.banner__link:focus-visible {
  outline: 3px solid var(--banner-fg);
  outline-offset: -3px;
}

.banner--has-image .banner__link:focus-visible {
  outline-color: #fff;
}

/* --- Mode collant : la bannière et l'en-tête collent ENSEMBLE --- */

/*
  `.topbar` est ajouté par `header.php` uniquement quand `banner_sticky` est actif.
  Il enveloppe `.banner` et `.header`. C'est LUI qui est collant : plus besoin de
  mesurer la hauteur de la bannière en JavaScript, et aucun chevauchement possible.
*/
.topbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20; /* au-dessus de `.header` (z-index 1) et du contenu */
  background-color: var(--color-white);
  /* Mêmes marges négatives que `.header` dans index.css, reprises ici */
  margin-right: -1rem;
  margin-left: -1rem;
  /* Annule le padding haut du body pour que la barre parte du bord du viewport */
  margin-top: calc(var(--padding, 1.5rem) * -1);
}

/* Dans le conteneur collant, l'en-tête n'a plus à coller ni à se décaler lui-même */
.topbar .header {
  position: static;
  margin-right: 0;
  margin-left: 0;
}

@media (max-width: 40rem) {
  .banner__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 0.9rem 1.5rem;
  }

  .banner__cta {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner__cta,
  .banner__arrow {
    transition: none;
  }
}