/*  couleurs */
:root{
    --fondclair: #A0DEDD; 
    --fondvert: #0d550d;
    --fondmarron: #e68e3b;
    --fondblanc: #ffffff;
	--fondJaune: #ffff00;
	--fondmenu: #323232;
	--colormenu: #ffffff;
	
	--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 */
	--fondVertClair: #abff94; /*171,255,148*/
	--fondLigneClaire: #feff9a; /*254,255,154*/
	--fondLigneFoncee: #fffa42; /*255,250,66*/

	/* Menu */
	--ecritureStandard: #ffffff;
	--fondMenuMobHead: rgb(0, 255, 123);
	--couleurMenuR: yellow;
    --couleurMenuT: green;
 	--couleurLiMenu: rgb(0, 0, 0);
	--fondLiMenu: #c0c0c0;  /*192*/
}	
 

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;
}

.body
{
	text-align: center;
	width: 100vw;
 	/* display: flex; */
   font-size: 1.6rem;
}
.bodyGestion
{
	background-image: url("../img/fondsite.jpg");
}

.main{
	display: flex;
 	flex-direction: column; 
}

a img 
{
	border : none;
}
h2
{
	font-family: 'Arial Black', Arial, Verdana, sherif; 
	text-align: center;
	color: rgb(0,0,148);
	font-style: normal;
}

.container{

	display:flex;
	flex-direction:	column;
	/*padding: 0.5rem 1.5rem;*/
	padding: 0 1.5rem;
	top: 0.2rem;
    position: absolute;
	width: 100%;
}

.container.debugage
{
	position: relative;
}

/* Style pour la banderolle de la page  */

/* ------------ Menu ----------- */
.header
 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
	top: 0;
}

.main
 {
    position: relative; 
}

/*  Gestion Menu pour tablette */
.menu{
	background: var(--fondmenu);
	color: var(--colormenu);
	padding: 0 0.5rem;
	display: flex; 
	flex-direction: column;
	align-content: flex-start;
	justify-content:flex-start;
	/* align-items: center;  */
	flex-wrap: wrap;
	width: 100%;  
}

/* Attention display none sur telephone (burger) */
.menuUl{
    flex-direction: row;
    flex-wrap: wrap;
}

.menuUtilUl{
 	display: flex;
   flex-direction: row;
    flex-wrap: wrap;
}

/* Attention cette classe reste affichée sur telephone */
.menuUlAct{
	display: flex;
}

.corps{
	padding: 5px;
}
.listeUl{
    flex-direction: column;
    flex-wrap: wrap;
}
input[type="submit"].menuLi {
    border:none;
    cursor: pointer;
}

.couleurMenuR{
    background: var(--couleurMenuR);
}

.couleurMenuT{
    background: var(--couleurMenuT);
}

.menuLi:hover{
    background: var(--couleurBoutOk);
}

.fauxBouton
{
	border: 2px solid black;
	border-radius: 2rem;
	padding: 0.1rem 0 0.3rem 0.5rem;
	background: var(--fondblanc);
}
.w40
{
	width: 40%;
}

.mAuto
{
	margin: auto;
}

/*  Gestion Menu pour tablette */

/*  Gestion Menu pour Mobile */

.burger{
     display: flex;
    justify-content: flex-end;
	color: var(--colormenu);
     cursor: pointer;
}

.burger i {
    padding: 0.5rem;
	color: var(--colormenu);
}

/* menu en fenetre modale */
.menuMob{
    position: absolute;
    /* top: 5.5rem; */
    right: 4rem;
    background-color: var(--couleurStandard);
    /* width: 15rem;  */
    border-radius: 3px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(-1rem);
    transition: all 0.3s;
    border: 1px solid black;
    display: flex;
    flex-direction: column;  
	padding: 0.7rem;
 }

.menuMob-header{
    padding-top: 0.5rem;
    height: 3rem;
    text-align: center;
    background: var(--fondMenuMobHead);
}
.menuMob-window{
	padding: 0.7rem;
	background: var(--fondGrisFonce);
}
.menuMobUl
{
	display: flex;
	flex-direction: column;
    align-items: flex-start;
}

.menuMob.active {
    opacity: 1;
    transform: translateY(0); 
    z-index: 1;
  }
 
.menuMob-window ul li a {
     background: var(--fondLiMenu);
     color: var(--couleurLiMenu);
	 padding: 0 1rem;
  }
 
.menuMob-window ul li a:hover {
    background: var(--couleurBorderSuccess);
    font-weight: 700;
    color: var(--couleurLiMenu);
  }
   
.menuMobLi
{
	 background: var(--fondLiMenu);
	 text-align: left;
	 margin: 0.2rem 0;;
}

.menuMobLi a:hover
{
    background: var(---couleurBorderSuccess);
	margin: 0.2rem 0;
}
/*  fin gestion Menu pour Mobile */

/* utilisé dans menu util témoin parenté */
.divMenuUtil
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

/* utilisé dans famille cousin */
.divMenuCousin
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: center;
}

/*  utilisé dans Parenté Xpert*/
.divColCentre
{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

/* utilisé dans utilitaire pour relier les photos */
.demiEcranComp 
{
	display: flex;
	width: 50%;
	align-content: flex-start;
	flex-wrap: wrap;
	}

	/* utilisé dans l'écran album de liste_album */
.tiersEcranComp 
{
	display: flex;
    width: 33.33%;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
}

.boxAlerteError
{
	border-collapse: collapse; 
}
th 
{
	color:blue;
	border: 1px solid black;
	padding: 5px;
}
td 
{
	border: 1px solid black;
	text-align: center;
	padding: 5px;
}

a
{
	text-decoration: none;
}

#menup table
{
	border-collapse: collapse; 
}
#menup th 
{
	color:blue;
	border: none;
	text-align: center;
	padding: 5px;
}
#menup td 
{
	border: none;
	text-align: center;
	padding: 5px;
}


.vert
{
	background: green;
}

.vertClair
{	background-color: var(--fondVertClair); 
}

.orange
{
	background: orange;
}
.rouge
{
	background: red;
}

.fondJauneClair
{
	background: var(--fondLigneClaire);
}
.fondError
{
	background: var(--fondError);
}.fondAlerte
{
	background: var(--fondWarning);
}
.fondVertClair
{
	background: var(--fondVertClair);
}
.grisMoyen
{
	background: var(--fondgrismoyen);
}

.jaune 
{
	background: var(--couleurMenuR);
}
.italique
{
	font-style: italic;	
}
.rondVert
{

    width: 2rem;
    border: 1px solid  var(--fondMenuMobHead);
    border-radius: 50%;
    background: var(--fondMenuMobHead);
    color: var(--fondMenuMobHead);	border-radius: 50%;
}

.largeur80
{
	width: 80%;
	margin: auto;
}
/* ============================================================= */

.padding1
{
	padding: 1rem;
}
.spanGcom
{
	padding: 0.5rem;
}
.gauche 
{
	text-align: left;
}
.centre 
{
	text-align: center;
}
.droite 
{
	text-align: right;
}
.sans
{
	border: none;
}
.avec
{
	border: 1px solid black;
}

.bord4Ridge
{
	border: 4px ridge black;
}
.noPages
{
	display: flex;
	flex-direction: row;	
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
}

.alignElem{
	display: flex;
	align-items: center;
}

.mosaic
{
	display: flex;
	flex-direction: row;	
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	padding: 1rem 0;
}

.mosaic img{
	padding: 0.5rem;
}

.modifAlbum
{
	text-align: left;
}

.liste
{
	display: flex;
	flex-direction: column;	
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	padding: 1rem 0;
}


.presentation
{
	display: flex;
	flex-direction: column;	
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	padding: 1rem 0;
	width: 70%;
	border: 4px ridge black;
	background-color: var(--fondclair);
	margin: auto;
	margin-top: 5rem;
}


.presentationMariage
{
	display: flex;
	flex-direction: column;	
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	padding: 1rem 0;
	width: 70%;
	border: 4px ridge black;
	background-color: var(--fondclair);
	margin: auto;
	/* margin-top: 5rem; */
}

/* ============================================================= */

.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);
	color: var(--couleurStandard);
	cursor: pointer;
  }
  
  .boutonForm{
	padding: 0.3rem 0.7rem;
	border-radius: 1rem;
	border: 2px solid var(--couleurStandard);
	margin: 0.3rem;
	background: var(--couleurBorderSuccess);
	color: var(--couleurStandard);
	cursor: pointer;
  }
  .boutonForm.fauxBouton
  {
	margin: 0;
  }
  .boutonWarning{
	  padding: 0.3rem 0.7rem;
	  border-radius: 1rem;
	  border: 2px solid red;
	  background: var(--fondError);
	  color: var(--couleurStandard);
	  margin: 0.3rem;
	  cursor: pointer;
  } 

  .boutonAlerte{
	  padding: 0.3rem 0.7rem;
	  border-radius: 1rem;
	  border: 2px solid var(--couleurBorderWarning);
	  background: var(--fondWarning);
	  color: var(--couleurStandard);
	  margin: 0.3rem;
	  cursor: pointer;
  } 
 
  .boutonJaune{
	  padding: 0.3rem 0.7rem;
	  border-radius: 1rem;
	  border: 2px solid var(--couleurStandard);
	  background: var(--fondLigneClaire);
	  color: var(--couleurStandard);
	  margin: 0.3rem;
	  cursor: pointer;
  } 
 
   .boutonPage{
	padding: 0.3rem 0.7rem;
	border-radius: 1rem;
	border: 2px solid var(--couleurStandard);
	margin: 0.3rem;
	background: var(--couleurMenuR);
	color: var(--couleurStandard);
	cursor: pointer;
  }
  
  .boutonTypeA{
	padding: 0.3rem 0.7rem;
	border-radius:0%;
	border: none;
	background: transparent;
	color: rgb(61, 61, 243);
	font-weight: bold;
  	cursor: pointer;
	} 

	
.boutonOvale{
	border-radius: 50%;
	border: none;
	padding: 0.2rem 3rem;
}

  /* --------------------- 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 */
  
  .accueilH1 {
	  color: var(--couleurH1);
	  
  }
  
/* ############################ PARTIE RESPONSIVE  */
@media screen and (min-width: 768px)
{
  
   .burger{
        display: none
    }
    .menuUl{
        display: flex;
    }
    .menuMob{
        display: none;     
    }
}
@media screen and (max-width: 700px){
	.main{
		width: 100vw;
	}
	.menuUlAct{
		flex-direction: column;
	}
    .menuUl{
        display: none;
    }

}