/* ========================================================================= articles.css — liste des articles (articles.php) et article (article.php). À charger APRÈS style.css et site-chrome.css. La typographie du corps d'article est la pièce centrale : le contenu vient de TinyMCE et n'était jusqu'ici stylé par rien d'autre que les règles de base de style.css. ========================================================================= */ .art { position: relative; padding-bottom: 70px; isolation: isolate; color: var(--text); font-family: 'Figtree', system-ui, -apple-system, sans-serif; line-height: 1.55; /* Même correction que sur le profil : sans fond, la page s'arrête au dégradé du hero puis retombe sur le radial que style.css pose sur , plus clair à cette hauteur. La cassure se voit à l'endroit où le hero se termine. --void étant la couleur sur laquelle il finit, la jonction devient invisible. */ background: var(--void); } .art *, .art *::before, .art *::after { box-sizing: border-box; } .art img { border-radius: 0; } /* `:where()` ne compte pas dans la specificite : la regle vaut (0,0,1), juste assez pour battre le `a { color:#DDDDDD }` de style.css par l'ordre de chargement, et assez peu pour ceder devant tout composant qui pose sa propre couleur — `.btn-prime`, `.sc-period.is-active`… Ecrite `.art a`, elle valait (0,1,1) et rendait ces composants illisibles. */ :where(.art) a { color: inherit; text-decoration: none; } /* `:where()` neutralise la spécificité : sans lui la règle vaut (0,1,1) et l'emporte sur `.display` (0,1,0), si bien que tous les titres retombaient sur Figtree au lieu d'Archivo. Même correction que pour les liens. */ :where(.art) h1, :where(.art) h2, :where(.art) h3, :where(.art) h4 { color: var(--text); font-family: inherit; } .art p { color: inherit; } .art .kicker { color: var(--muted); } /* ------------------------------------------------------------------ hero -- */ .art-hero { position: relative; padding: 44px 0 30px; } .art-hero-bg { position: absolute; inset: -130px 0 0; z-index: -1; overflow: hidden; pointer-events: none; } .art-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 5, 12, .3) 0%, rgba(4, 5, 12, .7) 60%, var(--void) 100%), repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px); } .art-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin: 12px 0 14px; } .art-lede { color: var(--muted); font-size: 1.02rem; max-width: 54ch; margin: 0; line-height: 1.6; } /* --------------------------------------------------- étiquette et méta --- */ .tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; } .meta { display: flex; margin: 0; align-items: center; gap: 11px; flex-wrap: wrap; font-size: 11px; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; } /* ------------------------------------------------------------ la liste --- */ .art-lead { position: relative; padding: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; border-radius: var(--r-lg); overflow: hidden; clip-path: inset(0); border: 1px solid rgba(140, 160, 255, .2); background: var(--panel); box-shadow: 0 40px 90px -44px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .06); transition: border-color .3s, transform .3s; } .art-lead:hover { border-color: rgba(140, 160, 255, .34); transform: translateY(-3px); } .art-lead-media { position: relative; min-height: 300px; overflow: hidden; } .art-lead-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); } .art-lead:hover .art-lead-media img { transform: scale(1.04); } .art-lead-body { padding: 34px; display: flex; flex-direction: column; justify-content: center; gap: 14px; } .art-lead-body h2 { padding: 0; font-family: 'Archivo', sans-serif; font-stretch: 106%; font-weight: 800; font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.12; letter-spacing: -.012em; margin: 0; text-wrap: balance; } .art-lead-body p { color: var(--muted); margin: 0; font-size: .98rem; line-height: 1.6; max-width: 48ch; } /* Sans visuel, la carte prend un champ dégradé plutôt qu'un trou. */ .art-lead.has-no-image { grid-template-columns: minmax(0, 1fr); } .art-lead.has-no-image::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background: radial-gradient(120% 90% at 8% 0%, rgba(42, 181, 255, .28), transparent 62%), radial-gradient(90% 80% at 100% 100%, rgba(126, 107, 255, .22), transparent 60%); } .read { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text); transition: gap .2s; } .art-lead:hover .read, .art-card:hover .read { gap: 13px; } .art-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .art-card { display: flex; padding: 0; flex-direction: column; border-radius: var(--r-md); overflow: hidden; clip-path: inset(0); border: 1px solid var(--line-soft); background: var(--panel); transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s; } .art-card:hover { transform: translateY(-5px); border-color: rgba(140, 160, 255, .3); box-shadow: 0 26px 54px -26px rgba(0, 0, 0, .95); } .art-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel-2); } .art-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); } .art-card:hover .art-card-media img { transform: scale(1.06); } .art-card-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 18px; } .art-card-body h3 { font-family: 'Archivo', sans-serif; font-stretch: 104%; font-weight: 800; font-size: 1.06rem; line-height: 1.2; letter-spacing: -.01em; margin: 0; } .art-card-body p { margin: 0; color: var(--dim); font-size: .86rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .art-card-body .read { margin-top: auto; padding-top: 4px; } .art-empty { color: var(--dim); text-align: center; padding: 40px 0; } /* ----------------------------------------------------------- l'article --- */ .post { max-width: 760px; margin-inline: auto; padding: 40px 0 0; } .post-back { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); transition: color .2s, gap .2s; } .post-back:hover { color: var(--text); gap: 13px; } .post-head h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.06; letter-spacing: -.015em; margin: 14px 0 16px; text-wrap: balance; font-family: 'Archivo', sans-serif; font-stretch: 104%; font-weight: 800; } .post-figure { margin: 26px 0 0; border-radius: var(--r-md); overflow: hidden; clip-path: inset(0); } .post-figure img { width: 100%; height: auto; } /* Typographie du corps : le HTML vient de TinyMCE, chaque balise possible reçoit donc un traitement explicite. */ .article-content { margin-top: 30px; font-size: 1.04rem; line-height: 1.75; color: #D6DCF5; } .article-content > *:first-child { margin-top: 0; } .article-content p { margin: 0 0 1.2em; } .article-content h2, .article-content h3, .article-content h4 { padding: 0; font-family: 'Archivo', sans-serif; font-stretch: 104%; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; color: var(--text); margin: 1.9em 0 .6em; text-wrap: balance; } .article-content h2 { font-size: 1.55rem; } .article-content h3 { font-size: 1.25rem; } .article-content h4 { font-size: 1.06rem; } .article-content a { color: #9CD8FF; border-bottom: 1px solid rgba(156, 216, 255, .35); transition: color .2s, border-color .2s; } .article-content a:hover { color: #fff; border-bottom-color: #fff; } .article-content strong, .article-content b { color: var(--text); font-weight: 800; } .article-content ul, .article-content ol { margin: 0 0 1.2em; padding-left: 1.3em; color: inherit; } .article-content li { margin-bottom: .5em; } .article-content li::marker { color: var(--violet); } .article-content img { display: block; max-width: 100%; height: auto; margin: 1.8em auto; border-radius: var(--r-md); } .article-content blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--violet); color: var(--muted); font-style: italic; } .article-content blockquote p:last-child { margin-bottom: 0; } .article-content hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; } .article-content code { padding: 2px 6px; border-radius: 6px; background: rgba(140, 160, 255, .1); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; } .article-content pre { margin: 1.6em 0; padding: 16px 18px; border-radius: var(--r-md); background: var(--panel-2); overflow-x: auto; } .article-content pre code { padding: 0; background: none; } .article-content table { width: 100%; border-collapse: collapse; margin: 1.6em 0; } .article-content th, .article-content td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; color: inherit; } .article-content th { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; } /* --------------------------------------------------------- interactions -- */ .post-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--line); } .like-btn { gap: 10px; } .like-btn svg { width: 16px; height: 16px; } .like-btn.is-liked { color: #FFB3C8; box-shadow: inset 0 0 0 1px rgba(255, 92, 140, .4); background: rgba(255, 92, 140, .08); } .like-btn.is-liked svg { fill: currentColor; } .like-count { font-size: .88rem; color: var(--muted); } .like-count b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; } .comments { margin-top: 46px; } .comment-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; } .comment-form label { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .comment-form textarea { width: 100%; min-height: 120px; padding: 14px 15px; border: 0; border-radius: var(--r-sm); font-family: 'Figtree', sans-serif; font-size: .96rem; line-height: 1.6; color: var(--text); background: rgba(4, 5, 12, .62); box-shadow: inset 0 0 0 1px var(--line); resize: vertical; transition: box-shadow .22s, background .22s; } .comment-form textarea::placeholder { color: var(--dim); } .comment-form textarea:focus { outline: none; background: rgba(4, 5, 12, .82); box-shadow: inset 0 0 0 1px rgba(42, 181, 255, .75), 0 0 0 3px rgba(42, 181, 255, .16); } .comment-form .btn { align-self: flex-start; } .comment-login { padding: 14px 16px; border-radius: var(--r-sm); background: rgba(140, 160, 255, .05); box-shadow: inset 0 0 0 1px var(--line-soft); color: var(--muted); font-size: .92rem; margin: 0 0 26px; } .comment-login a { color: var(--text); font-weight: 700; border-bottom: 1px solid var(--line); } .comment-login a:hover { border-bottom-color: var(--cyan); } .comment-list { display: grid; gap: 12px; } .comment { position: relative; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(16, 20, 42, .6), rgba(10, 13, 27, .35)); } .comment-head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; } .comment-av { width: 30px; height: 30px; flex: none; border-radius: 9px; object-fit: cover; background: var(--panel-2); } .comment-head strong { font-size: .9rem; font-weight: 800; } .comment-head span { font-size: 11px; color: var(--dim); letter-spacing: .05em; } .comment-content { margin: 0; white-space: pre-wrap; line-height: 1.6; color: var(--muted); font-size: .94rem; } .comment-delete { position: absolute; top: 12px; right: 12px; } .comment-delete button { padding: 5px 11px; border: 0; border-radius: 999px; background: rgba(255, 74, 74, .09); box-shadow: inset 0 0 0 1px rgba(255, 100, 100, .3); color: #FFB3B3; font-family: inherit; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: color .2s, box-shadow .2s; } .comment-delete button:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 100, 100, .6); } .comment-empty { color: var(--dim); font-size: .92rem; margin: 0; } /* --------------------------------------------------------- à lire après -- */ .post-next { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--line-soft); } /* ---------------------------------------------------------- responsive --- */ @media (max-width: 1000px) { .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .art-lead { grid-template-columns: minmax(0, 1fr); } .art-lead-media { min-height: 0; aspect-ratio: 16 / 9; order: -1; } } @media (max-width: 760px) { .art { padding-bottom: 40px; } .art-hero { padding: 28px 0 22px; } .post { padding: 26px 0 0; } .art-lead-body { padding: 22px 20px 24px; } .art-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } .article-content { font-size: 1rem; } .article-content h2 { font-size: 1.35rem; } .post-actions { gap: 12px; } .comment-delete { position: static; margin-top: 12px; } }