/* HOMO DEUS — remplace intégralement l'ancien bloc dédié en fin de CSS. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&display=swap");
body#spectacle-homo-deus {
  --hd-bg: #05090d;
  --hd-ink: #0b1218;
  --hd-line: rgba(150,218,238,.19);
  --hd-text: #e9f4f7;
  --hd-muted: #9aadb4;
  --hd-cyan: #59e7ff;
  --hd-pink: #ff3f8d;

  background: var(--hd-bg);
  color: var(--hd-text);
  overflow-x: clip;

  #primary {
    background: var(--hd-bg);
    color: var(--hd-text);
    padding-top: 0;
    margin-bottom: 0;

    > article {
      background: var(--hd-bg);
      color: var(--hd-text);
      padding-top: 0;

      > .absolute {
        display: none;
      }

      > .relative.z-10 {
        display: grid;
        grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
        grid-template-rows: minmax(100svh,auto) auto;
        align-items: center;
        gap: 0 clamp(28px,4vw,68px);
        width: 100%;
        max-width: none;
        padding: 90px clamp(20px,5vw,76px) 0;
        background: radial-gradient(
          ellipse at 80% 18%,
          rgba(28,82,172,.19),
          transparent 38%
        );

        > div:not(.entry-content) {
          display: contents;
        }
      }
    }

    /* HERO */
    .entry-header {
      grid-column: 1;
      grid-row: 1;
      min-width: 0;
      margin: 0;

      > .hd-eyebrow::before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: 12px;
        border-radius: 50%;
        background: var(--hd-pink);
        box-shadow: 0 0 16px var(--hd-pink);
        animation: hd-pulse 1.6s ease-in-out infinite;
      }

      .hd-hero-copy {
        max-width: 600px;
        margin-top: 30px;

        > .wp-block-group {
          margin: 0;
        }
      }

      .hd-lead {
        margin: 0 0 28px;
        color: var(--hd-text);
        font: 600 clamp(1.75rem,2.5vw,2.65rem)/1.04 "Barlow Condensed",sans-serif;

        em {
          color: var(--hd-cyan);
          font-style: normal;
        }
      }
    }

    .post-thumbnail {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;

      img {
        display: block;
        width: 100%;
        height: auto;
        border: 1px solid var(--hd-line);
        border-radius: 0;
        box-shadow: none;
      }
    }

    .entry-title {
      margin: 0;
      padding: 0;
      color: var(--hd-text);
      font: 800 clamp(5.3rem,10vw,10.5rem)/.88 "Barlow Condensed",Impact,sans-serif;
      letter-spacing: -.045em;
      text-transform: uppercase;

      span {
        display: block;
      }

      .hd-title-outline {
        color: transparent;
        -webkit-text-stroke: 1.5px rgba(183,246,255,.75);
        filter: drop-shadow(3px 0 0 rgba(255,63,141,.48));
      }
    }

    .hd-eyebrow {
      margin: 0 0 18px;
      color: #b7f6ff;
      font: 500 .8rem/1.4 monospace;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .wp-block-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .wp-block-button__link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      width: auto;
      padding: 12px 22px;
      border: 1px solid rgba(89,231,255,.65);
      border-radius: 0;
      background: rgba(5,14,18,.7);
      color: #b7f6ff;
      font: 600 .84rem/1.4 monospace;
      letter-spacing: .05em;
      text-decoration: none;
      text-transform: uppercase;

      &:hover,
      &:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 0 28px rgba(89,231,255,.18);
      }
    }

    .wp-block-button.primary .wp-block-button__link {
      background: var(--hd-cyan);
      color: #031116;
    }

    .hd-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 20px;
      margin: 30px 0 0;
      padding-top: 18px;
      border-top: 1px solid var(--hd-line);
      color: var(--hd-muted);
      font: 400 .8rem/1.5 monospace;
      text-transform: uppercase;

      strong {
        color: var(--hd-text);
        font-weight: 500;
      }
    }

    /* CONTENU GUTENBERG */
    .entry-content {
      grid-column: 1 / -1;
      grid-row: 2;
      width: min(100%,1220px);
      min-width: 0;
      margin-inline: auto;
      color: var(--hd-text);

      * {
        box-sizing: border-box;
      }

      h2 {
        margin: 0 0 28px;
        color: var(--hd-text);
        font: 700 clamp(3rem,7.5vw,7.2rem)/.9 "Barlow Condensed",Impact,sans-serif;
        text-transform: uppercase;
      }

      h3,
      h4 {
        color: var(--hd-text);
      }

      p {
        margin: 0 0 1.4em;
        color: var(--hd-muted);
        font-size: 1rem;
        line-height: 1.7;
      }

      :is(h2,#dates h2)::before {
        display: block;
        margin-bottom: 18px;
        color: var(--hd-pink);
        font: 500 .72rem/1.4 monospace;
        letter-spacing: .12em;
      }

      > .hd-final h2::before {
        content: "// VOUS ÊTES TOUJOURS LIBRE DE CHOISIR";
      }

      [id] {
        scroll-margin-top: 100px;
      }

      :is(figure,iframe,img) {
        max-width: 100%;
      }

      figure {
        margin: 0;
      }

      figcaption {
        margin-top: 10px;
        color: var(--hd-muted);
        font: 400 .78rem/1.5 monospace;
      }

      .wp-block-embed__wrapper {
        aspect-ratio: 16 / 9;

        iframe {
          display: block;
          width: 100%;
          height: 100%;
          border: 1px solid var(--hd-line);
        }
      }

      /* GALERIES */
      .wp-block-gallery {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        align-items: start;
        gap: 24px;
      }

      .wp-block-gallery.has-nested-images {
        figure.wp-block-image {
          figcaption {
            position: static;
            max-height: none;
            padding: 10px 0 0;
            color: var(--hd-muted);
            background: none;
            text-align: left;
            text-shadow: none;
          }

          &::before {
            content: none;
          }

          &:not(#individual-image) {
            display: block;
            width: 100%;
            min-width: 0;
            flex: none;
            align-self: start;

            img {
              display: block;
              width: 100% !important;
              height: auto !important;
              flex: none;
              object-fit: contain;
            }
          }
        }
      }

      /* VIDÉOS */
      > .hd-videos {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        padding:
          clamp(88px,10vw,140px)
          max(20px,calc((100vw - 1220px)/2));
        border-block: 1px solid var(--hd-line);
        background: #03070a;
      }

      /* SECTION FINALE */
      > .hd-final {
        display: grid;
        grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
        align-items: center;
        gap: clamp(40px,5vw,80px);
        width: 100vw;
        margin: 0 0 0 calc(50% - 50vw);
        padding: 70px clamp(20px,5vw,76px) 90px;
        background:
          radial-gradient(
            ellipse at 78% 40%,
            rgba(224,164,51,.07),
            transparent 60%
          ),
          var(--hd-bg);

        h2 {
          font-size: clamp(3.4rem,6.5vw,7rem);
        }

        > .wp-block-column {
          min-width: 0;
        }

        img {
          display: block;
          width: 100%;
          height: auto;
        }
      }

      /* FOOTER DU SPECTACLE */
      > .hd-spectacle-footer {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        gap: 40px;
        width: 100vw;
        margin: 0 0 0 calc(50% - 50vw);
        padding: 45px max(20px,calc((100vw - 1220px)/2));
        border-top: 1px solid var(--hd-line);
        background: #03070a;
        align-items: end;

        p {
          margin: 0;
          font-size: .8rem;
        }

        strong {
          display: block;
          margin-bottom: 7px;
          color: var(--hd-text);
          font-family: "Barlow Condensed",sans-serif;
          font-size: 1.4rem;
          text-transform: uppercase;
        }
      }

      > .hd-spectacle-footer + p {
        width: 100vw;
        margin: 0 0 0 calc(50% - 50vw);
        padding:
          18px
          max(20px,calc((100vw - 1220px)/2))
          45px;
        border-top: 1px solid var(--hd-line);
        background: #03070a;
        font-size: .8rem;
      }
    }

    /* VIDÉOS */
    .hd-videos {
      h2::before {
        content: "// 00 — EN IMAGES ET EN MUSIQUE";
      }

      > .wp-block-group__inner-container {
        max-width: 1220px;
        margin-inline: auto;

        > .wp-block-embed {
          margin-bottom: 30px;
        }
      }

      .wp-block-columns {
        gap: 24px;
      }

      .wp-block-column {
        min-width: 0;
      }
    }

    /* HISTOIRE */
    #histoire {
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr);
      align-items: start;
      gap: clamp(40px,5vw,80px);
      margin: 0;
      padding-block: clamp(90px,12vw,160px);

      h2::before {
        content: "// 01 — LE MONDE";
      }

      > .wp-block-column {
        min-width: 0;
        flex: initial;

        &:last-child p:first-child {
          color: var(--hd-text);
          font-size: clamp(1.45rem,2.7vw,2.35rem);
          line-height: 1.42;
        }

        &:last-child p:not(:first-child) {
          color: #b8c8cd;
          font-size: clamp(1.15rem,1.7vw,1.45rem);
          line-height: 1.75;
        }
      }

      .wp-block-image {
        max-width: 420px;
        margin-top: 38px;
      }

      strong {
        color: #b7f6ff;
        font-weight: 500;
      }
    }

    /* BANDEAU DÉFILANT */
    #hd-ticker {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      padding: 18px 0;
      overflow: hidden;
      border-block: 1px solid var(--hd-line);
      background: #071016;

      .ticker {
        display: flex;
        width: max-content;
        gap: 38px;
        white-space: nowrap;
        color: #b7f6ff;
        font: 500 .75rem monospace;
        text-transform: uppercase;
        animation: hd-ticker 28s linear infinite;

        span::before {
          content: "◆";
          margin-right: 38px;
          color: var(--hd-pink);
        }
      }
    }

    /* PERSONNAGES */
    #personnages {
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr));
      align-items: end;
      gap: 40px;
      margin: 0;
      padding: clamp(90px,12vw,160px) 0 50px;

      h2::before {
        content: "// 02 — TRAJECTOIRES";
      }

      > div:nth-child(2) {
        align-self: end;
      }

      > .wp-block-column {
        min-width: 0;
      }

      & + .is-layout-grid {
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 14px;

        > .wp-block-group {
          position: relative;
          min-height: 390px;
          padding: 30px;
          border: 1px solid var(--hd-line);
          background: linear-gradient(145deg,#10212b,#09141b);

          &::after {
            content: "";
            position: absolute;
            top: 25px;
            right: 24px;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--hd-cyan);
            box-shadow: 0 0 18px var(--hd-cyan);
          }

          &:nth-child(2)::after {
            background: #ff973c;
            box-shadow: 0 0 18px #ff973c;
          }

          &:nth-child(3)::after {
            background: var(--hd-pink);
            box-shadow: 0 0 18px var(--hd-pink);
          }
        }

        .wp-block-group__inner-container {
          display: flex;
          flex-direction: column;
          height: 100%;
        }

        h3 {
          margin: 84px 0 8px;
          font: 700 3.2rem/.9 "Barlow Condensed",sans-serif;
          text-transform: uppercase;
        }

        .hd-card-id {
          color: var(--hd-pink);
          font: 500 .7rem monospace;
          letter-spacing: .08em;
        }

        .hd-card-role {
          color: var(--hd-cyan);
          font: 500 .75rem monospace;
          text-transform: uppercase;
        }

        p:last-child {
          margin-top: auto;
        }
      }
    }

    .hd-cards {
      margin: 42px 0 0;
    }

    /* EXPÉRIENCE */
    #experience {
      position: relative;
      overflow: hidden;
      width: 100vw;
      margin: 0 0 0 calc(50% - 50vw);
      padding:
        clamp(88px,10vw,140px)
        max(20px,calc((100vw - 1220px)/2));
      background:
        linear-gradient(
          135deg,
          rgba(43,192,218,.08),
          transparent 40%
        ),
        #071016;

      &::before {
        content: "HUMAN / MACHINE / PUPPET / DATA / MEMORY / FREEDOM";
        position: absolute;
        inset: auto -5vw -2.5vw;
        color: transparent;
        font: 800 clamp(4rem,11vw,12rem)/.72 "Barlow Condensed",sans-serif;
        -webkit-text-stroke: 1px rgba(89,231,255,.08);
        white-space: nowrap;
        pointer-events: none;
      }

      h2::before {
        content: "// 03 — L'EXPÉRIENCE";
      }

      > .wp-block-group__inner-container {
        position: relative;
        max-width: 1220px;
        margin-inline: auto;

        > .wp-block-columns {
          display: grid;
          grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
          gap: clamp(50px,9vw,140px);
          align-items: center;
          margin-bottom: 48px;
        }
      }

      .wp-block-column {
        min-width: 0;
        flex: initial !important;
      }

      ol {
        margin: 0;
        padding: 0;
        list-style: none;
        counter-reset: hd-format;
        border-top: 1px solid var(--hd-line);
      }

      li {
        counter-increment: hd-format;
        display: grid;
        grid-template-columns: 55px 1fr;
        gap: 20px;
        padding: 20px 0;
        border-bottom: 1px solid var(--hd-line);
        color: var(--hd-text);
        font: 600 clamp(1.5rem,3vw,2.6rem)/1 "Barlow Condensed",sans-serif;
        text-transform: uppercase;

        &::before {
          content: counter(hd-format,decimal-leading-zero);
          color: var(--hd-pink);
          font: 500 .72rem/2 monospace;
        }
      }

      .wp-block-accordion-panel .wp-block-gallery {
        grid-template-columns: repeat(3,minmax(0,1fr));
      }
    }

    /* ACCORDÉONS */
    .wp-block-accordion-item {
      border-bottom: 1px solid var(--hd-line);
    }

    .wp-block-accordion-heading button {
      width: 100%;
      padding: 22px 0;
      border: 0;
      background: transparent;
      color: var(--hd-text);
      font: 600 1.25rem "Barlow Condensed",sans-serif;
      text-align: left;
      text-transform: uppercase;

      &:hover,
      &:focus-visible {
        color: var(--hd-cyan);
      }
    }

    /* DATES */
    #dates {
      width: 100vw;
      margin: 0 0 0 calc(50% - 50vw);
      padding:
        clamp(88px,10vw,140px)
        max(20px,calc((100vw - 1220px)/2));
      border: 0;
      background: var(--hd-bg);

      h2::before {
        content: "// 04 — CONNEXIONS PUBLIQUES";
      }

      .hd-dates-heading {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        justify-content: space-between;
        gap: 15px 40px;
        margin: 0 0 55px;
      }

      .hd-cities {
        color: var(--hd-muted);
        font: 500 .75rem monospace;
        text-transform: uppercase;
      }

      .dates-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        border-top: 1px solid var(--hd-line);

        > .date-card {
          display: grid;
          grid-template-columns:
            minmax(150px,.7fr)
            minmax(0,1.4fr);
          align-items: center;
          gap: 24px;
          width: 100%;
          min-height: 94px;
          padding: 26px 2px;
          border: 0;
          border-bottom: 1px solid var(--hd-line);
          border-radius: 0;
          background: transparent;
          transition:
            padding .25s ease,
            background .25s ease;
          color: inherit;
          text-decoration: none;
        }

        > a.date-card:is(:hover,:focus-visible) {
          padding-left: 18px;
          padding-right: 18px;
          background: rgba(89,231,255,.055);
        }
      }

      .date-card-top {
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: var(--hd-text);
      }

      .date-card-date {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px;
      }

      .hd-date-main {
        color: var(--hd-text);
        font: 600 clamp(1.8rem,3vw,3rem)/1 "Barlow Condensed",sans-serif;
        text-transform: uppercase;
      }

      .date-card-text {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 16px;
        padding: 0;

        .date-arrow {
          grid-column: 4;
          grid-row: 1 / span 2;
          align-self: center;
          justify-self: end;
          color: var(--hd-pink);
          font-size: 1.25rem;
        }

        .hd-showtimes {
          flex-basis: 100%;
          margin: 0;
          color: var(--hd-cyan);
          font: 500 .78rem/1.5 monospace;
        }

        h4 {
          flex-basis: 100%;
          margin: 0;
          font-size: 1rem;
          font-weight: 500;
        }

        p {
          margin: 0;
          color: var(--hd-muted);
          font: 400 .78rem/1.4 monospace;
        }
      }

      .date-card-hour {
        color: var(--hd-cyan);
        font: 500 .78rem monospace;
      }

      .date-card-link {
        margin: 0;
        padding: 7px 10px;
        border: 1px solid var(--hd-line);
        border-radius: 0;
        background: transparent;
        color: var(--hd-cyan);
        font: 500 .75rem monospace;
      }

      > .mt-8 {
        margin-top: 30px;
      }

      > .mt-16 {
        margin-top: 55px;
      }

      h2 {
        font: 700 clamp(3rem,7.5vw,7.2rem)/.9 "Barlow Condensed",Impact,sans-serif;
        text-transform: uppercase;
      }
    }

    /* DISTRIBUTION */
    #distribution {
      display: grid;
      grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
      gap: clamp(50px,9vw,140px);
      width: 100vw;
      margin: 0 0 0 calc(50% - 50vw);
      padding:
        clamp(88px,10vw,140px)
        max(20px,calc((100vw - 1220px)/2));
      background: linear-gradient(135deg,#1b131c,#0b1419);

      h2::before {
        content: "// 05 — GÉNÉRIQUE";
      }

      > .wp-block-column {
        min-width: 0;
      }

      .is-layout-grid {
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 1px;
        border: 1px solid var(--hd-line);
        background: var(--hd-line);

        > .wp-block-group {
          padding: 20px;
          background: var(--hd-ink);
        }

        p:first-child {
          margin: 0 0 5px;
          color: var(--hd-muted);
          font: 400 .68rem monospace;
          text-transform: uppercase;
        }

        p:last-child {
          margin: 0;
          color: var(--hd-text);
          font: 600 1.8rem "Barlow Condensed",sans-serif;
          text-transform: uppercase;
        }
      }
    }

    /* ESPACE PROFESSIONNEL */
    #reserver {
      display: flex;
      align-items: center;
      gap: 40px;
      width: 100vw;
      margin: 0 0 0 calc(50% - 50vw);
      padding:
        56px
        max(20px,calc((100vw - 1220px)/2));
      border-block: 1px solid var(--hd-line);
      background: #101c22;

      h2 {
        font-size: clamp(2.2rem,4vw,3.8rem);
      }

      h2::before {
        content: "// 06 — ESPACE PROFESSIONNEL";
      }

      .wp-block-button__link {
        min-height: 50px;
        padding: 12px 22px;
        border: 1px solid rgba(89,231,255,.65);
        background: transparent;
        color: var(--hd-cyan);
      }
    }
  }
}


/* ANIMATIONS */
@keyframes hd-pulse {
  50% {
    opacity: .4;
    transform: scale(.72);
  }
}

@keyframes hd-ticker {
  to {
    transform: translateX(calc(-50% - 19px));
  }
}


/* DATES — DESKTOP */
@media (min-width: 901px) {

  body#spectacle-homo-deus #primary #dates {

    .dates-grid > .date-card {
      grid-template-columns:
        minmax(180px,.75fr)
        minmax(0,1.5fr)
        minmax(0,1.25fr)
        minmax(130px,.6fr);
      grid-template-rows: auto auto;
      gap: 0 24px;
      padding: 26px 2px;
    }

    .date-card-top,
    .date-card-text {
      display: contents;
    }

    .date-card-date {
      grid-column: 1;
      grid-row: 1 / span 2;
      align-self: center;
      flex-wrap: wrap;
      text-transform: uppercase;
    }

    .date-card-text h4 {
      grid-column: 2;
      grid-row: 1;
      align-self: end;
      flex-basis: auto;
    }

    .date-card-text > p:not(.hd-showtimes):not(.mt-2) {
      grid-column: 2;
      grid-row: 2;
      align-self: start;
    }

    .date-card-hour,
    .date-card-text .hd-showtimes,
    .date-card-text > p.mt-2 {
      grid-column: 3;
      grid-row: 1 / span 2;
      align-self: center;
    }

    .date-card-text .date-card-link {
      grid-column: 4;
      grid-row: 1 / span 2;
      align-self: center;
      margin: 0;
    }
  }
}


/* TABLETTE */
@media (max-width: 900px) {

  body#spectacle-homo-deus #primary > article > .relative.z-10 {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding-top: 115px;
  }

  body#spectacle-homo-deus #primary .entry-header {
    grid-column: 1;
    grid-row: 1;
  }

  body#spectacle-homo-deus #primary .post-thumbnail {
    grid-column: 1;
    grid-row: 2;
    margin: 35px 0 60px;
  }

  body#spectacle-homo-deus #primary .entry-content {
    grid-column: 1;
    grid-row: 3;
  }

  body#spectacle-homo-deus #primary :is(
    #histoire,
    #experience > .wp-block-group__inner-container > .wp-block-columns,
    #distribution,
    .entry-content > .hd-final
  ) {
    grid-template-columns: 1fr;
  }

  body#spectacle-homo-deus #primary #personnages + .is-layout-grid {
    grid-template-columns: 1fr;

    > .wp-block-group {
      min-height: 0;
    }

    h3 {
      margin-top: 28px;
    }
  }
}


/* MOBILE */
@media (max-width: 600px) {

  body#spectacle-homo-deus #primary .entry-title {
    font-size: clamp(5rem,22vw,7rem);
  }

  body#spectacle-homo-deus #primary #personnages {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  body#spectacle-homo-deus #primary .hd-videos .wp-block-columns {
    flex-direction: column;
  }

  body#spectacle-homo-deus #primary .entry-content .wp-block-gallery,
  body#spectacle-homo-deus #primary #experience .wp-block-accordion-panel .wp-block-gallery {
    grid-template-columns: 1fr;
  }

  body#spectacle-homo-deus #primary #dates .hd-dates-heading {
    display: block;
  }

  body#spectacle-homo-deus #primary #dates .dates-grid > .date-card {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body#spectacle-homo-deus #primary #distribution .is-layout-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  body#spectacle-homo-deus #primary #reserver {
    flex-direction: column;
    align-items: stretch;
  }

  body#spectacle-homo-deus #primary .entry-content > .hd-spectacle-footer {
    grid-template-columns: 1fr;
  }
}

/* ACCESSIBILITÉ */
@media (prefers-reduced-motion: reduce) {

  body#spectacle-homo-deus #primary #hd-ticker .ticker,
  body#spectacle-homo-deus #primary .entry-header > .hd-eyebrow::before {
    animation: none;
  }
}