*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  --bg:#faf8f5; --surface:#ffffffc9; --surface2:#f3f0ea;
  --border:#78716c; --border2:#e8e2d8; --text:#1c1917; --text-muted:#78716c;
  --text-faint:#a8a29e; --accent:#a3e635;
  --danger:#c0392b; --danger-bg:#fdecea; --notif:#ff3b30;
  --shadow-1:0 1px 3px rgba(28,25,23,.10); --shadow-2:0 2px 12px rgba(28,25,23,.18);
  --radius:4px; --blur:8px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0d0d0d;--surface:#1c1c1ccf;--surface2:#252525;--border:#999999;--border2:#333333;--text:#f0f0f0;--text-muted:#999999;--text-faint:#666666;--accent:#a3e635;--danger:#e16060;--danger-bg:#3a1518;--notif:#ff3b30;--shadow-1:0 1px 3px rgba(0,0,0,.4);--shadow-2:0 2px 12px rgba(0,0,0,.5); }
}
html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; scrollbar-gutter:stable; }
#ptr-indicator { position:fixed;top:calc(env(safe-area-inset-top) + 12px);left:50%;transform:translateX(-50%) translateY(-56px);width:36px;height:36px;border-radius:50%;background:var(--surface);box-shadow:0 2px 8px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;color:var(--text-muted);z-index:49;transition:transform .25s cubic-bezier(.4,0,.2,1); }
#ptr-indicator.ptr-visible { transform:translateX(-50%) translateY(0); }
#ptr-indicator.ptr-loading svg { animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.spinner { width:28px;height:28px;border-radius:50%;background:conic-gradient(from 0deg, transparent 0%, var(--accent) 100%);-webkit-mask:radial-gradient(circle, transparent 41%, #000 42%);mask:radial-gradient(circle, transparent 41%, #000 42%);animation:spin .75s linear infinite;margin:0 auto; }
html { background:var(--bg); }
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); min-height:100dvh; padding-top:var(--header-h,calc(120px + env(safe-area-inset-top))); padding-bottom:calc(4rem + env(safe-area-inset-bottom)); overscroll-behavior:none; }
/* Capacitor iOS : autoriser le bounce natif WKWebView pour le rebond visuel au pull-to-refresh */
html.is-native body { overscroll-behavior:auto; }

.theme-light { --bg:#faf8f5;--surface:#ffffffc9;--surface2:#f3f0ea;--border:#78716c;--border2:#e8e2d8;--text:#1c1917;--text-muted:#78716c;--text-faint:#a8a29e;--danger:#c0392b;--danger-bg:#fdecea;--notif:#ff3b30;--shadow-1:0 1px 3px rgba(28,25,23,.10);--shadow-2:0 2px 12px rgba(28,25,23,.18); }
.theme-dark { --bg:#0d0d0d;--surface:#1c1c1ccf;--surface2:#252525;--border:#999999;--border2:#333333;--text:#f0f0f0;--text-muted:#999999;--text-faint:#666666;--danger:#e16060;--danger-bg:#3a1518;--notif:#ff3b30;--shadow-1:0 1px 3px rgba(0,0,0,.4);--shadow-2:0 2px 12px rgba(0,0,0,.5); }

/* Focus-visible global — keyboard a11y */
*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
  
/* HEADER */
.site-header { position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;padding-top:env(safe-area-inset-top);will-change:transform;transition:transform .4s cubic-bezier(.4,0,.2,1); }
.site-header::before { content:'';position:absolute;inset:0;background:color-mix(in srgb, var(--bg) 75%, transparent);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));z-index:-1; }
.header-inner { max-width:1040px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:56px;gap:1rem;padding:0 max(.65rem,env(safe-area-inset-left));transition:opacity .25s ease; }
.header-hidden .header-inner { opacity:0; }
.logo { font-family:'DM Sans',sans-serif;font-size:23px;color:var(--text); }
.logo span { color:var(--accent);font-weight:bold; }

/* MAIN */
.main { max-width:1040px;margin:0 auto;padding:.75rem max(.65rem,env(safe-area-inset-left)) 1.25rem; }

/* TOOLBAR */
.toolbar { position:absolute;left:0;right:0;top:100%;background:color-mix(in srgb, var(--bg) 75%, transparent);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));max-height:0;overflow:hidden;opacity:0;transition:max-height .25s ease, opacity .2s ease; }
.toolbar.show { max-height:60px;opacity:1; }
.toolbar-inner { max-width:1040px;margin:0 auto;padding:.5rem max(.65rem,env(safe-area-inset-left)) .75rem; }
.search-wrap { flex:1;min-width:140px;position:relative; }
.search-wrap input { width:100%;padding:10px 14px 10px 34px;background:var(--surface);border:1px solid var(--border);border-radius:40px;font-family:'DM Sans',sans-serif;font-size:16px;color:var(--text);outline:none;-webkit-appearance:none; }
.search-wrap input:focus { border-color:var(--accent); }
.search-wrap input::placeholder { color:var(--text-faint); }
.search-icon { position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-faint);pointer-events:none; }
.sort-select { padding:10px 26px 10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:40px;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text-muted);cursor:pointer;outline:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2378716c'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center; }

.add-btn { display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;color:var(--text);border:none;cursor:pointer;flex-shrink:0;-webkit-appearance:none; }
.add-btn:active { opacity:1; }
.header-actions { display:flex;align-items:center;gap:8px; }
.btn-view, #btn-sort { display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:none;border:none;border-radius:50%;cursor:pointer;color:var(--text);flex-shrink:0; }
#btn-sort svg { transition:transform .3s cubic-bezier(.22,1,.36,1); }
#btn-sort.is-open svg { transform:rotate(180deg); }
.btn-view { position:relative; }
.btn-view:active { opacity:1; }
.btn-view.active { color:var(--text); }
.btn-view .view-icon { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .22s ease, transform .28s cubic-bezier(.22,1,.36,1); }
.btn-view .view-icon-mosaic { opacity:0;transform:scale(.55) rotate(-90deg); }
.btn-view.view-is-list .view-icon-list { opacity:0;transform:scale(.55) rotate(90deg); }
.btn-view.view-is-list .view-icon-mosaic { opacity:1;transform:scale(1) rotate(0); }
.btn-icon { display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:none;cursor:pointer;color:var(--text);flex-shrink:0; }
.btn-icon:active { opacity:1; }

/* TABS */
.tabs-wrap { overflow-x:auto;scrollbar-width:none;margin-bottom:1.25rem;-webkit-overflow-scrolling:touch; }
.tabs-wrap::-webkit-scrollbar { display:none; }
.tabs { display:flex;gap:6px;width:max-content; }
.tab { display:flex;align-items:center;gap:5px;padding:7px 14px;border-radius:40px;font-size:13px;border:none;cursor:pointer;background:var(--surface);color:var(--text-muted);white-space:nowrap;user-select:none;-webkit-user-select:none; }
.tab.active { background:var(--text);color:var(--bg);border-color:var(--text); }
.tab .pill { background:var(--surface2);color:var(--text-faint);font-size:11px;padding:1px 7px;border-radius:20px;min-width:20px;text-align:center; }
.tab.active .pill { background:rgba(255,255,255,.15);color:inherit; }

/* GRID */
.grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:3px; }

/* AUTH */
#auth-screen { display:none;position:fixed;inset:0;background:var(--bg);z-index:500;align-items:center;justify-content:center;padding:2rem; }
#auth-screen.visible { display:flex; }
#reset-screen { display:none;position:fixed;inset:0;background:var(--bg);z-index:500;align-items:center;justify-content:center;padding:2rem; }
#reset-screen.visible { display:flex; }
.auth-box { width:100%;max-width:360px; }
.auth-logo { text-align:center;margin-bottom:2rem;font-size:28px; }
.auth-btn-primary { width:100%;margin-bottom:8px; }
.auth-btn-secondary { width:100%; }
.auth-btn-forgot { width:100%;text-align:center;margin-top:8px;font-size:13px;background:none;border:none;color:var(--accent);cursor:pointer;font-family:'DM Sans',sans-serif;padding:0; }
.auth-error { display:none;color:var(--danger);font-size:13px;text-align:center;margin-top:1rem; }
.auth-cgu { display:none; margin-top:12px; margin-bottom:1rem; }
.auth-cgu.show { display:block; }
.auth-cgu-label { display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text-muted);line-height:1.5;cursor:pointer; }
.auth-cgu-label input { margin-top:2px;flex-shrink:0;accent-color:var(--accent); }
.auth-cgu-label a { color:var(--accent);text-decoration:underline;text-underline-offset:2px; }
  
.header-actions { display:flex;align-items:center;gap:4px; }
  
/* CARD */
.card { background:var(--surface);border-radius:var(--radius);overflow:hidden;animation:fadeUp .3s ease both;position:relative; }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0}to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translate3d(0,40px,0)}to{opacity:1;transform:translate3d(0,0,0)} }
/* backdrop-filter + anim transform sur iOS : promotion GPU en amont sinon le blur "pop" après le slide */
.modal, .detail-box, .confirm-box, .action-menu { will-change:transform;transform:translateZ(0); }
@keyframes slideDown { from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(40px)} }
@keyframes fadeOut { from{opacity:1}to{opacity:0} }
.card-thumb { width:100%;aspect-ratio:1;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:40px;overflow:hidden; }
.card-thumb img { width:100%;height:100%;object-fit:cover;display:block; }
.card-cat-badge { position:absolute;top:7px;left:7px;font-size:10px;font-weight:500;padding:3px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px; }
/* Actions toujours visibles sur touch, cachées au hover sur desktop */
.card-actions { position:absolute;bottom:2px;right:0; }
.card-action-btn { width:36px;height:36px;border-radius:8px;background:none;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;color:var(--text-muted); }
.card-action-btn:active { background:var(--surface2); }
.card-body { padding:10px 12px 12px; }
.card-name { font-size:13px;font-weight:500;line-height:1.4;margin-bottom:5px;color:var(--text);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1; }
.card-price { font-family:'DM Serif Display',serif;font-size:14px;color:var(--text); }
.card-body > .card-price:empty::before { content:'\00a0'; }
.card-price .currency { font-size:12px;font-family:'DM Sans',sans-serif;font-weight:400;color:var(--text-muted);margin-left:2px; }
.card-link { margin-top:7px;font-size:12px;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:3px; }
.card-note { font-size:11px;color:var(--text-muted);margin-top:5px;font-style:italic;line-height:1.4; }

.list-view { grid-template-columns:1fr !important; gap:3px; }
.list-view .card { display:flex;align-items:center;border-radius:var(--radius); }
.list-view .card-thumb { width:52px;height:52px;min-width:52px;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;font-size:20px;margin:8px 0 8px 8px; }
.list-view .card-cat-badge { display:none; }
.list-view .card-body { flex:1;padding:8px 84px 8px 12px;display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0; }
.list-view .card-row1 { display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden; }
.list-view .card-row2 { display:flex;align-items:center;gap:4px; }
.list-view .card-name { font-size:14px;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block; }
.list-view .card-price { font-size:13px;white-space:nowrap;flex-shrink:0; margin-left: 4px;}
.list-view .card-actions { position:absolute;top:50%;right:4px;transform:translateY(-50%);display:flex;align-items:center;gap:6px; }
.list-view .card-link { display:none; }
.list-view .card-note { display:none; }

/* EMPTY */
.empty { grid-column:1/-1;text-align:center;padding:4.5rem 1rem 3rem;color:var(--text-muted); }
.empty-icon { font-size:44px;margin-bottom:1rem;display:block; }
.empty h3 { font-size:16px;color:var(--text);margin-bottom:.4rem; }

/* MODAL — bottom sheet sur mobile */
.overlay { position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:flex-end;justify-content:center; }
@media(min-width:600px){ .overlay{align-items:center;padding:1rem;} }

/* ─── Camera preview overlay (natif, flux derrière la webview) ─── */
#camera-overlay { position:fixed;inset:0;z-index:700;background:transparent;display:flex;flex-direction:column;justify-content:flex-end; }
body.camera-active { background:transparent !important; }
html:has(body.camera-active) { background:transparent !important; }
body.camera-active > *:not(#camera-overlay):not(script):not(style) { visibility:hidden !important; }
.cam-close { position:absolute;top:calc(env(safe-area-inset-top) + 14px);left:14px;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.45);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-appearance:none; }
.cam-close svg { width:20px;height:20px; }
.cam-bar { display:flex;align-items:center;justify-content:space-around;gap:24px;padding:24px 32px calc(28px + env(safe-area-inset-bottom)); }
.cam-side { width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.45);border:none;color:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-appearance:none;flex:none; }
.cam-side svg { width:24px;height:24px; }
.cam-shutter { width:74px;height:74px;border-radius:50%;background:transparent;border:4px solid #fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;-webkit-appearance:none;flex:none; }
.cam-shutter span { width:58px;height:58px;border-radius:50%;background:#fff;transition:transform .1s ease; }
.cam-shutter:active span { transform:scale(.88); }

/* ─── Recadrage avatar (Cropper.js) ─── */
#avatar-crop-overlay { z-index:700; } /* au-dessus de settings(400/500) + avatar-menu(600) */
.acrop-stage { width:100%;height:min(70vw,320px);margin:10px 0 6px;overflow:hidden;background:var(--surface2);border-radius:var(--radius); }
.acrop-stage img { display:block;max-width:100%; }
.acrop-hint { text-align:center;font-size:12px;color:var(--text-muted);margin:6px 0 10px; }
#avatar-crop-overlay .cropper-view-box,
#avatar-crop-overlay .cropper-face { border-radius:50%; }
#avatar-crop-overlay .cropper-view-box { outline:2px solid var(--accent); }
#avatar-crop-overlay .cropper-line,
#avatar-crop-overlay .cropper-point { background-color:var(--accent); }

/* ─── Visionneuse image plein écran (détail) ─── */
.detail-img img { cursor:zoom-in; }
#img-viewer { position:fixed;inset:0;z-index:700;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease;cursor:zoom-out; }
#img-viewer img { max-width:100%;max-height:100%;object-fit:contain;padding:env(safe-area-inset-top) 8px env(safe-area-inset-bottom);touch-action:none;will-change:transform;transform-origin:center center; }
.imgv-close { position:absolute;top:calc(env(safe-area-inset-top) + 14px);left:14px;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.45);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-appearance:none;z-index:1; }
.imgv-close svg { width:20px;height:20px; }
.modal { background:var(--surface);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border-radius:20px 20px 0 0;width:100%;max-height:92dvh;overflow-y:auto;padding:0 max(.65rem,env(safe-area-inset-left)) calc(1.5rem + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;animation:slideUp .32s cubic-bezier(.4,0,.2,1); }
@media(min-width:600px){ .modal{border-radius:18px;max-width:460px;padding:1.75rem;} }
.modal-handle { width:36px;height:3px;background:var(--border);border-radius:2px;margin:8px auto 1.25rem; }
.action-menu .modal-handle { margin:4px auto 8px; }
@media(min-width:600px){ .modal-handle{display:none;} .action-menu .modal-handle{display:block;} }
.modal-title { font-family:'DM Sans',sans-serif;font-size:18px;margin-bottom:1.25rem; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.field { margin-bottom:1rem; }
.field label { display:block;font-size:11px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px; }
.field input,.field select,.field textarea { width:100%;padding:11px 13px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:16px;color:var(--text);outline:none;resize:vertical;-webkit-appearance:none; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--accent);background:var(--surface); }
.field input::placeholder,.field textarea::placeholder { color:var(--text-faint); }
.input-wrap { position:relative; }
.input-wrap input,.input-wrap textarea { padding-right:40px!important; }
.input-clear { position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-faint);padding:0;opacity:0;pointer-events:none;-webkit-appearance:none;flex-shrink:0;border-radius:50%; }
.input-clear:active { opacity:.6; }
.input-wrap input:not(:placeholder-shown) ~ .input-clear,
.input-wrap textarea:not(:placeholder-shown) ~ .input-clear { opacity:1;pointer-events:auto; }
.input-wrap textarea ~ .input-clear { top:6px;transform:none; }
.search-wrap input { padding-right:40px; }
.search-wrap input:not(:placeholder-shown) ~ .input-clear { opacity:1;pointer-events:auto; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance:none; }
.field select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2378716c'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-color:var(--surface2); }
.img-preview { margin-top:8px;width:100%;aspect-ratio:3/2;border-radius:8px;object-fit:cover;display:none;border:1px solid var(--border); }
.modal-actions { display:flex;gap:8px;margin-top:1.25rem; }
.btn-save { flex:1;padding:14px;background:var(--text);color:var(--bg);border:none;border-radius:40px;font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;cursor:pointer;-webkit-appearance:none; }
.btn-save:active { opacity:.8; }
.btn-cancel { padding:14px 18px;background:transparent;color:var(--text-muted);border:1px solid var(--border);border-radius:40px;font-family:'DM Sans',sans-serif;font-size:15px;cursor:pointer;-webkit-appearance:none; }

/* TOAST */
.toast { position:fixed;bottom:calc(2rem + 50px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(calc(120px + env(safe-area-inset-bottom)));opacity:0;background:var(--accent);color:#1c1917;padding:10px 20px;border-radius:40px;font-size:13px;font-weight:600;z-index:999;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s ease;white-space:nowrap;pointer-events:none; }
.toast.show { transform:translateX(-50%) translateY(0);opacity:1; }

.confirm-overlay { position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:600;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .15s ease; }
@media(min-width:600px){ .confirm-overlay{align-items:center;padding:1rem;} }
.confirm-box { background:var(--surface);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border-radius:20px 20px 0 0;width:100%;padding:1.5rem max(.65rem,env(safe-area-inset-left)) calc(1.5rem + env(safe-area-inset-bottom));animation:slideUp .32s cubic-bezier(.4,0,.2,1); }
@media(min-width:600px){ .confirm-box{border-radius:18px;max-width:380px;padding:1.5rem;} }
.confirm-title { font-family:'DM Sans',sans-serif;font-size:18px;margin-bottom:.4rem; }
.confirm-text { font-size:13px;color:var(--text-muted);margin-bottom:1.25rem;line-height:1.5; }
.confirm-actions { display:flex;gap:8px; }
.btn-danger { flex:1;padding:14px;background:none;color:var(--danger);border:1px solid var(--danger);border-radius:40px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;cursor:pointer;-webkit-appearance:none; }
.btn-danger:active { opacity:.8; }

.detail-overlay { position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:250;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease; }
.detail-header { position:relative;display:flex;justify-content:center;align-items:center;padding:8px 1.25rem .5rem; }
.detail-handle { width:36px;height:3px;background:var(--border);border-radius:2px;margin:0 auto; }
.detail-box { background:var(--surface);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border-radius:20px 20px 0 0;width:100%;max-width:600px;max-height:90dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 0;animation:slideUp .4s ease;scrollbar-width:none;display:flex;flex-direction:column; }
.detail-box::-webkit-scrollbar { display:none; }
.detail-img { position:relative;width:calc(100% - 12px);aspect-ratio:1/1;object-fit:cover;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:80px;margin:6px;border-radius:4px;overflow:hidden; }
.detail-img img { width:100%;height:100%;object-fit:cover; }
.detail-body { padding:0.75rem max(.65rem,env(safe-area-inset-left)) calc(1rem + env(safe-area-inset-bottom));max-width:600px;margin:0 auto;width:100%; }
.detail-cat { position:absolute;top:14px;left:14px;font-size:11px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border-radius:20px;z-index:2; }
.detail-name { font-size:18px;line-height:1.3;margin-bottom:0.4rem; }
.detail-price { font-family:'DM Serif Display',serif;font-size:16px;margin-bottom:0.5rem; }
.detail-price .currency { font-size:14px;font-family:'DM Sans',sans-serif;font-weight:400;color:var(--text-muted);margin-left:2px; }
.detail-url { display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text);text-decoration:none;margin-bottom:0.5rem; }
.detail-note { font-size:14px;color:var(--text-muted);font-style:italic;line-height:1.6;margin-bottom:0.5rem; }
.detail-note::before { content:'\201C'; }
.detail-note::after { content:'\201D'; }
.detail-date { font-size:11px;color:var(--text-faint);margin-bottom: 1rem; }
.detail-share-meta { font-size:12px;color:var(--text-muted);margin-bottom:.4rem; }
.detail-share-meta strong { color:var(--text);font-weight:500;margin-right:.25rem; }

.action-menu-overlay { position:fixed;inset:0;z-index:280;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.5); }
.action-menu { background:var(--surface);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border-radius:20px 20px 0 0;width:100%;max-width:500px;padding:8px 0 calc(1rem + env(safe-area-inset-bottom));animation:slideUp .32s cubic-bezier(.4,0,.2,1); }
.action-menu-item { display:flex;align-items:center;gap:14px;padding:14px max(1.25rem,env(safe-area-inset-left));cursor:pointer;font-size:15px;color:var(--text);transition:background .1s; }
.action-menu-item:active { background:var(--surface2); }
.action-menu-item svg { width:18px;height:18px;flex-shrink:0;color:var(--text-muted); }
.action-menu-item.danger { color:var(--danger); }
.action-menu-item.danger svg { color:var(--danger); }
.action-menu-cancel { display:flex;align-items:center;justify-content:center;padding:14px;font-size:15px;font-weight:500;color:var(--text-muted);cursor:pointer;margin:8px max(.65rem,env(safe-area-inset-left)) 0;border:1px solid var(--border);background:none;border-radius:40px; }

/* DETAIL LOCATION (mini carte OSM + bouton Maps) */
.detail-location { margin:1rem 0;display:flex;flex-direction:column;gap:8px; }
.detail-location[hidden] { display:none; }
.detail-location-header { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.detail-location-title { display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--text); }
.detail-location-title svg { width:14px;height:14px;color:var(--text-muted); }
.detail-map-link { display:inline-block;padding:8px 14px;font-size:13px;color:var(--text-muted);text-decoration:none;border:1px solid var(--border);border-radius:40px;background:transparent;font-family:'DM Sans',sans-serif;transition:background .15s; }
.detail-map-link:active { background:var(--surface2); }
.detail-map-frame { width:100%;height:180px;border:1px solid var(--border2);border-radius:var(--radius);background:var(--surface2); }

/* Picker GPS toggle row : adapté au contexte bottom-sheet (pas de card, juste un row) */
.picker-gps-row { margin:0;padding:10px max(.65rem,env(safe-area-inset-left));background:transparent;border-radius:0; }

/* PHOTO CAPTURE MODAL */
.photo-capture-zone { position:relative;width:100%;aspect-ratio:4/3;background:var(--surface2);border-radius:var(--radius);overflow:hidden;margin-bottom:1rem;border:1px dashed var(--border2); }
.photo-capture-btn { position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:none;border:none;cursor:pointer;color:var(--text-muted);font-family:'DM Sans',sans-serif;font-size:14px; }
.photo-capture-btn:active { background:var(--surface); }
.photo-capture-btn svg { width:42px;height:42px;color:var(--text-faint); }
.photo-preview-wrap { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }
.photo-preview { width:100%;height:100%;object-fit:cover; }
.photo-retake { position:absolute;bottom:10px;right:10px;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;background:rgba(0,0,0,.65);color:#fff;border:none;border-radius:40px;font-family:'DM Sans',sans-serif;font-size:13px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); }
.photo-retake:active { opacity:.8; }
.photo-retake svg { width:14px;height:14px; }

/* GPS opt-in toggle */
.gps-toggle-row { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--surface2);border-radius:var(--radius);margin-bottom:1rem; }
.gps-toggle-row[hidden] { display:none; }
.gps-toggle-text { display:flex;flex-direction:column;gap:2px;min-width:0;flex:1; }
.gps-toggle-title { display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--text);font-weight:500; }
.gps-toggle-title svg { width:14px;height:14px;color:var(--text-muted);flex-shrink:0; }
.gps-toggle-desc { font-size:12px;color:var(--text-muted);line-height:1.35; }
.gps-toggle-hint { font-size:11px;color:var(--text-faint);font-style:italic;margin-top:4px;line-height:1.3; }
.gps-switch { position:relative;display:inline-flex;align-items:center;width:44px;height:26px;flex-shrink:0;cursor:pointer;margin-top:2px; }
.gps-switch input { position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1; }
.gps-switch-slider { position:absolute;inset:0;background:var(--border2);border-radius:13px;transition:background .2s; }
.gps-switch-slider::after { content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.25); }
.gps-switch input:checked ~ .gps-switch-slider { background:var(--accent); }
.gps-switch input:checked ~ .gps-switch-slider::after { transform:translateX(18px); }

/* ADD MENU (FAB choice sheet) */
#add-menu-overlay .action-menu-item { align-items:flex-start;padding:16px max(1.25rem,env(safe-area-inset-left)); }
#add-menu-overlay .action-menu-item svg { margin-top:2px;width:18px;height:18px;color:var(--text-muted); }
.add-opt-text { display:flex;flex-direction:column;gap:2px;min-width:0; }
.add-opt-title { font-size:15px;font-weight:500;color:var(--text); }
.add-opt-desc { font-size:13px;color:var(--text-muted); }
.add-opt-hint { display:none;font-size:12px;color:var(--text-faint);font-style:italic;margin-top:2px; }
/* Photo option disabled on web (no native camera) */
html:not(.is-native) #add-opt-photo { opacity:.5;cursor:not-allowed;pointer-events:auto; }
html:not(.is-native) #add-opt-photo:active { background:transparent; }
html:not(.is-native) #add-opt-photo .add-opt-desc { display:none; }
html:not(.is-native) #add-opt-photo .add-opt-hint { display:block; }

/* CARD STAR */
.card-star { width:36px;height:36px;background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;-webkit-appearance:none;flex-shrink:0; }
.card-star:active { opacity:.7; }
.card-star svg polygon { fill:none;stroke:var(--text-faint);stroke-width:1.5; }
.card-star.is-fav svg polygon { fill:var(--accent);stroke:var(--accent); }
#amenu-fav-icon.is-fav { fill:var(--accent);stroke:var(--accent); }
.card > .card-star { position:absolute;top:2px;right:2px;width:36px;height:36px; }
.list-view .card-row1 .card-name { min-width:0; }

/* SETTINGS */
#settings-screen { position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s ease; }
#settings-screen.visible { opacity:1;pointer-events:auto; }
.settings-panel { position:absolute;left:0;top:0;bottom:0;width:85%;max-width:420px;background:var(--bg);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 0 40px rgba(0,0,0,.25); }
#settings-screen.visible .settings-panel { transform:translateX(0); }
#settings-screen .settings-body { padding-top:calc(env(safe-area-inset-top) + 1.25rem); }
.settings-header { display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top) + 6px) max(.65rem,env(safe-area-inset-left)) 6px;border-bottom:1px solid var(--border2); }
.settings-back { background:none;border:none;cursor:pointer;color:var(--text);display:flex;align-items:center;justify-content:center;width:44px;height:44px; }
.settings-title { font-size:18px;font-weight:500; }
.settings-body { flex:1;overflow-y:auto;padding:0 max(.65rem,env(safe-area-inset-left)) calc(2rem + env(safe-area-inset-bottom)); }
.settings-section { font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--text);padding:.9rem 0 .35rem; }
.settings-section-sep { height:1px;background:var(--border2);margin:0; }
.settings-item { padding:.6rem 0; }

.settings-item-row { display:flex;align-items:center;justify-content:space-between; }
.settings-item-link { display:flex;align-items:center;justify-content:space-between;cursor:pointer;text-decoration:none;color:inherit; }
#btn-open-friends, #btn-open-prefs { padding:.9rem 0; }
.settings-nav { display:flex;align-items:center;gap:14px;min-width:0; }
.settings-nav svg { width:19px;height:19px;flex-shrink:0;color:var(--text-muted); }
.settings-nav .settings-label { font-size:16.5px;font-weight:500; }
.settings-minor { padding:.55rem 0; }
.settings-minor .settings-label { font-size:13px;font-weight:400;color:var(--text-muted); }
.settings-chevron { color:var(--text-faint);flex-shrink:0; }
.settings-account-card { display:flex;align-items:center;gap:14px;width:100%;padding:1.1rem .25rem;background:none;border:none;cursor:pointer;text-align:left;color:inherit;-webkit-appearance:none;font-family:inherit; }
.settings-account-card:active { opacity:.7; }
.settings-account-avatar { width:52px;height:52px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#000;font-family:'DM Sans',sans-serif;font-weight:700;font-size:21px;flex-shrink:0; }
.settings-account-text { display:flex;flex-direction:column;gap:2px;flex:1;min-width:0; }
.settings-account-name { font-family:'DM Sans',sans-serif;font-size:17px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.settings-account-sub { font-size:13px;color:var(--text-muted); }
.settings-item-link.danger { color:var(--danger); }
.settings-label { font-size:14px;color:var(--text);font-family:'DM Sans',sans-serif; }
.settings-input { width:100%;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:15px;color:var(--text);outline:none;margin-top:6px;-webkit-appearance:none; }
.settings-input:focus { border-color:var(--accent); }
.settings-input-wrap { position:relative;margin-top:6px; }
.settings-input-wrap .settings-input { margin-top:0;padding-right:42px; }
.settings-input[readonly] { opacity:.45;cursor:not-allowed; }
.settings-lock-btn { position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-muted);padding:8px;display:flex;align-items:center;border-radius:50%;width:36px;height:36px;justify-content:center; }
.settings-lock-btn:active { background:var(--surface2); }
.settings-btn-save { width:100%;padding:14px;background:var(--text);color:var(--bg);border:none;border-radius:40px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;cursor:pointer;margin-top:1rem;-webkit-appearance:none; }
.settings-error { font-size:13px;color:var(--danger);text-align:center;margin-top:.5rem;min-height:1rem; }
.settings-toggle-group { display:flex;gap:4px;background:var(--surface2);padding:3px;border-radius:10px; }
.settings-toggle { padding:10px 14px;border:none;background:none;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text-muted);cursor:pointer;min-height:36px; }
.settings-select { padding:6px 10px;background:var(--surface2);border:none;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text);cursor:pointer;outline:none;-webkit-appearance:none;max-width:160px; }
.settings-toggle.active { background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.1); }
.settings-version { text-align:center;font-size:12px;color:var(--text-faint);padding:2rem 0 1rem; }
.settings-item-link-right { display:flex;align-items:center;gap:8px; }
.settings-badge { background:var(--notif);color:#fff;border-radius:999px;padding:1px 7px;font-size:11px;font-weight:600;min-width:16px;text-align:center;line-height:1.3; }

/* FRIENDS */
#friends-screen, #account-screen, #prefs-screen { position:fixed;inset:0;background:var(--bg);z-index:500;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1); }
#friends-screen.visible, #account-screen.visible, #prefs-screen.visible { transform:translateX(0); }
.friends-body { flex:1;overflow-y:auto;padding:0 max(.65rem,env(safe-area-inset-left)) calc(2rem + env(safe-area-inset-bottom)); }
.friends-search-wrap { position:relative;padding:.75rem 0 .5rem; }
.friends-search-input { width:100%;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:15px;color:var(--text);outline:none;-webkit-appearance:none; }
.friends-search-input:focus { border-color:var(--accent); }
.friends-search-results { display:flex;flex-direction:column;gap:0;margin-bottom:.5rem; }
.friends-search-results[hidden], .friends-tabs[hidden] { display:none; }
.friends-tabs { display:flex;gap:4px;background:var(--surface2);padding:3px;border-radius:10px;margin:.25rem 0 .75rem; }
.friends-tab { flex:1;padding:11px 12px;border:none;background:none;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;-webkit-appearance:none;min-height:40px; }
.friends-tab.active { background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.1); }
.friends-tab-badge { background:var(--notif);color:#fff;border-radius:999px;padding:1px 6px;font-size:11px;font-weight:600;min-width:16px;text-align:center;line-height:1.2; }
.friends-empty { text-align:center;color:var(--text-faint);font-size:14px;padding:2rem 0; }
.friends-list { display:flex;flex-direction:column;gap:0; }
.friends-row { display:flex;align-items:center;gap:10px;padding:.6rem .25rem;border-bottom:1px solid var(--border2); }
.friends-row-avatar { width:36px;height:36px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;color:#000;font-size:15px;flex-shrink:0; }
.friends-row-name { flex:1;font-size:14px;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.friends-row-actions { display:flex;gap:6px;flex-shrink:0; }
.friends-btn { padding:10px 16px;border:1px solid var(--border);background:none;border-radius:40px;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text);cursor:pointer;-webkit-appearance:none;min-height:36px; }
.friends-btn.primary { background:var(--text);color:var(--bg);border-color:var(--text); }
.friends-btn.danger { color:var(--danger);border-color:color-mix(in srgb, var(--danger) 30%, transparent); }
.friends-btn:active { opacity:.75; }

.received-row { display:flex;gap:10px;padding:.7rem .25rem;border-bottom:1px solid var(--border2);align-items:center; }
.received-thumb { width:48px;height:48px;border-radius:8px;background:var(--surface2);flex-shrink:0;object-fit:cover;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:20px; }
.received-info { flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px; }
.received-name { font-size:14px;color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.received-meta { font-size:12px;color:var(--text-muted); }
.received-sender { font-size:11px;color:var(--text-faint); }
.received-actions { display:flex;flex-direction:column;gap:4px;flex-shrink:0;justify-content:center; }

.friend-picker { max-height:70vh;display:flex;flex-direction:column; }
.friend-picker-list .friends-row { cursor:pointer;border-radius:8px;padding:.6rem .5rem;transition:background .15s ease; }
.friend-picker-list .friends-row.is-selected { background:var(--surface2); }
.friend-picker-check { width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:transparent;transition:background .15s ease,border-color .15s ease,color .15s ease; }
.friends-row.is-selected .friend-picker-check { background:var(--text);border-color:var(--text);color:var(--bg); }
.friend-picker-actions { display:flex;flex-direction:column;gap:6px;padding:10px max(.65rem,env(safe-area-inset-left)) 0; }
.friend-picker-send { width:100%;padding:14px;background:var(--text);color:var(--bg);border:none;border-radius:40px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;cursor:pointer;-webkit-appearance:none; }
.friend-picker-send:disabled { opacity:.4;cursor:not-allowed; }
.friend-picker-send:not(:disabled):active { opacity:.8; }
.friend-picker-title { font-size:16px;font-weight:600;text-align:center;padding:10px 0 4px;color:var(--text); }
.friend-picker-search-wrap { padding:8px max(.65rem,env(safe-area-inset-left)); }
.friend-picker-list { flex:1;overflow-y:auto;padding:0 max(.65rem,env(safe-area-inset-left)); }
.friend-picker-list .friends-row { border-bottom:none; }

@media(max-width:480px) {
  .header-stats{display:none}
  .sort-select{display:none}
  .add-btn span{display:none}
  .add-btn{padding:10px 13px}
}

/* FAB */
.fab { position:fixed;bottom:calc(1.25rem + env(safe-area-inset-bottom));right:max(.85rem,env(safe-area-inset-right));width:46px;height:46px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000;box-shadow:0 2px 12px rgba(0,0,0,.18);z-index:100;-webkit-appearance:none; }
.fab:active { opacity:.8;transform:scale(.95); }

/* HEADER HIDDEN (scroll) — seul le header-inner (56px + safe-area) remonte */
.header-hidden { transform:translateY(calc(-56px - env(safe-area-inset-top))) translateZ(0); }

/* AVATAR BUTTON */
.avatar-btn { position:relative;width:36px;height:36px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;color:#000;flex-shrink:0;-webkit-appearance:none;letter-spacing:0; }
.avatar-btn:active { opacity:.75; }
.avatar-btn.has-notif::after { content:attr(data-count);position:absolute;top:-2px;right:-2px;background:var(--notif);color:#fff;font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;min-width:16px;height:16px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;box-sizing:border-box; }

/* AVATAR PHOTO (header, friend rows, picker, settings preview) */
.friends-row-avatar.has-photo,
.settings-avatar-preview.has-photo,
.settings-account-avatar.has-photo,
.received-sender-avatar.has-photo { padding:0;overflow:hidden;background:var(--surface2); }
/* Pas d'overflow:hidden ici sinon le badge notif (::after qui dépasse) est rogné */
.avatar-btn.has-photo { padding:0;background:var(--surface2); }
.avatar-btn.has-photo img { border-radius:50%; }
.avatar-btn img,
.friends-row-avatar img,
.settings-avatar-preview img,
.settings-account-avatar img,
.received-sender-avatar img { width:100%;height:100%;object-fit:cover;display:block; }

/* SETTINGS — Section avatar (écran Compte) */
.account-avatar-block { display:flex;justify-content:center;padding:.5rem 0 1.25rem; }
.account-avatar-wrap { position:relative;width:96px;height:96px; }
.settings-avatar-preview { width:96px;height:96px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#000;font-family:'DM Sans',sans-serif;font-weight:700;font-size:36px;flex-shrink:0; }
.account-avatar-edit { position:absolute;right:-2px;bottom:-2px;width:32px;height:32px;border-radius:50%;background:var(--text);color:var(--bg);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-appearance:none;padding:0; }
.account-avatar-edit:active { opacity:.75; }
.account-avatar-edit svg { width:15px;height:15px; }

/* ACTION MENU — titre (menu photo de profil) */
.action-menu-title { font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);padding:6px max(1.25rem,env(safe-area-inset-left)) 10px; }
/* Ouvert depuis l'écran Compte (z-index 500) → doit passer au-dessus */
#avatar-menu-overlay { z-index:600; }

/* RECEIVED — petit avatar à côté du @sender */
.received-sender { display:flex;align-items:center;gap:6px; }
.received-sender-avatar { width:16px;height:16px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#000;font-family:'DM Sans',sans-serif;font-size:10px;font-weight:700;flex-shrink:0; }

/* SPLASH SCREEN */
#splash-screen { position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;align-items:center;justify-content:center; }
.splash-logo { font-family:'DM Sans',sans-serif;font-size:28px;color:var(--text); }
.splash-logo span { color:var(--accent);font-weight:bold; }
#splash-screen.hide .splash-logo { animation:splashText .65s cubic-bezier(.2,0,.8,1) forwards; }
#splash-screen.hide { animation:splashFade .65s ease forwards; }
@keyframes splashText { 0%{transform:scale(1);opacity:1} 100%{transform:scale(3.5);opacity:0} }
@keyframes splashFade { 0%{opacity:1} 40%{opacity:1} 100%{opacity:0} }

/* TABS BAR (search + onglets) */
.tabs-bar { display:flex;align-items:center;gap:8px;max-width:1040px;margin:0 auto;padding:.25rem max(.65rem,env(safe-area-inset-left)) .3rem;transition:padding-top .4s cubic-bezier(.4,0,.2,1); }
.header-hidden .tabs-bar { padding-top:calc(.25rem + env(safe-area-inset-top)); }
.tabs-bar .tabs-wrap { flex:1;min-width:0;margin-bottom:0; }
.btn-search-tab { flex-shrink:0; }
.btn-search-tab.active { color:var(--accent); }
.sort-menu-item.active { color:var(--accent); }
.sort-menu-item.active svg { color:var(--accent); }