/* ========================================================================
   Habillage moderne : fond lumineux, cartes en verre, dégradés rose-violet,
   navigation en barre d'onglets sur téléphone. Aucune police ni image externe.
   ======================================================================== */
:root {
  --bg: #0c0910; --bg2: #140f1c; --panel: rgba(255, 255, 255, 0.045); --panel-solid: #181222;
  --line: rgba(255, 255, 255, 0.1); --text: #f6f1f8; --muted: #a99bb5;
  --rose: #ff4d8d; --violet: #8b5cf6; --ok: #6ee7b7; --err: #ff8a80; --warn: #fbbf24; --info: #60a5fa;
  --grad: linear-gradient(135deg, #ff4d8d 0%, #c24bd6 55%, #8b5cf6 100%);
  --radius: 22px; --tabbar: 4.4rem;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  color: var(--text); min-height: 100vh;
  font: 16px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(60rem 36rem at 85% -10%, rgba(139, 92, 246, 0.22), transparent 60%),
    radial-gradient(48rem 30rem at -10% 10%, rgba(255, 77, 141, 0.18), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
a { color: #ffd0e2; text-underline-offset: 3px; text-decoration-color: rgba(255, 77, 141, 0.6); }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 8px; }
code { background: var(--panel); padding: 0.1rem 0.4rem; border-radius: 8px; font-size: 0.88em; }
img { max-width: 100%; }
.ico { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; vertical-align: -0.28em; }

/* ---------- En-tête ---------- */
.top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1.1rem; background: rgba(12, 9, 16, 0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.logo { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; text-decoration: none; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-right: auto; }
.logoimg { max-height: 2.3rem; width: auto; vertical-align: middle; }
.topnav { display: none; }
.topnav a { text-decoration: none; color: var(--muted); padding: 0.45rem 0.8rem; border-radius: 999px; font-weight: 600; font-size: 0.93rem; }
.topnav a:hover, .topnav a.on { color: #fff; background: var(--panel); }
.topact { display: flex; align-items: center; gap: 0.5rem; }
.iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.iconbtn:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.iconbtn .badge, .tabbar .badge { position: absolute; top: -0.2rem; right: -0.2rem; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; line-height: 1.15rem; text-align: center; font-size: 0.7rem; border: 0; background: var(--grad); color: #fff; }
.guestnav { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.6rem 1.1rem 0; scrollbar-width: none; }
.guestnav::-webkit-scrollbar { display: none; }
.guestnav a { flex: 0 0 auto; text-decoration: none; color: var(--muted); padding: 0.4rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.9rem; font-weight: 600; }
.inline { display: inline; margin: 0; }
button.link { background: none; border: 0; color: var(--text); padding: 0; min-height: 0; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: none; }
button.link:hover { background: none; color: #fff; transform: none; box-shadow: none; }

/* ---------- Barre d'onglets (téléphone) ---------- */
.tabbar { position: fixed; z-index: 45; left: 0.7rem; right: 0.7rem; bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px)); height: var(--tabbar); display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; background: rgba(24, 18, 34, 0.86); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); }
.tabbar > a, .tabbar > details > summary { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; color: var(--muted); text-decoration: none; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; list-style: none; cursor: pointer; height: 100%; border-radius: 22px; }
.tabbar > details > summary::-webkit-details-marker { display: none; }
.tabbar > a.on { color: #fff; }
.tabbar > a.on .ico { color: var(--rose); filter: drop-shadow(0 0 8px rgba(255, 77, 141, 0.7)); }
.tabbar .ico { width: 1.5rem; height: 1.5rem; }
.tabbar .badge { top: 0.5rem; right: calc(50% - 1.5rem); }
.tabbar details { position: static; }
.sheet { position: absolute; left: 0; right: 0; bottom: calc(100% + 0.6rem); background: var(--panel-solid); border: 1px solid var(--line); border-radius: 22px; padding: 0.5rem; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); display: grid; gap: 0.15rem; }
.sheet a, .sheet button { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 0.9rem; border-radius: 14px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.97rem; background: none; border: 0; min-height: 0; width: 100%; text-align: left; box-shadow: none; }
.sheet a:hover, .sheet button:hover { background: var(--panel); transform: none; box-shadow: none; }
.sheet form { margin: 0; display: block; }

/* ---------- Pages ---------- */
.wrap { max-width: 72rem; margin: 0 auto; padding: 1.2rem 1.1rem calc(var(--tabbar) + 3.5rem); }
.narrow { max-width: 30rem; margin: 1rem auto 0; }
.narrow.wide { max-width: 44rem; }
h1 { font-weight: 800; font-size: clamp(1.9rem, 6.5vw, 2.7rem); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 0.8rem; }
h2 { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.015em; margin: 0 0 0.8rem; }
.lede { color: var(--muted); margin: 0 0 1.5rem; font-size: 1.05rem; }
.hint, .meta { color: var(--muted); font-size: 0.86rem; }
.count { color: var(--muted); font-size: 1rem; font-weight: 600; }
.links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1.1rem; font-size: 0.95rem; }
.good { color: var(--ok); } .bad { color: var(--err); }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.scroll { overflow-x: auto; margin-bottom: 1rem; border-radius: 16px; }

/* ---------- Formulaires ---------- */
form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0 0 1rem; }
form.row, .row form { grid-template-columns: none; }
label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; font-size: 0.9rem; color: var(--muted); font-weight: 500; }
label.check { display: flex; gap: 0.6rem; align-items: center; color: var(--text); font-weight: 400; }
input, select, textarea { font: inherit; color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 15px; padding: 0.8rem 1rem; min-height: 50px; min-width: 0; max-width: 100%; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; }
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% - 1.3rem) 55%, calc(100% - 1rem) 55%; background-size: 0.3rem 0.3rem; background-repeat: no-repeat; padding-right: 2.4rem; }
select option { background: #1c1426; color: var(--text); }
textarea { min-height: 7rem; resize: vertical; }
input[type=checkbox] { min-height: 0; width: 1.2rem; height: 1.2rem; accent-color: var(--rose); padding: 0; }
input[type=file] { padding: 0.6rem 0.8rem; }
input[type=file]::file-selector-button { margin-right: 0.8rem; border: 0; border-radius: 999px; padding: 0.45rem 0.9rem; font: inherit; font-weight: 600; background: var(--grad); color: #fff; cursor: pointer; }
input::placeholder, textarea::placeholder { color: rgba(169, 155, 181, 0.7); }
input:focus, select:focus, textarea:focus { border-color: var(--rose); outline: none; box-shadow: 0 0 0 4px rgba(255, 77, 141, 0.18); background: rgba(255, 255, 255, 0.08); }
.row, form.row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0; }
.row input:not([type=checkbox]):not([type=radio]), .row select, .filters input:not([type=checkbox]), .filters select { width: auto; flex: 1 1 9rem; }
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.2rem; }

/* ---------- Boutons ---------- */
button, .btnlink { font: inherit; font-weight: 700; min-height: 50px; border: 0; border-radius: 999px; padding: 0.75rem 1.5rem; background: var(--grad); color: #fff; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; box-shadow: 0 8px 24px rgba(255, 77, 141, 0.3); transition: transform 0.15s, box-shadow 0.15s, filter 0.15s; }
button:hover, .btnlink:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(255, 77, 141, 0.42); filter: brightness(1.08); color: #fff; }
button:active, .btnlink:active { transform: translateY(0); }
button:disabled { opacity: 0.55; cursor: progress; transform: none; }
button.quiet, .btnlink.quiet2 { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); box-shadow: none; color: var(--text); }
button.quiet:hover, .btnlink.quiet2:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 77, 141, 0.6); box-shadow: none; }
button.small, label.small { font-size: 0.85rem; min-height: 38px; padding: 0.35rem 1rem; }
label.small { padding: 0; min-height: 0; }
button.danger { background: rgba(255, 138, 128, 0.14); color: var(--err); border: 1px solid rgba(255, 138, 128, 0.45); box-shadow: none; }
button.danger:hover { background: rgba(255, 138, 128, 0.26); box-shadow: none; }
button.goodbtn { background: rgba(110, 231, 183, 0.14); color: var(--ok); border: 1px solid rgba(110, 231, 183, 0.45); box-shadow: none; }
button.goodbtn:hover { background: rgba(110, 231, 183, 0.26); box-shadow: none; }

/* ---------- Messages, étiquettes ---------- */
.msg { border-radius: 16px; padding: 0.85rem 1.1rem; margin: 0 0 1rem; font-size: 0.95rem; }
.msg.err { background: rgba(255, 138, 128, 0.1); color: var(--err); border: 1px solid rgba(255, 138, 128, 0.35); }
.msg.ok { background: rgba(110, 231, 183, 0.1); color: var(--ok); border: 1px solid rgba(110, 231, 183, 0.35); }
.tag { display: inline-block; padding: 0.12rem 0.65rem; border-radius: 999px; font-size: 0.76rem; font-weight: 700; border: 1px solid var(--line); background: var(--panel); vertical-align: middle; }
.tag.active { color: var(--ok); border-color: rgba(110, 231, 183, 0.5); }
.tag.banned, .tag.blocked, .tag.deleted, .tag.suspended { color: var(--err); border-color: rgba(255, 138, 128, 0.5); }
.tag.warn { color: var(--warn); border-color: rgba(251, 191, 36, 0.5); }
.tag.info { color: var(--info); border-color: rgba(96, 165, 250, 0.5); }
.badge { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.65rem; border-radius: 999px; background: rgba(110, 231, 183, 0.14); color: var(--ok); border: 1px solid rgba(110, 231, 183, 0.45); vertical-align: middle; }
.dot { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.25); vertical-align: middle; }

/* ---------- Cartes et blocs ---------- */
.block { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem; margin: 0 0 1.1rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
fieldset.block { min-width: 0; }
legend { padding: 0 0.4rem; color: var(--muted); }
fieldset { border: 1px solid var(--line); border-radius: 16px; margin: 0 0 0.8rem; }
details.block summary { cursor: pointer; }
details.block form { margin-top: 1rem; }
.list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.7rem; }
.list li { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 0.85rem 1.1rem; display: grid; gap: 0.3rem; }
.list li.unread, li.unread { border-color: rgba(255, 77, 141, 0.6); background: rgba(255, 77, 141, 0.07); }
li.flagged { border-color: var(--err); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.25rem; margin: 0 0 1.5rem; }
.facts dt { color: var(--muted); } .facts dd { margin: 0; overflow-wrap: anywhere; }
.head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1.1rem; }
.avatar { width: 7rem; height: 7rem; border-radius: 50%; object-fit: cover; background: var(--panel-solid); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--rose), 0 10px 30px rgba(255, 77, 141, 0.3); }
.avatar.small { width: 3.4rem; height: 3.4rem; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--rose); }
.stats { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.9rem; }
.stats li { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 1.1rem; display: grid; gap: 0.2rem; }
.stats strong { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats span { color: var(--muted); font-size: 0.9rem; }
.subnav { display: flex; gap: 0.5rem; overflow-x: auto; margin: 0 -1.1rem 1.4rem; padding: 0 1.1rem 0.4rem; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: 0 0 auto; text-decoration: none; color: var(--muted); padding: 0.45rem 1rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.9rem; font-weight: 600; background: var(--panel); }
.subnav a:hover { color: #fff; border-color: rgba(255, 77, 141, 0.6); }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 700; white-space: nowrap; }

/* ---------- Grille de profils / événements : tuiles photo ---------- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin: 1rem 0; }
.card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.1rem; aspect-ratio: 3 / 4; padding: 0.9rem; overflow: hidden; border-radius: 24px; text-decoration: none; color: #fff; background: linear-gradient(145deg, #2b1740, #3f1d3d); border: 1px solid var(--line); transition: transform 0.2s, box-shadow 0.2s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 77, 141, 0.5); color: #fff; }
.card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.card:hover > img { transform: scale(1.05); }
.card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 5, 12, 0.92) 0%, rgba(8, 5, 12, 0.35) 45%, transparent 70%); }
.card > strong, .card > .meta { position: relative; z-index: 1; }
.card > strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.card > .meta { color: rgba(255, 255, 255, 0.78); font-size: 0.8rem; }

/* ---------- Photos ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.grid figure { margin: 0; display: grid; gap: 0.4rem; }
.grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; border: 1px solid var(--line); background: var(--panel-solid); }
figcaption { font-size: 0.8rem; color: var(--muted); }
.evidence { max-width: min(28rem, 100%); border-radius: 18px; border: 1px solid var(--line); }
video { max-width: 100%; border-radius: 18px; }

/* ---------- Héros (visiteurs) ---------- */
.hero { position: relative; overflow: hidden; text-align: center; padding: 3.2rem 1.2rem 2.6rem; border-radius: 32px; margin-bottom: 1.6rem; border: 1px solid var(--line); background: radial-gradient(90% 120% at 50% 0%, rgba(255, 77, 141, 0.32), transparent 65%), radial-gradient(80% 100% at 100% 100%, rgba(139, 92, 246, 0.3), transparent 60%), var(--panel-solid); }
.hero h1 { font-size: clamp(2.3rem, 9vw, 4rem); background: linear-gradient(135deg, #fff 20%, #ffb3d1 60%, #c4a4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { margin-left: auto; margin-right: auto; max-width: 34ch; font-size: 1.12rem; }
.hero .row { justify-content: center; margin-top: 0.5rem; }
.hero-img .heroimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.herotext { position: relative; }
.features { display: grid; grid-template-columns: 1fr; gap: 0.8rem; margin: 0 0 1.6rem; }
.feature { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 1.1rem 1.2rem; }
.feature .ico { width: 1.7rem; height: 1.7rem; color: var(--rose); margin-bottom: 0.4rem; }
.feature h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.feature p { margin: 0; color: var(--muted); font-size: 0.93rem; }

/* ---------- Événement ---------- */
.eventhero { position: relative; border-radius: 30px; overflow: hidden; margin: 0 0 1.3rem; min-height: 15rem; display: flex; align-items: flex-end; background: linear-gradient(145deg, #2b1740, #3f1d3d); border: 1px solid var(--line); }
.eventhero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eventhero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 5, 12, 0.95) 0%, rgba(8, 5, 12, 0.3) 60%, transparent); }
.eventhero > div { position: relative; z-index: 1; padding: 1.4rem; }
.eventhero h1 { margin: 0 0 0.3rem; }

/* ---------- Fil d'actualité ---------- */
.chips { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.2rem; }
.chips::-webkit-scrollbar { display: none; }
.chips form { flex: 0 0 auto; margin: 0; }
.post { padding: 1rem 1.1rem; }
.post .head { margin-bottom: 0.7rem; }
.post .grid { grid-template-columns: 1fr; }
.post .grid img, .post .grid video { width: 100%; max-height: 28rem; object-fit: cover; aspect-ratio: auto; border-radius: 20px; }
.post .row button.small { gap: 0.4rem; }
.avail { font-size: 1.1rem; font-weight: 700; margin: 0.4rem 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ad { border-color: rgba(255, 77, 141, 0.5); background: linear-gradient(135deg, rgba(255, 77, 141, 0.1), rgba(139, 92, 246, 0.1)); }
.adlabel { margin: 0 0 0.4rem; color: var(--muted); font-size: 0.85rem; }

/* ---------- Divers modules ---------- */
.chat { display: grid; gap: 0.6rem; margin: 1rem 0; }
.msg-line { max-width: 85%; padding: 0.6rem 0.9rem; border-radius: 20px 20px 20px 6px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 0.25rem; overflow-wrap: anywhere; }
.msg-line.mine { justify-self: end; border-radius: 20px 20px 6px 20px; background: linear-gradient(135deg, rgba(255, 77, 141, 0.28), rgba(139, 92, 246, 0.28)); border-color: rgba(255, 77, 141, 0.45); }
.msg-line img { max-width: 100%; border-radius: 14px; }
.msg-line small { color: var(--muted); font-size: 0.75rem; }
.prefrow, .prefadm { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.prefrow > span { flex: 1 1 14rem; }
.nested { margin: 0.75rem 0 0 1rem; }
.qrbox { width: min(260px, 100%); margin: 0 auto 1rem; padding: 0.6rem; background: #fff; border-radius: 22px; }
.qrbox svg { width: 100%; height: auto; display: block; }
.secret { font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; color: var(--muted); }
.steps li { margin-bottom: 0.6rem; }
ul.codes { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
textarea.mono, pre.code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; white-space: pre; overflow: auto; }
pre.code { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); border-radius: 14px; padding: 0.8rem; }
.camvideo { width: min(26rem, 100%); margin: 0.5rem 0 1rem; }
.scanres { border-radius: 24px; padding: 1.1rem; margin-top: 1.2rem; border: 2px solid var(--line); }
.scanres.ok-bg { border-color: var(--ok); background: rgba(110, 231, 183, 0.1); }
.scanres.bad-bg { border-color: var(--err); background: rgba(255, 138, 128, 0.1); }

/* ---------- Présences en direct ---------- */
.live-sec { border: 1px solid var(--line); border-radius: 26px; padding: 1.1rem; margin: 0 0 1.2rem; }
.live-sec h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.95rem; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 0.9rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
.live-ok { background: rgba(110, 231, 183, 0.07); border-color: rgba(110, 231, 183, 0.35); }
.live-walk { background: rgba(251, 191, 36, 0.07); border-color: rgba(251, 191, 36, 0.35); }
.live-new { background: rgba(96, 165, 250, 0.07); border-color: rgba(96, 165, 250, 0.35); }
.live-wait { background: rgba(255, 138, 128, 0.07); border-color: rgba(255, 138, 128, 0.35); }
.dotc { width: 0.8rem; height: 0.8rem; border-radius: 50%; display: inline-block; }
.dotc.ok { background: var(--ok); } .dotc.warn { background: var(--warn); } .dotc.info { background: var(--info); } .dotc.bad { background: var(--err); }
.livecard { display: flex; align-items: center; gap: 0.8rem; background: rgba(0, 0, 0, 0.32); border: 1px solid var(--line); border-radius: 20px; padding: 0.7rem 0.8rem; margin-bottom: 0.7rem; }
.livebody { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.liveact form { margin: 0; }

/* ---------- Pied de page, cookies ---------- */
.foot { border-top: 1px solid var(--line); margin-top: 2rem; padding: 1.6rem 1.1rem calc(var(--tabbar) + 3rem); text-align: center; color: var(--muted); font-size: 0.9rem; }
.foot .links, .foot .row { justify-content: center; }
.foot a { color: var(--muted); }
.cookiebar { position: fixed; left: 0.7rem; right: 0.7rem; bottom: calc(var(--tabbar) + 1.6rem + env(safe-area-inset-bottom, 0px)); z-index: 60; background: var(--panel-solid); border: 1px solid rgba(255, 77, 141, 0.5); border-radius: 22px; padding: 1rem 1.1rem; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); }
body.guest .cookiebar { bottom: 0.7rem; }
.cookiebar p { margin: 0 0 0.6rem; font-size: 0.92rem; }
.cms h2, .cms h3, .cms h4 { margin: 1.4rem 0 0.5rem; }
.cms ul { padding-left: 1.2rem; }
@media print { .top, .tabbar, .subnav, .links, .hint, .foot, .cookiebar { display: none !important; } body { background: #fff; color: #000; } .receipt * { color: #000 !important; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- Ordinateur ---------- */
@media (min-width: 900px) {
  .top { padding: 0.8rem 2rem; }
  .topnav { display: flex; gap: 0.2rem; }
  .tabbar { display: none; }
  .wrap { padding-bottom: 4rem; }
  .foot { padding-bottom: 2rem; }
  .cookiebar { left: auto; right: 1.2rem; bottom: 1.2rem; max-width: 26rem; }
  body.guest .cookiebar { bottom: 1.2rem; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
  .features { grid-template-columns: repeat(3, 1fr); }
  .guestnav { display: none; }
  .subnav { margin-left: 0; margin-right: 0; padding-left: 0; flex-wrap: wrap; overflow: visible; }
  .post .grid { grid-template-columns: repeat(2, 1fr); }
  .eventhero { min-height: 22rem; }
}
@media (min-width: 1100px) { .block { padding: 1.4rem; } }

/* Éléments réservés à l'ordinateur */
.desk { display: none; }
@media (min-width: 900px) { .desk { display: inline-flex; } form.desk.inline { display: inline-flex; } }

/* Petits écrans : en-tête compact et boutons de disponibilité sur une seule ligne */
.chips button, .guestnav a, .subnav a { white-space: nowrap; }
.logo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
  .top { padding: 0.6rem 0.8rem; gap: 0.5rem; }
  .logo { font-size: 1.15rem; }
  .topact { gap: 0.35rem; }
  .topact .btnlink.small { padding: 0.3rem 0.85rem; min-height: 36px; font-size: 0.8rem; }
}

.feedcol { max-width: 42rem; margin: 0 auto; }

/* ---------- Agenda d'événements ---------- */
.pagehead { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.pagehead h1 { margin: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 1.4rem; }
.pill { text-decoration: none; padding: 0.5rem 1.05rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-weight: 700; font-size: 0.9rem; }
.pill.on, .pill:hover { color: #fff; border-color: transparent; background: var(--grad); }
.pillselect { width: auto !important; min-height: 40px; padding: 0.4rem 2rem 0.4rem 0.9rem; border-radius: 999px; font-size: 0.9rem; }
.sect { display: flex; align-items: center; gap: 0.6rem; font-size: 1.35rem; margin: 1.8rem 0 1rem; }
.sect .ico { color: var(--rose); }
.month { margin: 1.6rem 0 0.7rem; font-size: 1.05rem; text-transform: capitalize; color: var(--muted); letter-spacing: 0.02em; }
.featuredlist { display: grid; gap: 1.2rem; }
.fcard { border-radius: 30px; overflow: hidden; border: 1px solid rgba(255, 77, 141, 0.45); background: var(--panel-solid); box-shadow: 0 20px 60px rgba(255, 77, 141, 0.12); }
.fbanner { position: relative; display: flex; align-items: center; justify-content: center; min-height: 15rem; background: linear-gradient(145deg, #2b1740, #3f1d3d); text-decoration: none; overflow: hidden; }
.fbanner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.fcard:hover .fbanner img { transform: scale(1.04); }
.fbanner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8, 5, 12, 0.5), rgba(8, 5, 12, 0.25) 50%, rgba(8, 5, 12, 0.75)); }
.flabel { position: absolute; top: 1rem; left: 1rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 1rem; border-radius: 999px; background: var(--grad); color: #fff; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; box-shadow: 0 8px 22px rgba(255, 77, 141, 0.4); }
.flabel.inline { position: static; margin-bottom: 0.5rem; }
.fdetail { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.4rem; border-radius: 999px; background: rgba(8, 5, 12, 0.7); border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(8px); color: #fff; font-weight: 700; }
.fbody { padding: 1.4rem 1.4rem 1.2rem; }
.forg { margin: 0 0 0.3rem; color: var(--rose); font-weight: 800; letter-spacing: 0.08em; font-size: 0.86rem; }
.fbody h3 { margin: 0 0 0.8rem; font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.02em; }
.fbody h3 a { color: #fff; text-decoration: none; }
.fline { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.5rem 0; color: var(--muted); }
.fline .ico { color: var(--rose); margin-top: 0.1rem; }
.fdesc { color: #d8cde0; margin: 0.9rem 0; }
.admitted { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0.8rem 0; }
.admitted span { color: var(--muted); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; }
.admitted b { padding: 0.28rem 0.85rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); font-size: 0.85rem; font-weight: 600; }
.admitted.small b { padding: 0.12rem 0.6rem; font-size: 0.75rem; }
.going { display: flex; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0; color: var(--muted); font-size: 0.92rem; }
.agenda { display: grid; gap: 0.7rem; }
.aitem { display: flex; gap: 0.9rem; align-items: center; padding: 0.8rem; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: border-color 0.2s, transform 0.2s; }
.aitem:hover { border-color: rgba(255, 77, 141, 0.6); transform: translateY(-2px); color: #fff; }
.datebadge { flex: 0 0 3.6rem; text-align: center; border-radius: 16px; padding: 0.5rem 0; background: var(--grad); line-height: 1.1; color: #fff; }
.datebadge b { display: block; font-size: 1.5rem; font-weight: 800; }
.datebadge i { display: block; font-style: normal; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; }
.athumb { width: 4.4rem; height: 4.4rem; border-radius: 16px; object-fit: cover; flex: 0 0 auto; }
.abody { display: grid; gap: 0.15rem; min-width: 0; }
.abody strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.participate .going { margin: 0 0 0.8rem; font-size: 1rem; }
.attendees { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.6rem; }
.att { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.8rem 0.4rem; border-radius: 18px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); text-decoration: none; color: var(--text); text-align: center; font-weight: 600; font-size: 0.9rem; overflow-wrap: anywhere; }
.att em { font-style: normal; font-size: 0.72rem; color: var(--muted); }
.att em.here { color: var(--ok); font-weight: 700; }
/* Formulaire de création */
.caps > label, label.caps, fieldset.caps legend { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; font-weight: 700; }
fieldset.caps { border: 0; padding: 0; margin: 0; display: grid; gap: 0.8rem; min-width: 0; }
fieldset.caps legend { padding: 0; margin-bottom: 0.5rem; color: var(--muted); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.timepair { display: flex; align-items: center; gap: 0.4rem; text-transform: none; }
.timepair i { font-style: normal; color: var(--muted); }
.banners { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.6rem; }
.bpick { position: relative; display: block; cursor: pointer; text-transform: none; letter-spacing: 0; }
.bpick input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; cursor: pointer; }
.bpick span { display: grid; gap: 0.3rem; padding: 0.4rem; border-radius: 18px; border: 2px solid var(--line); background: var(--panel); transition: border-color 0.15s; }
.bpick img, .bpick .bnone { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); font-style: normal; color: var(--muted); }
.bpick b { font-size: 0.78rem; text-align: center; color: var(--text); }
.bpick input:checked + span { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(255, 77, 141, 0.18); }
.bpick input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 2px; }
.chipset { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; display: inline-block; cursor: pointer; text-transform: none; letter-spacing: 0; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.chip span { display: inline-block; padding: 0.55rem 1.15rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-weight: 600; transition: all 0.15s; }
.chip input:checked + span { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(255, 77, 141, 0.3); }
.chip input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 2px; }
details.adv summary { cursor: pointer; font-weight: 700; }
.advbody { display: grid; gap: 1rem; margin-top: 1rem; }
hr { border: 0; border-top: 1px solid var(--line); width: 100%; }
@media (min-width: 900px) {
  .featuredlist { grid-template-columns: repeat(2, 1fr); }
  .fbanner { min-height: 19rem; }
  .agenda { grid-template-columns: repeat(2, 1fr); }
}

.timepair input { flex: 1 1 0; min-width: 0; }
@media (max-width: 560px) { .two.stack { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Soirées privées : couleur différente (turquoise) ---------- */
:root { --priv: #2dd4bf; --priv2: #0ea5e9; --grad-priv: linear-gradient(135deg, #14b8a6 0%, #0ea5e9 100%); }
.legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0 0 1rem; color: var(--muted); font-size: 0.85rem; }
.legend .lg { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; vertical-align: -0.1em; margin-right: 0.3rem; }
.lg.official { background: var(--grad); } .lg.private { background: var(--grad-priv); }
.aitem.private { border-color: rgba(45, 212, 191, 0.4); }
.aitem.private:hover { border-color: var(--priv); }
.datebadge.private { background: var(--grad-priv); }
.flabel.priv { background: var(--grad-priv); box-shadow: 0 8px 22px rgba(20, 184, 166, 0.4); }
.eventhero.private { border-color: rgba(45, 212, 191, 0.5); }
.block.private, .msg.ok.private { border-color: rgba(45, 212, 191, 0.5); background: rgba(45, 212, 191, 0.07); }
.tag.priv { color: var(--priv); border-color: rgba(45, 212, 191, 0.5); }
.warnc { color: var(--warn); }
.participate .going a { color: #fff; text-decoration: none; border-bottom: 1px dashed var(--rose); }
.rsvp { display: grid; grid-template-columns: 1.4fr 1.2fr 0.6fr; gap: 0.5rem; margin: 0.4rem 0 0; }
.rsvp button { padding: 0.7rem 0.6rem; min-width: 0; }
.rsvp button.on { background: var(--grad); }
.rsvp button.on.maybe { background: linear-gradient(135deg, #f59e0b, #ef4444); box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3); }
.participate.private .rsvp button.on { background: var(--grad-priv); box-shadow: 0 8px 24px rgba(20, 184, 166, 0.3); }
.plist { display: grid; gap: 0.6rem; margin: 0 0 1rem; }
.pcard { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.9rem; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; color: var(--text); }
.pcard:hover { border-color: rgba(255, 77, 141, 0.6); color: #fff; }
.pinfo { display: grid; gap: 0.1rem; min-width: 0; flex: 1; }
.pinfo strong { overflow-wrap: anywhere; }
.pcard em { font-style: normal; font-size: 0.74rem; color: var(--muted); }
.pcard em.here { color: var(--ok); font-weight: 700; }
@media (min-width: 900px) { .plist { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Carte ---------- */
.maptools { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin: 0.6rem 0; }
.maptools .legend { margin: 0; }
.mapbox { position: relative; height: 62vh; min-height: 22rem; border-radius: 26px; overflow: hidden; background: #1a1423; border: 1px solid var(--line); touch-action: none; cursor: grab; margin-bottom: 1.1rem; }
.mapbox:active { cursor: grabbing; }
.maptiles, .maplayer { position: absolute; inset: 0; }
.maptiles img.tile { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; user-select: none; -webkit-user-drag: none; filter: invert(1) hue-rotate(180deg) brightness(0.82) contrast(0.92) saturate(0.7); }
.mk { position: absolute; transform: translate(-50%, -50%); min-height: 0; padding: 0; width: 2.7rem; height: 2.7rem; border-radius: 50%; border: 3px solid var(--rose); background: var(--panel-solid); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55); overflow: hidden; font-weight: 800; display: grid; place-items: center; }
.mk:hover { transform: translate(-50%, -50%) scale(1.1); filter: none; box-shadow: 0 8px 22px rgba(255, 77, 141, 0.5); }
.mk img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.mk.cluster { background: var(--grad); border-color: #fff; font-size: 1rem; }
.mk.cluster.ev { background: var(--grad-priv); }
.mk.ev { border-radius: 14px; width: 2.4rem; height: 2.4rem; border-color: #fff; font-size: 1.1rem; }
.mk.ev.official { background: var(--grad); }
.mk.ev.private { background: var(--grad-priv); }
.mapctl { position: absolute; right: 0.7rem; top: 0.7rem; display: grid; gap: 0.4rem; z-index: 3; }
.mapctl button { width: 2.6rem; height: 2.6rem; min-height: 0; padding: 0; font-size: 1.4rem; border-radius: 14px; background: rgba(24, 18, 34, 0.9); border: 1px solid var(--line); box-shadow: none; }
.mappop { position: absolute; z-index: 4; width: 14rem; display: grid; gap: 0.35rem; justify-items: start; padding: 0.9rem; border-radius: 20px; background: var(--panel-solid); border: 1px solid rgba(255, 77, 141, 0.5); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); }
.mappop[hidden] { display: none; }
.mappop .popx { position: absolute; top: 0.3rem; right: 0.4rem; width: 1.8rem; height: 1.8rem; min-height: 0; padding: 0; background: none; box-shadow: none; font-size: 1.2rem; }
.mappop .btnlink { margin-top: 0.3rem; }
.mapattr { position: absolute; left: 0.5rem; bottom: 0.4rem; z-index: 3; font-size: 0.7rem; color: rgba(255, 255, 255, 0.7); background: rgba(8, 5, 12, 0.6); padding: 0.1rem 0.5rem; border-radius: 8px; text-decoration: none; }

.tabbar { grid-template-columns: repeat(var(--tabs, 6), 1fr); }
.tabbar > a, .tabbar > details > summary { font-size: 0.62rem; letter-spacing: 0; }
.tabbar .ico { width: 1.4rem; height: 1.4rem; }

.profileqr { text-align: center; }
.profileqr .hint { text-align: left; }

.tabbar.t5 { --tabs: 5; }
.rsvp { grid-template-columns: 1.5fr 1.3fr 0.7fr; }
.rsvp button { font-size: 0.88rem; padding: 0.7rem 0.3rem; gap: 0.3rem; white-space: nowrap; }
.rsvp .ico { width: 1.1rem; height: 1.1rem; }

.btnlink.priv { background: var(--grad-priv); box-shadow: 0 8px 24px rgba(20, 184, 166, 0.3); }
.btnlink.priv:hover { box-shadow: 0 12px 30px rgba(20, 184, 166, 0.45); }
.sect.priv .ico { color: var(--priv); }
.pagehead .row { justify-content: flex-end; }

/* =====================================================================
   Boutons et finitions « premium » — relief, reflet animé, interrupteurs,
   entrée en douceur des pages, halo vivant en arrière-plan
   ===================================================================== */
html { background: radial-gradient(60rem 36rem at 85% -10%, rgba(139, 92, 246, 0.22), transparent 60%), radial-gradient(48rem 30rem at -10% 10%, rgba(255, 77, 141, 0.18), transparent 60%), var(--bg); background-attachment: fixed; }
body { background: transparent; }
html::before { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none; background: radial-gradient(34rem 26rem at 18% 24%, rgba(255, 77, 141, 0.13), transparent 62%), radial-gradient(32rem 26rem at 82% 72%, rgba(139, 92, 246, 0.15), transparent 62%); animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(3%, 2%, 0) scale(1.07); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.6); } 70%, 100% { box-shadow: 0 0 0 0.5rem rgba(110, 231, 183, 0); } }
@keyframes glow { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 30px -8px rgba(255, 77, 141, 0.6); } 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 14px 44px -6px rgba(255, 77, 141, 0.95); } }
.wrap > * { animation: rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; } /* « backwards » : l'animation ne laisse pas de transformation, sinon les fenêtres fixes (fiches, aperçus) s'affichent hors de l'écran */
.wrap > *:nth-child(2) { animation-delay: 0.05s; } .wrap > *:nth-child(3) { animation-delay: 0.1s; } .wrap > *:nth-child(4) { animation-delay: 0.15s; } .wrap > *:nth-child(5) { animation-delay: 0.2s; } .wrap > *:nth-child(n+6) { animation-delay: 0.25s; }

button, .btnlink { position: relative; overflow: hidden; font-weight: 800; letter-spacing: 0.01em; min-height: 52px; padding: 0.8rem 1.7rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -2px 0 rgba(0, 0, 0, 0.14), 0 10px 28px -8px rgba(255, 77, 141, 0.65);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s, filter 0.2s, background 0.2s; }
button::after, .btnlink::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, 0.38) 50%, transparent 68%); transform: translateX(-130%); transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
button:hover::after, .btnlink:hover::after { transform: translateX(130%); }
button:hover, .btnlink:hover { transform: translateY(-2px); filter: brightness(1.08) saturate(1.1); }
button:active, .btnlink:active { transform: translateY(0) scale(0.97); filter: brightness(0.95); }
button.small { min-height: 40px; padding: 0.4rem 1.1rem; font-size: 0.86rem; }
.btnlink.small { min-height: 40px; padding: 0.4rem 1.1rem; font-size: 0.86rem; }
.btnlink.large, button.large { min-height: 58px; padding: 1rem 2.2rem; font-size: 1.08rem; }
.hero .btnlink:not(.quiet2) { min-height: 58px; padding: 1rem 2.2rem; font-size: 1.08rem; animation: glow 2.8s ease-in-out infinite; }
button.quiet, .btnlink.quiet2 { background: linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box, linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05)) border-box; border: 1px solid transparent; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6); }
button.quiet:hover, .btnlink.quiet2:hover { background: linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box, var(--grad) border-box; box-shadow: 0 10px 26px -10px rgba(255, 77, 141, 0.55); }
button.danger { background: linear-gradient(rgba(255, 138, 128, 0.12), rgba(255, 138, 128, 0.12)) padding-box, linear-gradient(135deg, rgba(255, 138, 128, 0.7), rgba(255, 77, 141, 0.4)) border-box; border: 1px solid transparent; }
button.goodbtn { background: linear-gradient(rgba(110, 231, 183, 0.12), rgba(110, 231, 183, 0.12)) padding-box, linear-gradient(135deg, rgba(110, 231, 183, 0.8), rgba(96, 165, 250, 0.4)) border-box; border: 1px solid transparent; }
button:focus-visible, .btnlink:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.85); outline-offset: 3px; }
button.loading { pointer-events: none; opacity: 0.88; }
button.loading::before { content: ""; width: 1.05em; height: 1.05em; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; }
.iconbtn .badge, .tabbar .badge { animation: ring 2.4s infinite; }
.iconbtn:hover { transform: translateY(-1px); border-color: rgba(255, 77, 141, 0.6); }
.pill { transition: all 0.2s; }
.block { transition: border-color 0.25s, transform 0.25s; }

/* Interrupteurs (cases à cocher) */
label.check input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 2.8rem; height: 1.6rem; flex: 0 0 auto; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid var(--line); position: relative; cursor: pointer; transition: background 0.2s, border-color 0.2s; padding: 0; min-height: 0; }
label.check input[type=checkbox]::before { content: ""; position: absolute; top: 0.17rem; left: 0.18rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1); }
label.check input[type=checkbox]:checked { background: var(--grad); border-color: transparent; }
label.check input[type=checkbox]:checked::before { transform: translateX(1.2rem); }
label.check input[type=checkbox]:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

/* Pastille « en ligne » qui respire */
i.pulse { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ok); vertical-align: middle; animation: ring 2s infinite; }

/* Logo : toujours en haut à gauche, taille réglable */
.logo { display: inline-flex; align-items: center; gap: 0.6rem; }
.logoimg { width: auto; max-width: 14rem; }
.logo-sm .logoimg { max-height: 1.9rem; } .logo-md .logoimg { max-height: 2.6rem; } .logo-lg .logoimg { max-height: 3.5rem; }
.logoname { font-weight: 800; letter-spacing: -0.02em; font-size: 1.15rem; }
.previewbar { display: flex; align-items: center; padding: 0.8rem 1.1rem; border-radius: 18px; background: rgba(12, 9, 16, 0.85); border: 1px solid var(--line); margin-bottom: 1rem; }

/* Couleurs des salons et forums */
.c-rose { --c1: #ff4d8d; --c2: #c24bd6; } .c-violet { --c1: #8b5cf6; --c2: #6366f1; } .c-teal { --c1: #14b8a6; --c2: #0ea5e9; }
.c-amber { --c1: #f59e0b; --c2: #ef4444; } .c-blue { --c1: #3b82f6; --c2: #06b6d4; } .c-green { --c1: #22c55e; --c2: #14b8a6; }
.ricon { display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; flex: 0 0 auto; border-radius: 18px; font-size: 1.5rem; color: #fff; background: linear-gradient(135deg, var(--c1, #ff4d8d), var(--c2, #8b5cf6)); box-shadow: 0 10px 24px -10px var(--c1, #ff4d8d); }
.ricon.sm { width: 2.2rem; height: 2.2rem; font-size: 1.05rem; border-radius: 13px; vertical-align: middle; }
.ricon .ico { width: 1.5rem; height: 1.5rem; }

/* Connectés maintenant */
.onlinebar { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0.9rem; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); margin: 0 0 1.1rem; overflow: hidden; }
.olabel { flex: 0 0 auto; font-size: 0.8rem; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 0.4rem; }
.olabel b { color: var(--text); }
.oscroll { display: flex; gap: 0.6rem; overflow-x: auto; scrollbar-width: none; padding: 0.2rem; }
.oscroll::-webkit-scrollbar { display: none; }
.oav { flex: 0 0 auto; display: grid; justify-items: center; gap: 0.2rem; text-decoration: none; color: var(--muted); font-size: 0.7rem; max-width: 4rem; }
.oav img { width: 2.8rem; height: 2.8rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ok); }
.oav span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 4rem; }
.oav.mod img { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--rose); }

/* Chat : liste des salons */
.rooms { display: grid; gap: 0.8rem; }
.room { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 24px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.room:hover { transform: translateY(-3px); border-color: var(--c1); box-shadow: 0 16px 40px -18px var(--c1); color: #fff; }
.room.locked { opacity: 0.6; }
.rbody { display: grid; gap: 0.15rem; flex: 1; min-width: 0; }
.rgo { color: var(--c1); }

/* Chat : salon */
body.inchat .tabbar, body.inchat .foot { display: none; }
body.inchat .wrap { padding-bottom: 1rem; }
.croom { display: grid; grid-template-rows: auto auto auto 1fr auto auto; height: calc(100vh - 7.5rem); height: calc(100dvh - 7.5rem); min-height: 24rem; max-width: 56rem; margin: 0 auto; border-radius: 28px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.chead { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); }
.ctitle { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.conline { display: flex; gap: 0.6rem; overflow-x: auto; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--line); scrollbar-width: none; min-height: 3.6rem; }
.conline::-webkit-scrollbar { display: none; }
.cpinned { padding: 0.55rem 0.9rem; background: rgba(251, 191, 36, 0.1); border-bottom: 1px solid rgba(251, 191, 36, 0.35); font-size: 0.9rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.cpinned[hidden], .cerr[hidden] { display: none; }
.cmsgs { overflow-y: auto; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.55rem; scroll-behavior: smooth; }
.cwelcome { text-align: center; color: var(--muted); font-size: 0.85rem; margin: 0 0 0.4rem; }
.cmsg { display: flex; gap: 0.6rem; align-items: flex-start; position: relative; max-width: 92%; animation: rise 0.25s both; }
.cmsg.own { align-self: flex-end; flex-direction: row-reverse; }
.cav img { width: 2.3rem; height: 2.3rem; border-radius: 50%; object-fit: cover; }
.cbody { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); padding: 0.45rem 0.8rem; border-radius: 18px 18px 18px 6px; min-width: 0; }
.cmsg.own .cbody { background: linear-gradient(135deg, rgba(255, 77, 141, 0.3), rgba(139, 92, 246, 0.3)); border-color: rgba(255, 77, 141, 0.45); border-radius: 18px 18px 6px 18px; }
.cmsg.mention .cbody { box-shadow: 0 0 0 2px var(--warn); }
.chd { display: flex; gap: 0.5rem; align-items: baseline; }
.cname { font-weight: 800; font-size: 0.85rem; text-decoration: none; color: #ffd0e2; }
.ctxt { margin: 0; overflow-wrap: anywhere; }
.cdots { min-height: 0; width: 1.8rem; height: 1.8rem; padding: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--muted); font-size: 1.1rem; }
.cact { position: absolute; z-index: 5; top: 100%; right: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.5rem; border-radius: 16px; background: var(--panel-solid); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); }
.cact[hidden] { display: none; }
.cerr { margin: 0; padding: 0.5rem 0.9rem; color: var(--err); background: rgba(255, 138, 128, 0.1); font-size: 0.88rem; }
.cform { display: flex; gap: 0.6rem; padding: 0.7rem; border-top: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); margin: 0; }
.cform input { flex: 1; border-radius: 999px; }
.cform.off { justify-content: center; color: var(--muted); }

/* Forum */
.catname { margin: 1.6rem 0 0.8rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.7rem; }
.flist, .tlist { display: grid; gap: 0.7rem; margin-bottom: 1rem; }
.frow, .trow { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: transform 0.2s, border-color 0.2s; }
.frow:hover, .trow:hover { transform: translateY(-2px); border-color: var(--c1, var(--rose)); color: #fff; }
.trow.pinned { border-color: rgba(255, 77, 141, 0.45); background: rgba(255, 77, 141, 0.06); }
.fbody2, .tbody { display: grid; gap: 0.15rem; flex: 1; min-width: 0; }
.fcount, .tstat { display: grid; grid-template-columns: auto auto; gap: 0 0.4rem; text-align: right; font-size: 0.8rem; color: var(--muted); }
.fcount b, .tstat b { color: var(--text); font-size: 1rem; }
.fcount i, .tstat i { font-style: normal; align-self: center; }
.tlast { text-align: right; display: none; }
.fpost { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
.fauthor { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.fauthor .meta { display: inline; }
.fcontent { min-width: 0; }
.fbodytxt { overflow-wrap: anywhere; margin: 0.4rem 0 0.8rem; }
.fbodytxt blockquote { margin: 0.5rem 0; padding: 0.4rem 0.9rem; border-left: 3px solid var(--rose); background: rgba(255, 255, 255, 0.05); border-radius: 0 12px 12px 0; color: var(--muted); }
button.liked { background: linear-gradient(rgba(255, 77, 141, 0.18), rgba(255, 77, 141, 0.18)) padding-box, var(--grad) border-box; }
.searchbar { margin-bottom: 1rem; }
.searchbar input { flex: 1 1 14rem; }
@media (min-width: 900px) { .tlast { display: block; min-width: 9rem; } .fpost { grid-template-columns: 11rem 1fr; } .fauthor { flex-direction: column; align-items: center; text-align: center; align-self: start; } .rooms { grid-template-columns: repeat(2, 1fr); } .croom { height: calc(100vh - 8rem); } }

/* Administration : grille « tout administrer » */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.7rem; margin-bottom: 1rem; }
.tile { display: grid; gap: 0.5rem; align-content: start; padding: 1rem; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; color: var(--text); font-weight: 700; font-size: 0.92rem; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.tile .ico { width: 1.7rem; height: 1.7rem; color: var(--rose); }
.tile:hover { transform: translateY(-3px); border-color: var(--rose); box-shadow: 0 14px 34px -16px var(--rose); color: #fff; }
.modrow { justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.modgroup { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.advbody fieldset { border: 1px solid var(--line); border-radius: 16px; padding: 0.8rem 1rem; display: grid; gap: 0.6rem; }
@media (prefers-reduced-motion: reduce) { html::before, .wrap > *, button, .btnlink, .hero .btnlink { animation: none !important; } button::after, .btnlink::after { display: none; } }

/* Correctifs du salon : colonne souple (éléments cachés), menu d'actions au premier plan */
.croom { display: flex; flex-direction: column; }
.cmsgs { flex: 1 1 auto; min-height: 0; }
.chead, .conline, .cpinned, .cerr, .cform { flex: 0 0 auto; }
.cform button { min-height: 48px; padding: 0.5rem 1.3rem; }
.cform input { min-height: 48px; }
.cmsg.menu-open { z-index: 30; }
.cmsg { z-index: 1; }
.cav { flex: 0 0 2.3rem; width: 2.3rem; height: 2.3rem; }
.cav img { width: 100%; height: 100%; }
.cpinned .quiet { margin-left: auto; }
@media (max-width: 560px) { .fcount b:nth-of-type(2), .fcount i:nth-of-type(2) { display: none; } .fcount { grid-template-columns: auto; justify-items: end; } .fcount i { font-size: 0.7rem; } }

/* Sept onglets : plus compacts */
.tabbar { left: 0.5rem; right: 0.5rem; grid-template-columns: repeat(7, 1fr); }
.tabbar > a, .tabbar > details > summary { font-size: 0.58rem; gap: 0.1rem; }
.tabbar .ico { width: 1.3rem; height: 1.3rem; }
.tabbar.t5, .tabbar.t6 { grid-template-columns: repeat(7, 1fr); }

/* Paramètres */
.settabs { margin-bottom: 0.8rem; }
.settabs small { opacity: 0.7; margin-left: 0.2rem; }
.setfilter { margin-bottom: 1rem; }
.setrow { padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.setrow:last-child { border-bottom: 0; }
label.setrow:not(.check) { grid-template-columns: minmax(0, 1fr); }
.colorrow { display: flex; align-items: center; gap: 0.8rem; }
.colorrow input[type=color] { width: 4rem; min-height: 44px; padding: 0.15rem; border-radius: 12px; }
.savebar { position: sticky; bottom: calc(var(--tabbar) + 1.4rem); display: flex; justify-content: flex-end; z-index: 20; }
@media (min-width: 900px) { .savebar { bottom: 1rem; } }
.announce { padding: 0.65rem 1.1rem; text-align: center; font-weight: 600; font-size: 0.92rem; border-bottom: 1px solid var(--line); }
.announce a { color: inherit; }
.announce.info { background: rgba(96, 165, 250, 0.15); color: #bfdbfe; }
.announce.warn { background: rgba(251, 191, 36, 0.15); color: #fde68a; }
.announce.danger { background: rgba(255, 138, 128, 0.18); color: #fecaca; }
.secret.fp { font-size: 0.95rem; word-break: break-all; padding: 0.8rem 1rem; border-radius: 14px; background: rgba(0, 0, 0, 0.35); border: 1px dashed var(--line); user-select: all; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.narrowin { max-width: 6rem; }

/* Certification */
.challenge { border: 1px dashed rgba(255, 77, 141, 0.6); border-radius: 18px; padding: 0.9rem 1.1rem; margin: 0 0 1rem; background: rgba(255, 77, 141, 0.06); }
.challenge ol { margin: 0.4rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.chcode { display: inline-block; font-size: 1.5rem; letter-spacing: 0.15em; padding: 0.1rem 0.7rem; border-radius: 12px; background: var(--grad); color: #fff; }
.recorder { display: grid; gap: 0.7rem; padding: 0.9rem; border-radius: 20px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); margin-bottom: 1rem; }
.recorder video { width: 100%; max-width: 26rem; aspect-ratio: 4 / 3; object-fit: cover; background: #000; }

/* Page des abonnements */
.hero.compact { padding: 2rem 1.2rem; }
.plans { display: grid; gap: 1rem; margin-bottom: 1.2rem; }
.plan { display: grid; gap: 0.7rem; align-content: start; padding: 1.4rem; border-radius: 28px; background: var(--panel); border: 1px solid var(--line); }
.plan.best { border-color: rgba(255, 77, 141, 0.6); box-shadow: 0 20px 60px -24px var(--rose); background: linear-gradient(160deg, rgba(255, 77, 141, 0.1), rgba(139, 92, 246, 0.08)); }
.plan h2 { margin: 0; font-size: 1.4rem; }
.plan .price strong { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan .price span { color: var(--muted); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.ticks li { display: flex; gap: 0.55rem; align-items: flex-start; }
.ticks .ico { color: var(--ok); margin-top: 0.15rem; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } }

/* Centre de sécurité */
.scorebox { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.score { display: flex; align-items: baseline; gap: 0.3rem; }
.score strong { font-size: 3.4rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.score.good strong { color: var(--ok); } .score.warnc strong { color: var(--warn); } .score.bad strong { color: var(--err); }
.checks { display: grid; gap: 0.5rem; }
.check-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1rem; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.check-row.bad { border-color: rgba(255, 138, 128, 0.5); } .check-row.warn { border-color: rgba(251, 191, 36, 0.35); }
.cbody2 { display: grid; gap: 0.1rem; flex: 1; min-width: 0; }

/* Correctifs : pastilles de disponibilité jamais écrasées ; pastilles de notification bien placées */
.chips > * { flex: 0 0 auto; }
.chips button { white-space: nowrap; }
.iconbtn { overflow: visible; }
.iconbtn .badge { top: -0.35rem; right: -0.35rem; left: auto; animation: none; box-shadow: 0 0 0 2px var(--bg); }
.tabbar .badge { animation: none; box-shadow: 0 0 0 2px #181222; }

/* Encarts sponsorisés : événement ou partenaire */
.adcard { display: flex; gap: 0.9rem; align-items: center; text-decoration: none; color: var(--text); margin: 0.4rem 0; }
.adimg { width: 5.4rem; height: 5.4rem; border-radius: 18px; object-fit: cover; flex: 0 0 auto; background: var(--panel-solid); }
.adtxt { display: grid; gap: 0.2rem; min-width: 0; }
.adtxt strong { font-size: 1.1rem; overflow-wrap: anywhere; }

.pcard.newkiss { border-color: rgba(255, 77, 141, 0.7); background: rgba(255, 77, 141, 0.08); }
.kissbtn { background: linear-gradient(135deg, #ff4d8d, #ff8a5c); }

.bigemoji { font-size: 1.6rem; display: inline-block; margin-bottom: 0.4rem; }
.homeico .ico { width: 1.3rem; height: 1.3rem; color: var(--rose); vertical-align: -0.25em; }
.feature a { font-weight: 700; }

/* Événements : lignes avec réponses directes, calendrier */
.aitem { flex-wrap: wrap; align-items: stretch; }
.ainfo { display: flex; gap: 0.9rem; align-items: center; flex: 1 1 100%; text-decoration: none; color: inherit; min-width: 0; }
.aitem .rsvp.mini { flex: 1 1 100%; margin: 0.2rem 0 0; }
.rsvp.mini { grid-template-columns: 1.3fr 1fr 1.2fr; }
.rsvp.mini button { min-height: 40px; padding: 0.35rem 0.4rem; font-size: 0.8rem; }
.fbody .rsvp.mini { margin-top: 0.8rem; }
.calbox summary { cursor: pointer; display: flex; align-items: center; gap: 0.5rem; }
.calhead { display: flex; align-items: center; justify-content: space-between; margin: 0.9rem 0 0.5rem; }
.calhead .iconbtn { font-size: 1.4rem; text-decoration: none; }
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; }
.calgrid .dow { text-align: center; font-size: 0.72rem; font-weight: 800; color: var(--muted); padding: 0.2rem 0; }
.calday { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; text-decoration: none; color: var(--text); border: 1px solid transparent; font-size: 0.92rem; }
.calday:hover { border-color: var(--rose); }
.calday.has { background: rgba(255, 77, 141, 0.1); }
.calday.today b { color: var(--rose); text-decoration: underline; }
.calday.sel { background: var(--grad); color: #fff; }
.calday .dots { position: absolute; bottom: 0.3rem; display: flex; gap: 0.2rem; }
.calday .dots u { width: 0.38rem; height: 0.38rem; border-radius: 50%; display: block; }
.dots .d1 { background: var(--rose); } .dots .d2 { background: var(--priv); }
.calday.sel .dots u { background: #fff; }
.daterange { margin-top: 0.9rem; align-items: flex-end; }
.daterange label { flex: 1 1 8rem; }

/* Étoiles et recommandations */
:root { --star: #fbbf24; }
.stars { display: inline-flex; gap: 0.05em; vertical-align: middle; font-size: 1rem; line-height: 1; }
.stars.lg { font-size: 1.5rem; }
.st { color: #4b4357; }
.st.f { color: var(--star); }
.st.h { background: linear-gradient(90deg, var(--star) 50%, #4b4357 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ratingline { text-decoration: none; color: var(--text); display: inline-flex; align-items: center; gap: 0.4rem; }
.rate { display: flex; align-items: center; gap: 0.3rem; }
.starpick { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.1rem; }
.starpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.starpick label { font-size: 2.2rem; line-height: 1; color: #4b4357; cursor: pointer; transition: transform 0.15s, color 0.15s; display: inline; }
.starpick.small label { font-size: 1.5rem; }
.starpick label:hover, .starpick label:hover ~ label, .starpick input:checked ~ label { color: var(--star); }
.starpick label:hover { transform: scale(1.15); }
.starpick input:focus-visible + label { outline: 2px solid var(--rose); border-radius: 6px; }
.critrow { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ratesum { display: grid; gap: 1rem; margin: 0.6rem 0 1rem; }
.bigrate { display: grid; gap: 0.2rem; justify-items: start; }
.bigrate strong { font-size: 3rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.barrow { display: grid; grid-template-columns: 2.4rem 1fr 2rem; gap: 0.5rem; align-items: center; font-size: 0.85rem; }
.bar { height: 0.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; display: block; }
.bar i { display: block; height: 100%; background: var(--grad); border-radius: 999px; }
.bar i.w0 { width: 0; } .bar i.w5 { width: 5%; } .bar i.w10 { width: 10%; } .bar i.w15 { width: 15%; } .bar i.w20 { width: 20%; } .bar i.w25 { width: 25%; } .bar i.w30 { width: 30%; } .bar i.w35 { width: 35%; } .bar i.w40 { width: 40%; } .bar i.w45 { width: 45%; } .bar i.w50 { width: 50%; } .bar i.w55 { width: 55%; } .bar i.w60 { width: 60%; } .bar i.w65 { width: 65%; } .bar i.w70 { width: 70%; } .bar i.w75 { width: 75%; } .bar i.w80 { width: 80%; } .bar i.w85 { width: 85%; } .bar i.w90 { width: 90%; } .bar i.w95 { width: 95%; } .bar i.w100 { width: 100%; }
.crits { margin-bottom: 1rem; }
.review { padding: 1rem 0; border-top: 1px solid var(--line); }
.rhead { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 0.4rem; }
.rreply { margin: 0.5rem 0 0.5rem 1rem; padding: 0.6rem 0.9rem; border-left: 3px solid var(--rose); background: rgba(255, 255, 255, 0.04); border-radius: 0 14px 14px 0; }
.replybox summary { cursor: pointer; color: var(--muted); font-weight: 700; }
@media (min-width: 700px) { .ratesum { grid-template-columns: 12rem 1fr; align-items: center; } }
/* Préférences en pastilles */
.preflevel { margin: 0 0 1.1rem; }
.preflevel h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; font-size: 1.05rem; }
.preflevel h3 .ico { color: var(--rose); }
.prefcat { display: grid; gap: 0.3rem; margin: 0 0 0.7rem; }
.pchip { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid rgba(255, 77, 141, 0.4); background: rgba(255, 77, 141, 0.08); font-size: 0.85rem; font-weight: 600; }
.quietlink { list-style: none; }

.mapbox.demo .maptiles img.tile { filter: none; }

/* Mode discret : photos et vidéos floutées (le logo, la carte et les icônes restent nets) */
body.dl-light { --dblur: 8px; } body.dl-medium { --dblur: 18px; } body.dl-strong { --dblur: 36px; }
body.discreet img:not(.logoimg):not(.tile):not(.nodiscreet), body.discreet video { filter: blur(var(--dblur, 18px)); transition: filter 0.2s; }
body.discreet img.unblur, body.discreet video.unblur { filter: none !important; }
#discreetbtn[aria-pressed="true"] { background: var(--grad); color: #fff; border-color: transparent; }
/* Protection des contenus */
.protected { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.protected input, .protected textarea, .protected select { -webkit-user-select: text; user-select: text; }
.protected img, .protected video { -webkit-user-drag: none; }
.shield { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 2rem; text-align: center; background: #0c0910; color: #f6f1f8; font-weight: 700; }
.shield[hidden] { display: none; }
.wm { position: fixed; inset: 0; z-index: 9998; pointer-events: none; background-repeat: repeat; }
@media print { body.noprint > * { display: none !important; } body.noprint::before { content: 'Impression désactivée'; display: block; color: #000; padding: 2rem; } }
.quota .meta strong { color: var(--text); }

/* Barre de navigation de l'administration (pastilles défilantes, page active en surbrillance) */
.adminbar, .sitebar { display: flex; gap: 0.45rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -1.1rem; padding: 0.6rem 1.1rem; }
.adminbar::-webkit-scrollbar, .sitebar::-webkit-scrollbar { display: none; }
.adminbar { position: sticky; top: var(--hdr, 3.95rem); z-index: 30; background: rgba(8, 6, 11, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.adminbar a, .sitebar a { flex: 0 0 auto; white-space: nowrap; text-decoration: none; padding: 0.5rem 1.05rem; border-radius: 999px; font-weight: 700; font-size: 0.9rem; color: #f6f1f8; background: #08060b; border: 1px solid rgba(255, 255, 255, 0.18); transition: border-color 0.15s, transform 0.15s; }
.adminbar a:hover, .sitebar a:hover { border-color: var(--rose); color: #fff; transform: translateY(-1px); }
.adminbar a.on { background: var(--grad); border-color: transparent; box-shadow: 0 8px 22px -10px var(--rose); }
.sitebar { margin-bottom: 1.2rem; align-items: center; }
.sitebar a { font-size: 0.8rem; padding: 0.35rem 0.85rem; background: transparent; color: var(--muted); border-color: var(--line); }
.navlabel { flex: 0 0 auto; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 900px) { .adminbar, .sitebar { margin-left: 0; margin-right: 0; } }
.adminbar, .sitebar { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.1rem, #000 calc(100% - 1.6rem), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 1.1rem, #000 calc(100% - 1.6rem), transparent 100%); scroll-behavior: smooth; }

/* Gestion complète des membres */
.mgmt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.9rem; }
.mgmt-head h1 { margin: 0; font-size: 1.35rem; display: flex; align-items: center; gap: 0.6rem; letter-spacing: -0.01em; }
.mgmt-head h1 .ico { color: var(--rose); }
.mgmt-head .count { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 0.8rem; color: var(--muted); }
.mgmt-tools { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.msearch { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0 0.9rem; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.msearch input { background: none; border: 0; min-height: 40px; padding: 0.2rem; box-shadow: none; min-width: 12rem; }
.msearch .ico { color: var(--muted); width: 1.1rem; height: 1.1rem; }
.mfilters { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.mfrow { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.mchip { text-decoration: none; padding: 0.3rem 0.85rem; border-radius: 999px; background: var(--panel-solid); border: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 0.8rem; }
.mchip small { opacity: 0.7; }
.mchip.on { background: #7c3aed; border-color: transparent; color: #fff; }
.mchip.alt.on { background: #f97316; }
.mmorefilters summary { cursor: pointer; font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.mlist { display: grid; gap: 0.7rem; }
.mcard { position: relative; border-radius: 18px; background: var(--panel-solid); border: 1px solid var(--line); padding: 0.9rem 1rem; }
.mcard:hover { border-color: rgba(255, 255, 255, 0.2); }
.mtoggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mrow { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.mavatar { flex: 0 0 auto; width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, #7c3aed, #3b1d6e); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12); }
.mmain { flex: 1 1 18rem; max-width: 34rem; min-width: 0; display: grid; gap: 0.35rem; }
.mline1, .mline2 { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: center; }
.mname { font-weight: 800; font-size: 1.02rem; color: #fff; text-decoration: none; margin-right: 0.2rem; }
.tg { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 8px; font-size: 0.72rem; font-weight: 700; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); }
.tg.ok { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.4); background: rgba(110, 231, 183, 0.1); }
.tg.warn { color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.1); }
.tg.bad { color: #ff8a80; border-color: rgba(255, 138, 128, 0.45); background: rgba(255, 138, 128, 0.12); }
.tg.type { color: #c4b5fd; border-color: rgba(167, 139, 250, 0.5); background: rgba(139, 92, 246, 0.14); }
.tg.plan { color: #fdba74; border-color: rgba(249, 115, 22, 0.5); background: rgba(249, 115, 22, 0.12); }
.tg.free { color: var(--muted); }
.tg.role { color: #93c5fd; border-color: rgba(96, 165, 250, 0.4); background: rgba(96, 165, 250, 0.1); }
.mi { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); }
.mi .ico { width: 0.95rem; height: 0.95rem; }
.ipchip { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.72rem; padding: 0.1rem 0.5rem; border-radius: 6px; border: 1px solid rgba(255, 77, 141, 0.5); color: #ff6b9d; background: rgba(255, 77, 141, 0.08); }
.linkbtn { min-height: 0; padding: 0.1rem; background: none; box-shadow: none; color: var(--muted); border-radius: 6px; }
.linkbtn:hover { color: #fff; transform: none; box-shadow: none; background: none; }
.linkbtn .ico { width: 1rem; height: 1rem; }
.mwarn { color: #fbbf24; font-size: 0.8rem; font-weight: 700; display: inline-flex; gap: 0.25rem; align-items: center; }
.mwarn .ico { width: 0.95rem; height: 0.95rem; }
.mwarnn { color: #fb923c; font-size: 0.8rem; font-weight: 700; }
.mact { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-left: auto; }
.mact form { margin: 0; display: block; }
.mbtn { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 36px; padding: 0.3rem 0.8rem; border-radius: 10px; font-size: 0.8rem; font-weight: 700; text-decoration: none; color: #f6f1f8; background: #1e1930; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none; cursor: pointer; }
.mbtn::after { display: none; }
.mbtn:hover { transform: none; filter: brightness(1.2); box-shadow: none; color: #fff; }
.mbtn .ico { width: 0.95rem; height: 0.95rem; }
.mbtn.warn { color: #fbbf24; background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.4); }
.mbtn.bad { color: #ff8a80; background: rgba(255, 138, 128, 0.1); border-color: rgba(255, 138, 128, 0.45); }
.mbtn.good { color: #6ee7b7; background: rgba(110, 231, 183, 0.1); border-color: rgba(110, 231, 183, 0.45); }
.mbtn.icon { padding: 0.3rem 0.6rem; }
.mstatus { min-height: 36px; padding: 0.2rem 1.8rem 0.2rem 0.7rem; font-size: 0.8rem; border-radius: 10px; width: auto; background-color: #1e1930; }
.mchev { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 10px; background: #1e1930; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; }
.mchev .ico { width: 1.1rem; height: 1.1rem; }
.mmore { display: none; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.mtoggle:checked ~ .mmore { display: block; }
.mtoggle:checked ~ .mrow .mchev { background: var(--grad); }
.mtoggle:focus-visible ~ .mrow .mchev { outline: 2px solid var(--rose); }
.mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.8rem 1.2rem; margin-bottom: 0.8rem; }
.mgrid p { margin: 0.15rem 0 0; font-size: 0.9rem; }
.mhist { margin-bottom: 0.7rem; }
.mhist p { margin: 0.2rem 0; font-size: 0.85rem; }
.mdetail { margin-top: 0.4rem; }
.mdetail form { display: block; margin: 0; }

/* Panneau déplié d'un membre : informations, bio, actions rapides, notes */
.tg.info { color: #93c5fd; border-color: rgba(96, 165, 250, 0.45); background: rgba(96, 165, 250, 0.1); }
.mpanel { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.4rem; margin-bottom: 1rem; }
.mcol h4, .mnotes h4 { margin: 0 0 0.6rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 800; display: flex; align-items: center; gap: 0.4rem; }
.mcol { display: grid; gap: 0.5rem; align-content: start; }
.minfo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: 0.88rem; }
.minfo li { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.minfo .ico { width: 1rem; height: 1rem; color: var(--muted); }
.mbio { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.mcol form, .mnotes form { margin: 0; }
.qact, .qsub { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; text-align: left; padding: 0.7rem 0.9rem; border-radius: 12px; font-size: 0.85rem; font-weight: 700; color: var(--muted); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); box-shadow: none; }
.qact::after { display: none; }
.qact:hover { transform: none; filter: brightness(1.2); box-shadow: none; }
.qact span:first-child, .qsub span:first-child { display: inline-flex; align-items: center; gap: 0.45rem; }
.qact .ico, .qsub .ico { width: 1rem; height: 1rem; }
.qhint { font-size: 0.72rem; font-weight: 700; opacity: 0.85; }
.qact.ok { color: #6ee7b7; background: rgba(110, 231, 183, 0.1); border-color: rgba(110, 231, 183, 0.4); }
.qact.info { color: #93c5fd; background: rgba(96, 165, 250, 0.1); border-color: rgba(96, 165, 250, 0.4); }
.qsub.on { color: #fdba74; background: rgba(249, 115, 22, 0.1); border-color: rgba(249, 115, 22, 0.45); }
.qrow { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.subpick summary { cursor: pointer; font-size: 0.82rem; font-weight: 700; color: var(--muted); padding: 0.2rem 0; }
.subpick form { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.mnotes { margin: 0.4rem 0 1rem; display: grid; gap: 0.5rem; }
.mnote { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; align-items: baseline; padding: 0.5rem 0.8rem; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.mnote p { margin: 0; flex: 1 1 14rem; font-size: 0.88rem; }
.mnoteform { display: flex; gap: 0.5rem; }
.mnoteform input { flex: 1; }

/* Avatars par défaut */
.avgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.avcard { display: grid; gap: 0.5rem; justify-items: start; align-content: start; }
.avcard .avatar { width: 6rem; height: 6rem; }
.avcard form { margin: 0; display: grid; gap: 0.4rem; width: 100%; }

/* QR code du profil : visible dès l'en-tête, agrandissable */
.qrtile { flex: 1 1 100%; display: flex; gap: 1rem; align-items: center; padding: 0.8rem; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); }
.qrtile .qrbtn { flex: 0 0 auto; width: 8rem; padding: 0; border: 0; background: none; box-shadow: none; min-height: 0; border-radius: 16px; cursor: zoom-in; transition: transform 0.2s; }
.qrtile .qrbtn::after { display: none; }
.qrtile .qrbtn:hover { transform: scale(1.04); box-shadow: 0 14px 40px -14px var(--rose); }
.qrtile .qrbox { width: 100%; margin: 0; padding: 0.4rem; border-radius: 16px; display: block; }
.qrtile.qr-s .qrbtn { width: 6rem; } .qrtile.qr-l .qrbtn { width: 10.5rem; }
.qrinfo { display: grid; gap: 0.35rem; justify-items: start; min-width: 0; }
.qrinfo .meta { font-size: 0.8rem; }
@media (min-width: 720px) { .qrtile { flex: 0 0 auto; margin-left: auto; flex-direction: column; text-align: center; width: 12.5rem; } .qrtile .qrbtn { width: 100%; } .qrtile.qr-s { width: 9.5rem; } .qrtile.qr-l { width: 15rem; } .qrinfo { justify-items: center; } }
.qrmodal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 1rem; background: rgba(5, 3, 8, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.qrmodal[hidden] { display: none; }
.qrmodal-card { position: relative; display: grid; gap: 0.8rem; justify-items: center; text-align: center; padding: 1.4rem; border-radius: 28px; background: var(--panel-solid); border: 1px solid var(--line); width: min(94vw, 27rem); max-height: 94vh; overflow: auto; }
.qrname { font-size: 1.2rem; }
.qrbig { background: #fff; padding: 0.8rem; border-radius: 22px; width: min(76vw, 21rem); }
.qrbig svg { width: 100%; height: auto; display: block; }
.qrmodal-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.qrclose { position: absolute; top: 0.6rem; right: 0.6rem; width: 2.4rem; min-height: 0; height: 2.4rem; padding: 0; border-radius: 50%; font-size: 1.5rem; line-height: 1; background: rgba(255, 255, 255, 0.08); box-shadow: none; }
.qrclose::after { display: none; }
body.qropen { overflow: hidden; }

.profile-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0 0 1.2rem; }
.profile-actions form, .profile-actions p { margin: 0; }

/* Éditeur du pied de page */
.frows { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.6rem; }
.frows .frow { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; padding: 0.7rem 0.9rem; border-radius: 16px; background: var(--panel-solid); border: 1px solid var(--line); transition: border-color 0.3s, background 0.3s; }
.frows .frow.moved { border-color: var(--rose); background: rgba(255, 77, 141, 0.08); }
.fmain { flex: 1 1 18rem; display: grid; gap: 0.35rem; min-width: 0; }
.fopts { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.fopts select { width: auto; min-height: 38px; padding: 0.25rem 1.8rem 0.25rem 0.6rem; font-size: 0.82rem; }
.ftarget { font-size: 0.78rem; }
.fpreview { padding: 1rem; border-radius: 16px; border: 1px dashed var(--line); background: rgba(0, 0, 0, 0.25); }
.fpreview .links { margin: 0.3rem 0; }
.foot .adultnote { font-weight: 700; }
.foot .foottext, .foot .copyright { margin: 0.4rem 0; }
.foot .social .meta { margin-right: 0.3rem; }

/* Fenêtres de confirmation intégrées */
.amodal { position: fixed; inset: 0; z-index: 100010; display: grid; place-items: center; padding: 1rem; background: rgba(5, 3, 8, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.amodal[hidden] { display: none; }
.amodal-card { width: min(94vw, 27rem); max-height: 94vh; overflow: auto; display: grid; gap: 0.8rem; padding: 1.3rem; border-radius: 24px; background: var(--panel-solid); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.am-title { font-size: 1.1rem; }
.am-msg { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.am-err { margin: 0; color: #ff8a80; font-size: 0.85rem; font-weight: 700; }
.am-actions { display: flex; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; }
.am-ok.danger { background: linear-gradient(135deg, #ff6b6b, #c0392b); }
.amodal [hidden], .qrmodal [hidden] { display: none !important; }

/* Administration : bouton « Toutes les rubriques » et rangée « Voir le site » regroupée dedans */
.adminall { margin: 0 0 0.4rem; }
.adminall summary { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none; padding: 0.5rem 1.1rem; border-radius: 999px; font-weight: 800; font-size: 0.9rem; background: var(--panel-solid); border: 1px solid var(--line); }
.adminall summary::-webkit-details-marker { display: none; }
.adminall summary .ico { width: 1.1rem; height: 1.1rem; color: var(--rose); }
.adminall summary .count { font-size: 0.72rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.adminall[open] summary { background: var(--grad); border-color: transparent; color: #fff; }
.adminall[open] summary .ico, .adminall[open] summary .count { color: #fff; }
.agrid { display: grid; gap: 1rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 0.6rem 0 0.8rem; padding: 1rem; border-radius: 22px; background: var(--panel-solid); border: 1px solid var(--line); }
.agroup h4 { margin: 0 0 0.45rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.agroup a { display: inline-block; margin: 0.15rem 0.25rem 0.15rem 0; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid var(--line); background: #08060b; color: var(--text); text-decoration: none; font-size: 0.85rem; font-weight: 700; }
.agroup a:hover { border-color: var(--rose); }
.agroup a.on { background: var(--grad); border-color: transparent; color: #fff; }
.adminbar a.home { background: transparent; color: var(--muted); }

/* Fil : aperçu des photos choisies ; barre d'administration non collante (elle ne gêne plus la lecture) */
.filepreview { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0; }
.fthumb { position: relative; width: 5.2rem; height: 5.2rem; border-radius: 14px; overflow: hidden; background: var(--panel-solid); border: 1px solid var(--line); display: grid; place-items: center; font-size: 0.7rem; text-align: center; padding: 0.2rem; }
.fthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fthumb button { position: absolute; top: 0.2rem; right: 0.2rem; min-height: 0; width: 1.5rem; height: 1.5rem; padding: 0; border-radius: 50%; font-size: 1rem; line-height: 1; background: rgba(0, 0, 0, 0.65); box-shadow: none; }
.fthumb button::after { display: none; }
.adminbar { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
.pvcomments { display: grid; gap: 0.4rem; margin-top: 0.6rem; }
.pvcomments form { display: flex; gap: 0.5rem; margin: 0; }
.pvcomments form input { flex: 1; }
[data-pvlike].on { color: var(--rose); }

/* Calendrier des événements : compact (cases basses, largeur limitée) */
.calbox { padding: 0.8rem 1rem; }
.calgrid { gap: 0.15rem; max-width: 21rem; margin: 0 auto; }
.calday { aspect-ratio: auto; height: 2.3rem; font-size: 0.85rem; border-radius: 10px; }
.calday .dots { bottom: 0.15rem; }
.calhead { max-width: 21rem; margin: 0.4rem auto; }
.daterange { max-width: 21rem; margin: 0.8rem auto 0; }
.upmsg { margin: 0.3rem 0; font-size: 0.85rem; }
.calday { height: 2rem; font-size: 0.82rem; }
.calhead { margin: 0.15rem auto; }
.calhead .iconbtn { width: 2.2rem; height: 2.2rem; }
.daterange { gap: 0.4rem; align-items: flex-end; }
.daterange label { flex: 1 1 6.5rem; margin: 0; font-size: 0.78rem; }
.daterange input { min-height: 38px; padding: 0.25rem 0.5rem; }
.daterange button, .daterange .btnlink { flex: 0 0 auto; min-height: 38px; }
.calbox { padding: 0.6rem 0.8rem; }
.calday { height: 1.9rem; }
.calgrid { gap: 0.1rem; }

.filepreview:empty { display: none; }

/* ===== Stories (bandeau du fil + visionneuse) ===== */
.storybar { display: flex; gap: 0.9rem; overflow-x: auto; padding: 0.4rem 0.2rem 0.8rem; margin-bottom: 0.4rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.storybar::-webkit-scrollbar { display: none; }
.sb-item { flex: 0 0 auto; width: 4.9rem; display: grid; justify-items: center; gap: 0.35rem; text-decoration: none; color: var(--text); }
.sb-ring { position: relative; width: 4.4rem; height: 4.4rem; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, #ff4d8d, #ff9a3c, #8b5cf6, #ff4d8d); display: grid; place-items: center; }
.sb-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg, #0b0710); background: #1a1424; }
.sb-item.seen .sb-ring { background: #4a4357; }
.sb-add .sb-ring { background: var(--line); }
.sb-add .sb-ring b { position: absolute; right: -0.1rem; bottom: -0.1rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 1rem; border: 2px solid var(--bg, #0b0710); }
.sb-reels .sb-ring { background: var(--grad); }
.sb-reels .sb-ring i { font-style: normal; font-size: 1.7rem; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--bg, #0b0710); }
.sb-name { font-size: 0.74rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.sv { position: fixed; inset: 0; z-index: 100003; background: #000; display: grid; grid-template-rows: auto 1fr auto; max-width: 32rem; margin: 0 auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
@media (min-width: 640px) { .sv { border-radius: 18px; inset: 1rem auto; width: 26rem; left: 50%; transform: translateX(-50%); overflow: hidden; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.85); } }
.sv-bars { position: absolute; top: 0.5rem; left: 0.6rem; right: 0.6rem; z-index: 5; display: flex; gap: 0.25rem; }
.sv-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.sv-bars b { display: block; height: 100%; width: 0; background: #fff; }
.sv-top { position: absolute; top: 1.1rem; left: 0.6rem; right: 0.6rem; z-index: 5; display: flex; align-items: center; gap: 0.5rem; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.sv-user { display: flex; align-items: center; gap: 0.5rem; color: #fff; text-decoration: none; min-width: 0; }
.sv-user img { width: 2.2rem; height: 2.2rem; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.sv-ago { font-size: 0.78rem; opacity: 0.8; }
.sv-music { margin-left: auto; font-size: 0.74rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(0, 0, 0, 0.45); max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-top .sv-mute { margin-left: auto; } .sv-music:not([hidden]) ~ .sv-mute { margin-left: 0; }
.sv-btn { min-height: 0; width: 2.2rem; height: 2.2rem; padding: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 1.2rem; line-height: 1; box-shadow: none; }
.sv-btn::after { display: none; }
.sv-stage { grid-row: 1 / 4; display: grid; place-items: center; background: #000; }
.sv-media { width: 100%; height: 100%; object-fit: contain; }
.sv-text { padding: 2rem; font-size: clamp(1.4rem, 6vw, 2rem); font-weight: 800; text-align: center; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); word-break: break-word; }
.sv-cap { position: absolute; left: 0; right: 0; bottom: 4.2rem; z-index: 4; margin: 0; padding: 2.5rem 1rem 0.6rem; color: #fff; text-align: center; background: linear-gradient(transparent, rgba(0, 0, 0, 0.65)); }
.sv-foot { position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.9rem; z-index: 5; display: flex; justify-content: space-between; align-items: center; }
.sv-like { font-size: 1.7rem; width: 3rem; height: 3rem; } .sv-like.on { color: #ff4d8d; }
.sv-views { min-height: 0; padding: 0.4rem 0.9rem; border-radius: 999px; background: rgba(0, 0, 0, 0.45); color: #fff; box-shadow: none; font-size: 0.85rem; margin-left: auto; }
.sv-views::after { display: none; }
.sv-hit { position: absolute; inset: 3.4rem 0 5rem; z-index: 3; }
.sv-menu { position: absolute; left: 0.8rem; right: 0.8rem; bottom: 4.8rem; z-index: 8; display: grid; gap: 0.4rem; padding: 0.9rem; border-radius: 18px; background: rgba(20, 14, 30, 0.96); color: #fff; max-height: 55%; overflow: auto; }
.sv-menu a, .sv-menu button { display: flex; align-items: center; gap: 0.5rem; color: #fff; text-decoration: none; padding: 0.6rem 0.8rem; border-radius: 12px; background: rgba(255, 255, 255, 0.08); min-height: 0; box-shadow: none; justify-content: flex-start; }
.sv-menu img { width: 1.8rem; height: 1.8rem; border-radius: 50%; object-fit: cover; }
.sv-del { color: #ff8a80 !important; }
.sv-paused .sv-bars b { opacity: 0.7; }
/* création */
.creator { display: grid; gap: 0.9rem; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; padding: 0.3rem; border-radius: 999px; background: var(--panel-solid); border: 1px solid var(--line); }
.seg label { margin: 0; } .seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; text-align: center; padding: 0.55rem 0.8rem; border-radius: 999px; font-weight: 800; cursor: pointer; }
.seg input:checked + span { background: var(--grad); color: #fff; }
.cr-preview { display: grid; place-items: center; width: min(100%, 17rem); aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 22px; overflow: hidden; background: var(--panel-solid); border: 1px dashed var(--line); }
.cr-preview.reel { width: min(100%, 15rem); }
.cr-preview.has { border-style: solid; }
.cr-preview img, .cr-preview video { width: 100%; height: 100%; object-fit: cover; }
.cr-ph { color: var(--muted); font-size: 0.85rem; padding: 1rem; text-align: center; }
.filebtn { display: block; text-align: center; padding: 0.8rem; border-radius: 16px; border: 1px dashed var(--rose); font-weight: 800; cursor: pointer; }
.filebtn input { display: block; margin: 0.5rem auto 0; max-width: 100%; }
.cr-textbox { display: grid; place-items: center; width: min(100%, 17rem); aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 22px; padding: 1.2rem; text-align: center; font-size: 1.5rem; font-weight: 800; color: #fff; word-break: break-word; }
.cr-pal { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.cr-pal button { width: 2.2rem; height: 2.2rem; min-height: 0; padding: 0; border-radius: 50%; border: 3px solid transparent; box-shadow: none; }
.cr-pal button::after { display: none; }
.cr-pal button.on { border-color: #fff; }
.cr-pal [data-bg=rose] { background: #ff4d8d; } .cr-pal [data-bg=violet] { background: #8b5cf6; } .cr-pal [data-bg=teal] { background: #14b8a6; } .cr-pal [data-bg=amber] { background: #f59e0b; } .cr-pal [data-bg=blue] { background: #3b82f6; } .cr-pal [data-bg=green] { background: #22c55e; } .cr-pal [data-bg=night] { background: #1b1230; }
.musicpick { border: 1px solid var(--line); border-radius: 18px; padding: 0.6rem 0.9rem; display: grid; gap: 0.3rem; }
.musicpick .mrow { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.6rem; margin: 0; padding: 0.35rem 0; }
.musicpick .mrow span { flex: 1; min-width: 0; } .musicpick .mrow input { flex: 0 0 auto; width: auto; }
.cr-msg[hidden] { display: none; }
.storyadm { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.sa { display: grid; gap: 0.6rem; align-content: start; }
.sa-media { aspect-ratio: 9 / 14; border-radius: 14px; overflow: hidden; background: #000; display: grid; place-items: center; }
.sa-media img, .sa-media video { width: 100%; height: 100%; object-fit: cover; }
.sa-text { width: 100%; height: 100%; display: grid; place-items: center; padding: 1rem; text-align: center; color: #fff; font-weight: 800; }
.sbg-rose { background: #ff4d8d; } .sbg-violet { background: #8b5cf6; } .sbg-teal { background: #14b8a6; } .sbg-amber { background: #f59e0b; } .sbg-blue { background: #3b82f6; } .sbg-green { background: #22c55e; } .sbg-night { background: #1b1230; }
.newslist { margin: 0.4rem 0 0.2rem 1.1rem; display: grid; gap: 0.35rem; }
.mtrack audio { width: 100%; margin: 0.5rem 0; }

/* ===== Reels ===== */
body.reels-page .top, body.reels-page .tabbar, body.reels-page .foot { display: none; }
body.reels-page main { padding: 0; margin: 0; max-width: none; }
.reels { position: fixed; inset: 0; z-index: 60; background: #000; color: #fff; max-width: 32rem; margin: 0 auto; }
@media (min-width: 640px) { .reels { border-radius: 18px; inset: 0.6rem auto; width: 26rem; left: 50%; transform: translateX(-50%); overflow: hidden; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.9); } }
.rl-top { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0.8rem; background: linear-gradient(rgba(0, 0, 0, 0.55), transparent); }
.rl-back, .rl-plus { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #fff; text-decoration: none; font-size: 1.3rem; }
.rl-tabs { display: flex; gap: 0.3rem; }
.rl-tabs button { min-height: 0; padding: 0.3rem 0.7rem; background: transparent; color: rgba(255, 255, 255, 0.7); box-shadow: none; font-weight: 800; font-size: 0.88rem; border-radius: 999px; }
.rl-tabs button::after { display: none; }
.rl-tabs button.on { color: #fff; background: rgba(255, 255, 255, 0.2); }
.rl-scroll { position: absolute; inset: 0; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.rl-scroll::-webkit-scrollbar { display: none; }
.rl { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; background: #000; overflow: hidden; }
.rl-v { width: 100%; height: 100%; object-fit: cover; background: #000; }
.rl-shade { position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, 0.7)); pointer-events: none; }
.rl-pause { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4rem; color: rgba(255, 255, 255, 0.85); pointer-events: none; }
.rl-pause[hidden] { display: none; }
.rl-rail { position: absolute; right: 0.6rem; bottom: 5.5rem; display: grid; gap: 1rem; justify-items: center; z-index: 4; }
.rl-rail button { min-height: 0; background: none; color: #fff; box-shadow: none; padding: 0; display: grid; justify-items: center; gap: 0.1rem; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
.rl-rail button::after { display: none; }
.rl-rail button span { font-size: 1.9rem; line-height: 1; } .rl-rail button b { font-size: 0.74rem; }
.rl-like.on span { color: #ff4d8d; }
.rl-av img { width: 2.8rem; height: 2.8rem; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.rl-snd, .rl-more { font-size: 1.4rem !important; }
.rl-info { position: absolute; left: 0.9rem; right: 4.6rem; bottom: 1.6rem; z-index: 4; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.rl-info p { margin: 0.3rem 0; } .rl-info em { font-style: normal; font-weight: 800; color: #ffb3d1; }
.rl-user { color: #fff; font-weight: 800; text-decoration: none; }
.rl-mus { display: inline-block; font-size: 0.8rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: rgba(0, 0, 0, 0.45); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.25); z-index: 4; }
.rl-bar i { display: block; height: 100%; width: 0; background: #fff; }
.rl-burst { position: absolute; z-index: 7; font-size: 5rem; color: #ff4d8d; transform: translate(-50%, -50%); animation: rlburst 0.8s ease-out forwards; pointer-events: none; }
@keyframes rlburst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 25% { opacity: 1; transform: translate(-50%, -60%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1); } }
.rl-hint { position: absolute; left: 0; right: 0; top: 4rem; z-index: 6; text-align: center; font-size: 0.85rem; margin: 0; text-shadow: 0 1px 4px #000; pointer-events: none; }
.rl-hint[hidden] { display: none; }
.rl-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 0.6rem; padding: 2rem; z-index: 5; }
.rl-empty[hidden] { display: none; }
.rl-sheet { position: fixed; inset: 0; z-index: 100004; background: rgba(0, 0, 0, 0.6); display: grid; align-items: end; justify-items: center; }
.rl-sheet-card { width: min(100%, 32rem); max-height: 75vh; overflow: auto; background: var(--panel-solid, #15101f); color: var(--text, #fff); border-radius: 22px 22px 0 0; padding: 1rem; display: grid; gap: 0.6rem; }
.rl-sh-head { display: flex; justify-content: space-between; align-items: center; }
.rl-x { min-height: 0; width: 2.2rem; height: 2.2rem; padding: 0; border-radius: 50%; font-size: 1.4rem; line-height: 1; box-shadow: none; background: rgba(255, 255, 255, 0.1); }
.rl-x::after { display: none; }
.rl-c { display: flex; gap: 0.6rem; } .rl-c img { width: 2.2rem; height: 2.2rem; border-radius: 50%; object-fit: cover; } .rl-c p { margin: 0.1rem 0 0; }
.rl-cform { display: flex; gap: 0.5rem; margin: 0; } .rl-cform input { flex: 1; }
.rl-sheet-card a, .rl-sheet-card .rl-del { display: block; padding: 0.7rem 0.9rem; border-radius: 12px; background: rgba(255, 255, 255, 0.07); color: inherit; text-decoration: none; text-align: left; box-shadow: none; min-height: 0; }
.rl-del { color: #ff8a80 !important; }
.reelrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.reelthumb { position: relative; aspect-ratio: 9 / 14; border-radius: 12px; overflow: hidden; background: #000; display: block; }
.reelthumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.reelthumb span { position: absolute; left: 0.4rem; bottom: 0.3rem; font-size: 0.75rem; color: #fff; text-shadow: 0 1px 4px #000; }

/* ===== Profil : bandeau, avatar à cercle de story, carte QR, onglets ===== */
.profile2 .ptop { display: grid; gap: 1rem; margin-bottom: 0.8rem; }
@media (min-width: 880px) { .profile2 .ptop { grid-template-columns: 1fr 17rem; align-items: start; } }
.phero { position: relative; border-radius: 26px; overflow: hidden; background: var(--panel-solid); border: 1px solid var(--line); }
.pcover { height: 7.5rem; background: linear-gradient(135deg, #ff4d8d, #8b5cf6); }
.pcover.c1 { background: linear-gradient(135deg, #8b5cf6, #3b82f6); } .pcover.c2 { background: linear-gradient(135deg, #14b8a6, #3b82f6); } .pcover.c3 { background: linear-gradient(135deg, #f59e0b, #ff4d8d); } .pcover.c4 { background: linear-gradient(135deg, #22c55e, #14b8a6); } .pcover.c5 { background: linear-gradient(135deg, #1b1230, #8b5cf6); }
.pbody { display: flex; flex-wrap: wrap; gap: 0.9rem; padding: 0 1.1rem 0.4rem; align-items: flex-end; margin-top: -3.2rem; }
.pav { position: relative; flex: 0 0 auto; width: 7.2rem; height: 7.2rem; border-radius: 50%; padding: 4px; background: var(--panel-solid); display: block; }
.pav.hasstory { padding: 4px; background: conic-gradient(from 200deg, #ff4d8d, #ff9a3c, #8b5cf6, #ff4d8d); cursor: pointer; }
.pav img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--panel-solid); display: block; }
.pid { flex: 1 1 14rem; min-width: 0; padding-top: 3.4rem; }
.pid h1 { margin: 0 0 0.2rem; font-size: 1.7rem; }
.pid p { margin: 0.25rem 0; }
.phero .profile-actions { padding: 0.5rem 1.1rem 1.1rem; margin: 0; }
/* carte QR */
.qrcard { display: grid; justify-items: center; gap: 0.5rem; padding: 1rem 1rem 1.1rem; border-radius: 26px; text-align: center; background: linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box, var(--grad) border-box; border: 2px solid transparent; box-shadow: 0 18px 50px -22px var(--rose); }
.qrc-head { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.qrc-tag { padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--grad); color: #fff; }
.qrc-code { width: min(13rem, 100%); padding: 0; border: 0; background: none; box-shadow: none; min-height: 0; border-radius: 20px; cursor: zoom-in; transition: transform 0.2s; }
.qrc-code::after { display: none; }
.qrc-code:hover { transform: scale(1.03); }
.qrc-code .qrbox { width: 100%; margin: 0; padding: 0.7rem; border-radius: 20px; background: #fff; display: block; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6); }
.qrc-name { font-size: 1.15rem; }
.qrc-actions .small { white-space: normal; }
.ptabs { position: sticky; top: var(--hdr, 3.9rem); z-index: 20; display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.5rem 0.2rem; margin: 0 0 0.8rem; background: linear-gradient(var(--bg, #0b0710) 70%, transparent); scrollbar-width: none; }
.ptabs::-webkit-scrollbar { display: none; }
.ptabs a { flex: 0 0 auto; padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--text); text-decoration: none; font-weight: 800; font-size: 0.88rem; }
.ptabs a:hover { border-color: var(--rose); }
.profile2 .block[id] { scroll-margin-top: 7.5rem; }
.seg label { position: relative; }

.reelthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Profil : QR juste sous l'identité, boutons compacts */
.profile2 .ptop { grid-template-areas: "hero" "qr" "act"; }
.profile2 .phero { grid-area: hero; } .profile2 .qrcard { grid-area: qr; } .profile2 .ptop > .profile-actions { grid-area: act; }
@media (min-width: 880px) { .profile2 .ptop { grid-template-areas: "hero qr" "act qr"; grid-template-rows: auto 1fr; align-content: start; } }
.profile2 .ptop > .profile-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.5rem; margin: 0; padding: 0; }
.profile2 .ptop > .profile-actions form, .profile2 .ptop > .profile-actions p { margin: 0; }
.profile2 .ptop > .profile-actions button, .profile2 .ptop > .profile-actions .btnlink { width: 100%; min-height: 44px; padding: 0.55rem 0.4rem; font-size: 0.9rem; white-space: nowrap; justify-content: center; text-align: center; }
.profile2 .pcover { height: 5.5rem; } .profile2 .pbody { margin-top: -2.8rem; } .profile2 .pav { width: 6.2rem; height: 6.2rem; } .profile2 .pid { padding-top: 3rem; }
.profile2 .pid h1 { font-size: 1.45rem; } .profile2 .pid p { margin: 0.15rem 0; }
.profile2 .phero .profile-actions { display: none; }
.qrc-code { width: min(11.5rem, 100%); }
@media (min-width: 880px) { .profile2 .pcover { height: 7.5rem; } .profile2 .pid h1 { font-size: 1.7rem; } .qrc-code { width: min(13rem, 100%); } }
/* [hidden] doit toujours cacher, même quand un style donne un affichage */
.sv [hidden], .reels [hidden], .rl-sheet [hidden], .creator [hidden], .storybar [hidden], .musicpick [hidden] { display: none !important; }
/* Story : en-tête lisible (musique sur la 2e ligne), boutons non écrasés */
.sv-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 0.35rem 0.4rem; }
.sv-user { grid-column: 1; min-width: 0; } .sv-user strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sv-ago { white-space: nowrap; }
.sv-top .sv-btn { width: 2.2rem; height: 2.2rem; flex: none; } .sv-top .sv-mute { grid-column: 2; margin: 0; } .sv-top .sv-more { grid-column: 3; } .sv-top .sv-close { grid-column: 4; }
.sv-music { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-media { object-fit: cover; } video.sv-media { object-fit: contain; }
/* Reels : onglets sur une seule ligne */
.rl-tabs button { white-space: nowrap; padding-left: 0.6rem; padding-right: 0.6rem; font-size: 0.85rem; }

/* Nouveaux membres : flou imposé (galeries, photos et vidéos du fil, stories, reels) et bandeau */
body.nm-blur figure img, body.nm-blur figure video, body.nm-blur .grid img, body.nm-blur .grid video, body.nm-blur .post video, body.nm-blur .sv-media, body.nm-blur .rl-v, body.nm-blur .gal img, body.nm-blur .albumcard img { filter: blur(var(--dblur, 18px)); transition: filter 0.2s; }
.nmbanner { margin: 0.5rem auto; max-width: 62rem; padding: 0.6rem 1rem; border-radius: 14px; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.4); color: #fde68a; font-size: 0.88rem; }
.nmbanner a { color: #fff; font-weight: 800; }

/* Certifications (administration) : cartes avec photo */
.certlist { display: grid; gap: 0.8rem; }
.certcard { display: grid; grid-template-columns: 7rem 1fr; gap: 0.9rem; align-items: start; }
.certthumb { position: relative; display: grid; place-items: center; width: 7rem; height: 9rem; border-radius: 16px; overflow: hidden; background: var(--panel-solid); border: 1px solid var(--line); font-size: 2.2rem; text-decoration: none; }
.certthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.certvid { position: absolute; left: 0.3rem; bottom: 0.3rem; font-style: normal; font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: rgba(0, 0, 0, 0.7); color: #fff; }
.certinfo { display: grid; gap: 0.35rem; min-width: 0; }

/* Voyages et sorties en club */
.planbtns { margin-bottom: 0.6rem; gap: 0.5rem; }
.plancard { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.8rem 1rem; border-radius: 18px; background: linear-gradient(135deg, rgba(255, 77, 141, 0.14), rgba(139, 92, 246, 0.14)); border: 1px solid var(--line); }
.plancard.trip { background: linear-gradient(135deg, rgba(20, 184, 166, 0.16), rgba(59, 130, 246, 0.14)); }
.planico { font-size: 1.8rem; line-height: 1; }
.planwhen { font-weight: 700; }
.amodal-card.plan { max-height: 94vh; overflow: auto; }
.amodal-card.plan .seg { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* Profil : galeries */
.galtitle { margin: 1rem 0 0.5rem; font-size: 1.05rem; }
.galbox { margin-top: 0.4rem; }
.lockedgal { display: grid; justify-items: start; gap: 0.5rem; padding: 1rem; border-radius: 18px; border: 1px dashed var(--line); background: rgba(255, 255, 255, 0.03); }
.lockedgal p { margin: 0; } .lockico { font-size: 1.8rem; }

.certbanner { display: flex; gap: 0.8rem; align-items: center; margin: 0 0 0.8rem; padding: 0.8rem 1rem; border-radius: 18px; text-decoration: none; color: var(--text); background: linear-gradient(135deg, rgba(110, 231, 183, 0.14), rgba(59, 130, 246, 0.12)); border: 1px solid rgba(110, 231, 183, 0.4); }
.certbanner > span:first-child { font-size: 1.6rem; color: #6ee7b7; }
.topnav a.certtab { color: #6ee7b7; font-weight: 800; }

/* Statistiques */
.statrange { gap: 0.4rem; align-items: center; }
.statnav { display: flex; gap: 0.4rem; overflow-x: auto; margin: 0.4rem 0 0.8rem; padding-bottom: 0.3rem; }
.statnav a { flex: 0 0 auto; padding: 0.35rem 0.9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--text); text-decoration: none; font-size: 0.85rem; font-weight: 700; }
.statsec { scroll-margin-top: 4.5rem; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); gap: 0.5rem; margin: 0.6rem 0 1rem; }
.kpi { display: grid; gap: 0.15rem; align-content: start; padding: 0.7rem 0.8rem; border-radius: 16px; background: var(--panel-solid); border: 1px solid var(--line); }
.kl { font-size: 0.76rem; color: var(--muted); } .kv { font-size: 1.35rem; line-height: 1.15; } .kh { font-size: 0.72rem; color: var(--muted); }
.delta { font-size: 0.78rem; font-weight: 800; } .delta.up { color: #6ee7b7; } .delta.down { color: #fca5a5; }
.statblock { margin: 0.8rem 0; } .statblock h3 { margin: 0 0 0.4rem; font-size: 0.98rem; }
.chart { width: 100%; height: auto; display: block; } .chart rect { fill: var(--rose); } .chart.c2 rect { fill: #38bdf8; } .chart.c3 rect { fill: #a78bfa; } .chart.c4 rect { fill: #6ee7b7; } .chart.c5 rect { fill: #fb923c; } .chart .ax { fill: var(--muted); font-size: 10px; }
.hbars { list-style: none; margin: 0.3rem 0; padding: 0; display: grid; gap: 0.45rem; }
.hbars li { display: grid; grid-template-columns: minmax(0, 8.5rem) 1fr auto; gap: 0.6rem; align-items: center; font-size: 0.88rem; }
.hbars .hl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hbars small { color: var(--muted); }
.hb { width: 100%; height: 0.6rem; } .hb rect { fill: var(--rose); }

/* Rôles détaillés */
.rolecard > summary { display: block; cursor: pointer; }
.subblock { margin: 0.5rem 0; padding: 0.5rem 0.7rem; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.subblock > summary { cursor: pointer; }
.modperm label.check { align-items: flex-start; }

/* Couverture, J'aime photos, visus, fiche du chat, recherche admin, santé */
.pcover { position: relative; overflow: hidden; } .pcoverimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.covbtn { position: absolute; right: 0.6rem; bottom: 0.6rem; z-index: 2; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); }
.coverprev { height: 9rem; border-radius: 18px; margin: 0.6rem 0; position: relative; overflow: hidden; } .covsw { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--line); padding: 0; cursor: pointer; }
.mlike { text-align: center; padding: 0.15rem 0; } .likebtn { background: none; border: 0; color: var(--muted); font-weight: 800; cursor: pointer; padding: 0.2rem 0.5rem; } .likebtn.on { color: var(--rose); }
.visgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.7rem; } .visu { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-solid); } .visu img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; } .visu figcaption { display: grid; gap: 0.15rem; padding: 0.5rem 0.6rem; font-size: 0.85rem; }
.lightbox { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.92); padding: 1rem; overflow: auto; text-align: center; } .lightbox:target { display: block; } .lightbox img { max-width: 100%; max-height: 82vh; border-radius: 14px; } .lbclose { position: fixed; top: 0.8rem; right: 1rem; font-size: 1.6rem; color: #fff; text-decoration: none; }
.vrow { align-items: flex-start; flex-wrap: wrap; } .vthumb { width: 5rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; } .vedit { display: grid; gap: 0.3rem; flex: 1; min-width: 12rem; }
.cardsheet { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.6); display: grid; align-items: end; justify-items: center; } .cs-card { position: relative; width: min(30rem, 100%); background: var(--panel-solid); border-radius: 22px 22px 0 0; padding: 1.2rem; display: grid; gap: 0.5rem; justify-items: center; text-align: center; border: 1px solid var(--line); } .cs-x { position: absolute; top: 0.6rem; right: 0.6rem; background: none; border: 0; color: var(--text); font-size: 1.3rem; cursor: pointer; } .cs-actions { justify-content: center; flex-wrap: wrap; } .cs-back { width: 100%; }
.adminsearch { position: relative; margin: 0.4rem 0; } .adminsearch input { width: 100%; } .adminres { list-style: none; margin: 0.2rem 0 0; padding: 0.3rem; position: absolute; left: 0; right: 0; z-index: 30; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 0.1rem; } .adminres li { padding: 0.4rem 0.6rem; border-radius: 10px; } .adminres li:hover { background: rgba(255, 255, 255, 0.06); }
.hrow { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.45rem 0; border-bottom: 1px solid var(--line); } .hrow .hi { font-size: 1.2rem; }

/* Recherche des clubs et partenaires */
.dirsearch { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0; } .dirsearch input[type=search] { flex: 1 1 14rem; } .chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.4rem 0 0.8rem; }
.clubphoto { width: 100%; max-height: 18rem; object-fit: cover; border-radius: 18px; margin: 0.5rem 0; }

/* Annuaire : cartes, recherche, fenêtre de fiche (comme les maquettes) */
.vi { width: 1em; height: 1em; vertical-align: -0.12em; flex: none; }
.dsearch { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; padding: 0.6rem; border-radius: 20px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); margin: 0.5rem 0; }
.dsearch select { width: auto; flex: 0 0 13rem; }
.dsin { flex: 0 1 22rem; display: flex; align-items: center; gap: 0.5rem; padding: 0 0.8rem; border-radius: 14px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); color: var(--muted); }
.dsin input { border: 0; background: transparent; box-shadow: none; flex: 1; min-width: 0; padding: 0.7rem 0; }
.dpills { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1 1 auto; justify-content: flex-end; }
.dpill { padding: 0.45rem 0.9rem; border-radius: 999px; font-weight: 700; font-size: 0.85rem; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); color: var(--text); text-decoration: none; }
.dpill.on { background: linear-gradient(90deg, #ec4899, #ff7a45); border-color: transparent; color: #fff; }
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin: 0.8rem 0; }
.dcard { display: block; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-solid); color: var(--text); text-decoration: none; transition: transform 0.15s; }
.dcard:hover { transform: translateY(-2px); }
.dimg { position: relative; display: block; height: 11.5rem; background: linear-gradient(135deg, #4c1d95, #be185d); }
.dimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dimg::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, var(--panel-solid)); }
.dph { display: grid; place-items: center; height: 100%; font-size: 3rem; font-weight: 800; color: rgba(255, 255, 255, 0.7); }
.dbadge, .drate { position: absolute; top: 0.7rem; z-index: 1; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; backdrop-filter: blur(6px); }
.dbadge { left: 0.7rem; background: rgba(120, 20, 60, 0.7); color: #ff7ab8; border: 1px solid rgba(255, 70, 140, 0.5); }
.drate { right: 0.7rem; background: rgba(0, 0, 0, 0.6); color: #fff; } .drate .vi { color: #facc15; }
.dbody { display: grid; gap: 0.35rem; padding: 0.9rem 1.1rem 1rem; } .dbody strong { font-size: 1.15rem; }
.dloc { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); margin: 0; } .dloc .vi { color: #ff4d8d; }
.ddesc { font-size: 0.85rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.dmore { margin-top: 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--line); color: #ff4d8d; font-weight: 800; font-size: 0.9rem; }
.dmodal { display: none; position: fixed; inset: 0; z-index: 120; place-items: center; padding: 0.8rem; } .dmodal:target { display: grid; }
.dm-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(4px); }
.dm-card { position: relative; width: min(42rem, 100%); max-height: 92vh; overflow: auto; border-radius: 24px; background: linear-gradient(180deg, #1b1230, #0d0a16); border: 1px solid var(--line); padding: 0 1.4rem 1.4rem; }
.dm-x { position: absolute; top: 0.9rem; right: 1rem; z-index: 3; color: #fff; font-size: 1.3rem; text-decoration: none; background: rgba(0, 0, 0, 0.4); width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; }
.dm-banner { height: 11rem; margin: 0 -1.4rem; overflow: hidden; position: relative; background: linear-gradient(135deg, #4c1d95, #be185d); } .dm-banner img { width: 100%; height: 100%; object-fit: cover; filter: blur(3px) brightness(0.7); transform: scale(1.1); }
.dm-head { display: flex; gap: 1rem; align-items: flex-end; margin-top: -2.6rem; position: relative; } .dm-head h2 { margin: 0; font-size: 1.6rem; }
.dm-logo { width: 5rem; height: 5rem; flex: none; border-radius: 18px; overflow: hidden; border: 2px solid #ec4899; background: #000; display: grid; place-items: center; } .dm-logo img { width: 100%; height: 100%; object-fit: cover; } .dm-logo b { font-size: 2rem; }
.dm-lab { font-size: 0.7rem; letter-spacing: 0.08em; font-weight: 800; color: #ec4899; margin: 1.1rem 0 0.3rem; } .dm-info .dm-lab { color: var(--muted); margin-top: 0; }
.dm-text { margin: 0; line-height: 1.55; } .dm-perk { margin: 0.8rem 0 0; padding: 0.6rem 0.8rem; border-radius: 14px; background: rgba(236, 72, 153, 0.12); border: 1px solid rgba(236, 72, 153, 0.35); }
.dm-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem 1.4rem; margin: 1rem 0; padding: 1rem; border-radius: 18px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.dm-val { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.2rem 0 0; font-weight: 700; } .dm-val a { color: inherit; text-decoration: none; } .ic.pk { color: #ff4d8d; } .ic.gr { color: #34d399; } .ic.or { color: #fb923c; }
.dm-rate { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between; margin: 0.4rem 0 0.8rem; } .stars-in { display: inline-flex; gap: 0.1rem; align-items: center; } .starbtn { background: none; border: 0; font-size: 1.4rem; color: #6b6480; cursor: pointer; padding: 0 0.1rem; } .starbtn.on { color: #facc15; }
.dm-btn { display: flex; justify-content: center; align-items: center; gap: 0.6rem; padding: 1rem; border-radius: 999px; font-weight: 800; color: #fff; text-decoration: none; background: linear-gradient(90deg, #ec4899, #ff7a45); }
@media (max-width: 600px) { .dpills { justify-content: flex-start; } }

.dm-rate .starbtn { background: none !important; border: 0 !important; box-shadow: none !important; width: auto; min-height: 0; padding: 0 0.1rem; }

.avform { margin: 0.3rem 0 0; } .avbtn { cursor: pointer; }

/* Pointage des entrées */
.ckscan { border-radius: 22px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); padding: 1rem; margin: 0.8rem 0; }
.ckscan header { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: space-between; } .ckscan h2 { margin: 0; font-size: 1rem; letter-spacing: 0.04em; }
.ckfile { cursor: pointer; } .ckhint { font-size: 0.82rem; color: var(--muted); padding: 0.7rem 0.9rem; border-radius: 14px; border: 1px solid var(--line); margin: 0.7rem 0; }
#ckvideowrap { display: grid; gap: 0.4rem; justify-items: center; margin: 0.6rem 0; } #ckvideo { width: min(26rem, 100%); border-radius: 16px; background: #000; max-height: 18rem; object-fit: cover; }
.ckinput { display: flex; gap: 0.6rem; flex-wrap: wrap; } .ckinput input { flex: 1 1 16rem; } .ckinput button { background: linear-gradient(90deg, #ec4899, #ff7a45); }
.ckusb { font-size: 0.8rem; color: #34d399; margin: 0.5rem 0 0; padding: 0.4rem 0.8rem; border-radius: 12px; border: 1px solid var(--line); } .ckusb.idle { color: #fbbf24; }
.ckresult { display: flex; gap: 0.8rem; align-items: center; margin-top: 0.7rem; padding: 0.8rem 1rem; border-radius: 16px; border: 1px solid var(--line); } .ckresult.ok { background: rgba(16, 185, 129, 0.15); border-color: #10b981; } .ckresult.warn { background: rgba(245, 158, 11, 0.15); border-color: #f59e0b; } .ckresult.err { background: rgba(239, 68, 68, 0.18); border-color: #ef4444; }
.cksearch { max-width: none; margin: 0.6rem 0; } .ckview { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ckcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 0.9rem; margin-top: 0.8rem; } .ckcols.one { grid-template-columns: 1fr; }
.ck-col { border-radius: 22px; border: 1px solid var(--line); padding: 0.9rem; display: grid; gap: 0.6rem; align-content: start; min-height: 8rem; } .ck-col h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }
.ck-col.green { background: rgba(16, 185, 129, 0.07); border-color: rgba(16, 185, 129, 0.35); } .ck-col.green h3 { color: #34d399; } .ck-col.amber { background: rgba(245, 158, 11, 0.07); border-color: rgba(245, 158, 11, 0.35); } .ck-col.amber h3 { color: #fbbf24; } .ck-col.blue { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.35); } .ck-col.blue h3 { color: #60a5fa; } .ck-col.red { background: rgba(239, 68, 68, 0.07); border-color: rgba(239, 68, 68, 0.35); } .ck-col.red h3 { color: #f87171; }
.ck-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: currentColor; flex: none; } .ck-badge { margin-left: auto; font-size: 0.65rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); text-transform: none; white-space: nowrap; }
.ck-card { display: flex; gap: 0.6rem; align-items: center; padding: 0.6rem; border-radius: 16px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); } .ck-info { flex: 1; min-width: 0; font-size: 0.8rem; } .ck-info strong { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 8rem; vertical-align: bottom; }
.ck-av { width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid #52525b; } .ck-av.in { border-color: #34d399; }
.ck-tag { display: inline-block; margin-left: 0.3rem; padding: 0.1rem 0.45rem; border-radius: 8px; font-size: 0.68rem; background: rgba(255, 255, 255, 0.08); } .ck-tag.amber { background: rgba(245, 158, 11, 0.2); color: #fbbf24; } .ck-tag.blue { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.ck-st { font-size: 0.72rem; } .ck-st.ok { color: #34d399; } .ck-st.amber { color: #fbbf24; } .ck-st.bad { color: #f87171; }
.ck-b { padding: 0.4rem 0.7rem; border-radius: 12px; font-size: 0.75rem; font-weight: 700; border: 1px solid; background: transparent; cursor: pointer; white-space: nowrap; } .ck-b.red { color: #fca5a5; border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.12); } .ck-b.green { color: #6ee7b7; border-color: rgba(16, 185, 129, 0.5); background: rgba(16, 185, 129, 0.12); }

/* un élément « hidden » reste toujours caché, même avec un style d affichage propre */
[hidden] { display: none !important; }
#ckroot { position: relative; left: 50%; width: min(96vw, 1400px); transform: translateX(-50%); }
.ck-col, .ck-card, .ck-info { min-width: 0; } .ck-info { overflow: hidden; } .ck-b { flex: none; }

/* Certification : décision toujours à portée, photo et bouton « Voir la photo » rapprochés */
.certbar { position: sticky; top: 0.5rem; z-index: 20; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.6rem; margin: 0.6rem 0; border-radius: 16px; background: rgba(15, 10, 26, 0.94); backdrop-filter: blur(8px); border: 1px solid var(--line); }
.certbar form { margin: 0; } .certfig { display: grid; gap: 0.3rem; } .certfig img { width: 100%; max-height: 65vh; object-fit: contain; border-radius: 14px; background: #000; display: block; } .certfig figcaption { margin-top: 0.2rem; line-height: 1.35; } .viewbtn { justify-self: start; }

/* Pointage : boutons Pointer / Dépointer côte à côte dans les quatre colonnes */
.ck-actions { display: grid; gap: 0.3rem; flex: none; } .ck-b[disabled] { opacity: 0.32; cursor: not-allowed; filter: grayscale(0.4); }
.ckfile.pulse { animation: ckpulse 1s ease-in-out 4; } @keyframes ckpulse { 50% { box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.55); } }

.certbanner.renew { border-color: rgba(245, 158, 11, 0.6); background: rgba(245, 158, 11, 0.1); }

.nactor { display: inline-block; vertical-align: middle; margin-right: 0.4rem; }

/* Mon compte : accueil */
.achead { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } .aname { font-size: 1.3rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.7rem; margin: 0.8rem 0; }
.tile { display: grid; gap: 0.25rem; padding: 0.9rem 1rem; border-radius: 18px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--text); text-decoration: none; } .tile:hover { border-color: rgba(236, 72, 153, 0.6); }

/* Assistant d'aide */
.aschat { display: grid; gap: 0.6rem; } .asmsgs { display: grid; gap: 0.5rem; max-height: 55vh; overflow-y: auto; padding: 0.5rem; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); min-height: 12rem; }
.asmsg { max-width: 90%; padding: 0.55rem 0.85rem; border-radius: 16px; } .asmsg p { margin: 0.15rem 0; } .asmsg.bot { background: rgba(124, 58, 237, 0.16); border: 1px solid rgba(124, 58, 237, 0.35); justify-self: start; } .asmsg.me { background: rgba(236, 72, 153, 0.16); border: 1px solid rgba(236, 72, 153, 0.35); justify-self: end; }
.aswho { font-size: 0.7rem; color: var(--muted); } .aslinks a { font-weight: 700; } .aschips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .faqrow { border: 1px solid var(--line); border-radius: 14px; padding: 0.5rem 0.8rem; margin: 0.4rem 0; }

/* Marketplace */
.mkcard { position: relative; } .mklink { position: absolute; inset: 0; z-index: 1; border-radius: 22px; } .mksave { position: absolute; right: 0.6rem; bottom: 0.6rem; z-index: 2; margin: 0; }
.mkprice-badge { font-size: 0.85rem; } .mkprice { width: 7rem; } .mkfilters .dpills { flex: 1 1 100%; justify-content: flex-start; }
.mkgal { display: flex; gap: 0.5rem; overflow-x: auto; margin: 0.6rem 0; } .mkgal img { height: 14rem; border-radius: 16px; object-fit: cover; } .mkprice-big { font-size: 1.6rem; font-weight: 800; margin: 0.2rem 0; }

/* Code du site */
.codebox { max-height: 70vh; overflow: auto; border-radius: 14px; border: 1px solid var(--line); background: #0b0814; font-size: 0.78rem; padding: 0.4rem 0; } .cl { display: flex; gap: 0.7rem; padding: 0 0.7rem; white-space: pre; } .cl:hover { background: rgba(255, 255, 255, 0.04); } .ln { color: var(--muted); min-width: 3.2rem; text-align: right; user-select: none; flex: none; } .cl code { white-space: pre; background: none; padding: 0; }
.codeedit { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; min-height: 30rem; }
.mkfilters select { width: auto; flex: 0 1 15rem; } .dsearch .mkprice { width: 7rem; flex: 0 0 7rem; } .mkdemo { margin-top: 1.2rem; }
.tbl { display: block; max-width: 100%; overflow-x: auto; }
.cms img { max-width: 100%; }

/* Live */
.liveplayer { margin: 0.6rem 0; } .liveph { display: grid; gap: 0.6rem; place-items: center; text-align: center; padding: 2.5rem 1rem; border-radius: 16px; background: #0b0814; border: 1px solid var(--line); } .livechat { max-height: 70vh; display: flex; flex-direction: column; } .livechat .cmsgs { min-height: 14rem; }

/* Cartes sous Bisous et Visites : même carte que Membres, heure et petites actions dessous */
.cardwrap { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .cardwrap .card { flex: 1; } .cwhen { text-align: center; font-style: italic; } .cacts { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; } .cacts form { margin: 0; } .cacts .iconbtn svg, .cacts button svg, .cacts a svg { width: 1.2rem; height: 1.2rem; }

/* Maintenance */
.maintbar { position: sticky; top: 0; z-index: 90; padding: 0.5rem 1rem; text-align: center; font-size: 0.85rem; font-weight: 600; background: #7a1d3a; color: #fff; } .maintbar.warn { background: #8a5a00; } .maintbar a { color: #fff; text-decoration: underline; }

/* Sélecteur d'émojis */
.emojibtn { width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 50%; font-size: 1.35rem; line-height: 1; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line); box-shadow: none; } .emojibtn:hover { background: rgba(255, 255, 255, 0.16); }
.emojipop { position: absolute; left: 0; bottom: calc(100% - 0.4rem); z-index: 60; width: min(22rem, 100%); background: #181322; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); padding: 0.55rem; } .emojipop[hidden] { display: none; }
.emosearch { width: 100%; margin-bottom: 0.4rem; border-radius: 999px; padding: 0.45rem 0.9rem; } .emotabs { display: flex; gap: 0.15rem; overflow-x: auto; padding-bottom: 0.35rem; border-bottom: 1px solid var(--line); } .emotab { flex: none; width: 2.1rem; height: 2.1rem; padding: 0; font-size: 1.15rem; background: none; border: 0; border-radius: 10px; box-shadow: none; opacity: 0.65; } .emotab.on { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.emogrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.1rem; max-height: 13rem; overflow-y: auto; padding-top: 0.4rem; } .emo { padding: 0.25rem 0; font-size: 1.45rem; line-height: 1.2; background: none; border: 0; border-radius: 10px; box-shadow: none; } .emo:hover, .emo:focus-visible { background: rgba(255, 255, 255, 0.14); transform: scale(1.18); } .emoempty { grid-column: 1 / -1; color: var(--muted); text-align: center; font-size: 0.85rem; }
.emojionly { font-size: 2.4rem; line-height: 1.15; }

/* En-tête sur écran moyen : la navigation défile au lieu de faire déborder les icônes */
@media (min-width: 900px) { .top .logo { flex: none; } .topnav { flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; } .topnav::-webkit-scrollbar { display: none; } .topnav a { flex: none; white-space: nowrap; } .topact { flex: none; } }
@media (min-width: 900px) and (max-width: 1239px) { .top { padding-left: 1rem; padding-right: 1rem; } .topnav a { padding: 0.4rem 0.55rem; font-size: 0.86rem; } }

/* Choix du mode de validation des inscriptions */
.modecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.7rem; margin: 0.5rem 0 0.8rem; } .modecard { position: relative; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.9rem 2.6rem 0.9rem 1rem; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); cursor: pointer; } .modecard.on, .modecard:has(input:checked) { border-color: #ec4899; background: rgba(236, 72, 153, 0.12); box-shadow: 0 0 0 1px rgba(236, 72, 153, 0.35); } .modecard input { position: absolute; right: 0.9rem; top: 0.9rem; width: 1.2rem; height: 1.2rem; accent-color: #ec4899; }

/* Protection du code */
.pbtoast { position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%) translateY(0.6rem); z-index: 400; max-width: 90vw; padding: 0.6rem 1rem; border-radius: 999px; background: rgba(20, 14, 32, 0.96); color: #fff; font-size: 0.85rem; border: 1px solid var(--line); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; } .pbtoast.on { opacity: 1; transform: translateX(-50%); } body.nocopy { -webkit-user-select: none; user-select: none; } body.nocopy input, body.nocopy textarea, body.nocopy select { -webkit-user-select: text; user-select: text; }
/* Référencement */
.gsnip { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.9rem 1rem; border-radius: 14px; background: #fff; color: #202124; max-width: 38rem; } .gsnip .gurl { color: #4d5156; font-size: 0.8rem; } .gsnip .gtitle { color: #1a0dab; font-size: 1.2rem; font-weight: 400; } .gsnip .gdesc { color: #4d5156; font-size: 0.88rem; } .codepre { white-space: pre-wrap; background: #0b0814; border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem; font-size: 0.8rem; overflow-x: auto; }
/* Formules d'abonnement : badge, mise en avant, détail */
.plan.hl, .block.planhl { border-color: #ec4899; box-shadow: 0 0 0 1px rgba(236, 72, 153, 0.4), 0 12px 40px -12px rgba(236, 72, 153, 0.5); } .plandetail { margin: 0.6rem 0; } .plandetail summary { cursor: pointer; font-weight: 600; } .plandetail .cms { margin-top: 0.5rem; }

/* Étiquette Admin / Modérateur à côté du nom des auteurs */
.staffbadge { background: rgba(167, 139, 250, 0.18); color: #c4b5fd; border-color: rgba(167, 139, 250, 0.5); font-weight: 800; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.05rem 0.45rem; vertical-align: middle; } .staffbadge.adm { background: linear-gradient(135deg, #ec4899, #8b5cf6); color: #fff; border: 0; }
/* Logo du site sur les vidéos pendant la lecture */
.vwm { position: relative; display: block; } .vwm video { display: block; width: 100%; } .vwm .vwmi { position: absolute; top: 0.55rem; right: 0.65rem; width: 18%; max-width: 120px; opacity: 0.7; pointer-events: none; } .vwm .vwmt { position: absolute; top: 0.55rem; right: 0.7rem; font-weight: 800; font-size: 0.85rem; color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); pointer-events: none; }

/* Connexions en direct */
.cxchips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .cxchip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); font-size: 0.82rem; } .cxchip code, .cxtbl code { font-size: 0.78rem; color: #ff9ec3; } .cxtbl tr.cxnew { animation: cxflash 2.4s ease-out; } @keyframes cxflash { from { background: rgba(236, 72, 153, 0.35); } to { background: transparent; } }

/* Direct avec la caméra et page « Live vidéo » (défilement vertical comme sur TikTok) */
.camwrap { position: relative; border-radius: 18px; overflow: hidden; background: #000; max-width: 34rem; margin: 0 auto 1rem; } .camwrap video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .camlive { position: absolute; top: 0.6rem; left: 0.7rem; background: rgba(220, 38, 38, 0.92); color: #fff; font-weight: 800; font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 999px; } .bad { color: #ff8a80; }
.lfwrap { max-width: 28rem; margin: 0 auto; } .lftop { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.3rem 0.2rem 0.6rem; } .lfback { text-decoration: none; font-size: 1.3rem; color: #fff; }
.lfscroll { height: calc(100dvh - 11rem); min-height: 22rem; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; border-radius: 22px; overscroll-behavior: contain; scrollbar-width: none; } .lfscroll::-webkit-scrollbar { display: none; }
.lfcard { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; background: #000; overflow: hidden; border-radius: 22px; margin-bottom: 0.5rem; display: flex; flex-direction: column; justify-content: flex-end; }
.lfvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0b0814; } .lfcover { position: absolute; inset: 0; display: grid; place-content: center; gap: 0.8rem; text-align: center; background: linear-gradient(160deg, #2a1245, #0b0814); color: #fff; } .lfcover span { font-size: 3.4rem; }
.lfinfo { position: absolute; top: 0.8rem; left: 0.8rem; right: 0.8rem; display: grid; gap: 0.15rem; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); z-index: 2; } .lfinfo strong { font-size: 1.05rem; }
.lfchat { position: relative; z-index: 2; max-height: 38%; overflow-y: auto; padding: 0.6rem 0.8rem 0.3rem; display: flex; flex-direction: column; gap: 0.25rem; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55)); mask-image: linear-gradient(180deg, transparent, #000 25%); scrollbar-width: none; } .lfmsg { font-size: 0.85rem; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); word-break: break-word; } .lfmsg b { color: #ffb3d1; margin-right: 0.15rem; }
.lfsend { position: relative; z-index: 2; display: flex; gap: 0.4rem; padding: 0.4rem 0.7rem 0.8rem; background: rgba(0, 0, 0, 0.55); } .lfsend input { flex: 1; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 0; color: #fff; padding: 0.55rem 0.9rem; } .lfsend button { border-radius: 50%; width: 2.5rem; height: 2.5rem; padding: 0; }
.lfmsgs { position: absolute; z-index: 3; top: 45%; left: 1rem; right: 1rem; text-align: center; color: #fff; font-weight: 700; text-shadow: 0 1px 6px #000; } .lferr { position: absolute; z-index: 4; left: 1rem; right: 1rem; bottom: 4rem; background: rgba(220, 38, 38, 0.9); color: #fff; padding: 0.4rem 0.7rem; border-radius: 12px; font-size: 0.82rem; } .lfnochat { z-index: 2; position: relative; text-align: center; color: #ccc; font-size: 0.8rem; padding: 0.6rem; } .lfsound { margin-top: 0.3rem; }

/* Favoris, reconduction à durée libre */
.favbtn { border-radius: 999px; } .favbtn.on { color: #ff6fa3; border-color: #ff6fa3; background: rgba(255, 111, 163, 0.14); } .cacts .favbtn { font-size: 1.05rem; line-height: 1; }
.renewbox { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; } .renewbox .daysin, .daysin { width: 5.2rem; padding: 0.35rem 0.5rem; border-radius: 10px; } .daypicks { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; } .daypicks .chip { padding: 0.2rem 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); box-shadow: none; font-size: 0.75rem; }

/* Agenda : cadre rose pour les événements officiels, cadre vert (turquoise) pour les soirées privées, comme les points de la légende */
.aitem { border-width: 2px; border-color: rgba(255, 77, 141, 0.7); box-shadow: 0 0 0 1px rgba(255, 77, 141, 0.12); } .aitem:hover { border-color: #ff4d8d; }
.aitem.private { border-width: 2px; border-color: rgba(20, 184, 166, 0.9); box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.18); } .aitem.private:hover { border-color: #2dd4bf; }

#caplabel input[type=range] { width: 100%; accent-color: #ec4899; } #caplabel #capnum { max-width: 9rem; }
label.caps .hint, label.caps b, #caplabel .hint, #caplabel b { text-transform: none; letter-spacing: 0; font-weight: 600; }