h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Une erreur est survenue."
    }

/* Champs des formulaires natifs (auth) */
.msc-label {
    display: block;
    font-size: .8rem;
    font-weight: 500;
    margin: .75rem 0 .25rem;
    color: rgba(0, 0, 0, .6);
}

.msc-input {
    width: 100%;
    padding: .65rem .75rem;
    font-size: 1rem;
    border: 1px solid rgba(0, 0, 0, .23);
    border-radius: 6px;
    box-sizing: border-box;
    background: #fff;
}

    .msc-input:focus {
        outline: none;
        border-color: #17191F;
        box-shadow: 0 0 0 2px rgba(249, 67, 79, .25);
    }

/* Troncature « … » sur une ligne. À utiliser À LA PLACE de `text-truncate`, qui est une classe BOOTSTRAP :
   MudBlazor ne la fournit pas, elle était donc sans effet partout où le projet l'utilisait (d'où les emails
   longs qui débordaient). min-width:0 est indispensable quand l'élément est un enfant flex : sans lui, un
   mot insécable (une adresse email) impose sa largeur intrinsèque au lieu de se laisser rétrécir. */
.msc-truncate {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Piège à robots (honeypot) du formulaire d'inscription : un vrai champ texte, invisible pour l'humain.
   PAS de type="hidden" — les robots connaissent l'astuce et laissent ces champs vides. On le sort de
   l'écran plutôt que display:none, que certains robots savent aussi détecter. Complété côté HTML par
   tabindex="-1" (non atteignable au clavier), aria-hidden (ignoré des lecteurs d'écran) et
   autocomplete="off" (empêche un gestionnaire de mots de passe de le remplir → faux positif). */
.msc-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Champ mot de passe avec bouton « Afficher / Masquer » (formulaires d'auth SSR) */
.msc-pw-field { position: relative; }
.msc-pw-field .msc-input { padding-right: 5.5rem; }

.msc-pw-eye {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: .25rem .4rem;
    font-size: .8rem;
    font-weight: 600;
    color: #F9434F;
    cursor: pointer;
}

    .msc-pw-eye:hover { text-decoration: underline; }

/* Logo & marque dans l'appbar */
.msc-logo {
    height: 26px;
    width: auto;
    margin-right: 10px;
    object-fit: contain;
}

.msc-brand {
    white-space: nowrap;
}

/* Footer */
.msc-footer {
    border-top: 1px solid rgba(0, 0, 0, .08);
    margin-top: 2rem;
    color: rgba(0, 0, 0, .6);
}

.msc-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    max-width: 960px;
    margin: 0 auto;
    font-size: .85rem;
}

.gap-4 { gap: 1rem; }

/* ---- Look "app mobile" ---- */

/* Barre de navigation basse : visible uniquement sur petits écrans */
.msc-bottomnav {
    display: none;
}

.msc-bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    font-size: .7rem;
    font-weight: 500;
    text-decoration: none;
    color: rgba(0, 0, 0, .55);
    transition: color .15s ease;
}

    .msc-bn-item.active {
        color: var(--mud-palette-primary);
    }

/* Carte de séance (planning) */
.msc-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--mud-palette-surface);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.msc-accent {
    width: 5px;
    align-self: stretch;
    border-radius: 6px;
    flex: 0 0 auto;
}

.msc-time {
    min-width: 52px;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.1;
}

/* Grande tuile (abonnement / statut) */
.msc-stat {
    background: linear-gradient(135deg, #17191F, #23262E);
    color: #fff;
    border-radius: 18px;
    padding: 20px 24px;
}

    .msc-stat .msc-stat-value {
        font-size: 2.4rem;
        font-weight: 800;
        line-height: 1;
        margin-top: 4px;
    }

.msc-stat-head { display: flex; align-items: center; gap: 6px; }

.msc-stat-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-top: 16px;
}

.msc-stat-item { display: flex; flex-direction: column; gap: 3px; }
.msc-stat-k { font-size: .62rem; text-transform: uppercase; letter-spacing: .6px; opacity: .7; }
.msc-stat-v { font-size: 1.05rem; font-weight: 700; line-height: 1; }

/* Bandeau abonnement COMPACT (mon espace) : label+valeur à gauche, expiration à droite */
.msc-abo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    /* Carte claire à accent variable selon la formule (thème light). Le gold prend le relais pour l'Illimité. */
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid rgba(0, 0, 0, .08);
    border-left: 4px solid var(--abo, #F9434F);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    border-radius: 16px;
    padding: 14px 18px;
}

/* Un accent + un fond teinté par formule → on distingue Régulier de Pack d'un coup d'œil. */
.msc-abo-weekly { --abo: #F9434F; background: linear-gradient(135deg, #fef3f4, #fbdae0); }
.msc-abo-pack { --abo: #1E9E5C; background: linear-gradient(135deg, #f0fbf5, #d3f0e0); }
.msc-abo-gold { background: linear-gradient(135deg, #7a5c12, #b8901f 55%, #d4af37); color: #fff; border: none; }
.msc-abo-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msc-abo-label { font-size: .6rem; text-transform: uppercase; letter-spacing: .6px; opacity: .78; }
.msc-abo-value { font-size: 1.5rem; font-weight: 800; line-height: 1; display: inline-flex; align-items: baseline; gap: 7px; }
.msc-abo-num { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.msc-abo-unit { font-size: .98rem; font-weight: 700; opacity: .85; }
/* Bloc droit : méta (expire le…) + grande icône de formule à l'extrême droite */
.msc-abo-right { display: flex; align-items: center; gap: 18px; }
.msc-abo-ic.mud-icon-root { font-size: 2.6rem; color: var(--abo, #F9434F); opacity: .9; }
.msc-abo-gold .msc-abo-ic.mud-icon-root { color: #fff; }
.msc-abo-meta { display: flex; gap: 22px; flex-wrap: wrap; }
.msc-abo-item { display: flex; flex-direction: column; gap: 3px; }
.msc-abo-k { font-size: .58rem; text-transform: uppercase; letter-spacing: .5px; opacity: .72; }
.msc-abo-v { font-size: 1rem; font-weight: 700; line-height: 1; }

/* En-tête de jour (planning) : plus visible, avec barre colorée */
.msc-day-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 8px;
    font-size: .9rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--mud-palette-text-secondary);
}

    .msc-day-head::before {
        content: "";
        width: 3px;
        height: 1em;
        border-radius: 3px;
        background: var(--mud-palette-primary);
    }

/* Pastilles de disponibilité (planning) */
.msc-avail {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
}

.msc-avail-full { background: #FDECEA; color: #C62828; }
.msc-avail-soon { background: #FFF4E5; color: #E67700; }

/* Badge d'ÉTAT de réservation (planning) : pastel plat, sans ombre → clairement PAS un bouton
   (les boutons d'action sont pleins/élevés). Non cliquable : l'annulation se fait dans Mon espace. */
.msc-bk-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 auto;
    cursor: default;
}

    .msc-bk-status .mud-icon-root { font-size: 1rem; }
    .msc-bk-status--ok { background: rgba(46, 158, 91, .13); color: #2E9E5B; }
    .msc-bk-status--wait { background: rgba(232, 145, 42, .16); color: #B96E12; }

/* Héro accueil */
/* Héro = titre "ouvert" (pas de carte), avec petit accent rouge : se distingue nettement
   des tuiles blanches en dessous (les seules "boîtes" de la page, donc clairement cliquables). */
.msc-hero {
    background: transparent;
    color: #17191F;
    padding: 2px 2px 6px;
}

    .msc-hero::before {
        content: "";
        display: block;
        width: 42px;
        height: 4px;
        border-radius: 2px;
        background: #F9434F;
        margin-bottom: 14px;
    }

.msc-hero-compact { padding: 2px 2px 6px; }

/* Tuile statut variante "gold" (abonnement Illimité mis en valeur) */
.msc-stat-gold {
    background: linear-gradient(135deg, #7a5c12, #b8901f 55%, #d4af37);
    color: #fff;
}

/* ---- Cartes d'offres (abonnement / coaching, mockup) ---- */
.msc-offers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.msc-offer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--mud-palette-surface);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

    .msc-offer h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
    .msc-offer .msc-price { font-size: 1.7rem; font-weight: 800; color: #17191F; line-height: 1; }
    .msc-offer .msc-price small { font-size: .8rem; font-weight: 600; color: rgba(0,0,0,.5); }
    .msc-offer .msc-dur { font-size: .8rem; color: rgba(0,0,0,.55); }

/* Offre mise en valeur "gold" (Illimité) */
.msc-offer-gold {
    border: 1.5px solid #d4af37;
    background: linear-gradient(180deg, #fffdf4, #ffffff);
    box-shadow: 0 3px 14px rgba(212, 175, 55, .22);
}

    .msc-offer-gold .msc-price { color: #a97f14; }

    .msc-offer-badge {
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: linear-gradient(135deg, #d4af37, #b8901f);
        color: #fff;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .4px;
        text-transform: uppercase;
        padding: 3px 9px;
        border-radius: 999px;
    }

/* Offre "le + populaire" (Carnet 10) — accent rouge de marque */
.msc-offer-pop {
    border: 1.5px solid #F9434F;
    box-shadow: 0 3px 14px rgba(249, 67, 79, .20);
}

    .msc-offer-badge-pop {
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: linear-gradient(135deg, #F9434F, #d3222f);
        color: #fff;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .4px;
        text-transform: uppercase;
        padding: 3px 9px;
        border-radius: 999px;
    }

/* ---- Grille calendrier coaching (mockup) ---- */
.msc-cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.msc-cal {
    display: grid;
    grid-template-columns: 52px repeat(7, minmax(88px, 1fr));
    gap: 6px;
    min-width: 680px;
}

.msc-cal-head {
    position: sticky;
    top: 0;
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.1;
    padding: 6px 2px;
    text-transform: capitalize;
    color: var(--mud-palette-text-primary);
}

.msc-cal-hour {
    font-size: .72rem;
    font-weight: 600;
    color: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 4px;
}

.msc-slot {
    border: 1px dashed rgba(0, 0, 0, .12);
    border-radius: 8px;
    min-height: 34px;
    font-size: .72rem;
    color: rgba(0, 0, 0, .25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.msc-slot-free {
    border: none;
    background: rgba(46, 160, 90, .14);
    color: #1c7c46;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s ease, transform .05s ease;
}

    .msc-slot-free:hover { background: rgba(46, 160, 90, .26); }
    .msc-slot-free:active { transform: scale(.96); }

/* ---- Filtres de cours (planning) : mini-chips ---- */
.msc-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.msc-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .16);
    background: var(--mud-palette-surface);
    color: rgba(0, 0, 0, .62);
    cursor: pointer;
    line-height: 1.5;
    transition: background .12s ease, border-color .12s ease;
}

    .msc-filter.on { font-weight: 700; }
    .msc-filter-clear { color: rgba(0, 0, 0, .5); }

.msc-filter-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* ---- Barre "séances restantes" (packs coaching) ---- */
.msc-packbar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #F9434F, #17191F);
    color: #fff;
    border-radius: 16px;
    padding: 14px 18px;
}

    .msc-packbar .mud-icon-root { font-size: 1.9rem; }

.msc-packbar-value { font-size: 1.2rem; font-weight: 800; line-height: 1.15; }
.msc-packbar-sub { font-size: .78rem; opacity: .9; }

/* ---- Tuiles côte à côte (mon espace) ---- */
.msc-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.msc-stat-alt { background: linear-gradient(135deg, #F9434F, #17191F) !important; }

/* ---- Cartes de navigation (accueil) ---- */
.msc-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.msc-nav-card {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    background: var(--mud-palette-surface);
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .07);
    transition: transform .1s ease, box-shadow .15s ease;
}

    .msc-nav-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .13); }
    .msc-nav-card > .mud-icon-root:first-child {
        color: var(--c, #3F4652);
        font-size: 1.6rem;
        flex: 0 0 auto;
        background: rgba(63, 70, 82, .09);
        border-radius: 12px;
        padding: 9px;
        box-sizing: content-box; /* le padding s'ajoute AUTOUR de l'icône (sinon elle rétrécit) */
    }
    .msc-nav-card h3 { margin: 0; font-size: 1rem; font-weight: 700; }
    .msc-nav-card p { margin: 2px 0 0; font-size: .8rem; color: rgba(0, 0, 0, .55); }
    .msc-nav-card .msc-nav-chev { margin-left: auto; color: rgba(0, 0, 0, .4); }

/* Tuile d'accès rapide mise en avant (planning) : carte claire, contour rouge accent */
.msc-nav-card-primary {
    border: 1.5px solid #F9434F;
    background: linear-gradient(135deg, rgba(249, 67, 79, .07), rgba(249, 67, 79, .02));
    box-shadow: 0 3px 14px rgba(249, 67, 79, .16);
}

    .msc-nav-card-primary > .mud-icon-root:first-child { color: #F9434F; background: rgba(249, 67, 79, .11); }
    .msc-nav-card-primary .msc-nav-chev { color: #F9434F; }

/* ---- Carte « séance à venir » (Mon espace) : 2 lignes, robuste sur mobile étroit (S23) ---- */
.msc-bk {
    display: flex;
    background: var(--mud-palette-surface);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.msc-bk-accent { width: 5px; flex: 0 0 auto; }
.msc-bk-body { flex: 1; min-width: 0; padding: 11px 13px; display: flex; flex-direction: column; gap: 9px; }
.msc-bk-top { display: flex; align-items: flex-start; gap: 10px; }
.msc-bk-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.msc-bk-course { font-weight: 600; line-height: 1.25; }
.msc-bk-when { font-size: .78rem; color: var(--mud-palette-text-secondary); white-space: nowrap; text-transform: capitalize; }
.msc-bk-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* ---- Piliers (accueil) : cours collectifs vs coaching ---- */
.msc-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.msc-pillar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--mud-palette-surface);
    border: 1px solid rgba(0, 0, 0, .08);
    border-top: 5px solid var(--c, #17191F);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: transform .08s ease, box-shadow .12s ease;
}

    .msc-pillar:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .10); }

.msc-pillar-head { display: flex; align-items: center; gap: 14px; }

.msc-pillar-ic {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

    .msc-pillar-ic .mud-icon-root { color: #fff; font-size: 1.7rem; }

.msc-pillar-head h3 { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.15; }
.msc-pillar-tag { font-size: .75rem; font-weight: 600; color: var(--c, #17191F); }
.msc-pillar p { margin: 0; font-size: .88rem; color: rgba(0, 0, 0, .6); line-height: 1.45; flex: 1 1 auto; }

.msc-pillar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.msc-pillar-card-link { text-decoration: none; color: inherit; }
.msc-pillar-cta { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--c, #17191F); }
.msc-pillar-cta .mud-icon-root { font-size: 1.1rem; }

/* ---- Landing neutre (accueil vitrine) : hero SOBRE, clair et compact ---- */
.msc-land-hero {
    background: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
    color: #17191F;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    padding: 24px 22px 22px;
    text-align: center;
}
.msc-land-logo { height: 40px; width: auto; margin-bottom: 10px; }

/* Étiquette de pilier (Mon espace, quand le membre a les deux univers) */
.msc-pillar-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
    color: var(--pc, #17191F); margin-bottom: 6px;
}
    .msc-pillar-label .mud-icon-root { font-size: 1rem; }

/* Vidéo responsive 16:9 (iframe YouTube no-cookie) */
.msc-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .16);
    background: #000;
}
    .msc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.msc-land-hero h1 { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -.4px; line-height: 1.15; }
.msc-land-hero p { margin: 8px auto 0; max-width: 560px; font-size: .94rem; line-height: 1.5; color: rgba(0, 0, 0, .6); }
/* Ligne de réassurance adressée aux débutants (sous les CTA du hero) */
.msc-land-reassure { margin: 16px auto 0; max-width: 520px; font-size: .9rem; font-style: italic; color: var(--mud-palette-primary); font-weight: 600; }

/* Épuration (passe 2) : ombres de cartes plus douces (moins « posé/lourd »). */
.mud-elevation-1 { box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important; }
.mud-elevation-2 { box-shadow: 0 1px 3px rgba(0, 0, 0, .06) !important; }

/* Bloc coach */
.msc-coach {
    display: flex;
    gap: 22px;
    align-items: center;
    background: var(--mud-palette-surface);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.msc-coach-photo { width: 150px; height: 150px; object-fit: cover; border-radius: 14px; flex: 0 0 auto; }
/* Variante « photo coach en grand » (accueil) */
.msc-coach-lg { gap: 26px; padding: 24px; }
    .msc-coach-lg .msc-coach-photo { width: 230px; height: 260px; }
/* Variante paysage (photo EMS large) */
.msc-coach-photo-wide { width: 320px; height: 230px; }
.msc-coach-body { min-width: 0; }
.msc-coach-kicker { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #0E8A8A; }
.msc-coach-body h2 { margin: 2px 0 8px; font-size: 1.4rem; font-weight: 800; line-height: 1.15; }
.msc-coach-body p { margin: 0 0 14px; color: rgba(0, 0, 0, .62); line-height: 1.5; font-size: .92rem; }

@media (max-width: 600px) {
    .msc-land-hero { padding: 26px 18px 24px; }
    .msc-land-hero h1 { font-size: 1.3rem; }
    .msc-coach { flex-direction: column; align-items: flex-start; }
    .msc-coach-photo, .msc-coach-lg .msc-coach-photo { width: 100%; height: 220px; }
}

/* Toggle de pilier sur l'accueil : pilule sombre centrée qui se détache de la page claire */
.msc-switch {
    display: flex;
    gap: 4px;
    width: fit-content;
    margin-inline: auto;
    background: #EEEEF0;
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 999px;
    padding: 4px;
}
.msc-switch-seg {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .88rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}
    .msc-switch-seg .mud-icon-root { font-size: 1.1rem; }
.msc-switch-on { background: var(--seg, #fff); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.msc-switch-link { color: #6A6A72; cursor: pointer; transition: color .12s ease; }
    .msc-switch-link:hover { color: #17191F; }

/* Variante compacte (accueil) : une ligne, sans sous-titre ni description */
.msc-pillars-compact .msc-pillar {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top-width: 1px;
    border-left: 4px solid var(--c, #17191F);
}
    .msc-pillars-compact .msc-pillar h3 { font-size: 1rem; font-weight: 700; margin: 0; flex: 1 1 auto; min-width: 0; }
    .msc-pillars-compact .msc-pillar-ic { width: 40px; height: 40px; border-radius: 11px; }
    .msc-pillars-compact .msc-pillar-ic .mud-icon-root { font-size: 1.3rem; }
.msc-soon-inline { position: static; top: auto; right: auto; }

/* Pilier « à venir » (coaching individuel) : grisé + badge « Bientôt », non cliquable */
.msc-pillar-off { position: relative; opacity: .7; filter: grayscale(.55); cursor: default; }
    .msc-pillar-off:hover { transform: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.msc-soon-badge {
    position: absolute; top: 14px; right: 14px;
    font-size: .6rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    background: #DDDDE1; color: #6C6C74; border-radius: 8px; padding: 3px 8px;
}

/* Sélecteur de pilier dans l'en-tête : Cours collectifs (rouge) ↔ Cours privés (teal). Les deux sont cliquables ;
   le segment actif prend la couleur de son pilier (via --seg). */
.msc-track { display: inline-flex; align-items: center; gap: 2px; background: #EFEFF1; border-radius: 999px; padding: 3px; margin-left: 16px; }
.msc-track-seg { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; font-size: .82rem; font-weight: 700; white-space: nowrap; line-height: 1; text-decoration: none; color: #6A6A72; cursor: pointer; transition: color .12s ease; }
    .msc-track-seg .mud-icon-root { font-size: 1.05rem; }
    .msc-track-seg:hover { color: #17191F; }
.msc-track-on, .msc-track-on:hover { background: var(--seg, #17191F); color: #fff; }
@media (max-width: 960px) { .msc-track { display: none; } }

/* Fine barre de repérage du pilier, calée au bas de l'app bar (rouge collectif / teal privé). */
.msc-pillarbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }

/* ---- Page présentation des cours ---- */
.msc-hero-cours { background: transparent; }

/* Hero des cours privés : accent teal (au lieu du rouge de marque) */
.msc-hero-prive { background: transparent; }
    .msc-hero-prive::before { background: #0E8A8A; }

/* Rythme hebdo (encart /collectif) : une colonne par jour, créneaux empilés */
.msc-week {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.msc-week-day {
    background: var(--mud-palette-surface);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.msc-week-dname { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .4px; color: #17191F; margin-bottom: 8px; }
.msc-week-slots { display: flex; flex-direction: column; gap: 6px; }
.msc-week-slot {
    display: block;
    font-size: .82rem;
    line-height: 1.25;
    padding: 4px 8px;
    border-left: 3px solid #999;
    background: rgba(0, 0, 0, .025);
    border-radius: 0 6px 6px 0;
}
    .msc-week-slot b { font-weight: 700; margin-right: 4px; }

/* Bloc tarifs intégré dans une carte /prive : « carte de 10 séances » + prix par séance mis en avant */
.msc-priv-rates { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.msc-priv-rate {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 0; border-top: 1px solid rgba(0, 0, 0, .07);
}
    .msc-priv-rate:first-child { border-top: none; }
.msc-priv-rate-fmt { line-height: 1.3; }
    .msc-priv-rate-fmt b { display: block; font-weight: 700; font-size: .92rem; }
.msc-priv-rate-pack { font-size: .74rem; color: rgba(0, 0, 0, .55); }
    .msc-priv-rate-pack strong { color: rgba(0, 0, 0, .75); }
.msc-priv-rate-prices { text-align: right; line-height: 1.25; }
    .msc-priv-rate-prices b { font-size: 1.05rem; font-weight: 800; }
.msc-priv-rate-per { display: block; font-size: .82rem; font-weight: 700; color: rgba(0, 0, 0, .7); }
.msc-priv-rate-unit { display: block; font-size: .74rem; color: rgba(0, 0, 0, .5); }

/* Pastille « Bientôt » (page à venir) */
.msc-soon-pill {
    display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    background: #E1F3F1; color: #0E8A8A; border-radius: 999px; padding: 4px 12px;
}

/* Page réservation privée (Bientôt) : carte centrée + étapes */
.msc-resa {
    max-width: 560px; margin-inline: auto; text-align: center;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 20px;
    padding: 32px 28px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
}
.msc-resa-icon {
    width: 66px; height: 66px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #0E8A8A, #14a3a3); border-radius: 18px;
}
    .msc-resa-icon .mud-icon-root { color: #fff; font-size: 2rem; }
.msc-resa h2 { margin: 12px 0 6px; font-size: 1.4rem; font-weight: 800; }
.msc-resa > p { margin: 0 auto; max-width: 440px; color: rgba(0, 0, 0, .6); line-height: 1.5; font-size: .92rem; }
.msc-resa-steps { display: flex; flex-direction: column; gap: 10px; text-align: left; margin: 22px 0; }
.msc-resa-step {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px;
}
.msc-resa-step b { display: block; font-size: .92rem; }
.msc-resa-step small { color: rgba(0, 0, 0, .55); font-size: .8rem; }
.msc-resa-num {
    width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #E1F3F1; color: #0E8A8A; font-weight: 800; font-size: .95rem;
}
    .msc-resa-num .mud-icon-root { font-size: 1.05rem; }
.msc-resa-step-soon { border-style: dashed; border-color: #9ed3d0; background: #f5fbfb; }

/* CTA d'achat centré (même rendu desktop / mobile) */
.msc-buycta { display: flex; flex-direction: column; align-items: center; text-align: center; }
.msc-buycta-btn { min-width: 260px; }
@media (max-width: 480px) { .msc-buycta-btn { width: 100%; } }

/* Ancre décalée pour ne pas passer sous l'app bar fixe (ex. lien /collectif#formules) */
#formules { scroll-margin-top: 84px; }

.msc-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-auto-rows: 1fr; /* toutes les cartes à la même hauteur -> boutons "Réserver" alignés en bas partout */
    gap: 16px;
}

.msc-course-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--mud-palette-surface);
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: transform .08s ease, box-shadow .12s ease;
}

    .msc-course-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .10); }

.msc-course-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    flex: 1 1 auto;
}

    .msc-course-body h3 { margin: 0; font-size: 1.1rem; font-weight: 800; }

/* Le contenu du haut grandit et pousse le bouton "Réserver" en bas (alignement fiable, tous écrans) */
.msc-course-top { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.msc-course-btn { margin-top: auto; }

/* Encart "géré par le coach" (réutilisé sur /collectif et /mon-espace) */
.msc-coach-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, rgba(23, 25, 31, .05), rgba(249, 67, 79, .05));
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    padding: 14px 16px;
}

    .msc-coach-note .mud-icon-root { color: #F9434F; flex: 0 0 auto; }
    .msc-coach-note p { margin: 0; font-size: .85rem; color: var(--mud-palette-text-secondary); line-height: 1.45; }

/* Encart "première fois" (offre séance découverte) : accent rouge, façon appel à l'action */
.msc-firsttime {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(249, 67, 79, .09), rgba(249, 67, 79, .02));
    border: 1px solid rgba(249, 67, 79, .25);
    border-left: 4px solid #F9434F;
    border-radius: 14px;
    padding: 14px 16px;
}

    .msc-firsttime .mud-icon-root { color: #F9434F; flex: 0 0 auto; }
    .msc-firsttime p { margin: 0; font-size: .9rem; color: var(--mud-palette-text-primary); line-height: 1.45; }

/* ---- Page Contact ---- */
.msc-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.msc-avatar {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #17191F, #23262E);
    color: #fff;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: 1px;
    object-fit: cover;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}

    /* Variante « logo » : marque blanche centrée sur le disque foncé (contain + marge). */
    .msc-avatar--logo img { width: 62%; height: 62%; object-fit: contain; }

.msc-profile-name { font-size: 1.2rem; font-weight: 800; line-height: 1.1; }
.msc-profile-role { font-size: .85rem; color: var(--mud-palette-text-secondary); }

.msc-contact {
    background: var(--mud-palette-surface);
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    overflow: hidden;
}

.msc-contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 14px;
    color: inherit;
    text-decoration: none;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

    .msc-contact-row:first-child { border-top: none; }
    .msc-contact-link { transition: background .12s ease; }
    .msc-contact-link:hover { background: rgba(0, 0, 0, .03); }

.msc-contact-ic {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(63, 70, 82, .09);
}

    .msc-contact-ic .mud-icon-root { color: #3F4652; font-size: 1.15rem; }

.msc-contact-v { font-size: .9rem; font-weight: 600; word-break: break-word; min-width: 0; }
.msc-contact-chev { margin-left: auto; color: rgba(0, 0, 0, .3); flex: 0 0 auto; }

.msc-map {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .08);
    line-height: 0;
}

    .msc-map iframe { width: 100%; height: 180px; border: 0; display: block; }

.msc-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

.msc-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #f3f3f5, #e9e9ec);
    border: 1px dashed rgba(0, 0, 0, .18);
    border-radius: 16px;
    color: var(--mud-palette-text-secondary);
}

    .msc-photo .mud-icon-root { font-size: 2rem; opacity: .5; }
    .msc-photo span { font-size: .9rem; font-weight: 600; }
    .msc-photo small { font-size: .72rem; opacity: .7; }

/* Vraies photos de la salle : même grille, recadrées en 4/3, coins arrondis. Cliquables → agrandissement. */
.msc-photo-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; display: block; cursor: zoom-in; }

/* Lightbox : image en grand sur fond sombre, clic n'importe où pour fermer. */
.msc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, .85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: zoom-out;
}

    .msc-lightbox img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 8px;
        box-shadow: 0 6px 30px rgba(0, 0, 0, .5);
    }

/* ===== Annonces / notifications (bandeau plein largeur, en haut de /home) ===== */
.msc-annonce-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 6px 11px 12px;
    background: var(--acc);
    color: #fff;
    border-radius: 10px;
}

    .msc-annonce-bar + .msc-annonce-bar { margin-top: 8px; }
    .msc-annonce-bar .mud-icon-root { color: #fff; flex: 0 0 auto; }
    .msc-annonce-bar .msc-bar-txt { flex: 1 1 auto; min-width: 0; font-size: .85rem; }
    .msc-annonce-bar .msc-bar-txt b { font-weight: 800; }
    .msc-annonce-bar .msc-bar-x { color: rgba(255, 255, 255, .9); flex: 0 0 auto; }

/* Couleurs sémantiques : erreur / attention / succès / info. alerte = alias erreur. */
.msc-annonce--alerte, .msc-annonce--error { --acc: #F9434F; }
.msc-annonce--warning { --acc: #E8912A; }
.msc-annonce--success { --acc: #2E9E5B; }
.msc-annonce--info { --acc: #2D6CDF; }

/* ===== Tuiles KPI (tableau de bord admin) — nom dédié (évite la collision avec l'ancien .msc-stat sombre) ===== */
.msc-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.msc-kpi-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .msc-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .msc-kpi-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.msc-kpi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

    .msc-kpi-ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(63, 70, 82, .1); }
    .msc-kpi-ic .mud-icon-root { font-size: 1.3rem; color: #3F4652; }

/* Tuiles statistiques compactes (tableau de bord) */
.msc-mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 560px) { .msc-mini-grid { grid-template-columns: 1fr; } }

.msc-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid rgba(0, 0, 0, .06);
    border-left: 4px solid var(--msc-mini-accent, #3F4652);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}

    .msc-mini-ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
    .msc-mini-ic .mud-icon-root { font-size: 1.15rem; }
    .msc-mini-num { font-size: 1.5rem; font-weight: 800; line-height: 1; }
    .msc-mini-label { font-size: .78rem; font-weight: 700; }
    .msc-mini-sub { font-size: .72rem; color: var(--mud-palette-text-secondary); margin-top: 2px; line-height: 1.25; }

.msc-course-title { display: flex; align-items: center; gap: 10px; }

.msc-course-ic {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

    .msc-course-ic .mud-icon-root { color: #fff; font-size: 1.2rem; }
    .msc-course-body p { margin: 0; font-size: .85rem; color: rgba(0, 0, 0, .6); line-height: 1.4; }

.msc-course-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.msc-tag {
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid;
}

.msc-course-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--mud-palette-surface);
    border: 1px dashed rgba(0, 0, 0, .15);
    border-radius: 18px;
    padding: 20px 24px;
}

@media (max-width: 959px) {
    .msc-bottomnav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1300;
        background: var(--mud-palette-surface);
        border-top: 1px solid rgba(0, 0, 0, .08);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Laisser la place à la barre basse */
    .msc-content { padding-bottom: 84px !important; }
    .msc-footer { margin-bottom: 72px; }
}

@media (min-width: 960px) {
    .msc-hide-desktop { display: none !important; }
}

/* Sur mobile : on masque le texte de marque (garde juste le "M") pour ne pas chevaucher « Connexion » */
@media (max-width: 600px) {
    .msc-brand { display: none; }
}

/* Très petits écrans : densité resserrée, cibles tactiles conservées */
@media (max-width: 400px) {
    .msc-content { padding-left: 10px !important; padding-right: 10px !important; }
    .msc-card { gap: 8px; padding: 10px 11px; }
    .msc-time { min-width: 46px; font-size: 1rem; }
    .msc-stat { padding: 16px 18px; }
    .msc-stat .msc-stat-value { font-size: 2rem; }
    .msc-hero { padding: 28px 18px; }
    .msc-hero-compact { padding: 2px 2px 4px; }
    .msc-offers { grid-template-columns: 1fr; }
    .msc-bn-item span { font-size: .64rem; }
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}