* { box-sizing: border-box; } /*pour inclure padding et border dans la taille declarée*/
* {	margin: 0;	padding: 0;	border: 0;}

[class*="col-"] {float: left; border: 0px solid navy; word-break: keep-all; overflow: auto; }
[class*="col-"]{ width: 100%; } /* For mobile phones: 1 colonne */

.col-a11 {width: 50%;} .col-a12 {width: 50%;}
.vign {height:auto; margin:10px; position:relative; }
.vign {width: 95%;}
.flg {float:left; }
.fld {float:right; }

@media only screen and (min-width: 641px) {     /* For tablets: 2 colonnes */
	.col-a {width: 20%;} .col-a11 {width: 100%;} .col-a12 {width: 100%;}
	.col-b {width: 80%;} .col-b11 {width: 100%;}  .col-b21 {width: 100%;} .col-b22 {width: 100%;} 	
	.col-c {width: 100%;}
.vign {width: 95%;}
.vignL {width: 95%;}
	
}

@media only screen and (min-width: 1024px) {     /* For desktop: 3 colonnes */
	.col-a {width: 15%;} 	.col-a11 {width: 100%;} .col-a12 {width: 100%;}
	.col-b {width: 60%;}	.col-b11 {width: 100%;}  .col-b21 {width: 100%;} .col-b22 {width: 100%;}
	.col-c {width: 25%;}
.vign {width: 95%;}	
.vignL {width: 95%;}

}
	                     
@media only screen and (min-width: 1440px) {     /* For desktop: 4 colonnes */
	.col-a {width: 12%;} .col-a11 {width: 100%;} .col-a12 {width: 100%;}
	.col-b {width: 65%;} .col-b11 {width: 100%;} .col-b21 {width: 45%;} .col-b22 {width: 55%;}
												 .col-b21a {width: 50%;} .col-b22a {width: 50%;}	
	
	.col-c {width: 23%;}
.vign {width: 45%;}	
.vignL {width: 95%;}

	}

.row::after { content: ""; clear: both; display:block; padding: 0 1vw 0 1vw;}

html { font-family: "Lucida Sans", sans-serif; }
html {  font-size: calc(0.8rem + 0.05vw);}
body { } /*font-size: calc(14px + (26px - 14px) * ((100vw - 100vmin) / (100vmax - 100vmin)));*/

.container {   background: linear-gradient(#2A77BD, #b9def4 ); background-repeat:repeat-x;background-attachment:fixed;background-size:auto 100vh; color:#000096; }


div.banniere {background-color:#FFFFFF;}
.oeil {float: left; width: calc(5vw + 50px); height: auto;vertical-align:top;}
.title {float: left; width: calc(65vw - 50px)  }
.title p {font-family: Tahoma,Arial,SansSerif;color: #000096; font-weight:bold;font-style: italic;text-shadow: 5px 5px 5px #5A6F8D;font-size:calc(0.8em + 3vw);} 
.datej{ float: left;  width: 25vw; font-style:italic;font-size:10px;text-align:right;padding:10px;}
div.banniere::after { content: ""; clear: both; display:block;}
div.sticky {  position: -webkit-sticky;  position: sticky;  top: 0; padding: 0px;  border: 0px; z-index:500;}

.titre { color:#FFFFFF;}
.marge { float: left; padding:0.4vw;  width:100%; }
.myombre { float: left;width:100%;  background-color:white; box-shadow: 5px 5px #000062;}
.pad { float: left;	padding:0.5vw;  }
.pied a{text-decoration:none;color:#ffffff;padding:0;}
.pied a:hover{color:#CC0000;}
.menu {background-color:#e8f1ff; padding: 0px;  border: 0px;}
.ombre  {box-shadow: 5px 5px #060000;}
.footer { background-color: #000096; color: #ffffff; text-align: center; font-size: 12px; padding: 10px 0 10px 0; }


ul.topnav {  list-style-type: none;  margin: 0;  padding: 0;  overflow: hidden;  background-color:#000096; z-index:500;}
ul.topnav li {float: left; z-index:500;}
ul.topnav li a {  display: inline-block;  color: #f2f2f2;  text-align: center;  padding: 10px 16px;  text-decoration: none;  transition: 0.3s;  }
ul.topnav li a:hover {background-color: #f7f5bf;color: #000096;}
ul.topnav li.icon {display: none;}
ul.topnav li a:hover {background-color: #f7f5bf;color: #000096;}

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none; z-index:500;}
  ul.topnav li.icon {    float: right;    display: inline-block;   z-index:500;}
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative; z-index:500;}
  ul.topnav.responsive li.icon {    position: absolute;    right: 0;    top: 0;  }
  ul.topnav.responsive li {    float: none;    display: inline;  }
  ul.topnav.responsive li a {    display: block;    text-align: left;  }
}

.adgauche {  margin: 0;  padding: 0;  overflow: hidden;  }
ul.leftnav {  list-style-type: none;  margin: 0;  padding: 0;  overflow: hidden;  background-color:#000096;  z-index:500;width:100%;}
ul.leftnav li {float: left; z-index:500;width:100%;color:#ffff00;text-align: center;padding-top: 5px;}
ul.leftnav li a {  display: inline-block;  color: #f2f2f2;  text-align: left;  padding: 0px 10px;  text-decoration: none;  transition: 0.3s; width:100%; }
ul.leftnav li a:hover {background-color: #f7f5bf;color: #000096;width:100%;}
ul.leftnav li.icon {display: none;}
ul.topnav li a:hover {background-color: #f7f5bf;color: #000096;width:100%;}

H3{display:table; margin:10px;padding:0 10px 0 10px; font-style:bold;background:#d9eaf3;color:#0000a0;line-height:2em;text-shadow: 2px 2px 4px #999;
box-shadow: 0px 0px 2px 2px rgba(1, 1, 100, 0.5);
-moz-box-shadow: 0px 0px 2px 2px rgba(1, 1, 100, 0.5);
-webkit-box-shadow: 0px 0px 2px 2px rgba(1, 1, 100, 0.5);}

.actuel{border:1px solid #0033ff;border-collapse:collapse;text-align:center;}
.actuel th {border:1px solid #0033ff;width:20%;padding:3px;text-align:center;background-color:#ffffff;}
.actuel td {border:1px solid #0033ff;width:20%;padding:3px;text-align:center;background-color:#ffffff;}
.cadre{BACKGROUND-COLOR:#F8F8FF;BORDER:#0066ff 1px solid;TEXT-ALIGN:left;padding:0 0 0 15px;}
.lien a{text-decoration:none;color:#1300ff;}
.lien a:hover{color:#CC0000;}
.simple {border:0px; width: 100%; align-content: center}
.simple tr {border:0px; text-align: center;}
.simple td {border:0px; text-align: center;}
input, select {border:1px solid #0033ff; text-align: center;padding:3px;}