:root {
  /* ----- Bannière ----- */
  --avlw-banner-bg: #D15E3F;   /* fond de la bannière */
  --avlw-banner-fg: #fff;      /* couleur de base (titre/texte) */

  /* Texte (contenu HTML saisi) */
  --avlw-text-color: var(--avlw-banner-fg);
  --avlw-text-link-color: #ffe666;      /* liens DANS le texte */
  --avlw-text-link-hover-color: #fff08a;

  /* ----- CTA ----- */
  --avlw-cta-bg: #3f3f3f;
  --avlw-cta-fg: #fff;                /* texte */
  --avlw-cta-bg-hover: #000;
  --avlw-cta-fg-hover: #CCC;          /* texte survol */

  /* ----- Croix (dismiss) ----- */
  --avlw-dismiss-color: var(--avlw-banner-fg);
  --avlw-dismiss-hover-bg: none;

  /* Accessibilité */
  --avlw-focus-outline-color: #ffffff;
  
    /* ...Puces... */
  --avlw-dot-size: 10px;   /* diamètre du rond plein */
  --avlw-dot-ring: 2px;    /* épaisseur de l’anneau */
  
}

/* ===== Structure ===== */
.avlw-top-banner {
  position: relative;
  width: 100%;
  display: block;
  background: var(--avlw-banner-bg);
  color: var(--avlw-banner-fg);
  overflow: visible;
}
.avlw-top-banner__outer { width:100%; position:relative; z-index:10; }

.avlw-top-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
  position: relative;
  z-index: 12;
}

/* Ligne: texte + CTA côte à côte (wrap mobile) */
.avlw-top-banner__row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== Texte ===== */
.avlw-top-banner__text {
  color: var(--avlw-text-color);
  font-size: 16px;
  line-height: 1.6;
  font-weight: bold;
}

/* Liens DANS le texte (quand pas de lien global) */
.avlw-top-banner__text a {
  color: var(--avlw-text-link-color);
  text-decoration: underline;
}
.avlw-top-banner__text a:hover,
.avlw-top-banner__text a:focus {
  color: var(--avlw-text-link-hover-color);
}

/* ===== Image ===== */
.avlw-top-banner__img {
  max-width: 100%;
  height: auto;
  max-height: 150px;
  display: block;
  margin: 0 auto;
}

/* ===== Lien global (bloc cliquable quand CTA OFF) ===== */
.avlw-top-banner__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 11;
}
.avlw-top-banner__link *,
.avlw-top-banner__link a {
  text-decoration: none !important;
  color: var(--avlw-text-color) !important;
}
.avlw-top-banner__link:focus-visible {
  outline: 2px solid var(--avlw-focus-outline-color);
  outline-offset: -2px;
}

/* ===== CTA ===== */
.avlw-top-banner__cta {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 6px;
  background: var(--avlw-cta-bg);
  color: var(--avlw-cta-fg);
  text-decoration: none;
  font-weight: 600;
  transition: background .15s ease, color .15s ease, transform .05s ease;
}
.avlw-top-banner__cta:hover,
.avlw-top-banner__cta:focus {
  background: var(--avlw-cta-bg-hover);
  color: var(--avlw-cta-fg-hover);
}
.avlw-top-banner__cta:active { transform: translateY(1px); }
.avlw-top-banner__cta:focus-visible {
  outline: 2px solid var(--avlw-focus-outline-color);
  outline-offset: 2px;
}

/* ===== Croix (dismiss) ===== */
.avlw-dismiss {
  position: absolute;
  right: 8px;
  top: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  text-decoration: none;
  color: var(--avlw-dismiss-color) !important;
  background: transparent;
  border: 0;
  z-index: 999999;
  pointer-events: auto;
  appearance: none;
}
.avlw-dismiss:hover { background: var(--avlw-dismiss-hover-bg)!important; border:0 !important; }
.avlw-dismiss:focus-visible { outline: 2px solid var(--avlw-focus-outline-color); }
.avlw-dismiss svg { width: 18px; height: 18px; display: block; }

/* ===== Slider (multi-bannières) ===== */
.avlw-slider { position: relative; }
.avlw-slides { position: relative; width: 100%; overflow: visible; }
.avlw-slide { display: none; width: 100%; }
.avlw-slide.is-active { display: block; }

/* Animations : pendant la transition on affiche 2 slides en absolu */
.avlw-slides.is-anim .avlw-slide{
  display:block !important;
  position:absolute; inset:0;
  will-change: transform, opacity;
}

/* ===== Dots (navigation) — version blindée contre les thèmes ===== */
.avlw-slider__dots{
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
  padding:8px 0 12px;
  font-size:0;   /* évite l’héritage ligne/espaces */
  line-height:0;
}

/* reset ciblé (beaucoup de thèmes stylent <button>) */
.avlw-top-banner .avlw-slider__dots .avlw-dot{
  position:relative;
  display:inline-block;
  width: calc(var(--avlw-dot-size) + 2*var(--avlw-dot-ring));
  height: calc(var(--avlw-dot-size) + 2*var(--avlw-dot-ring));
  padding:0 !important;
  margin:0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-indent: -9999px;   /* pousse le chiffre hors écran */
  white-space: nowrap;
  overflow: hidden;
}

/* le rond est dessiné dans ::before, donc même si le bouton est carré, on s'en fiche */
.avlw-top-banner .avlw-slider__dots .avlw-dot::before{
  content:"";
  display:block;
  width: var(--avlw-dot-size);
  height: var(--avlw-dot-size);
  margin: 0 auto;
  border-radius: 50% !important;          /* <-- force le cercle */
  box-sizing: content-box;                /* anneau propre */
  border: var(--avlw-dot-ring) solid rgba(255,255,255,.85);
  background: transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}

/* état actif / hover */
.avlw-top-banner .avlw-slider__dots .avlw-dot:hover::before{ transform: scale(1.1); }
.avlw-top-banner .avlw-slider__dots .avlw-dot.is-active::before{
  background: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.95);
}

/* accessibilité focus */
.avlw-top-banner .avlw-slider__dots .avlw-dot:focus-visible{
  outline: 2px solid var(--avlw-focus-outline-color);
  outline-offset: 2px;
}


/* ===== Flèches : overlay aligné sur la ligne de texte, icône seule ===== */
.avlw-slider__controls{
  position: absolute;
  inset: 0;
  pointer-events: none; /* clics désactivés sauf sur boutons */
}
.avlw-slider__controls .avlw-top-banner__inner{
  display: block;
  height: 100%;
  pointer-events: none;
}

/* reset puissant + icône seule */
button.avlw-slider__arrow,
.avlw-slider__arrow{
  appearance:none; -webkit-appearance:none;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 28px; height: 28px;
  display:inline-flex; align-items:center; justify-content:center;
  line-height: 1;
  cursor: pointer;
  color: var(--avlw-banner-fg) !important;
  position: absolute !important;
  top: 50%; transform: translateY(-50%); /* valeur par défaut, le JS recale */
  pointer-events: auto; /* clics actifs */
}
.avlw-slider__arrow::before,
.avlw-slider__arrow::after{ content: none !important; }
.avlw-slider__arrow:hover{ opacity:.9; }
.avlw-slider__arrow:active{ transform: translateY(-50%); }
.avlw-slider__arrow:focus-visible{ outline:2px solid var(--avlw-focus-outline-color); }
.avlw-slider__arrow svg{ width:20px; height:20px; display:block; }
.avlw-slider__arrow--prev{ left: 12px; }
.avlw-slider__arrow--next{ right: 12px; }

/* ===== Helpers ===== */
.avlw-top-banner__cta.is-outline {
  background: transparent;
  color: var(--avlw-cta-fg);
  border: 2px solid var(--avlw-cta-fg);
}
.avlw-top-banner__cta.is-outline:hover,
.avlw-top-banner__cta.is-outline:focus {
  background: var(--avlw-cta-bg-hover);
  color: var(--avlw-cta-fg-hover);
  border-color: var(--avlw-cta-fg-hover);
}