/* ==========================================================================
   Base & Backgrounds
   ========================================================================== */
body {
    background-color: #0a0a0a !important;
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
    background-size: 30px 30px !important;
}

/* Le reste de ton code ne change pas... */
.bg-hero {
    position: relative;
    overflow: hidden;
}
.bg-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.4), rgba(10, 10, 10, 1));
    z-index: 1;
    pointer-events: none;
}
.faq-icon { transition: transform .2s ease; }
.faq-icon.open { transform: rotate(45deg); }

/* ==========================================================================
   Cards & UI Elements
   ========================================================================== */
.premium-card {
    background: linear-gradient(145deg, #141414 0%, #0a0a0a 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-card:hover {
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.1);
}

/* Bouton Premium (Notre ajout récent) */
.cta-devis {
    background: linear-gradient(135deg, #d4af37 0%, #aa7c11 100%); /* Gold premium */
    color: #111;
    font-weight: 700;
    text-transform: uppercase;
    padding: 15px 30px;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.cta-devis:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
}

/* ==========================================================================
   Utilities & Scrolling
   ========================================================================== */
.hide-scrollbar::-webkit-scrollbar { 
    display: none; 
}

.hide-scrollbar { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* ==========================================================================
   Gallery & Images
   ========================================================================== */
.gallery-item { 
    flex: 0 0 auto; 
    width: 85vw; 
    max-width: 600px; 
    scroll-snap-align: center; 
}

.img-container { 
    overflow: hidden; 
    position: relative; 
}

.img-hover { 
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

.img-container::after { 
    content: ''; 
    position: absolute; 
    inset: 0; 
    background: linear-gradient(to top, rgba(10,10,10,0.8), transparent); 
    opacity: 0; 
    transition: opacity 0.4s ease; 
}

.img-container:hover::after { 
    opacity: 1; 
}

.img-container:hover .img-hover { 
    transform: scale(1.05); 
}

/* ==========================================================================
   FAQ Details/Summary
   ========================================================================== */
details > summary { 
    list-style: none; 
}

details > summary::-webkit-details-marker { 
    display: none; 
}

details[open] summary ~ * { 
    animation: sweep .4s ease-in-out; 
}

@keyframes sweep { 
    0% { opacity: 0; margin-top: -10px; } 
    100% { opacity: 1; margin-top: 0px; } 
}

/* ==========================================================================
   Slider Elements
   ========================================================================== */
.slide-overlay { 
    background: linear-gradient(to top, rgba(10,10,10,0.9), transparent); 
    opacity: 0; 
    transition: opacity 0.4s ease; 
}

.group:hover .slide-overlay { 
    opacity: 1; 
}

.slider-dot { 
    transition: all 0.3s ease; 
}

.slider-dot.active { 
    background-color: #D4AF37; 
    width: 2rem; 
}

/* ==========================================================================
   Navigation
   ========================================================================== */
#mobile-menu { 
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; 
    max-height: 0; 
    opacity: 0; 
    overflow: hidden; 
}

#mobile-menu.open { 
    max-height: 500px; 
    opacity: 1; 
}

.lang-active { 
    color: #D4AF37; 
    font-weight: 700; 
}

/* ==========================================================================
   Animations & Delays
   ========================================================================== */
.reveal { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

.reveal.active { 
    opacity: 1; 
    transform: translateY(0); 
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* ==========================================================================
   Floating Elements
   ========================================================================== */
.whatsapp-float { 
    position: fixed; 
    bottom: 30px; 
    right: 30px; 
    z-index: 90; 
    transition: all 0.3s ease; 
}

.whatsapp-float:hover { 
    transform: scale(1.1) translateY(-5px); 
}

/* ==========================================================================
   Auto Crossfade Images
   ========================================================================== */
@keyframes auto-crossfade {
    0%, 25% { opacity: 1; }
    33%, 92% { opacity: 0; }
    100% { opacity: 1; }
}

.img-fade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #141414;
    opacity: 0;
    animation: auto-crossfade 12s infinite;
}

/* ==========================================================================
   Accessibility Helpers
   ========================================================================== */

/* Texte caché visuellement mais lu par les lecteurs d'écran */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Lien d'évitement (Skip Link) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 2rem;
    background: #D4AF37; /* Gold */
    color: #0a0a0a;
    padding: 0.75rem 1.5rem;
    z-index: 10000;
    font-weight: bold;
    border-radius: 0 0 8px 8px;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
}

/* Composants réutilisables */
.price-card {
    @apply premium-card p-8 md:p-10 rounded-2xl flex flex-col h-full transition-all duration-300 hover:border-gold-400/50;
}

.price-title {
    @apply text-lg md:text-xl font-display font-bold tracking-wider uppercase text-white mb-2;
}

.price-value {
    @apply text-gold-400 font-display font-semibold text-3xl md:text-4xl mb-8;
}

.feature-list {
    @apply text-gray-400 font-light space-y-4 mb-8 flex-grow text-sm;
}

.img-fade:nth-child(1) { animation-delay: 0s; }
.img-fade:nth-child(2) { animation-delay: 4s; }
.img-fade:nth-child(3) { animation-delay: 8s; }