/* ==========================================================

   PAGE À PROPOS

========================================================== */



.about-page {

    width: 100%;

    overflow: hidden;

    background: #FAF7F4;

    color: #000000;

}





/* ==========================================================

   HERO

========================================================== */



.about-hero {

    min-height: 680px;

    padding: 40px;



    display: flex;



    background: #F6E8EB;

}





.about-hero-inner {

    width: 100%;

    max-width: 1450px;



    margin: 0 auto;



    display: flex;

    flex-direction: column;

    justify-content: space-between;

}





.about-hero-meta,

.about-hero-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;



    gap: 30px;



    font-family: "DM Sans", sans-serif;



    color: #8D7378;



    font-size: 11px;

    letter-spacing: .18em;



    text-transform: uppercase;

}





.about-hero-content {

    max-width: 1100px;



    margin: 85px auto;



    text-align: center;

}





.about-hero-kicker {

    margin: 0 0 28px;



    font-family: "Libre Baskerville", serif;



    color: #A75E6D;



    font-size: 13px;

    font-style: italic;

}





.about-hero h1 {

    margin: 0;



    font-family: "Playfair Display SC", serif;



    font-size: clamp(75px, 9vw, 130px);

    font-weight: 400;



    line-height: .85;

    letter-spacing: -.055em;



    text-transform: uppercase;

}





.about-hero h1 span {

    display: block;



    margin-top: 14px;



    font-family: "Libre Baskerville", serif;



    color: #B96E7D;



    font-size: .55em;

    font-style: italic;



    text-transform: none;

}





.about-hero-text {

    max-width: 500px;



    margin: 35px auto 0;



    font-family: "DM Sans", sans-serif;



    color: #76686B;



    font-size: 16px;

    line-height: 1.8;

}





/* ==========================================================

   JULIE

========================================================== */



.about-julie {

    padding: 145px 40px;



    background: #FAF7F4;

}





.about-julie-inner {

    max-width: 1400px;



    margin: 0 auto;



    display: grid;

    grid-template-columns: 1.05fr .75fr;



    align-items: center;



    gap: clamp(80px, 9vw, 150px);

}





.about-julie-visual {

    position: relative;



    max-width: 680px;

}





.about-julie-image {

    width: 100%;

    height: 720px;



    overflow: hidden;

}





.about-julie-image img {

    display: block;



    width: 100%;

    height: 100%;



    object-fit: cover;

}





.about-julie-caption {

    position: absolute;



    right: -45px;

    bottom: 45px;



    width: 140px;

    height: 140px;



    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;



    border-radius: 50%;



    background: #E2A4B1;



    text-align: center;



    transform: rotate(5deg);

}





.about-julie-caption > span {

    font-family: "Libre Baskerville", serif;



    font-size: 24px;

    font-style: italic;

}





.about-julie-caption p {

    margin: 7px 0 0;



    font-family: "DM Sans", sans-serif;



    font-size: 10px;

    line-height: 1.5;



    letter-spacing: .12em;



    text-transform: uppercase;

}





/* LABEL */



.about-label {

    margin-bottom: 30px;



    display: flex;

    align-items: center;



    gap: 15px;

}





.about-label > span {

    width: 40px;

    height: 1px;



    background: #E2A4B1;

}





.about-label p {

    margin: 0;



    font-family: "DM Sans", sans-serif;



    color: #B96E7D;



    font-size: 11px;

    letter-spacing: .2em;



    text-transform: uppercase;

}





.about-julie h2,

.about-workshop h2 {

    margin: 0;



    font-family: "Playfair Display SC", serif;



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

    font-weight: 400;



    line-height: .94;

    letter-spacing: -.045em;



    text-transform: uppercase;

}





.about-julie h2 span,

.about-workshop h2 span {

    display: block;



    margin-top: 10px;



    font-family: "Libre Baskerville", serif;



    color: #C77D8C;



    font-size: .72em;

    font-style: italic;



    text-transform: none;

}





.about-julie-lead {

    margin-top: 35px !important;



    font-family: "Libre Baskerville", serif !important;



    color: #000000 !important;



    font-size: 16px !important;

    font-style: italic;



    line-height: 1.65 !important;

}





.about-julie-content > p {

    margin: 20px 0 0;



    font-family: "DM Sans", sans-serif;



    color: #696260;



    font-size: 16px;

    line-height: 1.8;

}





.about-julie-content strong {

    color: #000000;

    font-weight: 500;

}





/* ==========================================================

   MANIFESTE

========================================================== */



.about-manifesto {

    padding: 150px 40px;



    background: #000000;

    color: #FFFFFF;

}





.about-manifesto-inner {

    max-width: 1250px;



    margin: 0 auto;

}





.about-manifesto-small {

    margin: 0 0 45px;



    font-family: "DM Sans", sans-serif;



    color: #E2A4B1;



    font-size: 11px;

    letter-spacing: .2em;



    text-transform: uppercase;

}





.about-manifesto-text {

    max-width: 1150px;



    margin: 0;



    font-family: "Playfair Display SC", serif;



    font-size: clamp(50px, 6vw, 90px);

    font-weight: 400;



    line-height: 1.05;

    letter-spacing: -.045em;



    text-transform: uppercase;

}





.about-manifesto-text em {

    font-family: "Libre Baskerville", serif;



    color: #E2A4B1;



    font-weight: 400;

    font-style: italic;



    text-transform: none;

}





.about-manifesto-text strong {

    font-family: "Libre Baskerville", serif;



    font-weight: 400;

    font-style: italic;



    text-transform: none;

}





/* ==========================================================

   SAVOIR-FAIRE

========================================================== */



.about-craft {

    padding: 145px 40px;



    background: #F6E8EB;

}





.about-craft-inner {

    max-width: 1400px;



    margin: 0 auto;

}





.about-craft-heading {

    max-width: 900px;

}





.about-craft-heading h2 {

    margin: 0;



    font-family: "Playfair Display SC", serif;



    font-size: clamp(55px, 5.5vw, 85px);

    font-weight: 400;



    line-height: .92;

    letter-spacing: -.045em;



    text-transform: uppercase;

}





.about-craft-heading h2 span {

    display: block;



    margin-top: 10px;



    font-family: "Libre Baskerville", serif;



    color: #B96E7D;



    font-size: .68em;

    font-style: italic;



    text-transform: none;

}





.about-craft-grid {

    margin-top: 85px;



    display: grid;

    grid-template-columns: repeat(2, 1fr);



    border-top: 1px solid rgba(0, 0, 0, .15);

}





.about-craft-item {

    min-height: 320px;



    padding: 30px 40px;



    display: flex;

    flex-direction: column;

    justify-content: space-between;



    border-right: 1px solid rgba(0, 0, 0, .12);

    border-bottom: 1px solid rgba(0, 0, 0, .15);

}





.about-craft-item:nth-child(even) {

    border-right: 0;

}





.about-craft-number {

    font-family: "Libre Baskerville", serif;



    color: #B96E7D;



    font-size: 12px;

    font-style: italic;

}





.about-craft-item h3 {

    margin: 0 0 18px;



    font-family: "Libre Baskerville", serif;



    font-size: 24px;

    font-weight: 400;

    font-style: italic;

}





.about-craft-item p {

    max-width: 470px;



    margin: 0;



    font-family: "DM Sans", sans-serif;



    color: #756A6D;



    font-size: 16px;

    line-height: 1.8;

}





/* ==========================================================

   ATELIER

========================================================== */



.about-workshop {

    padding: 150px 40px;



    background: #FAF7F4;

}





.about-workshop-inner {

    max-width: 1400px;



    margin: 0 auto;



    display: grid;

    grid-template-columns: .75fr 1.1fr;



    align-items: center;



    gap: clamp(80px, 9vw, 150px);

}





.about-workshop-content {

    max-width: 520px;

}





.about-workshop-kicker {

    margin: 0 0 25px;



    font-family: "Libre Baskerville", serif;



    color: #B96E7D;



    font-size: 12px;

    font-style: italic;

}





.about-workshop-lead {

    margin-top: 32px !important;



    font-family: "Libre Baskerville", serif !important;



    color: #000000 !important;



    font-size: 16px !important;

    font-style: italic;



    line-height: 1.7 !important;

}





.about-workshop-content > p:not(.about-workshop-kicker) {

    margin: 20px 0 0;



    font-family: "DM Sans", sans-serif;



    color: #696260;



    font-size: 16px;

    line-height: 1.8;

}





.about-workshop-link {

    width: fit-content;



    margin-top: 35px;



    display: flex;

    align-items: center;



    gap: 15px;



    font-family: "Libre Baskerville", serif;



    color: #000000;



    font-size: 12px;

    font-style: italic;



    text-decoration: none;

}





.about-workshop-link span:last-child {

    width: 39px;

    height: 39px;



    display: flex;

    align-items: center;

    justify-content: center;



    border: 1px solid #E2A4B1;

    border-radius: 50%;



    transition:

background .3s ease,

        transform .35s ease;

}





.about-workshop-link:hover span:last-child {

    background: #E2A4B1;

    transform: rotate(45deg);

}





/* COLLAGE */



.about-workshop-images {

    position: relative;



    min-height: 730px;

}





.about-workshop-image {

    position: absolute;



    overflow: hidden;

}





.about-workshop-image img {

    width: 100%;

    height: 100%;



    display: block;



    object-fit: cover;

}





.about-workshop-image-main {

    top: 0;

    right: 0;



    width: 78%;

    height: 620px;

}





.about-workshop-image-small {

    left: 0;

    bottom: 0;



    width: 43%;

    height: 310px;



    border: 12px solid #FAF7F4;

}





/* ==========================================================

   SERVICE

========================================================== */



.about-service {

    padding: 145px 40px;



    background: #E2A4B1;

}





.about-service-inner {

    max-width: 1300px;



    margin: 0 auto;



    display: grid;

    grid-template-columns: 1.1fr .75fr;



    align-items: end;



    gap: 120px;

}





.about-service-heading > p {

    margin: 0 0 25px;



    font-family: "DM Sans", sans-serif;



    color: #794C55;



    font-size: 11px;

    letter-spacing: .2em;



    text-transform: uppercase;

}





.about-service-heading h2 {

    margin: 0;



    font-family: "Playfair Display SC", serif;



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

    font-weight: 400;



    line-height: .92;

    letter-spacing: -.045em;



    text-transform: uppercase;

}





.about-service-heading h2 span {

    display: block;



    margin-top: 10px;



    font-family: "Libre Baskerville", serif;



    font-size: .62em;

    font-style: italic;



    text-transform: none;

}





.about-service-content p {

    margin: 0 0 18px;



    font-family: "DM Sans", sans-serif;



    color: rgba(0, 0, 0, .65);



    font-size: 16px;

    line-height: 1.8;

}





.about-service-content .about-service-lead {

    font-family: "Libre Baskerville", serif;



    color: #000000;



    font-size: 16px;

    font-style: italic;



    line-height: 1.7;

}





/* ==========================================================

   DÉCOUVRIR

========================================================== */



.about-discover {

    padding: 145px 40px;



    background: #FAF7F4;

}





.about-discover-inner {

    max-width: 1400px;



    margin: 0 auto;

}





.about-discover-header {

    margin-bottom: 70px;

}





.about-discover-header > p {

    margin: 0 0 20px;



    font-family: "Libre Baskerville", serif;



    color: #B96E7D;



    font-size: 12px;

    font-style: italic;

}





.about-discover-header h2 {

    margin: 0;



    font-family: "Playfair Display SC", serif;



    font-size: clamp(55px, 5.5vw, 85px);

    font-weight: 400;



    line-height: .92;

    letter-spacing: -.045em;



    text-transform: uppercase;

}





.about-discover-header h2 span {

    display: block;



    font-family: "Libre Baskerville", serif;



    color: #C77D8C;



    font-size: .68em;

    font-style: italic;



    text-transform: none;

}





.about-discover-grid {

    border-top: 1px solid rgba(0, 0, 0, .18);

}





.about-discover-item {

    min-height: 150px;



    padding: 25px 10px;



    display: grid;

    grid-template-columns: 100px 1fr 60px;



    align-items: center;



    border-bottom: 1px solid rgba(0, 0, 0, .18);



    color: #000000;



    text-decoration: none;



    transition:

        padding .4s ease,

background .4s ease;

}





.about-discover-item:hover {

    padding-left: 25px;

    padding-right: 25px;



    background: #F6E8EB;

}





.about-discover-number {

    font-family: "Libre Baskerville", serif;



    color: #B96E7D;



    font-size: 12px;

    font-style: italic;

}





.about-discover-item div p {

    margin: 0 0 7px;



    font-family: "DM Sans", sans-serif;



    color: #8A7E80;



    font-size: 10px;

    letter-spacing: .15em;



    text-transform: uppercase;

}





.about-discover-item h3 {

    margin: 0;



    font-family: "Libre Baskerville", serif;



    font-size: clamp(23px, 2.5vw, 36px);

    font-weight: 400;

    font-style: italic;

}





.about-discover-arrow {

    width: 48px;

    height: 48px;



    display: flex;

    align-items: center;

    justify-content: center;



    border: 1px solid #E2A4B1;

    border-radius: 50%;



    transition:

background .3s ease,

        transform .4s ease;

}





.about-discover-item:hover .about-discover-arrow {

    background: #E2A4B1;



    transform: rotate(45deg);

}





/* ==========================================================

   CTA FINAL

========================================================== */



.about-final {

    padding: 150px 40px;



    background: #000000;

    color: #FFFFFF;



    text-align: center;

}





.about-final-inner {

    max-width: 1050px;



    margin: 0 auto;

}





.about-final-kicker {

    margin: 0 0 25px;



    font-family: "Libre Baskerville", serif;



    color: #E2A4B1;



    font-size: 13px;

    font-style: italic;

}





.about-final h2 {

    margin: 0;



    font-family: "Playfair Display SC", serif;



    font-size: clamp(60px, 6.5vw, 96px);

    font-weight: 400;



    line-height: .9;

    letter-spacing: -.045em;



    text-transform: uppercase;

}





.about-final h2 span {

    display: block;



    margin-top: 10px;



    font-family: "Libre Baskerville", serif;



    color: #E2A4B1;



    font-size: .7em;

    font-style: italic;



    text-transform: none;

}





.about-final-text {

    max-width: 500px;



    margin: 30px auto 0;



    font-family: "DM Sans", sans-serif;



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



    font-size: 16px;

    line-height: 1.8;

}





.about-final-button {

    position: relative;



    width: fit-content;



    margin: 38px auto 0;

    padding: 7px 7px 7px 24px;



    display: flex;

    align-items: center;



    gap: 25px;



    overflow: hidden;



    border: 1px solid #E2A4B1;

    border-radius: 100px;



    color: #FFFFFF;



    text-decoration: none;



    isolation: isolate;

}





.about-final-button::before {

    content: "";



    position: absolute;

    inset: 0;



    z-index: -1;



    background: #E2A4B1;



    transform: translateX(-101%);



    transition: transform .45s cubic-bezier(.77, 0, .18, 1);

}





.about-final-button > span:first-child {

    font-family: "Libre Baskerville", serif;



    font-size: 12px;

    font-style: italic;



    transition: color .3s ease;

}





.about-final-arrow {

    width: 42px;

    height: 42px;



    display: flex;

    align-items: center;

    justify-content: center;



    border-radius: 50%;



    background: #E2A4B1;

    color: #000000;



    font-size: 16px;



    transition:

        transform .4s ease,

background .3s ease;

}





.about-final-button:hover::before {

    transform: translateX(0);

}





.about-final-button:hover > span:first-child {

    color: #000000;

}





.about-final-button:hover .about-final-arrow {

    background: #FFFFFF;



    transform: rotate(45deg);

}





/* ==========================================================

   <= 1050PX

========================================================== */



@media (max-width: 1050px) {



    .about-hero {

        min-height: 620px;



        padding: 35px 30px;

    }





    .about-julie,

    .about-manifesto,

    .about-craft,

    .about-workshop,

    .about-service,

    .about-discover {

        padding: 110px 30px;

    }





    .about-julie-inner,

    .about-workshop-inner {

        gap: 70px;

    }





    .about-julie-image {

        height: 620px;

    }





    .about-julie-caption {

        right: -30px;



        width: 120px;

        height: 120px;

    }





    .about-workshop-images {

        min-height: 620px;

    }





    .about-workshop-image-main {

        height: 530px;

    }





    .about-workshop-image-small {

        height: 260px;

    }





    .about-service-inner {

        gap: 70px;

    }





    .about-final {

        padding: 120px 30px;

    }



}





/* ==========================================================

   <= 768PX

========================================================== */



@media (max-width: 768px) {



    .about-hero {

        min-height: 580px;



        padding: 30px 25px;

    }





    .about-hero-content {

        margin: 70px auto;

    }





    .about-hero h1 {

        font-size: clamp(60px, 13vw, 90px);

    }





    /* JULIE */



    .about-julie {

        padding: 90px 25px;

    }





    .about-julie-inner {

        display: flex;

        flex-direction: column;



        align-items: stretch;

    }





    .about-julie-visual {

        width: calc(100% - 35px);

        max-width: none;

    }





    .about-julie-image {

        height: 700px;

    }





    .about-julie-content {

        max-width: 650px;

    }





    /* MANIFESTO */



    .about-manifesto {

        padding: 100px 25px;

    }





    /* CRAFT */



    .about-craft {

        padding: 90px 25px;

    }





    /* WORKSHOP */



    .about-workshop {

        padding: 90px 25px;

    }





    .about-workshop-inner {

        display: flex;

        flex-direction: column;



        align-items: stretch;

    }





    .about-workshop-content {

        max-width: 650px;

    }





    .about-workshop-images {

        width: 100%;



        min-height: 650px;

    }





    /* SERVICE */



    .about-service {

        padding: 90px 25px;

    }





    .about-service-inner {

        display: block;

    }





    .about-service-content {

        max-width: 600px;



        margin-top: 40px;

    }





    /* DISCOVER */



    .about-discover {

        padding: 90px 25px;

    }





    .about-final {

        padding: 100px 25px;

    }



}





/* ==========================================================

   MOBILE <= 550PX

========================================================== */



@media (max-width: 550px) {



    .about-hero {

        min-height: 540px;



        padding: 25px 18px 30px;

    }





    .about-hero-meta span:last-child {

        display: none;

    }





    .about-hero-content {

        margin: 55px auto;

    }





    .about-hero h1 {

        font-size: clamp(48px, 15vw, 66px);



        line-height: .92;

    }





    .about-hero-text {

        margin-top: 27px;



        font-size: 13px;

    }





    .about-hero-bottom {

        justify-content: flex-start;

        flex-wrap: wrap;



        gap: 10px 18px;

    }





    /* JULIE */



    .about-julie,

    .about-craft,

    .about-workshop,

    .about-service,

    .about-discover {

        padding: 75px 18px;

    }





    .about-julie-inner {

        gap: 60px;

    }





    .about-julie-visual {

        width: calc(100% - 20px);

    }





    .about-julie-image {

        height: 500px;

    }





    .about-julie-caption {

        right: -20px;

        bottom: 25px;



        width: 100px;

        height: 100px;

    }





    .about-julie-caption > span {

        font-size: 19px;

    }





    .about-julie h2,

    .about-workshop h2 {

        font-size: clamp(40px, 12vw, 53px);

    }





    .about-julie-lead {

        font-size: 14px !important;

    }





    .about-julie-content > p {

        font-size: 13px;

    }





    /* MANIFESTO */



    .about-manifesto {

        padding: 85px 18px;

    }





    .about-manifesto-small {

        margin-bottom: 30px;

    }





    .about-manifesto-text {

        font-size: clamp(38px, 11vw, 52px);

    }





    /* CRAFT */



    .about-craft-heading h2 {

        font-size: clamp(42px, 12vw, 56px);

    }





    .about-craft-grid {

        grid-template-columns: 1fr;



        margin-top: 55px;

    }





    .about-craft-item {

        min-height: 270px;



        padding: 25px 0;



        border-right: 0;

    }





    .about-craft-item h3 {

        font-size: 21px;

    }





    /* WORKSHOP */



    .about-workshop-inner {

        gap: 55px;

    }





    .about-workshop-images {

        min-height: 500px;

    }





    .about-workshop-image-main {

        width: 88%;

        height: 430px;

    }





    .about-workshop-image-small {

        width: 48%;

        height: 210px;



        border-width: 8px;

    }





    /* SERVICE */



    .about-service-heading h2 {

        font-size: clamp(42px, 12vw, 56px);

    }





    .about-service-content p {

        font-size: 13px;

    }





    /* DISCOVER */



    .about-discover-header {

        margin-bottom: 50px;

    }





    .about-discover-header h2 {

        font-size: clamp(42px, 12vw, 56px);

    }





    .about-discover-item {

        min-height: 125px;



        grid-template-columns: 45px 1fr 45px;



        padding: 20px 0;

    }





    .about-discover-item:hover {

        padding-left: 10px;

        padding-right: 10px;

    }





    .about-discover-arrow {

        width: 40px;

        height: 40px;

    }





    .about-discover-item h3 {

        font-size: 20px;

    }





    /* FINAL */



    .about-final {

        padding: 80px 18px;

    }





    .about-final h2 {

        font-size: clamp(43px, 12vw, 58px);

    }





    .about-final-button {

        padding-left: 18px;



        gap: 17px;

    }





    .about-final-button > span:first-child {

        font-size: 12px;

    }



}





/* ==========================================================

   <= 380PX

========================================================== */



@media (max-width: 380px) {



    .about-hero,

    .about-julie,

    .about-manifesto,

    .about-craft,

    .about-workshop,

    .about-service,

    .about-discover,

    .about-final {

        padding-left: 15px;

        padding-right: 15px;

    }





    .about-julie-image {

        height: 440px;

    }





    .about-workshop-images {

        min-height: 450px;

    }





    .about-workshop-image-main {

        height: 390px;

    }





    .about-workshop-image-small {

        height: 185px;

    }



}