body{
	font-family: Roboto, Verdana, sans-serif;
	background-color: #99CCFF; /* 99CCFF Rose : FFCCCC*/
}

div{
	color : white;
}

label{
    color : grey;
}
.tete{
	background-color: /*yellow;*/#99CCFF;
	/*Height : 500px;*/
}
.corps{
	background-color:gray;
	/*height: auto;*/
}
.pied{
	background-color:lime;
}

.BH{
	display : flex;
	justify-content : space-evenly;/*space-between;*/
}

.Accueil{
    display : flex;
	justify-content : space-evenly;
}

.Lig{
	display : flex;
	justify-content : space-evenly;
}

.Col{
	display : flex;
	justify-content : space-evenly;
}

.padding1{
    padding : 1%;
}

.Logo{
	width : 10%; /*100px;*/
	/*padding : 5%; /*20px;*/
}

.LogoToo{
	width : 100%;
	height : auto;
	/*box-sizing: border-box;*/
}

img{
    max-width: 100%;
    height: auto; /* Conserve le ratio de l'image */
/*    display: block;*/
/*    margin: 0 auto; *//* Centrer l'image */
}
/*
.img-bordure{
    max-width: 1080px;*/ /* Définit la largeur maximale du conteneur *//*
	box-shadow: 0px 0px 40px black, 0px 0px 80px white;
    margin: 0 auto;*/ /* Centre le conteneur */
/*    
}*/
.image-container {
    max-width: 1080px; /* Définit la largeur maximale du conteneur */
	box-shadow: 0px 0px 40px black, 0px 0px 80px white;
    margin: 0 auto; /* Centre le conteneur */
/*	box-shadow: 4px 4px 8px black, 4px 4px 12px white;
    background-color : white;
    padding: 10px;*/
}

.poune-container {
    max-width: 1080px; /* Définit la largeur maximale du conteneur */
	box-shadow: 0px 0px 20px black, 0px 0px 30px white;
    margin: 0 auto; /* Centre le conteneur */
    color : royalblue;
/*	box-shadow: 4px 4px 8px black, 4px 4px 12px white;
    background-color : white;
    padding: 10px;*/
}

.carte-genealogie {
    max-width: 150px; /* Définit la largeur maximale du conteneur */
	box-shadow: 0px 0px 5px black/*, -5px -5px -5px black*/;
    margin: 0 auto; /* Centre le conteneur */
    color : royalblue;
/*	box-shadow: 4px 4px 8px black, 4px 4px 12px white;
    background-color : white;
    padding: 10px;*/
}

.P{
	width : 15%;
 	padding-top : 8px;
    font-size: 3em;
    font-weight: bold;
    text-shadow: 1px 1px 2px black, 5px 5px 7px black, 5px 5px 8px white;
   /* animation: shine 0.5s alternate infinite;*/
}

.Btn{
	width : 15%; /*200px;*/
	/*padding-top : 30px;*/
	Color : royalblue;
	/*text-align : center;*/
	padding-top : 20px;
	/*background-color : red;*/
}

.BtnSM{
	width : 15%; /*200px;*/
	/*padding-top : 30px;*/
	Color : royalblue;
	/*text-align : center;*/
	padding-top : 5px;
	/*background-color : red;*/
}

.tag{text-align:left;}
.tac{text-align:center;}
.tad{text-align:right;}

.Nuage{
	/*padding : 5%;*/
	background:radial-gradient(closest-side, White, #D0E9FF, #99CCFF);
	/*background-color: red;*/
}

.NuageTr{
	/*padding : 5%;*/
	background: radial-gradient(closest-side, white, rgba(128, 128, 128, 0));
	/*background-color: red;*/
}

.Menu{
	Color : royalblue;
}

.TxtBH{
	width : 15%;
 	/*padding-top : 8px;*/
    font-size: 1em;
    font-weight: bold;
    text-shadow: 1px 1px 1px black, 5px 5px 10px black, 5px 5px 8px white;
}

.ens{
    display:flex;
	flex-direction: row;
	/*background-color:blue;*/
}

.vert{
    display:flex;
	flex-direction: column;
	background-color:red;
}

.hori{
    display:flex;
	flex-direction: row;
}

#portraits{
    display:flex;
	flex-direction: column;
	/*display : inline-block;*/
    /*position: fixed;*/
    /*top: 140px;*/
    /*bottom: 5px;*/
    /*max-height: 60vh;*/
 	/*width : 150px;*/
    /*overflow: auto;*/
	/*flex-direction: column;*/
	/*flex-wrap: wrap;*/
	justify-content: space-evenly;
	align-items: center;
	/*align-content : stretch;*/
	/*box-sizing: border-box;*/
    /*height : 200px;*/
	/*border : 2px solid black;*/
	/*background-color:red;*/
}


.portrait{
	/*flex : 0 0 20%*/
	display:flex;
    flex-direction: column; 
    background : radial-gradient(closest-side, White, #D0E9FF, #99CCFF);
	margin : 6px;
	padding : 5px;
	height : 100px;
	width : 100px;
	border-radius: 50%;
	box-shadow: 2px 2px 5px black, 2px 2px 8px white;
}

.portraitActif{
	/*flex : 0 0 20%*/
	display:flex;
    flex-direction: column; 
    background : radial-gradient(closest-side, White, #D0E9FF, #69DAFF);
	margin : 6px;
	padding : 5px;
	height : 100px;
	width : 100px;
	border-radius: 50%;
	box-shadow: 2px 2px 5px black, 2px 2px 8px white;
}



.rangee{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	height:200px;
	background-color: royalblue;
}

.ImageBandeau{
	width: auto;
	height: 60px;
	box-sizing: border-box;
}

.ImagePortrait{
    display:flex;
	align-content:center;
	padding-left: 30px;
    padding-top: 8px;
	/*justify-content:center;*/
	width: 40px;
	height: 50px;
	/*box-sizing: border-box;*/
}

.PseudoPortrait{
	display:flex;
	justify-content:center;
    text-shadow: 5 5 5px #99CCFF;

}

#inscrits{
    display:flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}

.inscrit{
	/*display:flex;*/
    /*flex-direction: column; */
    background : radial-gradient(closest-side, White, #D0E9FF, #99CCFF);
	margin : 6px;
	padding : 5px;
	/*height : 50px;*/
	width : 100px;
	border-radius: 50%;
	box-shadow: 2px 2px 5px black, 2px 2px 8px white;
}

.nominscrit{
	display:flex;
	justify-content:center;
    text-shadow: 5 5 5px #99CCFF;

}


.bouton{
	display: inline-flex;
	margin: 10px;
	/*background-color:var(--neutralLight);*/
	background-color: lightblue;
    transition: background-color 0.4s;
	border-style: groove;
	border-radius: 10px;
}
 
.bouton:hover{
	background-color:blue;/*var(--red);*/
	transition-duration: 5s;
	transition-delay: 0s;
}

#actif{
	background-color: #7171FF;
}

a{
	/*justify-content: right;*/
	color: black;
	/*padding: 20px;*/
	text-decoration: none;
}

span{
    color : grey;
	text-shadow: 1px 1px white;
}

h3{
    color: black;
}

.rouge{
    background-color:red;
}

#mess-destinataire {
    display:flex;
/*	align-content:center;
    width : 100%;
    padding-left : 50px;
    padding-right : 50px;*/

}

#chat-container {
    position: absolute;
    top:200px;
    bottom: 40px;
    left:180px;
    right: 0px;
    overflow-y: scroll;
    /*margin: 20px auto;*/
    /*border: 1px solid white;/*#ccc;*/
    padding: 5px;
    background-color: green;
}

#message-container {
    /*height: 300px;*/
    position: relative;
    bottom: 30px;
    /*left:20vw;*/
    /*border-bottom: 1px solid white;/*#ccc;*/
    /*overflow-y: scroll;*/
    margin-bottom: 10px;
    padding-top: 30px;
    /*background-color: red;*/
}

#message-input {
    position: fixed;
    bottom: 5px;
    left:180px;
    right: 75px;
    padding: 5px;
}

.boutchat{
    position: fixed;
    bottom: 5px;
    right: 5px;
    width: auto;
    padding: 5px;  
}
/*
button {
    position: fixed;
    bottom: 5px;
    right: 5px;
    width: auto;
    padding: 5px;
}
*/



/*
body {
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}
*/
.avatar-container {
    text-align: center;
}

.avatar {
    width: 150px;
    height: 150px;
    /*background-color: #f4f4f4;*/
    border: 2px solid #ccc;
    border-radius: 50%;
    margin: 20px;
    background-color:blue;
}

.controls {
    margin-top: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
}


.messagedest{
    Color : white;
    background-color: #99CCFF;
    padding: 2px 5px 2px 5px;
    margin-bottom: 8px;
    margin-right: 10px;
    margin-left:5px;
    display: inline-block;
    border-radius: 8px;
    box-shadow: 2px 2px 5px black, 2px 2px 8px white;
}

.messagemoi{
    Color : royalblue;
    background-color: lightblue;
    width:auto;
    padding: 2px 5px 2px 5px;
    margin-bottom: 8px;
    margin-right: 10px;
    margin-left: 5px;
    display: inline-block;
    border-radius: 8px;
    box-shadow: 2px 2px 5px black, 2px 2px 8px white;
}
/*
.messagedate{
    Color : black;
    background-color: #99CCFF;
    width:auto;
    padding: 2px 5px 2px 5px;
    margin-bottom: 8px;
    margin-right: 10px;
    margin-left: 5px;
    display: inline-block;
    border-radius: 8px;
    box-shadow: 2px 2px 5px black, 2px 2px 8px white;
}
*/

.posmessdest{
    display: flex;
    justify-content: flex-start;
    width:auto;
}

.posmessmoi{
    display: flex;
    justify-content: flex-end;
    width:auto;
}

.posmessdate{
    display: flex;
    justify-content: center;
    width:auto;
}

.txtmessexp{
    font-size: 0.9em;
    font-weight: bold;
    Color : white;
    display: inline-block;
    justify-content: flex-start;
    text-align:left;
    padding-right:10px;
    /*background-color: blue;*/
    
}

.txtmesshd{
    font-size: 0.8em;
    color: white;
    display: inline-block;
    justify-content: flex-end;
    text-align:right;
    /*background-color: red;*/
    
}

.txtmessdest{
    font-size: 1em;
    Color : black;
    display: flex;
    justify-content: flex-start;
    text-align:left;
    
}

.txtmessmoi{
    font-size: 1em;
    Color : black;
    display: flex;
    justify-content: flex-end;
    text-align:right;
    
}

.datemessexp{
    font-size: 1.2em;
    Color : black;
    display: flex;
    justify-content: center;
    text-align:center;
    
}


.Mess{
	width : 100%;
	padding : 1%;
	Color : royalblue;
	/*text-align : center;*/
	/*background-color: green;*/
}


.Preferences{
    
}


.Preference{
    display: inline-block;
    
}

.Preflbl{
    display: inline-block;
    text-shadow: 1px 1px 1px white;
    
}

.Prefin{
    display: inline-block;
    
}


#avatar {
    --hair-color: #000000;
    --skin-color: #ffe0b2;
    --clothes-color: #2196F3;
}

#avatar::before {
    content: "";
    display: block;
    width: 70px;
    height: 70px;
    background-color: var(--hair-color);
    border-radius: 50%;
    position: relative;
    top: 20px;
    left: 40px;
}

#avatar::after {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    background-color: var(--skin-color);
    border-radius: 50%;
    position: relative;
    top: 50px;
    left: 25px;
}

#avatar .clothes {
    width: 150px;
    height: 150px;
    background-color: var(--clothes-color);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}



.body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
/*
.game-board {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-gap: 5px;
}

.cell {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
}
*/

.morpion {
  text-align: center;
}

.board {
  /*display: inline-block;*/
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 2px;
  justify-content: center;
}

.cell {
  border: 1px solid lightgoldenrodyellow;
  font-size: 3em;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
/*  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: inline-block;
  font-size: 3em;
  cursor: pointer;*/
}



#damesboard {
    display: grid;
    grid-template-columns: repeat(8, 60px);
    grid-template-rows: repeat(8, 60px);
    gap: 2px;
    justify-content: center;
}

.damessquare {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dameswhite {
    background-color: white;
}

.damesblack {
    background-color: black;
}

.damespiece {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.damesred {
    background-color: red;
}

.damesblack-piece {
    background-color: gray;
}



.txtbleu{
    color:blue;
}

.tttbout {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
}

canvas {
      display: block;
      /*background-color: #f0f0f0;*/
    
}

@keyframes shine {
  0% {
    color: #fff;
    text-shadow: none;
  }
  100% {
    color: royalblue; /* Couleur de l'illumination (jaune ici) */
    text-shadow: 0 0 10px #99CCFF; /* Ombre portée pour l'effet d'illumination */
  }
}

.shine-text {
  display: inline-block;
  font-size: 24px; /* Taille de la police */
  font-weight: bold; /* Gras (peut être modifié selon vos préférences) */
  animation: shine 0.5s alternate infinite; /* Durée de l'animation et itération infinie */
}
/*
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}








/* Style global */
/*
body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f5f7fa;
  margin: 0;
  padding: 20px;
}
*/
/* Tuile principale */
.person-tile {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 130px;
  padding: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.person-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Photo circulaire */
.person-photo {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #e0e0e0;
  margin-bottom: 8px;
}

/* Nom */
.person-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* Container des tuiles si besoin */
.family-tree-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
}

*/