/**
 * @CSS DOCUMENT
 * @ 10.2026
*/
@font-face {
    font-family: 'maven_pro';
    src: url('Fonts/maven-pro-latin-wght-normal.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
}
/* Font Pictos */
@font-face {
  font-family: 'pictos';
  src: url('Fonts/pictos-new.eot?37043373');
  src: url('Fonts/pictos-new.eot?37043373#iefix') format('embedded-opentype'),
       url('Fonts/pictos-new.woff2?37043373') format('woff2'),
       url('Fonts/pictos-new.woff?37043373') format('woff'),
       url('Fonts/pictos-new.ttf?37043373') format('truetype'),
       url('Fonts/pictos-new.svg?37043373#pictos') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "pictos";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-attention:before { content: '\e800'; } /* '' */
.icon-location:before { content: '\e801'; } /* '' */
.icon-phone:before { content: '\e802'; } /* '' */
.icon-calendar:before { content: '\e803'; } /* '' */
.icon-resize-full:before { content: '\e804'; } /* '' */
.icon-down-dir:before { content: '\e805'; } /* '' */
.icon-up-dir:before { content: '\e806'; } /* '' */
.icon-left-dir:before { content: '\e807'; } /* '' */
.icon-menu:before { content: '\e808'; } /* '' */
.icon-right-dir:before { content: '\e809'; } /* '' */
.icon-down-open:before { content: '\e80a'; } /* '' */
.icon-left-open:before { content: '\e80b'; } /* '' */
.icon-right-open:before { content: '\e80c'; } /* '' */
.icon-up-open:before { content: '\e80d'; } /* '' */
.icon-refresh:before { content: '\e80e'; } /* '' */
.icon-search:before { content: '\e80f'; } /* '' */
.icon-mail:before { content: '\e810'; } /* '' */
.icon-ok:before { content: '\e811'; } /* '' */
.icon-cancel:before { content: '\e812'; } /* '' */
.icon-attach:before { content: '\e813'; } /* '' */
.icon-eye:before { content: '\e814'; } /* '' */
.icon-eye-off:before { content: '\e815'; } /* '' */
.icon-picture:before { content: '\e816'; } /* '' */
.icon-pin:before { content: '\e817'; } /* '' */
.icon-clock:before { content: '\e818'; } /* '' */
.icon-right-big:before { content: '\e819'; } /* '' */
.icon-play:before { content: '\e81a'; } /* '' */
.icon-home:before { content: '\e81b'; } /* '' */
.icon-flag:before { content: '\e81c'; } /* '' */
.icon-globe:before { content: '\e81d'; } /* '' */
.icon-link-ext:before { content: '\f08e'; } /* '' */
.icon-pinterest:before { content: '\f0d3'; } /* '' */
.icon-gplus:before { content: '\f0d4'; } /* '' */
.icon-doc:before { content: '\f0f6'; } /* '' */
.icon-angle-left:before { content: '\f104'; } /* '' */
.icon-angle-right:before { content: '\f105'; } /* '' */
.icon-angle-up:before { content: '\f106'; } /* '' */
.icon-angle-down:before { content: '\f107'; } /* '' */
.icon-quote-left:before { content: '\f10d'; } /* '' */
.icon-quote-right:before { content: '\f10e'; } /* '' */
.icon-info:before { content: '\f129'; } /* '' */
.icon-ellipsis:before { content: '\f141'; } /* '' */
.icon-ellipsis-vert:before { content: '\f142'; } /* '' */
.icon-minus:before { content: '\f147'; } /* '' */
.icon-youtube:before { content: '\f166'; } /* '' */
.icon-right:before { content: '\f178'; } /* '' */
.icon-vimeo:before { content: '\f194'; } /* '' */
.icon-plus:before { content: '\f196'; } /* '' */
.icon-language:before { content: '\f1ab'; } /* '' */
.icon-git:before { content: '\f1d2'; } /* '' */
.icon-sliders:before { content: '\f1de'; } /* '' */
.icon-at:before { content: '\f1fa'; } /* '' */
.icon-envira:before { content: '\f299'; } /* '' */
.icon-universal-access:before { content: '\f29a'; } /* '' */
.icon-question:before { content: '\f29c'; } /* '' */
.icon-snapchat:before { content: '\f2ad'; } /* '' */
.icon-github:before { content: '\f300'; } /* '' */
.icon-linkedin:before { content: '\f30c'; } /* '' */
.icon-facebook:before { content: '\f30e'; } /* '' */
.icon-instagram:before { content: '\f32d'; } /* '' */


/* ======================================================
   GLOBAL RESET
====================================================== */
*, html, body, iframe, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h5, h5, h6, pre, form, label, fieldset, input, p, blockquote, table, th, td, audio, video { margin:0; padding:0; outline:0; box-sizing:border-box }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, img { display:block }
table { border-collapse:collapse; border-spacing:0 }
iframe, fieldset, img, a img { border:0 none }
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; text-align:left } 
h1, h2, h3, h5, h5, h6 { font-size:100% }
blockquote::before, blockquote::after, q::before, q::after { content:''; content:none }
a { outline:none; } /* Gets rid of Firefox's dotted borders */
textarea, table, td, th, code, pre, samp { word-wrap:break-word; /* passage à la ligne forcé */ hyphens:auto /* césure propre */ }


/* ======================================================
   ANIMATIONS
====================================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ======================================================
   TRANSITIONS
====================================================== */
a, button, .button, .toggle-menu { transition: all ease-in-out .2s }

/* ======================================================
   GENERIC STYLES and SETTINGS
====================================================== */
:root {
  --bg01:#fff;
  --bg02:#C2A316;
  --primary:#231F20;
  --accent1:#AD9112;
  --success:#1d8614;
  --warning:#ea0a0a;
  --white:#fff;
  --black:#111;
  --heroHeight:100vw;
}
html { width:100%; height:100%; font-family:"maven_pro",Helvetica,Arial,sans-serif; font-size:100%; line-height:1.5; font-weight:400 }
body { position:relative; width:100%; min-height:100%; color:var(--primary); background:var(--bg01); text-align:left }
section { position:relative; margin:3em 0; padding:3em .5em; background-position:center; background-repeat:no-repeat; background-size:cover }
section:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0 }
h1 { display:flex; flex-flow:column; justify-content:center; margin:auto; padding:0 3%; max-width:24ch; font:700 2.5rem/1.2 "maven_pro",Helvetica,Arial,sans-serif; text-shadow:0 0 0.5em var(--bg01); text-align:center }
h1::after { display:block; margin:.3em auto 0; width:10%; height:.1em; background-color:var(--primary); content:''  }
h2 { margin:2em auto; max-width:40rem; font:700 1.5rem/1.25 "maven_pro",Helvetica,Arial,sans-serif; color:var(--accent1); text-align:left }
h3 { margin:1.5em auto 1em; max-width:40rem; font:700 1.25rem/1.25 "maven_pro",Helvetica,Arial,sans-serif }
h4 { margin:1.5em auto .5em; max-width:40rem; font:700 1.125rem/1.25 "maven_pro",Helvetica,Arial,sans-serif }
h5 { margin:1.5em auto .5em; max-width:40rem; font:700 1rem/1.25 "maven_pro",Helvetica,Arial,sans-serif }
h6 { margin:1.5em auto .5em; max-width:40rem; font:700 1rem/1.25 "maven_pro",Helvetica,Arial,sans-serif }
a { color:var(--primary); text-decoration:underline }
a:hover, a:focus { color:var(--accent1); text-decoration:underline }
:focus-visible { outline:.1rem solid var(--accent1); outline-offset:0 }
a[href ^= 'tel:'] { text-decoration:none }
a[href ^= 'tel:']::before { display:inline-block; margin-right:.5em; font-family:'pictos'; font-size:1em; line-height:1.1; content:'\e802' }
a[href ^= 'mailto:']::before { display:inline-block; margin-right:.5em; font-family:'pictos'; font-size:1em; line-height:1.1; content:'\f1fa' }
hr { margin:3em 0; height:.1em; border:none; background-color:var(--primary) }
p { margin:1.5em auto; max-width:40rem; text-align:justify; word-wrap:break-word; hyphens:auto }
ul, ol { margin:.5em auto 1.5em; max-width:40rem }
ul li { margin:0 1em .625em; padding:0 .25em; list-style:disc }
ol li { margin:0 1em .625em; padding:0 .25em; list-style:decimal }
input, select { vertical-align:middle }
strong, b { font-weight:700 }
em, i { font-style:italic }
img { margin:auto; height:auto; max-width:100% }
table { margin:auto; width:fit-content }
th { font-weight:700; white-space:nowrap }
th, td { padding:.5em; border:.1em solid var(--primary); text-align:left; vertical-align:baseline }
video { height:auto; max-width:100% }
video[poster]{ object-fit:cover; object-position:center }
blockquote { margin:1.5em auto; padding:0; max-width:40rem; font-family:Helvetica,Arial,sans-serif; font-size:1.5rem; line-height:1.25; font-weight:400; font-style:italic; color:var(--primary) }

/* ======================================================
   CLASSES COURANTES
====================================================== */
#accesslinks { position: absolute; left: -999px; }
#go2top { position:fixed; display:block; bottom:5%; right:2%; margin:.5em; padding:.5em 0; width:calc(2em + 2px); height:calc(2em + 2px); font-size:1rem; line-height:1; color:var(--black); text-align:center; background-color:var(--bg01); border:1px solid var(--black); border-radius:25px; opacity:0; z-index:30; transition:all ease-in-out .2s }
#go2top.active { opacity:1; transition:all ease-in-out .2s }
#go2top:hover { color:var(--accent1); border-color:var(--accent1); transition:all ease-in-out .2s }
#go2top::before { display:inline-block; font-family:'pictos'; font-size:1em; line-height:1; content:'\f106' }
.button, a.button, button { display:inline-block; margin:1em; padding:1em 1.5em; width:fit-content; font:500 1em/1 "maven_pro",Helvetica,Arial,sans-serif; color:var(--black); text-decoration:none; white-space:nowrap; background-color:var(--bg02); border:.1rem solid var(--bg02); border-radius:2em; cursor:pointer }
a.button:hover, a.button:focus, button:hover, button:focus { color:var(--black); background-color:var(--bg01); border-color:var(--black) }
.clear-fix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0 }
.center { text-align:center }
.center p, p.center { margin:1.5em auto; max-width:40rem; text-align:center; word-wrap:normal; hyphens:inherit }
.lozad { opacity:0; transition:opacity 1.5s ease-in-out }
.loaded { opacity:1 }
.more { font-size:.75rem; text-transform: uppercase; white-space:nowrap }
.nowrap { white-space:nowrap }
.not4mobile { display:none }
.responsive { position:relative; padding-bottom:56.25%; height:0; overflow:hidden }
.responsive iframe { position:absolute; top:0; left:0; width:100%; height:100% }
.responsive img { margin:.5em auto; width:100%; height:auto; max-height:none; max-width:none }
.ctn-msg { margin:1em auto; max-width:40rem }
.success { margin:1em 0; padding:.5em 1em; color:var(--success); border:.1em solid var(--success); border-radius:.5em; background-color:var(--white); }
.success p::before { display:inline-block; margin-right:.5em; font-family:'pictos'; font-size:1em; line-height:1.1; content:'\e811' }
.error { margin:1em 0; padding:.5em 1em; color: #fff; border:.1em solid var(--warning); border-radius:.2em; background-color:var(--warning); }
.error p::before { display:inline-block; margin-right:.5em; font-family:'pictos'; font-size:1em; line-height:1.1; content:'\e800' }
.ctn-msg p, #content .ctn-msg p { margin:0; line-height:1.3 }

/* ======================================================
   Classes zone de contenu (éditeur)
====================================================== */
h2.left, h3.left, h4.left, h5.left, h6.left { text-align:left }
h2.center, h3.center, h4.center, h5.center, h6.center { text-align:center }
h2.right, h3.right, h4.right, h5.right, h6.right { text-align:right }
h2.highlight, h3.highlight, h4.highlight, h5.highlight, h6.highlight { font-size:1.25em; text-align:center }
p.left { text-align:left; word-wrap:inherit; hyphens:inherit }
p.center { text-align:center; word-wrap:inherit; hyphens:inherit }
p.right { text-align:right; word-wrap:inherit; hyphens:inherit }
p.highlight { font-size:1.25em }
.text-primary { font-weight:700; color:var(--accent1); }
.text-capitalize { text-transform:capitalize }
.text-lowercase { text-transform:lowercase }
.text-uppercase { text-transform:uppercase }
.bg-highlight { padding:0 .3em; box-shadow: inset 0 -1.3em 0 var(--bg02); -webkit-box-decoration-break: clone; box-decoration-break:clone }
.textColorNegative, .textColorNegative h2, .textColorNegative h3, .textColorNegative h4, .textColorNegative h5, .textColorNegative h6 { color:var(--white) }
.tbl-container { margin:1.5em auto; overflow-x:auto; }
tr.no-border th, tr.no-border td { border:none }
.mi-delimiter-space { margin:1.5em 0; height:.1em }
.mi-delimiter-stars { margin:3em 0; text-align:center }
.container { position:relative }
.container:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0 }
div.bkgImg { position: absolute; top: 0; left: 0; width: 100%; height:100%; z-index:1 }
div.bkgImg img { object-fit:cover; object-position:center; width:100%; height:100% }
section div.inner, .container div.inner { position:relative; padding:1em 0; max-width:40em; z-index:2 }
section > h2, section div.inner > h2 { margin:1em auto }
section > h3, section div.inner > h3 { margin:1em auto }
div.mi-image { margin:0 auto; max-width:64em }
.mi-image.right, .mi-image.left { margin:.5em 0 }
.mi-image img { margin:0 auto; width:360px; border-radius:.625em }
.mi-image picture img { object-fit:cover; object-position:center; width:100%; max-width:inherit; height:100% }
div.mi-multicolumns { margin:1.5em auto; display:flex; flex-flow:column; justify-content:center; gap:1em }
div.mi-column { flex:0 0 100%; max-width:100% }
div.mi-column h2, div.mi-column h3 { margin:1em 0 }
div.mi-column .mi-image img { width:auto; max-height:240px }
p.mi-caption, figcaption { margin:.5em; font-size:.875rem; line-height:1.25; font-style:italic }
a.button.center { display:block; margin:1em auto }
div.mi-video { margin:1.5em auto; max-width:64em }
div.mi-embed { position:relative; margin:1.5em auto; padding-bottom:56.25%; height:0; overflow:hidden }
div.mi-embed iframe { position:absolute; top:0; left:0; width:100%; height:100% }

/*Accordion*/
:root { interpolate-size: allow-keywords; }
details summary { display:block; list-style:none }
details summary::-webkit-details-marker { display:none }
details::details-content { overflow:hidden; height:0; /* Enable transitioning of `content-visibility` */ transition:height .3s, content-visibility .3s; transition-behavior:allow-discrete }
details[open]::details-content { height:auto }
.mi-accordion { margin:1.5em auto; max-width:40rem }
.mi-accordion details { border-bottom:.1em solid var(--primary) }
.mi-accordion details:first-of-type { border-top:.1em solid var(--primary) }
.mi-accordion details > summary { padding:.5em; cursor:pointer }
.mi-accordion details > summary::before { display:inline-block; float:right; font-family:'pictos'; font-size:1em; content:'\e805' }
.mi-accordion details[open] > summary::before { content:'\e806' }
.mi-accordion-content { padding:.5em .5em 1em }
.mi-accordion-content p { margin:0 0 .5em }

/* Bloc de texte */
.text { margin:1em auto; padding:0 0 1px; max-width:40rem }
.text img { display: inline-block; margin:1em; padding:1em; }
.text img.artistphoto { display: block; margin:1em auto; padding:0; width: 100%; max-width: 640px; max-height: 320px; object-fit: contain; object-position: 50% 50%; }
.text .ctn-image img { display: block; margin: 0; padding: 0; }
.text div.img-left { text-align: center; }
.text div.img-right { text-align: center; }
.text div.img-left img, .text div.img-right img { margin: 0 auto; padding: 0; width: 100%; }
.text .responsive { max-width: inherit; }
.text .responsive img { display: block; margin: 0; padding: 0; width: 100%; height: auto; }
.text a.linkMonbillet { display:block; max-width:240px }
.text a.linkMonbillet img { margin:0; padding:0; width:100%; height:auto; border-radius:1em }


/* ======================================================
   FORMULAIRES
====================================================== */
form { margin:1.5em auto; max-width:30rem }
fieldset { display:flex; flex-flow:row wrap; padding:.5em 1em; background-color:var(--bg02); border-radius:.5em }
form .flex-grid { gap:0 2em }
legend { padding:0 1em }
form p, form div.line { margin:1em 0; width:100% }
form .field { clear:both; position:relative; margin:.5em 0; flex:1 1 100% }
form .field.full, form .field.code-image, form .field.checkbox, form .field.radio { flex:1 1 100% }
form .field.checkbox, form .field.radio { padding-left:2em }
label { display:block; margin-bottom:.5em; font-family:"maven_pro",Helvetica,Arial,sans-serif; font-size:.75rem; line-height:1.25; font-weight:400; color:var(--primary); letter-spacing:.05em; text-align:left; cursor:pointer }
label span { white-space:inherit }
.checkbox label, .radio label { display:inline; font-family:"maven_pro",Helvetica,Arial,sans-serif; font-weight:400; font-size:1rem; color:var(--primary); letter-spacing:initial; vertical-align:baseline }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="time"], textarea, select { padding:0.5em 1em; width:100%; font-size:1rem; line-height:1.5; font-family:"maven_pro",Helvetica,Arial,sans-serif; font-weight:400; background-color:var(--bg01); border:1px solid var(--primary); border-radius:5px; box-shadow:1px 1px var(--primary) }
textarea { width:100%; height:10rem; }
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="time"]:focus, textarea:focus { border-color:var(--accent1); }
select { appearance:none; padding-right:1.2em; background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMTQuODMgMTYuNDJsOS4xNyA5LjE3IDkuMTctOS4xNyAyLjgzIDIuODMtMTIgMTItMTItMTJ6Ii8+PHBhdGggZD0iTTAtLjc1aDQ4djQ4aC00OHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4='); background-size:1.2rem; background-repeat:no-repeat; background-position:calc(100% - .1rem) center; width:240px; margin:.25em 0; }
/* Radio & checkbox */
input[type="radio"], input[type="checkbox"] { position:relative; display:inline-block; /* Remove most all native input styles */ appearance:none; /* For iOS < 15 */ background-color:var(--white); /* Not removed via appearance */ margin:0 .5em 0 0; font:inherit; color:var(--primary); width:1.25em; height:1.25em; border:1px solid var(--primary); border-radius:50%; box-shadow:1px 1px var(--primary); cursor:pointer; }
.radio input[type="radio"], .checkbox input[type="checkbox"] { position:absolute; top:0; left:0 }
input[type="radio"]:checked, input[type="checkbox"]:checked { border-color: var(--primary); }
input[type="checkbox"] { border-radius:3px }
input[type="radio"]::before, input[type="checkbox"]::before { position: absolute; top: calc(50% - 5px); left: calc(50% - 5px); display: block; content: ""; width: 10px; height: 10px; transform: scale(0); transition: 120ms transform ease-in-out; }
input[type="radio"]::before { border-radius: 50%; background-color: var(--primary); }
input[type="checkbox"]::before { clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform-origin: bottom left; box-shadow: inset 1em 1em var(--black); background-color: var(--primary); }
input[type="radio"]:checked::before, input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="radio"]:focus, input[type="checkbox"]:focus { outline:.1rem solid var(--accent1); outline-offset:0; }
/* Submit & buttons */
input[type="submit"] { display:inline-block; margin:1em; padding:1em 1.5em; width:fit-content; font:700 1em/1 Helvetica,Arial,sans-serif; color: var(--white); text-decoration:none; white-space:nowrap; background-color: var(--accent1); border:.1rem solid var(--accent1); border-radius:2em; cursor:pointer; }
input[type="submit"]:hover, input[type="submit"]:focus { color:var(--accent1); background-color:var(--bg01); }

/* Special */
.checkbox label { display:inline; }
.password i { position:absolute; right:0; bottom:0; margin:.5em; background-color:var(--white); cursor:pointer }
.code-image { clear:both; text-align:left }
form .code-image img { border:medium none; float:left; margin:0 1em 0 0; width:160px; border-radius:5px }
.code-image input { height:50px; width:160px; text-align:center; letter-spacing:0.3em; text-transform:uppercase; }
a.btn-reloadimgcode { display:inline-block; margin:.5em .5em 1em; padding:.1em .5em; width:fit-content; font:400 .75rem/1 "maven_pro",Helvetica,Arial,sans-serif; color:var(--black); text-decoration:none; white-space:nowrap; background-color:var(--bg02); border:1px solid var(--bg02); border-radius:2em; cursor:pointer; }
a.btn-reloadimgcode:hover, a.btn-reloadimgcode:focus { color:var(--black); background-color:var(--bg01); border-color:var(--black) }
.iti { display: block; /*Phone field*/}
fieldset.fs-msg { margin:1.5em 0 }
fieldset.fs-cgu { justify-content:center; background-color:var(--bg01); }
fieldset.fs-cgu .field { flex:0 1 auto }


/* ======================================================
   HEADER, MENU
====================================================== */
#header { position:fixed; top:0; width:100%; height:auto; z-index:10 }
#header .wrapper { padding:1em 3%; background:var(--black); background: linear-gradient(180deg,rgb(17, 17, 17) 0%, rgba(17, 17, 17, 0.085) 85%, rgba(17, 17, 17, 0) 100%); transition:background-color ease-in-out 0.4s }
#header.fixed .wrapper { background-color:var(--bg01); transition:background-color ease-in-out 0.2s }
#header .inner { height:100%; display:flex }
a.blk-logo { display:block; padding:.5em; width:fit-content }
img#logo { display:block; width:auto; height:60px; transition:height ease-in-out 0.2s }
#header.fixed img#logo { height:20px; transition:height ease-in-out 0.2s }

/* Menu */
#blk-menu { display:none; position:absolute; top:-1em; left:-3vw; z-index:20 }
#blk-menu.active { display:block; }
#blk-menu .inner { display:flex; flex-flow:column; justify-content:center; align-items:center; padding:1em; width:100vw; min-height:100vh; background-color:var(--bg01); text-align:center }
.menu { position:relative; margin:0 }
.menu a { position:relative; display:inline-block; padding:1em 1.5em; width:100%; font-family:"maven_pro",Helvetica,Arial,sans-serif; font-size:1rem; line-height:1; font-weight:500; color:var(--black); text-decoration:none; text-transform: uppercase; white-space:nowrap }
.menu > li { position:relative; display:block; margin:.5em 0; padding:0; list-style:none }
.menu li > a:hover, .menu li > a:focus, .menu li:focus-within > a { color:var(--accent1) }
li.active > a { color:var(--accent1) }
/* SPECIAL LINKS */
button#toggleMenu { display:block; flex:1 1 auto; width:fit-content; max-width:fit-content; margin:auto 0 auto auto; padding:.5em; font-family:"maven_pro",Helvetica,Arial,sans-serif; font-size:.75rem; line-height:1; font-weight:400; color:var(--white); text-decoration:none; text-transform:uppercase; background-color:transparent; border:none; border-radius:0 }
button#toggleMenu::before { display:block; font-family:'pictos'; font-size:2.4em; font-weight:normal; line-height:1; content:'\e808'; text-align:center }
button#toggleMenu:hover, button#toggleMenu:focus { color:var(--white) }
button.btnClose { display:inline-block; margin:0; padding:.5em; font-family:"maven_pro",Helvetica,Arial,sans-serif; font-size:.75rem; line-height:1; font-weight:400; color:var(--black); text-decoration:none; text-transform:inherit; background-color:var(--white); border:none; border-radius:0 }
button.btnClose::before { display:inline; margin-right:.5em; font-family:'pictos'; font-size:1rem; font-weight:normal; line-height:1; content:'\e812'; text-align:center }
button.btnClose:hover, button.btnClose:focus { color:var(--accent1) }


/* ======================================================
   MAIN, CONTENT
====================================================== */
main { position:relative; margin-top:var(--heroHeight); min-height:100vh; background-color:var(--bg01); z-index:2 }
.wrapper { margin:0; padding:3em 3%; background-color:var(--bg01) }
.inner { position:relative; margin:0 auto; max-width:90rem }
.content { padding:2.5em 0 }
.flex-grid { display:flex; flex-flow:row wrap; gap:1em }
.flex-item { width:100%; flex-grow:0 }
.mainImage { margin:0 auto; width:100%; max-width:64em }
.mainImage img { display:block; object-fit:contain; object-position:center top; width:auto; max-height:42em }
.hero { position:fixed; top:0; width:100%; height:var(--heroHeight); background-color:var(--black); z-index:1 }
.hero img { object-fit:cover; object-position:center; width:100%; height:100%; opacity:0; animation:fadeIn .9s ease-in .1s forwards; }
.hero.alignTop img { object-fit:contain; object-position:top center }
main#content > div:first-of-type > h2:first-child { margin-top:1em }
main#content > div:first-of-type > h3:first-child { margin-top:1em }

/* Concerts (liste) */
.blk-events { margin:1.5em 0 3em }
ul.events { max-width:fit-content }
ul.events li { position:relative; margin:0; padding:.5em; display:flex; flex-flow:row wrap; align-items:baseline; gap:0 5em; border-bottom:1px solid var(--primary); transition:color ease-in-out .2s }
ul.events li:hover, ul.events li:focus-within { color:var(--accent1); transition:color ease-in-out .2s }
.events h2 { margin:0; flex:1 1 100%; color:inherit }
.events h3 { margin:0; flex:1 1 100%; color:inherit }
.events time { flex:1 1 auto; font-size:1.125em; white-space:nowrap }
.events a { padding:0 .5em; flex:0 1 auto; font-size:2em; text-decoration:none; text-align:right; transition:color ease-in-out .2s }
.events a:hover, .events a:focus { transition:color ease-in-out .2s }
.events a::after { content:""; position:absolute; inset:0 }
.event-date span { display:inline-block }
.event-date span:last-child { margin-left:1em }

/* Evénement (détails) */
.eventhour { font-size:2rem; font-weight:600; color:var(--accent1); text-align:center }
.blk-reservation { margin:3em auto; max-width:20em; font-size:1rem; line-height:2; font-weight:500; text-align:center }
.blk-reservation a { margin:auto; width:fit-content; }
.blk-reservation img { width:240px; max-width:100%; border-radius:1em }
.compositeur { color:var(--accent1) }
.linkEdition { display:block; margin:3em auto; max-width:750px; text-align:center }

/* Artistes (archives) */
.list-artists { display:flex; margin:.5em 0 3em; max-width:inherit; flex-flow:row wrap; align-items:baseline; gap:1em 2em }
.list-artists li { margin:0; padding:0; flex:1 1 auto; list-style:none; border-bottom:1px dotted var(--primary) }
.list-artists a { display:block; padding:.5em; text-decoration:none }
.list-artists a:hover, .list-artists a:focus { text-decoration:underline }

/* Galerie */
.gallery { display:flex; margin:3em auto; flex-flow:row wrap; justify-content:center; gap:.5em }
.gallery a.gallery-item { flex:1 1 auto }
.gallery a.gallery-item img { margin:auto; object-fit:cover; object-position:center; width:100%; height:180px; border-radius:.5em }

/* Select menu */
.select-menu { position:relative; margin:0 auto; width:fit-content; z-index:2 }
.select-menu button { display:block; position:relative; margin:0; padding-right:2em  }
.select-menu ul { display:none; position:absolute; left:0; top:100%; margin:0; padding:0; max-height:60vh; min-width:100%; background-color:var(--bg01); border:1px solid var(--primary); border-radius:.25em; overflow-y:scroll }
.select-menu ul li { margin:0; padding:0; text-align:center; list-style:none }
.select-menu ul li a { display:block; font-size:.875em; font-weight:500; line-height:1.75; color:var(--black); text-decoration:none }
.select-menu ul li a:hover, .select-menu ul li a:focus { color:var(--black); background-color:var(--bg02); }

/* Magnific popup */
.mfp-bg { background-color:var(--black); opacity:.9 }
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { margin:0 auto; padding:0; right:inherit; left:calc(50% - 22px); width:44px;background-color:var(--primary); text-align:center }
.mfp-arrow { opacity:.3 }
button.mfp-arrow:hover, button.mfp-arrow:focus { background-color:transparent }
.mfp-bottom-bar { padding:.5em; background-color:var(--primary) }
.mfp-title { float:left; font-size:1rem; font-style:italic; color:var(--white) }
.mfp-counter { float:right; position:relative; top:inherit; right:inherit; font-size:.75rem; color:var(--white) }

/* ======================================================
   FOOTER
====================================================== */
footer { position:relative; z-index:2 }
footer.wrapper { padding:0 3% }
footer .inner { padding:1em 0; z-index:2 }
footer a.phone::before { content:'\e80f' }
footer a.email::before { content:'\e809' }
footer a.newsletter::before { content:'\e80d' }
footer address { display:inline; text-align:center }
img.decoFooter { margin-right:0 }
.legal { margin:1em 0; font-size:.875rem }
.copyright { margin:0; font-size:.625rem }
.signature { font-size:.625rem }
.signature a { text-decoration:none; white-space:nowrap }
.signature a:hover, .signature a:focus { text-decoration:underline }
#blk-cookies { position:fixed; clear:both; padding:1em; bottom:0; width:100%; color:var(--primary); text-align:center; background-color:var(--bg01); box-shadow:0 -10px 15px 1px rgba(0,0,0,.2); z-index:101 }
a.btn-cookies-accept { display:inline-block; margin-left:.5em; font-weight:700; color:var(--white); background-color:var(--accent1); }
a.btn-cookies-accept:hover, a.btn-cookies-accept:focus { color:var(--white); background-color:var(--accent1); }
.btn-insta, .btn-fb, .btn-news { display:inline-block; position:relative; margin:.5em .75em .5em 0; font-weight:.875rem; font-weight:600; line-height:1; text-decoration:none }
.btn-insta:hover, .btn-fb:hover, .btn-news:hover, .btn-insta:focus, .btn-fb:focus, .btn-news:focus { text-decoration:none }
.btn-insta::before { display:inline-block; font-family:'pictos'; font-size:2rem; line-height:1; content:'\f32d' }
.btn-fb::before { display:inline-block; font-family:'pictos'; font-size:2rem; line-height:1; content:'\f30e' }
.btn-news::before { display:inline-block; margin:0 .25rem 0 0; font-family:'pictos'; font-size:2rem; line-height:1; content:'\e810' }
.btn-go-top { display: none; position: relative; left: calc(50% - 15px); margin:2em auto; font-size: 1.2em; text-align: center; }

.debug { display: none; }


/**=====================================================
   REGLAGES SELON TAILLE DISPONIBLE
====================================================== */
@media (width >= 48em) {
   html { font-size:110% }
   .not4mobile { display:block }
   .flex-grid { gap:1.5em 2em }
   .flex-item { width:calc((100% - 2em) / 2) }
   .mi-image.right { float:right; margin:1em 0 1em 1.5em }
   .mi-image.left { float:left; margin:1em 1.5em 1em 0 }
   div.mi-multicolumns { flex-flow:row wrap; gap:1em 3em }
   div.mi-column { flex:0 1 auto; max-width:18em }
   div.mi-column .mi-image img { width:auto; max-height:360px }
   .gallery a.gallery-item img { height:240px }
   img.decoFooter { position:absolute; right:0; bottom:0; z-index:1 }
   ul.events li { flex-flow:row nowrap }
   .events h2, .events h3 { flex:1 1 70%; max-width:20em }
   .events time { flex:0 1 20%; text-align:right }
   .events a { flex:0 1 10% }
   footer.wrapper { padding:5em 3% 0 }
   .debug { display:block; position:relative; z-index:200 } 
}

@media (width >= 64em) {
   :root {
    --heroHeight:70vh;
   }
   h1 { font-size:3rem }
   img#logo { height:100px }
   #header.fixed img#logo { height:20px }
   .flex-item { width:calc((100% - 4rem) / 3) }
   .formfield-text, .formfield-texteara, .formfield-select, .formfield-checkbox, .formfield-radio { width:auto }
   .gallery a.gallery-item img { height:240px }
   .eventhour { font-size:2.5rem }
}

@media (width > 96em) {
   html { font-size:120% }
   #blk-menu { position:relative; top:inherit; left:inherit; display:block; padding:0; width:auto; height:auto; min-height:inherit; background-color:transparent; flex:1 1 auto; z-index:0 }
   #blk-menu.active { box-shadow:none }
   #blk-menu .inner { padding:0; width:inherit; min-height:inherit; flex-flow:row nowrap; justify-content:flex-end; text-align:right; background-color:transparent }
   button#toggleMenu { display:none }
   .menu { max-width:inherit }
   .menu a { position:relative; display:inline-block; padding:.25em 1em; width:auto; font-size:.875em; background-color:var(--bg02); border-radius:1em }
   .menu li > a:hover, .menu li > a:focus, .menu li:focus-within > a, .menu li > a.active { color:var(--black); background-color:var(--bg01) }
   .menu > li { position:relative; display:inline-block; margin:0 .5em; padding:0 }
   .menu span.btnOpen { display:none; }
   #exitMenu { display:none; }
   div.mi-embed { padding-bottom:0; max-width:64em; height:36em; overflow:hidden }
   .gallery a.gallery-item img { height:360px }
   div.mi-column { max-width:30em }
}

@media (width > 120em) {
   html { font-size:150% }
}









































































/*************************************
	* Main, content
*************************************/
.ctn-flex-grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; flex-direction: row; padding:0 0 1px; }
.grid-item { position: relative; display: inline-block; margin: 1em 0; padding: 0; width: 100%; }
.ctn-image img { object-fit: contain; margin: auto; width: 100%; max-width: 360px; max-height: 270px; }
.ctn-center { text-align: center; }


/* Partenaires */
.ctn-flex-grid.partners .grid-item { width: 50%; text-align: center; }
.ctn-flex-grid.partners img { margin: auto; padding: 0; max-width: 200px; max-height: 80px; }

/* Archives */
.list-editions { margin:.5em 0; justify-content: flex-start; align-items: flex-start; }
.list-editions li { width: 50%; }
.list-editions a { display: block; margin: auto; padding: 50px 10px 0 10px; width: 120px; height: 160px; color: #b89d18; text-decoration: none; text-align: center; background-color: #fff; border:2px solid #b89d18; }
.list-editions a:hover, .list-editions a:focus { color:#fff; background-color: #b89d18; }





/* Contact */
.btn-tel { display:inline-block; margin: .5em 0;  }
.btn-email { display:inline-block; }