* {margin:0;padding:0;box-sizing:border-box;font-family:'Roboto',sans-serif;}
body{background:#0f172a;color:#f8fafc;}
nav{display:flex;justify-content:center;padding:1rem;background:rgba(15,23,42,0.9);}
nav a{margin:0 1rem;color:#f8fafc;text-decoration:none;}
.hero{position:relative;height:80vh;overflow:hidden;}
.hero-img{width:100%;height:100%;object-fit:cover;opacity:0.7;}
.hero-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;}
.hero-content h1{font-size:3rem;margin-bottom:1rem;color:#34d399;}
.hero-content p{font-size:1.2rem;margin-bottom:2rem;}
.btn{padding:.75rem 1.5rem;background:#10b981;color:#fff;text-decoration:none;border-radius:.5rem;}
.services, .portfolio-grid{padding:4rem 2rem;text-align:center;}
.service-card, .project-item{display:inline-block;background:#1e293b;margin:1rem;padding:2rem;border-radius:.5rem;opacity:80;transform:translateY(20px);transition:all .6s ease;width:250px;}
.service-card .icon {font-size: 2.5rem; margin-bottom: 1rem; color: #34d399;}
.service-card h2, .project-item h3 {margin-bottom: .5rem;}
.project-item img {max-width:100%;border-radius:.5rem;}
.fade-in.visible .service-card, .fade-in.visible .project-item {opacity:1;transform:translateY(0);}
/* Dans ton CSS global (ex. style.css) */
html, body {
    height: 100%;            /* pour que min-height:100vh fonctionne */
    margin: 0;               /* reset marges */
}

body {
    display: flex;
    flex-direction: column;  /* empile header, main, footer */
    min-height: 100vh;       /* body fait toujours au moins la hauteur de la fenêtre */
}

main {
    flex: 1;                 /* prend tout l’espace restant */
}

footer {
    /* pas besoin de position fixe, il vient naturellement en bas */
}
/* Container <ul> en flex pour aligner tous les items */
nav > ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Chaque <li> est inline-flex pour centrer verticalement */
nav > ul > li {
    display: inline-flex;
    align-items: center;
    margin: 0 1rem;
    position: relative; /* pour l’absolu du dropdown */
}

/* Liens normaux et dropdown-toggle partagent le même style */
nav a.nav-link,
nav a.nav-link.dropdown-toggle {
    color: #f8fafc !important;
    text-decoration: none;
    padding: 0;      /* on gère le spacing via le <li> */
    background: none;
    border: none;
}

/* Le menu dropdown (ul.dropdown-menu) non stylé en bleu */
nav .dropdown-menu {
    background: #1f2937; /* exemple : gris foncé pour coller à ton thème */
    border: none;
    padding: 0.5rem 0;
}

/* Les items du dropdown restent en blanc */
nav .dropdown-menu .dropdown-item {
    color: #f8fafc;
}
nav .dropdown-menu .dropdown-item:hover {
    background: rgba(255,255,255,0.1);
}

/* S’assurer que le toggler ne force pas de couleur par défaut */
nav a.dropdown-toggle::after {
    filter: invert(1); /* si le caret Bootstrap est noir, on l’inverse */
}

/* Mobile : on cache le menu */
nav > ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* À partir de 992px (lg), on le remet en flex comme avant */
@media (min-width: 992px) {
    nav > ul {
        display: flex;
    }
}

/* Quand Bootstrap ajoute `show` sur l'élément collapse (ici #mainNav), on affiche */
nav > #mainNav.show > ul {
    display: flex;
    flex-direction: column; /* sur mobile, colonne */
}

/* Sur mobile (collapse ouvert), on peut remettre align-items center si besoin */
@media (max-width: 991px) {
    nav > #mainNav.show > ul > li {
        margin: .5rem 0;
    }
}