/*
*   LAYOUT
*/

html {
    background-color: #fcfcfc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
}

body {
    width: 100%;
    margin: 0;
}

header, main, footer {
    margin: 0;
}

/* 
Photo by Lukas from Pexels (https://www.pexels.com/@goumbik)
 */

header {
    /* background-image: linear-gradient(to top, #f0f0ff, #88b6f3); */
    background: linear-gradient(to top, rgba(10, 11, 12, 0.6), rgba(39, 62, 85, 0.3)), 
                url("./bg-laptop.jpg");
    background-position: center;
    background-size: cover;

    color: #FEFEFE;
    height: 220px;
    border-bottom: 2px solid #444444;

    z-index: 1000;
    position: sticky;
    top: -185px;
}

header>div, main>div, footer>div {
    max-width: 1066px;
    margin: 0 auto;
    padding: 0 20px;
}


footer {
    height: 150px;
}



/*
*   ELEMENTS
*/

/* Décalage du fixed header appliqué à l'anchor target */
:target::before {
    content: "";
    display: block;
    height: 40px; /* fixed header height*/
    margin: -40px 0 0;  /* negative fixed header height */
}

/* Texte général */

h1, h2, h3, h4, h5, p, a, ul, li {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
}

a, a:hover, a:visited {
    color: inherit;
    text-decoration: none;
}

h1 {
    text-transform: uppercase;
    margin: 20px 0 10px;
    font-size: 2rem;
}

h2 {
    margin: 10px 0 20px;
    font-size: 1.8rem;
}

h3 {
    margin: 10px 0 10px;
    font-size: 1.5rem;
}

h4 {
    margin: 5px 0 5px;
    font-size: 1.2rem;
}

h5 {
    margin: 0 0 5px;
    font-size: 0.8rem;
    color: #BBBBBB;
}

p {
    margin: 3px 0 3px;
}

/* Header */

header>div {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: flex-end;
}

#navPages {
    align-self: flex-start;
}


/* Sections du main */

/* nav menus */

#navSections {
    z-index: 500;
    position: sticky;
    top: 40px;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: flex-end;
}

#navSections ul.large li {   
    background-color: #fff;
    border-radius: 10px;
    padding: 5px 10px;
    margin: 5px 10px;
    border: 1px solid #444444;
}

#navSections ul.small {
    background: #fff;
    border: 1px solid #444444;
    border-radius: 5px;
    padding: 5px 10px;

    display:flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

#navSections ul.small li {
    padding: 5px 0;
    text-decoration: underline dotted #444444;
}


#menuIcon {
    display: none;
    cursor: pointer;
    background-color: #fff;
    width: 50px;
    height: 50px;
    padding: 5px;
    border: 1px solid #444444;
    border-radius: 40px;
    margin: 5px;
}

/* compétences */

#skills {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

#info {
    width: 80%;
}

#langues {
    padding: 0 0 0 20px;

    z-index: 50;
    position: relative;
}

#langues::before {
    z-index: 20;
    position: absolute;
    content: "";
    display: block;
    margin: 20px 0px 0px -20px;
    width: 1px;
    height: calc(100% - 20px);
    background-color: rgba(68, 68, 68, 0.25);
}

#skills ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
}

#skills ul li {
    margin: 5px 10px 5px 0;
}

/* autres sections */

#CV section h3 {
    margin-left: -8px;
}

#CV article {
    z-index: 50;
    position: relative;
    margin: 20px 0px 20px 10px;
}

#CV article::before {
    z-index: 20;
    position: absolute;
    content: "";
    display: block;
    margin: 5px 0px 0px -10px;
    width: 2px;
    height: calc(100% - 5px);
    background-color: #444444;
}

/* Page Contact */

#adresse, #formulaire {
    margin: 0 0 60px;
}

#formulaire {
    position: relative;
}

#formulaire::before {
    content: "";
    display: block;
    background-color: #888888;
    width: 150px;
    height: 1px;
    position: absolute;
    top: -25px;
    left: 50px;
}

#adresse button, #formulaire button {
    cursor: pointer;
    background-color: dodgerblue;
    color: #fcfcfc;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    padding: 8px 16px;
}

input, textarea {
    font-family: inherit;
    font-size: 0.9rem;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 5px 0;
}

#tampon {
    width: 230px;
}


#email-form {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
}

#email, #nom {
    width: 350px;
}

#question {
    width: 20%;
}

#success {
    z-index: 2000;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    
    display: none;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7),rgba(0,0,0,0));
}

#success p {
    background-image: linear-gradient(to bottom, #ffffffff,
    #f0f0f0 10%,
    #f0f0f0 90%,
    #e2e2e2);
    border: 1px solid black;
    border-radius: 10px;

    padding: 20px 50px;
}


#success.show {
    display: flex;
}

/* Exemples */

#tags {
    margin: 10px 0 10px;
}

#tags button {
    cursor: pointer;
    margin: 2px 5px;
    padding: 4px 8px;
    background-color: #fcfcfc;
    color: #444444;
    font-size: 0.9rem;
    border: 1px solid #444444;
    border-radius: 5px;
}

#tags button:hover {
    background-color: #f0f0f0;
}

#tags button.active {
    background-color: dodgerblue;
    color: #fcfcfc;
    border: 1px solid rgb(20, 98, 175);
}

#tags button.active:hover {
    background-color: rgb(20, 98, 175);
    color: #fcfcfc;
    border: 1px solid rgb(15, 80, 145);
}

#listeExemples article {
    flex-wrap: nowrap;
    margin: 20px 0;
    position: relative;
}

#listeExemples article::before {
    content: "";
    height: 1px;
    width: 150px;
    position: absolute;
    top: -2px;
    margin: 0 25%;
    background: #888888;
}

#listeExemples img {
    border: 1px solid #444444;
}

#listeExemples article>div {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: flex-start;

    padding-left: 15px;
}

#listeExemples article>div p {
    margin-bottom: 10px;
}

#listeExemples p.noResult {
    margin: 50px 10px;
}

/* Footer */

footer p {
    margin-top: 10px;
}

/*
*   CLASSES
*/

.centre {
    text-align: center;
}

.droite {
    text-align: right;
}

.uppercase {
    text-transform: uppercase;
}

a.button, a.button:hover, a.button:visited {
    background-color: #fcfcfc;
    color: #000;
    border: 1px solid #444444;
    border-radius: 10px;
    padding: 8px 15px;
    margin: 5px 10px;
}

a.button:hover {
    background-color: #EEEEEE;
}


.onglet {
    background: linear-gradient(to top, #888888, #eee 5%);
    color: #000;
    font-size: 1.2rem;
    padding: 5px 15px 0px;
    margin: 0 5px;

    border-top: 2px solid #444444;
    border-left: 2px solid #444444;
    border-right: 2px solid #444444;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.onglet.active {
    background: #fcfcfc;
    padding: 5px 15px 2px;
    font-weight: 600;
}

a.onglet, a.onglet:hover, a.onglet:visited {
    text-decoration: none;
    color: #000;
}

.flex-row-menu {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
}

.flex-center {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.flex-row-start-center {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
}

.hide {
    display: none !important;
}

.shadow {
    text-shadow: 0 0 5px #444444;
}

.form-group {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;

    padding: 5px;
}

.erreur {
    font-size: 0.7rem;
    color: rgb(235, 38, 38);
}

.full-size {
    width: 100%;
}

input.large-input, textarea.large-input {
    width: 95%;
}


/*
* Ajustement Tablets (768 - 992)
*/

@media (min-width: 768px) and (max-width: 991.98px) { }


/*
* Petits formats (<768)
*/

@media (max-width: 767.98px) { 
    header {
        background: linear-gradient(to top, rgba(10, 11, 12, 0.6), rgba(39, 62, 85, 0.3)), 
                url("./bg-laptop.jpg");
    }

    h1 {
        margin: 12px 0 8px;
        font-size: 1.9rem;
    }
    
    h2 {
        margin: 8px 0 6px;
        font-size: 1.8rem;
    }

    h3 {
        margin: 10px 0 8px;
        font-size: 1.3rem;
    }
    
    h4 {
        margin: 5px 0 5px;
        font-size: 1.1rem;
    }
    
    h5 {
        margin: 0 0 5px;
        font-size: 0.7rem;
        color: #BBBBBB;
    }

    a.button, a.button:hover, a.button:visited {
        border-radius: 8px;
        padding: 4px 8px;
        margin: 4px 6px;
    }

    .large {
        display: none;
    }

    #menuIcon {
        display: flex;
    }

    /* Page Contact */

    #email, #nom {
        width: 300px;
    }
}