:root {
    --turquoise: #14A89A;
    --turquoise-dark: #0C6E64;
    --anthracite: #2C2C2A;
    --gris: #5F5E5A;
    --gris-clair: #F1EFE8;
    --blanc: #FFFFFF;
    --marine: #0C2B45;
    --rose: #D4537E;

    --radius: 10px;
    --font-titres: 'Poppins', 'Montserrat', sans-serif;
    --font-texte: 'Inter', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-texte);
    color: var(--anthracite);
    background: var(--blanc);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--font-titres);
    font-weight: 500;
    color: var(--anthracite);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--turquoise-dark); text-decoration: none; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* Header */
header.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid #E5E3DB;
    position: relative;
}
header.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
header.site-header nav {
    display: flex;
    align-items: center;
}
header.site-header nav a {
    margin-left: 28px;
    color: var(--anthracite);
    font-weight: 500;
}
header.site-header nav a:hover { color: var(--turquoise-dark); }

/* Bouton hamburger (masqué en desktop) */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 20;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--anthracite);
    margin: 5px 0;
    transition: transform .2s, opacity .2s;
}

.btn-cta {
    display: inline-block;
    background: var(--turquoise);
    color: var(--blanc);
    padding: 12px 28px;
    border-radius: var(--radius);
    font-weight: 500;
    transition: background .2s;
    border: none;
    cursor: pointer;
    font-size: 15px;
}
.btn-cta:hover { background: var(--turquoise-dark); }

/* Hero */
.hero {
    padding: 80px 0;
    text-align: center;
    background: var(--gris-clair);
}
.hero h1 { font-size: 34px; margin-bottom: 16px; }
.hero p { max-width: 640px; margin: 0 auto 32px; color: var(--gris); font-size: 18px; }

/* Sections */
section { padding: 64px 0; }
section h2 { font-size: 26px; margin-bottom: 8px; }
section .subtitle { color: var(--gris); margin-bottom: 32px; }

/* Cards / grille disciplines */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.card {
    border: 1px solid #E5E3DB;
    border-radius: 12px;
    padding: 28px;
    background: var(--blanc);
}
.card h3 { color: var(--turquoise-dark); margin-bottom: 10px; }
.card p { color: var(--gris); font-size: 15px; }

/* Footer */
footer {
    background: var(--marine);
    color: #C9D6DF;
    padding: 40px 0;
    margin-top: 40px;
    font-size: 14px;
}
footer a { color: #C9D6DF; }

/* ===================== RESPONSIVE ===================== */

/* Tablette */
@media (max-width: 900px) {
    .hero { padding: 56px 0; }
    .hero h1 { font-size: 28px; }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile : menu hamburger + colonne unique */
@media (max-width: 640px) {
    .nav-toggle { display: block; }

    header.site-header nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--blanc);
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 24px 20px;
        border-bottom: 1px solid #E5E3DB;
        box-shadow: 0 8px 16px rgba(0,0,0,0.06);
        display: none;
    }
    header.site-header nav.open { display: flex; }
    header.site-header nav a {
        margin: 10px 0;
        width: 100%;
    }
    header.site-header nav a.btn-cta {
        margin-top: 12px;
        text-align: center;
    }

    .hero h1 { font-size: 24px; }
    .hero p { font-size: 16px; }

    section { padding: 44px 0; }
    section h2 { font-size: 22px; }

    .grid-3 { grid-template-columns: 1fr; }

    .container { padding: 0 18px; }
}