/*  couleurs */
:root{
    --fondclair: #A0DEDD; 
    --fondvert: #0d550d;
    --fondmarron: #e68e3b;
    --fondblanc: #ffffff;
	--fondJaune: #ffff00;
	--fondmenu: #323232;
	--colormenu: #ffffff;
	--fondMoutarde: #bea30b;
	
	--fondGrisPlusFonce:#474747;  /*71*/
	--fondGrisFonce:#818181;  /*129*/
	--fondgrismoyen:#939393;  /*147*/
	--fondGrisClair:#b3b3b3;  /*179*/
	--fondGrisPlusClair:rgb(192, 192, 192);  /*192*/
	--couleurStandard: #000000;

	/* Boites de dialogue  */
    --couleurError: #842029;
    --fondError: #f8d7da;
    --couleurBorderError: #ff2525;

    --couleurSuccess: #0f5132;
    --fondSuccess: #d1e7dd;
    --couleurBorderSuccess: #badbcc;

    --couleurWarning: #9c5a0e;
    --fondWarning: #f6b76f;
    --couleurBorderWarning:#fc7200;

	--couleurH1: #b7b7b7; 
    --couleurH2: #6467be; 

	/* News  & Web Actes */
	--fondVertClair: #abff94; /*171,255,148*/
	--fondLigneClaire: #feff9a; /*254,255,154*/
	--fondLigneFoncee: #fffa42; /*255,250,66*/

	/* Web Actes */
	--fondVertFluo: rgb(103,252,0); 
	--fondRoseFanne: rgb(255,192,203); 

}

html{
    font-size: 62.5%;
}

/* initialisation des marges et padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type:none; 
    text-decoration: none;
}
a img 
{
	border : none;
}


.container{

	display:flex;
	flex-direction:	column;
	padding: 0.5rem 1.5rem;
}
/* ------------ Menu ----------- */
.header
 {
     display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.main
 {
    position: relative; 
}

.menu{
	position: 0;
	background: var(--fondmenu);
	color: var(--colormenu);
	padding: 0 0.5rem;
	display: flex;
	justify-content:flex-start;
	align-items: center; 
	flex-wrap: wrap;
	width: 100%;  
}
.menu a{
	color: var(--colormenu);
}
.menu ul{ 
	display: flex;
	justify-content:flex-start;
	align-items: center; 
	flex-wrap: wrap;
	justify-content: center;
 	padding: 0.5rem 0 0.5rem 0;
}

.menu li{
	font-size: 1.2rem;
	margin-right: 0.5rem;	
}

/* ======================= Tables ======================== */
table
{
	border-collapse: collapse;
}
th 
{
	color:blue;
	border: 1px solid black;
	padding: 0 0.2rem
}
td 
{
	border: 1px solid black;
	text-align: center;
	padding: 0 0.2rem
}

table .tableSans
{
	border: none;
	margin: 0;
	
}

td .tableSans
{
	text-align: left;
}


/* ======================= Tables ======================== */
.body
{
	background-color: rgb(147,147,147); 
	font-size: 1.6rem;
	text-align: center;

}

.bodyGestion
{
	background-image: url("../img/fondsite.jpg");
}

.bodyDetPhoto
{
	/* background-color: rgb(190,163,11);	 */
	background-color: var(--fondMoutarde);
}

/* On force un standard pour tous les boutons */
button{
	border: 1px solid black;
	border-radius: 1rem;
	padding: 0.3rem 0.5rem;
	background: var(--fondblanc);
	color:var(--couleurStandard);
}

.boutonNormal{
	padding: 0.3rem 0.7rem;
	border-radius: 1rem;
	border: 2px solid var(--couleurStandard);
	margin: 0.3rem;
	background: var(--fondblanc);
	cursor: pointer;
  }
  
  .boutonForm{
	padding: 0.3rem 0.7rem;
	border-radius: 1rem;
	border: 2px solid var(--couleurStandard);
	margin: 0.3rem;
	background: var(--couleurBorderSuccess);
	cursor: pointer;
  }
  
  .boutonWarning{
	  padding: 0.3rem 0.7rem;
	  border-radius: 1rem;
	  border: 2px solid red;
	  background: var(--fondError);
	  margin: 0.3rem;
	  cursor: pointer;
  } 
  
  .boutonTypeA{
	padding: 0.3rem 0.7rem;
	border-radius:0%;
	border: none;
	background: transparent;
	color: #1010db;
	font-weight: bold;
  	cursor: pointer;
	} 

  /* --------------------- Boite d'alerte */
  .boxAlerte{
	flex: 0 0 auto;
	 width: 60%; 
	margin-right: auto;
	margin-left: auto;            
	margin-bottom: 1rem;
	padding: 1rem;

	border-radius: 1.5rem;
	text-align: center;
  }
  
  
  .boxAlerteSuccess{
	color: var(--couleurSuccess);
	background: var(--fondSuccess);
	border: 0.4rem solid var(--couleurBorderSuccess);
	}
  
  .boxAlerteError{
	color: var(--couleurError);
	background: var(--fondError);
	border: 0.4rem solid var(--couleurBorderError);
  }
  
  .boxAlerteWarning{
	color: var(--couleurWarning);
	background: var(--fondWarning);
	border: 0.4rem solid var(--couleurBorderWarning);
  }
	
  /* --------------------- Boite d'alerte */
  
h1
{
	font-family: 'Arial Black', Arial, Verdana, sherif; 
	font-size: x-large;
	text-align: center;
	color: rgb(0,0,148);
}


.corps
{
	/* width: 700px; */
	margin: auto;
	padding: 15px;
	background-color: rgb(147,147,147); 
	text-align: center;
}

/* ===================== Parcours ==================== */
.parcours
{
	display: flex;
}
.parcoursProf
{
	width:25%;
}
.parcoursPhoto
{
	width:50%;
}
.parcoursEleves
{
	width:25%;
}
.parcoursProfSans
{
	width:50%;
}
.parcoursElevesSans
{
	width:50%;
}

.parcoursTerm
{
	width:75%;
	display: flex;
	flex-direction: column;
}
.parcoursTerm1
{
	display: flex;
}
.parcoursProfT
{
	width:60%;
}
.parcoursTerm2
{
    display: flex;
    justify-content: space-evenly;
}

.parcoursPresentation
{
	margin: 0.5rem;
	background-color: rgb(192,192,192); 
	border: 4px ridge black;
	padding: 0.5rem;
 
}

.ligneParcours:nth-child(odd)
{
	background: var(--fondGrisFonce)  ;
}

.ligneParcours:nth-child(even)
{
	background: var(--fondGrisPlusClair) ;
}

.italique
{
	font-style: italic;
}
/* ===================== Parcours ==================== */

.corpsDetPhoto
{
	margin-top: 0.5rem;
}
/*============ Div Web_photo ============*/
.mosaic
{
	display: flex;
	flex-direction: row;	
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	padding: 1rem 0;
}

.mosaic img{
	padding: 0.5rem;
}
/*============ Div Web_photo ============*/
/*============ Div Wphoto_det ============*/
.elem_phot
{
	margin: auto;
	width: 550px;
	text-align: center;
}
/*============ Div Wphoto_det ============*/
/*============ Div Liens ============*/
/* web_lien.php */
.corpsPres
{
	background-color: rgb(179,179,179); 
	width:80rem;
	margin:auto;
	padding: 1rem;
	text-align: center;
}
.presentation
{
	background-color: rgb(192,192,192); 
	border: 4px ridge black;
	padding: 1rem;
	width:50rem;
	margin:auto;
	font-style: italic;
}

/*============ Div Liens ============*/

/*============ Div web_cous_gene ============  */
.corpsCousGen
{
	background-color: rgb(179,179,179); 
	width: 70rem;
	margin:auto;
	padding: 2rem;
}
/*============ Div web_cous_gene ============  */
.flexColCentre
{
	display: flex;
	flex-direction: column;	
}

/*============ Div 7d Photo Det ============  */
.corps7dPhot
{
	display: flex;
	flex-direction: row;	
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	padding: 1rem 0;
}
.phot7d
{
	padding: 0.5rem;
}

.phot7dDescrip
{
	display: flex;
	flex-direction: column;

    border: 4px ridge black;
    padding: 1rem;
    background-color: var(--fondGrisPlusClair);
    text-align: left;	
}
/*============ Div 7d Photo Det ============  */

.elem_corps
{
	border: 4px ridge black;
	background-color: rgb(192,192,192); 
	text-align: center;
	padding: 10px;
	width: 65rem;
	margin: auto;
	margin-top: 10rem;
}
.elem_corpsh
{
	border: 4px ridge black;
	background-color: rgb(192,192,192); 
	text-align: center; 
	font-style: italic;
	padding-left: 10px;
	padding-right: 10px;
	width: 60rem;
	margin: auto;

}

/* utilisé aussi dans web_cousin_gene */
.elem_corpsp
{
	border: 4px ridge black;
	background-color: rgb(192,192,192); 
	text-align: center;
	font-style: italic;
	padding-left: 10px;
	padding-top: 5px;
	width: 60rem;
	margin: auto;
}
.elem_corpsp b
{
	font-style: normal;
	text-align: center;
	color:rgb(0,0,148);
}

/* utilisé aussi dans web_cousin_gene */
.elem_corpsm
{
	border: 4px ridge black;
	background-color: rgb(192,192,192); 
	text-align: center;
	font-style: italic;
	padding-left: 10px;
	padding-top: 5px;
	width: 600px;
	margin: auto;
}

/* padding web_cousin_gene */
.paddCousGene
{
	display: flex;
	flex-direction: column;
    align-items: center;	
	padding-bottom: 2rem;
	width: 65rem;
}

.paddCousGene th
{
	border: 2px solid black;
	padding-left: 1rem;
	padding-right: 1rem;	
}
.paddCousGene td
{
	border: 2px solid black;
	padding-left: 1rem;
	padding-right: 1rem;	
}
/* padding web_cousin_gene */
.elem_corpsm b
{
	font-style: normal;
	text-align: center;
	color:rgb(0,0,148);
}

.elem_photof
{
padding: 4rem;
width: 40rem;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.pied
{
	/* margin-right: 140px; */
	background-color: rgb(147,147,147); 
}

.menuDet
{
	position: sticky;
	top: 0;
	/* padding-top: 10rem; */
	float: left;
	width: 15rem;
	padding: 0.5rem;	
	display: flex;
	flex-direction: column;
}
/* wphoto_gene (généalogie) */
.parents
{
	background-color: rgb(192,192,192); 
	width: 700px;
	margin: auto;
	padding: 5px;
	border: 4px ridge black;
	text-align: left;
}
.conjoints
{
	background-color: rgb(192,192,192); 
	width: 700px;
	margin: auto;
	padding: 5px;
	border: 4px ridge black;
	text-align: left;
}
.cellule
{
	text-align: right;
}
.famille
{
	text-align: left;
	width: 600px;
	margin: auto;
}
/* wphoto_gene */
/* CSS écrans recherches consulation anecdote, documents photos */
.corpsRech table
{
	border-collapse: collapse; 
	border: 4px ridge black;
	margin: auto;
	background-color: rgb(179,179,179); 
}
.corpsRech tr
{
	border: none;
}
.corpsRech th 
{
	color: rgb(0,1,139);
	border: none;
	text-align: center;
	padding: 0.5rem;
	font-size:100%;
}
.corpsRech td 
{
	padding: 0.5rem;
	text-align: left;
	border: none;
}

/* wgeneal_id */

.corpsReche table
{
	border-collapse: collapse; 
	border: 4px ridge black;
	margin: auto;
	background-color: rgb(179,179,179);
	padding: 0.5rem; 
}

.corpsReche td
{
	padding: 0.5rem;
}
.corpsGene
{
	display: flex;
	background-color: rgb(179,179,179);
	margin: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    padding: 0.7rem 2rem;
	width: fit-content;
	border: 4px ridge black;
}

.geneFamille
{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;	
}
.corpsGeneParent
{
	/* Width:50%; */
	/* border: 4px ridge black; */
	margin: 1rem;
	/* padding: 0.5rem; */
	display: flex;
	flex-direction: column;
}


.genePersonne
{
	/* display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start; 	
	border: 4px ridge black;
	background-color: rgb(179,179,179); */
	margin-top: 1rem;
	padding: 0.5rem;
}

legend
{
	padding: 0 1rem;
}
.tourParent
{
	border: 4px ridge black;
	padding: 0.5rem;
}
.tourDetail
{
	border-top: 4px ridge black;
	text-align: center;
	border-bottom: 4px ridge black;
	padding: 0.2rem;
}

.tourDetailFin
{
	border-top: 1px sodid black;
	text-align: center;
	border-bottom: 1px sodid black;
	padding: 0.2rem;
	margin: 0.5rem 0;
}

.detailPers
{
	text-align: left;
	padding: 0.5rem;
	margin-top: 0.5rem;;
}

.ligneDetail
{
	margin: 0.5rem 0.2rem;
}


.corpsGeneFamille
{
	/* Width:50%; */
	margin: 1rem;
	/* padding: 0.5rem; */
	display: flex;
	flex-direction: column;
}

.pFamille{
	display: flex;
	align-items: flex-start;
	align-items: center;
	margin: 0.3rem 0;
}

/* wgeneal_id */
.listePhoto table
{
	border-collapse: collapse; 
	border: 4px ridge black;
	margin: auto;
	background-color: rgb(179,179,179); 
}
.ph3
{
	font-family: 'Arial Black', Arial, Verdana, sherif;
 }

 
.noPages
{
	display: flex;
	flex-direction: row;	
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
}

.elemAnec
{
	margin: auto;
	width: 55rem;
	text-align: center;
}

.elemAnec table
{
	margin-top: 1rem;
	margin: auto;
}
.elemAnec th
{
	border: none;
	background-color: rgb(220, 220, 220);
	padding: 0.5rem 1rem;
}
.elemAnec td
{
	border: none;
	background-color: white;
	text-align: left;
	padding: 0.5rem 1rem;
}
/* Web_gene  */
.personne
{
	padding: 10px;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.personne form{
	margin: 0;
}
 
/* Web_gene */
.elem_descrip /*detail d'un document*/
{
	border: 4px ridge black;
	padding: 1rem;
	width: 800px;
	margin: auto;
	background-color: rgb(220,220,220);
	text-align: left;
}


.elem_tableau
{
	width: 50rem;
	margin: auto;
	border: 1px solid black;
	background-color: rgb(220,220,220);	
	margin-top: 1rem;
}

.elem_tableau table
{
	width: 50rem;
	margin: auto;
	border: 1px solid black;
	background-color: rgb(220,220,220);	
	padding: 5px;
}

/* Genealogie */
.liste_des
{
	margin-top: 3rem;
	padding: 1rem;
	text-align: left;
}

/* Genealogie */

/*  wgeneal_id  pour JS */

.sourceDepart{
	position: relative;
}

.sourceDet{
	display: none;
	flex-direction: column;
	position: relative;
	left: 5rem;
	width:	60%;
	background:	yellow;
	border:	2px solid red;
	padding: 0.5rem;
	opacity: 0;
	z-index: 1;
}


.active{
	display: flex;
   visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
/*  wgeneal_id  pour JS */
/* CSS écrans recherches consulation anecdote, documents photos */

/* ======== p web_personnage  */
.pPerson
{
	background-color: rgb(192,192,192); 
	border: 4px ridge black;
	font-style: italic;
	padding: 0.5rem;
	margin: 0.5rem 0;
}
/* ======== p Personnages  */

.vertclair
{
	background-color: var(--fondVertClair);
}
.jaune{
	background: var(--fondJaune);
}

.vertFluo
{
	background-color: var(--fondVertFluo);
}

.roseFanne
{
	background-color: var(--fondRoseFanne);
}

.ligneJauneClaire
{
	background-color: var(--fondLigneClaire);
}

.ligneJauneFoncee
{
	background-color: var(--fondLigneFoncee);
}

.vert
{
	background: green;
}
.moutarde
{
		background-color: var(--fondMoutarde);
}
.centre{
	text-align: center;
}
.gauche{
	text-align: left;
}

.droite
{
	text-align: right;
}
.sans
{
	border: none;
}

.avec
{
	border: 1px solid black;
}
.avec2
{
	border: 2px solid black;
}

.pad05
{
	padding: 0.5rem;
}

/* ############################ PARTIE RESPONSIVE  */
/* partie pour tablette / ecran */
@media screen and (min-width: 768px)
{
	
}
@media screen and (max-width: 768px)
{
 .parcours
	{
		display: flex;
		flex-direction: column;
	}	
		
	.parcoursEleves
	{
		width:75%;
	}
}
/* partie pour mobile */
@media screen and (max-width: 700px){
	.parcours
		{
			display: flex;
			flex-direction: column;
		}

	.parcoursProf
	{
		width:100%;
	}
	.parcoursPhoto
	{
		width:100%;
	}
	.parcoursEleves
	{
		width:100%;
	}
	.button{
		color: black;
	}
	
	
	.boutonForm{
		color: var(--couleurStandard);
	}

	.boutonNormal{
		color: var(--couleurStandard);
	}

	.boutonWarning{
		color: var(--couleurStandard);
	}
	
	.corps
	{
		padding: 0;
	}
	.elem_corpsp
	{	
		padding-left: 0;
	}	
	.elem_corpsm
	{	
		padding-left: 0;
	}
}