html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.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. / An error has occurred."
}

/* ── Mobile responsiveness ── */
@media (max-width: 600px) {
    /* Stack toolbar button groups vertically on phone */
    .mobile-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .mobile-toolbar > * {
        width: 100%;
    }

    /* Make buttons full-width on mobile */
    .mobile-toolbar .mud-button-root {
        width: 100%;
        justify-content: center;
    }

    /* Stack button groups */
    .mobile-btn-group {
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .mobile-btn-group .mud-button-root {
        width: 100%;
        justify-content: center;
    }

    /* Chip sets should wrap */
    .mud-chipset {
        flex-wrap: wrap !important;
    }

    /* Reduce page title size */
    .mud-typography-h4 {
        font-size: 1.5rem !important;
    }

    /* Tables should scroll horizontally */
    .mud-table {
        overflow-x: auto;
    }

    /* Pagination spacing */
    .mud-pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ── Telephone couche : on garde une colonne de largeur portrait ──

   Safari sur iPhone ne laisse aucune page verrouiller l'orientation : impossible
   d'empecher la rotation. Ce qu'on peut faire, c'est que le contenu ne s'etale pas —
   il reste dans une colonne centree de largeur portrait, si bien que la lecture ne
   change pas quand l'appareil tourne.

   Vise les ecrans BAS en paysage, donc les telephones : une tablette ou un portable
   garde sa pleine largeur. */
@media (max-height: 500px) and (orientation: landscape) {
    .mud-main-content > .mud-container,
    .mud-main-content > div > .mud-container {
        max-width: 430px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Selecteur « ajouter un critere » de la barre de tri.

   Un select natif : sur iPhone, iOS l'ouvre avec sa propre roulette, ce qui evite
   d'inventer une commande a nous. Il est habille pour se fondre parmi les pastilles
   des criteres actifs, sans chercher a leur ressembler — il ne represente pas un
   critere, il en propose. */
.sort-add {
    appearance: none;
    -webkit-appearance: none;
    max-width: 100%;
    padding: 7px 30px 7px 14px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.85rem;
    font-family: inherit;
    line-height: 1.5;
    min-height: 34px;
    cursor: pointer;
    /* Le chevron est dessine ici : le retirer avec appearance:none le supprime aussi. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 13px 13px;
}
.sort-add:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* ══════════ Boite de reception ══════════

   Ces regles vivaient dans un bloc <style> en fin de page. Elles s'appliquaient sur
   ordinateur et pas sur iPhone, sans que rien dans le code ne les distingue. Ici elles
   sont chargees dans l'en-tete, avec une empreinte qui change a chaque modification :
   un maillon de moins entre ce qui est ecrit et ce qui s'affiche. */
    /* La croix et le voile n'existent que sur telephone : sur grand ecran la liste et le
       fil sont cote a cote, il n'y a rien a refermer. */
    .inbox-close { display: none; }
    .inbox-backdrop { display: none; }

    @media (max-width: 959px) {
        /* Le volet de droite ne sert que lorsqu une conversation est ouverte : il devient
           alors le panneau. Vide, il trainait sous la liste avec son « Selectionnez une
           conversation », invitation a faire ce qu on venait de faire. */
        .inbox-thread:not(.inbox-thread-open) { display: none; }

        /* Le titre de la page redit ce que le menu indique deja, pour une ligne entiere. */
        .inbox-page-title { display: none !important; }

        /* svh et non dvh : dvh mesure l ecran barres du navigateur RETRACTEES, donc plus
           haut que ce qu on voit — la liste passait sous la barre d adresse de Safari. */
        .inbox-list-paper {
            max-height: calc(100vh - 50px) !important;
            height: calc(100vh - 50px) !important;
            max-height: calc(100svh - 50px) !important;
            height: calc(100svh - 50px) !important;
        }

        /* Sans min-height:0, une zone defilante dans une colonne flex prend la hauteur de
           son contenu au lieu de celle du cadre, et deborde par le bas. */
        .inbox-list-scroll { min-height: 0 !important; }

        /* ── Le panneau de conversation ── */
        .inbox-close { display: inline-flex; }

        .inbox-backdrop {
            display: block;
            position: fixed;
            inset: 0;
            z-index: 1240;
            background: rgba(0, 0, 0, 0.5);
        }

        /* Ancre en haut et en bas plutot qu une hauteur calculee : aucune unite de
           hauteur ne peut alors se tromper sur la taille reelle de l ecran. */
        .inbox-thread-open {
            position: fixed;
            top: 50px;
            /* Hauteur en svh plutot qu un ancrage a bottom:0 : sur iOS, le bas de la
               zone de mise en page passe SOUS la barre d adresse de Safari, et le
               panneau paraissait trop long. svh mesure la vue barres affichees. */
            bottom: auto;
            height: calc(100vh - 58px);
            height: calc(100svh - 58px);
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 24px);
            max-width: 560px;
            z-index: 1250;
            padding: 0 !important;
            overflow: hidden;
        }

        /* !important : le panneau porte height:75vh en style EN LIGNE, et un style en
           ligne l emporte sur toute regle de feuille. */
        .inbox-thread-open .inbox-thread-paper {
            height: 100% !important;
            min-height: 0 !important;
            border-radius: 12px 12px 0 0;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
        }

        /* En-tete et pied resserres : pres de 170px de decor sur un ecran de telephone,
           pris sur la place des messages. */
        .inbox-thread-open .thread-head { padding: 8px 12px !important; }
        .inbox-thread-open .thread-head .mud-avatar { width: 34px; height: 34px; font-size: .8rem; }
        .inbox-thread-open .thread-head .mud-typography-h6 { font-size: 1rem; line-height: 1.3; }
        .inbox-thread-open .thread-body { padding: 10px 12px !important; }
        .inbox-thread-open .thread-foot { padding: 8px 10px !important; }
    }

    /* Deux colonnes sur un ecran BAS — un portable a faible resolution. Les volets
       portent 75vh en style en ligne, ce qui devient tres court quand la fenetre l'est :
       ils prennent alors la hauteur reellement disponible. */
    @media (min-width: 960px) and (max-height: 600px) {
        .inbox-list-paper,
        .inbox-thread-paper {
            height: calc(100dvh - var(--mud-appbar-height, 64px) - 28px) !important;
            max-height: calc(100dvh - var(--mud-appbar-height, 64px) - 28px) !important;
            min-height: 0 !important;
        }
    }

    /* Fiches pliees : seul le nom reste, partout et pas seulement sur telephone.

       La regle etait d'abord conditionnee a la largeur de l'ecran, et le chevron ne
       paraissait pas — sans pouvoir observer la page, je ne sais pas lequel des trois
       maillons cedait. Une regle sans condition n'en a plus qu'un.

       La colonne des conversations est etroite meme sur un grand ecran : y montrer le
       nom seul, et le reste a la demande, ne perd rien. */
    .conv-toggle {
        display: inline-flex;
        align-items: center;
        padding: 4px;
        cursor: pointer;
        transition: transform 0.2s;
    }
    .conv-row.conv-open .conv-toggle { transform: rotate(180deg); }
    .conv-row:not(.conv-open) .conv-details { display: none; }