[data-theme="light"] {
  --gradient-one: #30cfd0;
  --gradient-two: #330867;
  --primary-color: #302AE6;
  --secondary-color: #536390;
  --logo-color-1: #347CB9;
  --logo-color-2: #ecf0f3;
  --logo-color-3: #a7aaaf;
  --logo-color-4: #347CB9;
  --heading-font-color: #fff;
  --font-color: #302AE6
  --bg-color: #e1e1e1;
  --heading-color: #292922;
  --invalid-color:#c62828;
  --valid-color:#388e3c;
  --nav-background-color:rgba(52, 124, 185, 0.8);
  --nav-border-color:darkblue;
  --nav-logo-color:#eee;
  --article-code-background-color:rgba(0, 0, 139, 0.2);
}

[data-theme="dark"] {
  --gradient-one: rgba(245, 107, 244, 0.79);
  --gradient-two: #efad05;
  --primary-color: #9A97F3;
  --secondary-color: #818cab;
  --logo-color-1: #818cab;
  --logo-color-2: #9A97F3;
  --logo-color-3: #818cab;
  --logo-color-4: #9A97F3;
  --heading-font-color: #e1e1ff;
  --font-color: #e1e1ff;
  --bg-color: #161625;
  --heading-color: #818cab;
  --invalid-color:rgba(183, 28, 28, 0.5);
  --valid-color:rgba(46, 125, 50, 0.5);
  --nav-background-color:rgba(16, 24, 30, 0.8);
  --nav-border-color:rgba(115, 130, 140, 0.2);
  --nav-logo-color:#0e1419;
  --article-code-background-color:var(--code-background-color)
  
}

html {
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: scrollbar;
}

body {
  margin:0;
  height: 100vh;
  width: 100vw;
  overflow: auto;    
  background-color: var(--bg-color);
  color: var(--font-color); 
  -webkit-font-smoothing: antialiased;
  text-align: center;
  font-family: Inconsolata;
}

a {
	color: var(--font-color);    
}
 a:hover {
	color:var(--font-color);
}

p {
	color: var(--font-color);    
}

ul {
  list-style: none;
}

ul li::before {
  content: "\200B";
}



#a-nav {
	color: var(--heading-font-color);    
	text-decoration: none;
	z-index: 2;
	transition:0.1s ease-in-out;
}
#a-nav:hover {
	color:var(--heading-font-color);
	transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transform: scaleX(1.03);
}

#a-menu {
		color: var(--font-color);    
		display: inline-block;
		position: relative;
		text-decoration: none;
		z-index: 2;
		transition:0.1s ease-in-out;
	}
#a-menu:hover {
		color:var(--font-color);
		transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transform: scaleX(1.03);
	}
}
.defaut_invisible{display:none}
@media print 
{
.impression_invisible{display:none}
.impression_visible{display:block}
}

.table-info,
.table-info > th,
.table-info > td {
  background-color: var(--bg-color);
  color:var(--font-color);
}

.table-info th,
.table-info td,
.table-info thead th,
.table-info tbody + tbody {
  border-color: var(--nav-border-color);
  color: var(--font-color);    
}

.btn-info {
  color: var(--font-color);
  background-color: var(--bg-color);
	padding: 0.1%;
    border: solid 2px var(--nav-border-color);
}

.btn-info:hover {
  color: var(--font-color);
  background-color: var(--nav-background-color);
  background: linear-gradient(
    to right,
    var(--gradient-one) 0%,
    var(--gradient-two) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 350ms ease-in-out;
	padding: 0.1%;
    border: solid 2px var(--nav-border-color);
}   

.header {
	position: fixed;
	width:100vw;
	padding: 1%;
    padding-bottom: 0%;
    border-bottom: solid 4px var(--nav-border-color);
    background-color: var(--nav-background-color);
	height: 150px;
    justify-content: space-between;
}

.header ul {
    margin-right: 1vw;
}

#logo-header {
    position: fixed;
    height: 6vh;
}

.logo {
    position: fixed;      /* la fameuse position fixed */ 
	top: 20px;
	left: 1em;
	background:url("../img/logo-nav-nsi.png");
	width:100px;
	height: 100px;
	margin:0 auto;
	box-shadow:   /* logo shadow */  0px 0px 2px var(--logo-color-1),  /* offset */  0px 0px 0px 5px var(--logo-color-2),  /*bottom right */  8px 8px 15px var(--logo-color-3),  /* top left */  -8px -8px 15px var(--logo-color-4)  ;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
}

@media (min-width: 1280px){
.image-accueil {
    background:url("../img/logo-accueil-nsi.gif");
	width: 396px;
	height: 400px;
	box-shadow:   /* logo shadow */  0px 0px 2px var(--logo-color-1),  /* offset */  0px 0px 0px 5px var(--logo-color-2),  /*bottom right */  8px 8px 15px var(--logo-color-3),  /* top left */  -8px -8px 15px var(--logo-color-4)  ;
	-webkit-border-radius: 26%;
	-moz-border-radius: 26%;
	-ms-border-radius: 26%;
	-o-border-radius: 26%;
}
}

@media (max-width: 1280px){
.image-accueil {
    background:url("../img/logo-accueil-nsi-small.gif");
	width: 198px;
	height: 200px;
	box-shadow:   /* logo shadow */  0px 0px 2px var(--logo-color-1),  /* offset */  0px 0px 0px 5px var(--logo-color-2),  /*bottom right */  8px 8px 15px var(--logo-color-3),  /* top left */  -8px -8px 15px var(---logo-color-4)  ;
	-webkit-border-radius: 26%;
	-moz-border-radius: 26%;
	-ms-border-radius: 26%;
	-o-border-radius: 26%;
}
}

@media (min-width: 1280px){
.video-accueil {
    /*background:url("../img/logo-accueil-nsi.mp4");*/
	width: 396px;
	height: 400px;
	box-shadow:   /* logo shadow */  0px 0px 2px var(--logo-color-1),  /* offset */  0px 0px 0px 5px var(--logo-color-2),  /*bottom right */  8px 8px 15px var(--logo-color-3),  /* top left */  -8px -8px 15px var(--logo-color-4)  ;
	-webkit-border-radius: 26%;
	-moz-border-radius: 26%;
	-ms-border-radius: 26%;
	-o-border-radius: 26%;
}
}

@media (max-width: 1280px){
.video-accueil {
    /*background:url("../img/logo-accueil-nsi-small.mp4");*/
	width: 198px;
	height: 200px;
	box-shadow:   /* logo shadow */  0px 0px 2px var(--logo-color-1),  /* offset */  0px 0px 0px 5px var(--logo-color-2),  /*bottom right */  8px 8px 15px var(--logo-color-3),  /* top left */  -8px -8px 15px var(---logo-color-4)  ;
	-webkit-border-radius: 26%;
	-moz-border-radius: 26%;
	-ms-border-radius: 26%;
	-o-border-radius: 26%;
}
}

#h1-header {
	font-size: 50px;
	font-weight: 700;
	font-family: Inconsolata;
	color: var(--heading-font-color);
    position: fixed;      /* la fameuse position fixed */ 
	top: 20px;            /* décalage des bords */
	left: 130px;
	letter-spacing: 10px;       /* donne de l'air au texte */
	text-decoration: none;
	z-index: 2;
	transition:0.1s ease-in-out;
}
#h1-header :hover {
	color:var(--heading-font-color);
	transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transform: scaleX(1.03);
}

#search-header {
    position: fixed;      /* la fameuse position fixed */ 
	top: 70px;            /* décalage des bords */
	right: 1em;
	padding: .5em;        /* donne de l'air au texte */
}

#logo-toc {
    position: fixed;      /* la fameuse position fixed */ 
	top: 70px;            /* décalage des bords */
	left: 140px;
	padding: .5em;        /* donne de l'air au texte */
}

.button-dark-light {
    position: fixed;      /* la fameuse position fixed */ 
	top: 80px;            /* décalage des bords */
	left: 480px;
	padding: .5em;        /* donne de l'air au texte */
    color: #fff;
}
.btn-sign-in {
    position: fixed;      /* la fameuse position fixed */ 
	top: 30px;            /* décalage des bords */
	right: 2em;
    color: #111;
	width: 280px;
	font-size: 14px;
	font-weight: bold;
	font-family: Inconsolata;
	letter-spacing: 3px;
}

.nav-link-user {
    position: fixed;      /* la fameuse position fixed */ 
	top: 2vh;            /* décalage des bords */
	right: 1.25em;
	color: var(--heading-font-color);
	font-size: 20px;
	font-weight: 700;
	font-family: Inconsolata;
}

.titre-identification {
    margin: 1% auto 1% auto;
    text-align: center;
	font-size: 35px;
	font-weight: 500;
	font-family: Inconsolata;
	letter-spacing: 8px;
	font-size: 72px;
  background: linear-gradient(
    to right,
    var(--gradient-one) 0%,
    var(--gradient-two) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 350ms ease-in-out;
}

#colonnes-index {
    height: 60vh;
    display: flex;
    justify-content: space-around;
	font-family: Inconsolata;
	color: var(--font-color);
}

#colonnes-index > div {
    /*width: 40%;*/
    margin: auto;
}

#colonnes-index table{
    margin-top: 3vh;
}

#colonnes-index img {
    display: block;
    width: 35%;
    margin: auto;
}

#conteneur-general {
	position: fixed;
	top: 150px;	
    width: 80%;
	margin-left: 10%;
    min-height: 300px;
    padding: 2%;
}

/*--------------------------------------------------------------
	Preloader
--------------------------------------------------------------*/
.page-loader {
  position: fixed;
  background: #161625;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  z-index: 9998;
}

.loader {
  position: absolute;
  border-left: 2px solid #ffffff;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  height: 46px;
  width: 46px;
  left: 50%;
  top: 50%;
  margin: -23px 0 0 -23px;
  text-indent: -9999em;
  font-size: 10px;
  z-index: 9999;
  -webkit-animation: load 0.8s infinite linear;
  -moz-animation: load 0.8s infinite linear;
  ms-animation: load 0.8s infinite linear;
  o-animation: load 0.8s infinite linear;
  animation: load 0.8s infinite linear;
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 46px;
  height: 46px;
}

@-webkit-keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.footer {
	position: fixed;
	bottom: 0;
    border-top: solid 4px var(--nav-border-color);
    background-color: var(--nav-background-color);
    padding: 1%;
    height: 10vh;
	width: 100vw;
    justify-content: space-between;
}