/**
 * VERT PELOUSE - STYLES PERSONNALISÉS
 * Couleurs principales du logo :
 * - Vert : #8BC540
 * - Orange : #FF6B35
 * - Brun : #5C4033
 */

/* =====================================================
   1. VARIABLES CSS (Couleurs et polices réutilisables)
   ===================================================== */
:root {
    /* COULEURS */
    --vert-primaire: #8BC540;
    --vert-fonce: #6FA031;
    --orange-secondaire: #FF6B35;
    --brun-terre: #5C4033;
    --gris-fonce: #2C3E50;
    --gris-moyen: #7F8C8D;
    --gris-clair: #ECF0F1;
    --blanc: #FFFFFF;
    
    /* POLICES */
    --police-titres: 'Montserrat', sans-serif;
    --police-texte: 'Open Sans', sans-serif;
    
    /* OMBRES */
    --ombre-legere: 0 2px 10px rgba(0, 0, 0, 0.08);
    --ombre-moyenne: 0 4px 20px rgba(0, 0, 0, 0.12);
    --ombre-forte: 0 8px 30px rgba(0, 0, 0, 0.15);
    
    /* TRANSITIONS */
    --transition-rapide: 0.2s ease;
    --transition-normale: 0.3s ease;
    --transition-lente: 0.5s ease;
}

/* =====================================================
   2. STYLES GÉNÉRAUX
   ===================================================== */

/* Corps de la page */
body {
    font-family: var(--police-texte);
    color: var(--gris-fonce);
    line-height: 1.7;
    font-size: 16px;
    overflow-x: hidden;
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--police-titres);
    font-weight: 700;
    color: var(--gris-fonce);
    line-height: 1.3;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* Titres responsive (plus petits sur mobile) */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
}

/* Liens */
a {
    color: var(--vert-primaire);
    text-decoration: none;
    transition: var(--transition-rapide);
}

a:hover {
    color: var(--vert-fonce);
    text-decoration: none;
}

/* Sections avec espacement généreux */
section {
    padding: 80px 0;
}

@media (max-width: 768px) {
    section {
        padding: 50px 0;
    }
}

/* =====================================================
   3. NAVIGATION (Menu principal)
   ===================================================== */

/* Logo dans le menu */
.navbar {
    padding-top: 2px;
    padding-bottom: 2px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    font-family: var(--police-titres);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--gris-fonce) !important;
}

.logo-img {
    height: 65px;
    width: auto;
    margin-right: 10px;
    transition: var(--transition-normale);
}

.navbar-brand:hover .logo-img {
    transform: scale(1.05);
}

/* Liens du menu */
.nav-link {
    font-family: var(--police-titres);
    font-weight: 600;
    font-size: 1rem;
    color: var(--gris-fonce) !important;
    padding: 0.5rem 1rem !important;
    position: relative;
    transition: var(--transition-rapide);
}

/* Effet soulignement au survol */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: var(--vert-primaire);
    transition: var(--transition-normale);
    transform: translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 70%;
}

.nav-link:hover,
.nav-link.active {
    color: var(--vert-primaire) !important;
}

/* Bouton téléphone dans le menu */
.btn-phone {
    background-color: var(--vert-primaire);
    border-color: var(--vert-primaire);
    color: var(--blanc) !important;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 25px;
    box-shadow: var(--ombre-legere);
    transition: var(--transition-normale);
}

.btn-phone:hover {
    background-color: var(--vert-fonce);
    border-color: var(--vert-fonce);
    transform: translateY(-2px);
    box-shadow: var(--ombre-moyenne);
}

/* Menu mobile (hamburger) */
.navbar-toggler {
    border: 2px solid var(--vert-primaire);
    padding: 0.5rem;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(139, 197, 64, 0.25);
}

/* =====================================================
   4. BOUTONS PERSONNALISÉS
   ===================================================== */

/* Bouton primaire (vert) */
.btn-primary {
    background-color: var(--vert-primaire);
    border-color: var(--vert-primaire);
    color: var(--blanc);
    font-family: var(--police-titres);
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    box-shadow: var(--ombre-legere);
    transition: var(--transition-normale);
}

.btn-primary:hover {
    background-color: var(--vert-fonce);
    border-color: var(--vert-fonce);
    transform: translateY(-3px);
    box-shadow: var(--ombre-moyenne);
}

/* Bouton secondaire (transparent avec bordure verte) */
.btn-outline-primary {
    border: 2px solid var(--vert-primaire);
    color: var(--vert-primaire);
    background-color: transparent;
    font-family: var(--police-titres);
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    transition: var(--transition-normale);
}

.btn-outline-primary:hover {
    background-color: var(--vert-primaire);
    border-color: var(--vert-primaire);
    color: var(--blanc);
    transform: translateY(-3px);
    box-shadow: var(--ombre-legere);
}

/* Bouton succès (utilisé dans les formulaires et footer) */
.btn-success {
    background-color: var(--vert-primaire);
    border-color: var(--vert-primaire);
}

.btn-success:hover {
    background-color: var(--vert-fonce);
    border-color: var(--vert-fonce);
}

/* Icônes de couleur verte dans le texte */
.text-success {
    color: var(--vert-primaire) !important;
}

/* =====================================================
   5. FOOTER (Pied de page)
   ===================================================== */

.footer {
    background-color: var(--gris-fonce);
    margin-top: 80px;
}

.footer h5 {
    color: var(--blanc);
    font-weight: 700;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 10px;
}

/* Soulignement décoratif sous les titres du footer */
.footer h5::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: var(--vert-primaire);
}

/* Logo dans le footer */
.footer-logo-img {
    height: 60px;
    width: auto;
}

/* Liens du footer */
.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    transition: var(--transition-rapide);
    display: inline-block;
}

.footer-links a:hover {
    color: var(--vert-primaire);
    padding-left: 5px;
}

/* Coordonnées du footer */
.footer-contact li {
    display: flex;
    align-items: start;
}

.footer-contact a {
    color: rgba(255, 255, 255, 0.7);
}

.footer-contact a:hover {
    color: var(--vert-primaire);
}

/* Boutons réseaux sociaux */
.social-links a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition-normale);
}

.social-links a:hover {
    background-color: var(--vert-primaire);
    border-color: var(--vert-primaire);
    transform: translateY(-3px);
}

/* Bouton Facebook - couleur officielle */
.social-links .facebook-btn {
    background-color: #1877F2;
    border: 2px solid #1877F2;
    color: var(--blanc);
    transition: var(--transition-normale);
}

.social-links .facebook-btn:hover {
    background-color: #0a5dc2;
    border-color: #0a5dc2;
    color: var(--blanc) !important;
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(24, 119, 242, 0.5);
}

/* =====================================================
   6. BANNIÈRE COOKIES (Popup en bas)
   ===================================================== */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--blanc);
    border-top: 3px solid var(--vert-primaire);
    padding: 1.5rem 0;
    z-index: 9999;
    display: none; /* Caché par défaut, affiché par JavaScript */
}

.cookie-banner h6 {
    color: var(--gris-fonce);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.cookie-banner p {
    color: var(--gris-moyen);
    margin-bottom: 0;
}

/* Animation d'apparition de la bannière (ajoutée par JavaScript) */
.cookie-banner.show {
    display: block;
    animation: slideUp 0.5s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* =====================================================
   7. CARDS (Cartes pour services et réalisations)
   ===================================================== */

.card {
    border: none;
    border-radius: 12px;
    box-shadow: var(--ombre-legere);
    transition: var(--transition-normale);
    overflow: hidden;
    height: 100%;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: var(--ombre-forte);
}

.card-img-top {
    transition: var(--transition-lente);
    height: 250px;
    object-fit: cover;
}

.card:hover .card-img-top {
    transform: scale(1.1);
}

.card-body {
    padding: 1.5rem;
}

.card-title {
    font-family: var(--police-titres);
    font-weight: 700;
    color: var(--gris-fonce);
    margin-bottom: 1rem;
}

.card-text {
    color: var(--gris-moyen);
    line-height: 1.7;
}

/* Lien "En savoir plus" dans les cards */
.card-link {
    color: var(--vert-primaire);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: var(--transition-rapide);
}

.card-link:hover {
    color: var(--vert-fonce);
    padding-left: 5px;
}

.card-link i {
    margin-left: 5px;
    transition: var(--transition-rapide);
}

.card-link:hover i {
    transform: translateX(5px);
}

/* =====================================================
   8. SECTIONS AVEC FOND COLORÉ
   ===================================================== */

/* Fond vert très pâle (alternance avec blanc) */
.bg-vert-pale {
    background-color: #F0F8E8;
}

/* Fond gris très clair */
.bg-gris-pale {
    background-color: #F8F9FA;
}

/* Section avec fond vert plein (pour CTA) */
.bg-vert {
    background-color: var(--vert-primaire);
    color: var(--blanc);
}

.bg-vert h1,
.bg-vert h2,
.bg-vert h3,
.bg-vert h4,
.bg-vert h5,
.bg-vert h6,
.bg-vert p {
    color: var(--blanc);
}

/* =====================================================
   9. FORMULAIRES
   ===================================================== */

/* Champs de formulaire */
.form-control,
.form-select {
    border: 2px solid var(--gris-clair);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-family: var(--police-texte);
    transition: var(--transition-rapide);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--vert-primaire);
    box-shadow: 0 0 0 0.2rem rgba(139, 197, 64, 0.25);
}

/* Labels de formulaire */
.form-label {
    font-weight: 600;
    color: var(--gris-fonce);
    margin-bottom: 0.5rem;
}

/* Champs requis (astérisque rouge) */
.form-label .required {
    color: #DC3545;
}

/* État de validation (champs valides = bordure verte) */
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--vert-primaire);
}

/* État de validation (champs invalides = bordure rouge) */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #DC3545;
}

/* =====================================================
   10. UTILITAIRES ET CLASSES D'ESPACEMENT
   ===================================================== */

/* Espacements personnalisés */
.py-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (max-width: 768px) {
    .py-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

/* Texte vert */
.text-vert {
    color: var(--vert-primaire);
}

/* Texte orange */
.text-orange {
    color: var(--orange-secondaire);
}

/* Séparateur décoratif (ligne verte) */
.separator {
    width: 80px;
    height: 4px;
    background-color: var(--vert-primaire);
    margin: 1.5rem auto;
}

/* =====================================================
   11. ANIMATIONS SCROLL (Apparition progressive)
   ===================================================== */

/* Classe ajoutée par JavaScript quand l'élément entre dans la vue */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =====================================================
   12. RESPONSIVE - AJUSTEMENTS MOBILES
   ===================================================== */

@media (max-width: 768px) {
    /* Menu mobile - liens centrés */
    .navbar-nav {
        text-align: center;
    }
    
    .nav-item {
        margin-bottom: 0.5rem;
    }
    
    /* Bouton téléphone en largeur complète sur mobile */
    .btn-phone {
        width: 100%;
        margin-top: 1rem;
    }
    
    /* Footer - colonnes empilées */
    .footer .col-lg-4,
    .footer .col-md-6 {
        margin-bottom: 2rem;
    }
    
    /* Bannière cookies - boutons empilés */
    .cookie-banner .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Effet hover sur les photos de réalisations (aperçu) */
.realisation-card:hover img {
    transform: scale(1.1);
}

.realisation-card:hover .realisation-overlay {
    opacity: 1 !important;
}

/* Animation bounce pour la flèche scroll */
.animate-bounce {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* =====================================================
   GALERIE RÉALISATIONS - Styles spécifiques
   ===================================================== */

/* Boutons de filtre */
.filter-btn {
    border-color: var(--vert-primaire);
    color: var(--vert-primaire);
    font-weight: 600;
    margin: 0.25rem;
    transition: var(--transition-normale);
}

.filter-btn:hover {
    background-color: var(--vert-primaire);
    border-color: var(--vert-primaire);
    color: var(--blanc);
}

.filter-btn.active {
    background-color: var(--vert-primaire);
    border-color: var(--vert-primaire);
    color: var(--blanc);
}

/* Cards de galerie */
.gallery-card {
    overflow: hidden;
    transition: var(--transition-normale);
}

.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ombre-forte);
}

/* Images de galerie */
.gallery-image {
    transition: transform 0.5s ease;
}

.gallery-card:hover .gallery-image {
    transform: scale(1.1);
}

/* Overlay qui apparaît au hover */
.gallery-card:hover .gallery-overlay {
    opacity: 1 !important;
}

/* Animation des items lors du filtrage */
.gallery-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Style pour le breadcrumb (fil d'Ariane) */
.breadcrumb {
    background-color: transparent;
    margin-bottom: 0;
    padding: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--blanc);
    font-size: 1.2rem;
}

.breadcrumb-item a {
    color: var(--blanc);
    text-decoration: none;
    transition: var(--transition-rapide);
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}
/* Bouton Facebook dans la carte CTA de contact.php */
.bg-vert .facebook-cta {
    background-color: #1877F2 !important;
    border: 2px solid #1877F2 !important;
    color: #ffffff !important;
    transition: var(--transition-normale);
}

.bg-vert .facebook-cta:hover {
    background-color: #1877F2 !important;
    border-color: #1877F2 !important;
    color: #ffffff !important;
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    filter: brightness(1.15);
}

/* =====================================================
   AJUSTEMENTS MOBILE - HERO
   ===================================================== */

/* TÉLÉPHONE & TABLETTE EN MODE PORTRAIT */
@media (max-width: 1024px) and (orientation: portrait) {
    
    .hero-section {
        background-image: none !important;
        background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), #2c3e20 !important;
        min-height: auto !important;
        padding: 0 !important;
        display: block !important;
    }
    
    /* Image positionnée HAUT DROITE pour garder le gars visible */
    .hero-section::before {
        content: "";
        display: block;
        width: 100%;
        height: 350px;
        background: url('/images/hero-bg.webp') top right/cover no-repeat;
        margin-bottom: 1rem;
    }
    
    .hero-section .container {
        padding: 1rem 1rem 3rem 1rem !important;
    }
    
    .hero-logo {
        margin-top: 0 !important;
        margin-bottom: 1.5rem !important;
    }
    
    .hero-logo img {
        max-width: 200px !important;
    }
    
    .hero-section .display-3 {
        font-size: 1.75rem !important;
    }
    
    .hero-section .lead {
        font-size: 1rem !important;
    }
    
    .hero-section .display-5 {
        font-size: 1.5rem !important;
    }
    
    .scroll-indicator {
        display: none !important;
    }
}

/* TÉLÉPHONE & TABLETTE EN MODE PAYSAGE */
@media (max-width: 1024px) and (orientation: landscape) {
    
    /* Garde le comportement desktop mais avec ajustements */
    .hero-section {
        background-size: cover !important;
        background-position: center !important;
        padding-top: 80px !important;
        padding-bottom: 40px !important;
        min-height: 100vh !important;
    }
    
    .hero-logo {
        margin-top: -80px !important;
    }
    
    .hero-logo img {
        max-width: 220px !important;
    }
    
    .hero-section .display-3 {
        font-size: 2rem !important;
    }
    
    .hero-section .display-5 {
        font-size: 1.5rem !important;
    }
    
    .scroll-indicator {
        display: none !important;
    }
}

/* Fond sombre pendant le chargement de la bannière */
.page-hero {
    background-color: #1a2a10;
}
/* =====================================================
   TEXTE BLANC DANS TOUS LES HERO
   ===================================================== */

/* Hero de toutes les pages - forcer texte blanc */
.page-hero h1,
.page-hero .display-4,
.page-hero .lead,
.page-hero p,
.hero-section h1,
.hero-section h2,
.hero-section .display-3,
.hero-section .display-5,
.hero-section .lead,
.hero-section p {
    color: #ffffff !important;
}

/* Breadcrumb blanc */
.page-hero .breadcrumb-item,
.page-hero .breadcrumb-item a {
    color: #ffffff !important;
}