@layer base, composants, ecrans;

@layer base {
  .au {
    --au-encre: oklch(21% 0.025 245);
    --au-encre2: oklch(15% 0.022 245);
    --au-vert: oklch(52% 0.13 152);
    --au-vert-clair: oklch(96% 0.025 152);
    --au-vert-bord: oklch(86% 0.05 152);
    --au-bord: oklch(89% 0.008 250);
    --au-doux: oklch(97.5% 0.004 250);
    container-type: inline-size;
    container-name: auteur;
    margin-block-end: 26px;
  }

  .au section { margin-block-end: 18px; }

  .au h2 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0 0 14px;
  }
}

@layer composants {

  .au-hero {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background:
      radial-gradient(ellipse 80% 120% at 88% -10%,
        color-mix(in oklch, var(--or) 30%, transparent), transparent 60%),
      linear-gradient(160deg, var(--au-encre), var(--au-encre2));
    color: #fff;
    padding: clamp(26px, 5cqi, 52px) clamp(20px, 4cqi, 46px);

    & h1 {
      font-family: "Archivo", sans-serif;
      font-size: clamp(27px, 5.2cqi, 47px);
      font-weight: 800;
      line-height: 1.04;
      letter-spacing: -.028em;
      margin: 0;
      max-width: 19ch;
    }

    & .sous {
      color: oklch(88% 0.012 245);
      font-size: clamp(14px, 1.5cqi, 16px);
      line-height: 1.55;
      max-width: 62ch;
      margin: 15px 0 0;
    }
  }

  .au-hero .actes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 13px;
    margin-block-start: 26px;

    & .prim {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: var(--or);
      border: 1px solid var(--or2);
      border-radius: 22px;
      padding: 13px 27px;
      font-size: 14.5px;
      font-weight: 700;
      color: #1A1205;
      text-decoration: none;
      transition: transform .12s, background .12s;

      &:hover { background: var(--or2); text-decoration: none; transform: translateY(-1px); }
    }

    & .sec {
      color: oklch(88% 0.012 245);
      font-size: 13.5px;
      font-weight: 600;
      text-decoration: none;
      border-bottom: 1px solid oklch(100% 0 0 / 0.28);
      padding-block-end: 2px;

      &:hover { color: #fff; text-decoration: none; border-color: #fff; }
    }
  }

  .au-hero .jalons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 34px;
    margin-block-start: 30px;
    padding-block-start: 22px;
    border-block-start: 1px solid oklch(100% 0 0 / 0.14);

    & > div { min-width: 92px; }

    & b {
      display: block;
      font-family: "Archivo", sans-serif;
      font-size: 21px;
      font-weight: 700;
      letter-spacing: -.02em;
    }

    & span {
      display: block;
      font-size: 11.5px;
      color: oklch(78% 0.014 245);
      margin-block-start: 2px;
    }
  }

  .au-duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 15px;
  }

  .au-c {
    background: #fff;
    border: 1px solid var(--au-bord);
    border-radius: 12px;
    padding: 20px 21px;

    & .chiffre {
      display: flex;
      align-items: baseline;
      gap: 11px;
    }

    & .n {
      font-family: "Archivo", sans-serif;
      font-size: 38px;
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1;
    }

    & .lib { font-size: 15px; font-weight: 700; }

    & p {
      color: var(--ink2);
      font-size: 13.5px;
      line-height: 1.5;
      margin: 11px 0 13px;
    }

    & .pied {
      border-block-start: 1px solid var(--au-bord);
      padding-block-start: 11px;
      font-size: 13px;
      color: var(--ink2);
    }

    &.vedette {
      background: var(--au-vert-clair);
      border-color: var(--au-vert-bord);

      & .n { color: var(--au-vert); }
      & .pied { border-block-start-color: var(--au-vert-bord); }
    }
  }

  .au-panneau {
    background: #fff;
    border: 1px solid var(--au-bord);
    border-radius: 12px;
    padding: 22px 23px;
  }

  .au-cmp {
    display: grid;
    gap: 13px;
    margin-block-start: 4px;
  }

  .au-b {
    display: grid;
    grid-template-columns: minmax(118px, 26%) 1fr auto;
    align-items: center;
    gap: 14px;

    & .qui { font-size: 13px; font-weight: 600; }

    & .piste {
      display: block;
      height: 26px;
      background: var(--au-doux);
      border: 1px solid var(--au-bord);
      border-radius: 6px;
      overflow: hidden;
    }

    & .barre {
      display: block;
      height: 100%;
      width: calc(var(--pct) * 1%);
      border-radius: 5px 0 0 5px;
      background: color-mix(in oklch, var(--ink2) 62%, #fff);
    }

    & .val {
      font-family: "Archivo", sans-serif;
      font-size: 15px;
      font-weight: 700;
      white-space: nowrap;
      min-width: 74px;
      text-align: right;
    }

    & .perte { font-size: 11.5px; color: var(--ink3); font-weight: 400; }

    &.nous {
      & .qui { font-weight: 700; }
      & .barre { background: linear-gradient(90deg, var(--au-vert),
          color-mix(in oklch, var(--au-vert) 76%, var(--or))); }
      & .val { color: var(--au-vert); }
    }

    &.soi {
      & .qui { color: var(--ink2); }

      & .barre {
        background: repeating-linear-gradient(135deg,
          var(--au-doux) 0 7px, color-mix(in oklch, var(--ink3) 26%, #fff) 7px 14px);
      }

      & .val { color: var(--ink2); font-weight: 600; }
    }
  }

  .au-etapes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 15px;
    counter-reset: et;
  }

  .au-e {
    position: relative;
    padding-block-start: 38px;
    counter-increment: et;

    &::before {
      content: counter(et);
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      width: 27px;
      height: 27px;
      border-radius: 50%;
      background: var(--au-encre);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 12.5px;
      font-weight: 700;
    }

    &::after {
      content: "";
      position: absolute;
      inset-block-start: 13px;
      inset-inline-start: 34px;
      inset-inline-end: -15px;
      height: 1px;
      background: var(--au-bord);
    }

    &:last-child::after { display: none; }

    & p { margin: 0; font-size: 13.5px; color: var(--ink2); line-height: 1.5; }
  }

  .au-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 10px 22px;
    margin: 0;
    padding: 0;
    list-style: none;

    & li {
      display: grid;
      grid-template-columns: 19px 1fr;
      gap: 9px;
      align-items: start;
      font-size: 13.5px;
      color: var(--ink2);
      line-height: 1.5;
    }

    & li::before {
      content: "\2713";
      color: var(--au-vert);
      font-weight: 700;
      font-size: 13px;
      line-height: 1.45;
    }
  }

  .tf-note {
    font-size: 12.5px;
    color: var(--ink2);
    margin: -6px 0 15px;
    max-width: 84ch;
    line-height: 1.5;
  }

  .tf-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 10px 26px;
  }

  table.tf {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;

    & th {
      text-align: right;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--ink3);
      padding: 0 10px 7px;
      border-block-end: 1px solid var(--au-bord);
      white-space: nowrap;
    }

    & th:first-child { text-align: left; }

    & td {
      text-align: right;
      font-size: 13px;
      padding: 7px 10px;
      border-block-end: 1px solid color-mix(in oklch, var(--au-bord) 55%, #fff);
      white-space: nowrap;
    }

    & tbody tr:last-child td { border-block-end: 0; }

    & tbody tr:hover td { background: var(--au-doux); }

    & .a { text-align: left; font-weight: 600; }
    & .f { color: var(--ink2); }
    & .p { font-weight: 700; }
  }

  .au-fin {
    border-radius: 14px;
    background: linear-gradient(150deg, var(--au-encre), var(--au-encre2));
    color: #fff;
    padding: clamp(24px, 3.4cqi, 38px) clamp(20px, 3.4cqi, 40px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    & .tx { max-width: 54ch; }

    & h2 {
      font-family: "Archivo", sans-serif;
      font-size: clamp(20px, 2.6cqi, 27px);
      font-weight: 700;
      letter-spacing: -.02em;
      margin: 0;
      color: #fff;
    }

    & p {
      color: oklch(85% 0.014 245);
      font-size: 13.5px;
      line-height: 1.55;
      margin: 9px 0 0;
    }

    & .prim {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: var(--or);
      border: 1px solid var(--or2);
      border-radius: 22px;
      padding: 13px 28px;
      font-size: 14.5px;
      font-weight: 700;
      color: #1A1205;
      text-decoration: none;
      white-space: nowrap;

      &:hover { background: var(--or2); text-decoration: none; }
    }
  }
}

@layer ecrans {
  @container auteur (width < 640px) {
    .au-e {
      padding-block-start: 0;
      padding-inline-start: 38px;

      &::after { display: none; }
    }

    .au-b {
      grid-template-columns: 1fr auto;

      & .piste { grid-column: 1 / -1; grid-row: 2; }
    }

    .au-hero .actes .prim { width: 100%; justify-content: center; }
  }

  @media (prefers-reduced-motion: reduce) {
    .au-hero .actes .prim { transition: none; }
  }
}