/*
 * 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.
 */

.m-app {
    --m-primary: var(--tenant-primary, #185a9d);
    --m-secondary: var(--tenant-secondary, #43cea2);
    /* 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;
    --m-text: #212121;
    --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: var(--tenant-font, 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) + décor de cercles verts
 * (inspiré de BlueShadesBackground, recentré et densifié pour rester visible sur ces formats de carte).
 * Cercles en radial-gradient : ils restent ronds quelle que soit la taille de la carte. */
.m-recap-main,
.m-recap-yield {
    --m-circle-strong: color-mix(in srgb, var(--m-secondary) 34%, transparent);
    --m-circle-soft: color-mix(in srgb, var(--m-secondary) 22%, transparent);
    --m-circle-faint: color-mix(in srgb, var(--m-secondary) 14%, transparent);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    background: var(--m-primary);
    color: #fff;
}

.m-recap-main::before,
.m-recap-yield::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.m-recap-main::before {
    background:
        radial-gradient(circle 58px at 62% 78%, var(--m-circle-strong) 57px, transparent 58px),
        radial-gradient(circle 34px at 14% 70%, var(--m-circle-soft) 33px, transparent 34px),
        radial-gradient(circle 22px at 38% 12%, var(--m-circle-soft) 21px, transparent 22px),
        radial-gradient(circle 44px at 92% 8%, var(--m-circle-faint) 43px, transparent 44px),
        radial-gradient(circle 12px at 80% 42%, var(--m-circle-soft) 11px, transparent 12px);
}

.m-recap-yield::before {
    background:
        radial-gradient(circle 40px at 78% 62%, var(--m-circle-strong) 39px, transparent 40px),
        radial-gradient(circle 20px at 16% 30%, var(--m-circle-soft) 19px, transparent 20px),
        radial-gradient(circle 14px at 48% 92%, var(--m-circle-soft) 13px, transparent 14px),
        radial-gradient(circle 9px at 94% 16%, var(--m-circle-faint) 8px, transparent 9px);
}

.m-recap-main > *,
.m-recap-yield > * {
    position: relative;
    z-index: 1;
}

.m-recap-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px 12px 16px;
}

/* 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 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
}

.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: 4px;
    padding: 8px 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

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

/* Onglets en pastilles : actif = pastille Primary pleine. */
.m-sim-tab {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--m-text-muted);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

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

/* ── Sections / blocs ── */

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

.m-sim-section {
    margin-bottom: 10px;
}

/* 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: 400;
}

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

.m-field-input-wrap {
    display: flex;
    flex: 1;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    border-bottom: 1px solid var(--m-border);
    transition: border-color 0.2s;
}

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

.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: 30%;
    overflow: hidden;
    color: var(--m-text-muted);
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Stepper MAUI : bordure grise arrondie, − | +. */
.m-stepper {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    height: 44px;
    border: 1px solid #919191;
    border-radius: 22px;
}

.m-stepper-button {
    width: 48px;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.m-stepper-button:first-child {
    border-radius: 22px 0 0 22px;
}

.m-stepper-button:last-child {
    border-radius: 0 22px 22px 0;
    font-weight: 700;
}

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

.m-stepper-separator {
    width: 1px;
    height: 60%;
    background: #919191;
}

/* 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;
}

.m-recap-title {
    margin: 14px 0 4px;
    color: var(--m-text);
    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;
}

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

.m-fab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 20px 0 16px;
    border: 1px solid var(--m-border);
    border-radius: 26px;
    background: var(--m-surface);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
    color: var(--m-text);
    font-size: 15px;
    font-weight: 700;
    pointer-events: auto;
    cursor: pointer;
}

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