/* ═══════════════════════════════════════════════════════════════════════ STREAMLOG — Catalogue Même langage que les fiches (single.css) : titres serif, micro-labels mono, filets fins, aucune pastille colorée décorative. Tous les tons viennent des tokens de streamlog.css, donc du thème hôte. ═══════════════════════════════════════════════════════════════════════ */ .stl-catalog { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; color: var(--stl-text); font-family: var(--stl-sans); } /* ═══ 1. En-tête ═══════════════════════════════════════════════════════ */ .stl-cat-head { padding: 8px 0 28px; } .stl-cat-title { font-family: var(--stl-serif); font-size: clamp(30px, 4.6vw, 54px); font-weight: 600; line-height: 1.04; letter-spacing: -.025em; margin: 12px 0 0; color: var(--stl-text); text-wrap: balance; } .stl-cat-lede { font-family: var(--stl-mono); font-size: 12px; letter-spacing: .06em; color: var(--stl-text-muted); margin: 14px 0 0; } /* ═══ 2. Barre de contrôle collante ════════════════════════════════════ */ /* La navbar du thème est `sticky` (pas `fixed`), haute de `--h-navbar` et posée en z-index 200 ; le tiroir mobile monte à 199. On se cale juste sous la navbar et bien en dessous de ces deux valeurs : les barres s'empilent au lieu de se recouvrir, et le menu mobile passe toujours par-dessus. Le repli 60px sert aux thèmes qui ne déclarent pas la variable. */ .stl-cat-controls { position: sticky; top: var(--h-navbar, 60px); z-index: 20; display: flex; flex-direction: column; gap: 8px; padding: 14px 0 16px; margin-bottom: 34px; transition: padding var(--stl-transition); } /* Le fond file de bord à bord, comme la navbar juste au-dessus : une bande qui s'arrête à la largeur du contenu se lit comme un encart flottant. Le débordement horizontal est rogné par `overflow-x: clip` sur . */ .stl-cat-controls::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; background: var(--stl-paper); border-bottom: 1px solid var(--stl-border); transition: box-shadow var(--stl-transition), border-color var(--stl-transition); } /* Collée : on resserre et on détache la barre du contenu qui passe dessous. */ .stl-cat-controls.is-stuck { padding-top: 10px; padding-bottom: 10px; } .stl-cat-controls.is-stuck::before { border-bottom-color: var(--stl-border-hover); box-shadow: 0 12px 24px -20px color-mix(in srgb, var(--stl-ink) 70%, transparent); } .stl-cat-controls.is-stuck .stl-cat-refine-inner { padding-top: 10px; } /* Sentinelle de détection : invisible, ne prend pas de place. */ .stl-cat-sentinel { height: 1px; margin-bottom: -1px; } .stl-cat-bar { display: flex; align-items: center; gap: 12px; min-width: 0; } .stl-cat-bar .stl-search { flex: 1 1 220px; min-width: 0; } /* ── Recherche ────────────────────────────────────────────────────────── */ .stl-search { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 14px; border: 1px solid var(--stl-border-hover); border-radius: var(--stl-radius); background: var(--stl-surface); transition: border-color var(--stl-transition), box-shadow var(--stl-transition); } .stl-search:focus-within { border-color: var(--stl-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stl-ink) 7%, transparent); } .stl-search-icon { display: flex; color: var(--stl-text-muted); flex-shrink: 0; } .stl-search input[type="search"] { flex: 1; min-width: 0; padding: 12px 0; border: none; background: none; outline: none; color: var(--stl-text); font-family: var(--stl-sans); font-size: 16px; letter-spacing: -.005em; -webkit-appearance: none; appearance: none; } .stl-search input[type="search"]::placeholder { color: var(--stl-text-muted); } .stl-search input[type="search"]::-webkit-search-cancel-button { display: none; } .stl-search-clear { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%; background: var(--stl-surface-3); color: var(--stl-text-dim); cursor: pointer; flex-shrink: 0; transition: all var(--stl-transition); } .stl-search-clear:hover { background: var(--stl-text); color: var(--stl-paper); } .stl-search-clear[hidden] { display: none; } /* Témoin d'activité : un filet qui glisse sous le champ, sans spinner tournant */ .stl-search-busy { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; opacity: 0; transition: opacity var(--stl-transition); } .stl-search-busy::after { content: ''; position: absolute; inset: 0; background: var(--stl-primary); transform: translateX(-100%); } .stl-catalog.is-busy .stl-search-busy { opacity: 1; } .stl-catalog.is-busy .stl-search-busy::after { animation: stl-sweep 1.1s ease-in-out infinite; } @keyframes stl-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ── Onglets de type ──────────────────────────────────────────────────── */ .stl-segment { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--stl-border); } .stl-segment::-webkit-scrollbar { display: none; } .stl-segment-item { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: -1px; border-bottom: 1.5px solid transparent; color: var(--stl-text-muted); font-family: var(--stl-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color var(--stl-transition), border-color var(--stl-transition); } .stl-segment-item:hover { color: var(--stl-text); } .stl-segment-item.is-active { color: var(--stl-text); border-bottom-color: var(--stl-text); } .stl-segment-count { font-size: 10px; letter-spacing: .04em; color: var(--stl-text-muted); border: 1px solid var(--stl-border); border-radius: 999px; padding: 1px 7px; } .stl-segment-item.is-active .stl-segment-count { border-color: var(--stl-border-hover); color: var(--stl-text-dim); } /* ── Variante en ligne : groupe segmenté, pour tenir dans la barre ────── */ /* Les onglets soulignés fonctionnent sous un titre, pas à côté d'un champ de saisie : à la même hauteur, le filet du bas ne s'aligne sur rien. */ .stl-segment--inline { flex-shrink: 0; gap: 2px; padding: 3px; border: 1px solid var(--stl-border); border-radius: 999px; background: var(--stl-surface); } .stl-segment--inline .stl-segment-item { padding: 7px 13px; margin-bottom: 0; border-bottom: none; border-radius: 999px; font-size: 10.5px; letter-spacing: .1em; } .stl-segment--inline .stl-segment-item:hover { background: var(--stl-surface-2); } .stl-segment--inline .stl-segment-item.is-active { background: var(--stl-text); color: var(--stl-paper); } .stl-segment--inline .stl-segment-count { padding: 0; border: none; font-size: 10px; opacity: .6; } .stl-segment--inline .stl-segment-item.is-active .stl-segment-count { color: inherit; opacity: .75; } /* ── Bouton de dépliage ───────────────────────────────────────────────── */ /* Masqué tant que le JavaScript n'a pas pris la main : sans lui le panneau reste ouvert et un bouton inerte n'aurait aucun sens. */ .stl-refine-toggle { display: none; } .stl-catalog.stl-js .stl-refine-toggle { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 9px 14px; border: 1px solid var(--stl-border-hover); border-radius: 999px; background: transparent; color: var(--stl-text-dim); font-family: var(--stl-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: all var(--stl-transition); } .stl-refine-toggle:hover { border-color: var(--stl-text); color: var(--stl-text); } .stl-refine-toggle[aria-expanded="true"] { border-color: var(--stl-text); background: var(--stl-text); color: var(--stl-paper); } .stl-refine-toggle .stl-i { transition: transform var(--stl-transition); } /* Pastille signalant qu'un filtre est posé, y compris panneau replié. */ .stl-refine-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--stl-primary); opacity: 0; transition: opacity var(--stl-transition); } .stl-refine-dot[data-on="1"] { opacity: 1; } .stl-refine-toggle[aria-expanded="true"] .stl-refine-dot { background: currentColor; } /* ── Genres + tri (panneau dépliable) ─────────────────────────────────── */ /* grid-template-rows 0fr → 1fr : le repli s'anime sans hauteur codée en dur. */ .stl-cat-refine { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .26s ease; } .stl-catalog.stl-js .stl-cat-controls:not(.is-open) .stl-cat-refine { grid-template-rows: 0fr; } .stl-cat-refine-inner { display: flex; align-items: center; gap: 20px; flex-wrap: nowrap; min-height: 0; overflow: hidden; transition: padding var(--stl-transition); } /* Replié : plus aucun élément focusable ne doit rester atteignable. */ .stl-catalog.stl-js .stl-cat-controls:not(.is-open) .stl-cat-refine-inner { visibility: hidden; } /* Rail de genres : une seule ligne qui défile plutôt qu'un pavé qui enfle. Replié sous une barre collante, chaque ligne gagnée compte. Le dégradé de droite signale qu'il reste des genres au-delà du bord. */ .stl-chips { display: flex; flex-wrap: nowrap; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 3px 0; mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%); } .stl-chips::-webkit-scrollbar { display: none; } .stl-chip { padding: 4px 11px; border: 1px solid var(--stl-border); border-radius: 999px; color: var(--stl-text-muted); font-family: var(--stl-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: all var(--stl-transition); } .stl-chip:hover { border-color: var(--stl-text); color: var(--stl-text); } .stl-chip.is-active { border-color: var(--stl-text); background: var(--stl-text); color: var(--stl-paper); } .stl-sort { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; /* Filet de séparation : sans lui, le genre rogné par le fondu du rail se lit comme un défaut d'affichage plutôt que comme une fin de liste. */ padding-left: 22px; border-left: 1px solid var(--stl-border); } .stl-sort-label { font-family: var(--stl-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--stl-text-muted); } .stl-sort select { padding: 6px 26px 6px 10px; border: 1px solid var(--stl-border); border-radius: var(--stl-radius-sm); background: transparent; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 11px center, right 6px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; color: var(--stl-text-dim); font-family: var(--stl-sans); font-size: 12.5px; cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; transition: border-color var(--stl-transition), color var(--stl-transition); } .stl-sort select:hover, .stl-sort select:focus { border-color: var(--stl-text); color: var(--stl-text); } /* ═══ 3. Sections de résultats ═════════════════════════════════════════ */ .stl-cat-results { display: flex; flex-direction: column; gap: 52px; transition: opacity var(--stl-transition); } .stl-catalog.is-busy .stl-cat-results { opacity: .45; } .stl-block-more { color: var(--stl-text-muted); font-family: var(--stl-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color var(--stl-transition); } .stl-block-more:hover { color: var(--stl-text); } /* ═══ 4. Grille et cartes ══════════════════════════════════════════════ */ .stl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 30px 18px; } .stl-tiles--people { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } .stl-tile { min-width: 0; } /* ── Cadre de l'affiche ───────────────────────────────────────────────── */ .stl-tile-frame { position: relative; border-radius: var(--stl-radius); overflow: hidden; border: 1px solid var(--stl-border); background: var(--stl-surface-2); transition: border-color var(--stl-transition), box-shadow var(--stl-transition); } .stl-tile:hover .stl-tile-frame, .stl-tile:focus-within .stl-tile-frame { border-color: var(--stl-text); box-shadow: var(--stl-shadow); } .stl-tile-link { display: block; position: relative; aspect-ratio: 2 / 3; text-decoration: none; outline-offset: -2px; } .stl-tile-frame--portrait .stl-tile-link { aspect-ratio: 3 / 4; } .stl-tile-img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.1); transition: transform .5s ease, filter var(--stl-transition); } .stl-tile-frame--portrait .stl-tile-img { object-position: center 15%; } .stl-tile:hover .stl-tile-img { transform: scale(1.045); filter: grayscale(0); } .stl-tile-img--empty { display: flex; align-items: center; justify-content: center; font-size: 34px; opacity: .25; filter: none; } .stl-tile:hover .stl-tile-img--empty { transform: none; } /* ── Voile + faits révélés au survol ──────────────────────────────────── */ .stl-tile-veil { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, #000 88%, transparent) 0%, color-mix(in srgb, #000 45%, transparent) 34%, transparent 62%); opacity: 0; transition: opacity .25s ease; pointer-events: none; } .stl-tile:hover .stl-tile-veil, .stl-tile:focus-within .stl-tile-veil { opacity: 1; } .stl-tile-facts { position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; display: flex; flex-direction: column; gap: 3px; color: #fff; font-family: var(--stl-mono); font-size: 10.5px; line-height: 1.45; letter-spacing: .04em; opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; } .stl-tile:hover .stl-tile-facts, .stl-tile:focus-within .stl-tile-facts { opacity: 1; transform: translateY(0); } .stl-tile-facts span { display: block; } .stl-tile-volume { font-weight: 500; } .stl-tile-pos { color: color-mix(in srgb, #fff 78%, transparent); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; } /* Décale les faits quand la barre de progression occupe le bas du cadre */ .stl-tile-bar ~ .stl-tile-link .stl-tile-facts, .stl-tile-frame:has(.stl-tile-bar) .stl-tile-facts { bottom: 14px; } /* ── Progression de série, toujours visible ───────────────────────────── */ .stl-tile-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, #000 45%, transparent); z-index: 2; pointer-events: none; } .stl-tile-bar i { display: block; height: 100%; background: var(--stl-primary); transition: width .4s ease; } /* ── Pastille « déjà vu » ─────────────────────────────────────────────── */ .stl-tile-seen { position: absolute; top: 8px; left: 8px; z-index: 3; display: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--stl-green); color: #fff; } .stl-tile.is-watched .stl-tile-seen { display: flex; } .stl-tile-seen .stl-i { width: 13px; height: 13px; stroke-width: 2.6; } /* ── Actions posées sur l'affiche ─────────────────────────────────────── */ /* Les boutons sont frères du lien, pas enfants : cliquer l'affiche ou le titre ouvre toujours la fiche, cliquer une action ne navigue jamais. */ .stl-tile-tools { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; } .stl-tile:hover .stl-tile-tools, .stl-tile:focus-within .stl-tile-tools { opacity: 1; transform: translateY(0); } .stl-tile-tool { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%; background: color-mix(in srgb, #000 62%, transparent); color: #fff; cursor: pointer; backdrop-filter: blur(6px); transition: background var(--stl-transition), transform var(--stl-transition), color var(--stl-transition); } .stl-tile-tool:hover { background: #fff; color: #000; transform: scale(1.08); } .stl-tile-tool:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .stl-tile-tool[aria-pressed="true"] { background: var(--stl-green); color: #fff; } .stl-tile-tool[aria-pressed="true"]:hover { background: #fff; color: var(--stl-green); } .stl-tile-tool[data-act="watchlist"][aria-pressed="true"] { background: var(--stl-primary); } .stl-tile-tool[data-act="watchlist"][aria-pressed="true"]:hover { background: #fff; color: var(--stl-primary); } .stl-tile-tool[data-act="watchlist"][aria-pressed="true"] .stl-i { fill: currentColor; } .stl-tile-tool.is-pending { opacity: .5; pointer-events: none; } /* Sans survol (tactile), les actions restent visibles en permanence. */ @media (hover: none) { .stl-tile-tools { opacity: 1; transform: none; } .stl-tile-veil, .stl-tile-facts { opacity: 1; transform: none; } .stl-tile-facts { font-size: 10px; } } /* ── Légende sous l'affiche ───────────────────────────────────────────── */ .stl-tile-title { display: block; margin: 11px 0 0; font-family: var(--stl-serif); font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--stl-text); text-decoration: none; overflow-wrap: anywhere; transition: color var(--stl-transition); } .stl-tile-title:hover { color: var(--stl-primary); } .stl-tile-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin: 4px 0 0; font-family: var(--stl-mono); font-size: 11px; letter-spacing: .04em; color: var(--stl-text-muted); } .stl-tile-sub .stl-state { font-size: 10px; letter-spacing: .07em; } .stl-tile-sub .stl-state::before { width: 5px; height: 5px; } .stl-tile.is-watched .stl-tile-img { filter: grayscale(.35); } .stl-tile.is-watched:hover .stl-tile-img { filter: grayscale(0); } /* ═══ 5. Vide et pagination ════════════════════════════════════════════ */ .stl-void { padding: 72px 20px 80px; text-align: center; border: 1px dashed var(--stl-border-hover); border-radius: var(--stl-radius); } .stl-void-title { font-family: var(--stl-serif); font-size: 22px; font-weight: 600; color: var(--stl-text); margin: 0; } .stl-void-hint { font-size: 14px; color: var(--stl-text-muted); margin: 8px 0 0; max-width: 44ch; margin-inline: auto; } .stl-void .stl-btn { margin-top: 22px; } .stl-more { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 8px; } .stl-more-count { margin: 0; font-family: var(--stl-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--stl-text-muted); } /* ═══ 6. Responsive ════════════════════════════════════════════════════ */ @media (max-width: 760px) { .stl-catalog { padding: 0 14px 32px; } .stl-cat-head { padding: 4px 0 22px; } .stl-cat-controls { gap: 10px; padding: 10px 0 12px; margin-bottom: 28px; } .stl-search input[type="search"] { padding: 11px 0; font-size: 15px; } /* Exactement deux rangs : recherche, puis types + bouton filtres. Le champ garde toute la largeur, c'est lui qu'on utilise le plus. */ .stl-cat-bar { flex-wrap: wrap; gap: 8px; } .stl-cat-bar .stl-search { flex: 1 0 100%; } /* base 0 et non `auto` : sans cela le groupe garde la largeur de son contenu et rejette le bouton « Filtres » sur un troisième rang. */ .stl-segment--inline { flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; } .stl-segment--inline::-webkit-scrollbar { display: none; } .stl-segment--inline .stl-segment-item { padding: 6px 11px; } .stl-catalog.stl-js .stl-refine-toggle { padding: 8px 12px; } .stl-refine-toggle span:not(.stl-refine-dot) { display: none; } .stl-cat-refine-inner { gap: 12px; } .stl-sort-label { display: none; } .stl-cat-results { gap: 40px; } .stl-tiles { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 24px 12px; } .stl-tiles--people { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); } .stl-tile-title { font-size: 14.5px; margin-top: 9px; } .stl-tile-sub { font-size: 10.5px; } } @media (max-width: 420px) { .stl-tiles { grid-template-columns: repeat(2, 1fr); } .stl-tiles--people { grid-template-columns: repeat(3, 1fr); } } @media (prefers-reduced-motion: reduce) { .stl-tile-img, .stl-tile-facts, .stl-tile-tools, .stl-tile-veil, .stl-tile-bar i, .stl-cat-refine, .stl-cat-controls { transition: none; } .stl-tile:hover .stl-tile-img { transform: none; } .stl-search-busy::after { animation: none; } } /* Écran très bas (paysage mobile) : une barre collante mangerait l'écran. */ @media (max-height: 480px) { .stl-cat-controls { position: static; margin-bottom: 24px; } }