/* ═══════════════════════════════════════════════════════════════════════
   LDV Movers — carte de visite numérique (la page où mène le QR code).
   Autonome : elle doit s'ouvrir vite en données mobiles. Même palette que
   le site : le violet des cubes, le lime du chariot, la scène charbon.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg:        #0f0d14;
  --violet:    #7b3fa8;
  --violet-dk: #5b1a80;
  --lime:      #a6f000;
  --lime-soft: #8fd400;
  --ink:       #f4effb;
  --ink-2:     #cfc4de;
  --muted:     #9a8fb0;
  --line:      rgba(255, 255, 255, .11);
  --on-lime:   #0f0d14;
  --font-title: 'Quicksand', 'Trebuchet MS', sans-serif;
  --font-text:  'Figtree', system-ui, -apple-system, sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  padding: clamp(18px, 5vw, 48px) 16px calc(28px + env(safe-area-inset-bottom));
  display: flex; justify-content: center; align-items: flex-start;
  font: 16px/1.55 var(--font-text);
  color: var(--ink);
  background:
    radial-gradient(70% 45% at 50% 0%, rgba(123, 63, 168, .42), transparent 70%),
    radial-gradient(50% 35% at 90% 100%, rgba(166, 240, 0, .09), transparent 70%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, p, dl, dd, dt, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
/* Un élément [hidden] reste caché même si sa classe lui donne un display. */
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 10px; }

.card {
  position: relative; overflow: hidden;
  width: min(440px, 100%);
  padding: clamp(24px, 6vw, 38px);
  border: 1px solid var(--line); border-radius: 28px;
  background: linear-gradient(170deg, rgba(45, 26, 66, .94), rgba(18, 14, 26, .97));
  box-shadow: 0 40px 90px -45px rgba(0, 0, 0, .9);
}

/* Le chevron de la roue du chariot, en angle : la seule décoration. */
.card__chevron {
  position: absolute; top: 22px; right: 22px;
  width: 20px; height: 20px;
  border-right: 4px solid var(--lime); border-top: 4px solid var(--lime);
  border-radius: 3px; transform: rotate(45deg);
  opacity: .8; pointer-events: none;
}

.card__head { text-align: center; }
.card__mark { width: 96px; height: 96px; margin: 0 auto 10px; }
.card__name {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(28px, 7.4vw, 34px); letter-spacing: -.01em; line-height: 1.1;
}
.card__name span { color: var(--lime); }
/* Le trait lime sous « movers », comme sur le logo. */
.card__name::after {
  content: ''; display: block; width: 64px; height: 3px; margin: 10px auto 0;
  border-radius: 3px; background: var(--lime);
}
.card__tag { margin-top: 12px; color: var(--ink-2); font-size: 15.5px; }
.card__place { margin-top: 2px; color: var(--muted); font-size: 14px; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 12px; padding: 15px 20px;
  border: 1.5px solid transparent; border-radius: 999px; cursor: pointer;
  font: 600 16px var(--font-text); text-decoration: none;
  transition: background-color .2s, transform .2s var(--ease-out), border-color .2s;
}
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn--primary { margin-top: 26px; background: var(--lime); color: var(--on-lime); }
.btn--primary:hover { background: var(--lime-soft); }
.btn--primary:active { transform: scale(.985); }
.btn--ghost { background: transparent; color: var(--ink); border-color: rgba(255, 255, 255, .22); }
.btn--ghost:hover { border-color: var(--lime); background: rgba(166, 240, 0, .08); }

.quick {
  display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 8px;
  margin-top: 16px;
}
.quick a {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 4px; border: 1px solid var(--line); border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  text-decoration: none; font-size: 12.5px; font-weight: 500;
  transition: border-color .2s, background-color .2s;
}
.quick a:hover { border-color: var(--lime); background: rgba(166, 240, 0, .09); }
.quick svg { width: 22px; height: 22px; fill: none; stroke: var(--lime); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.details { margin-top: 26px; display: grid; gap: 14px; }
.details > div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: baseline; }
.details dt { color: var(--muted); font-size: 13px; }
.details dd { font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.details a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(166, 240, 0, .45); }
.details a:hover { color: var(--lime); }

.trades { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.trades li {
  padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: rgba(123, 63, 168, .28); color: var(--ink);
  border: 1px solid rgba(123, 63, 168, .55);
}

.qr { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); text-align: center; }
.qr img {
  width: clamp(190px, 56vw, 236px); height: auto; margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 0 0 4px rgba(166, 240, 0, .9), 0 18px 40px -18px rgba(0, 0, 0, .8);
}
.qr p { margin-top: 14px; color: var(--muted); font-size: 13.5px; }
.qr .btn { margin-top: 16px; }

.card__foot {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.back { color: var(--muted); font-size: 14px; text-decoration: none; border-bottom: 1px solid transparent; }
.back:hover { color: var(--lime); border-bottom-color: var(--lime); }

.lang { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.lang button {
  padding: 6px 11px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--muted); font: 600 12px var(--font-text);
  transition: background-color .2s, color .2s;
}
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] { background: var(--lime); color: var(--on-lime); }

@media (max-width: 360px) {
  .quick { grid-template-columns: repeat(2, 1fr); }
  .details > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}