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

   HERO — LE TEMPS D'UNE HISTOIRE

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



.hero {

    position: relative;



    width: 100%;



    /* Desktop */

    height: calc(100vh - 110px);

    min-height: 620px;

    max-height: 900px;



    display: flex;

    align-items: center;

    justify-content: center;



    overflow: hidden;

    background-repeat: no-repeat;



    color: #FFFFFF;

}


.hero-bg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: 0;
}




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

   OVERLAY

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



.hero-overlay {

    position: absolute;

    inset: 0;



    z-index: 1;



    pointer-events: none;



    background:

        linear-gradient(

            180deg,

            rgba(0, 0, 0, 0.28) 0%,

            rgba(0, 0, 0, 0.08) 35%,

            rgba(0, 0, 0, 0.16) 60%,

            rgba(0, 0, 0, 0.60) 100%

        );

}





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

   CONTENU CENTRAL

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



.hero-content {

    position: relative;

    z-index: 2;



    width: min(1400px, calc(100% - 80px));



    display: flex;

    flex-direction: column;



    align-items: center;



    text-align: center;

}





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

   PETIT TEXTE

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



.hero-intro {

    margin: 0 0 25px;



    font-family: "Libre Baskerville", serif;



    color: #E2A4B1;



    font-size: 14px;

    font-style: italic;



    letter-spacing: 0.12em;

}





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

   TITRE

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



.hero-title {

    width: 100%;



    margin: 0;



    display: flex;

    flex-direction: column;



    align-items: center;



    position: relative;

    z-index: 3;



    color: #FFFFFF;



    text-shadow:

        0 2px 8px rgba(0, 0, 0, 0.25),

        0 8px 30px rgba(0, 0, 0, 0.20);



    text-transform: uppercase;

}





/* DÉCORATION */



.hero-title-first {

    display: block;



    max-width: 100%;



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



    font-size: clamp(64px, 7.2vw, 118px);



    font-weight: 400;



    line-height: 0.9;



    letter-spacing: -0.035em;

}





/* ÉVÈNEMENTIELLE */



.hero-title-second {

    display: block;



    max-width: 100%;



    margin-top: 12px;



    font-family: "Libre Baskerville", serif;



    font-size: clamp(47px, 5.4vw, 88px);



    font-weight: 400;

    font-style: italic;



    line-height: 1;



    letter-spacing: -0.035em;

}





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

   DANS LE FINISTÈRE

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



.hero-location {

    width: min(650px, 70%);



    margin-top: 42px;



    display: flex;



    align-items: center;

    justify-content: center;



    gap: 25px;

}





.hero-line {

    height: 1px;



    flex: 1;



    background: rgba(255, 255, 255, 0.55);

}





.hero-location-text {

    flex-shrink: 0;



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



    font-size: 13px;

    font-weight: 500;



    letter-spacing: 0.32em;



    text-transform: uppercase;



    white-space: nowrap;

}





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

   BAS GAUCHE

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



.hero-bottom-left {

    position: absolute;



    z-index: 2;



    left: 40px;

    bottom: 30px;



    display: flex;

    flex-direction: column;



    gap: 5px;



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



    color: rgba(255, 255, 255, 0.6);



    font-size: 12px;



    letter-spacing: 0.08em;



    text-transform: uppercase;

}





.hero-bottom-label {

    color: #E2A4B1;

}





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

   BAS DROITE

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



.hero-bottom-right {

    position: absolute;



    z-index: 2;



    right: 40px;

    bottom: 28px;



    display: flex;



    align-items: center;



    gap: 14px;

}





.hero-bottom-right > span {

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



    color: #E2A4B1;



    font-size: 27px;

}





.hero-bottom-right p {

    margin: 0;



    padding-left: 14px;



    border-left: 1px solid rgba(255, 255, 255, 0.35);



    font-family: "Libre Baskerville", serif;



    color: rgba(255, 255, 255, 0.65);



    font-size: 12px;

    font-style: italic;



    line-height: 1.6;

}





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

   BOUTON SCROLL

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



.hero-scroll {

    position: absolute;



    z-index: 2;



    left: 50%;

    bottom: 27px;



    width: 44px;

    height: 44px;



    display: flex;



    align-items: center;

    justify-content: center;



    border: 1px solid rgba(255, 255, 255, 0.55);



    border-radius: 50%;



    color: #FFFFFF;



    text-decoration: none;



    transform: translateX(-50%);



    transition:

background 0.3s ease,

        border-color 0.3s ease,

        color 0.3s ease,

        transform 0.3s ease;

}





.hero-scroll:hover {

    background: #E2A4B1;



    border-color: #E2A4B1;



    color: #000000;



    transform:

        translateX(-50%)

        translateY(4px);

}





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

   PETIT DESKTOP

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



@media (max-width: 1250px) {



    .hero {

        min-height: 600px;

    }





    .hero-content {

        width: calc(100% - 60px);

    }





    .hero-title-first {

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

    }





    .hero-title-second {

        font-size: clamp(44px, 5.2vw, 68px);

    }





    .hero-location {

        margin-top: 36px;

    }



}





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

   TABLETTE

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



@media (max-width: 1050px) {



    .hero {

        /*

         \* Le hero n'est plus gigantesque.

         \* On lui donne une hauteur raisonnable.

         */



        height: 680px;

        min-height: 0;

        max-height: none;



        background-size: cover;



        /*

         \* Tu peux modifier le deuxième pourcentage

         \* si le sujet de ta photo est plus haut/bas.

         */



        background-position: center 50%;

    }





    .hero-content {

        width: calc(100% - 60px);

    }





    .hero-intro {

        margin-bottom: 22px;



        font-size: 13px;

    }





    .hero-title-first {

        font-size: clamp(52px, 9vw, 76px);



        line-height: 0.95;

    }





    .hero-title-second {

        margin-top: 10px;



        font-size: clamp(39px, 7vw, 58px);



        line-height: 1;

    }





    .hero-location {

        width: min(540px, 85%);



        margin-top: 32px;



        gap: 18px;

    }





    .hero-location-text {

        font-size: 12px;



        letter-spacing: 0.27em;

    }





    .hero-bottom-left {

        left: 25px;

        bottom: 25px;

    }





    .hero-bottom-right {

        right: 25px;

        bottom: 24px;

    }





    .hero-scroll {

        width: 42px;

        height: 42px;



        bottom: 22px;

    }



}





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

   PETITE TABLETTE

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



@media (max-width: 768px) {



    .hero {

        height: 620px;



        background-position: center center;

    }





    .hero-content {

        width: calc(100% - 40px);

    }





    .hero-title-first {

        font-size: clamp(46px, 10vw, 65px);

    }





    .hero-title-second {

        font-size: clamp(34px, 7.8vw, 50px);

    }





    .hero-location {

        width: 90%;



        margin-top: 28px;

    }





    /*

     \* On enlève les informations décoratives

     \* pour laisser respirer le hero.

     */



    .hero-bottom-left,

    .hero-bottom-right {

        display: none;

    }



}





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

   MOBILE

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



@media (max-width: 550px) {



    .hero {

        /*

         \* IMPORTANT :

         \* plus de 100vh sur mobile.

         \* Ça évite l'image énorme.

         */



        height: 560px;

        min-height: 0;



        /*

         \* Cover remplit toujours le hero,

         \* mais le hero lui-même est limité.

         */



        background-size: cover;

        background-position: center center;

    }





    .hero-overlay {

        position: absolute;

    inset: 0;



    z-index: 1;



    background:

        radial-gradient(

            ellipse at center,

            rgba(0, 0, 0, 0.28) 0%,

            rgba(0, 0, 0, 0.10) 45%,

            transparent 72%

        ),

        linear-gradient(

            180deg,

            rgba(0, 0, 0, 0.20) 0%,

            rgba(0, 0, 0, 0.05) 40%,

            rgba(0, 0, 0, 0.50) 100%

        );



    pointer-events: none;

    }





    .hero-content {

        width: calc(100% - 32px);

    }





    .hero-intro {

        margin-bottom: 18px;



        font-size: 12px;



        letter-spacing: 0.08em;

    }





    /* DÉCORATION */



    .hero-title-first {

        width: 100%;



        font-size: clamp(38px, 11.5vw, 55px);



        line-height: 0.95;



        letter-spacing: -0.025em;



        overflow-wrap: normal;

        word-break: normal;

    }





    /* ÉVÈNEMENTIELLE */



    .hero-title-second {

        width: 100%;



        margin-top: 8px;



        font-size: clamp(29px, 8.3vw, 40px);



        line-height: 1.05;



        letter-spacing: -0.025em;



        overflow-wrap: normal;

        word-break: normal;

    }





    .hero-location {

        width: 100%;



        margin-top: 25px;



        gap: 10px;

    }





    .hero-line {

        min-width: 15px;

    }





    .hero-location-text {

        font-size: 10px;



        letter-spacing: 0.18em;

    }





    .hero-scroll {

        width: 40px;

        height: 40px;



        bottom: 18px;



        font-size: 14px;

    }



}





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

   PETIT MOBILE

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



@media (max-width: 380px) {



    .hero {

        height: 520px;

    }





    .hero-content {

        width: calc(100% - 26px);

    }





    .hero-title-first {

        font-size: 36px;

    }





    .hero-title-second {

        font-size: 27px;

    }





    .hero-location {

        gap: 7px;

    }





    .hero-location-text {

        font-size: 10px;



        letter-spacing: 0.13em;

    }



}









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

PRESENTATION PRESENTATION PRESENTATION PRESENTATION PRESENTATION PRESENTATION

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



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

   ABOUT HOME

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



.about-home {

    position: relative;



    width: 100%;



    padding: 150px 40px;



    overflow: hidden;



    background: #000000;



    color: #FFFFFF;

}





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

   GROS MOT EN ARRIÈRE-PLAN

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



.about-home-background-word {

    position: absolute;



    left: -25px;

    bottom: -35px;



    z-index: 0;



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



    font-size: clamp(120px, 17vw, 300px);



    font-weight: 400;



    line-height: 0.75;



    letter-spacing: -0.06em;



    color: rgba(255, 255, 255, 0.025);



    white-space: nowrap;



    pointer-events: none;

}





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

   STRUCTURE

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



.about-home-inner {

    position: relative;



    z-index: 2;



    width: 100%;

    max-width: 1450px;



    margin: 0 auto;



    display: grid;



    grid-template-columns:

        minmax(0, 0.95fr)

        minmax(380px, 0.7fr);



    align-items: center;



    gap: clamp(80px, 10vw, 170px);

}





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

   CONTENU

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



.about-home-content {

    width: 100%;



    max-width: 720px;

}





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

   LABEL

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



.about-home-label {

    margin-bottom: 35px;



    display: flex;



    align-items: center;



    gap: 18px;

}





.about-home-label-line {

    width: 45px;

    height: 1px;



    flex-shrink: 0;



    background: #E2A4B1;

}





.about-home-label span:last-child {

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



    color: #E2A4B1;



    font-size: 12px;



    font-weight: 500;



    letter-spacing: 0.25em;



    text-transform: uppercase;

}





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

   TITRE

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



.about-home-title {

    margin: 0;



    max-width: 700px;



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



    color: #FFFFFF;



    font-size: clamp(55px, 5vw, 82px);



    font-weight: 400;



    line-height: 0.98;



    letter-spacing: -0.04em;



    text-transform: uppercase;

}





.about-home-title span {

    display: block;



    margin-top: 10px;



    font-family: "Libre Baskerville", serif;



    color: #E2A4B1;



    font-size: 0.72em;



    font-weight: 400;



    font-style: italic;



    line-height: 1.08;



    text-transform: none;

}





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

   INTRO

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



.about-home-intro {

    max-width: 540px;



    margin: 38px 0 0;



    font-family: "Libre Baskerville", serif;



    color: rgba(255, 255, 255, 0.92);



    font-size: 18px;



    font-style: italic;



    line-height: 1.65;

}





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

   TEXTE

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



.about-home-text {

    max-width: 620px;



    margin-top: 30px;



    padding-left: 30px;



    border-left: 1px solid rgba(226, 164, 177, 0.45);

}





.about-home-text p {

    margin: 0 0 18px;



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



    color: rgba(255, 255, 255, 0.60);



    font-size: 16px;



    font-weight: 400;



    line-height: 1.85;

}





.about-home-text p:last-child {

    margin-bottom: 0;

}





.about-home-text strong {

    color: rgba(255, 255, 255, 0.92);



    font-weight: 500;

}





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

   BAS

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



.about-home-bottom {

    margin-top: 42px;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 40px;

}





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

   CTA

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



.about-home-link {

    position: relative;



    display: inline-flex;



    align-items: center;



    gap: 28px;



    padding: 7px 7px 7px 22px;



    overflow: hidden;



    border: 1px solid rgba(226, 164, 177, 0.75);



    border-radius: 100px;



    color: #FFFFFF;



    text-decoration: none;



    isolation: isolate;

}





.about-home-link::before {

    content: "";



    position: absolute;



    inset: 0;



    z-index: -1;



    background: #E2A4B1;



    transform: translateX(-101%);



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

}





.about-home-link > span:first-child {

    font-family: "Libre Baskerville", serif;



    font-size: 13px;



    font-style: italic;



    transition: color 0.35s ease;

}





.about-home-arrow {

    width: 40px;

    height: 40px;



    display: flex;



    align-items: center;

    justify-content: center;



    flex-shrink: 0;



    border-radius: 50%;



    background: #E2A4B1;



    color: #000000;



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



    font-size: 17px;



    transition:

background 0.35s ease,

        color 0.35s ease,

        transform 0.4s ease;

}





.about-home-link:hover::before {

    transform: translateX(0);

}





.about-home-link:hover > span:first-child {

    color: #000000;

}





.about-home-link:hover .about-home-arrow {

    background: #000000;



    color: #FFFFFF;



    transform: rotate(45deg);

}





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

   LOCALISATION

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



.about-home-location {

    display: flex;



    align-items: center;



    gap: 13px;

}





.about-home-location > span {

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



    color: #E2A4B1;



    font-size: 30px;

}





.about-home-location p {

    margin: 0;



    padding-left: 13px;



    border-left: 1px solid rgba(255, 255, 255, 0.22);



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



    color: rgba(255, 255, 255, 0.45);



    font-size: 11px;



    line-height: 1.5;



    letter-spacing: 0.14em;



    text-transform: uppercase;

}





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

   IMAGE

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



.about-home-visual {

    position: relative;



    width: 100%;

}





.about-home-image-wrap {

    position: relative;



    width: 100%;



    overflow: hidden;

}





.about-home-image-wrap::before {

    content: "";



    position: absolute;



    inset: 0;



    z-index: 2;



    border: 1px solid rgba(255, 255, 255, 0.12);



    pointer-events: none;

}





.about-home-image-wrap img {

    display: block;



    width: 100%;



    height: 650px;



    object-fit: cover;



    object-position: center;



    filter:

        brightness(0.88)

        contrast(1.03);

}





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

   TEXTE SOUS IMAGE

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



.about-home-image-caption {

    margin-top: 16px;



    display: flex;



    align-items: center;



    justify-content: space-between;

}





.about-home-image-caption span {

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



    color: rgba(255, 255, 255, 0.38);



    font-size: 11px;



    letter-spacing: 0.18em;



    text-transform: uppercase;

}





.about-home-image-caption span:nth-child(2) {

    color: #E2A4B1;

}





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

   PETIT DESKTOP

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



@media (max-width: 1250px) {



    .about-home {

        padding: 120px 35px;

    }





    .about-home-inner {

        grid-template-columns:

            minmax(0, 1fr)

            minmax(330px, 0.72fr);



        gap: 70px;

    }





    .about-home-title {

        font-size: clamp(50px, 5vw, 68px);

    }





    .about-home-image-wrap img {

        height: 590px;

    }



}





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

   TABLETTE

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



@media (max-width: 1050px) {



    .about-home {

        padding: 100px 30px;

    }





    .about-home-inner {

        grid-template-columns: 1fr 0.8fr;



        gap: 50px;

    }





    .about-home-title {

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

    }





    .about-home-intro {

        margin-top: 28px;



        font-size: 16px;

    }





    .about-home-text {

        margin-top: 25px;



        padding-left: 22px;

    }





    .about-home-text p {

        font-size: 16px;

    }





    .about-home-image-wrap img {

        height: 520px;

    }





    .about-home-location {

        display: none;

    }



}





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

   PETITE TABLETTE

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



@media (max-width: 768px) {



    .about-home {

        padding: 90px 25px;

    }





    .about-home-inner {

        display: flex;



        flex-direction: column;



        gap: 65px;

    }





    .about-home-content {

        max-width: 650px;

    }





    .about-home-title {

        font-size: clamp(43px, 8vw, 60px);

    }





    .about-home-visual {

        width: 80%;

    }





    .about-home-image-wrap img {

        height: 550px;

    }





    .about-home-background-word {

        font-size: 180px;

    }



}





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

   MOBILE

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



@media (max-width: 550px) {



    .about-home {

        padding: 75px 18px;

    }





    .about-home-inner {

        gap: 50px;

    }





    /* LABEL */



    .about-home-label {

        margin-bottom: 25px;



        gap: 12px;

    }





    .about-home-label-line {

        width: 30px;

    }





    .about-home-label span:last-child {

        font-size: 11px;



        letter-spacing: 0.18em;

    }





    /* TITRE */



    .about-home-title {

        font-size: clamp(35px, 10vw, 47px);



        line-height: 1;

    }





    .about-home-title span {

        margin-top: 7px;



        font-size: 0.75em;

    }





    /* INTRO */



    .about-home-intro {

        margin-top: 25px;



        font-size: 16px;



        line-height: 1.6;

    }





    /* TEXTE */



    .about-home-text {

        margin-top: 25px;



        padding-left: 18px;

    }





    .about-home-text p {

        font-size: 14px;



        line-height: 1.75;

    }





    /* CTA */



    .about-home-bottom {

        margin-top: 30px;

    }





    .about-home-link {

        gap: 20px;



        padding-left: 18px;

    }





    .about-home-arrow {

        width: 38px;

        height: 38px;

    }





    /* IMAGE */



    .about-home-visual {

        width: 88%;



    }





    .about-home-image-wrap img {

        height: 440px;

    }





    .about-home-image-caption span {

        font-size: 10px;



        letter-spacing: 0.12em;

    }





    /* MOT ARRIÈRE-PLAN */



    .about-home-background-word {

        left: -10px;



        bottom: 5px;



        font-size: 105px;

    }



}





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

   PETIT MOBILE

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



@media (max-width: 380px) {



    .about-home {

        padding-left: 15px;



        padding-right: 15px;

    }





    .about-home-title {

        font-size: 33px;

    }





    .about-home-visual {

        width: 92%;

    }





    .about-home-image-wrap img {

        height: 390px;

    }





    .about-home-image-caption {

        gap: 10px;

    }



}







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

   SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES

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



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

   SERVICES

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



.services-home {

    width: 100%;



    padding: 140px 40px;



    background: #FAF7F4;



    color: #000000;

}





.services-home-inner {

    width: 100%;



    max-width: 1450px;



    margin: 0 auto;

}





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

   HEADER

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



.services-home-header {

    margin-bottom: 75px;



    display: grid;



    grid-template-columns: 0.7fr 1.8fr;



    align-items: end;



    gap: 60px;

}





/* LABEL */



.services-home-label {

    padding-bottom: 8px;



    display: flex;



    align-items: center;



    gap: 15px;

}





.services-home-label span {

    width: 42px;



    height: 1px;



    background: #E2A4B1;

}





.services-home-label p {

    margin: 0;



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



    color: #C98291;



    font-size: 12px;



    font-weight: 500;



    letter-spacing: 0.23em;



    text-transform: uppercase;

}





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

   TITRE SECTION

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



.services-home-title {

    max-width: 850px;



    margin: 0;



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



    color: #000000;



    font-size: clamp(48px, 4.7vw, 76px);



    font-weight: 400;



    line-height: 0.95;



    letter-spacing: -0.04em;



    text-transform: uppercase;

}





.services-home-title span {

    display: block;



    margin-top: 9px;



    font-family: "Libre Baskerville", serif;



    color: #D48D9C;



    font-size: 0.67em;



    font-weight: 400;



    font-style: italic;



    line-height: 1.1;



    text-transform: none;

}





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

   GRID

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



.services-home-grid {

    display: grid;



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



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



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

}





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

   CARD

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



.service-card {

    position: relative;



    min-height: 520px;



    padding: 35px 45px 40px;



    display: flex;



    flex-direction: column;



    overflow: hidden;



    transition:

background 0.45s ease,

        color 0.45s ease;

}





/* séparation entre les deux */



.service-card:first-child {

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

}





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

   FOND HOVER

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



.service-card::before {

    content: "";



    position: absolute;



    inset: 0;



    z-index: 0;



    background: #000000;



    transform: translateY(101%);



    transition:

        transform 0.55s cubic-bezier(.77, 0, .18, 1);

}





.service-card:hover::before {

    transform: translateY(0);

}





.service-card > * {

    position: relative;



    z-index: 1;

}





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

   HAUT CARD

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



.service-card-head {

    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 20px;

}





.service-number {

    font-family: "Libre Baskerville", serif;



    color: #D48D9C;



    font-size: 14px;



    font-style: italic;

}





.service-category {

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



    color: #77716E;



    font-size: 11px;



    font-weight: 500;



    letter-spacing: 0.2em;



    text-transform: uppercase;



    transition: color 0.4s ease;

}





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

   CONTENU

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



.service-card-content {

    margin: auto 0;

}





/* TITRE */



.service-card h3 {

    max-width: 570px;



    margin: 60px 0 0;



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



    color: #000000;



    font-size: clamp(40px, 4vw, 62px);



    font-weight: 400;



    line-height: 1;



    letter-spacing: -0.04em;



    text-transform: uppercase;



    transition: color 0.4s ease;

}





.service-card h3 span {

    display: block;



    margin: 6px 0;



    font-family: "Libre Baskerville", serif;



    color: #D48D9C;



    font-size: 0.72em;



    font-weight: 400;



    font-style: italic;



    line-height: 1.05;



    text-transform: none;

}





/* DESCRIPTION */



.service-card-content > p {

    max-width: 500px;



    margin: 28px 0 0;



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



    color: #696461;



    font-size: 16px;



    line-height: 1.8;



    transition: color 0.4s ease;

}





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

   LIEN

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



.service-link {

    width: 100%;



    margin-top: 45px;



    padding-top: 22px;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 25px;



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



    color: #000000;



    text-decoration: none;



    transition:

        color 0.4s ease,

        border-color 0.4s ease;

}





.service-link > span:first-child {

    font-family: "Libre Baskerville", serif;



    font-size: 13px;



    font-style: italic;

}





.service-link-arrow {

    width: 44px;



    height: 44px;



    display: flex;



    align-items: center;



    justify-content: center;



    flex-shrink: 0;



    border: 1px solid #D48D9C;



    border-radius: 50%;



    color: #000000;



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



    font-size: 17px;



    transition:

background 0.35s ease,

        color 0.35s ease,

        transform 0.4s ease;

}





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

   HOVER

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



/* ==========================================================
   HOVER SERVICES
========================================================== */

.service-card:hover h3 {
    color: #FFFFFF;
}

.service-card:hover h3 span {
    color: #E2A4B1;
}

.service-card:hover .service-number {
    color: #E2A4B1;
}

.service-card:hover .service-category {
    color: rgba(255, 255, 255, 0.65);
}

.service-card:hover .service-card-content > p {
    color: rgba(255, 255, 255, 0.75);
}

.service-card:hover .service-link {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.25);
}

.service-card:hover .service-link-arrow {
    background: #E2A4B1;
    color: #000000;

    transform: rotate(45deg);
}





.service-card:hover .service-link-arrow {

    background: #E2A4B1;



    color: #000000;



    transform: rotate(45deg);

}





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

   TABLETTE

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



@media (max-width: 1050px) {



    .services-home {

        padding: 105px 30px;

    }





    .services-home-header {

        margin-bottom: 55px;



        grid-template-columns: 0.6fr 1.6fr;



        gap: 40px;

    }





    .services-home-title {

        font-size: clamp(44px, 5vw, 60px);

    }





    .service-card {

        min-height: 480px;



        padding: 30px;

    }





    .service-card h3 {

        font-size: clamp(35px, 4.2vw, 48px);

    }



}





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

   PETITE TABLETTE

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



@media (max-width: 768px) {



    .services-home {

        padding: 85px 25px;

    }





    .services-home-header {

        display: block;



        margin-bottom: 45px;

    }





    .services-home-label {

        margin-bottom: 22px;

    }





    .services-home-title {

        max-width: 600px;



        font-size: clamp(40px, 8vw, 57px);

    }





    /* Cards l'une sous l'autre */



    .services-home-grid {

        grid-template-columns: 1fr;

    }





    .service-card {

        min-height: 440px;



        padding: 35px 30px;

    }





    .service-card:first-child {

        border-right: none;



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

    }





    .service-card h3 {

        max-width: 600px;



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

    }





    .service-card-content > p {

        max-width: 550px;

    }



}





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

   MOBILE

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



@media (max-width: 550px) {



    .services-home {

        padding: 70px 18px;

    }





    /* HEADER */



    .services-home-header {

        margin-bottom: 35px;

    }





    .services-home-label {

        margin-bottom: 18px;

    }





    .services-home-label span {

        width: 30px;

    }





    .services-home-label p {

        font-size: 11px;

    }





    .services-home-title {

        font-size: clamp(33px, 9.5vw, 43px);



        line-height: 1;

    }





    /* CARD */



    .service-card {

        min-height: 0;



        padding: 28px 18px 25px;

    }





    .service-card-head {

        margin-bottom: 55px;

    }





    .service-number {

        font-size: 12px;

    }





    .service-category {

        font-size: 10px;



        letter-spacing: 0.14em;

    }





    /* TITRE */



    .service-card h3 {

        margin-top: 0;



        font-size: clamp(30px, 9vw, 39px);

    }





    .service-card-content > p {

        margin-top: 22px;



        font-size: 14px;



        line-height: 1.7;

    }





    /* LIEN */



    .service-link {

        margin-top: 35px;



        padding-top: 18px;

    }





    .service-link > span:first-child {

        font-size: 12px;

    }





    .service-link-arrow {

        width: 40px;



        height: 40px;



        font-size: 16px;

    }



}





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

   PETIT MOBILE

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



@media (max-width: 380px) {



    .services-home {

        padding-left: 15px;



        padding-right: 15px;

    }





    .service-card {

        padding-left: 15px;



        padding-right: 15px;

    }





    .service-card h3 {

        font-size: 29px;

    }



}



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

   PHOTOBOOTH PHOTOBOOTH PHOTOBOOTH PHOTOBOOTH PHOTOBOOTH

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



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

   PHOTOBOOTH

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



.photobooth-home {

    position: relative;



    width: 100%;



    padding: 150px 40px 160px;



    overflow: hidden;



    background: #F6E8EB;



    color: #000000;

}





.photobooth-home-inner {

    width: 100%;

    max-width: 1450px;



    margin: 0 auto;



    display: grid;



    grid-template-columns:

        minmax(0, 0.85fr)

        minmax(0, 1.15fr);



    align-items: center;



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

}





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

   CONTENU

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



.photobooth-content {

    width: 100%;



    max-width: 600px;

}





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

   LABEL

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



.photobooth-label {

    margin-bottom: 30px;



    display: flex;



    align-items: center;



    gap: 16px;

}





.photobooth-label-line {

    width: 42px;



    height: 1px;



    flex-shrink: 0;



    background: #000000;

}





.photobooth-label span:last-child {

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



    color: #8D626B;



    font-size: 12px;



    font-weight: 500;



    letter-spacing: 0.22em;



    text-transform: uppercase;

}





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

   TITRE

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



.photobooth-title {

    margin: 0;



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



    color: #000000;



    font-size: clamp(65px, 6vw, 100px);



    font-weight: 400;



    line-height: 0.85;



    letter-spacing: -0.05em;



    text-transform: uppercase;

}





.photobooth-title span {

    display: block;



    margin-top: 12px;



    font-family: "Libre Baskerville", serif;



    color: #C77D8C;



    font-size: 0.72em;



    font-weight: 400;



    font-style: italic;



    line-height: 1;



    text-transform: none;

}





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

   SOUS-TITRE

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



.photobooth-subtitle {

    margin: 35px 0 0;



    font-family: "Libre Baskerville", serif;



    color: #000000;



    font-size: 17px;



    font-style: italic;



    line-height: 1.5;

}





.photobooth-subtitle span {

    display: block;

}





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

   TEXTE

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



.photobooth-text {

    max-width: 550px;



    margin-top: 27px;

}





.photobooth-text p {

    margin: 0 0 16px;



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



    color: #625A5C;



    font-size: 16px;



    line-height: 1.8;

}





.photobooth-text p:last-child {

    margin-bottom: 0;

}





.photobooth-text strong {

    color: #000000;



    font-weight: 500;

}





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

   AVANTAGES

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



.photobooth-features {

    margin-top: 38px;

}





.photobooth-features-title {

    margin: 0 0 15px;



    font-family: "Libre Baskerville", serif;



    color: #000000;



    font-size: 14px;



    font-style: italic;

}





.photobooth-features ul {

    margin: 0;



    padding: 0;



    list-style: none;



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

}





.photobooth-features li {

    padding: 13px 0;



    display: grid;



    grid-template-columns: 35px 1fr;



    align-items: center;



    gap: 12px;



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



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



    color: #3E393A;



    font-size: 13px;



    line-height: 1.5;

}





.feature-number {

    color: #B96E7D;



    font-family: "Libre Baskerville", serif;



    font-size: 11px;



    font-style: italic;

}





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

   CTA

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



.photobooth-cta {

    position: relative;



    width: fit-content;



    margin-top: 35px;



    padding: 7px 7px 7px 21px;



    display: inline-flex;



    align-items: center;



    gap: 25px;



    overflow: hidden;



    border: 1px solid #000000;



    border-radius: 100px;



    color: #000000;



    text-decoration: none;



    isolation: isolate;

}





.photobooth-cta::before {

    content: "";



    position: absolute;



    inset: 0;



    z-index: -1;



    background: #000000;



    transform: translateX(-101%);



    transition:

        transform 0.45s cubic-bezier(.77, 0, .18, 1);

}





.photobooth-cta > span:first-child {

    font-family: "Libre Baskerville", serif;



    font-size: 13px;



    font-style: italic;



    transition: color 0.35s ease;

}





.photobooth-cta-arrow {

    width: 40px;

    height: 40px;



    display: flex;



    align-items: center;

    justify-content: center;



    flex-shrink: 0;



    border-radius: 50%;



    background: #000000;



    color: #FFFFFF;



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



    font-size: 17px;



    transition:

background 0.35s ease,

        color 0.35s ease,

        transform 0.4s ease;

}





.photobooth-cta:hover::before {

    transform: translateX(0);

}





.photobooth-cta:hover > span:first-child {

    color: #FFFFFF;

}





.photobooth-cta:hover .photobooth-cta-arrow {

    background: #E2A4B1;



    color: #000000;



    transform: rotate(45deg);

}





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

   GALERIE

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



.photobooth-gallery {

    position: relative;



    width: 100%;



    height: 760px;

}





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

   PHOTOS

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



.photobooth-photo {

    position: absolute;



    overflow: hidden;



    background: #E2A4B1;

}





.photobooth-photo img {

    display: block;



    width: 100%;

    height: 100%;



    object-fit: cover;



    transition: transform 0.8s cubic-bezier(.2, .7, .2, 1);

}





.photobooth-photo:hover img {

    transform: scale(1.035);

}





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

   PHOTO PRINCIPALE

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



.photobooth-photo-main {

    top: 0;

    left: 0;



    z-index: 1;



    width: 68%;

    height: 600px;

}





.photobooth-photo-main::after {

    content: "";



    position: absolute;



    inset: 0;



    background:

        linear-gradient(

            180deg,

            transparent 60%,

            rgba(0, 0, 0, 0.30) 100%

        );



    pointer-events: none;

}





.photobooth-photo-index {

    position: absolute;



    z-index: 2;



    left: 20px;

    bottom: 18px;



    font-family: "Libre Baskerville", serif;



    color: #FFFFFF;



    font-size: 12px;



    font-style: italic;

}





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

   PHOTO 2

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



.photobooth-photo-second {

    top: 70px;

    right: 0;



    z-index: 2;



    width: 37%;

    height: 300px;



    border: 10px solid #F6E8EB;

}





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

   PHOTO 3

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



.photobooth-photo-third {

    right: 40px;

    bottom: 0;



    z-index: 3;



    width: 46%;

    height: 300px;



    border: 10px solid #F6E8EB;

}





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

   PETIT BLOC TEXTE

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



.photobooth-gallery-note {

    position: absolute;



    left: 40px;

    bottom: 45px;



    z-index: 4;



    display: flex;



    align-items: center;



    gap: 14px;

}





.photobooth-gallery-note > span {

    font-family: "Libre Baskerville", serif;



    color: #B96E7D;



    font-size: 25px;



    font-style: italic;

}





.photobooth-gallery-note p {

    margin: 0;



    padding-left: 14px;



    border-left: 1px solid rgba(0, 0, 0, 0.25);



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



    color: #5D5557;



    font-size: 11px;



    line-height: 1.5;



    letter-spacing: 0.12em;



    text-transform: uppercase;

}





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

   PETIT DESKTOP

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



@media (max-width: 1250px) {



    .photobooth-home {

        padding: 120px 35px;

    }





    .photobooth-home-inner {

        gap: 70px;

    }





    .photobooth-gallery {

        height: 680px;

    }





    .photobooth-photo-main {

        height: 540px;

    }





    .photobooth-photo-second {

        height: 260px;

    }





    .photobooth-photo-third {

        height: 270px;

    }



}





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

   TABLETTE

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



@media (max-width: 1050px) {



    .photobooth-home {

        padding: 100px 30px;

    }





    .photobooth-home-inner {

        grid-template-columns: 1fr 0.9fr;



        gap: 50px;

    }





    .photobooth-title {

        font-size: clamp(55px, 7vw, 75px);

    }





    .photobooth-gallery {

        height: 600px;

    }





    .photobooth-photo-main {

        width: 76%;

        height: 470px;

    }





    .photobooth-photo-second {

        width: 43%;

        height: 220px;

    }





    .photobooth-photo-third {

        right: 10px;



        width: 50%;

        height: 240px;

    }





    .photobooth-gallery-note {

        left: 10px;

        bottom: 30px;

    }



}





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

   PETITE TABLETTE

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



@media (max-width: 768px) {



    .photobooth-home {

        padding: 90px 25px;

    }





    .photobooth-home-inner {

        display: flex;



        flex-direction: column;



        gap: 70px;

    }





    .photobooth-content {

        max-width: 650px;

    }





    .photobooth-title {

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

    }





    .photobooth-text {

        max-width: 620px;

    }





    /* GALERIE */



    .photobooth-gallery {

        width: 100%;



        height: 650px;

    }





    .photobooth-photo-main {

        width: 68%;

        height: 520px;

    }





    .photobooth-photo-second {

        width: 38%;

        height: 250px;

    }





    .photobooth-photo-third {

        right: 20px;



        width: 45%;

        height: 270px;

    }



}





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

   MOBILE

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



@media (max-width: 550px) {



    .photobooth-home {

        padding: 75px 18px 80px;

    }





    .photobooth-home-inner {

        gap: 55px;

    }





    /* LABEL */



    .photobooth-label {

        margin-bottom: 22px;

    }





    .photobooth-label-line {

        width: 30px;

    }





    .photobooth-label span:last-child {

        font-size: 11px;

    }





    /* TITRE */



    .photobooth-title {

        font-size: clamp(45px, 14vw, 62px);

    }





    .photobooth-title span {

        margin-top: 7px;

    }





    .photobooth-subtitle {

        margin-top: 25px;



        font-size: 15px;

    }





    /* TEXTE */



    .photobooth-text {

        margin-top: 22px;

    }





    .photobooth-text p {

        font-size: 14px;



        line-height: 1.75;

    }





    /* FEATURES */



    .photobooth-features {

        margin-top: 30px;

    }





    .photobooth-features-title {

        font-size: 13px;

    }





    .photobooth-features li {

        padding: 12px 0;



        grid-template-columns: 28px 1fr;



        gap: 8px;



        font-size: 12px;

    }





    /* CTA */



    .photobooth-cta {

        margin-top: 30px;



        gap: 18px;



        padding-left: 17px;

    }





    .photobooth-cta > span:first-child {

        font-size: 12px;

    }





    .photobooth-cta-arrow {

        width: 38px;

        height: 38px;

    }





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

       GALERIE MOBILE

       On garde les 3 images mais sans les rendre énormes

    \====================================================== */



    .photobooth-gallery {

        height: 490px;

    }





    .photobooth-photo-main {

        top: 0;

        left: 0;



        width: 72%;

        height: 370px;

    }





    .photobooth-photo-second {

        top: 45px;

        right: 0;



        width: 38%;

        height: 170px;



        border-width: 6px;

    }





    .photobooth-photo-third {

        right: 10px;

        bottom: 0;



        width: 50%;

        height: 190px;



        border-width: 6px;

    }





    .photobooth-gallery-note {

        left: 5px;

        bottom: 35px;

    }





    .photobooth-gallery-note > span {

        font-size: 18px;

    }





    .photobooth-gallery-note p {

        font-size: 10px;

    }



}





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

   PETIT MOBILE

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



@media (max-width: 380px) {



    .photobooth-home {

        padding-left: 15px;

        padding-right: 15px;

    }





    .photobooth-title {

        font-size: 43px;

    }





    .photobooth-gallery {

        height: 430px;

    }





    .photobooth-photo-main {

        height: 330px;

    }





    .photobooth-photo-second {

        height: 150px;

    }





    .photobooth-photo-third {

        height: 170px;

    }



}





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

   DERNIÈRES ACTUALITÉS DERNIÈRES ACTUALITÉS DERNIÈRES ACTUALITÉS

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



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

   DERNIÈRES ACTUALITÉS

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



.latest-news {

    width: 100%;



    padding: 145px 40px 150px;



    background: #FAF7F4;



    color: #000000;

}





.latest-news-inner {

    width: 100%;



    max-width: 1450px;



    margin: 0 auto;

}





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

   HEADER

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



.latest-news-header {

    margin-bottom: 65px;



    display: flex;



    align-items: flex-end;



    justify-content: space-between;



    gap: 80px;

}





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

   LABEL

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



.latest-news-label {

    margin-bottom: 25px;



    display: flex;



    align-items: center;



    gap: 15px;

}





.latest-news-label span {

    width: 42px;



    height: 1px;



    background: #E2A4B1;

}





.latest-news-label p {

    margin: 0;



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



    color: #C98291;



    font-size: 12px;



    font-weight: 500;



    letter-spacing: 0.22em;



    text-transform: uppercase;

}





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

   TITRE

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



.latest-news-heading h2 {

    margin: 0;



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



    color: #000000;



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



    font-weight: 400;



    line-height: 0.92;



    letter-spacing: -0.04em;



    text-transform: uppercase;

}





.latest-news-heading h2 span {

    display: block;



    margin-top: 8px;



    font-family: "Libre Baskerville", serif;



    color: #D48D9C;



    font-size: 0.72em;



    font-weight: 400;



    font-style: italic;



    line-height: 1;



    text-transform: none;

}





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

   HEADER DROITE

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



.latest-news-header-right {

    width: 100%;



    max-width: 330px;



    padding-bottom: 4px;

}





.latest-news-header-right > p {

    margin: 0 0 25px;



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



    color: #686361;



    font-size: 14px;



    line-height: 1.7;

}





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

   LIEN TOUTES LES ACTUALITÉS

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



.latest-news-all {

    width: fit-content;



    display: flex;



    align-items: center;



    gap: 15px;



    font-family: "Libre Baskerville", serif;



    color: #000000;



    font-size: 13px;



    font-style: italic;



    text-decoration: none;

}





.latest-news-all span {

    width: 34px;



    height: 34px;



    display: flex;



    align-items: center;



    justify-content: center;



    border: 1px solid #E2A4B1;



    border-radius: 50%;



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



    font-size: 15px;



    transition:

background 0.3s ease,

        transform 0.4s ease;

}





.latest-news-all:hover span {

    background: #E2A4B1;



    transform: rotate(45deg);

}





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

   GRID

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



.latest-news-grid {

    display: grid;



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



    gap: 25px;

}





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

   CARD

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



.news-card {

    width: 100%;

}





.news-card-link {

    display: block;



    color: inherit;



    text-decoration: none;

}





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

   IMAGE

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



.news-card-image {

    position: relative;



    width: 100%;



    height: 440px;



    overflow: hidden;



    background: #EFE7E5;

}





.news-card-image img {

    display: block;



    width: 100%;



    height: 100%;



    object-fit: cover;



    transition:

        transform 0.8s cubic-bezier(.2, .7, .2, 1),

        filter 0.6s ease;

}





.news-card:hover .news-card-image img {

    transform: scale(1.04);



    filter: brightness(0.88);

}





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

   FLÈCHE IMAGE

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



.news-card-arrow {

    position: absolute;



    z-index: 2;



    right: 18px;



    bottom: 18px;



    width: 44px;



    height: 44px;



    display: flex;



    align-items: center;



    justify-content: center;



    border-radius: 50%;



    background: #FFFFFF;



    color: #000000;



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



    font-size: 17px;



    transform: scale(0.9);



    opacity: 0;



    transition:

        opacity 0.35s ease,

        transform 0.4s ease,

background 0.3s ease;

}





.news-card:hover .news-card-arrow {

    opacity: 1;



    transform: scale(1);

}





.news-card-arrow:hover {

    background: #E2A4B1;

}





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

   PLACEHOLDER SI PAS D'IMAGE

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



.news-card-placeholder {

    width: 100%;



    height: 100%;



    display: flex;



    align-items: center;



    justify-content: center;



    background: #F6E8EB;

}





.news-card-placeholder span {

    font-family: "Libre Baskerville", serif;



    color: #B77784;



    font-size: 15px;



    font-style: italic;

}





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

   CONTENU

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



.news-card-content {

    padding-top: 22px;

}





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

   META

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



.news-card-meta {

    margin-bottom: 17px;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 20px;

}





.news-card-meta time,

.news-card-meta span {

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



    font-size: 11px;



    font-weight: 500;



    letter-spacing: 0.16em;



    text-transform: uppercase;

}





.news-card-meta time {

    color: #8A8481;

}





.news-card-meta span {

    color: #C98291;

}





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

   TITRE ACTUALITÉ

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



.news-card h3 {

    margin: 0;



    font-family: "Libre Baskerville", serif;



    color: #000000;



    font-size: clamp(20px, 1.7vw, 27px);



    font-weight: 400;



    line-height: 1.3;



    transition: color 0.3s ease;

}





.news-card:hover h3 {

    color: #B96E7D;

}





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

   EXTRAIT

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



.news-card-content > p {

    margin: 16px 0 0;



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



    color: #6D6764;



    font-size: 14px;



    line-height: 1.7;

}





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

   LIRE

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



.news-card-read {

    position: relative;



    width: fit-content;



    margin-top: 20px;



    padding-bottom: 4px;



    display: inline-block;



    font-family: "Libre Baskerville", serif;



    color: #000000;



    font-size: 12px;



    font-style: italic;

}





.news-card-read::after {

    content: "";



    position: absolute;



    left: 0;



    bottom: 0;



    width: 100%;



    height: 1px;



    background: #E2A4B1;



    transform-origin: left;



    transition: transform 0.4s ease;

}





.news-card:hover .news-card-read::after {

    transform: scaleX(0.4);

}





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

   AUCUNE ACTUALITÉ

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



.latest-news-empty {

    padding: 40px 0;



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



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



    font-family: "Libre Baskerville", serif;



    color: #77706D;



    font-size: 15px;



    font-style: italic;

}





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

   TABLETTE

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



@media (max-width: 1050px) {



    .latest-news {

        padding: 105px 30px 115px;

    }





    .latest-news-header {

        margin-bottom: 50px;



        gap: 50px;

    }





    .latest-news-heading h2 {

        font-size: clamp(45px, 6vw, 62px);

    }





    .news-card-image {

        height: 350px;

    }



}





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

   PETITE TABLETTE

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



@media (max-width: 768px) {



    .latest-news {

        padding: 90px 25px;

    }





    .latest-news-header {

        margin-bottom: 45px;



        display: block;

    }





    .latest-news-header-right {

        max-width: 500px;



        margin-top: 30px;

    }





    .latest-news-grid {

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



        gap: 40px 20px;

    }





    .news-card-image {

        height: 390px;

    }



}





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

   MOBILE

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



@media (max-width: 550px) {



    .latest-news {

        padding: 75px 18px 80px;

    }





    .latest-news-header {

        margin-bottom: 35px;

    }





    .latest-news-label {

        margin-bottom: 18px;

    }





    .latest-news-label span {

        width: 30px;

    }





    .latest-news-label p {

        font-size: 11px;

    }





    .latest-news-heading h2 {

        font-size: clamp(35px, 10vw, 45px);

    }





    .latest-news-header-right {

        margin-top: 22px;

    }





    .latest-news-header-right > p {

        font-size: 14px;

    }





    /* UNE ACTUALITÉ PAR LIGNE */



    .latest-news-grid {

        grid-template-columns: 1fr;



        gap: 45px;

    }





    .news-card-image {

        height: 390px;

    }





    /* Sur tactile, on garde la flèche visible */



    .news-card-arrow {

        width: 40px;



        height: 40px;



        right: 14px;



        bottom: 14px;



        opacity: 1;



        transform: scale(1);



        font-size: 16px;

    }





    .news-card-content {

        padding-top: 18px;

    }





    .news-card h3 {

        font-size: 21px;

    }





    .news-card-content > p {

        font-size: 13px;

    }



}





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

   PETIT MOBILE

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



@media (max-width: 380px) {



    .latest-news {

        padding-left: 15px;



        padding-right: 15px;

    }





    .news-card-image {

        height: 340px;

    }



}







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

   CTA FINAL

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



.final-cta {

    position: relative;



    width: 100%;



    padding: 150px 40px 80px;



    overflow: hidden;



    background: #000000;



    color: #FFFFFF;

}





.final-cta::before {

    content: "";



    position: absolute;



    top: -250px;

    left: 50%;



    width: 650px;

    height: 650px;



    border-radius: 50%;



    background: rgba(226, 164, 177, 0.10);



    filter: blur(120px);



    transform: translateX(-50%);



    pointer-events: none;

}





.final-cta-inner {

    position: relative;



    z-index: 2;



    width: 100%;

    max-width: 1300px;



    margin: 0 auto;



    display: flex;



    flex-direction: column;



    align-items: center;



    text-align: center;

}





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

   PETITE ACCROCHE

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



.final-cta-top {

    width: 100%;



    max-width: 550px;



    margin-bottom: 45px;



    display: flex;



    align-items: center;



    justify-content: center;



    gap: 22px;

}





.final-cta-line {

    height: 1px;



    flex: 1;



    background: rgba(226, 164, 177, 0.45);

}





.final-cta-top p {

    margin: 0;



    flex-shrink: 0;



    font-family: "Libre Baskerville", serif;



    color: #E2A4B1;



    font-size: 13px;



    font-style: italic;

}





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

   TITRE

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



.final-cta-title {

    max-width: 1050px;



    margin: 0;



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



    color: #FFFFFF;



    font-size: clamp(65px, 7vw, 115px);



    font-weight: 400;



    line-height: 0.88;



    letter-spacing: -0.045em;



    text-transform: uppercase;

}





.final-cta-title span {

    display: block;



    margin-top: 15px;



    font-family: "Libre Baskerville", serif;



    color: #E2A4B1;



    font-size: 0.67em;



    font-weight: 400;



    font-style: italic;



    line-height: 1;



    text-transform: none;

}





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

   TEXTE

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



.final-cta-text {

    max-width: 560px;



    margin: 40px auto 0;



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



    color: rgba(255, 255, 255, 0.55);



    font-size: 14px;



    line-height: 1.8;

}





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

   BOUTON

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



.final-cta-button {

    position: relative;



    margin-top: 42px;



    padding: 8px 8px 8px 27px;



    display: inline-flex;



    align-items: center;



    gap: 35px;



    overflow: hidden;



    border: 1px solid #E2A4B1;



    border-radius: 100px;



    color: #FFFFFF;



    text-decoration: none;



    isolation: isolate;



    transition:

        border-color 0.35s ease,

        color 0.35s ease;

}





.final-cta-button::before {

    content: "";



    position: absolute;



    inset: 0;



    z-index: -1;



    background: #E2A4B1;



    transform: translateX(-101%);



    transition:

        transform 0.5s cubic-bezier(.77, 0, .18, 1);

}





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

    font-family: "Libre Baskerville", serif;



    font-size: 14px;



    font-style: italic;

}





.final-cta-arrow {

    width: 48px;

    height: 48px;



    display: flex;



    align-items: center;

    justify-content: center;



    flex-shrink: 0;



    border-radius: 50%;



    background: #E2A4B1;



    color: #000000;



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



    font-size: 19px;



    transition:

        transform 0.45s cubic-bezier(.2, .7, .2, 1),

background 0.35s ease,

        color 0.35s ease;

}





.final-cta-button:hover {

    color: #000000;

}





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

    transform: translateX(0);

}





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

    background: #000000;



    color: #FFFFFF;



    transform: rotate(45deg);

}





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

   BAS DE SECTION

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



.final-cta-bottom {

    width: 100%;



    margin-top: 120px;



    padding-top: 25px;



    display: flex;



    align-items: center;



    justify-content: center;



    gap: 18px;



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

}





.final-cta-bottom > span:not(.final-cta-separator) {

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



    color: rgba(255, 255, 255, 0.35);



    font-size: 11px;



    font-weight: 500;



    letter-spacing: 0.18em;



    text-transform: uppercase;

}





.final-cta-separator {

    width: 25px;



    height: 1px;



    background: rgba(226, 164, 177, 0.45);

}





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

   TABLETTE

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



@media (max-width: 1050px) {



    .final-cta {

        padding: 120px 30px 65px;

    }





    .final-cta-title {

        max-width: 850px;



        font-size: clamp(58px, 8vw, 90px);

    }





    .final-cta-bottom {

        margin-top: 90px;

    }



}





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

   PETITE TABLETTE

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



@media (max-width: 768px) {



    .final-cta {

        padding: 100px 25px 55px;

    }





    .final-cta-top {

        max-width: 450px;



        margin-bottom: 35px;

    }





    .final-cta-title {

        max-width: 650px;



        font-size: clamp(48px, 10vw, 72px);

    }





    .final-cta-text {

        margin-top: 32px;

    }





    .final-cta-bottom {

        margin-top: 80px;



        flex-wrap: wrap;

    }



}





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

   MOBILE

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



@media (max-width: 550px) {



    .final-cta {

        padding: 80px 18px 40px;

    }





    /* ACCROCHE */



    .final-cta-top {

        margin-bottom: 30px;



        gap: 12px;

    }





    .final-cta-top p {

        font-size: 12px;

    }





    /* TITRE */



    .final-cta-title {

        font-size: clamp(39px, 12vw, 54px);



        line-height: 0.95;

    }





    .final-cta-title span {

        margin-top: 10px;



        font-size: 0.72em;

    }





    /* TEXTE */



    .final-cta-text {

        max-width: 400px;



        margin-top: 27px;



        font-size: 14px;



        line-height: 1.7;

    }





    /* BOUTON */



    .final-cta-button {

        margin-top: 32px;



        padding-left: 20px;



        gap: 22px;

    }





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

        font-size: 12px;

    }





    .final-cta-arrow {

        width: 42px;

        height: 42px;



        font-size: 16px;

    }





    /* BAS */



    .final-cta-bottom {

        margin-top: 65px;



        padding-top: 20px;



        gap: 10px 13px;

    }





    .final-cta-bottom > span:not(.final-cta-separator) {

        font-size: 10px;



        letter-spacing: 0.12em;

    }





    .final-cta-separator {

        width: 14px;

    }



}





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

   PETIT MOBILE

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



@media (max-width: 380px) {



    .final-cta {

        padding-left: 15px;



        padding-right: 15px;

    }





    .final-cta-title {

        font-size: 37px;

    }





    .final-cta-top .final-cta-line {

        display: none;

    }





    .final-cta-bottom {

        gap: 8px;

    }



}