/* =========================================================
   LPROJECT WEB — À PROPOS
========================================================= */


/* =========================================================
   SORTIE DU CONTENEUR ASTRA
========================================================= */

body.page-template-page-a-propos #content,
body.page-template-page-a-propos .site-content,
body.page-template-page-a-propos .content-area,
body.page-template-page-a-propos .site-main,
body.page-template-page-a-propos article,
body.page-template-page-a-propos .entry-content {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #09090b !important;
}


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

.lp-about-page {
    position: relative;

    width: 100vw;
    max-width: none;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    overflow: hidden;

    background: #09090b;

    color: #fff;
}


/* =========================================================
   GRILLE
========================================================= */

.lp-about-grid {
    position: fixed;

    inset: 0;

    z-index: 0;

    pointer-events: none;

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

    background-size:
        70px 70px;
}


/* =========================================================
   HALOS
========================================================= */

.lp-about-glow {
    position: absolute;

    z-index: 1;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;
}


.lp-about-glow-1 {
    width: 520px;
    height: 520px;

    top: 150px;
    left: -280px;

    background:
        rgba(255,106,0,.10);
}


.lp-about-glow-2 {
    width: 480px;
    height: 480px;

    right: -260px;
    top: 900px;

    background:
        rgba(255,106,0,.065);
}


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

.lp-about-inner {
    position: relative;

    z-index: 2;

    width:
        min(1320px, calc(100% - 70px));

    margin: 0 auto;
}


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

.lp-about-page .lp-section-label {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 28px;

    color: #ff6a00 !important;

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

    letter-spacing: .22em;

    text-transform: uppercase;
}


.lp-about-page .lp-section-label > span {
    width: 32px;
    height: 1px;

    flex: 0 0 auto;

    background: #ff6a00;
}


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

.lp-about-hero {
    position: relative;

    padding:
        170px 0 130px;
}


.lp-about-hero .lp-about-inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, .95fr);

    align-items: center;

    gap: 100px;
}


/* =========================================================
   HERO — TEXTE
========================================================= */

.lp-about-hero-copy h1 {
    max-width: 780px;

    margin: 0;

    color: #f7f7f8 !important;

    font-size:
        clamp(58px, 6vw, 96px);

    line-height: .92;

    letter-spacing: -.055em;

    font-weight: 650;
}


.lp-about-hero-copy h1 span {
    color: #ff6a00 !important;
}


.lp-about-hero-copy > p {
    max-width: 560px;

    margin: 32px 0 0;

    color: #8d8d93;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   HERO — VISUEL
========================================================= */

.lp-about-hero-visual {
    position: relative;

    min-height: 520px;

    display: flex;

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

    isolation: isolate;
}


/* =========================================================
   ROTATOR
========================================================= */

.lp-about-rotator {
    position: absolute;

    inset: 0;

    z-index: 2;

    transform:
        rotate(0deg);

    transform-origin:
        50% 50%;

    transition:
        transform 1.65s cubic-bezier(.16,.8,.25,1);

    will-change: transform;
}


/* =========================================================
   ROTATION AU SURVOL
========================================================= */

.lp-about-hero-visual:hover
.lp-about-rotator {
    transform:
        rotate(32deg);
}


/* =========================================================
   CERCLES
========================================================= */

.lp-about-orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    margin: 0;

    border-radius: 50%;

    transform:
        translate(-50%, -50%);

    pointer-events: none;
}


.lp-about-orbit-1 {
    width: 390px;
    height: 390px;

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


.lp-about-orbit-2 {
    width: 520px;
    height: 520px;

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


/* =========================================================
   POINTS D'ANCRAGE DES MOTS
========================================================= */

.lp-about-word-anchor {
    position: absolute;

    z-index: 4;

    display: block;

    pointer-events: none;
}


/*
 * Important :
 * l'ancrage tourne avec tout le rotator.
 * Le texte à l'intérieur fera la rotation inverse.
 */


/* DESIGN */

.lp-about-word-anchor-1 {
    top: 15%;
    left: 10%;
}


/* WORDPRESS */

.lp-about-word-anchor-2 {
    top: 24%;
    right: 8%;
}


/* RESPONSIVE */

.lp-about-word-anchor-3 {
    right: 3%;
    bottom: 20%;
}


/* SUR MESURE */

.lp-about-word-anchor-4 {
    left: 8%;
    bottom: 16%;
}


/* AGDE */

.lp-about-word-anchor-5 {
    top: 48%;
    right: 0;
}


/* =========================================================
   TEXTE DES MOTS
========================================================= */

.lp-about-word-text {
    display: block;

    color: #737379;

    font-family:
        monospace;

    font-size: 10px;

    line-height: 1;

    letter-spacing: .12em;

    text-transform: uppercase;

    white-space: nowrap;

    transform:
        rotate(0deg);

    transform-origin:
        50% 50%;

    transition:
        transform 1.65s cubic-bezier(.16,.8,.25,1),
        color .3s ease;

    will-change: transform;
}


/* =========================================================
   CONTRE-ROTATION DES MOTS

   Le rotator tourne de +32°.
   Les textes tournent de -32°.
   Visuellement ils restent horizontaux.
========================================================= */

.lp-about-hero-visual:hover
.lp-about-word-text {
    transform:
        rotate(-32deg);

    color: #a1a1a7;
}


/* AGDE reste orange */

.lp-about-word-anchor-5
.lp-about-word-text {
    color: #ff6a00;
}


.lp-about-hero-visual:hover
.lp-about-word-anchor-5
.lp-about-word-text {
    color: #ff7c22;
}


/* =========================================================
   LOGO CENTRAL
========================================================= */

.lp-about-logo {
    position: relative;

    z-index: 10;

    width: 150px;
    height: 180px;

    display: flex;

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

    padding: 18px;

    pointer-events: none;
}


/* halo derrière */

.lp-about-logo::before {
    content: "";

    position: absolute;

    inset: -45px;

    z-index: -1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,106,0,.10),
            rgba(255,106,0,.025) 45%,
            transparent 72%
        );

    filter:
        blur(10px);
}


/* image */

.lp-about-logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 30px rgba(255,106,0,.18)
        );
}


/* ancien symbole au cas où */

.lp-about-symbol {
    display: none !important;
}


/* =========================================================
   PARCOURS
========================================================= */

.lp-about-story {
    position: relative;

    padding:
        140px 0;
}


.lp-about-story .lp-about-inner {
    display: grid;

    grid-template-columns:
        140px 1fr;

    gap: 50px;
}


.lp-about-story-number {
    padding-top: 4px;

    color: #4c4c52;

    font-size: 12px;

    letter-spacing: .2em;
}


/* =========================================================
   PARCOURS — TITRE
========================================================= */

.lp-about-story-content h2 {
    margin: 0;

    color: #f5f5f6 !important;

    font-size:
        clamp(48px, 5vw, 78px);

    line-height: .95;

    letter-spacing: -.045em;

    font-weight: 620;
}


.lp-about-story-content h2 span {
    color: #ff6a00 !important;
}


/* =========================================================
   PARCOURS — TEXTE
========================================================= */

.lp-about-story-text {
    max-width: 1050px;

    margin-top: 55px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 48px;
}


.lp-about-story-text p {
    position: relative;

    margin: 0;

    padding-top: 24px;

    color: #a0a0a6;

    font-size: 15px;

    line-height: 1.8;
}


/* ligne orange */

.lp-about-story-text p::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 42px;
    height: 1px;

    background:
        rgba(255,106,0,.55);
}


/* =========================================================
   MÉTHODE
========================================================= */

.lp-about-method {
    position: relative;

    padding:
        120px 0 150px;
}


.lp-about-method-head {
    margin-bottom: 70px;
}


/* =========================================================
   MÉTHODE — TITRE
========================================================= */

.lp-about-method-head h2 {
    margin: 0;

    color: #f5f5f6 !important;

    font-size:
        clamp(48px, 5vw, 78px);

    line-height: .95;

    letter-spacing: -.045em;

    font-weight: 620;
}


.lp-about-method-head h2 span {
    color: #ff6a00 !important;
}


/* =========================================================
   MÉTHODE — LISTE
========================================================= */

.lp-about-method-list {
    border-top:
        1px solid rgba(255,255,255,.08);
}


.lp-about-method-item {
    min-height: 150px;

    padding: 0;

    display: grid;

    grid-template-columns:
        100px 1fr;

    align-items: center;

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

    transition:
        padding .3s ease,
        background .3s ease,
        border-color .3s ease;
}


.lp-about-method-item:hover {
    padding-left: 20px;

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

    background:
        rgba(255,106,0,.028);
}


.lp-about-method-number {
    color: #55555a;

    font-size: 10px;

    letter-spacing: .18em;
}


.lp-about-method-item h3 {
    margin: 0;

    color: #f5f5f6 !important;

    font-size: 31px;

    font-weight: 600;
}


.lp-about-method-item p {
    max-width: 650px;

    margin: 9px 0 0;

    color: #85858b;

    font-size: 14px;

    line-height: 1.65;
}


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

.lp-about-manifesto {
    position: relative;

    padding:
        70px 0 150px;
}


.lp-about-manifesto-card {
    position: relative;

    padding: 80px;

    overflow: hidden;

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

    border-radius: 24px;

    background:
        linear-gradient(
            130deg,
            rgba(255,106,0,.06),
            rgba(255,255,255,.012)
        );

    box-shadow:
        0 35px 90px rgba(0,0,0,.20);
}


.lp-about-quote {
    position: absolute;

    top: 18px;
    right: 50px;

    color:
        rgba(255,106,0,.12);

    font-size: 170px;

    line-height: 1;
}


.lp-about-manifesto-card p {
    position: relative;

    z-index: 2;

    margin: 0;

    color: #f5f5f6 !important;

    font-size:
        clamp(48px, 5vw, 78px);

    line-height: .96;

    letter-spacing: -.045em;
}


.lp-about-manifesto-card strong {
    color: #ff6a00 !important;
}


.lp-about-manifesto-card small {
    display: block;

    margin-top: 35px;

    color: #5f5f65;

    font-size: 9px;

    letter-spacing: .2em;
}


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

.lp-about-cta {
    position: relative;

    padding:
        0 0 100px;
}


.lp-about-cta-box {
    padding:
        45px 50px;

    display: flex;

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

    gap: 50px;

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

    border-radius: 18px;

    background:
        linear-gradient(
            120deg,
            rgba(255,106,0,.04),
            rgba(255,255,255,.01)
        );
}


.lp-about-cta-box > div > span {
    color: #ff6a00;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .2em;
}


/* titre */

.lp-about-cta-box h2 {
    margin:
        12px 0 0;

    color: #f5f5f6 !important;

    font-size:
        clamp(32px, 4vw, 55px);

    line-height: 1;

    letter-spacing: -.04em;

    font-weight: 620;
}


/* bouton */

.lp-about-cta-box > a {
    min-height: 56px;

    padding:
        0 23px;

    display: inline-flex;

    align-items: center;

    gap: 25px;

    flex: 0 0 auto;

    border:
        1px solid #ff6a00;

    border-radius: 999px;

    background: #ff6a00;

    color: #09090b !important;

    text-decoration: none !important;

    font-size: 12px;

    font-weight: 700;

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


.lp-about-cta-box > a span {
    transition:
        transform .3s ease;
}


.lp-about-cta-box > a:hover {
    transform:
        translateY(-3px);

    background:
        #ff7815;

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


.lp-about-cta-box > a:hover span {
    transform:
        translateX(4px);
}


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

@media (max-width: 950px) {

    .lp-about-hero {
        padding:
            145px 0 100px;
    }


    .lp-about-hero .lp-about-inner {
        grid-template-columns:
            1fr;

        gap: 45px;
    }


    .lp-about-hero-visual {
        min-height: 430px;
    }


    .lp-about-story {
        padding:
            110px 0;
    }


    .lp-about-story .lp-about-inner {
        grid-template-columns:
            80px 1fr;

        gap: 30px;
    }


    .lp-about-story-text {
        grid-template-columns:
            1fr;

        max-width: 720px;

        gap: 35px;
    }


    .lp-about-method {
        padding:
            100px 0 120px;
    }

}


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

@media (max-width: 650px) {

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


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


    /* HERO */

    .lp-about-hero {
        padding:
            120px 0 70px;
    }


    .lp-about-hero-copy h1 {
        font-size:
            clamp(46px, 13vw, 66px);

        line-height: .94;
    }


    .lp-about-hero-copy > p {
        font-size: 14px;

        line-height: 1.7;
    }


    .lp-about-hero-visual {
        min-height: 330px;
    }


    .lp-about-logo {
        width: 105px;
        height: 130px;

        padding: 12px;
    }


    .lp-about-orbit-1 {
        width: 240px;
        height: 240px;
    }


    .lp-about-orbit-2 {
        width: 310px;
        height: 310px;
    }


    /* mots */

    .lp-about-word-text {
        font-size: 8px;
    }


    .lp-about-word-anchor-1 {
        top: 14%;
        left: 4%;
    }


    .lp-about-word-anchor-2 {
        top: 23%;
        right: 2%;
    }


    .lp-about-word-anchor-3 {
        right: 0;
        bottom: 19%;
    }


    .lp-about-word-anchor-4 {
        left: 2%;
        bottom: 14%;
    }


    .lp-about-word-anchor-5 {
        top: 48%;
        right: 0;
    }


    /*
     * Pas de hover utile sur tactile.
     * On garde le visuel parfaitement stable.
     */

    .lp-about-rotator,
    .lp-about-hero-visual:hover .lp-about-rotator {
        transform:
            rotate(0deg);
    }


    .lp-about-word-text,
    .lp-about-hero-visual:hover .lp-about-word-text {
        transform:
            rotate(0deg);
    }


    /* PARCOURS */

    .lp-about-story {
        padding:
            85px 0;
    }


    .lp-about-story .lp-about-inner {
        grid-template-columns:
            1fr;

        gap: 25px;
    }


    .lp-about-story-number {
        margin-bottom: 5px;
    }


    .lp-about-story-content h2 {
        font-size:
            clamp(42px, 12vw, 58px);
    }


    .lp-about-story-text {
        margin-top: 42px;

        grid-template-columns:
            1fr;

        gap: 35px;
    }


    .lp-about-story-text p {
        font-size: 15px;

        line-height: 1.75;
    }


    /* MÉTHODE */

    .lp-about-method {
        padding:
            80px 0 100px;
    }


    .lp-about-method-head {
        margin-bottom: 50px;
    }


    .lp-about-method-head h2 {
        font-size:
            clamp(42px, 12vw, 58px);
    }


    .lp-about-method-item {
        min-height: 135px;

        grid-template-columns:
            55px 1fr;
    }


    .lp-about-method-item:hover {
        padding-left: 0;
    }


    .lp-about-method-item h3 {
        font-size: 25px;
    }


    .lp-about-method-item p {
        font-size: 13px;
    }


    /* MANIFESTE */

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


    .lp-about-manifesto-card {
        padding:
            48px 25px;
    }


    .lp-about-manifesto-card p {
        font-size:
            clamp(39px, 11vw, 55px);
    }


    .lp-about-quote {
        right: 20px;

        font-size: 110px;
    }


    /* CTA */

    .lp-about-cta {
        padding-bottom:
            70px;
    }


    .lp-about-cta-box {
        padding:
            35px 25px;

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .lp-about-cta-box h2 {
        font-size:
            clamp(32px, 10vw, 45px);
    }


    .lp-about-cta-box > a {
        width: 100%;

        justify-content:
            space-between;
    }

}