/* =========================================================
   MARION ASSISTANCE
   IDENTITÉ VISUELLE — LOGO TAUPE / CRÈME / OR
========================================================= */

:root {

    /* ===============================
       COULEURS DU LOGO
    =============================== */

    --taupe: #8B7970;
    --taupe-light: #A8958B;
    --taupe-dark: #695950;

    --brown: #493A34;
    --brown-dark: #332722;

    --cream: #F5EDE4;
    --cream-light: #FFF9F2;
    --cream-dark: #E9DDD2;

    --ivory: #FFFDF9;

    --rose: #D8B9AE;
    --rose-light: #E9D6CE;
    --rose-dark: #B99689;

    --gold: #D6AD68;
    --gold-light: #E8CB91;
    --gold-dark: #B88C48;

    --white: #FFFFFF;

    /* ===============================
       TEXTES
    =============================== */

    --text: #493A34;
    --text-light: #76665E;
    --text-muted: #97877F;

    /* ===============================
       BORDURES
    =============================== */

    --border:
        rgba(73, 58, 52, 0.12);

    --border-gold:
        rgba(214, 173, 104, 0.45);

    /* ===============================
       OMBRES
    =============================== */

    --shadow:
        0 15px 45px rgba(73, 58, 52, 0.10);

    --shadow-hover:
        0 25px 65px rgba(73, 58, 52, 0.17);

    --shadow-gold:
        0 15px 35px rgba(214, 173, 104, 0.20);

    /* ===============================
       FORMES
    =============================== */

    --radius: 24px;
    --radius-small: 16px;
    --radius-large: 36px;

    /* ===============================
       TRANSITION
    =============================== */

    --transition:
        all 0.35s ease;
}


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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--text);

    background:
        var(--cream-light);

    line-height: 1.6;

    overflow-x: hidden;
}


img {
    max-width: 100%;
    display: block;
}


a {
    color: inherit;
}


.container {

    width: min(1180px, 92%);

    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background:
        rgba(255, 249, 242, 0.90);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid rgba(214, 173, 104, 0.20);

    transition:
        var(--transition);
}


header:hover {

    background:
        rgba(255, 249, 242, 0.97);
}


header .container {

    min-height: 88px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


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

.logo {

    display: flex;

    align-items: center;

    text-decoration: none;

    position: relative;
}


.logo img {

    width: 120px;

    height: auto;

    object-fit: contain;

    transition:
        var(--transition);
}


.logo:hover img {

    transform:
        scale(1.03);
}


/* =========================================================
   NAVIGATION
========================================================= */

nav ul {

    display: flex;

    align-items: center;

    gap: 30px;

    list-style: none;
}


nav a {

    position: relative;

    color: var(--brown);

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition:
        var(--transition);
}


nav a::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -9px;

    width: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--gold),
            var(--gold-light)
        );

    transform:
        translateX(-50%);

    transition:
        var(--transition);
}


nav a:hover {

    color: var(--gold-dark);
}


nav a:hover::after {

    width: 100%;
}


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

.hero {

    position: relative;

    min-height: 850px;

    display: flex;

    align-items: center;

    padding: 150px 0 100px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 85% 20%,
            rgba(216,185,174,0.25),
            transparent 30%
        ),

        radial-gradient(
            circle at 10% 80%,
            rgba(214,173,104,0.13),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            var(--taupe),
            var(--taupe-dark)
        );

    color: var(--white);
}


.hero::before {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    top: -300px;
    right: -200px;

    border-radius: 50%;

    border:
        1px solid rgba(232,203,145,0.25);
}


.hero::after {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    bottom: -250px;
    left: -180px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.035);
}


.hero-container {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.1fr 0.9fr;

    align-items: center;

    gap: 80px;
}


.hero-left {

    max-width: 650px;
}


.badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 22px;

    padding: 9px 17px;

    border:
        1px solid rgba(232,203,145,0.45);

    border-radius: 50px;

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

    color:
        var(--gold-light);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    backdrop-filter:
        blur(10px);
}


.hero h1 {

    margin-bottom: 25px;

    color: var(--cream-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

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

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -2px;
}


.hero h1 span {

    color: var(--gold-light);
}


.hero p {

    max-width: 600px;

    margin-bottom: 35px;

    color:
        rgba(255,249,242,0.78);

    font-size: 16px;

    line-height: 1.9;
}


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

.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 40px;
}


.btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    min-height: 55px;

    padding: 0 28px;

    border:
        1px solid var(--gold);

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-dark)
        );

    color: white;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        var(--shadow-gold);

    transition:
        var(--transition);
}


.btn:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 40px rgba(214,173,104,0.30);
}


.btn-outline {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    min-height: 55px;

    padding: 0 28px;

    border:
        1px solid rgba(255,249,242,0.35);

    border-radius: 50px;

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

    color:
        var(--cream-light);

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition:
        var(--transition);
}


.btn-outline:hover {

    background:
        var(--cream-light);

    color:
        var(--brown);

    transform:
        translateY(-4px);
}


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

.hero-infos {

    display: flex;

    gap: 25px;
}


.hero-infos > div {

    padding-right: 25px;

    border-right:
        1px solid rgba(255,255,255,0.15);
}


.hero-infos > div:last-child {

    border-right: none;
}


.hero-infos h3 {

    color:
        var(--gold-light);

    font-family:
        Georgia,
        serif;

    font-size: 24px;

    font-weight: 500;
}


.hero-infos span {

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

    font-size: 11px;
}


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

.hero-right {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;
}


.hero-right::before {

    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    border:
        1px solid rgba(232,203,145,0.45);

    box-shadow:
        0 0 80px rgba(214,173,104,0.12);
}


.hero-right::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    border:
        1px solid rgba(255,249,242,0.08);
}


.hero-right img {

    position: relative;

    z-index: 2;

    width: 330px;
    height: 330px;

    object-fit: contain;

    border-radius: 50%;

    box-shadow:
        0 30px 80px rgba(51,39,34,0.30);

    transition:
        var(--transition);
}


.hero-right img:hover {

    transform:
        scale(1.04)
        rotate(1deg);
}


/* =========================================================
   TITRES DE SECTION
========================================================= */

.section-title {

    position: relative;

    z-index: 2;

    max-width: 700px;

    margin: 0 auto 60px;

    text-align: center;
}


.section-title .small-title {

    display: block;

    margin-bottom: 12px;

    color: var(--gold-dark);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.section-title h2 {

    margin-bottom: 17px;

    color: var(--brown);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

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

    font-weight: 500;

    line-height: 1.2;
}


.section-title p {

    color: var(--text-light);

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   PRESENTATION
========================================================= */

.presentation {

    position: relative;

    padding: 120px 0;

    background:
        var(--cream-light);

    overflow: hidden;
}


.presentation::before {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    left: -220px;
    top: -150px;

    border-radius: 50%;

    background:
        rgba(216,185,174,0.16);
}


.presentation-card {

    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: auto;

    padding: 65px;

    text-align: center;

    border:
        1px solid var(--border-gold);

    border-radius:
        var(--radius-large);

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

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(15px);
}


.presentation-card::before {

    content: "✦";

    display: block;

    margin-bottom: 20px;

    color: var(--gold);

    font-size: 22px;
}


.presentation-card h2 {

    margin-bottom: 20px;

    color: var(--brown);

    font-family:
        Georgia,
        serif;

    font-size: 38px;

    font-weight: 500;
}


.presentation-card p {

    color: var(--text-light);

    font-size: 14px;

    line-height: 2;
}


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

#services {

    position: relative;

    padding: 120px 0;

    background:
        linear-gradient(
            180deg,
            var(--cream),
            var(--cream-light)
        );
}


.services-grid {

    display: grid;

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

    gap: 25px;
}


.service-card {

    position: relative;

    padding: 38px 30px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

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

    box-shadow:
        var(--shadow);

    overflow: hidden;

    transition:
        var(--transition);
}


.service-card::before {

    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    top: -70px;
    right: -60px;

    border-radius: 50%;

    background:
        var(--rose-light);

    opacity: 0.5;
}


.service-card:hover {

    transform:
        translateY(-10px);

    border-color:
        var(--border-gold);

    box-shadow:
        var(--shadow-hover);
}


.service-icon {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: center;

    align-items: center;

    width: 65px;
    height: 65px;

    margin-bottom: 22px;

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            var(--rose-light),
            var(--cream)
        );

    color:
        var(--gold-dark);

    font-size: 25px;

    border:
        1px solid rgba(214,173,104,0.18);
}


.service-card h3 {

    margin-bottom: 10px;

    color: var(--brown);

    font-family:
        Georgia,
        serif;

    font-size: 19px;

    font-weight: 500;
}


.service-card p {

    color: var(--text-light);

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   POURQUOI MOI
========================================================= */

.why-me {

    position: relative;

    padding: 120px 0;

    background:
        var(--cream-light);

    overflow: hidden;
}


.why-me::before {

    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    top: -230px;
    right: -180px;

    border-radius: 50%;

    background:
        rgba(216,185,174,0.17);
}


.advantages-grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 20px;
}


.advantage-card {

    padding: 35px 22px;

    text-align: center;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

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

    box-shadow:
        var(--shadow);

    transition:
        var(--transition);
}


.advantage-card:hover {

    transform:
        translateY(-9px);

    border-color:
        var(--border-gold);

    box-shadow:
        var(--shadow-hover);
}


.advantage-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 70px;
    height: 70px;

    margin:
        0 auto 20px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--rose-light),
            var(--cream)
        );

    color:
        var(--gold-dark);

    font-size: 27px;

    border:
        1px solid var(--border-gold);
}


.advantage-card h3 {

    margin-bottom: 10px;

    color:
        var(--brown);

    font-family:
        Georgia,
        serif;

    font-size: 18px;
}


.advantage-card p {

    color:
        var(--text-light);

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   SECTION RAISONS
========================================================= */

.reasons {

    position: relative;

    padding: 120px 0;

    color: var(--cream-light);

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(216,185,174,0.14),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            var(--brown-dark),
            var(--brown)
        );

    overflow: hidden;
}


.reasons-container {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    align-items: center;

    gap: 80px;
}


.reasons-content h2 {

    margin-bottom: 22px;

    color:
        var(--cream-light);

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(34px, 4vw, 48px);

    font-weight: 500;

    line-height: 1.2;
}


.reasons-content p {

    color:
        rgba(255,249,242,0.68);

    font-size: 14px;

    line-height: 1.9;
}


.reasons-list {

    display: flex;

    flex-direction: column;

    gap: 18px;
}


.reason-item {

    display: grid;

    grid-template-columns:
        60px 1fr;

    gap: 18px;

    padding: 25px;

    border:
        1px solid rgba(232,203,145,0.18);

    border-radius:
        20px;

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

    backdrop-filter:
        blur(12px);

    transition:
        var(--transition);
}


.reason-item:hover {

    transform:
        translateX(8px);

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

    border-color:
        rgba(232,203,145,0.40);
}


.reason-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 55px;
    height: 55px;

    border-radius: 17px;

    background:
        rgba(214,173,104,0.10);

    border:
        1px solid rgba(232,203,145,0.35);

    color:
        var(--gold-light);

    font-weight: 700;
}


.reason-item h3 {

    margin-bottom: 7px;

    color:
        var(--cream-light);

    font-family:
        Georgia,
        serif;

    font-size: 18px;
}


.reason-item p {

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

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   PROCESSUS
========================================================= */

.process {

    position: relative;

    padding: 120px 0;

    background:
        var(--cream);
}


.process-grid {

    display: grid;

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

    gap: 25px;
}


.process-card {

    position: relative;

    padding: 45px 30px;

    text-align: center;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

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

    box-shadow:
        var(--shadow);

    transition:
        var(--transition);
}


.process-card:hover {

    transform:
        translateY(-10px);

    border-color:
        var(--border-gold);

    box-shadow:
        var(--shadow-hover);
}


.process-number {

    position: absolute;

    top: 18px;
    right: 22px;

    color:
        rgba(214,173,104,0.18);

    font-size: 40px;

    font-weight: 800;
}


.process-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 75px;
    height: 75px;

    margin:
        0 auto 22px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-dark)
        );

    color:
        white;

    font-size: 27px;

    box-shadow:
        var(--shadow-gold);
}


.process-card h3 {

    margin-bottom: 10px;

    color:
        var(--brown);

    font-family:
        Georgia,
        serif;

    font-size: 20px;

    font-weight: 500;
}


.process-card p {

    color:
        var(--text-light);

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   TARIFS
========================================================= */

.pricing {

    position: relative;

    padding: 130px 0;

    background:

        linear-gradient(
            135deg,
            var(--cream-light),
            var(--rose-light)
        );

    overflow: hidden;
}


.pricing-grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 25px;
}


.hourly-price {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    width: fit-content;

    margin:
        0 auto 60px;

    padding: 18px 28px;

    border:
        1px solid var(--border-gold);

    border-radius: 22px;

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

    box-shadow:
        var(--shadow);
}


.hourly-icon {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 50px;
    height: 50px;

    border-radius: 15px;

    background:
        var(--rose-light);

    color:
        var(--gold-dark);

    font-size: 22px;
}


.hourly-price span {

    display: block;

    color:
        var(--text-light);

    font-size: 11px;
}


.hourly-price strong {

    display: block;

    color:
        var(--brown);

    font-family:
        Georgia,
        serif;

    font-size: 28px;

    font-weight: 500;
}


.hourly-price small {

    color:
        var(--text-muted);

    font-size: 11px;
}


/* =========================================================
   CARTES PRIX
========================================================= */

.price-card {

    position: relative;

    display: flex;

    flex-direction: column;

    padding: 42px 30px 30px;

    border:
        1px solid var(--border);

    border-radius:
        30px;

    background:
        rgba(255,253,249,0.92);

    box-shadow:
        var(--shadow);

    overflow: hidden;

    transition:
        var(--transition);
}


.price-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        var(--shadow-hover);
}


.price-card-top {

    min-height: 120px;
}


.pack-label {

    display: inline-block;

    margin-bottom: 10px;

    color:
        var(--gold-dark);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.price-card h3 {

    margin-bottom: 7px;

    color:
        var(--brown);

    font-family:
        Georgia,
        serif;

    font-size: 25px;

    font-weight: 500;
}


.price-card-top p {

    color:
        var(--text-light);

    font-size: 12px;
}


.price {

    display: flex;

    flex-direction: column;

    margin:
        25px 0;
}


.price strong {

    color:
        var(--brown);

    font-family:
        Georgia,
        serif;

    font-size: 44px;

    font-weight: 500;

    line-height: 1;
}


.price span {

    margin-top: 7px;

    color:
        var(--text-muted);

    font-size: 11px;
}


.price-line {

    width: 100%;

    height: 1px;

    margin-bottom: 20px;

    background:
        var(--border);
}


.ideal {

    min-height: 70px;

    margin-bottom: 20px;

    color:
        var(--text-light);

    font-size: 12px;

    line-height: 1.7;
}


.ideal strong {

    color:
        var(--brown);
}


.price-card ul {

    display: flex;

    flex-direction: column;

    gap: 13px;

    list-style: none;
}


.price-card li {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    color:
        var(--text);

    font-size: 12px;
}


.price-card li span {

    color:
        var(--gold-dark);

    font-weight: 700;
}


.price-button {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 50px;

    margin-top: 30px;

    border:
        1px solid var(--gold);

    border-radius: 50px;

    background:
        transparent;

    color:
        var(--brown);

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition:
        var(--transition);
}


.price-button:hover {

    background:
        var(--gold);

    color:
        white;

    transform:
        translateY(-3px);

    box-shadow:
        var(--shadow-gold);
}


/* =========================================================
   PACK MIS EN AVANT
========================================================= */

.featured-price {

    transform:
        translateY(-14px);

    border:
        2px solid var(--gold);

    background:
        linear-gradient(
            145deg,
            #FFFDF9,
            #F7EEE6
        );

    box-shadow:
        0 25px 65px rgba(73,58,52,0.16);
}


.featured-price:hover {

    transform:
        translateY(-22px);
}


.popular-badge {

    position: absolute;

    top: 0;
    left: 50%;

    transform:
        translateX(-50%);

    padding: 8px 23px;

    border-radius:
        0 0 16px 16px;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-dark)
        );

    color:
        white;

    font-size: 10px;

    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   CONTACT
========================================================= */

.contact {

    position: relative;

    padding: 120px 0;

    background:
        var(--cream-light);

    overflow: hidden;
}


.contact-wrapper {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.15fr 0.85fr;

    align-items: center;

    gap: 60px;

    padding: 65px;

    border:
        1px solid var(--border-gold);

    border-radius:
        38px;

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

    box-shadow:
        var(--shadow-hover);

    backdrop-filter:
        blur(15px);
}


.contact-content h2 {

    margin-bottom: 20px;

    color:
        var(--brown);

    font-family:
        Georgia,
        serif;

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

    font-weight: 500;

    line-height: 1.15;
}


.contact-content p {

    margin-bottom: 30px;

    color:
        var(--text-light);

    font-size: 14px;

    line-height: 1.9;
}


.contact-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 13px;
}


.contact-main-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 53px;

    padding: 0 27px;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-dark)
        );

    color:
        white;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition:
        var(--transition);
}


.contact-main-button:hover {

    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow-gold);
}


.contact-phone-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 53px;

    padding: 0 27px;

    border:
        1px solid var(--border-gold);

    border-radius: 50px;

    background:
        var(--cream-light);

    color:
        var(--brown);

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition:
        var(--transition);
}


.contact-phone-button:hover {

    background:
        var(--rose-light);

    transform:
        translateY(-4px);
}


.contact-details {

    display: flex;

    flex-direction: column;

    gap: 15px;
}


.contact-detail {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 19px;

    border:
        1px solid var(--border);

    border-radius: 19px;

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

    transition:
        var(--transition);
}


.contact-detail:hover {

    transform:
        translateX(6px);

    border-color:
        var(--border-gold);
}


.contact-detail-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 52px;
    height: 52px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            var(--rose-light),
            var(--cream)
        );

    color:
        var(--gold-dark);

    font-size: 21px;
}


.contact-detail span {

    display: block;

    margin-bottom: 2px;

    color:
        var(--text-muted);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.8px;
}


.contact-detail a,
.contact-detail strong {

    color:
        var(--brown);

    font-size: 12px;

    text-decoration: none;

    overflow-wrap: anywhere;
}


/* =========================================================
   FOOTER
========================================================= */

footer {

    position: relative;

    background:
        linear-gradient(
            135deg,
            var(--brown-dark),
            var(--brown)
        );

    color:
        var(--cream-light);

    overflow: hidden;
}


footer::before {

    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    top: -300px;
    right: -150px;

    border-radius: 50%;

    border:
        1px solid rgba(232,203,145,0.15);
}


.footer-content {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.5fr 0.7fr 1fr;

    gap: 60px;

    padding: 75px 0;
}


.footer-brand img {

    width: 135px;

    margin-bottom: 18px;

    border-radius: 50%;

    background:
        var(--cream-light);

    padding: 5px;
}


.footer-brand p {

    max-width: 350px;

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

    font-size: 12px;

    line-height: 1.8;
}


.footer-navigation,
.footer-contact {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 11px;
}


.footer-navigation h3,
.footer-contact h3 {

    margin-bottom: 8px;

    color:
        var(--gold-light);

    font-family:
        Georgia,
        serif;

    font-size: 17px;

    font-weight: 500;
}


.footer-navigation a,
.footer-contact a {

    color:
        rgba(255,249,242,0.62);

    text-decoration: none;

    font-size: 12px;

    transition:
        var(--transition);
}


.footer-navigation a:hover,
.footer-contact a:hover {

    color:
        var(--gold-light);

    transform:
        translateX(4px);
}


.footer-contact span {

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

    font-size: 11px;
}


.footer-bottom {

    position: relative;

    z-index: 2;

    border-top:
        1px solid rgba(232,203,145,0.12);
}


.footer-bottom .container {

    min-height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.footer-bottom p {

    color:
        rgba(255,249,242,0.42);

    font-size: 10px;

    text-align: center;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }
}


@keyframes floating {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-10px);

    }
}


.hero-left {

    animation:
        fadeUp 0.9s ease both;
}


.hero-right img {

    animation:
        floating 5s ease-in-out infinite;
}


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

@media (max-width: 1000px) {

    .hero-container {

        grid-template-columns: 1fr;

        text-align: center;

        gap: 65px;
    }


    .hero-left {

        max-width: 700px;

        margin: auto;
    }


    .hero p {

        margin-left: auto;

        margin-right: auto;
    }


    .hero-buttons,
    .hero-infos {

        justify-content: center;
    }


    .hero-right {

        order: -1;
    }


    .services-grid {

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


    .advantages-grid {

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


    .reasons-container {

        grid-template-columns: 1fr;
    }


    .process-grid {

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


    .pricing-grid {

        grid-template-columns: 1fr;

        max-width: 600px;

        margin-left: auto;

        margin-right: auto;
    }


    .featured-price {

        order: -1;

        transform: none;
    }


    .featured-price:hover {

        transform:
            translateY(-10px);
    }


    .contact-wrapper {

        grid-template-columns: 1fr;

        padding: 50px;
    }


    .footer-content {

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


    .footer-brand {

        grid-column:
            1 / -1;
    }
}


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

@media (max-width: 700px) {

    .container {

        width: 92%;
    }


    header .container {

        min-height: 75px;
    }


    .logo img {

        width: 100px;
    }


    nav ul {

        gap: 10px;
    }


    nav a {

        font-size: 10px;
    }


    .hero {

        min-height: auto;

        padding:
            125px 0 80px;
    }


    .hero h1 {

        font-size: 42px;

        letter-spacing:
            -1px;
    }


    .hero p {

        font-size: 13px;
    }


    .hero-buttons {

        flex-direction: column;

        align-items: center;
    }


    .btn,
    .btn-outline {

        width: 100%;

        max-width: 300px;
    }


    .hero-right img {

        width: 220px;
        height: 220px;
    }


    .hero-right::before {

        width: 285px;
        height: 285px;
    }


    .hero-right::after {

        width: 320px;
        height: 320px;
    }


    .hero-infos {

        gap: 14px;
    }


    .hero-infos h3 {

        font-size: 18px;
    }


    .presentation,
    #services,
    .why-me,
    .reasons,
    .process,
    .pricing,
    .contact {

        padding:
            80px 0;
    }


    .presentation-card {

        padding:
            40px 23px;
    }


    .presentation-card h2 {

        font-size: 29px;
    }


    .section-title h2 {

        font-size: 31px;
    }


    .services-grid,
    .advantages-grid,
    .process-grid {

        grid-template-columns: 1fr;
    }


    .reason-item {

        grid-template-columns:
            48px 1fr;

        padding: 20px;

        gap: 13px;
    }


    .reason-number {

        width: 46px;
        height: 46px;

        border-radius: 14px;
    }


    .hourly-price {

        width: 100%;

        justify-content: flex-start;

        padding:
            16px 19px;
    }


    .price-card {

        padding:
            35px 25px;
    }


    .contact-wrapper {

        padding:
            35px 22px;

        border-radius:
            28px;
    }


    .contact-content h2 {

        font-size: 32px;
    }


    .contact-buttons {

        flex-direction: column;
    }


    .contact-main-button,
    .contact-phone-button {

        width: 100%;
    }


    .footer-content {

        grid-template-columns: 1fr;

        gap: 40px;

        padding:
            60px 0;
    }


    .footer-brand {

        grid-column: auto;
    }
}


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

@media (max-width: 420px) {

    .logo img {

        width: 90px;
    }


    nav ul {

        gap: 7px;
    }


    nav a {

        font-size: 9px;
    }


    .hero h1 {

        font-size: 36px;
    }


    .hero-right img {

        width: 180px;
        height: 180px;
    }


    .hero-right::before {

        width: 235px;
        height: 235px;
    }


    .hero-right::after {

        width: 260px;
        height: 260px;
    }


    .hero-infos h3 {

        font-size: 16px;
    }


    .hero-infos span {

        font-size: 8px;
    }
}


/* =========================================================
   ACCESSIBILITÉ
========================================================= */

a:focus-visible {

    outline:
        2px solid var(--gold);

    outline-offset:
        4px;
}


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

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}


/* =========================================================
   FIN DU CSS
========================================================= */