.is-hidden-4-moment {
  display: none !important;
}


.div-annonce {
  position: relative;
  display: flex;
  overflow: hidden;
  width: 100%;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  border-top-left-radius: var(--new_rad-base);
  border-top-right-radius: var(--new_rad-base);
  border-bottom-left-radius: var(--new_rad-base);
  border-bottom-right-radius: var(--new_rad-base);
  box-shadow: 0 9px 19px -6px var(--blue-03);
  color: var(--white-01);
  font-size: 1em;
  font-weight: 700;
  text-decoration: none;
}

.img-visuel-annonce-a-desktop {
  width: 100%;
}


.img-visuel-annonce-b-desktop {
  width: 100%;
}

.text-roster-item-name {
    font-size: 2.2rem;

}


/* Fix lecteur Calaméo trop large sur mobile */
iframe[src*="calameo.com"] {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* Conteneur parent */
.entry-content iframe {
  max-width: 100% !important;
}

/* Évite le scroll horizontal sur toute la page */
body, .site {
  overflow-x: hidden;
}

/* == CR logo Betclic Élite hero — agrandi == */
img.image-32 { height: 80px; }
@media screen and (max-width: 767px) { img.image-32 { height: 60px; } }
/* == fin CR logo hero == */

/* == CR image hero (slider accueil) — centrée verticalement == */
.item-actu-hero .image-5 { object-position: 50% 50%; }
/* == fin CR image hero == */
/* == CR contenus du nouvel éditeur : codes tiers, boutons, galerie bento == */
.embed-tiers { margin: 2rem 0; }
.embed-tiers iframe,
.embed-tiers video { max-width: 100%; border: 0; }
.embed-tiers > iframe[src*="youtube"],
.embed-tiers > iframe[src*="vimeo"],
.embed-tiers > iframe[src*="dailymotion"] { width: 100%; aspect-ratio: 16 / 9; height: auto; }

.cta-block { margin: 2.4rem 0; text-align: center; }
.cta-block a {
  display: inline-block; background: var(--orange, #E4531B); color: #fff;
  padding: .95rem 2.1rem; border-radius: 40px; font-weight: 700;
  text-decoration: none; letter-spacing: .02em;
}
.cta-block a:hover { filter: brightness(1.08); }

.rich-text-block figure { margin: 2.2rem 0; }
.rich-text-block figure img { width: 100%; height: auto; border-radius: 12px; display: block; }
.rich-text-block figcaption { font-size: .82rem; opacity: .7; text-align: center; margin-top: .7rem; }
.rich-text-block blockquote {
  margin: 2rem 0; padding: .2rem 0 .2rem 1.4rem;
  border-left: 3px solid var(--orange, #E4531B); font-style: italic;
}

.div-gallery.is-bento { margin: 3rem 0; }
.gallery-bento {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px; gap: 10px; grid-auto-flow: dense;
}
.gallery-bento .bento-item { overflow: hidden; border-radius: 10px; }
.gallery-bento .bento-item.is-wide { grid-column: span 2; }
.gallery-bento .bento-item.is-tall { grid-row: span 2; }
.gallery-bento .bento-link,
.gallery-bento .bento-item > a { display: block; width: 100%; height: 100%; }
.gallery-bento img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.gallery-bento .bento-item:hover img { transform: scale(1.04); }
@media screen and (max-width: 991px) {
  .gallery-bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 150px; }
}
@media screen and (max-width: 600px) {
  .gallery-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .gallery-bento .bento-item.is-tall { grid-row: span 1; }
}
/* == fin CR contenus éditeur == */





/* ============================================================
   CR — MENU PRINCIPAL
   Panneau qui glisse depuis le bord gauche : rubriques d'un côté,
   entrées de la rubrique choisie de l'autre. Sobre, sans cadre ni
   pastille : c'est la couleur du texte et un mince repère orange
   qui portent la hiérarchie.
   ============================================================ */

:root {
  /* courbe de tiroir iOS : départ franc, arrivée posée */
  --cr-tiroir: cubic-bezier(.32, .72, 0, 1);
  --cr-sortie: cubic-bezier(.23, 1, .32, 1);
  --cr-encre: #10162c;
  --cr-orange: #e4531b;
}

@media screen and (min-width: 992px) {

  /* ---------- le voile ---------- */
  .w-nav-menu {
    position: fixed !important;
    inset: 62px 0 0 0 !important;
    width: auto !important;
    height: auto !important;
    background-color: rgba(8, 11, 24, .58) !important;
    -webkit-backdrop-filter: saturate(120%) blur(6px);
    backdrop-filter: saturate(120%) blur(6px);
    overflow: hidden;
    animation: crVoile 280ms ease-out both;
  }
  @keyframes crVoile { from { opacity: 0 } to { opacity: 1 } }

  /* ---------- le panneau ---------- */
  .w-nav-menu .div-block-153 {
    width: min(660px, 88vw) !important;
    max-width: none;
    height: calc(100vh - 62px) !important;
    margin: 0 auto 0 0 !important;
    padding: 0 !important;
    background-color: var(--cr-encre) !important;
    border-radius: 0 !important;
    justify-content: flex-start !important;
    box-shadow: 1px 0 0 rgba(255, 255, 255, .06), 40px 0 80px -40px rgba(0, 0, 0, .8);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: crTiroir 420ms var(--cr-tiroir) both;
  }
  @keyframes crTiroir {
    from { transform: translateX(-101%) }
    to   { transform: none }
  }
  .w-nav-menu .div-block-153 > * { flex: none !important; }

  .w-nav-menu .uui-navbar02_menu-right {
    width: 100% !important;
    height: auto !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    /* le thème réservait 64 px entre les blocs, prévus pour la pleine largeur */
    gap: 0 !important;
    padding: 46px 52px 44px !important;
  }

  /* ---------- « Accueil », en surtitre discret ---------- */
  .w-nav-menu .link-home-tab {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: 0 0 34px !important;
    padding: 0 !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(255, 255, 255, .38);
    transition: color 180ms var(--cr-sortie);
  }
  .w-nav-menu .link-home-tab * { text-decoration: none; }

  /* ---------- deux colonnes ---------- */
  .w-nav-menu .div-block-157 {
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 238px minmax(0, 1fr) !important;
    gap: 0 !important;
    align-items: start;
    width: 100%;
    padding: 0 !important;
    text-align: left;
  }

  .cr-rubriques {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-right: 34px;
    border-right: 1px solid rgba(255, 255, 255, .07);
  }

  /* une rubrique : du texte, et rien d'autre au repos */
  .cr-rubrique {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 12px 0 12px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-align: left;
    color: rgba(255, 255, 255, .42);
    transition: color 180ms var(--cr-sortie);
    animation: crMonte 460ms var(--cr-tiroir) both;
  }
  .cr-rubrique span { flex: 1; }
  .cr-rubrique .cr-chev { display: none; }

  /* le repère : un trait fin qui se déplie, pas un bloc de couleur */
  .cr-rubrique::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 0;
    background: var(--cr-orange);
    border-radius: 2px;
    transform: translateY(-50%);
    transition: height 220ms var(--cr-sortie);
  }
  .cr-rubrique.on { color: #fff; }
  .cr-rubrique.on::before { height: 17px; }

  .cr-rubrique:nth-child(1) { animation-delay: 60ms }
  .cr-rubrique:nth-child(2) { animation-delay: 105ms }
  .cr-rubrique:nth-child(3) { animation-delay: 150ms }
  .cr-rubrique:nth-child(4) { animation-delay: 195ms }
  .cr-rubrique:nth-child(5) { animation-delay: 240ms }
  .cr-rubrique:nth-child(6) { animation-delay: 285ms }

  @keyframes crMonte {
    from { opacity: 0; transform: translateY(7px) }
    to   { opacity: 1; transform: none }
  }

  /* ---------- entrées de la rubrique ---------- */
  .cr-sous { position: relative; min-height: 236px; padding-left: 40px; }
  .cr-groupe { display: none; flex-direction: column; gap: 0; }
  .cr-groupe.on { display: flex; }

  .w-nav-menu .cr-groupe .link-block-3 {
    display: block;
    padding: 12px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-align: left;
    transition: transform 220ms var(--cr-sortie);
    animation: crParait 380ms var(--cr-tiroir) both;
  }
  .w-nav-menu .cr-groupe .link-block-3:nth-child(1) { animation-delay: 20ms }
  .w-nav-menu .cr-groupe .link-block-3:nth-child(2) { animation-delay: 50ms }
  .w-nav-menu .cr-groupe .link-block-3:nth-child(3) { animation-delay: 80ms }
  .w-nav-menu .cr-groupe .link-block-3:nth-child(4) { animation-delay: 110ms }
  .w-nav-menu .cr-groupe .link-block-3:nth-child(5) { animation-delay: 140ms }
  .w-nav-menu .cr-groupe .link-block-3:nth-child(6) { animation-delay: 170ms }

  @keyframes crParait {
    from { opacity: 0; transform: translateX(-8px) }
    to   { opacity: 1; transform: none }
  }

  .w-nav-menu .cr-groupe .text_nav-menu {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: none;
    color: rgba(255, 255, 255, .58);
    transition: color 180ms var(--cr-sortie);
  }

  /* ---------- boutons d'action ---------- */
  .w-nav-menu .div-buttons-nav-desktop {
    justify-content: flex-start !important;
    margin-top: 42px !important;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    flex-wrap: wrap;
    gap: 10px;
  }
  .w-nav-menu .link-cta-header,
  .w-nav-menu .link-cta-boutique-copy {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border-radius: 8px;
    font-size: 12px;
    letter-spacing: .09em;
    transition: background-color 200ms var(--cr-sortie),
                border-color 200ms var(--cr-sortie),
                transform 140ms var(--cr-sortie);
  }
  .w-nav-menu .link-cta-header:active,
  .w-nav-menu .link-cta-boutique-copy:active { transform: scale(.975); }

  /* ---------- survol : réservé aux vrais pointeurs ---------- */
  @media (hover: hover) and (pointer: fine) {
    .w-nav-menu .link-home-tab:hover { color: rgba(255, 255, 255, .8); }
    .cr-rubrique:hover { color: rgba(255, 255, 255, .82); }
    .cr-rubrique.on:hover { color: #fff; }
    .w-nav-menu .cr-groupe .link-block-3:hover { transform: translateX(4px); }
    .w-nav-menu .cr-groupe .link-block-3:hover .text_nav-menu { color: #fff; }
    .w-nav-menu .link-cta-header:not(.is-billetterie):hover,
    .w-nav-menu .link-cta-boutique-copy:hover { background-color: rgba(255, 255, 255, .10); }
  }
  .cr-rubrique:active { transform: scale(.99); }
}

@media screen and (min-width: 992px) and (max-width: 1180px) {
  .w-nav-menu .div-block-157 { grid-template-columns: 206px minmax(0, 1fr) !important; }
  .w-nav-menu .uui-navbar02_menu-right { padding: 40px 34px 36px !important; }
  .cr-sous { padding-left: 30px; }
  .cr-rubriques { padding-right: 26px; }
}

/* ---------- bouton d'ouverture / fermeture ---------- */
/* menu ouvert : une croix nue. Le cadre bleu du thème alourdissait la barre
   et entrait en concurrence avec les boutons Boutique / Billetterie. */
.w-nav-button.w--open .menu-icon_component {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.w-nav-button .menu-icon_component {
  transition: background-color 200ms var(--cr-sortie),
              border-color 200ms var(--cr-sortie),
              transform 140ms var(--cr-sortie);
}
.w-nav-button:active .menu-icon_component { transform: scale(.94); }

/* ---------- mouvement réduit : on garde le fondu, pas le déplacement ---------- */
@media (prefers-reduced-motion: reduce) {
  .w-nav-menu,
  .w-nav-menu .div-block-153,
  .cr-rubrique,
  .w-nav-menu .cr-groupe .link-block-3 {
    animation: crVoile 200ms ease-out both !important;
  }
  .w-nav-menu .cr-groupe .link-block-3:hover { transform: none; }
}
/* == fin CR menu principal == */

/* ============================================================
   CR — lieu de la rencontre sur les cartes de match
   Une ligne discrète sous les équipes : on voit d'un coup d'œil
   où se joue le match, sans alourdir la carte.
   ============================================================ */
.div-item-cal_lieu {
  display: flex;
  align-items: center;
  /* le calendrier aligne ses cartes à gauche, l'agenda les centre :
     le lieu suit la mise en page de la carte qui l'accueille */
  justify-content: flex-start;
  gap: 6px;
  margin-top: 10px;
  padding: 0;
  color: rgba(255, 255, 255, .52);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}
.div-item-cal_home-2 .div-item-cal_lieu { justify-content: center; padding: 0 12px; }
.div-item-cal_lieu .ico-lieu { flex: none; opacity: .8; }
.div-item-cal_lieu span { overflow-wrap: anywhere; }

@media screen and (max-width: 767px) {
  .div-item-cal_lieu {
    font-size: 11.5px;
    margin-top: 8px;
    /* sur deux ou trois lignes, le repère se cale sur la première */
    align-items: flex-start;
  }
  .div-item-cal_lieu .ico-lieu { margin-top: 1px; }
}
/* == fin CR lieu de la rencontre == */
