/* MonLiebe — feuille de style du domaine public / espace membre.
   Palette validée (§9.1) : dégradé rose/fuchsia + accent corail sur fond
   crème clair ; mode sombre.
   NOTE : CSS écrite à la main pour la Phase 0 ; un pipeline Tailwind
   (tailwind.config.js + tailwind.input.css) est prévu pour la suite. */

/* Palette CLAIRE (crème chaud) — définie sur :root, c'est la base. */
:root {
  --cream: #fdf6f1;
  --cream-2: #fbeee6;
  --ink: #2b2130;
  --ink-soft: #6b5b6e;
  --line: #efe1d9;
  --surface: #ffffff;
  --fuchsia: #e0338f;
  --fuchsia-deep: #b81f78;
  --coral: #ff7a59;
  --gold: #f4c86a;
  --grad: linear-gradient(120deg, var(--fuchsia) 0%, var(--coral) 100%);
  --glow-1: rgba(224, 51, 143, 0.16);
  --glow-2: rgba(255, 122, 89, 0.14);
  --radius: 16px;
  --shadow: 0 18px 50px -22px rgba(184, 31, 120, 0.35);
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Palette SOMBRE — prune chaud, pas de noir : « du light dans le dark ».
   Appliquée si l'OS est en sombre ET que l'utilisateur n'a pas forcé clair. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream: #241b29;
    --cream-2: #2c2031;
    --ink: #f6ecf3;
    --ink-soft: #c3adbd;
    --line: #43324a;
    --surface: #2e2336;
    --glow-1: rgba(224, 51, 143, 0.22);
    --glow-2: rgba(244, 200, 106, 0.12);
    --shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.55);
  }
}
/* Choix explicite de l'utilisateur (bouton) — gagne dans les deux sens. */
:root[data-theme="dark"] {
  --cream: #241b29;
  --cream-2: #2c2031;
  --ink: #f6ecf3;
  --ink-soft: #c3adbd;
  --line: #43324a;
  --surface: #2e2336;
  --glow-1: rgba(224, 51, 143, 0.22);
  --glow-2: rgba(244, 200, 106, 0.12);
  --shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* fond chaud avec deux halos très diffus — vivant mais discret */
  background:
    radial-gradient(60vw 60vw at 12% -10%, var(--glow-1), transparent 60%),
    radial-gradient(50vw 50vw at 100% 0%, var(--glow-2), transparent 55%),
    var(--cream);
  background-attachment: fixed;
}

/* La coquille grandit pour pousser le footer en bas même si peu de contenu. */
.site-shell { flex: 1 0 auto; }

a { color: var(--fuchsia-deep); }

.container {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── En-tête ─────────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.brand__mark { width: 34px; height: 34px; display: block; }
.brand__word {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  letter-spacing: 0.01em;
}
.nav { display: flex; align-items: center; gap: 14px; }
.nav a { color: var(--ink-soft); text-decoration: none; font-weight: 500; }
.nav a:hover { color: var(--ink); }

/* ── Boutons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn--primary { background: var(--grad); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn--block { width: 100%; }

/* ── Hero ────────────────────────────────────────────────── */
.hero { padding: 72px 0 48px; text-align: center; }
.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.08;
  margin: 0 0 16px;
}
.hero .accent {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p { font-size: 1.15rem; color: var(--ink-soft); max-width: 34ch; margin: 0 auto 28px; }
.hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Sections ────────────────────────────────────────────── */
.section { padding: 40px 0; }
.section h2 {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  text-align: center;
  margin: 0 0 24px;
}
.steps { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.step__n {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-weight: 700;
  margin-bottom: 10px;
}
/* ── Cartes décoratives de l'accueil (fausses, non cliquables) ── */
.decor-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 22px;
}
.decor-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  animation: floaty 7s ease-in-out infinite;
}
/* Répète le décalage par groupes de 4 : reste harmonieux même si le SA
   ajoute plus de 4 cartes vitrine. */
.decor-card:nth-child(4n+2) { animation-delay: -1.6s; }
.decor-card:nth-child(4n+3) { animation-delay: -3.2s; }
.decor-card:nth-child(4n+4) { animation-delay: -4.8s; }
.decor-card svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.decor-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.decor-card__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 14px; color: #fff; font-weight: 600;
  background: linear-gradient(to top, rgba(20, 8, 20, 0.55), transparent);
  display: flex; align-items: center; gap: 6px;
}
.decor-card__cap .dot { width: 8px; height: 8px; border-radius: 999px; background: #37e07a; box-shadow: 0 0 0 3px rgba(55,224,122,.25); }
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50% { transform: translateY(-10px) rotate(0.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .decor-card { animation: none; }
}

/* ── Cartes formulaire ───────────────────────────────────── */
.auth-wrap {
  position: relative;
  padding: 44px 0 60px;
  display: grid;
  place-items: center;
}
.card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--shadow);
}
.card--wide { max-width: 620px; }
.card h1 {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  margin: 0 0 6px;
}
.card .sub { color: var(--ink-soft); margin: 0 0 22px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.92rem; }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  color: var(--ink);
  font: inherit;
}
.field--check { display: flex; gap: 10px; align-items: flex-start; }
.field--check label { font-weight: 500; }
.field--multicheck .field__group-label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.92rem; }
.check-grid { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.check-grid__opt {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 500; font-size: 0.92rem; cursor: pointer;
}
.check-grid__opt input { margin: 0; accent-color: var(--fuchsia); }
.errorlist { list-style: none; padding: 0; margin: 6px 0 0; color: #c62b5a; font-size: 0.86rem; }
.form-error { color: #c62b5a; margin: 0 0 14px; font-size: 0.9rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.messages { list-style: none; padding: 0; margin: 0 0 18px; }
.messages li {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  margin-bottom: 8px;
}
.messages li.success { border-color: var(--fuchsia); }
.messages li.error { border-color: #c62b5a; }

.muted { color: var(--ink-soft); font-size: 0.9rem; }
.center { text-align: center; }

.site-footer {
  flex-shrink: 0;            /* reste collé en bas — jamais tiré par un body court */
  padding: 28px 0;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  background: var(--cream-2);
}
.site-footer .container { display: flex; align-items: center; gap: 10px; }

/* ── Espace membre ───────────────────────────────────────── */
.member-nav { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 24px; }
.member-nav a {
  text-decoration: none; color: var(--ink-soft); font-weight: 600;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
}
.member-nav a.is-active { color: #fff; background: var(--grad); border-color: transparent; }

/* Deck de découverte : 1 carte sur mobile, 2 côte à côte sur grand écran. */
.deck {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
  padding: 4px 0 8px;
  max-width: 460px;
  margin-inline: auto;
}
@media (min-width: 900px) {
  .deck { grid-template-columns: repeat(2, 1fr); max-width: 880px; }
}
.deck.is-empty { display: block; max-width: none; }

.swipe-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.26s ease, opacity 0.26s ease;
}
.swipe-card.is-busy { opacity: 0.7; }
.swipe-card.swipe-out-left { transform: translateX(-118%) rotate(-7deg); opacity: 0; }
.swipe-card.swipe-out-right { transform: translateX(118%) rotate(7deg); opacity: 0; }
.swipe-card__photo {
  aspect-ratio: 3 / 4; background: var(--grad); display: block;
  width: 100%; object-fit: cover;
}
@media (min-width: 900px) { .swipe-card__photo { aspect-ratio: 4 / 5; } }
.swipe-card__body { padding: 16px 18px 4px; flex: 1; }
.swipe-card__name { font-family: var(--font-serif); font-size: 1.5rem; margin: 0 0 2px; }
.swipe-card__name a { color: inherit; text-decoration: none; }
.swipe-card__name a:hover { text-decoration: underline; }
.swipe-card__meta { color: var(--ink-soft); margin: 0 0 8px; font-size: 0.95rem; }
.swipe-card__meta .dot-sep { margin: 0 5px; opacity: 0.55; }
.swipe-card__tagline { margin: 0; }
.online-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 999px;
  background: #29c46a; margin-right: 6px; vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(41, 196, 106, 0.18);
}
.online-dot--off { background: #9a8fa0; box-shadow: 0 0 0 3px rgba(154, 143, 160, 0.18); }
.swipe-actions { display: flex; gap: 10px; padding: 12px 18px 18px; }
.swipe-actions form { flex: 1; }
/* Ces deux classes de couleur sont réutilisées ailleurs (composeur du chat,
   fiche profil…) : le plein-largeur + le padding ne concernent QUE le deck. */
.swipe-actions .btn--pass, .swipe-actions .btn--like {
  width: 100%; display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; padding: 11px 14px;
}
.btn--pass { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn--pass:hover { border-color: var(--ink-soft); }
.btn--like { background: var(--grad); color: #fff; border: 1px solid transparent; }
.btn--like:hover { filter: brightness(1.03); }
.btn:disabled { opacity: 0.55; pointer-events: none; }
.deck-hint { text-align: center; margin: 14px 0 0; font-size: 0.85rem; }
@media (max-width: 899px) { .deck-hint { display: none; } }

.grid-profiles {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media (min-width: 620px) {
  .grid-profiles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
.profile-tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit;
  display: block;
}
.profile-tile__photo { aspect-ratio: 1 / 1; background: var(--grad); width: 100%; object-fit: cover; display: block; }
/* `<span>` en display:block : sinon le padding (surtout top/bottom) d'un
   inline peut déborder visuellement au lieu d'être réservé dans le flux,
   et se retrouve rogné par le `overflow:hidden` de .profile-tile. */
.profile-tile__cap { display: block; padding: 10px 12px; }
.profile-tile__cap strong { display: block; }

.detail-photos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); }
.detail-photos img, .detail-photos .ph {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; background: var(--grad);
}

.empty-state { text-align: center; color: var(--ink-soft); padding: 48px 0; }
.toast-match {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--grad); color: #fff; padding: 14px 22px; border-radius: 999px;
  box-shadow: var(--shadow); font-weight: 600; z-index: 50; max-width: min(92vw, 420px);
  text-align: center; transition: opacity 0.45s ease, transform 0.45s ease;
}
.toast-match.out { opacity: 0; transform: translateX(-50%) translateY(10px); }

/* ── Messagerie ──────────────────────────────────────────── */
.conv-list { display: grid; gap: 10px; }
.conv-row {
  display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
}
.conv-row__avatar { width: 46px; height: 46px; border-radius: 999px; object-fit: cover; background: var(--grad); flex: none; }
.conv-row__main { flex: 1; min-width: 0; }
.conv-row__name { font-weight: 600; }
.conv-row__last { color: var(--ink-soft); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-row__badge { background: var(--grad); color: #fff; border-radius: 999px; font-size: .78rem; padding: 2px 8px; }

.chat {
  display: flex; flex-direction: column; height: min(72vh, 640px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
.chat__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
/* .chat a overflow:hidden : sur un nom de profil long + petit écran, sans
   ça c'est le compteur portefeuille (info importante, mise à jour en
   direct) qui risque d'être poussé hors champ et coupé — on préfère
   tronquer le nom (visible ailleurs) plutôt que perdre ce chiffre. */
.chat__head a { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; }
.chat__head a strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#walletCounter { flex: none; white-space: nowrap; }
.chat__head h2 { font-size: 1.05rem; margin: 0; font-family: var(--font-sans); }
.chat__thread { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 78%; padding: 8px 12px; border-radius: 14px; line-height: 1.45; word-wrap: break-word; }
.msg--them { align-self: flex-start; background: var(--cream); border: 1px solid var(--line); }
.msg--me { align-self: flex-end; background: var(--grad); color: #fff; }
.msg__meta { font-size: .72rem; opacity: .7; margin-top: 3px; }
.msg--deleted { font-style: italic; opacity: .6; }
/* Image/vidéo/fichier/sticker : la bulle doit épouser le média (pas garder
   le fond dégradé qui déborde autour d'une image plus petite que 78%). */
.msg--media { width: fit-content; padding: 4px; }
.msg--media .msg__meta { padding: 0 4px; }
.msg--media img, .msg--media video { cursor: pointer; }
/* max-width en px FIXE (pas de min(Npx,100%)) : un % ici, dans une bulle
   dont la largeur dépend elle-même du contenu (width:fit-content
   ci-dessus), crée une dépendance circulaire — Chrome calcule alors la
   largeur "fit-content" de la bulle comme si l'image n'était pas limitée
   du tout (bulle pleine largeur avec le dégradé qui déborde autour d'une
   petite vignette), même si l'image affichée, elle, respecte bien la
   limite une fois peinte. */
.msg-media-img { display: block; border-radius: 10px; max-width: 240px; }
.msg-media-video { display: block; border-radius: 10px; max-width: 260px; }
@media (max-width: 380px) {
  .msg-media-img { max-width: 200px; }
  .msg-media-video { max-width: 220px; }
}
.typing { align-self: flex-start; color: var(--ink-soft); font-size: .85rem; font-style: italic; }
.chat__composer { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.chat__composer textarea {
  flex: 1; min-width: 0; resize: none; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
  font: inherit; background: var(--cream); color: var(--ink); min-height: 42px; max-height: 120px;
}
.chat__blocked { padding: 14px 16px; border-top: 1px solid var(--line); text-align: center; color: var(--ink-soft); }
.chat__hint { font-size: .8rem; color: var(--ink-soft); padding: 6px 16px; }
/* Boutons du composeur : icônes rondes compactes + bouton d'envoi qui ne
   s'étire pas (ce sont les mêmes classes de couleur que le deck de swipe,
   d'où le besoin de les recadrer précisément ici). */
.chat__composer .btn { flex: none; }
.chat__composer .btn--pass {
  width: 40px; height: 40px; padding: 0; font-size: 1.15rem; flex-shrink: 0;
}
.chat__composer .btn--like { padding: 10px 20px; }
@media (max-width: 480px) {
  .chat__composer .btn--like { padding: 10px 14px; }
}
.msg { position: relative; }
.msg__act { position: absolute; top: -10px; right: 6px; display: none; gap: 2px; }
.msg:hover .msg__act { display: flex; }
.msg__act button { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; cursor: pointer; font-size: .8rem; padding: 1px 5px; }

/* Aperçu média (image/PDF) en place — plus de nouvel onglet (§11 JS). */
.media-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: rgba(10, 8, 16, .88);
}
.media-lightbox[hidden] { display: none; }
.media-lightbox__body { max-width: 100%; max-height: 100%; display: flex; }
.media-lightbox__body img { max-width: 100%; max-height: 85vh; border-radius: 10px; display: block; }
.media-lightbox__body iframe {
  width: min(90vw, 900px); height: 85vh; border: 0; border-radius: 10px; background: #fff;
}
.media-lightbox__close {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 999px;
  border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 1.4rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.media-lightbox__close:hover { background: rgba(255, 255, 255, .3); }
.sticker-tray { max-height: 320px; overflow-y: auto; padding: 0 12px 10px; border-top: 1px solid var(--line); background: var(--cream); }
.sticker-pack-name { font-size: .8rem; color: var(--ink-soft); margin: 10px 0 4px; }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, 56px); gap: 8px; }
.sticker-grid img { width: 56px; height: 56px; object-fit: contain; cursor: pointer; border-radius: 8px; }
.sticker-grid img:hover { background: var(--surface); }

/* Onglets Emoji / Stickers du tiroir du composeur */
.tray__tabs {
  display: flex; gap: 6px; position: sticky; top: 0; padding: 10px 0 8px;
  background: var(--cream); z-index: 1;
}
.tray__tab {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .85rem;
  font-weight: 600; cursor: pointer;
}
.tray__tab.is-active { color: #fff; background: var(--grad); border-color: transparent; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 4px; }
.emoji-btn {
  width: 40px; height: 40px; border: 0; background: transparent; border-radius: 8px;
  font-size: 1.4rem; line-height: 1; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
}
.emoji-btn:hover { background: var(--surface); }

/* ── Notifications ───────────────────────────────────────── */
#notif-root { position: relative; }
.notif-bell { position: relative; background: none; border: 0; cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 6px; }
.notif-badge { position: absolute; top: -2px; right: -2px; background: var(--grad); color: #fff; border-radius: 999px; font-size: .68rem; padding: 1px 5px; }
.notif-panel { position: absolute; right: 0; top: 42px; width: 320px; max-height: 60vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); display: none; z-index: 40; }
#notif-root.open .notif-panel { display: block; }
.notif-item { display: block; padding: 12px 14px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.notif-item span { display: block; color: var(--ink-soft); font-size: .86rem; }
.notif-item.unread { background: color-mix(in srgb, var(--fuchsia) 8%, transparent); }
.notif-toast { position: fixed; right: 20px; bottom: 20px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--fuchsia); border-radius: 10px; padding: 12px 16px; box-shadow: var(--shadow); z-index: 60; max-width: 300px; }
.notif-empty { padding: 20px; color: var(--ink-soft); text-align: center; }
@media (max-width: 640px) {
  /* Le panneau était ancré à la cloche : sur mobile, la cloche n'est pas
     forcément près du bord droit de l'écran (l'en-tête passe sur 2 lignes),
     donc un panneau large de 320px pouvait déborder hors écran et cacher
     les notifications. On l'ancre plutôt à l'en-tête, pleine largeur. */
  .site-header { position: relative; }
  #notif-root { position: static; }
  .notif-panel { position: absolute; left: 12px; right: 12px; top: 100%; width: auto; max-width: none; }
  .notif-toast { left: 12px; right: 12px; max-width: none; }
}

/* ── Portefeuille / achat ────────────────────────────────── */
.wallet-balance { font-family: var(--font-serif); font-size: 2.6rem; }
.pack-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 16px 0; }
.pack-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-align: center; }
.pack-card .u { font-size: 1.5rem; font-weight: 700; }
.pack-card__unit { font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); }
.pack-card .p { color: var(--ink-soft); margin: 2px 0 10px; }
.buy-modal { position: fixed; inset: 0; background: rgba(20,10,20,.5); display: none; place-items: center; z-index: 70; padding: 16px; }
.buy-modal.open { display: grid; }
.buy-modal__box { background: var(--surface); border-radius: 16px; max-width: 460px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 22px; }
.buy-modal__box h3 { margin-top: 0; }
.method-opts label { display: block; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.method-instructions { white-space: pre-wrap; background: var(--cream); border-radius: 10px; padding: 12px; font-size: .9rem; margin: 8px 0; }

/* ── Champ de dépôt de preuve (image ou PDF) ─────────────── */
.file-drop {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  border: 1.5px dashed var(--line); border-radius: 12px;
  padding: 14px 16px; margin: 10px 0 4px; cursor: pointer;
  background: var(--cream); transition: border-color .15s ease, background .15s ease;
}
.file-drop:hover { border-color: var(--fuchsia); }
.file-drop.has-file { border-style: solid; border-color: #29c46a; background: var(--surface); }
.file-drop.has-error { border-style: solid; border-color: #e5484d; background: var(--surface); }
.file-drop__icon { font-size: 1.3rem; flex: none; }
.file-drop__text { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
/* flex:none + largeur propre : ce texte ne doit jamais être écrasé/coupé,
   c'est l'info du format/poids accepté (§ responsive membre). Il passe à
   la ligne plutôt que d'être comprimé si la carte est étroite. */
.file-drop__hint { margin-left: auto; font-size: .78rem; color: var(--ink-soft); flex: none; white-space: nowrap; }
@media (max-width: 420px) {
  .file-drop__hint { margin-left: 30px; width: 100%; }
}
.file-drop__error { color: #e5484d; font-size: .85rem; margin: 4px 0 0; }
.txn-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.txn-table td { padding: 6px 4px; border-bottom: 1px solid var(--line); }
.txn-credit { color: #29c46a; } .txn-debit { color: var(--ink-soft); }
.badge-pending { background: #f5c451; } .badge-confirmed { background: #29c46a; color:#fff; }
.badge-rejected { background: #d64562; color:#fff; }
.pay-badge { border-radius: 999px; font-size: .74rem; padding: 2px 8px; }

/* ── Sélecteur de langue (navbar) ──────────────────────── */
.lang-form { display: inline-flex; }
.lang-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font: inherit; font-weight: 600; font-size: .85rem;
  color: var(--ink); background-color: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 30px 8px 14px; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .15s ease, color .15s ease;
}
.lang-select:hover { border-color: var(--fuchsia); color: var(--fuchsia); }
.lang-select:focus-visible { outline: 2px solid var(--fuchsia); outline-offset: 2px; }

/* ── Bascule de thème ──────────────────────────────────── */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; display: inline-grid; place-items: center; font-size: 1rem;
  color: var(--ink); transition: transform .15s ease;
}
.theme-toggle:hover { transform: rotate(12deg); }

/* ── Fond animé des pages auth (orbes + cœurs qui montent) ── */
.auth-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.auth-bg .orb {
  position: absolute; border-radius: 50%; filter: blur(38px); opacity: .55;
  animation: drift 16s ease-in-out infinite;
}
.auth-bg .orb.o1 { width: 320px; height: 320px; left: -80px; top: 4%; background: var(--fuchsia); }
.auth-bg .orb.o2 { width: 280px; height: 280px; right: -60px; top: 24%; background: var(--coral); animation-delay: -5s; }
.auth-bg .orb.o3 { width: 220px; height: 220px; left: 30%; bottom: -70px; background: var(--gold); opacity: .4; animation-delay: -9s; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(24px, -20px) scale(1.06); }
  66% { transform: translate(-18px, 16px) scale(0.96); }
}
.auth-bg .heart {
  position: absolute; bottom: -30px; font-size: 18px; opacity: 0;
  animation: rise 9s linear infinite;
}
@keyframes rise {
  0% { transform: translateY(0) rotate(0); opacity: 0; }
  12% { opacity: .5; }
  90% { opacity: .3; }
  100% { transform: translateY(-90vh) rotate(30deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-bg .orb, .auth-bg .heart { animation: none; }
  .auth-bg .heart { display: none; }
}

/* ── Loader plein écran « love » ───────────────────────── */
#page-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; gap: 14px;
  background: var(--cream);
  transition: opacity .5s ease, visibility .5s ease;
}
#page-loader.done { opacity: 0; visibility: hidden; }
.love-heart {
  font-size: 56px; line-height: 1;
  filter: drop-shadow(0 8px 18px var(--glow-1));
  animation: beat 1.1s ease-in-out infinite;
}
.love-heart::before { content: "💗"; }
@keyframes beat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.2); }
  30% { transform: scale(0.96); }
  45% { transform: scale(1.12); }
}
#page-loader .love-label { font-family: var(--font-serif); font-size: 1.3rem; color: var(--ink-soft); letter-spacing: .02em; }

/* petit cœur qui bat dans un bouton pendant l'envoi d'un formulaire */
.btn { position: relative; }
.btn.is-loading { pointer-events: none; opacity: .92; }
.btn.is-loading .btn-label { visibility: hidden; }
.btn.is-loading::after {
  content: "💗"; position: absolute; font-size: 1.1em;
  animation: beat .85s ease-in-out infinite;
}

/* ── Combobox recherchable (pays) ─────────────────────── */
.combo { position: relative; }
.combo__input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); color: var(--ink); font: inherit; }
.combo__list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  max-height: 240px; overflow-y: auto; box-shadow: var(--shadow); display: none;
}
.combo.open .combo__list { display: block; }
.combo__opt { padding: 9px 12px; cursor: pointer; }
.combo__opt:hover, .combo__opt.active { background: var(--cream-2); }
.combo__empty { padding: 10px 12px; color: var(--ink-soft); }

/* ── Grille aérée du formulaire d'inscription ─────────── */
.form-aired { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-aired .field { margin-bottom: 4px; }
.form-aired .col-span-2 { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-aired { grid-template-columns: 1fr; } }

@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; }
  .decor-strip { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .chat { height: 78vh; }
}

/* ── Passe responsive globale ─────────────────────────────── */
@media (max-width: 860px) {
  .site-header { flex-wrap: wrap; gap: 10px 14px; padding: 16px 0; }
  .nav { flex-wrap: wrap; gap: 10px; row-gap: 8px; }
  .nav .btn { padding: 9px 16px; }
  .brand__word { font-size: 1.35rem; }
}
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .site-header { justify-content: space-between; }
  .nav { width: 100%; justify-content: flex-start; }
  .nav select { max-width: 42vw; }
  /* barre d'onglets membre : une seule rangée qui défile au doigt */
  .member-nav {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin-inline: -16px; padding: 4px 16px 10px; gap: 8px;
    scrollbar-width: none;
  }
  .member-nav::-webkit-scrollbar { display: none; }
  .member-nav a { white-space: nowrap; flex: none; padding: 7px 13px; font-size: 0.92rem; }
  .site-footer .container { flex-wrap: wrap; justify-content: center; text-align: center; }
  .hero { padding: 52px 0 36px; }
  .section { padding: 32px 0; }
}
@media (max-width: 380px) {
  .swipe-actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .swipe-card { transition: opacity 0.2s ease; }
  .swipe-card.swipe-out-left, .swipe-card.swipe-out-right { transform: none; opacity: 0; }
}