/* ──────────────────────────────────────────────────────────────────────────
   Kredy — feuille de style principale
   Les valeurs viennent du design validé (aiDocs/design_handoff_kredy_mvp).
   ────────────────────────────────────────────────────────────────────────── */

/* ─── Polices ─────────────────────────────────────────────────────────────
   Auto-hébergées : un lien vers Google Fonts casserait l'affichage hors
   connexion, précisément le scénario que le produit doit couvrir.
   Sous-ensemble latin uniquement — le français et le wolof n'ont pas besoin
   de latin-ext, ce qui économise 90 ko sur une connexion 3G.              */
@font-face {
    font-family: 'Bricolage Grotesque';
    src: url("../fonts/bricolage-grotesque-latin-k0HXNf5.woff2") format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url("../fonts/source-sans-3-latin-8PKsh_E.woff2") format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

/* ─── Jetons de couleur ───────────────────────────────────────────────────
   Les hex sont le rendu sRGB des valeurs oklch du design, pour les WebView
   Android anciennes ; les navigateurs récents reçoivent l'oklch exact.    */
:root {
    --ink: #140B05;
    --cream: #FCF4EB;
    --surface: #FFFBF7;
    --amber: #A63C00;
    --amber-brand: #D55C13;
    --olive: #5C6C14;
    --olive-text: #354000;
    --olive-light: #C4E4A5;
    --error: #BE222A;
    --border: #E3DDD8;
    --field: #DDD6D1;
    --field-line: #D3CCC7;
    --skeleton: #EAE3DE;
    --text-2: #5E534A;
    --text-3: #6C6158;
    --tab-off: #84786F;
    --chip-on-ink: #30271F;
    --nav-active-bg: #302017;
    --nav-active-text: #FFA659;
    --on-ink-2: #B8ABA2;
    --on-ink-3: #A89C92;
    --on-ink-strong: #F0EAE4;
    --on-ink-4: #AEA298;
    --on-ink-chip: #D5CBC3;
    --nav-inactive: #C1B5AB;
    --field-strong: #C9C3BE;
    --olive-bright: #7E903E;
    --on-ink-label: #998D83;
    --nav-outline: #443428;
    --rail: #EDE7DF;
    --chip: #F0EAE4;
    --chip-text: #362C24;
    --handle: #D6D0CB;
    --veil: rgb(20 11 5 / 45%);
    --olive-soft: rgb(92 108 20 / 14%);
    --amber-soft: #F6E7D8;
    --amber-line: #E7D2C2;
    --on-ink-late: #E9C6A6;

    --font-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
    --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
}

@supports (color: oklch(0.5 0.1 60)) {
    :root {
        --ink: oklch(0.16 0.02 60);
        --cream: oklch(0.97 0.015 70);
        --surface: oklch(0.99 0.008 70);
        --amber: oklch(0.50 0.17 42);
        --amber-brand: oklch(0.62 0.17 45);
        --olive: oklch(0.50 0.11 120);
        --olive-text: oklch(0.35 0.10 120);
        --olive-light: oklch(0.88 0.09 130);
        --error: oklch(0.52 0.19 25);
        --border: oklch(0.90 0.01 60);
        --field: oklch(0.88 0.01 60);
        --field-line: oklch(0.85 0.01 60);
        --skeleton: oklch(0.92 0.01 60);
        --text-2: oklch(0.45 0.02 60);
        --text-3: oklch(0.50 0.02 60);
        --tab-off: oklch(0.58 0.02 60);
        --chip-on-ink: oklch(0.28 0.02 60);
        --nav-active-bg: oklch(0.26 0.03 50);
        --nav-active-text: oklch(0.80 0.14 60);
        --on-ink-2: oklch(0.75 0.02 60);
        --on-ink-3: oklch(0.70 0.02 60);
        --on-ink-strong: oklch(0.94 0.01 70);
        --on-ink-4: oklch(0.72 0.02 60);
        --on-ink-chip: oklch(0.85 0.01 60);
        --nav-inactive: oklch(0.78 0.02 60);
        --field-strong: oklch(0.82 0.01 60);
        --olive-bright: oklch(0.62 0.11 120);
        --on-ink-label: oklch(0.65 0.02 60);
        --nav-outline: oklch(0.34 0.03 60);
        --rail: oklch(0.93 0.012 70);
        --chip: oklch(0.94 0.01 70);
        --chip-text: oklch(0.30 0.02 60);
        --handle: oklch(0.86 0.01 60);
        --veil: oklch(0.16 0.02 60 / 45%);
        --olive-soft: oklch(0.50 0.11 120 / 14%);
        --amber-soft: oklch(0.94 0.02 65);
        --amber-line: oklch(0.88 0.03 55);
        --on-ink-late: oklch(0.86 0.06 60);
    }
}

/* ─── Base ────────────────────────────────────────────────────────────────*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

/* Sans cela, `display: flex` l'emporterait sur l'attribut `hidden` et le voile
   resterait visible. */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
}

input,
select,
button,
textarea,
a {
    font-family: inherit;
}

a {
    color: var(--amber);
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─── Écrans d'authentification ───────────────────────────────────────────*/
.auth {
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.auth__col {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 32px 24px;
    animation: fadeUp 0.35s ease both;
}

.auth__logo {
    width: 56px;
    height: 56px;
    border-radius: 15px;
    margin-bottom: 24px;
}

.auth__back {
    font-size: 14.5px;
    color: var(--text-2);
    margin-bottom: 22px;
    text-decoration: none;
    align-self: flex-start;
    padding: 4px 0;
}

.auth__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin: 0 0 8px;
}

.auth__subtitle {
    font-size: 15px;
    color: var(--text-2);
    margin: 0 0 28px;
}

.auth__title--alone {
    margin-bottom: 28px;
}

.auth__spacer {
    flex: 1;
    min-height: 24px;
}

.auth__link {
    font-size: 14px;
    color: var(--amber);
    font-weight: 700;
    margin-top: 14px;
    text-decoration: none;
    align-self: flex-start;
}

.auth__note {
    font-size: 14.5px;
    color: var(--text-2);
    margin: 0 0 14px;
}

/* ─── Champs ──────────────────────────────────────────────────────────────*/
.field {
    display: flex;
    flex-direction: column;
    margin-bottom: 22px;
}

.field:last-of-type {
    margin-bottom: 10px;
}

.field__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: 7px;
}

.field__input {
    border: none;
    border-bottom: 2px solid var(--field-line);
    background: none;
    padding: 12px 2px;
    font-size: 17px;
    color: var(--ink);
    border-radius: 0;
    outline: none;
    width: 100%;
}

.field__input:focus {
    border-bottom-color: var(--amber);
}

.field__input--code {
    font-size: 20px;
    letter-spacing: 10px;
}

.field__error,
.form-error {
    color: var(--error);
    font-size: 13.5px;
    margin: 0 0 8px;
}

/* ─── Boutons ─────────────────────────────────────────────────────────────*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    font-weight: 700;
    font-size: 16px;
    border-radius: 14px;
    padding: 17px;
    cursor: pointer;
    transition: transform 0.1s;
    text-decoration: none;
    width: 100%;
}

.btn:active {
    transform: scale(0.98);
}

.btn--primary {
    background: var(--amber);
    color: #FFF;
}

.btn--ink {
    background: var(--ink);
    color: var(--cream);
}

.btn--outline {
    background: none;
    border: 1.5px solid var(--field-line);
    color: var(--error);
}

/* ─── Écran de bienvenue ──────────────────────────────────────────────────*/
.welcome {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    background: var(--ink);
    animation: fadeUp 0.3s ease both;
}

.welcome__mark {
    width: 72px;
    height: 72px;
    margin-bottom: 22px;
}

.welcome__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.03em;
    color: var(--cream);
    margin: 0 0 8px;
}

.welcome__subtitle {
    font-size: 15px;
    color: var(--on-ink-2);
    margin: 0;
}

/* ─── Bascule desktop ─────────────────────────────────────────────────────*/
@media (min-width: 900px) {
    .auth__col {
        max-width: 440px;
        padding: 56px 32px;
    }
}

/* ─── Coquille applicative ────────────────────────────────────────────────*/
.shell {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.shell__main {
    flex: 1;
    min-width: 0;
}

.page {
    padding: 20px 20px 28px;
    animation: fadeUp 0.3s ease both;
}

.page__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.page__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.03em;
    margin: 0;
}

.page__count {
    font-size: 13px;
    color: var(--text-3);
}

/* ─── Navigation ──────────────────────────────────────────────────────────*/
.nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 10px 20px 14px;
}

.nav__brand {
    display: none;
}

.nav__list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 48px;
    min-height: 48px;
    justify-content: center;
    text-decoration: none;
    color: var(--tab-off);
}

.nav__item.is-active {
    color: var(--amber);
}

.nav__icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.nav__label {
    font-size: 10.5px;
    font-weight: 700;
}

/* La barre basse est fixe : le contenu doit pouvoir défiler au-dessus. */
.shell__main {
    padding-bottom: 84px;
}

/* ─── Recherche et ajout ──────────────────────────────────────────────────*/
.search {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.search__input {
    flex: 1;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--field);
    border-radius: 14px;
    padding: 13px 15px;
    font-size: 14.5px;
    color: var(--ink);
    outline: none;
}

.search__input:focus {
    border-color: var(--amber);
}

.search__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 48px;
    padding: 0 14px;
    background: var(--ink);
    color: var(--cream);
    border-radius: 14px;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
}

.search__add-label {
    display: none;
    font-size: 14.5px;
}

/* ─── Liste des clients ───────────────────────────────────────────────────*/
.clients {
    list-style: none;
    margin: 0;
    padding: 0;
}

.client {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--border);
}

.client__avatar {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--cream);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client__identity {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.client__name {
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client__sub {
    font-size: 12.5px;
    color: var(--text-2);
}

/* ─── États vides ─────────────────────────────────────────────────────────*/
.empty {
    padding: 36px 0;
    text-align: center;
}

.empty__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px;
}

.empty__text {
    font-size: 14.5px;
    color: var(--text-2);
    margin: 0 0 18px;
}

/* ─── Fiche client ────────────────────────────────────────────────────────*/
.detail__head {
    background: var(--ink);
    padding: 18px 20px 26px;
    animation: fadeUp 0.3s ease both;
}

.detail__back {
    font-size: 14.5px;
    color: var(--on-ink-2);
    text-decoration: none;
    display: inline-block;
    padding: 4px 0;
}

.detail__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.03em;
    color: var(--cream);
    margin: 8px 0 0;
}

.detail__phone {
    font-size: 13.5px;
    color: var(--on-ink-4);
    margin: 2px 0 0;
}

.detail__body {
    padding: 18px 20px 28px;
}

/* ─── Feuilles et formulaires de page ─────────────────────────────────────*/
.sheet__form {
    display: flex;
    flex-direction: column;
}

.sheet__actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.btn--ghost {
    background: none;
    border: 1.5px solid var(--field-strong);
    color: var(--ink);
    flex: 1;
}

.btn--wide {
    flex: 2;
}

/* ─── Toast ───────────────────────────────────────────────────────────────*/
.toast {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 96px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ink);
    color: var(--cream);
    font-size: 14px;
    border-radius: 16px;
    padding: 14px 16px;
    margin: 0;
    box-shadow: 0 10px 24px rgb(20 11 5 / 35%);
    animation: fadeUp 0.3s ease both;
}

/* La barre colorée dit la nature de ce qui vient d'être noté sans un mot de plus. */
.toast__bar {
    flex: none;
    width: 4px;
    height: 26px;
    border-radius: 2px;
    background: var(--amber-brand);
}

.toast--payment .toast__bar {
    background: var(--olive-bright);
}

/* ─── Solde dans la liste des clients ─────────────────────────────────────*/
.client__amount {
    flex: none;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.client__value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.02em;
}

.client__currency {
    font-size: 11px;
    color: var(--text-3);
}

/* Un solde à zéro se lit d'un coup d'œil : c'est la bonne nouvelle de l'écran. */
.client__amount--clear .client__value {
    color: var(--olive-text);
}

/* ─── Bandeau de la fiche client ──────────────────────────────────────────*/
.detail__label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-ink-3);
    margin: 22px 0 8px;
}

.detail__amount {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--cream);
    margin: 0;
}

.detail__currency {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--amber-brand);
    margin-left: 8px;
}

.sums {
    display: flex;
    gap: 22px;
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--chip-on-ink);
}

.sums__label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-ink-label);
    margin-bottom: 4px;
}

.sums__value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    color: var(--on-ink-strong);
    margin: 0;
}

.sums__value--paid {
    color: var(--olive-light);
}

/* ─── Corps de la fiche client ────────────────────────────────────────────*/
.detail__actions {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.detail__actions .btn {
    font-size: 15px;
    padding: 15px;
    white-space: nowrap;
}

/* La barre basse disparaît de la fiche client — en mobile seulement : la barre
   latérale du desktop reste le fil qui ramène au reste de l'application. */
.shell--bare .nav {
    display: none;
}

.shell--bare .shell__main {
    padding-bottom: 0;
}

.section__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
    margin: 0 0 4px;
}

.detail__edit {
    display: inline-block;
    margin-top: 22px;
    font-size: 14px;
    font-weight: 700;
    color: var(--amber);
    text-decoration: none;
}

/* ─── Lignes d'historique ─────────────────────────────────────────────────*/
.history {
    list-style: none;
    margin: 0;
    padding: 0;
}

.entry {
    border-bottom: 1px solid var(--border);
}

/* Toute la ligne est cliquable là où elle mène quelque part : une cible de la
   largeur de l'écran vaut mieux qu'un nom de 80 px à viser au pouce. */
.entry__link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    color: inherit;
    text-decoration: none;
}

.entry__bar {
    flex: none;
    width: 5px;
    height: 34px;
    border-radius: 3px;
    background: var(--ink);
}

.entry__identity {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.entry__kind {
    font-size: 14.5px;
    font-weight: 600;
}

.entry__sub {
    font-size: 13px;
    color: var(--text-3);
}

.entry__amount {
    flex: none;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.02em;
}

.entry--payment .entry__bar {
    background: var(--olive-text);
}

.entry--payment .entry__amount {
    color: var(--olive-text);
}

/* ─── Bouton « Noter » et actions de la barre ─────────────────────────────*/
.nav__note {
    width: 56px;
}

.fab {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transform: translateY(-16px);
}

.fab__disc {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--amber);
    color: #FFF;
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgb(166 60 0 / 42%);
}

.fab:active .fab__disc {
    transform: scale(0.96);
}

.nav__actions {
    display: none;
}

/* ─── Voile et feuilles ───────────────────────────────────────────────────*/
@keyframes sheetUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: none;
    }
}

@keyframes veil {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.99);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.veil {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: flex-end;
    background: var(--veil);
    animation: veil 0.2s ease both;
}

/* La feuille défile seule : le fond bougerait sous les doigts sans ce verrou. */
body.is-locked {
    overflow: hidden;
}

.sheet {
    width: 100%;
    max-height: 92%;
    overflow: auto;
    box-sizing: border-box;
    background: var(--surface);
    border-radius: 18px 18px 0 0;
    padding: 24px 22px 26px;
    animation: sheetUp 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.sheet__handle {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--handle);
    margin: 0 auto 20px;
}

.sheet__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.03em;
    margin: 0 0 16px;
}

.sheet--menu .btn {
    justify-content: flex-start;
    font-size: 15.5px;
    padding: 16px;
    margin-bottom: 10px;
}

.sheet__select,
.sheet__input {
    width: 100%;
    box-sizing: border-box;
    background: #FFF;
    border: 1px solid var(--field);
    border-radius: 14px;
    padding: 14px 15px;
    font-size: 15.5px;
    color: var(--ink);
    outline: none;
}

.sheet__select:focus,
.sheet__input:focus {
    border-color: var(--amber);
}

.sheet__hint {
    font-size: 12.5px;
    color: var(--text-2);
    margin: 8px 0 16px;
}

.sheet .field__label {
    display: block;
}

/* ─── Sélecteur de nature ─────────────────────────────────────────────────*/
.seg {
    display: flex;
    gap: 4px;
    background: var(--rail);
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.seg__item {
    flex: 1;
    border: none;
    background: none;
    border-radius: 9px;
    padding: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
}

.sheet--entry[data-type="credit"] .seg__item--credit,
.sheet--entry[data-type="payment"] .seg__item--payment {
    color: #FFF;
}

.sheet--entry[data-type="credit"] .seg__item--credit {
    background: var(--amber);
}

.sheet--entry[data-type="payment"] .seg__item--payment {
    background: var(--olive);
}

/* Les libellés des deux natures sont écrits dans le gabarit ; la nature active
   décide lequel s'affiche, ce qui garde les textes hors du JavaScript. */
.sheet--entry[data-type="credit"] [data-when="payment"],
.sheet--entry[data-type="payment"] [data-when="credit"] {
    display: none;
}

/* ─── Montant et raccourcis ───────────────────────────────────────────────*/
.amount {
    display: flex;
    align-items: baseline;
    gap: 10px;
    border-bottom: 2px solid var(--amber);
    margin-bottom: 18px;
}

.sheet--entry[data-type="payment"] .amount {
    border-bottom-color: var(--olive);
}

.amount__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    padding: 8px 2px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 34px;
    letter-spacing: -0.03em;
    color: var(--ink);
    outline: none;
}

.amount__currency {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-3);
}

.shortcuts {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.shortcut {
    flex: 1;
    border: none;
    background: var(--chip);
    border-radius: 10px;
    padding: 9px 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--chip-text);
    cursor: pointer;
    /* Un raccourci coupé en deux lignes déformerait toute la rangée. */
    white-space: nowrap;
}

.shortcut--whole {
    flex: 1.4;
    background: var(--olive-soft);
    color: var(--olive-text);
}

/* « Tout le solde » n'a de sens que pour un remboursement. */
.sheet--entry[data-type="credit"] .shortcut--whole {
    display: none;
}

/* ─── Boutons colorés par nature ──────────────────────────────────────────*/
.btn--credit {
    background: var(--amber);
    color: #FFF;
}

.btn--payment {
    background: var(--olive);
    color: #FFF;
}

.btn--payment-outline {
    background: none;
    border: 1.5px solid var(--nav-outline);
    color: var(--olive-light);
}

.sheet--entry[data-type="credit"] .btn--type {
    background: var(--amber);
    color: #FFF;
}

.sheet--entry[data-type="payment"] .btn--type {
    background: var(--olive);
    color: #FFF;
}

/* ─── Bascule desktop ─────────────────────────────────────────────────────*/
@media (min-width: 900px) {
    .shell {
        flex-direction: row;
    }

    .shell__main {
        padding-bottom: 0;
    }

    .nav {
        position: sticky;
        top: 0;
        inset: auto;
        align-self: flex-start;
        height: 100vh;
        width: 248px;
        flex: none;
        background: var(--ink);
        border-top: none;
        padding: 26px 18px;
    }

    .nav__brand {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--cream);
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 20px;
        margin-bottom: 24px;
    }

    .nav__brand img {
        border-radius: 8px;
    }

    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .nav__item {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 12px;
        color: var(--nav-inactive);
    }

    .nav__item.is-active {
        background: var(--nav-active-bg);
        color: var(--nav-active-text);
    }

    .nav__icon svg {
        width: 20px;
        height: 20px;
    }

    .nav__label {
        font-size: 14.5px;
    }

    .page {
        max-width: 860px;
        margin: 0 auto;
        padding: 38px 40px 56px;
    }

    .search__add {
        font-size: 15px;
    }

    .search__add-label {
        display: inline;
    }

    .detail {
        max-width: 860px;
        margin: 0 auto;
        padding: 38px 40px 56px;
    }

    .detail__head {
        border-radius: 22px;
        padding: 26px 28px;
    }

    .detail__body {
        max-width: 520px;
        padding: 18px 0 0;
    }

    .toast {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        max-width: 460px;
        bottom: 22px;
    }

    /* Le bouton flottant est une réponse au pouce : la barre latérale a la
       place d'afficher les deux natures en toutes lettres. */
    .nav {
        display: flex;
        flex-direction: column;
    }

    .shell--bare .nav {
        display: flex;
    }

    .nav__note,
    .sheet--menu {
        display: none;
    }

    .nav__actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: auto;
    }

    .nav__actions .btn {
        font-size: 15px;
        padding: 14px;
    }

    .veil {
        align-items: center;
        justify-content: center;
        padding: 32px;
    }

    .sheet {
        max-width: 460px;
        border-radius: 22px;
        padding: 28px;
        animation: modalIn 0.24s ease both;
    }

    .sheet__handle {
        display: none;
    }
}

/* ─── Accueil ─────────────────────────────────────────────────────────────*/
.home__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.home__brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.03em;
}

.home__brand img {
    border-radius: 8px;
}

.home__who {
    font-size: 13px;
    color: var(--text-3);
}

/* La salutation est le titre du desktop ; en mobile, la marque tient ce rôle. */
.home__hello {
    display: none;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -0.035em;
    margin: 0 0 22px;
}

.home__top {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}

/* ─── Carte du reste à recevoir ───────────────────────────────────────────*/
.total {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: var(--ink);
    border-radius: 22px;
    padding: 24px 22px;
}

/* Le motif de la marque, trois bâtons — décor, donc masqué aux lecteurs d'écran. */
.total__mark {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 5px;
    opacity: 0.5;
}

.total__mark i,
.blank__mark i {
    display: block;
    width: 4px;
    height: 26px;
    border-radius: 2px;
    background: var(--amber-brand);
}

.total__mark i:last-child {
    background: var(--olive-bright);
}

.total__label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-ink-3);
    margin: 0 0 12px;
}

.total__value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--cream);
    margin: 0;
}

.total__currency {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--amber-brand);
    margin: 4px 0 0;
}

.total__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
}

.chip-ink {
    font-size: 12.5px;
    color: var(--on-ink-chip);
    background: var(--chip-on-ink);
    border-radius: 20px;
    padding: 6px 12px;
}

.chip-ink--paid {
    color: var(--olive-light);
}

/* ─── Cartes du jour — desktop seulement ──────────────────────────────────*/
.cards {
    display: none;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 22px;
}

.card__label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
    margin: 0 0 10px;
}

.card__value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -0.03em;
    margin: 0;
}

.card__value--paid {
    color: var(--olive-text);
}

/* ─── Actions de l'accueil ────────────────────────────────────────────────*/
.home__actions {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.home__actions .btn {
    flex: 1;
    font-size: 15.5px;
    border-radius: 16px;
    padding: 16px;
}

.section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.section .section__label {
    margin: 0;
}

.section__link {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--amber);
    text-decoration: none;
}

/* Quatre lignes au pouce, six à l'écran large — le serveur en envoie six. */
.history--recent .entry:nth-child(n+5) {
    display: none;
}

/* ─── Cahier vierge ───────────────────────────────────────────────────────*/
.blank {
    text-align: center;
    padding: 48px 8px;
}

.blank__mark {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-bottom: 26px;
}

.blank__mark i {
    width: 6px;
    height: 44px;
    border-radius: 3px;
    background: var(--field);
}

.blank__mark i:last-child {
    background: var(--amber-brand);
    opacity: 0.5;
}

.blank__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.03em;
    margin: 0 0 8px;
}

.blank__text {
    color: var(--text-2);
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 250px;
    margin: 0 auto 26px;
}

.btn--inline {
    width: auto;
    font-size: 15px;
    padding: 15px 26px;
}

/* ─── Activité ────────────────────────────────────────────────────────────*/
.page__title--activity {
    margin-bottom: 12px;
}

.page__title--profile {
    margin-bottom: 22px;
}

.filters {
    margin-bottom: 16px;
}

.filters__row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.filters__row:last-child {
    margin-bottom: 0;
}

.filters__label {
    flex: none;
    width: 52px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tab-off);
}

.filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Les filtres sont des liens : l'écran se recharge, se partage et se met en
   favori, et il marche avant que le premier script ne soit arrivé. */
.chip {
    background: var(--rail);
    color: var(--chip-text);
    border-radius: 20px;
    padding: 8px 13px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

.chip.is-on {
    background: var(--ink);
    color: var(--cream);
}

/* La nature se choisit en contour, la période en pastille pleine : deux
   rangées de filtres qui se ressembleraient trop se liraient comme une seule.
   Le fond est répété sur l'état actif, sinon `.chip.is-on` le remplirait. */
.chip--soft,
.chip--soft.is-on {
    background: none;
    border: 1.5px solid var(--field);
    padding: 7px 12px;
}

.chip--soft {
    color: var(--text-2);
}

.chip--soft.is-on {
    border-color: var(--ink);
    color: var(--ink);
}

.totals {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ink);
    margin-bottom: 4px;
}

.totals__count {
    font-size: 11.5px;
    color: var(--text-2);
}

.totals__net {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
}

.activity__empty {
    text-align: center;
    padding: 34px 8px;
    color: var(--text-2);
    font-size: 14.5px;
}

.activity__more {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--text-3);
}

/* ─── Profil ──────────────────────────────────────────────────────────────*/
.profile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 4px 18px;
    margin: 0 0 22px;
}

.profile__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.profile__row:last-child {
    border-bottom: none;
}

.profile__label {
    font-size: 13.5px;
    color: var(--text-2);
}

.profile__value {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    text-align: right;
}

/* ─── Bascule desktop — écrans de l'étape 6 ───────────────────────────────*/
@media (min-width: 900px) {
    .home__head {
        display: none;
    }

    .home__hello {
        display: block;
    }

    .home__top {
        flex-direction: row;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 34px;
    }

    .cards {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 14px;
    }

    /* Le desktop a ses deux boutons dans la barre latérale. */
    .home__actions {
        display: none;
    }

    .history--recent .entry:nth-child(n+5) {
        display: list-item;
    }

    /* Colonne de lecture : l'activité et le profil sont des listes, pas des
       tableaux de bord — les étirer sur 860 px éloignerait le montant du nom.
       Les dernières opérations de l'accueil, elles, suivent la carte solde. */
    .filters,
    .totals,
    .totals + .history,
    .activity__empty,
    .activity__more,
    .profile,
    .profile + form {
        max-width: 520px;
    }
}

/* ─── Appeler et relancer ─────────────────────────────────────────────────*/
.detail__reach {
    display: flex;
    gap: 10px;
    margin-bottom: 28px;
}

/* Actions secondaires : elles se voient, sans concurrencer les deux boutons
   pleins qui, eux, écrivent dans le cahier. */
/* `width: 100%` du bouton de base ferait ici une base flex de la largeur du
   conteneur : les deux liens se disputeraient toute la rangée. */
.btn--reach {
    flex: 1;
    width: auto;
    background: none;
    border: 1.5px solid var(--field-strong);
    color: var(--ink);
    font-size: 14.5px;
    padding: 14px;
}

/* « Appeler » est court : il prend la place de son libellé, pas la moitié. */
.btn--call {
    flex: none;
    padding: 14px 18px;
}

/* ─── Bandeau de mise à jour ──────────────────────────────────────────────*/
/* Le design n'a pas d'état « nouvelle version » : c'est le toast qui le porte,
   avec un bouton d'action et sans disparition automatique. */
.toast--update {
    align-items: center;
    gap: 10px;
}

.toast__text {
    flex: 1;
    min-width: 0;
}

.toast__action {
    flex: none;
    background: var(--amber);
    color: #FFF;
    border: none;
    border-radius: 12px;
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.toast__action[disabled] {
    opacity: 0.6;
    cursor: default;
}

.toast__close {
    flex: none;
    background: none;
    border: none;
    color: var(--on-ink-2);
    font-size: 15px;
    line-height: 1;
    padding: 6px;
    cursor: pointer;
}

/* ─── Proposition d'installation ──────────────────────────────────────────*/
.install {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 22px;
}

.install__title {
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 6px;
}

.install__text {
    color: var(--text-2);
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0 0 14px;
}

.install__steps {
    color: var(--text-2);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0;
    padding-left: 18px;
}

/* Sur l'accueil, la même proposition se fait plus petite : elle passe après
   les opérations du jour. */
.install-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.install-banner__text {
    flex: 1;
    min-width: 180px;
    margin: 0;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
}

.install-banner__text strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
}

.install-banner__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.install-banner__later {
    background: none;
    border: none;
    color: var(--text-3);
    font-size: 13.5px;
    font-weight: 700;
    padding: 8px;
    cursor: pointer;
}

/* ─── Bandeau réseau ──────────────────────────────────────────────────────*/
/* Le design ne montre rien quand tout va bien : « l'absence de message est le
   signal ». Ce bandeau ne dit donc jamais « synchronisé », et jamais un
   décompte — la file d'attente doit rester invisible, seule sa traduction en
   langage courant apparaît ici. */
.netbar {
    margin: 0;
    padding: 9px 18px;
    font-size: 12px;
    text-align: center;
    color: #FFF;
}

.netbar--offline {
    background: var(--ink);
    color: var(--on-ink-strong);
}

.netbar--syncing {
    background: var(--olive);
    animation: pulse 1.4s ease-in-out infinite;
}

.netbar--error {
    background: var(--error);
}

/* ─── Badge « En attente d'envoi » ────────────────────────────────────────*/
/* Sur la ligne concernée, et nulle part ailleurs : c'est ce que le design
   demande, et c'est aussi ce qui évite d'inquiéter sur tout un écran pour une
   seule écriture qui n'est pas encore partie. */
.badge {
    align-self: flex-start;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--olive-soft);
    color: var(--olive-text);
    font-size: 11.5px;
    font-weight: 700;
}

/* Un refus n'est pas une attente : il ne se résoudra pas tout seul. */
.badge--rejected {
    background: rgb(190 34 42 / 12%);
    color: var(--error);
    font-weight: 600;
    border-radius: 10px;
    white-space: normal;
}

@supports (color: oklch(0.5 0.1 60)) {
    .badge--rejected {
        background: oklch(0.52 0.19 25 / 12%);
    }
}

/* La ligne refusée reste lisible mais ne se donne plus comme un montant du
   cahier : elle ne compte dans aucun solde. */
.entry--rejected .entry__amount {
    color: var(--error);
    text-decoration: line-through;
}

.entry--rejected .entry__bar {
    background: var(--error);
}

.entry__drop {
    display: block;
    margin: 0 0 12px 17px;
    padding: 6px 0;
    background: none;
    border: none;
    color: var(--error);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}


/* ─── Échéances : saisie ──────────────────────────────────────────────────
   Une seule donnée sort de ce bloc — la date d'échéance. Les délais sont des
   raccourcis de saisie, et le nombre de jours n'est stocké nulle part.     */
.due {
    margin-bottom: 18px;
}

.due__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.due__row .field__label {
    margin-bottom: 0;
}

.due__input {
    border: 1px solid var(--field);
    border-radius: 11px;
    padding: 9px 11px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    background: var(--surface);
    outline: none;
}

.due__input:focus {
    border-color: var(--amber);
}

.due__input--wide {
    display: block;
    width: 100%;
    margin-top: 10px;
}

.terms {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Le commerçant lit une date, pas un délai à retrancher de tête. */
.due__confirm {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--amber-soft);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.due__bar {
    flex: none;
    width: 4px;
    height: 22px;
    border-radius: 2px;
    background: var(--amber-brand);
}

/* ─── Ligne de retard de l'accueil ────────────────────────────────────────
   Une ligne, pas une carte : le retard informe, il ne prend pas le dessus
   sur le reste à recevoir.                                                */
.lateline {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 14px;
    text-decoration: none;
    color: inherit;
}

.lateline__bar {
    flex: none;
    width: 5px;
    height: 36px;
    border-radius: 3px;
    background: var(--amber-brand);
}

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

.lateline__title {
    font-size: 15px;
    font-weight: 700;
}

.lateline__sub {
    font-size: 12.5px;
    color: var(--text-2);
}

.lateline__go {
    flex: none;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--amber);
}

/* ─── Vue « À relancer » ──────────────────────────────────────────────────
   Le total à recevoir et le montant échu sont deux chiffres distincts : on
   relance sur le premier, on priorise sur le second.                       */
.late {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px 17px;
    margin-bottom: 10px;
    max-width: 520px;
}

.late__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}

.late__identity {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.late__name {
    font-size: 16.5px;
    font-weight: 700;
}

.late__total {
    font-size: 13px;
    color: var(--text-2);
}

.late__box {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.late__amount {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.02em;
    color: var(--amber);
}

.late__tag {
    font-size: 11px;
    color: var(--text-3);
}

.late__detail {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--border);
    margin-top: 14px;
    padding-top: 12px;
}

.late__bar {
    flex: none;
    width: 4px;
    height: 30px;
    border-radius: 2px;
    background: var(--amber-brand);
}

.late__lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.late__days {
    font-size: 13.5px;
    font-weight: 600;
}

.late__oldest,
.late__multi {
    font-size: 12.5px;
    color: var(--text-2);
}

.late__wa {
    display: block;
    margin-top: 14px;
    text-align: center;
    text-decoration: none;
}

/* ─── Bloc Échéances de la fiche ──────────────────────────────────────────*/
.schedule {
    margin-bottom: 24px;
}

.schedule__group {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-2);
    margin: 14px 0 8px;
}

.schedule__group::before {
    content: '';
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background: var(--field-strong);
}

.schedule__group--late {
    color: var(--amber);
}

.schedule__group--late::before {
    background: var(--amber-brand);
}

.dues {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dueline {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

/* Une échéance dépassée mérite une carte ; une échéance à venir, une ligne. */
.dueline--late {
    background: var(--surface);
    border: 1px solid var(--amber-line);
    border-radius: 14px;
    padding: 14px 15px;
    margin-bottom: 8px;
}

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

.dueline__date {
    font-size: 15px;
    font-weight: 700;
}

.dueline__rel {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
}

.dueline--late .dueline__rel {
    color: var(--amber);
}

.dueline__origin {
    font-size: 12.5px;
    color: var(--text-3);
}

.dueline__box {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.dueline__amount {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.02em;
}

.dueline__tag {
    font-size: 11px;
    color: var(--text-3);
}

/* La part échue du solde, sous le montant du bandeau de la fiche. */
.detail__late {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 12px sous le montant, et la marge de `.sums` fait le reste : c'est
       l'espacement du prototype, pas un chiffre choisi à l'œil. */
    margin: 12px 0 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--on-ink-late);
}

.detail__late-bar {
    flex: none;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--amber-brand);
}

/* Les filtres de la liste des clients : une seule rangée, sans étiquette. */
.filters--clients {
    margin-bottom: 14px;
}

/* ─── Squelettes de chargement ────────────────────────────────────────────*/
/* De la forme du contenu final, jamais une roue qui tourne : l'écran doit
   déjà ressembler à ce qu'il va devenir. */
.sk {
    background: var(--skeleton);
    border-radius: 8px;
    animation: pulse 1.4s ease-in-out infinite;
}

.sk--card {
    height: 150px;
    border-radius: 22px;
    margin-bottom: 14px;
}

.sk--actions {
    height: 54px;
    border-radius: 14px;
    margin-bottom: 26px;
}

.sk--line {
    height: 15px;
    margin-bottom: 14px;
}

.sk--row {
    height: 44px;
    margin-bottom: 14px;
}

.sk--60 {
    width: 60%;
}

.sk--75 {
    width: 75%;
}