/*
 * By Night V220 — alignement desktop du menu supérieur et des filtres d'accueil.
 * Feuille volontairement séparée afin de contourner tout ancien cache CSS.
 */

@media (min-width:1024px) {
  :root {
    --home-filter-outer-space:clamp(10px,1vw,18px);
    --home-filter-center-space:clamp(170px,15vw,250px);
  }

  /* Espace réellement visible entre Agenda/Guide et Reportages/Actualités. */
  body:where(:not(.marrakech-phase1)) > [data-primary-actions].is-group-transition .primary-actions-dock-group {
    gap:clamp(26px,2.35vw,38px)!important;
  }

  /* Les filtres reprennent les trois zones du bandeau supérieur : gauche, logo, droite. */
  body:has(.home-screen-events) .home-events-filter-row,
  body:has(.home-screen-guide) .home-guide-filter-shell,
  body:has(.home-screen-editorial) .home-report-filter-shell,
  .home-news-filter-shell {
    left:0!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    padding-left:var(--home-filter-outer-space)!important;
    padding-right:var(--home-filter-outer-space)!important;
    transform:none!important;
    grid-template-columns:minmax(0,1fr) var(--home-filter-center-space) minmax(0,1fr)!important;
    column-gap:0!important;
  }

  body:has(.home-screen-events) .home-events-filter-row > :first-child,
  body:has(.home-screen-guide) .home-guide-filter-shell > :first-child,
  body:has(.home-screen-editorial) .home-report-filter-shell > :first-child,
  .home-news-filter-shell > :first-child {
    grid-column:1!important;
    justify-self:center!important;
  }

  body:has(.home-screen-events) .home-events-filter-row > :last-child,
  body:has(.home-screen-guide) .home-guide-filter-shell > :last-child,
  body:has(.home-screen-editorial) .home-report-filter-shell > :last-child,
  .home-news-filter-shell > :last-child {
    grid-column:3!important;
    justify-self:center!important;
  }

  body:has(.home-screen-events) .home-events-filter-group,
  body:has(.home-screen-editorial) .home-report-filter-group,
  .home-news-filter-group,
  body:has(.home-screen-guide) .home-guide-filter-areas {
    width:max-content!important;
    max-width:100%!important;
    justify-content:center!important;
    text-align:center!important;
  }

  /* Le séparateur suit précisément l'axe du logo et non le bord d'un filtre. */
  body:has(.home-screen-events) .home-events-filter-row::after,
  body:has(.home-screen-guide) .home-guide-filter-shell::after,
  body:has(.home-screen-editorial) .home-report-filter-shell::after,
  .home-news-filter-shell::after {
    left:50%!important;
  }

  /* Deux lignes strictement identiques en largeur dans le filtre Guide. */
  body:has(.home-screen-guide) .home-guide-filter-types {
    width:100%!important;
    max-width:100%!important;
    justify-self:stretch!important;
  }

  body:has(.home-screen-guide) .home-guide-type-row {
    display:flex!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:clamp(3px,.45vw,7px)!important;
  }

  body:has(.home-screen-guide) .home-guide-type-row button {
    flex:0 0 auto!important;
  }

  body:has(.home-screen-guide) .home-guide-type-row .home-guide-option-switch {
    width:76px!important;
    min-width:76px!important;
    max-width:76px!important;
    flex:0 0 76px!important;
    justify-content:flex-end!important;
  }
}

/* Keep both guide switches at the right edge, even when categories are hidden. */
body:has(.home-screen-guide) .home-guide-type-row,
body:has(.home-screen-guide) .home-guide-type-row-alcohol.is-types-hidden {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) max-content!important;
  box-sizing:border-box!important;
  padding-right:10px!important;
  overflow:visible!important;
}
body:has(.home-screen-guide) .home-guide-type-options {
  display:flex;
  min-width:0;
  align-items:center;
  gap:inherit;
  overflow-x:auto;
  scrollbar-width:none;
}
body:has(.home-screen-guide) .home-guide-type-options::-webkit-scrollbar { display:none; }
body:has(.home-screen-guide) .home-guide-type-options button { flex:0 0 auto!important; }
body:has(.home-screen-guide) .home-guide-type-row .home-guide-option-switch {
  grid-column:2!important;
  justify-self:end!important;
}

/* On phones, show sectors before establishment types. */
@media (max-width:600px) {
  body:has(.home-screen-guide) .home-guide-filter-shell {
    grid-template-rows:31px 62px!important;
  }
  body:has(.home-screen-guide) .home-guide-filter-areas {
    grid-row:1!important;
    padding:0 2px 4px!important;
    border-top:0!important;
    border-bottom:1px solid rgba(255,255,255,.1)!important;
  }
  body:has(.home-screen-guide) .home-guide-filter-types {
    grid-row:2!important;
    padding-top:3px!important;
    padding-bottom:0!important;
  }
}

/* Fit the mobile feature and its date inside the visible opening screen. */
@media (max-width:600px) {
  body:has(.home-screen-hero) [data-home-section="hero"] .hero-content.hero-content-premium {
    box-sizing:border-box!important;
  }
  body:where(:not(.marrakech-phase1)):has(.home-screen-hero) [data-home-section="hero"] .hero-content.hero-content-premium {
    display:grid!important;
    grid-template-rows:minmax(0,1fr) 60px auto!important;
    gap:8px!important;
    padding-top:8px!important;
    padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
  }
  body:where(:not(.marrakech-phase1)):has(.home-screen-hero) [data-home-section="hero"] .hero-copy {
    min-height:0!important;
    height:100%!important;
    overflow:hidden;
  }
  body:where(:not(.marrakech-phase1)):has(.home-screen-hero) [data-home-section="hero"] .hero-main-title {
    height:100%!important;
    min-height:0!important;
    margin:0!important;
  }
  body:has(.home-screen-hero) [data-home-section="hero"] .hero-graffiti-mobile {
    height:100%!important;
    min-height:0!important;
    margin:0!important;
  }
  body:has(.home-screen-hero) [data-home-section="hero"] .hero-graffiti-mobile {
    max-height:240px!important;
    transform:none!important;
  }
  body:has(.home-screen-hero) [data-home-section="hero"] .hero-graffiti-mobile img {
    height:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
  }
  body:where(:not(.marrakech-phase1)):has(.home-screen-hero) [data-home-section="hero"] .hero-daily-feature {
    width:min(92%,calc(100svh - 260px))!important;
    margin-top:0!important;
    margin-bottom:0!important;
    gap:6px!important;
  }
  body:has(.home-screen-hero) [data-home-section="hero"] .hero-daily-feature > h2 {
    font-size:clamp(12px,3.5vw,15px)!important;
    letter-spacing:.015em!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  :where(body:not(.marrakech-phase1)) [data-home-section="hero"] [data-primary-actions]:not(.is-group-transition):not(.is-mobile-side-logo-transition):not(.is-mobile-refined-transition):not(.is-mobile-logo-dock) .button .home-action-icon {
    width:34px!important;
    height:34px!important;
  }
  body > [data-primary-actions].is-mobile-side-logo-transition .home-action-icon img,
  body > [data-primary-actions].is-mobile-logo-dock .home-action-icon img {
    scale:1.15;
  }
  html[lang="en"] body:has(.home-screen-hero) [data-home-section="hero"] .hero-daily-feature > h2 {
    font-size:clamp(10px,2.9vw,13px)!important;
  }

}

/* Phone navigation uses icons in both the hero and the top dock. */
@media (max-width:600px) {
  html body:where(:not(.marrakech-phase1)) [data-primary-actions] .button .home-action-label {
    display:none!important;
  }
}

/* Shared home filters use the approved Guide establishment button as reference. */
html body [data-home-section] {
  --home-filter-button-height: 23.2px;
  --home-filter-font-size: clamp(8.5px, .66vw, 10px);
  --home-filter-padding-inline: clamp(6px, .62vw, 10px);
}
html body [data-home-section] :is(.home-events-filter-group, .home-guide-filter-group) button {
  box-sizing: border-box;
  appearance: none;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  height: var(--home-filter-button-height) !important;
  min-height: var(--home-filter-button-height) !important;
  padding: 0 var(--home-filter-padding-inline) !important;
  margin-block: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  border-width: 1px;
  border-style: solid;
  border-radius: 999px;
  font-family: "DM Sans", Arial, sans-serif !important;
  font-size: var(--home-filter-font-size) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
html body [data-home-section] :is(.home-events-filter-group, .home-guide-filter-group) button[hidden] {
  display: none !important;
}
html body [data-home-section] :is(.home-events-filter-group, .home-guide-filter-group) button:not(.active) {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.72);
}
html body [data-home-section] :is(.home-events-filter-group, .home-guide-filter-group) button:hover {
  transform: translateY(-1px);
}
html body [data-home-section] :is(.home-events-filter-group, .home-guide-filter-group) button:not(.active):hover {
  border-color: rgba(232,200,120,.4);
  color: #fff;
}
/* Keep each city's existing selected-state accent and contrast. */

/* Halve vertical whitespace separately from the unchanged button height. */
html body [data-home-section="events"].home-screen-events {
  --home-date-row-height: 26.2px; /* 23.2 + (30 - 24) / 2 */
  --home-event-type-row-height: 26.2px;
  --events-filter-h: 34.2px !important;
}
html body [data-home-section="guide"].home-screen-guide {
  --home-guide-sector-row-height: 28.6px; /* 23.2 + (30 - 19.2) / 2 */
  --guide-filter-h: 62.2px !important;
}
html body [data-home-section="events"] .home-events-filter-row,
html body [data-home-section="guide"] .home-guide-filter-shell {
  padding-block: 3px !important;
  row-gap: 0 !important;
}
html body [data-home-section="events"] .home-events-filter-row {
  height: var(--events-filter-h) !important;
  min-height: var(--events-filter-h) !important;
  grid-template-rows: auto !important;
}
html body [data-home-section="guide"] .home-guide-filter-shell {
  height: var(--guide-filter-h) !important;
  min-height: var(--guide-filter-h) !important;
  grid-template-rows: 54.2px !important;
}
html body [data-home-section="events"] .home-events-filter-group--date {
  height: var(--home-date-row-height) !important;
  min-height: var(--home-date-row-height) !important;
}
html body [data-home-section="events"] .home-events-filter-group--venue {
  height: var(--home-event-type-row-height) !important;
  min-height: var(--home-event-type-row-height) !important;
}
html body [data-home-section="guide"] .home-guide-filter-areas {
  height: var(--home-guide-sector-row-height) !important;
  min-height: var(--home-guide-sector-row-height) !important;
}
html body [data-home-section="guide"] .home-guide-filter-types {
  height: 54.2px !important; /* 2 * 23.2 + (62 - 2 * 23.2) / 2 */
  min-height: 54.2px !important;
  grid-template-rows: repeat(2, 26.1px) !important;
  row-gap: 1px !important;
}
html body [data-home-section="guide"] .home-guide-type-row {
  height: 26.1px !important; /* 23.2 + (29 - 23.2) / 2 */
  grid-template-rows: 26.1px !important;
}
html body [data-home-section="events"] .home-events-filter-row::after,
html body [data-home-section="guide"] .home-guide-filter-shell::after {
  top: 4px;
  bottom: 4px;
}
@media (max-width: 900px) {
  html body [data-home-section="events"].home-screen-events {
    --home-date-row-height: 25.7px;
    --home-event-type-row-height: 26.2px;
    --events-filter-h: calc(var(--home-date-row-height) + var(--home-event-type-row-height) + 7px) !important;
  }
  html body [data-home-section="guide"].home-screen-guide {
    --home-guide-sector-row-height: 29.6px;
    --guide-filter-h: calc(54.2px + var(--home-guide-sector-row-height) + 7px) !important;
  }
  html body [data-home-section="events"] .home-events-filter-row,
  html body [data-home-section="guide"] .home-guide-filter-shell {
    padding-block: 2.5px !important;
  }
  html body [data-home-section="events"] .home-events-filter-row {
    grid-template-rows: var(--home-date-row-height) var(--home-event-type-row-height) !important;
  }
  html body [data-home-section="events"] .home-events-filter-group + .home-events-filter-group {
    padding-top: 2px !important;
  }
  html body [data-home-section="guide"] .home-guide-filter-shell {
    grid-template-rows: 54.2px var(--home-guide-sector-row-height) !important;
  }
  html body [data-home-section="guide"] .home-guide-filter-types {
    padding-bottom: 1.5px !important;
  }
  html body [data-home-section="guide"] .home-guide-filter-areas {
    padding-top: 2px !important;
  }
}
@media (max-width: 700px) {
  html body [data-home-section="events"].home-screen-events {
    --home-date-row-height: 26.2px;
    --home-event-type-row-height: 26.7px;
  }
  html body [data-home-section="guide"].home-screen-guide {
    --home-guide-sector-row-height: 30px;
  }
}
@media (max-width: 600px) {
  html body [data-home-section] {
    --home-filter-font-size: clamp(7.2px, 2.18vw, 8.8px);
    --home-filter-padding-inline: clamp(2px, .82vw, 4px);
  }
  html body [data-home-section="guide"] .home-guide-filter-shell {
    grid-template-rows: var(--home-guide-sector-row-height) 54.2px !important;
  }
  html body [data-home-section="guide"] .home-guide-filter-types {
    padding-top: 1.5px !important;
    padding-bottom: 0 !important;
  }
  html body [data-home-section="guide"] .home-guide-filter-areas {
    padding-top: 0 !important;
    padding-bottom: 2px !important;
  }
}
@media (max-width: 520px) {
  html body [data-home-section="events"].home-screen-events {
    --home-date-row-height: 25.2px;
    /* Retain enough room for the 1px divider and its halved 2px padding. */
    --home-event-type-row-height: 26.2px;
  }
}
html body [data-home-section="guide"] .home-guide-type-row .home-guide-option-switch {
  height: var(--home-filter-button-height) !important;
  min-height: var(--home-filter-button-height) !important;
}