body {
/*	background-image: url(Fonddegrade.jpg);*/
	font-family: Arial, Verdana, Helvetica, sans-serif;
	color: #111;
	background-color:#fff;
	margin-bottom: 0px;
	margin-top : 0px;
    scroll-behavior: smooth;
	background-color: #fea22a; /*#fff8ed*/
    background-image:url(images/idea.png);
    padding : 0px;
    margin: 0px;
}

.title{
	display:flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center; 
	text-align:center; 
	background-color: rgba(255, 235, 209, 0.65); 
	border-radius: 10px; 
	padding: 5px; 
	margin: 20px; 
	width: 80%; 
	margin-left:auto; 
	margin-right:auto;
}
@media only screen and (max-width: 700px){
	.title {
		width: 95%;
	}
}
.container{
	width: 80%;
	display: flex;
	margin-left:auto;
	margin-right:auto;
}
@media only screen and (max-width: 700px){
	.container {
		width: 95%;
	}
}

.col_projet{
	border: thin solid #fff8ed; 
	width: 15%;
	align-self: start;
	border-radius: 10px;
	margin-bottom: 15px;
	background-color: #ffebd1;
	display: flex;
	flex-direction : column; 
	text-align: center;
}
@media only screen and (max-width: 700px){
	.col_projet {
		visibility: hidden;
		width: 0%;
	}
}

.titre_col{
	border-top-left-radius: 10px; 
	border-top-right-radius: 10px; 
	background-color:#f27200; 
	color: #fff; 
	font-size:larger; 
	font-weight: bold;
	border-color: #fff8ed; 
	text-align:center; padding: 20px;
}

.cell_col{
	outline: 1px solid #fff8ed; 
	padding: 5px; 
	text-align:center; 
	display:flex; 
	align-items: center; 
	padding-top: 10px; 
	padding-bottom: 10px;
}

.last_cell_col{
	outline: 1px solid #fff8ed; 
	padding: 5px; 
	text-align:center; 
	display:flex; 
	align-items: center; 
	padding-top: 10px; 
	padding-bottom: 10px; 
	background-color: #f27200;
}

.col_projet > div:last-child {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.contenu{
	width: 100%;
	justify-self: stretch;
	margin-left: 20px;
	min-height: 500px;
	margin-bottom: 15px;
	display:flex; 
	flex-direction: column; 
}

@media only screen and (max-width: 700px){
	.contenu {
	justify-self: start;
	margin-left: 0px;
	}
}
/*.contenu div{
	width: 100%;
}*/


.menu {
	width: 100%; 
	display:grid; 
	/*background-color: rgba(75, 43, 1, 1);*/
	border-top-left-radius : 5px; 
	border-top-right-radius : 5px; 
	text-align: center;
	color: white;
}

/*.menu > div {
	border-top: thin solid #333; 
	border-left: thin solid #333; 
	border-top-left-radius : 5px; 
	border-top-right-radius : 5px; 
	padding-top: 10px;
	padding-bottom: 10px;
}*/
/*.menu > div:last-child {
	border-right: thin solid #333; 
}*/

/*.menu_en_cours {
	background-color: #fff; 
}*/
.menu_en_cours {
	background-color: rgba(255, 248, 237, 0.85);/*#fff8ed*/
	border-top-left-radius : 5px; 
	border-top-right-radius : 5px; 
}

/*.menu_pas_en_cours {
	background-color: #eee; 
	border-bottom: thin solid #333; 
}*/
.menu_pas_en_cours {
	background-color: #8e5101;
	border-top-left-radius : 5px; 
	border-top-right-radius : 5px; 
}
.menu_pas_en_cours:hover {
	opacity: 80%;
}

.categories{
	display: flex; 
	width: 100%; 
	gap: 10px; 
	justify-content: center; 
	text-align:center; 
	font-size: smaller; 
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.catcubeD{
	width: 10.5%; 
	display: grid;
}
@media only screen and (max-width: 700px){
	.catcubeD{
		width: 18%; 
	}
}
.catcubeC{
	width: 9%; 
	display: grid;
}
@media only screen and (max-width: 700px){
	.catcubeC{
		width: 15%; 
	}
}

.acces{
	background-image: url(images/IconeCompte2.png);
    /*width: 20px;*/ /* Specify the width */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
	background-size: 30px;
	background-repeat:no-repeat; 
	background-position:center;
}
.acces:hover{
	background-image: url(images/IconeCompteO90.png);
}

.img_en_cours{
	background-image: url(images/IconeCompteO60.png);
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
	background-size: 30px;
	background-repeat:no-repeat; 
	background-position:center;
}
.img_en_cours:hover{
	background-image: url(images/IconeCompteO90.png);
}
/*.contenu{
	border : thin solid #333; 
	border-radius-bottom: 5px; 
	border-top : none; 
	border-bottom-right-radius : 5px; 
	border-bottom-left-radius : 5px; 
	min-height: 500px;
	margin-bottom: 15px;
	width: 80%;
	opacity: 93%;
}*/

.page{
	width: 100%;
	/*justify-self: stretch;*/ 
}

.roundbottom {
	border-bottom-right-radius : 5px; 
	border-bottom-left-radius : 5px; 
}

.texte{
	padding: 20px; 
}

.sectionClair {
	background-color: rgba(255, 248, 237, 0.85);/*#fff8ed*/
	
}

.sectionBrun{
	padding: 20px; 
	/*background-color: rgba(75, 43, 1, 0.95);*/
	background-color: rgba(142, 81, 1, 0.85);
	margin: 0px;
	padding: 0px;
	padding-top: 20px;
	padding-bottom: 20px;
	color: white;
}

a {
	text-decoration: none;
	color: #f60;
	font-weight: bold;
}
a:visited {
	text-decoration: none;
	color: #C33;
}
a:hover,
.whitea a:hover {
	text-decoration: none;
	color: #f90;
}
a:active {
	text-decoration: none;
}

.menu a,
.last_cell_col a,
.titre_col a,
.whitea a{
	color: white;
}
.menu a:hover {
	color: #f90;
}

a.menu_en_cours  {
	color: #f27200;
}

.menu > div {
	padding-top: 10px;
	padding-bottom: 10px;
}

.last_cell_col a:hover,
.titre_col a:hover {
	color: #4b2b01;
}

img {
	border-radius: 5px; 
	width: 100%;
}

.AFaire {
	color: #093;
	background-color: white;
	font-weight: bold;
	font-size: bold;
	font-style: italic; 
}

.gridcell {
	outline: 1px solid white; 
	padding: 5px;
}

.gridincell {
	display: grid;
	align-items: center;
}

.titlegrid {
	background-color: rgba(255, 236, 209, 0.25);
	/*background-color:#ffdcae;*/
	text-align: center;
	padding: 10px;
	color: #fff;
}

.boite1{
	border: thick solid #ffdcae; 
	border-radius: 10px; 
	background-color: #f27200; 
	color: #fff; 
	font-family:'Comic Sans MS', cursive; 
	padding: 15px; 
	margin-top : 20px; 
	margin-right: 30px; 
	margin-left: 15px;
}
.zoneCategories {
	display: flex; 
	width: 85%; 
	flex-wrap: wrap; 
	gap: 20px; 
	justify-content: center; 
	text-align:center; 
	margin-left:auto; 
	margin-right:auto;
	padding-top: 20px;
	padding-bottom: 20px;
}
@media only screen and (max-width: 700px){
	.zoneCategories {
		width: 100%; 
		padding: 0px; 
		margin: 0px;
	}
}

.mettreRelation{
	display:flex; 
	justify-content: space-evenly; 
	align-items: center; 
	margin: 20px; 
	text-align:center; 
	width: 75%; 
	margin-left:auto; 
	margin-right:auto
}
@media only screen and (max-width: 700px){
	.mettreRelation {
		width: 100%; 
	}
}

.box3 {
	border-radius: 10px; 
	background-color: #f27200; 
	color: #fff; 
	font-family:'Comic Sans MS', cursive; 
	padding: 5px; 
	width: 50%; 
	border: 20px solid transparent; 
	padding: 20px; 
	border-image: url(images/ampoule-border.png) 25 repeat; 
	border-image-repeat: repeat;
}
@media only screen and (max-width: 700px){
	.box3 {
	padding: 5px; 
	border-image: none; 
	border-image-repeat: none;
	border: 10px solid transparent; 
	width: 100%; 
	}
}
.box4 {
	color: #000; 
	background-color: #ffdcae; 
	border-radius: 10px; 
	font-family:'Comic Sans MS', cursive; 
	padding: 5px; 
	width: 50%; 
	border: 20px solid transparent; 
	padding: 15px; 
	border-image: url(images/roue-border.png) 25 repeat; 
	border-image-repeat: repeat; 
}
@media only screen and (max-width: 700px){
	.box4 {
	padding: 5px; 
	border-image: none; 
	border: 10px solid transparent; 
	width: 100%; 
	}
}

.acteur{
	display: grid; 
	width: 100%; 
	grid-template-columns: repeat(6, 1fr); 
	justify-content: center; 
	text-align:center;
}
@media only screen and (max-width: 700px){
	.acteur {
		grid-template-columns: repeat(3, 1fr); 
		gap: 10px; 
	}
}

.principe{
	display: grid; 
	width: 80%; 
	grid-template-columns: repeat(5, 1fr); 
	justify-content: center; 
	text-align:center; 
	margin-left:auto; 
	margin-right:auto; 
	gap: 10px;
}
@media only screen and (max-width: 700px){
	.principe {
		grid-template-columns: repeat(3, 1fr); 
	}
}
.princCarre {
	display: flex; 
	flex-direction: column;
	gap: 10px;
}

.princTitle {
	background-color: #ffecd1; 
	border: thin solid #ffdcae; 
	font-weight: bold; 
	font-size: larger; 
	border-radius: 10px; 
	padding: 10px; 
	align-self: center; 
	color: #4b2b01;
}

.princIcone {
	width:50px; 
	background-color: #ffecd1; 
	border-radius: 10px; 
	padding: 5px;
}

.listeProjets {
	display: flex; 
	gap: 20px; 
	justify-content: space-evenly; 
	flex-wrap: wrap;
}

.carreProjet {
	display: flex; 
	flex-direction: column; 
	width: 30%; 
	border: solid 1px white; 
	border-radius: 10px;
}

@media only screen and (max-width: 700px){
	.carreProjet {
		width: 90%; 
	}
}


.confirmer{
	background-image: url(images/case-a-cocher-o2.png);
    width: 20px; /* Specify the width */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
	background-size: contain;
	background-repeat:no-repeat; 
	background-position:center;
}
.confirmer:hover{
	background-image: url(images/case-a-cocher-w.png);
}

.contacter{
	background-image: url(images/mailOrange.png);
    width: 20px; /* Specify the width */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
	background-size: contain;
	background-repeat:no-repeat; 
	background-position:center;
}
.contacter:hover{
	background-image: url(images/mailBlanc.png);
}
.modifier{
	background-image: url(images/modifierOrange.png);
    width: 20px; /* Specify the width */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
	background-size: contain;
	background-repeat:no-repeat; 
	background-position:center;
}
.modifier:hover{
	background-image: url(images/modifierOrange2.png);
}
.supprimer{
	background-image: url(images/delete.png);
    width: 20px; /* Specify the width */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
	background-size: contain;
	background-repeat:no-repeat; 
	background-position:center;
}
.supprimer:hover{
	background-image: url(images/delete2.png);
}

.label-file{
	cursor: pointer;
    color: #f60;
    font-weight: bold;		
}
.label-file:hover{
    color: #f90;
}

input[type=file] {
  /*color: #222245;
  padding: 8px 12px;
  background-color: #fff;
  border: 1px solid #222245;
  word-break:break-all;
  white-space: wrap; 
  word-wrap: break-word;
  max-width: 200px;*/
}


input:placeholder-shown{
	font-style:italic; 
	color: #666;
}

input[type="checkbox"] {
	display:none;
}

.open label {
  color: #f90;
  text-align:center;
  justify-self: center;
}
.open label:hover {
  color: #f60;
}
.open label:active {
  color: #f60;
}

.open label::before {
  content: '\27BA'; /* closed folder */
}

input:checked + .open label {
  content: '\1F5C1'; /* open folder */
  display: none;
}

.tobeopen {
  display: none;
}

input:checked ~ .tobeopen {
  display: block;
}
input:checked + .open label {
  font-weight: bold;
  color: #f90;
  font-size: larger;
}

[inert], [inert] * {
  opacity: 0.7;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

.footer{
  background-color: #4b2b01; 
  background-image:url(images/ideaB.png);
  width: 100%;
  color: white; 
  margin: 0px;
  padding: 0px;
  display: flex; 
  justify-content: space-evenly; 
  align-items: center; 
  word-break:break-all;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}
@media only screen and (max-width: 700px){
	.footer{
		flex-direction: column;
		gap: 10px;
		justify-content: center;
	}
}


.reduction{ 
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}

.reduction:hover{
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-o-transform: scale(1.3);
	transform: scale(1.3);
}