/* Messagerie façon WhatsApp : clair par défaut, sombre automatique. Aucun logo ni nom de marque tierce. */
:root{
  --bg:#fff;--panel:#fff;--bar:#f0f2f5;--tx:#111b21;--mut:#667781;--line:#e9edef;--hover:#f5f6f6;--sel:#f0f2f5;
  --green:#00a884;--green2:#25d366;--brand:#008069;--wall:#efeae2;--her:#fff;--me:#d9fdd3;--tick:#8a9aa3;
  --pill:#fff;--note:#ffeecd;--notetx:#54656f;--shadow:0 1px .5px rgba(11,20,26,.13);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --pat:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%20viewBox%3D%220%200%20140%20140%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23d9d2c5%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2026c0-4%203-7%207-7%202%200%204%201%205%203%201-2%203-3%205-3%204%200%207%203%207%207%200%207-12%2013-12%2013S20%2033%2020%2026z%22/%3E%3Cpath%20d%3D%22M92%2018l3%207%207%201-5%205%201%207-6-3-6%203%201-7-5-5%207-1z%22/%3E%3Cpath%20d%3D%22M104%2088c-6%200-10%204-10%209%200%203%201%205%203%207l-1%205%205-2c1%200%202%201%203%201%206%200%2010-5%2010-10s-4-10-10-10z%22/%3E%3Cpath%20d%3D%22M30%2092c2%205%206%209%2011%2011l3-3c1-1%202-1%203%200l4%202c1%201%201%202%200%203l-2%203c-9%200-19-10-19-19l3-2c1-1%202-1%203%200l2%204c1%201%201%202%200%203z%22/%3E%3Ccircle%20cx%3D%2266%22%20cy%3D%2260%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M58%20124c4-4%2010-4%2014%200%22/%3E%3Cpath%20d%3D%22M122%2056l6%200M125%2053l0%206%22/%3E%3C/g%3E%3C/svg%3E");
}
@media(prefers-color-scheme:dark){:root{
  --bg:#111b21;--panel:#111b21;--bar:#202c33;--tx:#e9edef;--mut:#8696a0;--line:#222d34;--hover:#202c33;--sel:#2a3942;
  --green:#00a884;--green2:#00a884;--brand:#00a884;--wall:#0b141a;--her:#202c33;--me:#005c4b;--tick:#8fb3a9;
  --pill:#182229;--note:#182229;--notetx:#ffd279;--shadow:0 1px .5px rgba(0,0,0,.3);
  --pat:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%20viewBox%3D%220%200%20140%20140%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23142027%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2026c0-4%203-7%207-7%202%200%204%201%205%203%201-2%203-3%205-3%204%200%207%203%207%207%200%207-12%2013-12%2013S20%2033%2020%2026z%22/%3E%3Cpath%20d%3D%22M92%2018l3%207%207%201-5%205%201%207-6-3-6%203%201-7-5-5%207-1z%22/%3E%3Cpath%20d%3D%22M104%2088c-6%200-10%204-10%209%200%203%201%205%203%207l-1%205%205-2c1%200%202%201%203%201%206%200%2010-5%2010-10s-4-10-10-10z%22/%3E%3Cpath%20d%3D%22M30%2092c2%205%206%209%2011%2011l3-3c1-1%202-1%203%200l4%202c1%201%201%202%200%203l-2%203c-9%200-19-10-19-19l3-2c1-1%202-1%203%200l2%204c1%201%201%202%200%203z%22/%3E%3Ccircle%20cx%3D%2266%22%20cy%3D%2260%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M58%20124c4-4%2010-4%2014%200%22/%3E%3Cpath%20d%3D%22M122%2056l6%200M125%2053l0%206%22/%3E%3C/g%3E%3C/svg%3E");
}}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--tx);font:15px/1.35 var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
svg{display:block}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.g{color:var(--green)!important}

/* ---------- Structure (ordinateur : comme la version web) ---------- */
.app{display:grid;grid-template-columns:minmax(340px,30%) minmax(0,1fr);height:100vh;height:100dvh}
.app.info-on{grid-template-columns:minmax(340px,30%) minmax(0,1fr) minmax(320px,30%)}
.side{display:flex;flex-direction:column;min-height:0;background:var(--panel);border-right:1px solid var(--line)}
.pane{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--wall)}
.info{display:none;min-height:0;background:var(--bar);border-left:1px solid var(--line);overflow-y:auto}
.info.on{display:block}
.tabs{display:none}

/* ---------- Discussions ---------- */
.side-h{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 16px;background:var(--bar)}
.side-h h1{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;color:var(--brand)}
.side-h .brand{border-radius:8px}
.ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--mut)}
.ic svg{width:22px;height:22px}
.ic:hover{background:rgba(0,0,0,.05)}
.search{display:flex;align-items:center;gap:12px;margin:8px 12px 4px;height:36px;padding:0 14px;border-radius:8px;background:var(--bar);color:var(--mut)}
.search svg{width:18px;height:18px;flex:none}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--tx);font:inherit;font-size:15px}
.search input::placeholder{color:var(--mut)}
.chips{display:flex;gap:8px;padding:6px 12px 8px;flex:none;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;height:32px;padding:0 12px;border-radius:16px;font-size:14px;color:var(--mut);background:var(--bar);display:inline-flex;align-items:center;gap:6px}
.chips button[aria-pressed=true]{background:#d9fdd3;color:#008069;font-weight:600}
@media(prefers-color-scheme:dark){.chips button[aria-pressed=true]{background:#0a332c;color:#00a884}}
.chips b{font-size:11px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--green2);color:#fff;display:inline-grid;place-items:center}
.chips b:empty{display:none}
/* Rangée "en ligne" : anneau vert, comme les statuts */
.actives{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px 10px 8px;flex:none}
.actives::-webkit-scrollbar{display:none}
.act{flex:0 0 70px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;color:var(--tx);padding:2px 0}
.act>span:last-child{max-width:66px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act .ring{display:block;width:62px;height:62px;padding:2.5px;border-radius:50%;background:conic-gradient(var(--green2),#00a884,var(--green2))}
.act .ring .av{width:100%;height:100%;border:2.5px solid var(--panel)}
.act .ring .av i{display:none}
.chats{list-style:none;overflow-y:auto;flex:1;min-height:0;scrollbar-width:thin}
.chat{display:flex;align-items:center;gap:13px;padding:0 0 0 13px;height:72px}
.chat:hover{background:var(--hover)}
.chat.on{background:var(--sel)}
.ct{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:center;gap:2px;padding-right:15px;border-bottom:1px solid var(--line)}
.r1,.r2{display:flex;align-items:center;gap:6px;min-width:0}
.r1 b{flex:1;min-width:0;font-size:17px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r1 time{flex:none;font-size:12px;color:var(--mut)}
.r2 small{flex:1;min-width:0;font-size:14px;color:var(--mut);display:flex}
.pv{display:flex;align-items:center;gap:3px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv .tk{flex:none;width:16px;height:11px;color:var(--tick)}
.badge{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--green2);color:#fff;font:600 12px/20px var(--font);font-style:normal;text-align:center}
@media(prefers-color-scheme:dark){.badge{color:#111b21}}
.chat.unread .r1 b{font-weight:600}
.chat.unread .r1 time{color:var(--green2)}
.chat.unread .pv{color:var(--tx)}
.none{padding:30px 16px;text-align:center;color:var(--mut);font-size:14px}
.side-f{flex:none;padding:10px 16px calc(10px + env(safe-area-inset-bottom));font-size:12px;color:var(--mut);border-top:1px solid var(--line);line-height:1.6}
.side-f a{text-decoration:underline;white-space:nowrap}

/* ---------- Avatars ---------- */
.av{position:relative;flex:none;width:49px;height:49px;border-radius:50%;display:grid;place-items:center;background:#dfe5e7;overflow:hidden}
@media(prefers-color-scheme:dark){.av{background:#6a7175}}
.av em{font-style:normal;font-weight:600;font-size:20px;color:#fff}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av i{display:none}
.av.lg{width:56px;height:56px}
.av.md{width:40px;height:40px}.av.md em{font-size:16px}
.av.hd{width:40px;height:40px}.av.hd em{font-size:16px}
.act .av{overflow:hidden}

/* ---------- Conversation ---------- */
.conv,.acc{flex:1;min-height:0;display:flex;flex-direction:column}
.ch{flex:none;display:flex;align-items:center;gap:2px;height:60px;padding:0 10px 0 12px;background:var(--bar);border-left:1px solid var(--line)}
.bk{display:none;color:var(--tx)}
.who{flex:1;min-width:0;display:flex;align-items:center;gap:13px;padding:4px;border-radius:8px;text-align:left}
.wt{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.wt b{font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt small{font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch .ic{color:var(--mut)}
.body{flex:1;min-height:0;overflow-y:auto;padding:12px 6% 8px;display:flex;flex-direction:column;overscroll-behavior:contain;scrollbar-width:thin;
  background:var(--pat) repeat,var(--wall);background-size:280px 280px}
.e2e{align-self:center;display:flex;gap:6px;align-items:flex-start;max-width:min(92%,560px);margin:6px 0 8px;padding:6px 12px;border-radius:8px;background:var(--note);color:var(--notetx);font-size:12.5px;line-height:1.4;text-align:center;box-shadow:var(--shadow)}
.e2e svg{flex:none;width:13px;height:13px;margin-top:2px}
.ts{align-self:center;margin:8px 0 10px;padding:5px 12px;border-radius:8px;background:var(--pill);color:var(--mut);font-size:12.5px;text-transform:uppercase;box-shadow:var(--shadow)}
.row{display:flex;margin-top:2px}
.row.me{justify-content:flex-end}
.row.her + .row.me,.row.me + .row.her{margin-top:10px}
.msg{position:relative;max-width:min(78%,560px);padding:6px 8px 7px 9px;border-radius:8px;font-size:14.8px;line-height:1.36;overflow-wrap:anywhere;box-shadow:var(--shadow);animation:in .16s ease-out}
.her .msg{background:var(--her)}
.me .msg{background:var(--me)}
/* petite pointe sur le premier message d'une série, comme WhatsApp */
.row.her:not(.row.her + .row.her) .msg{border-top-left-radius:0}
.row.her:not(.row.her + .row.her) .msg::before{content:"";position:absolute;left:-8px;top:0;width:8px;height:13px;background:var(--her);clip-path:polygon(0 0,100% 0,100% 100%)}
.row.me:not(.row.me + .row.me) .msg{border-top-right-radius:0}
.row.me:not(.row.me + .row.me) .msg::before{content:"";position:absolute;right:-8px;top:0;width:8px;height:13px;background:var(--me);clip-path:polygon(0 0,100% 0,0 100%)}
.row:not(.row + .row){margin-top:8px}
.tm{float:right;display:inline-flex;align-items:center;gap:3px;margin:8px 0 -5px 10px;font-size:11px;color:var(--mut);line-height:1}
.me .tm{color:var(--tick)}
.tm .tk{width:16px;height:11px}
.msg b{font-weight:600}
.msg a.u{color:#027eb5;text-decoration:underline}
.msg small{color:var(--mut)}
.lab{display:block;font-size:12px;font-weight:600;color:var(--green);margin-bottom:2px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tags span{font-size:13px;padding:3px 10px;border-radius:12px;background:var(--bar);color:var(--tx)}
@media(prefers-color-scheme:dark){.her .msg .tags span{background:#2a3942}}
.acts{display:flex;flex-direction:column;gap:6px;margin-top:8px;clear:both}
.or{display:block;margin-top:10px;font-size:13px;color:var(--mut)}
.tarif{display:block;text-align:center;font-size:12px;color:var(--mut)}
.minis{display:flex;gap:10px;margin-top:8px;overflow-x:auto;scrollbar-width:none;clear:both}
.minis button{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;min-width:56px}
.msg:has(> .photo){padding:3px}
.msg:has(> .photo)::before{display:none}
.photo{position:relative;display:grid;place-items:center;width:220px;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:#dfe5e7}
.photo em{font-style:normal;font-weight:700;font-size:64px;color:#fff}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.msg:has(> .photo) .tm{position:absolute;right:10px;bottom:9px;margin:0;float:none;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.msg.loved{margin-bottom:14px}
.msg.loved::after{content:"❤️";position:absolute;left:8px;bottom:-15px;font-size:12px;line-height:1;padding:3px 5px;border-radius:12px;background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.2)}
@keyframes in{from{opacity:0;transform:translateY(4px)}}
/* Saisie : champ + bouton rond vert (téléphone quand vide, envoyer quand on écrit) */
.cf{flex:none;padding:6px 10px calc(8px + env(safe-area-inset-bottom));background:var(--bar)}
.qr{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 8px}
.qr::-webkit-scrollbar{display:none}
.qr:empty{display:none}
.qr button{flex:none;height:32px;padding:0 13px;border-radius:16px;background:var(--panel);color:var(--green);font-size:14px;font-weight:500;box-shadow:var(--shadow)}
.qr button:hover{background:var(--hover)}
.cmp{display:flex;align-items:flex-end;gap:8px}
.inbox{flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:24px;background:var(--panel);box-shadow:var(--shadow)}
.emo{color:var(--mut)}.emo svg{width:24px;height:24px}
.field{flex:1;min-width:0;height:44px;border:0;outline:0;background:transparent;color:var(--tx);font:inherit;font-size:16px}
.field::placeholder{color:var(--mut)}
.round{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.18)}
.round svg{width:22px;height:22px}
.round .r-send{display:none}
.cmp.typed .r-send{display:block}.cmp.typed .r-call{display:none}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:22px;font-weight:600;font-size:15px;text-align:center}
.btn svg{width:18px;height:18px}
.btn.pri{color:#fff;background:var(--green)}
.btn.sec{color:var(--green);background:var(--panel);border:1px solid var(--line)}
.btn.sec.on{border-color:var(--green)}
.btn.sm{min-height:32px;padding:0 12px;font-size:14px}
.acts .btn{width:100%}

/* ---------- Module Dialotel intégré ---------- */
.dt{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg)}
.conv.dt-on .body,.conv.dt-on .cf{display:none}
.dtb{flex:none;display:flex;align-items:center;gap:8px;height:48px;padding:0 8px;border-bottom:1px solid var(--line);background:var(--bar)}
.dtt{flex:1;text-align:center;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtb .ic svg{width:20px;height:20px}
.dtbody{position:relative;flex:1;min-height:0;background:#fff}
.dtbody iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.load{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;text-align:center;background:var(--bg);color:var(--mut);font-size:14px;transition:opacity .2s}
.load.off{opacity:0;pointer-events:none}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--green);animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.dtf{flex:none;padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bar)}
.dtf:empty{display:none}
.dtf .btn{width:100%}
.acc .wt{padding-left:6px}
.callcard{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.callcard .btn{width:min(420px,100%)}
.callcard small{font-size:12px;color:var(--mut);text-align:center}
.seg{flex:none;display:flex;gap:6px;padding:8px 10px;background:var(--panel);border-bottom:1px solid var(--line)}
.seg button{flex:1;height:34px;border-radius:17px;font-weight:600;font-size:14px;color:var(--mut)}
.seg button[aria-selected=true]{background:#d9fdd3;color:#008069}
@media(prefers-color-scheme:dark){.seg button[aria-selected=true]{background:#0a332c;color:#00a884}}
.acc-n{flex:none;padding:8px 12px calc(8px + env(safe-area-inset-bottom));font-size:12px;color:var(--mut);text-align:center;background:var(--panel);border-top:1px solid var(--line)}

/* ---------- Écran vide (ordinateur) ---------- */
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;background:var(--bar);color:var(--mut);border-bottom:6px solid var(--green)}
.empty img{border-radius:22px}
.empty h2{font-size:28px;font-weight:300;color:var(--tx)}
.empty b{color:var(--tx)}

/* ---------- Infos du contact ---------- */
.ih{display:flex;align-items:center;gap:14px;height:60px;padding:0 12px;font-size:16px;background:var(--bar)}
.ib{display:flex;flex-direction:column;gap:10px;padding-bottom:20px}
.card{background:var(--panel);padding:16px 22px;box-shadow:var(--shadow)}
.card.top{display:flex;flex-direction:column;align-items:center;text-align:center}
.card h3{font-size:14px;font-weight:400;color:var(--mut);margin-bottom:6px}
.pic{position:relative;width:200px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#dfe5e7;display:grid;place-items:center}
.pic em{font-style:normal;font-weight:700;font-size:72px;color:#fff}
.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.ib h2{margin-top:14px;font-size:22px;font-weight:400}
.sub{font-size:14px;color:var(--mut);margin-top:2px}
.ist{font-size:14px;color:var(--mut);margin-top:4px}
.new{font-size:10px;font-weight:700;vertical-align:middle;padding:2px 6px;border-radius:4px;background:var(--green2);color:#fff}
.iacts{display:flex;gap:10px;margin-top:16px;width:100%;justify-content:center}
.ia{flex:1;max-width:110px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:10px;border:1px solid var(--line);font-size:13px;color:var(--tx)}
.ia svg{width:24px;height:24px;color:var(--green)}
.ia.fav svg{fill:none;stroke:var(--green);stroke-width:2}
.ia.fav[aria-pressed=true] svg{fill:var(--green)}
.about{font-size:15px;line-height:1.5}
.ib dl div{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.ib dl div:last-child{border-bottom:0}
.ib dt{color:var(--mut)}
.ib dd a{color:var(--green);font-weight:600}
.ib .acts{margin:0}

/* ---------- Notification en haut ---------- */
.toast{position:fixed;z-index:50;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translate(-50%,-140%);visibility:hidden;width:min(420px,calc(100vw - 20px));display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--panel);color:var(--tx);box-shadow:0 6px 24px rgba(0,0,0,.2);transition:transform .25s,visibility .25s}
.toast.on{transform:translate(-50%,0);visibility:visible}
.toast p{flex:1;font-size:14px}

/* ---------- Âge ---------- */
.age{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:var(--bar)}
.age-in{width:min(380px,100%);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.age-av{display:flex}
.age-av .av{margin-left:-10px;border:3px solid var(--bar)}
.age-av .av:first-child{margin-left:0}
.age-brand{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:700;color:var(--brand)}
.age-brand img{border-radius:10px}
.age h2{font-size:21px}
.age p{color:var(--mut)}
.age .btn{width:100%}

/* ---------- Mobile : un écran à la fois, comme l'application ---------- */
@media(max-width:899px){
  .app,.app.info-on{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .side,.pane,.info{grid-column:1;grid-row:1}
  .pane,.info.on{display:none}
  .app[data-view=conv] .side,.app[data-view=account] .side,.app[data-view=info] .side{display:none}
  .app[data-view=conv] .pane,.app[data-view=account] .pane{display:flex}
  .app[data-view=info] .info{display:block;border:0}
  .app[data-view=conv] .tabs,.app[data-view=info] .tabs{display:none}
  .tabs{display:flex;grid-row:2;border-top:1px solid var(--line);background:var(--panel);padding-bottom:env(safe-area-inset-bottom)}
  .tabs button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 6px;font-size:12px;color:var(--mut)}
  .tabs svg{width:24px;height:24px;padding:0;box-sizing:content-box}
  .tabs button svg{padding:4px 18px;border-radius:16px}
  .tabs button[aria-current]{color:var(--tx);font-weight:600}
  .tabs button[aria-current] svg{background:#d9fdd3;color:#008069}
  .tabs b{position:absolute;top:2px;left:calc(50% + 8px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--green2);color:#fff;font-size:11px;display:grid;place-items:center}
  .tabs b:empty{display:none}
  .side-h{background:var(--panel);height:calc(58px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
  .side-h h1{font-size:22px}
  .search{border-radius:20px;height:40px}
  .side-f{padding-bottom:10px}
  .ch{padding-top:env(safe-area-inset-top);height:calc(58px + env(safe-area-inset-top));padding-left:2px;border-left:0}
  .ih{padding-top:env(safe-area-inset-top);height:calc(58px + env(safe-area-inset-top))}
  .bk{display:grid}
  .body{padding:10px 8px 6px}
  .msg{max-width:85%}
  .chips{display:none}
  .app[data-view=list] .chips{display:flex}
}
@media(prefers-color-scheme:dark) and (max-width:899px){.tabs button[aria-current] svg{background:#0a332c;color:#00a884}}
@media(min-width:900px){
  .ih .ic{display:grid}
  .actives{display:none}
}
@media(min-width:900px) and (max-width:1199px){
  .app,.app.info-on{grid-template-columns:340px minmax(0,1fr)}
  .info.on{position:fixed;top:0;right:0;bottom:0;width:360px;z-index:20;box-shadow:0 0 30px rgba(0,0,0,.25)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Pages légales ---------- */
body.legal{overflow:auto;background:var(--bar)}
body.legal .lg-top{position:sticky;top:0;padding:14px 16px;background:var(--panel);border-bottom:1px solid var(--line);font-weight:600;color:var(--green)}
body.legal .lg{max-width:760px;margin:16px auto;padding:24px 20px 40px;line-height:1.6;background:var(--panel);border-radius:10px;box-shadow:var(--shadow)}
body.legal .lg h1{font-size:26px;margin-bottom:8px}
body.legal .lg h2{font-size:17px;margin:22px 0 6px}
body.legal .lg p{margin:6px 0}
body.legal .lg a{color:var(--green);text-decoration:underline}
body.legal .lg-f{padding:16px;text-align:center;font-size:13px;color:var(--mut)}
body.legal .lg-f a{text-decoration:underline}