html,body {
 	height: 100%;
 	width: 100%;
}

body {
	margin: 0;
	padding: 0;
	font: 14px/100% Public, Geneva, Helvetica, sans-serif;
	background-color: var(--couleurBase);
}
body * {
	margin: 0;
	padding: 0;
	text-align: left;
	line-height: 110%;
}
* [tabindex="0"] {
	outline: 1px solid var(--couleurBase);
	outline-offset: 4px;
}
.pasdelien {
	color:#222;
}
a, a.visted {
	text-decoration: none;
	color: var(--couleurBaseContrasteFort);
}
.retard a, .retard a.visted {
	text-decoration: none;
	color: var(--neutre);
}

h1.fixe {
	position: absolute;
	font-size: 130%;
	color: var(--couleurBase);
	background-color: var(--neutre);
	width: 150px;
	margin-left: var(--margin);
	border-radius: calc(2*var(--radius));
	padding: var(--padding);
	border: 1px solid var(--couleurBaseContrasteFort);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}
h4 {
	margin-bottom: calc(0.2*var(--margin));
	color: var(--couleurTypo);
}

.retard h4 {
	margin-bottom: calc(0.2*var(--margin));
	color: var(--neutre);
}
mark {
	margin-top: var(--margin);
	display: block;
	width: max-content;
	padding: calc(0.5*var(--padding));
	background-color: var(--couleurBaseAttenuée);
}
.projet {
	display: inline-block;
	border: 1px solid var(--ficheBord);
	margin: calc(0.5*var(--margin));
	width: var(--ficheWidth);
	min-width: var(--ficheMinWidth);
	padding: var(--padding);
	min-height: var(--ficheMinHaut);
	overflow-x: hidden;
	overflow-y: auto;
	border-radius: calc(1.5*var(--radius));
	background-color: var(--couleurBaseTresAttenuée);
	height: auto;
}
.projet h3 {
	border: 1px var(--couleurBaseContraste);
	background: var(--couleurBaseTresAttenuéeEntière);
	padding: calc(0.4*var(--padding));
	min-width: 10%;
	margin: calc(-1*var(--padding));
	margin-bottom: calc(0.7*var(--margin));
	color: var(--couleurBaseContrasteFort);
	position: relative;
	border-bottom: 1px solid var(--couleurBaseAttenuée);
}
.projet ul {
	margin-left: calc(1*var(--padding));
	margin-top: calc(1.2*var(--margin));
}
.projet ul > li {
	margin-top: calc(0.5*var(--padding));
	list-style: none;
	padding: calc(0.4*var(--padding));
	margin-left: calc(-1*var(--padding));
	padding-left: calc(2*var(--padding));
	border-radius: var(--radius);
	background-color: var(--neutre);
	border: 1px solid var(--bordNeutre);
	padding-bottom: calc(0.8*var(--padding));
	margin-bottom: calc(0.7*var(--margin));
}
#ident {
	float: right;
	width: max-content;
	background-color: var(--neutre);
	padding: calc(0.5*var(--padding));
	border-radius: calc(1.5*var(--radius));
	border: 1px solid var(--couleurBase);
}
#idf {
	position: absolute;
	border: 1px solid var(--couleurBase);
	width: 200px;
	right: 0px;
	background-color: var(--neutre);
	padding: var(--padding);
	border-top-left-radius: calc(2*var(--radius));
	border-bottom-left-radius: calc(2*var(--radius));
	z-index: 22;
}
.rien {
	display: block;
	margin-top: calc(1*var(--margin));
}
h4 a img {
	width: 50px !important;
	height: 10px;
}
.projet h3 .logo img,
.nomProjet img {
	height: 25px;
}
#chxln {
	float: right;
	top: 0px;
	position: absolute;
	right: 0;
}
#chxln ul > li {
	background-color: var(--couleurBaseAttenuée);
	margin-top: calc(0.6*var(--margin));
	right: calc(-0.4*var(--margin));
	position: relative;
	padding: calc(0.8*var(--padding));
	border-top-left-radius: calc(3*var(--radius));
	border-bottom-left-radius: calc(3*var(--radius));
	list-style: none;
	text-align: center;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border: 1px solid var(--couleurBaseContraste);
	cursor: pointer;
}
#chxln li.active {
	border: 1px solid var(--couleurBaseTresAttenuéeEntière);
	background-color: var(--couleurBase);
	color: var(--neutre);
	cursor: default;
}

#connect {
	float: right;
	margin-top: calc(-0.5*var(--margin));
	margin-right: var(--bordDroit);
}
#connect dl {
	margin-bottom: calc(0.3*var(--margin));
	text-align: right;
	padding-right: calc(0.5*var(--padding));
	font-size: 90%;
	color: var(--couleurBaseContrasteFort);
}
.nomProjet {
	border: 1px solid var(--bordNeutre);
	width: max-content;
	border-bottom: 0;
	padding: calc(0.3*var(--padding));
	margin-left: calc(-0.6*var(--margin));
	margin-bottom: calc(-0.4*var(--margin));
	background-color: var(--boutonT);
	padding-bottom: calc(0.5*var(--padding));
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
}
.ferme, 
.deconnect {
	position: absolute;
	top: calc(0.4*var(--padding));
}
.erreur2 {
	width: 100%;
	text-align: center;
	display: block;
	background-color: var(--alerte);
	padding: var(--padding);
	font-size: 110%;
}
.ferme {
	right: var(--padding);
}
.deconnect {
	right: 37px;
}
.léger {
	font-size: 90%;
	color: var(--couleurBaseCode);
}
#idf label {
	width: 100%;
	margin-top: calc(0.7*var(--margin));
	padding-bottom: calc(0.5*var(--padding));
}
#idf h2 {
	font-size: 110%;
	margin-top: calc(0.5*var(--margin));
	margin-bottom: calc(0.5*var(--margin));
}
#idf .bouton {
	float: right;
	color: var(--couleurBaseContrasteFort);
}
#idf span img {
	width: 17px;
}
#nav, #navAdmin {
	border: 1px solid var(--couleurBaseContrasteFort);
	width: max-content;
	padding: var(--padding);
	border-radius: calc(2*var(--radius));
	background-color: var(--couleurBaseAttenuée);
	margin-top: var(--margin);
	margin-bottom: var(--margin);
}
#nav ul > li {
	display: inline-block;
	margin-right: var(--margin);
	font-size: 120%;
	font-weight: 600;
	border: 1px solid var(--couleurBaseFoncée);
	border-radius: var(--radius);
	padding: calc(0.7*var(--padding));
	background-color: var(--couleurBaseAttenuée);
}
#nav ul > li.active {
	border: 1px solid var(--couleurBaseTresAttenuéeEntière);
	background-color: var(--couleurBase);
	color: var(--neutre);
}
#nav ul > li a {
	color: var(--couleurBaseContrasteFort);
}
#navAdmin {
	width: 39px;
	display: inline-block;
	position: absolute;
}
#navAdmin ul > li {
	display: inline-block;
	margin-right: var(--margin);
	font-size: 120%;
	font-weight: 600;
	border: 1px solid var(--couleurBaseFoncée);
	border-radius: var(--radius);
	padding: calc(0.7*var(--padding));
	background-color: var(--couleurBaseAttenuée);
}
#navAdmin ul > li.active {
	border: 1px solid var(--couleurBaseTresAttenuéeEntière);
	background-color: var(--couleurBase);
	color: var(--neutre);
}
#navAdmin ul > li a {
	color: var(--couleurBaseContrasteFort);
}
#cartes {
	padding: var(--padding);
	margin-top: var(--margin);
}
#principal {
	padding-top: calc(2*var(--padding)) !important;
	margin: auto;
	border: 1px dotted grey;
	width: 100%;
	max-width: var(--pageMin);
	background-color: var(--neutre);
	padding-top: cacl(2*var(--padding));
	border-bottom-right-radius: calc(2*var(--radius));
	border-bottom-left-radius: calc(2*var(--radius));
}
article #taches {
	column-count: 3;
}
article #taches.multi {
	column-count: 1 !important;
}
article#taches h2 {
	width: 100%;
}
.projet.multi {
	width: 96%;
}
.projet.multi {
	width: 96%;
}
.multi h3 {
	width: 101%;
	position: relative;
}
.multi ul {
	display: inline-block;
	position: relative;
	width: 100%;
	column-count: 3;
}
.multi ul > li {
	width: 92%;
	display: inline-block;
}
.details h4 img {
	width: 6px;
	border-radius: calc(2*var(--radius));
}
.details {
	padding-bottom: calc(0.3*var(--padding));
}
.retard {
	background-color: var(--retard) !important;
	color: var(--neutre);
}
.alertes {
	background-color: var(--alerte) !important;
	color: var(--couleurTypo);
}
.aVoir {
	background-color: var(--avoir) !important;
	color: var(--couleurTypo);
}
.prio0 {
	background-color: #d3d3d345 !important;
}
.prio0 h4 {
	font-weight: 400;
	color: var(--couleurBaseContrasteFort) !important;
}
.mea {
	display: inline-block;
	margin-left: calc(0.5*var(--padding));
	padding: calc(0.3*var(--padding));
	border-radius: var(--radius);
	color: var(--couleurTypo);
	border: 1px solid var(--couleurBase);
}
.sujet {
	border: 1px solid var(--couleurBaseClaire);
	display: inline-block;
	border-radius: calc(2*var(--radius));
	padding: calc(0.6*var(--padding));
	background-color: var(--boutonT);
	margin-top: calc(0.5*var(--margin));
	font-size: 80%;
}
.acteur {
	background-color: var(--couleurBaseAttenuée);
	cursor: pointer;
}
.encours {
	background-color: var(--léger);
}
.afaire {
	border: 1px solid var(--attribute);
	background-color: var(--moinsLéger);
	opacity: 1;
}
.fini {
	background-color: var(--léger);
	opacity: 0.5;
}
.projets {
	background-color: var(--fondMini);
}
.categorie {
	background-color: var(--fondMini);
}


#modif h1, #delete h1 {
	background-color: #eaeaea;
	border-bottom: 1px solid grey;
	width: 620px;
	margin: 0px;
	padding: 10px;
	margin-top: -10px;
	margin-left: -10px;
	margin-bottom: 16px;
	font-size: 130%;
	color: #C05800;
}

#maintenance {
	padding-left: 8px;
	border: 1px solid grey;
	color: grey;
}

#nav {
	margin-left: 400px;
	font-size: 100%;
}
#formulaire {
	margin-top: 25px;
	padding-top:8px;
	padding-left: 8px;
	padding-bottom: 16px;
	padding-right: 8px;
	position: fixed;
	background-color: #eee;
	border: 1px solid grey;
	display: none;
	
}
#corps, #modif, #ajout {
	padding-top:8px;
	padding-left: 8px;
	margin-top: 10px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}
#corps {
	width: 650px;
	margin-left: 320px;
}
#modif {
	width: 650px;
}
#modif, #ajout {
	margin-left: 8px;
}
#ajout {
	width: 550px;	
}
.statut {
	cursor: pointer;
}
.pasvu {
	display : none;
}
.vu {
	display : block;
}
.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important; 
	clip-path: inset(50%) !important; 
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
	background-color: var(--neutre) !important;
	color: var(--couleurBaseFoncée) !important;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
	clip: auto !important;
	clip-path: none !important;
	height: auto !important;
	margin: auto !important;
	overflow: visible !important;
	width: auto !important;
	white-space: normal !important;
	outline: none;
}
.sr-only-focusable {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important; 
	clip-path: inset(50%) !important; 
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}
dd,dt {
	display: inline-block;
}
.projet button img {
	width: 14px;
	cursor: pointer;
}
nav button img {
	width: 15px;
	cursor: pointer;
}
nav#filtres ul > li {
	display: inline-block;
	margin-right: var(--margin);
	border-radius: calc(1.5*var(--radius));
	border: 1px solid var(--couleurBase);
	padding: calc(0.5*var(--padding));
	background-color: var(--couleurBaseAttenuée);
}
nav#filtres ul > li a {
	color: var(--couleurBaseContrasteFort);
}
nav#filtres ul > li.active {
	background-color: var(--couleurBase);
	color: var(--neutre);
}
nav#filtres {
	float: right;
	position: relative;
}
.details .ligne {
	margin-bottom: calc(0.5*var(--margin));
}
.details .ligne.petite {
	margin-top: calc(-0.5*var(--margin));
}

form.ligne {
	text-align: right;
	padding-top: 0;
	top: calc(-1.5*var(--margin));
	position: relative;
}
form.ligne label {
	width: max-content;
	padding-right: var(--padding);
}
#univers {
	float: right;
	position: absolute;
	top: calc(10*var(--margin));
	right: 0;
	width: 50px;
}
#univers ul > li {
	transform: rotate(-90deg);
	background-color: var(--couleurBaseTresAttenuéeEntière);
	margin-top: calc(2*var(--margin));
	right: calc(-0.4*var(--margin));
	position: relative;
	padding: calc(0.8*var(--padding));
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
	list-style: none;
	text-align: center;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#univers li.inactif {
	border: 1px solid var(--couleurBaseTresAttenuéeEntière);
	background-color: var(--couleurBase);
	color: var(--neutre);
	border-bottom: 0;
	cursor: default;
}
.descrip {
	float: right;
	margin-top: calc(-1*var(--margin));
	width: 18px;
	font-size: 1px;
	color: var(--couleurTypo);
	background-repeat: no-repeat;
	background-size: 17px;
	height: 21px;
	border: 0;
	background-color: transparent !important;
	border-radius: calc(2*var(--radius));
	cursor: pointer;
	/*visibility: hidden;*/
}
.descrip.actif {
	background-image: url(../pic/flecheHaut.svg);
}	
.descrip.inactif {
	background-image: url(../pic/flecheBas.svg);
}	
.description {
	border: 1px solid var(--couleurBaseAttenuée);
	margin-bottom: calc(0.5*var(--margin));
	background-color: var(--fondMini);
	padding: calc(0.3*var(--padding));
} 
.cache { display: none; }
.modale {
	width: 600px;
	height: auto;
	max-height: 500px;
	background-color: var(--couleurBaseTresAttenuéeEntière);
	border: 6px solid var(--couleurBaseContrasteFort);
	position: fixed;
	top: 250px;
	opacity: 1;
	z-index: 220000005;
	margin-left: 450px;
	padding: var(--padding);
	border-radius: calc(3*var(--radius));
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.InModale {
	width: 97% !important;
	border: 0 !important;
}
input[type="submit"], button.annule, .ligne button {
	width: max-content !important;
	/*float: right;*/
	display: inline-block;
	margin-top: var(--margin);
	margin-left: var(--margin);
	padding: calc(0.4*var(--padding)) !important;
	height: auto !important;
	background-color: var(--couleurBaseAttenuée);
	border-radius: var(--radius);
	border: 1px solid var(--couleurBaseClaire);
	cursor: pointer;
}
.droite {
	float: right;
	width: max-content;
}
#delete, #modif {
	width: 90%;
	margin: auto;
	margin-top: 10px;
	border: 1px solid var(--couleurBase);
}
#ajout .ligne {
	margin-top: calc(0.4*var(--margin));
	margin-bottom: calc(0.4*var(--margin));
}
#ajout label {
	max-width: 391px;
	width: 20%;
}
#modif input, #modif select, #ajout input, #ajout select {
	height: 20px;
	font-size: 95%;
}
#modif input {
	width: 80%;
}
#modif textarea {
	font-size: 100%;
	width: 80%;
	height: 100px;
}
#modif input.long {
	width: 480px;
}
#modif input.court {
	width: 70px;
	text-align:  center;
}





.BtAjout { 
	margin-left : 12px;
}
.label {
	display: inline-block;
	width: 180px;
}
.label2 {
	display: inline-block;
	width: 10px;
}
label.droite {
	text-align: right;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 4px;
}
label.long {
	width: 160px !important;
}
label.treslong {
	width: 180px;
}
#corps .grp, #corps .grp2 {
	width: 100%;
}
label {
	display: inline-block;
	width: 15%;
	max-width: 100px;
}
#corps .grp2 > label {
	width : 100% !important;
}
#url, #nom, #sorte, #perimetre, #destination, #priorite, #ecosysteme, #type, #applications, #g1, #gestionnaire, #c1, #contributeur, #etb, #objectif, #appli, #asp, #rdg, #id, #perso {
	height: 20px;
	width: 200px;
	font-size: 95%;
}
#eco, #etat, #statutL, #statutsiteL {
	width: 270px;
	font-size: 95%;
}
option {
	font-size: 90%;

}

.souligne {
	background-color: yellow;
}
.envoi {
	float:right;
}
.grp, .grp2, .grp3, .grp4 {
	display: block;
}
.grp {
	margin-bottom: 3px;
}
.grp2 {
    display: block;
    height: 20px;
    margin-left: 12px;
    padding-top: 0;
}
.grp2 > input  {
	vertical-align: bottom;
}
.grp3 {
	margin-bottom:2px;
}
#modif .grp {
	width: 650px;
}
#modif .grp.bouton {
	margin-top: 12px;
	display: block;
	padding-top: 6px;
	padding-bottom: 6px;
	width: 100%;
	text-align:right;
}
span.enum {
	display: inline-block;
	padding-bottom: 4px;
}
#modif .ligne {
	margin-bottom: calc(0.5*var(--margin));
	display: block;
}
#modif label {
	display: inline-block;
	width: 90px;
	margin-top: 5px;
	font-size: 110%;
	vertical-align: initial;
}
#modif input.jours, #modif input.mois {
	width: 30px;
}
#modif input.annee {
	width: 60px;
}
.alerte {
	font-size : 120%;
	text-align: center;
	color: #aa2222;	
}


.cachee {
/* 	background: url(../pic/ferme.png) no-repeat 0 0 #fff; */
	height: 25px !important;
	overflow: hidden;
	width: 100%;
	border: 1px solid #aaa;
	border-bottom: 1px dotted grey;
	padding-bottom: 0px;
}
.cacheeA {
	padding-left: 15px;
	background: url(../pic/ferme.png) no-repeat 0 0;
}
.montree {
/* 	background: url(../pic/ouvert.png) no-repeat 0px 2px #fff; */
	height: auto;
/* 	overflow: hidden; */
	width: 100%;
	border: 1px solid #aaa;
	padding-bottom: 6px;
}
.montreeA {
	padding-left: 15px;
	background: url(../pic/ouvert.png) no-repeat 0px 2px;
}
.inconnu {
	color: grey;
}
.Pmiseenavant {
	font-weight: bold;
	margin-top: 4px;
}
#boutons {
	display: block;
	clear: both;
	margin-top: 2px;
}
.bouton {
    background: #448AD1;
    border-top: 1px solid #40658B;
    border-radius: 0px 0px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-size: 85%;
    height: 16px;
    line-height: 16px;
/*     padding: 0 5px; */
    margin: 0 5px;
    position: relative;
    text-transform: uppercase;
	margin-left: -8px;
	width: 100%;
	padding-right: 8px;
}
.bouton.del {
	margin-top: 16px;
	margin-bottom: 6px;
	width:610px;
	height: 22px;
	text-align: right;
}
.petit {
    height: 12px !important;
    line-height: 12px !important;
    padding: 0px;
	width: 12px;
	text-align: center;
	margin-bottom: 2px;
}
.court {
	width: 20px;
}
.surfiche {
	margin-top: 8px;
	width: 550px;
/* 	border: 1px solid red; */
}
.surfiche > .titre {
	border-top: 1px solid #803A00;
	border-left: 1px solid #803A00;
	border-right: 1px solid #803A00;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
	line-height: 18px;
}
.fiche {
	border: 1px solid #803A00;
	width: 98%;
	background-color: #eee;
	padding-top : 6px;
	padding-left : 6px;
}
.forme > .fiche {
	border: 0px;
	border-bottom: 0px dotted #803A00;
	width: 100%;
	background-color: transparent !important;
}
.ficheForme {
	padding: 4px;
	border: 0px;
/* 	border-bottom: 1px dotted #803A00; */
	width: 98%;
	background-color: transparent !important;
	min-height: 40px;
}
.ficheForme.plus {
	border-bottom: 1px dotted #803A00;
}
.lienModif0{
/* 	idem .fiche */
/* 	width: 40px; */
	float: right; 
	text-align: right;
	padding-bottom: 2px;
	padding-top: 4px;
}
.lienModif{
/* 	idem .fiche */
/* 	width: 40px; */
/* 	float: right; */
	text-align: right;
	padding-bottom: 2px;
	padding-top: 4px;
/* 	border-bottom: 1px dotted grey; */
}
.lienModif.cadreDroit {
/* 	float: left; */
	width: 100%;
}
.forme {
	margin: 6px;
	border: 1px solid #222;
	padding-bottom: 2px;
	background-color: #fff;
}
.ficheForme > ul {
	width: 520px;
	list-style: none outside none;
}
.ficheForme > ul > li {
	padding-left: 2px;
}
label[for^="commentaire"] {
	vertical-align: top;
}
.date {
	width: 80px !important;
}
#ferme {
	width: 100%;
	text-align: right;
	padding-right: 16px;
}
DIV.maxi {
	display: block;
}
DIV.mini {
	display: none;
	margin-top: -25px;
	margin-bottom: 12px;
}
.grp3.mini {
	display: none;
}
.grp3.maxi {
	display: block;
}

.cacher {
	display : none;
}
.voir {
	display: block;
}
#attente {
	color : #803A00 !important;
	font-size: 120%;
	padding-top: 16px;
}