/* ═══════════════════════════════════════════════════════════════════
these.css — Espace éditorial Thèse · Atmosphère cosmique
Référence Pudding/Polygon/Vox : storytelling immersif, long-form,
illustrations fortes, grandes typos serif. Fond unique deep night,
ciel étoilé multi-couches parallax, halos colorés en arrière-plan.
Aucun mode clair — l'ambiance est unique et permanente.
═══════════════════════════════════════════════════════════════════ */
.th-hub, .th-chapter {
/* ── Typographie · trio éditorial Capital Antifragile ─────────────
Display = Playfair Display (italique 900 pour le sublime)
Body = Source Serif 4 (lecture longue, cohésion serif)
Mono = JetBrains Mono (labels data, sources, KPI)
Sans = Public Sans (fallback ponctuel pour UI minimaliste) */
--serif: 'Playfair Display', 'Bodoni Moda', 'Didot', Georgia, serif;
--body: 'Source Serif 4', 'Source Serif Pro', 'Charter', Georgia, serif;
--mono: 'JetBrains Mono', 'DM Mono', ui-monospace, monospace;
--sans: 'Public Sans', 'Inter', system-ui, sans-serif;
/* ── Palette · Charbon orageux + Marbre cassé + Or chaud + Émeraude
─────────────────────────────────────────────────────────────────
Aucun bleu. Aucun magenta. Tout part du noir d'orage et de l'or. */
/* Fond / surfaces (charbon stratifié) */
--th-void: #14110D; /* fond le plus profond — sépia noir */
--th-deep: #1C1917; /* fond principal */
--th-mid: #221E1A; /* sub-section */
--th-surface: #2A2520; /* cards */
--th-surface-2: #322C26; /* cards hover */
--th-elev: #3A332E; /* surfaces élevées / takeaway */
/* Bordures dorées subtiles */
--th-border: rgba(212, 160, 23, 0.14);
--th-border-st: rgba(212, 160, 23, 0.34);
--th-border-marble: rgba(240, 236, 224, 0.10);
/* Encre — texte en marbre cassé, pas en blanc pur */
--th-text: #F0ECE0; /* marbre cassé (titres) */
--th-text-soft: #D4CDB8; /* marbre secondaire */
/* ACCESSIBILITÉ (2026-08-06) — les deux teintes basses ont été relevées après
mesure sur les PIXELS réellement peints, pas sur le CSS. Anciennes valeurs :
muted #8E8472 → 3,95 : 1 et faint #5A5247 → 2,18 : 1, sous le seuil WCAG AA
de 4,5 pour du texte de moins de 18,66 px. Or ces deux teintes portent les
mentions de SOURCE et les millésimes — c'est-à-dire exactement ce qui rend
un chiffre vérifiable. Le texte le moins lisible du chapitre était sa preuve.
Nouvelles valeurs mesurées : 5,33 : 1 et 4,88 : 1 sur le fond de carte, qui
est le fond le plus sombre en présence. Hiérarchie conservée : titres →
texte doux → muted → faint. */
--th-muted: #A89B82; /* muted éditorial — 5,33 : 1 */
--th-faint: #A0947F; /* labels mono atténués — 4,88 : 1 */
/* Système OR — l'âme de la palette */
--th-gold: #D4A017; /* or chaud principal — accents, KPI, gradient */
--th-gold-l: #F5C54B; /* or clair — highlights, particules, glow */
--th-gold-pale: #FFE9A3; /* or pâle — shine, reflet */
--th-gold-d: #8A6710; /* or sombre — borders, ombres dorées */
--th-bronze: #6B4F28; /* bronze sépia — accent secondaire */
/* Accent technique — émeraude circuit (vivant, blockchain, antifragile) */
--th-emerald: #1F7A3A;
--th-emerald-l: #2EA05A;
--th-emerald-pale: #74D5A0;
/* Sémantique */
--th-red: #B71C1C; /* fragilité, choc destructeur */
--th-red-l: #E04545;
--th-amber: #D97706; /* alerte, transition */
/* Glow couleurs */
--th-glow-gold: rgba(212, 160, 23, 0.40);
--th-glow-warm: rgba(245, 197, 75, 0.28);
--th-glow-marble: rgba(240, 236, 224, 0.12);
/* Géométrie */
--th-r: 14px;
--th-r-lg: 22px;
--th-r-xl: 32px;
}
/* Override du fond dès qu'on est sur une page thèse.
On utilise :has() pour s'appliquer immédiatement au render (pas d'attente JS)
ET on fallback sur la classe pour les navigateurs anciens. */
body:has(.th-hub),
body:has(.th-chapter),
body.has-these-hub,
body.has-these-chapter,
html:has(.th-hub),
html:has(.th-chapter) {
background-color: #14110D !important;
color: var(--th-text);
overflow-x: hidden;
}
/* L'élément racine de la thèse a aussi son propre fond (au cas où la page
contient des sections vides en-dehors de .th-hub / .th-chapter). */
.th-hub, .th-chapter {
background-color: var(--th-void);
}
/* Quand .th-hub ou .th-chapter est dans la page, on neutralise les wrappers
Bootstrap/Rmd qui forceraient du blanc. */
body:has(.th-hub) .main-container,
body:has(.th-hub) .container-fluid,
body:has(.th-hub) .fluid-row,
body:has(.th-chapter) .main-container,
body:has(.th-chapter) .container-fluid,
body:has(.th-chapter) .fluid-row {
background-color: transparent !important;
}
/* ──────────────────────────────────────────────────────────────────
1. ATMOSPHÈRE CAPITAL ANTIFRAGILE
─────────────────────────────────────────────────────────────────
Plus de "ciel cosmique étoilé". À la place, l'ambiance Capital
Antifragile : halo doré central (sage stoïcien éclairé latéralement),
halos secondaires sur les côtés, charbon stratifié, texture grain
papier, et éclairs latéraux occasionnels (ré : tronc d'arbre
antifragile foudroyé).
Position fixed pour que l'atmosphère ne défile pas avec le contenu.
────────────────────────────────────────────────────────────────── */
.th-atmosphere {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
/* Couche 1 — Charbon stratifié (le ciel d'orage) */
.th-atmo-storm {
position: absolute; inset: 0;
background:
/* Vignettes sombres en bas et coins */
radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0,0,0,0.55), transparent 65%),
radial-gradient(ellipse 70% 60% at 0% 0%, rgba(0,0,0,0.35), transparent 60%),
radial-gradient(ellipse 70% 60% at 100% 0%, rgba(0,0,0,0.35), transparent 60%),
/* Base linéaire qui s'éclaircit légèrement au centre puis redescend */
linear-gradient(180deg, var(--th-void) 0%, var(--th-deep) 35%, var(--th-mid) 55%, var(--th-deep) 75%, var(--th-void) 100%);
}
/* Couche 2 — Halo doré principal (le soleil stoïque, comme dans tes images) */
.th-atmo-halo {
position: absolute;
inset: -10%;
background:
/* Halo central — chaleur dorée sage */
radial-gradient(ellipse 50% 40% at 50% 35%, rgba(245, 197, 75, 0.18) 0%, rgba(212, 160, 23, 0.10) 30%, transparent 70%),
/* Halo gauche — entrée de lumière dramatique */
radial-gradient(ellipse 35% 60% at 10% 50%, rgba(212, 160, 23, 0.12) 0%, transparent 60%),
/* Halo droit, plus chaud, plus discret */
radial-gradient(ellipse 30% 50% at 90% 65%, rgba(107, 79, 40, 0.10) 0%, transparent 65%),
/* Lueur émeraude très discrète en bas (la vie qui résiste, l'arbre) */
radial-gradient(ellipse 60% 30% at 50% 95%, rgba(31, 122, 58, 0.06) 0%, transparent 70%);
filter: blur(2px);
}
/* Couche 3 — Lueur centrale pulsante très douce (la braise antifragile) */
.th-atmo-ember {
position: absolute;
width: 60vmin; height: 60vmin;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(245, 197, 75, 0.10), transparent 60%);
filter: blur(40px);
animation: th-ember-breathe 14s ease-in-out infinite;
}
@keyframes th-ember-breathe {
0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.0); }
50% { opacity: 1.0; transform: translate(-50%, -50%) scale(1.08); }
}
/* Couche 4 — Grain papier (texture organique stoïque, type vieux manuscrit).
Le SVG turbulence est inline en data-URI : aucune ressource externe. */
.th-atmo-grain {
position: absolute; inset: 0;
pointer-events: none;
opacity: 0.08;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
}
/* Couche 5 — Éclairs latéraux occasionnels (ré : tronc d'arbre antifragile).
Chaque éclair est un SVG positionné sur le bord, animé par une keyframe
qui le fait apparaître ~0.4s puis disparaître, avec un long délai d'attente.
On utilise des décalages différents pour qu'ils ne se synchronisent pas. */
.th-atmo-bolt {
position: absolute;
width: 280px; height: 380px;
opacity: 0;
pointer-events: none;
filter: drop-shadow(0 0 24px rgba(245, 197, 75, 0.7))
drop-shadow(0 0 50px rgba(212, 160, 23, 0.4));
}
.th-atmo-bolt path {
fill: none;
stroke: var(--th-gold-l);
stroke-width: 2.5;
stroke-linejoin: round;
stroke-linecap: round;
}
.th-atmo-bolt path.glow {
stroke: #fff;
stroke-width: 1.2;
opacity: 0.85;
}
.th-atmo-bolt--left { left: -40px; top: 8%; animation: th-bolt-flash 22s ease-out infinite; }
.th-atmo-bolt--right { right: -50px; top: 30%; transform: scaleX(-1); animation: th-bolt-flash 22s ease-out infinite; animation-delay: 11s; }
.th-atmo-bolt--bottom { left: 30%; bottom: -40px; transform: rotate(180deg); animation: th-bolt-flash 35s ease-out infinite; animation-delay: 6s; }
@keyframes th-bolt-flash {
0% { opacity: 0; }
1% { opacity: 0.95; }
3% { opacity: 0.30; }
4% { opacity: 0.85; }
6% { opacity: 0; }
100% { opacity: 0; }
}
/* prefers-reduced-motion : on ralentit / coupe les flashs */
@media (prefers-reduced-motion: reduce) {
.th-atmo-bolt, .th-atmo-ember { animation: none; opacity: 0.2; }
}
/* ════════════════════════════════════════════════════════════════
PERF · GPU compositing + paint containment
Garde le rendu visuel identique, mais isole les couches animées
sur leur propre GPU layer pour éviter de repeindre la page entière.
════════════════════════════════════════════════════════════════ */
.th-atmosphere {
contain: layout style paint;
pointer-events: none;
}
.th-atmo-storm, .th-atmo-halo, .th-atmo-grain {
contain: paint;
transform: translateZ(0);
backface-visibility: hidden;
}
.th-atmo-ember {
contain: paint;
will-change: transform, opacity;
transform: translate3d(-50%, -50%, 0);
}
@keyframes th-ember-breathe {
0%, 100% { opacity: 0.6; transform: translate3d(-50%, -50%, 0) scale(1.0); }
50% { opacity: 1.0; transform: translate3d(-50%, -50%, 0) scale(1.08); }
}
.th-atmo-bolt {
will-change: opacity;
transform: translateZ(0);
contain: paint;
}
.th-atmo-bolt--right { transform: scaleX(-1) translateZ(0); }
.th-atmo-bolt--bottom { transform: rotate(180deg) translateZ(0); }
/* Pause les animations atmosphériques quand l'onglet est en arrière-plan
(le navigateur expose document.visibilityState — voir JS dans chaque body). */
.th-paused .th-atmo-bolt,
.th-paused .th-atmo-ember,
.th-paused .th-c-fresh::before { animation-play-state: paused !important; }
/* PERF DÉSACTIVÉ · contain: paint clippait les rendus Plotly et empêchait
l'affichage des graphiques sur certains Chrome. La gain perf était mince
vs la régression visuelle. */
/* .th-c-chart-frame, .th-c-chart-body { contain: layout paint; } */
/* ════════════════════════════════════════════════════════════════
PERF · cartes du hub — v2 (sans content-visibility qui crée un flash)
- contain: layout paint pour isoler les reflows internes
- transform: translateZ(0) pour promotion GPU layer
- backdrop-filter abaissé de 12px à 4px (4× moins coûteux, visuel
quasi-identique car les cartes ont leur propre image)
════════════════════════════════════════════════════════════════ */
.th-chap {
contain: layout paint;
transform: translateZ(0);
backface-visibility: hidden;
}
.th-chap-illus {
contain: layout paint;
transform: translateZ(0);
}
/* PERF · backdrop-filter SUPPRIMÉ sur le hub. C'était le principal coupable
du lag au scroll : à chaque frame, le navigateur doit re-flouter ce qui
est derrière chaque carte (8 cartes × continuous reblur). Les cartes ont
leur propre image de fond, le blur n'apporte rien visuellement. */
.th-hub .th-chap,
.th-hub .th-meta-chip {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* ════════════════════════════════════════════════════════════════
PERF · atmosphère drastiquement allégée sur le hub
Le hub a déjà sa propre image hero + 8 cartes avec leurs visuels.
L'atmosphère est en grande partie cachée derrière du contenu.
On garde uniquement halo et storm (gradients statiques, gratuits).
On supprime grain (turbulence SVG), bolts (drop-shadows animées) et
ember (filter: blur(40px) sur 60vmin = très cher).
Les chapitres conservent l'atmosphère complète. */
body:has(.th-hub) .th-atmosphere {
/* Atmosphère totalement supprimée sur le hub : le hub-hero image fournit
déjà l'ambiance lumineuse. Cette couche position:fixed avec gradients
stackés + filter:blur causait des reblurs continus pendant le scroll.
Économie : ~30 % du paint cost par frame. */
display: none !important;
}
/* Le hub utilise un fond solide directement sur body — visuel identique. */
body:has(.th-hub) {
background: var(--th-void);
}
/* ════════════════════════════════════════════════════════════════
PERF · pages chapitre (.th-chapter) — mêmes optimisations que hub
On garde storm + halo (gradients statiques, cheap) pour préserver
l'identité visuelle Capital Antifragile. On supprime :
- grain (SVG turbulence re-rasterise au scroll, très cher)
- ember (filter: blur(40px) sur 60vmin = très cher)
- 3 bolts SVG (drop-shadows animées en composite layer continu)
Le rendu reste cosmic-charcoal + halo doré → l'esthétique principale
est préservée. Le lecteur lit du texte, les flashs d'éclair étaient
plus distractifs qu'utiles. */
body:has(.th-chapter) .th-atmosphere .th-atmo-grain,
body:has(.th-chapter) .th-atmosphere .th-atmo-bolt,
body:has(.th-chapter) .th-atmosphere .th-atmo-ember {
display: none !important;
}
/* Sur les pages chapitre, le halo conserve son blur(2px) mais on l'isole
pour qu'il ne déclenche pas de re-paint global. */
body:has(.th-chapter) .th-atmosphere .th-atmo-halo {
filter: none; /* blur 2px était négligeable visuellement, coûteux en composite */
}
/* PERF · supprime les 16 particules continues sur le hub (8 cartes × 2 :: pseudos
× animation infinite). Le hub a déjà ses 8 visuels AI — la décoration est
redondante et coûte cher en composite/paint sur des PC modestes. */
body:has(.th-hub) .th-chap-illus::before,
body:has(.th-hub) .th-chap-illus::after {
display: none;
}
/* PERF · réduit le filter: blur(16px) du halo aura ::before des cartes hub.
Quand le halo n'apparaît qu'au hover (opacity 0 → 0.55), le filter coûte
pourtant en permanence à cause de la promotion en layer composite. */
body:has(.th-hub) .th-chap::before {
filter: blur(8px);
}
/* PERF · supprime les filters saturate/contrast sur les 8 images de cartes.
Chaque filter crée un GPU layer composite. 8 layers × scroll = paint coûteux. */
body:has(.th-hub) .th-chap-illus--img img {
filter: none;
transition: transform 0.6s cubic-bezier(.2,.8,.25,1);
}
body:has(.th-hub) .th-chap:hover .th-chap-illus--img img {
filter: none;
transform: scale(1.03);
}
/* Le main content prend le dessus de l'atmosphère */
.th-hub, .th-chapter { position: relative; z-index: 1; }
/* ════════════════════════════════════════════════════════════════
PERF · sections de bas de page hors écran au chargement.
Le guide « Comment lire » et la méthodologie sont toujours sous la
ligne de flottaison. content-visibility: auto laisse le navigateur
sauter leur layout/paint tant qu'elles n'approchent pas du viewport
(gros gain de fluidité au premier rendu et au scroll). contain-
intrinsic-size réserve une hauteur estimée pour éviter le saut de
scrollbar ; le mot-clé auto mémorise ensuite la taille réelle. */
.th-hub .th-guide,
.th-hub .th-method {
content-visibility: auto;
contain-intrinsic-size: auto 540px;
}
/* ──────────────────────────────────────────────────────────────────
2. HUB — Layout
────────────────────────────────────────────────────────────────── */
.th-hub {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px 120px;
color: var(--th-text);
font-family: var(--sans);
}
/* ── HERO MANIFESTO (Phase 2 — Pudding-style banner) ────────
Layout vertical : image AI en bannière 21:9 native en haut +
bloc texte sur fond charbon plein en dessous. Le texte n'est
plus overlayé sur l'image, on garantit la lisibilité totale.
La transition image→texte se fait via un dégradé charbon. */
.th-hero {
position: relative;
margin: 40px -24px 100px;
padding: 0;
display: flex;
flex-direction: column;
align-items: stretch;
overflow: hidden;
border-radius: var(--th-r-xl);
background-color: var(--th-deep);
border: 1px solid var(--th-border);
}
.th-hero-bg { display: none; /* legacy, plus utilisé */ }
/* ── HERO CINÉMA · variante --cinema ──────────────────────────────
Image fullbleed 88vh, texte overlay bottom-left dans un voile
glass+dégradé, chiffre "8" fantôme géant en background avec
parallax au scroll, reveal mot-à-mot du H1. */
.th-hero--cinema {
height: 88vh;
min-height: 660px;
max-height: 980px;
margin-bottom: 80px;
border-color: rgba(212, 160, 23, 0.22);
box-shadow:
0 30px 90px -30px rgba(0,0,0,0.55),
inset 0 1px 0 rgba(245,197,75,0.10);
}
.th-hero--cinema .th-hero-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
aspect-ratio: auto;
z-index: 1;
}
/* Bannière image AI : aspect-ratio natif image (21:9 ≈ 2.33:1) */
.th-hero-img {
position: relative;
width: 100%;
aspect-ratio: 1915 / 821; /* match parfait avec l'image générée */
overflow: hidden;
}
.th-hero-img img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center center;
filter: saturate(1.05) contrast(1.05);
display: block;
}
.th-hero--cinema .th-hero-img img {
/* En attente d'une image haute déf (>= 2560×1097). Aucun blur, aucun
filtre dégradant — on veut voir l'image telle qu'elle est. */
filter: saturate(1.05) contrast(1.06);
image-rendering: -webkit-optimize-contrast;
image-rendering: high-quality;
}
/* Si l'image manque (fichier absent / onerror), on bascule en fallback CSS
qui ressemble déjà à la DA : marbre fracturé doré + halos chauds */
.th-hero-img--missing {
background:
/* Veines kintsugi or */
linear-gradient(120deg, transparent 47%, rgba(212,160,23,0.18) 49%, rgba(245,197,75,0.30) 50%, rgba(212,160,23,0.18) 51%, transparent 53%),
linear-gradient(60deg, transparent 38%, rgba(212,160,23,0.10) 40%, rgba(245,197,75,0.18) 41%, transparent 44%),
/* Halo doré central */
radial-gradient(ellipse 60% 50% at 70% 50%, rgba(245,197,75,0.22), transparent 65%),
/* Halo bronze gauche dramatique */
radial-gradient(ellipse 50% 70% at 15% 60%, rgba(107,79,40,0.30), transparent 70%),
/* Surface marbre */
linear-gradient(135deg, var(--th-mid), var(--th-deep) 60%, var(--th-void));
}
/* Dégradé d'assombrissement pour la lisibilité du texte.
Trois couches superposées : un assombrissement bas (où atterrit le texte
du hero), un assombrissement gauche (la colonne où s'aligne le texte),
et une couverture radiale qui creuse précisément la zone du bloc texte. */
/* Plus d'overlay charbon agressif — le texte n'est plus sur l'image,
on n'en a plus besoin. Petit dégradé en bas pour lier visuellement
l'image au bloc texte qui suit. */
.th-hero-img-shade {
position: absolute; inset: 0;
pointer-events: none;
background: linear-gradient(180deg, transparent 70%, rgba(20, 17, 13, 0.85) 100%);
}
/* En mode cinéma : assombrissement composite (bottom + left)
pour donner toute la lisibilité au bloc texte overlay. */
.th-hero--cinema .th-hero-img-shade {
background:
linear-gradient(90deg, rgba(20,17,13,0.78) 0%, rgba(20,17,13,0.45) 38%, rgba(20,17,13,0.05) 62%, transparent 100%),
linear-gradient(180deg, rgba(20,17,13,0.35) 0%, transparent 28%, transparent 55%, rgba(20,17,13,0.78) 100%),
radial-gradient(ellipse 80% 60% at 18% 90%, rgba(20,17,13,0.55) 0%, transparent 70%);
}
/* Vignette dorée + frame inset, atténué */
.th-hero-img-vignette {
position: absolute; inset: 0;
pointer-events: none;
box-shadow:
inset 0 0 90px 12px rgba(20, 17, 13, 0.30),
inset 0 -1px 0 0 rgba(212, 160, 23, 0.18);
}
.th-hero--cinema .th-hero-img-vignette {
box-shadow:
inset 0 0 180px 30px rgba(20,17,13,0.55),
inset 0 -1px 0 0 rgba(212,160,23,0.30),
inset 0 1px 0 0 rgba(245,197,75,0.10);
}
/* Grain retiré : compound visuellement quand l'image source est déjà
bruitée/pixelisée. À réactiver une fois l'image HD en place si besoin. */
.th-hero-grain { display: none; }
/* Embers chauds qui pulsent doucement (relient l'image à l'ambiance "orage") */
.th-hero-ember {
position: absolute;
pointer-events: none;
filter: blur(36px);
opacity: 0.55;
/* PERF · will-change isole la couche floutée : seul l'opacity composite. */
will-change: opacity;
animation: th-hero-ember-pulse 9s ease-in-out infinite;
}
.th-hero-ember--a {
width: 36%; height: 50%;
left: -8%; bottom: -10%;
background: radial-gradient(ellipse 70% 60% at 40% 60%, rgba(245,197,75,0.42), rgba(212,160,23,0.18) 40%, transparent 70%);
}
.th-hero-ember--b {
width: 28%; height: 38%;
right: -5%; top: 10%;
background: radial-gradient(ellipse 60% 60% at 60% 50%, rgba(255,140,40,0.28), rgba(212,80,20,0.10) 50%, transparent 75%);
animation-delay: -4.5s;
}
/* PERF · pulse opacity-only (scale retiré : scaler une couche blur(36px)
force une re-rastérisation du flou à chaque frame = micro-freeze au top). */
@keyframes th-hero-ember-pulse {
0%, 100% { opacity: 0.40; }
50% { opacity: 0.65; }
}
.th-paused .th-hero-ember,
.th-paused .th-hero-grain,
.th-paused .th-hero--cinema .th-hero-img img { animation-play-state: paused !important; }
/* Chiffre "8" fantôme géant en background, derrière le texte.
Parallax géré en JS (translateY + opacity en scroll). */
.th-hero-ghost {
position: absolute;
right: -2vw;
bottom: -8vh;
z-index: 2;
font-family: var(--serif);
font-size: clamp(380px, 64vh, 760px);
font-weight: 900;
line-height: 0.78;
letter-spacing: -0.05em;
color: transparent;
-webkit-text-stroke: 1.5px rgba(245,197,75,0.16);
text-stroke: 1.5px rgba(245,197,75,0.16);
background: linear-gradient(180deg, rgba(245,197,75,0.18) 0%, rgba(212,160,23,0.10) 45%, rgba(212,160,23,0.02) 85%);
-webkit-background-clip: text;
background-clip: text;
pointer-events: none;
user-select: none;
opacity: 0.085;
will-change: transform, opacity;
text-shadow: 0 0 40px rgba(212,160,23,0.22);
}
@media (max-width: 900px) {
.th-hero-ghost { font-size: clamp(280px, 48vh, 520px); right: -8vw; bottom: -6vh; }
}
/* Bloc texte sous l'image, sur fond charbon plein — lisibilité max.
Compact : padding & marges resserrés pour que la zone texte prenne
le moins de hauteur possible (l'image reste la star). */
.th-hero-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 28px 56px 30px;
display: flex; flex-direction: column;
align-items: flex-start;
text-align: left;
}
@media (max-width: 700px) {
.th-hero-content { padding: 22px 22px 26px; }
}
/* Mode cinéma : le bloc texte sort de l'image et s'ancre en bas-gauche
par-dessus l'image, avec un voile glass+dégradé pour la lisibilité. */
.th-hero--cinema .th-hero-content {
position: absolute;
inset: auto 0 0 0;
z-index: 4;
max-width: 1180px;
margin: 0 auto;
padding: 48px 56px 56px;
background:
linear-gradient(180deg, transparent 0%, rgba(15,12,10,0.40) 40%, rgba(15,12,10,0.82) 100%);
/* PAS de backdrop-filter ici : le bloc est une bande absolue de 1180px de
large ancrée en bas du hero → le flou dessinait une COUPURE nette en
travers de l'image (bord haut + bords latéraux du bloc) et voilait toute
la moitié basse de la photo. La lisibilité est assurée par le dégradé
charbon ci-dessus + les text-shadow du H1/sous-titre. Ne pas réintroduire. */
}
@media (max-width: 900px) {
.th-hero--cinema { height: 82vh; min-height: 560px; }
.th-hero--cinema .th-hero-content { padding: 32px 24px 36px; }
}
@media (max-width: 700px) {
.th-hero--cinema { height: auto; min-height: 0; max-height: none; }
.th-hero--cinema .th-hero-img { position: relative; aspect-ratio: 16 / 11; }
.th-hero--cinema .th-hero-content {
position: relative; inset: auto;
padding: 24px 22px 28px;
background: var(--th-deep);
}
.th-hero-ghost { display: none; }
}
/* Scrollcue : caché par défaut, visible en mode cinéma (--show) */
.th-hero-scrollcue { display: none; }
.th-hero-scrollcue--show {
display: flex;
position: absolute;
right: 36px; bottom: 28px;
z-index: 5;
flex-direction: column; align-items: center; gap: 14px;
color: var(--th-gold-l);
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
opacity: 0;
transition: opacity 0.8s ease 1.6s;
}
.th-hero-revealed .th-hero-scrollcue--show { opacity: 0.85; }
.th-hero-scrollcue-line {
display: block;
width: 1px; height: 64px;
background: linear-gradient(180deg, transparent, var(--th-gold) 50%, transparent);
position: relative;
overflow: hidden;
}
.th-hero-scrollcue-line::after {
content: '';
position: absolute; left: -1px; top: 0;
width: 3px; height: 18px;
background: var(--th-gold-l);
box-shadow: 0 0 10px var(--th-gold-l);
animation: th-scrollcue 2.4s ease-in-out infinite;
}
.th-hero-scrollcue-label { writing-mode: vertical-rl; transform: rotate(180deg); }
@keyframes th-scrollcue {
0% { transform: translateY(-20px); opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { transform: translateY(64px); opacity: 0; }
}
@media (max-width: 900px) { .th-hero-scrollcue--show { right: 18px; bottom: 16px; } }
@media (max-width: 700px) { .th-hero-scrollcue--show { display: none; } }
.th-eyebrow {
display: inline-flex; align-items: center; gap: 14px;
margin-bottom: 14px;
font-family: var(--mono);
font-size: 10.5px; font-weight: 500;
letter-spacing: 0.32em; text-transform: uppercase;
color: var(--th-gold-l);
text-shadow: 0 0 14px rgba(212,160,23,0.4);
}
.th-eyebrow-bar {
display: inline-block;
width: 52px; height: 1px;
background: linear-gradient(90deg, transparent, var(--th-gold-l), transparent);
box-shadow: 0 0 8px rgba(212,160,23,0.5);
}
.th-hero-h1 {
font-family: var(--serif);
font-size: clamp(34px, 4.4vw, 58px);
line-height: 1.05;
font-weight: 400;
letter-spacing: -0.02em;
margin: 0 0 14px;
color: var(--th-text);
max-width: 920px;
/* Plus de text-shadow lourd : le texte est sur charbon plein, pas sur image */
}
.th-hero-h1-line1 {
display: block;
font-weight: 400;
color: var(--th-text);
}
/* Ancien gradient or sur image dorée = illisible.
On passe en marbre cassé italique avec une fine soulignure dorée
pour conserver l'accent brand sans concurrencer l'image. */
.th-hero-h1-grad {
display: inline-block;
margin-top: 2px;
color: var(--th-text);
font-style: italic;
font-weight: 700;
background: none;
-webkit-text-fill-color: var(--th-text);
position: relative;
padding-bottom: 4px;
}
.th-hero-h1-grad::after {
content: '';
position: absolute;
left: 0; right: 18%;
bottom: -2px;
height: 2px;
background: linear-gradient(90deg,
var(--th-gold-l) 0%,
var(--th-gold) 50%,
transparent 100%);
box-shadow: 0 0 10px rgba(245, 197, 75, 0.55);
border-radius: 2px;
}
.th-hero-sub {
font-family: var(--body);
font-size: clamp(14px, 1.05vw, 16px);
line-height: 1.55;
font-weight: 400;
color: var(--th-text-soft);
max-width: 880px;
margin: 0 0 18px;
}
.th-hero-sub em {
font-style: italic;
color: var(--th-text);
border-bottom: 1px solid rgba(212, 160, 23, 0.35);
padding-bottom: 1px;
}
.th-hero-meta {
display: flex; justify-content: flex-start; flex-wrap: wrap;
gap: 10px;
}
.th-meta-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--th-border);
border-radius: 999px;
font-family: var(--mono);
font-size: 11.5px; font-weight: 500;
color: var(--th-text-soft);
letter-spacing: 0.04em;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: border-color 0.25s, background 0.25s, transform 0.2s;
}
.th-meta-chip:hover {
border-color: var(--th-border-st);
background: rgba(255,255,255,0.07);
transform: translateY(-1px);
}
.th-meta-chip i { color: var(--th-gold); font-size: 11px; }
.th-meta-live i {
color: var(--th-emerald-l);
animation: th-pulse 2.5s ease-in-out infinite;
}
@keyframes th-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* ── HERO CINÉMA · ajustements typo pour lisibilité sur image ──
Le texte est désormais SUR l'image, on rajoute un text-shadow
subtil et on durcit le contraste des éléments. */
.th-hero--cinema .th-eyebrow {
text-shadow: 0 0 16px rgba(212,160,23,0.55), 0 1px 2px rgba(0,0,0,0.6);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}
.th-hero--cinema.th-hero-revealed .th-eyebrow { opacity: 1; transform: translateY(0); }
/* H1 cinéma : typo cream sobre + halo lumineux doré derrière + glow doux
pulsant sur les lettres + shimmer animé sur le filet or sous la 2e ligne. */
.th-hero--cinema .th-hero-h1 {
position: relative;
font-size: clamp(32px, 4.2vw, 58px);
line-height: 1.08;
letter-spacing: -0.018em;
font-weight: 400;
color: var(--th-text);
margin-bottom: 22px;
max-width: 880px;
/* Glow statique pour la lisibilité. PERF · l'ancienne anim th-hero-h1-breathe
animait le text-shadow → repaint du texte à chaque frame (non compositable)
= cause directe du freeze quand le hero est à l'écran. Le "respir" visuel
est désormais assuré par le halo ::before (opacity-only, GPU). */
text-shadow:
0 2px 22px rgba(0,0,0,0.60),
0 1px 3px rgba(0,0,0,0.72),
0 0 30px rgba(245,197,75,0.28),
0 0 70px rgba(212,160,23,0.14);
}
/* Halo lumineux radial derrière le H1, posé en ::before */
.th-hero--cinema .th-hero-h1::before {
content: '';
position: absolute;
left: -8%; top: -22%;
width: 88%; height: 168%;
background:
radial-gradient(ellipse 60% 55% at 28% 50%, rgba(245,197,75,0.30) 0%, rgba(212,160,23,0.12) 35%, transparent 70%),
radial-gradient(ellipse 40% 45% at 60% 60%, rgba(255,210,120,0.16) 0%, transparent 65%);
filter: blur(48px);
pointer-events: none;
z-index: -1;
opacity: 0.85;
/* PERF · will-change isole la couche blur(48px) : seul l'opacity composite. */
will-change: opacity;
animation: th-hero-halo-pulse 7s ease-in-out infinite;
}
/* PERF · pulse opacity-only (scale retiré : scaler une couche blur(48px) force
une re-rastérisation à chaque frame = freeze au top de page). */
@keyframes th-hero-halo-pulse {
0%, 100% { opacity: 0.62; }
50% { opacity: 1.00; }
}
.th-paused .th-hero--cinema .th-hero-h1,
.th-paused .th-hero--cinema .th-hero-h1::before { animation-play-state: paused !important; }
.th-hero--cinema .th-hero-h1-line1 {
display: block;
font-weight: 500;
color: var(--th-text);
}
.th-hero--cinema .th-hero-h1-grad {
display: inline-block;
margin-top: 4px;
color: var(--th-text);
-webkit-text-fill-color: var(--th-text);
background: none;
font-style: italic;
font-weight: 400;
position: relative;
padding-bottom: 8px;
}
/* Filet or sous la 2e ligne : base statique + shimmer qui balaye */
.th-hero--cinema .th-hero-h1-grad::after {
content: '';
position: absolute;
left: 0; right: 30%;
bottom: 0;
height: 1.5px;
background: linear-gradient(90deg, rgba(245,197,75,0.85) 0%, rgba(212,160,23,0.85) 55%, transparent 100%);
box-shadow: 0 0 12px rgba(245,197,75,0.55), 0 0 30px rgba(245,197,75,0.20);
}
/* Shimmer : bande or claire qui glisse de gauche à droite sur le filet */
.th-hero--cinema .th-hero-h1-grad::before {
content: '';
position: absolute;
left: 0; right: 30%;
bottom: 0;
height: 1.5px;
background: linear-gradient(90deg, transparent 0%, transparent 30%, rgba(255,233,163,1) 50%, transparent 70%, transparent 100%);
background-size: 220% 100%;
background-position: -110% 0;
filter: blur(0.6px);
animation: th-hero-shimmer 4.5s ease-in-out 1.8s infinite;
}
@keyframes th-hero-shimmer {
0% { background-position: -110% 0; opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { background-position: 110% 0; opacity: 0; }
}
.th-paused .th-hero--cinema .th-hero-h1-grad::before { animation-play-state: paused !important; }
/* Reveal mot-à-mot : chaque .th-word démarre invisible, glide+blur in */
.th-hero--cinema .th-word {
display: inline-block;
opacity: 0;
transform: translateY(22px);
filter: blur(6px);
animation: th-word-in 0.85s cubic-bezier(.22,.61,.36,1) forwards;
/* delay calculé inline par JS */
}
@keyframes th-word-in {
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.th-hero--cinema .th-hero-sub {
color: #E8E2D0;
text-shadow: 0 1px 12px rgba(0,0,0,0.65);
font-size: clamp(14.5px, 1.1vw, 17px);
max-width: 760px;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.9s ease 0.9s, transform 0.9s ease 0.9s;
}
.th-hero--cinema.th-hero-revealed .th-hero-sub { opacity: 1; transform: translateY(0); }
.th-hero--cinema .th-hero-sub em { color: #FFE9A3; border-bottom-color: rgba(245,197,75,0.55); }
.th-hero--cinema .th-hero-meta {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.9s ease 1.15s, transform 0.9s ease 1.15s;
}
.th-hero--cinema.th-hero-revealed .th-hero-meta { opacity: 1; transform: translateY(0); }
.th-hero--cinema .th-meta-chip {
background: rgba(15,12,10,0.55);
border-color: rgba(212,160,23,0.32);
color: #F0ECE0;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.th-hero--cinema .th-meta-chip:hover {
background: rgba(15,12,10,0.75);
border-color: rgba(245,197,75,0.55);
}
/* Reduced-motion : on coupe l'anim ghost/zoom/grain/embers/halo/shimmer
et on rend tout visible direct */
@media (prefers-reduced-motion: reduce) {
.th-hero--cinema .th-hero-img img { animation: none; transform: none; }
.th-hero-grain, .th-hero-ember { animation: none; }
.th-hero--cinema .th-hero-h1,
.th-hero--cinema .th-hero-h1::before,
.th-hero--cinema .th-hero-h1-grad::before { animation: none; }
.th-hero--cinema .th-eyebrow,
.th-hero--cinema .th-hero-sub,
.th-hero--cinema .th-hero-meta { opacity: 1; transform: none; transition: none; }
.th-hero--cinema .th-word { opacity: 1; transform: none; filter: none; animation: none; }
.th-hero-scrollcue--show { opacity: 0.85; transition: none; }
}
/* ════════════════════════════════════════════════════════════════
HUB · MODE STATIQUE TOTAL (demande utilisateur 2026-06-17)
Aucun élément en mouvement sur le hub : on coupe TOUTES les animations
continues (braises, halo, shimmer, scroll-cue, point « live », fade
d'entrée de page) et on force l'état final visible des éléments qui
démarrent cachés (titre mot-à-mot, eyebrow, sous-titre, chips, cue).
Le parallax du « 9 » est neutralisé côté JS (fonction update()).
Modelé sur le bloc @media (prefers-reduced-motion) ci-dessus, mais
appliqué EN PERMANENCE via body:has(.th-hub) — sélecteur déjà utilisé
ailleurs dans ce fichier, donc actif dès le parse (pas de flash JS).
════════════════════════════════════════════════════════════════ */
body:has(.th-hub) { animation: none !important; opacity: 1 !important; } /* coupe le fade pageIn plein écran */
body:has(.th-hub) .th-hero--cinema .th-hero-img img { animation: none !important; transform: none !important; }
/* Glows flous RETIRÉS (demande user 2026-06-17 : image plus nette). Les 2 braises
blur(36px) dans les coins + le halo blur(48px) derrière le titre voilaient
l'image ; l'image porte déjà sa propre lumière dorée. Lisibilité du titre =
.th-hero-img-shade (dégradé charbon) + text-shadow statique → inchangée. */
body:has(.th-hub) .th-hero-ember { display: none !important; }
body:has(.th-hub) .th-hero--cinema .th-hero-h1 { animation: none !important; }
body:has(.th-hub) .th-hero--cinema .th-hero-h1::before { display: none !important; }
body:has(.th-hub) .th-hero--cinema .th-hero-h1-grad::before { animation: none !important; opacity: 0 !important; }
body:has(.th-hub) .th-meta-live i { animation: none !important; opacity: 1 !important; }
body:has(.th-hub) .th-hero-scrollcue-line::after { animation: none !important; opacity: 1 !important; transform: translateY(0) !important; }
body:has(.th-hub) .th-hero--cinema .th-word { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
body:has(.th-hub) .th-hero--cinema .th-eyebrow,
body:has(.th-hub) .th-hero--cinema .th-hero-sub,
body:has(.th-hub) .th-hero--cinema .th-hero-meta { opacity: 1 !important; transform: none !important; transition: none !important; }
body:has(.th-hub) .th-hero-scrollcue--show { opacity: 0.85 !important; transition: none !important; }
body:has(.th-hub) .th-hero-ghost { transform: none !important; opacity: 0.085 !important; will-change: auto !important; }
/* ── Grid des 4 chapitres ─────────────────────────────────── */
.th-chapters {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
margin-bottom: 100px;
}
@media (max-width: 920px) {
.th-chapters { grid-template-columns: 1fr; }
}
/* ── Layout VERTICAL MAGAZINE (Phase 3) ───────────────────────
Image 3:2 native en haut + corps texte en dessous. Plus de
colonnes côte-à-côte : l'image respire en pleine largeur. */
.th-chap {
display: flex;
flex-direction: column;
padding: 0;
background:
linear-gradient(180deg, rgba(212,160,23,0.05) 0%, transparent 30%),
var(--th-surface);
border: 1px solid var(--th-border);
border-radius: var(--th-r-lg);
color: inherit;
text-decoration: none;
position: relative;
overflow: hidden;
transition: transform 0.5s cubic-bezier(.2,.8,.25,1),
border-color 0.4s,
box-shadow 0.5s cubic-bezier(.2,.8,.25,1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* Halo aura coloré */
.th-chap::before {
content: '';
position: absolute; inset: -2px;
background: linear-gradient(135deg,
rgba(212,160,23,0.35),
rgba(107,79,40,0.25),
rgba(245,197,75,0.20));
border-radius: var(--th-r-lg);
opacity: 0;
z-index: -1;
transition: opacity 0.5s;
filter: blur(16px);
}
.th-chap::after {
content: '';
position: absolute; left: 0; top: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--th-gold), transparent);
opacity: 0;
transition: opacity 0.4s;
}
.th-chap:hover {
transform: translateY(-8px);
border-color: var(--th-border-st);
box-shadow:
0 24px 60px -16px rgba(0,0,0,0.6),
0 0 60px -8px rgba(212,160,23,0.18);
text-decoration: none;
color: inherit;
}
.th-chap:hover::before { opacity: 0.55; }
.th-chap:hover::after { opacity: 1; }
.th-chap--soon {
cursor: default;
opacity: 0.55;
pointer-events: none;
filter: saturate(0.7);
}
/* Conteneur illus = bandeau pleine largeur au ratio 3:2 natif */
.th-chap-illus {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
display: flex; align-items: center; justify-content: center;
background:
radial-gradient(circle at 50% 50%, rgba(212,160,23,0.12), transparent 70%),
var(--th-deep);
border: none;
border-radius: 0;
border-bottom: 1px solid var(--th-border);
padding: 0;
overflow: hidden;
transition: background 0.5s;
}
.th-chap:hover .th-chap-illus {
background:
radial-gradient(circle at 50% 50%, rgba(212,160,23,0.22), transparent 70%),
var(--th-mid);
}
/* SVG fallback (chapitres sans image AI encore) : centré, gros et glowy */
.th-chap-illus svg {
width: auto; height: 75%;
max-height: 200px;
display: block;
filter: drop-shadow(0 6px 18px rgba(0,0,0,0.55))
drop-shadow(0 0 24px rgba(212,160,23,0.18));
transition: transform 0.6s cubic-bezier(.2,.8,.25,1);
}
.th-chap:hover .th-chap-illus svg { transform: translateY(-4px) scale(1.06); }
/* Particules flottantes dans l'illus */
.th-chap-illus::before,
.th-chap-illus::after {
content: '';
position: absolute;
width: 4px; height: 4px;
border-radius: 50%;
background: var(--th-gold);
box-shadow: 0 0 12px var(--th-gold);
opacity: 0;
pointer-events: none;
}
.th-chap-illus::before {
top: 10%; left: 18%;
animation: th-float-up 6s ease-in-out infinite;
}
.th-chap-illus::after {
top: 60%; right: 14%;
background: var(--th-gold);
box-shadow: 0 0 12px var(--th-gold);
animation: th-float-up 7s ease-in-out infinite 1.5s;
}
.th-chap:hover .th-chap-illus::before,
.th-chap:hover .th-chap-illus::after { opacity: 0.8; }
/* ── Card illustrated par image AI (Phase 3 vertical magazine) ──
Image 3:2 native en pleine largeur, vignette dorée subtile,
gradient bas pour donner un dégradé doux vers le body texte. */
.th-chap-illus--img {
padding: 0;
background: var(--th-void);
}
.th-chap-illus--img img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
filter: saturate(1.05) contrast(1.04);
transition: transform 0.8s cubic-bezier(.2,.8,.25,1), filter 0.4s;
}
.th-chap:hover .th-chap-illus--img img {
transform: scale(1.04);
filter: saturate(1.15) contrast(1.09);
}
.th-chap-illus-frame {
position: absolute; inset: 0;
pointer-events: none;
/* Frame doré inset + dégradé charbon vers le bas pour souder la card au body */
box-shadow:
inset 0 0 60px 4px rgba(20, 17, 13, 0.35),
inset 0 1px 0 0 rgba(212, 160, 23, 0.20);
background: linear-gradient(180deg, transparent 60%, rgba(20, 17, 13, 0.75) 100%);
}
/* Fallback CSS si l'image manque : kintsugi or sur marbre charbon */
.th-chap-illus--missing {
background:
linear-gradient(120deg, transparent 45%, rgba(212,160,23,0.22) 49%, rgba(245,197,75,0.36) 50%, rgba(212,160,23,0.22) 51%, transparent 55%),
radial-gradient(ellipse at 60% 50%, rgba(245,197,75,0.18), transparent 65%),
linear-gradient(135deg, var(--th-mid), var(--th-void));
}
/* ── Placeholder typographique kintsugi (cards 03/04 en attente d'image) ── */
.th-chap-illus--placeholder {
padding: 0;
background:
radial-gradient(ellipse 60% 50% at 50% 50%, rgba(245, 197, 75, 0.08), transparent 70%),
linear-gradient(135deg, var(--th-mid) 0%, var(--th-deep) 50%, var(--th-void) 100%);
position: relative;
overflow: hidden;
}
.th-chap-illus-kintsugi {
position: absolute;
inset: 0;
width: 100%; height: 100%;
pointer-events: none;
filter: drop-shadow(0 0 12px rgba(245, 197, 75, 0.35));
z-index: 1;
}
.th-chap-illus-num {
position: relative;
z-index: 2;
font-family: var(--serif);
font-size: clamp(110px, 18vw, 220px);
font-weight: 900;
font-style: italic;
line-height: 0.85;
letter-spacing: -0.04em;
color: transparent;
-webkit-text-stroke: 1.8px rgba(240, 236, 224, 0.30);
text-stroke: 1.8px rgba(240, 236, 224, 0.30);
text-shadow: 0 0 24px rgba(212, 160, 23, 0.12);
}
.th-chap-illus-label {
position: absolute;
bottom: 18px; left: 50%;
transform: translateX(-50%);
z-index: 2;
font-family: var(--mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--th-faint);
padding: 5px 12px;
background: rgba(0, 0, 0, 0.45);
border: 1px solid var(--th-border);
border-radius: 999px;
backdrop-filter: blur(6px);
}
.th-chap:hover .th-chap-illus--placeholder .th-chap-illus-num {
-webkit-text-stroke-color: rgba(245, 197, 75, 0.55);
}
/* Body de la card (en dessous de l'image dans le layout vertical) */
.th-chap-body {
padding: 28px 32px 32px;
}
@keyframes th-float-up {
0%, 100% { transform: translateY(0); opacity: 0; }
20% { opacity: 0.9; }
80% { opacity: 0.5; }
100% { transform: translateY(-30px); opacity: 0; }
}
.th-chap-body { display: flex; flex-direction: column; min-width: 0; }
.th-chap-num {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
color: var(--th-gold);
letter-spacing: 0.24em;
margin-bottom: 8px;
}
.th-chap-title {
font-family: var(--serif);
font-size: 36px;
font-weight: 400;
line-height: 1.05;
margin: 0 0 16px;
color: var(--th-text);
letter-spacing: -0.02em;
transition: color 0.3s;
}
.th-chap:hover .th-chap-title {
background: linear-gradient(135deg, var(--th-gold), var(--th-gold));
background-clip: text; -webkit-background-clip: text;
color: transparent; -webkit-text-fill-color: transparent;
}
.th-chap-desc {
font-family: var(--sans);
font-size: 15px;
line-height: 1.7;
color: var(--th-text-soft);
margin: 0 0 22px;
flex-grow: 1;
}
.th-chap-kpi-row {
display: flex;
gap: 14px;
margin-bottom: 22px;
padding: 16px 18px;
background: rgba(0,0,0,0.25);
border-radius: 14px;
border: 1px solid var(--th-border);
}
.th-chap-kpi { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.th-kpi-val {
font-family: var(--serif);
font-size: 26px;
font-weight: 400;
color: var(--th-gold);
letter-spacing: -0.01em;
line-height: 1.05;
text-shadow: 0 0 12px rgba(212,160,23,0.3);
}
.th-kpi-lab {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 500;
color: var(--th-muted);
letter-spacing: 0.06em;
margin-top: 6px;
text-transform: uppercase;
}
.th-chap-cta {
display: inline-flex; align-items: center; gap: 10px;
align-self: flex-start;
padding: 10px 20px;
background:
linear-gradient(135deg, rgba(212,160,23,0.18), rgba(107,79,40,0.12));
border: 1px solid var(--th-border-st);
border-radius: 999px;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
color: var(--th-gold);
letter-spacing: 0.02em;
transition: gap 0.25s, background 0.3s, transform 0.25s;
position: relative;
overflow: hidden;
}
.th-chap-cta::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(212,160,23,0), rgba(107,79,40,0.3), rgba(212,160,23,0));
transform: translateX(-100%);
transition: transform 0.6s cubic-bezier(.2,.8,.25,1);
}
.th-chap:hover .th-chap-cta {
gap: 14px;
background: linear-gradient(135deg, rgba(212,160,23,0.30), rgba(107,79,40,0.20));
}
.th-chap:hover .th-chap-cta::before { transform: translateX(100%); }
.th-cta-arrow { transition: transform 0.25s; font-weight: 700; position: relative; z-index: 1; }
.th-chap:hover .th-cta-arrow { transform: translateX(4px); }
.th-cta-text { position: relative; z-index: 1; }
.th-chap-cta--soon {
background: transparent;
color: var(--th-faint);
border-color: var(--th-border);
font-style: italic;
}
@media (max-width: 640px) {
/* Le layout est déjà vertical, on ne touche pas. Juste padding plus serré. */
.th-chap-body { padding: 22px 22px 26px; }
}
/* ── Bloc « Comment lire » ────────────────────────────────── */
.th-guide {
margin-bottom: 100px;
padding-top: 60px;
position: relative;
}
.th-guide::before {
content: '';
position: absolute; top: 0; left: 50%;
transform: translateX(-50%);
width: 80px; height: 1px;
background: linear-gradient(90deg, transparent, var(--th-border-st), transparent);
}
.th-guide-head { text-align: center; margin-bottom: 56px; }
.th-guide-eyebrow {
display: inline-block;
font-family: var(--mono);
font-size: 11px; font-weight: 500;
letter-spacing: 0.32em; text-transform: uppercase;
color: var(--th-gold);
margin-bottom: 18px;
}
.th-guide-title {
font-family: var(--serif);
font-size: clamp(34px, 4vw, 48px);
font-weight: 400;
color: var(--th-text);
margin: 0;
letter-spacing: -0.02em;
line-height: 1.05;
}
.th-guide-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 800px) { .th-guide-grid { grid-template-columns: 1fr; } }
.th-guide-card {
padding: 32px 28px;
background:
linear-gradient(135deg, rgba(212,160,23,0.03), transparent 60%),
var(--th-surface);
border: 1px solid var(--th-border);
border-radius: var(--th-r);
position: relative;
transition: transform 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.th-guide-card:hover {
transform: translateY(-3px);
border-color: var(--th-border-st);
box-shadow: 0 16px 40px -12px rgba(0,0,0,0.5);
}
.th-guide-icon {
width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
background:
radial-gradient(circle at 30% 30%, rgba(212,160,23,0.30), rgba(107,79,40,0.10));
border: 1px solid var(--th-border-st);
border-radius: 14px;
margin-bottom: 20px;
color: var(--th-gold);
font-size: 20px;
box-shadow: 0 0 24px -6px rgba(212,160,23,0.30);
}
.th-guide-card-title {
font-family: var(--serif);
font-size: 24px;
font-weight: 400;
color: var(--th-text);
margin: 0 0 12px;
letter-spacing: -0.01em;
}
.th-guide-card-desc {
font-family: var(--sans);
font-size: 14.5px;
line-height: 1.7;
color: var(--th-text-soft);
margin: 0;
}
/* ── Méthodologie ────────────────────────────────────────── */
.th-method {
padding: 60px 0 20px;
position: relative;
}
.th-method::before {
content: '';
position: absolute; top: 0; left: 50%;
transform: translateX(-50%);
width: 80px; height: 1px;
background: linear-gradient(90deg, transparent, var(--th-border-st), transparent);
}
.th-method-head { margin-bottom: 38px; }
.th-method-eyebrow {
display: flex; align-items: center; gap: 12px;
font-family: var(--mono);
font-size: 11px; font-weight: 500;
letter-spacing: 0.32em; text-transform: uppercase;
color: var(--th-gold);
margin-bottom: 14px;
}
.th-method-eyebrow .bar { width: 32px; height: 1px; background: var(--th-gold); }
.th-method-title {
font-family: var(--serif);
font-size: 34px; font-weight: 400;
color: var(--th-text);
margin: 0;
letter-spacing: -0.02em;
line-height: 1.05;
}
.th-method-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
@media (max-width: 900px) { .th-method-grid { grid-template-columns: 1fr; } }
.th-method-block h4 {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--th-gold);
margin: 0 0 14px;
}
.th-method-block p {
font-size: 14.5px;
line-height: 1.7;
color: var(--th-text-soft);
margin: 0;
}
.th-source-list {
list-style: none; padding: 0; margin: 0;
font-size: 14px;
line-height: 2.0;
}
.th-source-list li::before {
content: '◆';
display: inline-block; width: 18px;
color: var(--th-gold); font-size: 9px;
vertical-align: middle;
}
.th-source-list a {
color: var(--th-text-soft);
text-decoration: none;
border-bottom: 1px dotted var(--th-muted);
transition: color 0.2s, border-color 0.2s;
}
.th-source-list a:hover {
color: var(--th-gold);
border-color: var(--th-gold);
}
/* ═══════════════════════════════════════════════════════════════════
PAGE CHAPITRE — long-form éditorial (Pudding-style)
═══════════════════════════════════════════════════════════════════ */
.th-chapter {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px 140px;
color: var(--th-text);
font-family: var(--sans);
}
/* ── Hero du chapitre — typographique pur (Phase 4)
Plus d'image (déjà vue sur la card du hub). À la place : un gros
"01" décoratif en or à demi-translucide en arrière-plan + bloc
texte avec eyebrow + titre + sous-titre + meta. */
.th-c-hero {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
margin: 40px -24px 60px;
padding: 48px 56px 44px;
overflow: hidden;
border-radius: var(--th-r-xl);
background:
/* Subtle halo doré coin haut-droit pour signaler l'identité brand */
radial-gradient(ellipse 40% 60% at 95% 0%, rgba(212,160,23,0.10), transparent 65%),
radial-gradient(ellipse 50% 70% at 5% 100%, rgba(107,79,40,0.06), transparent 70%),
linear-gradient(135deg, var(--th-mid), var(--th-deep));
border: 1px solid var(--th-border);
}
@media (max-width: 700px) {
.th-c-hero { padding: 36px 24px 32px; }
}
/* Gros "01" décoratif en filigrane derrière le texte */
.th-c-hero-deco {
position: absolute;
top: -12px; right: 36px;
pointer-events: none;
user-select: none;
display: flex;
flex-direction: column;
align-items: center;
z-index: 0;
}
.th-c-hero-num {
font-family: var(--serif);
font-size: clamp(120px, 18vw, 240px);
font-weight: 900;
font-style: italic;
line-height: 0.85;
letter-spacing: -0.04em;
color: transparent;
-webkit-text-stroke: 1.5px rgba(212, 160, 23, 0.32);
text-stroke: 1.5px rgba(212, 160, 23, 0.32);
}
.th-c-hero-divider {
display: block;
width: 1px;
height: 80px;
background: linear-gradient(180deg, rgba(212, 160, 23, 0.5), transparent);
margin-top: 14px;
}
@media (max-width: 700px) {
.th-c-hero-deco { top: -4px; right: 12px; }
.th-c-hero-divider { height: 40px; }
}
/* Legacy : ancienne structure banner image, plus utilisée */
.th-c-hero-img,
.th-c-hero-img-shade,
.th-c-hero-img-vignette { display: none; }
/* Bloc texte du hero typographique */
.th-c-hero-text {
position: relative;
z-index: 1;
width: 100%;
max-width: 880px;
display: flex; flex-direction: column;
align-items: flex-start;
}
/* Legacy : la vieille classe th-c-hero-illus disparaît avec le SVG */
.th-c-hero-illus { display: none; }
.th-c-chap-num {
font-family: var(--mono);
font-size: 10.5px; font-weight: 500;
letter-spacing: 0.32em;
color: var(--th-gold-l);
margin-bottom: 12px;
display: inline-block;
text-shadow: 0 0 12px rgba(212,160,23,0.35);
}
.th-c-h1 {
font-family: var(--serif);
font-size: clamp(32px, 4.2vw, 56px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--th-text);
margin: 0 0 12px;
}
.th-c-h1-grad {
display: inline;
color: var(--th-text);
font-style: italic;
font-weight: 700;
background: none;
-webkit-text-fill-color: var(--th-text);
position: relative;
padding-bottom: 4px;
}
.th-c-h1-grad::after {
content: '';
position: absolute;
left: 0; right: 12%;
bottom: -2px;
height: 2px;
background: linear-gradient(90deg, var(--th-gold-l), var(--th-gold) 60%, transparent);
box-shadow: 0 0 8px rgba(245, 197, 75, 0.55);
border-radius: 2px;
}
.th-c-h-sub {
font-family: var(--body);
font-style: normal;
font-size: clamp(13.5px, 1.05vw, 15.5px);
line-height: 1.55;
color: var(--th-text-soft);
max-width: 880px;
margin: 0 0 14px;
}
.th-c-hero-meta {
display: flex; gap: 12px; align-items: center;
margin-top: 4px;
}
.th-c-back {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--mono);
font-size: 10.5px; font-weight: 500;
letter-spacing: 0.12em;
color: var(--th-muted);
text-decoration: none;
margin-bottom: 14px;
transition: color 0.2s, transform 0.2s;
text-transform: uppercase;
}
.th-c-back:hover {
color: var(--th-gold);
text-decoration: none;
transform: translateX(-4px);
}
/* ── KPI cards live ───────────────────────────────────────── */
.th-c-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-bottom: 100px;
}
@media (max-width: 800px) { .th-c-kpis { grid-template-columns: repeat(2, 1fr); } }
.th-c-kpi {
padding: 26px 22px 20px;
background:
linear-gradient(180deg, rgba(212,160,23,0.06), transparent 60%),
var(--th-surface);
border: 1px solid var(--th-border);
border-radius: 16px;
position: relative;
overflow: hidden;
transition: transform 0.3s, border-color 0.3s;
}
.th-c-kpi:hover {
transform: translateY(-2px);
border-color: var(--th-border-st);
}
.th-c-kpi::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, var(--th-gold), var(--th-gold-l));
box-shadow: 0 0 14px rgba(212,160,23,0.4);
}
.th-c-kpi-val {
font-family: var(--serif);
font-size: 36px;
font-weight: 400;
color: var(--th-gold);
line-height: 1.0;
letter-spacing: -0.02em;
margin-bottom: 8px;
display: block;
text-shadow: 0 0 18px rgba(212,160,23,0.25);
}
.th-c-kpi-lab {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--th-text);
text-transform: uppercase;
display: block;
margin-bottom: 4px;
}
.th-c-kpi-sub {
font-size: 11px;
color: var(--th-muted);
font-family: var(--mono);
}
/* La mention de source est ce qui rend un chiffre vérifiable : elle doit se lire.
Passée de 9,5 à 10,5 px en plus du relèvement de --th-muted (cf. bloc des
jetons de couleur) : à 9,5 px la ligne restait dure à déchiffrer même bien
contrastée. Elle demeure discrète — petite, capitales espacées, en bas à droite. */
.th-c-kpi-source {
position: absolute; bottom: 10px; right: 12px;
font-size: 10.5px;
color: var(--th-muted);
font-family: var(--mono);
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* ── Sections éditoriales ─────────────────────────────────── */
.th-c-section {
margin-bottom: 100px;
position: relative;
}
.th-c-section-num {
font-family: var(--mono);
font-size: 11px; font-weight: 500;
letter-spacing: 0.28em;
color: var(--th-muted);
display: block;
margin-bottom: 12px;
}
.th-c-section-h {
/* custom.css met `h2{display:flex;gap:12px}` (icônes du site de base) :
ça transforme un titre avec en items flex séparés → gros trou.
On restaure un flux texte normal pour ces titres éditoriaux. */
display: block;
font-family: var(--serif);
font-size: clamp(32px, 3.5vw, 48px);
font-weight: 400;
line-height: 1.1;
color: var(--th-text);
margin: 0 0 28px;
letter-spacing: -0.02em;
max-width: 800px;
}
/* Emphase dans un titre de section : accent or italique intentionnel
(sinon un nu paraît « cassé »). Aligné sur .fa-central-q em. */
.th-c-section-h em,
.th-c-section-h i {
font-style: italic;
color: var(--th-gold-l, #F5C54B);
}
/* Lede : grand chapeau italique signature Pudding */
.th-c-section-lede {
font-family: var(--serif);
font-size: clamp(20px, 1.65vw, 25px);
line-height: 1.55;
font-style: italic;
color: var(--th-text);
max-width: 760px;
margin: 0 0 40px;
position: relative;
padding-left: 28px;
}
.th-c-section-lede::before {
content: '';
position: absolute;
left: 0; top: 8px; bottom: 8px;
width: 3px;
background: linear-gradient(180deg, var(--th-gold), transparent);
border-radius: 3px;
}
/* Paragraphes — drop cap sur le premier ¶ */
.th-c-section > p {
font-family: var(--body);
font-size: 17px;
line-height: 1.75;
color: var(--th-text-soft);
margin: 0 0 22px;
max-width: 720px;
}
/* Lettrine (grande capitale) retirée 2026-06-15 : elle s'appliquait au chapô
italique, coupait le premier mot et entrait en collision avec la barre dorée.
Style éditorial conservé via le chapô .th-c-section-lede. */
.th-c-section > p strong {
color: var(--th-text);
font-weight: 600;
}
.th-c-section > p a {
color: var(--th-gold);
text-decoration: none;
border-bottom: 1px dotted var(--th-gold);
}
.th-c-section > p a:hover { border-style: solid; }
/* Big number en exergue */
.th-c-bignum {
display: block;
font-family: var(--serif);
font-size: clamp(64px, 8vw, 110px);
line-height: 0.95;
margin: 36px 0 6px;
font-weight: 400;
font-style: italic;
letter-spacing: -0.03em;
background: linear-gradient(135deg, var(--th-gold-l) 0%, var(--th-gold) 50%, var(--th-gold-d) 100%);
background-clip: text; -webkit-background-clip: text;
color: transparent; -webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 24px rgba(245, 197, 75, 0.28));
}
.th-c-bignum-cap {
display: block;
font-family: var(--mono);
font-size: 12px;
color: var(--th-muted);
margin-bottom: 40px;
letter-spacing: 0.08em;
text-transform: uppercase;
max-width: 600px;
}
/* Pull quote */
.th-c-pullquote {
font-family: var(--serif);
font-size: clamp(24px, 2.5vw, 36px);
line-height: 1.25;
font-style: italic;
color: var(--th-text);
text-align: center;
margin: 56px auto;
max-width: 800px;
padding: 40px 24px;
position: relative;
}
.th-c-pullquote::before,
.th-c-pullquote::after {
font-family: var(--serif);
position: absolute;
font-size: 80px;
color: var(--th-gold);
opacity: 0.5;
line-height: 1;
}
.th-c-pullquote::before { content: '"'; top: -10px; left: 0; }
.th-c-pullquote::after { content: '"'; bottom: -50px; right: 0; }
.th-c-pullquote em {
background: linear-gradient(135deg, var(--th-gold), var(--th-gold));
background-clip: text; -webkit-background-clip: text;
color: transparent; -webkit-text-fill-color: transparent;
font-style: italic;
}
/* Container graphique */
.th-c-chart {
margin: 36px 0;
padding: 28px 28px 22px;
background:
linear-gradient(180deg, rgba(212,160,23,0.03), transparent 60%),
var(--th-surface);
border: 1px solid var(--th-border);
border-radius: 16px;
position: relative;
}
.th-c-chart-head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 6px;
gap: 12px;
}
.th-c-chart-title {
font-family: var(--sans);
font-size: 15.5px;
font-weight: 600;
color: var(--th-text);
margin: 0;
letter-spacing: 0.005em;
}
.th-c-chart-src {
font-size: 10.5px;
color: var(--th-muted);
font-family: var(--mono);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.th-c-chart-src a {
color: var(--th-muted);
text-decoration: none;
border-bottom: 1px dotted var(--th-muted);
}
.th-c-chart-src a:hover { color: var(--th-gold); border-color: var(--th-gold); }
.th-c-chart-sub {
font-size: 13px;
color: var(--th-text-soft);
margin: 0 0 14px;
font-style: italic;
}
.th-c-chart-body {
width: 100%;
min-height: 360px;
}
/* ── Graphe compact "magazine" : flotte à droite, le texte l'enveloppe ──
Réservé aux graphes secondaires faciles à lire en petit. Le clearfix de
.th-c-section contient le flottant en fin de section ; un
stoppe l'habillage avant un encadré/tableau.
Repasse pleine largeur sous 820px. */
.th-c-section::after { content: ""; display: block; clear: both; }
.th-c-clear { clear: both; }
.th-c-chart--side {
float: right;
width: 42%;
max-width: 460px;
margin: 8px 0 18px 38px;
padding: 18px 20px 14px;
}
.th-c-chart--side .th-c-chart-head { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 4px; }
.th-c-chart--side .th-c-chart-title { font-size: 14px; }
.th-c-chart--side .th-c-chart-src { font-size: 9.5px; }
.th-c-chart--side .th-c-chart-sub { font-size: 11.5px; line-height: 1.5; margin-bottom: 10px; }
.th-c-chart--side .th-c-chart-body { min-height: 0; height: 260px; }
@media (max-width: 820px) {
.th-c-chart--side { float: none; width: auto; max-width: none; margin: 28px 0; padding: 28px 28px 22px; }
.th-c-chart--side .th-c-chart-head { flex-direction: row; align-items: baseline; }
.th-c-chart--side .th-c-chart-body { height: 320px; }
}
/* ── Expand inline ("Creuser") ──────────────────────────── */
.th-c-deepen {
margin: 12px 0 4px;
border: 1px solid var(--th-border);
border-radius: 12px;
background:
linear-gradient(180deg, rgba(212,160,23,0.025), transparent),
var(--th-surface);
transition: border-color 0.3s, background 0.3s;
}
.th-c-deepen:hover, .th-c-deepen[open] {
border-color: var(--th-border-st);
}
.th-c-deepen-summary {
list-style: none;
cursor: pointer;
padding: 14px 22px;
display: flex; align-items: center; gap: 12px;
font-family: var(--sans);
font-size: 13.5px;
font-weight: 600;
color: var(--th-gold);
user-select: none;
letter-spacing: 0.01em;
}
.th-c-deepen-summary::-webkit-details-marker { display: none; }
.th-c-deepen-summary::before {
content: '+';
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(212,160,23,0.30), rgba(212,160,23,0.10));
border: 1px solid var(--th-border-st);
font-family: var(--mono);
font-size: 14px;
font-weight: 700;
transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
}
.th-c-deepen[open] .th-c-deepen-summary::before {
content: '−';
transform: rotate(180deg);
background: radial-gradient(circle at 30% 30%, rgba(107,79,40,0.40), rgba(212,160,23,0.20));
box-shadow: 0 0 12px rgba(212,160,23,0.30);
}
.th-c-deepen-summary .th-c-deepen-tag {
margin-left: auto;
font-family: var(--mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--th-faint);
background: rgba(0,0,0,0.25);
border: 1px solid var(--th-border);
padding: 4px 10px;
border-radius: 999px;
text-transform: uppercase;
}
.th-c-deepen-body {
padding: 6px 26px 22px 56px;
font-family: var(--sans);
font-size: 14.5px;
line-height: 1.75;
color: var(--th-text-soft);
border-top: 1px solid var(--th-border);
margin-top: -1px;
}
.th-c-deepen-body p { margin: 14px 0; max-width: none; }
.th-c-deepen-body p strong { color: var(--th-text); font-weight: 600; }
.th-c-deepen-body ul, .th-c-deepen-body ol { padding-left: 20px; margin: 10px 0; }
.th-c-deepen-body li { margin-bottom: 8px; }
.th-c-deepen-body .formula,
.th-c-section > .formula {
font-family: var(--mono);
background: var(--th-void);
border: 1px solid var(--th-border);
border-radius: 8px;
padding: 14px 18px;
margin: 14px 0;
font-size: 13.5px;
overflow-x: auto;
color: var(--th-gold);
}
/* Une formule posée dans le corps du chapitre (hors encart « Creuser ») respire
davantage et se centre : elle sert de respiration entre deux paragraphes. */
.th-c-section > .formula {
margin: 26px auto;
padding: 18px 22px;
text-align: center;
font-size: 14px;
max-width: 760px;
}
/* FRACTION EMPILÉE — une division écrite « a ÷ b » sur une seule ligne se coupe
n'importe où quand la largeur manque, et se lit mal. Empilée, elle se lit
comme au tableau : ce qu'on gagne au-dessus, ce qu'on paie en dessous. */
.formula--fraction {
display: flex; align-items: center; justify-content: center;
gap: 14px; flex-wrap: wrap; text-align: left;
}
.formula--fraction .f-lhs { color: var(--th-text-soft); }
.formula--fraction .f-eq { color: var(--th-gold); font-size: 1.2em; }
.formula--fraction .f-frac { display: flex; flex-direction: column; }
.formula--fraction .f-num,
.formula--fraction .f-den { padding: 6px 4px; white-space: nowrap; }
.formula--fraction .f-num { border-bottom: 1.5px solid var(--th-gold); }
@media (max-width: 640px) {
/* Sur petit écran on laisse le numérateur et le dénominateur revenir à la
ligne plutôt que de forcer un défilement horizontal sur toute la page. */
.formula--fraction .f-num,
.formula--fraction .f-den { white-space: normal; }
.th-c-section > .formula { font-size: 12.5px; padding: 14px 12px; }
}
/* Sous-titre à l'intérieur d'une section : sans marge basse, le paragraphe qui
suit venait se coller dessus et l'ensemble se lisait comme un seul bloc. */
.th-c-subhead {
font-family: var(--sans, inherit);
font-size: 20px;
font-weight: 600;
color: var(--th-text);
margin: 42px 0 14px;
letter-spacing: -0.01em;
}
/* Sélecteur inline dans un graphe (choix de l'économie examinée). */
.th-c-select {
font-family: var(--mono);
font-size: 12.5px;
color: var(--th-text);
background: var(--th-void);
border: 1px solid var(--th-border);
border-radius: 7px;
padding: 6px 10px;
cursor: pointer;
}
.th-c-select:hover { border-color: var(--th-gold); }
.th-c-select:focus-visible { outline: 2px solid var(--th-gold); outline-offset: 2px; }
.th-c-deepen-body a {
color: var(--th-gold);
text-decoration: none;
border-bottom: 1px dotted var(--th-gold);
}
.th-c-deepen-body a:hover { border-style: solid; }
/* ── Tableaux narratifs (style éditorial) ──────────────────────── */
.th-c-table-head {
font-family: var(--serif);
font-size: clamp(20px, 1.8vw, 26px);
font-weight: 400;
font-style: italic;
color: var(--th-text);
margin: 48px 0 16px;
letter-spacing: -0.01em;
}
.th-c-table-wrap {
margin: 0 0 14px;
padding: 4px;
background: linear-gradient(180deg, rgba(212,160,23,0.04), transparent 60%), var(--th-surface);
border: 1px solid var(--th-border);
border-radius: 14px;
overflow-x: auto;
}
.th-c-table {
width: 100%;
border-collapse: collapse;
font-family: var(--sans);
font-size: 13.5px;
color: var(--th-text-soft);
}
.th-c-table thead th {
text-align: left;
font-family: var(--mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--th-gold);
padding: 14px 16px 10px;
border-bottom: 1px solid var(--th-border-st);
background: rgba(0,0,0,0.20);
}
.th-c-table tbody td {
padding: 12px 16px;
border-bottom: 1px solid var(--th-border);
}
.th-c-table tbody tr:last-child td { border-bottom: none; }
.th-c-table tbody tr:hover {
background: rgba(212,160,23,0.04);
}
.th-c-table tbody td strong { color: var(--th-text); }
.th-c-table-empty {
text-align: center !important;
padding: 24px !important;
color: var(--th-faint) !important;
font-style: italic;
}
/* ── Table synthèse « 9 fragilités → réponse BTC » ───────────── */
.th-c-table--synth td:first-child { white-space: nowrap; vertical-align: top; }
.th-c-table--synth td:first-child a {
color: var(--th-gold-l);
text-decoration: none;
font-weight: 600;
}
.th-c-table--synth td:first-child a:hover { color: var(--th-text); }
.th-c-table--synth td:first-child code {
background: rgba(212,160,23,0.12);
border: 1px solid var(--th-border-st);
border-radius: 5px;
padding: 1px 6px;
margin-right: 6px;
color: var(--th-gold-l);
font-family: var(--mono);
font-size: 11px;
}
.th-c-table--synth tbody td { vertical-align: top; }
.th-c-table--synth td:last-child strong { color: var(--th-gold-l); }
/* ── Callout (encadré "ordre de grandeur") ─────────────────────── */
.th-c-callout {
margin: 28px 0 24px;
padding: 24px 28px;
background:
linear-gradient(135deg, rgba(212,160,23,0.08), rgba(212,160,23,0.02));
border: 1px solid var(--th-border-st);
border-left: 3px solid var(--th-gold);
border-radius: 12px;
}
.th-c-callout-eyebrow {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--th-gold-l);
margin-bottom: 10px;
}
.th-c-callout p {
font-family: var(--body);
font-size: 15px;
line-height: 1.65;
color: var(--th-text);
margin: 0;
max-width: none;
}
.th-c-callout p strong { color: var(--th-gold-l); font-weight: 600; }
/* ══════════════════════════════════════════════════════════════════
Système de citations inline — chaque affirmation est vérifiable
══════════════════════════════════════════════════════════════════
Deux variantes :
- ↗ source
→ ouvre une page source externe (FRED, BLS, article)
-
→ ouvre un modal local avec un chart Plotly + lien source
Pattern visuel : pill subtile dorée en superscript, hover renforce.
*/
.th-cite {
display: inline-flex;
align-items: center;
gap: 4px;
margin: 0 0 0 4px;
padding: 1px 7px 2px;
background: rgba(212, 160, 23, 0.10);
border: 1px solid rgba(212, 160, 23, 0.28);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--th-gold-l);
text-decoration: none;
cursor: pointer;
vertical-align: 2px;
line-height: 1.4;
transition: background 0.18s, border-color 0.18s, transform 0.18s, color 0.18s;
white-space: nowrap;
}
.th-cite:hover, .th-cite:focus-visible {
background: rgba(212, 160, 23, 0.22);
border-color: rgba(245, 197, 75, 0.55);
color: var(--th-gold-pale);
transform: translateY(-1px);
text-decoration: none;
outline: none;
}
.th-cite:active { transform: translateY(0); }
.th-cite::before {
display: inline-block;
font-size: 10px;
line-height: 1;
margin-right: 2px;
}
.th-cite--link::before { content: '↗'; }
.th-cite--chart::before { content: '⌬'; } /* hexagone : icône "data" */
.th-cite--news::before { content: '◊'; } /* diamant : icône "article" */
/* Mode "verbose" pour les liens longs intégrés dans le texte */
.th-cite-text {
font-weight: 500;
letter-spacing: 0.02em;
}
/* ── Modal local pour les charts de citation ───────────────────── */
.th-cite-modal-backdrop {
position: fixed;
inset: 0;
z-index: 9000;
background: rgba(8, 6, 4, 0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease-out;
}
.th-cite-modal-backdrop.open {
opacity: 1;
pointer-events: auto;
}
.th-cite-modal {
position: fixed;
z-index: 9001;
top: 50%; left: 50%;
transform: translate(-50%, -52%);
width: min(880px, calc(100vw - 32px));
max-height: calc(100vh - 64px);
display: flex;
flex-direction: column;
background:
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(212,160,23,0.10), transparent 70%),
var(--th-mid);
border: 1px solid var(--th-border-st);
border-radius: var(--th-r-lg);
box-shadow:
0 24px 80px -20px rgba(0, 0, 0, 0.85),
0 0 80px -10px rgba(212, 160, 23, 0.18);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.th-cite-modal.open {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%);
}
.th-cite-modal-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 22px 28px 14px;
border-bottom: 1px solid var(--th-border);
}
.th-cite-modal-title {
font-family: var(--serif);
font-size: 20px;
font-weight: 400;
font-style: italic;
color: var(--th-text);
margin: 0;
letter-spacing: -0.01em;
}
.th-cite-modal-close {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: rgba(212,160,23,0.08);
border: 1px solid var(--th-border);
border-radius: 50%;
color: var(--th-gold-l);
font-size: 16px;
font-weight: 400;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, transform 0.2s;
flex-shrink: 0;
}
.th-cite-modal-close:hover {
background: rgba(212,160,23,0.20);
border-color: var(--th-gold);
transform: rotate(90deg);
}
.th-cite-modal-body {
padding: 18px 28px 24px;
overflow-y: auto;
flex: 1;
}
.th-cite-modal-chart {
width: 100%;
min-height: 360px;
}
.th-cite-modal-desc {
font-family: var(--body);
font-size: 14.5px;
line-height: 1.65;
color: var(--th-text-soft);
margin: 14px 0 0;
}
.th-cite-modal-source {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 18px;
padding: 8px 14px;
background: rgba(212,160,23,0.10);
border: 1px solid var(--th-border-st);
border-radius: 999px;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--th-gold-l);
text-decoration: none;
text-transform: uppercase;
}
.th-cite-modal-source:hover {
background: rgba(212,160,23,0.22);
color: var(--th-gold-pale);
text-decoration: none;
}
/* ── Bloc « Et donc ? » ───────────────────────────────────── */
.th-c-takeaway {
margin-top: 80px;
padding: 48px 44px;
background:
linear-gradient(135deg,
rgba(212,160,23,0.08),
rgba(107,79,40,0.04) 50%,
rgba(245,197,75,0.05));
border: 1px solid var(--th-border-st);
border-radius: 22px;
position: relative;
overflow: hidden;
}
.th-c-takeaway::before {
content: '';
position: absolute;
inset: -2px;
background: linear-gradient(135deg,
rgba(212,160,23,0.4),
rgba(107,79,40,0.3),
rgba(245,197,75,0.3));
border-radius: 22px;
filter: blur(20px);
opacity: 0.25;
z-index: -1;
}
.th-c-takeaway-eyebrow {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--th-gold);
margin-bottom: 14px;
}
.th-c-takeaway-h {
font-family: var(--serif);
font-size: clamp(28px, 3vw, 40px);
font-weight: 400;
color: var(--th-text);
margin: 0 0 28px;
letter-spacing: -0.015em;
line-height: 1.1;
}
.th-c-takeaway-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px;
list-style: none; padding: 0; margin: 0;
}
.th-c-takeaway-list li {
padding: 22px 22px 20px;
background: rgba(0,0,0,0.30);
border-radius: 14px;
border-top: 2px solid;
border-image: linear-gradient(90deg, var(--th-gold), var(--th-bronze)) 1;
position: relative;
}
.th-c-takeaway-list h5 {
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
color: var(--th-gold);
margin: 0 0 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.th-c-takeaway-list p {
font-size: 14px;
line-height: 1.65;
color: var(--th-text-soft);
margin: 0;
}
/* ── Ponts vers les autres onglets ───────────────────────── */
.th-c-bridges {
margin-top: 72px;
padding-top: 48px;
border-top: 1px solid var(--th-border);
}
.th-c-bridges-h {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--th-muted);
margin-bottom: 22px;
text-align: center;
}
.th-c-bridge-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
/* Pandoc emballe parfois les liens inline dans un : on le rend
transparent pour que les cartes redeviennent des items de la grille. */
.th-c-bridge-row > p { display: contents; }
.th-c-bridge {
display: flex; align-items: center; gap: 16px;
padding: 18px 20px;
background:
linear-gradient(135deg, rgba(212,160,23,0.04), transparent 60%),
var(--th-surface);
border: 1px solid var(--th-border);
border-radius: 14px;
text-decoration: none;
color: var(--th-text);
transition: transform 0.3s, border-color 0.3s, background 0.3s;
}
.th-c-bridge:hover {
transform: translateY(-2px);
border-color: var(--th-border-st);
background:
linear-gradient(135deg, rgba(212,160,23,0.10), transparent 60%),
var(--th-surface-2);
text-decoration: none; color: var(--th-text);
}
.th-c-bridge i {
font-size: 19px;
color: var(--th-gold);
width: 28px; text-align: center;
}
.th-c-bridge-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.th-c-bridge-title { font-size: 14.5px; font-weight: 600; color: var(--th-text); }
.th-c-bridge-sub { font-size: 12px; color: var(--th-muted); margin-top: 2px; }
/* ── Badge fraîcheur live ─────────────────────────────────── */
.th-c-fresh {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--mono);
font-size: 11px;
color: var(--th-muted);
margin-left: 12px;
letter-spacing: 0.04em;
}
.th-c-fresh::before {
content: '';
width: 8px; height: 8px;
background: var(--th-emerald-l);
border-radius: 50%;
box-shadow: 0 0 8px var(--th-emerald-l);
animation: th-pulse 2.5s ease-in-out infinite;
}
.th-c-fresh.stale::before { background: var(--th-gold); box-shadow: 0 0 8px var(--th-gold); animation: none; }
.th-c-fresh.dead::before { background: var(--th-red); box-shadow: 0 0 8px var(--th-red); animation: none; }
/* ── Scroll progress bar haut de page ─────────────────────── */
.th-scroll-progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 2px;
z-index: 1000;
background: transparent;
pointer-events: none;
}
.th-scroll-progress-bar {
height: 100%;
width: 100%;
/* PERF · scaleX au lieu de width : la barre se remplit via le compositeur
(aucun layout/paint par frame de scroll). Au tout début --p=0 → barre vide
et immobile en haut, zéro mouvement quand on regarde le sommet. */
transform: scaleX(var(--p, 0));
transform-origin: left center;
background: linear-gradient(90deg, var(--th-gold), var(--th-bronze), var(--th-gold));
box-shadow: 0 0 10px rgba(212,160,23,0.6);
transition: transform 0.15s ease-out;
}
/* ═════════════════════════════════════════════════════════════════ */
/* Section aside (vignette inset float-right pour §6 → §9) */
/* Petite image carrée encadrée or, légende italique pédagogique */
/* Convention éditoriale longforme : illustre sans interrompre */
/* ═════════════════════════════════════════════════════════════════ */
.th-c-section-aside {
float: right;
width: clamp(220px, 30%, 320px);
margin: 6px 0 22px 36px;
shape-outside: margin-box;
position: relative;
}
.th-c-section-aside-frame {
position: relative;
aspect-ratio: 1 / 1;
border: 1px solid rgba(245, 197, 75, 0.16);
border-radius: 2px;
overflow: hidden;
box-shadow: 0 14px 36px -14px rgba(0,0,0,0.65), 0 0 0 1px rgba(245,197,75,0.04);
background: var(--th-deep);
transition: border-color 0.6s ease, box-shadow 0.6s ease;
}
.th-c-section-aside-frame::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(245,197,75,0.05) 0%, transparent 30%);
z-index: 2; pointer-events: none;
mix-blend-mode: overlay;
}
.th-c-section-aside-frame::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 65%, rgba(20,17,13,0.35) 100%);
z-index: 1; pointer-events: none;
}
.th-c-section-aside-frame p {
margin: 0; padding: 0;
height: 100%; width: 100%;
display: block;
}
.th-c-section-aside-frame img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.88) contrast(1.04) brightness(0.95);
transition: transform 1.6s cubic-bezier(.2,.6,.2,1), filter 0.6s ease;
}
.th-c-section-aside:hover .th-c-section-aside-frame {
border-color: rgba(245, 197, 75, 0.34);
box-shadow: 0 18px 42px -14px rgba(0,0,0,0.75), 0 0 24px -8px rgba(245,197,75,0.18);
}
.th-c-section-aside:hover .th-c-section-aside-frame img {
transform: scale(1.04);
filter: saturate(1) contrast(1.05) brightness(1);
}
.th-c-section-aside-tag {
display: block;
margin: 12px 0 6px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(245, 197, 75, 0.78);
}
.th-c-section-aside-tag::before {
content: '— ';
color: rgba(245, 197, 75, 0.42);
}
.th-c-section-aside-cap {
margin: 0;
font-family: var(--serif);
font-size: 13.5px;
font-style: italic;
line-height: 1.55;
color: var(--th-muted);
border-left: 2px solid rgba(245, 197, 75, 0.22);
padding: 2px 0 2px 12px;
}
.th-c-section-aside-cap strong {
color: var(--th-text);
font-weight: 500;
font-style: normal;
}
@media (max-width: 720px) {
.th-c-section-aside {
float: none;
width: 100%;
max-width: 380px;
margin: 28px auto 32px;
}
}
/* Bullet list inside .th-c-section (used for synthèse) — gold dot */
.th-c-section > ul.th-c-section-list {
list-style: none;
padding: 0;
margin: 0 0 28px 0;
max-width: 760px;
}
.th-c-section > ul.th-c-section-list > li {
position: relative;
padding: 16px 20px 16px 44px;
font-family: var(--body);
font-size: 16px;
line-height: 1.7;
color: var(--th-text-soft);
border-left: 2px solid rgba(245,197,75,0.18);
margin-bottom: 8px;
background: rgba(245,197,75,0.02);
border-radius: 0 6px 6px 0;
}
.th-c-section > ul.th-c-section-list > li::before {
content: '';
position: absolute;
left: 18px; top: 27px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--th-gold);
box-shadow: 0 0 8px rgba(245,197,75,0.5);
}
.th-c-section > ul.th-c-section-list > li strong { color: var(--th-text); font-weight: 600; }
/* ═════════════════════════════════════════════════════════════════ */
/* §10 ROI Loop — diagramme SVG synthèse */
/* Encadrement éditorial, bord or, légende italique en sous-titre */
/* ═════════════════════════════════════════════════════════════════ */
.th-c-roi-loop-fig {
margin: 36px 0 32px;
padding: 24px;
background: linear-gradient(135deg, rgba(58,44,24,0.18) 0%, rgba(20,17,13,0.05) 60%);
border: 1px solid rgba(245, 197, 75, 0.16);
border-radius: 4px;
box-shadow: 0 16px 40px -16px rgba(0,0,0,0.55);
max-width: 920px;
position: relative;
}
.th-c-roi-loop-fig::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 80px; height: 2px;
background: linear-gradient(90deg, transparent, var(--th-gold), transparent);
}
.th-c-roi-loop {
width: 100%;
height: auto;
display: block;
}
.th-c-roi-loop-cap {
margin: 18px 8px 0;
font-family: var(--serif);
font-size: 13.5px;
font-style: italic;
line-height: 1.6;
color: var(--th-muted);
text-align: center;
border-top: 1px solid rgba(245, 197, 75, 0.12);
padding-top: 14px;
}
@media (max-width: 720px) {
.th-c-roi-loop-fig { padding: 16px; }
.th-c-roi-loop-cap { font-size: 12px; }
}
/* ═════════════════════════════════════════════════════════════════ */
/* Pullquote attribution — pour citations attribuées à personnalité */
/* ═════════════════════════════════════════════════════════════════ */
.th-c-pullquote-attr {
display: block;
font-family: var(--mono);
font-size: 11px;
font-style: normal;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--th-muted);
margin: 22px 0 0;
text-align: center;
line-height: 1.6;
}
.th-c-pullquote-attr cite {
font-style: normal;
color: var(--th-gold-l);
font-weight: 500;
letter-spacing: 0.12em;
}
.th-c-pullquote-attr a {
color: var(--th-muted);
text-decoration: none;
border-bottom: 1px dotted rgba(212,160,23,0.32);
transition: color 0.2s, border-color 0.2s;
}
.th-c-pullquote-attr a:hover {
color: var(--th-gold);
border-bottom-color: var(--th-gold);
}
.th-c-pullquote-attr-sep {
margin: 0 8px;
color: rgba(212,160,23,0.45);
}
/* ═══════════════════════════════════════════════════════════════════
CHAPITRE 06 · WEB 3 — composants dédiés
═══════════════════════════════════════════════════════════════════ */
/* ── Frise généalogique Web 1 → 2 → 3 ──────────────────────────── */
.th-w3-frise { margin: 36px 0 10px; }
.th-w3-frise-track {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
position: relative;
}
.th-w3-frise-track::before {
content: '';
position: absolute;
top: 14px; left: 16%; right: 16%;
height: 2px;
background: linear-gradient(90deg, var(--th-gold-d), var(--th-gold), var(--th-gold-l));
opacity: 0.55;
z-index: 0;
}
.th-w3-era { position: relative; z-index: 1; display: flex; flex-direction: column; }
.th-w3-era-node {
width: 30px; height: 30px;
border-radius: 50%;
margin: 0 auto 16px;
background: radial-gradient(circle at 30% 30%, var(--th-gold-l), var(--th-gold-d));
border: 2px solid var(--th-deep);
box-shadow: 0 0 0 4px rgba(212,160,23,0.12), 0 0 14px var(--th-glow-gold);
display: flex; align-items: center; justify-content: center;
font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--th-void);
}
.th-w3-era-card {
flex: 1;
background: linear-gradient(180deg, rgba(212,160,23,0.04), transparent), var(--th-surface);
border: 1px solid var(--th-border);
border-radius: var(--th-r);
padding: 20px 22px 22px;
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.th-w3-era:nth-child(3) .th-w3-era-card {
border-color: var(--th-border-st);
background: linear-gradient(180deg, rgba(212,160,23,0.10), transparent), var(--th-surface);
box-shadow: 0 0 26px rgba(212,160,23,0.10);
}
.th-w3-era-card:hover { border-color: var(--th-border-st); transform: translateY(-3px); }
.th-w3-era-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.th-w3-era-name {
font-family: var(--mono); font-size: 13px; font-weight: 700;
letter-spacing: 0.1em; color: var(--th-gold); text-transform: uppercase;
}
.th-w3-era-years { font-family: var(--mono); font-size: 11px; color: var(--th-faint); }
.th-w3-era-verb {
font-family: var(--serif); font-size: clamp(17px, 1.6vw, 22px);
color: var(--th-text); margin: 8px 0 14px; font-style: italic; line-height: 1.25;
}
.th-w3-era-verb b { font-style: normal; color: var(--th-gold-l); }
.th-w3-era-rows { display: flex; flex-direction: column; gap: 11px; }
.th-w3-era-row {
font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--th-text-soft);
}
.th-w3-era-row strong { color: var(--th-text); font-weight: 600; }
.th-w3-era-row .lab {
display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--th-faint); margin-bottom: 3px;
}
/* ── Les 4 pouvoirs du token ────────────────────────────────────── */
.th-w3-powers {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin: 30px 0 10px;
}
.th-w3-power {
background: linear-gradient(180deg, rgba(212,160,23,0.04), transparent), var(--th-surface);
border: 1px solid var(--th-border);
border-radius: var(--th-r);
padding: 22px 24px 24px;
transition: border-color 0.3s, transform 0.3s;
}
.th-w3-power:hover { border-color: var(--th-border-st); transform: translateY(-3px); }
.th-w3-power-ic {
width: 46px; height: 46px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle at 30% 30%, rgba(212,160,23,0.22), rgba(212,160,23,0.06));
border: 1px solid var(--th-border-st);
color: var(--th-gold-l); font-size: 19px; margin-bottom: 14px;
}
.th-w3-power-n {
font-family: var(--mono); font-size: 11px; color: var(--th-faint); letter-spacing: 0.1em;
text-transform: uppercase;
}
.th-w3-power-h {
font-family: var(--serif); font-size: clamp(18px, 1.6vw, 22px);
color: var(--th-text); margin: 4px 0 9px;
}
.th-w3-power-p { font-family: var(--sans); font-size: 14px; line-height: 1.65; color: var(--th-text-soft); margin: 0; }
.th-w3-power-p strong { color: var(--th-text); font-weight: 600; }
.th-w3-power-eg {
display: block; margin-top: 11px; font-family: var(--mono); font-size: 11.5px;
line-height: 1.45; color: var(--th-gold);
}
@media (max-width: 760px) {
.th-w3-frise-track { grid-template-columns: 1fr; gap: 16px; }
.th-w3-frise-track::before { display: none; }
.th-w3-era-node { margin: 0 0 12px; }
.th-w3-powers { grid-template-columns: 1fr; }
}