:root {
  --color-rouge: #E20022;
  --color-rougevin: #9B0D1B;
  --color-orange: #E4B548;
  --color-bleu:#005BA9;
  --color-gris:#EEEEEE;
  --color-grisfonce:#2C2B2B;
  --color-blanc:#FFF;
  --color-noir:#000;
  --duration: 1s;
  --nav-duration: calc(var(--duration) / 4);
  --ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --space: 1rem;
  --font-primary: 'Barlow', sans-serif;
  --font-heading: 'Barlow', sans-serif;
  --font-size: 1.125rem;
  --line-height: 1.5;
}



/*                                    couleurs */
.textBlanc {
    color: var(--color-blanc);
}
.textNoir {
    color: var(--color-noir);
}
.textRouge {
    color: var(--color-rouge);
}
.textBleu {
    color: var(--color-bleu);
}

.textRougeVin {
    color: var(--color-rougevin);
}

.textOrange {
    color: var(--color-orange);
}


.Bleu {
    background-color: var(--color-bleu);
	color: var(--color-blanc);
}

.Orange {
    background-color: var(--color-orange);
	color: var(--color-blanc);
}

.RougeVin {
    background-color: var(--color-rougevin);
    color: var(--color-blanc);
}

.Rouge {
    background-color: var(--color-rouge);
    color: var(--color-blanc);
}

.Noir {
    background-color: var(--color-noir);
	 color: var(--color-blanc);
}
.Gris {
    background-color: var(--color-gris);
}
.GrisFonce {
    background-color: var(--color-grisfonce);
    color: var(--color-blanc);
}
.Blanc {
    background-color: var(--color-blanc);
    color:var(--color-noir);
}


/* CSS Document */
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */


/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader {
    display: none;
}
.js #loader {
    display: block;
    position: absolute;
    left: 100px;
    top: 0;
}
.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    background: url(../images/Preloader.gif) center no-repeat #fff;
}
* {
    box-sizing: border-box;
}
/* link underlines tend to make hypertext less readable, 
   because underlines obscure the shapes of the lower halves of words */
:link, :visited {
	text-decoration: none
}
/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1, h2, h3, h4, h5, h6, pre, code {
	font-size: 1em;
}
/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
/* the default spacing on headings does not match nor align with 
   normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/*  nonetheless strip their margin and padding as well */
h1, h2, h3, h4, h5, h6, pre, form, body, html, blockquote, fieldset, input {
	margin: 0;
	padding: 0
}
/* whoever thought blue linked image borders were a good idea? */
a img, :link img, :visited img {
	border: none
}
/* de-italicize address */
address {
	font-style: normal
}
/* more varnish stripping as necessary... */
html {
    font-size: 62.5%;
	scroll-behavior: smooth;
}
html p, html li {
    font-family: 'Barlow', sans-serif;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 3.0rem;
}
body {
    margin: 0px;
    color: var(--color-grisfonce);
    background-color: var(--color-gris);
    font-family: 'Barlow', sans-serif;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 3.0rem;
}
strong {
	font-weight: 700;
}
a {
    color: var(--color-bleu);
    text-decoration: none;
    margin: 0;
    transition: all 0.3s ease-in-out 0s;
    transition-duration: 0.2s;
}
a:hover {
    color: #000941;
    text-decoration: none;
}

hr {
	border:none;
 	border-bottom: 1px dashed var(--color-bleu);
	margin: 20px 0;
	padding: 20px 0;
	display: block;
	
}

h1, h2, h3, h4, h5 {
   font-family: 'Barlow', sans-serif;
    line-height: 1.2em;
    padding-bottom: 2%;
    font-weight: 700;
	 display: block;
}
h1 {
    font-size: 4.8rem;
    font-weight: 500;
	line-height: 1.1em;
}
h2 {
     font-size: 4.2rem;
	font-weight: 500;
}
h3 {
    font-size: 3.6rem;
	font-weight: 500;
}
h4 {
    font-size: 3.0rem;
	font-weight: 500;
}
h5 {
    font-size: 2.4rem;
	font-weight: 300;
}
h6 {
    font-size: 2.1rem;
    line-height: normal;
}
.imgFull {
    max-width: 100%;
    height: auto;
    display: block;
}

.imgCover {
    width:  100%;
    height: 100%;
    object-fit: fill;
}
.imgRond {
    border-radius: 25px;
}
.imgLeft {
    max-width: 100%;
    height: auto;
    display: block;
    float: left;
    margin: 0 30px 0 0;
}

.imgRight {
    float:right;
}

.centre {
   text-align: center;
}

.centerImg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.ombrage {
   box-shadow: 5px 25px 40px -4px rgba(0, 0, 0, 0.07);
}

.ombrageTxt {
   text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.30);
}



button, hr, input {
    overflow: visible;
}
button, input, select, textarea {
    font: inherit;
    margin: 0;
}
.input {
    padding: 8px;
    display: block;
    border: none;
    border-bottom: 1px solid var(--color-gris);
    width: 90%;
}

/* ----------------------------------------------------------  search box*/

input, textarea, select {
  box-sizing: border-box;
  border: 1px solid var(--color-blanc);
  border-radius: 4px;
  background-color: var(--color-blanc);
	color: var(--color-bleu);
   padding: 15px;
	margin: 10px 0 0 0;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
	width: 75%;
}


input[type=text], select {
  box-sizing: border-box;
  border: 1px solid var(--color-blanc);
  border-radius: 4px;
  background-color: var(--color-blanc);
   padding: 10px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}


input[type=text]:focus {
  width: 100%;
}
/*____________________________Colonne Responsive_________________________________*/


.container {
}



.bar:after, .bar:before, .cell-row:after, .cell-row:before, .clear:after, .clear:before, .container:after, .container:before, .panel:after, .panel:before, .row-padding:after, .row-padding:before, .row:after, .row:before {
	content: "";
	display: table;
	clear: both
}
.col {
	float: left;
	width: 100%
}
.col.s1 {
	width: 8.33333%
}
.col.s2 {
	width: 16.66666%
}
.col.s3 {
	width: 24.99999%
}
.col.s4 {
	width: 33.33333%
}
.col.s5 {
	width: 41.66666%
}
.col.s6 {
	width: 49.99999%
}
.col.s7 {
	width: 58.33333%
}
.col.s8 {
	width: 66.66666%
}
.col.s9 {
	width: 74.99999%
}
.col.s10 {
	width: 83.33333%
}
.col.s11 {
	width: 91.66666%
}
.col.s12 {
	width: 99.99999%
}

@media (min-width:601px) {
.col.m1 {
	width: 8.33333%
}
.col.m2 {
	width: 16.66666%
}
.col.m3, .quarter {
	width: 24.99999%
}
.col.m4, .third {
	width: 33.33333%
}
.col.m5 {
	width: 41.66666%
}
.col.m6, .half {
	width: 49.99999%
}
.col.m7 {
	width: 58.33333%
}
.col.m8, .twothird {
	width: 66.66666%
}
.col.m9, .threequarter {
	width: 74.99999%
}
.col.m10 {
	width: 83.33333%
}
.col.m11 {
	width: 91.66666%
}
.col.m12 {
	width: 99.99999%
}
}

@media (min-width:993px) {
.col.l1 {
	width: 8.33333%
}
.col.l2 {
	width: 16.66666%
}
.col.l3 {
	width: 24.99999%
}
.col.l4 {
	width: 33.33333%
}
.col.l5 {
	width: 41.66666%
}
.col.l6 {
	width: 49.99999%
}
.col.l7 {
	width: 58.33333%
}
.col.l8 {
	width: 66.66666%
}
.col.l9 {
	width: 74.99999%
}
.col.l10 {
	width: 83.33333%
}
.col.l11 {
	width: 91.66666%
}
.col.l12 {
	width: 99.99999%
}
}
.margin {
	margin: 16px!important
}
.margin-left {
	margin-left: 16px!important
}
.margin-right {
	margin-right: 16px!important
}
.padding-16 {
	padding: 16px!important
}
.padding-24 {
	padding: 24px!important
}
.padding-32 {
	padding: 32px!important
}
.padding-48 {
	padding: 48px!important
}
.padding-64 {
	padding: 64px!important;
}

@media (max-width:992px) {
.padding-32 {
	padding: 16px!important
}
.padding-48, .padding-64 {
	padding: 24px!important
}
}
/*_________________________________sections de couleurs _______________________________*/


.section1 {
	width: 100%;
	padding: 2% 5%;
}

/* Centered text */
.centeredMobile {
  display:none;
}



/* Centered text */
.centered {
  position: absolute;
  margin-top:-125px;
  margin-left:-125px;
}

.centered img {
  max-width: 250px; 
	height: auto;
}

.backBleu {
	background-image: url("../images/background-1.png");
	background-repeat: no-repeat;
	background-position: center center;
	border:solid 16px #EEEEEE;
}

.backBlanc {
	background-image: url("../images/back-blanc.png");
	background-repeat: no-repeat;
	background-position: center center;
}


.cours-1 {
	background-image: url("../images/cours-1.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border:solid 16px #EEEEEE;
}

.cours-2 {
	background-image: url("../images/cours-2.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border:solid 16px #EEEEEE;
}

.cours-3 {
	background-image: url("../images/cours-3.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border:solid 16px #EEEEEE;
}

.cours-4 {
	background-image: url("../images/cours-4.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border:solid 16px #EEEEEE;
}

.cours-5 {
	background-image: url("../images/cours-5.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border:solid 16px #EEEEEE;
}

.cours-6 {
	background-image: url("../images/cours-6.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border:solid 16px #EEEEEE;
}


.cours-7 {
	background-image: url("../images/cours-7.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border:solid 16px #EEEEEE;
}

.cours-8 {
	background-image: url("../images/cours-8.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border:solid 16px #EEEEEE;
}

.cours-9 {
	background-image: url("../images/cours-9.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border:solid 16px #EEEEEE;
}

.cours-10 {
	background-image: url("../images/cours-10.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border:solid 16px #EEEEEE;
}

.cours-11 {
	background-image: url("../images/cours-11.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border:solid 16px #EEEEEE;
}



.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  text-align: center;
   position: relative;
	background-color: rgba(0,0,0,0.5);
  color: white;
  padding: 10px;
	margin:400px 0 0 0;
}


.text-block {
 position: absolute;
  background-color: rgba(0,0,0,0.5);
  color: white;
  padding: 20px;
  left: 0;
  bottom: 0;
  width:100%;
}

.text-block h3 {
	font-weight: 600;
	font-size: 2.1rem;
	text-transform: uppercase;
	padding: 0;
}

.text-block p {
	padding: 0;
	margin: 0 0 20px 0;
	font-size: 1.4rem;
}




.section2 {
	width: 100%;
	padding:0 5% 5% 5%;
}


.section3 {
	width: 100%;
	padding: 10%;
}

.section2 h2::after, .section3 h2::after  {
  content: "";
  display: block;
  border-bottom: 7px solid var(--color-bleu);
  width: 100px;
  padding: 10px 0;
}


.section4 {
	width: 100%;
	padding: 50% 0 0 0;
	margin: 100px 0 0 0;
}



.section5 {
	width: 100%;
	padding: 0 10%;
}

.rowEqual {
  display: flex; /* equal height of the children */
	flex-wrap: wrap;
}

.marginNeg{
  margin-top:-450px;
	position: relative;
	z-index: 9999;
}

/*_________________________________page accueil _______________________________*/

.btn {
	width: 100%;
	padding: 2% 4%;
	text-align: left;
	font-size: 1.6rem;
	font-weight: 300;
	letter-spacing: 1px;
	color: #FFF;
	margin-top: 40px;
}
.btn::after {
	font-size: 18px;
	padding: 5px;
	font: var(--fa-font-solid);
    content: "\f061";
}
.btn:hover {
	background-color: #000;
	color: #FFF;
}
.btn_savoir {
	width: 100%;
	padding: 1%;
	text-align: left;
	font-size: 1.4rem;
	font-weight: 300;
	letter-spacing: 2px;
	margin-top: 20px;
}
.btn_savoir::after {
	font-size: 18px;
	padding: 5px;
	content: "\2192";
}
.btn_savoir:hover {
	background-color: #000;
	color: #FFF;
}


/*_______Sous page____________________________*/



#header {
	min-height: 450px;
	display: block;
	z-index: 998;
	text-align: right;
	padding: 2%;
	padding-top: 5%;
	width: 96%;
}



/* ------------------------- MENU _________________________________________ */

/* Menu Styles */


#logo {
	width: auto;
	position: absolute;
	left: 10%;
	margin-top: -40px;
	display: block;
	z-index: 99999;
}
#logo img {
	max-width: 300px;
	height: auto;
}

/*___________Table responsive__________________*/

.tableauResp {
	overflow-x: auto;
	border: 1px solid #DFDFDF;
	margin-top: 20px;
}
table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.8em;
}
th, td {
	text-align: left;
	padding: 8px;
}
tr:nth-child(even) {
	background-color: #f2f2f2
}
th {
	background-color: #5b9bd5;
	color: white;
}
/*___________footer__________________*/

.footer {
	font-size: 15px;
	width: 100%;
	padding: 5% 15%;
	text-align: center;
}

.footer a {
	color: #777777;
}
.footer a:hover {
	color:var(--color-bleu);
}



.collapsible {
  background-color:var(--color-blanc);
  color:var(--color-noir);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 2.4rem;
	border-bottom: 1px solid #D1D1D1;
}

.active, .collapsible:hover {
  background-color:var(--color-bleu);
	color:var(--color-blanc);
}

.content {
  padding: 15px 30px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color:var(--color-white);
}

.collapsible:after {
  content: '+'; /* Unicode character for "plus" sign (+) */
  font-size: 30px;
  color: :var(--color-bleu);
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "-"; /* Unicode character for "minus" sign (-) */
}