/* ============================================================
   Versailles Motors — espace propriétaire
   ============================================================ */

:root {
  --bg: #070608;
  --bg-soft: #0d0c0f;
  --surface: #131216;
  --line: rgba(255, 255, 255, 0.1);
  --text: #f5f5f7;
  --muted: #9d9da4;
  --faint: #6e6e76;
  --red: #e10613;
  --green: #2fbf71;
  --serif: "Bodoni Moda", Didot, "Playfair Display", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 15px; font-weight: 300; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--red); color: #fff; }
img { display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.container { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }

/* ---------- barre ---------- */
.bar { border-bottom: 1px solid var(--line); background: rgba(7,6,8,.8); position: sticky; top: 0; z-index: 50; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.bar__inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.bar__brand { display: flex; align-items: center; gap: 11px; }
.bar__brand img { width: 28px; height: 28px; }
.bar__brand span { font-family: var(--serif); letter-spacing: 0.26em; font-size: 12.5px; }
.bar__brand small { color: var(--faint); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-left: 4px; }
.bar__actions { display: flex; gap: 10px; align-items: center; }

/* ---------- boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.03em;
  padding: 10px 20px; border-radius: 99px; cursor: pointer; border: 1px solid transparent;
  transition: all 0.3s var(--ease); background: none; color: var(--text);
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--text); color: #0a0a0c; }
.btn--primary:hover { background: #fff; }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: #f31523; }
.btn--ghost { border-color: var(--line); }
.btn--ghost:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.04); }
.btn--danger { color: #ff5a64; border-color: rgba(255,90,100,.3); }
.btn--danger:hover { background: rgba(225,6,19,.12); border-color: rgba(255,90,100,.6); }
.btn--sm { padding: 7px 14px; font-size: 12.5px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- connexion ---------- */
.login { min-height: 100svh; display: grid; place-items: center; padding: 24px; }
.login__card {
  width: min(420px, 100%); text-align: center;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 24px;
  padding: 52px 40px 44px;
}
.login__card img { width: 64px; height: 64px; margin: 0 auto 22px; }
.login__card h1 { font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: 0.14em; }
.login__card p { color: var(--muted); font-size: 13.5px; margin: 10px 0 30px; }
.login__card form { display: grid; gap: 14px; }

/* ---------- champs ---------- */
.field { display: grid; gap: 7px; text-align: left; }
.field span { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
.field input, .field textarea, .field select {
  background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); font: inherit; font-size: 14.5px; padding: 12px 14px;
  transition: border-color 0.3s, background 0.3s; width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06);
}
.field textarea { min-height: 120px; resize: vertical; }

/* ---------- contenu ---------- */
.page { padding: 44px 0 90px; }
.page h2 { font-family: var(--serif); font-weight: 500; font-size: 30px; margin-bottom: 6px; }
.page .hint { color: var(--muted); font-size: 14px; margin-bottom: 34px; }

.section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 52px 0 20px; }
.section-title h3 { font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--faint); font-weight: 500; }

/* ---------- liste des véhicules ---------- */
.list { display: grid; gap: 14px; }
.row {
  display: grid; grid-template-columns: 34px 132px 1fr auto; gap: 20px; align-items: center;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 18px; padding: 14px;
  transition: border-color 0.3s;
}
.row:hover { border-color: rgba(255,255,255,.22); }

/* flèches de réordonnancement */
.row__order { display: flex; flex-direction: column; gap: 5px; }
.row__move {
  width: 30px; height: 27px; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(255,255,255,.03); color: var(--muted); cursor: pointer;
  font-size: 13px; line-height: 1; display: grid; place-items: center;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.row__move:hover:not(:disabled) { color: var(--text); border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.07); }
.row__move:disabled { opacity: .28; cursor: default; }
.row__thumb { width: 132px; aspect-ratio: 16/10; border-radius: 11px; overflow: hidden; background: #0a0a0c; }
.row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.row--off .row__thumb img { filter: grayscale(.7) brightness(.6); }
.row__main h4 { font-size: 16.5px; font-weight: 500; }
.row__main p { color: var(--muted); font-size: 13px; margin-top: 2px; }
.row__meta { color: var(--faint); font-size: 12.5px; margin-top: 7px; display: flex; gap: 14px; flex-wrap: wrap; }
.row__badges { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: 2px; }
.badge {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  border-radius: 99px; padding: 3.5px 9px; background: rgba(255,255,255,.08); color: var(--muted);
}
.badge--sold { background: rgba(225,6,19,.85); color: #fff; }
.badge--demo { background: rgba(255,255,255,.1); }
.badge--hidden { background: rgba(255,255,255,.05); border: 1px dashed var(--line); }
.row__actions { display: flex; flex-direction: column; gap: 7px; align-items: stretch; }
@media (max-width: 720px) {
  .row { grid-template-columns: 34px 96px 1fr; }
  .row__thumb { width: 96px; }
  .row__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}

.list-empty {
  border: 1px dashed var(--line); border-radius: 18px; padding: 54px 24px; text-align: center; color: var(--muted);
}

/* ---------- cartes réglages ---------- */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 18px; padding: 28px; }
.card h4 { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.card > p { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.card form { display: grid; gap: 14px; }
.card .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .card .grid2 { grid-template-columns: 1fr; } }

/* ---------- modale d'édition ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(4,4,6,.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.modal__panel {
  position: relative; width: min(760px, 100%); max-height: calc(100svh - 36px); overflow-y: auto;
  background: #0e0d11; border: 1px solid var(--line); border-radius: 22px; padding: 36px;
  animation: pop .45s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(26px) scale(.985); } }
.modal__panel h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; margin-bottom: 26px; }
.modal__panel form { display: grid; gap: 16px; }
.modal__panel .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.modal__panel .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .modal__panel .grid2, .modal__panel .grid3 { grid-template-columns: 1fr; } }
.modal__close {
  position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: none; color: var(--text); cursor: pointer; font-size: 15px;
  transition: background .3s; display: grid; place-items: center;
}
.modal__close:hover { background: rgba(255,255,255,.08); }
.modal__footer { display: flex; justify-content: flex-end; gap: 12px; margin-top: 10px; }

/* ---------- photos dans la modale ---------- */
.photos { display: grid; gap: 10px; }
.photos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.photo {
  position: relative; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: #0a0a0c;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo__cover {
  position: absolute; left: 6px; bottom: 6px; font-size: 9px; letter-spacing: .14em; font-weight: 600;
  text-transform: uppercase; background: var(--red); color: #fff; border-radius: 99px; padding: 3px 8px;
}
.photo__tools { position: absolute; top: 5px; right: 5px; display: flex; gap: 4px; }
.photo__tools button {
  width: 24px; height: 24px; border-radius: 7px; border: none; cursor: pointer;
  background: rgba(7,6,8,.78); color: #fff; font-size: 12px; line-height: 1;
  transition: background .25s; display: grid; place-items: center;
}
.photo__tools button:hover { background: var(--red); }
.drop {
  border: 1.5px dashed var(--line); border-radius: 12px; padding: 26px; text-align: center;
  color: var(--muted); font-size: 13.5px; cursor: pointer; transition: border-color .3s, background .3s;
}
.drop:hover, .drop.over { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.03); }
.drop input { display: none; }
.drop strong { color: var(--text); font-weight: 500; }

/* aperçu vidéo */
.video-preview { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #0a0a0c; }
.video-preview video { width: 100%; max-height: 240px; display: block; background: #000; object-fit: contain; }
.video-preview__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; }
.video-preview__bar span { font-size: 12.5px; color: var(--muted); }
.badge--video { background: rgba(255,255,255,.1); }

/* textes du site */
#contentFields { display: grid; gap: 13px; }
#contentFields textarea { min-height: 64px; }
.content-group { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); font-weight: 500; margin: 24px 0 2px; }
.content-group:first-child { margin-top: 2px; }
.content-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- toasts ---------- */
.toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; display: grid; gap: 8px; }
.toast {
  background: #17161b; border: 1px solid var(--line); border-radius: 99px;
  padding: 11px 22px; font-size: 13.5px; box-shadow: 0 18px 50px rgba(0,0,0,.5);
  animation: toastin .4s var(--ease);
}
.toast--ok { border-color: rgba(47,191,113,.4); }
.toast--err { border-color: rgba(225,6,19,.55); }
@keyframes toastin { from { opacity: 0; transform: translateY(12px); } }

.error { color: #ff5a64; font-size: 13px; min-height: 18px; }
[hidden] { display: none !important; }