@charset "utf-8";


.grille {
margin: 2em 0;
display: grid;
grid-template-columns: 20em auto;
grid-auto-rows: min-content;
column-gap: 2em;
row-gap: 2em;
}

.grille h2, .grille .controles, .nogrille {
grid-column: span 2;
margin: 0;
}

.contenu label {
height: 2.5em;
line-height: 2.5em;
text-align: right;
}

.contenu .contsaisie {
position: relative;
}


.contenu .controles {
margin-left: 17em;
/*height: 4em;
margin: 2em 0 2em 16em;
line-height: 4em;
*/
}

.uitri {
height: 2em;
margin: 1em;
background: #fff5d0 !important;
position: relative;
z-index: 10;
-webkit-box-shadow: 0 0 1em 0 #777777;
        box-shadow: 0 0 1em 0 #777777;
}


button {
height: 3em;
padding: 0 2em 0 2em;
border: none;
font-size: 0.9em;
font-weight: normal;
color: #fff;
border-radius: 0.3em;
}

button:hover {
background-color: #eee;
}

button:active {
color:#555555;
}

button.blanc {
background-color: #fff;
color: #777;
}

button.bleu {
background-color: #4184C0;
}

button.orange {
background-color: #EC901A;
}

button.rouge {
background-color: #e03333;
}

button.vert {
background-color: #0AA609;
}

button.annuler {
margin-left: 2em;
opacity: 0.6;
}

button.supprimer {
margin-left: 2em;
}

button.pdf::before, button.excel::before {
display: inline-block;
left: 0;
margin-right: 1em;
font-family: Fontello;
}

button.pdf::before {
content: '\f1c1';
}

button.excel::before {
content: '\f1c3';
}

input, textarea, select {
box-sizing: border-box;
border-radius: 0.2em;
}

input[type="color"] {
font-family: inherit;
height: 2em;
padding: 0.2em 1em;
border: 1px solid #999999;
}

input[type="text"], input[type="date"], input[type="time"], input[type="password"], input[type="tel"] {
font-family: inherit;
width: 36rem;
height: 2.5em;
padding: 0 1em;
border: 1px solid #999999;
font-size: 1em;
font-weight: 400;
color: #333;
}

input[type="text"].petit, input[type="date"], input[type="time"], input[type="tel"], select.petit {
width: 10em;
}

input[type="text"].double {
width: 18rem;
}

input[type="text"].full, input[type="password"].full {
width: calc(100% - 2em);
}

textarea {
font-family: inherit;
width: 36em;
height: 6em;
padding: 0.5em 1em;
border: 1px solid #999999;
font-weight: 400;
color: #333;
}


select {
font-family: inherit;
font-size: 1em;
width: 36em;
height: 2.5em;
/*padding: 0.5em 1em;*/
padding: 0 1em;
border: 1px solid #999999;
font-weight: 400;
background-color: #f5f5f5;
color: #333;
}

select:disabled {
opacity: 0.5;
}

select.auto {
width: auto;
}

option {
background-color: #eee;
}

input[type="color"] {
}

input.erreur, textarea.erreur, select.erreur, button.erreur {
border: 1px solid #aa0000 !important;
background-color: #fff0f0;
}

.continput {
position: relative;
display: grid;
width: 36em;
gap: 1em;
}

.continput input, .continput select, .continput textarea {
width: 100%;
}

.continput.f11 {
grid-template-columns: 1fr 1fr;
}

.continput.f12 {
grid-template-columns: 1fr 2fr;
}

.continput.f111 {
grid-template-columns: 1fr 1fr 1fr;
}

.continput.f2121 {
grid-template-columns: 2fr 1fr 2fr 1fr;
}

.continput.f51 {
grid-template-columns: 5fr 1fr;
}


.contenu .pagination {
text-align: center;
margin: 2em auto;
}

.pagination a, .pagination span {
display: inline-block;
width: 2rem;
height: 2rem;
margin-right: 0.5em;
line-height: 2rem;
/*font-size: 0.8em;*/
font-weight: normal;
text-decoration: none;
color: #555;
}

.pagination a:nth-child(-n+2), .pagination span:nth-child(-n+2), .pagination a:nth-last-child(-n+2), .pagination span:nth-last-child(-n+2) {
font-family: Fontello;
font-weight: 600;
}

.pagination a:last-child, .pagination span:last-child {
margin-right:0;
}

.pagination a:hover {
background-color: var(--fond-actif);
border-radius: 0.3em;
color: #fff;
}

.pagination span:not(.actif) {
opacity: 0.5;
}

.pagination span.actif {
background-color: var(--fond-main);
border-radius: 0.3em;
color: #fff;
}

.pagination.alpha a, .pagination.alpha span {
font-family: inherit;
font-weight: inherit;
}

.pagination a.reset, .pagination span.reset {
font-family: Fontello;
}


.jointure {
}

.jointure label {
display: inline-block;
min-width: 4em;
height: 1.2rem;
line-height: 1.2rem;
text-align: left;
margin: 0 1rem 1rem 0;
background-color: #fff;
font-weight: 500;
font-size: 0.8em;
border: 2px solid #999;
color: #999;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
transition: color 0.3s ease, border-color 0.3s ease;
}

.jointure label:hover {
border: 2px solid #555;
color: #555;
}

.jointure label input {
margin-left: 1rem;
float: right;
}

.jointure label:has(input:checked) {
border-color: #aaaaff;
color: #55d;
background-color: #f8f8ff;
/*background: linear-gradient(to bottom,  #eef 0%,#d5d5ff 100%);*/
}

.jointure label.marge {
margin-bottom: 1em;
}

.selimg {
float: left;
width: 50%;
}




@media only screen and (max-width: 991px) {

	.contenu .intitule {
	float: none;
	width: 100%;
	text-align: left;
	height: 2em;
	line-height: 2em;
	}

	.contenu .saisie {
	float: none;
	width: 100%;
	/*height: 2em;*/
	min-height: 2em;
	line-height: 2em;
	margin-bottom: 2em;
	}

	.contenu .controles {
	margin: 0;
	}

	button {
	width: calc(50% - 1em);
	padding: 0;
	}

	button.annuler {
	margin-left: 2em;
	}

	input[type="text"], input[type="date"], input[type="time"], input[type="password"], input[type="tel"] {
	width: calc(100% - 2em);
	}

	input[type="text"].petit, input[type="date"], input[type="time"], input[type="tel"], select.petit {
	width: calc(50% - 1em);
	}

	input[type="text"].double {
	width: calc(100% - 2em);
	}

	input[type="text"].full, input[type="password"].full {
	width: calc(100% - 2em);
	}

	textarea {
	width: calc(100% - 2em);
	height: 10em;
	}

	select {
	width: 100%;
	}


}