@font-face {
    font-family: "Kulim Park";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/kulimpark400.woff2) format("woff2");
}

@font-face {
    font-family: "Pathway Extreme";
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    font-display: swap;
    src: url(fonts/pathwayextreme700.woff2) format("woff2");
}

@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(fonts/playfairdisplay500.woff2) format("woff2");
}

:root {
    /* colors */
    --prune-950: rgba(54, 8, 66, 1);
    --parme-200: rgba(243, 243, 255, 1);
    --parme-100: #f9f9ff;
    --baltic-600: #70949a;
    --baltic-700: #407178; /* fonts */
    --baltic-800: #184e55;
    --baltic-900: #00373e;
    --title-font-family: "Pathway Extreme", Helvetica, Arial, sans-serif;
    --body-font-family: "Kulim Park", Helvetica, Arial, sans-serif;
    --quote-font-family: "Playfair Display", Helvetica, Arial, sans-serif;

    font-size: 100%;
    font-family: var(--body-font-family);
    line-height: 1.5;
    letter-spacing: 0.01em;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

h1,
h2,
h3 {
    font-family: var(--title-font-family);
    font-weight: 700;
    line-height: 1.2;
}

h2 {
    margin-top: 50px;
}

body {
    display: block;
    max-width: min(100ch, 100% - 4rem, 700px);
    margin-inline: auto;
    padding-bottom: 2rem;
}

summary {
    cursor: pointer;
}

.reco {
    font-family: var(--quote-font-family);
    word-spacing: 0.03rem;
    line-height: 1.8;
    font-weight: 500;
    font-size: 0.9rem;
}

reco-linkedin {
    background-color: #f9f9ff;
    border-radius: 8px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 16px;
}

reco-linkedin:not(:last-child) {
    display: block;
    margin-bottom: 32px;
}

reco-author {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

reco-author > img {
    width: 50px;
    height: 50px;
    border-radius: 1000px;
    border: 1px solid var(--baltic-700);
}

author-name,
author-job {
    display: block;
}

author-name {
    font-family: var(--title-font-family);
    font-weight: 700;
    font-size: 0.9rem;
}

author-job {
    font-size: 0.8rem;
}

photo-de-profil {
    display: flex;
    justify-content: center;
}

photo-de-profil > img {
    max-width: min(80%, 500px);
    border-radius: 8px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

h2 > svg {
    width: 20px;
    margin-right: 4px;
    color: var(--prune-950);
}

code {
    background-color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.competences-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

@media (max-width: 600px) {
    .competences-grid {
        grid-template-columns: 1fr;
    }
}

competence-bloc {
    display: block;
    background-color: var(--parme-100);
    border-left: 4px solid var(--baltic-700);
    border-radius: 0 8px 8px 0;
    padding: 1.25rem 1.5rem;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

competence-bloc.full-width {
    grid-column: 1 / -1;
}

competence-bloc h3 {
    margin-top: 0;
}

competence-bloc p:last-child {
    margin-bottom: 0;
}

#prune-logo {
    margin-top: 32px;
    max-width: min(275px, 75%);
}

a:link {
    color: var(--baltic-800);
}

a:visited {
    color: var(--baltic-700);
}

a:hover {
    color: var(--baltic-600);
}

a:active {
    color: var(--baltic-700);
}

.mentions-legales {
    margin-top: 16px;
}