/* ================================================
   BM Rénov Design - Custom CSS
   Compléments que Tailwind ne gère pas directement.
   Bleu ardoise #2f4b6e · Orange #c05a12/#ef7f1a · Crème #f6f3ee
   ================================================ */

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* ===== SCROLL ANIMATIONS ===== */
.animate-on-scroll {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.animated { opacity: 1; transform: translateY(0); }
.animate-on-scroll:nth-child(2) { transition-delay: 0.08s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll { opacity: 1; transform: none; transition: none; animation: none; }
    html { scroll-behavior: auto; }
}

/* ===== NAVIGATION ===== */
.nav-link { position: relative; }
.nav-link::after {
    content: ''; position: absolute; bottom: -6px; left: 0;
    width: 0; height: 2px; background-color: #c05a12; transition: width 0.3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link:hover, .nav-link.active { color: #c05a12; }

/* ===== PORTFOLIO / GALLERY ===== */
.filter-btn.active { background-color: #c05a12; color: #fff; border-color: #c05a12; }
.gallery-item { transition: opacity 0.4s ease, transform 0.4s ease; }
.gallery-item.hidden-item {
    opacity: 0; transform: scale(0.9); pointer-events: none;
    position: absolute; width: 0; height: 0; overflow: hidden;
}

/* ===== FAQ ===== */
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
.mc-plus { transition: transform 0.25s ease; }
details[open] .mc-plus { transform: rotate(45deg); }

/* ===== LIGHTBOX ===== */
#lightbox { opacity: 0; transition: opacity 0.3s ease; }
#lightbox.active { opacity: 1; }
#lightbox-img { transform: scale(0.92); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; }
#lightbox.active #lightbox-img { transform: scale(1); }

/* ===== HEADER ===== */
#header.scrolled { box-shadow: 0 6px 24px rgba(36, 53, 78, 0.10); }

/* ===== PRELOADER ===== */
#preloader.fade-out { opacity: 0; pointer-events: none; }

/* ===== FORMULAIRE ===== */
.form-success { background-color: #c05a12; color: #fff; padding: 14px 16px; font-size: 14px; font-weight: 600; text-align: center; }
.form-error   { background-color: #b91c1c; color: #fff; padding: 14px 16px; font-size: 14px; font-weight: 600; text-align: center; }

/* ===== MISC ===== */
.counter { display: inline-block; }
* { scrollbar-width: thin; scrollbar-color: #c05a12 #f6f3ee; }
*::-webkit-scrollbar { width: 10px; }
*::-webkit-scrollbar-track { background: #f6f3ee; }
*::-webkit-scrollbar-thumb { background-color: #c05a12; border: 2px solid #f6f3ee; }
:focus-visible { outline: 2px solid #c05a12; outline-offset: 2px; }

/* Mobile Menu */
#mobile-menu.open { pointer-events: auto; }
#mobile-menu.open #menu-overlay { opacity: 1; }
#mobile-menu.open #menu-panel { transform: translateX(0); }