/*
 * 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;
    --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). */
.m-page:has(.m-sim) {
    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;
    --m-collapse-distance: 0px;
    --m-compact-height: calc(56px + var(--m-safe-top));
}

/* Header sticky à top négatif : il remonte jusqu'à ne laisser visible que la barre compacte. */
.m-sim-header {
    position: sticky;
    top: calc(-1 * var(--m-collapse-distance));
    z-index: 20;
    background: var(--m-background);
}

/* PageWavedToolbarControlTemplate MAUI : forme vague + BrightBrush, dessinés par .m-sim-toolbar-bg. */
.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 > :not(.m-sim-toolbar-bg) {
    position: relative;
    z-index: 1;
}

.m-sim-toolbar-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.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,
.m-sim-toolbar > .m-sim-actions {
    opacity: calc(1 - var(--m-scroll-progress) * 2.5);
}

.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;
    z-index: 1;
    display: grid;
    gap: 5px;
    padding: 10px;
    opacity: calc(1 - var(--m-scroll-progress) * 1.4);
    transform: translateY(calc(var(--m-scroll-progress) * -16px)) scale(calc(1 - var(--m-scroll-progress) * 0.04));
    transform-origin: bottom center;
}

/* Cartes bleues du récap : Border MAUI (Primary, contour Gray200, rayon 10, Padding 10 / 12) + décor
 * BlueShadesBackground(Bis) reproduit à l'identique par RecapShades.razor : zone de 100px de haut
 * (hauteur minimale du contenu) centrée verticalement dans le padding, opacité 0.8. */
.m-recap-main,
.m-recap-yield {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    background: var(--m-primary);
    color: #fff;
}

.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;
}

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

.m-recap-main {
    --m-recap-padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: calc(100px + 2 * var(--m-recap-padding) + 2px);
    padding: var(--m-recap-padding);
}

/* VerticalAmountView MAUI : nom + valeur centrés. */
.m-recap-indicator {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.m-recap-name,
.m-recap-value,
.m-recap-prediction,
.m-sim-compact-indicator {
    border: 0;
    background: none;
    cursor: pointer;
}

.m-recap-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 4px 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    text-align: left;
}

.m-recap-name > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-recap-caret {
    font-size: 16px;
    opacity: 0.75;
}

.m-recap-value {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 0;
    color: #fff;
}

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

.m-recap-amount {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.m-recap-amount--small {
    font-size: 22px;
}

.m-recap-evolution {
    font-size: 11px;
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: 0.85;
    white-space: nowrap;
}

.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;
}

.m-recap-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;
}

.m-recap-yield {
    --m-recap-padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100px + 2 * var(--m-recap-padding) + 2px);
    padding: var(--m-recap-padding);
}

.m-recap-prediction {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px 10px 16px;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    background: var(--m-diagonal-brush);
    color: #fff;
    font-size: 13px;
}

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

.m-recap-prediction-curve path {
    fill: none;
    stroke: #d4af37;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    animation: m-curve-draw 1.2s ease-out 0.2s forwards;
}

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

/* ── Barre compacte (header replié) ── */

.m-sim-compact {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--m-compact-height);
    padding: var(--m-safe-top) 8px 0 20px;
    background: var(--m-bright-brush);
    color: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
    opacity: calc((var(--m-scroll-progress) - 0.55) * 2.3);
    pointer-events: none;
}

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

.m-sim-compact-indicator {
    display: flex;
    flex: 1;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    padding: 0;
    color: #fff;
    text-align: left;
    transform: translateY(calc((1 - var(--m-scroll-progress)) * 10px));
}

.m-sim-compact-label {
    overflow: hidden;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.85;
}

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

/* ── 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 (HomePageTabItem MAUI) : emoji + libellé en capitales espacées (TabTitleStyle), texte gris ; actif en
 * 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 {
    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;
}

.m-sim-tab-emoji {
    margin-right: 4px;
}

.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));
}

.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: 96px;
    margin: 10px 10px 0;
    border-radius: var(--m-radius);
    background: #dfe2e4;
}

.m-sim-loading-card--short {
    height: 72px;
    margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .m-recap-prediction-curve path {
        animation: none;
        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;
}

/* 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 {
    color: #a0a4ab;
    font-size: 20px;
}

.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-emoji {
    font-size: 20px;
}

.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 .material-icons {
    color: var(--m-primary);
    font-size: 20px;
}

/* 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é sur fond clair (le récap l'utilise sur fond bleu). */
.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 10px 16px;
    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;
    color: var(--m-primary);
    font-size: 30px;
    opacity: 0.7;
}

/* 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-year-chips {
    display: flex;
    gap: 6px;
    margin: 0 -10px 4px;
    padding: 2px 10px 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.m-year-chips::-webkit-scrollbar {
    display: none;
}

.m-app .m-year-chips .m-chip {
    flex-shrink: 0;
    min-width: 44px;
}

.m-schedule-year {
    margin-top: 12px;
    /* Cible des puces d'années : sous la toolbar collante. */
    scroll-margin-top: calc(60px + var(--m-safe-top));
    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;
}

/* ═══════════════ É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,
.m-tax-chart .m-evolution-insights {
    margin: 0 0 14px;
    padding: 0;
}

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

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

.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;
}

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

.m-ledger-row--selectable: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: 2px 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 .m-features-item-icon.m-settings-icon--gold {
    background: #fdf3d7;
    color: #c99a06;
}

.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-avatar .material-icons {
    font-size: 32px;
}

.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 .material-icons {
    color: var(--m-primary);
    font-size: 20px;
}

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

.m-account-banner--positive .material-icons {
    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 {
    color: var(--m-primary);
    font-size: 18px;
}

.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 .material-icons {
    flex-shrink: 0;
    color: #9a7404;
    font-size: 18px;
}

.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-icon {
    align-self: center;
    color: var(--m-primary);
    font-size: 18px;
}

.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;
}