/* Creator Serenity (12/10/2026) : uniquement les composants propres à cette page.
   Tout le reste vient de /web-expansion/assets/we.css + court.css et de /ads-expansion/assets/ads.css, chargées avant :
   on n'y redéfinit aucun composant. Fonds blancs unis, dégradés et grille seulement sur les blocs sombres ou crème. */

/* ---------- La mention « Gratuit » du hero ---------- */
.cs-gratuit { margin: 0 auto 26px; font-size: 1.05rem; font-weight: 600; color: #ddd; }
.cs-gratuit span { display: inline-block; margin-right: 8px; padding: 4px 16px; border-radius: var(--r-sm); background: var(--yellow); color: var(--black); font-size: 1.3rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }

/* ---------- Un bouton centré sous un bloc ---------- */
.cs-appel { margin-top: 44px; text-align: center; }

/* ---------- Les lives : date en pastille jaune, titre ; le prochain live en jaune plein ---------- */
.cs-lives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 980px; margin: 0 auto; list-style: none; }
.cs-live { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--r); background: var(--tint-white); border: 1px solid var(--tint-white-line); transition: opacity .5s ease-out, transform var(--transition); }
.cs-live:hover { transform: translateY(-4px); }
.cs-live p { font-size: .98rem; font-weight: 600; line-height: 1.5; color: #eee; }
.cs-live-date { flex: 0 0 auto; min-width: 92px; padding: 5px 10px; border-radius: var(--r-sm); background: var(--black); border: 1px solid var(--tint-yellow-line); color: var(--yellow); font-size: .8rem; font-weight: 800; text-align: center; }
.cs-live--prochain { background: var(--tint-yellow); border-color: var(--yellow); }
.cs-live--prochain .cs-live-date { background: var(--yellow); color: var(--black); }
.cs-live--prochain .cs-live-date::before { content: "À venir · "; }

/* ==========================================================================
   Paliers
   ========================================================================== */
@media (max-width: 1024px) {
    .cs-lives { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
}

@media (max-width: 640px) {
    .cs-gratuit span { display: table; margin: 0 auto 8px; }
    .cs-live { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; }
}