@import url('typo.css');

:root
{
--nav_width: 300px;

--color_header_background: #f54b1e;
--color_footer_background: #8588bb;

--color_nav_main: #ffffff;
--color_nav_main_active: #e7dac7;

--color_nav_second: #8588bb;
--color_nav_second_active: #f54b1e;

--color_nav_footer: #ffffff;
--color_nav_footer_active: #ffffff;

--color_text: #212529;
--color_title: #8588bb;

--color_btn_background: #8588bb;
--color_btn_link: #ffffff;
--color_btn_link_active: #e7dac7;

--color_card_background: #f9eccf;
--color_card_title: #8588bb;
--color_card_text: #212529;

--color_card_highlight_background: #f54b1e;
--color_card_highlight_title: #ffffff;
--color_card_highlight_text: #ffffff;

--color_espace_orange: #f47d4e;
--color_espace_bleu: #8395cc;
--color_espace_jaune: #e0af2a;
--color_espace_vert: #62a674;
--color_espace_rouge: #c63f2c;
}

.cl-white{color: white;}

.cl-nav-main{color: var(--color_nav_main);}
.cl-nav-main-active{color: var(--color_nav_main_active);}
.cl-nav-second{color: var(--color_nav_second);}
.cl-nav-second-active{color: var(--color_nav_second_active);}

/*
.cl-nav1{color: var(--color_nav1);}
.cl-nav2{color: var(--color_nav2);}
.cl-header1{color: var(--color_header1);}
.cl-header2{color: var(--color_header2);}
*/
.cl-espace_vert{color: var(--color_espace_vert);}
.cl-espace_orange{color: var(--color_espace_orange);}
.cl-espace_rouge{color: var(--color_espace_rouge);}
.cl-espace_jaune{color: var(--color_espace_jaune);}
.cl-espace_bleu{color: var(--color_espace_bleu);}

/*
.bg-cl-header1{background-color: var(--color_header1);}
.bg-cl-header2{background-color: var(--color_header2);}
 */
.bg-cl-espace_vert{background-color: var(--color_espace_vert);}
.bg-cl-espace_orange{background-color: var(--color_espace_orange);}
.bg-cl-espace_rouge{background-color: var(--color_espace_rouge);}
.bg-cl-espace_jaune{background-color: var(--color_espace_jaune);}
.bg-cl-espace_bleu{background-color: var(--color_espace_bleu);}

/* INIT */
html,body {
    font-size: 18px;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}
body, html {
  font-family: 'euclid', var(--bs-body-font-family);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color_text);
  text-align: left;
}
a{text-decoration: none;color:inherit;}
a:hover {color: var(--color_nav_main_active);}

/* LAYOUT */
#layout-header{
    background-color: var(--color_header_background);
    font-family: diabolo;
}
#layout-content{
    padding-bottom: 63px;
}
#layout-footer{
    position: fixed;
    bottom: 0;
    left:0;
    right:0;
    background-color: var(--color_footer_background);
    padding: 15px 0;
    z-index: 50;
}

#layout-navigation{
    top:0;
    position: fixed;
    width: 230px;
    font-size: 1.5rem;
}




/* HEADER */
#layout-header header{
    padding-left: var(--nav_width);
}

#layout-header header .brand
{
    padding: 0;
    text-align: right;
}

#layout-header header .brand img
{
    height: 260px;
}

body.body-home #layout-header header .brand img
{
    height: 360px;
}

/* CONTENT */
#layout-content #content
{
    padding-top: 20px;
    padding-left: var(--nav_width);
}

#layout-content #content h2
{
    font-family: diabolo;
    color: var(--color_title);
    margin-bottom: 25px;
}
#layout-content #content h3
{
    font-size: 1.15rem;
    font-weight: bold;
    margin: 35px 0 5px 0;
}
#layout-content #content .col h3:first-child
{
    margin-top: 0;
}
#layout-content #content p
{
    line-height: 1.35rem;
    margin-bottom: 1.35rem;
}
#layout-content #content ul li
{
    line-height: normal;
    padding-bottom: 7px;
}
#layout-content #content ul li:last-child
{
    padding-bottom: 0;
}
#layout-content #content a
{
    color: inherit;
    text-decoration: underline;
}

#layout-content #content a.no-sign{
    text-decoration: none;
}

#layout-content #content h4
{
    font-size: inherit;
    font-weight: bold;
}

.content-main{padding-bottom:15px;}
/* NAVIGATION */
#layout-navigation .mobile{
    display: none;
}
#layout-navigation .background{
    font-family: diabolo;
    background-color: var(--color_header_background);
    color:white;
    padding: 30px 36px;
}
#layout-navigation .social-networks{
    margin-top: 20px;
}
#layout-navigation .social-networks a{
    display: inline-block;
    margin-right: 7px;
    color: var(--color_nav_main);
}
#layout-navigation .social-networks a:hover{
    color: var(--color_nav_main_active);
}
#layout-navigation ul
{
    list-style-type: none;
    padding: 0;
    margin:0;
    display: block;
}
#layout-navigation ul li
{
    display: block;
}
#layout-navigation ul li a
{
    display: block;
    padding: 7px 0;
    color: var(--color_nav_main);
}
#layout-navigation ul li.active a,
#layout-navigation ul li:hover a
{
    color: var(--color_nav_main_active);
}
#layout-navigation ul ul
{
    display: none;
    font-family: euclid;
    font-weight: bold;
    font-size: 1.2rem;
    padding-bottom: 15px;
}

#layout-navigation ul ul li a
{
    padding: 7px 0;
}
#layout-navigation ul li.active ul li a,
#layout-navigation ul li:hover ul li a
{
    color: var(--color_nav_main);
}
#layout-navigation ul li.active ul li.active a,
#layout-navigation ul li:hover ul li:hover a
{
    color: var(--color_nav_main_active);
}

#layout-navigation .submenu{
    padding: 18px 0 18px 36px;
    font-size: 1.10rem;
    font-weight: bold;
}
#layout-navigation .submenu ul li a{
    padding: 2px 0;
    color: var(--color_nav_second);
}
#layout-navigation .submenu ul li:hover a,
#layout-navigation .submenu ul li.active a{
    color: var(--color_nav_second_active);
}
#layout-navigation .submenu ul li:hover a:before,
#layout-navigation .submenu ul li.active a:before{
    content: '> ';
    display: inline-block;
    width: 20px;
    margin-left: -20px;
}




/* FOOTER */
#layout-footer ul
{
    display: inline;
}
#layout-footer ul li
{
    display: inline-block;
}

#layout-footer ul li a
{
    color: var(--color_nav_footer);
    font-family: diabolo;
    display: block;
    padding: 3px 0;
}

#layout-footer ul li a:after
{
    display: inline-block;
    content: '•';
    padding: 0 15px 0 18px;
}

#layout-footer ul li:last-child a:after
{
    content: '';
    padding: 0;
}

/* CONTENT - HOME */
/*
body.body-home{}
body.body-home #layout-header header{padding-bottom: 25px;}
body.body-home #layout-header header .brand{
  padding: 15px 120px 0 0;
}*/

/* CONTENT - HOME - news */
.news{}
.news .news-item{
    padding: 10px 15px;
    background-color: var(--color_card_title);
    color: white;
    margin-bottom: 15px;
}
.news .news-body p:last-child{
    margin-bottom: 0.35rem !important;
}
#myModal .news .news-item:last-child{
  margin-bottom: 0;
}
#myModal.transparent .modal-content{
  background-color: transparent;
  border: 0 none;
}
#layout-content #content .news .news-item .news-header h3{
    font-weight: bold;
    font-size: 1.25rem;
    margin: 0 0 .5rem 0;
}
.news .news-item .news-body{}

.content-strip
{
    padding: 50px 0;
    background-color: var(--color_card_background);
}
.content-strip h2
{
    font-family: diabolo;
    color: var(--color_card_title);
}
.content-strip h3
{
    color: var(--color_card_title);
}

.col-billetterie-info .content-strip
{
    padding: 15px 50px;
}
.col-billetterie-info .content-strip h2
{
    font-size: 1.5rem !important;
    text-align: center;
}
.col-billetterie-info .content-strip .info
{
  min-height: 130px;
  display: flex;
  align-items: center;
}
.col-billetterie-info .content-strip p
{
    text-align: center;
    font-weight: bold;
    width: 100%;
}
.col-billetterie-info .content-strip p.img
{
    padding: 0 50px;
}
.col-billetterie-info .content-strip small{
  font-size: 0.85em;
}

.col-billetterie-info .content-strip p.infos-footer
{
  margin:0 !important;
  font-size: .85em;
}

.encadrer{
    background-color: var(--color_card_highlight_background);
    color:var(--color_card_highlight_text);
    padding: 18px 36px;
    margin: 0;
}


/* SWIPPER */
.swiper {
  width: 100%;
  /* height: 280px; */
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 0;
}
.swiper .swiper-pagination-bullet-active{
    background-color: var( --color_footer_background )
}

.swiper .swiper-slide-container{
    padding: 25px 75px;
}
.swiper .swiper-slide-container > .row{
    cursor: pointer;
}

.swiper .swiper-slide-container.gallery-container {
  padding: 0 0 30px 0 !important;
}

.spectacle-container .col-spectacle{
    padding: 15px;
    padding-bottom: 35px;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    font-weight: bold;
    line-height: 115%;
}

.spectacle-container .col-spectacle .etoile
{
    font-size: .7rem;
    display: inline-block;
    margin-left: 2px;
}
.spectacle-container .col-spectacle .type
{
    font-size: .7rem;
    font-weight: normal;
}
.spectacle-container .col-spectacle .title
    {font-size: 1.15rem;line-height: 110%;}
.spectacle-container .col-spectacle .type,
.spectacle-container .col-spectacle .age{font-size: 0.85rem;}


.spectacle-container.spectacle-container-list{
    cursor: pointer;
    max-width: 500px;
}
.spectacle-container.spectacle-container-list .col-spectacle{
    padding-top: 10px;
    padding-left: 25px;
}
.spectacle-container.spectacle-container-list .col-spectacle .type
{
    font-size: .75rem;
}
.spectacle-container.spectacle-container-list .col-spectacle .title
    {font-size: 1.35rem;}
.spectacle-container.spectacle-container-list  .col-spectacle .categorie,
.spectacle-container.spectacle-container-list  .col-spectacle .age{font-size: 1rem;}

/* SPECTACLE */
.content-spectacle{}
.content-spectacle dl{
    line-height: normal;
    font-size: 0.85rem;
}
.content-spectacle dt{
    float:left;
    width: 160px;
}
.content-spectacle dd{
    padding-left: 180px;
    padding-bottom: 3px;
    margin-bottom: 3px;
    border-bottom: 1px solid black;
}
.content-spectacle dd:after{
    content:' ';
    height: 1px;
    overflow: hidden;
    margin-top: -1px;
    clear: both;
    display: block;
}
.content-spectacle dd.title{
    font-size: 1rem;
    padding-left: 0;
    font-weight: bold;
}
.content-spectacle dd.info{
    padding-left: 0;
    border-bottom: 0 none;
    font-style: italic;
}
.content-spectacle dd.separator{
  height: 25px;
  border-bottom: 0 none;
}
#layout-content #content .content-spectacle dl a{
    text-decoration: none;
}
#layout-content #content .content-spectacle h2{
    font-family: 'euclid';
    margin-top: 25px;
    margin-bottom: 32px;
    font-weight: bold;
}
#layout-content #content .content-spectacle h3{
    margin: 0 0 15px 0;
}
#layout-content #content .content-spectacle h2 + h3{
    margin-top: -32px;
}
#layout-content #content .content-spectacle h2,
#layout-content #content .content-spectacle h3{
    color: var(--color_main);
}
.content-spectacle .description{
    margin: 40px 0 25px 0;
    padding-top: 40px;
    border-top: 3px solid black;
}

.nav-spectacle-back{
    padding: 15px 20px;
}
.nav-spectacle-back button.btn-diabolo{
    text-align: left;
    font-family: 'euclid';
    padding: 7px 15px 15px 15px;
    line-height: normal;
    font-size: 1.2rem;
    font-weight: bold;
}
.content-spectacle .nav-spectacles{}
.content-spectacle .nav-spectacles a i{font-size: .75rem;}
#layout-content #content .content-spectacle .nav-spectacles a{
    text-decoration: none;
    font-weight: bold;
    color: var(--color_header_background);
}

table.dispo {}
table.dispo td,
table.dispo th
    {padding: 2px 7px;}
table.dispo thead tr th{font-size: .75rem;font-weight: normal;color:black;}
table.dispo thead tr th,
table.dispo tbody tr td
    {text-align: center;}
table.dispo thead tr th:first-child
    {text-align: left;}
table.dispo tbody tr td
    {font-size: 2rem; line-height: 1.25rem; vertical-align: baseline;color:var(--color_nav_main)}

table.dispo tbody tr .dispo-good
    {color: var(--color_espace_vert)}
table.dispo tbody tr .dispo-limited
    {color: var(--color_espace_orange)}
table.dispo tbody tr .dispo-none
    {color: var(--color_espace_rouge)}

table.dispo.dispo-legend td
    {vertical-align: middle;}
table.dispo.dispo-legend .legend
    {
        font-size: .75rem; vertical-align: top; display: inline-block; padding-top: 2px;
        color:var(--color_text);
    }




#layout-content #content .content-spectacle.spectacle-espace_vert h2,
#layout-content #content .content-spectacle.spectacle-espace_vert h3,
#layout-content #content .content-spectacle.spectacle-espace_vert .cl
    {color: var(--color_espace_vert);}
#layout-content #content .content-spectacle.spectacle-espace_orange h2,
#layout-content #content .content-spectacle.spectacle-espace_orange h3,
#layout-content #content .content-spectacle.spectacle-espace_orange .cl
    {color: var(--color_espace_orange);}
#layout-content #content .content-spectacle.spectacle-espace_rouge h2,
#layout-content #content .content-spectacle.spectacle-espace_rouge h3,
#layout-content #content .content-spectacle.spectacle-espace_rouge .cl
    {color: var(--color_espace_rouge);}
#layout-content #content .content-spectacle.spectacle-espace_jaune h2,
#layout-content #content .content-spectacle.spectacle-espace_jaune h3,
#layout-content #content .content-spectacle.spectacle-espace_jaune .cl
    {color: var(--color_espace_jaune);}
#layout-content #content .content-spectacle.spectacle-espace_bleu h2,
#layout-content #content .content-spectacle.spectacle-espace_bleu h3,
#layout-content #content .content-spectacle.spectacle-espace_bleu .cl
    {color: var(--color_espace_bleu);}

#layout-content #content .content-spectacle.spectacle-espace_vert .description
    {border-color: var(--color_espace_vert);}
#layout-content #content .content-spectacle.spectacle-espace_orange .description
    {border-color: var(--color_espace_orange);}
#layout-content #content .content-spectacle.spectacle-espace_rouge .description
    {border-color: var(--color_espace_rouge);}
#layout-content #content .content-spectacle.spectacle-espace_jaune .description
    {border-color: var(--color_espace_jaune);}
#layout-content #content .content-spectacle.spectacle-espace_bleu .description
    {border-color: var(--color_espace_bleu);}


.spectacle-download{
    font-size: 1.15rem;
    font-weight: bold;
    color: var(--color_header_background);
    padding: 25px 0;
}
#layout-navigation .spectacle-download{
    padding: 0 18px;
}
.spectacle-download p{
    margin-bottom: .5rem;
}
.spectacle-download a{
    display: block;
    padding: 7px 15px;
    background-color: var(--color_header_background);
    color: var(--color_nav_main) !important;
    text-decoration: none !important;
}


/* CONTENT - mise en forme */
.content{
    padding-left: var(--nav_width);
}
#layout-content #content p.sponsors {
  letter-spacing: 60px;
  line-height: 70px;
}
.sponsors img{
    vertical-align: middle;
 }
.mobile-banner
{
    margin: 0 -7px;
    background-color: var(--color_header_background);
    padding: 7px 0;
    font-family: diabolo;
    font-size: 1.25em;
    color: var(--color_header_background);
    line-height: 115%;
}
dl.content-horizontal{
    line-height: normal;
}
dl.content-horizontal dt{
    float:left;
    width: 30%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
dl.content-horizontal dd{
    padding-left: 30%;
    padding-bottom: 3px;
}
dl.content-horizontal dd:after{
    content:'';
    height: 1px;
    overflow: hidden;
    margin-top: -1px;
    clear: both;
}

dl.content-horizontal.content-horizontal-border-bottom dd{
    border-bottom: 2px solid var(--color_btn_background);
    padding-bottom: 10px;
}

#layout-content #content a.btn-diabolo,
button.btn-diabolo
{
    display: block;
    text-align: center;
    text-decoration: none;
    font-family: diabolo;
    font-size: 1.5rem;
    line-height: normal;
    padding: 8px 15px 12px 15px;
    color: var(--color_btn_link);
    background-color: var(--color_btn_background);
    border: 0 none;
}
#layout-content #content a.btn-diabolo:focus,
button.btn-diabolo:focus{
  box-shadow: none;
}
#layout-content #content a.btn-diabolo:hover,
button.btn-diabolo:hover{
  color: var(--color_btn_link_active);
}

button.btn-video
{
    border: 0 none;
    padding: 0;
    position: relative;
}
button.btn-video:before
{
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    display: block;
    content: ' ';
    background-image: url('icon/btn_video.svg');
    background-size: 100% 100%;
}

.filtres-area{}
.filtre-items{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
}
.filtre-items .item{
    margin-right: 7px;
}

/* EN IMAGES */
#gallery{}
#gallery .list.photos{}
#gallery .list.photos .thumbnails{margin: 0 -15px;}
#gallery .list.photos .thumbnails:after{
    content: ' ';
    display: block;
    height: 1px;
    margin-top: -1px;
    clear: both;
}
#gallery .list.photos .thumbnails .item{
    float:left;
    height: 160px;
    padding: 15px;
}
#gallery .list.photos .thumbnails .item img{ height: 100%; }
#gallery .list.photos .lnk{ margin-bottom: 2rem; }

/* page ACCES */
body.body-acces .content-main b{
    font-weight: 500;
}

body.body-acces .accordion-button:focus{
    box-shadow: none;
}

body.body-acces .accordion-button:not(.collapsed) {
    color: var(--color_text);
    background-color: #ebecff;
}

body.body-acces .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(180deg);
}