/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 8 oct. 2018, 08:15:16
    Author     : serge
*/

/** 
 *   Page d'accueil
 */    
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #ffffcc;
}

/**
 * Menu principal
 */

#logo {
    width: 20%;
}

#logoMenu {
    width: 7em;
    display: inline-block;
    background-color: white;
    padding: 0.5em;
    margin: 0.2em;
}

header {
    width: 96%;
    left: 2%;
    background-color: white;
    position: fixed;
    z-index: 100;
    border: 1px solid black;
    border-radius: 1em;
    margin-top: 0.2em;
}

ul {
    margin: 0px;
    padding: 0px;
}

.nav {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    height: 3em;
}

nav.navigation {
    width: 80%;
}

.nav li {
    width: 25%;
    height: 3em;
    text-align: center;
    line-height: 3em;
}

.nav li:last-child {
    /*line-height: 1.5em;*/
} 

.head {
    height: 100%;
    margin: auto;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    align-items: center;
    flex-wrap: wrap;
}

.nav-link {
    padding: 0 1.5em;
    text-shadow: 2px 2px 2px #000;
    font-size: 1.15em;
}

.burger-menu {
    display: none;
}
    
.input-burger {
    display: none;
}

/* Les rubriques du menu principal */
.accueil {
    color: red;
}

.accueil:hover {
    color: #ff9f9f;
}

.prestations {
    color: #0080ff;
}

.prestations:hover {
    color: #93c8ff;
}

.contact {
    color: yellow;
}

.contact:hover {
    color: #fffbb7;
}

.bidouilleur {
    color: #2ecb21;
}

.bidouilleur:hover {
    color: #8aff81;
}

/* Utilisation de fontawesome */
@font-face {
    font-family: 'FontAwesome';
    src: url('?a=getFontAS_eot');
    src: url('?a=getFontAS_eot&#iefix') format('embedded-opentype'),
         url('?a=getFontAS_woff') format('woff'),
         url('?a=getFontAS_ttf') format('truetype'),
         url('?a=getFontAS_svg&#FontAwesome') format('svg');
    font-weight: normal;
    font-style: normal;
}

.fa {
    display: inline-block;
    font: normal normal normal 18px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #5cadd3;
    vertical-align: middle;
}

.fa-eye:before {
    content: "\f06e";
    color: #fff;
    font-size: 14px;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%,-50%);
}

/* Page standard */
#page {
    min-height: 100%;
    margin: 0;
    padding: 0;
    padding-top: 5em;
    text-align: center;
/*    background-color: #ffffcc;*/
}

h1.titre {
    font-size: 2.5em;
    text-shadow: 0.08em 0.08em 0.15em #000;
    margin-top: 2em;
}

fieldset {
    width: 90%;
    display: block;
    margin: auto;
    border: 0.25em solid gray;
    border-radius: 1.5em; 
    text-align: left;
    padding: 1em;
    padding-left: 2em;
}

fieldset legend {
    font-size: 1.5em;
    margin-left: 2em;
    margin-bottom: 0;
    width: initial;
    font-weight: bold;
    text-align: left;
    padding: 0.5em;
    text-shadow: 0.08em 0.08em 0.15em #555;
}

/**
 * Objets généraux
 */

/**
 * Fenêtre de confirmation
 */

.fenMessage {
    position: absolute;
    width: 50%;
    max-height: 40%;
    top: 30%;
    left: 25%;
    border: 1px solid black;
    border-radius: 2em;
    padding: 1em;
    z-index: 100;
    box-shadow: 0.5em 0.5em 0.5em gray;
}

.fenMessage h1.titre {
    margin-top: 0.5em;
}

.fenMessage button {
    border-radius: 0.5em;
    font-size: 1.5em;
}

#fenMessageOK {
    background-color: #ffffac;
}

#fenMessageKO {
    background-color: #ff9999;
}

/**
 * page d'erreur
 */

h1.erreur {
   color: red;
   margin-top: 3em;
}

a.erreur {
    color: #ff4444;
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: none;
}

a.erreur:hover {
    color: #bb0000;
}    

p.erreur {
    font-size: 1.5em;
}

/**
 * page confirmation
 */

h1.confirmation {
   color: green;
   margin-top: 3em;
   margin-bottom: 2em;
}

a.confirmation {
    color: #44cc44;
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: none;
}

p.confirmation {
    font-size: 1.5em;
}

/**
 * Page en construction
 */

h1.enconstruction {
    margin-top: 5em;
    font-size: 1.5em;
}

/** 
 *   Page home
 */      
#accueil {
    height: 30%;
    position: absolute;
    top: 35%;
    width: 100%;    
}

#logoHome {
    height: 100%;
    margin-top: -4em;
    margin-bottom: 4em;
}

#accueil p {
    text-align: justify;
    margin-left: 20%;
    margin-right: 20%;
    padding: 1em;
    border: 1px solid black;
    border-radius: 1em;
}

/* Mon nom */
#accueil p:last-child { 
    text-align: right;
    border: 0px;
    margin-bottom: 1em;
}

/**
 *  Page prestations
 */

ul.theme {
    font-size: 2em;
    padding-left: 1em;
}

li.developpement {
    list-style-image: url('?a=getSVG&f=logo-developpement&h=2em&w=2em');
}

li.developpement li, li.systeme li, li.numerique li {
    list-style-image: none;
    font-size: 0.75em;
}

li.systeme {
    list-style-image: url('?a=getSVG&f=logo-sysreseau&h=2em&w=2em');
}

li.numerique {
    list-style-image: url('?a=getSVG&f=logo-numerique&h=2em&w=2em');
}

#info {
    position: fixed;
    width: 50%;
    height: 75%;
    top: 12.5%;
    left: 25%;
    border: 1px solid black;
    border-radius: 2em;
    background-color: #ffffac;
    z-index: 100;
    padding: 1em;
    display: none;
    box-shadow: 0.5em 0.5em 0.5em gray;
    overflow-y: auto; 
}

#info h1 {
    font-size: 1.5em;
}

#texteInfo {
    width: 100%;
    font-size: 1.2em;
    text-align: justify;
    overflow: auto;
    height: 50%;
    border: 1px solid black;
    padding: 1em;
}

#formInfos {
    display: flex;
    width: 100%;
}

#formInfos button {
    border-radius: 0.5em;
    font-size: 1.5em;
}

#prestationsform {
    width: 100%;
    font-size: 1.1em;
    margin: auto;
    text-align: justify;
}

#prestationsform p {
    text-align: right;
}

#prestationsform > p:first-child {
    text-align: center;
}

#prestationsform p:last-child {
    display: flex;
}

#prestationsform p:last-child button {
    margin: auto;
}    

span.info {
    cursor: pointer;
    font-weight: bold;
    border-radius: 50%;
    padding-left: 0.3em;
    padding-right: 0.3em;
    padding-top: 0.1em;
    border: 1px solid black;
    margin-left: 2em;
}

span.info:hover {
    color: red;
    background-color: yellow;
}

.sortable {
    list-style-type: none;
    margin: 0;
    padding-left: 1%;
    padding-right: 1%;
}

.sortable li {
    margin: 1%;
    padding: 0;
    float: left;
    width: 31%;
    height: 250%;
    font-size: 1em;
    text-align: center;
    line-height: 250%;
    cursor:pointer;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    background-color: #ff9900;
    color: black;
    font-weight: normal;
}

.captcha_wrap {
    border: 1px solid #fff;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    float: left;
    height: 100%;
    overflow: auto;
    width: 25%;
    overflow: hidden;
    background-color: #fff;
}

#captchaPrestations {
    display: inline-block;
    margin-right: 1em;
    width: 30%;
}

.captcha {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    font-size: 12px;
    color: black;
    text-align: center;
    border-bottom: 1px solid #CCC;
    background-color: #fff;
}

#formDemandeInfos {
    width: 100%;
}

#formDemandeInfos p {
    width: 100%;
    text-align: left;
    margin: 0;
}

#formDemandeInfos input[type=text], #formDemandeInfos input[type=email] {
    width: 100%;
    display: block;
}

#formDemandeInfos input[type=email]:last-child {
    margin-bottom: 0.5em;
}

/**
 *  Page contact
 */

#formContact p {
    display: grid;
}

#formContact > p:last-child {
    display: block;
}

#formContact p input[type=text], #formContact p input[type=email] {
    width: 100%;
}

#message {
    min-width: 100%;
    max-width: 100%;
}

#captchaContact {
    width: 50%;
    margin-bottom: 3em;
    margin-top: 1em;
}

#formContact {
     width: 48%; 
     display: inline-block; 
     float: left;
     margin-right: 2%;
}

#captchaContact .sortable li{
    background-color:#ffff99;
}

button.soummission {
    border-radius: 0.5em;
    font-size: 1.5em;
}

/**
 *  Page Coin du bidouilleur
 */

p.intro {
    margin: 3em;
    text-align: justify;
}

fieldset:last-child {
    margin-bottom: 1em;
}

a.lienfichierdoc {
    display: block;
    color: black;
}

a.lienfichierdoc:hover {
    color: white;
    background-color: gray;
    text-decoration: none;
    font-weight: plain;
    padding: 0.2em;
}

a.adminoc {
    display: block;
    font-size: 2em;
}

#message {
    height: 10em;
}