:root {
  --color-primary: #0D2342;
  --color-secondary: #F0C2B5;
  --color-tertiary: #FFED9E;
  --color-quaternary: #D9F5A8;
  --color-quinary: #E38A73;
  --color-gray-350: #d0d0d0;
  --color-gray-100: #f6f6f6;
  --img-width-md: 240px;
  --img-width-lg: 300px;
  --img-width-xl: 395px;
  --img-width-xxl: 32%;
}

@media screen and (min-width: 992px) {
    .frame-type-tctheme_miseenavant3pages .container {
        max-width: 100%;
        width: 100%;
    }
}

@media screen and (min-width: 1920px) {
    .frame-type-tctheme_miseenavant3pages .container {
        max-width: 1780px;
    }
}

.highlighted-pages {
    position: relative;
    display: block;
}

@media screen and (min-width: 1200px) {
    .highlighted-pages {
        padding-left: var(--img-width-lg);
    }
}
@media screen and (min-width: 1440px) {
    .highlighted-pages {
        padding-left: var(--img-width-xl);
    }
}
@media screen and (min-width: 1680px) {
    .highlighted-pages {
        padding-left: var(--img-width-xxl);
    }
}

.highlighted-pages__image {
    display: none;
}

@media screen and (min-width: 1024px) {
    .highlighted-pages__image {
        display: flex;
        position: absolute;
        left: 0;
        top: 0;

        width: var(--img-width-md);
        height: calc(100% - 250px);

        overflow: hidden;
    }
}

@media screen and (min-width: 1200px) {
    .highlighted-pages__image {
        width: var(--img-width-lg);
        height: 100%;
    }
}
@media screen and (min-width: 1440px) {
    .highlighted-pages__image {
        width: var(--img-width-xl);
    }
}
@media screen and (min-width: 1680px) {
    .highlighted-pages__image {
        width: var(--img-width-xxl);
    }
}

.highlighted-pages__image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0;
}

@media screen and (min-width: 1024px) {
    .highlighted-pages__text-wrapper {
        padding-left: var(--img-width-md);
    }
}

@media screen and (min-width: 1200px) {
    .highlighted-pages__text-wrapper {
        padding-left: 0;
    }
}

@media screen and (min-width: 1024px) {
    .highlighted-pages__text {
        margin: 0 auto;

        width: 90%;
        max-width: 530px;
    }
}

@media screen and (min-width: 1200px) {
    .highlighted-pages__text {
        padding: 70px 0 52px 0;
    }
}

@media screen and (min-width: 1440px) {
    .highlighted-pages__text {
        padding: 100px 0 82px 0;
    }
}

.highlighted-pages__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.highlighted-text-content {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

.highlighted-vignettes {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.highlighted-pages__cards {
    display: block;
}

@media screen and (min-width: 686px) {
    .highlighted-pages__cards {
        display: flex;
    }
}

.vignette {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;

    max-width: 224px;
    padding: 30px;
    box-sizing: border-box;

    text-decoration: none;
    
    gap: 0.5rem;

    aspect-ratio: 27/33;

    overflow: hidden;
}

@media screen and (min-width: 686px) {
    .vignette {
        flex: 1 0 33%;

        max-width: 33%;
    }
}

@media screen and (min-width: 1680px) {
    .vignette {
        aspect-ratio: 27/27;
    }
}

@media screen and (min-width: 1920px) {
    .vignette {
        aspect-ratio: 27/22;
    }
}

.vignette:hover .vignette__overlay {
    transform: rotate(-30deg);

    transition: transform 500ms ease-out;
}

.vignette:hover svg {
    bottom: 20px;

    transition: bottom 500ms ease-in;
}

.vignette__overlay {
    position: absolute;
    top: -28%;
    left: -28%;
    z-index: 0;

    width: 156%;
    height: 156%;

    transform: rotate(0deg);
    transform-origin: center;

    transition: transform 500ms ease-out;
}

.vignette__overlay::before {
    background-size: 325% auto;
}

.vignette svg {
    position: absolute;
    bottom: -42px;
    right: 20px;

    transition: bottom 500ms ease-in;
}

.vignette__title,
.vignette__badge {
    position: relative;
}

.vignette__badge {
    font-size: 1.6rem;

    padding: 6px 10px;
}

.vignette__title {
    font-size: 3rem;
    font-weight: 600;
    font-stretch: 63%;
    text-transform: uppercase;

    color: var(--color-primary);

    margin-top: 16px;
}

/* couleurs personnalisées par index */
.vignette-1 {
    background-color: var(--color-tertiary);
}
.vignette-2 { 
    background-color: var(--color-quaternary);
}
.vignette-3 {
    background-color: var(--color-gray-350);
}

/* Vignettes - Carrousel en verison mobile */
@media screen and (max-width: 1023px) {
    .frame-type-tctheme_miseenavant3pages {
        overflow: hidden;
    }
    .highlighted-pages__cards.slick-initialized {
        display: block;
        margin: 0 -3px;
    }
    .highlighted-pages__cards.slick-initialized::before {
        content: "";
        position: absolute;
        top: 0;
        right: 100%;
        z-index: 1;

        width: 50vw;
        height: 100%;

        background-color: #fff;
    }
    .highlighted-pages__cards.slick-initialized .slick-slide {
        max-width: 300px;
    }
    .highlighted-pages__cards.slick-initialized .slick-slide > div {
        margin: 0 3px;
        padding: 0 3px;
    }
    .highlighted-pages__cards.slick-initialized .vignette {
        max-width: 100%;
        width: 100%;
    }
    .highlighted-pages__cards .slick-list {
        overflow: visible;
    }
}

@media screen and (max-width: 575px) {
    .highlighted-pages__cards.slick-initialized .slick-slide {
        max-width: 224px;
    }
}