<style>

/*****************************************************/
/* feuille Index (Acceuil) */



    .MainHeader {
        background-color: #2c2f83;
    }
	
	.MainHeader2 {
        background-color: #2c2f83;
		color: White;
		margin: 0;
		padding: 3%;
		min-width : 1200px;
		width : 100%
	
    }
	
 	.MainHeader3 {
        background-color: #2c2f83;
		color: White;
		Width : 100%;
    }
	
	.Objets_fond {
		background-image: url("Fond_piece_dans_eau.jpg");
		background-attachment:fixed;
		background-repeat: no-repeat;
		background-size: cover;
		color: White;
		font-size: xx-large;
		text-align:center;
		padding: 100px 1px 100px 1px;
		margin:0;
		min-width : 1200px;
		
	}
	
    .Saumon {
		
        background-color: #ff9494;
		Width: 100%;
		align-items: center;
		vertical-align: middle;
		padding:5%;
		min-width : 1200px;
		min-height: 570px;
		overflow: hidden;
		position: relative;
		
    }
 
			.QuiSommeNous {
				
				display: inline-block;
				/* Float: left; */
				width: 46%;
				min-width : 450px;
				padding-top: 36%; /* 1:1 Aspect Ratio */
				position: relative;
				vertical-align: middle;
			}
			
			.QuiSommeNousIn {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background-color: #2c2f83;
				color: White;
				text-align:center;
				padding: 5%;
				vertical-align: middle;
				border: solid;
			}
			
			
			.Text_Saumon {
				color: #ff9494;
				font-size: xx-large;
			}
			
			.Photo_Mat {
				display: inline-block;
				Float : right;
				vertical-align: middle;
				position: absolute;
				width: 46%;
				top: 0;
				margin: 5% 5% 5% 0%;
				Right: 0;
				/* transform: translate(0%, -50%); */
				overflow: hidden;
			
			}
			
	.Citation {
    	color: White;
		background-color: #4844ac;
		min-height: 300 px;	
		padding: 5%;
		margin:0;
		min-width : 1200px;
		position: relative;
		clear: left;
		clear: Right;
    }
	
			.InCitation {
				background-image: url("Planche.jpg");
				background-repeat: no-repeat;
				background-size: cover;
				color: White;
				text-align:center;
				padding: 5%;
				font-size: large;

			}
	
	.Footer{
        background-color: #2c2f83;
		color: White;
		text-align:center;
		margin:0;
		padding: 1%;
		width : 100%;
		min-width : 1200px;
    }
	
/*****************************************************/
/* feuille A propos */

	
	.Apropos {
    	color: White;
		background-color: #4844ac;
		padding: 5%;
		margin:0;
		overflow: hidden;
		min-width : 1200px;
		Width: 100%;
		align-items: center;
		vertical-align: middle;
		padding:5%;
		overflow: hidden;
		position: relative;
		
    }
	
	.AproposTexte{
    	color: blue;
		background-color: #ffece4;
		text-align:center;
		width: 46%;
		padding: 5%;
		margin:0;
		vertical-align: middle;
		min-width : 450px;
		display: inline-block;
		padding-top: 26.5%; /* 1:1 Aspect Ratio */
		position: relative;
		

	}
	
	.AproposTexteIn{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
    	color: blue;
		background-color: #ffece4;
		text-align:center;
		padding: 5%;
		margin:0;
		vertical-align: middle;
		min-width : 450px;
		border: solid;
		
	}
	
	
	
	.Logo_image{ 
		background-color: #ffffff;
		width: 46%;
		margin: 5% 5% 5% 0%;
		text-align:center;
		display: inline-block;
		/* height: 40%; */
		Float : right;
		vertical-align: middle;
		position: absolute;
		top: 0;
		Right: 0px;
		overflow: hidden;
			
		
	}
	
	
	.Logo_image img{
	width: 200%;
	height: auto;
	}
	
	
/*****************************************************/
/* feuille Programme */
	
	
	
	.MainProgramme{
    	color: white;
		background-color: #4844ac;
		text-align:center;
		padding: 5%;
		margin:0;
		vertical-align: top;
		min-width : 1200px;

	}
	
	.TablePhoto1 {
		position: relative;
		width: 100%;
		padding-bottom: 75%;
		min-width : 350px;
		border: none;

	}
	
	.TablePhoto1b {
		position: absolute;
		background-image: url("Programme_P1.jpg");
		width: 100%;
		height: 100%;
		padding-left: -4px;
		padding-right: -4px;
		margin:0%;
		background-size: 100%;
		border: none;

	}
	
	.TablePhoto2 {
		position: relative;
		width: 100%;
		padding-bottom: 75%;  /* Rapport entre hauteur et largeur*/
		min-width : 350px;
		border: none;

	}
	.TablePhoto2b {
		position: absolute;
		background-image: url("Programme_P2.jpg");
		width: 100%;
		height: 100%;
		padding-left: -4px;
		padding-right: -4px;
		margin:0%;
		background-size: 100%;
		border: none;

	}
	
	.TablePhoto3 {
		position: relative;
		width: 100%;
		padding-bottom: 75%;
		min-width : 350px;
		border: none;

	}
	
	.TablePhoto3b {
		position: absolute;
		background-image: url("Programme_P3.jpg");
		width: 100%;
		height: 100%;
		padding-left: -4px;
		padding-right: -4px;
		margin:0%;
		background-size: 100%;
		border: none;

	}
	
	
	.TableText {
		display: table-cell;
		padding: 15%;
		text-align:justify;
		color: #2c2f83;
		vertical-align: top;
		border: 1px;
		
	}	
	
/*****************************************************/
/* feuille L'equipe */
	
	.MainLequipe{
    	color: white;
		background-color: #4844ac;
		text-align:center;
		padding: 5%;
		margin:0;
		min-width : 1200px;
		vertical-align: middle;

	}
	
	.EquipeSection{
		color: #2c2f83;
		background-color: #ffece4;
		text-align:center;
		color: #2c2f83;
		width: 31%;
		padding: 0%;
		vertical-align: middle;
		min-width : 150px;
		display: inline-block;
	}
	
/*****************************************************/
/* feuille Contact */
	
	
.MainContact{
        background-color: #4844ac;
		color: #2c2f83;
		margin: 0;
		padding: 3%;
		overflow: hidden;
		min-width : 1200px;
		border:solid;
    }	

.ContactTable_H{
		/* position: relative; */
		/* padding-bottom: 27%; */
		/* background-color: #ffece4; */
		Width : 100%;	
		min-width : 1200px;
		vertical-align: middle;
		overflow: hidden;
		align-items: center;
		padding: 5% 5% 0% 5%;
		min-width : 1200px;
		min-height: 400px;
		position: relative;

    }	
	
.ContactTable_HG{
		/* position: absolute; */
        background-color: #ffece4;
		color: #2c2f83;
		Width : 50%;
		/* height : 100%;	 */
		display: inline-block;
		vertical-align: middle;
		text-align:center;
		min-width : 450px;
		padding-top: 27%; /* 1:1 Aspect Ratio */
		position: relative;
			
    }	

.ContactTable_HG_Text{
		padding: 15%;
		background-color: #ffece4;
		position: absolute;
		height : 100%;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		color: blue;
		text-align:center;
		padding: 5%;
		vertical-align: middle;
		border: solid;
		border-color: #ffece4;
	    }	




.ContactTable_HD{
        /* background-image: url("Entree_Piscine.jpg"); */
		width: 50%;
		min-height:270px;
		background-size: 100%;
		border: none;
		display: inline-block;
		Float : right;
		vertical-align: middle;
		position: absolute;
		top: 0;
		padding-top: 5%;
		/* margin: 5% 5% 5% 0%; */
		Right: 0px;
		/* overflow: hidden; */
		}
		
.ContactTable_HD img{
	width: 90%;
	height: auto;
	}		


.ContactTable_B{
 		color: White;
		margin: 0%;
		padding: 0% 5% 0% 5%;
		Width : 100%;	

    }
    


/*****************************************************/
/* Page Galerie */
.MainGalerie{
        background-color: #2c2f83;
		border: none;
		margin: 0%;
		padding: 0%;
		Border: solid;
		border-color:#2c2f83;
		
    }


*{box-sizing: border-box}

input[type=radio]{

position: absolute;
left: -9999px

}/*on cache tous les input*/
	
.cadre-demo1 label{
	
cursor:pointer/*la souris devient une main sur les label*/
	
}

.cadre-demo1{

overflow: hidden;
position: relative;
max-width: 600px;
/* vertical | horizontal */
margin: 2rem auto;
	/* border: solid; */
	}


.photos-mini{
	
padding-top: 66.67%;/* il s'agit du ratio pour le responsive*/
display: flex;

	}

.miniature{

flex: 1; /*les photos occupent la même place selon la largeur du conteneur*/
padding:.25rem;
	
}
	

.fenetre{/*grande photo*/

position: absolute;
top: 0;
left: 0;
transition:transform .6s,opacity .6s;
transform:translatex(-100%);
opacity: 0
	
	}

.fen:checked~ .fenetre{
	
transform:translatex(0%);
opacity: 1
	
	}

.figcaption{/*optionnel*/

position: absolute;
top: 0;
left: 0;
padding: .25rem;
transition: opacity .4s;
opacity: 0;
display: flex;
justify-content: center;
color: white;
background: hsla(0,0%,0%,.8)

}

.fen:checked~.figcaption{

opacity: 1
	
	}
	
/*****************************************************/
/* Generale */
	
	
	table {
	
	border-collapse: collapse;
	border: none;
	}
	
	td {
    	background-color: #ffece4;
		text-align:center;
		width: 33%;
		border: -4px;
		vertical-align: top;
	}
	
		
	img {
	max-width: 100%;
	height: auto;
	}
	
	iframe {
	width: 100%;
	height: 450px;
	}
	
	.Italique{
        font-style: italic;
		font-size: x-large;
    }
	
	
	a {
 
   text-decoration: none;
	}
 
	a:link {
	  color: white;
	}

	/* visited link */
	a:visited {
	  color: white;
	}

	/* mouse over link */
	a:hover {
	  color: white;
	}

	/* selected link */
	a:active {
	  color: white;
	}
	
	body {
  font-size: large;
}
 
 <\style>