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;
}

/* Saisie du code de connexion : gros caractères espacés, chiffres à chasse fixe. On lit un code à
   6 chiffres en le comparant à l'email — l'œil doit pouvoir faire l'aller-retour sans se perdre. */
.msc-code {
    font-size: 1.5rem;
    letter-spacing: .35em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

    .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 resserré (12→9) : avec la disponibilité et le coach désormais sur une seule ligne de
       légende, la carte n'a plus besoin de la respiration qu'exigeaient trois lignes empilées. */
    padding: 9px 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* Disponibilité puis coach, EMPILÉS : côte à côte, le nom du coach démarrait à un x différent selon
   la longueur du texte de disponibilité (« Complet » vs « Plus que 2 places »). Sur sa propre ligne,
   il est aligné sur toutes les cartes sans qu'on ait à figer la largeur de la pastille. */
.msc-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin-top: 3px;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.msc-card-coach { display: inline-flex; align-items: center; gap: 3px; }

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

/* Zone d'action de la carte de planning (Réserver / Liste d'attente / badge d'état).
   Bloc à part et non-rétractable : les libellés n'ont pas la même longueur d'une séance à l'autre
   (« Réserver » vs « Liste d'attente »), donc sans zone dédiée la carte d'une séance complète se
   décalait par rapport à ses voisines. Elle ne se COMPRIME pas — elle passe à la ligne. */
/* Zone d'action compacte, calée à droite : elle s'ajuste à son libellé au lieu d'occuper une colonne
   fixe. Une colonne large rendait chaque ligne massive alors que l'action tient en un mot. */
.msc-card-action {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
}

/* PAS de bascule pleine largeur sous 600 px : l'action reste dans sa colonne de droite à TOUTES les
   tailles. La version qui la faisait passer sous la carte rendait chaque séance deux fois plus haute
   et cassait la colonne qu'on balaie du regard. C'est le nom du cours qui se tronque si la place
   manque (min-width:0 sur le bloc central), pas le bouton qui déménage.
   Le libellé est court exprès (« Attente », pas « Liste d'attente ») pour que ça tienne. */

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

/* Heure de fin, sous l'heure de début : discrète (poids et taille réduits) pour que la colonne
   reste lisible d'un coup d'œil — c'est l'heure de DÉBUT qu'on scanne dans un planning. */
.msc-time small {
    display: block;
    margin-top: 2px;
    font-weight: 500;
    font-size: .74rem;
    opacity: .6;
}

/* ---- Carte de séance, espace coach ------------------------------------------------------
   Toute la carte est le lien (le chevron n'est qu'une affordance) : sur mobile, un bouton
   « Gérer » dupliquait cette cible de clic pour ~90 px, au prix du nom du cours. */
.msc-coachcard {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    transition: background .12s ease;
}

    .msc-coachcard:hover { background: var(--mud-palette-action-default-hover); }

/* Nom du cours ET puces sur la MÊME ligne tant que ça rentre : même sur un écran étroit (S20 ≈ 380 px
   utiles) il reste ~100 px libres après « Cross Training 12/12 +1 », donc empiler les deux gaspillait
   une ligne entière par carte. flex-wrap fait retomber les puces dessous seulement si c'est nécessaire
   (nom de cours long), au lieu de l'imposer à tout le monde. */
.msc-coachcard-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 8px;
}

    /* min-width:0 + flex:1 → c'est le NOM qui se tronque, jamais les puces qui débordent. */
    .msc-coachcard-main > .mud-typography { flex: 1 1 auto; min-width: 0; }

.msc-coachcard-chips { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

/* Variante compacte de la colonne horaire (la carte coach est plus dense que le planning public) */
.msc-time-sm { min-width: 46px; font-size: .95rem; }

/* ---- Ligne de liste admin (séance à venir, cours récurrent) ------------------------------
   Deux blocs seulement : l'identité (extensible, tronquable) et les commandes (largeur fixe).
   L'ancienne version alignait 6-7 éléments dans un seul flex-wrap : la ligne se réenroulait
   différemment selon la longueur du nom de coach ou du cours, et débordait sous ~1000 px. */
.msc-rowline {
    display: flex;
    align-items: center;
    gap: 12px;
}

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

/* min-width:0 est indispensable : sans lui un enfant flex refuse de passer sous sa largeur de
   contenu, donc le bloc pousse les commandes hors de la carte au lieu de tronquer. */
.msc-rowline-main {
    flex: 1 1 auto;
    min-width: 0;
}

    .msc-rowline-main > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Ligne d'inscrit (feuille de séance) ---------------------------------------------- */
.msc-roster-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid transparent; /* réservé, pour que les lignes ne se décalent pas */
    border-radius: 8px;
}

    /* Seule l'attente est marquée, et franchement : à 6 % d'opacité le fond se devinait à peine au
       milieu de 12 lignes blanches. Liseré épaissi + fond à 16 % → la ligne se repère sans lire. */
    .msc-roster-row--wait {
        border-color: rgba(232, 145, 42, .45);
        border-left-color: var(--mud-palette-warning);
        border-left-width: 5px;
        background: rgba(232, 145, 42, .16);
    }

/* Plage horaire d'une ligne admin : largeur fixe pour que les noms de cours s'alignent en colonne
   d'une ligne à l'autre (« 09:00 → 10:00 » et « 11:15 → 12:15 » n'ont pas la même largeur de glyphes). */
.msc-rowline-time {
    flex: 0 0 auto;
    width: 104px;
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.msc-rowline-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* Largeur FIXE : sinon le bouton suit la longueur du nom et chaque ligne s'aligne différemment.
   nowrap + 140px : à 118px, « David R. » repassait à la ligne dans le bouton (icône sifflet + chevron
   mangent la place) et faisait grandir toute la rangée d'un cran. */
.msc-coachmenu, .msc-coachmenu .mud-button-root { width: 140px; }

    .msc-coachmenu .mud-button-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 600px) {
    /* Mobile : SEULES les commandes passent à la ligne. C'est `width:100%` sur les actions qui
       provoque le retour à la ligne — pas une base calculée sur l'identité.
       L'ancienne règle (`flex-basis: calc(100% - 22px)` sur l'identité) oubliait le gap de 12px en
       plus des 24px de l'icône : le bloc ne tenait donc plus à côté d'elle et partait lui aussi à la
       ligne, ce qui donnait 3 rangées (logo seul / nom / actions) au lieu de 2. */
    .msc-rowline { flex-wrap: wrap; row-gap: 8px; }
    .msc-rowline-main { flex: 1 1 120px; }
    /* margin-left:auto et NON width:100% : on laisse flex-wrap décider. Forcer la pleine largeur
       envoyait les actions à la ligne même quand elles tenaient (2 icônes sur /admin/cours), ce qui
       gaspillait une rangée et laissait un grand vide à gauche. Là, elles ne descendent que si elles
       ne rentrent vraiment pas, et restent calées à droite dans les deux cas. */
    .msc-rowline-actions { margin-left: auto; }
}

/* 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) */
/* Pas de largeur fixe ici : le nom du coach est sur SA propre ligne (cf. .msc-card-meta), donc il
   commence de toute façon au même x sur toutes les cartes. Figer la pastille ne servirait qu'à
   l'élargir inutilement. */
.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; }
/* Cas nominal : même pastille, en neutre. Il lui FAUT un fond, sinon le cas courant redevient du
   texte nu au milieu de pastilles colorées — c'est ce mélange qui rendait la liste brouillonne. */
.msc-avail-ok { background: rgba(0, 0, 0, .05); color: var(--mud-palette-text-secondary); }

/* 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. */
/* Pastille compacte, sans ombre : ça doit se lire comme un ÉTAT, pas comme un bouton (l'annulation
   se fait dans Mon espace). Hauteur alignée sur un MudButton Small pour que la colonne reste droite,
   mais largeur libre — un badge pleine largeur rendait la ligne aussi lourde qu'un gros bouton. */
.msc-bk-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 30px;
    padding: 0 12px;
    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; }

    /* La description vient d'un textarea admin où le coach écrit en paragraphes ("Pour qui ?" sur sa
       propre ligne). Sans pre-line, HTML écrase ces retours et tout se colle en un pavé. */
    .msc-course-body p { white-space: pre-line; }

/* 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;
}