@font-face {
    font-family: 'Tangerine';
    src: url('../fonts/Tangerine.woff2') format('woff2'),
        url('../fonts/Tangerine.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Coolvetica Rg';
    src: url('../fonts/CoolveticaRg-Regular.woff2') format('woff2'),
        url('../fonts/CoolveticaRg-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DukasCFRegular';
    src: url('../fonts/DukasCFRegular-Regular.woff2') format('woff2'),
        url('../fonts/DukasCFRegular-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


body {
	/*position:relative;*/
	background-image:url("../img/ruban.jpg");/* l'image de fond qui représente un ruban de couturière */
	background-attachment:fixed;/*quand on scroll, le contenu de la page défile sur l'image de fond qui elle reste fixe  */ 
	background-position:top left;
	background-size:cover;/* l'image de fond est étirée de façon à ce qu'elle couvre toute la zone d'affichage */
	margin:0px;/* margin représente les marges extérieures à l'élément, au contraire de padding qui sont les marges intérieures */
}

.EnteteDuSite 
{ 
	font-family:Tangerine;/* la famille de caractères */ 
	padding:0px;
	overflow:hidden;/* en cas de redimensionnement trop petit de l'élément, ce qui ne peut plus être affiché à l'intérieur de celui-ci est caché et ne déborde pas */
	width:50%;/* la largeur est définie à 50 % de la largeur de l'écran, elle dépend donc de la résolution de ceuli-ci */
	margin:auto;/* */
	border-style:solid;/* le style de bordure de la forme*/
	background-color:#F97F51;/* la couleur de fond */	
	font-size: 5vw;/*la taille du texte est définie en vw, unité qui dépend elle même de la résolution de l'écran de l'utilisateur*/
	text-align: center;/* le texte est centre à l'interieur de la forme */
	margin-bottom:20px;/* */
	border-radius:100px 20px 100px 20px;/* pour arondir les bords de la forme */
}
.EnteteDuSite */* * est un caractère générique qui désigne tout */
{
	margin:1vw;
}
main {
	display:flex;/* l'utilisation des flex-box permet de définir relativement aisément la façon dont on veut que les éléments soient affichés au sein de celle-ci*/
	flex-direction: row;/* on affiche les éléments en ligne */
	margin-top:20px;
	margin-bottom:20px;
	
}
.CorpsDuSite/* débuter un selecteur par un point . permet de cible un élément définit par une classe */
{
	color:#0A0818;
	font-family:DukasCFRegular;
	background-color:#dfe6e9;
	padding: 10px;
	margin:	0;
	font-size:1.2vw;
	position:relative;
	left:23%;
	width:75%;
	opacity:0.9;
	
}
.CorpsDuSite img{/* selecteur qui pointe les balises img dans les éléments de classe CorpsDuSite  */
	width:100%;
}
.CorpsDuSite a:hover{/* définit une mise en forme particulière lorsque la souris survole l'élément en question, un lien en l'occurence. */
	font-size:1.5vw;
}
.CorpsDuSite a:visited{/* de même on peut définir comment un lien doit être affiché quand il à déjà été suivi */
	color:#0A0818;
}
.TableauPrix{
	font-family:DukasCFRegular;
	text-align:center;
	background-color:#dfe6e9;
	padding: 10px;
	margin:	0;
	font-size:1.2vw;
	position:relative;
	left:23%;
	width:75%;
	border-radius:80px 80px 20px 20px;

}
.TableauPrix table{/* ce selecteur va définir la façon dont le tableau de prix sera affiché */
	border: 2px solid black;/* les bordures du tableau */
	border-collapse:collapse;/* les bordures forment un ensemble. sinon chaque cellule est isolée des autres. */
	table-layout:auto;/* définit la manière dont le navigateur doit disposer le table*/
	width:100%;
}
.TableauPrix table td{
	border: 1px solid black;
}
.TableauPrix th{
	background-color:#8F81D7;
	
}
.TableauPrix strong{
	color:#1A0C25;
}
.TableauPrix tr:nth-child(odd) {/*les lignes paires et impaires du tableau prennent une couleur de fond différente*/
  background-color:#79ADD2;
}

.TableauPrix tr:nth-child(even) {/*les lignes paires et impaires du tableau prennent une couleur de fond différente*/
  background-color: #7D8FD4;
}
.Photos{
	font-family:DukasCFRegular;
	background-color:#dfe6e9;
	padding: 10px;
	margin:	0;
	font-size:1.2vw;
	position:relative;
	left:23%;
	width:75%;

}

.Photos h2{
	color:red;
}
.Photos img{
	
	position:relative;
	float:left;
    width:100px;
	height:100px;
	padding:10px;
	
}
.Formulaires{
	display:flex;
	margin-top: 3vw;
	width:50%;
	padding:2vw;
	border-style:solid;
}
.Formulaires input{
	flex:1;
}
.Formulaires p{
	display:flex;
	justify-content:space-between;/*l'espace est réparti entre tous les éléments*/
}
.Formulaires p:nth-child(7){
	display:flex;
	flex-direction:column;
}
.Formulaires textarea {
	
	height:3vw;
}
.Horaire table{
	text-align:center;
	border: 2px solid black;
	border-collapse:collapse;
	table-layout:auto;
	width:75%;
}
.Horaire td{
	border: 1px solid black;
}
.Horaire th{
	border: 1px solid black;
	background-color:#8F81D7;
}
.PiedDePageDuSite{
	
	background-color:#dcdde1;
	width:50%;
	margin:auto;
	font-size: 1vw;
	text-align: center;
	overflow:hidden;
	
}
.GoogleMap {
	font-family:DukasCFRegular;
	display:flex;
	flex-direction:column;
	background-color:#dfe6e9;
	padding: 10px;
	margin:	0;
	font-size:1.2vw;
	position:relative;
	left:23%;
	width:75%;
	opacity:0.8;
	opacity:1;
}

.GoogleMap>table iframe{
	width:640px; 
	height:480px
	
}
/*

dans un soucis de visibilité et de confort pour l'utilisateur, quand les résolutions d'écran ne permettent par exemple pas de bien afficher le contenu 
avec le CSS standard, on peut faire ce qu l'on apelle des média querry, comme par exemple :

@media screen and (max-width:420px) // quand le site est affiché et que la taille de l'écran est de max 420 px.
{
	On définit un CSS spécifique à ce cas.

}


@media print
{
	Définir un style dédié à une page qu'on veut imprimer, par exemple rendre invisible des menus, ou enlever la couleur de fond, etc…
}



*/