/* ========================================================================= 
   FEUILLE DE STYLE PRINCIPALE - ESSENCE VÉGÉTALE (ÉDITION PREMIUM)
   ========================================================================= */

/* --- 1. COULEURS, RESET ET SCROLLBAR SUR MESURE --- */
:root {
    --marron-terre: #4a4238;   
    --vert-nature: #738456;    
    --beige-sable: #F0EAD6;    /* Remplace le rose pastel pour un côté plus organique */
    --vert-fonce: #5A6B42;     /* Remplace le rose foncé pour les animations au survol */     
    --fond-page: #ffffff;
    --fond-alternatif: #f9fbf6; 
    --facebook: #1877F2;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    /* Utilisation de la Google Font moderne et très lisible */
    font-family: 'Montserrat', Tahoma, Geneva, Verdana, sans-serif; 
    scroll-behavior: smooth; 
}

body { 
    color: var(--marron-terre); 
    background-color: var(--fond-page); 
    line-height: 1.8; /* Augmentation de l'interligne pour faire respirer le texte */ 
    overflow-x: hidden; 
}

/* Typographie Premium pour tous les titres */
h1, h2, h3, .titre-entreprise h1 {
    font-family: 'Playfair Display', serif;
}


/* La Scrollbar Esthète */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--fond-alternatif); }
::-webkit-scrollbar-thumb { background: var(--vert-nature); border-radius: 10px; border: 2px solid var(--fond-alternatif); }
::-webkit-scrollbar-thumb:hover { background: var(--marron-terre); }


/* --- 2. BOUTONS FLOTTANTS ET ANIMATIONS --- */
.bouton-facebook { position: fixed; bottom: 30px; right: 30px; background-color: var(--facebook); color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 15px rgba(24, 119, 242, 0.4); z-index: 1000; transition: transform 0.3s; }
.bouton-facebook:hover { transform: scale(1.1); }

#btn-remonter { position: fixed; bottom: 105px; right: 35px; background-color: var(--vert-nature); color: white; width: 50px; height: 50px; border-radius: 50%; border: none; font-size: 24px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 999; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
#btn-remonter.visible { opacity: 1; visibility: visible; }
#btn-remonter:hover { background-color: var(--vert-fonce); transform: translateY(-5px); }

.apparition { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
.apparition.visible { opacity: 1; transform: translateY(0); }


/* --- 3. TOP-BAR & NAVIGATION (VERRE DÉPOLI) --- */
.top-bar { background-color: var(--vert-nature); color: white; padding: 8px 40px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; flex-wrap: wrap; gap: 10px; }
.top-bar a { color: white; text-decoration: none; font-weight: 600; transition: opacity 0.3s; }
.top-bar a:hover { opacity: 0.8; }
.top-bar-contact { display: flex; gap: 15px; align-items: center; }
.separateur { opacity: 0.5; }

/* L'effet Glassmorphism magique est ici */
.bandeau { 
    display: flex; justify-content: space-between; align-items: center; padding: 15px 40px; 
    position: sticky; top: 0; z-index: 1000; 
    background-color: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.logo-nom { display: flex; align-items: center; gap: 15px; }
.logo-bandeau { height: 60px; width: auto; }
.titre-entreprise h1 { font-size: 26px; margin-bottom: -5px; color: var(--marron-terre); }
.sous-titre-bandeau { font-size: 14px; color: var(--vert-nature); font-style: italic; } 
.menu-haut { display: flex; gap: 25px; align-items: center; }
.menu-haut a { text-decoration: none; color: var(--marron-terre); font-weight: 500; transition: color 0.3s; }
.menu-haut a:hover { color: var(--vert-nature); }
.btn-devis { background-color: var(--vert-nature); color: white !important; padding: 8px 20px; border-radius: 20px; box-shadow: 0 4px 10px rgba(115, 132, 86, 0.3); }
.btn-devis:hover { background-color: var(--vert-fonce) !important; box-shadow: 0 4px 10px rgba(90, 107, 66, 0.4); }
.burger { display: none; font-size: 30px; cursor: pointer; color: var(--marron-terre); }


/* --- 4. HERO & VAGUE DÉCORATIVE --- */
.hero { position: relative; height: 80vh; display: flex; justify-content: center; align-items: center; text-align: center; color: white; padding: 20px; overflow: hidden; background-color: var(--marron-terre); }
.video-arriere-plan { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.calque-sombre { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(74, 66, 56, 0.15) 0%, rgba(74, 66, 56, 0.65) 100%); z-index: 2; }
.hero-contenu { position: relative; z-index: 3; }
.hero-contenu h2 { font-size: 52px; margin-bottom: 15px; font-weight: 700; }
.hero-contenu p { font-size: 22px; margin-bottom: 30px; font-weight: 400; }
.btn-secondaire { display: inline-block; border: 2px solid white; color: white; padding: 12px 30px; text-decoration: none; font-size: 18px; font-weight: 600; border-radius: 30px; transition: 0.3s; }
.btn-secondaire:hover { background-color: white; color: var(--marron-terre); }

/* La vague SVG en bas de la vidéo */
.vague-separatrice { position: absolute; bottom: -1px; left: 0; width: 100%; overflow: hidden; line-height: 0; z-index: 4; }
.vague-separatrice svg { position: relative; display: block; width: calc(100% + 1.3px); height: 70px; }
@media screen and (min-width: 768px) { .vague-separatrice svg { height: 120px; } }

/* Le bandeau défilant repensé aux couleurs naturelles */
.bandeau-defilant { background-color: var(--beige-sable); color: var(--marron-terre); padding: 15px 0; overflow: hidden; white-space: nowrap; display: flex; align-items: center; font-size: 18px; font-weight: 600; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.bandeau-texte { display: inline-block; animation: defilement 25s linear infinite; }
.separateur-defilant { margin: 0 40px; color: var(--vert-nature); font-weight: normal; }
@keyframes defilement { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }


/* --- 5. SECTIONS GÉNÉRALES & GALERIE --- */
/* --- 5. SECTIONS GÉNÉRALES & GALERIE --- */
.section { padding: 60px 20px; } /* Espacement réduit pour plus de dynamisme */
.fond-alternatif { background-color: var(--fond-alternatif); }
.titre-section { text-align: center; font-size: 38px; margin-bottom: 15px; }
.titre-section::after { content: ''; display: block; width: 60px; height: 3px; background-color: var(--vert-nature); margin: 15px auto 40px; }
.sous-titre-section { text-align: center; margin-top: -20px; margin-bottom: 40px; font-size: 18px; color: #666; }
.grille { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; }

/* Amélioration du White Space dans les cartes */
/* Amélioration des cartes et habillage des icônes */
.carte { background: white; padding: 35px 25px; border-radius: 10px; box-shadow: 0 8px 25px rgba(0,0,0,0.06); flex: 1; min-width: 300px; text-align: center; border-bottom: 4px solid var(--vert-nature); }
.carte h3 { color: var(--vert-nature); margin-bottom: 15px; font-size: 22px; font-weight: 600; }
.carte p { font-size: 15px; }

/* Le fameux "Macaron" de couleur derrière l'icône */
.carte svg {
    background-color: var(--beige-sable);
    padding: 12px;
    border-radius: 50%;
    width: 65px;
    height: 65px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}
.carte:hover svg { transform: scale(1.1); background-color: var(--vert-nature); stroke: white; }
.carte h3 { color: var(--vert-nature); margin-bottom: 20px; font-size: 24px; font-weight: 600; }
.image-projet { flex: 1; min-width: 300px; height: 280px; border-radius: 10px; overflow: hidden; }
.image-projet img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease;}
.image-projet:hover img { transform: scale(1.05); }

.filtres-galerie { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 40px; }
.btn-filtre { background-color: white; border: 2px solid var(--vert-nature); color: var(--vert-nature); padding: 8px 20px; border-radius: 20px; cursor: pointer; font-weight: 600; font-size: 14px; transition: all 0.3s; }
.btn-filtre:hover, .btn-filtre.actif { background-color: var(--vert-nature); color: white; }
.item-galerie { transition: transform 0.4s ease, opacity 0.4s ease; } 


/* --- 6. MODULE AVANT/APRÈS --- */
.conteneur-avant-apres { position: relative; max-width: 900px; margin: 0 auto; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); line-height: 0; }
.img-arriere { width: 100%; height: auto; display: block; }
.img-avant-apres-dessus { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: inset(0 50% 0 0); }
.img-avant-apres-dessus img { width: 100%; height: 100%; object-fit: cover; display: block; }
.curseur-glissant { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 10; }
.ligne-curseur { position: absolute; top: 0; left: 50%; width: 3px; height: 100%; background: white; transform: translateX(-50%); pointer-events: none; z-index: 5; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
/* --- LE CURSEUR AVANT/APRÈS INTERACTIF --- */
.bouton-curseur { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
    width: 50px; height: 50px; 
    background: white; color: var(--vert-nature); font-weight: bold; font-size: 24px; 
    border-radius: 50%; display: flex; align-items: center; justify-content: center; 
    border: 2px solid var(--vert-nature);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
    animation: pulse-curseur 2s infinite; /* L'animation magique */
}

/* L'effet d'onde lumineuse autour du bouton */
@keyframes pulse-curseur {
    0% { box-shadow: 0 0 0 0 rgba(115, 132, 86, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(115, 132, 86, 0); }
    100% { box-shadow: 0 0 0 0 rgba(115, 132, 86, 0); }
}
/* --- LE BLOC FAQ INVERSÉ (Plein de couleur) --- */
#faq {
    background-color: var(--vert-fonce);
    color: white;
}
#faq .titre-section { color: white; }
#faq .titre-section::after { background-color: var(--beige-sable); }
#faq .question-faq { 
    background-color: rgba(255, 255, 255, 0.05); /* Fond légèrement transparent */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: none; 
}
#faq .question-faq summary { color: white; }
#faq .question-faq summary::after { color: var(--beige-sable); }
#faq .question-faq p { color: #f0f0f0; border-top: 1px solid rgba(255, 255, 255, 0.2); }

/* --- 7. F.A.Q & CONTACT --- */
.conteneur-faq { max-width: 800px; margin: 0 auto; }
.question-faq { background: white; margin-bottom: 15px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); padding: 20px 25px; cursor: pointer; transition: 0.3s; }
.question-faq summary { font-size: 18px; font-weight: 600; color: var(--marron-terre); outline: none; list-style: none; position: relative; padding-right: 20px; }
.question-faq summary::-webkit-details-marker { display: none; }
.question-faq summary::after { content: '+'; position: absolute; right: 0; top: 0; color: var(--vert-nature); font-size: 22px; font-weight: normal; }
.question-faq[open] summary::after { content: '−'; }
.question-faq p { margin-top: 15px; color: #555; padding-top: 15px; border-top: 1px solid #eee; }
.texte-centre { max-width: 800px; margin: 0 auto; text-align: center; }

.conteneur-contact { display: flex; justify-content: center; gap: 50px; max-width: 1100px; margin: 0 auto; flex-wrap: wrap; }
.coordonnees { flex: 1; min-width: 300px; background: white; padding: 50px 40px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.04); }
.coordonnees h3, .formulaire-contact h3 { margin-bottom: 30px; color: var(--marron-terre); font-size: 28px; }
.coordonnees p { margin-bottom: 20px; font-size: 16px; }
.formulaire-contact { flex: 1.5; min-width: 300px; background: white; padding: 50px 40px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.04); }
.groupe-input { margin-bottom: 25px; display: flex; flex-direction: column; }
.groupe-input label { margin-bottom: 8px; font-weight: 600; font-size: 14px; color: #555; }
.groupe-input input, .groupe-input textarea { padding: 15px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; background-color: #fafafa; }
.groupe-input input:focus, .groupe-input textarea:focus { outline: none; border-color: var(--vert-nature); background-color: white; }
.groupe-checkbox { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 30px; font-size: 14px; color: #666; }
.groupe-checkbox input { margin-top: 5px; }
.btn-envoyer { background-color: var(--vert-nature); color: white; border: none; padding: 18px 30px; font-size: 18px; font-weight: 600; border-radius: 5px; cursor: pointer; width: 100%; transition: 0.3s; }
.btn-envoyer:hover { background-color: var(--vert-fonce); }


/* --- 8. PIED DE PAGE --- */
.pied-de-page { background-color: var(--marron-terre); color: white; text-align: center; padding: 40px 30px; font-size: 14px; }
.lien-mentions { color: #ccc; text-decoration: underline; margin-top: 15px; display: inline-block; cursor: pointer; }
.lien-mentions:hover { color: white; }
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); align-items: center; justify-content: center; }
.modal-contenu { background-color: white; padding: 50px 40px; border-radius: 10px; max-width: 600px; width: 90%; position: relative; }
.fermer { position: absolute; top: 15px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; color: #aaa; transition: 0.3s; }
.fermer:hover { color: var(--marron-terre); }
.modal-contenu p { margin-bottom: 10px; }
.modal-contenu h2 { margin-bottom: 25px; color: var(--marron-terre); }


/* --- 9. RESPONSIVE MOBILE --- */
@media screen and (max-width: 768px) {
    .top-bar { justify-content: center; text-align: center; }
    .top-bar-contact { flex-direction: column; gap: 5px; }
    .separateur { display: none; }
    .burger { display: block; }
    .menu-haut { position: fixed; top: 110px; right: -100%; width: 250px; height: calc(100vh - 110px); background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); flex-direction: column; padding: 40px 20px; box-shadow: -5px 0 15px rgba(0,0,0,0.1); transition: right 0.3s ease; }
    .menu-haut.actif { right: 0; }
    .hero-contenu h2 { font-size: 38px; }
    .hero-contenu p { font-size: 18px; }
    .bandeau-defilant { font-size: 16px; }
    .conteneur-avant-apres { height: 300px; }
    .img-avant-apres-dessus img { width: 100vw; }
    .section { padding: 60px 20px; }
    .coordonnees, .formulaire-contact { flex: 100%; padding: 30px 20px; }
    .bouton-facebook { bottom: 15px; right: 15px; width: 50px; height: 50px; }
    #btn-remonter { bottom: 80px; right: 20px; width: 40px; height: 40px; font-size: 20px; }
}