:root {
    --color-green: #9CA62E;
    --color-blue: #879EBA;
    --color-red: #B3615C;
    --color-white: #ffffff;
    --color-dark: #2a2a2a;
}

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

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-dark);
    overflow-x: hidden;
    font-size: clamp(1rem, calc(1.5vw + 0.25rem), 1.5625rem);
    background-color: var(--color-green);
}

/* Header avec bande verte */
.header-green {
    background-color: var(--color-green);
    height: 3.75rem; /* 60px / 16 */
    width: 100%;
}

/* Section blanche avec logo */
.header-white {
    background-color: var(--color-white);
    text-align: center;
    position: relative;
    height: 8.75rem; /* 140px / 16 */
}

.logo-container {
    display: inline-block;
}

.logo-svg {
    height: 11.25rem; /* 180px / 16 */
    width: auto;
    margin-top: -1.25rem; /* -20px / 16 */
}

/* Section Hero */
.hero {
    background-color: var(--color-blue);
    padding: 3rem 1.25rem 1.125rem 1.25rem; /* 48px 20px 18px 20px */
    text-align: center;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100svh - 301px);
}


.hero-content {
    width: 86.25rem; /* 1380px / 16 */
    max-width: 100%;
    margin: 0 auto;
    padding: 0 5.9375rem 2.5rem 5.9375rem; /* 0 95px 40px 95px */
    border: 0.1875rem solid var(--color-red); /* 3px / 16 */
}

.positionTop {
    margin-top: -1.4375rem; /* -23px / 16 */
}

.subtitle {
    font-size: 1.4em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0 1em; /* 16px relatif à 1.4em */
    margin-bottom: 1.875rem; /* 30px / 16 */
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    display: inline-block;
    background-color: var(--color-blue);
}

.main-title {
    font-size: clamp(2.5rem, calc(8vw + 0.5rem), 8rem);
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.155;
    margin-bottom: 1.25rem; /* 20px / 16 */
    letter-spacing: 0.07em;
    font-family: 'Big Shoulders Display', sans-serif;
}
@media (max-width: 640px) {
    .main-title { 
        font-size: max(2.5rem, calc(5vw + 0.3rem));
    }
}

.separator {
    color: var(--color-red);
}

.description {
    font-size: 1em;
    line-height: 1.44;
    margin-bottom: 1.875rem; /* 30px / 16 */
}

.cta-button {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-red);
    color: var(--color-white);
    padding: 0.625rem 1.25rem; /* 10px 20px */
    text-decoration: none;
    font-size: 0.64em;
    font-weight: 500;
    letter-spacing: 0.2em;
    transition: all 0.3s ease;
}

.cta-button:hover {
    background-color: #9d5248;
    transform: translateY(-0.125rem); /* -2px */
    box-shadow: 0 0.3125rem 0.9375rem rgba(0,0,0,0.2); /* 0 5px 15px */
}

.cta-button::before {
    content: '';
    background-image: url('images/iMouse.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 0.75rem; /* 12px / 16 */
    height: 1.375rem; /* 22px / 16 */
    display: inline-block;
    margin-right: 0.64em;
}

/* Footer */
.footer {
    background-color: var(--color-blue);
    padding-bottom: 1.0625rem; /* 17px / 16 */
    text-align: center;
    border-bottom: 0.3125rem solid var(--color-white); /* 5px / 16 */
    position: relative;
}

.footer:after {
    height: 3.75rem; /* 60px / 16 */
    background-color: var(--color-green);
    content: "";
    width: 100%;
    display: inline-block;
    bottom: -4.0625rem; /* -65px / 16 */
    left: 0;
    position: absolute;
}

.footer-content {
    color: var(--color-white);
    font-size: 0.64em;
    margin: 0 auto;
    padding: 0 1.25rem!important;
}

/* Responsive */
@media (max-width: 1024px) { 
    .hero-content {
        padding: 1.875rem 1.25rem; /* 30px 20px */
        width: 100%;
    }
        .hero {
        min-height: calc(100svh - 250px);
    }

    .logo-svg {
        height:  5.625rem; 
            margin-top: -0.8rem;
    }

    .header-green {
        height: 1.875rem; /* 30px / 16 */
    }

    .header-white {
        height: 4em;
    }


    .subtitle {
        font-size: 1rem;
        letter-spacing: 0.25em;
    }

    .description {
        font-size: 1rem;
    }

    .positionTop {
        margin-top: -1rem;
    }
}

@media (max-width: 30rem) { /* 480px / 16 */
    .main-title {
        letter-spacing: 0.05em;
    }

    .subtitle {
        font-size: 0.8rem;
        letter-spacing: 0.2em;
        padding: 0 0.5rem;
    }

    .hero {
        padding: 3.75rem 0.9375rem 2.5rem; /* 60px 15px 40px */
    }

    .hero-content {
        padding: 1.875rem 1.25rem; /* 30px 20px */
    }

    .cta-button {
        padding: 0.75rem 1.875rem; /* 12px 30px */
        font-size: 0.9rem;
    }



    .description {
        font-size: 0.9rem;
    }
}
@media (max-width:  23.75rem) { /* 380px / 16 */
 .main-title {
        font-size: clamp(2rem, 5vw, 2rem);
    }
    .cta-button{
        font-size: 0.7rem;
    }
}