/* css/style.css */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Assure que le footer reste en bas */
    font-family: 'Inter', sans-serif; /* Applique Inter à tout le corps */
    /* padding-top ajusté pour correspondre à la hauteur du header sticky */
    /* Hauteur du header sur petits écrans: logo h-12 (3rem) + py-2 (1rem) = 4rem (64px) */
    padding-top: 0rem; /* 64px */
}

/* Ajustement du padding-top pour les écrans md et plus grands */
/* Hauteur du header sur écrans md+: logo h-16 (4rem) + py-2 (1rem) = 5rem (80px) */
@media (min-width: 768px) { /* Correspond au breakpoint 'md' de Tailwind */
    body {
        padding-top: 0rem; /* 80px */
    }
}

main {
    flex-grow: 1; /* Permet au contenu principal de prendre l'espace disponible */
}

/* Style pour le logo si besoin de plus de personnalisation */
.logo a {
    /* Exemple : text-shadow: 1px 1px 2px rgba(0,0,0,0.1); */
}

/* Amélioration visuelle pour les sections */
section {
    padding-bottom: 2rem; /* Ajoute un peu d'espace en bas de chaque section */
}

#hero {
    background-image: linear-gradient(rgba(249, 249, 249, 0.8), rgba(249, 249, 249, 0.8)), url('https://placehold.co/1200x400/383736/f9f9f9?text=Arri%C3%A8re-plan+CreaMod3D'); /* Exemple avec un overlay */
    background-size: cover;
    background-position: center;
    padding-top: 2rem; /* Ajustez ce padding selon l'espace désiré dans la section hero elle-même */
    /* La page index.php a un <main class="container mx-auto mt-8 ..."> qui gère l'espacement initial après le header */
}

/* Styles pour les cartes de service */
#services-phares > div > div { /* Cible les cartes directement */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#services-phares > div > div:hover {
    transform: translateY(-5px);
}

/* Ajustement pour le menu mobile lorsqu'il est ouvert */
@media (max-width: 767px) { /* md breakpoint de Tailwind */
    header nav#mainNav:not(.hidden) {
        background-color: #383736; /* color-dark */
        padding: 1rem;
        position: absolute;
        top: 100%; /* Se positionne juste en dessous du header */
        left: 0;
        right: 0;
        z-index: 40; /* Juste en dessous du header qui est à z-50 */
        border-top: 1px solid #5a5858; /* Ajoute une séparation visuelle */
    }
    header nav#mainNav:not(.hidden) ul {
        align-items: flex-start; /* Aligne les items à gauche */
    }
     header nav#mainNav:not(.hidden) ul li a {
        padding: 0.75rem 0; /* Augmente légèrement le padding vertical pour une meilleure interaction */
        width: 100%; /* Fait que les liens prennent toute la largeur */
     }
}