/* #F68712 -> #A88D9C */

:root {
 /* 2023 
  --primary-color: #5D528B;
  --secondary-color: #CE6415;
  --tertiary-color: #A88D9C;
  */
  --primary-color: #333596;
  --secondary-color: #ED4834;
  --tertiary-color: #9E853F;
}

body {
 font-family: "Open Sans", sans-serif;
 margin: 0px;
 background-color: #333333;
}

input, textarea {
 font-family: "Open Sans", sans-serif;
}

h1,h2,h3,h4 {
 color: #333;
 margin-top: 0px;
}


a {
 color: #0066ff; 
}

a:hover {
 color: #000;
}


div, input, textarea {
 box-sizing: border-box;
}

/*
.main {

}
*/

#infobox {
 position: fixed;
 z-index:3000;
 width: 80%;
 background-color: #fff;
 min-height: 200px;
 display:none;
 border-radius: 5px;
 padding: 20px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
/*
 -webkit-overflow-scrolling: touch;
 overflow: auto;
*/
}

.infobox-tools {
  position: sticky;
  top:0px;
  right: 0px;
} 

.share-social {
 margin-top: 10px;
 margin-bottom: 10px;
 text-align:right;
 color: #666;
}

.share-social a {
 color: #aaa;
 font-size: 120%;
}

.share-social a:hover {
 color: #333;
}

.actualites-home {
 margin-top: 20px;
 margin-bottom: 20px;
 padding-top: 20px;
 border-top: 1px solid #ccc;
}

.message {
 margin-top: 10px;
 margin-bottom: 10px;
 padding: 10px;
 color: white;
}

.special-info {
 margin-right: 20px;
 background-color: #ccc;
 color: #000;
}

.special-info p {
 padding: 20px;
}

.ko {
 background-color: red;
}

.ok {
 background-color: green;
}

.separator {
 padding-bottom: 20px;
 margin-bottom: 20px;
 border-bottom: 1px solid #ccc;
}

.responsive {
 max-width: 100%; 
}

.linkicone {
 color: #666;
}
.linkicone:hover  {
 color: #333;
}

.contenu {
 padding: 20px;
 background-color: rgb(230,230,230);
}

.photo-gallery {
 display: flex;
 flex-wrap: wrap;
 margin-left: -10px;
 margin-right: -10px;
}

.photo-gallery .thumbnail-holder {
 width: 50%;
 height: 133px;
 overflow: hidden;
 padding: 10px;
}

.photo-gallery .thumbnail {
 width: 100%;
}

.programme {
 display: flex;
 flex-wrap: wrap;
 margin-bottom: 40px;
}

.sponsors-gallery {
 display: flex;
 flex-wrap: wrap;
 margin-left: -10px;
 margin-right: -10px;
}

.sponsors-gallery .thumbnail-holder {
 padding: 40px;
}

.sponsors-gallery .thumbnail {
 max-width: 100%;
}

.sponsors-gallery-normal {
 display: flex;
 flex-wrap: wrap;
}

.sponsors-gallery .thumbnail-holder,
.sponsors-gallery-normal .thumbnail-holder
 {
 padding: 40px;
}

.sponsors-gallery .thumbnail,
.sponsors-gallery-normal .thumbnail
 {
 max-width: 100%;
}

.separated-section {
 padding-bottom: 20px;
 margin-bottom: 20px;
 border-bottom: 1px solid #ccc;
} 

.articles-presse {
 display: flex;
 flex-wrap: wrap;
 margin-bottom: 20px;
}

.articles-presse .source {
 font-size: 140%;
}
.articles-presse .date {
 color: #333;
}

.equipe {
 margin-bottom: 20px;
}

.equipe .personne {
 font-size: 140%;
}
.equipe .role {
 color: #333;
}


.clickable {
 cursor: pointer;
}

.block {
 margin-bottom: 40px;
}

.programme .col1 {
 background-color: #333;
 display: flex;
}

.programme .col1 .vignette-zone {
 padding: 10px;
 width: 65%;
}

.programme .col1 .vignette {
 max-width: 300px;
 width: 100%;
}

.programme .col1 .categorie-concert {
 text-transform: uppercase;
 padding-bottom: 10px;
 color: #FFF;
 }

.programme .col1 .info-concert {
 text-align: right;
 padding: 10px;
 width: 35%;
}


.one-programme .the-date 
, .programme .col1 .info-concert .date-concert .the-date {
 display: inline-block;
 background-color: var(--tertiary-color);
 padding: 5px;
 color: #000;
 font-weight: bold;
}

.one-programme .heure-concert
,.programme .col1 .info-concert .heure-concert {
 margin-bottom: 10px;
}

.one-programme .the-time
,.programme .col1 .info-concert .heure-concert .the-time {
 display: inline-block;
 padding: 5px;
 color: #ccc;
}

.one-programme .ville-concert
, .programme .col1 .info-concert .ville-concert {
 color: #FFF;
 text-transform: uppercase;
}

.one-programme .lieu-concert
, .programme .col1 .info-concert .lieu-concert {
 font-size: 90%;
 color: var(--tertiary-color);
}

.programme .col2 {
 background-color: #222;
 padding: 10px;
}

.programme .col2 .titre-concert {
 color: #fff;
 font-size: 120%;
 text-transform: uppercase;
 padding-bottom: 10px;
}

.programme .col2 .artiste-nom {
 color: var(--tertiary-color);
}

.programme .col2 .artiste-role {
 padding-left: 10px;
 font-size: 80%;
 letter-spacing: 0.1em;
 color: #FFF
}

.programme .col2 .apercu-programme {
 margin-top: 10px;
 font-style: italic;
 color: #FFF;
}

.laureats-concours {
 display: flex;
 flex-wrap: wrap;
 margin-bottom: 20px;
 background-color: #666;
 color: #ccc;
}

.laureats-concours .col1 {
 padding: 20px;
}

.laureats-concours .col2 {
 padding: 20px;
}

.informations-concours {
 display: flex;
 flex-wrap: wrap;
}

.bouton-annee {
 display: inline-block;
 padding: 10px;
 text-decoration: none;
 background-color: #333;
 margin: 2px;
 color: #FFF;
}

.bouton-annee:hover {
 background-color: #000;  
 color: #fff;
}

.bouton {
 display: block;
 max-width: 200px;
 background-color: #333;
 padding: 10px;
 text-align: center;
 background-color: var(--primary-color);
 color: #FFF;
 text-decoration: none;
 font-weight: bold;
 margin-bottom: 2px;
}

.bouton:hover {
 background-color: var(--secondary-color); /*#de7608;*/  
 color: #FFF;
}

.bouton-formulaire {
 display: block;
 min-width: 200px;
 max-width: 200px;
 padding: 10px;
 text-align: center;
 background-color: #333;
 color: #FFF;
 text-decoration: none;
 font-weight: bold;
 border: 0px;
}

.bouton-formulaire:hover {
 background-color: #000;  
}

.strongbox {
 background-color: #ccc;
 padding: 10px;
 font-size: 120%;
 text-align: center; 
}

.accroche {
  display: block;
  color: white;
  background-color: var(--secondary-color);
  padding: 10px;
  font-size: 120%;
  text-decoration: none;
  text-align: center; 
 }
 .accroche h1 {
  color: white;
 }
 .accroche:hover {
   color: white;
   background-color: var(--primary-color);
 }

.dates-cles-concours {

 display: flex;
 flex-wrap: wrap;
 margin-bottom: 1px;

}

.dates-cles-concours .col1 {
 background-color: #333;
 padding: 10px;
 color: #fff;
}

.dates-cles-concours .col2 {
 background-color: #000000;
 padding: 10px;
 color: #ccc;
}


.one-programme {
 display: flex;
 flex-wrap: wrap;
 margin-left: -10px;
 margin-right: -10px;
}

.one-programme .infos-pratiques {

 display: flex;
 flex-wrap: wrap;
 margin-bottom: 1px;

}

.one-programme .infos-pratiques .col1 {
 background-color: #333;
}

/*
.one-programme .info-concert {
}
*/

.one-programme .prix-concert {
 text-align: right;
 margin-top: 5px;
 color: #ccc;
}

.one-programme .billetterie-concert {
 text-align: right;
 margin-top: 5px;
}

.one-programme .billetterie-concert .bouton {
 display: inline-block;
}

.one-programme .infos-pratiques .col2 {
 background-color: #000000;
}

.one-programme .artistes-programme {
  text-align:center;
}

.one-programme .artistes-programme .artiste-image {
 max-width: 100%;
}

/*
.one-programme .artiste-nom {
}
*/

.one-programme .artiste-role {
 font-size: 90%;
 margin-bottom: 20px;
 
}

.one-programme .details-programme {
 margin-top: 20px;
 margin-bottom: 10px;
 padding: 20px;
 background-color: #666;
 color: #ccc;
}

.informations-concerts {
 font-style: italic;
 border-bottom: 1px solid #ccc;
 margin-bottom: 20px;
}

/*
.one-programme .commentaires-programme {
}
*/

.one-programme .col1
,.one-programme .col2 { 
 padding: 10px;
}


.historique{
 display: flex;
 flex-wrap: wrap;
 margin-bottom: 20px;
 padding-bottom: 20px;
 border-bottom: 1px solid #ccc;
}

.historique .col1 {
 font-size:400%;
 padding: 10px;
}
.historique .col2 {
 padding: 10px;
}

.historique .col3 {
 padding: 10px;
}

.historique .col3 p:first-child {
 margin-top: 0px;
}

.image-historique  {
  height: 200px;
  background-size: cover;
}

.historique-concert {
 margin-bottom: 20px;
 padding-bottom: 20px;
 border-bottom: 1px solid #ccc;
}

.historique-concert .titre-concert {
 font-weight: bold;
}

.preview-text {
 position: relative;
 height: 200px;
 overflow: hidden;
}

.preview-text-gradient {
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 content: "";
 background: linear-gradient(to top,
     rgba(230,230,230, 1) 0%, 
     rgba(230,230,230, 0) 80%
 );
 pointer-events: none;
}

.page {
 background-color: #ffffff;
}

.header-wide {
 border-top: 2px solid #333;
}

.header {
 display: flex;
 padding-top: 20px;
 padding-bottom: 5px;
}

/*
.banner-wide {
  background-color: #ddd; 
  height: 400px; 
}
*/

/*
.fake_banner {
}
*/

.fake_banner img {
 width: 100%;
 }

.banner {
 position: relative;
}

.banner-mask {
 display: flex;
 justify-content: center; 
 text-align:center;
 align-items: center;
 position: absolute;
 background-size: 100%;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
}

.banner-title-more {
 color: var(--tertiary-color);
 font-size: 2vw;
 text-shadow: 1px 1px #111;
}

.banner-title-more i {
 font-size: smaller;
}

.banner-title {
 color: #ffffff;
 font-size: 3vw;
 text-shadow: 1px 1px #111;
}

.banner-title-top {
 color: #ffffff;
 font-size: 3vw;
 border-bottom: 1px solid #ffffff;
 text-shadow: 1px 1px #111;
}

.banner-title-bottom {
 color: #ffffff;
 font-size: 2.5vw;
 text-shadow: 1px 1px #111;
}
 
.banner, .tinybanner, .pagebanner {
 display: flex;
 flex-wrap: wrap;
}

.tinybanner {
 width: 100%;
}


.banner .banner1-tuile {
 width: 100%;
 height: 31.25vw; 
 background-size: cover;
}

.banner .banner8-tuile {
 width: 25%;
 height: 15.625vw; 
 background-size: cover;
}

.banner .banner2-tuile {
 width: 50%;
 height: 31.25vw; 
 background-size: cover;
 position: relative;
}

.banner .banner2-tuile .artiste-nom-bottom {
 position: absolute;
 bottom: 0px;
 left: 0px;
 right: 0px;
 background-color: rgba(0,0,0,0.8);
 color: #fff;
 font-size: 2.3vw;
 padding: 10px;
}

.copyright-bottom {
 display: none;
}

.banner .banner2-tuile .copyright-bottom {
 display: block;
 position: absolute;
 bottom: 0px;
 left: 0px;
 background-color: rgba(0,0,0,0.8);
 color: #fff;
 font-size: 9px; 
 padding: 5px;
}

.tinybanner .banner2-tuile {
 width: 100%;
 background-size: cover;
 height: 100px;
}

.tinybanner .banner2-tuile .artiste-nom-bottom {
 display: none;
}

.pagebanner {
 width: 100%;
}

.pagebanner .banner2-tuile {
  width: 50%;
  height: 16vw;
  background-size: cover;
}

.pano {
 padding: 20px;
 color: white;
 font-size: 2.8vw;
 display:flex;
 flex-direction: column;
 justify-content: center; 
 text-align:center;
 align-items: center;
 background-image: url('/images/bg.png');
 background-size: cover;
}

/*
.banner-zone {
}
*/

.banner-zone img {
/* width: 100%; */
  width: 100%; 
}

.banner-infos {
 color: #fff;
 padding-top: 20px;
 padding-bottom: 20px;
 text-align: right;
 
}


.banner-infos .date-concert {
 margin-bottom: 10px;
}

.banner-infos .date-concert span {
 margin-left: 10px;
 background-color: var(--tertiary-color);
 padding: 5px;
 color: #000;
 font-weight: bold;
}

.banner-infos .titre-concert {
 font-size: 200%;
 margin-top: 20px;
 margin-bottom: 20px;
 text-transform: uppercase;
}

.banner-infos .artiste-nom {
 margin-top: 5px;
 font-size: 110%;
 font-weight: bold; 
 color: var(--tertiary-color);
}

.banner-infos .artiste-role {
 font-size: 80%;
 letter-spacing: 0.1em;
}


.pano .artiste-nom {
 color: #fff;
}

.pano .artiste-role {
 font-size: 80%;
 letter-spacing: 0.1em;
 color: var(--tertiary-color);
}



.logo {
 height: 110px;
 margin-right: 20px;
}

/*
.logo-zone {
}
*/

.nom-festival {
 font-weight: bold;
 font-size: 120%;
 letter-spacing: 0.05em;
}

.periode-festival {
 padding-bottom: 5px;
}

.complement-nom-festival {
 padding-top: 5px;
 border-top: 1px solid #ccc;
 font-size: 90%;
 color: #666;
}

.menu-zone {
 flex: 1;
 padding-top: 36px;
 text-align: right;
}

/*
.navigation_mobile {
}
*/

.navigation_mobile a {
  text-decoration: none;
  padding-top: 2px;
  padding-bottom: 2px;
  color: #333;
}

.navigation_mobile>ul>li>a {
 background-color: #ccc;
 padding-right: 4px;
 display: block;
}

.navigation_mobile a.meta-menu {
 font-size: 70%;
 font-weight: bold;
}

.navigation_mobile ul {
 list-style: none;
}

.navigation_mobile li {
  padding-top: 6px;
  padding-bottom: 6px;
}

.navigation {
 margin-right:-4px;
}

.navigation ul {
 margin: 0px;
 padding: 0px;
 color: #666;
}

.navigation ul li ul {
 margin-top: 5px;
 text-align: left;
 background-color: #FFF; 
 border: 1px solid #ccc;
 z-index: 1000;
}

.navigation ul li ul li {
 padding: 5px;
}

.navigation ul li ul li a  {
 padding: 5px;
 color: #333;
 display: block;
}
.navigation ul li ul li a:hover  {
 color: #000;
 background-color: #eee;
}

.navigation a {
 text-decoration: none;
 display: inline-block;
 padding-left: 4px;
 padding-right: 4px;
 color: #666;
 outline: 0;
}

.navigation a:hover,.navigation a.selected, .navigation_mobile a:hover, .navigation_mobile a.selected { 
 color: #000000;
 }

.navigation a.lien-ami,
.navigation_mobile a.lien-ami
 {
  background-color: var(--secondary-color);
  color: white;
}
.navigation a.lien-ami:hover,
.navigation_mobile a.lien-ami:hover 
 {
  background-color: var(--primary-color);
  color: white;
}

.main {
 margin-top: 20px;
 min-height: 600px;
 padding-top: 20px;
 padding-bottom: 20px;
}

.footer-wide {
 background-color: #333;
}

.footer {
 min-height: 100px;
 padding-top: 20px;
 padding-bottom: 20px;
 color: #ccc;
 display: flex;
}

.footer-left {
 flex-grow: 1;
}

.footer-right {
 text-align: right;
 font-size: 80%;
 flex-grow: 1;
}

 .footer a {
  color: #ddd;
 }
 .footer a:hover {
  color: #fff;
 }

.snippet {
   padding-right: 10px;
   padding-left: 10px;
}


form .label {
 margin-top: 10px;
 margin-bottom: 2px;
 color: #666;
}
/*
form .field {
}
*/

input[type=text], input[type=date], input[type=email], textarea {
 padding: 5px;
 border: 1px solid #ccc;
 width: 100%;
 font-size:120%;
}


textarea {
 height: 300px;
}

.titre-section-formulaire {
 padding: 5px;
 background-color: #333;
 color: #fff;
}
.section-formulaire {
 padding: 5px;
 margin-bottom: 20px;
}

.homepage {
 display: flex;
 flex-wrap: wrap;
}

.size16 { width: 50%; }
.size20 { width: 50%; }
.size25 { width: 50%; }
.size25full { width: 100%; }
.size30 { width: 100%; }
.size33 { width: 100%; }
.size40 { width: 100%; }
.size50 { width: 100%; }
.size66 { width: 100%; }
.size75 { width: 100%; }
.size100 { width: 100%; }


@media screen and (min-width: 580px) {
.tinybanner .banner2-tuile {
  width: 33.3333%;
}

.photo-gallery .thumbnail-holder {
 width: 25%;
}

}

@media screen and (min-width: 960px) {

.size16 { width: 16.666%; }
.size20 { width: 20%; }
.size25 { width: 25%; }
.size25full { width: 25%; }
.size30 { width: 30%; }
.size33 { width: 33.333%; }
.size40 { width: 40%; }
.size50 { width: 50%; }
.size66 { width: 66.666%; }
.size75 { width: 75%; }
.size100 { width: 100%; }

.photo-gallery .thumbnail-holder {
 width: 20%;
}

}

@media screen and (min-width: 1024px) {
 .snippet {
   width: 1024px;
   margin-left: auto;
   margin-right: auto;
 }
}