/*
 * UI mobile Blazor (Renta.Immo.Blazor.Mobile).
 * Tout est scopé sous .m-app et préfixé m- : aucune règle ne doit fuiter vers l'UI desktop,
 * et les règles globales du host (app.css, Tailwind) ne doivent pas être supposées.
 * Couleurs : variables tenant (--tenant-*) posées par le host, avec valeurs de repli.
 * Palette alignée sur l'app MAUI (Resources/Styles/Colors.xaml) : Primary #185a9d, Secondary #43cea2,
 * LightGray #ebedee (fond), Gray200 #c8c8c8 (bordures), BrightBrush = dégradé vertical Primary → Secondary.
 * Police : Manrope, comme l'app MAUI (MauiProgram.ConfigureFonts), embarquée dans la RCL (fonts/).
 */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/Manrope-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/Manrope-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/Manrope-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/Manrope-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/Manrope-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('fonts/Manrope-ExtraBold.ttf') format('truetype');
}

.m-app {
    --m-primary: var(--tenant-primary, #185a9d);
    --m-secondary: var(--tenant-secondary, #43cea2);
    /* Green600 MAUI (Colors.xaml) : vert foncé de l'app pour les valeurs positives (texte, graphiques). */
    --m-positive: #059669;
    /* Ternary MAUI : négatif, actions destructives. */
    --m-negative: #de6262;
    /* MontantToColorConverter MAUI : vert clair des pastilles de flux (FluxView), exception à --m-positive. */
    --m-flux-positive: #74C365;
    /* BrightBrush MAUI : StartPoint 0.5,0 → EndPoint 0.5,0.8. */
    --m-bright-brush: linear-gradient(180deg, var(--m-primary) 0%, var(--m-secondary) 80%);
    /* DiagonalBrush MAUI : Primary jusqu'à 80 %, Secondary dans le coin bas-droit. */
    --m-diagonal-brush: linear-gradient(to bottom right, var(--m-primary) 0%, var(--m-primary) 80%, var(--m-secondary) 100%);
    --m-background: #ebedee;
    --m-surface: #ffffff;
    --m-border: #c8c8c8;
    /* Texte principal : gris ardoise (ni noir ni quasi-noir, trop contrastés à côté des libellés gris), légèrement bleuté
     * pour s'accorder au Primary. Contraste 6,5:1 sur blanc (AA). */
    --m-text: #545b66;
    --m-text-muted: #808080;
    --m-radius: 10px;
    /* Icônes métier (Components/Icons) : trait bleu encre, détails et aplat dorés ; or clair sur fond sombre. */
    --m-icon-ink: #24476e;
    --m-icon-gold: #b08a4e;
    --m-icon-gold-on-dark: #e6c891;
    /* Pastille derrière une icône métier (menu, listes, paywall). */
    --m-icon-chip: #f5f1e9;
    --m-safe-top: env(safe-area-inset-top, 0px);
    --m-safe-bottom: env(safe-area-inset-bottom, 0px);

    position: fixed;
    inset: 0;
    overflow: hidden;
    background: var(--m-background);
    color: var(--m-text);
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* Hôte des sheets seul, par-dessus un écran desktop de repli : ne couvre rien hors des sheets. */
.m-app--overlay {
    position: static;
    inset: auto;
    overflow: visible;
    background: none;
}

.m-app *,
.m-app *::before,
.m-app *::after {
    box-sizing: border-box;
}

/* ── Pile de pages : chaque page est son propre conteneur de scroll ── */

.m-page {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--m-background);
}

/* visibility (et non display) : la position de scroll de la page recouverte est conservée. */
.m-page--covered {
    visibility: hidden;
    pointer-events: none;
}

/* ── Bottom sheets ── */

.m-sheet-layer {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Au-dessus des modales de repli du host (ModalHost desktop, z-index 1000). */
.m-sheet-layer--above-host {
    z-index: 1100;
}

.m-sheet-scrim {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    animation: m-fade-in 0.2s ease-out;
}

.m-sheet-scrim--covered {
    background: transparent;
}

.m-sheet {
    position: relative;
    max-height: calc(100dvh - var(--m-safe-top) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--m-surface);
    border-radius: 18px 18px 0 0;
    padding: 8px 16px calc(16px + var(--m-safe-bottom));
    box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.18);
    animation: m-slide-up 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.m-sheet--full {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--m-safe-top) - 24px);
    overflow: hidden;
}

.m-sheet-grabber {
    width: 40px;
    height: 5px;
    margin: 0 auto 12px;
    border-radius: 3px;
    background: #d1d5db;
}

@keyframes m-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes m-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .m-sheet,
    .m-sheet-scrim {
        animation: none;
    }
}

/* ── Éléments de base ── */

.m-app button {
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.m-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.m-icon-button:active {
    background: rgba(255, 255, 255, 0.2);
}

.m-muted {
    color: var(--m-text-muted);
    font-size: 14px;
}

.m-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ═══════════════ Simulation (accueil) ═══════════════
 * Repli du header piloté par --m-scroll-progress (0 → 1, js/simulationScroll.js).
 * Seules opacity/transform sont animées : aucun recalcul de layout pendant le scroll.
 */

/* Rebond iOS en haut de page : Primary derrière le toolbar (ScrollView MAUI BackgroundColor=Primary).
 * Simulation chargée seulement : pendant le chargement, .m-sim ne couvre pas la page (.m-home n'a pas de hauteur,
 * son min-height ne s'applique pas) et la moitié Primary apparaissait sous le squelette. */
.m-page:has(.m-sim-header) {
    background: linear-gradient(var(--m-primary) 0 50%, var(--m-background) 50% 100%);
}

.m-sim {
    min-height: 100%;
    background: var(--m-background);
    --m-scroll-progress: 0;
    /* Valeurs par défaut avant la première mesure (simulationScroll.js), proches du rendu réel. */
    --m-collapse-distance: 182px;
    --m-header-height: calc(238px + var(--m-safe-top));
    --m-compact-height: calc(56px + var(--m-safe-top));
}

/* Le header ne défile pas : collé en haut, à la hauteur du bandeau ; sa partie dépliée déborde dessous et
 * l'espaceur qui le suit lui réserve la place. Tout son contenu est positionné par --m-scroll-progress seul. */
.m-sim-header {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--m-compact-height);
}

.m-sim-header-spacer {
    height: var(--m-collapse-distance);
}

/* Fond gris de la partie dépliée : couvre le contenu qui passe dessous et remonte avec le repli (son bas suit le
 * haut du contenu). Absorbe les touchers pour ne pas atteindre un champ masqué. */
.m-sim-sheet {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: var(--m-header-height);
    background: var(--m-background);
    transform: translateY(calc(var(--m-scroll-progress) * -1 * var(--m-collapse-distance)));
}

/* Partie dépliée (toolbar + récap) : transparente aux touchers, sauf ses commandes. */
.m-sim-expanded {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    pointer-events: none;
}

.m-sim-name,
.m-sim-actions,
.m-recap-card,
.m-recap-prediction {
    pointer-events: auto;
}

.m-sim.m-sim--morphing .m-sim-name,
.m-sim.m-sim--morphing .m-recap-card,
.m-sim.m-sim--morphing .m-recap-prediction {
    pointer-events: none;
}

/* PageWavedToolbarControlTemplate MAUI : forme vague + BrightBrush, dessinés par .m-sim-band. */
.m-sim-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: calc(14px + var(--m-safe-top)) 8px 38px 20px;
    color: #fff;
}

.m-sim-toolbar > .m-sim-name {
    position: relative;
    z-index: 1;
}

/* Au-dessus du fond de carte étiré dans le bandeau. */
.m-sim-toolbar > .m-sim-actions {
    position: relative;
    z-index: 3;
}

/* Fond de la toolbar, tassé jusqu'à la hauteur du bandeau ; la « langue » de la vague s'écrase en même temps :
 * le bord devient droit. --m-band-shrink (posé par le script) = 1 - hauteur du bandeau / hauteur du rectangle plat. */
.m-sim-band {
    position: absolute;
    inset: 0;
    transform: scaleY(calc(1 - var(--m-scroll-progress) * var(--m-band-shrink, 0)));
    transform-origin: top;
    /* Entièrement couvert par le fond de carte en fin de repli : masqué sur les derniers 2,5 %, sinon un liseré
     * (recouvrement de 1px, arrondis) dépasse sous le bandeau. */
    opacity: calc((1 - var(--m-scroll-progress)) * 40);
    pointer-events: none;
}

/* 128 / 171.2 du viewBox d'origine pour le rectangle plat, le reste pour la langue (1px de recouvrement). */
.m-sim-band-flat,
.m-sim-band-lip {
    position: absolute;
    left: 0;
    width: 100%;
}

.m-sim-band-flat {
    top: 0;
    height: calc(74.77% + 1px);
}

.m-sim-band-lip {
    top: 74.77%;
    height: 25.23%;
    transform: scaleY(calc(1 - var(--m-scroll-progress)));
    transform-origin: top;
}

/* Ombre du bandeau, en fin de repli. */
.m-sim-band-shadow {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: var(--m-compact-height);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
    opacity: calc((var(--m-scroll-progress) - 0.6) * 2.5);
    pointer-events: none;
}

.m-sim-toolbar-edge {
    fill: none;
    stroke: #6e6e6e;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.m-stop-primary {
    stop-color: var(--m-primary);
}

.m-stop-secondary {
    stop-color: var(--m-secondary);
}

.m-sim-toolbar > .m-sim-name {
    opacity: calc(1 - var(--m-scroll-progress) * 2.5);
}

/* Les actions restent les mêmes boutons : elles descendent se centrer dans le bandeau (--m-actions-dy, mesuré). */
.m-sim-toolbar > .m-sim-actions {
    transform: translateY(calc(var(--m-scroll-progress) * var(--m-actions-dy, 0px)));
}

/* Mesures du repli (simulationScroll.js) : positions sans les transformations en cours. */
.m-sim--measuring .m-sim-toolbar > .m-sim-actions,
.m-sim--measuring .m-recap-card,
.m-sim--measuring .m-recap-shell,
.m-sim--measuring .m-recap-amount {
    transform: none !important;
    clip-path: none !important;
}

.m-sim-name {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 8px 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.m-sim-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-sim-name-icon {
    flex-shrink: 0;
    font-size: 18px;
    opacity: 0.8;
}

.m-sim-actions {
    display: flex;
    flex-shrink: 0;
}

/* ── Récap ── */

.m-sim-recap {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 8px;
    padding: 10px;
}

/* Fond de la carte bleue du récap : Border MAUI (Primary, rayon 10) + décor BlueShadesBackground reproduit à
 * l'identique par RecapShades.razor (zone de 100px de haut centrée, opacité 0.8). Toute la largeur du header,
 * recadré sur la carte au repos ; au repli, il rejoint le bandeau et le recadrage s'ouvre jusqu'à le couvrir,
 * coins redevenus droits. Insets et décalage posés par le script (valeurs par défaut = disposition au repos). */
.m-recap-shell {
    position: absolute;
    top: 10px;
    right: 0;
    left: 0;
    height: max(calc(100% - 20px), var(--m-compact-height));
    /* Le clip-path ne rogne que l'affichage : sans overflow, les tracés décalés du décor (TranslationX MAUI)
     * élargissaient la page (défilement horizontal). */
    overflow: hidden;
    background: var(--m-primary);
    transform: translateY(calc(var(--m-scroll-progress) * var(--m-shell-dy, 0px)));
    clip-path: inset(0
        calc((1 - var(--m-scroll-progress)) * var(--m-shell-r0, 122px))
        calc(var(--m-shell-b0, 0px) + var(--m-scroll-progress) * (var(--m-shell-b1, 0px) - var(--m-shell-b0, 0px)))
        calc((1 - var(--m-scroll-progress)) * var(--m-shell-l0, 10px))
        round calc((1 - var(--m-scroll-progress)) * var(--m-radius)));
    pointer-events: none;
}

/* Décor placé comme dans la carte (padding 10 + bordure 1) ; au repli, il suit le bord droit du bandeau. */
.m-recap-shell > .m-recap-shades {
    top: 11px;
    right: calc(var(--m-shell-r0, 122px) + 11px);
    left: calc(var(--m-shell-l0, 10px) + 11px);
    margin-top: 0;
    transform: translate(calc(var(--m-scroll-progress) * var(--m-shades-dx, 0px)),
        calc(var(--m-scroll-progress) * var(--m-shades-dy, 0px)));
}

.m-recap-shades {
    position: absolute;
    top: 50%;
    right: var(--m-recap-padding);
    left: var(--m-recap-padding);
    height: 100px;
    margin-top: -50px;
    opacity: 0.8;
    pointer-events: none;
}

/* Vue du Path : StrokeThickness 1 par défaut, la zone d'étirement est rognée d'un demi-pixel. */
.m-recap-shade {
    position: absolute;
    top: 0.5px;
    left: 0.5px;
    width: calc(100% - 1px);
    height: calc(100% - 1px);
    overflow: hidden;
}

/* Contenu de la carte (le fond est .m-recap-shell, dessous). Au repli, il rejoint le bandeau (décalage posé par le
 * script) : seule la valeur y reste visible. */
.m-recap-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 122px;
    overflow: hidden;
    color: #fff;
    transform: translate(calc(var(--m-scroll-progress) * var(--m-card-dx, 0px)),
        calc(var(--m-scroll-progress) * var(--m-card-dy, 0px)));
}

/* Piste balayable de la carte : un indicateur par page, un seul par geste. */
.m-recap-track {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.m-recap-track::-webkit-scrollbar {
    display: none;
}

.m-recap-track {
    flex: 1;
}

/* VerticalAmountView MAUI : nom + valeur centrés ; toucher = évolution de l'indicateur. */
.m-recap-slide {
    display: flex;
    flex: 0 0 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 8px 16px 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.m-recap-slide:active {
    opacity: 0.75;
}

.m-recap-name {
    opacity: calc(1 - var(--m-scroll-progress) * 3);
    max-width: 100%;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Repli : la valeur de l'indicateur affiché glisse et réduit jusqu'à celle du bandeau (transform posé par le
 * script), puis s'efface sous elle. */
.m-recap-amount {
    margin-top: 2px;
    opacity: calc((1 - var(--m-scroll-progress)) * 6.67);
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* « Soit x par mois » (flux) ou « Année 2 » (rendements). */
.m-recap-dots {
    opacity: calc(1 - var(--m-scroll-progress) * 3.3);
}

.m-recap-sub {
    max-width: 100%;
    overflow: hidden;
    font-size: 13px;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    opacity: calc(0.85 - var(--m-scroll-progress) * 2.8);
    white-space: nowrap;
}

/* Indicateurs de page, touchables. */
.m-recap-dots {
    display: flex;
    justify-content: center;
    padding: 2px 0 4px;
}

.m-app .m-recap-dot {
    position: relative;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.m-recap-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: background 0.2s, transform 0.2s;
}

.m-recap-dot--active::after {
    background: #fff;
    transform: scale(1.25);
}

/* Prévisionnel : tuile DiagonalBrush à droite de la carte (accueil déplié), courbe dorée tracée à l'arrivée.
 * Header replié, il passe dans la barre d'actions du bas (.m-fab-prediction). */
.m-app .m-recap-prediction {
    position: relative;
    z-index: 1;
    opacity: calc(1 - var(--m-scroll-progress) * 2.5);
    /* Remonte comme si le header défilait, en s'effaçant. */
    transform: translateY(calc(var(--m-scroll-progress) * -1 * var(--m-collapse-distance)))
        scale(calc(1 - var(--m-scroll-progress) * 0.1));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 10px 8px 14px;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    background: var(--m-diagonal-brush);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

.m-recap-prediction:active {
    opacity: 0.75;
}

.m-recap-prediction-curve {
    flex-shrink: 0;
    width: 34px;
    height: 20px;
}

.m-recap-prediction .m-recap-prediction-curve {
    width: 100%;
    height: 34px;
}

.m-recap-prediction-curve path {
    fill: none;
    stroke: #d4af37;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
}

/* Tracée à l'arrivée dans la tuile, et à chaque apparition du bouton du bas. */
.m-recap-prediction .m-recap-prediction-curve path,
.m-home:has(.m-sim--collapsed) .m-fab-prediction .m-recap-prediction-curve path {
    animation: m-curve-draw 1.2s ease-out 0.2s forwards;
}

@keyframes m-curve-draw {
    to { stroke-dashoffset: 0; }
}

/* ── Bandeau replié ── */

/* Zone du bandeau (le header lui-même). Transparente : le fond est celui de la carte, étiré dessous. */
.m-sim-compact {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    height: var(--m-compact-height);
    pointer-events: none;
}

/* Libellé + valeur empilés comme dans la carte ; cible des mesures du repli. Son texte apparaît en fin de repli,
 * quand la valeur de la carte s'y superpose. */
.m-app .m-sim-chip {
    position: absolute;
    top: calc(var(--m-safe-top) + 6px);
    left: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 44px;
    max-width: calc(100% - 120px);
    padding: 0 12px;
    border: 0;
    background: none;
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.m-sim--collapsed .m-sim-chip {
    pointer-events: auto;
}

.m-sim-chip:active {
    opacity: 0.75;
}

.m-sim-chip-label {
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 12px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: calc((var(--m-scroll-progress) - 0.85) * 6.67 * 0.85);
}

.m-sim-chip-value {
    white-space: nowrap;
}

.m-sim-chip-amount {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    opacity: calc((var(--m-scroll-progress) - 0.85) * 6.67);
}

.m-sim-chip-suffix {
    margin-left: 1px;
    font-size: 13px;
    font-weight: 700;
    opacity: calc((var(--m-scroll-progress) - 0.8) * 5);
}

/* ── Onglets ── */

.m-sim-tabs {
    position: sticky;
    top: var(--m-compact-height);
    z-index: 15;
    background: var(--m-background);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}

.m-sim-tabs-track {
    display: flex;
    gap: 0;
    padding: 4px 4px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.m-sim-tabs-track::-webkit-scrollbar {
    display: none;
}

/* Onglets (variante B, revue du 2026-10-04) : icône + libellé en capitales espacées (TabTitleStyle MAUI). Inactifs
 * entièrement gris (icône comprise) ; l'actif passe en encre et or, libellé Primary gras, sans fond ni soulignement.
 * Préfixés par .m-sim-tabs : plus spécifique que « .m-app button { font: inherit } ». */
.m-sim-tabs .m-sim-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--m-text-muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s;
}

/* Icône d'un onglet inactif : grise, détails et aplat compris. */
.m-sim-tab:not(.m-sim-tab--active) .m-icon {
    color: #9aa0a8;
}

.m-sim-tab:not(.m-sim-tab--active) .m-icon-k {
    stroke: #9aa0a8;
}

.m-sim-tab:not(.m-sim-tab--active) .m-icon-a {
    fill: #9aa0a8;
    fill-opacity: 0.16;
}

.m-sim-tabs .m-sim-tab--active {
    color: var(--m-primary);
    font-weight: 700;
}

/* ── Sections / blocs ── */

.m-sim-sections {
    padding: 10px 10px calc(24px + var(--m-safe-bottom));
}

/* Pas de titre visible entre les blocs (onglets) : l'espace et les bords des cartes les séparent. */
.m-sim-section {
    position: relative;
    margin-bottom: 14px;
}

/* BlocControlTemplate MAUI : Border blanc, contour Gray200, rayon 10, padding 20. */
.m-bloc {
    padding: 20px;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    background: var(--m-surface);
}

.m-bloc-title {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
}

.m-sim-section-title {
    margin: 6px 4px 8px;
    color: var(--m-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ═══════════════ Pages secondaires ═══════════════ */

.m-subpage {
    min-height: 100%;
    background: var(--m-background);
}

/* PageToolbarControlTemplate MAUI : BrightBrush, retour + titre. */
.m-subpage-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: calc(56px + var(--m-safe-top));
    padding: var(--m-safe-top) 16px 0 4px;
    background: var(--m-bright-brush);
    color: #fff;
}

.m-subpage-title {
    overflow: hidden;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-subpage-body {
    padding: 10px 10px calc(24px + var(--m-safe-bottom));
}

/* Visionneuse PDF (PdfViewerPage) : page à hauteur fixe, c'est le document qui défile dans la visionneuse. */
.m-pdf-page {
    height: 100%;
}

.m-pdf-page .m-subpage {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.m-pdf-page .m-subpage-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 0 var(--m-safe-bottom);
    background: #e8ebef;
}

.m-subpage-body .m-bloc + .m-bloc {
    margin-top: 10px;
}

.m-subpage-body .m-sim-section-title {
    margin-top: 16px;
}

/* ═══════════════ Formulaires ═══════════════ */

.m-field {
    padding: 10px 0 14px;
}

.m-field + .m-field {
    border-top: 1px solid #f0f1f3;
}

.m-field--disabled {
    opacity: 0.4;
}

.m-field-label-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* BaseLabelStyle MAUI : Manrope-Light, gris. */
.m-field-label {
    color: var(--m-text-muted);
    font-size: 14px;
    font-weight: 300;
}

.m-field-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--m-primary);
    cursor: pointer;
}

.m-field-info .material-icons {
    font-size: 18px;
}

.m-field-caption,
.m-field-note {
    margin: 2px 0 6px;
    color: #404040;
    font-size: 13px;
    line-height: 1.4;
}

.m-field-caption {
    padding: 8px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--m-primary) 7%, white);
}

.m-field-error {
    margin: 8px 0 0;
    color: #de6262;
    font-size: 13px;
}

.m-field-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

/* Cadre du champ, façon UITextField iOS (borderStyle roundedRect) : fond blanc, contour fin, rayon 6.
 * Moitié de la ligne (grille MAUI 3*,*,2* : saisie 3/6) ; unité collée au cadre, stepper calé à droite. */
.m-field-input-wrap {
    display: flex;
    flex: 0 1 50%;
    align-items: center;
    min-width: 0;
    padding: 0 10px;
    border: 1px solid var(--m-border);
    border-radius: 6px;
    background: var(--m-surface);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.m-field-input-wrap:focus-within {
    border-color: var(--m-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-primary) 15%, transparent);
}

.m-field-input,
.m-text-input {
    width: 100%;
    min-width: 0;
    padding: 6px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--m-text);
    /* ≥ 16px : évite le zoom automatique d'iOS au focus. */
    font: inherit;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.m-field-unit {
    flex-shrink: 0;
    max-width: 20%;
    overflow: hidden;
    color: var(--m-text-muted);
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Stepper MAUI (NumericField.xaml) : Border blanc, contour Gray, rayon 15, Padding 7, colonne 2* d'une
 * grille 3*,*,2* (un tiers de la ligne) ; « - » et « + » en VeryLargeLabelStyle (Manrope-Light 30, noir,
 * « + » en gras, couleur du texte adoucie) séparés par un trait gris de 1px sur toute la hauteur.
 * Boutons préfixés par .m-stepper : plus spécifique que « .m-app button { font: inherit } ». */
.m-stepper {
    display: flex;
    flex: 0 0 calc((100% - 10px) / 3);
    margin-left: auto;
    align-items: stretch;
    gap: 1px;
    padding: 7px;
    border: 1px solid #808080;
    border-radius: 15px;
    background: #fff;
}

.m-stepper .m-stepper-button {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--m-text);
    font-size: 30px;
    font-weight: 300;
    line-height: 41px;
    cursor: pointer;
}

.m-stepper .m-stepper-button:last-child {
    font-weight: 700;
}

.m-stepper-button:active {
    background: #eef0f2;
}

.m-stepper-separator {
    flex: 0 0 1px;
    background: #808080;
}

/* Résultats calculés en pied de bloc (BlocSummary) : bandeau légèrement teinté collé au bas de la carte. */
.m-bloc-summary {
    margin: 16px -20px -20px;
    padding: 14px 20px 16px;
    border-top: 1px solid #e6ebf2;
    border-radius: 0 0 var(--m-radius) var(--m-radius);
    background: color-mix(in srgb, var(--m-primary) 5%, white);
}

.m-bloc-summary-title,
.m-bloc-summary-subtitle {
    margin: 0 0 10px;
    color: var(--m-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.m-bloc-summary-subtitle {
    margin-top: 14px;
    margin-bottom: 2px;
}

.m-bloc-summary-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

/* Plusieurs indicateurs : grille, libellé au-dessus de la valeur ; le premier sur toute la largeur. */
.m-bloc-summary-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.m-bloc-summary-item--main {
    grid-column: 1 / -1;
}

.m-bloc-summary-label {
    color: var(--m-text-muted);
    font-size: 12px;
    font-weight: 500;
}

.m-bloc-summary-value {
    color: var(--m-text);
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.m-bloc-summary-item--main .m-bloc-summary-value {
    color: var(--m-primary);
    font-size: 22px;
    font-weight: 800;
}

.m-bloc-summary-note {
    color: var(--m-text-muted);
    font-size: 12px;
}

/* Un seul indicateur : en ligne, libellé (+ note) à gauche, valeur à droite, pas de vide latéral. */
.m-bloc-summary-items--single {
    display: block;
}

.m-bloc-summary-items--single .m-bloc-summary-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: center;
}

.m-bloc-summary-items--single .m-bloc-summary-label {
    grid-column: 1;
    color: var(--m-text);
    font-size: 14px;
    font-weight: 700;
}

.m-bloc-summary-items--single .m-bloc-summary-value {
    grid-row: 1 / span 2;
    grid-column: 2;
    text-align: right;
}

.m-bloc-summary-items--single .m-bloc-summary-note {
    grid-column: 1;
}

/* Détail sous les chiffres clés (lignes de récapitulatif, bouton). */
.m-bloc-summary-details {
    margin-top: 12px;
    padding-top: 4px;
    border-top: 1px solid #e1e7ef;
}

.m-bloc-summary-details:empty {
    display: none;
}

.m-bloc-summary-details > .m-button:last-child {
    margin-top: 12px;
    margin-bottom: 0;
}

/* Champs secondaires repliables (OptionalGroup). */
.m-optional {
    border-top: 1px solid #f0f1f3;
}

.m-optional + .m-field,
.m-optional + .m-setting-row {
    border-top: 1px solid #f0f1f3;
}

.m-app .m-optional-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 10px 0;
    border: 0;
    background: none;
    color: var(--m-text);
    text-align: left;
    cursor: pointer;
}

.m-optional-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.m-optional-title {
    color: var(--m-primary);
    font-size: 14px;
    font-weight: 600;
}

.m-optional-summary {
    display: -webkit-box;
    overflow: hidden;
    color: var(--m-text-muted);
    font-size: 13px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.m-optional-chevron {
    color: var(--m-primary);
    transition: transform 0.2s;
}

.m-optional--open .m-optional-chevron {
    transform: rotate(180deg);
}

/* Contenu déplié : filet Primary à gauche pour rattacher les champs au groupe. */
.m-optional-body {
    margin-bottom: 6px;
    padding-left: 12px;
    border-left: 2px solid color-mix(in srgb, var(--m-primary) 25%, transparent);
}

/* LabelHyperLink MAUI : texte Primary + flèche. */
.m-setting-link {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 32px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--m-primary);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.m-setting-link-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-setting-link-icon {
    flex-shrink: 0;
    font-size: 22px;
}

.m-setting-link:active {
    opacity: 0.6;
}

.m-setting-row {
    padding: 12px 0 4px;
}

.m-setting-row-label {
    color: var(--m-text-muted);
    font-size: 14px;
}

.m-amount-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
}

.m-amount-row-name {
    display: flex;
    flex-direction: column;
    color: var(--m-text-muted);
    font-size: 14px;
}

.m-amount-row-caption {
    margin-top: 2px;
    color: #919191;
    font-size: 12px;
}

.m-amount-row-value {
    flex-shrink: 0;
    color: var(--m-text);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.m-amount-row-value--highlight {
    color: var(--m-primary);
    font-size: 17px;
}

/* Gray500 MAUI : titre gras souligné, gardé dans les tons des libellés gris qui l'entourent. */
.m-recap-title {
    margin: 14px 0 4px;
    color: #6e6e6e;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.m-separator {
    height: 1px;
    margin: 16px 0;
    border: 0;
    background: #d3d3d3;
}

.m-setting-row-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Petite action à droite d'un réglage (Comparer, Supprimer). */
.m-tag-button {
    flex-shrink: 0;
    min-height: 32px;
    padding: 4px 12px;
    border: 0;
    border-radius: 16px;
    background: var(--m-background);
    color: var(--m-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.m-tag-button--danger {
    background: color-mix(in srgb, #de6262 12%, white);
    color: #c24848;
}

.m-tag-button:active {
    opacity: 0.7;
}

.m-switch-field + .m-switch-field,
.m-field + .m-switch-field,
.m-switch-field + .m-field {
    border-top: 1px solid #f0f1f3;
}

.m-switch-field .m-field-note {
    margin-top: -4px;
}

.m-text-area {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid var(--m-border);
    border-radius: 8px;
    background: var(--m-surface);
    color: var(--m-text);
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    resize: vertical;
    outline: none;
}

.m-text-area:focus {
    border-color: var(--m-primary);
}

/* Encart Jeanbrun (bordure Primary, dégradé bleu clair). */
.m-info-card {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 14px 0 6px;
    padding: 14px;
    border: 2px solid var(--m-primary);
    border-radius: var(--m-radius);
    background: linear-gradient(90deg, #e3f2fd, #f5f9ff);
    color: var(--m-primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.m-info-card-text {
    flex: 1;
}

/* InfoBlocText MAUI. */
.m-info-text {
    display: flex;
    gap: 8px;
    margin: 18px 0 0;
    padding: 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--m-primary) 7%, white);
    color: #404040;
    font-size: 13px;
    line-height: 1.4;
}

.m-info-text .material-icons {
    flex-shrink: 0;
    color: var(--m-primary);
    font-size: 18px;
}

.m-loan-fields {
    transition: opacity 0.2s;
}

.m-loan-fields--disabled {
    opacity: 0.2;
}

/* Interrupteur (CheckBoxView MAUI, rendu Switch sur iOS). */
.m-switch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    cursor: pointer;
}

.m-switch-label {
    color: var(--m-text);
    font-size: 15px;
}

.m-switch-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.m-switch-track {
    position: relative;
    flex-shrink: 0;
    width: 50px;
    height: 30px;
    border-radius: 15px;
    background: var(--m-border);
    transition: background 0.2s;
}

.m-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s;
}

.m-switch-input:checked + .m-switch-track {
    background: var(--m-primary);
}

.m-switch-input:checked + .m-switch-track .m-switch-thumb {
    transform: translateX(20px);
}

.m-switch-input:focus-visible + .m-switch-track {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

/* Boutons (Style Button MAUI : Primary, majuscules, gras, rayon 8). */
.m-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    margin-top: 16px;
    padding: 10px 16px;
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
}

.m-button--block {
    width: 100%;
}

.m-button--primary {
    background: var(--m-primary);
    color: #fff;
}

.m-button--secondary {
    border: 1px solid var(--m-primary);
    background: transparent;
    color: var(--m-primary);
}

.m-button:active {
    opacity: 0.8;
}

.m-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.m-chip {
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--m-border);
    border-radius: 18px;
    background: var(--m-surface);
    color: var(--m-text);
    font-size: 14px;
    cursor: pointer;
}

.m-chip--active {
    border-color: var(--m-primary);
    background: var(--m-primary);
    color: #fff;
}

/* ═══════════════ Contenu des bottom sheets ═══════════════ */

.m-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: -4px -8px 4px 0;
}

.m-sheet-title {
    margin: 0;
    color: var(--m-text);
    font-size: 17px;
    font-weight: 700;
}

.m-sheet-close {
    flex-shrink: 0;
    color: var(--m-text-muted);
}

.m-sheet-close:active {
    background: #eef0f2;
}

.m-sheet-message {
    margin: 0 0 8px;
    color: var(--m-text-muted);
    font-size: 14px;
}

.m-sheet-list {
    display: flex;
    flex-direction: column;
    margin: 0 -16px;
}

.m-sheet-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 20px;
    border: 0;
    border-top: 1px solid #f0f1f3;
    background: none;
    color: var(--m-text);
    font-size: 16px;
    text-align: left;
    cursor: pointer;
}

.m-sheet-item:active {
    background: #f3f4f6;
}

.m-sheet-item:disabled {
    color: #acacac;
    cursor: default;
}

.m-sheet-item--muted {
    color: var(--m-primary);
    font-size: 15px;
}

.m-sheet-item-icon {
    font-size: 20px;
}

.m-sheet-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.m-sheet-actions .m-button {
    margin-top: 0;
}

/* Boutons de validation toujours visibles : collés en bas de la sheet quand le formulaire défile (le fond couvre le
   padding bas de la sheet). Le trait de séparation n'apparaît que s'il reste du contenu sous les boutons. */
.m-sheet > .m-sheet-actions,
.m-sheet > .m-sheet-form > .m-sheet-actions {
    position: sticky;
    bottom: calc(-16px - var(--m-safe-bottom));
    z-index: 1;
    margin: 16px -16px calc(-16px - var(--m-safe-bottom));
    padding: 12px 16px calc(16px + var(--m-safe-bottom));
    background: var(--m-surface);
}

@supports (animation-timeline: scroll()) {
    .m-sheet > .m-sheet-actions,
    .m-sheet > .m-sheet-form > .m-sheet-actions {
        animation: m-sheet-actions-separator linear both;
        animation-timeline: scroll(nearest block);
    }
}

@keyframes m-sheet-actions-separator {
    from { box-shadow: 0 -1px 0 var(--m-border), 0 -6px 12px rgba(15, 23, 42, 0.06); }
    96% { box-shadow: 0 -1px 0 var(--m-border), 0 -6px 12px rgba(15, 23, 42, 0.06); }
    to { box-shadow: none; }
}

.m-sheet-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.m-sheet-form .m-text-input {
    margin-bottom: 10px;
    border-bottom: 1px solid var(--m-border);
    font-size: 17px;
}

.m-sheet-form .m-text-input:focus {
    border-bottom-color: var(--m-primary);
}

.m-sheet-switches .m-switch + .m-switch {
    border-top: 1px solid #f0f1f3;
}

/* ── Chargement ── */

.m-sim-loading-header {
    height: calc(90px + var(--m-safe-top));
    background: var(--m-bright-brush);
}

.m-sim-loading-card {
    height: 122px;
    margin: 10px 10px 0;
    border-radius: var(--m-radius);
    background: #dfe2e4;
}

@media (prefers-reduced-motion: reduce) {
    .m-app .m-recap-prediction-curve path {
        animation: none !important;
        stroke-dashoffset: 0;
    }
}

.m-sheet-item-text {
    flex: 1;
}

.m-sheet-item-value {
    flex-shrink: 0;
    color: var(--m-primary);
    font-size: 14px;
    font-weight: 600;
}

.m-sheet-item-lock {
    color: var(--m-text-muted);
}

.m-chips--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 8px;
}

.m-sheet-actions--row {
    flex-direction: row;
}

.m-sheet-actions--row .m-button {
    flex: 1;
}

.m-info-sections {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.m-info-section {
    padding: 12px 15px;
    border: 2px solid transparent;
    border-radius: var(--m-radius);
    background: var(--m-background);
}

.m-info-section--positive {
    border-color: var(--m-primary);
    background: linear-gradient(135deg, #e8f5e9, #f1f8f4);
}

.m-info-section--negative {
    border-color: #de6262;
    background: linear-gradient(135deg, #ffebee, #fff3f4);
}

.m-info-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    color: var(--m-text);
    font-size: 15px;
    font-weight: 700;
}

.m-info-section-title .material-icons {
    color: var(--m-primary);
    font-size: 20px;
}

.m-info-section--negative .m-info-section-title .material-icons {
    color: #de6262;
}

.m-info-section-text {
    margin: 0;
    color: #303030;
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-line;
}

.m-composante + .m-composante {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e3e5e8;
}

.m-composante-title {
    display: flex;
    align-items: center;
    margin: 8px 0 0;
    color: var(--m-primary);
    font-size: 16px;
    font-weight: 700;
}

/* ═══════════════ Lot 6 : accueil, menu, authentification ═══════════════ */

.m-spinner {
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: m-spin 0.8s linear infinite;
}

.m-spinner--dark {
    border-color: color-mix(in srgb, var(--m-primary) 25%, transparent);
    border-top-color: var(--m-primary);
}

@keyframes m-spin {
    to { transform: rotate(360deg); }
}

.m-link {
    padding: 4px 2px;
    border: 0;
    background: none;
    color: var(--m-primary);
    font-size: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* Actions flottantes de l'accueil (Menu / Enregistrer). */
.m-home {
    padding-bottom: calc(84px + var(--m-safe-bottom));
}

.m-home-actions {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: flex;
    justify-content: space-between;
    padding: 0 16px calc(16px + var(--m-safe-bottom));
    pointer-events: none;
}

/* Boutons ronds icône seule (SfButton MAUI, CornerRadius 30). */
.m-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid var(--m-border);
    border-radius: 50%;
    background: var(--m-surface);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
    color: var(--m-text);
    pointer-events: auto;
    cursor: pointer;
}

.m-fab .material-icons {
    font-size: 27px;
}

.m-fab--primary {
    border-color: var(--m-primary);
    background: var(--m-primary);
    color: #fff;
}

.m-fab:active {
    transform: scale(0.97);
}

.m-fab:disabled {
    opacity: 0.7;
    cursor: default;
}

/* Prévisionnel : bouton principal du bas (ancienne tuile du récap, même DiagonalBrush et même courbe). */
.m-app .m-fab-prediction {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 56px;
    margin: 0 8px;
    padding: 0 20px 0 16px;
    border: 1px solid var(--m-border);
    border-radius: 28px;
    background: var(--m-diagonal-brush);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    pointer-events: auto;
    cursor: pointer;
}

/* Masqué header déplié (la tuile du récap est visible), apparaît au repli. */
.m-home:not(:has(.m-sim--collapsed)) .m-fab-prediction {
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    pointer-events: none;
}

.m-app .m-fab-prediction {
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.m-fab-prediction > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-fab-prediction:active {
    transform: scale(0.97);
}

/* Menu des fonctionnalités. */
.m-features {
    flex: 1;
    overflow-y: auto;
    margin: 0 -16px;
    padding: 0 16px 16px;
}

.m-features-group + .m-features-group {
    margin-top: 18px;
}

.m-features-group-title {
    margin: 4px 4px 8px;
    color: var(--m-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.m-features-list {
    overflow: hidden;
    border: 1px solid #e3e5e8;
    border-radius: var(--m-radius);
    background: var(--m-surface);
}

.m-features-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 10px 14px;
    border: 0;
    background: none;
    color: var(--m-text);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.m-features-item + .m-features-item {
    border-top: 1px solid #f0f1f3;
}

.m-features-item:active {
    background: #f3f4f6;
}

.m-features-item .m-features-item-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--m-primary) 10%, white);
    color: var(--m-primary);
    font-size: 20px;
}

.m-features-item-text {
    flex: 1;
}

.m-features-item .m-features-item-trailing {
    flex-shrink: 0;
    color: #a0a4ab;
    font-size: 20px;
}

/* Fonctionnalité réservée : cadenas doré (Goldenrod MAUI, comme le hub Prévisionnel). */
.m-features-item .m-features-item-trailing--lock {
    color: #daa520;
}

.m-features-promo {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 18px;
    padding: 14px 16px;
    border: 0;
    border-radius: var(--m-radius);
    background: var(--m-diagonal-brush);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.m-features-promo--outline {
    margin-top: 10px;
    border: 1px solid var(--m-primary);
    background: var(--m-surface);
    color: var(--m-primary);
}


.m-features-promo-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
}

.m-features-promo-text small {
    color: var(--m-text-muted);
    font-size: 12px;
    font-weight: 400;
}

.m-features-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    margin: 0 -16px;
    border: 0;
    border-top: 1px solid #e3e5e8;
    background: var(--m-surface);
    color: var(--m-text);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.m-features-settings .m-icon {
    color: var(--m-primary);
}

/* Authentification. */
.m-auth {
    flex: 1;
    overflow-y: auto;
    margin: 0 -16px;
    padding: 0 24px 16px;
}

.m-auth-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 4px 0 24px;
}

.m-auth-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.m-auth-logo--whitelabel {
    width: auto;
    max-width: 180px;
}

.m-auth-title {
    margin: 0;
    color: var(--m-text);
    font-size: 22px;
    font-weight: 700;
}

.m-auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.m-auth-field .m-field-label {
    display: block;
    margin-bottom: 6px;
}

.m-auth-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 6px 0 14px;
    border: 1px solid var(--m-border);
    border-radius: 12px;
    background: var(--m-surface);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.m-auth-input-wrap:focus-within {
    border-color: var(--m-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-primary) 15%, transparent);
}

.m-auth-input-wrap--error {
    border-color: #de6262;
}

.m-auth-input-icon {
    color: var(--m-text-muted);
    font-size: 20px;
}

.m-auth-input {
    flex: 1;
    min-width: 0;
    height: 50px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--m-text);
    /* ≥ 16px : pas de zoom iOS au focus. */
    font: inherit;
    font-size: 16px;
    outline: none;
}

.m-auth-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: var(--m-text-muted);
    cursor: pointer;
}

.m-auth-inline-link {
    display: flex;
    justify-content: flex-end;
    min-height: 28px;
    margin-top: -6px;
    font-size: 13px;
}

.m-auth-inline-link .m-link {
    font-weight: 600;
}

.m-auth-submit {
    min-height: 52px;
    margin-top: 4px;
    border-radius: 12px;
    font-size: 15px;
}

.m-auth-submit:disabled {
    opacity: 0.7;
}

.m-auth-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 14px;
    color: var(--m-text-muted);
    font-size: 13px;
}

.m-auth-separator::before,
.m-auth-separator::after {
    flex: 1;
    height: 1px;
    background: #e3e5e8;
    content: '';
}

.m-auth-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    border: 1px solid var(--m-border);
    border-radius: 12px;
    background: var(--m-surface);
    color: var(--m-text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.m-auth-social + .m-auth-social {
    margin-top: 10px;
}

.m-auth-social--apple {
    border-color: #111;
    background: #111;
    color: #fff;
}

.m-auth-social:disabled {
    opacity: 0.6;
}

.m-auth-social-icon {
    width: 20px;
    height: 20px;
}

.m-auth-switch {
    margin: 22px 0 0;
    color: var(--m-text-muted);
    font-size: 14px;
    text-align: center;
}

/* ── Graphiques d'évolution (IndicatorEvolutionModal) ── */

.m-evolution {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 -16px;
    padding: 0 16px 16px;
}

/* Repères chiffrés : défilement horizontal si l'écran est étroit. */
.m-evolution-insights {
    display: grid;
    grid-auto-columns: minmax(118px, 1fr);
    grid-auto-flow: column;
    gap: 8px;
    margin: 0 -16px 14px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.m-evolution-insights::-webkit-scrollbar {
    display: none;
}

.m-insight {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    background: var(--m-surface);
    color: var(--m-text);
    text-align: left;
}

button.m-insight {
    cursor: pointer;
}

button.m-insight:disabled {
    cursor: default;
}

button.m-insight:not(:disabled):active {
    background: #f4f5f6;
}

.m-insight-label {
    color: var(--m-text-muted);
    font-size: 12px;
    font-weight: 500;
}

.m-insight-value {
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


.m-amount--positive {
    color: var(--m-positive);
}

.m-amount--negative {
    color: #de6262;
}

/* Contrôle segmenté (base : fond bleu), utilisé sur fond clair par les graphiques d'évolution. */
.m-segmented {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
}

.m-segmented-option {
    min-height: 32px;
    padding: 6px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.m-segmented-option--active {
    background: #fff;
    color: var(--m-primary);
    font-weight: 700;
}

/* Contrôle segmenté sur fond clair. */
.m-segmented--light {
    flex-direction: row;
    margin-bottom: 8px;
    background: #e3e6e9;
}

.m-segmented--light .m-segmented-option {
    flex: 1;
    color: var(--m-text-muted);
    font-weight: 600;
}

.m-segmented--light .m-segmented-option--active {
    background: var(--m-surface);
    color: var(--m-primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.m-chart {
    position: relative;
    height: 240px;
}

/* Glisser horizontalement choisit l'année ; le défilement vertical reste au navigateur. */
.m-chart canvas {
    touch-action: pan-y;
    cursor: pointer;
}

.m-evolution-hint {
    margin: 4px 0 12px;
    color: var(--m-text-muted);
    font-size: 12px;
    text-align: center;
}





.m-detail-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
}

.m-detail-row--separated {
    margin-top: 4px;
    border-top: 1px solid #eef0f2;
    padding-top: 12px;
}

.m-detail-row--strong {
    font-weight: 800;
}

.m-detail-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    transform: translateY(1px);
}

.m-detail-dot--primary { background: var(--m-primary); }
.m-detail-dot--positive { background: var(--m-positive); }
.m-detail-dot--negative { background: #de6262; }
.m-detail-dot--gold { background: #d4a72c; }
.m-detail-dot--violet { background: #8e6bbf; }
.m-detail-dot--none { background: transparent; }

.m-detail-label {
    flex: 1;
    min-width: 0;
    color: var(--m-text);
}

.m-detail-row:not(.m-detail-row--strong) .m-detail-label {
    color: #404040;
    font-weight: 400;
}

.m-detail-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.m-detail-row--strong .m-detail-value {
    font-size: 17px;
}

.m-detail-note {
    color: var(--m-text-muted);
    font-size: 12px;
    font-weight: 500;
}

/* ═══════════════ Lot 8 : modales transverses ═══════════════ */

.m-button--danger {
    background: var(--m-negative);
    color: #fff;
}

.m-button--danger-outline {
    border: 1px solid var(--m-negative);
    background: transparent;
    color: var(--m-negative);
}

.m-button .material-icons {
    font-size: 18px;
}

/* Contenu centré d'une sheet de dialogue (confirmation, alerte). */
.m-dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 0;
    text-align: center;
}

.m-dialog--footer {
    gap: 2px;
    margin-top: 20px;
}

.m-dialog-emoji {
    font-size: 40px;
    line-height: 1.1;
}

.m-dialog-text {
    margin: 0;
    color: var(--m-text);
    font-size: 15px;
    line-height: 1.45;
    white-space: pre-line;
}

.m-dialog-text--strong {
    font-size: 16px;
    font-weight: 700;
}

.m-dialog-hint {
    margin: 0;
    color: var(--m-text-muted);
    font-size: 13px;
}

.m-value--positive {
    color: var(--m-positive);
}

.m-value--negative {
    color: var(--m-negative);
}

/* ═══════════════ Lot 9 : historique ═══════════════ */

.m-search {
    position: relative;
    margin: 0 0 4px;
}

.m-search-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    color: var(--m-text-muted);
    font-size: 20px;
    transform: translateY(-50%);
    pointer-events: none;
}

.m-app .m-search-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px 10px 40px;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    background: var(--m-surface);
    color: var(--m-text);
    font: inherit;
    font-size: 16px; /* ≥ 16px : pas de zoom automatique d'iOS au focus. */
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.m-app .m-search-input:focus {
    border-color: var(--m-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-primary) 18%, transparent);
}

.m-history-loading {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

.m-history-month {
    margin-top: 18px;
}

.m-history-list {
    overflow: hidden;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    background: var(--m-surface);
}

.m-app .m-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 60px;
    padding: 10px 12px;
    border: 0;
    background: none;
    color: var(--m-text);
    text-align: left;
    cursor: pointer;
}

.m-app .m-history-item + .m-history-item {
    border-top: 1px solid #f0f1f3;
}

.m-app .m-history-item:active {
    background: #f3f4f6;
}

.m-app .m-history-item:disabled {
    cursor: default;
}

.m-history-item-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.m-history-item-title {
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-history-item-date {
    color: var(--m-text-muted);
    font-size: 13px;
}

.m-history-item-arrow {
    flex-shrink: 0;
    color: #b0b4ba;
}

.m-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 48px 24px;
    text-align: center;
}

.m-empty-icon {
    color: #c3c7cc;
    font-size: 56px;
}

.m-empty-text {
    margin: 0;
    color: var(--m-text);
    font-size: 16px;
    font-weight: 600;
}

.m-empty-hint {
    margin: 0;
    color: var(--m-text-muted);
    font-size: 14px;
}

.m-saved-sim-indicators {
    padding: 4px 0;
}

/* ═══════════════ Lot 10 : Prévisionnel et prêt ═══════════════ */

.m-subpage-actions {
    display: flex;
    margin-left: auto;
}

.m-subpage-toolbar:has(.m-subpage-actions) {
    padding-right: 4px;
}

/* Carte qui ne contient que des résultats : le bandeau BlocSummary occupe toute la carte. */
.m-bloc--summary-only {
    overflow: hidden;
    padding: 0;
}

.m-bloc--summary-only .m-bloc-summary {
    margin: 0;
    border-top: 0;
}

.m-page-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.m-page-actions .m-button {
    margin-top: 0;
}

.m-detail-dot--muted {
    background: #9aa0a6;
}

/* Répartition de ce qui sera payé (capital, intérêts, assurance, frais). */
.m-stack-bar {
    display: flex;
    gap: 2px;
    height: 12px;
    margin: 2px 0 8px;
    overflow: hidden;
    border-radius: 6px;
}

.m-stack-bar-part {
    flex-basis: 0;
    min-width: 3px;
}

.m-stack-bar-part--primary { background: var(--m-primary); }
.m-stack-bar-part--negative { background: var(--m-negative); }
.m-stack-bar-part--gold { background: #d4a72c; }
.m-stack-bar-part--muted { background: #9aa0a6; }

.m-loan-chart .m-segmented {
    margin-bottom: 12px;
}


/* Hub Prévisionnel (GoToPrevisionelPage MAUI : icône 1/6, titre et liens 5/6). */
.m-previsionnel {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-bottom: 4px;
}

.m-previsionnel-group {
    display: grid;
    grid-template-columns: 1fr 5fr;
    align-items: center;
    column-gap: 8px;
}

.m-previsionnel-icon {
    justify-self: center;
}

/* LargeTitleLabelStyle : Manrope ExtraBold, noir à 60 % (ici le texte ardoise, sans noir). */
.m-previsionnel-title {
    margin: 0;
    color: var(--m-text);
    font-size: 18px;
    font-weight: 800;
    opacity: 0.85;
}

.m-previsionnel-links {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    margin-top: 8px;
}

.m-app .m-previsionnel-link {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 48px;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--m-text);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

.m-app .m-previsionnel-link:active {
    opacity: 0.6;
}

.m-previsionnel-link-text {
    flex: 1;
}

.m-previsionnel-chevron {
    color: var(--m-primary);
    font-size: 25px;
}

/* Goldenrod (FeatureLink MAUI). */
.m-previsionnel-lock {
    color: #daa520;
    font-size: 20px;
}

/* Sheet recouverte par une page poussée depuis elle : masquée, gardée pour le retour. */
.m-sheet-layer--covered {
    visibility: hidden;
    pointer-events: none;
}

/* Tableau d'amortissement mensuel */
.m-schedule-year {
    margin-top: 12px;
    overflow: clip;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    background: var(--m-surface);
}

.m-schedule-year-header {
    position: sticky;
    top: calc(56px + var(--m-safe-top));
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #e6ebf2;
    background: color-mix(in srgb, var(--m-primary) 5%, white);
}

.m-schedule-year-title {
    color: var(--m-primary);
    font-size: 15px;
    font-weight: 700;
}

.m-schedule-year-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-variant-numeric: tabular-nums;
}

.m-schedule-year-payment {
    color: var(--m-text);
    font-size: 15px;
    font-weight: 700;
}

.m-schedule-year-interest {
    color: var(--m-text-muted);
    font-size: 12px;
}

.m-app .m-schedule-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 8px 10px 8px 16px;
    border: 0;
    background: none;
    color: var(--m-text);
    text-align: left;
    cursor: pointer;
}

.m-app .m-schedule-row + .m-schedule-row,
.m-schedule-detail + .m-schedule-row {
    border-top: 1px solid #f0f1f3;
}

.m-app .m-schedule-row:active {
    background: #f3f4f6;
}

.m-schedule-month {
    flex: 1;
    font-size: 14px;
}

.m-schedule-amounts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-variant-numeric: tabular-nums;
}

.m-schedule-payment {
    font-size: 15px;
    font-weight: 700;
}

.m-schedule-remaining {
    color: var(--m-text-muted);
    font-size: 12px;
}

.m-schedule-chevron {
    color: #b0b4ba;
}

.m-schedule-detail {
    padding: 0 16px 8px;
    background: #fafbfc;
}

/* ═══════════════ Graphiques : légende et tooltip ═══════════════ */

.m-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    color: var(--m-text-muted);
    font-size: 12px;
}

.m-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.m-chart-swatch {
    display: inline-block;
    flex-shrink: 0;
    background: currentColor;
}

.m-chart-swatch--block {
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

.m-chart-swatch--line {
    width: 12px;
    height: 3px;
    border-radius: 2px;
}

/* Couleurs des séries : mêmes rôles que js/evolutionChart.js. */
.m-chart-color--primary { color: var(--m-primary); }
.m-chart-color--positive { color: var(--m-positive); }
.m-chart-color--negative { color: var(--m-negative); }
.m-chart-color--gold { color: #d4a72c; }
.m-chart-color--violet { color: #8e6bbf; }
.m-chart-color--teal { color: #1a9e8f; }
.m-chart-color--orange { color: #e07b39; }
.m-chart-color--pink { color: #c9558f; }
.m-chart-color--slate { color: #6b7280; }

/* Tooltip de l'année : au-dessus de la zone du graphique, centré sur le repère, pointe vers lui
 * (--m-tip-left / --m-tip-top / --m-tip-arrow, posés par js/evolutionChart.js). Masqué tant qu'aucune année n'est
 * touchée (data-tip-active). Libellés longs tronqués (la légende garde le nom complet) ; ne capte pas le toucher. */
.m-chart-tip {
    position: absolute;
    top: var(--m-tip-top, 0);
    left: var(--m-tip-left, 0);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: max-content;
    min-width: 150px;
    max-width: min(100%, 320px);
    padding: 8px 12px 9px;
    border: 1px solid #e3e5e8;
    border-radius: 10px;
    background: var(--m-surface);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease-out, visibility 0s linear 0.12s;
}

.m-chart[data-tip-active] .m-chart-tip {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.12s ease-out;
}

/* Pointe vers le repère (au-dessus du graphique seulement). */
.m-chart[data-tip-placement="above"] .m-chart-tip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: calc(var(--m-tip-arrow, 50%) - 6px);
    width: 10px;
    height: 10px;
    border-right: 1px solid #e3e5e8;
    border-bottom: 1px solid #e3e5e8;
    background: var(--m-surface);
    transform: rotate(45deg);
}

.m-chart-tip-year {
    margin-bottom: 2px;
    color: var(--m-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.m-chart-tip-row {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--m-text);
}

.m-chart-tip-row .m-chart-swatch--block {
    width: 10px;
    height: 10px;
}

.m-chart-tip-row .m-chart-swatch--line {
    width: 13px;
}

.m-chart-tip-value {
    flex-shrink: 0;
    margin-left: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.m-chart-tip-row--strong .m-chart-tip-value {
    font-size: 15px;
    font-weight: 800;
}

.m-chart-tip-row--secondary {
    color: var(--m-text-muted);
    font-size: 13px;
}

.m-chart-tip-row--secondary .m-chart-tip-value {
    font-weight: 500;
}

.m-chart-tip-row--secondary.m-chart-tip-row--strong .m-chart-tip-value {
    color: var(--m-text);
    font-weight: 700;
}

.m-chart-tip-label {
    overflow: hidden;
    min-width: 0;
    margin-right: 12px;
    color: var(--m-text-muted);
    font-size: 13px;
    text-overflow: ellipsis;
}

.m-chart-tip-row--strong .m-chart-tip-label {
    color: var(--m-text);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .m-chart-tip,
    .m-chart[data-tip-active] .m-chart-tip {
        transition: none;
    }
}

/* Modales d'évolution : le graphique prend toute la hauteur restante de la sheet. */
.m-evolution {
    display: flex;
    flex-direction: column;
}

.m-evolution > * {
    flex-shrink: 0;
}

.m-evolution .m-chart {
    flex: 1 0 240px;
    height: auto;
}

/* Page (qui défile) : hauteur relative à l'écran. */
.m-loan-chart .m-chart {
    height: clamp(260px, 52dvh, 460px);
}

/* ═══════════════ Rendement patrimonial (RendementPatrimonialPage.xaml) ═══════════════ */

.m-subpage-title-button {
    overflow: hidden;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.m-flux-list {
    padding: 0;
}

/* Colonnes 70 / * / 30 du ListView MAUI. */
.m-flux-row {
    display: grid;
    grid-template-columns: 70px 1fr 30px;
    align-items: center;
    width: 100%;
    padding: 10px 5px;
    border: 0;
    border-top: 1px solid #e5e7eb;
    background: none;
    color: var(--m-text);
    font: inherit;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
}

.m-flux-row--header {
    padding: 15px 5px 10px;
    border-top: 0;
    border-bottom: 1px solid var(--m-border);
    color: var(--m-text-muted);
    font-size: 14px;
    cursor: default;
}

.m-flux-row--header + .m-flux-row {
    border-top: 0;
}

.m-flux-chevron {
    justify-self: end;
    color: var(--m-text-muted);
    font-size: 25px;
}

.m-flux-pill {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.m-flux-pill--positive { background: var(--m-flux-positive); }
.m-flux-pill--negative { background: var(--m-negative); }
.m-flux-pill--zero { background: var(--m-text-muted); }

/* Bloc récapitulatif + bouton, fixés en bas comme les lignes Auto de la grille MAUI. */
.m-flux-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px -10px 0;
    padding: 0 10px calc(10px + var(--m-safe-bottom));
    background: var(--m-background);
}

.m-subpage-body:has(.m-flux-footer) {
    padding-bottom: 0;
}

.m-flux-footer .m-button {
    margin-top: 8px;
}

.m-flux-summary {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 5px;
}

/* Mêmes colonnes 70 / * / 30 que la liste : les pastilles partagent l'axe des flux. Le libellé déborde de sa colonne. */
.m-flux-summary-row {
    display: grid;
    grid-template-columns: 70px 1fr 30px;
    align-items: center;
    color: var(--m-text-muted);
    font-size: 15px;
}

.m-flux-summary-row > :first-child {
    grid-column: 1 / 3;
    grid-row: 1;
    justify-self: start;
    padding-left: 15px;
    white-space: nowrap;
}

.m-flux-summary-row .m-flux-pill {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
}

.m-flux-caption {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.m-flux-caption .material-icons {
    font-size: 17px;
}

.m-flux-more {
    position: absolute;
    top: 50%;
    right: 5px;
    display: inline-flex;
    align-items: center;
    transform: translateY(-50%);
    overflow: hidden;
    padding: 0;
    border: 0;
    background: none;
    color: var(--m-text);
    font: inherit;
    font-size: 15px;
    text-decoration: underline;
    cursor: pointer;
}

.m-flux-more span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-flux-more .material-icons {
    color: var(--m-text-muted);
    font-size: 25px;
    text-decoration: none;
}

/* InvestmentReturnsPopup MAUI : VerticalStackLayout Padding 15 / Spacing 15. */
.m-returns {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 4px 15px 15px;
}

.m-returns-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.m-returns-name {
    padding: 0;
    border: 0;
    background: none;
    color: var(--m-text-muted);
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

.m-returns-caption {
    margin: -6px 0 0;
    color: var(--m-text-muted);
    font-size: 13px;
    line-height: 1.45;
}

/* CompositionCashflowPopup MAUI : libellé (+ lien « Détail du calcul ») / pastille de flux / chevron, total en pied. */
.m-composition {
    display: flex;
    flex-direction: column;
    padding: 0 4px;
}

.m-composition-row {
    display: grid;
    grid-template-columns: 1fr auto 25px;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid #e5e7eb;
    color: var(--m-text);
    font-size: 15px;
}

.m-composition-row:first-child {
    border-top: 0;
}

.m-composition-row--selectable {
    cursor: pointer;
}

.m-composition-row--selectable:active {
    background: #f4f5f6;
}

.m-composition-row--total {
    position: sticky;
    bottom: calc(-16px - var(--m-safe-bottom));
    margin-top: 4px;
    padding-bottom: calc(14px + var(--m-safe-bottom));
    margin-bottom: calc(-16px - var(--m-safe-bottom));
    border-top: 2px solid var(--m-border);
    background: var(--m-surface);
    font-weight: 700;
}

.m-composition-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.m-composition-link {
    padding: 2px 0 0;
    font-size: 13px;
}

.m-composition-chevron {
    justify-self: end;
    color: var(--m-text-muted);
    font-size: 25px;
}

.m-composition-chevron--hidden {
    visibility: hidden;
}

/* ═══════════════ Évolution du patrimoine (EstateEvolutionPage.xaml, refonte) ═══════════════ */

.m-estate-hypotheses {
    padding: 4px 8px 4px 20px;
}

.m-estate-hypothesis {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 0;
    border: 0;
    background: none;
    color: var(--m-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.m-estate-hypothesis + .m-estate-hypothesis {
    border-top: 1px solid #f0f1f3;
}

.m-estate-hypothesis-name {
    flex: 1;
    min-width: 0;
    color: var(--m-text-muted);
    font-size: 14px;
}

.m-estate-hypothesis-value {
    flex-shrink: 0;
    color: var(--m-primary);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.m-estate-hypothesis .material-icons {
    color: var(--m-text-muted);
}

.m-estate-chart .m-evolution-insights {
    margin: 0 0 14px;
    padding: 0;
}

.m-estate-chart .m-chart {
    height: clamp(260px, 46dvh, 420px);
}

.m-estate-chart .m-evolution-hint {
    margin-bottom: 0;
}

/* ── Graphique au-dessus d'une liste d'années (imposition prévisionnelle, js/chartListScroll.js) ──
 * Le haut est sticky sous la toolbar et garde sa hauteur dépliée dans le flux (posée par le script) ; la liste passe
 * sous l'espace libéré. --m-collapse (0 → 1, sur la sous-page) : repères, légende et aide s'effacent, la carte se
 * resserre et remonte (--m-panel-shift) dans la toolbar, entre le retour et l'export (--m-inset-*), le titre
 * s'efface. Toutes les tailles sont linéaires en --m-collapse : le bas de la carte reste collé au haut de la liste.
 * Le fond gris sous la toolbar (::before) masque la liste sur la hauteur non encore repliée. */
.m-subpage:has(.m-chart-list) {
    --m-collapse: 0;
    --m-chart-collapsed: 30px;
}

.m-subpage.m-chart-list--measuring {
    --m-collapse: 0 !important;
}

.m-subpage:has(.m-chart-list) .m-subpage-title {
    opacity: calc(1 - var(--m-collapse) * 3);
}

.m-chart-head {
    position: sticky;
    top: calc(56px + var(--m-safe-top));
    z-index: 30;
    pointer-events: none;
}

.m-chart-head-panel {
    position: relative;
    isolation: isolate;
    padding-bottom: 8px;
    transform: translateY(calc(var(--m-collapse) * -1 * var(--m-panel-shift, 0px)));
}

.m-chart-head-panel::before {
    content: '';
    position: absolute;
    right: -10px;
    bottom: 0;
    left: -10px;
    z-index: -1;
    height: calc(var(--m-head-height, 100%) * (1 - var(--m-collapse)));
    background: var(--m-background);
    pointer-events: auto;
}

.m-chart-head .m-bloc {
    margin: 0 calc(var(--m-collapse) * var(--m-inset-right, 0px)) 0 calc(var(--m-collapse) * var(--m-inset-left, 0px));
    padding: calc(20px - var(--m-collapse) * 16px) calc(20px - var(--m-collapse) * 12px);
    pointer-events: auto;
}

.m-chart-head-collapsible,
.m-chart-head .m-chart-legend {
    box-sizing: border-box;
    overflow: hidden;
    height: calc(var(--m-collapsible-height) * (1 - var(--m-collapse)));
    opacity: calc(1 - var(--m-collapse) * 2);
}

.m-chart-head-collapsible:first-child {
    padding-bottom: calc(14px * (1 - var(--m-collapse)));
}

.m-chart-head-collapsible:last-child {
    padding-top: calc(4px * (1 - var(--m-collapse)));
}

.m-chart-head .m-chart-legend {
    margin: 0;
    padding-bottom: calc(8px * (1 - var(--m-collapse)));
}

.m-chart-head .m-evolution-insights {
    margin: 0;
    padding: 0;
}

.m-chart-head .m-evolution-hint {
    margin: 0;
}

.m-chart-head .m-chart {
    height: calc(var(--m-chart-expanded, clamp(260px, 46dvh, 420px))
        - var(--m-collapse) * (var(--m-chart-expanded, clamp(260px, 46dvh, 420px)) - var(--m-chart-collapsed)));
}

/* Repli entamé : le graphique sert de navigation (année visible mise en avant), sans tooltip. */
.m-chart-list--collapsing .m-chart-tip {
    display: none;
}

/* En-tête d'année collant (section groupée iOS) : reste sous la toolbar tant que son année défile, puis le suivant le
 * pousse. Bord à bord (gouttière .m-subpage-body : 10 px), sur le fond de page : la liste passe dessous. */
.m-subpage-body .m-chart-list-year .m-sim-section-title {
    position: sticky;
    top: calc(56px + var(--m-safe-top));
    z-index: 5;
    margin: 0 -10px;
    padding: 12px 14px 8px;
    background: var(--m-background);
}

.m-estate-year-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.m-subpage-body .m-estate-year-header .m-sim-section-title {
    margin: 0;
}

.m-estate-year-step {
    color: var(--m-primary);
}

.m-estate-year-step:disabled {
    opacity: 0.3;
}

.m-estate-sum {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.m-estate-term {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.m-estate-term-name {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--m-text-muted);
    font: inherit;
    font-size: 14px;
    text-align: left;
}

button.m-estate-term-name {
    cursor: pointer;
}

.m-estate-term-value {
    flex-shrink: 0;
    color: var(--m-text);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.m-estate-term--total {
    padding-top: 12px;
    border-top: 1px solid var(--m-border);
}

.m-estate-term--total .m-estate-term-name {
    color: var(--m-text);
    font-size: 15px;
    font-weight: 700;
}

.m-estate-caption {
    margin: -4px 0 0;
    color: var(--m-text-muted);
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-line;
}

.m-estate-detail-link {
    padding: 0;
    font-size: 13px;
}

.m-estate-info {
    font-size: 17px;
}

.m-estate-sum .m-separator {
    margin: 4px 0;
}

.m-estate-term-value.m-amount--positive { color: var(--m-positive); }
.m-estate-term-value.m-amount--negative { color: var(--m-negative); }

/* ═══════════════ Imposition prévisionnelle (TaxEvolutionPage.xaml, refonte) — bilan en cascade (TaxLedger) ═══════════════ */

.m-ledger {
    display: flex;
    flex-direction: column;
}

.m-ledger-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    color: var(--m-text);
    font-size: 14px;
}

/* Valeur + icône de courbe : seule zone touchable de la ligne (ouvre la courbe). */
.m-ledger-link {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    margin: -6px -6px -6px 0;
    padding: 6px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.m-ledger-link:active {
    background: #f4f5f6;
}

.m-ledger-name {
    flex: 1;
    min-width: 0;
    color: var(--m-text-muted);
}

.m-ledger-value {
    flex-shrink: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.m-ledger-chart {
    flex-shrink: 0;
    color: #b8bec7;
    font-size: 18px;
}

.m-ledger-info {
    padding: 0 2px;
    border: 0;
    background: none;
    font-size: 13px;
    cursor: pointer;
}

.m-ledger-row--revenue .m-ledger-name {
    color: var(--m-text);
    font-weight: 600;
}

.m-ledger-row--deduction {
    padding-left: 14px;
}

.m-ledger-row--deduction .m-ledger-value {
    font-weight: 500;
}

.m-ledger-row--subtotal {
    margin-top: 4px;
    border-top: 1px solid var(--m-border);
}

.m-ledger-row--subtotal .m-ledger-name {
    color: var(--m-text);
    font-weight: 700;
}

.m-ledger-row--rate {
    padding: 4px 0;
    font-size: 13px;
}

.m-ledger-row--rate .m-ledger-value {
    color: var(--m-text-muted);
    font-weight: 600;
}

.m-ledger-row--total {
    margin-top: 8px;
    padding: 12px 0 4px;
    border-top: 1px solid var(--m-border);
    font-size: 16px;
}

.m-ledger-row--total .m-ledger-name {
    color: var(--m-text);
    font-weight: 800;
}

.m-ledger-row--total .m-ledger-value {
    color: var(--m-negative);
    font-size: 17px;
    font-weight: 800;
}

.m-ledger-caption {
    margin: 0 0 6px;
    color: var(--m-text-muted);
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-line;
}

.m-ledger-caption--deduction {
    padding-left: 14px;
}

.m-ledger-carry {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f4f6f9;
}

.m-ledger-carry-title {
    margin: 0 0 4px;
    color: var(--m-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ═══════════════ Bottom sheets : titres de section (formulaires « Si … ») ═══════════════ */

.m-sheet-section-title {
    margin: 22px 0 8px;
    color: var(--m-text);
    font-size: 15px;
    font-weight: 700;
}

/* ═══════════════ Régimes fiscaux comparés (TaxRegimeBenchmarkPage + FiscaliteBenchmarkPage, fusion) ═══════════════ */

/* Hypothèses en une ligne : scénario de revente (gras) + paramètres fiscaux (gris). */
.m-regime-hypothesis {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.m-regime-hypothesis-scenario {
    color: var(--m-primary);
    font-size: 15px;
    font-weight: 700;
}

.m-regime-hypothesis-settings {
    color: var(--m-text-muted);
    font-size: 13px;
}

/* Rangées à défilement horizontal (critères, cartes du classement), bord à bord (gouttière .m-subpage-body : 10 px). */
.m-regime-scroller {
    display: flex;
    gap: 8px;
    margin: 0 -10px;
    padding: 0 10px 4px;
    overflow-x: auto;
    scroll-padding-inline: 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.m-regime-scroller::-webkit-scrollbar {
    display: none;
}

.m-regime-scroller > * {
    flex-shrink: 0;
    scroll-snap-align: start;
}

.m-regime-criteria {
    margin-bottom: 10px;
}

.m-regime-criteria .m-chip {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.m-regime-chip-icon {
    margin: 0 -6px 0 2px;
    font-size: 20px;
}

.m-regime-cards {
    padding-bottom: 8px;
}

.m-regime-card {
    display: flex;
    flex-direction: column;
    width: 152px;
    border: 1px solid var(--m-border);
    border-top: 3px solid var(--m-border);
    border-radius: var(--m-radius);
    background: var(--m-surface);
}

.m-regime-card--leader {
    border-top-color: var(--m-primary);
}

.m-regime-card--compared {
    border-color: #8e6bbf;
    border-top-color: #8e6bbf;
}

.m-regime-card-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 0;
    background: none;
    color: var(--m-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.m-regime-card-main:active {
    background: #f4f5f6;
}

.m-regime-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.m-regime-rank {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eef0f2;
    color: var(--m-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.m-regime-card--leader .m-regime-rank {
    background: #d4a72c;
    color: #fff;
}

.m-regime-name {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.m-regime-note {
    overflow: hidden;
    color: var(--m-text-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-regime-value {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.m-regime-detail {
    padding: 0 12px 10px;
    font-size: 13px;
    text-align: left;
}

.m-regime-chart .m-chart {
    height: clamp(220px, 34dvh, 360px);
}

.m-regime-hint {
    margin: 0 0 8px;
    color: var(--m-text-muted);
    font-size: 12px;
}

/* Impôt annuel selon les régimes (TaxRegimeBenchmarkPage) : légende en puces qui affichent / masquent les courbes. */
.m-regime-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.m-regime-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--m-border);
    border-radius: 16px;
    background: var(--m-surface);
    color: var(--m-text);
    font-size: 13px;
    cursor: pointer;
}

.m-regime-toggle--off {
    color: var(--m-text-muted);
    opacity: 0.5;
    text-decoration: line-through;
}

.m-regime-totals {
    padding: 4px 16px;
}

.m-regime-total {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.m-regime-total + .m-regime-total {
    border-top: 1px solid #f0f1f3;
}

.m-regime-total .m-regime-name {
    flex: 1;
    min-width: 0;
}

/* Détail d'un régime (BenchmarkDetailPopup MAUI). */
.m-returns--separated {
    padding-top: 15px;
    border-top: 1px solid #f0f1f3;
}

.m-returns-label {
    color: var(--m-text-muted);
    font-size: 15px;
}

.m-returns-plain {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--m-text);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.m-benchmark-detail-chart .m-chart {
    height: 220px;
}

/* ═══════════════ Simulation plus-value (BilanPlusValuePage.xaml) ═══════════════ */

.m-plusvalue-operation {
    color: var(--m-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.m-plusvalue-result {
    grid-auto-columns: 1fr;
    margin: 0 0 14px;
    padding: 0;
}

/* ═══════════════ Lot 13 : réglages, compte, abonnements ═══════════════ */

/* Réglages : listes groupées du menu des fonctionnalités, posées sur la page. */
.m-settings .m-features-group,
.m-account-group {
    margin-top: 18px;
}

.m-settings .m-features-group:first-child {
    margin-top: 6px;
}


.m-features-item:disabled {
    opacity: 0.6;
    cursor: default;
}

.m-settings-about {
    padding: 4px 14px 12px;
}

.m-settings-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f1f3;
    color: var(--m-text);
    font-size: 15px;
}

.m-settings-row-value {
    color: var(--m-text-muted);
    font-variant-numeric: tabular-nums;
}

.m-settings-note {
    margin: 12px 0 0;
    color: var(--m-text-muted);
    font-size: 13px;
    line-height: 1.45;
}

/* Mon compte : profil centré, bannières de statut, zone de suppression. */
.m-account-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.m-account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--m-primary);
    color: #fff;
    font-size: 26px;
    font-weight: 700;
}

.m-account-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 100%;
}

.m-account-email {
    overflow-wrap: anywhere;
    color: var(--m-text);
    font-size: 16px;
    font-weight: 700;
}

.m-account-status {
    color: var(--m-positive);
    font-size: 13px;
    font-weight: 600;
}

.m-account-profile .m-button {
    margin-top: 4px;
}

.m-account-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    padding: 12px 14px;
    border-radius: var(--m-radius);
    background: color-mix(in srgb, var(--m-primary) 8%, white);
    color: var(--m-text);
    font-size: 14px;
    line-height: 1.4;
}

.m-account-banner .m-icon {
    color: var(--m-primary);
}

.m-account-banner--positive {
    background: color-mix(in srgb, var(--m-positive) 10%, white);
}

.m-account-banner--positive .m-icon {
    color: var(--m-positive);
}

.m-account-danger {
    margin-top: 28px;
    border-color: color-mix(in srgb, var(--m-negative) 45%, white);
}

.m-account-danger-title {
    margin: 0 0 6px;
    color: var(--m-negative);
    font-size: 15px;
    font-weight: 700;
}

.m-account-danger-text {
    margin: 0 0 14px;
    color: var(--m-text);
    font-size: 14px;
    line-height: 1.45;
}

/* Achats et abonnements. */
.m-subscription {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.m-subscription .m-account-banner {
    align-self: stretch;
}

.m-subscription-restore {
    margin: 14px 0 0;
    color: var(--m-text-muted);
    font-size: 14px;
    text-align: center;
}

.m-subscription-help {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 32px;
    text-align: center;
}

.m-subscription-help-text {
    margin: 0;
    color: var(--m-text-muted);
    font-size: 13px;
    line-height: 1.45;
}

/* ═══════════════ Lot 14 : export ═══════════════ */

/* Champ texte sur une ligne (le style de base vise les montants). */
.m-text-input.m-text-input--text {
    padding: 8px 0;
    border-bottom: 1px solid var(--m-border);
    font-size: 16px;
}

.m-text-input.m-text-input--text:focus {
    border-bottom-color: var(--m-primary);
}

.m-field-note.m-field-note--above {
    margin: 2px 0 4px;
    color: var(--m-text-muted);
}

/* Bouton de validation d'une page formulaire, collé en bas (comme .m-flux-footer). */
.m-page-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 16px -10px 0;
    padding: 10px 10px calc(10px + var(--m-safe-bottom));
    background: var(--m-background);
}

.m-subpage-body:has(.m-page-footer) {
    padding-bottom: 0;
}

.m-report-logo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.m-report-logo-image {
    width: 90px;
    height: 90px;
    border: 1px solid #e3e5e8;
    border-radius: 8px;
    background: #fff;
    object-fit: contain;
}

.m-report-logo-pick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px dashed var(--m-primary);
    border-radius: var(--m-radius);
    background: color-mix(in srgb, var(--m-primary) 5%, white);
    color: var(--m-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.m-report-logo-pick:has(input:focus-visible) {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.m-report-logo-remove {
    color: var(--m-negative);
}

/* Export en cours (ExportablePageControlTemplate MAUI) : voile + message, taps bloqués. */
.m-export-overlay {
    position: fixed;
    inset: 0;
    z-index: 850;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.35);
    animation: m-fade-in 0.2s ease-out;
}

.m-export-overlay-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    border-radius: 14px;
    background: var(--m-surface);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
    color: var(--m-text);
    font-size: 16px;
    font-weight: 600;
}

.m-export-overlay-card .m-spinner {
    width: 22px;
    height: 22px;
}

/* ═══════════════ Nouvelle version (UpdateBanner) ═══════════════ */

/* Carte flottante en haut de l'écran (le bas est pris par les actions flottantes de l'accueil), au-dessus des pages,
 * sous les sheets (hors de .m-app) et le voile d'export. */
.m-update-banner {
    position: fixed;
    top: calc(8px + var(--m-safe-top));
    right: 10px;
    left: 10px;
    z-index: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px 8px 14px;
    border: 1px solid var(--m-border);
    border-radius: 14px;
    background: var(--m-surface);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
    color: var(--m-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    animation: m-fade-in 0.2s ease-out;
}

.m-update-banner-icon {
    color: var(--m-primary);
    font-size: 22px;
}

.m-update-banner-text {
    flex: 1;
    min-width: 0;
}

.m-update-banner-action {
    flex-shrink: 0;
    padding: 8px 12px;
    border: none;
    border-radius: 999px;
    background: var(--m-primary);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.m-update-banner-action:disabled {
    opacity: 0.6;
}

.m-update-banner-close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: none;
    color: var(--m-text-muted);
    cursor: pointer;
}

.m-update-banner-close .material-icons {
    font-size: 20px;
}

/* ═══════════════ Immeuble de rapport (lot 15) ═══════════════ */

/* Récap de l'immeuble : bandeau bleu d'une ligne (carte du récap de l'accueil, décor RecapShades) : deux chiffres
 * côte à côte, « année 2 » en exposant après chaque valeur, chevron à droite. Touchable (ouvre le Prévisionnel). */
.m-app .m-building-recap {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    overflow: hidden;
    padding: 10px 8px 10px 14px;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    background: var(--m-primary);
    color: #fff;
    text-align: left;
    cursor: pointer;
    --m-recap-padding: 0px;
}

.m-building-recap:active {
    opacity: 0.85;
}

.m-building-recap > :not(.m-recap-shades) {
    position: relative;
    z-index: 1;
}

.m-building-recap-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.m-building-recap-item + .m-building-recap-item {
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.m-building-recap-label {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Montant long : « année 2 » passe sous la valeur plutôt que de déborder sur la colonne voisine. */
.m-building-recap-value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 4px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.m-building-recap-year {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    opacity: 0.8;
    align-self: flex-start;
    margin-top: 3px;
}

.m-building-recap .m-building-recap-chevron {
    font-size: 22px;
    opacity: 0.85;
}

/* Lignes « Projet » : libellé au-dessus, valeur en dessous (les descriptions de prêt sont longues). */
.m-features-item-value {
    color: var(--m-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.m-features-item-text--stacked {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.m-features-item-text--stacked .m-features-item-label {
    color: var(--m-text-muted);
    font-size: 13px;
    font-weight: 500;
}

.m-features-item-text--stacked .m-features-item-value {
    font-size: 16px;
    white-space: normal;
}

.m-building-units {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.m-building-unit {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 14px 14px 16px;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    background: var(--m-surface);
    color: var(--m-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.m-building-unit:active {
    background: #f3f4f6;
}

.m-building-unit-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.m-building-unit-name {
    font-size: 15px;
    font-weight: 700;
}

.m-building-unit-line {
    color: var(--m-text-muted);
    font-size: 13px;
}

.m-building-unit .m-features-item-trailing {
    color: #a0a4ab;
    font-size: 20px;
}

.m-badge-warning {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: #fdf3d7;
    color: #9a7404;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.m-building-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.m-building-add .material-icons {
    font-size: 20px;
}

/* Prévisionnel de l'immeuble : graphiques dans des cartes d'une page qui défile. */
.m-building-chart .m-evolution-insights {
    margin: 0 -20px 14px;
    padding: 0 20px;
}

.m-building-chart .m-chart {
    height: clamp(240px, 42dvh, 380px);
}

.m-building-chart .m-evolution-hint {
    margin-bottom: 0;
}

/* Type de lot : fiscalité résumée (régime en titre, paramètres en dessous). */
.m-lot-tax {
    align-items: flex-start;
}

.m-lot-tax .m-features-item-trailing {
    align-self: center;
}

.m-lot-tax-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.m-lot-tax-regime {
    font-size: 15px;
    font-weight: 700;
}

.m-lot-tax-line {
    color: var(--m-text-muted);
    font-size: 13px;
    font-weight: 500;
}

/* Sheets de l'immeuble : total recalculé en direct au-dessus de Valider. */
.m-sheet-live-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: var(--m-text-muted);
    font-size: 14px;
}

.m-sheet-live-total strong {
    color: var(--m-text);
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Tantièmes : compteur des tantièmes restants collé en haut de la sheet. */
.m-tantiemes-counter {
    position: sticky;
    top: -8px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 -16px 8px;
    padding: 10px 16px;
    background: #fdf3d7;
    color: #9a7404;
    font-size: 14px;
    font-weight: 700;
}

.m-tantiemes-counter .material-icons {
    font-size: 20px;
}

.m-tantiemes-counter--done {
    background: color-mix(in srgb, var(--m-positive) 12%, white);
    color: var(--m-positive);
}

.m-tantiemes-counter-total {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    opacity: 0.85;
}

/* ═══════════════ Multi-projets (lot 16) ═══════════════ */

/* Sélection de projets (ProjectPicker). */
.m-picker-intro {
    margin: 4px 2px 10px;
    color: var(--m-text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.m-picker-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 2px 8px;
}

.m-picker-count {
    color: var(--m-text-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.m-picker-type {
    flex-shrink: 0;
    color: #a0a4ab;
    font-size: 20px;
}

.m-app .m-picker-item .m-picker-check {
    flex-shrink: 0;
    color: #b0b4ba;
    font-size: 24px;
}

.m-app .m-picker-item--selected .m-picker-check,
.m-app .m-picker-item--selected .m-picker-type {
    color: var(--m-primary);
}

.m-picker-hint {
    margin: 0 0 8px;
    color: var(--m-text-muted);
    font-size: 13px;
    text-align: center;
}

/* Classement des projets : liste verticale avec barre proportionnelle à la valeur du critère. */
.m-ranking {
    overflow: hidden;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    background: var(--m-surface);
    transition: opacity 0.2s;
}

.m-ranking--loading {
    opacity: 0.5;
}

.m-ranking-row {
    display: flex;
    align-items: center;
    border-left: 3px solid transparent;
}

.m-ranking-row + .m-ranking-row {
    border-top: 1px solid #f0f1f3;
}

.m-ranking-row--compared {
    border-left-color: #8e6bbf;
    background: color-mix(in srgb, #8e6bbf 6%, white);
}

.m-app .m-ranking-main {
    display: flex;
    flex: 1;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 12px 4px 12px 10px;
    border: 0;
    background: none;
    color: var(--m-text);
    text-align: left;
    cursor: pointer;
}

.m-ranking-rank {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eef0f2;
    color: var(--m-text);
    font-size: 13px;
    font-weight: 800;
}

.m-ranking-row--leader .m-ranking-rank {
    background: #d4a72c;
    color: #fff;
}

.m-ranking-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.m-ranking-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.m-ranking-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-ranking-value {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.m-ranking-track {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: #eef0f2;
}

.m-ranking-bar {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: color-mix(in srgb, var(--m-primary) 45%, white);
}

.m-ranking-row--leader .m-ranking-bar {
    background: var(--m-primary);
}

.m-ranking-row--compared .m-ranking-bar {
    background: #8e6bbf;
}

.m-ranking .m-ranking-bar--negative {
    background: var(--m-negative);
}

.m-ranking-note {
    color: var(--m-text-muted);
    font-size: 12px;
}

.m-ranking-detail {
    flex-shrink: 0;
    color: #a0a4ab;
}

.m-ranking-hint {
    margin-top: 8px;
}

/* Analyse du patrimoine. */
.m-estate-count {
    margin: 8px 2px 0;
    color: var(--m-text-muted);
    font-size: 13px;
}

.m-estate-count strong {
    color: var(--m-text);
}

.m-estate-chart-link {
    display: block;
    margin: 10px 0 0 auto;
}

.m-estate-regimes {
    margin-bottom: 4px;
}

.m-estate-regimes .m-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.m-estate-regime-icon {
    flex-shrink: 0;
}

.m-warning-note {
    display: flex;
    gap: 8px;
    margin: 12px 0 0;
    padding: 12px;
    border-radius: 8px;
    background: #fdf3d7;
    color: #7a5c03;
    font-size: 13px;
    line-height: 1.4;
}

.m-warning-note .m-icon {
    flex-shrink: 0;
    color: #9a7404;
}

.m-estate-asset {
    cursor: default;
}

.m-app button.m-estate-asset {
    cursor: pointer;
}

.m-estate-asset-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.m-estate-asset-head .m-building-unit-name {
    flex: 1;
    min-width: 0;
}

.m-estate-asset-cost {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.m-estate-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.m-estate-share-track {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #eef0f2;
}

.m-estate-share-bar {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--m-secondary);
}

.m-estate-share-value {
    flex-shrink: 0;
    color: var(--m-text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.m-estate-beta {
    margin: 20px 0 8px;
    color: var(--m-text-muted);
    font-size: 12px;
    text-align: center;
}

/* Prévisionnel des flux du parc : années dépliables (scroll-margin : sous la toolbar collante). */
.m-cashflow-year {
    scroll-margin-top: calc(60px + var(--m-safe-top));
}

.m-cashflow-year-value {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.m-cashflow-sub {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0 2px 18px;
    color: var(--m-text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.m-cashflow-sub > :last-child {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Immeuble dans le patrimoine (sheet). */
.m-building-details-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.m-building-details-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.m-building-details-label {
    color: var(--m-text-muted);
    font-size: 12px;
}

.m-building-details-value {
    color: var(--m-primary);
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Action de pied de page indisponible (ex. moins de 2 projets à comparer). */
.m-app .m-page-footer .m-button:disabled {
    opacity: 0.45;
    cursor: default;
}

/* ═══════════════ Paywall (page plein écran) ═══════════════
 * PaywallPage : contenu qui défile (en-tête, formules, arguments, liens) + pied fixe (bouton d'achat, réassurance).
 * Ouvert comme une modale, rendu en page : m-sheet--screen (MobileComponentRegistry.IsFullScreen).
 */

.m-sheet--screen {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: none;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    background: var(--m-background);
    box-shadow: none;
}

.m-paywall {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.m-paywall-scroll {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Barre du haut (marque blanche, étape paiement). */
.m-paywall-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 52px;
    padding: var(--m-safe-top) 4px 0 16px;
    background: var(--m-surface);
    border-bottom: 1px solid #e5e7eb;
}

.m-paywall-bar-title {
    font-size: 16px;
    font-weight: 700;
}

.m-paywall-close {
    color: var(--m-text-muted);
}

/* Voile sombre : lisible sur l'en-tête coloré comme sur le contenu clair. */
.m-paywall-close--floating {
    position: absolute;
    top: calc(var(--m-safe-top) + 8px);
    right: 8px;
    z-index: 1;
    width: 36px;
    height: 36px;
    background: rgba(15, 23, 42, 0.28);
    color: #fff;
}

.m-paywall-close--floating .material-icons {
    font-size: 20px;
}

.m-paywall-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--m-text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* ── En-tête ── */

.m-paywall-hero {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: calc(var(--m-safe-top) + 52px) 20px 28px;
    background: var(--m-diagonal-brush);
    color: #fff;
}

.m-paywall-hero-feature {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 13px;
    font-weight: 600;
}

.m-paywall-hero-icon {
    margin-bottom: 4px;
}

.m-paywall-hero-title {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
}

.m-paywall-hero-subtitle {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    opacity: 0.92;
}

/* ── Formules ── */

.m-paywall-plans {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 16px 4px;
}

/* Remonte sur l'en-tête quand les formules le suivent : l'offre est visible sans défiler. */
.m-paywall-hero + .m-paywall-plans {
    margin-top: -14px;
    padding-top: 0;
}

.m-paywall-plans-loading {
    display: flex;
    justify-content: center;
    padding: 28px;
    border-radius: var(--m-radius);
    background: var(--m-surface);
}

.m-paywall-plan {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 14px 14px;
    border: 1.5px solid var(--m-border);
    border-radius: 12px;
    background: var(--m-surface);
    color: var(--m-text);
    text-align: left;
    cursor: pointer;
}

.m-paywall-plan--selected {
    border-color: var(--m-primary);
    box-shadow: 0 0 0 1px var(--m-primary);
    background: color-mix(in srgb, var(--m-primary) 5%, white);
}

.m-paywall-plan-radio {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--m-border);
    border-radius: 50%;
}

.m-paywall-plan--selected .m-paywall-plan-radio {
    border-color: var(--m-primary);
    background: radial-gradient(circle, var(--m-primary) 0 5px, transparent 6px);
}

.m-paywall-plan-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.m-paywall-plan-name {
    font-size: 16px;
    font-weight: 700;
}

.m-paywall-plan-detail {
    color: var(--m-text-muted);
    font-size: 13px;
}

.m-paywall-plan-savings {
    color: var(--m-positive);
    font-size: 13px;
    font-weight: 700;
}

.m-paywall-plan-price {
    flex-shrink: 0;
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
}

.m-paywall-plan-suffix {
    margin-left: 2px;
    color: var(--m-text-muted);
    font-size: 13px;
    font-weight: 600;
}

/* Badge à cheval sur le bord haut de la carte. */
.m-paywall-plan-badge {
    position: absolute;
    top: 0;
    right: 14px;
    transform: translateY(-50%);
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--m-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ── Arguments ── */

.m-paywall-benefits {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 20px 16px 0;
    list-style: none;
}

.m-paywall-benefit {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--m-radius);
    background: var(--m-surface);
}

/* Sélecteur doublé : la feuille Material Icons (chargée après) impose font-size 24px et line-height 1.
 * Centrage par line-height = hauteur du fond. */
.m-paywall-benefit-icon.material-icons {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 20px;
    line-height: 36px;
    text-align: center;
}

.m-paywall-benefit-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.m-paywall-benefit-title {
    font-size: 15px;
    font-weight: 700;
}

.m-paywall-benefit-bullet {
    font-size: 13px;
    line-height: 1.35;
}

.m-paywall-benefit--green .m-paywall-benefit-icon { color: #059669; background: rgba(16, 185, 129, 0.12); }
.m-paywall-benefit--blue .m-paywall-benefit-icon { color: #3b82f6; background: rgba(59, 130, 246, 0.12); }
.m-paywall-benefit--purple .m-paywall-benefit-icon { color: #8b5cf6; background: rgba(139, 92, 246, 0.12); }
.m-paywall-benefit--amber .m-paywall-benefit-icon { color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
.m-paywall-benefit--teal .m-paywall-benefit-icon { color: #059669; background: rgba(5, 150, 105, 0.12); }
.m-paywall-benefit--orange .m-paywall-benefit-icon { color: #ea580c; background: rgba(234, 88, 12, 0.12); }

/* ── Liens (restauration, CGU, confidentialité) ── */

.m-paywall-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px 16px 24px;
    color: var(--m-text-muted);
    font-size: 13px;
    text-align: center;
}

.m-paywall-links .m-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    font-weight: 600;
}

.m-paywall-legal {
    display: flex;
    align-items: center;
    gap: 8px;
}

.m-paywall-legal .m-link {
    color: var(--m-text-muted);
}

/* ── Pied fixe : bouton d'achat + réassurance ── */

.m-paywall-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px calc(12px + var(--m-safe-bottom));
    background: var(--m-surface);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
}

.m-paywall-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--m-primary);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

.m-paywall-cta:active {
    opacity: 0.85;
}

.m-paywall-cta:disabled {
    opacity: 0.5;
}

.m-paywall-reassurance {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--m-text-muted);
    font-size: 12px;
}

.m-paywall-reassurance li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.m-paywall-reassurance .material-icons {
    color: var(--m-positive);
    font-size: 15px;
}

/* ── Étape paiement (web) : checkout Stripe sur fond blanc, toute la largeur ── */

.m-paywall-checkout {
    background: #fff;
    padding-bottom: var(--m-safe-bottom);
}

.m-paywall-checkout-container {
    width: 100%;
}

.m-paywall-checkout-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #fff;
    color: var(--m-text-muted);
    font-size: 14px;
}

/* data-ready : posé par StripeCheckout.Mount quand le formulaire est affiché. */
.m-paywall-checkout-container[data-ready] + .m-paywall-checkout-loader {
    display: none;
}

/* ── Marque blanche : contact du tenant ── */

.m-paywall-wl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 32px 24px;
    text-align: center;
}

.m-paywall-wl-logo {
    max-width: 160px;
    max-height: 80px;
}

.m-paywall-wl-contact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--m-primary);
    font-weight: 600;
    text-decoration: none;
}

/* ═══════════════ Icônes (Components/Icons/AppIcon) ═══════════════
 * Style « plan & aplat, encre & or » : grille 24, trait arrondi (épaisseur portée par l'attribut stroke-width).
 * Icône d'interface : couleur du texte, aplat translucide. Icône métier : trait encre, détails et aplat dorés.
 * Sur fond sombre (OnDark) : trait blanc, or clair. */
.m-icon {
    display: inline-block;
    flex: none;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.m-icon-a {
    fill: currentColor;
    fill-opacity: 0.15;
    stroke: none;
}

.m-icon--domain {
    color: var(--m-icon-ink);
}

.m-icon--domain .m-icon-k {
    stroke: var(--m-icon-gold);
}

.m-icon--domain .m-icon-a {
    fill: var(--m-icon-gold);
    fill-opacity: 0.24;
}

.m-icon--on-dark {
    color: #fff;
}

.m-icon--on-dark .m-icon-a {
    fill-opacity: 0.24;
}

.m-icon--domain.m-icon--on-dark .m-icon-k {
    stroke: var(--m-icon-gold-on-dark);
}

.m-icon--domain.m-icon--on-dark .m-icon-a {
    fill: var(--m-icon-gold-on-dark);
    fill-opacity: 0.3;
}

/* Pastille sablée (AppIconChip) : toute icône qui accompagne un libellé dans un menu ou une liste. Une icône
 * d'interface y prend l'encre, comme les icônes métier. 34px pour une icône de 20. */
.m-icon-chip {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--m-radius);
    background: var(--m-icon-chip);
}

.m-icon-chip .m-icon--ui,
.m-icon-chip .material-icons {
    color: var(--m-icon-ink);
}

/* Glyphe Material gardé sur une pastille (export PDF des paramètres). */
.m-icon-chip .material-icons {
    font-size: 20px;
}

.m-icon-chip--sm {
    width: 22px;
    height: 22px;
    border-radius: 7px;
}

.m-icon-chip--md {
    width: 32px;
    height: 32px;
}

.m-icon-chip--hub {
    width: 40px;
    height: 40px;
}

.m-icon-chip--xl {
    width: 56px;
    height: 56px;
    border-radius: 14px;
}

.m-icon-chip--gold .m-icon {
    color: var(--m-icon-gold);
}

/* Variantes de sens : alerte (ambre), action destructive (rouge pâle). */
.m-icon-chip--warning {
    background: #fbf0dc;
}

.m-icon-chip--warning .m-icon {
    color: #a2671a;
}

.m-icon-chip--danger {
    background: #fbeceb;
}

.m-icon-chip--danger .m-icon {
    color: #c5524b;
}