/* HarderstyleMap components, drawn in the v1 language (static/v1/style.css is the reference:
   Roc Grotesk, #161515 background, flat #2B2B2B fields, PNG-like buttons, the v1 headings).
   Nothing here touches the v1 elements: the base below only applies to the new pages
   (<body class="hsm-v2">) and to the v2 blocks placed in v1 pages (.hsm-hook). Every base rule
   is wrapped in :where() so that any class rule, v1 or v2, wins over it. */

/* Base of the new pages ------------------------------------------------------------------ */
:where(.hsm-v2 main, .hsm-hook) {
  font: 500 16px/1.5 var(--hsm-font); letter-spacing: 1px; color: var(--hsm-text);
  -webkit-font-smoothing: antialiased;
}
:where(.hsm-v2 main, .hsm-hook) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(.hsm-v2 main, .hsm-hook) :where(img) { max-width: 100%; display: block; }
:where(.hsm-v2 main, .hsm-hook) :where(h1, h2, h3, h4, legend) { font-family: var(--hsm-font); }
:where(.hsm-v2 main, .hsm-hook) :where(input, select, textarea, button) { font-family: var(--hsm-font); }
/* The v1 rules header { black, 87px }, nav { padding } and footer { #101010 } are for the site
   header, menu and footer only. */
main header, main footer, .hsm-hook header { background: none; height: auto; font: inherit; }
main nav, .hsm-hook nav { padding: 0; }
/* A v1 block inside a new page (event rows): back to the v1 body (30px, default font). */
.hsm-v1ctx { font: 400 30px/normal serif; letter-spacing: normal; color: #EEEEEE; }
.hsm-v1ctx, .hsm-v1ctx * { box-sizing: content-box; }
.hsm-v1ctx img { display: inline; max-width: none; }
:focus-visible { outline: 2px solid var(--hsm-white); outline-offset: 3px; }
.hsm-skip { position: absolute; left: -9999px; }
.hsm-skip:focus { left: 16px; top: 16px; z-index: 3000; background: var(--hsm-white); color: var(--hsm-ink); padding: 8px 12px; font: 600 14px var(--hsm-font); }

/* Layout: the v1 .haut-du-site (10% margins, 5% under 1024px) ---------------------------- */
.hsm-page { position: relative; padding: 24px 10% 96px; }
.hsm-block { margin-top: 64px; }
/* Full-width blocks inside a page (rows, bands), content kept aligned on the page margins. */
.hsm-bleed { margin-left: -12.5%; margin-right: -12.5%; padding-left: 12.5%; padding-right: 12.5%; }
@media (max-width: 1024px) {
  .hsm-page { padding: 10px 5% 64px; }
  .hsm-bleed { margin-left: -5.5556%; margin-right: -5.5556%; padding-left: 5.5556%; padding-right: 5.5556%; }
}

/* Messages, under the header ---------------------------------------------------------------- */
.hsm-messages { margin: 24px 10% 0; display: grid; gap: 8px; }
.hsm-message { margin: 0; padding: 14px 18px; background: #2B2B2B; color: #EEEEEE; border-left: 4px solid #FF5A61;
  font: 500 16px/1.4 var(--hsm-font); letter-spacing: 1px; }
.hsm-message--success { border-left-color: #CDFE0E; }
.hsm-message--warning { border-left-color: #FFA700; }
.hsm-message--error { border-left-color: #D84132; }

/* Type: the v1 sizes ------------------------------------------------------------------------ */
.hsm-h1 { margin: 20px 0 10px; font: 600 50px/1.15 var(--hsm-font-wide); letter-spacing: 3px; text-transform: uppercase; color: #EEEEEE; }
.hsm-date { margin: 0; font: 600 40px/1.15 var(--hsm-font-wide); letter-spacing: 3px; text-transform: uppercase; color: #EEEEEE; }
.hsm-city { margin: 0; font: 600 40px/1.15 var(--hsm-font-wide); letter-spacing: 3px; text-transform: uppercase; color: #EEEEEE; }
.hsm-city a { text-decoration: none; }
.hsm-place { font: 300 40px/1.15 var(--hsm-font); letter-spacing: 3px; display: inline-flex; gap: 10px; align-items: center; }
.hsm-overline { font: 500 12px/1.4 var(--hsm-font); letter-spacing: 3px; text-transform: uppercase; }
.hsm-muted { color: #BFBFBF; font-size: 14px; }
.hsm-link { font: 500 14px/1.4 var(--hsm-font); letter-spacing: 1px; color: #BFBFBF; text-decoration: none; }
.hsm-link:hover { color: #FFFFFF; }
@media (max-width: 1024px) {
  .hsm-h1 { font-size: 30px; } .hsm-date, .hsm-city, .hsm-place { font-size: 30px; }
}

/* Section label: the v1 headings (pictogram, spaced capitals in two weights, a rule) --------- */
.hsm-label {
  display: flex; align-items: center; margin: 0;
  font: 500 18px/1.25 var(--hsm-font); letter-spacing: 5px; text-transform: uppercase; color: #EEEEEE;
}
.hsm-label strong, .hsm-label .Roc-Grotesk-ExtraBold { font-weight: 700; }
.hsm-label > span { flex: 0 1 auto; max-width: 60%; }
.hsm-label::after { content: ""; flex: 1 1 0; min-width: 40px; height: 1px; background: #282828; margin-left: 30px; }
.hsm-label--bare::after { display: none; }
.hsm-atom { width: 51px; height: 50px; flex: none; margin-right: 15px; display: block; }
@media (max-width: 1024px) { .hsm-label > span { max-width: none; } }

/* Style tag: the v1 .logo-genre (outline, top-right corner rounded) ------------------------- */
.hsm-tag, .logo-genre[style] {
  display: inline-block; height: auto; padding: 6px 5px 5px; border: 1px solid currentColor; border-top-right-radius: 3px;
  color: var(--style, #EEEEEE); font: 600 11px/1 var(--hsm-font-wide); letter-spacing: 3px;
  text-transform: uppercase; text-decoration: none;
}
.hsm-tag--link:hover { background: color-mix(in srgb, var(--style) 12%, transparent); }

/* Button: the v1 PNG buttons (static/v1/images/go-on-*.png, tickets.png...) in CSS, with real
   text. Body color + the v1 end-cap and icon (masks cut out of the v1 PNGs). ---------------- */
.hsm-btn {
  --body: var(--hsm-coral); --cap: var(--hsm-hardtek);
  position: relative; display: inline-flex; align-items: center; box-sizing: border-box;
  min-width: 238px; min-height: 60px; padding: 6px 64px 6px 20px; border: 0; border-radius: 3px;
  background: var(--body); color: #FFFFFF; overflow: hidden; isolation: isolate;
  font: 500 16px/1.2 var(--hsm-font); letter-spacing: 2px; text-transform: uppercase; text-align: left;
  text-decoration: none; cursor: pointer; vertical-align: middle;
}
.hsm-btn::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 67px; z-index: -1; background: var(--cap);
  -webkit-mask: url("../v1/images/btn-cap.d2bf07217c58.png") right top / 67px 100% no-repeat;
  mask: url("../v1/images/btn-cap.d2bf07217c58.png") right top / 67px 100% no-repeat;
}
.hsm-btn__icon {
  position: absolute; top: 50%; right: 0; width: 67px; height: 60px; margin-top: -30px; background: #FFFFFF;
  -webkit-mask: url("../v1/images/btn-icon-more.4f5417abf609.png") right top / 67px 60px no-repeat;
  mask: url("../v1/images/btn-icon-more.4f5417abf609.png") right top / 67px 60px no-repeat;
}
.hsm-btn__icon--external { -webkit-mask-image: url("../v1/images/btn-icon-external.0c342f1ad1d3.png"); mask-image: url("../v1/images/btn-icon-external.0c342f1ad1d3.png"); }
.hsm-btn__icon--follow { -webkit-mask-image: url("../v1/images/btn-icon-follow.b8046aa4fd8f.png"); mask-image: url("../v1/images/btn-icon-follow.b8046aa4fd8f.png"); }
.hsm-btn__icon--close { -webkit-mask-image: url("../v1/images/btn-icon-close.4fa3d129a84f.png"); mask-image: url("../v1/images/btn-icon-close.4fa3d129a84f.png"); }
.hsm-btn__icon--search { -webkit-mask-image: url("../v1/images/btn-icon-search.d4b6ac9fb2b7.png"); mask-image: url("../v1/images/btn-icon-search.d4b6ac9fb2b7.png"); width: 61px; height: 45px; margin-top: -22.5px; -webkit-mask-size: 61px 45px; mask-size: 61px 45px; }
svg.hsm-btn__icon { background: none; -webkit-mask: none; mask: none; width: 16px; height: 16px; right: 14px; margin-top: -8px; color: #FFFFFF; }
.hsm-btn--dark { color: #FFFFFF; }
.hsm-btn:hover { filter: brightness(1.05); }
.hsm-btn:disabled, .hsm-btn[aria-disabled="true"] { opacity: .6; cursor: default; }
/* The v1 search button is smaller (187 x 45) and not in capitals. */
.hsm-btn--search { min-width: 187px; min-height: 45px; padding: 4px 70px 4px 20px; text-transform: none; letter-spacing: normal; }
.hsm-btn--search::after { width: 61px; -webkit-mask-image: url("../v1/images/btn-cap-45.ecfa0a81b828.png"); mask-image: url("../v1/images/btn-cap-45.ecfa0a81b828.png"); -webkit-mask-size: 61px 100%; mask-size: 61px 100%; }
/* The v1 "follow" buttons are 238px wide: their text goes on two lines. */
.hsm-btn--fixed { width: 238px; }

/* Form fields: the v1 fields (flat #2B2B2B, light grey text) -------------------------------- */
.hsm-search { display: grid; grid-template-columns: 1fr 1fr 120px; gap: 24px; max-width: 980px; margin-top: 32px; }
.hsm-search__full { grid-column: 1 / -1; }
.hsm-field { display: grid; gap: 8px; min-width: 0; }
.hsm-field > .hsm-overline, .hsm-field > span.hsm-overline { color: #EEEEEE; }
.hsm-field input:not([type=checkbox]):not([type=radio]), .hsm-field select, .hsm-field textarea,
.hsm-input {
  width: 100%; min-height: 45px; padding: 12px 15px; border: 0; border-radius: 2px;
  background: #2B2B2B; color: #BFBFBF; font: 500 16px/1.3 var(--hsm-font); letter-spacing: 1px;
}
.hsm-field ::placeholder { color: #BFBFBF; opacity: .8; }
.hsm-field select { padding-right: 8px; }
.hsm-checks { display: grid; grid-template-columns: repeat(3, max-content); gap: 10px 40px; font: 500 16px var(--hsm-font); color: #BFBFBF; }
.hsm-checks label { display: flex; gap: 12px; align-items: center; }
.hsm-checks input { width: 13px; height: 13px; margin: 0; }
@media (max-width: 800px) {
  .hsm-search { grid-template-columns: minmax(0, 1fr); }
  .hsm-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
}

/* Lists: the v1 "coming events" rows ---------------------------------------------------------
   Event rows are templates/components/event_row.html (v1 markup). Other rows (.hsm-row: the
   artist, location and organisation lists) take the same lines, sizes and right border. */
.hsm-rows { border-top: 1px solid #282828; margin-top: 25px; }
.hsm-page .hsm-rows, .hsm-page > .hsm-block .hsm-rows { margin-left: -12.5%; margin-right: -12.5%; }
.hsm-rows > .hsm-muted, .hsm-rows > p { padding: 30px 12.5% 30px; margin: 0; }
@media (max-width: 1024px) {
  .hsm-page .hsm-rows, .hsm-page > .hsm-block .hsm-rows { margin-left: -5.5556%; margin-right: -5.5556%; }
  .hsm-rows > .hsm-muted, .hsm-rows > p { padding: 24px 5.5556%; }
}
.hsm-rows > .hsm-bleed { margin-left: 0; margin-right: 0; }
.hsm-row {
  position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr) auto 10%; gap: 30px; align-items: start;
  padding: 30px 0 30px 3.5%; border-bottom: 1px solid #282828; text-decoration: none; color: #EEEEEE;
}
.hsm-rows .hsm-row.hsm-bleed { padding-left: 3.5%; padding-right: 0; }
.hsm-row::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 20px; background: var(--style, #282828); }
.hsm-row:hover { background: color-mix(in srgb, var(--style, transparent) 6%, transparent); }
.hsm-row__name--block { display: block; }
.hsm-row__poster { width: 200px; max-height: 200px; object-fit: contain; transform: rotate(-7deg); }
span.hsm-row__poster { display: block; }
.hsm-row__name { font: 600 40px/1.15 var(--hsm-font-wide); letter-spacing: 3px; text-transform: uppercase; color: #EEEEEE; margin: 10px 0 6px; }
.hsm-row__when { text-align: right; display: grid; justify-items: end; gap: 2px; padding-top: 25px; }
.hsm-row__rule { width: 110px; height: 1px; background: #EEEEEE; margin: 14px 0 8px; }
.hsm-row__arrow { width: 71px; color: #FFFFFF; align-self: center; justify-self: center; margin-right: 20px; }
@media (max-width: 900px) {
  .hsm-row { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 28px 36px 28px 4%; }
  .hsm-row__poster { width: 90px; }
  .hsm-row__name { font-size: 26px; }
  .hsm-row__when { grid-column: 1 / -1; text-align: left; justify-items: start; padding-top: 0; }
  .hsm-row__arrow { display: none; }
}

/* Band: the v1 orange band of "LINE UP" and "COMING EVENTS" --------------------------------- */
.hsm-band { margin-top: 50px; padding-top: 100px; padding-bottom: 25px; background: #FFA700; color: #EEEEEE; }
.hsm-band .hsm-label::after { display: none; }

/* The v1 side spike (survol_<style>.png) on the left edge of a page title -------------------- */
.hsm-accent { position: absolute; left: -10vw; width: 90px; height: 181px; transform: translateY(-40%); }
@media (max-width: 1024px) { .hsm-accent { display: none; } }

/* Charte page helpers ------------------------------------------------------------------------ */
.hsm-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0; border-top: 1px solid #282828; }
.hsm-swatch { padding: 16px 0 20px; border-bottom: 1px solid #282828; }
.hsm-swatch i { display: block; height: 56px; margin-bottom: 12px; background: var(--c); outline: 1px solid #282828; }
.hsm-swatch code { color: #BFBFBF; font-size: 12px; }
.hsm-markers { display: flex; gap: 28px; align-items: end; }
.hsm-markers img, .hsm-markers svg { width: 40px; height: 43px; }
.hsm-stack { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }

/* Status of an event (cancelled, postponed...) and verified pages ---------------------------- */
.hsm-status {
  display: inline-block; margin: 16px 0 0; padding: 6px 5px 5px; border: 1px solid #EEEEEE; border-top-right-radius: 3px;
  font: 600 13px var(--hsm-font-wide); letter-spacing: 3px; text-transform: uppercase; color: #EEEEEE;
}
.hsm-verified { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; font: 600 12px/1.4 var(--hsm-font);
  letter-spacing: 3px; text-transform: uppercase; color: #CDFE0E; }
.hsm-verified svg { width: 16px; height: 16px; }

/* Follow / Unfollow: the v1 follow.png and unfollow.png (bold text, their own end-cap colors) --- */
.hsm-follow { font-weight: 700; }
.hsm-follow::after { background: #FF9319; }
.hsm-follow--on::after { background: #F8A03C; }
.hsm-follow--on .hsm-btn__icon { background: #FAFF16; }
.hsm-follow-wrap, .hsm-follow-form { display: inline-block; margin: 0; vertical-align: top; }
.hsm-follow-wrap .text-follow, .hsm-follow-form .text-follow {
  display: block; width: auto; max-width: 420px; margin: 8px 0 0; font-family: "roc-grotesk", sans-serif; font-weight: 100;
  font-size: 12px; line-height: 12px; letter-spacing: normal; color: #FFFFFF;
}

/* The v1 link buttons, with their own end-cap colors (go-on-*.png, tickets.png) ------------------- */
.hsm-btn--site { --body: #FFA700; --cap: #E48BE9; }
.hsm-btn--tickets { --body: #FF5A61; --cap: #05DBDC; }
.hsm-btn--facebook { --body: #FFA700; --cap: #0707FE; font-size: 14px; }
.hsm-btn--instagram { --body: #FFA700; --cap: #FF5A61; font-size: 14px; }
.hsm-btn--soundcloud { --body: #FFA700; --cap: #DCFF3E; font-size: 14px; }
.hsm-btn--spotify { --body: #FFA700; --cap: #31EB03; font-size: 14px; }
.hsm-btn--tiktok { --body: #FFA700; --cap: #E2E700; font-size: 14px; }
.hsm-btn--twitter { --body: #FFA700; --cap: #05DBDC; font-size: 14px; }
.hsm-btn--youtube { --body: #FFA700; --cap: #D84132; font-size: 14px; }
.hsm-btn--website, .hsm-btn--beatport, .hsm-btn--partyflock { --body: #FFA700; --cap: #E48BE9; font-size: 14px; }