/* Fiches de dépense (page /frais/) — téléphone d'abord.
   Monde : AutoCompta (police système, encres, échelle --fs-*) + identité SISEIP de la feuille papier
   (bandeau vert menthe, logo, vert profond pour l'action). */

:root {
    --mint: #d4ebdc;            /* bandeau de la feuille « Frais engagés » */
    --mint-line: #b9dcc6;
    --mint-ink: #14523a;        /* 7,3:1 sur la menthe */
    --green: #1f6b4a;           /* action principale : blanc dessus à 6,4:1 */
    --green-hover: #185a3d;
    --green-soft: #e8f4ec;
    --text: #1f2937;
    --muted: #5b6472;           /* 6:1 sur blanc */
    --placeholder: #6b7685;     /* 4,6:1 */
    --bg: #ffffff;
    --surface: #f4f8f5;
    --line: #dfe5e1;
    --field-border: #b8c2bc;
    --success-ink: #047857; --success-soft: #ecfdf5;
    --info-ink: #0e7490;    --info-soft: #ecfeff;
    --warning-ink: #b45309; --warning-soft: #fffbeb;
    --danger-ink: #b91c1c;  --danger-soft: #fef2f2; --danger-line: #fecaca;
    --focus: 0 0 0 3px rgba(31, 107, 74, .28);
    --radius: 12px;
    --tap: 3.25rem;             /* 52 px : cible au pouce */
    --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-md: 0.875rem; --fs-body: 1rem;
    --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.625rem; --fs-amount: 2.5rem;
    --ease: cubic-bezier(.22, 1, .36, 1);
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: var(--fs-body); line-height: 1.45; color: var(--text); background: var(--bg);
    -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--mint); color: var(--mint-ink); }
input, select, textarea, button { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico-lg { width: 2.25rem; height: 2.25rem; stroke-width: 1.6; }

/* ---------- Bandeau ---------- */
.band {
    position: sticky; top: 0; z-index: 5; background: var(--mint); color: var(--mint-ink);
    padding: calc(env(safe-area-inset-top) + .625rem) 1rem .625rem; border-bottom: 1px solid var(--mint-line);
}
.band-row { display: flex; align-items: center; gap: .75rem; min-height: 2.5rem; }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--mint-ink); }
.brand-mark { width: 2rem; height: 2rem; flex: none; }
.brand-name { font-weight: 700; font-size: var(--fs-lg); letter-spacing: -.01em; line-height: 1; display: flex; flex-direction: column; }
.brand-name small { font-weight: 500; font-size: var(--fs-xs); letter-spacing: .04em; color: var(--mint-ink); margin-top: .125rem; }
.band-title { margin-left: auto; font-size: var(--fs-md); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.band-photo {
    width: 2.5rem; height: 2.5rem; border-radius: 8px; border: 2px solid #fff; padding: 0; overflow: hidden;
    background: #fff center/cover no-repeat; box-shadow: 0 1px 3px rgba(20, 82, 58, .25); cursor: pointer; flex: none;
}
.progress { height: 4px; margin: .5rem -1rem -.625rem; background: var(--mint-line); }
.progress span { display: block; height: 100%; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }

/* ---------- Écrans ---------- */
main { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 34rem; margin: 0 auto; outline: none; }
.screen { flex: 1; display: flex; flex-direction: column; padding: 1.5rem 1rem calc(env(safe-area-inset-bottom) + 1.5rem); }
h1 { font-size: var(--fs-2xl); line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .5rem; text-wrap: balance; outline: none; }
.section-h { font-size: var(--fs-lg); margin: 2rem 0 .75rem; }
.lead { color: var(--muted); margin: 0 0 1.25rem; max-width: 60ch; }
.hint { color: var(--muted); font-size: var(--fs-sm); margin: .375rem 0 0; }
.opt { color: var(--muted); font-weight: 400; font-size: var(--fs-sm); }

/* ---------- Boutons ---------- */
.btn-primary, .btn-secondary, .btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--tap);
    padding: 0 1.25rem; border-radius: var(--radius); font-weight: 600; cursor: pointer; text-decoration: none;
    transition: background-color .15s, border-color .15s, transform .1s;
}
.btn-primary { background: var(--green); color: #fff; border: 0; }
.btn-primary:hover { background: var(--green-hover); }
.btn-primary:active, .btn-secondary:active { transform: scale(.98); }
.btn-primary:disabled { background: var(--green-soft); color: var(--mint-ink); box-shadow: inset 0 0 0 1.5px var(--mint-line); cursor: progress; }   /* « Envoi… » reste lisible */
.btn-secondary { background: #fff; color: var(--mint-ink); border: 1.5px solid var(--green); }
.btn-secondary:hover { background: var(--green-soft); }
.btn-ghost { background: none; border: 0; color: var(--muted); padding: 0 .75rem; }
.btn-ghost:hover { color: var(--text); }
.btn-xl { width: 100%; min-height: 3.75rem; font-size: var(--fs-lg); }
.btn-block { width: 100%; margin-top: .75rem; }
.btn-secondary:focus-within { box-shadow: var(--focus); }
.link-btn { background: none; border: 0; padding: .25rem 0; color: var(--mint-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: var(--fs-sm); }

/* ---------- Champs ---------- */
.field { display: flex; flex-direction: column; gap: .375rem; margin-top: 1.25rem; font-weight: 600; font-size: var(--fs-md); }
.field-label { font-weight: 600; font-size: var(--fs-md); }
input[type=text], input[type=search], input[type=date], select, textarea {
    width: 100%; min-height: var(--tap); padding: .75rem .875rem; border: 1.5px solid var(--field-border); border-radius: var(--radius);
    background: #fff; font-weight: 400; font-size: var(--fs-body);
}
textarea { resize: vertical; min-height: 7rem; line-height: 1.45; }
select { appearance: none; padding-right: 2.5rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .75rem center/1.25rem no-repeat; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: var(--focus); outline: none; }
input[aria-invalid=true] { border-color: var(--danger-ink); }
input, textarea { caret-color: var(--green); }
.amount-wrap { position: relative; display: block; }
.amount-wrap input {
    font-size: var(--fs-amount); font-weight: 700; min-height: 4.5rem; padding-right: 3rem; text-align: right;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.amount-eur { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: var(--fs-xl); font-weight: 600; color: var(--muted); }

/* ---------- Choix (radios en rangées) ---------- */
.options { display: flex; flex-direction: column; gap: .5rem; }
.opt-row {
    display: flex; align-items: center; gap: .75rem; min-height: var(--tap); padding: .625rem .875rem;
    border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.opt-row input { position: absolute; opacity: 0; pointer-events: none; }
.opt-row .dot { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid var(--field-border); flex: none; display: grid; place-items: center; }
.opt-row .txt { display: flex; flex-direction: column; min-width: 0; }
.opt-row .txt b { font-weight: 600; }
.opt-row .txt small { color: var(--muted); font-size: var(--fs-sm); }
/* Lu sur le ticket : repère en encre menthe, la personne vérifie avant de passer */
.hint.from-ticket, .opt-row .txt small.from-ticket { color: var(--mint-ink); font-weight: 600; }
.opt-row:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.opt-row:has(input:checked) .dot { border-color: var(--green); }
.opt-row:has(input:checked) .dot::after { content: ""; width: .625rem; height: .625rem; border-radius: 50%; background: var(--green); }
.opt-row:has(input:focus-visible) { box-shadow: var(--focus); }
/* Types d'achat : une liste à filets plutôt que 14 cartes, pour tenir sur un écran */
.options-types { gap: 0; border-top: 1px solid var(--line); }
.options-types .opt-row { min-height: 2.875rem; padding: .5rem .5rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }

/* ---------- Photo ---------- */
.shoot {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .625rem;
    min-height: 11rem; border-radius: var(--radius); background: var(--surface); border: 2px dashed var(--mint-line);
    color: var(--mint-ink); font-weight: 600; font-size: var(--fs-lg); cursor: pointer; transition: background-color .15s;
}
.shoot:hover, .shoot:has(input:focus-visible) { background: var(--green-soft); border-color: var(--green); }
.step[data-step="1"]:not([hidden]) { display: flex; flex-direction: column; }
.has-photo .thumbs { order: 1; margin-top: .25rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.has-photo .thumbs li:only-child { grid-column: 1 / -1; width: min(100%, 15rem); }
.has-photo .shoot { order: 2; flex-direction: row; min-height: var(--tap); margin-top: .75rem; font-size: var(--fs-body); border: 1.5px solid var(--green); background: #fff; }
.has-photo .shoot .ico-lg { width: 1.25rem; height: 1.25rem; }
.has-photo > .btn-block { order: 3; }
.thumbs { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .625rem; }
.thumbs li { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbs .pdf { display: grid; place-items: center; height: 100%; font-weight: 700; color: var(--mint-ink); font-size: var(--fs-sm); padding: .5rem; text-align: center; }
.thumbs button {
    position: absolute; top: .375rem; right: .375rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0;
    background: color-mix(in srgb, var(--text) 78%, transparent); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.thumbs button .ico { width: 1rem; height: 1rem; }

/* ---------- Pour qui ---------- */
.block { margin-top: 1.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.chip {
    display: inline-flex; align-items: center; gap: .375rem; min-height: 2.5rem; padding: 0 .5rem 0 .875rem; border-radius: 999px;
    background: var(--green); color: #fff; border: 0; font-weight: 600; font-size: var(--fs-md); cursor: pointer;
}
.chip .ico { width: 1rem; height: 1rem; }
.youth-list { margin-top: .5rem; max-height: 13.5rem; overflow-y: auto; border: 1.5px solid var(--line); border-radius: var(--radius); overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--mint-line) transparent; }
.youth-list button {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 3rem; padding: .5rem .875rem;
    background: #fff; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer;
}
.youth-list button:last-child { border-bottom: 0; }
.youth-list button[aria-pressed=true] { background: var(--green-soft); font-weight: 600; color: var(--mint-ink); }
.youth-list button .ico { color: var(--green); visibility: hidden; }
.youth-list button[aria-pressed=true] .ico { visibility: visible; }
.youth-list .empty { padding: .875rem; color: var(--muted); font-size: var(--fs-md); }
.split { margin-top: .875rem; padding: .875rem; border-radius: var(--radius); background: var(--surface); }
.toggle { display: flex; align-items: center; gap: .625rem; font-weight: 600; font-size: var(--fs-md); min-height: 2.75rem; cursor: pointer; }
.toggle input { width: 1.25rem; height: 1.25rem; accent-color: var(--green); }
.split-row { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.split-row span { flex: 1; min-width: 0; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split-row input { width: 7.5rem; flex: none; text-align: right; font-variant-numeric: tabular-nums; min-height: 2.75rem; }
.split-equal { list-style: none; margin: .5rem 0 0; padding: 0; font-size: var(--fs-md); }
.split-equal li { display: flex; justify-content: space-between; gap: .75rem; padding: .25rem 0; }
.split-equal b { font-variant-numeric: tabular-nums; }

/* ---------- Vérifier ---------- */
.recap { margin: .5rem 0 0; display: grid; grid-template-columns: 1fr auto; border-top: 1px solid var(--line); }
.recap dt, .recap dd { margin: 0; padding: .875rem 0; border-bottom: 1px solid var(--line); }
.recap dt { color: var(--muted); font-size: var(--fs-sm); grid-column: 1 / -1; padding-bottom: 0; border-bottom: 0; display: flex; justify-content: space-between; align-items: baseline; }
.recap dd { grid-column: 1 / -1; padding-top: .125rem; font-weight: 600; }
.recap dd .sub { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-sm); }
.recap .big { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.recap .recap-line { display: flex; justify-content: space-between; gap: .75rem; }
.recap .recap-line + .recap-line { margin-top: .25rem; }
.recap .recap-line > span:last-child { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Barre d'action collée en bas ---------- */
.actions {
    position: sticky; bottom: 0; margin: auto -1rem calc(-1 * (env(safe-area-inset-bottom) + 1.5rem)); padding: .75rem 1rem calc(env(safe-area-inset-bottom) + .75rem);
    display: flex; gap: .5rem; background: #fff; border-top: 1px solid var(--line);
}
.actions .btn-primary { flex: 1; font-size: var(--fs-lg); }
.step { border: 0; margin: 0; padding: 0 0 1.5rem; min-width: 0; }
.step[hidden] { display: none; }
.step.enter { animation: step-in .22s var(--ease); }
.step.enter-back { animation: step-back .22s var(--ease); }
@keyframes step-in { from { transform: translateX(1.5rem); opacity: .4; } }
@keyframes step-back { from { transform: translateX(-1.5rem); opacity: .4; } }

/* ---------- Encadrés, liste des fiches ---------- */
.callout { border-radius: var(--radius); padding: .75rem .875rem; margin: 1rem 0 0; font-size: var(--fs-md); }
.callout.danger { background: var(--danger-soft); color: var(--danger-ink); border: 1px solid var(--danger-line); }
.home-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.home-head h1 { margin: 0; }
.reports { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.report { border-bottom: 1px solid var(--line); }
.report > button {
    display: grid; grid-template-columns: 1fr auto; gap: .125rem .75rem; width: 100%; padding: .875rem 0; background: none; border: 0;
    text-align: left; cursor: pointer;
}
.report .r-main { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report .r-amt { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.report .r-sub { color: var(--muted); font-size: var(--fs-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill { justify-self: end; font-size: var(--fs-xs); font-weight: 700; border-radius: 999px; padding: .125rem .5rem; white-space: nowrap; }
.pill.submitted { background: var(--info-soft); color: var(--info-ink); }
.pill.accepted { background: var(--warning-soft); color: var(--warning-ink); }
.pill.booked { background: var(--success-soft); color: var(--success-ink); }
.pill.rejected { background: var(--danger-soft); color: var(--danger-ink); }
.r-detail { padding: 0 0 1rem; font-size: var(--fs-md); }
.r-detail p { margin: .25rem 0; }
.r-detail .reason { color: var(--danger-ink); font-weight: 600; }
.r-detail .r-photos { display: flex; gap: .5rem; margin: .625rem 0; flex-wrap: wrap; }
.r-detail .r-photos a { width: 4.5rem; height: 6rem; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; font-size: var(--fs-xs); color: var(--mint-ink); font-weight: 700; }
.r-detail .r-photos img { width: 100%; height: 100%; object-fit: cover; }
.r-detail .danger-link { color: var(--danger-ink); }
.empty-state { padding: 1.5rem 0; color: var(--muted); }
.gsi-slot { min-height: 2.75rem; margin: .5rem 0 0; }
.done-mark { width: 4rem; height: 4rem; fill: var(--green-soft); stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; margin: 1rem 0; }
#screen-done .btn-xl { margin-top: 1rem; }

.toast {
    position: fixed; left: 1rem; right: 1rem; bottom: calc(env(safe-area-inset-bottom) + 5.5rem); z-index: 10; max-width: 32rem; margin: 0 auto;
    background: #1b2a22; color: #fff; padding: .75rem 1rem; border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0, 0, 0, .2); font-size: var(--fs-md);
}

@media (prefers-reduced-motion: reduce) {
    .step.enter, .step.enter-back { animation: none; }
    .progress span { transition: none; }
}
@media (min-width: 40rem) {
    .screen { padding-top: 2.5rem; }
}