/* ==========================================================
   ABPV ARCHITECTES — PARAMÈTRES PRINCIPAUX
========================================================== */

:root {
    /* TYPOGRAPHIE */
    --font-size: 10.5px;
    --line-height: 1.22;

    /* MISE EN PAGE GÉNÉRALE */
    --page-margin: clamp(20px, 3.2vw, 64px);
    --header-top: 24px;
    --content-top: 56px;
    --content-bottom: 120px;

    /* PROJETS */
    --image-size: 600px;
    --caption-width: 600px;
    --image-caption-gap: 24px;
    --project-spacing: 30px;

    --content-width: calc(
    var(--image-size)
    + var(--image-caption-gap)
    + var(--caption-width)
);

    /* LÉGENDES */
    --caption-title-spacing: 14px;
    --caption-description-spacing: 14px;
    --caption-label-gap: 12px;

    /* PAGE INFORMATIONS */
    --information-width: 1020px;
    --information-section-spacing: 32px;

    /* DIAPORAMA */
    --slider-transition-duration: 220ms;

    /* COULEURS */
    --background: #ffffff;
    --text: #111111;
    --image-placeholder: #ffffff;
}


/* ==========================================================
   BASE
========================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;

    background: var(--background);
    color: var(--text);

    font-family:
        "Letter Gothic Std",
        "Letter Gothic",
        "Courier New",
        Courier,
        monospace;

    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: 400;
}

a {
    color: inherit;
    text-decoration: none;
}

p,
h1,
h2,
dl,
dt,
dd,
figure {
    margin: 0;
    padding: 0;
}

h1,
h2 {
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

img,
video {
    display: block;

    width: 100%;
    max-width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==========================================================
   EN-TÊTE
========================================================== */

.site-header {
    position: fixed;
    z-index: 100;

    top: 0;
    left: var(--page-margin);

    padding-top: var(--header-top);

    background: transparent;

    transition: transform 180ms linear;
    will-change: transform;
}

.site-header.is-hidden {
    transform: translateY(-140%);
}


/* ==========================================================
   CONTENU PRINCIPAL
========================================================== */

.site-main {
    width: 100%;
    max-width: 100%;

    padding:
        var(--content-top)
        var(--page-margin)
        var(--content-bottom);
}


/* ==========================================================
   PAGE PROJETS
========================================================== */

.projects-page {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: var(--project-spacing);
}

.project {
    width: min(100%, var(--content-width));

    display: grid;

    grid-template-columns:
        minmax(0, var(--image-size))
        minmax(260px, var(--caption-width));

    column-gap: var(--image-caption-gap);

    align-items: stretch;
}


/* ==========================================================
   DIAPORAMA
========================================================== */

.project-media {
    position: relative;

    width: min(100%, var(--image-size));
    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: var(--image-placeholder);

    cursor: pointer;
}

.slides {
    position: relative;

    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity var(--slider-transition-duration) ease,
        visibility 0s linear var(--slider-transition-duration);
}

.slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition:
        opacity var(--slider-transition-duration) ease,
        visibility 0s linear 0s;
}

.slide img,
.slide video {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.empty-media {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;
}


/* ==========================================================
   ZONES DE CLIC DU DIAPORAMA
========================================================== */

.slider-zone {
    position: absolute;
    z-index: 10;

    top: 0;
    bottom: 0;

    width: 50%;

    margin: 0;
    padding: 0;

    border: none;
    outline: none;

    background: transparent;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.slider-zone:focus,
.slider-zone:focus-visible,
.slider-zone:active {
    outline: none;
    box-shadow: none;
}

.slider-zone::-moz-focus-inner {
    border: 0;
}

.slider-zone--prev {
    left: 0;
}

.slider-zone--next {
    right: 0;
}


/* ==========================================================
   LÉGENDE DU PROJET
========================================================== */

.project-caption {
    width: 100%;
    max-width: var(--caption-width);
    min-width: 0;
    min-height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    overflow-wrap: anywhere;
}

.project-caption h2 {
    margin-bottom: var(--caption-title-spacing);
}

.project-description {
    margin-bottom: var(--caption-description-spacing);
}

.project-data {
    display: grid;

    grid-template-columns:
        max-content
        minmax(0, 1fr);

    column-gap: var(--caption-label-gap);
}

.project-data dt,
.project-data dd {
    min-width: 0;
}

.project-counter {
    margin: 0;
}


/* ==========================================================
   PAGE INFORMATIONS
========================================================== */

.information-page {
    width: min(100%, var(--information-width));

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: var(--information-section-spacing);
}

.information-page section {
    width: 100%;
    max-width: var(--information-width);
}

.information-page section h1,
.information-page section h2 {
    margin-bottom: var(--caption-title-spacing);
}

.information-page section p + p {
    margin-top: 12px;
}

.information-page footer {
    margin-top: var(--information-section-spacing);
}


/* ==========================================================
   RESPONSIVE — LÉGENDE SOUS LE DIAPORAMA
========================================================== */

@media (max-width: 1120px) {
    .project {
        width: min(100%, var(--image-size));

        grid-template-columns: minmax(0, 1fr);

        row-gap: 12px;

        align-items: start;
    }

    .project-caption {
        max-width: var(--image-size);
        min-height: 0;

        display: block;
    }
}


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

@media (max-width: 520px) {
    :root {
        --font-size: 10px;

        --page-margin: 18px;

        --header-top: 18px;
        --content-top: 48px;

        --project-spacing: 26px;
    }

    .project-data {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        column-gap: 8px;
    }
}


/* ==========================================================
   ACCESSIBILITÉ — MOUVEMENTS RÉDUITS
========================================================== */

@media (prefers-reduced-motion: reduce) {
    .site-header,
    .slide {
        transition: none;
    }
}

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

.site-footer {
    margin-top: var(--information-section-spacing);
}

/* ==========================================================
   CURSEUR
========================================================== */

html,
body,
a,
button,
.slider-zone {
    cursor: none;
}

#cursor {
    position: fixed;
    left: 0;
    top: 0;

    width: 6px;
    height: 6px;

    border-radius: 50%;
    background: rgb(0, 0, 255);

    pointer-events: none;
    z-index: 99999;

    transform: translate(-50%, -50%);
}

#cursor.is-link {
    width: 12px;
    height: 12px;
}