/* ============================================================
   styles.css — Aircraft2Sell
   CSS global partagé par toutes les pages
   ============================================================ */

/* ── VARIABLES ── */
:root {
  --bg:      #05080f;
  --deep:    #030610;
  --surface: #0a1020;
  --card:    #0c1428;
  --card2:   #0f1830;
  --border:  rgba(180,200,230,.08);
  --border2: rgba(180,200,230,.14);
  --accent:  #e8a020;
  --gold:    #f5c518;
  --mist:    #7a93aa;
  --mist2:   #3d5468;
  --white:   #edf2f8;
  --dim:     #c8d8e8;
  --green:   #22c55e;
  --red:     #ef4444;
  --blue:    #3b82f6;
  --orange:  #f97316;
  --purple:  #a78bfa;
  --glow:    rgba(232,160,32,.18);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── NAV ── */
nav#mainNav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: 64px;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: rgba(3,6,16,.8);
  backdrop-filter: blur(28px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  transition: background .3s;
}
nav#mainNav.scrolled { background: rgba(3,6,16,.97); }

.logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.75rem;
  letter-spacing: .12em;
  color: var(--white);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.logo span { color: var(--accent); }

.nav-links {
  display: flex;
  list-style: none;
  align-items: center;
  gap: .1rem;
  height: 64px;
}
.nav-links a {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 .9rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mist);
  text-decoration: none;
  transition: color .2s;
  white-space: nowrap;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: .9rem; right: .9rem;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .2s;
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--white); }

.nav-right {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}

/* Bouton login */
.btn-nav-login {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--dim);
  padding: .44rem 1.1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
}
.btn-nav-login:hover { border-color: var(--accent); color: var(--accent); }

/* Bouton déposer */
.btn-post {
  background: var(--accent);
  color: var(--deep);
  border: none;
  padding: .48rem 1.3rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, transform .15s;
  display: inline-flex;
  align-items: center;
}
.btn-post:hover { background: var(--gold); transform: translateY(-1px); }

/* Avatar utilisateur */
.nav-user {
  display: none;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  padding: .3rem .65rem;
  border: 1px solid var(--border);
  transition: border-color .2s;
}
.nav-user:hover { border-color: var(--border2); }
.nav-user:hover .nav-avatar { background: rgba(232,160,32,.3) !important; border-color: var(--accent) !important; }
.nav-user:hover .nav-user-name { color: var(--accent) !important; }
.nav-avatar {
  width: 28px; height: 28px;
  background: var(--glow);
  border: 1px solid rgba(232,160,32,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent);
}
.nav-user-name { font-size: .76rem; font-weight: 500; color: var(--dim); }

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: .5rem;
  min-height: unset;
}
.burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--white);
  border-radius: 1px;
  transition: all .25s;
}
.burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ── MOBILE MENU ── */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(3,6,16,.98);
  backdrop-filter: blur(20px);
  z-index: 490;
  flex-direction: column;
  padding: 5rem 2rem 2rem;
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 1.1rem 0;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  display: block;
  transition: color .2s;
}
.mobile-menu a:hover { color: var(--accent); }
.mm-cta {
  margin-top: 2rem;
  background: var(--accent);
  color: var(--deep);
  text-align: center;
  padding: 1rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: .1em;
  cursor: pointer;
  text-decoration: none;
  display: block !important;
  border-bottom: none !important;
}
.mm-cta:hover { background: var(--gold) !important; color: var(--deep) !important; }

/* ── CONVERTISSEUR DEVISE NAV ── */
.nav-currency {
  position: relative;
  display: flex;
  align-items: center;
  height: 64px;
}
.nav-currency-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  height: 64px;
  padding: 0 .9rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mist);
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  transition: color .2s;
  white-space: nowrap;
}
.nav-currency-btn:hover { color: var(--white); }
.nav-currency-btn .cv-arrow { font-size: .55rem; opacity: .5; transition: transform .2s; }
.nav-currency.open .cv-arrow { transform: rotate(180deg); }
.nav-currency.open .nav-currency-btn { color: var(--white); }

.cv-dropdown {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 284px;
  background: rgba(3,6,16,.98);
  backdrop-filter: blur(28px);
  border: 1px solid var(--border2);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.nav-currency.open .cv-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.cv-drop-head {
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cv-drop-title { font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mist2); }
.cv-live { display: flex; align-items: center; gap: .35rem; font-size: .58rem; color: var(--green); }
.cv-live::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
  animation: cvpulse 2s infinite;
  flex-shrink: 0;
}
@keyframes cvpulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.cv-body { padding: .85rem 1rem; }
.cv-row { display: flex; gap: .4rem; margin-bottom: .4rem; align-items: center; }
.cv-inp-wrap { flex: 1; display: flex; border: 1px solid var(--border2); overflow: hidden; min-width: 0; }
.cv-inp {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: none;
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: .92rem;
  padding: .55rem .7rem;
  outline: none;
  min-width: 0;
}
.cv-sel {
  background: rgba(232,160,32,.08);
  border: none;
  border-left: 1px solid var(--border2);
  color: var(--accent);
  font-family: 'DM Sans', sans-serif;
  font-size: .7rem;
  font-weight: 600;
  padding: .3rem .4rem;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
}
.cv-sel option { background: var(--deep); color: var(--white); }
.cv-swap-btn {
  background: none;
  border: 1px solid var(--border2);
  color: var(--mist);
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: .95rem;
  transition: all .15s;
  flex-shrink: 0;
}
.cv-swap-btn:hover { color: var(--accent); border-color: rgba(232,160,32,.3); }
.cv-result-box {
  background: rgba(232,160,32,.06);
  border: 1px solid rgba(232,160,32,.15);
  padding: .55rem .85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .4rem;
}
.cv-result-val { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: .04em; color: var(--accent); }
.cv-to-sel { background: none; border: none; color: var(--accent); font-family: 'DM Sans', sans-serif; font-size: .72rem; font-weight: 700; cursor: pointer; outline: none; padding: 0; }
.cv-to-sel option { background: var(--deep); color: var(--white); }
.cv-rate-txt { font-size: .61rem; color: var(--mist2); text-align: center; padding: .2rem 0; border-top: 1px solid var(--border); }
.cv-rate-txt span { color: var(--mist); }
.cv-quick { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; margin-top: .45rem; }
.cv-qb {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  color: var(--mist);
  padding: .27rem .2rem;
  font-size: .61rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  letter-spacing: .04em;
  transition: all .12s;
  font-family: 'DM Sans', sans-serif;
}
.cv-qb:hover, .cv-qb.on { border-color: rgba(232,160,32,.3); color: var(--accent); background: rgba(232,160,32,.05); }

/* ── TOAST GLOBAL ── */
.toast {
  position: fixed;
  bottom: 2rem; right: 2rem;
  background: var(--card2);
  border: 1px solid var(--border2);
  color: var(--white);
  padding: .8rem 1.4rem;
  font-size: .82rem;
  font-weight: 500;
  z-index: 999;
  opacity: 0;
  transform: translateY(12px);
  transition: all .25s;
  pointer-events: none;
  max-width: 320px;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ── RESPONSIVE NAV ── */
@media (max-width: 768px) {
  nav#mainNav { padding: 0 1.25rem; }
  .nav-links, .btn-nav-login { display: none !important; }
  .burger { display: flex; }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-menu { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
}