/* tam-tam — version 1 */
:root{
  --font-display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bg:#f3f8f9; --surface:#ffffff; --surface-2:#eef4f6; --line:#e1ebee;
  --fg:#0f2430; --fg-2:#5d7380;
  --accent:#14b8c9; --accent-strong:#08798a; --accent-ink:#ffffff; --accent-soft:#d6f4f7; --accent-hover:#10a6b6;
  --brand-2:#ff7a59; --av-bg:#d6f4f7;
  --bubble-in:#ffffff; --bubble-out:#14b8c9; --bubble-out-fg:#ffffff; --quote:rgba(15,36,48,.07);
  --chat-bg:#eaf6f7; --chat-dot:rgba(15,36,48,.045);
  --notice:#fcf0c6; --notice-fg:#574510;
  --tick-read:#1f8fd6; --danger:#c43636; --ok:#1b6b34;
  --shadow:rgba(16,32,26,.16); --overlay:rgba(10,22,17,.48);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#081419; --surface:#0f1f26; --surface-2:#18303a; --line:#1f3944;
  --fg:#e7f3f5; --fg-2:#8fa9b3;
  --accent-strong:#5fdbea; --accent-soft:#0d3b43; --brand-2:#ff8f73; --av-bg:#123a42;
  --bubble-in:#18303a; --bubble-out:#0f7f8c; --bubble-out-fg:#ffffff; --quote:rgba(255,255,255,.09);
  --chat-bg:#0a1a20; --chat-dot:rgba(230,243,245,.04);
  --notice:#2a2512; --notice-fg:#e5d18b; --tick-read:#62c2f6; --danger:#f17272; --ok:#6fd38f;
  --shadow:rgba(0,0,0,.55); --overlay:rgba(0,0,0,.62); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#081419; --surface:#0f1f26; --surface-2:#18303a; --line:#1f3944;
  --fg:#e7f3f5; --fg-2:#8fa9b3;
  --accent-strong:#5fdbea; --accent-soft:#0d3b43; --brand-2:#ff8f73; --av-bg:#123a42;
  --bubble-in:#18303a; --bubble-out:#0f7f8c; --bubble-out-fg:#ffffff; --quote:rgba(255,255,255,.09);
  --chat-bg:#0a1a20; --chat-dot:rgba(230,243,245,.04);
  --notice:#2a2512; --notice-fg:#e5d18b; --tick-read:#62c2f6; --danger:#f17272; --ok:#6fd38f;
  --shadow:rgba(0,0,0,.55); --overlay:rgba(0,0,0,.62); color-scheme:dark }

html{box-sizing:border-box;height:100%}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:15px/1.4 var(--font-body);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.logo{width:30px;height:30px;flex:none}
.brand{margin:0;font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--accent-strong)}
.brand i{font-style:normal;color:var(--brand-2)}
:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* boutons et champs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 18px;border:0;border-radius:22px;background:var(--accent);color:var(--accent-ink);font-weight:600}
.btn:hover{background:var(--accent-hover)}
.btn.ghost{background:var(--surface-2);color:var(--fg)}
.btn.ghost:hover{background:var(--line)}
.btn.danger{background:var(--danger);color:#fff}
.btn.sm{padding:7px 13px;font-size:14px}
.btn:disabled{opacity:.55;cursor:default}
.btn .ic{width:18px;height:18px}
.ib{display:grid;place-items:center;width:40px;height:40px;flex:none;padding:0;border:0;border-radius:50%;background:none;color:var(--fg-2)}
.ib:hover{background:var(--surface-2)}
.linkb{padding:2px;border:0;background:none;color:var(--accent-strong);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.field{display:flex;flex-direction:column;gap:5px}
.field label,.lbl{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-2)}
.field input,.field textarea,.field select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface);outline:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)}
.hint{margin:0;font-size:13px;color:var(--fg-2)}
.err{color:var(--danger);font-size:14px;font-weight:500}
.pick{display:flex;align-items:center;gap:12px;padding:8px 16px;cursor:pointer}
.pick input{width:20px;height:20px;accent-color:var(--accent-strong);flex:none}
.pick.chk{padding:4px 0;align-items:flex-start;font-size:14px}
.pick.chk input{margin-top:1px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:6px 12px;border:0;border-radius:16px;background:var(--surface-2);color:var(--fg-2);font-size:13.5px;font-weight:500}
.chip[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-strong);font-weight:600}
.seg{display:flex;gap:4px;padding:3px;border-radius:20px;background:var(--surface-2)}
.seg button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 10px;border:0;border-radius:17px;background:none;color:var(--fg-2);font-weight:600}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px var(--shadow)}
.seg .ic{width:17px;height:17px}
.note{padding:10px 12px;border-radius:12px;background:var(--notice);color:var(--notice-fg);font-size:13.5px}

/* avatars */
.av{position:relative;display:inline-grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;overflow:hidden;background:#fff;font-weight:700;color:#fff}
.av svg,.av img{width:100%;height:100%;object-fit:cover;display:block}
.av.xs{width:30px;height:30px}.av.sm{width:38px;height:38px}.av.lg{width:84px;height:84px}.av.xl{width:110px;height:110px}
.av.grp{background:hsl(var(--h) 60% 42%)}
.av.grp .ic{width:55%;height:55%;color:#fff}
.dot-on{position:absolute;right:1px;bottom:1px;width:12px;height:12px;border-radius:50%;background:#2fbf5a;border:2px solid var(--surface)}
.avw{position:relative;display:inline-block;flex:none}

/* écran de connexion */
.auth{position:fixed;inset:0;display:flex;overflow-y:auto;padding:16px;background:var(--accent)}
.auth-card{display:flex;flex-direction:column;gap:14px;width:min(420px,100%);margin:auto;padding:24px 22px;border-radius:22px;background:var(--surface);box-shadow:0 18px 50px rgba(0,0,0,.18)}
.auth-top{display:flex;align-items:center;justify-content:center;gap:8px}
.auth-top .brand{font-size:30px}
.auth h2{margin:0;font-family:var(--font-display);font-size:24px}
.auth p{margin:0}
.auth .btn[type=submit]{padding-block:12px;font-size:16px}
.pw{position:relative}
.pw button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--accent-strong);font-weight:600;font-size:13px}
.avg{display:flex;flex-direction:column;gap:6px}
.avg-row{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.avg-b{aspect-ratio:1;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;overflow:hidden}
.avg-b svg{display:block;width:100%;height:100%}
.avg-b[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2.5px var(--accent)}
.avg-sw{display:flex;flex-wrap:wrap;gap:6px}
.sw{width:26px;height:26px;padding:0;border:2px solid var(--surface);border-radius:50%;background:var(--c);box-shadow:0 0 0 1px var(--line)}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--fg)}

/* mise en page */
.app{position:fixed;inset:0;display:grid;grid-template-columns:minmax(320px,400px) 1fr;background:var(--bg)}
.side{position:relative;display:flex;flex-direction:column;min-height:0;background:var(--surface);border-right:1px solid var(--line)}
.main{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--chat-bg)}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .app[data-view="list"] .main{display:none}
  .app[data-view="chat"] .side{display:none}
}
.head{display:flex;flex-direction:column;gap:10px;padding:10px 16px 8px}
.title{display:flex;align-items:center;gap:8px;min-height:44px}
.title h1{margin:0;font-family:var(--font-display);font-size:24px}
.title .grow{flex:1}
.me-btn{padding:0;border:0;background:none;border-radius:50%}
.search{display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:20px;background:var(--surface-2);color:var(--fg-2)}
.search input{flex:1;min-width:0;padding:9px 0;border:0;background:none;outline:none;color:var(--fg)}
.body{flex:1;min-height:0;overflow-y:auto}
.tabs{display:flex;border-top:1px solid var(--line);background:var(--surface)}
.tab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 9px;border:0;background:none;color:var(--fg-2);font-size:11.5px;font-weight:500}
.tab .pill{display:grid;place-items:center;width:54px;height:30px;border-radius:15px}
.tab[aria-current="page"]{color:var(--fg);font-weight:700}
.tab[aria-current="page"] .pill{background:var(--accent-soft);color:var(--accent-strong)}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700}
.tab .badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;font-size:11px}
.fab{position:absolute;right:16px;bottom:78px;display:grid;place-items:center;width:56px;height:56px;border:0;border-radius:18px;background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 18px var(--shadow)}
.sec{padding:16px 16px 6px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-2)}
.empty{padding:28px 20px;text-align:center;color:var(--fg-2)}

/* rangées */
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:13px;row-gap:1px;align-items:center;width:100%;padding:10px 16px;border:0;background:none;text-align:left;color:inherit}
button.row:hover,.row.active{background:var(--surface-2)}
.row>.avw,.row>.av{grid-row:1/3}
.row-name{font-weight:600;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-time{font-size:12px;color:var(--fg-2)}
.row-time.new{color:var(--accent-strong);font-weight:700}
.row-prev{grid-column:2;display:flex;align-items:center;gap:4px;min-width:0;color:var(--fg-2);font-size:14px}
.row-prev>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-end{grid-column:3;grid-row:1/3;display:flex;align-items:center;gap:6px}
.row .typing-t{color:var(--accent-strong);font-weight:600}
.tick{width:17px;height:12px;flex:none;fill:none;stroke:var(--fg-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tick.read{stroke:var(--tick-read)}

/* barre des statuts */
.stories{display:flex;align-items:flex-start;gap:8px;margin-inline:-16px;padding:2px 14px 4px;overflow-x:auto;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.story{flex:none;width:62px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:none;font-size:11.5px;color:var(--fg-2)}
.story .ring{position:relative;padding:2px;border-radius:50%;border:1.5px solid var(--accent)}
.story .ring.seen{border-color:var(--line)}
.story .ring.empty{border-style:dashed;border-color:var(--line)}
.story .av{width:50px;height:50px}
.story-n{max-width:62px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story .plus{position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;width:21px;height:21px;border:2px solid var(--surface);border-radius:50%;background:var(--accent);color:#fff}
.story .plus .ic{width:12px;height:12px;stroke-width:2.6}
.story .lock{position:absolute;left:-3px;bottom:-3px;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;border:2px solid var(--surface);background:var(--fg);color:var(--surface)}
.story .lock .ic{width:10px;height:10px}

/* discussion */
.chat-head{display:flex;align-items:center;gap:6px;padding:8px 8px;background:var(--surface);border-bottom:1px solid var(--line);min-height:60px}
.chat-head .back{display:none}
@media (max-width:820px){ .chat-head .back{display:grid} }
.chat-id{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:4px;border:0;background:none;text-align:left;border-radius:10px}
.chat-id b{display:block;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-id small{display:block;color:var(--fg-2);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-id small.on{color:var(--accent-strong);font-weight:600}
.msgs{flex:1;min-height:0;overflow-y:auto;padding:12px 5% 8px;background-image:radial-gradient(var(--chat-dot) 1.2px,transparent 1.3px);background-size:22px 22px}
.day{display:table;margin:12px auto 8px;padding:4px 12px;border-radius:9px;background:var(--surface);color:var(--fg-2);font-size:12.5px;box-shadow:0 1px 1px var(--shadow)}
.sys{display:table;max-width:85%;margin:8px auto;padding:5px 12px;border-radius:9px;background:var(--notice);color:var(--notice-fg);font-size:12.5px;text-align:center}
.msg{display:flex;margin-top:2px}
.msg.first{margin-top:8px}
.msg.out{justify-content:flex-end}
.bubble{position:relative;max-width:min(78%,560px);padding:6px 9px 6px;border-radius:10px;background:var(--bubble-in);box-shadow:0 1px 1px var(--shadow);overflow-wrap:anywhere}
.msg.out .bubble{background:var(--bubble-out)}
.who{display:block;font-size:13px;font-weight:700;color:hsl(var(--h) 55% 38%)}
:root[data-theme="dark"] .who{color:hsl(var(--h) 60% 70%)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .who{color:hsl(var(--h) 60% 70%)} }
.txt{white-space:pre-wrap}
.txt.gone{font-style:italic;color:var(--fg-2)}
.meta{float:right;display:inline-flex;align-items:center;gap:3px;margin:6px 0 -4px 10px;font-size:11px;color:var(--fg-2)}
.photo{display:block;max-width:100%;max-height:340px;margin:-2px -5px 4px;border-radius:7px;cursor:zoom-in;background:var(--surface-2);min-width:120px;min-height:80px;object-fit:cover}
.quote{display:block;margin:0 0 5px;padding:5px 9px;border-left:3px solid var(--accent);border-radius:6px;background:var(--quote);font-size:13px;cursor:pointer}
.quote b{display:block;color:var(--accent-strong);font-size:12.5px}
.quote span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg-2)}
.msg-more{position:absolute;top:2px;right:2px;display:none;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:var(--surface);color:var(--fg-2);box-shadow:0 1px 3px var(--shadow)}
.msg-more .ic{width:16px;height:16px}
.bubble:hover .msg-more{display:grid;place-items:center}
@media (hover:none){ .msg-more{display:none!important} }
.typing-b .dots{display:inline-flex;gap:4px;padding:6px 4px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--fg-2);animation:dot 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .dots i{animation:none} }
.more-old{display:table;margin:4px auto 10px}
.replybar{display:flex;align-items:center;gap:6px;padding:6px 10px 0;background:var(--surface)}
.replybar .quote{flex:1;margin:0}
.composer{display:flex;align-items:flex-end;gap:6px;padding:8px 10px;background:var(--surface)}
.inwrap{flex:1;min-width:0;display:flex;align-items:flex-end;border-radius:22px;background:var(--surface-2)}
.inwrap textarea{flex:1;min-width:0;height:42px;max-height:130px;padding:10px 6px 10px 15px;border:0;background:none;resize:none;outline:none;line-height:1.45}
.inwrap .ib{width:38px;height:42px}
.inwrap .ib[data-act="attach"] .ic{transform:rotate(-45deg)}
.send{display:grid;place-items:center;width:44px;height:44px;flex:none;border:0;border-radius:50%;background:var(--accent);color:var(--accent-ink)}
.send:disabled{opacity:.5}
.blocked-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--surface);color:var(--fg-2);font-size:14px}
.blocked-bar span{flex:1}
.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--fg-2);text-align:center;padding:20px}
.chat-empty .logo{width:64px;height:64px}
.chat-empty b{font-family:var(--font-display);font-size:28px;color:var(--fg)}

/* feuilles et calques */
.layer{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:var(--overlay)}
@media (min-width:821px){ .layer{align-items:center} }
.sheet{display:flex;flex-direction:column;width:min(520px,100%);max-height:92vh;overflow:hidden;border-radius:20px 20px 0 0;background:var(--surface);box-shadow:0 -10px 40px var(--shadow)}
@media (min-width:821px){ .sheet{border-radius:20px} }
.sheet-head{display:flex;align-items:center;gap:8px;padding:14px 10px 6px 18px}
.sheet-head h2{flex:1;margin:0;font-size:18px}
.sheet-body{display:flex;flex-direction:column;gap:12px;padding:6px 18px 18px;overflow-y:auto}
.sheet-scroll{overflow-y:auto}
.actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.menu{display:flex;flex-direction:column;padding:4px 0 10px}
.menu button{display:flex;align-items:center;gap:14px;padding:13px 20px;border:0;background:none;text-align:left;font-size:15px}
.menu button:hover{background:var(--surface-2)}
.menu .danger{color:var(--danger)}
.toast{position:fixed;left:50%;bottom:90px;z-index:40;max-width:min(420px,90vw);padding:11px 16px;border-radius:12px;background:#1b1b1f;color:#fff;font-size:14px;transform:translateX(-50%);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.prof{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.prof b{font-size:20px}
.prof span,.prof small{color:var(--fg-2)}
.dl{display:flex;flex-direction:column;margin:8px 0 0;border:1px solid var(--line);border-radius:14px}
.dl div{padding:9px 12px;border-bottom:1px solid var(--line)}
.dl div:last-child{border-bottom:0}
.dl dt{font-size:12px;color:var(--fg-2)}
.dl dd{margin:1px 0 0}
.invite-box{display:flex;flex-direction:column;gap:10px;margin:12px 16px;padding:14px;border-radius:16px;background:var(--accent-soft)}
.invite-box b{font-size:16px}
.invite-url{padding:9px 11px;border-radius:10px;background:var(--surface);font-size:13.5px;overflow-wrap:anywhere;user-select:all}
.set{display:flex;flex-direction:column;gap:12px;padding:6px 16px 30px}
.set-block{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:16px}
.set-block h2{margin:0;font-size:16px}
.set-top{display:flex;align-items:center;gap:14px}
.set-top b{display:block;font-size:18px}
.set-top span{color:var(--fg-2)}
.bd-row{display:grid;grid-template-columns:1fr 2fr;gap:8px}
.picks{display:flex;flex-direction:column;max-height:260px;overflow-y:auto;border:1px solid var(--line);border-radius:12px}
.picks .pick{padding:8px 12px}
.adm-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.adm-row:last-child{border-bottom:0}
.adm-row span{flex:1;min-width:0}
.adm-row small{display:block;color:var(--fg-2)}

/* aperçu photo avant envoi */
.ph-prev{position:fixed;inset:0;z-index:25;display:flex;flex-direction:column;background:#0d0f12;color:#fff}
.ph-prev .bar{display:flex;align-items:center;gap:8px;padding:8px 10px}
.ph-prev .bar .ib{color:#fff}
.ph-prev .stage{flex:1;min-height:0;display:grid;place-items:center;padding:8px}
.ph-prev img{max-width:100%;max-height:100%;border-radius:6px}
.ph-prev .send-row{display:flex;gap:8px;padding:10px 12px 16px;background:#16191e}
.ph-prev .send-row input{flex:1;min-width:0;padding:11px 15px;border:0;border-radius:22px;background:#2a2f37;color:#fff}
.zoom{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:rgba(0,0,0,.92)}
.zoom img{max-width:96vw;max-height:92vh}
.zoom .ib{position:absolute;top:10px;right:10px;color:#fff}

/* statuts */
.sv{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;background:var(--bgd,hsl(var(--h) 30% 10%));color:#fff}
.sv-bars{display:flex;gap:4px;padding:10px 10px 0}
.sv-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.sv-bars i b{display:block;height:100%;width:0;background:#fff}
.sv-bars i.done b{width:100%}
.sv-bars i.run b{animation:svbar linear forwards}
@keyframes svbar{to{width:100%}}
.sv-head{display:flex;align-items:center;gap:10px;padding:10px 8px 10px 14px}
.sv-head .grow{flex:1;min-width:0}
.sv-head small{display:block;color:rgba(255,255,255,.75)}
.sv-head .ib{color:#fff}
.sv-stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding:10px}
.sv-box{position:relative;width:min(460px,100%);height:100%;max-height:820px;display:grid;place-items:center;border-radius:16px;overflow:hidden;background:var(--bgc,hsl(var(--h) 62% 47%))}
.sv-box img{width:100%;height:100%;object-fit:contain}
.sv-text{padding:24px;font-size:clamp(20px,5vw,30px);font-weight:700;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere}
.sv-cap{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(transparent,rgba(0,0,0,.65));text-align:center}
.sv-nav{position:absolute;top:0;bottom:0;width:50%;z-index:3;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sv-nav.prev{left:0}.sv-nav.next{right:0}
.sv-foot{display:flex;justify-content:center;gap:10px;padding:10px 10px 16px}
.sv-foot .btn.ghost{background:rgba(255,255,255,.14);color:#fff}
.st-comp{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;background:var(--surface)}
.st-comp .stage{flex:1;min-height:0;display:grid;place-items:center;padding:12px;background:#0d0f12}
.st-box{width:min(380px,100%);aspect-ratio:9/16;max-height:100%;display:grid;place-items:center;border-radius:16px;overflow:hidden;background:var(--bgc,hsl(var(--h) 62% 47%));color:#fff}
.st-box textarea{width:100%;height:100%;padding:24px;border:0;background:none;color:#fff;font-size:24px;font-weight:700;text-align:center;resize:none;outline:none;display:flex}
.st-box textarea::placeholder{color:rgba(255,255,255,.7)}
.st-box img{width:100%;height:100%;object-fit:contain}
.st-tools{display:flex;flex-direction:column;gap:10px;padding:12px 14px 16px}
.bgs{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- version 1.1 : verrouillage, codes de sécurité ---------- */
.lock-screen{position:fixed;inset:0;z-index:60;display:flex;overflow-y:auto;padding:16px;background:var(--accent)}
.lock-card{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(380px,100%);margin:auto;padding:24px 20px;border-radius:22px;background:var(--surface);text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.18)}
.lock-card .auth-top .brand{font-size:26px}
.pad{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;width:240px;height:240px;margin:6px auto;touch-action:none;user-select:none}
.pd{position:relative;z-index:1;display:grid;place-items:center}
.pd::after{content:"";width:18px;height:18px;border-radius:50%;background:var(--line);transition:transform .12s,background .12s}
.pd.on::after{background:var(--accent);transform:scale(1.35)}
.pad-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pad-line polyline{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.fp{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:.04em}
@media (prefers-reduced-motion:reduce){ .pd::after{transition:none} }

/* ---------- Lagune ---------- */
.msg.out .bubble{color:var(--bubble-out-fg)}
.msg.out .meta{color:color-mix(in srgb,var(--bubble-out-fg) 75%,transparent)}
.msg.out .tick{stroke:color-mix(in srgb,var(--bubble-out-fg) 80%,transparent)}
.msg.out .tick.read{stroke:#ffe08a}
.msg.out .quote{background:rgba(255,255,255,.18);border-left-color:#fff}
.msg.out .quote b,.msg.out .quote span{color:inherit}
.msg.out .txt.gone{color:inherit;opacity:.8}
.bubble{border-radius:16px}
.msg.in.first .bubble{border-top-left-radius:6px}
.msg.out.first .bubble{border-top-right-radius:6px}
.story .ring{border:0;padding:2.5px;background:conic-gradient(var(--accent),#7fe6f0,var(--accent));box-shadow:0 0 10px rgb(20 184 201/.45)}
.story .ring.seen{background:rgb(20 184 201/.45);box-shadow:none}
.story .ring.empty{background:none;border:1.5px dashed var(--line);padding:1px}
.story .ring>.av{box-shadow:0 0 0 2px var(--surface)}
.av{background:var(--av-bg)}
.fab{border-radius:18px}
.brand i{color:var(--brand-2)}
.avb{display:flex;flex-direction:column;gap:10px}
.avb-top{display:flex;align-items:center;gap:14px}
.avb-top .av{width:96px;height:96px}
.avb-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.avb-st{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:12px;color:var(--fg-2)}
.avb-st .av{width:48px;height:48px}
.avb-st[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);color:var(--fg);font-weight:600}
.skin{width:32px;height:32px;padding:0;border:2px solid var(--surface);border-radius:50%;background:var(--c);box-shadow:0 0 0 1px var(--line)}
.skin[aria-pressed="true"],.sw[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--fg)}

/* ---------- Google ---------- */
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--surface);color:var(--fg);border:1px solid var(--line);text-decoration:none;font-weight:600}
.gbtn:hover{background:var(--surface-2)}
.or{display:flex;align-items:center;gap:10px;color:var(--fg-2);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.g-ok{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--accent-soft);color:var(--fg);font-size:14px;margin:0}
.g-ok svg{flex:none;margin-top:1px}
.set-block h2 svg{vertical-align:-4px;margin-right:4px}

/* ---------- appels ---------- */
.call{position:fixed;inset:0;z-index:60;background:radial-gradient(120% 90% at 50% 0%,#14b8c9 0%,#0b5e6b 45%,#081419 100%);color:#fff}
.call.has-video{background:#000}
.call-in{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 48px) 16px calc(env(safe-area-inset-bottom,0px) + 28px)}
.call-remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.call-who{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;margin-top:6vh}
.call-who h2{margin:10px 0 0;font:700 26px/1.2 "Bricolage Grotesque",Figtree,sans-serif}
.call-who p{margin:0;color:rgba(255,255,255,.82);font-size:15px}
.call-note{font-size:13px!important;background:rgba(0,0,0,.25);padding:4px 10px;border-radius:10px}
.call-av .av{width:132px;height:132px;box-shadow:0 0 0 6px rgba(255,255,255,.14)}
.call-av.pulse .av{animation:callPulse 1.6s ease-out infinite}
@keyframes callPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.35)}100%{box-shadow:0 0 0 28px rgba(255,255,255,0)}}
.call-top{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);left:16px;right:16px;display:flex;gap:10px;align-items:baseline;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.call-top b{font-size:17px}.call-top span{font-size:14px;opacity:.85}
.call-local{position:absolute;right:16px;top:calc(env(safe-area-inset-top,0px) + 56px);width:min(28vw,150px);aspect-ratio:3/4;object-fit:cover;border-radius:16px;background:#111;box-shadow:0 6px 20px rgba(0,0,0,.45);transform:scaleX(-1)}
.call:not(.has-video) .call-local{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 130px)}
.call-bar{position:relative;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:auto}
.cb{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;color:#fff;font-size:12px;padding:0;min-width:64px}
.cb svg{box-sizing:content-box;width:26px;height:26px;padding:17px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.cb.off svg{background:#fff;stroke:#0f2430}
.cb.red svg{background:#e5484d}.cb.green svg{background:#2fb36b}
.cb.down svg{transform:rotate(135deg)}
.cb.green svg{animation:callPulse 1.6s ease-out infinite}
body.in-call{overflow:hidden}
@media (min-width:900px){.call-in{max-width:none}.cb svg{padding:19px}}

/* ---------- recadrage photo ---------- */
.crop-body{display:flex;flex-direction:column;gap:12px}
.crop-stage{display:flex;justify-content:center}
.crop-stage canvas{width:min(280px,72vw);height:auto;aspect-ratio:1;border-radius:18px;touch-action:none;cursor:grab;background:#000}
.crop-stage canvas:active{cursor:grabbing}
.crop-tools{display:flex;align-items:center;gap:10px;color:var(--fg-2);font-size:20px}
.crop-tools input{flex:1;accent-color:var(--accent)}
.req{font-weight:600;color:var(--accent-strong);text-transform:none;letter-spacing:0}

/* ---------- installation, notifications ---------- */
.inst,.gban{display:flex;align-items:center;gap:12px;margin:8px 12px;padding:12px 14px;border-radius:16px;background:var(--accent-soft);color:var(--fg)}
.inst img{border-radius:12px;flex:none}
.inst>div,.gban>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.inst span,.gban span{color:var(--fg-2);font-size:13px}
.gban{background:#e6f7ee}.gban>svg{flex:none;width:22px;height:22px;stroke:#1f8a52}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .gban{background:#123326} }
:root[data-theme="dark"] .gban{background:#123326}
.gjoin{background:#2fb36b;color:#fff;display:inline-flex;gap:6px;align-items:center}.gjoin svg{width:16px;height:16px}
.steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.45}
/* ---------- appels de groupe ---------- */
.gcall .call-in{justify-content:flex-start;gap:12px;padding-top:calc(env(safe-area-inset-top,0px) + 16px)}
.g-top{display:flex;flex-direction:column;align-items:center;gap:2px}.g-top b{font:700 19px "Bricolage Grotesque",Figtree,sans-serif}.g-top span{font-size:13px;opacity:.85}
.g-grid{flex:1;width:100%;max-width:1100px;display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;min-height:0}
.g-grid.n1{grid-template-columns:minmax(0,420px);justify-content:center}
.g-grid.n2{grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.g-grid.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.g-grid.n5,.g-grid.n6{grid-template-columns:repeat(3,minmax(0,1fr))}.g-grid.n7,.g-grid.n8{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gt{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}
.gt video{width:100%;height:100%;object-fit:cover}.gt.me video{transform:scaleX(-1)}
.gt-av .av{width:clamp(56px,14vw,96px);height:clamp(56px,14vw,96px)}
.gt-name{position:absolute;left:8px;bottom:8px;padding:3px 9px;border-radius:10px;background:rgba(0,0,0,.45);font-size:13px}
.gt audio{display:none}
.g-wait{margin:0;text-align:center;opacity:.85}

/* ---------- onglet Appels ---------- */
.calls{display:flex;flex-direction:column;min-height:100%}
.cl-list{flex:1;padding:4px 0}
.cl{display:flex;align-items:center;gap:12px;padding:10px 14px;width:100%;border:0;background:none;text-align:left;color:var(--fg)}
.cl-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cl-t b{font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-t span{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--fg-2)}
.cl-t span svg{width:14px;height:14px;stroke:#2f9e66}
.cl.miss .cl-t b,.cl.miss .cl-t span{color:#d64545}.cl.miss .cl-t span svg{stroke:#d64545}
.cl .ib svg{stroke:var(--accent-strong)}
.cl.sug{padding:6px 14px}.cl.sug>svg{width:18px;height:18px;stroke:var(--accent-strong)}
.dial{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:8px 14px 12px;display:flex;flex-direction:column;gap:6px}
.dial-top{display:flex;align-items:center;gap:6px}
.dial-top input{flex:1;min-width:0;border:0;background:none;text-align:center;font:600 26px/1.3 Figtree,sans-serif;color:var(--fg);letter-spacing:.04em;padding:4px}
.dial-top input::placeholder{font-size:15px;font-weight:400;letter-spacing:0;color:var(--fg-2)}
.dial-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.dk{display:flex;flex-direction:column;align-items:center;justify-content:center;height:52px;border:0;border-radius:14px;background:none;color:var(--fg)}
.dk:active{background:var(--surface-2)}
.dk b{font:500 25px/1 Figtree,sans-serif}.dk small{font-size:10px;letter-spacing:.12em;color:var(--fg-2);min-height:12px}
.dial-go{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:center;justify-items:center;margin-top:2px}
.dgo{width:58px;height:58px;border:0;border-radius:50%;background:#2fb36b;display:flex;align-items:center;justify-content:center}
.dgo svg{width:26px;height:26px;stroke:#fff}
.dgo.vid{background:var(--surface-2)}.dgo.vid svg{stroke:var(--accent-strong)}
.dgo.paste{background:none;width:auto;height:auto;padding:8px 12px;border-radius:12px;color:var(--accent-strong);font-weight:600;font-size:14px}
@media (min-width:821px){.dk{height:46px}}
/* ---------- discussions privées ---------- */
.privbar{display:flex;align-items:center;gap:10px;margin:6px 12px;padding:10px 14px;border-radius:14px;background:var(--surface-2);font-size:14px;font-weight:600}
.privbar span{flex:1}.privbar>svg{width:18px;height:18px}
/* nom écrit seul, sans logo */
.title .brand{font-size:26px}

/* ---------- champs : on voit qu'on est en train d'écrire ---------- */
input,textarea{caret-color:var(--accent-strong)}
.search{transition:background .15s, box-shadow .15s;border:2px solid transparent}
.search:focus-within{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.search:focus-within>svg{stroke:var(--accent-strong)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.composer textarea:focus,.composer input:focus{box-shadow:none}
mark{background:#ffe08a;color:inherit;border-radius:3px;padding:0 1px}
/* ---------- contacts en listes déroulantes ---------- */
.drop{margin:8px 12px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
.drop>summary{display:flex;align-items:center;gap:10px;padding:13px 16px;font-weight:700;cursor:pointer;list-style:none}
.drop>summary::-webkit-details-marker{display:none}
.drop>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--fg-2);border-bottom:2px solid var(--fg-2);transform:rotate(45deg);transition:transform .15s}
.drop[open]>summary::after{transform:rotate(-135deg)}
.drop>summary svg{width:20px;height:20px;stroke:var(--accent-strong)}
.drop .row{padding-left:14px;padding-right:14px}
.ib-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ib-head .btn svg{width:18px;height:18px}
/* ---------- code QR ---------- */
.qrbox{width:min(260px,70vw);padding:12px;background:#fff;border-radius:18px;box-shadow:0 2px 12px var(--shadow)}
.qrbox svg{width:100%;height:auto;display:block}
.qrvid{width:min(320px,80vw);aspect-ratio:1;object-fit:cover;border-radius:18px;background:#000}
.qrnote{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:var(--surface-2);font-size:14px}

/* ---------- répertoire, filtres ---------- */
.bk{display:flex;align-items:center;gap:12px;padding:9px 16px}
.av.letter{display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-strong);font-weight:700;font-size:16px}
.chips.filt{flex-wrap:nowrap;overflow-x:auto;padding:8px 0 2px;scrollbar-width:none}
.chips.filt::-webkit-scrollbar{display:none}
.chips.filt .chip{flex:none}
#addSheet .row{padding-left:0;padding-right:0}
.ib.dotted{position:relative}.ib.dotted .badge{position:absolute;top:2px;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#ff7a59;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* ---------- Mon profil, compteur, glisser ---------- */
.chip .cnt{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-weight:700}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:4px 0 10px;border-radius:14px;background:var(--surface-2)}
.seg button{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border:0;border-radius:11px;background:none;color:var(--fg-2);font-weight:600}
.seg button svg{width:18px;height:18px}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 4px var(--shadow)}
.note{display:flex;gap:10px;align-items:flex-start;margin:0 0 8px;padding:12px 14px;border-radius:12px;background:var(--accent-soft);font-size:14px;line-height:1.45}
.note svg{flex:none;width:18px;height:18px;margin-top:1px}
.myprof .set-block{border:0;padding:0;background:none}
.opt{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}.opt span{color:var(--fg-2);line-height:1.45}
@keyframes slideL{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
@keyframes slideR{from{transform:translateX(-24px);opacity:.4}to{transform:none;opacity:1}}
#body.slide-l{animation:slideL .2s ease-out}#body.slide-r{animation:slideR .2s ease-out}
/* photos du profil (3 publiques, 3 privées) */
.ph3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ph3-add{aspect-ratio:3/4;border:1.5px dashed var(--line);border-radius:14px;background:var(--surface-2);color:var(--fg-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:inherit;font-size:14px;cursor:pointer}
.ph3-add span{font-size:28px;line-height:1}
.ph3-add:hover{border-color:var(--accent)}
.ph3-it{position:relative}
.ph3-img{display:block;width:100%;aspect-ratio:3/4;padding:0;border:0;border-radius:14px;overflow:hidden;background:var(--surface-2);cursor:zoom-in}
.ph3-img img{width:100%;height:100%;object-fit:cover;display:block}
.ph3-x{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;cursor:pointer}
.ph3-x svg{width:16px;height:16px}
.pic-big{max-width:100%;max-height:70vh;border-radius:14px}
.ph-mini{display:flex;gap:4px;margin-top:6px}
.ph-mini img{width:44px;height:58px;object-fit:cover;border-radius:8px}
/* qui voit le profil privé */
.locks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lockopt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);font:inherit;cursor:pointer;text-align:center}
.lockopt svg{width:20px;height:20px;color:var(--fg-2)}
.lockopt small{color:var(--fg-2);font-size:12px;line-height:1.25}
.lockopt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.lockopt[aria-pressed="true"] svg{color:var(--accent-strong)}
.grp-box{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.grp-box b{display:flex;align-items:center;gap:8px}
.grp-box b svg{width:18px;height:18px}
.grp-box .picks{background:var(--surface)}
/* photo de profil : aperçu avant validation */
.ph-pick{display:flex;align-items:center;gap:16px}
.ph-pick .pp-prev{flex:none;display:block}
@media (max-width:420px){.locks{grid-template-columns:1fr}.lockopt{flex-direction:row;justify-content:flex-start;gap:8px;text-align:left}}
#phBlock .avb-top{display:none}
/* messages à vue unique */
.one{display:inline-grid;place-items:center;width:22px;height:22px;border:2px dashed currentColor;border-radius:50%;font:700 12px/1 var(--font-body);flex:none}
.once-tog[aria-pressed="true"]{color:var(--accent-strong);background:var(--accent-soft)}
.once-tog[aria-pressed="true"] .one{border-style:solid}
.ph-prev .once-tog{color:#fff}
.ph-prev .once-tog[aria-pressed="true"]{color:#0d0f12;background:#fff}
.once-b{display:flex;align-items:center;gap:10px;padding:4px 2px;font:inherit;color:inherit;text-align:left;min-width:180px}
.once-b>span:last-child{display:flex;flex-direction:column;font-weight:600}
.once-b small{font-weight:400;opacity:.75;font-size:12px}
.once-b.go{border:0;background:none;cursor:pointer}
.once-b.go .one{color:var(--accent-strong);border-style:solid}
.once-b.done{opacity:.65}
.once-view{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;background:#0d0f12;color:#fff;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.once-view .bar{display:flex;align-items:center;gap:10px;padding:8px 10px}
.once-view .bar .ib{color:#fff}
.once-view .bar small{margin-left:auto;opacity:.7;font-size:12px}
.once-view .stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:12px}
.once-view img{max-width:100%;max-height:75vh;border-radius:8px;pointer-events:none}
.once-txt{max-width:560px;font-size:18px;line-height:1.5;white-space:pre-wrap;text-align:center}
/* disponibilité : hors ligne (blanc), occupé (rouge), en ligne (vert) */
.dot-on.busy{background:#e5484d}
.chat-id small.busy{color:#e5484d;font-weight:600}
.avail{display:flex;gap:6px}
.av-opt{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 6px;border:0;border-radius:10px;background:none;color:var(--fg-2);font:inherit;font-size:11px;cursor:pointer;min-width:52px}
.av-opt i{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);box-sizing:border-box}
.av-opt.off i{background:#fff;border-color:#9aa5ad}
.av-opt.busy i{background:#e5484d;border-color:#e5484d}
.av-opt.on i{background:#2fbf5a;border-color:#2fbf5a}
.av-opt[aria-checked="true"]{background:var(--surface-2);color:var(--fg);font-weight:700}
.av-opt[aria-checked="true"] i{box-shadow:0 0 0 3px var(--accent-soft)}
/* messages vocaux */
.voice{display:flex;align-items:center;gap:8px;min-width:220px}
.voice>svg{width:20px;height:20px;flex:none;opacity:.8}
.voice audio{height:36px;max-width:230px;flex:1;min-width:0}
.voice small{opacity:.7;font-size:12px}
.recbar{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surface)}
.rec-dot{width:12px;height:12px;border-radius:50%;background:#e5484d;animation:recblink 1s infinite}
@keyframes recblink{50%{opacity:.25}}
.rec-t{font-variant-numeric:tabular-nums;font-weight:700}
.once-aud{display:flex;align-items:center;gap:10px}
.once-aud svg{width:28px;height:28px}
/* filigrane sur les contenus protégés */
.wmark{position:absolute;inset:0;pointer-events:none;z-index:2;background-repeat:repeat}
.once-view{isolation:isolate}
.sv-box{position:relative}
/* traduction */
.trl-txt{display:block;white-space:pre-wrap;overflow-wrap:anywhere}
.trl{display:flex;align-items:center;gap:6px;margin-top:4px;padding-top:4px;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);font-size:12px;opacity:.8}
.trl svg{width:14px;height:14px}
.trl .linkb{font-size:12px;color:inherit;text-decoration:underline}
.tr-tog{display:flex;align-items:center;gap:3px;width:auto;padding:0 8px;border-radius:20px;flex:none;align-self:center;font:700 12px/1 var(--font-body);color:var(--fg-2)}
.tr-tog svg{width:18px;height:18px}
.tr-tog[aria-pressed="true"]{color:var(--accent-strong);background:var(--accent-soft)}
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.lang-opt{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg);font:inherit;font-size:14px;cursor:pointer;text-align:left}
.lang-opt small{color:var(--fg-2);font-size:11px;font-weight:700}
.lang-opt:hover{border-color:var(--accent)}
.lang-opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);font-weight:700}
.tr-tog i{font-style:normal;opacity:.7}
.lang-opt.none{width:100%}
.tr-seg button{flex-direction:column;gap:2px;line-height:1.2}.tr-seg small{font-weight:500;font-size:12px;color:var(--fg-2)}
/* fenêtre des langues : haut figé, liste qui défile */
.tr-body{overflow:hidden;min-height:0;flex:1;padding-bottom:0}
.tr-fixed{display:flex;flex-direction:column;gap:10px}
.tr-hint{display:flex;align-items:flex-start;gap:12px}
.tr-hint .hint{flex:1;min-width:0;margin:0}
.tr-hint .btn{flex:none}
.tr-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-bottom:18px;margin:0 -4px;padding-left:4px;padding-right:4px}
/* traduction reçue par le contact, sous mon message */
.tr-recv{display:flex;flex-direction:column;gap:2px;margin-top:6px;padding:6px 8px;border-radius:10px;background:color-mix(in srgb,currentColor 10%,transparent);font-size:13px}
.tr-recv small{display:flex;align-items:center;gap:4px;opacity:.8;font-size:11px}
.tr-recv small svg{width:12px;height:12px}
.tr-recv .linkb{align-self:flex-start;font-size:12px;color:inherit;text-decoration:underline;margin-top:2px}
.fix-box{padding:10px 12px;border-radius:12px;background:var(--surface-2)}
.fix-box small{color:var(--fg-2);font-size:12px}
.fix-box p{margin:2px 0 0;white-space:pre-wrap}
.trl{flex-wrap:wrap;row-gap:2px}.trl .linkb{white-space:nowrap}
.tr-hide .linkb{display:flex;align-items:center;gap:6px;text-decoration:none;font-weight:600}
.tr-hide svg{width:16px;height:16px}
.msg.in .tr-recv{background:var(--surface-2);color:var(--fg)}
.pick.learn{padding:10px 12px;border-radius:12px;background:var(--accent-soft)}
.tr-none{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tr-none .lang-opt span{display:flex;flex-direction:column;gap:1px}
.tr-none .lang-opt span small{font-weight:500;color:var(--fg-2);font-size:11px;text-transform:none}
/* contenus privés : pas de sélection ni d'enregistrement d'image */
.nocopy,.nocopy *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.nocopy .ph3-img img,.pic-big,.sv-box img{pointer-events:none;-webkit-user-drag:none}
.nocopy img{-webkit-user-drag:none}
.sheet-body .nocopy{position:relative}
.nocopy input,.nocopy textarea{-webkit-user-select:text;user-select:text}
.sheet-body.nocopy .pic-big{pointer-events:none}
/* logo Tam-Tam (turquoise) */
.brand-h{margin:0;line-height:0}
.brand-logo{display:block;height:40px;width:auto;-webkit-user-drag:none;user-select:none}
.auth-top .brand-logo{height:70px}
.lock-card .auth-top .brand-logo{height:60px}
.brand-logo.empty{height:120px;opacity:.9;margin-bottom:6px}
.cg-tools{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cg-all{background:var(--surface);border-radius:10px;padding:6px 10px}
.call-local.rear{transform:none}
/* Logo centré dans l'en-tête de la liste des discussions */
.title{position:relative}
.title .brand-h{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

/* ---------- appareil photo et vidéo intégré (plein écran) ---------- */
body.in-cam{overflow:hidden}
.cam,.edit{position:fixed;inset:0;z-index:60;background:#000;color:#fff;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.cam-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.cam-v.mirror,.ed-vid.mirror{transform:scaleX(-1)}
.cam-flash{position:absolute;inset:0;background:#fff;opacity:.85;pointer-events:none}
.cam-top,.ed-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 10px) max(12px,env(safe-area-inset-right,0px)) 10px max(12px,env(safe-area-inset-left,0px));background:linear-gradient(rgba(0,0,0,.55),transparent);z-index:2}
.cib{display:inline-grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:rgba(0,0,0,.38);color:#fff;cursor:pointer;flex:none}
.cib svg{width:24px;height:24px}
.cib.sel{background:#14B8C9}
.cib.ok{background:#14B8C9}
.cib[hidden]{display:none}
.cam-rec{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:20px;background:rgba(0,0,0,.45);font-variant-numeric:tabular-nums}
.cam-rec i{width:10px;height:10px;border-radius:50%;background:#ff3b30;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.cam-bot{position:absolute;left:0;right:0;bottom:0;padding:18px max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 14px) max(16px,env(safe-area-inset-left,0px));background:linear-gradient(transparent,rgba(0,0,0,.6));display:flex;flex-direction:column;gap:12px;z-index:2}
.cam-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.cam-row>.cib{justify-self:start}
.cam-right{justify-self:end;display:flex;gap:10px}
.cam-shut{width:76px;height:76px;border-radius:50%;border:5px solid #fff;background:transparent;display:grid;place-items:center;cursor:pointer;padding:0}
.cam-shut span{width:58px;height:58px;border-radius:50%;background:#fff;transition:all .15s}
.cam-shut.vid span{background:#ff3b30}
.cam-shut.vid.on span{width:30px;height:30px;border-radius:8px}
.cam-modes{display:flex;justify-content:center;gap:10px}
.cam-modes[hidden]{display:none}
.cam-modes button{border:0;background:transparent;color:rgba(255,255,255,.75);font:inherit;font-weight:600;padding:6px 14px;border-radius:16px;cursor:pointer}
.cam-modes button[aria-pressed="true"]{background:rgba(255,255,255,.18);color:#fff}

/* ---------- retouche avant envoi ---------- */
.edit{display:flex;flex-direction:column}
.ed-top{position:relative;background:#000}
.ed-to{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.ed-tools{display:flex;gap:6px}
.ed-tools .cib{width:40px;height:40px}
.ed-tools .cib svg{width:21px;height:21px}
.ed-stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;overflow:hidden}
.ed-cv{max-width:100%;max-height:100%;display:block}
.ed-vid{width:100%;height:100%;object-fit:contain;background:#000}
.ed-crop{position:absolute}
.ed-crop[hidden]{display:none}
.ed-box{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.55);cursor:move;touch-action:none;background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);background-size:33.33% 33.33%;background-position:-1px -1px}
.ed-box i{position:absolute;width:26px;height:26px;border:4px solid #fff;touch-action:none}
.ed-box i[data-h="nw"]{left:-6px;top:-6px;border-right:0;border-bottom:0;cursor:nwse-resize}
.ed-box i[data-h="ne"]{right:-6px;top:-6px;border-left:0;border-bottom:0;cursor:nesw-resize}
.ed-box i[data-h="sw"]{left:-6px;bottom:-6px;border-right:0;border-top:0;cursor:nesw-resize}
.ed-box i[data-h="se"]{right:-6px;bottom:-6px;border-left:0;border-top:0;cursor:nwse-resize}
.ed-ratios{display:flex;justify-content:center;gap:8px;padding:12px 12px calc(env(safe-area-inset-bottom,0px) + 14px);flex-wrap:wrap}
.ed-ratios button{border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font:inherit;padding:7px 14px;border-radius:16px;cursor:pointer}
.ed-ratios button[aria-pressed="true"]{background:#14B8C9;border-color:#14B8C9}
.ed-filts{display:flex;gap:10px;overflow-x:auto;padding:10px 12px;scrollbar-width:none}
.ed-filts button{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent;color:#fff;font:inherit;font-size:12px;cursor:pointer;padding:0}
.ed-filts img{width:62px;height:62px;object-fit:cover;border-radius:10px;border:2px solid transparent;background:#222}
.ed-filts button[aria-selected="true"] img{border-color:#14B8C9}
.ed-send{display:flex;align-items:center;gap:8px;padding:10px max(12px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 12px) max(12px,env(safe-area-inset-left,0px));background:#000}
.ed-send input{flex:1;min-width:0;height:46px;border-radius:23px;border:0;padding:0 16px;background:#1d2226;color:#fff;font:inherit;font-size:16px}
.ed-go{width:50px;height:50px;border-radius:50%;border:0;background:#14B8C9;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.ed-go svg{width:22px;height:22px}
.ed-go.busy{opacity:.6}
.ed-send .once-tog[aria-pressed="true"]{background:#14B8C9}
.vidb{position:relative}
.vidb video.vid{display:block;max-width:100%;width:260px;max-height:360px;border-radius:10px;background:#000}
.vid-d{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.55);color:#fff;padding:1px 6px;border-radius:8px;font-size:12px}
.once-view video{max-width:100%;max-height:100%}
.ed-send .once-tog{color:#fff}
.cam-tr{display:flex;gap:8px}
.cib.hd{font:700 13px/1 system-ui,sans-serif;letter-spacing:.5px}
.ed-retake{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;border-radius:20px;background:rgba(255,255,255,.16);color:#fff;font:inherit;font-weight:600;font-size:14px;cursor:pointer;flex:none;white-space:nowrap}
.ed-retake svg{width:18px;height:18px}
@media (max-width:420px){.ed-to{display:none}}

/* ---------- écran de verrouillage : noir, logo turquoise ---------- */
.lock-screen.dark{background:#000;color:#e8eef0}
.lock-card.dark{background:transparent;box-shadow:none;border:0;color:#e8eef0;gap:18px;justify-content:center;min-height:100%}
.lock-card.dark .brand-logo.lock-logo{height:96px}
.lk-hint{margin:0;color:#b9c6ca;font-size:15px}
.lock-card.dark .err{color:#ff8a80}
.lk-links{display:flex;flex-direction:column;gap:6px;align-items:center}
.lock-card.dark .linkb{color:#5fd4e0}
.lk-spin{width:34px;height:34px;border-radius:50%;border:3px solid #1d2a2e;border-top-color:#14B8C9;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lk-pass{display:flex;flex-direction:column;gap:12px;width:min(320px,100%);align-items:stretch}
.lk-pass input{height:48px;border-radius:12px;border:1px solid #2a3236;background:#0d1417;color:#fff;padding:0 14px;font:inherit;font-size:16px}

/* ---------- émoticônes ---------- */
.emo-btn svg{width:22px;height:22px}
.emo-panel{position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);z-index:70;max-width:420px;height:min(320px,46vh);display:flex;flex-direction:column;border-radius:16px;background:var(--surface);color:var(--fg);box-shadow:0 10px 34px rgba(0,0,0,.28);border:1px solid var(--line);overflow:hidden}
.edit .emo-panel,.st-comp .emo-panel{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 78px);left:8px;right:8px;margin:0 auto;background:#151a1d;color:#fff;border-color:#2a3236}
#compose{position:relative}
.emo-tabs{display:flex;gap:2px;padding:6px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;flex:none}
.emo-tabs button{flex:none;width:36px;height:34px;border:0;border-radius:10px;background:none;font-size:19px;cursor:pointer;color:inherit;display:grid;place-items:center}
.emo-tabs button[aria-pressed="true"]{background:var(--accent-soft)}
.edit .emo-tabs button[aria-pressed="true"],.st-comp .emo-tabs button[aria-pressed="true"]{background:#24363b}
.emo-tabs .emo-x{margin-left:auto}
.emo-tabs .emo-x svg{width:18px;height:18px}
.emo-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:2px;padding:6px;align-content:start}
.emo-grid button{height:42px;border:0;background:none;font-size:26px;cursor:pointer;border-radius:10px;line-height:1}
.emo-grid button:active{background:var(--surface-2)}
.emo-grid .hint{grid-column:1/-1;padding:10px}

/* ---------- nouveau statut ---------- */
.st-comp{background:#0b0f11;color:#fff}
.st-head{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 8px) max(10px,env(safe-area-inset-right,0px)) 8px max(10px,env(safe-area-inset-left,0px))}
.st-head .ib{color:#fff}
.st-aud{flex:1;max-width:280px;margin:0 auto;background:#1b2327}
.st-aud button{color:#a9b6ba}
.st-aud button[aria-pressed="true"]{background:#14B8C9;color:#fff;box-shadow:none}
.st-note{margin:0;padding:0 16px 6px;text-align:center;font-size:13px;color:#93a3a8}
.st-grp-row{display:flex;align-items:center;gap:10px;margin:0 12px 8px;padding:9px 12px;border:1px solid #24363b;border-radius:14px;background:#121a1d;color:#fff;font:inherit;text-align:left;cursor:pointer}
.st-grp-row span{flex:1;display:flex;flex-direction:column}
.st-grp-row small{color:#93a3a8}
.st-grp-row svg{width:20px;height:20px;flex:none}
.st-comp .stage{flex:1;min-height:0;display:grid;place-items:center;padding:4px 12px;background:none}
.st-box{position:relative;height:100%;width:auto;max-width:100%;aspect-ratio:9/16}
.st-box textarea{font-family:var(--stf,inherit);font-size:26px}
.st-box.media{background:#000}
.st-box video{width:100%;height:100%;object-fit:contain}
.st-box video.mirror{transform:scaleX(-1)}
.st-rm{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;cursor:pointer}
.st-rm svg{width:18px;height:18px}
.st-cap{position:absolute;left:10px;right:10px;bottom:10px;height:44px;border:0;border-radius:22px;padding:0 16px;background:rgba(0,0,0,.55);color:#fff;font-family:var(--stf,inherit);font-size:16px}
.st-cap::placeholder{color:rgba(255,255,255,.75)}
.st-mus{position:absolute;top:10px;left:10px;right:56px;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:16px;background:rgba(0,0,0,.5);font-size:13px}
.st-mus span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-mus button{border:0;background:none;color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.st-mus button svg{width:16px;height:16px}
.st-bgs{justify-content:center;padding:8px 12px 0}
.st-bgs .sw{border-color:#0b0f11;box-shadow:0 0 0 1px #2a3236}
.st-bgs .sw[aria-pressed="true"]{box-shadow:0 0 0 2px #fff}
.st-fonts{display:flex;gap:8px;overflow-x:auto;padding:8px 12px 0;scrollbar-width:none}
.st-fonts button{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:72px;padding:6px 8px;border:1px solid #24363b;border-radius:12px;background:#121a1d;color:#fff;font-size:22px;cursor:pointer}
.st-fonts button small{font:500 11px/1.2 system-ui,sans-serif;color:#a9b6ba}
.st-fonts button[aria-pressed="true"]{border-color:#14B8C9;background:#0f2a2f}
.st-comp .st-tools{display:flex;flex-direction:row;justify-content:space-between;gap:2px;padding:10px max(8px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 10px) max(8px,env(safe-area-inset-left,0px));overflow-x:auto;scrollbar-width:none}
.st-tool{flex:1;min-width:44px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;border:0;border-radius:12px;background:none;color:#cfd9dc;font:inherit;font-size:11.5px;cursor:pointer}
.st-tool svg{width:22px;height:22px}
.st-tool .aa{font-size:19px;line-height:22px}
.st-tool .aa.serif{font-family:Georgia,serif;font-style:italic}
.st-tool .note{font-size:22px;line-height:22px}
.st-tool.on{color:#fff;background:#14363c}
.st-tool.emo span{display:none}
.st-grp-panel{position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.6);display:flex;align-items:flex-end}
.st-grp-card{width:100%;max-height:82%;overflow-y:auto;padding:14px 12px calc(env(safe-area-inset-bottom,0px) + 14px);border-radius:20px 20px 0 0;background:var(--surface);color:var(--fg)}
.st-grp-card .grp-box{border:0;background:none;padding:4px}
.cg-tools .btn{margin-left:6px}
.sv-mus{position:absolute;top:10px;left:10px;padding:5px 10px;border-radius:14px;background:rgba(0,0,0,.45);color:#fff;font-size:13px}
.sv-box video{width:100%;height:100%;object-fit:contain;background:#000}
.sv-box video.mirror{transform:scaleX(-1)}
.lock-card.dark .pad{background:transparent;box-shadow:none;border:0}
.lock-card.dark .pad .pd{background:transparent}
.lock-card.dark .pd::after{width:20px;height:20px;background:#14B8C9;box-shadow:0 0 0 6px rgba(20,184,201,.18)}
.lock-card.dark .pd.on::after{background:#7fe6f0;box-shadow:0 0 0 8px rgba(20,184,201,.35)}
.lock-card.dark .pad-line polyline{stroke:#14B8C9;opacity:.9}

/* ---------- Souvenirs ---------- */
.mem{padding:8px 12px 90px;display:flex;flex-direction:column;gap:10px}
.mem-filts{padding:2px 0}
.mem-legend{margin:0}
.mem-today{display:flex;gap:12px;align-items:center;padding:12px;border-radius:16px;background:var(--accent-soft)}
.mem-today-img{flex:none;width:76px;height:76px;border-radius:12px;background:var(--surface-2) center/cover no-repeat;display:grid;place-items:center;font-size:34px;overflow:hidden}
.mem-today-img video{width:100%;height:100%;object-fit:cover}
.mem-today-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.mem-today-t span{color:var(--fg-2);font-size:13.5px}
.mem-today-a{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.mem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mem-grid.small{grid-template-columns:repeat(4,1fr);gap:4px}
.mem-tile{position:relative;aspect-ratio:3/4;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--surface-2);cursor:pointer}
.mem-th{position:absolute;inset:0;background:center/cover no-repeat;display:grid;place-items:center;font-size:22px}
.mem-th video{width:100%;height:100%;object-fit:cover}
.mem-play{position:absolute;left:6px;top:6px;padding:2px 7px;border-radius:10px;background:rgba(0,0,0,.55);color:#fff;font-size:11px}
.mem-b{position:absolute;left:6px;bottom:6px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:12px;background:rgba(0,0,0,.6);color:#fff;font-size:11.5px;font-weight:600}
.mem-b svg{width:12px;height:12px}
.mem-add{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mem-add button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 6px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);color:var(--fg);font:inherit;font-weight:600;cursor:pointer}
.mem-add svg{width:26px;height:26px;color:var(--accent-strong)}
.mem-prev{display:grid;place-items:center;max-height:38vh;border-radius:14px;overflow:hidden;background:#000}
.mem-prev img,.mem-prev video{max-width:100%;max-height:38vh;object-fit:contain}
.mem-prev video.mirror{transform:scaleX(-1)}
.mem-capw{display:flex;align-items:center;gap:4px;position:relative}
.mem-capw input{flex:1}
.mem-aud button{font-size:13px;padding:7px 6px}
.mem-aud svg{width:15px;height:15px}
.mem-view{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;background:#000;color:#fff}
.mv-top{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 8px) 10px 8px}
.mv-top .ib{color:#fff}
.mv-top .grow{display:flex;flex-direction:column}
.mv-top small{display:inline-flex;align-items:center;gap:4px;color:#aab}
.mv-top small svg{width:13px;height:13px}
.mv-stage{flex:1;min-height:0;display:grid;place-items:center}
.mv-stage img,.mv-stage video{max-width:100%;max-height:100%;object-fit:contain}
.mv-cap{margin:0;padding:10px 16px;text-align:center}
.mv-foot{display:flex;justify-content:center;gap:10px;padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 14px)}
.mv-foot .btn.ghost{color:#fff;border-color:#444}
#profMem:empty{display:none}
#profMem{display:flex;flex-direction:column;gap:6px}

.sv.media{--bgd:#000}
.sv.media .sv-box{--bgc:#000}
.st-grp-row{position:relative}
.st-grp-row .need{position:absolute;top:10px;left:30px;width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:needPulse 1.2s ease-out infinite}
@keyframes needPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.7);opacity:1}70%{box-shadow:0 0 0 9px rgba(34,197,94,0);opacity:.55}100%{box-shadow:0 0 0 0 rgba(34,197,94,0);opacity:1}}
@media (min-width:821px){ .lock-card.dark .pad{width:120px;height:120px} .lock-card.dark .pd::after{width:10px;height:10px;box-shadow:0 0 0 3px rgba(20,184,201,.18)} .lock-card.dark .pd.on::after{box-shadow:0 0 0 4px rgba(20,184,201,.35)} }

/* statuts : couleurs plus claires, curseur bien visible, groupe privé en pastille centrée */
.st-box textarea{caret-color:var(--stc,#fff)}
.st-box textarea:focus::placeholder{color:transparent}
.st-box textarea:focus{box-shadow:inset 0 0 0 2px rgba(255,255,255,.45);border-radius:16px}
.st-grp-row{align-self:center;width:auto;max-width:calc(100% - 24px);margin:2px auto 8px;padding:7px 14px 7px 12px;border-radius:22px}
.st-grp-row span{flex:0 1 auto}
.st-grp-row .need{top:4px;left:26px}

/* inscription : prénom / nom côte à côte, pseudo avec @ */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.at-in{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.at-in span{padding:0 4px 0 12px;color:var(--fg-2);font-weight:600}
.at-in input{flex:1;min-width:0;border:0 !important;box-shadow:none !important;padding-left:2px}
/* réglages */
.ph-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.me-first{font-size:17px;color:var(--accent-strong)}
.set-mail{text-align:center;margin:6px 0 18px}
/* fenêtre Réglages / Mon profil sur ordinateur */
#pmodal .pm-scrim{position:fixed;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;background:var(--overlay);padding:24px}
#pmodal .pm-card{width:min(620px,100%);max-height:min(88vh,980px);display:flex;flex-direction:column;border-radius:22px;background:var(--surface);box-shadow:0 24px 60px rgba(0,0,0,.25);overflow:hidden}
#pmodal .pm-head{display:flex;align-items:center;gap:12px;padding:16px 18px 10px;border-bottom:1px solid var(--line)}
#pmodal .pm-head h2{margin:0;font-size:22px}
#pmodal .pm-body{flex:1;min-height:0;overflow-y:auto;padding:6px 6px 10px}

/* vidéos longues : préparation et parties */
.vprep{position:fixed;inset:0;z-index:80;background:rgb(0 0 0/.72);display:grid;place-items:center;padding:16px}
.vp-card{background:var(--surface);color:var(--fg);border-radius:18px;max-width:380px;width:100%;padding:20px;display:grid;gap:10px;box-shadow:0 20px 50px rgb(0 0 0/.35)}
.vp-card h2{margin:0;font-size:1.15rem}.vp-card p{margin:0;line-height:1.45}
.vp-act{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
.vp-bar{height:8px;border-radius:99px;background:rgb(128 128 128/.25);overflow:hidden}.vp-bar i{display:block;height:100%;background:var(--accent);transition:width .2s}
.vp-t{font-variant-numeric:tabular-nums;color:var(--fg);opacity:.7}
.ed-parts{position:absolute;left:0;right:0;top:12px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:0 12px;z-index:3}
.ed-parts button{border:0;border-radius:99px;padding:6px 12px;background:rgb(0 0 0/.55);color:#fff;font:inherit;font-size:.85rem;display:flex;gap:6px;align-items:baseline;cursor:pointer}
.ed-parts button small{opacity:.75}.ed-parts button[aria-pressed=true]{background:var(--accent)}
.st-parts{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:rgb(0 0 0/.6);color:#fff;border-radius:99px;padding:5px 12px;font-size:.85rem;white-space:nowrap;z-index:2}

/* choix du pseudo (comptes existants) */
.hpick{position:fixed;inset:0;z-index:55;background:rgb(0 0 0/.6);display:grid;place-items:center;padding:16px;overflow-y:auto}
.hp-card{background:var(--surface);color:var(--fg);border-radius:20px;max-width:400px;width:100%;padding:22px;display:grid;gap:10px;box-shadow:0 20px 50px rgb(0 0 0/.35)}
.hp-card h2{margin:0;font-size:1.2rem}.hp-card p{margin:0;line-height:1.45}.hp-logo{width:44px;height:44px;justify-self:center}
.hp-ideas{display:flex;flex-wrap:wrap;gap:8px}.hp-ideas button{border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:99px;padding:7px 12px;font:inherit;cursor:pointer}
.hp-ideas button:hover{border-color:var(--accent)}.hp-card .hint.bad{color:var(--danger)}

/* statut en pause */
.sv-paused{display:none;position:absolute;top:96px;left:50%;transform:translateX(-50%);background:rgb(0 0 0/.55);color:#fff;border-radius:99px;padding:4px 12px;font-size:.85rem;z-index:3;pointer-events:none}
.sv.paused .sv-paused{display:block}
.sv .sv-pp,.sv .sv-pp:hover,.sv .sv-pp:focus{background:rgb(255 255 255/.14);color:#fff}.sv-pp svg{width:20px;height:20px}
.sv-stage{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* zone d'écriture : sur ordinateur la langue reste à gauche ; sur téléphone le texte prend toute la largeur, les icônes passent dessous */
.inwrap .tr-tog{order:-2;height:30px;margin:6px 0 6px 6px}
@media (max-width:820px){
  .inwrap{flex-wrap:wrap;align-items:center;border-radius:20px;padding:0 4px 2px}
  .inwrap textarea{order:-3;flex:1 0 100%;height:46px;padding:12px 10px 4px 12px;font-size:16px}
  .inwrap .ib{height:38px;width:40px}
  .inwrap .tr-tog{order:5;margin:0 4px 0 auto;width:auto}
}

/* options des messages */
.react-bar{display:flex;gap:4px;justify-content:space-between;padding:14px 14px 6px}
.react-bar button{flex:1;font-size:26px;line-height:1;padding:8px 0;border:0;border-radius:14px;background:var(--surface-2);cursor:pointer}
.react-bar button[aria-pressed="true"]{background:var(--accent-soft);outline:2px solid var(--accent)}
.react-bar .more{display:grid;place-items:center;color:var(--fg-2)}.react-bar .more svg{width:20px;height:20px}
.react-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.react-grid button{font-size:24px;border:0;background:none;padding:6px 0;border-radius:10px;cursor:pointer}.react-grid button:hover{background:var(--surface-2)}
.msg{position:relative}
.reacts{display:inline-flex;gap:2px;align-items:center;margin:-6px 10px 4px;padding:2px 7px;border:1px solid var(--line);border-radius:99px;background:var(--surface);font-size:15px;line-height:1.3;cursor:pointer;position:relative;z-index:1;box-shadow:0 1px 2px var(--shadow)}
.msg.out .reacts{align-self:flex-end}.reacts small{font-size:11px;color:var(--fg-2);margin-left:1px}.reacts.mine{border-color:var(--accent)}
.msg.out{flex-direction:column;align-items:flex-end}.msg.in{flex-direction:column;align-items:flex-start}
.fwd{display:flex;align-items:center;gap:4px;font-size:12px;font-style:italic;color:var(--fg-2);margin-bottom:2px}.fwd svg{width:14px;height:14px}
.msg.out .fwd{color:inherit;opacity:.8}
.locb{display:flex;align-items:center;gap:10px;min-width:220px;padding:10px 12px;margin:2px 0 4px;border-radius:12px;background:rgb(0 0 0/.08);color:inherit;text-decoration:none}
.locb b{display:block}.locb small{display:block;opacity:.8;font-size:12px}.loc-pin{font-size:28px;line-height:1}
.pin-ic{display:inline-grid;place-items:center;width:22px;font-size:17px}
.pinbar{display:flex;align-items:center;gap:6px;padding:4px 6px 4px 12px;background:var(--surface);border-bottom:1px solid var(--line)}
.pin-go{flex:1;min-width:0;display:flex;gap:10px;align-items:center;border:0;background:none;color:var(--fg);text-align:left;font:inherit;cursor:pointer;padding:4px 0}
.pin-go span{min-width:0;display:flex;flex-direction:column}.pin-go b{font-size:12px;color:var(--accent-strong)}.pin-go small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg-2)}
.msg.flash .bubble{animation:msgflash 1.5s ease}@keyframes msgflash{0%,60%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:none}}
.msg:hover .msg-more{display:grid;place-items:center}
@media (hover:hover){ .msg-more{width:26px;height:26px} }
/* liste des discussions */
.chat-row{position:relative}.row-flags{display:flex;gap:6px;align-items:center;margin-left:auto;flex:none}.pin-f{font-size:13px}
.badge.dot{min-width:12px;width:12px;height:12px;padding:0}
.row-more{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:none;width:26px;height:26px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px var(--shadow);place-items:center;color:var(--fg-2)}
.row-more svg{width:16px;height:16px}
@media (hover:hover){ .chat-row:hover .row-more{display:grid} .chat-row:hover .row-time{visibility:hidden} }
.selmark{position:absolute;left:46px;bottom:8px;z-index:1;width:22px;height:22px;border-radius:50%;border:2px solid var(--surface);background:var(--line);display:grid;place-items:center;font-weight:800;font-size:13px;color:var(--accent-ink)}
.chat-row.sel .selmark{background:var(--accent);border-color:var(--accent)}.chat-row.sel{background:var(--accent-soft)}
.selbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--surface);border-bottom:1px solid var(--line)}
.selbar .btn.danger{color:var(--danger)}
.fwd-row{cursor:pointer}.fwd-row input{margin-left:auto;width:20px;height:20px;accent-color:var(--accent)}
.fp-box{margin:6px 0;padding:8px 12px;border:1px solid var(--line);border-radius:12px}.fp-box summary{display:flex;gap:6px;align-items:center;cursor:pointer;font-size:14px;color:var(--fg-2)}.fp-box summary svg{width:16px;height:16px}
.fp-box[open] .fp{display:block;margin-top:6px;letter-spacing:1px}
.selbar b{white-space:nowrap;font-size:14px}.selbar .btn{white-space:nowrap;padding:0 10px}.sel-del{color:var(--danger)}
.fwd .ic,.fwd svg{width:14px;height:14px}

/* Archives */
.title{position:relative}
.arch-chip{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:5px;z-index:1}
.arch-chip .ic{width:16px;height:16px}.arch-chip small{color:var(--fg-2);font-weight:600}
.arch-head{display:flex;align-items:center;gap:6px;padding:4px 10px}.arch-head b{display:flex;align-items:center;gap:6px}.arch-head .ic{width:18px;height:18px}
.arch-note{padding:0 16px 6px;margin:0}
@media (max-width:420px){ .arch-chip{left:8px;padding:0 9px;font-size:13px;gap:4px;min-height:30px} .arch-chip .cnt{min-width:18px;height:18px;font-size:11px} }
@media (max-width:350px){ .arch-chip{font-size:0;gap:2px} .arch-chip .cnt,.arch-chip small{font-size:11px} }

/* les fenêtres avec formulaire défilent ; le bouton du bas reste visible */
.sheet>form{display:flex;flex-direction:column;flex:1;min-height:0}
.sheet-body>.actions:last-child{position:sticky;bottom:-18px;margin:0 -18px -18px;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);z-index:2}
/* groupes */
.av.grp.ph{padding:0;overflow:hidden;background:var(--surface-2)}.av.grp.ph img{width:100%;height:100%;object-fit:cover}
.grp-ph{position:relative;display:inline-block}.grp-ph-b{position:absolute;right:-4px;bottom:-4px;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--accent-ink);box-shadow:0 2px 6px var(--shadow)}
.grp-ren{font-size:18px;color:var(--accent-strong);padding:0 4px}
.grp-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:8px}
.ga{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);color:var(--fg);font:inherit;font-size:12.5px;cursor:pointer}
.ga .ic,.ga svg{width:22px;height:22px;color:var(--accent-strong)}
.grp-set{border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:grid;gap:8px}.grp-set summary{display:flex;gap:8px;align-items:center;font-weight:600;cursor:pointer}.grp-set summary svg{width:18px;height:18px}
.grp-set[open]{display:flex;flex-direction:column;gap:8px}.grp-set .seg button{font-size:13px}
.role-b{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent-strong)}.role-b.own{background:var(--notice);color:var(--notice-fg)}
.btn.ghost.danger,.btn.danger.ghost{background:transparent;color:var(--danger);border:1px solid var(--danger)}
/* documents */
.docb{display:flex;align-items:center;gap:10px;min-width:220px;max-width:100%;padding:8px 10px;margin:2px 0 4px;border:0;border-radius:12px;background:rgb(0 0 0/.08);color:inherit;font:inherit;text-align:left;cursor:pointer}
.doc-ic{flex:none;display:grid;place-items:center;width:42px;height:48px;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:11px}
.doc-t{min-width:0;display:flex;flex-direction:column}.doc-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.doc-t small{opacity:.8;font-size:12px}
.txt a,.trl-txt a{color:inherit;text-decoration:underline;word-break:break-all}
/* médias */
.mg-tabs{padding:0 14px 8px;overflow-x:auto;flex-wrap:nowrap}.mg-tabs .chip{flex:none}.mg-tabs small{opacity:.7}
.mg-body{min-height:40vh}.mg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:3px;padding:0 3px 12px}
.mg-ph{aspect-ratio:1;max-width:100%;border:0;padding:0;background:var(--surface-2);overflow:hidden;cursor:pointer}.mg-ph img{width:100%;height:100%;object-fit:cover;display:block}
.mg-ic{font-size:22px;width:40px;text-align:center}.mg-link{text-decoration:none;color:inherit}.mg-loc{padding:6px 16px}
.mg-play{display:grid;place-items:center}.mg-play video{max-width:100%;max-height:85vh}.mg-play audio{width:min(420px,90%)}
/* souvenirs : dossier privé, amis Tam-Tam, code */
.mem-vault{position:relative;aspect-ratio:3/4;max-width:100%;border:0;border-radius:12px;background:var(--accent);color:#0b1214;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;padding:8px;box-shadow:0 2px 6px var(--shadow)}
.mem-vault .mv-logo{width:72%;line-height:0}.mem-vault .mv-logo svg,.mem-vault .mv-logo img{width:100%;height:auto;filter:brightness(0)}
.mem-vault .mv-lbl{display:flex;align-items:center;gap:4px;font-weight:800;font-size:14px}.mem-vault .mv-lbl svg{width:15px;height:15px}
.mem-vault small{font-size:11px;opacity:.75;font-weight:600}
.mem-grid.vault-only{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.mem-tile.veiled .mem-th{background:linear-gradient(135deg,var(--accent-soft),var(--surface-2))}
.mem-veil{display:grid;place-items:center;width:100%;height:100%;color:var(--accent-strong);font-weight:800;font-size:13px}.mem-veil svg{width:26px;height:26px}
.mem-veil.once{font-size:13px}
.mem-b.from{background:rgb(0 0 0/.6);color:#fff;display:flex;align-items:center;gap:4px}.new-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.mem-b svg{width:12px;height:12px;vertical-align:-2px}
.mem-unl{display:flex;align-items:center;gap:6px;padding:4px 16px;color:var(--fg-2);font-size:13px}.mem-unl svg{width:14px;height:14px}
.mem-filts .chip svg{width:14px;height:14px;margin-right:2px;vertical-align:-2px}
.mem-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}.mem-strip img,.mem-strip video{flex:none;width:84px;height:84px;object-fit:cover;border-radius:10px;background:#000}
.mem-opts{display:grid;gap:6px}.mem-opts b svg{width:14px;height:14px;vertical-align:-2px}
.mc-body{align-items:stretch}.mc-logo{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;border-radius:16px;background:var(--accent);color:#0b1214}
.mc-logo svg,.mc-logo img{height:34px;width:auto;filter:brightness(0)}.mc-logo span{display:flex;gap:4px;align-items:center;font-weight:800}.mc-logo span svg{height:15px}
.mc-in{align-self:center;width:200px;max-width:100%;text-align:center;font-size:30px;letter-spacing:18px;padding:10px 0 10px 18px;border-radius:14px}
.mc-dots{display:none;justify-content:center;gap:18px;padding:10px 0;cursor:text}.mc-dots i{width:18px;height:18px;border-radius:50%;border:2px solid var(--accent);display:block}.mc-dots i.on{background:var(--accent)}
/* dossier Privé : fond clair, logo turquoise (comme l'écran d'accueil) */
.mem-vault{background:var(--chat-bg);color:var(--accent-strong);border:1px solid var(--line)}
.mem-vault .mv-logo svg,.mem-vault .mv-logo img{filter:none}
.mem-vault .mv-lbl{color:var(--fg)}
.mc-logo{background:var(--chat-bg);color:var(--fg);border:1px solid var(--line)}.mc-logo svg,.mc-logo img{filter:none}
.mem-tile.veiled .mem-th{background:var(--chat-bg)}
.mem-veil.vlt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--fg);padding:8px}
.mem-veil.vlt .mv-logo{width:70%;line-height:0}.mem-veil.vlt .mv-logo svg,.mem-veil.vlt .mv-logo img{width:100%;height:auto}
.mem-veil.vlt b{display:flex;align-items:center;gap:4px;font-size:13px}.mem-veil.vlt b svg{width:13px;height:13px}.mem-veil.vlt small{font-size:11px;color:var(--fg-2)}
.mem-fixed{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.mem-fixed span{display:flex;align-items:center;gap:6px}.mem-fixed svg{width:16px;height:16px}
/* sur ordinateur : photos et vidéos dans une fenêtre, pas en plein écran */
@media (min-width:821px){
  .mem-view,.zoom{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:min(920px,88vw);height:min(82vh,780px);border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.45)}
  #layer:has(> .zoom, > .mem-view)::before{content:'';position:fixed;inset:0;z-index:29;background:rgba(5,15,20,.62)}
  .zoom{background:#000}.zoom img{max-width:100%;max-height:100%;object-fit:contain}
  .mg-play video{max-height:100%}
}
/* écran de verrouillage : fond clair de l'accueil, logo turquoise */
.lock-screen.dark{background:#eaf6f7;color:#0f2430}
.lock-card.dark{color:#0f2430}
.lock-card.dark .err{color:#c62828}
.lock-card.dark .linkb{color:#08798a}
.lock-card.dark .pd.on::after{background:#08798a;box-shadow:0 0 0 8px rgba(20,184,201,.3)}
.lock-card.dark .field input,.lock-card.dark input{background:#fff;color:#0f2430;border-color:#cfe3e7}
.lock-card.dark .btn.ghost{color:#0f2430;border-color:#cfe3e7}
.lock-screen.dark .lk-hint{color:#4d6670}
.lock-screen.dark .lk-spin{border-color:#cfe3e7;border-top-color:#14B8C9}
/* souvenirs : sélection */
.mem-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mem-top .mem-filts{flex:1;min-width:0}
.mem-selb{display:none;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--fg-2);border-radius:99px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer;margin-right:12px}
.mem-selb .box{width:15px;height:15px;border:2px solid var(--fg-2);border-radius:4px}
@media (hover:hover) and (min-width:821px){ .mem-selb{display:inline-flex} }
.mem-chk{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:rgb(0 0 0/.35);display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;z-index:2}
.mem-chk.on{background:var(--accent);border-color:var(--accent)}
.mem-selbar{margin:0 0 6px}

/* petits points d'options sur les souvenirs */
.mem-more{position:absolute;top:6px;right:6px;z-index:2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgb(0 0 0/.45);color:#fff;cursor:pointer}
.mem-more svg{width:16px;height:16px}.mem-vault .mem-more{background:rgb(15 36 48/.08);color:var(--fg)}
.mem-selb{display:none!important}
/* code à 4 chiffres plus discret */
.mc-in{width:132px;font-size:22px;letter-spacing:12px;padding:6px 0 6px 12px}
.mc-body .linkless{background:none;border:0;color:var(--accent-strong);text-decoration:underline;font:inherit;font-size:14px;cursor:pointer;align-self:center;padding:2px}
.mc-logo{padding:10px}.mc-logo svg,.mc-logo img{height:28px}

/* un seul point d'options */
.mem-more{width:22px;height:22px;top:7px;right:7px;background:rgb(0 0 0/.38)}.mem-more svg{display:none}
.mem-more i{display:block;width:6px;height:6px;border-radius:50%;background:#fff}.mem-vault .mem-more{background:rgb(15 36 48/.1)}.mem-vault .mem-more i{background:var(--fg)}
/* case du code : petite, sans contour, légèrement grise */
.mc-in{width:120px;height:34px;font-size:20px;letter-spacing:10px;padding:0 0 0 10px;border:0!important;outline:0;box-shadow:none!important;border-radius:10px;background:var(--surface-2)}
.mc-in:focus{background:var(--accent-soft)}
/* ajouter : quatre carrés */
.mem-add{grid-template-columns:repeat(4,1fr);gap:8px}.mem-add button{padding:12px 4px;font-size:13px;gap:6px}.mem-add svg{width:22px;height:22px}
@media (max-width:360px){ .mem-add{grid-template-columns:repeat(2,1fr)} }
.mem-add button[data-act="memDoc"] svg{transform:rotate(-45deg)}
/* documents dans les souvenirs */
.mem-docs .mv-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accent);color:#fff}.mem-docs .mv-ic svg{width:24px;height:24px;transform:rotate(-45deg)}
.mem-doc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;height:100%;padding:8px;background:var(--surface-2);text-align:center}
.mem-doc b{display:grid;place-items:center;width:46px;height:54px;border-radius:8px;background:var(--accent);color:#fff;font-size:12px}
.mem-doc small{font-size:11.5px;color:var(--fg);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.mem-doc.big{background:none;color:#fff}.mem-doc.big b{width:70px;height:84px;font-size:16px}.mem-doc.big small{color:#fff;font-size:14px}
.mv-docbox{display:flex;flex-direction:column;align-items:center;gap:16px}
.mem-sdoc{flex:none;width:84px;height:84px;border-radius:10px;background:var(--surface-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px}
.mem-sdoc b{font-size:11px;padding:4px 6px;border-radius:6px;background:var(--accent);color:#fff}.mem-sdoc small{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* traduction : le bouton de langue ne chevauche plus les émoticônes */
.inwrap .tr-tog{width:auto!important;padding:0 8px;flex:none}

/* statut : appeler, répondre, flamme */
.sv-call{background:rgb(0 0 0/.28)!important;color:rgb(255 255 255/.85)!important;width:38px;height:38px;border-radius:50%;margin-left:2px}.sv-call svg{width:19px;height:19px}
.sv-reply{display:flex;align-items:center;gap:8px;padding:8px 12px calc(12px + env(safe-area-inset-bottom,0px));width:min(560px,100%);align-self:center}
.svr-in{flex:1;min-width:0;display:flex;align-items:center;gap:2px;border-radius:24px;background:rgb(255 255 255/.14);border:1px solid rgb(255 255 255/.22);padding:0 4px}
.svr-in input{flex:1;min-width:0;height:44px;border:0;background:none;color:#fff;font:inherit;font-size:16px;padding:0 10px;outline:none}
.svr-in input::placeholder{color:rgb(255 255 255/.7)}
.svr-in .ib{color:#fff;width:38px;height:38px}
/* les boutons gardent leur place dès le départ : le texte ne bouge pas quand on touche la barre */
.sv-reply .svr-x{display:grid;visibility:hidden}.sv-reply .svr-send{display:none}
.sv-reply.on .svr-x{visibility:visible}.sv-reply.on.typed .svr-mic{display:none}.sv-reply.on.typed .svr-send{display:grid}
.sv-reply.rec .svr-mic{display:grid;visibility:visible;color:#ff5a5a}.sv-reply.rec .emo-btn{visibility:hidden}
.svr-fire{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:rgb(255 255 255/.14);font-size:24px;cursor:pointer;filter:grayscale(.6);transition:transform .2s,filter .2s}
.svr-fire:hover,.svr-fire.on{filter:none}.svr-fire.pop{animation:firepop .7s ease}
@keyframes firepop{0%{transform:scale(1)}35%{transform:scale(1.6) rotate(-8deg)}70%{transform:scale(.9)}100%{transform:scale(1)}}
.emo-panel.emo-float{z-index:80}
/* messages liés à un statut */
.st-q{border-left-color:#f59e0b}
.flame-msg{display:flex;align-items:center;gap:8px;font-size:15px}.fl-ic{font-size:26px}
/* position : envoi en cours */
.loc-busy{display:flex;align-items:center;gap:6px;padding:8px 16px;font-size:14px;color:var(--fg-2);background:var(--surface);border-top:1px solid var(--line)}
.ldots{display:inline-flex;gap:3px;margin-left:2px}.ldots i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:ldot 1.2s infinite ease-in-out}
.ldots i:nth-child(2){animation-delay:.2s}.ldots i:nth-child(3){animation-delay:.4s}
@keyframes ldot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
/* flamme blanche au départ, couleur feu une fois envoyée */
.svr-fire,.svr-fire:hover{filter:grayscale(1) brightness(2.6)}
.svr-fire.on,.svr-fire.on:hover{filter:none;background:rgb(255 120 40/.22)}
/* vocal du statut, comme dans les discussions */
.sv-reply{position:relative}
.sv-recbar{position:absolute;inset:4px 8px calc(8px + env(safe-area-inset-bottom,0px));border-radius:26px;background:#1b2a30;color:#fff;z-index:2}
.sv-recbar .ib{color:#fff}.sv-recbar .hint{color:rgb(255 255 255/.7)}.sv-recbar .rec-t{font-weight:700}
.st-q{cursor:pointer}
.sv-reply .emo-panel{position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);margin:0 auto;z-index:5;background:#151a1d;color:#fff;border-color:#2a3236}

/* flammes qui s'envolent */
.fly-flame{position:fixed;z-index:200;pointer-events:none;animation:flyflame 1.4s ease-out forwards;opacity:0}
@keyframes flyflame{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-140px) scale(1.25) rotate(8deg)}}
/* message modifié */
.meta .edited{font-style:italic;opacity:.75}
.editbar .quote{border-left-color:var(--accent)}

/* points d'options : blancs ; turquoise pour ce qui est privé */
.mem-more{background:rgb(0 0 0/.42)}.mem-more i{background:#fff}
.mem-vault .mem-more,.mem-tile.veiled .mem-more{background:rgb(20 184 201/.16)}
.mem-vault .mem-more i,.mem-tile.veiled .mem-more i{background:var(--accent)}
.mem-docs .mem-more{background:rgb(0 0 0/.42)}.mem-docs .mem-more i{background:#fff}
/* émoticônes : une seule grille */
.emo-panel .emo-grid{flex:1;overflow-y:auto;padding:8px}
/* photo entourée de turquoise quand la personne a un statut */
.st-ring{display:inline-grid;place-items:center;border-radius:50%;padding:2px;background:conic-gradient(var(--accent),#7fe6f0,var(--accent));box-shadow:0 0 10px rgb(20 184 201/.55);cursor:pointer;line-height:0}
.st-ring>.av,.st-ring>span{border:2px solid var(--surface);border-radius:50%}
.st-ring.seen{background:rgb(20 184 201/.45);box-shadow:none}

/* statuts : flèches précédent / suivant, attente du chargement */
.sv-wait{position:absolute;left:50%;top:50%;margin:-17px 0 0 -17px;z-index:3}
.mc-lab{align-self:center;margin:4px 0 -2px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-2)}
/* fond blanc des statuts texte : texte foncé, pastille bordée */
.st-box{color:var(--stc,#fff)}.st-box textarea{color:var(--stc,#fff)}.st-box textarea::placeholder{color:var(--stph,rgba(255,255,255,.7))}
.sv-box .sv-text{color:var(--stc,#fff)}
.st-bgs .sw[data-h="362"]{box-shadow:inset 0 0 0 1px rgb(0 0 0/.25)}
/* sélection de messages */
.msg.msel{background:var(--accent-soft);border-radius:12px}
.msg.msel .bubble{box-shadow:0 0 0 2px var(--accent)}
#chatHead.msel-head{gap:8px}.msel-n{font-size:16px}
.msg{touch-action:pan-y}.msg.swiping{will-change:transform}
/* visionneuse plein écran */
.zoom{display:flex!important;flex-direction:column;inset:0!important;top:0!important;left:0!important;transform:none!important;width:auto!important;height:auto!important;border-radius:0!important;background:#000!important;color:#fff}
.zm-top{align-self:stretch;display:flex;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px;background:linear-gradient(rgba(0,0,0,.6),transparent)}
.zoom .zm-top .ib{position:static;color:#fff}
.zm-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}.zm-who small{opacity:.75}
.zm-stage{align-self:stretch;flex:1;min-height:0;display:grid;place-items:center}
.zm-stage img,.zm-stage video{max-width:100%;max-height:100%;object-fit:contain}
.zm-cap{margin:0;padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px));text-align:center}
.vidb{position:relative}.vid-x{position:absolute;top:6px;right:6px;z-index:2;width:32px;height:32px;border-radius:50%;background:rgb(0 0 0/.45);color:#fff}
/* envoi groupé */
.multi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px;max-height:46vh;overflow:auto}
.mg-it{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--surface-2)}
.mg-it img,.mg-it video{width:100%;height:100%;object-fit:cover}
.mg-v{position:absolute;left:6px;bottom:4px;color:#fff;text-shadow:0 1px 3px #000}
.mg-x{position:absolute;top:3px;right:3px;width:26px;height:26px;border-radius:50%;background:rgb(0 0 0/.5);color:#fff}
#multiCap{width:100%}
/* anneau des statuts : plein (non vu) / à moitié, sans lueur (déjà vu) */
.story .ring{background:var(--accent);box-shadow:0 0 10px rgb(20 184 201/.55)}
.story .ring.seen{background:conic-gradient(var(--accent) 0 180deg,rgb(20 184 201/.18) 180deg 360deg);box-shadow:none}
.st-ring{background:var(--accent);box-shadow:0 0 10px rgb(20 184 201/.55)}
.st-ring.seen{background:conic-gradient(var(--accent) 0 180deg,rgb(20 184 201/.18) 180deg 360deg);box-shadow:none}
/* le point unique */
.dot1{display:block;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 7px rgb(0 0 0/.38)}
.dot1.priv,:root .head .dot1.priv,:root #chatHead .dot1.priv,:root:not([data-theme="dark"]) .head .dot1.priv,:root:not([data-theme="dark"]) #chatHead .dot1.priv{background:var(--accent)}
.ib.dotb{display:grid;place-items:center}
:root:not([data-theme="dark"]) .head .dot1,:root:not([data-theme="dark"]) #chatHead .dot1{box-shadow:0 0 0 7px rgb(15 36 48/.55)}
#chatHead .grow,.selbar .grow{flex:1 1 auto}
/* petite fenêtre du point (au lieu du volet en bas) */
.pop-scrim{position:fixed;inset:0;z-index:80;background:transparent}
.pop{position:fixed;overflow:auto;border-radius:14px;background:var(--surface);color:var(--fg);box-shadow:0 12px 40px rgb(0 0 0/.35);border:1px solid var(--line);animation:popin .12s ease-out}
@keyframes popin{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.pop .menu{padding:4px 0}.pop .menu button{padding:11px 16px;font-size:15px;gap:12px}
.pop .react-bar{padding:8px 8px 4px;gap:2px;justify-content:space-between}.pop .react-bar button{font-size:22px;width:36px;height:36px}
.pop .hint{padding:2px 16px 8px;margin:0}
.pop.priv{border-color:rgb(20 184 201/.5)}
/* bannière de sélection des discussions : glisse depuis le haut, sans pousser la liste */
.selbar{position:absolute!important;top:0;left:0;right:0;z-index:20;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;background:var(--surface);box-shadow:0 4px 16px rgb(0 0 0/.18);border-bottom:0;animation:seldown .18s ease-out}
@keyframes seldown{from{transform:translateY(-100%)}to{transform:none}}
.selbar b{font-size:16px}
/* bulles photo / vidéo : contour fin */
.bubble.mb{padding:3px 3px 4px}
.bubble.mb .photo{margin:0 0 2px;border-radius:12px}
.bubble.mb .vidb video.vid{border-radius:12px}
.bubble.mb .txt,.bubble.mb .meta{padding:0 6px}
/* vidéo dans la discussion : une vignette, un toucher l'ouvre en grand */
.vid-play{position:absolute;inset:0;display:grid;place-items:center;border:0;background:transparent;cursor:pointer}
.vid-play span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgb(0 0 0/.5);color:#fff;font-size:20px;padding-left:4px}
.vid-x{display:none}
/* visionneuse : l'image tient toujours dans l'écran */
.zm-stage{position:relative}
.zm-stage img,.zm-stage video{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.locb.live{margin:4px 0 10px}
/* liste des discussions : statut déjà vu = plus aucun contour (le demi-cercle reste seulement dans la bande des statuts) */
.st-ring.seen{background:none!important;box-shadow:none!important}
/* son coupé : petite cloche barrée sur la photo */
.avm{position:relative;display:inline-flex;flex:none}
.mute-b{position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--fg-2);box-shadow:0 0 0 2px var(--surface)}
.mute-b svg{width:13px;height:13px}
/* réglages : interrupteurs turquoise (activé) / gris (désactivé) */
.tog{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:0;border-radius:20px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;background:var(--surface-2);color:var(--fg-2)}
.tog.on{background:var(--accent);color:#fff}
/* partage de position replié */
.loc-det>summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer}.loc-det>summary::-webkit-details-marker{display:none}
.loc-det>summary h2{margin:0;flex:1}.loc-st{font-size:13px;font-weight:600;padding:4px 10px;border-radius:12px;background:var(--surface-2);color:var(--fg-2)}.loc-st.on{background:var(--accent);color:#fff}
.loc-det[open]>summary{margin-bottom:8px}
/* sonneries */
.tone-rows{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.tone-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;text-align:left;cursor:pointer;color:var(--fg)}
.tone-row:last-child{border-bottom:0}.tone-row span{flex:1}.tone-row b{color:var(--accent-strong,var(--accent));font-weight:600}.tone-row svg{width:16px;height:16px;opacity:.6}
.tone-list button{align-items:flex-start}.tone-list small{display:block;color:var(--fg-2);font-size:13px}.tl-ic{color:var(--accent);width:18px}
.tr-wave{width:100%;height:90px;border-radius:10px;background:var(--surface-2)}
/* bande des statuts : plus de demi-cercle. Statut non vu = cercle turquoise plein ; déjà vu ou aucun statut = aucun contour */
.story .ring.seen,.story .ring.empty{background:none!important;box-shadow:none!important;border:0!important;padding:2.5px}
/* message en cours d'envoi : petit cercle qui tourne en bas de la photo ou de la vidéo */
.bubble.pending{opacity:.92}
.pend-spin{position:absolute;left:50%;bottom:14px;z-index:3;width:28px;height:28px;margin-left:-14px;border-radius:50%;border:3px solid rgb(255 255 255/.35);border-top-color:#fff;animation:pspin .8s linear infinite;box-shadow:0 0 0 4px rgb(0 0 0/.25)}
@keyframes pspin{to{transform:rotate(360deg)}}
.bubble.pending .vid-play{display:none}
.bubble.pending.cap .pend-spin{bottom:44px}

.tone-grp{margin:10px 16px 2px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.65}
.tone-cred{list-style:none;padding:0;margin:8px 0;display:grid;gap:10px;font-size:.85rem;line-height:1.35}
.tone-cred small{opacity:.7}

.amb-b{display:inline-block;margin-top:4px;padding:3px 10px;border-radius:999px;background:rgba(18,166,180,.14);color:#0b7a89;font-size:.78rem;font-weight:600}
.adm-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

.avb-pts{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:6px 0 14px}
.avb-pt{border:2px solid transparent;border-radius:50%;padding:2px;background:none;cursor:pointer}
.avb-pt[aria-pressed="true"]{border-color:#12a6b4}
.avb-pt .av{width:100%;height:auto;aspect-ratio:1}
.av img.av-pt,.avb-pt img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* v1.73 — croix des Réglages à droite, zone de suppression à part */
#pmodal .pm-head .grow{flex:1 1 auto}
#pmodal .pm-head [data-act="pmClose"]{margin-left:auto}
.set-block.danger-zone{margin-top:28px;border:1px solid color-mix(in srgb,var(--danger) 35%,transparent);background:color-mix(in srgb,var(--danger) 6%,var(--surface))}
.set-block.danger-zone h2{color:var(--danger)}
.auth-new{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 6px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--fg-2)}
.linkb.strong{font-weight:700}

/* v1.73 — sélection par point : un anneau turquoise lumineux entoure le point choisi */
.fwd-row input[type=checkbox],.pick:not(.chk) input[type=checkbox]{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin:0;flex:none;border-radius:50%;display:grid;place-items:center;background:transparent;border:2px solid transparent;cursor:pointer;transition:border-color .18s,box-shadow .18s}
.fwd-row input[type=checkbox]::before,.pick:not(.chk) input[type=checkbox]::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--fg-2)}
.fwd-row input[type=checkbox]:checked,.pick:not(.chk) input[type=checkbox]:checked{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent),0 0 14px 2px color-mix(in srgb,var(--accent) 70%,transparent)}
.fwd-row input[type=checkbox]:focus-visible,.pick:not(.chk) input[type=checkbox]:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}
.pick:not(.chk) input[type=checkbox]{order:9;margin-left:auto}
.selmark,.mem-chk{font-size:0;color:transparent;border-color:transparent;background:transparent}
.selmark::before,.mem-chk::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--fg-2)}
.mem-chk::before{background:#fff}
.chat-row.sel .selmark,.mem-chk.on{background:transparent;border-color:var(--accent);box-shadow:0 0 12px 2px color-mix(in srgb,var(--accent) 70%,transparent)}

/* v1.73 — points d'activité : sans chiffre, juste un point lumineux en haut à droite de l'icône */
.act-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surface),0 0 10px 2px color-mix(in srgb,var(--accent) 75%,transparent);pointer-events:none}
.tab{position:relative}.tab .act-dot{top:4px;left:calc(50% + 12px)}
.ib.dotted .act-dot{top:6px;right:5px}
.chip{position:relative}.chip .act-dot{position:relative;display:inline-block;width:8px;height:8px;margin-left:6px;vertical-align:middle}
.act-dot.act-mem{background:#ffd23f;box-shadow:0 0 0 2px var(--surface),0 0 12px 3px rgb(255 210 63/.8);animation:actBlink 1.1s ease-in-out infinite}
@keyframes actBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){.act-dot.act-mem{animation:none}}
/* souvenir reçu pas encore ouvert : le point d'options clignote en jaune */
.mem-tile .mem-more.new{background:rgb(0 0 0/.45)!important}
.mem-tile .mem-more.new i{background:#ffd23f!important;box-shadow:0 0 8px 2px rgb(255 210 63/.85);animation:actBlink 1.1s ease-in-out infinite}
.mem-tile .mem-more.gone{opacity:0}

/* v1.73 — vidéos du profil et flammes */
.ph3-vid{position:relative;display:block;width:100%;height:100%;background:#000}
.ph3-vid video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ph3-vid .ph3-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:22px;text-shadow:0 1px 6px rgb(0 0 0/.6)}
.pf-cell{display:flex;flex-direction:column;gap:6px;min-width:0}
.pf-bar{display:flex;align-items:center;justify-content:center;gap:6px;min-height:30px}
.pf-btn{display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:0 10px;border-radius:15px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.pf-btn[aria-pressed="true"]{border-color:#ff7a3c;background:color-mix(in srgb,#ff7a3c 14%,var(--surface));color:#d4521b}
.pf-btn .fl{filter:grayscale(1);opacity:.6}.pf-btn[aria-pressed="true"] .fl{filter:none;opacity:1}
.pf-who{background:none;border:0;padding:0 4px;color:var(--accent-strong);font:inherit;font-size:13px;font-weight:700;text-decoration:underline;cursor:pointer}
.vid-big{width:100%;max-height:70vh;border-radius:12px;background:#000}
/* v1.74 — points de sélection deux fois plus petits ; chiffres turquoise foncé dans les filtres */
.fwd-row input[type=checkbox],.pick:not(.chk) input[type=checkbox]{width:16px;height:16px;border-width:1.5px}
.fwd-row input[type=checkbox]::before,.pick:not(.chk) input[type=checkbox]::before{width:6px;height:6px}
.fwd-row input[type=checkbox]:checked,.pick:not(.chk) input[type=checkbox]:checked{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent),0 0 8px 1px color-mix(in srgb,var(--accent) 70%,transparent)}
.selmark,.mem-chk{width:14px;height:14px}
.selmark::before,.mem-chk::before{width:6px;height:6px}
.chat-row.sel .selmark,.mem-chk.on{box-shadow:0 0 8px 1px color-mix(in srgb,var(--accent) 70%,transparent)}
.chip .cnt.dk{background:#0a6f7b;color:#fff}
/* v1.76 — date de chaque souvenir en bas à droite */
.mem-date{position:absolute;right:6px;bottom:6px;z-index:2;padding:2px 7px;border-radius:9px;background:rgb(0 0 0/.55);color:#fff;font-size:11px;font-weight:700;line-height:1.4;pointer-events:none;font-variant-numeric:tabular-nums}
.mem-tile.veiled .mem-date{background:rgb(15 36 48/.12);color:var(--fg)}
.mem-foot{position:absolute;left:6px;right:6px;bottom:6px;z-index:2;display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px;pointer-events:none}
.mem-foot .mem-b{position:static}
.mem-foot .mem-date{position:static;margin-left:auto}
.st-aud button{white-space:nowrap}
/* v1.82 — appel de groupe : caméras remontées, membres en attente, dispositions */
.g-grid{flex:0 1 auto;align-content:start}
.gcall .call-in{gap:10px}
.g-stage{flex:1;min-height:0;width:100%;max-width:1100px;display:flex;gap:8px}
.g-stage.l-side{flex-direction:row}.g-stage.l-top{flex-direction:column}
.g-main{flex:1;min-width:0;min-height:0;display:flex;border-radius:18px;transition:box-shadow .15s}
.g-main .gt{flex:1;aspect-ratio:auto;min-height:0}
.g-main.drop{box-shadow:0 0 0 3px #fff,0 0 22px 4px rgb(20 184 201/.9)}
.g-secs{display:flex;gap:8px;min-width:0;min-height:0;overflow:auto;scrollbar-width:none}
.g-stage.l-side .g-secs{flex-direction:column;width:30%;max-width:220px}
.g-stage.l-top .g-secs{flex-direction:row;height:24%;min-height:96px;max-height:180px}
.g-stage.l-side .g-secs .gt{flex:none;width:100%;aspect-ratio:3/4}
.g-stage.l-top .g-secs .gt{flex:none;height:100%;aspect-ratio:3/4}
.g-secs .gt{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.g-secs .gt-name{font-size:11px;left:5px;bottom:5px;padding:2px 6px}
.g-secs .gt-av .av{width:44px;height:44px}
.gt.lift{opacity:.35}
.g-ghost{position:fixed;z-index:70;pointer-events:none;opacity:.9;transform:scale(1.05);box-shadow:0 10px 30px rgb(0 0 0/.5)}
.g-hint{margin:0;text-align:center;font-size:12px;opacity:.75}
.g-waiting{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;opacity:.95}
.g-wav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;align-items:center}
.g-w .av{width:44px;height:44px;box-shadow:0 0 0 2px rgb(255 255 255/.5);opacity:.9}
.g-wav small{font-weight:700}
.cb.lay-dot i{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.cb.lay-dot i::before{content:"";width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px rgb(255 255 255/.6)}
.cb.lay-dot[aria-expanded="true"] i{background:rgba(255,255,255,.32)}
@media (min-width:900px){.cb.lay-dot i{width:64px;height:64px}}
.g-laymenu{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 120px);transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;gap:4px;width:min(320px,calc(100% - 32px));padding:8px;border-radius:16px;background:rgb(8 20 25/.92);box-shadow:0 10px 30px rgb(0 0 0/.45)}
.g-laymenu button{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:8px 10px;border:0;border-radius:12px;background:none;color:#fff;font:inherit;cursor:pointer}
.g-laymenu button[aria-checked="true"]{background:rgb(20 184 201/.25);box-shadow:inset 0 0 0 1.5px #14b8c9}
.g-laymenu b{font-size:14px}.g-laymenu small{grid-column:2;font-size:12px;opacity:.75}
.g-ico{grid-row:1/3;width:40px;height:30px;display:grid;gap:2px}
.g-ico i{border-radius:3px;background:rgb(255 255 255/.75)}

.g-ico.side{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}.g-ico.side i:first-child{grid-row:1/3}
.g-ico.top{grid-template-columns:1fr 1fr;grid-template-rows:2fr 1fr}.g-ico.top i:first-child{grid-column:1/3}
/* v1.82 — champ de saisie jamais caché par le clavier du téléphone */
.layer{padding-bottom:var(--kb,0px)}
.layer .sheet{max-height:calc(92vh - var(--kb,0px))}
.g-grid:not(.n1){flex:1 1 auto;min-height:0;grid-auto-rows:minmax(0,1fr)}
.g-grid:not(.n1) .gt{aspect-ratio:auto;min-height:0}
.g-ico i{background:rgb(255 255 255/.45)}.g-ico.side i:first-child,.g-ico.top i:first-child{background:#fff}.g-ico.grid i{background:rgb(255 255 255/.8)}
.tr-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border-radius:12px;background:var(--accent-soft);color:var(--fg);font-size:14px;line-height:1.4}
.tr-note .btn{margin-left:auto}
.lang-opt[disabled]{opacity:.4;cursor:not-allowed}
/* v1.84 — crayon fin, sans contour, avant le nom du groupe */
.grp-title{display:inline-flex;align-items:center;gap:6px}
.grp-ren{all:unset;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;cursor:pointer;color:var(--fg-2)}
.grp-ren:hover{color:var(--accent-strong);background:var(--surface-2)}.grp-ren:focus-visible{outline:2px solid var(--accent-strong)}
.grp-ren svg{width:16px;height:16px;stroke-width:1.6;fill:none;stroke:currentColor}
/* v1.84 — cases des membres en attente, schémas des dispositions */
.gt.wait{opacity:.75;background:rgba(255,255,255,.07);border:1.5px dashed rgba(255,255,255,.35)}
.gt.wait .gt-av .av{animation:gwPulse 1.6s ease-in-out infinite}
@keyframes gwPulse{50%{transform:scale(.92);opacity:.7}}
.g-ico{grid-row:1/3;width:40px;height:30px;display:grid;gap:2px}
.g-ico i{border-radius:2px;background:rgb(255 255 255/.5)}
.g-ico.grid{grid-template:1fr 1fr/1fr 1fr}.g-ico.grid i{background:rgb(255 255 255/.85)}
.g-ico.side{grid-template:1fr 1fr 1fr/2.2fr 1fr}.g-ico.side i:first-child{grid-row:1/4;background:#fff}
.g-ico.top{grid-template:2.2fr 1fr/1fr 1fr 1fr}.g-ico.top i:first-child{grid-column:1/4;background:#fff}
/* v1.85 — choix du message d'origine dans le menu d'un message : point avec anneau turquoise */
.menu button .grow{flex:1;text-align:left}
.mdot{flex:none;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;border:1.5px solid transparent;margin-left:auto}
.mdot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--fg-2)}
.mdot.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent),0 0 8px 1px color-mix(in srgb,var(--accent) 70%,transparent)}
#msgs{overflow-anchor:none}
/* v1.87 — clavier des appels 15 % moins haut ; boutons-liens jamais soulignés */
.dial{padding:6px 14px 10px;gap:4px}
.dial-top input{font-size:23px;padding:2px}
.dk{height:44px}.dk b{font-size:22px}.dk small{font-size:9px;min-height:10px}
.dial-keys{gap:2px}
.dgo{width:50px;height:50px}.dgo svg{width:23px;height:23px}
a.btn,a.btn:hover{text-decoration:none}
#msgs .msg{cursor:default}
/* v1.88 — appels : le clavier se range, seul le bouton vert reste par-dessus la liste */
.dial-fab{position:absolute;left:50%;bottom:84px;z-index:5;transform:translateX(-50%);width:62px;height:62px;border:0;border-radius:50%;background:#2fb36b;display:grid;place-items:center;box-shadow:0 8px 22px rgb(0 0 0/.28);cursor:pointer}
.dial-fab svg{width:27px;height:27px;stroke:#fff}
.dial-fab:active{transform:translateX(-50%) scale(.95)}
.cl-list.roomy{padding-bottom:96px}
.dial.open{animation:dialUp .22s ease-out;touch-action:none;box-shadow:0 -10px 30px var(--shadow);border-radius:18px 18px 0 0}
@keyframes dialUp{from{transform:translateY(40%);opacity:.3}}
.dial-grab{display:flex;justify-content:center;padding:2px 0 4px}.dial-grab i{width:40px;height:4px;border-radius:2px;background:var(--line)}
/* v1.88 — appui long : pas de sélection de texte ; barre d'émojis verticale ; message du menu surligné */
@media (pointer:coarse){#msgs .msg,#msgs .msg *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}}
.rrail{position:fixed;right:max(8px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:4px;max-height:min(60vh,420px);overflow-y:auto;overscroll-behavior:contain;padding:6px;border-radius:26px;background:var(--surface);box-shadow:0 8px 28px var(--shadow);scrollbar-width:none;animation:railIn .18s ease-out}
.rrail::-webkit-scrollbar{display:none}
.rrail button{flex:none;width:42px;height:42px;border:0;border-radius:50%;background:none;font-size:24px;line-height:1;cursor:pointer}
.rrail button:active{background:var(--accent-soft);transform:scale(1.15)}
@keyframes railIn{from{opacity:0;transform:translate(20px,-50%)}}
#msgs .msg.menu-on{background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:12px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)}
.num{font-size:.86em;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* v1.89 — clavier d'appel : flèche pour le ranger, case du numéro centrée sous le 2 */
.dial-grab{display:flex;justify-content:center;align-items:center;width:44px;height:26px;margin:-2px auto 0;padding:0;border:0;border-radius:13px;background:var(--surface-2);color:var(--fg-2);cursor:pointer}
.dial-grab svg{width:20px;height:20px}
.dial-grab:hover{color:var(--accent-strong)}
.dial-top{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px}
.dial-top input{width:100%;outline:0}
.dial-top input:focus-visible{box-shadow:inset 0 -2px 0 var(--accent)}
/* appels : la photo et le nom ouvrent la fiche */
.cl-who{flex:1;min-width:0;display:flex;align-items:center;gap:12px;border:0;background:none;padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer}
.cl-card{padding-bottom:4px}
.cl-acts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.cl-acts button{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:76px;padding:12px 10px;border:0;border-radius:14px;background:var(--surface-2);color:var(--accent-strong);font:600 13px/1.2 Figtree,sans-serif;cursor:pointer}
.cl-acts button svg{width:22px;height:22px;stroke:var(--accent-strong)}
/* souvenir ouvert : toujours entier dans le cadre */
.mv-stage{position:relative;overflow:hidden}
.mv-stage>img,.mv-stage>video{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
/* téléphone : la barre d'émojis s'efface quand le menu du point est ouvert */
body:has(#pop) .rrail,body:has(#layer .layer) .rrail{display:none}
/* v1.90 — le point : anneau jaune (celui des messages d'information) au lieu du gris */
.dot1,:root:not([data-theme="dark"]) .head .dot1,:root:not([data-theme="dark"]) #chatHead .dot1{background:#7a5c0e;box-shadow:0 0 0 7px #fcf0c6}
.dot1.priv,:root .head .dot1.priv,:root #chatHead .dot1.priv,:root:not([data-theme="dark"]) .head .dot1.priv,:root:not([data-theme="dark"]) #chatHead .dot1.priv{background:var(--accent)}
/* Contacts : zones séparées, chacune défile seule et se replie */
.cz{margin:10px 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;box-shadow:0 1px 3px var(--shadow)}
.cz-h{display:flex;align-items:center;gap:8px;width:100%;padding:12px 14px;border:0;background:var(--surface-2);color:var(--fg-2);font:700 12.5px/1.2 Figtree,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-align:left;cursor:pointer}
.cz-h span{flex:1;min-width:0}
.cz-h svg{width:16px;height:16px;transition:transform .2s}
.cz.shut .cz-h svg{transform:rotate(-90deg)}
.cz-b{max-height:min(42vh,360px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cz.shut .cz-b{display:none}
.cz .row{padding-left:12px;padding-right:12px}
.tr-imp{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 10px;margin:0 10px 8px;padding:10px 12px;border-radius:14px;background:var(--notice);color:var(--notice-fg);font-size:13.5px;line-height:1.4}
.tr-imp>svg{width:18px;height:18px;flex:none;margin-top:1px}.tr-imp>span{flex:1;min-width:0}
.tr-imp-a{display:flex;flex-wrap:wrap;gap:6px;width:100%;justify-content:flex-end}
/* v1.91 — vitesse chez les utilisateurs */
.perf-t{width:100%;border-collapse:collapse;font-size:13px}
.perf-t th,.perf-t td{padding:6px 4px;text-align:right;border-bottom:1px solid var(--line)}
.perf-t th:first-child,.perf-t td:first-child{text-align:left}
.perf-t th{color:var(--fg-2);font-weight:600;font-size:12px}
.perf-t tr.bad td{color:var(--danger)}
.msg .bubble.pending:not(.mb){opacity:.75}
/* v1.92 — stockage */
.sto-tot{margin:0 0 4px}
.sto-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:12px}
.sto-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line)}
.sto-row:last-child{border-bottom:0}
.sto-row span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sto-row b{font-size:13px;color:var(--fg-2)}
.call-weak{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 64px);transform:translateX(-50%);z-index:3;padding:6px 12px;border-radius:999px;background:rgb(0 0 0/.55);color:#fff;font-size:13px;white-space:nowrap}
/* v1.94 — grands appels de groupe (jusqu'à 32) : vignettes plus petites, défilement */
.g-grid.nx{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));overflow-y:auto;max-height:calc(100dvh - 190px)}
@media (min-width:700px){.g-grid.nx{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}
/* v1.95 — Souvenirs : les filtres restent sur une seule ligne ; le point « nouveau » se pose sur le coin du filtre sans l'élargir */
.mem-filts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.mem-filts::-webkit-scrollbar{display:none}
.mem-filts .chip{flex:none;white-space:nowrap}
.mem-filts .chip .act-dot{position:absolute;top:-2px;right:-2px;margin:0}
/* v1.96 — le point : anneau turquoise clair (au lieu du jaune), plus léger que le point */
.dot1,:root:not([data-theme="dark"]) .head .dot1,:root:not([data-theme="dark"]) #chatHead .dot1{background:#0a6f7b;box-shadow:0 0 0 7px rgb(20 184 201/.22)}
.dot1.priv,:root .head .dot1.priv,:root #chatHead .dot1.priv,:root:not([data-theme="dark"]) .head .dot1.priv,:root:not([data-theme="dark"]) #chatHead .dot1.priv{background:var(--accent)}
:root[data-theme="dark"] .dot1:not(.priv){background:#7fe3ee}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dot1:not(.priv){background:#7fe3ee}}
/* adresse de secours */
.secours{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 10px);z-index:60;width:min(460px,calc(100% - 24px));padding:12px 14px;border-radius:14px;background:var(--surface);color:inherit;box-shadow:0 8px 30px rgb(0 0 0/.22);border-left:4px solid #14B8C9}
.secours p{margin:0 0 8px;font-size:14px;line-height:1.4}.secours .actions{justify-content:flex-end;margin:0}
.relais-add .row{display:flex;gap:8px}.relais-add input{flex:1;min-width:0}
/* message envoyé depuis un ordinateur */
.pc-ic{vertical-align:-2px;margin-right:4px;opacity:.75}