/* classes utilitaires, pour alignement d'images depuis le markdown

Les @import ne peuvent-être qu'en début de fichier.
 */

@import url("article-helpers.css");


/* apply a natural box layout model to all elements,
 but allowing components to change
*/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/*-----------*/
/* Couleurs  */
/*-----------*/
/*
  Vert: #a3c595
  Vert (pâle): #acca9a
  Jaune: #feff88
  Jaune (pâle): #f9fbc0
  Rose: #c04443
  Rose (pâle): #dfa1a0
  */

/*-----------------------*/
/* Définitions générales */
/*-----------------------*/
h2 {clear : both; color: #c04443}

a img {border:0}

div.hr {
  height: 0;
  margin: 0;
}

div.cl {
  clear : both;
  height: 0;
}

a {
  color:black;
}

.hidden {
  display:none;
}

/*-----------*/
/*   Corps   */
/*-----------*/
body {
  padding : 0px;
  margin : 0px;
  background-repeat:repeat;
  background-color: white;
  overflow-x: hidden;  /* masquer l'overflow dû au ribbon */
}

/*--------------*/
/* Texte Detail */
/*--------------*/
.commentaire h3 {
  border-bottom : 1px solid #feff88;
}

.commentaire {
  border: 2px solid #eddde4;
  margin: 1em 0 1em 0;
  padding: 1em 0.9%;
  float:left;
  max-width:50em;
  width: 100%;
  clear: both;
  font-family: sans-serif;
  font-style: italic;
}

.commentaire p {
  color: #777;
  font-style: sans-serif;
  margin-left: 1em;
}


#comlist {
  padding:0;
  margin:0;
  border: 0;
  width: 100%;
  position: relative;
}

.commentaire.even{
  border: 2px solid #ddd;
}

.odd.credits {
  color: #DFA1A1;
}

.commentaire .date {
  font-size: x-small;
  font-style:italic;
  float: right;
}

h2 {
  text-align: right;
}

.page h2 {
  text-align: left;
  margin-left: 2em;
}

#content p.matiere {
  text-indent: 1.5em;
}

.page p {
  margin: 0 1em 0.3em 1em;
}

.page,
#liste_tags,
#liens_acces {
  margin-left: auto;
  margin-right: auto;
  max-width: 43em;
  padding-right: 1%;
  padding-left: 3%;
  border-left:  3px transparent solid;
  border-bottom:  3px transparent solid;
}

.page {
  border-left:  3px solid #eddde4;
  border-bottom:  3px solid #eddde4;
}

/*--------------*/
/* Structure #1 */
/*--------------*/

h1 {
  height : 4.7em;
}

h1 img {
  margin-left: 2em;
}

h1,
.sousbar {
  background-color: #c04443
}

h1,
.sousbar,
#topbar {
  border: 1px solid #333;
}

#conteneur {
  position: relative;
  width: 92%;
  margin: 0.5em 4%;
  padding-bottom: 1em;
  min-width: 20em;
}

#topbar {
  text-align : right;
  background : #dfa1a0;
  padding : 0.7em 1% 0.7em 1%;

}

h1,
#topbar,
#bac {
  margin : 0;
}

h1,
#bac {padding : 0.6em 1% 0.1em 1%;}

#bac {
  padding: 0;
}

/*---------------------*/
/* Structure dans #bac */
/*---------------------*/
#content,
#sidebar {
  float: left;
}

#content {
  width : 76.5%;
  background : white;
  margin: 0.5% 0.5% 0% 0.5%;
  padding: 1.5%;
}

#sidebar {
  width : 22%;
  margin: 0.5% 0% 0% 0.5%;
}

/*---------------*/
/*  Barres côté  */
/*---------------*/
.sousbar {
  color : #333333;
  margin: 0 0 0.6em 0;
  padding: 0 3% 0 3%;
  position: relative;
}

.sousbar h3 {
  color: #fdff88;
  position: relative;
  margin: 0.5em 0.2em 0.2em 0.2em;
}

.sousbar h4 {
  margin: 0.2em;
  text-align:center;
}

a,
.abo-links span.a-style {
  color : #333333;
  text-decoration: none;
  border-bottom: 1px dotted #333333;
}

a:hover, #content p.legende-illustration a:hover {
  color: black;
  border-bottom: 1px solid black;
}

.sousbar ul{
  padding: 0 0 0.8em 1.2em;
  margin: 0 1% 0 1%;
}

.sousbar #combut {
  text-align: center;
  padding-top: 0.6em;
  font-size: small;
  margin-bottom: -0.3em;
  padding-bottom: 0;
}

img.portrait, img.illustration {
  border : 3px solid #444;
  display : block;
  margin: 0 auto 0 auto;
}

#preview {
  max-width: 90%;
}

.suite {
  font-size: 0.8em;
}

#liste_tags, #liste_tags a {
  font-size: x-small;
  font-family: sans-serif;
  text-align:right;
  color: #c04444;
  font-style: italic;
}

#liste_tags a {
  border-bottom: 1px dotted #eddde4;
}

/*---------------*/
/* Barre de menu */
/*---------------*/
#topbar li {
  display: inline
}

#topbar li:last-child {
  margin-right: 40px;
}

#topbar a:hover {
  color: #BEE8A5;
  border: 0;
}

#topbar a {
  border: 0;
  color: #c04443;
  margin-right: 1em;
}

#topbar a:hover {
  border: 0;
  color: #fdff88;
  margin-right: 1em;
}

#topbar {
  font-family: sans-serif;
}

/*---------------*/
/* Page de texte */
/*---------------*/
.tournepage {
  width : 40%;
}
.tournepage,
#nopage {
  float : left
}

#tpdroite {
  text-align : right
}
#tpgauche {
  text-align : left
}

#nopage {
  text-align : center;
  width : 20%;
  margin-left: auto;
  margin-right: auto;
  font-size:small;
}

#nopage option {
  text-align: center;
  font-size: medium;
  margin:0;
  padding:0;
}

#nopage select {
  border:0;
  padding:0;
  margin:0;
}

/*-----------*/
/* Sommaire  */
/*-----------*/
ol#sommaire {
  font-size : small;
  padding-left : 2em
}

/*-----------*/
/*   Fiche   */
/*-----------*/
.fiche {
  font-family : sans-serif, Arial, Helvetica;
  font-size: 0.8em;
}

dl.fiche dt {
  font-weight : bold;
  float : left;
  clear : both;
  text-align : right;
  margin-right : 0.5em;
  margin-bottom: 0.1em;
  width : 40%;
}

dl.fiche dd {
  margin-left : 40%;
  width: 65%;
}

img.portrait {
  margin-left : auto;
  margin-right : auto;
  display : block
}

a.img,
a.img:hover {
  border:0;
}

.lien_ext {
  position: relative;
}

/*---------------*/
/*  Auteur fiche */
/*---------------*/
#fiche_auteur dl,
#fiche_auteur p,
#fiche_auteur ul{
  font-size: small;
}

#fiche_auteur,
#fiche_texte {
  margin-top: 0.5em;
}

.complement {
  font-style:italic;
}

.complement::before,
.complement::after {
  color: #a3c595;
  font-weight: bold;
  line-height:0em;
}

.complement::before {
  content: "«";
  font-size:3.2em;
}

.complement::after {
  content: "» ";
  font-size:2.2em;
}

/*--------------*/
/*  Texte fiche */
/*--------------*/
#liens_acces {
  padding-bottom: 0.3em;
  padding-top:0.1em;
  text-align: center;
  font-weight: bold;
  font-style: italic;
  font-family: sans-serif;
  font-size: small;
  margin-top: 2em;
  max-width: unset;
}

#liens_acces a {
  display: inline-block;
  margin: 1em 1%;
  color: #c04444;
  border: 3px solid #eddde4;
  padding: 0.3em;
  border-radius: 5px;
}

#lien_acces a:first-child {
  margin-left: 0;
}

#lien_acces a:last-child {
  margin-right: 0;
}


/*----------------*/
/* Listes de côté */
/*----------------*/
.liste_tete {
  margin: 0;
  position: absolute;
  top: -24px;
  right: 3%;
  width: 49px;
  height: 49px;
  background-repeat: no-repeat;
  z-index: 0;
}

#liste_amis ul {
  list-style-image: url("/static/icones/puces/etoile.png");
}

#liste_auteurs ul,
.abo-links ul {
  list-style-type:none;
  padding-left: 0;
}

#fond_texte {
  background-image: url("/static/icones/48x48/apps/gconf-editor.png");
}

.plus {
  text-align: right;
  font-style: italic;
  margin: 0 0.4em 0.2em 0;
  padding: 0;
  font-size: small;
}

h3 .plus {
  clear:both;
  font-size: x-small;
  font-weight: normal;
  width: 50%;
  float: right;
}

/*----------------*/
/*   Page auteur  */
/*----------------*/

#savie,
#sonoeuvre,
.infocontact {
  margin-left: 0%;
  margin-right: 0%;
}
#savie,
#sonoeuvre{
  float:left;
  padding: 0em 2% 1em 2%;
  border: 1px ridge #eddde4;
}

#sonoeuvre{
  border: none;
  width: 90%;
  max-width: 60em;
}

#sonoeuvre h3 {
  margin-top: 3em
}

#sonoeuvre h4 {
  float:left;
  clear:both;
  margin-right: 1em;
  margin-top:0;
  color: #333;
}

#sonoeuvre table.grouped-textlist {
  width: 90%;
}

#sonoeuvre table.grouped-textlist td {
  width: 50%;
}


@media screen and (max-width: 800px) {
  /* puts h4 on their own lines instead of in left column */
  #sonoeuvre h4 {
	float: unset;
	margin-top: 3em;
	margin-bottom: 0;
  }

  #sonoeuvre table.grouped-textlist {
	width: 90%;
  }



}

#saviedr,
#saviega {
  text-align: center;
}

#saviedr {
  float: right;
  width: 30%;
}

#saviega {
  float: left;
  width: 70%;
}

.infocontact {
  text-align: left;
  margin:100px 5% -20px 5%;
}

.infocontact img {
  position: relative;
  top: 10px;
}

.infocontact p {
  margin:0;
  padding:0;
}

.infocontact {
  min-width: 30rem;
  margin-left: 1rem;
}

.infocontact > p,
.infocontact > div {
  margin-bottom: 1rem;
}

#savie img.portrait {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

#sonoeuvre table.textlist {
  border: 1px ridge #eddde4;
  border-collapse: collapse;
  float:left;
  width: 100%;
  margin-bottom: 1em;
}

#sonoeuvre table.textlist td:first-child {
  width: 70%;
}

#sonoeuvre table.textlist td:last-child {
  text-align: left;
}

#sonoeuvre a {
  border-bottom: dotted 1px #DFA1A1;
}

#sonoeuvre tr:last-child td a {
  border-bottom:0;
}

#sonoeuvre tr:hover {
  background: #eaf3e7;
}

#sonoeuvre .oeuvre {
  text-align: center;
  float:left;
  min-width: 180px;
  min-height: 200px;
  padding: 0;
  position: relative;
  margin: .7em .3em;
}

#sonoeuvre .oeuvre span {
  position: absolute;
  bottom: 0;
  display: block;
}

#sonoeuvre .oeuvre a.imgonly {
  border: 0;
}

#savie .complement {
  width: 95%;
  text-align:justify;
}

.minifiche {
  float: left;
  width: 282px;
  border: 1px dashed #c76463;
  margin: 0.5em;
  padding: 0 0.4em 0 0.4em;
}

.minifiche ul {
  text-align: center;
  padding: 0
}

.minifiche ul li{
  list-style-type:none;
  margin:0;
  text-indent:0
}

p .illustration {
  float: right;
  margin: 0 0.4em 0 0.5em;
}

.legende-illustration {
  font-style: italic;
  font-size: x-small;
  text-align: center;
  color: #888;
  margin-top: 5px;
}

#content .illustration a {border: 0;}

#content .legende-illustration a {
  color: #888;
  border-bottom: 1px dotted #888;
}

.taglist a{
  color: black;
  border:0;
  font-family:sans-serif;
  text-align: center
}

.taglist a:hover{
  text-decoration:underline;
}

.intro,
#tags_cadre p,
#derniers_textes {
  border: 1px ridge #eddde4;
}


.intro,
#tags_cadre p {
  padding: 0.5em 0.6%;
  margin: 0;
}

.intro {
  text-indent: 2em;
  width: 58.2%;
  font-size: 1.1em;
  float:left;
  margin-top: 0.9em;
}

#tags_cadre{
  width: 41.2%;
  float:right;
  text-align: center;
  padding: 0;
}

#tags_cadre .taglist a {
  color:#a3c595
}

#tags_cadre .taglist a:hover {
  color:black
}

#tags_cadre h3 {
  font-family:sans-serif;
  font-size:small;
  text-align:left;
  margin:0;
}

#tags_cadre p {
  margin-top: 0;
}

#derniers_textes {
  float: left;
  padding: 1em;
  margin-top: 1.5em;
  position: relative;
}

#derniers_textes .plus {
  position: absolute;
  bottom:0;
  right:0;
  margin:0.3em;
}

/*----------------*/
/*   bug report   */
/*----------------*/
/* rapporteur_add.html */
#bugform div {
  width: 100%;
  float:left;
  border-top: 1px #DDD solid;
  padding: 0.5em 0 0.5em 0;
}

#bugform label {
  width: 20%;
  text-align: left;
  float: left;
}

form .help {
  font-size:small;
  color:#888;
  width:80%;
  float:right;
  margin-top:0;
}

form div:focus .help{
  color: black;
}

fieldset,
input,
textarea {
  border: 1px solid #DDD;
  margin-bottom: 0.3em;
}

input:focus,
textarea:focus {
  border:1.5px solid #a3c595;
}

form .button {
  border: 1px solid black;background:#CCC;
}

.errored_field input,
.errored_field textarea {
  background: #ffd5d5;
}

/* Footer à crédits */
#footer {
  width: 100%;
  float:left;
  text-align:center;
  font-size: small;
  color:#555;
}

/* Styles LaTeX */
span.textit {
  font-style: italic;
}

/* Antispam */
.f1 {
  display:none;
}

/* erreurs de validation de formulaires */
.errorlist {
  list-style-type: none;
  font-size: small;
  color: #c84a47;
  margin-left: 15%;
}

.apercu_texte {
  width: 33.33%;
  float:left;
  border-left: 1px solid #ddd;
  padding: 0em 2.3%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.apercu_texte p {
  font-size: small;
  margin-top:0
}

.apercu_texte p:first-letter {
  font-size: normal;
}

.apercu_texte img {
  display: block;
  float: left;
  margin-right: 10px;
}


.apercu_texte h4 {
  margin-bottom: 0;
  font-weight: normal;
}
/* non utilisé ?*/
p.credit {
  text-align: left;
  clear: both;
  font-style: italic;
  font-size: small;
}

/*----------------*/
/*    articles    */
/*----------------*/
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

#vitrine {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  border: 3px #a3c595 solid;
  border-radius: 5px;
  margin-bottom: 3em;
  box-shadow: 2px 2px 10px #CCC;
  position: relative;
}

#vitrine .article {
  width: 47.5%;
  margin: 0.8em 0em 0.8em 0.4em;
  padding: 0em 1.5% 0em 0em;
}

#vitrine .article {
  float: left;
}

#vitrine .article img.mini {
  float: left;
  margin: 0 1em 0 0.5em;
}

#vitrine p {
  margin: 0.5em;
  font-size: small;
}

#vitrine h2 {
  color: black;
  font-size: 1em;
  font-style: italic;
  font-weight: normal;
  text-align: left;
  display: inline;
}

#vitrine a {
  border: 0;
}

.date {
  color: #DDD;
  font-family: sans-serif;
  float: right;
  font-size: 2.3em;
  position: relative;
  margin-top: -0.2em;
}

.date div {
  position: absolute;
  bottom: -1px;
  font-size: 0.5em;
  width: 100%;
  padding: 0;
  z-index: 20;
  text-align: center;
}

.date div:before {
  content: "  ";
  background: white;
  bottom: 0;
  position: absolute;
  right: 0;
  font-size: 0.85em;
  width: 100%;
  z-index: -1;
}

#right-slider, #left-slider {
  width: 11px;
  height: 38px;
}

#right-slider {
  background: url("/static/img/right-slide.png");
  position: absolute;
  right: 0;
  top: 2em;
}

#left-slider {
  background: url("/static/img/left-slide.png");
  position: absolute;
  left: 0;
  top: 2em;
}

#left-slider:hover {
  background: url("/static/img/left-slide-hover.png");
}

#right-slider:hover {
  background: url("/static/img/right-slide-hover.png");
}

/* Helpers pour les articles */
img.flotant_a_gauche {
  float: left;
  margin-right: 3em;
  margin-left: 3em;
}

img.centree {
  max-width: 100%;
}

/* Liste des articles (sans js) */
.date {
  text-align: center;
}
.resumart .date {
  margin: 0.5em;float: left
}

.resumart .mini {
  float: right
}
.resumart {
  border-bottom: 1px #a3c595 solid;
  padding-bottom: 0.5em;
  width: 100%;
}
.resumart img,
.resumart .plus {
  margin: 0.5em;
}
.titreart {
  width: 95%;
}

.date.full div {
  bottom: -11px;
  line-height: 80%
}
.date.full div:before {
  height: 1.9em;
}

.date.full span {
  font-size: 0.8em
}

.article.corps ul {
  position: relative;
}

.article.corps img {
  max-width: 100%;
}

/* Ruban en haut à droite*/

.ribbon {
  background-color: #333333;
  overflow: hidden;
  /* top left corner */
  position: absolute;
  right: -3.4em;
  top: 1.6em;
  /* 45 deg ccw rotation */
  transform: rotate(45deg);
  /* shadow */
  box-shadow: 0 0 1em black;
  z-index:10;
}

.ribbon a {
  border: 1px solid #acca9a;
  color: #acca9a;
  display: block;
  font: bold 81.25% Arial, sans-serif;
  margin: 0.05em 0 0.075em 0;
  padding: 0.5em 3.5em;
  text-align: center;
  text-decoration: none;
  /* shadow */
  text-shadow: 0 0 0.5em #444;
  min-width: 18em;
}

.ribbon a span {
  color: #f9fbc0;
}

/* Liens / boite de  subscriptions */

.abo-links a {
  border:0
}

.abo-links {
  position: relative;
}

.abo-links.side-buttons {
  text-align:right;
  font-size: small;
}

.abo-links .abo {
  text-align: left;
  min-width: 100px;
  position: absolute;
  right: 0;
  background-color: #ACCA9A;
  z-index: 10;
  padding: 1em;
}

.abo-links img {
  width: 18px;
}

.abo-links.central img {
  width: 32px;
}

.abo-links.central .abo {
  width: 18em;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 3em;
  left: 0em;
}

.abo-links.central p {
  padding-bottom: 1em;
}

.abo-links.central input[] {
  padding-bottom: 1em;
}

.abo-links.sousbar .abo {
  left: -1px;
  right: -1px;
}

.abo table {
  width: 100%;
}

.abo table tr:last-child td {
  text-align: center;
  padding-top: 1em;
}

.abo input[type=text] {
  margin-top: 1em;
}

.abo-links .email td input {
  width: 100%;
  text-align: center;
}

form.single-button {
  text-align: center;
}

form.single-button input {
  font-size: x-large;
}


/* Captcha
*
* Defined inline in captchaproxy, overrided here.
*/
body .demi {
  margin: 0 0.5%;
}


/* media-queries (design desktop-first) */

@media screen and (max-width: 1024px) {
  #content {
	width: 72%;
  }
  #sidebar {
	width: 26.5%;
  }

  body .intro,
  body #tags_cadre,
  body #derniers_textes,
  body #vitrine {
	width: 100%;
	margin-top: 1.5em;
	margin-bottom: 0em;
  }

  body .apercu_texte {
	width: 50%;
	height: auto;
  }

  body #saviega,
  body #saviedr {
	float: none;
	width: 100%;
  }
}

@media screen and (max-width: 800px) {
  body {
	overflow-x: auto; /* Display  scrollbars */
  }

  h1 img {
	max-width: 100%;
	margin-left: 0;
  }

  #content {
	width: 99%;
  }

  #conteneur {
	width: 100%;
	margin: 0;
	left: 0%;
	right: 0%;
	top: 0%;
  }

  .page {
	border-left: none;
  }

  .page h2 {
	margin-left: 0
  }

  #content h2 {
	text-align: left;
  }

  .ribbon {
	position: static;
	width: 100%;
	margin: 0;
	transform: none;
	box-shadow: none;
  }

  .ribbon a {
	border: none;
  }

  #sidebar {
	width: 100%;
	margin-left: 0;
	background-color: #c04443
  }

  #sidebar .sousbar {
	border: none;
  }

  #sidebar h4,
  #sidebar .plus,
  #sidebar dt,
  #sidebar dd {
	text-align: left;
  }

  #sidebar dt {
	width: auto;
	min-width: 5em;
  }
  #sidebar dd {
	margin: 0;
  }
  #sidebar img.portrait {
	display: inline;
  }

  #sidebar #fiche_auteur a{
	border: none;
  }

  #comlist {
	padding: 0 3%;
  }

  .intro,
  #tags_cadre p {
	border-left: none;
	border-top: none;
	border-right: none;
  }

  #derniers_textes {
	border: none;
  }

  body .demi {
	float: none;
	width: 100%;
  }

  body .bl form {
	margin: 0 auto;
	text-align: center
  }
  .bl form label,
  .bl form input {
	text-align: center;
	max-width: 20em;
  }
  .bl form img {
	display: block;
	margin: 0 auto;
  }

  .bl form h3 {
	display: none;
  }

  .bl form p:last-child {
	text-align: left;
  }
}

@media screen and (max-width: 600px) {
  p#liens_acces a {
	margin: 0.1em 0;
  }

  .apercu_texte {
	width: 100%;
  }

  h1 {
	height: 3em;
  }

  #sonoeuvre h4 {
	float: none;
  }

  form input,
  form label,
  form textarea,
  form .help {
	width: 100%;
	margin-bottom: 0.5em;
  }

  #bugform label,
  #bugform .help {
	width: 100%;
  }

  form#bugform div {
	border: none;
  }
}

/* When menu does not fit on one line */
@media screen and (max-width: 42rem) {
  #topbar li {
	width: 49%;
	text-align: left;
	display: inline-block;
	white-space: nowrap;
	line-height: 150%;
  }
  #topbar li:last-child {
	margin-right: 0;
  }
}