/* ==============================================
   LAYOUT — rows / areas / cols vars
   ============================================== */

:root {
  --max: 2200px;
  --gap-lg: 24px;
  --gap-md: 18px;
  --gap-sm: 14px;

  --bg-top: #2A77BD;
  --bg-bottom: #b9def4;
  --text: #0a0a70;
  --line: rgba(0,0,120,.14);
  --panel-bg: rgba(255,255,255,1); /*0.94*/
  --shadow: 0 4px 14px rgba(0,0,0,.10);
}

/* ==============================================
   PAGE
   ============================================== */

html { font-family:  Arial, Helvetica, sans-serif; font-display: swap;margin: 0; }   

.container {
  background: linear-gradient(var(--bg-top), var(--bg-bottom));
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-size: auto 100vh;
  color: var(--text);
}

.page {
  width: min(100% - 32px, var(--max));
  margin: 0 auto;
  padding: 16px 0 40px;
  color: var(--text);
}

h1, h2, h3, h4 { color:#000096; }

/* ==============================================
   ROWS
   ============================================== */

.row {
  display: grid;
  gap: var(--gap-lg);
  margin-bottom: var(--gap-lg);
  align-items: stretch;
}

.row-1 {
  grid-template-columns: 1fr;
  grid-template-areas: "a";
}

.row-2 {
  grid-template-columns: var(--cols-lg, 1fr 1fr);
  grid-template-areas: "a b";
}

.row-3 {
  grid-template-columns: var(--cols-lg, 1fr 1fr 1fr);
  grid-template-areas: "a b c";
}

.row-4 {
  grid-template-columns: var(--cols-lg, 1fr 1fr 1fr 1fr);
  grid-template-areas: "a b c d";
}

/* ==============================================
   SLOTS / BOXES
   ============================================== */

/* position dans la grille */
.slot-a { grid-area: a; min-width: 0; }
.slot-b { grid-area: b; min-width: 0; }
.slot-c { grid-area: c; min-width: 0; }
.slot-d { grid-area: d; min-width: 0; }

/* habillage commun */
.box,
.box-side,
.box-editorial,
.box-feed,
.box-widget {
  min-width: 220px;
  padding: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}


/* variante optionnelle pour les cartes nécessitant Flex */
.box-flex {
  display: flex;
  flex-direction: column;
}

/* tout flex mais pose problèmes avec img étirées à 200% parfois
.box,
.box-side,
.box-editorial,
.box-feed,
.box-widget {
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
*/

/* variantes */
.box-editorial { line-height: 1.5; }
.box-feed { font-size: .95em; }
.box-widget { justify-content: flex-start; }
.box-side { overflow: hidden; }

/* marges internes */
.box h1, .box h2, .box h3,
.box-side h1, .box-side h2, .box-side h3,
.box-editorial h1, .box-editorial h2, .box-editorial h3,
.box-feed h1, .box-feed h2, .box-feed h3,
.box-widget h1, .box-widget h2, .box-widget h3 {
  margin: 0 0 10px;
}

.box p,
.box-side p,
.box-editorial p,
.box-feed p,
.box-widget p {
  margin: 0 0 12px;
}

/*règle unique globale*/
[class^="box"] img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}


/*1. icônes inline*/
[class^="box"] img.icon {
  display: inline;
  max-width: none;
  margin: 0;
  vertical-align: middle;
}

/*2. images dans figure*/
figure img {
  margin: 0 auto;
}

/*3.images de layout*/
.img-full {
  width: 100%;
}

/* correctif avec full flex : images ne doivent pas remplir les flex box (Le > évite d’impacter des images imbriquées dans des composants plus complexes plus tard.) 
.box-editorial > img,
.box-side > img,
.box-feed > img,
.box-widget > img {
  max-width: 100%;
  height: auto;
  align-self: flex-start;
  display: block;
}
*/

/* ==============================================
   >= 1440
   ============================================== */

@media (min-width: 1440px) {

  html { font-size: calc(1rem + 0.06vw); }

  .row-2 {
    grid-template-columns: var(--cols-lg, 1fr 1fr);
    grid-template-areas: "a b";
  }

  .row-3 {
    grid-template-columns: var(--cols-lg, 1fr 1fr 1fr);
    grid-template-areas: "a b c";
  }

  .row-4 {
    grid-template-columns: var(--cols-lg, 1fr 1fr 1fr 1fr);
    grid-template-areas: "a b c d";
  }
}

/* ==============================================
   1024–1439
   ============================================== */

@media (min-width: 1024px) and (max-width: 1439px) {

  html { font-size: calc(1rem + 0.1vw); }

  .row {
    gap: var(--gap-md);
    margin-bottom: var(--gap-md);
  }

  .row-2 {
    grid-template-columns: var(--cols-md, 1fr 1fr);
    grid-template-areas: "a b";
  }

  .row-3.flow-default,
  .row-3.flow-ad {
    grid-template-columns: var(--cols-md, 1fr 1fr);
    grid-template-areas:
      "a b"
      "c c";
  }

  .row-3.flow-invert {
    grid-template-columns: var(--cols-md, 1fr 1fr);
    grid-template-areas:
      "c c"
      "a b";
  }

  .row-4 {
    grid-template-columns: var(--cols-md, 1fr 1fr);
    grid-template-areas:
      "a b"
      "c d";
  }
}

/* ==============================================
   640–1023
   ============================================== */

@media (min-width: 640px) and (max-width: 1023px) {

  html { font-size: calc(1rem + 0.15vw); }

  .page {
    width: min(100% - 16px, var(--max));
    padding-top: 10px;
  }

  .row {
    gap: var(--gap-sm);
    margin-bottom: var(--gap-sm);
  }

  .row-1 {
    grid-template-columns: 1fr;
    grid-template-areas: "a";
  }

  .row-2 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b";
  }

  .row-3,
  .row-3.flow-default,
  .row-3.flow-invert,
  .row-3.flow-ad {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "c";
  }

  .row-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "a b"
      "c d";
  }
}

/* ==============================================
   < 640
   ============================================== */

@media (max-width: 639px) {

  html { font-size: calc(1.2rem + 0.2vw); }

  .page {
    width: min(100% - 16px, var(--max));
    padding-top: 10px;
  }

  .row {
    gap: var(--gap-sm);
    margin-bottom: var(--gap-sm);
  }

  .row-1,
  .row-2,
  .row-3,
  .row-4 {
    grid-template-columns: 1fr;
  }

  .row-1 {
    grid-template-areas: "a";
  }

  .row-2 {
    grid-template-areas:
      "a"
      "b";
  }

  .row-3,
  .row-3.flow-default,
  .row-3.flow-invert,
  .row-3.flow-ad {
    grid-template-areas:
      "a"
      "b"
      "c";
  }

  .row-4 {
    grid-template-areas:
      "a"
      "b"
      "c"
      "d";
  }
}


/* ------------------------------   mise en forme interne ------------------------------------ */


@media (max-width:700px){

  .vign,
  .vignL{
    width:100%;
    margin:8px 0;
  }

  .ads_g{height:300px}
  html{font-size:calc(1.2rem + 0.2vw)}
}

/*body { } font-size: calc(14px + (26px - 14px) * ((100vw - 100vmin) / (100vmax - 100vmin)));*/


@media only screen and (max-width: 640px) {     /* For phone: 1 colonne */
.vign {width: 95%;}
.vignL {width: 95%;}
.ads_g {height:300px;}
html {  font-size: calc(1.2rem + 0.2vw);}

}

@media only screen and (min-width: 640px) {     /* For tablets: 2 colonnes */
.vign {width: 95%;}
.vignL {width: 95%;}
.ads_g {height:640px;}
html {  font-size: calc(1rem + 0.15vw);}
	
}

@media only screen and (min-width: 1024px) {     /* For desktop: 3 colonnes */
	ul.leftnav { display:inline-block;}
	.datej { display:inline-block;}
.vign {width: 95%;}	
.vignL {width: 95%;}
.ads_g {height:640px;}
html {  font-size: calc(1rem + 0.1vw);}

}
	                     
@media only screen and (min-width: 1440px) {     /* For desktop: 4 colonnes */
.vign {width: 45%;}	
.vignL {width: 95%;}
.ads_g {height:640px;}
html {  font-size: calc(1rem + 0.06vw);}

	}


.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,sans-Serif;color: #000096; font-weight:bold;font-style: italic;text-shadow: 5px 5px 5px #5A6F8D;font-size:calc(0.8em + 3vw);}
.message {float: left; font-family: Tahoma,Arial,sans-serif;color: #6d9fce; font-weight:bold;font-style: italic; font-size:calc(0.6em + 2vw); padding: 1.2vw 0 0 4vw;}

/*.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;}


.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;}
.sujet { display: none;}

ul.topnav li a:hover {background-color: #f7f5bf;color: #000096;width:100%;}

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*/
GR {color:#00ff00;}
GRD {color:#066106;}
BL {color:#0000ff;}
GRI {color:#6e6e6e;}
HO:hover {color:#CC0000;  cursor:pointer;} /* Au Survol*/
CB {clear:both;}

.titre-bloc { display: flex; align-items: baseline;  padding-bottom: 4px;  margin-top: 2em; }
.back-to-top {   margin-left: auto;   margin-right: 5px; text-decoration: none;   font-size: 0.9em;   color: #666;   opacity: 0.6;   transition: opacity 0.2s ease; }
.back-to-top:hover {   opacity: 1; }

.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;}
.simple_bord {border:3px solid #0033ff; border-collapse:collapse;width: 100%; align-content: center;}
.simple_bord tr {border:1px solid #0033ff; border-collapse:collapse; text-align: center;}
.simple_bord td {border:1px solid #0033ff; border-collapse:collapse; 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;}

table.sensible-g {border:1px solid #0033ff; border-collapse:collapse;  width: 100%; background-color: AliceBlue; }
table.sensible-g tr {border:1px; }
table.sensible-g tr:hover {background-color: LightSkyBlue  ;}
table.sensible-g th { text-align: left; }
table.sensible-g td { text-align: left; padding: 3px 5px 3px 10px;}

table.sensible-c {border:1px solid #0033ff; border-collapse:collapse;  width: 100%; background-color: AliceBlue; }
table.sensible-c tr {border:1px; }
table.sensible-c tr:hover {background-color: LightSkyBlue  ;}
table.sensible-c th { text-align: left; padding-left:10px;}
table.sensible-c td { text-align: center; padding: 3px 5px 3px 10px;}

table.gauche {border:1px solid #0033ff; border-collapse:collapse;  width: 100%; background-color: AliceBlue; }
table.gauche tr {border:1px; }
table.gauche th { text-align: left; }
table.gauche td { text-align: left; padding: 3px 5px 3px 10px;}

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

.bt_com { width:200px; text-align:center; border: none; outline: none; background-color: navy; color: white; cursor: pointer; margin:10px; padding: 5px; border-radius: 10px; font-size: 18px; }
  
  /* 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);
}





/* menu  ----------------------- */


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 div {  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;      z-index:500;} /* display:inline-block;*/
}

@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;     z-index:500;} /* display: inline-block; */
  }

  .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:2;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;}



/* new */


div.sticky {  position: -webkit-sticky;  position: sticky; width:100%; top: 0; padding: 0px;  border: 0px; z-index:500; background-color:#FFFFFF;}
div.menu_tab {  width:100%; top: 0; padding: 0px;  border: 0px; z-index:500; background-color:#000096;  text-align: left;}
div.ligne { margin:0; height:15px; width:100%; background-color:#000096;  }
	

div.blocs {  display: inline-block;  min-width:100px; user-select: none; text-align: left; vertical-align: top; padding: 0px 1vw 10px 20px; }
div.blocs a {font-size: 95%; color: #ffffff; text-align: left;  text-decoration: none;  transition: 0.3s; width:100%;   } /* font-weight: 400; */
div.blocs a:hover {background-color: #f7f5bf;color: #000096;width:100%; }

@media only screen and (max-width: 640px) {
div.on, div.off {  display: inline-block; color: #ffffff;  text-align: center;  margin: 0.5vw; padding: 0.5vw ; text-decoration: none;  cursor: pointer; } /* transition: 0.3s;*/

div.off, div.on { width:30%; min-width:120px; user-select: none; } 
div.off {  color: #000096; background-color:#cbd4eb;}
div.off:hover {color: #ff0000; }
div.on { color: #FFFFFF; background-color:#000096;}

div.blocs a { line-height: 150%;}


}

@media only screen and (min-width: 641px) {
div.on, div.off {  display: inline-block;  color: #ffffff;  text-align: center;  padding: 5px 15px 5px 15px;  text-decoration: none;  cursor: pointer; } /* transition: 0.3s;*/

div.off, div.on { width:6vw; min-width:100px; user-select: none; } 
div.off {  color: #000096; background-color:#cbd4eb;}
div.off:hover {color: #ff0000; }
div.on { color: #FFFFFF; background-color:#000096;}


}





/*[class*="on"]   selection attribute */

div.show, div.hide {  display:inline-block; width:100%; top: 0; padding: 0px;  border: 0px; z-index:500; background-color:#000096;  text-align: left; }
div.hide {display:none;  opacity: 0; }
div.show {display:inline-block;  opacity: 1; }

span.st {  color: #f3f707; text-decoration: underline; }