/* /Pages/CreerGroupe.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   CreerGroupe — Responsive mobile (≤ 640 px)
   Bootstrap gère déjà le passage col-md-6 → pleine largeur à 768 px.
   Ce fichier gère : espacement, PWA bottom-nav, confort tactile.
═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

    /* ── Réduction de la marge haute des containers ── */
    :deep(.container.mt-5)[b-z6hca0icjg] {
        margin-top: 1rem !important;
    }

    /* ── Ajout de l'espace pour la bottom-nav PWA ── */
    :deep(.container)[b-z6hca0icjg] {
        padding-bottom: 80px;
    }

    /* ──────────────────────────────────────────────
       ÉCRAN 1 — Choix (Créer / Rejoindre)
    ────────────────────────────────────────────── */

    /* Icône display-4 trop grande sur mobile */
    :deep(.display-4)[b-z6hca0icjg] {
        font-size: 2.2rem !important;
    }

    /* Les cards de choix : un peu moins de padding */
    :deep(.card-body.p-4)[b-z6hca0icjg] {
        padding: 1rem !important;
    }

    /* Espacer les deux cards quand elles s'empilent */
    :deep(.row.g-3 > [class*="col-"]:not(:first-child))[b-z6hca0icjg] {
        margin-top: 0.5rem;
    }

    /* ──────────────────────────────────────────────
       ÉCRAN 2 — Sélection du plan
    ────────────────────────────────────────────── */

    /* Prix des plans : légère réduction */
    :deep([style*="font-size:1.6rem"])[b-z6hca0icjg] {
        font-size: 1.35rem !important;
    }

    /* Liste des avantages : plus compacte */
    :deep(.list-unstyled.text-start.small)[b-z6hca0icjg] {
        font-size: .8rem !important;
    }

    /* Badge "Paiement unique / Renouvellement mensuel" */
    :deep(.badge.px-3.py-2)[b-z6hca0icjg] {
        font-size: .72rem !important;
        padding: 6px 10px !important;
    }

    /* ──────────────────────────────────────────────
       ÉCRAN 3 — Formulaire de création
    ────────────────────────────────────────────── */

    /* En-tête de carte : flex → colonne sur mobile */
    :deep(.card-header .d-flex.justify-content-between)[b-z6hca0icjg] {
        flex-direction: column !important;
        gap: 8px;
    }

    /* Badge plan dans l'en-tête : pleine largeur, centré */
    :deep(.card-header .badge)[b-z6hca0icjg] {
        align-self: flex-start;
        font-size: .73rem !important;
        white-space: normal;
        text-align: center;
    }

    /* Corps de la carte formulaire */
    :deep(.card-body)[b-z6hca0icjg] {
        padding: 1rem !important;
    }

    /* Boîte de calcul du montant Quota */
    :deep([style*="background:#eff6ff"])[b-z6hca0icjg] {
        padding: 10px !important;
    }

    :deep([style*="font-size:1.2rem;font-weight:800"])[b-z6hca0icjg] {
        font-size: 1rem !important;
    }

    /* Bannière abonnement récapitulative */
    :deep([style*="background:#f0fdf4"])[b-z6hca0icjg] {
        padding: 10px !important;
    }

    /* Align-end inutile sur mobile quand la colonne est pleine largeur */
    :deep(.col-md-6.d-flex.align-items-end)[b-z6hca0icjg] {
        align-items: flex-start !important;
    }

    /* Bouton soumettre déjà d-grid, juste s'assurer de la hauteur */
    :deep(.d-grid .btn-lg)[b-z6hca0icjg] {
        padding: 12px !important;
        font-size: 1rem !important;
    }
}
/* /Pages/GestionMembres.razor.rz.scp.css */
/* CSS géré dans GestionMembres.razor via <style> global (CSS isolation non utilisé ici) */
/* /Pages/PaiementAnnule.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   PaiementAnnule — Responsive mobile (≤ 640 px)
   La page est déjà centrée verticalement (min-height 80vh).
   On améliore le groupe de boutons et on ajoute le dégagement PWA.
═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

    /* Dégagement bas pour la bottom-nav PWA */
    :deep(.d-flex.justify-content-center.align-items-center)[b-ep4yaotsu5] {
        padding-bottom: 80px;
    }

    /* Groupe de boutons → colonne pleine largeur sur petit écran */
    :deep(.d-flex.gap-3.justify-content-center.flex-wrap)[b-ep4yaotsu5] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    :deep(.d-flex.gap-3.justify-content-center.flex-wrap .btn)[b-ep4yaotsu5] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/PaiementSucces.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   PaiementSucces — Responsive mobile (≤ 640 px)
   La page est déjà centrée verticalement (min-height 80vh).
   On ajoute uniquement le dégagement pour la bottom-nav PWA.
═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

    /* Dégagement bas pour ne pas être masqué par la nav fixe */
    :deep(.d-flex.justify-content-center.align-items-center)[b-jnsih0evj7] {
        padding-bottom: 80px;
    }

    /* Bouton d'action : pleine largeur pour confort tactile */
    :deep(.btn.px-4)[b-jnsih0evj7] {
        width: 100%;
        justify-content: center;
    }
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-nd9i557l9c] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-nd9i557l9c] {
    flex: 1;
}

.sidebar[b-nd9i557l9c] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-nd9i557l9c] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-nd9i557l9c]  a, .top-row[b-nd9i557l9c]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-nd9i557l9c]  a:hover, .top-row[b-nd9i557l9c]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-nd9i557l9c]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640px) {

    /* ── Sidebar → barre de navigation fixée en bas ── */
    .sidebar[b-nd9i557l9c] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        height: auto;
        width: 100%;
        z-index: 1000;
        background-image: linear-gradient(90deg, rgb(5, 39, 103) 0%, #3a0647 100%);
        box-shadow: 0 -3px 16px rgba(0, 0, 0, .35);
    }

    /* ── Contenu → marge en bas pour ne pas être masqué par la nav ── */
    article.content[b-nd9i557l9c] {
        padding-bottom: 72px !important;
    }

    /* ── Footer → marge en bas ── */
    footer[b-nd9i557l9c] {
        padding-bottom: 72px !important;
    }

    /* ── Top-row du layout (user info) → compacte ── */
    .top-row.auth[b-nd9i557l9c] {
        justify-content: space-between;
        height: 2.75rem;
        font-size: .82rem;
    }

    .top-row[b-nd9i557l9c]  a, .top-row[b-nd9i557l9c]  .btn-link {
        margin-left: 0;
    }

    /* Le nom (email/username) peut être long : on le tronque (…) pour que « Déconnexion » reste visible */
    .top-row.auth[b-nd9i557l9c]  strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .top-row.auth[b-nd9i557l9c]  a {
        flex-shrink: 0;
    }
}

@media (min-width: 641px) {
    .page[b-nd9i557l9c] {
        flex-direction: row;
    }

    .sidebar[b-nd9i557l9c] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-nd9i557l9c] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-nd9i557l9c]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-nd9i557l9c], article[b-nd9i557l9c] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-0680m8ppku] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-0680m8ppku] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-0680m8ppku] {
    font-size: 1.1rem;
}

.oi[b-0680m8ppku] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-0680m8ppku] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-0680m8ppku] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-0680m8ppku] {
        padding-bottom: 1rem;
    }

    .nav-item[b-0680m8ppku]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-0680m8ppku]  a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item[b-0680m8ppku]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-0680m8ppku] {
        display: none;
    }

    .collapse[b-0680m8ppku] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

/* ═══════════════════════════════════════════════════
   MOBILE (≤ 640px) — Navigation bas d'écran
   La sidebar devient une barre fixe en bas de page
═══════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* ── Masquer le bouton hamburger (on remplace par nav bas) ── */
    .top-row[b-0680m8ppku] {
        display: none;
    }

    /* ── Toujours afficher le nav, même si collapse ── */
    .collapse[b-0680m8ppku] {
        display: block !important;
    }

    /* ── Navigation horizontale ── */
    nav.flex-column[b-0680m8ppku] {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around;
        align-items: stretch;
        padding: 0 !important;
    }

    /* ── Item nav ── */
    .nav-item[b-0680m8ppku] {
        flex: 1;
        padding: 0 !important;
        font-size: .72rem;
    }

    .nav-item:first-of-type[b-0680m8ppku] { padding-top: 0 !important; }
    .nav-item:last-of-type[b-0680m8ppku]  { padding-bottom: 0 !important; }

    /* ── Lien nav ── */
    .nav-item[b-0680m8ppku]  a {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto !important;
        min-height: 56px;
        line-height: 1 !important;
        padding: 8px 4px;
        font-size: .68rem;
        gap: 4px;
        border-radius: 0;
        color: rgba(255,255,255,.65) !important;
    }

    .nav-item[b-0680m8ppku]  a.active {
        background-color: rgba(255,255,255,.2);
        color: #fff !important;
        border-top: 2px solid #60a5fa;
    }

    .nav-item[b-0680m8ppku]  a:hover {
        color: #fff !important;
        background-color: rgba(255,255,255,.1);
    }

    /* ── Icône ── */
    .oi[b-0680m8ppku] {
        width: auto;
        font-size: 1.15rem;
        vertical-align: middle;
        top: 0;
        display: block;
    }
}