/* Atrium : design system Matteo Martocchia (comme Alfred). Jetons dans :root, aucune couleur codée en dur ailleurs. */
@font-face { font-family: 'Satoshi'; src: url('/fonts/Satoshi-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/fonts/Satoshi-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/fonts/Satoshi-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('/fonts/CabinetGrotesk-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --ivoire: #F5EBDD; --ombre: #2B211C; --rouille: #B04A2C; --rouille-hover: #9A3F25; --rouille-soft: #F6DFD5;
  --ete: #D98B5F; --ete-soft: #F7E3D3; --sarcelle: #2C5A54; --sarcelle-soft: #DCE9E6; --sable: #F1E6D8;
  --blanc: #FFFFFF; --gris: #6E6259; --ligne: rgba(43, 33, 28, 0.12); --ligne-forte: rgba(43, 33, 28, 0.2);
  /* couleurs des activités */
  --c0: #B04A2C; --c0-soft: #F6DFD5; --c1: #2C5A54; --c1-soft: #DCE9E6; --c2: #8A4F7D; --c2-soft: #F0E1EC;
  --c3: #6E6259; --c3-soft: #ECE4DA; --c4: #3F5F8A; --c4-soft: #DFE7F2; --c5: #8A6A1F; --c5-soft: #F3E9CF;
  --display: "Cabinet Grotesk", "Satoshi", -apple-system, BlinkMacSystemFont, sans-serif;
  --body: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(43, 33, 28, 0.06); --shadow-lg: 0 18px 48px rgba(43, 33, 28, 0.16);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ivoire); color: var(--ombre); font-family: var(--body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; line-height: 1.2; text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--sarcelle); outline-offset: 2px; }
.num, .amt { font-variant-numeric: tabular-nums; }
.muted { color: var(--gris); }
[hidden] { display: none !important; }

/* ---------- Structure ---------- */
.top { position: sticky; top: 0; z-index: 10; background: var(--ivoire); padding: calc(10px + var(--safe-top)) 16px 10px; border-bottom: 1px solid var(--ligne); }
.top-in { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'brand nav menu'; align-items: center; gap: 12px; }
.top-in .brand { grid-area: brand; } .top-in .spaces { grid-area: nav; } .top-in .menu-btn { grid-area: menu; }
@media (max-width: 720px) { .top-in { grid-template-columns: 1fr auto; grid-template-areas: 'brand menu' 'nav nav'; row-gap: 8px; } }
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 20px; text-decoration: none; color: inherit; }
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.spaces { display: flex; gap: 6px; overflow-x: auto; min-width: 0; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
@media (min-width: 721px) { .spaces { margin: 0; padding: 0; } }
.spaces::-webkit-scrollbar { display: none; }
.space-tab { white-space: nowrap; border: 0; background: transparent; border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 14px; color: var(--gris); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.space-tab:hover { background: var(--sable); color: var(--ombre); }
.space-tab[aria-current="page"] { background: var(--ombre); color: var(--ivoire); }
.space-tab .lock { font-size: 11px; font-weight: 700; opacity: .75; }
.menu-btn { border: 0; background: var(--blanc); width: 44px; height: 44px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ligne); font-weight: 700; display: inline-grid; place-items: center; }
.menu { position: absolute; right: 16px; top: calc(60px + var(--safe-top)); background: var(--blanc); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; display: grid; min-width: 220px; z-index: 20; }
.menu a, .menu button { text-align: left; border: 0; background: none; padding: 11px 12px; border-radius: var(--r-sm); text-decoration: none; color: inherit; font-weight: 500; }
.menu a:hover, .menu button:hover { background: var(--sable); }
.menu .who { padding: 8px 12px 10px; font-size: 13px; color: var(--gris); border-bottom: 1px solid var(--ligne); margin-bottom: 4px; }
main { max-width: 1080px; margin: 0 auto; padding: 18px 16px calc(110px + var(--safe-bottom)); display: grid; gap: 18px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; }
.page-head h1 { font-size: clamp(26px, 5vw, 34px); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }

/* ---------- Composants ---------- */
.card { background: var(--blanc); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-sm); display: grid; gap: 12px; min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-head h2 { font-size: 19px; }
.btn { border: 0; border-radius: 999px; padding: 11px 18px; font-weight: 700; background: var(--ombre); color: var(--ivoire); min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; font-size: 15px; }
.btn.primary { background: var(--rouille); color: var(--blanc); }
.btn.primary:hover { background: var(--rouille-hover); }
.btn.ghost { background: transparent; color: var(--ombre); box-shadow: inset 0 0 0 1.5px var(--ligne-forte); }
.btn.small { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.btn.danger { background: var(--rouille); color: var(--blanc); }
.btn:disabled { opacity: .5; cursor: default; }
.link { border: 0; background: none; padding: 4px 0; color: var(--rouille); font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.seg { display: inline-flex; background: var(--sable); border-radius: 999px; padding: 3px; flex-wrap: wrap; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 13px; color: var(--gris); min-height: 36px; }
.seg button[aria-pressed="true"] { background: var(--blanc); color: var(--ombre); box-shadow: var(--shadow-sm); }
.period { display: grid; grid-template-columns: auto auto auto auto; align-items: center; gap: 8px; }
@media (max-width: 560px) { .period { grid-template-columns: 40px minmax(0, 1fr) 40px; width: 100%; } .period .seg { grid-column: 1 / -1; justify-self: start; } }
.period .label { font-family: var(--display); font-weight: 700; font-size: 17px; min-width: 140px; text-align: center; }
.icon-btn { border: 0; background: var(--blanc); width: 40px; height: 40px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ligne); font-size: 18px; line-height: 1; }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; background: var(--sable); color: var(--ombre); white-space: nowrap; }
.chip.dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pc, var(--gris)); }
.chip.act { background: var(--pcs, var(--sable)); color: var(--pc, var(--ombre)); }
.chip.a_venir { background: var(--ete-soft); color: #7A3F1C; }
.chip.du { background: var(--rouille-soft); color: var(--rouille); }
.chip.verse { background: var(--sarcelle-soft); color: var(--sarcelle); }
.chip.wait { background: var(--ete-soft); color: #7A3F1C; }
.pick { border: 1.5px solid var(--ligne-forte); background: var(--blanc); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--gris); min-height: 36px; }
.pick[aria-pressed="true"] { background: var(--pcs, var(--ombre)); color: var(--pc, var(--ivoire)); border-color: var(--pc, var(--ombre)); }
.empty { text-align: center; padding: 28px 12px; color: var(--gris); display: grid; gap: 6px; }
.empty b { color: var(--ombre); font-family: var(--display); font-size: 18px; }
.notice { background: var(--ete-soft); border-radius: var(--r-md); padding: 10px 14px; font-size: 14px; }
.error { background: var(--rouille-soft); color: var(--rouille); border-radius: var(--r-md); padding: 10px 14px; font-size: 14px; font-weight: 700; }

/* Chiffres clés */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--blanc); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); display: grid; gap: 2px; min-width: 0; }
.stat span { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }
.stat b { font-family: var(--display); font-size: clamp(20px, 3.4vw, 26px); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat small { font-size: 12px; color: var(--gris); }
.stat.hero { background: var(--ombre); color: var(--ivoire); }
.stat.hero span, .stat.hero small { color: var(--sable); }
.stat.pos b { color: var(--sarcelle); } .stat.neg b { color: var(--rouille); }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Activités */
.acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.act { background: var(--blanc); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); border-top: 4px solid var(--pc); display: grid; gap: 4px; }
.act h3 { font-size: 16px; }
.act .row2 { display: flex; justify-content: space-between; font-size: 13px; color: var(--gris); gap: 8px; }
.act .row2 b { color: var(--ombre); font-variant-numeric: tabular-nums; }

/* Journal */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.list { display: grid; }
.entry { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 2px; border-bottom: 1px solid var(--ligne); align-items: start; }
.entry:last-child { border-bottom: 0; }
.entry .d { font-size: 12px; color: var(--gris); font-weight: 700; padding-top: 2px; font-variant-numeric: tabular-nums; }
.entry .t { font-weight: 700; overflow-wrap: anywhere; }
.entry .m { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--gris); grid-column: 2; }
.entry .a { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.entry .a.in { color: var(--sarcelle); } .entry .a.out { color: var(--rouille); }
.entry .s { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--gris); }
.entry .s b { font-variant-numeric: tabular-nums; color: var(--ombre); }
.entry .acts-row { grid-column: 2 / -1; display: flex; gap: 12px; }
.entry .acts-row button { border: 0; background: none; padding: 2px 0; font-size: 13px; color: var(--gris); text-decoration: underline; text-underline-offset: 3px; min-height: 28px; }
.entry .acts-row button.confirm { color: var(--rouille); font-weight: 700; }

/* Tableau des parts (espace partagé) */
.tbl { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); font-weight: 700; padding: 8px; border-bottom: 1px solid var(--ligne-forte); }
td { padding: 10px 8px; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.who { font-weight: 700; }
.people-sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.person-card { background: var(--sable); border-radius: var(--r-md); padding: 12px 14px; display: grid; gap: 4px; }
.person-card h3 { font-size: 16px; }
.person-card .row2 { display: flex; justify-content: space-between; font-size: 13px; color: var(--gris); }
.person-card .row2 b { color: var(--ombre); font-variant-numeric: tabular-nums; }

/* Formulaires */
form, .form { display: grid; gap: 14px; }
.field { display: grid; gap: 5px; }
.field > span { font-size: 13px; font-weight: 700; color: var(--gris); }
.field small { font-size: 12px; color: var(--gris); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%; min-width: 0; border: 1.5px solid var(--ligne-forte); background: var(--blanc); border-radius: var(--r-md); padding: 10px 12px; font-size: 16px; min-height: 44px;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .grid2 { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.check { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--sable); font-size: 14px; }
.check input { width: 20px; height: 20px; accent-color: var(--rouille); flex: 0 0 auto; }
.check .grow { flex: 1; }
.check b { font-variant-numeric: tabular-nums; }
.calc { display: grid; gap: 4px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--ligne); padding: 12px 14px; font-size: 14px; }
.calc div { display: flex; justify-content: space-between; gap: 10px; }
.calc b { font-variant-numeric: tabular-nums; }
.calc .mine { border-top: 1px solid var(--ligne); padding-top: 6px; margin-top: 2px; font-size: 16px; }
.calc .mine b { color: var(--sarcelle); }

/* Fiche en bas d'écran */
dialog.sheet { border: 0; padding: 0; width: min(560px, 100%); max-width: 100%; max-height: 92vh; margin: auto auto 0; border-radius: 20px 20px 0 0; background: var(--ivoire); color: var(--ombre); box-shadow: var(--shadow-lg); }
@media (min-width: 700px) { dialog.sheet { margin: auto; border-radius: 20px; } }
dialog.sheet::backdrop { background: rgba(43, 33, 28, 0.45); }
dialog.sheet[open] { animation: up .24s var(--ease); }
@keyframes up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-in { padding: 18px 18px calc(18px + var(--safe-bottom)); display: grid; gap: 14px; overflow-y: auto; max-height: 92vh; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sheet-head h2 { font-size: 21px; }
.close { border: 0; background: var(--sable); width: 40px; height: 40px; border-radius: 999px; font-size: 20px; line-height: 1; }
.fab { position: fixed; right: 18px; bottom: calc(18px + var(--safe-bottom)); z-index: 15; background: var(--rouille); color: var(--blanc); border: 0; border-radius: 999px; padding: 15px 22px; font-weight: 700; font-size: 16px; box-shadow: var(--shadow-lg); min-height: 52px; }
.fab:hover { background: var(--rouille-hover); }

/* Accueil (connexion, installation, invitation) */
.auth { min-height: 100vh; display: grid; place-items: center; padding: calc(24px + var(--safe-top)) 16px calc(24px + var(--safe-bottom)); }
.auth .card { width: min(420px, 100%); padding: 26px; gap: 16px; }
.auth h1 { font-size: 28px; }
.auth .brand { font-size: 24px; }

/* Réglages */
.rates { width: 100%; min-width: 0; }
.rates td, .rates th { padding: 7px 8px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.inline-form .field { min-width: 120px; flex: 1 1 120px; }
.member-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ligne); }
.member-row:last-child { border-bottom: 0; }
.copybox { display: flex; gap: 8px; align-items: center; background: var(--sarcelle-soft); border-radius: var(--r-md); padding: 10px 12px; }
.copybox code { flex: 1; min-width: 0; word-break: break-all; font-size: 13px; }
.toast { position: fixed; left: 50%; bottom: calc(86px + var(--safe-bottom)); transform: translateX(-50%); background: var(--ombre); color: var(--ivoire); padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 50; }
.toast.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Espace partagé sur téléphone : le tableau devient une pile de fiches */
.tbl.cards td.c-part .muted { display: none; }
.stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .stats.three .stat { padding: 12px; }
  .stats.three .stat b { font-size: 15px; white-space: normal; overflow: visible; }
  .stats.three .stat small { display: none; }
  .tbl.cards table { min-width: 0; }
  .tbl.cards thead { display: none; }
  .tbl.cards tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--ligne); }
  .tbl.cards tr:last-child { border-bottom: 0; }
  .tbl.cards td { border: 0; padding: 0; }
  .tbl.cards td.c-date { grid-column: 1; font-size: 12px; color: var(--gris); font-weight: 700; }
  .tbl.cards td.c-who { grid-column: 2; grid-row: 1; text-align: right; }
  .tbl.cards td.c-client { grid-column: 1 / -1; font-weight: 700; }
  .tbl.cards td.c-part { grid-column: 1; font-size: 13px; color: var(--gris); }
  .tbl.cards td.c-part .muted { display: inline; }
  .tbl.cards td.c-base, .tbl.cards td.c-rate { display: none; }
  .tbl.cards td.c-amt { grid-column: 2; grid-row: 3; font-size: 16px; }
  .tbl.cards td.c-st { grid-column: 1; }
  .tbl.cards td.c-act { grid-column: 2; text-align: right; }
}

/* Photos de profil */
.av { width: var(--s, 28px); height: var(--s, 28px); border-radius: 50%; background: var(--sable); color: var(--ombre); display: inline-grid; place-items: center; overflow: hidden; flex: 0 0 auto; font-family: var(--display); font-weight: 700; font-size: calc(var(--s, 28px) * 0.42); box-shadow: inset 0 0 0 1px var(--ligne); }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-btn { padding: 0; overflow: hidden; }
.who-h { display: inline-flex; align-items: center; gap: 8px; }
.chip.facture { background: var(--sable); color: var(--ombre); }
.contract .calc { font-size: 14px; }

.member-row .btn { white-space: nowrap; flex: 0 0 auto; }
.member-row > span:first-child { min-width: 0; }