/* Custom styles for Garnier Alliance Group v2 */

/* Brand Colors */
:root {
  --bleu-nuit: #0F172A;
  --blanc-casse: #F8FAFC;
  --or-vieilli: #B8860B;
  --or-rose: #C2927E;
  --bleu-acier: #475569;
  --emeraude: #064E3B;
  --argent: #CBD5E1;
}

/* Glassmorphism Navigation */
.glass-nav {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(203, 213, 225, 0.1);
}

/* Glow Effects */
.glow-gold {
  box-shadow: 0 4px 30px rgba(184, 134, 11, 0.3);
}

.glow-gold:hover {
  box-shadow: 0 6px 40px rgba(184, 134, 11, 0.4);
}

.glow-rose {
  box-shadow: 0 4px 30px rgba(194, 146, 126, 0.2);
}

.glow-emerald {
  box-shadow: 0 4px 30px rgba(6, 78, 59, 0.2);
}

/* Gradient backgrounds */
.bg-gradient-nuit {
  background: linear-gradient(135deg, #0F172A 0%, #1e293b 100%);
}

.bg-glow-rose {
  background: radial-gradient(circle, rgba(194, 146, 126, 0.1) 0%, transparent 70%);
}

.bg-glow-emerald {
  background: radial-gradient(circle, rgba(6, 78, 59, 0.15) 0%, transparent 70%);
}

.bg-glow-gold {
  background: radial-gradient(circle, rgba(184, 134, 11, 0.08) 0%, transparent 70%);
}

/* Typography - Italic emphasis for elegance */
.font-playfair-italic {
  font-family: 'Playfair Display', serif;
  font-style: italic;
}

/* Image Placeholder Styling */
.img-placeholder {
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, #334155 0%, #475569 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 0.875rem;
}

.img-placeholder.grayscale {
  filter: grayscale(100%);
}

/* Smooth transitions */
.transition-all-smooth {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0F172A;
}

::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Card hover effects */
.card-hover {
  transition: all 0.3s ease;
  border: 1px solid rgba(203, 213, 225, 0.1);
}

.card-hover:hover {
  transform: translateY(-5px);
  border-color: rgba(203, 213, 225, 0.2);
}

/* Quote styling */
.quote-mark {
  font-size: 4rem;
  color: var(--or-vieilli);
  opacity: 0.3;
  line-height: 1;
}

/* Pillar accent borders */
.border-capital {
  border-top: 3px solid var(--emeraude);
}

.border-produit {
  border-top: 3px solid var(--bleu-acier);
}

.border-humain {
  border-top: 3px solid var(--or-rose);
}

/* Navigation active state */
.nav-active {
  color: var(--or-vieilli);
  border-bottom: 2px solid var(--or-vieilli);
}