/* L’ODYSSÉE DE MOTI — feuille dédiée */

@font-face {
  font-family: "Moti DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAopxhTg.ttf) format("truetype");
}

@font-face {
  font-family: "Moti DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAkJxhTg.ttf) format("truetype");
}

@font-face {
  font-family: "Moti DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAfJthTg.ttf) format("truetype");
}

@font-face {
  font-family: "Moti DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwARZthTg.ttf) format("truetype");
}

@font-face {
  font-family: "Moti Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fraunces/v38/6NUh8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib1603gg7S2nfgRYIchRujDg.ttf) format("truetype");
}

@font-face {
  font-family: "Moti Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fraunces/v38/6NUh8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib1603gg7S2nfgRYIcaRyjDg.ttf) format("truetype");
}

@font-face {
  font-family: "Moti Fraunces";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fraunces/v38/6NUh8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib1603gg7S2nfgRYIcUByjDg.ttf) format("truetype");
}

/* Styles limités à la fiche Moti */

body#spectacle-lodyssee-de-moti {
  #primary {
    --moti-ink: #102d36;
    --moti-paper: #f7f9f7;
    --moti-teal: #155d60;
    --moti-apricot: #ffbb83;
    --moti-line: #cad8d5;
    --moti-muted: #52666b;
    --moti-gutter: clamp(20px, 4vw, 48px);

    color: var(--moti-ink);
    background: var(--moti-paper);
    font-family: "Moti DM Sans", Arial, sans-serif;
    line-height: 1.65;

    /* Structure et bandeau */

    > article {
      background: var(--moti-ink);

      > .relative.z-10 {
        display: grid;
        grid-template-columns: minmax(var(--moti-gutter), 1fr) minmax(0, 550px) minmax(0, 670px) minmax(var(--moti-gutter), 1fr);
        align-items: center;
        margin: 0;

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

    .entry-header {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
      margin: 0;
      padding: 145px clamp(24px, 4vw, 64px) 65px 0;
      color: #fff;

      .moti-eyebrow {
        max-width: 380px;
        color: #aed1d1;
      }
    }

    .post-thumbnail {
      grid-column: 3;
      grid-row: 1;
      min-width: 0;
      padding: 145px 0 65px;

      img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        border-radius: 45% 45% 8px 8px / 18% 18% 8px 8px;
        box-shadow: none;
      }
    }

    .entry-title {
      margin: 0 0 26px;
      padding: 0;
      color: #fff;
      font: 600 clamp(5.5rem, 10.4vw, 10rem)/1.02 "Moti Fraunces", Georgia, serif;
      letter-spacing: -.055em;
      text-transform: none;

      span {
        display: block;

        &:first-child {
          font-size: .34em;
          line-height: 1.2;
          letter-spacing: -.035em;
        }
      }

      .hd-title-outline {
        color: var(--moti-apricot);
      }
    }

    :is(.hd-eyebrow, .moti-eyebrow) {
      margin: 0 0 22px;
      font-size: .8rem;
      font-weight: 700;
      line-height: 1.6;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .moti-hero-copy {
      margin: 0;
    }

    .moti-lead {
      margin: 0 0 18px;
      font-size: clamp(1.25rem, 1.8vw, 1.55rem);
      line-height: 1.5;
    }

    .moti-intro {
      max-width: 435px;
      margin: 0;
      color: #c9d9dc;
    }

    /* Blocs Gutenberg */

    .entry-content {
      grid-column: 1 / -1;
      grid-row: 2;
      width: 100%;
      background: var(--moti-paper);

      :is(h2, h3, h4) {
        color: inherit;
        text-transform: none;
        text-wrap: balance;
      }

      h2 {
        margin: 0 0 26px;
        padding: 0;
        font: 500 clamp(2.35rem, 4.1vw, 4rem)/1.14 "Moti Fraunces", Georgia, serif;
        letter-spacing: -.045em;

        em {
          color: var(--moti-teal);
          font-style: normal;
        }
      }

      h3 {
        margin: 0 0 12px;
        font-size: 1.2rem;
        font-weight: 600;
        line-height: 1.35;
      }

      p {
        margin: 0 0 20px;
        font-size: 1rem;
        line-height: 1.65;
      }

      :is(p, .wp-block-group) {
        > :last-child {
          margin-bottom: 0;
        }
      }

      :is(.moti-eyebrow, .moti-role, .moti-note) {
        font-size: .8rem;
      }

      .moti-note {
        color: var(--moti-muted);
      }

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

    :is(.moti-section, .moti-band, .moti-support, .moti-date-note, #dates) {
      width: 100%;
      max-width: none;
      margin: 0;
      padding-inline: max(var(--moti-gutter), calc((100% - 1220px) / 2));
    }

    :is(.moti-section, #dates) {
      padding-block: clamp(64px, 8vw, 105px);
    }

    a {
      text-underline-offset: 5px;
    }

    :is(a, button, summary):focus-visible {
      outline: 3px solid #cd652f;
      outline-offset: 5px;
    }

    .wp-block-columns {
      margin: 0;
      gap: clamp(25px, 6vw, 90px);
    }

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

    .moti-three-columns {
      gap: 26px;
    }

    .moti-section-heading {
      align-items: flex-end;
      margin-bottom: 44px;

      > .wp-block-column:last-child {
        flex-basis: 34%;
        flex-grow: 0;
        color: var(--moti-muted);
      }
    }

    .wp-block-buttons {
      gap: 16px 24px;
      margin-top: 30px;
    }

    .wp-block-button__link {
      min-height: 50px;
      padding: 12px 22px;
      border: 1px solid transparent;
      border-radius: 6px;
      background: var(--moti-teal);
      color: #fff;
      font: 700 .92rem/1.45 "Moti DM Sans", Arial, sans-serif;
      transition: background .2s, transform .2s;

      &:is(:hover, :focus-visible) {
        transform: translateY(-2px);
      }
    }

    .moti-primary {
      .wp-block-button__link {
        background: var(--moti-apricot);
        color: var(--moti-ink);
      }
    }

    .is-style-outline {
      .wp-block-button__link {
        border-color: #a0babd;
        background: transparent;
        color: inherit;
      }
    }

    .wp-block-image {
      margin: 0;

      img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 7px;
      }

      figcaption {
        margin: 15px 0 0;
        color: var(--moti-muted);
        font-size: .85rem;
        text-align: left;
      }
    }

    /* Informations, histoire et personnages */

    .moti-facts {
      padding-block: 28px 34px;
      background: var(--moti-ink);
      color: #bed1d5;

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

      strong {
        display: block;
        color: #fff;
        font: 500 1.7rem/1.5 "Moti Fraunces", Georgia, serif;
      }

      .wp-block-column {
        + .wp-block-column {
          padding-left: 32px;
          border-left: 1px solid #42616a;
        }
      }
    }

    .moti-facts-columns {
      gap: 24px;
      padding-top: 28px;
      border-top: 1px solid #42616a;
    }

    .moti-story {
      .wp-block-column:last-child {
        padding-top: 40px;
        color: #28444c;
      }
    }

    .moti-quote {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 30px;
      margin: 55px 0 0;
      padding: 42px 0 0;
      border: 0;
      border-top: 1px solid var(--moti-line);

      p {
        margin: 0;
        font: 500 clamp(1.5rem, 2.5vw, 2.15rem)/1.4 "Moti Fraunces", Georgia, serif;
        letter-spacing: -.02em;
      }

      cite {
        flex-shrink: 0;
        color: var(--moti-muted);
        font-size: .875rem;
        font-style: normal;
      }
    }

    :is(.moti-characters, .moti-schools) {
      border-block: 1px solid #e1e8e4;
      background: #fff;
    }

    .moti-card {
      height: 100%;
      padding: 30px;
      border: 1px solid #acc8be;
      border-radius: 8px;
      background: #f0f6f2;
    }

    .moti-role {
      color: var(--moti-teal);
      font-weight: 600;
    }

    :is(.moti-card, .moti-journey) {
      h3 {
        font: 500 1.65rem/1.3 "Moti Fraunces", Georgia, serif;
        letter-spacing: -.025em;
      }
    }

    /* Photographies et plateau */

    .moti-voyage {
      background: #e3f0ec;
    }

    :is(.moti-journey, .moti-moments) {
      img {
        aspect-ratio: 1.51;
        object-fit: contain;
        background: #040507;
      }

      + .moti-note {
        margin-top: 30px;
      }
    }

    .moti-journey {
      .moti-eyebrow {
        margin: 25px 0 13px;
        color: var(--moti-teal);
      }
    }

    .moti-stage {
      background: #261e34;
      color: #fff;

      .moti-eyebrow {
        color: #eec5ae;
      }

      h2 {
        em {
          color: var(--moti-apricot);
        }
      }

      figcaption {
        color: #c8bfd1;
      }
    }

    .moti-stage-columns {
      align-items: center;

      > .wp-block-column:first-child {
        flex-basis: 40%;
        flex-grow: 0;
      }
    }

    .moti-portrait {
      max-width: 420px;

      img {
        border-radius: 150px 150px 8px 8px;
      }
    }

    .moti-stage-note {
      margin-top: 22px;
      padding-top: 22px;
      border-top: 1px solid #51465d;

      h3 {
        font-size: 1.07rem;
      }

      p {
        color: #d2cad9;
      }
    }

    /* Accordéons Gutenberg */

    .moti-questions {
      border-top: 1px solid var(--moti-line);
    }

    .wp-block-details {
      margin: 0;
      border-bottom: 1px solid var(--moti-line);

      summary {
        position: relative;
        padding: 24px 35px 24px 0;
        font-size: 1.07rem;
        font-weight: 600;
        list-style: none;
        cursor: pointer;

        &::-webkit-details-marker {
          display: none;
        }

        &::after {
          content: "+";
          position: absolute;
          right: 4px;
          top: 23px;
          color: var(--moti-teal);
          font-size: 1.3rem;
        }
      }

      &[open] {
        summary::after {
          content: "−";
        }
      }

      p {
        margin: 0 0 25px;
        padding-right: 22px;
        color: var(--moti-muted);
      }
    }

    /* Dates — classes du modèle PHP partagé */

    #dates {
      border: 0;
      padding-bottom: 25px;

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

      .hd-cities {
        color: var(--moti-muted);
        font-size: .875rem;
      }

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

        > .date-card {
          display: grid;
          grid-template-columns: minmax(180px, .7fr) minmax(0, 1.5fr);
          align-items: center;
          gap: 24px;
          position: relative;
          width: 100%;
          padding: 28px 42px 28px 0;
          border: 0;
          border-bottom: 1px solid var(--moti-line);
          border-radius: 0;
          color: inherit;
          background: transparent;
          text-decoration: none;
          transition: background .25s ease;
        }
      }

      a.date-card:is(:hover, :focus-visible) {
        background: #e3f0ec;
      }

      .date-card-top {
        flex-wrap: wrap;
        gap: 8px 16px;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: inherit;
      }

      .date-card-date {
        flex-wrap: wrap;
      }

      .hd-date-main {
        font: 500 clamp(1.3rem, 2vw, 1.8rem)/1.35 "Moti Fraunces", Georgia, serif;
      }

      .date-card-hour {
        padding-left: 0;
        border: 0;
        color: var(--moti-teal);
        font-size: .85rem;
      }

      .date-card-text {
        padding: 0;

        h4 {
          margin: 0 0 5px;
          font-size: 1.2rem;
          line-height: 1.4;
        }

        p {
          margin: 0;
          color: var(--moti-muted);
        }
      }

      .hd-showtimes {
        margin-top: 5px;
        font-size: .875rem;
      }

      .date-arrow {
        position: absolute;
        top: 50%;
        right: 8px;
        font-size: 1.8rem;
        transform: translateY(-50%);
      }

      .date-card-link {
        padding: 10px 18px;
        border: 1px solid #9db7b8;
        border-radius: 6px;
        color: var(--moti-teal);
        font-size: .9rem;

        &:hover {
          background: #e3f0ec;
        }
      }

      .title-animation {
        opacity: 1;
        transform: none;
        animation: none;
      }
    }

    .moti-date-note {
      padding-bottom: 55px;
    }

    /* Contact, générique et conclusion */

    .moti-invitation {
      padding-block: 42px;
      background: #dcebe6;

      h2 {
        margin-bottom: 8px;
        font-size: 1.6rem;
      }
    }

    .moti-contact-columns {
      align-items: center;

      .wp-block-buttons {
        justify-content: flex-end;
        margin: 0;
      }
    }

    .moti-credits {
      > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 34px;
      }
    }

    .moti-credit {
      margin: 0;
      padding-top: 15px;
      border-top: 1px solid var(--moti-line);

      &:first-child {
        grid-column: 1 / -1;
      }

      h3 {
        font-size: .875rem;
      }

      p {
        margin: 0;
        color: var(--moti-muted);
        font-size: .95rem;
      }
    }

    .moti-closing {
      background: var(--moti-ink);
      color: #fff;

      .moti-eyebrow {
        color: #aed1d1;
      }
    }

    .moti-support {
      padding-block: 28px;
      background: #fff;
    }

    /* Tablette et mobile */

    @media (max-width: 800px) {
      > article {
        > .relative.z-10 {
          display: block;
        }
      }

      .entry-header {
        padding: 125px var(--moti-gutter) 35px;
      }

      .post-thumbnail {
        padding: 0 var(--moti-gutter) 30px;

        img {
          border-radius: 22px;
        }
      }

      .entry-title {
        font-size: clamp(5.5rem, 17vw, 9rem);
      }

      .wp-block-columns {
        flex-direction: column;
      }

      .wp-block-column {
        flex-basis: auto;
        width: 100%;
      }

      .moti-story {
        .wp-block-column:last-child {
          padding-top: 0;
        }
      }

      .moti-quote {
        display: block;

        cite {
          display: block;
          margin-top: 18px;
        }
      }

      .moti-portrait {
        max-width: 300px;
        margin-inline: auto;
      }

      .moti-stage-columns {
        > .wp-block-column:first-child {
          order: 2;
        }
      }

      .moti-contact-columns {
        .wp-block-buttons {
          justify-content: flex-start;
        }
      }

      .moti-facts-columns {
        gap: 0;
      }

      .moti-facts {
        .wp-block-column {
          padding-block: 12px;

          + .wp-block-column {
            padding-left: 0;
            border-left: 0;
            border-top: 1px solid #42616a;
          }
        }

        p {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 15px;
        }

        strong {
          font-size: 1.35rem;
        }
      }
    }

    @media (max-width: 560px) {
      #dates {
        .dates-grid {
          > .date-card {
            grid-template-columns: 1fr;
            gap: 12px;
          }
        }
      }

      .moti-credits {
        > .wp-block-group__inner-container {
          grid-template-columns: 1fr;
        }
      }

      .moti-card {
        padding: 25px;
      }
    }

    /* Accessibilité */

    @media (prefers-reduced-motion: reduce) {
      :is(.wp-block-button__link, .date-card, .date-card-link) {
        transition: none;
        transform: none;
      }
    }
  }
}