:root {
    --color-bk: #F2F2F2;
    --color-bka: rgba(242, 242, 242, .6);
    --color-scd: #7c7c7c;
    --color-txt: #000000;
    --color-str: #382A28;

    --border-m: 9px;
    --border-s: 6px;

    --base-space: 12px;

    --blur: blur(12px);
    --shadow: 0 0 7px rgba(73, 68, 73, 0.2);

    --transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

:root {
    --margin-xs: calc(var(--base-space) * .5);
    --margin-sm: calc(var(--base-space) * 1);
    --margin-md: calc(var(--base-space) * 2);
    --margin-lg: calc(var(--base-space) * 4);
    --margin-xl: calc(var(--base-space) * 8);
    --margin-xxl: calc(var(--base-space) * 16)
}

@media screen and (min-width: 0px) {
    :root {
        --fs-extra: 22px;
        --lh-extra: 26px;

        --fs-big: 16px;
        --lh-big: 20px;

        --fs-main: 14px;
        --lh-main: 18px;

        --fs-small: 12px;
        --lh-small: 16px;
    }
}

@media screen and (min-width: 576px) {
    :root {
        --fs-extra: 26px;
        --lh-extra: 28px;

        --fs-big: 16px;
        --lh-big: 20px;

        --fs-main: 14px;
        --lh-main: 18px;

        --fs-small: 12px;
        --lh-small: 16px;
    }
}

html {
    scroll-behavior: smooth;
}


@font-face {
    font-family: 'manifont-grotesk-book-italic';
    src: url('../fonts/manifont-grotesk/manifont-grotesk_book-italic.eot');
    src: url('../fonts/manifont-grotesk/manifont-grotesk_book-italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/manifont-grotesk/manifont-grotesk_book-italic.woff') format('woff'),
        url('../fonts/manifont-grotesk/manifont-grotesk_book-italic.ttf') format('truetype'),
        url('../fonts/manifont-grotesk/manifont-grotesk_book-italic.svg#manifont-grotesk-book-italic') format('svg');
}

@font-face {
    font-family: 'manifont-grotesk-bold';
    src: url('../fonts/manifont-grotesk/manifont-grotesk_bold.eot');
    src: url('../fonts/manifont-grotesk/manifont-grotesk_bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/manifont-grotesk/manifont-grotesk_bold.woff') format('woff'),
        url('../fonts/manifont-grotesk/manifont-grotesk_bold.ttf') format('truetype'),
        url('../fonts/manifont-grotesk/manifont-grotesk_bold.svg#manifont-grotesk-bold') format('svg');
}

@font-face {
    font-family: 'manifont-grotesk-book';
    src: url('../fonts/manifont-grotesk/manifont-grotesk_book.eot');
    src: url('../fonts/manifont-grotesk/manifont-grotesk_book.eot?#iefix') format('embedded-opentype'),
        url('../fonts/manifont-grotesk/manifont-grotesk_book.woff') format('woff'),
        url('../fonts/manifont-grotesk/manifont-grotesk_book.ttf') format('truetype'),
        url('../fonts/manifont-grotesk/manifont-grotesk_book.svg#manifont-grotesk-book') format('svg');
}




body {
    font-family: 'manifont-grotesk-book', Arial, Helvetica, sans-serif;

    font-size: var(--fs-main);
    line-height: var(--lh-main);

    -webkit-tap-highlight-color: transparent;
    height: fit-content;
    margin: 0 !important;
    padding: 0 !important;

    background-color: var(--color-bk);
    padding-top: env(safe-area-inset-top);
}

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

a:hover {
    cursor: pointer;
}


/* NAVIGATION */
nav {
    z-index: 3;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;

    transition: var(--transition);
}

.navOpen {
    height: calc(var(--vh, 1vh) * 100);
    background-color: var(--color-bka);
    backdrop-filter: var(--blur);
}

.navOut {
    transform: translateY(-100%);

    transition: var(--transition);
}

#presentation {
    padding: var(--margin-sm);
    padding-top: 0;
    color: var(--color-bk);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 2;

    font-size: var(--fs-big);
    line-height: var(--lh-big);

    font-weight: 800;
}

#presentation span {
    font-weight: 400;
    opacity: .5;

}

.hidePresentation {
    display: none !important;
}

.dices {
    display: flex;
    gap: var(--base-space);
    width: 100%;
    /* justify-content: center; */
    padding: var(--margin-sm);
    z-index: 2;

    padding-bottom: var(--margin-md);
}

.dices a {
    background-color: white;
    border: none;

    height: 60px;
    width: auto;
    aspect-ratio: 1;
    border-radius: var(--border-m);
    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: var(--shadow);
}

.dices a span {
    display: none;
}


.dices a:hover span {
    display: block;
}

.dices a:hover img {
    display: none;
}

/* Add this class to your stylesheet */
.dice-rolling {
    /* animation: shake 0.3s ease-in-out infinite alternate; */
}

@keyframes shake {
    0% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(2deg);
    }
}

.dice-rolling2 {
    /* animation: shake2 0.3s ease-in-out infinite alternate; */
}

@keyframes shake2 {
    0% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(-2deg);
    }
}

/* INDEX */
#rideau {
    position: relative;

    background-color: var(--color-str);
    height: calc(var(--vh, 1vh) * 100);
    width: 100%;
    background-color: var(--color-str);
    position: absolute;
    z-index: 1;
}

.hideRideau {
    transform: translateY(-100%);
    transition: var(--transition);
}

.index {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 2;

    flex-direction: column;
    padding: 0 var(--base-space);

    display: none;
    justify-content: center;
}

.indexOpen {
    display: flex;
}

.indexTitres {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    padding: var(--base-space);
    /* font-size: 12px; */

    display: flex;
    align-items: flex-start;
    gap: var(--margin-sm);

    font-size: var(--fs-small);
}

.index a {
    padding: var(--margin-sm) 0;
    border-top: 1px solid var(--color-scd);
    /* text-align: center; */
}

.index a:last-of-type {
    border-bottom: 1px solid var(--color-scd);
}

.index a.active {
    font-weight: bold;
}

/* INFOS PANEL CONTAINER */
.specs {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: calc(100% - var(--margin-sm) * 2);
    margin: var(--margin-sm);
    color: var(--color-bk);
    background-color: var(--color-str);
    border-radius: var(--border-m);
    transition: var(--transition);
    box-shadow: var(--shadow);
}

h3 {
    /* text-transform: uppercase; */
    margin: 0;
}

/* THE BASE INTERACTIVE HEADER BLOCK */
.specsBase {
    padding: var(--margin-xs);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    /* Stack the header row and the subtitle vertically */
    gap: var(--margin-xs);
    /* Space between title line and subtitle line */
    width: 100%;
    box-sizing: border-box;
}

/* NEW FLEX ROW: Pushes Title to left and Indicator to right */
.specsHeaderRow {
    display: flex;
    justify-content: space-between;
    align-items: end;
    width: 100%;
}

/* SUBTITLE: Sits safely beneath the top row */
#soustitre {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: .5;
    font-weight: 400;
    margin: 0;
}

#indicator {
    background-color: #00000047;
    width: 24px;
    aspect-ratio: 1;
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.specsBase:hover #indicator {

    background-color: var(--color-bk);
    color: var(--color-txt);
    transition: var(--transition);
}

/* HIDDEN EXTRA DETAILS DRAWER */
.specsExtra {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--margin-sm);
    max-height: 0;
    padding: 0 var(--base-space);
    overflow: hidden;
    transition: var(--transition);
}

/* SHOWN EXTRA DETAILS DRAWER */
.specsExtraFull {
    max-height: calc(var(--vh, 1vh) * 60);
    opacity: 1;
    padding: var(--base-space);
    padding-top: 0;
    overflow-y: auto;
}

.noWrap {
    white-space: break-spaces !important;
}

/* PROJECTS */
.projects {
    position: fixed;
    top: 0;
    left: 0;

    height: calc(var(--vh, 1vh) * 100);
    width: 100%;
    overflow: scroll;

    z-index: 0;

    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.main-carousel {
    height: 100%;
    width: 100%;

    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.carousel-cell {
    width: 100%;
    height: 100%;
}

.carousel-cell img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* position dots up a bit */
.flickity-page-dots {
    bottom: 0px !important;
    display: flex !important;

}

/* dots are lines */
.flickity-page-dots .dot {
    background: var(--color-str) !important;

    height: 3px !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
}




/* INFO PAGE */
.main {
    padding: var(--margin-md) var(--base-space) var(--base-space) var(--base-space);
    display: flex;
    flex-direction: column;
    gap: var(--base-space);
    z-index: 2;
    position: relative;
}

.block {
    gap: var(--margin-xs);
    display: flex;
    flex-direction: column;
    align-items: self-start;
    width: 100%;
}

#contact {
    display: flex;
    gap: var(--base-space);
}

#contact a {
    background-color: white;
    border: none;
    width: 100%;
    border-radius: var(--border-s);
    box-shadow: var(--shadow);
    padding: var(--margin-xs);
    height: fit-content;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


#contact a>div {
    background-color: black;
    height: 10px;
    aspect-ratio: 1;
    border-radius: 100%;

    opacity: 0;
    transition: var(--transition);

}

#contact a:hover>div {
    opacity: 1;
    transition: var(--transition);

}


hr {
    width: 100%;
    border-top: 1px solid var(--color-scd);
    color: transparent;
}

/* CRITIQUE */
#critique {
    font-size: var(--fs-main);
    line-height: var(--lh-main);
    margin-bottom: var(--margin-md);
}

.main h4 {
    font-size: var(--fs-extra);
    line-height: var(--lh-extra);
    font-weight: 800;
}

/* PORTRAIT */
#portrait img {

    cursor: zoom-in;
    object-fit: contain;
    border-radius: 4px;
    width: 60%;
}

#portrait small {
    display: none;
    font-weight: 800;
    font-size: var(--fs-main);
}

#portrait.active-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: self-start;
    gap: var(--base-space);
    padding: var(--base-space);

    background-color: var(--color-bka);
    color: var(--color-txt);
    backdrop-filter: var(--blur);
    justify-content: space-between;
}


#portrait.active-fullscreen img {
    width: 100%;
}

#portrait.active-fullscreen small {
    display: block;
    font-size: var(--fs-main);
}

/* Sections */
#sections {
    gap: var(--margin-lg);
    margin-top: var(--margin-md);
}

#sections>.block {
    gap: var(--margin-sm);
}

#sections small,
.specsExtra small {
    position: sticky;
    top: var(--base-space);
    height: fit-content;

    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--color-scd);
}

.sous-section {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: var(--base-space);
}

.sous-section p,
.sous-section a,
.sous-section span {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.sous-section small {
    display: block;
    flex-shrink: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--color-scd);
}

#sections small,
.specsExtra small {
    position: sticky;
    top: var(--base-space);
    height: fit-content;
    width: 80px;
}

/* CERSITS */

#credits {
    margin-top: var(--margin-lg);
}

#credits hr {
    padding-bottom: var(--margin-sm);
}

#credits a:hover {
    text-decoration: underline;
}

#credits small {
    width: 80px;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--color-scd);
}