/*
      * Couleurs du site
      */

 .couleurPrincipale {
     color: #B5A1AE;
 }

.bgCouleurPrincipale {
    background-color: #B5A1AE;
}

.couleurSecondaire {
    color: #ECECEC;
}

.bgCouleurSecondaire {
    background-color: #ECECEC;
}

.couleurNoir {
    color: #000;
}

.couleurBlanc {
    color: #FFF;
}

.bgCouleurNoir {
    background-color: #000;
}

.bgCouleurBlanc {
    background-color: #FFF;
}

.colorEspace1 {
    color: #1FB689 !important;
}

.space-1:hover {
    color: #1FB689;
}

.bgEspace1 {
    background-color: #1FB689;
}

.colorEspace2 {
    color: #EE7661 !important;
}

.space-2:hover {
    color: #EE7661;
}

.bgEspace2 {
    background-color: #EE7661;
}

.colorEspace3 {
    color: #2DB7C3 !important;
}

.space-3:hover {
    color: #2DB7C3;
}

.bgEspace3 {
    background-color: #2DB7C3;
}

.colorEspace4 {
    color: #F7AA4F !important;
}

.space-4:hover {
    color: #F7AA4F;
}

.bgEspace4 {
    background-color: #F7AA4F;
}


/*
 * Couleurs des espaces
 */
/* ESPACE 1 - Définitions et méthodes */
.espace-1 {
    background-color: hsl(
    162,
    71%,
    42%);
}

.espace-1-sous-fiche-1 {
    background-color: hsl(
    162,
    71%,
    47%);
}

.espace-1-sous-fiche-2 {
    background-color: hsl(
    162,
    71%,
    52%);
}

.espace-1-sous-fiche-3 {
    background-color: hsl(
    162,
    71%,
    57%);
}

.espace-1-sous-fiche-4 {
    background-color: hsl(
    162,
    71%,
    62%);
}

.espace-1-sous-fiche-5 {
    background-color: hsl(
    162,
    71%,
    67%);
}

.espace-1-sous-fiche-6 {
    background-color: hsl(
    162,
    71%,
    72%);
}

.espace-1-sous-fiche-7 {
    background-color: hsl(
    162,
    71%,
    77%);
}

.espace-1-sous-fiche-8 {
    background-color: hsl(
    162,
    71%,
    82%);
}


/* ESPACE 2 - Données quantitatives */
.espace-2 {
    background-color: hsl(
    9,
    81%,
    65.5%);
}

.espace-2-sous-fiche-1 {
    background-color: hsl(
    9,
    81%,
    69%);
}

.espace-2-sous-fiche-2 {
    background-color: hsl(
    9,
    81%,
    72.5%);
}

.espace-2-sous-fiche-3 {
    background-color: hsl(
    9,
    81%,
    76%);
}

.espace-2-sous-fiche-4 {
    background-color: hsl(
    9,
    81%,
    79.5%);
}

.espace-2-sous-fiche-5 {
    background-color: hsl(
    9,
    81%,
    83%);
}

.espace-2-sous-fiche-6 {
    background-color: hsl(
    9,
    81%,
    86.5%);
}

.espace-2-sous-fiche-7 {
    background-color: hsl(
    9,
    81%,
    90%);
}

.espace-2-sous-fiche-8 {
    background-color: hsl(
    9,
    81%,
    93.5%);
}

/* ESPACE 3 - Observations de terrain */
.espace-3 {
    background-color: hsl(
    185,
    62.5%,
    47%);
}

.espace-3-sous-fiche-1 {
    background-color: hsl(
    185,
    62.5%,
    52%);
}

.espace-3-sous-fiche-2 {
    background-color: hsl(
    185,
    62.5%,
    57%);
}

.espace-3-sous-fiche-3 {
    background-color: hsl(
    185,
    62.5%,
    62%);
}

.espace-3-sous-fiche-4 {
    background-color: hsl(
    185,
    62.5%,
    67%);
}

.espace-3-sous-fiche-5 {
    background-color: hsl(
    185,
    62.5%,
    72%);
}

.espace-3-sous-fiche-6 {
    background-color: hsl(
    185,
    62.5%,
    77%);
}

.espace-3-sous-fiche-7 {
    background-color: hsl(
    185,
    62.5%,
    82%);
}

.espace-3-sous-fiche-8 {
    background-color: hsl(
    185,
    62.5%,
    87%);
}


/* ESPACE 4 - Définition et méthode */
.espace-4 {
    background-color: hsl(
    33,
    91%,
    64%);
}

.espace-4-sous-fiche-1 {
    background-color: hsl(
    33,
    91%,
    67.5%);
}

.espace-4-sous-fiche-2 {
    background-color: hsl(
    33,
    91%,
    71%);
}

.espace-4-sous-fiche-3 {
    background-color: hsl(
    33,
    91%,
    74.5%);
}

.espace-4-sous-fiche-4 {
    background-color: hsl(
    33,
    91%,
    78%);
}

.espace-4-sous-fiche-5 {
    background-color: hsl(
    33,
    91%,
    81.5%);
}

.espace-4-sous-fiche-6 {
    background-color: hsl(
    33,
    91%,
    85%);
}

.espace-4-sous-fiche-7 {
    background-color: hsl(
    33,
    91%,
    88.5%);
}

.espace-4-sous-fiche-8 {
    background-color: hsl(
    33,
    91%,
    92%);
}

/*
 * Styles génériques
 */

/* Bordures */
.border-top {
    border-top: 1px solid #000;
}

.border-bottom {
    border-bottom: 1px solid #000;
}

.border-right {
    border-right: 1px solid #000;
}

.border-left {
    border-left: 1px solid #000;
}

/* Padding */

.padding-0 {
    padding: 0;
}

.padding-top-10 {
    padding-top: 10px;
}

.padding-top-15 {
    padding-top: 15px;
}

.padding-top-20 {
    padding-top: 20px;
}

.padding-top-25 {
    padding-top: 25px;
}

.padding-top-30 {
    padding-top: 30px;
}

.padding-bottom-10 {
    padding-bottom: 10px;
}

.padding-bottom-15 {
    padding-bottom: 15px;
}

.padding-bottom-20 {
    padding-bottom: 20px;
}

.padding-bottom-25 {
    padding-bottom: 25px;
}

.padding-bottom-30 {
    padding-bottom: 30px;
}

.padding-right-10 {
    padding-right: 10px;
}

.padding-right-15 {
    padding-right: 15px;
}

.padding-right-20 {
    padding-right: 20px;
}

.padding-right-25 {
    padding-right: 25px;
}

.padding-right-30 {
    padding-right: 30px;
}

.padding-left-10 {
    padding-left: 10px;
}

.padding-left-15 {
    padding-left: 15px;
}

.padding-left-20 {
    padding-left: 20px;
}

.padding-left-25 {
    padding-left: 25px;
}

.padding-left-30 {
    padding-left: 30px;
}

.margin-bottom-5 {
    margin-bottom: 5px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-top-30 {
    margin-top: 30px;
}

.margin-top-50 {
    margin-top: 50px;
}

.margin-top-100 {
    margin-top: 100px;
}

.margin-top-200 {
    margin-top: 200px;
}

/* texte */
.bold {
    font-weight: bold;
}

/* images */
.image {
    padding: 0;
}

/* boutons */
.btn {
    border-radius: 0;
}

/* positionnement */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/*
 * Mise en forme éléments de page
 */

@font-face {
    font-family: 'Futura';
    src: url('/fonts/futura/FuturaLT-Book.eot');
    src: url('/fonts/futura/FuturaLT-Book.woff2') format('woff2'),
    url('/fonts/futura/FuturaLT-Book.woff') format('woff'),
    url('/fonts/futura/FuturaLT-Book.ttf') format('truetype'),
    url('/fonts/futura/FuturaLT-Book.svg#FuturaLT-Book') format('svg'),
    url('/fonts/futura/FuturaLT-Book.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Futura';
    src: url('/fonts/futura-bold/FuturaLT-Bold.eot');
    src: url('/fonts/futura-bold/FuturaLT-Bold.woff2') format('woff2'),
    url('/fonts/futura-bold/FuturaLT-Bold.woff') format('woff'),
    url('/fonts/futura-bold/FuturaLT-Bold.ttf') format('truetype'),
    url('/fonts/futura-bold/FuturaLT-Bold.svg#FuturaLT-Bold') format('svg'),
    url('/fonts/futura-bold/FuturaLT-Bold.eot?#iefix') format('embedded-opentype');
    font-weight: bold;
    font-style: normal;
}

html, body {
    margin: 0;
    height: 100%;
    color: #000;
}

body {
    font-family: "Futura";
    font-size: 1.4em;
}

header {
    margin-top: 50px;
}

img {
    max-width: 100%;
}

section {
    margin-bottom: 60px;
}

h1 {
    font-size: 1em;
    margin: 0;
    height: 40px;
    line-height: 40px;
}

/* formulaires */
.form-control {
    border-radius: 0;
}

/* éléments header + nav */
#container-titre {
    padding-left: 0;
}

#visage {
    max-height: 40px;
}

.titre-site {
    font-size: 3em;
    margin-bottom: 0;
    margin-top: 0;
    line-height: 1;
}

.titre-site a {
    text-decoration: none;
    color: #000;
}

.sous-titre-site {
    margin-top: 0;
    font-size: 1.5em;
    color: #B5A1AE;
}

.nav-item-1 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    color: #000;
    font-size: 1.1em;
}

.nav-item-1:hover {
    color: #B5A1AE;
    text-decoration: none;
}

.nav-item-2 {
    height: 30px;
    line-height: 30px;
    border-bottom: 2px solid #FFF;
    padding-left: 10px;
}

.nav-item-2:hover {
    background-color: #FFF;
}

.nav-link {
    color: #000;
    display: inline-block;
    width: 100%;
}

.nav-link:hover {
    color: #000;
    text-decoration: none;
}

.nav-link:visited {
    color: #000;
    text-decoration: none;
}

#nav-documentation {
    position: relative;
    cursor: pointer;
}

#nav-espaces {
    position: absolute;
    width: 91.3%;
    z-index: 99;
}

#connect, #disconnect {
    display: inline-block;
    width: 100%;
    border: 1px solid #B5A1AE;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 1.1em;
}

#connect:hover, #disconnect:hover {
    color: #B5A1AE;
    background-color: #FFF;
    text-decoration: none;
    cursor: pointer;
}

#inscription-container {
    position: relative;
    height: 40px;
}

#inscription-contact {
    font-size: 0.9em;
    position: absolute;
    bottom: 0;
}

#inscription-contact a {
    color: #000;
}

#inscription-contact a:hover {
    color: #000;
}

.titre-chapitre {
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    height: 50px;
    line-height: 50px;
    text-align: right;
}

footer {
    margin-top: 100px;
}

#footer-content {
    font-size: 1em;
    margin-bottom: 10px;
}

.flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-25 {
    width: 25%;
    padding: 0 15px;
}

.flex-50 {
    width: 50%;
    padding: 0 15px;
}

#titre-footer {
    font-size: 1.7em;
    padding-right: 0;
    margin-bottom: 10px;
    text-align: right;
}

#partenaires {
}

#social-links {
    min-height: 200px;
}

#credits-container {
    position: relative;
}

#credits {
    font-size: 0.8em;
    position: absolute;
    bottom: 0;
}

footer a {
    color: #000;
}

footer a:hover {
    color: #000;
}

#download-footer {
    padding-top: 20px;
    max-width: 75px;
}

#top-image {
    margin-top: 40px;
    margin-bottom: 20px;
}

#top-image img {
    max-width: 100%;
}

#top-image .blank {
    height: 20px;
}
#video-accueil {
    margin-top: 20px;
}
#actualites {
    margin-top: 30px;
}

.article-content a {
    color: #1FB689;
}

.article-content a:hover {
    text-decoration: none;
}


#presentation-titre, #actualites-titre, #espace-documentation {
    height: 40px;
    line-height: 40px;
    border: 1px solid #000;
    border-right: 0;
    padding-right: 0;
}

#documentation-titre {
    border: 1px solid #000;
    border-right: 0;
    padding: 10px 0;
    padding-left: 15px;
}

#video {
    padding: 15px 0;
}

video {
    width: 100%;
}

#presentation-text {
    margin: 0;
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 1.2em;
    color: #1FB689;
}

#documentation {
    margin-top: 30px;
}

#documentation img {
    max-width: 60%;
}

.link-espace {
    width: 100%;
    height: 0;
    padding-top: 100%;
    position: relative;
}

.link-espace a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    padding: 30px;
    color: #000;
    font-size: 1.1em;
}

.link-espace a:hover {
    background-color: #FFF;
}

.accesEspace1 {
    background-color: #1FB689;
    border: 1px solid #1FB689;
}

.accesEspace2 {
    background-color: #EE7661;
    border: 1px solid #EE7661;
}

.accesEspace3 {
    background-color: #2DB7C3;
    border: 1px solid #2DB7C3;
}

.accesEspace4 {
    background-color: #F7AA4F;
    border: 1px solid #F7AA4F;
}

#icone-epsace1 {
    padding-bottom: 10px;
}

#icone-epsace2 {
    padding-bottom: 14.2833px;
}

#icone-epsace3 {
    padding-bottom: 22.4833px;
}

#icone-epsace4 {
    padding-bottom: 13.8667px;
}

#img-personnages {
    padding-top: 30px;
}

.article {
    border-bottom: 1px solid #000;
}

.article-content {
    padding-bottom: 20px;
}

.article-titre {
    padding-bottom: 10px;
    font-weight: bold;
    font-size: 1.5em;
    color: #EE7661;
}

#voir-moins {
    display: none;
}

#voir-plus, #voir-moins {
    cursor: pointer;
    margin-top: 20px;
    position: relative;
    width: 48px;
    height: 24px;
}



#masque-sous-gauche, #masque-sur-gauche, #masque-sous-droite, #masque-sur-droite, #masque-moins-sous-gauche, #masque-moins-sur-gauche, #masque-moins-sous-droite, #masque-moins-sur-droite {
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    top:0;
}

#masque-sous-gauche {
    left: 0;
    border: 12px solid transparent;
    border-top-color: #000;
    border-right-color: #000;
}

#masque-sur-gauche {
    top: -2px;
    left: 0;
    border: 12px solid #FFF;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

#masque-moins-sous-gauche {
    left: 0;
    border: 12px solid transparent;
    border-bottom-color: #000;
    border-right-color: #000;
}

#masque-moins-sur-gauche {
    top: 2px;
    left: 0;
    border: 12px solid #FFF;
    border-top-color: transparent;
    border-left-color: transparent;
}

#masque-sous-droite {
    left: 24px;
    border: 12px solid transparent;
    border-top-color: #000;
    border-left-color: #000;
}

#masque-sur-droite {
    top: -2px;
    left: 24px;
    border: 12px solid #FFF;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

#masque-moins-sous-droite {
    left: 24px;
    border: 12px solid transparent;
    border-bottom-color: #000;
    border-left-color: #000;
}

#masque-moins-sur-droite {
    top: 2px;
    left: 24px;
    border: 12px solid #FFF;
    border-top-color: transparent;
    border-right-color: transparent;
}

.bloc-documentation {
    padding: 0px;
}

.espace-titre {
    height: 150px;
    background-color: #B5A1AE;
    border-bottom: 5px solid #FFF;
}

#espace-logo-titre {
    width: 110px;
    padding-top: 20px;
}

.espace-titre-content {
    padding-top: 20px;
}

.titre-premier-mot {
    color: #FFF;
}

.titre-suite {
    color: #000;
}

.titre-premier-mot, .titre-suite {
    font-weight: bold;
    font-size: 3em;
}

.espace-fleche-bas {
    position: absolute;
    top: 0;
    right: 50px;
    width: 70px;
    cursor: pointer;
}

.espace-fleche-haut {
    position: absolute;
    bottom: 0;
    right: 50px;
    width: 70px;
    cursor: pointer;
}

.fiche-numero {
    display: inline-block;
    background-color: #000;
    width: 60px;
    height: 60px;
    color: #FFF;
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    font-size: 2.5em;
    margin-left:15px;
}

.titre-fiche {
    display: inline-block;
    padding-left: 20px;
    color: #000;
    font-size: 2em;
    line-height:60px;
}

.resume {
    padding-top: 10px;
}

.titre-resume {
    color: #FFF;
    font-weight: bold;
}

/*
 * Mise en forme des div fiches et sous-fiches
 */

.item-space a {
    color: #000;
}

.item-space a:hover {
    text-decoration: none;
}

.fiche {
    border-bottom: 5px solid #FFF;
    padding: 15px;
}

.fiche:hover {
    cursor: pointer;
}

.fiche-download {
    color: #000;
}

.fiche-download:hover {
    color: #000;
}

.sous-fiche {
    min-height: 100px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    border-bottom: 5px solid #FFF;
    color: #000;
    font-size: 1.3em;
    padding-left: 25px;
}

.sous-fiche-titre {
    margin-top: auto;
    margin-bottom: auto;
}

.download-sous-fiche {
    margin: auto;
}

.link-download-sous-fiche {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.4em;
    color: #000;
}

.link-download-sous-fiche:hover {
    color: #000;
}

.img-download-sous-fiche {
    width: 40px;
    padding-bottom: 5px;
}

#espace {
    margin-top: 30px;
}

/* modale de connexion */
#modal-connect {
    display: none;
    z-index: 52;
    position: fixed;
    background-color: #B5A1AE;
    width: 80%;
    top: 10%;
    height: 80%;
    left: 10%;
}

#modal-connect .form-control {
    border: 0;
}

#modal-connect .control-label {
    text-align: left;
}

#modal-connect .btn {
    background: #000;
    border: 0;
    width: 100%;
    height: 34px;
}

#modal-connect label {
    font-weight: normal;
    font-size: 1.2em;
}

#connect-title {
    font-size: 2em;
}

#close-modale {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 40px;
    z-index: 53;
}

#modal-connect-content {
    margin-top: 10%;
}

#close-modale:hover {
    cursor: pointer;
}

#opacity {
    z-index: 50;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    position: fixed;
    background-color: #333;
    opacity: 0.8;
}

#intro-connect {
    margin-top: 75px;
}

/* Formulaire de contact */
#group-user {
    display: none !important;
}

#mentions-legales a {
    color: #000;
}

#partenaires, #mentions-legales, #contact, #formations {
    margin-top: 20px;
}

.partenaire-link:hover {
    text-decoration: none;
}

#documentation-titre-xs, #actualites-titre-xs, #presentation-titre-xs {
    text-align: center;
    border: 1px solid #000;
    border-left: 0;
    border-right: 0;
    height: 40px;
    line-height: 40px;
    margin-bottom: 10px;
}

#titre-page-doc {
    text-align: center;
    border: 1px solid #000;
    border-left: 0;
    border-right: 0;
    height: 40px;
    line-height: 40px;
    font-size: 1.3em;
}

#liste-espaces-container {
    min-height: 80px;
    line-height: 80px;
}

.link-espace-xs a {
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 40px;
    color: #000;
}

.link-espace-xs {
    padding: 5px;
    height: 50px;
}

h2 {
    font-size: 1em;
    margin: 0;
}

#titre-page-accueil {
    height:0;
    color: white;
}

.titre-legale, .titre-partenaire {
    font-size: 2em !important;
    font-weight: bold;
    margin-top: 25px;
}

#logo {
    max-width: 100%;
}

#first-brochure-link {
    font-size: 0.9em;
    color: #EE7661;
}

#first-brochure-link:hover {
    text-decoration: none;
    color: #1FB689;
}

/*
 * mise en forme des file upload
 */
input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}

input[type="file"]:hover {
    cursor: pointer;
}

.input-file {
    display: inline-block;
    position: relative;
    overflow: hidden;
    padding: 0;
}

.label-file {
    display: inline-block;
    padding: 6px 12px;
    margin: 0;
    font-weight: normal;
    color: white;
    background-color: #337ab7;
}

input[type="file"]:hover + .label-file {
    background-color: #286090;
    border-color: #204d74;
}

#mode-emploi {
    font-size: 1.2em;
    margin: 15px;
}

#modal-mode-emploi {
    margin-bottom: 40px;
}

.red, .article-delete {
    color: #a94442;
}

.red:hover, .article-delete:hover {
    cursor: pointer;
    color: #892422;
}