html 	{height:100%;}

header  /*bandeau haut*/
		{Position: fixed;
		left: 0;
		top: 0;
		width:100%;
		height: 100px;
		background-color: #0c034d ;
		background-size : 100% ;
		z-index: 970 }
		
		#entete {
		position : relative ;
		bottom : 1px ;
		left: 50%; /* on positionne l'élément à la moitié de l'écran */
		margin-left: -309.5px; /* on applique une marge négative de la moitié de la largeur de l'élément */
		width: 619px;
		height : 98%;
		z-index : 998}
			
		.titrebandeau {
		position : relative ;
		padding-left:20px ;
		padding-right:20px ;
		display: inline-block;
		height : 100%;
		z-index : 998}
		
		.gifgauche {
		position : relative ;
		height : 100%;
		display: inline-block;
		z-index : 998}
					
		.gifdroite {
		position : relative ;
		height : 100%;
		display: inline-block;
		z-index : 998}
		
		#bandeausmart { 	
		Position: relative ;
		top: 0em ;
		left: 0em ;
		width: 100% ;
		z-index: 998 ;
		display: none}
			
			
body  	{margin: 0 ;
		padding: 0 ;
		min-height:100% ;
		position:relative ;
		background-image: url("../images/fondecran.jpg") ;
		background-attachment : fixed;
		background-size: cover;
		background-repeat : no-repeat}
			
			
		/* menu du haut */
#menunavig {
			position: absolute;
			top: 108px;
			width: 680px;
			left:50%;
			transform: translate(-50%);
			margin-left: auto;
			margin-right: auto;
			border-top-left-radius : 8px;
			border-top-right-radius : 8px;
			border-bottom-left-radius : 3px;
			border-bottom-right-radius : 3px;
			border: 0.5px solid #3b3530;
			background-color: #dedee4 ;
			text-align: center;
			z-index: 950}
		
		.imageregle {
			width:95% ;
			}
		
		.button {
			background:none ;
			width: 3.2em ;
			/*text-shadow: grey 0.05em  0.1em  0.15em ;	
			-webkit-text-stroke: 0.2px darkgrey;
			-webkit-text-fill-color: #0c034d; 
			-webkit-animation: fill 2s infinite alternate */
			padding: 6px 30px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 20px;
			margin: 2px 2px;
			cursor: pointer }
			
		@keyframes mon_anim {
			0% { transform: translateY(-2vh);
			opacity:0 },
			100% { transform: translateY(0px);
			opacity:1;
			}}
		
	
		/*@-webkit-keyframes fill {
			from { -webkit-text-fill-font-size: 10pt }
			to { -webkit-text-fill-font-size: 15pt } }
			from { -webkit-text-fill-color: #cdcde3 }
			to { -webkit-text-fill-color: #0c034d } } */
	
		.navbar{padding-left: 16px; margin-top:4px; text-align: center}
	
		.navbar ul {
			list-style-type: none ;
			content:"";
			display: inline-table;
			clear: both }
		
		.navbar li {float: left ; list-style-type: none }
		ul.navbar a {text-decoration: none ;font-family: 'Bitstream Vera Sans'; color:#0c034d; font-weight: bold ; font-size: 15pt ;
			animation-name:mon_anim;
			animation-duration:1200ms;
			animation-delay:0ms;
			animation-timing-function:ease-in-out;
			animation-iteration-count:1 }
		
		.navbar a:hover {text-decoration: underline; text-decoration-color: purple}
		.button:hover {-webkit-text-stroke: purple ; -webkit-text-fill-color: purple}
		
				
#menunavigsmart {	
			position: relative;
			top: 15px;
			left: 30px;
			display:inline-block ;
			z-index: 999}

			.boutonmenuprincipal {
				background: linear-gradient(130deg, #0c034d 30%, #4472C4);
				border: black;
				border-radius : 20px ;
				cursor: pointer;
				padding-top:4px;padding-bottom:4px;padding-left:8px;padding-right:10px ; 
				margin-top:0px;
				font-size: 15px;
				box-shadow: 6px 4px 4px grey ;
				display:none}
				
			.boutonmenuprincipal a {color:white ; text-decoration: none }
				
			.categorie {
				display: none;
				background-color: none;
				border-left : 0.5px solid purple ;
				min-width: 50px}
			
			.categorie a {
				color: black;
				font-size: 15px;
				padding: 5px;
				text-decoration: none;
				display: block}

			.categorie a:hover {color: purple ; font-weight: bold}	
				
			
		
		/* contenu de la page blanche accueil*/		
		.page1 {
				Position: relative;
				margin-left: auto;
				margin-right: auto;
				top: 180px;
				width: 800px;
				padding-left:3em;
				padding-bottom: 26px;
				padding-top:20px;
				margin-bottom: 0 auto ;
				border-bottom-right-radius : 20px ;
				border-top-right-radius : 20px ;
				border-left: 2px solid #3b3530; 
				text-align: left;
				z-index: 500;
				background: #FFFFFF }
		

		/* contenu de la page blanche des autres pages*/	
		.page2 {
				Position: relative;
				margin-left: auto;
				margin-right: auto;
				top: 180px;
				width: 800px;
				padding-left:3em;
				padding-bottom: 26px;
				padding-top:28px;
				border-bottom-right-radius : 20px ;
				border-top-right-radius : 20px ;
				border-left: 2px solid #3b3530; 
				text-align: left;
				z-index: 500;
				background: #FFFFFF }
				
				.imagespirale { Position: absolute;
					left: -3.1em;
					top: 1em;
					padding-left:1.65em;
					padding-top:5px;
					padding-bottom:20px ;
					z-index: 900}
					
				.imagespiralebis { Position: absolute;
					left: -3.1em;
					top: 56.5em;
					padding-left:1.65em;
					padding-top:5px;
					padding-bottom:2px ;
					z-index: 900}
				
				.imagespiraletiers { Position: absolute;
					left: -3.1em;
					top: 23.8em;
					padding-left:1.65em;
					padding-top:5px;
					padding-bottom:2px ;
					z-index: 900}		
					
		
				/* photo cours en haut de la page d'accueuil */
				#conteneurphoto { 	
					Position: relative;
					left: 0em;
					width: 100% ;
					margin-bottom : 50px ;
					padding-left: 6px ;
					top: 1em }
					
				#photo {width : 750px ;
					border-radius : 10px ;
					box-shadow: 6px 4px 4px grey ;
					z-index: 940}
				
				
				.pucesmaths {vertical-align: middle ; width: 5% }
				
				h1 {font-size: 20pt ; font-family: 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: #512586; text-align: center ; letter-spacing: 3px ; text-shadow: 2px 4px 3px rgba(0,0,0,0.3) ; font-weight: bold ; margin-bottom:26px}
				h2 {font-size: 13pt; font-family: 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: #512586 ; font-weight: normal; margin:0px; font-weight: bold}
				
				#titrepage1 {display:none}
		
				.page1 ul {margin : 0 ; list-style:square ; padding-left: 70px ; padding-right: 40px ; padding-top: 0px ; padding-bottom: 10px ; line-height: 120% ; text-align:justify}
				.page1 li {font-size: 11pt ; font-family: 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: #344a57 ;font-weight: normal }
								
				
				/* Tableau en bas de la page d'acceuil pour ordi*/
				.table1 {padding-left:0em ; padding-top: 0px ; width: 520px }
				.table1 td {height: 30 ; width: auto; border: none }
				.table1 ul {width: auto ; padding-left :66px ; padding-right : 0 }
				.table1 li {width: 120px ; font-size: 11pt ; font-family: 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: #344a57 ;font-weight: normal ; width:160px }
				
				/* Tableau en bas de la page d'acceuil pour smartphone*/
				.table1bis {padding-left:0em ; padding-top: 0px ; width: 400px }
				.table1bis td {height: 30 ; width: auto; border: none }
				.table1bis ul {width: auto ; padding-left: 50px ; padding-right : 10px }
				.table1bis li {width: 120px ; font-size: 11pt ; font-family: 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: #344a57 ;font-weight: normal ; width:140px }
								
				#table1bis {display:none}
				
/* Autres pages*/	
				.page2 ul {margin : 0 ; list-style:square ; padding-left: 70px ; padding-right: 40px ; padding-top: 0px ; padding-bottom: 10px ; line-height: 120% ; text-align:justify}
				.page2 li {font-size: 11pt ; font-family: 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: #344a57 ;font-weight: normal }
				
	
/* formes spécifiques à la page "offres"  */
				.table2 {	margin-left:3.5em ;	border: none; color : #344a57 ; border-top: 1px solid #061c73 ; width: 700px}
				.tr1 { border: none; vertical-align : middle ;  border-bottom: 2px solid #061c73; background : linear-gradient(#0c034d 60%, blue)}
				.tr2 { border: none; vertical-align : middle ;  border-bottom: 2px solid #061c73; background : white ; color:black}
				.table2 td {height: 30 ; border: none; border-bottom: 1px solid #061c73 }
				.table2 p {font-size: 13pt}
				
				.normalblanc {font-size: 13pt; font-family: Times New Roman, 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: white}
				.normalneutre {font-size: 13pt; font-family: Times New Roman, 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif}
				.colorblanc {color: white}
				.colorred {color: red ; font-style: italic}
				
				.texte1 {font-size: 11pt ; font-family: 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: #344a57 ; text-align: justify ; padding-left:56px ; padding-right: 3em ; line-height:1.5em ; font-weight: normal}
				.texte1bis {font-size: 11pt ; font-family: 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: #344a57 ; text-align: justify ; padding-left:56px ; padding-right: 14em ; line-height:1.5em ; font-weight: normal}
				.texteitalique {font-size: 10pt ; font-style: italic ; font-family: 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: red ; text-align: justify ; padding-left:4em ; padding-right: 3em ; line-height:1.5em }
				
				a {color: #1235bd ; cursor: pointer ; text-decoration: none ; font-weight: normal }
				a:hover {color : #8d2cbb}
				
				.imagecesuordi {
				position : absolute;
				top : 41em;
				right : 45px;
				max-width: 120px;
				max-height: 200px ;
				border: 1px solid grey ;
				box-shadow: 10px 5px 5px brown}	

				.imagecesusmart {
				margin-left: auto;
				margin-right: auto;
				max-width: 120px;
				max-height: 200px ;
				border: 1px solid grey ;
				box-shadow: 10px 5px 5px brown}	
				
				#imagecesusmart {display:none}
				
	
/* formes spécifiques à la page "Contact"  */
				form {
				margin: 0 auto;
				width: 450px;
				padding: 1em;
				border: 2mm ridge rgba(170, 50, 220, .6);
				border-color : #062a99 ;
				border-radius: 1em;
				box-shadow: 6px 6px 6px grey}

				form div + div {
				margin-top: 1em }

				label {	/* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
				display: inline-block;
				width: 90px;
				text-align: right }

				input, textarea {/* Pour s'assurer que tous les champs texte ont la même police.Par défaut, les textarea ont une police monospace */
				font: 1em sans-serif;
				width: 350px; /* Pour que tous les champs texte aient la même dimension */
				box-sizing: border-box;	/* Pour harmoniser le look & feel des bordures des champs texte */
				vertical-align: top ;
				border: 1px solid #999 }

				input:focus, textarea:focus {/* Pour souligner légèrement les éléments actifs */ 	border-color: #000	}

				textarea {/* Pour aligner les champs texte multi‑ligne avec leur étiquette */
				vertical-align: top; /* Pour donner assez de place pour écrire du texte */
				height: 15em }

				.conteneurbutton2 {/* Pour placer le bouton à la même position que les champs texte */
				margin-left: 0px; /* même taille que les étiquettes */ 
				margin-right: 0px ;
				text-align: center }
				
				h4 {font-size: 12pt ; font-family: 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: red; text-align: center ; letter-spacing: 3px ; text-shadow: 2px 4px 3px rgba(0,0,0,0.3) ; font-weight: bold ; margin-bottom:26px}
				
				#button2 {font-size: 12pt ; font-family: 'Bitstream Vera Sans' ; background-color:#586e75 ; color: white ; border-radius : 50px; padding-left: 10px ;padding-right: 10px ; padding-top:5px; padding-bottom:5px }
				
				#button2:hover {color: gold }
				
				.texte2 {font-size: 11pt ; font-family: 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: #344a57 ; text-align: justify ; padding-left:56px ; padding-right: 54px ; line-height:1.5em ; font-weight: normal}
								
				.liste {margin-bottom:1.2em}
				ul.liste {padding-left:8em}
				li.liste {margin : 0 ; list-style:square ; margin-bottom: 1.2em }
				.liste p {padding-left:0.3em }
								
				.gras {font-weight: bold }
				
				#phone::placeholder{font-style: italic ; color: #dd9250}
				#msg::placeholder{font-style: italic ; color: #dd9250}
				
				.intitule {font-size: 11pt ; font-family: 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: #344a57}
				.afacultatif {font-size: 10pt; font-family: 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: red ;font-style: italic }
				
				.provisoire {font-size: 11pt; font-family: 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: red ;font-weight: bold }
				
				.espace {display: block;margin-bottom: 10px}
				
				.miel {display:none}	
	
/* formes spécifiques à la page "Contactvalid"  */
				
				#confirmation
				{text-align: center ;
				padding-left= 10px ;
				margin-bottom:32px ;
				color: #16b927 ;
				font-size: 14pt ; 
				font-weight: bold }
				
				
				.geo {
				Position: relative;
				width : 250px ;
				border-radius : 125px ;
				margin-bottom : 30px ;
				z-index: 940;
				box-shadow:2px 2px 10px 10px #b6b3b2;
				-webkit-box-shadow:2px 2px 10px 10x #d6d3d2;
				-moz-box-shadow:2px 2px 10px 10px #d6d3d2;}
				
				
				
				/*.geo {width:"80px" ; height:"80px" ; border-radius:"50px"} */
				
/* formes spécifiques à la page avis */

				.texte3 {font-size: 11pt ; font-family: 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: #344a57 ; text-align: justify ; padding-left:56px ; padding-right: 54px ; line-height:1.2em ; font-weight: normal ; margin-bottom:35px}
				.texte4 {font-size: 12pt ; font-family: 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: #black ; text-align: justify ; padding-left:56px ; padding-bottom: 0px ; padding-right: 3em ; margin-bottom: 0px }
				.texte5 {font-size: 11pt ; font-family: 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: #344a57 ; text-align: justify ; margin-left:56px ; padding-top: 4px ; line-height:1.2em ; font-weight: normal ; margin-right:50px ; padding-bottom: 0px ; margin-top: 0px }	
	
	
/* formes spécifiques à la page "Portrait"  */
							
				.photoordi {
				Position: relative;
				width : 250px ;
				border-radius : 10px ;
				margin-bottom : 12px ;
				z-index: 940;
				box-shadow: 6px 4px 4px grey}

				/*.imagecesusmart {
				margin-left: auto;
				margin-right: auto;
				max-width: 120px;
				max-height: 200px ;
				border: 1px solid grey ;
				box-shadow: 10px 5px 5px brown}	
				
				#imagecesusmart {display:none} */
	
				.texte6 {font-size: 11pt ; font-family: 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: #344a57 ; text-align: justify ; margin-left:56px ; padding-top: 4px ; line-height:1.3em ; font-weight: normal ; margin-right:50px }	

/* formes spécifiques à la page "mentions légales"  */
				h3 {font-size: 13pt; font-family: 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: #512586 ; font-weight: normal; margin-top:20px; margin-bottom:4px ;margin-left:56px ; font-weight: bold}
				.texte7 {font-size: 11pt ; font-family: 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif; color: #344a57 ; text-align: justify ; margin-left:56px ; line-height:1.3em ; font-weight: normal ; margin-right:50px ; margin-top:6px}	
	

body::after{ clear: both; content:''; display:block; height:250px }
				
	
footer	{Position: absolute;
		bottom : 0 ;
		width:100%;
		/*height: 50 px;*/
		background-color: black ;
		z-index: 990;
		text-align: center }

		.foot a {font-style: italic ; color: #d0e5ec ; text-decoration: underline ;font-weight: bold}
		.foot p {font-size: 13pt; font-style: italic ; color: #d0e5ec ; font-weight: bold }
		
		.lienfb {height:28px ; vertical-align:middle}
		.lienlk {height:28px ; vertical-align:middle}


/*style smartphones et petites tablettes en portrait*/
@media screen and (max-width:800px)
{

header  {display:none} 
#bandeauordi {display:none}
#bandeausmart {display:block}


body{background:white}

#menunavig {display:none}
#menunavigsmart {z-index:950 }

.boutonmenuprincipal {display:block }


.page1 {top: 20px;
		margin-left:0em; 
		margin-right:0em;
		padding-left:0em;
		padding-right:0em;
		padding-top:8px;
		border-left:none;
		background-color:white;
		border-bottom-right-radius : 0 ;
		border-top-right-radius : 0 ;
		width:auto}
		
.page2 {top: 25px;
		margin-left:0em; 
		margin-right:0em;
		padding-left:0.3em;
		padding-top:0px;
		border-left:none;
		background-color:white;
		border-bottom-right-radius : 0 ;
		border-top-right-radius : 0 ;
		width:auto}		

		#conteneurphoto {position : static ;padding-left: 0px; width: auto ; margin-left: 0 ;margin-right: 0 ; margin-bottom :20px}		
		#photo {width: 100% ;border-radius: 0px }
		
		.pucesmaths {width: 8% }

		.titre1 {margin-top :16px ; margin-bottom:26px}
		.imagespirale {display: none}
		.imagespiralebis {display: none}
		.imagespiraletiers {display: none}
				
		.soustitre {margin-left:8px}

		.page1 ul {line-height: 120% ; padding-left: 3.3em ; padding-right:1.5em; padding-top: 6px ; text-align:justify}
		.table1bis ul {width: auto ; padding-left: 2.1em; padding-right : 0em }
		
		#table1 {display: none }
		#table1bis {display: block }


/* page offres*/

		#imagecesuordi {display:none}
		#imagecesusmart {display:block}

		.page2 ul {line-height: 120%; padding-left: 3em ; padding-right:1.5em; text-align:justify}
		
		.table2 {width:100%; margin-left:-0.2em; margin-right:0.5em ; margin-top: 1em}
		.table2 p {font-size: 11pt}
		
		.texte1 {padding-left:2.3em ; padding-right: 1.5em}
		.texte1bis {padding-left:2.3em ; padding-right: 1.5em}
		.texteitalique {color: red ; text-align: justify ; padding-left:2.1em ; padding-right: 1.5em ; line-height:1.5em }
		
		.normalblanc {font-size: 11.5pt}
		.normalneutre {font-size: 11.5pt}
				
		.imagecesu {padding-top:0px;
					max-width: 100px;
					border: 1px solid grey }						


/* page contact*/
		.texte2 {color: #344a57 ; text-align: justify ; padding-left:1.4em ; padding-right: 1.5em ; line-height:1.5em ; font-weight: normal}
		.texttrans {font-size: 8pt ; color: red}
		ul.liste {padding-left:3em }
		form {width:330px;
			margin: auto ;
			padding: 0.2em ;
			padding-top:0.8em ;
			padding-bottom:0.8em}
			
		.intitule {font-size: 9pt}
		.provisoire {font-size: 8pt} 
	
		input,textarea {width:200px}

/*page Avis*/
		.texte3 {padding-left:5px }
		.texte4 {padding-left:5px }
		.texte5 {margin-left:5px ; margin-right:24px ; margin-top:2px ; margin-bottom:2px }	

/*page Portrait*/
		.texte6 {margin-left:5px ; margin-right:24px }	

/*page mentions légales"*/
		.soustitre2 {margin-left:8px}
		.texte7 {margin-left:8px ; margin-right:15px }


body::after{ content:''; display:block; height:52px }


/*FOOTER*/
		.foot a {font-size: 10pt }
		.foot p {font-size: 10pt }
		
		.lienfb {height:16px ; vertical-align:middle}
		.lienlk {height:16px ; vertical-align:middle}

}


/*correction puces en style intermédiare*/
@media (min-width: 600px) and (max-width: 800px)
{
	.pucesmaths {width: 6% }
	
}