/*Ajout de la police*/
@font-face{
    font-family:'Ailerons-Regular';
    src:url('../fonts/Ailerons/Ailerons-Regular.otf');
}
@font-face{
    font-family:'anita-semi-square';
    src:url('../fonts/anita-semi-square/Anita-semi-square.ttf');
}
html, body{
    height:100%;
    width:100%;
    margin :0;
    padding:0;
    background-color:#313131;
    background-image:url("../img/fond.png");
    background-repeat:repeat;
    background-size:250px;
    color:#ffee00;
    font-family:Ailerons-Regular;
    /*Désactive la scrollbar*/
    -ms-overflow-style: none;  /*IE and Edge*/
    scrollbar-width: none;/*Firefox*/
}
/*Désactive la scrollbar*/
::-webkit-scrollbar {
    display: none;
  }
div{
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    color:#E89500;
}
/*Remise à zéro des réglages <div> pour la cookie box*/
#cookie_law_notification{
    all:unset;
}
a{
    text-decoration:none;
}
/*Bandeau de navigation*/
.divmenu{
    position:absolute;
    display:block;
    height:fit-content;
}
.logo{
    z-index:2;
    position:fixed;
	top:0;
    margin-left:5%;
    border-top:#E89500 solid 4px;
    background-image:url(../img/logo-demi.svg);
    background-size:contain;
    background-repeat:no-repeat;
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    user-select: none; /* Propriété standard */
}
.ulbandeau{
    background-color:#515151;
    border-top:#E89500 solid 4px;
    z-index:1;
	list-style-type:none;
	display:flex;
	justify-content:center;
	align-items:center;
	position:fixed;
	top:0;
    width:100%;
    min-width:fit-content;
    height:fit-content;
    margin :0;
    padding:0;
    font-size:1.25rem;
    transition: all ease 0.25s;
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    user-select: none; /* Propriété standard */
}
/*Page accueil*/
.fond-accueil{
    background-image:url(../img/worldmap.png);
    background-repeat:no-repeat;
    background-position:center;
    flex-direction:column;
    align-items:center;
}
h1{
    color:#E89500;
    font-size:5rem;
    display:flex;
    justify-content:center;
    margin:auto;
    /* margin-top:7rem; */
    padding-top:7rem;
    text-align:center;
}
.nom{
    margin:auto;
    align-items:center;
    flex-direction:column;
    font-size:5.5rem;
    text-shadow:0 0 15px black;
    text-align:center;
}
.hello{
    background-color: rgba(165, 42, 42, 75%);
}
/*Position de l'horloge*/
.horloge{
    margin-bottom: 50px;
    position: relative;
    height:50px;
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    user-select: none; /* Propriété standard */
}
/*Annimation rebondissement*/
@keyframes bounce{
    from{transform:translateY(0);}
    to  {transform:translateY(-50%);}
}
/*Classe pour la puce qui indique de descendre*/
#scrolldown{
    cursor:pointer;
    height:3rem;
    width:3rem;
    margin-bottom:5%;
    animation:bounce 0.5s ease infinite alternate;
}
/*Classe pour la puce home*/
#scrollup{
    position:absolute;
    margin-bottom: 5%;
    cursor:pointer;
    height:3rem;
    width:3rem;
    top:90%;
    right:1%;
}
/*////////////////////////////////////////////////
//                                              //
//          Mise en page des Blocs              //
//                                              //
////////////////////////////////////////////////*/
/*Titre des menus en bloc*/
.stitre{
    margin:auto;
    width:80% ;
    height:80% ;
}
.boiteI{
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    background-color:#E89500;
    box-shadow:#515151 1rem 1rem;
}
h2{
    font-size:5rem;
    background-color:#515151;
    height:fit-content;
    width:fit-content;
    margin:auto;
    margin-top:10%;
    padding:1rem;
    -webkit-text-stroke:1.2px black;
    border-radius:1rem;
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    user-select: none; /* Propriété standard */
}
#actu{
    background-image:url(../img/actu.svg);
}
#qui_suis-je{
    background-image:url(../img/qui_suis-je.svg);
}
#projets{
    background-image:url(../img/projets.png);
}
#cv{
    background-image:url(../img/cv.svg);
}
#contact{
    background-image:url(../img/worldmap-black.png);
}
#footer{
    background-color:#313131;
}
/*Bloc La Team*/
#footer h2{
    padding:inherit;
}
h3{
    font-size:2.5rem;
}
.dream{
    color:#fff;
    font-size:2.5rem;
    font-style:italic;
}
/*Pied de la page*/
footer{
    height:100px;
    background-color:#E89500;
    color:#fff;
    font-size:10pt;
    bottom:0;
    width:100%;
    display:flex;
    justify-content:center;
}
footer a{
    margin:auto;
    margin-right:2%;
    margin-left:2%;
}
/*Logo linkedIN collé en haut du pied*/
footer .texte{
    margin-top:0;
}
.h2footer{
    font-size:4rem;
    margin:auto;
    text-align:center;
    background-color:inherit;
    -webkit-text-stroke:inherit;
    border-radius:unset;
}
.h2footer,a{
    color:#E89500;
}


/*Classe pour les boutons*/
.btn{
    max-width:max-content;
    text-align:center;
    padding:.8rem 2rem;
    border:1px solid #E89500;
    color:#E89500;
    transition:.3s ease all;
    margin:auto;
    display:flex;
    justify-content:center;
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    user-select: none; /* Propriété standard */
}
/*Classe pour les boutons au survol ainsi que le bouton activf*/
.btn:hover, .btn:focus, .current{
    cursor:grab;
    color:#313131;
    background-color:#E89500;
}




#cv-img{
    background-image:url(../doc/CV-Timothee-Fourel.png);
    background-position:center;
    background-repeat:no-repeat;
    background-color:brown;
    background-size:contain;
    height:90%;
    width:80%;
    margin: auto;
    border:#E89500 solid 3px;
}
.corps{
    flex-direction:column;
    align-items:center;
    height:fit-content;
    height:-moz-fit-content;
    min-height:100%;
    text-align:center;
}
.contenue{
    flex-direction:column;
    align-items:center;
    min-height:100%;
}
.texte{
    font-family:anita-semi-square;
    font-size:1rem;
    margin-right:5%;
    margin-left:5%;
    color:#F9BA1A;
}
.link{
    font-family:anita-semi-square;
    font-size:1rem;
    margin-right:5%;
    margin-left:5%;
    color:#fff;
}
/*Masquage du bouton pour ouvrir le menu burger sur grand écran*/
.menuBurgerBtn{
    display:none;
}
/*////////////////////////////////////////////////
//                                              //
//              Responsive design               //
//                                              //
////////////////////////////////////////////////*/
.disableScrollDiv{
	width:4rem;
	height:2rem;
    justify-content:unset;
    position:absolute;
    right:2%;
    margin:auto;
	margin-inline:0.8rem;
    transition:0.5s ease-in-out;
}
.disableScroll{
    font-size:1rem;
    color:#F9BA1A;
    position:absolute;
    z-index:1;
    cursor:pointer;
	width:4rem;
	height:2rem;
	background: #313131;
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    border-radius:50px;
    text-shadow: 1px 1px 0px rgba(255,255,255,.15);
}
.disableScroll:before{
	content: 'OFF';
	color: #000;
    top:0.3rem;
    position:relative;
    left:0.1rem;
}
.disableScroll:after{
	content: 'ON';
	color: #F9BA1A;
    top:0.3rem;
    position:relative;
}
.disableScroll label{
    height:1.9rem;
	width:2rem;
    background:#F9BA1A;
    border-radius:50px;
    left:2rem;
    position:absolute;
    top:0.1rem;
    z-index:2;
    transition: all ease 0.25s;
}
.disableScroll input:checked + label{
    transform: translateX(-2rem);
}
.disableScroll input{
	display:none;
}
.disableScrollDiv:hover:after{
    content:'Défillement libre 😁';
    bottom:-3.25rem;
    right:5.1rem;
    position: relative;
    display: flex;
    align-items: center;
    background-color: #515151;
    padding-block:2rem;
    padding-inline:0.7rem;
    border-radius:15px;
}
@keyframes popUp {
        from{transform:translateX(0rem);}
        20% {transform:translateX(-30.5rem);}
        80% {transform:translateX(-30.5rem);}
        to  {transform:translateX(0rem);}
}
.popUp{
    top:4rem;
    right:-30rem;
    position: fixed;
    background-color: #515151;
    padding:0.7rem;
    padding-inline:1rem;
    border-radius:15px;
    max-width:25rem;
    animation:popUp 10s ease;
    z-index:3;
    font-family:anita-semi-square;
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    user-select: none; /* Propriété standard */
}

/*Disposition réactive pour les écrans moyens : Logo, Bandeau*/
@media screen and (max-width:1600px){
    .logo{
        width:100px;
        height:100px;
    }
}
/*Disposition réactive pour les écrans moyens : Bandeau*/
@media screen and (max-width:1439px){
    .ulbandeau{
        justify-content:flex-end;
    }
    .disableScrollDiv{
        position:unset;
    }
}
/*////////////////////////////////////////////////
//                                              //
//    Menu Burger actif en dessous de 1366px    //
//                                              //
////////////////////////////////////////////////*/
/*Disposition réactive pour les petits écrans*/
@media screen and (max-width:1366px){
    /*Menu Burger pour les petits écrans*/
    /*Affichage du bouton pour ouvrir le menu burger*/
    .menuBurgerBtn{
        display:inherit;
        height:1.5rem;
        width:1.5rem;
        padding:0.87rem;
    }
    .menuBurgerBtnOpen{
        background-image:url(../img/scrollup.png);
        background-size:1.5rem;
        background-position:center;
        background-repeat: no-repeat;
        /* Pour corriger un petit bug d'affichage à cause de la résolution */
        padding:0.9rem;
    }
    .ulbandeau{
        flex-direction:row;
        align-items: flex-end;
    }
    .menuBurger{
        /* transition:2s all ease; */
        background:linear-gradient(to bottom right, #832A2A, #515151);
        flex-direction:column;
        align-items:center;
        padding-bottom:1rem;
    }
    /*Afficher uniquement la rubrique active dans la barre des menus*/
    .ulbandeau .btn{
        display:none;
    }
    .ulbandeau .current{
        display:inherit;
    }
     /*Ajuster tous les boutons à la même taille*/
    .menuBurger .btn{
        width:fit-content;
        min-width:15rem;
        display:inherit;
        border-inline:none;
    }
    /*Suppression des bordures extérieurs sur le premier et dernier bouton*/
    .menuBurger li:first-of-type a{
        border-top:none;
    }
    .menuBurger li:last-of-type a{
        border-bottom:none;
    }
}
/*Disposition réactive pour les petits écrans après désactivation du js*/
@media screen and (max-width:1200px){
    .disableScrollDiv{
        display:none;
    }
    .popUp{
        display:none;
    }
    #scrollup{
        display:none;
    }
    footer{
        height:fit-content;
    }
    footer a{
        font-size:0.6rem!important;
    }
}
/*Disposition réactive pour les petits écrans : Taille Police*/
@media (max-width:950px), (max-height:700px){
    .nom, h1{
        font-size:3rem;
    }
    h2, .h2footer{
        font-size:2.15rem;
    }
    h3{
        font-size:1.2rem;
    }
    .dream{
        font-size:1.5rem;
    }
}
/*Disposition réactive pour les trés petits écrans : Logo, Menu*/
@media screen and (max-width:550px){
   /*Ajuster tous les boutons à la même taille*/
    .menuBurger .btn{
        min-width:9.2rem;
    }
    .logo{
        margin-left:0;
    }
}
/*Disposition réactive pour les trés petits écrans : Titre*/
@media (max-height:500px){
    /*Ajuster le titre*/
    .nom{
        margin-top:7rem;
    }
}
/*Disposition réactive pour les trés petits écrans : Logo, Horloge, Taille Police*/
@media (max-width:390px), (max-height:500px){
    /*Ajuster le logo*/
    .logo{
        width:65px;
        height:70px;
    }
    .horloge img{
        height:30px;
        width:22px;
    }
    .nom, h1{
        font-size:2.5rem;
    }
    h2, .h2footer{
        font-size:1.67rem;
        padding:0.7rem;
    }
}