* {margin:0; padding: 0;}

body {
background:url(index.php?tf=images/fond.jpg) top center;
color:#000;
font-family:"Trebuchet MS", Tahoma, sans-serif;
font-size:13px;
/*par défaut 12px*/
line-height:135%;
text-align:left;
}

/*pour modifier le style des liens vers footnotes*/
sup {
    line-height: 0;
    font-size: 80%;
}

/*pour espace nulle et insécable (⁠) devant tous les exposants*/
sup::before {
    content: "\2060";
}

/*j'ai carrément rajouté une définition de figcaption pour ajouter de l'espace en dessous des commentaires de photo*/
figcaption {
    margin-bottom: 0.7619048em;
}

/*tous les blockquotes servent aux blocs de citation*/
blockquote, q {
  font-family: "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
  color: #636363;
  font-style: italic; }

blockquote {
  font-size: 1.125em;
  line-height: 1.33;
  quotes: '\201C' '\201D';
  margin-top: 1.7777778em; }

blockquote:before,
blockquote:after {
  margin-top: 0;
  font-size: 3em;
  display: block;
  line-height: .25;
  color: #dcdcdc;
  margin-bottom: 0; }

blockquote:before {
  content: open-quote;
  float: left;
  margin-right: .25em; }

blockquote:after {
  content: close-quote;
  text-align: right; }

blockquote p:first-child {
  margin-top: 0; }

/*j'ai personnalisé h4 pour lui mettre de l'espace en dessous avec margin-bottom*/
h1 {font-size: 200%;}
h2 {font-size: 175%; text-align: left;}
h3 {font-size: 150%;}
h4 {font-size: 125%; margin-bottom: 0.7619048em;}
h5 {font-size: 100%;}
h1,h2,h3,h4,h5 {font-weight: 100;}

/*j'ajoute la ligne ci-dessous pour tenter que le texte préformaté reste dans sa boîte*/
pre {white-space: normal;}

/*j'ai personnalisé ul et ol pour lui mettre de l'espace en dessous avec margin-bottom*/
p {font-size: 100%;}
.post-excerpt p, .post-content p {line-height: 150%;}
ul {margin-bottom: 0.7619048em;}
ol {margin-bottom: 0.7619048em;}
li {list-style: none;}
.post-content img {max-width:508px;}
.post {margin-bottom: 30px;}

a { color:#65798E; text-decoration:none; }
a:hover {background: #E3EAF2;}

a img { border:none; }

#page { width:100%; }
#wrapper { margin:0 auto; width:860px;}
#footer { background:url(index.php?tf=images/footer.jpg) top center no-repeat; clear:both; height:105px; text-align:center; margin-top:20px;}
#footer p { margin:0 auto; padding-top:15px; width:860px; }
#prelude {visibility:hidden;}

#top { height:79px; height: 550px;}
#top h1 { color:#000; font-size:22px; font-weight:400; margin:0 auto; padding-right:35px; position:relative; text-align:right; text-transform:uppercase; top:16px; width:860px; padding-top: -20px; }

.post,#comments,#comment-form,#pings, content-inner h3 {background:url(index.php?tf=images/bg_post_h2.jpg) no-repeat; clear:both; margin-left:-16px; text-align:start; }
.post-title,#comments h3,#comment-form h3,#pings h3 { color:#65798E; margin-top:15px; padding-top:17px; text-transform:uppercase;}
.post-title {line-height: 120%;}
.post-tags li { display:inline; }
.post-info, .post-info-co {padding: 4px 0;}
.post-excerpt, .post-content {margin: 12px 0;}
.post-info-co { clear:both; text-align:right; }
.day-date {display:none;}

#sidebar { width:256px; margin-bottom: 30px;}
#sidebar #topnav {background:none;}

#sidebar div div { background:url(index.php?tf=images/bg_div_sidebar.png) no-repeat; margin-top:35px; padding:30px 10px 0 25px; }
#sidebar h2 { color:#65798E; margin-bottom:10px; text-transform:uppercase; ; }

#sidebar h3 { color:#65798E; font-size:1em; margin-top:15px; }
#sidebar li {padding-bottom: 4px;}
#sidebar li a,#content-info h2,#subcategories h3 { color:#65798E; }
/* #sidebar li a:hover { color:#65798E; text-decoration:underline; } */

fieldset {border: none;}
#search #q { width:120px; }
#search input { background:#E3EAF2; border:none; color:#666; margin-right:10px; padding:2px; }

li { background:url(index.php?tf=images/bg_li.png) no-repeat; padding-left:14px; }

.post-excerpt p, .post-content p {margin-bottom: 12px; font-size: 14px;}
/*par défaut font-size 13px*/
.post-excerpt li, .post-content li {font-size: 14px; line-height: 150%;}
/*par défaut font-size 13px hihi*/
.post-content h4 {margin-top: 12px;}

#comment-form p.field label { display:block; }
#comments dd,#pings dd { background:#E3EAF2; margin-bottom:45px; padding:5px; }
#comments dt,#pings dt { background:transparent url(index.php?tf=images/bg_comment_infos.jpg) no-repeat scroll 100% 100%; margin:-45px 0 0; padding:45px 0 3px; }
#comments dt.first,#pings dt.first { margin-top:0.25em;}
#pings {margin-top: 30px;}
p#ping-url {margin:20px 0;}
dd.comment-preview {background: #E3EAF2; padding: 4px;}
p#pr.message {background:#65798E; color:white; padding: 4px; text-align:center; margin-bottom: 36px;}

.pagination {margin: 20px 0;}

#content-info h2 {margin-bottom:10px;}
#content-info p:last-child {margin-top: 10px;}
#subcategories {margin-top:20px;}
#subcategories li { display: none;}
.dc-category .post.first, .dc-tag .post.first, .dc-archive-month .post.first {margin-top: 30px;}
pre {padding: 10px; background: #E3EAF2;}

p.field, p.form-help, p.remember, p.buttons { line-height: 150%; padding-top: 1em; }
input#c_name, input#c_mail, input#c_site { background: none repeat scroll 0 0 #E3EAF2; border: medium none; width: 40%; padding: 4px; }
textarea#c_content { background: none repeat scroll 0 0 #E3EAF2; border: medium none; width: 100%; padding: 4px; }
input.submit, input.preview, #search input {background: #E3EAF2; border: none; padding: 4px; text-transform:uppercase;}
input.submit:hover, input.preview:hover, #search input:hover {background:#65798E; color:white;}

.content-inner h3 {
    background: url("index.php?tf=images/bg_post_h2.jpg") no-repeat scroll 0 0 transparent;
    clear: both;
    height: 60px;
    margin-left: -17px;
    margin-top: 60px;
    padding-left: 28px;
    padding-top: 20px;
    text-align: justify;
}

.dc-archive-month #content-info {margin-top: 20px;}
.post-info-co a {padding: 0 12px;}
#comments-feed {margin-top: 12px;}

/*ci-dessous mes classes personnalisées pour magnificPopup*/

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #ccc;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  padding-right: 12px;
}
/*
.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #ccc;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}*/

/* Main image in popup */

img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 90px;
  margin: 0 auto;
}
/*
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px; ou 90 pour le dernier, pour monter l'image
  margin: 0 auto;
}*/

/* The shadow behind the image */

.mfp-figure:after {
  content: '';
  position: absolute;
  left: 0;
  top: 40px;
  bottom: -10px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}
/*sauvegarde modif 01/12/2022
.mfp-figure:after {
  content: '';
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px; ou -40 ou 10 ou 0 jusqu'où descend le fond gris
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444; couleur du gris
}
*/
.mfp-bottom-bar {
  margin-top: -90px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}
/*
.mfp-bottom-bar {
  margin-top: -36px; ou -90 hauteur de la légende de l'image
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
  background: rgba(0, 0, 0, 0.9);
}*/
.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #f3f3f3;
  word-wrap: break-word;
  padding-right: 80px;
  padding-left: 12px;
}
/*
.mfp-title {
  text-align: left;
  line-height: 18px; espace entre chaque ligne
  color: #f3f3f3;
  word-wrap: break-word;
  padding-right: 36px;
}*/

/* Transitions */

/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.99s ease-in;
  -moz-transition: all 0.99s ease-in;
  transition: all 0.99s ease-in;
}
/*
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}*/

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all 0.99s ease-out;
  -moz-transition: all 0.99s ease-out;
  transition: all 0.99s ease-out;
}
/*
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}*/