/* Mode simple : accueil à gros boutons, écrans d'une page, barre de navigation basse sur mobile. */

:root {
    --ok: #1f8a4c;
    --ok-soft: #e3f4ea;
    --low: #b86e00;
    --low-soft: #fdf1dc;
    --out: #c0362c;
    --out-soft: #fbe5e3;
    --bottom-nav-height: 64px;
}

:root[data-bs-theme="dark"] {
    --ok: #4ad991;
    --ok-soft: rgba(52, 201, 138, 0.16);
    --low: #eab455;
    --low-soft: rgba(233, 172, 78, 0.16);
    --out: #f5a199;
    --out-soft: rgba(240, 128, 118, 0.16);
}

/* ---------- Accueil : gros boutons ---------- */
.home-greeting { margin-bottom: 1rem; }
.home-greeting h2 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.home-greeting p { color: var(--text-muted); margin: .15rem 0 0; }

.home-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    margin-bottom: 1.25rem;
}
@media (min-width: 768px) { .home-tiles { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }

.home-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .75rem;
    min-height: 118px;
    padding: 1rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    text-decoration: none;
    position: relative;
    transition: transform .08s ease, box-shadow .12s ease;
}
.home-tile:hover { color: var(--ink); box-shadow: var(--shadow-md); }
.home-tile:active { transform: scale(.97); }
.home-tile i {
    font-size: 1.6rem;
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: var(--primary-soft);
    color: var(--primary);
}
.home-tile strong { font-size: 1.02rem; line-height: 1.25; }
.home-tile small { display: block; color: var(--text-muted); font-size: .8rem; margin-top: .1rem; }
.home-tile.is-main { background: var(--primary); border-color: var(--primary); color: #fff; }
.home-tile.is-main i { background: rgba(255, 255, 255, .18); color: #fff; }
.home-tile.is-main small { color: rgba(255, 255, 255, .8); }
.home-tile .tile-badge {
    position: absolute; top: .75rem; inset-inline-end: .75rem;
    min-width: 26px; height: 26px; padding: 0 .45rem;
    border-radius: 999px; background: var(--out); color: #fff;
    font-size: .8rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.home-tile .tile-badge.is-info { background: var(--low); }

.home-section-title { font-size: .95rem; font-weight: 700; margin: 0 0 .6rem; display: flex; align-items: center; gap: .4rem; }

.today-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1.25rem; }
@media (min-width: 768px) { .today-grid { grid-template-columns: repeat(4, 1fr); } }
.today-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: .8rem 1rem; }
.today-card span { display: block; font-size: .78rem; color: var(--text-muted); }
.today-card strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }

.alert-list { list-style: none; padding: 0; margin: 0; }
.alert-list li {
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    padding: .6rem .2rem; border-bottom: 1px solid var(--border-soft);
}
.alert-list li:last-child { border-bottom: none; }

/* ---------- Pastilles d'état ---------- */
.qty-chip {
    display: inline-flex; align-items: baseline; gap: .3rem;
    padding: .3rem .6rem; border-radius: 10px;
    background: var(--bg-soft); font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.qty-chip small { color: var(--text-muted); font-size: .72rem; }
.qty-chip b { font-size: 1rem; }
.state-ok { background: var(--ok-soft); color: var(--ok); }
.state-low { background: var(--low-soft); color: var(--low); }
.state-out { background: var(--out-soft); color: var(--out); }
.state-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.state-dot.ok { background: var(--ok); }
.state-dot.low { background: var(--low); }
.state-dot.out { background: var(--out); }

/* ---------- Mon stock ---------- */
.stock-toolbar { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .9rem; }
.stock-toolbar input[type=search] { padding: .8rem 1rem; font-size: 1.02rem; border-radius: var(--radius); }
.seg { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.seg::-webkit-scrollbar { display: none; }
.seg button, .seg a {
    flex-shrink: 0;
    border: 1px solid var(--border-soft); background: var(--surface); color: var(--ink);
    border-radius: 999px; padding: .45rem .9rem; font-size: .85rem; font-weight: 600;
    text-decoration: none; white-space: nowrap;
}
.seg .active { background: var(--primary); border-color: var(--primary); color: #fff; }
.seg .count { opacity: .75; font-weight: 500; margin-inline-start: .2rem; }

.stock-list { display: flex; flex-direction: column; gap: .5rem; }
.stock-row {
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    border-inline-start: 5px solid var(--ok);
}
.stock-row.low { border-inline-start-color: var(--low); }
.stock-row.out { border-inline-start-color: var(--out); }
.stock-row summary {
    list-style: none; cursor: pointer;
    display: grid; grid-template-columns: 1fr auto; gap: .5rem .75rem; align-items: center;
    padding: .75rem .9rem;
}
.stock-row summary::-webkit-details-marker { display: none; }
.stock-row .name { font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.stock-row .meta { font-size: .78rem; color: var(--text-muted); }
.stock-row .total { text-align: end; font-variant-numeric: tabular-nums; }
.stock-row .total b { font-size: 1.15rem; display: block; line-height: 1.1; }
.stock-row .total small { font-size: .75rem; color: var(--text-muted); }
.stock-row .places { grid-column: 1 / -1; display: flex; gap: .4rem; flex-wrap: wrap; }
.stock-row .row-actions { display: flex; gap: .5rem; flex-wrap: wrap; padding: 0 .9rem .8rem; }
.stock-row .row-actions .btn { flex: 1 1 auto; }
@media (min-width: 768px) {
    .stock-row summary { grid-template-columns: 1fr auto auto; }
    .stock-row .places { grid-column: auto; order: 2; }
    .stock-row .total { order: 3; min-width: 70px; }
}

/* ---------- Formulaires simples ---------- */
.simple-form { max-width: 640px; }
.simple-form .form-control, .simple-form .form-select { min-height: 48px; font-size: 1rem; }
.simple-form .form-control-lg { min-height: 56px; font-size: 1.25rem; font-weight: 600; }
.simple-form .step-label { font-weight: 700; font-size: .95rem; margin-bottom: .45rem; display: block; }

.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.choice-grid input { position: absolute; opacity: 0; pointer-events: none; }
.choice-grid label {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    min-height: 84px; padding: .6rem; text-align: center;
    border: 2px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface);
    font-weight: 600; font-size: .9rem; cursor: pointer; line-height: 1.2;
}
.choice-grid label i { font-size: 1.5rem; color: var(--primary); }
.choice-grid input:checked + label { border-color: var(--primary); background: var(--primary-soft); }
.choice-grid input:focus-visible + label { outline: 3px solid rgba(var(--primary-rgb), .35); }

.toggle-2 { display: flex; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: hidden; }
.toggle-2 input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-2 label { flex: 1; text-align: center; padding: .7rem .5rem; font-weight: 600; cursor: pointer; background: var(--surface); }
.toggle-2 input:checked + label { background: var(--primary); color: #fff; }

.qty-presets { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .45rem; }
.qty-presets button {
    border: 1px solid var(--border-soft); background: var(--bg-soft); color: var(--ink);
    border-radius: 10px; padding: .45rem .8rem; font-weight: 600;
}

.btn-big { min-height: 54px; font-size: 1.08rem; font-weight: 700; }

.line-card {
    border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface);
    padding: .7rem .8rem; display: grid; grid-template-columns: 1fr 120px auto; gap: .5rem; align-items: center;
}
.line-card + .line-card { margin-top: .5rem; }
.line-card .line-name { font-weight: 600; overflow-wrap: anywhere; }
.line-card .line-hint { font-size: .75rem; color: var(--text-muted); }
.line-card .line-hint.is-extra { color: var(--low); font-weight: 600; }
.line-card .line-hint.is-short { color: var(--out); font-weight: 600; }
.line-card .form-control { min-height: 44px; text-align: center; font-weight: 600; }
.line-card .btn-remove { border: none; background: none; color: var(--out); font-size: 1.1rem; padding: .25rem .4rem; }
@media (max-width: 420px) {
    .line-card { grid-template-columns: 1fr 96px auto; }
}

.count-row {
    display: grid; grid-template-columns: 1fr auto 110px; gap: .6rem; align-items: center;
    padding: .55rem .2rem; border-bottom: 1px solid var(--border-soft);
}
.count-row:last-child { border-bottom: none; }
.count-row .system { font-size: .8rem; color: var(--text-muted); text-align: end; white-space: nowrap; }
.count-row input { text-align: center; min-height: 44px; font-weight: 600; }
.count-row input.changed { border-color: var(--low); background: var(--low-soft); }

.history-list { list-style: none; margin: 0; padding: 0; }
.history-list li { display: flex; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--border-soft); font-size: .9rem; }
.history-list li:last-child { border-bottom: none; }
.history-list .when { color: var(--text-muted); font-size: .78rem; white-space: nowrap; }

/* ---------- Torréfaction : tableau à 3 états ---------- */
.toll-card {
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    padding: .85rem .95rem; display: flex; flex-direction: column; gap: .55rem;
}
.toll-card + .toll-card { margin-top: .6rem; }
.toll-card .top { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.toll-card .client { font-weight: 700; font-size: 1.02rem; }
.toll-card .client a { color: inherit; }
.toll-card .what { color: var(--ink-soft); }
.toll-card .ref { font-size: .75rem; color: var(--text-muted); }
.toll-card .fee { font-weight: 700; font-size: 1.1rem; white-space: nowrap; color: var(--primary); }
.toll-card .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.toll-card .actions form { flex: 1 1 auto; display: flex; }
.toll-card .actions .btn { flex: 1 1 auto; min-height: 46px; font-weight: 600; }
.toll-card .waiting-since { font-size: .78rem; color: var(--low); font-weight: 600; }

/* ---------- Barre de navigation basse (mobile) ---------- */
.bottom-nav { display: none; }
@media (max-width: 991.98px) {
    .bottom-nav {
        display: flex;
        position: fixed; inset-inline: 0; bottom: 0; z-index: 1030;
        height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--surface);
        border-top: 1px solid var(--border-soft);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
    }
    .bottom-nav a, .bottom-nav button {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        color: var(--text-muted); text-decoration: none; font-size: .7rem; font-weight: 600;
        background: none; border: none; padding: 0;
        min-width: 0;
    }
    .bottom-nav a span, .bottom-nav button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
    .bottom-nav i { font-size: 1.35rem; line-height: 1; }
    .bottom-nav .active { color: var(--primary); }
    body.has-bottom-nav .content { padding-bottom: calc(var(--bottom-nav-height) + 1.25rem + env(safe-area-inset-bottom, 0px)); }
}

/* Menu latéral : les modules avancés sont repliés sous « Plus de modules » */
.sidebar-more summary {
    list-style: none; cursor: pointer;
}
.sidebar-more summary::-webkit-details-marker { display: none; }
.sidebar-more summary .bi-chevron-down { transition: transform .15s ease; margin-inline-start: auto; font-size: .8rem; }
.sidebar-more[open] summary .bi-chevron-down { transform: rotate(180deg); }

.flash-actions { margin-top: .5rem; display: flex; gap: .5rem; flex-wrap: wrap; }

.simple-form .choices { margin-bottom: 1rem; }
.line-card .choices { margin-bottom: 0; }

/* ---------- Clients / fournisseurs : un gros chiffre en couleur, lisible sans lire ---------- */
.balance-hero {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.1rem 1.2rem; border-radius: var(--radius);
    color: #fff;
}
.balance-hero i { font-size: 2.6rem; line-height: 1; opacity: .95; }
.balance-hero span { display: block; font-size: .95rem; opacity: .92; font-weight: 600; }
.balance-hero strong { font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.balance-hero strong small { font-size: 1rem; }
.balance-hero.is-debt { background: var(--out); }
.balance-hero.is-owed { background: var(--low); }
.balance-hero.is-credit { background: #3167b6; }
.balance-hero.is-clear { background: var(--ok); }
[data-bs-theme="dark"] .balance-hero { color: #1a0f19; }

/* Lien « argent reçu / donné ce mois » sous le gros chiffre de la liste. */
.pay-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .8rem 1rem; border-radius: var(--radius-sm);
    background: var(--ok-soft); color: var(--ok); text-decoration: none; font-weight: 600;
}
.pay-link:hover { color: var(--ok); box-shadow: var(--shadow-sm); }
.pay-link > i:first-child { font-size: 1.5rem; }
.pay-link span { flex: 1; }
.pay-link b { font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-link.is-out, .pay-link.is-out:hover { background: var(--out-soft); color: var(--out); }
[dir="rtl"] .pay-link-go { transform: scaleX(-1); }
.seg .is-owed i { color: var(--low); font-size: .6rem; vertical-align: middle; }
.seg .is-debt i { color: var(--out); font-size: .6rem; vertical-align: middle; }
.seg .active i { color: inherit; }

.party-list { display: flex; flex-direction: column; gap: .5rem; }
.party-row {
    display: flex; align-items: center; gap: .8rem;
    padding: .75rem .9rem; border-radius: var(--radius-sm);
    background: var(--surface); border: 1px solid var(--border-soft);
    color: var(--ink); text-decoration: none;
}
.party-row:hover { color: var(--ink); box-shadow: var(--shadow-sm); }
.party-avatar {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: 1.15rem;
}
.party-name { flex: 1; min-width: 0; font-weight: 650; overflow-wrap: anywhere; }
.party-name small { display: block; font-weight: 400; color: var(--text-muted); font-size: .8rem; }
.party-balance { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.party-balance b { display: block; font-size: 1.1rem; }
.party-balance small { font-size: .72rem; font-weight: 600; }
.party-balance.is-debt { color: var(--out); }
.party-balance.is-owed { color: var(--low); }
.party-balance.is-credit { color: #3167b6; }
.party-balance.is-clear { color: var(--ok); }
.party-balance.is-clear i { font-size: 1.4rem; display: block; line-height: 1; }

.big-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.big-action {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
    min-height: 110px; border-radius: var(--radius);
    background: var(--primary); color: #fff; border: none; text-decoration: none;
    font-weight: 700; font-size: 1.05rem; box-shadow: var(--shadow-sm);
}
.big-action:hover { color: #fff; filter: brightness(1.05); }
.big-action:active { transform: scale(.97); }
.big-action i { font-size: 2.3rem; line-height: 1; }
.big-action.is-pay { background: var(--ok); }
[data-bs-theme="dark"] .big-action.is-pay { color: #10241a; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--border-soft); }
.timeline li:last-child { border-bottom: none; }
.tl-icon {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
    background: var(--bg-soft); color: var(--text-muted);
}
.timeline .is-purchase .tl-icon { background: var(--out-soft); color: var(--out); }
.timeline .is-payment .tl-icon { background: var(--ok-soft); color: var(--ok); }
.tl-body { flex: 1; min-width: 0; }
.tl-top { display: flex; justify-content: space-between; gap: .5rem; }
.timeline .is-payment .tl-amount { color: var(--ok); }
.timeline .is-purchase .tl-amount { color: var(--out); }
.tl-date { font-size: .75rem; color: var(--text-muted); margin-top: .15rem; }

.line-card.purchase-line { grid-template-columns: 1fr 80px auto; }
.big-actions .balance-hero { padding: .9rem; gap: .6rem; flex-direction: column; align-items: flex-start; }
.big-actions .balance-hero i { font-size: 1.8rem; }
.big-actions .balance-hero strong { font-size: 1.35rem; }
.big-actions .balance-hero span { font-size: .8rem; }
@media (max-width: 767.98px) {
    .home-tile.is-main { grid-column: 1 / -1; min-height: 96px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; }
    .home-tile.is-main strong { font-size: 1.25rem; }
}

/* ---------- Page de connexion sur téléphone ---------- */
.login-mobile-brand { display: none; }
@media (max-width: 991.98px) {
    .login-page { min-height: 100vh; min-height: 100dvh; }
    /* Plus de centrage vertical dans une boîte de 100vh (plus haute que l'écran visible à cause de
       la barre d'adresse) : la carte commence en haut et la page peut défiler quand le clavier s'ouvre. */
    .login-main {
        min-height: 0;
        display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
        padding: 4.25rem 1rem calc(2rem + env(safe-area-inset-bottom, 0px));
    }
    .login-mobile-brand {
        display: flex; align-items: center; justify-content: center; gap: .6rem;
        font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-bottom: 1rem;
    }
    .login-mobile-brand i {
        display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
        background: var(--primary); color: #fff; font-size: 1.3rem;
    }
    .login-card { width: 100%; max-width: 440px; margin: 0 auto; padding: 1.4rem 1.2rem; }
    .login-card .page-eyebrow { display: none; }
    .login-card h2 { font-size: 1.6rem; margin-bottom: .25rem; }
    .login-tagline { margin-bottom: 1.2rem; }
    .login-card .form-control-lg { min-height: 54px; font-size: 1.05rem; }
    .login-card input { scroll-margin: 6rem; }
    .lang-switch { top: 1rem; inset-inline-end: 1rem; }
}
.login-submit {
    min-height: 56px; font-size: 1.15rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    white-space: normal;
}

/* La flèche des listes natives ne doit pas recouvrir le texte (listes étroites sur téléphone) */
.form-select { padding-inline-end: 2.25rem; text-overflow: ellipsis; }

/* ---------- Statistiques ---------- */
.stats-money { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.stat-big {
    border-radius: var(--radius); padding: .85rem .7rem; color: #fff;
    display: flex; flex-direction: column; gap: .15rem; min-width: 0;
}
.stat-big i { font-size: 1.6rem; line-height: 1; margin-bottom: .2rem; }
.stat-big span { font-size: .82rem; font-weight: 600; opacity: .92; }
.stat-big strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-big.is-in { background: var(--ok); }
.stat-big.is-out { background: var(--out); }
.stat-big.is-net { background: var(--primary); }
[data-bs-theme="dark"] .stat-big.is-in, [data-bs-theme="dark"] .stat-big.is-out { color: #1a0f19; }
@media (min-width: 768px) { .stat-big strong { font-size: 1.6rem; } }

.pay-split { display: flex; gap: .5rem; flex-wrap: wrap; }
.top-list { list-style: none; padding: 0; margin: 0; }
.top-list li { padding: .5rem 0; border-bottom: 1px solid var(--border-soft); }
.top-list li:last-child { border-bottom: none; }
.top-bar { height: 6px; background: var(--bg-soft); border-radius: 99px; margin-top: .35rem; overflow: hidden; }
.top-bar span { display: block; height: 100%; background: var(--primary); border-radius: 99px; }

/* ---------- Modifier une vente ---------- */
.edit-line { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: .75rem .85rem; background: var(--surface); }
.edit-line + .edit-line { margin-top: .5rem; }
.edit-line.is-changed { border-color: var(--low); background: var(--low-soft); }
.edit-line.is-removed { border-color: var(--out); background: var(--out-soft); }
.edit-line.is-removed .edit-line-name b { text-decoration: line-through; }
.edit-line-name { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.edit-line-controls { display: flex; gap: .4rem; align-items: center; }
.edit-line-controls .qty-input { text-align: center; font-weight: 700; font-size: 1.15rem; min-height: 48px; flex: 1; }
.qty-btn {
    width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px;
    border: 1px solid var(--border-soft); background: var(--bg-soft); color: var(--ink);
    font-size: 1.4rem; font-weight: 700; line-height: 1;
}
.qty-btn.is-zero { color: var(--out); font-size: 1.1rem; }

/* Caisse : bouton « Mes ventes » à côté de la recherche */
.pos-search-row { display: flex; gap: .5rem; }
.pos-search-row input { flex: 1; min-width: 0; }
.pos-history-btn {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: .35rem;
    padding: 0 .9rem; border-radius: var(--radius); border: 1px solid var(--border-soft);
    background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; white-space: nowrap;
}
.pos-history-btn i { font-size: 1.25rem; }
@media (max-width: 420px) { .pos-history-btn span { display: none; } }

/* ---------- Vignettes produit (photo ou lettre colorée) ---------- */
.p-thumb { border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--bg-soft); display: inline-block; vertical-align: middle; }
.p-thumb-letter {
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
    background: hsl(var(--h), 55%, 92%); color: hsl(var(--h), 45%, 32%);
}
[data-bs-theme="dark"] .p-thumb-letter { background: hsl(var(--h), 30%, 22%); color: hsl(var(--h), 60%, 78%); }
.with-thumb { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.with-thumb > :last-child { min-width: 0; }

/* Choix d'une photo dans les formulaires */
.photo-picker { display: flex; align-items: center; gap: 1rem; }
.photo-picker-box {
    width: 104px; height: 104px; flex-shrink: 0; border-radius: 16px; overflow: hidden; position: relative;
    border: 2px dashed var(--border-soft); background: var(--bg-soft); color: var(--text-muted);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; cursor: pointer;
    font-size: .75rem; font-weight: 600; text-align: center; padding: .3rem;
}
.photo-picker-box i { font-size: 1.9rem; color: var(--primary); }
.photo-picker-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-picker-box.has-photo { border-style: solid; border-color: var(--primary); }
.photo-picker input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.photo-picker-actions { display: flex; flex-direction: column; gap: .4rem; }

/* ---------- Installer l'application (PWA) ---------- */
.install-box {
    margin-top: 1rem; padding: 1rem; border-radius: var(--radius);
    background: var(--surface); border: 2px solid var(--primary-soft); box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: .8rem;
}
.install-box[hidden], .install-box [hidden] { display: none !important; }
.install-box-head { display: flex; gap: .8rem; align-items: center; }
.install-box-head img { border-radius: 14px; flex-shrink: 0; }
.install-box-head b { display: block; }
.install-box-head small { color: var(--text-muted); }
.install-steps { display: flex; flex-direction: column; gap: .5rem; font-size: .92rem; }
.install-steps span {
    display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; font-weight: 700; font-size: .8rem; margin-inline-end: .35rem;
}
.install-steps i { color: var(--primary); font-size: 1.1rem; }
/* Ouverte comme application : pas de marge pour la barre d'état sous iPhone */
@media (display-mode: standalone) { body { -webkit-user-select: none; user-select: none; } input, textarea { -webkit-user-select: text; user-select: text; } }
.login-main { flex-direction: column; }
.login-install { width: 100%; max-width: 440px; margin: 0 auto; }