/* ============================================================
   Thème « miami » — MIAMI PADEL CLUB (Sfax) — identité visuelle
   Couleurs extraites du logo du club (#2f62a1).
   ============================================================ */
:root {
    --brand-primary: #2f62a1;
    --brand-light: #4a7fc1;
    --brand-accent: #1d4372;
    --brand-btntext: #ffffff;
    --brand-overlay-deep: rgba(12, 32, 58, .74);
    --brand-overlay-mid: rgba(12, 32, 58, .40);
    --brand-overlay-soft: rgba(12, 32, 58, .10);
    --brand-hero-sub: #dbe8f7;

    /* — Jetons teintés bleu Miami : la feuille entière suit — */
    --vd-bg: #eef3fa;
    --vd-card: #fdfeff;
    --vd-line: #d5e0ee;
}

/* — Bannière : photo héros du club + voile bleu nuit à gauche — */
#header {
    background-image:
        radial-gradient(250px 180px at 78% 45%, rgba(255, 255, 255, .18), transparent 72%),
        linear-gradient(110deg, rgba(18, 44, 78, .88) 0%, rgba(18, 44, 78, .55) 38%, rgba(47, 98, 161, .14) 78%),
        url('../../imgs-client/heroes/hero-miami.jpg?v=20261008') !important;
    padding-top: 42px !important;
    padding-bottom: 40px !important;
    border-bottom: 4px solid var(--brand-accent) !important;
    background-size: auto, auto, cover !important;
    background-position: center, center, center 55% !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    position: relative;
}
#header::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -4px; height: 4px;
    background: repeating-linear-gradient(90deg, var(--brand-primary) 0 14px, transparent 14px 26px);
}
#label-client { color: #fff !important; font-size: 21px !important; text-shadow: 0 2px 10px rgba(8, 22, 40, .55) !important; }
#label-service { color: #e6effb !important; font-size: 15.5px !important; text-shadow: 0 1px 8px rgba(8, 22, 40, .55) !important; }

/* — Boutons : pilule sportive — */
.default-button, button, input[type="submit"], input[type="button"] {
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(29, 67, 114, .28) !important;
}
a.cc-free { border-radius: 12px !important; }
#calendar a.cc-free .cc-label { font-weight: 700 !important; }

/* — Calendrier : cartons crème, liseré bleu (identité du club) — */
#calendar .calendar-date-row td { background: #fffdf6 !important; }
#calendar .calendar-cell.cc-free {
    background: linear-gradient(180deg, #3f78bb 0%, #24528d 100%) !important;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(255, 255, 255, .22) !important;
}
#calendar a.cc-free:hover { background: linear-gradient(180deg, #2b5e9e 0%, #1a3f6e 100%) !important; }
#calendar a.calendar-cell.cc-free .cc-label { color: #ffffff !important; opacity: 1 !important; text-shadow: 0 1px 2px rgba(10, 30, 55, .38) !important; }
.panel, .vamos-meteo-card { border-top: 3px solid var(--brand-primary) !important; }

/* — Logo du club dans la bannière — */
#logo { margin-bottom: 0 !important; position: relative; z-index: 5; background-image: url('../../imgs-client/logos/logo-miami.png?v=20261008') !important; }
/* — Respiration sous la bannière — */
#content, #calendar-toolbar { margin-top: 14px !important; }
/* — État « passé » discret — */
#calendar tr.cc-past .cc-label, #calendar .cc-past { opacity: .55; }

/* — Mobile : on garde les joueurs dans le cadre — */
@media screen and (max-width: 640px) {
    #header { background-position: center, center, 78% center !important; }
}