@font-face {
    font-family: "FredokaOne-Regular";
    src: url('../Fonts/FredokaOne-Regular.ttf') format('truetype');
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    width: 100%;
    overflow-x: hidden;
}

/* ─── HEADER ─────────────────────────────────────────────── */

header {
    width: 100vw;
    min-height: 100vh;
    background-size: cover;
    background-image: url('../images/background.png');
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px;
}

.top-bar {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

nav {
    height: 91vh;
    width: 86%;
    align-content: center;
}

#logo {
    width: clamp(60px, 7vw, 104px);
    height: clamp(61px, 7vw, 105px);
    
}

nav a {
    font-family: "Rubik Doodle Shadow", system-ui;
    font-weight: 400;
    color: white;
    text-decoration: none;
    font-size: clamp(20px, 3vw, 38px);
}

h1 {
    margin: 0;
    width: auto;
    height: auto;
    text-align: center;
    font-family: "Rubik Doodle Shadow", system-ui;
    font-weight: 400;
    color: #FF6200;
    font-size: clamp(80px, 17vw, 330px);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: clamp(10px, 2vw, 34px);
}

h2 {
    width: 100%;
    font-family: "FredokaOne-Regular", system-ui;
    font-weight: 400;
    color: white;
    font-size: clamp(13px, 1.5vw, 26px);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    top: clamp(200px, 22vw, 425px);
    margin: 0;
}

#bouton {
    width: 100%;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: clamp(320px, 38vw, 723px);
    position: absolute;
}

button {
    width: clamp(200px, 20vw, 332px);
    height: clamp(44px, 4vw, 57px);
    background-color: white;
    border: none;
    border-radius: 70px;
    color: #FF6200;
    font-family: "FredokaOne-Regular", system-ui;
    font-weight: 400;
    font-size: clamp(18px, 2vw, 34px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

button:hover {
    background-color: #FF6200;
    color: white;
}

/* ─── SECTION TEXTE ───────────────────────────────────────── */

#Sectiontexte {
    width: 100%;
    min-height: 100vh;
    position: relative;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 4vw, 65px);
    padding: 60px 40px;
    flex-wrap: wrap;
}

#leftimage {
    width: clamp(280px, 45vw, 891px);
    height: clamp(280px, 45vw, 891px);
    background-image: url('../images/sectiontexteimage.png');
    background-size: cover;
    flex-shrink: 0;
}

#invisible {
    width: clamp(280px, 45vw, 891px);
    background-color: black;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 50px);
    padding: 20px;
}

h3 {
    width: 100%;
    color: #FF6200;
    font-family: "FredokaOne-Regular", system-ui;
    font-weight: 400;
    font-size: clamp(16px, 1.6vw, 27px);
    margin: 0;
}

p {
    color: white;
    margin: 0;
    font-family: "Space Grotesk", system-ui;
    font-weight: 500;
    font-size: clamp(14px, 1.4vw, 24px);
    text-align: justify;
    padding-left: 20px;
    padding-right: clamp(10px, 3vw, 62px);
}

span {
    color: #FF6200;
    font-family: "Space Grotesk-Regular", system-ui;
    font-weight: 700;
    font-size: clamp(14px, 1.4vw, 24px);
}

/* ─── IF YOU DREAM ────────────────────────────────────────── */

#ifyoudream {
    width: 100%;
    min-height: clamp(80px, 12vw, 184px);
    background-color: black;
    color: white;
    font-family: "FredokaOne-Regular", system-ui;
    font-weight: 400;
    font-size: clamp(22px, 4vw, 65px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

/* ─── STATS ───────────────────────────────────────────────── */

#Stats {
    min-height: clamp(300px, 40vw, 535px);
    background-color: black;
    display: flex;
    justify-content: center;
    gap: clamp(30px, 7vw, 150px);
    flex-wrap: wrap;
    padding: clamp(30px, 4vw, 60px) 20px;
    align-items: center;
}

img {
    height: clamp(80px, 12vw, 183px);
}

h4 {
    color: white;
    font-family: "FredokaOne-Regular", system-ui;
    font-weight: 400;
    font-size: clamp(22px, 3vw, 50px);
    margin: 0;
    text-align: center;
}

h5 {
    color: white;
    font-family: "space grotesk", system-ui;
    font-weight: 400;
    font-size: clamp(14px, 1.8vw, 30px);
    margin: 0;
    text-align: center;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.stat-card p {
    color: white;
    font-family: "space grotesk", system-ui;
    font-weight: 400;
    font-size: clamp(12px, 1.2vw, 20px);
    margin: 0;
    text-align: center;
    padding: 0;
}

.images-container {
    display: flex;
    gap: clamp(15px, 3vw, 50px);
}

/* ─── INGENUITY ───────────────────────────────────────────── */

#ingenuity {
    min-height: 100vh;
    background-image: url('../images/ingenuitybackground.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 40px 20px;
}

#rover {
    height: clamp(180px, 35vw, 578px);
    padding-top: clamp(40px, 15vw, 257px);
    padding-left: clamp(0px, 25vw, 470px);
}

#ingenuity-title {
    height: auto;
    color: white;
    font-family: "FredokaOne-Regular", system-ui;
    font-weight: 400;
    font-size: clamp(36px, 6vw, 88px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-align: center;
}

#ingenuity-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: clamp(30px, 5vw, 80px);
}

#read {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Space Grotesk", system-ui;
    color: white;
    background-color: #ff6200;
    font-size: clamp(20px, 3vw, 44px);
    border-radius: 70px;
    width: clamp(180px, 20vw, 332px);
    height: clamp(44px, 4vw, 57px);
}

#read:hover {
    background-color: white;
    color: #FF6200;
}

/* ─── FOOTER ──────────────────────────────────────────────── */

footer {
    width: 100%;
    min-height: clamp(100px, 12vw, 172px);
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
}

#footer1 {
    color: #FF6200;
    font-family: "Space Grotesk", system-ui;
    font-weight: 400;
    font-size: clamp(11px, 1.5vw, 32px);
    margin: 0;
    text-align: center;
}

#footer2 {
    color: #FF6200;
    font-family: "Space Grotesk", system-ui;
    font-weight: 400;
    font-size: clamp(10px, 1.2vw, 25px);
    margin: 0;
    text-align: center;
}

/* ─── MEDIA QUERIES ───────────────────────────────────────── */

/* Tablette (≤ 1024px) */
@media (max-width: 1024px) {
    #Sectiontexte {
        flex-direction: column;
        padding: 40px 20px;
        min-height: auto;
    }

    #leftimage {
        width: min(80vw, 500px);
        height: min(80vw, 500px);
        position: static;
    }

    #invisible {
        width: 100%;
        max-width: 700px;
        position: static;
    }

    #ingenuity {
        padding-top: 40px;
    }

    #rover {
        padding-left: 0;
        padding-top: 40px;
    }
}

/* Mobile (≤ 600px) */
@media (max-width: 600px) {
    h1 {
        font-size: clamp(60px, 18vw, 120px);
        top: 41px;
    }

    h2 {
        top: clamp(90px, 24vw, 160px);
        font-size: 13px;
        padding: 22px 16px;
    }

    #bouton {
        top: clamp(160px, 38vw, 260px);
    }

    .top-bar {
        top: 16px;
        left: 16px;
        padding: 0 12px;
    }

    #Stats {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .stat-card p {
        font-size: 14px;
    }

    footer {
        padding: 16px;
    }

    #footer1,
    #footer2 {
        font-size: 11px;
    }

    #ingenuity-title {
        font-size: clamp(28px, 8vw, 60px);
    }
}