/**
 * Général :
 */

html {
    --white: #FFFFFFFF;
    --white-0-percents: #ffffff00;
    --white-30-percents: hsla(0, 0%, 100%, 0.3);
    --white-60-percents: hsla(0, 0%, 100%, 0.6);
    --red: #8E1D14FF;
    --blue: #0E1021FF;
    --beige: hsl(0, 4%, 97%);
    --t1: 100ms;
    --t1-5: 150ms;
    --t2: 200ms;
    --t3: 300ms;
    --t4: 400ms;
    --t5: 500ms;
    --right-scrollbar-size: 0px;
    --scroll-top: 0;
    --header-height: 0px;
    --gap: 1em;
    --cross: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzkuODU3IiBoZWlnaHQ9IjM5LjcxNCIgdmlld0JveD0iMCAwIDM5Ljg1NyAzOS43MTQiPgogIDxkZWZzPgogICAgPGNsaXBQYXRoIGlkPSJjbGlwLXBhdGgiPgogICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlXzE0IiBkYXRhLW5hbWU9IlJlY3RhbmdsZSAxNCIgd2lkdGg9IjM5Ljg1NyIgaGVpZ2h0PSIzOS43MTQiLz4KICAgIDwvY2xpcFBhdGg+CiAgPC9kZWZzPgogIDxnIGlkPSJHcm91cF80IiBkYXRhLW5hbWU9Ikdyb3VwIDQiIGNsaXAtcGF0aD0idXJsKCNjbGlwLXBhdGgpIj4KICAgIDxwYXRoIGlkPSJQYXRoXzIiIGRhdGEtbmFtZT0iUGF0aCAyIiBkPSJNMzkuODU2LDcuNjM0LDMyLjE5NSwwLDE5LjkyOCwxMi4yMjQsNy42NjEsMCwwLDcuNjM0LDEyLjI2NywxOS44NTcsMCwzMi4wODFsNy42NjEsNy42MzNMMTkuOTI4LDI3LjQ5MiwzMi4xOTUsMzkuNzE0bDcuNjYxLTcuNjMzTDI3LjU4OSwxOS44NTdaTTE5LjkyOCwyMy4xNTJhMy4yOTQsMy4yOTQsMCwxLDEsMy4zMDYtMy4yOTQsMy4zLDMuMywwLDAsMS0zLjMwNiwzLjI5NCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIvPgogIDwvZz4KPC9zdmc+Cg==);
    margin: 0;
    font-size: 0.80em;
    font-family: 'Referenz Grotesk';
    color: var(--blue);
}

body {
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: auto 1fr auto;
    margin: 0;
    min-height: 100vh;
    overflow-y: scroll;
}

a {
    text-decoration: none;
    color: var(--blue);
    transition: var(--t3) ease;
}

a:hover {
    color: var(--red);
}

.button {
    color: var(--red);
    padding: 5.5px 10px;
    border: 1px solid var(--red);
    cursor: pointer;
    transition: var(--t3) ease;
}

.button:hover, .selected {
    color: var(--white);
    background-color: var(--red);
}

.right-scrollbar-sizer {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    height: 0;
    width: calc(100vw - 100%);
}

header, .main, footer, .popup {
    width: calc(94vw - var(--right-scrollbar-size));
}

/**
 * Template :
 */

[data-type="template"] {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

[data-repeat], [data-type="template"] img {
    display: none;
}

/**
 * Data :
 */

[data-type="database"] {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

/**
 * Header :
 */

header {
    place-self: start center;
    display: grid;
    position: fixed;
    background-color: var(--white);
    grid-auto-flow: column;
    grid-template-columns: 1fr auto;
    height: 13vh;
    max-height: 99px;
    z-index: 5;
    user-select: none;
}

.header-placeholder {
    height: 13vh;
    max-height: 99px;
    background-color: var(--white);
    z-index: 3;
}

a.logo {
    display: grid;
    place-self: center start;
    width: max-content;
    height: max-content;
}

a.logo svg {
    fill: var(--red);
    width: auto;
    height: 3.3vh;
    max-height: 25px;
}

nav {
    display: flex;
    flex-direction: row;
    place-items: center;
    gap: 1.6em;
    text-transform: uppercase;
    font-weight: 500;
}

.logo-cross {
    transform: translate(9.176px, 0.75px) rotate(calc(var(--scroll-top) * 1deg));
    transform-origin: center;
    transform-box: fill-box;
    transition: var(--t1) linear;
}

/**
 * Main :
 */

.main {
    --filter-translate-y: 0px;
    position: relative;
    place-self: start center;
    height: max-content;
    margin-top: calc(-1 * var(--filter-translate-y));
    overflow: hidden;
    transition: var(--t4) ease;
}

.grid {
    --hidden-row-count: 0;
    display: grid;
    position: absolute;
    top: 0;
    gap: var(--gap);
    place-items: start center;
    overflow: hidden;
    grid-auto-flow: dense;
    width: 100%;
    pointer-events: none;
    margin-bottom: calc(-1 * var(--hidden-row-count) * var(--gap));
    transition: var(--t4) ease;
}

.grid__block {
    --scale-x: 1;
    --scale-y: 1;
    --translate-x: 0px;
    --translate-y: 0px;
    --opacity-grid-load: 0;
    --opacity-filter: 0;
    background-color: var(--beige);
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    opacity: calc(var(--opacity-grid-load) + var(--opacity-filter));
    transform: scaleX(var(--scale-x)) scaleY(var(--scale-y)) translateX(var(--translate-x)) translateY(var(--translate-y));
    transition: var(--t4) ease;
    z-index: 1;
    aspect-ratio: 1.2;
}

.grid__block__content {
    position: relative;
    opacity: 0;
    transform: translateY(100%);
    transition: var(--t4) ease;
    overflow: hidden;
}

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

.grid__block__content__white-area {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: var(--t5) ease;
    background: linear-gradient(180deg, var(--white-30-percents) 0%, var(--white-60-percents) 100%);
    opacity: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: var(--cross), linear-gradient(0, var(--white) 0%, var(--white) 100%);
    -webkit-mask-position: center 48%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-composite: destination-out;
    mask-image: var(--cross), linear-gradient(0, var(--white) 0%, var(--white) 100%);
    mask-position: center 48%;
    mask-repeat: no-repeat;
    mask-composite: destination-out;
    transform: scale(1.5);
}

.grid__block:hover .grid__block__content__white-area {
    opacity: 1;
    -webkit-mask-position: center 50%;
    -mask-position: center 50%;
}

.grid__block__content__text {
    display: flex;
    flex-direction: column;
    place-items: start end;
    position: absolute;
    transition: var(--t5) ease;
    opacity: 0;
    width: calc(100% - 5em);
    padding: 1.5em 2.5em;
    bottom: -10%;
}

.grid__block:hover .grid__block__content__text {
    opacity: 1;
    bottom: 0;
}

.grid__block__content__text h2 {
    color: var(--red);
    text-transform: uppercase;
    margin: 0;
}

.grid__block__content__text p {
    font-weight: 500;
    margin: 0;
}

.grid:not(.filterable) .grid__block {
    z-index: 2;
}

.filter {
    --filter-translate-y: 0px;
    display: grid;
    position: fixed;
    background-color: var(--white);
    grid-auto-flow: row;
    gap: 4px;
    grid-column-end: span var(--n-column);
    margin-bottom: 0.5em;
    width: calc(94vw - var(--right-scrollbar-size));
    top: var(--header-height);
    place-self: center;
    transform: translateY(var(--filter-translate-y));
    transition: var(--t4) ease;
    opacity: 0;
    z-index: 2;
    user-select: none;
}

.filter:not(:hover), .filter:hover ~ .main {
    --filter-translate-y: calc(-1 * (5.5em + 18px));
}

.filter__burger {
    display: grid;
    position: absolute;
    max-width: max-content;
    max-height: max-content;
    z-index: 3;
    gap: 4px;
    left: calc((5em + 18px) / 2);
    top: calc((5em + 18px) / 2);
    transform: translate(-50%, calc(-1 * var(--filter-translate-y) - 50%));
    background-color: var(--white);
    padding: 6px 5px;
    outline: 1px solid var(--blue);
    transition: var(--t4) ease;
}

.filter__burger__area {
    background-color: var(--red);
    width: 1.5em;
    height: 3px;
    overflow: hidden;
}

.filter__burger__title {
    position: absolute;
    right: -0.25em;
    transform: translateX(100%);
    color: var(--red);
    text-transform: uppercase;
    font-weight: 600;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.filter__burger__title__inner {
    transition: var(--t3) ease;
}

.filter:hover .filter__burger__title__inner {
    transform: translateX(-100%);
    opacity: 0;
}

.filter__options {
    background-color: var(--beige);
    width: calc(100% - 7em - 18px);
    height: 2.5em;
    margin-left: calc(5em + 18px);
    display: flex;
    gap: 0.5em;
    flex-direction: row;
    place-items: center;
    padding: 0 1em;
}

.filter__options__title {
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    margin-right: 0.5em;
    width: 9.5ch;
    cursor: default;
}

.filter__border {
    background-color: var(--red);
    width: 100%;
    height: 3px;
}

/**
 * Grid 1 colonne :
 */

.grid-1-column {
    --n-column: 1;
    grid-template-columns: 1fr;
}

/**
 * Grid 3 colonnes :
 */

.grid-3-columns {
    --n-column: 3;
    grid-template-columns: repeat(3, 1fr);
}

/**
 * Grid 4 colonnes :
 */

.grid-4-columns {
    --n-column: 4;
    grid-template-columns: repeat(4, 1fr);
}

/**
 * Footer :
 */

footer {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr auto;
    place-self: center;
    height: 8vh;
    max-height: 61px;
}

.copyrights {
    display: grid;
    grid-auto-flow: column;
    place-items: center;
    place-self: center start;
}

.footer-links {
    display: grid;
    grid-auto-flow: column;
    place-items: center;
    gap: 1em;
}

.footer-links svg {
    width: 1.5em;
    height: 1.5em;
    fill: var(--red);
    transition: var(--t3) ease;
}

.footer-links a:hover svg {
    transform: scale(1.1);
}

/**
 * Popup :
 */
.popup-display {
    display: grid;
    position: relative;
    width: calc(100vw - var(--right-scrollbar-size));
    height: max-content;
    pointer-events: none;
    background-color: var(--white);
    opacity: 0;
    margin-left: -3vw; /** Pas de transform pour éviter de blocker les positions 'fixed' internes */
    transition: var(--t2) ease;
    z-index: 3;
}

.popup-display .popup {
    display: grid;
}

.popup-placeholder {
    display: none !important;
}

.popup {
    display: none;
    place-items: start center;
    place-self: center;
    background-color: var(--beige);
    width: 80%;
    height: 100%;
    transition: var(--t2) ease;
    pointer-events: all;
}

.close-popup {
    background-color: var(--red);
    -webkit-mask-image: var(--cross);
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--cross);
    mask-size: 100%;
    mask-repeat: no-repeat;
    width: 1.5em;
    height: 1.5em;
    background-size: 100%;
    position: fixed;
    place-self: start end;
    transform: translate(-100%, 100%);
    cursor: pointer;
    z-index: 1;
}

.popup__content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    place-items: start center;
    width: calc(100% - 2 * 4.5em);
    padding: 3.5em 4.5em;
    gap: 4.5em;
}

.popup__content__text {
    width: 100%;
    place-self: start;
}

.text {
    display: flex;
    flex-direction: column;
}

.popup__content h1 {
    place-self: center;
    margin-top: 0;
    text-align: center;
}

.popup__content p {
    font-size: 1.3em;
}

.can-popup {
    cursor: pointer;
}