html {
  height: 100%;
}

body {
  font-family: 'Alegreya', Arial, Helvetica, sans-serif;
  background: #d3d7d8;
  color: #444;
}

/* !------------------ Général */

div.bp-page div.container {
  font-size: 1.2em;
  line-height: 1.4;
}

strong {
  color: rgb(204, 0, 0);
}

p.bp-gros {
  font-size: 1.2em;
}

/* !------------------ Haut de page */

.navbar {
  margin-bottom: 0px;
  font-family: 'Alegreya Sans', Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-weight: bold;
}

.navbar-brand {
  background: url(/site/resources/basicpower-logo.png) no-repeat left center;
  text-indent: -9999px;
  margin-top: 10px;
  width: 150px;
  height: 50px;
}

.navbar .active a {
  color: black !important;
}

ul.navbar-nav > li {
  text-align: center;
}

.bp-nav-link-intro {
  display: block;
  font-size: 0.75em;
  font-weight: normal;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
  background-color: #e7e7e7;
}

h1.bp-bandeau {
  position: relative;
  background: #666 no-repeat center top;
  background-size: cover;
  height: 400px;
  margin: 0;
  padding: 0;
  margin-bottom: 40px;
}

h1.bp-bandeau .bp-titre-page {
  font-family: 'HelveticaNeue', Arial, Helvetica, sans-serif;
  font-weight: 200;
  font-size: 48px;
  letter-spacing: 2px;
  color: #eee;
  text-shadow: black 1px 1px;
}

h1.bp-bandeau .bp-titre-page div {
  position: absolute;
  bottom: 0px;
}

body.bp-page-offre-siteweb h1.bp-bandeau {
  background-image: url(/site/resources/bandeau1.jpg);
}

body.bp-page-offre-webapp h1.bp-bandeau {
  background-image: url(/site/resources/bandeau2.jpg);
}

body.bp-page-offre-competence h1.bp-bandeau {
  background-image: url(/site/resources/bandeau3.jpg);
}

body.bp-page-portfolio h1.bp-bandeau {
  background-image: url(/site/resources/bandeau5.jpg);
}

body.bp-page-apropos h1.bp-bandeau {
  background-image: url(/site/resources/bandeau8.jpg);
}

/* Voir aussi "site/pages/morceaux/portfolio.php" */

/* !------------------ Pied de page */

.bp-footer {
  margin-top: 50px;
  background: #6c828a;
  padding-top: 15px;
  padding-bottom: 15px;
  font-family: 'Alegreya Sans', Arial, Helvetica, sans-serif;
  letter-spacing: 0.5px;
}

.bp-footer a {
  color: #aaa;
}

.bp-footer a:hover {
  text-decoration: none;
  color: white;
}

/* plan du site */

ul.bp-footer-sitemap {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.bp-footer-sitemap li {
  display: block;
}

ul.bp-footer-sitemap li:first-child {
  padding-left: 0em;
}

@media (min-width: 768px) { /* sm and above */
  ul.bp-footer-sitemap li {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    padding-left: 3em;
  }
  
  ul.bp-footer-sitemap li:first-child {
    padding-left: 0em;
  }
}

@media (min-width: 992px) { /* md and above */
  
}

@media (min-width: 1200px) { /* lg */
  
}

/* mentions légales */

div.bp-footer-legal {
  margin-top: 1em;
  text-align: center;
  color: #aaa;
  line-height: 1.2;
}

div.bp-footer-legal span {
  display: block;
}

@media (min-width: 768px) { /* sm and above */
  div.bp-footer-legal span {
    display: inline;
    padding-left: 1.5em;
  }
  
  div.bp-footer-legal span:first-child {
    padding-left: 0em;
  }
}

@media (min-width: 992px) { /* md and above */
  
}

@media (min-width: 1200px) { /* lg */
  
}


/* !------------------ Bouton contact */

.contactez-moi {
  text-align: center;
  margin-top: 3em;
  margin-bottom: 1.5em;
}

.contactez-moi a {
  display: inline-block;
  font-family: 'Alegreya Sans', Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  font-weight: 300;
  letter-spacing: 0.25px;
  border-radius: 20px;
  background-color: #337ab7;
  padding: 4px 16px;
  color: #ddd;
  box-shadow: 0px 0px 10px #444;
}

.contactez-moi a:hover {
  text-decoration: none;
  color: white;
}

/* !------------------ Page d'accueil */

/* fond de la page */

body.bp-page-accueil {
  background: #6c828a url(/site/resources/fond-accueil.jpg) no-repeat center center fixed;
  background-size: cover;
}

@media (min-width: 1200px) { /* lg */
  .bp-accueil-entete .container,
  body.bp-page-accueil div.bp-page .container {
    width: 970px;
  }
}

/* barre de menu */

body.bp-page-accueil .navbar {
  background: none;
  border: none;
}

body.bp-page-accueil .navbar-brand {
  display: none;
}

body.bp-page-accueil .navbar-toggle,
body.bp-page-accueil .navbar-collapse.collapsing,
body.bp-page-accueil .navbar-collapse.in {
  background-color: #ddd;
}

body.bp-page-accueil ul.navbar-nav a {
  color: #444;
}

body.bp-page-accueil ul.navbar-nav a:hover {
  color: #000;
}

/* bloc logo + taglines */

body.bp-page-accueil h1.bp-bandeau {
  display: none;
}

.bp-accueil-entete {
  margin-top: 25px;
  margin-bottom: 40px;
}

/*
.bp-accueil-entete {
  padding-top: 125px;
  margin-top: -100px;
  margin-bottom: 30px;
  padding-bottom: 25px;
  background-color: rgba(0, 0, 0, 0.1);
}
*/

.bp-accueil-entete img {
  max-width: 100%;
}

.bp-accueil-entete h1 {
  font-family: 'HelveticaNeue', Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 1px;
  margin-top: 0.5em;
  color: #eee;
}

.bp-accueil-entete h2 {
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 1.2;
  color: #ddd;
}

/* les 3 blocs "besoin" */

.bp-accueil-bloc {
  position: relative;
  background-color: rgba(227, 231, 232, 0.5);
  border-radius: 20px 20px 0px 20px;
  text-align: center;
  padding-bottom: 2.5em;
  box-shadow: #444 0px 0px 10px;
}

.bp-accueil-bloc a:hover {
  text-decoration: none;
}

.bp-accueil-bloc h3 {
  font-family: 'Alegreya Sans', Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #333;
  text-shadow: 0px 1px #999;
  line-height: 1.2;

  background-color: #666;
  border-radius: 18px 18px 0px 0px;

  padding: 0.75em 0em;
  border-bottom: 1px solid #333;
  box-shadow: 0px 1px #ccc;

  margin-bottom: 0.75em;
}

.bp-accueil-bloc h3 .glyphicon {
  margin-left: -1.25em;
  margin-right: 0.15em;
  vertical-align: -0.1em;
  color: #aaa;
  text-shadow: none;
}

.bp-accueil-bloc p {
  padding: 0em 2em;
  color: #333;
}

.bp-accueil-bloc a.bp-lireplus {
  display: block;
  position: absolute;
  bottom: 15px;
  right: 15px;
  font-size: 0.9em;
}

/* les quotes */

.bp-accueil-quotes {
  margin-top: 50px;
}

.bp-quote {
  width: 60%;
  padding-top: 2em;
  margin-left: auto;
  margin-right: auto;
  quotes: "“" "”" "‘" "’";
  vertical-align: top;
}

.bp-quote-texte {
  display: block;
  font-size: 1.75em;
  font-style: italic;
  font-weight: bold;
  color: #ccc;
  line-height: 1.2;
}

.bp-quote-texte:before {
  display: inline-block;
  content: open-quote;
  margin-right: 0.15em;
  margin-left: -0.45em;
  color: #999;
  font-size: 6em;
  font-weight: normal;
  line-height: 0;
  vertical-align: bottom;
}

.bp-quote-texte:after {
  content: close-quote;
  margin-left: 0.05em;
  font-weight: normal;
  color: #999;
}

.bp-quote-auteur,
.bp-quote-societe {
  display: block;
  text-align: right;
  color: #ccc;
  line-height: 1.2;
}

.bp-quote-societe {
  font-style: italic;
}

/* le texte */

.bp-accueil-texte {
  margin-top: 15px;
  color: #eee;
}

.bp-accueil-texte .bp-gros,
.bp-accueil-texte strong {
  color: #fff;
}

.bp-accueil-texte .contactez-moi {
  margin-top: 1.5em;
}

/* le pied de page */

body.bp-page-accueil .bp-footer {
  border-top: 1px solid #aaa;
}

/* !------------------ Page compétence */

div.bp-competence {
  line-height: 1.3;
}

div.bp-competence span.glyphicon {
  float: left;
  font-size: 2em;
  margin: 5px 10px 0px 0px;
}

div.bp-competence span.glyphicon.glyphicon-bank {
  width: 34px;
  height: 34px;
  background: url(/site/resources/glyphicon-bank.png) no-repeat center center;
}

div.bp-competence span.glyphicon.glyphicon-keyboard {
  width: 34px;
  height: 34px;
  background: url(/site/resources/glyphicon-keyboard.png) no-repeat center center;
}

div.bp-competence span.glyphicon.glyphicon-proof {
  width: 34px;
  height: 34px;
  background: url(/site/resources/glyphicon-proof.png) no-repeat center center;
}

/* !------------------ Portfolio */

div.bp-portfolio-item {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

div.bp-portfolio-item div.bp-client {
  font-family: 'Alegreya Sans', Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1;
  margin-top: 0.75em;
}

div.bp-portfolio-item a {
  color: #444;
}

div.bp-portfolio-item a:hover {
  text-decoration: none;
}

div.bp-portfolio-item a:hover div.bp-client {
  color: rgb(204, 0, 0);
}

div.bp-portfolio-item .bp-vignette {
  position: relative;
}

div.bp-portfolio-item .bp-vignette img {
  display: block;
  max-width: 100%;
  box-shadow: 0px 3px 9px #444;
}

div.bp-portfolio-item div.bp-tags {
  position: absolute;
  left: -15px;
  top: 20%;
  font-family: 'Alegreya Sans', Arial, Helvetica, sans-serif;
  font-size: 0.8em;
  font-weight: 300;
  letter-spacing: 0.25px;
}

div.bp-portfolio-item div.bp-tags span {
  display: inline-block;
  color: #ccc;
  background: #444;
  padding: 0px 6px 0px 8px;
  transform: rotate(-20deg);
  border-radius: 10px 0px 0px 10px;
  border: 1px solid #ccc;
}


div.bp-portfolio-item-vous div.bp-client {
  text-align: center;
  margin-top: 0.25em;
  font-weight: bold;
  border-radius: 20px;
  background-color: #337ab7;
  padding: 4px 16px;
  color: #ddd;
  box-shadow: 0px 0px 10px #444;
}

div.bp-portfolio-item-vous .bp-vignette img {
  box-shadow: none;
}

div.bp-portfolio-item-vous a:hover div.bp-client {
  color: white;
}


/* !------------------ Pages de portfolio */

@media (max-width: 767px) { /* xs -- page de portfolio uniquement */
  body.bp-souspage-portfolio h1.bp-bandeau {
    background: transparent !important;
    height: auto;
    margin-top: 10px;
    margin-bottom: 30px;
  }
  
  body.bp-souspage-portfolio h1.bp-bandeau .bp-titre-page {
    color: #fff;
    text-shadow: none;
  }

  body.bp-souspage-portfolio h1.bp-bandeau .bp-titre-page div {
    position: static;
  }
}

/* boutons et liens */

div.bp-tag-buttons {
  margin-top: -1.5em;
  margin-bottom: 2em;
  font-family: 'Alegreya Sans', Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: #ccc;
}

div.bp-tag-button {
  margin-bottom: 0.75em;
}

span.bp-tag-button {
  white-space: nowrap;
  font-weight: 300;
  letter-spacing: 0.25px;
  margin-right: 1.5em;
  padding: 2px 6px 3px;
  border-radius: 12px;
  background: #999;
}

span.bp-tag-button.bp-present {
  background: #444;
}

a.bp-button {
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  width: 1em;
  line-height: 1;
  text-align: center;
  border-radius: 0.5em;
  background: #ccc;
  color: #444;
}

a.bp-button:hover {
  text-decoration: none;
  background: #777;
  color: #ccc;
}

span.bp-tag {
  padding: 0px 8px;
}

div.bp-tag-buttons a.bp-lien {
  display: block;
  color: #444;
  margin-right: 1.5em;
  padding: 0.25em 0em;
  white-space: nowrap;
}

div.bp-tag-buttons a.bp-lien:first-of-type {
  padding-top: 0.5em;
}

div.bp-tag-buttons a.bp-lien:hover {
  color: #000;
  text-decoration: none;
}

div.bp-tag-buttons a.bp-lien span.glyphicon {
  margin-right: 0.5em;
  vertical-align: -2px;
}

@media (min-width: 768px) { /* sm and above */
  div.bp-tag-button {
    display: inline;
    margin-bottom: 0em;
  }
  
  div.bp-tag-buttons a.bp-lien {
    display: inline-block;
    padding: 0.5em 0em;
  }
}

@media (min-width: 992px) { /* md and above */
  
}

@media (min-width: 1200px) { /* lg */
  
}


/* texte */

.row.bp-story > div {
  margin-top: 1em;
}

body.bp-souspage-portfolio p span.glyphicon {
  float: left;
  font-size: 2em;
  margin: 5px 10px 0px 0px;
  color: rgb(204, 0, 0);
}

p.bp-outils {
  margin-top: 0.75em;
  overflow: hidden; /* pour que les floats soient contenus */
}

body.bp-souspage-portfolio .bp-quote {
  margin-top: 2em;
  margin-bottom: 2em;
}

body.bp-souspage-portfolio .bp-quote-texte,
body.bp-souspage-portfolio .bp-quote-auteur,
body.bp-souspage-portfolio .bp-quote-societe {
  color: #666;
}

p.bp-epilogue {
  margin-top: 1.5em;
  font-style: italic;
}

span.bp-technos {
  display: block;
  font-family: 'Alegreya Sans', Arial, Helvetica, sans-serif;
  font-weight: 300;
}

p.bp-contributeurs {
  font-style: italic;
}


/* !------------------ Fiche signalétique */

.bp-fiche {
  background: url(/site/resources/fond-fiche.jpg) no-repeat center top;
  background-size: cover;
  padding-bottom: 3em;
  margin-top: 2em;
}

@media (min-width: 480px) and (max-width: 639px) {
  .bp-fiche {
    margin-left: 10%;
    width: 80%;
  }
}

@media (min-width: 640px) and (max-width: 727px) {
  .bp-fiche {
    margin-left: 20%;
    width: 60%;
  }
}

@media (min-width: 992px) { /* md and above */
  .bp-fiche {
    margin-top: 0px;
  }
}

.bp-fiche h2 {
  font-family: 'Special Elite', monospace;
  text-align: center;
  text-shadow: #ccc 0px 1px;
  margin-bottom: 0.75em;
}

.bp-fiche .bp-photos,
.bp-fiche .bp-liens {
  text-align: center;
  margin-bottom: 1.5em;
}

.bp-fiche .bp-photos img {
  height: 75px;
  margin: 0px 5px;
}

.bp-fiche .bp-liens img {
  height: 32px;
  padding: 0px 15px;
}

.bp-fiche dt {
  text-align: left;
  font-family: 'Special Elite', monospace;
  font-weight: normal;
  font-size: 0.9em;
  text-shadow: #ccc 0px 1px;
  padding-top: 2px;
  float: left; clear: left; /* ceci est inclus dans .dl-horizontal, mais pas actif en xs */
  width: 80px;
}

.bp-fiche dd {
  margin-left: 90px;
  color: black;
  line-height: 1.2;
  margin-bottom: 0.25em;
}

@media (min-width: 768px) { /* sm and above */
  .bp-fiche dt {
    width: 100px;
  }
  
  .bp-fiche dd {
    margin-left: 110px;
  }
}


/* !------------------ Page et formulaire de contact */

body.bp-page-contact h1.bp-bandeau .bp-titre-page {
  text-indent: -9999px;
}

input.color-field { /* a fake field used as an anti-captcha */
  position: absolute;
  width: 10px;
  left: -9999px;
}

div.bp-contact-form h2 {
  font-size: 2em;
}

div.bp-contact-form h3 {
  font-family: 'Alegreya Sans', Arial, Helvetica, sans-serif;
}