/* ════════════════════════════════════════════════════════════════════════ HISTORY HIT — style.css (refonte "édition premium") ------------------------------------------------------------------------ Conserve ton système : --accent / --bg-tint posés sur par page, --card-accent / --card-tint posés sur chaque carte. Ajoute : grade d'images unifié, système typo, hiérarchie de grille, motion soignée, et le mobilier (filtre, fil d'Ariane, articles liés, partage, à propos). 100 % statique, aucune dépendance. ════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap'); /* ── TOKENS ──────────────────────────────────────────────────────────── */ :root { --cream: #E8E2D8; --cream-2: #C9C2B5; /* texte secondaire, lisible (≠ opacity faible) */ --dark: #07070A; --hairline: rgba(232,226,216,.12); --hairline-strong: rgba(232,226,216,.22); /* Mesure de lecture confortable */ --measure: 40rem; /* ≈ 680px */ /* Échelle typographique fluide (modular ~1.2) */ --t-eyebrow: .72rem; --t-meta: .76rem; --t-body: 1.125rem; /* 18px */ --t-lead: 1.32rem; --t-h2: clamp(1.5rem, 1.1rem + 1.4vw, 1.95rem); --t-card: 1.22rem; --t-hero: clamp(2.1rem, 1.2rem + 4.3vw, 3.6rem); --t-article: clamp(2.3rem, 1.3rem + 4.8vw, 4rem); /* Rythme */ --lh-body: 1.78; --lh-tight: 1.08; /* Easing & durées — une seule personnalité de motion sur tout le site */ --ease: cubic-bezier(.22,.61,.18,1); --ease-soft: cubic-bezier(.33,.1,.25,1); --dur: .55s; --dur-fast: .28s; /* Force du grade (les "boutons" de réglage) */ --grade-veil: .12; /* voile teinté à l'accent sur les images */ --grade-vignette: .42; /* assombrissement des bords */ } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--dark); color: var(--cream); font-family: 'Spectral', Georgia, serif; font-size: var(--t-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* ── GRAIN GLOBAL ──────────────────────────────────────────────────────── Un seul grain sur TOUT le site = la couche qui fait lire 12 images IA disparates comme une même pellicule. Fixe, non cliquable, très discret. */ body::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } ::selection { background: var(--accent); color: var(--dark); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* ── NAV ─────────────────────────────────────────────────────────────── */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem clamp(1.25rem, 4vw, 2.5rem); background: linear-gradient(180deg, rgba(7,7,10,.85) 0%, rgba(7,7,10,0) 100%); backdrop-filter: saturate(140%) blur(2px); -webkit-backdrop-filter: saturate(140%) blur(2px); font-family: 'Archivo', sans-serif; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; } .site-nav a { color: var(--cream); text-decoration: none; opacity: .68; transition: opacity var(--dur-fast) var(--ease); } .site-nav a:hover { opacity: 1; } .nav-brand { font-weight: 700; opacity: 1 !important; letter-spacing: .2em; } .nav-right { display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.75rem); } /* ── HERO (index) ────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 78vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 7rem clamp(1.25rem, 5vw, 3rem) clamp(2.5rem, 5vw, 4rem); background-size: cover; background-position: center; } /* Couche 1 : lisibilité + teinte palette + vignette (tout en bas du texte) */ .hero::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(125% 85% at 50% 32%, transparent 42%, rgba(0,0,0,var(--grade-vignette)) 100%), linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--bg-tint) 58%, var(--dark) 100%); } /* Couche 2 : voile teinté à l'accent (soft-light) = unification "collection" */ .hero::after { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--accent); mix-blend-mode: soft-light; opacity: var(--grade-veil); pointer-events: none; } .hero--no-img::before { background: linear-gradient(180deg, var(--dark) 0%, var(--bg-tint) 40%, var(--dark) 100%); } .hero--no-img::after { opacity: 0; } .hero > * { position: relative; z-index: 1; } .eyebrow, .hero-label { font-family: 'Archivo', sans-serif; font-size: var(--t-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: var(--accent); display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; } .eyebrow::before, .hero-label::before { content: ''; width: 1.6rem; height: 1px; background: currentColor; opacity: .6; } .hero-title { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 144; /* optical sizing display */ font-weight: 700; font-size: var(--t-hero); line-height: var(--lh-tight); letter-spacing: -.018em; max-width: 18ch; margin-bottom: 1.1rem; text-wrap: balance; } .hero-hook { font-family: 'Spectral', serif; font-style: italic; font-size: var(--t-lead); color: var(--cream-2); max-width: 46ch; margin-bottom: 2.2rem; padding-left: 1.1rem; border-left: 2px solid var(--accent); text-wrap: pretty; } .hero-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: .7rem; font-family: 'Archivo', sans-serif; font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--dark); background: var(--accent); padding: .85rem 1.9rem; text-decoration: none; position: relative; overflow: hidden; transition: transform var(--dur-fast) var(--ease); } .hero-cta::after { content: '→'; transition: transform var(--dur-fast) var(--ease); } .hero-cta:hover { transform: translateY(-2px); } .hero-cta:hover::after { transform: translateX(4px); } /* ── SECTION LABEL ───────────────────────────────────────────────────── */ .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: clamp(2.5rem,5vw,3.5rem) clamp(1.25rem,5vw,3rem) 1.25rem; } .section-label { font-family: 'Archivo', sans-serif; font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: .2em; color: var(--cream); opacity: .55; } /* ── FILTRE CATÉGORIE (dropdown accessible) ──────────────────────────── */ .filter { position: relative; font-family: 'Archivo', sans-serif; } .filter-btn { display: inline-flex; align-items: center; gap: .6rem; background: transparent; color: var(--cream); border: 1px solid var(--hairline-strong); padding: .55rem 1rem; font: inherit; font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .12em; cursor: pointer; border-radius: 2px; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .filter-btn:hover { border-color: var(--accent); color: var(--accent); } .filter-btn .chev { transition: transform var(--dur-fast) var(--ease); } .filter[data-open="true"] .filter-btn .chev { transform: rotate(180deg); } .filter-menu { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 50; min-width: 220px; background: #0d0d12; border: 1px solid var(--hairline-strong); border-radius: 4px; padding: .4rem; display: none; box-shadow: 0 18px 50px rgba(0,0,0,.6); } .filter[data-open="true"] .filter-menu { display: block; animation: pop var(--dur-fast) var(--ease); } @keyframes pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .filter-menu button { display: block; width: 100%; text-align: left; background: transparent; color: var(--cream); border: 0; padding: .55rem .7rem; font: inherit; font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; border-radius: 2px; transition: background var(--dur-fast) var(--ease); } .filter-menu button:hover { background: rgba(232,226,216,.06); } .filter-menu button[aria-current="true"] { color: var(--accent); } /* ── GRILLE GALERIE ──────────────────────────────────────────────────── */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(1rem, 2vw, 1.6rem); padding: 0 clamp(1.25rem, 5vw, 3rem) clamp(3rem, 6vw, 5rem); } /* CARTE — image en réel (lazy, alt, ken-burns, meilleur LCP) */ .card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; padding: 1.75rem; text-decoration: none; color: var(--cream); border: 1px solid var(--hairline); overflow: hidden; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .card-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.03); /* calme les images trop saturées */ transition: transform 1.1s var(--ease-soft); will-change: transform; } /* Grade carte : lisibilité+vignette (::before) puis voile accent (::after) */ .card::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 30%, transparent 45%, rgba(0,0,0,.4) 100%), linear-gradient(165deg, transparent 0%, var(--card-tint) 72%, var(--dark) 100%); opacity: .82; transition: opacity var(--dur) var(--ease); } .card::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--card-accent); mix-blend-mode: soft-light; opacity: var(--grade-veil); } .card--no-img .card-img { display: none; } .card--no-img::before { background: linear-gradient(165deg, var(--card-tint) 0%, var(--dark) 100%); opacity: .6; } .card > span { position: relative; z-index: 2; } .card:hover { transform: translateY(-3px); border-color: var(--hairline-strong); } .card:hover .card-img { transform: scale(1.06); } .card:hover::before { opacity: .92; } /* Filet d'accent qui pousse au survol (remplace le titre coloré) */ .card-cat { font-family: 'Archivo', sans-serif; font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--card-accent); margin-bottom: .55rem; display: inline-flex; align-items: center; gap: .5rem; } .card-cat::before { content: ''; width: 0; height: 1px; background: currentColor; transition: width var(--dur) var(--ease); } .card:hover .card-cat::before { width: 1.4rem; } .card-title { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 60; font-weight: 600; font-size: var(--t-card); line-height: 1.18; letter-spacing: -.01em; color: var(--cream); /* lisible, pas en accent */ text-wrap: balance; } .card-date { font-family: 'Archivo', sans-serif; font-size: .68rem; letter-spacing: .08em; margin-top: .8rem; color: var(--cream-2); opacity: .7; } /* Variantes de rythme (le générateur les pose selon une cadence) */ .card--wide { grid-column: span 2; min-height: 340px; } .card--wide .card-title { font-size: clamp(1.4rem, 1rem + 1.4vw, 1.9rem); } @media (max-width: 680px) { .card--wide { grid-column: span 1; } } /* Carte masquée par le filtre */ .card.is-hidden { display: none; } /* ── PAGINATION / LOAD MORE ──────────────────────────────────────────── */ .load-more-wrap { text-align: center; padding: 0 2rem clamp(3rem,6vw,5rem); } .load-more { font-family: 'Archivo', sans-serif; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--cream); background: transparent; border: 1px solid var(--hairline-strong); border-radius: 2px; padding: .8rem 2rem; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .load-more:hover { border-color: var(--accent); color: var(--accent); } /* ── FIL D'ARIANE ────────────────────────────────────────────────────── */ .crumbs { font-family: 'Archivo', sans-serif; font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; padding: 6.5rem clamp(1.25rem,5vw,3rem) 0; color: var(--cream-2); display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; } .crumbs a { color: var(--cream-2); text-decoration: none; opacity: .8; transition: color var(--dur-fast) var(--ease); } .crumbs a:hover { color: var(--accent); opacity: 1; } .crumbs .sep { opacity: .4; } .crumbs .current { color: var(--cream); opacity: .55; } /* ── PAGE ARTICLE ────────────────────────────────────────────────────── */ .article-cover { position: relative; min-height: 84vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 9rem clamp(1.25rem,5vw,3rem) clamp(2.5rem,5vw,3.5rem); background-size: cover; background-position: center; } .article-cover::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(125% 80% at 50% 28%, transparent 40%, rgba(0,0,0,var(--grade-vignette)) 100%), linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--bg-tint) 56%, var(--dark) 100%); } .article-cover::after { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--accent); mix-blend-mode: soft-light; opacity: var(--grade-veil); pointer-events: none; } .article-cover--no-img::before { background: linear-gradient(180deg, var(--dark) 0%, var(--bg-tint) 50%, var(--dark) 100%); } .article-cover--no-img::after { opacity: 0; } .article-cover > * { position: relative; z-index: 1; } .article-title { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 144; font-weight: 700; font-size: var(--t-article); line-height: 1.06; letter-spacing: -.02em; max-width: 20ch; margin-bottom: 1.1rem; text-wrap: balance; } .article-hook { font-style: italic; font-size: var(--t-lead); color: var(--cream-2); max-width: 44ch; margin-bottom: 1.8rem; padding-left: 1.1rem; border-left: 2px solid var(--accent); text-wrap: pretty; } .tiktok-banner { display: inline-flex; align-items: center; gap: .55rem; font-family: 'Archivo', sans-serif; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); text-decoration: none; opacity: .85; border: 1px solid currentColor; padding: .5rem 1rem; border-radius: 2px; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .tiktok-banner:hover { background: var(--accent); color: var(--dark); opacity: 1; } /* Corps — c'est ici que vit la promesse "lecture / approfondissement" */ .article-body { max-width: var(--measure); margin: 0 auto; padding: clamp(2.5rem,5vw,3.75rem) clamp(1.25rem,5vw,2rem) 4rem; } .article-body > * + * { margin-top: 1.35em; } .article-body p { text-wrap: pretty; hanging-punctuation: first; } .article-body p:first-of-type { margin-top: 0; } .article-body p:first-of-type::first-letter { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 144; font-weight: 700; font-size: 3.6em; float: left; line-height: .82; margin: .02em .1em 0 0; color: var(--accent); } .article-body h2 { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 72; font-weight: 600; font-size: var(--t-h2); line-height: 1.15; letter-spacing: -.01em; color: var(--accent); margin-top: 2.8em; margin-bottom: .2em; text-wrap: balance; } /* petit filet sous les titres de section */ .article-body h2::after { content: ''; display: block; width: 2.2rem; height: 2px; background: var(--accent); opacity: .5; margin-top: .6rem; } .article-body a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(232,226,216,.35); transition: text-decoration-color var(--dur-fast) var(--ease); } .article-body a:hover { text-decoration-color: currentColor; } .article-body em { font-style: italic; } .article-body strong { font-weight: 600; color: #fff; } /* Image de corps — même grade que les covers pour rester "collection" */ .body-img { position: relative; isolation: isolate; margin: 2.8rem 0; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 0 var(--hairline-strong) inset, 0 30px 60px -30px rgba(0,0,0,.7); } .body-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.92) contrast(1.03); transition: transform 1.4s var(--ease-soft); } .body-img:hover img { transform: scale(1.04); } .body-img::after { content: ''; position: absolute; inset: 0; background: var(--accent); mix-blend-mode: soft-light; opacity: var(--grade-veil); pointer-events: none; } .body-img figcaption { position: absolute; left: 0; right: 0; bottom: 0; font-family: 'Archivo', sans-serif; font-size: .7rem; letter-spacing: .06em; color: var(--cream); padding: 1.5rem 1rem .8rem; background: linear-gradient(transparent, rgba(0,0,0,.55)); } /* ── PARTAGE ─────────────────────────────────────────────────────────── */ .share { max-width: var(--measure); margin: 0 auto; padding: 0 clamp(1.25rem,5vw,2rem) 2rem; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; border-top: 1px solid var(--hairline); padding-top: 2rem; } .share-label { font-family: 'Archivo', sans-serif; font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .14em; color: var(--cream-2); } .share-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--hairline-strong); color: var(--cream); background: transparent; cursor: pointer; text-decoration: none; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .share-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } .share-btn svg { width: 1.05rem; height: 1.05rem; fill: currentColor; } .share-toast { font-family: 'Archivo', sans-serif; font-size: var(--t-meta); color: var(--accent); opacity: 0; transition: opacity var(--dur-fast) var(--ease); } .share-toast.show { opacity: 1; } /* ── ARTICLES LIÉS ───────────────────────────────────────────────────── */ .related { padding: clamp(2.5rem,5vw,3.5rem) clamp(1.25rem,5vw,3rem) 1rem; border-top: 1px solid var(--hairline); } .related .section-label { padding: 0 0 1.5rem; } .related-grid { display: grid; gap: clamp(1rem,2vw,1.6rem); grid-template-columns: repeat(auto-fill, minmax(min(100%,260px), 1fr)); } /* ── PAGE À PROPOS ───────────────────────────────────────────────────── */ .about { max-width: 46rem; margin: 0 auto; padding: 8rem clamp(1.25rem,5vw,2rem) 5rem; } .about .eyebrow { margin-bottom: 1.4rem; } .about h1 { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 144; font-weight: 700; font-size: var(--t-article); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 1.5rem; text-wrap: balance; } .about p { color: var(--cream-2); margin-bottom: 1.3em; max-width: var(--measure); } .about .lede { font-size: var(--t-lead); color: var(--cream); font-style: italic; } /* ── BACK LINK & FOOTER ──────────────────────────────────────────────── */ .back-link { display: inline-flex; align-items: center; gap: .6rem; font-family: 'Archivo', sans-serif; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--cream-2); text-decoration: none; margin: 1rem auto 0; padding: 1.5rem clamp(1.25rem,5vw,2rem); max-width: var(--measure); transition: color var(--dur-fast) var(--ease); } .back-link::before { content: '←'; transition: transform var(--dur-fast) var(--ease); } .back-link:hover { color: var(--accent); } .back-link:hover::before { transform: translateX(-4px); } .site-footer { text-align: center; font-family: 'Archivo', sans-serif; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; padding: 3rem 2rem; color: var(--cream-2); border-top: 1px solid var(--hairline); } /* Rangée réseaux sociaux dans le footer (cross-linking site <-> TikTok/Instagram) */ .footer-social { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; } .footer-social a { color: var(--cream-2); text-decoration: none; opacity: .8; transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } .footer-social a:hover { color: var(--accent); opacity: 1; } .footer-copy { display: block; opacity: .5; } /* ── APPARITION AU SCROLL ────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(18px); } .reveal.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); } /* ── RESPONSIVE ──────────────────────────────────────────────────────── */ @media (max-width: 640px) { :root { --t-body: 1.06rem; --lh-body: 1.72; } .hero { min-height: 82vh; } .hero-hook, .article-hook { font-size: 1.12rem; } .article-body p:first-of-type::first-letter { font-size: 3em; } .section-head { padding-bottom: 1rem; } } /* ── ACCESSIBILITÉ : MOTION RÉDUITE ──────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .reveal { opacity: 1; transform: none; } .card:hover .card-img, .body-img:hover img { transform: none; } } /* ════════════════════════════════════════════════════════════════════════ AJOUTS v2 — perf images, focal point, accessibilité, pages catégorie ════════════════════════════════════════════════════════════════════════ */ /* Point focal réglable par carte/cover (--cover-pos injecté inline si besoin) */ .card-img { object-position: var(--cover-pos, center); } .hero, .article-cover { background-position: var(--cover-pos, center); } /*