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

#header{
    padding:0; 
    margin-bottom: 3em;

}

@media only screen and (max-width: 760px) {
    #header{
        padding:0 1em;
    }
}
    
#banner {
    max-width: 700px;
    height: 150px;
    margin: 1.5em auto 0;
    text-align: center;
    border-radius: 7px;
}
#banner img {
    max-width: 560px;
    margin: 1em 0 0 0;
}
.banner {
    min-height: 6em;
    max-width: 26em;
    border-radius: 4px;
    margin: 0.5em auto 0 auto;
}
.banner img {
    margin: 0 auto;
    display: block;
}


.banner-art1 img{
    width: 180px;
    display: block;
    margin: auto;
    
}

h1.art-header-titre {
  font-weight: 600;
  font-size: 3em;
  margin: .8em auto .3em;
  line-height: 1em;
  max-width: 800px;
  text-align: center;
}
}
@media only screen and (max-width: 768px) {
   h1.art-header-titre {
    font-size: 3em;
}
}

.art-type {

    text-transform: uppercase;
    margin: 1em 0 0 0;
    letter-spacing: 0.02em;
     font-weight: 500;
}
.art-type a {
    text-decoration: none;
}

.art-header-auteur {
    margin:0;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-weight: 500;
}
.art-header-auteur a{
    
    font-weight: 700;
    border-bottom: 1px solid;
}
.art-header-auteur a:hover{
    text-decoration: none;
    border-width: 2px;
}
i.fi{
font-size: 1.3em;
margin: 1.5em 0px 0.3em;
display: inline-block;
}
p.art-header-texte {
max-width: 450px;
margin: .5rem auto 0;
text-align: justify;   
}

.art-header-genre {
    margin-top: 1em;
    padding: 0.5em;
    font-weight: 100;
    text-transform: uppercase;
    font-size: 0.75em;
}
.art-header-genre a {
    text-decoration: none;
}
.art-header-genre a:hover {
    opacity: 0.7;
    box-shadow: none;
}


.art-header-social{
font-weight: 100;
margin: 1em 0 0 1em;
font-size: 1.1em;
    text-transform: uppercase;    
}
.art-header-social a{
    
    margin:1em;
    
}
.art-header-social a i{
    font-size: 1.5em;
}


.art-header-date{
       font-size: 0.9em;
    margin: 0.5em 0 0 0;
    font-style: italic;
    font-family: "Merriweather",sans-serif;
}
/*

.art-header-date a{text-decoration: none;
}
.art-header-date i{
    font-size: 1.2em;
}
*/

/*
titre de 2e niveau générique
*/

h2.sous-section{
text-align: center;
padding: 20px;
font-size: 30px;
text-transform: uppercase;
font-weight: 400;
}


#subnav {
    background: rgba(255, 255, 255, 0.8);
    height: 30px;
}
.separateur {
    height: 1em;
}
.a_propos {
    border-top: 1px solid;
    font-size: 0.9em;
    padding: 0.7em 0 0;
    width: 75%;
}
.art-infos-chiffres {
    text-align: center;
    margin-bottom: 1em;
    font-size: 0.9em;
}
#suggestions li {
    float: left;
    margin-right: 2%;
    text-align: center;
    width: 31%;
}


/* --- 
        Les boutons sociaux et likes 
--- */

.interact{
margin: 1em auto 3rem;
background: #fff;
border-top: 2px solid #dadada;
    padding-top: 2rem;
}
.interact h3{
    text-transform: uppercase;
    color: rgb(255,71,73);
    border-bottom: 2px solid;
    display: inline-block;
}
.interact .icon{
/*    display:block;*/
    width:180px;
  padding: 0.3em 0 0 0.5em;
}
.interact .icon.fav{
    margin: 20px 0px 0px 2px;
}

/* font icons autour des pages */

.interact .fi-social-heart{
     font-size:1.4em;
    margin-right:2px;
    
}
.tout{
    font-size:1.4em;
    margin-right:2px;
    color: #333;
}
.social{
    text-align: center;
  
}
.social .icon{
  display: inline-block;
margin: .4em;
    text-transform: uppercase;
    font-weight: 700;

}
.social .icon a{color: #333;}
.social .facebook:hover{
    color:#3B5998;
    text-decoration: none;
        transform: scale(1.05);
    transition: transform 500ms ;
}
.social .twitter:hover{
    color:#00aced;
      text-decoration: none;
    transform: scale(1.05);
    transition: transform 500ms ;
}

/* Don paypal */

.social .paypal{
    
border-bottom: 1px solid #eee;
padding: 1rem;
margin: 1rem 0;
    background: rgba(255, 249, 199, 0.26);
    
}


/* --- 
        diaporama vertical
--- */

/*  lecteur */
.bloc-image .conteneur_image_responsive_h{
     background-color: #e0e0e0;
    animation: breathing-strong 1.5s ease-in-out infinite;
}

@keyframes breathing-strong {
    0%, 100% {
        background-color: #e0e0e0;
   
    }
    50% {
        background-color: #f5f5f5;
 
    }
}


.bloc-image picture{
    display: block;
}

/* --- 
        diaporama page à page
--- */

#bloc-image {
    margin:10px 20px;
    margin: 0 auto;
}

#bloc-image.diapo{
    height:730px;
    max-width: 1200px;
}

/* surcharge du thème owl */

#bloc-image .owl-theme .owl-dots .owl-dot span{

border-radius: 0;
width: 9px;
height: 14px;
margin: 5px 3px;
background: #eee;
}
#bloc-image .owl-theme .owl-dots .owl-dot.active span, #bloc-image .owl-theme .owl-dots .owl-dot:hover span{
    background: #129ff0;
    
}
/*
.owl-carousel .owl-item{
    height: 600px;
}
*/
#bloc-image .owl-carousel .owl-item img{
    max-height: 650px;
    margin: 0 auto;
    width: auto;
}


/* 

barre de progression 

*/

#progress-data {
    font-size: 14px;
    left: 8px;
    width:4em;
    position: sticky;
    top: 52px;
    display: none;
    z-index: 2500;
}

@media only screen and (max-width: 760px) {
    #progress-data {
        z-index:2000; /* pour passer au dessus des images, on affiche juste la page en cours ex: 4/24 */
    }

}

.progress-container {
    overflow: hidden;
    display: none;
    position: sticky;
     top:48px;
    height: 4px;
    background: #fff;
    z-index: 2000;
    

}

.progress-bar {
    width: 0%;
    transition: width .8s;
    display: block;
    height: inherit;
    border-right: 2px solid var(--bleu-clair);
    background: #222;
}



/* ---
        texte à gauche 
----*/

.doc-descriptif {
   font-size: 11px;
padding: 0px 10px 0px 5px;
border-left: 1px solid #ccc;
margin: 10px auto 0;
font-family: "Merriweather", sans-serif;
color: #333;
max-width: 70%;
}
/* --- 
        droite
---*/



.webcomic .nbcom{
transition: all .2s ease-in-out;


font-size: 1.4em;
color: #ccc;
padding: 1em 0;
text-align: center;
}

.webtoon .nbcom{
    
transition: all .2s ease-in-out;
width: 50px;
position: sticky;
top: 90px;
font-size: 1.4em;
color: #ccc;
padding: 1em 0;
text-align: center;
    
}

.nbcom:hover{
transform:  scale(1.1);
    cursor: pointer;
}

.nbcom .chiffre{
font-size: 18px;
color: #333;
vertical-align: text-bottom;
}

@media screen and (max-width: 760px) {
    .webtoon .nbcom {
display: none;
    }
    
    .reduce-on-mobile{
        height: 0;
    }

}





/*

.nbcom {
    color: #4d4d4d;
    position: relative;
    bottom: 180px;
      transition: all .2s ease-in-out;
}
.nbcom.center{  version en lecture horizontale 
bottom: -5px;
color: #333;
font-size: 1.4em;
}

.nbcom:hover{
      transform:  scale(1.1);
}

@media screen and (max-width: 760px) {
    .nbcom {
        font-size: 16px;
        text-align: center;
        padding: 1em;
         bottom: 0;
    }
}

.nbcom i.fi-comment{
    font-size: 29px;
}
.nbcom .chiffre{
 font-size: 14px;
position: relative;
left: -26px;
color: rgb(255, 255, 255);
top: -7px;
width: 20px;
display: inline-block;
text-align: center;
font-weight: 600;
  
}
.nbcom .chiffre.i{
    color:#fff;
}


.nbcom .chiffre:hover{

    cursor: pointer;
    text-shadow: none;

}
*/


/*
lien pour passer d'un album ) l'autre
*/
/*
.jump{
    position: fixed;
    bottom: 20%;
    text-align: center;
    border: 1px solid #ccc;
    
}
*/

/*------
TOUT afficher
----------*/

/* conteneur principal */

#tout{
    padding: 2em;
    text-align: center;
}

#tout .forum-message{
    box-shadow: none;
}
#tout .forum{

}

#tout h2 {

}


/*  bouton pour tout afficher  */
a.tout {
display: none;
position: fixed;
top: 70px;
font-size: 1rem;
color: #111;
background: rgba(255,255,255,.7);
z-index: 1500;
padding: 0.5em;
left: 0;
height: 50px;
}

a.tout.show{
    display: block;
}



a.tout:hover{
    color: #129ff0;
 
}
/* bloc qui affiche tt */


@media only screen and (max-width: 760px) {

    a.tout {

        left:11px;
        top:0;
        z-index:400;}
}

a.tout-img img {
    box-shadow: -6px 6px 0 rgba(0,0,0,.15);
    padding: 0.2em;
    border: 1px solid #ccc;
}
a.tout-img img:hover {
    /*  opacity: 0.9;*/
    z-index: 2000;
    border-color: var(--noir);
       text-decoration: none;
    box-shadow: -6px 6px 0 rgba(0,0,0,.25);
}
a.tout-img p {
    font-size: 0.7em;
    margin: 0;
}



/*---

a suivre

---*/

h3.asuivre{
text-align: center;
/*font-style: italic;*/
font-size: 1.5em;
color: #333;
padding: 3em 0 2em;
text-shadow: 1px 2px 3px #ccc;
}

/* ---
        Autres albums / liens transversaux
---*/

#art-bas {
    background: rgb(244, 244, 244);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgb(244, 244, 244) 0%, rgb(255, 255, 255) 66%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(244, 244, 244)), color-stop(66%, rgb(255, 255, 255)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgb(244, 244, 244) 0%, rgb(255, 255, 255) 66%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgb(244, 244, 244) 0%, rgb(255, 255, 255) 66%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgb(244, 244, 244) 0%, rgb(255, 255, 255) 66%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgb(244, 244, 244) 0%, rgb(255, 255, 255) 66%);
    /* W3C */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#ffffff', GradientType=0);
    /* IE6-9 */
    padding: 1em;
    border-top: 2px solid;
}

#art-bas .wrapper{
    max-width: 1200px;
    margin:0 auto;
    
}

#art-bas h1{
    font-weight: 400;
    text-transform: uppercase;
    
}
#art-bas h2 {
    margin: 0;
    
}
#art-bas h2.art-autres-albums, .art-autres-header {
margin: 2em 0 .5em;
font-weight: 700;
font-style: normal;
font-family: "Maven Pro";
text-transform: uppercase;
text-decoration: none;
font-size: 18px;
border-top: 1px solid #C8C8C8;
    padding: .5em .5em 0;
}
h2.art-autres-albums a {
text-decoration: none;
    color: rgb(255,71,73);
}
#art-bas .fiche-auteur{
    margin-top: 2em;
}
    #art-bas .fiche-auteur h2{
        text-transform: uppercase;
        font-weight: 500;
        margin-top: .5em;
    }
#art-bas .fiche-auteur .circle a{ /* couleur de cercle du logo auteur */
    color: #333;
}
#art-bas .fiche-auteur .logo-profil{
    width: 100%;
}


    
    /* ---
        print 
--- */

.printer a{
    display: block;
}
.printer i{
    font-size:4em;
}
#download_ready a{
padding: 1em;
border: 1px solid #0bae0b;
margin-top: 2em;
display: block;
background: #79ff79;
border-radius: 3px;
}
/* ---
        article section 1 
--- */

#art-texte-1 h3 {
    margin: 1em auto 0.5em auto;
    font-size: 1.8em;
}
#art-texte-1 p,
#art-texte-1 li {
    margin: 0 0 0.5em 0;
}
#art-texte-1 .spip_documents_left {
    padding: 0 10px 0 0;
}
#art-texte-1 .listprojects li {
    display: block;
}
#art-texte-1 p a,
#art-texte-1 .listprojects li a {
    text-decoration: none;
    color: #129FF0;
}
#art-texte-1 .date {
    text-align: center;
    font-size: 0.8em;
    margin: 0 0 1em 0;
}
#art-texte-1 .date a {
    font-weight: bolder;
    text-decoration: none;
}
#art-texte-1 .com a {
    text-decoration: none;
}
.top {
    color: #129FF0;
    display: block;
    font-size: 0.7em;
    padding: 20px 0 0;
    text-align: center;
    text-decoration: none;
}

.prepublication-explication{
    font-family: "Merriweather", sans-serif;
    font-style: italic;
    margin-top: 1em;
    
}
.prepublication.off{
 max-width: 500px;
margin: 2em auto 2em;
text-align: center;
min-height: 1em;
color: #999;
font-size: 1.2em;
}