:root {
    --tecma-primary: #3F51B5;   /* Indigo */
    --tecma-accent:  #009688;   /* Teal  */
    --tecma-grey-dark: #333333;
    --tecma-grey-light: #F2F2F2;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--tecma-grey-dark);
    /* Même dégradé que l’ancienne page en construction */
    background: linear-gradient(135deg, #3F51B5, #009688);
    background-attachment: fixed;
}

/* On remet le contenu principal sur fond blanc pour la lisibilité */
body > header,
body > footer,
main.container {
    background-color: #ffffff;
}

main.container {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Logo image dans le header */
.logo-img {
    height: 32px !important;
    width: auto !important;
    display: block;
}

/* Liens de navigation actifs */
.nav-link.active {
    font-weight: 600;
    color: var(--tecma-primary) !important;
}

/* Boutons */
.btn-primary {
    background: linear-gradient(135deg, #3F51B5, #009688);
    border-color: transparent;
}

.btn-primary:hover,
.btn-primary:focus {
    filter: brightness(1.07);
}

.btn-outline-primary {
    color: #ffffff;
    border-color: #ffffff;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: #ffffff;
    color: var(--tecma-primary);
}

/* Bloc hero page d’accueil */
.hero {
    padding: 4rem 3rem 3rem 3rem;
    background: linear-gradient(135deg, #3F51B5, #009688);
    color: #ffffff;
    border-radius: 0.75rem;
}

/* Carte blanche dans le hero */
.hero .card {
    background-color: #ffffff;
    color: #333333;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Titres hero */
.hero-title {
    font-size: 2.1rem;
    font-weight: 700;
}

.hero-subtitle {
    font-size: 1.1rem;
}

/* Cartes services / blocs infos */
.service-card {
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    padding: 1.5rem;
    height: 100%;
    background-color: #ffffff;
}

/* Formulaire contact */
.contact-form .form-control {
    margin-bottom: 1rem;
}

/* Média */
@media (max-width: 576px) {
    .hero {
        padding: 2.5rem 1.5rem 2rem 1.5rem;
        border-radius: 0.5rem;
    }

    .hero-title {
        font-size: 1.6rem;
    }

    main.container {
        padding-top: 2rem;
        padding-bottom: 2.5rem;
    }

    footer {
        text-align: left;
    }
}

/* Footer */
footer {
    font-size: 0.8rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}