* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    line-height: 1.6;
    color: #334155;
    background-image: linear-gradient(22.5deg, rgba(67, 67, 67, 0.02) 0%, rgba(67, 67, 67, 0.02) 29%,rgba(47, 47, 47, 0.02) 29%, rgba(47, 47, 47, 0.02) 37%,rgba(23, 23, 23, 0.02) 37%, rgba(23, 23, 23, 0.02) 55%,rgba(182, 182, 182, 0.02) 55%, rgba(182, 182, 182, 0.02) 69%,rgba(27, 27, 27, 0.02) 69%, rgba(27, 27, 27, 0.02) 71%,rgba(250, 250, 250, 0.02) 71%, rgba(250, 250, 250, 0.02) 100%),linear-gradient(67.5deg, rgba(117, 117, 117, 0.02) 0%, rgba(117, 117, 117, 0.02) 14%,rgba(199, 199, 199, 0.02) 14%, rgba(199, 199, 199, 0.02) 40%,rgba(33, 33, 33, 0.02) 40%, rgba(33, 33, 33, 0.02) 48%,rgba(135, 135, 135, 0.02) 48%, rgba(135, 135, 135, 0.02) 60%,rgba(148, 148, 148, 0.02) 60%, rgba(148, 148, 148, 0.02) 95%,rgba(53, 53, 53, 0.02) 95%, rgba(53, 53, 53, 0.02) 100%),linear-gradient(135deg, rgba(190, 190, 190, 0.02) 0%, rgba(190, 190, 190, 0.02) 6%,rgba(251, 251, 251, 0.02) 6%, rgba(251, 251, 251, 0.02) 18%,rgba(2, 2, 2, 0.02) 18%, rgba(2, 2, 2, 0.02) 27%,rgba(253, 253, 253, 0.02) 27%, rgba(253, 253, 253, 0.02) 49%,rgba(128, 128, 128, 0.02) 49%, rgba(128, 128, 128, 0.02) 76%,rgba(150, 150, 150, 0.02) 76%, rgba(150, 150, 150, 0.02) 100%),linear-gradient(90deg, #ffffff,#ffffff);
}

/* Header & navigation */
header {
    background-image: linear-gradient(41deg, rgba(107, 107, 107, 0.04) 0%, rgba(107, 107, 107, 0.04) 8%,rgba(31, 31, 31, 0.04) 8%, rgba(31, 31, 31, 0.04) 100%),linear-gradient(9deg, rgba(228, 228, 228, 0.04) 0%, rgba(228, 228, 228, 0.04) 62%,rgba(54, 54, 54, 0.04) 62%, rgba(54, 54, 54, 0.04) 100%),linear-gradient(124deg, rgba(18, 18, 18, 0.04) 0%, rgba(18, 18, 18, 0.04) 37%,rgba(233, 233, 233, 0.04) 37%, rgba(233, 233, 233, 0.04) 100%),linear-gradient(253deg, rgba(201, 201, 201, 0.04) 0%, rgba(201, 201, 201, 0.04) 55%,rgba(47, 47, 47, 0.04) 55%, rgba(47, 47, 47, 0.04) 100%),linear-gradient(270deg, rgba(172, 172, 172, 0.04) 0%, rgba(172, 172, 172, 0.04) 33%,rgba(26, 26, 26, 0.04) 33%, rgba(26, 26, 26, 0.04) 100%),linear-gradient(64deg, rgba(11, 11, 11, 0.04) 0%, rgba(11, 11, 11, 0.04) 38%,rgba(87, 87, 87, 0.04) 38%, rgba(87, 87, 87, 0.04) 100%),linear-gradient(347deg, rgba(199, 199, 199, 0.04) 0%, rgba(199, 199, 199, 0.04) 69%,rgba(4, 4, 4, 0.04) 69%, rgba(4, 4, 4, 0.04) 100%),linear-gradient(313deg, rgba(36, 36, 36, 0.04) 0%, rgba(36, 36, 36, 0.04) 20%,rgba(91, 91, 91, 0.04) 20%, rgba(91, 91, 91, 0.04) 100%),linear-gradient(90deg, rgb(10, 17, 72),rgb(35, 148, 228));
    color: white;
    padding-bottom: 60px;
}

.nav {
    max-width: 1100px;
    margin: auto;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-weight: bold;
    font-size: 1.2rem;
}

.nav-links a {
    color: white;
    text-decoration: none;
    margin-left: 20px;
}

.btn-nav {
    background-color: #38bdf8;
    padding: 8px 14px;
    border-radius: 6px;
    color: #0f172a !important;
}

/* Hero */
.hero {
    text-align: center;
    padding: 60px 20px 0;
}

.hero h1 {
    font-size: 2.4rem;
    margin-bottom: 15px;
}

.hero p {
    margin-bottom: 25px;
    font-size: 1.1rem;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 30px;          /* ESPACE AVEC LE TEXTE AU-DESSUS */
    padding: 14px 26px;

    line-height: 1;            /* FIX chevauchement */
    white-space: nowrap;

    background-color: #38bdf8;
    color: #0f172a;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
}


.btn-secondary {
    display: inline-block;
    margin-top: 15px;
    background-color: #1e293b;
    color: white;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
}

/* Main */
main {
    max-width: 1100px;
    margin: auto;
    padding: 40px 20px;
}

section {
    margin-bottom: 60px;
}

h2 {
    color: #0f172a;
    margin-bottom: 15px;
}

/* Sections images */
.section-image {
    display: flex;
    gap: 40px;
    align-items: center;
}

.section-image.reverse {
    flex-direction: row-reverse;
}

.section-image img {
    width: 100%;
    max-width: 450px;
    border-radius: 12px;
}

/* Contact */
.contact {
    text-align: center;
}

/* Footer */
footer {
    background-color: #e5e7eb;
    text-align: center;
    padding: 15px;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .nav {
        flex-direction: column;
        gap: 10px;
    }

    .nav-links a {
        margin-left: 10px;
    }

    .section-image,
    .section-image.reverse {
        flex-direction: column;
        text-align: center;
    }

    .hero h1 {
        font-size: 1.9rem;
    }
}

/* ===== MENU BURGER ===== */

.burger {
    display: none;
    font-size: 1.8rem;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

/* Fix bouton contact */
.btn-nav {
    margin-left: 20px;
    padding: 10px 16px;
    line-height: normal;
}

/* Mobile */
@media (max-width: 768px) {

    .burger {
        display: block;
    }

    .nav {
        flex-wrap: wrap;
    }

    .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        background-color: #0f172a;
        margin-top: 15px;
        border-radius: 10px;
        padding: 15px 0;
    }

    .nav-links a {
        margin: 10px 0;
        padding: 10px;
        text-align: center;
    }

    .nav-links.active {
        display: flex;
    }

    .btn-nav {
        margin: 10px auto 0;
        width: fit-content;
    }
}

@media (max-width: 768px) {

    .nav-links {
        align-items: center; /* CENTRE TOUT LE CONTENU */
    }

    .nav-links a {
        width: 100%;
        text-align: center;
    }

    .btn-nav {
        width: fit-content;
        margin: 12px auto 0; /* CENTRAGE DU BOUTON */
    }
}