@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Inter:wght@400;500&display=swap");

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  --color-ink: #14161a;
  --color-paper: #f7f7f5;
  --color-grey: #71767c;
  --color-grey-light: #8a8f94;
  --color-hairline: #e4e5e7;

  --font-display: "Fraunces", serif;
  --font-body: "Inter", sans-serif;

  --nav-width: 52px;
  --breakpoint-nav: 768px;
}

/* ==========================================================================
   Reset minimal
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 400;
}

div.site-content {
  > div {
    min-height: 100%;
    div#block-alma-content {
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
      min-height: calc(100vh - 64px - 49px) !important;
    }
  }
}

@media only screen and (min-width: 768px) {
  div.site-content {
    > div {
      div#block-alma-content {
        min-height: calc(100vh - 64px) !important;
      }
    }
  }
}

@media only screen and (min-width: 1280px) {
  div.site-content {
    > div {
      div#block-alma-content {
        min-height: calc(100vh - 64px) !important;
      }
    }
  }
}

/* ==========================================================================
   Layout général — MOBILE D'ABORD
   ========================================================================== */
.site-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-nav {
  border-bottom: 1px solid var(--color-hairline);
  background: var(--color-paper);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
}

.site-nav__brand {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  text-decoration: none;
}

.nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 20px;
  cursor: pointer;
}

.nav-toggle__label span {
  display: block;
  height: 1px;
  background: var(--color-ink);
}

.site-nav__menu {
  border-top: 1px solid var(--color-hairline);
  padding: 0 20px;
  overflow: hidden;
  max-height: 0;
  transition:
    max-height 0.3s ease,
    padding 0.3s ease;
}

.nav-toggle:checked ~ .site-nav__menu {
  max-height: 320px;
  padding: 4px 20px 16px;
}

.site-nav__menu ul {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-nav__menu ul a {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--color-grey);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-nav__menu ul a.is-active,
.site-nav__menu ul a.active {
  color: var(--color-ink);
}

.site-nav__menu ul a:hover {
  color: var(--color-ink);
}

.site-nav__year {
  display: none;
}

.site-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.site-content {
  flex: 1;
  padding: 24px 20px;
}

.site-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--color-hairline);
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-grey-light);
}

/* ==========================================================================
   À partir de la tablette : nav verticale en spine
   ========================================================================== */
@media (min-width: 768px) {
  .site-shell {
    flex-direction: row;
  }

  .site-nav {
    width: var(--nav-width);
    flex-shrink: 0;
    height: 100vh;
    border-right: 1px solid var(--color-hairline);
    border-bottom: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
  }

  .site-nav__bar {
    padding: 0;
    display: block;
  }

  .site-nav__brand {
    writing-mode: vertical-rl;
    font-size: 11px;
  }

  .nav-toggle,
  .nav-toggle__label {
    display: none;
  }

  .site-nav__menu {
    display: block !important;
    border-top: none;
    padding: 0;
    max-height: none;
    overflow: visible;
  }

  .site-nav__menu ul {
    padding: 0;
    gap: 22px;
    align-items: center;
  }

  .site-nav__menu ul a {
    writing-mode: vertical-rl;
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  .site-nav__year {
    display: block;
    writing-mode: vertical-rl;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.05em;
    color: var(--color-grey-light);
  }

  .site-content {
    padding: 32px 40px;
    /* max-width: 620px;*/
  }

  .site-footer {
    padding: 20px 40px;
  }
}

/* ==========================================================================
   Typographie de contenu — classes utilitaires
   ========================================================================== */
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--color-grey-light);
}

.title-display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-ink);
}

.meta {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-grey-light);
}

.hairline-list > * {
  padding: 18px 0;
  border-bottom: 1px solid var(--color-hairline);
}

.hairline-list > *:first-child {
  border-top: 1px solid var(--color-hairline);
}

/* ==========================================================================
   Page Home
   ========================================================================== */
.home-hero {
  max-width: 480px;
  margin-bottom: 32px;
}

.home-hero__title {
  font-size: 35px;
  line-height: 1.3;
  white-space: pre-line;
  margin: 18px 0 22px;
}

.home-hero__tagline {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-grey);
  max-width: 340px;
}

.home-teasers {
  margin-top: 8px;
  border-top: 1px solid var(--color-hairline);
  display: grid;
  grid-template-columns: 1fr;
}

.home-teaser {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-hairline);
}

.home-teaser__text a {
  text-decoration: none;
  font-size: 15px;
  transition: color 0.2s ease;
}

.home-teaser__text a:hover {
  color: var(--color-grey);
}

.home-now-teaser .views-row {
  margin: 0;
}

.home-now-teaser .views-field-field-now-body {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--color-ink);
}

@media (min-width: 768px) {
  .home-hero__title {
    font-size: 38px;
  }

  .home-teasers {
    grid-template-columns: 1fr 1fr;
  }

  .home-teaser {
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-hairline);
  }

  .home-teaser:first-child {
    border-right: 1px solid var(--color-hairline);
  }
}

@media only screen and (min-width: 1000px) {
  .home-hero {
    max-width: 60vw !important;
  }
}

@media only screen and (min-width: 1280px) {
  .home-hero {
    width: 60vw;
    max-width: 800px !important;
  }
  .home-hero__title {
    font-size: 50px;
    line-height: 1.38;
    white-space: pre-line;
    margin: 18px 0 22px;
  }
}

@media only screen and (min-width: 1600px) {
  .home-hero {
    max-width: 1200px !important;
  }
}

/* ==========================================================================
   Liste Musing (Views)
   ========================================================================== */
#block-alma-content {
  .views-element-container {
    .musing-index {
      .views-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 18px 0;
        border-bottom: 1px solid var(--color-hairline);

        &:first-child {
          border-top: 1px solid var(--color-hairline);
        }
      }

      .views-field-field-nature {
        font-family: var(--font-body);
        font-size: 10px;
        letter-spacing: 0.08em;
        color: var(--color-grey-light);
        width: 70px;
        flex-shrink: 0;
      }

      .views-field-title a {
        font-family: var(--font-display);
        font-size: 17px;
        color: var(--color-ink);
        text-decoration: none;
        transition: color 0.2s ease;
      }

      .views-field-title a:hover {
        color: var(--color-grey);
      }

      .views-field-field-date {
        font-family: var(--font-body);
        font-size: 11px;
        color: var(--color-grey-light);
        flex-shrink: 0;
        margin-left: auto;
      }
    }
  }
}

@media (min-width: 768px) {
  #block-alma-content .views-element-container .musing-index .views-row {
    align-items: center;
  }
}

/* ==========================================================================
   Détail d'un billet Musing
   ========================================================================== */
.musing-detail {
  max-width: 520px;
}
@media only screen and (min-width: 1280px) {
  .musing-detail {
    max-width: 800px;
  }
}

.back-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-grey-light);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color 0.2s ease;
}

.back-link:hover {
  color: var(--color-ink);
}

.meta .field--name-field-date {
  display: inline;
}

.meta__sep {
  color: var(--color-hairline);
  margin: 0 6px;
}

.musing-detail__title {
  font-size: 24px;
  line-height: 1.28;
  margin: 16px 0 24px;
}

.musing-detail__illustration {
  margin-bottom: 20px;
}

.musing-detail__text {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.78;
  color: #3a3835;
}

.musing-detail__text p {
  margin: 0 0 20px;
}

@media (min-width: 768px) {
  .musing-detail__title {
    font-size: 29px;
  }
}

/* ==========================================================================
   Liste Digest (Views)
   ========================================================================== */
#block-alma-content {
  .views-element-container {
    .digest-index {
      .views-row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "title verdict"
          "meta  meta";
        column-gap: 16px;
        row-gap: 3px;
        padding: 18px 0;
        border-bottom: 1px solid var(--color-hairline);

        &:first-child {
          border-top: 1px solid var(--color-hairline);
        }
      }

      .views-field-title {
        grid-area: title;

        a {
          font-family: var(--font-display);
          font-size: 17px;
          color: var(--color-ink);
          text-decoration: none;
          transition: color 0.2s ease;
          &:hover {
            color: var(--color-grey);
          }
        }
      }

      .views-field-field-verdict {
        grid-area: verdict;
        font-family: var(--font-body);
        font-size: 12px;
        color: var(--color-ink);
        align-self: start;
        white-space: nowrap;
      }

      .views-field-field-creator,
      .views-field-field-type-media {
        grid-area: meta;
        display: inline;
        font-family: var(--font-body);
        font-size: 12px;
        color: var(--color-grey-light);
      }

      .views-field-field-type-media::before {
        content: " — ";
      }
    }
  }
}

/* ==========================================================================
   Fiche détail Media
   ========================================================================== */
.media-detail {
  max-width: 500px;
}

.media-detail__title {
  font-size: 24px;
  line-height: 1.28;
  margin: 16px 0 20px;
}

.media-detail__verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-ink);
  margin-bottom: 28px;
}

.media-detail__verdict .field--name-field-verdict,
.media-detail__date .field--name-field-date-consumed {
  display: inline;
}

.verdict-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-ink);
  flex-shrink: 0;
}

.media-detail__date {
  color: var(--color-grey-light);
  margin-left: 4px;
}

.media-detail__note {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.78;
  color: #3a3835;
}

.media-detail__note p {
  margin: 0 0 20px;
}

@media (min-width: 768px) {
  .media-detail__title {
    font-size: 29px;
  }
}

/* ==========================================================================
   Flux Now (Views)
   ========================================================================== */
#block-alma-content {
  .views-element-container {
    .now-feed {
      max-width: 480px;
      .views-row {
        margin-bottom: 32px;
        .views-field-created {
          display: block;
          font-family: var(--font-body);
          font-size: 11px;
          letter-spacing: 0.06em;
          color: var(--color-grey-light);
          margin-bottom: 8px;
        }
        .views-field-field-now-body {
          display: block;
          font-family: var(--font-display);
          font-size: 16px;
          line-height: 1.6;
          color: var(--color-ink);
        }
        p {
          margin: 0;
        }
      }
    }
  }
}