/*
 * La feuille de tilttek.com : les jetons du thème de Tilttek, puis la mise en page du site.
 *
 * Hors couche, elle l'emporte sur les couches phil.* sans !important. Elle ne redéfinit aucun composant du kit : elle
 * change des jetons de phil-ux et place les parties du site. Les classes du site commencent par « site- ».
 */

/*
 * Le thème de Tilttek, tiré du logo et de son illustration : le jaune du « T » (#f6d84c, oklch(0.883 0.156 97)), le
 * gris anthracite et les gris bleutés (#a6a8b6, oklch(0.734 0.020 279)). Chaque ton garde la clarté que son numéro
 * dit, selon la règle de contraste de phil-ux : deux tons dont les numéros diffèrent de 50 atteignent 4.5:1. Les
 * paires du site sont mesurées dans docs/site/theme.md, en clair et en sombre.
 */
:root {
    --tilttek-yellow: oklch(0.883 0.156 97);

    --phil-brand-05: oklch(0.05 0.010 97);
    --phil-brand-10: oklch(0.10 0.020 97);
    --phil-brand-20: oklch(0.20 0.036 97);
    --phil-brand-30: oklch(0.30 0.054 97);
    --phil-brand-40: oklch(0.40 0.073 97);
    --phil-brand-50: oklch(0.50 0.091 97);
    --phil-brand-60: oklch(0.60 0.110 97);
    --phil-brand-70: oklch(0.70 0.128 97);
    --phil-brand-80: oklch(0.80 0.147 97);
    --phil-brand-90: oklch(0.90 0.142 97);
    --phil-brand-95: oklch(0.95 0.071 97);

    --phil-neutral-05: oklch(0.05 0.014 280);
    --phil-neutral-10: oklch(0.10 0.014 280);
    --phil-neutral-20: oklch(0.20 0.014 280);
    --phil-neutral-30: oklch(0.30 0.014 280);
    --phil-neutral-40: oklch(0.40 0.014 280);
    --phil-neutral-50: oklch(0.50 0.014 280);
    --phil-neutral-60: oklch(0.60 0.014 280);
    --phil-neutral-70: oklch(0.70 0.014 280);
    --phil-neutral-80: oklch(0.80 0.014 280);
    --phil-neutral-90: oklch(0.90 0.014 280);
    --phil-neutral-95: oklch(0.95 0.014 280);
    --phil-neutral-99: oklch(0.99 0.004 280);

    /* Le jaune du logo en accent, dans les deux thèmes, toujours sous un texte anthracite. */
    --phil-color-brand-fill-loud: var(--tilttek-yellow);
    --phil-color-brand-on-loud: var(--phil-neutral-10);
    --phil-color-brand-border-loud: light-dark(var(--phil-brand-50), var(--phil-brand-70));
    --phil-color-link: light-dark(var(--phil-brand-40), var(--tilttek-yellow));
}

body {
    margin: 0;
    background: var(--phil-color-surface);
    color: var(--phil-color-text);
}

/* L'en-tête : le logo, la navigation, le thème et la langue. */
.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--phil-space-sm) var(--phil-space-lg);
    padding: var(--phil-space-sm) var(--phil-space-lg);
    border-block-end: var(--phil-border-sm) solid var(--phil-color-border);
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--phil-space-xs);
    font-weight: 700;
    color: inherit;
    text-decoration: none;
}

.site-brand img {
    block-size: 2rem;
    inline-size: auto;
}

.site-header nav {
    flex: 1 1 auto;
}

.site-header nav ul {
    margin: 0;
}

.site-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--phil-space-sm);
}

.site-main {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 84rem;
    margin-inline: auto;
    padding: var(--phil-space-lg);
}

.site-footer {
    padding: var(--phil-space-lg);
    border-block-start: var(--phil-border-sm) solid var(--phil-color-border);
    color: var(--phil-color-text-muted);
}

.site-footer nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--phil-space-md);
    margin: 0 0 var(--phil-space-sm);
    padding: 0;
    list-style: none;
}

.site-intro {
    max-inline-size: var(--phil-measure);
    margin-block-end: var(--phil-space-xl);
}

.site-intro p {
    color: var(--phil-color-text-muted);
    font-size: var(--phil-text-lg);
}

/* L'accueil : le logo et l'accroche à côté de l'illustration, puis les sections. */
.site-hero {
    display: grid;
    gap: var(--phil-space-lg);
    align-items: center;
    margin-block-end: var(--phil-space-2xl);
}

@media (width >= 60rem) {
    .site-hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.site-hero h1 {
    margin-block: var(--phil-space-sm);
}

.site-logo {
    display: block;
    inline-size: min(100%, 22rem);
    block-size: auto;
}

.site-hero figure {
    margin: 0;
}

/* L'illustration est dessinée pour un fond noir, comme la page « bientôt ». */
.site-hero figure img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--phil-radius-lg);
    background: var(--phil-neutral-05);
}

.site-lede {
    font-size: var(--phil-text-lg);
    color: var(--phil-color-text-muted);
}

.site-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--phil-space-sm);
    margin: var(--phil-space-md) 0 0;
    padding: 0;
    list-style: none;
}

.site-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--phil-space-md) var(--phil-space-xl);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--phil-text-lg);
}

.site-numbers strong {
    font-size: var(--phil-text-2xl);
}

.site-section {
    margin-block-end: var(--phil-space-2xl);
}

.site-section > :is(p, ul):not(.site-cards) {
    max-inline-size: var(--phil-measure);
}

.site-section .site-cards {
    margin-block: var(--phil-space-md);
}

/* Les nouveautés : la dernière en tête du catalogue, toutes sur leur page. */
.site-latest {
    max-inline-size: var(--phil-measure);
    margin-block-end: var(--phil-space-2xl);
    padding: var(--phil-space-md);
    border: var(--phil-border-sm) solid var(--phil-color-border);
    border-radius: var(--phil-radius-lg);
    background: var(--phil-color-surface-raised);
}

.site-latest > h2 {
    margin-block: 0 var(--phil-space-sm);
    font-size: var(--phil-text-lg);
}

.site-news {
    max-inline-size: var(--phil-measure);
    margin-block-end: var(--phil-space-xl);
}

.site-news > :is(h2, h3) {
    margin-block: 0 var(--phil-space-xs);
}

.site-news time {
    color: var(--phil-color-text-muted);
}

/* Les familles du catalogue, chacune une grille de cartes. */
.site-theme {
    margin-block-end: var(--phil-space-2xl);
}

.site-theme > h2 {
    margin-block-end: var(--phil-space-md);
}

.site-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: var(--phil-space-md);
    padding: 0;
    list-style: none;
}

.site-card {
    display: flex;
    flex-direction: column;
    gap: var(--phil-space-xs);
    padding: var(--phil-space-md);
    border: var(--phil-border-sm) solid var(--phil-color-border);
    border-radius: var(--phil-radius-lg);
    background: var(--phil-color-surface-raised);
}

.site-card :is(h2, h3) {
    margin: 0;
    font-size: var(--phil-text-lg);
}

.site-card p {
    margin: 0;
    color: var(--phil-color-text-muted);
}

.site-card ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--phil-space-xs);
    margin: auto 0 0;
    padding: 0;
    list-style: none;
}

/* La page d'un paquet ou d'une doc : le contenu, puis la colonne de ses repères. */
.site-page {
    display: grid;
    gap: var(--phil-space-xl);
    grid-template-columns: minmax(0, 1fr);
}

/* Sur un petit écran, la liste des pages suit le contenu au lieu de le repousser sous elle. */
.site-page.hasNavFirst > aside {
    order: 2;
}

@media (width >= 60rem) {
    .site-page.hasNavFirst > aside {
        order: 0;
    }

    .site-page {
        grid-template-columns: minmax(0, 1fr) 18rem;
    }

    .site-page.hasNavFirst {
        grid-template-columns: 16rem minmax(0, 1fr);
    }
}

.site-page > aside {
    display: flex;
    flex-direction: column;
    gap: var(--phil-space-lg);
    font-size: var(--phil-text-sm);
}

.site-page > aside h2 {
    margin-block-end: var(--phil-space-xs);
    font-size: var(--phil-text-md);
}

.site-page > aside ul {
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
}

.site-page > aside nav ul {
    display: block;
}

.site-page > aside nav a {
    min-block-size: 1.5rem;
}

.site-page > aside li + li {
    margin-block-start: var(--phil-space-3xs);
}

.site-page > aside a[aria-current] {
    font-weight: 700;
    color: var(--phil-color-text);
}

.site-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--phil-space-sm);
}

.site-title h1 {
    margin: 0;
}

.site-tagline {
    font-size: var(--phil-text-lg);
    color: var(--phil-color-text-muted);
}

.site-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--phil-space-2xs) var(--phil-space-md);
    margin: 0;
}

.site-facts dt {
    color: var(--phil-color-text-muted);
}

.site-facts dd {
    margin: 0;
}

.site-command {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--phil-space-xs);
}

.site-command pre {
    flex: 1 1 auto;
    margin: 0;
}

.site-pager {
    display: flex;
    justify-content: space-between;
    gap: var(--phil-space-md);
    margin-block-start: var(--phil-space-2xl);
    padding-block-start: var(--phil-space-md);
    border-block-start: var(--phil-border-sm) solid var(--phil-color-border);
}

.site-pager a:last-child {
    margin-inline-start: auto;
    text-align: end;
}

/* La démo de dés : le formulaire, les exemples, puis le résultat. */
.site-dice {
    display: grid;
    gap: var(--phil-space-xl);
    max-inline-size: var(--phil-measure);
}

.site-dice form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--phil-space-sm);
}

.site-dice form > div {
    display: flex;
    flex: 1 1 16rem;
    flex-direction: column;
    gap: var(--phil-space-3xs);
}

.site-dice input[name="expression"] {
    font-family: var(--phil-font-mono);
    font-size: var(--phil-text-lg);
}

.site-examples ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--phil-space-xs) var(--phil-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-examples code {
    font-size: var(--phil-text-md);
}

.site-result {
    padding: var(--phil-space-md);
    border: var(--phil-border-sm) solid var(--phil-color-border);
    border-radius: var(--phil-radius-lg);
    background: var(--phil-color-surface-raised);
}

.site-result h2 {
    margin-block-start: 0;
}

.site-result .site-total {
    margin-block: 0 var(--phil-space-sm);
    font-size: var(--phil-text-2xl);
    font-weight: 700;
}

/* Le détail de tilttek/dice-bundle : chaque dé dit sa face et son état en mots, le style ne fait que les montrer. */
.tilttek-dice-summary {
    margin-block: 0 var(--phil-space-xs);
}

.tilttek-dice-set {
    display: flex;
    flex-wrap: wrap;
    gap: var(--phil-space-xs);
    margin: 0 0 var(--phil-space-sm);
    padding: 0;
    list-style: none;
}

.tilttek-dice-die {
    min-inline-size: 2.5rem;
    padding: var(--phil-space-3xs) var(--phil-space-xs);
    border: var(--phil-border-sm) solid var(--phil-color-brand-border-loud);
    border-radius: var(--phil-radius-md);
    background: var(--phil-color-surface);
    text-align: center;
    font-family: var(--phil-font-mono);
}

.tilttek-dice-die:is(.is-dropped, .is-rerolled) {
    border-style: dashed;
    color: var(--phil-color-text-muted);
}

.tilttek-dice-die.is-exploded {
    background: var(--phil-color-brand-fill-quiet);
    color: var(--phil-color-brand-on-quiet);
}

.tilttek-dice-state {
    font-family: var(--phil-font-sans);
    font-size: var(--phil-text-sm);
}