@font-face {
    font-family: 'Acumin';
    src: url('FONTS/AcuminVariableConcept.otf') format('opentype');
    font-weight: 100 900;
    font-stretch: 50% 115%;
    font-style: normal;
}


:root {
    --grid-cols: 8;
    --grid-rows: 8;
    /* Laptop : 24px / 28.8px interlignage / approche 38 */
    --text-size: 1.39rem;
    --text-leading: 1.30;
    --text-tracking: 0.038em;
    --fv-regular: 'wght' 364, 'wdth' 100, 'slnt' 0;
    --fv-italic: 'wght' 194, 'wdth' 100, 'slnt' 12;
    --fv-bold: 'wght' 700, 'wdth' 100, 'slnt' 0;
    --fv-bold-italic: 'wght' 700, 'wdth' 100, 'slnt' 12;
    --fv-light: 'wght' 200, 'wdth' 100, 'slnt' 0;
}

html {
    font-size: clamp(0.875rem, 0.75rem + 0.3906vw, 1rem);
}

body {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    grid-template-rows: repeat(var(--grid-rows), minmax(0, 1fr));
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 23px 25px;
    background-color: black;
    color: white;
    font-family: 'Acumin';
    font-size: var(--text-size);
    line-height: var(--text-leading);
    letter-spacing: var(--text-tracking);
    text-align: justify;
    font-synthesis: none;
    font-variation-settings: var(--fv-regular);
}

header {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 8), minmax(0, 1fr));
    width: 100%;
    align-items: start;
}

header > a,
header > div:not(.contact-image),
.projet-titre {
    grid-column: 1 / 7;
    grid-row: 1;
    justify-self: start;
    align-self: start;
    max-width: 100%;
    font: inherit;
    margin: 0;
}

header > div:not(.contact-image) {
    white-space: nowrap;
}

.site-titre {
    white-space: normal;
    font-style: normal;
    font-weight: normal;
    font-variation-settings: var(--fv-regular);
}

.site-nom {
    font-style: normal;
    font-weight: 700;
    font-variation-settings: var(--fv-bold);
}

.projet-titre {
    white-space: normal;
}

a.active,
.nav-portfolio-toggle.active,
.portfolio-filtres button.active {
    font-style: normal;
    font-weight: normal;
    font-variation-settings: var(--fv-bold-italic);
}

nav {
    display: contents;
}

nav ul:nth-child(1),
.nav-portfolio {
    grid-column: 7;
    grid-row: 1;
    justify-self: start;
    align-self: start;
}

.nav-portfolio {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-portfolio-toggle,
.portfolio-filtres button,
nav > ul:not(.nav-portfolio) > li > a,
nav > ul:nth-child(2) > li > a {
    font-style: normal;
    font-weight: normal;
    font-synthesis: none;
    font-variation-settings: var(--fv-regular);
}

.nav-portfolio-toggle:hover:not(.active),
nav > ul:not(.nav-portfolio) > li > a:hover:not(.active),
nav > ul:nth-child(2) > li > a:hover:not(.active) {
    font-variation-settings: var(--fv-italic);
}

.nav-portfolio-toggle:hover.active,
nav > ul:not(.nav-portfolio) > li > a:hover.active,
nav > ul:nth-child(2) > li > a:hover.active {
    font-variation-settings: var(--fv-bold-italic);
}

.nav-portfolio-toggle,
.portfolio-filtres button {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.portfolio-filtres button {
    display: block;
    line-height: 1;
    padding-block: 2.5px;
}

.portfolio-filtres {
    list-style: none;
    margin: 0;
    margin-left: 20px;
    padding: 0;
    display: none;
}

.nav-portfolio:hover .portfolio-filtres {
    display: block;
}

.portfolio-filtres button:hover:not(.active) {
    font-variation-settings: var(--fv-italic);
}

.portfolio-filtres button.active:hover {
    font-variation-settings: var(--fv-bold-italic);
}

a.projet.projet-hidden {
    display: none;
}

main.portfolio-filtered .long {
    display: none;
}

main.portfolio-filtered .short {
    display: none;
}

nav ul:nth-child(2),
nav ul:nth-child(3) {
    grid-column: 8;
    grid-row: 1;
    justify-self: start;
    align-self: start;
}

main {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    isolation: isolate;
}

.grille-accueil {
    --img-cols: 2;
    --img-rows: 4;
    --img-size: 95%;

    margin-top: -60px;
    grid-column: 1 / -1;
    grid-row: 3 / 14;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    grid-auto-flow: row dense;
    z-index: 0;
    pointer-events: none;
}

.grille-accueil img {
    grid-column: span var(--img-cols);
    grid-row: span var(--img-rows);
    justify-self: center;
    align-self: center;
    width: auto;
    height: auto;
    max-width: var(--img-size);
    max-height: var(--img-size);
    object-fit: contain;
    max-inline-size: none;
}

/* ------------- hover accueil ------------- */
a.projet {
    grid-column: span var(--img-cols);
    grid-row: span var(--img-rows);
    position: relative;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.projet img {
    grid-column: unset;
    grid-row: unset;
    transition: opacity 0.2s ease;
}

.projet img.projet-img-moyen {
    max-width: 80%;
    max-height: 80%;
}

.projet img.projet-img-petit {
    max-width: 70%;
    max-height: 70%;}

.projet img.projet-img-tel {
    max-width: 65%;
    max-height: 65%;
    transform: translateY(-20px);

}

.projet img.projet-img-mini {
    max-width: 60%;
    max-height: 60%;
}



.projet-texte {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.projet:hover img {
    opacity: 0;
}

.projet:hover .projet-texte {
    opacity: 1;
}

main > header,
main > .long,
main > .short {
    position: relative;
    z-index: 1;
}

.long {
    position: fixed;
    grid-column: 1 / -1;
    grid-row: 13 / -1;
    align-self: start;
    min-height: 0;
}

.contact-texte {
    grid-column: 1 / -1;
    grid-row: 4 / -1;
    align-self: start;
    min-height: 0;
}

.short {
    grid-column: 6 / -1;
    grid-row: 15;
    align-self: start;
    justify-self: end;
    font-style: normal;
    font-weight: normal;
    font-variation-settings: var(--fv-light);
}

/* ------------- ACCUEIL ------------- */
body:has(.grille-accueil) {
    --row-unit: calc((100vh - 46px) / 8);
    height: auto;
    min-height: 100vh;
    grid-template-rows: repeat(14, var(--row-unit));
}

body:has(.grille-accueil) main {
    grid-row: 1 / 16;
}

main:not(:has(.contact-info)) .long {
    grid-row: 14;
    align-self: end;
}

/* ------------- CONTACT PAGE ------------- */
body:has(.contact-texte):not(:has(.grille-accueil)) {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    --row-unit: calc((100vh - 46px) / 8);
    --contact-header-gap: 3rem;
    --contact-image-height: calc(3 * var(--row-unit));
    --contact-text-gap: 3rem;
    --contact-title-height: calc(2 * var(--text-size) * var(--text-leading));
    grid-template-rows: repeat(8, var(--row-unit));
}

body:has(.contact-texte):not(:has(.grille-accueil)) .contact-texte {
    grid-row: 1 / 7;
    margin-top: calc(var(--contact-title-height) + var(--contact-header-gap) + var(--contact-image-height) + var(--contact-text-gap));
    min-height: 0;
    align-self: start;
}

body:has(.contact-texte):not(:has(.grille-accueil)) .contact-info {
    grid-row: 7 / -1;
    align-self: end;
    align-content: end;
}

.contact-texte span {
    grid-column: 1 / -1;
    padding-inline-start: calc(100% / var(--grid-cols));
}


.long span {
    grid-column: 1 / -1;
    padding-inline-start: calc(100% / var(--grid-cols));
}

header:has(.contact-image) {
    grid-row: 1 / 4;
    grid-template-rows: auto auto;
    row-gap: var(--contact-header-gap, 3rem);
    align-items: start;
    overflow: visible;
}

header:has(.contact-image) .site-titre {
    grid-row: 1;
}

header:has(.contact-image) nav ul {
    grid-row: 1;
}

.contact-image {
    grid-row: 2;
    grid-column: 1;
    justify-self: start;
    align-self: start;
    height: var(--contact-image-height);
    width: max-content;
    overflow: visible;
    margin-top: 0;
}

.contact-image img {
    display: block;
    height: 100%;
    width: auto;
    max-inline-size: none;
    max-block-size: none;
    object-fit: cover;
}

.contact-info {
    grid-column: 1 / -1;
    grid-row: 9;
    display: grid;
    grid-template-columns: subgrid;
    grid-auto-rows: min-content;
    align-self: end;
    align-content: end;
}

.label {
    font-style: normal;
    font-weight: normal;
    font-variation-settings: var(--fv-bold);
}

.contact-info > div:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
}

.contact-info > div:nth-child(2) {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: start;
}

.contact-info > div:nth-child(3) {
    grid-column: 3 / -1;
    grid-row: 3;
    justify-self: start;
}

@media (max-width: 767px) {
    :root {
        --grid-cols: 8;
        --grid-rows: 8;
        --text-size: clamp(0.875rem, 2.6vw, 1.1rem);
    }

    body {
        padding: 16px 18px;
    }

    nav ul:nth-child(1),
    .nav-portfolio {
        grid-column: 6;
        grid-row: 1;
        justify-self: start;
        align-self: start;
    }

    nav ul:nth-child(2),
    nav ul:nth-child(3) {
        grid-column: 8;
        grid-row: 1;
        justify-self: start;
        align-self: start;
    }

    .grille-accueil {
        --img-cols: 4;
        --img-rows: 3;
        --img-size: 88%;
        margin-top: -10px;
        grid-row: 2 / 18;
    }

    .long {
        position: relative;
        grid-row: 18 / 21;
        align-self: start;
    }

    main:not(:has(.contact-info)) .long {
        grid-row: 19 / 21;
        align-self: start;
    }

    .short {
        grid-column: 2 / -1;
        grid-row: 19;
        align-self: end;
        justify-self: end;
    }

    body:has(.contact-texte):not(:has(.grille-accueil)) .contact-texte {
        grid-row: 1 / 6;
        margin-top: calc(var(--contact-title-height) + var(--contact-header-gap) + var(--contact-image-height) + var(--contact-text-gap));
    }

    header:has(.contact-image) {
        grid-row: 1 / 3;
        row-gap: var(--contact-header-gap, 3rem);
    }

    .contact-image {
        grid-row: 2;
        max-width: calc(3 * (100% / var(--grid-cols)));
        margin-top: 0;
    }

    .contact-image img {
        max-height: calc(2.5 * var(--row-unit, calc((100vh - 32px) / 8)));
    }

    body:has(.contact-texte):not(:has(.grille-accueil)) .contact-info {
        grid-row: 6 / -1;
        align-self: end;
        align-content: end;
    }

    body:has(.contact-texte) .contact-info > div:nth-child(2) {
        grid-column: 2 / -1;
    }

    body:has(.contact-texte) .contact-info > div:nth-child(3) {
        grid-column: 3 / -1;
    }

    body:has(.contact-texte):not(:has(.grille-accueil)) {
        --row-unit: calc((100vh - 32px) / 8);
        --contact-image-height: calc(2.5 * var(--row-unit));
        grid-template-rows: repeat(8, var(--row-unit));
    }

    body:has(.grille-accueil) {
        --row-unit: calc((100vh - 32px) / 8);
        grid-template-rows: repeat(22, var(--row-unit));
    }

    body:has(.grille-accueil) main {
        grid-row: 1 / 23;
    }
}