/* ============================================ */
/* PATTERN SVG DE CIRCUIT IMPRIMÉ */
/* ============================================ */
.circuit-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-attachment: fixed;
    /* Version Light (Gris très clair) */
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000000' stroke-width='1' opacity='0.03'%3E%3Cpath d='M20 20 L60 20 L60 60 L100 60 L100 20 L140 20'/%3E%3Cpath d='M20 80 L40 80 L40 100 L80 100 L80 120 L120 120 L120 100 L160 100'/%3E%3Cpath d='M180 40 L180 80 L160 80 L160 120 L140 120'/%3E%3Cpath d='M40 140 L80 140 L80 160 L120 160 L120 180 L160 180'/%3E%3Cpath d='M20 160 L20 180 L60 180'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 400px 400px;
    background-repeat: repeat;
}

/* Dark Mode */
.dark .circuit-bg {
    /* Version Dark (Blanc très léger) */
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.03'%3E%3Cpath d='M20 20 L60 20 L60 60 L100 60 L100 20 L140 20'/%3E%3Cpath d='M20 80 L40 80 L40 100 L80 100 L80 120 L120 120 L120 100 L160 100'/%3E%3Cpath d='M180 40 L180 80 L160 80 L160 120 L140 120'/%3E%3Cpath d='M40 140 L80 140 L80 160 L120 160 L120 180 L160 180'/%3E%3Cpath d='M20 160 L20 180 L60 180'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================ */
/* ANIMATIONS */
/* ============================================ */
@keyframes pulse-slow {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.animate-pulse-slow {
    animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}


/* ============================================ */
/* NAVBAR */
/* ============================================ */
.navbar {
    transition: all 0.3s ease;
    min-height: 80px; /* Hauteur minimale pour éviter les chevauchements */
}

@media (min-width: 768px) {
    .navbar {
        min-height: 100px; /* Hauteur minimale plus grande sur desktop */
    }
}

/* ============================================ */
/* SECTIONS */
/* ============================================ */
section {
    position: relative;
    z-index: 1;
}

/* Assurer que les sections ne chevauchent pas la navbar */
section:first-of-type {
    margin-top: 0;
    padding-top: 100px; /* Espace pour la navbar fixe */
}

@media (min-width: 768px) {
    section:first-of-type {
        padding-top: 120px; /* Plus d'espace sur desktop */
    }
}

/* ============================================ */
/* CARDS SERVICES */
/* ============================================ */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
}

.service-card svg {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.service-card:hover svg {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 4px 8px rgba(212, 175, 55, 0.3));
}

/* ============================================ */
/* IMAGE 3D PROJET */
/* ============================================ */
.project-image-3d {
    perspective: 1000px;
}

.project-image-3d img {
    transform: rotateY(-5deg) rotateX(2deg);
    transition: transform 0.5s ease;
}

.project-image-3d:hover img {
    transform: rotateY(0) rotateX(0) scale(1.02);
}

/* ============================================ */
/* INPUTS CONTACT */
/* ============================================ */
.contact-input::placeholder {
    color: #9ca3af;
    opacity: 0.7;
}

.contact-input:focus::placeholder {
    opacity: 0.5;
}

/* ============================================ */
/* SMOOTH SCROLL */
/* ============================================ */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Offset pour la navbar fixe (augmenté pour les éléments agrandis) */
}

/* ============================================ */
/* TRANSITIONS GLOBALES */
/* ============================================ */
body, .navbar, .service-card, input, textarea {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ============================================ */
/* ÉCRAN DE DÉVELOPPEMENT */
/* ============================================ */
.dev-screen {
    opacity: 1;
    pointer-events: auto;
}

.dev-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ============================================ */
/* RESPONSIVE */
/* ============================================ */
@media (max-width: 768px) {
    .project-image-3d img {
        transform: perspective(1000px) rotateY(0deg);
    }
    
    .project-image-3d:hover img {
        transform: perspective(1000px) rotateY(0deg) scale(1.02);
    }
}