/* App Dépaperasse — carnet à souches de poche. Les couleurs viennent de la fiche du client (src/cliente.js → /api/ficha) :
   mêmes variables que la démo de Marca (--fond --carte --encre --gris --bord --surl --accent --accent-t). Valeurs par défaut = Dépaperasse. */
@font-face { font-family: "Fraunces"; src: url("/fonts/Fraunces-variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
:root {
  --fond: #F4F0E6; --carte: #FFFFFF; --encre: #17140F; --gris: #5A544B; --bord: #DDD5C4; --surl: #F7EEC4; --accent: #2E3BD6; --accent-t: #FFFFFF;
  --bien: #1F5C3A; --mal: #A3362A;
  --serif: "Fraunces", Georgia, serif; --sans: system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --barre: 66px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #14120E; --carte: #1E1B16; --encre: #F4F0E6; --gris: #B3AB9C; --bord: #34302A; --surl: #3A341C; --accent: #7C86FF; --accent-t: #0E0D0A;
    --bien: #7BC79B; --mal: #E47866; color-scheme: dark; }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--fond); color: var(--encre); font: 16px/1.45 var(--sans); }
body { min-height: 100dvh; padding-bottom: calc(var(--barre) + env(safe-area-inset-bottom)); }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent); }
.oculto { display: none !important; }
.mono { font-family: var(--mono); }

/* ── en-tête : la souche du carnet (numéro + perforation) ─────────── */
.cab { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--fond) 90%, transparent); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); padding: calc(env(safe-area-inset-top) + 12px) 16px 10px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1.5px dashed var(--bord); }
.cab .volver { border: 0; background: none; font-size: 22px; padding: 2px 8px 2px 0; cursor: pointer; }
.cab .titre { flex: 1; min-width: 0; }
.cab h1 { font-family: var(--serif); font-weight: 800; font-size: 24px; letter-spacing: -.015em; margin: 0; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab .ref { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.cab img.logo { height: 26px; display: block; }
main { padding: 6px 16px 28px; max-width: 720px; margin: 0 auto; }
.etiquette { margin: 22px 0 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.vacio { color: var(--gris); padding: 18px 4px; }

/* ── barre d'onglets ─────────────────────────────────────────────── */
nav.barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--barre) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); background: var(--carte); border-top: 1.5px solid var(--encre); display: flex; }
nav.barre a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none;
  color: var(--gris); font-size: 11.5px; font-weight: 600; position: relative; }
nav.barre a svg { width: 24px; height: 24px; }
nav.barre a.on { color: var(--encre); }
nav.barre a.on::after { content: ""; position: absolute; top: -1.5px; left: 22%; right: 22%; height: 3px; background: var(--accent); }
.pastille { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: var(--accent-t); font: 700 11px/18px var(--sans); text-align: center; }

/* ── listes et cartes ────────────────────────────────────────────── */
.liste { background: var(--carte); border: 1.5px solid var(--encre); border-radius: 4px; overflow: hidden; }
.ligne { display: flex; gap: 12px; align-items: center; padding: 13px 14px; border-bottom: 1px solid var(--bord); text-decoration: none; color: inherit; cursor: pointer; }
.ligne:last-child { border-bottom: 0; }
.ligne .corps { flex: 1; min-width: 0; }
.ligne .t1 { font-weight: 650; display: flex; gap: 8px; align-items: baseline; }
.ligne .t1 small { font-weight: 500; font-size: 12px; color: var(--gris); }
.ligne .t2 { display: block; font-size: 13.5px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ligne .t2.neuf { color: var(--encre); font-weight: 600; }
.av { width: 42px; height: 42px; border-radius: 6px; color: #fff; display: grid; place-items: center; font: 800 17px var(--serif); flex: none; position: relative; }
.av i { position: absolute; right: -4px; bottom: -4px; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--carte); background: #A39E93; }
.av i.on { background: #2FA36B; }
.nb { background: var(--accent); color: var(--accent-t); font-size: 12px; font-weight: 800; min-width: 22px; height: 22px; border-radius: 11px;
  padding: 0 6px; display: grid; place-items: center; flex: none; }
.carte { background: var(--carte); border: 1.5px solid var(--encre); border-radius: 4px; padding: 14px; margin-bottom: 10px; box-shadow: 5px 5px 0 var(--bord); }
.carte .t { font-weight: 700; line-height: 1.3; }
.carte .m { font-size: 12.5px; color: var(--gris); margin-top: 3px; }
.carte .d { font-size: 14px; white-space: pre-wrap; margin-top: 8px; }
.boutons { display: flex; gap: 8px; margin-top: 12px; }
.btn { border: 1.5px solid var(--encre); background: var(--carte); border-radius: 3px; padding: 10px 14px; font-weight: 650; cursor: pointer; }
.btn.oui { background: var(--accent); border-color: var(--accent); color: var(--accent-t); }
.btn.large { flex: 1; }
.btn:disabled { opacity: .5; }
.resume { font-size: 13px; color: var(--gris); margin: 12px 2px 0; line-height: 1.5; }

/* ── bientôt (modules pas encore branchés) ───────────────────────── */
.bientot { border: 1.5px dashed var(--gris); border-radius: 4px; padding: 18px; margin-top: 14px; background: var(--carte); }
.bientot h2 { font-family: var(--serif); font-weight: 800; font-size: 22px; margin: 0 0 6px; }
.bientot ol { margin: 10px 0 0; padding-left: 20px; } .bientot li { margin: 6px 0; }

/* ── chat avec un membre de l'équipe ─────────────────────────────── */
.fil { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 170px; max-width: 720px; margin: 0 auto; }
.msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; background: var(--carte);
  border: 1px solid var(--bord); }
.msg.moi { align-self: flex-end; background: var(--encre); color: var(--fond); border-color: var(--encre); border-bottom-right-radius: 4px; white-space: pre-wrap; }
.msg.lui { align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.sys { align-self: center; background: var(--surl); border: 0; font-size: 13.5px; white-space: pre-wrap; }
.msg .h { display: block; font-family: var(--mono); font-size: 10.5px; opacity: .6; margin-top: 4px; }
.msg p { margin: 0 0 7px; } .msg p:last-of-type { margin-bottom: 2px; }
.msg .tt { font-family: var(--serif); font-weight: 800; font-size: 16px; margin: 10px 0 4px; } .msg .tt:first-child { margin-top: 0; }
.msg ul, .msg ol { margin: 2px 0 8px; padding-left: 20px; } .msg li { margin: 3px 0; }
.msg li::marker { color: var(--acc, var(--accent)); font-weight: 700; }
.msg .note { margin: 6px 0 8px; padding: 8px 10px; border-radius: 6px; background: var(--surl); font-size: 14px; }
.msg a { color: inherit; }
.msg .adj { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.msg .adj img, .msg .adj video { max-width: 100%; max-height: 300px; border-radius: 8px; display: block; }
.msg .adj audio { width: 240px; max-width: 100%; }
.msg .adj a.f { display: inline-block; padding: 6px 10px; border-radius: 6px; background: rgba(128,128,128,.15); text-decoration: none; font-size: 13px; }
.msg .ecouter { display: inline-flex; gap: 5px; margin-top: 8px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--bord); background: var(--carte);
  font: 600 12.5px var(--sans); color: var(--encre); cursor: pointer; }
.msg .ecouter.on { background: var(--acc, var(--accent)); border-color: transparent; color: #fff; }
.jour { align-self: center; margin: 12px auto 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.plus-ancien { align-self: center; border: 0; background: none; color: var(--accent); font-weight: 700; cursor: pointer; padding: 6px; }
.ecoute { font-size: 12px; color: var(--gris); display: inline-flex; align-items: center; gap: 6px; }
.ecoute i { width: 8px; height: 8px; border-radius: 50%; background: #A39E93; } .ecoute i.on { background: #2FA36B; }

.compo { position: fixed; left: 0; right: 0; bottom: calc(var(--barre) + env(safe-area-inset-bottom)); z-index: 15; background: color-mix(in srgb, var(--fond) 94%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--bord); padding: 8px 12px; }
.compo .in { max-width: 720px; margin: 0 auto; display: flex; gap: 8px; align-items: flex-end; }
.compo textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 150px; border: 1.5px solid var(--encre); border-radius: 4px; padding: 10px 12px;
  background: var(--carte); resize: none; outline: none; font-size: 16px; }
.compo .rond { width: 44px; height: 44px; border-radius: 4px; border: 1.5px solid var(--encre); background: var(--carte); display: grid; place-items: center; flex: none; cursor: pointer; }
.compo .rond svg { width: 21px; height: 21px; }
.compo .envoyer { background: var(--accent); border-color: var(--accent); color: var(--accent-t); }
.compo .rec { background: var(--mal); border-color: var(--mal); color: #fff; font: 700 12px var(--mono); }
.compo .pieces { max-width: 720px; margin: 0 auto 6px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
.compo .pieces span { background: var(--surl); border-radius: 4px; padding: 3px 8px; }

/* ── entrée (passkey) ────────────────────────────────────────────── */
.entrer { min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: 24px; }
.entrer img { width: min(260px, 70vw); }
.entrer p { color: var(--gris); max-width: 32ch; margin: 18px auto; }
.entrer .btn { padding: 14px 28px; }
.erreur { color: var(--mal); }
.tourne { width: 22px; height: 22px; border: 2.5px solid var(--bord); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: t .8s linear infinite; }
@keyframes t { to { transform: rotate(360deg); } }
.toast { position: fixed; left: 50%; bottom: calc(var(--barre) + 20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50;
  background: var(--encre); color: var(--fond); padding: 10px 16px; border-radius: 4px; font-size: 14px; max-width: 90vw; }
@media (prefers-reduced-motion: reduce) { .tourne { animation: none; } }

/* Aujourd'hui */
.salut { font-family: 'Fraunces', serif; font-weight: 800; font-size: 28px; line-height: 1.1; margin: 6px 0 4px; }
.sous { color: var(--gris); margin: 0 0 8px; font-size: 15px; }
.ligne .chev { color: var(--gris); font-size: 22px; padding-left: 8px; align-self: center; }