:root {
    --whitish: #fdecf8;
    --blackish: #11090e;
    --accent: #cbbba3;



    --bg-color1: var(--whitish);
    --bg-color2: var(--blackish);
    --bg-color3: var(--accent);


    --color1: var(--blackish);
    --color2: var(--whitish);
    --color3: var(--accent);

    --primary-combo-bg: var(--accent);
    --primary-combo-color: var(--whitish);
    --card-bg: var(--bg-color3);


    --automatic-container: min(1400px, 100% - 8rem);
}



@media (max-width: 1024px) {
    :root {
        --automatic-container: calc(100% - 4rem);
    }
}

@media (max-width: 596px) {
    :root {
        --automatic-container: calc(100% - 2rem);
    }
}




/* RESET */


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

body {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    overflow-y: scroll;
    /* garde le scroll même sans barre visible */
}

body::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari et Edge */
}

input::placeholder,
textarea::placeholder {
    color: #fff;
    /* Change à la couleur souhaitée */
    opacity: 1;
    /* Facultatif : pour s'assurer que la couleur soit bien visible */
}


ul {
    list-style: none;
}

a {
    text-decoration: none;
}

a:visited {
    color: var(--blackish);
}


button {
    border: none;
    background-color: transparent;
}


html {
    font-size: 16px;
    font-family: "Montserrat", sans-serif;
}


/* TYPOGRAPHIE */
h1 {
    font-size: 4.5rem;
    line-height: 100%;
    z-index: 2;
    font-family: "Mulish", sans-serif;
    font-weight: 800;
}

h2 {
    font-size: 7vw;
    font-weight: 900;
}

h3 {
    font-size: 2vw;
}



.big-p {
    font-size: 2rem;
}

.nav-link,
button,
.cta-nav {
    font-size: 1.5rem;
}

.maj {
    text-transform: uppercase;
}

@media (max-width: 1024px) {

    h1 {
        font-size: 3.5rem;
    }



    h3 {
        font-size: 1.5rem;
        margin-bottom: 2.5vw;
    }



    .nav-link,
    button,
    .cta-nav {
        font-size: 1.25rem;
    }
}

@media (max-width:600px) {

    h1 {
        font-size: 2.5rem;
    }



    h3 {
        font-size: 1.25rem;
    }



    .nav-link,
    button,
    .cta-nav {
        font-size: 1rem;
    }
}

.span-cta .hero-cta,
.section-cta,
h1,
h2 {
    text-transform: uppercase;
}

.nav-link,
.cta2,
.card-cta,
mark,
h3 {
    text-transform: capitalize;
}


/* CODE DE LA PAGE */

body {
    background-color: var(--accent);
    overflow-x: hidden;
}


main>* {
    max-width: var(--automatic-container);
    margin-inline: auto;
    display: block;
}

main {
    max-width: 100%;
    overflow-x: hidden;

}

.row {
    display: flex;
}

.column {
    display: flex;
    flex-direction: column;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}





footer,
header.header {
    padding-inline: calc(calc(100% - var(--automatic-container)) / 2);
}

.navbar {
    width: 100%;
    padding-top: 2vw;
    padding-inline: calc(calc(100% - var(--automatic-container)) / 2);
    background-color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
}

.logo span {
    font-weight: 700;
    font-size: 1.5vw;
}

.logo img {
    width: 30px;
    height: 30px;
}

.nav-links {
    display: flex;
    gap: 1rem;
    list-style: none;
}

.nav-links a {
    text-decoration: none;
    padding: 0.7vw 1.5vw;
    border: 1px solid var(--blackish);
    border-radius: 999px;
    color: var(--blackish);
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    font-size: 1.5vw;
}

.nav-links a:hover {
    background-color: var(--blackish);
    color: var(--accent);
}

.hero-banner {
    background-color: #cbbba3;
    /* couleur de fond proche de l'image */
    padding: 5% 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 90%;
    max-width: 100%;
}

.hero-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 8rem;
    margin: 0;
    color: var(--blackish);
    letter-spacing: 2%;
    line-height: 90%;
    white-space: nowrap;
    font-size: 14vw;
    width: 100%;
    text-align: center;
}

.hero-subtitle {
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    margin-top: 0.5rem;
    color: var(--blackish);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
    text-align: center;
    font-size: 3.25vw;
    line-height: 100%;
}



section.bg-section {
    height: 800px;
}

.hero-bottom {
    width: 100%;
    height: 35vw;
    display: flex;
    justify-content: space-between;
    gap: 1vw;
}

.hero-left {
    flex: 0.7;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--blackish);
    color: var(--accent);
    padding: 2vw;
    border-radius: 15px;
}



.hero-btn {
    display: flex;
    flex-direction: row;
    gap: 2vw;
}

.btn {
    display: flex;
    align-items: center;
    gap: 1vw;
}

.btn-txt {
    font-size: 2vw;
    font-weight: 600;
    color: var(--accent);
}

.btn-txt-2 {
    font-size: 2vw;
    font-weight: 600;
    color: var(--blackish);
}

.btn:hover .btn-txt {
    color: var(--whitish);
}

.btn:hover .btn-txt-2 {
    color: var(--whitish);
}

.btn:hover .btn-svg {
    background-color: var(--whitish);
    transform: rotate(90deg);
}

.btn:hover .btn-svg-2 {
    background-color: var(--whitish);
    color: var(--blackish);
    transform: rotate(90deg);

}

.btn .btn-svg,
.btn .btn-svg-2 {
    transition: transform 0.3s ease-in-out;
}

.btn-svg {
    /* padding: 1%; */
    width: 32px;
    height: 32px;
    background-color: var(--accent);
    color: var(--blackish);
    border-radius: 50%;
}

.btn-svg-2 {
    padding: 0.25rem;
    width: 32px;
    height: 32px;
    background-color: var(--blackish);
    color: var(--accent);
    border-radius: 50%;
}



.hero-right {
    flex: 1.3;
    background-image: url(assets/webp/10.webp);
    border-radius: 15px;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (max-width: 800px) {

    .hero-title {
        padding-top: 4vw;
    }

    .hero-subtitle {
        font-size: 5vw;
        text-align: center;
        white-space: wrap;

    }

    .logo img {
        width: 50px;
        height: 50px;
    }

    .logo span {
        opacity: 0;
    }

    .hero-bottom {
        flex-direction: column-reverse;
        gap: 4vw;
        height: auto;
    }

    .hero-left,
    .hero-right {
        width: 100%;
        height: auto;
    }

    .hero-left {
        padding: 10vw 5vw;
        gap: 12vw;
        text-align: justify;
    }

    .btn {
        justify-content: center;
        gap: 4vw;
    }

    .hero-btn {
        flex-direction: column;
        gap: 7vw;
    }

    .btn-txt,
    .btn-txt-2 {
        font-size: 7vw;
    }

    .btn-svg,
    .btn-svg-2 {
        width: 30px;
        height: 30px;
    }

    .hero-right {
        margin-top: 4vw;
        min-height: 40vw;
        background-size: cover;
        background-position: center;
    }
}

.about-me {
    margin-top: 6vw;
    padding-top: 2vw;
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;

    border-top: solid 2px var(--blackish);
    gap: 4vw;

}

.about-me-top {
    display: flex;
    gap: 1vw
}

.about-me-top :first-child {
    flex: 0.7;
}

.about-me-top :last-child {
    flex: 1.3;
}

.about-me-bottom {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2vw;
}

.about-me-img {
    width: 100%;
    height: fit-content;
    flex: 1;
    border-radius: 15px;
}

@media screen and (max-width: 800px) {
    .about-me {
        padding-top: 5vw;
        gap: 6vw;
    }

    .about-me-top {
        flex-direction: column;
        gap: 4vw;
    }

    .about-me-top p {
        font-size: 5vw;
        text-align: justify;
    }

    .about-me-top :first-child,
    .about-me-top :last-child {
        flex: 1;
        width: 100%;
    }

    .about-me-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 4vw;
        margin-bottom: 4vw;
    }

    .about-me-img {
        height: fit-content;
        width: 100%;
    }
}

.vedette {
    margin-top: 6vw;
    padding: 2vw 0 5vw 0;
    background-color: var(--blackish);
    max-width: 100%;
    padding-inline: calc(calc(100% - var(--automatic-container)) / 2);
    display: flex;
    flex-direction: column;
    gap: 3vw;
}

.h2-oeuvres {
    color: var(--accent);
    text-align: center;
    font-size: 7.5vw;
    font-weight: 900;
}

.vedette-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.vedette-block a {
    transition: transform 0.3s ease;
    color: var(--blackish);

}

.vedette-block a:hover {
    transform: scale(0.97);
}

.white{
    color: var(--whitish);
}

.vedette-btn-1 {
    width: 100%;
    height: 10vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url(assets/webp/4.webp);
    background-repeat: repeat;
    background-position: top;
    border-radius: 15px;
    padding: 0 2vw;
}

.vedette-btn-2 {
    width: 100%;
    height: 10vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url(assets/webp/7.webp);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px;
    padding: 0 2vw;
}

.vedette-btn-3 {
    width: 100%;
    height: 10vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url(assets/webp/8.webp);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px;
    padding: 0 2vw;
}

.vedette-btn-4 {
    width: 100%;
    height: 10vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url(assets/webp/9.webp);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px;
    padding: 0 2vw;
}

.vedette-btn-txt {
    font-size: 2rem;
    font-weight: 900;
}

@media screen and (max-width: 800px) {
    .h2-oeuvres {
        font-size: 13vw;
    }

    .vedette {
        padding: 12vw 5vw;
        gap: 6vw;
    }

    .vedette-block {
        gap: 4vw;
    }

    .vedette-btn-1,
    .vedette-btn-2,
    .vedette-btn-3 {
        height: auto;
        min-height: 18vw;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 3vw;
        gap: 1vw;
        text-align: left;
    }

    .vedette-btn-txt {
        font-size: 6vw;
        line-height: 1.2;
    }
}


.projet {
    margin-top: 6vw;
    padding-top: 2vw;
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    border-top: solid 2px var(--blackish);
    gap: 4vw;

}

.projet-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.h2-projet {
    font-size: 8vw;
    font-weight: 900;
}

@media screen and (max-width: 800px) {

    .vedette-video {
        aspect-ratio: 16/5;
    }

    .projet {
        padding-bottom: 6vw;
        padding-top: 5vw;
        gap: 6vw;
    }

    .projet-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 2vw;
    }

    .h2-projet {
        font-size: 12vw;
        line-height: 1.2;
    }

    .projet-bottom {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1.1fr 1.3fr 2fr 1.3fr 1.1fr 1.1fr 1.1fr;
        grid-template-areas:
            "projet-1 projet-2"
            "projet-4 projet-4"
            "projet-3 projet-3"
            "projet-5 projet-5"
            "projet-7 projet-7"
            "projet-6 projet-6"
            "projet-8 projet-9"
        ;
        gap: 2vw;
    }

}

.projet-bottom {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1.1fr 1.3fr 1.5fr 1.3fr 1.1fr;
    grid-template-areas:
        "projet-1 projet-2 projet-3"
        "projet-4 projet-4 projet-3"
        "projet-5 projet-5 projet-5"
        "projet-6 projet-7 projet-7"
        "projet-6 projet-8 projet-9"
    ;
    gap: 2vw;
}

.projet-1 {
    grid-area: projet-1;
    border-radius: 15px;
    background-image: url(assets/webp/8.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 1/1;
}

.projet-2 {
    grid-area: projet-2;
    border-radius: 15px;
    background-image: url(assets/webp/11.webp);
        background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.projet-3 {
    grid-area: projet-3;
    border-radius: 15px;
    background-image: url(assets/webp/13.webp);
        background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.projet-4 {
    grid-area: projet-4;
    border-radius: 15px;
    background-image: url(assets/webp/12.webp);
        background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.projet-5 {
    grid-area: projet-5;
    border-radius: 15px;
    background-image: url(assets/webp/8.webp);
        background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.projet-6 {
    grid-area: projet-6;
    border-radius: 15px;
    background-image: url(assets/webp/7.webp);
        background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.projet-7 {
    grid-area: projet-7;
    border-radius: 15px;
    background-image: url(assets/webp/17.webp);
        background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.projet-8 {
    grid-area: projet-8;
    border-radius: 15px;
    background-image: url(assets/webp/16.webp);
        background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.projet-9 {
    grid-area: projet-9;
    border-radius: 15px;
    background-image: url(assets/webp/5.webp);
        background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (max-width: 800px) {

    .projet-bottom {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1.1fr 1.3fr 2fr 1.3fr 1.1fr 1.1fr 1.1fr;
        grid-template-areas:
            "projet-1 projet-2"
            "projet-4 projet-4"
            "projet-3 projet-3"
            "projet-5 projet-5"
            "projet-7 projet-7"
            "projet-8 projet-9"
            "projet-6 projet-6"
        ;
        gap: 2vw;
    }

}


footer {
    margin-top: 6vw;
    padding-top: 2vw;
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
}

.footer-top {
    display: flex;
    flex-direction: column;
    gap: 4vw;
}

.footer-top-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    gap: 2vw;
}

.footer-hello {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 2vw;
}




.svg-hand {
    color: var(--blackish);
    width: 100px;
    height: 100px;
}

.footer-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3vw;
}

.footer-bottom {
    width: 100%;
    height: 20vw;
    background-color: var(--blackish);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3vw;
    margin-bottom: 2vw;
}

.footer-bottom-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4vw;
}


.link-icon {
    padding: 1vw;
    background-color: var(--accent);
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease;
}

.link-icon:hover {
    transform: scale(0.95);
    background-color: var(--whitish);
}

.link-icon:hover .svg-link {
    color: var(--blackish);
}

.svg-link {
    color: var(--blackish);
    width: 3vw;
    height: 3vw;
}

.footer-bottom-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4vw;
}

.footer-bottom-link .link-legal {
    color: var(--accent);
    font-size: 1.5vw;
    font-weight: 600;
}

.footer-bottom-link .link-legal:hover {
    color: var(--whitish);
}

.footer-bottom-link p {
    color: var(--accent);
    font-size: 1.3vw;
    font-weight: 600;
}

.footer-bottom-link .link-horizon {
    color: var(--whitish);
    font-size: 1.3vw;
    font-weight: 600;
    text-decoration: underline;
}

.footer-bottom-link .link-horizon:hover {
    opacity: 0.8;
}

@media screen and (max-width: 800px) {
    .footer-top {
        padding-top: 6vw;
        flex-direction: column;
        gap: 10vw;
    }

    .footer-top-left {
        align-items: center;
        gap: 8vw;
    }

    .footer-nav {
        flex-direction: column;
        align-items: center;
        gap: 8vw;
    }

    .footer-bottom {
        height: fit-content;
        width: 100%;
        padding: 8vw 4vw;
        text-align: center;
        gap: 8vw;
    }

    .footer-bottom-icon {
        flex-wrap: wrap;
        gap: 8vw;
    }

    .svg-link {
        width: 7vw;
        height: 7vw;
    }

    .footer-bottom-link {
        flex-direction: column;
        gap: 2vw;
    }

    .footer-bottom-link .link-legal,
    .footer-bottom-link p,
    .footer-bottom-link .link-horizon {
        font-size: 3.5vw;
    }

    .svg-hand {
        width: 60px;
        height: 60px;
    }

    .link-icon {
        padding: 2.5vw;
    }

    .footer-hello h2 {
        font-size: 10vw;
    }
}


.hero-contact {
    display: flex;
    width: 100%;
    height: 40vw;
    gap: 2vw;
    margin-top: 5%;
}

.hero-contact-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
}

.hero-contact-titre {
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.hero-contact-titre h1 {
    font-size: 6.5vw;
}

.hero-contact-titre p {
    font-size: 2vw;
    font-weight: 600;
    text-transform: uppercase;
}

.hero-contact-btn {
    display: flex;
    flex-direction: column;
    gap: 2vw;
}


.hero-contact-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero-contact-img {
    background-image: url(assets/webp/12.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 70%;
    border-radius: 15px;
}

.hero-contact-icon {
    height: 25%;
    border-radius: 15px;
    background-color: var(--blackish);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: 4vw;
}

.contact-msg {
    padding-block: 1rem;
    border-radius: 15px;
    background-color: var(--blackish);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: 4vw;
    gap: 2rem;
    transition: transform 0.3s ease;
}

    

.contact-msg:hover {
    transform: scale(0.90);
}


.contact-whatsapp-msg {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color2);
}



@media screen and (max-width: 800px) {
    .hero-contact {
        flex-direction: column;
        height: auto;
        gap: 12vw;
        margin-top: 10vw;
    }

    .hero-contact-left,
    .hero-contact-right {
        flex: 1;
        width: 100%;

    }

    .hero-contact-right {
        gap: 5vw;
    }

    .hero-contact-left {
        gap: 15vw;
    }

    .hero-contact-titre h1 {
        font-size: 13vw;
        text-align: center;
    }

    .hero-contact-titre p {
        font-size: 6vw;
        text-align: center;
    }

    .hero-contact-btn {
        width: 100%;
        flex-direction: column;
        gap: 5vw;
        text-align: center;
    }

    .hero-contact-img {
        height: auto;
        aspect-ratio: 4/3;
        object-fit: cover;
    }

    .hero-contact-icon {

        gap: 4vw;
        height: auto;
        padding: 6vw;
    }
    .contact-msg {
        align-self: stretch;
        padding-inline: none;
    }
}

.contact-pub {
    margin-top: 6vw;
    padding-top: 2vw;
    width: 100%;
    border-top: solid 2px var(--blackish);
    display: flex;
    flex-direction: column;
    gap: 4vw;
}

.contact-form {
    margin-top: 6vw;
    padding-top: 2vw;
    width: 100%;
    border-top: solid 2px var(--blackish);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2vw;
}

.contact-form-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5vw;
}

.contact-form-block h2,
.contact-form-block p {
    text-align: center;
    line-height: 100%;
}

.contact-form-img {
    flex: 1;
    width: 50%;
    height: 50%;
    border-radius: 15px;
    aspect-ratio: 1/1;
    background-image: url(assets/webp/1.webp);
    background-position:center ;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (max-width: 800px) {
    .contact-pub h2 {
        font-size: 10vw;
        padding-top: 6vw;
    }

    .contact-form {
        flex-direction: column-reverse;
        align-items: center;
        gap: 6vw;
    }

    .contact-form-block {
        width: 100%;
        padding: 0 4vw;
        gap: 7.5vw;
    }

    .contact-form-block h2 {
        font-size: 10vw;
        padding-top: 6vw;

    }

    .contact-form-block p {
        font-size: 4vw;
    }

    .contact-form-img {
        width: 90%;
        height: auto;
        object-fit: cover;
    }


}

.hero-photo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: fit-content;
    gap: 6vw;
    margin-top: 7%;
}

.hero-photo-left {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.hero-h1 {
    display: flex;
    flex-direction: column;
    line-height: 110%;
}

.hero-h1 span {
    font-size: 16vw;
}

.span-h1 {
    color: var(--whitish);
    z-index: 5;
}

.hero-photo-right {
    flex: 1;
    width: 100%;
    display: flex;
    gap: 2vw;
}

.hero-photo-right-img {
    width: 50%;
    height: 50%;
    background-image: url(assets/webp/10.webp);
    aspect-ratio: 1/1;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
    border-radius: 15px;
}

.hero-photo-right-img2 {
    width: 50%;
    height: 50%;
    background-image: url(assets/webp/3.webp);
    aspect-ratio: 1/1;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
    border-radius: 15px;
}

.hero-photo-right-video {
    width: 50%;
    height: 80%;
    background-image: url(assets/vidéo/yanisfinale.mp4);
    aspect-ratio: 16/9;
    background-position: center;
    background-repeat: repeat;
    border-radius: 15px;
}


.vedette-photo {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2vw;
}

.vedette-photo-1 {
    flex: 1;
    width: 100%;
    background-image: url(assets/webp/2.webp);
    aspect-ratio: 1/1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px;
}

.vedette-photo-2 {
    flex: 1;
    width: 100%;
    background-image: url(assets/webp/3.webp);
    aspect-ratio: 1/1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px;
}

.vedette-photo-3 {
    flex: 1;
    width: 100%;
    background-image: url(assets/webp/4.webp);
    aspect-ratio: 1/1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px;
}

.a-bottom {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1.1fr 1.3fr;
    grid-template-areas:
        "a-1 a-2 a-3"
        "a-4 a-4 a-3"
    ;
    gap: 2vw;
}


.a-1 {
    grid-area: a-1;
    border-radius: 15px;
    background-image: url(assets/webp/7.webp);
        background-position: center;
    background-repeat: repeat;
    background-size: cover;
    aspect-ratio: 1/1;
}

.a-2 {
    grid-area: a-2;
    border-radius: 15px;
background-image: url(assets/webp/8.webp);  
      background-position: center;
    background-repeat: repeat;
    background-size: cover;
}

.a-3 {
    grid-area: a-3;
    border-radius: 15px;
background-image: url(assets/webp/9.webp);  
   background-position: center;
    background-repeat: repeat;
    background-size: cover;
}

.a-4 {
    grid-area: a-4;
    border-radius: 15px;
background-image: url(assets/webp/11.webp);        background-position: center;
    background-repeat: repeat;
    background-size: cover;
}

@media (max-width: 800px) {
    .a-bottom {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1.1fr 3fr 1.5fr;
        grid-template-areas:
            "a-1 a-2"
            "a-3 a-3"
            "a-4 a-4"
        ;
        gap: 3vw;
    }
}

.b-bottom {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1.1fr 1.3fr 1.7fr;
    grid-template-areas:
        "b-1 b-2 b-3"
        "b-1 b-2 b-3"
        "b-4 b-4 b-4"
    ;
    gap: 2vw;
}


.b-1 {
    grid-area: b-1;
    border-radius: 15px;
background-image: url(assets/webp/14.webp);        background-position: center;
    background-repeat: repeat;
    background-size: cover;
    aspect-ratio: 2/3;
}

.b-2 {
    grid-area: b-2;
    border-radius: 15px;
background-image: url(assets/webp/15.webp);        background-position: center;
    background-repeat: repeat;
    background-size: cover;
}

.b-3 {
    grid-area: b-3;
    border-radius: 15px;
background-image: url(assets/webp/5.webp);        background-position: center;
    background-repeat: repeat;
    background-size: cover;
}

.b-4 {
    grid-area: b-4;
    border-radius: 15px;
background-image: url(assets/webp/17.webp);        background-position: center;
    background-repeat: repeat;
    background-size: cover;
}

@media (max-width: 800px) {
    .b-bottom {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1.1fr 2.5fr 1.5fr;
        grid-template-areas:
            "b-1 b-2"
            "b-3 b-3"
            "b-4 b-4"
        ;
        gap: 3vw;
    }
}


.prix {
    margin-top: 6vw;
    padding-top: 2vw;
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top: solid 2px var(--blackish);
    gap: 4vw;

}

.wrap-prix {
    width: 90%;
    height: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2vw;
}

.card-prix {
    flex: 1;
    border: solid 2px var(--blackish);
    padding: 2vw;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 2vw;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.06),
        /* petite ombre douce */
        0 8px 20px rgba(0, 0, 0, 0.08);
    /* ombre plus large mais subtile */
}

.card-prix-big {
    flex: 1.2;
    border: solid 2px var(--blackish);
    padding: 2vw;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 2vw;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.06),
        /* petite ombre douce */
        0 8px 20px rgba(0, 0, 0, 0.08);
    background-color: var(--blackish);
    color: var(--accent);
}


.card-prix h3 {
    border-bottom: solid 1px var(--blackish);
    padding-bottom: 1vw;
}

.card-prix-big h3 {
    border-bottom: solid 1px var(--accent);
    padding-bottom: 1vw;
}


.prix-group {
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
}

.prix-chiffre {
    font-size: 3vw;
    font-weight: 900;
}



.prix-liste {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}


.prix-liste-item {
    display: flex;
    align-items: center;
    gap: 1vw;
}

.svg-prix {
    width: 24px;
    height: 24px;
    color: var(--blackish);
}

.svg-prix-big {
    width: 24px;
    height: 24px;
    color: var(--accent);
}

.clic {
    margin-top: 1vw;
    border-radius: 15px;
    width: 100%;
    padding: 1.5vw 0;
    color: var(--accent) !important;
    background-color: var(--blackish);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5vw;
    font-weight: 600;
    transition: transform 0.3s ease;
}

.clic:hover {
    transform: scale(0.95);
}

.clic-2 {
    margin-top: 1vw;
    border-radius: 15px;
    width: 100%;
    padding: 1.5vw 0;
    color: var(--blackish) !important;
    background-color: var(--accent);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5vw;
    font-weight: 600;
    transition: transform 0.3s ease;
}

.clic-2:hover {
    transform: scale(0.95);
}

/* -------- TABLETTE (max-width: 1024px) -------- */
@media (max-width: 800px) {
    .wrap-prix {
        flex-direction: column;
        align-items: stretch;
    }

    .card-prix,
    .card-prix-big {
        width: 100%;
        flex: unset;
        padding: 4vw;
        font-size: 1.5rem;
    }

    .prix-chiffre {
        font-size: 6vw;
    }

    .clic,
    .clic-2 {
        font-size: 4vw;
        padding: 2vw 0;
    }

    .prix h2 {
        font-size: 15vw;
    }

    .nav-links {
        display: none;
    }
}


/* -------- TÉLÉPHONE (max-width: 768px) -------- */
@media (max-width: 600px) {

    .prix {
        margin-bottom: 10vw;
    }

    .wrap-prix {
        flex-direction: column;
        gap: 6vw;
    }

    .card-prix,
    .card-prix-big {
        padding: 6vw;
        gap: 8vw;
    }

    .prix-chiffre {
        font-size: 15vw;
    }

    .prix-détails {
        font-size: 5vw;
    }

    .prix-liste-item {
        gap: 2vw;
    }

    .prix-liste-item p {
        font-size: 6vw;
    }

    .svg-prix,
    .svg-prix-big {
        width: 20px;
        height: 20px;
    }

    .clic {
        font-size: 6vw;
        padding: 5vw 0;
    }

    .clic-2 {
        font-size: 6vw;
        padding: 5vw 0;
    }

    .card-prix h3 {
        padding-bottom: 2vw;
    }

    .card-prix-big h3 {
        padding-bottom: 2vw;
    }



}

.vedette-video {
    width: 100%;
    aspect-ratio: 16 / 7;
    /* ou 16 / 7 selon ton design */
    overflow: hidden;
    border-radius: 15px;
    position: relative;
}


.vedette-video-1 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-controls {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 10px;
    z-index: 5;
}

.video-btn {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.video-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.acceuil-video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 7;
    /* ou 16 / 7 selon ton design */
    overflow: hidden;
    border-radius: 15px;
    position: relative;
}

.acceuil-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.story-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2vw;
    flex-wrap: wrap;
    width: 100%;
}

.story-wrapper {
    flex: 1;
    position: relative;
    aspect-ratio: 9 / 12;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    background-color: #000;
}

.story-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.controls {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 10px;
}

.controls button {
    background-color: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.controls button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Responsive */
@media (max-width: 800px) {
    .story-wrapper {
        width: 40vw;
    }

    .hero-photo {

        width: 100%;
        justify-content: center;
        flex-direction: column-reverse;
        gap: 15vw;
        padding-block: 10vw;
    }

    .ajust {
        margin-top: -2vw;
    }

    .hero-photo-left {
        width: 100%;
        justify-content: center;
        flex-direction: column;
    }

    .hero-h1 {
        line-height: 100%;
        text-align: center;
    }

    .hero-h1 span {
        font-size: 30vw;
    }

    .span-h1 {
        font-size: 30vw;
    }

    .vedette-video,
    .acceuil-video-wrapper {
        aspect-ratio: 16/10;
    }

    .vedette-photo {
        flex-direction: column;
        gap: 4vw;
    }

    header .menu-burger {
        display: inline;
    }


}

@media (max-width: 600px) {
    .story-wrapper {
        width: 90vw;

    }

    .story-section {
        flex-direction: column;
        justify-content: center;
        gap: 5vw;
    }
}

.scroll-anim {
    opacity: 0;
    transform: scale(0.8);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
    will-change: transform, opacity;
}

/* Bloc 1 */
.anim-1.active {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.1s;
}

/* Bloc 2 avec scale plus petit */
.anim-2.active {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.2s;
}

/* Bloc 3 avec un scale plus grand */
.anim-3.active {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.3s;
}





























.mob-navbar {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background-color: var(--bg-color3);
    padding-block: 1rem;
    padding-inline: calc(calc(100% - var(--automatic-container)) / 2);
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: 100vw;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s ease;
    z-index: 1000;
}

.arrow-icon {
    transform: rotate(90deg);
}

.the-icon {
    width: 24px;
    height: 24px;
}

.menu-burger {
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 12;
    top: 1%;
    right: 1rem;
    display: none;
}

.mobile-nav-links {
    display: grid;
    row-gap: 0.75rem;
    height: 100%;
}

.nav-link-card {
    display: flex;
    justify-content: space-between;
    min-width: 300px;

    padding: 1rem;
    border: none;
    outline: 2px solid var(--bg-color2);
    border-radius: 1rem;
}

.nav-link-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.nav-link-text mark {
    background-color: transparent;
    color: var(--color1);
}

.nav-link-text span {
    font-size: 2.5rem;
    font-weight: 600;
}

.nav-link-icon {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.nav-link-card-inactive {
    position: relative;
    background-color: var(--bg-color2);
    outline: 2px solid var(--bg-color2);
    color: var(--bg-color1);
    border: none;
    padding: 1rem;
    border-radius: 1rem;
}

.nav-link-card-inactive mark {
    background-color: transparent;
    color: var(--color2);
}

.close-icon {
    position: absolute;
    background-color: var(--bg-color1);
    padding: 0.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    transform: rotate(45deg);
    top: 10%;
    right: 5%;
}



.mob-navbar.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}


.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 1.25rem;
}

.mobile-nav-header .logo img {
    width: 30px;
    height: 30px;
}


/* --- BURGER --- */
.burger {display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    z-index: 1002;
}

.burger span {
    width: 27px;
    height: 3px;
    background: var(--color1);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.burger span:nth-child(1) {
    transform: rotate(45deg) translateY(10px);
}


.burger span:nth-child(2) {
    transform: rotate(-45deg) translateY(-10px);
}


.hb-background{
    margin-top: 10%;
    display: flex;
    padding-left: 5%;
    justify-content: start;
    align-items: center;
    width: 100%;
    background-image: url(assets/hono.png);
    aspect-ratio: 16/7;
    border-radius: 15px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hb-h1{
    color: var(--whitish);
}

@media (max-width: 450px) {
.hb-h1{
    font-size: 5vw;
}

.hb-background{
    aspect-ratio: 16/11;

}
}