/* News: active styles, in cascade order. */
:root { --bg: #0d1317; --panel: #171f26; --line: #28343e; --text: #e0e7ec; --muted: #92a2ae; --accent: #55b5cf; --hover: #1e2b34; --shadow: 0 18px 70px #0003; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body.light { --bg: #f4f7f8; --panel: #fff; --line: #dae3e8; --text: #20303b; --muted: #687c89; --accent: #299bbb; --hover: #eaf2f5; color-scheme: light; }
button, input, a { font: inherit; }
button { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 10px; padding: 11px 16px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
button:hover { background: var(--hover); }
.primary { background: var(--selection,rgba(85,181,207,.10)); color: var(--text); border-color: var(--line); font-weight: 500; }
.primary:hover { background: var(--selection,rgba(85,181,207,.10)); border-color: var(--accent); filter: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
header { padding: 0 32px; border-bottom: 1px solid var(--line); background: var(--panel); display: flex; align-items: center; justify-content: space-between; }
.brand { color: var(--text); text-decoration: none; letter-spacing: -.6px; }
.header-actions { display: flex; }
.layout { display: grid; margin: auto; }
aside { border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; }
nav button { width: 100%; border: 0; justify-content: flex-start; background: transparent; margin: 3px 0; padding: 12px 14px; text-align: left; }
nav button span { flex: 1; }
nav b { font-weight: 500; }
hr { border: 0; border-top: 1px solid var(--line); margin: 23px 0; }
.feed-button { font-size: 14px; }
.feed-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { min-width: 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
h1 { line-height: 1.25; margin: 0 0 7px; }
h2 { letter-spacing: -.3px; margin: 0 0 16px; }
p { margin: 0 0 16px; }
.muted, small { color: var(--muted); }
.page-head p { margin: 0; font-size: 13px; }
.panel { border: 1px solid var(--line); background: var(--panel); }
.search-form { display: flex; }
input { width: 100%; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; color: var(--text); }
input::placeholder { color: var(--muted); }
.search-form input { flex: 1; }
.empty { text-align: center; color: var(--muted); }
.empty .symbol { font-size: 37px; color: var(--accent); margin-bottom: 15px; }
.empty h2 { color: var(--text); margin-bottom: 7px; }
.empty p { font-size: 14px; margin: auto; max-width: 420px; }
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; }
.toolbar button { white-space: nowrap; }
.article { display: flex; border-bottom: 1px solid var(--line); }
.article:first-child { padding-top: 0; }
.article:last-child { border: 0; padding-bottom: 0; }
.article.read { opacity: .65; }
.article-body { flex: 1; min-width: 0; }
.article-meta { color: var(--muted); }
.article-title:hover { color: var(--accent); background: none; }
.article-summary { color: var(--muted); margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-actions { display: flex; align-items: flex-start; gap: 6px; }
.article-actions button { background: transparent; }
.starred { color: var(--accent); }
.feed-row { display: flex; align-items: center; gap: 15px; border-bottom: 1px solid var(--line); }
.feed-row:last-child { border: 0; }
.feed-info { min-width: 0; flex: 1; }
.feed-info strong { display: block; }
.feed-info small { display: block; overflow-wrap: anywhere; }
.danger { color: #ef9797; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 17px; }
label input { display: block; margin-top: 7px; font-weight: 400; }
form small { display: block; margin: -5px 0 17px; font-size: 12px; }
.login .primary { width: 100%; margin-top: 6px; }
#notice { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 13px 20px; border-radius: 12px; box-shadow: var(--shadow); max-width: 90vw; width: max-content; z-index: 10; }
.result { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.result div { min-width: 0; }
.result small { display: block; overflow-wrap: anywhere; }
.count { font-size: 12px; color: var(--muted); }
@media(max-width:800px) {
  .layout { display: block; }
  aside { border-right: 0; border-bottom: 1px solid var(--line); }
  nav { display: flex; }
  nav button { width: auto; flex-shrink: 0; font-size: 13px; padding: 10px; }
  .page-head { align-items: flex-start; }
  .page-head button { font-size: 13px; padding: 10px; }
  .search-form { flex-wrap: wrap; }
  .search-form input { flex-basis: 100%; }
  .search-form button { flex: 1; }
  .toolbar { flex-wrap: wrap; }
  .article-actions { flex-direction: column; }
  .feed-row { flex-wrap: wrap; }
  .result { align-items: flex-start; }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
[hidden] { display: none!important; }
.auth { display: block; width: 100%; max-width: 400px; min-height: 0; margin: 0 auto; padding: 12vh 16px 56px; background: none; }
.auth .login { width: 100%; min-width: 0; max-width: none; margin: 0; padding: 20px; border-radius: 12px; box-shadow: none; }
.login h1 { font-size: 1.6rem; font-weight: 650; line-height: 1.3; margin: 0 0 20px; overflow-wrap: anywhere; }
.login form { display: grid; gap: 14px; min-width: 0; }
.login label { display: grid; gap: 6px; min-width: 0; margin: 0; font-size: .92rem; color: var(--muted); }
.login input { display: block; width: 100%; max-width: 100%; min-width: 0; height: 46px; margin: 0; padding: 0 14px; font: 400 16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-appearance: none; appearance: none; }
.login form small { margin: 0; font-size: .9rem; }
.login .primary { min-height: 46px; margin: 0; padding: 10px 14px; font-size: .92rem; justify-content: center; }
.page-head h1, .article-title, .article-meta, .feed-info strong { overflow-wrap: anywhere; }
.header-actions { min-width: 0; flex-shrink: 0; }
@media(max-width:800px) {
  .page-head { flex-wrap: wrap; }
  .page-head>div { min-width: 0; flex: 1 1 180px; }
  .result { flex-wrap: wrap; }
  .result>div { flex: 1 1 180px; }
}
.article-content { margin-top: 16px; overflow-wrap: anywhere; }
.article-content p { white-space: pre-line; }
.article.expanded.read { opacity: 1; }
.article-summary-trigger, .article-text-trigger { cursor: pointer; border-radius: 4px; }
.article-summary-trigger:focus-visible, .article-text-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.folder-button span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; }
.brand .brand-label { display: inline; color: var(--text); font: inherit; letter-spacing: inherit; }
.brand-icon { flex-shrink: 0; color: var(--accent); }
.ui-icon { flex-shrink: 0; }
.header-actions { gap: 4px; }
.header-actions .icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; padding: 0; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); }
.icon-button svg { width: 22px; height: 22px; flex-shrink: 0; }
.header-actions .icon-button:hover, .header-actions .icon-button.active { color: var(--accent); background: var(--hover); }
.folder-heading { display: flex; align-items: center; min-width: 0; gap: 0; }
nav .folder-toggle { flex-grow: 0; flex-shrink: 0; justify-content: center; }
.folder-toggle .ui-icon { color: var(--muted); transition: transform .15s; }
.folder-toggle[aria-expanded="true"] .ui-icon { transform: rotate(90deg); }
nav .folder-button { min-width: 0; flex: 1; width: auto; }
@media(max-width:800px) {
  header { padding: 0 12px; gap: 8px; }
  .brand { gap: 7px; }
  .header-actions { gap: 0; }
  nav { flex-wrap: wrap; overflow: visible; }
  #feed-nav { display: block; flex-basis: 100%; min-width: 0; }
  #feed-nav .feed-button { max-width: none; width: 100%; min-width: 0; }
  #feed-nav .folder-button { max-width: none; min-width: 0; width: auto; }
}
@media(prefers-reduced-motion:reduce) {
  .folder-toggle .ui-icon { transition: none; }
}
.article-title { display: block; color: var(--text); text-decoration: none; }
:root { --control-height: 40px; --selection: rgba(85,181,207,.10); }
body.light { --selection: rgba(41,155,187,.08); }
header { height: 72px; }
.brand { font-size: 21px; font-weight: 650; }
.brand-icon { width: 23px; height: 23px; }
.layout { max-width: 1360px; min-height: calc(100svh - 72px); }
aside { padding: 24px 14px; }
nav { gap: 2px; }
nav button:not(.folder-toggle) { min-height: 40px; margin: 1px 0; padding: 8px 12px; border-radius: 8px; font-size: .92rem; font-weight: 400; line-height: 1.4; gap: 10px; }
nav button.active { background: var(--selection); color: var(--text); box-shadow: none; }
nav button.active .ui-icon { color: var(--accent); }
nav button:hover { background: var(--selection); }
nav b { font-size: .75rem; color: var(--muted); }
.ui-icon { width: 18px; height: 18px; color: var(--muted); }
nav .folder-toggle { width: 26px; height: 40px; flex-basis: 26px; padding: 6px; margin: 1px 0; }
.folder-toggle .ui-icon { width: 14px; height: 14px; }
nav .folder-button { padding-left: 7px; }
.folder-button .ui-icon { width: 22px; height: 22px; color: var(--accent); }
.folder-feeds { padding-left: 26px; }
main { padding: 28px; }
h1 { font-size: 1.6rem; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; font-weight: 650; margin-bottom: 12px; }
.panel { border-radius: 12px; padding: 20px; margin-bottom: 18px; }
.page-head { margin-bottom: 20px; }
.layout main button:not(.article-actions button) { min-height: var(--control-height); padding: 8px 12px; border-radius: 8px; font-size: .875rem; line-height: 1.4; font-weight: 400; }
.layout input { min-height: 44px; padding: 10px 14px; font-size: 16px; }
.article { padding: 18px 0; gap: 14px; }
.article-title { font-size: 1.05rem; font-weight: 600; line-height: 1.45; }
.article-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.article-meta { font-size: .75rem; margin-bottom: 5px; }
.article-summary { font-size: .9rem; margin-top: 6px; }
.article-content p { font-size: .95rem; line-height: 1.65; }
.article-actions button { min-width: 36px; min-height: 36px; padding: 4px 8px; border-color: transparent; border-radius: 8px; }
.feed-row { padding: 12px 0; }
.empty { padding: 40px 16px; }
@media(min-width:801px) {
  .layout { grid-template-columns: 260px minmax(0,1fr); }
}
@media(max-width:800px) {
  header { height: 64px; }
  .layout { min-height: calc(100svh - 64px); }
  aside { padding: 10px 12px; }
  nav { column-gap: 4px; row-gap: 0; }
  nav>button { flex: 1 1 auto; }
  nav button:not(.folder-toggle) { min-height: 44px; font-size: .875rem; padding: 8px 10px; }
  nav .folder-toggle { height: 44px; }
  nav .folder-button { padding-left: 7px; }
  .folder-feeds { padding-left: 26px; }
  main { padding: 20px 12px; }
  h1 { font-size: 1.35rem; }
  .panel { padding: 16px; }
  .article-title { font-size: 1rem; }
}
.source-search { padding: 16px; border-radius: 10px; }
.source-search h2 { font-size: .95rem; margin-bottom: 10px; font-weight: 600; }
.search-form { gap: 8px; align-items: center; }
.layout .search-form input { height: 40px; min-height: 40px; padding: 0 12px; border-radius: 8px; line-height: 1.5; }
.layout main .search-form button { min-height: 40px; padding: 8px 12px; border-radius: 8px; font-size: .875rem; font-weight: 400; line-height: 1.4; white-space: nowrap; }
.layout main .search-form .primary { background: var(--selection); border-color: var(--line); color: var(--text); font-weight: 500; }
.layout main .search-form .primary:hover { border-color: var(--accent); filter: none; }
.layout input:focus, .layout select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--selection); }
@media(max-width:800px) {
  .layout .search-form input { height: 44px; min-height: 44px; }
  .layout main .search-form button { min-height: 44px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.subscriptions { padding: 16px; }
.subscriptions h2 { font-size: .95rem; font-weight: 600; margin-bottom: 6px; }
.subscriptions .feed-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(120px,170px) auto; gap: 14px; padding: 12px 0; }
.subscriptions .feed-info strong { font-size: .9rem; font-weight: 500; line-height: 1.4; }
.subscriptions .feed-info small { font-size: .75rem; line-height: 1.5; }
.subscriptions .feed-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 2px 0; }
.subscriptions select { width: 100%; height: 34px; padding: 5px 8px; background: transparent; border-color: var(--line); border-radius: 6px; font-size: .8125rem; font-weight: 400; color: var(--muted); }
.feed-actions { display: flex; align-items: center; gap: 2px; }
.layout main .subscriptions .feed-actions button { width: 34px; height: 34px; min-height: 34px; padding: 7px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); }
.feed-actions .ui-icon { width: 16px; height: 16px; color: currentColor; }
.layout main .subscriptions .feed-actions button:hover { color: var(--accent); background: var(--selection); }
.layout main .subscriptions .feed-actions button.danger:hover { color: #d46565; }
@media(max-width:640px) {
  .subscriptions .feed-row { grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; }
  .subscriptions .feed-info { grid-column: 1 / -1; }
  .subscriptions select { height: 44px; font-size: 16px; }
  .layout main .subscriptions .feed-actions button { width: 44px; height: 44px; min-height: 44px; padding: 12px; }
}
.panel.account { width: 100%; max-width: none; padding: 18px; border-radius: 10px; }
.account h2 { font-size: .95rem; font-weight: 600; margin-bottom: 16px; }
.account form { display: grid; gap: 12px; min-width: 0; }
.account label { display: grid; gap: 6px; min-width: 0; margin: 0; font-size: .8125rem; font-weight: 500; color: var(--muted); }
.layout .account input { height: 40px; min-height: 40px; margin: 0; padding: 0 12px; border-radius: 8px; font-size: 16px; font-weight: 400; }
.account small, .account p.muted { font-size: .75rem; line-height: 1.55; }
.account form small { margin: 0; }
.account p.muted { margin-bottom: 12px; }
.layout main .account button { justify-self: start; min-height: 40px; max-width: 100%; padding: 8px 12px; border-radius: 8px; font-size: .875rem; font-weight: 500; line-height: 1.4; }
.layout main .account .primary { background: var(--selection); border-color: var(--line); color: var(--text); }
.layout main .account .primary:hover { border-color: var(--accent); filter: none; }
.account hr { margin: 18px 0; }
.layout .account input[type="file"] { height: auto; min-height: 40px; max-width: 100%; padding: 5px; font-size: .8125rem; color: var(--muted); background: transparent; overflow: hidden; }
.account input::file-selector-button { margin-right: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; color: var(--text); background: var(--selection); cursor: pointer; }
@media(max-width:800px) {
  .panel.account { max-width: 100%; padding: 16px; }
  .layout .account input { height: 44px; min-height: 44px; }
  .layout main .account button { min-height: 44px; }
}
@media(pointer:coarse) {
  html, body { touch-action: pan-x pan-y; }
}
.layout main button.primary { background: var(--selection); color: var(--text); border-color: var(--line); font-weight: 500; }
.layout main button.primary:hover { border-color: var(--accent); filter: none; }
button:disabled { opacity: .5; cursor: wait; filter: none; }
button.primary:disabled:hover { border-color: var(--line); background: var(--selection); }
#results h2 { font-size: .95rem; font-weight: 600; margin-bottom: 6px; }
.result { padding: 12px 0; gap: 12px; }
.result:last-child { border-bottom: 0; padding-bottom: 0; }
.result strong { font-size: .9rem; font-weight: 500; }
.result small { font-size: .75rem; line-height: 1.5; margin-top: 2px; }
.result button { flex-shrink: 0; }
.page-head button .ui-icon, .toolbar button .ui-icon { width: 16px; height: 16px; color: currentColor; }
@media(max-width:800px) {
  .layout main button:not(.article-actions button) { min-height: 44px; }
  .layout main .subscriptions .feed-actions button { min-height: 44px; height: 44px; width: 44px; }
}
body.red { --bg: #ffffff; --panel: #ffffff; --line: #e3e3e3; --text: #222222; --muted: #6b6b6b; --accent: #d90000; --hover: #f6f6f6; --selection: rgba(217,0,0,.055); --shadow: 0 12px 40px #0000000a; color-scheme: light; }
body.red .primary, body.red .layout main button.primary, body.red .layout main .search-form .primary, body.red .layout main .account .primary { background: var(--accent); border-color: var(--accent); color: #ffffff; }
body.red .primary:hover, body.red .layout main button.primary:hover { background: #bf0000; border-color: #bf0000; color: #ffffff; filter: none; }
body.red .primary:disabled:hover { background: var(--accent); border-color: var(--accent); }
body.red .danger, body.red .layout main .subscriptions .feed-actions button.danger:hover { color: #b40000; }
body.red h1, body.red h2, body.red h3, body.red .article-title { color: var(--accent); }
@media(max-width:800px) {
  nav>button[data-view="all"] { flex: 0 0 100%; width: 100%; }
}
.article-toolbar { gap: 8px; flex-wrap: wrap; }
.article-toolbar #unread-filter.active { background: var(--selection); border-color: var(--accent); }
.article-toolbar .ui-icon { width: 16px; height: 16px; color: currentColor; }
@media(max-width:800px) {
  .article-toolbar { flex-wrap: nowrap; gap: 6px; }
  .layout main .article-toolbar button { padding: 8px; font-size: .8125rem; white-space: normal; min-width: 0; }
}

/* Weekday pills use distinct, readable weekend palettes in each theme. */
:root{--day-bg:#223039;--day-text:#b8cbd6;--sat-bg:#173b49;--sat-text:#82d3eb;--sun-bg:#31304a;--sun-text:#c4bcf4}
body.light{--day-bg:#edf1f4;--day-text:#526575;--sat-bg:#e4f3f8;--sat-text:#21627a;--sun-bg:#eeebfa;--sun-text:#61508c}
body.red{--day-bg:#f1f1f1;--day-text:#555555;--sat-bg:#fff2df;--sat-text:#895614;--sun-bg:#ffebeb;--sun-text:#ac1818}
.article-heading{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.article-heading .article-title{min-width:0;flex:1 1 180px}
.event-day{display:inline-flex;align-items:center;flex:0 0 auto;padding:3px 9px;border-radius:999px;background:var(--day-bg);color:var(--day-text);font-size:.6875rem;font-weight:500;line-height:1.5;white-space:nowrap}
.event-day.saturday{background:var(--sat-bg);color:var(--sat-text)}
.event-day.sunday{background:var(--sun-bg);color:var(--sun-text)}
.hashtag-settings{padding:16px}
.hashtag-settings h2{font-size:.95rem;font-weight:600}
.hashtag-filters,.saved-hashtags{display:flex;flex-wrap:wrap;gap:8px}
.hashtag-filters{margin:-10px 0 20px}
.saved-hashtags{margin-top:12px}
.saved-hashtag{display:inline-flex;align-items:center;gap:4px;padding-left:10px;border:1px solid var(--line);border-radius:999px;font-size:.8125rem;color:var(--muted)}
.layout main .saved-hashtag button{padding:4px 8px;min-height:32px;background:transparent;border:0;color:var(--muted)}
@media(max-width:800px){.layout main .saved-hashtag button{min-height:44px}}
.prim-settings{padding:16px}
.prim-settings h2{font-size:.95rem;font-weight:600}
.prim-settings p{font-size:.75rem;line-height:1.55}
.prim-settings form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px;margin-top:14px}
.prim-settings label{display:grid;gap:6px;margin:0;min-width:0;font-size:.8125rem;font-weight:500;color:var(--muted)}
.prim-settings select{width:100%;min-width:0;height:40px;font-size:16px;font-weight:400;padding:6px 10px}
.prim-settings form button{grid-column:1 / -1;justify-self:start}
@media(max-width:800px){.prim-settings form{grid-template-columns:minmax(0,1fr)}.prim-settings select{height:44px}}

/* Point de déclenchement du chargement progressif des articles. */
.article-sentinel{min-height:1px}

.invitation-output{margin-top:14px}
.invitation-output input{width:100%}
.invitation-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}

/* Sable et ardoise : ivoire chaud, taupe, bronze et gris bleuté. */
body.sand {
  --bg:#eee8e0; --panel:#faf6f0; --line:#d6cec3;
  --text:#383b43; --muted:#68645f; --accent:#77583b;
  --hover:#e9e2d8; --selection:#e6ddd0;
  --shadow:0 12px 40px #53453412;
  --day-bg:#e9e2d9; --day-text:#62584e;
  --sat-bg:#e0e7ed; --sat-text:#405c73;
  --sun-bg:#e9e0ed; --sun-text:#6b4e78;
  color-scheme:light;
  background:linear-gradient(135deg,#f3eadc 0%,#ede7e1 45%,#e2e7ed 100%) fixed;
}
body.sand header { background:#f3ece3; }
body.sand h1, body.sand h2, body.sand h3 { color:#5f4c3c; }
body.sand .danger, body.sand .layout main .subscriptions .feed-actions button.danger:hover { color:#a3423d; }


.article-filters{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px;min-width:0}
.article-filters .hashtag-filters{margin:0;flex:0 1 auto;min-width:0}
.layout #article-search{flex:1 1 240px;width:auto;min-width:0;max-width:420px;height:40px;margin:0;padding:8px 12px;font-size:16px;border-radius:8px}
@media(max-width:600px){.layout #article-search{flex-basis:100%;max-width:none;height:44px}}

/* Recherche à la suite des trois commandes, y compris sur mobile. */
.article-toolbar{flex-wrap:nowrap}
.layout .article-toolbar #article-search{flex:1 1 0;min-width:0;max-width:none}
.layout main .article-toolbar>button{flex:0 0 40px;width:40px;height:40px;padding:8px}
@media(max-width:800px){.layout main .article-toolbar>button{flex-basis:44px;width:44px;height:44px}}

.page-head>button[data-action="refresh"]{flex:0 0 40px;width:40px;height:40px;padding:8px}
button[data-action="refresh"][aria-busy="true"] .ui-icon{animation:refresh-spin .9s linear infinite;transform-origin:center}
@keyframes refresh-spin{to{transform:rotate(360deg)}}
@media(max-width:800px){.page-head>button[data-action="refresh"]{flex-basis:44px;width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){button[data-action="refresh"][aria-busy="true"] .ui-icon{animation:none}}

.layout .account input[type="checkbox"]{width:16px;height:16px;min-height:16px;padding:0;appearance:auto;-webkit-appearance:checkbox;justify-self:start}

/* Les chevrons ne changent pas de fond lors des interactions. */
nav .folder-toggle,nav .folder-toggle:hover,nav .folder-toggle:active,nav .folder-toggle:focus,nav .folder-toggle.active{background:transparent;box-shadow:none;-webkit-tap-highlight-color:transparent}

.article-meta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.article-source{min-width:0}

.account label.restore-confirm{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.layout .account .restore-confirm input[type="checkbox"]{flex:0 0 16px;margin:3px 0 0}
.restore-confirm span{flex:1;min-width:0}

nav button b{flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums}

.feed-disabled .feed-info{color:var(--muted)}
.feed-actions button:disabled{cursor:default}

.hashtag-chip{position:relative;display:inline-flex;min-width:0;max-width:240px}
.hashtag-chip>[data-hashtag]{min-width:0;max-width:100%}
.hashtag-chip>[data-hashtag]>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layout main .hashtag-filters .hashtag-remove{position:absolute;right:-5px;top:-7px;min-height:20px;width:20px;height:20px;padding:0;border-radius:50%;font-size:15px;line-height:1;opacity:1;pointer-events:auto;background:var(--panel);color:var(--muted);border:1px solid var(--line)}
@media(hover:none){.layout main .hashtag-filters .hashtag-remove{opacity:1;pointer-events:auto;min-height:28px;width:28px;height:28px;top:-10px;right:-8px}.hashtag-filters{gap:14px}}

.article-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.article-tag,.layout main .hashtag-filters button[data-hashtag]{display:inline-flex;align-items:center;max-width:100%;min-height:0;padding:3px 9px;border:0;border-radius:999px;background:var(--selection);color:var(--muted);font-size:.6875rem;font-weight:400;line-height:1.5;overflow-wrap:anywhere}
.layout main .hashtag-filters button[data-hashtag]:hover{color:var(--accent)}
.layout main .hashtag-filters button[data-hashtag].active{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}

/* Feed discovery: compact icon button and pending indicator. */
.layout main .search-form .discover-button{flex:0 0 40px;width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.discover-button span{display:inline-flex;align-items:center;justify-content:center}
.discover-button .discover-wait{display:none}
.discover-button[aria-busy="true"] .discover-idle{display:none}
.discover-button[aria-busy="true"] .discover-wait{display:inline-flex}
.discover-button[aria-busy="true"] .ui-icon{animation:discover-hourglass 1.4s ease-in-out infinite;transform-origin:center}
@keyframes discover-hourglass{0%,30%{transform:rotate(0)}70%,100%{transform:rotate(180deg)}}
@media(max-width:800px){.layout main .search-form .discover-button{flex-basis:44px;width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.discover-button[aria-busy="true"] .ui-icon{animation:none}}

.user-identity{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-weight:400}

.users-panel .feed-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:center;gap:12px;border-bottom:0;min-height:64px}
.users-panel .feed-row .invitation-output{display:flex;align-items:center;gap:8px;min-width:0;margin-top:0}
.users-panel .invitation-output[hidden]{display:none}
.users-panel .invitation-output input{flex:1;min-width:0;width:0}
.users-panel .reset-validity{white-space:nowrap}
.layout main .users-panel button[data-action="copyPasswordReset"]{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;padding:0}
.users-panel .user-identity{min-width:0;gap:6px}
.users-panel .user-identity>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
@media(max-width:800px){.users-panel .feed-row{min-height:68px;gap:8px}.layout main .users-panel button[data-action="copyPasswordReset"]{flex-basis:44px;width:44px;height:44px}.users-panel .invitation-output{gap:5px}}


#feed-nav [data-folder-drag] { cursor: grab; }
#feed-nav [data-folder-drag]:active { cursor: grabbing; }
#feed-nav [data-folder-item] { position: relative; }
#feed-nav .drop-before::before, #feed-nav .drop-after::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); pointer-events: none; }
#feed-nav .drop-before::before { top: 0; }
#feed-nav .drop-after::after { bottom: 0; }

#feed-nav [data-feed-drag] { cursor: grab; }
#feed-nav [data-feed-drag]:active { cursor: grabbing; }
#feed-nav .feed-root-drop { display: none; padding: 12px; margin: 6px 0; border: 1px dashed var(--muted); border-radius: 8px; color: var(--muted); }
#feed-nav.feed-dragging .feed-root-drop { display: block; }
#feed-nav .feed-drop-active { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }

/* Completed items from the dev task list. */
.article-text-trigger { color: var(--muted); }
.layout nav>button[data-view="star"] { width: 100%; flex: 0 0 auto; }
.article-actions [data-action="share"] { color: var(--muted); }
@media(max-width:800px) { .layout nav>button[data-view="star"] { width: max-content; flex: 0 0 auto; } }

.inline-feed-name{display:inline-flex!important;width:auto!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--text)!important;font:inherit!important;font-weight:500!important;text-align:left!important;justify-content:flex-start!important}
.inline-feed-name:hover{color:var(--accent)!important;text-decoration:underline}
.inline-rename-input{width:min(100%,360px)!important;min-height:36px!important;padding:5px 9px!important;font-size:.9rem!important}
.result-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.result-actions select{width:auto;max-width:180px;min-height:40px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font-size:.85rem}
.popular-row{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.popular-row:last-child{border-bottom:0;padding-bottom:0}
.popular-row:first-child{padding-top:0}
.popular-row .feed-info strong{font-size:.95rem;font-weight:500}
.layout main .popular-row button{flex:0 0 40px;width:40px;height:40px;min-height:40px;padding:8px;border-radius:9px;font-size:1.3rem}
.layout main .popular-row .popular-subscribed{color:var(--muted);background:transparent;border-color:transparent;cursor:default;opacity:.7}
body.red .layout main .discover-button{color:#fff}
@media(max-width:800px){.result-actions{width:100%;justify-content:flex-end}.result-actions select{flex:1;max-width:none}.inline-rename-input{font-size:16px!important}}

#feed-nav [data-feed-drag]{touch-action:pan-y;user-select:none;-webkit-user-select:none}
#feed-nav [data-feed-drag].feed-touch-source{opacity:.55;outline:2px solid var(--accent);outline-offset:2px;cursor:grabbing}
#feed-nav [data-feed-drop].feed-drop-active{background:var(--selection)}