@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; }
  }

  .lg-hero {
    border-radius: 14px;
    background:
      radial-gradient(ellipse 70% 130% at 92% -20%,
        color-mix(in oklch, var(--or) 22%, transparent), transparent 62%),
      linear-gradient(158deg, var(--au-encre), var(--au-encre2));
    color: #fff;
    padding: clamp(26px, 4cqi, 44px) clamp(20px, 4cqi, 46px);
    margin-block-end: 20px;

    & h1 {
      font-family: "Archivo", sans-serif;
      font-size: clamp(25px, 4cqi, 38px);
      font-weight: 800;
      letter-spacing: -.025em;
      margin: 0;
    }

    & .sous {
      color: oklch(88% 0.012 245);
      font-size: clamp(14px, 1.5cqi, 15.5px);
      line-height: 1.6;
      max-width: 72ch;
      margin: 13px 0 0;
    }

    & .maj {
      font-size: 12px;
      color: oklch(75% 0.014 245);
      margin: 16px 0 0;
    }
  }

  .lg-id {
    font-style: normal;
    font-size: 13px;
    line-height: 1.65;
    color: oklch(86% 0.012 245);
    margin-block-start: 18px;
    padding-block-start: 16px;
    border-block-start: 1px solid oklch(100% 0 0 / 0.14);

    & b { color: #fff; }
    & a { color: oklch(88% 0.012 245); text-decoration: underline; }
  }

  .lg-todo {
    font-size: 13px;
    line-height: 1.55;
    margin-block-start: 16px;
    padding: 13px 15px;
    border-radius: 9px;
    background: oklch(97% 0.05 85);
    border: 1px solid oklch(83% 0.11 85);
    color: oklch(42% 0.09 60);
  }

  .lg-doc {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
  }

  .lg-som {
    position: sticky;
    inset-block-start: 14px;
    background: #fff;
    border: 1px solid var(--au-bord);
    border-radius: 12px;
    padding: 16px 6px 16px 16px;
    max-height: calc(100vh - 28px);
    overflow-y: auto;

    & b {
      display: block;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--ink3);
      margin-block-end: 10px;
    }

    & ol {
      margin: 0;
      padding: 0;
      list-style: none;
      counter-reset: so;
    }

    & li { counter-increment: so; }

    & a {
      display: block;
      padding: 5px 8px 5px 0;
      font-size: 12.5px;
      line-height: 1.4;
      color: var(--ink2);
      text-decoration: none;
      border-inline-start: 2px solid transparent;
      padding-inline-start: 10px;

      &::before {
        content: counter(so) ". ";
        color: var(--ink3);
      }

      &:hover {
        color: var(--ink);
        text-decoration: none;
        border-inline-start-color: var(--au-bord);
      }

      &.on {
        color: var(--ink);
        font-weight: 600;
        border-inline-start-color: var(--or);
      }
    }
  }

  .lg-corps {
    background: #fff;
    border: 1px solid var(--au-bord);
    border-radius: 12px;
    padding: clamp(20px, 3cqi, 34px) clamp(20px, 3.4cqi, 40px);

    & > section {
      padding-block: 22px;
      border-block-end: 1px solid color-mix(in oklch, var(--au-bord) 55%, #fff);
      scroll-margin-block-start: 18px;

      &:first-of-type { padding-block-start: 0; }
      &:last-of-type { border-block-end: 0; padding-block-end: 0; }
    }

    & h2 {
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -.01em;
      margin: 0 0 9px;
      display: flex;
      gap: 10px;

      & .n {
        color: var(--ink3);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        flex: none;
      }
    }

    & p {
      margin: 0;
      font-size: 14px;
      line-height: 1.7;
      color: var(--ink2);
      max-width: 88ch;
    }
  }

  .ckb {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 900;
    background: #fff;
    border-block-start: 1px solid var(--au-bord);
    box-shadow: 0 -6px 26px oklch(20% 0.02 250 / 0.13);
    padding: 16px 14px;

    & .in {
      max-width: 1320px;
      margin: 0 auto;
      display: grid;
      gap: 13px;
    }

    & .tx b { display: block; font-size: 14.5px; margin-block-end: 4px; }

    & .tx p {
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
      color: var(--ink2);
      max-width: 92ch;
    }

    & .tx a { font-weight: 600; }

    & .det {
      display: grid;
      gap: 9px;
      padding: 13px;
      background: var(--au-doux);
      border: 1px solid var(--au-bord);
      border-radius: 9px;

      & label {
        display: grid;
        grid-template-columns: 17px 1fr;
        gap: 9px;
        align-items: start;
        font-size: 12.5px;
        line-height: 1.5;
        color: var(--ink2);
        cursor: pointer;
      }

      & label.fixe { cursor: default; opacity: .75; }

      & input { margin-block-start: 2px; accent-color: var(--or); }

      & b { display: block; color: var(--ink); font-size: 13px; }
    }

    & .act {
      display: flex;
      gap: 9px;
      flex-wrap: wrap;
      justify-content: flex-end;

      & button {
        border-radius: 8px;
        padding: 10px 19px;
        font-size: 13.5px;
        font-weight: 700;
        cursor: pointer;
        border: 1px solid var(--line2);
        background: #fff;
        color: var(--ink);
      }

      & .sec:hover { border-color: var(--ink3); }

      & .prim {
        background: var(--or);
        border-color: var(--or2);
        color: #1A1205;

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

  @container auteur (width < 620px) {
    .ckb .act button { flex: 1 1 auto; }
  }

  .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; }
  }
}