/* ============================================
   STRUCTURE GÉNÉRALE
============================================ */

.site-title {
    background-color: var(--background);
    color: var(--primary);
}

.menu-page-about-header-container {
    background-color: var(--primary);
}

#menu-page-about-header a {
    color: var(--background);
}


/* ============================================
   SECTION PRINCIPALE
============================================ */

main.about-page {
    top: var(--header-height);
    position: relative;
    display: flex;
    flex-direction: row;
}

main.about-page header.about-header {
    display: none;
}


/* ============================================
    ------------------*------------------
                    MÉDIAS
    ------------------*------------------
============================================ */

.media-section {
    position: relative;
    top: 0;
    left: 0;
    width: var(--7col);
}


/* ============================================
    ------------------*------------------
                   CONTENU
    ------------------*------------------
============================================ */

.about-content {
    background-color: var(--background);
    width: var(--5col);
    position: sticky;
    left: var(--7col);
    top: var(--header-height);
    height: var(--vh-100-header);
    overflow-x: scroll;
}

/* cacher les titres h2 */

.about-links__columns h2,
.about-bios h2 {
    display: none;
}


/* ============================================
   LIENS SOCIAUX
============================================ */

#about-links-mobile {
    display: none;
}

.about-links {
    border-bottom: var(--white-border);
    background-color: var(--background);
    font-size: var(--fontsize-small);
    position: sticky;
    top: 0;
    left: 0;
    z-index: 15;
}


.about-links__columns {
    display: grid;
    grid-template-columns: var(--2col) var(--3col);
}

.about-links__col {
    padding: var(--medium-marge) var(--big-marge);
}


/* ============================================
   ONGLET BIO / LANGUES
============================================ */

.about-bios {
    padding: var(--big-marge);
    border-bottom: var(--white-border);
}


.about-bio {
    display: none;
}

.about-bio.active {
    display: block;
}

/* BOUTONS CV + CRÉDITS */
button.about-cv__button,
button.about-credits__button {
    background-color: var(--background);
    padding: var(--big-marge);
    border-bottom: none;
    position: sticky;
    width: 100%;
}

button.about-cv__button.is-open,
button.about-credits__button.is-open {
    border-bottom: var(--white-border);
}


/* ============================================
   CV
============================================ */

button.about-cv__button {
    z-index: 2;
    top: var(--dynamic-offset, 0);
    border-bottom: var(--white-border);
}

button.about-credits__button {
    top: var(--dynamic-offset, 0);
}

.about-cv__toggle {
    cursor: pointer;
    display: inline-block;
    position: relative;
}

.about-cv__button .white-svg {
    transform: rotate(0deg);
}

.about-cv__content {
    border-bottom: var(--white-border);
    padding: var(--big-marge) 0 0 var(--big-marge);
}

.about-cv__intro {
    padding-right: var(--big-marge);
    margin-bottom: 1.4rem;
}

.about-cv__section-title {
    border-top: var(--white-border);
    border-bottom: var(--white-border);
    padding: var(--small-marge) var(--big-marge) 1.4rem 0;
    margin-bottom: var(--small-marge);
}

/* tableau de cv */

.about-cv__table-wrapper {
    padding-right: var(--big-marge);
}

.about-cv__table {
    width: auto;
    border-collapse: collapse;
    margin-bottom: 1.2rem;

    table-layout: fixed;
}

.about-cv__table th,
.about-cv__table td {
    text-align: left;
    vertical-align: top;
    border: none;
    padding-bottom: var(--big-marge);
}

.about-cv__table th.about-cv__date {
    width: var(--col);
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;

    padding-right: var(--small-marge);

}

.about-cv__table td.about-cv__text {
    width: var(--4col);
}


/* credits */
.about-credits__content {
    padding: var(--big-marge);
}


@media (max-width: 768px) {
    .site-title {
        color: var(--background);
        background-color: var(--primary);
    }

    .menu-page-about-header-container {
        background-color: var(--background);
    }


    main.about-page {
        top: 0;
        flex-direction: column-reverse;
    }

    .about-content {
        width: 100%;
        position: relative;
        left: 0;
        top: 0;
        height: auto;
        overflow-x: visible;
    }

    #about-links-desktop {
        display: none;
    }

    /* ABOUT LINKS MOBILE */
    #about-links-mobile {
        display: block;
    }

    .about-links {
        font-size: var(--fontsize-big);
    }

    .about-links__columns {
        display: block;
    }

    .about-links__columns h2 {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        padding: var(--big-marge);
        width: 50%;
        height: fit-content;
    }

    .about-links__col {
        display: block;
        position: relative;
        left: 50%;
        width: 50%;
    }

    .about-links__col--1 {
        padding: var(--big-marge) var(--big-marge) 0 var(--big-marge);
    }

    .about-links__col--2 {
        padding: 0 var(--big-marge) var(--big-marge) var(--big-marge);
    }


    /* CV */
    .about-cv {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        height: auto;
    }

    .about-cv__content {
        padding: var(--big-marge) 0 0 0;
    }

    .about-cv__intro {
        padding-left: var(--big-marge);
        margin-bottom: 2rem;
    }

    .about-cv__section-title {
        padding-left: var(--big-marge);
    }

    .about-cv__table-wrapper {
        padding: 0;
    }

    .about-cv__table {
        width: 100%;
    }

    .about-cv__table th.about-cv__date {
        width: 25%;
        padding-left: var(--big-marge);
    }

    .about-cv__table td.about-cv__text {
        width: 75%;
        padding-right: var(--big-marge);
    }



    /* MEDIAS */


    .media-section {
        width: 100%;
        margin-bottom: var(--header-height);
    }

}