.hero-section {
    background-image: url('../../assets/img/hero-bg.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top right;
    color: var(--white);
    text-align: center;
    padding-top: 5em;
    padding-bottom: 5em;
}

.hero-section__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto; /* centrer horizontalement */
    text-align: center;
}

    .hero-section__content .highlight {
        position: relative;
        display: inline-block;
    }

        .hero-section__content .highlight::after {
            content: "";
            position: absolute;
            top: 80%;
            left: 0;
            width: 100%;
            height: var(--base-space-5);
            background-repeat: no-repeat;
            background-size: contain;
            transform: rotate(-2deg);
        }


        .hero-section__content .highlight:first-child::after {
            background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjc3IDE0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAuMDcwNTU4MSAzLjUzMjNDMC4wMzE1ODk5IDIuMzk3MDEgMC45MjAzMyAxLjQ0NTA5IDIuMDU1NjIgMS40MDYxM0M0MC40NzMxIDAuMDg3NDYzMyA3OC44ODY5IDAuNzY0NjA4IDExNy4yNTYgMS40NDA5N0MxMzguNTU2IDEuODE2NDQgMTU5Ljg0MyAyLjE5MTY3IDE4MS4xMDkgMi4yMjUwOEMxOTEuMDI5IDIuMjQwNjYgMjAwLjk0NCAyLjA5NjE0IDIxMC44NjEgMS44MDI4NEwyMTIuMjk1IDEuNzUzNjJDMjE0LjI0NCAxLjY4NjcxIDIxNS40ODEgMS42NDU5IDIxNi4xNTMgMS42MjQ5NEMyMTYuNDgyIDEuNjE0NjYgMjE2LjY5IDEuNjA4NjggMjE2Ljc3NSAxLjYwNzA5QzIxNi43ODcgMS42MDY4OCAyMTYuODAzIDEuNjA2NjEgMjE2LjgyIDEuNjA2NDlDMjE2LjgyOCAxLjYwNjQ0IDIxNi44NDMgMS42MDYzNyAyMTYuODYxIDEuNjA2NTVDMjE2Ljg3IDEuNjA2NjQgMjE2Ljg4NSAxLjYwNjg0IDIxNi45MDMgMS42MDc0QzIxNi45MTYgMS42MDc3OCAyMTYuOTU4IDEuNjA5MDQgMjE3LjAxMSAxLjYxMzM4QzIxNy4wNDEgMS42MTYwNiAyMTcuMTIgMS42MjUzMiAyMTcuMTcgMS42MzI2OUMyMTcuMjY4IDEuNjUwOTMgMjE3LjYzIDEuNzYyNzUgMjE3Ljg3OSAxLjg4NjU0QzIxOC42OTIgMi43NjE1NSAyMTguNTQ1IDQuODE5NDYgMjE3Ljg1MiA1LjQ1NjNDMjE3LjY1NSA1LjU1MzU5IDIxNy4zNjYgNS42NTI3OSAyMTcuMjgzIDUuNjcyODNDMjE3LjE3NyA1LjY5NjA4IDIxNy4wODkgNS43MDU3NSAyMTcuMDc3IDUuNzA3MDhMMjE3LjA3NiA1LjcwNzIxQzIxNy4wNDggNS43MTAzNyAyMTcuMDI2IDUuNzEyMzEgMjE3LjAxNSA1LjcxMzIzQzIxNi45OCA1LjcxNjI1IDIxNi45NDkgNS43MTc5NCAyMTYuOTQxIDUuNzE4MzZMMjE2Ljk0IDUuNzE4NDFDMjE2Ljg5NyA1LjcyMDc1IDIxNi44MjggNS43MjM2MyAyMTYuNzUzIDUuNzI2NjNDMjE2LjEwOSA1Ljc1MjA5IDIxMy43OTUgNS44MzE0OCAyMTAuOTkyIDUuOTE0NDFMMTUwLjE1OCA4LjAwMjUxQzE1NS4wMTkgOC4wODIxNSAxNTkuODc5IDguMTY2MiAxNjQuNzM4IDguMjUwMjNMMTY0Ljc1NyA4LjI1MDU1QzIwMS4zOTkgOC44ODQyNCAyMzcuOTc3IDkuNTE2NDkgMjc0LjU5IDguMjU5NzhDMjc1LjcyNSA4LjIyMDgxIDI3Ni42NzcgOS4xMDk1NiAyNzYuNzE2IDEwLjI0NDhDMjc2Ljc1NSAxMS4zODAxIDI3NS44NjYgMTIuMzMyIDI3NC43MzEgMTIuMzcxQzIzOC4wMDYgMTMuNjMxNiAyMDEuMzMzIDEyLjk5NzQgMTY0LjcyIDEyLjM2NDJMMTY0LjY4NiAxMi4zNjM2QzEyOC4wNDQgMTEuNzI5OSA5MS40NjA2IDExLjA5NzggNTQuODM4MiAxMi4zNTQ5QzUzLjA0NTEgMTIuNDE2NCA1MS43ODM2IDEyLjM5NjEgNTEuMDIzNSAxMi4yODNDNTAuODI4NSAxMi4yNTQgNTAuNTcyNSAxMi4yMDYxIDUwLjMxNTIgMTIuMTEzOUM1MC4xODYyIDEyLjA2NzYgNDkuOTkxMiAxMS45ODc0IDQ5Ljc4NDEgMTEuODVDNDkuNTkwNSAxMS43MjE1IDQ5LjI0NjIgMTEuNDUwOCA0OS4wMTkzIDEwLjk3MjhDNDguNzU2MSAxMC40MTgyIDQ4Ljc1OTYgOS44MTMzNSA0OC45NTc3IDkuMzAxMDFDNDkuMTI3MSA4Ljg2Mjg4IDQ5LjM5ODggOC41ODc2MyA0OS41NTAyIDguNDUzM0M0OS44NDY2IDguMTkwMzggNTAuMTYzMyA4LjA0OTg2IDUwLjMwODUgNy45ODg3NUM1MC45MjQ4IDcuNzI5NTMgNTEuODc1NiA3LjU0MjUgNTIuNzg2IDcuNDEwMDFDNTMuNzcxIDcuMjY2NjYgNTQuOTUyNCA3LjE1NDMzIDU2LjE1OSA3LjExMjkxTDEwNi44MzMgNS4zNzM1NUM3MS45NTI5IDQuNzcyMjEgMzcuMTI0NSA0LjMxODQ4IDIuMTk2NzMgNS41MTczNkMxLjA2MTQ1IDUuNTU2MzMgMC4xMDk1MjYgNC42Njc1OSAwLjA3MDU1ODEgMy41MzIzWiIgZmlsbD0iI0ZGRDkxQyIvPgo8L3N2Zz4K);
        }

        .hero-section__content .highlight:nth-child(2)::after {
            background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjM0IDE0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAuNDcyMTY4IDIuMDU2ODNDMC40NzIxNjggMC45MjA4NzIgMS4zOTMwNCAwIDIuNTI4OTkgMEMzNy40OTU5IDAgNzIuNDU4NSAwLjI3MDAyOCAxMDcuNDEyIDAuNTM5OTg1TDEwNy40MTYgMC41NDAwMTlDMTQyLjM3NCAwLjgxMDAwOCAxNzcuMzIyIDEuMDc5OTIgMjEyLjI3MyAxLjA3OTkySDIyMS45ODlDMjIxLjk4OSAxLjA3OTkyIDIyMS45ODkgMS4wODEyIDIyMS45ODkgMS4wODM3NEMyMjEuOTg5IDEuMTQ3NTIgMjIxLjk4OSAyLjAwMTQxIDIyMS45ODkgMy4xMzY3NEMyMjEuOTg5IDMuNzYzNzkgMjIxLjk4OSA0LjQ3NjY5IDIyMS45ODkgNS4xODk3NEMyMjEuOTg5IDUuMTkxMDIgMjIxLjk4OSA1LjE5MjI5IDIyMS45ODkgNS4xOTM1N0g0OC4zMzM4QzEwOS4yOTkgOC40NTcyNyAxNzAuMzk2IDkuNzE5MjQgMjMxLjQ3MSA5LjcxOTI0QzIzMi42MDcgOS43MTkyNCAyMzMuNTI4IDEwLjY0MDEgMjMzLjUyOCAxMS43NzYxQzIzMy41MjggMTIuOTEyIDIzMi42MDcgMTMuODMyOSAyMzEuNDcxIDEzLjgzMjlDMTY1LjE3NyAxMy44MzI5IDk4LjgzMzcgMTIuMzQ3NCAzMi42NDUxIDguNDI5NzJDMzEuNjAxOSA4LjM2Nzk3IDMwLjIzNjEgOC4yOTgyMyAyOC42OTE1IDguMjE5MzZDMjUuMDMwNyA4LjAzMjQzIDIwLjM2NSA3Ljc5NDE4IDE2LjYwNTMgNy40ODkzNEMxMy45ODU4IDcuMjc2OTYgMTEuNTgwMSA3LjAxNzQ0IDEwLjI1OTMgNi42NzE4OUM5Ljk0MzQ0IDYuNTg5MjYgOS40OTY4MiA2LjQ1NTM0IDkuMTAzNTEgNi4yMTk0MkM4LjkxNzc3IDYuMTA4IDguNTM5MjQgNS44NTU3MiA4LjI2MjEyIDUuMzkyNzhDOC4wMzcyOCA1LjAxNzE5IDcuOTIyOTkgNC41NzExOCA3Ljk1NDQ4IDQuMTE1NzhDNi4xNDU5OSA0LjExNDM4IDQuMzM3NDkgNC4xMTM2NSAyLjUyODk5IDQuMTEzNjVDMS4zOTMwNCA0LjExMzY1IDAuNDcyMTY4IDMuMTkyNzggMC40NzIxNjggMi4wNTY4M1oiIGZpbGw9IiNGRkQ5MUMiLz4KPC9zdmc+Cg==);
        }

.hero-section h1 {
}

.hero-section__content h2 {
    font-family: 'Poppins-Medium';
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: 500;
}

.hero-section .btn-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 2em;
    padding-bottom: 2em;
    align-items: center;
    width: 100%;
}
    .hero-section .btn-wrapper .btn {
        width: 90%; /* full width on mobile with padding */
        text-align: center;
    }

.hero-section .p-catchPhrase {
    padding-top: 2em;
    padding-bottom: 2em;
}

@media (min-width: 768px) {
    .hero-section .btn-wrapper {
        flex-direction: row;
        justify-content: center;
    }


        .hero-section .btn-wrapper .btn {
            width: auto; /* ← Fixe le problème sur desktop */
            min-width: 200px; /* Optionnel pour garder une largeur lisible */
        }

    .hero-section .m-button {
        position: relative;
    }

    .hero-section .m-button--primary::after,
    .hero-section .m-button--secondary::after {
        content: '';
        position: absolute;
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
    }

    .hero-section .m-button--primary::after {
        right: 110%;
        top: -16px;
        width: 100px;
        height: 80px;
        transform: rotate(-6deg);
        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTE0IiBoZWlnaHQ9IjUzIiB2aWV3Qm94PSIwIDAgMTE0IDUzIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExMy41NzUgMjkuMTc0M0MxMTMuOTE3IDMwLjc5NTMgMTEyLjg4MSAzMi4zODcyIDExMS4yNiAzMi43Mjk3TDg0Ljg0MzIgMzguMzExNkM4My4yMjIxIDM4LjY1NDIgODEuNjMwMyAzNy42MTc3IDgxLjI4NzggMzUuOTk2N0M4MC45NDUyIDM0LjM3NTYgODEuOTgxNyAzMi43ODM4IDgzLjYwMjcgMzIuNDQxM0wxMDIuNTY5IDI4LjQzMzdDMTAyLjIxMSAyOC4yMjg1IDEwMS44NCAyOC4wMTc0IDEwMS40NTcgMjcuODAxMUM5Ni43MzM4IDI1LjEzMjggOTAuMTc5MSAyMS42Nzg2IDgyLjgzNjcgMTguNTIwNEM3NS40ODExIDE1LjM1NjUgNjcuNDE3OSAxMi41MjU5IDU5LjY2MzggMTEuMDU2QzUxLjg2OTMgOS41Nzg0IDQ0LjY3MTEgOS41MzEwMSAzOC44Njk4IDExLjYyOTZDMjkuNjQ2NSAxNC45NjYgMjIuNzY2MiAxOS4yMjIyIDE3LjU4NTIgMjUuMjMyOEMxMi4zOTU2IDMxLjI1MzEgOC43MTEzOCAzOS4yNjUxIDYuMjgwOCA1MC40NDU3QzUuOTI4ODMgNTIuMDY0NyA0LjMzMTAxIDUzLjA5MTkgMi43MTE5NyA1Mi43Mzk5QzEuMDkyOTQgNTIuMzg3OSAwLjA2NTc3MjMgNTAuNzkwMSAwLjQxNzc0MSA0OS4xNzExQzIuOTg3MTcgMzcuMzUxOCA3LjAwNDM1IDI4LjMxNzkgMTMuMDQwNSAyMS4zMTUzQzE5LjA4NTIgMTQuMzAzIDI2Ljk1NDkgOS41NTkxNiAzNi44Mjg4IDUuOTg3NEM0NC4wNjQyIDMuMzcwMDQgNTIuNDgzMyAzLjU4NzkzIDYwLjc4MTMgNS4xNjA5N0M2OS4xMTk4IDYuNzQxNjkgNzcuNjI0NyA5Ljc0NzA2IDg1LjIwNzUgMTMuMDA4N0M5Mi44MDM1IDE2LjI3NiA5OS41NTc1IDE5LjgzNjggMTA0LjQwOCAyMi41NzcxQzEwNS4wNjUgMjIuOTQ4MyAxMDUuNjg4IDIzLjMwNDcgMTA2LjI3NCAyMy42NDM2TDEwMi4xMjMgMy45OTgwMkMxMDEuNzggMi4zNzY5NiAxMDIuODE2IDAuNzg1MTU0IDEwNC40MzcgMC40NDI2MTdDMTA2LjA1OSAwLjEwMDA4IDEwNy42NSAxLjEzNjUzIDEwNy45OTMgMi43NTc1OUwxMTMuNTc1IDI5LjE3NDNaIiBmaWxsPSIjRkZEOTFDIi8+Cjwvc3ZnPgo=);
    }

    .hero-section .m-button--secondary::after {
        left: 120%;
        top: 30px;
        width: 100px;
        height: 100px;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA2IiBoZWlnaHQ9Ijk3IiB2aWV3Qm94PSIwIDAgMTA2IDk3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEyLjcyNyAzLjE3NDc0QzEyLjg1NSAxLjUyMjg0IDE0LjI5NzkgMC4yODc0NzkgMTUuOTQ5OCAwLjQxNTQ4NkM0NC44NTE0IDIuNjU1MSA3My42OTk4IDQuNjA0MjggMTAyLjYyNiA1LjYwMTczQzEwNC4yODIgNS42NTg4MyAxMDUuNTc4IDcuMDQ3NDcgMTA1LjUyMSA4LjcwMzM0QzEwNS40NjQgMTAuMzU5MiAxMDQuMDc1IDExLjY1NTMgMTAyLjQxOSAxMS41OTgyQzczLjM2NzMgMTAuNTk2NCA0NC40MjEgOC42Mzk3MyAxNS40ODYyIDYuMzk3NTVDMTMuODM0MyA2LjI2OTU1IDEyLjU5ODkgNC44MjY2NCAxMi43MjcgMy4xNzQ3NFpNMTIuNzY3MiAzNi4yNTE0QzEzLjA2NjMgMzQuNjIxNyAxNC42Mjk4IDMzLjU0MzEgMTYuMjU5NCAzMy44NDIxQzM1LjM2ODYgMzcuMzQ4MyA1NC4zNTM3IDQxLjYzMDQgNzMuMjU2NCA0NS44OTM4Qzc4LjUzNiA0Ny4wODQ2IDgzLjgwOTEgNDguMjczOSA4OS4wNzY4IDQ5LjQ0NDVDOTAuNjk0MiA0OS44MDQgOTEuNzE0IDUxLjQwNjUgOTEuMzU0NSA1My4wMjM5QzkwLjk5NTEgNTQuNjQxMyA4OS4zOTI2IDU1LjY2MTEgODcuNzc1MiA1NS4zMDE3QzgyLjQ2NzYgNTQuMTIyMiA3Ny4xNjkgNTIuOTI3MiA3MS44NzQ3IDUxLjczMzFMNzEuODcyOSA1MS43MzI3TDcxLjg2NzYgNTEuNzMxNUM1Mi45ODMzIDQ3LjQ3MjQgMzQuMTU0NiA0My4yMjU3IDE1LjE3NjYgMzkuNzQzNUMxMy41NDY5IDM5LjQ0NDUgMTIuNDY4MiAzNy44ODEgMTIuNzY3MiAzNi4yNTE0Wk01LjYxMTY2IDQ5LjI0MDVDNC43MDExIDQ3Ljg1NjMgMi44NDA4MiA0Ny40NzIzIDEuNDU2NiA0OC4zODI5QzAuMDcyMzg4OCA0OS4yOTM1IC0wLjMxMTU4NCA1MS4xNTM3IDAuNTk4OTc2IDUyLjUzOEMzLjM0NTIxIDU2LjcxMjcgNi4wNTY5NyA2MS4xMDUzIDguODEwMjggNjUuNTY1MUw4LjgxMDM0IDY1LjU2NTJDMTUuMDMzMyA3NS42NDUyIDIxLjQ2ODUgODYuMDY5IDI4Ljk5MzUgOTUuMDk5MUMzMC4wNTQyIDk2LjM3MiAzMS45NDU5IDk2LjU0MzkgMzMuMjE4OCA5NS40ODMzQzM0LjQ5MTYgOTQuNDIyNiAzNC42NjM2IDkyLjUzMDkgMzMuNjAyOSA5MS4yNThDMjYuMzU1NyA4Mi41NjE1IDIwLjMwMzUgNzIuNzUzMyAxNC4xOTYxIDYyLjg1NTdDMTEuMzg2OSA1OC4zMDMxIDguNTY1OTMgNTMuNzMxNiA1LjYxMTY2IDQ5LjI0MDVaIiBmaWxsPSIjRkZEOTFDIi8+Cjwvc3ZnPgo=);
    }

   
    .hero-section__content h2 {
        padding-top: 2em;
        padding-bottom: 2em;
    }

    .hero-section__content {
        max-width: 90%; /* optionnel : pour ne pas dépasser une taille raisonnable */
    }
}
@media (max-width: 767.98px) {
    .hero-section .btn-wrapper {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 1rem; /* spacing between buttons */
    }

        .hero-section .btn-wrapper .btn {
            margin: 0 auto;
            text-align: center;
        }
    .hero-section__content h2 {
        display:none;
    }
    .hero-section .p-catchPhrase {
        display: none;
    }
}

@media (min-width: 1400px) {
    .hero-section__content {
        max-width: 1120px; /* optionnel : pour ne pas dépasser une taille raisonnable */
    }
}

@media (max-width: 992px) {

}