/* .............................................................................
SITE BLOCKS
............................................................................. */

/*
BLOCK / Standard styles
Styles standard des blocs principaux. */
.bMain {display: flex;}
.bMain > * {flex:1 1 auto;width: 100%;padding-top: var(--base-spacing-top);padding-bottom: var(--base-spacing-bottom);}
.bMain__cSide {flex:0 0 auto; width: var(--width-side-bar); background: var(--color-light-gray); }
.bMain__cCtn {position: relative;}
.bMain__willStick {--padding:2em;position: sticky;top: calc(var(--topbar-height) + var(--padding));padding-top: var(--page-head-height);margin-top: calc(-1 * var(--page-head-height));text-align: center;}
.bMain__title {display: inline-block;font-size: 0.95em;font-weight: 300;writing-mode: vertical-rl;}

	/* Remove the side */
	@media (max-width:62rem) {
		.bMain {display: block; }
		.bMain__cSide {display: none; }
	}

	/*
	ALT :
	No double padding.
	Si 2 blocks avec cette classe se chevauchent, ne pas mettre
	d'espacement entre ces 2 blocs. */
	.bMain--noDP + .bMain--noDP > * {padding-top: 0; }

	/*
	ALT :
	Forcer zero padding top ou bottom. */
	.bMain--noTP > * {padding-top: 0; }
	.bMain--noBP > * {padding-bottom: 0; }



/*
BLOCK / Centered restrict width
Bloc centered qui n'est pas pleine largeur. */
.bCenteredRW { }
.bCenteredRW__in {text-align: center;margin: 0 auto;max-width: 40em;}



/*
BLOCK / CLIR
Content left et image right
Utile pour la page generique. */
.bCLIR { }
.bCLIR__layout {display: flex; align-items: flex-end; }
.bCLIR__cCtn {flex:1 1 auto;width: 100%;position: relative;background: #fff;}
.bCLIR__cImg {order:1; flex:0 0 auto;width: 52%;margin-bottom: 1.5em;}

.bCLIR__ctn {padding: 10%;}
.bCLIR__link {transform: translateY(50%);text-align: center;margin-top: 1.5em;}
.bCLIR__img {overflow: hidden;}
.bCLIR__imgAnimate { }

	/* 
	ALT :
	Inverse. */
	.bCLIR--invert { }
	.bCLIR--invert .bCLIR__cImg {order:0; }

	/* Image over content */
	@media (max-width:62rem) {
		.bCLIR__layout {display: block; }
		.bCLIR__layout > * {width: 100%; margin: 0; }
	}

	/* 
	ANIMATE */
	.js .jsAnimateClass .bCLIR__imgAnimate {transform: scale(1.2); opacity: 0; transform-origin: 50% 50%; transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s; }
	.js .jsAnimateClass.animate .bCLIR__imgAnimate {transform: none; opacity: 1; }



/*
BLOCK / Boxes list simple
Boxes 3 cols per row qui deviennent une par-dessus l'autre sur mobile. */
.bBoxesList {--espacementV: 2vw; --espacementH: 2vw; --nbItems: 3; }
.bBoxesList__list { }
.bBoxesList__items {display: flex; flex-wrap: wrap; margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH)); }
.bBoxesList__items > * {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: var(--espacementV) var(--espacementH);}

	/* Huge screens */
	@media (min-width:110rem) {
		.bBoxesList {--espacementV: 2.2em; --espacementH: 2.2em; }
	}
	
	/* 2 cols */
	@media (max-width:62rem) {
		.bBoxesList {--nbItems: 2; }
	}

	/* 1 col */
	@media (max-width:46rem) {
		.bBoxesList {--espacementV: 3.002vw; --espacementH: var(--width-std-left); --nbItems: 1;}
		.bBoxesList__items {display: block; }
	}

	/* Overflow list *
	@media (max-width:46rem) {
		.bBoxesList__list {overflow: auto; padding: 0 0 calc(2 * var(--espacementV)) 0; margin-left:calc(-1 * var(--width-std-left)); margin-right: calc(-1 * var(--width-std-right)); margin-bottom: calc(-2 * var(--espacementV));}
		.bBoxesList__items {margin-left: 0; margin-right: 0; flex-wrap: nowrap;}
		.bBoxesList__items > * {width: calc(100vw - var(--width-std-left) - var(--width-std-right)); box-sizing: content-box;}
		.bBoxesList__items > *:first-child {padding-left: var(--width-std-left);}
		.bBoxesList__items > *:last-child {padding-right: var(--width-std-right);}
	}



/*
BLOCK / Programmation list
Boxes 3 cols per row qui deviennent un carousel sur mobile. */
.bProgrammationList {--espacementV: 2vw;--espacementH: 3vw;--nbItems: 3;}
.bProgrammationList__list { }
.bFilters + .bProgrammationList__list {margin-top: 2.5em;padding-top: 1px;}
.bProgrammationList__items {min-width: 100%;display: flex;flex-wrap: wrap;margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH));}
.bProgrammationList__items .iBoxEvent {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: var(--espacementV) var(--espacementH); }
.bProgrammationList__nav {display: none; }
.bProgrammationList__pagination {margin-top: var(--base-spacing);text-align: center;}
.bProgrammationList__bar {display: none; }

/* Carousel */
.bProgrammationList .jsCarouselStd { }

	/* Disable Flickity */
	.bProgrammationList .jsCarouselStd::after {content: ''; }

	/* 
	ALT :
	Styles particuliers pour la liste complete d'evenements. */
	.bProgrammationList--fullListing { }


	/* 4k */
	@media (min-width:110rem) {
		.bProgrammationList {--espacementV: 2.2em;--espacementH: 3.3em; }
	}

	/* Activate the carousel */
	@media (max-width:62rem) {
		.bProgrammationList {--espacementV: 2em;--espacementH: calc(0.5 * var(--width-std));--nbItems: 2;overflow: hidden;}
		.bProgrammationList__list { }
		.jsCarouselStd .bProgrammationList__items {flex-wrap: nowrap;}
		.bProgrammationList__nav {display: block;text-align: center;margin-top: 2em;}
		.bProgrammationList__bar {display: block; margin-top: 1em; }
		.bProgrammationList .flickity-viewport {overflow: visible; }

		/* Enable Flickity */
		.bProgrammationList .jsCarouselStd::after {content: 'flickity'; display: none; }

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

		/* 100% height slides */
		.flickity-resize.bProgrammationList__items .iBoxEvent {min-height: 100%;display: flex;}
		.flickity-resize.bProgrammationList__items .iBoxEvent__layout {height: auto;}

		.bProgrammationList--fullListing {overflow: visible;}
	}

	/* 1 col */
	@media (max-width:46rem) {
		.bProgrammationList {--espacementH: var(--width-std-left); --nbItems: 1; }
	
		.bProgrammationList .jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+2) {display: none; }
	}



/*
BLOCK / Rubrique list
Boxes 3 cols per row qui deviennent un carousel sur mobile. */
.bRubriquesList {--espacementV: 2em;--espacementH: 1px;--nbItems: 3;}
.bRubriquesList__list { }
.bRubriquesList__items {display: flex; flex-wrap: wrap; margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH));}
.bRubriquesList__items .iBoxText {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: var(--espacementV) var(--espacementH); }
.bRubriquesList__nav {display: none; }
.bRubriquesList__pagination {margin-top: var(--base-spacing-top);text-align: center;}
.bRubriquesList__bar {display: none; }

/* Carousel */
.bRubriquesList .jsCarouselStd { }

	/* Disable Flickity */
	.bRubriquesList .jsCarouselStd::after {content: ''; }

	/* Activate the carousel */
	@media (max-width:62rem) {
		.bRubriquesList {--nbItems: 2; overflow: hidden;}
		.bRubriquesList__list { }
		.bRubriquesList__items {flex-wrap: nowrap;}
		.bRubriquesList__nav {display: block;text-align: center;margin-top: 2em;}
		.bRubriquesList__bar {display: block; margin-top: 1em; }
		.bRubriquesList .flickity-viewport {overflow: visible; }

		/* Enable Flickity */
		.bRubriquesList .jsCarouselStd::after {content: 'flickity'; display: none; }

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

		/* 100% height slides */
		.flickity-resize.bRubriquesList__items .iBoxText {min-height: 100%;display: flex;}
		.flickity-resize.bRubriquesList__items .iBoxText__layout {height: auto;}
	}

	/* 1 col */
	@media (max-width:46rem) {
		.bRubriquesList {--nbItems: 1; }
	
		.bRubriquesList .jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+2) {display: none; }
	}



/*
BLOCK / Gallery
Images 3 cols per row en carousel. */
.bGallery {--espacementV: 2vw;--espacementH: 3vw;--nbItems: 3;}
.bGallery__list { }
.bGallery__items {display: flex; margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH));}
.bGallery__items .iGalleryImage {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: var(--espacementV) var(--espacementH); }
.bGallery__nav {text-align: right;margin-top: 1em;}
.bGallery__bar {margin-top: 0.5em; }

/* Carousel */
.bGallery .jsCarouselStd { }

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

	/* 4k */
	@media (min-width:110rem) {
		.bGallery {--espacementV: 2.2em;--espacementH: 3.3em; }
	}

	/* 2 cols */
	@media (max-width:62rem) {
		.bGallery {--espacementV: 2vw;--espacementH: calc(0.5 * var(--width-std));--nbItems: 2; overflow: hidden;}
		.bGallery__nav {text-align: center; }
		.bGallery__bar {margin-top: 1em; }
		.bGallery .flickity-viewport {overflow: visible; }

		.bGallery .jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+3) {display: none; }
	}

	/* 1 col */
	@media (max-width:46rem) {
		.bGallery {--espacementH: var(--width-std-left); --nbItems: 1; }
	
		.bGallery .jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+2) {display: none; }
	}



/*
BLOCK / Liste de nouvelles
Nouvelles 2 cols per row en carousel. */
.bNouvellesList {--espacementV: 0.5em;--espacementH: 4vw;--nbItems: 2;background-color: var(--color-light-gray);}
.bNouvellesList__list { }
.bNouvellesList__items {display: flex; margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH));}
.bNouvellesList__items .iBoxNouvelle {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: var(--espacementV) var(--espacementH); }
.bNouvellesList__nav {text-align: right;margin-top: 1em;}
.bNouvellesList__bar {margin-top: 0.5em; }

/* Carousel */
.bNouvellesList .jsCarouselStd { }

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

	/* 4k */
	@media (min-width:110rem) {
		.bNouvellesList {--espacementH: 4.4em; }
	}

	/* 1 col */
	@media (max-width:62rem) {
		.bNouvellesList {--espacementH: var(--width-std-left); --nbItems: 1; }
		.bNouvellesList__nav {text-align: center; }
		.bNouvellesList__bar {margin-top: 1em; }

		.bNouvellesList .jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+2) {display: none; }
	}



/*
BLOCK / Details event
Details sur un evenement dans la page de details d'evenement. */
.bDetailsEvent { }
.bDetailsEvent__desc { }
.bDetailsEvent__video {margin-top: var(--base-spacing-top); }



/*
BLOCK / Filters
Block de filtres avec filtres simples (4 checkboxes) et avancer. */
.bFilters {position: relative;padding-top: 3.5em;}
.bFilters::before {position:absolute;z-index:-1;display:block;content:'';top:0;bottom:0;left:0;right:0;background-color: var(--color-light-gray);opacity: 0;}
.bFilters__simple {position: relative;}
.bFilters__close {position: absolute;z-index: 5;top: 2em;right: var(--width-std-right);opacity: 0;visibility: hidden;pointer-events: none;transition: opacity 0.3s, visibility 0.3s;}
.bFilters__advanced {display: none;padding: 3.5em 0;}
.bFilters__advancedIn {position: relative;}
.bFilters__byKeywords {max-width: 26em;margin-bottom: 3em;}
.bFilters__byCheckboxes {--spacing: 1em;display: flex;margin: calc(-1 * var(--spacing));}
.bFilters__checkboxesGroup {display: block;width: 33.33%;padding: var(--spacing);}
.bFilters__checkboxesList { }
.bFilters__results {position: absolute;right: 0;bottom: 0;display: flex;align-items: center;}
.bFilters__results > * {flex:0 0 auto;}
.bFilters__resultsQty {font-weight: bold;font-size: 2.3em;padding-right: 1.2em;}

	/* 
	STATE / Open */
	.bFilters.open { }
	.bFilters.open::before {opacity: 1;}
	.bFilters.open .bFilters__close {opacity: 1; visibility: visible; pointer-events: auto; }
	.bFilters.open .bFilters__advanced {display: block;}

	/* Stacked */
	@media (max-width:62rem) {
		.bFilters__byCheckboxes {flex-wrap: wrap;}
		.bFilters__checkboxesGroup {width: 50%;}
		.bFilters__results {position: static;margin-top: 3em;justify-content: flex-end;}
	}

	/* Sizes */
	/* Sticky close button */
	@media (max-width:46rem) {
		.bFilters {padding-top: 2em; }
		.bFilters__close {position: sticky;top: calc(1em + var(--topbar-height));margin: -1em -0.7em 7em 0;right: auto;float: right;}
		.bFilters__advanced {padding: 2em 0; }
		.bFilters__byCheckboxes {--spacing: 1em;display: block;}
		.bFilters__checkboxesGroup {width: auto;}
		.bFilters__byKeywords {margin-bottom: 2em; }
		.bFilters__results {margin-top: 2em;justify-content: space-between;}
		.bFilters__resultsQty {font-size: 1.3em;padding-right: 0.2em;}
	}



/*
BLOCK / A propos
Avec un background vert.
Petit texte de description a gauche et liste de liens a droite. */
.bAPropos {background-color: var(--color-green); }
.bAPropos__layout {display: flex;}
.bAPropos__cCtn {flex:1 1 auto;width: 100%;padding-right: 10%;}
.bAPropos__cList {position: relative;flex:0 0 auto;width: 50%;align-self: center;}

.bAPropos__ctn {font-weight: 300; }
.bAPropos__list { }
.bAPropos__item {position: relative;display: block;font-size: 2.5em;font-weight: 300;padding: 0.8em 0;}
.bAPropos__item::after {position:absolute; z-index:0; display:block; content:''; top:100%; height: 1px; left:0; right:0; background-color: #fff;}
.bAPropos__item:last-child::after {display: none;}
.bAPropos__itemLabel {display: block;position: relative;z-index: 2;transition: opacity 0.3s, transform 0.3s;}
.bAPropos__images {position: absolute;z-index: 1;top: 0;right: 3%;width: 38%;transform: translateY(-50%);}
.bAPropos__imagesFloat {display: grid;border-radius: 50%;overflow: hidden;transform: translateY(var(--y, 0));will-change: transform;}
.bAPropos__image {grid-row: 1 / -1; grid-column: 1 / -1; opacity: 0; transition: opacity 0.3s;}

	/* Hover */
	.bAPropos__item:hover .bAPropos__itemLabel {opacity: 0.4; transform: translateX(3%); }

	/* Active */
	.bAPropos__image.active {opacity: 1; }

	/* 
	ANIMATE */
	.js .jsAnimateClass .bAPropos__item {opacity: 0; transition: opacity 0.5s; transition-delay: var(--appear-delay, 0s); }
	.js .jsAnimateClass.animate .bAPropos__item {opacity: 1; }

	.js .jsAnimateClass .bAPropos__item::after {transform: scaleX(0); transform-origin: 0% 50%; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: calc(0.2s + var(--appear-delay, 0s)); }
	.js .jsAnimateClass.animate .bAPropos__item::after {transform: none; }

	/* Stacked */
	@media (max-width:62rem) {
		.bAPropos__layout {display: block; }
		.bAPropos__layout > * {width: 100%; }
		.bAPropos__cCtn {padding: 0;}
		.bAPropos__cList {margin-top: calc(0.5 * var(--base-spacing-top));}
		.bAPropos__item {font-size: 2em; }
		.bAPropos__images {display: none; }
	}

	/* Size */
	@media (max-width:46rem) {
		.bAPropos__item {font-size: 1.8em; }
	}



/*
BLOCK / CLIR vert
Contenu a gauche et image ronde a droite. */
.bCLIRGreen {background-color: var(--color-green); }
.bCLIRGreen__layout {display: flex; }
.bCLIRGreen__cCtn {flex:1 1 auto;width: 100%;padding-right: 8%;}
.bCLIRGreen__cImg {flex:0 0 auto; width: 43%; align-self: center; margin-top: calc(-0.5 * var(--base-spacing-top)); margin-bottom: calc(-0.5 * var(--base-spacing-bottom)); }

.bCLIRGreen__ctn {font-weight: 300; }
.bCLIRGreen__img { }
.bCLIRGreen__imgCircle {border-radius: 50%;overflow: hidden; }

	/* 
	ANIMATE */
	.js .jsAnimateClass .bCLIRGreen__imgCircle {transform: scale(0.85); opacity: 0; transform-origin: 50% 50%; transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s; }
	.js .jsAnimateClass.animate .bCLIRGreen__imgCircle {transform: none; opacity: 1; }

	/* Stacked */
	@media (max-width:62rem) {
		.bCLIRGreen { }
		.bCLIRGreen__layout {display: block; }
		.bCLIRGreen__layout > * {width: 100%; }
		.bCLIRGreen__cCtn {padding: 0;}
		.bCLIRGreen__cImg {margin-top: var(--base-spacing-top);margin-bottom: 0;}
	}



/*
BLOCK / CTA
Bloc d'appel a l'action avec contenu centered. */
.bCTA {background-color: var(--color-green); }
.bCTA__layout { }
.bCTA__cCtn {text-align: center; margin: 0 auto; max-width: 40em; }
.bCTA__ctn {font-weight: 300; }

	/* 
	ALT :
	Bleu. */
	.bCTA--blue {background-color: var(--color-blue); }



/*
BLOCK / Gros titre
Gros titre avec JS pour qu'il soit defilant. */
.bGrosTitre { }
.bGrosTitre__list {overflow: hidden; display: flex; }
.bGrosTitre__items {display: flex; }
.bGrosTitre__items > * {flex:0 0 auto;padding: 0.2em 1em;}



/*
BLOCK / Title
Description. */