/* === SAS Trari — Design Upgrade ===
 * Améliorations visuelles non-invasives par CSS overrides
 */

/* === Background : dégradé profond + subtle noise === */
body {
  background: 
    radial-gradient(ellipse at 50% 0%, rgba(13, 129, 179, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(234, 199, 97, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #0a1428 0%, #162444 50%, #0a1428 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
  position: relative !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

#root {
  position: relative;
  z-index: 2;
}

/* === Typography : meilleur tracking === */
* {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

h1, h2, h3 {
  letter-spacing: -0.015em !important;
}

/* Playfair Display — optical kerning sur grands titres */
[style*="Playfair Display"] {
  font-feature-settings: "liga", "kern" !important;
  letter-spacing: -0.02em !important;
}

/* === Cards : depth + or subtle === */
[style*="rgba(255,255,255,0.055)"],
[style*="rgba(255,255,255,0.07)"],
[style*="rgba(255,255,255,0.09)"] {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 8px 32px rgba(0, 0, 0, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Cards hover : élévation + or */
button[style*="rgba(255,255,255"]:hover,
[style*="rgba(255,255,255,0.055)"]:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 1px 0 rgba(234, 199, 97, 0.2) inset,
    0 16px 48px rgba(0, 0, 0, 0.28),
    0 4px 12px rgba(234, 199, 97, 0.12) !important;
  border-color: rgba(234, 199, 97, 0.4) !important;
}

/* === Photo Samirra : ring or au survol === */
img[alt*="Samirra"], img[src*="samirra"] {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(234, 199, 97, 0) !important;
}
img[alt*="Samirra"]:hover, img[src*="samirra"]:hover {
  transform: scale(1.03) !important;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.4),
    0 0 0 3px rgba(234, 199, 97, 0.5) !important;
}

/* === Bouton CTA gold (élégance) === */
button[style*="#eac761"],
button[style*="#c49a35"] {
  background: linear-gradient(135deg, #eac761 0%, #d4ad44 100%) !important;
  color: #040d1f !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  box-shadow: 
    0 4px 16px rgba(234, 199, 97, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.4) inset !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
button[style*="#eac761"]:hover,
button[style*="#c49a35"]:hover {
  transform: translateY(-1px) !important;
  background: linear-gradient(135deg, #f0d275 0%, #e0bd58 100%) !important;
  box-shadow:
    0 8px 24px rgba(234, 199, 97, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.4) inset !important;
}
button[style*="#eac761"]:active,
button[style*="#c49a35"]:active {
  transform: translateY(0) scale(0.98) !important;
}

/* === Badges étoiles (5 stars header) === */
[style*="background:linear-gradient(135deg, rgba(255,255,255,0.09)"] {
  background: linear-gradient(135deg, rgba(234, 199, 97, 0.10) 0%, rgba(234, 199, 97, 0.04) 100%) !important;
  border-color: rgba(234, 199, 97, 0.18) !important;
  box-shadow: 0 4px 16px rgba(234, 199, 97, 0.06) !important;
}

/* === Inputs : focus état or === */
input {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
input:focus {
  border-color: rgba(234, 199, 97, 0.6) !important;
  box-shadow: 0 0 0 4px rgba(234, 199, 97, 0.12) !important;
  outline: none !important;
}

/* === Animations améliorées === */
@keyframes breath {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.92; transform: scale(1.01); }
}

@keyframes shimmerGold {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Loading dots / live indicator subtile pulsation */
[style*="background:#10b981"][style*="border-radius:99"] {
  animation: breath 2.4s ease-in-out infinite !important;
}

/* === Scrollbar élégante === */
::-webkit-scrollbar {
  width: 8px !important;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2) !important;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(234, 199, 97, 0.4), rgba(234, 199, 97, 0.2)) !important;
  border-radius: 99px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(234, 199, 97, 0.6), rgba(234, 199, 97, 0.35)) !important;
}

/* === Mobile : meilleure densité === */
@media (max-width: 480px) {
  body {
    background-size: 100% 200% !important;
  }
}

/* === Sélection de texte cohérente avec brand === */
::selection {
  background: rgba(234, 199, 97, 0.35) !important;
  color: #ffffff !important;
}

/* === Préchargement smooth === */
#root > div {
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Élégance des séparateurs === */
[style*="border:1px solid rgba(255,255,255,0.1)"],
[style*="border:1px solid rgba(255,255,255,0.14)"] {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* === Touche finale — link hover or === */
a:hover {
  color: #eac761 !important;
  transition: color 0.2s ease !important;
}