/* ══════════════════════════════════════════════════════════════════════════
   Adaptations MOBILE UNIQUEMENT (smartphone, portrait et paysage) - tout est enfermé dans
   @media (max-width: 768px), le même point de rupture que celui déjà utilisé par le thème Radzen
   (material-base.css) et par les colonnes RadzenColumn SizeXS de l'application. Rien ici ne
   s'applique au-dessus de 768px : l'interface desktop reste strictement inchangée.

   Portée : assistant de création/modification de célébration (fenêtres plein écran), sélecteur de
   chant/prière (fenêtre plein écran), volet de détail d'une célébration (voir aussi
   Celebrations.razor.css pour la partie propre à ce composant), menu latéral (repli/icônes),
   en-tête (paroisse/utilisateur), et quelques règles d'ergonomie tactile générales.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Ergonomie générale ───────────────────────────────────────────────── */

    /* Aucune des adaptations ci-dessous n'est censée provoquer de défilement horizontal - filet de
       sécurité si un contenu déborde malgré tout (ex: RadzenDataGrid conserve son propre défilement
       horizontal interne, ce qui reste acceptable). */
    html, body {
        overflow-x: hidden;
    }

    /* Marges latérales de la zone de contenu principale (MainLayout.razor, ParoisseLayout.razor,
       AdminLayout.razor - <div class="lx-page-content rz-p-4|rz-p-6"> qui enveloppe @Body) :
       pensées pour desktop (16px/24px de chaque côté), bien trop larges sur un écran de téléphone
       où elles mangent une part significative de la largeur utile - réduites ici à environ 1/6
       (divisées par 3 dans un premier temps, puis par 2 supplémentaire suite au retour utilisateur
       que même ce premier réglage restait trop large). Cible .lx-page-content plutôt que
       .rz-p-4/.rz-p-6 directement : ces utilitaires Radzen sont aussi réutilisés ailleurs pour un
       padding interne de carte (RadzenCard Class="rz-p-4" du panneau de recherche, par exemple) qui
       n'a pas à rétrécir de la même façon. !important nécessaire pour l'emporter sur .rz-p-4/.rz-p-6
       (eux-mêmes en !important dans le thème Radzen, material-base.css). */
    .lx-page-content.rz-p-4 {
        padding: 0.167rem !important;
    }
    .lx-page-content.rz-p-6 {
        padding: 0.25rem !important;
    }

    /* Menu déroulant du profil utilisateur et de la paroisse active (UserMenu.razor,
       ParoisseMenu.razor - tous deux basés sur RadzenProfileMenu) : par défaut, sa largeur suit son
       item de texte le plus long ("DOUBLE AUTHENTIFICATION", "CONSOLE D'ADMINISTRATION"...) sans
       aucun plafond (white-space:nowrap côté thème Radzen), et son bord droit est ancré sur le bord
       droit du bouton bascule - qui se réduit à une simple icône en mobile puisque le nom
       utilisateur (.rz-header .rz-ms-1) est masqué ci-dessous. Résultat sans cette règle : le menu
       déborde largement à droite de l'écran, la partie hors-écran étant silencieusement coupée par
       le "filet de sécurité" html,body{overflow-x:hidden} plus haut - constaté en test réel (items
       de menu tronqués). !important nécessaire pour l'emporter sur les règles non scopées du thème. */
    .rz-profile-menu .rz-navigation-menu {
        max-width: calc(100vw - 1rem) !important;
        inset-inline-end: 0 !important;
    }

    /* Cibles tactiles : les boutons d'action des fenêtres et de la navigation (souvent en
       ButtonSize.Small, 32px, pensés pour la souris) passent sous la taille tactile recommandée
       (~40px). Non appliqué aux grilles (RadzenDataGrid) pour ne pas perturber leur densité de
       lignes (Density.Compact). */
    .rz-dialog .rz-button,
    .rz-header .rz-button,
    .rz-sidebar .rz-button {
        min-height: 40px;
        min-width: 40px;
    }

    /* ── Fenêtres (assistant de création/modification, sélection d'église, aperçus...) : plein
       écran plutôt que des largeurs fixes en pixels pensées pour desktop (900px/820px/750px/700px/
       600px/500px selon les dialogues).
       Hauteurs en dvh (hauteur VISIBLE du viewport), 100vh restant en repli pour les navigateurs
       qui l'ignorent : sous Android/Chrome, 100vh vaut la hauteur SANS la barre d'outils du bas du
       navigateur - le bas des fenêtres (boutons PRÉCÉDENT/SUIVANT, boutons de sélection de chant)
       passait donc sous cette barre (constaté en test réel, captures à l'appui). ── */
    .rz-dialog-wrapper {
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }
    .rz-dialog {
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }
    .rz-dialog-content {
        height: calc(100vh - 52px) !important;
        height: calc(100dvh - 52px) !important;
        max-height: none !important;
        overflow-y: auto !important;
        box-sizing: border-box;
        /* display:flex + .lx-wizard-footer en margin-top:auto ci-dessous : position:sticky seul ne
           pousse le pied de page en bas QUE si le contenu déborde déjà (le sticky ne fait que
           "coller" un élément à la position qu'il aurait de toute façon en défilant) - sur une
           étape courte (peu de champs), le pied de page restait juste après le contenu, collé en
           haut de l'espace vide plutôt qu'en bas de l'écran (constaté en test réel). Le flex
           column + margin-top:auto comble cet espace, sticky prenant le relais dès que le contenu
           déborde. */
        display: flex;
        flex-direction: column;
    }
    .rz-dialog-titlebar {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    /* Champs alignés sur toutes les étapes des fenêtres/assistants (ex: NouvelleCelebrationAssistant.razor -
       étape 1 "Date"/"Modèle"/"Église"/"Titre" en colonnes SizeMD="4"/"8", étape 2 "Disposition
       chants"/"Disposition prières" en SizeMD="6"/"6") : le CSS du thème Radzen pour rz-col-sm-*/
       rz-col-md-*/rz-col-lg-* n'est protégé par AUCUNE media query (voir material-base.css), il
       l'emporte donc sur rz-col-xs-12 (déclaré avant lui dans cette même feuille, donc perdant à
       spécificité égale) MÊME sur un petit écran, au lieu de s'effacer devant lui comme dans une
       grille Bootstrap classique. Conséquence constatée en test réel : ces colonnes restaient à
       leur largeur desktop (33%/66% ou 50%/50%) sur mobile, avec des champs visiblement plus
       étroits et désalignés par rapport aux étapes sans RadzenColumn (ex: étape 3, un seul champ
       pleine largeur par écran). On force donc ici 100% sur toute colonne Radzen à l'intérieur
       d'une fenêtre, quelle que soit la taille demandée par le composant - !important nécessaire
       pour l'emporter sur les classes de thème, non scopées par média elles non plus. */
    .rz-dialog [class*="rz-col-sm-"],
    .rz-dialog [class*="rz-col-md-"],
    .rz-dialog [class*="rz-col-lg-"],
    .rz-dialog [class*="rz-col-xl-"] {
        max-width: 100% !important;
        flex-basis: 100% !important;
    }

    /* Boutons d'action de l'assistant (PRÉCÉDENT/SUIVANT/TERMINER de NouvelleCelebrationAssistant.razor,
       NOUVEAU/SÉLECTIONNER/AUCUN de SelectionnerChantPriereDialog.razor) : fixés en bas de l'écran
       plutôt que de défiler avec le contenu - une page avec beaucoup de contenu (couplets d'un
       chant, par exemple) obligeait sinon à tout faire défiler pour les atteindre. Règle globale
       (pas ::deep) : s'applique à .lx-wizard-footer quel que soit le composant qui le porte.
       position:sticky se cale sur le bord bas du plus proche ancêtre défilant, ici
       .rz-dialog-content (overflow-y:auto ci-dessus). */
    .lx-wizard-footer {
        position: sticky;
        bottom: 0;
        /* !important nécessaire : Class="rz-mt-4 lx-wizard-footer" porte aussi l'utilitaire Radzen
           .rz-mt-4 (margin-top:1rem !important) sur le même élément - sans !important ici,
           margin-top:auto ne l'emportait jamais (constaté en test : pied de page resté juste après
           le contenu au lieu d'être poussé en bas). */
        margin-top: auto !important;
        flex-shrink: 0;
        background: var(--rz-base-background-color, #fff);
        margin-left: calc(-1 * var(--rz-dialog-content-padding, 1.5rem));
        margin-right: calc(-1 * var(--rz-dialog-content-padding, 1.5rem));
        margin-bottom: calc(-1 * var(--rz-dialog-content-padding, 1.5rem));
        padding-left: var(--rz-dialog-content-padding, 1.5rem);
        padding-right: var(--rz-dialog-content-padding, 1.5rem);
        padding-top: 0.75rem;
        /* 1.5rem (et non 0.75rem) sous les boutons : légèrement remontés, à la demande de
           l'utilisateur, pour ne pas coller au bord bas de l'écran/à la barre du navigateur. */
        padding-bottom: calc(1.5rem + var(--rz-dialog-content-padding, 1.5rem));
        box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
        z-index: 2;
    }

    /* ── Sélecteur de chant/prière (PageTexteChampsEditeur.razor) : "fausse combo" ancrée sous le
       champ sur desktop -> plein écran sur mobile (voir aussi le bouton de fermeture ajouté dans
       PageTexteChampsEditeur.razor et les styles internes dans SelectionnerChantPriereDialog.razor.css). ── */
    .lx-popup-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        inset: 0 !important;
        width: 100vw !important;
        /* dvh : voir .rz-dialog-wrapper ci-dessus (barre d'outils du bas du navigateur). */
        height: 100vh !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
        z-index: 1400 !important;
        box-sizing: border-box;
    }

    /* ── En-tête / menu latéral (ParoisseNav.razor) ──────────────────────────
       Nom de l'application (en-tête + sidebar), paroisse active et utilisateur connecté : masqués
       visuellement pour ne garder que les icônes - texte conservé pour les lecteurs d'écran
       (technique "sr-only", pas display:none). Desktop inchangé (hors media query).
       Les libellés des ÉLÉMENTS DE NAVIGATION (Cérémonies/Textes et Chants/Configuration/...) ne
       sont PAS masqués ici : un premier essai en icônes seules s'est avéré peu utilisable en test
       réel (retour utilisateur) - conservés visibles, comme sur desktop. */
    .lx-app-name,
    .rz-header .rz-ms-1 {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    /* Menu latéral replié par défaut (voir ParoisseNav.razor, sidebarExpanded) : quand ouvert, il
       se superpose au contenu (plutôt que de partager la largeur, comme sur desktop) et se referme
       automatiquement après sélection d'un élément. Démarre SOUS l'en-tête (top: hauteur d'en-tête)
       plutôt qu'à 0 : sinon il recouvre le bouton hamburger lui-même, qui devient alors impossible
       à ré-atteindre pour refermer le menu (constaté en usage réel - --rz-header-min-height est la
       variable Radzen officielle pour cette hauteur, 3.125rem par défaut). */
    .rz-sidebar.rz-sidebar-expanded {
        position: fixed !important;
        top: var(--rz-header-min-height, 3.125rem);
        bottom: 0;
        left: 0;
        width: min(78vw, 280px) !important;
        opacity: 1 !important;
        z-index: 1300;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .35);
    }

    /* Toile de fond assombrissant le contenu pendant que le menu est ouvert (voir le
       <div class="lx-sidebar-backdrop"> ajouté dans ParoisseNav.razor) - même raison que ci-dessus :
       s'arrête sous l'en-tête pour ne jamais couvrir le bouton hamburger. */
    .lx-sidebar-backdrop {
        position: fixed;
        top: var(--rz-header-min-height, 3.125rem);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .4);
        z-index: 1290;
    }

    /* ── Listes mobiles (ListItem / CardItem / SwipeItem / squelettes) ──────────────────────────
       Système partagé par les composants Components\Shared\ListItem.razor, CardItem.razor,
       SwipeItem.razor et SkeletonList.razor - voir docs/adr/0001-systeme-listes-mobiles.md
       pour les décisions de design (tailles de cibles tactiles, timing d'animation). Ces
       composants ne sont utilisés que dans des branches de rendu conditionnées par le cookie
       "lx-mobile" (même mécanisme que sidebarExpanded dans ParoisseNav.razor) : leurs classes ne
       peuvent donc pas apparaître au-dessus de 768px, mais elles restent volontairement stylées
       ici, sous la media query, en cohérence avec le reste de ce fichier. */

    .lx-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .lx-list-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-height: 56px;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--rz-border-disabled-color);
        background: var(--rz-base-background-color, #fff);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 150ms ease;
    }

    /* Retour tactile immédiat au tap (contrainte "Feedback immédiat"). */
    .lx-list-item:active {
        background-color: var(--rz-primary-lighter);
    }

    /* Variante dense (longues listes) : reste au-dessus du minimum tactile de 48px, juste avec un
       padding réduit plutôt qu'une hauteur inférieure au seuil recommandé. */
    .lx-list-item--dense {
        min-height: 48px;
        padding: 0.5rem 1rem;
        gap: 0.625rem;
    }

    .lx-list-item__leading {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        color: var(--rz-text-secondary-color);
    }

    .lx-list-item__body {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Titre sur 1 ligne max (contrainte "Titre sur 1 ligne max"). */
    .lx-list-item__title {
        display: block;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Texte secondaire de niveau 2 (contrainte "texte secondaire en niveau 2"). */
    .lx-list-item__subtitle {
        display: block;
        font-size: 0.8125rem;
        color: var(--rz-text-secondary-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lx-list-item__trailing {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        color: var(--rz-text-secondary-color);
    }

    /* Grille de cards (ex. Images.razor) : remplace un flex-wrap à largeur fixe pensé pour desktop
       par une grille qui se répartit sur la largeur de l'écran, quelle que soit sa taille. */
    .lx-card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.75rem;
    }

    .lx-card-item {
        display: flex;
        flex-direction: column;
        border-radius: var(--rz-border-radius, 10px);
        overflow: hidden;
        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-card-item:active {
        transform: scale(0.98);
    }

    .lx-card-item__image {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        display: block;
    }

    .lx-card-item__body {
        padding: 0.625rem 0.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .lx-card-item__title {
        font-weight: 500;
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lx-card-item__subtitle {
        display: block;
        font-size: 0.75rem;
        color: var(--rz-text-secondary-color);
    }

    /* ── Squelettes de chargement (shimmer, contrainte "Skeleton loader pendant le chargement") ── */
    @keyframes lx-shimmer {
        0% { background-position: -200px 0; }
        100% { background-position: calc(200px + 100%) 0; }
    }

    .lx-skeleton {
        background-color: var(--rz-border-disabled-color);
        background-image: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, .5) 50%, transparent 75%);
        background-size: 200px 100%;
        background-repeat: no-repeat;
        animation: lx-shimmer 1.4s ease infinite;
        border-radius: 4px;
    }

    .lx-skeleton-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-height: 56px;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--rz-border-disabled-color);
    }

    .lx-skeleton-item__text {
        flex: 1 1 auto;
        height: 0.9rem;
    }

    /* ── Actions au balayage (swipe), contrainte "Actions secondaires = swipe" ──
       Structure attendue par window.lxSwipe (wwwroot/js/site.js) : un .lx-swipe-item contenant un
       .lx-swipe-item__content (le LxListItem/LxCardItem affiché) par-dessus un ou deux
       .lx-swipe-item__actions (révélés en glissant le contenu). */
    .lx-swipe-item {
        position: relative;
        overflow: hidden;
        touch-action: pan-y;
    }

    .lx-swipe-item__content {
        position: relative;
        z-index: 1;
        background: var(--rz-base-background-color, #fff);
        transition: transform 180ms ease;
        will-change: transform;
    }

    .lx-swipe-item__actions {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: stretch;
        z-index: 0;
    }

    .lx-swipe-item__actions--end {
        justify-content: flex-end;
    }

    .lx-swipe-item__actions--start {
        justify-content: flex-start;
    }

    .lx-swipe-action {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.125rem;
        width: 4.5rem;
        border: none;
        color: #fff;
        font-size: 0.6875rem;
        -webkit-tap-highlight-color: transparent;
    }

    .lx-swipe-action--danger {
        background: var(--rz-danger);
    }

    .lx-swipe-action--warning {
        background: var(--rz-warning);
    }

    .lx-swipe-action--primary {
        background: var(--rz-primary);
    }

    /* ── Filtres repliables (Celebrations.razor, ChantsPrieres.razor, Admin/Sessions.razor,
       Admin/Journaux.razor) ──────────────────────────────────────────────────
       Par défaut sur mobile, seul "Recherche dans la liste" reste visible ; les autres filtres de
       la même RadzenCard (Lieu/Du/Au, Type/Version/Textes, Connexion du/au,
       Paroisse/Catégorie/Type/Événements du/au...) se déplient via l'icône .lx-filtres-toggle
       ("tune"/"expand_less" selon l'état, piloté par le booléen local filtresEtendus de chaque
       page). Desktop inchangé : le bouton reste masqué (display:none posé en inline sur l'élément,
       voir chaque .razor) et .lx-filtres-extra garde son display:contents inline - les champs qu'il
       enveloppe restent alors des flex items directs de la RadzenStack parente, exactement comme
       avant l'ajout de ce wrapper.
       !important nécessaire ci-dessous : un style inline (display:none/display:contents posé
       directement sur l'élément dans le balisage) a une priorité plus forte que n'importe quelle
       règle de feuille de style externe, y compris sous ce media query - sans !important, ces
       règles ne s'appliqueraient jamais (même piège documenté pour .lx-statut-cell .rz-cell-data
       dans wwwroot/app.css).
       L'ordre visuel "Recherche" puis icône puis reste est obtenu par flex "order" plutôt qu'en
       réorganisant le balisage de chaque page, pour ne rien changer à l'ordre desktop existant (ex:
       Admin/Sessions.razor et Admin/Journaux.razor affichent "Recherche" en dernier dans le DOM). */
    /* min-width:0 !important nécessaire : ChantsPrieres.razor/Celebrations.razor posent un style
       inline "min-width:220px" sur ce champ (pour garder une largeur confortable en desktop) - sur
       un petit écran, ce plancher empêchait le champ de rétrécir suffisamment pour laisser de la
       place au bouton .lx-filtres-toggle sur la même ligne, qui retombait alors seul en dessous
       (constaté en test réel sur "Textes et chants"). Un style inline l'emportant toujours sur une
       règle de feuille externe (même sous media query), !important est requis pour le contourner. */
    .lx-filtre-recherche {
        order: -2;
        flex: 1 1 140px;
        min-width: 0 !important;
    }

    .lx-filtres-toggle {
        display: inline-flex !important;
        order: -1;
    }

    .lx-filtres-extra {
        display: none !important;
    }

    .lx-filtres-extra--ouvert {
        display: contents !important;
    }
}