/* Feuille de style */

/* Déclaration et initialisation des variables*/

:root /* On définit les variables et on leur donne une valeur pour les utiliser au besoin dans le code css. En cas de modification, on aura juste leur valeur à changer */ 
{
    --couleur-texte-principale: #eee; /* Couleur utilisée par défaut pour le texte. */
    --couleur-de-fond-principale: #0e0e0e; /* Couleur utilisée par défaut pour l'arrière plan - couleur de base choisie: 1D1B1B*/
    --couleur-intermediaire: #838384; /* Couleur intermédiaire pour basculer entre les 2 précédentes */
    --couleur-intermediaire-sombre: #414142;
    --filtre-assombrissant: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) /* filtre qui permet d'assombrir les couleurs et images utilisées pour le site web */
}

/* Déclaration pour écran par défaut (grands écrans comme ordinateurs par exemple) */

@media all 
{
    /* Style par défaut des balises */

    body /* Pour l'ensemble du code contenu dans la page web */ 
    {
        font-family: 'abeezee', Comic Sans MS,sans-serif; /* On définit la police d'écriture */
        background: var(--filtre-assombrissant), var(--couleur-de-fond-principale); /* On définit la couleur de fond */
        color: var(--couleur-texte-principale); /* On définit la couleur du texte */
    }

    footer 
    {
        /*background: linear-gradient(rgba(200, 200, 200, 0.5), rgba(0, 0, 0, 0.5)), var(--couleur-de-fond-principale);*/
        padding: 1em 0em;
        text-align: center;
    }

    h2 
    {
        text-transform: uppercase; /* Force les caractères en majuscule */
        margin-bottom: 2em;
    }

    h2, h3 
    {
        text-align: center;
        font-size: 24px;
    }

    h4
    {
        text-align: center;
        margin-bottom: 1em;
    }

    img 
    {
        max-width: 100%;
    }

    p 
    {
        letter-spacing: 1px;
        line-height: 1.2em;
        font-size: 18px;
    }

    textarea /* Style définit par défaut pour les textarea */ 
    {
        height: 92%;
        width: 95%;
        resize: none;
        text-align: justify;
        border: 2px solid var(--couleur-intermediaire);
        border-top: 0px solid var(--couleur-intermediaire);
        padding: 1em;
        box-shadow: 10px 10px 200px var(--couleur-intermediaire-sombre), 0px -10px 8px var(--couleur-intermediaire-sombre), 0px -20px var(--couleur-intermediaire); /* Création d'un effet d'ombrage. 1: décallage horizontal; 2: décallage vertical; 3: épaisseur de l'ombre; 4: couleur de l'ombre */
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
    }

    /* Style appliqué par ID */

    #btn_facebook 
    {
        background-image: url("./images/btn_facebook_standard_transparent_2.png");
        background-size: cover;
    }

    #btn_facebook:active
    {
        background-image: url("./images/btn_facebook_active_transparent_1.png");
        background-size: cover;
    }

    #btn_linkedin
    {
        background-image: url("./images/btn_linkedin_standard_transparent_2.png");
        background-size: cover;
    }

    #btn_linkedin:active 
    {
        background-image: url("./images/btn_linkedin_active_transparent.png");
        background-size: cover;
    }

    #contactForm 
    {
        text-align: center; /* Définit l'affichage du texte en centré */
        display: flex; /* Définit la méthode d'affichage de l'élément en tant que flexible */
        justify-content: space-around; /* Définit la position des élément (flex) avec un espacement égale autour d'eux */
        flex-wrap: wrap; /* Permet aux éléments de s'organiser sur plusieurs lignes en fonction de la place qu'ils ont sur la largeur */
        margin-bottom: 1em; /* Définit l'espacement en dessous de l'élément */
        color: var(--couleur-texte-principale); /* Définit la couleur du texte de l'élément */
    }

    #contactForm input, #contactForm label, #contactForm textarea 
    {
        outline: none; /* Réinitialisation du comportement naturel du navigateur */
        display: flex; /* Définit la méthode d'affichage de l'élément en tant que flexible */
        color: var(--couleur-texte-principale); /* Définit la couleur du texte de l'élément */
        background: transparent; /* Définit la couleur d'arrière plan de l'élément */
    }

    #contactForm input, #contactForm label
    {
        border: 2px solid var(--couleur-intermediaire); /* Définit l'ensemble des bords de l'élément */
        border-top: 0px; /* Définit le bord supérieur de l'élément */
        border-left: 0px; /* Définit le bord gauche de l'élément */
    }

    #contactForm input 
    {
        width: 18em; /* Définit la largeur de l'élément */
        border-radius: 0px 20px 20px 0px; /* Création de bords arrondis */
    }

    #contactForm input[type="submit"] 
    {
            width: 6em; /* Définit la largeur de l'élément */
            align-self: flex-end; /* Placer l'élément de type flex à la fin de son contenant (tout en bas) */
            margin-bottom: 1em; /* Définit l'espacement en dessous de l'élément */
            background: radial-gradient(var(--couleur-intermediaire), var(--couleur-de-fond-principale)); /* Création de l'arrière plan */
            border: 1px solid var(--couleur-intermediaire-sombre); /* Création d'une bordure pour l'élément */
            cursor: pointer; /* Donne l'aspect d'une main au curseur */
    }

    #contactForm input[type="submit"]:hover 
    {
        box-shadow: 0.5px 0.5px 4px var(--couleur-texte-principale); /* Création d'un effet d'ombrage. 1: décallage horizontal; 2: décallage vertical; 3: épaisseur de l'ombre; 4: couleur de l'ombre */
    }

    #contactForm input[type="submit"]:active 
    {
        background: radial-gradient(var(--couleur-de-fond-principale), var(--couleur-intermediaire));
        transform: translateX(2px);
    }

    #contactForm label
    {
        width: 4.5em;
        padding: 0.1em 00.2em 0.05em 0.2em;
        /*border-right: 1px;*/
        /*rder-top: 0px;*/
        /*border-left: 0px;*/
        /*border-radius: 20px 0px 0px 20px;*/
    }

    #contactForm #nom 
    {
        width: 8.5em;
        margin-right: 0.5em;
    }

    #contactForm #prenom 
    {
        width: 8.5em;
    }

    #contactForm textarea::placeholder, #contactForm input::placeholder 
    {
        color: var(--couleur-intermediaire);
        transition: color 0.2s linear;
    }

    #contactForm textarea:focus::placeholder, #contactForm input:focus::placeholder 
    {
        color: transparent;
    }

    #en_tete_de_page 
    {
        background-image: var(--filtre-assombrissant), url('./images/fond_en_tete.jpg'); /* On définit une image en arrière plan */
        background-position: center top;
        background-attachment: fixed;
        background-size: cover; /* Permet d'adapter la taille de l'image aux dimension de l'arrière plan qui la contient */
        text-align: center;
    }

    #en_tete_de_section_principale 
    {
        margin-bottom: 6em;
    }

    #lien_flocage div 
    {
        background-image: url('./images/img_flocage.jpg');
        background-position: center center;
    }

    #lien_web div 
    {
        background-image: url('./images/img_web.jpg');
        background-position: center center;
    }

    #lien_3D div 
    {
        background-image: url('./images/img_3D.jpg');
        background-position: center top;
    }

    #linkContact 
    {
        overflow: hidden;
        animation: 1s ease-out 0s 1 alternate move_links;
    }

    #linkEnSavoirPlus 
    {
        animation: 1s linear 0s 1 alternate opacity_links;
    }

    @keyframes move_links 
    {
        from 
        {
            margin-left: 50%;
            opacity: 0%;
        }

        33% 
        {
            margin-left: 50%;
            opacity: 0%;
        }

        to 
        {
            margin-left: 1%;
            opacity: 100%;
        }
    }

    @keyframes opacity_links 
    {
        from 
        {
            opacity: 0%;
        }

        33% 
        {
            opacity: 0%;
        }

        to 
        {
            opacity: 100%;
        }
    }

    #linkRapides 
    {
        text-transform: uppercase; /* Force les caractères en majuscule */
        padding: 1em 0em;
        margin-bottom: 10em;
        white-space: nowrap; /* Force les éléments à rester sur la même ligne */
    }

    #linkRapides li 
    {
        display: inline;
        font-size: 20px;
    }

    #menus_en_tete 
    {
        background: linear-gradient(rgba(200, 200, 200, 0.5), rgba(0, 0, 0, 0.5)), var(--couleur-de-fond-principale);
        padding: 1em 0em;
        position: fixed;
        width: 100%;
    }

    #menu_principal 
    {
        text-transform: uppercase;
        text-align: center; /* centre le texte */
        font-size: 20px;
    }

    #menu_principal li 
    {
        display: inline; /* Aligne les liens du menu */
        list-style: none; /* Nécessaire pour IE7 */
        font-weight: normal;
    }

    #menu_principal_smartphone, #menu_principal_toggle 
    {
        display: none;
    }

    #menu_rs 
    {
        padding: 0.5em 1em;
        position: fixed;
        right: 0em;
    }

    #menu_rs img
    {
        width: 40px;
        height: 40px;
    }

    #menu_rs li
    {
        display: inline;
    }

    #logo 
    {
        width: 50em;
        height: auto;
        margin: 5em 0em;
    }

    #pied_de_page 
    {
        color: var(--couleur-intermediaire);
        font-size: 10px;
        cursor: default;
    }

    #pied_de_page a 
    {
        text-decoration: none;
        color: var(--couleur-intermediaire);
        cursor: default;
    }

    #section_principale 
    {
        background: var(--filtre-assombrissant), linear-gradient(180deg, var(--couleur-intermediaire) 10%, var(--couleur-de-fond-principale) 60%); /* Création d'un dégradé de couleur pour le fond de page. Par défaut, la première couleur débute en bas et la seconde en haut. Pour corriger cet effet, on définit un angle de 180° en premier paramètre */
        padding: 4em 0em 2em 0em
    }

    #section_principale_contenu
    {
        width: 70%;
        margin: 0 auto;
        padding: 2em 1em;
        text-align: justify;
    }

    #titre_de_page
    {
        text-align: center; /* centre le texte */
        margin-bottom: 10em;
    }

    #titre_de_page_1 
    {
        text-transform: uppercase; /* Force les lettres en majuscule */
        font-size: 4em; /* Définit la taille des caractères */
        font-family: 'Roboto', sans-serif; /* On définit la police d'écriture */
        letter-spacing: 6px; /* Définit l'espacement entre les caractères d'un mot */
        margin: 0.2em 0em 0.4em 0em;
        font-weight: bold; /* Met les caractères en gras */
        text-shadow: 2px 0 0 var(--couleur-de-fond-principale), 2px 2px 0 var(--couleur-de-fond-principale), 0 2px 0 var(--couleur-de-fond-principale), -2px 2px 0 var(--couleur-de-fond-principale), -2px 0 0 var(--couleur-de-fond-principale), -2px -2px 0 var(--couleur-de-fond-principale), 0 -2px 0 var(--couleur-de-fond-principale), 2px -2px 0 var(--couleur-de-fond-principale);
    }

    #titre_de_page_2 
    {
        font-family: 'ABeeZee', sans-serif; /* On définit la police d'écriture */
        letter-spacing: -1px; /* Définit l'espacement entre les caractères d'un mot */
        width: 80%;
        margin: 0 auto;
        text-align: center;
        /*background: var(--couleur-de-fond-principale); /* On définit la couleur de fond */
        text-shadow: 2px 0 0 var(--couleur-de-fond-principale), 2px 2px 0 var(--couleur-de-fond-principale), 0 2px 0 var(--couleur-de-fond-principale), -2px 2px 0 var(--couleur-de-fond-principale), -2px 0 0 var(--couleur-de-fond-principale), -2px -2px 0 var(--couleur-de-fond-principale), 0 -2px 0 var(--couleur-de-fond-principale), 2px -2px 0 var(--couleur-de-fond-principale);
        font-size: 24px;
    }

    /* Style appliqué par class */

    .alert_info 
    {
        padding: 2em;
        background: var(--couleur-intermediaire-sombre);
        border-radius: 20px;
        border: 1px solid var(--couleur-intermediaire-sombre);
        box-shadow: 0px 0px 40px var(--couleur-de-fond-principale) inset, 3px 3px 10px var(--couleur-de-fond-principale);
        margin: 2em 0em;
        text-shadow: 1px 1px 0px var(--couleur-intermediaire), 3px 3px 5px var(--couleur-de-fond-principale);
    }

    .assemblage_input 
    {
        white-space: nowrap;
        display: inline-flex;
        margin-bottom: 1em;
    }

    .centrage_elements
    {
        text-align: center;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin-bottom: 1em;
    }

    .centrage_elements p 
    {
        text-align: justify;
        padding: 1em;
    }

    .coordonnees
    {
        margin-bottom: -1em;
        font-size: 12px;
        width: 26em;
    }

    .largeur_1_tier 
    {
        display: inline-flex;
        flex-direction: column;
        margin-bottom: 2em;
    }

    .largeur_2_tiers 
    {
        width: 40em;
        min-height: 20em;
    }

    .lien_image 
    {
        display: inline-flex;
        flex-basis: 26em;
        margin-bottom: 2em;
        border-radius: 10px;
        transition: background 0.4s linear, box-shadow 0.4s linear; /* On définit une durée de transition lorsque le fond et le controu doivent changer de couleur */
    }

    .lien_image:hover 
    {
        background: var(--couleur-intermediaire-sombre);
        box-shadow: 0px 0px 40px var(--couleur-de-fond-principale) inset, 3px 3px 10px var(--couleur-intermediaire-sombre);
    }

    .lien_image a 
    {
        color: var(--couleur-texte-principale);
        text-decoration: none;
    }

    .lien_image div 
    {
        background-size: cover;
        border-radius: 10px;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 1.5em;
        text-shadow: 2px 0 0 var(--couleur-de-fond-principale), 2px 1px 0 var(--couleur-de-fond-principale), 0 2px 0 var(--couleur-de-fond-principale), -2px 2px 0 var(--couleur-de-fond-principale), -2px 0 0 var(--couleur-de-fond-principale), -2px -2px 0 var(--couleur-de-fond-principale), 0 -2px 0 var(--couleur-de-fond-principale), 2px -2px 0 var(--couleur-de-fond-principale);
        padding: 6em 0em;
        margin: 0 auto;
        transition: color 0.2s linear, text-shadow 0.2s linear; /* On définit une durée de transition lorsque le fond et le contour du texte doivent changer de couleur */
    }

    .lien_image:hover div 
    {
        color: var(--couleur-intermediaire-sombre);
        text-shadow: 2px 0 0 var(--couleur-texte-principale), 2px 1px 0 var(--couleur-texte-principale), 0 2px 0 var(--couleur-texte-principale), -2px 2px 0 var(--couleur-texte-principale), -2px 0 0 var(--couleur-texte-principale), -2px -2px 0 var(--couleur-texte-principale), 0 -2px 0 var(--couleur-texte-principale), 2px -2px 0 var(--couleur-texte-principale);
    }

    .link_rs:hover 
    {
        
    }

    .link_en_tete 
    {
        text-decoration: none; /* On retire les effet de lien par défaut */
        color: var(--couleur-de-fond-principale);
        border-radius: 50px;
        background: var(--couleur-texte-principale);
        text-transform: uppercase; /* Force les caractères en majuscule */
        font-family: 'Roboto', sans-serif; /* On définit la police d'écriture */
        margin: 1em;
        padding: 1em 2em;
        font-size: 0.9em;
        white-space: nowrap; /* Force les éléments à rester sur la même ligne */
        transition: background 0.4s linear; /* On définit une durée de transition lorsque le fond doit changer de couleur */
    }

    .link_en_tete:hover 
    {
        background: var(--couleur-intermediaire);
    }

    .link_principal 
    {
        text-decoration: none; /* On retire les effet de lien par défaut */
        color: var(--couleur-texte-principale); /* On définit la couleur du texte */
        text-shadow: 0px 5px 5px #000, 5px 5px 10px #000;
        margin: 0em 1em 0em 1em;
        letter-spacing: 1px; /* Définit l'espacement entre les caractères d'un mot */
        transition: color 0.1s linear; /* On définit une durée de transition lorsque le fond doit changer de couleur */
        font-size: 1.2em;
    }

    .link_principal:hover 
    {
        color: var(--couleur-intermediaire);
    }

    .mail 
    {
        display: block;
        text-align: center;
        font-style: italic;
        text-decoration: underline;
        margin-top: 1em;
        word-wrap: break-word;
    }

    .notes 
    {
        font-size: 12px;
        text-align: left;
    }

    .separateur_triangle 
    {
        bottom: 0;
        left: 0;
        overflow: hidden;
        line-height: 0;
    }

    .separateur_triangle svg 
    {
        display: block;
        width: calc(100% + 1.3px);
        height: auto;
    }

    .separateur_triangle .shape-fill 
    {
        fill: var(--couleur-intermediaire-sombre);
    }
}

/* Déclaration pour petits écrans (inférieurs a 991px de large */

@media all and (max-width: 991px)
{
    /* Style appliqué par ID */

    #linkContact {
        animation: 1s ease-out 0s 1 alternate opacity_links;
    }

    #linkEnSavoirPlus {
        animation: 1s linear 0s 1 alternate opacity_links;
    }

    #linkRapides li {
        display: block;
        margin-bottom: 4em;
    }

    #logo {
        width: 80%;
        padding-top: 0em;
    }

    #menu_principal {
        display: none;
    }

    #menu_principal_smartphone {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        font-size: 40px;
        color: white;
        cursor: pointer;
    }

    #menu_principal_toggle:checked + #menu_principal {
        display: block;
        padding-top: 1em;
        position: absolute;
        left: 50%;
        margin-top: 1em;
        transform: translate(-50%);
        text-align: left;
        font-size: 20px;
        border: 1px solid var(--couleur-intermediaire-sombre);
        border-radius: 5px;
        box-shadow: 0px 0px 40px var(--couleur-de-fond-principale) inset, 3px 3px 10px var(--couleur-de-fond-principale);
        background: linear-gradient(rgba(200, 200, 200, 0.5), rgba(0, 0, 0, 0.5)), var(--couleur-de-fond-principale);
    }

    #menu_principal_toggle:checked + #menu_principal li {
            display: block;
            margin-bottom: 1.5em;
        }

    #titre_de_page_1 {
        text-transform: uppercase; /* Force les lettres en majuscule */
        font-size: 200%; /* Définit la taille des caractères */
        font-family: 'Roboto', sans-serif; /* On définit la police d'écriture */
        letter-spacing: 6px; /* Définit l'espacement entre les caractères d'un mot */
        margin: 0.2em 0em 0.4em 0em;
        font-weight: bold; /* Met les caractères en gras */
        text-shadow: 2px 0 0 var(--couleur-de-fond-principale), 2px 2px 0 var(--couleur-de-fond-principale), 0 2px 0 var(--couleur-de-fond-principale), -2px 2px 0 var(--couleur-de-fond-principale), -2px 0 0 var(--couleur-de-fond-principale), -2px -2px 0 var(--couleur-de-fond-principale), 0 -2px 0 var(--couleur-de-fond-principale), 2px -2px 0 var(--couleur-de-fond-principale);
    }

    /* Style appliqué par class */
}