@charset "UTF-8"; 
/*@media (prefers-color-scheme: light) { */

*,
*::after,
*::before {
  box-sizing: inherit;
  padding: 0;
}
:root {
  box-sizing: border-box;
  --bktable:#EBF3FF;
  --tblsel:darkorange;
  --thchild:#ACC8F7;
  --primary: #5963ff;
  --hover-color: #52fded;
  --dark: #4233a8;
  --noir:black;
  --light: white;
  --header-bg: var(--primary);
  --lightprim:#f1edff;
  --alert:red;
  --lightRed:#FF7276;
  --lightOrange:#FFD580;
  --lightGreen:lightgreen;
  --lightGray:lightgray;
  --alupic: #002D56;
  
}
html{
    background:var(--alupic);
    color:var(--light);
}

body {
  font-family: "josefin sans", "helvetica", sans-serif;
  font-size: 1rem;
  background: var(--alupic);
  color:var(--light);
  counter-set: section 0 subsection 0 subsubsection 0;
}

header {
    background: var(--header-bg);
    padding-left: 1.5em;
    position: sticky;
    top: 0;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    z-index: 10;
}
footer{
    font-size:0.8em;
    color:var(--bktable);
    font-weight: bold;
}
section{
color:#555;
background: var(--lightprim);
text-align:justify;
width: 95%;
margin:10px 20px;
padding:0;
}

/*
	****************************** INPUT
*/
input[type=button], input[type=submit], input[type=file],button[type=submit],a,select,button{
	border-radius: 20px;
	color: var(--light);
	background-color: var(--primary);
	border: 3px solid var(--dark);
	padding: 5px 12px;
	margin:10px;
	font-weight: 800;
	text-decoration: none;
}

input[type=button],button[type=submit],input[type=file], input[type=submit],a,button:hover {
    border: 3px solid: var(--light);
	background-color: var(--dark);
	color: var(--light);
}
input:disabled {
  background-color: var(--thchild);;
  color: linen;
  opacity: 1;
}
input[type=radio]+label{
	color: var(--primary);
  padding: 0 1em 0 0;
}
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=date],input[type=number] {
  font-size: 14px;
  background: var(--lightprim);
  border:none;
  margin-bottom: 25px;
  padding-left:10px;
  border-radius: 5px;
  height: 50px;
}

input[type=text]:invalid, input[type=password]:invalid, input[type=email]:invalid, input[type=tel],input[type=number]:invalid{  background: rgba(255, 0, 0, .4);}
input[type=text]:valid, input[type=password]:valid, input[type=email]:valid, input[type=tel],input[type=number]:valid{ background: var(--lightprim)}

textarea{
	width:100%;
	resize: vertical;
	background: var(--lightprim);
}
label {
  font-weight: 800;
}
.mybanner{
        color:var(--primary);
        text-shadow:1px 1px 1px #000;
        
        background-position-x:right;
        position: relative;
        width:80%;
        /* padding-bottom: 2em; */
        padding-left: 1em;
        border:1px solid var(--primary);
        border-radius:10px;
        -moz-border-radius:10px;
        -moz-box-shadow: 0 0 5px var(--primary);
        -webkit-box-shadow: 0 0 5px var(--primary);
        box-shadow: 0 0 5px var(--primary);
        z-index: 2;
        margin-bottom:10px;
        margin-left: auto;
        margin-right: auto;
        }

ol{
	padding:20px;
}
summary:before {
		content: counter(section) ". " ;
		}
details{
			counter-increment: section;
    }
summary{
			text-align: left;
			font-size: 16pt;
			font-weight: bold;
			counter-reset: subsection;
}
h2:before {
    content: counter(section) "." counter(subsection) ". "
}
h2{
    counter-increment: subsection;
	counter-reset: subsubsection;
}
h3:before {
    content: counter(section) "." counter(subsection) "." counter(subsubsection) ". "
}
h3{
    counter-increment: subsubsection;
}
h5{
    font-size: 1.5em;
}
/**************************************************************** TABLES ****************************************************************/
caption { border:1px solid var(--primary); /* titre de la table  bord en maron */ 
 color:var(--primary);					  /* texte de la table  bord en maron */ 
 font-weight:bold;				  /* texte en gras */
/* letter-spacing:20px;			  /* espace entre chaque lettre et mot 20px */
 padding:6px 4px 8px 0px;		  /* sp?fie la marge qui s?re un ?ment de chacune de ses bordures (marges int?eures) */
 text-align:center;				  /* centrer dans la cellule */
 text-transform:uppercase;		  /* texte en majuscule */
  font-style:italic;				/* police en italique */
}

thead th, tfoot th {
 padding:3px 10px 3px 10px;   		/* sp?fie la marge qui s?re un ?ment de chacune de ses bordures (marges int?eures) */
 text-align:left;					/* texte align? gauche */
 /* text-transform:uppercase;	*/		/* texte en majuscule */
 background: var(--primary);
}
tbody td a { color:#363636;			/* corps du tableau couleur maron fonc? */
 text-decoration:none;				/* sp?fie pas de d?rations d'un mot */
}
p {margin: 0 0 1.5em 0;
    color: var(--light);
}
/**************************************************************** FIN TABLES ****************************************************************/
.branding-logo {
  color: var(--light);
  font-size: calc(2rem + 1vw);
  text-decoration: none;
}


/*Reset CSS*/
*{
    padding: 0px;
    font-family: Avenir, sans-serif;
}

.links {
	background-color: var(--lightprim);
	background-image: linear-gradient(to bottom, #0003, transparent);
	border-bottom: 1px solid #0003;
	box-shadow: 0 0 32px #000006cf;
	font-size: 1em;
	font-weight: 300;
	border-radius: 1em;
	width: 90%;
    margin: auto;
    margin-top: 60px;
    display: inline;
}
.links > a {
	color: #fff;
    padding: 0.75em;
    text-align: center;
    text-decoration: none;
    transition: all .75s;
    text-shadow: 1px 1px 1px #fff;
    border: 2px solid #aaa;
    border-radius: 25px;
    background: var(--primary);
}
.links > a:hover {
	background: var(--light);
	color: #00f;
	border: 2px solid #00f;
}
.links .menulogo {
    background:unset;
    border:unset;
}
.links .menulogo img{
    width: 40px;
    vertical-align: middle;
}
.links .menulogo:hover {
    background: var(--thchild);
  color: #00f;
  border: 2px solid #f00;
  border-radius: 0.5em;
  padding: 1em;
}

.links > .line {
	height: 1px;
	pointer-events: none;
	text-shadow: none;
	color: var(--light);
    padding: 1em;
    font-weight: bold;
}
.button{
    font-size:1em;
    padding: 0.2em;
    margin: 0.2em;
    width: 10em;
}
table,thead,tbody {
border: 2px solid var(--alupic);
}

@media screen and (max-width: 1000px) {
    .mybanner{
        padding: 0em;
        width:100%;
    }
    .links {
    	font-size: 0.75em;
    	border-radius: 15px;
    	padding: 0.5em;
    	border: unset;
    	background-color: unset;
    	background-image:unset;
    	border-bottom: unset;
    	box-shadow: unset;
    }
    .links > a {
        padding:0.5em;
        border: 1px solid #aaa;
        border-radius: 10px;
        display: block;
    }
    .links .menulogo {
        border: 1px solid var(--primary);
        border-radius: 15px;
    }
    section{
        width: unset;
        margin: unset;
        text-align:unset;
    }
}

@media only screen and (max-width: 78.75em) {
  .submenu .submenu .submenu {
    left: -100%;
    top: 0.5em;
  }
  .submenu {
    min-width: 16em;
  }
}
@media only screen and (max-width: 58.75em) {
  .menu li a {
    font-size: 1rem;
  }
}

@media only screen and (max-width: 50em) {
  header {
/*     position: relative; */
    padding: 1.5em 2em;
  }
  /* reveal menu */
  input[type="checkbox"]:checked + .menu {
    position: absolute;
    opacity: 1;
    transform: scaleY(1);
  }
}
@media screen and (max-width: 600px) {
    .links {
    	font-size: 1em;
    	border-radius: 1em;
    }
    .links > a {
        border: 1px solid #aaa;
        border-radius: 10px;
        display: block;
    }
}

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #bbb;
}

main {
/* just to make scrollable vertically to see sticky navbar    */
  height: 200vh;
}

.logo {
	 background: url("logo.png") no-repeat transparent;
	 width:150px;
	 height: 150px;
	 background-size: 150px 130px;
	 padding:0.5em;
	 margin-right: 10px;
     float: left;
     
}
   
    ul { margin-left: 1.5em; padding-left: 1.5em; }
    ul ul { margin-left: 3em; padding-left: 3em; }
    table {
     width:100%;
     padding:0;
     border:1px solid var(--noir);;
     border-collapse:collapse;
     font:bold 10px verdana, arial, helvetica, sans-serif;
     background:var(--bktable);
     color:var(--noir);
    }

    td { 
     text-align: center;
     padding: 0.1em;
     border: 1px solid var(--alupic);
     }

    caption { border:1px solid var(--primary); 
     color:red;					 
     font-weight:bold;				 
     padding:6px 4px 8px 0px;		 
     text-align:center;				 
     text-transform:uppercase;
      font-style:italic;
      font-size:1.5em
    }
    tr { border: 1px solid gray;
    }
    thead th, tfoot th {
         color:var(--light);;
         padding:3px 10px 3px 10px;
         text-align:center;
        /* text-transform:uppercase; */
         border-color:var(--dark);
         background: var(--primary);
    }  
    tbody tr:nth-child(odd) {
       background-color: var(--thchild);
      color: var(--noir);;
    }
    tbody tr:nth-child(even) {
      color: var(--noir);
    }
  /*
.button {
  align-items: center;
  background: gray;
  color:var(--light);;
  margin: 0 0.5em;
  background-clip: padding-box;
  border: 1px solid transparent;
  border-radius: .5rem;
  box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 16px;
  font-weight: 600;
  justify-content: center;
  line-height: 1.25;
  margin: 0;
  min-height: 3rem;
  padding: calc(.875rem - 1px) calc(1.5rem - 1px);
  position: relative;
  text-decoration: none;
  transition: all 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  width: auto;
}

.button:hover{
  background-color: darkorange;
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
  transform: translateY(-2px);
}
*/


.imgleft {
    margin-right: 10px;
    float: left;
}
.mybtntrash {
	 background: url("../imgs/poubelle.svg")no-repeat transparent;
height: 30px;
width: 30px;
border: 1px transparent;
border: 1px solid var(--noir);;
border-radius: 0.25em;
vertical-align: middle;
margin-right: 2px;margin-left: 2px;
}
.mybtnmodif {
	 background: url("../imgs/modif.svg")no-repeat transparent;
height: 30px;
width: 30px;
border: 1px transparent;
border: 1px solid var(--noir);;
border-radius: 0.25em;
vertical-align: middle;
margin-right: 2px;margin-left: 2px;
}

.mybtnprinter
 {
	 background: url("../imgs/printer.svg")no-repeat scroll 3px 2px transparent;
height: 30px;
width: 30px;
border: 1px transparent;
border: 1px solid var(--noir);;
border-radius: 0.25em;
vertical-align: middle;
margin-right: 2px;margin-left: 2px;
}

fieldset{
	border: 3px var(--primary) solid;
	border-radius: 10px;	
	margin: 10px auto;
    padding: 10px;
	background: var(--lightprim);
	width:90%;
}

fieldset p{
	line-height:1.5em;
}

legend{
    font-size: 1.2em;
    font-style: italic;
    color: var(--primary);
    font-weight: 600;  
    padding: 0px 1em;
}
/* ------------------ Toogle switch ----------------------- */
.switch {
position: relative;
  width: 40px;
  height: 20px;
  display: inline-flex;
  margin-left: 8px;
  margin-right: 8px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  border-radius: 10px;
  cursor: pointer;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  border-radius: 50%;
  content: "";
height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: var(--light);;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--primary);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--primary);
}

input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}
.toogleTxt {
display: inline-block;
margin-right: 1em;
}
.toogleTxt p{
  font-weight: 800;
  display: inline-block;
  position:relative;
  top:13px;
}
/* --- pour l'utilisation voir css duval */
.swichok{
  position: relative;
  width: 40px;
  height: 20px;
  display: inline-flex;
  margin-left: 8px;
  margin-right: 8px;
  background: var(--primary);
  border-radius: 10px;
}
.swichok span{
  position: absolute;
  content: "";
  border-radius: 50%;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: var(--light);;
  -webkit-transition: .4s;
  transition: .4s;
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
  }
  
.swichno{
  position: relative;
  width: 40px;
  height: 20px;
  display: inline-flex;
  margin-left: 8px;
  margin-right: 8px;
  background: #ccc;
  border-radius: 10px;
}

.swichno span{
  position: absolute;
  content: "";
  border-radius: 50%;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: var(--light);;
  -webkit-transition: .4s;
  transition: .4s;
  }
.rotate{
    transform: rotate(90deg);
}
@media (max-width: 700px){
    table thead {
     display: none;
    }
.rotate{
    transform: rotate(0);
}
    table tr{
    display: block;
    margin-bottom: 40px;
    }
    table tr:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    font-size:1rem;
    color:darkorange;
    }

    table td {
    display: block;
    text-align: right;
    }

    table td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    font-size:1rem;
    color:var(--primary);
    }
    
    table th {
    display: block;
    text-align: right;
    }
    table th:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    font-size:1rem;
    color:var(--primary);
    }
    /*
    input,select{
        width: 100%;
        margin:0px;
    }
    */
    input[type="button"]{
        margin:5px;
        padding: 5px;
    }
    fieldset{
        background: var(--light);
    }
}