/* /Components/Layout/AdminNav.razor.rz.scp.css */
/* Sidebar header logo */
.rz-sidebar .rz-icon[b-cur1t25jlr] {
    font-size: 1.25rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-205pb5kur4] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-205pb5kur4] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-0trbxvsbma],
.components-reconnect-repeated-attempt-visible[b-0trbxvsbma],
.components-reconnect-failed-visible[b-0trbxvsbma],
.components-pause-visible[b-0trbxvsbma],
.components-resume-failed-visible[b-0trbxvsbma],
.components-rejoining-animation[b-0trbxvsbma] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-0trbxvsbma],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-0trbxvsbma],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-0trbxvsbma],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-0trbxvsbma],
#components-reconnect-modal.components-reconnect-retrying[b-0trbxvsbma],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-0trbxvsbma],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-0trbxvsbma],
#components-reconnect-modal.components-reconnect-failed[b-0trbxvsbma],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-0trbxvsbma] {
    display: block;
}


#components-reconnect-modal[b-0trbxvsbma] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-0trbxvsbma 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-0trbxvsbma 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-0trbxvsbma 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-0trbxvsbma]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-0trbxvsbma 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-0trbxvsbma {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-0trbxvsbma {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-0trbxvsbma {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-0trbxvsbma] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-0trbxvsbma] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-0trbxvsbma] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-0trbxvsbma] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-0trbxvsbma] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-0trbxvsbma] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-0trbxvsbma] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-0trbxvsbma 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-0trbxvsbma] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-0trbxvsbma {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Paroisse/Accueil.razor.rz.scp.css */
/* Accueil de la paroisse : mise en page de l'accueil Windows (LuminisysWin\Views\Pages\AccueilView.xaml).
   Couleurs tirées des variables Radzen, pour suivre le thème choisi (Luminisys, Luminisys Dark ou
   un thème Radzen), sauf les pastilles de statut et les icônes d'action, aux couleurs de Windows. */

.lx-accueil[b-g8w3trrvun] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.5rem 0.5rem 1.5rem;
}

/* ── Actions rapides ── */
.lx-accueil-actions[b-g8w3trrvun] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.lx-accueil-action[b-g8w3trrvun] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 96px;
    padding: 1rem 1.25rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 14px;
    background: var(--rz-base-background-color);
    color: var(--rz-text-title-color);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color var(--rz-transition), box-shadow var(--rz-transition);
}
.lx-accueil-action:hover[b-g8w3trrvun] {
    border-color: var(--rz-secondary);
    box-shadow: 0 2px 10px rgba(27, 37, 64, 0.08);
}
.lx-accueil-action:focus-visible[b-g8w3trrvun] {
    outline: 2px solid var(--rz-secondary);
    outline-offset: 2px;
}

.lx-accueil-action-icone[b-g8w3trrvun] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 12px;
}
.lx-accueil-action-icone--bleu[b-g8w3trrvun] { background: #E8EDF7; color: #2F4B8C; }
.lx-accueil-action-icone--vert[b-g8w3trrvun] { background: #E3F0E6; color: #2A6140; }

.lx-accueil-action-textes[b-g8w3trrvun],
.lx-accueil-deroule-textes[b-g8w3trrvun],
.lx-accueil-recente-textes[b-g8w3trrvun] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lx-accueil-action-titre[b-g8w3trrvun] {
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.25;
}
.lx-accueil-action-detail[b-g8w3trrvun] {
    color: var(--rz-text-secondary-color);
    font-size: 0.875rem;
}

/* ── Cartes ── */
.lx-accueil-grille[b-g8w3trrvun] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1.5rem;
    /* Les deux cartes prennent la hauteur de la plus haute, même avec peu de récentes. */
    align-items: stretch;
}

.lx-accueil-carte[b-g8w3trrvun] {
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 16px;
    background: var(--rz-base-background-color);
}

.lx-accueil-vide[b-g8w3trrvun],
.lx-accueil-discret[b-g8w3trrvun] {
    color: var(--rz-text-secondary-color);
}
.lx-accueil-discret[b-g8w3trrvun] {
    margin: 0;
    font-size: 0.8125rem;
}

.lx-accueil-libelle-or[b-g8w3trrvun] {
    margin: 0 0 0.5rem;
    color: var(--rz-secondary-dark, #8A6A12);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lx-accueil[b-g8w3trrvun]  .lx-accueil-selection-nom {
    margin: 0 0 0.5rem;
}

.lx-accueil-selection-infos[b-g8w3trrvun] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    color: var(--rz-text-secondary-color);
    font-size: 0.875rem;
}
.lx-accueil-selection-infos[b-g8w3trrvun]  .rz-icon {
    font-size: 1rem;
}

.lx-accueil-sous-titre[b-g8w3trrvun] {
    margin: 1.5rem 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Déroulé sur deux colonnes, défilant au-delà de six lignes, comme sous Windows. */
.lx-accueil-deroule[b-g8w3trrvun] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lx-accueil-deroule li[b-g8w3trrvun] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--rz-base-200);
}

.lx-accueil-numero[b-g8w3trrvun] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rz-base-200);
    color: var(--rz-text-color);
    font-size: 0.75rem;
}

.lx-accueil-deroule-libelle[b-g8w3trrvun] {
    color: var(--rz-text-secondary-color);
    font-size: 0.75rem;
}

.lx-accueil-deroule-texte[b-g8w3trrvun],
.lx-accueil-recente-nom[b-g8w3trrvun] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lx-accueil-boutons[b-g8w3trrvun] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* ── Récemment modifiées ── */
.lx-accueil-recentes-entete[b-g8w3trrvun] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.lx-accueil-lien[b-g8w3trrvun] {
    color: var(--rz-primary-light, var(--rz-primary));
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}
.lx-accueil-lien:hover[b-g8w3trrvun] {
    text-decoration: underline;
}

.lx-accueil-liste[b-g8w3trrvun] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lx-accueil-recente[b-g8w3trrvun] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: none;
    border-bottom: 1px solid var(--rz-base-200);
    border-inline-start: 3px solid transparent;
    background: none;
    color: var(--rz-text-title-color);
    font: inherit;
    text-align: start;
    cursor: pointer;
}
.lx-accueil-recente:hover[b-g8w3trrvun] {
    background: var(--rz-base-50, var(--rz-base-100));
}
.lx-accueil-recente:focus-visible[b-g8w3trrvun] {
    outline: 2px solid var(--rz-secondary);
    outline-offset: -2px;
}
.lx-accueil-recente--active[b-g8w3trrvun],
.lx-accueil-recente--active:hover[b-g8w3trrvun] {
    border-inline-start-color: var(--rz-primary-light, var(--rz-primary));
    background: var(--rz-primary-lighter);
}

.lx-accueil-date[b-g8w3trrvun] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: none;
    width: 2.5rem;
}
.lx-accueil-jour[b-g8w3trrvun] {
    font-family: var(--lx-police-titre, inherit);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.1;
}
.lx-accueil-mois[b-g8w3trrvun] {
    color: var(--rz-text-secondary-color);
    font-size: 0.6875rem;
}

.lx-accueil-recente-textes[b-g8w3trrvun] {
    flex: 1;
}

/* ── Pastilles de statut ── */
.lx-accueil-statut[b-g8w3trrvun] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: none;
    padding: 0.15rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.lx-accueil-statut[b-g8w3trrvun]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.lx-accueil-statut--terminee[b-g8w3trrvun] { background: #DCEFE2; color: #1D6537; }
.lx-accueil-statut--terminee[b-g8w3trrvun]::before { background: #2E8B4F; }
.lx-accueil-statut--en-cours[b-g8w3trrvun] { background: #FBE9D3; color: #8A4308; }
.lx-accueil-statut--en-cours[b-g8w3trrvun]::before { background: #D9761F; }

/* ── Écrans étroits : une colonne ── */
@media (max-width: 1000px) {
    .lx-accueil-grille[b-g8w3trrvun] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .lx-accueil-carte[b-g8w3trrvun] {
        padding: 1rem;
    }
    .lx-accueil-deroule[b-g8w3trrvun] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Paroisse/Celebrations.razor.rz.scp.css */
@media (max-width: 768px) {
    /* Volet de détail (Diaporama/Feuille/Déroulé) : sur desktop il partage la largeur avec la
       liste via RadzenSplitter (55%/45%) ; sur mobile il recouvre tout l'écran comme une fenêtre
       plein écran - fermeture via le bouton "close" déjà présent dans l'en-tête du volet.
       PAS de ::deep ici : .lx-detail-pane est un <div> littéral de ce fichier (voir Celebrations.razor),
       il porte donc déjà directement l'attribut d'isolation CSS - ::deep exigerait au contraire un
       ANCÊTRE portant cet attribut, qui n'existe pas ici (tous les parents sont des composants
       Radzen), et la règle ne matcherait jamais (piège vécu, voir la même correction dans
       SelectionnerChantPriereDialog.razor/.css). */
    .lx-detail-pane[b-cwk9r0ferg] {
        position: fixed;
        inset: 0;
        z-index: 1200;
        background: var(--rz-base-background-color, #fff);
    }

    /* Liste cardifiée mobile (remplace le RadzenDataGrid, qui déclenchait un défilement horizontal
       sur petit écran faute de place pour toutes ses colonnes) - voir Celebrations.razor et
       docs/adr/0001-systeme-listes-mobiles.md. Spécifique à cette page (pas dans mobile.css) car la
       forme du contenu (date en gras / titre / auteur empilés + statut à droite) ne correspond à
       aucun des composants partagés existants (CardItem : image + titre + sous-titre ; ListItem :
       titre + sous-titre). Ces <div> sont littéraux dans Celebrations.razor, donc déjà porteurs de
       l'attribut d'isolation CSS de ce composant (même remarque que pour .lx-detail-pane ci-dessus) -
       ::deep n'est nécessaire que pour la règle qui cible le <span class="rz-badge"> rendu par
       RadzenBadge (un composant enfant), voir plus bas. */
    .lx-celebration-cards[b-cwk9r0ferg] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0.25rem;
        overflow-x: hidden;
    }

    .lx-celebration-card[b-cwk9r0ferg] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-width: 0;
        padding: 0.625rem 0.75rem;
        border-radius: var(--rz-border-radius, 10px);
        background: var(--rz-base-background-color, #fff);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 150ms ease;
        /* La pastille de statut (RadzenBadge) est agrandie globalement pour les tableaux desktop
           (voir wwwroot/app.css, --rz-badge-padding/--rz-badge-pill-padding) - sur une carte de
           400px de large, ce format prenait trop de place et tronquait date/titre/auteur à
           quelques caractères (constaté en test réel, voir image jointe à la demande). On réduit
           ces variables ici : elles sont héritées par le <span class="rz-badge"> rendu par
           RadzenBadge (un composant enfant) via la cascade CSS normale des propriétés custom, qui
           traverse la frontière d'isolation Blazor même sans ::deep - seuls les SÉLECTEURS ont
           besoin de ::deep pour atteindre le DOM d'un composant enfant, pas l'héritage des
           variables. */
        --rz-badge-padding: 0.1rem 0.35rem;
        --rz-badge-pill-padding: 0.1rem 0.45rem;
    }

    .lx-celebration-card:active[b-cwk9r0ferg] {
        transform: scale(0.98);
    }

    .lx-celebration-card__body[b-cwk9r0ferg] {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1 1 auto;
    }

    .lx-celebration-card__date[b-cwk9r0ferg] {
        font-size: 0.9375rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lx-celebration-card__title[b-cwk9r0ferg] {
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lx-celebration-card__author[b-cwk9r0ferg] {
        font-size: 0.75rem;
        color: var(--rz-text-secondary-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lx-celebration-card__status[b-cwk9r0ferg] {
        flex-shrink: 0;
    }

    /* Complète la réduction des variables --rz-badge-*-padding ci-dessus : celles-ci ne couvrent
       que le padding interne, alors que app.css fixe aussi une marge (8px/6px) et une taille de
       police (0.8rem) directement sur .rz-badge, non paramétrables par variable CSS. ::deep requis
       ici (contrairement aux règles ci-dessus) car .rz-badge n'est pas un élément littéral de ce
       fichier : il est rendu par RadzenBadge, un composant enfant, dont le DOM interne échappe à
       l'isolation CSS de Celebrations.razor sauf via ce combinateur. */
    .lx-celebration-card__status[b-cwk9r0ferg]  .rz-badge {
        margin: 0;
        font-size: 0.625rem;
        white-space: nowrap;
    }
}
/* /Components/Pages/Paroisse/ChantsPrieres.razor.rz.scp.css */
@media (max-width: 768px) {
    /* Conteneur englobant titre + filtres + zone liste/aperçu (ChantsPrieres.razor) : la RadzenRow
       ci-dessous (.lx-chant-split) avait une hauteur fixe "calc(100vh - 260px)" pensée pour
       desktop - en mobile, le titre "Textes et Chants" passe sur deux lignes (écran étroit) et
       l'en-tête/le padding de page diffèrent, donc ce nombre magique ne correspondait plus à
       l'espace réellement pris au-dessus : le contenu total dépassait la hauteur de l'écran, et le
       body se mettait à défiler EN PLUS du défilement interne déjà géré par .lx-chant-cards /
       .lx-chant-detail-pane__body (constaté en test réel : deux ascenseurs visibles simultanément,
       liste et aperçu). Plutôt que de deviner un nouveau nombre magique pour mobile, ce wrapper
       borne toute la page à la hauteur de l'écran (moins l'en-tête de l'application) et n'autorise
       plus lui-même à défiler : titre et filtres gardent leur hauteur naturelle (flex-shrink:0
       ci-dessous), et .lx-chant-split absorbe tout l'espace restant, quel que soit le nombre de
       lignes du titre - un seul ascenseur (celui de la liste, ou celui de l'aperçu plein écran)
       reste alors possible à la fois. */
    .lx-chant-page[b-ondmocu35f] {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--rz-header-min-height, 3.125rem));
        height: calc(100dvh - var(--rz-header-min-height, 3.125rem));
        overflow: hidden;
    }

    .lx-chant-page > *:not(.lx-chant-split)[b-ondmocu35f] {
        flex-shrink: 0;
    }

    /* !important nécessaire : Style="height:calc(100vh - 260px); min-height:400px" est posé en
       inline dans ChantsPrieres.razor (desktop inchangé) - sans !important, ces valeurs inline
       l'emporteraient toujours sur les règles ci-dessous, même sous cette media query. */
    .lx-chant-split[b-ondmocu35f] {
        flex: 1 1 auto;
        height: auto !important;
        min-height: 0 !important;
    }

    /* Aperçu plein écran (remplace l'affichage empilé sous la liste) : même technique que
       .lx-detail-pane dans Celebrations.razor.css - position fixed/inset couvre tout l'écran,
       fermeture via le bouton "close" de l'en-tête. Le bouton "Menu" (more_vert), retiré de la
       carte dans la liste, est déporté ici (voir demande utilisateur et la colonne d'aperçu dans
       ChantsPrieres.razor). PAS de ::deep sur .lx-chant-detail-pane* : ce sont des <div> littéraux
       de ce fichier, déjà porteurs de l'attribut d'isolation CSS (même remarque que pour
       .lx-detail-pane dans Celebrations.razor.css). */
    .lx-chant-detail-pane[b-ondmocu35f] {
        position: fixed;
        inset: 0;
        z-index: 1200;
        background: var(--rz-base-background-color, #fff);
        display: flex;
        flex-direction: column;
    }

    .lx-chant-detail-pane__header[b-ondmocu35f] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--rz-border-disabled-color);
        flex-shrink: 0;
    }

    .lx-chant-detail-pane__title[b-ondmocu35f] {
        font-weight: 600;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lx-chant-detail-pane__actions[b-ondmocu35f] {
        display: flex;
        gap: 0.25rem;
        flex-shrink: 0;
    }

    .lx-chant-detail-pane__body[b-ondmocu35f] {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    /* Réduction des marges/tailles de police de l'aperçu (ApercuChant, RenderFragment partagé avec
       le desktop) UNIQUEMENT dans le panneau plein écran mobile - le rendu desktop (colonne de
       droite du RadzenRow, sans ce wrapper .lx-chant-detail-pane__body) reste strictement
       inchangé. Les valeurs ciblées ici (padding, marges, tailles de police) sont posées en inline
       dans ApercuChant() : !important nécessaire pour les emporter, même piège que documenté plus
       haut dans ce fichier pour .lx-chant-detail-pane__body lui-même. Padding et tailles pensés
       pour une page A4 desktop (3rem/4rem de marge, titre 1.8rem, corps 1.15rem) sont bien trop
       larges sur un écran de téléphone étroit (constaté en test réel : la moitié de l'écran perdue
       en marges blanches, texte disproportionné). */
    .lx-chant-detail-pane__body .lx-apercu[b-ondmocu35f] {
        margin: 0 auto !important;
        padding: 1rem !important;
        font-size: 0.95rem !important;
        box-shadow: none !important;
    }

    .lx-chant-detail-pane__body .lx-apercu__titre[b-ondmocu35f] {
        font-size: 1.3rem !important;
        margin-bottom: 0.75rem !important;
    }

    .lx-chant-detail-pane__body .lx-apercu__refrain[b-ondmocu35f] {
        margin-bottom: 0.85rem !important;
    }

    .lx-chant-detail-pane__body .lx-apercu__couplet[b-ondmocu35f] {
        margin-bottom: 0.65rem !important;
    }

    /* Liste cardifiée (remplace la liste dense ListItem) - même style visuel que
       .lx-celebration-cards/.lx-celebration-card dans Celebrations.razor.css (voir demande
       utilisateur : présenter les chants sous forme de carte comme les célébrations). Pas de
       date/auteur/statut ici (contenu d'un chant/prière) : juste une icône de type + le titre. */
    .lx-chant-cards[b-ondmocu35f] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0.25rem;
        overflow-x: hidden;
    }

    .lx-chant-card[b-ondmocu35f] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-width: 0;
        padding: 0.625rem 0.75rem;
        border-radius: var(--rz-border-radius, 10px);
        background: var(--rz-base-background-color, #fff);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 150ms ease;
    }

    .lx-chant-card:active[b-ondmocu35f] {
        transform: scale(0.98);
    }

    .lx-chant-card__title[b-ondmocu35f] {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* /Components/Pages/Paroisse/Dialogs/ChantPriereDialog.razor.rz.scp.css */
/* Styles gérés globalement dans radzen-theme.css via .rz-dialog :has(.rz-tabview) */
/* /Components/Pages/Paroisse/Dialogs/PageTexteChampsEditeur.razor.rz.scp.css */
/* Titre de la page (RadzenAutoComplete) : affiché comme un libellé tant qu'il n'a pas le focus -
   cadre, fond et ombre rendus transparents (PAS supprimés : même épaisseur de bordure et même
   padding qu'en saisie, pour que le texte ne se décale pas au clic). Le cadre Radzen réapparaît
   dès que l'on entre dans le champ (:focus-within). ::deep : le cadre est rendu par le composant
   Radzen enfant, hors de portée de la CSS isolée sans ce sélecteur. */
.lx-titre-page:not(:focus-within)[b-evgw15tugb]  .rz-autocomplete,
.lx-titre-page:not(:focus-within)[b-evgw15tugb]  .rz-inputtext {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}

.lx-titre-page[b-evgw15tugb]  .rz-inputtext {
    cursor: text;
}

/* En-tête de fermeture du panneau de sélection (chant/prière) : visible uniquement sur mobile, où
   .lx-popup-panel (wwwroot/css/mobile.css) passe en plein écran et perd son calque transparent
   "clic en dehors". Caché par défaut : desktop inchangé. */
.lx-popup-mobile-header[b-evgw15tugb] {
    display: none;
}

@media (max-width: 768px) {
    /* .lx-popup-panel devient une colonne flex plein écran : l'en-tête reste fixe en haut, le
       reste (filtres/liste/aperçu/boutons de SelectionnerChantPriereDialog, composant enfant) se
       répartit en dessous - voir SelectionnerChantPriereDialog.razor.css pour le détail (liste
       extensible avec défilement propre, filtres et boutons de taille fixe). */
    .lx-popup-panel[b-evgw15tugb] {
        display: flex;
        flex-direction: column;
    }

    .lx-popup-mobile-header[b-evgw15tugb] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        flex-shrink: 0;
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid var(--rz-border-disabled-color);
    }
}
/* /Components/Pages/Paroisse/Dialogs/SelectionnerChantPriereDialog.razor.rz.scp.css */
/* Barre de recherche + filtres et barre de boutons du bas : toujours visibles en entier, même
   quand le panneau (.lx-popup-panel, PageTexteChampsEditeur.razor) se comprime sous une contrainte
   max-height - seule .lx-selection-body (liste + aperçu) doit rétrécir (voir son flex:0 1 320px
   dans SelectionnerChantPriereDialog.razor). */
[b-z8d9of7yvc] .lx-selection-filters,
[b-z8d9of7yvc] .lx-wizard-footer {
    flex-shrink: 0;
}

/* Bouton "tune" (replier/déplier Type+Messe) et filtres repliables : sans effet en desktop, où les
   deux filtres restent toujours affichés en ligne (voir la règle @media plus bas). */
[b-z8d9of7yvc] .lx-selection-filtres-toggle {
    display: none;
}

.lx-selection-filters-extra[b-z8d9of7yvc] {
    display: contents;
}

/* Libellés courts des boutons du bas ("+"/"Sel") : masqués par défaut, ils ne s'affichent qu'en
   mobile (voir @media plus bas) où ils remplacent les libellés complets. */
[b-z8d9of7yvc] .lx-btn-libelle-mobile {
    display: none;
}

/* Regroupement visuel desktop de SÉLECTIONNER (à droite, avec AUCUN) : sans effet en mobile, où
   cette marge est annulée (voir @media plus bas) puisque les 3 boutons y sont de largeur égale. */
[b-z8d9of7yvc] .lx-btn-push-right {
    margin-left: auto;
}

@media (max-width: 768px) {
    /* Barre de recherche + filtres : toujours visible en haut, même quand la liste défile en
       dessous (voir .lx-selection-body). RadzenStack étant un composant, ::deep est nécessaire
       pour atteindre son élément racine depuis ce fichier. */
    [b-z8d9of7yvc] .lx-selection-filters {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--rz-base-background-color, #fff);
        padding-top: 0.25rem;
        padding-bottom: 0.5rem;
    }

    /* Seul le champ Rechercher reste visible par défaut ; Type/Messe passent derrière le bouton
       "tune", qui n'apparaît qu'ici (peu d'intérêt sur un écran assez large pour tout afficher). */
    [b-z8d9of7yvc] .lx-selection-filtres-toggle {
        display: inline-flex;
        flex-shrink: 0;
    }

    .lx-selection-filters-extra[b-z8d9of7yvc] {
        display: none;
    }

    .lx-selection-filters-extra.lx-filters-open[b-z8d9of7yvc] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        flex: 1 1 100%;
        margin-top: 0.5rem;
    }

    [b-z8d9of7yvc] .lx-selection-filtre-item {
        width: 100%;
    }

    /* Liste + aperçu : côte à côte à hauteur fixe (320px) sur desktop -> empilés en une seule
       colonne sur mobile. Le "!important" sur flex est nécessaire : sans lui, cette règle perd
       face au style inline flex:0 1 320px posé par SelectionnerChantPriereDialog.razor (une valeur
       inline l'emporte toujours sur une feuille externe à spécificité égale) - .lx-selection-body
       restait alors figé à ~320px et son contenu débordait visuellement par-dessus .lx-wizard-footer
       (constaté en test, voir capture liée au correctif). */
    [b-z8d9of7yvc] .lx-selection-body {
        flex-direction: column !important;
        height: auto !important;
        flex: 1 !important;
        min-height: 0;
    }

    /* Liste et aperçu se partagent à parts égales la hauteur réellement disponible dans
       .lx-selection-body (flex-basis:0 + flex-grow:1 identiques sur les deux) plutôt qu'une valeur
       en vh figée : une hauteur en vh ignore l'espace déjà pris par l'en-tête/les filtres/les
       boutons, ce qui pouvait dépasser l'espace réel et pousser l'aperçu sous les boutons. Chacun
       défile en interne si son contenu ne tient pas dans sa moitié (.lx-selection-list a déjà
       overflow-y:auto ; RadzenTextArea défile nativement). */
    .lx-selection-list[b-z8d9of7yvc] {
        flex: 1 1 0;
        min-height: 0;
    }

    [b-z8d9of7yvc] .lx-selection-preview {
        flex: 1 1 0 !important;
        min-height: 0;
    }

    /* Le vrai débordement de l'aperçu sous les boutons venait d'ici : un <textarea> est un contrôle
       de formulaire, dont la taille minimale automatique en tant qu'enfant flex reste basée sur son
       contenu (comme s'il gardait overflow:visible), contrairement à .lx-selection-list qui a déjà
       overflow-y:auto (donc automatiquement min-height:0 selon la spec flexbox). Sans ce
       min-height:0 explicite, le textarea grandissait jusqu'à son texte complet et débordait de sa
       moitié de .lx-selection-body, sous le pied de page sticky (constaté en test réel, capture à
       l'appui). Avec min-height:0, le textarea respecte son flex:1 et défile en interne (scroll
       natif du textarea) si le texte ne tient pas dans l'espace alloué. */
    [b-z8d9of7yvc] .lx-selection-preview-textarea {
        min-height: 0;
    }

    /* Le débordement RÉSIDUEL (constaté même après les deux correctifs ci-dessus) venait de
       .lx-wizard-footer lui-même (règle globale, non scopée, dans wwwroot/css/mobile.css) : cette
       règle suppose un ancêtre au padding de 1.5rem (var(--rz-dialog-content-padding), pensée pour
       .rz-dialog-content) pour faire "affleurer" le pied de page à ses bords via une marge négative
       de 1.5rem + margin-top:auto - alors que .lx-popup-panel (radzen-theme.css) n'a que 1rem de
       padding. Pire : ce margin-top:auto entrait en concurrence avec le flex:1 de
       .lx-selection-body ci-dessus - les DEUX mécanismes tentaient de "pousser vers le bas" en même
       temps, et la marge négative faisait paraître le pied de page 1.5rem plus "petit" qu'il ne
       l'est réellement aux yeux du calcul flex (marge négative = boîte de marge plus petite que la
       boîte visible), ce qui faisait grandir .lx-selection-body de 1.5rem de trop et le faisait
       déborder visuellement sous le pied de page (constaté en test réel avec des rectangles de
       débogage : le bas de .lx-selection-body dépassait le haut de .lx-wizard-footer de 24px pile -
       la valeur de cette marge négative). On neutralise ici tout le bleed (marges) : le flex:1 de
       .lx-selection-body suffit seul à coller le pied de page en bas, sans la moindre marge
       automatique ou négative pour s'y opposer. */
    /* padding-bottom 1.5rem (au lieu de 0.75rem) : boutons remontés pour ne plus être masqués par
       la barre d'outils du bas du navigateur Android (voir aussi le passage en dvh de
       .lx-popup-panel dans wwwroot/css/mobile.css). */
    [b-z8d9of7yvc] .lx-wizard-footer {
        margin: 0 !important;
        padding-bottom: 1.5rem !important;
    }

    /* Boutons du bas : "AJOUTER"/"SÉLECTIONNER" cèdent la place à "Ajouter"/"Select." (nom
       accessible identique ou presque, voir le commentaire dans le .razor). La marge automatique
       desktop est annulée pour que les 3 boutons, désormais frères directs, se partagent la largeur
       à égalité. */
    [b-z8d9of7yvc] .lx-btn-libelle-desktop {
        display: none;
    }

    [b-z8d9of7yvc] .lx-btn-libelle-mobile {
        display: inline-flex;
    }

    [b-z8d9of7yvc] .lx-btn-push-right {
        margin-left: 0;
    }

    [b-z8d9of7yvc] .lx-wizard-btn {
        flex: 1 1 0;
        min-width: 0;
    }

    /* .rz-button-box (conteneur interne icône+texte de RadzenButton) est en inline-flex : il ne
       s'étire pas avec le bouton et reste collé à gauche par défaut. Il faut le forcer à occuper
       toute la largeur du bouton pour que son justify-content:center (déjà posé par le thème
       Radzen) centre réellement le libellé une fois le bouton élargi par flex:1 ci-dessus
       (constaté en test : sans cette règle, "+" restait aligné à gauche du bouton élargi). */
    [b-z8d9of7yvc] .lx-wizard-btn .rz-button-box {
        width: 100%;
    }
}

/* Aperçu en lecture seule avec texte cherché surligné (remplace les zones de saisie). */
[b-z8d9of7yvc] .lx-selection-preview-texte {
    width: 100%;
    overflow-y: auto;
    white-space: pre-wrap;
    border: 1px solid var(--rz-border-disabled-color);
    border-radius: var(--rz-border-radius, 4px);
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
    background: var(--rz-base-background-color);
}
/* /Components/Pages/Paroisse/Parametrage.razor.rz.scp.css */
@media (max-width: 768px) {
    /* Liste cardifiée mobile de la section "Modèles" (route /paroisse/modeles) - report de la même conversion que
       Components\Pages\Paroisse\Celebrations.razor (cartes plutôt que RadzenDataGrid, pastille de
       statut réduite pour ne pas écraser le titre) - voir Parametrage.razor et
       docs/adr/0001-systeme-listes-mobiles.md. Un modèle n'a ni date ni auteur (seul Nom est
       chargé) : la carte montre titre + temps liturgique (deux lignes) + le statut à droite,
       contrairement aux cartes à 3 lignes de Celebrations.razor.css. Pas de ::deep pour
       .lx-modele-card* : ces <div> sont littéraux dans Parametrage.razor, donc déjà porteurs de
       l'attribut d'isolation CSS de ce composant. */
    .lx-modele-cards[b-irir3meun4] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0.25rem;
        overflow-x: hidden;
    }

    .lx-modele-card[b-irir3meun4] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-width: 0;
        padding: 0.625rem 0.75rem;
        border-radius: var(--rz-border-radius, 10px);
        background: var(--rz-base-background-color, #fff);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 150ms ease;
        /* Même réduction que Celebrations.razor.css : la pastille est agrandie globalement pour les
           tableaux desktop (voir wwwroot/app.css, --rz-badge-padding/--rz-badge-pill-padding), trop
           large sur une carte de 400px. */
        --rz-badge-padding: 0.1rem 0.35rem;
        --rz-badge-pill-padding: 0.1rem 0.45rem;
    }

    .lx-modele-card:active[b-irir3meun4] {
        transform: scale(0.98);
    }

    .lx-modele-card__body[b-irir3meun4] {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1 1 auto;
    }

    .lx-modele-card__title[b-irir3meun4] {
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lx-modele-card__temps[b-irir3meun4] {
        font-size: 0.75rem;
        color: var(--rz-text-secondary-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lx-modele-card__status[b-irir3meun4] {
        flex-shrink: 0;
    }

    /* ::deep requis ici (contrairement aux règles ci-dessus) car .rz-badge n'est pas un élément
       littéral de ce fichier : il est rendu par RadzenBadge, un composant enfant, dont le DOM
       interne échappe à l'isolation CSS de Parametrage.razor sauf via ce combinateur - même
       remarque que Celebrations.razor.css. */
    .lx-modele-card__status[b-irir3meun4]  .rz-badge {
        margin: 0;
        font-size: 0.625rem;
        white-space: nowrap;
    }
}
/* /Components/Shared/ApercuPdfCelebration.razor.rz.scp.css */
/* Visionneuse PDF (pages rendues en canvas par ApercuPdfCelebration.razor.js) : ::deep pour les
   éléments créés par le script, qui ne portent pas l'attribut d'isolation de ce composant. */

.pdf-viewer-frame[b-y13ua4lq5c] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: var(--rz-base-200, #e9e9e9);
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.pdf-viewer-frame[b-y13ua4lq5c]  .pdf-viewer-page {
    max-width: 100%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    background: #fff;
}

.pdf-viewer-frame[b-y13ua4lq5c]  .pdf-viewer-message {
    margin: auto;
    color: var(--rz-text-secondary-color);
}

.pdf-viewer-frame[b-y13ua4lq5c]  .pdf-viewer-spinner {
    margin: auto;
    width: 48px;
    height: 48px;
    border: 4px solid var(--rz-base-300, #ddd);
    border-top-color: var(--rz-primary, #2196f3);
    border-radius: 50%;
    animation: pdf-viewer-spin-b-y13ua4lq5c 0.8s linear infinite;
}

@keyframes pdf-viewer-spin-b-y13ua4lq5c {
    to { transform: rotate(360deg); }
}

.pdf-viewer-frame.pdf-viewer-error[b-y13ua4lq5c] {
    align-items: center;
    justify-content: center;
    color: var(--rz-danger);
}

/* /Components/Shared/AssocierPeripheriqueDialog.razor.rz.scp.css */
/* Trois cases de trois chiffres (maquette, écran 10). */
.code-appairage[b-62rw9i4onj] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.code-appairage input[b-62rw9i4onj] {
    width: 92px;
    height: 44px;
    text-align: center;
    font-size: 24px;
    letter-spacing: 0.2em;
    font-variant-numeric: tabular-nums;
}

.code-appairage span[b-62rw9i4onj] {
    color: var(--rz-text-disabled-color);
    font-size: 22px;
}

.code-appairage.erreur input[b-62rw9i4onj] {
    border-color: var(--rz-danger);
    box-shadow: 0 0 0 1px var(--rz-danger);
}
/* /Components/Shared/ComparaisonGroupeDoublons.razor.rz.scp.css */
/* Liste des textes d'un groupe de doublons, au-dessus de la comparaison en deux colonnes. */
.lx-doublons-liste[b-ha8g1mk477] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lx-doublons-ligne[b-ha8g1mk477] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--rz-border-color);
    border-radius: 10px;
    background: var(--rz-base-background-color);
}

.lx-doublons-maitre[b-ha8g1mk477] {
    border: 2px solid var(--rz-primary);
}

.lx-doublons-compare[b-ha8g1mk477] {
    background: var(--rz-primary-lighter);
}

.lx-doublons-choix[b-ha8g1mk477] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

.lx-doublons-infos[b-ha8g1mk477] {
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
    min-width: 0;
}

.lx-doublons-titre[b-ha8g1mk477] {
    font-weight: 600;
}

.lx-doublons-auteur[b-ha8g1mk477] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}
/* /Components/Shared/ComparaisonTextes.razor.rz.scp.css */
/* Comparaison en deux colonnes : couleurs et mise en page de l'écran des conflits de l'application
   Windows (docs\maquettes\synchronisation.html, classes .cmp/.side/.del/.add). */
.lx-cmp[b-12f03e17mp] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

@media (max-width: 768px) {
    .lx-cmp[b-12f03e17mp] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.lx-cmp-cote[b-12f03e17mp] {
    border: 1px solid #E6E0D4;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.lx-cmp-entete[b-12f03e17mp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: #FBF9F4;
    border-bottom: 1px solid #F0EBE1;
}

.lx-cmp-entete-textes[b-12f03e17mp] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lx-cmp-titre[b-12f03e17mp] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1C2233;
}

.lx-cmp-soustitre[b-12f03e17mp] {
    font-size: 0.8rem;
    color: #5E6472;
}

.lx-cmp-corps[b-12f03e17mp] {
    padding: 14px 16px;
    font-size: 0.9rem;
    line-height: 1.6;
    max-height: 420px;
    overflow-y: auto;
    color: #1C2233;
}

.lx-cmp-ligne[b-12f03e17mp] {
    white-space: pre-wrap;
    min-height: 1.6em;
}

.lx-cmp-section[b-12f03e17mp] {
    font-weight: 700;
}

.lx-cmp-supprime[b-12f03e17mp] {
    background: #FBE9E4;
    color: #8E1B12;
    text-decoration: line-through;
    border-radius: 3px;
    padding: 0 2px;
}

.lx-cmp-ajoute[b-12f03e17mp] {
    background: #DCEFE2;
    color: #1D6537;
    border-radius: 3px;
    padding: 0 2px;
}

.lx-cmp-identiques[b-12f03e17mp] {
    margin-top: 8px;
    font-size: 0.85rem;
    color: #1D6537;
}
/* /Components/Shared/DoublonsPotentielsDialog.razor.rz.scp.css */
/* Liste des doublons potentiels, au-dessus de la comparaison en deux colonnes. */
.lx-potentiels-liste[b-awjh3d56s8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lx-potentiels-ligne[b-awjh3d56s8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--rz-border-color);
    border-radius: 10px;
}

.lx-potentiels-compare[b-awjh3d56s8] {
    background: var(--rz-primary-lighter);
}

.lx-potentiels-infos[b-awjh3d56s8] {
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
    min-width: 0;
}

.lx-potentiels-titre[b-awjh3d56s8] {
    font-weight: 600;
}

.lx-potentiels-type[b-awjh3d56s8] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}
/* /Components/Shared/ParametresServeurMail.razor.rz.scp.css */
/* Serveur (large), port, sécurité ; identifiant ; mot de passe (maquettes, écrans 12 et 13). */
.parametres-serveur-mail[b-xkd0no25w9] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 8px;
}

.parametres-serveur-mail[b-xkd0no25w9]  .identifiant {
    grid-column: 1 / 2;
}

.parametres-serveur-mail[b-xkd0no25w9]  .motdepasse {
    grid-column: 2 / -1;
}

@media (max-width: 640px) {
    .parametres-serveur-mail[b-xkd0no25w9] {
        grid-template-columns: 1fr;
    }

    .parametres-serveur-mail[b-xkd0no25w9]  .identifiant,
    .parametres-serveur-mail[b-xkd0no25w9]  .motdepasse {
        grid-column: auto;
    }
}
/* /Components/Shared/ThemeDialog.razor.rz.scp.css */
.tp-grid[b-990wt9e3ix] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.tp-item[b-990wt9e3ix] {
    cursor: pointer;
    border-radius: 8px;
    border: 2px solid transparent;
    padding: 2px;
    transition: border-color 0.15s ease;
}

.tp-item:hover[b-990wt9e3ix] {
    border-color: var(--rz-primary-light);
}

.tp-item--active[b-990wt9e3ix] {
    border-color: var(--rz-primary);
}

.tp-name[b-990wt9e3ix] {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rz-text-color);
    margin-bottom: 4px;
    padding: 0 2px;
}

.tp-card[b-990wt9e3ix] {
    border-radius: 6px;
    overflow: hidden;
    padding: 10px 10px 8px;
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 86px;
}

/* Typography section */
.tp-typo[b-990wt9e3ix] {
    flex: 0 0 52px;
}

.tp-aa[b-990wt9e3ix] {
    font-size: 22px;
    font-weight: bold;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1;
}

/* Lines / table section */
.tp-lines[b-990wt9e3ix] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 2px;
}

.tp-line-row[b-990wt9e3ix] {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Donut chart section */
.tp-chart[b-990wt9e3ix] {
    flex: 0 0 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.tp-donut[b-990wt9e3ix] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
}

.tp-donut-hole[b-990wt9e3ix] {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.tp-dots[b-990wt9e3ix] {
    display: flex;
    gap: 4px;
}

.tp-dot[b-990wt9e3ix] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

/* Téléphone : deux aperçus par ligne font environ 150px de large, trop peu pour les trois blocs.
   Les lignes de texte factices, les moins parlantes, disparaissent (« Aa » et couleurs restent). */
@media (max-width: 480px) {
    .tp-card[b-990wt9e3ix] {
        justify-content: space-between;
    }

    .tp-lines[b-990wt9e3ix] {
        display: none;
    }
}