:root {
  --color-primary: #0D2342;
  --color-tertiary: #FFED9E;
  --color-quaternary: #D9F5A8;
  --color-quinary: #E38A73;
  --color-gray-100: #f6f6f6;
  --color-gray-350: #d0d0d0;
}

.frame-type-tctheme_carouselhome .frame-container {
    width: 100%;
    max-width: 100%;
}

.frame-type-tctheme_carouselhome header {
    padding-left: 20px;
}

@media screen and (min-width: 768px) {
    .frame-type-tctheme_carouselhome header {
        padding-left: 32px;
    }
}

@media screen and (min-width: 1440px) {
    .frame-type-tctheme_carouselhome header {
        padding-left: 72px;
    }
}

.carousel-home .carousel__slide-text {
    position: relative;
    z-index: 2;
}

.carousel-home .carousel__slide-image {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;

    background-color: #000;
}

.carousel-home .carousel__slide-overlay {
    position: absolute;
    right: 0;
    top: -87px;
    z-index: 0;

    height: calc(100% + 66px);
    width: 100%;

    background-color: rgba(255,25,255,0);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.carousel-home .carousel__slide--0 .carousel__slide-overlay,
.carousel-home .carousel__slide--3 .carousel__slide-overlay {
    background-image: url("carrousel-text-quaternary_mobile.svg");
}
.carousel-home .carousel__slide--1 .carousel__slide-overlay,
.carousel-home .carousel__slide--4 .carousel__slide-overlay {
    background-image: url("carrousel-text-tertiary_mobile.svg");
}
.carousel-home .carousel__slide--2 .carousel__slide-overlay,
.carousel-home .carousel__slide--5 .carousel__slide-overlay {
    background-image: url("carrousel-text-quinary_mobile.svg");
}

@media screen and (min-width: 550px) {
    .carousel-home .carousel__slide-overlay {
        top: -110px;

        height: calc(100% + 110px);
    }
}

@media screen and (min-width: 992px) {
    .carousel-home .carousel__slide-overlay {
        top: 0;

        height: 100%;
        width: calc(100% + 100px);

        background-position: left center;
        background-size: auto 101%;
    }
}

.carousel-home .carousel__slide-title,
.carousel-home .carousel__slide-desc {
    position: relative;
    z-index: 1;
}

.carousel-home .carousel__slide-desc h2 {
    position: relative;
    padding-bottom: 20px;
}

.carousel-home .carousel__slide-desc h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;

    width: 30px;
    height: 1px;

    background-color: var(--color-primary);
}

@media screen and (min-width: 550px) {
    .carousel-home .carousel__slide-desc {
        max-width: 510px;
    }
}

@media screen and (min-width: 992px) {
    .carousel-home .carousel__slide-desc {
        max-width: 430px;
    }
}

.carousel-home .slick-slide {
    height: auto;
}

.carousel-home .slick-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
}

@media screen and (min-width: 992px) {
    .carousel-home .slick-track {
        height: 520px;
    }
}

@media screen and (min-width: 1200px) {
    .carousel-home .slick-track {
        height: 680px;
    }
}

.carousel-home.slick-slider .slick-next,
.carousel-home.slick-slider .slick-prev {
    top: calc(100% + 36px);

    background-color: var(--color-primary);
}

.carousel-home.slick-slider  .slick-next {
    right: calc(50% - 50px);
}

.carousel-home.slick-slider .slick-prev {
    left: calc(50% - 50px);
}

.carousel-home .slick-dots {
    bottom: 22px;
    left: 0;

    width: 100%;

    text-align: center;
}

.carousel-home .slick-dots li button:focus .slick-dot-icon {
    outline: 2px dotted #fff;
}

.carousel-home .slick-dots .slick-dot-icon {
    transition: box-shadow 150ms ease-in;
}

.carousel-home .slick-dots li button:hover .slick-dot-icon {
    box-shadow: 0 0 0 2px #ddd;

    transition: box-shadow 150ms ease-in;
}

.carousel-home .slick-dots li button .slick-dot-icon {
    box-shadow: 0 0 4px 1px rgba(0,0,0,0.15);
}

.carousel-home .slick-dots  li.slick-active button .slick-dot-icon {
    background-color: var(--color-quaternary);
}

@media screen and (min-width: 992px) {
    .carousel-home.slick-slider .slick-next,
    .carousel-home.slick-slider .slick-prev {
        top: -40px;
    }
    .carousel-home.slick-slider .slick-next {
        right: 32px;

        transition: box-shadow 100ms ease-in;
    }
    .carousel-home.slick-slider .slick-prev {
        left: unset;
        right: 92px;

        transition: right 100ms ease-in;
    }
    .carousel-home.slick-slider .slick-prev:hover,
    .carousel-home.slick-slider .slick-next:hover {
        box-shadow: 0 0 0 2px var(--color-primary);

        transition: box-shadow 100ms ease-in;
    }
    .carousel-home .slick-dots {
        top: 20px;
        bottom: unset;
        left: unset;
        right: 24px;

        text-align: right;

        width: 50%;
    }
}

.carousel-home  .carousel__slide-inner {
    display: flex;
    flex-direction: column;
    gap: 0;

    height: 100%;

    overflow: hidden;
}

@media screen and (min-width: 992px) {
    .carousel-home  .carousel__slide-inner--image-left {
        flex-direction: row;
    }
    .carousel-home  .carousel__slide-inner--image-right {
        flex-direction: row-reverse;
    }
}

.carousel-home  .carousel__slide-col {
    flex: 0 0 100%;
    box-sizing: border-box;
}

@media screen and (min-width: 992px) {
    .carousel-home .carousel__slide-col--50 {
        width: 50%;
        flex: 0 0 50%;
    }
    .carousel-home .carousel__slide-col--70 {
        width: 62%;
        flex: 0 0 62%;
    }
    .carousel-home .carousel__slide-col--30 {
        width: 38%;
        flex: 0 0 38%;
    }
    .carousel-home .carousel__slide-col--50.carousel__slide-image {
        position: absolute;
        left: 0;
        top: 0;
        width: calc(50% + 300px);
    }
    .carousel-home .carousel__slide-col--50.carousel__slide-text {
        /* position: absolute;
        right: 0; */
        position: relative;

        width: 50%;
        flex: 50%;

        margin-left: 50%;
    }
    /* .carousel-home .carousel__slide-inner.carousel__slide-inner--image-left {
        padding-left: 50%;
    }
    .carousel-home .carousel__slide-inner.carousel__slide-inner--image-right {
        padding-right: 50%;
    } */
}

@media screen and (min-width: 1440px) {
    .carousel-home  .carousel__slide-col--70 {
        width: 67%;
        flex: 0 0 67%;
    }
    .carousel-home  .carousel__slide-col--30 {
        width: 33%;
        flex: 0 0 33%;
    }
}

.carousel-home  .carousel__slide-image,
.carousel-home  .carousel__slide-text {
    display: block;

    box-sizing: border-box;
}

.carousel-home  .carousel__slide-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: 335/224;

    overflow: hidden;
}

.carousel-home  .carousel__slide-image img {
    position: absolute;
    top: 50%;
    left: 50%;

    object-fit: cover;

    min-height: 100%;
    min-width: 100%;

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

.carousel-home  .carousel__slide-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    min-height: 270px;

    background-color: rgba(0,0,0,0);
    color: var(--color-primary);

    padding: 26px 20px 80px 20px;
}

@media screen and (min-width: 550px) {
    .carousel-home  .carousel__slide-text {
        padding: 50px 48px 66px 48px;
    }
}

@media screen and (min-width: 760px) {
    .carousel-home  .carousel__slide-text {
        padding: 50px 80px 82px 80px;
    }
}

@media screen and (min-width: 992px) {
    .carousel-home  .carousel__slide-image {
        /* min-height: 440px; */
        /* height: 440px; */
        aspect-ratio: auto;
    }
    .carousel-home  .carousel__slide-image img {
        position: static;
        transform: none;
    }
    .carousel-home  .carousel__slide-text {
        height: 520px;
        padding: 46px 36px 32px 36px;
    }
}

@media screen and (min-width: 1200px) {
    .carousel-home  .carousel__slide-text {
        height: 680px;
    }
}

@media screen and (min-width: 1440px) {
    .carousel-home  .carousel__slide-text {
        padding: 46px 46px 36px 46px;
    }
}

.carousel__slide-link {
    position: absolute;
    z-index: 2;

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

    bottom: 28px;
    right: 28px;

    width: 40px;
    height: 40px;

    border: 2px solid var(--color-primary);
    border-radius: 32px;

    box-shadow: 0 0 0 2px rgba(0,0,0,0);

    transition: box-shadow 200ms ease-in;
}

.carousel__slide-link:hover {
    box-shadow: 0 0 0 2px var(--color-primary);

    transition: box-shadow 200ms ease-in;
}

@media screen and (min-width: 1200px) {
    .carousel__slide-link {
        bottom: 62px;
        right: 62px;

        width: 50px;
        height: 50px;
    }
}

/* Variation avec fond de couleur */
@media screen and (min-width: 992px) {
    .carousel-home .carousel__slide--0 .carousel__slide-overlay,
    .carousel-home .carousel__slide--3 .carousel__slide-overlay {
        background-image: url("carrousel-text-quaternary.svg");
        background-position: left center;
        background-size: auto 100%;
    }
    .carousel-home .carousel__slide--1 .carousel__slide-overlay,
    .carousel-home .carousel__slide--4 .carousel__slide-overlay {
        background-image: url("carrousel-text-tertiary.svg");
        background-position: left center;
        background-size: auto 100%;
    }
    .carousel-home .carousel__slide--2 .carousel__slide-overlay,
    .carousel-home .carousel__slide--5 .carousel__slide-overlay {
        background-image: url("carrousel-text-quinary.svg");
        background-position: left center;
        background-size: auto 100%;
    }
}