/* =========================================================
   About me — palette claire (distincte de la home, en dark)
   ========================================================= */
.about-page {
    --about-bg: #F7EDEA;
    --about-text: #111111;
    --about-muted: #9A9A9A;
    --about-border: #111111;

    background-color: var(--about-bg);
    color: var(--about-text);
}

.about-page h1,
.about-page h2,
.about-page h3,
.about-page p,
.about-page li {
    color: var(--about-text);
}

.about-page a {
    color: var(--about-text);
}

.about-page a:hover {
    color: var(--about-muted);
}

.about-page hr {
    border: none;
    border-top: 1px solid var(--about-border);
    margin: 0;
}

.about-page .muted,
.about-page .muted-label {
    color: var(--about-muted);
}

.about-page .section-label {
    font-family: var(--font-sans);
    font-size: 16px;
    margin-bottom: 16px;
}

.about-page ul {
    margin: 0;
    padding-left: 18px;
}

.about-page li {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
}

/* =========================================================
   Header : logo + intro
   ========================================================= */
#about-top {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding-bottom: 40px;
}

.logo {
    flex: 0 0 450px;
    font-family: var(--font-display);
    font-size: 50px;
    font-weight: normal;
    margin: 0;
}

.logo a {
    text-decoration: none;
}

#about-intro {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.intro-text {
    font-family: var(--font-sans);
    font-size: 18px;
    max-width: 760px;
}

.interests-box {
    border: 1px solid var(--about-border);
    padding: 20px 24px;
    max-width: 560px;
}

.interests-box p {
    font-family: var(--font-sans);
    font-size: 18px;
    margin: 0;
}

/* =========================================================
   Main : portrait + expériences/formations
   ========================================================= */
#about-main {
    display: flex;
    gap: 40px;
    padding-bottom: 40px;
}

.portrait {
    flex: 0 0 450px;
}

.portrait img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
}

.about-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 37px;
}

.detail-block hr {
    margin-bottom: 24px;
}

.two-col {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.two-col .entry {
    flex: 1;
}

.entry h3 {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 8px 0;
}

.entry p.muted {
    font-family: var(--font-sans);
    font-size: 16px;
    margin: 0;
}

.entry h3.muted-label {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: normal;
    margin: 0 0 16px 0;
}

/* =========================================================
   Skills
   ========================================================= */
#about-skills hr {
    margin-bottom: 24px;
}

#about-skills .two-col {
    margin-bottom: 48px;
}

.soft-skills h3 {
    margin-bottom: 16px;
}

.soft-skills p {
    font-family: var(--font-sans);
    font-size: 18px;
    max-width: 620px;
}

/* =========================================================
   Footer
   ========================================================= */
.footer-divider {
    margin: 40px 0 20px 0;
}

#about-footer {
    padding-bottom: 20px;
}

#about-footer a {
    font-family: var(--font-sans);
    font-size: 16px;
    text-decoration: underline;
}


/* =========================================================
   TABLET — 800px à 1199px
   ========================================================= */
@media (max-width: 1199px) {

    .logo {
        flex: 0 0 320px;
        font-size: 40px;
    }

    .portrait {
        flex: 0 0 340px;
    }

    .portrait img {
        height: 400px;
    }

    .intro-text,
    .interests-box p {
        font-size: 16px;
    }

    .entry h3 {
        font-size: 18px;
    }
}


/* =========================================================
   MOBILE — jusqu'à 799px
   ========================================================= */
@media (max-width: 799px) {

    #about-top {
        flex-direction: column;
        gap: 24px;
        padding-bottom: 24px;
    }

    .logo {
        flex: none;
        font-size: 32px;
    }

    #about-intro {
        gap: 16px;
    }

    .intro-text,
    .interests-box p {
        font-size: 15px;
    }

    .interests-box {
        padding: 16px 18px;
        max-width: 100%;
    }

    #about-main {
        flex-direction: column;
        gap: 24px;
        padding-bottom: 24px;
    }

    .portrait {
        flex: none;
        width: 100%;
    }

    .portrait img {
        height: 280px;
    }

    .about-details {
        gap: 24px;
    }

    .two-col {
        flex-direction: column;
        gap: 24px;
    }

    .entry h3 {
        font-size: 17px;
    }

    #about-skills .two-col {
        margin-bottom: 24px;
    }

    .soft-skills p {
        font-size: 16px;
    }
}