/* ==========================================================================
   CONFIGURATIONS GÉNÉRALES & POLICE
   ========================================================================== */
:root {
    --bleu-ciel: #87CEEB;
    --bleu-marine: #1e3c72;
    --blanc: #ffffff;
    --ombre: rgba(0, 0, 0, 0.15);
}

body {
    font-family: 'Times New Roman', Times, serif; /* Police demandée */
    background-color: #f9fbfd;
    color: var(--bleu-marine);
    margin: 0;
    overflow-x: hidden;
}

/* ==========================================================================
   ENTÊTE (HEADER)
   ========================================================================== */
nav {
    background: var(--blanc);
    padding: 20px 0;
    box-shadow: 5px 5px 0px var(--bleu-ciel); /* Ombre diagonale */
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container a {
    color: var(--bleu-marine);
    text-decoration: none;
    font-weight: bold;
    margin: 0 15px;
}

/* ==========================================================================
   SECTION HERO DYNAMIQUE
   ========================================================================== */
.hero {
    height: 80vh;
    background: linear-gradient(135deg, var(--bleu-marine), var(--bleu-ciel));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--blanc);
    position: relative;
    overflow: hidden;
}

/* Les bulles inspirées du PDF avec ombre diagonale */
.bubble {
    position: absolute;
    background: var(--blanc);
    border-radius: 50%;
    opacity: 0.6;
    box-shadow: 10px 10px 0px var(--ombre); /* Ombre décalée bas-droite */
    z-index: 1;
    animation: float 6s infinite ease-in-out;
}

.hero-content {
    position: relative;
    z-index: 10;
}

.hero h1 {
    font-size: 3.5rem;
    text-shadow: 3px 3px 0px var(--bleu-marine);
}

<style>
/* Animation légère pour donner vie à la 3D */
.hero-3d img {
    transition: transform 0.5s ease;
}
.hero-3d:hover img {
    transform: scale(1.05);
}
/* Adaptation mobile */
@media (max-width: 768px) {
    .container { flex-direction: column; text-align: center; }
    div[style*="text-align: left"] { text-align: center !important; }
    div[style*="width: 450px"] { width: 300px !important; height: 300px !important; }
}
</style>

/* ==========================================================================
   DESIGN CHATBOT & COOKIES
   ========================================================================== */
/* Fenêtre Chat */
#chat-window {
    border: 2px solid var(--bleu-ciel);
    border-radius: 15px;
    box-shadow: 8px 8px 0px var(--bleu-marine); /* Effet décalage */
}

/* Bulle flottante Chat */
.chat-trigger {
    background: var(--bleu-ciel);
    box-shadow: 4px 4px 0px var(--bleu-marine);
    transition: transform 0.3s;
}

/* Bandeau Cookies */
.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: var(--blanc);
    padding: 20px;
    border: 2px solid var(--bleu-ciel);
    box-shadow: 10px 10px 0px var(--bleu-marine);
    z-index: 3000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}


/* ==========================================================================
   DEVIS
   ========================================================================== */
/* Amélioration de la réactivité du formulaire */
@media (max-width: 768px) {
    #devis .container {
        flex-direction: column;
        margin: 20px;
    }
    #devis div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* Animation au survol des champs */
#devis input:focus, #devis textarea:focus {
    box-shadow: 0 0 10px rgba(135, 206, 235, 0.3);
}

/* ==========================================================================
   SECTION CONTACT (STYLE CONTACT.JPG)
   ========================================================================== */
   #contact {
       background: var(--bleu-marine) !important; /* Utilise votre bleu marine */
       color: var(--blanc);
   }

   .contact-form-styled input,
   .contact-form-styled textarea {
       width: 100%;
       padding: 15px;
       background: #f4f4f4; /* Fond gris clair pour le contraste des champs */
       border: none;
       font-family: 'Times New Roman', serif;
       font-size: 1rem;
       outline: none;
       border-radius: 4px;
   }

   .contact-form-styled input:focus,
   .contact-form-styled textarea:focus {
       background: #ffffff;
       box-shadow: inset 0 0 5px rgba(0,0,0,0.1), 0 0 8px var(--bleu-ciel);
   }

   .btn-contact-3d {
       background: var(--bleu-ciel); /* Couleur ciel par défaut pour visibilité */
       color: var(--bleu-marine);
       border: 2px solid var(--bleu-ciel);
       padding: 15px 40px;
       font-weight: bold;
       cursor: pointer;
       width: fit-content;
       transition: 0.3s;
       letter-spacing: 1px;
       box-shadow: 6px 6px 0px var(--blanc); /* Ombre décalée blanche pour l'effet 3D */
   }

   .btn-contact-3d:hover {
       background: var(--blanc);
       color: var(--bleu-marine);
       border-color: var(--blanc);
       transform: translate(-3px, -3px);
       box-shadow: 9px 9px 0px var(--bleu-ciel);
   }

   /* Adaptation Mobile pour le décalage de la bande bleue */
   @media (max-width: 768px) {
       div[style*="border-left: 60px solid"] {
           border-left: 15px solid var(--bleu-ciel) !important;
           padding: 30px 20px !important;
       }

       .btn-contact-3d {
           width: 100%; /* Bouton pleine largeur sur mobile */
       }
   }