/* === Base Elements === */
body {
    background: radial-gradient(circle, #212121, #171717);
    padding: 3%;
    margin: 0;
}

main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: left;
    gap: 5%;
}

h1 {
    color: #F1701A;
    font-family: Inter;
    font-size: 10vh;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    margin: 0;
}

h2 {
    color: #F1701A;
    font-family: Inter;
    font-size: 5vh;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    margin: 0;
    margin-bottom: 2vh;
}

p {
    color: #F5E9DD;
    font-family: Inter;
    font-size: 2.1vh;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

header p {
    margin-right: 10%;
    margin-bottom: 5vh;
    border-left: 4px solid #F5E9DD;
    padding-left: 17px;
}

/* === Layout Containers === */
.contact-info {
    padding-left: 3%;
    padding-top: 3%;
    align-items: start;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.left-column {
    padding-left: 3%;
    padding-top: 3%;
    align-items: start;
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 90vh;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.left-column::-webkit-scrollbar {
    display: none;              /* Chrome, Safari, Opera */
}

.right-column {
    overflow: auto;
    height: 90vh;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.right-column::-webkit-scrollbar {
    display: none;              /* Chrome, Safari, Opera */
}

/* === Visual Section === */
.visuel {
    padding-top: 0%;
    width: auto;
    height: 90vh;
    overflow: hidden;
}

.visuel img {
    border-radius: 25px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* === Contact Section === */
.contact {
    border-radius: 25px;
    border: 2px solid #F5E9DD;
    padding-left: 5%;
    padding-top: 3vh;
    padding-right: 0;
    padding-bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    position: relative;
    height: fit-content;
    margin-bottom: min(15px, 5vh);
}

.contact div {
    padding: 0;
    padding-bottom: 3vh;
}

.contact address {
    border-left: 4px solid #F5E9DD;
    padding-left: 17px;
    margin-bottom: 5vh;
}

.contact a {
    text-decoration: none;
    color: #F5E9DD;
}

.contact address a:hover {
    color: #F1701A;
    transition: 0.3s;
}

.contact img {
    position: absolute;
    bottom: 0;
    right: 0;
    object-position: bottom;
    border-bottom-right-radius: 25px;
    height: 36vh;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    z-index: -1;
}

/* === Tarifs Section === */
.tarifs {
    font-family: Inter;
    font-size: 2vh;
    font-weight: 900;
    background-color: #F1701A;
    height: 6vh;
    width: 100%;
    border-radius: 23px;
    margin-top: auto;
    margin-bottom: 3vh;
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: min(5px, 1vh);
    padding-bottom: min(5px, 1vh);
    border: 1px solid transparent;
}

.tarifs a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    text-decoration: none;
    color: #212121;
}

.tarifs:hover img {
    transform: rotate(-90deg);
}

.tarifs img {
    margin-right: 10px;
    width: 3vh;
    height: auto;
    transition: transform 0.3s;
}

/* === Footer Section === */
footer {
    margin-top: 5vh;
    border-top: 2px solid #F5E9DD;
    padding-top: 3vh;
    padding-bottom: 3vh;
    padding-left: 5%;
    padding-right: 5%;
    color: #F5E9DD;
    font-family: Inter;
    font-size: 2.3vh;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

footer ul {
    color: #929292;
}

footer a {
    color: #929292;
    text-decoration: none;
}

footer a:hover {
    color: #F1701A;
    transition: color 0.3s;
}

/* === Buttons === */
.btn1 {
    color: #F5E9DD;
    padding: 2vh 35px;
    border-radius: 20px;
    border: 1px solid #F5E9DD;
    transition: background-color 0.3s, color 0.3s;
}

.btn1:hover {
    background-color: #F5E9DD;
    color: #212121;
}

@media (max-width: 800px) {
    body {
        padding-left: 3vw;
        padding-right: 3vw;
    }

    main {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
    }

    h1 {
        font-size: 11vh;
    }

    .left-column,
    .right-column {
        overflow: hidden;
        height: auto;
        width: 100%;
        padding: 0;
    }

    .visuel {
        width: 100%;
        height: 30vh;
        aspect-ratio: 16/9;
        padding: 0;
    }

    .visuel img {
        border-radius: 20px;
        height: 100%;
        object-fit: cover;
    }

    .contact {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 5%;
        padding-bottom: 0%;
        box-sizing: border-box;
    }

    .contact img {
        display: none;
    }

    .tarifs {
        margin-top: 3vh;
        width: 100%;
    }
}