/* ============================================================
   NAS Lance - Design system « Écran bleu »
   ------------------------------------------------------------
   Deux registres :
   - Lumière  : le bureau (gestion, téléchargements, recherche).
                Papier froid, encre bleutée, outremer.
   - Salle    : la projection (lecteur, CINÉ, fiches film).
                Toujours sombre, les affiches sont la lumière.
   Signature : les cartons d'intertitre (aplat outremer, titre
   blanc extra-large), les repères de recadrage au survol des
   affiches et les billets perforés pour choisir une version.
   ============================================================ */

@font-face {
    font-family: "Archivo Variable";
    src: url("/static/nas/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Newsreader Variable";
    src: url("/static/nas/fonts/newsreader-latin-opsz-normal.woff2") format("woff2-variations");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Newsreader Variable";
    src: url("/static/nas/fonts/newsreader-latin-opsz-italic.woff2") format("woff2-variations");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}

/* ---------- Tokens : Lumière (défaut) ---------- */

:root {
    color-scheme: light;

    --paper: #eceef4;
    --paper-2: #dfe2ec;
    --card: #f7f8fc;
    --ink: #0a0f35;
    --ink-2: #3a4170;
    --ink-3: #5c6492;
    --line: rgba(10, 15, 53, 0.15);
    --line-strong: rgba(10, 15, 53, 0.34);

    --accent: #2a3bff;
    --accent-ink: #ffffff;
    --accent-text: #2230e8;
    --accent-soft: rgba(42, 59, 255, 0.1);

    --lamp: #ee6314; /* orange du logo, un cran plus profond sur papier clair */
    --lamp-ink: #0a0f35;
    --lamp-soft: rgba(238, 99, 20, 0.14);

    --ok: #0b7a52;
    --ok-soft: rgba(11, 122, 82, 0.12);
    --err: #b0152f;
    --err-soft: rgba(200, 30, 60, 0.1);
    --warn: #8a5a00;
    --warn-soft: rgba(214, 150, 0, 0.16);

    --focus: #2230e8;
    --scrim: rgba(7, 10, 36, 0.62);
    --hatch: rgba(10, 15, 53, 0.07);

    /* Typographie */
    /* Palette de notation : de 1 (détesté) à 5 (adoré), d'après le logo */
    --rate-1: #ff2768;
    --rate-1-5: #ff6685;
    --rate-2: #ff8d42;
    --rate-2-5: #ffd166;
    --rate-3: #c6cbda;
    --rate-3-5: #d28bff;
    --rate-4: #6b91ff;
    --rate-4-5: #00c8ff;
    --rate-5: #00e6b1;
    --on-rate: #0a0f35;

    --font-ui: "Archivo Variable", "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
    --font-read: "Newsreader Variable", "Newsreader", Georgia, "Times New Roman", serif;

    --text-xs: 0.8125rem;
    --text-sm: 0.9rem;
    --text-md: 1rem;
    --text-lg: 1.1875rem;
    --text-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    --text-2xl: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
    --text-card: clamp(3.1rem, 1.4rem + 7.4vw, 8.5rem);

    /* Espacement (base 4) */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4.5rem;

    /* Formes : cadres nets, jetons ronds, rien entre les deux */
    --r-frame: 3px;
    --r-pill: 999px;

    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur-1: 120ms;
    --dur-2: 220ms;
    --dur-3: 420ms;

    --rail: 15.5rem;
    --rail-collapsed: 4.75rem;
    --gutter: clamp(1rem, 0.4rem + 2.6vw, 3rem);
}

/* ---------- Tokens : Salle ---------- */

:root[data-theme="dark"],
[data-salle] {
    color-scheme: dark;

    --paper: #070a24;
    --paper-2: #04061a;
    --card: #0e1236;
    --ink: #edefff;
    --ink-2: #b7bce8;
    --ink-3: #8f96cc;
    --line: rgba(190, 198, 255, 0.17);
    --line-strong: rgba(190, 198, 255, 0.38);

    --accent: #4f5dff;
    --accent-ink: #ffffff;
    --accent-text: #a3adff;
    --accent-soft: rgba(79, 93, 255, 0.2);

    --lamp: #ff8d42; /* orange exact du logo */
    --lamp-ink: #0a0f35;
    --lamp-soft: rgba(255, 141, 66, 0.16);

    --ok: #46d39a;
    --ok-soft: rgba(70, 211, 154, 0.14);
    --err: #ff7a8f;
    --err-soft: rgba(255, 122, 143, 0.14);
    --warn: #ffc65c;
    --warn-soft: rgba(255, 198, 92, 0.14);

    --focus: #c3caff;
    --scrim: rgba(2, 3, 18, 0.78);
    --hatch: rgba(190, 198, 255, 0.07);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;

        --paper: #070a24;
        --paper-2: #04061a;
        --card: #0e1236;
        --ink: #edefff;
        --ink-2: #b7bce8;
        --ink-3: #8f96cc;
        --line: rgba(190, 198, 255, 0.17);
        --line-strong: rgba(190, 198, 255, 0.38);
        --accent: #4f5dff;
        --accent-text: #a3adff;
        --accent-soft: rgba(79, 93, 255, 0.2);
        --lamp: #ff8d42;
        --lamp-soft: rgba(255, 141, 66, 0.16);
        --ok: #46d39a;
        --ok-soft: rgba(70, 211, 154, 0.14);
        --err: #ff7a8f;
        --err-soft: rgba(255, 122, 143, 0.14);
        --warn: #ffc65c;
        --warn-soft: rgba(255, 198, 92, 0.14);
        --focus: #c3caff;
        --scrim: rgba(2, 3, 18, 0.78);
        --hatch: rgba(190, 198, 255, 0.07);
    }
}

/* ---------- Base ---------- */

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

[hidden] {
    display: none !important;
}

html {
    background: var(--paper);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-md);
    font-stretch: 100%;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
figure,
dl,
dd {
    margin: 0;
}

h1,
h2,
h3,
h4 {
    font-weight: 700;
    line-height: 1.1;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

a {
    color: var(--accent-text);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

img,
svg,
video {
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

button:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
}

small {
    font-size: 0.82em;
}

::selection {
    background: var(--accent);
    color: var(--accent-ink);
}

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

:focus:not(:focus-visible) {
    outline: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: -6rem;
    left: 0.5rem;
    z-index: 1000;
    padding: 0.6rem 1rem;
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
    border-radius: var(--r-frame);
}

.skip-link:focus {
    top: 0.5rem;
}

.nowrap {
    white-space: nowrap;
}

/* Icônes : un seul trait, partout */

.i {
    display: inline-block;
    flex: none;
    width: 1.25em;
    height: 1.25em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.22em;
}

/* Chiffres : tabulaires partout où l'on compare des valeurs */

.num,
.stat-card strong,
.torrent-meta,
.library-item-meta,
.release-stats {
    font-variant-numeric: tabular-nums;
}

/* ---------- Boutons ---------- */

.btn {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-line: var(--line-strong);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    min-height: 2.75rem;
    padding: 0.55rem 1.15rem;
    border: 1.5px solid var(--btn-line);
    border-radius: var(--r-frame);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition:
        background-color var(--dur-1) var(--ease),
        color var(--dur-1) var(--ease),
        border-color var(--dur-1) var(--ease),
        transform var(--dur-1) var(--ease);
}

.btn:hover:not(:disabled) {
    --btn-bg: var(--ink);
    --btn-fg: var(--paper);
    --btn-line: var(--ink);
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

.btn:disabled {
    opacity: 0.5;
}

.btn--primary {
    --btn-bg: var(--accent);
    --btn-fg: var(--accent-ink);
    --btn-line: var(--accent);
}

.btn--primary:hover:not(:disabled) {
    --btn-bg: var(--ink);
    --btn-fg: var(--paper);
    --btn-line: var(--ink);
}

.btn--quiet {
    --btn-line: transparent;
    padding-inline: 0.75rem;
}

.btn--quiet:hover:not(:disabled) {
    --btn-bg: var(--accent-soft);
    --btn-fg: var(--accent-text);
    --btn-line: transparent;
}

.btn--icon {
    width: 2.75rem;
    padding: 0;
    border-radius: 50%;
}

/* ---------- Champs ---------- */

.field {
    display: grid;
    gap: var(--s-2);
}

.field > label,
.field-label {
    font-size: var(--text-sm);
    font-weight: 600;
}

.input,
.select,
.textarea {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.6rem 0.9rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-frame);
    background: var(--card);
    color: var(--ink);
    transition:
        border-color var(--dur-1) var(--ease),
        box-shadow var(--dur-1) var(--ease);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--ink-3);
    opacity: 1;
}

.input:hover,
.select:hover,
.textarea:hover {
    border-color: var(--ink-2);
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
    outline: none;
    border-color: var(--accent-text);
    box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1.5px var(--accent-text);
}

select,
.select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.4rem;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 1.15rem) 52%,
        calc(100% - 0.8rem) 52%;
    background-size:
        0.36rem 0.36rem,
        0.36rem 0.36rem;
    background-repeat: no-repeat;
}

select option {
    background: var(--card);
    color: var(--ink);
}

/* ---------- Segmented / jetons ---------- */

.seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-pill);
}

.seg > button,
.seg > a {
    min-height: 2.25rem;
    padding: 0.25rem 1rem;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ink-2);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition:
        background-color var(--dur-1) var(--ease),
        color var(--dur-1) var(--ease);
}

.seg > button:hover,
.seg > a:hover {
    color: var(--ink);
    background: var(--accent-soft);
}

.seg > .active,
.seg > [aria-pressed="true"],
.seg > [aria-current="true"] {
    background: var(--ink);
    color: var(--paper);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 2.25rem;
    padding: 0.2rem 0.95rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 600;
    transition:
        background-color var(--dur-1) var(--ease),
        border-color var(--dur-1) var(--ease),
        color var(--dur-1) var(--ease);
}

.chip:hover {
    border-color: var(--ink);
}

.chip.active,
.chip[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

/* ---------- Pastilles d'état ---------- */

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 1.6rem;
    padding: 0.1rem 0.65rem;
    border-radius: var(--r-pill);
    background: var(--paper-2);
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.tag::before {
    content: "";
    background: currentColor;
}

.tag--ok {
    background: var(--ok-soft);
    color: var(--ok);
}

.tag--busy {
    background: var(--warn-soft);
    color: var(--warn);
}

.tag--err {
    background: var(--err-soft);
    color: var(--err);
}

.tag--wait {
    background: var(--paper-2);
    color: var(--ink-2);
}

/* ---------- Cadre d'affiche + repères de recadrage ---------- */

.frame {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: var(--r-frame);
    background:
        repeating-linear-gradient(
            135deg,
            transparent 0 9px,
            var(--hatch) 9px 10px
        ),
        var(--paper-2);
    box-shadow: 0 0 0 1px var(--line);
}

.frame > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crop {
    position: relative;
}

.crop::after {
    --m: 16px;
    --w: 2px;
    --c: var(--accent-text);

    content: "";
    position: absolute;
    inset: -3px;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(var(--c), var(--c)) top left / var(--m) var(--w) no-repeat,
        linear-gradient(var(--c), var(--c)) top left / var(--w) var(--m) no-repeat,
        linear-gradient(var(--c), var(--c)) top right / var(--m) var(--w) no-repeat,
        linear-gradient(var(--c), var(--c)) top right / var(--w) var(--m) no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / var(--m) var(--w) no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--m) no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / var(--m) var(--w) no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--m) no-repeat;
    transition:
        opacity var(--dur-2) var(--ease),
        inset var(--dur-2) var(--ease);
}

.crop:hover::after,
.crop:focus-visible::after,
.crop:focus-within::after {
    inset: -9px;
    opacity: 1;
}

/* ---------- Carton d'intertitre ---------- */

.card-title {
    position: relative;
    isolation: isolate;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--r-frame);
}

.card-title h1,
.card-title h2 {
    font-size: var(--text-card);
    font-weight: 800;
    font-stretch: 122%;
    line-height: 0.88;
    letter-spacing: -0.035em;
}

/* ---------- Toasts / messages ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: min(34rem, calc(100vw - 2rem));
    padding: 0.8rem 1.1rem;
    border-radius: var(--r-frame);
    background: var(--ink);
    color: var(--paper);
    font-size: var(--text-sm);
    font-weight: 600;
    transform: translateX(-50%);
    animation: toast-in var(--dur-3) var(--ease) both;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translate(-50%, 12px);
    }
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Contraste forcé (Windows) ---------- */

@media (forced-colors: active) {
    .btn,
    .chip,
    .seg,
    .input,
    .select,
    .textarea {
        border-color: ButtonText;
    }

    .crop::after {
        --c: Highlight;
    }
}

/* ---------- Notes : chaque valeur porte sa couleur ---------- */

[data-rating="1"] { --rc: var(--rate-1); }
[data-rating="1.5"] { --rc: var(--rate-1-5); }
[data-rating="2"] { --rc: var(--rate-2); }
[data-rating="2.5"] { --rc: var(--rate-2-5); }
[data-rating="3"] { --rc: var(--rate-3); }
[data-rating="3.5"] { --rc: var(--rate-3-5); }
[data-rating="4"] { --rc: var(--rate-4); }
[data-rating="4.5"] { --rc: var(--rate-4-5); }
[data-rating="5"] { --rc: var(--rate-5); }

/* Barre de couleurs : les neuf teintes du logo, en test pattern */
.spectrum {
    height: 0.6rem;
    background: linear-gradient(
        90deg,
        var(--rate-1) 0 11.11%,
        var(--rate-1-5) 0 22.22%,
        var(--rate-2) 0 33.33%,
        var(--rate-2-5) 0 44.44%,
        var(--rate-3) 0 55.55%,
        var(--rate-3-5) 0 66.66%,
        var(--rate-4) 0 77.77%,
        var(--rate-4-5) 0 88.88%,
        var(--rate-5) 0 100%
    );
}

/* Losange : la forme du logo, pour tous les petits voyants */
.tag::before {
    width: 0.46rem;
    height: 0.46rem;
    border-radius: 22%;
    transform: rotate(45deg);
}