:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f1f2f8;
  --border: #e6e8f0;
  --text: #1c2330;
  --muted: #6b7280;
  --accent: #6c5ce7;
  --accent-dark: #5a4bd4;
  --accent-soft: #efecfd;
  --income: #059669;
  --expense: #dc2626;
  --warn: #d97706;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 8px 28px rgba(31, 33, 70, .06);
  --shadow-sm: 0 2px 10px rgba(31, 33, 70, .05);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 15px; margin: 0 0 14px; font-weight: 600; }
h3 { font-size: 14px; margin: 18px 0 10px; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.hidden { display: none !important; }

#app { display: flex; height: 100vh; overflow: hidden; }

/* Sidebar — narrow icon rail (icon + small label, soft-purple active pill) */
.sidebar {
  width: 84px; flex-shrink: 0; background: var(--surface);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  padding: 12px 8px; overflow: hidden;   /* nav scrolls internally; brand/footer stay pinned */
}
nav { display: flex; flex-direction: column; gap: 6px; }
/* Pastille de logo — encore utilisée par l'écran « À propos » (js/app.js), pas seulement par la
   barre latérale : ne pas la retirer avec le reste de l'ancien en-tête du tiroir. */
.logo {
  width: 40px; height: 36px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #8b7ff0); font-size: 12px; font-weight: 800;
  color: #fff; letter-spacing: .03em;
}
.sidebar nav { flex: 1; min-height: 0; overflow-y: auto; }
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center; background: none; border: none; color: var(--muted);
  padding: 10px 4px; border-radius: 14px; cursor: pointer; font-size: 11px; font-weight: 500;
  transition: background .12s, color .12s;
}
.nav-item .ni-ico { display: grid; place-items: center; }
.nav-item .ni-ico svg { width: 23px; height: 23px; }
.nav-item .ni-lbl { line-height: 1; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sidebar-footer { margin-top: auto; padding: 8px 0 2px; color: var(--muted); font-size: 10px; text-align: center; }
.sidebar-footer #txn-count { display: none; }
.sidebar-profile { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; padding: 8px 4px; border-radius: 14px; width: 100%; margin-bottom: 4px; }
.sidebar-profile:hover { background: var(--surface-2); }
.sidebar-profile .tp-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; background-size: cover; background-position: center; }
.sidebar-profile .sp-name { font-size: 10px; color: var(--muted); max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-status { display: block; font-size: 11px; margin-top: 6px; }
.sync-status.synced { color: var(--income); }
.sync-status.saving, .sync-status.pulling { color: var(--muted); }
.sync-status.offline, .sync-status.error { color: var(--warn); }
.sync-status.off { display: none; }

/* Content */
.content { flex: 1; overflow-y: auto; padding: 26px 30px; }
.view { display: none; }
.view.active { display: block; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px);} to {opacity:1;transform:none;} }
.view-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 12px; }
.view-header h1 { display: flex; align-items: center; gap: 10px; }
.vh-ico { display: inline-flex; color: var(--accent); }
.vh-ico svg { width: 26px; height: 26px; }
.view-sub { color: var(--muted); margin: 4px 0 0; font-size: 14px; }
.view-header-actions { display: flex; align-items: center; gap: 8px; }
.task-search-row { margin-bottom: 14px; }
.task-search-row input { width: 100%; }
.period-picker { display: flex; align-items: center; gap: 8px; color: var(--muted); }

/* Inputs & buttons */
select, input[type=text], input[type=number], input[type=date], input[type=month], input[type=search] {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: 11px 12px; border-radius: 12px; font-size: 16px; outline: none;
}
select:focus, input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* PLANCHER DE 16px SUR TOUT CHAMP DE SAISIE.
   Safari iOS zoome dès qu'un champ recevant le focus est sous 16px, et ne dézoome jamais ensuite :
   il faut pincer pour revenir. Le réflexe habituel — `maximum-scale=1` sur le viewport — supprime le
   problème en supprimant AUSSI le zoom volontaire, ce qui rend l'app inutilisable pour qui a besoin
   d'agrandir. On fixe donc la taille réelle du texte saisi. Cette règle passe APRÈS les règles de
   composant (.task-sort-row select, #cal-qa-input, .subtask-add input…) qui descendaient à 12-15px
   et rouvraient le problème une par une ; `!important` est ici la garantie qu'aucune règle ajoutée
   plus tard ne le réintroduise sans qu'on s'en aperçoive.
   Les tailles < 16px restent parfaitement permises partout ailleurs : seuls les CHAMPS sont visés. */
input, select, textarea { font-size: 16px !important; }
/* Les cases à cocher et boutons radio n'ont pas de texte : la contrainte ne ferait que les déformer. */
input[type=checkbox], input[type=radio] { font-size: inherit !important; }
.btn {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: 11px 16px; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 600;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: scale(.99); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn.danger { color: var(--expense); border-color: var(--border); }
.btn.danger:hover { background: rgba(220,38,38,.10); border-color: var(--expense); color: var(--expense); }
.btn.block { display: block; width: 100%; text-align: center; }
.file-btn { display: inline-block; }

/* Segmented control (pill tabs) */
.segmented { display: inline-flex; background: var(--surface-2); border-radius: 12px; padding: 4px; gap: 4px; }
/* Les barres d'onglets (Fil, Repas, Budget, Apprendre…) peuvent compter jusqu'à 6 onglets : sur
   mobile la somme des libellés dépasse la largeur d'écran. Sans défilement, les derniers onglets
   sortaient de l'écran (inatteignables) ET faisaient défiler toute la page horizontalement.
   On rend la barre défilable horizontalement au lieu de la laisser déborder. */
.segmented.block { display: flex; width: 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented.block::-webkit-scrollbar { display: none; }
.seg { flex: 1 0 auto; background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.seg.active { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(31,33,70,.10); }

/* List rows (icon chip + body + chevron) */
.list { display: flex; flex-direction: column; gap: 8px; }
.list.flush { gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.list.flush .list-row { border: none; border-radius: 0; border-bottom: 1px solid var(--border); box-shadow: none; }
.list.flush .list-row:last-child { border-bottom: none; }
.list-row { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; width: 100%; text-align: left; cursor: pointer; box-shadow: var(--shadow); }
.list-row.static { cursor: default; box-shadow: none; }
.list-row:hover:not(.static) { border-color: var(--accent); }
.icon-chip { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--accent-soft); color: var(--accent); }
.icon-chip svg { width: 22px; height: 22px; }
.lr-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lr-title { font-weight: 600; }
.lr-sub { font-size: 12px; color: var(--muted); }
.lr-trail { color: var(--muted); display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.bill-amt { color: var(--muted); font-weight: 600; font-size: 13px; }
.lr-chevron { color: var(--muted); flex: 0 0 auto; }
.lr-chevron svg { width: 18px; height: 18px; }
.tone-violet.icon-chip { background: #ede9fe; color: #7c3aed; }
.tone-green.icon-chip  { background: #d1fae5; color: #059669; }
.tone-orange.icon-chip { background: #ffedd5; color: #ea580c; }
.tone-blue.icon-chip   { background: #dbeafe; color: #2563eb; }
.tone-red.icon-chip    { background: #fee2e2; color: #dc2626; }
.tone-pink.icon-chip   { background: #fce7f3; color: #db2777; }
.tone-cyan.icon-chip   { background: #cffafe; color: #0891b2; }

/* Centered screen header (sub-pages / sheets) */
.screen-header { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.screen-header h1, .screen-header h2 { flex: 1; text-align: center; margin: 0; font-size: 18px; }
.sh-btn { background: none; border: none; color: var(--text); cursor: pointer; padding: 6px; display: grid; place-items: center; width: 36px; height: 36px; }
.sh-btn svg { width: 22px; height: 22px; }
.sh-spacer { width: 36px; flex: 0 0 auto; }

/* KPI */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.kpi-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.kpi-value { font-size: 26px; font-weight: 700; margin-top: 6px; }
.kpi-value.income { color: var(--income); }
.kpi-value.expense { color: var(--expense); }
/* Coloured KPI cards (Budget mensuel) */
.kpi.kpi-tone-green { background: #eafaf0; border-color: #cdeeda; }
.kpi.kpi-tone-green .kpi-label { color: #2f9e63; }
.kpi.kpi-tone-red { background: #fdecec; border-color: #f7cccc; }
.kpi.kpi-tone-red .kpi-label { color: #d6453f; }
.kpi.kpi-tone-blue { background: #e8f1fe; border-color: #cfe0fb; }
.kpi.kpi-tone-blue .kpi-label { color: #2f6fd6; }
.kpi.kpi-tone-blue .kpi-value { color: #2f6fd6; }

/* Cards */
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); }
.card.wide { grid-column: 1 / -1; }
.chart-box { position: relative; height: 280px; }

/* Top categories list */
#top-categories { display: flex; flex-direction: column; gap: 10px; }
.topcat-row { display: grid; grid-template-columns: 140px 1fr 90px; align-items: center; gap: 12px; }
.topcat-bar { height: 10px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.topcat-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #8b7ff0); }
.topcat-amt { text-align: right; color: var(--muted); }

/* Tables */
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.toolbar-spacer { flex: 1; }
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; max-height: 70vh; }
.table-wrap.small { max-height: 320px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { position: sticky; top: 0; background: var(--surface-2); cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
th.num, td.num { text-align: right; }
tbody tr:hover { background: var(--surface-2); }
td.amount-expense { color: var(--expense); }
td.amount-income { color: var(--income); }
.cat-pill { background: var(--surface-2); border: 1px solid var(--border); padding: 2px 8px; border-radius: 20px; font-size: 12px; }
.row-action { color: var(--muted); cursor: pointer; background: none; border: none; font-size: 13px; }
.row-action:hover { color: var(--expense); }

/* Import */
.import-tabs, .import-tab { }
.import-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.import-tab { background: none; border: none; color: var(--muted); padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; }
.import-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.import-panel { display: none; }
.import-panel.active { display: block; }
.mapping-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.mapping-grid label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 13px; }
.mapping-grid label select, .mapping-grid label input { color: var(--text); }

/* Budgets */
#budget-list { display: flex; flex-direction: column; gap: 12px; }
.budget-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; }
.budget-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.budget-name { font-weight: 600; }
.budget-input { width: 110px; }
.budget-bar { height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.budget-bar span { display: block; height: 100%; background: var(--income); transition: width .3s; }
.budget-bar.warn span { background: var(--warn); }
.budget-bar.over span { background: var(--expense); }
.budget-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--muted); }

/* Month projection card */
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 22px 0 12px; }
.month-card { margin-bottom: 6px; }
.month-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.month-head h2 { margin: 0; }
.month-head #month-sub { font-size: 15px; font-weight: 600; color: var(--text); }
.month-figures { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.month-figures .mf { flex: 1; min-width: 130px; background: var(--surface-2); border-radius: 10px; padding: 12px 14px; }
.month-figures .mf-result { background: linear-gradient(135deg, rgba(108,92,231,.10), rgba(108,92,231,.04)); border: 1px solid var(--border); }
.mf-label { font-size: 12px; color: var(--muted); }
.mf-val { font-size: 20px; font-weight: 700; margin-top: 4px; }
.mf-val.income { color: var(--income); }
.mf-val.expense { color: var(--expense); }
.mf-op { display: flex; align-items: center; font-size: 20px; color: var(--muted); padding: 0 2px; }
.mf-sub { font-size: 11px; margin-top: 2px; }
.upcoming-amt.income { color: var(--income); }
.upcoming-amt.expense { color: var(--expense); }
#income-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.income-row { display: flex; align-items: center; gap: 12px; }
.income-row .amt { font-weight: 600; }
.month-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-2); margin: 18px 0 8px; }
.month-bar span { display: block; height: 100%; }
.seg-paid { background: var(--expense); }
.seg-remaining { background: var(--warn); }
.seg-left { background: var(--income); }
.month-legend { display: flex; gap: 18px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.month-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.dot.paid { background: var(--expense); }
.dot.remaining { background: var(--warn); }
.dot.left { background: var(--income); }
.month-remaining h3 { margin: 14px 0 8px; }
.upcoming-row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.upcoming-row:last-child { border-bottom: none; }
.upcoming-name { display: flex; align-items: center; gap: 8px; }
.upcoming-amt { font-weight: 700; }

/* Recurring bills */
.kpi-grid.kpi-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-grid.kpi-2 { grid-template-columns: repeat(2, 1fr); }
.rec-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.rec-row:last-child { border-bottom: none; }
.rec-main { flex: 1; min-width: 0; }
.rec-name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.rec-sub { font-size: 12px; margin-top: 3px; }
.rec-badges { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.rec-amt { text-align: right; white-space: nowrap; }
.rec-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; white-space: nowrap; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
tr.matched-row { background: rgba(5,150,105,.08); }
.afford-mini { font-size: 12px; line-height: 1.4; }
#bills-table td:nth-child(4) { white-space: normal; min-width: 260px; max-width: 360px; }
.afford-mini.yes { color: var(--income); }
.afford-mini.caution { color: var(--warn); }
.afford-mini.no { color: var(--expense); }
.kpi-value .budget-input { font-size: 18px; font-weight: 700; }
.rec-amt-main { font-weight: 700; font-size: 15px; }
.badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border); }
.badge.soon { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge.over { background: rgba(220,38,38,.12); color: var(--expense); border-color: transparent; }
.badge.good { background: rgba(5,150,105,.12); color: var(--income); border-color: transparent; }
.badge.neutral { background: var(--surface-2); color: var(--muted); }
/* Task priority pills (filled, matching the mockup) */
/* « + » create action sheet */
.create-sheet { position: fixed; inset: 0; z-index: 160; background: rgba(20,20,45,.4); display: flex; align-items: flex-end; justify-content: center; animation: fade .15s ease; }
.create-sheet.hidden { display: none; }
.create-sheet-panel { background: var(--surface); width: 100%; max-width: 480px; border-radius: 22px 22px 0 0; padding: 10px 12px 16px;
  margin-bottom: 76px; box-shadow: 0 -10px 36px rgba(0,0,0,.2); }
.create-sheet-title { font-size: 13px; color: var(--muted); font-weight: 600; padding: 8px 10px 4px; }
.create-opt { display: flex; align-items: center; gap: 14px; width: 100%; background: none; border: none; padding: 14px 10px;
  font-size: 16px; font-weight: 600; color: var(--text); cursor: pointer; border-radius: 14px; text-align: left; }
.create-opt:hover { background: var(--surface-2); }
.create-opt:active { transform: scale(.99); }
.create-ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; }
.create-ico svg { width: 22px; height: 22px; }
.create-ico.sc-violet { background: #ede9fe; color: #6d28d9; }
.create-ico.sc-green { background: #dcfce7; color: #15803d; }
.create-ico.sc-blue { background: #dbeafe; color: #1d4ed8; }
@media (min-width: 760px) { .create-sheet { align-items: center; } .create-sheet-panel { border-radius: 18px; margin-bottom: 0; } }
/* Shopping item AI illustration */
.shop-thumb { width: 40px; height: 40px; border-radius: 11px; overflow: hidden; flex: 0 0 auto; background: var(--surface-2); display: grid; place-items: center; cursor: pointer; }
.shop-thumb:hover { box-shadow: 0 0 0 2px var(--accent-soft); }
.shop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-thumb.noimg img { display: none; }
.shop-thumb.noimg::after { content: '🛒'; font-size: 20px; }
.prio-badge { font-size: 12px; font-weight: 700; padding: 6px 15px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; }
.prio-urgent { background: linear-gradient(135deg, #ff6b6b, #fa5252); color: #fff; }
.prio-important { background: linear-gradient(135deg, #ffa94d, #ff922b); color: #fff; }
.prio-normal { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.task-meta .due-soon { color: var(--accent); font-weight: 600; }
.task-meta .due-late { color: var(--expense); font-weight: 600; }
/* Courses — Panier estimé header */
.panier { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.panier-label { font-size: 13px; color: var(--muted); }
.panier-val { font-size: 26px; font-weight: 800; color: var(--income); margin-top: 2px; }
.panier-sub { font-size: 12.5px; color: var(--income); opacity: .85; margin-top: 2px; }
.panier-ring { width: 84px; height: 84px; border-radius: 50%; flex: 0 0 auto; display: grid; place-content: center; text-align: center;
  background: conic-gradient(var(--income) 0 78%, #e9f6ee 78% 100%); }
.panier-ring::before { content: ''; position: absolute; }
.panier-ring { position: relative; }
.panier-ring > * { position: relative; z-index: 1; }
.panier-ring::after { content: ''; position: absolute; inset: 9px; background: var(--surface); border-radius: 50%; z-index: 0; }
.panier-count { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; }
.panier-unit { font-size: 11px; color: var(--muted); }
/* Exercices — result screen */
.exo-result { text-align: center; padding: 24px 20px 20px; }
.exo-result-title { font-size: 24px; }
.exo-result-sub { margin: 4px 0 0; }
.exo-blob-wrap { position: relative; display: grid; place-items: center; margin: 10px 0 0; }
.exo-sparkles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.exo-blob { width: 210px; height: 170px; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, #d6f5e0, #c2efd1); border-radius: 48% 52% 55% 45% / 55% 50% 50% 45%; }
.exo-blob.low { background: radial-gradient(closest-side, #ffe8d6, #ffdcc2); }
.exo-score { font-size: 46px; font-weight: 800; color: #2f9e63; line-height: 1; }
.exo-blob.low .exo-score { color: #e8590c; }
.exo-score-sub { font-size: 14px; color: #2f9e63; margin-top: 6px; font-weight: 600; }
.exo-blob.low .exo-score-sub { color: #e8590c; }
.exo-mascot { margin: -6px auto 14px; width: 132px; }
.exo-mascot svg { width: 100%; height: auto; display: block; }
.exo-result-actions { display: flex; flex-direction: column; gap: 10px; }
.btn.exo-soft { background: var(--accent-soft); border: none; color: var(--accent); font-weight: 700; padding: 13px; border-radius: 14px; }
.btn.exo-soft:hover { background: #e4def9; color: var(--accent-dark); }
/* Adult challenges (défis) */
.defi-create { display: flex; gap: 8px; }
.defi-create select { flex: 1; }
.defi-row { gap: 10px; }
.defi-board-wrap { padding: 2px 8px 10px; }
.defi-board { display: flex; flex-direction: column; gap: 6px; }
.defi-board-title { font-weight: 700; margin: 16px 0 8px; }
.defi-board-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; }
.defi-board-row.me { background: var(--accent-soft); }
.defi-rank { width: 26px; text-align: center; font-weight: 700; }
.defi-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-content: center; color: #fff; font-weight: 700; font-size: 13px;
  background-size: cover; background-position: center; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--ring, var(--accent)); flex: 0 0 auto; }
.defi-name { flex: 1; font-weight: 600; }
.defi-score { font-weight: 800; }
/* Exercice en cours : la vue Apprendre passe en PLEINE PAGE. Sans ça, l'exercice s'affichait sous les
   cartes de progression, le coach et l'historique — donc tout en bas. Piloté par syncExoFocus(). */
#view-exercices.exo-focus > .view-header,
#view-exercices.exo-focus #exo-tabs,
#view-exercices.exo-focus [id^="exo-tab-"] { display: none !important; }

/* Suivi scolaire — per-subject table */
.subj-table { display: flex; flex-direction: column; }
.subj-head { display: grid; grid-template-columns: 1fr 60px 140px; gap: 10px; color: var(--muted); font-size: 12px; padding: 4px 2px 8px; }
.subj-row { display: grid; grid-template-columns: 1fr 60px 140px; gap: 10px; align-items: center; padding: 9px 2px; border-top: 1px solid var(--border); }
.subj-name { font-weight: 600; }
.subj-n { text-align: center; color: var(--muted); }
.subj-prog { display: flex; align-items: center; gap: 8px; }
.subj-pct { font-size: 12.5px; font-weight: 700; width: 38px; }
.subj-bar { flex: 1; height: 8px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.subj-fill { display: block; height: 100%; border-radius: 6px; }
.subj-fill.good { background: #2f9e63; }
.subj-fill.ok { background: #51cf66; }
.subj-fill.warn { background: #ffa94d; }
.subj-fill.bad { background: #ff6b6b; }
/* Event modal — Qui picker, colour picker, all-day */
.field-lbl { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.ev-who-pick { display: flex; flex-wrap: wrap; gap: 10px; }
/* Jours d'une récurrence hebdomadaire : sept bascules indépendantes (lun→dim), plusieurs activables.
   Grille à 7 colonnes plutôt que flex : les sept pastilles gardent la même largeur quel que soit le
   libellé, et la ligne ne se casse jamais sur un petit écran. */
.ev-day-pick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ev-day { padding: 10px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; }
.ev-day:hover { border-color: var(--accent); }
.ev-day.sel { background: var(--accent); border-color: var(--accent); color: #fff; }
.ev-who-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; padding: 0; cursor: pointer; width: 56px; }
.ev-who-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-content: center; color: #fff; font-weight: 700; font-size: 16px;
  background-size: cover; background-position: center; border: 2px solid #fff; box-shadow: 0 0 0 2px transparent; transition: box-shadow .12s; }
.ev-who-chip.sel .ev-who-av { box-shadow: 0 0 0 2px var(--ring, var(--accent)); }
.ev-who-chip:not(.sel) .ev-who-av { opacity: .85; }
.ev-who-lbl { font-size: 11px; color: var(--muted); max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-who-chip.family .ev-who-av { font-size: 20px; }
.ev-allday-row { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 12px 0 2px; cursor: pointer; }
.ev-allday-row input { width: auto; }
.ev-color-pick { display: flex; gap: 12px; flex-wrap: wrap; }
.ev-color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; background: var(--c); cursor: pointer;
  box-shadow: 0 0 0 1px var(--border); transition: box-shadow .12s, transform .08s; }
.ev-color:hover { transform: scale(1.08); }
.ev-color.sel { box-shadow: 0 0 0 2px var(--c); }
.ev-color[data-color=""] { background: conic-gradient(#fa5252, #ffd43b, #51cf66, #4dabf7, #9775fa, #fa5252); }
/* Photo detail — meta + map */
/* Photo plein écran : hauteur bornée + object-fit, sinon une photo portrait s'étire sur toute la
   largeur de la modale (surtout en feuille pleine largeur sur tablette < 820px) sans limite de
   hauteur — on ne voit qu'un fragment, obligé de scroller (signalé « photos trop grandes » sur les
   tablettes des enfants). */
.pv-photo { display: block; width: auto; max-width: 100%; max-height: 55vh; margin: 0 auto; border-radius: 10px; background: #000; object-fit: contain; }
#photo-view-meta { text-align: left; }
.pv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 4px; }
.pv-loc { margin-top: 12px; }
.pv-lbl { font-size: 12px; color: var(--muted); }
.pv-val { font-weight: 600; color: var(--accent); margin-top: 2px; }
.pv-map { display: block; margin-top: 14px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.pv-map img { width: 100%; height: auto; display: block; }
.pv-map-fallback { display: flex; align-items: center; justify-content: center; gap: 8px; height: 120px;
  background: linear-gradient(180deg, #eef6ee, #dfeede); color: var(--accent); font-weight: 600; text-decoration: none; }
.pv-map-fallback .pv-pin { font-size: 22px; }
.pv-album-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.pv-album-row .pv-lbl { margin: 0; }
.pv-album-select { flex: 1; }
/* Photo album cover cards */
.photo-actions { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; min-height: 20px; }
.photo-add-group { display: flex; gap: 8px; flex-wrap: wrap; }
/* Multi-member assignee picker (task modal) */
.member-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.member-chip { border: 2px solid var(--mc, var(--border)); background: transparent; color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; opacity: .55; }
.member-chip.on { background: var(--mc, var(--accent)); color: #fff; opacity: 1; }
/* Per-assignee completion dots in a task row */
.assignee-strip { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.assignee-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ac, #888); background: transparent; color: #fff; font-size: 11px; line-height: 14px; text-align: center; padding: 0; cursor: pointer; }
.assignee-dot.done { background: var(--ac, #888); }
.assignee-dot.locked { cursor: default; }
.assignee-count { font-size: 12px; color: var(--muted); font-weight: 600; margin-left: 2px; }
/* F2 gamification — child stars + badge collection */
.child-stars { background: linear-gradient(135deg, #fff7e6, #ffe8f0); }
.stars-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stars-count { font-size: 28px; font-weight: 800; color: #b8860b; }
.stars-msg { font-size: 15px; font-weight: 600; color: var(--text); }
.stars-next { font-size: 13px; margin: 6px 0 10px; }
/* Collision de noms corrigée : ces tuiles de badge (étoiles enfant) réutilisaient la classe générique
   `.badge` — déjà définie plus haut comme une PASTILLE inline (Partagé/Privé, échéances, scores…).
   Comme cette règle vient après, elle transformait TOUTES les pastilles de l'app en blocs flex
   pleine largeur (ex. « Partagé » s'étirant sur toute la ligne d'une facture). Les tuiles sont
   maintenant portées par `.badge-tile`, sans toucher à la pastille générique. */
.badges-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.badge-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; background: rgba(255,255,255,.6); }
.badge-emoji { font-size: 26px; line-height: 1; }
.badge-name { font-size: 11px; font-weight: 600; color: var(--text); text-align: center; }
.badge-tile.locked { opacity: .5; filter: grayscale(.6); }
.badge-tile.locked .badge-name { color: var(--muted); }
.member-stars { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 2px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.member-stars .ms-total { font-size: 16px; }
.member-stars .ms-reward { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.member-stars .ms-reward b { font-size: 15px; color: var(--text); min-width: 14px; text-align: center; }
/* F3 — Repas: recettes, semaine, courses */
.repas-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.repas-toolbar input { flex: 1; min-width: 140px; }
.recipe-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 10px; }
.recipe-card { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; }
.recipe-title { font-weight: 700; }
.recipe-meta { font-size: 12px; }
.rc-ing-row { display: grid; grid-template-columns: 1fr 70px 80px 28px; gap: 6px; margin: 4px 0; }
.rc-ing-row input { width: 100%; }
.week-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 12px; font-weight: 600; }
.week-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.week-day { border: 1px solid var(--border); border-radius: 10px; padding: 8px; background: var(--surface); }
.week-day.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.wd-head { font-weight: 700; font-size: 13px; margin-bottom: 6px; text-transform: capitalize; }
.week-slot { margin-bottom: 8px; }
.ws-head { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.meal-chip { display: block; width: 100%; text-align: left; margin: 3px 0; padding: 5px 8px; border-radius: 8px; border: none; background: var(--accent-weak, #eef); color: var(--text); cursor: pointer; font-size: 13px; }
.ws-add { width: 100%; border: 1px dashed var(--border); background: transparent; border-radius: 8px; padding: 3px; cursor: pointer; color: var(--muted); margin-top: 2px; }
.mealshop-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.mealshop-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; }
.mealshop-row input { width: auto; }
/* Repas — Aperçu (nouvel onglet) */
.repas-today-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.repas-today-date { font-size: 12px; color: var(--muted); text-transform: capitalize; }
.repas-today-slot { font-size: 12.5px; margin-bottom: 2px; }
.repas-today-name { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.repas-today-meta { font-size: 13px; margin-bottom: 10px; }
.repas-tip { font-size: 12.5px; background: var(--accent-soft); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }
.repas-mini-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 4px; }
.rmw-day { border: 1px solid var(--border); border-radius: 10px; padding: 6px 4px; text-align: center; background: var(--surface); min-height: 64px; }
.rmw-day.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.rmw-dow { font-size: 10px; color: var(--muted); text-transform: uppercase; }
.rmw-date { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.rmw-name { font-size: 10.5px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.repas-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
@media (max-width: 640px) { .repas-2col { grid-template-columns: 1fr; } }
.repas-prog-bar { height: 8px; border-radius: 999px; background: var(--surface-2, #f0f0f5); overflow: hidden; }
.repas-prog-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.ac-hero-cta-card { margin-top: 16px; background: linear-gradient(135deg, var(--accent-soft), var(--surface-2, #f4f4fb)); }
.ac-hero-cta-inner { display: flex; gap: 12px; align-items: flex-start; }
.repas-ai-avatar { font-size: 30px; flex: 0 0 auto; }
.repas-ai-title { font-weight: 700; margin-bottom: 2px; }
.repas-ai-text { margin: 0 0 8px; font-size: 13px; }
.repas-idea-card { display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.repas-idea-title { font-weight: 700; }
.repas-ai-actions { display: flex; gap: 8px; }
/* F4 — document analysis review */
.analyze-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.analyze-type { font-size: 17px; font-weight: 700; }
.az-summary { flex-basis: 100%; font-size: 13px; }
.conf-badge { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.conf-badge.conf-ok { background: #e3f7e8; color: #1a7f37; }
.conf-badge.conf-mid { background: #fff3da; color: #a5701a; }
.conf-badge.conf-low { background: #fde2e1; color: #b42318; }
.az-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.az-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.az-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.az-check { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; }
.az-check input { width: auto; }
.album-bar { display: flex; gap: 12px; overflow-x: auto; padding: 2px 0 14px; -webkit-overflow-scrolling: touch; }
.album-card { position: relative; flex: 0 0 auto; width: 124px; height: 84px; border-radius: 14px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: var(--surface-2) center/cover no-repeat; padding: 0; }
.album-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.album-card-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.04) 30%, rgba(0,0,0,.62)); }
.album-card.no-cover { background: linear-gradient(135deg, #e9ecf6, #dfe3f2); }
.album-card.no-cover .album-card-grad { background: linear-gradient(180deg, transparent 40%, rgba(31,33,70,.18)); }
.album-card-meta { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.album-card-name { color: #fff; font-weight: 700; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.45); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.album-card.no-cover .album-card-name { color: var(--text); text-shadow: none; }
.album-card-count { color: #fff; font-size: 11px; font-weight: 700; background: rgba(0,0,0,.35); border-radius: 999px; padding: 1px 8px; flex: 0 0 auto; }
.album-card.no-cover .album-card-count { color: var(--muted); background: rgba(31,33,70,.08); }
.album-card.album-new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 84px;
  border: 2px dashed var(--border); background: var(--surface); color: var(--accent); font-weight: 600; font-size: 13px; }
.album-card.album-new .album-new-plus { font-size: 22px; line-height: 1; }
/* Drag-to-reorder */
.photo-cell { cursor: grab; }
.photo-cell.dragging { opacity: .4; }
.photo-cell.drop-target { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 10px; }
.photo-cell.selected { outline: 3px solid var(--accent); outline-offset: -3px; }
.photo-cell.selected img { opacity: .72; }
.photo-check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.85); border: 2px solid var(--accent); color: var(--accent); font-size: 13px; font-weight: 800; line-height: 18px; text-align: center; }
.photo-cell.selected .photo-check { background: var(--accent); color: #fff; }
.photo-select-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.photo-select-bar select { max-width: 45vw; }
.rec-upcoming-row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border); align-items: center; }
.rec-upcoming-row:last-child { border-bottom: none; }
.rec-dismissed-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }

/* Affordability */
.afford-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; color: var(--muted); font-size: 13px; }
.field input, .field select { color: var(--text); }
.afford-result { font-size: 15px; line-height: 1.6; }
.verdict { font-size: 20px; font-weight: 700; margin-bottom: 10px; padding: 10px 14px; border-radius: 8px; }
.verdict.yes { background: rgba(5,150,105,.12); color: var(--income); }
.verdict.caution { background: rgba(217,119,6,.12); color: var(--warn); }
.verdict.no { background: rgba(220,38,38,.12); color: var(--expense); }
.afford-detail { margin: 6px 0; }
.afford-detail b { color: var(--text); }

/* Rules */
#rules-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.rule-row { display: flex; align-items: center; gap: 10px; }
.rule-row .kw { font-family: monospace; background: var(--surface-2); padding: 3px 8px; border-radius: 6px; }
/* Ligne d'ajout (postes annuels, membres, règles…). `flex-wrap` est indispensable : la ligne des postes
   annuels compte 7 contrôles (type, société, libellé, montant, échéance, propriétaire, bouton) et
   débordait de la carte au lieu de passer à la ligne. */
.rule-add { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0; }
/* Les champs texte se partagent la place restante et peuvent rétrécir (min-width:0, sans quoi un champ
   flex refuse de descendre sous la largeur de son contenu). Les autres gardent leur taille propre :
   pastille de couleur, montant et date ont des largeurs fixées. */
.rule-add input[type="text"] { flex: 1 1 170px; min-width: 0; }

/* Empty state */
.empty-state { text-align: center; padding: 60px 20px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.empty-state p { color: var(--muted); font-size: 16px; }
.empty-state-ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 2px; }
.empty-state-ico svg { width: 30px; height: 30px; }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20,20,45,.45); display: grid; place-items: center; z-index: 50; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; width: 400px; max-width: 94vw; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 20px 60px rgba(20,20,45,.25); }
.modal.modal-wide { width: 680px; max-width: 92vw; }
.modal h2 { text-align: center; font-size: 18px; margin-bottom: 18px; }
.ai-toggle { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; color: var(--muted); font-size: 13px; }
.ai-toggle input { width: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }

/* Settings cards spacing */
#view-settings .card { margin-bottom: 16px; }
#view-settings .btn { margin-right: 8px; margin-top: 6px; }

/* Toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--surface-2); border: 1px solid var(--border); padding: 12px 20px; border-radius: 8px; box-shadow: var(--shadow); z-index: 60; }

pre { background: var(--surface-2); padding: 12px; border-radius: 8px; max-height: 200px; overflow: auto; font-size: 12px; white-space: pre-wrap; }
details summary { cursor: pointer; color: var(--muted); margin: 10px 0; }

/* Nav groups + submenu */
.nav-group { text-align: left; background: none; border: none; color: var(--muted); padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.nav-group:hover { background: var(--surface-2); color: var(--text); }
.nav-group.active { color: var(--text); font-weight: 600; }
.nav-group .caret { font-size: 10px; transition: transform .2s; }
.nav-sub { display: none; flex-direction: column; gap: 2px; margin: 2px 0 2px 10px; padding-left: 8px; border-left: 2px solid var(--border); }
.nav-sub.open { display: flex; }
.nav-item.sub { font-size: 13px; padding: 8px 10px; }

/* Home module tiles */
.module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.module-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; cursor: pointer; text-align: left; box-shadow: var(--shadow); }
.module-tile:hover { border-color: var(--accent); }
.module-ico { font-size: 32px; }
.module-name { font-size: 18px; font-weight: 700; }
.module-desc { font-size: 13px; color: var(--muted); }
.topbar-spacer { flex: 1; }
.topbar-bell { position: relative; background: none; border: none; cursor: pointer; color: var(--text); padding: 6px; display: grid; place-items: center; }
.topbar-bell .bn-ico svg { width: 22px; height: 22px; }
.topbar-home { background: none; border: none; cursor: pointer; color: var(--text); padding: 6px; display: grid; place-items: center; }
.topbar-home .bn-ico svg { width: 22px; height: 22px; }
.bell-badge { position: absolute; top: 0; right: 0; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; padding: 0 4px; }
.topbar-profile { display: grid; place-items: center; }
.tp-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; }
.tp-avatar.tp-empty { background: var(--surface-2); color: var(--muted); }
.topbar-profile.clickable { cursor: pointer; }
.topbar-profile.clickable:hover { filter: brightness(.96); }

/* Bottom navigation (mobile) */
.bottom-nav { display: none; }
.bn-item { background: none; border: none; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; cursor: pointer; flex: 1; padding: 6px 0; }
.bn-item.active { color: var(--accent); }
.bn-ico { display: grid; place-items: center; }
.bn-ico svg { width: 22px; height: 22px; }
.bn-fab { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff; border: none; font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 8px 18px rgba(108,92,231,.45); flex: 0 0 auto; margin-top: -18px; }
.bn-fab:active { transform: scale(.96); }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

/* ===== Home (Accueil) ===== */
.home-hero { margin-bottom: 18px; }
.home-hero.child { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.home-hero-body { min-width: 0; }
/* Tappable child avatar on the home (show + change own photo). */
.home-kid-avatar { position: relative; width: 76px; height: 76px; border-radius: 50%; border: none; padding: 0; cursor: pointer; display: grid; place-items: center; color: #fff; font-size: 30px; font-weight: 800; margin-bottom: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.18); background-size: cover; background-position: center; }
.home-kid-avatar .avatar-cam { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent, #7c5cfc); color: #fff; display: grid; place-items: center; font-size: 13px; border: 2px solid #fff; }
.home-hero-art { flex: 0 0 auto; width: 150px; max-width: 42%; }
.home-hero-art svg { width: 100%; height: auto; display: block; }
#home-greeting { font-size: 28px; font-weight: 800; }
#home-greeting .wave { font-weight: 400; }
#home-greeting.child { background: linear-gradient(90deg, #7c5cfc, #e64980 55%, #f76707); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#home-greeting.child .wave { -webkit-text-fill-color: initial; background: none; }
.home-sub { color: var(--accent); margin: 6px 0 0; font-size: 15px; }
/* Météo miniature (accueil enfant) : simple pastille dans l'espace déjà pris par la date — pas de
   nouvelle carte, pas de recul de la mise en page existante. */
.home-weather-mini { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px 4px 8px; font-size: 13px; font-weight: 700; width: fit-content; }
.hwm-emoji { font-size: 16px; }
.hwm-temp { color: var(--text); }
.hwm-loc { font-weight: 600; font-size: 12px; }

/* Child home — mission + shortcuts */
.child-mission { cursor: pointer; }
.child-mission .mission-row { display: flex; gap: 14px; align-items: flex-start; }
.mission-ico { width: 44px; height: 44px; border-radius: 14px; flex: 0 0 auto; display: grid; place-items: center;
  background: linear-gradient(135deg, #ff922b, #f76707); color: #fff; }
.mission-ico svg { width: 22px; height: 22px; }
.mission-title { font-weight: 700; font-size: 15px; }
.mission-desc { color: var(--muted); margin: 4px 0 8px; }
.mission-reward { color: #f76707; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.mission-reward .mr-plus { font-size: 18px; line-height: 1; }
.child-shortcuts { margin-top: 8px; }
.child-shortcuts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.shortcut-tile { display: flex; align-items: center; gap: 12px; border: none; border-radius: 16px; padding: 16px 16px; cursor: pointer;
  font-size: 15px; font-weight: 700; text-align: left; transition: transform .08s; }
.shortcut-tile:active { transform: scale(.98); }
.shortcut-tile .sc-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.6); }
.shortcut-tile .sc-ico svg { width: 20px; height: 20px; }
.shortcut-tile.sc-blue { background: #dbeafe; color: #1d4ed8; }
.shortcut-tile.sc-orange { background: #ffedd5; color: #c2410c; }
.shortcut-tile.sc-violet { background: #ede9fe; color: #6d28d9; }
.shortcut-tile.sc-pink { background: #fce7f3; color: #be185d; }
.shortcut-tile.sc-green { background: #dcfce7; color: #15803d; }

/* --- Cartes raccourcis enfant : plus grandes & chaleureuses que les .qtile adultes --- */
.child-shortcuts { margin-top: 16px; }
.child-shortcuts .home-section-head h2 { font-size: 18px; }
.sc-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  border: none; border-radius: 20px; padding: 18px 16px; min-height: 120px; cursor: pointer;
  text-align: left; box-shadow: 0 4px 14px rgba(31, 41, 80, .06);
  transition: transform .12s ease, box-shadow .12s ease; }
.sc-card:hover { box-shadow: 0 8px 22px rgba(31, 41, 80, .11); }
.sc-card:active { transform: scale(.97); }
.sc-card .sc-ico { width: 48px; height: 48px; border-radius: 15px; display: grid;
  place-items: center; background: rgba(255, 255, 255, .65); }
.sc-card .sc-ico svg { width: 26px; height: 26px; }
.sc-card-body { display: flex; flex-direction: column; gap: 3px; }
.sc-card-title { font-weight: 800; font-size: 16px; line-height: 1.15; }
.sc-card-sub { font-size: 13px; font-weight: 600; opacity: .82; }
.sc-card.sc-blue { background: #dbeafe; color: #1d4ed8; }
.sc-card.sc-orange { background: #ffedd5; color: #c2410c; }
.sc-card.sc-violet { background: #ede9fe; color: #6d28d9; }
.sc-card.sc-pink { background: #fce7f3; color: #be185d; }
.sc-card.sc-green { background: #dcfce7; color: #15803d; }
.sc-card.sc-teal { background: #ccfbf1; color: #0f766e; }
.sc-card.sc-rose { background: #ffe4e6; color: #be123c; }

/* Mettre en valeur l'illustration maison (scopé enfant) */
.home-hero.child .home-hero-art { width: 168px; max-width: 46%;
  filter: drop-shadow(0 8px 16px rgba(124, 92, 252, .20)); }
.home-hero.child .child-mission { border-radius: 20px; }

/* Password strength / policy hint (registration + change-password screens). */
.pw-hint { margin: -4px 0 8px; font-size: 12.5px; min-height: 1em; font-weight: 600; }
.pw-hint.weak { color: #c2410c; }
.pw-hint.ok { color: #15803d; }

/* Show/hide ("eye") toggle on password fields. */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 42px; box-sizing: border-box; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1;
  padding: 4px 6px; opacity: .5; filter: grayscale(1); }
.pw-eye.on { opacity: 1; filter: none; }

/* Document viewer (image inline + PDF rendered by pdf.js) */
.docview-modal { max-width: 900px; width: 96vw; height: 92vh; display: flex; flex-direction: column; padding: 12px; }
.docview-title { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docview-body { flex: 1; overflow: auto; background: #525659; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.docview-body .docview-canvas { width: 100%; max-width: 850px; height: auto; box-shadow: 0 1px 6px rgba(0,0,0,.4); background: #fff; }
.docview-body .docview-img { max-width: 100%; height: auto; border-radius: 4px; }
.docview-loading { color: #fff; padding: 24px; font-size: 14px; }

/* Shopping basket inline quick-add row. */
.shop-add { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.shop-add-break { display: none; }
.shop-add input, .shop-add select { padding: 8px 10px; }
.shop-store-select { flex: 0 0 auto; max-width: 42%; border: 1px solid var(--border, #e2e2e6); border-radius: 8px; background: #fff; }
.shop-title-wrap { position: relative; flex: 1 1 140px; min-width: 0; }
.shop-title-wrap #shop-add-title { width: 100%; }
.shop-add #shop-add-qty { width: 54px; }
.shop-add #shop-add-price { width: 72px; }
/* AI product suggestions dropdown */
.shop-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 3px; background: #fff; border: 1px solid var(--border, #e2e2e6); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.14); max-height: 240px; overflow-y: auto; }
.shop-sugg-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border: none; background: none; cursor: pointer; font-size: 14px; }
.shop-sugg-item:hover, .shop-sugg-item:focus { background: #f3f4f6; }
/* Per-store basket groups */
.shop-store-group { margin-bottom: 14px; }
.shop-store-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 4px 6px; font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--border, #eee); margin-bottom: 4px; }
.shop-store-head .shop-store-name { color: var(--text, #222); }

/* Aperçu du panier + Inspiration recettes */
/* Une seule carte désormais (l'inspiration est descendue en bas de page) : pleine largeur. */
.shop-overview { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 14px 0; }
.shop-ov-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; }
.shop-ov-head { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.shop-ov-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.shop-ov-row b { font-size: 22px; font-weight: 800; }
.shop-ov-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }
.shop-budget-lbl { font-size: 12px; color: var(--muted); margin-top: 12px; }
.shop-budget-bar { height: 6px; border-radius: 999px; background: var(--surface-2); margin-top: 6px; overflow: hidden; }
.shop-budget-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.shop-budget-link { margin-top: 12px; background: none; border: none; color: var(--accent-dark); font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 0; }
.shop-ov-inspire { background: linear-gradient(160deg, var(--accent-soft), var(--surface)); }
.shop-ov-inspire p { font-size: 13px; color: var(--muted); margin: 0 0 12px; }

/* Qui ajoute quoi */
.shop-owner-head { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.shop-owner-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Groupes de rayon (par défaut) */

/* Ligne d'article de courses */
.shop-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.shop-row.done .task-title { text-decoration: line-through; color: var(--muted); }
/* Même problème que .task-row : sur téléphone, case + vignette + titre + prix + quantité + croix
   dépassaient la largeur d'écran (la croix sortait de l'écran et la page défilait latéralement). */
.shop-qty { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted); }
.shop-price { font-size: 12px; }
.shop-owner-av { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; }

/* Barre du bas (Partager / Trier / Commencer) */
.shop-bottom-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.shop-bottom-bar .btn { flex: 1 1 auto; }
.shop-bottom-bar .btn.primary { flex: 1 1 100%; order: 3; }

/* Vocabulary flashcards (language revision) */
.flash-themes { display: flex; flex-wrap: wrap; gap: 8px; }
.flash-theme { flex: 0 0 auto; }
.flash-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 190px; margin: 10px 0 14px; padding: 26px 18px; border: none; border-radius: 18px; cursor: pointer; background: linear-gradient(135deg, #ede9fe, #fae8ff); box-shadow: 0 4px 16px rgba(124,92,252,.18); text-align: center; }
.flash-card:active { transform: scale(.99); }
.flash-word { font-size: 30px; font-weight: 800; color: #5b3fd6; line-height: 1.2; }
.flash-trans { font-size: 22px; font-weight: 700; color: #222; padding-top: 10px; margin-top: 4px; border-top: 2px dashed rgba(124,92,252,.4); width: 90%; }
.flash-tap { font-size: 13px; }
.flash-actions { display: flex; gap: 8px; }
.flash-actions #flash-next { flex: 1; }
.flash-clock { display: block; margin: 0 auto 6px; }
.flash-clock svg.clock-svg { width: 160px; height: 160px; }
.flash-progress { text-align: center; margin-top: 8px; font-size: 13px; }

.quick-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 22px; }
.qtile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 0; }
.qtile-badge { position: absolute; top: -4px; right: 6px; font-size: 13px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.qtile-badge.practice { opacity: .5; }
.qtile-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; }
.qtile-ico svg { width: 26px; height: 26px; }
.qtile-lbl { font-size: 13px; font-weight: 600; color: var(--text); }
.qtile:hover .qtile-ico { filter: brightness(.96); }
.tone-violet { background: #ede9fe; color: #7c3aed; }
.tone-green  { background: #d1fae5; color: #059669; }
.tone-orange { background: #ffedd5; color: #ea580c; }
.tone-blue   { background: #dbeafe; color: #2563eb; }
.tone-pink   { background: #fce7f3; color: #db2777; }

.home-cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 18px; }
.home-card { box-shadow: var(--shadow); }
/* gap + flex-wrap : sans eux, un titre long ("Derniers exercices des enfants") et son lien d'action
   ("Suivi scolaire") se chevauchaient sur mobile, le lien se coupant en deux lignes par-dessus le titre. */
.home-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; }
.home-card-head h2 { margin: 0; font-size: 17px; }
.home-card-head > .link-btn, .home-card-head > button { flex: 0 0 auto; white-space: nowrap; }

/* ---- Météo (accueil parent) ---- */
.home-weather { margin-bottom: 16px; }
.weather-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.weather-loc { font-size: 13px; font-weight: 600; color: var(--muted); }
.weather-now { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.weather-emoji { font-size: 34px; line-height: 1; }
.weather-temp { font-size: 30px; font-weight: 800; }
.weather-label { font-size: 13px; }
.weather-hourly { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 8px; }
.wh-item { flex: 1 0 60px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: var(--surface-2, #f4f4fb); }
.wh-time { font-size: 11px; color: var(--muted); }
.wh-emoji { font-size: 18px; }
.wh-temp { font-size: 13px; font-weight: 700; }
.weather-minmax { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; }
.weather-daily-toggle { display: block; margin-top: 10px; padding: 0; }
.weather-daily-head { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin: 10px 0 6px; }
.weather-daily { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.wd-item { flex: 1 0 56px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: var(--surface-2, #f4f4fb); border: none; cursor: pointer; font: inherit; color: inherit; }
.wd-item:hover { filter: brightness(.97); }
.wd-day { font-size: 11px; font-weight: 700; text-transform: capitalize; }
.wd-emoji { font-size: 18px; }
.wd-max { font-size: 12.5px; font-weight: 700; }
.wd-min { font-size: 11px; }
.weather-setup { display: flex; flex-direction: column; gap: 8px; }
.weather-setup-row { display: flex; gap: 8px; }
.weather-setup-row input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; }


.grp-chevron.open { transform: rotate(90deg); }
.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 13px; font-weight: 600; padding: 2px 4px; }
.link-btn.ov-link { display: block; width: 100%; text-align: left; margin-top: 14px; }
.home-divider { height: 1px; background: var(--border); margin: 14px 0; }
.home-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.home-empty { font-size: 13px; margin: 4px 0; }

/* Today timeline */
.timeline { display: flex; flex-direction: column; gap: 2px; }
.tl-row { display: grid; grid-template-columns: 44px 12px 36px 1fr; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; text-align: left; padding: 8px 0; width: 100%; }
.tl-time { font-size: 12px; color: var(--muted); font-weight: 600; }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; justify-self: center; }
.tl-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font-size: 16px; }
.tl-body { display: flex; flex-direction: column; gap: 1px; }
.tl-title { font-weight: 600; }
.tl-sub { font-size: 12px; }

.next-task-row { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: none; border-radius: 10px; padding: 12px; width: 100%; cursor: pointer; text-align: left; }
.nt-check { width: 22px; height: 22px; border: 2px solid var(--border); border-radius: 6px; flex: 0 0 auto; }
.nt-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nt-title { font-weight: 600; }
.nt-sub { font-size: 12px; }

/* Overview card */
.ov-grid { display: grid; grid-template-columns: 1fr 140px; gap: 14px; align-items: center; }
.ov-donut { width: 140px; height: 140px; }
.ov-donut canvas { width: 140px !important; height: 140px !important; }
.ov-figures { display: flex; flex-direction: column; gap: 14px; }
.ovf { display: flex; flex-direction: column; gap: 2px; }
.ovf-lbl { font-size: 12.5px; color: var(--muted); }
.ovf-val { font-size: 20px; font-weight: 800; }
.ovf-val.income { color: var(--income); }
.ovf-val.expense { color: var(--expense); }
.ov-bar { height: 8px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin-bottom: 16px; }
.ov-bar span { display: block; height: 100%; background: var(--income); border-radius: 6px; }
.ov-bar span.over { background: var(--expense); }
.ov-cats-label { margin-top: 4px; }
.ov-cats { display: flex; flex-direction: column; gap: 10px; }
.ovc { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; }
.ovc-dot { width: 12px; height: 12px; border-radius: 4px; }
.ovc-name { font-size: 14px; }
.ovc-amt { font-weight: 600; }

/* Smart slot banner */
.smart-slot { display: flex; align-items: center; gap: 14px; background: #ede9fe; border: 1px solid #ddd6fe; border-radius: var(--radius); padding: 14px 16px; margin-bottom: 22px; }
.smart-ico { width: 44px; height: 44px; border-radius: 12px; background: #7c3aed; color: #fff; display: grid; place-items: center; font-size: 20px; flex: 0 0 auto; }
.smart-body { flex: 1; }
.smart-title { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.smart-desc { font-size: 13px; color: var(--muted); margin-top: 2px; }
.smart-btn { white-space: nowrap; }
.badge.new { background: #7c3aed; color: #fff; border-color: transparent; }

/* Section heads + horizontal scrollers */
.home-section-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 12px; }
.home-section-head h2 { margin: 0; font-size: 17px; }
.family-scroll { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 22px; -webkit-overflow-scrolling: touch; }
/* À venir — vertical list inside a card (matches mockup) */
.upcoming-scroll { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom: 22px; overflow: hidden; }
.up-row { display: grid; grid-template-columns: 92px 24px 1fr; align-items: center; gap: 10px; background: none; border: none;
  border-bottom: 1px solid var(--border); padding: 13px 16px; text-align: left; cursor: pointer; width: 100%; }
.up-row:last-child { border-bottom: none; }
.up-row[data-ev]:hover { background: var(--surface-2); }
.up-when { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.up-ico-sm { font-size: 18px; }
.up-body { min-width: 0; }
.up-row-title { font-weight: 600; display: block; }
.up-row-sub { font-size: 12px; display: block; margin-top: 1px; }
.upcoming-scroll .home-empty { padding: 16px; }

/* Membres de la famille — avatar circles with coloured rings */
.fam-member { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: none; padding: 0; cursor: pointer; width: 76px; }
.fam-av { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 24px;
  background-size: cover; background-position: center; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--ring, var(--accent)); transition: transform .12s; }
.fam-member:hover .fam-av { transform: translateY(-2px); }
.fam-member.is-me .fam-name { color: var(--accent); }
.fam-plus { background: var(--surface-2) !important; color: var(--muted); box-shadow: 0 0 0 3px var(--border) !important; border-style: dashed; }
.fam-name { font-weight: 600; font-size: 13px; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Admin / documents */
.docs-actions { margin-bottom: 4px; }

/* Color picker swatch (profiles + family) */
.color-swatch { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 30px; height: 30px; border: none; border-radius: 50%; padding: 0; cursor: pointer; background: none; flex: 0 0 auto; }
.color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.color-swatch::-webkit-color-swatch { border: 1px solid var(--border); border-radius: 50%; }
.color-swatch::-moz-color-swatch { border: 1px solid var(--border); border-radius: 50%; }
.color-pick { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }

/* Calendar legend */
.cal-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cal-chip-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.cal-chip-btn:hover { border-color: var(--accent); }
.cal-chip-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cal-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.cal-chip-btn.active .cal-chip-dot { background: #fff !important; }

/* Calendar (month / week / day) */
.cal-quickadd { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 5px 6px 5px 12px; }
.cal-qa-spark { flex: 0 0 auto; font-size: 15px; opacity: .8; }
#cal-qa-input { flex: 1 1 auto; min-width: 0; border: none; background: transparent; font-size: 15px; color: var(--text); outline: none; }
#cal-qa-go { flex: 0 0 auto; }
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-period { font-weight: 700; font-size: 16px; min-width: 0; }
#cal-view-seg { flex: 1; }

/* Month grid */
.cal-month { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.cal-mgrid-head, .cal-mgrid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-mhead { text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 0; background: var(--surface-2); }
.cal-cell { position: relative; min-height: 92px; padding: 5px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); cursor: pointer; overflow: hidden; }
.cal-cell:nth-child(7n+1) { border-left: none; }
.cal-cell.other { background: var(--surface-2); }
.cal-cell.other .cal-dnum { color: var(--muted); }
.cal-cell:hover { background: var(--accent-soft); }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 10px; }
.cal-dnum { display: inline-grid; place-items: center; width: 24px; height: 24px; font-size: 13px; font-weight: 600; }
.cal-cell.today .cal-dnum { background: var(--accent); color: #fff; border-radius: 50%; }
.cal-cnt-badge { position: absolute; top: 4px; right: 6px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.cal-chip { display: block; font-size: 10px; line-height: 1.4; padding: 1px 5px; border-radius: 5px; margin-top: 2px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-more { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }

/* Résumé du mois */
.month-summary { margin-top: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; }
.month-summary-head { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.month-summary-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.month-stat { flex: 1 1 80px; display: flex; flex-direction: column; gap: 2px; }
.month-stat b { font-size: 22px; font-weight: 800; line-height: 1.1; }
.month-stat span { font-size: 12px; color: var(--muted); font-weight: 600; }
.month-trend { flex: 1 1 160px; display: flex; align-items: center; gap: 8px; background: #ecfdf5; color: #15803d; border-radius: 12px; padding: 8px 12px; font-size: 12px; font-weight: 600; }
.month-trend.down { background: #fef2f2; color: #b91c1c; }
.month-trend span:first-child { font-size: 18px; }
.month-trend b { font-size: 13px; }

/* Vue LISTE (agenda) : événements à venir groupés par jour */
.cal-list { display: flex; flex-direction: column; gap: 16px; }
.cl-day { display: flex; flex-direction: column; gap: 4px; }
.cl-dayhead { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: capitalize; padding: 2px 2px 4px; border-bottom: 1px solid var(--border); }
.cl-day.today .cl-dayhead { color: var(--accent); }
.cl-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.cl-row:hover { border-color: var(--accent); }
.cl-time { flex: 0 0 84px; font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.cl-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }
.cl-body { display: flex; flex-direction: column; min-width: 0; }
.cl-title { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-who { font-size: 12px; }

/* Week / day time grid */
.cg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cg-week { min-width: 680px; }
.cg-weekhead { display: grid; grid-template-columns: 52px repeat(7, 1fr); border: 1px solid var(--border); border-bottom: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; }
.cg-corner { background: var(--surface-2); }
.cg-dayhead { text-align: center; padding: 8px 2px; background: var(--surface-2); border-left: 1px solid var(--border); cursor: pointer; }
.cg-dayhead:hover { background: var(--accent-soft); }
.cg-dh-name { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.cg-dh-num { display: inline-grid; place-items: center; width: 26px; height: 26px; font-size: 14px; font-weight: 700; margin-top: 2px; }
.cg-dayhead.today .cg-dh-num { background: var(--accent); color: #fff; border-radius: 50%; }
.cg-day .cg-weekhead { display: none; }
.cg-body { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden; }
.cg-day .cg-body { border-radius: var(--radius-lg); }
.cg-gutter { width: 52px; flex: 0 0 auto; position: relative; }
.cg-hlabel { position: absolute; right: 6px; font-size: 11px; color: var(--muted); transform: translateY(-6px); }
.cg-cols { flex: 1; display: flex; }
.cg-col { flex: 1; min-width: 0; border-left: 1px solid var(--border); }
.cg-col.today { background: var(--accent-soft); }
.cg-allday-row { padding: 4px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
.cg-allday { display: flex; flex-direction: column; gap: 1px; font-size: 10px; color: #fff; border: none; border-radius: 8px; padding: 4px 7px; text-align: left; cursor: pointer; }
.cg-allday-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-allday-note { font-size: 9px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-lines { position: relative; background-image: repeating-linear-gradient(var(--surface) 0, var(--surface) 47px, var(--border) 47px, var(--border) 48px); cursor: copy; }
/* Largeur pilotée par le couloir calculé dans layoutLanes() : --lanes vaut 1 dans le cas courant,
   et le bloc occupe alors toute la colonne comme avant. */
.cg-event { position: absolute; left: calc(3px + var(--lane, 0) * (100% - 6px) / var(--lanes, 1)); width: calc((100% - 6px) / var(--lanes, 1)); border: none; border-left: 3px solid; border-radius: 9px; padding: 4px 7px; text-align: left; overflow: hidden; cursor: grab; touch-action: none; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(31,33,70,.06); }
/* Créneau partagé : un filet clair sépare les blocs voisins, et le titre passe au-dessus de l'heure
   (dans une demi-colonne, « 12:00–13:55 » mangerait toute la place utile). */
.cg-shared { width: calc((100% - 6px) / var(--lanes, 1) - 2px); box-shadow: 0 0 0 1px var(--surface), 0 1px 3px rgba(31,33,70,.06); }
.cg-shared .cg-ev-time { font-size: 9px; }
/* En colonne partagée sur mobile, l'heure mange toute la largeur utile et le titre se réduit à une
   lettre : on garde le titre, l'heure reste lisible en ouvrant l'activité. */
@media (max-width: 560px) { .cg-shared .cg-ev-time { display: none; } }
.cg-shared .cg-ev-title { font-size: 11px; }
.cg-event:active { cursor: grabbing; }
.cg-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; cursor: ns-resize; touch-action: none; }
.cg-ev-time { font-size: 10px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.cg-ev-title { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Bandeau « vacances scolaires / jour férié » sur la vue Aujourd'hui. */
.da-break { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; }

/* Vue "Aujourd'hui" (agenda mono-jour, liste verticale) */
.cal-day { display: flex; flex-direction: column; gap: 14px; }
.da-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px 4px; }
.da-strip-day { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; border-radius: 12px; padding: 8px 2px; cursor: pointer; }
.da-strip-day:hover { background: var(--accent-soft); }
.da-strip-day.active { background: var(--accent); }
.da-strip-dname { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.da-strip-day.active .da-strip-dname { color: rgba(255,255,255,.8); }
.da-strip-dnum { font-size: 15px; font-weight: 700; width: 26px; height: 26px; display: grid; place-items: center; }
.da-strip-dnum.istoday { background: var(--accent); color: #fff; border-radius: 50%; }
.da-strip-day.active .da-strip-dnum { color: #fff; }
.da-strip-day.active .da-strip-dnum.istoday { background: rgba(255,255,255,.25); }
.da-strip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.da-strip-day.active .da-strip-dot { background: #fff; }
.da-datelabel { font-size: 15px; font-weight: 700; text-transform: capitalize; }
.da-allday-row { display: flex; flex-direction: column; gap: 8px; }
.da-allday { display: flex; flex-direction: column; gap: 2px; text-align: left; border: none; border-left: 4px solid; border-radius: 12px; padding: 10px 14px; cursor: pointer; }
.da-allday-title { font-weight: 700; font-size: 14px; }
.da-allday-note { font-size: 12px; color: var(--muted); }
.da-list { display: flex; flex-direction: column; gap: 8px; }
.da-row { display: grid; grid-template-columns: 46px 8px 40px 1fr auto; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; cursor: pointer; }
.da-row:hover { border-color: var(--accent); }
.da-time { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.da-time-end { font-size: 11px; font-weight: 600; color: var(--muted); }
.da-dot { width: 8px; height: 8px; border-radius: 50%; justify-self: center; }
.da-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; }
.da-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.da-title { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da-sub { font-size: 12px; font-weight: 600; }
.da-badge { font-size: 16px; }
.day-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--accent-soft); border-radius: var(--radius-lg); padding: 14px 16px; }
.day-summary-txt { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.day-summary-ico { font-size: 20px; }
.day-summary-link { background: none; border: none; color: var(--accent-dark); font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }

/* Passwordless login overlay */
.login-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(165deg, #eef0fb 0%, #f6f7fb 60%, #eaf6ee 100%); }
.login-overlay.hidden { display: none; }
.login-box { background: var(--surface); border-radius: 24px; box-shadow: 0 18px 50px rgba(31,33,70,.16); width: 100%; max-width: 440px; text-align: center; overflow: hidden; position: relative; }
.login-inner { padding: 30px 26px 18px; }
.login-brand { font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 9px; letter-spacing: -.01em; }
.login-brand .brand-logo { display: inline-flex; }
.login-box h2 { font-size: 22px; margin: 18px 0 4px; }
.login-sub, #login-sub { font-size: 13.5px; }
.login-choices { display: flex; flex-direction: column; gap: 22px; margin: 22px 0 6px; }
.login-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; }
.login-row.kids { gap: 22px; }
.login-choice { display: flex; flex-direction: column; align-items: center; gap: 9px; background: none; border: none; padding: 0; cursor: pointer; }
.login-avatar { width: 86px; height: 86px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 30px; background-size: cover; background-position: center;
  border: 3px solid #fff; box-shadow: 0 0 0 3px var(--ring, var(--accent)), 0 6px 14px rgba(31,33,70,.12); transition: transform .14s ease; }
.login-choice.kid .login-avatar { width: 72px; height: 72px; font-size: 26px; }
.login-choice:hover .login-avatar { transform: translateY(-3px) scale(1.04); }
.login-choice:active .login-avatar { transform: scale(.98); }
.login-choice-name { font-weight: 700; font-size: 15px; color: var(--text); }
.login-choice-grade { font-size: 12px; color: var(--muted); font-style: italic; margin-top: -4px; }
.login-foot { margin-top: 18px; }
.login-foot-note { font-size: 12.5px; margin: 0 0 8px; }
/* Credential panel (password / code / PIN entry inside the login overlay) */
.cred-panel { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 4px; }
.cred-panel .login-avatar { width: 72px; height: 72px; font-size: 26px; }
.cred-panel .cred-name { font-weight: 700; font-size: 16px; }
.cred-panel #cred-input { width: 220px; max-width: 100%; text-align: center; font-size: 18px; letter-spacing: .12em; }
.cred-panel .cred-err { color: var(--expense); font-size: 12.5px; min-height: 16px; margin: 0; }
.cred-panel .cred-actions { display: flex; gap: 10px; }
/* Tirelire (piggy bank) */
.tirelire-balance { font-size: 34px; font-weight: 800; color: var(--income); letter-spacing: -.01em; }
.tirelire-balance.neg { color: var(--expense); }
#view-tirelire .lr-trail { display: flex; align-items: center; gap: 8px; }
.login-change { background: var(--accent-soft); border: none; color: var(--accent); padding: 9px 18px; border-radius: 999px; font-weight: 600; }
.login-change:hover { background: #e4def9; color: var(--accent-dark); }
.login-landscape { line-height: 0; margin-top: 6px; }
.login-landscape svg { width: 100%; height: 96px; display: block; }

/* Onboarding (registration wizard) — reuses .login-overlay/.login-box shell */
.login-box.onboard-box { max-width: 560px; text-align: left; }
.onboard-box .login-inner { padding: 26px 26px 22px; max-height: 88vh; overflow-y: auto; }
.welcome-head { text-align: center; }
.welcome-head .login-brand { font-size: 26px; font-weight: 800; }
.welcome-tag { color: var(--muted); font-size: 14px; margin: 6px 0 22px; text-align: center; }
.onboard-steps { display: flex; gap: 6px; margin-bottom: 20px; }
.onboard-steps .step-dot { flex: 1; height: 5px; border-radius: 3px; background: var(--surface-2); }
.onboard-steps .step-dot.done { background: var(--accent); }
.onboard-steps .step-dot.active { background: var(--accent); opacity: .55; }
.onboard-box h2 { font-size: 20px; margin: 0 0 4px; }
.onboard-box .onboard-sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.onboard-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
.onboard-actions .spacer { flex: 1; }
/* Member list during the wizard */
.ob-member { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-bottom: 8px; }
.ob-member .ob-av { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex: 0 0 auto; }
.ob-member .ob-body { flex: 1; min-width: 0; }
.ob-member .ob-name { font-weight: 600; font-size: 14px; }
.ob-member .ob-meta { font-size: 12px; color: var(--muted); }
.ob-member .ob-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 18px; padding: 4px 8px; border-radius: 8px; }
.ob-member .ob-del:hover { background: var(--surface-2); color: var(--expense); }
.ob-add { width: 100%; border: 1px dashed var(--border); background: var(--surface-2); color: var(--accent); border-radius: 12px; padding: 11px; font-weight: 600; cursor: pointer; }
.ob-add:hover { background: #e9eaf5; }
.ob-form { border: 1px solid var(--accent-soft); border-radius: 14px; padding: 16px; margin-top: 10px; background: var(--surface); }
/* Permission matrix */
.perm-grid { display: flex; flex-direction: column; gap: 10px; }
.perm-row { border: 1px solid var(--border); border-radius: 12px; padding: 12px 13px; }
.perm-row .perm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.perm-row .perm-head .ob-av { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; }
.perm-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.perm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 12.5px; cursor: pointer; user-select: none; }
.perm-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); font-weight: 600; }
.perm-chip.locked { opacity: .55; cursor: not-allowed; }
/* Recap + join */
.ob-recap-line { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.ob-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: var(--accent-dark); letter-spacing: .08em; }
.ob-join { margin-top: 18px; padding: 16px; border-radius: 14px; background: var(--surface-2); }
.ob-join h3 { font-size: 14px; margin: 0 0 6px; }
.ob-qr { display: flex; justify-content: center; margin: 12px 0; }
.ob-qr svg { width: 168px; height: 168px; background: #fff; border-radius: 10px; padding: 8px; }
.ob-link { display: flex; gap: 8px; align-items: center; }
.ob-link input { flex: 1; font-size: 12px; }

/* Profiles */
#profiles-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.profile-row { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.profile-row.is-active { border-color: var(--accent); }
/* Bloc d'actions d'un membre : reste groupé et collé à droite (remplace l'ancien ressort `flex:1`). */
.profile-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.profile-dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; }
.profile-name { font-weight: 600; }
.profile-name-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.profile-sub { font-size: 11.5px; }
/* Sur téléphone, pastille + nom + rôle + « Lien » + « C'est moi » + croix ne tiennent pas sur une
   ligne : le sous-titre d'accès était tronqué. La ligne passe à la ligne et le bloc nom garde une
   largeur utile. */
@media (max-width: 560px) {
  /* Sept contrôles ne tiennent pas sur 390px. Plutôt qu'un retour à la ligne subi (les boutons
     s'éparpillaient), mise en page assumée : identité sur la 1re ligne, actions groupées et alignées
     à droite sur la 2e. */
  .profile-row { flex-wrap: wrap; row-gap: 10px; }
  .profile-row .profile-name-col { flex: 1 1 auto; min-width: 0; }
  .profile-row .profile-actions { flex: 1 1 100%; justify-content: flex-end; }
  .profile-name-col { flex: 1 1 60%; }
}

/* Settings account header */
.settings-account { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow); margin-bottom: 16px; }
.acct-avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 22px; flex: 0 0 auto; background-size: cover; background-position: center; }
.acct-avatar.tp-empty { background: var(--surface-2); color: var(--muted); }
/* Click-your-photo-to-change-it */
.avatar-editable { position: relative; border: none; padding: 0; cursor: pointer; overflow: visible; }
.avatar-editable .avatar-cam { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
.avatar-editable .avatar-cam svg { width: 13px; height: 13px; }
.avatar-editable:hover { filter: brightness(.95); }
.member-avatar.avatar-editable .avatar-cam { width: 26px; height: 26px; }
.member-avatar.avatar-editable .avatar-cam svg { width: 15px; height: 15px; }
.acct-body { display: flex; flex-direction: column; gap: 2px; }
.acct-name { font-weight: 700; font-size: 17px; }
.acct-sub { font-size: 13px; }

/* Feature screens (FamilyFlow) */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 13px; }
.form-grid label input, .form-grid label select { color: var(--text); }
.kv { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.kv:last-child { border-bottom: none; }
.goal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.goal-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.goal-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; gap: 8px; }

/* Budget — barre d'onglets partagée */
.budget-tabs { margin-bottom: 16px; }
.budget-month-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.budget-month-nav input { flex: 0 0 auto; }

/* Vue d'ensemble — 4 cartes stats */
.budget-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.budget-stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; }
.bsc-head { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.bsc-val { font-size: 22px; font-weight: 800; }
.bsc-bar { height: 6px; border-radius: 999px; background: var(--surface-2); margin-top: 10px; overflow: hidden; }
.bsc-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.bsc-bar.orange span { background: #f97316; }
.bsc-bar.blue span { background: #2563eb; }
.bsc-sub { font-size: 11.5px; margin-top: 6px; line-height: 1.5; }
.bsc-sub.income { color: var(--income); font-weight: 700; }
.bsc-sub.expense { color: var(--expense); font-weight: 700; }
.bsc-spark { margin-top: 8px; height: 26px; }
.budget-spark { width: 100%; height: 100%; }
.bsc-spark.income { color: var(--income); }
.bsc-spark.expense { color: var(--expense); }

/* Dépenses par catégorie : donut + légende maison */
.chart-box-sm { height: 200px; }
.cat-legend-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.cat-legend-row { display: flex; align-items: center; gap: 10px; }
.cat-legend-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; margin-right: 8px; }
.cat-legend-name { flex: 1; font-size: 13px; font-weight: 600; }
.cat-legend-amt { font-size: 13px; font-weight: 700; }
.cat-legend-pct { font-size: 12px; width: 38px; text-align: right; }
.cat-legend-name-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; }

/* Insights IA */
.budget-insights-card h2 { display: flex; align-items: center; gap: 8px; }
.budget-insight-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 13px; margin-bottom: 8px; background: var(--surface-2); }
.budget-insight-row.tone-good { background: #ecfdf5; color: #15803d; }
.budget-insight-row.tone-warn { background: #fff7ed; color: #9a3412; }
.bi-ico { flex: 0 0 auto; font-size: 16px; }

/* Transactions récentes (Vue d'ensemble) */
.budget-txn-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.budget-txn-row:last-child { border-bottom: none; }
.budget-txn-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; }
.budget-txn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.budget-txn-desc { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.budget-txn-meta { font-size: 12px; display: flex; align-items: center; }
.budget-txn-amt { flex: 0 0 auto; font-weight: 800; font-size: 14px; }
.budget-txn-amt.income { color: var(--income); }
.budget-txn-amt.expense { color: var(--expense); }

/* Nos objectifs — cartes (aperçu + page complète) */
.budget-goals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.budget-goal-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; cursor: pointer; width: 100%; }
.budget-goal-ico { font-size: 24px; }
.budget-goal-name { font-weight: 700; font-size: 14px; margin-top: 4px; }
.budget-goal-amt { font-size: 12.5px; }
.budget-goal-card .ov-bar { width: 100%; margin: 8px 0 4px; }
.budget-goal-due { font-size: 11.5px; }
.budget-goal-add { align-items: center; justify-content: center; color: var(--accent-dark); font-weight: 700; gap: 8px; border-style: dashed; }
.budget-goal-add-ico { font-size: 20px; }
.budget-goal-full { position: relative; }
.budget-goal-actions { display: flex; gap: 8px; margin-top: 8px; align-self: flex-end; }
@media (max-width: 900px) { .budget-stat-grid { grid-template-columns: 1fr 1fr; } .budget-goals-grid { grid-template-columns: 1fr 1fr; } }
/* Les cartes de stat sont COURTES (un libellé + un nombre) : les passer à 1 colonne sur téléphone
   étirait 4 cartes quasi vides sur toute la hauteur de l'écran (Suivi, Budget). On garde 2 colonnes
   sur téléphone ; seules les grilles à contenu long (objectifs, vue d'ensemble) passent à 1 colonne. */
@media (max-width: 640px) { .budget-goals-grid, .budget-ov-grid { grid-template-columns: 1fr; } }
.member-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.member-avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 26px; flex: 0 0 auto; }
.faq { border-bottom: 1px solid var(--border); padding: 12px 0; }
.faq:last-child { border-bottom: none; }
.faq summary { font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq[open] summary { color: var(--accent); }
.faq p { margin: 8px 0 0; }

/* Tasks / actions */
.seg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 14px; }
/* Même raison que .segmented.block : la barre du Fil compte 5 onglets qui débordaient de l'écran
   sur mobile (page défilant horizontalement, dernier onglet inatteignable). */
.seg-toolbar .segmented { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.seg-toolbar .segmented::-webkit-scrollbar { display: none; }
.seg-toolbar select { flex: 0 0 auto; max-width: 45%; }
.seg-toolbar .owner-filter { flex: 0 0 auto; max-width: 100%; }
.seg-toolbar .owner-filter select { max-width: 150px; }
#actions-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.task-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.round-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); flex: 0 0 auto; cursor: pointer; display: grid; place-items: center; padding: 0; }
.round-check.checked { background: var(--accent); border-color: var(--accent); }
.round-check.checked::after { content: '✓'; color: #fff; font-size: 13px; font-weight: 700; }
.task-main { flex: 1; display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 0; }
.task-title { font-weight: 600; }
.task-meta { font-size: 12px; }
.task-row.done .task-title { text-decoration: line-through; color: var(--muted); }
.task-row.late { border-color: rgba(220,38,38,.4); }
.task-row.late .task-meta { color: var(--expense); }
/* Sur téléphone, la case + l'icône de catégorie + la pastille de statut + la croix laissaient moins
   de 150px au titre : il se cassait sur 3-4 lignes et la ligne entière devenait illisible. On laisse
   la ligne passer à la ligne et on garantit au titre au moins 60% de la largeur, ce qui renvoie la
   pastille de statut en dessous plutôt que de comprimer le texte. */
/* ---------- Lignes Tâches / Courses sur mobile ----------
   Ces lignes passaient en `flex-wrap: wrap`, ce qui expédiait les boutons d'action (statut, ✕) sur une
   DEUXIÈME ligne sous le titre — l'utilisateur l'a signalé à juste titre. On reste désormais sur UNE
   seule ligne : c'est la colonne de texte qui rétrécit (min-width:0) et dont le titre passe à la ligne
   à l'intérieur de sa propre colonne, pendant que les actions restent alignées à droite. */
@media (max-width: 560px) {
  .task-row, .shop-row { flex-wrap: nowrap; align-items: center; gap: 8px; padding: 12px; }
  .task-row > .task-main, .shop-row > .task-main { flex: 1 1 auto; min-width: 0; }
  .task-row .task-title, .shop-row .task-title { overflow-wrap: anywhere; }
  /* L'icône de catégorie fait doublon avec la pastille de catégorie déjà affichée sur la ligne méta
     (« Admin », « Divers »…). On rend ses 38px au titre plutôt que de comprimer le texte. */
  .task-row > .task-cat-ico { display: none; }
  .task-row > .task-status-pill, .task-row > .row-action,
  .shop-row > .shop-owner-av, .shop-row > .row-action, .shop-row > .shop-thumb { flex: 0 0 auto; }
}

/* Gabarits de tâches (#5) */
.task-templates { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.task-tmpl { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.task-tmpl:hover { border-color: var(--accent); }

/* Regroupement par échéance (#2) */
/* Groupes REPLIABLES (tâches par échéance) : repliés par défaut, un clic sur l'en-tête étend. */
.task-group { display: flex; flex-direction: column; gap: 0; margin-bottom: 10px; }
.task-group-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: none; padding: 8px 2px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.task-group-head.grp-late { color: var(--expense); }
.task-group-head.grp-soon { color: var(--accent); }
.task-group-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-2, #eee); color: var(--muted); font-size: 11px; font-weight: 700; }
.grp-chevron { display: inline-flex; transition: transform .15s ease; flex: 0 0 auto; }
.grp-chevron svg { width: 16px; height: 16px; }
.task-group-body { display: none; flex-direction: column; gap: 10px; padding-top: 4px; }
.task-group.open .task-group-body { display: flex; }
.task-group.open .grp-chevron { transform: rotate(90deg); }

/* Badge sous-tâches sur la ligne (#3) */
.subtask-badge { margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--muted); }
.subtask-badge.all { color: #16a34a; }

/* Onglets Toutes/Mes tâches/Déléguées/Terminées (mode Tâches uniquement — Courses garde le segmented classique) */
#actions-status-seg.task-tabs { display: flex; flex-wrap: wrap; gap: 8px; background: none; padding: 0; }
.tst-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; }
.tst-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tst-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: rgba(0,0,0,.08); font-size: 11px; font-weight: 800; }
.tst-btn.active .tst-n { background: rgba(255,255,255,.25); }

/* Chips de catégorie */
.task-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.task-cat-chip { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; cursor: pointer; }
.task-cat-chip.active { border-color: var(--cc, var(--accent)); box-shadow: inset 0 0 0 1px var(--cc, var(--accent)); }
.tcc-ico { font-size: 16px; }
.tcc-lbl { font-size: 13px; font-weight: 700; }
.tcc-n { font-size: 12px; font-weight: 700; color: var(--muted); }

/* Ligne de tâche restylée : icône catégorie + 2 lignes de méta + pastille de statut */
.task-cat-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; }
.task-line2, .task-line3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.task-cat-lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; }
.task-cat-dot { width: 6px; height: 6px; border-radius: 50%; }
.task-assignee-name { font-size: 12px; font-weight: 600; color: var(--muted); }
.task-due-pill { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 3px 9px; }
.task-due-pill.due-late { color: #fff; background: var(--expense); }
.task-due-pill.due-soon { color: #fff; background: var(--accent); }
.task-status-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.task-status-pill.done { background: #ecfdf5; color: #15803d; border-color: #bbf7d0; }
.tsp-chevron { display: inline-flex; }
.tsp-chevron svg { width: 14px; height: 14px; }

/* Tri */
.task-sort-row { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.task-sort-row select { font-size: 13px; }

/* Recherche */
.task-search-row input { width: 100%; }

/* Assistant Foyer (suggestion IA) */
.task-ai-nudge { display: flex; align-items: flex-start; gap: 12px; background: var(--accent-soft); border-radius: var(--radius-lg); padding: 16px; margin: 14px 0; position: relative; }
.tan-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: #fff; display: grid; place-items: center; font-size: 20px; }
.tan-body { flex: 1; min-width: 0; }
.tan-body b { font-size: 14px; }
.tan-ia { display: inline-block; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.tan-body p { margin: 4px 0 10px; font-size: 13px; color: var(--text); }
.tan-close { position: absolute; top: 12px; right: 12px; background: none; border: none; color: var(--muted); font-size: 14px; cursor: pointer; }

/* Aperçu rapide (stats) */
.task-stats-bar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; margin: 14px 0; }
.qs-head { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 12px; }
.qs-row { display: flex; flex-wrap: wrap; gap: 18px; }
.qs-stat { display: flex; align-items: center; gap: 10px; flex: 1 1 140px; }
.qs-stat b { display: block; font-size: 20px; font-weight: 800; line-height: 1.1; }
.qs-stat span { font-size: 12px; color: var(--muted); font-weight: 600; }
.qs-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; }
.qs-red { background: #fee2e2; }
.qs-amber { background: #fef3c7; }
.qs-green { background: #dcfce7; }
.qs-violet { background: #ede9fe; }

/* École & Exercices (Suivi) — aperçu parent */
.suivi-kidsel { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.suivi-kid { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 2px solid var(--border); border-radius: 999px; padding: 8px 16px 8px 8px; cursor: pointer; }
.suivi-kid.active { border-color: var(--kc, var(--accent)); box-shadow: 0 0 0 1px var(--kc, var(--accent)); }
.suivi-kid-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; }
.suivi-kid-name { font-weight: 700; font-size: 14px; }
.suivi-kid-grade { font-size: 12px; }
.suivi-overview-card { margin-bottom: 14px; }
.suivi-week-nav { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; font-weight: 600; }

/* À faire aujourd'hui */
.suivi-today-list { display: flex; flex-direction: column; gap: 10px; }
.suivi-today-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.suivi-today-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.suivi-today-title { font-weight: 700; font-size: 14px; }
.suivi-today-badge { display: inline-block; width: fit-content; font-size: 11px; font-weight: 700; color: var(--accent-dark); background: var(--accent-soft); border-radius: 999px; padding: 2px 9px; }
.suivi-today-meta { font-size: 12px; }
.suivi-today-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.suivi-prio { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
/* Informationnel pour le parent — l'exercice se fait depuis le profil de l'enfant, pas depuis le sien */
.suivi-todo-badge { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }

/* Apprendre (enfant) — « Recommandé pour toi » */
.exo-reco-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 18px; }
.exo-reco-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; background: var(--accent-soft); border: none; border-radius: var(--radius-lg); padding: 16px; cursor: pointer; width: 100%; }
.exo-reco-ico { margin-top: 2px; }
.exo-reco-title { font-weight: 800; font-size: 15px; }
.exo-reco-text { font-size: 12.5px; line-height: 1.4; }
.exo-reco-cta { margin-top: 6px; font-weight: 700; font-size: 13px; color: var(--accent-dark); }
@media (max-width: 640px) { .exo-reco-row { grid-template-columns: 1fr; } }
.suivi-prio-dot { width: 7px; height: 7px; border-radius: 50%; }

/* Recommandé pour [enfant] */
.suivi-reco-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.suivi-reco-card { border-radius: var(--radius-lg); padding: 16px; }
.suivi-reco-card.tone-violet { background: var(--accent-soft); }
.suivi-reco-card.tone-amber { background: #fef3c7; }
.suivi-reco-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.suivi-reco-head b { font-size: 14px; }
.suivi-reco-card p { font-size: 13px; color: var(--text); margin: 0 0 12px; }
@media (max-width: 720px) { .suivi-reco-grid { grid-template-columns: 1fr; } }

/* Derniers résultats */
.suivi-results-list { display: flex; flex-direction: column; }
.suivi-result-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); padding: 12px 0; cursor: pointer; }
.suivi-result-row:last-child { border-bottom: none; }
.suivi-result-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.suivi-result-title { font-weight: 700; font-size: 14px; }
.suivi-result-score { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.suivi-result-pct { font-weight: 800; font-size: 15px; }
.suivi-result-pct.tone-good { color: #15803d; }
.suivi-result-pct.tone-warn { color: #b45309; }
.suivi-result-pct.tone-bad { color: #b91c1c; }

/* Éditeur de sous-tâches (#3) */
.subtask-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.subtask-item { display: flex; align-items: center; gap: 8px; }
.subtask-check { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 6px; border: 2px solid var(--border); background: var(--surface); cursor: pointer; display: grid; place-items: center; padding: 0; font-size: 12px; color: #fff; }
.subtask-check.done { background: #16a34a; border-color: #16a34a; }
.subtask-title { flex: 1; min-width: 0; font-size: 14px; }
.subtask-title.done { text-decoration: line-through; color: var(--muted); }
.subtask-add { display: flex; gap: 8px; margin-top: 6px; }
.subtask-add input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; }

/* Groupes par discipline dans « Séries récentes » (bonus) */
/* Groupes REPLIABLES (Séries récentes par discipline) : repliés par défaut. */
.subj-group { margin-bottom: 6px; }
.subj-group-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: none; padding: 6px 2px; font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer; }
.subj-group-head .icon-chip { width: 28px; height: 28px; }
.subj-group-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-2, #eee); color: var(--muted); font-size: 11px; font-weight: 700; }
.subj-group-body { display: none; padding-top: 4px; }
.subj-group.open .subj-group-body { display: block; }
.subj-group.open .grp-chevron { transform: rotate(90deg); }

/* Cartes REPLIABLES (Suivi par enfant) : repliées par défaut, sauf Étoiles et l'aperçu par matière
   qui ne passent jamais par ce gabarit. Le titre (h2) reste dans le bouton d'en-tête. */
.collapsible-card { padding: 0; }
.card-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: none; background: none; padding: 20px; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.card-toggle h2 { margin: 0; }
.card-toggle .grp-chevron { color: var(--muted); }
.card-toggle .grp-chevron svg { width: 18px; height: 18px; }
.card-body { display: none; padding: 0 20px 20px; }
.collapsible-card.open .card-body { display: block; }
.collapsible-card.open .card-toggle { padding-bottom: 6px; }
.collapsible-card.open .grp-chevron { transform: rotate(90deg); }

/* Mobile top bar + drawer (hidden on desktop) */
.topbar { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .card-grid, .afford-grid { grid-template-columns: 1fr; }
}

/* ---------- Mobile / phone ---------- */
@media (max-width: 820px) {
  .topbar {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    /* iPhone (status-bar translucide + viewport-fit=cover) : on décale le CONTENU sous l'horloge/notch
       via le safe-area, sinon l'heure iOS (haut-gauche) masque le bouton maison. */
    height: calc(54px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 12px 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
  }
  /* The left slide-out drawer is redundant with the bottom nav (same items) — hide its trigger. */
  .hamburger { display: none; }
  .topbar-title { font-weight: 700; }

  #app { display: block; height: auto; overflow: visible; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 250px; z-index: 50;
    transform: translateX(-100%); transition: transform .25s ease;
    padding-top: env(safe-area-inset-top, 0px);   /* le tiroir passe aussi sous la barre d'état iOS */
  }
  .sidebar.open { transform: none; box-shadow: var(--shadow); }
  .nav-item { padding: 14px 12px; }            /* bigger touch targets */
  .nav-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 45; }

  .content { padding: calc(66px + env(safe-area-inset-top, 0px)) 14px 28px; height: auto; overflow: visible; }
  .view-header { flex-direction: column; align-items: stretch; gap: 10px; }
  h1 { font-size: 20px; }

  .kpi-grid, .kpi-grid.kpi-3, .kpi-grid.kpi-2 { grid-template-columns: 1fr; gap: 10px; }
  .card-grid, .afford-grid { grid-template-columns: 1fr; }
  .module-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .module-tile { padding: 16px; }
  .cal-day { grid-template-columns: 1fr; gap: 6px; }
  .cal-day-name { padding-top: 0; }
  .field-row { flex-direction: column; gap: 0; }
  .card { padding: 14px; }
  .chart-box { height: 240px; }

  .month-figures { flex-direction: column; align-items: stretch; }
  .month-figures .mf { min-width: 0; }
  .mf-op { display: none; }

  .toolbar { flex-wrap: wrap; }
  .toolbar input, .toolbar select { flex: 1 1 100%; }
  .toolbar-spacer { display: none; }

  .rule-add, .budget-head { flex-wrap: wrap; }
  .rule-add { flex-direction: column; }
  .rule-add input:not(.color-swatch), .rule-add select, .rule-add button { width: 100% !important; }
  .mapping-grid { grid-template-columns: 1fr; }

  /* Modals become bottom sheets on phones */
  .modal-backdrop { place-items: end stretch; }
  .modal, .modal.modal-wide { width: 100%; max-width: 100%; border-radius: 20px 20px 0 0;
    border-bottom: none; padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
    max-height: 92vh; overflow-y: auto; animation: sheetUp .22s ease; }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }

  th, td { padding: 8px 10px; }
  #view-settings .btn { width: 100%; margin-right: 0; }
  /* Les boutons compacts insérés dans une ligne (carte Localisation, bandeau famille) ne doivent PAS
     hériter du width:100% ci-dessus — sinon ils prennent toute la largeur du conteneur flex et
     écrasent le texte à côté (icône/titre réduits à 0px). Garde le comportement plein-largeur pour
     les autres boutons de Paramètres (ex. "Changer le mot de passe"). */
  #view-settings .list-row .btn, #view-settings .settings-fam-inner .btn { width: auto; margin-top: 0; }
  .upcoming-row, .rec-upcoming-row { grid-template-columns: 1fr auto; }
  .rec-row { flex-wrap: wrap; }

  /* Data tables -> stacked cards (one card per row, label + value) */
  .table-wrap:has(.responsive-cards) { overflow: visible; max-height: none; border: none; background: none; }
  table.responsive-cards, table.responsive-cards tbody { display: block; }
  table.responsive-cards thead { display: none; }
  table.responsive-cards tr {
    display: block; background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 6px 12px; margin-bottom: 10px;
  }
  table.responsive-cards td {
    display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
    padding: 6px 0; border: none; white-space: normal; text-align: right;
  }
  table.responsive-cards td:not(:last-child) { border-bottom: 1px solid var(--border); }
  table.responsive-cards td::before {
    content: attr(data-label); color: var(--muted); font-weight: 600;
    text-align: left; flex: 0 0 auto; white-space: nowrap;
  }
  table.responsive-cards td[data-label=""] { justify-content: flex-end; }
  table.responsive-cards td[data-label=""]::before { content: none; }
  /* Ligne d'état vide (colspan, sans data-label) : sans cette règle elle héritait du text-align:right
     des cellules de données et s'affichait collée à droite ("Aucune charge pour cette vue."). */
  table.responsive-cards td[colspan] { justify-content: flex-start; text-align: left; }
  table.responsive-cards td[colspan]::before { content: none; }
}

/* ---------- Home + bottom nav on phones ---------- */
@media (max-width: 820px) {
  #home-greeting { font-size: 24px; }
  .home-sub { font-size: 14px; }
  .quick-tiles { grid-template-columns: repeat(3, 1fr); gap: 10px 6px; }
  .qtile-ico { width: 48px; height: 48px; border-radius: 14px; }
  .qtile-ico svg { width: 22px; height: 22px; }
  .qtile-lbl { font-size: 10px; }
  .home-cards { grid-template-columns: 1fr; }

  .bottom-nav {
    display: flex; flex-direction: row; align-items: center; justify-content: space-around;
    position: fixed; left: 0; right: 0; bottom: 0; height: 62px; z-index: 40;
    background: var(--surface); border-top: 1px solid var(--border); padding: 0 8px;
  }
  .content { padding-bottom: 86px; }
}

/* ---------- Exercices ---------- */
/* Le jeu des pays */
.pays-cta { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; margin-top: 14px; cursor: pointer; }
.pays-cta-emoji { font-size: 32px; line-height: 1; }
.pays-cta-body { display: flex; flex-direction: column; flex: 1; }
.pays-cta-title { font-weight: 700; font-size: 16px; }
.pays-cta-sub { color: var(--muted); font-size: 13px; }
.pays-rules p { margin: 0 0 14px; }
.pays-hud { display: flex; justify-content: space-around; text-align: center; align-items: center; }
.pays-hud-cell { display: flex; flex-direction: column; gap: 2px; }
.pays-hud-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pays-letter { font-size: 34px; font-weight: 800; color: var(--accent); line-height: 1; }
.pays-timer { font-size: 26px; font-weight: 700; line-height: 1; }
.pays-timer.low { color: var(--expense); }
.pays-score { font-size: 26px; font-weight: 700; line-height: 1; }
#pays-form { display: flex; gap: 8px; margin: 14px 0; }
#pays-input { flex: 1; padding: 14px 16px; font-size: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); }
#pays-input:focus { outline: none; border-color: var(--accent); }
.pays-feedback { min-height: 30px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.pays-feedback.ok { color: #16a34a; }
.pays-feedback.no { color: #dc2626; }
.pays-feedback.warn { color: #d97706; }
.pays-flag { border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); vertical-align: middle; object-fit: cover; }
.pays-found-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.pays-found-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-align: center; }
.pays-found-cell.missed { opacity: .72; }
.pays-fc-name { font-weight: 600; font-size: 13px; }
.pays-fc-cap { font-size: 11px; color: var(--muted); }
.pays-endcard { text-align: center; }
.pays-end-score { font-size: 44px; font-weight: 800; color: var(--accent); }
.pays-end-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.exo-resume-tag { font-size: 9px; font-weight: 700; color: var(--accent); margin-top: 2px; line-height: 1.1; }
.qtile.has-resume .qtile-ico { box-shadow: 0 0 0 2px var(--accent); }
/* Repos 24 h (5 sans-fautes le même jour) : tuile grisée, on garde le clic pour afficher le message. */
.qtile.locked { opacity: .5; }
.qtile.locked .qtile-ico { filter: grayscale(1); }
.qtile-badge.locked { opacity: 1; filter: none; }
/* Jeu des pays au repos (même règle) : carte grisée, le clic mène à l'écran qui explique pourquoi. */
.pays-cta.locked { opacity: .55; }
.pays-cta.locked .pays-cta-emoji { filter: grayscale(1); }
.exo-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.exo-passage { background: var(--surface-2); border-radius: 14px; padding: 14px 16px; margin: 4px 0 14px;
  font-size: 16px; line-height: 1.6; color: var(--text); border: 1px solid var(--border); }
.exo-q { font-size: 20px; margin: 6px 0 14px; }
.exo-choices { display: flex; flex-direction: column; gap: 10px; }
.exo-choice { text-align: left; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; font-size: 16px; color: var(--text); }
.exo-choice:hover:not(:disabled) { border-color: var(--accent); }
.exo-choice:disabled { cursor: default; }
/* Choix SÉLECTIONNÉ mais pas encore validé (l'enfant peut encore changer avant « Valider »). */
.exo-choice.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; font-weight: 600; }
.exo-choice.right { border-color: #16a34a; background: #16a34a18; font-weight: 600; }
.exo-choice.wrong { border-color: #dc2626; background: #dc262618; }
.exo-feedback { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 15px; }
.exo-feedback.ok { background: #16a34a18; }
.exo-feedback.no { background: #dc262618; }
.exo-foot { margin-top: 14px; display: flex; justify-content: flex-end; }
.exo-detail { border-left: 4px solid var(--border); margin-bottom: 10px; }
.exo-detail.ok { border-left-color: #16a34a; }
.exo-detail.no { border-left-color: #dc2626; }
.exo-detail-q { font-weight: 600; margin-bottom: 6px; }
.exo-detail-line { font-size: 14px; margin-top: 3px; }

/* ---------- Budget owner attribution ---------- */
.owner-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; vertical-align: middle; }
.owner-filter { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.owner-select { min-width: 108px; }

/* ---------- Home: 3 focused lists ---------- */
.home-list { display: flex; flex-direction: column; }
.home-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.home-row:last-child { border-bottom: none; }
.hr-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.hr-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hr-title { font-weight: 600; }
.hr-sub { font-size: 12px; color: var(--muted); }
.home-empty { text-align: center; padding: 14px 0; }

/* « Aujourd'hui » + « Tâches du jour » côte à côte (comme la maquette) */
.home-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.home-2col .home-card { margin-bottom: 0; }

/* Carte « Ma semaine » (accueil) : bandeau des 7 jours, puis les activités et les tâches du jour
   sélectionné. Grille à 7 colonnes égales — le bandeau doit rester lisible à 390px sans défiler. */
/* Ligne de navigation de semaine (flèches + plage de dates + retour à aujourd'hui). */
.hw-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hw-arrow { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; }
.hw-arrow:hover { border-color: var(--accent); color: var(--accent); }
#home-week-prev { order: 0; }
/* La plage prend la place restante et pousse la flèche « suivant » à droite. */
.hw-range { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 14px; font-weight: 700; }
.hw-today { flex: 0 0 auto; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--accent); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.hw-today:hover { border-color: var(--accent); }

.hw-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; background: var(--surface-2); border-radius: var(--radius-lg); padding: 8px 4px; margin-bottom: 16px; }
.hw-day { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; border-radius: 12px; padding: 8px 2px; cursor: pointer; min-width: 0; }
.hw-day:hover { background: var(--accent-soft); }
.hw-day.active { background: var(--accent); }
.hw-dname { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.hw-day.active .hw-dname { color: rgba(255,255,255,.85); }
.hw-dnum { font-size: 15px; font-weight: 700; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-variant-numeric: tabular-nums; }
/* Aujourd'hui reste repérable même quand on consulte un autre jour de la semaine. */
.hw-dnum.istoday { background: var(--accent-soft); color: var(--accent); }
.hw-day.active .hw-dnum { color: #fff; }
.hw-day.active .hw-dnum.istoday { background: rgba(255,255,255,.22); color: #fff; }
.hw-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.hw-day.active .hw-dot { background: #fff; }
.hw-sec + .hw-sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.hw-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.hw-sec-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--muted); }
/* 360px était trop bas : sur un téléphone courant (390–430px) les deux colonnes restaient actives et
   écrasaient le contenu (titres de tâches sur 3 lignes, dates coupées). On repasse en une colonne
   sur toute la plage téléphone. */
@media (max-width: 560px) { .home-2col { grid-template-columns: 1fr; } }
.home-card-compact .home-card-head { flex-wrap: wrap; row-gap: 4px; }
.home-card-compact .home-card-head h2 { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.hch-ico { display: inline-flex; color: var(--accent); margin-right: 8px; vertical-align: -2px; }
.hch-ico svg { width: 16px; height: 16px; }
.home-card-compact .home-row { padding: 9px 0; gap: 8px; }
.home-card-compact .hr-title { font-size: 13px; }
.home-card-compact .hr-sub { font-size: 11px; }
.hr-pill { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: var(--accent); background: var(--violet-soft, #EDEAFA); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.home-task-row .round-check { width: 20px; height: 20px; }
.home-task-row .round-check.checked::after { font-size: 11px; }

/* ---------- DMS (Documents) ---------- */
.dms-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.dms-search { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; }
.dms-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dms-search-ico { display: grid; place-items: center; color: var(--muted); }
.dms-search-ico svg { width: 18px; height: 18px; }
.dms-search input { flex: 1; border: none; background: none; padding: 11px 0; outline: none; box-shadow: none !important; }
.dms-tools { display: flex; align-items: center; gap: 10px; }
.dms-body { display: flex; gap: 20px; align-items: flex-start; }
.dms-filters { flex: 0 0 210px; display: flex; flex-direction: column; gap: 16px; }
.dms-fgroup { display: flex; flex-direction: column; gap: 2px; }
.dms-ftitle { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 4px 10px; }
.dms-fbtn { display: flex; align-items: center; gap: 9px; background: none; border: none; cursor: pointer; padding: 9px 10px; border-radius: 10px; color: var(--text); text-align: left; font-size: 13px; width: 100%; }
.dms-fbtn:hover { background: var(--surface-2); }
.dms-fbtn.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.dms-fico { display: grid; place-items: center; color: var(--muted); }
.dms-fbtn.active .dms-fico { color: var(--accent); }
.dms-fico svg { width: 18px; height: 18px; }
.dms-fdot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.dms-flabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dms-fcount { font-size: 11px; color: var(--muted); background: var(--surface-2); border-radius: 10px; padding: 1px 7px; }
.dms-fbtn.active .dms-fcount { background: #fff; }
.dms-main { flex: 1; min-width: 0; }
.dms-crumb { display: flex; align-items: baseline; margin-bottom: 10px; font-weight: 600; }
.dms-listview { display: flex; flex-direction: column; gap: 8px; }
.dms-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-sm); }
.dms-ficon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; }
.dms-ficon svg { width: 20px; height: 20px; }
.dms-rbody { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dms-rname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dms-rmeta { font-size: 12px; color: var(--muted); }
.dms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.dms-tile { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.dms-tile-open { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; background: none; border: none; cursor: pointer; }
.dms-tile-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; }
.dms-tile-ico svg { width: 24px; height: 24px; }
.dms-tile-name { font-weight: 600; font-size: 12px; text-align: center; word-break: break-word; }
.dms-tile-meta { font-size: 11px; color: var(--muted); }
.dms-tile-del { position: absolute; top: 6px; right: 8px; }
button.dms-rbody { background: none; border: none; cursor: pointer; text-align: left; padding: 0; color: inherit; font: inherit; }
/* Document detail panel */
.dd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dd-name-input { flex: 1; font-size: 17px; font-weight: 700; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 4px 0; }
.dd-name-input:focus { box-shadow: none !important; border-bottom-color: var(--accent); }
.dd-preview { background: var(--surface-2); border-radius: 12px; min-height: 110px; max-height: 320px; overflow: hidden; display: grid; place-items: center; margin-bottom: 6px; }
.dd-preview img { max-width: 100%; max-height: 320px; object-fit: contain; display: block; }
.dd-prev-file { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px; color: var(--muted); }
.dd-prev-ico svg { width: 42px; height: 42px; }
@media (max-width: 820px) {
  .dms-body { flex-direction: column; }
  .dms-filters { flex: none; width: 100%; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .dms-fgroup { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .dms-ftitle { width: 100%; padding: 2px; }
  .dms-fbtn { width: auto; }
}

/* ---------- Documents (nouvel écran) ---------- */
.doc-search-row { display: flex; gap: 8px; margin: 10px 0 12px; }
.doc-search-input { flex: 1; }
.doc-storage-card, .doc-ai-card { margin-bottom: 14px; }
.dsc-row { display: flex; align-items: center; gap: 12px; }
.dsc-ico { font-size: 24px; flex: 0 0 auto; }
.dsc-title { font-weight: 700; }
.dsc-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.doc-pinned-row { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-pinned-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 6px 5px 5px; }
.dpc-open { display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 0; font: inherit; color: inherit; }
.dpc-name { font-size: 12.5px; font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpc-unpin { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 11px; padding: 2px; }
.doc-pin-btn.active { color: var(--accent); }
.doc-recent-row { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: none; text-align: left; cursor: pointer; padding: 8px 0; font: inherit; color: inherit; border-bottom: 1px solid var(--border); }
.doc-recent-row:last-child { border-bottom: none; }
.drr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.drr-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drr-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.drr-bucket { color: var(--cc, var(--accent)); font-weight: 600; }
.doc-ai-search-row { display: flex; gap: 8px; margin-top: 10px; }
.doc-ai-search-row input { flex: 1; }
.doc-ai-result:not(:empty) { margin-top: 8px; }
.dms-top.hidden, #dms-full-section.hidden { display: none; }

/* ---------- Photos Nabe ---------- */
.photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 12px; }
.photo-cell { position: relative; aspect-ratio: 1; border: none; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--border); }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-date { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: 10px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); text-align: left; }
.photo-fav-badge { position: absolute; top: 6px; left: 6px; font-size: 13px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.photo-src-badge { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; display: grid; place-items: center; }

/* Souvenir du jour */
.photo-memory-card { position: relative; display: block; width: 100%; text-align: left; border: none; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; margin-bottom: 14px; height: 180px; }
.photo-memory-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-memory-badge { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.92); color: var(--accent-dark); font-weight: 700; font-size: 12px; border-radius: 999px; padding: 4px 12px; }
.photo-memory-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; display: flex; flex-direction: column; gap: 2px; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; }
.photo-memory-eyebrow { font-size: 12px; font-weight: 700; opacity: .9; }
.photo-memory-title { font-size: 16px; font-weight: 800; }
.photo-memory-body .muted { color: rgba(255,255,255,.8); font-size: 12.5px; }

/* Favori dans le visualiseur */
#photo-view-fav.active-fav { color: #b45309; border-color: #fbbf24; background: #fef3c7; }

/* ===== New exercises: picture-spelling, le pendu, Motus, relier images, dictée, rédaction ===== */
.exo-image { display: block; max-width: 200px; max-height: 200px; margin: 8px auto 14px; border-radius: 16px; background: #fff; }
.exo-image.hidden { display: none; }
/* Cochon pendu */
.hang-figure { font-size: 56px; text-align: center; line-height: 1; margin: 6px 0; }
.hang-word { font-size: 28px; letter-spacing: .25em; text-align: center; font-weight: 800; margin: 8px 0; min-height: 34px; }
.hang-status { text-align: center; margin-bottom: 10px; }
.hang-keyboard { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.kb-key { padding: 10px 0; border: none; border-radius: 10px; background: #ede9fe; color: #4c3ec9; font-weight: 700; font-size: 16px; text-transform: uppercase; cursor: pointer; }
.kb-key:disabled { opacity: .55; cursor: default; }
.kb-key.right { background: #d3f9d8; color: #2b8a3e; }
.kb-key.wrong { background: #ffe3e3; color: #c92a2a; }
/* Motus */
.motus-grid { display: grid; grid-template-columns: repeat(var(--motus-cols, 6), 1fr); gap: 6px; max-width: 340px; margin: 8px auto 12px; }
.motus-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; text-transform: uppercase; border-radius: 8px; background: #f1f3f5; color: #1e293b; }
.motus-cell.correct { background: #40c057; color: #fff; }
.motus-cell.present { background: #fab005; color: #fff; }
.motus-cell.absent { background: #ced4da; color: #fff; }
#motus-form { display: flex; gap: 8px; }
#motus-input { flex: 1; text-transform: uppercase; letter-spacing: .15em; text-align: center; }
/* Relier les images aux mots */
.mimg-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 200px)); gap: 12px; margin: 0 auto 12px; justify-content: center; }
.mimg-img { border: 3px solid transparent; border-radius: 14px; background: #fff; padding: 6px; cursor: pointer; }
.mimg-img img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; }
.mimg-img.sel { border-color: var(--accent, #6c5ce7); }
.mimg-img.done { opacity: .4; }
.mimg-words { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mimg-word { padding: 10px 16px; border: none; border-radius: 12px; background: #ede9fe; color: #4c3ec9; font-weight: 700; cursor: pointer; }
.mimg-word.done { opacity: .4; text-decoration: line-through; }
/* Dictée + rédaction inputs */
#dictee-input, #redac-input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--border, #dee2e6); border-radius: 12px; padding: 10px; font: inherit; margin: 10px 0; resize: vertical; }
/* Rédaction result */
.redac-score { font-size: 32px; font-weight: 800; text-align: center; color: var(--accent, #6c5ce7); }
.redac-comment { text-align: center; font-weight: 600; }
.redac-block { margin-top: 10px; }
.redac-block ul { margin: 4px 0 0; padding-left: 20px; }
.redac-block li { margin: 2px 0; }
#redac-result { margin-top: 12px; }

/* ===== Zuri mascotte — pack premium v1 (28 juin 2026) ===== */
.zuri-hero { width: 100%; height: 100%; object-fit: contain; max-width: 220px; max-height: 220px; display: block; transition: opacity 0.18s ease; }
.home-hero-art:not(.hidden) { display: flex; align-items: center; justify-content: center; min-height: 200px; max-height: 240px; }
.zuri-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 12px; text-align: center; }
.zuri-empty-art { width: 120px; height: 120px; object-fit: contain; opacity: 0.95; }
.zuri-empty-msg { margin: 0; color: var(--text-muted, #6b6b73); font-size: 14px; max-width: 28ch; line-height: 1.4; }

/* ===== Zuri écosystème v2 (badges + companion + pattern + icônes raccourcis) ===== */
.zuri-badge-img { width: 56px; height: 56px; object-fit: contain; display: block; margin: 0 auto 4px; }
.zuri-badge-mini { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; margin-left: 4px; }
.zuri-companion { width: 32px; height: 32px; object-fit: contain; vertical-align: middle; margin-right: 6px; }
.stars-count { display: inline-flex; align-items: center; gap: 4px; }
.stars-num { font-weight: 600; font-size: 1.2em; }
.zuri-shortcut-icon { width: 36px; height: 36px; object-fit: contain; display: block; }
.sc-card .sc-ico { display: inline-flex; align-items: center; justify-content: center; }
/* Pattern d'étoiles très discret derrière les cartes kid (sous le contenu, jamais devant) */
body.kid-mode .child-stars,
body.kid-mode .child-mission { background-image: url("/assets/zuri/etoiles/pattern/pattern_stars.svg"); background-repeat: repeat; background-size: 256px 256px; background-position: top right; }

/* ===== Zuri — overlay célébration =====
   La vignette de coin (#zuri-corner) a été retirée : fixe et au-dessus de tout, elle recouvrait
   régulièrement de vrais boutons/liens et empêchait de cliquer. Le thème Zuri, le hero de l'accueil
   et les overlays de récompense restent en place. */
.zuri-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: opacity 0.4s ease; }
.zuri-overlay-bg { position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(108,92,231,0.18), rgba(255,244,223,0.3) 60%, transparent 80%); }
.zuri-overlay-art { position: relative; width: min(56vw, 360px); height: auto; animation: zuri-pop 0.55s cubic-bezier(0.18, 1.2, 0.4, 1) both; filter: drop-shadow(0 8px 24px rgba(108,92,231,0.35)); }
.zuri-overlay-out { opacity: 0; }
@keyframes zuri-pop { 0% { transform: scale(0.45) rotate(-4deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .zuri-overlay-art { animation: none; } }

/* ===== Zuri nav (kid-mode) + accessoires câblés ===== */
.zuri-nav-icon { width: 26px; height: 26px; object-fit: contain; display: block; }
body.kid-mode .ni-ico, body.kid-mode .bn-ico { display: flex; align-items: center; justify-content: center; }
.zuri-crown { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; margin-right: 4px; }
.zuri-mission-icon { width: 32px; height: 32px; object-fit: contain; display: block; }
.zuri-magic-house { width: 96px; height: 96px; object-fit: contain; display: block; margin: 0 auto 10px; }

.zuri-overlay-companion { position: absolute; bottom: 12%; right: 14%; width: 110px; height: auto; animation: zuri-pop 0.7s cubic-bezier(0.18, 1.2, 0.4, 1) both; filter: drop-shadow(0 4px 12px rgba(255,183,3,0.45)); }
@media (max-width: 820px) {
  .zuri-overlay-art { width: min(70vw, 280px); }
  .zuri-overlay-companion { width: 70px; }
}

/* Relier images : fallback quand l'illustration ne charge pas (cle image en erreur) */
.mimg-img.noimg::after { content: '🖼️'; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; font-size: 42px; }

/* ===== Applications (hub enfant) + Dessin ===== */
.sc-emoji { font-size: 30px; line-height: 1; }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 10px; }
.app-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 0.5px solid var(--border); border-radius: 16px; background: var(--surface-2, #fff); cursor: pointer; text-align: left; }
.app-card:active { transform: scale(.98); }
.app-card-ico { font-size: 34px; line-height: 1; }
.app-card-title { display: block; font-weight: 600; font-size: 16px; }
.app-card-sub { display: block; font-size: 12px; color: var(--muted, #777); margin-top: 2px; }

.draw-wrap { display: flex; flex-direction: column; gap: 12px; }
.draw-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; border: 0.5px solid var(--border); border-radius: 14px; background: var(--surface-2, #fff); }
.draw-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.draw-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.draw-swatch.sel { border-color: var(--text-primary, #111); transform: scale(1.12); }
.draw-sizes { display: flex; gap: 6px; }
.draw-size { width: 40px; height: 40px; border-radius: 10px; border: 0.5px solid var(--border); background: var(--surface-1, #f4f4f6); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.draw-size.sel { border-color: var(--accent, #6c5ce7); background: #efeaff; }
.draw-size span { display: block; background: #333; border-radius: 50%; }
.draw-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.draw-tool { min-width: 42px; height: 42px; border-radius: 10px; border: 0.5px solid var(--border); background: var(--surface-1, #f4f4f6); font-size: 20px; cursor: pointer; }
.draw-tool.active { border-color: var(--accent, #6c5ce7); background: #efeaff; }
.draw-save { margin-left: auto; }
.draw-canvas-box { border: 0.5px solid var(--border); border-radius: 14px; overflow: hidden; background: #fff; width: 100%; max-width: calc(72vh * 10 / 7); margin-inline: auto; aspect-ratio: 1200 / 840; }
#draw-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
@media (max-width: 820px) { .draw-save { margin-left: 0; width: 100%; } }
.draw-actions { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 820px) { .draw-actions { margin-left: 0; width: 100%; } .draw-actions .draw-save { flex: 1; } }
.draw-textbar input { width: 100%; padding: 12px 14px; border: 2px solid var(--accent, #6c5ce7); border-radius: 12px; font-size: 16px; background: var(--surface, #fff); color: var(--text); }
.draw-tool[data-armed], .draw-new[data-armed] { border-color: #dc2626 !important; background: #dc262614 !important; color: #dc2626; font-weight: 700; }
.draw-gallery-wrap { display: flex; flex-direction: column; gap: 8px; }
.draw-gallery-title { margin: 4px 0 0; font-size: 15px; font-weight: 700; }
.draw-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.draw-thumb { padding: 0; border: 0.5px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; cursor: pointer; aspect-ratio: 10 / 7; }
.draw-thumb:active { transform: scale(.97); }
.draw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anime-gallery-wrap { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.anime-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.anime-cell { position: relative; display: flex; flex-direction: column; gap: 4px; }
.anime-thumb { padding: 0; border: 0.5px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; cursor: pointer; aspect-ratio: 1 / 1; }
.anime-thumb:active { transform: scale(.97); }
.anime-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anime-cell-title { font-size: 11px; color: var(--muted, #777); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anime-cell-del { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.86); font-size: 13px; line-height: 1; cursor: pointer; }
.anime-cell-del:active { transform: scale(.94); }

/* Lignes de transactions : toute la ligne ouvre l'édition */
.txn-row-clickable { cursor: pointer; }
/* Plan budgétaire : cellules Société/Catégorie/Libellé éditables au clic */
.plan-edit-cell { cursor: pointer; text-decoration: underline dotted color-mix(in srgb, var(--accent, #6c5ce7) 45%, transparent); text-underline-offset: 3px; }
.plan-edit-cell:hover { color: var(--accent, #6c5ce7); }
.txn-row-clickable:hover { background: color-mix(in srgb, var(--accent, #6c5ce7) 6%, transparent); }

/* ===== Jeu des capitales ===== */
.cap-country-box { display: flex; align-items: center; gap: 14px; padding: 14px 4px; }
.cap-country-box .pays-flag { border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.cap-country { font-size: 24px; font-weight: 800; }
.cap-write { display: none; gap: 8px; align-items: center; }
.cap-write input { flex: 1; }
.cap-choice-pays { display: flex; align-items: center; gap: 10px; }

/* ===== Anime IA : note vocale (dicter la description) ===== */
.anime-voice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.anime-mic-status { font-size: 12px; min-height: 16px; }
#anime-mic.rec { border-color: #dc2626; background: #dc262614; color: #dc2626; font-weight: 700; animation: mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .28); } 50% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); } }

/* ===== Tâches récurrentes (règles planifiées par un parent) ===== */
.rec-hidden { display: none !important; }   /* masque « Répéter » indépendamment du toggle tâche/course */
.repeat-days { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.rep-day { min-width: 40px; height: 34px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; cursor: pointer; color: var(--text); }
.rep-day.on { border-color: var(--accent, #6c5ce7); background: #efeaff; font-weight: 700; }
.recurring-tasks { margin-top: 18px; }
.recurring-tasks-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.recurring-rule { display: flex; align-items: center; gap: 8px; }
.recurring-rule.paused { opacity: .55; }
.recurring-rule-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.recurring-rule-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Level-up : récompense cash par palier ===== */
.levelup-overlay { position: fixed; inset: 0; z-index: 9600; display: flex; align-items: center; justify-content: center; background: rgba(31,20,60,.5); padding: 20px; }
.levelup-card { background: var(--surface-2, #fff); border-radius: 20px; padding: 24px 22px; max-width: 340px; width: 100%; text-align: center; box-shadow: 0 18px 50px rgba(31,20,60,.35); }
.levelup-badge { width: 96px; height: 96px; object-fit: contain; }
.levelup-title { font-size: 19px; margin: 6px 0 4px; }
.levelup-msg { font-size: 14px; color: var(--text-secondary, #555); line-height: 1.5; margin: 0 0 16px; }
.levelup-msg b { color: var(--text-primary, #111); font-size: 16px; }
.levelup-actions { display: flex; flex-direction: column; gap: 8px; }

/* ===== Anime IA ===== */
.anime-wrap { display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.anime-quota { font-size: 13px; margin: 0; }
.anime-status { font-size: 13px; color: var(--text-accent, #6c5ce7); margin: 0; min-height: 18px; }
.anime-preview { display: flex; justify-content: center; }
.anime-preview img { max-width: 100%; width: 420px; border-radius: 16px; border: 0.5px solid var(--border); background: #fff; }
.anime-actions { display: flex; gap: 10px; justify-content: center; }
.anime-actions .btn { min-width: 140px; }

/* ==================== Fil d'actualité familial ==================== */
.feed-title-heart { display: inline-flex; color: var(--accent); margin-left: 8px; vertical-align: middle; }
.feed-title-heart svg { width: 20px; height: 20px; }
.feed-post { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.feed-post-head { display: flex; align-items: center; gap: 10px; }
.feed-av { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px; background-size: cover; background-position: center; }
.feed-av-system { background: var(--violet-soft, #EDEAFA); font-size: 20px; }
.feed-post-headtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.feed-post-headtext > span:first-child { font-size: 14px; }
.feed-post-time { font-size: 12px; }
.feed-text { margin: 0; font-size: 14px; line-height: 1.45; }

/* Panneaux type-spécifiques (exercice/badge/promotion/tâche/note) */
.feed-panel { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: none; border-radius: 14px; padding: 12px 14px; cursor: default; }
button.feed-panel { cursor: pointer; }
.feed-panel-ico { font-size: 28px; flex: 0 0 auto; line-height: 1; }
.feed-panel-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.feed-panel-body b { font-size: 14px; }
.feed-panel-good { background: #e8f7ee; }
.feed-panel-gold { background: #fdf2d8; }
.feed-panel-promo { background: var(--violet-soft, #EDEAFA); }
.feed-panel-task { background: var(--surface-2, #f4f4fb); }
.feed-panel-note { background: #fdf6d8; align-items: flex-start; }
.feed-panel-score { font-weight: 700; }
.feed-tone-good { color: #16a34a; }
.feed-tone-warn { color: #f08c00; }
.feed-tone-bad { color: #e03131; }
.feed-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--surface); font-size: 11px; font-weight: 600; width: fit-content; }

/* Photos d'un moment/activité (grille selon le nombre) */
.feed-photos { display: grid; gap: 4px; border-radius: 12px; overflow: hidden; }
.feed-photos-1 { grid-template-columns: 1fr; }
.feed-photos-2 { grid-template-columns: 1fr 1fr; }
.feed-photos-3, .feed-photos-4 { grid-template-columns: 1fr 1fr; }
.feed-photo { padding: 0; border: none; background: none; cursor: pointer; aspect-ratio: 1/1; overflow: hidden; }
.feed-photos-1 .feed-photo { aspect-ratio: 16/10; }
.feed-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Réactions + commentaires */
.feed-reactions-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; border-top: 1px solid var(--border); }
.feed-avstack { display: flex; align-items: center; }
.feed-mini-av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; background-size: cover; background-position: center; border: 2px solid var(--surface); margin-left: -8px; }
.feed-avstack .feed-mini-av:first-child { margin-left: 0; }
.feed-mini-more { background: var(--surface-2, #eee); color: var(--muted); }
.feed-comment-count { font-size: 12px; }
.feed-actions-row { display: flex; gap: 8px; }
.feed-action { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: none; background: none; border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.feed-action:hover { background: var(--surface-2, #f4f4fb); }
.feed-action.liked { color: #e03131; }
.feed-comments { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; border-top: 1px solid var(--border); }
.feed-comment { display: flex; align-items: flex-start; gap: 8px; }
.feed-comment-body { font-size: 13px; line-height: 1.4; }
.feed-comment-add { display: flex; gap: 8px; margin-top: 2px; }
.feed-comment-add input { flex: 1; min-width: 0; }

/* Composition d'un post */
#feed-compose-text { width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 11px 12px; border-radius: 12px; font-size: 14px; font-family: inherit; resize: vertical; outline: none; }
#feed-compose-text:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.feed-compose-photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.feed-compose-thumb { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; }
.feed-compose-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-compose-thumb .row-action { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; font-size: 11px; }
.feed-compose-thumb-spin { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.35); color: #fff; font-size: 18px; }
.feed-compose-status { min-height: 16px; }

/* ---------- AI Coach (nouvel écran) ---------- */
.ac-mini-bot { font-size: 20px; margin-right: 6px; vertical-align: middle; }
.ac-badge-foyer { display: inline-block; font-size: 11px; font-weight: 700; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 2px 10px; margin-left: 6px; vertical-align: middle; }
.ac-hero { display: flex; align-items: center; gap: 20px; background: linear-gradient(135deg, var(--accent-soft), var(--surface-2, #f4f4fb)); border-radius: var(--radius-lg); padding: 22px; flex-wrap: wrap; }
.ac-hero-text { flex: 1; min-width: 220px; }
.ac-hero-title { font-size: 22px; font-weight: 800; color: var(--accent); margin-bottom: 6px; }
.ac-hero-sub { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 14px; max-width: 40ch; }
.ac-hero-cta { background: #fff; border: 1px solid var(--border); font-weight: 700; }
.ac-hero-art { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 0 auto; }
.ac-bot-avatar { font-size: 64px; width: 110px; height: 110px; display: grid; place-items: center; background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm); }
.ac-shortcuts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 180px; }
.ac-shortcut { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--accent); }
.ac-shortcut svg { width: 16px; height: 16px; }
.ac-suggest-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; margin-top: 10px; }
.ac-suggest-card { flex: 0 0 200px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.ac-suggest-card.violet { background: var(--accent-soft); }
.ac-suggest-card.green { background: #e8f7ee; }
.ac-suggest-card.orange { background: #fdf1e2; }
.ac-suggest-card.blue { background: #e8f1fd; }
:root[data-theme="dark"] .ac-suggest-card.violet, :root[data-theme="dark"] .ac-suggest-card.green, :root[data-theme="dark"] .ac-suggest-card.orange, :root[data-theme="dark"] .ac-suggest-card.blue { background: var(--surface-2, #23232f); }
.ac-sc-ico { font-size: 26px; }
.ac-sc-title { font-weight: 700; font-size: 14px; }
.ac-sc-sub { font-size: 12px; color: var(--muted); line-height: 1.4; flex: 1; }
.ac-sc-ask { align-self: flex-start; background: none; border: none; color: var(--accent); font-weight: 700; font-size: 13px; cursor: pointer; padding: 0; }
.ac-brief-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ac-brief-tile { text-align: left; background: var(--surface-2, #f7f7fb); border: 1px solid var(--border); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.ac-brief-tile.blue { border-left: 3px solid #2563eb; }
.ac-brief-tile.green { border-left: 3px solid #059669; }
.ac-brief-tile.orange { border-left: 3px solid #d97706; }
.ac-brief-tile.purple { border-left: 3px solid #7c3aed; }
.ac-bt-ico { font-size: 18px; }
.ac-bt-n { font-size: 22px; font-weight: 800; display: block; }
.ac-bt-label { font-weight: 700; font-size: 13px; }
.ac-bt-sub { font-size: 11.5px; color: var(--muted); }
.ac-chat-card { display: flex; flex-direction: column; }
.ac-chip-row { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 10px; }
.ac-chip-row .seg { flex: 0 0 auto; }
.ac-thread { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; padding: 4px 2px; margin-bottom: 10px; }
.ac-msg { display: flex; gap: 8px; align-items: flex-start; }
.ac-msg.user { flex-direction: row-reverse; }
.ac-msg-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; font-size: 15px; flex: 0 0 auto; }
.ac-msg.user .ac-msg-avatar { background: var(--accent); color: #fff; font-weight: 700; }
.ac-msg-bubble { background: var(--surface-2, #f4f4fb); border-radius: 14px; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; max-width: 80%; position: relative; }
.ac-msg.user .ac-msg-bubble { background: var(--accent); color: #fff; }
.ac-msg-time { display: block; font-size: 10.5px; opacity: .65; margin-top: 4px; text-align: right; }
.ac-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ac-input-row { display: flex; gap: 8px; align-items: center; }
.ac-input-row input { flex: 1; }
.ac-mic-btn, .ac-send-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; font-size: 15px; flex: 0 0 auto; }
.ac-mic-btn.rec { background: #e03131; color: #fff; border-color: #e03131; }
.ac-send-btn { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Icônes de matière (Apprendre) : illustration IA superposée à l'icône SVG existante — retirée au
   chargement en cas d'échec/non-configuration (voir onerror), l'icône SVG reste alors seule visible. */
.subj-ico { position: relative; overflow: hidden; }
.subj-ico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: #fff; }

/* ---------- Apprendre (enfant) — refonte ---------- */
.exo-week-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.exo-donut { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.exo-donut-hole { width: 72px; height: 72px; border-radius: 50%; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.exo-donut-hole b { font-size: 18px; }
.exo-donut-hole .muted { font-size: 9px; text-align: center; line-height: 1.2; }
.exo-week-stats { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 160px; }
.exo-week-stat { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.exo-week-stat b { margin-left: auto; }
.exo-week-warn { color: #d97706; }
.ews-ico { font-size: 15px; }
.exo-coach-inner { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.exo-coach-title { font-weight: 800; font-size: 16px; margin-bottom: 2px; }
.exo-coach-text { font-size: 13px; margin: 0 0 10px; max-width: 34ch; }
.exo-coach-bot { font-size: 44px; flex: 0 0 auto; }
.exo-badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.exo-badge-card { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 16px 10px; border-radius: 14px; background: var(--surface-2, #f4f4fb); border: 1px solid var(--border); }
.exo-badge-card.on { background: var(--accent-soft); border-color: var(--accent); }
.exo-badge-card.off { opacity: .55; }
.exo-badge-ico { font-size: 26px; }
.exo-badge-label { font-size: 12px; font-weight: 600; }
.exo-badge-val { font-size: 17px; font-weight: 800; }
.qtile-pct { font-size: 11px; font-weight: 700; }
.qtile-pct.tone-good { color: #059669; }
.qtile-pct.tone-ok { color: #d97706; }
.qtile-pct.tone-warn { color: #dc2626; }

/* ---------- Notifications — refonte ---------- */
.notif-header { display: flex; align-items: center; gap: 10px; }
.notif-bell-ico svg { width: 22px; height: 22px; color: var(--accent); }
.notif-head-txt { flex: 1; min-width: 0; }
.notif-head-txt h2 { margin: 0; }
.notif-head-txt .view-sub { margin: 2px 0 0; }
.notif-readall-btn { background: var(--accent); color: #fff; border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; }
.notif-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.notif-summary-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; background: #fff; border-radius: 12px; padding: 10px 6px; }
:root[data-theme="dark"] .notif-summary-stat { background: var(--surface); }
.nss-ico { font-size: 18px; }
.notif-summary-stat b { font-size: 18px; }
.notif-summary-stat .muted { font-size: 10.5px; line-height: 1.2; }
.notif-group { margin-bottom: 16px; }
.notif-group-head { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.notif-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; flex: 0 0 auto; background-size: cover; background-position: center; }

/* ---------- Paramètres — refonte ---------- */
.settings-family-card { background: linear-gradient(135deg, var(--accent-soft), var(--surface-2, #f4f4fb)); }
.settings-fam-inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.settings-fam-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17px; flex: 0 0 auto; }
.settings-fam-body { flex: 1; min-width: 120px; }
.settings-fam-name { font-weight: 800; font-size: 16px; }
.settings-fam-sub { font-size: 12.5px; }
.settings-section-lbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin: 16px 4px 6px; }
.cal-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-pref-row { display: flex; align-items: center; gap: 12px; }
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; inset: 0; background: var(--border); border-radius: 999px; cursor: pointer; transition: background .15s; }
.switch-slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.switch input:checked + .switch-slider { background: var(--accent); }
.switch input:checked + .switch-slider::before { transform: translateX(18px); }


/* ---------- Mise à jour disponible ----------
   Pastille flottante centrée, au-dessus de la barre du bas (et de la safe-area iOS). `pointer-events`
   n'est actif QUE sur la pastille : le reste de l'écran reste cliquable — leçon de la mascotte, qui
   interceptait les clics sur les boutons voisins. */
.update-banner {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 60; display: flex; align-items: center; gap: 2px;
  background: var(--accent, #6c5ce7); color: #fff; border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22); padding: 4px 4px 4px 6px; max-width: calc(100vw - 24px);
  animation: update-in .28s ease-out;
}
.update-banner.hidden { display: none; }
@keyframes update-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .update-banner { animation: none; } }
.update-reload {
  background: none; border: none; color: inherit; font: inherit; font-weight: 700; font-size: 14px;
  padding: 8px 12px; cursor: pointer; border-radius: 999px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.update-reload:hover { background: rgba(255, 255, 255, .14); }
.update-close {
  background: none; border: none; color: inherit; opacity: .75; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 8px 10px; border-radius: 999px;
}
.update-close:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
@media (max-width: 900px) {
  /* Au-dessus de la barre de navigation du bas (62px) pour ne rien masquer. */
  .update-banner { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  .update-reload { font-size: 13px; padding: 8px 10px; }
}


/* ---------- Courses : ligne d'ajout sur mobile ----------
   Six contrôles sur une seule rangée se cassaient n'importe comment. Mise en page assumée en deux
   temps : le champ de saisie occupe toute la première ligne, les réglages (magasin, quantité, prix,
   estimation) et le bouton se partagent la seconde. */
@media (max-width: 560px) {
  .shop-add { gap: 8px; }
  /* Ligne 1 : saisie + Ajouter — l'action la plus fréquente reste à portée immédiate.
     Ligne 2 : magasin, quantité, prix, estimation. `order` place les éléments sans toucher au HTML. */
  .shop-add .shop-title-wrap { flex: 1 1 auto; min-width: 0; order: 1; }
  .shop-add .shop-title-wrap input { width: 100%; }
  .shop-add #shop-add-btn { flex: 0 0 auto; order: 2; }
  .shop-add .shop-add-break { display: block; flex: 1 1 100%; height: 0; margin: 0; order: 3; }
  .shop-add #shop-add-store { flex: 1 1 90px; min-width: 0; order: 4; }
  .shop-add #shop-add-qty { flex: 0 0 56px; order: 5; }
  .shop-add #shop-add-price { flex: 0 0 74px; order: 6; }
  .shop-add #shop-est { flex: 0 0 auto; order: 7; }

  /* Barre du bas : empilement net, chaque action pleine largeur (au lieu d'un mélange 1+2). */
  .shop-bottom-bar { flex-direction: column; gap: 8px; }
  .shop-bottom-bar .btn, .shop-bottom-bar .btn.primary { flex: 1 1 auto; width: 100%; order: 0; }
  .shop-bottom-bar .btn.primary { order: -1; }   /* l'action principale en tête */

  /* Barre de filtres des Tâches : le sélecteur prend sa propre ligne, pleine largeur. */
  .seg-toolbar select { flex: 1 1 100%; max-width: 100%; }

  /* Ajout rapide (Tâches / Agenda) : tout tient sur UNE ligne — l'étincelle et le bouton gardent leur
     taille, seul le champ se comprime. Sans min-width:0 il refuse de descendre sous la largeur de son
     placeholder et pousse le bouton à la ligne suivante. */
  .cal-quickadd { flex-wrap: nowrap; padding-left: 10px; }
  .cal-quickadd .cal-qa-spark { flex: 0 0 auto; }
  .cal-quickadd input { flex: 1 1 auto; min-width: 0; }
  .cal-quickadd .btn { flex: 0 0 auto; }
}