/* 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; min-height:0; 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); } }
/* Loader d'historique (pagination : chargement des messages plus anciens) */
.hist-loader { position:absolute; top:64px; left:0; right:0; display:none; justify-content:center; z-index:6; pointer-events:none; }
.hist-loader.show { display:flex; }
.hist-loader .spinner { width:22px; height:22px; border-radius:50%; border:2.5px solid var(--line); border-top-color:var(--accent); animation:spin .8s linear infinite; background:var(--surface); box-shadow:0 2px 8px rgba(35,24,48,.15); }

.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;
  /* pre-wrap : conserve les sauts de ligne du message (saisis ou colles). */
  white-space:pre-wrap; 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; object-fit:contain; }
.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 { position:relative; align-self:flex-start; display:inline-flex; align-items:center; gap:7px; margin:2px 2px 1px 18px; 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; }
/* Trait de liaison (coude) reliant la pastille au coin inferieur de SA bulle :
   rend explicite que les reponses appartiennent au message du dessus. */
.thread-ind::before { content:''; position:absolute; left:-12px; top:-8px; width:11px; height:16px;
  border-left:2px solid var(--line); border-bottom:2px solid var(--line); border-bottom-left-radius:9px; }
.thread-ind.unread::before { border-color:var(--accent); }
/* Mes messages (alignes a droite) : le coude est renvoye du cote droit. */
.row.me .thread-ind { align-self:flex-end; margin:2px 18px 1px 2px; }
.row.me .thread-ind::before { left:auto; right:-12px; border-left:none;
  border-right:2px solid var(--line); border-bottom-left-radius:0; border-bottom-right-radius:9px; }
.row.me .thread-ind.unread::before { border-color:var(--accent); }
.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); }
/* Avatars des repondeurs (qui a repondu dans le fil) */
.thread-ind .ravs { display:inline-flex; align-items:center; }
.thread-ind .rav { width:19px; height:19px; border-radius:50%; background:var(--chip); border:1.5px solid var(--surface);
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; margin-right:-6px; }
.thread-ind .rav:last-child { margin-right:3px; }
.thread-ind.unread .rav { border-color:var(--accent-soft); }
.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); }
/* L'apercu de citation reste compact (2 lignes clampees), pas de pre-wrap. */
.bubble .quote span { white-space:normal; }
.bubble .quote b { display:block; font-size:11.5px; font-weight:700; opacity:.9; }
/* Deux lignes qui s'enroulent plutot qu'une seule tronquee : sur mobile, la
   coupe a une ligne ne laissait qu'une trentaine de caracteres et forcait en
   plus la bulle a sa largeur maximale, quelle que soit la longueur de la reponse. */
.bubble .quote span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
  font-size:12.5px; line-height:1.32; opacity:.75; overflow:hidden; overflow-wrap:anywhere; }
/* 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 */
/* z-index au-dessus du panneau de fil (40), sous la feuille d'actions (50) :
   les reactions s'utilisent aussi bien sur le fil principal que dans un fil. */
.reactbar { position:absolute; z-index:45; 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:50; 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:16px; 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; flex-shrink:0; z-index:1; }
.thread .thead b { font-size:15px; } .thread .thead .sub { font-size:12px; color:var(--ink-soft); }
.thread .tbody { flex:1; min-height:0; 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;
  white-space:pre-wrap; overflow-wrap:anywhere; }
.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; }
/* font-size >= 16px obligatoire : en dessous, iOS (Safari/PWA) zoome le viewport
   au focus et ne le retablit jamais, d'ou un chat qui arrive zoome. Sans effet Android. */
.cfield textarea { flex:1; border:none; background:none; resize:none; font-family:inherit; font-size:16px; color:var(--ink); padding:8px 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; }
.cbtn.plus { font-size:26px; font-weight:400; line-height:1; }
/* Menu flottant des outils (photo / emoji / ephemere) au-dessus du "+" */
.tools-pop { position:absolute; left:11px; bottom:calc(58px + env(safe-area-inset-bottom)); z-index:25;
  display:none; flex-direction:column; gap:1px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:6px; box-shadow:0 10px 34px rgba(35,24,48,.24); animation:up .16s; }
.tools-pop.show { display:flex; }
.tools-pop .tool { display:flex; align-items:center; gap:11px; border:none; background:none; padding:10px 14px 10px 12px;
  border-radius:10px; font-size:14.5px; color:var(--ink); cursor:pointer; text-align:left; white-space:nowrap; }
.tools-pop .tool .i { font-size:18px; width:22px; text-align:center; }
.tools-pop .tool:active { background:var(--chip); }
.tools-pop .tool.eph-btn.on { color:var(--accent); }
.tools-pop .tool .eph-lbl { margin-left:auto; padding-left:10px; font-weight:700; font-size:12.5px; }
.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; }
/* Galerie de photos (grille de vignettes, lazy load) */
.gallery-panel .gallery-grid { flex:1; min-height:0; overflow-y:auto; padding:3px; display:grid; grid-template-columns:repeat(3, 1fr); gap:3px; align-content:start; }
/* Cellule carree par le hack du padding (hauteur = 100% de la largeur) : fiable
   partout. aspect-ratio sur un item de grille est instable sur certains Android
   et faisait s'effondrer des lignes (vignettes tronquees, on ne voyait que le
   haut). Le padding-bottom fige la hauteur independamment du contenu. */
.gcell { position:relative; display:block; border:none; padding:0 0 100%; margin:0; height:0; background:var(--chip); border-radius:5px; overflow:hidden; cursor:pointer; }
.gcell img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.gcell .spinner { position:absolute; top:50%; left:50%; margin:-10px 0 0 -10px; width:20px; height:20px; border-radius:50%; border:2.5px solid var(--line); border-top-color:var(--accent); animation:spin .8s linear infinite; }
.gcell .gerr { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:var(--ink-soft); font-size:14px; }
.gallery-empty { grid-column:1 / -1; text-align:center; color:var(--ink-soft); font-size:13.5px; padding:44px 20px; }
.lightbox img { max-width:92%; max-height:80%; border-radius:14px;
  /* Zoom local a l'image (JS) : on inhibe le geste natif du navigateur pour ne
     jamais deformer le viewport. transform-origin au centre = repere du calcul. */
  touch-action:none; -webkit-user-select:none; user-select:none; -webkit-user-drag:none;
  transform-origin:center center; will-change:transform; cursor:zoom-in; }
.lightbox img.zoomed { cursor:grab; border-radius:0; }
.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; z-index:2; }
/* Fleches precedent / suivant : au-dessus de l'image, hors de la zone de zoom. */
.lightbox .lb-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; border:none; background:rgba(255,255,255,.15);
  color:#fff; font-size:30px; line-height:1; cursor:pointer; display:flex; align-items:center;
  justify-content:center; padding-bottom:3px; }
.lightbox .lb-nav.prev { left:14px; } .lightbox .lb-nav.next { right:14px; }
.lightbox .lb-nav[hidden] { display:none; }
.lightbox .lb-nav:active { background:rgba(255,255,255,.28); }

/* 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:16px; }
.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; } }