/* =====================================================================
LIVRACT · livract.css
Single drop-in stylesheet for Django (HTML/CSS, no build step).
Put in: yourapp/static/livract/css/livract.css
Load with: {% load static %}
Contains: @font import · design tokens (:root) · component classes (.lv-*).
===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');
:root {
/* neutrals */
--paper:#F8F5F1; --paper-tint:#F2EDE6; --surface:#FFF; --surface-2:#FBF9F6;
--hairline:#EBE5DC; --hairline-soft:#F1ECE4;
--ink:#17172B; --ink-2:#6E6862; --ink-3:#8B8580; --ink-4:#B8AEA4;
/* brand */
--amber:#F5B400; --amber-2:#F1972A; --amber-soft:#FCEFC9; --amber-ink:#D97706;
--gradient-amber:linear-gradient(135deg,#F7BE1E 0%,#F1972A 100%);
--night:#241B40; --night-2:#2E2350; --night-3:#3A2C63; --on-night-2:#B9AECB;
/* share intents */
--don:#7C3AED; --don-soft:#F3EFFE; --pret:#2563EB; --pret-soft:#EFF6FF;
--echange:#059669; --echange-soft:#ECFDF5; --vente:#D97706; --vente-soft:#FFF7E8;
/* accent */
--like:#EF4444; --online:#22C55E; --rust:#C2410C; --danger:#DC2626; --danger-soft:#FEE2E2;
/* type */
--font-sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-heavy:800;
/* radii / shadow / motion */
--r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:24px; --r-pill:999px;
--shadow-card:0 2px 12px rgba(17,19,32,.07);
--shadow-float:0 10px 30px rgba(17,19,32,.12);
--shadow-amber:0 10px 30px rgba(245,180,0,.36), inset 0 2px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.10);
--ease-out:cubic-bezier(.22,.61,.36,1); --dur:200ms;
--gutter:20px;
}
/* ---- base helpers ---- */
*, *::before, *::after { box-sizing:border-box; }
/* Fond aussi sur : sinon la zone système du bas (safe-area / overscroll) laisse
voir le blanc par défaut de — la « bande blanche » sous la barre de nav. */
html { background:var(--paper); }
.lv-app { font-family:var(--font-sans); color:var(--ink); background:var(--paper); margin:0; }
.lv-ic { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2;
stroke-linecap:round; stroke-linejoin:round; display:block; flex:none; }
/* ---- Button ---- */
.lv-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
border:none; cursor:pointer; font-family:var(--font-sans); font-weight:var(--fw-bold);
border-radius:var(--r-pill); white-space:nowrap; position:relative; overflow:hidden;
line-height:1.1; padding:12px 22px; font-size:15px; text-decoration:none;
transition:transform 120ms var(--ease-out), filter var(--dur) var(--ease-out); }
.lv-btn:active { transform:scale(.97); }
.lv-btn--primary { background:var(--gradient-amber); color:#fff; box-shadow:var(--shadow-amber); }
.lv-btn--primary::before { content:''; position:absolute; inset:0; border-radius:inherit;
background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,transparent 55%); pointer-events:none; }
.lv-btn--secondary { background:var(--paper-tint); color:var(--ink); }
.lv-btn--ghost { background:transparent; color:var(--ink-3); }
.lv-btn--outline { background:transparent; color:var(--amber-ink); box-shadow:inset 0 0 0 1.5px var(--amber); }
.lv-btn--danger { background:var(--danger-soft); color:var(--danger); }
.lv-btn--sm { padding:8px 16px; font-size:13px; }
.lv-btn--lg { padding:16px 26px; font-size:17px; }
.lv-btn--block { display:flex; width:100%; }
.lv-btn > * { position:relative; }
/* ---- Badge (share intent) ---- */
.lv-badge { display:inline-flex; align-items:center; gap:5px; border-radius:var(--r-pill);
font-weight:var(--fw-heavy); line-height:1; padding:6px 13px; font-size:14px; }
.lv-badge--sm { padding:5px 11px; font-size:13px; }
.lv-badge--don { color:var(--don); background:var(--don-soft); }
.lv-badge--pret { color:var(--pret); background:var(--pret-soft); }
.lv-badge--echange { color:var(--echange); background:var(--echange-soft); }
.lv-badge--vente { color:var(--vente); background:var(--vente-soft); }
/* ---- Tag (genre) ---- */
.lv-tag { display:inline-flex; align-items:center; border-radius:var(--r-pill);
font-weight:var(--fw-bold); line-height:1; color:var(--ink-3); background:var(--paper-tint);
padding:6px 14px; font-size:13px; }
.lv-tag--sm { padding:3px 9px; font-size:11px; }
/* ---- Avatar ---- */
.lv-avatar { position:relative; display:inline-block; flex:none; border-radius:50%; aspect-ratio:1; }
.lv-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;
background:var(--paper-tint); box-sizing:border-box; }
.lv-avatar--ring { background:var(--gradient-amber); padding:6%; }
.lv-avatar--ring img { border:2px solid var(--surface); }
.lv-avatar__dot { position:absolute; right:0; bottom:0; width:24%; height:24%; min-width:9px;
min-height:9px; border-radius:50%; background:var(--online); border:2px solid var(--surface); }
/* ---- Search bar ---- */
.lv-search { display:flex; gap:12px; align-items:stretch; }
.lv-search__field { flex:1; display:flex; align-items:center; gap:10px; min-width:0;
background:var(--surface); border-radius:var(--r-pill); padding:13px 18px; box-shadow:var(--shadow-card); }
.lv-search__field input { flex:1; min-width:0; border:none; outline:none; background:transparent;
font-family:var(--font-sans); font-size:15px; font-weight:var(--fw-medium); color:var(--ink); }
.lv-search__field .lv-ic { color:var(--ink-4); }
.lv-search__filter { flex:none; border:none; cursor:pointer; padding:6px; margin:-6px -6px -6px 0;
border-radius:var(--r-md); background:transparent; color:var(--amber); display:flex;
align-items:center; justify-content:center; transition:background .15s, color .15s; }
.lv-search__filter:hover { background:var(--amber-soft); color:var(--amber-ink); }
/* ---- Filter chip ---- */
.lv-chip { display:inline-flex; align-items:center; gap:6px; padding:10px 18px; border-radius:var(--r-pill);
font-family:var(--font-sans); font-weight:var(--fw-bold); font-size:15px; line-height:1; cursor:pointer;
border:none; white-space:nowrap; background:var(--surface); color:var(--ink-2);
box-shadow:inset 0 0 0 1.5px var(--hairline); transition:all var(--dur) var(--ease-out); }
.lv-chip--dropdown { background:var(--paper-tint); color:var(--ink); box-shadow:none; }
.lv-chip--selected { background:var(--gradient-amber); color:#fff; box-shadow:var(--shadow-amber); }
/* ---- Segmented toggle ---- */
.lv-seg { display:flex; gap:6px; padding:6px; background:var(--paper-tint); border-radius:var(--r-pill); }
.lv-seg__opt { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px;
border-radius:var(--r-pill); border:none; cursor:pointer; font-family:var(--font-sans);
font-weight:var(--fw-bold); font-size:17px; background:transparent; color:var(--ink-3);
transition:all var(--dur) var(--ease-out); }
.lv-seg__opt--on { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-card); }
.lv-seg__opt--on .lv-ic { color:var(--amber); }
/* ---- Section header ---- */
.lv-sec { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.lv-sec h2 { margin:0; font-size:27px; font-weight:var(--fw-heavy); letter-spacing:-.02em; color:var(--ink); }
.lv-sec__link { display:inline-flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer;
color:var(--amber-ink); font-family:var(--font-sans); font-weight:var(--fw-heavy); font-size:15px; text-decoration:none; }
.lv-sec__count { color:var(--amber-ink); font-weight:var(--fw-heavy); font-size:15px; }
/* ---- BookCard (list row) ---- */
.lv-book { position:relative; display:flex; gap:16px; background:var(--surface); border-radius:var(--r-xl);
padding:16px; box-shadow:var(--shadow-card); transition:box-shadow .2s var(--ease-out), transform .2s var(--ease-out); }
.lv-book:hover { box-shadow:var(--shadow-float); transform:translateY(-2px); }
.lv-book__cover { width:104px; height:136px; border-radius:var(--r-lg); flex:none; overflow:hidden; background:var(--paper-tint); }
.lv-book__cover img { width:100%; height:100%; object-fit:cover; display:block; }
/* Subtle overlay on cover images for depth + badge legibility. */
.lv-book__cover, .lv-tile__cover { position:relative; }
.lv-book__cover::after, .lv-tile__cover::after { content:""; position:absolute; inset:0; border-radius:inherit;
pointer-events:none; background:linear-gradient(180deg, rgba(17,19,32,.06) 0%, rgba(17,19,32,0) 30%, rgba(17,19,32,.16) 100%); }
/* Branded cover placeholder (no image). */
.lv-cover-ph { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
width:100%; height:100%; padding:12px 9px; text-align:center;
background:linear-gradient(155deg, var(--paper-tint), var(--surface-2)); box-shadow:inset 3px 0 0 var(--amber); }
.lv-cover-ph__ic { color:var(--amber-ink); opacity:.55; }
.lv-cover-ph__title { font-size:11px; font-weight:var(--fw-bold); line-height:1.2; color:var(--ink-2);
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.lv-cover-ph--lg { gap:12px; padding:24px 18px; box-shadow:inset 4px 0 0 var(--amber); }
.lv-cover-ph--lg .lv-cover-ph__title { font-size:19px; -webkit-line-clamp:4; }
.lv-cover-ph__author { font-size:12px; color:var(--ink-3); }
.lv-book__body { flex:1; min-width:0; padding-right:28px; }
.lv-book__title { font-size:17px; font-weight:var(--fw-bold); color:var(--ink); letter-spacing:-.01em; overflow-wrap:anywhere; }
/* Toute la carte est cliquable : le titre est le lien, étiré sur la carte entière. */
.lv-book__title::after { content:""; position:absolute; inset:0; z-index:1; }
.lv-book__author { font-size:14px; color:var(--ink-3); margin-top:2px; }
.lv-book__meta { display:flex; align-items:center; gap:12px; margin-top:10px; }
.lv-book__dist { display:inline-flex; align-items:center; gap:3px; color:var(--amber-ink); font-weight:var(--fw-bold); font-size:13px; }
.lv-book__dist .lv-ic { width:15px; height:15px; }
.lv-book__owner { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; color:var(--ink-3); font-weight:var(--fw-medium); }
.lv-book__like { position:absolute; top:16px; right:14px; z-index:2; background:none; border:none; cursor:pointer; padding:2px; }
.lv-book__like .lv-ic { width:22px; height:22px; color:var(--ink-4); transition:transform .15s var(--ease-out); }
.lv-book__like:active .lv-ic { transform:scale(.85); }
.lv-book__like--on .lv-ic { color:var(--like); fill:var(--like); animation:lv-heart-pop .32s var(--ease-out); }
@keyframes lv-heart-pop { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }
/* ---- BookTile (cover-first) ---- */
.lv-tile { width:168px; flex:none; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-card); overflow:hidden; transition:box-shadow .2s var(--ease-out), transform .2s var(--ease-out); }
.lv-tile:hover { box-shadow:var(--shadow-float); transform:translateY(-2px); }
.lv-tile__cover { position:relative; width:100%; aspect-ratio:1/1; background:var(--paper-tint); }
.lv-tile__cover img { width:100%; height:100%; object-fit:cover; display:block; }
.lv-tile__badge { position:absolute; left:10px; bottom:10px; }
.lv-tile__body { padding:12px 14px 14px; }
.lv-tile__title { font-size:15px; font-weight:var(--fw-bold); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lv-tile__author { font-size:13px; color:var(--ink-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ---- ReaderCard ---- */
.lv-reader { background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--shadow-card); overflow:hidden; }
.lv-reader__top { display:flex; align-items:center; gap:14px; padding:16px; }
.lv-reader__name { font-size:17px; font-weight:var(--fw-bold); color:var(--ink); }
.lv-reader__persona { font-size:14px; font-weight:var(--fw-bold); color:var(--amber-ink); margin-top:1px; }
.lv-reader__meta { display:flex; align-items:center; gap:10px; margin-top:6px; color:var(--ink-3); font-size:13px; font-weight:var(--fw-medium); }
.lv-reader__meta span { display:inline-flex; align-items:center; gap:4px; }
.lv-reader__meta .lv-ic { width:14px; height:14px; color:var(--ink-4); }
.lv-reader__foot { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 16px; border-top:1px solid var(--hairline-soft); }
.lv-reader__chip { width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.lv-reader__chip .lv-ic { width:15px; height:15px; }
.lv-reader__share { font-size:13px; font-weight:var(--fw-heavy); color:var(--amber-2); margin-left:2px; }
/* ---- EventCard ---- */
.lv-event { display:flex; background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--shadow-card); overflow:hidden; }
.lv-event__img { width:120px; flex:none; background:var(--paper-tint); }
.lv-event__img img { width:100%; height:100%; object-fit:cover; display:block; }
.lv-event__body { flex:1; min-width:0; padding:14px 16px; }
.lv-event__head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.lv-event__status { display:inline-flex; align-items:center; padding:4px 11px; border-radius:var(--r-pill); font-size:13px; font-weight:var(--fw-bold); }
.lv-event__status--upcoming { color:var(--pret); background:var(--pret-soft); }
.lv-event__status--soon { color:var(--amber-ink); background:var(--vente-soft); }
.lv-event__title { font-size:17px; font-weight:var(--fw-bold); color:var(--ink); margin-top:10px; letter-spacing:-.01em; }
.lv-event__venue { font-size:14px; color:var(--ink-3); margin-top:2px; }
.lv-event__when { display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; margin-top:10px; color:var(--ink-2); font-size:13px; font-weight:var(--fw-semibold); }
.lv-event__when span { display:inline-flex; align-items:center; gap:5px; }
.lv-event__when .lv-ic { width:15px; height:15px; color:var(--ink-4); }
.lv-event__foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; }
.lv-event__people { display:inline-flex; align-items:center; gap:5px; color:var(--ink-3); font-size:13px; font-weight:var(--fw-medium); }
.lv-event__price { padding:5px 12px; border-radius:var(--r-pill); font-size:13px; font-weight:var(--fw-heavy); color:var(--ink-2); box-shadow:inset 0 0 0 1.5px var(--hairline); }
.lv-event__price--free { color:var(--echange); background:var(--echange-soft); box-shadow:none; }
/* ---- StatsPanel ---- */
.lv-stats { display:flex; align-items:stretch; background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--shadow-card); padding:20px 8px; }
.lv-stats__col { flex:1; text-align:center; padding:0 8px; }
.lv-stats__col + .lv-stats__col { border-left:1px solid var(--hairline); }
.lv-stats__val { font-size:32px; font-weight:var(--fw-heavy); line-height:1; letter-spacing:-.02em; color:var(--ink); }
.lv-stats__lbl { font-size:13px; color:var(--ink-3); margin-top:6px; font-weight:var(--fw-medium); }
/* ---- Bottom nav (mobile) ---- */
.lv-bottomnav { display:flex; align-items:flex-end; justify-content:space-around; background:var(--surface);
border-top:1px solid var(--hairline); padding:10px 8px; }
.lv-bottomnav__item { flex:1; background:none; border:none; cursor:pointer; display:flex; flex-direction:column;
align-items:center; gap:5px; text-decoration:none; color:var(--ink-3); }
.lv-bottomnav__ic { position:relative; width:46px; height:34px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center;
transition:all var(--dur) var(--ease-out); }
.lv-bottomnav__badge { position:absolute; top:-3px; right:-1px; min-width:17px; height:17px; padding:0 4px; border-radius:9px;
background:var(--like); color:#fff; font-size:10px; font-weight:var(--fw-heavy); line-height:1; display:flex; align-items:center; justify-content:center;
border:2px solid var(--surface); }
.lv-bottomnav__item--on .lv-bottomnav__ic { background:var(--gradient-amber); box-shadow:var(--shadow-amber); }
.lv-bottomnav__item--on .lv-bottomnav__ic .lv-ic { color:#fff; }
.lv-bottomnav__lbl { font-size:10px; line-height:1.15; text-align:center; max-width:74px; font-weight:var(--fw-semibold); }
.lv-bottomnav__item--on .lv-bottomnav__lbl { font-weight:var(--fw-heavy); color:var(--amber-ink); }
/* Visiteur : lien « Se connecter » discret (topbar) + barre d'inscription fixe (mobile). */
.lv-signin-link { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:var(--fw-bold);
color:var(--ink-2); text-decoration:none; white-space:nowrap; padding:6px 4px; }
.lv-signin-link .lv-ic { color:var(--ink-3); }
.lv-signin-link:hover { color:var(--ink); }
.lv-visitorbar { display:none; }
.lv-visitorbar__txt { flex:1; min-width:0; font-size:13px; font-weight:var(--fw-semibold);
color:var(--ink-2); line-height:1.25; }
.lv-visitorbar__cta { flex:none; }
/* ---- Sidebar (desktop web) ---- */
.lv-sidebar { display:flex; flex-direction:column; padding:22px 16px; border-right:1px solid var(--hairline); background:var(--surface); }
.lv-sidebar__brand { display:flex; align-items:center; gap:10px; padding:4px 8px 22px; }
.lv-sidebar__badge { width:34px; height:34px; border-radius:10px; background:var(--gradient-amber); box-shadow:var(--shadow-amber); display:flex; align-items:center; justify-content:center; }
.lv-sidebar__name { font-size:22px; font-weight:var(--fw-heavy); color:var(--amber-ink); letter-spacing:-.02em; }
.lv-sidebar__nav { display:flex; flex-direction:column; gap:4px; }
.lv-navitem { display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:var(--r-md); border:none; cursor:pointer;
background:transparent; color:var(--ink-3); font-family:var(--font-sans); font-size:15px; font-weight:var(--fw-bold); text-align:left;
text-decoration:none; transition:all var(--dur) var(--ease-out); }
.lv-navitem:hover { background:var(--paper-tint); color:var(--ink); }
.lv-navitem--on { background:var(--gradient-amber); color:#fff; box-shadow:var(--shadow-amber); }
.lv-navitem--on .lv-ic { color:#fff; }
.lv-navitem__badge { margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:10px;
background:var(--like); color:#fff; font-size:11px; font-weight:var(--fw-heavy); line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.lv-navitem--on .lv-navitem__badge { background:rgba(255,255,255,.28); }
/* ---- Night hero (profile / book detail headers) ---- */
.lv-hero-night { position:relative; background:var(--night); color:#fff; padding:20px 20px 56px; overflow:hidden; }
.lv-hero-night__blob { position:absolute; border-radius:50%; background:var(--night-2); }
.lv-pill-night { display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border-radius:var(--r-pill);
border:1.5px solid var(--night-3); color:var(--amber); font-weight:var(--fw-heavy); font-size:15px; }
/* =====================================================================
APP SHELL · TOPBAR · HOME LAYOUT (desktop-first, responsive)
===================================================================== */
/* ---- Shell: sidebar | main ---- */
.lv-shell { display:grid; grid-template-columns:264px minmax(0,1fr); min-height:100vh; }
.lv-shell > .lv-sidebar { position:sticky; top:0; height:100vh; }
.lv-sidebar__badge { color:#fff; }
/* sidebar user card */
.lv-sidebar__spacer { flex:1 1 auto; min-height:24px; }
.lv-usercard { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-lg);
background:var(--paper-tint); text-decoration:none; transition:background var(--dur) var(--ease-out); }
.lv-usercard:hover { background:var(--hairline-soft); }
.lv-usercard__txt { display:flex; flex-direction:column; min-width:0; }
.lv-usercard__name { font-size:14px; font-weight:var(--fw-heavy); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lv-usercard__role { font-size:12px; font-weight:var(--fw-bold); color:var(--amber-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lv-usercard--guest { flex-direction:column; gap:8px; background:transparent; padding:0; }
/* ---- Main column ---- */
.lv-main { display:flex; flex-direction:column; min-width:0; }
/* ---- Top bar ---- */
.lv-topbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:18px;
padding:16px 32px; background:rgba(248,245,241,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
border-bottom:1px solid var(--hairline-soft); }
.lv-topbar__brand { display:none; align-items:center; gap:8px; text-decoration:none; }
/* Bouton retour visiteur (barre du haut) : caché sur desktop (la sidebar sert de nav), montré sur mobile. */
.lv-topbar__back { display:none; align-items:center; justify-content:center; width:42px; height:42px; flex:none;
border-radius:var(--r-md); color:var(--ink); text-decoration:none; }
.lv-topbar__back:hover { background:var(--paper-tint); }
.lv-topbar__search { flex:1 1 auto; max-width:560px; }
.lv-topbar__search .lv-search__field { box-shadow:inset 0 0 0 1.5px var(--hairline); }
.lv-topbar__search .lv-search__filter .lv-ic { color:inherit; }
.lv-topbar__toggle { flex:none; }
.lv-topbar__toggle .lv-seg__opt { flex:none; font-size:15px; padding:9px 18px; }
.lv-topbar__actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
.lv-topbar__icbtn { position:relative; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
border-radius:var(--r-md); color:var(--ink-3); text-decoration:none; transition:all var(--dur) var(--ease-out); }
.lv-topbar__icbtn:hover { background:var(--paper-tint); color:var(--ink); }
.lv-topbar__badge { position:absolute; top:6px; right:6px; min-width:18px; height:18px; padding:0 4px; border-radius:9px;
background:var(--like); color:#fff; font-size:11px; font-weight:var(--fw-heavy); display:flex; align-items:center; justify-content:center; }
/* ---- Content + flash ---- */
.lv-content { padding:22px 32px 64px; animation:lv-page-in .34s var(--ease-out) both; }
/* Subtle fade + rise when a section loads, for a smoother feel between pages. */
@keyframes lv-page-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes lv-fade-in { from { opacity:0; } to { opacity:1; } }
/* Edge-to-edge pages (map, dark hero): fade only — a transform would offset the
Leaflet map / hero mid-animation. */
.lv-content--bleed { animation-name:lv-fade-in; }
@media (prefers-reduced-motion: reduce){ .lv-content, .lv-content--bleed { animation:none; } }
.lv-toasts { position:fixed; top:18px; right:18px; z-index:200; display:flex; flex-direction:column;
gap:10px; max-width:min(360px, calc(100vw - 36px)); }
.lv-toast { display:flex; align-items:center; gap:11px; padding:13px 14px 13px 15px; border-radius:var(--r-lg);
background:var(--surface); color:var(--ink); box-shadow:var(--shadow-float); border-left:4px solid var(--ink-3);
font-size:14px; font-weight:var(--fw-semibold); animation:lv-toast-in .28s var(--ease-out);
transition:opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.lv-toast--success { border-left-color:var(--echange); }
.lv-toast--error { border-left-color:var(--danger); }
.lv-toast--info { border-left-color:var(--amber); }
.lv-toast__ic { flex:none; display:flex; }
.lv-toast--success .lv-toast__ic { color:var(--echange); }
.lv-toast--error .lv-toast__ic { color:var(--danger); }
.lv-toast--info .lv-toast__ic { color:var(--amber-ink); }
.lv-toast__msg { flex:1; min-width:0; }
.lv-toast__close { flex:none; border:none; background:transparent; cursor:pointer; color:var(--ink-4);
display:flex; padding:2px; border-radius:6px; }
.lv-toast__close:hover { color:var(--ink); }
.lv-toast--leaving { opacity:0; transform:translateX(24px); }
@keyframes lv-toast-in { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:none; } }
.lv-profilebanner { display:flex; align-items:center; gap:12px; padding:14px 16px; margin-bottom:18px;
border-radius:var(--r-lg); background:var(--gradient-amber); color:var(--night); text-decoration:none;
box-shadow:var(--shadow-amber); animation: lv-profilebanner-pulse 1.6s ease-in-out infinite; position:sticky; top:0; z-index:40; }
.lv-profilebanner--bleed { margin:0 16px 18px; }
.lv-profilebanner__ic { flex:none; display:flex; width:38px; height:38px; align-items:center; justify-content:center;
border-radius:50%; background:rgba(255,255,255,.35); }
.lv-profilebanner__txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lv-profilebanner__txt strong { font-size:14px; font-weight:800; }
.lv-profilebanner__txt span { font-size:12.5px; font-weight:600; opacity:.85; }
.lv-profilebanner__arrow { flex:none; display:flex; opacity:.7; }
@keyframes lv-profilebanner-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.035); }
}
.lv-fbk-fab { position:fixed; right:18px; bottom:24px; z-index:50; display:flex; align-items:center;
justify-content:center; width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
background:var(--night); color:#fff; box-shadow:var(--shadow-float); }
.lv-fbk-fab:hover { transform:translateY(-2px); }
.lv-fbk-fab__badge { position:absolute; top:-13px; right:-8px; padding:3px 7px; border-radius:10px;
background:var(--gradient-amber); color:#fff; font-size:10px; font-weight:800; text-transform:uppercase;
letter-spacing:.04em; box-shadow:var(--shadow-amber); }
/* Clear the fixed bottom nav + the device safe-area (Android gesture bar / iOS home indicator),
so the button never overlaps the last nav item (Profil). */
@media (max-width:860px){ .lv-fbk-fab { bottom:calc(96px + env(safe-area-inset-bottom)); } }
/* Pages with the pro "add event" FAB: stack the feedback button above it. */
body:has(.pro-fab) .lv-fbk-fab { bottom:104px; right:32px; }
/* Quand la bannière d'installation PWA est visible, elle occupe le coin bas :
on remonte les boutons flottants au-dessus d'elle pour qu'elle ne les cache
jamais (FAB « Un retour » et FAB pro « ajouter un événement »). */
body:has(#lv-pwa:not([hidden])) .lv-fbk-fab { bottom:calc(env(safe-area-inset-bottom,0px) + 152px); }
body:has(#lv-pwa:not([hidden])) .pro-fab { bottom:calc(env(safe-area-inset-bottom,0px) + 164px); }
@media (min-width:900px){
body:has(#lv-pwa:not([hidden])) .lv-fbk-fab { bottom:100px; right:24px; }
body:has(#lv-pwa:not([hidden])) .pro-fab { bottom:100px; }
}
@media (max-width:860px){ body:has(.pro-fab) .lv-fbk-fab { bottom:calc(166px + env(safe-area-inset-bottom)); right:20px; } }
/* ---- Home 3-column ---- */
.lv-home { display:grid; grid-template-columns:minmax(0,1fr) 366px; gap:32px; align-items:start; max-width:1200px; }
.lv-home__rail { position:sticky; top:96px; display:flex; flex-direction:column; gap:18px; }
.lv-hero-title { font-size:44px; font-weight:var(--fw-heavy); letter-spacing:-.03em; line-height:1.04; margin:4px 0 22px; color:var(--ink); }
.lv-hero-title em { font-style:normal; color:var(--amber-ink); }
/* Location onboarding banner (shown until the user sets an address). */
.lv-locbanner { display:flex; align-items:center; gap:14px; margin:0 0 22px; padding:13px 14px;
border-radius:var(--r-xl); text-decoration:none; color:var(--ink); background:var(--amber-soft);
box-shadow:inset 0 0 0 1px rgba(245,180,0,.32); transition:box-shadow .2s var(--ease-out), transform .2s var(--ease-out); }
.lv-locbanner:hover { box-shadow:inset 0 0 0 1px rgba(245,180,0,.32), var(--shadow-card); transform:translateY(-1px); }
.lv-locbanner__ic { flex:none; width:40px; height:40px; border-radius:var(--r-md); background:var(--gradient-amber);
color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-amber); }
.lv-locbanner__txt { flex:1; min-width:0; font-size:14px; line-height:1.35; font-weight:var(--fw-medium); }
.lv-locbanner__cta { flex:none; display:inline-flex; align-items:center; gap:2px; white-space:nowrap;
font-size:13.5px; font-weight:var(--fw-bold); color:var(--amber-ink); }
.lv-locbanner__x { flex:none; border:none; background:transparent; cursor:pointer; color:var(--ink-3);
display:flex; padding:5px; border-radius:var(--r-sm); transition:background .15s, color .15s; }
.lv-locbanner__x:hover { background:rgba(0,0,0,.06); color:var(--ink); }
@media (max-width:600px){ .lv-locbanner__cta { display:none; } }
/* ---- Map ---- */
.lv-map { position:relative; height:360px; border-radius:var(--r-2xl); overflow:hidden;
background:linear-gradient(135deg,#E7EFE4 0%,#E3ECDE 55%,#DCE7D6 100%); box-shadow:var(--shadow-card); }
.lv-map__grid { position:absolute; inset:0; opacity:.55;
background:
repeating-linear-gradient(90deg, transparent 0 84px, rgba(255,255,255,.55) 84px 90px),
repeating-linear-gradient(0deg, transparent 0 66px, rgba(255,255,255,.55) 66px 72px); }
.lv-map__road { position:absolute; background:rgba(255,255,255,.75); border-radius:4px; }
.lv-map__me { position:absolute; left:50%; top:55%; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%;
background:var(--gradient-amber); box-shadow:var(--shadow-amber); display:flex; align-items:center; justify-content:center; z-index:4; }
.lv-map__me .lv-ic { color:#fff; }
.lv-map__pin { position:absolute; transform:translate(-50%,-50%); z-index:2; }
.lv-map__pin--don { --pin:var(--don); } .lv-map__pin--pret { --pin:var(--pret); }
.lv-map__pin--echange { --pin:var(--echange); } .lv-map__pin--vente { --pin:var(--vente); }
.lv-map__pin::after { content:''; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%) rotate(45deg);
width:13px; height:13px; background:var(--pin,#fff); border-radius:3px; z-index:1; }
.lv-map__pin-inner { position:relative; z-index:2; width:52px; height:52px; border-radius:14px; overflow:hidden;
border:3px solid var(--pin,#fff); box-shadow:var(--shadow-float); background:var(--surface);
display:flex; align-items:center; justify-content:center; }
.lv-map__pin-inner img { width:100%; height:100%; object-fit:cover; display:block; }
.lv-map__pin-inner .lv-ic { width:24px; height:24px; flex:none; color:var(--pin,var(--ink-4)); }
.lv-map__ctrl { position:absolute; right:16px; top:16px; display:flex; flex-direction:column; gap:10px; z-index:4; }
.lv-mapbtn { width:42px; height:42px; border-radius:50%; border:none; cursor:pointer; background:var(--surface);
box-shadow:var(--shadow-card); display:flex; align-items:center; justify-content:center; color:var(--ink-2); }
.lv-mapbtn--locate { position:absolute; right:16px; bottom:16px; background:var(--gradient-amber); color:#fff; box-shadow:var(--shadow-amber); z-index:4; }
/* ---- Books grid ---- */
.lv-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.lv-grid--full { grid-template-columns:1fr; }
.lv-grid--cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (max-width:560px){ .lv-grid--cards { grid-template-columns:1fr; } }
/* ---- Generic panel/card (forfaits, event detail, legal pages) ---- */
.lv-card { background:var(--surface); border-radius:18px; padding:18px 20px; box-shadow:var(--shadow-card); }
.lv-card h2 { font-size:18px; font-weight:var(--fw-heavy); color:var(--ink); margin:0 0 10px; }
.lv-card h3 { font-size:17px; font-weight:var(--fw-bold); color:var(--ink); margin:0 0 6px; }
.lv-card ul { margin:0; padding-left:18px; color:var(--ink-2); font-size:14px; line-height:1.7; }
.lv-card p { margin:0 0 8px; color:var(--ink-2); font-size:14px; line-height:1.55; }
.lv-card--soft { background:var(--paper-tint); box-shadow:none; padding:12px 14px; border-radius:var(--r-md);
display:flex; align-items:center; gap:6px; line-height:1.4; }
.lv-avatarhero { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:24px; }
.lv-avatarhero__pic { position:relative; display:block; cursor:pointer; }
.lv-avatarhero__initial { display:flex; width:100%; height:100%; align-items:center; justify-content:center;
border-radius:50%; background:var(--night); color:#fff; font-weight:800; font-size:32px; }
.lv-avatarhero__overlay { position:absolute; inset:6%; border-radius:50%; background:rgba(17,19,32,.5); color:#fff;
display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .18s var(--ease-out); }
.lv-avatarhero__pic:hover .lv-avatarhero__overlay { opacity:1; }
.lv-avatarhero__badge { position:absolute; right:-2px; bottom:-2px; width:32px; height:32px; border-radius:50%;
background:var(--gradient-amber); color:#fff; display:flex; align-items:center; justify-content:center;
box-shadow:var(--shadow-amber); border:3px solid var(--surface); }
.lv-avatarhero__remove { border:none; background:none; padding:0; font-size:12.5px; font-weight:700;
color:var(--ink-3); cursor:pointer; }
.lv-avatarhero__remove:hover { color:var(--danger); }
.lv-price { margin:0 0 12px; color:var(--ink-3); font-size:13px; }
.lv-price strong { font-size:24px; font-weight:var(--fw-heavy); color:var(--ink); letter-spacing:-.02em; }
/* Section headings on simple .lv-page screens (e.g. forfaits) */
.lv-page > h2 { font-size:18px; font-weight:var(--fw-heavy); color:var(--ink); letter-spacing:-.01em; margin:24px 0 12px; }
/* ---- Event card (vertical, used in rail) ---- */
.lv-event--v { flex-direction:column; }
.lv-event--v .lv-event__img { width:100%; height:128px; }
/* ---- Detail (book) ---- */
.lv-detail { display:grid; grid-template-columns:300px minmax(0,1fr); gap:32px; align-items:start; }
.lv-detail__aside { position:sticky; top:96px; display:flex; flex-direction:column; gap:14px; }
.lv-detail__cover { width:100%; aspect-ratio:3/4; border-radius:var(--r-xl); overflow:hidden; background:var(--paper-tint);
box-shadow:var(--shadow-card); display:flex; align-items:center; justify-content:center; color:var(--ink-4); }
.lv-detail__cover img { width:100%; height:100%; object-fit:cover; }
.lv-detail__title { font-size:30px; font-weight:var(--fw-heavy); letter-spacing:-.02em; line-height:1.12; margin:0 0 4px; color:var(--ink); }
.lv-detail__author { font-size:16px; color:var(--ink-3); margin-bottom:16px; }
.lv-panel { background:var(--surface); border-radius:var(--r-xl); padding:20px 22px; box-shadow:var(--shadow-card); }
.lv-panel + .lv-panel { margin-top:16px; }
.lv-panel h2 { font-size:18px; font-weight:var(--fw-heavy); margin:0 0 12px; color:var(--ink); letter-spacing:-.01em; }
.lv-panel p { font-size:14px; color:var(--ink-2); line-height:1.65; margin:0; }
@media (max-width:760px){
.lv-detail { grid-template-columns:1fr; }
.lv-detail__aside { position:static; }
.lv-detail__cover { max-width:220px; }
}
/* ---- Inner page header ---- */
.lv-page { max-width:1200px; }
/* Sur les écrans à header propre (pro, notifications…), .lv-content est en --bleed
(padding 0) : les pages .lv-page se retrouvaient collées aux bords. On rétablit
des écarts égaux des deux côtés + centrage, comme le reste de l'app. */
.lv-content--bleed > .lv-page { margin-left:auto; margin-right:auto; padding-left:16px; padding-right:16px; }
@media (min-width:861px){ .lv-content--bleed > .lv-page { padding-left:32px; padding-right:32px; } }
.lv-pagehead { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.lv-pagehead h1 { font-size:28px; font-weight:var(--fw-heavy); letter-spacing:-.025em; margin:0; color:var(--ink); }
/* Filter chips: scroll horizontally inside their own row so they never widen
the page (which would throw off the action row's right-aligned button). */
.lv-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:nowrap; overflow-x:auto;
scrollbar-width:none; margin-bottom:18px; }
.lv-toolbar::-webkit-scrollbar { display:none; }
.lv-toolbar .lv-chip { flex:none; }
.lv-select {
flex: none;
padding: 9px 12px;
border-radius: var(--r-pill);
border: 1.5px solid var(--hairline);
background: var(--surface);
color: var(--ink);
font-family: var(--font-sans);
font-size: 13px;
font-weight: var(--fw-bold);
cursor: pointer;
}
.lv-listmode { display:flex; align-items:center; gap:10px; margin:0 0 18px; }
.lv-listmode__add { margin-left:auto; } /* push "Ajouter" to the right edge */
.lv-chiprow { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; }
/* ---- Narrow page (forms / detail) ---- */
.lv-page--narrow { max-width:640px; margin:0 auto; }
/* ---- Forms (styles Django {{ form.as_p }} output) ---- */
.lv-form p { margin:0 0 16px; display:flex; flex-direction:column; gap:7px; }
.lv-form label { font-size:12px; font-weight:var(--fw-bold); color:var(--ink-2); letter-spacing:.02em; }
.lv-form input:not([type=checkbox]):not([type=radio]):not([type=file]),
.lv-form select, .lv-form textarea {
width:100%; font-family:var(--font-sans); font-size:15px; color:var(--ink); background:var(--surface);
border:1.5px solid var(--hairline); border-radius:var(--r-md); padding:12px 14px; outline:none;
transition:border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.lv-form input:focus, .lv-form select:focus, .lv-form textarea:focus {
border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-soft); }
.lv-form textarea { min-height:110px; resize:vertical; line-height:1.5; }
.lv-form input[type=file] { font-size:13px; color:var(--ink-3); }
.lv-form .helptext { display:block; font-size:12px; color:var(--ink-4); font-weight:var(--fw-medium); }
.lv-form ul.errorlist { list-style:none; margin:0; padding:0; color:var(--danger); font-size:12.5px; font-weight:var(--fw-semibold); }
.lv-form__actions { display:flex; gap:10px; margin-top:6px; }
/* ---- Request card (exchanges) ---- */
.lv-req { background:var(--surface); border-radius:var(--r-xl); padding:18px 20px; box-shadow:var(--shadow-card); }
.lv-req + .lv-req { margin-top:12px; }
.lv-req__top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.lv-req__title { font-size:16px; font-weight:var(--fw-bold); color:var(--ink); }
.lv-req__sub { font-size:13px; color:var(--ink-3); margin-top:2px; }
.lv-req__msg { margin-top:12px; padding:11px 14px; background:var(--paper-tint); border-radius:var(--r-md);
font-size:14px; color:var(--ink-2); font-style:italic; }
.lv-req__actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.lv-status { display:inline-flex; align-items:center; padding:4px 11px; border-radius:var(--r-pill); font-size:12px; font-weight:var(--fw-bold); white-space:nowrap; }
.lv-status--pending { color:var(--vente); background:var(--vente-soft); }
.lv-status--ok { color:var(--echange); background:var(--echange-soft); }
.lv-status--off { color:var(--ink-3); background:var(--paper-tint); }
/* ---- Notification item ---- */
.lv-notif { display:flex; gap:14px; align-items:flex-start; background:var(--surface); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow-card); }
.lv-notif + .lv-notif { margin-top:10px; }
.lv-notif--link { text-decoration:none; color:inherit; cursor:pointer; transition:box-shadow .15s, transform .15s var(--ease-out); }
.lv-notif--link:hover { box-shadow:var(--shadow-float); transform:translateY(-1px); }
.lv-notif__dot { width:10px; height:10px; border-radius:50%; background:var(--amber); margin-top:5px; flex:none; }
.lv-notif__dot--read { background:var(--hairline); }
.lv-notif__text { font-size:14px; color:var(--ink); font-weight:var(--fw-medium); line-height:1.5; }
.lv-notif__time { font-size:12px; color:var(--ink-4); margin-top:4px; }
/* ---- Chat (conversation) ---- */
.lv-chat { display:flex; flex-direction:column; gap:10px; padding:6px 0 18px; }
.lv-chat__ctx { align-self:center; margin:0 0 8px; padding:7px 16px; border-radius:var(--r-pill);
background:var(--paper-tint); color:var(--ink-3); font-size:12.5px; font-weight:var(--fw-bold); }
.lv-chat__row { display:flex; align-items:flex-end; gap:8px; }
.lv-chat__row--mine { justify-content:flex-end; }
.lv-chat__row .shr-avatar { flex:none; margin-bottom:2px; }
.lv-chat__msg { max-width:74%; padding:11px 15px; border-radius:var(--r-lg); font-size:14px; line-height:1.5; }
.lv-chat__msg--mine { background:var(--gradient-amber); color:#fff; border-bottom-right-radius:6px; box-shadow:var(--shadow-amber); }
.lv-chat__msg--theirs { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-card); border-bottom-left-radius:6px; }
.lv-chat__ts { font-size:11px; opacity:.65; margin-top:5px; }
/* ---- Meetup proposal card (inside the chat) ---- */
.lv-meetup { max-width:80%; padding:14px 16px; border-radius:var(--r-lg); background:var(--surface);
box-shadow:var(--shadow-card); box-shadow:inset 0 0 0 1.5px var(--amber), var(--shadow-card); }
.lv-meetup--ok { box-shadow:inset 0 0 0 1.5px var(--online), var(--shadow-card); }
.lv-meetup__head { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:var(--fw-heavy);
text-transform:uppercase; letter-spacing:.4px; color:var(--amber-ink); margin-bottom:8px; }
.lv-meetup--ok .lv-meetup__head { color:var(--online); }
.lv-meetup__when { font-size:15.5px; font-weight:var(--fw-bold); color:var(--ink); text-transform:capitalize; }
.lv-meetup__where { display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink-2); margin-top:4px; }
.lv-meetup__status { display:flex; align-items:center; gap:6px; margin-top:10px; font-size:13.5px;
font-weight:var(--fw-bold); color:var(--online); }
.lv-meetup__status--wait { color:var(--ink-3); font-weight:var(--fw-semibold); }
/* ================= RESPONSIVE ================= */
.lv-bottomnav--fixed { display:none; }
@media (max-width:1080px){
.lv-home { grid-template-columns:1fr; }
.lv-home__rail { position:static; }
/* Declutter the topbar so the right-side actions stay visible. */
.lv-topbar__toggle { display:none; }
.lv-topbar__search { min-width:0; }
}
@media (max-width:860px){
/* dvh (not vh) so iOS Safari's collapsing toolbar doesn't add phantom scroll. */
.lv-shell { display:block; min-height:100dvh; }
.lv-shell > .lv-sidebar { display:none; }
.lv-topbar__brand { display:flex; }
.lv-topbar__back { display:inline-flex; }
.lv-topbar__toggle { display:none; }
.lv-topbar { gap:12px; padding:12px 16px; }
/* Bottom padding clears the fixed nav (+ the iPhone home-indicator inset). */
.lv-content { padding:18px 16px calc(84px + env(safe-area-inset-bottom)); }
.lv-content--bleed { padding:0 0 calc(72px + env(safe-area-inset-bottom)); }
.lv-toasts { top:12px; right:12px; left:12px; max-width:none; }
.lv-hero-title { font-size:30px; }
/* Fixed (not sticky) so the nav never adds to document height — this was the
source of the empty space / phantom scroll under the last content row. */
.lv-bottomnav--fixed { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:30;
/* Padding bas fixe (pas d'env safe-area) : certains Android renvoyaient une safe-area
qui surélevait les icônes et laissait une bande blanche sous la barre. */
padding-bottom:10px; }
/* Barre visiteur : collée tout en bas (le visiteur n'a pas de nav du bas). */
.lv-visitorbar { display:flex; align-items:center; gap:12px; position:fixed; left:0; right:0;
bottom:0; z-index:29; padding:9px 16px;
background:var(--surface); border-top:1px solid var(--hairline); box-shadow:0 -5px 16px rgba(0,0,0,.05); }
/* Réserver la hauteur de la barre visiteur pour ne pas masquer le dernier contenu. */
body.lv-visitor .lv-content { padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
body.lv-visitor .lv-content--bleed { padding-bottom:calc(70px + env(safe-area-inset-bottom)); }
body.lv-locked .lv-visitorbar { display:none; }
}
@media (max-width:560px){
/* minmax(0,1fr) lets the column shrink below its content width (no overflow). */
.lv-grid { grid-template-columns:minmax(0,1fr); }
.lv-topbar__search .lv-search__field input { font-size:14px; }
.lv-topbar__search .lv-search__field { padding:11px 14px; }
.lv-topbar__brand { display:none; } /* free space; the filter button stays usable */
/* Topbar étroite (retour + recherche + compte) : « Se connecter » en icône seule pour laisser respirer la recherche. */
.lv-topbar .lv-signin-link__txt { display:none; }
.lv-topbar__search { min-width:0; } /* let the search shrink instead of overflowing */
/* Title + actions wrap instead of overflowing (pro space, agenda, stats…). */
.lv-pagehead { flex-wrap:wrap; gap:12px; }
/* Home map fills the screen on phones (no dead space); other maps stay compact.
Offset leaves room for the greeting/search/chips/bar at the top AND the fixed
bottom nav (~72px + home-indicator inset), so the map isn't clipped behind it. */
.hm-map #lv-bookmap { height:calc(100vh - 476px) !important;
height:calc(100dvh - 476px - env(safe-area-inset-bottom)) !important; min-height:280px; }
#lv-bookmap { height:340px !important; }
}
/* =====================================================================
Dark mode: only the neutral tokens are redefined; the .lv-* components
read these variables, so they switch automatically.
Toggled via the data-theme="dark" attribute on .
===================================================================== */
html[data-theme="dark"]{
color-scheme:dark;
/* neutrals */
--paper:#14121B; --paper-tint:#1B1825; --surface:#211E2C; --surface-2:#191622;
--hairline:#322E3D; --hairline-soft:#272432;
--ink:#F4F1EC; --ink-2:#BDB6C2; --ink-3:#938CA0; --ink-4:#6E6880;
/* darkened intent tints (used as badge/chip backgrounds) */
--amber-soft:#3A2E12; --amber-ink:#F7C84B;
--don-soft:#251B3D; --pret-soft:#172541; --echange-soft:#0E2D24; --vente-soft:#33260F;
--danger-soft:#3A1D1D;
/* deeper shadows on dark */
--shadow-card:0 2px 12px rgba(0,0,0,.45);
--shadow-float:0 10px 30px rgba(0,0,0,.55);
}
/* Theme toggle: show the right icon per mode. */
.lv-theme-toggle__sun{ display:inline-flex; }
.lv-theme-toggle__moon{ display:none; }
html[data-theme="dark"] .lv-theme-toggle__sun{ display:none; }
html[data-theme="dark"] .lv-theme-toggle__moon{ display:inline-flex; }
/* Hard-coded surfaces that must follow dark mode. */
html[data-theme="dark"] .lv-topbar{ background:rgba(20,18,27,.82); }
html[data-theme="dark"] .lv-map{ background:linear-gradient(135deg,#1E2733 0%,#1B2430 55%,#19212C 100%); }
html[data-theme="dark"] .lv-map__road{ background:rgba(255,255,255,.22); }
/* No underline on links (the design relies on buttons and chips). */
a{ text-decoration:none; }
/* Search bar autocomplete dropdown. */
.lv-topbar__search{ position:relative; }
.lv-suggest{ position:absolute; left:0; right:66px; top:calc(100% + 8px); z-index:60;
background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg);
box-shadow:var(--shadow-float); overflow:hidden; padding:6px;
animation:lv-suggest-in .18s var(--ease-out) both; transform-origin:top center; }
@keyframes lv-suggest-in{ from{ opacity:0; transform:translateY(-8px) scale(.98); } to{ opacity:1; transform:none; } }
.lv-suggest__item{ transition:background .12s var(--ease-out); }
.lv-suggest__item{ display:flex; flex-direction:column; gap:1px; padding:9px 12px;
border-radius:var(--r-md); cursor:pointer; }
.lv-suggest__item:hover, .lv-suggest__item.is-active{ background:var(--paper-tint); }
.lv-suggest__top{ display:flex; align-items:center; gap:8px; min-width:0; }
.lv-suggest__title{ font-size:14px; font-weight:var(--fw-bold); color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lv-suggest__badge{ flex:none; font-size:10px; font-weight:var(--fw-heavy); text-transform:uppercase; letter-spacing:.03em;
padding:2px 8px; border-radius:var(--r-pill); background:var(--amber-soft); color:var(--amber-ink); }
.lv-suggest__meta{ font-size:12px; color:var(--ink-3); }
.lv-suggest__empty{ padding:12px; font-size:13px; color:var(--ink-3); text-align:center; }
/* OSM attribution (required) kept subtle. */
.leaflet-control-attribution{ font-size:9px !important; opacity:.55; }
.leaflet-control-attribution a{ color:inherit; }
/* The map gets its own stacking context so Leaflet's internal z-index values
(panes up to ~700) stay contained, below the topbar and the suggestions. */
#lv-bookmap{ position:relative; z-index:0; }
/* Map pins. */
.lv-pin{ display:flex; align-items:center; justify-content:center; }
.lv-pin__dot{ display:block; width:20px; height:20px; border-radius:50%; border:3px solid #fff;
box-shadow:0 3px 9px rgba(17,19,32,.45); transition:transform .15s var(--ease-out); }
.lv-pin:hover .lv-pin__dot{ transform:scale(1.22); }
/* "You" marker: pulsing amber halo. */
.lv-pin--me .lv-pin__dot{ box-shadow:0 0 0 4px rgba(245,180,0,.25), 0 3px 9px rgba(17,19,32,.45); }
.lv-pin--me::after{ content:''; position:absolute; width:20px; height:20px; border-radius:50%;
background:rgba(245,180,0,.45); animation:lv-pulse 2s ease-out infinite; z-index:-1; }
@keyframes lv-pulse{ 0%{ transform:scale(1); opacity:.6 } 100%{ transform:scale(3.2); opacity:0 } }
/* Map popups. */
.leaflet-popup-content-wrapper{ border-radius:14px !important; box-shadow:var(--shadow-float) !important;
background:var(--surface) !important; color:var(--ink) !important; }
.leaflet-popup-tip{ background:var(--surface) !important; }
.leaflet-popup-content{ margin:11px 15px !important; font-family:var(--font-sans); }
.lv-mappop{ display:flex; flex-direction:column; gap:3px; }
.lv-mappop strong{ font-size:14px; font-weight:var(--fw-bold); color:var(--ink); }
.lv-mappop span{ font-size:12px; color:var(--ink-3); }
.lv-mappop a{ font-size:12px; color:var(--amber-ink); font-weight:var(--fw-bold); }
/* Softer zoom control. */
.leaflet-control-zoom{ border:none !important; box-shadow:var(--shadow-card) !important;
border-radius:var(--r-md) !important; overflow:hidden; }
.leaflet-control-zoom a{ background:var(--surface) !important; color:var(--ink) !important;
border-color:var(--hairline) !important; }
/* « Recentrer sur ma position » : bouton flottant en bas à droite de la carte. */
.lvm-recenter{ display:flex; align-items:center; justify-content:center; width:42px; height:42px;
padding:0; border:none; border-radius:50%; background:var(--surface); color:var(--ink);
box-shadow:var(--shadow-card); cursor:pointer; -webkit-tap-highlight-color:transparent;
transition:background .15s ease, transform .1s ease; }
.lvm-recenter:hover{ background:var(--paper-tint); }
.lvm-recenter:active{ transform:scale(.94); }
.lvm-recenter svg{ width:22px; height:22px; }
/* Feedback modal (opened from Paramètres → « Donner mon avis »). */
.lv-fbk{ position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.4);
display:none; align-items:center; justify-content:center; padding:20px; }
.lv-fbk:not([hidden]){ display:flex; }
.lv-fbk__card{ position:relative; width:100%; max-width:400px; background:var(--surface);
border-radius:var(--r-xl); box-shadow:var(--shadow-float); padding:24px; }
.lv-fbk__card h3{ margin:0 0 14px; color:var(--ink); }
.lv-fbk__close{ position:absolute; top:14px; right:14px; border:none; background:transparent;
cursor:pointer; color:var(--ink-3); }
.lv-fbk__types{ display:flex; gap:14px; margin-bottom:12px; font-size:14px; color:var(--ink-2); }
.lv-fbk__types label{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.lv-fbk textarea{ width:100%; box-sizing:border-box; border:1.5px solid var(--hairline);
border-radius:var(--r-md); padding:11px 13px; font-family:inherit; font-size:14px;
resize:vertical; margin-bottom:12px; background:var(--surface-2); color:var(--ink); }
.lv-fbk__file{ display:flex; align-items:center; gap:8px; margin:0 0 12px; padding:10px 13px;
border:1.5px dashed var(--hairline); border-radius:var(--r-md); background:var(--surface-2);
color:var(--ink-2); font-size:13px; cursor:pointer; }
.lv-fbk__file:hover{ border-color:var(--ink-3, var(--ink-2)); color:var(--ink); }
.lv-fbk__file svg{ flex:none; }
.lv-fbk__file span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lv-fbk__done{ text-align:center; color:var(--echange); font-size:13px; margin:10px 0 0; }
/* Aide à l'installation (PWA) : liste des démarches par plateforme. */
.lv-ihelp__steps{ margin:0 0 16px; }
.lv-ihelp__steps p{ margin:0 0 12px; font-size:14px; line-height:1.5; color:var(--ink-2); }
.lv-ihelp__steps p:last-child{ margin-bottom:0; }
.lv-ihelp__steps strong{ color:var(--ink); }
.lv-ihelp__url{ width:100%; box-sizing:border-box; margin:0 0 10px; padding:11px 13px; border:1.5px solid var(--hairline);
border-radius:12px; background:var(--surface-2, var(--surface)); color:var(--ink-2); font-size:13px; text-align:center; }
/* Advanced filters (bottom sheet on mobile, popover on desktop). */
.lv-filters{ position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.4);
display:none; flex-direction:column; justify-content:flex-end; }
.lv-filters:not([hidden]){ display:flex; animation:lv-fade-in .24s ease both; }
/* Dans le panneau de filtres, l'attribut [hidden] doit toujours masquer : sinon
des classes comme .lv-btn (display:flex) l'emportent et laissent apparaître le
2e bouton « Appliquer » (mode événements) ou les sections de l'autre mode. */
.lv-filters [hidden]{ display:none !important; }
.lv-filters__sheet{ width:100%; max-height:86vh; max-height:86dvh; overflow-y:auto;
-webkit-overflow-scrolling:touch; overscroll-behavior:contain; background:var(--paper);
border-radius:22px 22px 0 0; padding:22px 18px calc(26px + env(safe-area-inset-bottom));
/* 'forwards' (not 'both'): if the entrance animation ever fails to run, the panel
rests at its natural on-screen position instead of frozen off-screen at from{}. */
animation:lv-sheet-up .4s cubic-bezier(.16,1,.3,1) forwards; will-change:transform; }
@keyframes lv-sheet-up{ from{ transform:translateY(100%); } to{ transform:none; } }
@keyframes lv-fade-in{ from{ opacity:0; } to{ opacity:1; } }
.lv-filters__grip{ display:block; width:40px; height:5px; border-radius:99px; background:var(--hairline);
margin:-8px auto 12px; }
@media (min-width:861px){ .lv-filters__grip{ display:none; } }
.lv-filters__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.lv-filters__head strong{ font-size:21px; color:var(--ink); }
.lv-filters__reset{ color:var(--rust); font-weight:var(--fw-bold); font-size:14px; }
.lv-filters__label{ font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--ink-3); margin:18px 2px 8px; }
.lv-filters__hint{ font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink-4); }
.lv-filters__group{ border:1px solid var(--hairline); border-radius:14px; overflow:hidden; background:var(--surface); }
.lv-filters__opt{ display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:14px 16px; border-bottom:1px solid var(--hairline-soft); cursor:pointer;
font-size:15px; font-weight:var(--fw-medium); color:var(--ink); }
.lv-filters__opt:last-child{ border-bottom:none; }
.lv-filters__opt input{ accent-color:var(--amber); width:18px; height:18px; flex:none; }
.lv-filters__opt:has(input:checked){ color:var(--amber-ink); font-weight:var(--fw-bold); }
/* Search-radius slider */
.lv-radius{ margin-top:4px; }
.lv-radius__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.lv-radius__lbl{ margin:0; }
.lv-radius__val{ font-size:13px; font-weight:var(--fw-heavy); color:var(--amber-ink); background:var(--amber-soft);
padding:5px 13px; border-radius:var(--r-pill); letter-spacing:-.01em; }
.lv-range{ -webkit-appearance:none; appearance:none; width:100%; height:7px; border-radius:4px;
background:linear-gradient(90deg, var(--amber) 100%, var(--hairline) 100%); outline:none; margin:12px 0 7px; cursor:pointer; }
.lv-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%;
background:var(--gradient-amber); border:3px solid #fff; cursor:pointer;
box-shadow:0 3px 10px rgba(245,180,0,.5), inset 0 1px 0 rgba(255,255,255,.4); }
.lv-range::-webkit-slider-thumb:active{ transform:scale(1.08); }
.lv-range::-moz-range-thumb{ width:26px; height:26px; border-radius:50%; background:var(--amber-2);
border:3px solid #fff; box-shadow:0 3px 10px rgba(245,180,0,.5); cursor:pointer; }
.lv-range::-moz-range-progress{ height:7px; border-radius:4px; background:var(--amber); }
.lv-range__scale{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-4); font-weight:var(--fw-bold); }
@media (min-width:880px){
.lv-filters{ flex-direction:row; align-items:flex-start; justify-content:flex-end; padding:74px 28px 28px; }
.lv-filters__sheet{ width:360px; max-height:78vh; border-radius:18px; animation:lv-toast-in .22s var(--ease-out); }
}
/* ===================== PRO SPACE ===================== */
.lv-main--pro{ background:var(--surface); }
.lv-content--bleed{ padding:0; }
/* Placed after the base rule above so it wins: on mobile, edge-to-edge pages
still need bottom clearance for the fixed bottom nav (+ iPhone home indicator). */
@media (max-width:860px){
.lv-content--bleed{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
/* The home runs a full-height map/list of its own — don't pad the whole page
(it would leave a gap under the map); its list clears the nav instead. */
.lv-content--bleed:has(#hm){ padding-bottom:0; }
#hm .hm-list{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
}
.lv-iconbtn{ flex:none; width:42px; height:42px; border-radius:var(--r-md); border:none; cursor:pointer;
background:var(--surface); box-shadow:var(--shadow-card); color:var(--ink-2);
display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s; }
.lv-iconbtn:hover{ background:var(--amber-soft); color:var(--amber-ink); }
.lv-report-link{ display:inline-flex; align-items:center; gap:6px; justify-content:center; width:100%;
font-size:13px; font-weight:var(--fw-semibold); color:var(--ink-3); text-decoration:none; padding:8px; }
.lv-report-link:hover{ color:var(--danger); }
.lv-report-link .lv-ic{ width:14px; height:14px; }
.pro{ max-width:720px; margin:0 auto; padding:24px 22px 32px; }
@media (min-width:861px){ .pro{ padding:40px 32px 56px; } }
/* Headers */
.pro-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:26px; }
.pro-title{ font-size:28px; font-weight:var(--fw-heavy); letter-spacing:-.025em; color:var(--ink); margin:0; }
.pro-back{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin:0 0 6px -8px;
border-radius:var(--r-md); color:var(--ink); background:transparent; }
.pro-back:hover{ background:var(--surface-2); }
/* Greeting (Agenda) */
.pro-greet{ display:flex; align-items:center; justify-content:space-between; }
.pro-greet__logo{ width:48px; height:48px; border-radius:14px; background:var(--gradient-amber); color:var(--night);
font-weight:var(--fw-heavy); font-size:20px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-amber); }
.pro-bell{ position:relative; width:46px; height:46px; border-radius:14px; background:var(--surface-2); color:var(--ink);
display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px var(--hairline); }
.pro-bell .lv-ic{ width:22px; height:22px; }
.pro-bell__dot{ position:absolute; top:10px; right:11px; width:9px; height:9px; border-radius:50%; background:var(--like); border:2px solid var(--surface-2); }
.pro-hello{ font-size:27px; font-weight:var(--fw-heavy); letter-spacing:-.02em; color:var(--ink); margin:20px 0 4px; }
.pro-sub{ color:var(--ink-3); font-size:15px; margin:0 0 18px; }
.pro-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; background:var(--surface-2); border-radius:18px;
box-shadow:inset 0 0 0 1px var(--hairline); padding:18px 12px; margin-bottom:20px; }
.pro-stat{ text-align:center; min-width:0; }
.pro-stat__n{ font-size:26px; font-weight:var(--fw-heavy); color:var(--ink); line-height:1; }
.pro-stat__l{ font-size:12px; color:var(--ink-3); margin-top:6px; }
/* ---- Full statistics page (cards grouped by Audience / Visibility) ---- */
.pro-stat-h{ font-size:15px; font-weight:var(--fw-heavy); color:var(--ink); letter-spacing:-.01em; margin:6px 0 12px; }
.pro-statgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px; }
.pro-statcard{ background:var(--surface); border-radius:18px; padding:18px; box-shadow:var(--shadow-card); }
.pro-statcard__ic{ display:flex; align-items:center; justify-content:center; width:38px; height:38px;
border-radius:11px; background:var(--paper-tint); margin-bottom:12px; }
.pro-statcard__ic .lv-ic{ width:20px; height:20px; color:var(--ink-2); }
.pro-statcard__ic--amber{ background:var(--amber-soft); }
.pro-statcard__ic--amber .lv-ic{ color:var(--amber-ink); }
.pro-statcard__n{ font-size:29px; font-weight:var(--fw-heavy); color:var(--ink); letter-spacing:-.02em; line-height:1; }
.pro-statcard__n--amber{ color:var(--amber-ink); }
.pro-statcard__l{ font-size:13.5px; font-weight:var(--fw-bold); color:var(--ink-2); margin-top:8px; }
.pro-statcard__s{ font-size:12px; color:var(--ink-3); margin-top:2px; }
.pro-stat-note{ display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.5; color:var(--ink-3);
background:var(--surface-2); border-radius:14px; padding:14px 16px; }
.pro-stat-note .lv-ic{ flex:none; color:var(--ink-4); margin-top:1px; }
.pro-stat-note a{ color:var(--amber-ink); font-weight:var(--fw-bold); }
/* List rows (settings + profile info) */
.pro-list{ display:flex; flex-direction:column; gap:14px; }
.pro-row{ display:flex; align-items:center; gap:16px; padding:17px 18px; border-radius:18px; background:var(--surface-2);
box-shadow:inset 0 0 0 1px var(--hairline); text-decoration:none; color:var(--ink); transition:background .15s, transform .15s var(--ease-out); }
a.pro-row:hover{ background:var(--paper-tint); transform:translateY(-1px); }
.pro-row__ic{ flex:none; width:48px; height:48px; border-radius:14px; background:var(--surface); box-shadow:var(--shadow-card);
display:flex; align-items:center; justify-content:center; }
.pro-row__ic .lv-ic{ width:23px; height:23px; color:var(--amber-ink); }
.pro-row__body{ flex:1; min-width:0; }
.pro-row__label{ display:block; font-size:16px; font-weight:var(--fw-bold); color:var(--ink); }
.pro-row__value{ display:block; font-size:14px; color:var(--ink-2); margin-top:3px; word-break:break-word; }
.pro-row__value a{ color:var(--amber-ink); font-weight:var(--fw-semibold); }
.pro-row__chev{ flex:none; color:var(--ink-4); }
/* Profile identity */
.pro-id{ display:flex; align-items:center; gap:16px; margin:4px 0 20px; }
.pro-id__avatar{ flex:none; width:74px; height:74px; border-radius:50%; background:var(--gradient-amber); color:var(--night);
font-weight:var(--fw-heavy); font-size:26px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-amber); }
.pro-id__name{ font-size:23px; font-weight:var(--fw-heavy); letter-spacing:-.01em; color:var(--ink); }
.pro-id__type{ font-size:14px; color:var(--ink-3); margin-top:2px; }
/* Tabs */
.pro-tabs{ display:flex; gap:24px; border-bottom:1px solid var(--hairline); margin:6px 0 20px; }
.pro-tab{ padding:0 1px 13px; font-size:15px; font-weight:var(--fw-bold); color:var(--ink-3); text-decoration:none;
border-bottom:2px solid transparent; margin-bottom:-1px; }
.pro-tab--on{ color:var(--ink); border-bottom-color:var(--amber); }
/* Event card */
.pro-events{ display:flex; flex-direction:column; gap:18px; }
.pro-event{ background:var(--surface); border-radius:20px; box-shadow:var(--shadow-card); overflow:hidden; border:1px solid var(--hairline); }
.pro-event__img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
background:linear-gradient(155deg, var(--paper-tint), var(--surface-2)); }
.pro-event__ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.pro-event__ph{ width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; overflow:hidden;
background:linear-gradient(155deg, var(--paper-tint), var(--surface-2)); color:var(--amber-ink); }
.pro-event__ph .lv-ic{ width:40px; height:40px; opacity:.5; }
.pro-event__body{ padding:15px 18px 18px; }
.pro-event__date{ font-size:13px; font-weight:var(--fw-bold); color:var(--ink-3); }
.pro-event__title{ font-size:18px; font-weight:var(--fw-heavy); letter-spacing:-.01em; color:var(--ink); margin:6px 0; }
.pro-event__desc{ font-size:14px; line-height:1.5; color:var(--ink-2); margin:0 0 14px;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pro-event__actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pro-event__boost{ margin-left:auto; font-size:12px; font-weight:var(--fw-bold); color:var(--amber-ink); white-space:nowrap; }
/* FAB */
/* "Affiche de l'événement" upload zone (A4 portrait frame). */
.ev-poster{ display:flex; align-items:center; justify-content:center; width:min(220px,60%);
aspect-ratio:1/1.414; margin-top:8px; border-radius:var(--r-md); cursor:pointer;
border:2px dashed var(--hairline); background:var(--surface-2); overflow:hidden;
transition:border-color var(--dur) var(--ease-out); }
.ev-poster:hover{ border-color:var(--amber); }
.ev-poster__empty{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px;
text-align:center; font-size:13.5px; font-weight:700; color:var(--ink-3); }
.ev-poster__hint{ font-size:12px; font-weight:500; color:var(--ink-4); }
.ev-poster__img{ width:100%; height:100%; object-fit:cover; }
.pro-fab{ position:fixed; right:20px; bottom:calc(90px + env(safe-area-inset-bottom)); width:58px; height:58px; border-radius:50%;
background:var(--gradient-amber); color:var(--night); display:flex; align-items:center; justify-content:center;
box-shadow:var(--shadow-amber); z-index:40; }
.pro-fab:active{ transform:scale(.95); }
@media (min-width:861px){ .pro-fab{ bottom:32px; right:32px; } }
/* Form (Créer) */
.pro-form{ display:flex; flex-direction:column; gap:18px; }
.pro-field label, .pro-field > p > label{ display:block; font-size:14px; font-weight:var(--fw-bold); color:var(--ink); margin-bottom:8px; }
.pro-field input, .pro-field select, .pro-field textarea,
.pro-form input, .pro-form select, .pro-form textarea{
width:100%; padding:14px 16px; border:1px solid var(--hairline); border-radius:14px; background:var(--surface);
font-family:var(--font-sans); font-size:15px; font-weight:var(--fw-medium); color:var(--ink); }
.pro-form textarea{ resize:vertical; min-height:96px; }
/* Short fields (date/time, capacity, price) shouldn't stretch full width. */
.pro-form input[type="datetime-local"], .pro-form input[type="number"]{ max-width:300px; }
.pro-form input:focus, .pro-form select:focus, .pro-form textarea:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-soft); }
.pro-form .helptext, .pro-form .errorlist{ font-size:12.5px; color:var(--ink-3); margin:6px 0 0; padding:0; list-style:none; }
.pro-form .errorlist{ color:var(--danger); }
.pro-save{ margin-top:18px; }
.pro-version{ text-align:center; color:var(--ink-4); font-size:13px; margin-top:30px; }
/* ===================== READER PROFILE ===================== */
.pf{ max-width:680px; margin:0 auto; padding:0 0 96px; }
@media (min-width:861px){ .pf{ padding:24px 0 56px; } }
.pf-hero{ position:relative; overflow:hidden; background:var(--night); padding:34px 24px 54px; border-radius:0 0 28px 28px; }
@media (min-width:861px){ .pf-hero{ border-radius:28px; } }
.pf-hero::before{ content:""; position:absolute; inset:0; background:
radial-gradient(ellipse 70% 60% at 80% -10%, rgba(124,58,237,.32), transparent 60%),
radial-gradient(ellipse 60% 50% at 12% 120%, rgba(245,180,0,.16), transparent 55%); }
.pf-gear{ position:absolute; top:18px; right:18px; z-index:2; width:42px; height:42px; border-radius:13px;
display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(255,255,255,.1);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); transition:background .15s; }
.pf-gear:hover{ background:rgba(255,255,255,.2); }
.pf-actions{ display:flex; flex-direction:column; gap:10px; padding:18px 16px 8px; }
.pf-action{ display:flex; align-items:center; justify-content:center; gap:9px; padding:14px;
border-radius:var(--r-lg); background:var(--surface); color:var(--ink); font-weight:var(--fw-bold);
font-size:15px; text-decoration:none; box-shadow:inset 0 0 0 1px var(--hairline); transition:background .15s; }
.pf-action:hover{ background:var(--surface-2); }
.pf-action--out{ color:var(--danger, #C0392B); box-shadow:inset 0 0 0 1px var(--danger-soft, #F3D9D6); }
.pf-action--out:hover{ background:var(--danger-soft, #FBEDEC); }
.pf-hero__inner{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:11px; }
.pf-avatar{ position:relative; width:92px; height:92px; box-shadow:0 0 0 4px var(--amber), 0 8px 24px rgba(0,0,0,.35); border-radius:50%; }
.pf-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.pf-avatar__ph{ width:100%; height:100%; border-radius:50%; background:var(--night-2); color:#fff; display:flex; align-items:center; justify-content:center; }
.pf-avatar__dot{ position:absolute; right:4px; bottom:4px; width:16px; height:16px; border-radius:50%; background:var(--online); border:3px solid var(--night); }
.pf-name{ font-size:25px; font-weight:var(--fw-heavy); color:#fff; margin:0; letter-spacing:-.02em; overflow-wrap:anywhere; }
.pf-city{ display:inline-flex; align-items:center; gap:5px; font-size:13.5px; color:rgba(255,255,255,.6); }
.pf-city .lv-ic{ width:14px; height:14px; }
.pf-badge{ display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:var(--r-pill);
background:rgba(245,180,0,.12); color:var(--amber); font-weight:var(--fw-bold); font-size:14px; box-shadow:inset 0 0 0 1px rgba(245,180,0,.4); }
.pf-badge .lv-ic{ width:15px; height:15px; }
.pf-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; background:var(--surface); border-radius:22px;
box-shadow:var(--shadow-float); padding:20px 12px; margin:-30px 18px 8px; position:relative; }
@media (min-width:861px){ .pf-stats{ margin-left:0; margin-right:0; } }
.pf-stat{ text-align:center; min-width:0; }
.pf-stat__n{ font-size:28px; font-weight:var(--fw-heavy); color:var(--ink); line-height:1; }
.pf-stat__l{ font-size:12px; color:var(--ink-3); margin-top:6px; line-height:1.25; }
.pf-sec{ margin:24px 18px 0; }
@media (min-width:861px){ .pf-sec{ margin-left:0; margin-right:0; } }
.pf-sec__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.pf-sec__title{ font-size:18px; font-weight:var(--fw-heavy); color:var(--ink); margin:0; min-width:0; overflow-wrap:anywhere; }
.pf-sec__actions{ display:flex; gap:8px; flex:none; }
.pf-edit, .pf-sec__actions .pf-save{ width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
display:flex; align-items:center; justify-content:center; transition:filter .15s; }
.pf-edit{ background:var(--amber-soft); color:var(--amber-ink); }
.pf-sec__actions .pf-save{ background:var(--echange-soft); color:var(--echange); }
.pf-edit:hover, .pf-sec__actions .pf-save:hover{ filter:brightness(.95); }
.pf-card{ background:var(--surface); border-radius:18px; box-shadow:var(--shadow-card); padding:18px; }
.pf-view{ margin:0; font-size:15px; line-height:1.6; color:var(--ink-2); white-space:pre-line; overflow-wrap:anywhere; word-break:break-word; }
.pf-view--empty{ color:var(--ink-4); font-style:italic; }
.pf-input{ display:none; width:100%; border:1px solid var(--hairline); border-radius:12px; padding:12px 14px;
font-family:var(--font-sans); font-size:15px; color:var(--ink); resize:vertical; background:var(--surface); }
.pf-input:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-soft); }
.pf-edit-actions{ display:none; gap:8px; justify-content:flex-end; margin-top:10px; }
.pf-sec.editing .pf-view{ display:none; }
.pf-sec.editing .pf-input{ display:block; }
.pf-sec.editing .pf-edit-actions{ display:flex; }
/* Genres littéraires ("Ce que je recherche") : petites cases multi-sélection. */
.pf-genres__hint{ margin:0 0 12px; font-size:13px; color:var(--ink-3); }
.pf-genres{ display:flex; flex-wrap:wrap; gap:8px; }
.pf-genre{ padding:8px 14px; border-radius:var(--r-pill); border:none; cursor:pointer;
background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); color:var(--ink-2);
font-family:var(--font-sans); font-size:13px; font-weight:var(--fw-bold); transition:all var(--dur) var(--ease-out); }
.pf-genre:hover{ box-shadow:inset 0 0 0 1.5px var(--amber); color:var(--ink); }
.pf-genre--on{ background:var(--gradient-amber); color:#fff; box-shadow:var(--shadow-amber); }
/* Read-only genre chips (public profile) : non cliquables. */
.pf-genres--ro .pf-genre{ cursor:default; }
.pf-genres--ro .pf-genre:hover{ box-shadow:var(--shadow-amber); color:#fff; }
/* ===================== READER HOME (map-first) ===================== */
.hm-head{ padding:18px 18px 12px; }
@media (min-width:861px){ .hm-head{ max-width:1100px; margin:0 auto; width:100%; padding:26px 32px 14px; } }
.hm-greet{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.hm-logo{ width:40px; height:40px; flex:none; }
.hm-greet__txt{ flex:1; min-width:0; }
.hm-hello{ font-size:28px; font-weight:var(--fw-heavy); letter-spacing:-.025em; color:var(--ink); margin:0; }
.hm-sub{ font-size:14px; color:var(--amber-ink); font-weight:var(--fw-semibold); margin:3px 0 0; }
.hm-bell{ position:relative; flex:none; width:46px; height:46px; border-radius:14px; background:var(--surface);
box-shadow:var(--shadow-card); display:flex; align-items:center; justify-content:center; color:var(--ink); }
.hm-bell .lv-ic{ width:22px; height:22px; }
.hm-bell__dot{ position:absolute; top:11px; right:12px; width:9px; height:9px; border-radius:50%; background:var(--amber); border:2px solid var(--surface); }
.hm-search{ position:relative; display:flex; margin-bottom:14px; }
.hm-search__field{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; background:var(--surface);
border-radius:var(--r-pill); padding:13px 18px; box-shadow:var(--shadow-card); }
.hm-search__field > .lv-ic{ color:var(--ink-4); flex:none; }
.hm-search__field input{ flex:1; min-width:0; border:none; outline:none; background:transparent;
font-family:var(--font-sans); font-size:15px; font-weight:var(--fw-medium); color:var(--ink); }
.hm-search__filter{ flex:none; border:none; cursor:pointer; padding:6px; margin:-6px -6px -6px 0; border-radius:var(--r-md);
background:transparent; color:var(--amber); display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s; }
.hm-search__filter:hover{ background:var(--amber-soft); color:var(--amber-ink); }
.hm-search__filter .lv-ic{ color:inherit; }
.hm-chips{ display:flex; gap:10px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.hm-chips[hidden]{ display:none; }
.hm-chips::-webkit-scrollbar{ display:none; }
.hm-chips .lv-chip{ flex:none; }
/* Input "Date spécifique" du filtre événements sur la carte. */
.hm-event-date{ flex:none; margin-top:10px; padding:8px 12px; border-radius:var(--r-pill); border:none; background:var(--surface);
box-shadow:inset 0 0 0 1.5px var(--hairline); font-family:var(--font-sans); font-size:13px; font-weight:var(--fw-bold); color:var(--ink); }
/* Input date masqué visuellement mais rendu (nécessaire à showPicker). Pas de
display:none, sinon l'ouverture programmée du calendrier échoue. */
.hm-event-date--sr{ position:absolute !important; width:1px; height:1px; min-width:0; margin:0; padding:0;
border:0; opacity:0; overflow:hidden; pointer-events:none; }
@media (max-width:860px){
/* Chips dimensionnés par leur contenu, avec le MÊME padding intérieur et la
MÊME taille de police pour TOUS — chips livres (#hm-chips) ET chips
événements (#hm-event-chips) : "Échanges" garde le même écart texte↔bord
et la même police que "Tous", "Dons", "Aujourd'hui", etc.
La rangée défile horizontalement si elle dépasse la largeur. */
.hm-chips, .lv-toolbar{ gap:8px; }
.hm-chips .lv-chip, .lv-toolbar .lv-chip{ flex:none; padding:10px 15px; font-size:13px; white-space:nowrap; }
}
/* Carte / Liste toggle, the button shows the *destination* (map view → "Voir la liste"). */
.hm-bar{ display:flex; padding:14px 18px 0; }
@media (min-width:861px){ .hm-bar{ max-width:1100px; margin:0 auto; width:100%; padding:14px 32px 0; } }
.hm-viewbtn__list, .hm-viewbtn__map{ display:inline-flex; align-items:center; gap:8px; }
.hm-eventsbtn[hidden], .hm-viewbtn[hidden]{ display:none; }
.hm[data-view="map"] .hm-viewbtn__map{ display:none; }
.hm[data-view="list"] .hm-viewbtn__list{ display:none; }
.hm-map{ position:relative; padding:12px 18px 22px; }
@media (min-width:861px){ .hm-map{ max-width:1100px; margin:0 auto; width:100%; padding:12px 32px 28px; } }
.hm-map #lv-bookmap{ width:100%; height:calc(100vh - 360px); min-height:340px; border-radius:24px; overflow:hidden; box-shadow:var(--shadow-card); }
@media (min-width:861px){ .hm-map #lv-bookmap{ height:540px; } }
.hm-list{ display:flex; flex-direction:column; gap:14px; padding:12px 18px 22px; }
@media (min-width:861px){ .hm-list{ max-width:1100px; margin:0 auto; width:100%; padding:12px 32px 28px; } }
.hm-list__empty{ text-align:center; color:var(--ink-3); font-size:14px; padding:36px 0; margin:0; }
/* One-page swap: only the active view is in the flow, with a soft cross-fade
so toggling Carte/Liste feels like staying on the same page. */
.hm[data-view="map"] .hm-list{ display:none; }
.hm[data-view="list"] .hm-map{ display:none; }
.hm[data-view="map"] .hm-map,
.hm[data-view="list"] .hm-list{ animation:hm-fade .2s var(--ease-out); }
@keyframes hm-fade{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .hm-map, .hm-list{ animation:none !important; } }
/* ===================== READER LIBRARY ===================== */
.lib{ padding:18px 0 96px; }
@media (min-width:861px){ .lib{ max-width:1100px; margin:0 auto; padding:24px 0 56px; } }
.lib-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 18px; margin-bottom:16px; }
@media (min-width:861px){ .lib-head{ padding:0 32px; } }
.lib-title{ font-size:28px; font-weight:var(--fw-heavy); letter-spacing:-.025em; color:var(--ink); margin:0; }
.lib-search{ display:flex; align-items:center; gap:10px; margin:0 18px 22px; background:var(--surface);
border-radius:var(--r-pill); padding:13px 18px; box-shadow:var(--shadow-card); }
@media (min-width:861px){ .lib-search{ margin:0 32px 26px; } }
.lib-search .lv-ic{ color:var(--ink-4); flex:none; }
.lib-search input{ flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:var(--font-sans); font-size:15px; font-weight:var(--fw-medium); color:var(--ink); }
/* Bouton "Ajouter un livre" sous la barre de recherche. */
.lib-add__btn{ flex:none; white-space:nowrap; }
/* Le bouton garde toujours son libellé « Ajouter un livre ». Sur petit écran on
réduit un peu le titre (et le bouton) pour que les deux tiennent en haut. */
@media (max-width:430px){
.lib-title{ font-size:21px; }
.lib-add__btn{ padding-left:13px; padding-right:15px; font-size:13px; }
}
.lib-sec{ margin-bottom:26px; }
.lib-sec__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:0 18px; margin-bottom:12px; }
@media (min-width:861px){ .lib-sec__head{ padding:0 32px; } }
.lib-sec__title{ font-size:19px; font-weight:var(--fw-heavy); color:var(--ink); margin:0; }
.lib-sec__count{ font-size:14px; font-weight:var(--fw-bold); color:var(--amber-ink); flex:none; }
.lib-sec__toggle{ border:none; background:none; padding:0; font-size:13px; font-weight:var(--fw-bold);
color:var(--ink-3); text-decoration:underline; cursor:pointer; font-family:var(--font-sans); flex:none; }
.lib-sec__toggle:hover{ color:var(--amber-ink); }
.lib-sec__empty{ padding:0 18px; color:var(--ink-3); font-size:14px; margin:0; }
@media (min-width:861px){ .lib-sec__empty{ padding:0 32px; } }
.lib-row{ display:flex; gap:14px; overflow-x:auto; padding:4px 18px 8px; scrollbar-width:none; }
@media (min-width:861px){ .lib-row{ padding:4px 32px 10px; } }
.lib-row::-webkit-scrollbar{ display:none; }
.lib-row .lib-tile{ width:150px; flex:none; }
.lib-row--grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); overflow-x:visible; }
.lib-row--grid .lib-tile{ width:auto; }
.lib-empty{ text-align:center; padding:50px 24px; color:var(--ink-3); }
.lib-empty h3{ font-size:18px; font-weight:var(--fw-bold); color:var(--ink); margin:0 0 8px; }
.lib-empty p{ font-size:14px; margin:0 0 18px; }
/* ===================== READER SHARES ===================== */
.shr{ padding:18px 18px 96px; max-width:680px; margin:0 auto; }
@media (min-width:861px){ .shr{ padding:24px 0 56px; } }
/* Petits écrans (iPhone SE ~320px) : compacter les onglets Partages pour éviter
le débordement horizontal (3 onglets + badges ne rentraient pas sous ~360px). */
@media (max-width:360px){
.shr{ padding-left:14px; padding-right:14px; }
.shr-tabs{ gap:4px; }
.shr-tab{ min-width:0; padding:10px 4px; gap:4px; font-size:12.5px; }
.shr-badge{ min-width:18px; height:18px; padding:0 4px; font-size:11px; }
/* Fiche événement : infos en 1 colonne pour laisser respirer les valeurs
(date/horaire/lieu) au lieu de les tronquer sur les très petits écrans. */
.evd-grid{ grid-template-columns:1fr; }
}
.shr-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.shr-title{ font-size:28px; font-weight:var(--fw-heavy); letter-spacing:-.025em; color:var(--ink); margin:0; }
.shr-tabs{ display:flex; gap:5px; margin-bottom:18px; padding:5px; border-radius:var(--r-pill);
background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); }
.shr-tab{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 8px;
border-radius:var(--r-pill); font-size:14px; font-weight:var(--fw-bold); color:var(--ink-2);
text-decoration:none; white-space:nowrap; transition:background .15s; }
.shr-tab--on{ background:var(--gradient-amber); color:#fff; box-shadow:var(--shadow-amber); }
.shr-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:21px; height:21px; padding:0 5px;
border-radius:50%; font-size:12px; font-weight:var(--fw-heavy); color:#fff; }
.shr-tab--on .shr-badge{ background:rgba(255,255,255,.32); }
.shr-badge--amber{ background:var(--amber-2); } .shr-badge--green{ background:var(--echange); } .shr-badge--rust{ background:var(--rust); }
.shr-subtabs{ display:flex; gap:8px; margin-bottom:18px; }
.shr-subtab{ padding:8px 15px; border-radius:var(--r-pill); font-size:13.5px; font-weight:var(--fw-bold);
color:var(--ink-2); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); text-decoration:none; }
.shr-subtab--on{ background:var(--ink); color:var(--surface); box-shadow:none; }
.shr-search{ display:flex; align-items:center; gap:10px; margin-bottom:18px; background:var(--surface);
border-radius:var(--r-pill); padding:13px 16px; box-shadow:inset 0 0 0 1px var(--hairline); }
.shr-search .lv-ic{ color:var(--ink-4); flex:none; }
.shr-search input{ flex:1; min-width:0; border:none; outline:none; background:transparent;
font-family:var(--font-sans); font-size:15px; font-weight:var(--fw-medium); color:var(--ink); }
.shr-subhead{ display:flex; align-items:center; gap:8px; font-size:16px; font-weight:var(--fw-heavy); color:var(--ink); margin:0 0 14px; }
.shr-subhead .shr-badge{ background:var(--rust); }
.shr-list{ display:flex; flex-direction:column; gap:16px; }
.shr-empty{ color:var(--ink-3); font-size:14px; padding:8px 2px; }
.shr-card{ background:var(--surface); border-radius:20px; box-shadow:var(--shadow-card); padding:16px 18px; border:1px solid var(--hairline); }
.shr-card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.shr-who{ display:flex; align-items:center; gap:11px; min-width:0; }
.shr-avatar{ position:relative; flex:none; width:44px; height:44px; border-radius:50%; background:var(--gradient-amber);
color:var(--night); font-weight:var(--fw-heavy); font-size:15px; display:flex; align-items:center; justify-content:center; }
.shr-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.shr-avatar__dot{ position:absolute; right:0; bottom:0; width:11px; height:11px; border-radius:50%; background:var(--online); border:2px solid var(--surface); }
.shr-who__txt{ min-width:0; display:flex; flex-direction:column; }
.shr-who__name{ font-size:15.5px; font-weight:var(--fw-bold); color:var(--ink); }
.shr-who__meta{ font-size:12.5px; color:var(--ink-3); margin-top:1px; }
.shr-dist{ color:var(--amber-ink); font-weight:var(--fw-bold); }
.shr-dist .lv-ic{ width:12px; height:12px; vertical-align:-1px; }
.shr-card__book{ display:flex; align-items:center; gap:12px; margin-top:14px; padding:12px 14px; border-radius:14px;
background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); }
.shr-card__bk-ic{ flex:none; color:var(--ink-3); display:flex; }
.shr-card__bk-cover{ flex:none; width:40px; height:56px; border-radius:8px; overflow:hidden; background:var(--paper-tint);
display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px var(--hairline); }
.shr-card__bk-cover img{ width:100%; height:100%; object-fit:cover; }
.shr-card__bk-title{ font-size:14.5px; font-weight:var(--fw-bold); color:var(--ink); }
.shr-card__bk-author{ font-size:12.5px; color:var(--ink-3); }
.shr-quote{ margin:14px 0 0; padding:4px 0 4px 14px; border-left:3px solid var(--amber); color:var(--ink-2); font-size:14px;
font-style:italic; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.shr-card__actions{ display:flex; gap:10px; margin-top:16px; }
.shr-loan{ cursor:pointer; }
.shr-loan__book{ width:100%; border:0; text-align:left; font-family:inherit; cursor:pointer; }
.shr-loan__actions{ flex-wrap:wrap; }
.shr-loan__actions form:first-child{ flex:1 1 90px; }
.shr-loan__actions form:last-child{ flex:2 1 180px; }
.shr-loan__actions .lv-btn{ min-height:44px; padding:12px 10px; font-size:13.5px; white-space:normal; }
.shr-conv{ display:flex; align-items:flex-start; gap:8px; padding:14px 14px 14px 16px; transition:box-shadow .2s var(--ease-out), transform .2s var(--ease-out); }
.shr-conv:hover{ box-shadow:var(--shadow-float); transform:translateY(-2px); }
.shr-conv__link{ display:flex; align-items:flex-start; gap:12px; flex:1; min-width:0; text-decoration:none; color:inherit; }
.shr-conv__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; padding-top:2px; }
.shr-conv__line{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.shr-conv__time{ flex:none; font-size:12px; color:var(--ink-4); }
.shr-conv__preview{ min-width:0; font-size:13.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shr-unread{ flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
padding:0 5px; border-radius:50%; background:var(--echange); color:#fff; font-size:11px; font-weight:var(--fw-bold); }
.shr-read-check{ flex:none; color:var(--ink-4); display:flex; }
.shr-conv__book{ min-width:0; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-3);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shr-conv__bookimg{ flex:none; width:18px; height:18px; border-radius:4px; object-fit:cover; }
.shr-conv__delform{ flex:none; }
.shr-conv__del{ flex:none; width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
background:var(--danger-soft,#FBEDEC); color:var(--danger,#C0392B); display:flex; align-items:center; justify-content:center; }
.shr-conv__del:hover{ filter:brightness(.95); }
.shr-conv__chev{ margin-left:auto; color:var(--ink-4); flex:none; display:flex; }
.shr-status{ flex:none; font-size:11.5px; font-weight:var(--fw-bold); padding:5px 11px; border-radius:var(--r-pill); white-space:nowrap; }
.shr-status--pending{ background:var(--vente-soft); color:var(--amber-ink); }
.shr-status--accepted{ background:var(--echange-soft); color:var(--echange); }
.shr-status--rejected{ background:var(--danger-soft); color:var(--danger); }
.shr-status--cancelled{ background:var(--paper-tint); color:var(--ink-3); }
/* ===================== READER EVENTS ===================== */
.ev{ padding:18px 18px 96px; max-width:720px; margin:0 auto; }
@media (min-width:861px){ .ev{ padding:24px 0 56px; } }
.ev-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.ev-title{ font-size:28px; font-weight:var(--fw-heavy); letter-spacing:-.025em; color:var(--ink); margin:0; }
.ev-city{ display:inline-flex; align-items:center; gap:5px; padding:8px 14px; border-radius:var(--r-pill);
background:var(--amber-soft); color:var(--amber-ink); font-weight:var(--fw-bold); font-size:13.5px; }
.ev-city .lv-ic{ width:15px; height:15px; }
.ev-search{ display:flex; align-items:center; gap:10px; margin-bottom:14px; background:var(--surface);
border-radius:var(--r-pill); padding:13px 18px; box-shadow:var(--shadow-card); }
.ev-search .lv-ic{ color:var(--ink-4); flex:none; }
.ev-search input{ flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:var(--font-sans); font-size:15px; font-weight:var(--fw-medium); color:var(--ink); }
.ev-add{ margin-bottom:16px; }
.ev-chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:18px; scrollbar-width:none; align-items:center; }
.ev-chips::-webkit-scrollbar{ display:none; }
.ev-chips .lv-chip{ flex:none; padding:7px 13px; font-size:13px; }
/* Icône filtre intégrée dans la barre de recherche (à droite du champ). */
.ev-filter{ flex:none; border:none; cursor:pointer; padding:6px; margin:-6px -6px -6px 0; border-radius:var(--r-md);
background:transparent; color:var(--ink-4); display:flex; align-items:center; justify-content:center; }
.ev-filter:hover{ background:var(--amber-soft); color:var(--amber-ink); }
.ev-filter .lv-ic{ color:inherit; }
.ev-mapbanner{ position:relative; display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:20px;
text-decoration:none; overflow:hidden; margin-bottom:22px; color:#fff;
background:linear-gradient(135deg, var(--night), var(--night-3)); box-shadow:var(--shadow-float);
transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.ev-mapbanner:hover{ transform:translateY(-2px); }
/* soft coloured glow, like a night map */
.ev-mapbanner::before{ content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse 55% 85% at 90% -15%, rgba(124,58,237,.38), transparent 60%),
radial-gradient(ellipse 45% 70% at 6% 125%, rgba(245,180,0,.22), transparent 55%); }
/* scattered event pins that gently ping */
.ev-mapbanner__dots{ position:absolute; inset:0; pointer-events:none; }
.ev-mapbanner__dots i{ position:absolute; left:var(--x); top:var(--y); width:7px; height:7px; border-radius:50%;
background:var(--c); animation:ev-pin-ping 2.8s var(--ease-out) infinite; }
.ev-mapbanner__dots i:nth-child(2){ animation-delay:.6s; }
.ev-mapbanner__dots i:nth-child(3){ animation-delay:1.2s; }
.ev-mapbanner__dots i:nth-child(4){ animation-delay:.3s; }
.ev-mapbanner__dots i:nth-child(5){ animation-delay:1.6s; }
@keyframes ev-pin-ping{ 0%{ box-shadow:0 0 0 0 var(--c); } 60%,100%{ box-shadow:0 0 0 8px transparent; } }
.ev-mapbanner__ic{ position:relative; flex:none; width:46px; height:46px; border-radius:14px; background:var(--gradient-amber);
color:var(--night); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-amber); }
.ev-mapbanner__txt{ position:relative; flex:1; min-width:0; }
.ev-mapbanner__title{ display:block; font-weight:var(--fw-heavy); font-size:16.5px; letter-spacing:-.01em; }
.ev-mapbanner__sub{ display:block; font-size:12.5px; color:rgba(255,255,255,.62); font-weight:var(--fw-medium); margin-top:2px; }
.ev-mapbanner__cta{ position:relative; flex:none; display:inline-flex; align-items:center; gap:5px; padding:9px 15px;
border-radius:var(--r-pill); background:rgba(255,255,255,.15); font-size:13px; font-weight:var(--fw-bold); }
.ev-mapbanner__cta .lv-ic{ width:15px; height:15px; }
@media (prefers-reduced-motion:reduce){ .ev-mapbanner__dots i{ animation:none; } }
.ev-count{ font-size:16px; font-weight:var(--fw-heavy); color:var(--ink); margin:0 0 14px; }
.ev-list{ display:flex; flex-direction:column; gap:16px; }
.ev-card{ display:flex; flex-direction:column; background:var(--surface); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card);
border:1px solid var(--hairline); transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.ev-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-float); }
.ev-card__link{ display:flex; text-decoration:none; color:inherit; }
.ev-card__boost{ display:flex; align-items:center; justify-content:center; gap:6px; margin:0 14px 14px; padding:10px;
border-radius:12px; background:var(--vente-soft); color:var(--amber-ink); font-size:13px; font-weight:var(--fw-bold); text-decoration:none; }
.ev-card__boost:hover{ filter:brightness(.97); }
.ev-card__img{ flex:none; width:104px; display:flex; align-items:center; justify-content:center; overflow:hidden;
background:linear-gradient(155deg, var(--paper-tint), var(--surface-2)); color:var(--amber-ink); }
.ev-card__img .lv-ic{ opacity:.5; color:#fff; }
.ev-card__img.ev-typebg--club, .ev-card__img.ev-typebg--swap, .ev-card__img.ev-typebg--writing,
.ev-card__img.ev-typebg--picnic, .ev-card__img.ev-typebg--quiz, .ev-card__img.ev-typebg--other{ color:#fff; }
.ev-card__img.ev-typebg--club{ background:linear-gradient(150deg,#FCEFC9 0%,#F5B400 100%); }
.ev-card__img.ev-typebg--swap{ background:linear-gradient(150deg,#F3EFFE 0%,#7C3AED 100%); }
.ev-card__img.ev-typebg--writing{ background:linear-gradient(150deg,#EFF6FF 0%,#2563EB 100%); }
.ev-card__img.ev-typebg--picnic{ background:linear-gradient(150deg,#ECFDF5 0%,#059669 100%); }
.ev-card__img.ev-typebg--quiz{ background:linear-gradient(150deg,#FFF7E8 0%,#D97706 100%); }
.ev-card__img.ev-typebg--other{ background:linear-gradient(150deg,#F2EDE6 0%,#8B8580 100%); }
.ev-card__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ev-card__body{ flex:1; min-width:0; padding:14px 16px; display:flex; flex-direction:column; }
.ev-card__badge{ align-self:flex-start; font-size:11.5px; font-weight:var(--fw-bold); padding:4px 10px; border-radius:var(--r-pill); margin-bottom:7px; }
.ev-card__badge--soon{ background:var(--vente-soft); color:var(--amber-ink); }
.ev-card__badge--up{ background:var(--pret-soft); color:var(--pret); }
.ev-card__badge--star{ background:var(--gradient-amber); color:var(--night); box-shadow:var(--shadow-amber); }
/* "À la une" featured section: gold-ringed cards above the regular list. */
/* "Ajouter un événement" bottom sheet */
.ev-fieldlabel{ display:block; font-size:12px; font-weight:var(--fw-bold); letter-spacing:.08em; color:var(--ink-3);
text-transform:uppercase; margin:18px 0 9px; }
.ev-addreq{ color:var(--amber-ink); }
.ev-typegrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ev-typebtn{ padding:16px 14px; border-radius:16px; border:none; background:var(--surface);
box-shadow:inset 0 0 0 1.5px var(--hairline); font-size:14.5px; font-weight:var(--fw-bold); color:var(--ink);
text-align:left; cursor:pointer; transition:.15s; }
.ev-typebtn:hover{ box-shadow:inset 0 0 0 1.5px var(--amber); }
.ev-typebtn--on{ box-shadow:inset 0 0 0 2px var(--amber); background:var(--amber-soft); color:var(--amber-ink); }
.ev-addrow{ display:flex; gap:12px; }
.ev-addrow > div{ flex:1; min-width:0; }
/* Auto-illustration per event type (no photo upload needed) */
.ev-typebg--club{ background:linear-gradient(150deg,#FCEFC9 0%,#F5B400 100%); }
.ev-typebg--swap{ background:linear-gradient(150deg,#F3EFFE 0%,#7C3AED 100%); }
.ev-typebg--writing{ background:linear-gradient(150deg,#EFF6FF 0%,#2563EB 100%); }
.ev-typebg--picnic{ background:linear-gradient(150deg,#ECFDF5 0%,#059669 100%); }
.ev-typebg--quiz{ background:linear-gradient(150deg,#FFF7E8 0%,#D97706 100%); }
.ev-typebg--other{ background:linear-gradient(150deg,#F2EDE6 0%,#8B8580 100%); }
.ev-typepreview[hidden]{ display:none; }
.ev-typepreview{ display:flex; align-items:center; gap:12px; margin-top:14px; padding:12px 14px; border-radius:14px;
background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); }
.ev-typepreview__ic{ flex:none; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.ev-typepreview__txt{ font-size:12.5px; color:var(--ink-3); line-height:1.4; }
/* "Mes événements" horizontal row on the events list page */
.ev-mine{ margin-bottom:24px; }
.ev-mine__h{ display:flex; align-items:center; gap:9px; font-size:16px; font-weight:var(--fw-heavy); color:var(--ink); margin:0 0 14px; }
.ev-mine__count{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px;
border-radius:var(--r-pill); background:var(--gradient-amber); color:#fff; font-size:12px; font-weight:var(--fw-bold); }
.ev-mine__row{ display:flex; gap:14px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.ev-mine__row::-webkit-scrollbar{ display:none; }
.ev-mine__card{ flex:none; width:220px; }
.ev-mine__imgwrap{ position:relative; width:100%; height:132px; border-radius:18px; overflow:hidden;
background:var(--paper-tint); box-shadow:var(--shadow-card); }
.ev-mine__imgwrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.ev-mine__ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--ink-4); }
.ev-mine__imgwrap.ev-typebg--club .ev-mine__ph, .ev-mine__imgwrap.ev-typebg--swap .ev-mine__ph,
.ev-mine__imgwrap.ev-typebg--writing .ev-mine__ph, .ev-mine__imgwrap.ev-typebg--picnic .ev-mine__ph,
.ev-mine__imgwrap.ev-typebg--quiz .ev-mine__ph, .ev-mine__imgwrap.ev-typebg--other .ev-mine__ph{ color:#fff; }
.ev-mine__imgwrap.ev-typebg--club{ background:linear-gradient(150deg,#FCEFC9 0%,#F5B400 100%); }
.ev-mine__imgwrap.ev-typebg--swap{ background:linear-gradient(150deg,#F3EFFE 0%,#7C3AED 100%); }
.ev-mine__imgwrap.ev-typebg--writing{ background:linear-gradient(150deg,#EFF6FF 0%,#2563EB 100%); }
.ev-mine__imgwrap.ev-typebg--picnic{ background:linear-gradient(150deg,#ECFDF5 0%,#059669 100%); }
.ev-mine__imgwrap.ev-typebg--quiz{ background:linear-gradient(150deg,#FFF7E8 0%,#D97706 100%); }
.ev-mine__imgwrap.ev-typebg--other{ background:linear-gradient(150deg,#F2EDE6 0%,#8B8580 100%); }
.ev-mine__leaveform{ display:contents; }
.ev-mine__iconbtn{ position:absolute; top:10px; width:48px; height:48px; border-radius:50%; border:none;
display:flex; align-items:center; justify-content:center; cursor:pointer; background:rgba(23,23,43,.45); color:#fff;
backdrop-filter:blur(4px); transition:background .15s; }
.ev-mine__share{ left:10px; }
.ev-mine__share:hover{ background:rgba(23,23,43,.7); }
.ev-mine__leave{ right:10px; background:var(--amber-2); }
.ev-mine__leave:hover{ background:var(--amber-ink); }
.ev-mine__badge{ position:absolute; left:10px; bottom:10px; padding:4px 10px; border-radius:var(--r-pill);
font-size:11px; font-weight:var(--fw-bold); background:var(--pret-soft); color:var(--pret); }
.ev-mine__title{ display:block; font-size:14.5px; font-weight:var(--fw-heavy); color:var(--ink); text-decoration:none;
margin:10px 0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ev-mine__meta{ display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--ink-3); flex-wrap:wrap; }
.ev-mine__meta span{ display:inline-flex; align-items:center; gap:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.ev-mine__meta .lv-ic{ width:12px; height:12px; color:var(--ink-4); flex:none; }
.ev-mine__boost{ display:flex; align-items:center; justify-content:center; margin-top:8px; padding:7px;
border-radius:10px; background:var(--vente-soft); color:var(--amber-ink); font-size:12px; font-weight:var(--fw-bold); text-decoration:none; }
.ev-mine__boost:hover{ filter:brightness(.97); }
.ev-featured{ margin-bottom:24px; }
.ev-featured__h{ display:flex; align-items:center; gap:7px; font-size:16px; font-weight:var(--fw-heavy);
color:var(--amber-ink); letter-spacing:-.01em; margin:0 0 14px; }
.ev-featured__h .lv-ic{ color:var(--amber); }
.ev-card--featured{ box-shadow:inset 0 0 0 2px var(--amber), var(--shadow-card); }
.ev-card--featured:hover{ box-shadow:inset 0 0 0 2px var(--amber), var(--shadow-float); }
/* ===================== MAP: book-cover pins + hover cards ===================== */
.lvm-pin-wrap, .lvm-me-wrap{ background:none !important; border:none !important; }
.lvm-pin{ position:relative; width:38px; height:54px; border-radius:14px;
background:var(--paper-tint) center/cover no-repeat;
box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--c), 0 6px 14px -6px rgba(17,19,32,.45);
transition:transform .35s cubic-bezier(.34,1.56,.64,1); transform-origin:50% 100%;
animation:lvm-pin-in .4s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes lvm-pin-in{ from{ transform:translateY(6px) scale(.6); opacity:0; } to{ transform:none; opacity:1; } }
.leaflet-marker-icon:hover{ z-index:500 !important; }
.leaflet-marker-icon:hover .lvm-pin{ transform:translateY(-4px) scale(1.08); }
.lvm-pin--ph{ display:flex; align-items:center; justify-content:center; font-size:20px; }
.lvm-pin::after{ content:""; position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;
border-top:8px solid var(--c); }
.lvm-pin::before{ content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
width:9px; height:9px; border-radius:0 0 4px 4px; background:var(--c); }
.lvm-me{ position:relative; width:42px; height:42px; border-radius:50%; background:var(--gradient-amber); color:#fff;
display:flex; align-items:center; justify-content:center;
box-shadow:0 6px 16px rgba(17,19,32,.3); }
.lvm-me::before{ content:''; position:absolute; inset:0; border-radius:50%;
background:rgba(245,180,0,.45); animation:lv-pulse 2.2s ease-out infinite; pointer-events:none; }
.lvm-me svg{ position:relative; width:22px; height:22px; }
.lvm-popup .leaflet-popup-content-wrapper{ border-radius:18px; padding:0; overflow:hidden; box-shadow:var(--shadow-float); background:var(--surface); }
.lvm-popup .leaflet-popup-content{ margin:0; width:auto !important; }
.lvm-popup .leaflet-popup-tip{ background:var(--surface); }
.lvm-popup a.leaflet-popup-close-button{ color:var(--ink-3); top:8px; right:8px; width:32px; height:32px;
font-size:26px; font-weight:400; line-height:30px; text-align:center; }
.lvm-card{ display:flex; flex-direction:column; padding:13px; width:224px; }
.lvm-card__top{ display:flex; gap:11px; }
.lvm-card__cover{ width:54px; height:54px; border-radius:12px; object-fit:cover; flex:none;
background:var(--paper-tint); box-shadow:0 2px 8px rgba(17,19,32,.14); }
.lvm-card__cover--ph{ display:flex; align-items:center; justify-content:center; font-size:22px; }
.lvm-card__info{ min-width:0; flex:1; }
.lvm-card__coverlink{ display:block; flex:none; border-radius:12px; }
.lvm-card__title{ font-size:15.5px; font-weight:var(--fw-heavy); color:var(--ink); line-height:1.15;
overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
text-decoration:none; cursor:pointer; }
.lvm-card__title:hover{ text-decoration:underline; }
.lvm-card__author{ font-size:12.5px; color:var(--ink-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lvm-card__badge{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:var(--fw-bold);
padding:4px 10px; border-radius:var(--r-pill); margin-top:7px; white-space:nowrap; }
.lvm-card__badge svg{ width:12px; height:12px; }
.lvm-card__badge--don{ background:var(--don-soft); color:var(--don); }
.lvm-card__badge--pret{ background:var(--pret-soft); color:var(--pret); }
.lvm-card__badge--echange{ background:var(--echange-soft); color:var(--echange); }
.lvm-card__badge--vente{ background:var(--vente-soft); color:var(--vente); }
.lvm-card__owner{ display:flex; align-items:center; gap:6px; margin-top:10px; font-size:12.5px; color:var(--ink-2); }
.lvm-card__av{ width:20px; height:20px; border-radius:50%; object-fit:cover; flex:none; }
.lvm-card__av--ph{ display:flex; align-items:center; justify-content:center; background:var(--gradient-amber);
color:#fff; font-size:10px; font-weight:var(--fw-bold); }
.lvm-card__owner-name{ color:var(--ink); font-weight:var(--fw-medium); text-decoration:none; }
.lvm-card__owner-name:hover{ text-decoration:underline; }
.lvm-card__dot{ color:var(--ink-4); }
.lvm-card__dist{ color:var(--amber-ink); font-weight:var(--fw-bold); }
.lvm-card__btn{ display:block; text-align:center; margin-top:11px; background:var(--gradient-amber); color:#fff;
font-weight:var(--fw-heavy); font-size:13px; padding:10px 8px; border-radius:12px; text-decoration:none; box-shadow:var(--shadow-amber);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Beat Leaflet's default link colour (.leaflet-container a) inside popups. */
.lvm-popup a.lvm-card__btn{ color:#fff; }
.lvm-popup a.lvm-card__owner-name{ color:var(--ink); }
.lvm-popup a.lvm-card__title{ color:var(--ink); }
.lvm-popup a.lvm-card__title:hover{ color:var(--ink); text-decoration:underline; }
/* ===================== BOOK DETAIL (dark hero) ===================== */
.bd{ padding-bottom:96px; }
@media (min-width:861px){ .bd{ max-width:760px; margin:0 auto; padding:24px 0 56px; } }
.bd-hero{ position:relative; overflow:hidden; background:var(--night); padding:22px 22px 24px; border-radius:0 0 28px 28px; }
@media (min-width:861px){ .bd-hero{ border-radius:28px; padding:28px; } }
.bd-hero::before{ content:""; position:absolute; inset:0; background:
radial-gradient(ellipse 60% 60% at 88% -10%, rgba(124,58,237,.30), transparent 60%),
radial-gradient(ellipse 50% 50% at 8% 120%, rgba(245,180,0,.14), transparent 55%); }
.bd-hero__top{ position:relative; display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; z-index:2; }
.bd-iconbtn{ width:48px; height:48px; border-radius:50%; border:none; cursor:pointer; color:#fff;
background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; }
.bd-iconbtn:hover{ background:rgba(255,255,255,.24); }
.bd-hero__row{ position:relative; display:flex; gap:18px; align-items:flex-start; z-index:1; }
.bd-cover{ flex:none; width:108px; aspect-ratio:2/3; border-radius:12px; overflow:hidden; display:block;
box-shadow:0 12px 28px rgba(0,0,0,.42); background:var(--paper-tint); }
.bd-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.bd-meta{ min-width:0; flex:1; padding-top:2px; }
/* Ligne de chips en haut de la fiche : statut « Disponible · partage » + genre. */
.bd-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; }
.bd-chips .bd-status, .bd-chips .bd-genre{ margin:0; }
.bd-genre{ display:inline-block; background:var(--gradient-amber); color:var(--night); font-weight:var(--fw-heavy);
font-size:12px; padding:5px 13px; border-radius:var(--r-pill); margin-bottom:12px; box-shadow:var(--shadow-amber); }
.bd-title{ font-size:23px; font-weight:var(--fw-heavy); color:#fff; letter-spacing:-.02em; line-height:1.12; margin:0; overflow-wrap:anywhere; }
.bd-author{ font-size:15px; color:rgba(255,255,255,.88); font-weight:var(--fw-semibold); margin-top:5px; }
.bd-pub{ font-size:13px; color:rgba(255,255,255,.5); margin-top:3px; }
.bd-typerow{ margin-top:12px; }
.bd-typerow .bd-genre{ margin-bottom:0; }
.bd-status{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:8px 15px; border-radius:var(--r-pill);
font-size:13px; font-weight:var(--fw-bold); color:var(--amber); box-shadow:inset 0 0 0 1.5px rgba(245,180,0,.5); }
.bd-status .lv-ic{ width:15px; height:15px; }
.bd-body{ padding:0 18px; }
@media (min-width:861px){ .bd-body{ padding:0; } }
.bd-owner{ display:flex; align-items:center; gap:14px; margin:18px 0; flex-wrap:wrap; }
.bd-dist{ display:inline-flex; align-items:center; gap:5px; color:var(--amber-ink); font-weight:var(--fw-heavy); font-size:15px; }
.bd-dist .lv-ic{ width:15px; height:15px; }
.bd-owner__who{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink-2); font-weight:var(--fw-semibold); font-size:14px; }
.bd-cta{ margin-bottom:22px; }
/* Inline "Statut de partage" card + expandable picker on the book detail page */
.bd-statuscard{ display:flex; align-items:center; gap:12px; background:var(--surface); border-radius:18px;
padding:14px 16px; box-shadow:var(--shadow-card); margin-bottom:10px; }
.bd-statuscard__ic{ flex:none; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.bd-statuscard__ic--pret{ background:var(--pret-soft); color:var(--pret); }
.bd-statuscard__ic--vente{ background:var(--vente-soft); color:var(--vente); }
.bd-statuscard__ic--echange{ background:var(--echange-soft); color:var(--echange); }
.bd-statuscard__ic--don{ background:var(--don-soft); color:var(--don); }
.bd-statuscard__ic--archived{ background:var(--paper-tint); color:var(--ink-3); }
.bd-statuscard__txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.bd-statuscard__lbl{ font-size:11px; font-weight:var(--fw-bold); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.bd-statuscard__val{ font-size:15.5px; font-weight:var(--fw-heavy); color:var(--ink); }
.bd-statuslist{ background:var(--surface); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-card); margin-bottom:16px; }
.bd-statusopt{ width:100%; display:flex; align-items:center; gap:14px; padding:16px; border:none; background:none;
border-bottom:1px solid var(--hairline-soft); cursor:pointer; text-align:left; font-size:15px; font-weight:var(--fw-bold);
color:var(--ink); font-family:var(--font-sans); }
.bd-statuslist > .bd-statusopt:last-child{ border-bottom:none; }
.bd-statusopt__ic{ flex:none; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.bd-statusopt__ic--pret{ background:var(--pret-soft); color:var(--pret); }
.bd-statusopt__ic--vente{ background:var(--vente-soft); color:var(--vente); }
.bd-statusopt__ic--echange{ background:var(--echange-soft); color:var(--echange); }
.bd-statusopt__ic--don{ background:var(--don-soft); color:var(--don); }
.bd-statusopt__ic--archived{ background:var(--paper-tint); color:var(--ink-3); }
.bd-statusopt__check{ margin-left:auto; flex:none; color:transparent; }
.bd-statusopt--on.bd-statusopt--pret{ background:var(--pret-soft); } .bd-statusopt--on.bd-statusopt--pret .bd-statusopt__check{ color:var(--pret); }
.bd-statusopt--on.bd-statusopt--vente{ background:var(--vente-soft); } .bd-statusopt--on.bd-statusopt--vente .bd-statusopt__check{ color:var(--vente); }
.bd-statusopt--on.bd-statusopt--echange{ background:var(--echange-soft); } .bd-statusopt--on.bd-statusopt--echange .bd-statusopt__check{ color:var(--echange); }
.bd-statusopt--on.bd-statusopt--don{ background:var(--don-soft); } .bd-statusopt--on.bd-statusopt--don .bd-statusopt__check{ color:var(--don); }
.bd-statusopt--on.bd-statusopt--archived{ background:var(--paper-tint); } .bd-statusopt--on.bd-statusopt--archived .bd-statusopt__check{ color:var(--ink-3); }
#bd-status-price-wrap{ padding:0 16px 16px; }
.bd-section-h{ font-size:18px; font-weight:var(--fw-heavy); color:var(--ink); margin:24px 0 12px; }
.bd-card{ background:var(--surface); border-radius:18px; box-shadow:var(--shadow-card); padding:18px; margin-bottom:16px; }
.bd-card__h{ font-size:16px; font-weight:var(--fw-heavy); color:var(--ink); margin:0 0 10px; }
.bd-card__text{ font-size:15px; line-height:1.6; color:var(--ink-2); margin:0; white-space:pre-line; }
.bd-card__text--sp{ margin-top:10px; }
.bd-clamp{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.bd-open .bd-clamp{ -webkit-line-clamp:unset; overflow:visible; }
.bd-more{ display:inline-flex; align-items:center; gap:4px; margin-top:10px; border:none; background:none; cursor:pointer;
color:var(--amber-ink); font-weight:var(--fw-bold); font-size:14px; padding:0; font-family:var(--font-sans); }
.bd-open .bd-more .lv-ic{ transform:rotate(180deg); }
.bd-qa{ background:var(--surface); border-radius:18px; box-shadow:var(--shadow-card); padding:18px; margin-bottom:16px; }
.bd-qa__head{ display:flex; align-items:flex-start; gap:11px; margin-bottom:12px; }
.bd-qa__n{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--amber-soft); color:var(--amber-ink);
font-weight:var(--fw-heavy); font-size:13px; display:flex; align-items:center; justify-content:center; }
.bd-qa__q{ font-size:15.5px; font-weight:var(--fw-heavy); color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.bd-qa__answer{ background:var(--surface-2); border-radius:12px; padding:14px; box-shadow:inset 0 0 0 1px var(--hairline); }
.bd-qa__answer p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--ink-2); overflow-wrap:anywhere; }
.bd-qa__answer .bd-more{ margin-top:8px; }
/* "Mes réflexions": editable Q&A + "Mon avis" cards */
.bd-reflect__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 0 12px; }
.bd-reflect__head .bd-section-h{ margin:0; display:flex; align-items:center; gap:8px; }
.bd-reflect__actions{ display:flex; align-items:center; gap:6px; flex:none; margin-left:auto; }
.bd-reflect__ic{ width:30px; height:30px; border-radius:50%; border:none; cursor:pointer; flex:none;
display:flex; align-items:center; justify-content:center; background:var(--paper-tint); color:var(--ink-3); }
.bd-reflect__ic:hover{ background:var(--hairline-soft); color:var(--ink); }
.bd-reflect__ic--save{ background:var(--echange-soft); color:var(--echange); }
.bd-reflect__ic--del{ background:var(--danger-soft); color:var(--danger); }
.bd-qa__qinput{ flex:1; min-width:0; border:none; background:none; outline:none; font-family:inherit;
font-size:15.5px; font-weight:var(--fw-heavy); color:var(--ink); padding:0; }
/* La question est un