/* ============================================================================
   Vitrine Avona Games
   ----------------------------------------------------------------------------
   Une table allumee dans une piece sombre.

   Toute lumiere de la page vient d'EN BAS, comme le halo d'une table. Il n'y a
   qu'une seule lueur par page. L'or n'est jamais un aplat : c'est une dorure a
   chaud, des traits et des lettres.
   ========================================================================== */

/* ── Fontes, auto-hebergees : aucune requete vers un tiers ────────────────── */

@font-face {
    font-family: 'Fraunces';
    src: url("../fonts/fraunces-latin-SfWU466.woff2") format('woff2-variations');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'Work Sans';
    src: url("../fonts/worksans-latin-shqi8Sk.woff2") format('woff2-variations');
    font-weight: 300 600;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* ── Jetons ───────────────────────────────────────────────────────────────── */

:root {
    /* La palette de la console, a l'identique. Aucun gris neutre, aucun noir
       pur, aucun blanc pur : les neutres sont tires vers le rouge. */
    --piece: #0d0709;
    --surface: #170f12;
    --surface-haute: #211519;
    --bordeaux: #7a2233;
    --bordeaux-profond: #5c1a2b;
    --or: #ffd97a;
    --or-logo: #c9a84f;
    --texte: #f5ece0;
    --texte-discret: #a08f85;

    /* Teinte de la page. Chaque fiche de jeu la remplace par son theme.accent. */
    --accent: #7a2233;

    --display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --courant: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fs-display: clamp(2.75rem, 6vw, 5rem);
    --fs-h1: clamp(2rem, 4vw, 3rem);
    --fs-h2: 1.75rem;
    --fs-h3: 1.25rem;
    --fs-corps: 1.0625rem;
    --fs-petit: 0.875rem;

    --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;  --sp-4: 2rem;
    --sp-5: 3rem;   --sp-6: 4rem;   --sp-7: 6rem;    --sp-8: 9rem;

    --r-sm: 6px;  --r-md: 12px;  --r-lg: 20px;

    --mesure: 34rem; /* ~68 caracteres */
    --largeur: 72rem;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

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

html { color-scheme: dark; }

body {
    margin: 0;
    background: var(--piece);
    color: var(--texte);
    font: 400 var(--fs-corps)/1.65 var(--courant);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--or);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection { background: var(--bordeaux); color: var(--texte); }

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 600;
    font-variation-settings: 'SOFT' 0, 'WONK' 0;
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin: 0;
    text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.coquille {
    width: min(100% - 2.5rem, var(--largeur));
    margin-inline: auto;
}

.mesure { max-width: var(--mesure); }

.discret { color: var(--texte-discret); }

.chiffres { font-variant-numeric: tabular-nums; }

/* ── La lueur : une seule par page, ancree en bas du bloc ─────────────────── */

.lueur {
    position: relative;
    isolation: isolate;
}

/* Les rayons restent nettement à l'intérieur de la boîte : un dégradé plus large
   que son élément est rogné par ses bords, et une lueur censée être ronde se
   retrouve avec deux arêtes verticales bien droites. */
.lueur::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5rem;
    width: min(150%, 90rem);
    height: min(66%, 36rem);
    transform: translateX(-50%);
    background:
        radial-gradient(30% 78% at 50% 100%,
            color-mix(in oklab, var(--or) 14%, transparent) 0%,
            transparent 70%),
        radial-gradient(46% 92% at 50% 100%,
            color-mix(in oklab, var(--accent) 45%, transparent) 0%,
            transparent 72%);
    z-index: -1;
    pointer-events: none;
}

/* ── Le chevron de couronne : le filet de section ─────────────────────────── */

.chevron {
    display: block;
    width: 84px;
    height: 16px;
    margin: var(--sp-2) auto;
    color: var(--or-logo);
    opacity: .75;
}

.chevron--large { width: 120px; }

/* ── En-tete ──────────────────────────────────────────────────────────────── */

.entete {
    position: relative;
    z-index: 2;
    padding-block: var(--sp-3);
}

.entete__rang {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.marque {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    font-family: var(--display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.marque img { width: 26px; height: auto; }

.nav {
    margin-left: auto;
    display: flex;
    gap: var(--sp-3);
    font-size: var(--fs-petit);
}

.nav a {
    text-decoration: none;
    color: var(--texte-discret);
    padding-block: .35rem;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}

.nav a:hover { color: var(--texte); }

.nav a[aria-current] {
    color: var(--or);
    border-bottom-color: var(--or);
}

/* ── Heros ────────────────────────────────────────────────────────────────── */

.heros {
    padding-block: clamp(var(--sp-5), 9vw, var(--sp-7)) 0;
    text-align: center;
}

.heros__titre {
    font-size: var(--fs-display);
    max-width: 18ch;
    margin-inline: auto;
}

/* La deuxieme ligne de l'accroche, en or : c'est la seule phrase doree du site. */
.heros__or {
    display: block;
    font-style: normal;
    color: var(--or);
}

.heros__sous {
    margin-top: var(--sp-3);
    max-width: 42ch;
    margin-inline: auto;
    color: var(--texte-discret);
    font-size: 1.125rem;
}

/* Des boites posees sur la table : legerement inclinees, qui se chevauchent.
   Une grille alignee dirait « catalogue » ; des boites de travers disent
   « on vient de jouer ». */
.boites {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: clamp(var(--sp-4), 6vw, var(--sp-6));
    padding-bottom: var(--sp-5);
}

/* `gap` refuse les valeurs négatives : le chevauchement passe donc par une
   marge, seule façon de faire se recouvrir des boîtes posées. */
.boite + .boite { margin-left: clamp(-4rem, -2.6vw, -1.25rem); }

.boite {
    flex: 0 0 auto;
    width: clamp(9rem, 19vw, 15rem);
    text-decoration: none;
    transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}

.boite img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-md);
    border: 1px solid rgb(245 236 224 / .12);
    /* Une ombre portée courte et dense, plus une ombre longue et diffuse : un
       objet posé sur une surface, pas une carte qui flotte. */
    box-shadow:
        0 .35rem .6rem -.2rem rgb(0 0 0 / .85),
        0 2rem 3.5rem -1rem rgb(0 0 0 / .7);
}

.boite:nth-child(1) { transform: rotate(-3.5deg) translateY(.75rem); z-index: 1; }
.boite:nth-child(2) { transform: rotate(1deg) scale(1.06); z-index: 3; }
.boite:nth-child(3) { transform: rotate(4deg) translateY(1rem); z-index: 2; }

.boite:nth-child(1):hover { transform: rotate(-3.5deg) translateY(0); }
.boite:nth-child(2):hover { transform: rotate(1deg) scale(1.1) translateY(-.5rem); }
.boite:nth-child(3):hover { transform: rotate(4deg) translateY(.25rem); }

.boite__nom {
    margin-top: var(--sp-2);
    font-family: var(--display);
    font-size: 1rem;
    text-align: center;
    color: var(--texte-discret);
    transition: color .18s ease;
}

.boite:hover .boite__nom { color: var(--or); }

/* Une seule boite : elle se redresse et grandit, plutot que de flotter seule
   et de travers au milieu d'un vide. */
.boites:has(.boite:only-child) .boite {
    width: clamp(12rem, 30vw, 21rem);
    transform: rotate(-1.5deg);
}

/* ── Sections ─────────────────────────────────────────────────────────────── */

.section {
    padding-block: var(--sp-6);
}

.section__titre {
    font-size: var(--fs-h1);
    margin-bottom: var(--sp-4);
}

/* Trois phrases pleine largeur separees par un filet. Pas trois cartes a
   icones : bordure, fond et ombre disent chacun « objet separe », les depenser
   ici aplatirait la hierarchie. */
.propositions {
    border-top: 1px solid rgb(201 168 79 / .22);
}

.proposition {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-5);
    padding-block: var(--sp-4);
    border-bottom: 1px solid rgb(201 168 79 / .22);
}

.proposition h3 {
    font-size: var(--fs-h3);
    color: var(--or);
}

.proposition p { color: var(--texte-discret); max-width: var(--mesure); }

/* ── Bande de dos de boite ────────────────────────────────────────────────── */

.bande {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bande li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--fs-petit);
    font-variant-numeric: tabular-nums;
    color: var(--texte-discret);
}

.bande svg {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    color: var(--or-logo);
}

.bande--fiche li { font-size: 1rem; color: var(--texte); }
.bande--fiche svg { width: 1.6rem; height: 1.6rem; }

/* ── Catalogue : une liste, pas une grille ────────────────────────────────── */

.filtres {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: var(--sp-5);
    padding: .3rem;
    border: 1px solid rgb(245 236 224 / .1);
    border-radius: var(--r-lg);
    background: var(--surface);
    width: fit-content;
    max-width: 100%;
}

.filtre {
    padding: .45rem 1rem;
    border-radius: var(--r-lg);
    text-decoration: none;
    font-size: var(--fs-petit);
    color: var(--texte-discret);
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
}

.filtre:hover { color: var(--texte); background: var(--surface-haute); }

.filtre[aria-current] {
    color: var(--or);
    background: var(--surface-haute);
    box-shadow: inset 0 0 0 1px rgb(255 217 122 / .45);
}

.catalogue { border-top: 1px solid rgb(201 168 79 / .22); }

.entree {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: center;
    padding-block: var(--sp-5);
    border-bottom: 1px solid rgb(201 168 79 / .22);
}

.entree__jaquette img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-md);
    border: 1px solid rgb(245 236 224 / .1);
    box-shadow: 0 1rem 2.5rem -1rem rgb(0 0 0 / .8);
    transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}

.entree:hover .entree__jaquette img { transform: translateY(-.35rem); }

.entree__titre {
    font-size: var(--fs-h2);
    margin-bottom: .4rem;
}

.entree__titre a {
    text-decoration: none;
    background-image: linear-gradient(var(--or), var(--or));
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .25s ease;
}

.entree:hover .entree__titre a { background-size: 100% 1px; }

.entree__accroche {
    color: var(--texte-discret);
    max-width: var(--mesure);
    margin-bottom: var(--sp-3);
}

/* ── Fiche de jeu ─────────────────────────────────────────────────────────── */

.fiche__retour {
    display: inline-block;
    margin-block: var(--sp-2) var(--sp-4);
    font-size: var(--fs-petit);
    color: var(--texte-discret);
    text-decoration: none;
}

.fiche__retour:hover { color: var(--or); }

.banniere {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid rgb(245 236 224 / .1);
}

.banniere img {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

.banniere::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        var(--piece) 2%,
        color-mix(in oklab, var(--accent) 55%, transparent) 42%,
        transparent 85%
    );
}

.banniere__contenu {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: var(--sp-5) clamp(var(--sp-3), 4vw, var(--sp-6));
    display: flex;
    align-items: flex-end;
    gap: var(--sp-3);
}

.banniere__icone {
    width: clamp(3.5rem, 7vw, 5.5rem);
    border-radius: var(--r-md);
    border: 1px solid rgb(255 217 122 / .3);
    flex: 0 0 auto;
}

.banniere__titre {
    font-size: var(--fs-h1);
    color: var(--or);
    text-shadow: 0 .15em .6em rgb(13 7 9 / .85);
}

.fiche__corps {
    padding-block: var(--sp-6);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
    gap: var(--sp-6);
    align-items: start;
}

.fiche__texte { max-width: var(--mesure); }

.fiche__texte h2 {
    font-size: var(--fs-h3);
    margin-block: var(--sp-4) var(--sp-2);
    color: var(--or);
}

.fiche__texte ul { padding-left: 1.2em; }

.fiche__cote {
    position: sticky;
    top: var(--sp-4);
    padding: var(--sp-4);
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid rgb(245 236 224 / .08);
}

.fiche__cote h2 {
    font-size: var(--fs-petit);
    font-family: var(--courant);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--texte-discret);
    margin-bottom: var(--sp-2);
}

.fiche__cote dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .4rem var(--sp-2);
    margin: 0;
    font-size: var(--fs-petit);
}

.fiche__cote dt { color: var(--texte-discret); }
.fiche__cote dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Pellicule de captures : defilement horizontal, ancrage doux. */
.pellicule {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding-bottom: var(--sp-2);
    scrollbar-color: var(--or-logo) transparent;
}

.pellicule img {
    flex: 0 0 auto;
    width: min(80vw, 34rem);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--r-md);
    border: 1px solid rgb(245 236 224 / .1);
    scroll-snap-align: center;
}

.versions { border-top: 1px solid rgb(201 168 79 / .22); }

.version {
    padding-block: var(--sp-4);
    border-bottom: 1px solid rgb(201 168 79 / .22);
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-5);
}

.version__numero {
    font-family: var(--display);
    font-size: var(--fs-h3);
    font-variant-numeric: tabular-nums;
}

.version__numero span {
    display: block;
    font-family: var(--courant);
    font-size: var(--fs-petit);
    color: var(--texte-discret);
}

.version__notes { color: var(--texte-discret); white-space: pre-line; max-width: var(--mesure); }

/* ── Bloc « ou ca se joue » ───────────────────────────────────────────────── */

.table-avona {
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--surface) 0%, var(--piece) 100%);
    border: 1px solid rgb(201 168 79 / .2);
    text-align: center;
}

.table-avona h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-2); }
.table-avona p { color: var(--texte-discret); max-width: 46ch; margin-inline: auto; }

/* ── Vide ─────────────────────────────────────────────────────────────────── */

.vide {
    padding-block: var(--sp-7);
    text-align: center;
    color: var(--texte-discret);
}

/* ── Pied ─────────────────────────────────────────────────────────────────── */

.pied {
    margin-top: var(--sp-7);
    padding-block: var(--sp-5);
    border-top: 1px solid rgb(245 236 224 / .08);
    font-size: var(--fs-petit);
    color: var(--texte-discret);
}

.pied__rang {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    align-items: center;
}

.pied nav { margin-left: auto; display: flex; gap: var(--sp-3); }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--or); }

/* ── Adaptation ───────────────────────────────────────────────────────────── */

@media (max-width: 60rem) {
    .fiche__corps { grid-template-columns: minmax(0, 1fr); }
    .fiche__cote { position: static; }
}

@media (max-width: 48rem) {
    :root { --fs-h2: 1.5rem; }

    .entree,
    .proposition,
    .version {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-3);
    }

    .entree__jaquette { max-width: 20rem; }

    .boites {
        gap: 0;
        margin-inline: calc(var(--sp-2) * -1);
    }

    .boite { width: clamp(7rem, 30vw, 11rem); }

    .nav { gap: var(--sp-2); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}