@import url("https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@300;400;500;600&display=swap");

.isia-dynamic-section {
    --noir: #050505;
    --charbon: #111113;
    --encre: #1c1c20;
    --papier: #f4f1ea;
    --gris: #a7a7a7;
    --gris-fonce: #6b6b70;
    --carmin: #b11226;
    --carmin-vif: #d11a30;
    --or: #c8a45d;
    --hairline: rgba(244, 241, 234, .10);
    --hairline-soft: rgba(244, 241, 234, .06);
    --hairline-strong: rgba(244, 241, 234, .18);
    --font-display: "Anton", "Oswald", "Arial Narrow", sans-serif;
    --font-body: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
    --container: 1280px;
    --gutter: clamp(20px, 5vw, 64px);
    --section: clamp(72px, 11vw, 152px);
    --ease: cubic-bezier(.22, .61, .36, 1);

    position: relative;
    width: 100%;
    padding-block: var(--section);

    color: var(--papier);
    background: var(--noir);

    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: .01em;

    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

.isia-dynamic-section,
.isia-dynamic-section *,
.isia-dynamic-section *::before,
.isia-dynamic-section *::after {
    box-sizing: border-box;
}

.isia-dynamic-section img {
    display: block;
    max-width: 100%;
}

.isia-dynamic-section a {
    color: inherit;
    text-decoration: none;
}

.isia-dynamic-section button {
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.isia-dynamic-section [hidden] {
    display: none !important;
}

.isia-dynamic-section .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.isia-dynamic-section .seam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--hairline) 12%, var(--hairline) 88%, transparent);
    transform: translateX(-50%);
    pointer-events: none;
}

.isia-dynamic-section h2,
.isia-dynamic-section h3 {
    margin: 0;
    color: var(--papier);
    font-family: var(--font-display);
    font-weight: 400;
    line-height: .92;
    letter-spacing: .005em;
    text-transform: uppercase;
}

.isia-dynamic-section h2 {
    font-size: clamp(34px, 5vw, 68px);
}

.isia-dynamic-section h3 {
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1;
}

.isia-dynamic-section p {
    margin: 0;
    color: var(--gris);
}

.isia-dynamic-section .eyebrow {
    color: var(--gris);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .32em;
    text-transform: uppercase;
}

.isia-dynamic-section .meta {
    color: var(--gris-fonce);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.isia-dynamic-section .shead {
    margin-bottom: clamp(36px, 5vw, 64px);
}

.isia-dynamic-section .shead .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.isia-dynamic-section .shead h2 {
    max-width: 16ch;
}

.isia-dynamic-section .shead .shead__note {
    max-width: 46ch;
    margin-top: 18px;
    color: var(--gris);
    font-size: 15px;
}

.isia-dynamic-section .shead--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

.isia-dynamic-section .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding-inline: 30px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .14em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    transition:
        background .35s var(--ease),
        color .35s var(--ease),
        border-color .35s var(--ease),
        transform .35s var(--ease);
}

.isia-dynamic-section .btn--primary {
    color: var(--noir);
    background: var(--papier);
}

.isia-dynamic-section .btn--primary:hover {
    color: var(--papier);
    background: var(--carmin);
    transform: translateY(-2px);
}

.isia-dynamic-section .btn--carmin {
    color: var(--papier);
    background: var(--carmin);
}

.isia-dynamic-section .btn--carmin:hover {
    background: var(--carmin-vif);
    transform: translateY(-2px);
}

.isia-dynamic-section .btn--ghost {
    color: var(--papier);
    border: 1px solid var(--hairline-strong);
}

.isia-dynamic-section .btn--ghost:hover {
    color: var(--noir);
    background: var(--papier);
    border-color: var(--papier);
    transform: translateY(-2px);
}

.isia-dynamic-section .tlink {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    color: var(--papier);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.isia-dynamic-section .tlink::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease);
}

.isia-dynamic-section .tlink:hover {
    color: var(--carmin-vif);
}

.isia-dynamic-section .tlink:hover::after {
    transform: scaleX(1);
}

.isia-dynamic-section .badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    color: var(--gris);
    background: rgba(244, 241, 234, .02);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.isia-dynamic-section .badge--carmin {
    color: var(--carmin-vif);
    border-color: rgba(177, 18, 38, .4);
}

.isia-dynamic-section .ph {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        repeating-linear-gradient(135deg, rgba(244, 241, 234, .025) 0 2px, transparent 2px 9px),
        linear-gradient(160deg, var(--encre), var(--charbon));
}

.isia-dynamic-section .ph::before {
    content: attr(data-label);
    max-width: 80%;
    padding: 6px 12px;
    color: var(--gris-fonce);
    border: 1px dashed var(--hairline);
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .22em;
    text-align: center;
    text-transform: uppercase;
}

.isia-dynamic-section .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(28px, 4vw, 42px);
}

.isia-dynamic-section .filter {
    min-height: 42px;
    padding: 9px 16px;
    color: var(--gris);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: all .3s var(--ease);
}

.isia-dynamic-section .filter:hover {
    color: var(--papier);
    border-color: var(--hairline-strong);
}

.isia-dynamic-section .filter.is-active {
    color: var(--noir);
    background: var(--papier);
    border-color: var(--papier);
}

.isia-dynamic-section .masonry {
    columns: 3;
    column-gap: 16px;
}

.isia-dynamic-section .tile {
    position: relative;
    margin-bottom: 16px;
    overflow: hidden;
    background: var(--charbon);
    break-inside: avoid;
    cursor: pointer;
}

.isia-dynamic-section .tile .ph,
.isia-dynamic-section .tile .media {
    display: block;
    width: 100%;
}

.isia-dynamic-section .tile .media {
    overflow: hidden;
}

.isia-dynamic-section .tile .media img {
    display: block;
    width: 100%;
    filter: grayscale(1) contrast(1.05);
    transition: transform 1.1s var(--ease), filter .6s var(--ease);
}

.isia-dynamic-section .tile:hover .media img {
    filter: grayscale(0) contrast(1.02);
    transform: scale(1.05);
}

.isia-dynamic-section .tile__ov {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    background: linear-gradient(to top, rgba(5, 5, 5, .92) 0%, rgba(5, 5, 5, .2) 55%, transparent 100%);
    opacity: 0;
    transition: opacity .4s var(--ease);
}

.isia-dynamic-section .tile:hover .tile__ov,
.isia-dynamic-section .tile:focus-within .tile__ov {
    opacity: 1;
}

.isia-dynamic-section .tile__ov .cat {
    margin-bottom: 8px;
    color: var(--carmin-vif);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.isia-dynamic-section .tile__ov h4 {
    margin: 0;
    color: var(--papier);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.isia-dynamic-section .tile__ov .tech {
    margin-top: 8px;
    color: var(--gris);
    font-size: 12px;
}

.isia-dynamic-section .tile__ov .see {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    color: var(--papier);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.isia-dynamic-section .tile .ratio-2 { aspect-ratio: 4 / 5; }
.isia-dynamic-section .tile .ratio-3 { aspect-ratio: 1 / 1; }
.isia-dynamic-section .tile .ratio-4 { aspect-ratio: 3 / 4; }
.isia-dynamic-section .tile .ratio-5 { aspect-ratio: 5 / 6; }

.isia-dynamic-section .books {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 48px);
}

.isia-dynamic-section .book {
    display: grid;
    grid-template-columns: 165px 1fr;
    gap: 28px;
    padding: 30px;
    background: var(--charbon);
    border: 1px solid var(--hairline);
    transition: border-color .4s var(--ease), transform .5s var(--ease);
}

.isia-dynamic-section .book:hover {
    border-color: var(--hairline-strong);
    transform: translateY(-3px);
}

.isia-dynamic-section .book__cover {
    position: relative;
    aspect-ratio: 2 / 3;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
}

.isia-dynamic-section .book__cover .ph,
.isia-dynamic-section .book__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.isia-dynamic-section .book__cover::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 9px;
    background: linear-gradient(to right, rgba(0, 0, 0, .4), transparent);
}

.isia-dynamic-section .book__body .badge {
    margin-bottom: 14px;
}

.isia-dynamic-section .book__body h3 {
    margin-bottom: 6px;
}

.isia-dynamic-section .book__role {
    margin-bottom: 14px;
    color: var(--or);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.isia-dynamic-section .book__body p {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.55;
}

.isia-dynamic-section .book__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.isia-dynamic-section .news {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 32px);
}

.isia-dynamic-section .art {
    display: flex;
    flex-direction: column;
}

.isia-dynamic-section .art__media {
    position: relative;
    aspect-ratio: 4 / 3;
    margin-bottom: 20px;
    overflow: hidden;
}

.isia-dynamic-section .art__media img,
.isia-dynamic-section .art__media .ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
    transition: transform 1s var(--ease), filter .6s var(--ease);
}

.isia-dynamic-section .art:hover .art__media img {
    filter: grayscale(0);
    transform: scale(1.05);
}

.isia-dynamic-section .art__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.isia-dynamic-section .art__meta .date {
    color: var(--gris-fonce);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.isia-dynamic-section .art h3 {
    margin-bottom: 12px;
    font-size: clamp(20px, 1.8vw, 25px);
    line-height: 1.02;
}

.isia-dynamic-section .art p {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.55;
}

.isia-dynamic-section .art .tlink {
    margin-top: auto;
}

.isia-dynamic-section .events {
    border-top: 1px solid var(--hairline);
}

.isia-dynamic-section .event {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 26px 0;
    border-bottom: 1px solid var(--hairline);
    transition: background .4s var(--ease);
}

.isia-dynamic-section .event:hover {
    background: linear-gradient(to right, var(--charbon), transparent);
}

.isia-dynamic-section .event__date .d {
    color: var(--papier);
    font-family: var(--font-display);
    font-size: 38px;
    line-height: .85;
}

.isia-dynamic-section .event__date .m {
    margin-top: 6px;
    color: var(--carmin-vif);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.isia-dynamic-section .event__main h4 {
    margin: 0 0 10px;
    color: var(--papier);
    font-family: var(--font-display);
    font-size: clamp(19px, 1.7vw, 24px);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.isia-dynamic-section .event__main .where {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    color: var(--gris);
    font-size: 12.5px;
}

.isia-dynamic-section .event__main .where .badge {
    padding: 4px 10px;
}

.isia-dynamic-section .event__act {
    display: flex;
    align-items: center;
    gap: 10px;
}

.isia-dynamic-section .events--past .event {
    opacity: .5;
}

.isia-dynamic-section .events--past .event__date .d {
    font-size: 30px;
}

.isia-dynamic-section .timeline__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.isia-dynamic-section .video-main {
    position: relative;
    aspect-ratio: 21 / 9;
    margin-bottom: 16px;
    overflow: hidden;
    cursor: pointer;
}

.isia-dynamic-section .video-main > img,
.isia-dynamic-section .video-main > .ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(.4) contrast(1.05) brightness(.7);
    transition: transform 1.2s var(--ease), filter .6s var(--ease);
}

.isia-dynamic-section .video-main:hover > img {
    filter: grayscale(0) brightness(.78);
    transform: scale(1.04);
}

.isia-dynamic-section .play {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    background: rgba(5, 5, 5, .3);
    border: 1px solid rgba(244, 241, 234, .5);
    border-radius: 50%;
    backdrop-filter: blur(4px);
    transition: all .4s var(--ease);
}

.isia-dynamic-section .play svg {
    width: 26px;
    height: 26px;
    margin-left: 4px;
    fill: var(--papier);
}

.isia-dynamic-section .video-main:hover .play,
.isia-dynamic-section .vid:hover .play {
    background: var(--carmin);
    border-color: var(--carmin);
}

.isia-dynamic-section .video-main__ov {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    text-align: center;
}

.isia-dynamic-section .video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.isia-dynamic-section .vid {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    cursor: pointer;
}

.isia-dynamic-section .vid > img,
.isia-dynamic-section .vid > .ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05) brightness(.7);
    transition: transform 1s var(--ease);
}

.isia-dynamic-section .vid:hover > img {
    transform: scale(1.05);
}

.isia-dynamic-section .vid .play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 52px;
    transform: translate(-50%, -50%);
}

.isia-dynamic-section .vid:hover .play {
    transform: translate(-50%, -50%) scale(1.08);
}

.isia-dynamic-section .vid__cap {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 16px;
    background: linear-gradient(to top, rgba(5, 5, 5, .9), transparent);
}

.isia-dynamic-section .vid__cap .t {
    color: var(--papier);
    font-size: 13px;
    font-weight: 500;
}

.isia-dynamic-section .vid__cap .dur {
    color: var(--gris);
    font-size: 11px;
    letter-spacing: .1em;
}

.isia-dynamic-section .shop {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 2vw, 22px);
}

.isia-dynamic-section .product {
    display: flex;
    flex-direction: column;
}

.isia-dynamic-section .product__media {
    position: relative;
    aspect-ratio: 4 / 5;
    margin-bottom: 16px;
    overflow: hidden;
    background: var(--charbon);
}

.isia-dynamic-section .product__media img,
.isia-dynamic-section .product__media .ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease);
}

.isia-dynamic-section .product:hover .product__media img {
    transform: scale(1.04);
}

.isia-dynamic-section .product__add {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    color: var(--noir);
    background: var(--papier);
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .14em;
    text-align: center;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    transition: all .4s var(--ease);
}

.isia-dynamic-section .product:hover .product__add,
.isia-dynamic-section .product:focus-within .product__add {
    opacity: 1;
    transform: none;
}

.isia-dynamic-section .product__add:hover {
    color: var(--papier);
    background: var(--carmin);
}

.isia-dynamic-section .product__cat {
    margin-bottom: 7px;
    color: var(--gris-fonce);
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.isia-dynamic-section .product h4 {
    margin: 0;
    color: var(--papier);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
}

.isia-dynamic-section .product__price {
    margin-top: 8px;
    color: var(--gris);
    font-size: 14px;
}

.isia-dynamic-section .product__price .now {
    color: var(--papier);
}

.isia-dynamic-section :focus-visible {
    outline: 2px solid var(--papier);
    outline-offset: 3px;
}

@media (max-width: 1080px) {
    .isia-dynamic-section .masonry {
        columns: 2;
    }

    .isia-dynamic-section .news,
    .isia-dynamic-section .video-grid {
        grid-template-columns: 1fr 1fr;
    }

    .isia-dynamic-section .shop {
        grid-template-columns: repeat(2, 1fr);
    }

    .isia-dynamic-section .books {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .isia-dynamic-section .masonry {
        columns: 1;
    }

    .isia-dynamic-section .news,
    .isia-dynamic-section .shop,
    .isia-dynamic-section .video-grid {
        grid-template-columns: 1fr;
    }

    .isia-dynamic-section .book {
        grid-template-columns: 110px 1fr;
        gap: 18px;
        padding: 18px;
    }

    .isia-dynamic-section .event {
        grid-template-columns: 84px 1fr;
    }

    .isia-dynamic-section .event__act {
        grid-column: 2;
        justify-content: flex-start;
    }

    .isia-dynamic-section .product__add {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .isia-dynamic-section *,
    .isia-dynamic-section *::before,
    .isia-dynamic-section *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}