* { box-sizing: border-box; } /*pour inclure padding et border dans la taille declarée*/background
* {	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 */

ul.leftnav { display:none;}
.datej { display:none;}

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

@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%;}
.ads_g {height:640px;}
	
}

@media only screen and (min-width: 1024px) {     /* For desktop: 3 colonnes */
	ul.leftnav { display:inline-block;}
	.datej { display:inline-block;}
	.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%;}
.ads_g {height:640px;}

}
	                     
@media only screen and (min-width: 1440px) {     /* For desktop: 4 colonnes */
	.col-a {width: 15%;} .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: 20%;}
.vign {width: 45%;}	
.vignL {width: 95%;}
.ads_g {height:640px;}

	}

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

html { font-family: "Verdana,Helvetica", sans-serif; font-display: swap;margin: 0; }
html {  font-size: calc(1rem + 0.06vw);}
/*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; }
/*.container { margin: 0;	 background-image:url('/img/etoiles.gif');color:#00009f; }*/
/*.banniere { background:#ffffff; background-image:url('/img/etoiles.gif');  }*/

.oeil { float: left; }
.oeil2 { width: calc(5vw + 60px); }
.fresque { float: left;  }
.fr_img {width:100%; }
.title {float: left; width: calc(80vw -100px );   }
.title {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);}
/*.title {font-family: Tahoma,Arial,SansSerif;color: #f0f4bd; font-weight:bold;font-style: italic;text-shadow: 5px 5px 5px #d1c789;font-size:calc(0.8em + 3vw);} */
.datej{ float: right;  width: 15vw+20px; font-style:italic;font-size:10px;text-align:right;padding:10px;color:#000096;}
.passe{ color: #ff0000; font-weight:bold; font-size:calc(0.8em + 0.8vh);}

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;}
.titreA { color:#FFFFFF; font-size:calc(0.8em + 0.81vw);}
.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; padding-left: 10px; padding-right: 10px; }
.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; }
.padding { padding: 10px 20px 10px 20px; }
.center {width:100%;text-align:center;}

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: left;  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;  }
}

/* pour menu sticky suite à new menu pleine page 14 Oct 22 */
ul.topnav2 {  display: inline-flex; height:50px;  list-style-type: none;  margin: 0;  padding: 0; background-color:#000096; z-index:500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
ul.topnav2 li {z-index:500; }
ul.topnav2 li a {  display: inline-block;  color: #f2f2f2;  text-align: left;  padding: 10px 16px;  text-decoration: none;  transition: 0.3s;  }
ul.topnav2 li a:hover {background-color: #f7f5bf;color: #000096;}
ul.topnav2 li.icon {display: none;}
ul.topnav2 li a:hover {background-color: #f7f5bf;color: #000096;}

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

  .overlay { height: 0%; width: 100%; position: fixed; z-index: 500; top: 0; left: 0; background-color: #000096; overflow: auto; transition: 0.5s; }
  .overlay-content { position: relative; top: 5%; width: 95%; text-align: left; margin:auto; }
  .overlay a { padding: 8px; text-decoration: none; font-size: 20px; color: #ffff00; display: block; transition: 0.3s; }
  .overlay a:hover, .overlay a:focus { color: #f1f1f1; }
  .overlay .closebtn { position: absolute; top: 0px; right: 0px; font-size: 60px; }

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

/* fin */


.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);}

H13{display:table; margin:0px;padding:0 10px 0 10px; width:90%; font-style:bold; font-size: calc(1.2rem + 0.25vw); text-align:center; background:#ffffff;color:#000096;line-height:2em;}

/* On peut créer ses propes balises !! */
RE {color:#CC0000;} /* Couleur Rouge*/
HO:hover {color:#CC0000;  cursor:pointer;} /* Au Survol*/
CB {clear:both;}

.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;}
.histo{margin-left:auto;margin-right:auto;border:1px solid #0033ff;border-collapse:collapse;width:100%;text-align:center; max-width:600px;}
.histo td{border:1px solid #0033ff;width:20%;padding:2px;text-align:center;background-color:#ffffff;}
.histo95{margin-left:auto;margin-right:auto;border:1px solid #0033ff;border-collapse:collapse;width:95%;text-align:center; max-width:800px;}
.histo95 td{border:1px solid #0033ff;width:10%;padding:2px;text-align:center;background-color:#ffffff;}
.cadre{BACKGROUND-COLOR:#F8F8FF;BORDER:#0066ff 1px solid;TEXT-ALIGN:left;padding:0 0 0 15px;}
.cadre2{BACKGROUND-COLOR:#ffeed2;BORDER:#0066ff 1px solid;TEXT-ALIGN:left;padding:0 0 0 15px;}
.lien a{text-decoration:none;color:#1300ff;}
.lien :hover{color:#CC0000; cursor:pointer;}
.simple {border:0px; width: 100%; align-content: center}
.simple tr {border:0px; text-align: center;}
.simple td {border:0px; text-align: center;}

.standard {border:1px solid #0033ff; border-collapse:collapse; width: 100%; }
.standard tr {border:0px; }
.standard td {border:1px  solid #0033ff; text-align: left; padding-left: 5px;}
.carbu {border:1px solid #0033ff; border-collapse:collapse; width: 100%; }
.carbu tr {border:0px; }
.carbu tr:hover {background-color: #D6EEEE;}
.carbu th:hover {color: #ff0000;}
.carbu td {border:1px  solid #0033ff; text-align: left; padding: 3px 5px 3px 10px;}
.sobre {border:1px solid #0033ff; border-collapse:collapse; width: 100%; }
.sobre tr {border:0px; }
.sobre td {border:1px  solid #0033ff; text-align: left; padding: 3px 5px 3px 10px;}
.ligne {border:0px ; border-collapse:collapse; width: 100%; background-color: #edebf1;}
.ligne tr {border:1px  solid #0033ff; }
.ligne td {border:0px ; text-align: left; padding: 3px 5px 3px 10px;}



.retraite {border:1px solid #0033ff; border-collapse:collapse; width: 100%; }
.retraite tr {border:0px; }
.retraite tr:hover {background-color: #D6EEEE;}
.retraite th { text-align: left; }
.retraite td { text-align: center; padding: 3px 5px 3px 10px;}

.cell {border:0px solid #0033ff; border-collapse:collapse;}
.cell tr {border:0px; }
.cell td {border:1px  solid #0033ff; text-align: center; padding-left: 5px;}

table.num{border:0px;border-collapse:collapse;text-align:center;background-color:#e4f8f8;}
table.num tr.gras{font-weight:bold;}
table.num td{border:0px;padding:0px;text-align:right;}
table.budget{border:0px solid #0033ff;border-collapse:collapse;margin-top:10px;margin-left:60px;width:80%;}
table.budget td{border-bottom:1px solid #000080;border-top:1px solid #000080;padding:0px;background-color:#ffffff;}
table.budget td.gras{font-weight:bold;}
input, select {border:1px solid #0033ff; text-align: center;padding:3px;}
.petit{margin-left:auto;margin-right:auto;border:1px solid #0033ff;border-collapse:collapse;text-align:center;}



.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted rgb(20, 23, 231);  }
  
.tooltip .tooltiptext { visibility: hidden; width: 280px;	background-color: rgb(228, 226, 226); color: rgb(37, 23, 236); text-align: left; border-radius: 6px; padding: 10px; position: absolute; z-index: 1; top: 100%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s;   }
  
  /* flèche
  .tooltip .tooltiptext::after { content: ""; position: absolute;  top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent;  }  */

.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

.out { display:block; background:#bbb; border:1px solid #ddd; position:relative; margin:2em; width:90%; margin:auto; }
  
.in { background:#f0feff; border:6px solid #6495ed; position:relative; padding:5px; font-weight:normal; left:-5px; top:-5px; }


.titre1 {color: #0000CC;FONT: 18px   "Arial Narrow", Verdana, sans-serif, Arial, Helvetica, Georgia;}
.Style3 {color: #FF0000;}

.z_in:hover { cursor:zoom-in; }


fieldset {
		display: block;
		-webkit-margin-start: 2px;
		-webkit-margin-end: 2px;
		-webkit-padding-before: 0.35em;
		-webkit-padding-start: 0.75em;
		-webkit-padding-end: 0.75em;
		-webkit-padding-after: 0.625em;
		min-width: -webkit-min-content;
		border-width: 2px; border-style: groove; border-color: threedface; border-image: initial; padding: 10px; 
  }

.legend {
		display: block;
		-webkit-padding-start: 2px;
		-webkit-padding-end: 2px;
		border-width: initial;
		border-style: none;
		border-color: initial;
		border-image: initial;
		padding-left: 10px; padding-right: 5px; padding-top: 10px; padding-bottom: 5px;

}

.legendLayer .background { fill: rgba(255, 255, 255, 0.85); stroke: rgba(0, 0, 0, 0.85); stroke-width: 2; }

input[type="radio"] { margin-top: -1px; vertical-align: middle; }

.tickLabel { line-height: 1.1; }

.bouton {
    border: 0;
    line-height: 2.5;
    padding: 0 10px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgb(70, 135, 209);
    background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}

.bouton:hover {
    background-color: rgb(39, 79, 211);
}

.bouton:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}