body{background:#F2E6C2;font-size:20px;}
#quiestla{color:white;font-size:0.9em;width:900px;margin:0 auto;padding-left:40px;}
#quiestla a{color:white;font-size:0.9em;}
#general{padding:10px 10px 10px 120px;color:black;font-size:12px;width:990px;min-height:560px;margin:28px auto;background-image: url("images/spirale8.png");    background-repeat: repeat-y;border-radius: 0 50px 50px 0;box-shadow: 2px 2px 2px black,3px 3px 2px white,5px 5px 2px black,7px 7px 2px white,9px 9px 2px black;}
#titreG{width:100%;font-size:6em;color:#0365D5;letter-spacing:-3px;text-shadow:1px 1px 1px navy, 1px 1px 2px white,3px 3px 3px black;margin-top:-10px;margin-left: 20px;	height: 1.1em;
	display:inline-block;	padding-left:00px;text-transform:uppercase;}
#titreImg{height:225px;float:right;margin-top:-70px;filter: drop-shadow(5px 5px 5px #666666);}
#monbutton{display:inline-block;color:white;font-size:3em;border-radius: 10px;width:100%;text-align:center;text-transform: uppercase;}
#articles{width:100%;color:blue;font-size:12px;border:15px 15px blue;border-radius:15px;margin:2px auto;}

.message{background:white;background: linear-gradient(-45deg, gray, lightgray);color:black;font-size:1.5em;margin:8px auto;border:2px solid red;border-radius:5px;box-shadow: 2px 2px 2px rgba(0,40,0,.5);min-height:30px;}
.article{width:95%;background:white;background: linear-gradient(-45deg, rgba(55,93,129,.2), rgba(255,255,255,.5));color:blue;font-size:12px;margin:10px auto;border:1px dotted #004000;border-radius:5px;box-shadow: 2px 2px 2px rgba(0,0,0,.3);padding:10px;overflow: hidden;}
.articleNonPublie{background:white;background: linear-gradient(+45deg, rgba(249,241,169,.5), rgba(255,255,255,.75));color:blue;font-size:12px;margin:8px auto;border:1px dashed red;border-radius:5px;box-shadow: 2px 2px 2px rgba(0,0,0,.5);}
.communication{background:white;background: linear-gradient(+45deg, rgba(253,203,101,.5), rgba(223,183,101,.85));color:blue;font-size:1em;margin:8px auto;border:1px solid black;border-radius:5px;box-shadow: 2px 2px 2px rgba(0,0,0,.5);}
.titre{font-size:2em;text-transform: uppercase;text-shadow:1px 1px 3px gray;border-radius:5px 5px 0 0;padding-left: 5px;color:black;text-decoration:underline;}
.contenu{font-size:1.5em;padding-left:10px;color:black;margin:5px;border-radius:5px;}
.infos{font-size:1.7em;text-align:right;border-radius:0 0 5px 5px;padding-right: 5px;height:28px;color:darkblue;}
.article ul {list-style-type: circle;margin-left: 0px;margin-top: 0px;margin-bottom: 10px;}
.article ol {margin-top: 0px;}
.article li {text-decoration: none ;background: none;}
.article a {color: blue ;text-decoration:none ;}
.article a:hover {color: red;background : yellow;}
.article form {display:inline;}
.article .partie{color:blue;}

#pied{background:rgba(128,128,128,.35);	color:black; font-size:3em; border-radius: 10px; width:100%; text-align:center;	margin-top:2px;	font-size:17px;	box-shadow: 4px 4px 4px rgba(0,0,0,.5);}
#pied table{width:100%;	margin:0 auto;}
#pied a{color:black;text-decoration:none;}
#desinformations{background:rgba(55,93,129,.5);	color:white;font-size:1em;	border-radius: 10px;width:100%;	text-align:center;margin-top:2px;}	
#informations{color:navy;background:rgba(250,250,250,.75);font-size:1em;border-radius: 10px;width:50%;text-align:center;margin:20px auto;font-size:18px;}

/* Reset de base pour le menu*/
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Conteneur du menu */
.menu {
  font-family: 'Segoe UI', sans-serif;
}

.main-menu a{color:#0365D5;text-decoration:none;letter-spacing:2px;font-size:1.3em;}
.sub-menu a{color:darkgrey;text-decoration:none;letter-spacing:0px;font-weight:normal;}

/* Menu principal */
.main-menu {
  display: flex;
  flex-wrap: wrap;
}

.main-menu > li {background:white;
  position: relative;
  padding: 12px 15px;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease;
  text-transform:uppercase;
  font-weight:bold;
  font-size:1.1em;
  margin:5px 2px;
  border-radius:10px;
  border:1px dotted gray;
}

.main-menu > li:hover {
  background-color: #0365D5;
  border-radius:10px;
  text-shadow:1px 1px 1px white;
}


.main-menu > li:hover>a{color:white;text-transform:uppercase;}


/* Sous-menus */
.sub-menu {
  position: absolute;
  top: 110%;
  left: 0;
  background-color: #333;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  max-width: 600px;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 1000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:0px 5px 15px white;
}



/* Apparition au survol */
.main-menu > li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

/* Items des sous-menus */
.sub-menu li {
  padding: 12px 16px;
  color: #fff;
  white-space: nowrap;
  transition: background 0.3s;
  text-transform:none;
  overflow: hidden;
  text-shadow:1px 1px 1px #0365D5;
}

.sub-menu li:hover {
  background-color: #555;
}

/* Responsive */
@media (max-width: 768px) {
  .main-menu {
    flex-direction: column;
    align-items: stretch;
  }

  .main-menu > li {
    text-align: left;
  }

  .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    grid-template-columns: 1fr;
    max-width: none;
    background-color: #2c2c2c;
  }
}


#ajouterArticle{background:lightgrey;color:black;font-size:12px;width:95%;margin:0 auto;padding:10px;border:2px solid black;border-radius:5px 5px;}

button, input{font:16px helvetica, arial, Trebuchet MS, sans-serif ;border-radius : 5px 5px 5px 5px;background:lightgrey;}
.microbe td, .microbe td input, .microbe th{font-size:12px;color:blue;} /*utilisé dans la gestion des utilisateurs */

.scrollToTop {min-width:60px;z-index:0;position: fixed;left:calc(50% + 560px);top: 482px;padding: 2px 5px;background : linear-gradient(0deg, rgba(255,255,255,.7),rgba(255,255,255,1));color:black;border: 1px solid black;border-radius : 0px 0px 5px 5px;text-decoration: none;display : none;transform-origin: 0 0;transform: rotate(-90deg);transition: 0.4s ease;box-shadow: -3px 3px 3px black,-10px 5px 5px grey;}
.scrollToTop:hover{top: 462px;padding-left:10px;}
.scrollToBottom {min-width:50px;z-index:0;position: fixed;left:calc(50% + 560px);top: 555px;padding: 2px 5px;border: 1px solid black;background : linear-gradient(0deg,rgba(255,255,255,.7),rgba(255,255,255,1));color:black;border-radius : 0px 0px 5px 5px;text-decoration: none;display : none;transform-origin: 0 0;transform: rotate(-90deg);transition: 0.4s ease;box-shadow: -3px 3px 3px black,-10px 5px 5px grey;}
.scrollToBottom:hover{top: 585px;padding-left:10px;}

#telecharge{text-align:left;padding:20px;width:70%;font-size:20px;background: linear-gradient(-45deg, rgba(55,93,129,.5), rgba(255,255,255,.7));color:black;}
#ajout{font-size:20px;text-align:left;padding:20px;width:90%;background: linear-gradient(-45deg, rgba(55,93,129,.5), rgba(255,255,255,.7));color:black;}
#ajout p, #ajout label {font-size:20px;}
#modif{font-size:20px;text-align:left;padding:20px;width:90%;background: linear-gradient(-45deg, rgba(55,93,129,.5), rgba(255,255,255,.7));color:black;}
#modif p, #modif label {font-size:20px;}

#connexion{position:absolute;left:calc(50% - 480px);top: 0px;margin-bottom: 20px;padding : 2px;text-align: center ;border: 1px solid #6D2A01 ;border-radius:5px;background: linear-gradient(white, lightgrey);font:17px helvetica, arial, Trebuchet MS, sans-serif ;color: black;}
#connexion a{font:17px helvetica, arial, Trebuchet MS, sans-serif ;border-radius : 5px 5px 5px 5px;}
#connexion a:hover{color:blue;background : white;}

.code{text-align:left;background:white;border:1px black dotted;border-radius : 5px 5px 5px 5px;padding:5px;font-size:14px;}

.intercalaire {min-width:100px;z-index:0;position: fixed;left:calc(50% + 560px);top: 350px;padding: 2px 5px;background : linear-gradient(0deg, rgba(209,214,216,1),rgba(255,255,255,1));color:black;border: 1px solid black;border-radius : 0px 0px 5px 5px;transform-origin: 0 0;transform: rotate(-90deg);
text-align:center;box-shadow: -3px 3px 3px black,-10px 5px 5px grey;transition: 0.4 ease;}
.intercalaire a{text-decoration:none;color:black;}

.biaListe li{display:inline;list-style-type: none;margin:10px;}
.ficheBIA{width:100px;box-shadow:3px 3px 3px black;border:1px solid grey;}
.ficheBIA:hover{border:1px solid red;box-shadow:3px 3px 3px red;}

.tooltip { text-decoration:none; position:relative; letter-spacing:0px;}
.tooltip:hover{opacity:100%;} 
.tooltip span{display:none;border-radius:6px;color:black;background:white;letter-spacing:0px;top:0;}
.tooltip span img{float:left;margin:0px 8px 8px 0;}
.tooltip:hover span{transition: top 2s;display:block;position:absolute;top:1.5em;left:0;z-index:1000;width:auto;max-width:320px;min-height:10px;border:1px solid black;margin-top:12px;margin-left:32px;  overflow:hidden;  padding:8px; }