/* 
Vert = #00796B;
VertHover = #004D44;
black = #333;
gray = #E1E1E1;
 */
a {
	color: #005cff;
}

a:hover,
a:focus {
	color: #0000ff;
}

body {
	font-family: "Muli", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: Montserrat, sans-serif;
}

img {
	width: 100%;
	height: auto;
}

.headerstyle {
	padding-left: 0.6rem;
	padding-top: 1.4rem;
	padding-bottom: 1.4rem;
}

.headerstyle .aide.fa {
	color: #00796b;
}

.headerstyle .aide.fa:hover,
.headerstyle .aide.fa:focus {
	color: #004d44;
}

.TitreCours {
	color: #00796b;
	font-size: 1.6rem;
	padding-bottom: 0.3rem;
}

.TitreCours a {
	color: #00796b;
}

.QuestionCours {
	font-size: 1.2rem;
}

.headerstyle .QuestionCours {
	display: none;
}

.headerstyle .TitreCours {
	font-weight: bold;
}

.LittleTitle {
	font-size: 1.1rem;
	text-transform: uppercase;
	color: #00796b;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: bold;
}

.QuestionCours {
	font-weight: normal;
}

.TrameBanner {
	padding: 15px;
}

.col-12.homepage_break {
	padding-right: 0;
}

.ButtonTitle {
	font-size: 1.1rem !important;
	color: #ffffff !important;
	font-weight: 500 !important;
}

.BoxShadow {
	background-color: #ffffff;
	padding: 1rem;
}

.shadow {
	-webkit-box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.14);
	-moz-box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.14);
	box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.14);
}

/* ALL */
.NoMargin {
	margin-left: -15px;
	margin-right: -15px;
}

.blackbackground {
	background-color: #333;
}

.greenbackground {
	background-color: #00796b;
}

.graybackground {
	background-color: #e1e1e1;
}

.lightgraybackground {
	background-color: #f6f6f6;
}

.whitebackground {
	background-color: #ffffff;
}

.ClearBoth {
	clear: both;
}

.copyright {
	text-align: center;
	font-size: 0.75rem;
}

button {
	cursor: pointer;
}

.btn,
.btn:active,
.btn:focus {
	cursor: pointer;
	padding: 0.6rem 0.75rem;
	border: none;
	border-radius: 0rem;
	font-weight: 700;
	letter-spacing: 0.06rem;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 0.75rem;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.btn span {
	font-size: 0.75rem;
}

.btnNoir {
	background-color: #333;
	color: #ffffff;
}

.btnVert {
	background-color: #00796b;
	color: #ffffff;
}

.btnNoir:hover,
.btnNoir:focus {
	background-color: #00796b;
	text-decoration: none;
	color: #ffffff;
}

.btnVert:hover,
.btnVert:focus {
	background-color: #333;
	text-decoration: none;
	color: #ffffff;
}

.btnAccessibiliteN2 {
	font-size: 20px;
	color: #fff;
	line-height: 20px;
	margin-bottom: 15px;
}

.btnAccessibiliteN2:hover,
.btnAccessibiliteN2:focus {
	color: #45a095;
}

.text-version-accessible {
	margin-left: 5px;
}

.btnAccessibiliteBAO {
	font-size: 20px;
	color: #45a095;
	line-height: 20px;
	margin-bottom: 15px;
}

.btnAccessibiliteBAO:hover,
.btnAccessibiliteBAO:focus {
	color: #00796b;
}

nav > a:hover > .fa.aide,
nav > a:focus > .fa.aide {
	color: #ffffff !important;
}

.MbOffset30 {
	margin-bottom: -1.875rem;
}

.MbOffset80 {
	margin-bottom: -4.375rem;
}

.MbOffset15 {
	margin-bottom: -15rem;
}

.SpacerMbOffset9 {
	padding-top: 9rem;
}

.SpacerMbOffset30 {
	padding-top: 1.875rem;
}

.pb-60 {
	padding-bottom: 50px;
}

.zindex10 {
	z-index: 10;
}

.WhiteColorFont {
	color: #ffffff;
}

.height1000 {
	height: 1000px;
}

.mt--50 {
	margin-top: -2rem;
}

.hide {
	font-size: 0.4rem;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	visibility: hidden;
}

.test li:hover .hide,
.test li a:focus .hide {
	font-size: 1rem;
	visibility: visible;
}

.dispalyFlexMiddle {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* reponsive */
.embed-responsive-N3::before {
	padding-top: 32%;
}

.embed-responsive-N2::before {
	padding-top: 58%;
}

.embed-responsive-SharePoint::before {
	padding-top: 77%;
}

.embed-responsive-Portfolio::before {
	padding-top: 104%;
}

.modal-lg {
	max-width: 90%;
}

/* NavBar */
.MainNavBar .fa-home {
	font-size: 1.4rem;
}

.MainNavBar button {
	background-color: #333;
}

.MainNavBar li > a {
	height: 100%;
}

.MainNavBar button span {
	color: #ffffff;
}

.MainNavBar {
	border-bottom: 0.625rem solid #333;
	/*border-top:1px solid #333;*/
	padding: 0;
}

.MainNavBar .nav-item a {
	color: #000000;
	text-transform: uppercase;
}

.MainNavBar .nav-item:hover,
.MainNavBar .nav-item a:focus {
	background-color: #00796b;
}

.MainNavBar .nav-item:hover a,
.MainNavBar .nav-item a:focus {
	color: #ffffff;
}

.MainNavBar .active {
	background-color: #333;
	color: #ffffff !important;
}

.trameBody .MainNavBar .active {
	background-color: inherit;
}

.MainNavBar button {
	margin-left: 0.8rem;
}

.MainNavBar .MenuAideFA .fa {
	color: #ffffff;
}

.MainNavBar .MenuAideFA:hover .fa,
.MainNavBar .MenuAideFA:focus .fa {
	color: #004d44;
}

.MainNavBar .nav-item {
	border-left: 1px solid #e8e8e8;
	font-family: "Montserrat:300,400,700,900", sans-serif;
}

.MainNavBar .nav-item:first-child {
	border: 0;
}

.MainNavBar .active,
.trameBody .nav-item {
	margin: 0;
	border: 0;
}

.MotClefTrameContent img {
	display: none;
}

@media (min-width: 1500px) {
	.Accueil .back .content {
		padding-top: 50px;
	}
}

@media (max-width: 768px) {
	/*md*/

	.MainNavBar {
		background-color: #333 !important;
		border: none;
	}

	.MainNavBar .nav-item a {
		color: #ffffff !important;
	}

	.MainNavBar .nav-item a:hover,
	.MainNavBar .nav-item a:focus,
	.MainNavBar .nav-item a:active {
		background-color: #00796b;
	}

	.MainNavBar .active {
		background-color: #00796b;
	}

	.MainNavBar ul {
		padding-bottom: 20px;
	}
}

/* Accueil */
.blacktriangle {
	width: 0;
	height: 0;
	border-left: 80px solid transparent;
	border-right: 80px solid transparent;
	border-top: 45px solid #333;
}

.graytriangle {
	width: 0;
	height: 0;
	border-left: 80px solid transparent;
	border-right: 80px solid transparent;
	border-top: 45px solid #e1e1e1;
}

li .outil_hex {
	font-size: 22px;
	font-family: Montserrat, sans-serif;
	font-weight: normal;
}

.flipitIn .fa:before {
	margin-left: 5px;
}

.flipit {
	opacity: 0;
}

.Accueil .fa {
	margin-left: 3px;
	font-size: 2.5rem !important;
}

.copyright {
	margin-top: 15px;
}

.MetroUI432 .back .CenterText {
	font-size: 1.2rem;
}

@media (min-width: 768px) and (max-width: 1200px) {
	li .outil_hex {
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	li .outil_hex {
		font-size: 14px;
	}

	.Accueil .fa {
		font-size: 1.5rem !important;
	}

	li .outil_hex {
		font-size: 12px;
	}
}

/* Module */
.ModuleTitleBox {
	padding-top: 2rem;
	padding-bottom: 1rem;
	color: #ffffff;
	z-index: 2;
	position: relative !important;
}

.ModuleTitleBox h3 {
	font-size: 1.4rem;
}

.TitreTache {
	font-size: 1.5rem;
	text-transform: uppercase;
	margin-top: 0.5rem;
}

.boiteOutils_gallerie {
	float: left;
}

@media (min-width: 1200px) {
	.pl-2 .flipit .back .content .CenterText {
		font-size: 1.4rem;
	}

	.pl-2 .flipit .back .content {
		top: 41%;
	}
}

p.accueil_aide,
#btnVideoDuCours {
	float: right;
	clear: both;
}

/* trame */

.iconTrame {
	font-size: 2rem;
	margin-bottom: 0.7rem;
}

.ContenuTrameCours {
	background-color: #ffffff;
	padding: 0 0 1rem 0;
}

.QuestionTrame {
	font-size: 1.2rem;
	font-weight: bold;
}

.ContenuTrameCours .IconePiste {
	background-color: #00796b;
	padding: 2rem;
	text-align: center;
	cursor: pointer;
}

.ContenuTrameCours .IconePiste img {
	width: 55px;
	margin-left: auto;
	margin-right: auto;
}

.ContenuTrameCours .ContentPiste {
	padding: 0.48rem 1rem;
}

.ContenuTrameCours .PortfolioPiste {
	padding-right: 0px !important;
	padding-left: 0px !important;
}

.ContenuTrameCours .PortfolioPiste img {
	width: 35px;
	margin-left: auto;
	margin-right: auto;
}

.SuggestionTrameContent,
.MotClefTrameContent {
	padding: 0.6rem 1rem;
	/*border: 1px solid #333;*/
}

.SuggestionTrameContent li {
	margin-top: 10px;
}

.MotClefTrameContent > img {
	width: 100% !important;
	height: auto;
}

.SuggestionTrame img,
.MotClefTrame img {
	width: auto;
}

.PictoRepondrePortfolio {
	height: 1rem !important;
	width: 1rem !important;
	margin-right: 0.4rem;
}

.ButtonPiste img {
	width: 20px;
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
}

#MenuTrameTop {
	margin-bottom: 75px !important;
}

.trameBody #MenuTrameTop {
	margin-bottom: 25px !important;
}

#MenuTrameBottom li {
	margin-top: 0.25rem;
}

.hexa {
	height: 150px;
}

.hexa .ModuleX span .fa {
	left: 50%;
	top: 25%;
}

.hexa .back .ModuleX span .fa {
	font-size: 2rem;
}

.hexa .ModuleX span .fa:before {
	margin-left: 0;
}

.flipit .back .content {
	position: absolute;
	left: 0;
	top: 35%;
	text-align: center;
	width: 100%;
	padding: 1rem;
}

.active .content {
	pointer-events: none;
}

.trameBody .flipit .back .content {
	top: 35%;
}

.trameBody .flipit .back .CenterText {
	font-weight: bold;
}

.flipit .back .CenterText {
	font-size: 1rem;
}

.trameBody .MainNavBar {
	background: rgb(39, 50, 52);
	border: none;
}

.trameBody .MainNavBar .nav-item a {
	color: white;
}

.retourModule {
	font-family: "Montserrat", sans-serif;
}

.retourModule .fa {
	margin-right: 5px;
}

.QuestionTrame,
.trameImg {
	float: left;
}

.QuestionTrame {
	color: #118575;
}

.PisteSourcesTexte img {
	width: 100%;
}

.SuggestionTrame .col-12 {
	padding-left: 7px !important;
	padding-right: 7px !important;
	float: left;
	margin-top: 15px;
}

.SuggestionTrame p {
	color: black;
	text-align: center;
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
	min-height: 90px;
}

.SuggestionTrame .btnNoir {
	margin-right: 15px;
	pointer-events: none;
	margin-top: -50px;
}

.SuggestionTrame .lightgraybackground {
	display: block;
	padding-bottom: 55px !important;
}

.trameBody .LittleTitle,
.trameBody .QuestionTrame {
	padding: 15px 0 15px 0;
}

.trameBody .nav-item:last-child {
	position: absolute;
	right: 0;
	padding: 0 15px 0 15px;
}

@media (max-width: 1200px) {
	.trameBody #MenuTrameTop {
		margin-bottom: 50px !important;
	}
}

@media (max-width: 767px) {
	.trameBody #MenuTrameTop {
		margin-bottom: 0px !important;
	}
}

@media (max-width: 767px) {
	.menutrame .fa-plus-circle,
	.menutrame .fa-minus-circle {
		position: absolute;
		right: 0.8rem;
		top: 1.4rem;
	}

	.menutrame .fa-plus-circle {
		display: block;
	}

	.menutrame .fa-minus-circle {
		display: none;
	}

	.menutrame .active .fa-minus-circle {
		display: block;
	}

	.menutrame .active .fa-plus-circle {
		display: none;
	}

	.ContentPiste {
		/*border: 1px solid #333;*/
	}

	#MenuTrameTop {
		margin-bottom: 0 !important;
	}

	.hexa .back .ModuleX span .fa,
	.hexa .front .ModuleX span .fa {
		font-size: 1.4rem;
	}

	.picto_title {
		display: none;
	}

	.trameBody .col-12 hr {
		display: none;
	}

	.TrameBanner {
		padding-left: 0 !important;
	}

	.trameBody .active img {
		display: none;
	}

	.trameBody .active .back {
		visibility: visible !important;
		transform: rotate(0deg) scaleX(-1) !important;
	}

	.trameBody .nav-container-col {
		margin-top: 0 !important;
	}

	.trameBody .flipit .active .back .content {
		top: -9%;
	}

	.homepage_break {
		display: none;
	}

	.row.PisteWrapper {
		margin-top: 5px;
	}

	.homepage_break_container {
		display: none;
	}

	figure#video1-container {
		margin: 0;
	}

	.active .fa {
		display: none !important;
	}

	.active .CenterText {
		font-weight: bold;
	}

	.trameBody .navbar .collapse {
		display: block !important;
	}

	.trameBody .flipit .BlackTile img {
		display: none;
	}

	.trameBody .flipit .BlackTile {
		background: #333;
	}

	.trameBody .flipit .BlackTile .front {
		display: none;
	}

	.trameBody .flipit .BlackTile .back {
		visibility: visible !important;
		transform: rotate(0deg) scaleX(-1) !important;
		background: #333;
	}

	.trameBody .flipit .BlackTile .back .content {
		top: -12%;
	}

	.piste_titre_container {
		display: none;
	}

	.trameBody .navbar .navbar-toggler {
		display: none;
	}

	.trameBody .MenuAideFA {
		position: absolute;
		right: 0;
		padding: 8px 15px 8px 15px;
	}

	.trameBody .MenuAideFA:hover {
		background: #0e796b;
	}

	.trameBody #Conclusion {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.trameBody .retourModule {
		text-align: left;
		padding-left: 15px;
		max-width: 75%;
	}

	.trameBody .navbar-nav {
		padding-bottom: 0;
	}
}

@media (min-width: 768px) {
	.menutrame .fa-plus-circle,
	.menutrame .fa-minus-circle {
		display: none;
	}

	.menutrame .active {
		background-color: #008575 !important;
	}

	/*.PisteWrapper{
		border: 1px solid #333;
	}*/
	.row.PisteWrapper {
		margin-top: 15px;
	}

	.trameBody .retourModule {
		max-width: 30%;
	}

	.hidden-md-up {
		display: none;
	}
}

.fixit .hex2 {
	background-color: #333;
}

.fixit .CenterText {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	width: 100%;
	padding: 1rem;
}

.fixit .CenterText p {
	margin: 0;
}

.fixit .middle {
	font-size: 2rem;
	font-size: 1.2rem;
	text-transform: uppercase;
}

.flipit .back .content {
	font-size: 0.8rem;
}

.Accueil .blackTile .back .content {
	padding-top: 0;
}

/* tuile flip */
.fixit {
	transform: translateZ(0);
}

.flipit,
.fixit:not(.TuileDeco) {
	cursor: pointer;
}

.fixit .hex2 {
	background-color: #00796b;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.fixit:hover .hex2,
.fixit .hex2 a:focus {
	background-color: #333;
}

.fixit .hex2.BlackTile {
	background-color: #333;
}

.fixit:hover .hex2.BlackTile,
.fixit .hex2.BlackTile a:focus {
	background-color: #00796b;
}

.fixit:hover .hex2.BlackTile.lightgreen,
.fixit .hex2.BlackTile.lightgreen a:focus {
	background-color: #008575;
}

.MetroUI * {
	outline: none;
	outline-offset: none;
	outline-width: none;
}

.MetroUI {
	width: 100%;
	padding: 0;
}

.MetroUI.Accueil {
	padding-left: 1.8%;
}

.MetroUI li {
	margin: 0 0.5%;
	height: 172px;
	list-style: none;
	display: inline-block;
}

.flipit .flipitIn {
	transform: rotateY(-180deg);
	transition: visibility 0.5s, transform 0.5s;
}

.hexa,
.hexa div:not(.front) {
	overflow: hidden;
	float: left;
}

.flipitIn,
.front,
.middle,
.back {
	width: 100%;
	height: 100%;
}

@media (min-width: 768px) {
	.hexa,
	.hex1,
	.hex2 {
		position: fixed;
		width: 116.2%;
		margin-left: -8%;
		height: 100%;
	}

	.hexa {
		transform: rotate(90deg);
	}

	.hex1 {
		transform: rotate(-60deg);
	}

	.hex2 {
		transform: rotate(-60deg);
	}

	.front,
	.back,
	.hex2 > img {
		transform: rotate(30deg);
	}

	.front,
	.back,
	.hex2 > img {
		position: absolute;
		top: -8%;
		left: 18%;
		width: 64% !important;
		height: 116% !important;
	}

	.trameBody .hex2 img {
		position: absolute;
		top: -10%;
		left: -1%;
		width: 100% !important;
		height: 120% !important;
	}
}

@media (max-width: 767px) {
	.hexa,
	.hex1,
	.hex2 {
		width: 100%;
		height: 100%;
	}

	.front,
	.back,
	.hex2 > img {
		position: absolute;
		width: 100% !important;
		height: 100% !important;
	}
}

.hexa .middle {
	text-align: center;
	color: #ffffff;
}

.hexa .ModuleX img {
	margin-top: -36%;
}

.hexa .ModuleX span {
	position: absolute;
	top: 18%;
	left: 50%;
	transform: translateX(-50%);
}

.hexa .ModuleX {
	position: absolute;
	left: 0;
	padding-top: 15px;
	width: 100%;
	height: 30%;
	font-size: 1.3rem;
}

.hexa .content {
	position: absolute;
	left: 0;
	top: 25%;
	width: 100%;
	font-size: 0.7rem;
	height: 57% !important;
}

.fixit .hexa .content {
	top: 20%;
}

.hexa .content > div {
	text-align: center;
	width: 100%;
}

.flipit .content {
	padding: 0.7rem;
}

.content a.btn:not(.btnVert) {
	position: absolute !important;
	bottom: 19%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.flipit .back,
.TuileDeco .back {
	background-color: rgba(0, 111, 97, 0.85);
}

.flipit .front {
	visibility: hidden;
}

.flipit .front .middle {
	transform: rotateY(180deg);
}

.flipit .Flip {
	transform: rotateY(0deg);
}

.front .fa {
	font-size: 2rem;
}

.front .hr {
	margin: 1rem auto;
	clear: both;
	display: block;
	height: 1px;
	background-color: #ffffff;
	width: 20%;
	height: 2px;
}

@media (max-width: 767px) {
	.MetroUI434 li,
	.MetroUI432 li,
	.MetroUI333 li,
	.MetroUI222 li,
	.MetroUI323 li {
		width: 47.3%;
	}

	.menutrame li {
		display: block;
		margin-top: 0.25rem;
		width: 100%;
		margin-left: 0;
		height: 3rem !important;
	}

	.menutrame {
		text-align: left !important;
	}

	.menutrame li .CenterText {
		font-size: 1.1rem !important;
	}

	.hexa .ModuleX {
		padding: 4%;
		text-align: left;
		min-width: 2.5rem;
		min-height: 2.5rem;
		max-width: 3.5rem;
		max-height: 3.5rem;
		width: 25%;
		height: 25%;
		background-color: #333;
	}

	.hexa .ModuleX img {
		display: none;
	}

	.NoBg {
		background-color: transparent !important;
	}

	.ModuleTitleBox {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.QuestionTrame {
		padding-left: 15px !important;
		padding-right: 15px !important;
		font-weight: bold;
	}
}

@media (min-width: 768px) {
	.MetroUI434 li {
		width: 23.4%;
	}

	.MetroUI434 li:nth-child(n + 5) {
		margin-top: -2.6%;
	}

	.MetroUI434 li:nth-child(5),
	.MetroUI434 li:nth-child(8) {
		clear: both;
	}

	.MetroUI434 li:nth-child(5) {
		margin-left: 12.75%;
	}

	.MetroUI432 li {
		width: 23.5%;
	}

	.MetroUI432 li:nth-child(n + 5) {
		margin-top: -2.4%;
	}

	.MetroUI432 li:nth-child(5),
	.MetroUI432 li:nth-child(8) {
		clear: both;
	}

	.MetroUI432 li:nth-child(5) {
		margin-left: 13%;
	}

	.MetroUI432 li:nth-child(8) {
		margin-left: 25.5%;
	}

	/* nouveau css pour catalogue tfo */
	.MetroUI323 li {
		width: 31.43%;
	}
	.MetroUI323 li:nth-child(n + 2) {
		margin-top: -3.5%;
	}
	.MetroUI323 li:nth-child(5n-1) {
		margin-left: 17%;
	}

	.MetroUI333 li {
		width: 27.57%;
	}

	.MetroUI333 li:nth-child(n + 4) {
		margin-top: -2.7%;
	}

	.MetroUI333 li:nth-child(3n + 4) {
		clear: both;
	}

	.MetroUI333 li:nth-child(6n + 4) {
		margin-left: 14.6%;
	}

	.MetroUI222 li {
		width: 39%;
	}

	.MetroUI222 li:nth-child(n + 3) {
		margin-top: -4.5%;
	}

	.MetroUI222 li:nth-child(2n + 3) {
		clear: both;
	}

	.MetroUI222 li:nth-child(4n + 3) {
		margin-left: 20.5%;
	}
}

.ForceShow {
	display: block !important;
}

@media (max-width: 1024px) {
	.Accueil .back .content {
		padding-top: 25px;
	}

	.Accueil .blackTile .back .content {
		padding-top: 0;
	}
}

@media (max-width: 1024px) {
	.Accueil .back .content {
		padding-top: 15px;
	}

	.Accueil .blackTile .back .content {
		padding-top: 0;
	}
}

@media (max-width: 767px) {
	.Accueil .back .content {
		padding-top: 50px;
	}

	.Accueil .blackTile .back .content {
		padding-top: 0;
	}

	.Accueil .back .content {
		padding-top: 25px;
	}
}

@media (max-width: 480px) {
	.Accueil .back .content {
		padding-top: 5px;
	}

	.Accueil .blackTile .back .content {
		padding-top: 0;
	}
}

.trameBody .hexa {
	max-height: 200px;
}

.trameBody .hexa .ModuleX {
	height: 40%;
}

.trameBody .flipit .back .content {
	position: absolute;
	left: 12%;
	top: 30%;
	text-align: center;
	width: 75%;
	padding: 1rem;
}

.trameBody .active .front {
	visibility: hidden !important;
}

.trameBody .active .back {
	visibility: visible !important;
	transform: rotate(30deg) scaleX(-1);
}

.hexa .back .ModuleX span .fa,
.hexa .front .ModuleX span .fa {
	font-size: 2.5rem;
}

@media (max-width: 400px) {
	.Accueil .back .CenterText {
		font-size: 0.9rem;
	}
}

@media (max-width: 1200px) {
	.hexa .back .ModuleX span .fa,
	.hexa .front .ModuleX span .fa {
		font-size: 1.8rem;
	}
}

@media (max-width: 767px) {
	.hexa .back .ModuleX span .fa,
	.hexa .front .ModuleX span .fa {
		font-size: 1.4rem;
	}
}

.ozplayer .oz-captions p + p * {
	color: #fff !important;
}

a.btn-outline-dark {
	border: 1px solid #00796b;
	color: #00796b !important;
	margin-bottom: 1rem;
}

a.btn-outline-dark:hover,
a.btn-outline-dark:focus,
a.btn-outline-dark:active {
	border: 1px solid #00796b;
	color: #fff !important;
	background-color: #00796b;
	box-shadow: none;
}

#ModalSecteursPreoccupants {
	max-width: 576px;
	margin: 0 auto;
}

#ModalCougarMap {
	max-width: 365px;
	margin: 0 auto;
}

/* CATALOGUE TFO */

/* grisé les tuile */
[data-not-available] img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

/* Rajouter le cadena */
[data-not-available] .CenterText::before {
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	content: "\f023      ";
}

/* CSS pour les fenêtre modal */
.modalDescriptionModule .modal-lg {
	max-width: 1000px;
}

.modalDescriptionModule .modal-header {
	border-bottom: none;
}

.modal {
	z-index: 99999;
}

/* Cache les modules non disponibles dans le catalogue TFO */
.navbar-nav [data-not-available] {
	display: none;
}

.modal-dialog-centered {
	height: calc(100% - 60px);
}
.modal-dialog-centered .modal-content {
	top: 50%;
	transform: translateY(-50%);
}