/* === BASE STYLES === */
body {
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
    color: #374151; /* Default text color (Tailwind gray-700) */
    line-height: 1.6;
    background-color: #f9fafb; /* Tailwind gray-50 - matches your body class */
    overflow-x: hidden; /* Prevent horizontal scrollbars */
}

html, body {
    min-height: 100%;
}

.gradient-text {
    background: linear-gradient(90deg, #1e3a8a, #ec4899); /* Darpub blue to pink */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* === BUTTON STYLES === */
/* General Primary Button Style (e.g., Nav "Demander un devis") */
.btn-primary {
    background-color: #ec4899; /* Darpub pink */
    color: white !important;
    padding: 0.6rem 1.2rem;
    border-radius: 0.5rem;
    font-weight: 500;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    display: inline-block;
    line-height: 1.5;
    border: 1px solid transparent;
}

.btn-primary:hover {
    background-color: #db2777; /* Darker Darpub pink */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(236, 72, 153, 0.3);
}

/* General Secondary Button Style (e.g., Portfolio "Voir plus") */
.btn-secondary {
    background-color: #1e3a8a; /* Darpub blue */
    color: white !important;
    padding: 0.6rem 1.2rem;
    border-radius: 0.5rem;
    font-weight: 500;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    display: inline-block;
    line-height: 1.5;
    border: 1px solid transparent;
}

.btn-secondary:hover {
    background-color: #172e6b; /* Darker Darpub blue */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(30, 58, 138, 0.3);
}

/* Hero Section Button Specifics (#accueil on index.html) */
#accueil a.bg-\[\#C02C95\] { /* "Nos Services" button */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease !important;
}
#accueil a.bg-\[\#C02C95\]:hover {
    background-color: #a82580 !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(192, 44, 149, 0.35);
}

#accueil a.bg-white { /* "Contactez-nous" button in hero */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease, color 0.3s ease !important;
}
#accueil a.bg-white:hover {
    background-color: #f0f0f0 !important;
    color: #0c3054 !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* Devis CTA button (pink section on index.html) */
#devis-cta a.bg-white {
     transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease, color 0.3s ease !important;
}
#devis-cta a.bg-white:hover {
    background-color: #f0f0f0 !important;
    color: #1e3a8a !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* Devis Form Submit Button (on devis.html) */
#devis-form-page form button[type="submit"], /* Specific to devis.html form */
#devis form button[type="submit"] { /* Fallback if ID was #devis */
    transition: background 0.4s ease, transform 0.2s ease, box-shadow 0.3s ease !important;
}
#devis-form-page form button[type="submit"]:hover,
#devis form button[type="submit"]:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.4);
}


/* === NAVIGATION STYLES === */
header.sticky {
    transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
/* Style for header when scrolled */
header.sticky.header-scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Tailwind's shadow-md */
    /* background-color: rgba(255, 255, 255, 0.98); */ /* Optional: slightly transparent white for blur effect */
    /* backdrop-filter: blur(5px); */ /* Optional: Add if using a transparent background */
}


/* Desktop Navigation Links */
header nav a.nav-link {
    position: relative;
    padding-bottom: 8px;
    transition: color 0.3s ease;
    font-weight: 500;
    color: #4b5563; /* Tailwind gray-600 */
}

header nav a.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2.5px;
    background-color: #ec4899; /* Darpub pink */
    border-radius: 1px;
    transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

header nav a.nav-link:hover,
header nav a.nav-link.active { /* .active class added by JS */
    color: #ec4899 !important;
}

header nav a.nav-link:hover::after,
header nav a.nav-link.active::after {
    width: 100%;
}

/* Mobile Navigation */
#mobile-menu {
    border-top: 1px solid #e5e7eb;
}
.mobile-nav-link {
    display: block;
    padding: 0.8rem 1rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: 500;
    color: #4b5563;
}
.mobile-nav-link:hover,
.mobile-nav-link.active { /* .active class added by JS */
    background-color: #fdf2f8; /* Tailwind pink-50 */
    color: #ec4899 !important;
    font-weight: 600;
}
#mobile-menu a.bg-pink-500 { /* "Demander un devis" button in mobile menu */
    transition: background-color 0.3s ease;
}
#mobile-menu a.bg-pink-500:hover {
    background-color: #db2777 !important;
}


/* === SECTION TITLE STYLES === */
.section-title {
    color: #1e3a8a;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 80px;
    height: 4px;
    background-color: #ec4899;
    border-radius: 2px;
}

/* === FEATURE ICON STYLES (Services Section on index.html) === */
#services-preview .feature-icon {
    color: #ec4899;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}
#services-preview .bg-pink-100 { /* Icon container */
    transition: background-color 0.3s ease, transform 0.3s ease;
}
#services-preview .bg-gray-100:hover .bg-pink-100 { /* Card hover -> icon container style */
    background-color: #ec4899 !important;
    transform: scale(1.1);
}
#services-preview .bg-gray-100:hover .feature-icon { /* Card hover -> icon style */
    color: white !important;
    transform: scale(1.15) rotate(10deg);
}
#services-preview .bg-gray-100 { /* Service cards */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#services-preview .bg-gray-100:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}


/* === FOOTER STYLES === */
.footer {
    background-color: #0E3A62;
    color: #d1d5db;
}
.footer a {
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
    text-decoration: none;
}
.footer a:hover {
    color: #f9a8d4; /* Tailwind pink-300 */
    text-decoration: underline;
    text-decoration-color: #f9a8d4;
    text-underline-offset: 4px;
}
.footer .flex.space-x-4 a svg { /* Social Icons */
    transition: transform 0.3s ease, color 0.3s ease;
}
.footer .flex.space-x-4 a:hover svg {
    transform: scale(1.2) translateY(-1px);
    color: #f9a8d4;
}

/* === ANIMATIONS & SECTION EFFECTS === */

/* Animated Gradient for Hero (#accueil on index.html) */
@keyframes animatedGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

#accueil {
  background-size: 300% 300% !important;
  animation: animatedGradient 25s ease infinite;
}
#accueil h1,
#accueil p {
    position: relative;
    z-index: 1;
}

/* "Pulse" Effect for Call-to-Action Section (#devis-cta on index.html) */
@keyframes pulseShadow {
  0% { box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.6); }
  70% { box-shadow: 0 0 0 30px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0px rgba(255, 255, 255, 0); }
}

#devis-cta {
  animation: pulseShadow 3s infinite cubic-bezier(0.65, 0, 0.35, 1);
  border-radius: 0.375rem; /* Tailwind rounded-md */
}

/* Cards in "Why Choose Us" (#why-choose-us on index.html) */
#why-choose-us .bg-blue-600 {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
#why-choose-us .bg-blue-600:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2), 0 6px 12px rgba(30, 58, 138, 0.25);
  background-color: #1a3675;
}
#why-choose-us .bg-blue-600:hover h3 {
    color: #fbcfe8; /* Tailwind pink-200 */
}
#why-choose-us .bg-blue-600:hover svg {
    color: #fef08a !important; /* Tailwind yellow-200 */
}


/* Scroll-Reveal Animations */
@keyframes fadeInUp { /* For .fade-in-up class elements */
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    opacity: 0; /* JS handles play state or class add */
}

@keyframes fadeInUpSection { /* For .reveal-on-scroll sections */
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal-on-scroll {
  opacity: 0;
  will-change: opacity, transform;
}
.section-in-view { /* Class added by JS */
  animation: fadeInUpSection 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  animation-delay: 0.1s;
}

/*
   Override for #why-choose-us to ensure it's visible if reveal-on-scroll is applied in HTML.
   This makes it appear by default, bypassing the initial opacity:0 for this specific section.
   The fadeInUpSection animation will still attempt to run if .section-in-view is added by JS,
   animating from opacity:1 and transform:translateY(60px) to opacity:1 and transform:translateY(0).
   If the animation is not desired at all for this section, remove the 'reveal-on-scroll'
   class from the #why-choose-us section in your index.html file.
*/
#why-choose-us.reveal-on-scroll {
    opacity: 1;
}


/* Portfolio image zoom on hover (index.html) */
#portfolio-preview .group img {
    transition: transform 0.35s ease-in-out, filter 0.35s ease-in-out;
}
#portfolio-preview .group:hover img {
    transform: scale(1.05); /* Tailwind's group-hover:scale-105 also applies */
    filter: brightness(1.03);
}
#portfolio-preview .group .bg-white { /* Text part of card */
    transition: background-color 0.3s ease;
}
#portfolio-preview .group:hover .bg-white {
    background-color: #f8fafc !important; /* Tailwind slate-50 */
}

/* Form input focus styles (on devis.html) */
#devis-form-page form input:focus,
#devis-form-page form select:focus,
#devis-form-page form textarea:focus {
    border-color: #c02c95; /* Darpub pink */
    box-shadow: 0 0 0 2.5px rgba(236, 72, 153, 0.25); /* Pink shadow */
    outline: none;
}

/* === BACK TO TOP BUTTON STYLING === */
#backToTopBtn {
    /* Tailwind classes in HTML handle base look (bg, text, rounded, shadow).
       JS handles opacity and pointer-events via 'show' class.
       This CSS ensures the transform and transition for the slide-in effect. */
    transform: translateY(100px); /* Start off-screen */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
    visibility: hidden; /* Start hidden, JS will make it visible */
}

#backToTopBtn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto; /* Make it clickable when shown */
}
#backToTopBtn:hover {
    background-color: #db2777 !important; /* Darker pink, ensure override if needed */
    transform: scale(1.1) translateY(0) !important; /* Slight scale on hover, maintain Y position */
}


/* Custom scrollbar (Optional) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #edf2f7; /* Tailwind gray-200 */
}
::-webkit-scrollbar-thumb {
    background: #a0aec0; /* Tailwind gray-400 */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #718096; /* Tailwind gray-500 */
}

/* === WHATSAPP FLOATING BUTTON === */

#whatsappBtn svg {
    display: inline-block; /* Ensures proper alignment if text were next to it */
    vertical-align: middle;
}