/* HarderstyleMap v2 on the v1 stylesheets.
   static/v1/style.css, style_typo.css, style_leaflet*.css and images/ are copies of the v1, left
   as they are. This file is what the v2 needs on top of them: the v1 elements that became real
   buttons, the v1 markup with v2 headings (h2/h3 instead of the many v1 h1), the rows of the v1
   home that each live in their own table, and the v2 additions (menu links, language, bell, consent
   bar, hooks) drawn in the v1 language. Colors, fonts and sizes are the v1 ones.
   btn-*.png are cut out of the v1 PNG buttons (end-cap and icons, as masks). */

/* Header and menu ------------------------------------------------------------------------- */
#menuIcon { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; line-height: 0; }
#menuIcon:focus-visible, #menu-open:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; }
#menu { z-index: 2000; overflow-y: auto; } /* above the Leaflet controls and popups (v1: hidden by JS) */
#menu-open { display: block; width: 100%; text-align: right; background: none; border: 0; padding: 0; cursor: pointer; }
.hsm-inline-form { display: inline; margin: 0; }
.hsm-inline-form button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.header_nav_bell { padding-left: 20px; }
.hsm-bell { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; vertical-align: middle; }
.hsm-bell__icon { width: 20px; height: auto; }
.hsm-bell__count { background-color: red; color: white; padding: 6px 9px 4px 7px; border-radius: 15px; }
/* What the v2 adds to the v1 menu: small links under JOIN THE MELODY. */
.menu-liens-more { padding: 10px 120px 60px 80px; font-family: "roc-grotesk", sans-serif; font-weight: 500; font-size: 12px;
  letter-spacing: 3px; line-height: 20px; text-transform: uppercase; color: #BBBBBB; }
.menu-liens-more ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 30px; }
.menu-liens-more a:hover, .menu-liens-more button:hover { color: #FFFFFF; }
.menu-liens-lang { display: flex; gap: 10px; align-items: center; margin: 0; }
.menu-liens-lang button { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; text-transform: uppercase; }
.menu-liens-lang button[aria-current] { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1024px) { .menu-liens-more { padding: 10px 20px 40px; font-size: 12px; } }
/* The new pages are laid out for initial-scale=1: on a phone the v1 header must fit 390px. */
@media (max-width: 600px) {
  .hsm-v2 nav.header-nav { padding-left: 5%; padding-right: 5%; }
  .hsm-v2 .header_nav_login { font-size: 13px; text-align: center; }
  .hsm-v2 .logo { height: 18px; }
  .hsm-v2 .menu-icone { height: 26px; }
  .hsm-v2 header { height: 72px; }
  .hsm-v2 nav.header-nav { padding-top: 22px; }
  .hsm-v2 #menu { width: 100%; }
  .hsm-v2 .menu-liens-texte { font-size: 18px; }
  .hsm-v2 .footer-links-slogan-mobile, .hsm-v2 .menu-liens-footer-links-slogan-mobile { font-size: 20px; }
}

/* Footer: the v1 adds the Cookies link next to the two others. */
.footer-informations-link a:hover { color: #EEEEEE; }

/* v1 headings written as h2 (the v1 uses h1 everywhere) ------------------------------------- */
.search-for-event h2, .coming-events-head h2, .coming-events-head-list-event-page h2 {
  margin: 0; font-size: 18px; letter-spacing: 5px; font-weight: normal;
}
.search-for-event h2 { width: 1500px; }
.coming-events-head h2, .coming-events-head-list-event-page h2 { width: 250px; flex: none; }
.hsm-v1-heading { text-transform: uppercase; }
.hsm-v1-heading strong { font-family: "roc-grotesk", sans-serif; font-weight: 700; }
.coming-events-head-results { text-transform: capitalize; }
.hsm-v1-head-home { padding-left: 10%; } /* v1: style="padding-left: 10%" */
.site-intro h1 { margin-top: 21px; }

/* Search form: what the v1 put in attributes or jQuery UI ------------------------------------ */
.form-filter form, .form-filter-mobile form { margin: 0; }
.td-style-label label { cursor: pointer; }
.hsm-v1-form-error { font-family: "roc-grotesk", sans-serif; font-weight: 500; font-size: 14px; color: #DB5143; padding-top: 6px; }
.suggest-new-event .hsm-v1-clear { margin-left: 20px; text-decoration: underline; text-underline-offset: 3px; }
.case-city-search .hsm-suggest, .case-city-search-mobile .hsm-suggest { display: block; }
#map { position: relative; z-index: 0; }

/* Event rows: the v1 rows of the home, one table per row ------------------------------------- */
.hsm-event-row { font: 400 30px/normal serif; letter-spacing: normal; color: #EEEEEE; text-align: left; }
.hsm-event-row, .hsm-event-row * { box-sizing: content-box; }
.hsm-event-row img { max-width: none; display: inline; }
.hsm-event-row .coming-events-icon-survol img { display: none; }
.hsm-event-row .coming-events-tr-event:hover .coming-events-icon-survol img { display: block; }
.hsm-event-row .coming-events-date { text-align: center; } /* v1: style attribute */
.hsm-v1-poster-box { display: inline-block; width: 250px; } /* every row gets the v1 column of the posters */
.hsm-event-row img.hsm-v1-poster, img.hsm-v1-poster { max-width: 250px; max-height: 200px; transform: rotate(-7deg); }
.hsm-event-row .coming-events-date-mobile img.hsm-v1-poster { max-width: 250px; }
.hsm-v1-arrow { width: 40px; } /* v1: style="width:40px" */
.coming-events-titre-event h3 { margin: 20px 0 10px 0; font-family: "roc-grotesk-wide", sans-serif; font-weight: 600; font-style: normal; font-size: 50px; letter-spacing: 3px; }
.coming-events-titre-event-mobile h3 { font-family: "roc-grotesk-wide", sans-serif; font-weight: 600; font-style: normal; font-size: 30px; letter-spacing: 3px; margin: 20px 0 15px 0; }
.hsm-event-row .hsm-sponsored, .hsm-event-row .hsm-sponsored-mobile { display: inline-block; margin-bottom: 8px; color: #BBBBBB; font-family: "roc-grotesk", sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 3px; }
.coming-events.hsm-rows { margin-top: 0; }
.hsm-v1-empty { margin: 0; padding: 30px 10%; font-family: "roc-grotesk", sans-serif; font-weight: 500; font-size: 16px; letter-spacing: 1px; color: #BBBBBB; border-bottom: 1px solid #282828; }
.hsm-v1-more { padding: 40px 10% 0; }
@media (max-width: 1024px) { .hsm-v1-empty { padding: 24px 4%; } .hsm-v1-more { padding: 30px 4% 0; } }

/* Event, artist, location and organisation pages ------------------------------------------------ */
.titre_page_and_follow h1 { margin: 20px 0 0; }
.hsm-v1-follow { text-align: center; }
.hsm-v1-follow .hsm-follow-form { display: inline; margin: 0; }
.hsm-v1-follow .text-follow, .hsm-v1-follow .hsm-follow-form .text-follow, .hsm-v1-follow .hsm-follow-wrap .text-follow { display: block; width: auto; max-width: none; margin: 8px 0 0; }
.hsm-v1-claim { margin-top: 20px; }
.event-main-informations-content-location a.hsm-v1-btn, .artist-main-informations-content a.hsm-v1-btn, .location-main-informations-content a.hsm-v1-btn,
.hsm-v1-btn { box-sizing: border-box; display: inline-flex; text-decoration: none; background-repeat: no-repeat; background-color: transparent; }
.hsm-v1-status { display: inline-block; margin: 10px 0 0; padding: 6px 5px 5px; border: 1px solid #EEEEEE; border-top-right-radius: 3px;
  font-family: "roc-grotesk-wide", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 3px; }
.hsm-v1-verified { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: "roc-grotesk", sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #CDFE0E; }
.hsm-v1-verified svg { width: 14px; height: 14px; }
.hsm-v1-manage { font-family: "roc-grotesk", sans-serif; font-weight: 500; font-size: 14px; color: #BFBFBF; }
.hsm-v1-flag { display: block; width: 50px; height: auto; margin: 4px 0; }
/* The line-up: the v1 grid of artist photos, five per line. */
.event-main-informations-line-up { height: auto; min-height: 0; padding-bottom: 60px; }
.artist-main-informations-line-up, .location-main-informations-line-up { height: auto; margin-top: 0; padding-bottom: 60px; }
.event-main-informations-line-up-table-line td { padding-top: 30px; }
.event-main-informations-line-up-table-line a { display: inline-block; }
.event-main-informations-line-up-table-line img { display: inline-block; }
.hsm-v1-lineup-extra { display: block; font-size: 12px; color: #BFBFBF; letter-spacing: 2px; margin-top: 4px; }
.div-event-map { padding-right: 10%; }
.event-main-informations-line-up #event-map { margin-top: 50px; }
.artist-main-informations-line-up #event-map, .location-main-informations-line-up #event-map { margin-top: 30px; }
/* v2 blocks placed in the v1 pages (attendance, rides, report, claim, ads): the v1 fonts and spacing. */
.hsm-hook { font-family: "roc-grotesk", sans-serif; }
.hsm-v1-extras { padding: 40px 10% 0; }
.hsm-v1-extras > * + * { margin-top: 40px; }
.hsm-v1-aside { padding-top: 30px; text-align: left; }
.hsm-v1-aside .hsm-jr-attend { max-width: 360px; margin-left: auto; }
@media (max-width: 1024px) { .hsm-v1-extras { padding: 30px 5% 0; } .hsm-v1-aside .hsm-jr-attend { margin-left: 0; } }

/* v1 pages of text and forms (login, sign up, contact, privacy, terms, account) ------------------ */
.hsm-v1-text { padding: 0 5% 80px; font-family: "roc-grotesk", sans-serif; font-weight: 500; font-size: 22px; letter-spacing: 1px; line-height: 34px; }
.hsm-v1-text h1, .hsm-v1-text h2 { font-family: "roc-grotesk", sans-serif; font-weight: 600; letter-spacing: 3px; }
.hsm-v1-text h3 { font-family: "roc-grotesk", sans-serif; font-weight: 600; font-size: 22px; letter-spacing: 2px; margin: 30px 0 10px; }
.hsm-v1-text a { text-decoration: underline; text-underline-offset: 3px; }
.hsm-v1-text p, .hsm-v1-text li { max-width: 1100px; }

/* Consent: the v1 cookie bar (cookieconsent, theme "classic": black bar, #991a1a buttons) -------- */
.hsm-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1900; display: flex; align-items: center; gap: 1em;
  padding: 1em 1.8em; background: #000000; color: #FFFFFF; font-family: Helvetica, Calibri, Arial, sans-serif; font-size: 16px; line-height: 1.5em; }
.hsm-consent__text { flex: 1; margin: 0; max-width: none; }
.hsm-consent__link { display: inline-block; padding: .2em; opacity: .8; text-decoration: underline; }
.hsm-consent__link:hover { opacity: 1; }
.hsm-consent__actions { display: flex; gap: .6em; }
.hsm-consent__actions form { margin: 0; }
.hsm-consent__btn { display: block; min-width: 140px; padding: .4em .8em; border: 2px solid transparent; border-radius: 5px; background: #991a1a;
  color: #FFFFFF; font: 700 .9em/1.5em Helvetica, Calibri, Arial, sans-serif; text-align: center; white-space: nowrap; cursor: pointer; }
.hsm-consent__btn:hover { background: #b81f1f; }
@media (max-width: 700px) {
  .hsm-consent { flex-direction: column; align-items: stretch; padding: 1em; font-size: 14px; }
  .hsm-consent__actions { justify-content: stretch; } .hsm-consent__actions form { flex: 1; } .hsm-consent__btn { width: 100%; min-width: 0; }
}

/* v1 page titles written as h2 (INFORMATIONS, ARTIST, LOCATION, ORGANISATION, LINE UP...) */
.event-main-informations-title h2, .artist-main-informations-title h2, .location-main-informations-title h2, .account-main-informations-title h2 {
  font-family: "roc-grotesk", sans-serif; font-weight: 600; font-style: normal; margin: 0; width: 300px; flex: none; font-size: 18px; letter-spacing: 5px;
}
.account-main-informations-title h2 { width: 500px; }
.event-coming-events-head h2, .artist-coming-events-head h2, .location-coming-events-head h2 { margin: 0; width: 250px; flex: none; font-size: 18px; letter-spacing: 5px; font-weight: normal; }
.event-coming-events-head-results, .artist-coming-events-head-results, .location-coming-events-head-results { color: #FFFFFF; }
.hsm-v1-wide { width: 100%; }
.hsm-v1-bottom { vertical-align: bottom; }
.hsm-v1-top { vertical-align: top; }
.hsm-v1-locbtn { margin-top: 20px; margin-left: 27px; }
.hsm-v1-after { padding: 0 10%; }
.event-main-informations-content-mobile .event-main-informations-content-name { margin: 20px 0 10px; }
.hsm-v1-cell { font-size: 16px; vertical-align: top; padding-right: 30px; }
.hsm-v1-quarter { width: 25%; }
.hsm-v1-flag { display: block; font-size: 38px; line-height: 44px; }
.hsm-v1-inline { display: inline; margin: 0; }
.hsm-v1-sitebtn { margin-top: 10px; }
.hsm-v1-left { text-align: left; }
.hsm-v1-follow--left { display: inline-block; text-align: left; }
.hsm-v1-description { max-width: 700px; margin: 20px 0 0; font-family: "roc-grotesk", sans-serif; font-weight: 500; font-size: 14px; line-height: 25px; letter-spacing: 2px; color: #BFBFBF; }
.titre_page_and_follow .hsm-v1-follow { padding-right: 95px; }
/* v1: ".titre_page_and_follow a" styles the link around the v1 <button>; here the link is the button. */
.titre_page_and_follow a.hsm-btn { font: 700 16px/1.2 "roc-grotesk", sans-serif; letter-spacing: 2px; color: #FFFFFF; padding: 6px 64px 6px 20px; margin: 0; }
.coming-events-head-list-event-page .coming-events-head-results, .coming-events-head .coming-events-head-results { flex: 1 1 auto; }
.hsm-v1-maplink { flex: none; margin-right: 10%; font-family: "roc-grotesk", sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #BBBBBB; white-space: nowrap; }
.hsm-v1-maplink:hover { color: #FFFFFF; }
.hsm-v1-pager { padding: 0 10%; }
.hsm-v1-pager .hsm-pager { margin-top: 40px; }
.hsm-v1-inline-ad { padding: 20px 10%; border-bottom: 1px solid #282828; }
.hsm-v1-inline-ad:empty { display: none; }
.hsm-v1-intro { margin: 20px 0 0; font-family: "roc-grotesk", sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 5px; color: #BBBBBB; text-transform: capitalize; }
.coming-events-head h2.hsm-v1-heading--day { width: auto; margin-right: 40px; }
/* The v1 writes these in capitals in its templates (|upper): here CSS does it, the text stays as it is. */
.hsm-event-row .hsm-row__title, .hsm-event-row .coming-events-location-country, .hsm-event-row .coming-events-location-city,
.hsm-event-row .coming-events-location-place, .hsm-event-row .coming-events-location-country-mobile,
.hsm-event-row .coming-events-location-city-mobile, .hsm-event-row .coming-events-location-place-mobile,
.event-main-informations-content-name, .artist-main-informations-content-name,
.event-main-informations-content-country, .event-main-informations-content-city { text-transform: uppercase; }

/* allauth pages: the v1 login and register pages (#update_on_dj_div, .create_account) ----------- */
.hsm-v1-auth #content:has(> .hsm-acc-auth), .hsm-v1-auth #content:has(> .hsm-acc-head) { width: auto; margin: 0; padding: 0 5% 80px; }
.hsm-v1-auth main { font: 500 22px/40px "roc-grotesk", sans-serif; letter-spacing: 3px; }
.hsm-v1-auth .hsm-acc-head { margin-top: 20px; }
.hsm-v1-auth .hsm-v1-auth-title { margin: 20px 0 10px; font: 600 33px/1.2 "roc-grotesk", sans-serif; letter-spacing: 3px; text-transform: none; }
.hsm-v1-auth .hsm-field > .hsm-overline, .hsm-v1-auth .hsm-acc-field .hsm-overline { font: 500 22px/40px "roc-grotesk", sans-serif; letter-spacing: 3px; text-transform: none; color: #EEEEEE; }
.hsm-v1-auth .hsm-field { gap: 0; }
.hsm-v1-auth .hsm-field input:not([type=checkbox]):not([type=radio]), .hsm-v1-auth .hsm-field select, .hsm-v1-auth .hsm-field textarea {
  min-height: 0; padding: 12px 15px 12px 10px; border-radius: 0; font: 500 16px/1.25 "roc-grotesk", sans-serif; letter-spacing: normal; }
.hsm-v1-auth .hsm-acc-narrow { max-width: none; }
.hsm-v1-auth .hsm-acc-narrow > .hsm-acc-actions { width: auto; max-width: none; }
.hsm-v1-auth .hsm-acc-entrance { display: block; }
.hsm-v1-auth .hsm-acc-entrance__side { padding: 30px 0 0; border: 0; max-width: 1100px; }
.hsm-v1-auth .hsm-acc-entrance__side h2 { font: 700 33px/1.2 "roc-grotesk", sans-serif; letter-spacing: 3px; text-transform: none; margin: 20px 0; color: #EEEEEE; }
.hsm-v1-auth .hsm-acc-entrance__side p { font: inherit; color: inherit; margin: 0 0 20px; }
/* The v1 form button: grey, 187 x 45, not in capitals. */
.hsm-v1-auth main .hsm-btn, .hsm-v1-submit { min-width: 187px; min-height: 45px; padding: 4px 20px; background: #555555; border-radius: 3px;
  font: 500 16px/1.2 "roc-grotesk", sans-serif; letter-spacing: normal; text-transform: none; color: #FFFFFF; }
.hsm-v1-auth main .hsm-btn::after, .hsm-v1-auth main .hsm-btn .hsm-btn__icon { display: none; }
.hsm-v1-auth main .hsm-btn--dark { background: #555555; }
.hsm-v1-auth .hsm-acc-linkbtn, .hsm-v1-auth main a:not(.hsm-btn) { text-decoration: underline; text-underline-offset: 4px; }
.hsm-v1-auth .hsm-acc-help, .hsm-v1-auth .hsm-acc-p { font-size: 16px; line-height: 26px; letter-spacing: 1px; }
/* Sign up: the v1 register page (.create_account: centered, label and field on one line). */
.hsm-v1-register main { font: 600 26px/35px "roc-grotesk", sans-serif; letter-spacing: normal; text-align: center; }
.hsm-v1-register .hsm-acc-head, .hsm-v1-register .hsm-acc-entrance__main { display: block; }
.hsm-v1-register .hsm-acc-form { display: inline-block; text-align: left; }
.hsm-v1-register .hsm-field { display: grid; grid-template-columns: 300px 420px; align-items: center; column-gap: 12px; }
.hsm-v1-register .hsm-field > .hsm-overline { font: 600 26px/35px "roc-grotesk", sans-serif; letter-spacing: normal; }
.hsm-v1-register .hsm-field input:not([type=checkbox]):not([type=radio]) { padding: 10px; }
.hsm-v1-register .hsm-acc-help { margin-left: 312px; text-align: left; }
.hsm-v1-register .hsm-acc-entrance__side { text-align: center; margin: 0 auto; }
.hsm-v1-register .hsm-v1-auth-title { font: 700 39px/1.2 "roc-grotesk", sans-serif; letter-spacing: normal; }
.hsm-v1-register .hsm-acc-p { max-width: 732px; margin-left: auto; margin-right: auto; text-align: left; }
@media (max-width: 900px) {
  .hsm-v1-register .hsm-field { grid-template-columns: minmax(0, 1fr); }
  .hsm-v1-register .hsm-acc-help { margin-left: 0; }
  .hsm-v1-register .hsm-acc-form { display: block; }
}

/* Contact: the v1 .contact page (26px text, label: field table, centered) ------------------------ */
.hsm-v1-contact { max-width: 1100px; margin: 40px auto 0; padding-bottom: 60px; text-align: center; }
.hsm-v1-contact p { margin: 0 0 30px; }
.hsm-v1-contact a { text-decoration: underline; text-underline-offset: 4px; }
.hsm-v1-contact form { display: inline-block; text-align: left; }
.hsm-v1-contact table { border-spacing: 10px 14px; }
.hsm-v1-contact__label { text-align: right; vertical-align: middle; white-space: nowrap; }
.hsm-v1-contact td.hsm-field { display: table-cell; width: 600px; }
.hsm-v1-contact textarea { min-height: 220px; resize: vertical; }
.hsm-v1-contact__note { font-size: 16px; line-height: 24px; color: #BFBFBF; max-width: 760px; }
.hsm-v1-contact .hsm-field__error { display: block; margin-top: 6px; color: #DB5143; font-size: 16px; }
.account-main-informations-title { box-sizing: content-box; }
.hsm-v1-submit { border: 0; cursor: pointer; display: inline-flex; align-items: center; text-align: left; }
@media (max-width: 900px) { .hsm-v1-contact td.hsm-field { width: auto; } .hsm-v1-contact table, .hsm-v1-contact tbody, .hsm-v1-contact tr, .hsm-v1-contact td { display: block; } .hsm-v1-contact__label { text-align: left; } }
.hsm-v1-contact__label.hsm-v1-top { vertical-align: top; padding-top: 8px; }

/* Fixed pages (privacy, terms, about): the v1 heading, then the text in the v1 fonts. */
.hsm-v1-textpage { padding-top: 10px; }
.hsm-v1-textpage .hsm-prose { max-width: 1100px; font: 500 18px/26px "roc-grotesk", sans-serif; letter-spacing: 2px; }
.hsm-v1-textpage .hsm-prose h2 { font: 600 26px/1.3 "roc-grotesk", sans-serif; letter-spacing: 3px; text-transform: none; }
.hsm-v1-textpage .hsm-prose h3 { font: 600 20px/1.3 "roc-grotesk", sans-serif; letter-spacing: 3px; text-transform: none; }
.hsm-v1-textpage .hsm-toc a { font-size: 16px; letter-spacing: 1px; }
.hsm-v1-report { padding-top: 40px; }
.hsm-v1-aside .hsm-jr-attend { text-align: left; }