/* Mon Flux — tokens et classes repris de docs/design/design-system.md et screens/_theme.css */
:root {
  --color-background: #0e0f12;
  --color-surface: #17191e;
  --color-surface-raised: #22252c;
  --color-text-primary: #f2efe9;
  --color-text-secondary: #a3a6ad;
  --color-accent: #f5a524;
  --color-on-accent: #1c1305;
  --color-accent-text: #f5b546;
  --color-border: #2c2f37;
  --color-danger: #ff7b6e;
  --color-success: #5fd39a;
  --color-scrim: #0e0f12d9;
  --color-on-scrim: #f2efe9;
  --font-body: Inter, system-ui, -apple-system, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}
[data-theme="light"] {
  --color-background: #f5f3ee;
  --color-surface: #ffffff;
  --color-surface-raised: #ebe8e1;
  --color-text-primary: #16171b;
  --color-text-secondary: #55585f;
  --color-accent-text: #8f5600;
  --color-border: #d6d2c8;
  --color-danger: #b3261e;
  --color-success: #1d7a4c;
}

html { background: var(--color-background); }
body { margin: 0; min-height: 100vh; }
.app { background: var(--color-background); color: var(--color-text-primary); font-family: var(--font-body); font-size: 15px; line-height: 1.5; box-sizing: border-box; }
.app *, .app *::before, .app *::after { box-sizing: border-box; }

/* Typographie */
.h-display { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.t-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.t-sm { font-size: 13px; font-weight: 500; line-height: 1.4; }
/* Nombres (MAJ, vues, durées, compteurs) : police du texte, chiffres de largeur fixe pour qu'ils ne bougent pas */
.t-num { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; line-height: 1.3; }
.muted { color: var(--color-text-secondary); }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: var(--radius-md); font-family: var(--font-body); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; border: 1px solid var(--color-border); background: var(--color-surface-raised); color: var(--color-text-primary); }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); padding: 0 16px; font-weight: 600; }
.btn-danger { width: 44px; padding: 0; color: var(--color-danger); }
.btn:disabled { cursor: default; opacity: 0.7; }
.btn-icon { width: 44px; padding: 0; }
/* J'aime : pouce plein, couleur d'accent, quand la vidéo est aimée sur YouTube */
.btn-like[aria-pressed="true"] { color: var(--color-accent-text); border-color: var(--color-accent); }
.btn-like[aria-pressed="true"] svg { fill: currentColor; }
/* Pastille du nombre de filtres actifs, en coin du bouton « Filtres » */
.filters-btn { position: relative; }
.btn-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--color-accent); color: var(--color-on-accent); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
/* Boutons des lecteurs : logo seul, aussi grand que le bouton le permet ; yout-ube (même logo que YouTube)
   ajoute une pastille bouclier « sans pub » sur le coin haut droit du logo */
.btn-logo { min-width: 44px; padding: 0 2px; }
.btn-noads { padding: 0 10px 0 4px; }
.noads-logo { position: relative; display: inline-flex; min-width: 0; }
.noads-badge { position: absolute; top: -8px; right: -8px; }
.logo-img { border-radius: 8px; }

/* Champs */
.input { height: 44px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-primary); font-family: var(--font-body); font-size: 15px; }
.input[aria-invalid="true"] { border-color: var(--color-danger); }
.label { display: block; font-size: 13px; font-weight: 500; color: var(--color-text-secondary); margin-bottom: var(--space-1); }
.chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--radius-full); background: var(--color-surface-raised); color: var(--color-text-primary); font-size: 13px; font-weight: 500; border: 1px solid var(--color-border); }
.chip-on { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }

/* Carte, retours */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.thumb { position: relative; display: block; aspect-ratio: 16/9; background: var(--color-surface-raised); color: var(--color-text-secondary); }
.thumb svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--color-scrim); color: var(--color-on-scrim); font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; }
.card-body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); flex-grow: 1; }
.title2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.toast { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-raised); border: 1px solid var(--color-border); font-size: 13px; font-weight: 500; }
.link-accent { color: var(--color-accent-text); font-weight: 600; text-decoration: none; }
.panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.skel { background: var(--color-surface-raised); border-radius: var(--radius-sm); }

/* Focus clavier */
.app a:focus-visible, .app button:focus-visible, .app input:focus-visible, .app select:focus-visible {
  outline: 2px solid var(--color-accent-text); outline-offset: 2px;
}

/* Écran code d'accès */
.code-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.code-box { width: 100%; max-width: 400px; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.code-box .input, .code-box .btn { width: 100%; }
.field-error { margin: 0; color: var(--color-danger); }

/* En-tête */
.topbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
/* Hauteur d'un bouton (44 px) : le logo reste au même endroit sur toutes les pages, même sans bouton à côté (Réglages) */
.topbar .brand { display: flex; align-items: center; min-height: 44px; }
.topbar .tools { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }
.page { max-width: 1280px; margin: 0 auto; padding: var(--space-4); }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.plain-list li { padding: var(--space-2) var(--space-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Flux (sprint 3.2) */
/* flex : sans ligne de texte autour du lien, le bloc ne prend pas d'espace en plus sous le logo et reste centré sur les onglets */
.topbar .brand .h-display { display: flex; align-items: center; margin: 0; font-size: 28px; line-height: 1; }
.brand-link { display: inline-flex; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; }
.brand-logo { flex: none; width: 40px; height: 40px; border-radius: 9px; }
/* « Mis à jour … · N vidéos » à droite, juste avant les boutons : quand le texte arrive, il s'étend vers la gauche
   dans l'espace libre, sans pousser les onglets */
.topbar .upd { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
@media (min-width: 640px) {
  .topbar .upd:not([hidden]) + .tools { margin-left: 0; }
}
.bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); padding: var(--space-4); margin-bottom: var(--space-5); }
.bar > div { flex: 1 1 160px; }
.bar .input { width: 100%; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-title a { color: inherit; text-decoration: none; }
.empty-panel { padding: var(--space-6) var(--space-4); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.flux-page { max-width: 1440px; padding: var(--space-5) var(--space-5) var(--space-7); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 2px; }

/* Retours : toast flottant et bandeau d'erreur (sprint 3.3) */
.toast-float { position: fixed; left: 50%; bottom: var(--space-4); transform: translateX(-50%); z-index: 50; max-width: calc(100vw - 32px); box-shadow: 0 4px 16px rgb(0 0 0 / .18); }
.toast-action { color: var(--color-accent-text); font-weight: 600; }
.error-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-4); margin-bottom: var(--space-4); }

/* Mobile et panneau de filtres (sprint 3.4) */
.filters-btn, .upd-short { display: none; }
.sheet-wrap { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-scrim { position: absolute; inset: 0; background: var(--color-scrim); }
.sheet { position: relative; background: var(--color-surface); color: var(--color-text-primary); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-top: 1px solid var(--color-border); max-height: 90vh; overflow-y: auto; padding: var(--space-2) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.sheet-handle { width: 40px; height: 4px; border-radius: var(--radius-full); background: var(--color-border); margin: 0 auto; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sheet-clear { background: transparent; border-color: transparent; color: var(--color-accent-text); font-weight: 600; }
.sheet-body { display: flex; flex-direction: column; gap: var(--space-4); }
.sheet-body .input { width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sheet .chip { min-height: 44px; cursor: pointer; font-family: var(--font-body); }
.sheet-foot { display: flex; gap: var(--space-3); }
.sheet-foot .btn-primary { flex: 1; }
.sheet-foot .btn-primary:disabled { opacity: 0.5; }
body.sheet-open { overflow: hidden; }

@media (max-width: 639px) {
  .filters-btn { display: inline-flex; }
  .upd-long { display: none; }
  .upd-short { display: inline; }
  .topbar .brand .h-display { font-size: 22px; }
  .brand-logo { width: 34px; height: 34px; border-radius: 8px; }
  /* Logo + 4 boutons (Filtres, Sélectionner, Actualiser, Réglages) sur une seule ligne : écarts réduits */
  .topbar { padding: var(--space-2) var(--space-4); flex-wrap: wrap; column-gap: var(--space-2); }
  .topbar .brand { flex: none; }
  .topbar .tools { min-width: 0; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
  .flux-page { padding: var(--space-4) var(--space-4) var(--space-7); }
  .flux-page > .bar { display: none; }
  .grid { grid-template-columns: 1fr; gap: var(--space-4); }
  /* Une seule ligne de boutons, même avec les 3 lecteurs Android : écart réduit, et les boutons des
     lecteurs rétrécissent un peu sur les écrans étroits */
  .actions { flex-wrap: nowrap; gap: 6px; }
  .actions .btn:not(.btn-danger):not(.btn-share) { flex: 1 1 auto; min-width: 0; }
  .actions .btn-danger, .actions .btn-share { flex: none; }
  .btn-logo > svg, .btn-logo > img { min-width: 0; max-width: 100%; height: auto; flex-shrink: 1; }
  .btn-noads { padding: 0 10px 0 2px; }
  .noads-logo { flex-shrink: 1; }
  .noads-logo > svg:first-child { min-width: 0; max-width: 100%; height: auto; }
}

/* Réglages des catégories (sprint 3.5) */
.settings-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-5); }
.settings-head .save-status { margin-left: auto; min-height: 1.4em; }
.settings-title { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.settings-title .h-display { min-width: 0; }
.settings-title .btn { flex: none; }
.settings-panels { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start; }
.settings-panel { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cat-panel { flex: 1 1 320px; }
.ch-panel { flex: 2 1 480px; }
.cat-row, .ch-row { display: flex; align-items: center; gap: var(--space-2); }
.cat-list .cat-row, .ch-list .ch-row { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.cat-name, .ch-info { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cat-edit { flex: 1; min-width: 0; }
.count-pill { padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-surface-raised); }
.cat-row [data-act="delete"] { color: var(--color-danger); }
.cat-add { display: flex; gap: var(--space-2); }
.cat-add .input { flex: 1; min-width: 0; }
.ch-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ch-head .input { flex: 0 1 240px; min-width: 0; }
.settings-panel .chip { min-height: 44px; cursor: pointer; font-family: var(--font-body); }
.ch-info { display: flex; align-items: center; gap: var(--space-2); }
/* Chaîne nouvelle : pastille après le nom (le nom est coupé avant elle s'il est trop long) */
.new-pill { flex: none; padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-on-accent); font-size: 11px; font-weight: 700; }
.ch-row .count-pill { flex: none; }
/* Avatar + nom : bouton vers les vidéos de la chaîne (désactivé si elle n'en a aucune) */
.ch-link { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: var(--space-2); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ch-link:hover:not(:disabled) .ch-name { color: var(--color-accent-text); text-decoration: underline; }
.ch-link:disabled { cursor: default; }
.ch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 36px; height: 36px; flex: none; border-radius: var(--radius-full); background: var(--color-surface-raised); object-fit: cover; }
/* Largeur naturelle d'une <select> = son option la plus longue : toutes les listes sont pareilles et lisibles en entier */
.ch-row select { flex: 0 1 auto; min-width: 0; }
@media (max-width: 639px) {
  /* nowrap : en colonne avec retour à la ligne, chaque panneau prendrait la largeur de son contenu le plus long
     (noms de catégories, de chaînes) et déborderait de l'écran */
  .settings-panels { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .settings-panel { flex: none; }
  .ch-head .input { flex: 1 1 100%; }
  .ch-row select { flex-basis: 140px; }
}

/* Confirmation et sélection multiple */
/* Bouton de danger plein : texte background (≈8:1 en sombre sur #ff7b6e, ≈6:1 en clair sur #b3261e) */
.btn-danger-solid { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-background); font-weight: 600; }
.btn-danger-solid:disabled { opacity: 0.5; }
.confirm-wrap { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: transparent; }
.confirm { position: relative; width: 100%; max-width: 400px; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); color: var(--color-text-primary); }
.confirm-msg { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.confirm-foot { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-2); }
.bar > .bar-select { flex: 0 0 auto; }
.select-btn-m { display: none; }
.select-btn-m[aria-pressed="true"], .bar-select .btn[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent-text); }
.selbar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3); margin-bottom: var(--space-4); }
.selbar[hidden] { display: none; }
.selbar-count { margin-right: auto; }
.card-selecting { cursor: pointer; }
.card-selected { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.sel-check { position: absolute; left: 0; top: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sel-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
@media (max-width: 639px) {
  .select-btn-m { display: inline-flex; }
  .selbar { position: fixed; top: auto; left: 0; right: 0; bottom: 0; margin: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .selbar-count { flex: 1 1 100%; }
  .selbar .btn { flex: 1 1 auto; }
  .flux-page.is-selecting { padding-bottom: 160px; }
}
/* Bouton « Effacer les filtres » : caché sans filtre actif (hidden doit l'emporter sur .btn) */
.btn[hidden] { display: none; }
@media (max-width: 639px) {
  .bar-select [data-clear-all] { display: none; }
}

/* Onglets Abonnements | À voir */
.tabs { display: flex; flex: none; gap: var(--space-1); margin-left: var(--space-4); }
.tab { padding: var(--space-2) var(--space-3); border-radius: 999px; color: var(--color-text-secondary); text-decoration: none; font-weight: 600; white-space: nowrap; }
.tab:hover { background: var(--color-border); }
.tab[aria-current="page"] { background: var(--color-accent); color: var(--color-on-accent); }
@media (max-width: 639px) {
  .tabs { order: 3; flex-basis: 100%; margin-left: 0; }
  .tab { flex: 1; text-align: center; }
  /* Sous 640px : « MAJ … » sur sa propre ligne, sous les onglets */
  .topbar .upd { order: 4; flex-basis: 100%; margin-left: 0; }
}

/* Réglages : sélecteur « Catégories | Chaînes », sous 640px seulement (un panneau à la fois) */
.tabs.settings-switch { display: none; margin: 0 0 var(--space-4); }
.settings-switch .tab { min-height: 44px; border: 0; background: none; font-family: var(--font-body); font-size: inherit; cursor: pointer; }
.settings-switch .tab[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent); }
@media (max-width: 639px) {
  .tabs.settings-switch { display: flex; }
  .settings-panels[data-show="cat"] .ch-panel, .settings-panels[data-show="ch"] .cat-panel { display: none; }
}

/* Liste « Chaîne » avec logos (barre ordinateur et panneau Filtres) */
.channel-picker { position: relative; }
.picker-btn { width: 100%; display: flex; align-items: center; gap: var(--space-2); text-align: left; cursor: pointer; }
.picker-btn .picker-name { flex: 1; }
.picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-chevron { flex: none; color: var(--color-text-secondary); }
.picker-avatar { flex: none; width: 24px; height: 24px; border-radius: var(--radius-full); object-fit: cover; background: var(--color-surface-raised); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--color-text-secondary); }
.picker-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: min(360px, 90vw); max-height: 320px; overflow-y: auto; margin: 0; padding: var(--space-1); list-style: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.picker-list:focus { outline: none; }
.picker-list li { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-2); border-radius: var(--radius-md); cursor: pointer; font-size: 15px; }
.picker-list li:hover, .picker-list li.picker-active { background: var(--color-surface-raised); }
.picker-list li[aria-selected="true"] { color: var(--color-accent-text); font-weight: 600; }
/* Panneau Filtres (téléphone) : la liste s'ouvre dans le panneau, qui défile, au lieu de flotter par-dessus */
.sheet .picker-list { position: static; width: auto; max-width: none; margin-top: var(--space-1); }

/* Téléphones étroits (≤ 380 px, ex. 360 px) : logo et titre un peu plus petits pour garder une seule ligne */
@media (max-width: 380px) {
  .topbar .brand .h-display { font-size: 20px; }
  .brand-logo { width: 30px; height: 30px; border-radius: 7px; }
}