/* =========================================================
   LPROJECT WEB — RÉALISATIONS
========================================================= */


/* =========================================================
   RESET ASTRA
========================================================= */

body.page-template-page-realisations #content,
body.page-template-page-realisations .site-content,
body.page-template-page-realisations .content-area,
body.page-template-page-realisations .site-main,
body.page-template-page-realisations article,
body.page-template-page-realisations .entry-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #08080a !important;
}


/* =========================================================
   PAGE
========================================================= */

.lp-rp-page {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    background: #08080a;
    color: #fff;
}


/* =========================================================
   FOND
========================================================= */

.lp-rp-grid {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.022) 1px,
            transparent 1px
        );

    background-size: 70px 70px;
}


.lp-rp-glow {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none;
}


.lp-rp-glow-1 {
    width: 650px;
    height: 650px;
    top: 120px;
    left: -360px;
    background: rgba(255,106,0,.10);
}


.lp-rp-glow-2 {
    width: 500px;
    height: 500px;
    top: 1700px;
    right: -280px;
    background: rgba(255,106,0,.06);
}


/* =========================================================
   CONTENEUR
========================================================= */

.lp-rp-inner {
    position: relative;
    z-index: 2;

    width: min(
        1380px,
        calc(100% - 72px)
    );

    margin: 0 auto;
}


/* =========================================================
   LABEL
========================================================= */

.lp-rp-label {
    display: flex;
    align-items: center;
    gap: 14px;

    color: #ff6a00;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .24em;
    text-transform: uppercase;
}


.lp-rp-label > span {
    width: 32px;
    height: 1px;
    background: #ff6a00;
}


/* =========================================================
   HERO
========================================================= */

.lp-rp-hero {
    position: relative;
    padding: 170px 0 180px;
}


.lp-rp-hero > .lp-rp-inner {
    min-height: 650px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 80px;
}


.lp-rp-hero-copy {
    position: relative;
    z-index: 3;
}


.lp-rp-hero-copy h1 {
    margin: 28px 0 0;

    color: #f6f6f7 !important;

    font-size: clamp(
        68px,
        8vw,
        132px
    );

    font-weight: 650;

    line-height: .82;
    letter-spacing: -.075em;

    text-transform: uppercase;
}


.lp-rp-hero-copy h1 strong {
    color: #ff6a00;
    font-weight: inherit;
}


.lp-rp-muted {
    color: #55555b;
}


.lp-rp-hero-copy > p {
    max-width: 570px;
    margin: 38px 0 0;

    color: #98989e;

    font-size: 17px;
    line-height: 1.75;
}


.lp-rp-scroll-hint {
    margin-top: 45px;

    display: flex;
    align-items: center;
    gap: 16px;

    color: #66666c;

    font-family: monospace;
    font-size: 9px;

    letter-spacing: .2em;
}


.lp-rp-scroll-line {
    width: 1px;
    height: 52px;

    background:
        linear-gradient(
            #ff6a00,
            transparent
        );
}


/* =========================================================
   COMPTEUR HERO
========================================================= */

.lp-rp-hero-count {
    position: relative;

    min-width: 260px;

    text-align: right;
}


.lp-rp-hero-count strong {
    display: block;

    color: rgba(255,255,255,.025);

    font-size: clamp(
        180px,
        22vw,
        360px
    );

    font-weight: 800;

    line-height: .7;
    letter-spacing: -.12em;
}


.lp-rp-hero-count span {
    display: block;

    margin-top: 25px;

    color: #55555b;

    font-family: monospace;
    font-size: 9px;

    letter-spacing: .25em;
}


/* =========================================================
   PROJET
========================================================= */

.lp-rp-project {
    position: relative;

    padding:
        120px 0
        160px;

    border-top:
        1px solid
        rgba(255,255,255,.07);
}


/* gros nom arrière-plan */

.lp-rp-project-ghost {
    position: absolute;

    z-index: 0;

    top: 160px;
    left: 2%;

    max-width: 96%;

    overflow: hidden;

    color:
        rgba(255,255,255,.018);

    font-size:
        clamp(
            110px,
            17vw,
            270px
        );

    font-weight: 800;

    line-height: .75;

    letter-spacing: -.09em;

    white-space: nowrap;

    pointer-events: none;

    transition:
        transform .7s ease,
        color .7s ease;
}


.lp-rp-project:hover
.lp-rp-project-ghost {
    transform:
        translateX(20px);

    color:
        rgba(255,106,0,.025);
}


/* =========================================================
   META HAUT
========================================================= */

.lp-rp-project-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 65px;

    color: #5e5e64;

    font-family: monospace;
    font-size: 9px;

    letter-spacing: .18em;
}


/* =========================================================
   LAYOUT PROJET
========================================================= */

.lp-rp-project-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(330px, .65fr);

    align-items: center;

    gap: 85px;
}


.lp-rp-project-reverse
.lp-rp-project-layout {
    grid-template-columns:
        minmax(330px, .65fr)
        minmax(0, 1.35fr);
}


.lp-rp-project-reverse
.lp-rp-preview {
    grid-column: 2;
    grid-row: 1;
}


.lp-rp-project-reverse
.lp-rp-project-info {
    grid-column: 1;
    grid-row: 1;
}


/* =========================================================
   PREVIEW
========================================================= */

.lp-rp-preview {
    position: relative;

    min-width: 0;

    padding:
        25px
        70px
        55px
        0;

    perspective: 1500px;
}


/* =========================================================
   DESKTOP
========================================================= */

.lp-rp-desktop {
    position: relative;

    width: 100%;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius: 15px;

    background: #0d0d10;

    box-shadow:
        0 50px 110px
        rgba(0,0,0,.42);

    transform:
        rotateY(-6deg)
        rotateX(1.5deg);

    transform-origin:
        center center;

    transition:
        transform .55s
        cubic-bezier(.2,.8,.2,1),
        border-color .4s ease,
        box-shadow .4s ease;
}


.lp-rp-project-reverse
.lp-rp-desktop {
    transform:
        rotateY(6deg)
        rotateX(1.5deg);
}


.lp-rp-project:hover
.lp-rp-desktop {
    transform:
        rotateY(-2deg)
        rotateX(0deg)
        translateY(-8px);

    border-color:
        rgba(255,106,0,.38);

    box-shadow:
        0 60px 130px
        rgba(0,0,0,.48);
}


.lp-rp-project-reverse:hover
.lp-rp-desktop {
    transform:
        rotateY(2deg)
        rotateX(0deg)
        translateY(-8px);
}


/* barre navigateur */

.lp-rp-browser-bar {
    position: relative;

    height: 40px;

    display: flex;
    align-items: center;

    padding:
        0 15px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    background: #101013;
}


.lp-rp-browser-dots {
    display: flex;

    align-items: center;

    gap: 6px;
}


.lp-rp-browser-dots span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #55555b;
}


.lp-rp-browser-url {
    position: absolute;

    left: 50%;

    max-width: 55%;

    overflow: hidden;

    color: #67676d;

    font-family: monospace;

    font-size: 9px;

    letter-spacing: .04em;

    text-overflow: ellipsis;

    white-space: nowrap;

    transform:
        translateX(-50%);
}


/* écran desktop */

.lp-rp-desktop-screen {
    position: relative;

    height: 540px;

    overflow: hidden;

    background: #111;
}


/* =========================================================
   CAPTURE
========================================================= */

/*
 * IMPORTANT :
 * l'écran agit comme une vraie fenêtre.
 * La capture garde toujours ses proportions et n'est jamais
 * étirée pour rentrer entièrement dans le mockup.
 */
.lp-rp-scroll-screen {
    position: relative;
    overflow: hidden;
}

.lp-rp-scroll-image {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;

    object-fit: initial !important;
    object-position: top center !important;

    transform: translate3d(0,0,0);

    image-rendering: auto;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    will-change: transform;
}

/* capture desktop */
.lp-rp-desktop-screen .lp-rp-scroll-image {
    width: 100% !important;
    height: auto !important;
}

/* capture mobile :
 * on conserve la largeur de l'écran du téléphone.
 * La très grande hauteur reste hors du cadre et sera parcourue
 * par le JS au survol.
 */
.lp-rp-phone-screen .lp-rp-scroll-image {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;

    object-fit: initial !important;
}


/* =========================================================
   TÉLÉPHONE
========================================================= */

.lp-rp-phone {
    position: absolute;

    z-index: 12;

    right: 0;
    bottom: 0;

    /*
     * Un peu plus large qu'avant :
     * la version mobile reste lisible et nette.
     */
    width: 220px;

    padding: 8px;

    border:
        1px solid
        rgba(255,255,255,.18);

    border-radius: 31px;

    background: #0a0a0c;

    box-shadow:
        0 35px 80px
        rgba(0,0,0,.58);

    overflow: hidden;

    transform: translateZ(0);

    transition:
        transform .45s
        cubic-bezier(.2,.8,.2,1),
        border-color .3s ease;
}


.lp-rp-project-reverse
.lp-rp-phone {
    right: auto;
    left: -25px;
}


.lp-rp-phone:hover {
    transform:
        translateY(-9px)
        rotate(1deg);

    border-color:
        rgba(255,106,0,.5);
}


.lp-rp-phone-top {
    height: 18px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.lp-rp-phone-top span {
    width: 45px;
    height: 4px;

    border-radius: 999px;

    background: #35353a;
}


.lp-rp-phone-screen {
    position: relative;

    width: 100%;
    height: 440px;

    overflow: hidden;

    border-radius: 21px;

    background: #111;

    /*
     * Évite qu'un style global WordPress/Astra ne redimensionne
     * ou recadre la capture.
     */
    contain: paint;
}


/* =========================================================
   HINT
========================================================= */

.lp-rp-preview-hint {
    position: absolute;

    left: 26px;
    bottom: 10px;

    color: #66666c;

    font-family: monospace;
    font-size: 9px;

    letter-spacing: .18em;

    transition:
        color .3s ease;
}


.lp-rp-preview:hover
.lp-rp-preview-hint {
    color: #ff6a00;
}


/* numéro décoratif */

.lp-rp-preview-index {
    position: absolute;

    z-index: -1;

    right: 20px;
    top: -35px;

    color:
        rgba(255,255,255,.025);

    font-size: 150px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -.1em;
}


/* =========================================================
   INFOS PROJET
========================================================= */

.lp-rp-project-info {
    position: relative;

    z-index: 3;

    min-width: 0;
}


.lp-rp-project-number {
    display: block;

    margin-bottom: 18px;

    color: #55555b;

    font-family: monospace;

    font-size: 10px;

    letter-spacing: .2em;
}


.lp-rp-project-type {
    display: block;

    color: #ff6a00;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .2em;

    text-transform: uppercase;
}


.lp-rp-project-info h2 {
    margin:
        14px 0
        28px;

    color:
        #f5f5f6 !important;

    font-size:
        clamp(
            52px,
            5.5vw,
            88px
        );

    font-weight: 620;

    line-height: .88;

    letter-spacing: -.06em;
}


.lp-rp-project-description {
    max-width: 500px;

    color: #9b9ba1;

    font-size: 16px;

    line-height: 1.75;
}


.lp-rp-project-description p {
    margin:
        0 0
        15px;
}


.lp-rp-project-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 30px;
}


.lp-rp-project-tags span {
    padding:
        9px 11px;

    border:
        1px solid
        rgba(255,255,255,.10);

    color: #808086;

    font-family: monospace;

    font-size: 9px;

    letter-spacing: .1em;

    text-transform: uppercase;
}


/* =========================================================
   LIEN SITE
========================================================= */

.lp-rp-project-link {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    margin-top: 34px;

    color:
        #f5f5f6 !important;

    font-size: 14px;

    font-weight: 700;

    text-decoration:
        none !important;
}


.lp-rp-project-link > span {
    width: 48px;
    height: 48px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        #ff6a00;

    border-radius: 50%;

    color: #ff6a00;

    font-size: 17px;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}


.lp-rp-project-link:hover
> span {
    transform:
        translate(
            4px,
            -4px
        );

    background:
        #ff6a00;

    color:
        #09090b;
}


/* =========================================================
   MANIFESTE
========================================================= */

.lp-rp-manifesto {
    position: relative;

    padding:
        150px 0;
}


/* grande composition */

.lp-rp-manifesto-inner {
    position: relative;

    min-height: 650px;

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(420px, 1.1fr);

    align-content: center;

    column-gap: 100px;

    padding:
        85px 0;

    overflow: hidden;

    border-top:
        1px solid
        rgba(255,255,255,.09);

    border-bottom:
        1px solid
        rgba(255,255,255,.09);
}


/* le contenu existant reste à gauche */

.lp-rp-manifesto-inner
.lp-rp-label,
.lp-rp-manifesto-inner
h2,
.lp-rp-manifesto-inner
p {
    grid-column: 1;

    position: relative;

    z-index: 4;
}


.lp-rp-manifesto h2 {
    margin:
        34px 0 0;

    color:
        #f5f5f6 !important;

    font-size:
        clamp(
            70px,
            8vw,
            126px
        );

    font-weight: 650;

    line-height: .78;

    letter-spacing: -.075em;

    text-transform: uppercase;
}


.lp-rp-manifesto h2 strong {
    color: #ff6a00;

    font-weight: inherit;
}


.lp-rp-manifesto p {
    max-width: 540px;

    margin:
        42px 0 0;

    color: #9b9ba1;

    font-size: 17px;

    line-height: 1.75;
}


/* =========================================================
   MANIFESTE — GRAND "UNIQUE"
========================================================= */

.lp-rp-manifesto-inner::before {
    content: "UNIQUE";

    position: absolute;

    z-index: 1;

    right: -80px;

    top: 50%;

    color:
        rgba(255,255,255,.022);

    font-size:
        clamp(
            150px,
            19vw,
            310px
        );

    font-weight: 800;

    line-height: .75;

    letter-spacing: -.09em;

    transform:
        translateY(-50%);

    pointer-events: none;

    transition:
        transform .8s
        cubic-bezier(.2,.8,.2,1),
        color .8s ease;
}


.lp-rp-manifesto-inner:hover::before {
    color:
        rgba(255,106,0,.035);

    transform:
        translate(
            -25px,
            -50%
        );
}


/* =========================================================
   MANIFESTE — LISTE DROITE
========================================================= */

.lp-rp-manifesto-inner::after {
    content:
        "01   IDENTITÉ"
        "\A"
        "\A"
        "02   DESIGN"
        "\A"
        "\A"
        "03   EXPÉRIENCE"
        "\A"
        "\A"
        "→   UN SITE QUI VOUS RESSEMBLE";

    position: absolute;

    z-index: 3;

    right: 70px;

    top: 50%;

    width: 420px;

    padding:
        45px 0;

    color: #8c8c92;

    border-top:
        1px solid
        rgba(255,255,255,.09);

    border-bottom:
        1px solid
        rgba(255,255,255,.09);

    font-family:
        monospace;

    font-size: 13px;

    line-height: 2.15;

    letter-spacing:
        .14em;

    white-space: pre;

    transform:
        translateY(-50%);

    pointer-events: none;

    transition:
        color .4s ease,
        border-color .4s ease;
}


.lp-rp-manifesto-inner:hover::after {
    color:
        #c4c4c8;

    border-color:
        rgba(255,106,0,.28);
}


/* petit halo à droite */

.lp-rp-manifesto::after {
    content: "";

    position: absolute;

    z-index: 0;

    right: 7%;

    top: 50%;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        rgba(255,106,0,.04);

    filter:
        blur(100px);

    transform:
        translateY(-50%);

    pointer-events: none;
}


/* =========================================================
   CTA FINAL
========================================================= */

.lp-rp-final {
    padding:
        20px 0
        130px;
}


.lp-rp-final-card {
    position: relative;

    min-height: 650px;

    padding:
        85px 80px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,106,0,.28);

    border-radius: 26px;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(255,106,0,.11),
            transparent 36%
        ),
        linear-gradient(
            125deg,
            rgba(255,106,0,.055),
            rgba(255,255,255,.01)
        );
}


.lp-rp-final-label {
    color: #ff6a00;

    font-family: monospace;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .2em;
}


.lp-rp-final-card h2 {
    max-width: 1050px;

    margin:
        40px 0 0;

    color:
        #f5f5f6 !important;

    font-size:
        clamp(
            68px,
            8vw,
            125px
        );

    font-weight: 650;

    line-height: .82;

    letter-spacing: -.07em;

    text-transform: uppercase;
}


.lp-rp-final-card h2 strong {
    color: #ff6a00;

    font-weight: inherit;
}


.lp-rp-final-bottom {
    position: relative;

    z-index: 3;

    max-width: 950px;

    margin-top: 65px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 60px;
}


.lp-rp-final-bottom p {
    max-width: 500px;

    margin: 0;

    color: #96969c;

    font-size: 16px;

    line-height: 1.75;
}


.lp-rp-final-bottom a {
    min-height: 58px;

    padding:
        0 25px;

    display: inline-flex;

    align-items: center;

    gap: 28px;

    flex: 0 0 auto;

    border-radius: 999px;

    background: #ff6a00;

    color:
        #09090b !important;

    font-size: 13px;

    font-weight: 700;

    text-decoration:
        none !important;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.lp-rp-final-bottom a:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 20px 50px
        rgba(255,106,0,.18);
}


.lp-rp-final-bottom a span {
    transition:
        transform .3s ease;
}


.lp-rp-final-bottom a:hover
span {
    transform:
        translateX(5px);
}


.lp-rp-final-number {
    position: absolute;

    right: -35px;
    bottom: -100px;

    color:
        rgba(255,255,255,.018);

    font-size: 300px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -.12em;

    pointer-events: none;
}


/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 1000px) {

    .lp-rp-hero
    > .lp-rp-inner {
        min-height: 0;
        display: block;
    }


    .lp-rp-hero-count {
        margin-top: 70px;

        text-align: left;
    }


    .lp-rp-project-layout,
    .lp-rp-project-reverse
    .lp-rp-project-layout {
        grid-template-columns:
            1fr;

        gap: 80px;
    }


    .lp-rp-project-reverse
    .lp-rp-preview,
    .lp-rp-project-reverse
    .lp-rp-project-info {
        grid-column: auto;
        grid-row: auto;
    }


    .lp-rp-project-reverse
    .lp-rp-preview {
        order: 1;
    }


    .lp-rp-project-reverse
    .lp-rp-project-info {
        order: 2;
    }


    .lp-rp-preview {
        max-width: 850px;
    }


    .lp-rp-project-info {
        max-width: 700px;
    }


    /* manifeste tablette */

    .lp-rp-manifesto-inner {
        min-height: 700px;

        grid-template-columns:
            1fr 1fr;

        gap: 60px;
    }


    .lp-rp-manifesto-inner::after {
        right: 20px;

        width: 330px;

        font-size: 11px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .lp-rp-grid {
        background-size:
            45px 45px;
    }


    .lp-rp-inner {
        width:
            calc(100% - 34px);
    }


    /* =====================================================
       HERO
    ====================================================== */

    .lp-rp-hero {
        padding:
            120px 0
            100px;
    }


    .lp-rp-hero-copy h1 {
        font-size:
            clamp(
                49px,
                14vw,
                69px
            );
    }


    .lp-rp-hero-copy > p {
        font-size: 15px;
    }


    .lp-rp-hero-count strong {
        font-size: 150px;
    }


    /* =====================================================
       PROJET
    ====================================================== */

    .lp-rp-project {
        padding:
            90px 0
            110px;
    }


    .lp-rp-project-top {
        margin-bottom:
            45px;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap: 8px;
    }


    .lp-rp-project-ghost {
        top: 130px;

        font-size: 95px;
    }


    .lp-rp-project-layout {
        gap: 65px;
    }


    /* =====================================================
       PREVIEW
    ====================================================== */

    .lp-rp-preview {
        padding:
            10px
            25px
            70px
            0;
    }


    .lp-rp-desktop,
    .lp-rp-project-reverse
    .lp-rp-desktop,
    .lp-rp-project:hover
    .lp-rp-desktop,
    .lp-rp-project-reverse:hover
    .lp-rp-desktop {
        transform: none;
    }


    .lp-rp-desktop-screen {
        height: 300px;
    }


    .lp-rp-browser-bar {
        height: 33px;
    }


    .lp-rp-browser-url {
        font-size: 7px;
    }


    .lp-rp-phone,
    .lp-rp-project-reverse
    .lp-rp-phone {
        width: 118px;

        right: -5px;
        left: auto;

        bottom: 25px;

        padding: 5px;

        border-radius: 20px;
    }


    .lp-rp-phone-top {
        height: 12px;
    }


    .lp-rp-phone-top span {
        width: 30px;
        height: 3px;
    }


    .lp-rp-phone-screen {
        height: 240px;

        border-radius: 14px;
    }


    .lp-rp-preview-hint {
        left: 5px;

        font-size: 7px;
    }


    .lp-rp-preview-index {
        font-size: 90px;
    }


    /* =====================================================
       INFOS
    ====================================================== */

    .lp-rp-project-info h2 {
        font-size:
            clamp(
                50px,
                15vw,
                70px
            );
    }


    .lp-rp-project-description {
        font-size: 15px;
    }


    /* =====================================================
       MANIFESTE MOBILE
    ====================================================== */

    .lp-rp-manifesto {
        padding:
            100px 0;
    }


    .lp-rp-manifesto-inner {
        min-height: 0;

        display: block;

        padding:
            70px 0
            75px;

        overflow: hidden;
    }


    .lp-rp-manifesto h2 {
        font-size:
            clamp(
                57px,
                17vw,
                80px
            );
    }


    .lp-rp-manifesto p {
        max-width: 100%;

        margin-top: 32px;

        font-size: 15px;
    }


    /* gros UNIQUE derrière */

    .lp-rp-manifesto-inner::before {
        top: auto;

        right: -30px;
        bottom: 115px;

        font-size: 105px;

        transform: none;
    }


    .lp-rp-manifesto-inner:hover::before {
        transform:
            translateX(-10px);
    }


    /* liste sous le texte */

    .lp-rp-manifesto-inner::after {
        position: relative;

        display: block;

        top: auto;
        right: auto;

        width: 100%;

        margin-top: 70px;

        padding:
            30px 0;

        font-size: 10px;

        line-height: 2;

        transform: none;
    }


    /* =====================================================
       FINAL
    ====================================================== */

    .lp-rp-final {
        padding-bottom:
            80px;
    }


    .lp-rp-final-card {
        min-height: 0;

        padding:
            55px 25px;
    }


    .lp-rp-final-card h2 {
        font-size:
            clamp(
                50px,
                14vw,
                70px
            );
    }


    .lp-rp-final-bottom {
        margin-top: 45px;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap: 30px;
    }


    .lp-rp-final-bottom p {
        font-size: 15px;
    }


    .lp-rp-final-bottom a {
        width: 100%;

        justify-content:
            space-between;
    }


    .lp-rp-final-number {
        font-size: 170px;
    }

}


/* =========================================================
   RÉDUCTION DES MOUVEMENTS
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .lp-rp-scroll-image,
    .lp-rp-desktop,
    .lp-rp-phone,
    .lp-rp-project-ghost,
    .lp-rp-manifesto-inner::before {
        transition:
            none !important;
    }

}