/* cie642.fr theme, ported from the previous site (design: JH Studio):
   clouds in the background, black text, big yellow titles, illustrations
   around the content, arrows to the neighbouring pages. */

@layer tokens {
  :root {
    color-scheme: light;

    --yellow: #faff84;
    --ink: #000;
    --paper: rgb(255 255 226 / 80%);
    --color-text: var(--ink);
    --color-text-muted: rgb(0 0 0 / 70%);
    --color-surface: #fff;
    --color-border: var(--ink);
    --color-accent: var(--ink);
    --color-on-accent: #fff;
    --color-focus: var(--ink);
    --font-body:
      "ITC Avant Garde Gothic Std Book Condensed", "Avenir Next Condensed",
      "Arial Narrow", system-ui, sans-serif;
    --radius-pill: 90px;
    --measure: 50rem;
  }
}

@layer base {
  /* The illustrations overflow on the sides: clip them (no sideways
     scrolling, even on touch screens). */
  html {
    overflow-x: clip;
  }

  body {
    overflow-x: clip;
    background: url("../images/nuages.webp") center / cover fixed;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  a.underlined,
  .prose a {
    text-decoration: underline;
  }
}

@layer layout {
  /* One column; the shared grid would shrink the content to fit. */
  body {
    display: block;
  }

  .site {
    position: relative;
    max-inline-size: 800px;
    margin: 100px auto 50px;
    padding: 0;
    text-align: center;
  }

  .site--wide {
    max-inline-size: 1220px;
  }

  @media (width <= 1024px) {
    .site {
      margin-block-start: 32px;
      padding-inline: 75px;
    }
  }

  @media (width <= 768px) {
    .site {
      margin-block-start: 16px;
      padding-inline: 55px;
    }
  }
}

@layer components {
  /* Menu */
  .menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 22px;
    line-height: 27px;
  }

  .menu__items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-self: stretch;
    justify-content: space-between;
    margin-block-start: 35px;

    a[aria-current="page"] {
      text-decoration: underline;
    }
  }

  @media (width <= 768px) {
    .menu__items {
      flex-direction: column;
      margin-block-start: 16px;

      a {
        padding-block: 10px;
      }
    }
  }

  /* Shared pieces */
  .ellipses {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-block: 175px 180px;

    span {
      inline-size: 10px;
      block-size: 10px;
      background: var(--ink);
      border-radius: 50%;
    }
  }

  .yellow-title,
  .page-title {
    margin: 0;
    font-size: 100px;
    font-weight: 900;
    line-height: 0.9;
    color: var(--yellow);
  }

  .page-title {
    margin-block-start: 80px;
  }

  .page-title--news {
    position: relative;
    z-index: 1;
    margin-block: 75px 0;
  }

  .pill {
    display: inline-block;
    padding: 15px 30px;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);

    &:hover,
    &:focus-visible {
      background: var(--yellow);
    }
  }

  .pill--large {
    padding: 23px 41px 25px;
    font-size: 24px;
    line-height: 30px;
  }

  @media (width <= 768px) {
    .ellipses {
      margin-block: 16px;
    }

    .yellow-title,
    .page-title {
      font-size: 41px;
    }

    .page-title {
      margin-block-start: 32px;
    }
  }

  /* Footer */
  .ladder {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
  }

  .ladder__text {
    font-size: 24px;
    font-weight: bold;
    line-height: 30px;
  }

  .footer__contacts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-block-start: 105px;
  }

  .footer__mail,
  .footer__phone {
    flex-basis: 200px;
    margin: 0;
  }

  .footer__mail {
    text-align: end;
  }

  .footer__phone {
    text-align: start;
  }

  .footer__socials {
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer__account {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    font-size: 14px;

    .button--link {
      color: inherit;
    }
  }

  @media (width <= 768px) {
    .footer__contacts {
      flex-direction: column;
      gap: 1rem;
    }

    .footer__mail,
    .footer__phone {
      flex-basis: auto;
      text-align: center;
    }
  }

  /* Arrows to the neighbouring pages */
  .arrow {
    position: fixed;
    inset-block-start: 45vh;
  }

  .arrow--left {
    inset-inline-start: 107px;
  }

  .arrow--right {
    inset-inline-end: 107px;
  }

  @media (width <= 1024px) {
    .arrow--left {
      inset-inline-start: 32px;
    }

    .arrow--right {
      inset-inline-end: 32px;
    }
  }

  @media (width <= 768px) {
    .arrow--left {
      inset-inline-start: 16px;
    }

    .arrow--right {
      inset-inline-end: 16px;
    }
  }

  /* Account and administration pages, readable over the clouds */
  .panel {
    margin-block-start: 2rem;
    padding: 2rem;
    text-align: start;
    background: rgb(255 255 255 / 92%);
    border-radius: 25px;
  }
}