:root {
  --bg: #f6f7f5;
  --surface: #ffffff;
  --surface-2: #eef1ee;
  --text: #17201d;
  --muted: #5c6863;
  --line: #dfe4e0;
  --accent: #0f766e;
  --accent-ink: #ffffff;
  --accent-soft: #d6efe9;
  --fixed: #94a3b8;
  --good: #15803d;
  --warn: #b45309;
  --warn-soft: #fdf1df;
  --alert: #b91c1c;
  --alert-soft: #fde4e4;
  --tip-soft: #e3eefb;
  --good-soft: #def5e5;
  --radius: 16px;
  --shadow: 0 1px 2px rgb(0 0 0 / .05), 0 4px 16px rgb(0 0 0 / .04);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1412; --surface: #182019; --surface-2: #212b25; --text: #e7ece9; --muted: #9aa8a1;
    --line: #2c3731; --accent: #2dd4bf; --accent-ink: #062a26; --accent-soft: #123f39; --fixed: #475569;
    --good: #4ade80; --warn: #fbbf24; --warn-soft: #3a2c10; --alert: #f87171; --alert-soft: #3d1717;
    --tip-soft: #172a40; --good-soft: #13321f; --shadow: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
[hidden], .hide { display: none !important; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: 1.6rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.error { color: var(--alert); font-weight: 600; }
.note { background: var(--warn-soft); border-radius: 10px; padding: .6em .8em; font-size: .9rem; }

/* Contrôles */
.btn {
  appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; padding: .65em 1.1em; border-radius: 999px; cursor: pointer;
  transition: transform .08s, background .15s;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.danger { color: var(--alert); border-color: color-mix(in srgb, var(--alert) 40%, transparent); }
.btn.small { padding: .4em .8em; font-size: .85rem; }
.btn:disabled { opacity: .6; }
.link { background: none; border: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.icon-btn { background: none; border: 0; color: var(--muted); cursor: pointer; padding: .4em; border-radius: 10px; font-size: 1rem; line-height: 1; }
.icon-btn svg { width: 22px; height: 22px; display: block; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn.small { font-size: .8rem; }

label { display: flex; flex-direction: column; gap: .3em; font-weight: 600; font-size: .9rem; flex: 1; min-width: 0; }
input, select, textarea {
  font: inherit; font-weight: 400; color: var(--text); background: var(--surface-2);
  border: 1px solid transparent; border-radius: 10px; padding: .6em .7em; width: 100%; min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
label.check { flex-direction: row; align-items: center; font-weight: 400; }
label.check input { width: auto; }
.row { display: flex; gap: .8em; flex-wrap: wrap; align-items: flex-end; } /* les champs restent alignés même si un libellé passe sur deux lignes */
.row > label { flex: 1 1 140px; }
.stack, .sheet-form, #setup-form, #unlock-form { display: flex; flex-direction: column; gap: .9em; }
.seg { display: flex; border: 0; padding: 3px; margin: 0; background: var(--surface-2); border-radius: 12px; gap: 3px; }
/* Groupe de champs avec libellé : le libellé est au-dessus du contrôle, jamais dedans. */
.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.field > legend { font-weight: 600; font-size: .9rem; padding: 0 0 .4em; }
.seg label { position: relative; flex: 1; flex-direction: row; justify-content: center; align-items: center; padding: .5em; border-radius: 9px; cursor: pointer; font-weight: 500; text-align: center; }
/* Bouton radio invisible, ancré à son étiquette : sans largeur propre, il élargirait la page (width: 100 % des champs). */
.seg input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.seg label:has(input:checked) { background: var(--surface); box-shadow: var(--shadow); color: var(--accent); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: .4em; margin: .6em 0; }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: .35em .8em; font: inherit; font-size: .85rem; cursor: pointer; }
.chip:hover { border-color: var(--accent); }

.card { background: var(--surface); border-radius: var(--radius); padding: 1.1em 1.2em; box-shadow: var(--shadow); border: 1px solid var(--line); }

/* Accès */
.gate { max-width: 420px; margin: 0 auto; padding: 8vh 18px 40px; text-align: center; }
.gate.wide { max-width: 520px; padding-top: 5vh; }
.gate .card { text-align: left; margin: 1.2em 0; }
.gate details { text-align: left; }
.logo { width: 56px; height: 56px; }
.lead { font-size: 1.1rem; }
.promises { list-style: none; padding: 0; margin: 1em auto; display: grid; gap: .4em; text-align: left; max-width: 400px; }
.promises li { display: flex; gap: .6em; align-items: center; }

/* Coquille */
.top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1em;
  padding: .6em 18px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .5em; font-weight: 800; margin-right: auto; }
.brand .logo { width: 30px; height: 30px; }
.tabs { display: flex; gap: .2em; }
.tab {
  display: flex; align-items: center; gap: .4em; border: 0; background: none; color: var(--muted);
  font: inherit; font-weight: 600; padding: .5em .8em; border-radius: 10px; cursor: pointer;
}
.tab svg { width: 20px; height: 20px; }
.tab.on { color: var(--accent); background: var(--accent-soft); }
.saved { font-size: .8rem; color: var(--good); opacity: 0; transition: opacity .3s; white-space: nowrap; }
.saved.show { opacity: 1; }
.view { max-width: 1040px; margin: 0 auto; padding: 1.2em 18px 110px; }
.view-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; margin-bottom: 1em; flex-wrap: wrap; }

/* L'en-tête complet (marque, 5 onglets, état, cadenas) demande ~950 px : en dessous, barre d'onglets en bas. */
@media (max-width: 960px) {
  .tabs {
    position: fixed; bottom: 0; left: 0; right: 0; justify-content: space-around; z-index: 6;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: .3em .3em calc(.3em + env(safe-area-inset-bottom));
  }
  .tab { flex-direction: column; gap: .1em; font-size: .7rem; padding: .4em .2em; flex: 1; }
  .tab.on { background: none; }
  .saved { display: none; }
  h1 { font-size: 1.35rem; }
}

/* Tableau de bord */
.people { display: grid; gap: 1em; margin-bottom: 1em; }
.people.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.hero { position: relative; overflow: hidden; }
.hero-head { display: flex; align-items: center; gap: .6em; }
.hero-head h2 { margin: 0; font-size: 1.1rem; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 800; }
.label { margin: 1em 0 0; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.big { font-size: clamp(2.2rem, 7vw, 2.8rem); font-weight: 800; margin: 0; color: var(--accent); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hero.neg .big { color: var(--alert); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; margin: .6em 0 1em; }
.trio div { background: var(--surface-2); border-radius: 10px; padding: .45em .6em; }
.trio span { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.trio small { color: var(--muted); font-size: .75rem; }
.meter { height: 10px; border-radius: 99px; background: var(--accent); overflow: hidden; }
.meter .fixed { height: 100%; background: var(--fixed); }
.legend { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin-top: .4em; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .35em; }
.dot.fixed { background: var(--fixed); } .dot.free { background: var(--accent); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1em; align-items: start; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: .5em .3em; border-bottom: 1px solid var(--line); text-align: left; }
th { font-size: .8rem; color: var(--muted); font-weight: 600; }
tfoot td { font-weight: 800; border-bottom: 0; }
.num { text-align: right; white-space: nowrap; }
.kv { list-style: none; padding: 0; margin: 0 0 .6em; }
.kv li { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .45em 0; border-bottom: 1px solid var(--line); }
.kv li:last-child { border-bottom: 0; }
.kv small { display: block; color: var(--muted); font-size: .8rem; }
.kv strong { font-variant-numeric: tabular-nums; text-align: right; }
.bars { list-style: none; padding: 0; margin: 0 0 .6em; display: grid; gap: .55em; }
.bar-label { display: flex; justify-content: space-between; font-size: .85rem; }
.bar-label span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.bar { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.bar div { height: 100%; background: var(--accent); border-radius: 99px; }
.empty { text-align: left; }
.steps { padding-left: 1.2em; }
.steps li { margin-bottom: .3em; }

/* Listes */
.group { margin-bottom: 1.2em; }
.group-title { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 .5em .3em; }
.group-title small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.list { list-style: none; margin: 0; padding: 0; }
.list.card { padding: 0; overflow: hidden; }
.list > li + li { border-top: 1px solid var(--line); }
.pad { padding: 1em 1.2em; }
.row-btn {
  display: flex; width: 100%; gap: 1em; justify-content: space-between; align-items: center; text-align: left;
  background: none; border: 0; padding: .8em 1.2em; font: inherit; color: inherit; cursor: pointer;
}
.row-btn:hover { background: var(--surface-2); }
.row-btn.inactive { opacity: .5; }
.row-main { display: flex; flex-direction: column; min-width: 0; }
.row-main small { color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: .3em; margin-top: .2em; }
.tags em { font-style: normal; font-size: .75rem; background: var(--surface-2); border-radius: 6px; padding: .05em .45em; }
.row-side { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; font-size: .9rem; }
.acc { display: flex; gap: .4em; align-items: center; padding: .3em 0; }
.acc + .acc { border-top: 0 !important; }
.person-row { display: flex; gap: .8em; flex-wrap: wrap; padding: .6em 0; border-top: 1px solid var(--line); }
.person-row > label { flex: 1 1 150px; }
.btns { display: flex; flex-wrap: wrap; gap: .5em; margin: .8em 0; }
section.card { margin-bottom: 1em; }

/* Assistant */
.insights { display: grid; gap: .6em; margin-bottom: 1em; }
.insight { display: flex; gap: .8em; align-items: flex-start; border-radius: 14px; padding: .8em 1em; background: var(--tip-soft); border: 0; text-align: left; color: inherit; font: inherit; width: 100%; }
.insight .ico { font-size: 1.2rem; line-height: 1.3; }
.insight > div { flex: 1; }
.insight p { margin: .2em 0 0; font-size: .92rem; }
.insight.alert { background: var(--alert-soft); }
.insight.warn { background: var(--warn-soft); }
.insight.good { background: var(--good-soft); }
.insight.banner { flex-direction: column; gap: .2em; margin-bottom: 1em; cursor: pointer; }
.insight.banner span { font-size: .9rem; }
.chat .chatlog { display: flex; flex-direction: column; gap: .5em; max-height: 50vh; overflow-y: auto; padding: .2em 0 .5em; }
.msg { max-width: 88%; padding: .6em .9em; border-radius: 14px; font-size: .95rem; }
.msg.bot { background: var(--surface-2); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.me { background: var(--accent); color: var(--accent-ink); align-self: flex-end; border-bottom-right-radius: 4px; }
.ask { display: flex; gap: .5em; }

/* Fenêtre modale */
.sheet {
  border: 0; padding: 0; width: min(560px, 100vw); max-height: 92vh; border-radius: 20px;
  background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgb(0 0 0 / .3);
}
.sheet::backdrop { background: rgb(0 0 0 / .4); }
.sheet-form { padding: 1.1em 1.2em 1.2em; }
.sheet-form header { display: flex; justify-content: space-between; align-items: center; }
.sheet-form header h2 { margin: 0; font-size: 1.2rem; }
.sheet-form footer { display: flex; justify-content: flex-end; gap: .6em; margin-top: .4em; }
.sheet-form footer .danger { margin-right: auto; }
.preview { background: var(--accent-soft); border-radius: 10px; padding: .6em .8em; margin: 0; min-height: 2.6em; font-size: .9rem; }
.preview:empty { display: none; }
@media (max-width: 760px) {
  .sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); }
}

/* Synchronisation à deux */
.syncdot { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: var(--muted); cursor: pointer; flex: none; }
.syncdot.ok { background: var(--good); }
.syncdot.busy { background: var(--accent); animation: pulse 1s ease-in-out infinite; }
.syncdot.offline { background: var(--warn); }
.syncdot.error, .syncdot.gone { background: var(--alert); }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .syncdot.busy { animation: none; } }
.code { font: 600 1.05rem/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; background: var(--surface-2); border-radius: 10px; padding: .7em .9em; word-break: break-all; user-select: all; text-align: center; margin: .6em 0; }

/* Langue, jumelage et appareils */
textarea { resize: vertical; line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.langbar { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 14px; flex: none; }
.langbar select { width: auto; font-size: .85rem; padding: .35em .6em; }
.gate { position: relative; }
.qr-box { display: flex; justify-content: center; }
.qr { width: min(260px, 70vw); height: auto; border-radius: 12px; background: #fff; }
.words { list-style: none; margin: .6em 0; padding: 0; columns: 3 7.5em; column-gap: 1em; counter-reset: w; font: 600 .95rem/1.9 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface-2); border-radius: 12px; padding: .6em .9em; user-select: all; }
.words li { counter-increment: w; break-inside: avoid; }
.words li::before { content: counter(w) ". "; color: var(--muted); font-weight: 400; display: inline-block; min-width: 2.2em; text-align: right; margin-right: .3em; }
.countdown { text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); margin: 0; }
.success { background: var(--good-soft); color: var(--good); border-radius: 10px; padding: .8em 1em; font-weight: 600; margin: 0; }
.devices { list-style: none; margin: .4em 0 .8em; padding: 0; }
.devices li { display: flex; justify-content: space-between; align-items: center; gap: .8em; padding: .6em 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.devices li:last-child { border-bottom: 0; }
.devices small { display: block; color: var(--muted); font-size: .8rem; }
.dev-actions { display: flex; gap: .4em; }
.tag { font-style: normal; font-size: .72rem; font-weight: 600; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: .1em .6em; margin-left: .3em; }
h4.sub { margin: .8em 0 .2em; font-size: .9rem; color: var(--muted); font-weight: 600; }
.scan { width: 100%; max-height: 50vh; border-radius: 12px; background: #000; object-fit: cover; }

/* Déverrouillage par empreinte */
.bio { width: 100%; }
.or { position: relative; text-align: center; margin: .9em 0 .3em; color: var(--muted); font-size: .85rem; font-weight: 400; }
.or::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.or span { position: relative; background: var(--surface); padding: 0 .7em; }
#bio-box { display: flex; flex-direction: column; }