@font-face { font-family: "GraphikCondensedBold"; font-style: normal; font-weight: 300; src: local('GraphikCondensedBold'), local('GraphikCondensedBold'), url('/fonts/GraphikCondensed-Bold.woff2');  font-display: block;}
// @font-face { font-family: "GraphikCondensed"; font-style: normal; font-weight: 300; src: local('GraphikCondensed'), local('GraphikCondensed'), url('/fonts/GraphikCondensed.woff2');  font-display: block;}
body {margin:0;background-color:#fff;font-family: Arial ,Helvetica,sans-serif ; font-size:15px;}

/* COMMUN */
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#main img {max-width:100%;} 
button:hover {cursor:pointer;}  
div {box-sizing: border-box;}  
input[type=submit] {padding:5px 10px;font-size:1.3em;} 
.rond {border-radius: 50%;} 
.arrondi {border-radius:5px;} 
.n0{background-color:white;border:1px solid grey;} 
.n1{background-color:red;} 
.n2{background-color:yellow;} 
.n3{background-color:#05e32a;} 
.n4{background-color:#05662a;color:white;}  
.white{background-color:white;} 
.bouton {background-color:yellow;color:black;}
:disabled  {background-color: dimgrey;color: linen;opacity: 1;}

.AS {background-image : linear-gradient(to bottom right, #fac8c8, #fff); }
.classe {background-image : linear-gradient(to bottom right, yellow, #fff); }
.cycle {background-image : linear-gradient(to bottom right, #77b3f0, #fff);}
a .cycle  {color:blue;}
summary {float:left;margin:5px auto;background-color:#1aa9e7;color:white;padding:10px 8px;text-align:center;width:200px;cursor:pointer;-webkit-border-radius: 20px 20px;border-radius: 20px 20px;}

.infobulle {position: relative;  cursor: help;}
.infobulle:hover:after, .infobulle:focus:after { content: attr(aria-label); background-color:white; border:1px dotted red; padding: 4px 8px; position: absolute; top: -2.4em; left: 50%; transform: translateX(-50%);  z-index: 1;  white-space: nowrap;}
[aria-label]:hover:before,
[aria-label]:focus:before {
  content: "▼";
  position: absolute;
  top: -1em;
	left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
  font-size: 20px;
  color: #413219;
}

table, th, td {border: 1px solid grey;}
table {border-collapse: collapse;}
th {padding:5px; background-image : linear-gradient(to bottom right, yellow, #fff);}
td {padding:5px;}
.pair {background-color:white;}
.impair {background-color:whitesmoke;}


[class*="grid-"] {
  display: grid;
}

.grid-1 { grid-template-columns: repeat(1, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-7 { grid-template-columns: repeat(7, 1fr); }
.grid-8 { grid-template-columns: repeat(8, 1fr); }
.grid-9 { grid-template-columns: repeat(9, 1fr); }
.grid-10 { grid-template-columns: repeat(10, 1fr); }
.grid-11 { grid-template-columns: repeat(11, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }

@media (min-width: 300px) {
  .sm\:grid-1 { grid-template-columns: repeat(1, 1fr); }
  .sm\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .sm\:grid-3 { grid-template-columns: repeat(3, 1fr); }
  .sm\:grid-4 { grid-template-columns: repeat(4, 1fr); }
  .sm\:grid-5 { grid-template-columns: repeat(5, 1fr); }
  .sm\:grid-6 { grid-template-columns: repeat(6, 1fr); }
  .sm\:grid-7 { grid-template-columns: repeat(7, 1fr); }
  .sm\:grid-8 { grid-template-columns: repeat(8, 1fr); }
  .sm\:grid-9 { grid-template-columns: repeat(9, 1fr); }
  .sm\:grid-10 { grid-template-columns: repeat(10, 1fr); }
  .sm\:grid-11 { grid-template-columns: repeat(11, 1fr); }
  .sm\:grid-12 { grid-template-columns: repeat(12, 1fr); }
}

@media (min-width: 600px) {
  .md\:grid-1 { grid-template-columns: repeat(1, 1fr); }
  .md\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-4 { grid-template-columns: repeat(4, 1fr); }
  .md\:grid-5 { grid-template-columns: repeat(5, 1fr); }
  .md\:grid-6 { grid-template-columns: repeat(6, 1fr); }
  .md\:grid-7 { grid-template-columns: repeat(7, 1fr); }
  .md\:grid-8 { grid-template-columns: repeat(8, 1fr); }
  .md\:grid-9 { grid-template-columns: repeat(9, 1fr); }
  .md\:grid-10 { grid-template-columns: repeat(10, 1fr); }
  .md\:grid-11 { grid-template-columns: repeat(11, 1fr); }
  .md\:grid-12 { grid-template-columns: repeat(12, 1fr); }
}

@media (min-width: 900px) {
  .lg\:grid-1 { grid-template-columns: repeat(1, 1fr); }
  .lg\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-4 { grid-template-columns: repeat(4, 1fr); }
  .lg\:grid-5 { grid-template-columns: repeat(5, 1fr); }
  .lg\:grid-6 { grid-template-columns: repeat(6, 1fr); }
  .lg\:grid-7 { grid-template-columns: repeat(7, 1fr); }
  .lg\:grid-8 { grid-template-columns: repeat(8, 1fr); }
  .lg\:grid-9 { grid-template-columns: repeat(9, 1fr); }
  .lg\:grid-10 { grid-template-columns: repeat(10, 1fr); }
  .lg\:grid-11 { grid-template-columns: repeat(11, 1fr); }
  .lg\:grid-12 { grid-template-columns: repeat(12, 1fr); }
}

@media (min-width: 1200px) {
  .xl\:grid-1 { grid-template-columns: repeat(1, 1fr); }
  .xl\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .xl\:grid-3 { grid-template-columns: repeat(3, 1fr); }
  .xl\:grid-4 { grid-template-columns: repeat(4, 1fr); }
  .xl\:grid-5 { grid-template-columns: repeat(5, 1fr); }
  .xl\:grid-6 { grid-template-columns: repeat(6, 1fr); }
  .xl\:grid-7 { grid-template-columns: repeat(7, 1fr); }
  .xl\:grid-8 { grid-template-columns: repeat(8, 1fr); }
  .xl\:grid-9 { grid-template-columns: repeat(9, 1fr); }
  .xl\:grid-10 { grid-template-columns: repeat(10, 1fr); }
  .xl\:grid-11 { grid-template-columns: repeat(11, 1fr); }
  .xl\:grid-12 { grid-template-columns: repeat(12, 1fr); }
}

.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media (min-width: 576px) {
  .sm\:col-1  { grid-column: span 1; }
  .sm\:col-2  { grid-column: span 2; }
  .sm\:col-3  { grid-column: span 3; }
  .sm\:col-4  { grid-column: span 4; }
  .sm\:col-5  { grid-column: span 5; }
  .sm\:col-6  { grid-column: span 6; }
  .sm\:col-7  { grid-column: span 7; }
  .sm\:col-8  { grid-column: span 8; }
  .sm\:col-9  { grid-column: span 9; }
  .sm\:col-10 { grid-column: span 10; }
  .sm\:col-11 { grid-column: span 11; }
  .sm\:col-12 { grid-column: span 12; }
}

@media (min-width: 768px) {
  .md\:col-1  { grid-column: span 1; }
  .md\:col-2  { grid-column: span 2; }
  .md\:col-3  { grid-column: span 3; }
  .md\:col-4  { grid-column: span 4; }
  .md\:col-5  { grid-column: span 5; }
  .md\:col-6  { grid-column: span 6; }
  .md\:col-7  { grid-column: span 7; }
  .md\:col-8  { grid-column: span 8; }
  .md\:col-9  { grid-column: span 9; }
  .md\:col-10 { grid-column: span 10; }
  .md\:col-11 { grid-column: span 11; }
  .md\:col-12 { grid-column: span 12; }
}

@media (min-width: 992px) {
  .lg\:col-1  { grid-column: span 1; }
  .lg\:col-2  { grid-column: span 2; }
  .lg\:col-3  { grid-column: span 3; }
  .lg\:col-4  { grid-column: span 4; }
  .lg\:col-5  { grid-column: span 5; }
  .lg\:col-6  { grid-column: span 6; }
  .lg\:col-7  { grid-column: span 7; }
  .lg\:col-8  { grid-column: span 8; }
  .lg\:col-9  { grid-column: span 9; }
  .lg\:col-10 { grid-column: span 10; }
  .lg\:col-11 { grid-column: span 11; }
  .lg\:col-12 { grid-column: span 12; }
}

@media (min-width: 1200px) {
  .xl\:col-1  { grid-column: span 1; }
  .xl\:col-2  { grid-column: span 2; }
  .xl\:col-3  { grid-column: span 3; }
  .xl\:col-4  { grid-column: span 4; }
  .xl\:col-5  { grid-column: span 5; }
  .xl\:col-6  { grid-column: span 6; }
  .xl\:col-7  { grid-column: span 7; }
  .xl\:col-8  { grid-column: span 8; }
  .xl\:col-9  { grid-column: span 9; }
  .xl\:col-10 { grid-column: span 10; }
  .xl\:col-11 { grid-column: span 11; }
  .xl\:col-12 { grid-column: span 12; }
}




/* MENU RESPONSIVE */
@-webkit-keyframes androidbugfix { from {padding:0} to {padding:0} } 
#menu {clear:both;float:left;margin-top:-3px;}
#menu label { color:#000; padding:0 0.25em; font:3.125em/1.375em Arial }
#menu .sub-nav .toggle { padding:0 0.3125em; font:2em/2em Arial; top:0; -webkit-transform:scale(-1,1); -ms-transform:scale(-1,1); transform:scale(-1,1) }
#header label:hover, #menu label:hover { color:#fff; }
#main-nav-check, #menu .sub-nav-check { position:absolute; top:-9999px; left:-9999px; }
.toggle {float:right; right:0.2em; top:30px; font-size:4em; cursor:pointer; color:#00433d; }
#menu, #menu .sub-nav { position:absolute; top:0px; bottom:0; width:13.75em; background:#fff; z-index:9999;  }
#menu, #menu .sub-nav {   
	/*-webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0); */
	-webkit-transition:-webkit-transform .25s ease; transition:transform .25s ease;
	}
#menu ul { background:#fff; line-height:2.5em; text-decoration:none; padding:0; list-style:none; margin-top:3em; border-top:0px solid #444 }
#menu ul li ul {background:#fff;}
#menu li { border-bottom:0px solid #444 }
#menu li a { display:block; font-size:0.875em; padding-left:1.5em; color:#000; text-decoration:none }
#menu li a:hover, #menu .toggle-sub:hover { background:#fff }
#menu .sub-nav { margin-top:-1px;} 
#menu .sub-heading { margin-top:4.0625em; padding-left:1.3125em; color:#999 }
#menu .sub-heading:before { content:""; display:block; height:1px; width:13.75em; margin-left:-1.3125em; background:#fff }
#menu .toggle-sub { font:bold 1em/2.75em Arial;  background:#fff; float:right; margin-top:-2.75em; width:2.25em; border-left:0px solid #444; cursor:pointer; text-align:center }
#menu, #menu .sub-nav { -webkit-transform:translate3d(0,0,0) }
#main-nav-check:checked ~ .container,
#main-nav-check:checked ~ #menu,
#menu .sub-nav-check:checked ~ [id$="-sub"] /* matches all elements with id ending "-sub" */ { 
	-webkit-transform:translate(13.75em,0); -ms-transform:translate(13.75em,0); transform:translate(13.75em,0) 
	}
@media (max-width:799px ) {  .logo-top {display:inline;height:80px;width:144px;margin-top:0px;} .big {display:none;}  #menu, #menu .sub-nav {left:-13.75em; } .toggle-menu { margin-top:0px;} #menu ul, #menu ul li ul {height:600px;} .megaban_ca{height:60px!important;} }
@media (min-width:800px ) {
	.toggle-menu {display:none;}
	.big {display:block;}
	#menu, #menu .sub-nav { -webkit-transform:translate(0,0) !important; -ms-transform:translate(0,0) !important; transform:translate(0,0) !important }
	#menu label, #menu .sub-nav, #menu .sub-heading, #header label { display:none; }
	#menu {position:sticky; top:0px;margin-right:auto;margin-left:auto; width:100%;height:50px; }
	#menu .toggle-sub { display:inline-block; margin-top:-3.05em; margin-right:0.25em; border-left:0; -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg) }
	#menu .toggle-sub, #menu .toggle-sub:hover { background:transparent }
	#menu ul ul .toggle-sub { margin-top:-2.75em; margin-right:0; border-left:0px solid #444; -webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg) }
	#menu ul li:hover > label { color:#000; }
	#menu > ul { margin: 0 auto; position:relative; z-index:1; display:inline-table; border-left:0px solid #444; border-right:0; font-size:1.05em; font-weight:600; }
	#menu ul:after { content:""; clear:both; display:block }
	#menu ul li { float:left; position:relative; text-align:left; border-left:0px solid #4fa9db } 
	#menu ul li a { padding:0.1em 3.75em 0.1em 0.5em }
	#menu ul li a:only-child { padding-right:0.5em }
	#menu ul li:hover > a {color:#aaa; -webkit-transition:background-color .1s ease; transition:background-color .1s ease }
	#menu ul li:hover > ul { display:block }
	#menu ul ul { position:absolute; left:0; margin-left:-1px }
	#menu ul ul li { float:inherit; width:20em; margin-left:1px; border-bottom:1px solid black; }
	#menu ul ul li a { color:#000; padding:0 1.5em }
	#menu ul ul li a:after { right:0.375em; margin-top:-1.6875em; -webkit-transform:none; -ms-transform:none; transform:none }
	#menu ul .sub-nav { top:auto; bottom:auto; left:auto; width:auto; margin-top:0; -webkit-transform:none !important; -ms-transform:none !important; transform:none !important }	
	#menu ul ul .sub-nav { float:left; top:0; left:13.75em; margin-left:0; margin-top:-1px }
	#menu ul .fly-left ul { left:-13.75em; margin-left:-2px }
	#menu ul .fly-left ul li { float:none }
	#menu ul .fly-left .toggle-sub { right:auto; left:0.5em; left:0.375em; padding-bottom:1px; border-right:1px solid #444; -webkit-transform:rotate(-180deg); -ms-transform:rotate(-180deg); transform:rotate(-180deg) }
	#menu ul .go-up > ul { top:auto; bottom:0; margin-bottom:-1px }
	.cat-black {border-top:3px solid #00433d!important;} .cat-black:hover >a, .cat-black:hover >ul li a  {background:#fff!important;}
	.cat-red {border-top:3px solid #00433d!important;} .cat-red:hover >a, .cat-red:hover >ul li a {background:#fff!important;}
	.cat-purple {border-top:3px solid #00433d!important;} .cat-purple:hover >a, .cat-purple:hover >ul li a {background:#fff!important;}
	.cat-blue {border-top:3px solid #00433d!important;} .cat-blue:hover >a, .cat-blue:hover >ul li a {background:#fff!important;}
	.cat-green {border-top:3px solid #00433d!important;} .cat-green:hover >a, .cat-green:hover >ul li a {background:#fff!important;}
}
.rank{background: #fafafa; color:black; font-size:2em; -webkit-border-radius: 6px 0px 0px 6px;border-radius: 6px 0px 0x 6px;}
/* IMAGES */
.img-responsive {display:block;height:auto;width:100%;}
.img-rounded {border-radius: 6px;}
.img-circle {border-radius: 50%;}
.img-thumbnail {display: inline-block;height: auto;max-width: 100%;padding: 4px;line-height: 1.428571429;background-color: #ffffff;border: 1px solid #dddddd;border-radius: 4px;-webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}

/* Ecran mobile xxs */
@media (max-width: 320px) {
.container {width:100%;min-width: 320px;}
.breve{font-size:13px!important;}
.page{padding: 15px 0px 5px 0px!important;}
#taboola-below-article-thumbnails-1 {max-height:550px; overflow:auto;}
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11 {float: left;}
.col-xs-12 {width: 100%;}
.col-xs-11 {width: 91.66666666666666%;}
.col-xs-10 {width: 83.33333333333334%;}
.col-xs-9 {width: 75%;}
.col-xs-8 {width: 66.66666666666666%;}
.col-xs-7 {width: 58.333333333333336%;}
.col-xs-6 {width: 50%;}
.col-xs-5 {width: 41.66666666666667%;}
.col-xs-4 {width: 33.33333333333333%;}
.col-xs-3 {width: 25%;}
.col-xs-2 {width: 16.666666666666664%;}
.col-xs-1 {width: 8.333333333333332%;}
.col-xs-0 {display: none;}
}
/* Ecran mobile xs */
@media (min-width: 340px) and (max-width: 479px) {
.container {width:100%;min-width: 350px;}
.breve {font-size:13px!important;}
.page {padding-left:0px!important;padding-right:0px!important;}
#taboola-below-article-thumbnails-1	{max-height:550px;overflow:auto;}
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11 {float: left;}
.col-xs-12 {width: 100%;}
.col-xs-11 {width: 91.66666666666666%;}
.col-xs-10 {width: 83.33333333333334%;}
.col-xs-9 {width: 75%;}
.col-xs-8 {width: 66.66666666666666%;}
.col-xs-7 {width: 58.333333333333336%;}
.col-xs-6 {width: 50%;}
.col-xs-5 {width: 41.66666666666667%;}
.col-xs-4 {width: 33.33333333333333%;}
.col-xs-3 {width: 25%;}
.col-xs-2 {width: 16.666666666666664%;}
.col-xs-1 {width: 8.333333333333332%;}
.col-xs-0 {display: none;}
}
/* Ecran tablette sm */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .container {width: 100%;}
  #taboola-below-article-thumbnails-1	{max-height:550px;overflow:auto;}
  .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11 {float: left;}
  .col-sm-12 {width: 100%;}
  .col-sm-11 {width: 91.66666666666666%;}
  .col-sm-10 {width: 83.33333333333334%;}
  .col-sm-9 {width: 70%;}
  .col-sm-8 {width: 66.66666666666666%;}
  .col-sm-7 {width: 58.333333333333336%;}
  .col-sm-6 {width: 50%;}
  .col-sm-5 {width: 41.66666666666667%;}
  .col-sm-4 {width: 33.33333333333333%;}
  .col-sm-3 {width: 25%;}
  .col-sm-2 {width: 16.666666666666664%;}
  .col-sm-1 {width: 8.333333333333332%;}
  .col-sm-0 {display: none;}
}
/* Ecran PC petit md */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .container {width: 100%;}
  .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11 {float: left;}
  .col-md-12 {width: 100%;}
  .col-md-11 {width: 91.66666666666666%;}
  .col-md-10 {width: 83.33333333333334%;}
  .col-md-9 {width: 70%;}
  .col-md-8 {width: 66.66666666666666%;}
  .col-md-7 {width: 60%;}
  .col-md-6 {width: 50%;}
  .col-md-5 {width: 40%;}
  .col-md-4 {width: 33.33333333333333%;}
  .col-md-3 {width: 25%;}
  .col-md-2 {width: 16.666666666666664%;}
  .col-md-1 {width: 8.333333333333332%;}
  .col-md-0 {display: none;}
}
/* Ecran PC large lg */
@media only screen and (min-width: 1200px) {
  .container {width: 1200px;}
  .col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11 {float: left;}
  .col-lg-12 {width: 100%;}
  .col-lg-11 { width: 91.66666666666666%;}
  .col-lg-10 {width: 83.33333333333334%;}
  .col-lg-9 {width: 70%;}
  .col-lg-8 {width: 66.66666666666666%;}
  .col-lg-7 {width: 58.333333333333336%;}
  .col-lg-6 {width: 50%;}
  .col-lg-5 {width: 41.66666666666667%;}
  .col-lg-4 {width: 33.33333333333333%;}
  .col-lg-3 {width: 25%;}
  .col-lg-2 {width: 16.666666666666664%;}
  .col-lg-1 {width: 8.333333333333332%;}
  .col-lg-0 {display: none;}
}