/*** Evenements ***/

.event { cursor: pointer; }

.event .dates { 
    display: inline-block; 
    vertical-align:middle;
    display: inline-block;
    vertical-align: top;
    width:35px;   
}
.two-dates .dates {
    width: 100px; 
}

.date {
    display:inline-block;
    text-align: center;
    margin-right:4px;
}

.simple-date .date {
    width:100%;
}

.two-dates .date {
    width:46%;
}

.event .titre { 
    padding-left: 10px;
    vertical-align:middle;
}

.event.simple-date .titre {
    }
    @media(max-width:1199px) { .event .simple-date .titre{
        width:84%;
}}
    @media(max-width:767px) {
    .event.simple-date .titre {
        width:84%;
        padding-left:0;
    }
}
.event.two-dates .titre {
    width:925px;
    padding-left:10px; }
    @media(max-width:1199px) { .event .two-dates .titre{
        width:75%;
    }}
    @media(max-width:767px) {
    .event .two-dates .titre {
        width:100%;
        padding-left:0;
    }
}

.article_first .titre {
    display: inline-block; 
}
.article_first.simple-date .titre {
    width:90%;
}
.article_first.simple-dates .titre {
    width:60%;
}

.article_first .dates {
    display: inline-block; 
}
.article_first.simple-date .dates {
    width:auto;
    min-width: 35px;
}
.article_first.simple-dates .dates {
    width:40%;
}

.day_num {
    font-family: tekomedium, sans-serif;
    font-size: 22px;    
    color: #FFFFFF;
    padding:2px;
}
.month_txt {
    font-family: tekomedium, sans-serif;
    font-size: 16px; 
    text-transform: uppercase;
    color: #FFFFFF;
    margin-top:3px;
    line-height: 22px;
    padding:2px;
}

.date_fin {
    margin-right:0;
}

.article_container:nth-of-type(3n+1) .dates .day_num{

    background-color:var(--gray-dark);
}
.article_container:nth-of-type(3n+2) .dates .day_num{
    background-color: var(--yellow);
}
.article_container:nth-of-type(3n+3) .dates .day_num{
    background-color: var(--gray);
}

.article_container:nth-of-type(3n+1) .dates .month_txt{

    background-color:var(--gray-dark);
}
.article_container:nth-of-type(3n+2) .dates .month_txt{
    background-color:var(--yellow);
}
.article_container:nth-of-type(3n+3) .dates .month_txt{
    background-color: var(--gray);
}

.article_first.event .dates .day_num, .article_first.event .dates .month_txt{
    background-color: var(--yellow);
}

/* EVENEMENT LIRE */

.year_select {
    color:#FFF;
    background-color: var(--yellow); }
.year_select:focus {
    color:#FFF;
}
.evenement { 
    padding-left:15px;
    padding-right:15px;
}

.evenement .dates { display: inline-block; vertical-align:middle; }

.evenement .titre { 
    padding-left: 10px;
    vertical-align:middle;
    display: inline-block;
}

.evenement .simple-date .titre {
    width:1005px;
    padding-left:20px; }
    @media(max-width:1199px) { .evenement .simple-date .titre{
        width:84%;
}}
    @media(max-width:767px) {
    .evenement .simple-date .titre {
        width:84%;
        padding-left:0;
    }
}
.evenement .two-dates .titre {
    width:925px;
    padding-left:10px; }
    @media(max-width:1199px) { .evenement .two-dates .titre{
        width:75%;
    }}
    @media(max-width:767px) {
    .evenement .two-dates .titre {
        width:100%;
        padding-left:0;
    }
}

.evenement .day_num {
    font-size: 36px;    
    background-color:var(--yellow);
    color:#FFFFFF; }
    @media(max-width:767px) { 
    .evenement .day_num { 
    font-size:18px; } 
}
.evenement .month_txt {
    font-size: 24px; 
    margin-top:3px;
    background-color:var(--yellow); 
    color: #FFFFFF; }
    @media(max-width:767px) { 
    .evenement .month_txt { 
    font-size:12px; } 
}
.evenement .two-dates .dates {
    width:150px;
    display: inline-block; }
    @media(max-width:767px){
    .evenement .two-dates .dates {
    width:32%; }
}

.evenement .simple-date .dates {
    width:70px;
    display: inline-block; }
    @media(max-width:767px) {
    .evenement .simple-date .dates {
        width:14%;
        margin-right:2%;
    }
}
.evenement .date { width : 70px; } 

.evenement .simple-date .date {}
    @media(max-width:767px){
    .evenement .simple-date .date { 
    width:100%; }
}
.evenement .two-dates .date { }
    @media(max-width:767px){
    .evenement .two-dates .date { 
    width:48%;
    margin-right:2%; }
}

.evenement .dates {
    color: #005f5f;
}
.evenement a img { 
    padding-right: 1rem; 
    max-width: 100%;
}
.evenement p { 
    display: inline-block; 
    width : auto;
    text-align: justify;
    max-width: 100%;
}
.evenement img, .evenement p a img, .evenement p img { 
    padding-right: 1rem; 
    max-width: 100%;
}
.page-header { margin: 1rem 0;}