/* Web Fonts

------------------------------------------------- */
@font-face{
	font-family: 'GTFlexa-Exp';
	src: url('fonts/GT-Flexa-Expanded-Regular.woff2');
  font-weight: 400;
}
@font-face{
	font-family: 'GTFlexa';
	src: url('fonts/GT-Flexa-Standard-Regular.woff2');
  font-weight: 400;
}
@font-face{
	font-family: 'GTFlexa-Exp';
	src: url('fonts/GT-Flexa-X-Expanded-Medium.woff2');
  font-weight: 500;
}
@font-face{
	font-family: 'GT-Flexa-X-Exp';
	src: url('fonts/GT-Flexa-X-Expanded-Medium.woff2');
  font-weight: 400;
}


/* General
------------------------------------------------- */

* {
  box-sizing: border-box;
	user-select: none;
}

:root {
  --totem-bg-color: black;

  --mobile-font-size: 9.18em;
  --mobile-line-height: 1.2em;
  --mobile-10: 7.65em;
  --mobile-margin: 9.18em;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: 'GTFlexa-Exp';
	-webkit-font-smoothing: antialiased;

  /* font-size: 10px; */
  font-size: 0.520833334vw;
  line-height: 1.2em;

	user-select: none;
}
body.totem {
  font-size: 0.5208vh;
  line-height: 1.2em;
}
img {
  display: block;
}

.hidden {
	display: none !important;
}

a {
	color: inherit;
}

@media (max-width: 899px) {
	html, body {
	  overflow: hidden;
	}
	body {
	  position: relative;
	}
}

/* App
------------------------------------------------- */

#app {
  display: flex;
  flex: 1;
  position: relative;
	overflow: hidden;
  height: 100%;
}
@media (min-width: 900px) {
  #app {

  }
}


/* Nav
------------------------------------------------- */

.nav {
  /* position: absolute;
  top: 0;
  right: 0; */
}
.nav .burger {
  position: absolute;
	z-index: 4;
  top: 0;
  right: 0;
  padding: 2.45em;
  /* box-sizing:  */
}
.nav .burger img {
  display: block;
  width: 6.8em;
}

.menu {

}
.menu-open .menu {

}

.nav .menu .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2.45em 3.65em;

	opacity: 0;
	transition: opacity 100ms 0ms;
}
.menu-open .nav .menu .close {
	z-index: 6;
	opacity: 1;
	transition-delay: 400ms;
	transition-duration: 300ms;
}
.nav .menu .close img {
  display: block;
  width: 4.4em;
  height: 4.4em;
}
.nav .menu .close svg line {
	stroke-width: 0.5px;
}

.menu .grid {
	position: absolute;
	top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;

	z-index: 5;

	transition: transform 400ms;
	transform: translateY(100%);

}
.menu-open .menu .grid {
	transform: translateY(0%);
}
.single-open .home .grid {
  transform: translateY(-100%);
}

.menu .grid .cell {
  border-bottom: 1px solid black;
  background-color: white;
}

.menu .grid .cell canvas {
  display: block;
}
.menu .grid .cell ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}


.menu .grid .cell .title {
  padding: 0 4em;
	flex-grow: 1;
	display: flex;
	align-items: center;
}
.menu .grid .cell h2 {
  margin: 0;
  font-family: 'GTFlexa-Exp';
  font-weight: 400;
  font-size: 5.5em;
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: left;

}

@media (min-width: 900px) {
  .menu .close svg {
    display: block;
    width: 6.8em;
    height: auto;
  }
  .menu .grid .cell {
    height: 15.4286em;
    display: flex;
    background-color: white;
    transform: translateX(0);
    cursor: pointer;
  }
  .menu .grid .cell .title {
    order: 2;
  }
  .menu .grid .cell .title .arrow {
    display: none;
  }
  .menu .grid .cell .shape-container {
    width: 64em;
  }
  .menu .grid .cell.header-cell .shape-container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* flex-grow: 1; */

    width: 64em;
  }
	.menu .grid .cell.header-cell .shape-container img {
    display: block;
		width: 85%;
		height: auto;
  }
  .menu .grid .cell .accordeon-body {
    display: flex;
    min-width: 0;
    overflow: visible !important;
    height: auto !important;
  }
  .menu .grid .cell .accordeon-body .accordeon-content,
  .menu .grid .cell .accordeon-body .accordeon-content .shape-container,
  .menu .grid .cell .accordeon-body .accordeon-content .shape-container .shape {
    display: flex;
    flex-grow: 1;
  }
  .menu .grid .cell .accordeon-body .accordeon-content .shape-container .shape svg {
    display: block;
    height: 100%;
    width: 100%;
  }
  .menu .grid .cell .accordeon-body .accordeon-content .shape-container .shape svg path {
    fill: none;
    stroke: black;
  }
  .menu .grid .cell .accordeon-body .accordeon-content ul {
    display: none;
  }

}
@media (max-width: 899px) {
  .nav .burger {
    padding: 10.5em 10em;
  }
  .nav .burger img {
    width: 20em;
    height: auto;
  }
  .nav .menu .close {
    padding: 10em 10em;
  }
  .nav .menu .close svg {
    display: block;
    width: 17em;
    height: auto;
  }
	.nav .menu .close svg line {
    stroke-width: 0.666px;
  }

	    stroke-width: 0.75px;
  .menu .grid .cell.header-cell {
    padding-top: 30em;
  }
  .menu .grid .cell.header-cell .shape-container {
    display: none;
  }
  .menu .grid .cell .title {
    height: 28em;
    padding: 0 var(--mobile-margin);
  }
  .menu .grid .cell .title .arrow svg {
    transition: transform 250ms;
    display: block;
    width: 10em;
    height: auto;
  }
  .menu .grid .cell.open .title .arrow svg {
    transform: rotate(180deg);
  }
  .menu .grid .cell h2 {

    /* font-size: var(--mobile-font-size); */
    font-size: 7.2675em; /* (9.5px) */
    line-height: var(--mobile-line-height);
    flex-grow: 1;
  }
  .menu .grid .cell canvas {
    height: 40em;
    width: 100%;
  }
  .menu .grid .cell svg {
    display: block;
    height: 40em;
    width: 100%;
  }
  .menu .grid .cell svg path {
    stroke: black;
    fill: none;
  }
  .menu .grid .cell ul {
    padding: 0 10em 1em;
  }
  .menu .grid .cell ul li {
    margin: 7.5em 0;
  }
  .menu .grid .cell ul li a {
    font-family: 'GTFlexa';
    font-size: var(--mobile-font-size);
    line-height: var(--mobile-line-height);
  }

}







/* Home
------------------------------------------------- */

.home .menu {
  position: absolute;
}

.home {
  display: flex;
  flex-direction: column;
  flex: 1;

	background-color: white;

	width: 100%;
	position: relative;

  z-index: 2;

	transition: transform 400ms;
	transform: translateY(0);

	-webkit-user-select: none;
	user-select: none;
}

.menu-open .home {
	transform: translateY(-100%);
}
.single-open .home {
  transform: translateY(-100%);
}
.home .table {
	position: relative;
	z-index: 2;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
}

.home .table .row {
  position: relative;
  flex-grow: 1;
  transition: height 250ms cubic-bezier(0.37, 0, 0.63, 1);

  border-bottom: 1px solid black;
  min-height: 0;
  min-width: 0;
}


.home .table .row .shape {
  width: 100%;
  height: 100%;
  position: absolute;
}
.home .table .row .shape svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (min-width: 900px) {
  .home .table {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .home .table .row {
    height: 50%;
    width: 33.333%;

    transition: width 250ms cubic-bezier(0.37, 0, 0.63, 1), height 250ms cubic-bezier(0.37, 0, 0.63, 1);
  }

  /* 1 */
  .home .table.active.active-0 .row:nth-child(1) {
    width: 80%;
    height: 90%;
  }
  .home .table.active.active-1 .row:nth-child(1),
  .home .table.active.active-2 .row:nth-child(1) {
    width: 10%;
    height: 90%;
  }
  .home .table.active.active-3 .row:nth-child(1),
  .home .table.active.active-4 .row:nth-child(1),
  .home .table.active.active-5 .row:nth-child(1) {
    height: 10%;
  }

  /* 2 */
  .home .table.active.active-1 .row:nth-child(2) {
    width: 80%;
    height: 90%;
  }
  .home .table.active.active-0 .row:nth-child(2),
  .home .table.active.active-2 .row:nth-child(2) {
    width: 10%;
    height: 90%;
  }
  .home .table.active.active-3 .row:nth-child(2),
  .home .table.active.active-4 .row:nth-child(2),
  .home .table.active.active-5 .row:nth-child(2) {
    height: 10%;
  }

  /* 3 */
  .home .table.active.active-2 .row:nth-child(3) {
    width: 80%;
    height: 90%;
  }
  .home .table.active.active-0 .row:nth-child(3),
  .home .table.active.active-1 .row:nth-child(3) {
    width: 10%;
    height: 90%;
  }
  .home .table.active.active-3 .row:nth-child(3),
  .home .table.active.active-4 .row:nth-child(3),
  .home .table.active.active-5 .row:nth-child(3) {
    height: 10%;
  }

  /* 4 */
  .home .table.active.active-0 .row:nth-child(4),
  .home .table.active.active-1 .row:nth-child(4),
  .home .table.active.active-2 .row:nth-child(4) {
    height: 10%;
  }
  .home .table.active.active-3 .row:nth-child(4) {
    width: 80%;
    height: 90%;
  }
  .home .table.active.active-4 .row:nth-child(4),
  .home .table.active.active-5 .row:nth-child(4) {
    width: 10%;
    height: 90%;
  }

  /* 5 */
  .home .table.active.active-0 .row:nth-child(5),
  .home .table.active.active-1 .row:nth-child(5),
  .home .table.active.active-2 .row:nth-child(5) {
    height: 10%;
  }
  .home .table.active.active-4 .row:nth-child(5) {
    width: 80%;
    height: 90%;
  }
  .home .table.active.active-3 .row:nth-child(5),
  .home .table.active.active-5 .row:nth-child(5) {
    width: 10%;
    height: 90%;
  }

  /* 6 */
  .home .table.active.active-0 .row:nth-child(6),
  .home .table.active.active-1 .row:nth-child(6),
  .home .table.active.active-2 .row:nth-child(6) {
    height: 10%;
  }
  .home .table.active.active-5 .row:nth-child(6) {
    width: 80%;
    height: 90%;
  }
  .home .table.active.active-3 .row:nth-child(6),
  .home .table.active.active-4 .row:nth-child(6) {
    width: 10%;
    height: 90%;
  }

  .home .table .row:nth-last-child(1),
  .home .table .row:nth-last-child(2),
  .home .table .row:nth-last-child(3)  {
    border-bottom: none;
  }
  .home .table .row:nth-child(3n + 1),
  .home .table .row:nth-child(3n + 2) {
    border-right: 1px solid black;
  }

	svg .mobile-shape {
	  display: none;
	}
}
@media (max-width: 899px) {

  .home .table .row:last-child {
    border-bottom: none;
  }
  .home .table .row {
    height: 16.6666%;
  }
  .home .table.active .row.active {
    height: calc(100% - calc(5* 15em));
  }
  .home .table.active .row:not(.active) {
    height: 15em;
  }

	svg .desktop-shape {
	  display: none;
	}
}


/* Grid cell slideshow
------------------------------------------------- */

.home .table .row .slideshow {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.home .table .row .slideshow ul.viewer {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style-type: none;
}
.home .table .row .slideshow ul.viewer li {
  position: absolute;
  left: -1px;
  right: -1px;
  height: 100%;
  border-right: 1px solid black;
}

.home .table .row .slideshow ul.viewer li .slide-content {
  position: absolute;
  width: 100%;
  height: 100%;
}



@media (min-width: 900px) {
  .home .table .row .slideshow .nav-left,
  .home .table .row .slideshow .nav-right {
    position: absolute;
    height: 100%;
    width: 5em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .home .table .row .slideshow .nav-left {
    left: 0;
  }
  .home .table .row .slideshow .nav-right {
    right: 0;
  }
  .home .table .row .slideshow .nav-left .arrow svg,
  .home .table .row .slideshow .nav-right .arrow svg {
    display: block;
    width: 2.3424em;
    height: auto;
  }

}
@media (max-width: 899px) {
  .home .table .row .slideshow .nav-left,
  .home .table .row .slideshow .nav-right {
    display: none;
  }
}


/* Grid cell canvas
------------------------------------------------- */
.home .table .row canvas {
  position: absolute;
  width: 100%;
  height: 100%;


}



/* Text-Metier
------------------------------------------------- */

.row-info {
  position: absolute;
  width: 100%;
  height: 100%;
	/* pointer-events: none; */
}
.row .interactive .row-info {
	/* pointer-events: auto; */

}
.text-metier {
  padding: 0 30em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 250ms;
	transition-delay: 0ms;
  height: 25%;
	opacity: 1;

	position: absolute;
	top: 0;
	width: 100%;

	pointer-events: none;
}
.text-metier.large {
	opacity: 0;

}
.text-metier.small {
	height: 100%;
	transition-delay: 500ms;
}

.row.active .text-metier {

}
.table.active .row.active .text-metier.large {
  opacity: 1;
	transition-delay: 500ms;
}
.table.active .row .text-metier.small {
  opacity: 0;
	transition-delay: 0ms;
}

.text-metier h2 {
  font-size: var(--mobile-font-size);
  line-height: 1em;
  font-weight: inherit;
  margin: 0;
  text-align: center;
}




@media (min-width: 900px) {
  .text-metier {
		padding: 0 15em;
  }
	.text-metier h2 {
	 	font-size: 3em;
	  margin: 2em 0 0;
	}
	.text-metier.small h2 {
	  margin: 0;
	}

	.row-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

}
@media (max-width: 899px) {
	.row-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}


/* Grid cell Formation
------------------------------------------------- */

.home .table .row .formations {


}
.home .table .row .formations .bachelor,
.home .table .row .formations .master {
  display: flex;
  align-items: center;
  gap: 0.3704em;
	cursor: pointer;
}
.home .table .row:not(.active) .formations .bachelor,
.home .table .row:not(.active) .formations .master {
	pointer-events: none;
}

.home .table .row .formations .bachelor .text,
.home .table .row .formations .master .text {
  font-family: 'GTFlexa';
	max-width: 14em;
}



@media (min-width: 900px) {

	.home .table .row .formations>:not(:last-child) {
    margin-bottom: 5em;
  }
  .home .table .row .formations .bachelor img,
  .home .table .row .formations .master img {
    transform: translateY(-0.15em);
    animation: jiggleV 3400ms infinite ease-in-out;
  }
  .home .table .row .formations .text {
    font-size: 2.7em;
    line-height: 1.05em;
  }
}
@media (max-width: 899px) {
  .home .table .row .formations {
    margin-top: 10em;
  }
  .home .table .row .formations .text {
    font-size: var(--mobile-font-size);
    line-height: var(--mobile-line-height);
    color: black;
  }
}
@keyframes jiggleV {
	50% {
	 transform: translateY(0.10em);
	}
}
@keyframes jiggleH {
	50% {
	 transform: translateX(0.15em);
	}
}




/* Grid cell More
------------------------------------------------- */


.home .table .row:not(.active) .more {
	pointer-events: none;
}
.home .table .row .more .all {
  font-family: 'GTFlexa';
}
.home .table .row .more .title {
  font-family: 'GTFlexa';
}

.home .table .row .formations,
.home .table .row .more {
  opacity: 0;
	transform: translateX(-100%);
  transition: transform 400ms 0ms;
}
.home .table .row.active .formations,
.home .table .row.active .more {
  opacity: 1;
	transform: translateX(0%);
  transition-delay: 400ms;
}

@media (min-width: 900px) {
  .home .table .row .more {
    /* position: absolute; */
    display: flex;
    align-items: center;
    gap: 1em;
    cursor: pointer;
  }
	.home .table .row.active .formations,
	.home .table .row.active .more {
		width: 100%;
		max-width: 70em;
    margin: 2.5em 0;
	}
  .home .table .row .more .all {
		font-size: 2.7em;
		line-height: 1.05em;
    color: black;
    flex-shrink: 0;
  }
  .home .table .row .more .title {
		font-size: 2.7em;
		line-height: 1.05em;
  }
	.home .table .row .row-info .arrow {
    margin: 0 3em 0 0;
  }
  .home .table .row .formations .bachelor .arrow svg path,
  .home .table .row .formations .master .arrow svg path,
  .home .table .row .more .arrow svg path {
    stroke: black;
  }
}
@media (max-width: 899px) {

  .home .table .row .row-info {
    padding: 0 var(--mobile-margin) 0;
  }
  .home .table .row .row-info .arrow {
    margin: 0 var(--mobile-margin) 0 0;
  }
  .home .table .row .row-info .arrow svg {
    width: 30em;
    height: auto;
    display: flex;
  }
  .home .table .row .more,
  .home .table .row .bachelor,
  .home .table .row .master {
    margin: 10em 0;
    display: flex;
    cursor: pointer;
  }
	.home .table .row .more {
		margin-top: 0;
	}
  .home .table .row .more .all {
    font-size: var(--mobile-font-size);
    line-height: var(--mobile-line-height);
  }
  .home .table .row .more .title {
    font-size: var(--mobile-font-size);
    line-height: var(--mobile-line-height);
  }
}




/* Home picto */
.home .table .row .picto {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	opacity: 1;
	transition: opacity 2000ms;
	transition-delay: 500ms;

  pointer-events: none;
	z-index: 10;
}
.home .table .row .picto svg {
	position: absolute;
	bottom: 0;
	height: auto !important;
}
.home .table.active .row .picto {
	transition-delay: 0ms;
	transition-duration: 300ms;
	opacity: 0;
}


@media (max-width: 899px) {
  .home .table .row .picto {
    display: flex;
    align-items: flex-end;
  }
	.home .table .row .picto.commerce {
		transform: translate(30em, 8em);
	}
	.home .table .row .picto.musicien {
		transform: translate(35em, 8em);
	}
	.home .table .row .picto.fleuriste {
		transform: translate(30em, 8em);
	}
	.home .table .row .picto.sante {
		transform: translate(-124em, 8em);
	}
	.home .table .row .picto.hello {
		transform: translate(-122em, 8em);
	}
	.home .table .row .picto.architecte {
		transform: translate(25em, 8em);
	}
	.home .table .row .picto.plante {
		transform: translate(0, 8em);
	}
}

@media (min-width: 900px) {
	.home .table .row .picto.commerce {
		transform: translate(10em, 2em);
	}
	.home .table .row .picto.musicien {
		transform: translate(15em, 2em);
	}
	.home .table .row .picto.fleuriste {
		transform: translate(17em, 2em);
	}
	.home .table .row .picto.sante {
		transform: translate(-43em, 2em);
	}
	.home .table .row .picto.hello {
		transform: translate(-39em, 2em);
	}
	.home .table .row .picto.architecte {
		transform: translate(10em, 2em);
	}
	.home .table .row .picto.plante {
		transform: translate(0, 1em);
	}
}






/* Home footer */

.home .footer {
  height: 11.2em;
  display: flex;
}
.home .footer .column {
  background-color: white;
  flex: 1 1 33.3333%;

	font-size: 9em;
  line-height: 1.2em;
  font-family: 'GT-Flexa-X-Exp';
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  padding: 0 0.5em;
  text-transform: uppercase;

}
.home .footer .column:nth-child(2) {
	text-align: center;
}
.home .footer .column:nth-child(3) {
	text-align: right;
}


.home .footer .column:not(:last-child) {
	border-right: 1px solid black;
}
.home .footer .column img {
  height: 100%;

}





/* Graphic-Metier
------------------------------------------------- */
.graphic-metier {
	width: 100%;
	height: 100%;

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
  display: flex;
  align-items: center;

  pointer-events: none;
}
.graphic-metier {
	transition: width 500ms, height 500ms;
	transition-timing-function: cubic-bezier(0.364212423249, 0, 0.635787576751, 1), cubic-bezier(0.364212423249, 0, 0.635787576751, 1);
	width: 100%;
	height: 100%;
}
.graphic-metier.hide {
	width: 0;
	height: 0;
}
.graphic-metier .metier-container {
	transition: transform 1100ms;

	max-width: 64em;
	max-height: 48.4em;
}
.graphic-metier .floater {
	animation: float 6s cubic-bezier(0.364212423249, 0, 0.635787576751, 1) infinite;
}

.graphic-metier img {
	display: block;
	width: 100%;
	height: auto;


	transition: opacity 1200ms;
	opacity: 0;

	animation: floath 12s cubic-bezier(0.364212423249, 0, 0.635787576751, 1) infinite;
}
.graphic-metier img.show {
	opacity: 1;
}
.table.active .row:not(.active) .graphic-metier img,
.table.transit .graphic-metier img {
	transition-duration: 300ms;
	opacity: 0;
}




.graphic-metier svg {
	display: block;
	width: 100%;
	height: 100%;
	transition: opacity 2000ms;
	opacity: 1;
}
.table.active .graphic-metier svg {
	transition-duration: 300ms;
	opacity: 0;
}
.graphic-metier svg path {
	fill: black;
}

@keyframes float {
	0% {
		transform: translateY(0.2em);
	}
	50% {
		transform: translateY(-0.2em);
	}
	100% {
		transform: translateY(0.2em) ;
	}
}
@keyframes floath {
	0% {
		transform: translateX(0.5em);
	}
	50% {
		transform: translateX(-0.5em);
	}
	100% {
		transform: translateX(0.5em);
	}
}


.table .column:nth-child(1) .row:nth-child(1) .graphic-metier img {
	animation-duration: 7.12s;
}
.table .column:nth-child(1) .row:nth-child(2) .graphic-metier img {
	animation-duration: 6.04s;
}
.table .column:nth-child(2) .row:nth-child(1) .graphic-metier img {
	animation-duration: 7.1s;
}
.table .column:nth-child(2) .row:nth-child(2) .graphic-metier img {
	animation-duration: 6.43s;
}
.table .column:nth-child(3) .row:nth-child(1) .graphic-metier img {
	animation-duration: 5.66s;
}
.table .column:nth-child(3) .row:nth-child(2) .graphic-metier img {
	animation-duration: 6.78s;
}

@media (max-width: 899px) {
  .graphic-metier {
    display: none;
  }
}



/* Home Cursor
------------------------------------------------- */

.cursor {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	pointer-events: none;
}
.cursor .arrow {
	position: absolute;
	display: none;
}
.cursor .arrow svg {
	display: block;
	width: 5em;
	height: auto;
}
.cursor .arrow.left svg {
	transform: rotate(180deg);
}

body.wheeling-left,
body.wheeling-right {
	cursor: none;
}
body.wheeling-left .cursor .arrow.left,
body.wheeling-right .cursor .arrow.right {
	display: block;
}






/* Single
------------------------------------------------- */

.single {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;

	display: flex;

	transition: transform 400ms;
	transform: translateY(100%);

  --background-color: white;
  --front-color: white;
	--text-color: black;
}
.single-open .single {
	transform: translateY(0%);
}
.menu-open .single {
	transform: translateY(-100%);
}
.single .single-domain {
  position: absolute;
  width: 100%;
  height: 100%;
	display: flex;
}

@media (max-width: 899px) {
  .single .single-domain {
    flex-direction: column;
  }
}






/* Single Left column
------------------------------------- */

.single .left-column {
  width: 78em;
  display: flex;
  flex-direction: column;
	background-color: white;
  border-right: 1px solid black;
	position: relative;
}
.single .left-column .title {
  display: flex;
  align-items: center;
  padding: 1.5em 8.2em 2.5em 8.2em;
	position: relative;
	border-bottom: 1px solid black;
  margin: 0 0 4.8em;
}
.single .left-column .title h2 {
  margin: 0;
  font-family: 'GTFlexa-Exp';
  font-weight: 400;
  font-size: 4.3em;
  line-height: 1.08em;
  text-transform: uppercase;
}
.single .left-column .formations {
  flex-grow: 1;
  position: relative;
  overflow: auto;
	margin: 0 0 4.8em 3.1em;
	direction: rtl;
}
.single .left-column .formations::-webkit-scrollbar {
  width: 2.0em;
}
.single .left-column .formations::-webkit-scrollbar-thumb {
  border: 1px solid black;
}
.single .left-column .formations ul {
	padding: 0 4.1em 0 0;
	margin: 4.8em 0 4.8em 3.1em;
	list-style-type: none !important;
	direction: ltr;
}
.single .left-column .formations ul:first-child {
  margin-top: -0.5em;
}
.single .left-column .formations ul:last-child {
  margin-bottom: -0.5em;
}
.single .left-column .formations ul li {
  margin: 1.0em 0;
}
.single .left-column .formations ul li a {
  display: inline-block;
  font-family: 'GTFlexa';
  font-size: 2.6em;
  line-height: 1.2em;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  cursor: pointer;
}
.single .left-column .formations ul li a:hover{
	color: white;
}
.single .left-column .formations ul li.active a {
  border-color: black;
  border-radius: 1.2em;
  padding: 0.1em 0.5em;
  margin: -0.1em -0.5em;
}

@media (max-width: 899px) {
  .single .left-column {
    display: none;
  }
  .single .right-column {
    display: none !important;
  }

}

@media (min-width: 900px) {
	.single .left-column {
	  background-color: var(--background-color);
	}

}




/* Main column
------------------------------------------------ */





.single .main-column {
  background-color: white;
  position: relative;
  flex-grow: 1;
  display: flex;
}
.single .main-column .single-animation {
	position: absolute;
	width: 70em;
	top: 16em;
}

.single .main-column .single-formations {
  flex-grow: 1;
  display: flex;
}
.single .main-column .single-formation {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}



/* Single Header
------------------------------------------------- */

.single .single-header {
}
@media (min-width: 900px) {
  .single .single-header {
    display: none;
  }
}
@media (max-width: 899px) {
  .single .single-header {
    height: 42em;
    align-items: center;
    background-color: var(--background-color);
    display: flex;
    align-items: center;
    padding: 0 var(--mobile-margin);
    border-bottom: 1px solid black;
    flex-shrink: 0;
  }
  .single .single-header h2 {
    font-weight: inherit;
    font-family: 'GTFlexa';
    margin: 0;
    font-size: var(--mobile-font-size);
    line-height: var(--mobile-line-height);
  }
}






/* Main column Slideshow
------------------------------------------------ */

.single .main-column .slideshow {
  position: relative;
  flex-grow: 1;
}
.single .main-column .viewer {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.single .main-column .viewer .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
	/* pointer-events: none; */

	display: flex;
	flex-direction: column;
}
.single .main-column .viewer .slide:first-child {
  transform: translateX(0);
}
.single .main-column .viewer .slide .title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5em 8.2em 2.5em 8.2em;
	flex-shrink: 0;
}
.single .main-column .viewer .slide .title h3 {
  margin: 0;
  font-weight: 400;
  font-family: 'GTFlexa-Exp';
  font-size: 4.3em;
  line-height: 1.2em;
}
.single .main-column .viewer .slide .slide-body {
	flex-grow: 1;
	overflow: auto;
  padding-bottom: 4em;
}
.single .main-column .viewer p {
	text-align: left;
}

.single .main-column .viewer strong {
	display: inline-block;
	border-radius: 1.2em;
	padding: 0 0.75em 0.15em;
  margin: 0 0 -0.15em;
	background-color: var(--background-color);
	font-weight: normal;
}
.single .main-column .viewer a {
	color: var(--text-color);
}

@media (min-width: 900px) {
  .single .main-column {
    width: 101.7em;
    border-right: 1px solid black;
  }
  .single .main-column .viewer .slide.metiers .content {
    padding: 0 12.8em 0;
  }
  .single .main-column .viewer .slide .title .left-arrow,
  .single .main-column .viewer .slide .title .right-arrow {
    display: none;
  }
}

@media (max-width: 899px) {
  .single .main-column .single-animation {
    display: none;
  }
  .single .main-column .viewer .slide .title {
    height: 15.5em;
    border-bottom: 1px solid black;
    padding: 0 var(--mobile-margin);
    display: flex;
    flex-shrink: 0;
  }
  .single .main-column .viewer .slide .title .left-arrow,
  .single .main-column .viewer .slide .title .right-arrow {
    width: 20em;
    height: 12em;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .single .main-column .viewer .slide .title .left-arrow svg,
  .single .main-column .viewer .slide .title .right-arrow svg {
    display: block;
    width: 10em;
    height: auto;
  }
	.single .main-column .viewer .slide .title svg path {
    stroke-width: 0.6px;
  }
  .single .main-column .viewer .slide .title .left-arrow svg {
    transform: rotate(90deg);
  }
  .single .main-column .viewer .slide .title .right-arrow svg {
    transform: rotate(270deg);
  }

  .single .main-column .viewer .slide .title h3 {
    font-size: var(--mobile-font-size);
    line-height: var(--mobile-line-height);
    flex-grow: 1;
    text-align: center;
  }
}




/* Main column slide metiers
------------------------------------------------ */

.single .main-column .viewer .slide.metiers ul {
  text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;

  list-style-type: none !important;
	margin: 1em 0em;
}
.single .main-column .viewer .slide.metiers .content p,
.single .main-column .viewer .slide.metiers .content ul {
  font-family: 'GTFlexa';
  font-size: 2.7em;
  line-height: 1.2em;
  text-align: center;
}

.single .main-column .viewer .slide.metiers ul li {
  background-color: var(--background-color);
	border-radius: 1.2em;
  padding: 0 0.62em 0.15em;
	margin: 0.2em 0 0.05em;
}
.single .main-column .viewer .slide.metiers ul li::before {
	content: none;
}

@media (max-width: 899px) {
  .single .main-column .viewer .slide.metiers .content {
    padding: 0 var(--mobile-margin);
  }
  .single .main-column .viewer .slide.metiers .content p {
    font-size: var(--mobile-font-size);
    line-height: var(--mobile-line-height);
    margin: 2em 0;
  }
  .single .main-column .viewer .slide.metiers .content ul {
    font-size: var(--mobile-10);
    line-height: var(--mobile-line-height);
    margin: 2em 0;
  }
}




/* Main column slide formation
------------------------------------------------ */


.single .main-column .viewer .slide.formation .media video {
	display: block;
  width: 100%;
  height: auto;
}
.single .main-column .viewer .slide.formation .media img {
	display: block;
	width: 100%;
	height: auto;
}
.single .main-column .viewer .slide.formation .media.placeholder::after {
	content: "";
	display: block;
  width: 58.7em;
  height: 33em;
  border: 1px solid black;
}
.single .main-column .viewer .slide.formation .content p {
  margin: 0;
}
.single .main-column .viewer .slide.formation .content p,
.single .main-column .viewer .slide.formation .content ul {
  font-family: 'GTFlexa';
  font-size: 2.1em;
  line-height: 1.2em;
}
.single .main-column .viewer .slide.formation .place p {
  font-family: 'GTFlexa';
  font-size: 1.5em;
  line-height: 1.2em;
  border-radius: 1.2em;
  padding: 0.5em 1em;
  background-color: var(--background-color);
  margin: 1em 0 0;
}
@media (min-width: 900px) {
  .single .main-column .viewer .slide.formation .media {
    display: flex;
    justify-content: center;
    padding: 5em 0 0;
    overflow: hidden;
  }
  .single .main-column .viewer .slide.formation .media video {
    width: 58.7em;
    height: 33em;
  }
  .single .main-column .viewer .slide.formation .content {
    padding: 5em 10em 0;
    column-count: 2;
    column-gap: 4em;
    hyphens: auto;
  }
  .single .main-column .viewer .slide.formation .content p {
    text-indent: 2em;
  }
  .single .main-column .viewer .slide.formation .media img {
    min-width: 0;
    width: auto;
    height: 33em;
  }
  .single .main-column .viewer .slide.formation .place {
    display: flex;
    justify-content: flex-end;
    margin: 0 10em;
  }
  .single .main-column .viewer .slide.formation .place-content {
    width: 24em;
  }
  .single .main-column .viewer .slide.formation .place p {
    font-size: 1.5em;
    line-height: 1.2em;
    padding: 0.5em 1em;
    text-align: left;
    margin: 1em 0 0;
  }

}
@media (max-width: 899px) {
  .single .main-column .viewer .slide.formation .media {
    padding: 15em var(--mobile-margin);
  }
  .single .main-column .viewer .slide.formation .content {
    padding: 0 var(--mobile-margin) 10em;
  }
  .single .main-column .viewer .slide.formation .content p,
  .single .main-column .viewer .slide.formation .content ul {
    font-size: var(--mobile-font-size);
    line-height: var(--mobile-line-height);
  }
  .single .main-column .viewer .slide.formation .place {
    padding: 0 var(--mobile-margin) 15em;
  }
  .single .main-column .viewer .slide.formation .place p {
    font-size: var(--mobile-10);
    line-height: var(--mobile-line-height);
    padding: 1em;
  }

}


/* Main column slide access
------------------------------------------------ */

.single .main-column .viewer .slide.access {
	display: flex;
	flex-direction: column;
}
.single .main-column .viewer .slide.access p {
  margin-top: 0;
}
.single .main-column .viewer .slide.access p,
.single .main-column .viewer .slide.access ul li {
  font-family: 'GTFlexa';
  font-size: 2.1em;
  line-height: 1.2em;
}
.single .main-column .viewer .slide.access ul {
  list-style-type: none !important;
}

.single .main-column .viewer .slide.access .body .cfc {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex-shrink: 0;
}


.single .main-column .viewer ul {
  padding: 1.5em 2.5em;
	margin: 0;
	list-style-type: none !important;
}
.single .main-column ul li {
	text-indent: 0;
	margin: 0 0 0 1.5em;
	position: relative;
}


.single .main-column .viewer .content ul {
	padding: 0;
  margin: 1.5em 0;
}
.single .main-column .viewer .content ul li span {
  flex-grow: 1;
}
.single .main-column .viewer .content ul li::before,
.single .main-column .viewer .cfc ul li::before,
.single .main-column .viewer .long-list ul li::before {
  content: "—";
	flex-shrink: 0;
	width: 1.25em;
	display: block;
  position: absolute;
  left: -1.5em;
}
.single .main-column .viewer .slide.access .slide-body .cfc ul,
.single .main-column .viewer .slide.access .slide-body .long-list ul {
  border-radius: 1.2em;
	background-color: var(--background-color);
}

.single .main-column .viewer .slide.access .slide-body ul li span {
  flex-grow: 1;
}
.single .main-column .viewer .slide.access .slide-body ul li::before {
  content: "—";
  flex-grow: 0;
}

.single .main-column .viewer .slide.access .slide-body .long-list {
  border-radius: 1.2em;
  padding: 2em 1.0em;
  margin: 0 -1em 1.5em -1.0em;
	background-color: var(--background-color);
	display: flex;
	min-height: 0;
}
.single .main-column .viewer .slide.access .slide-body .long-list.hidden {
	display: none;
}
.single .main-column .viewer .slide.access .slide-body .long-list ul {
	margin: 0;
	border-radius: 0;
  padding: 0em 1em;
}
.single .main-column .viewer .slide.access .slide-body .long-list ul li:first-child {
	margin-top: 0;
}
.single .main-column .viewer .slide.access .slide-body .long-list ul li:last-child {
	margin-bottom: 0;
}
.single .main-column .viewer .slide.access .qrcode {
	display: none;
	justify-content: center;
}
.single .main-column .viewer .slide.access .qrcode img {
	display: block;
	width: 30em;
	height: 30em;
}

@media (min-width: 900px) {
  .single .main-column .viewer .slide.access .slide-body {
    padding: 6em 8em 4em;
    min-height: 0;
  }
  .single .main-column .viewer .slide.access .slide-body .access-columns {
    display: flex;
  }
  .single .main-column .viewer .slide.access .slide-body .access-column {
    flex: 0 0 50%;
    padding: 0 2em;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
	.single .main-column .viewer .slide.access ul {
	  margin: 0 0 1.5em;
	}
  .single .main-column .viewer .slide.access .slide-body .cfc ul,
  .single .main-column .viewer .slide.access .slide-body .long-list ul {
  }
  .single .main-column .viewer .slide.access .slide-body .long-list {
    /* max-height: 50em; */
  }
  .single .main-column .viewer .slide.access .slide-body ul::-webkit-scrollbar {
    width: 2em;
  }
  .single .main-column .viewer .slide.access .slide-body ul::-webkit-scrollbar-thumb {
    border: 1px solid black;

  }
  .single .main-column .viewer .slide.access .slide-body .cfc ul li,
  .single .main-column .viewer .slide.access .slide-body .long-list ul li {
    margin: 0.35em 0 0.35em 1.5em;
  }
}
@media (max-width: 899px) {
  .single .main-column .viewer .slide.access .slide-body {
    padding: 15em var(--mobile-margin);
  }
  .single .main-column .viewer .slide.access p {
    font-size: var(--mobile-font-size);
    line-height: var(--mobile-line-height);
  }
  .single .main-column .viewer .slide.access ul li {
    font-size: var(--mobile-10);
    line-height: var(--mobile-line-height);
  }
  .single .main-column .viewer .slide.access .slide-body .cfc ul,
  .single .main-column .viewer .slide.access .slide-body .long-list ul {
    padding: 7em 9em;
    margin: 0 0 9em;
  }
  .single .main-column .viewer .slide.access .slide-body .cfc ul,
  .single .main-column .viewer .slide.access .slide-body .long-list ul {
    border-radius: 10.8em;
  }
  .single .main-column .viewer .slide.access .slide-body .long-list {
    border-radius: 10.8em;
  }
}





/* Main column navigation
------------------------------------------------ */

.single .main-column .left-navigation,
.single .main-column .right-navigation {
  position: absolute;
  top: 0;
  width: 9em;
  bottom: 0;
  display: flex;
  align-items: center;

  opacity: 0;
  transition: opacity 300ms;


}
.single .main-column .left-navigation.active,
.single .main-column .right-navigation.active {
  opacity: 1;
	cursor: pointer;
}
.single .main-column .left-navigation {
  left: 0;
}
.single .main-column .right-navigation {
  right: 0;
}
.single .main-column .left-navigation .background,
.single .main-column .right-navigation .background {
  position: absolute;
  top: 0;
  width: 50%;
  bottom: 0;
  height: 100%;
}
.single .main-column .left-navigation .background {
  left: 0;
}
.single .main-column .right-navigation .background {
  right: 0;
}
.single .main-column .left-navigation .arrow,
.single .main-column .right-navigation .arrow {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
}
.single .main-column .left-navigation .arrow {
	animation: jiggle-left 1400ms infinite ease-in-out;
}
.single .main-column .right-navigation .arrow {
	animation: jiggle-right 1400ms infinite ease-in-out;
}
.single .main-column .right-navigation .arrow svg {
	transform: rotate(-90deg);
	width: 4em;
	height: auto;
}
.single .main-column .left-navigation .arrow svg {
	transform: rotate(90deg);
	width: 4em;
	height: auto;
}
.single .main-column .left-navigation .arrow svg path,
.single .main-column .right-navigation .arrow svg path {
	stroke-width: 0.5px;
}

.single .main-column .arrow img {
	width: 3.0em;
	height: auto;
}
.single .main-column .right-navigation .arrow:hover {
  /* animation-play-state: paused; */
}
@keyframes jiggle-right {
	50% {
	 transform: translateX(0.3em);
	}
}
@keyframes jiggle-left {
	50% {
	 transform: translateX(-0.3em);
	}
}
@media (max-width: 899px) {
  .single .main-column .left-navigation,
  .single .main-column .right-navigation {
    display: none;
  }
}



/* Main column pagination
------------------------------------------------ */

.single .main-column ul.pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  margin: 0;
  padding: 0;
  list-style-type: none;

  display: flex;
  justify-content: center;

	border-top: 1px solid black
}
.single .main-column ul.pagination li {
  width: 33.333%;
  height: 2em;
	margin: 0;
	background-color: white;
}
.single .main-column ul.pagination li:not(:last-child) {
  border-right: 1px solid black;
}
.single .main-column ul.pagination li.active {
  background-color: var(--background-color);
}

@media (max-width: 899px) {
  .single .main-column ul.pagination li {
    height: 5.7375em;
  }
}


/* Main column Home button
------------------------------------------------ */

.home-button {
	position: absolute;
	bottom: 10em;
	right: 10em;
	background-color: black;
	width: 40em;
	height: 40em;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity 500ms;
}
.home-button .text {
	color: white;
	font-size: var(--mobile-10);
	line-height: var(--mobile-line-height);
  font-family: 'GTFlexa';
	margin: 0.25em 0;
}
.home-button .arrow svg {
	display: block;
	width: 17.5em;
	height: auto;
}
.home-button .arrow svg path {
	stroke: white;
	stroke-width: 1px;
}
body.show-button .home-button {
	opacity: 1;
}
@media (min-width: 900px) {
	.home-button {
		font-size: 0.4em;
	}
}





/* Right Column
------------------------------------------------- */

.single .right-column {
  width: 12.3em;
  background-color: white;
  display: flex;
  align-items: flex-end;
}
.single .right-column img {
  display: block;
}
.single .right-column svg {
  display: block;
	width: 100%;
	height: auto;
}
.single .right-column .logo {
	position: relative;
	overflow: hidden;

	animation: jiggle-bottom 1400ms infinite ease-in-out;
}
.single .right-column .logo svg {
	transform: translateY(0.3em);
}
.single .right-column .logo .text {
	display: block;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0.4em;
	text-transform: uppercase;
	font-family: 'GT-Flexa-X-Exp';
	font-size: 2.1em;
	line-height: 0.85em;
	text-align: center;

}


@keyframes jiggle-bottom {
	50% {
	 transform: translateY(-0.25em);
	}
}



/* Totem
------------------------------------------------- */

#app {

}
body.totem #app {
	width: 108em;
	height: 192em;
}


body.totem .totem {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}



/* Totem screensaver
------------------------------------------------- */

body.totem .screensaver {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

body.totem .screensaver .shape {
	position: absolute;
	width: 100%;
	height: 100%;
}
body.totem .screensaver .shape .background {
	position: absolute;
	width: 100%;
	height: 100%;
}
body.totem .screensaver .shape .svg {
	position: absolute;
	width: 100%;
	height: 100%;
  padding: 5em;
}
body.totem .screensaver .shape .svg svg {
	display: block;
	width: 100%;
	height: 100%;
}

body.totem .screensaver .text {
	position: absolute;
	width: 100%;
	height: 50%;
	padding: 15.3347em;
	display: flex;
	align-items: center;
	justify-content: center;
}
body.totem .screensaver .text p {
	flex-grow: 1;
	/* font-size: 9.6389em; */
	font-size: 7.5em;
	letter-spacing: -0.01em;
	line-height: 1.2em;
	text-align: center;
	margin: 0;
}
body.totem .screensaver .text.text1 {
	transform: translateY(200%);
}
body.totem .screensaver .text.text2 {
	transform: translateY(-100%);
}
body.totem .screensaver .text.text3 {
	transform: translateY(200%);
}



body.totem .screensaver .next {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 15.3347em;

	transform: translateY(0);
}
body.totem .screensaver .next img {
	transform: translateX(-2em);
	animation: jiggleH 1400ms infinite ease-in-out;
}

body.totem .screensaver .next p {
	flex-grow: 1;
	/* font-size: 9.6389em; */
	font-size: 7.5em;
	letter-spacing: 0;
	line-height: 1.2em;
	text-align: center;
	margin: 0;
}
body.totem .screensaver .next .picto {
	flex-grow: 1;
}
body.totem .screensaver .next img {
	width: 77.3927em;
}


body.totem .screensaver .shape,
body.totem .screensaver .text,
body.totem .screensaver .next {
	transition: transform 500ms;
}



/* Totem details
------------------------------------------------- */

body.totem .detail {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;

	transform: translateX(100%);
}

body.totem .detail .cfc-container {
	width: 100%;
	height: 100%;
	position: relative;
}
body.totem .detail .cfc-container .cfc {
	width: 100%;
	height: 100%;
	position: absolute;
	border-right: 1px solid black;
  box-sizing: content-box;
	user-select: none;
	background-color: white;
}
body.totem .detail .cfc-container .cfc:not(:first-child) {
	transform: translateX(100%);
}

body.totem .detail .cfc {
	display: flex;
	flex-direction: column;
}
body.totem .detail .cfc .cfc-header {
	height: 40em;
	border-bottom: 1px solid black;
	position: relative;
	display: flex;
  align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
body.totem .detail .cfc .cfc-header .title {
	padding: 4em;
	text-align: center;
	position: relative;
	z-index: 2;
}
body.totem .detail .cfc .cfc-header .title h2 {
	font-weight: inherit;
	/* font-size: 7.6518em; */
	font-size: 6.2em;
	line-height: 1.0em;
	margin: 0 0 0.2em;
}
body.totem .detail .cfc .cfc-header .title .plus {
	font-size: 3.5em;
	line-height: 1.2em;
	display: inline-block;
	border-width: 1px;
	border-style: solid;
	border-radius: 3em;
	padding: 0.2em 1em;
	margin: 0.2em 0 0;
}
body.totem .detail .cfc .cfc-header canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


body.totem .detail .cfc .cfc-body {
	flex-grow: 1;
	display: flex;
	position: relative;
	padding: 4em 4em 0em 4em;
}

body.totem .detail .cfc .cfc-body-content {
  height: 140em;
	flex-grow: 1;
	text-align: center;
	padding: 5em 0 0em 0;
	/* overflow: auto; */
	/* margin: 4em; */
	direction: rtl;

	display: flex;
	flex-direction: column;
}
body.totem .detail .cfc .cfc-body ul {
	list-style-type: none !important;
	padding: 0;
	margin: -4em 0;
	direction: ltr;
}
body.totem .detail .cfc .cfc-body ul li {
	margin: 8em 0;
}
body.totem .detail .cfc .cfc-body ul li ul {
	margin: 0 0 10em;
	padding: 0 2em;
}
body.totem .detail .cfc .cfc-body h3,
body.totem .detail .cfc .cfc-body ul li ul li {
	font-weight: inherit;
	font-family: 'GTFlexa';
  font-size: 5.25em;
	line-height: 1.2em;
	margin: 0;

}
body.totem .detail .cfc .cfc-body h3 {
	margin: 0;
}
body.totem .detail .cfc .cfc-footer {
	height: 4em;
	flex-shrink: 0;
}

body.totem .detail .cfc .cfc-body ul li.formation {
	font-size: 0.875em;
}

body.totem .detail .h-scroll {
	height: 4em;
	position: absolute;
	bottom: 0;
	left: 0;
}
body.totem .detail .h-scroll:not(.active) {
	transition: left 200ms;
}

.cfc-body-content::-webkit-scrollbar {
  background-color: white;
  width: 4em;
  direction: rtl;
}
.cfc-body-content::-webkit-scrollbar-thumb {
  background-color: var(--totem-bg-color);
}

body.totem .detail .cfc .cfc-body-content .picto {
	width: 100%;
	min-height: 60em;
	position: relative;
	overflow: hidden;

	flex-grow: 1;
  flex-shrink: 1;
}
body.totem .detail .cfc .cfc-body-content .picto svg {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: auto !important;
}





/* Exceptions
------------------------------------------------- */


#domain-5-formation-49 .place-content p {
	transform: translateY(-3em);
}


/* ---------------------------------------------- */