/* =========================================================================
   MovinUP — correctifs custom (hors Webflow)
   Overrides légers et non destructifs. Chargé APRÈS le CSS Webflow.
   Pour répliquer dans Webflow : Project Settings > Custom Code > Head (<style>).
   ========================================================================= */

/* ---- M1 — Accueil mobile : le texte de l'encadré "récréatif" doit rester
   visible même si l'animation Webflow (opacity:0 -> 1 au scroll) ne se
   déclenche pas sur petit écran. ---------------------------------------- */
@media screen and (max-width: 767px) {
  .portfolio-white-text,
  .action-heading-wrapper,
  .buttons-wrapper { opacity: 1 !important; }
}

/* ---- M1 — Cartes "Les bases de notre communauté" (PARTAGE / RESPECT /
   INCLUSION) : sur 2 des 3 cartes, l'image de fond est placée APRÈS le texte
   dans le DOM et peut le recouvrir. On remet le texte au-dessus et on laisse
   la carte s'adapter à la hauteur de son contenu pour éviter toute coupe. -- */
@media screen and (max-width: 767px) {
  .about-us-card { min-height: auto; }
  .about-description,
  .about-card-top { position: relative; z-index: 2; }
}

/* ---- Footer "À VENIR" (ex "Dates d'inscriptions") : Semaine Level UP +
   Auditions. Empilés verticalement pour que les titres tiennent sur UNE
   seule ligne en desktop. Encadré extérieur retiré, titre centré. ------- */
.footer-sessions {
  border: none;
  background-color: #0000;
  padding: 0;
}

.footer-sessions .title-inscription {
  font-family: "Permanent Marker", sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  text-align: center;
  margin: 0 0 16px;
}

.avenir-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.avenir-card {
  text-align: left;
  border: 1px solid rgba(255, 255, 255, .22);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.avenir-kicker {
  color: #d9534f;
  font: 700 10.5px/1.2 Montserrat, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* titre + date sur la même rangée : gagne une ligne de hauteur */
.avenir-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.avenir-title {
  font-family: "Permanent Marker", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
  color: var(--white);
  margin: 0;
  white-space: nowrap;
}

.avenir-date {
  color: #ff8a86;
  font: 600 12.5px/1.3 Montserrat, sans-serif;
}

.avenir-desc {
  color: #d0d0d4;
  font: 400 12.5px/1.5 Montserrat, sans-serif;
  margin: 0;
}

.avenir-cta {
  align-self: flex-start;
  margin-top: 2px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #d9534f;
  color: #fff;
  text-decoration: none;
  font: 700 11.5px/1 Montserrat, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .3s ease, transform .3s ease;
}

.avenir-cta:hover {
  background: #c2403c;
  transform: translateY(-2px);
}

/* très petits écrans : on laisse le titre rétrécir plutôt que déborder */
@media screen and (max-width: 479px) {
  .avenir-title { font-size: 20px; }
}