/***** BLOCK *****/
*
{
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

header
{
    display: flex;
    flex-direction: row;
    width: 100%;
    height:100%;
    justify-content: center;
    margin-bottom: 2%;
}

body
{
    background:radial-gradient(ellipse at center, rgb(88, 115, 189), rgb(11, 20, 73));
    background-size: 100% 800%;
    background-repeat: no-repeat;
    margin: 1%;
    margin-bottom: 0px;
}

footer
{
  position:relative;
  display: inline-block;
  bottom: 0;
  background-color: rgba(32, 32, 32, 0.829);
  height: 80px;
  width: 102%;
  margin: 0px;
  margin-left: -1%;
  margin-top: 5px;
  padding: 0px;
  text-align: center;
  vertical-align: middle;
}

a
{
    text-decoration: none;
}

.corps
{
    display: flex;
    flex-direction: row;
    min-height: 800px;
    justify-content: center;
    align-items: baseline;
    width: 100%;
    color: white;
    margin-top: 15px;
}
/***** FIN BLOCK *****/

/***** HEADER ****/
/** Photo d'identité **/
header #photo_identite
{
    border-radius: 50%;
}

/** Menu **/
header #menu
{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

header h1 a
{
    color: white;
    font-size: 2em;
}

header .colonne
{
    display: flex;
    flex-direction: flex;
    justify-content: center;
    vertical-align: middle;
    width: 100%;
}

header #menu h1 a
{
    color: antiquewhite;
}

header #menu .colonne a:hover, header #menu .colonne a:focus, header #menu .colonne a:active
{
  background: rgba(54, 54, 54, 0.479);
  color: white ;
}

header #menu[class^="colonne"]
{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    width: 50%;
    height : auto;
    color: white;
    background-color: rgba(0, 0, 0, 0.438);
    opacity: 1;
    border-radius: 20px;
    border: 4px solid rgba(80, 80, 80, 0.664);
    margin: 5px;
}

header #menu .colonne a
{
  background-color: rgba(128, 128, 128, 0.568);
  height: 50px;
  width: 30%;
  padding: 0.5%;
  border: 2px solid rgb(211, 211, 211);
  border-radius: 30% 0;
  color: antiquewhite;
  font-size: 1.25em;
  text-align: center;
  margin: 5px;
}
/***** FIN HEADER *****/

/***** FORMATION *****/

.formation
{
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 30%;
    height : auto;
    color: white;
    background-color: rgba(0, 0, 0, 0.438);
    opacity: 1;
    border-radius: 20px;
    border: 4px solid rgba(80, 80, 80, 0.664);
    margin: 5px;
}

.formation .en_tete
{
    display: flex;
}

.formation .en_tete .element:nth-child(1)
{
    display: flex;
    height: 60px;
    width: 150px;
}

.formation .en_tete .element:nth-child(1) img
{
    border-top-left-radius: 16px;
}

.formation .en_tete .element:nth-child(2)
{
    display: flex;
    margin: 0px;
    height: 60px;
    width: 56%;
    text-align: center;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
}
/***** FIN FORMATION *****/

/***** PROJETS *****/
/* Hauteur des photos : 252 px */
.projet
{
    display: flex;
    flex-direction: row;
    width: 99%;
    height: auto;
    min-height: 252px;
    color: white;
    background-color: rgba(0, 0, 0, 0.438);
    border-radius: 20px;
    border: 4px solid rgba(80, 80, 80, 0.664);
    margin-top: 15px;
}

.projet article
{
    display: flex;
    flex-direction: column;
    height: auto;
    width: max-content;
    padding: 5px;
}

.projet .img_left
{
    display: flex;
    width: auto;
    height: 100%;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
} 

.projet .img_right
{
    display: flex;
    width: auto;
    height: 100%;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
} 

/***** FIN PROJETS *****/

/***** COMPETENCES *****/

/* mindmap */

/***** FIN COMPETENCES *****/

/***** EXPERIENCES *****/
.experience
{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.experience img
{
    border-radius: 10%;
}

/** COLONNE **/
.experience .colonne
{
    display: flex;
    flex-direction: column;
    width: 35%;
}

.experience .colonne .element
{
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.438);
    border-radius: 20px;
    border: 4px solid rgba(80, 80, 80, 0.664);
    margin-bottom: 250px;
    color: azure;
    text-align: center;
}

.experience #colonne_2
{
    margin-top: 250px;
}


/** ESPACE **/
.experience .espace
{
    display: flex;
    flex-direction: column;
    width: 6.25%;
}

.experience .espace .barre
{
    display: flex;
    width: 100%;
    height: 0.5%;
    background-color: rgba(80, 80, 80, 0.664);
}

.experience .espace .gauche
{
    display: flex;
    flex-direction: row;
    width: 100%;
    height:0.5%
}

.experience .espace .gauche .barre
{
    height: 100%;
}

.experience .espace .avant
{
    display: flex;
    width: 0%;
    height: 100%;
}

.experience .espace [id^="vide"]
{
    display: flex;
    /*border: 2px solid red;*/
}

.experience .espace #vide_1
{
    width: 100%;
    height: 7%;
}

.experience .espace #vide_2
{
    width: 100%;
    height: 7%;
}

.experience .espace #vide_3
{
    width: 100%;
    height: 7%;
}

.experience .espace #vide_4
{
    width: 100%;
    height: auto;
}

.experience .espace #vide_5
{
    width: 100%;
    height: 7%;
}

.experience .espace #vide_6
{
    width: 100%;
    height: 7%;
}

.experience .espace #vide_7
{
    width: 100%;
    height: auto;
}

/** FLECHE**/
.experience #fleche
{
    display: flex;
    flex-direction: column;
    height: auto;
    width: 5%;
}
/*
.experience #f5
{
    height: 1%;
}

.experience #f6
{
    height: 1%;
}

.experience #f7
{
    height: 1%;
}
*/
.experience #f1
{
    height: 92.25%;
    background: linear-gradient(rgba(42, 42, 42, 0.664), white);
    margin-bottom: 20%;
}

.experience #f2
{
    height: 2%;
    background-color: white;
    margin-bottom: 20%;
}

.experience #f3
{
    height: 1%;
    background-color: white;
    margin-bottom: 20%;
}

.experience #f4
{
    height: 0.5%;
    background-color: white;
    margin-bottom: 20%;
}

.experience #f5
{
    height: 0.2%;
    background-color: white;
    margin-bottom: 20%;
}

/** POLICE **/
.experience .colonne .element
{
    text-align: center;
    color: azure;
}

.experience .colonne .element h3, .experience .colonne .element h2, .experience .colonne .element p
{
    margin: 0px;
}
/***** FIN EXPERIENCES *****/

/***** FOOTER *****/
footer a
{
  position:relative;
  top: 15px;
  margin-left: 15px;
  margin-right: 15px;
}
footer img
{
    border-radius: 10px;
}
/***** FIN FOOTER *****/

/***** A TRIER *****/
article *
{
    margin: 5px;
    margin-bottom: 0px;
}