/* @override https://navire.net/-css/navire-2015.css */

/* @override https://navire.net/-css/navire-2015.css */

@import url("https://fonts.googleapis.com/css?family=Lekton:400%7CNoto+Serif:400,700,400italic,700italic%7CMerriweather+Sans:400,400italic,300italic,300");

* { margin: 0; padding: 0; }

iframe, fieldset { border: 0; }

a { color: #990000; text-decoration: none; }
a:hover, a:active, a:focus { color: hsl(0, 0%, 0%); text-decoration: underline; }
header a { color: hsl(0, 0%, 42%) }
article h1 a { color: hsl(0, 0%, 33%); }
footer a { color: hsl(0, 0%, 42%); text-decoration: underline; }
footer a:hover { color: hsl(0, 0%, 22%); text-decoration: none; }
p.tag-links a { color: hsl(0, 0%, 33%); text-decoration: none; }
p.tag-links a:hover { text-decoration: underline; }
a img { border: none; }

::selection { background: hsl(200, 100%, 42%); color: #fff; }

/* meta
-------------------------------------------------------- */

.clear { clear: both; line-height: 0; }
.right { text-align: right; }

/* Bonjour ! Miaou !

      ,-~-,       ,-~~~~-,    /\  /\
(\   / ,-, \    ,'        ', /  ~~  \
 \'-' /   \ \  /     _      #  <0 0> \
  '--'     \ \/    .' '.    # =  Y  =/
            \     / \   \   `#-..!.-'
             \   \   \   `\ \\
              )  />  /     \ \\
             / /`/ /`__     \ \\__
           (____)))_)))     \__)))


rouge 990000 gris e2e2e2

/* typographie et divers
-------------------------------------------------------- */

pre { }

sup { font-size: 80%; vertical-align: baseline; position: relative; line-height: 0; top: -0.4em; }

b, strong { font-weight: 700; }

i, em { font-style: italic; }

/* structure
-------------------------------------------------------- */

body {
margin: 0 42px;
background-color: #fff;
color: hsl(0, 0%, 20%);
font: 16px "Noto Serif", helvetica;
line-height: 170%; 
}

header, nav, article, footer { width: 800px; margin: 0 auto; }

footer { padding-top: 10px; margin-top: 10px; margin-bottom: 420px; border-top: 1px solid hsl(0, 0%, 95%); }


/* header
-------------------------------------------------------- */

header { background: url("../-img/sceau-gris.png") no-repeat right top; height:170px; padding-bottom: 20px; margin-top: 20px; }

header#navire { background: url("../-img/sceau-rouge.png") no-repeat right top; }

#nom-site { font-size: 42px; font-weight: normal; margin-top: 22px; letter-spacing: 0px; line-height: 42px;  }

nav, #motto { font: 400 16px "Lekton", helvetica, sans-serif; text-transform: uppercase; letter-spacing: 2px;  text-align: left; padding-top: 2em; }

nav li { display: inline; margin-right: 2em; list-style-type: none; }


/* article
-------------------------------------------------------- */


article { padding: 0 0 66px 0; border-top: 1px solid hsl(0, 0%, 95%); }

div.texte { margin: 22px 0 42px 0; }


h1 { font: 400 16px "Lekton", helvetica, sans-serif; text-transform: uppercase; width: 800px; margin: 0 auto; letter-spacing: 2px; padding: 2em 0 0 0; color: hsl(0, 0%, 66%); }

div.time_stamp {  }

h2 { font: 400 22px "Noto Serif"; padding: 16px 0 12px 0; }

p { margin: 0; padding: 2px 0; }

p.tag-links { font: 400 16px "Lekton", helvetica, sans-serif; text-transform: uppercase; text-align: right; letter-spacing: 1px; padding: 1em 0 0 0; }

article img, article iframe, article blockquote, article table { margin: 12px 0; }

article img { border: 1px solid hsl(0, 0%, 42%); margin: 12px 0;}
article iframe { border: none; }
article blockquote { border: 1px solid hsl(0, 0%, 86%); background-color: hsl(0, 0%, 96%); padding: 6px 12px;  }
article table { border-collapse: collapse; } article td { padding: 5px; border: 1px solid hsl(0, 0%, 42%); }
article cite { font-style: normal; display: block; text-align: right; } 
article cite:before { content: "["; color: #777; font-size: 120%; margin-right: 2px; }
article cite:after { content: "]"; color: #777; font-size: 120%; margin-left: 2px; }
article mark { background-color: hsl(65, 90%, 66%); }
article li { margin: 0 0 1px 1.2em; }
article abbr { border-bottom: dotted 1px; }
article abbr:hover { cursor: pointer; }

hr { border: 0; margin: 16px 0; height: 1px; background-image: linear-gradient(to right, hsl(0, 0%, 100%), hsl(0, 0%, 95%), hsl(0, 0%, 100%)); }


/* pied de page
-------------------------------------------------------- */

.pagination { text-align: center; font: 400 17px "Lekton", helvetica, sans-serif; color: hsl(0, 0%, 50%); margin-bottom: 2em;
}

footer { font-size: 14px; line-height: 150%; color: hsl(0, 0%, 42%); }

footer li { list-style-type: none; }

#sig-box-a { width: 400px; float: left; }
#sig-box-a ul { padding: 4px 0 0 0; }
#sig-box-a li { padding-bottom: 6px; }
#sig-box-a span { font: 400 17px "Lekton", helvetica, sans-serif; text-transform: uppercase; letter-spacing: 3px; color: #a0a0a0; }
#sig-box-b { width: 370px; float: left; padding-top: 8px; }
#sig-box-b li { display: block; height: 36px; }

#atom-icn { display: inline-block; width: 30px; height: 30px; background: url("../-img/icones-2012.png") no-repeat -31px 0; margin-right: 3px; } #atom-icn:hover { background-position: -31px -30px; }
#atom-icn2 { display: inline-block; width: 30px; height: 30px; background: url("../-img/icones-2012.png") no-repeat -31px 0; } #atom-icn2:hover { background-position: -31px -30px; }
#twitt-icn { display: inline-block; width: 30px; height: 30px; background: url("../-img/icones-2012.png") no-repeat 0 0; margin-right: 3px; } #twitt-icn:hover { background-position: 0 -30px; }
#fck-icn { display: inline-block; width: 30px; height: 30px; background: url("../-img/icones-2012.png") no-repeat -62px 0; margin-right: 3px; } #fck-icn:hover { background-position: -62px -30px; }
#glp-icn { display: inline-block; width: 30px; height: 30px; background: url("../-img/icones-2012.png") no-repeat -93px 0; margin-right: 3px; } #glp-icn:hover { background-position: -93px -30px; }
#lkd-icn { display: inline-block; width: 30px; height: 30px; background: url("../-img/icones-2012.png") no-repeat -124px 0; margin-right: 3px; } #lkd-icn:hover { background-position: -124px -30px; }
#nav-icn { display: inline-block; width: 30px; height: 30px; background: url("../-img/icones-2012.png") no-repeat -155px 0; margin-right: 3px; } #nav-icn:hover { background-position: -155px -30px; }
#atom-icn span, #atom-icn2 span, #twitt-icn span, #fck-icn span, #glp-icn span, #lkd-icn span, #nav-icn span { display: none; }


/* commentaires
-------------------------------------------------------- */
.comments, #comment_pr {
font: 400 15px/20px "Noto Serif";
color: hsl(0, 0%, 42%);
line-height: 140%;
}

body.index .comments {
margin-bottom: 2em;
}

li.comment {
list-style-type: none; 
border-top: 1px solid hsl(0, 0%, 95%);
margin: 0; padding: 0;
}

body.index ul.comments-list, #pr ul.comments-list {
border-bottom: 1px solid hsl(0, 0%, 95%);
}

#pr ul.comments-list {
margin: 20px 0; padding: 0;
}

p.vedette {
width: 25%; float: left; 
padding: 6px 0 0 0px;
}

p.vedette span {
display: block;
width: 100%;
}

.comment-content { 
margin-left: 25%;
padding: 4px 0 6px 16px;
}

.me { color: hsl(0, 0%, 33%); }

/* Grand maître de l'ordre des trolls */
.x766d271ba5ed302912377e4e34f07a02 { background: url("../-img/ancre.gif") 140px no-repeat; }

/* Autres dignitaires */
.x3303469d6d6015ddee735376fbd16fa9 { background: url("../-img/banana-xave.png") 42px no-repeat; }
.xc51d39fe0d256f16e0d743cde9f71cc2 { background: url("../-img/karlcow.png") 122px no-repeat; }
.x90e72b994e3435ea66c605f214f5a5d1 { background: url("../-img/off-top.png") 74px no-repeat; }

/*.x71f4557dc6cf167e0e2d { background: url("../-img/krysalia.png") no-repeat 62px 28px; }
.xec2d145940518c1544b8 { background: url("../-img/guillermito.png") no-repeat 85px 25px; }
.x67cb058822506192e3f5 { background: url("../-img/off-top.png") no-repeat 65px 24px; }*/

h2.minou { font: 400 16px/22px "Merriweather Sans"; margin: 0; padding: 0; }


/* forms
-------------------------------------------------------- */

div.panel {
font: 300 14px/22px "Merriweather Sans";
height: 520px;
color: hsl(0, 0%, 42%);
display: none;
margin-top: 2em;
}

div.bouton, input.bouton, #search input.submit {
display: inline-block;
padding: 6px 12px;
margin-right: 12px;
font: 400 14px "Merriweather Sans";
letter-spacing: 1px;
color: hsl(0, 0%, 50%);
border-radius: 6px; 
background-color: hsl(0, 0%, 94%);
transition-property: background-color, color;
transition-duration: 1s;
border: 1px solid hsl(0, 0%, 89%);
}

input.envoyer {
color: hsl(0, 0%, 42%);
background-color: hsl(77, 50%, 70%);
transition-property: background-color, color;
transition-duration: 0.5s;
}

div.bouton:hover, input.bouton:hover, #search input.submit:hover {
background-color: hsl(77, 50%, 42%);
color: #fff;
transition-property: background-color, color;
transition-duration: 0.5s;
cursor: pointer;
}

.commenter { text-align: center; }

.blah, .blah_idx { margin-top: 2em; font: 400 16px "Lekton", helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; padding: 1em; transition-property: background-color, color; transition-duration: 1s;}

.blah_idx:hover {
background-color: hsl(0, 0%, 50%);
color: hsl(0, 0%, 90%);
transition-property: background-color, color;
transition-duration: 1s;
cursor: pointer;
}

a.zcomment_box { color: hsl(0, 0%, 20%); }
a.zcomment_box:hover { text-decoration: none; }

div.boutons {
margin-top: 12px;
}

fieldset.hors_boutons, p.remember {
background-color: hsl(0, 0%, 95%);
padding: 12px;
margin-bottom: 12px;
border-radius: 6px;
}

fieldset p.field {
padding: 6px 0;
}

p.form-help {
width: 66%;
margin: 0 0 0 28%;
padding: 0 6px;
font-style: italic;
}

p.field label {
display: block;
width: 28%;
float: left;
text-align: right;
padding: 6px;
white-space: nowrap;
}

textarea, p.field input {
font: 300 14px/22px "Merriweather Sans";
background-color: hsl(0, 0%, 90%);
border: 1px solid hsl(0, 0%, 77%);
padding: 6px;
width: 66%;
}

textarea:focus, p.field input:focus {
background-color: hsl(0, 0%, 98%);
}

#pr {
font: 300 16px/22px "Merriweather Sans";
margin: 26px 0;
}

#pr h3 {
font: 400 16px/26px "Merriweather Sans";
}

#pr.error { padding: 8px 10px; }

.error {
background: hsl(46, 60%, 42%);
border: 2px solid hsl(45, 70%, 44%);
border-radius: 6px;
color: hsl(0, 0%, 96%);
}

#pr.message { padding: 8px 10px; }

.message {
background: hsl(155, 60%, 42%);
border: 2px solid hsl(155, 70%, 44%);
border-radius: 6px;
color: hsl(0, 0%, 96%);
}


/* tags
-------------------------------------------------------- */

div.nuage { padding-top: 16px;}

div.nuage li { display: inline; margin: 5px; list-style-type: none; font: 400 16px "Lekton", helvetica, sans-serif; text-transform: uppercase; letter-spacing: 2px; }

div.nuage li a {
display: inline-block;
background-color: hsl(0, 0%, 95%);
border: 2px solid hsl(0, 0%, 94%);
text-align: center;
margin: 6px;
transition-property: background-color, border-color;
transition-duration: 0.5s;
}

div.nuage li a:hover {
background-color: hsl(0, 0%, 50%);
border: 2px solid hsl(0, 0%, 100%);
transition-property: background-color, border-color;
transition-duration: 0.5s;
}

a.tag100 { border-radius: 110px; width: 220px; height: 220px; line-height: 220px; font-size: 2.6em; }
a.tag90 { border-radius: 105px; width: 210px; height: 210px; line-height: 210px; font-size: 2.4em; }
a.tag80 { border-radius: 100px; width: 200px; height: 200px; line-height: 200px; font-size: 2.2em; }
a.tag70 { border-radius: 95px; width: 190px; height: 190px; line-height: 190px; font-size: 2em; }
a.tag60 { border-radius: 90px; width: 180px; height: 180px; line-height: 180px; font-size: 1.8em; }
a.tag50 { border-radius: 85px; width: 170px; height: 170px; line-height: 170px; font-size: 1.6em; }
a.tag40 { border-radius: 80px; width: 160px; height: 160px; line-height: 160px; font-size: 1.4em; }
a.tag30 { border-radius: 75px; width: 150px; height: 150px; line-height: 150px; font-size: 1.2em; }
a.tag20 { border-radius: 70px; width: 140px; height: 140px; line-height: 140px; font-size: 1em; }
a.tag10 { border-radius: 65px; width: 130px; height: 130px; line-height: 130px; font-size: 0.8em; }
a.tag0 { border-radius: 60px; width: 120px; height: 120px; line-height: 120px; font-size: 0.6em; }


/* recherche
-------------------------------------------------------- */

#search fieldset { border: none; margin: 0; padding: 0; }

div#search.erreur_404 { margin-bottom: 22px; }

div#search.tags { margin-top: 22px; text-align: center; }

#search input {
display: inline-block;
border: 1px solid hsl(0, 0%, 42%);
border-radius: 6px; 
padding: 6px 12px;
margin-right: 12px;
color: hsl(0, 0%, 50%);
background-color: hsl(0, 0%, 90%);
font: 300 14px "Merriweather Sans";
transition-property: background-color, border;
transition-duration: 1s;
}

#search input:focus {
border: 1px solid hsl(0, 0%, 20%);
background: hsl(142, 22%, 91%);
color: hsl(0, 0%, 20%);
transition-property: background-color, border;
transition-duration: 1s;
}

#content-info {
margin: 16px 0;
}

/* responsive
-------------------------------------------------------- */

@media only screen and (max-device-width: 870px), only screen and (max-width: 870px) {

body { margin: 0 32px; }

header, nav, article, footer, div.time_stamp { max-width: 100%; }

header { background: url("../-img/sceau-gris_142.png") no-repeat right top; height: 142px; padding-bottom: 20px; margin-top: 20px; }

header#navire { background: url("../-img/sceau-rouge_142.png") no-repeat right top; }

#date-pub { font-size: 15px; margin-left: 0px; padding-top: 9px; width: 60%; }

nav { top: 142px; right: 220px; position: absolute; font-size: 15px; }

nav li { margin-right: 0px; margin-left: 16px; }

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

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
    
}
       
@media only screen and (max-device-width: 480px), only screen and (max-width: 480px)  {

nav { top: auto; right: auto; position: relative; text-align: left; padding-top: 1em; }

nav li { margin-left: 0px; }


/*
                 .-.   .-.
                /   \ /   \ 
            .-. |    |    | .-.
           /   \ \  / \  / /   \
           |   |  '`.-.`'  |   |
            \_.' .-`   `-. '._/
              .-'         '-.
             /               \
             |               |
              \             /
               '.___...___.'



*/