/* Pour article avec des notes latérales */

article {
  width: 75%;
  margin-left: 0%;
  margin-right: auto;
}

.sidenote {
  text-indent: 10px;
  font-size: 10px;
  width: 30%;
  float: right;
  clear: right;
  line-height: 12px;
  margin-right: -33%;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
   hyphens: auto;
}

/* Bouton de spoiler <Details> et <Summary> */

details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;
	margin: 15px 0 15px 0;
	
}

summary {
    font-weight: bold;
    margin: -.5em -.5em 0em;
    padding: .5em;
}

details[open] {
    padding: .5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}

/* Reste */

h3,h4,h5,h6 {
  font-family: 'Libre Franklin', verdana, Arial, sans-serif !important;
}

body {
	margin: 0;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 13px; 
	line-height: 18px;
	color: #333;
	background-color: #fff;
}

p {
	margin: 0 0 9px;
  	text-align: justify;
	text-indent: 20px;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 16px; 
	line-height: 26px;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

li {
	line-height: 20px;
}

blockquote {
	margin: 15px 30px 20px 30px;
	padding: 15px;
	border-left: 8px solid #eee;
    text-align: justify;
  	font-family: 'Libre Franklin', Verdana, Helvetica, Arial, sans-serif;
    font-size: 14px;
	font-style: italic;
	line-height: 24px;
	Background-Color: #f0e9e6
}

blockquote p {
	margin-bottom: 0;
    text-align: justify;
	text-indent: 20px;
	font-family: 'Libre Franklin', Verdana, Helvetica, Arial, sans-serif;
  	font-size: 14px; 
	line-height: 24px;
}

.btn {
  	font-family: 'Libre Franklin', Verdana, Helvetica, Arial, sans-serif;
	font-size: 13px;
	text-indent: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 12px 0;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
h1 {
	font-size: 40px;
	line-height: 44px;
}
h2 {
	font-size: 32px;
	line-height: 36px;
}
h3 {
	font-size: 23px;
	line-height: 28px;
	letter-spacing: 3px;
}
h4 {
	padding: 12px 0 12px 0;
  	font-size: 20px;
	line-height: 24px;
  	letter-spacing: 2px;
  	color: #D6723C;
}
h5 {
	padding: 12px 0 0 0;
	font-size: 17px;
	line-height: 19px;
}
h6 {
	font-size: 14px;
	line-height: 16px;
}


.site-title {
    font-size: 40px;
    font-size: calc(16px + 2.16vw);
    font-weight: bold;

}

@media (min-width: 1024px) {
	.site-title {
		font-size: 76px;
      	line-height: 100px;
      	letter-spacing: 0;
}
  
  .nav-pills > li > a {
	font-family: 'Libre Franklin', Verdana;
	font-size: 13px;
    letter-spacing: 1px;
    margin-top: 5px;
    margin-bottom: 5px;
}
  
  .brand {
	font-family: 'Libre Franklin';
	font-size: 12px;
	letter-spacing: 4px;
}
  
.label-info[href] {
	background-color: #D6723C;
}
  

element {
}
h1, .site-title {
    font-family: 'Chango', sans-serif;
}

.brand {
	color: #333333;
	-webkit-transition: color .5s linear;
	-moz-transition: color .5s linear;
	-o-transition: color .5s linear;
	transition: color .5s linear;
}
.brand:hover {
	color: #d6723c;
}

a:hover, a:focus {
    color: #333333;
}
  
.contentspoiler div.spi {
  	background-color: #ebebeb;
	padding: 12px;
	display: none;
	visibility: hidden;
	text-align: justify;
	text-indent: 20px;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 16px; 
	line-height: 26px;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;

}