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

:root {
--blanc: hsl(0, 0%, 100%);
--noir: hsl(0, 0%, 0%);
--presque-noir: hsl(0, 0%, 22%);
--gris-moyen: hsl(0, 0%, 42%);
--gris-clair: hsl(0, 0%, 66%);
--gris-plus-clair: hsl(0, 0%, 80%);
--gris-tres-clair: hsl(0, 0%, 95%);
--rouge: hsl(0, 100%, 30%);
--bleu: hsl(200, 100%, 30%);
--bleu-acier: hsl(207, 46%, 57%);
}

* { margin: 0; padding: 0; border: 0; }

::selection { background: var(--bleu); color: var(--blanc); }

/* liens
-------------------------------------------------------- */

a { color: var(--rouge); text-decoration: none; }
a:hover, a:active, a:focus { color: var(--noir); text-decoration: underline; }
header a { color: var(--gris-moyen); }
h1 a { color: var(--noir); }
footer a { color: var(--gris-moyen); text-decoration: none; }
footer a:hover { color: var(--noir); text-decoration: underline; }
#tag-links a { color: var(--gris-clair); text-decoration: none; }
#tag-links a:hover { color: var(--gris-moyen); text-decoration: underline; }
a img { border: none; }

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

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

/* Bonjour ! Miaou !

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


/* typographie & divers
-------------------------------------------------------- */

html { font-size: 16px; background-color: var(--blanc); }

pre { font-size: 100% }

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; }

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


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

#page { width: 88vw; max-width: 50rem; margin: 0 auto; padding: 0 2rem;}

p { width: 79vw; max-width: 42rem; }

header { margin-top: 2rem; margin-bottom: 2rem; height: 22vw; max-height: 170px; min-height: 116px;}

#nom-site { font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: clamp(1rem, 6vw, 2.6rem); }
#descript { margin-top: 1vw; font-size: clamp(1rem, 1.8vw, 2.6rem); height: 12.4vw; max-height: 96px; min-height: 0; }


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

header { background: url("https://navire.net/-img/sceau-gris.svg") no-repeat right top; }

header.home { background: url("https://navire.net/-img/sceau-rouge.svg") no-repeat right top; }

#nom-site { font-weight: normal; }

#descript { font-size: 1.1rem; font-style: italic; font-weight: 300; color: var(--gris-plus-clair); }

nav { font: 400 1rem "Lekton", sans-serif; text-transform: uppercase; letter-spacing: 2px; text-align: left; }

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

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

#page { font: 1rem "Noto Serif", serif; color: var(--presque-noir); line-height: 170%; }

#contenu.accueil, #contenu.liste, #contenu.preview, #contenu.billet { border-top: 1px solid var(--gris-tres-clair); padding: 2em 0 2em 0; margin: 0 0 4em 0; }

h1 { font: 400 1.1rem "Lekton", sans-serif; text-transform: uppercase; letter-spacing: 2px; color: var(--gris-clair); padding: 0.4rem 0 1rem 0; }

h2 { font: 400 1.1rem "Lekton", sans-serif; text-transform: uppercase; letter-spacing: 2px; padding: 1.4rem 0 1rem 0; }

h3 { font: 400 1rem "Noto Serif"; padding: 1.4rem 0 1rem 0; }

p { padding: 0.2rem 0; }

#tag-links { font: 400 1rem "Lekton", sans-serif; text-transform: uppercase; letter-spacing: 1px; padding: 1.4em 0 0 0; text-align: right; max-width: 100%; }

article iframe, article blockquote, article table { margin: 0.8rem 0; }

article p { width: 79vw; max-width: 40.5rem; }
article blockquote { border: 1px solid var(--gris-plus-clair); background-color: var(--gris-tres-clair); padding: 0.4rem 0.75rem; width: 79vw; max-width: 40.5rem; }
article blockquote p { width: 98%; }
article cite { font-style: normal; display: block; text-align: right; } 
article cite:before { content: "["; color: var(--gris-moyen); font-size: 120%; margin-right: 2px; }
article cite:after { content: "]"; color: var(--gris-moyen); font-size: 120%; margin-left: 2px; }
article mark { background: linear-gradient(-77deg, hsla(65, 90%, 66%,.3), hsl(65, 90%, 66%) 96%, hsla(65, 90%, 66%,.1)); }
article table { border-collapse: collapse; } article td { padding: 0.3rem; border: 1px solid var(--gris-moyen); }
article ul { margin: 1rem 0 1rem .2rem;  }
article li { list-style-position: inside; }
article li::marker { color: var(--gris-plus-clair); }
article abbr { border-bottom: dotted 1px; }
article abbr:hover { cursor: pointer; }
article figure { margin: 1rem 0 1rem 0; }
article figure img { max-width: 100%; }
article figcaption { font: 400 1rem "Lekton", sans-serif; line-height: 160%; color: var(--presque-noir); background-color: var(--gris-tres-clair); max-width: 100%; text-align: right; padding: 4px 1px; }

article p > img { margin: 1rem 0 1rem 0; border: 1px solid var(--gris-clair); }

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

footer { border-top: 1px solid var(--gris-tres-clair); padding-top: 1rem; margin-bottom: 22rem; }

.pagination { text-align: center; font: 400 1rem "Lekton", sans-serif; color: var(--gris-moyen); margin-bottom: 2em;
}

footer { font-size: 0.9rem; line-height: 150%; color: var(--gris-moyen); }

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

#sig-box-a { width: 400px; float: left; }
#sig-box-a li { padding-top: 6px; }
#sig-box-a span { font: 400 1.1rem "Lekton", sans-serif; text-transform: uppercase; letter-spacing: 2px; color: var(--gris-clair); }

#sig-box-b { width: 100px; float: left; padding-top: 6px; }
#sig-box-b li { display: block; height: 42px; }

#atom-icn { display: inline-block; width: 37px; height: 37px; background: url("https://navire.net/-img/icones-liens.svg") no-repeat 0 0; background-size: 150px 37px; } 
#atom-icn:hover { background-position: -38px 0; }

#blue-icn { display: inline-block; width: 37px; height: 37px; background: url("https://navire.net/-img/icones-liens.svg") no-repeat -76px 0; background-size: 150px 37px; } 
#blue-icn:hover { background-position: -114px 0; }

#atom-icn span, #blue-icn span { display: none; }

/* commentaires
-------------------------------------------------------- */

div.comment { width: 42rem; border-bottom: 1px solid var(--gris-tres-clair); }

#previsualisation .comment { width: 42rem; margin: 0.4rem 0 2rem 0; border: none; background-color: var(--gris-tres-clair); padding: 0 1rem 0.4rem 1rem; }

div.comment-reply { margin-left: 2rem; }

div.comment-meta { font: 400 0.9rem "Lekton", sans-serif; text-transform: uppercase; letter-spacing: 2px; color: var(--gris-clair); padding-top: 1rem;}

div.comment-meta a { color: var(--gris-moyen); text-decoration: none; }

div.comment-txt { font-size: 0.9rem; }

div.reply { margin-bottom: 0.6rem; }
div.reply a { font: 400 0.8rem "Lekton", sans-serif; text-transform: uppercase; letter-spacing: 2px; color: var(--gris-moyen); text-decoration: none; }

#invitation-commentaires { margin: 3rem 0 0 0; }


/* résultats recherche
-------------------------------------------------------- */

.resume p { font-size: 0.9rem; margin-bottom: 0; }

.resume h2 { font: 400 1rem "Lekton", sans-serif; text-transform: uppercase; letter-spacing: 2px; color: var(--gris-clair); padding: 1.4rem 0 0.4rem 0; }

.resume img { width: 74vw; max-width: 600px; margin: 0.5rem 0 0.2rem 0; border: 1px solid var(--gris-clair); }

.resume figure { margin: 0; }

.tags-resume { color: var(--gris-plus-clair); margin-top: 0; margin-bottom: 0.6rem; font: 400 1rem "Lekton", sans-serif; letter-spacing: 1px; text-align: right; }

nav.pagination { font: 400 1rem "Lekton", sans-serif; text-transform: uppercase; letter-spacing: 2px; text-align: center; padding-top: 4rem; }


/* formulaires
-------------------------------------------------------- */

#comments-form { width: 42rem; padding: 1rem; border: 1px solid var(--gris-tres-clair); border-radius: 8px; font: 400 0.8rem "Lekton", sans-serif;  letter-spacing: 2px; color: var(--gris-moyen); }

#previsualisation #comments-form { margin-bottom: 3rem; }

.preview h2 { font: 400 1rem "Lekton", sans-serif; text-transform: uppercase; letter-spacing: 2px; color: var(--gris-clair); padding: 1.4rem 0 1.4rem 0; }

#comments-form label { display: block; padding-bottom: 0.4rem; }
#comments-open-data li { list-style-type: none; margin: 0; }

#comments-open-data { width: 30%; margin-right: 6%; float: left; }
#comments-open-text { width: 60%; margin-right: 0; float: left; }
#comments-open-footer { clear: both; text-align: right; margin-right: 0.8rem; padding-top: 0.8rem; }

#comments-open-data input, #comments-open-text textarea { border: 1px solid var(--gris-tres-clair); border-radius: 4px; font: 0.9rem "Noto Serif", serif; color: var(--presque-noir); padding: 0.4rem; margin-bottom: 1rem; width: 100%; transition-property: background-color; transition-duration: 0.5s; }

#comments-open-data input:focus, #comments-open-text textarea:focus { background-color: var(--gris-tres-clair); }

input#comment-bake-cookie { width: 1.8em; float: inline-start; }
input#comment-bake-cookie, #label_bake_cookie {margin-top: 1.2rem;}

input#comment-reply { width: 1.8em; float: inline-start; }
input#comment-reply, #comment-reply-label {margin-bottom: 1.2rem;}

#comments-open-text textarea { height: 15rem; }

#comment-submit, #comment-preview, #comment-cancel { color: var(--blanc); background-color: var(--gris-clair); transition-property: background-color; transition-duration: 1s; border: 1px solid var(--gris-moyen); border-radius: 6px;
padding: 0.5rem 1rem 0.4rem 1rem; margin-left: 1rem; font: 400 0.9rem "Lekton", sans-serif; }

#comment-submit:hover, #comment-preview:hover, #comment-cancel:hover { background-color: var(--bleu-acier); cursor: pointer; text-decoration: none; }

input.search-txt {
display: inline-block;
width: 36px; height: 36px; 
background: url("https://navire.net/-img/loupe.svg") no-repeat 0 0; background-size: 40px 40px;
font: 400 0.9rem "Noto Serif"; color: var(--bleu) !important; 
cursor: pointer;
padding-left: 42px;
border: none;
transition: width 0.5s, background 0.3s ease, border 0.3s;
}

#sig-box-b form { height: 42px; }
::placeholder { color: var(--gris-plus-clair); opacity: 1; }
input.search-txt:focus { outline: none; }

input.search-txt:hover {
width: 300px;
background: url("https://navire.net/-img/loupe-hover.svg") no-repeat 0 0; background-size: 40px 40px;
border-bottom: 1px solid var(--gris-tres-clair); 
}
.error {
color: hsl(0, 0%, 96%);
background: hsl(46, 60%, 42%);
border: 1px solid hsl(45, 70%, 44%);
border-radius: 6px;
padding: 0.2rem 0.8rem;
margin: 1.4rem 0;
}
.success {
color: hsl(0, 0%, 96%);
background: hsl(155, 60%, 42%);
border: 1px solid hsl(155, 70%, 44%);
border-radius: 6px;
padding: 0.2rem 0.8rem;
margin: 1.4rem 0;
}

/* page d’accueil
-------------------------------------------------------- */

#recent h2, #nuage h2, #archives h2, #blogo  { padding-top: 3rem; }

#blogo ul { margin: 1rem 0 1rem .2rem; }
#blogo li { list-style-position: inside; }
#blogo li::marker { color: var(--gris-plus-clair); }


/* Divers archive
-------------------------------------------------------- */

ul.liste-billets { list-style-type: none; margin: 1.4rem 0; width: 90%; }
ul.liste-billets a { display: inline-block; width: 380px; }
span.liste-date { display: inline-block; width: 120px; text-align: right; padding-right: 25px; padding-top: 4px; }
span.liste-coms { display: inline-block; width: 50px; color: var(--gris-plus-clair); text-align: right; }

.bloc-archives { display: inline-block; width: 32%; margin-top: 10px; padding-bottom: 12px; margin-right: 6px; padding-top: 0; padding-left: 6px; border-bottom: 1px solid var(--gris-plus-clair); background-color: var(--gris-tres-clair); }
.bloc-archives li { list-style-type: none; margin: 0; }

/* nuage
-------------------------------------------------------- */

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

li.tag10 a { border-radius: 45px; width: 90px; height: 90px; line-height: 90px; font-size: 0.6rem; }
li.tag9 a { border-radius: 50px; width: 100px; height: 100px; line-height: 100px; font-size: 0.7rem; }
li.tag8 a { border-radius: 55px; width: 110px; height: 110px; line-height: 110px; font-size: 0.8rem; }
li.tag7 a { border-radius: 60px; width: 120px; height: 120px; line-height: 120px; font-size: 0.9rem; }
li.tag6 a { border-radius: 65px; width: 130px; height: 130px; line-height: 130px; font-size: 1rem; }
li.tag5 a { border-radius: 70px; width: 140px; height: 140px; line-height: 140px; font-size: 1.1rem; }
li.tag4 a { border-radius: 75px; width: 150px; height: 150px; line-height: 150px; font-size: 1.2rem; }
li.tag3 a { border-radius: 80px; width: 160px; height: 160px; line-height: 160px; font-size: 1.3rem; }
li.tag2 a { border-radius: 85px; width: 170px; height: 170px; line-height: 170px; font-size: 1.4rem; }
li.tag1 a { border-radius: 90px; width: 180px; height: 180px; line-height: 180px; font-size: 1.5rem; }

#nuage li.tag10 a { opacity: 55%; }
#nuage li.tag9 a { opacity: 60%; }
#nuage li.tag8 a { opacity: 65%; }
#nuage li.tag7 a { opacity: 70%; }
#nuage li.tag6 a { opacity: 75%; }
#nuage li.tag5 a { opacity: 80%; }
#nuage li.tag4 a { opacity: 85%; }
#nuage li.tag3 a { opacity: 90%; }
#nuage li.tag2 a { opacity: 95%; }
#nuage li.tag1 a { opacity: 100%; }

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

#nuage li a:hover {
background-color: hsl(207, 46%, 67%);
border: 2px solid hsl(207, 46%, 77%) ;
transition-property: border-color, background-color;
transition-duration: 0.5s;
}


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

@media (max-width: 840px) {

div.comment { width: 88vw; }

#comments-form { width: 76vw; }
#comments-open-data { width: 30vw; min-width: 260px; }
#comments-open-text { width: 74vw; }
#comments-open-footer { width: 76vw; }

#comments-open-data { margin-bottom: 2rem; float: none; }
#comments-open-text, #comments-open-text label { float: none; }
#comments-open-footer { padding-bottom: 1rem; }

#sig-box-a { width: 50vw; }

ul.liste-billets a { display: inline-block; width: 50vw; }
span.liste-date { display: inline-block; width: 8vw; }
span.liste-coms { display: inline-block; width: 5vw; }

}

@media (max-width: 644px) { 

#page { font-size: 0.9rem; }

#sig-box-a { width: 80vw; }
#sig-box-b { margin-top: 1rem; }

#comments-form { width: 82vw; }
#comments-open-text { width: 78vw; }
#comments-open-footer { width: 80.5vw; }

}




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



*/