:root { --bg: #FFFFFF; --ink: #0A0A0A; --ink-soft: #4A4A4A; --line: #0A0A0A; --accent: #1B7A3D; --accent-ink: #FFFFFF; --invert-bg: #0A0A0A; --invert-ink: #FFFFFF; } @media (prefers-color-scheme: dark) { :root { --bg: #0A0A0A; --ink: #F5F5F5; --ink-soft: #ADADAD; --line: #F5F5F5; --accent: #4ED180; --accent-ink: #0A0A0A; --invert-bg: #F5F5F5; --invert-ink: #0A0A0A; } } :root[data-theme="dark"] { --bg: #0A0A0A; --ink: #F5F5F5; --ink-soft: #ADADAD; --line: #F5F5F5; --accent: #4ED180; --accent-ink: #0A0A0A; --invert-bg: #F5F5F5; --invert-ink: #0A0A0A; } :root[data-theme="light"] { --bg: #FFFFFF; --ink: #0A0A0A; --ink-soft: #4A4A4A; --line: #0A0A0A; --accent: #1B7A3D; --accent-ink: #FFFFFF; --invert-bg: #0A0A0A; --invert-ink: #FFFFFF; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { /* iOS Safari affiche l'arrière-plan de (pas ) pendant le rebond élastique en haut/bas de page -- voir interface/app/static/ style.css (RP) pour l'historique complet de ce correctif. */ background: var(--bg); overscroll-behavior-y: none; } body { background: var(--bg); color: var(--ink); font-family: -apple-system, "Segoe UI", "Helvetica Neue", ui-sans-serif, sans-serif; line-height: 1.45; -webkit-font-smoothing: antialiased; } a { color: inherit; } .pixel-mark { width: 16px; height: 16px; fill: currentColor; image-rendering: pixelated; flex-shrink: 0; } .site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 8px; padding: 14px 16px; background: var(--invert-bg); color: var(--invert-ink); border-bottom: 2px solid var(--line); } .brand { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 1.05rem; letter-spacing: -0.01em; text-transform: uppercase; text-decoration: none; color: var(--invert-ink); } .brand-square { width: 28px; height: 28px; background: var(--invert-ink); box-shadow: 3px 3px 0 var(--accent); flex-shrink: 0; margin-right: 3px; } .brand-lines { display: flex; flex-direction: column; line-height: 0.95; padding-right: 4px; } .brand-kicker { font-weight: 800; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--invert-ink); } .brand-word { font-weight: 900; font-size: 1.25rem; letter-spacing: -0.01em; text-transform: uppercase; text-shadow: 3px 3px 0 var(--accent); margin-top: 1px; } .page { max-width: 640px; margin: 0 auto; padding: 20px 14px 48px; } .page-title { display: inline-block; font-size: 1.5rem; font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase; margin: 8px 4px 20px; padding-bottom: 6px; border-bottom: 5px solid var(--ink); text-wrap: balance; } .section-header { margin-bottom: 4px; } .eyebrow { margin: 8px 4px 2px; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); text-decoration: none; } .eyebrow a { text-decoration: none; } .eyebrow a:hover { color: var(--accent); } .feed { display: flex; flex-direction: column; } .card { background: var(--bg); color: var(--ink); border-top: 2px solid var(--ink); padding: 16px 4px; transition: background 0.1s ease, color 0.1s ease; } .feed .card:last-child { border-bottom: 2px solid var(--ink); } .card-meta-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 6px; margin-bottom: 8px; } .tag-group { display: flex; align-items: center; flex-wrap: wrap; row-gap: 6px; gap: 8px; } .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border: 2px solid var(--ink); } /* Un seul tag ici (secteur touché) -- pas de dualité campagne/politique comme sur RP. Rempli à l'accent du site pour porter l'identité visuelle sur chaque carte. */ .tag-tarifs { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .tag-langue { display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; padding: 2px 7px; border: 1.5px solid var(--ink-soft); color: var(--ink-soft); } .card-date-group { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; } .card-date { font-size: 0.76rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; } .card-heure { font-size: 0.68rem; color: var(--ink-soft); opacity: 0.75; font-variant-numeric: tabular-nums; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; } .card-title { display: block; font-size: 1.05rem; font-weight: 700; text-decoration: none; color: var(--ink); text-wrap: balance; margin-bottom: 6px; } .card-title:hover { color: var(--accent); } .card-resume { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 10px; } .card-meta-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 0.82rem; } .card-source { color: var(--ink-soft); font-weight: 700; text-transform: uppercase; font-size: 0.74rem; letter-spacing: 0.03em; } .scroll-sentinel { padding: 24px 0; text-align: center; } .scroll-loading { margin: 0; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); } .htmx-indicator { opacity: 0; transition: opacity 0.15s ease; } .htmx-request.htmx-indicator, .htmx-request .htmx-indicator { opacity: 1; } .empty { color: var(--ink-soft); font-size: 0.92rem; padding: 40px 8px; text-align: center; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); } .site-footer { margin-top: 24px; padding: 28px 16px 36px; background: var(--invert-bg); color: var(--invert-ink); font-size: 0.78rem; text-align: center; } .site-footer p { max-width: 640px; margin: 0 auto; } p.site-footer-copyright { margin-top: 10px; color: color-mix(in srgb, var(--invert-ink) 65%, transparent); font-size: 0.7rem; } @media (min-width: 700px) { .page-title { font-size: 1.9rem; } .card { padding: 20px 6px; } } @media (min-width: 900px) { .page--feed { max-width: 1280px; } .site-header { max-width: 1280px; margin: 0 auto; } .feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; gap: 18px; } .card { border: 2px solid var(--ink); border-top: 2px solid var(--ink); padding: 18px; display: flex; flex-direction: column; height: 100%; } .card-resume { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .card-meta-bottom { margin-top: auto; padding-top: 10px; } .scroll-sentinel { grid-column: 1 / -1; } } /* Vue "lecteur" (voir reader.py/routes/admin.py::lire) -- typographie pensée pour la lecture longue, volontairement différente du reste du site (UI dense, majuscules, bordures franches). */ .reader-page { max-width: 680px; } .reader-title { font-size: 1.7rem; font-weight: 800; line-height: 1.25; margin: 8px 0 24px; text-wrap: balance; } .reader-body { font-size: 1.08rem; line-height: 1.7; color: var(--ink); } .reader-body p { margin: 0 0 1.2em; } .reader-body h2, .reader-body h3, .reader-body h4 { font-weight: 800; line-height: 1.3; margin: 1.6em 0 0.6em; } .reader-body h2 { font-size: 1.3rem; } .reader-body h3 { font-size: 1.15rem; } .reader-body img, .reader-body figure { max-width: 100%; height: auto; } .reader-body figure { margin: 1.4em 0; } .reader-body figcaption { font-size: 0.85rem; color: var(--ink-soft); margin-top: 6px; } .reader-body a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); } .reader-body blockquote { margin: 1.4em 0; padding-left: 16px; border-left: 3px solid var(--accent); color: var(--ink-soft); font-style: italic; } .reader-body ul, .reader-body ol { padding-left: 1.4em; margin: 0 0 1.2em; } .reader-body li { margin-bottom: 0.4em; } /* -- admin -- */ .admin-nav { display: flex; align-items: center; gap: 14px; } .link-button { background: none; border: none; color: var(--invert-ink); font-size: 0.8rem; cursor: pointer; text-decoration: underline; text-transform: uppercase; letter-spacing: 0.03em; } .admin-login-page { max-width: 340px; padding-top: 15vh; } .admin-login-form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .admin-login-form input { padding: 11px 12px; border: 2px solid var(--ink); background: var(--bg); color: var(--ink); font-size: 1rem; border-radius: 0; } .admin-login-form button, .admin-page button, .admin-page input[type="submit"] { padding: 11px 16px; border: 2px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--bg); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.86rem; cursor: pointer; } .admin-login-form button:hover, .admin-page button:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .admin-error { color: var(--accent); font-size: 0.88rem; font-weight: 700; } .admin-page { max-width: 700px; width: 100%; } .admin-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .admin-filters select, .admin-filters input { padding: 11px 10px; border: 2px solid var(--ink); border-radius: 0; background: var(--bg); color: var(--ink); font-size: 0.95rem; } .admin-filters input[type="search"] { flex: 1; min-width: 160px; } .admin-filters button { padding: 11px 16px; border: 2px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--bg); cursor: pointer; font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; } .admin-filters button:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } @media (max-width: 480px) { .admin-filters { flex-direction: column; } .admin-filters select, .admin-filters input, .admin-filters button { width: 100%; } } .admin-count { margin: 0 4px 6px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); } .admin-review-list { display: flex; flex-direction: column; } .admin-review-card { border-top: 2px solid var(--ink); padding: 14px 4px 16px; } .admin-review-list .admin-review-card:last-child { border-bottom: 2px solid var(--ink); } .admin-review-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .admin-review-title { display: block; font-size: 1.02rem; font-weight: 700; text-decoration: none; color: var(--ink); text-wrap: balance; } .admin-review-title:hover { color: var(--accent); } .admin-review-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; font-size: 0.78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.02em; } .admin-review-actions { display: flex; flex-wrap: wrap; gap: 8px; } .admin-review-actions form { margin: 0; flex: 1 1 140px; } button.admin-btn-valider, button.admin-btn-masquer { display: block; width: 100%; min-height: 46px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 0; font-weight: 800; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; white-space: nowrap; } button.admin-btn-valider { background: var(--ink); color: var(--bg); } button.admin-btn-valider:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } button.admin-btn-masquer { background: var(--bg); color: var(--ink); } button.admin-btn-masquer:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .admin-review-actions a.admin-btn-editer { flex: 1 1 100%; order: 3; margin-top: 2px; text-align: center; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); text-decoration: none; } .admin-review-actions a.admin-btn-editer:hover { color: var(--accent); } @media (min-width: 480px) { .admin-review-actions a.admin-btn-editer { flex: 0 0 auto; order: 0; margin-top: 0; margin-left: auto; } } .statut-badge { display: inline-block; padding: 2px 9px; border: 2px solid var(--ink); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; } .statut-valide { background: var(--ink); color: var(--bg); } .statut-masque { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .statut-en_attente { background: var(--bg); color: var(--ink); } .admin-duplicate-warning { margin: 8px 0; padding: 8px 12px; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); font-size: 0.82rem; line-height: 1.5; } .admin-duplicate-warning a { color: var(--accent); font-weight: 700; } .admin-meta { display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; font-size: 0.86rem; margin: 16px 0 22px; padding: 14px 16px; border: 2px solid var(--line); } .admin-meta dt { color: var(--ink-soft); font-weight: 700; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.03em; } .admin-meta dd { margin: 0 0 4px; } .admin-edit-form { display: flex; flex-direction: column; gap: 6px; max-width: 560px; } .admin-edit-form label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); margin-top: 10px; } .admin-edit-form input, .admin-edit-form textarea, .admin-edit-form select { padding: 10px 11px; border: 2px solid var(--ink); border-radius: 0; background: var(--bg); color: var(--ink); font-size: 0.92rem; font-family: inherit; } .admin-edit-form button { margin-top: 16px; align-self: flex-start; } .admin-field-hint { margin: 2px 0 0; font-size: 0.74rem; color: var(--ink-soft); text-transform: none; } .admin-edit-form label.admin-checkbox { display: flex; align-items: center; gap: 8px; margin-top: 0; padding: 4px 2px; font-size: 0.88rem; font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--ink); cursor: pointer; } .admin-edit-form label.admin-checkbox input[type="checkbox"] { width: auto; flex-shrink: 0; accent-color: var(--accent); } .admin-edit-form label.admin-checkbox-standalone { margin-top: 10px; border: 2px solid var(--ink); padding: 10px 12px; } .nav-link { padding: 7px 14px; border: 2px solid var(--invert-ink); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--invert-ink); text-decoration: none; } .nav-link:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }