/* Police DM Sans auto-hebergee (aucun appel tiers depuis la surface secrete). */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-a5iVIQs.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-ext-IEjh_5Q.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg:#F4F1F8; --surface:#FFFFFF; --ink:#33223B; --ink-soft:#8A7A92; --line:#ECE4F1;
  --me:#3B2542; --me-2:#5A3450; --accent:#E15C7B; --accent-soft:#FBE3EA;
  --seen:#5FA085; --chip:#F2ECF6;
  --shadow:0 8px 30px rgba(51,34,59,.12);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; }
body {
  font-family:'DM Sans', system-ui, sans-serif; color:var(--ink); background:#231830;
  display:flex; align-items:center; justify-content:center; min-height:100dvh; overflow:hidden;
}
.chat {
  position:relative; width:100%; max-width:440px; height:100dvh; max-height:900px; background:var(--bg);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,.5);
}
@media (min-width:460px) { .chat { border-radius:28px; height:880px; } }
button { font-family:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* En-tete */
.head { background:var(--surface); border-bottom:1px solid var(--line); padding:12px;
  display:flex; align-items:center; gap:11px; z-index:5; }
.back { border:none; background:none; font-size:24px; color:var(--ink); cursor:pointer; padding:2px 6px; line-height:1; }
.av { width:40px; height:40px; border-radius:13px; background:linear-gradient(135deg,#B79ACb,#E15C7B);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex-shrink:0; }
.who { flex:1; min-width:0; }
.who b { font-size:15.5px; display:block; line-height:1.2; }
.who .st { font-size:12px; color:var(--seen); font-weight:600; }
.who .st.off { color:var(--ink-soft); }
.menu-btn { border:none; background:none; font-size:22px; color:var(--ink-soft); cursor:pointer; padding:4px 8px; }

/* Corps */
.body { flex:1; overflow-y:auto; overflow-x:hidden; padding:12px 12px 6px; display:flex; flex-direction:column; gap:2px; -webkit-overflow-scrolling:touch; }
.body::-webkit-scrollbar { display:none; }
.daysep { align-self:center; font-size:11px; color:var(--ink-soft); background:#E7DFEE; padding:3px 12px; border-radius:999px; margin:10px 0 6px; }
.chat-loading { margin:auto; display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--ink-soft); font-size:13px; }
.chat-loading .spinner { width:26px; height:26px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--accent); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.row { display:flex; align-items:flex-end; gap:8px; margin-top:2px; }
.row.me { justify-content:flex-end; }
.row.grp { margin-top:1px; }
.row .slot { width:28px; flex-shrink:0; }
.row .mini { width:28px; height:28px; border-radius:9px; background:linear-gradient(135deg,#B79ACb,#E15C7B);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.bubble-wrap { max-width:78%; display:flex; flex-direction:column; }
.row.me .bubble-wrap { align-items:flex-end; }
.bubble { padding:9px 13px; border-radius:17px; font-size:14.5px; line-height:1.38; position:relative; cursor:pointer;
  word-wrap:break-word; overflow-wrap:anywhere; transition:transform .12s; }
.bubble.press { transform:scale(.97); }
.bubble.pending { opacity:.55; }
.them .bubble { background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:6px; }
.me .bubble { background:linear-gradient(135deg,var(--me),var(--me-2)); color:#fff; border-bottom-right-radius:6px; }
.grp.them .bubble { border-bottom-left-radius:6px; border-top-left-radius:8px; }
.bubble a { color:inherit; text-decoration:underline; }
.bubble .edited { font-size:10.5px; opacity:.5; margin-left:6px; }
.bubble.photo { padding:4px; overflow:hidden; }
.bubble.photo img { display:block; width:220px; max-width:60vw; border-radius:13px; cursor:pointer; }
.bubble.photo .cap { padding:6px 8px 3px; font-size:13.5px; }
.time { font-size:10.5px; color:var(--ink-soft); margin:3px 4px 0; }
.me .time { text-align:right; }
/* Accuses facon WhatsApp : ✓ envoye / ✓✓ remis (gris) / ✓✓ lu (bleu). */
.ticks { margin-left:5px; font-size:11px; letter-spacing:-2px; cursor:pointer; vertical-align:baseline; }
.ticks.sent, .ticks.delivered { color:var(--ink-soft); }
.ticks.read { color:#34B7F1; }
.eph-mark { display:inline-flex; align-items:center; gap:3px; margin-left:5px; vertical-align:middle; }
.eph-ring { width:13px; height:13px; transform:rotate(-90deg); flex-shrink:0; }
.eph-ring .track { fill:none; stroke:var(--line); stroke-width:2.6; }
.eph-ring .prog { fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round; transition:stroke-dashoffset 1s linear; }
.eph-txt { font-size:10px; color:var(--ink-soft); font-weight:700; }
/* Bouton messages ephemeres (barre de composition) */
.eph-btn { position:relative; display:inline-flex; align-items:center; gap:2px; }
.eph-btn.on { color:var(--accent); }
.eph-btn .eph-lbl { font-size:10px; font-weight:700; }
/* Interstitiel de lien */
.link-sheet { text-align:center; }
.link-sheet .link-ic { font-size:30px; margin:2px 0 6px; }
.link-sheet .link-note { font-size:12.5px; color:var(--ink-soft); margin:0 0 4px; }
.link-sheet .link-url { font-size:14px; font-weight:600; color:var(--ink); word-break:break-all; margin:0 6px 12px; padding:10px 12px; background:var(--chip); border-radius:12px; }

/* Reactions accolees a la bulle : remontees sur son bord bas (facon Messenger),
   legerement inset du cote de l'expediteur, au-dessus de la bulle. */
.reacts { display:flex; gap:4px; flex-wrap:wrap; margin:-11px 8px 1px; position:relative; z-index:1; }
.rchip { background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:2px 8px; font-size:12.5px;
  box-shadow:0 1px 3px rgba(35,24,48,.14);
  display:inline-flex; gap:4px; align-items:center; cursor:pointer; line-height:1.6; }
.rchip.mine { background:var(--accent-soft); border-color:var(--accent); }
.rchip b { font-weight:600; font-size:11.5px; color:var(--ink-soft); }
.rchip.mine b { color:var(--accent); }

.thread-ind { display:inline-flex; align-items:center; gap:7px; margin:5px 2px 2px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:6px 11px; cursor:pointer; font-size:12.5px; color:var(--accent); font-weight:600; }
.thread-ind .last { color:var(--ink-soft); font-weight:500; }
.thread-ind .avx { width:18px; height:18px; border-radius:6px; background:linear-gradient(135deg,#B79ACb,#E15C7B); }
.thread-ind.unread { border-color:var(--accent); background:var(--accent-soft); }
.thread-ind .tdot { width:8px; height:8px; border-radius:50%; background:var(--accent); margin-left:1px; flex-shrink:0; }

/* Bouton "Fils" dans l'en-tete + pastille de non-lus */
.threads-btn { position:relative; }
.hbadge { display:none; position:absolute; top:-1px; right:0; min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; background:var(--accent); color:#fff; font-size:10.5px; font-weight:700;
  line-height:16px; text-align:center; }
.hbadge.show { display:block; }

/* Panneau "Fils" (reutilise le glissement de .thread), place SOUS le fil de
   discussion (z-index) pour que l'ouverture d'un fil le recouvre proprement. */
.threads-panel { z-index:38; }
.threads-panel .threads-scroll { flex:1; overflow-y:auto; padding:8px 10px 16px; display:flex; flex-direction:column; gap:6px; }
.thread-item { display:flex; align-items:flex-start; gap:9px; width:100%; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:11px 13px; font:inherit; color:var(--ink); }
.thread-item.unread { border-color:var(--accent); background:var(--accent-soft); }
.thread-item .ti-dot { width:8px; height:8px; border-radius:50%; background:transparent; margin-top:6px; flex-shrink:0; }
.thread-item.unread .ti-dot { background:var(--accent); }
.thread-item .ti-main { flex:1; min-width:0; }
.thread-item .ti-top { display:flex; align-items:baseline; gap:8px; }
.thread-item .ti-top b { font-size:14px; font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.thread-item.unread .ti-top b { font-weight:700; }
.thread-item .ti-time { font-size:11px; color:var(--ink-soft); flex-shrink:0; }
.thread-item .ti-last { font-size:13px; color:var(--ink-soft); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.thread-item .ti-meta { font-size:11.5px; color:var(--accent); font-weight:600; margin-top:3px; }
.threads-empty { text-align:center; color:var(--ink-soft); font-size:13.5px; padding:40px 20px; display:flex; flex-direction:column; gap:6px; }
.threads-empty span { font-size:12.5px; opacity:.8; }

.seen { align-self:flex-end; font-size:11px; color:var(--seen); font-weight:600; margin:2px 4px 4px; cursor:pointer; }
.seen-tip { position:absolute; z-index:65; background:var(--ink); color:#fff; font-size:11.5px; font-weight:500; padding:5px 10px; border-radius:8px; box-shadow:var(--shadow); opacity:0; transform:translateY(4px); transition:.16s; pointer-events:none; white-space:nowrap; }
.seen-tip.show { opacity:1; transform:translateY(0); }
.ephem { font-size:10.5px; opacity:.7; margin-left:6px; }

/* Indicateur de saisie */
.typing { display:flex; align-items:flex-end; gap:8px; margin-top:4px; }
.typing .mini { width:28px; height:28px; border-radius:9px; background:linear-gradient(135deg,#B79ACb,#E15C7B); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.typing .dots { background:var(--surface); border:1px solid var(--line); border-radius:16px; border-bottom-left-radius:6px; padding:11px 14px; display:flex; gap:4px; }
.typing .dots i { width:7px; height:7px; border-radius:50%; background:var(--ink-soft); animation:blink 1.3s infinite; }
.typing .dots i:nth-child(2) { animation-delay:.2s; } .typing .dots i:nth-child(3) { animation-delay:.4s; }
@keyframes blink { 0%,60%,100%{opacity:.3;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }

/* Bandeau d'edition */
.compose-edit { display:none; align-items:center; gap:10px; padding:8px 14px; background:var(--accent-soft); border-top:1px solid var(--line); font-size:12.5px; color:var(--accent); font-weight:600; }
.compose-edit.show { display:flex; }
.compose-edit button { margin-left:auto; border:none; background:none; color:var(--ink-soft); font-size:16px; cursor:pointer; }
/* Bandeau de citation (reponse par citation) */
.compose-reply { display:none; align-items:center; gap:10px; padding:7px 14px; background:var(--surface); border-top:1px solid var(--line); }
.compose-reply.show { display:flex; }
.compose-reply .rb-bar { width:3px; align-self:stretch; border-radius:2px; background:var(--accent); flex-shrink:0; }
.compose-reply .rb-content { flex:1; min-width:0; display:flex; flex-direction:column; }
.compose-reply .rb-content b { font-size:12.5px; color:var(--accent); font-weight:700; }
.compose-reply .rb-content span { font-size:12.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compose-reply button { border:none; background:none; color:var(--ink-soft); font-size:16px; cursor:pointer; }
/* Bloc citation en tete de bulle */
.bubble .quote { display:block; border-left:3px solid currentColor; padding:3px 8px; margin-bottom:5px; border-radius:5px; background:rgba(0,0,0,.06); cursor:pointer; }
.me .bubble .quote { background:rgba(255,255,255,.15); }
.bubble .quote b { display:block; font-size:11.5px; font-weight:700; opacity:.9; }
.bubble .quote span { display:block; font-size:12.5px; opacity:.75; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
/* Surlignage bref d'un message vise par une citation */
.row.highlight .bubble { animation:quoteflash 1.4s ease; }
@keyframes quoteflash { 0%,100% { box-shadow:0 0 0 0 transparent; } 25% { box-shadow:0 0 0 3px var(--accent-soft); } }

/* Barre de reactions rapides */
.reactbar { position:absolute; z-index:35; background:var(--surface); border:1px solid var(--line); border-radius:999px;
  box-shadow:var(--shadow); display:none; gap:2px; padding:5px 7px; }
.reactbar.show { display:flex; }
.reactbar button { border:none; background:none; font-size:23px; cursor:pointer; padding:3px 4px; border-radius:50%; transition:transform .1s; }
.reactbar button:active { transform:scale(1.25); }
.reactbar .more { font-size:18px; color:var(--ink-soft); }

/* Feuilles / overlays */
.sheet-bg { position:absolute; inset:0; background:rgba(35,24,48,.4); backdrop-filter:blur(3px); display:none; z-index:30; align-items:flex-end; }
.sheet-bg.show { display:flex; }
.sheet { width:100%; background:var(--surface); border-radius:24px 24px 0 0; padding:10px 12px calc(16px + env(safe-area-inset-bottom)); box-shadow:0 -10px 40px rgba(0,0,0,.2); animation:up .22s; }
@keyframes up { from{transform:translateY(30px);opacity:.4} to{transform:translateY(0);opacity:1} }
.sheet .grip { width:38px; height:4px; border-radius:2px; background:var(--line); margin:2px auto 12px; }
.act { display:flex; align-items:center; gap:14px; padding:13px 12px; border-radius:14px; cursor:pointer; font-size:15px; font-weight:500;
  width:100%; border:none; background:none; font-family:inherit; text-align:left; color:var(--ink); }
.act:active { background:var(--bg); }
.act .i { width:24px; text-align:center; font-size:18px; }
.act.danger { color:var(--accent); }
.act--cancel { justify-content:center; color:var(--ink-soft); margin-top:4px; border-top:1px solid var(--line); border-radius:0; }

/* Selecteur d'emoji */
.emoji-sheet { position:relative; }
.sheet-close { position:absolute; top:6px; right:8px; border:none; background:var(--chip); color:var(--ink-soft); width:30px; height:30px; border-radius:50%; font-size:15px; cursor:pointer; }
.emoji-sheet .search { display:flex; align-items:center; gap:9px; background:var(--bg); border-radius:12px; padding:9px 13px; margin:6px 0 12px; }
.emoji-sheet .search input { border:none; background:none; font-family:inherit; font-size:14px; flex:1; color:var(--ink); }
.emoji-sheet .search input:focus { outline:none; }
.emoji-cat { font-size:11px; font-weight:700; color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase; margin:8px 4px 6px; }
.emoji-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; max-height:210px; overflow-y:auto; }
.emoji-grid button { border:none; background:none; font-size:24px; cursor:pointer; padding:6px 0; border-radius:10px; }
.emoji-grid button:active { background:var(--bg); }

/* Fil de discussion */
.thread { position:absolute; inset:0; background:var(--bg); display:flex; flex-direction:column; z-index:40; transform:translateX(100%); transition:transform .25s; visibility:hidden; }
.thread.show { transform:translateX(0); visibility:visible; }
.thread .thead { background:var(--surface); border-bottom:1px solid var(--line); padding:13px 12px; display:flex; align-items:center; gap:10px; }
.thread .thead b { font-size:15px; } .thread .thead .sub { font-size:12px; color:var(--ink-soft); }
.thread .tbody { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:6px; }
.thread .parent { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:11px 14px; font-size:14.5px; }
.thread .parent .who { font-size:12px; color:var(--accent); font-weight:700; margin-bottom:3px; }
.tline { display:flex; align-items:center; gap:10px; margin:10px 2px 2px; }
.tline::before, .tline::after { content:""; height:1px; background:var(--line); flex:1; }
.tline span { font-size:11px; color:var(--ink-soft); font-weight:600; }

/* Barre de saisie */
.compose { display:flex; gap:8px; align-items:flex-end; padding:9px 11px calc(9px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--line); }
.cbtn { border:none; background:var(--chip); width:40px; height:40px; border-radius:12px; font-size:19px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.cfield { flex:1; display:flex; align-items:flex-end; background:#FAF7FC; border:1px solid var(--line); border-radius:20px; padding:2px 4px 2px 14px; min-height:40px; }
.cfield textarea { flex:1; border:none; background:none; resize:none; font-family:inherit; font-size:14.5px; color:var(--ink); padding:9px 0; max-height:110px; line-height:1.35; }
.cfield textarea:focus { outline:none; }
.send { border:none; background:var(--accent); color:#fff; width:40px; height:40px; border-radius:12px; font-size:17px; cursor:pointer; flex-shrink:0; transition:.15s; }
.send:disabled { opacity:.35; cursor:default; }

/* Lightbox photo */
.lightbox { position:absolute; inset:0; background:rgba(20,12,26,.94); display:none; align-items:center; justify-content:center; z-index:60; }
.lightbox.show { display:flex; }
.lightbox img { max-width:92%; max-height:80%; border-radius:14px; }
.lightbox .x { position:absolute; top:16px; right:18px; background:rgba(255,255,255,.15); border:none; color:#fff; width:38px; height:38px; border-radius:50%; font-size:19px; cursor:pointer; }

/* Toast */
.toast { position:absolute; left:50%; bottom:88px; transform:translateX(-50%) translateY(10px); background:var(--ink); color:#fff;
  padding:9px 16px; border-radius:999px; font-size:13px; opacity:0; pointer-events:none; transition:.25s; z-index:70; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Sortie panique */
.panic { position:absolute; inset:0; background:linear-gradient(160deg,#2C1D36,#4A2E52); display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; z-index:80; color:#fff; text-align:center; padding:30px; }
.panic.show { display:flex; }
.panic .lk { font-size:44px; }
.panic p { margin:0; font-size:15px; opacity:.85; max-width:250px; line-height:1.5; }

/* Surface secrete : overlays plein ecran au-dessus du leurre */
.overlay { position:absolute; inset:0; z-index:40; background:var(--bg); display:flex; flex-direction:column; }
.overlay[hidden] { display:none; }
/* Renfort anti-snapshot : masque instantane des surfaces secretes a la perte de
   focus (le leurre, qui n'est pas un .overlay, reste visible). Reversible. */
html.stars-masked .overlay { visibility:hidden !important; }

/* Pave de code */
.keypad { align-items:center; justify-content:center; padding:30px 26px; background:linear-gradient(170deg,#FBF8FC,#F3E4EC); color:var(--ink); }
.keypad .lk { font-size:26px; margin-bottom:4px; }
.keypad h4 { margin:8px 0 3px; font-size:16px; font-weight:600; }
.keypad p { margin:0 0 22px; font-size:13px; color:var(--ink-soft); }
.kp-dots { display:flex; gap:15px; justify-content:center; margin-bottom:26px; }
.kp-dots i { width:14px; height:14px; border-radius:50%; border:1.5px solid var(--ink-soft); transition:.15s; }
.kp-dots i.f { background:var(--ink); border-color:var(--ink); }
.kp-dots.err i { border-color:var(--accent); } .kp-dots.err i.f { background:var(--accent); }
.keys { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; width:100%; max-width:280px; }
.key { aspect-ratio:1.4; border:none; background:var(--surface); border-radius:16px; font-size:24px; font-weight:500; color:var(--ink); cursor:pointer; transition:.1s; box-shadow:var(--shadow); }
.key:active { transform:scale(.95); background:var(--blush, #F5E9F0); }
.key.blank { background:transparent; box-shadow:none; pointer-events:none; }
.key.act { font-size:17px; font-weight:600; }
@keyframes shake { 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-8px)} 40%,60%{transform:translateX(8px)} }
.shake { animation:shake .5s; }

/* Boutons et assistant d'onboarding */
.btn { border:none; background:var(--accent); color:#fff; padding:.65rem 1.1rem; border-radius:10px; font-size:.95rem; font-weight:600; cursor:pointer; margin:.3rem .4rem .3rem 0; font-family:inherit; }
.btn--ghost { background:var(--chip); color:var(--ink); }
.pairing { padding:26px 22px; max-width:24rem; margin:0 auto; }
.pairing__title { font-size:1.2rem; font-weight:600; margin:0 0 .3rem; }
.pairing__lead { color:var(--ink-soft); font-size:.9rem; line-height:1.5; margin:0 0 1rem; }
.pairing__panel { margin-top:.5rem; }
.pairing__token { font-family:ui-monospace,monospace; font-size:1.5rem; letter-spacing:.15em; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:.9rem; text-align:center; margin:.8rem 0; }
.pairing__qr { display:flex; justify-content:center; margin:.8rem 0; }
.pairing__qr svg { width:200px; height:200px; background:#fff; padding:10px; border-radius:12px; }
.pairing__input { width:100%; box-sizing:border-box; padding:.7rem; border-radius:10px; border:1px solid var(--line); font-size:1.1rem; letter-spacing:.08em; text-transform:uppercase; }
.pairing__actions { margin:.75rem 0; }
.pairing__video { width:100%; border-radius:10px; margin:.6rem 0; }
.pairing__status { font-size:.85rem; color:var(--ink-soft); }
.pairing__status--error { color:var(--accent); }
.pairing__done { font-size:1.15rem; color:var(--seen); font-weight:600; }

/* Definition des codes (onboarding) */
.codestep { padding:24px; }
.codestep h3 { font-size:1.05rem; margin:0 0 .3rem; }
.codestep .hint { font-size:.85rem; color:var(--ink-soft); margin-bottom:1rem; }
.codestep .field { margin:.75rem 0; }
.codestep label { display:block; font-size:.8rem; color:var(--ink-soft); margin-bottom:.3rem; }
.codestep input { width:100%; box-sizing:border-box; padding:.7rem; border-radius:10px; border:1px solid var(--line); font-size:1.3rem; letter-spacing:.4em; text-align:center; }
.codestep .err { color:var(--accent); font-size:.85rem; min-height:1.1em; }
.avatars { display:flex; flex-wrap:wrap; gap:8px; }
.avatars button { font-size:22px; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:var(--surface); cursor:pointer; }
.avatars button.on { border-color:var(--accent); background:var(--accent-soft); }

/* Coffre de contrainte (jalon 8) */
.vault-ph { background:var(--bg); color:var(--ink); overflow-y:auto; }
.vault-ph .vhead { background:linear-gradient(160deg,#4A2E52,#7A4A66); color:#fff; padding:22px 20px 24px; display:flex; align-items:center; justify-content:space-between; }
.vault-ph .vhead h2 { font-size:18px; margin:0; font-weight:600; }
.vault-ph .close { border:none; background:rgba(255,255,255,.16); color:#fff; width:34px; height:34px; border-radius:11px; font-size:18px; cursor:pointer; }
.vault-ph .vbody { padding:18px 18px 40px; }
.vault-ph .sec-title { font-size:12px; font-weight:700; color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase; margin:22px 4px 11px; }
.vault-ph .card { background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.vault-ph .jentry { padding:14px 16px; border-bottom:1px solid var(--line); }
.vault-ph .jentry:last-child { border-bottom:none; }
.vault-ph .jtop { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.vault-ph .jtop .date { font-size:12px; color:var(--ink-soft); font-weight:600; }
.vault-ph .jtxt { font-size:13.5px; line-height:1.45; }
.vault-ph .jdel { margin-top:6px; border:none; background:none; color:var(--accent); font-size:11.5px; cursor:pointer; padding:0; }
.vault-ph .roentry { display:flex; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line); font-size:13.5px; }
.vault-ph .roentry:last-child { border-bottom:none; }
.vault-ph .roentry .v { color:var(--ink-soft); }
.vault-ph .vnote { display:flex; gap:11px; align-items:flex-start; padding:14px 16px; border-bottom:1px solid var(--line); font-size:13.5px; }
.vault-ph .vnote:last-child { border-bottom:none; }
.vault-ph .vnote .chk { width:19px; height:19px; border-radius:6px; border:1.5px solid var(--luteal,#B79ACb); flex-shrink:0; margin-top:1px; cursor:pointer; }
.vault-ph .vnote .chk.on { background:var(--luteal,#B79ACb); border-color:var(--luteal,#B79ACb); }
.vault-add { display:flex; gap:8px; margin:10px 2px 0; }
.vault-add input { flex:1; padding:.6rem .8rem; border-radius:10px; border:1px solid var(--line); font-size:13.5px; }
.vault-add button { border:none; background:var(--accent); color:#fff; width:40px; border-radius:10px; font-size:20px; cursor:pointer; }
.vault-ph .doc { display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line); }
.vault-ph .doc:last-child { border-bottom:none; }
.vault-ph .doc .ic { width:34px; height:34px; border-radius:10px; background:var(--chip); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.vault-ph .doc .dmeta { flex:1; min-width:0; display:flex; flex-direction:column; }
.vault-ph .doc .dmeta .k { font-size:13.5px; font-weight:600; }
.vault-ph .doc .dmeta .s { font-size:12px; color:var(--ink-soft); }
.vault-ph .doc .arr { color:var(--ink-soft); font-size:18px; flex-shrink:0; }

@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }