@font-face {
    font-family: 'sofadi_oneregular';
    src: url('polices/sofadi-one/sofadione-regular-webfont.woff2') format('woff2'),
         url('polices/sofadi-one/sofadione-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body
{
    background: url('images/fond_jaune.png');
}

/* *********************** */
/* Définition des fontes   */
/* *********************** */
header h1, nav a, td
{
    font-family: sofadi_oneregular, sans-serif;
    font-weight: normal;
}
header h1
{
    font-size: 1.9em;
}
/* Header */
#bloc_header
{
    display: flex;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    margin: auto;
    position: fixed;
    left: 0;
    top: 0;
    background: url('images/fond_jaune.png');
    opacity: 100%;
    z-index: 1;
}
#codes_couleur
{
    width: auto;
    height: auto;
    margin: 5px 0px 25px 10px; 
}
#leHeader
{
    width: 1000px;
    height: auto;
    margin: 5px 0px 10px 30px;
    left:20%;
}
header
{
    display: flex;
    justify-content: flex-start;
    width:100%;
    margin: 25px;
    align-items: flex-end;
}

#titre_principal
{
    width:70%;
    text-align: center;
    background: url('images/separateur.png') repeat-x bottom;
    margin-left: 40px;
}

/* Navigation */
nav
{
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
    padding: 1em;
}
nav a
{
    text-transform: uppercase;
    font-size: 1em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none;
}
nav a:hover
{
    color: #760001;
    border-bottom: 2px solid #760001;
}

#bloc_arbre
{
    width: auto;
    height: auto;
    margin: 170px 100px 50px 100px;
}

/* Sections */
section 
{
    display: flex;
    justify-content: space-between;
    font-family: sans-serif;
}

section h1
{
    font-weight: bold;
    font-size: 0.9em;
}
section h2
{
    font-weight: normal;
    font-size: 0.65em;
}
section p
{
    font-weight: bold;
    font-size: 0.8em;
}
.generation
{
    display: flex;
    align-items: flex-start;
    border-style: none;
    margin-top: 0px;
    margin-bottom: 30px;
}
.bloc_fratrie
{
    display: flex;
    flex-direction: column;
    text-align: center;
    vertical-align: top;
/*    border: 1px solid #6F6351; A laisser en commentaires, sinon décalage horizontal et pas esthétique vertivalement*/ 
    height:20px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    box-shadow: 3px 3px 10px #1c1a19;
}
span.parentsJ, span.parentsBCH, span.parentsB, span.parentsLP
{
    display: inline; 
    font-family: sans-serif;
    font-weight: bold;
    font-size: 0.8em;
}
.fratrie
{
    display: flex;
    align-items: flex-start;
    border-radius: 4px;
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;
    box-shadow: 3px 3px 10px #1c1a19;
}

.individuJ, .individuBCH, .individuB, .individuLP
{
    width: 150px;
    height: 320px;
    border-radius: 4px;
    padding: 0.5em;
    margin: 0px 0px 0px 0px;
    overflow: auto;
    color: white;
}
.individuJ em, .individuBCH em, .individuB em, .individuLP em
{
    text-transform: uppercase;
    font-style: normal;
}
.individuJ a, .individuBCH a, .individuB a, .individuLP a
{
    color: white;
    text-decoration: none;
}
.individu_vide
{
    width: 150px;
    height: 320px;
    visibility: hidden;
    border-style: none;
    border: 1px solid;
    padding: 0.5em;
    margin: 0px 0px 2px 0px;
}
.individu_vide_petit
{
    width: 50px;
    height: 320px;
    visibility: hidden;
    border-style: none;
    border: 1px solid;
    padding: 0.5em;
    margin: 0px 0px 2px 0px;
}
.individu_vide_petit_img
{
    width: 50px;
    height: 320px;
    border-style: none;
    border-style: none;
    padding: 0.5em;
    margin: 0px 0px 2px 0px;
}
.individu_vide_petit_BJ
{
    width: 52px;  /* 52 au lieu de 50 car il n'y a pas de border=1px */
    height: 320px;
    background: url('images/fond_degradevertmarron.png') repeat-y;
    border-style: none;
    padding: 0.5em;
    margin: 0px 0px 2px 0px;
}
.sexe 
{
    vertical-align: top;
}
.nom
{
    margin-top: 0px;
}
/* ******************** */
/*      Couleurs        */
/* ******************** */
.bloc_fratrie
{
/*    border: 1px solid #6F6351;  A laisser en commentaires, sinon décalage horizontal et pas esthétique vertivalement */
}
span.parentsJ 
{
    background-color: #BBB1A3;
    border: 1px solid #6F6351;
}
span.parentsBCH 
{
    background-color: #A3ADBB;
    border: 1px solid #575D67;
}
span.parentsB 
{
    background-color: #A4C897;
    border: 1px solid #53694F;
}
span.parentsLP 
{
    background-color: #D098F6;
    border: 1px solid #61377D;
}
.fratrie
{
/*    border: 1px solid #6F6351;  A laisser en commentaires, sinon décalage horizontal et pas esthétique vertivalement */
}
.individuJ
{
    background-color: #8C8376;
    border: 1px solid #6F6351;
}
.individuBCH
{
    background-color: #737C89;
    border: 1px solid #575D67;
}
.individuB
{
    background-color: #738C6B;
    border: 1px solid #53694F;
}
.individuLP
{
    background-color: #9364B2;
    border: 1px solid #61377D;
}
.individuJ a:hover
{
    color: #760001;
}
.individuBCH a:hover
{
    color: #324E56;
}
.individuB a:hover
{
    color: #5C3D67;
}
.individuLP a:hover
{
    color: #4E2F5A;
}

/* Footer */
#bloc_footer
{
    width: 100%;
    height: auto;
    position: fixed;
    left: 0;
    bottom: 0;
    padding-top: 5px;
    background: url('images/fond_jaune.png');
    opacity: 100%;    
    z-index: 1;
}
footer
{
    display: flex;
    justify-content: space-between;
    background:  url('images/separateur.png') repeat-x top;
    width: 1000px;
    height: auto;
    margin: auto;
    padding-top: 5px;
    padding-bottom: 5px;    
/*      border-style: solid;
  border-color: blue;*/
}