/* ══════════════════════════════════════════════════════════════
   SNIBA Rent A Car — styles personnalisés
   Complète Tailwind (chargé via CDN dans views/partials/head.ejs)
   ══════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }
body { background: #0c0b09; }

/* ── Or & surfaces ── */
.gold-text { background: linear-gradient(180deg, #f0d99a 0%, #d4af5f 55%, #a9843e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gold-btn { background: linear-gradient(180deg, #e8cd88 0%, #d4af5f 60%, #c09a4a 100%); transition: all .3s ease; }
.gold-btn:hover { filter: brightness(1.1); box-shadow: 0 0 24px rgba(212,175,95,.45); }
.hero-bg {
  background:
    radial-gradient(ellipse 60% 45% at 50% 108%, rgba(212,175,95,.22), transparent 65%),
    radial-gradient(ellipse 35% 45% at 12% 60%, rgba(212,140,60,.14), transparent 70%),
    radial-gradient(ellipse 35% 45% at 88% 60%, rgba(212,140,60,.14), transparent 70%),
    linear-gradient(180deg, #171310 0%, #12100c 45%, #0c0b09 100%);
}
.card-sheen { background: linear-gradient(160deg, #23201a 0%, #17140f 60%, #131009 100%); }
.divider-orn { display: flex; align-items: center; gap: 14px; justify-content: center; }
.divider-orn::before, .divider-orn::after { content: ''; height: 1px; width: 90px; background: linear-gradient(90deg, transparent, #d4af5f); }
.divider-orn::after { background: linear-gradient(90deg, #d4af5f, transparent); }

/* ── Formulaires ── */
select { -webkit-appearance: none; appearance: none; }
.field label { letter-spacing: .14em; }
input[type="date"] { color-scheme: dark; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8) sepia(1) saturate(3) hue-rotate(-15deg); cursor: pointer; }
option { background: #141210; color: #f5efe0; }
.glass-form { background: rgba(255,255,255,.04); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.glass-field { transition: background .3s ease; }
.glass-field:hover, .glass-field:focus-within { background: rgba(212,175,95,.07); }

/* Champ en erreur */
.field-error { border-color: rgba(220,90,90,.7) !important; }
.error-msg { color: #e88b8b; font-size: 12.5px; margin-top: 6px; letter-spacing: .04em; }

/* Pot de miel anti-spam : invisible pour les humains, rempli par les robots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Images ── */
.img-fail img { display: none; }
.img-fail .fallback { display: flex !important; }
.stat-num { font-variant-numeric: tabular-nums; }

/* ── Animations ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes driveIn { from { opacity: 0; transform: translateX(140px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { to { background-position: 200% center; } }
@keyframes glowPulse { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes bounceDown { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(9px); opacity: .4; } }

.anim-fadeUp { opacity: 0; animation: fadeUp 1s cubic-bezier(.22,1,.36,1) forwards; }
.anim-driveIn { opacity: 0; animation: driveIn 1.3s cubic-bezier(.22,1,.36,1) forwards; }
.shimmer-text { background: linear-gradient(90deg,#a9843e 0%,#f5e3ae 25%,#d4af5f 50%,#f0d99a 75%,#a9843e 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 5s linear infinite; }
.lantern { animation: glowPulse 3.5s ease-in-out infinite; }
.float-slow { animation: floatY 7s ease-in-out infinite; }
.spin-slow { animation: spinSlow 70s linear infinite; }
.scroll-cue { animation: bounceDown 2s ease-in-out infinite; }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity: 1; transform: none; }

.gold-btn { position: relative; overflow: hidden; }
.gold-btn::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent); transform: skewX(-20deg); transition: left .6s ease; }
.gold-btn:hover::after { left: 130%; }

/* ── Navigation ── */
header nav a { position: relative; padding-bottom: 4px; }
header nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: linear-gradient(90deg,#e8c97e,#b8924a); transition: width .35s ease; }
header nav a:hover::after, header nav a.is-active::after { width: 100%; }
header nav a.is-active { color: #d4af5f; }

/* Menu mobile */
#mobile-menu { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.22,1,.36,1); }
#mobile-menu.open { max-height: 26rem; }

/* ── Bouton WhatsApp flottant ── */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 56px; height: 56px; border-radius: 9999px;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(0,0,0,.45);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 10px 32px rgba(37,211,102,.5); }
.wa-float::before {
  content: ''; position: absolute; inset: 0; border-radius: 9999px;
  border: 2px solid rgba(37,211,102,.55); animation: waPing 2.4s ease-out infinite;
}
@keyframes waPing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }

/* ── Accessibilité ── */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal, .anim-fadeUp, .anim-driveIn { opacity: 1 !important; transform: none !important; }
}