/*
 * Déclaration des fonts
 */
@font-face {
  font-family: 'Quattrocento Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Quattrocento Sans'),
       local('QuattrocentoSans'),
       url('../fonts/QuattrocentoSans.woff2') format('woff2'),
       url('../fonts/QuattrocentoSans.woff') format('woff');
}

@font-face {
  font-family: 'Quattrocento';
  font-style: normal;
  font-weight: 400;
  src: local('Quattrocento'),
       url('../fonts/Quattrocento.woff2') format('woff2'),
       url('../fonts/Quattrocento.woff') format('woff');
}

@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  src: local('Kaushan Script'),
       local('KaushanScript-Regular'),
       url('../fonts/KaushanScript.woff2') format('woff2'),
       url('../fonts/KaushanScript.woff') format('woff');
}





/*
 * Éléments de base
 */
html {
  font-size: 100%;
}
body {
  margin: 0;

  color: #005d81;
  font-family: 'Quattrocento Sans', sans-serif;
  font-size: 1.3rem;
  line-height: 1.9rem;

  background: url('../images/background.jpg') left top no-repeat fixed;
  background-size: cover;
}
@media (max-width: 768px) {
  body {
    font-size: 1.2rem;
    line-height: 1.7rem;
  }
}

h1 {
  margin-top: 0;
  margin-bottom: 1.5rem;

  font-size: 2.7rem;
  line-height: 3rem;
  font-family: 'Kaushan Script', cursive;
}
h2 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;

  font-size: 2rem;
}
h3 {
  margin-top: 1rem;
  margin-bottom: 1rem;

  font-size: 1.5rem;
}

a {
  color: #337ab7;
  text-decoration: none;
}
a:hover {
  color: #23527c;
  text-decoration: underline;
}
a.active:hover {
  color: #ffc514;
  text-decoration: underline;
}
h1 a,
h1 a:hover {
  color: #005d81;
  text-decoration: none;
}

* + p,
* + ul,
* + ol,
* + dl {
  margin-top: 2rem;
}
p + ul,
p + ol,
p + dl {
  margin-top: -1rem;
}
h2 + p,
h2 + ul,
h2 + ol,
h2 + dl {
  margin-top: 1rem;
}
ul ul,
ul ol,
ol ol,
ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

img {
  max-width: 100%;
}

code {
  padding: .4rem .25rem .2rem;

  font-size: 1rem;

  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
pre {
  padding-left: .75rem;
  padding-right: .75rem;
  overflow: auto;

  color: #e3f4fb;
  font-size: 1.1rem;

  background-color: #005d81;
  border-radius: 3px;
}

blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: .5rem 1.5rem;

  color: #005d81;
  font-size: 1.2rem;

  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

iframe {
  max-width: 100%;
}





/*
 * Correction pour FontAwesome qui ne propose que du café.
 * Le thé vaincra !
 */
.fa-tea::before {
  content: "\f0f4";
}





/*
 * Système de grille
 */
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.row {
  display: flex;
  align-items: stretch;
  flex-direction: column;
}
@media (min-width: 768px) {
  .row {
    flex-direction: row;
  }
}

.col {
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .col-2 { width: 16.66%; flex-grow: 2; }
  .col-4 { width: 33.33%; flex-grow: 4; }
  .col-8 { width: 66.66%; flex-grow: 8; }
  .col-10 { width: 83.33%; flex-grow: 10; }
  .col-12 { width: 100%; flex-grow: 12; }

  .col-offset-2 { margin-left: 16.66%; }
}





/*
 * En-tête du site (principalement le bouton pour revenir à l'accueil)
 */
.header {
  font-size: 1.4rem;
  line-height: 3rem;
  font-family: 'Kaushan Script', cursive;
}

.header .col:first-child {
  padding-left: 2rem;
}
.header .go-home .fa {
  width: 24px;
  margin-right: .5rem;
}

.header a {
  color: #fff;
  font-weight: bold;
}
.header a:hover,
.header a.active {
  color: #ff8500;
  text-decoration: none;
}





/*
 * Style général des "slides"
 */
.container-main {
  margin-top: 50px;
  margin-bottom: 50px;
}
.container-main.index {
  margin-top: 150px;
}
@media (max-width: 768px) {
  .container-main.index {
    margin-top: 50px;
  }
}

.slides {
  border-radius: 2px;
  box-shadow: 0 0 3px #333;
}

.slide-menu {
  padding: 2rem 0;
  box-sizing: border-box;

  color: #fff;
  background: url('../images/back-slidemenu.png');

  border-radius: 2px 0 0 2px;
}
.slide-menu .slide-menu-container {
  position: sticky;
  top: 10px;
}

.slide-menu a {
  color: #fff;
}
.slide-menu a:hover,
.slide-menu a.active {
  color: #ff8500;
  text-decoration: none;
}
.slide-menu a.active:hover {
  color: #ffc514;
}

.slide-post {
  padding: 2rem 3rem;
  box-sizing: border-box;

  background: #e3f4fb;

  border-radius: 0 2px 2px 0;
}

@media (max-width: 768px) {
  .slide-post {
    padding: 2rem 1rem;
    order: 1;
  }
  .slide-menu {
    order: 2;
  }
}





/*
 * Style d'éléments particuliers du slide-menu
 */
.menu-site-logo {
  margin-bottom: 2rem;

  text-align: center;
}
.menu-site-logo img {
  max-width: 150px;

  border-radius: 50%;
}

.menu-list {
  text-align: center;
  font-size: 1.4rem;
  line-height: 3rem;
}
.menu-list ul {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;

  list-style: none;
}

.menu-list-index-category {
  margin-bottom: 2rem;
}

.menu-list-category {
  padding-left: 2rem;
  padding-right: 2rem;

  text-align: left;
}
.menu-list-category .fa {
  width: 24px;
  margin-right: .5rem;
}
.menu-list-category .category-entries-number {
  margin-top: -20px;
  padding-left: 38px;

  color: #ccc;
  font-size: .9rem;
}

.menu-list-tag {
  font-size: 1.1rem;
  line-height: 2rem;
}
.menu-list-tag li {
  display: inline-block;
}
.menu-list-tag a {
  display: inline-block;
  padding: .5rem;
}

.menu-social {
  margin-top: 0;
  margin-bottom: 0;
  padding: 1rem 0;

  text-align: center;
}
.menu-social li {
  display: inline;
}
.menu-social a {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin: 0 .5rem;

  text-align: center;
  line-height: 36px;

  border-radius: 3px;
}
.menu-social a:hover {
  color: #fff;
  text-shadow: 0 0 3px #fff;
}
.menu-social a.sc-rss { background-color: #f26109; }
.menu-social a.sc-rss:hover { box-shadow: 0 0 5px #f26109; }
.menu-social a.sc-twitter { background-color: #4da7de; }
.menu-social a.sc-twitter:hover { box-shadow: 0 0 5px #4da7de; }
.menu-social a.sc-github { background-color: #111010; }
.menu-social a.sc-github:hover { box-shadow: 0 0 5px #111010; }
.menu-social a.sc-envelope-o { background-color: #578ad6; }
.menu-social a.sc-envelope-o:hover { box-shadow: 0 0 5px #578ad6; }

.menu-entry {
  padding: 0 2rem;

  color: #ccc;
}

.menu-entry-info {
  margin-bottom: 2rem;
}
.menu-entry-info .fa {
  margin-right: .5rem;
}
.menu-entry-info a { color: #ff8500; }
.menu-entry-info a:hover { color: #ffc514; }

.menu-entry-summary {
  margin-bottom: 3rem;
  padding: 0 3rem;

  font-size: 1rem;
  font-style: italic;
}
.menu-entry-summary a {
  text-decoration: underline;
}

.menu-entry-tags {
  padding-top: 2px;
}
.menu-entry-tags .tag {
  margin-right: 1rem;
  padding: .7rem .5rem .5rem 0;

  font-size: 1rem;
  white-space: nowrap;
}
.menu-entry-tags .tag:first-child {
  border-top: 2px solid #ff8500;
}





/*
 * Style de la liste d'articles (pages catégorie et tag)
 */
.list-articles .entry {
  margin-bottom: 2rem;
}
.list-articles .entry .row {
  align-items: baseline;
}

.list-articles .entry-date {
  padding-left: 0;

  color: #5f8999;
  font-size: 1rem;
}
@media (max-width: 768px) {
  .list-articles .entry-date {
    padding-left: 15px;
  }
}

.list-articles .entry-title {
  margin-top: 0;
  font-size: 1.8rem;
}
.list-articles .entry-title a {
  color: #005d81;
  text-decoration: none;
}

.list-articles .entry-continue-reading a {
  display: inline-block;
  margin-top: 0;
  padding: .25rem 1rem;

  color: #005d81;
  font-family: 'Kaushan Script', cursive;
  text-decoration: none;
  white-space: nowrap;

  background-color: #e3f4fb;
  border: 1px solid #5f8999;
  border-radius: 3px;
}
.list-articles .entry-continue-reading a:hover {
  color: #e3f4fb;
  background-color: #005d81;
  border-color: #005d81;
}

.list-articles .entry-summary {
  font-size: 1.2rem;
}
.list-articles .entry-summary p {
  margin-top: .5rem;
  margin-bottom: 1rem;
}





/*
 * Style du contenu
 */
.entry-content {
  max-width: 550px;
}

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





/*
 * Gestion de la taille des tags
 */
.tag-size-1 { opacity: .6; font-size: 100%; }
.tag-size-2 { opacity: .6; font-size: 110%; }
.tag-size-3 { opacity: .7; font-size: 120%; }
.tag-size-4 { opacity: .7; font-size: 130%; }
.tag-size-5 { opacity: .8; font-size: 140%; }
.tag-size-6 { opacity: .8; font-size: 150%; }
.tag-size-7 { opacity: .9; font-size: 160%; }
.tag-size-8 { opacity: .9; font-size: 170%; }
.tag-size-9 { font-size: 180%; }
.tag-size-10 { font-size: 190%; }
.tag-size-max { font-size: 200%; }
.tag-name.active { opacity: 1; }





/*
 * Gestion de la pagination
 */
.paginator {
  padding-top: 0;
  padding-bottom: 1rem;

  line-height: 2.5rem;
  text-align: center;
}

.paginator span {
  display: inline-block;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  vertical-align: middle;

  color: #5f8999;
  font-size: 1rem;
}
.paginator a {
  display: inline-block;
  vertical-align: middle;

  color: #5f8999;
  text-decoration: none;
  font-size: 1.7rem;
}
.paginator a:hover {
  color: #005d81;
}