/* BASE CSS */

:root {

    --noir: #222831;
    --bleu: #30475e;
    --gris: #e8e8e8;
    --rouge:#FF4749;
    --bleu-clair: #2fb0ff;

}

html,
body,
button,
input,
select,
textarea,
.columns .column
{
    font-family: 'Karla', Arial, sans-serif;
}


body{
     color: var(--noir);  

}

/* ---
        base
---*/

li {
    display: inline;
    list-style-type: none;
}

a, a:visited {
    color: var(--bleu);
}
/*
a:hover {
   
}
*/

p {
    font-family: 'Roboto', arial, sans-serif;
    font-size: 18px;
    margin-bottom: 0.2em;
    line-height: 1.5em;
}
p a, p a:visited{
    color: var(--lien);
}

time {
    margin: 0 0.2em;
    text-transform: uppercase;
    font-size: 0.9em;
}


/* ---
        Classes génériques
---*/

#spip-admin {
    display: none;
}

.div-bas{
    border-bottom: 2px solid #fff;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
}


/*

.contraste{
   background: #5A7075;
max-width: 1200px;
margin: 0px;
    margin-top: 0px;
color: #fff;
margin-top: -1.2rem;
padding: 1rem .5rem;
}
*/

/*
.loading {
    opacity: 1;
    background: url('loading.gif') no-repeat center center;
}
*/

.loading p {
    color: #ccc;
}

.bloc {
    padding: 0 1em;
    margin: 1.2em .5em 0em;
}

.bloc.flat-bottom {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


.center {
    text-align: center;
}
.center-just{
    justify-content: center;
}
.center-auto{
    margin: auto;
    max-width: 1200px;
}
.bottom-pad{
    margin-bottom: 3em;
}
.top-pad{
    margin-top: 3em;
}
.left {
    float: left;
    display: block;
    margin-right: 1.5em;
}

.hide {
    display: none;
}

.uppercase {
    text-transform: uppercase;
}
.chip, .avatar{
    background: #fff;
}



.btn.gp, .btn.supprimer {
 background: #fefefe;
  border: 2px solid #333;
  color: #111;
  padding: 0.3em 2em;
    border-radius: 2px;
    box-shadow: 2px 2px 0 #111;
}

.btn.gp:hover,  .btn.supprimer:hover{
    background: #f8f8f8;
    box-shadow: none;
}




/* arborescence */

#body-mot #nav-albums a,
#body-auteurs #nav-auteurs a {
    color: var(--noir);
}


/* ---
    NEWS
--- */



body.sommaire {
    background: #fff;
}




/* ---
    Principal
--- */


section.home {
    max-width: 1110px;
    margin: 0 auto;
    padding: 0;

}

section.home .bloc {
    min-height: 200px;
}

/* 

mode alterné 

*/
.dark{
background: var(--noir);
max-width: 1200px;
margin: auto;
color: #fff;
}
.dark p{
    color:#fff;
}
.dark .grand-album h2 a{
    color: #fff;
}
/*
section.home .dark .pagination i{
    
    color:#fff;
}
*/

/*

BLOCS de base

*/ 



section.home h1.titre {
    font-weight: 400;
    letter-spacing: -.05em;
    text-align: center;
    padding: 57px 0 13px;
    font-family: "Merriweather", serif;
    font-style: italic;
    font-size: 30px;
    background: url("img/fond-titre1.png") no-repeat center 28px;
    text-shadow: 0 1px 0 #ff8d93;
    margin: 0;
    color: #111;
}

h3.en-tete{
color: var(--rouge);
text-transform: uppercase;
font-size: 1.3rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1em;
margin: 1em 0 1em .5em;
}

/*

section.home .bloc h4 {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1em;
}


section.home .extrait h4 {
    font-size: 12px;
    text-transform: none;
    margin: 0 0 .5em;
    font-family: "Maven Pro", sans-serif;
}
*/

.pagination{

width: 400px;
display: block;
margin: 1em auto;
    
}
.pagination .pagination-item a,
.pagination a.lien_pagination {
    background: #f7f7f7;
    padding: 4px 12px;
    display: inline-block;
    border-radius: 2px;
    text-align: center;
    margin: 2px;
}

.pagination .pagination-item.on span,
.pagination .on {
    color: var(--bleu);
    display: inline-block;
    padding: 4px 12px;
    margin: 0 4px;
    border-radius: 2px;
}

.pagination .sep{
    display: none;
}



/* ---
        header général
---*/

header {

    color: #597075;
}



/* --- 
        Les mots clés 
--- */

a.motcle {
    padding: 1px 4px 2px;
    display: inline-block;
    border-radius: 2px;
    font-weight: 700;
    font-size: 11px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    margin: 0 1px 3px;
    text-transform: uppercase;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.3);
}

a.motcle:hover {
    box-shadow: none;
    opacity: 0.9;
}


/* ---
        Le mur de la semaine
---*/

section.home #mur {}

section.home #mur p {
    margin: 1em 0;
}

#mur.pagination h4 {
    text-transform: uppercase;
    font-size: 0.75em;
    font-weight: 400;
}
.today {
    display: none;
   background-color: #faffbb;
border: 1px solid #000;
left: 50%;
margin-bottom: -5px;
max-width: 70%;
padding: 4px 20px 2px 20px;
position: relative;
text-align: center;
text-transform: uppercase;
transform: translate(-50%,calc(-50% - -23px));
width: fit-content;
width: -moz-fit-content;
}

@media handheld,
only screen and (max-width: 768px) {
   .today {
        font-size: 10px;
right: -45px;
    }
}

.love{
    background: rgba(150,150,150,0.1); 
    padding: 1px 0 2px;
    box-shadow: inset 0px 3px 4px rgba(0,0,0,0.1);
}


/* --

Surclass Spectre

-- */

.card{
    margin-bottom: 15px;
box-shadow: -10px 10px 0px rgba(0,0,0,.15);
    border: 1px solid #222;
    transition: .5s ease;
}
.card:hover{
   box-shadow: 0 .25rem 1rem rgba(48,55,66,.15);
/*    border: 2px solid #333;*/
}



a :hover .card-title{
    color:#111;
     text-decoration: none;
}

.card .card-image{
   margin-bottom: -8px;
  transition: 0.3s;
}

.card .card-title{
    text-transform: uppercase;
    font-weight: 800;
    }



@media only screen and (max-width: 568px) {
    .card{
        
        margin:1em;
    }
}



/* ---
        top 50
--- */





.grand-album img:hover {
    border-color: #999;
}

section.home .grand-album .num {
    display: block;
    position: relative;
    top: -160px;
    left: 16px;
    width: 35px;
    font-size: 30px;
    border-radius: 50%;
    padding: 10px;
    background: #ff4749;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    text-align: center;
    color: #fff;
    font-weight: 600;
}

.grand-album h2 {

    font-size: 1.6em;
    margin: 0.2em 0 0;
    border: none;
    font-weight: 400;
    line-height: 1em;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.grand-album h2 a {
    text-decoration: none;
    color: #222;
}
/*

section.home .grand-album a.img {
    display: block;
    height: 400px;
}
*/

.grand-album .auteur {
    font-size: 0.8em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 1em 0;
}

.grand-album .auteur a {
    color: var(--bleu);
    text-decoration: none;
}

.grand-album p {
    margin: 0.5em 0;
}

.grand-album .info {
    font-size: 0.8em;
    margin: 0.5em 0;
}

.grand-album .motcle {
    background: rgb(255, 71, 73);
    color: #fff;
}

.grand-album p.desc {
    max-width: 60%;
}

.separation {
margin: 1em 0;
}


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

#derniers-forums h4 {
    text-transform: uppercase;
    font-size: 1.3em;
}
#derniers-forums time{
    margin: 0 0 1em 0;
        padding:0;
    
}

#derniers-forums h4 span {
    color: #129FF0;
}

#derniers-forums p {
    line-height: 1.4em;
}

#derniers-forums a {
box-shadow: -10px 10px 0px rgba(0,0,0,.15);
display: block;
border: 1px solid #999;
}

#derniers-forums div {

    min-height: 100px;
}


/*
------ Mailing
*/

.mailing {
    background: rgb(255, 175, 209);
    padding: 1em 1em 0px;
    min-height: 215px;
}

.mailing h3 {
    border: none;
    color: var(--bleu);
}

.amiling p{
    margin:1em 2em 2em 1em;
    
}
.mailing ul {
    padding: 0;
}

.mailing #sub_email {
    width: 80%;
}

.mailing label {
    text-transform: uppercase;
    display: block;
}
.amiling input.email{
    width: 300px;
padding: .4em;
margin: 1em 0;
}

.mailing input.submit {
    border: none;
    padding: .5em 1em;
    border-radius: 2px;
    background: #011324;
    margin-bottom: 1em;
    color: #fff;
    font-size: 1.2em;
}



/*

Bouton favori
*/

/* pour le mini-album */
.favori-wrapper{
position: relative;
top: -28px;
}
.favori-wrapper .formulaire_favori {
    font-size:0.8em}
.favori-wrapper .formulaire_favori img {
    width:2.5em;}

/* dans la page article */

.favori-art-wrapper{
    width: 2rem;
margin: 1rem auto 0;
height: 40px;
}

/*
------ Albums en liste 
*/

.mini-album {
    box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
    border-radius: 2px;
    padding: 9px;
    margin: 1rem 0 0 0;
}

.mini-album.semaine {
    padding: 0;
}

.mini-album div.jaime_coeur {
    margin-top: 1em;
}

.mini-album div.jaime_coeur,
.mini-album input.jaime_coeur[type="submit"] {
    text-align: center;
    float: none;
}

.mini-album .note_coeur {
    font-size: 0.85em;
    display: inline-block;
    margin-right: 25%;
    font-size: 12px;
    display: none;
}

.mini-album h3.titre,
.bloc .mini-album h3.titre {
    font-weight: 400;
    font-size: 15px;
    line-height: 1.1em;
    margin: 3px 0 .5em 0;
    border: none;
    text-transform: none;
}

.mini-album h3.titre a {
    text-decoration: none;
}

.mini-album h2 {
    text-transform: uppercase;
    font-size: 15px;
    margin: 0;
    line-height: 1em;
    font-weight: 700;
}

.mini-album .extrait {
    text-align: left;
    padding: .7em;
}

.mini-album p.page {
    font-weight: 400;
    font-size: 13px;
    margin: 12px 0px 0px;
    font-family:'Maven Pro',Arial,sans-serif;
}

.mini-album-info {
    padding: .4em;
}

.mini-album .image {
/*    padding: 2px 2px 0 2px;*/
    position: relative;
    overflow: hidden;
}


.mini-album .extrait .texte {
/*    font-family: 'Merriweather', serif;*/
    font-size: 12px;
    line-height: 17px;
    margin: 0 0 1em 0;
}

@media only screen and (max-width: 768px) {
    .mini-album .extrait .texte {
        font-size: 12px;
    }
}

@media only screen and (max-width: 568px) {
    .mini-album .extrait .texte {
        font-size: 13px;
    }
}

.mini-album .extrait .texte div {
    padding: 0 0 0 8px;
}

.mini-album .nom {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 0.5em;
    font-weight: 700;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    font-weight: 400;
}

.mini-album .infos {
    padding: 0.5em;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background: #fff;
}

.mini-album .motcle {
    font-size: 10px;
    margin: 0;
}

.mini-album a.edit,
a.edit {
    display: inline-block;
    width: 100%;
    opacity: 0.7;
    transition: all .25s ease;
    width: 20px;
    height: 20px;
    float: right;
    text-align: center;
    border-radius: 50%
}

.mini-album a.edit:hover {
    opacity: 1;
    transform: rotate(-45deg);
    font-size: 1.1em;
}

.album {
    float: left;
    width: 172px;
    margin-right: 14px;
    height: 320px;
}

.album .nom {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 0.5em;
    font-weight: 700;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    background: #fff;
    font-weight: 400;
}

.album .image {
    border: 1px solid #ccc;
    background: #fff;
}

.album .titre {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 0.5em;
    color: #666;
    font-size: 0.9em;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background: #fff;
}

.album .infos {
    padding: 0.5em;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background: #fff;
}

/* -------- sommaire --------------*/

section.home .bloc h3.highlight {
    color: #129ff0;
    font-weight: 800;
    border-bottom: 2px solid #999;
}

#inc-random img {
    margin: 0 auto;
    display: block;
}

#inc-random h5,
#inc-random h4 {
    text-align: center;
}

#participer input {
    display: block;
}


/* resultat recherche */

.resultats 
{
    min-height: 400px;
    max-width: 500px;
    margin: 1em auto 2em;
    padding: 1em;
}
.resultats h4{
    font-size: 1em;
    margin-top: 2em;
    
}
.resultats p{
    font-size: 2em;
    margin: .5em 0 0 0;

}
/* footer */

footer {
    background: none repeat scroll 0 0 #F8F8F8;
    border-top: 1px solid #CCCCCC;
    font-size: 0.8rem;
    padding: 1em 2em;
    line-height: 1.2em;
    margin: 2em 0 0 0;
}
footer .logo-edm{
    width: 2em;
position: relative;
top: .4em;
}

footer ul {
    padding: 0;
    margin: 0;
}

footer li {
    display: block;
    margin: 0 0 0.4rem 0;
}

footer a {
    font-weight: normal;
    text-decoration: none;
}

footer a:hover {
    color: #ff4749;
}

footer h4 {
    text-transform: uppercase;
    font-weight: 400;
}
footer #menu_lang{
    text-transform: uppercase;
    font-size: .9em;
}
footer #menu_lang a{
    background: rgba(255,255,255,.8);
padding: .5em;
margin-right: .5em;
border: 1px solid #ccc;
border-radius: 3px;
}


/*
a.pure-button{
    color: #1279a2;
}
a.pure-button.pure-button-primary{
    color: #fff;
}
*/

/* mots clés temporaires*/


.button {
    padding: 0.5em 1.5em;
    border: 0px none transparent;
    background-color: rgb(230, 230, 230);
    text-decoration: none;
    border-radius: 2px;
    transition: box-shadow 0.1s linear 0s;
    display: block;
    width: 11em;
    margin: 1em auto;
    text-align: center;
}

.button.blue {
    background: #2FB0FF;
    color: #fff;
}

.button:hover {
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.07) 40%, rgba(0, 0, 0, 0.1));
}

.item .printer a {
    padding: 3px 0;
    text-decoration: none;
}

.circle img {
    border-radius: 50%;
    border: 2px solid;
}

.forum .circle {
    vertical-align: middle;
    display: inline-block;
}


/*
#participants-24h12{
	clear:both;
	width:94%;
margin:1em auto;
}
#participants-24h12 h2{
	border:none;
	color:#274966;
	}
#participants-24h12 ul{
margin:2em 0;	
width:25%;
float:left;
}	
#participants-24h12 li{
	margin:0 0 0.2em;
	color:#bbb;
	display:block;
	}	
#participants-24h12 li strong{
	color:#284B68;
	margin:0.2em 0 0;}	
#participants-24h12 li a{
	text-decoration:none;
	color:#333;}
#participants-24h12 li a:hover{color:#FF2D40;}	
#participants-24h12 li span{
	font-size:0.6em;
}		

#countdownWrapper{
clear:both;
  height:52px;
  margin:-10px auto 30px;
  width:233px;
   }
   #countdownWrapper a{
  text-decoration:none;
   	} 
#defaultCountdown{
	font-weight:800;
	float:left;
	background:transparent;
    border: medium none;
   
    height: 40px;
    padding: 5px 0;
   
    width:230px;
	}
#defaultCountdown .countdow_section{
	display:block;
	}
	
#defaultCountdown.highlight	
{color:#D01B37;}	

*/