/* Front desk v0.01 : style de la Melvane App (MRM), theme clair. Composants repris des maquettes V3 (Roman les a validees). */
:root { color-scheme: light;
  --bg:#f6f2ea; --surface:#fff; --surface-2:#fbf7ef; --border:#e3dbc9; --grid:#e6ded0;
  --ink:#221d17; --ink-2:#6c6255; --ink-muted:#948a79;
  --accent:#2f5a63; --accent-strong:#1f4149; --accent-soft:#e2edee; --on-accent:#fff;
  --violet:#7c5cff; --good:#0ca30c; --good-soft:#e1f5e1; --warning:#e0a100; --warn-soft:#fff3d6; --serious:#ec835a; --critical:#d03b3b; --crit-soft:#fbe3e3;
  --A:hsl(212 46% 50%); --B:hsl(272 38% 56%); --C:hsl(32 42% 50%); --D:hsl(334 40% 58%); --E:hsl(28 12% 48%); --X:hsl(215 12% 60%);
  --airbnb:#ff385c; --booking:#003580; --vrbo:#1668e3; --email:#6c6255;
  --shadow:0 18px 50px rgba(34,29,23,.16);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
html { background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:14px; line-height:1.5; overflow:hidden; overscroll-behavior:none; }
h1,h2,h3 { font-family:Fraunces,Georgia,serif; font-weight:600; margin:0; text-wrap:balance; }
button { font:inherit; cursor:pointer; color:inherit; touch-action:manipulation; }
a { color:var(--accent-strong); }
/* iPhone : un champ de saisie sous 16 px fait zoomer la page (leçon de l'app prestataire) */
input, textarea, select { font:inherit; font-size:16px; color:var(--ink); }
[hidden] { display:none !important; }

/* ---------- cadre : plein ecran sur telephone, « vue mobile » centree sur ordinateur ---------- */
.shell { display:flex; justify-content:center; align-items:center; height:100dvh; }
.app { width:100%; height:100dvh; background:var(--surface); display:flex; flex-direction:column; position:relative; overflow:hidden; }
@media (min-width:560px) {
  .shell { padding:14px; }
  .app { width:412px; height:min(880px, calc(100dvh - 28px)); border-radius:36px; border:9px solid #1c1a17; box-shadow:var(--shadow); }
}
.top2 { padding:calc(env(safe-area-inset-top,0px) + 8px) 14px 8px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; flex:none; background:var(--surface); }
@media (min-width:560px) { .top2 { padding-top:10px; } }
.top2 h1 { font-size:19px; margin:0; line-height:1.15; } .top2 .ttl { flex:1; min-width:0; } .top-sub { font-size:11.5px; color:var(--ink-muted); }
.ibtn { width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:var(--surface-2); display:grid; place-items:center; font-size:15px; color:var(--ink-2); position:relative; flex:none; padding:0; }
.pbody { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:12px 14px; display:flex; flex-direction:column; gap:10px; position:relative; min-height:0; background:var(--surface); }
.pbody.flush { padding:0; gap:0; }
.tabbar { border-top:1px solid var(--border); display:flex; background:var(--surface); flex:none; padding:0 0 env(safe-area-inset-bottom,0px); height:calc(60px + env(safe-area-inset-bottom,0px)); }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font-size:10.5px; font-weight:600; color:var(--ink-muted); position:relative; background:none; border:0; padding:0; } .tab .ic { font-size:19px; line-height:1; } .tab.on { color:var(--accent); }
.tab .bd { position:absolute; top:5px; left:calc(50% + 6px); min-width:16px; height:16px; border-radius:999px; background:var(--critical); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; padding:0 4px; } .tab .bd.calm { background:var(--accent); }
.vt { display:flex; gap:0; border-bottom:1px solid var(--border); overflow-x:auto; flex:none; scrollbar-width:none; } .vt::-webkit-scrollbar { display:none; }
.vt button { padding:9px 13px; font-size:13px; font-weight:700; color:var(--ink-muted); border:0; border-bottom:3px solid transparent; white-space:nowrap; background:none; } .vt button.on { color:var(--accent-strong); border-color:var(--accent); } .vt small { margin-left:4px; background:var(--accent-soft); color:var(--accent-strong); border-radius:999px; padding:0 7px; font-size:10.5px; }
/* ecran de detail : recouvre tout (barre du bas comprise), retour en haut a gauche */
.screen { position:absolute; inset:0; background:var(--surface); display:flex; flex-direction:column; z-index:20; animation:slidein .18s ease-out; } @keyframes slidein { from { transform:translateX(24px); opacity:0; } to { transform:none; opacity:1; } }
.screen.closing { animation:slideout .15s ease-in forwards; } @keyframes slideout { to { transform:translateX(24px); opacity:0; } }
/* zone d'ecriture et barre d'envoi : collees en bas, jamais flottantes ; seuls les messages defilent */
.dock { flex:none; background:var(--surface); border-top:1px solid var(--border); padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:7px; }
.dock .comp2 textarea { flex:1; border:0; background:transparent; outline:none; resize:none; padding:8px 4px; max-height:120px; line-height:1.35; }
.snd { border:0; cursor:pointer; }
.snd:disabled { opacity:.4; }
.sheet { position:absolute; left:0; right:0; bottom:0; background:var(--surface); border-radius:22px 22px 0 0; box-shadow:0 -10px 30px rgba(34,29,23,.2); padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px)); z-index:40; max-height:85%; overflow-y:auto; } .sheet::before { content:""; display:block; width:42px; height:5px; border-radius:3px; background:var(--border); margin:0 auto 10px; } .sheet h3 { font-size:16px; margin-bottom:8px; }
.dim { position:absolute; inset:0; background:rgba(34,29,23,.38); z-index:39; }
.toast { position:absolute; left:14px; right:14px; bottom:calc(76px + env(safe-area-inset-bottom,0px)); background:#1c1a17; color:#fff; border-radius:12px; padding:9px 13px; font-size:12.5px; display:flex; align-items:center; gap:9px; z-index:60; }
.login { flex:1; display:flex; flex-direction:column; justify-content:center; padding:28px; gap:12px; }
.login label { display:block; font-size:12px; font-weight:700; margin-bottom:4px; }
.login input { width:100%; border:1px solid var(--border); border-radius:10px; padding:11px 12px; background:var(--surface); }
.login .err { color:var(--critical); font-size:13px; min-height:18px; margin:0; }
.empty { color:var(--ink-muted); text-align:center; padding:26px 10px; font-size:13.5px; }
.errbox { text-align:center; padding:22px 14px; color:var(--ink-2); display:flex; flex-direction:column; gap:10px; align-items:center; }
.list > * + * { border-top:1px solid var(--grid); }
.rowitem { display:flex; gap:10px; align-items:flex-start; padding:11px 14px; width:100%; text-align:left; background:var(--surface); border:0; }
.rowitem:active { background:var(--accent-soft); }
.rowitem .grow { min-width:0; }
.rowitem.unread .nm { font-weight:800; }
.nm { font-weight:600; }
.avsm { width:36px; height:36px; border-radius:50%; background:var(--accent-soft); color:var(--accent-strong); display:grid; place-items:center; font-size:12px; font-weight:800; flex:none; }
.pill { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; border-radius:999px; padding:2px 9px; background:var(--accent-soft); color:var(--accent-strong); white-space:nowrap; }
.pill.good { background:var(--good-soft); color:#0a7a0a; } .pill.warn { background:var(--warn-soft); color:#8a5c00; } .pill.crit { background:var(--crit-soft); color:#a82e2e; } .pill.violet { background:#ece6ff; color:#4d33c4; } .pill.gray { background:#efeae0; color:var(--ink-2); } .pill.solid { background:var(--accent); color:#fff; }
.cat { display:inline-block; font-size:11.5px; font-weight:700; color:#fff; border-radius:999px; padding:3px 10px; } .cat.A { background:var(--A); } .cat.B { background:var(--B); } .cat.C { background:var(--C); } .cat.D { background:var(--D); } .cat.E { background:var(--E); } .cat.X { background:var(--X); }
.ch { display:inline-grid; place-items:center; width:19px; height:19px; border-radius:6px; color:#fff; font-size:10px; font-weight:800; flex:none; } .ch.air { background:var(--airbnb); } .ch.bk { background:var(--booking); } .ch.vr { background:var(--vrbo); } .ch.em { background:var(--email); } .ch.sms { background:#2f8a5a; }
.btn { border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:7px 15px; font-weight:600; font-size:13px; } .btn.main { background:var(--accent); border-color:var(--accent); color:#fff; } .btn.good { background:#2f8a5a; border-color:#2f8a5a; color:#fff; } .btn.soft { background:var(--accent-soft); border-color:#c6dcde; color:var(--accent-strong); } .btn.sm { padding:4px 11px; font-size:12px; } .btn.danger { color:#a82e2e; border-color:#efc5c5; background:#fff7f7; } .btn:disabled, .btn.off { opacity:.45; cursor:default; }
.chip { border:1px solid var(--border); background:var(--surface); color:var(--ink-2); border-radius:999px; padding:5px 12px; font-size:12.5px; font-weight:600; white-space:nowrap; } .chip.on { background:var(--accent); color:#fff; border-color:var(--accent); } .chip small { opacity:.7; font-weight:500; margin-left:3px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; } .chips.nowrap { flex-wrap:nowrap; overflow:hidden; }
.search { border:1px solid var(--border); background:var(--surface-2); border-radius:999px; padding:7px 13px; color:var(--ink-muted); font-size:13px; }
.row { display:flex; align-items:center; gap:8px; min-width:0; } .row.sp { justify-content:space-between; } .grow { flex:1; min-width:0; }
.mut { color:var(--ink-muted); } .mut2 { color:var(--ink-2); } .xs { font-size:11.5px; } .sm { font-size:12.5px; } .b { font-weight:700; }
.ell { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--serious); flex:none; } .dot.g { background:var(--good); } .dot.y { background:var(--warning); } .dot.r { background:var(--critical); } .dot.b { background:var(--A); }
.lst { color:var(--accent-strong); font-weight:700; text-decoration:underline dotted; text-underline-offset:3px; }
.note-box { font-size:12px; border-radius:10px; padding:8px 11px; background:var(--surface-2); border:1px dashed var(--border); color:var(--ink-2); } .note-box.warn { background:var(--warn-soft); border:1px solid #f0d58a; color:#7a5200; } .note-box.crit { background:var(--crit-soft); border:1px solid #efc5c5; color:#8a2323; } .note-box.good { background:var(--good-soft); border:1px solid #bfe3bf; color:#0a5f0a; } .note-box.violet { background:#f1edff; border:1px solid #d6cbff; color:#4d33c4; }

/* tuiles et cartes tickets (style MRM) */
.tq { border-radius:16px; border:1px solid color-mix(in srgb, var(--dp) 38%, var(--border)); background:color-mix(in srgb, var(--dp) 11%, var(--surface)); padding:12px 14px; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:6px; } .tq::before { content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--dp); }
.tq.A { --dp:var(--A); } .tq.B { --dp:var(--B); } .tq.C { --dp:var(--C); } .tq.D { --dp:var(--D); } .tq.E { --dp:var(--E); } .tq.X { --dp:var(--X); }
.thumb { width:38px; height:38px; border-radius:10px; flex:none; border:1px solid var(--border); background:linear-gradient(135deg,#d9cdb8,#efe6d4); } .thumb.t2 { background:linear-gradient(135deg,#cfd9dd,#e6eef0); } .thumb.t3 { background:linear-gradient(135deg,#dccfd6,#f1e6ec); }
.tq-t { font-family:Fraunces,Georgia,serif; font-weight:600; font-size:16px; line-height:1.22; margin:0; }
.quote { font-style:italic; color:var(--ink-2); font-size:13px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 13px; } .card.hl { border-left:4px solid var(--accent); } .card.urgent { border-left:4px solid var(--critical); } .card.unread { background:#fff; border-color:#c6dcde; box-shadow:0 0 0 2px var(--accent-soft); }
.ghostrow { display:flex; gap:7px; flex-wrap:wrap; }

/* conversation */
.bub { max-width:78%; padding:8px 11px; border-radius:14px; font-size:13px; line-height:1.4; display:flex; flex-direction:column; gap:3px; } .bub small { font-size:10.5px; opacity:.65; }
.bub.g { align-self:flex-start; background:var(--surface-2); border:1px solid var(--border); border-bottom-left-radius:4px; } .bub.h { align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px; } .bub.s { align-self:center; max-width:92%; background:#f1edff; border:1px dashed #d6cbff; color:#4d33c4; font-size:11.5px; text-align:center; border-radius:10px; } .bub .who { font-size:10.5px; font-weight:700; opacity:.8; }
.conv { display:flex; flex-direction:column; gap:7px; }
.comp { display:flex; gap:7px; align-items:flex-end; } .ta { flex:1; border:1px solid var(--border); border-radius:14px; background:var(--surface-2); padding:9px 12px; font-size:13px; color:var(--ink-2); min-height:40px; }
.prop { border:2px solid #cfe3e5; background:linear-gradient(0deg,#f4fafa,#fff); border-radius:14px; padding:10px 12px; } .prop .lab { font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:6px; }
.tpl { display:flex; flex-direction:column; gap:6px; } .tpl button { text-align:left; border:1px solid var(--border); background:var(--surface); border-radius:12px; padding:8px 11px; display:flex; flex-direction:column; gap:1px; } .tpl button b { font-size:13px; } .tpl button small { color:var(--ink-muted); font-size:11.5px; } .tpl button:hover { border-color:var(--accent); background:var(--accent-soft); }

/* attente, envoi, upload (nos bonnes pratiques) */
.mm-spin { position:relative; width:34px; height:34px; flex:none; } .mm-spin::before,.mm-spin::after { content:""; position:absolute; inset:0; border-radius:50%; border:3px solid transparent; } .mm-spin::before { border-top-color:var(--accent); border-right-color:color-mix(in srgb,var(--accent) 35%,transparent); animation:spin 1s cubic-bezier(.55,.1,.45,.9) infinite; } .mm-spin::after { inset:7px; border-bottom-color:var(--ink-muted); border-left-color:color-mix(in srgb,var(--ink-muted) 30%,transparent); animation:spin 1.6s linear infinite reverse; } .mm-spin.sm { width:16px; height:16px; } .mm-spin.sm::before,.mm-spin.sm::after { border-width:2px; } .mm-spin.sm::after { inset:4px; }
@keyframes spin { to { transform:rotate(360deg); } }
.loader { display:flex; align-items:center; gap:12px; justify-content:center; padding:22px 10px; color:var(--ink-2); font-size:13px; } .loader b { color:var(--ink); }
.skel { background:linear-gradient(100deg,var(--surface-2) 30%,color-mix(in srgb,var(--accent) 14%,var(--surface-2)) 50%,var(--surface-2) 70%); background-size:220% 100%; animation:shim 1.2s linear infinite; border-radius:8px; } @keyframes shim { from { background-position:120% 0; } to { background-position:-120% 0; } }
.ghost { width:54px; height:54px; border-radius:10px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:18px; background:linear-gradient(100deg,var(--surface-2) 30%,color-mix(in srgb,var(--accent) 22%,var(--surface-2)) 50%,var(--surface-2) 70%); background-size:220% 100%; animation:shim 1.2s linear infinite; } .ghost.done { animation:none; background:var(--good); }
.ph { width:54px; height:54px; border-radius:10px; flex:none; border:1px solid var(--border); position:relative; } .ph.p1 { background:linear-gradient(135deg,#c9b99a,#e8dcc4); } .ph.p2 { background:linear-gradient(135deg,#b7c7cc,#dfeaec); } .ph.p3 { background:linear-gradient(135deg,#cdbfd0,#ebe0ee); } .ph.p4 { background:linear-gradient(135deg,#bccdb8,#e2eede); } .ph.vid::after { content:"▶"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:15px; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.upl { border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--border)); border-radius:12px; padding:10px 12px; background:color-mix(in srgb,var(--accent-soft) 55%,var(--surface)); display:flex; flex-direction:column; gap:8px; } .upl-t { display:flex; align-items:center; gap:11px; font-size:13px; } .upl-t small { display:block; color:var(--ink-muted); font-size:11.5px; }
.drop { border:2px dashed color-mix(in srgb,var(--accent) 55%,var(--border)); border-radius:14px; padding:14px 16px; background:color-mix(in srgb,var(--accent-soft) 70%,var(--surface)); display:flex; align-items:center; gap:12px; } .drop .ic { width:38px; height:38px; border-radius:10px; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:18px; flex:none; }
.drop.over { border-style:solid; border-color:var(--accent); box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 18%,transparent); }
.state { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; border-radius:999px; padding:3px 11px; } .state.send { background:var(--accent-soft); color:var(--accent-strong); } .state.ok { background:var(--good-soft); color:#0a7a0a; } .state.ko { background:var(--crit-soft); color:#a82e2e; }
.prog { height:8px; border-radius:6px; background:var(--grid); overflow:hidden; } .prog i { display:block; height:100%; background:var(--accent); border-radius:6px; } .prog.g i { background:var(--good); }
table.t { width:100%; border-collapse:collapse; font-size:12.5px; } table.t th { text-align:left; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); font-weight:700; padding:0 8px 6px; } table.t td { padding:8px; border-top:1px solid var(--grid); vertical-align:middle; }
.calg { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; } .calg .dw { text-align:center; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-muted); } .calg .d { min-height:58px; border-radius:7px; background:var(--surface); border:1px solid var(--grid); padding:3px 4px; font-size:11px; color:var(--ink-2); display:flex; flex-direction:column; gap:2px; overflow:hidden; } .calg .d.td { outline:2px solid var(--ink); outline-offset:-2px; } .calg .d.off { background:transparent; border-color:transparent; } .calg .e { font-size:9.5px; font-weight:700; color:#fff; border-radius:4px; padding:0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.legend { display:flex; gap:12px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-2); } .legend i { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px; }
.mask { background:repeating-linear-gradient(135deg,#efebe2 0 5px,#ddd6c7 5px 10px); color:var(--ink-muted); border-radius:6px; padding:0 8px; font-size:11px; font-weight:700; letter-spacing:.04em; }
.sw { display:inline-block; vertical-align:middle; width:34px; height:20px; border-radius:999px; background:#cfc6b4; position:relative; flex:none; } .sw::after { content:""; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%; background:#fff; } .sw.on { background:var(--good); } .sw.on::after { left:16px; }
.flow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .flow .stp { display:flex; align-items:center; gap:7px; font-size:12.5px; } .flow .stp .no { width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:11.5px; font-weight:700; } .flow .arr { color:var(--ink-muted); }

.seg { display:flex; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:3px; gap:2px; } .seg span { flex:1; text-align:center; font-size:12.5px; font-weight:700; padding:6px 4px; border-radius:9px; color:var(--ink-2); white-space:nowrap; } .seg span.on { background:var(--accent); color:#fff; } .seg small { opacity:.75; font-weight:600; margin-left:2px; }
.banner { display:flex; align-items:center; gap:9px; border-radius:12px; padding:9px 12px; font-size:12.5px; } .banner.warn { background:var(--warn-soft); border:1px solid #f0d58a; color:#7a5200; } .banner.violet { background:#f1edff; border:1px solid #d6cbff; color:#4d33c4; } .banner.crit { background:var(--crit-soft); border:1px solid #efc5c5; color:#8a2323; } .banner.good { background:var(--good-soft); border:1px solid #bfe3bf; color:#0a5f0a; } .banner .grow b { display:block; }
.kv { display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-top:1px solid var(--grid); font-size:13px; } .kv:first-child { border-top:0; } .kv b { font-weight:700; text-align:right; } .code { font-family:ui-monospace,Menlo,monospace; background:#1c1a17; color:#fff; border-radius:8px; padding:2px 9px; letter-spacing:.08em; font-size:13px; }
.clk { color:var(--accent-strong); font-weight:700; background:var(--accent-soft); border-radius:8px; padding:0 6px; border-bottom:1px dotted var(--accent); }
.opt { border:2px solid var(--border); border-radius:16px; padding:12px; background:var(--surface); } .opt.rec { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.freq { width:100%; border-collapse:collapse; font-size:13px; } .freq th { text-align:left; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); padding:0 8px 6px; } .freq td { padding:7px 8px; border-top:1px solid var(--grid); }
/* fiche client / logement (comme les « hub » de la Melvane App) */
.hubc { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:11px 12px; } .hubc h3 { font-family:"IBM Plex Sans",sans-serif; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-muted); font-weight:700; margin:0 0 7px; display:flex; justify-content:space-between; align-items:center; } .hubc h3 .lk { text-transform:none; letter-spacing:0; color:var(--accent-strong); font-size:12px; }
.avlg { width:46px; height:46px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:15px; font-weight:700; flex:none; }
.tone { display:inline-block; font-size:11.5px; font-weight:700; border-radius:999px; padding:2px 10px; } .tone.ok { background:var(--good-soft); color:#0a7a0a; } .tone.ko { background:var(--crit-soft); color:#a82e2e; } .tone.mid { background:var(--warn-soft); color:#8a5c00; }
.ota { display:inline-flex; gap:5px; } .ota i { width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:800; color:#fff; }
/* calendrier d'occupation (nuits avec nombre de personnes) */
.occ { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; } .occ .dw { text-align:center; font-size:10px; font-weight:700; letter-spacing:.05em; color:var(--ink-muted); } .occ .n { min-height:40px; border-radius:7px; background:#d9d4c9; color:var(--ink-2); font-size:11px; padding:3px 4px; display:flex; flex-direction:column; justify-content:space-between; font-weight:700; } .occ .n.s { color:#fff; } .occ .n.td { outline:2px solid var(--ink); outline-offset:-2px; } .occ .n.b { background:repeating-linear-gradient(135deg,#efebe2 0 5px,#ddd6c7 5px 10px); } .occ .g { display:inline-flex; align-items:center; gap:1px; font-size:10.5px; } .occ .px { font-size:10px; color:var(--ink-2); font-weight:700; } .occ .e { position:relative; } .occ .mk { font-size:10px; }
/* clés (comme la vue Clés de la Melvane App) */
.kc { border-radius:16px; border:1px solid var(--border); background:#fff; overflow:hidden; } .kc::before { content:""; display:block; height:5px; background:var(--good); } .kc.red { background:#fbeeee; border-color:#efc5c5; } .kc.red::before { background:var(--critical); } .kc.org { background:#fff7ea; border-color:#f0d9b0; } .kc.org::before { background:#e8960c; }
.kc .in { padding:9px 12px 11px; } .kc .hd { display:flex; align-items:center; gap:8px; } .kc .hd b { font-size:15px; } .kc .cnt { margin-left:auto; background:var(--critical); color:#fff; border-radius:999px; font-size:11px; font-weight:700; padding:0 8px; line-height:19px; }
.kbox { border-radius:10px; border:1px solid #bfe3bf; background:#e6f4e6; padding:6px 8px; text-align:center; font-size:11px; min-width:96px; } .kbox.r { border-color:#efb3b3; background:#fbe3e3; } .kbox.o { border-color:#f0d58a; background:#fff3d6; } .kbox b { display:block; font-size:12px; } .kbox span { color:var(--ink-2); display:block; font-size:10.5px; } .kbox .cs { display:inline-block; margin-top:3px; background:#fff8df; border:1px solid #e7d89a; border-radius:999px; padding:0 8px; font-size:10.5px; font-weight:700; }
.kst { font-size:11.5px; font-weight:700; margin-top:6px; display:flex; align-items:center; gap:6px; } .kst .d { width:8px; height:8px; border-radius:50%; background:var(--good); } .kst .d.o { background:#e8960c; }
.comp2 { display:flex; align-items:center; gap:6px; border:1px solid var(--border); background:var(--surface-2); border-radius:24px; padding:4px 4px 4px 6px; width:100%; } .comp2 .pl { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:var(--ink-2); font-size:22px; flex:none; } .comp2 .tx { flex:1; color:var(--ink-muted); font-size:14px; padding:6px 2px; } .comp2 .snd { width:38px; height:38px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:16px; flex:none; }
.qchips { display:flex; gap:6px; width:100%; } .qchips span { border:1px solid #c6dcde; background:var(--accent-soft); border-radius:999px; padding:5px 12px; font-size:12.5px; font-weight:700; color:var(--accent-strong); white-space:nowrap; } .qchips span.off { opacity:.5; }
.sendbar { display:flex; align-items:center; gap:8px; padding:8px 14px; background:var(--accent-soft); color:var(--accent-strong); font-size:12.5px; font-weight:700; border-top:1px solid #c6dcde; flex:none; }
.pri { display:flex; gap:4px; padding:8px 12px; background:var(--surface-2); border-bottom:1px solid var(--border); overflow:hidden; flex:none; } .pri span { padding:7px 12px; border-radius:12px; font-size:13px; font-weight:700; color:var(--ink-2); white-space:nowrap; } .pri span.on { background:var(--accent); color:#fff; } .pri small { opacity:.75; margin-left:3px; }
.sub2 { display:flex; gap:16px; padding:7px 14px 5px; border-bottom:1px solid var(--grid); overflow:hidden; flex:none; font-size:12.5px; color:var(--ink-muted); white-space:nowrap; } .sub2 span.on { color:var(--accent-strong); font-weight:700; box-shadow:inset 0 -2px 0 var(--accent); padding-bottom:4px; } .sub2 small { margin-left:3px; }
.stay { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px; } .nights { display:flex; gap:4px; margin:8px 0 4px; } .nights i { flex:1; height:34px; border-radius:7px; background:#2f8a5a; display:grid; place-items:center; color:#fff; font-style:normal; font-size:12px; font-weight:700; line-height:1.1; text-align:center; } .nights i small { display:block; font-size:9.5px; opacity:.85; font-weight:600; } .nights i.past { opacity:.45; } .nights i.td { outline:2px solid var(--ink); outline-offset:1px; }
.acts3 { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; } .acts3 .btn { padding:8px 2px; font-size:12px; text-align:center; white-space:nowrap; }
.actbar { display:flex; gap:8px; padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--border); background:var(--surface); flex:none; } .actbar .btn { flex:1; }
.btn { min-height:40px; } .btn.sm { min-height:32px; padding:5px 12px; } .chip { padding:7px 13px; }
/* barre du bas : libelles longs (Communication, Appartements) sans debordement sur petit ecran */
.tab { min-width:0; padding:0 1px; font-size:10px; letter-spacing:-.01em; white-space:nowrap; }

/* icones SVG a traits fins : barre du bas façon application moderne (pastille douce sous l'icone active) */
.fdi { display:block; flex:none; }
.tab .ic { width:52px; height:30px; border-radius:15px; display:grid; place-items:center; transition:background .15s, color .15s; color:var(--ink-muted); }
.tab.on .ic { background:var(--accent-soft); color:var(--accent); }
.tab.on .ic .fdi { stroke-width:2.1; }
.tab .bd { top:3px; left:calc(50% + 8px); }
.ibtn .fdi { margin:auto; }
/* rangees de filtres : jamais coupees (avant, la rangee cachait ce qui depassait : « A venir » inatteignable) ; les cinq onglets du haut tiennent sur un telephone */
.chips.nowrap { flex-wrap:wrap; overflow:visible; }
.vt { scroll-snap-type:x proximity; }
.vt button { padding:9px 8px; font-size:12px; scroll-snap-align:center; }
.vt small { margin-left:3px; padding:0 6px; }

/* actualisation par glissement vers le bas */
.ptr { position:absolute; left:50%; top:0; width:36px; height:36px; margin-left:-18px; border-radius:50%; background:var(--surface); border:1px solid var(--border); box-shadow:0 4px 14px rgba(34,29,23,.18); display:grid; place-items:center; color:var(--accent); z-index:15; opacity:0; pointer-events:none; transition:opacity .12s; }
.ptr.spin .fdi { animation:spin .8s linear infinite; }
#fd-body { touch-action:pan-y; }