// Couleurs
$paper: #fbf8f0;
$paper-soft: #f3eee4;
$paper-edge: #e7dfcf;
$ink: #28231d;
$heading: #3d2c20;
$muted: #6c6257;
$cuneiform: #5b5046;
$accent: #7a3f22;
$rule: #d8cdbb;

// Typographie et mise en page
$font-text: Georgia, "Times New Roman", serif;
$font-cuneiform: "Assurbanipal", "Noto Sans Cuneiform", "Segoe UI Historic", sans-serif;
$font-code: ui-monospace, "Cascadia Code", "Liberation Mono", monospace;
$content-width: 50rem;

// Police cunéiforme
@font-face {
    font-family: "Assurbanipal";
    src: url("fonts/assurbanipal.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    unicode-range: U+12000-123FF, U+12400-1247F;
}

// Base
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: light;
}

body {
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    flex-direction: column;
    color: $ink;
    background: $paper;
    font-family: $font-text;
    font-size: clamp(1.0625rem, 1.02rem + 0.18vw, 1.125rem);
    line-height: 1.7;
    text-rendering: optimizeLegibility;
}

::selection {
    color: $ink;
    background: $paper-edge;
}

a {
    color: $accent;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;

    &:hover {
        text-decoration-thickness: 0.14em;
    }

    &:focus-visible {
        outline: 3px solid rgba($accent, 0.35);
        outline-offset: 3px;
    }
}

[id] {
    scroll-margin-top: 2rem;
}

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

// Mise en page générale
.container {
    width: min(100% - 2rem, $content-width);
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    left: 0.75rem;
    top: 0.75rem;
    z-index: 100;
    padding: 0.65rem 0.95rem;
    color: $paper;
    background: $ink;
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-180%);

    &:focus {
        transform: translateY(0);
    }
}

.site-main {
    padding-block: 2.75rem 4.25rem;
    flex: 1 0 auto;
}

// En-tête et navigation
.site-header {
    border-bottom: 1px solid $rule;
    background: rgba(255, 255, 255, 0.35);

    &__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        padding-block: 1.15rem;
    }
}

.site-title {
    display: inline-flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
    color: $ink;
    line-height: 1.08;
    text-decoration: none;
    white-space: nowrap;

    &__text {
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    &__cuneiform {
        color: $cuneiform;
        font-family: $font-cuneiform;
        font-size: 1.52rem;
        font-synthesis: none;
        font-weight: 400;
        letter-spacing: 0.1em;
        line-height: 1;
    }

    &:hover &__cuneiform,
    &:focus-visible &__cuneiform {
        color: $accent;
    }
}

.site-nav {
    ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 1rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    a {
        display: inline-block;
        padding-block: 0.3rem;
        border-bottom: 2px solid transparent;
        color: $muted;
        font-size: 0.95rem;
        font-weight: 600;
        line-height: 1.25;
        text-decoration: none;

        &:hover,
        &:focus-visible {
            color: $accent;
        }

        &[aria-current] {
            border-bottom-color: $accent;
            color: $ink;
        }
    }
}

// Titres et contenu courant
h1,
h2,
h3 {
    color: $heading;
    line-height: 1.22;
}

h1 {
    margin: 0;
    font-size: clamp(2.15rem, 5vw, 3rem);
    letter-spacing: -0.025em;
}

h2 {
    margin: 2.4rem 0 0;
    font-size: clamp(1.4rem, 2vw, 1.58rem);
    letter-spacing: -0.012em;
}

h3 {
    margin: 1.85rem 0 0;
    font-size: 1.24rem;
}

p,
ul,
ol,
dl,
table,
pre,
blockquote {
    margin-block: 1rem;
}

ul,
ol {
    padding-left: 1.45rem;
}

li + li {
    margin-top: 0.18rem;
}

hr {
    height: 1px;
    margin-block: 2.25rem;
    border: 0;
    background: $rule;
}

// En-têtes de page et métadonnées
.entry-header {
    margin-bottom: 2rem;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid $rule;

    > :last-child {
        margin-bottom: 0;
    }
}

.entry-description,
.section-description {
    max-width: 72ch;
    color: $muted;
    font-size: 1.12rem;
    line-height: 1.62;
}

.entry-date,
.entry-list__meta {
    color: $muted;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
}

.metadata {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.38rem 1rem;
    margin-block: 1.3rem 0;

    dt {
        color: $muted;
        font-weight: 700;
    }

    dd {
        min-width: 0;
        margin: 0;
    }
}

// Bannière facultative des articles
.article-cover {
    margin: 0 0 1.6rem;

    img {
        width: 100%;
        aspect-ratio: 16 / 7;
        border: 1px solid $paper-edge;
        object-fit: cover;
        object-position: center;
    }

    figcaption {
        margin-top: 0.25rem;
        color: $muted;
        font-size: 0.8rem;
        text-align: right;
    }
}

// Listes de contenus
.entry-list {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;

    li {
        margin: 0;
        padding-block: 0.82rem;
        border-bottom: 1px solid $paper-edge;
    }

    a {
        font-weight: 700;
    }

    &__meta {
        margin-top: 0.12rem;

        a {
            color: inherit;
            font-weight: 600;

            &:hover,
            &:focus-visible {
                color: $accent;
            }
        }
    }
}

// Page d’accueil
.home-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 13.75rem;
    gap: 2.25rem;
    align-items: start;

    &__text > :first-child {
        margin-top: 0;
    }

    &__figure {
        margin: 0;
        text-align: center;
    }

    &__image {
        width: 100%;
        filter: drop-shadow(0 0.4rem 0.7rem rgba($ink, 0.2));
    }

    &__caption {
        margin-top: 0.55rem;
        color: $muted;
        font-size: 0.78rem;
        line-height: 1.4;
    }
}

.home-latest,
.home-directory,
.home-about {
    margin-top: 2.4rem;

    > h2 {
        margin-top: 0;
    }
}

.home-latest {
    &__entry {
        margin-top: 1.15rem;
        padding: 1.1rem 1.25rem;
        border: 1px solid $rule;
        background: rgba($accent, 0.035);
    }

    h3 {
        margin: 0;
    }

    .entry-date {
        margin: 0.2rem 0 0;
    }

    &__description {
        margin: 0.75rem 0 0;
    }

    &__link {
        display: inline-block;
        margin-top: 0.75rem;
        font-weight: 700;
    }
}

.home-directory {
    &__list {
        margin: 1.15rem 0 0;
        padding: 0;
        border-top: 1px solid $paper-edge;
        list-style: none;

        li {
            display: grid;
            grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
            gap: 1rem;
            margin: 0;
            padding-block: 0.82rem;
            border-bottom: 1px solid $paper-edge;
        }

        a {
            font-weight: 700;
        }

        p {
            margin: 0;
            color: $muted;
        }
    }
}

// Navigation secondaire et liens de contexte
.section-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-block: 2rem 2.5rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid $rule;
    background: rgba($accent, 0.035);

    h2 {
        margin: 0 0 0.2rem;
        font-size: 1.2rem;
    }

    p {
        margin: 0;
        color: $muted;
    }

    &__link {
        flex: 0 0 auto;
        font-weight: 700;
    }
}

.context-link {
    margin: 0 0 1rem;
    font-size: 0.95rem;

    a {
        color: $muted;
        text-decoration: none;

        &:hover,
        &:focus-visible {
            color: $accent;
            text-decoration: underline;
        }
    }
}

// Cunéiforme
.cuneiform {
    display: inline-block;
    margin-right: 0.25em;
    font-family: $font-cuneiform;
    font-synthesis: none;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1;
    vertical-align: -0.08em;
}

// Tableaux, citations et code
table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

th,
td {
    padding: 0.58rem 0.72rem;
    border: 1px solid $rule;
    text-align: left;
    vertical-align: top;
}

th {
    color: $heading;
    background: rgba($accent, 0.06);
}

tbody tr:nth-child(even) {
    background: rgba($accent, 0.018);
}

blockquote {
    margin-inline: 0;
    padding: 0.05rem 0 0.05rem 1rem;
    border-left: 0.2rem solid $rule;
    color: $muted;

    > :first-child {
        margin-top: 0;
    }

    > :last-child {
        margin-bottom: 0;
    }
}

code {
    padding: 0.08em 0.28em;
    border: 1px solid $paper-edge;
    background: $paper-soft;
    font-family: $font-code;
    font-size: 0.9em;
    overflow-wrap: anywhere;
}

pre {
    overflow-x: auto;
    padding: 1rem 1.1rem;
    border: 1px solid $paper-edge;
    background: $paper-soft;
    line-height: 1.55;
    tab-size: 4;

    code {
        padding: 0;
        border: 0;
        background: transparent;
        font-size: 0.88rem;
        overflow-wrap: normal;
    }
}

// Pied de page
.site-footer {
    padding-block: 1.5rem 2rem;
    border-top: 1px solid $rule;
    color: $muted;
    font-size: 0.9rem;

    &__inner {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }

    &__links {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 1rem 2rem;

        nav {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 1rem;
            text-align: right;
        }
    }

    p,
    &__contact {
        margin: 0;
    }

    &__contact {
        font-style: normal;

        > a {
            display: inline-flex;
            align-items: center;
            padding: 0.32rem 0.72rem;
            border: 1px solid rgba($accent, 0.5);
            border-radius: 0.3rem;
            color: $accent;
            background: rgba($accent, 0.05);
            font-size: 0.95rem;
            font-weight: 700;
            line-height: 1.2;
            text-decoration: none;

            &:hover,
            &:focus-visible {
                border-color: $accent;
                color: $heading;
                background: rgba($accent, 0.12);
            }
        }
    }

    small {
        font-size: inherit;
    }
}

// Numéros de ligne générés par la coloration syntaxique de Zola
.giallo-l {
    display: inline-block;
    min-height: 1lh;
    width: 100%;
}

.giallo-ln {
    display: inline-block;
    min-width: 3ch;
    margin-right: 0.4em;
    padding-right: 0.4em;
    user-select: none;
    text-align: right;
    opacity: 0.72;
}

// Petits écrans
@media (max-width: 45rem) {
    .container {
        width: min(100% - 1.5rem, $content-width);
    }

    .site-header__inner {
        align-items: center;
        flex-direction: column;
        gap: 0.55rem;
        padding-block: 1rem;
        text-align: center;
    }

    .site-title {
        align-items: center;
    }

    .site-nav {
        width: 100%;

        ul {
            justify-content: center;
            gap: 0.1rem 0.85rem;
        }
    }

    .site-main {
        padding-block: 2.15rem 3.25rem;
    }

    h1 {
        font-size: clamp(2rem, 10vw, 2.55rem);
    }

    .section-tools {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }

    .home-intro {
        grid-template-columns: 1fr;
        gap: 1.5rem;

        &__figure {
            width: min(100%, 13.75rem);
            margin-inline: auto;
        }
    }

    .home-directory__list li {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .metadata {
        grid-template-columns: 1fr;
        gap: 0.1rem;

        dd + dt {
            margin-top: 0.65rem;
        }
    }

    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    .site-footer__inner {
        align-items: center;
        text-align: center;
    }

    .site-footer__links {
        align-items: center;
        flex-direction: column;
        gap: 0.75rem;

        nav {
            justify-content: center;
            text-align: center;
        }
    }

    .site-footer__license {
        width: 100%;
        text-align: center;
    }
}

// Impression
@media print {
    @page {
        margin: 18mm;
    }

    html,
    body {
        color: #000;
        background: #fff;
    }

    body {
        display: block;
        min-height: auto;
        font-size: 11pt;
        line-height: 1.5;
    }

    .container {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .skip-link,
    .site-nav,
    .site-footer,
    .section-tools,
    .context-link {
        display: none !important;
    }

    .home-intro__image {
        filter: none;
    }

    .site-header {
        border-bottom: 1px solid #999;
        background: transparent;

        &__inner {
            display: block;
            padding-block: 0 0.8rem;
        }
    }

    .site-title {
        align-items: flex-start;
        color: #000;

        &__cuneiform {
            color: #333;
        }
    }

    .site-main {
        padding-block: 1.2rem 0;
    }

    h1,
    h2,
    h3 {
        color: #000;
        break-after: avoid-page;
    }

    p,
    li,
    blockquote {
        orphans: 3;
        widows: 3;
    }

    .entry-header,
    .article-cover,
    .entry-list li,
    table,
    blockquote,
    pre,
    img {
        break-inside: avoid;
    }

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

    table {
        display: table;
        max-width: none;
        overflow: visible;
        white-space: normal;
    }

    thead {
        display: table-header-group;
    }

    th {
        background: #eee;
        print-color-adjust: exact;
    }

    pre {
        overflow: visible;
        border-color: #aaa;
        background: #fff;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }
}