:root { --bg: #FFFFFF; --ink: #0A0A0A; --ink-soft: #4A4A4A; --line: #0A0A0A; --accent: #0047FF; --accent-ink: #FFFFFF; --invert-bg: #0A0A0A; --invert-ink: #FFFFFF; --tag-campagne-bg: #0A0A0A; --tag-campagne-ink: #FFFFFF; --tag-politique-bg: #FFFFFF; --tag-politique-ink: #0A0A0A; } @media (prefers-color-scheme: dark) { :root { --bg: #0A0A0A; --ink: #F5F5F5; --ink-soft: #ADADAD; --line: #F5F5F5; --accent: #5B8CFF; --accent-ink: #0A0A0A; --invert-bg: #F5F5F5; --invert-ink: #0A0A0A; --tag-campagne-bg: #F5F5F5; --tag-campagne-ink: #0A0A0A; --tag-politique-bg: #0A0A0A; --tag-politique-ink: #F5F5F5; } } :root[data-theme="dark"] { --bg: #0A0A0A; --ink: #F5F5F5; --ink-soft: #ADADAD; --line: #F5F5F5; --accent: #5B8CFF; --accent-ink: #0A0A0A; --invert-bg: #F5F5F5; --invert-ink: #0A0A0A; --tag-campagne-bg: #F5F5F5; --tag-campagne-ink: #0A0A0A; --tag-politique-bg: #0A0A0A; --tag-politique-ink: #F5F5F5; } :root[data-theme="light"] { --bg: #FFFFFF; --ink: #0A0A0A; --ink-soft: #4A4A4A; --line: #0A0A0A; --accent: #0047FF; --accent-ink: #FFFFFF; --invert-bg: #0A0A0A; --invert-ink: #FFFFFF; --tag-campagne-bg: #0A0A0A; --tag-campagne-ink: #FFFFFF; --tag-politique-bg: #FFFFFF; --tag-politique-ink: #0A0A0A; } * { 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 -- sans ça, ce rebond montrait un dégradé blanc par défaut même en thème sombre. */ background: var(--bg); } 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); } /* Nom complet en deux lignes, façon manchette de journal : "Revue de" en accent bleu au-dessus de "PRESSE" en gras blanc avec une ombre portée dure (zéro flou, façon tampon/affiche imprimée -- cohérent avec les bordures franches de 2px déjà utilisées partout, jamais d'ombre floue ailleurs sur ce site) plutôt qu'un simple remplissage plat, pour donner du relief graphique sans sortir de la palette existante. */ .brand-square { width: 28px; height: 28px; background: var(--invert-ink); box-shadow: 3px 3px 0 var(--accent); flex-shrink: 0; margin-right: 3px; /* absorbe le débordement visuel de l'ombre portée */ } .brand-lines { display: flex; flex-direction: column; line-height: 0.95; padding-right: 4px; /* absorbe le débordement visuel de l'ombre portée */ } .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; } .region-picker { position: relative; } .region-picker summary { list-style: none; cursor: pointer; 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); } .region-picker summary::-webkit-details-marker { display: none; } .region-picker[open] summary { background: var(--invert-ink); color: var(--invert-bg); } .region-picker ul { position: absolute; right: 0; top: calc(100% + 2px); background: var(--invert-bg); border: 2px solid var(--invert-ink); list-style: none; margin: 0; padding: 4px; max-height: 60vh; overflow-y: auto; min-width: 230px; } .region-picker li a { display: block; padding: 9px 10px; text-decoration: none; font-size: 0.88rem; color: var(--invert-ink); border-bottom: 1px solid color-mix(in srgb, var(--invert-ink) 20%, transparent); } .region-picker li:last-child a { border-bottom: none; } .region-picker li a:hover { background: var(--accent); color: var(--accent-ink); } .region-picker-sep { height: 0; margin: 4px 6px; border-top: 1px solid color-mix(in srgb, var(--invert-ink) 20%, transparent); } .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; margin-bottom: 8px; } .tag-group { display: flex; align-items: center; gap: 8px; } .tag { display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border: 2px solid var(--ink); } .tag-campagne { background: var(--tag-campagne-bg); color: var(--tag-campagne-ink); } .tag-politique { background: var(--tag-politique-bg); color: var(--tag-politique-ink); } .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); } .parti-dots { display: flex; align-items: center; gap: 4px; } .parti-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; } .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; } .card-ridings { display: flex; flex-wrap: wrap; gap: 10px; } .riding-badge { text-decoration: none; color: var(--ink); font-size: 0.78rem; font-weight: 600; border-bottom: 2px solid var(--accent); } .riding-badge:hover { color: var(--accent); } .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 ne fournit pas ce CSS lui-même -- juste la classe .htmx-request pendant que la requête est en vol -- l'affichage conditionnel est à définir ici. */ .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.` pour égaler la spécificité de ".site-footer p" ci-dessus (sinon celle-ci gagne malgré l'ordre d'écriture et écrase margin-top ici). */ 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; } } /* -- admin -- */ .admin-nav { display: flex; align-items: center; gap: 14px; } .admin-analyse-apercu { text-transform: none; letter-spacing: normal; font-size: 0.86rem; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .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); } /* Liste de triage admin -- cartes plutôt qu'un tableau : sur mobile, un tableau force soit un défilement horizontal (titres coupés, inutilisable) soit un texte minuscule -- une carte empilée garde le titre entier lisible et les boutons d'action assez grands pour le pouce. */ .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 { 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; } /* form comme item flex direct (flex:1, base 140px) -- le bouton dedans n'a besoin que de remplir 100% de cette largeur, pas d'être lui-même un item flex d'un flex imbriqué : évite un double niveau de flex fragile pour un résultat identique. */ .admin-review-actions form { margin: 0; flex: 1 1 140px; } /* `button.` (pas juste `.admin-btn-valider`) pour égaler la spécificité de la règle générique ".admin-page button" plus haut dans ce fichier (0,1,1) -- sans ça, cette dernière gagne malgré l'ordre d'écriture et écrase silencieusement fond/couleur/padding ici (bug constaté : les deux boutons rendaient identiques, plus larges que prévu). */ 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-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; } /* -- nav / tendances -- */ .region-nav { display: flex; align-items: center; gap: 10px; } .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); } .periode-nav { display: flex; gap: 8px; margin: 0 4px 20px; } .periode-lien { padding: 7px 14px; border: 2px solid var(--ink); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; color: var(--ink); } .periode-lien:hover { border-color: var(--accent); color: var(--accent); } .periode-lien.actif { background: var(--ink); color: var(--bg); } .section-title { font-size: 0.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 4px 12px; } .chart-section { margin-bottom: 32px; } .bar-chart { display: flex; flex-direction: column; gap: 10px; } .bar-row { display: grid; grid-template-columns: 64px 1fr 36px; align-items: center; gap: 10px; } .bar-label { font-size: 0.82rem; font-weight: 800; text-align: right; } .bar-track { background: transparent; border: 2px solid var(--line); height: 20px; } .bar-fill { height: 100%; min-width: 3px; } .bar-count { font-size: 0.82rem; font-variant-numeric: tabular-nums; font-weight: 700; } .analyses-section { margin-bottom: 24px; } .analyse-card { border-top: 2px solid var(--ink); padding: 14px 4px; } .feed .analyse-card:last-child, .analyses-section .analyse-card:last-child { border-bottom: 2px solid var(--ink); } .analyse-date { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 6px; } .analyse-nb { font-weight: 400; text-transform: none; color: var(--ink-soft); letter-spacing: normal; } .analyse-texte { font-size: 0.92rem; margin: 0; color: var(--ink); }