:root {
  --color-primary: #0D2342;
  --color-secondary: #F0C2B5;
  --color-tertiary: #FFED9E;
  --color-quaternary: #D9F5A8;
  --color-quinary: #E38A73;
  --color-gray-400: #949494;
  --color-gray-350: #d0d0d0;
  --color-gray-100: #f5f5f5;
}

.resident-carousel {
    margin-bottom: 36px;
}

/* Carrousel non initialisé */
.resident-carousel:not(.flickity-enabled) {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
.resident-carousel:not(.flickity-enabled) .carousel__slide {
    opacity: 1;
}
/* - - - */

.resident-carousel__cta {
    display: flex;
    margin-top: 24px;
}

.resident-carousel .carousel__slide.carousel__slide-inner {
    background-color: var(--color-gray-350);
}

.resident-carousel .carousel__slide:nth-of-type(4n - 2) .carousel__slide-inner {
    background-color: var(--color-quinary);
}

.resident-carousel .carousel__slide:nth-of-type(4n - 2) .carousel__slide-inner .carousel__slide-overlay::before {
    opacity: 0.1;
}

.resident-carousel .carousel__slide:nth-of-type(4n - 1) .carousel__slide-inner {
    background-color: var(--color-quaternary);
}

.resident-carousel .carousel__slide:nth-of-type(4n) .carousel__slide-inner {
    background-color: var(--color-gray-350);
}

.resident-carousel .carousel__slide:nth-of-type(4n) .carousel__slide-inner .carousel__slide-overlay::before {
    opacity: 0.15;
}

.resident-carousel .carousel__slide {
    width: 272px;
}

.resident-carousel .carousel__slide-title {
    font-stretch: 75%;
	letter-spacing: normal;

    margin: 12px 0;
}

.resident-carousel .carousel__slide-title,
.resident-carousel .carousel__slide-role {
    position: relative;
    z-index: 2;
}

.resident-carousel .carousel__slide-role {
    margin: 0;
}

.resident-carousel .carousel__slide-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;
}

.resident-carousel .carousel__slide-overlay::before {
    opacity: 0.3;
}

.resident-carousel .carousel__slide-overlay::before {
    background-size: 325% auto;
}

.resident-carousel .carousel__slide-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;

    padding: 26px 20px;
    box-sizing: border-box;

    background-color: var(--color-tertiary);

    text-decoration: none;
    
    gap: 0.5rem;

    aspect-ratio: 30/35;

    overflow: hidden;
}

.resident-carousel .carousel__slide-inner:focus {
    outline: 2px dotted var(--color-primary);
    outline-offset: -2px;
}

@media screen and (min-width: 1024px) {
    .resident-carousel .carousel__slide-inner {
        padding: 28px 22px;
    }
}
@media screen and (min-width: 1440px) {
    .resident-carousel .carousel__slide-inner {
        padding: 36px 48px 36px 30px;
    }
}

.resident-carousel .carousel__slide-inner svg {
    position: absolute;
    bottom: -42px;
    right: 20px;

    transition: bottom 500ms ease-in;
}

.resident-carousel .carousel__slide-inner:hover .carousel__slide-overlay {
    transform: rotate(-30deg);

    transition: transform 500ms ease-out;
}
.resident-carousel .carousel__slide-inner:hover svg {
    bottom: 20px;

    transition: bottom 500ms ease-in;
}

.resident-carousel .flickity-viewport {
    position: relative;
}

/* Ecrans de - de 600px: LA première slide est à 100% opacité */
.resident-carousel .carousel__slide.is-selected {
    opacity: 1;

    transition: opacity 200ms ease-in;
}
.resident-carousel .carousel__slide {
    opacity: 0.8;

    transition: opacity 200ms ease-in;
}
/* Ecrans de 600px à 905px: les 2 premières slides sont 100% opacité */
@media screen and (min-width: 600px) and (max-width: 904px) {
    .resident-carousel .carousel__slide.is-selected + .carousel__slide {
        opacity: 1;
    }
}
/* Ecrans de 905 à 991px ET +1200px : les 3 premières slides sont 100% opacité */
@media screen and (min-width: 1200px) {
    .resident-carousel .carousel__slide.is-selected + .carousel__slide,
    .resident-carousel .carousel__slide.is-selected + .carousel__slide + .carousel__slide {
        opacity: 1;
    }
}
@media screen and (min-width: 1620px) {
    .resident-carousel .carousel__slide.is-selected + .carousel__slide,
    .resident-carousel .carousel__slide.is-selected + .carousel__slide + .carousel__slide,
    .resident-carousel .carousel__slide.is-selected + .carousel__slide + .carousel__slide + .carousel__slide {
        opacity: 1;
    }
}
@media screen and (min-width: 905px) and (max-width: 991px) {
    .resident-carousel .carousel__slide.is-selected + .carousel__slide,
    .resident-carousel  .carousel__slide.is-selected + .carousel__slide + .carousel__slide {
        opacity: 1;
    }
}

/* Contrôles du carrousel */

.resident-carousel .flickity-prev-next-button {
    display: none;

    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 17px auto;
    border: 1px solid var(--color-primary);
}

.resident-carousel .flickity-prev-next-button:hover {
    background-color: rgba(13,35,66,0.25);
}

.resident-carousel .flickity-prev-next-button:focus {
    box-shadow: 0 0 0 3px rgba(13,35,66,0.4);
}

.resident-carousel .flickity-button-icon {
    color: rgba(0,0,0,0);
}

.resident-carousel .flickity-prev-next-button.previous {
    background-image: url("arrow-left--primary.svg");
}
.resident-carousel .flickity-prev-next-button.next {
    background-image: url("arrow-right--primary.svg");
}

@media screen and (min-width: 1200px) {
    .resident-carousel .flickity-prev-next-button {
        display: inline-flex;

        right: -70px;
        left: unset;
    }
    .resident-carousel .flickity-prev-next-button.previous {
        top: calc(50% - 42px);
    }
    .resident-carousel .flickity-prev-next-button.next {
        top: calc(50% + 16px);
    }
}

@media screen and (min-width: 1400px) {
    .resident-carousel .flickity-prev-next-button {
        right: -88px;
    }
}

.resident-carousel .flickity-page-dots {
    display: flex;
    bottom: -33px;

    width: 100%;

    background-color: var(--color-gray-100);
}

.resident-carousel .flickity-page-dots .dot {
    flex: 1 1 0px;

    margin: 0;
}

.resident-carousel .flickity-page-dots .dot:focus {
    box-shadow: 0 0 0 2px rgba(13,35,66,0.4);
}

.resident-carousel .flickity-page-dots .dot.is-selected {
    background-color: var(--color-gray-400);
}