/* =====================================================================
   VELOURS — feuille de style
   Ambiance : nuit veloutée, rose framboise et or champagne.
   ===================================================================== */

:root {
    --bg: #0d090e;
    --bg-2: #140e16;
    --surface: rgba(30, 21, 33, .72);
    --surface-solid: #1a131d;
    --surface-2: #241a28;
    --surface-3: #2e2233;
    --line: rgba(var(--ink-2), .08);
    --line-2: rgba(var(--ink-2), .16);
    --text: #f7eef2;
    --text-2: #ddcdd5;
    --ink: 255, 255, 255;
    --ink-2: 255, 228, 240;
    --bg-rgb: 13, 9, 14;
    --muted: #a7959e;
    --rose: #ff4f8a;
    --rose-2: #d6336c;
    --wine: #7d1a45;
    --gold: #e9bd74;
    --green: #3ddc84;
    --danger: #ff6464;
    --grad: linear-gradient(135deg, #ff6b98 0%, #e03a76 45%, #9b2058 100%);
    --grad-gold: linear-gradient(135deg, #f6d79b 0%, #e2a956 100%);
    --radius: 20px;
    --radius-sm: 12px;
    --shadow: 0 20px 50px -20px rgba(0, 0, 0, .7);
    --glow: 0 10px 30px -8px rgba(255, 79, 138, .55);
    --ease: cubic-bezier(.22, 1, .36, 1);
    --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --serif: 'Fraunces', Georgia, serif;
    --topbar: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font: 15px/1.55 var(--font);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
::selection { background: rgba(255, 79, 138, .35); }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
em { font-style: italic; }
h1 em, h2 em {
    font-family: var(--serif);
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: .05em;
}
p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.row-gap { display: flex; gap: 10px; flex-wrap: wrap; }

/* Lueurs d'ambiance en fond */
.ambient {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(600px 400px at 10% -5%, rgba(214, 51, 108, .22), transparent 70%),
        radial-gradient(500px 400px at 95% 10%, rgba(233, 189, 116, .10), transparent 70%),
        radial-gradient(700px 500px at 60% 110%, rgba(125, 26, 69, .30), transparent 70%),
        var(--bg);
}

/* Icônes */
.ico { width: 20px; height: 20px; flex: none; }

/* =====================================================================
   BOUTONS
   ===================================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 20px;
    border-radius: 999px;
    font-weight: 600; font-size: 14.5px; letter-spacing: .01em;
    white-space: nowrap;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s, opacity .2s;
    border: 1px solid transparent;
    user-select: none;
}
.btn:active { transform: scale(.97); }
.btn .ico { width: 18px; height: 18px; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: var(--glow); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -8px rgba(255, 79, 138, .7); }
.btn-gold { background: var(--grad-gold); color: #2a1a0a; box-shadow: 0 10px 26px -10px rgba(233, 189, 116, .6); }
.btn-ghost { background: rgba(var(--ink), .04); border-color: var(--line-2); color: var(--text); }
.btn-ghost:hover { background: rgba(var(--ink), .08); border-color: rgba(var(--ink-2), .26); }
.btn-ghost.is-on { color: var(--rose); border-color: rgba(255, 79, 138, .45); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 13.5px; }
.btn-xs { height: 30px; padding: 0 12px; font-size: 12.5px; }
.btn-lg { height: 54px; padding: 0 28px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-icon { width: 44px; padding: 0; }
.btn[disabled], .btn.is-loading { opacity: .6; pointer-events: none; }
.btn.is-loading::after {
    content: ''; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: spin .7s linear infinite;
}
.icon-btn {
    display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    color: var(--muted); transition: background .2s, color .2s;
}
.icon-btn:hover { background: rgba(var(--ink), .07); color: var(--text); }
.link { color: var(--rose); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.heart-btn.is-on, .pcard-like.is-on, .act-like.is-on { color: var(--rose); }
.heart-btn.is-on .ico, .pcard-like.is-on .ico, .act-like.is-on .ico { fill: currentColor; }
.pop { animation: pop .45s var(--ease); }

/* =====================================================================
   CARTES, BADGES, AVATARS
   ===================================================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
}
.card-title { font: 600 13px/1 var(--font); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.card-title .ico { width: 16px; height: 16px; }
.card-title + .tags + .card-title { margin-top: 20px; }

.avatar { flex: none; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.avatar-xs { width: 24px; height: 24px; font-size: 11px; }
.avatar-sm { width: 32px; height: 32px; font-size: 13px; }
.avatar-md { width: 44px; height: 44px; font-size: 17px; }
.avatar-lg { width: 58px; height: 58px; font-size: 22px; }
.avatar-xl { width: 128px; height: 128px; font-size: 48px; }
.avatar-letter {
    display: inline-grid; place-items: center;
    font-family: var(--serif); font-weight: 600; color: #fff;
    background: linear-gradient(135deg, hsl(var(--h) 70% 58%), hsl(calc(var(--h) + 40) 65% 32%));
    text-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}
.avatar-wrap { position: relative; display: inline-flex; flex: none; }
.dot-online {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 0 2px var(--bg-2);
}
.avatar-wrap .dot-online { position: absolute; right: 0; bottom: 0; }
.dot-lg { width: 18px; height: 18px; box-shadow: 0 0 0 4px var(--surface-solid); }
strong .dot-online { margin-left: 6px; vertical-align: middle; width: 8px; height: 8px; box-shadow: none; }

.tbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tbadge i { font-style: normal; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; }
.tbadge-h i { background: rgba(96, 165, 250, .18); color: #8ab9ff; }
.tbadge-f i { background: rgba(255, 79, 138, .18); color: #ff8db2; }
.tbadge-c i { background: rgba(233, 189, 116, .18); color: var(--gold); }
.tbadge-t i { background: rgba(167, 139, 250, .2); color: #c4b5fd; }

.badge {
    display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: 999px; background: var(--rose); color: #fff; font: 700 11px/1 var(--font);
}
.pill {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; background: rgba(233, 189, 116, .14); color: var(--gold);
}
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
    padding: 6px 12px; border-radius: 999px; font-size: 13px;
    border: 1px solid var(--line-2); color: var(--text-2); background: rgba(var(--ink), .02);
}
.tag.is-match { border-color: rgba(255, 79, 138, .5); color: #fff; background: rgba(255, 79, 138, .14); }
.match-count { margin-left: auto; color: var(--rose); letter-spacing: 0; text-transform: none; font-size: 12px; }

/* =====================================================================
   FORMULAIRES
   ===================================================================== */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; position: relative; }
.field > span:first-child { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field input, .field select, .field textarea, .comment-form input, .thread-form textarea, .composer textarea {
    width: 100%; min-height: 48px; padding: 12px 16px;
    background: rgba(var(--ink), .035);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { background: var(--surface-solid); }
.field input:focus, .field select:focus, .field textarea:focus, .comment-form input:focus, .thread-form textarea:focus {
    border-color: rgba(255, 79, 138, .6); background: rgba(255, 79, 138, .05);
    box-shadow: 0 0 0 4px rgba(255, 79, 138, .12);
}
.field input[type=date] { color-scheme: dark; }
.field.has-error input { border-color: var(--danger); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.field-hint { font-size: 12.5px; color: var(--muted); font-style: normal; }
.field-hint.ok { color: var(--green); }
.field-hint.bad, .field-error { color: var(--danger); font-size: 13px; min-height: 0; }
.field-error:empty { display: none; }
.alert { padding: 12px 16px; border-radius: 12px; background: rgba(255, 100, 100, .1); border: 1px solid rgba(255, 100, 100, .3); color: #ffb3b3; font-size: 14px; }

.pw { position: relative; display: block; }
.pw input { padding-right: 50px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; color: var(--muted); border-radius: 10px; }
.pw-meter { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pw-meter i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .4s var(--ease), background .3s; }

.input-ico { position: relative; }
.input-ico .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 18px; }
.input-ico input { padding-left: 42px; }

/* Puces à cocher (envies, types) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight: 500;
    border: 1px solid var(--line-2); background: rgba(var(--ink), .025);
    cursor: pointer; user-select: none;
    transition: all .22s var(--ease);
}
.chip span:hover { border-color: rgba(var(--ink-2), .3); }
.chip input:checked + span {
    background: var(--grad); border-color: transparent; color: #fff;
    box-shadow: 0 6px 18px -8px rgba(255, 79, 138, .8);
}
.chip input:checked + span::before { content: '✓'; font-size: 12px; }
.chip input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 2px; }
.chips-sm .chip span { padding: 7px 12px; font-size: 13px; }

/* Cartes de choix (Vous êtes…) */
.type-groups { display: grid; gap: 16px; }
.type-group h4 { font: 600 12px/1 var(--font); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 10px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
    display: grid; place-items: center; text-align: center; min-height: 52px; padding: 10px;
    border-radius: 14px; border: 1px solid var(--line-2); background: rgba(var(--ink), .025);
    font-weight: 600; font-size: 14px; cursor: pointer; transition: all .22s var(--ease);
}
.choice span:hover { border-color: rgba(var(--ink-2), .3); transform: translateY(-1px); }
.choice input:checked + span { border-color: var(--rose); background: rgba(255, 79, 138, .12); box-shadow: inset 0 0 0 1px var(--rose), 0 8px 24px -12px rgba(255, 79, 138, .8); }

/* Case à cocher & interrupteur */
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--text-2); cursor: pointer; }
.check input { appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border-radius: 7px; border: 1.5px solid var(--line-2); background: rgba(var(--ink), .03); display: grid; place-items: center; transition: all .2s; cursor: pointer; }
.check input:checked { background: var(--grad); border-color: transparent; }
.check input:checked::after { content: '✓'; color: #fff; font-size: 13px; font-weight: 700; }
.check a { color: var(--rose); }
.switch { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 14px; color: var(--text-2); cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch i { flex: none; position: relative; width: 44px; height: 26px; border-radius: 99px; background: var(--surface-3); transition: background .25s; }
.switch i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); }
.switch input:checked + i { background: var(--rose); }
.switch input:checked + i::after { transform: translateX(18px); }

/* Choix segmentés (rayon km) */
.segmented { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(var(--ink), .04); border: 1px solid var(--line); }
.segmented label { flex: 1; min-width: 64px; }
.segmented input { position: absolute; opacity: 0; }
.segmented span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 10px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; transition: all .25s var(--ease); white-space: nowrap; }
.segmented span .ico { width: 16px; height: 16px; }
.segmented input:checked + span { background: var(--text); color: var(--bg); }
.segmented-sm span { height: 32px; }

/* Autocomplétion ville */
.city-field { position: relative; }
.city-list {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
    list-style: none; margin: 0; padding: 6px;
    background: var(--surface-solid); border: 1px solid var(--line-2); border-radius: 14px;
    box-shadow: var(--shadow); animation: dropIn .2s var(--ease);
}
.city-list li { padding: 10px 12px; border-radius: 10px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.city-list li small { color: var(--muted); }
.city-list li:hover, .city-list li.is-active { background: rgba(255, 79, 138, .12); }

/* =====================================================================
   PAGES PUBLIQUES (landing, connexion, inscription)
   ===================================================================== */
.guest-bar {
    position: sticky; top: 0; z-index: 50;
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px clamp(16px, 4vw, 48px);
    background: linear-gradient(to bottom, rgba(var(--bg-rgb), .85), rgba(var(--bg-rgb), 0));
    backdrop-filter: blur(8px);
}
.guest-actions { display: flex; align-items: center; gap: 10px; }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--grad); color: #fff; box-shadow: var(--glow); }
.logo-mark .ico { width: 22px; height: 22px; }
.logo-img { display: block; height: 34px; width: auto; filter: drop-shadow(0 4px 14px rgba(255, 30, 140, .45)); transition: transform .3s var(--ease); }
.logo:hover .logo-img { transform: scale(1.03); }
.topbar .logo-img { height: 28px; }
.guest-footer .logo-img { height: 26px; }
.logo-text { font: italic 600 23px/1 var(--serif); letter-spacing: -.01em; }

.hero {
    position: relative; min-height: calc(100vh - 80px);
    display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px;
    padding: 40px clamp(16px, 6vw, 96px) 80px;
    max-width: 1320px; margin: 0 auto;
}
.hero-orbs { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-orbs i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.hero-orbs i:nth-child(1) { width: 420px; height: 420px; background: #c2185b; left: -80px; top: 10%; }
.hero-orbs i:nth-child(2) { width: 320px; height: 320px; background: #6d1b4b; right: 5%; top: 0; animation-delay: -6s; }
.hero-orbs i:nth-child(3) { width: 260px; height: 260px; background: #b8860b; right: 25%; bottom: 0; opacity: .25; animation-delay: -12s; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; }
.eyebrow .ico { width: 16px; height: 16px; }
.hero h1 { font-size: clamp(42px, 6.4vw, 86px); line-height: 1.02; letter-spacing: -.025em; }
.hero-sub { max-width: 540px; margin: 26px 0 34px; font-size: 18px; color: var(--text-2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding: 0; margin: 36px 0 0; font-size: 14px; color: var(--muted); }
.hero-trust li { display: flex; align-items: center; gap: 8px; }
.hero-trust .ico { width: 17px; color: var(--gold); }

.hero-visual { position: relative; height: 460px; }
.float-card {
    position: absolute; display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; border-radius: 20px; min-width: 270px;
    background: var(--surface); border: 1px solid var(--line-2);
    backdrop-filter: blur(20px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
    animation: float 7s ease-in-out infinite;
}
.float-card strong { display: block; font-size: 15px; }
.float-card small { color: var(--muted); font-size: 13px; }
.fc-1 { top: 8%; left: 0; }
.fc-2 { top: 42%; right: 0; animation-delay: -2.4s; }
.fc-3 { bottom: 6%; left: 12%; animation-delay: -4.6s; }
.fc-heart { margin-left: auto; color: var(--rose); animation: beat 1.6s ease-in-out infinite; }
.fc-heart .ico { fill: currentColor; width: 22px; height: 22px; }
.fc-lock { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--grad-gold); color: #2a1a0a; }

.section { max-width: 1180px; margin: 0 auto; padding: 90px clamp(16px, 5vw, 48px); }
.section-title { font-size: clamp(32px, 4vw, 52px); margin-bottom: 44px; text-align: center; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.steps li { padding: 30px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--ink), .03), transparent); }
.steps span { font: italic 600 44px/1 var(--serif); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.steps h3 { font-size: 20px; margin: 18px 0 10px; }
.steps p, .feature p { color: var(--muted); }
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding-top: 0; }
.feature { padding: 34px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .3s; }
.feature:hover { transform: translateY(-4px); border-color: rgba(255, 79, 138, .3); }
.feature-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 79, 138, .12); color: var(--rose); margin-bottom: 20px; }
.feature h3 { font-size: 20px; margin-bottom: 10px; }
.manifesto { text-align: center; }
.manifesto-quote { font: 400 clamp(24px, 3.2vw, 40px)/1.3 var(--serif); max-width: 900px; margin: 0 auto; color: var(--text-2); }
.manifesto-quote em { color: var(--gold); }
.final-cta { text-align: center; display: grid; justify-items: center; gap: 18px; padding-bottom: 120px; }
.final-cta h2 { font-size: clamp(36px, 5vw, 64px); }
.final-cta p { color: var(--muted); font-size: 17px; }

.guest-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 36px clamp(16px, 5vw, 48px); border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.guest-footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.guest-footer nav a:hover { color: var(--text); }
.guest-footer .logo { margin-bottom: 6px; }
.auth .guest-footer { display: none; }

/* Auth */
.auth-wrap { min-height: calc(100vh - 80px); display: grid; place-items: center; padding: 20px 16px 60px; }
.auth-card { width: 100%; max-width: 460px; padding: clamp(24px, 5vw, 40px); border-radius: 28px; background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(24px); box-shadow: var(--shadow); }
.auth-card h1 { font-size: 36px; margin-bottom: 10px; }
.auth-card > .muted { margin-bottom: 26px; }
.auth-switch { margin-top: 22px; text-align: center; color: var(--muted); font-size: 14px; }
.auth-switch a { color: var(--rose); font-weight: 600; }

.wizard { max-width: 640px; }
.wizard-progress { height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; margin-bottom: 14px; }
.wizard-progress i { display: block; height: 100%; background: var(--grad); transition: width .6s var(--ease); }
.wizard-count { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--muted); margin-bottom: 18px; }
.step { border: 0; padding: 0; margin: 0; min-width: 0; display: none; gap: 18px; }
.step.is-current { display: grid; animation: stepIn .5s var(--ease); }
.step.is-back { animation-name: stepBack; }
.step h1 { font-size: clamp(30px, 5vw, 40px); }
.step > .muted { margin-top: -8px; }
.wizard-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }
.wizard-nav [data-next], .wizard-nav [data-submit] { margin-left: auto; }
.consents { display: grid; gap: 14px; padding: 18px; border-radius: 16px; background: rgba(var(--ink), .025); border: 1px solid var(--line); }

/* Avertissement 18+ */
.age-gate { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(8, 5, 9, .82); backdrop-filter: blur(16px); animation: fadeIn .3s; }
.age-card { max-width: 440px; text-align: center; padding: 40px 32px; border-radius: 28px; background: var(--surface-solid); border: 1px solid var(--line-2); box-shadow: var(--shadow); animation: modalIn .5s var(--ease); }
.age-18 { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--grad); font: italic 600 26px/1 var(--serif); margin-bottom: 20px; box-shadow: var(--glow); }
.age-card h2 { font-size: 28px; margin-bottom: 12px; }
.age-card p { color: var(--muted); margin-bottom: 26px; }
.age-actions { display: grid; gap: 10px; }

/* =====================================================================
   APPLICATION CONNECTÉE
   ===================================================================== */
.topbar {
    position: sticky; top: 0; z-index: 60; height: var(--topbar);
    display: flex; align-items: center; gap: 20px;
    padding: 0 clamp(14px, 3vw, 32px);
    background: rgba(var(--bg-rgb), .78); backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid var(--line);
}
.topbar .logo-text { font-size: 21px; }
.tabs { display: flex; gap: 4px; margin: 0 auto; }
.tab {
    position: relative; display: flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 14px; border-radius: 12px;
    color: var(--muted); font-weight: 600; font-size: 14px;
    transition: color .2s, background .2s;
}
.tab:hover { color: var(--text); background: rgba(var(--ink), .05); }
.tab.is-active { color: var(--text); }
.tab.is-active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -13px; height: 2px; border-radius: 2px; background: var(--grad); }
.tab .badge { margin-left: 2px; }
.me-btn { display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px; border: 1px solid var(--line); transition: background .2s; font-weight: 600; font-size: 14px; }
.me-btn:hover, .me-btn.is-active { background: rgba(var(--ink), .06); }

/* Menus déroulants */
.menu { position: relative; }
.menu-pop {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 220px;
    padding: 6px; border-radius: 16px; background: var(--surface-solid); border: 1px solid var(--line-2);
    box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right;
    transition: all .2s var(--ease);
}
.menu.is-open .menu-pop { opacity: 1; visibility: visible; transform: none; }
.menu-pop a, .menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 14px; text-align: left; transition: background .15s; }
.menu-pop a:hover, .menu-pop button:hover { background: rgba(var(--ink), .06); }
.menu-pop .ico { width: 18px; color: var(--muted); }
.menu-pop .danger, .menu-pop .danger .ico { color: var(--danger); }

.bottombar { display: none; }
.main { max-width: 1180px; margin: 0 auto; padding: 28px clamp(12px, 3vw, 28px) 90px; }

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head h1 { font-size: clamp(30px, 4vw, 44px); }
.page-head .muted { margin-top: 6px; }
.filter-btn .badge { margin-left: 2px; }

/* Fil d'actualité */
.layout-feed { display: grid; grid-template-columns: minmax(0, 640px) 320px; gap: 28px; justify-content: center; align-items: start; }
.feed-col { display: grid; gap: 18px; min-width: 0; }
.side-col { position: sticky; top: calc(var(--topbar) + 24px); display: grid; gap: 18px; }
.side-me-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.side-me-head small, .mini-user small { display: block; color: var(--muted); font-size: 12.5px; }
.mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mini-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mini-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mini-user strong { font-size: 14px; }
.avatar-cloud { display: flex; flex-wrap: wrap; gap: 8px; }

.welcome h2 { font-size: 26px; margin-bottom: 8px; }
.welcome p { color: var(--muted); margin-bottom: 16px; }

.stories { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.stories::-webkit-scrollbar { display: none; }
.story { display: grid; justify-items: center; gap: 6px; flex: none; width: 70px; }
.story small { font-size: 12px; color: var(--muted); max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-ring { padding: 3px; border-radius: 50%; background: linear-gradient(135deg, var(--green), #1a8f50); }
.story-ring .avatar { border: 3px solid var(--bg); }
.story.is-live .story-ring { background: var(--grad); animation: pulseRing 2s infinite; }
.story.is-live small b { color: var(--rose); font-size: 11px; letter-spacing: .1em; }

/* Composer */
.composer { padding: 16px 18px; }
.composer-top { display: flex; gap: 12px; align-items: flex-start; }
.composer textarea { min-height: 44px; border: 0; background: transparent; padding: 10px 4px; resize: none; font-size: 16px; box-shadow: none !important; }
.composer-previews { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 0 0 56px; }
.composer-previews:empty { display: none; }
.composer-previews figure { position: relative; margin: 8px 0 0; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; animation: popIn .3s var(--ease); }
.composer-previews img, .composer-previews video { width: 100%; height: 100%; object-fit: cover; }
.composer-previews button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .65); display: grid; place-items: center; }
.composer-previews button .ico { width: 14px; }
.composer-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.chip-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; color: var(--gold); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .2s; }
.chip-btn:hover { background: rgba(233, 189, 116, .1); }

/* Publication */
.posts { display: grid; gap: 18px; }
.post { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(18px); overflow: hidden; }
.post-context { display: flex; align-items: center; gap: 8px; padding: 12px 18px 0; font-size: 13px; color: var(--muted); }
.post-context .ico { width: 15px; }
.post-context a { color: var(--text); font-weight: 600; }
.post-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 12px 0 18px; }
.post-author { display: flex; gap: 12px; align-items: center; }
.post-author strong { display: block; font-size: 15px; }
.post-author small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.post-body { padding: 12px 18px 4px; font-size: 15.5px; white-space: normal; word-wrap: break-word; }
.post-media { display: grid; gap: 3px; margin-top: 12px; }
.post-media.n2 { grid-template-columns: 1fr 1fr; }
.post-media.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.post-media.n3 > :first-child { grid-row: span 2; }
.post-media.n4 { grid-template-columns: 1fr 1fr; }
.post-media img, .post-media video { width: 100%; height: 100%; object-fit: cover; max-height: 620px; background: #000; }
.post-media.n1 img { max-height: 680px; object-fit: contain; background: rgba(0, 0, 0, .3); }
.post-media:not(.n1) img, .post-media:not(.n1) video { aspect-ratio: 1; }
.media-tile { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.media-tile img { transition: transform .6s var(--ease); }
.media-tile:hover img { transform: scale(1.03); }
.more-count { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .55); font: 600 28px var(--serif); }
.post-actions { display: flex; gap: 4px; padding: 6px 10px; border-top: 1px solid var(--line); margin-top: 12px; }
.act { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border-radius: 12px; color: var(--muted); font-size: 14px; font-weight: 600; transition: background .2s, color .2s; }
.act:hover { background: rgba(var(--ink), .05); color: var(--text); }
.act-repost.is-on { color: var(--green); }
.act-static { cursor: default; }
.act-static:hover { background: none; color: var(--muted); }
.post-comments { padding: 4px 18px 16px; border-top: 1px solid var(--line); animation: fadeIn .3s; }
.comments-list { display: grid; gap: 12px; padding: 14px 0; }
.comment { display: flex; gap: 10px; animation: popIn .3s var(--ease); }
.comment-bubble { background: var(--surface-2); padding: 9px 14px; border-radius: 4px 16px 16px 16px; font-size: 14px; max-width: 100%; word-wrap: break-word; }
.comment-bubble a { font-weight: 700; margin-right: 6px; }
.comment-meta { display: flex; gap: 10px; font-size: 12px; color: var(--muted); margin: 4px 0 0 6px; }
.comment-meta button { color: var(--muted); font-size: 12px; }
.comment-meta button:hover { color: var(--danger); }
.comment-form { display: flex; gap: 10px; align-items: center; }
.comment-form input { min-height: 40px; border-radius: 999px; padding: 8px 16px; }
.comment-form .icon-btn { color: var(--rose); flex: none; }

.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.clamp.is-open { display: block; -webkit-line-clamp: unset; }
.clamp-more { color: var(--text); font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; margin: 4px 18px 0; display: inline-block; }
.about + .clamp-more, .group-hero .clamp-more { margin-left: 0; }

/* Grille de profils (recherche / favoris) */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.pcard { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface-solid); border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; animation: cardIn .6s var(--ease) both; }
.pcard:hover { transform: translateY(-5px); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 79, 138, .25); }
.pcard-media { aspect-ratio: 4/5; overflow: hidden; position: relative; }
.pcard-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--bg-rgb), .95) 0%, rgba(var(--bg-rgb), .2) 45%, transparent 70%); }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pcard:hover .pcard-media img { transform: scale(1.06); }
.pcard-letter { display: grid; place-items: center; width: 100%; height: 100%; font: italic 600 92px/1 var(--serif); color: rgba(255, 255, 255, .9); background: radial-gradient(circle at 30% 20%, hsl(var(--h) 75% 55%), hsl(calc(var(--h) + 40) 60% 18%)); }
.pcard-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; display: grid; gap: 4px; z-index: 1; }
.pcard-info strong { font-size: 16.5px; display: flex; align-items: center; }
.pcard-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.pcard-city { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.pcard-city .ico { width: 14px; }
.pcard-like { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--bg-rgb), .55); backdrop-filter: blur(10px); color: var(--text); transition: transform .25s var(--ease), background .2s; }
.pcard-like:hover { transform: scale(1.1); background: rgba(var(--bg-rgb), .75); }

/* Modales */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(8, 5, 9, .7); backdrop-filter: blur(10px); animation: fadeIn .25s; }
.modal.is-closing { animation: fadeOut .2s forwards; }
.modal-card { width: 100%; max-width: 480px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; border-radius: 26px; background: var(--surface-solid); border: 1px solid var(--line-2); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .9); animation: modalIn .45s var(--ease); }
.modal.is-closing .modal-card { animation: modalOut .2s forwards; }
.modal-lg { max-width: 720px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px 12px; }
.modal-head h2 { font-size: 26px; }
.modal-body { padding: 8px 22px 22px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: -22px; margin: 0 -22px -22px; padding: 14px 22px 22px; background: var(--surface-solid); border-top: 1px solid var(--line); border-radius: 0 0 26px 26px; }
.filter-block h4 { font-size: 14px; margin-bottom: 12px; font-weight: 700; }
.filter-block h4 small { font-weight: 400; }
.filter-geo { display: grid; gap: 16px; }
.save-default { padding: 14px; border-radius: 14px; background: rgba(233, 189, 116, .06); border: 1px solid rgba(233, 189, 116, .18); }

/* Profil */
.profile { display: grid; gap: 22px; }
.profile-hero { padding: 0; overflow: hidden; }
.profile-cover { border-radius: var(--radius) var(--radius) 0 0; }
.profile-cover { height: 170px; background: radial-gradient(circle at 20% 0%, hsl(var(--h) 75% 45% / .9), transparent 60%), radial-gradient(circle at 90% 30%, hsl(calc(var(--h) + 50) 60% 35% / .8), transparent 60%), linear-gradient(135deg, #2a1420, #120b14); }
.profile-id { display: flex; gap: 24px; align-items: flex-start; padding: 0 28px; margin-top: -64px; flex-wrap: wrap; position: relative; z-index: 1; pointer-events: none; }
.profile-id > * { pointer-events: auto; }
.profile-avatar { position: relative; }
.profile-avatar .avatar { border: 5px solid var(--surface-solid); box-shadow: var(--shadow); }
.profile-avatar .dot-online { position: absolute; right: 10px; bottom: 10px; }
.avatar-edit { position: absolute; left: 4px; bottom: 4px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); cursor: pointer; box-shadow: var(--shadow); transition: transform .2s; }
.avatar-edit:hover { transform: scale(1.08); }
.avatar-edit .ico { width: 18px; }
.profile-names { padding-bottom: 6px; min-width: 0; margin-top: 76px; }
.profile-names h1 { font-size: clamp(30px, 4vw, 42px); word-break: break-word; }
.profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; color: var(--text-2); font-size: 14px; }
.profile-meta span { display: inline-flex; align-items: center; gap: 5px; }
.profile-meta .ico { width: 16px; color: var(--muted); }
.profile-sub { margin-top: 6px; font-size: 13.5px; }
.txt-online { color: var(--green); font-weight: 600; }
.profile-stats { list-style: none; display: flex; gap: 34px; margin: 22px 28px 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.profile-stats strong { display: block; font: 600 24px/1 var(--serif); }
.profile-stats span { font-size: 13px; color: var(--muted); }
.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 28px 26px; }
.profile-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 22px; align-items: start; }
.profile-side { display: grid; gap: 18px; position: sticky; top: calc(var(--topbar) + 24px); }
.profile-main { display: grid; gap: 18px; min-width: 0; }
.about { color: var(--text-2); }
.tags + .small { margin-top: 18px; }

.ptabs { display: flex; gap: 6px; padding: 5px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); overflow-x: auto; }
.ptabs button, .ptabs a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 12px; color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; transition: all .25s var(--ease); }
.ptabs .ico { width: 18px; }
.ptabs small { color: inherit; opacity: .7; }
.ptabs .is-active { background: var(--surface-3); color: var(--text); }
.ptabs-links { margin-bottom: 22px; }
.tab-panel { display: grid; gap: 18px; animation: fadeIn .35s; }

.upload-zone { display: grid; justify-items: center; gap: 12px; padding: 28px; border-radius: var(--radius); border: 1.5px dashed var(--line-2); background: rgba(var(--ink), .02); text-align: center; transition: all .25s; }
.upload-zone > .ico { width: 34px; height: 34px; color: var(--gold); }
.upload-zone.is-drag { border-color: var(--rose); background: rgba(255, 79, 138, .07); transform: scale(1.01); }
.gallery-title { font: 600 13px/1 var(--font); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.gallery-title .ico { width: 16px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gtile { position: relative; margin: 0; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--surface-2); animation: cardIn .5s var(--ease) both; }
.gtile img, .gtile video { width: 100%; height: 100%; object-fit: cover; }
.gtile-tools { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transform: translateY(-4px); transition: all .2s var(--ease); }
.gtile:hover .gtile-tools, .gtile:focus-within .gtile-tools { opacity: 1; transform: none; }
.gtile-tools button { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--bg-rgb), .75); backdrop-filter: blur(6px); }
.gtile-tools button:hover { background: var(--rose); }
.gtile-tools .ico { width: 16px; }
.gtile.is-uploading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(var(--ink), .08), transparent); animation: shimmer 1.2s infinite; }
.private-locked { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.locked-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px; filter: blur(2px); }
.locked-tiles span { aspect-ratio: 1; border-radius: 12px; background: linear-gradient(135deg, #3a2030, #1b1220); }
.locked-text { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 16px; background: rgba(var(--bg-rgb), .55); backdrop-filter: blur(14px); }
.locked-text > .ico { width: 30px; height: 30px; color: var(--gold); }

/* Groupes & lives */
.ggrid, .lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.gcard { padding: 0; overflow: hidden; transition: transform .4s var(--ease), border-color .3s; }
.gcard:hover { transform: translateY(-4px); border-color: rgba(255, 79, 138, .3); }
.gcard-cover { height: 110px; display: grid; place-items: center; background: radial-gradient(circle at 25% 20%, hsl(var(--h) 70% 45%), transparent 65%), linear-gradient(135deg, hsl(calc(var(--h) + 40) 50% 20%), #120b14); }
.gcard-cover span { font: italic 600 48px/1 var(--serif); color: rgba(255, 255, 255, .85); }
.gcard-body { padding: 16px 18px 18px; display: grid; gap: 6px; }
.gcard-body h3 { font-size: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gcard-body small { color: var(--muted); }
.group-hero { padding: 0; overflow: hidden; }
.group-hero .gcard-cover { height: 140px; }
.group-hero-body { padding: 20px 22px 22px; display: grid; gap: 10px; justify-items: start; }
.group-hero h1 { font-size: 34px; }
.group-hero a { color: var(--rose); }
.lcard { padding: 0; overflow: hidden; }
.lcard-screen { aspect-ratio: 16/10; position: relative; background: radial-gradient(circle, hsl(var(--h) 60% 35%), #0d090e); }
.live-pill { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 8px; background: #e11d48; font-size: 12px; font-weight: 700; letter-spacing: .06em; animation: blink 1.6s infinite; }
.lcard-body { display: flex; gap: 10px; align-items: center; padding: 14px; }
.lcard-body small { display: block; color: var(--muted); }
.live-empty { padding: 50px 20px; }
.live-orb { width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px; background: var(--grad); box-shadow: 0 0 0 0 rgba(255, 79, 138, .6); animation: pulseRing 2.2s infinite; }
.live-orb .ico { width: 38px; height: 38px; }

/* Messagerie */
.chat-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; height: calc(100vh - var(--topbar) - 56px); min-height: 480px; }
.conv-list { padding: 18px 10px; overflow-y: auto; }
.conv-list .card-title { padding: 0 10px; }
.conv-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.conv-list li, .conv { min-width: 0; }
.conv { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; transition: background .2s; }
.conv:hover { background: rgba(var(--ink), .04); }
.conv.is-active { background: rgba(255, 79, 138, .1); }
.conv-txt { min-width: 0; flex: 1; }
.conv-txt strong { display: block; font-size: 14.5px; }
.conv-txt small { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv.is-unread .conv-txt small { color: var(--text); font-weight: 600; }
.conv-side { display: grid; justify-items: end; gap: 4px; }
.conv-side small { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.thread { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.thread-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.thread-head .mini-user { flex: 1; }
.back-btn { display: none; }
.thread-body { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 4px; }
.msg { max-width: 72%; padding: 10px 15px; border-radius: 20px; font-size: 15px; word-wrap: break-word; white-space: pre-wrap; animation: msgIn .3s var(--ease); align-self: flex-start; background: var(--surface-3); border-bottom-left-radius: 6px; }
.msg.mine { align-self: flex-end; background: var(--grad); border-bottom-left-radius: 20px; border-bottom-right-radius: 6px; }
.msg + .msg:not(.mine), .mine + .mine { margin-top: 0; }
.msg:not(.mine) + .mine, .mine + .msg:not(.mine) { margin-top: 10px; }
.msg time { display: block; font-size: 11px; opacity: .6; margin-top: 3px; text-align: right; }
.msg-system { align-self: center; display: flex; align-items: center; gap: 8px; margin: 12px 0; padding: 8px 14px; border-radius: 999px; font-size: 13px; color: var(--gold); background: rgba(233, 189, 116, .08); border: 1px solid rgba(233, 189, 116, .2); }
.msg-day { align-self: center; font-size: 12px; color: var(--muted); margin: 14px 0 6px; text-transform: capitalize; }
.msg-seen { align-self: flex-end; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.thread-form { display: flex; gap: 10px; align-items: flex-end; padding: 14px 18px; border-top: 1px solid var(--line); }
.thread-form textarea { min-height: 46px; max-height: 160px; resize: none; border-radius: 22px; padding: 12px 18px; }
.thread-empty { margin: auto; text-align: center; padding: 30px; display: grid; justify-items: center; gap: 8px; }

/* États vides, chargement */
.empty { text-align: center; padding: 44px 24px; display: grid; justify-items: center; gap: 10px; }
.empty h3 { font: 400 24px/1.2 var(--serif); }
.empty p { color: var(--muted); max-width: 380px; margin-bottom: 6px; }
.empty-ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 79, 138, .1); color: var(--rose); margin-bottom: 6px; }
.empty-ico .ico { width: 28px; height: 28px; }
.loader { display: flex; justify-content: center; gap: 6px; padding: 20px; }
.loader i { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); animation: bounce 1s infinite ease-in-out; }
.loader i:nth-child(2) { animation-delay: .15s; }
.loader i:nth-child(3) { animation-delay: .3s; }

/* Visionneuse */
.lightbox { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: rgba(5, 3, 6, .94); animation: fadeIn .25s; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 10px; animation: modalIn .4s var(--ease); object-fit: contain; }
.lb-close { position: absolute; top: 16px; right: 16px; color: #fff; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; width: 48px; height: 48px; background: rgba(var(--ink), .06); }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }

/* Notifications */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 300; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { padding: 12px 20px; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 600; font-size: 14px; box-shadow: var(--shadow); animation: toastIn .4s var(--ease); }
.toast.error { background: var(--danger); color: #fff; }
.toast.is-out { animation: toastOut .3s forwards; }

/* Apparition au scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* =====================================================================
   ANIMATIONS
   ===================================================================== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.97); } }
@keyframes modalOut { to { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } }
@keyframes popIn { from { opacity: 0; transform: scale(.9); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes stepIn { from { opacity: 0; transform: translateX(30px); } }
@keyframes stepBack { from { opacity: 0; transform: translateX(-30px); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.95); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px); } }
@keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.2); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes drift { to { transform: translate(60px, 40px) scale(1.15); } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(255, 79, 138, .6); } 70% { box-shadow: 0 0 0 14px rgba(255, 79, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 79, 138, 0); } }
@keyframes blink { 50% { opacity: .55; } }
@keyframes bounce { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}


/* =====================================================================
   THÈME CLAIR (bouton soleil/lune en haut à droite ; sinon réglage du système)
   ===================================================================== */
:root[data-theme="light"] {
    --bg: #fbf6f8;
    --bg-2: #ffffff;
    --surface: rgba(255, 255, 255, .82);
    --surface-solid: #ffffff;
    --surface-2: #f5ecf0;
    --surface-3: #ecdfe6;
    --line: rgba(70, 15, 40, .09);
    --line-2: rgba(70, 15, 40, .17);
    --text: #22121b;
    --text-2: #4b3742;
    --muted: #7d6873;
    --ink: 70, 15, 40;
    --ink-2: 70, 15, 40;
    --bg-rgb: 251, 246, 248;
    --gold: #a8711d;
    --shadow: 0 18px 40px -22px rgba(90, 20, 50, .35);
    --glow: 0 10px 26px -10px rgba(224, 58, 118, .55);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
    --bg: #fbf6f8;
    --bg-2: #ffffff;
    --surface: rgba(255, 255, 255, .82);
    --surface-solid: #ffffff;
    --surface-2: #f5ecf0;
    --surface-3: #ecdfe6;
    --line: rgba(70, 15, 40, .09);
    --line-2: rgba(70, 15, 40, .17);
    --text: #22121b;
    --text-2: #4b3742;
    --muted: #7d6873;
    --ink: 70, 15, 40;
    --ink-2: 70, 15, 40;
    --bg-rgb: 251, 246, 248;
    --gold: #a8711d;
    --shadow: 0 18px 40px -22px rgba(90, 20, 50, .35);
    --glow: 0 10px 26px -10px rgba(224, 58, 118, .55);
    }
}
:root[data-theme="light"] .ambient {
    background: radial-gradient(600px 400px at 10% -5%, rgba(255, 79, 138, .14), transparent 70%), radial-gradient(700px 500px at 90% 100%, rgba(233, 189, 116, .14), transparent 70%), var(--bg);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .ambient { background: radial-gradient(600px 400px at 10% -5%, rgba(255, 79, 138, .14), transparent 70%), radial-gradient(700px 500px at 90% 100%, rgba(233, 189, 116, .14), transparent 70%), var(--bg); }
}

/* Logo : blanc sur fond sombre, rose sur fond clair */
.logo-light { display: none !important; }
:root[data-theme="light"] .logo-dark { display: none !important; }
:root[data-theme="light"] .logo-light { display: block !important; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .logo-dark { display: none !important; }
    :root:not([data-theme="dark"]) .logo-light { display: block !important; }
}
.logo-light { filter: none; }

/* Bouton thème */
.theme-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); border: 1px solid var(--line); transition: background .2s, transform .4s var(--ease); flex: none; }
.theme-btn:hover { background: rgba(var(--ink), .06); }
.theme-btn:active { transform: rotate(40deg) scale(.92); }
.theme-btn .ico-sun { display: none; }
:root[data-theme="light"] .theme-btn .ico-sun { display: block; }
:root[data-theme="light"] .theme-btn .ico-moon { display: none; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .theme-btn .ico-sun { display: block; }
    :root:not([data-theme="dark"]) .theme-btn .ico-moon { display: none; }
}
.bell-btn { position: relative; }
.bell-btn .badge { position: absolute; top: -4px; right: -4px; }
.bell-btn.ring .ico { animation: ring .8s var(--ease); }
@keyframes ring { 0%,100% { transform: rotate(0); } 20% { transform: rotate(18deg); } 40% { transform: rotate(-14deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
.notif-pop { width: min(360px, calc(100vw - 24px)); padding: 10px; max-height: 70vh; overflow-y: auto; }
.notif-pop h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding: 6px 8px 10px; }
.notif-item { display: flex !important; align-items: center; gap: 12px; padding: 10px !important; border-radius: 12px; }
.notif-item.is-unread { background: rgba(255, 79, 138, .08); }
.notif-item span { font-size: 14px; line-height: 1.35; }
.notif-item small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.notif-empty { padding: 18px 8px; color: var(--muted); font-size: 14px; text-align: center; }
.toast.toast-rich { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 18px; background: var(--surface-solid); color: var(--text); border: 1px solid var(--line-2); pointer-events: auto; cursor: pointer; max-width: min(420px, calc(100vw - 24px)); text-align: left; }
.toast.toast-rich small { display: block; color: var(--muted); font-weight: 500; }
.top-actions { display: flex; align-items: center; gap: 8px; }

/* Les menus ne passent plus derrière les blocs suivants */
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .35s, color .35s, border-color .35s !important; }
.is-menu-open { position: relative; z-index: 30; overflow: visible !important; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px) {
    .tab span { display: none; }
    .tab { padding: 0 12px; }
    .tab .badge { position: absolute; top: 3px; left: 26px; margin: 0; }
    .tab.is-active::after { left: 10px; right: 10px; }
}
@media (max-width: 980px) {
    .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 30px; }
    .hero-visual { height: 330px; }
    .layout-feed { grid-template-columns: minmax(0, 640px); }
    .side-col { display: none; }
    .profile-grid { grid-template-columns: 1fr; }
    .profile-side { position: static; }
}
@media (max-width: 760px) {
    :root { --topbar: 58px; }
    .logo-img, .topbar .logo-img { height: 26px; }
    .tabs, .me-menu .me-name { display: none; }
    .topbar { justify-content: space-between; }
    .bottombar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        display: flex; justify-content: space-around;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        background: rgba(var(--bg-rgb), .9); backdrop-filter: blur(20px); border-top: 1px solid var(--line);
    }
    .bottombar a { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 10px; font-size: 11px; font-weight: 600; color: var(--muted); }
    .bottombar a.is-active { color: var(--text); }
    .bottombar a.is-active .ico { color: var(--rose); }
    .bottombar .ico { width: 22px; height: 22px; }
    .bottombar .badge { position: absolute; top: 0; right: 4px; }
    .main { padding-bottom: 110px; }
    .steps, .features { grid-template-columns: 1fr; }
    .section { padding: 60px 16px; }
    .hero-visual { display: none; }
    .guest-actions .btn-ghost { display: none; }
    .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .pcard-letter { font-size: 64px; }
    .profile-id { padding: 0 18px; margin-top: -52px; gap: 14px; }
    .profile-names { margin-top: 0; flex-basis: 100%; }
    .cover-edit span { display: none; }
    .avatar-xl { width: 104px; height: 104px; }
    .profile-stats { margin: 18px 18px 0; gap: 24px; }
    .profile-actions { padding: 16px 18px 20px; }
    .profile-actions { display: grid; grid-template-columns: 1fr 1fr auto auto; }
    .profile-actions .btn { padding: 0 10px; min-width: 0; }
    .profile-actions .btn-icon { padding: 0; flex: none; }
    .chat-layout { grid-template-columns: 1fr; height: calc(100vh - var(--topbar) - 130px); }
    .chat-layout.has-thread .conv-list { display: none; }
    .chat-layout:not(.has-thread) .thread { display: none; }
    .back-btn { display: inline-grid; }
    .thread-head .btn span { display: none; }
    .thread-head .btn { width: 40px; padding: 0; }
    .msg { max-width: 85%; }
    .modal { padding: 0; place-items: end center; }
    .modal-card { border-radius: 26px 26px 0 0; max-height: 92vh; animation-name: sheetIn; }
    .gtile-tools { opacity: 1; transform: none; }
    .post-body, .post-head { padding-left: 14px; }
}
@keyframes sheetIn { from { transform: translateY(100%); } }

/* Messagerie : statut Lu / Envoyé, "en train d'écrire" */
.msg-status { opacity: .85; }
.msg-status.is-read { font-weight: 700; opacity: 1; }
.msg:not(.mine) .msg-status { display: none; }
.typing { align-self: flex-start; display: flex; align-items: center; gap: 10px; margin-top: 8px; animation: msgIn .3s var(--ease); }
.typing small { color: var(--muted); font-size: 12.5px; }
.typing-dots { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 20px; border-bottom-left-radius: 6px; background: var(--surface-3); }
.typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: bounce 1.2s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
.thread-locked { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }

/* Profil : stats cliquables, À propos pleine largeur, réglages */
.profile-stats button { text-align: left; padding: 4px 8px; margin: -4px -8px; border-radius: 12px; transition: background .2s; }
.profile-stats button:hover { background: rgba(var(--ink), .05); }
.profile-about { padding: 22px 28px; }
.rel-list { max-height: 60vh; overflow-y: auto; }
.rel-private { text-align: center; padding: 26px 10px; }
.rel-private small { color: var(--muted); }
.btn.is-disabled { opacity: .45; cursor: not-allowed; }
.settings-block { display: grid; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.settings-block .switch { margin-top: 10px; }
.settings-block .switch span { line-height: 1.4; }
.danger-txt { color: var(--danger) !important; }

/* Albums */
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.acard { display: grid; gap: 10px; text-align: left; border-radius: var(--radius); padding: 8px 8px 12px; background: var(--surface); border: 1px solid var(--line); transition: transform .35s var(--ease), border-color .25s; animation: cardIn .5s var(--ease) both; }
.acard:hover { transform: translateY(-3px); border-color: rgba(255, 79, 138, .35); }
.acard-cover { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.acard-cover img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.acard-lock, .acard-empty { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); }
.acard-lock { background: radial-gradient(circle at 30% 20%, rgba(255, 79, 138, .25), transparent 60%), linear-gradient(135deg, var(--surface-3), var(--surface-2)); color: var(--gold); }
.acard-lock .ico { width: 38px; height: 38px; }
.acard-empty .ico { width: 30px; height: 30px; }
.acard-new { border-style: dashed; border-color: var(--line-2); }
.acard-new .acard-empty { color: var(--rose); }
.acard-pill { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: rgba(var(--bg-rgb), .75); color: var(--text); backdrop-filter: blur(8px); }
.acard-pill .ico { width: 12px; height: 12px; }
.acard-pill.inline { position: static; vertical-align: middle; font-family: var(--font); margin-left: 8px; background: rgba(var(--ink), .07); }
.acard-timer { position: absolute; bottom: 8px; left: 8px; right: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px; border-radius: 10px; font-size: 12px; background: var(--grad-gold); color: #2a1a0a; font-weight: 600; }
.acard-timer .ico { width: 14px; height: 14px; }
.acard-info { display: grid; padding: 0 4px; }
.acard-info strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard-info small { color: var(--muted); font-size: 12.5px; }
.album-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.album-grid .album-empty { grid-column: 1 / -1; text-align: center; padding: 30px 0; }
.album-timer { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; margin-bottom: 14px; background: rgba(233, 189, 116, .1); color: var(--gold); font-size: 14px; }
.album-private img { -webkit-user-drag: none; user-select: none; }

/* Choix des albums à ouvrir */
.grant-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.grant-item input { position: absolute; opacity: 0; pointer-events: none; }
.grant-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; border: 1px solid var(--line-2); cursor: pointer; transition: all .2s var(--ease); }
.grant-card:hover { border-color: rgba(255, 79, 138, .4); }
.grant-cover { flex: none; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.grant-cover img { width: 100%; height: 100%; object-fit: cover; }
.grant-txt { min-width: 0; display: grid; }
.grant-txt strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grant-txt small { color: var(--muted); font-size: 12px; }
.grant-txt b { color: var(--gold); font-weight: 600; }
.grant-check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; color: #fff; background: var(--grad); opacity: 0; transform: scale(.6); transition: all .2s var(--ease); }
.grant-item input:checked + .grant-card { border-color: var(--rose); background: rgba(255, 79, 138, .08); }
.grant-item input:checked + .grant-card .grant-check { opacity: 1; transform: none; }

/* Conseils de configuration du profil (accueil) */
.onboard { position: relative; }
.onboard h2 { font-size: 26px; margin-bottom: 6px; padding-right: 40px; }
.onboard-close { position: absolute; top: 12px; right: 12px; }
.onboard-bar { position: relative; height: 8px; border-radius: 8px; background: var(--line); margin: 16px 0 14px; }
.onboard-bar i { display: block; height: 100%; border-radius: 8px; background: var(--grad); transition: width .8s var(--ease); }
.onboard-bar span { position: absolute; right: 0; top: -22px; font-size: 12px; font-weight: 700; color: var(--muted); }
.onboard-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.onboard-list a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px; transition: background .2s; }
.onboard-list a:hover { background: rgba(var(--ink), .05); }
.onboard-list strong { display: block; font-size: 14.5px; }
.onboard-list small { color: var(--muted); font-size: 13px; }
.onboard-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 79, 138, .12); color: var(--rose); }
.onboard-ico .ico { width: 18px; height: 18px; }
.onboard-go { margin-left: auto; color: var(--muted); }
.onboard-list .is-done { opacity: .55; }
.onboard-list .is-done .onboard-ico { background: rgba(61, 220, 132, .15); color: var(--green); }
.onboard-list .is-done strong { text-decoration: line-through; }
.online-switch { margin: 0 0 4px; padding: 12px 14px; border-radius: 14px; background: rgba(61, 220, 132, .07); border: 1px solid rgba(61, 220, 132, .2); }
.online-switch .dot-online { box-shadow: none; margin-right: 4px; }

/* Disponibilités */
.dispo-list { display: grid; gap: 10px; }
.dispo { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: rgba(var(--ink), .03); border: 1px solid var(--line); }
.dispo-days { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dispo-days > .ico { width: 16px; height: 16px; color: var(--rose); }
.dday { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(255, 79, 138, .12); color: var(--rose); }
.dday.is-today { background: var(--grad); color: #fff; }
.dispo-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.dslot { padding: 5px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; background: rgba(233, 189, 116, .12); color: var(--gold); }
.dslot small { font-weight: 500; opacity: .8; }
.dispo-note { font-size: 14px; color: var(--text-2); }
.dispo-tools { display: flex; gap: 6px; }
.dispo-author { margin-bottom: 2px; }
.dispo-feed .dispo { background: var(--surface); }
.dispo-feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.card-head .card-title { margin: 0; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.slot input { position: absolute; opacity: 0; }
.slot span { display: grid; gap: 2px; text-align: center; padding: 12px 8px; border-radius: 14px; border: 1px solid var(--line-2); cursor: pointer; transition: all .2s var(--ease); }
.slot small { color: var(--muted); font-size: 12px; }
.slot input:checked + span { border-color: var(--rose); background: rgba(255, 79, 138, .1); box-shadow: inset 0 0 0 1px var(--rose); }
.day-chips small { opacity: .75; font-weight: 500; }

/* Vidéos : vignette (1re seconde) + bouton lecture, ouvertes dans la visionneuse */
.media-tile.is-video { position: relative; background: #000; }
.media-tile.is-video video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.play-badge { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(13, 9, 14, .55); backdrop-filter: blur(6px); border: 2px solid rgba(255, 255, 255, .85); transition: transform .25s var(--ease); }
.play-badge::after { content: ''; position: absolute; left: 21px; top: 15px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff; }
.media-tile.is-video:hover .play-badge { transform: scale(1.1); }
.lightbox video { max-width: 92vw; max-height: 88vh; border-radius: 10px; background: #000; animation: modalIn .4s var(--ease); }
.lightbox img { user-select: none; -webkit-user-drag: none; }
.album-access { margin-bottom: 16px; padding: 14px; border-radius: 14px; background: rgba(233, 189, 116, .07); border: 1px solid rgba(233, 189, 116, .2); }
.album-access h4 { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 10px; color: var(--gold); }
.album-access .ico { width: 15px; height: 15px; }

/* Protection : flouté dès que la fenêtre perd le focus (outil de capture, changement d'appli…) */
/* Flou INSTANTANÉ (aucune transition) sur toutes les photos et vidéos — sauf les petites photos de profil */
body.privacy-blur img:not(.avatar):not(.logo-img), body.privacy-blur video, body.privacy-blur .eph-viewer .eph-stage,
body.privacy-blur .gcover, body.privacy-blur .profile-cover { filter: blur(32px) brightness(.5) !important; transition: none !important; animation: none !important; }
body[data-blur="1"] img:not(.avatar), body[data-blur="1"] video { will-change: filter; } /* prêt à flouter sans délai */
/* Raccourci de capture détecté : TOUTES les photos / vidéos du site sont masquées 3 secondes */
body.capture-guard img:not(.avatar):not(.logo img), body.capture-guard video { filter: blur(40px) brightness(.25) !important; }
body.capture-guard::before { content: '📵 Capture d\0027écran interdite'; position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: rgba(5, 3, 6, .82); color: #fff; font: 700 20px/1.3 Manrope, sans-serif; pointer-events: none; }
/* Filigrane (pseudo du visiteur + date) incrusté sur la visionneuse, les albums, les éphémères et les lives */
body.has-wm .lightbox::after, body.has-wm .eph-viewer::after, body.has-wm .live-video::after, body.has-wm #album-view .album-grid::after {
    content: ''; position: absolute; inset: 0; background-image: var(--wm); background-repeat: repeat; pointer-events: none; z-index: 5; }
body.has-wm #album-view .album-grid, body.has-wm .live-video { position: relative; }
/* Pas d'appui long « enregistrer l'image » sur mobile, pas de sélection */
img, video { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Impression : aucune photo ni vidéo */
@media print { img, video, .lightbox, .eph-viewer { visibility: hidden !important; } body::after { content: 'Impression des contenus désactivée sur AméLib.'; visibility: visible; } }

/* Tchat : médias, éphémères */
.msg.has-media { padding: 6px; }
.msg.has-media .msg-text { display: block; padding: 6px 9px 0; }
.msg.has-media time { padding: 0 9px 3px; }
.msg-media .media-tile { display: block; width: min(260px, 60vw); aspect-ratio: 4/5; border-radius: 14px; overflow: hidden; }
.msg-media .media-tile img { width: 100%; height: 100%; object-fit: cover; }
.eph-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--ink), .08); text-align: left; font-size: 14px; color: inherit; }
.eph-card strong { display: block; }
.eph-card small { opacity: .8; }
.eph-card .ico { width: 22px; height: 22px; flex: none; }
button.eph-card { cursor: pointer; border: 1px dashed currentColor; }
.eph-card.is-gone { opacity: .6; font-style: italic; }
.eph-tag { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 6px 4px 0; opacity: .9; }
.eph-tag .ico { width: 14px; height: 14px; }
.eph-viewer { position: fixed; inset: 0; z-index: 400; background: #000; display: grid; place-items: center; animation: fadeIn .2s; user-select: none; }
.eph-stage img, .eph-stage video { max-width: 100vw; max-height: 100vh; object-fit: contain; -webkit-user-drag: none; pointer-events: none; }
.eph-top { position: absolute; top: 14px; right: 14px; left: 14px; display: flex; justify-content: space-between; align-items: center; color: #fff; }
.eph-top .icon-btn { color: #fff; font-size: 18px; }
.eph-count { font: 700 18px var(--font); padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .15); }
.eph-mark { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .35); font-size: 13px; pointer-events: none; }
.attach-bar { display: flex; align-items: center; gap: 12px; padding: 10px 18px 0; flex-wrap: wrap; }
.attach-preview img, .attach-preview video { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; }
.attach-opts { display: grid; gap: 6px; flex: 1; min-width: 200px; }
.attach-btn { flex: none; cursor: pointer; color: var(--gold); }
.thread-locked .btn { margin-left: auto; }
.msg.mine, .msg.mine time { color: #fff; }
.msg.mine .msg-status { color: #fff; }

/* Bannière personnalisable */
.profile-cover { position: relative; overflow: hidden; }
.profile-cover.has-color { background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .22), transparent 55%), linear-gradient(135deg, var(--cover), color-mix(in srgb, var(--cover) 55%, #000)); }
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.cover-edit { position: absolute; right: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(13, 9, 14, .55); color: #fff; font-size: 13px; font-weight: 600; backdrop-filter: blur(8px); transition: background .2s; }
.cover-edit:hover { background: rgba(13, 9, 14, .8); }
.cover-edit .ico { width: 16px; height: 16px; }
.cover-frame { position: relative; height: 170px; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #2a1420, #120b14); touch-action: none; }
.cover-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: grab; user-select: none; }
.cover-frame.is-dragging img { cursor: grabbing; }
.cover-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; pointer-events: none; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 40px; height: 40px; border-radius: 50%; background: var(--c); border: 3px solid transparent; box-shadow: 0 0 0 1px var(--line-2); transition: transform .2s var(--ease); cursor: pointer; display: grid; place-items: center; position: relative; }
.swatch:hover { transform: scale(1.08); }
.swatch.is-on { border-color: var(--surface-solid); box-shadow: 0 0 0 2px var(--rose); }
.swatch-custom { background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); color: #fff; }
.swatch-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cover-photo-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.zoom-range { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; color: var(--muted); font-size: 13px; }
.zoom-range input { flex: 1; accent-color: var(--rose); }

/* Paramètres */
.settings { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; }
.settings .page-head { margin-bottom: 0; }
.settings-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 600; color: var(--text-2); transition: background .2s; }
.settings-nav a:hover { background: rgba(var(--ink), .05); }
.settings-nav .ico { width: 16px; height: 16px; }
.set-card { display: grid; gap: 16px; scroll-margin-top: calc(var(--topbar) + 16px); }
.set-card h2 { font-size: 24px; }
.set-form { padding-top: 16px; border-top: 1px solid var(--line); justify-items: start; }
.set-form .field, .set-form .field-row { width: 100%; }
.set-row { margin: 0; }
.set-row span small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.desktop-notif { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.desktop-notif strong { display: block; font-size: 14px; font-weight: 500; }
.danger-zone { border-color: rgba(255, 100, 100, .3); }
.set-card > .btn { justify-self: start; }
.post-dispo { padding: 12px 18px 0; display: grid; gap: 10px; }
.post-dispo-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--rose); font-size: 14.5px; }
.post-dispo-title .ico { width: 18px; height: 18px; }
.post-dispo .dispo { background: rgba(255, 79, 138, .05); border-color: rgba(255, 79, 138, .2); }
.tag.is-match { border-color: var(--rose); color: var(--text); background: rgba(255, 79, 138, .16); font-weight: 600; }

/* Profil v4 : activité à côté du pseudo, chiffres + boutons à droite, description et recherche en pleine largeur */
.profile-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px 28px; flex-wrap: wrap; padding-right: 28px; }
.profile-top .profile-id { flex: 1 1 380px; min-width: 0; }
.profile-right { margin-top: 18px; display: grid; gap: 14px; justify-items: end; }
.profile-right .profile-stats { margin: 0; padding: 0; border: 0; gap: 28px; }
.profile-right .profile-actions { padding: 0; justify-content: flex-end; }
.profile-activity { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; vertical-align: middle; font: 500 13.5px var(--font); letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.profile-activity .dot-online { box-shadow: none; width: 9px; height: 9px; }
.profile-names h1 .profile-activity:has(.dot-online) { color: var(--green); font-weight: 600; }
.profile-section { margin: 22px 28px 0; padding-top: 18px; border-top: 1px solid var(--line); }
.profile-prefs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; padding-bottom: 24px; }
.profile-prefs .card-title { margin-top: 0; }
.member-since { grid-column: 1 / -1; margin-top: 10px; }
.recent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.recent-grid .media-tile { aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
.recent-grid .media-tile img, .recent-grid .media-tile video { width: 100%; height: 100%; object-fit: cover; }
.recent-more { aspect-ratio: 1; border-radius: 12px; display: grid; place-content: center; justify-items: center; gap: 4px; background: rgba(255, 79, 138, .1); color: var(--rose); font-weight: 700; font-size: 14px; transition: background .2s; }
.recent-more:hover { background: rgba(255, 79, 138, .18); }
.recent-more .ico { width: 22px; height: 22px; }
.album-grid .media-tile { aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
.album-grid .media-tile img { width: 100%; height: 100%; object-fit: cover; }
.tab-panel .gallery-title + .album-grid { margin-bottom: 8px; }
@media (max-width: 760px) {
    .profile-top { padding-right: 0; }
    .profile-right { width: 100%; justify-items: stretch; padding: 0 18px; margin-top: 4px; }
    .profile-section { margin: 18px 18px 0; }
    .profile-prefs { grid-template-columns: 1fr; }
    .profile-activity { display: flex; margin: 6px 0 0; }
}

/* Tchat : actions sur les messages */
.msg.mine[data-actions], .msg[data-edited] { cursor: pointer; }
.msg.is-deleted { font-style: italic; opacity: .6; background: transparent !important; border: 1px dashed var(--line-2); color: var(--muted) !important; }
.msg.is-deleted time { color: var(--muted) !important; }
.msg-edited { font-style: italic; }
.msg-pop { position: fixed; z-index: 120; min-width: 190px; max-width: min(340px, calc(100vw - 16px)); max-height: 60vh; overflow-y: auto; padding: 6px; border-radius: 14px; background: var(--surface-solid); border: 1px solid var(--line-2); box-shadow: var(--shadow); animation: popIn .18s var(--ease); }
.msg-pop button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.msg-pop button:hover { background: rgba(var(--ink), .06); }
.msg-pop .danger { color: var(--danger); }
.msg-pop h5 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 6px 8px; }
.msg-pop .hist { padding: 8px; border-radius: 10px; }
.msg-pop .hist small { color: var(--muted); font-size: 11.5px; }
.msg-pop .hist p { font-size: 14px; white-space: pre-wrap; text-decoration: line-through; opacity: .75; }
.msg-pop .hist.is-now p { text-decoration: none; opacity: 1; }
.msg-pop .hist.is-now { background: rgba(255, 79, 138, .08); }
.edit-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 18px; font-size: 13.5px; font-weight: 600; color: var(--rose); border-top: 1px solid var(--line); background: rgba(255, 79, 138, .06); }
.eph-card.is-sent { border: 1px solid rgba(var(--ink), .2); background: rgba(var(--ink), .1); }
.eph-card.is-sent b { font-weight: 800; }
.msg-pop h5 { margin: 0; } .msg-pop .hist p { margin: 2px 0 0; }

/* Profil v5 */
.profile-prefs { padding-bottom: 0; }
.profile-section-foot { margin: 14px 28px 24px; }
.modal-xl { max-width: 960px; }
.modal-xl .modal-body { display: grid; gap: 14px; }
.modal-xl .gallery-title { margin-top: 6px; }
.modal-xl .gallery-title small { color: var(--muted); font-weight: 600; letter-spacing: 0; }
.mtile { position: relative; margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 1; }
.mtile .media-tile { width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto; }
.mtile .media-tile img, .mtile .media-tile video { width: 100%; height: 100%; object-fit: cover; }
.tile-del { position: absolute; top: 6px; right: 6px; z-index: 2; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(13, 9, 14, .7); color: #fff; backdrop-filter: blur(6px); opacity: .9; transition: background .2s, transform .2s; }
.tile-del:hover { background: var(--danger); transform: scale(1.06); }
.tile-del .ico { width: 16px; height: 16px; }
.recent-grid .mtile { aspect-ratio: 1; }
.recent-more-wide { width: 100%; aspect-ratio: auto; padding: 18px; display: flex; gap: 10px; }
.add-choices { display: grid; gap: 8px; }
.add-choice { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; border: 1px solid var(--line-2); text-align: left; transition: all .2s var(--ease); }
.add-choice:hover { border-color: var(--rose); background: rgba(255, 79, 138, .06); }
.add-choice strong { display: block; font-size: 14.5px; }
.add-choice small { color: var(--muted); font-size: 12.5px; }
.add-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 79, 138, .12); color: var(--rose); }
.add-ico .ico { width: 20px; height: 20px; }
.add-choices .gallery-title { margin: 10px 0 0; }
@media (max-width: 760px) { .profile-section-foot { margin: 12px 18px 20px; } }

/* Profil v6 : À propos + Recherche + Envies dans un seul bloc, sous le profil */
.profile-hero { padding-bottom: 24px; }
.profile-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.profile-info { padding: 6px 28px 24px; }
.profile-info .profile-section { margin: 0; padding-top: 18px; }
.profile-info .profile-about-sec { border-top: 0; }
.profile-info .profile-prefs { margin-top: 18px; }
@media (max-width: 760px) { .profile-info { padding: 4px 18px 20px; } .profile-hero { padding-bottom: 18px; } }

/* Fenêtres de confirmation du site */
.ui-dialog { z-index: 500; place-items: center !important; padding: 16px !important; }
.ui-dialog .modal-card { max-width: 400px; border-radius: 24px !important; animation-name: modalIn !important; }
.ui-dialog .modal-body { padding: 26px 24px 22px; display: grid; justify-items: center; text-align: center; gap: 10px; }
.dlg-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font: 700 24px var(--serif); color: var(--rose); background: rgba(255, 79, 138, .12); margin-bottom: 4px; }
.dlg-ico.is-danger { color: var(--danger); background: rgba(255, 100, 100, .12); }
.dlg-title { font: 400 22px/1.25 var(--serif); }
.dlg-msg { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.dlg-input { width: 100%; min-height: 84px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(var(--ink), .035); resize: vertical; outline: none; text-align: left; }
.dlg-input:focus { border-color: rgba(255, 79, 138, .6); box-shadow: 0 0 0 4px rgba(255, 79, 138, .12); }
.dlg-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 10px; }
.btn-danger { background: linear-gradient(135deg, #ff7070, #d63a3a); color: #fff; box-shadow: 0 10px 26px -10px rgba(214, 58, 58, .7); }
.btn-danger:hover { transform: translateY(-1px); }
.forgot-link { justify-self: end; margin-top: -8px; font-size: 13.5px; font-weight: 600; color: var(--rose); }
.forgot-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-ok { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 79, 138, .12); color: var(--rose); margin-bottom: 16px; }
.auth-ok .ico { width: 26px; height: 26px; }
.dev-note { display: grid; gap: 6px; margin-top: 18px; padding: 14px 16px; border-radius: 14px; font-size: 13.5px; background: rgba(233, 189, 116, .1); border: 1px dashed rgba(233, 189, 116, .5); }
.dev-note a { color: var(--rose); font-weight: 700; }
.dev-note small { color: var(--muted); }

/* Profil v7 : un seul bloc, séparé par une barre */
.profile-hero { padding-bottom: 0; }
.profile-info { margin: 22px 28px 0; padding: 4px 0 24px; border-top: 1px solid var(--line-2); }
@media (max-width: 760px) { .profile-info { margin: 18px 18px 0; padding: 2px 0 20px; } }

/* Activité : vues */
.pcard-note { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--rose); }
.pcard-note .ico { width: 14px; height: 14px; }
.pcard-new { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 11.5px; font-weight: 700; box-shadow: var(--glow); }
.pcard.is-new { box-shadow: 0 0 0 2px var(--rose); }
.badge.pop { animation: pop .5s var(--ease); }
.sound-unlock { position: fixed; left: 50%; top: calc(var(--topbar) + 12px); transform: translateX(-50%); z-index: 310; display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--grad); color: #fff; font-weight: 700; font-size: 14px; box-shadow: var(--glow); animation: toastIn .4s var(--ease); }

/* Cartes profil : texte toujours blanc sur dégradé sombre (lisible en clair comme en sombre) */
.pcard-media::after { background: linear-gradient(to top, rgba(13, 9, 14, .92) 0%, rgba(13, 9, 14, .35) 42%, transparent 68%) !important; }
.pcard-info strong { color: #fff; }
.pcard-meta { color: #eadbe2 !important; }
.pcard-meta .tbadge { color: #fff; }
.pcard-city { color: rgba(255, 255, 255, .72) !important; }
.pcard-note { color: #ff8db2 !important; }
.pcard-letter { padding-bottom: 32%; }

/* Signalement */
.report-dialog .modal-card { max-width: 480px; }
.report-form { justify-items: stretch !important; text-align: left !important; }
.report-form .dlg-ico, .report-form .dlg-title { justify-self: center; text-align: center; }
.report-reasons { display: grid; gap: 6px; max-height: 46vh; overflow-y: auto; }
.report-reason input { position: absolute; opacity: 0; }
.report-reason span { display: block; padding: 11px 14px 11px 40px; border-radius: 12px; border: 1px solid var(--line-2); font-size: 14px; cursor: pointer; position: relative; transition: all .15s; }
.report-reason span::before { content: ''; position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 2px solid var(--line-2); }
.report-reason input:checked + span { border-color: var(--danger); background: rgba(255, 100, 100, .08); }
.report-reason input:checked + span::before { border-color: var(--danger); background: radial-gradient(circle, var(--danger) 45%, transparent 50%); }
.report-note { font-size: 12.5px; color: var(--muted); text-align: center; }
.lb-report { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 13px; font-weight: 600; }
.lb-report:hover { background: rgba(255, 100, 100, .5); }
.lb-report .ico { width: 16px; height: 16px; }
.eph-report { color: #fff; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); margin-right: 8px; }
/* Équipe / admin */
.pill-staff { background: rgba(61, 140, 255, .15); color: #4d8dff; font-size: 10.5px; vertical-align: middle; }
.avatar-staff { display: inline-grid; place-items: center; background: linear-gradient(135deg, #4d8dff, #2b4ea8); color: #fff; }
.avatar-staff .ico { width: 22px; height: 22px; }
.admin-bar { position: sticky; top: var(--topbar); z-index: 55; display: flex; justify-content: center; gap: 12px; align-items: center; padding: 8px 16px; background: #c2410c; color: #fff; font-size: 13.5px; font-weight: 600; }
.admin-bar a { text-decoration: underline; }
.gate { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 26px; padding: 24px; text-align: center; }
.gate .logo-img { height: 40px; }
.gate-card { max-width: 480px; padding: 36px 30px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; justify-items: center; gap: 12px; }
.gate-card h1 { font-size: 32px; }
.gate-card p { color: var(--muted); }
.gate-ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 79, 138, .12); color: var(--rose); }
.gate-ico .ico { width: 28px; height: 28px; }
.gate-admin { font-size: 12.5px; color: var(--muted); }
.warning-card .dlg-ico { color: #c2410c; background: rgba(194, 65, 12, .12); }
.warning-text { padding: 14px; border-radius: 14px; background: rgba(194, 65, 12, .07); border: 1px solid rgba(194, 65, 12, .25); white-space: pre-wrap; text-align: left; width: 100%; font-size: 14.5px; }
.warning-card .dlg-actions { justify-content: center; }
.warning-card .dlg-actions .btn { min-width: 200px; }
.thread-body[data-staff] .msg:not(.mine) { background: rgba(61, 140, 255, .14); border: 1px solid rgba(61, 140, 255, .25); }
.menu-admin { color: #4d8dff !important; }
.gate-reason { width: 100%; padding: 14px 16px; border-radius: 14px; background: rgba(255, 100, 100, .08); border: 1px solid rgba(255, 100, 100, .25); text-align: left; font-size: 14.5px; white-space: pre-wrap; }
.gate-reason small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.gate-count { display: grid; gap: 10px; justify-items: center; width: 100%; }
.gate-count small { color: var(--muted); font-size: 12.5px; }
.gate-timer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.gate-timer span { display: grid; gap: 2px; padding: 12px 4px; border-radius: 14px; background: rgba(var(--ink), .05); border: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.gate-timer b { font: 600 30px/1 var(--serif); color: var(--text); font-variant-numeric: tabular-nums; }
.gate-ban .gate-ico, .gate-ip .gate-ico { background: rgba(255, 100, 100, .12); color: var(--danger); }
.gate-card .btn { margin-top: 4px; }

/* Groupes : photo + visibilité */
.gcard-cover { position: relative; overflow: hidden; }
.gcard-cover.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.gcard-lock { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; }
.gcard-lock .ico { width: 15px; height: 15px; }
.group-hero .gcard-cover { height: 200px; }
.gcard-vis { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12.5px; }
.gcard-vis .ico, .group-hero-body .muted .ico { width: 14px; height: 14px; vertical-align: -2px; }
.group-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.group-invited { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; color: var(--rose); font-size: 14px; width: 100%; }
.group-invited .ico { width: 16px; height: 16px; }
.group-photo-pick { display: grid; place-items: center; height: 150px; border-radius: 16px; border: 1px dashed var(--line-2); background: rgba(var(--ink), .03); cursor: pointer; overflow: hidden; color: var(--muted); font-weight: 600; font-size: 14px; }
.group-photo-pick span { display: flex; gap: 8px; align-items: center; }
.group-photo-pick img { width: 100%; height: 100%; object-fit: cover; }
.group-photo-pick:hover { border-color: var(--rose); color: var(--rose); }
.vis-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vis-choice input { position: absolute; opacity: 0; }
.vis-choice span { display: grid; gap: 4px; padding: 14px; border-radius: 14px; border: 1px solid var(--line-2); cursor: pointer; height: 100%; transition: all .15s; }
.vis-choice span .ico { width: 20px; height: 20px; color: var(--muted); }
.vis-choice small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.vis-choice input:checked + span { border-color: var(--rose); background: rgba(255, 79, 138, .08); }
.vis-choice input:checked + span .ico { color: var(--rose); }
.group-admin { display: grid; gap: 12px; }
.group-invite-form { display: flex; gap: 8px; }
.group-invite-form input { flex: 1; min-width: 0; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(var(--ink), .03); color: var(--text); font: inherit; font-size: 14px; }
.group-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.group-people li { display: flex; align-items: center; gap: 6px; }
.group-people li > a { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; font-weight: 600; font-size: 14px; padding: 4px 0; }
.group-people li > a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-people .icon-btn { width: 32px; height: 32px; }
.group-people .icon-btn.is-ok { color: var(--green); }
.check-line { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.a-danger { color: var(--danger) !important; }
.pill-rose { background: rgba(255, 79, 138, .15); color: var(--rose); }
@media (max-width: 560px) { .vis-choice { grid-template-columns: 1fr; } }
.sound-btn .ico-off { display: none; }
.sound-btn.is-off .ico-on { display: none; }
.sound-btn.is-off .ico-off { display: block; }
.sound-btn.is-off { color: var(--muted); }
.gate-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Service client */
.ticket-list { display: grid; gap: 10px; }
.ticket-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; transition: transform .15s; }
.ticket-row:hover { transform: translateY(-1px); }
.ticket-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(61, 140, 255, .12); color: #4d8dff; flex: none; }
.ticket-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ticket-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-badge { position: static; }
.ticket-st { white-space: nowrap; }
.ticket-st-open { background: rgba(233, 189, 116, .15); color: #c58a1d; }
.ticket-st-answered { background: rgba(61, 140, 255, .15); color: #4d8dff; }
.ticket-st-closed { background: rgba(var(--ink), .07); color: var(--muted); }
.ticket-view { display: grid; gap: 16px; }
.ticket-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.ticket-head h2 { font-size: 24px; }
.ticket-msgs { display: grid; gap: 10px; max-height: 60vh; overflow-y: auto; padding: 4px; }
.ticket-msg { max-width: 80%; padding: 12px 16px; border-radius: 18px; display: grid; gap: 4px; background: rgba(var(--ink), .05); }
.ticket-msg small { font-size: 11.5px; color: var(--muted); }
.ticket-msg p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.ticket-msg.is-me { justify-self: end; background: rgba(255, 79, 138, .1); }
.ticket-msg.is-staff { justify-self: start; background: rgba(61, 140, 255, .12); border: 1px solid rgba(61, 140, 255, .22); }
.ticket-msg.is-staff b { color: #4d8dff; }
.ticket-reply { display: grid; gap: 10px; }
.ticket-reply textarea { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(var(--ink), .03); color: var(--text); font: inherit; resize: vertical; }
.ticket-reply-btns { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ticket-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ticket-cats input { position: absolute; opacity: 0; }
.ticket-cats span { display: block; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); font-size: 13.5px; cursor: pointer; height: 100%; }
.ticket-cats input:checked + span { border-color: var(--rose); background: rgba(255, 79, 138, .08); color: var(--rose); font-weight: 600; }
@media (max-width: 560px) { .ticket-cats { grid-template-columns: 1fr; } .ticket-msg { max-width: 92%; } }

/* =====================================================================
   Lecteur vidéo AméLib
   ===================================================================== */
.vp { position: relative; display: inline-block; max-width: 92vw; max-height: 88vh; border-radius: 14px; overflow: hidden; background: #000; line-height: 0; user-select: none; -webkit-user-select: none; animation: modalIn .4s var(--ease); --vp-accent: var(--rose); }
.vp[hidden] { display: none; }
.vp video { display: block; max-width: 92vw; max-height: 88vh; min-width: 360px; min-height: 200px; border-radius: 0 !important; animation: none !important; object-fit: contain; }
.vp.is-fs, .vp.is-fs video { max-width: none; max-height: none; width: 100vw; height: 100vh; border-radius: 0; }
.vp-surface { position: absolute; inset: 0; cursor: pointer; }
.vp:not(.show-ui):not(.is-paused) .vp-surface { cursor: none; }
.vp-big { position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; display: grid; place-items: center; color: #fff;
    background: var(--grad); box-shadow: 0 14px 40px -8px rgba(255, 79, 138, .7); opacity: 0; transform: scale(.8); pointer-events: none; transition: opacity .2s, transform .25s var(--ease); }
.vp-big svg { width: 34px; height: 34px; margin-left: 4px; }
.vp.is-paused .vp-big { opacity: 1; transform: none; pointer-events: auto; }
.vp-big:hover { transform: scale(1.06) !important; }
.vp-spinner { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: none; pointer-events: none; }
.vp-spinner i { display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .2); border-top-color: #fff; animation: spin .8s linear infinite; }
.vp.is-loading:not(.is-paused) .vp-spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.vp-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); line-height: normal; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.vp.show-ui .vp-bar, .vp.is-paused .vp-bar, .vp-bar:hover, .vp.is-seeking .vp-bar { opacity: 1; transform: none; }
.vp-progress { position: relative; height: 16px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.vp-progress::before, .vp-buf, .vp-fill { content: ''; position: absolute; left: 0; height: 4px; border-radius: 4px; transition: height .15s; }
.vp-progress::before { right: 0; background: rgba(255, 255, 255, .22); }
.vp-buf { background: rgba(255, 255, 255, .38); width: 0; }
.vp-fill { background: var(--grad); width: 0; box-shadow: 0 0 10px rgba(255, 79, 138, .6); }
.vp-progress:hover::before, .vp-progress:hover .vp-buf, .vp-progress:hover .vp-fill, .vp.is-seeking .vp-fill { height: 6px; }
.vp-knob { position: absolute; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 79, 138, .35); transform: scale(0); transition: transform .15s; }
.vp-progress:hover .vp-knob, .vp.is-seeking .vp-knob { transform: scale(1); }
.vp-tip { position: absolute; bottom: 20px; transform: translateX(-50%); padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .8); color: #fff; font: 600 12px/1.3 var(--font); opacity: 0; pointer-events: none; transition: opacity .15s; white-space: nowrap; }
.vp-progress:hover .vp-tip { opacity: 1; }
.vp-progress.is-static { cursor: default; }
.vp-row { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: #fff; }
.vp-btn { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; transition: background .15s, transform .15s; flex: none; }
.vp-btn:hover { background: rgba(255, 255, 255, .14); }
.vp-btn:active { transform: scale(.9); }
.vp-btn svg { width: 22px; height: 22px; }
.vp-sm svg { width: 20px; height: 20px; }
.vp-speed { width: auto; padding: 0 10px; font: 700 13px/1 var(--font); }
.vp-time { font: 600 13px/1 var(--font); font-variant-numeric: tabular-nums; margin-left: 6px; white-space: nowrap; opacity: .92; }
.vp-grow { flex: 1; }
.vp-vol { display: flex; align-items: center; }
.vp-vol input { -webkit-appearance: none; appearance: none; width: 0; height: 4px; border-radius: 4px; opacity: 0; transition: width .2s, opacity .2s; cursor: pointer;
    background: linear-gradient(90deg, #fff var(--v, 100%), rgba(255, 255, 255, .3) var(--v, 100%)); }
.vp-vol:hover input, .vp-vol input:focus { width: 80px; opacity: 1; margin: 0 8px 0 2px; }
.vp-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.vp-vol input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }
.eph-stage .vp { max-width: 100vw; max-height: 100vh; border-radius: 0; }
.eph-stage .vp video { max-width: 100vw; max-height: 100vh; pointer-events: none; }
.vp-noseek .vp-fill { transition: width .25s linear; }
@media (max-width: 560px) {
    .vp-sm, .vp-vol input { display: none; }
    .vp-big { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
    .vp video { min-width: 0; }
}
@media (min-width: 700px) { .lightbox .vp, .lightbox .vp video { max-width: calc(100vw - 160px); } }
.ticket-steps { display: flex; gap: 0; align-items: center; }
.ticket-step { flex: 1; display: grid; justify-items: center; gap: 8px; position: relative; font-size: 13px; color: var(--muted); font-weight: 600; text-align: center; }
.ticket-step i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface-solid); position: relative; z-index: 1; }
.ticket-step + .ticket-step::before { content: ''; position: absolute; top: 8px; right: 50%; width: 100%; height: 2px; background: var(--line-2); }
.ticket-step.is-done i { background: var(--grad); border-color: transparent; }
.ticket-step.is-done + .ticket-step.is-done::before { background: var(--rose); }
.ticket-step.is-current { color: var(--text); }
.ticket-step.is-current i { box-shadow: 0 0 0 5px rgba(255, 79, 138, .18); }
.ticket-first { max-width: 100%; justify-self: start; background: rgba(var(--ink), .05); }
.ticket-info { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; background: rgba(61, 140, 255, .08); border: 1px solid rgba(61, 140, 255, .2); font-size: 14px; }
.ticket-info > .ico { width: 22px; height: 22px; color: #4d8dff; flex: none; }
.ticket-info span { flex: 1; min-width: 200px; }
.gphoto { display: grid; gap: 10px; }
.gcrop { position: relative; aspect-ratio: 16 / 5; border-radius: 16px; overflow: hidden; background: #000; cursor: grab; touch-action: none; user-select: none; }
.gcrop.is-drag { cursor: grabbing; }
.gcrop img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.gcrop-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; transition: opacity .2s; }
.gcrop-hint .ico { width: 14px; height: 14px; }
.gcrop.is-drag .gcrop-hint { opacity: 0; }
.gcrop-tools { display: flex; align-items: center; gap: 10px; }
.gcrop-tools input[type=range] { flex: 1; accent-color: var(--rose); }
.gcrop-z { font-weight: 700; color: var(--muted); width: 12px; text-align: center; }
.group-photo-pick { aspect-ratio: 16 / 5; height: auto; }
.group-hero .gcard-cover { height: auto; aspect-ratio: 16 / 5; }
.gcard-cover.has-photo { height: auto; aspect-ratio: 16 / 5; }
.pill-banned { background: rgba(220, 38, 38, .14); color: #ef4444; font-size: 10.5px; vertical-align: middle; }

/* Témoignages */
.testi-body { display: grid; gap: 14px; }
.testi-list, .testi-grid { display: grid; gap: 12px; }
.testi-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.testi { padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: rgba(var(--ink), .025); display: grid; gap: 10px; align-content: start; position: relative; }
.testi::before { content: '“'; position: absolute; top: 4px; right: 16px; font: italic 600 54px/1 var(--serif); color: var(--rose); opacity: .25; }
.testi-author { display: flex; gap: 10px; align-items: center; }
.testi-author > span { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.testi p { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 14.5px; line-height: 1.55; }
.testi footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.testi-acts { display: flex; gap: 8px; align-items: center; }
.testi-note { padding: 12px 14px; border-radius: 14px; background: rgba(255, 79, 138, .08); font-size: 14px; margin: 0; }
.testi-note a { color: var(--rose); font-weight: 600; }
.testi-form { display: grid; gap: 10px; }
.testi-form textarea { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(var(--ink), .03); color: var(--text); font: inherit; resize: vertical; }
.testi-form-foot { display: flex; justify-content: space-between; align-items: center; }
.testi-empty { padding: 20px 0; }
.testi-section { display: grid; gap: 12px; margin-bottom: 26px; }
.testi-st-pending { background: rgba(233, 189, 116, .16); color: #c58a1d; }
.testi-st-accepted { background: rgba(60, 200, 120, .14); color: var(--green); }
.testi-st-refused { background: rgba(var(--ink), .07); color: var(--muted); }
.ptab-badge { position: static; margin-left: 4px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.link-btn:hover { color: var(--rose); }
.modal-wide { max-width: 640px; }
.ticket-ban-note { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 18px; border-radius: 16px; background: rgba(255, 100, 100, .08); border: 1px solid rgba(255, 100, 100, .25); font-size: 14px; }
.ticket-ban-note > .ico { width: 22px; height: 22px; color: var(--danger); flex: none; }
.ticket-ban-note span { flex: 1; min-width: 220px; }
/* Fil : Abonnements / Découvrir */
.feed-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.feed-tabs a { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 10px; border-radius: 999px; font-weight: 700; font-size: 14.5px; color: var(--text-2); transition: all .2s; }
.feed-tabs a .ico { width: 17px; height: 17px; }
.feed-tabs a.is-active { background: var(--grad); color: #fff; box-shadow: var(--glow); }
.feed-tabs a:not(.is-active):hover { background: rgba(var(--ink), .05); }
.feed-sep { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.feed-sep::before, .feed-sep::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.posts-featured .post { border-color: rgba(255, 79, 138, .35); }

/* =====================================================================
   Lives
   ===================================================================== */
.page-head-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.lcard-screen { position: relative; overflow: hidden; }
.lcard-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lcard-letter { position: absolute; inset: 0; display: grid; place-items: center; font: italic 600 56px/1 var(--serif); color: rgba(255, 255, 255, .8); }
.lcard-screen .live-pill { position: absolute; top: 10px; left: 10px; z-index: 1; }
.lcard-priv, .lcard-viewers { position: absolute; z-index: 1; display: inline-flex; gap: 5px; align-items: center; padding: 4px 9px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 700; }
.lcard-priv { top: 10px; right: 10px; }
.lcard-viewers { bottom: 10px; right: 10px; }
.lcard-priv .ico, .lcard-viewers .ico { width: 13px; height: 13px; }
.lcard-body > span { display: grid; gap: 2px; min-width: 0; }
.live-top .live-pill { position: static; }
.lcard-body small { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.live-pick { display: grid; gap: 8px; }
.live-pick-search { height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(var(--ink), .03); color: var(--text); font: inherit; font-size: 14px; }
.live-pick-list { display: grid; gap: 4px; max-height: 220px; overflow-y: auto; padding: 2px; }
.live-pick-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; font-weight: 600; font-size: 14px; }
.live-pick-item[hidden] { display: none; }
.live-pick-item input { position: absolute; opacity: 0; }
.live-pick-item .lp-name { flex: 1; }
.live-pick-item .avatar { flex: none; }
.live-pick-item i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; color: transparent; }
.live-pick-item i .ico { width: 13px; height: 13px; }
.live-pick-item:has(input:checked) { border-color: var(--rose); background: rgba(255, 79, 138, .07); }
.live-pick-item:has(input:checked) i { background: var(--grad); border-color: transparent; color: #fff; }

.live-page { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.live-stage { padding: 0; overflow: hidden; }
.live-video { position: relative; background: #000; aspect-ratio: 16 / 9; }
.live-video video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.live-video:fullscreen { aspect-ratio: auto; }
.live-overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; color: #fff; background: rgba(10, 6, 12, .75); padding: 20px; font-size: 15px; }
.live-overlay[hidden] { display: none; }
.live-overlay small { opacity: .75; }
.live-top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.live-count, .live-rec { display: inline-flex; gap: 5px; align-items: center; padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12.5px; font-weight: 700; }
.live-count .ico { width: 14px; height: 14px; }
.live-rec { margin-left: auto; color: #ff6b6b; animation: pulse 1.6s infinite; }
.live-ctrls { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; align-items: center; padding: 26px 14px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.live-ctrls .vp-btn.is-off { background: rgba(255, 80, 80, .5); }
.live-ctrls .btn-danger { margin-left: auto; }
.live-unmute { background: var(--grad); color: #fff; }
.live-info { padding: 16px 20px 20px; display: grid; gap: 10px; }
.live-info h1 { font-size: 26px; }
.live-author { display: flex; gap: 10px; align-items: center; }
.live-author > span { display: grid; gap: 2px; }
.live-author small { display: flex; gap: 4px; align-items: center; color: var(--muted); }
.live-side { display: grid; gap: 12px; position: sticky; top: calc(var(--topbar) + 16px); max-height: calc(100vh - var(--topbar) - 40px); grid-template-rows: auto auto 1fr auto; }
.live-viewers ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 170px; overflow-y: auto; }
.live-viewers li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.live-viewers li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.live-viewers .icon-btn { width: 30px; height: 30px; font-size: 13px; }
.live-chat { overflow-y: auto; min-height: 220px; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.live-c { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.live-c p { margin: 0; word-break: break-word; }
.live-c b { margin-right: 2px; }
.live-c.is-owner b { color: var(--rose); }
.live-chat-form { display: flex; gap: 8px; }
.live-chat-form input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(var(--ink), .03); color: var(--text); font: inherit; }
@keyframes pulse { 50% { opacity: .45; } }
@media (max-width: 900px) {
    .live-page { grid-template-columns: 1fr; }
    .live-side { position: static; max-height: none; }
    .live-chat { max-height: 320px; }
}

/* --- Live : plus grand, contrôles auto-masqués, mode studio --- */
.main:has(> .live-page) { max-width: 1680px; }
.live-page { grid-template-columns: minmax(0, 1fr) 380px; }
.live-video { aspect-ratio: auto; height: min(calc(100vh - var(--topbar) - 190px), 62vw); min-height: 320px; }
.live-side { height: calc(min(calc(100vh - var(--topbar) - 190px), 62vw) + 120px); max-height: none; grid-template-rows: auto 1fr auto; }
.live-chat { min-height: 0; }
.live-top, .live-ctrls { transition: opacity .3s; }
.live-video:not(.show-ui) .live-top, .live-video:not(.show-ui) .live-ctrls { opacity: 0; pointer-events: none; }
.live-video:not(.show-ui) { cursor: none; }
.live-ctrls { gap: 6px; }
.live-ctrls .vp-btn { width: 42px; height: 42px; }
.live-ctrls .vp-btn .ico, .live-ctrls .vp-btn svg { width: 22px; height: 22px; }
.vp-btn .ic-off, .vp-btn.is-off .ic-on { display: none; }
.vp-btn.is-off .ic-off { display: block; }
.live-ctrls .vp-btn.is-off { background: rgba(239, 68, 68, .85); color: #fff; }
[data-live-mute].is-off { background: rgba(255, 255, 255, .12) !important; }
.live-vol { display: flex; align-items: center; gap: 6px; }
.live-vol input { -webkit-appearance: none; appearance: none; width: 110px; height: 4px; border-radius: 4px; cursor: pointer; background: linear-gradient(90deg, #fff var(--v, 0%), rgba(255, 255, 255, .3) var(--v, 0%)); }
.live-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.live-vol input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.live-unmute-hint { position: absolute; top: 56px; right: 14px; z-index: 3; display: inline-flex; gap: 8px; align-items: center; padding: 9px 14px; border-radius: 999px; background: var(--grad); color: #fff; font-weight: 700; font-size: 13.5px; box-shadow: var(--glow); }
.live-unmute-hint .ico { width: 18px; height: 18px; }
.live-viewers-wrap { position: relative; }
.live-viewers-btn { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: 12px; color: #fff; font-weight: 700; background: rgba(255, 255, 255, .12); }
.live-viewers-btn:hover { background: rgba(255, 255, 255, .22); }
.live-viewers-btn .ico { width: 20px; height: 20px; }
.live-viewers-pop { position: absolute; bottom: 52px; right: 0; width: 300px; max-height: 340px; overflow-y: auto; padding: 12px; border-radius: 16px; background: var(--surface-solid); color: var(--text); border: 1px solid var(--line-2); box-shadow: var(--shadow); z-index: 5; }
.live-viewers-pop h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.live-viewers-pop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.live-viewers-pop li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.live-viewers-pop li .avatar { flex: none; }
.lv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.lv-act { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--line-2); color: var(--text-2); }
.lv-act:hover { border-color: var(--rose); color: var(--rose); }
.lv-act.is-danger { color: var(--danger); }
.live-video.is-fs { height: 100vh; border-radius: 0; }
.live-video.is-fs video { object-fit: contain; }
/* Mode studio : commentaires qui défilent en bas + champ pour écrire */
.live-studio-chat, .live-studio-form { display: none; }
.live-video.is-studio .live-studio-chat { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; position: absolute; left: 20px; bottom: 140px; width: min(520px, 60vw); max-height: 42vh; overflow: hidden; pointer-events: none;
    -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }
.live-video.is-studio .live-studio-chat .live-c { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); background: rgba(0, 0, 0, .35); padding: 6px 10px; border-radius: 14px; width: fit-content; max-width: 100%; animation: fadeIn .3s; }
.live-video.is-studio .live-studio-chat .live-c b { color: #ffb3cf; }
.live-video.is-studio .live-studio-form { display: flex; gap: 8px; position: absolute; left: 20px; bottom: 76px; width: min(520px, 70vw); z-index: 2; transition: opacity .3s; }
.live-video.is-studio:not(.show-ui) .live-studio-form { opacity: .35; }
.live-studio-form input { flex: 1; height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .45); color: #fff; font: inherit; backdrop-filter: blur(8px); }
.live-studio-form input::placeholder { color: rgba(255, 255, 255, .7); }
@media (max-width: 1100px) { .live-page { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 900px) {
    .live-video { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
    .live-side { height: auto; }
    .live-vol input { width: 70px; }
}
.live-ctrls .vp-btn.is-on { background: var(--grad); color: #fff; }
.group-report { margin-left: auto; order: 9; }
/* Groupes sur le profil */
.pgroups { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pgroups-all { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.pgroup { display: grid; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: rgba(var(--ink), .02); transition: transform .15s, border-color .15s; }
.pgroup:hover { transform: translateY(-2px); border-color: rgba(255, 79, 138, .4); }
.pgroup-cover { position: relative; aspect-ratio: 16 / 7; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 25% 20%, hsl(var(--h, 330) 70% 45%), transparent 65%), linear-gradient(135deg, hsl(calc(var(--h, 330) + 40) 50% 20%), #120b14); }
.pgroup-cover img { width: 100%; height: 100%; object-fit: cover; }
.pgroup-cover > span { font: italic 600 24px/1 var(--serif); color: rgba(255, 255, 255, .85); }
.pgroup-cover .gcard-lock { top: 6px; right: 6px; width: 24px; height: 24px; }
.pgroup-cover .gcard-lock .ico { width: 12px; height: 12px; }
.pgroup > span { display: grid; gap: 1px; padding: 8px 10px; min-width: 0; }
.pgroup b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pgroup small { font-size: 11.5px; color: var(--muted); }
.live-title-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.live-dev-pop { width: 320px; display: grid; gap: 10px; }
.live-dev-pop .field select { height: 42px; font-size: 13.5px; }
.live-dev-pop .check-line { font-size: 13px; }
.live-viewers-pop { max-height: min(340px, calc(var(--live-h, 100vh) - 90px)); }
.live-video .live-viewers-pop { max-height: calc(100% - 20px); }
.live-video { --live-h: 100%; }

/* Photos & albums : fenêtre plus grande, album ouvert dans la même fenêtre */
.modal-xl { max-width: min(1280px, 96vw); height: min(88vh, 920px); }
.modal-xl .modal-body { overflow-y: auto; }
.modal-xl .agrid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.modal-xl .album-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.modal.is-covered { visibility: hidden; }
.modal-inplace { background: rgba(8, 5, 9, .7); }
.modal-inplace .modal-card { max-width: min(1280px, 96vw); width: 100%; height: min(88vh, 920px); animation: none; }
.modal-inplace .modal-body { overflow-y: auto; }
.modal-inplace .album-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.modal-back { flex: none; margin-right: 6px; }
.modal-back[hidden] { display: none; }
.acard-cover video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.acard-pill.is-open { background: rgba(60, 200, 120, .9); color: #fff; }
.group-search { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 18px; margin-bottom: 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); }
.group-search > .ico { width: 18px; height: 18px; color: var(--muted); flex: none; }
.group-search input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; color: var(--text); font: inherit; outline: none; }
.gtile.is-uploading { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: rgba(var(--ink), .06); display: grid; place-items: center; }
.gtile.is-uploading img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.gtile-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 79, 138, .25); border-top-color: var(--rose); animation: spin .8s linear infinite; position: relative; }

/* Émojis */
.emoji-btn { flex: none; color: var(--gold); }
[data-emoji-btn].is-active { color: var(--gold); background: rgba(212, 175, 110, .14); }
.emoji-pop { position: fixed; z-index: 600; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); padding: 8px; animation: fadeIn .15s; }
.emoji-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 6px; }
.emoji-tabs button { flex: 1; background: none; border: 0; border-radius: 8px; padding: 5px 0; font-size: 18px; cursor: pointer; opacity: .6; }
.emoji-tabs button.is-active, .emoji-tabs button:hover { opacity: 1; background: rgba(127, 127, 127, .14); }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); align-content: start; gap: 2px; height: 230px; overflow-y: auto; }
.emoji-grid button { background: none; border: 0; border-radius: 8px; font-size: 22px; line-height: 1; padding: 6px 0; cursor: pointer; transition: transform .1s; }
.emoji-grid button:hover { background: rgba(127, 127, 127, .14); transform: scale(1.18); }
.emoji-grid p { grid-column: 1 / -1; padding: 14px 6px; text-align: center; }
.composer-bar .chip-btn[data-emoji-btn] { margin-right: auto; margin-left: 6px; }

/* Groupes : message épinglé, mode « seul le créateur écrit », réglage */
.posts-pinned { margin-bottom: 4px; }
.post.is-pinned { border-color: rgba(212, 175, 110, .45); box-shadow: 0 0 0 1px rgba(212, 175, 110, .18), var(--shadow, 0 10px 30px rgba(0,0,0,.25)); }
.post-pinned { color: var(--gold); font-weight: 600; }
.group-readonly { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: rgba(212, 175, 110, .08); border: 1px solid rgba(212, 175, 110, .25); color: var(--text-2); font-size: 13.5px; margin-bottom: 14px; }
.group-readonly .ico { flex: none; width: 16px; height: 16px; color: var(--gold); }
.group-owner-only span { display: flex; flex-direction: column; gap: 2px; }
.group-owner-only small { color: var(--text-3, var(--text-2)); font-size: 12.5px; }

/* Page « compte suspendu » : bulle nouveau message de l'équipe */
.gate-bubble { position: fixed; right: 22px; bottom: 22px; z-index: 50; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 12px 18px 12px 12px; border-radius: 20px; background: var(--surface-solid); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0, 0, 0, .28); text-align: left; color: var(--text); animation: bubbleIn .5s var(--ease); transition: transform .2s; }
.gate-bubble:hover { transform: translateY(-2px); }
.gate-bubble[hidden] { display: none; }
.gate-bubble-ico { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--rose), #c2185b); color: #fff; }
.gate-bubble-ico .ico { width: 22px; height: 22px; }
.gate-bubble-ico b { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: #fff; color: #c2185b; font-size: 11.5px; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.gate-bubble strong { display: block; font-size: 14px; }
.gate-bubble small { color: var(--text-2); font-size: 12.5px; }
.gate-bubble.is-new { animation: bubbleIn .5s var(--ease), bubblePulse 1.2s .5s 2; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(20px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes bubblePulse { 50% { box-shadow: 0 0 0 10px rgba(233, 30, 99, .18), 0 16px 40px rgba(0, 0, 0, .28); } }
@media (max-width: 600px) { .gate-bubble { left: 16px; right: 16px; bottom: 16px; } }
/* Groupes : bannissement */
.group-people .icon-btn.is-danger { color: var(--danger); }
.group-banned { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: var(--danger); font-size: 14px; }
.group-banned .ico { width: 16px; height: 16px; }
.group-bans > span { display: inline-flex; gap: 6px; align-items: center; }
.group-bans > span .ico { width: 15px; height: 15px; color: var(--danger); }
.group-bans .group-people li small { font-weight: 400; }

/* --- Live : niveau du micro (le bouton s'allume quand le son passe) --- */
.live-ctrls [data-live-mic] { position: relative; overflow: hidden; }
.live-ctrls [data-live-mic]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--lvl, 0) * 100%); background: rgba(52, 211, 153, .55); transition: height .08s linear; pointer-events: none; }
.live-ctrls [data-live-mic].is-off::after { display: none; }
.live-ctrls [data-live-mic] svg { position: relative; z-index: 1; }
.live-overlay .btn { margin-top: 6px; }
.live-overlay small b { color: #fff; }

/* --- Live sur téléphone : une seule colonne, vidéo haute, contrôles compacts --- */
@media (max-width: 900px) {
    .live-page { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .live-stage { border-radius: 18px; }
    .live-video { aspect-ratio: auto; height: min(68vh, 135vw); min-height: 300px; }
    .live-side { position: static; height: auto; max-height: none; grid-template-rows: auto auto auto; }
    .live-chat { max-height: 280px; min-height: 120px; }
    .live-info { padding: 12px 14px 14px; }
    .live-info h1 { font-size: 20px; }
    .live-title-row { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 600px) {
    .live-ctrls { gap: 4px; padding: 22px 8px 8px; flex-wrap: nowrap; }
    .live-ctrls .vp-btn { width: 38px; height: 38px; flex: none; }
    .live-ctrls .vp-btn .ico, .live-ctrls .vp-btn svg { width: 19px; height: 19px; }
    .live-viewers-btn { height: 38px; padding: 0 10px; }
    .live-ctrls .btn-danger { padding: 0 10px; height: 38px; font-size: 13px; white-space: nowrap; }
    .live-ctrls .btn-danger .ico { display: none; }
    .live-ctrls [data-live-studio] { display: none; } /* le plein écran suffit sur téléphone */
    .live-viewers-pop { position: fixed; left: 12px; right: 12px; bottom: 80px; width: auto; max-height: 55vh; }
    .live-top { top: 8px; left: 8px; right: 8px; flex-wrap: wrap; }
    .live-unmute-hint { top: auto; bottom: 66px; left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; }
    .live-overlay { font-size: 14px; }
    .live-vol input { width: 60px; }
}
/* Sur écran tactile, pas de curseur masqué ni de survol : un toucher affiche les contrôles */
@media (hover: none) { .live-video:not(.show-ui) { cursor: auto; } }

/* ---------- Page Dispos ---------- */
.dispos-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dispo-days-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 14px; scrollbar-width: thin; }
.ddtab { flex: none; display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); transition: border-color .15s, transform .15s; }
.ddtab span { font-weight: 700; color: var(--text); }
.ddtab small { grid-column: 1; font-size: 12px; color: var(--muted); }
.ddtab b { grid-row: 1 / 3; grid-column: 2; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 99px; display: grid; place-items: center; font-size: 13px; background: var(--grad); color: #fff; }
.ddtab b.is-zero { background: rgba(var(--ink), .08); color: var(--muted); }
.ddtab:hover { border-color: rgba(255, 79, 138, .45); transform: translateY(-1px); }
.ddtab.is-active { border-color: var(--rose); background: linear-gradient(135deg, rgba(255, 79, 138, .16), rgba(255, 79, 138, .04)); box-shadow: 0 0 0 1px rgba(255, 79, 138, .25); }
.dispos-mine { display: flex; gap: 6px; align-items: center; margin: -4px 0 14px; }
.dispos-mine .ico { width: 15px; height: 15px; color: var(--green, #34d399); }
.dispo-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.dcard { display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 12px 16px; padding: 16px; }
.dcard-who { grid-row: 1 / 3; display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center; padding-right: 14px; border-right: 1px solid var(--line); color: inherit; }
.dcard-who .avatar-wrap .avatar { width: 84px; height: 84px; }
.dcard-id { display: grid; gap: 4px; justify-items: center; }
.dcard-id strong { font-size: 16px; }
.dcard-id small { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.dcard-id small .ico { width: 12px; height: 12px; }
.dcard-title { margin: 0 0 8px; font-family: var(--serif, Fraunces, serif); font-size: 17px; line-height: 1.35; color: var(--text); }
.dcard-dispo .dispo { padding: 0; border: 0; background: none; box-shadow: none; }
.dcard-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 560px) {
    .dcard { grid-template-columns: 1fr; }
    .dcard-who { grid-row: auto; grid-template-columns: auto 1fr; justify-items: start; text-align: left; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 12px; }
    .dcard-id { justify-items: start; }
    .dcard-who .avatar-wrap .avatar { width: 60px; height: 60px; }
}

/* ---------- Recherche : bouton Dispo + badge « Disponible » ---------- */
.search-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.dispo-toggle { display: inline-flex; align-items: center; gap: 8px; }
.dispo-toggle.is-on { background: linear-gradient(135deg, #10b981, #059669); color: #fff; border: 0; box-shadow: 0 8px 24px rgba(16, 185, 129, .3); }
.dispo-toggle.is-on .dispo-x { margin-left: 2px; opacity: .8; font-size: 12px; }
.dispo-gear { animation: fadeIn .2s; }
.pcard-dispo { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; color: #059669; background: rgba(16, 185, 129, .14); }
.pcard-dispo .ico { width: 13px; height: 13px; }
:root:not([data-theme="light"]) .pcard-dispo { color: #34d399; }
.dispo-pill { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 4px 11px; border-radius: 99px; font: 700 13px/1.2 Manrope, sans-serif; color: #fff; background: linear-gradient(135deg, #10b981, #059669); vertical-align: middle; box-shadow: 0 6px 18px rgba(16, 185, 129, .3); }
.dispo-pill .ico { width: 14px; height: 14px; }
.dispo-modes { margin-bottom: 12px; }
.set-sub { margin: 18px 0 4px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-family: inherit; font-weight: 700; }
.set-sub:first-of-type { margin-top: 6px; }
@media (max-width: 600px) { .search-actions { justify-content: flex-start; } .dispo-pill { margin-left: 0; margin-top: 6px; } }
.grant-row { display: grid; gap: 6px; align-content: start; }
.grant-revoke { justify-self: start; }
.grant-revoke .ico { width: 13px; height: 13px; }
.album-access h4 .access-all { margin-left: auto; text-transform: none; letter-spacing: 0; }
.grant-all { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; border-radius: 14px; background: rgba(255, 79, 138, .08); border: 1px solid rgba(255, 79, 138, .25); font-size: 14px; }
.grant-all > span { display: inline-flex; gap: 6px; align-items: center; }
.grant-all .ico { width: 15px; height: 15px; }

/* ---------- Abonnement Premium ---------- */
.premium-top { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 99px; background: var(--grad-gold); color: #2a1a0a; font-weight: 800; font-size: 13.5px; box-shadow: 0 8px 22px -10px rgba(233, 189, 116, .7); }
.premium-top .ico { width: 16px; height: 16px; }
.menu-pop .menu-premium { color: var(--gold); }
body[data-media-lock="1"] .media-tile { position: relative; }
body[data-media-lock="1"] .media-tile.is-video::after { content: '🔒 Premium'; position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, #3a1630, #140a12); color: #ffb3cf; font-weight: 800; font-size: 14px; }
body[data-media-lock="1"] .media-tile .play-badge { display: none; }
.premium-page { max-width: 980px; margin: 0 auto; display: grid; gap: 18px; }
.premium-why { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 14px; background: rgba(255, 79, 138, .1); border: 1px solid rgba(255, 79, 138, .3); font-weight: 600; }
.premium-why .ico { width: 18px; height: 18px; color: var(--rose); flex: none; }
.premium-hero { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 30px; background: radial-gradient(circle at 15% 10%, rgba(255, 79, 138, .25), transparent 55%), radial-gradient(circle at 90% 90%, rgba(233, 189, 116, .2), transparent 50%), var(--surface); }
.premium-hero-txt { flex: 1 1 380px; display: grid; gap: 10px; }
.premium-hero h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; }
.premium-tag { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 5px 12px; border-radius: 99px; background: var(--grad-gold); color: #2a1a0a; font-weight: 800; font-size: 12.5px; letter-spacing: .02em; }
.premium-tag .ico { width: 14px; height: 14px; }
.premium-price { display: grid; justify-items: center; padding: 18px 26px; border-radius: 20px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(233, 189, 116, .35); text-align: center; }
:root[data-theme="light"] .premium-price { background: rgba(255, 255, 255, .7); }
.premium-price b { font-family: var(--serif, Fraunces, serif); font-size: 46px; line-height: 1; color: var(--gold); }
.premium-price span { font-weight: 700; color: var(--text-2); }
.premium-price small { margin-top: 6px; color: var(--muted); font-size: 12px; }
.premium-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; }
.premium-perks ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.premium-perks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.premium-perks li .ico { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: rgba(16, 185, 129, .16); color: #10b981; }
.premium-perks li:last-child { color: var(--muted); font-size: 13.5px; }
.premium-cta { display: grid; gap: 12px; align-content: start; }
.premium-cta h2 { font-size: 26px; }
.premium-why.premium-ok { background: rgba(34, 197, 94, .1); border-color: rgba(34, 197, 94, .35); }
.premium-why.premium-ok .ico { color: #22c55e; }
.plan-list { display: grid; gap: 10px; }
.plan-opt { position: relative; display: block; cursor: pointer; }
.plan-opt input { position: absolute; opacity: 0; pointer-events: none; }
.plan-body { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line, rgba(255,255,255,.12)); transition: border-color .15s, background .15s; }
.plan-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.plan-top b { font-size: 16px; }
.plan-top em { font-style: normal; font-weight: 800; font-size: 18px; white-space: nowrap; }
.plan-top em small { font-weight: 500; font-size: 12.5px; opacity: .7; }
.plan-body > small { opacity: .75; line-height: 1.4; }
.plan-opt input:checked + .plan-body { border-color: var(--rose); background: rgba(255, 79, 138, .08); box-shadow: 0 0 0 3px rgba(255, 79, 138, .15); }
.plan-opt input:focus-visible + .plan-body { outline: 2px solid var(--rose); outline-offset: 2px; }
.premium-note { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 0; opacity: .85; }
.premium-note .ico { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.premium-state { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.premium-state .ico { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: #10b981; color: #fff; }
.premium-test { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: #d97706; margin: 0; }
.premium-test .ico { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.premium-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.premium-table th, .premium-table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); }
.premium-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.premium-table tr.is-off td { opacity: .5; text-decoration: line-through; }
@media (max-width: 760px) { .premium-grid { grid-template-columns: 1fr; } .premium-hero { padding: 22px; } .premium-top span { display: none; } .premium-top { padding: 0 11px; } .premium-table { font-size: 12.5px; } }
.premium-page > * { min-width: 0; }
.premium-history { overflow-x: auto; }
@media (max-width: 480px) { .premium-table th:nth-child(4), .premium-table td:nth-child(4) { display: none; } }
.premium-off { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .4); } .premium-off .ico { color: #d97706; } .premium-off a { color: var(--rose); font-weight: 700; }
/* Conversation verrouillée (sans abonnement) */
.thread-premium { flex: 1; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 40px 20px; text-align: center; background: radial-gradient(circle at 50% 30%, rgba(255, 79, 138, .12), transparent 60%); }
.thread-premium-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 79, 138, .14); color: var(--rose); }
.thread-premium-ico .ico { width: 28px; height: 28px; }
.thread-premium h3 { font-size: 22px; }
.conv-txt small .ico { width: 12px; height: 12px; vertical-align: -1px; margin-right: 3px; color: var(--gold); }
.premium-inline { margin: 0 0 16px; }
.premium-inline a { color: var(--rose); font-weight: 700; }
/* Cartes floutées (sans abonnement) */
.premium-grid-why { grid-column: 1 / -1; }
.pcard-locked .pcard-media { position: relative; }
.pcard-locked .pcard-letter { filter: blur(14px); transform: scale(1.2); }
.pcard-locked .pcard-lock { position: absolute; inset: 0; display: grid; place-items: center; }
.pcard-locked .pcard-lock .ico { width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #ffb3cf; box-sizing: content-box; }
.pcard-hidden { filter: blur(5px); user-select: none; letter-spacing: 2px; }
/* Retirer photo de profil / bannière */
.cover-actions { position: absolute; right: 14px; top: 14px; z-index: 2; display: flex; gap: 8px; }
.cover-actions .cover-edit { position: static; }
.cover-remove:hover { background: rgba(220, 38, 38, .85); }
.avatar-del { position: absolute; right: 4px; bottom: 4px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #dc2626; color: #fff; box-shadow: var(--shadow); transition: transform .2s; }
.avatar-del:hover { transform: scale(1.08); }
.avatar-del .ico { width: 16px; height: 16px; }
.pcard-locked .pcard-media img.pcard-blur { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: blur(4px) saturate(1.1); }
/* Catégorie IA d'une photo (visible par son propriétaire) */
.gtile { position: relative; }
.gtile-app { position: absolute; left: 6px; top: 6px; z-index: 2; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 99px; background: rgba(0, 0, 0, .55); font-size: 13px; pointer-events: auto; cursor: help; }

/* =====================================================================
   VERSION APPLI (AméLib ouvert dans l'appli mobile : ?app=1 / appli Android)
   ===================================================================== */
/* --- Écran d'accueil de l'appli --- */
body.is-app.app-welcome { overflow-x: hidden; }
.appw { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto auto; gap: 28px; padding: calc(40px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; }
.appw-orbs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.appw-orbs i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: appwFloat 12s ease-in-out infinite alternate; }
.appw-orbs i:nth-child(1) { width: 320px; height: 320px; left: -90px; top: -60px; background: #ff4f8a; }
.appw-orbs i:nth-child(2) { width: 260px; height: 260px; right: -80px; top: 35%; background: #9b2c8f; animation-delay: -4s; }
.appw-orbs i:nth-child(3) { width: 280px; height: 280px; left: 10%; bottom: -120px; background: #e9bd74; opacity: .3; animation-delay: -8s; }
@keyframes appwFloat { to { transform: translate(30px, -40px) scale(1.12); } }
.appw-top { display: grid; justify-items: center; align-content: center; gap: 18px; text-align: center; }
.appw-logo .logo-img { height: 64px; }
.appw-logo a { pointer-events: none; }
.appw-tag { font-family: var(--serif, Fraunces, serif); font-size: 22px; line-height: 1.3; max-width: 300px; }
.appw-tag em { color: var(--rose); }
.appw-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.appw-points li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(14px); font-weight: 600; font-size: 14.5px; }
.appw-points span { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 79, 138, .15); color: var(--rose); }
.appw-points .ico { width: 19px; height: 19px; }
.appw-actions { display: grid; gap: 12px; }
.appw-actions .btn-lg { height: 56px; font-size: 16.5px; }
.appw-18 { margin: 4px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.appw-18 b { display: inline-grid; place-items: center; width: 30px; height: 20px; margin-right: 4px; border-radius: 6px; background: var(--danger); color: #fff; font-size: 11px; }

/* --- Connexion / inscription / mot de passe oublié dans l'appli --- */
.app-bar { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: calc(58px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 10px 0; background: rgba(var(--bg-rgb), .82); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.app-back { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--text); }
.app-back:active { background: rgba(var(--ink), .08); }
.app-back .ico { width: 22px; height: 22px; }
.app-bar-logo { display: grid; justify-items: center; }
.app-bar-logo .logo-img { height: 28px; }
body.is-app .auth-wrap { min-height: calc(100dvh - 58px); place-items: start center; padding: 22px 18px calc(30px + env(safe-area-inset-bottom)); }
body.is-app .auth-card { max-width: 520px; padding: 6px 2px; background: none; border: 0; box-shadow: none; backdrop-filter: none; border-radius: 0; }
body.is-app .auth-card h1 { font-size: 30px; }
body.is-app .field input, body.is-app .field select { height: 52px; font-size: 16px; border-radius: 14px; }
body.is-app .auth-card .btn-block, body.is-app .auth-card .btn-primary { min-height: 52px; font-size: 16px; }
body.is-app .auth-switch { text-align: center; }

/* --- Pages connectées dans l'appli : en-tête compact + barre d'onglets en bas, sur tous les écrans --- */
body.app.is-app { --topbar: 58px; }
body.app.is-app .topbar { justify-content: space-between; height: calc(var(--topbar) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
body.app.is-app .tabs, body.app.is-app .me-menu .me-name { display: none; }
body.app.is-app .logo-img { height: 26px; }
body.app.is-app .premium-top span { display: none; }
body.app.is-app .premium-top { padding: 0 11px; }
body.app.is-app .bottombar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: space-around;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: rgba(var(--bg-rgb), .92); backdrop-filter: blur(20px); border-top: 1px solid var(--line); }
body.app.is-app .bottombar a { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 10px; font-size: 11px; font-weight: 600; color: var(--muted); }
body.app.is-app .bottombar a.is-active { color: var(--text); }
body.app.is-app .bottombar a.is-active .ico { color: var(--rose); }
body.app.is-app .bottombar .ico { width: 22px; height: 22px; }
body.app.is-app .bottombar .badge { position: absolute; top: 0; right: 4px; }
body.app.is-app .main { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
body.is-app a, body.is-app button { -webkit-tap-highlight-color: transparent; }

/* --- Appli : en-tête sans son ni avatar (le profil est dans la barre du bas, le menu du compte sur la page profil) --- */
body.app.is-app .topbar .sound-btn, body.app.is-app .topbar .me-menu { display: none; }
.app-me-menu .menu-pop { min-width: 230px; }

/* --- Appli : page Abonnement centrée, bouton juste sous le prix --- */
body.is-app .premium-hero { flex-direction: column; text-align: center; padding: 26px 20px; }
body.is-app .premium-hero-txt { flex: none; justify-items: center; }
body.is-app .premium-price { width: 100%; }
body.is-app .premium-hero-cta { width: 100%; display: grid; gap: 8px; }
body.is-app .premium-hero-cta .btn { height: 54px; font-size: 16.5px; }
body.is-app .premium-hero-cta .premium-test { justify-content: center; }
body.is-app .premium-cta.is-app-hidden { display: none; }
body.is-app .premium-grid { grid-template-columns: 1fr; }

/* --- Appli : conversation en plein écran (sans barre du haut ni du bas) --- */
body.is-app.in-thread .topbar, body.is-app.in-thread .bottombar, body.is-app.in-thread .admin-bar { display: none !important; }
body.is-app.in-thread .main { max-width: none; padding: 0; }
body.is-app.in-thread .chat-layout { grid-template-columns: 1fr; gap: 0; height: 100vh; height: 100dvh; min-height: 0; }
body.is-app.in-thread .conv-list { display: none; }
body.is-app.in-thread .thread { border-radius: 0; border: 0; box-shadow: none; }
body.is-app.in-thread .thread-head { padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 10px; }
body.is-app.in-thread .thread-form { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
body.is-app .thread-form .emoji-btn { display: none; } /* le clavier du téléphone a déjà ses émojis */

/* Bouton Envoyer bien rond (il était écrasé par le champ de texte) */
.thread-form .btn-icon, .live-chat-form .btn-icon, .live-studio-form .btn-icon { flex: none; width: 46px; height: 46px; min-width: 46px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.thread-form .btn-icon .ico { width: 20px; height: 20px; margin-left: -2px; }
/* Appli : boutons de mon profil (Modifier + menu du compte, puis Nouvel album en dessous) */
body.is-app .profile-actions:has(.app-me-menu) { grid-template-columns: minmax(0, 1fr) auto; }
body.is-app .profile-actions:has(.app-me-menu) [data-album-create] { grid-column: 1 / -1; }
body.is-app .profile-actions .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-me-menu .menu-pop { right: auto; left: 0; transform-origin: top left; }
@media (max-width: 420px) { .app-me-menu .menu-pop { left: auto; right: 0; transform-origin: top right; } }

/* =====================================================================
   APPLI : ACCUEIL « À LA TINDER »
   ===================================================================== */
body.is-app:has(.deck-page) .main { padding-top: 12px; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.deck-page { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px;
    height: calc(100vh - var(--topbar) - 88px); height: calc(100dvh - var(--topbar) - env(safe-area-inset-top) - 88px - env(safe-area-inset-bottom)); }
.deck-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.deck-where { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; font-size: 14px; color: var(--text-2); min-width: 0; }
.deck-where span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-where .ico { width: 16px; height: 16px; color: var(--rose); flex: none; }
.deck-note { padding: 9px 12px; border-radius: 12px; font-size: 13px; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .35); }
.deck-note .ico { width: 14px; height: 14px; vertical-align: -2px; color: #d97706; }
.deck-note .link-btn { color: var(--rose); font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; }
.deck-stack { position: relative; flex: 1; min-height: 320px; }
.deck-stack:empty { display: none; }
.deck-actions { flex: none; }
.deck-stack > .loader { position: absolute; inset: 0; display: grid; place-content: center; }

.dk-card { position: absolute; inset: 0; display: grid; grid-template-rows: 62% 38%; overflow: hidden; border-radius: 24px; background: var(--surface-solid); border: 1px solid var(--line); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); transition: transform .26s var(--ease), opacity .26s; touch-action: pan-y; user-select: none; }
.dk-card.is-next { transform: scale(.95) translateY(10px); opacity: .6; pointer-events: none; z-index: 0; }
.dk-card:not(.is-next) { z-index: 1; }
.dk-photo { position: relative; overflow: hidden; background: #120b14; cursor: grab; }
.dk-photo img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.dk-letter { position: absolute; inset: 0; display: grid; place-items: center; font: 600 120px/1 var(--serif, Fraunces, serif); color: rgba(255, 255, 255, .92);
    background: radial-gradient(circle at 30% 25%, hsl(var(--h) 75% 55%), transparent 60%), linear-gradient(135deg, hsl(calc(var(--h) + 40) 60% 30%), #140a12); }
.dk-photo::after { content: ''; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); pointer-events: none; }
.dk-dots { position: absolute; top: 10px; left: 12px; right: 12px; z-index: 2; display: flex; gap: 5px; }
.dk-dots i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
.dk-dots i.is-on { background: #fff; }
.dk-zone { position: absolute; top: 0; bottom: 0; width: 38%; z-index: 2; background: none; border: 0; }
.dk-zone.is-prev { left: 0; } .dk-zone.is-next { right: 0; }
.dk-badges { position: absolute; top: 22px; left: 12px; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.dk-online, .dk-dispo { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .45); backdrop-filter: blur(6px); }
.dk-online { color: #4ade80; }
.dk-dispo { background: linear-gradient(135deg, #10b981, #059669); }
.dk-dispo .ico { width: 13px; height: 13px; }
.dk-name { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 2; display: flex; align-items: baseline; gap: 10px; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.dk-name b { font: 600 28px/1.1 var(--serif, Fraunces, serif); }
.dk-name span { font-size: 18px; font-weight: 600; opacity: .9; }
.dk-stamp { position: absolute; top: 34px; z-index: 3; padding: 6px 14px; border: 3px solid; border-radius: 12px; font: 900 24px/1 Manrope, sans-serif; letter-spacing: .06em; opacity: 0; transition: opacity .15s; }
.dk-stamp.is-like { left: 18px; color: #4ade80; transform: rotate(-14deg); }
.dk-stamp.is-pass { right: 18px; color: #f87171; transform: rotate(14deg); }
.dk-card.show-like .is-like, .dk-card.show-pass .is-pass { opacity: 1; }
.dk-info { overflow-y: auto; padding: 12px 16px 16px; display: grid; align-content: start; gap: 6px; }
.dk-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 0; font-size: 13px; color: var(--text-2); }
.dk-meta .ico { width: 13px; height: 13px; }
.dk-bio { margin: 2px 0 4px; font-size: 14px; line-height: 1.45; white-space: pre-line; }
.dk-info h4 { margin: 6px 0 2px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.dk-info .tag.is-common { border-color: var(--rose); color: var(--rose); background: rgba(255, 79, 138, .1); }
.dk-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--rose); }
.dk-more .ico { width: 14px; height: 14px; }
@media (min-width: 600px) {
    .dk-card { grid-template-rows: none; grid-template-columns: 55% 45%; }  /* photo à gauche, bio à droite */
    .dk-info { padding: 20px; }
}

.deck-actions { display: flex; justify-content: center; align-items: center; gap: 22px; padding: 4px 0 2px; }
.deck-btn { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--surface-solid); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5), 0 0 0 1px var(--line); cursor: pointer; transition: transform .15s; }
.deck-btn:active { transform: scale(.9); }
.deck-btn .ico { width: 26px; height: 26px; }
.deck-btn.is-pass { color: #f87171; }
.deck-btn.is-chat { color: #60a5fa; }
.deck-btn.is-like { width: 72px; height: 72px; color: #fff; background: var(--grad); box-shadow: 0 14px 30px -10px rgba(255, 79, 138, .75); }
.deck-btn.is-like .ico { width: 32px; height: 32px; fill: currentColor; }

.deck-empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 50px 20px; }
.deck-empty-btns { display: grid; gap: 8px; width: min(320px, 100%); }

/* Après un coup de cœur : « Parle directement à … » */
.deck-match { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; background: rgba(8, 4, 10, .72); backdrop-filter: blur(8px); animation: fadeIn .2s; }
.deck-match[hidden] { display: none; }
.deck-match-card { width: min(360px, 100%); display: grid; justify-items: center; gap: 12px; padding: 28px 22px 20px; border-radius: 26px; text-align: center; background: var(--surface-solid); border: 1px solid var(--line); box-shadow: var(--shadow); animation: modalIn .35s var(--ease); }
.deck-match-heart { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--grad); color: #fff; animation: heartPop .6s var(--ease); }
.deck-match-heart .ico { width: 36px; height: 36px; fill: currentColor; }
@keyframes heartPop { 0% { transform: scale(.3); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.deck-match-card h2 { font-size: 24px; }
.deck-talk { display: grid; justify-items: center; gap: 8px; margin: 6px 0 4px; color: inherit; }
.deck-talk-label { font-weight: 800; font-size: 14px; color: var(--rose); }
.deck-talk-bubble { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #60a5fa, #2563eb); box-shadow: 0 12px 30px -8px rgba(37, 99, 235, .7); animation: talkWiggle 1.6s ease-in-out infinite; }
.deck-talk-bubble .ico { width: 36px; height: 36px; }
@keyframes talkWiggle { 0%, 100% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-6px) rotate(-8deg); } 40% { transform: translateY(0) rotate(6deg); } 60% { transform: translateY(-3px) rotate(-4deg); } 80% { transform: scale(1.06); } }
.deck-talk[hidden] { display: none; }
/* Carte : texte coupé proprement + bouton « Voir plus » (plus de défilement dans la carte) */
.dk-info { position: relative; overflow: hidden; display: block; padding: 0; }
.dk-info-in { height: 100%; overflow: hidden; padding: 12px 16px 16px; display: grid; align-content: start; gap: 6px; }
.dk-card.is-clamped .dk-info-in { -webkit-mask-image: linear-gradient(#000 62%, transparent 92%); mask-image: linear-gradient(#000 62%, transparent 92%); }
.dk-seemore { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 7px 16px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface-solid); color: var(--text); font-weight: 800; font-size: 13px; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .4); cursor: pointer; }
.dk-seemore .ico { width: 15px; height: 15px; }
@media (min-width: 600px) { .dk-info-in { padding: 20px; } }

/* « Voir plus » : fiche en plein écran, sans les photos */
.deck-sheet { position: fixed; inset: 0; z-index: 110; display: flex; flex-direction: column; background: var(--bg, #0d090e); animation: sheetUp .28s var(--ease); }
.deck-sheet[hidden] { display: none; }
@keyframes sheetUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.deck-sheet-head { flex: none; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 6px; height: calc(58px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 10px 0; border-bottom: 1px solid var(--line); background: rgba(var(--bg-rgb), .92); }
.deck-sheet-head b { text-align: center; font: 600 19px/1.2 var(--serif, Fraunces, serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-sheet-body { flex: 1; overflow-y: auto; padding: 18px 20px 24px; display: grid; align-content: start; gap: 8px; max-width: 720px; width: 100%; margin: 0 auto; }
.deck-sheet-body h4 { margin: 12px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.deck-sheet-body .dk-bio { font-size: 15.5px; line-height: 1.55; }
.dk-sheet-status { display: flex; gap: 6px; margin: 0; }
.dk-sheet-status:empty { display: none; }
.deck-sheet-body .dk-full { margin-top: 14px; }
.deck-sheet-foot { flex: none; display: flex; justify-content: center; align-items: center; gap: 22px; padding: 10px 0 calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }

/* ===================== Appli : profil façon Tinder ===================== */
body.is-app.app-full .topbar, body.is-app.app-full .bottombar, body.is-app.app-full .admin-bar { display: none !important; }
body.is-app.app-full .main { max-width: none; padding: 0; }
body.is-app.app-me .main { padding-top: 0; }
.ap-page { max-width: 720px; margin: 0 auto; padding-bottom: 24px; }
.app-full .ap-page { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.ap-photo { position: relative; height: 68vh; height: 68dvh; min-height: 360px; max-height: 760px; overflow: hidden; background: #120b14; }
.app-me .ap-photo { height: 56vh; height: 56dvh; border-radius: 24px; }
.ap-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; }
.ap-photo .dk-letter[hidden] { display: none; }
.ap-photo::after { content: ''; position: absolute; inset: auto 0 0 0; height: 50%; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); pointer-events: none; }
.ap-photo .dk-dots { top: calc(8px + env(safe-area-inset-top)); }
.ap-photo .dk-zone { top: 70px; bottom: 120px; }
.ap-top { position: absolute; top: calc(18px + env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 4; display: flex; justify-content: space-between; align-items: center; }
.ap-round { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; color: #fff; background: rgba(0, 0, 0, .42); backdrop-filter: blur(8px); cursor: pointer; }
.ap-round .ico { width: 22px; height: 22px; }
.ap-top .menu-pop { right: 0; left: auto; }
.ap-name { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 3; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.ap-name .dk-badges { position: static; margin-bottom: 8px; }
.ap-name h1 { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.ap-name h1 b { font: 600 32px/1.1 var(--serif, Fraunces, serif); }
.ap-name h1 span { font-size: 20px; font-weight: 600; opacity: .9; }
.ap-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 6px 0 0; font-size: 14px; opacity: .92; }
.ap-meta .ico { width: 14px; height: 14px; }
.ap-info { display: grid; gap: 6px; padding: 18px 20px 8px; }
.ap-info h4 { margin: 12px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ap-info h4:first-child { margin-top: 0; }
.ap-info .dk-bio { font-size: 15.5px; line-height: 1.55; }
.ap-info .tag.is-common { border-color: var(--rose); color: var(--rose); background: rgba(255, 79, 138, .1); }
.ap-full { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--rose); }
.ap-full .ico { width: 15px; height: 15px; }
.ap-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; gap: 26px; padding: 14px 0 calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(var(--bg-rgb), .95) 40%); }
.ap-actions .deck-btn.is-off { opacity: .45; }
.ap-like.is-on { box-shadow: 0 0 0 4px rgba(255, 79, 138, .35), 0 14px 30px -10px rgba(255, 79, 138, .75); }
.ap-like:not(.is-on) .ico { fill: none; }
.ap-me-btns { display: grid; gap: 10px; padding: 18px 20px 4px; }
.ap-sheet-list { display: grid; gap: 4px; }
.ap-sheet-list > a { display: flex; align-items: center; gap: 12px; padding: 14px 6px; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--text); }
.ap-sheet-list > a span { flex: 1; }
.ap-sheet-list > a .ico { width: 20px; height: 20px; }
.ap-sheet-list > a .ico:last-child { width: 16px; height: 16px; color: var(--muted); }
.ap-sheet-list > a.is-premium { color: var(--rose); }
.ap-sheet-bottom { display: grid; gap: 10px; margin-top: 22px; }
.ap-delete { color: #f87171; border: 1px solid rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .08); }

/* Appli : modifier mon profil sur la page */
.ap-edit { display: grid; gap: 10px; padding: 18px 20px 8px; scroll-margin-top: 70px; }
.ap-edit[hidden], .ap-info[hidden], .ap-me-btns[hidden] { display: none; }
.ap-edit h4 { margin: 12px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ap-edit h4:first-child { margin-top: 0; }
.ap-edit textarea { width: 100%; }
.ap-edit-foot { position: sticky; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 5; display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 12px 0; background: linear-gradient(transparent, rgba(var(--bg-rgb), .96) 30%); }

/* Appli : « Mes photos » */
.ph-page { max-width: 720px; margin: 0 auto; padding: 0 16px calc(30px + env(safe-area-inset-bottom)); }
.ph-head { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: calc(58px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); margin: 0 -16px 6px; padding-left: 10px; padding-right: 10px; border-bottom: 1px solid var(--line); background: rgba(var(--bg-rgb), .94); backdrop-filter: blur(10px); }
.ph-head b { text-align: center; font: 600 19px/1.2 var(--serif, Fraunces, serif); }
.ph-hint { margin: 8px 2px 12px; }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ph-grid > .loader { grid-column: 1 / -1; }
.ph-tile { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--surface-2, rgba(127, 127, 127, .12)); border: 1px solid var(--line); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ph-tile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ph-tile.is-dragging { opacity: .25; }
.ph-ghost { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .6); }
.ph-wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 8px; text-align: center; color: var(--muted); font-size: 12px; font-weight: 700; }
.ph-wait .ico { width: 24px; height: 24px; }
.ph-main, .ph-num { position: absolute; left: 6px; bottom: 6px; padding: 3px 8px; border-radius: 99px; font-size: 11px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .5); }
.ph-main { background: var(--grad); }
.ph-del { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 0; color: #fff; background: rgba(0, 0, 0, .55); cursor: pointer; }
.ph-del .ico { width: 16px; height: 16px; }
.ph-add { display: grid; place-content: center; justify-items: center; gap: 4px; border: 2px dashed var(--line-2); background: transparent; color: var(--rose); font-weight: 800; cursor: pointer; touch-action: manipulation; }
.ph-add .ico { width: 30px; height: 30px; }
.ph-add.is-loading { opacity: .5; pointer-events: none; }
.ph-albums { margin-top: 30px; }
.ph-albums h3 { margin: 0 0 4px; font: 600 20px/1.2 var(--serif, Fraunces, serif); }
.ph-albums > p { margin: 0 0 12px; }
.ph-album { border: 1px solid var(--line); border-radius: 16px; margin-bottom: 10px; overflow: hidden; background: var(--surface-solid); }
.ph-album-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; }
.ph-album-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; padding: 0; }
.ph-album-open img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex: none; }
.ph-album-open span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ph-album-open b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-album-open > .ico { width: 18px; height: 18px; color: var(--muted); transition: transform .2s; }
.ph-album.is-open .ph-album-open > .ico { transform: rotate(180deg); }
.ph-switch { margin: 0; }
.ph-album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 8px 8px; }
.ph-album-grid[hidden] { display: none; }
.ph-album-grid .media-tile { aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 0; padding: 0; }
.ph-album-grid .media-tile img { width: 100%; height: 100%; object-fit: cover; }

/* Appli : Activité — les 3 onglets tiennent sur l'écran (icône au-dessus du texte), sans glisser */
body.is-app .ptabs-links { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
body.is-app .ptabs-links a { flex-direction: column; gap: 3px; height: auto; min-height: 58px; padding: 8px 4px; font-size: 12.5px; line-height: 1.15; white-space: normal; text-align: center; }
body.is-app .ptabs-links .ico { width: 20px; height: 20px; }

/* Appli : ⋯ (signaler / bloquer) en haut à droite des cartes de l'accueil */
.dk-menu { position: absolute; top: 20px; right: 12px; z-index: 5; }
.dk-menu-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; color: #fff; background: rgba(0, 0, 0, .42); backdrop-filter: blur(8px); cursor: pointer; }
.dk-menu-btn .ico { width: 20px; height: 20px; }
.dk-menu .menu-pop { right: 0; left: auto; }
.dk-badges { right: 60px; }

/* Appli : les filtres (accueil, recherche, dispos) prennent toute la page, sans animation */
body.is-app .modal.modal-page { padding: 0; place-items: stretch; background: var(--bg, #0d090e); backdrop-filter: none; animation: none; }
body.is-app .modal.modal-page .modal-card { max-width: none; width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; border: 0; box-shadow: none; animation: none; }
body.is-app .modal.modal-page .modal-head { padding-top: calc(16px + env(safe-area-inset-top)); border-bottom: 1px solid var(--line); }
body.is-app .modal.modal-page .modal-body { flex: 1; padding-top: 16px; }
body.is-app .modal.modal-page .modal-foot { border-radius: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }

/* Appli : en-tête = Premium à gauche (si pas abonné) · logo au milieu · thème à droite (plus de notifications) */
body.app.is-app .topbar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; }
body.app.is-app .topbar .top-actions { display: contents; }
body.app.is-app .topbar .notif-menu { display: none; }
body.app.is-app .topbar > :first-child { grid-column: 2; grid-row: 1; justify-self: center; }
body.app.is-app .topbar .premium-top { grid-column: 1; grid-row: 1; justify-self: start; width: 40px; padding: 0; justify-content: center; }
body.app.is-app .topbar [data-theme-toggle] { grid-column: 3; grid-row: 1; justify-self: end; }

/* Appli : boutons de l'accueil — ✕ · 💬 au milieu (en grand, pour donner envie d'écrire) · ♥ à droite */
.deck-actions .deck-btn.is-like, .deck-sheet-foot .deck-btn.is-like { width: 58px; height: 58px; }
.deck-actions .deck-btn.is-like .ico, .deck-sheet-foot .deck-btn.is-like .ico { width: 26px; height: 26px; }
.deck-actions .deck-btn.is-chat, .deck-sheet-foot .deck-btn.is-chat { width: 72px; height: 72px; color: #fff; background: linear-gradient(135deg, #60a5fa, #2563eb); box-shadow: 0 14px 30px -10px rgba(37, 99, 235, .75); }
.deck-actions .deck-btn.is-chat .ico, .deck-sheet-foot .deck-btn.is-chat .ico { width: 32px; height: 32px; }

/* Appli : écran « MATCH » façon Happn (sa photo en plein écran) */
.deck-match { padding: 0; place-items: stretch; background: #0d090e; backdrop-filter: none; }
.dm-photo { position: absolute; inset: 0; overflow: hidden; }
.dm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-photo .dk-letter { position: absolute; inset: 0; }
.dm-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .25), transparent 30%, rgba(13, 9, 14, .55) 55%, rgba(13, 9, 14, .96) 82%); }
.dm-close { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 14px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; color: #fff; background: rgba(0, 0, 0, .45); backdrop-filter: blur(8px); cursor: pointer; }
.dm-close .ico { width: 22px; height: 22px; }
.dm-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 12px; padding: 0 24px calc(26px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; text-align: center; color: #fff; }
.dm-word { margin: 0; font: 900 64px/1 Manrope, sans-serif; letter-spacing: .08em; background: linear-gradient(135deg, #ff8fb5, #ff4f8a 45%, #e9bd74); -webkit-background-clip: text; background-clip: text; color: transparent; animation: heartPop .6s var(--ease); }
.dm-txt { margin: 0 0 8px; font-size: 16px; font-weight: 600; opacity: .92; }
.dm-talk { height: 54px; font-size: 16px; }
.dm-see { height: 50px; color: #fff; border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); }
.dm-talk[hidden] { display: none; }
.dm-later { border: 0; background: none; color: rgba(255, 255, 255, .7); font-weight: 700; padding: 8px; cursor: pointer; }

/* Appli : match dans la liste des conversations */
.conv.is-match small { color: var(--rose); font-weight: 700; }
.msg-hint.is-match { margin: 30px auto 10px; max-width: 300px; padding: 16px 18px; border-radius: 18px; text-transform: none; letter-spacing: 0; font-size: 15px; line-height: 1.45; font-weight: 700; color: var(--rose); text-align: center; background: rgba(255, 79, 138, .08); border: 1px solid rgba(255, 79, 138, .25); }

/* ===================== Appli : Recherche en catalogue ===================== */
.cat-head { position: sticky; top: calc(var(--topbar, 58px) + env(safe-area-inset-top)); z-index: 15; display: flex; align-items: center; gap: 8px; margin: -14px calc(-1 * clamp(12px, 3vw, 28px)) 14px; padding: 10px clamp(12px, 3vw, 28px); background: rgba(var(--bg-rgb), .92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.cat-where { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cat-where b { display: flex; align-items: center; gap: 5px; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-where b .ico { width: 16px; height: 16px; color: var(--rose); flex: none; }
.cat-where small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-chip { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--line-2); font-size: 13px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.cat-chip .dot-online { position: static; width: 8px; height: 8px; border: 0; }
.cat-chip.is-on { color: #fff; background: linear-gradient(135deg, #10b981, #059669); border-color: transparent; }
.cat-chip.is-on .dot-online { background: #fff; }
.cat-filter { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface-solid); color: var(--text); cursor: pointer; }
.cat-filter .ico { width: 20px; height: 20px; }
.cat-filter .badge { position: absolute; top: -4px; right: -4px; }
.catalog { display: grid; gap: 18px; max-width: 560px; margin: 0 auto; }
.cat-card { border-radius: 24px; overflow: hidden; background: var(--surface-solid); border: 1px solid var(--line); box-shadow: 0 14px 34px -20px rgba(0, 0, 0, .55); }
.cat-photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #120b14; color: #fff; }
.cat-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-photo .dk-letter { position: absolute; inset: 0; }
.cat-photo::after { content: ''; position: absolute; inset: auto 0 0 0; height: 48%; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); pointer-events: none; }
.cat-top { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 2; display: flex; justify-content: space-between; align-items: center; }
.cat-count { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; background: rgba(0, 0, 0, .45); backdrop-filter: blur(6px); }
.cat-count .ico { width: 14px; height: 14px; }
.cat-name { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.cat-name b { font: 600 27px/1.1 var(--serif, Fraunces, serif); }
.cat-name > span { font-size: 18px; font-weight: 600; opacity: .92; }
.cat-name small { flex-basis: 100%; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 13px; opacity: .92; }
.cat-name small .ico { width: 13px; height: 13px; }
.cat-body { display: grid; gap: 10px; padding: 14px 16px 16px; }
.cat-bio { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.cat-body .tags { margin: 0; }
.cat-body .tag.is-common { border-color: var(--rose); color: var(--rose); background: rgba(255, 79, 138, .1); }
.cat-actions { display: grid; grid-template-columns: 52px 1fr; gap: 10px; margin-top: 2px; }
.cat-btn { display: grid; place-items: center; height: 48px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface-solid); color: var(--rose); cursor: pointer; }
.cat-btn .ico { width: 24px; height: 24px; }
.cat-like.is-on { color: #fff; background: var(--grad); border-color: transparent; }
.cat-like.is-on .ico { fill: currentColor; }
.cat-write { height: 48px; border-radius: 16px; justify-content: center; }

/* Appli : filtres avancés réservés aux abonnés */
.filter-block.is-locked .chips, .switch.is-locked > i { opacity: .45; pointer-events: none; filter: grayscale(.4); }
.flt-lock { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 800; text-transform: none; letter-spacing: 0; color: #2a1a0a; background: var(--grad-gold); vertical-align: middle; }
.flt-lock .ico { width: 12px; height: 12px; }
.cat-chip .ico { width: 13px; height: 13px; }

/* Appli : Recherche sans abonnement — 3 profils puis flouté */
.cat-wall { display: grid; justify-items: center; gap: 8px; padding: 22px 20px; border-radius: 24px; text-align: center; background: linear-gradient(160deg, rgba(233, 189, 116, .16), rgba(255, 79, 138, .1)); border: 1px solid rgba(233, 189, 116, .45); }
.cat-wall-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: #2a1a0a; background: var(--grad-gold); }
.cat-wall-ico .ico { width: 26px; height: 26px; }
.cat-wall h3 { margin: 4px 0 0; font: 600 21px/1.2 var(--serif, Fraunces, serif); }
.cat-wall p { margin: 0 0 6px; color: var(--text-2); font-size: 14px; }
.cat-locked .cat-photo { aspect-ratio: 4 / 4.2; }
.cat-locked .cat-blur { transform: scale(1.08); filter: blur(4px) saturate(1.1); }
.cat-lock { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .45); backdrop-filter: blur(6px); }
.cat-lock .ico { width: 26px; height: 26px; }
.cat-hidden { letter-spacing: .12em; filter: blur(3px); }
.cat-name .txt-online { color: #4ade80; font-weight: 700; }

/* Appli : écran de maintenance */
body.maint-app { margin: 0; min-height: 100vh; min-height: 100dvh; background: radial-gradient(120% 80% at 50% 0%, #ff0090 0%, #b0126e 45%, #3a0d26 100%); color: #fff; font-family: Manrope, system-ui, sans-serif; overflow: hidden; }
.ma-screen { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 14px; padding: calc(30px + env(safe-area-inset-top)) 28px calc(30px + env(safe-area-inset-bottom)); text-align: center; }
.ma-glow { position: absolute; width: 520px; height: 520px; left: 50%; top: 38%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(rgba(255, 255, 255, .22), transparent 65%); animation: maGlow 3.5s ease-in-out infinite; pointer-events: none; }
@keyframes maGlow { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: .7; } }
.ma-logo { position: relative; width: 116px; height: 116px; margin-bottom: 10px; }
.ma-logo img { width: 100%; height: 100%; border-radius: 30px; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .6), 0 0 0 4px rgba(255, 255, 255, .18); }
.ma-gear { position: absolute; right: -14px; bottom: -14px; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: #b0126e; background: #fff; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5); }
.ma-gear .ico { width: 28px; height: 28px; animation: maSpin 4s linear infinite; }
@keyframes maSpin { to { transform: rotate(360deg); } }
.ma-screen h1 { margin: 0; font: 600 30px/1.15 Fraunces, serif; }
.ma-screen p { margin: 0; max-width: 340px; font-size: 16px; line-height: 1.5; opacity: .92; }
.ma-dots { display: flex; gap: 8px; margin: 6px 0 10px; }
.ma-dots i { width: 9px; height: 9px; border-radius: 50%; background: #fff; opacity: .35; animation: maDot 1.2s ease-in-out infinite; }
.ma-dots i:nth-child(2) { animation-delay: .2s; } .ma-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes maDot { 40% { opacity: 1; transform: translateY(-5px); } }
.ma-retry { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 30px; border-radius: 99px; background: #fff; color: #b0126e; font-weight: 800; font-size: 16px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55); }
.ma-retry .ico { width: 18px; height: 18px; }
.ma-team { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left: 0; right: 0; font-size: 12.5px; color: rgba(255, 255, 255, .55); }

/* Appli : compteur de coups de cœur (sans abonnement) */
.deck-head { gap: 8px; }
.deck-likes { display: inline-flex; align-items: center; gap: 5px; height: 36px; margin-left: auto; padding: 0 12px; border-radius: 99px; border: 1px solid rgba(255, 79, 138, .35); background: rgba(255, 79, 138, .08); color: var(--rose); font-weight: 800; font-size: 14px; }
.deck-likes .ico { width: 16px; height: 16px; fill: currentColor; }
.deck-likes small { opacity: .7; font-weight: 700; }
.deck-likes.is-empty { color: #2a1a0a; background: var(--grad-gold); border-color: transparent; }
.deck-limit { position: fixed; inset: 0; z-index: 125; display: grid; place-items: end center; background: rgba(8, 4, 10, .6); backdrop-filter: blur(6px); }
.deck-limit[hidden] { display: none; }
.dl-card { width: min(520px, 100%); display: grid; justify-items: center; gap: 10px; padding: 26px 22px calc(22px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; text-align: center; background: var(--surface-solid); animation: sheetUp .28s var(--ease); }
.dl-heart { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; color: #fff; background: var(--grad); box-shadow: 0 14px 30px -10px rgba(255, 79, 138, .7); }
.dl-heart .ico { width: 34px; height: 34px; fill: currentColor; }
.dl-card h2 { margin: 4px 0 0; font: 600 22px/1.2 var(--serif, Fraunces, serif); }
.dl-card p { margin: 0; font-size: 14.5px; }
.dl-timer { font-weight: 800; color: var(--rose); font-variant-numeric: tabular-nums; margin: 4px 0 8px !important; }

/* Appli : profil = un seul bouton « Écrire » (les coups de cœur se donnent sur l'accueil) */
.cat-actions { grid-template-columns: 1fr; }
.ap-actions { padding-left: 20px; padding-right: 20px; }
.ap-write { width: min(440px, 100%); height: 56px; border-radius: 18px; justify-content: center; font-size: 16px; }
.ap-write.is-off { opacity: .6; }

/* Annonce de l'équipe (une seule fois) */
.ann { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: rgba(8, 4, 10, .65); backdrop-filter: blur(8px); animation: fadeIn .25s; }
.ann.is-out { opacity: 0; transition: opacity .2s; }
.ann-card { position: relative; width: min(420px, 100%); display: grid; justify-items: center; gap: 10px; padding: 30px 24px 22px; border-radius: 28px; text-align: center; background: var(--surface-solid); border: 1px solid var(--line-2); box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .7); overflow: hidden; }
.ann .ann-card { animation: modalIn .45s var(--ease); }
.ann-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 120px; background: radial-gradient(80% 100% at 50% 0%, rgba(255, 79, 138, .25), transparent); pointer-events: none; }
.ann-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(var(--ink), .06); color: var(--text-2); cursor: pointer; }
.ann-x .ico { width: 18px; height: 18px; }
.ann-ico { position: relative; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 22px; color: #fff; background: var(--grad); box-shadow: 0 16px 34px -12px rgba(255, 79, 138, .75); }
.ann-ico .ico { width: 32px; height: 32px; }
.ann-from { margin: 4px 0 0; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rose); }
.ann-card h2 { margin: 0; font: 600 24px/1.2 var(--serif, Fraunces, serif); }
.ann-body { margin: 0 0 8px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
/* au milieu de l'écran, comme une pop-up (site et appli) ; couleur ou logo au choix */
.ann-ico.has-color { background: linear-gradient(135deg, var(--ann), color-mix(in srgb, var(--ann) 65%, #000)); box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--ann) 70%, transparent); }
.ann-ico.ann-img { padding: 0; overflow: hidden; background: var(--surface-2, #eee); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .45); }
.ann-ico.ann-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Pages légales */
.legal { position: relative; z-index: 1; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; max-width: 1080px; margin: 0 auto; padding: 30px 20px 60px; align-items: start; }
.legal-nav { position: sticky; top: 90px; display: grid; gap: 4px; padding: 10px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.legal-nav a { padding: 10px 14px; border-radius: 12px; font-weight: 700; font-size: 14px; color: var(--text-2); }
.legal-nav a.is-on { background: var(--grad); color: #fff; }
.legal-doc { padding: 30px 34px; border-radius: 24px; background: var(--surface-solid); border: 1px solid var(--line); line-height: 1.65; font-size: 15.5px; }
.legal-doc h1 { margin: 0 0 4px; font: 600 32px/1.15 var(--serif, Fraunces, serif); }
.legal-doc h2 { margin: 28px 0 8px; font: 700 17px/1.3 var(--font, Manrope, sans-serif); color: var(--text); }
.legal-doc p, .legal-doc li { color: var(--text-2); }
.legal-doc ul { padding-left: 20px; display: grid; gap: 6px; }
.legal-doc a { color: var(--rose); font-weight: 700; }
.legal-todo { padding: 1px 6px; border-radius: 6px; background: rgba(234, 88, 12, .15); color: #c2410c; font-weight: 700; }
@media (max-width: 820px) {
    .legal { grid-template-columns: 1fr; padding: 16px 14px 40px; gap: 14px; }
    .legal-nav { position: static; display: flex; overflow-x: auto; scrollbar-width: none; }
    .legal-nav a { white-space: nowrap; }
    .legal-doc { padding: 22px 18px; font-size: 15px; }
    .legal-doc h1 { font-size: 26px; }
}
body.is-app .legal { padding-top: 10px; }
/* S'abonner : accepter les CGV */
.cgv-check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-size: 13.5px; text-align: left; color: var(--text-2); }
.cgv-check a { color: var(--rose); font-weight: 700; }
.cgv-check.is-shake { animation: cgvShake .4s; }
@keyframes cgvShake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* =====================================================================
   CERTIFICATION DES PROFILS
   ===================================================================== */
.cert-badge { display: inline-flex; width: 1.05em; height: 1.05em; color: #2f8cff; vertical-align: -0.12em; margin-left: .28em; flex: none; }
.cert-badge svg { width: 100%; height: 100%; display: block; }
.cert-badge-xl { width: 54px; height: 54px; margin: 0; filter: drop-shadow(0 6px 16px rgba(47, 140, 255, .35)); }
.cert-page { max-width: 640px; margin: 0 auto; padding: 8px 0 40px; }
body.cert-qr .cert-page { padding: 24px 16px 40px; }
.cert-card { display: grid; gap: 18px; padding: 24px; }
.cert-head { display: flex; gap: 16px; align-items: center; }
.cert-head h1 { font-size: 28px; margin: 0 0 4px; }
.cert-head p { margin: 0; }
.cert-state { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); }
.cert-state > .ico { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.cert-state p { margin: 4px 0 0; color: var(--text-2); }
.cert-state .btn { margin-top: 10px; }
.cert-state.is-ok { background: rgba(47, 140, 255, .08); border-color: rgba(47, 140, 255, .3); }
.cert-state.is-ok > .ico { color: #2f8cff; }
.cert-state.is-wait { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .3); }
.cert-state.is-wait > .ico { color: #d97706; }
.cert-state.is-off { background: rgba(255, 79, 138, .07); border-color: rgba(255, 79, 138, .28); }
.cert-state.is-off > .ico { color: var(--rose); }
.cert-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: cs; }
.cert-steps li { display: grid; gap: 2px; padding-left: 44px; position: relative; counter-increment: cs; }
.cert-steps li::before { content: counter(cs); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #2f8cff, #6b5bff); }
.cert-steps span { color: var(--text-2); font-size: 14px; line-height: 1.45; }
.cert-gesture { display: flex; gap: 16px; align-items: center; padding: 14px 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(47, 140, 255, .1), rgba(107, 91, 255, .1)); border: 1px solid rgba(47, 140, 255, .3); }
.cert-gesture > div { display: grid; gap: 2px; }
.cert-gesture small { color: var(--text-2); }
.cert-gesture b { font-size: 18px; }
.cert-emoji { font-size: 54px; line-height: 1; flex: none; }
.cert-emoji.is-left { transform: scaleX(-1); }
.cert-cam { position: relative; aspect-ratio: 3 / 4; max-height: 62vh; width: 100%; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #120c14; display: grid; place-items: center; }
.cert-cam video, .cert-cam img { width: 100%; height: 100%; object-fit: cover; }
.cert-cam video { transform: scaleX(-1); }
.cert-cam-empty { display: grid; gap: 10px; justify-items: center; text-align: center; color: #cdb9c4; padding: 24px; font-size: 14px; }
.cert-cam-empty .ico { width: 40px; height: 40px; opacity: .7; }
.cert-oval { position: absolute; left: 50%; top: 46%; width: 58%; aspect-ratio: 3 / 4; transform: translate(-50%, -50%); border: 3px dashed rgba(255, 255, 255, .55); border-radius: 50%; pointer-events: none; }
.cert-actions { display: grid; gap: 10px; }
.cert-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cert-consent { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.cert-qr-box { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 16px; border: 1px dashed var(--line-2); transition: box-shadow .3s, border-color .3s; }
.cert-qr-box.is-hl { border-color: #2f8cff; box-shadow: 0 0 0 4px rgba(47, 140, 255, .18); }
.cert-qr-box p { margin: 4px 0 0; }
.cert-qr { width: 132px; height: 132px; flex: none; background: #fff; border-radius: 10px; padding: 4px; }
.cert-qr svg { width: 100%; height: 100%; display: block; }
@media (pointer: coarse) { .cert-qr-box { display: none; } }
@media (max-width: 520px) { .cert-card { padding: 18px 16px; } .cert-head h1 { font-size: 23px; } .cert-badge-xl { width: 44px; height: 44px; } }
.profile-names h1 .cert-badge { width: .72em; height: .72em; }