/* ══════════════════════════════════════════════════════════════
   CSF — Mise en avant de l'agence d'Orléans (aperçu)
   « Prochaines sessions » sur l'accueil + bouton fixe sur téléphone.
   Lit la même Google Sheet que la page planning, sans la modifier.
══════════════════════════════════════════════════════════════ */
.next-band { background: var(--csf-navy-2); color: #fff; padding: 3.2rem 1.5rem; }
.next-inner { max-width: 1200px; margin: 0 auto; }
.next-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.6rem; }
.next-head .s-tag { color: var(--csf-lime); }
.next-head h2 { font-family: var(--csf-head); font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.1; margin: .35rem 0 .3rem; color: #fff; }
.next-head p { color: rgba(255, 255, 255, .72); margin: 0; font-size: .95rem; }
.next-live { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: rgba(255, 255, 255, .7); }
.next-live::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--csf-lime); box-shadow: 0 0 0 0 rgba(127, 194, 74, .6); animation: next-blink 2s infinite; }
@keyframes next-blink { 0% { box-shadow: 0 0 0 0 rgba(127, 194, 74, .6); } 70% { box-shadow: 0 0 0 8px rgba(127, 194, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(127, 194, 74, 0); } }
.next-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.next-card { display: flex; flex-direction: column; gap: .45rem; padding: 1.2rem 1.25rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-top: 3px solid var(--csf-lime); border-radius: var(--csf-r); color: #fff; transition: background .25s ease, transform .25s ease; opacity: 0; transform: translateY(14px); }
.next-card.on { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease, background .25s ease; }
.next-card:hover { background: rgba(255, 255, 255, .12); }
.next-date { font-family: var(--csf-head); font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.next-form { font-size: .92rem; color: rgba(255, 255, 255, .85); line-height: 1.4; flex: 1; }
.next-places { align-self: flex-start; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .22rem .6rem; border-radius: 2px; background: rgba(127, 194, 74, .18); color: var(--csf-lime); }
.next-places.low { background: rgba(240, 170, 60, .2); color: #F4B860; }
.next-places.full { background: rgba(230, 90, 90, .2); color: #F08A8A; }
.next-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.next-ctas .btn-green { flex-wrap: wrap; justify-content: center; row-gap: .1rem; }
#nextUntil { flex-basis: 100%; font-size: .78rem; font-weight: 500; opacity: .9; text-align: center; }
#nextUntil:empty { display: none; }
.next-empty { color: rgba(255, 255, 255, .75); }

/* Bouton fixe sur téléphone : planning + appel */
.m-cta { display: none; }
@media (max-width: 768px) {
  .next-list { grid-template-columns: 1fr; }
  .next-card:nth-child(n+4) { display: none; }
  .next-card { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: .9rem; }
  .next-form { flex-basis: 100%; }
  .m-cta { display: flex; position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); right: 92px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 900; gap: .5rem; transform: translateY(150%); transition: transform .35s ease; }
  .m-cta.show { transform: none; }
  .m-cta a { flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .8rem .6rem; border-radius: var(--csf-r); font-weight: 700; font-size: .88rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .22); }
  .m-cta .m-plan { background: var(--csf-green); color: #fff; }
  .m-cta .m-call { background: #fff; color: var(--csf-blue); border: 1.5px solid var(--csf-blue); flex: 0 0 auto; padding-inline: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .next-card, .next-card.on, .m-cta { transition: none; }
  .next-card { opacity: 1; transform: none; }
  .next-live::before { animation: none; }
}