.body {
  margin: 0;
}

.zoneimageslogo2
{

	    display: block;
		  margin-left: auto;
			margin-right: auto;
		text-align: center ;
			width: 90px;
		height: 90px;
		  justify-content: center;
 
}

@media  (any-hover: none) {
	
.zoneimageslogoiphoneold
{

	    display: block;
		  margin-left: auto;
			margin-right: auto;
		text-align: center ;
			width: 70px;
		height: 70px;
		  justify-content: center;
 
}

.zoneimageslogoold
{

	    display: none;
 
}
}

@media (any-hover: hover) {

.zoneimageslogoold
{

	    display: flex;
        justify-content: center;
 
}

.zoneimageslogoiphoneold
{

	    display: none;
 
}
     
}



.images{
  margin-right: 5px;  /* espace à droite de chaque image(espace entre images) */
}


/* EN-TETE EN-TETE  EN-TETE  EN-TETE  EN-TETE  EN-TETE  EN-TETE  EN-TETE  */

.header2 {
	  padding: 0px;
	  color: Blue; 
	   background-size: cover; 
	  /* background-color: Green; */
	  height:80px;  /* hauteur du bandeau d'en-tête */
	 /* overflow: hidden; /* les dépassements seront masqués */
}

	
.nom {
	  font-family : Castellar;
      font-size: 40px;  /* taille des caractères */
      letter-spacing : 4px;  /* Espace entre lettres */
      color : 	#3d48b8;
      font-weight : 800 ; /* épaisseur des traits */
      position: absolute; 
     /* la position est définie en fonction du la taille de l'écran */		
}

   .accompagnement {
		font-family: Candara;  
		font-size: 44px; 
		color : white; 
		font-weight : 400;
		position: absolute;  
	     /* la position est définie en fonction du la taille de l'écran */		
		}

/* On screens that are 992px or less, set the background color to blue */
@media (max-width: 1080px) 
{
     
	 .accompagnement {
		left: 440px;
		top: 24px;
		}
	 .nom {
	  left: 40px;
	  	  top: 30px;
		}
  
 }
 
 
  /* On screens that are 992px or less, set the background color to blue */
@media ((min-width: 1080px) and (max-width: 1270px))
{
	   .accompagnement
	   {
		left: 550px;
		top: 20px;
			
		}
	.nom {
	  left: 100px;
	  top: 26px;
		}
	  
 }

 
 /* On screens that are 992px or less, set the background color to blue */
@media (min-width: 1270px)
{
	   .accompagnement
	   {
		left: 710px;
		top: 20px;
			
		}
	.nom {
	  left: 100px;
	  top: 26px;
		}
	  
 }


@media (max-width: 1270px) and (any-hover: none) {
		.navportableandroid 
		{
		display: none;
		}
		
		.navportableiphone 
		{
		display: 100%;
		}
}

@media (max-width: 1270px)  and (any-hover: hover) {
.navportableandroid 
		{
		display: 100%;
		}
		
		.navportableiphone 
		{
		display: none;
		}
			.nav {
		display: none;
		}
     
}

  
/* On screens that are 992px or less, set the background color to blue */
@media (max-width: 1270px) 
{
	.nav {
		display: none;
		}
		
		.imagespetitecran
		{
		display: 100%;
		}
		
	.imagesgrandecran
		{
		display: none;
		}
     
 }
 
/* On screens that are 992px or less, set the background color to blue */
@media (min-width: 1270px)
{
   .navportableiphone 
		{
		display: none;
		}
	 .navportableandroid
	 	{
		display: none;
		}
     .nav
	   {
  	display:  100%;
       }
	   		.imagespetitecran
		{
		display: none;
		}
		
	.imagesgrandecran
		{
		display: 100%;
		}
	  
 }




/* MENU MENU MENU MENU  (Attention il s'agit du menu pour grands écrans, tout est dupliqué pour telephones) */



/* Attributs du bandeau de Menu (ou sous-menu) */
.nav {
	overflow: hidden;  /* si on le fait pas, il y a un petit bandeau blanc au dessus du bandeau de menu */
	background-color: #dddddd;   /* GRIS */ /* couleur du bandeau de menu et sous-menu = GRIS */
	height:60px;  /* Hauteur du bandeau de menu */
}


.nav ul {
	width: 100%;
	display: flex;
	text-align: center;
	list-style-type: none;
	margin: 10;
	padding: 0;
	font-family: Arial;  /* police */
    color: darkgreen;   /* utilité ? , si je la change ça ne change rien ! */
}


/* Critères quand un element du menu (pas le sous-menu) a été visité au moins une fois */
a, a:visited { /* Les liens visités. */
	color: darkgreen; /* ta couleur */
}


.nav li {
  float: left;
}


/* Attributs du Menu */
.nav ul li a {
  display: block;
  background-color: none;
      margin-left: 5px;
 /*  width: 180px;  /* largeur pour un element du menu */
  text-decoration: none;
  text-align: left;
}


 
/* On screens that are 992px or less, set the background color to blue */
@media (max-width: 1430px) 
{
/* Attributs du Menu */
.nav ul li a {
   margin-right: 22px;  /* espace à droite de chaque element du menu (espace entre  elements) */
  font-size: 27px;  /* taille des caractères du menu */
}
 }
 
 
 /* On screens that are 992px or less, set the background color to blue */
@media (min-width: 1430px) 
{
/* Attributs du Menu */
.nav ul li a {
   margin-right: 25px;  /* espace à droite de chaque element du menu (espace entre  elements) */
  font-size: 30px;  /* taille des caractères du menu */
}
 }

/* Critères quand un element du menu (ou sous-menu) est pointé (hover = souris dessus sans cliquer)  */
/* nav li a = nav ul li a  */
.nav ul li a:hover {
  background-color: #dddddd;  /* GRIS */ /* couleur du surlignage de l'élémént pointé, en gardant la couleur du bandeau, seule la couleur du texte change */ 
  color: white; /* couleur de la police quand on passe la souris dessus */
}


/* Attributs quand un element du menu (ou sous-menu) est actif (page sélectionnée) */
.nav .active {
	/* background-color: grey;  /* couleur d'encadrement quand c'est sélectionné */
		color: darkgreen;   /* couleur de la police quand sélectionné, on garde la même couleur que lorsque non sélectionné pour que seul change le soulignement */
		text-decoration : underline;  /* l'element est souligné */
}

/* pour assurer que le menu puisse se dérouler par-dessus d'autres éléments, il faut lui donner une position absolue */
.nav ul li ul {
// position: absolute;
}

/* Rend le menu déroulant caché par défaut */
.nav ul li ul li {
  display:none;

}

/* s'applique au deuxieme ul (sous-menu), quand un element du menu principal (ul li) est pointée (hover = souris dessus sans cliquer ) */
.nav ul li:hover > ul
{
	display:block;
	position: absolute;
    background-color: #dddddd; /* GRIS */
    box-shadow : 0px 1px 2px #CCC;
    z-index : 1000;  /* Element avec le z-index le plus élévé passe au premier plan */
    width: 600px;  /* Largeur de la zone de sous-menu (zone grise) */
}



/* s'applique au deuxieme ul (sous-menu), quand un element du menu principal (ul li) est pointée (hover = souris dessus sans cliquer ) */
.nav ul li:hover  > ul li
{
	display:block;
}


.nav li 
{
  float: left;
}

/* s'applique au deuxieme ul (sous-menu)*/
.nav ul li ul li
{
  float: none;
}

/* s'applique au deuxieme ul (sous-menu)*/
.nav ul li ul li a
{
		padding: 15px 30px;  /* définit l'espace (en hauteur) entre les éléments du sous-menu */
		font-size: 30px;  /* Taille des caractères du sous-menu */
		color: darkgreen;  /* couleur par défaut des éléments du sous-menu */
		width: 500px;  /* taille de la zone de surlignage quand un élément du sous-menu est pointé ? => Doit être inférieur à la Largeur de la zone de sous-menu */
}



/* MENU MENU MENU MENU  PORTABLE  */





/* Attributs du bandeau de Menu (ou sous-menu) */
.navportableiphone {
	overflow: hidden;  /* si on le fait pas, il y a un petit bandeau blanc au dessus du bandeau de menu */
	background-color: #dddddd;   /* GRIS */ /* couleur du bandeau de menu et sous-menu = GRIS */
	height:60px;  /* Hauteur du bandeau de menu */
}


.navportableiphone ul {
	width: 100%;
	display: flex;
	text-align: center;
	list-style-type: none;
	margin: 10;
	padding: 0;
	font-family: Arial;  /* police */
    color: darkgreen;   /* utilité ? , si je la change ça ne change rien ! */
}




/* Critères quand un element du menu (pas le sous-menu) a été visité au moins une fois */
a, a:visited { /* Les liens visités. */
	color: darkgreen; /* ta couleur */
}


.navportableiphone li {
  float: left;
}


/* Attributs du Menu */
.navportableiphone ul li a {
  display: block;
  background-color: none;
 /*  width: 180px;  /* largeur pour un element du menu */
     margin-left: 5px;
  margin-right: 25px;  /* espace à droite de chaque element du menu (espace entre  elements) */
  font-size: 30px;  /* taille des caractères du menu */
  text-decoration: none;
  text-align: left;
}



/* Critères quand un element du menu (ou sous-menu) est pointé (hover = souris dessus sans cliquer)  */
/* navportableiphone li a = navportableiphone ul li a  */
.navportableiphone ul li a:hover {
  background-color: #dddddd;  /* GRIS */ /* couleur du surlignage de l'élémént pointé, en gardant la couleur du bandeau, seule la couleur du texte change */ 
  color: white; /* couleur de la police quand on passe la souris dessus */
}


/* Attributs quand un element du menu (ou sous-menu) est actif (page sélectionnée) */
.navportableiphone .active {
	/* background-color: grey;  /* couleur d'encadrement quand c'est sélectionné */
		color: darkgreen;   /* couleur de la police quand sélectionné, on garde la même couleur que lorsque non sélectionné pour que seul change le soulignement */
		text-decoration : underline;  /* l'element est souligné */
}

/* pour assurer que le menu puisse se dérouler par-dessus d'autres éléments, il faut lui donner une position absolue */
.navportableiphone ul li ul {
// position: absolute;
}

/* Rend le menu déroulant caché par défaut */
.navportableiphone ul li ul li {
  display:none;

}

/* si hover fonctionne pas <=> iphone, on affiche pas le sous-menu */
/* s'applique au deuxieme ul (sous-menu), quand un element du menu principal (ul li) est pointée (hover = souris dessus sans cliquer ) */
/* le souci c'est que onclick pas traité comme hover sur iphone */
.navportableiphone ul li:hover > ul
{
	display:block;
	position: absolute;
    background-color: #dddddd; /* GRIS */
    box-shadow : 0px 1px 2px #CCC;
    z-index : 1000;  /* Element avec le z-index le plus élévé passe au premier plan */
    width: 600px;  /* Largeur de la zone de sous-menu (zone grise) */
}



/* s'applique au deuxieme ul (sous-menu), quand un element du menu principal (ul li) est pointée (hover = souris dessus sans cliquer ) */
.navportableiphone ul li:hover  > ul li
{
	display:block;
}




.navportableiphone li 
{
  float: left;
}

/* s'applique au deuxieme ul (sous-menu)*/
.navportableiphone ul li ul li
{
  float: none;
}

/* s'applique au deuxieme ul (sous-menu)*/
.navportableiphone ul li ul li a
{
		padding: 15px 30px;  /* définit l'espace (en hauteur) entre les éléments du sous-menu */
		font-size: 30px;  /* Taille des caractères du sous-menu */
		color: darkgreen;  /* couleur par défaut des éléments du sous-menu */
		width: 500px;  /* taille de la zone de surlignage quand un élément du sous-menu est pointé ? => Doit être inférieur à la Largeur de la zone de sous-menu */
}




/* MENU MENU MENU MENU  PORTABLE  */





/* Attributs du bandeau de Menu (ou sous-menu) */
.navportableandroid {
	overflow: hidden;  /* si on le fait pas, il y a un petit bandeau blanc au dessus du bandeau de menu */
	background-color: #dddddd;   /* GRIS */ /* couleur du bandeau de menu et sous-menu = GRIS */
	height:60px;  /* Hauteur du bandeau de menu */
}


.navportableandroid ul {
	width: 100%;
	display: flex;
	text-align: center;
	list-style-type: none;
	margin: 10;
	padding: 0;
	font-family: Arial;  /* police */
    color: darkgreen;   /* utilité ? , si je la change ça ne change rien ! */
}




/* Critères quand un element du menu (pas le sous-menu) a été visité au moins une fois */
a, a:visited { /* Les liens visités. */
	color: darkgreen; /* ta couleur */
}


.navportableandroid li {
  float: left;
}


/* Attributs du Menu */
.navportableandroid ul li a {
  display: block;
  background-color: none;
 /*  width: 180px;  /* largeur pour un element du menu */
  margin-right: 25px;  /* espace à droite de chaque element du menu (espace entre  elements) */
    margin-left: 5px;
  font-size: 30px;  /* taille des caractères du menu */
  text-decoration: none;
  text-align: left;
}



/* Critères quand un element du menu (ou sous-menu) est pointé (hover = souris dessus sans cliquer)  */
/* navportableandroid li a = navportableandroid ul li a  */
.navportableandroid ul li a:hover {
  background-color: #dddddd;  /* GRIS */ /* couleur du surlignage de l'élémént pointé, en gardant la couleur du bandeau, seule la couleur du texte change */ 
  color: white; /* couleur de la police quand on passe la souris dessus */
}


/* Attributs quand un element du menu (ou sous-menu) est actif (page sélectionnée) */
.navportableandroid .active {
	/* background-color: grey;  /* couleur d'encadrement quand c'est sélectionné */
		color: darkgreen;   /* couleur de la police quand sélectionné, on garde la même couleur que lorsque non sélectionné pour que seul change le soulignement */
		text-decoration : underline;  /* l'element est souligné */
}

/* pour assurer que le menu puisse se dérouler par-dessus d'autres éléments, il faut lui donner une position absolue */
.navportableandroid ul li ul {
// position: absolute;
}

/* Rend le menu déroulant caché par défaut */
.navportableandroid ul li ul li {
  display:none;

}

/* si hover fonctionne pas <=> iphone, on affiche pas le sous-menu */
/* s'applique au deuxieme ul (sous-menu), quand un element du menu principal (ul li) est pointée (hover = souris dessus sans cliquer ) */
/* le souci c'est que onclick pas traité comme hover sur iphone */
.navportableandroid ul li:hover > ul
{
	display:block;
	position: absolute;
    background-color: #dddddd; /* GRIS */
    box-shadow : 0px 1px 2px #CCC;
    z-index : 1000;  /* Element avec le z-index le plus élévé passe au premier plan */
    width: 600px;  /* Largeur de la zone de sous-menu (zone grise) */
}



/* s'applique au deuxieme ul (sous-menu), quand un element du menu principal (ul li) est pointée (hover = souris dessus sans cliquer ) */
.navportableandroid ul li:hover  > ul li
{
	display:block;
}




.navportableandroid li 
{
  float: left;
}

/* s'applique au deuxieme ul (sous-menu)*/
.navportableandroid ul li ul li
{
  float: none;
}

/* s'applique au deuxieme ul (sous-menu)*/
.navportableandroid ul li ul li a
{
		padding: 15px 30px;  /* définit l'espace (en hauteur) entre les éléments du sous-menu */
		font-size: 30px;  /* Taille des caractères du sous-menu */
		color: darkgreen;  /* couleur par défaut des éléments du sous-menu */
		width: 500px;  /* taille de la zone de surlignage quand un élément du sous-menu est pointé ? => Doit être inférieur à la Largeur de la zone de sous-menu */
}



/*  CONTENU DE la Page d'accueil (avec photo)  */  


.pageaccueil {
		padding: 0px;
		background-size: cover;
		background-color:  	#dbf7eb ;   /* Couleur verte inspirée de la photo (code récupéré avec color picker) */
	    color:#793f5e;   /* rose rouge */
	    /* height:900px;  */
	    font-family: Arial;  /* police */
		font-size: 34px;	  

}


/*  CONTENU DES PAGES de travail (à l'exception de la page d'accueil) content (Class) ==> row (Class) => column middle (Class) */

.content {
		padding-left: 70px;
		padding-right: 70px;
		background-color:  	#dbf7eb ;   /* Couleur verte inspirée de la photo (code récupéré avec color picker) */
	    font-family: Arial;  /* police */
}


/*
.content li a {
  text-align: center;
}
*/

.row {

}

.column {
  float: left;
}

.column.middle{
  width: 100%;
  font-size: 25px;  /* taille du texte */  /* Nota : si taille de l'écran diminue, la taille des caractères ne change pas, on passe à la ligne suivante */
}

/* Cas particulier des listes de liens (ex: articles, citations) li=liste a=lien */
.column.middle li {
   	margin-left: 30px;
}


/* Cas particulier des listes de liens (ex: articles, citations) li=liste a=lien */
.column.middle li a {
   text-decoration:none;   /* supprime soulignement */
}

/* Cas des paragraphes, listes... (Prestations, articles, livres, vidéos, citations, ...)  */
.column.middle ul {
   font-size: 26x;  /* taille des caractères dans le UL = Taille des Titres */
   margin-left: -30px;  /* Décalage à gauche car la zone UL est trop à droite */
}
/* organisatin des paragraphes  */
.column.middle ul li{
  font-size: 25px;  /* taille du texte (dans les listes et 1er item de paragraphe )  */
  	margin-left: 30px;
		line-height:34px;  /* interligne */
}


/* organisatin des paragraphes  */
.column.middle ul li ul ul{
  	margin-left: 10px;  /* décalage à droite (dans prestations */
}


.row::after {
  content:"";
  display: table;
  clear: both;
}


/* ???????????????????????????????????????????? 

@media screen and (max-width: 600px){
  .column.left .column.right{
    width:100%;
  }
}  */



/* TABLEAU TABLEAU TABLEAU TABLEAU */

table {
	border-collapse: collapse;
	border: 2px solid black;  /* largeur des traits du tableau */
	letter-spacing: 1px;
	font-size: 0.8rem;
}

td, th {
		border: 2px solid black;
		padding: 10px 20px;
		font-size: 25px;  /* taille des caractères */
	    font-family: Arial;  /* police */
}

th {
		background-color: #80B9C0;  /* Couleur des cellules de Titre */
	    border: 1px solid black;  /* largeur du trait entre les deux lignes de titre ? */
		width:50%;   /* chaque colonne prend 50% => 2 colonnes de taille égale car 2 colonnes */
}

td {
  text-align: center;
}

tr:nth-child(even) td {
	   background-color: white;
}

tr:nth-child(odd) td {
	   background-color: #dddddd;   / GRIS */
}

/* légende (ou le titre) d'un tableau */
caption {
  padding: 10px;
}