/* =====================================================================
   HELLFEST REVENTE – CUSTOM DESIGN OVERRIDE v3
   Reproduction pixel-perfect du site officiel (tickets.hellfest.fr).
   CSS-only, aucun JS modifié.

   ── Structure DOM React ──────────────────────────────────────────────
   .widget-section
     .container
       .grid
         .grid-row
           div[class*="grid-col"]
             div[ROOT – inline border/bg]          ← transparent wrapper
               div[1]  IMAGE (top de CARTE 1)
               div[2]  EVENT INFO (bas de CARTE 1)
               div[3]  BARRE ROUGE 5px             ← top de CARTE 2 : "Billets"
               div[4]  TICKET CONTENT              ← bas de CARTE 2
   ===================================================================== */


/* ── 0. CONTAINER : marges latérales ──────────────────────────────── */
.widget-section .container {
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}


/* ── 1. ROOT CARD : wrapper transparent ──────────────────────────── */
.widget-section div[class*="grid-col"] > div {
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}


/* ═══════════════════════════════════════════════════════════════════
   CARTE 1 – FESTIVAL
   div[1] = top (image), div[2] = bas (infos)
   Bord continu rouge sur les deux demi-cartes soudées
   ═══════════════════════════════════════════════════════════════════ */

/* — Image : remplit la carte bord à bord, logo 100 % visible ——————— */
.widget-section div[class*="grid-col"] > div > div:first-child {
  border: 1.5px solid #ed202e !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
  overflow: hidden !important;
  background: #1a1a1a !important;
  line-height: 0 !important;
}
.widget-section div[class*="grid-col"] > div > div:first-child img {
  display: block !important;
  width: 100% !important;
  /* Hauteur fixe comme sur le site officiel (~170 px sur mobile) */
  height: 170px !important;
  object-fit: contain !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #1a1a1a !important;
}

/* — Bloc infos événement ————————————————————————————————————————— */
.widget-section div[class*="grid-col"] > div > div:nth-child(2) {
  border: 1.5px solid #ed202e !important;
  border-top: none !important;
  border-radius: 0 0 10px 10px !important;
  background: #111 !important;
  padding: 14px 16px 16px !important;
}

/* Titre "HELLFEST 2027 – BILLETTERIE OFFICIELLE" */
.widget-section div[class*="grid-col"] > div > div:nth-child(2) > div:first-child {
  font-family: TypoMain, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.35 !important;
  color: #fff !important;
  margin-bottom: 6px !important;
}

/* "À partir de…" */
.widget-section div[class*="grid-col"] > div > div:nth-child(2) > div:nth-child(2) {
  font-size: 13px !important;
  color: #ccc !important;
  margin-bottom: 5px !important;
}

/* Date + lieu */
.widget-section div[class*="grid-col"] > div > div:nth-child(2) > div:nth-child(3),
.widget-section div[class*="grid-col"] > div > div:nth-child(2) > div:nth-child(4) {
  font-size: 12px !important;
  color: #bbb !important;
  margin-bottom: 3px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   CARTE 2 – BILLETS
   div[3] = top ("Billets" header),  div[4] = bas (PASS 4 JOURS + content)
   Bord continu rouge, même rayon que Carte 1
   ═══════════════════════════════════════════════════════════════════ */

/* — Header "Billets" (ancienne barre rouge 5 px) ———————————————— */
.widget-section div[class*="grid-col"] > div > div:nth-child(3) {
  /* Espacement entre les deux cartes : ~20 px */
  margin-top: 20px !important;
  /* Apparence top de la carte 2 */
  height: auto !important;
  background: #1a1a1a !important;
  border: 1.5px solid #ed202e !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 14px 16px 12px !important;
  display: block !important;
  overflow: visible !important;
}

/* Titre "Billets" injecté */
.widget-section div[class*="grid-col"] > div > div:nth-child(3)::before {
  content: "Billets";
  display: block;
  font-family: TypoMain, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* — Ticket content (bas de carte 2) ———————————————————————————— */
.widget-section div[class*="grid-col"] > div > div:nth-child(4) {
  border: 1.5px solid #ed202e !important;
  border-top: none !important;
  border-radius: 0 0 10px 10px !important;
  overflow: hidden !important;
  background: #1a1a1a !important;
  padding: 0 16px 18px !important;
  margin-top: 0 !important;
}

/* — Bandeau PASS 4 JOURS avec chevron en cercle sombre ——————————— */
.widget-section div[class*="grid-col"] > div > div:nth-child(4)::before {
  content: "PASS 4 JOURS";
  display: block;
  background-color: #ed202e;
  color: #fff;
  font-family: Tungsten, Impact, "Arial Narrow", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
  /* Hauteur identique au site officiel (~48 px) */
  padding: 14px 16px;
  /* Annule le padding horizontal du parent pour aller bord à bord */
  margin: 0 -16px 16px -16px;
  /* Chevron dans cercle sombre – centré verticalement */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='15' fill='%231a1a1a'/%3E%3Cpolyline points='10 14 17 21 24 14' stroke='%23ffffff' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 34px 34px;
}

/* — "Pass 4 Jours - Revente" ———————————————————————————————————— */
.widget-section div[class*="grid-col"] > div > div:nth-child(4) > div:first-child {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 3px !important;
  margin-top: 0 !important;
}

/* — Description "Inclut l'accès…" ————————————————————————————— */
.widget-section div[class*="grid-col"] > div > div:nth-child(4) > div:nth-child(2) {
  font-size: 12px !important;
  color: #999 !important;
  margin-bottom: 14px !important;
}

/* — Compteur − | n | + ————————————————————————————————————————— */
/* Boutons rouge */
.widget-section div[class*="grid-col"] > div > div:nth-child(4) > div:nth-child(3) > button {
  width: 42px !important;
  height: 42px !important;
  font-size: 22px !important;
  border-radius: 8px 0 0 8px !important;
}
.widget-section div[class*="grid-col"] > div > div:nth-child(4) > div:nth-child(3) > button:last-of-type {
  border-radius: 0 8px 8px 0 !important;
}
/* Afficheur central noir */
.widget-section div[class*="grid-col"] > div > div:nth-child(4) > div:nth-child(3) > div {
  height: 42px !important;
  width: 54px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}
/* Espacement sous le compteur */
.widget-section div[class*="grid-col"] > div > div:nth-child(4) > div:nth-child(3) {
  margin-bottom: 14px !important;
}

/* — Fiche billet (bloc gris description) ——————————————————————— */
.widget-section div[class*="grid-col"] > div > div:nth-child(4) > div:nth-child(4) {
  background: #2a2a2a !important;
  border-radius: 8px !important;
  padding: 13px 14px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #fff !important;
  margin-bottom: 8px !important;
}

/* — Bloc prix (bloc gris prix) ————————————————————————————————— */
.widget-section div[class*="grid-col"] > div > div:nth-child(4) > div:nth-child(5) {
  background: #2a2a2a !important;
  border-radius: 8px !important;
  padding: 13px 14px !important;
  font-size: 14px !important;
  color: #fff !important;
  margin-bottom: 14px !important;
}

/* — Bouton "Suivant" ————————————————————————————————————————————— */
.widget-section div[class*="grid-col"] > div > div:nth-child(4) > button {
  width: 100% !important;
  display: block !important;
  background: #ed202e !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 12px !important;
  cursor: pointer !important;
}

/* — "Billets restants" ————————————————————————————————————————— */
.widget-section div[class*="grid-col"] > div > div:nth-child(4) > div:last-child {
  font-size: 12px !important;
  color: #999 !important;
  margin-top: 0 !important;
}

/* — Formulaire "Vos informations" (état intermédiaire) ————————— */
/* Assure que le formulaire hérite bien du style de la carte */
.widget-section div[class*="grid-col"] > div > div:nth-child(4) form {
  margin-bottom: 12px !important;
}


/* ── 5. FOOTER : reste en bas, espacement suffisant ──────────────── */
.widget-section {
  padding-bottom: 4rem !important;
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE (< 480 px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .widget-section .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Image légèrement moins haute sur très petits écrans */
  .widget-section div[class*="grid-col"] > div > div:first-child img {
    height: 155px !important;
  }

  /* Carte 2 header */
  .widget-section div[class*="grid-col"] > div > div:nth-child(3) {
    margin-top: 16px !important;
    padding: 12px 14px 10px !important;
  }
  .widget-section div[class*="grid-col"] > div > div:nth-child(3)::before {
    font-size: 17px !important;
  }

  /* PASS 4 JOURS banner */
  .widget-section div[class*="grid-col"] > div > div:nth-child(4)::before {
    font-size: 18px !important;
    padding: 13px 14px !important;
    margin: 0 -16px 14px -16px !important;
    background-position: right 12px center !important;
    background-size: 30px 30px !important;
  }

  /* Carte 2 contenu */
  .widget-section div[class*="grid-col"] > div > div:nth-child(4) {
    padding: 0 14px 16px !important;
  }

  /* Infos événement */
  .widget-section div[class*="grid-col"] > div > div:nth-child(2) {
    padding: 12px 14px 14px !important;
  }
  .widget-section div[class*="grid-col"] > div > div:nth-child(2) > div:first-child {
    font-size: 13px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ACCORDÉON – PASS 4 JOURS
   Le script ajoute l'état data-accordion-open au panneau généré.
   La flèche est un vrai élément CSS animé et le contenu est repliable.
   ═══════════════════════════════════════════════════════════════════ */

.widget-section div[class*="grid-col"] > div > div:nth-child(4) {
  position: relative !important;
  cursor: default !important;
  max-height: 1800px !important;
  overflow: hidden !important;
  transition: max-height 480ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  outline: none !important;
  user-select: none !important;
}

.widget-section
  div[class*="grid-col"]
  > div
  > div:nth-child(4)
  > * {
  opacity: 1 !important;
  transition: opacity 180ms ease !important;
}

.widget-section
  div[class*="grid-col"]
  > div
  > div:nth-child(4)::before {
  background-image: none !important;
  padding-right: 64px !important;
}

.widget-section
  div[class*="grid-col"]
  > div
  > div:nth-child(4)::after {
  content: "" !important;
  position: absolute !important;
  top: 7px !important;
  right: 14px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: #1a1a1a !important;
  box-sizing: border-box !important;
  transform: rotate(180deg) !important;
  transition: transform 220ms ease !important;
  pointer-events: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M9 12l6 6 6-6' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 30px 30px !important;
  cursor: pointer !important;
}

.widget-section
  div[class*="grid-col"]
  > div
  > div:nth-child(4)[data-accordion-open="false"]::after {
  transform: rotate(0deg) !important;
}

.widget-section
  div[class*="grid-col"]
  > div
  > div:nth-child(4)[data-accordion-open="false"]
  {
  max-height: 48px !important;
}

.widget-section
  div[class*="grid-col"]
  > div
  > div:nth-child(4)[data-accordion-open="false"]
  > * {
  opacity: 0 !important;
  pointer-events: none !important;
}

.widget-section
  div[class*="grid-col"]
  > div
  > div:nth-child(4)
  button,
.widget-section
  div[class*="grid-col"]
  > div
  > div:nth-child(4)
  input,
.widget-section
  div[class*="grid-col"]
  > div
  > div:nth-child(4)
  select,
.widget-section
  div[class*="grid-col"]
  > div
  > div:nth-child(4)
  textarea {
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
  user-select: text !important;
}

.widget-section
  div[class*="grid-col"]
  > div
  > div:nth-child(4):focus-visible {
  outline: 2px solid #ed202e !important;
  outline-offset: -2px !important;
}

/* Le copyright reprend exactement la teinte discrète du nom du site. */
footer > div:nth-of-type(2) {
  color: #fff !important;
  opacity: 0.5 !important;
}

/* Le bundle public applique .is-open directement sur la navigation.
   Les styles d'origine attendaient à tort une classe .open-menu sur un parent. */
.main-nav.is-open {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition-delay: 0s !important;
}

.main-nav.is-open::before {
  --tw-translate-x: 0px !important;
  --tw-translate-y: 0px !important;
}

.main-nav.is-open ul li {
  visibility: visible !important;
  opacity: 1 !important;
  --tw-translate-x: 0px !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x))
    skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
    scaleY(var(--tw-scale-y)) !important;
}

/* Menu mobile : panneau noir superposé fidèle au site d'origine. */
@media (max-width: 767px) {
  html,
  body,
  main {
    max-width: 100%;
    overflow-x: clip !important;
  }

  body {
    width: auto !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  svg {
    max-width: 100%;
  }

  .hero-section {
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .info-section .container,
  .widget-section .container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .info-section .grid-row,
  .widget-section .grid-row,
  .info-section div[class*="grid-col"],
  .widget-section div[class*="grid-col"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .section-title {
    max-width: 100%;
    font-size: clamp(1.75rem, 8.5vw, 2.25rem) !important;
    overflow-wrap: break-word;
  }

  .info-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .widget-section {
    padding-top: 3rem !important;
  }

  .main-header {
    width: 100% !important;
    max-width: 100% !important;
  }

  .main-nav {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    bottom: auto !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: calc(4rem + clamp(3.5rem, 9vh, 4.75rem))
      clamp(1.25rem, 6vw, 3.75rem) 2rem !important;
    overflow: hidden !important;
    background: #000 !important;
    border: 1px solid #ed202e !important;
    border-radius: 0 0 0 1.5rem !important;
    color: #ed202e !important;
    z-index: 9400 !important;
    transform: translateY(-0.5rem);
    transition:
      opacity 280ms ease,
      transform 280ms ease,
      visibility 0s linear 280ms !important;
  }

  .main-nav.is-open {
    transform: translateY(0);
    transition:
      opacity 280ms ease,
      transform 280ms ease,
      visibility 0s linear 0s !important;
  }

  .main-nav ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(2.25rem, 5.5vh, 3.25rem);
    width: 100%;
  }

  .main-nav ul li {
    width: 100%;
    margin: 0 !important;
    line-height: 0.95;
  }

  .main-nav ul li a {
    display: block;
    max-width: 100%;
    color: #ed202e !important;
    font-family: TypoTitle, Tungsten, Impact, sans-serif !important;
    font-size: clamp(1.4rem, 7vw, 2.4rem);
    font-weight: 700;
    line-height: 0.95;
    white-space: nowrap;
  }

  .main-header > div:first-child {
    position: relative;
    z-index: 9500;
  }

  .main-header:has(.main-nav.is-open) .toggle-menu {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 50% !important;
    background: #ed202e !important;
  }

  .main-header:has(.main-nav.is-open) .toggle-menu > div {
    visibility: hidden;
  }

  .main-header:has(.main-nav.is-open) .toggle-menu::before,
  .main-header:has(.main-nav.is-open) .toggle-menu::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.65rem;
    height: 2px;
    background: #000;
    transform-origin: center;
  }

  .main-header:has(.main-nav.is-open) .toggle-menu::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .main-header:has(.main-nav.is-open) .toggle-menu::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

.widget-section
  div[class*="grid-col"]
  > div
  > div:nth-child(4)[data-accordion-open="false"]::before {
  margin-bottom: -1px !important;
}

@media (prefers-reduced-motion: reduce) {
  .widget-section
    div[class*="grid-col"]
    > div
    > div:nth-child(4)::after {
    transition: none !important;
  }

  .widget-section
    div[class*="grid-col"]
    > div
    > div:nth-child(4) {
    transition: none !important;
  }

  .widget-section
    div[class*="grid-col"]
    > div
    > div:nth-child(4)
    > * {
    transition: none !important;
  }
}