@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap'); :root { --ink: #ffffff; --ink-surface: #f4f4f4; --ink-surface-high: #e8e8e8; --hairline: #d8d8d8; --paper: #111111; --paper-muted: #6b6b6b; --pulse: #111111; /* noir plein — Culture */ --sage: #5a5a5a; /* gris — Société */ --gold: #333333; --scrim-rgb: 255, 255, 255; /* même teinte que --ink, en RGB pour rgba() */ --font-display: 'Fraunces', serif; --font-body: 'Inter', sans-serif; --font-mono: 'IBM Plex Mono', monospace; --radius-lg: 20px; --radius-md: 14px; --radius-full: 100px; color-scheme: light; } /* Mode sombre — activé via data-theme="dark" sur (voir js/theme.js). Reste volontairement en noir et blanc, sans couleurs. */ :root[data-theme="dark"] { --ink: #0d0d0d; --ink-surface: #171717; --ink-surface-high: #212121; --hairline: #303030; --paper: #f5f5f5; --paper-muted: #949494; --pulse: #f5f5f5; /* blanc plein — Culture */ --sage: #a3a3a3; /* gris clair — Société */ --gold: #cfcfcf; --scrim-rgb: 13, 13, 13; color-scheme: dark; } /* --- Interrupteur clair/sombre --- */ .theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; color: var(--paper-muted); background: transparent; cursor: pointer; font-size: 15px; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--paper-muted); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--ink); color: var(--paper); font-family: var(--font-body); scroll-behavior: smooth; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } .wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; } /* --- Header --- */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 28px 0 6px; } .wordmark { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: 1.2px; margin: 0; } .tagline { color: var(--paper-muted); font-size: 15px; margin: 0 0 20px; max-width: 46ch; } .icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; color: var(--paper-muted); background: transparent; cursor: pointer; } .icon-btn:hover { border-color: var(--paper-muted); } /* --- Nav (bottom on mobile, top pill on desktop) --- */ .site-nav { position: sticky; top: 0; z-index: 20; background: rgba(var(--scrim-rgb), 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); } .site-nav--fixed { position: fixed; top: 0; left: 0; right: 0; } .site-nav .wrap { display: flex; align-items: center; gap: 28px; padding-top: 10px; padding-bottom: 10px; } .nav-logo { height: 30px; width: auto; flex-shrink: 0; margin-right: 4px; } .nav-links { display: flex; gap: 24px; overflow-x: auto; } .site-nav a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.6px; color: var(--paper-muted); padding-bottom: 4px; border-bottom: 2px solid transparent; } .site-nav a.active, .site-nav a:hover { color: var(--paper); border-bottom-color: var(--pulse); } /* --- Category chips --- */ .chip-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 20px; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-full); border: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.6px; color: var(--paper-muted); background: transparent; cursor: pointer; white-space: nowrap; } .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .chip[data-cat="Culture"] { color: var(--pulse); } .chip[data-cat="Société"] { color: var(--sage); } .chip[data-cat="Tout"] { color: var(--paper-muted); } .chip.active { color: var(--paper) !important; border-color: var(--paper); } .chip.active[data-cat="Culture"] { border-color: var(--pulse); background: rgba(255,90,60,0.14); } .chip.active[data-cat="Société"] { border-color: var(--sage); background: rgba(111,191,155,0.14); } /* --- Echo cover (signature ripple art) --- */ .echo-cover { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(135deg, var(--ink-surface), var(--ink-surface-high)); } .echo-cover svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* --- Lead article --- */ .lead-card { height: 340px; display: flex; align-items: flex-end; margin-bottom: 8px; } .lead-card .overlay { position: relative; z-index: 2; width: 100%; padding: 24px; background: linear-gradient(to bottom, transparent, rgba(var(--scrim-rgb),0.6) 40%, rgba(var(--scrim-rgb),0.95)); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .meta-row { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.7px; color: var(--paper-muted); } .meta-row .dot { width: 6px; height: 6px; border-radius: 50%; } .meta-row .cat { font-weight: 600; } .lead-card h1 { font-family: var(--font-display); font-size: 30px; line-height: 1.15; margin: 10px 0 0; font-weight: 600; } /* --- Section header --- */ .section-header { margin: 34px 0 14px; font-family: var(--font-display); font-size: 18px; font-weight: 600; } /* --- Article list tiles --- */ .tile { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hairline); cursor: pointer; } .tile:first-child { padding-top: 0; } .tile .echo-cover { width: 84px; height: 84px; flex-shrink: 0; } .tile h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.25; margin: 6px 0 0; } /* --- Article page --- */ .article-hero { height: 260px; position: relative; } .article-hero .icon-btn { position: absolute; top: 16px; left: 16px; background: rgba(var(--scrim-rgb),0.55); border-color: var(--hairline); } .article-body { padding-top: 24px; } .article-body h1 { font-family: var(--font-display); font-size: 32px; line-height: 1.15; margin: 14px 0; } .byline { color: var(--paper-muted); font-size: 14px; } hr.hairline { border: none; border-top: 1px solid var(--hairline); margin: 36px 0; } .lede { font-weight: 600; color: var(--paper); font-size: 17px; line-height: 1.55; } .article-text p { font-size: 16px; line-height: 1.65; color: var(--paper); white-space: pre-line; } /* --- Punchlines --- */ .punchline-scroller { height: calc(100vh - 160px); overflow-y: auto; scroll-snap-type: y mandatory; } .punchline-slide { height: calc(100vh - 160px); scroll-snap-align: start; display: flex; align-items: center; justify-content: center; padding: 12px 20px; } .punchline-card { max-width: 560px; width: 100%; padding: 28px; border-radius: 24px; background: var(--ink-surface); border: 1px solid var(--hairline); } .punchline-card .quote-mark { font-family: var(--font-display); font-size: 88px; line-height: 0.6; font-weight: 600; margin: 0 0 8px; } .punchline-card p.quote { font-family: var(--font-display); font-size: 25px; font-weight: 600; line-height: 1.28; margin: 0 0 26px; } .waveform { display: flex; align-items: flex-end; gap: 5px; height: 26px; margin-bottom: 18px; } .waveform span { width: 3px; border-radius: 2px; opacity: 0.75; } .punchline-card .author { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.6px; font-weight: 600; margin: 0; } .punchline-card .context { color: var(--paper-muted); font-size: 13px; margin: 2px 0 0; } /* --- Media grid (Clips / Sons / Cinéma) --- */ .media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 6px 0 20px; } @media (max-width: 480px) { .media-grid { grid-template-columns: 1fr; } } .media-card { border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; background: var(--ink-surface); position: relative; } .media-cover-link { display: block; } .media-cover-link .echo-cover { height: 130px; } .media-card .info { padding: 12px 14px 14px; } .media-title-link { text-decoration: none; } .media-card h3 { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin: 0 0 4px; line-height: 1.25; } .media-title-link:hover h3 { text-decoration: underline; } .read-more { background: none; border: none; padding: 0; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3px; color: var(--pulse); cursor: pointer; text-decoration: underline; } .media-card .source { font-size: 12px; color: var(--paper-muted); margin: 0; } .media-card .note { font-size: 12px; color: var(--paper-muted); margin: 6px 0 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .media-card .note.expanded { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .media-card .draft-badge { position: absolute; top: 10px; right: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.5px; padding: 3px 8px; border-radius: var(--radius-full); background: rgba(232, 178, 92, 0.18); color: var(--gold); border: 1px solid var(--gold); } .empty-state { text-align: center; padding: 60px 20px; color: var(--paper-muted); } .empty-state .glyph { font-size: 32px; margin-bottom: 12px; opacity: 0.6; } .empty-state a { color: var(--pulse); text-decoration: underline; } #sonsGallery { height: 220px; border-radius: var(--radius-lg); border: 1px solid var(--hairline); background: var(--ink-surface); overflow: hidden; margin: 6px 0 24px; cursor: grab; } #sonsGallery:active { cursor: grabbing; } /* --- Forms (Admin / Contact) --- */ .field { margin-bottom: 16px; } .field label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.6px; color: var(--paper-muted); margin-bottom: 6px; } .field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--ink-surface); color: var(--paper); font-family: var(--font-body); font-size: 14px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--pulse); } .field textarea { resize: vertical; min-height: 90px; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: var(--radius-full); border: none; background: var(--pulse); color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; } .btn:hover { opacity: 0.92; } .btn.secondary { background: transparent; border: 1px solid var(--hairline); color: var(--paper); } .admin-list { margin-top: 30px; } .admin-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--hairline); } .admin-row .label { font-size: 14px; } .admin-row .label .cat { font-family: var(--font-mono); font-size: 10px; color: var(--paper-muted); display: block; margin-bottom: 2px; } .admin-row button { background: transparent; border: 1px solid var(--hairline); color: var(--paper-muted); border-radius: var(--radius-full); padding: 6px 12px; font-size: 12px; cursor: pointer; } .admin-row button:hover { color: var(--pulse); border-color: var(--pulse); } .code-box { background: var(--ink-surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--paper); white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow-y: auto; } .contact-card { border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 18px; margin-bottom: 12px; display: flex; align-items: center; gap: 14px; } .contact-card .glyph { width: 40px; height: 40px; border-radius: 50%; background: var(--ink-surface-high); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .contact-card h4 { margin: 0 0 2px; font-family: var(--font-display); font-size: 15px; } .contact-card p { margin: 0; color: var(--paper-muted); font-size: 13px; } /* --- Barre d'engagement (vues, likes, partage, commentaires) --- */ .engagement-bar { display: flex; align-items: center; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); } .stat, .stat-btn { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--paper-muted); background: none; border: none; padding: 4px 6px; border-radius: 6px; cursor: default; } .stat-btn { cursor: pointer; } .stat-btn:hover { background: var(--ink-surface-high); color: var(--paper); } .stat-btn svg, .stat svg { width: 14px; height: 14px; flex-shrink: 0; } .stat-btn.is-active { color: var(--pulse); } .stat-btn.is-active svg { fill: var(--pulse); } .comments-panel { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); } .comments-panel[hidden] { display: none; } .comment-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 12px; } .comment-item:last-child { border-bottom: none; } .comment-avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--ink-surface-high); } .comment-avatar svg { width: 100%; height: 100%; } .comment-item .name { font-family: var(--font-mono); font-weight: 600; color: var(--paper); margin-right: 6px; display: block; } .comment-item .text { color: var(--paper-muted); } .comment-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .comment-form input { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--ink); color: var(--paper); font-family: var(--font-body); font-size: 12px; } .comment-form button { align-self: flex-end; background: var(--pulse); color: var(--ink); border: none; padding: 6px 14px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; cursor: pointer; } .youtube-comments-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--paper-muted); margin: 0 0 8px; } /* --- Footer complet (à propos + réseaux sociaux) --- */ .footer-full { border-top: 1px solid var(--hairline); margin-top: 60px; background: var(--ink-surface); } .footer-grid { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 36px; padding: 48px 0 36px; } @media (max-width: 680px) { .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 28px; } } .footer-logo { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: 1px; } .footer-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; color: var(--paper-muted); margin: 0 0 12px; } .footer-col p { color: var(--paper-muted); font-size: 14px; line-height: 1.65; margin: 0; } .social-icons { display: flex; gap: 10px; } @media (max-width: 680px) { .social-icons { justify-content: center; } } .social-icons a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; color: var(--paper-muted); } .social-icons a svg { width: 17px; height: 17px; } .social-icons a:hover { border-color: var(--paper); color: var(--paper); } .footer-bottom { border-top: 1px solid var(--hairline); padding: 16px 0 28px; font-size: 12px; color: var(--paper-muted); } footer.site-footer { border-top: 1px solid var(--hairline); margin-top: 60px; padding: 28px 0 60px; color: var(--paper-muted); font-size: 13px; } /* --- Défilement fluide + panneaux d'intro (effet "scene") --- */ .scene { position: fixed; inset: 0; overflow: hidden; z-index: 0; background: linear-gradient( to top, color-mix(in srgb, var(--ink) 100%, black 0%) 0%, color-mix(in srgb, var(--ink-surface) 100%, black 10%) 50%, var(--ink-surface-high) 100% ); background-size: 100% 400%; background-position-y: 100%; } .scroll-track { position: relative; z-index: 1; display: block; inline-size: 100%; will-change: transform; } .intro-panel { min-block-size: 100svh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; text-align: center; padding: 6vw; } .intro-bg { position: absolute; inset-block-end: -0.1em; left: 50%; translate: -50% 0; font-family: var(--font-display); font-size: clamp(10rem, 26vw, 26rem); line-height: 1; letter-spacing: -0.03em; color: color-mix(in srgb, var(--paper) 5%, transparent); pointer-events: none; user-select: none; white-space: nowrap; } .intro-copy { position: relative; z-index: 1; max-width: 36rem; } .intro-copy .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--pulse); margin-bottom: 18px; } .intro-copy h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 7vw, 5rem); line-height: 1.02; margin-bottom: 18px; } .intro-copy p { font-family: var(--font-body); font-size: 15px; color: var(--paper-muted); line-height: 1.6; } .scroll-hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; color: var(--pulse); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; animation: hint-pulse 2.5s ease-in-out infinite; } @keyframes hint-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .page-content { position: relative; background: var(--ink); } @media (max-width: 480px) { .lead-card { height: 300px; } .lead-card h1 { font-size: 25px; } }