/* ═══════════════ TERRA MEMORIA — atelier cosmique ═══════════════ */

:root {
  --void: #04050c;
  --ink: #0b0e1c;
  --glass: rgba(10, 13, 26, 0.58);
  --glass-strong: rgba(12, 15, 30, 0.86);
  --line: rgba(232, 195, 126, 0.18);
  --line-soft: rgba(255, 255, 255, 0.08);
  --gold: #e8c37e;
  --gold-bright: #f6d9a0;
  --cream: #f2ead9;
  --text: #eae6dc;
  --text-dim: rgba(234, 230, 220, 0.55);
  --red: #d94a38;
  --coral: #f07a4f;
  --yellow: #eec45c;
  --blue: #4f7fe0;
  --green: #3aa47c;
  --rose: #e0559a;
  --white-pin: #f4ead8;
  --black-pin: #262a36;
  --danger: #e05548;
  --radius: 18px;
  /* Une seule famille, comme sur les applications sociales : plus de
     police à empattements pour les titres, tout est en Sora. */
  --font-body: "Sora", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

/* Aucun italique nulle part : registre typographique droit, dans la lignée des
   applications sociales. La règle vise aussi les balises que le navigateur
   penche par défaut (em, i, cite, dfn, var, address), donc le texte saisi par
   les membres ne peut pas réintroduire d'italique. */
i, em, cite, dfn, var, address { font-style: normal; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* touch-action : le pincement manipule le globe, jamais la page ni les textes */
#globe { position: fixed; inset: 0; cursor: grab; touch-action: none; }
#globe:active { cursor: grabbing; }
.topbar, .bottombar, .panel, .modal, .pin-confirm { touch-action: pan-y; }

/* ── Verre ─────────────────────────────── */
.glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--line);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.glass-strong {
  background: var(--glass-strong);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid var(--line);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.6);
}

/* ── Intro ─────────────────────────────── */
/* ── Séquence d'ouverture ───────────────────────────── */
/* Au-dessus de l'écran d'intro (z-index 100), qui continue son fondu dessous :
   quand le clip s'efface, le globe est déjà en place. */
.intro-video {
  position: fixed; inset: 0; z-index: 150;
  /* Centre le logo sans transformation : voir le commentaire sur .io-mot.
     Les autres enfants sont en position absolue, la grille ne les touche pas. */
  display: grid; place-items: center;
  background: var(--void);
  cursor: pointer;
  transition: opacity 0.7s ease;
}
.intro-video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* Deux montages existent, un par orientation, et le script choisit celui qui
     correspond à l'écran : le clip remplit donc toujours le cadre sans rien
     rogner d'important. */
  object-fit: cover;
}
/* Assombrit les bords pour que le nom se détache et pour raccorder au fond. */
.io-voile {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(4, 6, 16, 0.75) 100%);
}
/* Le logo arrive au centre, en grand, et bat comme un cœur. */
/* Aucune transformation sur ce bloc : Sixtyfour Convergence est une police en
   couleurs (COLRv1), et WebKit ne peint plus ses glyphes quand l'élément passe
   sur une couche composée — ce qui arrive dès qu'on l'anime en `transform`.
   Sur iPhone il ne restait que la pastille. Le battement passe donc par la
   taille de police, et tout le reste est exprimé en `em` pour suivre. */
.io-mot {
  --taille: clamp(17px, 4.8vw, 36px);
  position: relative; z-index: 2;
  font-size: calc(var(--taille) * 0.82);
  gap: 0.28em;
  opacity: 0;
  transition: opacity 0.55s ease, font-size 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.io-mot .brand-name { font-size: 1em; width: 14.5em; height: 1.12em; }
.io-mot .brand-mark {
  width: 0.5em; height: 0.5em;
  box-shadow: 0 0 0.7em var(--gold), 0 0 0.2em var(--gold-bright);
}
.io-mot.io-mot-on {
  opacity: 1;
  font-size: var(--taille);
  /* « forwards » et non « both » : avec « both » la première image de
     l'animation s'appliquerait dès le délai et écraserait l'entrée. */
  animation: ioBattement 0.9s ease-out 0.55s 2 forwards;
}
/* Coups à 0,00 et 0,16 s dans un cycle de 0,9 s, soit 0 % et 17,8 % :
   les sommets sont posés juste après, le temps de l'attaque. */
@keyframes ioBattement {
  0%   { font-size: var(--taille); }
  6%   { font-size: calc(var(--taille) * 1.11); }
  15%  { font-size: var(--taille); }
  24%  { font-size: calc(var(--taille) * 1.06); }
  36%  { font-size: var(--taille); }
  100% { font-size: var(--taille); }
}
/* Filet : si la police en couleurs n'est pas chargée, on écrit le nom dans la
   police du corps avec des couleurs classiques plutôt que rien du tout. */
.io-passer {
  position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); right: 18px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(10, 14, 26, 0.55); border: 1px solid var(--line);
  color: var(--text-dim); font-family: var(--font-body); font-size: 12.5px;
  cursor: pointer; backdrop-filter: blur(6px);
  opacity: 0; animation: ioMot 0.5s ease 1.4s forwards;
}
.io-passer:hover { color: var(--text); border-color: var(--gold); }
.intro-video.io-sortie { opacity: 0; pointer-events: none; }
@keyframes ioMot { to { opacity: 1; } }

/* ── Secousse à l'atterrissage d'une épingle ──────────
   C'est l'image qui tremble, pas le logo : le choc vient du globe. Le léger
   grossissement évite qu'un bord noir n'apparaisse pendant le déplacement. */
.intro-video video.io-secousse { animation: ioSecousse 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes ioSecousse {
  0%   { transform: translate(0, 0) scale(1); }
  12%  { transform: translate(-5px, 3px) scale(1.02); }
  28%  { transform: translate(4px, -4px) scale(1.02); }
  46%  { transform: translate(-3px, -2px) scale(1.015); }
  64%  { transform: translate(3px, 2px) scale(1.012); }
  82%  { transform: translate(-1px, 1px) scale(1.006); }
  100% { transform: translate(0, 0) scale(1); }
}

/* ── Explosion finale ─────────────────────────────────
   Un anneau de souffle part du centre, l'image se dilate, puis le blanc
   recouvre tout et s'efface sur le globe de l'application. */
.io-souffle, .io-flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
}
.io-souffle {
  /* Disque qui grandit : le dégradé donne l'épaisseur de l'onde. */
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 240, 210, 0) 38%, rgba(255, 214, 150, 0.85) 48%,
    rgba(232, 195, 126, 0.35) 56%, rgba(232, 195, 126, 0) 66%);
  transform: scale(0.05);
}
.io-flash { background: radial-gradient(circle at 50% 50%, #fff6e4 0%, #f6d9a0 45%, rgba(246, 217, 160, 0) 78%); }

.intro-video.io-boum video { animation: ioDilate 0.62s cubic-bezier(0.4, 0, 0.9, 0.3) forwards; }
.intro-video.io-boum .io-mot { animation: ioMotBoum 0.5s cubic-bezier(0.4, 0, 0.9, 0.3) forwards; }
.intro-video.io-boum .io-souffle { animation: ioOnde 0.62s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
.intro-video.io-boum .io-flash { animation: ioFlash 0.66s ease-out 0.16s forwards; }
.intro-video.io-boum .io-voile, .intro-video.io-boum .io-passer { opacity: 0; transition: opacity 0.2s; }

@keyframes ioDilate {
  to { transform: scale(1.55); opacity: 0; filter: brightness(2.2); }
}
@keyframes ioMotBoum {
  30%  { opacity: 1; }
  to   { transform: scale(1.9); opacity: 0; }
}
@keyframes ioOnde {
  0%   { opacity: 0; transform: scale(0.05); }
  16%  { opacity: 1; }
  to   { opacity: 0; transform: scale(3.4); }
}
@keyframes ioFlash {
  0%   { opacity: 0; }
  22%  { opacity: 1; }
  to   { opacity: 0; }
}
/* Animations réduites : ni tremblement ni souffle, on garde un simple fondu. */
@media (prefers-reduced-motion: reduce) {
  .intro-video video.io-secousse,
  .intro-video.io-boum video,
  .intro-video.io-boum .io-mot,
  .intro-video.io-boum .io-souffle,
  .intro-video.io-boum .io-flash { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .io-mot { transition: none; animation: none; }
}

.intro {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 60%, #0a0e22 0%, var(--void) 70%);
  animation: introFade 1.2s ease 2.6s forwards;
  pointer-events: none;
}
.intro-inner { text-align: center; }
.intro-eyebrow {
  font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold); opacity: 0;
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s forwards;
}
.intro-title {
  font-family: var(--font-body);
  font-size: clamp(52px, 10vw, 120px);
  font-weight: 300; letter-spacing: 0.01em; line-height: 1.05;
  margin: 18px 0 14px; color: var(--cream); opacity: 0;
  animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s forwards;
}
.intro-title em { font-style: normal; font-weight: 300; color: var(--gold-bright); }
.intro-sub {
  font-size: 14px; color: var(--text-dim); letter-spacing: 0.06em; opacity: 0;
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.85s forwards;
}
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes introFade { to { opacity: 0; visibility: hidden; } }

/* ── Barre supérieure ──────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 18px 22px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.brand { display: flex; align-items: center; gap: 10px; user-select: none; }
.brand-mark {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px var(--gold), 0 0 4px var(--gold-bright);
}
/* Sixtyfour Convergence est une police COULEUR (COLRv1) : ses teintes sont
   gravées dans la fonte et ignorent `color` — elle s'affiche en rouge par
   défaut, ce qui jure avec l'or du site. On repeint donc sa palette. */
/* Deux palettes : `color` n'a aucun effet sur une police couleur, donc on
   repeint chaque mot séparément pour retrouver Terra en crème et Memoria en or. */
@font-palette-values --tm-creme {
  font-family: "Sixtyfour Convergence";
  override-colors: 0 #f2ead9, 1 #f2ead9, 2 #f2ead9, 3 #f2ead9,
                   4 #f2ead9, 5 #f2ead9, 6 #f2ead9, 7 #f2ead9;
}
@font-palette-values --tm-or {
  font-family: "Sixtyfour Convergence";
  override-colors: 0 #f6d9a0, 1 #f6d9a0, 2 #f6d9a0, 3 #f6d9a0,
                   4 #f6d9a0, 5 #f6d9a0, 6 #f6d9a0, 7 #f6d9a0;
}
/* Police à pixels : bien plus large et plus haute qu'un serif à taille égale,
   donc réduite pour tenir dans l'en-tête sans pousser la recherche. */
/* Le nom est une image vectorielle, pas du texte.
   Sixtyfour Convergence est une police en couleurs (COLRv1) : Safari sur iOS
   la charge, en calcule bien la largeur, mais ne peint aucun glyphe — le logo
   était donc invisible sur iPhone, réduit à sa pastille dorée, aussi bien dans
   l'en-tête que dans l'intro. Le tracé a été extrait de la police elle-même,
   le dessin est identique et ne dépend plus du moteur de rendu.
   Le texte reste dans le HTML pour les lecteurs d'écran et le référencement. */
.brand-name {
  display: inline-block;
  width: 14.5em; height: 1.12em; font-size: 13px;
  background: url("../media/logo-terra-memoria.svg") left center / contain no-repeat;
  text-indent: -200vw; overflow: hidden; white-space: nowrap;
}
/* Cette fonte n'a pas d'italique : Memoria se distingue par la couleur seule. */
/* Les deux couleurs sont désormais portées par le SVG lui-même. */

/* Recherche */
.search-wrap {
  position: relative;
  flex: 0 1 440px; margin-inline: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: 999px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.search-wrap:focus-within {
  border-color: rgba(232, 195, 126, 0.5);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(232, 195, 126, 0.07);
}
.search-icon { width: 17px; height: 17px; color: var(--gold); flex: none; }
#searchInput {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--text); font-family: var(--font-body); font-size: 14px;
}
#searchInput::placeholder { color: var(--text-dim); }
.search-kbd {
  font-family: var(--font-body); font-size: 10px; color: var(--text-dim);
  border: 1px solid var(--line-soft); border-radius: 6px; padding: 2px 7px;
}
.search-results {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0;
  border-radius: var(--radius); overflow: hidden; z-index: 30;
}
.search-result {
  display: flex; align-items: baseline; gap: 8px;
  width: 100%; text-align: left; background: none; border: none;
  padding: 12px 18px; cursor: pointer;
  color: var(--text); font-family: var(--font-body); font-size: 13.5px;
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.2s;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover, .search-result.focused { background: rgba(232, 195, 126, 0.09); }
.search-result-type { font-size: 11px; color: var(--gold); flex: none; }
.search-result-detail { color: var(--text-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bascule de mode + compteur : une seule barre, en bas de l'écran */
.bottombar {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 22; display: flex; align-items: center; justify-content: center;
  padding: 4px; border-radius: 999px;
  max-width: calc(100vw - 32px);
}
.mode-toggle { display: flex; gap: 2px; }
.mode-btn {
  display: flex; align-items: center; gap: 6px;
  border: none; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500;
  color: var(--text-dim); padding: 8px 16px; border-radius: 999px;
  transition: all 0.3s;
  white-space: nowrap;
}
.mode-btn.active { background: rgba(232, 195, 126, 0.14); color: var(--gold-bright); }
.mode-btn:hover:not(.active) { color: var(--text); }

/* ── Stats & astuce ────────────────────── */
.stats {
  position: relative; margin-left: 6px; padding: 8px 16px 8px 22px;
  border-radius: 999px; background: none;
  font-size: 12.5px; color: var(--text-dim); letter-spacing: 0.04em;
  white-space: nowrap;
}
/* Filet porté par le compteur lui-même : un <span> séparé resterait affiché
   quand le compteur est masqué faute de souvenirs. */
.stats::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: var(--line);
}
.stats span { color: var(--gold); font-weight: 600; }
.hint {
  position: fixed; bottom: 78px; left: 50%; transform: translateX(-50%);
  z-index: 15; font-size: 12px; color: var(--text-dim); letter-spacing: 0.08em;
  opacity: 0; animation: hintIn 1s ease 3.4s forwards;
  text-align: center; padding-inline: 16px;
}
@keyframes hintIn { to { opacity: 0.85; } }
.hint.gone { animation: none; opacity: 0; transition: opacity 0.6s; }

/* ── Épingles ──────────────────────────── */
.pin { position: relative; transform: translate(-50%, -100%); cursor: pointer; pointer-events: auto; }
.pin-head {
  width: 16px; height: 16px; border-radius: 50%;
  /* Deux cercles concentriques : le liseré blanc détache l'épingle du globe,
     l'anneau extérieur porte la visibilité. La teinte de la tête, elle, reste
     celle que la personne a choisie. */
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 0 0 2px var(--vis, transparent),
    0 2px 10px rgba(0, 0, 0, 0.55),
    inset -2px -3px 5px rgba(0, 0, 0, 0.35),
    inset 2px 2px 4px rgba(255, 255, 255, 0.45);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pin-stem {
  position: absolute; left: 50%; top: 13px; transform: translateX(-50%);
  width: 2px; height: 9px;
  background: linear-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0.1));
}
.pin:hover .pin-head { transform: scale(1.45); }
.pin-pulse {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: 0;
  animation: pulse 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes pulse {
  0% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); }
}
.pin-lock {
  position: absolute; top: -7px; right: -7px;
  font-size: 9px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.pin-label {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--glass-strong); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 10px;
  font-size: 11px; white-space: nowrap; color: var(--cream);
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.pin:hover .pin-label { opacity: 1; }

/* ── Popup confirmation ────────────────── */
.pin-confirm {
  position: fixed; z-index: 25; border-radius: var(--radius);
  padding: 16px 18px; width: min(320px, calc(100vw - 40px));
  animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes popIn { from { opacity: 0; transform: scale(0.92) translateY(8px); } }
.pin-confirm-place {
  font-family: var(--font-body); font-size: 16px;
  color: var(--cream); margin-bottom: 12px; line-height: 1.4;
}
.pin-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Boutons ───────────────────────────── */
.btn {
  border: none; cursor: pointer; font-family: var(--font-body);
  font-size: 13px; font-weight: 500; border-radius: 999px;
  padding: 10px 18px; transition: all 0.25s;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 60%, #c9a05a);
  color: #191203;
  box-shadow: 0 4px 18px rgba(232, 195, 126, 0.3);
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(232, 195, 126, 0.45); }
.btn-ghost { background: rgba(255, 255, 255, 0.06); color: var(--text); border: 1px solid var(--line-soft); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.11); }
.btn-danger { background: rgba(224, 85, 72, 0.14); color: var(--danger); border: 1px solid rgba(224, 85, 72, 0.3); }
.btn-danger:hover { background: rgba(224, 85, 72, 0.24); }
.btn-block { width: 100%; text-align: center; }

/* ── Panneau latéral ───────────────────── */
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 40;
  width: min(430px, 100vw);
  border-radius: 0; border-top: none; border-bottom: none; border-right: none;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 26px 26px 40px;
  animation: slideIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes slideIn { from { transform: translateX(60px); opacity: 0; } }
/* Repère « il reste du contenu plus bas ». Aligné sur la colonne du panneau
   grâce à la même formule de largeur, pour rester centré sans calcul en JS. */
.scroll-cue {
  position: fixed; right: 0; bottom: 16px; z-index: 41;
  width: min(430px, 100vw);
  display: flex; justify-content: center;
  pointer-events: none;   /* ne doit jamais intercepter un clic du formulaire */
  animation: cueIn 0.3s ease;
}
.scroll-cue-dot {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(12, 16, 28, 0.82); border: 1px solid var(--line);
  color: var(--gold); font-size: 17px; line-height: 1;
  backdrop-filter: blur(8px);
  animation: cueBob 1.6s ease-in-out infinite;
}
@keyframes cueIn { from { opacity: 0; } }
@keyframes cueBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue-dot { animation: none; }
}

.panel-close {
  position: sticky; top: 0; float: right; z-index: 2;
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line-soft);
  color: var(--text); width: 34px; height: 34px; border-radius: 50%;
  cursor: pointer; font-size: 13px; transition: all 0.2s;
}
.panel-close:hover { background: rgba(255, 255, 255, 0.14); transform: rotate(90deg); }

.panel-eyebrow {
  font-size: 10.5px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.panel-title {
  font-family: var(--font-body); font-size: 30px; font-weight: 600;
  line-height: 1.15; color: var(--cream); margin-bottom: 6px;
  overflow-wrap: break-word;
}
.panel-place { font-size: 12.5px; color: var(--text-dim); margin-bottom: 20px; line-height: 1.5; }
.panel-note {
  font-family: var(--font-body); font-weight: 400;
  font-size: 16px; line-height: 1.65; color: var(--text);
  border-left: 2px solid var(--gold); padding-left: 16px; margin: 18px 0 22px;
  white-space: pre-wrap; overflow-wrap: break-word;
}
.panel-section {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-dim); margin: 26px 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.panel-section::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

/* Formulaire */
.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 7px;
}
.field input[type="text"], .field input[type="password"], .field input[type="date"],
.field input[type="email"], .field input[type="datetime-local"],
.field textarea, .field select {
  width: 100%; background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-soft); border-radius: 12px;
  color: var(--text); font-family: var(--font-body); font-size: 14px;
  padding: 12px 14px; outline: none; transition: border-color 0.25s;
  color-scheme: dark;
}
.field textarea { resize: vertical; min-height: 84px; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: rgba(232, 195, 126, 0.5); }

/* Lieu de remise du coffre : champ d'adresse et ses suggestions */
.vlieu { position: relative; }
.vlieu-sug {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5;
  /* Fond opaque, pas translucide : la liste recouvre le champ suivant, et
     laisser transparaître son libellé rendait les propositions illisibles. */
  background: #10141f; border: 1px solid var(--line);
  border-radius: 12px; padding: 6px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}
.vlieu-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; border-radius: 8px; padding: 9px 10px;
  font-family: var(--font-body);
}
.vlieu-item:hover { background: rgba(232, 195, 126, 0.1); }
.vlieu-item-n { display: block; color: var(--text); font-size: 13.5px; }
.vlieu-item-d {
  display: block; color: var(--text-dim); font-size: 11.5px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vlieu-choisi {
  margin: 8px 2px 0; font-size: 12px; line-height: 1.5; color: var(--gold);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.vlieu-retour {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text-dim); font-family: var(--font-body); font-size: 11.5px;
  text-decoration: underline; text-underline-offset: 2px;
}
.vlieu-retour:hover { color: var(--text); }

/* Choix de couleur d'épingle */
.color-row { display: flex; gap: 9px; flex-wrap: wrap; }
.color-dot {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; padding: 0;
  box-shadow: inset -2px -3px 5px rgba(0,0,0,0.3), inset 2px 2px 4px rgba(255,255,255,0.35);
  transition: transform 0.2s, border-color 0.2s;
}
.color-dot:hover { transform: scale(1.15); }
.color-dot.selected { border-color: var(--cream); transform: scale(1.15); box-shadow: 0 0 0 3px rgba(242, 234, 217, 0.2), inset -2px -3px 5px rgba(0,0,0,0.3); }

/* Interrupteur coffre-fort */
.vault-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(232, 195, 126, 0.05); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px; margin: 18px 0; cursor: pointer;
}
.vault-opt-txt { font-size: 13px; line-height: 1.45; }
.vault-opt-txt small { display: block; color: var(--text-dim); font-size: 11.5px; margin-top: 3px; }
.switch { position: relative; width: 44px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 100%; height: 100%; position: absolute; cursor: pointer; z-index: 2; margin: 0; }
.switch-track {
  position: absolute; inset: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); transition: background 0.3s;
}
.switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--text-dim); transition: all 0.3s;
}
.switch input:checked + .switch-track { background: rgba(232, 195, 126, 0.35); }
.switch input:checked + .switch-track::after { left: 23px; background: var(--gold-bright); }

/* Galerie de médias */
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.media-item {
  position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-soft);
  cursor: pointer; transition: transform 0.25s;
}
.media-item:hover { transform: scale(1.04); }
.media-item img, .media-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-doc {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; height: 100%; padding: 8px; text-align: center;
}
.media-doc-icon { font-size: 24px; }
.media-doc-name { font-size: 9.5px; color: var(--text-dim); word-break: break-all; max-height: 2.6em; overflow: hidden; }
.media-del {
  position: absolute; top: 5px; right: 5px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 10px;
  opacity: 0; transition: opacity 0.2s;
}
.media-item:hover .media-del { opacity: 1; }
.media-add {
  aspect-ratio: 1; border-radius: 12px; cursor: pointer;
  border: 1.5px dashed rgba(232, 195, 126, 0.35);
  background: rgba(232, 195, 126, 0.04);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--gold); font-size: 22px; transition: all 0.25s;
}
.media-add small { font-size: 9.5px; letter-spacing: 0.08em; }
.media-add:hover { background: rgba(232, 195, 126, 0.1); border-color: var(--gold); }

/* Coffre verrouillé */
.locked-box {
  text-align: center; padding: 34px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: radial-gradient(circle at 50% 0%, rgba(232, 195, 126, 0.07), transparent 70%);
}
.locked-icon { font-size: 34px; margin-bottom: 12px; filter: drop-shadow(0 0 18px rgba(232, 195, 126, 0.4)); }
.locked-title { font-family: var(--font-body); font-weight: 600; font-size: 19px; color: var(--cream); margin-bottom: 8px; }
.locked-sub { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; margin-bottom: 18px; white-space: pre-line; }

/* ── Modale ────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(3, 4, 10, 0.7);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 20px;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; } }
.modal {
  width: min(400px, 100%); border-radius: 22px; padding: 28px;
  animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Sans plafond ni défilement, une modale plus haute que l'écran débordait
     en haut ET en bas (le fond la centre), rendant le formulaire de fiche
     impossible à remplir et son bouton d'enregistrement inatteignable.
     vh d'abord, dvh ensuite : sur iOS, vh ignore la barre du navigateur. */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  /* Empêche le défilement de se propager à la page derrière la modale. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Les actions restent visibles pendant qu'on parcourt un long formulaire :
   sans cela, il faut défiler jusqu'en bas pour trouver « Enregistrer ». */
.modal-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;
  /* Collé au bas de la modale : sur un long formulaire, il fallait sinon
     défiler jusqu'au bout pour trouver « Enregistrer ». Les marges négatives
     compensent le padding de 28px de la modale pour couvrir toute la largeur. */
  position: sticky; bottom: -28px;
  margin-inline: -28px; padding: 14px 28px calc(28px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, transparent, var(--glass-strong) 38%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.geo-status {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-soft);
  margin-bottom: 14px; line-height: 1.5;
}
.geo-status.ok { border-color: rgba(58, 164, 124, 0.5); color: #7ed8b4; }
.geo-status.ko { border-color: rgba(224, 85, 72, 0.5); color: #f0917f; }
.spinner {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--gold);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast ─────────────────────────────── */
.toast {
  /* Au-dessus de la barre du bas, sinon le message la recouvre. */
  position: fixed; bottom: 78px; left: 50%; transform: translateX(-50%);
  z-index: 70; padding: 13px 22px; border-radius: 999px;
  font-size: 13px; color: var(--cream);
  animation: toastIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: calc(100vw - 40px); text-align: center;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 16px); } }

/* Visionneuse plein écran */
.lightbox {
  position: fixed; inset: 0; z-index: 80; background: rgba(2, 3, 8, 0.94);
  display: grid; place-items: center; padding: 30px; cursor: zoom-out;
  animation: fadeIn 0.25s ease;
}
.lightbox img, .lightbox video { max-width: 100%; max-height: 92vh; border-radius: 10px; box-shadow: 0 30px 90px rgba(0,0,0,0.8); }
/* Au-dessus du média, jamais sous ses commandes : c'est la seule sortie sûre
   quand une vidéo occupe tout l'écran. */
.lightbox-close {
  position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px;
  z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(10, 14, 26, 0.72); border: 1px solid var(--line);
  color: var(--text); font-size: 17px; line-height: 1;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.25s, color 0.25s;
}
.lightbox-close:hover { border-color: var(--gold); color: var(--gold-bright); }

/* ── Travel Roulette ───────────────────── */
.roulette-btn { position: fixed; right: 22px; bottom: 152px; z-index: 20; }
.locate-btn { position: fixed; right: 22px; bottom: 208px; z-index: 20; }
.locate-btn.locating { border-color: var(--gold); animation: locatePulse 1.1s ease-in-out infinite; }
.locate-btn:disabled { cursor: progress; }
@keyframes locatePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,195,126,.45); }
  50%      { box-shadow: 0 0 0 10px rgba(232,195,126,0); }
}
.roulette-overlay {
  position: fixed; inset: 0; z-index: 55;
  display: grid; place-items: center; align-content: center; gap: 14px;
  background: radial-gradient(circle at 50% 45%, rgba(4,5,12,0) 30%, rgba(4,5,12,0.55) 100%);
  pointer-events: none;
}
.roulette-emoji { font-size: 74px; animation: rlShake 0.5s ease-in-out infinite; filter: drop-shadow(0 0 30px rgba(232,195,126,0.5)); }
@keyframes rlShake {
  0%, 100% { transform: rotate(-12deg) scale(1); }
  50% { transform: rotate(12deg) scale(1.12); }
}
.roulette-status {
  font-family: var(--font-body); font-weight: 500; font-size: 19px;
  color: var(--cream); text-shadow: 0 2px 14px rgba(0,0,0,0.8);
}
.rl-dest {
  font-family: var(--font-body); font-weight: 600; font-size: clamp(26px, 6vw, 36px);
  color: var(--gold-bright); line-height: 1.2; margin: 6px 0 10px;
}
.rl-hint { font-size: 12px !important; color: var(--text-dim) !important; }

/* ── Visibilité des épingles ───────────── */
.vis-row { display: flex; gap: 6px; }
.vis-opt {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-soft);
  border-radius: 11px; padding: 10px 6px; cursor: pointer;
  color: var(--text-dim); font-family: var(--font-body); font-size: 12.5px;
  transition: all 0.2s;
}
.vis-opt:hover { color: var(--text); }
.vis-opt.selected { background: rgba(232,195,126,0.13); border-color: rgba(232,195,126,0.5); color: var(--gold-bright); }

/* ── Épingles publiques (mode Explorer) ── */
.pin-public { opacity: 0.85; }
.pin-public .pin-head { width: 12px; height: 12px; border-style: dashed; }
.pin-public .pin-pulse { display: none; }
.pin-public .pin-stem { height: 6px; top: 10px; }

/* ── Sélecteur de langue (drapeaux, bord droit) ── */
.topbar-icons { display: contents; }

.lang-btn {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  z-index: 24; font-size: 19px;
}
.lang-panel {
  position: fixed; right: 76px; top: 50%; transform: translateY(-50%);
  z-index: 25; border-radius: 18px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  max-height: 72vh; overflow-y: auto;
  animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lang-item {
  display: flex; align-items: center; gap: 11px;
  background: none; border: none; cursor: pointer;
  color: var(--text); padding: 8px 14px; border-radius: 10px;
  font-family: var(--font-body); font-size: 13px; text-align: left;
  transition: background 0.2s;
}
.lang-item:hover { background: rgba(255, 255, 255, 0.07); }
.lang-item.active { background: rgba(232, 195, 126, 0.14); color: var(--gold-bright); }
.lang-flag { font-size: 18px; }
[dir="rtl"] .lang-btn { right: auto; left: 22px; }
[dir="rtl"] .lang-panel { right: auto; left: 76px; }

/* ── Connexion / compte ────────────────── */
.auth-providers { display: flex; gap: 8px; margin-bottom: 4px; }
.auth-provider { flex: 1; text-align: center; white-space: nowrap; padding: 11px 8px; }
.auth-sep {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim); margin: 16px 0 14px;
}
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.auth-msg {
  font-size: 12.5px; line-height: 1.55; color: var(--gold-bright);
  background: rgba(232, 195, 126, 0.07); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 13px; margin-top: 4px;
}

/* ── Vue satellite (Leaflet) ───────────── */
#map {
  position: fixed; inset: 0; z-index: 10;
  background: var(--void);
  opacity: 0; pointer-events: none;
  transition: opacity 0.55s ease;
}
#map.on { opacity: 1; pointer-events: auto; }
.map-pin-wrap { background: none; border: none; }
.leaflet-container { font-family: var(--font-body); }
.leaflet-control-attribution {
  background: rgba(4, 5, 12, 0.6) !important; color: var(--text-dim) !important;
  font-size: 9px !important; backdrop-filter: blur(6px);
}
.leaflet-control-attribution a { color: var(--gold) !important; }
.leaflet-control-zoom a {
  background: var(--glass-strong) !important; color: var(--cream) !important;
  border-color: var(--line) !important;
}

/* ── Boutons icône & cinéma ────────────── */
.icon-btn {
  border: 1px solid var(--line); cursor: pointer;
  width: 42px; height: 42px; border-radius: 50%;
  font-size: 17px; display: grid; place-items: center;
  color: var(--cream); transition: all 0.25s;
}
.icon-btn:hover { transform: translateY(-1px); border-color: var(--gold); }
.cinema-btn {
  position: fixed; right: 22px; bottom: 96px; z-index: 20;
}
.cinema-btn.active { border-color: var(--gold); box-shadow: 0 0 20px rgba(232, 195, 126, 0.35); }

.cinema {
  position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%);
  z-index: 30; border-radius: 20px; overflow: hidden;
  width: min(420px, calc(100vw - 32px));
  display: flex; align-items: stretch; gap: 0;
}
.cinema.show { animation: cinemaIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes cinemaIn { from { opacity: 0; transform: translate(-50%, 24px); } }
.cinema img { width: 130px; height: 110px; object-fit: cover; flex: none; }
.cinema-txt { padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; }
.cinema-title {
  font-family: var(--font-body); font-weight: 600;
  font-size: 20px; color: var(--cream); line-height: 1.25;
}
.cinema-meta { font-size: 12px; color: var(--text-dim); margin-top: 6px; letter-spacing: 0.04em; }

/* ── Mobile ────────────────────────────── */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 14px; }
  .brand { order: 1; }
  /* Sans `order`, la recherche vaut 0 et passe devant le logo dès que la
     barre se replie sur deux lignes. */
  .search-wrap { order: 2; flex-basis: 100%; }
  /* L'en-tête ne garde que le logo et la recherche : les trois icônes
     rejoignent le rail de droite, empilées sous le drapeau. La colonne est un
     flex, donc masquer « Mes matchs » ne laisse aucun trou. */
  .topbar-icons {
    display: flex; flex-direction: column; gap: 10px;
    position: fixed; right: 14px; top: 176px; z-index: 24;
  }
  #importBtn, #matchesBtn, #accountBtn { width: 36px; height: 36px; font-size: 14px; }
  /* Le drapeau quitte le milieu de l'écran pour coiffer la pile. */
  .lang-btn {
    right: 14px; top: 130px; transform: none;
    width: 36px; height: 36px; font-size: 15px;
  }
  .lang-panel { right: 60px; top: 130px; transform: none; }
  .cinema-btn { right: 14px; bottom: 96px; }
  .roulette-btn { right: 14px; bottom: 148px; }
  .locate-btn { right: 14px; bottom: 200px; width: 36px; height: 36px; font-size: 15px; }
  .panel { width: 100vw; border-left: none; }
  .bottombar {
    bottom: 14px; max-width: calc(100vw - 20px);
    flex-wrap: wrap; row-gap: 2px; border-radius: 20px;
  }
  .mode-toggle { flex: 1 0 100%; justify-content: center; }
  .mode-btn { padding: 8px 12px; font-size: 12px; }
  /* Sur deuxième ligne, le filet vertical n'a plus de sens : il séparerait
     le compteur de rien. */
  .stats { margin-left: 0; padding: 6px 14px; font-size: 11px; }
  .stats::before { display: none; }
  .hint { bottom: 104px; font-size: 11px; }
  .toast { bottom: 104px; }
}

/* ── Attractions ────────────────────────── */
#fAttractions {
  margin: 16px 0;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
#fAttractions label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}
/* Pile verticale : chaque lieu est une ligne pleine largeur, nom à
   gauche et étoiles à droite. Une grille multi-colonnes écrasait le nom
   contre la note. */
.attractions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* ── Attractions with Ratings ────────────────────────── */
.attraction-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px;
  background: rgba(232, 195, 126, 0.08);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  font-size: 12px;
  gap: 8px;
  margin-bottom: 6px;
  transition: all 0.2s;
}
.attraction-item:hover {
  background: rgba(232, 195, 126, 0.14);
  border-color: var(--line);
}

.attraction-info {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
/* min-width:0 sur l'enfant flex, sans quoi l'ellipsis ne se déclenche pas
   et le nom pousse les étoiles hors de la ligne. */
.attraction-info > div { min-width: 0; }
.attraction-icon {
  font-size: 18px;
  flex: none;
}
.attraction-name {
  font-weight: 600;
  color: var(--cream);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attraction-desc {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 28px;
}

.attraction-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 11px;
}
.star-display {
  display: flex;
  gap: 2px;
}
.star {
  font-size: 14px;
  color: var(--gold);
  cursor: pointer;
  transition: transform 0.15s;
  user-select: none;
}
.star:hover {
  transform: scale(1.2);
  color: var(--gold-bright);
}
.rating-text {
  color: var(--text-dim);
  white-space: nowrap;
  font-size: 10px;
}

.add-attraction-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.add-attraction-form label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  display: block;
  margin-bottom: 6px;
}
.add-attraction-form input,
.add-attraction-form select,
.add-attraction-form textarea {
  background: rgba(232, 195, 126, 0.06);
  border: 1px solid var(--line-soft);
  color: var(--cream);
  padding: 8px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  transition: all 0.2s;
}
.add-attraction-form input:focus,
.add-attraction-form select:focus,
.add-attraction-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(232, 195, 126, 0.1);
}

/* Étoile non cliquable (visiteur déconnecté) */
.star-static { cursor: default; }
.star-static:hover { transform: none; color: var(--gold); }

/* Formulaire de proposition : champs pleine largeur */
.add-attraction-form input,
.add-attraction-form select,
.add-attraction-form textarea {
  width: 100%;
  margin-top: 6px;
  display: block;
}
.add-attraction-form textarea { height: 60px; resize: vertical; }
.add-attraction-form .btn { width: 100%; margin-top: 8px; }
.add-attraction-status {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 8px;
  min-height: 14px;
}

/* ── Profil d'épingleur & messagerie ────────────────── */
.pr-sub { color: var(--text-dim); font-size: 12px; margin-top: 4px; }
.pr-pins {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 220px; overflow-y: auto; margin: 14px 0;
}
.pr-pin {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(232, 195, 126, 0.06);
  border: 1px solid var(--line-soft);
  color: var(--text); font-family: inherit; transition: all 0.2s;
}
.pr-pin:hover { background: rgba(232, 195, 126, 0.13); border-color: var(--line); }
.pr-pin-title { font-weight: 600; font-size: 13px; color: var(--cream); }
.pr-pin-place { font-size: 11px; color: var(--text-dim); }
.pr-status {
  font-size: 12px; color: var(--text-dim);
  margin: 10px 0; min-height: 16px; line-height: 1.4;
}
.pr-safety { display: flex; gap: 14px; margin-top: 12px; }
.pr-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text-dim); font-size: 11px; font-family: inherit;
  text-decoration: underline;
}
.pr-link:hover { color: var(--danger); }

.cv-thread {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 300px; overflow-y: auto; margin: 14px 0;
  padding: 4px;
}
.cv-empty { color: var(--text-dim); font-size: 12px; text-align: center; padding: 20px 0; }
.cv-msg {
  max-width: 78%; padding: 9px 12px; border-radius: 14px;
  font-size: 13px; line-height: 1.4; word-break: break-word;
  white-space: pre-wrap;
}
.cv-out { align-self: flex-end; background: rgba(232, 195, 126, 0.18); color: var(--cream); }
.cv-in  { align-self: flex-start; background: rgba(255, 255, 255, 0.07); color: var(--text); }
.cv-compose { display: flex; gap: 8px; align-items: flex-end; }
.cv-compose textarea {
  flex: 1; height: 64px; resize: vertical;
  background: rgba(232, 195, 126, 0.06);
  border: 1px solid var(--line-soft); border-radius: 8px;
  color: var(--cream); padding: 8px; font-family: inherit; font-size: 12px;
}
.cv-compose textarea:focus { outline: none; border-color: var(--gold); }
.cv-status { font-size: 11px; color: var(--text-dim); margin-top: 8px; min-height: 14px; }

/* ── Panneau de modération ──────────────────────────── */
.adm-entry { width: 100%; margin: 14px 0 4px; }
.adm-tabs { display: flex; gap: 8px; margin: 14px 0 10px; }
.adm-tab {
  flex: 1; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid var(--line-soft);
  color: var(--text-dim); font-family: inherit; font-size: 12px;
  transition: all 0.2s;
}
.adm-tab:hover { color: var(--text); }
.adm-on { background: rgba(232,195,126,0.14); color: var(--gold-bright); border-color: var(--line); }
.adm-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.adm-empty { color: var(--text-dim); font-size: 12px; text-align: center; padding: 24px 0; }
.adm-card {
  padding: 10px 12px; border-radius: 10px;
  background: rgba(232,195,126,0.06); border: 1px solid var(--line-soft);
}
.adm-head { font-weight: 600; font-size: 13px; color: var(--cream); }
.adm-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.adm-desc {
  font-size: 12px; color: var(--text); margin-top: 6px;
  line-height: 1.4; word-break: break-word; white-space: pre-wrap;
}
.adm-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.adm-btn { padding: 6px 14px; font-size: 12px; }

/* ── Partage de carte (dans l'app) ──────────────────── */
.sh-intro { color: var(--text-dim); font-size: 12.5px; line-height: 1.5; margin-top: 6px; }
.sh-label {
  display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); margin: 16px 0 8px;
}
.sh-levels { display: flex; flex-direction: column; gap: 6px; }
.sh-level {
  padding: 9px 12px; border-radius: 8px; cursor: pointer; text-align: left;
  background: none; border: 1px solid var(--line-soft);
  color: var(--text-dim); font-family: inherit; font-size: 12.5px; transition: all .2s;
}
.sh-level:hover { color: var(--text); }
.sh-on { background: rgba(232,195,126,.14); color: var(--gold-bright); border-color: var(--line); }
.sh-note {
  font-size: 11.5px; color: var(--text-dim); line-height: 1.45;
  margin-top: 10px; min-height: 32px;
}
.sh-create { width: 100%; margin-top: 6px; }
.sh-result { display: flex; gap: 8px; margin-top: 10px; }
.sh-result input {
  flex: 1; min-width: 0; background: rgba(232,195,126,.06);
  border: 1px solid var(--line-soft); border-radius: 8px;
  color: var(--cream); padding: 8px; font-size: 11.5px; font-family: inherit;
}
.sh-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.sh-empty { color: var(--text-dim); font-size: 12px; text-align: center; padding: 14px 0; }
.sh-card { padding: 10px 12px; border-radius: 10px; background: rgba(232,195,126,.06); border: 1px solid var(--line-soft); }
.sh-card-head { font-weight: 600; font-size: 12.5px; color: var(--cream); }
.sh-card-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.sh-card-acts { display: flex; gap: 8px; margin-top: 8px; }
.sh-mini {
  background: none; border: 1px solid var(--line-soft); border-radius: 6px;
  color: var(--text-dim); font-family: inherit; font-size: 11px;
  padding: 4px 10px; cursor: pointer; transition: all .2s;
}
.sh-mini:hover { color: var(--cream); border-color: var(--line); }
.sh-danger:hover { color: var(--danger); border-color: var(--danger); }

/* ── Page publique d'une carte partagée ─────────────── */
.sv-body { overflow-y: auto; }
.sv-globe { position: fixed; inset: 0; z-index: 0; }
.sv-top {
  position: fixed; top: 18px; left: 22px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
/* Mention discrète : sans elle, rien n'indique que le logo est cliquable. */
.sv-retour {
  font-size: 11px; letter-spacing: 0.08em; color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px;
  background: rgba(10, 14, 26, 0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: color 0.25s, border-color 0.25s;
}
.sv-top:hover .sv-retour { color: var(--text); border-color: var(--gold); }
@media (max-width: 720px) {
  .sv-top { top: 14px; left: 14px; right: 14px; }
  /* Le nom occupe déjà la largeur : la mention passe au bout de la ligne. */
  .sv-retour { margin-left: auto; }
}
.sv-card {
  position: relative; z-index: 2;
  width: min(520px, calc(100vw - 32px));
  margin: 96px auto 48px; padding: 28px;
  border-radius: var(--radius);
}
.sv-loading, .sv-error { text-align: center; padding: 28px 0; color: var(--text-dim); }
.sv-error h2 { font-family: var(--font-body); color: var(--cream); margin-bottom: 10px; }
.sv-error p { font-size: 13px; margin-bottom: 18px; }
.sv-eyebrow { font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); }
.sv-title { font-family: var(--font-body); font-size: 30px; font-weight: 600; color: var(--cream); margin: 8px 0 4px; }
.sv-stat { font-size: 12.5px; color: var(--text-dim); }
.sv-sub { font-family: var(--font-body); font-size: 17px; color: var(--cream); margin-bottom: 10px; }
.sv-countries { display: flex; flex-direction: column; gap: 4px; margin: 20px 0; max-height: 260px; overflow-y: auto; }
.sv-country { padding: 7px 10px; border-radius: 7px; background: rgba(232,195,126,.05); border: 1px solid var(--line-soft); }
.sv-country-n { font-size: 13px; font-weight: 600; color: var(--cream); }
.sv-country-p { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.sv-compare { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.sv-cmp-grid { display: flex; flex-direction: column; gap: 14px; }
.sv-cmp-h { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.sv-cmp-w { display: flex; flex-wrap: wrap; gap: 5px; }
.sv-chip { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-soft); color: var(--text-dim); }
.sv-both { background: rgba(58,164,124,.18); color: #9fe0c4; border-color: transparent; }
.sv-them { background: rgba(143,208,216,.16); color: #b6e4ea; border-color: transparent; }
.sv-me   { background: rgba(232,195,126,.18); color: var(--gold-bright); border-color: transparent; }
.sv-mute { opacity: .5; }
.sv-cta { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-soft); text-align: center; }
.sv-cta p { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; }
@media (max-width: 720px) { .sv-card { margin: 80px auto 32px; padding: 20px; } }

/* ── Synchronisation chiffrée des médias ────────────── */
.ms-intro { color: var(--text-dim); font-size: 12.5px; line-height: 1.55; margin: 8px 0 16px; }
.ms-body { display: flex; flex-direction: column; gap: 10px; }
.ms-wide { width: 100%; }
.ms-stop { color: var(--text-dim); }
.ms-stop:hover { color: var(--danger); border-color: var(--danger); }
.ms-warn {
  font-size: 12px; line-height: 1.5; color: var(--gold-bright);
  background: rgba(232,195,126,.09); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px;
}
.ms-phrase {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px; letter-spacing: .06em; line-height: 1.7;
  color: var(--cream); word-break: break-all; user-select: all;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-soft);
  border-radius: 8px; padding: 12px;
}
.ms-input {
  width: 100%; background: rgba(232,195,126,.06);
  border: 1px solid var(--line-soft); border-radius: 8px;
  color: var(--cream); padding: 10px; font-family: inherit; font-size: 12.5px;
}
.ms-input:focus { outline: none; border-color: var(--gold); }
.ms-status { font-size: 11.5px; color: var(--text-dim); margin-top: 12px; min-height: 16px; }
.media-hint {
  font-size: 11.5px; color: var(--text-dim); line-height: 1.5;
  padding: 12px; margin-top: 8px; border-radius: 8px;
  background: rgba(255,255,255,.04); border: 1px dashed var(--line-soft);
}

/* ── Couverture publique ────────────────────────────── */
.cov-label { display:block; font-size:13px; font-weight:600; color:var(--gold); margin:18px 0 4px; }
.cov-note { font-size:11px; color:var(--text-dim); line-height:1.45; margin-bottom:10px; }
.cov-img { width:100%; border-radius:10px; display:block; margin-bottom:8px; }
.cov-btn { width:100%; }
.cov-input { width:100%; font-size:11.5px; color:var(--text-dim); }
.cov-status { font-size:11px; color:var(--text-dim); margin-top:6px; min-height:14px; }
.ep-cover { width:100%; border-radius:10px; display:block; margin:12px 0; }

/* ── Pièces jointes du chat ─────────────────────────── */
.cv-tools { display:flex; align-items:center; gap:8px; }
.cv-clip {
  cursor:pointer; font-size:18px; line-height:1; padding:8px 10px;
  border:1px solid var(--line-soft); border-radius:8px; transition:all .2s;
}
.cv-clip:hover { border-color:var(--gold); background:rgba(232,195,126,.08); }
.cv-attached { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.cv-chip {
  display:inline-flex; align-items:center; gap:6px; max-width:200px;
  font-size:11px; padding:4px 8px; border-radius:999px;
  background:rgba(232,195,126,.12); color:var(--cream);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cv-chip-x { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:11px; padding:0; }
.cv-chip-x:hover { color:var(--danger); }
.cv-file-img { display:block; max-width:100%; border-radius:8px; margin-top:6px; }
.cv-file-link { display:inline-block; margin-top:6px; font-size:12px; color:var(--gold-bright); }

/* ── Parcourir sa carte (depuis la pastille) ────────── */
.stats {
  cursor: pointer; font-family: var(--font-body);
  border: none; transition: color .25s, background .25s;
}
.stats:hover { color: var(--text); background: rgba(232, 195, 126, 0.09); }
/* Publication groupée depuis « Ma carte » — au-dessus de la liste */
.br-bulk { margin-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.br-bulk-btn { width: 100%; }
.br-bulk-btn.br-bulk-confirm { border-color: var(--gold); color: var(--gold-bright); }
.br-bulk-note {
  margin: 8px 2px 0; font-size: 11.5px; line-height: 1.5; color: var(--text-dim);
}

.br-tabs { display: flex; gap: 8px; margin: 14px 0 10px; }
.br-tab {
  flex: 1; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid var(--line-soft);
  color: var(--text-dim); font-family: inherit; font-size: 12px; transition: all .2s;
}
.br-tab:hover { color: var(--text); }
.br-on { background: rgba(232,195,126,.14); color: var(--gold-bright); border-color: var(--line); }
.br-search {
  width: 100%; background: rgba(232,195,126,.06);
  border: 1px solid var(--line-soft); border-radius: 8px;
  color: var(--cream); padding: 9px 10px; font-family: inherit; font-size: 12.5px;
}
.br-search:focus { outline: none; border-color: var(--gold); }
.br-list {
  display: flex; flex-direction: column; gap: 5px;
  max-height: 360px; overflow-y: auto; margin-top: 10px;
}
/* Écrans peu hauts : 360 px de liste faisaient déborder la modale, qui se
   mettait alors à défiler en entier et emportait le bouton de publication
   hors de vue. La liste garde son propre défilement. */
@media (max-height: 780px) {
  .br-list { max-height: 38vh; }
}
.br-row {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 9px 11px; border-radius: 8px; cursor: pointer;
  background: rgba(232,195,126,.05); border: 1px solid var(--line-soft);
  color: var(--text); font-family: inherit; transition: all .2s;
}
.br-row:hover { background: rgba(232,195,126,.13); border-color: var(--line); }
.br-row-t { font-size: 13px; font-weight: 600; color: var(--cream);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-row-s { font-size: 11px; color: var(--text-dim); }
.br-empty { color: var(--text-dim); font-size: 12px; text-align: center; padding: 22px 0; }

/* ── Qui voyage près de moi ─────────────────────────── */
/* Le rail est espacé de 56 px : cinéma 96, roulette 152, localiser 208,
   donc 264 ici — sinon ce bouton se pose exactement sur « me localiser ». */
.nearby-btn { position: fixed; right: 22px; bottom: 264px; z-index: 20; }
.nb-intro { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin: 6px 0 14px; }
.nb-muted { font-size: 12px; color: var(--text-dim); text-align: center; padding: 18px 0; line-height: 1.5; }
.nb-label { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); margin: 16px 0 8px; }
.nb-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-chip { padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--line-soft); color: var(--text-dim);
  font-family: inherit; font-size: 12px; transition: all .2s; }
.nb-chip:hover { color: var(--text); }
.nb-mini { padding: 5px 10px; font-size: 11px; letter-spacing: .04em; }
.nb-on { background: rgba(232,195,126,.16); color: var(--gold-bright); border-color: var(--line); }
.nb-check { display: flex; align-items: center; gap: 10px; font-size: 12.5px;
  color: var(--text); margin: 14px 0 18px; cursor: pointer; }
.nb-input { width: 100%; background: rgba(232,195,126,.06);
  border: 1px solid var(--line-soft); border-radius: 8px; color: var(--cream);
  padding: 9px 10px; font-family: inherit; font-size: 12.5px; }
.nb-input:focus { outline: none; border-color: var(--gold); }
textarea.nb-input { height: 62px; resize: vertical; }
.nb-wide { width: 100%; margin-top: 16px; }
.nb-status { font-size: 11.5px; color: var(--text-dim); margin-top: 12px; min-height: 15px; }
.nb-me { padding: 12px; border-radius: 10px; margin-bottom: 14px;
  background: rgba(58,164,124,.12); border: 1px solid rgba(58,164,124,.3); }
.nb-me-t { font-size: 13px; font-weight: 600; color: #9fe0c4; }
.nb-me-s { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.nb-mini-btn { margin-top: 10px; background: none; border: 1px solid var(--line-soft);
  border-radius: 6px; color: var(--text-dim); font-family: inherit; font-size: 11px;
  padding: 5px 11px; cursor: pointer; transition: all .2s; }
.nb-mini-btn:hover { color: var(--danger); border-color: var(--danger); }
.nb-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.nb-card { text-align: left; width: 100%; padding: 11px 12px; border-radius: 10px; cursor: pointer;
  background: rgba(232,195,126,.05); border: 1px solid var(--line-soft);
  color: var(--text); font-family: inherit; transition: all .2s; }
.nb-card:hover { background: rgba(232,195,126,.13); border-color: var(--line); }
.nb-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--cream); }
.nb-dist { font-size: 11px; font-weight: 400; color: #b6e4ea; white-space: nowrap; }
.nb-card-m { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }
.nb-card-n { font-size: 12px; color: var(--text); margin-top: 6px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word; }
.nb-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.nb-tag { font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: rgba(143,208,216,.16); color: #b6e4ea; }
@media (max-width: 720px) {
  /* Mobile : 96, 148, 200 → 252, et même gabarit réduit que ses voisins. */
  .nearby-btn { right: 14px; bottom: 252px; width: 36px; height: 36px; font-size: 15px; }
}

/* ── Alerte de modération ───────────────────────────── */
/* Le panneau ne se voyait qu'en ouvrant son compte : la pastille rend
   l'attente visible dès le chargement, pour l'admin seulement. */
#accountBtn.has-pending { border-color: var(--danger); }
#accountBtn.has-pending::after {
  content: attr(data-pending);
  position: absolute; top: -4px; right: -4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 600; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--void);
}
#accountBtn { position: relative; overflow: visible; }
.adm-cover {
  width: 100%; max-height: 160px; object-fit: cover;
  border-radius: 8px; display: block; margin-bottom: 8px;
}

/* ── Fiche de membre ────────────────────────────────── */
.pf-intro { font-size: 12px; color: var(--text-dim); line-height: 1.55; margin: 6px 0 14px; }
.pf-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.pf-avatar {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line); flex: none; display: block;
}
.pf-avatar-vide {
  display: grid; place-items: center;
  background: rgba(232,195,126,.12); color: var(--gold-bright);
  font-family: var(--font-body); font-size: 30px;
}
.pf-avatar-edit { margin-bottom: 8px; }
.pf-nom { font-family: var(--font-body); font-size: 22px; color: var(--cream); }
.pf-sous { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.pf-bio {
  font-size: 13px; color: var(--text); line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; margin: 4px 0 12px;
}
.pf-lab {
  display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); margin: 14px 0 7px;
}
.pf-tags, .pf-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-col { flex-direction: column; }
.pf-tag {
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.06); color: var(--text-dim);
}
.pf-tag-or { background: rgba(232,195,126,.16); color: var(--gold-bright); }
.pf-chip {
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--line-soft); color: var(--text-dim);
  font-family: inherit; font-size: 12px; transition: all .2s;
}
.pf-chip:hover { color: var(--text); }
.pf-mini-chip { padding: 5px 10px; font-size: 11px; }
.pf-on { background: rgba(232,195,126,.16); color: var(--gold-bright); border-color: var(--line); }
.pf-input {
  width: 100%; background: rgba(232,195,126,.06);
  border: 1px solid var(--line-soft); border-radius: 8px; color: var(--cream);
  padding: 9px 10px; font-family: inherit; font-size: 12.5px;
}
.pf-input:focus { outline: none; border-color: var(--gold); }
.pf-area { height: 84px; resize: vertical; }
.pf-file { width: 100%; font-size: 11.5px; color: var(--text-dim); }
.pf-mini {
  display: block; margin-bottom: 8px; background: none;
  border: 1px solid var(--line-soft); border-radius: 6px; color: var(--text-dim);
  font-family: inherit; font-size: 11px; padding: 4px 10px; cursor: pointer;
}
.pf-mini:hover { color: var(--danger); border-color: var(--danger); }
.pf-sensible {
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,.04); border: 1px dashed var(--line-soft);
}
.pf-check { display: flex; gap: 9px; font-size: 11.5px; color: var(--text-dim);
  line-height: 1.5; cursor: pointer; }
.pf-check input { flex: none; margin-top: 2px; }
.pf-sensible .pf-choices { margin-top: 10px; gap: 8px; }
.pf-status { font-size: 11.5px; color: var(--text-dim); margin-top: 12px; min-height: 15px; }
.adm-avatar {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line); display: block; margin-bottom: 8px;
}

/* ── Section Matchs ─────────────────────────────────── */
/* Le bouton vit dans la barre du haut (flux normal), donc `relative` lui donne
   le repère dont la pastille a besoin — sans quoi elle s'ancrerait sur la barre
   entière. Il était au contraire interdit tant que le bouton était `fixed`
   dans le rail : l'id l'emportait sur la classe et le sortait de l'écran. */
#matchesBtn { position: relative; overflow: visible; }
#matchesBtn.has-unread { border-color: var(--gold); }
#matchesBtn.has-unread::after {
  content: attr(data-unread);
  position: absolute; top: -4px; right: -4px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--gold); color: #241a06;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--void);
}
.mt-list { display: flex; flex-direction: column; gap: 7px; max-height: 380px; overflow-y: auto; }
.mt-empty { font-size: 12.5px; color: var(--text-dim); text-align: center;
  padding: 24px 8px; line-height: 1.55; }
.mt-card {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  background: rgba(232,195,126,.05); border: 1px solid var(--line-soft);
  color: var(--text); font-family: inherit; transition: all .2s;
}
.mt-card:hover { background: rgba(232,195,126,.13); border-color: var(--line); }
.mt-new { border-color: rgba(232,195,126,.45); background: rgba(232,195,126,.1); }
.mt-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line); flex: none; display: block; }
.mt-av-vide { display: grid; place-items: center; background: rgba(232,195,126,.12);
  color: var(--gold-bright); font-family: var(--font-body); font-size: 19px; }
.mt-col { flex: 1; min-width: 0; }
.mt-l1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mt-nom { font-size: 13.5px; font-weight: 600; color: var(--cream);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-heure { font-size: 10.5px; color: var(--text-dim); flex: none; }
.mt-l2 { font-size: 12px; color: var(--text-dim); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-neuf { color: var(--gold-bright); }
.mt-badge { flex: none; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--gold); color: #241a06;
  font-size: 10.5px; font-weight: 700; line-height: 19px; text-align: center; }

/* ── Annonce « You got a MATCH! » ───────────────────── */
.mx-back {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(4,5,12,.82); backdrop-filter: blur(10px);
  animation: mxIn .34s cubic-bezier(.2,.8,.2,1);
  overflow: hidden; padding: 20px;
}
.mx-back.mx-out { animation: mxOut .3s ease forwards; }
@keyframes mxIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes mxOut { to { opacity: 0; } }
.mx-card {
  position: relative; z-index: 2; text-align: center;
  width: min(340px, calc(100vw - 40px)); padding: 30px 26px;
  border-radius: var(--radius);
  background: var(--glass-strong); border: 1px solid var(--line);
  box-shadow: 0 24px 80px rgba(0,0,0,.65), 0 0 60px rgba(232,195,126,.14);
  animation: mxPop .6s cubic-bezier(.2,1.3,.35,1);
}
@keyframes mxPop { from { transform: scale(.75) translateY(20px); opacity: 0; } }
.mx-title {
  font-family: var(--font-body); font-size: 27px; font-weight: 400;
  color: var(--gold-bright); letter-spacing: .01em; line-height: 1.15;
  animation: mxGlow 2.1s ease-in-out infinite;
}
@keyframes mxGlow {
  0%,100% { text-shadow: 0 0 16px rgba(246,217,160,.35); }
  50%     { text-shadow: 0 0 30px rgba(246,217,160,.75); }
}
.mx-av {
  width: 92px; height: 92px; border-radius: 50%; margin: 20px auto 14px;
  border: 2px solid var(--gold); overflow: hidden; display: grid; place-items: center;
  animation: mxBeat 1.5s ease-in-out infinite;
}
.mx-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mx-av-vide { background: rgba(232,195,126,.14); color: var(--gold-bright);
  font-family: var(--font-body); font-size: 38px; }
@keyframes mxBeat { 0%,100% { transform: scale(1); } 45% { transform: scale(1.07); } }
.mx-who { font-size: 13px; color: var(--text); line-height: 1.5; margin-bottom: 20px; }
.mx-acts { display: flex; gap: 10px; justify-content: center; }
.mx-heart {
  position: absolute; bottom: -30px; font-size: 22px; z-index: 1;
  animation: mxFloat 3.4s ease-in forwards; opacity: 0;
  pointer-events: none;
}
@keyframes mxFloat {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  15%  { opacity: .9; }
  100% { transform: translateY(-88vh) scale(1.15); opacity: 0; }
}
/* Respecte le réglage système : pas de battement ni d'envol si l'utilisateur
   a demandé à réduire les animations. */
@media (prefers-reduced-motion: reduce) {
  .mx-card, .mx-title, .mx-av, .mx-heart { animation: none; }
  .mx-heart { display: none; }
}

/* ── Mes données (RGPD) ─────────────────────────────── */
.pv-intro { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin: 6px 0 16px; }
.pv-note { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin-top: 8px; }
.pv-wide { width: 100%; }
.pv-danger {
  margin-top: 22px; padding: 14px; border-radius: 10px;
  background: rgba(224,85,72,.07); border: 1px solid rgba(224,85,72,.3);
}
.pv-danger-t { font-size: 13px; font-weight: 600; color: #f0917f; }
.pv-input {
  width: 100%; margin-top: 12px; background: rgba(255,255,255,.05);
  border: 1px solid var(--line-soft); border-radius: 8px; color: var(--cream);
  padding: 9px 10px; font-family: inherit; font-size: 12.5px;
}
.pv-input:focus { outline: none; border-color: var(--danger); }
.pv-del { margin-top: 10px; }
.pv-del:not(:disabled) { color: var(--danger); border-color: rgba(224,85,72,.5); }
.pv-del:disabled { opacity: .45; cursor: not-allowed; }
.pv-status { font-size: 11.5px; color: var(--text-dim); margin-top: 14px; min-height: 15px; }

/* ── Pages légales ──────────────────────────────────── */
.lg-body { overflow-y: auto; background: var(--void); }
.lg-top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 18px;
  padding: 16px 22px; background: var(--glass-strong);
  backdrop-filter: blur(18px); border-bottom: 1px solid var(--line-soft);
}
.lg-back { color: var(--gold); text-decoration: none; font-size: 12.5px; }
.lg-back:hover { color: var(--gold-bright); }
.lg-nav {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 22px; border-bottom: 1px solid var(--line-soft);
}
.lg-nav a {
  font-size: 12px; color: var(--text-dim); text-decoration: none;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-soft);
}
.lg-nav a:hover { color: var(--gold-bright); border-color: var(--line); }
.lg-main { max-width: 760px; margin: 0 auto; padding: 28px 22px 80px; }
.lg-main section { padding-top: 26px; }
.lg-main h1 {
  font-family: var(--font-body); font-size: 30px; font-weight: 600;
  color: var(--cream); margin-bottom: 4px;
}
.lg-main h2 {
  font-family: var(--font-body); font-size: 19px; font-weight: 400;
  color: var(--gold-bright); margin: 26px 0 8px;
}
.lg-main h3 { font-size: 13.5px; font-weight: 600; color: var(--cream); margin: 16px 0 4px; }
.lg-main p, .lg-main li { font-size: 13.5px; color: var(--text); line-height: 1.65; }
.lg-main p { margin-bottom: 10px; }
.lg-main ul { margin: 0 0 12px 20px; }
.lg-main li { margin-bottom: 5px; }
.lg-maj { font-size: 11.5px; color: var(--text-dim); margin-bottom: 18px; }
.lg-table { width: 100%; border-collapse: collapse; margin: 10px 0 16px; }
.lg-table th, .lg-table td {
  text-align: left; padding: 9px 12px; font-size: 13px;
  border-bottom: 1px solid var(--line-soft); vertical-align: top;
}
.lg-table th { color: var(--text-dim); font-weight: 500; width: 42%; }
.lg-table td { color: var(--text); }
/* Champs restant à compléter par l'éditeur — volontairement voyants. */
.lg-todo {
  background: rgba(224,85,72,.14); color: #f0917f;
  padding: 2px 8px; border-radius: 5px; font-size: 12.5px;
}
.lg-foot { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.lg-foot a { color: var(--gold); text-decoration: none; font-size: 13px; }
.lg-mail { color: var(--gold); text-decoration: none; }
.lg-mail:hover { color: var(--gold-bright); text-decoration: underline; }
.acc-legal { font-size: 11px !important; color: var(--text-dim); text-align: center; margin: 14px 0 0 !important; line-height: 1.5; }
.acc-legal a { color: var(--gold); text-decoration: none; }
.acc-legal a:hover { text-decoration: underline; }

/* ── Signalement ciblé ──────────────────────────────── */
.sg-intro { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin: 6px 0 14px; }
.sg-lab { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); margin: 14px 0 8px; }
.sg-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-chip { padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--line-soft); color: var(--text-dim);
  font-family: inherit; font-size: 12px; transition: all .2s; }
.sg-chip:hover { color: var(--text); }
.sg-on { background: rgba(224,85,72,.16); color: #f0917f; border-color: rgba(224,85,72,.4); }
.sg-input { width: 100%; height: 84px; resize: vertical;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-soft);
  border-radius: 8px; color: var(--cream); padding: 10px; font-family: inherit; font-size: 12.5px; }
.sg-input:focus { outline: none; border-color: var(--gold); }
.sg-status { font-size: 11.5px; color: #f0917f; margin-top: 10px; min-height: 15px; }