:root {
    --couleur_principale: #9E141F;
}

body, html {
    font-family: Roboto, sans-serif, Arial;
    font-size: 18px;
}

/* TYPO */
h4.sous-titre {
    font-weight: medium;
    font-size: 1.2em;
    margin: 1.2em 0 .5em;
}


/* STRUCTURE
**********************************************************************************************************************/

#wrapper {
    width: 70vw;
    max-width: 1000px;
    margin: 0 auto;
}

.separator, hr {
    margin: 40px 0;
    /*background-color: var(--couleur_principale);*/
    border-color: var(--couleur_principale);
    border-width: 1px;
    border-style: solid;
    height: 2px;
}

.actions {
    position: absolute;
    margin-left:-12vw;
    margin-top: 1em;
    width: 11vw;
    display: flex;
    flex-direction: column;
}

.actions > * {
    margin-bottom: 4px;
}

#evenements .actions {
    margin-top: 3em;
}

.cols-wrapper {
    margin-top: 20px;
    display: flex  ;
    justify-content: space-between;
}

.col {
    flex: 0 0 48%
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    #wrapper {
        width: 90vw;
        }
	}

/* EN-TETE
**********************************************************************************************************************/

#header {
    margin-top: 20px;
}

#logo {
    display: block;
    width: 100%;
    aspect-ratio: 1/.15;
    background: url(../img/logo-header.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

#header h1, #header h2 {
    text-indent: -9999px;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    #header {
        border-top:3px solid var(--couleur_principale);
        margin-top:0;
        padding: 20px 0 ;
        width: 100vw;
        margin-left: -5vw;
        }
    
    #logo {
        border-bottom:1px solid var(--couleur_principale);
        background-size: 90%;
        background-position: center;
        }
	}

/* TYPO
**********************************************************************************************************************/
.titre {
    font-size: 2em;
    margin: 1em 0;
    font-weight: 500;
}

.legende {
    font-size: .8em;

}

ul {
    list-style-type: none;
    list-style-position: outside;
    padding-left: 0em;
}

ul li {
    position: relative;
    padding-left: 1.2em;
}

ul:not(.slick-dots) li::before {
    content: "-";
    position: absolute;
    left: 0;
}


/* NAVIGATION
**********************************************************************************************************************/
nav {
    display: flex;
    justify-content: space-between;
    font-size: clamp(16px, 1.6vw, 24px);
    font-weight: 500;
    margin-top: 40px;
}

nav a.selected {
    color: var(--couleur_principale);
    font-weight: 900;
    border-bottom: 2px solid var(--couleur_principale);
}

nav a:hover, .subnav a:hover {
    text-decoration: none;
}

.subnav {
    margin-top: 20px;
}

.subnav a {
    /*margin: 0 1em 0 0;*/
}

.subnav a.selected {
    color: var(--couleur_principale);
    font-weight: 700;
 
}

@media screen and (min-device-width: 320px) and (max-width: 868px) {
    #btn-mobile-menu {
        position: absolute;
        font-size: 30px;
        margin: 0;
        width: 60px;
        height: 60px;
        top: 10px;
        right: 20px;
        z-index: 99900000;
        display: block;
        cursor: pointer;
        text-align: right;
   
        }
    
    #btn-mobile-menu:before {
        font: normal normal normal 14px/1 FontAwesome;
        content: '\f0c9';
        /*margin-right: .5em;*/
        /*width: 1em;*/
        font-size: 100%;
        display: inline-block;
        color: white;
        background: var(--couleur_principale);
        padding: 2px 4px;
        }
    
    .nav-on #btn-mobile-menu:before {
        font: normal normal normal 14px/1 FontAwesome;
        content: '\f00d';
        width: 1em;
        font-size: 30px;
        display: inline-block;
        color: white;
        
        }
    
    .nav-on {
        overflow: hidden;
        }
    
    
    #nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: none;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 10vh;
        margin: 0 0;
        z-index: 1000;
        
        }
    
    .nav-on #nav {
        display: flex;
        height: 120vh;
        justify-content: flex-start;
        z-index: 10000;
        background-color: var(--couleur_principale);
        top: 0;
        }
    
    #nav a {
        color: white;
        text-decoration: none;
        text-align: center;
        padding: 0;
        width: 80vw;
        margin: 0 auto ;
        font-size: 24px;
        flex-direction: row;
        height: auto;
        justify-content: flex-start;
        }
    
    .nav-on #subnav {
        display: none;
        }
    
    #home-menu {
        display: none;
        }
    
    .subnav {
        
        flex-direction: row;
        justify-content: center;
        margin-bottom: 1em;
        width: 100vw;
        margin-left: 0vw;
        padding: 20px;
        border-bottom: 1px solid var(--couleur_principale);
        }
    
    .subnav a {
    
        display: block;
        margin: 4px 0;
        }
    
    
    .subnav .sep {
        display: none;
        }
        
        
    }

/* ACCUEIL
**********************************************************************************************************************/
#splash-wrapper {

}

#splash-wrapper.hasActu {
    display: flex;
    width: 70vw;
    max-width: 1000px;
  justify-content: space-between;
}

#splash-wrapper .splash-gutter.hasActu{
    width: 70%;
}

/* CONTENU
**********************************************************************************************************************/
#content {
    min-height: 60vh;
}

.visuel {
    margin: 40px 0;
    width: 100%;
}

.detail .visuel {
    margin: 0;
}

.visuel img {
    width: 100%;
}

#content p {
    margin-bottom: .5em;
}

/* UI */

.bouton , .btn{
    background-color: var(--couleur_principale);
    color: white;
    padding: 10px 10px;
    text-decoration: none;
    font-size: 1vw;
    text-align: center;
}

.bouton:hover {
    text-decoration: none;
}

/* HISTORIQUE */
#historique-wrapper {
    column-count: 2;
    column-gap: 2em;

}

.historique_item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;

    margin-bottom: 1em;
}

.historique_item h4 {
    font-size: 100%;
    text-transform: uppercase;
    font-weight: normal;
}

/* PUBLICATIONS
*************************************************************************/
#publication-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.publication-item {
    flex: 0 0 30%;
    margin: 20px 0;
}

.publication-item img {
    height: 30vh;
    margin: 0 auto;
}

.publication-item .publication-description {
    background: #d9d8d8;
    position: absolute;
    width: 30vw;
    padding: 1em;
    font-size: 80%;
    margin: 1vw 0 0 10vw;
    display: none;
    transition: .5s all ease-in-out;
}

.publication-item .publication-description h4 {
    font-size: 150%;
}

.publication-item:hover  .publication-description{
    display: block;
}

a.download-link {
    color:var(--couleur_principale);
    text-decoration: none;

}

/* CONTACT
*************************************************************************/
#contact #main-col {
    flex: 0 0 30%;
}

#contact #secondary-col {
    flex: 0 0 68%
}

#contact #cols-wrapper {
    /*margin-top: 20px;*/
    display: flex  ;
    justify-content: space-between;
}

#map {
    width: 100%;
    height: 50vh;
}
    /* EVENEMENTS
    *************************************************************************/

.event-item {

}

/* CARROUSEL */
.event-item.carrousel {
    display: block;
    width: 100%;
    aspect-ratio: 2/1;
    text-decoration: none;
}

.event-item.carrousel .visuel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    margin: 0;
}


.event-item .dates {
    width: fit-content;
    color: white;
    font-weight: bold;
    padding: 5px;
    align-self: flex-end;
    text-transform: uppercase;

}

.event-item.grille .dates {
    font-size: clamp(0.7vw, .7vw, .9vw);
}

.event-item .infos {
    width: fit-content;
    color: white;
    font-weight: bold;
    padding: 5px;
    background-color: var(--couleur_principale);
}

/* GRILLE */
#grille-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2vw;
}

.grille {
    display: block;
    flex: 0 0 30%;
    /*margin: 1%;*/

}

.grille:hover {
    text-decoration: none;
}

.grille .visuel {
    width: 100%;
    aspect-ratio: 1;
    margin: 10px 0;
}

.grille .dates {
    flex: 0 0 100%;
    width: 100%;
}

.grille h4, .grille h5 {
    font-weight: bold;
    font-size: 100%;
    margin: .2em 0;
}

.grille .chapeau {
    margin: 20px 0 0 0;
    font-size: 90%;
}

.actualite.grille {
    flex: 1 1 100%;
    width: 20vw;
    margin :0 0 0 20px;
    padding: 0;
}

.actualite.grille .visuel {
    margin: 0;
}

#content .grille .chapeau p {
    margin: 0;
}

.grille .fa {
    font-size: 70%;
    margin-top: 0;
}

.list-item {
    display: flex;
    justify-content: flex-start;
    margin-top: 30px;
}

.list-item:hover {
    text-decoration: none;
}

.list-item .visuel  {
    width: 10vw;
    height: 10vw;
    margin-right: 10px;
}

.list-item .text {
    flex: 0 0 68%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.list-item h4 {
    font-weight: bold;
}

    /* FILTRE */
._filter_wrapper  {
    padding: 0;
    margin: 20px 0;
    border-top: 1px solid var(--couleur_principale);
    border-bottom: 1px solid var(--couleur_principale);
}

._filter_input_toggle {
    display: flex;
    margin: 4px 0 ;
    padding: 4px 0 ;
}

._filter_input_toggle:first-child {
    border-bottom: 1px solid silver;
}

._filter_input_toggle a {
    margin: 0 1em 0 0 ;
    padding: 4px;
    transition: background-color .2s ease-in-out;
}

._filter_input_toggle a:hover {
    text-decoration: none;
    background-color: silver;
}

._filter_input_toggle a.selected {
    background-color: var(--couleur_principale);
    color:white;
    font-weight: bold;
}

/* DETAIL */
.event-item.detail >.visuel {
    width: 100%;
    aspect-ratio: 2/.8;
    margin-top: 1em;
}

.event-item.detail h3 {
    margin: 1em 0 0 0;
}

.event-item.detail h4 {
    margin: 0 0 1em 0;
}

/* PERSONNES
*************************************************************************/

#personnes-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1vw;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 0 0 100%;
}

#personnes-list .item {

    border: 1px dotted red;
    box-sizing: border-box;
    /*flex: 0 0 18%;*/
    width: 25.5vw;
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 10px;
    overflow: hidden;

    background: #FFFFFF;
    border: 1px solid #CECCCC;
    border-radius: 10px 0px 10px 10px;

}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    #personnes-list .item {
        flex: 0 0 100%;
    }
}

/* CAROUSEL */
.carrousel-wrapper {
    margin-top: 40px;
    flex: 1 1 100%
}

/* GALERIES */
.gallery-wrapper {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
    width: 100%;
    margin-top: 40px

}

.gallery-wrapper img {
    margin: 10px 10px 0 0;
    width: 100%;
}

.gallery-wrapper a {
    margin: 10px 10px 0 0;
    width: 30%;
    /*height: 100%;*/
}

.gallery-wrapper a:hover {
    text-decoration: none;
}

.gallery-item {
    aspect-ratio: 1/1;
    overflow: hidden;
    /*height: 100%;*/
}

.gallery-wrapper .gallery-legende {
    font-size: 90%;
}

.sl-close {
    color: white;
}

/* PIED DE PAGE
**********************************************************************************************************************/
#footer {
    width: 100vw;
    background-color: #ECECEC;
    margin-top: 100px;
}

#footer .gutter {
    width: 80vw;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0 60px;
    color: var(--couleur_principale);
    display: flex;
    justify-content: space-between;
}

#footer .newsletter {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#footer .newsletter a {
    font-weight: bold;
}

#logo-footer {
    width: 100px;
}


/* FRORMULAIRES
**********************************************************************************************************************/
#esp-form {
    margin: 0;
    padding: 0;
}
input {
    border: 1px solid silver;
    padding: 5px;
}

/*form {*/

/*    padding: 40px;*/
/*}*/

fieldset {
    border: 0;
}

select {
    border: 1px solid silver;
    padding: 5px;
    color:var(--couleur_principale);
}

label {
    font-weight: bold;
    margin-top: 1em;
    display: block;
}

label span {
    display: block;
}

input {
    width: 100%;
    color:var(--couleur_principale);
}

input[type=radio] {
    width: auto;
    margin: 0 4px 0 20px;
}

input[type=radio]:first-child {
    margin-left:0
}

.error{
    display: none;
}

button {
    background: silver;
    margin-top: 2em;
}

#msg-confirmation {
    font-weight: bold;
    border: 3px solid var(--couleur_principale);
    padding: 1em;
    text-align: center;
    margin: 50px 0;

}

/* RESERVATIONS
**********************************************************************************************************************/