or: var(–or);
font-size: 9px;
border: 1px solid var(–or);
padding: 2px 6px;
border-radius: 10px;
z-index: 3;
}

/* Grille profils principale */
.profiles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 32px;
}

/* Concours carrousel */
.concours-carousel {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px;
margin-bottom: 32px;
}
.concours-card {
background: var(–noir-3);
border: 1px solid var(–or-border);
border-radius: 8px;
padding: 18px;
cursor: pointer;
transition: all .3s;
position: relative;
overflow: hidden;
}
.concours-card::before {
content:  »;
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(–or), transparent);
}
.concours-card:hover {
border-color: var(–or);
box-shadow: 0 0 20px var(–or-dim);
transform: translateY(-2px);
}
.concours-card-theme {
font-family: var(–serif);
font-size: 16px;
color: var(–or);
margin-bottom: 6px;
}
.concours-card-info {
font-size: 11px;
color: var(–blanc-dim);
display: flex;
flex-direction: column;
gap: 3px;
}

/* ChatBot */
.chatbot-widget {
background: var(–noir-3);
border: 1px solid var(–or-border);
border-radius: 8px;
padding: 18px;
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 24px;
}
.chatbot-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(–or-dim), var(–noir-4));
border: 1px solid var(–or-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.chatbot-bubble {
flex: 1;
}
.chatbot-name {
font-size: 10px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(–or);
margin-bottom: 5px;
}
.chatbot-msg {
font-size: 12px;
color: var(–blanc-dim);
font-style: italic;
}
.chatbot-input {
display: flex;
margin-top: 10px;
gap: 8px;
}
.chatbot-input input {
flex: 1;
background: var(–blanc-soft);
border: 1px solid var(–or-border);
border-radius: 4px;
padding: 8px 12px;
font-size: 12px;
color: var(–blanc);
font-family: var(–sans);
outline: none;
transition: border-color .25s;
}
.chatbot-input input:focus { border-color: var(–or); }
.chatbot-input button {
background: var(–or);
color: var(–noir);
border: none;
border-radius: 4px;
padding: 8px 14px;
font-size: 11px;
font-weight: 600;
}

/* ════════════════════════════════
SIDEBAR DROITE
════════════════════════════════ */
.sidebar-right {
position: sticky;
top: var(–nav-h);
height: calc(100vh – var(–nav-h));
overflow-y: auto;
background: var(–noir-2);
border-left: 1px solid var(–or-border);
padding: 24px 16px;
}
.sidebar-right::-webkit-scrollbar { width: 2px; }

/* Onglets tchat/visites/kiss */
.right-tabs {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2px;
background: var(–noir-3);
border-radius: 8px;
padding: 3px;
margin-bottom: 20px;
border: 1px solid var(–or-border);
}
.right-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 8px 4px;
border-radius: 6px;
cursor: pointer;
transition: all .22s;
font-size: 8px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(–blanc-dim);
}
.right-tab .tab-icon { font-size: 16px; }
.right-tab.active,
.right-tab:hover {
background: var(–or-dim);
color: var(–or);
}

/* Liste conversations */
.conv-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.conv-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 6px;
cursor: pointer;
transition: all .22s;
border: 1px solid transparent;
}
.conv-item:hover {
background: var(–blanc-soft);
border-color: var(–or-border);
}
.conv-avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: var(–noir-4);
border: 1px solid var(–or-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
position: relative;
}
.conv-avatar .online-dot {
position: absolute;
bottom: 0; right: 0;
width: 9px; height: 9px;
background: #2ECC71;
border-radius: 50%;
border: 1.5px solid var(–noir-2);
}
.conv-info { flex: 1; min-width: 0; }
.conv-pseudo {
font-size: 12px;
font-weight: 500;
color: var(–blanc);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.conv-flag {
font-size: 11px;
margin-right: 4px;
}
.conv-preview {
font-size: 10px;
color: var(–blanc-dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.conv-unread {
background: var(–or);
color: var(–noir);
font-size: 9px;
font-weight: 700;
border-radius: 10px;
padding: 1px 6px;
flex-shrink: 0;
}

/* Profils visiteurs/kiss */
.visitors-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.visitor-card {
background: var(–noir-3);
border: 1px solid var(–or-border);
border-radius: 6px;
padding: 10px;
text-align: center;
cursor: pointer;
transition: all .25s;
position: relative;
overflow: hidden;
}
.visitor-card:hover {
border-color: var(–or);
box-shadow: 0 0 14px var(–or-dim);
transform: translateY(-2px);
}
.visitor-card.online::before {
content:  »;
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(–or), transparent);
animation: glow-line 2s infinite;
}
.visitor-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: var(–noir-4);
border: 1px solid var(–or-border);
margin: 0 auto 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.visitor-pseudo {
font-size: 11px;
font-family: var(–serif);
color: var(–or);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.visitor-meta {
font-size: 9px;
color: var(–blanc-dim);
margin-top: 2px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}

/* Messages non lus */
.unread-section {
background: var(–or-dim);
border: 1px solid var(–or-border);
border-radius: 6px;
padding: 10px 12px;
margin-bottom: 12px;
font-size: 11px;
color: var(–or);
display: flex;
align-items: center;
gap: 8px;
}

/* ════════════════════════════════
MODAL PROFIL COMPLET
════════════════════════════════ */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(13,13,13,0.92);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: opacity .4s;
backdrop-filter: blur(10px);
}
.modal-overlay.open {
opacity: 1;
pointer-events: all;
}
.modal {
width: 100%;
max-width: 860px;
max-height: 90vh;
background: var(–noir-2);
border: 1px solid var(–or-border);
border-radius: 12px;
overflow-y: auto;
position: relative;
transform: scale(0.95);
transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.modal-overlay.open .modal { transform: scale(1); }
.modal::-webkit-scrollbar { width: 2px; }

.modal-close {
position: absolute;
top: 16px; right: 16px;
width: 32px; height: 32px;
border-radius: 50%;
background: var(–blanc-soft);
border: 1px solid var(–or-border);
color: var(–blanc);
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all .2s;
}
.modal-close:hover { background: var(–or-dim); color: var(–or); }

/* Header profil */
.profil-header {
position: relative;
height: 200px;
background: linear-gradient(160deg, #1a1a1a 0%, #0d0d0d 100%);
overflow: hidden;
}
.profil-header-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(198,167,94,0.05) 0%, transparent 60%);
}
.profil-header-line {
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(–or), transparent);
animation: glow-line 2s infinite;
}
.profil-avatar-large {
position: absolute;
bottom: -40px; left: 32px;
width: 100px; height: 100px;
border-radius: 50%;
border: 3px solid var(–or);
background: var(–noir-3);
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
box-shadow: 0 0 30px var(–or-dim), 0 0 60px rgba(0,0,0,0.5);
}
.profil-badges {
position: absolute;
top: 16px; left: 16px;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.badge {
font-size: 9px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 20px;
}
.badge-or { background: var(–or); color: var(–noir); }
.badge-outline { border: 1px solid var(–or); color: var(–or); }

.profil-body { padding: 56px 32px 32px; }

.profil-identite {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 12px;
}
.profil-name {
font-family: var(–serif);
font-size: 28px;
color: var(–blanc);
font-weight: 500;
}
.profil-name .role-tag {
font-size: 13px;
color: var(–or);
font-style: italic;
margin-left: 10px;
}
.profil-location {
font-size: 12px;
color: var(–blanc-dim);
margin-top: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.profil-pensee {
font-style: italic;
font-size: 13px;
color: var(–or);
font-family: var(–serif);
margin-top: 4px;
}
.profil-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-profil {
font-size: 10px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 9px 20px;
border-radius: 4px;
border: 1px solid var(–or-border);
background: transparent;
color: var(–or);
transition: all .3s;
cursor: pointer;
}
.btn-profil:hover { background: var(–or-dim); }
.btn-profil.primary {
background: linear-gradient(135deg, var(–or-light), var(–or));
color: var(–noir);
border-color: var(–or);
font-weight: 700;
}
.btn-profil.primary:hover { box-shadow: 0 4px 20px var(–or-glow); }

/* Infos physiques */
.profil-grid-infos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
margin-bottom: 24px;
}
.info-chip {
background: var(–blanc-soft);
border: 1px solid var(–or-dim);
border-radius: 6px;
padding: 10px 12px;
}
.info-chip-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(–or);
margin-bottom: 4px;
}
.info-chip-value {
font-size: 13px;
color: var(–blanc);
}

/* Tags pratiques */
.tags-section { margin-bottom: 24px; }
.tags-title {
font-family: var(–serif);
font-size: 18px;
color: var(–or);
margin-bottom: 12px;
font-style: italic;
}
.tags-wrap { display: flex; flex-wrap: wrap; gap: 7px; }
.tag {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.5px;
padding: 4px 12px;
border-radius: 20px;
background: var(–blanc-soft);
border: 1px solid var(–or-border);
color: var(–blanc-dim);
cursor: default;
transition: all .2s;
}
.tag:hover { border-color: var(–or); color: var(–or); }

.sig-title{font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#FFFFFF;margin:14px 0 12px;padding-bottom:8px;border-bottom:1px solid var(–or-border);}
.sig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 20px;margin-bottom:22px;}
.sig-item{font-size:12px;color:#FFFFFF;font-weight:300;}
.sig-item span{font-weight:500;}
@media(max-width:600px){.sig-grid{grid-template-columns:repeat(2,1fr);}}
/* Galerie */
.galerie-section { margin-bottom: 24px; }
.galerie-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.galerie-item {
aspect-ratio: 1;
background: var(–noir-4);
border: 1px solid var(–or-dim);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: var(–or);
opacity: 0.3;
cursor: pointer;
transition: all .3s;
overflow: hidden;
}
.galerie-item:hover { opacity: 0.6; border-color: var(–or); }
.galerie-prive {
position: relative;
}
.galerie-prive-lock {
position: absolute;
inset: 0;
background: rgba(13,13,13,0.7);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
border-radius: 6px;
}

/* ════════════════════════════════
SCROLL VERTICAL GLOBAL
════════════════════════════════ */
html, body {
height: 100%;
overflow-x: hidden;
}
.layout {
overflow-y: visible;
}
.main-feed {
overflow-y: auto;
scroll-behavior: smooth;
}
.sidebar-left,
.sidebar-right {
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(–or) var(–noir-2);
}

/* ════════════════════════════════
BURGER MOBILE
════════════════════════════════ */
.nav-burger {
display: none;
flex-direction: column;
gap: 5px;
background: transparent;
border: 1px solid var(–or-border);
border-radius: 6px;
padding: 8px 10px;
cursor: pointer;
}
.nav-burger span {
display: block;
width: 20px;
height: 2px;
background: var(–or);
border-radius: 2px;
transition: all .3s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu mobile déroulant */
.mobile-menu {
display: none;
position: fixed;
top: var(–nav-h);
left: 0; right: 0;
z-index: 999;
background: rgba(13,13,13,0.98);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(–or-border);
padding: 12px 0;
transform: translateY(-10px);
opacity: 0;
transition: all .3s cubic-bezier(.16,1,.3,1);
pointer-events: none;
}
.mobile-menu.open {
transform: translateY(0);
opacity: 1;
pointer-events: all;
display: block;
}
.mobile-menu ul { list-style: none; }
.mobile-menu ul li a {
display: block;
padding: 12px 24px;
font-size: 13px;
font-weight: 500;
color: var(–blanc-dim);
letter-spacing: 0.5px;
transition: all .2s;
border-left: 2px solid transparent;
}
.mobile-menu ul li a:hover {
color: var(–or);
background: var(–blanc-soft);
border-left-color: var(–or);
}
.mobile-menu .divider {
height: 1px;
background: var(–or-border);
margin: 8px 24px;
}

/* Navigation inférieure mobile */
.mobile-bottom-nav {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 900;
background: rgba(13,13,13,0.98);
backdrop-filter: blur(20px);
border-top: 1px solid var(–or-border);
padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
justify-content: space-around;
align-items: center;
}
.mobile-bottom-nav a {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
color: var(–blanc-dim);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 8px;
transition: all .2s;
min-width: 48px;
text-align: center;
position: relative;
}
.mobile-bottom-nav a .bnav-icon { font-size: 18px; line-height: 1; }
.mobile-bottom-nav a.active,
.mobile-bottom-nav a:hover { color: var(–or); }
.mobile-bottom-nav a .bnav-badge {
position: absolute;
top: 0; right: 4px;
background: var(–or);
color: var(–noir);
font-size: 8px;
font-weight: 700;
border-radius: 8px;
padding: 1px 5px;
min-width: 14px;
text-align: center;
}

/* ════════════════════════════════
RESPONSIVE — TABLETTE
════════════════════════════════ */
@media (max-width: 1100px) {
:root { –right-w: 220px; –left-w: 200px; }
}

/* ════════════════════════════════
RESPONSIVE — MOBILE
════════════════════════════════ */
@media (max-width: 768px) {
:root { –nav-h: 56px; }

.nav {
padding: 0 16px;
justify-content: space-between;
}
.nav-links { display: none; }
.nav-burger { display: flex; }
.nav-logo-text { display: none; }
.nav-logo img { height: 38px; width: 38px; }

.layout {
grid-template-columns: 1fr;
margin-top: var(–nav-h);
}
.sidebar-left,
.sidebar-right {
display: none;
}

.main-feed {
padding: 16px;
padding-bottom: 80px; /* espace nav bas */
min-height: calc(100vh – var(–nav-h));
overflow-y: auto;
}

.feed-title { font-size: 22px; }

.profiles-carousel {
grid-template-columns: repeat(2, 1fr);
}
.profiles-grid {
grid-template-columns: repeat(2, 1fr);
}
.concours-carousel {
grid-template-columns: 1fr;
}

.profile-card-overlay {
transform: translateY(0);
background: linear-gradient(to top, rgba(13,13,13,0.95) 0%, transparent 100%);
}

.chatbot-widget { flex-direction: column; }

/* Modal mobile */
.modal {
max-height: 95vh;
border-radius: 12px 12px 0 0;
}
.modal-overlay {
align-items: flex-end;
padding: 0;
}
.profil-body { padding: 48px 20px 24px; }
.profil-grid-infos { grid-template-columns: repeat(2, 1fr); }
.galerie-grid { grid-template-columns: repeat(3, 1fr); }
.profil-identite { flex-direction: column; }

/* Nav bas mobile */
.mobile-bottom-nav { display: flex; }
}

@media (max-width: 400px) {
.profiles-carousel,
.profiles-grid { grid-template-columns: repeat(2, 1fr); }
.feed-title { font-size: 20px; }
}

.media-toggle{position:absolute;bottom:12px;right:14px;display:flex;gap:5px;z-index:10;}
.mtgl{font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;padding:5px 12px;border-radius:20px;border:1px solid rgba(255,255,255,0.25);background:rgba(13,13,13,0.75);color:rgba(255,255,255,0.65);cursor:pointer;transition:all .25s;}
.mtgl:hover{color:#fff;border-color:var(–or);}
.mtgl.act{background:var(–or);color:var(–noir);border-color:var(–or);}
.video-note{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-size:10px;color:rgba(255,255,255,0.55);letter-spacing:1px;background:rgba(0,0,0,0.55);padding:3px 10px;border-radius:10px;white-space:nowrap;}

/* ════ DRAWER PROFIL PROPRIÉTAIRE ════ */
.owner-drawer-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.85);
z-index: 2000;
}
.owner-drawer-overlay.open { display: block; }
.owner-drawer {
position: fixed;
inset: 0;
z-index: 2001;
display: none;
}
.owner-drawer.open { display: block; }
.owner-drawer-close {
position: fixed;
top: 50px;
right: 50px;
z-index: 2002;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(20,20,20,.95);
border: 1px solid rgba(198,167,94,.35);
color: #c6a75e;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s;
line-height: 1;
}
.owner-drawer-close:hover { background: rgba(198,167,94,.15); }
.owner-drawer iframe {
width: 100%;
height: 100%;
border: none;
}

/* ════ CHAT PANEL VOCAL ════ */
.chat-panel {
display: none;
flex-direction: column;
height: calc(100vh – var(–nav-h) – 56px);
}
.chat-panel-header {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid rgba(198,167,94,.12);
flex-shrink: 0;
}
.chat-back-btn {
background: none;
border: none;
color: var(–or);
font-size: 18px;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: background .2s;
}
.chat-back-btn:hover { background: rgba(198,167,94,.1); }
.chat-panel-name {
font-size: 13px;
font-weight: 600;
color: var(–blanc);
flex: 1;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.chat-messages::-webkit-scrollbar { width: 2px; }
.msg-bubble {
max-width: 85%;
padding: 8px 12px;
border-radius: 12px;
font-size: 12px;
line-height: 1.5;
position: relative;
}
.msg-me {
align-self: flex-end;
background: rgba(198,167,94,.15);
border: 1px solid rgba(198,167,94,.2);
border-bottom-right-radius: 3px;
color: var(–blanc);
}
.msg-other {
align-self: flex-start;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.07);
border-bottom-left-radius: 3px;
color: var(–blanc);
}
.msg-time {
font-size: 9px;
color: var(–dim);
margin-top: 4px;
text-align: right;
}
.msg-vocal {
display: flex;
align-items: center;
gap: 8px;
}
.msg-vocal audio {
height: 32px;
max-width: 150px;
border-radius: 20px;
}
.msg-dur {
font-size: 10px;
color: var(–dim);
white-space: nowrap;
}
.chat-input-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-top: 1px solid rgba(198,167,94,.12);
flex-shrink: 0;
}
.chat-text-input {
flex: 1;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 20px;
padding: 7px 12px;
font-size: 12px;
color: var(–blanc);
outline: none;
font-family: var(–sans);
}
.chat-text-input::placeholder { color: var(–dim); }
.chat-send-btn, .rec-btn {
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
transition: all .2s;
flex-shrink: 0;
}
.chat-send-btn {
background: rgba(198,167,94,.2);
color: var(–or);
}
.chat-send-btn:hover { background: rgba(198,167,94,.35); }
.rec-btn {
background: rgba(200,75,114,.15);
color: var(–rose-l);
position: relative;
}
.rec-btn:hover { background: rgba(200,75,114,.3); }
.rec-btn.recording {
background: rgba(200,75,114,.5);
animation: pulse-rec 1s ease-in-out infinite;
}
@keyframes pulse-rec {
0%,100% { box-shadow: 0 0 0 0 rgba(200,75,114,.4); }
50% { box-shadow: 0 0 0 8px rgba(200,75,114,0); }
}
.rec-timer {
display: none;
font-size: 10px;
color: var(–rose-l);
min-width: 24px;
text-align: center;
}
.vocal-quota {
font-size: 9px;
color: var(–dim);
text-align: center;
padding: 4px;
}