html{
    scroll-behavior: smooth;/* pour rendre le "back to the top" plus fluide*/
}
body {/* pour rendre les pages tous uniforme*/
width : 100%;
min-height : 100%;
margin : 0;
font-family : Arial, Helvetica, sans-serif;
font-size : 14pt;
background-image : url("../photo/etoilefond.jpg");
background-color : #000;
color : white;
}

/*debut du header*/
header {
width : 100%;
height : 55px;
background-color : #0B0A0C;
color : white;
text-align : left;
}
header h1 {
display : inline-block;
font-size : 40px;
line-height : 90%;
margin : 0;
margin-top : 7px;
margin-left : 10px;
margin-right : 10px;
display : inline-block;
vertical-align : top;
color : white;
}
header a {
color : white;
text-decoration : none;
}
header a:hover {
background-color : #F0CB79;
padding : 8%;
}
header nav {
vertical-align : top;
display : inline-block;
height : 100%;
}
header nav ul {
margin : 0;
height : 100%;
list-style-type : none;
text-align : center;
line-height : 150%;
vertical-align : top;
}
header nav ul li {
display : inline-block;
margin : 0;
margin-top : 13px;
color : black;
width : 150px;
text-align : center;
vertical-align : top;
}
.home {
    display : inline-block;
    margin : 0;
    width : 23%;
    height : 23%;
    text-align : center;
    vertical-align : top;
}
/*fin du header*/
h2 {
display : flex;
justify-content : center;
text-decoration : underline overline solid #F0CB79;
text-shadow : 0 0 2px #FFD100, 0 0 30px #FFD100, 0 0 5px #FFD100, 0 0 150px #FFD100;
color : #F0CB79;
}
a {
color : white;
text-decoration : none;
}
p {
font-size : 17pt;
width : 100%;
text-align : justify;
text-align : center;
}
span {
color : #47B2F8;
}
.titrepage {
    font-size : 2.3rem;
    font-weight : bold;
    text-align : center;
    text-shadow : 2.5px 2.5px 0 #ffae00, 5px 5px 0 #ff00c0, 7.5px 7.5px 0 #aa0306, 10px 10px 10px #7c0003;
    color : #ffe69a;
}
.titresimple {
    display : flex;
    justify-content : center;
    font-size : 1.8rem;
    font-weight : bold;
    color : white;
    
}
.sous-titres {
    text-shadow : 0 0 2px #FFD100, 0 0 30px #FFD100, 0 0 5px #FFD100, 0 0 150px #FFD100;
    color : #F0CB79;
}
/* page d'accueil*/
iframe {/* video dans la page d'accueil*/
position : relative;
width : 560px;
height : 315px;
z-index : 1;
}
/*css pour donner le contour néon autour de la vidéo*/
.block {
position : relative;
margin : 10% auto 0;
width : 565px;
height : 320px;
background : linear-gradient(0deg, #000, #272727);
}
.block:before, .block:after {
content : '';
position : absolute;
left : -2px;
top : -2px;
background : linear-gradient(45deg, #5A1E65, #FF33B2, #FF3340, #651E32, #5A1E65, #651E32, #651E32, #651E63, #651E63, #5A1E65);
background-size : 200%;
width : calc(100% + 4px);
height : calc(100% + 4px);
z-index : -1;
animation : steam 20s linear infinite;
}
@keyframes steam {
0% {
background-position : 0 0;
}
50% {
background-position : 400% 0;
}
100% {
background-position : 0 0;
}
}
.block:after {
filter : blur(50px);
}

.click-photo {/*photo cliquable*/
border-radius : 10px 100px / 120px;
}
.section_img{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.job {
position : relative;
left : 10%;
top : 9%;
width : 80%;
text-align : justify;
}/* fin de la page d'accueil*/

.passion {
width : 100%;
text-align : center;
}

/* page du cv*/
.infocontact {
width : 85%;
padding : 10px;
text-align : center;
margin : auto;
box-sizing : border-box;
border-radius : 10px;
background-color : #0D1327;
}
#photo {
width : 23%;
height : 23%;
margin-top : 15px;
margin-right : 15px;
margin-left : 15px;
box-sizing : border-box;
background-color : #121B3A;
border-radius : 80px;
float : left;
}
.intro {
width : 85%;
padding : 10px;
text-align : center;
text-align : justify;
margin : auto;
box-sizing : border-box;
border-radius : 20px;
background-color : #121B3A;
}
.skill {
width : 85%;
padding : 10px;
text-align : center;
margin : auto;
box-sizing : border-box;
border-radius : 20px;
background-color : #162145;
}
.experience1 {
width : 85%;
padding : 10px;
text-align : center;
margin : auto;
box-sizing : border-box;
border-radius : 20px;
background-color : #270D0F;
}
.experience2 {
width : 85%;
padding : 10px;
text-align : center;
margin : auto;
box-sizing : border-box;
border-radius : 20px;
background-color : #3A1215;
}
.gras {
text-align : center;
font-weight : bold;
font-size : 1.5rem;
}
.formation1 {
width : 85%;
padding : 10px;
text-align : center;
margin : auto;
box-sizing : border-box;
border-radius : 20px;
background-color : #27220D;
}
.formation2 {
width : 85%;
padding : 10px;
text-align : center;
margin : auto;
box-sizing : border-box;
border-radius : 20px;
background-color : #3A3212;
}/* fin page du cv*/

/**page "my hobbies"*/

.digi {
display : flex;
flex-direction : row;
justify-content : space-around;
align-content : center;
}
.neon {
position : relative;
}
.neon {
width : 200px;
}
.neon img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;/* temps de transition*/

}
.neon:hover img:nth-child(2) { /*lorsque l'image passe par dessus la photo : son opacité augmente pour que la photo soit visble*/

opacity : 1;
}
.blue {
position : relative;
}
.blue {
width : 300px;
}
.blue img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.blue:hover img:nth-child(2) {
opacity : 1;
}
.hallo {
position : relative;
}
.hallo {
width : 200px;
}
.hallo img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.hallo:hover img:nth-child(2) {
opacity : 1;
}
.louis {
position : relative;
}
.louis {
width : 200px;
}
.louis img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.louis:hover img:nth-child(2) {
opacity : 1;
}
.tradi {
width : 100%;
margin : auto;
display : flex;
flex-direction : row;
justify-content : space-around;
}
.multi {
position : relative;
}
.multi {
width : 200px;
}
.bedjah {
position : relative;
}
.bedjah {
width : 200px;
}
.vina {
position : relative;
}
.vina {
width : 200px;
}
.avocat {
position : relative;
}
.avocat {
width : 200px;
}
.perspective {
width : 100%;
margin : auto;
display : flex;
flex-direction : row;
justify-content : space-around;
align-content : center;
}
.canape {
position : relative;
}
.canape {
width : 300px;
}
.canape img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.canape:hover img:nth-child(2) {
opacity : 1;
}
.people {
position : relative;
}
.people {
width : 300px;
}
.people img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.people:hover img:nth-child(2) {
opacity : 1;
}
.pers {
position : relative;
}
.pers {
width : 300px;
}
.pers img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.pers:hover img:nth-child(2) {
opacity : 0;
}
.maison {
position : relative;
}
.maison {
width : 200px;
}
.maison img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.maison:hover img:nth-child(2) {
opacity : 1;
}
.logo {
margin : auto;
display : flex;
flex-direction : row;
justify-content : space-around;
}
.pacifique {
position : relative;
}
.pacifique {
width : 200px;
}
.album {
position : relative;
}
.album {
width : 200px;
}
.rns {
position : relative;
}
.rns {
width : 200px;
}
.photo {
width : 100%;
margin : auto;
display : flex;
flex-direction : row;
justify-content : space-around;
}
.esp1 {
position : relative;
}
.esp1 {
width : 200px;
}
.esp1 img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.esp1:hover img:nth-child(2) {
opacity : 1;
}
.esp2 {
position : relative;
}
.esp2 {
width : 200px;
}
.esp2 img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.esp2:hover img:nth-child(2) {
opacity : 1;
}
.poisson {
position : relative;
}
.poisson {
width : 200px;
}
.barcelone {
position : relative;
}
.barcelone {
width : 200px;
}
.barcelone img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.barcelone:hover img:nth-child(2) {
opacity : 1;
}
.bateau {
position : relative;
}
.bateau {
width : 200px;
}
.bateau img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.bateau:hover img:nth-child(2) {
opacity : 1;
}
.ciel {
position : relative;
}
.ciel {
width : 200px;
}
.ciel img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.ciel:hover img:nth-child(2) {
opacity : 1;
}
.lamp {
position : relative;
}
.lamp {
width : 200px;
}
.lamp img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.lamp:hover img:nth-child(2) {
opacity : 1;
}
.velo {
position : relative;
}
.velo {
width : 200px;
}
.velo img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.velo:hover img:nth-child(2) {
opacity : 1;
}
.retour:hover {
background-color : #E29C1C;
padding : 0%;
border-radius : 10px;
text-decoration : none;
}/*fiin de la page "my hobbie"*/

/*page du formulaire*/
form {
margin : 0 auto;
width : 400px;
padding : 1em;
border : #CCC solid 3px;
border-radius : 1em;
}
.text-contact{
    text-align: center;
}
textarea {
max-width : 98%;
width : 350px; /*pour que le text ne sort pas de la bordure*/

}
label {
text-align : right;
}
button {
margin-left : 310px;
color : white;
background-color : #0A2A3F;
}
button:hover {
background-color : #E29C1C;
}
.bonus{
    position: absolute;
    bottom: 20%;
    left: 70%;
}
.youtube{
    width: 280px;
    height: 157px;
}
/*fin page contact*/
.response-container{
    margin : 0 auto;

padding : 1em;
border : #CCC solid 3px;
border-radius : 1em;
}
.validator { /*validation html et css*/
width : 5%;
}
h3 {
display : flex;
justify-content : center;
}
footer {
display : block;
width : 100%;
right : 0;
left : 0;
bottom: 0;
color : white;
margin-top : 50px;
height : 200px;
background-color : #0D1327;
padding : 10px;
box-sizing : border-box;
}
/*footer address {
position : absolute;
text-align : right;
bottom : 10px;
right : 10px;
}*/
.social {
display : flex;
justify-content : center;
}
.social img{
    display:flex;
    justify-content: center;
    position:relative;
    left: 130px;
    width: 34%; 
    height:34%;
}
.logo {
width : 30%;
height : 30%;
}
.social a:hover {
border-radius : 10px;
background-color : #0A2A3F;
padding: 0;
}
footer address a {
display : block;
}