<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

* {
  box-sizing: border-box;
}
body {font-family: "Garamond";}


/* Nouvelles règles si la fenêtre fait au plus 1024px de large */
@media all and (min-width: 640px)
{
	/*
	#Accueil {background-color:"#DD06a6"}
	#Paris {background-color:"#DD06a6"}
	#Tokyo {background-color:"#DD06a6"}
	#Oslo {background-color:"#DD06a6"}
*/

	.tablink {
	  background-color: white;
	  color: #bbb;
	  float: left;
	  border: none;
	  outline: none;
	  cursor: pointer;
	  padding: 14px 16px;
	  font-size: 24px;
	  width: 25%;
	}
	
	.contactText {
	  background-color: white;
	  color: #555;
	  float: center;
	  font-size: 24px;
	  width: 100%;
	}

	.tablink:hover {
	  color: #CD0696;
	}

	/* Style the tab content */
	.tabcontent {
	  display: none;
	  padding: 50px;
	  text-align: center;
	}
	
	
	#div2 { 
		height: 70%;
		width:92%;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
	
	.pTitre {
		margin: 1em;
		font-size: 2.5em;
		color: #DD06a6;
		text-transform: uppercase;
		text-align: center;
		font-weight: 600;
		font-family: "Lucida Handwriting";
	}
	
	.pSousTitre {
		margin: 1em;
		font-size: 1.5em;
		color: #DD06a6;
		text-transform: uppercase;
		text-align: center;
		font-weight: 600;
		font-family: "Lucida Handwriting";
	}

	.pTexte {
		margin: 1em;
		font-size: 1em;
		color: #888888;
		text-align: center;
		font-weight: 600;
		font-family: "cursive";
	}
	
	h1 {
		margin: 1em;
		font-size: 1.5em;
		color: #DD06a6;
		text-align: center;
		font-weight: 600;
		font-family: "Lucida Handwriting";
	}
	h3 {
		font-size: 20px;
		color: white;
		text-align: center;
		font-family: "cursive";
	}
	
	/* Float four columns side by side */
	.column {
		float: left;
		width: 30%;
		padding: 10px 10px;
	}

	/* Remove extra left and right margins, due to padding */
	.row {
		margin: 0 -5px;
	}

	/* Clear floats after the columns */
	.row:after {
		content: "";
		display: table;
		clear: both;
	}
	
	/* Style the counter cards */
	.card {
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		padding : 0.2px 1px 0.2px 0px;
		text-align: center;
		background-color: #bed7ef;
		font-family: "Lucida";
	}
	.texteCard {
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		padding: 1px;
		text-align: center;
		background-color: #eff5fb;
		height: 150;
		font-family: 'cursive';
		color: #6875A1;
		font-size: 1em;
	}
	
	.textCardTarif {
		font-size: 1em;
		margin: 1px;
		color: #2D4E6B;
		text-align: center;
		font-family:'Sofia';
		line-height: 1em;
	}
	
	.pTexteCard {
		font-size: 1.25em;
		margin: 1px;
		color: #2D4E6B;
		text-align: center;
		font-family:'Sofia';
		line-height: 1.5em;
	}
	
		/* Float four columns side by side */
	.columnYoga {
		float: center;
		width: 60%;
		padding: 10px 10px 10px 20%;
	}

	
	#div3 { 
		height: 5%; 
		width:100%;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		font-size: 2em;
		/*color: #AAAAAA;*/
	}

}

@media all and (max-width:640px)
{ 
	#div1 {  
		height: 8%; 
		width:100%;
		text-align: center;
		/*color: #BBBBBB;*/
		padding: 0; 
		margin: 0;
		

	}
	.tablink {
	  background-color: white;
	  color: #bbb;
	  float: left;
	  border: none;
	  outline: none;
	  cursor: pointer;
	  font-size: 1.1em;
	  width: 25%;
	}
	
	.contactText {
	  background-color: white;
	  color: #555;
	  float: center;
	  font-size: 1.3em;
	  width: 100%;
	}

	.tablink:hover {
	  color: #CD0696;
	}

	/* Style the tab content */
	.tabcontent {
	  display: none;
	  padding: 50px;
	  text-align: center;
	}
	

	#div2 { 
		height: 70%;
		width:100%;
		text-align: center;
	    color: #FF05C6;
		padding: 0; 
		margin: 0;		
		text-transform: uppercase;
	}
	
		
	.pTitre {
		margin: 1em;
		font-size: 2.5em;
		color: #DD06a6;
		text-transform: uppercase;
		text-align: center;
		font-weight: 600;
		font-family: "Lucida Handwriting";
	}
	
	.pSousTitre {
		margin: 1em;
		font-size: 1.5em;
		color: #DD06a6;
		text-transform: uppercase;
		text-align: center;
		font-weight: 400;
		font-family: "Lucida Handwriting";
	}

	.pTexte {
		margin: 1em;
		font-size: 1em;
		color: #888888;
		text-align: center;
		font-weight: 600;
		font-family: "cursive";
	}
	
	#titreCentre {
		margin: 1em;
		font-size: 2.5em;
		color: #DD06a6;
		text-transform: uppercase;
		text-align: center;
		font-weight: 600;
	}

	
	h1 {
		margin: 1em;
		font-size: 1.5em;
		color: #DD06a6;
		text-align: center;
		font-weight: 600;
		font-family: "Lucida Handwriting";
	}
	h3 {
		font-size: 20px;
		color: white;
		text-align: center;
		font-family: "cursive";
	}
	/* Float four columns side by side */
	.column {
		float: center;
		width: 100%;
		padding: 10px 10px;
	}

	/* Remove extra left and right margins, due to padding */
	.row {
		margin: 0 -5px;
	}

	/* Clear floats after the columns */
	.row:after {
		content: "";
		display: table;
		clear: both;
	}
	
	/* Style the counter cards */
	.card {
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		padding : 0.2px 1px 0.2px 0px;
		text-align: center;
		background-color: #bed7ef;
		font-family: "Lucida";
	}
	.texteCard {
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		padding: 1px;
		text-align: center;
		background-color: #eff5fb;
		height: 50;
		font-family: 'cursive';
		color: #6875A1;
		font-size: 1em;
	}
	
	.textCardTarif {
		font-size: 1em;
		margin: 1px;
		color: #2D4E6B;
		text-align: center;
		font-family:'Sofia';
		line-height: 1em;
	}
	
	
	.pTexteCard {
		font-size: 1em;
		margin: 1px;
		color: #2D4E6B;
		text-align: center;
		font-family:'Sofia';
		line-height: 1.5em;
	}
	
		/* Float four columns side by side */
	.columnYoga {
		float: center;
		width: 100%;
	}

	
	#div3 { 
		height: 5%; 
		width:100%;
		text-align: center;
		font-size: 1em;
		color: #666666;
	}
	
	img {
		height:30%;
	}

}


