:root {

    --background: #f8fafc;
    --surface: #ffffff;
    --text: #1f2937;
    --muted: #64748b;
    --primary: #2563eb;
    --primary-light: #dbeafe;
    --border: #e5e7eb;

}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin:0;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    background:var(--background);

    color:var(--text);

    line-height:1.6;

}



.container {

    width:min(1100px,90%);

    margin:auto;

}



/* HEADER */


.header {

    background:var(--surface);

    border-bottom:1px solid var(--border);

    position:sticky;

    top:0;

    z-index:10;

}



.nav {

    height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo {

    font-size:24px;

    font-weight:600;

    letter-spacing:-1px;

}



.logo span {

    color:var(--primary);

}



nav a {

    color:var(--text);

    text-decoration:none;

    margin-left:22px;

    font-size:15px;

}



nav a:hover {

    color:var(--primary);

}



/* HERO */


.hero {

    padding:90px 0 70px;

}



.tag {

    color:var(--primary);

    font-weight:600;

    font-size:17px;

}



h1 {

    font-size:

    clamp(38px,5vw,58px);

    line-height:1.1;

    letter-spacing:-2px;

    margin:20px 0;

}



.intro {

    max-width:720px;

    font-size:20px;

    color:var(--muted);

}



.button {

    display:inline-block;

    margin-top:30px;

    padding:14px 25px;

    background:var(--primary);

    color:white;

    border-radius:8px;

    text-decoration:none;

    transition:.2s;

}



.button:hover {

    opacity:.85;

}



/* TITRES */


h2 {

    font-size:32px;

    letter-spacing:-1px;

}



h3 {

    font-size:21px;

}



/* CARTES */


.cards {

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:25px;

    margin:40px 0 80px;

}



.card {

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:16px;

    padding:30px;

    transition:.2s;

}



.card:hover {

    transform:translateY(-4px);

}



.card-icon {

    font-size:35px;

    margin-bottom:15px;

}



.card p {

    color:var(--muted);

}



.card a {

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

}



/* SECTION ABOUT */


.about {

    background:white;

    padding:70px 0;

    margin-top:40px;

}



.about p {

    max-width:700px;

    color:var(--muted);

    font-size:18px;

}



/* PAGES INTERIEURES */


.page {

    padding:70px 0;

}



article {

    background:white;

    padding:35px;

    border-radius:15px;

    border:1px solid var(--border);

}



/* FORMULAIRE */


form {

    max-width:600px;

    display:grid;

    gap:15px;

}



input,
textarea {

    width:100%;

    padding:14px;

    border:

    1px solid var(--border);

    border-radius:8px;

    font-family:inherit;

}



textarea {

    min-height:150px;

}



/* FOOTER */


footer {

    margin-top:60px;

    padding:30px 0;

    text-align:center;

    color:var(--muted);

    font-size:14px;

}



/* MOBILE */


@media(max-width:800px) {


    nav {

        display:none;

    }


    .hero {

        padding-top:50px;

    }


    .cards {

        grid-template-columns:1fr;

    }


    h1 {

        font-size:38px;

    }

}