/* .............................................................................
FLICKITY
Flickity v2.3.0
https://flickity.metafizzy.co
............................................................................. */
.flickity-enabled { position: relative; }
.flickity-enabled:focus { outline: none; }
.flickity-viewport { overflow: hidden; position: relative; height: 100%; }
.flickity-slider { position: absolute; width: 100%; height: 100%; }

/* draggable */
.flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; }
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; }

/* ---- flickity-button ---- */
.flickity-button { position: absolute; background: hsla(0, 0%, 100%, 0.75); border: none; color: #333; }
.flickity-button:hover { background: white; cursor: pointer; }
.flickity-button:focus { outline: none; box-shadow: 0 0 0 5px #19F; }
.flickity-button:active { opacity: 0.6; }
.flickity-button:disabled { opacity: 0.3; cursor: auto; /* prevent disabled button from capturing pointer up event. #716 */ pointer-events: none; }
.flickity-button-icon { fill: currentColor; }

/* ---- previous/next buttons ---- */
.flickity-prev-next-button { top: 50%; width: 44px; height: 44px; border-radius: 50%; /* vertically center */ transform: translateY(-50%); }
.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; }
.flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; }
.flickity-prev-next-button .flickity-button-icon { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; }

	/* MOD des buttons : les mettre en font-size em qui heritent. */
	.flickity-prev-next-button {width: 1em; height: 1em; font-size: 4em; padding: 0;}
	.flickity-prev-next-button.previous { left: 0; }
	.flickity-prev-next-button.next { right: 0; }
	.flickity-prev-next-button .flickity-button-icon {font-size: 0.5em; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1em; height: 1em; }

/* ---- page dots ---- */
.flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; }
.flickity-rtl .flickity-page-dots { direction: rtl; }
.flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #333; border-radius: 50%; opacity: 0.25; cursor: pointer; }
.flickity-page-dots .dot.is-selected { opacity: 1; }

	/* MOD des dots : les mettre en font-size em qui heritent. */
	.flickity-page-dots {font-size: 2em;bottom: auto;}
	.flickity-page-dots .dot {width: 1em;height: 1em;margin:0;box-sizing: content-box;background: none;position: relative;}
	.flickity-page-dots .dot::before {position: absolute;display: block;content: " ";background-color: #000;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 0.5em;width: 1em;height: 1em; border-radius: 50%;}





/* TODO : Clean la section suivante quand le projet est finished. */


/*
INIT */

/* Before init, on affiche les boites comme elles seront apres le init. */
.jsCarousel:not(.flickity-enabled) > *:nth-child(1n+3) {display: none; }

/* On affiche rien du module avant le init. */
.jsCarousel:not(.flickity-enabled) {opacity: 0;}



/*
FADE EFFECT
Dans ce plugin, cet effet est gerer en CSS, pas en JS. */
.jsCarouselImages.flickity-enabled .flickity-slider {transform: none !important;}
.jsCarouselImages.flickity-enabled .installationItem {transform: none !important;}

/* Set animations transitions */
.jsCarouselImages .installationItem {transition: opacity 0.5s, visibility 0.5s;}

/* .is-selected = slide du centre
.is-previous = slide de gauche
.is-next = slide de droite */
.jsCarouselImages .installationItem:not(.is-selected) {opacity: 0;visibility: hidden; pointer-events: none;}

/* Ajouter des z-index si les autres slides sont visibles, voir Soprema. */



/*
WORD ITEM ROTATOR (CAROUSEL)
Carousel de mots qu'on retrouve dans la banner de l'accueil. */
.wordItem {width: 100%;}

/* Before initialized. */
.jsWordRotator .wordItem:not(:first-child) {display:none; visibility: hidden;}
.jsWordRotator.flickity-enabled .wordItem {display:block;}

/* Fade effect */
.jsWordRotator.flickity-enabled .flickity-slider { transform: none !important;}
.jsWordRotator.flickity-enabled .wordItem { left:0% !important;}

.jsWordRotator { }
.jsWordRotator.flickity-enabled .wordItem {transition:transform-origin 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 1s;transform: scaleY(0);pointer-events: none;}
.jsWordRotator.flickity-enabled .wordItem.is-selected {transform: scaleY(1) translateY(0em); visibility: visible;}
.jsWordRotator.flickity-enabled .wordItem.is-next {transform-origin: 50% 100%; transform: scaleY(0) translateY(0.8em); visibility: visible;}
.jsWordRotator.flickity-enabled .wordItem.is-previous {transform-origin: 50% 0%; transform: scaleY(0) translateY(-0.8em); visibility: visible;}



/*
DOTS / En chiffres
On met un counter sur les cells et on affiche le chiffre dans la dot nav. */
.bEmpAmbiance__items .iBoxImg {counter-increment:carousel-cell; }
.bEmpAmbiance__items .flickity-page-dots {--spacing: 0.8em;padding: 0;margin: 0;list-style: none;text-align: center;line-height: 1;font-size: 1.2em;position: absolute;top: 100%;bottom: auto;left: auto;right: var(--espacementH);width: auto;height: auto;display: flex;}
.bEmpAmbiance__items .flickity-page-dots .dot {display: block;width: 1em;height: 1em;margin: 0;padding: var(--spacing);background: none;box-sizing: content-box;position: relative;border-radius: 0;cursor: pointer;counter-increment: carousel-cell;opacity: 0.5;transition: opacity 0.2s;}
.bEmpAmbiance__items .flickity-page-dots .dot::before {position: absolute;display: block;content: " ";background-color: transparent;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 1em;font-weight: bold;width: auto;height: auto;border-radius: 50%;content: counter(carousel-cell, decimal-leading-zero);text-align: center;}
.bEmpAmbiance__items .flickity-page-dots .dot:last-child {margin-right: calc(-1 * var(--spacing));}

	/* Hover */
	.bEmpAmbiance__items .flickity-page-dots .dot:hover { opacity: 1; }

	/* Active */
	.bEmpAmbiance__items .flickity-page-dots .dot.is-selected { opacity: 1; }