@media (max-width: 767px) {
  #site-wrapper .zone-banner .mod-banner__wrapper .mod-banner__img {
    height: 240px;
  }
}

@media (min-width: 768px) {
  .row-fluid.row {
    display: flex;
    align-items: stretch;
  }

  .zone-article {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 315px; /* match height of 16:9 video (560px wide = 315px tall) */
  }
}

/* Marge autour du pied de page */
#site-wrapper .line-footer {
    padding-bottom: 20px;/* À ajuster*/
    padding-top: 20px;/* À ajuster*/
}

/* Enlever le filtre noir par dessus la bannière */
.mod-banner__wrapper .mod-banner__img::before {
  content: none !important;
  background: none !important;
  opacity: 1 !important;
}
<!-- TOP FLOATING BANNER — SBH 2026 | Official Colors + FR/EN -->
<div id="sbh-top-banner" class="sbh-banner" role="region" aria-label="Conference announcement">
  <div class="sbh-banner__inner">
    <div class="sbh-banner__content">
      <p class="sbh-banner__kicker"
         data-fr="31e Conférence internationale"
         data-en="31st International Conference">
        31e Conférence internationale
      </p>

      <p class="sbh-banner__title"
         data-fr="Une vie d'expériences : de la préconception au vieillissement"
         data-en="A lifetime of experiences: from preconception to aging">
        Une vie d'expériences : de la préconception au vieillissement
      </p>

      <p class="sbh-banner__sub"
         data-fr="15–17 octobre 2026 • Montréal"
         data-en="Oct 15–17, 2026 • Montreal">
        15–17 octobre 2026 • Montréal
      </p>
    </div>

    <div class="sbh-banner__actions">
      <a class="sbh-btn sbh-btn--primary"
         href="https://spina-bifida-hydrocephalie-quebec.s1.yapla.com/fr/event-65166"
         target="_blank" rel="noopener"
         data-fr="S’inscrire"
         data-en="Register">
        S’inscrire
      </a>

      <button class="sbh-banner__close" aria-label="Close">✕</button>
    </div>
  </div>
</div>

<style>
  /* ===== COULEURS OFFICIELLES ===== */
  :root{
    --sbh-blue: #007aa3;     /* bleu principal */
    --sbh-blue-soft: #789199;/* bleu-gris */
    --sbh-bg: #0f2a33;       /* fond sombre dérivé */
    --sbh-text: #ffffff;
    --sbh-muted: rgba(255,255,255,.85);
    --sbh-border: rgba(255,255,255,.18);
  }

  /* évite que la bannière cache le contenu */
  body { padding-top: 86px; }

  #sbh-top-banner{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    background: linear-gradient(
      90deg,
      var(--sbh-bg),
      rgba(0,122,163,.92)
    );
    color: var(--sbh-text);
    border-bottom: 4px solid var(--sbh-blue-soft);
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
  }

  #sbh-top-banner.is-hidden{
    display:none;
  }

  .sbh-banner__inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }

  .sbh-banner__content{ min-width:0; }

  .sbh-banner__kicker{
    margin:0 0 2px 0;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color: var(--sbh-muted);
  }

  .sbh-banner__title{
    margin:0;
    font-size:15px;
    line-height:1.25;
    font-weight:700;
    text-decoration: underline;
    text-decoration-color: var(--sbh-blue-soft);
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
  }

  .sbh-banner__sub{
    margin:3px 0 0 0;
    font-size:13px;
    line-height:1.25;
    color: var(--sbh-muted);
  }

  .sbh-banner__actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
  }

  .sbh-btn{
    height:38px;
    padding:0 16px;
    border-radius:10px;
    background: var(--sbh-blue);
    color:#fff;
    text-decoration:none;
    font-weight:700;
    font-size:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  }

  .sbh-btn:hover{
    filter: brightness(1.05);
  }

  .sbh-banner__close{
    width:38px;
    height:38px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.08);
    color:#fff;
    cursor:pointer;
    font-size:16px;
  }

  .sbh-banner__close:hover{
    background: rgba(255,255,255,.15);
  }

  @media(max-width:820px){
    body{ padding-top:118px; }
    .sbh-banner__inner{
      flex-direction:column;
      align-items:flex-start;
    }
    .sbh-banner__actions{
      width:100%;
    }
    .sbh-btn{
      width:100%;
    }
  }
</style>

<script>
(function(){
  const banner = document.getElementById("sbh-top-banner");
  if(!banner) return;

  // cache pendant 7 jours après fermeture
  const key = "sbhTopBannerDismissedUntil";
  const until = Number(localStorage.getItem(key) || "0");
  if(Date.now() < until){
    banner.classList.add("is-hidden");
    document.body.style.paddingTop = "0";
    return;
  }

  // FR / EN automatique selon l’URL Yapla
  const isEN = /\/en\//i.test(location.pathname);
  const lang = isEN ? "en" : "fr";

  banner.querySelectorAll("[data-fr][data-en]").forEach(el=>{
    el.textContent = el.getAttribute(lang === "en" ? "data-en" : "data-fr");
  });

  // lien inscription FR / EN
  const btn = banner.querySelector(".sbh-btn");
  if(btn){
    btn.href = isEN
      ? "https://spina-bifida-hydrocephalie-quebec.s1.yapla.com/en/event-65166"
      : "https://spina-bifida-hydrocephalie-quebec.s1.yapla.com/fr/event-65166";
  }

  banner.querySelector(".sbh-banner__close")
    .addEventListener("click", ()=>{
      banner.classList.add("is-hidden");
      document.body.style.paddingTop = "0";
      const sevenDays = 7 * 24 * 60 * 60 * 1000;
      localStorage.setItem(key, String(Date.now() + sevenDays));
    });
})();
</script>