/* Initialisation CSS */
* {
    margin: 0;
    padding: 0;
    font-size: clamp(10px, 1vw,120px);
 
}
body {
    background-color: cornsilk;
}
#icon {
    width: 2%;
    position: absolute;
    top: 50%;left:2%;
    margin-top: -1%;
    border-radius: 30%;
}

/* MENU */ 
nav {
    width: 100%;
    text-align: center;
    top: 0;
    position: fixed;
    background-color: rgb(226, 230, 233);
    z-index: 1500;
}
nav ul {
    list-style-type: none;
}
nav ul::after {
    content: "";
    display: table;
}
nav li {
      display : inline-block;
      width:15%;
      text-align: center;
}
nav a {
    display: flex;
    justify-content: space-evenly;
    text-decoration: none;
    color: black;
    border-bottom: 2px solid transparent;
    padding: 10px 0px;
}
nav a:hover {
    color: coral;
    border-bottom: 2px solid gold;
}
/* CONTENU */
.containerGeneral {
    margin:20px;
    background-color: cornsilk;
}
#containerTitrePrincipal {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.couple { 
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.personne {
    display: flex;
    flex-direction: column;
    padding: 0px 50px;
}
.individu {
    display: flex;
    border-style: solid;
	border-width: 60px;
	border-image: url(./img/border.png);
	border-image-slice: 142 142 142 142; /* haut | droit | bas | gauche */
    height: 380px;
    width: 30vw;
}
.blason {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    width: 50%;
    text-align: center;
}
.blason p {
    padding: 5% 0%;
}
.blason img {
    height: auto;
    width: 100%;
}
#avatar {
    border-radius: 30%;
    width: 80%;

}
.homme {
background-color: rgb(222, 248, 249);
border-radius: 11%;
}
.femme{
    background-color: rgb(248, 233, 236);
    border-radius: 11%;
}
.blason img:nth-last-child(1) {
    height: auto;
    width:100%;
}

.identite {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 60%;
}
.raw {
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.sosa {
    padding-bottom: 10px;
}
.lien {
display: flex;
justify-content: flex-end;
color: #096969;

}
.annee {
position:absolute;
width:10%; 
height: auto; 
margin-top: 15%;
margin-left: 8%;
font-weight: bold;

}
.generation {
 position:relative;
 top:35%;
 right:90%;
 width:300px;
 font-size: 15px;
}
.flecheBas {
margin: 0 auto;
height: auto;
width: 100px;
}
.flecheBas img {
    width: 100px;
}

/* ZOOM  */
.zoom {
    z-index: 1000;
    cursor: pointer;
}
.espace {
    height: 200px;
}
.branche  {
    text-align: center;
padding:10px;
text-decoration: none;
font-size: 0.6rem;
font-weight: bold;
color:coral;
border: 2px black solid;
border-radius: 20%;
background-color: blanchedalmond;
}
.LiensNonAffiche {
    display: none;
}
#acceuil {
    display: flex;
    justify-content: center;
}
#acceuil a {
    border-radius: 15px;
    padding: 10px;
    border : 5px black solid;
    font-size: 2rem;
    text-decoration: none;
}
.video video {
    width:40%;
}

footer {
    width: 100%;
    text-align: center;
    background-color: rgb(226, 230, 233);
    position: fixed;
    bottom: 0;
}
/* MEDIA QUERIES */ 

@media  (max-width: 767px ) {
.personneNone {
    display: none;
}
.couple {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
}
.individu {
    width: 60vw;
}
.zoom img {
    margin-right: 0px;
}
.flecheGauche {
    display: none;
}
.lienNone {
   opacity: 0;
}
.LiensNonAffiche {
display:block;
}
.video video {
    width:300px;
}
.generation {
    position:relative;
    right:0%;
    font-size: 15px;
    margin-top: 15%;
   }
}