/* Scène aux champs — port of the 2015 design (sidebar + coloured menu blocks). Colours come from theme config as --c1..3 */
*, *::before, *::after { box-sizing: border-box; }
html { color: #222; line-height: 1.45; }
body { margin: 0; font: 500 14px/1.45 'Raleway', Arial, sans-serif; background: #fff; overflow-x: hidden; }
img, iframe { max-width: 100%; }
img { height: auto; vertical-align: middle; }
a { color: inherit; }
.c1 { --c: var(--c1); } .c2 { --c: var(--c2); } .c3 { --c: var(--c3); }

/* ---- Sidebar ---- */
.sidebar { background: var(--c1); box-shadow: 0 0 20px rgba(0, 0, 0, .42); position: relative; }
.logo { display: block; text-align: center; padding: 40px 0; }
.logo img { height: 155px; width: auto; }
nav ul { list-style: none; margin: 0; padding: 0; }
nav li { background: var(--c); }
nav a, .venue { display: block; padding: 15px 0 15px 28px; color: #fff; text-decoration: none; font-weight: 900; font-size: 16px; letter-spacing: 3px; line-height: 15px; text-transform: uppercase; }
nav li:not(.venue):hover, nav li.active { background: #000; }
.venue { background: #fff; color: #000; font-size: 13px; }
.social { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; }
.social img { height: 32px; width: 32px; }
.partners { background: #fff; color: #000; font-weight: 900; text-align: center; font-size: 15px; line-height: 25px; padding: 15px 5px; text-transform: uppercase; }
.partners img { height: 34px; width: auto; margin: 5px; }

/* ---- Main ---- */
main { padding: 0 15px 30px; }
main h1, main h2, .big { font-weight: 900; text-transform: uppercase; line-height: 1.2; }
.button { display: inline-block; line-height: 1.3; padding: 11px 22px; margin: 30px 0 0; border: 0; background: var(--c, var(--c1)); color: #fff; font-weight: 900; text-decoration: none; text-transform: uppercase; cursor: pointer; }
.button:hover { background: #000; }
.banner { display: flex; align-items: center; gap: 25px; margin: 20px 0; padding: 20px; background: var(--c2); color: #fff; line-height: 30px; text-decoration: none; }
.banner img { width: 150px; }
.season-end { padding-top: 40px; text-align: center; }

/* ---- Show card ---- */
.show { margin: 80px 0 0; }
.show .date { font-size: 22px; font-weight: 900; line-height: 30px; margin: 0; text-transform: uppercase; }
.show .cat { margin: 0 0 10px; text-transform: uppercase; }
.cancelled { display: inline-block; margin-left: 10px; padding: 0 8px; background: #000; color: #fff; }
.artists { display: grid; gap: 20px; border-top: 4px dotted #000; padding-top: 5px; }
.artist .name { font-size: 36px; line-height: 1; margin: 10px 0 15px; }
.artist .name a { text-decoration: none; }
.artist img, .artist picture { display: block; width: 100%; }
.artist .text { margin: 30px 0; }
.prices { max-width: 400px; margin: 0 0 20px; }
.prices div { display: flex; gap: 8px; background: url(../images/point.png) repeat-x center / 6px; }
.prices dt, .prices dd { margin: 0; background: #fff; padding-right: 13px; }
.prices dd { margin-left: auto; padding: 0 0 0 13px; }
.show footer .button { margin-top: 0; }
.show .infos { margin-top: 20px; }

/* ---- Archives ---- */
.years { display: flex; flex-wrap: wrap; gap: 10px 20px; list-style: none; padding: 0; }
.years a { font-weight: 900; font-size: 18px; text-decoration: none; }
.years a.active, .years a:hover { text-decoration: underline; }

/* ---- Plein Chant & jury ---- */
.pc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; margin: 20px 0; padding: 20px; background: #1bb89b; color: #fff; }
.pc-head img { width: 200px; }
.pc-head h1 { margin: 0; }
.plein-chant details, .jury-group details { margin: 20px 0; }
.plein-chant summary, .jury-group summary { cursor: pointer; font-weight: 900; }
.plein-chant form { margin-top: 30px; padding-top: 20px; border-top: 4px dotted #000; }
.plein-chant .form-input, .plein-chant input[type=text], .plein-chant input[type=email], .plein-chant input[type=tel], .plein-chant textarea { width: 100%; padding: 8px; font: inherit; border: 1px solid #aaa; }
.plein-chant .form-field { margin-bottom: 15px; }
.plein-chant button[type=submit] { min-height: 40px; padding: 0 22px; border: 0; background: var(--c3); color: #fff; font: 900 14px 'Raleway', sans-serif; text-transform: uppercase; cursor: pointer; }
.jury-group { margin: 40px 0; padding-top: 10px; border-top: 4px dotted #000; }
.jury-group figure { margin: 10px 0; }
.jury-group audio { width: 100%; }
.inline-icon { width: 20px; }

/* ---- Desktop: fixed left sidebar ---- */
@media (min-width: 730px) {
    body { display: grid; grid-template-columns: 300px 1fr; gap: 40px; }
    .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
    .partners { margin: auto 0 60px; }
    .sidebar nav { margin-bottom: 30px; }
    .social { position: fixed; top: 115px; right: 10px; }
    main { padding: 0 60px 40px 0; max-width: 900px; }
}
@media (min-width: 1140px) {
    body { grid-template-columns: 300px 1fr; margin-left: 60px; gap: 60px; }
    /* Both artists share the rows name / image / text, so images line up whatever the name length */
    .show.double .artists { grid-template-columns: 1fr 1fr; row-gap: 0; }
    .show.double .artist { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
    .show.double .artist .name { grid-row: 1; }
    .show.double .artist :is(img, picture) { grid-row: 2; }
    .show.double .artist .text { grid-row: 3; }
}
@media (min-width: 1400px) {
    body { gap: 100px; }
}
.embed { display: block; width: 100%; border: 0; }
.embed.map { height: 450px; max-width: 600px; }
.embed.drive { height: max(600px, 85vh); }
body.tpl-pro main { max-width: none; }
.newsletter { max-width: 540px; margin-top: 30px; padding-top: 20px; border-top: 4px dotted #000; }
.newsletter label { display: block; margin-bottom: 10px; }
.newsletter-row { display: flex; flex-wrap: wrap; gap: 10px; }
.newsletter input[type=email] { flex: 1 1 260px; padding: 10px; font: inherit; border: 1px solid #aaa; }
.newsletter .button { margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }