* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
#bloc_page {
	max-width: 100%;
	height: auto;
    	margin-left: 10%;
    	margin-right: 10%;
}
.header {
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	padding: 1.3rem 10%;
    	background-color: white;
    	border-bottom: solid orange;
    	display: flex;
    	justify-content: space-between;
    	text-align: center;
	/*z-index: 100;*/
}
.footer {
	background-color: light-grey;
	text-align: center;
}
#logocfh {
    	max-height: 80px;
}
#logocle {
	/*max-height: 10px;*/
}
.navbar a {
    	font-size: 1.2em;
    	color: green;
    	text-decoration: none;
    	font-weight: 500;
    	margin-left: 2.5rem;
}
.navbar a:hover {
    	color: red;
}
#check {
    	display: none;
}
.icons {
    	position:absolute;
    	right: 5%;
    	font-size: 2.8rem;
    	color: green;
   	cursor: pointer;
    	display: none;
    	align-items: center;
}
body {
    	min-height: 100vh;
    	margin: 0px;
    	padding: 0px;
    	font-size: 1.2em;
    	background-color: ivory;
    	padding-top: 125px;
		overflow-y: scroll;
}
p {
    	text-align: justify;
	color: green;
	padding: 10px;
	overflow: auto;
}
h1 {
	text-align: center;
	color: 	#C86814;
}	
h2 {
	color: #F5C51D;
	text-shadow: 0.02em 0.05em 0.0em brown;
}
h3 {
	color: #C86400;
	text-decoration: underline;	
}
ol, li {
	color: green;
	margin: 10px;	
}
tr, td, th {
	text-align: center;
	padding: 0px 0px 0px 15px;
	color: green;
}
video {
	max-width: 80%;
	height: auto;	
}
.image-centree {
  text-align: center;
  margin: 2rem auto;
}

.image-centree img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.image-centree a:hover img {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

.image-centree figcaption {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #555;
}

#flex-container {
	display: flex;
	flex-flow: wrap;
	height: auto;	
}
#citation {
    	text-align: center;
    	color: #AA8866;
}
#petit {
    	color: #C86400;
}
/*Menu-deroulant*/
#menu-deroulant, #menu-deroulant ul {
    	padding: 0;
    	margin: 0;
    	list-style: none;
}
#menu-deroulant {
	background:orange;
    	color:white;
    	border-radius: 5px;
}
#menu-deroulant li {
    	display: inline-block;
    	margin:0px 19px;
    	padding:10px;
}
#menu-deroulant ul li {
    	display: flex;
	padding:10px;
    	background:green;
    	color:white;
	border-radius: 10px;
}
#menu-deroulant a {
    	text-decoration: none;
    	color:white;
}
#menu-deroulant ul {
    	position: absolute;
    	text-align:left;
    	margin:10px 0px 0px -14px ;
    	display:none;
		max-height: 300px;
    	overflow-y: auto;
}
#menu-deroulant li:hover ul {
    	display:block;
}
 
#menu-deroulant li:hover {
    	background:gray;
}
.SousMenu {
    	display: block;
}
.element {
		border: 2px solid green;
		border-radius: 10px;
		box-shadow: 2px 2px 0px green;
		width: 300px;
		height: 100px;
		background-color: #F5C51D;
		margin: auto;
		padding: 0px 15px 0px 15px;
}
img {
	max-width: 80%;
}
#imgfull {
	max-width: 100%;
}
.img_resp {
	max-width: 45%;
}
.underline {
	text-decoration: underline;
	color: green;
}
.center {
	text-align: center;
	text-decoration: embed;
	color: 	#C86400;
}
.niv2 {
	color: #C86400;
	text-decoration: underline;	
}
.niv3 {
	color: #AA8866;
	padding-left: 5%;
	text-decoration: underline;
}
.niv4 {
	color: #AA8866;
	text-decoration: underline;
}
.petniv1 {
	text-align: center;
	text-decoration: underline;
}
.petsur {
	border-top: solid 1px green;	
}
.petenc {
	border: solid 1px green;	
}
.attn {
	color : #AA8866;
}
form {
  background-color: #fff;
  padding: 20px;
  max-width: 600px;
  margin: auto;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

fieldset {
  border: none;
  margin-bottom: 15px;
  padding: 0;
}

label {
  display: block;
  margin-top: 10px;
}

input, textarea {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  box-sizing: border-box;
}

canvas {
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid #000;
  margin-top: 10px;
  background-color: #fff;
}

canvas#signature {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  border: 1px solid black;
  background-color: #fff;
}

button {
  padding: 10px 20px;
  margin-top: 15px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  margin: 15px auto;
  width: fit-content;
  max-width: 90%;
}

#clearButton{
	margin-left: 15px;
}
#saveButton{
	margin-left: 15px;
}
/*--------------------------------------------------------------Tablettes-------------------------------------------------------------*/
@media (max-width:1200px) {
    
    .icons {
        display: inline-flex;
    }
    #check:checked~.icons #menu-icon {
        display: none;
    }
    .icons #close-icon {
        display: none;
    }
    #check:checked~.icons #close-icon {
        display: block;
    }
    .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 0;
        background: white;
        box-shadow: 0.5rem 1rem;
        overflow: hidden;
        transition: .3sec ease;
    }
    #check:checked~.navbar {
        height: 32rem;
    }
    .navbar a {
        display: block;
        font-size: 1.1rem;
        margin: 1.5rem 0;
        text-align: center;
        transform: translateY(-50px);
        /*opacity: 0;*/
        transition: .3sec ease;
    }
	img {
		max-width: 80%;
	}
	#imgfull {
		max-width: 100%;
	}
    	.img_resp {
		max-width: 100%;
    	}
	.imgcampagne {
		max-width: 100%;
	}
	span {
		display: block;
    	max-width: 100%;
    	height: auto;
    	margin: 0 auto;
	}
}
/*--------------------------------------------------------------Smartphones-------------------------------------------------------------*/
@media (max-width:600px) {
    #blocpage {
		max-width: 100%;
		height: auto;
    	margin-left: 5%;
    	margin-right: 5%
	}
	.header{
        padding: 1 rem 5%;
    }
    .icons {
        display: inline-flex;
    }
    #check:checked~.icons #menu-icon {
        display: none;
    }
    .icons #close-icon {
        display: none;
    }
    #check:checked~.icons #close-icon {
        display: block;
    }
    .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 0;
        background: white;
        box-shadow: 0 .5rem 1rem;
        overflow: hidden;
        transition: .3sec ease;
    }
    #check:checked~.navbar {
        height: 32rem;
    }
    .navbar a {
        display: block;
        font-size: 1.1rem;
        margin: 1.5rem 0;
        text-align: center;
        transform: translateY(-50px);
        /*opacity: 0;*/
        transition: .3sec ease;
    }
	#logocle {
		max-width: 60%;
	}
	img {
		max-width: 100%;
	}
	.img_resp {
		max-width: 100%;
	    }
	.imgcampagne {
		max-width: 100%;
	}
	#imgfull {
		max-width: 100%;
	}
	span {
		span {
		display: block;
    	max-width: 100%;
    	height: auto;
    	margin: 0 auto;
	}
	}
	#compteur {
		max-width : 40%;
	}
	form {
    padding: 15px;
  	}

  	button {
    	width: 100%;
  	}
}