/* =========================================================
   CAMILLE SOULAT — GLOBAL CSS CLEAN
   ========================================================= */


/* =========================================================
   01 — BASE / CARGO
   ========================================================= */

[data-css-preset] body {
    background-color: rgba(205, 205, 205, 1) /*!body_bgcolor*/;
}

[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
    position: relative;

    min-height: 10px;

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

    background-color: transparent /*!page_bgcolor*/;
}


/*
   IMPORTANT :
   on conserve ici le comportement Cargo normal.
   Les pages projets restent dans la zone 80% alignée à droite.
*/

[data-css-preset] .container {
    margin-left: auto /*!content_right*/;
    margin-right: 0 /*!content_right*/;

    text-align: left /*!text_left*/;
}

[data-css-preset] .container_width {
    width: 80% /*!content_right*/;
}

[data-css-preset] .content_padding {
    padding-top: 5.4rem /*!main_margin*/;
    padding-bottom: 5.4rem /*!main_margin*/;
    padding-left: 5.4rem /*!main_margin*/;
    padding-right: 5.4rem /*!main_margin*/;
}

[data-css-preset] text-limit {
    display: inline-block /*!text_width*/;
    max-width: 66rem /*!text_width*/;
}


/* =========================================================
   02 — IMAGES
   ========================================================= */

.content img {
    float: none;

    margin-bottom: 0;

    vertical-align: bottom;

    box-shadow:
        0 0.5rem 7px rgba(0, 0, 0, 0.15);
}

.gallery_image_caption {
    margin-top: 1rem;
    margin-bottom: 0.5rem;

    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;

    color: rgba(0, 0, 0, 0.4);

    font-family:
        "iA Writer Quattro",
        Icons;

    font-style: normal;

    text-transform: uppercase;
}


/* =========================================================
   03 — TYPOGRAPHY CARGO
   ========================================================= */

[data-predefined-style="true"] bodycopy {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.4;

    color: rgba(0, 0, 0, 0.75);

    font-family:
        "iA Writer Quattro",
        Icons;

    font-style: normal;
}

[data-predefined-style="true"] bodycopy a {
    color: rgba(106, 106, 106, 0.85);

    padding-bottom: 0.1em;

    border-bottom:
        0 solid rgba(127, 127, 127, 0.2);

    text-decoration: none;

    background-color: #d70e76;
}


/* H1 */

[data-predefined-style="true"] h1 {
    margin: 0;
    padding: 0;

    font-family:
        "iA Writer Quattro",
        Icons;

    font-style: normal;
    font-weight: 400;

    font-size: 5.5rem;
    line-height: 1;

    color: rgba(0, 0, 0, 0.75);
}


/* H2 */

[data-predefined-style="true"] h2 {
    margin: 0;
    padding: 0;

    font-family:
        "iA Writer Quattro",
        Icons;

    font-style: normal;
    font-weight: 400;

    font-size: 2.8rem;
    line-height: 1.2;

    letter-spacing: 0.05em;

    color: rgba(0, 0, 0, 0.85);
}


/* SMALL */

[data-predefined-style="true"] small {
    display: inline-block;

    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;

    font-family:
        "iA Writer Quattro",
        Icons;

    font-style: normal;

    color: rgba(0, 0, 0, 0.4);
}

[data-predefined-style="true"] small a {
    color: rgba(106, 106, 106, 0.85);
}


/* =========================================================
   04 — THUMBNAILS CARGO
   ========================================================= */

div[thumbnails] {
    justify-content: flex-start;
}

[data-css-preset] .thumbnails {
    background-color: transparent /*!thumbnails_bgcolor*/;
}

[data-css-preset] .thumbnails_width {
    width: 90% /*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 2rem /*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: -4rem /*!thumbnails_padding*/;
}

[data-css-preset]
[responsive-layout]
[thumbnails-pad] {
    padding: 0.75rem /*!responsive_thumbnails_padding*/;
}

[data-css-preset]
[responsive-layout]
[thumbnails-gutter] {
    margin: -1.5rem /*!responsive_thumbnails_padding*/;
}

.thumbnails .thumb_image {
    outline: 0 solid rgba(0, 0, 0, 0.12);

    outline-offset: -1px;
}

.thumbnails .title {
    margin-top: 1rem;
    margin-bottom: 0.4rem;

    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.3;

    color: rgba(0, 0, 0, 0.85);

    font-family:
        "iA Writer Quattro",
        Icons;
}

.thumbnails .tags {
    margin-top: 1rem;
    margin-bottom: 0.4rem;

    font-size: 1.2rem;
    line-height: 1.3;

    color: rgba(0, 0, 0, 0.4);

    font-family:
        "iA Writer Quattro",
        Icons;
}


/* =========================================================
   05 — CURSOR
   ========================================================= */

body,
body * {
    cursor: none !important;
}

#cursor {
    position: fixed;

    top: 0;
    left: 0;

    width: 24px;
    height: 24px;

    border: 1.2px solid rgba(90, 90, 90, 0.9);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.01);

    mix-blend-mode: difference;

    pointer-events: none;

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

    z-index: 999999999;

    will-change: transform;

    transition:
        width 0.16s ease,
        height 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        opacity 0.16s ease;

    animation:
        idleMorph 4s ease-in-out infinite;
}

#cursor::before,
#cursor::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    background: white;

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

#cursor::before {
    width: 8px;
    height: 1px;
}

#cursor::after {
    width: 1px;
    height: 8px;
}

#cursor.hover {
    width: 42px;
    height: 42px;

    border-color: rgba(197, 46, 117, 0.95);

    background: rgba(197, 46, 117, 0.04);

    animation: none;
}

#cursor.click {
    transform:
        translate(-50%, -50%)
        scale(0.82);
}

#cursor.hidden {
    opacity: 0;
}

@keyframes idleMorph {

    0% {
        border-color: rgba(85, 85, 85, 0.9);
    }

    50% {
        border-color: rgba(120, 120, 120, 0.9);
    }

    100% {
        border-color: rgba(85, 85, 85, 0.9);
    }
}


/* =========================================================
   06 — HEADER
   CAMILLE SOULAT + INDEX + INFORMATIONS
   ========================================================= */

/*
   Le HTML du header contient maintenant .site-header.
   C'est CE wrapper qui est centré.

   On ne positionne donc plus identity-block
   et mobile-nav indépendamment.
*/

.site-header {
    width: fit-content;
    max-width: 100%;

    margin-left: auto;
    margin-right: auto;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    box-sizing: border-box;
}


/* IDENTITÉ */

.identity-block {
    display: block;

    width: fit-content;

    position: static;

    margin: 0;

    padding: 16px 28px;

    background: #cdcdcd;

    box-sizing: border-box;

    flex: 0 0 auto;
}

.identity {
    position: relative;

    display: inline-block;
}


/* CAMILLE SOULAT */

.site-title {
    margin: 0 !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    letter-spacing: 0.08em !important;

    text-transform: uppercase !important;

    line-height: 0.92 !important;

    color: #b4b4b4 !important;

    text-shadow:
        1px 1px 0 rgba(255, 255, 255, 0.95),
        -1px -1px 0 rgba(0, 0, 0, 0.22),
        0 2px 2px rgba(255, 255, 255, 0.35);
}


/* VISUAL ARTIST AND ART DIRECTOR */

.site-status {
    margin: 4px 0 0 0 !important;

    font-size: 11px !important;

    letter-spacing: 0.03em !important;

    line-height: 1.1 !important;

    color: #b0b0b0 !important;

    text-shadow:
        1px 1px 0 rgba(255, 255, 255, 0.85),
        -1px -1px 0 rgba(0, 0, 0, 0.18);
}


/* NAVIGATION */

.mobile-nav {
    width: auto;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.mobile-nav > div {
    text-align: left !important;
}

.mobile-nav a {
    display: inline-block;

    padding: 4px 10px;

    white-space: nowrap;

    text-decoration: none;

    letter-spacing: 0.02em;
}

.mobile-nav .nav-index {
    background: rgb(216, 211, 211);

    color: rgb(17, 17, 17);
}

.mobile-nav .nav-info {
    background: rgb(109, 101, 104);

    color: rgb(233, 137, 185);
}


/* =========================================================
   07 — HOME / ARCHIVE
   ========================================================= */

/*
   IMPORTANT :

   .home-page est utilisée par ton archive.
   Elle se centre dans l'espace qui lui est donné.

   On ne modifie PAS ici le container Cargo global,
   donc les pages projets ne bougent pas.
*/

.home-page {
    width: 100%;
    max-width: none;

    margin: 0;

    padding: 0;

    box-sizing: border-box;
}


/* INDEX CENTRAL */

.home-page .home-index {
    width: min(900px, 72vw);
    max-width: 900px;

    margin-left: auto;
    margin-right: auto;

    padding: 0;

    display: grid;

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

    column-gap: 56px;

    align-items: start;

    box-sizing: border-box;

    position: static;

    transform: none;

    font-size: 11px;
    line-height: 1.15;
}


/* DOSSIERS */

.home-page .home-folder {
    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    background: transparent;

    box-sizing: border-box;
}


/* HEADERS EXHIBITIONS / COMMISSIONS */

.home-page .home-folder-header {
    width: 100%;

    display: flex;

    justify-content: space-between;
    align-items: baseline;

    box-sizing: border-box;

    margin: 0 0 7px 0;

    padding: 0 0 5px 0;

    background: transparent;

    border-bottom:
        1px solid rgba(0, 0, 0, 0.35);

    color: rgba(0, 0, 0, 0.72);

    font-size: 10px;
    line-height: 1;

    text-transform: uppercase;
}

.home-page .home-folder-header span:last-child {
    flex-shrink: 0;

    font-size: 7px;

    color: rgba(0, 0, 0, 0.28);
}


/* LISTES */

.home-page .home-folder-list {
    width: 100%;

    display: flex;
    flex-direction: column;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    background:
        rgba(197, 46, 117, 0.08);
}


/* LIGNES */

.home-page .home-folder-list > a {
    width: 100%;
    min-width: 0;

    display: grid;

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

    align-items: baseline;

    box-sizing: border-box;

    margin: 0;

    padding:
        3px
        5px
        3px
        0;

    background: transparent;

    color: rgb(197, 46, 117);

    font-size: 10px;
    line-height: 1.15;

    text-decoration: none;

    transform: none;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        padding-left 0.15s ease;

    animation-name: homeArchiveOrganic;

    animation-duration: 52s;

    animation-timing-function: ease-in-out;

    animation-iteration-count: infinite;
}

.home-page .home-folder-list > a > span:last-child {
    min-width: 0;
}


/* NUMÉROS */

.home-page .home-number {
    padding-left: 3px;

    font-size: 7px;

    color: rgba(0, 0, 0, 0.28);

    font-variant-numeric: tabular-nums;
}


/* HOVER */

.home-page .home-folder-list > a:hover {
    padding-left: 4px;

    background: rgb(197, 46, 117) !important;

    color: #000 !important;

    animation-play-state: paused;
}

.home-page .home-folder-list > a:hover .home-number {
    color: rgba(0, 0, 0, 0.55);
}

.home-page .home-folder-list > a:active {
    background: #000 !important;

    color: rgb(197, 46, 117) !important;
}


/* ANIMATION */

@keyframes homeArchiveOrganic {

    0%,
    100% {
        background-color: transparent;

        color: rgb(197, 46, 117);
    }

    22% {
        background-color:
            rgba(197, 46, 117, 0.08);

        color: rgb(197, 46, 117);
    }

    42% {
        background-color:
            rgba(197, 46, 117, 0.17);

        color: rgb(197, 46, 117);
    }

    55% {
        background-color:
            rgba(0, 0, 0, 0.72);

        color: #eee;
    }

    69% {
        background-color:
            rgba(197, 46, 117, 0.15);

        color: #111;
    }

    84% {
        background-color: transparent;

        color: rgb(197, 46, 117);
    }
}


/* PHASES */

.home-page .home-folder-list > a:nth-child(1) {
    animation-delay: -4s;
}

.home-page .home-folder-list > a:nth-child(2) {
    animation-delay: -31s;
}

.home-page .home-folder-list > a:nth-child(3) {
    animation-delay: -17s;
}

.home-page .home-folder-list > a:nth-child(4) {
    animation-delay: -43s;
}

.home-page .home-folder-list > a:nth-child(5) {
    animation-delay: -9s;
}

.home-page .home-folder-list > a:nth-child(6) {
    animation-delay: -37s;
}

.home-page .home-folder-list > a:nth-child(7) {
    animation-delay: -22s;
}

.home-page .home-folder-list > a:nth-child(8) {
    animation-delay: -49s;
}

.home-page .home-folder-list > a:nth-child(9) {
    animation-delay: -13s;
}

.home-page .home-folder-list > a:nth-child(10) {
    animation-delay: -34s;
}

.home-page .home-folder-list > a:nth-child(11) {
    animation-delay: -25s;
}

.home-page .home-folder-list > a:nth-child(12) {
    animation-delay: -46s;
}


/* =========================================================
   08 — FOOTER / BLINKIES
   ========================================================= */

.web-footer {
    width: min(1040px, 76vw);

    margin-left: auto;
    margin-right: auto;

    margin-top: 90px;

    display: grid;

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

    column-gap: 55px;

    align-items: end;

    box-sizing: border-box;
}


/* CONTACT */

.web-footer-links {
    width: 100%;

    align-self: end;

    text-align: left;
}

.web-footer-links a {
    color: rgb(197, 46, 117);

    text-decoration: none;
}


/* BLINKIES */

.blinkies-zone {
    width: 100%;
    min-width: 0;

    display: flex;

    justify-content: center;
    align-items: flex-end;

    box-sizing: border-box;
}

.blinkies-zone .image-gallery {
    width: 72% !important;

    max-width: 600px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

.blinkies-zone img {
    box-shadow: none !important;
}


/* =========================================================
   09 — MUSIC ARTWORK
   ========================================================= */

.music-archive {
    width: 100%;

    box-sizing: border-box;

    font-size: 12px;
    line-height: 1.2;
}

.music-header {
    display: flex;

    justify-content: space-between;
    align-items: baseline;

    width: 100%;

    margin: 0 0 100px 0;
    padding: 0 0 7px 0;

    border-bottom: 1px solid currentColor;
}

.music-header h1 {
    margin: 0;
    padding: 0;

    font: inherit;

    font-size: inherit;
    font-weight: normal;
}

.music-header > span {
    opacity: 0.45;
}

.label-section {
    width: 100%;

    margin: 0 0 140px 0;
}

.label-header {
    display: flex;

    justify-content: space-between;
    align-items: baseline;

    width: 100%;

    margin: 0 0 14px 0;
    padding: 0 0 6px 0;

    border-bottom: 1px solid currentColor;
}

.label-header h2 {
    margin: 0;
    padding: 0;

    font: inherit;

    font-size: inherit;
    font-weight: normal;
}

.label-header > span {
    opacity: 0.45;
}

.artwork-grid {
    display: grid;

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

    width: 100%;

    column-gap: 12px;
    row-gap: 60px;
}

.artwork {
    width: 100%;
    min-width: 0;
}

.artwork-image {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;
}

.artwork-image media-item {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.artwork-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;

    object-fit: cover !important;
    object-position: center center;
}

.info {
    display: flex;
    flex-direction: column;

    width: 100%;

    margin-top: 7px;

    font-size: inherit;
    line-height: 1.2;
}

.info span {
    display: block;
}

.info .title {
    text-transform: uppercase;
}

.info .type {
    opacity: 0.45;
}

.credits {
    margin-top: 8px;

    opacity: 0.45;
}


/* =========================================================
   10 — PROJECT PAGES
   ========================================================= */

.project-page {
    width: 100%;

    box-sizing: border-box;

    font-size: 12px;
    line-height: 1.3;
}

.project-header {
    width: 100%;

    display: flex;

    justify-content: space-between;
    align-items: baseline;

    box-sizing: border-box;

    padding-bottom: 7px;
    margin-bottom: 60px;

    border-bottom: 1px solid currentColor;
}

.project-title {
    text-transform: uppercase;
}

.project-type {
    opacity: 0.45;

    text-align: right;
}

.project-intro {
    width: 100%;

    display: grid;

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

    gap: 60px;

    margin-bottom: 100px;
}

.project-description {
    max-width: 600px;
}

.project-meta {
    display: flex;
    flex-direction: column;

    gap: 25px;

    opacity: 0.5;
}

.project-meta-group {
    display: flex;
    flex-direction: column;
}

.meta-label {
    display: block;

    margin-bottom: 5px;

    text-transform: uppercase;

    opacity: 0.6;
}

.project-hero {
    width: 100%;

    margin-bottom: 140px;
}

.project-hero .image-gallery {
    width: 100%;
}

.project-page img {
    display: block;

    max-width: 100%;

    height: auto;
}

.project-page media-item {
    max-width: 100%;
}

.project-full {
    width: 100%;

    margin-bottom: 140px;
}

.project-duo {
    display: grid;

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

    gap: 12px;

    width: 100%;

    margin-bottom: 180px;
}

.project-duo-item {
    width: 100%;
    min-width: 0;
}

.project-duo-item img {
    width: 100%;

    height: auto;
}

.project-centered {
    display: flex;

    justify-content: center;

    width: 100%;

    margin-bottom: 180px;
}

.project-centered-image {
    width: 55%;
}

.project-asymmetric {
    display: grid;

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

    align-items: start;

    gap: 12px;

    width: 100%;

    margin-bottom: 180px;
}

.project-caption {
    margin-top: 8px;

    font-size: 11px;
    line-height: 1.25;

    opacity: 0.5;
}


/* =========================================================
   11 — FILM / VIDEO
   ========================================================= */

.film-video {
    position: relative;

    width: 100% !important;

    aspect-ratio: 16 / 9;

    margin: 0 0 120px 0 !important;

    padding: 0 !important;

    overflow: hidden;

    background: #000;
}

.film-video iframe {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}


/* =========================================================
   12 — TABLET
   ========================================================= */

@media screen and (max-width: 1000px) {

    .home-page .home-index {
        width: 78vw;

        max-width: 78vw;

        column-gap: 40px;
    }

    .web-footer {
        width: 82vw;
    }
}


@media screen and (max-width: 900px) {

    .music-header {
        margin-bottom: 75px;
    }

    .label-section {
        margin-bottom: 100px;
    }

    .artwork-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 10px;
        row-gap: 45px;
    }
}


/* =========================================================
   13 — MOBILE
   ========================================================= */

@media screen and (max-width: 700px) {

    /* CURSOR */

    #cursor {
        display: none;
    }

    body,
    body * {
        cursor: auto !important;
    }


    /* HEADER */

    .site-header {
        width: 100%;

        display: flex;
        flex-direction: column;

        align-items: flex-start;
        justify-content: flex-start;

        gap: 10px;

        margin: 0;
    }

    .identity-block {
        width: fit-content;

        margin: 0;

        padding: 12px 18px;
    }

    .mobile-nav {
        width: auto;

        justify-content: flex-start;

        gap: 8px;

        margin: 0;
        padding: 0;
    }

    .site-title {
        font-size: 12px !important;
    }

    .site-status {
        font-size: 10px !important;
    }


    /* HOME */

    .home-page {
        width: 100%;
    }

    .home-page .home-index {
        width: 100%;
        max-width: 100%;

        display: block;

        margin-left: auto;
        margin-right: auto;

        font-size: 10px;
        line-height: 1.2;
    }

    .home-page .home-folder + .home-folder {
        margin-top: 45px;
    }

    .home-page .home-folder-header {
        margin-bottom: 7px;

        font-size: 9px;
    }

    .home-page .home-folder-header span:last-child {
        font-size: 7px;
    }

    .home-page .home-folder-list > a {
        grid-template-columns:
            27px
            minmax(0, 1fr);

        padding:
            4px
            4px
            4px
            0;

        font-size: 10px;
    }

    .home-page .home-number {
        padding-left: 2px;

        font-size: 7px;
    }


    /* FOOTER */

    .web-footer {
        display: block;

        width: 100%;

        margin-left: 0;
        margin-right: 0;

        margin-top: 70px;
    }

    .web-footer-links {
        margin-bottom: 45px;
    }

    .blinkies-zone {
        display: block;

        width: 100%;
    }

    .blinkies-zone .image-gallery {
        width: 85% !important;

        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* PROJECT */

    .project-page {
        font-size: 11px;
    }

    .project-header {
        margin-bottom: 40px;
    }

    .project-intro {
        display: block;

        margin-bottom: 70px;
    }

    .project-description {
        max-width: 100%;
    }

    .project-meta {
        margin-top: 30px;
    }

    .project-hero,
    .project-full {
        margin-bottom: 80px;
    }

    .project-duo {
        grid-template-columns: 1fr;

        gap: 8px;

        margin-bottom: 100px;
    }

    .project-centered {
        margin-bottom: 100px;
    }

    .project-centered-image {
        width: 75%;
    }

    .project-asymmetric {
        grid-template-columns: 1fr;

        gap: 8px;

        margin-bottom: 100px;
    }


    /* VIDEO */

    .film-video {
        width: 100% !important;

        aspect-ratio: 16 / 9;

        margin-bottom: 70px !important;
    }

    .film-video iframe {
        width: 100% !important;
        height: 100% !important;
    }
}


/* =========================================================
   14 — SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 600px) {

    .music-archive {
        font-size: 11px;
    }

    .music-header {
        margin-bottom: 60px;
    }

    .label-section {
        margin-bottom: 80px;
    }

    .label-header {
        margin-bottom: 8px;
    }

    .artwork-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 6px;
        row-gap: 35px;
    }

    .info {
        margin-top: 5px;
    }
}



/* =========================================================



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

@media screen and (max-width: 700px) {

    .archive-card {
        top: 20px;
        left: -45px;

        width: 220px;
        height: 190px;
    }

}

/* =========================================================
   PETIT DOSSIER ARCHIVE
   ========================================================= */

.archive-card {
    position: fixed;

    top: 90px;
    left: 18px;

    width: 155px;
    height: 190px;

    overflow: hidden;

    z-index: 5;

    background: #c8babb;

    pointer-events: none;
}


/* GALERIE CARGO */

.archive-card .image-gallery {
    position: absolute;

    inset: 0;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* IMAGES */

.archive-card .image-gallery img {
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover !important;
    object-position: center top;

    display: block !important;
}


/* =========================================================
   FILTRE ROSE / GRIS
   ========================================================= */

.archive-pattern {
    position: absolute;

    inset: 0;

    z-index: 2;

    background-color: rgba(205, 188, 190, .55);

    background-image:
        linear-gradient(
            45deg,
            transparent 46%,
            rgba(70,60,65,.22) 48%,
            rgba(70,60,65,.22) 52%,
            transparent 54%
        ),
        linear-gradient(
            -45deg,
            transparent 46%,
            rgba(70,60,65,.22) 48%,
            rgba(70,60,65,.22) 52%,
            transparent 54%
        );

    background-size: 9px 9px;

    mix-blend-mode: multiply;

    pointer-events: none;
}


/* =========================================================
   NUMÉRO
   ========================================================= */

.archive-number {
    position: absolute;

    right: 5px;
    bottom: 6px;

    z-index: 3;

    font-size: 7px;

    color: rgba(30,30,30,.5);

    writing-mode: vertical-rl;
}