label, #toggle
{
    display: none;
}

label
{
    display: none;
}	
    }
	
	    td .label 
    {
        display: none;

    }
	    table .label 
    {
        display: none;

    }






	
li{	
	
list-style-type: "\2705";
}

nav,
.nav-item {
	display: flex;
}

nav {
	border-radius: 6px;
	background-image: linear-gradient(
		rgb(48, 48, 48) 13%,
		rgb(30, 30, 30) 40%,
		#0c0d11 86%
	);
	color: rgba(255, 255, 255, 0.6);
	text-shadow: 0 -2px 0 black;
	cursor: pointer;
	box-shadow: 1px 2px 4px rgb(20, 20, 20), 0 4px 12px rgb(10, 10, 10);
}




.menublog {

	display: inline-block;
    padding:0;                  /* Suppression des marges internes */
    background-color: #cccccc;     /* Ajout de la couleur d'arrière-plan */
	border: 1px solid white;
	height: 70px
	width: 50%;
	border-radius: 15px;
}
.menublog li {
	 display:block;
 float:left;  
    list-style-type: none ;       /* Suppression des puces */
}

.menublog a {
    display:block;                /* Transformation en block */
    min-width: 120px;             /* Largeur minimale des liens */      
    margin: 0.5rem;               /* Marges externes (1 valeurs = 4 directions) */
    padding: 0.5rem 0.8rem;            /* Marges internes (2 valeurs = haut/bas et gauche/droite)*/
    text-align: center;           /* Centrage du texte */   
    background-color: #599494;    /* Couleur d'arrière-plan */
    color: #fff;                  /* Couleur du texte */
    text-decoration: none;        /* Suppression du soulignement */
    border: 1px solid #fff;       /* Ajout d'une bordure */
    border-radius: 4px;           /* Arrondis des bordures */
}

.menublog a:hover {
  background-color: #353535;
  color: #cccccc;
  border-color: #cccccc;
}


.nav-item {
	flex-direction: row-reverse;
	font-size: 0.8999rem;
	line-height: 1rem;
	align-items: center;
	min-width: 120px;
	justify-content: space-between;
	transition: all 80ms ease;

	&.active {
		color: $primary;
		text-shadow: 0 0 3px hsla(260, 100%, 70%, 0.7);
	}

	&:not(.active):hover {
		color: rgba(255, 255, 255, 0.87);
	}

	&:hover > .icon .subicon {
		height: 32px;
		width: 32px;
		border-radius: 32px;
		top: -16px;
		right: -16px;
		border-color: white;
	}

	&:not(:first-of-type) {
		border-left: 1px solid rgb(60, 60, 60);
	}
	&:not(:last-of-type) {
		border-right: 0.1rem solid black;
	}

	a {
		color: inherit;
		text-decoration: none;
		padding: 1ch;
	}
	
	a:hover {
		color: inherit;
		text-decoration: none;
		padding: 1ch;
	}	

	.icon {
		padding: 1ch;
		position: relative;

		.subicon {
			text-shadow: none;
			transition: all 40ms ease;
			position: absolute;
			top: -3px;
			right: -3px;
			background: red;
			color: white;
			box-shadow: 0 0 4px rgba(41, 41, 41, 0.405);
			width: 18px;
			height: 18px;
			border-radius: 14px;
			font-size: 0.7em;
			font-weight: 700;
			display: inline-grid;
			place-items: center;
			border: 2px solid mix(white, red);
		}
	}

	.icon > svg {
		max-width: 16px;
	}
}






	
	
	
	
	
	
	
	
	
        .btn { 
            background-color: limeGreen; 
            border: none; 
            color: white; 
            padding: 12px 30px; 
            cursor: pointer; 
            font-size: 20px; 
        } 
  
        .btn:hover { 
            background-color: green; 
        } 
		code, pre{
			max-width:100% !important;
			overflow: auto;
			}
		
		#avertissement {
	display: none;
}
 @media only screen and (orientation:portrait) and (max-width: 591px) {
#wrapper {
	display: none;
}
#avertissement {
	display: block;
	opacity: 0.9;
	width: 100%;
	height: 100%;
}
}
 @media only screen and (orientation:landscape) and (max-width: 591px) {
#avertissement {
	display: none;
}
}
		
	
input[type=text] {
  height: 50px;
  padding: 8px 8px;
  margin: 8px 0;
    font-size: 16px;
	  border-radius: 8px;
  box-sizing: border-box;
   border:3px solid orange;
 background-color: #f9d268;
 color: black;
}


input[type=password] {
  height: 50px;
  padding: 8px 8px;
  margin: 8px 0;
    font-size: 16px;
	  border-radius: 8px;
  box-sizing: border-box;
   border:3px solid orange;
 background-color: #f9d268;
  color: black;
}

.blink {
  animation: blink 1s infinite;
}
@keyframes blink { 
  0% { opacity:0.1; }
  50% { opacity:1; } 
  100% { opacity:0.1; }
}



input[name=stats]  {
	  padding: 4px 4px;
	  border-radius: 8px;
  box-sizing: border-box;
   border:4px solid orange;
 background-color: #f9d268;
  color: #dba103;
}

 
textarea {

  box-sizing: border-box;
  border-radius: 8px;
   border:2px solid orange;
 background-color: #f9d268;
  font-size: 16px;
  resize: none;
   color: #dba103;
}

.button {
text-decoration: none;
padding: 10px;
font-family: verdana;
font-size: 1em;
color: #ffffff;
background-color: #ffb70b;
text-shadow: 1px 1px 1px black;
border-radius: 4px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border: 2px groove #000000;
box-shadow: 1px 6px 8px #444444;
-webkit-box-shadow: 1px 6px 8px #444444;
-moz-box-shadow: 1px 6px 8px #444444;
  );
  box-shadow:
    inset 2px 2px 3px rgba(255, 255, 255, 0.6),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}

.button:hover {
padding: 10px;
color: #696969;
background-color: #ffb70b;
text-shadow: 1px 1px 1px black;
border: 2px groove #cccccc;
box-shadow: 1px 6px 6px #7f7f7f;
-webkit-box-shadow: 1px 6px 6px #7f7f7f;
-moz-box-shadow: 1px 6px 6px #7f7f7f;
}

a {
	color: #c48f00;
  position: relative;
  display: inline-block;
  text-decoration: underline;

}

a:hover {
	color: #c48f00;
  position: relative;
  display: inline-block;
  text-decoration: underline;

}



  
  
}
select,
select::picker(select) {
	appearance: base-select;
   border:2px solid orange;
 background-color: #f9d268;
 
}


.fond_table{
	
bgcolor: #ffba00;
background: linear-gradient(156deg,rgba(46, 46, 46, 1) 0%, rgba(52, 83, 94, 1) 39%, rgba(70, 126, 143, 1) 65%, rgba(83, 237, 224, 1) 100%);
cellpadding: 10px;
margin: 8px 8px 8px 8px;
padding: 8px 8px 8px 8px;
 
} 

.fond_table2{
border: 2px solid #a54040;
color: #ffffff;	
background-color: #ff0000;
cellpadding: 5px;
margin: 8px 8px 8px 8px;
padding: 8px 8px 8px 8px;
 width: 60%;
 border-radius: 10px;
} 


.vignets {
    
    animation: fadein 8s;
    -moz-animation: fadein 8s; /* Firefox */
    -webkit-animation: fadein 8s; /* Safari et Chrome */
    -o-animation: fadein 8s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* sur Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* sur Safari et Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* sur Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
	



img.shadow  {

  box-shadow: 0px 4px 6px #000;

}	
	
	
	/* --------- */
/*   MENU    */
/* --------- */
nav#menu {
  text-align: center;
  margin: 10px 0;
  padding: 0;
  background: #222;
  border-radius: 10px;
  box-shadow: 0 2px 1px #9c9c9c;
}
/* --------- */
nav#menu ul,
nav#menu ul li {
  position: relative;
  display: block;
  padding:0;
  margin:0;
  list-style: none;
}
nav#menu > ul a {
  display: block;
  padding: 10px 10px;
  color: #999;
  font: normal 1em Arial, Helvetica;
  text-decoration: none;
}
/* --------- */
/*  Level 1  */
nav#menu > ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content:center;
}
nav#menu > ul > li > a {
  padding: 15px 20px;
}
/* HOVER */
nav#menu > ul li:hover > a {
  color: #fafafa;
}
nav#menu > ul li:hover > ul {
  display: block;
}

/* --------- */
/* Level 2 + */
nav#menu > ul ul {
  position: absolute;
  display: none; /* HIDE */
  min-width: 100%;
  max-width: 200%;
  top: 100%;
  left: 0;
  padding:2px 0 0;
  z-index: 99999;
}
nav#menu > ul ul li {
  background: #333;
  box-shadow: 0 1px 0 #111111 inset, 0 2px 0 #777777 inset;
}
nav#menu > ul ul li:first-child,
nav#menu > ul ul li:first-child > a {
  border-radius: 5px 5px 0 0;
  box-shadow: none;
}
nav#menu > ul ul li:last-child,
nav#menu > ul ul li:last-child > a {
  border-radius: 0 0 5px 5px;
}
/* :hover */
nav#menu > ul ul a:hover {
  background: #0186ba; /* blue */
}
/* --------- */
/*  Level 3  */
nav#menu > ul ul ul {
  top: 0;
  left: 100%;
  padding:0 2px 0;
}
nav#menu > ul ul ul li {
  background: #444;
}

/* --------- */
/*  ARROWS   */
nav#menu > ul ul li:first-child > a:after {
  content: '';
  position: absolute;
  left: 30px;
  top: -8px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #333;
}
nav#menu > ul ul ul li:first-child a:after {
  left: -8px;
  top: 12px;
  width: 0;
  height: 0;
  border-left: 0;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  border-right: 8px solid #444;
}
nav#menu > ul ul li:first-child a:hover:after {
  border-bottom-color: #0186ba;
}
nav#menu > ul ul ul li:first-child a:hover:after {
  border-right-color: #0186ba;
  border-bottom-color: transparent;
}
/* ------- */
/* SPECIAL */
/* Temporisation à la fermeture*/
nav#menu li > ul {
  display:block !important;
  visibility: hidden;
  opacity: 0;
}
nav#menu li:hover > ul {
  visibility: visible;
  opacity: 1;
}
nav#menu li:not(:hover) > ul { transition: visibility 0.5s, opacity 0.5s linear; }







label, #toggle
{
    display: none;
}

label
{
    display: none;
}
 
@media all and (max-width: 891px), (orientation: portrait)
{
    nav
    {
        height: 60px;
    }
 
    div#main_pages 
    {
        display: none;

    }
	
	    td .affich 
    {
        display: none;

    }
	    table .affich 
    {
        display: none;

    }
	    affich 
    {
        display: none;

    }
 
    div .main_pages a {
        width: 50%;
    }
 
    label 
    {
        width: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        font-size: 40px;
        cursor: pointer;
    }
 
    #toggle:checked {
        display: flex;
    }
}



hr {
    border: 1 px solid orange;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}




select {
  width: 40%;
  min-width: 15ch;
  max-width: 15ch;
  border: 2px solid orange;
  border-radius: 0.35em;
  padding: 0.25em 0.5em;
  font-size: 1.35rem;
  cursor: pointer;
  line-height: 1.3;
  background-color: #f9d268;
 }
 
 
 select:hover,
select:focus {
  background: #f9d268;
}




input[type=submit], input[type=reset] {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 1px #000;
  border-radius: 10px;
  background-color: orange;

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

input[type=submit]:hover, input[type=reset]:hover {
     background-color: ORANGE;
  color: #ffffff;
 }
input[type=submit]:active, input[type=reset]:active {
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
  color: #ffffff;
 }





/*-----------------------------------------*/
* {
	margin: 0;
	padding: 0;
  
	}
#menu-tab {
	/*background: white;*/
    font-family: 'trebuchet ms', geneva; 
	font-size: 11pt;
	color:black;
	}
	
#menu-tab a {
color: grey;
font-weight: normal;
font-style: normal;
text-decoration: none;
font-variant: normal;
}
#menu-tab a:hover{
color: green;

}
	
/*--------------Dimensions tableau--------------*/

#page-wrap {
	  width: 70%; 
	  margin: 10px auto;
	  
	}
	
/*--------------Onglets--------------*/

.tabs {
      position: relative;   
      min-height: 480px; /* This part sucks */
      clear: both;
      margin: 25px 0;
    }
    .tab {
      float: left;
    }
    .tab label {
      background: rgba(170, 185, 185, 0.97);
      padding: 10px; 
      border: 1px solid #ccc; 
      margin-left: -1px; 
      position: relative;
      left: 1px; 
      border-radius: 10px 10px 0px 0px;
      box-shadow: 3px -3px 6px rgba(0, 0, 0, 0.71);
    }
    .tab [type=radio] {
      display: none;   
    }
	
/*--------------Contenu article onglet--------------*/
    .content {
      position: absolute;
      top: 28px;
      left: 0;
      background: white;
      right: 0;
      bottom: 0;
      padding: 20px;
      border: 1px solid #ccc; 
      border-radius: 0px 10px 10px 10px;
      box-shadow:6px 6px 10px rgba(0, 0, 0, 0.41);
      overflow: hidden;
	  overflow-y: auto;
	  margin-bottom: -20px;
    }
    .content > * {
      opacity: 0;
      
      -webkit-transform: translate3d(0, 0, 0);
    
      -webkit-transform: translateX(-100%);
      -moz-transform:    translateX(-100%);
      -ms-transform:     translateX(-100%);
      -o-transform:      translateX(-100%);
      
      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }
	
/*-------------Onglets actifs--------------*/

    [type=radio]:checked ~ label {
      background: white;
      border-bottom: 1px solid white;
      z-index: 2;
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }
    [type=radio]:checked ~ label ~ .content > * {
      opacity: 1;
      
      -webkit-transform: translateX(0);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
    }
/*--------------Images--------------*/

	.content img {
	border:4px solid white;
	box-shadow:6px 6px 10px grey;
	-webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
	}
	
	.content img:hover {
	opacity: 0.8;
	-webkit-transform: rotate(7deg);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
	  
	  -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
	  }
	  
	  
 /* unvisited link */
a:link {
  color: orange;
text-decoration: none; 
}

/* visited link */
a:visited {
  color: orange;
text-decoration: none; 
}

/* mouse over link */
a:hover {
  color: orange;
    text-decoration: none ; 
}

/* selected link */
a:active {
  color: orange;
    text-decoration: none ; 
} 




div.menuaxel{
  background-color: #91ccf5;
  color: black;
    width: 100%;
    min-height: 400px;
        padding: 5;
    margin: 5;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;
	text-align: center;
    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}
div.menuaxel2{
  background-color: #ffffff;
  color: black;
    width: 90%;
    min-height: 400px;
        padding: 5;
    margin: 5;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;
	text-align: center;
    border: 2px solid #cccccc;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}











div.cats{
  background-color: #91ccf5;
  color: black;
    width: 100%;
    height: 110px;
        padding: 5;
    margin: 5;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;
	text-align: center;
    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}


	.containeur
	{
	width: 80%;
	align: center;


.loupe{
-moz-transition: opacity 0.9s;
-webkit-transition: opacity 0.9s;
-o-transition: opacity 0.9s;
transition: transform 0.3s;
}
.loupe:hover{
opacity:0.9;
-moz-transition: opacity 0.7s;
-webkit-transition: opacity 0.7s;
-o-transition: opacity 0.7s;
transform: scale(1.05);
}





a img{
-moz-transition: opacity 0.9s;
-webkit-transition: opacity 0.9s;
-o-transition: opacity 0.9s;
transition: transform 0.3s;
}
a img:hover{
opacity:0.7;
-moz-transition: opacity 0.7s;
-webkit-transition: opacity 0.7s;
-o-transition: opacity 0.7s;
transform: scale(1.1);
}


div.nok{
  background-color: #FF6262;
  color: black;
    width: 200px;
    height: 60px;
        padding: 10;
    margin: 10;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;

    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}

div.ok{
  background-color: #95E8A1;
  color: black;
    width: 200px;
    height: 60px;
        padding: 10;
    margin: 10;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;

    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}


div.avatar{
  background-color: #ffb43d;
  color: black;
    width: 80px;
    height: 80px;
        padding: 10px;
      
   position: relative;
    overflow: hidden;
    box-sizing: border-box;

    border: 2px solid #000000;
    border-radius: 10px;
    box-shadow: -1px 5px 10px black;
}

.tabs { 
    font-family: 'Lucida Sans', sans-serif;
    font-size: 20px;
}

.tabs .tab-registers {
    display: flex;
    background-color: RGB(255, 255, 255);
}


.tabs button {
    padding: 0.5em;
    background-color: RGB(255, 255, 255);
    border: none;
    font: inherit;
}

.tabs .tab-registers button:hover {
    cursor: pointer;
}

.tabs .tab-bodies {
    padding: 0.5em;
    background-color: RGB(235, 235, 235);
    flex-grow: 1;
    overflow-y: auto;
}

.tabs button.active-tab {
    background-color: rgb(235, 235, 235);
}


* {
	margin: 0;
	padding: 0;
  
	}
#menu-tab {
	/*background: white;*/
    font-family: 'trebuchet ms', geneva; 
	font-size: 11pt;
	color:black;
	}
	
#menu-tab a {
color: grey;
font-weight: normal;
font-style: normal;
text-decoration: none;
font-variant: normal;
}
#menu-tab a:hover{
color: green;

}
	
/*--------------Dimensions tableau--------------*/

#page-wrap {
	  width: 70%; 
	  margin: 10px auto;
	  
	}
	
/*--------------Onglets--------------*/

.tabs {
      position: relative;   
      min-height: 480px; /* This part sucks */
      clear: both;
      margin: 25px 0;
    }
    .tab {
      float: left;
    }
    .tab label {
      background: rgba(170, 185, 185, 0.97);
      padding: 10px; 
      border: 1px solid #ccc; 
      margin-left: -1px; 
      position: relative;
      left: 1px; 
      border-radius: 10px 10px 0px 0px;
      box-shadow: 3px -3px 6px rgba(0, 0, 0, 0.71);
    }
    .tab [type=radio] {
      display: none;   
    }
	
/*--------------Contenu article onglet--------------*/
    .content {
      position: absolute;
      top: 28px;
      left: 0;
      background: white;
      right: 0;
      bottom: 0;
      padding: 20px;
      border: 1px solid #ccc; 
      border-radius: 0px 10px 10px 10px;
      box-shadow:6px 6px 10px rgba(0, 0, 0, 0.41);
      overflow: hidden;
	  overflow-y: auto;
	  margin-bottom: -20px;
    }
    .content > * {
      opacity: 0;
      
      -webkit-transform: translate3d(0, 0, 0);
    
      -webkit-transform: translateX(-100%);
      -moz-transform:    translateX(-100%);
      -ms-transform:     translateX(-100%);
      -o-transform:      translateX(-100%);
      
      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }
	
/*-------------Onglets actifs--------------*/

    [type=radio]:checked ~ label {
      background: white;
      border-bottom: 1px solid white;
      z-index: 2;
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }
    [type=radio]:checked ~ label ~ .content > * {
      opacity: 1;
      
      -webkit-transform: translateX(0);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
    }
/*--------------Images--------------*/

	.content img {
	border:4px solid white;
	box-shadow:6px 6px 10px grey;
	-webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
	}
	
	.content img:hover {
	opacity: 0.8;
	-webkit-transform: rotate(7deg);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
	  
	  -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
	  }