@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

/* CUSTOM COLORS BASED ON LOGO + ACCENTS - MATCHING IMAGE STYLE */
:root {
    --kontixx-blue-vibrant: #0066FF;
    --kontixx-blue-dark: #003D7A;
    --kontixx-blue-navy: #1e3a5f;
    --kontixx-blue-deep: #1a237e;
    --kontixx-gray-metallic: #E5E5E5;
    --kontixx-gray-light: #F5F5F5;
    --kontixx-orange: #FF6B35;
    --kontixx-orange-yellow: #FFA500;
    --kontixx-orange-gradient-start: #FF8C42;
    --kontixx-orange-gradient-end: #FFD700;
    --kontixx-yellow: #FFD700;
    --kontixx-yellow-light: #FFF8DC;
    --kontixx-red: #FF3333;
    --kontixx-red-light: #FFE5E5;
    --kontixx-brown: #8B6F47;
    --kontixx-brown-dark: #6B5637;
    --kontixx-brown-light: #D4C4A8;
    --kontixx-hexagon-bg: #ffffff;
    --kontixx-bg-light: #fafafa;
}

/* Hexagonal pattern background - very subtle */
.hexagon-pattern {
    background-color: #ffffff;
    background-image: 
        linear-gradient(30deg, rgba(0, 0, 0, 0.008) 12%, transparent 12.5%, transparent 87%, rgba(0, 0, 0, 0.008) 87.5%, rgba(0, 0, 0, 0.008) 100%),
        linear-gradient(150deg, rgba(0, 0, 0, 0.008) 12%, transparent 12.5%, transparent 87%, rgba(0, 0, 0, 0.008) 87.5%, rgba(0, 0, 0, 0.008) 100%);
    background-size: 100px 173px;
    background-position: 0 0, 50px 86px;
}

/* SUBTLE HEXAGON PATTERN FOR SECTIONS */
.hexagon-pattern-subtle {
    background-color: #fafafa;
    background-image: 
        linear-gradient(30deg, rgba(0, 0, 0, 0.005) 12%, transparent 12.5%, transparent 87%, rgba(0, 0, 0, 0.005) 87.5%, rgba(0, 0, 0, 0.005) 100%),
        linear-gradient(150deg, rgba(0, 0, 0, 0.005) 12%, transparent 12.5%, transparent 87%, rgba(0, 0, 0, 0.005) 87.5%, rgba(0, 0, 0, 0.005) 100%);
    background-size: 80px 139px;
    background-position: 0 0, 40px 69px;
}

/* CUSTOM STYLES FOR KONTIXX */
body {
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.01em;
    background-color: #ffffff;
}

/* SMOOTH SCROLLING */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar with logo colors */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--kontixx-blue-vibrant);
    border-radius: 5px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--kontixx-blue-dark);
}

/* ANIMATIONS */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 102, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(0, 102, 255, 0.6);
    }
}

/* ANIMATION CLASSES */
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

.animate-slide-in-left {
    animation: slideInLeft 0.6s ease-out forwards;
}

.animate-slide-in-right {
    animation: slideInRight 0.6s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.5s ease-out forwards;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* STAGGER ANIMATIONS */
.animate-delay-100 {
    animation-delay: 0.1s;
    opacity: 0;
}

.animate-delay-200 {
    animation-delay: 0.2s;
    opacity: 0;
}

.animate-delay-300 {
    animation-delay: 0.3s;
    opacity: 0;
}

.animate-delay-400 {
    animation-delay: 0.4s;
    opacity: 0;
}

.animate-delay-500 {
    animation-delay: 0.5s;
    opacity: 0;
}

/* HOVER EFFECTS WITH LOGO COLORS */
.hover-kontixx-blue {
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-kontixx-blue:hover {
    color: var(--kontixx-blue-vibrant) !important;
}

.hover-kontixx-orange:hover {
    color: var(--kontixx-orange) !important;
}

.bg-kontixx-blue {
    background-color: var(--kontixx-blue-vibrant);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bg-kontixx-blue:hover {
    background-color: var(--kontixx-blue-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 102, 255, 0.3);
}

.text-kontixx-blue {
    color: var(--kontixx-blue-vibrant);
}

.text-kontixx-blue-dark {
    color: var(--kontixx-blue-dark);
}

.text-kontixx-brown {
    color: var(--kontixx-brown);
}

.text-kontixx-brown-dark {
    color: var(--kontixx-brown-dark);
}

.text-kontixx-orange {
    color: var(--kontixx-orange);
}

.text-kontixx-red {
    color: var(--kontixx-red);
}

.border-kontixx-blue {
    border-color: var(--kontixx-blue-vibrant);
}

.border-kontixx-brown {
    border-color: var(--kontixx-brown);
}

/* GRADIENT BACKGROUNDS */
.bg-gradient-kontixx {
    background: linear-gradient(135deg, var(--kontixx-blue-vibrant) 0%, var(--kontixx-blue-dark) 100%);
}

.bg-gradient-kontixx-light {
    background: linear-gradient(135deg, var(--kontixx-blue-vibrant) 0%, #0052CC 100%);
}

.bg-gradient-orange-yellow {
    background: linear-gradient(135deg, var(--kontixx-orange-gradient-start) 0%, var(--kontixx-orange-gradient-end) 100%);
    box-shadow: 0 4px 20px rgba(255, 140, 66, 0.4);
}

.bg-gradient-navy {
    background: linear-gradient(135deg, var(--kontixx-blue-navy) 0%, var(--kontixx-blue-dark) 100%);
}

.bg-gradient-warm {
    background: linear-gradient(135deg, var(--kontixx-orange) 0%, var(--kontixx-orange-yellow) 100%);
}

.bg-gradient-accent {
    background: linear-gradient(135deg, var(--kontixx-yellow) 0%, var(--kontixx-red) 100%);
}

.bg-gradient-brown {
    background: linear-gradient(135deg, var(--kontixx-brown) 0%, var(--kontixx-brown-dark) 100%);
}

.bg-gradient-blue-brown {
    background: linear-gradient(135deg, var(--kontixx-blue-dark) 0%, var(--kontixx-brown) 100%);
}

/* CARD STYLES WITH HOVER EFFECTS */
.card-hover {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.9);
}

.card-hover:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(139, 111, 71, 0.2);
    border-color: var(--kontixx-brown);
    background: rgba(255, 255, 255, 1);
}

/* GLASSMORPHISM EFFECT */
.glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* TEXT GRADIENT */
.text-gradient {
    background: linear-gradient(135deg, var(--kontixx-blue-vibrant) 0%, var(--kontixx-blue-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-warm {
    background: linear-gradient(135deg, var(--kontixx-yellow) 0%, var(--kontixx-red) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-brown {
    background: linear-gradient(135deg, var(--kontixx-brown) 0%, var(--kontixx-brown-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-blue-brown {
    background: linear-gradient(135deg, var(--kontixx-blue-dark) 0%, var(--kontixx-brown) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* BUTTON STYLES */
.btn-primary {
    background: linear-gradient(135deg, var(--kontixx-orange-gradient-start) 0%, var(--kontixx-orange-gradient-end) 100%);
    color: white;
    padding: 0.875rem 2rem;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 20px rgba(255, 140, 66, 0.4),
        0 0 0 0 rgba(255, 140, 66, 0.3),
        0 0 30px rgba(255, 215, 0, 0.3);
    position: relative;
    overflow: hidden;
    border: none;
    font-size: 1rem;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(0.8);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }
}

.btn-primary:hover {
    box-shadow: 
        0 8px 30px rgba(255, 140, 66, 0.6),
        0 0 0 4px rgba(255, 140, 66, 0.3),
        0 0 40px rgba(255, 215, 0, 0.4);
    transform: translateY(-2px);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--kontixx-blue-navy) 0%, var(--kontixx-blue-dark) 100%);
    color: white;
    padding: 0.875rem 2rem;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(30, 58, 95, 0.3);
    border: none;
    font-size: 1rem;
}

.btn-secondary:hover {
    box-shadow: 0 8px 25px rgba(30, 58, 95, 0.4);
    transform: translateY(-2px);
}

.btn-outline-red {
    background: transparent;
    color: var(--kontixx-red);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    border: 2px solid var(--kontixx-red);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-outline-red:hover {
    background: var(--kontixx-red);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 51, 51, 0.3);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 102, 255, 0.4);
}

/* SECTION STYLES */
.section-padding {
    padding: 5rem 0;
}

@media (min-width: 768px) {
    .section-padding {
        padding: 6rem 0;
    }
}

@media (min-width: 1024px) {
    .section-padding {
        padding: 8rem 0;
    }
}

/* TYPOGRAPHY IMPROVEMENTS */
.heading-1 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

@media (min-width: 768px) {
    .heading-1 {
        font-size: 4rem;
    }
}

@media (min-width: 1024px) {
    .heading-1 {
        font-size: 5rem;
    }
}

.heading-2 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {
    .heading-2 {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .heading-2 {
        font-size: 3rem;
    }
}

/* DECORATIVE ELEMENTS */
.decorative-line {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--kontixx-orange-gradient-start), var(--kontixx-orange-gradient-end));
    border-radius: 2px;
    margin: 1.5rem auto;
    box-shadow: 0 2px 8px rgba(255, 140, 66, 0.3);
}

/* Wavy decorative shapes */
.wavy-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.3;
    pointer-events: none;
}

.wavy-shape-orange {
    background: linear-gradient(135deg, var(--kontixx-orange-gradient-start), var(--kontixx-orange-gradient-end));
}

.wavy-shape-blue {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.3), rgba(30, 58, 95, 0.2));
}

/* SPARKLE EFFECT */
.sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* FOCUS STATES */
.focus-kontixx-blue:focus {
    outline: none;
    ring-color: var(--kontixx-blue-vibrant);
    border-color: var(--kontixx-blue-vibrant);
}

/* OVERRIDE TAILWIND BLUE COLORS WITH KONTIXX COLORS */
.text-blue-600 {
    color: var(--kontixx-blue-vibrant) !important;
}

.bg-blue-600 {
    background-color: var(--kontixx-blue-vibrant) !important;
}

.hover\:bg-blue-700:hover {
    background-color: var(--kontixx-blue-dark) !important;
}

.from-blue-600 {
    --tw-gradient-from: var(--kontixx-blue-vibrant) !important;
}

.to-blue-400 {
    --tw-gradient-to: #0052CC !important;
}

/* SCROLL REVEAL ANIMATION */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* SHINE EFFECT */
/* ANIMATION SHINE POUR LE BOUTON "DÉMARRER UN PROJET" UNIQUEMENT */
.shine {
    position: relative;
    overflow: visible !important;
}

.shine::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    background: linear-gradient(135deg, 
        var(--kontixx-orange-gradient-start) 0%, 
        var(--kontixx-orange-gradient-end) 25%,
        var(--kontixx-orange-gradient-start) 50%,
        var(--kontixx-orange-gradient-end) 75%,
        var(--kontixx-orange-gradient-start) 100%
    );
    background-size: 300% 300%;
    border-radius: 0.875rem;
    z-index: -1;
    opacity: 0.7;
    filter: blur(10px);
    animation: glow-rotate 3s linear infinite, pulse-glow 2.5s ease-in-out infinite;
    pointer-events: none;
    will-change: transform, opacity, background-position;
}

@keyframes glow-rotate {
    0% {
        background-position: 0% 50%;
        transform: rotate(0deg) scale(1);
    }
    25% {
        background-position: 100% 0%;
    }
    50% {
        background-position: 100% 100%;
        transform: rotate(180deg) scale(1.02);
    }
    75% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 50%;
        transform: rotate(360deg) scale(1);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.9;
    }
}

.shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.6) 50%, 
        transparent 100%
    );
    transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0.75rem;
    z-index: 2;
    pointer-events: none;
}

.shine:hover::after {
    left: 100%;
}

.shine:hover::before {
    opacity: 1;
    filter: blur(14px);
}

/* S'ASSURER QUE LE BOUTON AVEC SHINE A OVERFLOW VISIBLE */
.btn-cta-orange.shine {
    overflow: visible !important;
}

.btn-cta-orange.shine > * {
    position: relative;
    z-index: 10;
}

/* PREMIUM GLASSMORPHISM EFFECTS */
.glass-premium {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.glass-dark {
    background: rgba(0, 61, 122, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Premium Card Styles */
.card-premium {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        var(--kontixx-orange-gradient-start),
        var(--kontixx-orange-gradient-end),
        var(--kontixx-blue-vibrant),
        var(--kontixx-orange-gradient-start)
    );
    background-size: 200% 100%;
    animation: gradient-shift 3s ease infinite;
    opacity: 0;
    transition: opacity 0.3s;
}

.card-premium:hover::before {
    opacity: 1;
}

.card-premium:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 
        0 20px 60px rgba(0, 102, 255, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    border-color: rgba(0, 102, 255, 0.2);
}

@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* PREMIUM INPUT STYLES */
.input-premium {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.input-premium:focus {
    background: rgba(255, 255, 255, 1);
    border-color: var(--kontixx-blue-vibrant);
    box-shadow: 
        0 4px 16px rgba(0, 102, 255, 0.15),
        0 0 0 4px rgba(0, 102, 255, 0.1),
        inset 0 1px 2px rgba(0, 0, 0, 0.02);
    outline: none;
    transform: translateY(-1px);
}

/* PREMIUM BUTTON STYLES */
/* BOUTON PREMIUM - STYLE BLEU FONCÉ (COMME BTN-SECONDARY) */
.btn-premium {
    background: linear-gradient(135deg, var(--kontixx-blue-navy) 0%, var(--kontixx-blue-dark) 100%);
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(30, 58, 95, 0.3);
    position: relative;
    overflow: hidden;
    border: none;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.btn-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent
    );
    transition: left 0.6s;
}

.btn-premium:hover {
    box-shadow: 0 8px 25px rgba(30, 58, 95, 0.4);
    transform: translateY(-3px);
}

.btn-premium:hover::before {
    left: 100%;
}

.btn-premium:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(30, 58, 95, 0.3);
}

/* BOUTON ORANGE-JAUNE POUR LES CTA SPÉCIAUX */
.btn-cta-orange {
    background: linear-gradient(135deg, 
        var(--kontixx-orange-gradient-start) 0%, 
        var(--kontixx-orange-gradient-end) 50%,
        var(--kontixx-orange-gradient-start) 100%
    );
    background-size: 200% 100%;
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 8px 24px rgba(255, 140, 66, 0.4),
        0 4px 12px rgba(255, 140, 66, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    border: none;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

/* BOUTON BLEU FONCÉ POUR "DEMANDER UN DEVIS" */
.btn-cta-blue {
    background: #214C8F;
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 15px rgba(33, 76, 143, 0.3),
        0 2px 8px rgba(33, 76, 143, 0.2);
    position: relative;
    overflow: hidden;
    border: none;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.btn-cta-blue::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent
    );
    transition: left 0.6s;
}

.btn-cta-blue:hover {
    background: #1a3d73;
    box-shadow: 
        0 8px 25px rgba(33, 76, 143, 0.4),
        0 4px 12px rgba(33, 76, 143, 0.3);
    transform: translateY(-2px);
}

.btn-cta-blue:hover::before {
    left: 100%;
}

.btn-cta-blue:active {
    transform: translateY(0);
    box-shadow: 
        0 2px 8px rgba(33, 76, 143, 0.3),
        0 1px 4px rgba(33, 76, 143, 0.2);
}

/* BOUTON ORANGE-JAUNE DÉGRADÉ POUR "DEMANDER UN DEVIS" DANS SECTION FORFAITS */
.btn-cta-orange-yellow {
    background: linear-gradient(90deg, #FF9933 0%, #FFDD00 100%);
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 15px rgba(255, 153, 51, 0.3),
        0 2px 8px rgba(255, 153, 51, 0.2);
    position: relative;
    overflow: hidden;
    border: none;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.btn-cta-orange-yellow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent
    );
    transition: left 0.6s;
}

.btn-cta-orange-yellow:hover {
    background: linear-gradient(90deg, #FF8C1A 0%, #FFD700 100%);
    box-shadow: 
        0 8px 25px rgba(255, 153, 51, 0.4),
        0 4px 12px rgba(255, 153, 51, 0.3);
    transform: translateY(-2px);
}

.btn-cta-orange-yellow:hover::before {
    left: 100%;
}

.btn-cta-orange-yellow:active {
    transform: translateY(0);
    box-shadow: 
        0 2px 8px rgba(255, 153, 51, 0.3),
        0 1px 4px rgba(255, 153, 51, 0.2);
}

/* BOUTON BLEU DÉGRADÉ POUR "DEMANDER UN DEVIS" - STYLE COMME L'IMAGE */
.btn-cta-blue-gradient {
    background: linear-gradient(90deg, #4B6787 0%, #183D6D 100%);
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 999px;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 15px rgba(24, 61, 109, 0.3),
        0 2px 8px rgba(24, 61, 109, 0.2);
    position: relative;
    overflow: hidden;
    border: none;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.btn-cta-blue-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent
    );
    transition: left 0.6s;
}

.btn-cta-blue-gradient:hover {
    background: linear-gradient(90deg, #3D5670 0%, #122A4F 100%);
    box-shadow: 
        0 8px 25px rgba(24, 61, 109, 0.4),
        0 4px 12px rgba(24, 61, 109, 0.3);
    transform: translateY(-2px);
}

.btn-cta-blue-gradient:hover::before {
    left: 100%;
}

.btn-cta-blue-gradient:active {
    transform: translateY(0);
    box-shadow: 
        0 2px 8px rgba(24, 61, 109, 0.3),
        0 1px 4px rgba(24, 61, 109, 0.2);
}

/* SI LE BOUTON A LA CLASSE SHINE, PERMETTRE L'OVERFLOW VISIBLE POUR L'ANIMATION */
.btn-cta-orange.shine {
    overflow: visible;
}

.btn-cta-orange::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent
    );
    transition: left 0.6s;
}

.btn-cta-orange:hover {
    background-position: 100% 0;
    box-shadow: 
        0 12px 32px rgba(255, 140, 66, 0.5),
        0 6px 16px rgba(255, 140, 66, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
}

.btn-cta-orange:hover::before {
    left: 100%;
}

.btn-cta-orange:active {
    transform: translateY(-1px);
    box-shadow: 
        0 4px 16px rgba(255, 140, 66, 0.4),
        0 2px 8px rgba(255, 140, 66, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* PREMIUM GRADIENT BACKGROUNDS */
.bg-gradient-premium {
    background: linear-gradient(135deg, 
        rgba(0, 102, 255, 0.05) 0%,
        rgba(255, 140, 66, 0.05) 50%,
        rgba(0, 102, 255, 0.05) 100%
    );
    background-size: 200% 200%;
    animation: gradient-flow 8s ease infinite;
}

@keyframes gradient-flow {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* PREMIUM SHADOW EFFECTS */
.shadow-premium {
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04);
}

.shadow-premium-hover:hover {
    box-shadow: 
        0 30px 80px rgba(0, 102, 255, 0.2),
        0 12px 32px rgba(0, 102, 255, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1);
}

/* PREMIUM TEXT EFFECTS */
.text-premium-gradient {
    background: linear-gradient(135deg, 
        var(--kontixx-blue-vibrant) 0%,
        var(--kontixx-orange-gradient-start) 50%,
        var(--kontixx-blue-dark) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-text 4s ease infinite;
}

@keyframes gradient-text {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* PREMIUM HOVER EFFECTS */
.hover-lift {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.15),
        0 8px 16px rgba(0, 0, 0, 0.1);
}

/* PREMIUM BORDER EFFECTS */
.border-premium {
    position: relative;
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, 
                    var(--kontixx-blue-vibrant),
                    var(--kontixx-orange-gradient-start),
                    var(--kontixx-blue-vibrant)
                ) border-box;
    background-size: 200% 200%;
    animation: border-gradient 3s ease infinite;
}

@keyframes border-gradient {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* PREMIUM ANIMATION CLASSES */
.animate-fade-in-up-premium {
    animation: fadeInUpPremium 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeInUpPremium {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-scale-in-premium {
    animation: scaleInPremium 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes scaleInPremium {
    from {
        opacity: 0;
        transform: scale(0.8) rotate(-5deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* PREMIUM GLOW EFFECTS */
.glow-blue {
    box-shadow: 
        0 0 20px rgba(0, 102, 255, 0.3),
        0 0 40px rgba(0, 102, 255, 0.2),
        0 0 60px rgba(0, 102, 255, 0.1);
}

.glow-orange {
    box-shadow: 
        0 0 20px rgba(255, 140, 66, 0.4),
        0 0 40px rgba(255, 140, 66, 0.3),
        0 0 60px rgba(255, 140, 66, 0.2);
}

/* PREMIUM SECTION BACKGROUNDS */
.section-premium {
    position: relative;
    overflow: hidden;
}

.section-premium::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(0, 102, 255, 0.03) 0%,
        transparent 70%
    );
    animation: rotate-bg 20s linear infinite;
}

/* NOTIFICATION SUCCESS ANIMATION */
@keyframes slideDownBounce {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    60% {
        transform: translateY(5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes checkmarkDraw {
    0% {
        stroke-dashoffset: 100;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.notification-success {
    animation: slideDownBounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.notification-success svg path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: checkmarkDraw 0.6s ease-out 0.3s forwards;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes progress {
    0% {
        width: 100%;
    }
    100% {
        width: 0%;
    }
}

@keyframes rotate-bg {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* PREMIUM IMAGE OVERLAY */
.image-overlay-premium {
    position: relative;
    overflow: hidden;
}

.image-overlay-premium::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 102, 255, 0.1) 0%,
        rgba(255, 140, 66, 0.1) 100%
    );
    opacity: 0;
    transition: opacity 0.4s;
}

.image-overlay-premium:hover::after {
    opacity: 1;
}

/* PREMIUM BADGE STYLES */
.badge-premium {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, 
        rgba(0, 102, 255, 0.1) 0%,
        rgba(255, 140, 66, 0.1) 100%
    );
    border: 1px solid rgba(0, 102, 255, 0.2);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kontixx-blue-vibrant);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s;
}

.badge-premium:hover {
    background: linear-gradient(135deg, 
        rgba(0, 102, 255, 0.15) 0%,
        rgba(255, 140, 66, 0.15) 100%
    );
    border-color: rgba(0, 102, 255, 0.3);
    transform: scale(1.05);
}

/* PREMIUM DIVIDER */
.divider-premium {
    height: 1px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(0, 102, 255, 0.3),
        rgba(255, 140, 66, 0.3),
        rgba(0, 102, 255, 0.3),
        transparent
    );
    margin: 2rem 0;
}

/* Smooth Transitions */
* {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Premium Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, 
        var(--kontixx-blue-vibrant),
        var(--kontixx-orange-gradient-start)
    );
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, 
        var(--kontixx-blue-dark),
        var(--kontixx-orange-gradient-end)
    );
    background-clip: padding-box;
}

/* ========== MODE NUIT — PALETTE ÉLÉGANTE & PROFESSIONNELLE ========== */
/* Fond principal : bleu nuit profond, légèrement chaud */
.dark body,
.dark .hexagon-pattern {
    background-color: #0c1222 !important;
    color: #d1dae6;
}

.dark .hexagon-pattern {
    background-color: #0c1222 !important;
    background-image: 
        linear-gradient(135deg, rgba(0, 102, 255, 0.03) 0%, transparent 50%),
        linear-gradient(30deg, rgba(255, 255, 255, 0.015) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.015) 87.5%, rgba(255, 255, 255, 0.015) 100%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.015) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.015) 87.5%, rgba(255, 255, 255, 0.015) 100%);
}

/* Barre de navigation : verre sombre avec reflet discret */
.dark .glass-premium {
    background: rgba(12, 18, 34, 0.88) !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

.dark nav a:not(.btn-cta-orange) {
    color: #b8c5d6 !important;
}

.dark nav a:not(.btn-cta-orange):hover {
    color: #60a5fa !important;
}

.dark #theme-toggle,
.dark .dark-mode-toggle {
    color: #b8c5d6 !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

.dark #theme-toggle:hover,
.dark .dark-mode-toggle:hover {
    color: #60a5fa !important;
    background: rgba(96, 165, 250, 0.12) !important;
}

.dark #mobile-menu a,
.dark #mobile-menu .dark-nav-link {
    color: #b8c5d6 !important;
}

.dark #mobile-menu a:hover,
.dark #mobile-menu .dark-nav-link:hover {
    color: #60a5fa !important;
}

.dark #theme-toggle-mobile {
    color: #b8c5d6 !important;
}

/* Contenu principal : surface légèrement plus claire pour la hiérarchie */
.dark main {
    background-color: #0c1222 !important;
    color: #d1dae6;
}

.dark main .bg-white,
.dark main section.bg-white {
    background-color: #131d32 !important;
}

/* Titres : blanc doux, très lisible */
.dark main .text-gray-900,
.dark main .text-gray-800,
.dark main h1, .dark main h2, .dark main h3, .dark main h4 {
    color: #f0f4f8 !important;
}

/* Corps de texte : gris bleuté élégant */
.dark main .text-gray-600,
.dark main .text-gray-700 {
    color: #b8c5d6 !important;
}

.dark main .text-gray-500 {
    color: #8b9cb4 !important;
}

/* Cartes : surface surélevée avec bordure et ombre douce */
.dark main .card-hover,
.dark main .card-premium {
    background: linear-gradient(145deg, rgba(26, 34, 52, 0.95) 0%, rgba(19, 29, 50, 0.98) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.dark main .card-hover:hover,
.dark main .card-premium:hover {
    background: linear-gradient(145deg, rgba(30, 42, 62, 0.98) 0%, rgba(22, 32, 52, 0.98) 100%) !important;
    border-color: rgba(96, 165, 250, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(96, 165, 250, 0.08), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

.dark main .hexagon-pattern-subtle {
    background-color: #131d32 !important;
    background-image: 
        linear-gradient(135deg, rgba(0, 102, 255, 0.04) 0%, transparent 50%),
        linear-gradient(30deg, rgba(255, 255, 255, 0.02) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.02) 87.5%, rgba(255, 255, 255, 0.02) 100%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.02) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.02) 87.5%, rgba(255, 255, 255, 0.02) 100%);
}

.dark main .bg-gray-50,
.dark main .bg-gray-100 {
    background-color: #131d32 !important;
}

/* Cartes Délais : bleu nuit raffiné */
.dark main .bg-blue-50 {
    background: linear-gradient(145deg, rgba(15, 35, 65, 0.9) 0%, rgba(10, 28, 52, 0.95) 100%) !important;
    border: 1px solid rgba(96, 165, 250, 0.12) !important;
}

/* Cartes Garanties : vert profond élégant */
.dark main .bg-green-50 {
    background: linear-gradient(145deg, rgba(6, 45, 30, 0.9) 0%, rgba(8, 35, 28, 0.95) 100%) !important;
    border: 1px solid rgba(52, 211, 153, 0.12) !important;
}

/* Blocs "Pourquoi ce prix ?" : dégradé bleu/orange discret */
.dark main [class*="from-kontixx-blue"][class*="to-kontixx-orange"] {
    background: linear-gradient(105deg, rgba(0, 102, 255, 0.12) 0%, rgba(255, 107, 53, 0.08) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Bordures : très subtiles pour un rendu pro */
.dark main .border.border-gray-200,
.dark main .border-gray-200,
.dark main .border-gray-100 {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Champs de formulaire */
.dark main .input-premium {
    background: rgba(19, 29, 50, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

.dark main .input-premium:focus {
    border-color: rgba(96, 165, 250, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
}

.dark main label {
    color: #d1dae6 !important;
}

/* Sous-titre CTA page d'accueil */
.dark .cta-subtitle {
    color: #b8c5d6 !important;
}

/* Section CTA finale page d'accueil : fond sombre en mode nuit pour texte lisible */
.dark .cta-final-section {
    background: linear-gradient(135deg, #131d32 0%, #0c1222 50%, #0f172a 100%) !important;
}

.dark .cta-final-section h2,
.dark .cta-final-section h2 span {
    color: #f0f4f8 !important;
}

.dark .cta-final-section h2 span.bg-clip-text {
    background: linear-gradient(to right, #f0f4f8 0%, #e2e8f0 50%, #f0f4f8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.dark .cta-final-section .cta-subtitle {
    color: #b8c5d6 !important;
}

/* CTA en bloc div (CGV, Mentions légales) : texte visible en mode nuit */
.dark .cta-final-section.rounded-2xl {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.dark .cta-final-section .cta-final-text,
.dark .cta-final-section p.cta-final-text {
    color: #b8c5d6 !important;
}

/* Footer : harmonisation avec le thème nuit */
.dark footer {
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* Sections hero (bg-gradient-premium) : dégradé nuit élégant */
.dark .bg-gradient-premium,
.dark .section-premium.bg-gradient-premium {
    background: linear-gradient(160deg, #0c1222 0%, #0f172a 40%, #0c1222 100%) !important;
}

/* Titres avec dégradé de texte (ex. "Prêt à donner vie à votre projet ?") */
.dark main span.bg-clip-text.text-transparent,
.dark main .from-gray-900.bg-clip-text {
    background: linear-gradient(to right, #f0f4f8 0%, #e2e8f0 50%, #f0f4f8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Cartes avec dégradé clair (home, etc.) en mode nuit */
.dark main .from-blue-50,
.dark main .from-amber-50\/50 {
    background: linear-gradient(145deg, rgba(19, 29, 50, 0.98) 0%, rgba(26, 34, 52, 0.95) 100%) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}