/* VARIABLES
*************************************************************************/
:root {
    --couleur-principale: #4834bc;
    --content-width: 80vw;
    --border-radius: 4px
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    :root {
        --content-width: 85vw;
    }
}

/* GENERAL
*************************************************************************/
body {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 22px;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    body {
        font-size: 18px;
    }

}


/* EN-TETE
*************************************************************************/
header {

    display: flex;
    justify-content: flex-end;
    padding: 20px;
    width: 100vw;
    margin: 0 auto;
}

/*#logo {*/
/*    background-color: var(--couleur-principale);*/
/*    border-radius: 200px;*/
/*    position: fixed;*/
/*    width: 120px;*/
/*    height: 120px;*/
/*    background-image: url(../img/logo_blanc.svg);*/
/*    background-repeat: no-repeat;*/
/*    background-position: center;*/
/*    background-size: 80%;*/
/*    outline:4px solid rgba(255,255,255,.2);*/

/*    top:5px;*/
/*    left:5px;*/
/*}*/

#logo {
    width:            8vw;
    height:           8vw;
    top:              1vw;
    left:             1vw;
    color:            white;
    display:          flex;
    flex-direction:   column;
    justify-content:  flex-start;
    transition:       border-radius 0.8s cubic-bezier(.09, .92, .51, 1.51), scale 0.8s cubic-bezier(.09, .92, .51, 1.51);
    position:         fixed;
    cursor:           pointer;
    z-index:          1000;
    border-radius:    100%;
    transform-origin: top center;
    background:  var(--couleur-principale);
}

#logo .picto {
    transition:       transform .8s cubic-bezier(.09, .92, .51, 1.51);
    width:            8vw;
    height:           calc(8vw / 2.96);
    background:       url(/img/logo-top.svg);
    background-size:  cover;
    transform-origin: center center;
}


#logo .text {
    font-size:        2vw;
    transition:       transform 0.5s cubic-bezier(.09, .92, .51, 1.51), opacity .3s ease-in-out;
    height:           calc(6vw / 1.509);
    background:       url(/img/logo-bottom.svg);
    background-size:  cover;
    transform-origin: center center;
}

#logo.mini {
    border-radius: 100%;
    transform:     scale(0.4);
}

#logo.mini .picto {
    transform: scale(1.5) translateY(.9vw);
}

#logo.mini .text {
    transform: scale(0);
    opacity:   0;
}


#logo h1, #logo h2 {
    display: none;
}

#nav-wrapper {
    }

nav {
    display: flex;
    flex-direction: row;
    align-self: center;
}

nav a {
    margin: 0 20px 0;
    font-size: 1.8vw;
	padding: .3em 0 0 0;
}

nav a:hover {
	background:      url(../img/chevron-black.svg) no-repeat center top;
	background-size: 40px;
	animation: chevronFloat 2.2s ease-in-out infinite;
	
	}

nav a.selected {
    font-weight: 900;
	background: url(../img/chevron-black.svg) no-repeat center top ;
	background-size:40px;
}

#subnav a {
    margin: 0 20px 0;
    font-size: 1.2vw;
    padding: .3em 0 0 0;
    }

#subnav a.selected {
    font-weight: 900;
    }

@keyframes chevronFloat {
	0%   { background-position: center 0px; }
	50%  { background-position: center 2px; }
	100% { background-position: center 0px; }
	}

header > div {
    display: flex;
    flex-direction: column;

}

#lang {
    align-self: flex-end;
    font-size: 1.4vw;
}

#lang  a {
    font-weight: normal;
}

#lang span {
    font-weight: bold;
}

#btn-mobile-menu {
    display: none;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {

    #logo {
        width:18vw;
        height: 18vw;
        top:10px;
        left:10px;
    }


    #logo .picto {
        width:            18vw;
        height:           calc(18vw / 2.96);
    }


    #logo .text {
        font-size:        2vw;
        height:           calc(18vw / 1.509);
    }


    #btn-mobile-menu {
        width: 32px;
        height: 32px;
        background: url(../img/btn-menu-open.svg) no-repeat center top;
        display: block;
        z-index: 10001;
    }

    .nav-on  #btn-mobile-menu {
        background: url(../img/btn-menu-close.svg) no-repeat center top;
    }

    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: 100vh;
        justify-content: flex-start;
        z-index: 10000;
        background-color: var(--couleur-principale) !important;
        top: 0;
    }

    nav a {
        color:white;
        font-size: 8vw;
        text-align: center;
    }

    nav a:hover, nav a.selected {
        background:none;
    }

    #lang {
        display: none;
        z-index:10001
    }

    .nav-on  #lang {
        display: block;
        position: absolute;
        top:20px;
        left:20px;
        color:white;
        font-size: 6vw
    }
}

/* ACCUEIL
*************************************************************************/

.button {
    background-color: white;
    color:var(--couleur-principale);

    justify-self: flex-end;
    font-size: 100%;
    background-image:url(../img/chevron-right-violet.svg);
    background-repeat: no-repeat;
    background-position: 95% center ;
    background-size: 8px;
    margin: 4px 0;
    }

.button.bordered {
    padding: .2em 1.2em .2em 1em;
    border-radius:100px;
    border:2px solid var(--couleur-principale);
    }

.button.inverse {
    color:white;
    background-color:var(--couleur-principale);
    border-color: white;
    margin-top: 8px;
}

.button.download {
    background-image:url(../img/chevron-down-violet.svg);
    background-position: 0% center ;
    background-size: 16px;
    padding: 0 0 0 1em;
    margin:  0 0 .5em 0;
    display: block;
}

.button.small {
    font-size: 75%;
	background-size: 5px;
    }

.button-wrapper {
	display: flex;
	}

.button-wrapper.right {
	justify-content: flex-end;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    .button {
        font-size: 4vw;
        background-size: 4px;
    }
}


/* ACCUEIL
*************************************************************************/
#carrousel-wrapper {
    width: 100vw;
    aspect-ratio: 2/1;

}

.carrousel-item {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
}

.carrousel-item > iframe, .carrousel-item > video{
    width: 100vw;
    aspect-ratio: 16/9;
    }

.carrousel-item .dates, .carrousel-item .titre, .carrousel-item .sous-titre {
    padding: 10px;
    background-color: var(--couleur-principale);
    color: white;
}

.carrousel-item .dates {
    align-self: flex-end;
    font-size: 2vw;
}

.carrousel-item .titre, .carrousel-item .sous-titre {
    align-self: flex-start;
    width: fit-content;
}

.carrousel-item .infos {
    display: flex;
    justify-content: space-between;
    }


.carrousel-item .actions {
    display: flex;
    flex-direction: column;
    justify-content:flex-end;
    }

.titre {
    font-family: "TriviaGroteskN6", sans-serif;
    /*font-size: 350%;*/
    font-size: 4vw;
	line-height: 1.1em;
}

.sous-titre {
    font-family: "TriviaGroteskR2", sans-serif;
    /*font-size: 150%;*/
    font-size: 2vw;
}

.dates {
    font-family: "TriviaGroteskR2", sans-serif;
    font-size: 200%;
}

#accueil h3.sous-titre {
    font-size: 200%;
	font-family: "TriviaGroteskN6", sans-serif;
	text-align: center;
    }


#home-buttons-wrapper {
    width: var(--content-width);
    margin: 5vh auto;
    display: flex;
    justify-content: space-between;
}

.home-button {
    background-color: var(--couleur-principale);
    color: white;
    width: 20vw;
    aspect-ratio: 16/9;
    border-radius: var(--border-radius);
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {

    .titre {
        font-size: 10vw;
    }

    .sous-titre {
        font-size: 6vw;
    }

    #accueil h3.sous-titre {
        font-size: 130%;
    }

    .carrousel-item .dates {
        font-size: 4vw;
        padding: 6px;
    }

    .carrousel-item .titre {
        font-size: 6vw;
        padding: 6px;
    }

    .carrousel-item .sous-titre {
        font-size: 3vw;
        padding: 6px;
    }

    .home-button {
        width: 28vw;
    }
}

/* PAGES
*************************************************************************/
.page-titre {
    font-family: "TriviaGroteskN6", sans-serif;
    font-size: 400%;
    text-align: center;
    margin: 5vh 0;
}


#content-wrapper {
    width: var(--content-width);
    margin: 5vh auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: white;
    min-height: 50vh;
}

#title-wrapper {
    text-align: center;
    flex: 0 0 100%;
    margin: 5vh 0 3vh;
    position: sticky;
    top:0;
    background: white;
    z-index: 10;
    transition: box-shadow 0.25s ease;
}

#title-wrapper.is-sticky {
    box-shadow: 0 8px 18px -17px rgba(0, 0, 0, 0.35);
}

#main-col {
    flex: 0 1 65%;
}

#main-col > * {
    margin-bottom: 3vh;
}

#secondary-col {
    flex: 0 0 28%;

}

#secondary-col > div ,#secondary-col > ul{
    margin-bottom: 2em;
}

.infos li {
    padding: 4px 0;
    /*margin: 4px 0;*/
    border-collapse: collapse;
    border-top: 1px dotted grey;
    display: flex;
}

.icon-info {
    height: 1.2em;
    display: inline-block;
    align-self: center;
    margin-right: .5em;
    }


.date-status {
    color:white;
    margin: 0 0 0 10px;
    transform:rotateZ(-4deg);
    background-color: var(--couleur-principale);
}

.infos li:last-child {
    border-bottom: 1px dotted grey;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {

    #title-wrapper {
        margin: 0vh 0 3vh;
    }

    #content-wrapper {
        flex-direction: column;
    }
    #main-col, #secondary-col {
        flex: 0 0 100%
    }

    #main-col {
        order:2;
    }

    #secondary-col {
        order: 1;
    }

    #secondary-col {
        /*flex-direction: column;*/
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 5vh;
    }

    #secondary-col > div ,#secondary-col > ul {
        padding: 0;
        margin:  5px 0;
    }

    #secondary-col .infos {
        order: 2;
        font-size:16px;
        flex: 0 0 100%
    }

    #secondary-col .dates-wrapper {
        order:1;
        font-size:22px;
        flex: 0 0 60%
    }

    #secondary-col .actions-wrapper {
        order:2;
        flex: 0 0 30%;
        align-items: flex-end;
    }

}

/* PPROGRAMME
*************************************************************************/

/* Filtre */
#filters-wrapper {
    display: flex;
    justify-content: space-between;
    margin: 1vh auto;
    width: var(--content-width);
}

#filters-wrapper > div {
    flex: 0 0 30%;
}

#filters-wrapper .center {
    display: flex;
    justify-content: center;
}

#filters-wrapper .right {
    display: flex;
    justify-content: flex-end;
}

.filter {
    display: flex;
    flex-direction: row;
    width: auto;
}

.filterItem {
    padding: .2em .5em;
    border: 1px solid black;
    font-size: 1.3vw;
}

.filterItem:first-child {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

.filterItem:last-child {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}

.filterItem.selected {
    font-weight: 700;
    background-color: var(--couleur-principale);
    color: white;
}


#categories-wrapper {
    width: var(--content-width);
    margin: 2vh auto;
    display: flex;
    justify-content: center;
}

#categories-wrapper .filter-item {
    margin: 0 2px;
    padding: .2em .5em;
    border-radius: 100px;
    border: 1px solid black;
    font-size: 1.3vw;
}

.filter-item.inactive {
    color:silver;
    border-color:silver;
}

#categories-wrapper a.selected {
    background: var(--couleur-principale);
    border-color: var(--couleur-principale);
    color: white;
    font-weight: bold;
}

#months-wrapper {
    width: var(--content-width);
    margin: 2vh auto;
    display: flex;
    justify-content: center;
}

#months-wrapper a {
    margin: 0;
    padding: .2em .5em;
    border-radius: 0px;
    border: 1px solid black;
    font-size: 1.1vw;
    border-collapse: collapse;
}

#months-wrapper a.current {
    border-width: 2px;
    border-color: var(--couleur-principale);
    color: var(--couleur-principale);
    font-weight: bold;
}

#months-wrapper a.past {
    color:grey;
    border-color: grey;
}


@media screen and (min-device-width: 320px) and (max-width: 768px) {

    #filters-wrapper .left {
        display: none;
    }

    #filters-wrapper .center {
        flex : 0 0 70%;
        justify-content: flex-start;
    }

    #filters-wrapper .right {
        flex: 0 1 30%;
    }

    .filterItem {
        font-size: 3.5vw;
    }

    #categories-wrapper {
        flex-wrap: wrap;
    }

    #categories-wrapper .filter-item {
        font-size: 3.5vw;
        margin: 2px;
    }

    #months-wrapper a {
        font-size: 3vw;
        padding:  .2em;
    }
}

#programme-wrapper {
    display: flex;
    width: var(--content-width);
    margin: 5vh auto;

}

#programme-wrapper {
    flex-direction: column;
}

.evenement.item .titre {
    font-family: "TriviaGroteskN6", sans-serif;
    font-size: 180%;
}

.evenement.item .sous-titre, .evenement.item .dates {
    font-family: "TriviaGroteskR2", sans-serif;
    font-size: 100%;
}

.evenement.item.past {
    filter: grayscale(100%);
    }
    
    /* Liste */

.day {
    font-size: 125%;
    color: var(--couleur-principale);
    border-bottom: 1px solid var(--couleur-principale);
    background: white;
    position: sticky;
    top: 0;
    text-align: center;
    padding: 4px;
    margin-top: 1em;
}

.liste .evenement.item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 2em;
}

.liste .evenement.item .date-wrapper {
    order: 1;
    flex: 0 0 20%;
}

.liste .evenement.item .info-wrapper {
    order: 0;
    flex: 1 1 70%;
}

.liste .evenement.item .actions-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    order: 2;
    flex: 0 0 10%;
}

.label_hors_saison {

    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: .2em .5em;
    text-transform: uppercase;
    transform: rotateZ(-2deg);
    font-family: "TriviaGroteskN6", sans-serif;
    background: var(--couleur-principale);
    color:white
}

.actions-wrapper a {
    color: var(--couleur-principale);
}

/* Grille */

#programme-wrapper.grille {
    flex-wrap: wrap;
    flex-direction: row;
}

.grille .evenement.item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 46%;
    margin: 2%;
}

.grille .actions-wrapper {
    display: none;
}

.grille .dates, .grille .titre, .grille .sous-titre {
    padding: 2px;
    background-color: var(--couleur-principale);
    color: white;
    width: fit-content;
}

.grille .dates {
    text-align: right;
}

.grille .evenement.item .dates, .grille .evenement.item .sous-titre {
    font-size:1.1vw
}

.grille .evenement.item .date-wrapper {
    display: flex;
    justify-content: flex-end;
}

.grille .evenement.item .titre {
    font-size: 2vw
}

.grille .label_hors_saison {
	color:white;
	padding: .3em;
	background:black;
	transform: rotateZ(-10deg);
	margin: 0 auto;
	width: fit-content;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {

    .grille .evenement.item {
        flex: 0 0 100%
    }

    .grille .evenement.item .titre {
        font-size: 6vw;
        padding: 6px;
    }

    .grille .evenement.item .dates {
        font-size: 3vw;
        padding: 6px;
    }


    .grille .evenement.item .sous-titre {
        font-size: 3vw;
        padding: 6px;
    }
}


/* DETAIL */


#programme #content-wrapper {
    margin-top:0em
}

.splash {
    z-index: -1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 1em;

}

.splash-wrapper {
    display: flex;
    justify-content: space-between;
}

.carrousel-item.splash {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.categories-wrapper {
    display: inline-block;
    background-color: var(--couleur-principale);
    color:white;
    padding: .2em .5em;
    font-size: 120%;
    align-self: flex-end;
}
.labels-wrapper {
    display: flex;
    justify-content: flex-end;
    position: relative;
    top:50%;
}

.labels-wrapper img {
    width:4vw
}
.detail .actions-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    }

.detail .dates-wrapper {
    font-family: "TriviaGroteskR2", sans-serif;
    font-weight: 900;
    }

.detail h6.remarque, .distribution  {
    /*font-family: "TriviaGroteskN6", sans-serif;*/
    font-weight: 400;
    font-size: 90%;
    /*color: var(--couleur-principale);*/
    }
    
    /* HORS SAISON */
.grille .hors_saison .dates, .grille .hors_saison .titre, .grille .hors_saison .sous-titre {
    background-color:grey;
    background-color:grey
    /*filter: grayscale(100%);*/
}

.liste .hors_saison .info-wrapper{
    opacity: .5;
}

#programme .logo-container img {
    width: 50%;
    margin-bottom: 20px;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    .categories-wrapper {
        font-size: 4vw;
        padding: 9px;
    }
}


/* PAGES
*********************************************************************************/
.content.titre {
  flex: 0 0 100%;
    margin-bottom: 1em;
}

/* EQUIPE
*************************************************************************/
#equipe-wrapper {
    display: grid;
    grid-template-columns: 24% 24% 24% 24%;
    gap:14px;
}
.equipe-item {
    margin-bottom:   4vh;
    display:         flex;
    text-decoration: none;

    aspect-ratio: 1;
    /*flex:         0 0 22%;*/
}

.equipe-item h3 {
    font-size: 1.3vw;
    background-color: var(--couleur-principale);
   width: fit-content;
}

.equipe-item h4 {
    font-size: 1vw;
    background-color: var(--couleur-principale);
    width: fit-content;
}

.equipe-item h5 {
    font-size: .8vw;
    background-color: var(--couleur-principale);
    width: fit-content;
    align-self: flex-end;
    color:white
}

.equipe-item .visuel {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.equipe-item .info {
    /*display:         flex;*/
    /*flex-direction:  column;*/
    /*justify-content: center;*/
    /*width:           100%;*/
    color:white;
}

/* RESSOURCES
*********************************************************************************/
.ressources-item {
    border-bottom:1px dotted silver;
    margin: 10px 0;
    padding: 10px 0;
    background-image: url(../img/chevron-down-violet.svg);
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 40px;
}

.ressources-item h3 {
    font-family: "TriviaGroteskN6", sans-serif;
    font-size: 2vw;
    margin-left: 80px;
}

.ressources-item h4  {
    font-family: "TriviaGroteskR2", sans-serif;
    margin-left: 80px;
}

/* GALERIES
*********************************************************************************/
#galerie {
    display:   flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
    width:     100%;
    margin:    10vh auto;
}

#galerie img {
    margin: 10px 10px 0 0;
    width:  100%;
}

#galerie a {
    margin:           10px 10px 0 0;
    width:            20vw;
    height:           20vw;
    overflow:         hidden;
    display:          flex;
    flex-direction:   column;
    justify-content:  center;
    transform-origin: center center;
    transition:       .2s all ease;
}

#galerie a:hover {
    transform: scale(1.1);
    z-index:   10;
}

.sl-overlay {
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter:         blur(20px);
}

.sl-wrapper .sl-image .sl-caption {
    background:  transparent;
    font-family: "Roboto Condensed", sans-serif;
    font-size:   150%;
    text-shadow: 0 0px 20px black;
}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {

    #galerie a {
        margin: 10px 20px 0 0;
        width:  35vw;
        height: 35vw;
    }

    .sl-wrapper .sl-image .sl-caption {
        font-size: 90%;
    }

}

/* PIED DE PAGE
    *************************************************************************/
footer {
    background-color: var(--couleur-principale);
    color: white;
    margin:          6vh 0 0vh 0;
    display:         flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-transform:  uppercase;
    font-size:   90%;
    /*font-family:     'TriviaGroteskN6', sans-serif;*/
}

footer > div {
    padding:     2vw 2vw 2vw 10px;
    line-height: 1.5em;
    flex: 0 0 20%;
}


footer #qrcode-whatsapp {
    width:  8vw;
    height:  8vw;
    display: block;
    margin: 10px 0 0 0;
    background-image: url(/img/qrcode-whatsapp.svg);
    background-size: contain;
}
footer .icon {
    display:    inline-block;
    width:      1.5em;
    height:     1.5em;
    margin:     0 0 0 4px;
    transition: transform 0.4s cubic-bezier(.09, .92, .51, 1.51);
}

footer .icon:hover {
    transform: scale(1.3);
}

#logo-footer {
    height:       3em;
    width:        5em;
    background: url(../img/logo-footer.svg) no-repeat center;
}

.icon.fb {
    background: url(../img/facebook-square.svg) no-repeat center;
}

.icon.tw {
    background: url(../img/twitter-square.svg) no-repeat center;
}

.icon.ig {
    background: url(../img/instagram-square.svg) no-repeat center;
}

.icon.yt {
    background: url(../img/youtube-square.svg) no-repeat center;
}

#sponsors {
    flex: 0 0 100%;
}

#sponsors .logo-container {
    display:         flex;
    justify-content: center;
    flex-direction: row;
}

#sponsors .logo-container .sponsor-item {
    width:   6vw;
    height:  6vw;
    margin:  1vw;
    filter:  grayscale(1) brightness(1);
    display: flex;
    /*flex-direction: column;*/
    /*justify-content: center;*/

}

#sponsors .logo-container img {
    filter:     grayscale(1);
    width:      6vw;
    align-self: center;
    /*border: 1px dotted red;*/

}

#credits {
    flex: 0 0 100%;
    font-size:  11px;
    color:      silver;
    padding:    3em 3em 3em;
    text-align: right;
}

#credits a {
    color: silver
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {

    footer > div {
        flex: 0 0 50%;
        font-size: 11px;
    }

    #credits {
        font-size: 9px;
    }
}