/*CSS JEANNE*/

#header{
	padding: 10px 20px;
	border-bottom: 1px solid #CCC;
	margin-right: 0px;
	margin-left: 0px;
}
#header .user {
	padding-top: 0px;
}

#footer {
	clear: both;
	padding: auto;
	text-align: left;
	border-top: 1px solid #CCC;
	margin-right: 0px;
	margin-left: 0px;
	align-self: center;
}

/*menu*/
#barre{
	width: auto;
	
}
#barre > form:nth-child(1){
	display: flex;
}
#police{
	font-style : normal;
}
.aligner{
	display: ruby-base;
	margin-top: 0.17em;
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0rem;
    padding-left: 0rem;
}
ul, li {
	margin: 0 6px;
}
/*fin menu*/


section.row {
	text-align: center;
	align-items: center;
	padding-right: initial;
	padding-left: 25px;
}

div.form, div.index, div.view {
	border-left: none;
	width: 100%;
}

#cadre{
	background: #f0f0f0;
	padding: 15px;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}


div.form, div.index, div.view {
	float: left;
}

/*boutons*/

/* 
(EP 2020 03 09)
Jeanne avait fait ça mais c'est inutile et surtout incorrect
car les boutons changent de nombre (et de place)...
Donc par exemple, le bouton numero 6 n'est pas toujours le meme !!!

#boutons > a:nth-child(1) {
 display: inline-block;
 margin-right: 20px;
 margin-bottom: 10px;
}
#boutons > a:nth-child(2) {
 display: inline-block;
 margin-right: 20px;
 margin-bottom: 10px;
}
#boutons > a:nth-child(3) {
 display: inline-block;
 margin-right: 20px;
 margin-bottom: 10px;
}
#boutons > a:nth-child(6) {
 display:inline-block;
 margin-right: 20px;
 margin-top:10px;
 color:red
}
#boutons > a:nth-child(4) {
 display: inline-block;
 margin-right: 10px;
 margin-bottom: 10px;
}
#boutons > a:nth-child(10) {
 display: inline-block;
 margin-right: 10px;
 background: green;
 color: white;
}
*/

/* (EP) Je propose plutot ceci par défaut pour tous les boutons */
#boutons > a {
 display: inline-block;
 margin-right: 20px;
 margin-bottom: 10px;
}


/* (EP 20200316 deactivated), inutile
#materiel_images > img:nth-child(1) {
 float: right;
 padding-top: 17px;
}
*/


/* Élément | http://labinvent.test/materiels */

div.actions > p:nth-child(1) > a:nth-child(3) {
  display: inline-block;
  margin-bottom: 10px;
}

/* Élément | http://labinvent.test/materiels */

div.actions > p:nth-child(1) > a:nth-child(4) {
  display: inline-block;
  margin-bottom: 10px;
}

/* Élément | http://labinvent.test/materiels */

div.actions > p:nth-child(1) > a:nth-child(5) {
  display: inline-block;
  margin-bottom: 10px;
}

/* Élément | http://labinvent.test/materiels */

div.actions > p:nth-child(1) > a:nth-child(6) {
  display: inline-block;
  margin-bottom: 10px;
}

/* Élément | http://labinvent.test/materiels */

div.actions > p:nth-child(1) > a:nth-child(7) {
  display: inline-block;
  margin-bottom: 10px;
}


/* Élément | http://labinvent.test/materiels/index/CREATED */

div.actions > a:nth-child(2) {
  /* margin-right: 50px; */
  margin-right: 40px;
  display: inline-block;
  margin-bottom: 10px;
}

/* Élément | http://labinvent.test/materiels/index/CREATED */

div.actions > a:nth-child(3) {
  /* margin-right: 50px; */
  display: inline-block;
  margin-bottom: 10px;
}





/* 
**************************************************************************************
(EP 2020 03)
Bugfixing bootstrap css
Ci-dessous,
je surcharge volontairement quelques règles de bootstrap
qui posent problème.
**************************************************************************************
*/

/*
******* PB1 : on ne voit plus les messages d'alerte Flash (erreur ou succes)
La feuille _transitions.scss (qui vient de je ne sais où,
voir peut-etre https://www.npmjs.com/package/bootstrap-scss)
ajoute cette règle qui empeche de voir les messages d'alerte Flash 
($this->Flash->error par exemple)
.fade:not(.show) {
	opacity: 0;
}
Je la remplace donc par ceci :
*/
.fade:not(.show) {
	opacity: 1;
}


/*
******* PB2 : Les messages d'erreur sur formulaire suite a une faute de saisie s'affichent mal
Voici la forme de div qu'il faut traiter par exemple (materiel inventoriable):
<div class="checkbox has-error">
	<input type="hidden" name="materiel_administratif" value="0"/>
	<label for="materiel-administratif">
	<input type="checkbox" name="materiel_administratif" value="1" id="materiel-administratif">Inventoriable (&gt;1000€)</label>
	<div class="help-block">
		Le matériel vaut plus de 1000€ HT, il est donc obligatoirement inventoriable.
	</div>
</div>
*/
/*form div .has-error {*/
form .has-error {
	background: #FFDACC; /* couleur de fond du champ en erreur (rouge clair) */
	color: #9E2424; /* couleur du texte du champ en erreur (rouge) */
	/* inutile
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-ms-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	*/
	/* message d’erreur PAS en gras => mais c’est mieux en gras 
	text-shadow: none; 
	*/
}
/* space needed for error message display */
form .checkbox.has-error {
	/*height: 55px;*/
	height: auto;
}

/* (EP 20200312) Pour que les boutons "Enregistrer" et "Annuler" soient alignés dans les formulaires (sur Chrome),
	on joue sur le bouton submit "Enregistrer"
*/
form div.submit {
	vertical-align:middle;
}