/*!
 * HAPPY BUDDHA
 * with a minimal things for links
 * Done by 2018 Carsten Brueggenolte
 * Licensed under the WTFPL License.
 * https://de.wikipedia.org/wiki/WTFPL
 */

body {
  background-color: #eceff1;
  color: #212121;
}

* {
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

a,
a:hover,
a:visited,
a:focus {
  text-decoration: none;
}

img {
  max-width: 100%;
}

/* --------------------------------------------------------
 *    NAVIGATION BAR, HEADER IMAGE, SITE TITLE & SLOGAN
 * -------------------------------------------------------- */

nav {
  background-color: white;
  -webkit-box-shadow: 0 1px 1px rgba(100, 100, 100, .2);
  -ms-box-shadow: 0 1px 1px rgba(100, 100, 100, .2);
  box-shadow: 0 1px 1px rgba(100, 100, 100, .2);
  clear: both;
  display: block;
  float: left;
  margin-bottom: 0;
  width: 100%;
  text-transform: uppercase;
  height: 50px;
}

.main-navigation a {
  text-decoration: none;
}

.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
  position: fixed;
  z-index: 1030;
}

.navbar-title {
  /* 50px height - so we center this in the middle */
  padding: 15px 0 15px 10px;
  line-height: 20px;
}

span.navbar-title {
  font-size: 20px;
  font-weight: 600;
}

.navbar-statics {
  padding: 15px 10px 15px 0;
  line-height: 20px;
  text-align: right;
}

.navbar-statics a {
  padding-left: 10px;
  padding-right: 10px;
}

#spacer {
height: 50px;
}

/*.site-header {
 *  background-image: url('../img/header.jpg');
 *  background-size: cover;
 *  position: relative;
 *  margin-bottom: 3em;
 *  min-height: 120px;
 *  height: 245px;
 *  display: table;
 * }*/

.site-header {
  background-image: url('../img/header.jpg');
  background-position: center center;
  background-size: cover;
  position: relative;
  margin: 0 auto 3em;    /* centré horizontal + marge basse d'origine */
  min-height: 120px;
  aspect-ratio: 1252 / 471;   /* largeur/hauteur de l'image, à adapter */
  height: auto;
  width: 85%;             /* comme .container, moins son padding */
  max-width: 990px;                    /* 960px du conteneur - 2x20px */
  display: table;
}

/* Mobile : pleine largeur d'écran */
@media (max-width: 550px) {
  .site-header {
    width: 100%;
    max-width: none;
  }
}

/*
 * Comment choisir le ratio : ouvre l'image header.jpg (dans le dossier img du thème) et note ses dimensions en pixels. Le ratio est largeur ÷ hauteur. Par exemple une image 1600 × 400 donne aspect-ratio: 4 / 1. Il faut remplacer le 4 / 1 par le vrai ratio de votre image — c'est la seule valeur à déterminer.
 * Ce que fait chaque ligne :
 * aspect-ratio : le cadre garde toujours les proportions de l'image, quelle que soit la largeur de l'écran. Sur mobile il rétrécit en hauteur automatiquement, donc plus besoin du min-height de sécurisation — tu peux le supprimer si le rendu mobile convient.
 * height: auto : neutralise le 245 px fixe qui imposait le cadre et donc le rognage.
 * background-size: cover reste : puisque le cadre a exactement le ratio de l'image, cover ne rogne plus rien — l'image remplit tout, nettement.
 * background-position: center : centrage horizontal et vertical, utile si un léger écart de ratio subsiste (arrondis, navigateurs anciens).
 * À noter : si l'image est très large et plate (ratio 4:1 ou plus), elle deviendra une fine bande sur mobile — c'est le comportement normal et généralement le bon pour une banderole. Si au contraire elle est quasi carrée, elle sera très haute. Si le résultat mobile est trop extrême, on pourra introduire un point de rupture avec une image alternative, mais essaie d'abord le simple.
 */

.site-branding {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.site-title {
  color: #fff;
  font-size: 3.5em;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 10px;
  margin-top: 0;
  margin-bottom: 0;
  text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
}

.site-slogan {
  color: #fff;
  font-size: 1em;
  font-weight: 400;
  padding: .2em 0;
  letter-spacing: 5px;
  text-transform: capitalize;
  margin-top: 0;
  margin-bottom: 0;
  text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
}

/* --------------------------------------------------------
 *    MAIN PART
 * -------------------------------------------------------- */

article {
  background-color: white;
  margin-bottom: 2em;
  box-shadow: 0 0 1px rgba(0, 0, 0, .15);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .15);
}

.article-cover-image {
  padding: .5em .5em;
  height: 100%;
  overflow: hidden;
}

img.bludit-image {
  width: auto;
  height: auto;
  max-width: 100%;
}

.article-header {
  padding: 1em 2em;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.article-title {
  overflow: hidden;
  word-break: break-word;
}

.article-meta {
  clear: both;
  color: #727272;
  text-transform: capitalize;
  font-weight: 300;
  letter-spacing: 2px;
}

.article-meta-line {
  height: 2px;
  display: block;
  width: 50px;
  margin: 10px auto;
  background-color: #1EAEDB;
}

.article-summary {
  text-align: justify;
  padding: 0 2em;
}

.article-read-more {
  margin-bottom: 1.2em;
  text-align: center;
  text-transform: uppercase;
}

.article-read-more a {
  border-bottom: 2px solid #1EAEDB;
  padding: 1em;
}

.article-read-more a:hover {
  border-bottom: 1px solid #0FA0CE;;
  background-color: #0FA0CE;
  color: #fff;
}

.article-footer {
  word-spacing: 3px;
  padding-bottom: 2.5em;
}


/* --------------------------------------------------------
 *    PAGINATION
 * -------------------------------------------------------- */

.pagination {
  align-items: center;
  justify-content: center;
  margin-bottom: 1em;;
}

.pagination a {
  padding: 0 2em;
}

/* --------------------------------------------------------
 *    ASIDE
 * -------------------------------------------------------- */

aside {
  overflow: hidden;
}

.plugin {
  padding: 5px 5px;
  margin-bottom: 1em;
  background-color: #fff;
  margin-bottom: 2em;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 10px 10px;
  box-shadow: 0 0 1px rgba(0, 0, 0, .15);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .15);
  color: #727272;
}

.plugin h2 {
  font-size: 1.5em;
  color: #212121;
}




/* --------------------------------------------------------
 *    FOOTER
 * -------------------------------------------------------- */

.site-footer {
  background-color: #222;
  color: white;
  min-height: 70px;
  font-size: 16px;
  padding: 1em;
  letter-spacing: 1px;
}

.site-footer-info-container {
  padding-left: 10px;
}

@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {

  nav, #space {
    height:60px;
  }

  nav .container {
    padding: 0 10px;

  }
  .navbar-title {
    padding: 5px 0 5px 5px;
    line-height: 20px;
  }

  .navbar-statics {
    width: 100% !important;
    padding: 0;
    text-align: left;
    font-size: 0.7em;
  }

  .site-branding {
    max-width: 100vw;
  }
  .site-title {
    font-size: 1.5em;
  }
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {

  nav, #space {
    height: 80px;
  }

  .navbar-statics {
    width: 100% !important;
    margin-left: 10px;
    padding: 0;
    text-align: left;
  }
}

/* ============================================================
 *  Personnalisation — De La Farine & Des Mots (v2)
 *  ============================================================ */

/* Couleur des titres d'articles et accents assortis */
.article-title a,
.article-title a:hover {
  color: #C2552B;
}
.article-meta-line {
  background-color: #C2552B;
}
.article-read-more a {
  border-bottom: 2px solid #C2552B;
}
.article-read-more a:hover {
  border-bottom: 1px solid #A8441F;
  background-color: #A8441F;
  color: #fff;
}

/* Nom du site en haut à gauche : on le garde,
 *  sans majuscules forcées */
.navbar-title {
  text-transform: none;
  white-space: nowrap;      /* interdit le retour à la ligne */
  width: 60%;
}

* La zone des liens prend le reste */
.navbar-statics {
  width: 40%;
}

/* Ce nom est un lien, donc bleu clair par défaut :
 *  on le passe en terracotta */
.navbar-title a,
.navbar-title a:hover {
  color: #C2552B;
}

/* Slogan : texte blanc avec contour noir marqué */
.site-slogan {
  /*text-transform: none;
   *  color: #FFFFFF;
   *  font-size: 32px;
   *  letter-spacing: 3px;
   *  text-shadow:
   *  -1px -1px 0 #000,
   *  1px -1px 0 #000,
   *  -1px  1px 0 #000,
   *  1px  1px 0 #000,
   *  0 0 6px rgba(0, 0, 0, .6);*/
  display: none;
}

/*
 * Ce bloc superpose deux effets :
 * Les quatre premières lignes dessinent un contour net de 1 px autour de chaque lettre (l'ombre est décalée en haut-gauche, haut-droite, bas-gauche, bas-droite : le tour complet). C'est la technique classique du contour. Pour un contour plus épais, on double les décalages (2px, 3px...), mais à 22 px de police, 2 px commence à alourdir — si elle veut plus, mieux vaut augmenter la police en même temps.
 * La dernière ligne ajoute un halo flou autour des lettres (0 0 6px = aucun décalage, flou de 6 px), semi-transparent. C'est lui qui donne le côté "lecture possible partout", même sur une zone claire de la photo.
 * Pour doser : un contour seul donne un look "sticker" très net ; un halo seul donne un texte lumineux flou ; les deux combinés, comme ici, donnent le meilleur compromis lisibilité/discrétion. Le .6 du halo est l'opacité : 0 invisible, 1 noir opaque. En dessous de .5 le texte reste lisible partout sans que l'ombre se voie vraiment.
 * Détail technique : la syntaxe est décalage-x décalage-y flou couleur. La couleur en rgba(0,0,0,.6) permet la transparence ; en #000 elle serait opaque. On peut cumuler les ombres en les séparant par des virgules, chaque couche se superposant — c'est ce que fait le bloc ci-dessus pour contour + halo.
 */

/* Nom du site sur la banderole : masqué */
.site-title {
  display: none;
}