/*
Theme Name: Drac Theme 2
Author: Léon 2026
Author URI: https://leonlenclos.net
Description: Le drac peut aussi être un thème wordpress
Version: 2.0
Text Domain: drac-theme
*/


* {
  box-sizing: border-box;

}

body {
    background-color: #f1f1f1;
    color:#202020;
    font-family: sans-serif;
}


.container {
    max-width: 700px;
    margin:auto;
}

article  {
        background-color: #f8f8f8;

}

article main {
    padding: 20px;

}

h1, h2, h3, h4 {
    font-weight: normal;

}

a {
    color: #363636;
    
}

a:hover {
    color:black;
}

p {
    text-align: justify;
}
/* HEADER *********************************************/

.drac-header {
    margin: auto;
    margin-top:.2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.drac-header img {
    width:100px;
}

header h1{
        margin: 0;
        font-size:24px;
        margin : 10px 0;
}

header h2 {
        margin: 0;
            font-size:12px;
   font-style: italic;
}

header a {
    color:inherit;
    text-decoration: none;
}


/* PROJETSS ************************/

.projets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}
.projet h1{
        margin: 0;
        font-size:24px;
    font-weight: normal;
}

.projet h2 {
        margin: 0;
            font-size:12px;
   font-style: italic;

}

.projet {
    padding: 0;
        display: flex;
   flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border: 2px solid  #202020;
    margin: 10px;
    width:100%;
    max-width: 300px;
    min-height: 240px;
    background: #202020;
    color:#f8f8f8;
    text-decoration: none;
        padding-bottom: 8px;

}

.projet img {
    width:100%;
    height: 170px;
    object-fit: cover;
}
.projet:hover {
    color:#202020;
    background: none;
    text-decoration: none;
}

.projet:hover img {
    filter: contrast(120%) brightness(80%) hue-rotate(-20deg);
}


.alert-archive {
    display: flex;
    flex-direction: column;
    align-items: center;
    border:2px solid;
    text-align: center;
    margin: 1em;
    gap:.2em;
    padding: .2em;
    
}

.alert-archive * {
    margin: 0;
}

.alert-archive small {
    font-size:.6em;

}
/* AGENDA *************************************************/

ul.events-list {
    list-style: none;
    padding: 0;
}

ul.events-list li {
    margin: 10px;
    background: #ababab;
    border: none;
    padding: 4px 7px;
}


.eventinfos {
    font-size:12px;
}

.filter-proj {
    display: inline-block;
    padding: 0 .5em;
    text-wrap: nowrap;
}

/* MENU *************************************************/



.menu{
   display: flex;
    flex-wrap: wrap;
    justify-content: center;
   list-style: none;
  padding:0;
}


header .menu li {
        margin: 10px;
}
header .menu li a{
    background: #202020;
    border: 2px solid  #202020;
    padding: 4px 7px;
    color:#f8f8f8;
    text-decoration: none;
}


header .menu li.current_page_item a{
    color:#202020;
    background: none;
    text-decoration: none;
}


header .menu li a:hover {
    color:#202020;
    background: none;
    text-decoration: none;
}



header .menu ul.children{
   display: none;
}


/* Page header */

article header {
    background: #202020;
        color:#f8f8f8;
    text-align: center;
    padding-bottom: 12px;
}

article header img {
    width: 100%;
    margin:0;
}



/* VISEOS ********************************/

.is-type-video {
    text-align: center;
}


/* SOCIAL MEDIA *********************/

.socialmedia{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.socialmedia a {
        margin: 20px;
}
.socialmedia img{
    width: 32px;
    justify-content: center;
}

/* PRO ************************************/

.pro {
    display: flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-end;
}

.pro h1 {
   background:   #202020;
    color:#f8f8f8;
}
.pro-section {
    margin:8px;
        width:100%;
    max-width: 300px;

}

.pro-information, .pro h1 {
    text-align: center;
        font-size: 12px;
        width:100%;

    border: 2px solid  #202020;
       padding: 4px 8px;
    margin:-2px;
}

main>footer h1{
    font-size: .8em;
        color: #f1f1f1;
    background:#202020;
    padding: .1em .6em

}

.soutiens-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    gap:1em;
}
.soutiens-section img {
    max-height:3.5em;
    width: auto;
    object-fit:contain;
    
}


#all-dates {
    display: block;
    text-align: center;
    border: 2px solid  #202020;
    margin: 1em 0;
    padding: 4px 7px;
        text-decoration: none;
        color:#202020;
    background: none;

}



#all-dates:hover {

        background: #202020;
    color:#f8f8f8;

}


/* FOOTER *********************************/


body>footer {
    font-size: 8px;
}


#menu-langues,
body>footer .menu {
    justify-content: center;
    gap:1.5em;
}



#menu-langues li a:hover,
body>footer .menu li a:hover{
    text-decoration: none;
}


.menu-langues-container  {
    position: absolute;
    left:0;
    width:100%;
    padding: 0 .8em;
    
}

#menu-langues {
    margin: 0;
    justify-content: right;
    font-size: .6em;
}
@media only screen and (max-width: 600px) {
    #menu-langues {
        flex-direction: column;

        align-items: end;
        gap:.5em;
    }
}
#menu-langues .lang-item>a {
    display: flex;
    align-items: center;
}

#menu-langues .current-lang {
    opacity: .5;
}

/***** DATES *****/

.filter-proj {
    font-size: .75em;
    margin:.2em;
    border: 2px solid var(--col);
    text-decoration: none;
}

.filter-proj:hover,
.filter-proj.selected
{
    background: var(--col);
}