/* Polices chargées via dans index.html (perf) */
:root {
--neon-pink: #ff00aa;
--neon-cyan: #00f0ff;
--neon-blue: #3b82f6;
/* Design tokens — sombre (défaut) */
--color-page: #050507;
--color-grid-a: rgba(255, 0, 170, 0.03);
--color-grid-b: rgba(0, 240, 255, 0.03);
--color-text: #e4e4e7;
--color-text-soft: #d4d4d8;
--color-text-muted: #a1a1aa;
--color-text-faint: #71717a;
--color-heading: #fafafa;
--color-header-bg: rgba(5, 5, 7, 0.95);
--color-surface: rgba(12, 12, 18, 0.72);
--color-surface-alt: rgba(10, 10, 15, 0.70);
--color-border: rgba(255, 255, 255, 0.1);
--color-border-faint: rgba(255, 255, 255, 0.05);
--color-neon-pink: #ff00aa;
--color-neon-cyan: #00f0ff;
--color-card-bg: rgba(10, 10, 15, 0.68);
--color-card-border: rgba(255, 255, 255, 0.08);
--color-btn-text: #ffffff;
--color-brand-strip-bg: rgba(5, 5, 7, 0.96);
--color-terminal-section: linear-gradient(180deg, rgba(10, 8, 16, 0.65) 0%, rgba(5, 5, 7, 0.60) 100%);
--color-terminal-panel: rgba(5, 5, 10, 0.72);
--color-terminal-header: rgba(0, 0, 0, 0.35);
--color-footer-bg: rgba(0, 0, 0, 0.55);
--color-hero-glow: rgba(255, 0, 170, 0.06);
--color-progress-track: #1b2635;
--color-skeleton: rgba(255, 255, 255, 0.1);
--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.25);
--ease-header: cubic-bezier(0.16, 1, 0.3, 1);
--dur-header: 0.3s;
--header-progress: 0;
--site-header-h: 5rem;
--site-top-offset: 5.5rem;
--starfield-tile-near: 380px;
--starfield-tile-far: 520px;
--cursor-pencil: url("../cursor-pencil.svg") 16 28, url("../cursor-pencil.png") 16 28, auto;
}
[data-theme="light"] {
--color-page: #ffffff;
--color-grid-a: rgba(0, 0, 0, 0.04);
--color-grid-b: rgba(0, 0, 0, 0.03);
--color-text: #3f3f46;
--color-text-soft: #52525b;
--color-text-muted: #71717a;
--color-text-faint: #a1a1aa;
--color-heading: #18181b;
--color-header-bg: rgba(255, 255, 255, 0.92);
--color-surface: #ffffff;
--color-surface-alt: #f8f8fa;
--color-border: rgba(0, 0, 0, 0.09);
--color-border-faint: rgba(0, 0, 0, 0.05);
--color-neon-pink: #b91c9c;
--color-neon-cyan: #0e7490;
--color-card-bg: #ffffff;
--color-card-border: rgba(0, 0, 0, 0.08);
--color-btn-text: #18181b;
--color-brand-strip-bg: rgba(255, 255, 255, 0.96);
--color-terminal-section: linear-gradient(180deg, #f4f4f8 0%, #ffffff 100%);
--color-terminal-panel: #ffffff;
--color-terminal-header: #f4f4f8;
--color-footer-bg: #f4f4f8;
--color-hero-glow: rgba(185, 28, 156, 0.05);
--color-progress-track: #e4e4e7;
--color-skeleton: rgba(0, 0, 0, 0.08);
--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06);
}
/* Utilitaires sémantiques (JS dynamique + HTML) */
.ek-heading { color: var(--color-heading); }
.ek-text { color: var(--color-text); }
.ek-muted { color: var(--color-text-muted); }
.ek-faint { color: var(--color-text-faint); }
.ek-border { border-color: var(--color-border) !important; }
.ek-kicker {
font-size: 0.625rem;
font-family: ui-monospace, monospace;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.ek-kicker--cyan { color: var(--color-neon-cyan); }
.ek-kicker--pink { color: var(--color-neon-pink); }
.ek-skeleton-bar {
background: var(--color-skeleton);
border-radius: 0.25rem;
}
.ek-btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
border-radius: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
border: 1px solid var(--color-border);
color: var(--color-text);
text-decoration: none;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ek-btn-secondary:hover {
border-color: rgba(0, 240, 255, 0.4);
color: var(--color-heading);
}
[data-theme="light"] .ek-btn-secondary:hover {
border-color: rgba(14, 116, 144, 0.4);
}
.ek-link-muted {
color: var(--color-text-muted);
text-decoration: none;
transition: color 0.2s;
}
.ek-link-muted:hover { color: var(--color-neon-cyan); }
.lang-switcher {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.03);
}
.lang-switch {
border: none;
background: transparent;
color: #a1a1aa;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
padding: 6px 9px;
border-radius: 8px;
cursor: pointer;
transition: color 0.2s, background 0.2s;
}
.lang-switch:hover {
color: #e4e4e7;
}
.lang-switch--active {
color: #00f0ff;
background: rgba(0, 240, 255, 0.1);
}
.lang-fr-only-notice {
margin: 0 0 14px;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid rgba(0, 240, 255, 0.25);
background: rgba(0, 240, 255, 0.06);
color: #a1a1aa;
font-size: 0.82rem;
}
html {
scroll-behavior: smooth;
cursor: var(--cursor-pencil);
}
body {
font-family: 'Inter', system_ui, sans-serif;
cursor: var(--cursor-pencil);
}
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select,
[contenteditable="true"] {
cursor: text;
}
.font-display {
font-family: 'Space Grotesk', 'Inter', system_ui, sans-serif;
font-weight: 600;
letter-spacing: -0.025em;
}
.cyber-bg {
position: relative;
background-color: var(--color-page);
background-image:
linear-gradient(var(--color-grid-a) 1px, transparent 1px),
linear-gradient(90deg, var(--color-grid-b) 1px, transparent 1px);
background-size: 32px 32px;
color: var(--color-text);
}
/* Fond etoiles Grok — couche IMG fixe (iframe Bureau compatible) */
#starfield-fond-layer {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
width: 100%;
height: 100%;
}
#starfield-fond-layer::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
180deg,
rgba(5, 5, 7, 0.02) 0%,
rgba(5, 5, 7, 0.06) 55%,
rgba(5, 5, 7, 0.12) 100%
);
}
#starfield-fond-img {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
object-fit: cover;
object-position: var(--starfield-fond-position, 50% 50%);
filter: brightness(1.28) contrast(1.14) saturate(1.1);
}
/* Hero : couverture lisible devant le fond étoilé */
html:not([data-theme="light"]) body.has-starfield-fond #hero .hero-visual-card {
background: rgba(5, 5, 7, 0.35) !important;
border-color: rgba(255, 255, 255, 0.18) !important;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
}
html:not([data-theme="light"]) body.has-starfield-fond #hero .hero-visual-card img {
opacity: 1 !important;
filter: brightness(0.95) contrast(1.05) saturate(1.05);
}
html:not([data-theme="light"]) body.has-starfield-fond #hero .hero-visual-card .hero-visual-overlay {
opacity: 0.35 !important;
}
html:not([data-theme="light"]) body.cyber-bg.has-starfield-fond,
html:not([data-theme="light"]) body.cyber-bg:has(#starfield-fond-layer) {
background-color: transparent;
background-image: none;
}
html:not([data-theme="light"]) body.cyber-bg {
isolation: isolate;
background-color: #030308;
background-image:
linear-gradient(var(--color-grid-a) 1px, transparent 1px),
linear-gradient(90deg, var(--color-grid-b) 1px, transparent 1px);
background-size: 32px 32px;
}
/* Station Enaretos-7 — marge droite, au-dessus des fonds de section */
#station-decor-layer {
position: fixed;
top: var(--station-decor-top, 26%);
right: var(--station-decor-right, 1%);
left: auto;
bottom: auto;
width: min(var(--station-decor-size, 40vw), 640px);
height: min(76vh, 680px);
pointer-events: none;
z-index: 8;
perspective: 1200px;
transform-style: preserve-3d;
}
#station-decor-layer img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
opacity: var(--station-decor-opacity, 0.82);
transform-origin: 50% 50%;
transform-style: preserve-3d;
animation: none;
transform: rotateX(18deg) rotateY(-28deg) translateZ(0);
filter: saturate(1.05) brightness(1.1) contrast(1.14);
image-rendering: -webkit-optimize-contrast;
image-rendering: high-quality;
user-select: none;
backface-visibility: hidden;
}
@media (max-width: 1100px) {
#station-decor-layer {
width: min(var(--station-decor-size, 44vw), 560px);
height: min(68vh, 600px);
top: var(--station-decor-top, 24%);
right: 0%;
}
#station-decor-layer img {
opacity: calc(var(--station-decor-opacity, 0.48) * 0.9);
}
}
@media (max-width: 768px) {
#station-decor-layer {
width: min(var(--station-decor-size, 64vw), 400px);
height: min(52vh, 400px);
top: var(--station-decor-top, 20%);
right: 1%;
}
#starfield-fond-img {
object-position: var(--starfield-fond-position-mobile, 50% 50%);
}
#station-decor-layer img {
opacity: calc(var(--station-decor-opacity, 0.48) * 0.75);
}
}
@media (prefers-reduced-motion: reduce) {
#station-decor-layer img {
transform: rotateX(18deg) rotateY(-28deg);
}
}
/* Thème clair : masquer le starfield sombre (sinon texte foncé illisible) */
html[data-theme="light"] #starfield-fond-layer {
display: none !important;
}
html[data-theme="light"] #station-decor-layer img {
opacity: calc(var(--station-decor-opacity, 0.72) * 0.45);
filter: saturate(0.9) brightness(0.85) contrast(1.05);
}
.footer-sitvif a {
text-decoration: none;
}
.footer-sitvif a:hover {
text-decoration: underline;
}
/* Sections semi-transparentes — laisse passer le champ d'étoiles du body */
html:not([data-theme="light"]) #hero {
background: transparent !important;
}
html:not([data-theme="light"]) #roman {
background: linear-gradient(
to bottom,
rgba(9, 9, 11, 0.58),
rgba(10, 8, 16, 0.54),
rgba(5, 5, 7, 0.50)
) !important;
}
html:not([data-theme="light"]) #lectures {
background: rgba(5, 5, 7, 0.52) !important;
}
html:not([data-theme="light"]) #terminal.terminal-section {
background: linear-gradient(180deg, rgba(10, 8, 16, 0.56) 0%, rgba(5, 5, 7, 0.52) 100%) !important;
}
html:not([data-theme="light"]) #faq {
background: rgba(5, 5, 7, 0.52) !important;
}
html:not([data-theme="light"]) #a-propos {
background: rgba(9, 9, 11, 0.54) !important;
}
html:not([data-theme="light"]) #contact {
background: rgba(5, 5, 7, 0.52) !important;
}
html:not([data-theme="light"]) #waitlist .waitlist-card {
background: rgba(10, 10, 15, 0.50) !important;
}
html:not([data-theme="light"]) footer,
html:not([data-theme="light"]) footer.bg-black\/30 {
background: var(--color-footer-bg) !important;
}
/* Surcharge Tailwind — fonds opaques des sections (thème sombre) */
html:not([data-theme="light"]) #roman.bg-gradient-to-b {
background: linear-gradient(
to bottom,
rgba(9, 9, 11, 0.36),
rgba(10, 8, 16, 0.32),
rgba(5, 5, 7, 0.30)
) !important;
}
html:not([data-theme="light"]) #lectures.bg-\[\#050507\] {
background: rgba(5, 5, 7, 0.34) !important;
}
html:not([data-theme="light"]) #a-propos.bg-zinc-950\/40 {
background: rgba(9, 9, 11, 0.36) !important;
}
.neon-text {
text-shadow:
0 0 5px rgb(255 0 170 / 0.5),
0 0 10px rgb(255 0 170 / 0.3);
}
.neon-cyan {
text-shadow:
0 0 5px rgb(0 240 255 / 0.6),
0 0 15px rgb(0 240 255 / 0.3);
}
.section-header {
position: relative;
display: inline-block;
}
.section-header:after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 60%;
height: 2px;
background: linear-gradient(to right, #ff00aa, #00f0ff);
border-radius: 2px;
}
.glitch {
position: relative;
display: inline-block;
}
.glitch:hover {
animation: glitch 0.3s infinite linear alternate-reverse;
}
@keyframes glitch {
0% { transform: translate(0); }
20% { transform: translate(-1px, 1px); }
40% { transform: translate(-1px, -1px); }
60% { transform: translate(1px, 1px); }
80% { transform: translate(1px, -1px); }
100% { transform: translate(0); }
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.8;
}
.glitch::before {
color: #00f0ff;
animation: glitch-anim 0.4s infinite linear alternate-reverse;
clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}
.glitch::after {
color: #ff00aa;
animation: glitch-anim2 0.5s infinite linear alternate-reverse;
clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}
@keyframes glitch-anim {
0% { transform: translate(0); }
20% { transform: translate(-2px, 1px); }
100% { transform: translate(2px, -1px); }
}
@keyframes glitch-anim2 {
0% { transform: translate(0); }
20% { transform: translate(2px, -1px); }
100% { transform: translate(-1px, 1px); }
}
/* Hero CTA — priorité sur Tailwind + thème */
.hero-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 0.95rem 1.75rem;
border-radius: 1rem;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: -0.02em;
text-decoration: none;
border: 2px solid transparent;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.hero-cta:hover { text-decoration: none; transform: translateY(-1px); }
.hero-cta--primary {
background: linear-gradient(135deg, #ff00aa 0%, #d1008f 100%);
border-color: #ff00aa;
color: #ffffff;
box-shadow: 0 4px 22px rgba(255, 0, 170, 0.4);
}
.hero-cta--primary:hover {
background: linear-gradient(135deg, #ff33bb 0%, #e6009e 100%);
color: #ffffff;
box-shadow: 0 6px 28px rgba(255, 0, 170, 0.5);
}
.hero-cta--secondary {
background: rgba(0, 240, 255, 0.1);
border-color: #00f0ff;
color: #00f0ff;
box-shadow: 0 2px 16px rgba(0, 240, 255, 0.15);
}
.hero-cta--secondary:hover {
background: rgba(0, 240, 255, 0.18);
color: #7ffbff;
box-shadow: 0 4px 22px rgba(0, 240, 255, 0.28);
}
a.hero-cta.hero-cta--primary,
a.hero-cta.hero-cta--primary:visited {
background: linear-gradient(135deg, #ff00aa 0%, #d1008f 100%) !important;
border: 2px solid #ff00aa !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
a.hero-cta.hero-cta--primary span,
a.hero-cta.hero-cta--primary i {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
a.hero-cta.hero-cta--secondary,
a.hero-cta.hero-cta--secondary:visited {
background: rgba(0, 240, 255, 0.14) !important;
border: 2px solid #00f0ff !important;
color: #00f0ff !important;
-webkit-text-fill-color: #00f0ff !important;
}
a.hero-cta.hero-cta--secondary span,
a.hero-cta.hero-cta--secondary i {
color: #00f0ff !important;
-webkit-text-fill-color: #00f0ff !important;
}
.neon-button {
position: relative;
transition: all 0.2s cubic-bezier(0.23, 1.0, 0.32, 1);
border: 1px solid;
}
.neon-button-pink {
border-color: var(--color-neon-pink);
color: var(--color-btn-text);
background: transparent;
}
.neon-button-pink:hover {
background: rgba(255, 0, 170, 0.1);
box-shadow: 0 0 20px rgba(255, 0, 170, 0.5),
0 0 40px rgba(255, 0, 170, 0.2);
transform: translateY(-1px);
}
.neon-button-cyan {
border-color: var(--color-neon-cyan);
color: var(--color-btn-text);
background: transparent;
}
.neon-button-cyan:hover {
background: rgba(0, 240, 255, 0.1);
box-shadow: 0 0 20px rgba(0, 240, 255, 0.5),
0 0 40px rgba(0, 240, 255, 0.2);
transform: translateY(-1px);
}
.premium-card {
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
background: var(--color-card-bg);
border: 1px solid var(--color-card-border);
}
.premium-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
0 8px 10px -6px rgb(0 0 0 / 0.1),
0 0 0 1px rgba(255, 0, 170, 0.1);
}
.neon-glow-pink {
box-shadow: 0 0 15px rgba(255, 0, 170, 0.3);
}
.neon-glow-cyan {
box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}
.book-cover {
box-shadow:
0 25px 50px -12px rgb(0 0 0 / 0.5),
0 0 0 1px rgba(255,255,255,0.06),
0 0 25px rgba(0, 240, 255, 0.15);
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.book-cover:hover {
transform: scale(1.015) rotate(1deg);
}
.video-thumbnail {
position: relative;
overflow: hidden;
cursor: pointer;
}
.video-thumbnail::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
transparent 40%,
rgba(5,5,7,0.6) 85%
);
}
.play-button {
transition: all 0.2s ease;
box-shadow: 0 0 0 8px rgba(255, 0, 170, 0.2);
}
.video-thumbnail:hover .play-button {
transform: scale(1.1);
box-shadow: 0 0 0 12px rgba(255, 0, 170, 0.35);
}
.cyber-grid {
background-image:
linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
background-size: 42px 42px;
}
.modal {
animation: modalPop 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes modalPop {
from {
opacity: 0;
transform: scale(0.96) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.scanline {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to bottom,
transparent 50%,
rgba(255,255,255,0.035) 51%
);
background-size: 100% 6px;
pointer-events: none;
animation: scan 4s linear infinite;
z-index: 2;
opacity: 0.4;
}
@keyframes scan {
0% { transform: translateY(-100%); }
100% { transform: translateY(300%); }
}
.futuristic {
font-feature-settings: "tnum";
}
.affiliate-disclaimer {
font-size: 0.75rem;
opacity: 0.6;
}
.nav-link {
position: relative;
transition: color 0.2s ease;
}
.nav-link:after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: linear-gradient(to right, #ff00aa, #00f0ff);
transition: width 0.2s ease;
}
.nav-link:hover:after {
width: 100%;
}
.stat {
font-variant-numeric: tabular-nums;
}
.book-rec-card {
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1),
border-color 0.3s ease;
background: var(--color-card-bg);
border: 1px solid var(--color-card-border);
}
.book-rec-card:hover {
transform: translateY(-4px);
border-color: rgba(0, 240, 255, 0.25);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.2),
0 0 0 1px rgba(0, 240, 255, 0.08);
}
.book-rec-card--featured {
background: linear-gradient(145deg, rgba(255, 0, 170, 0.08), var(--color-card-bg));
}
.book-rec-card--featured:hover {
border-color: rgba(255, 0, 170, 0.35);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.25),
0 0 0 1px rgba(255, 0, 170, 0.12);
}
.book-rec-cover {
background: linear-gradient(145deg, rgba(255,0,170,0.12), rgba(0,240,255,0.08));
border: 1px solid rgba(255,255,255,0.08);
overflow: hidden;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.book-rec-cover img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.book-rec-tag {
font-size: 0.65rem;
letter-spacing: 0.08em;
}
/* Barre d'avancement roman — même logique que tableau_de_bord.html */
.book-progress-wrap { margin: 1rem 0 0.25rem; }
.book-progress-label {
display: flex;
justify-content: space-between;
gap: 1rem;
color: var(--color-text-muted);
font-size: 0.8rem;
margin-bottom: 0.5rem;
}
.book-progress-bar {
height: 10px;
background: var(--color-progress-track);
border-radius: 999px;
overflow: hidden;
border: 1px solid var(--color-border-faint);
}
.book-progress-fill {
height: 100%;
background: linear-gradient(90deg, #ff00aa, #00f0ff);
border-radius: 999px;
transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.book-progress-stat {
text-align: right;
flex-shrink: 0;
}
.book-progress-stat-value {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: #00f0ff;
line-height: 1.1;
}
.book-progress-stat-label {
font-size: 0.7rem;
color: #71717a;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.book-progress-note {
margin-top: 0.5rem;
font-size: 0.75rem;
color: #71717a;
font-style: italic;
}
.book-pipeline {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(255,255,255,0.06);
}
.book-pipeline-header {
display: flex;
justify-content: space-between;
gap: 1rem;
font-size: 0.65rem;
color: #71717a;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.75rem;
}
.book-pipeline-steps {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.35rem;
}
.book-pipeline-step { text-align: center; min-width: 0; }
.book-pipeline-dot {
width: 8px;
height: 8px;
border-radius: 50%;
margin: 0 auto 0.35rem;
background: #3f3f46;
}
.book-pipeline-step.active .book-pipeline-dot {
background: linear-gradient(90deg, #ff00aa, #00f0ff);
box-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
}
.book-pipeline-step.done .book-pipeline-dot { background: #00f0ff; }
.book-pipeline-label {
font-size: 0.62rem;
color: #52525b;
line-height: 1.25;
}
.book-pipeline-step.active .book-pipeline-label { color: #a1a1aa; }
.book-pipeline-step.done .book-pipeline-label { color: #71717a; }
.book-pipeline-global {
margin-top: 0.65rem;
height: 4px;
background: var(--color-progress-track);
border-radius: 999px;
overflow: hidden;
}
.book-pipeline-global-fill {
height: 100%;
background: linear-gradient(90deg, rgba(255,0,170,0.55), rgba(0,240,255,0.55));
border-radius: 999px;
transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
/* Header morphing (style sit-vif) */
.site-header {
position: sticky;
top: 0;
z-index: 50;
padding: calc(10px - 4px * var(--header-progress)) 16px calc(12px - 4px * var(--header-progress));
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.header-shell {
width: 100%;
max-width: calc(1536px - 110px * var(--header-progress));
margin-inline: auto;
padding: calc(10px - 3px * var(--header-progress)) calc(18px + 6px * var(--header-progress));
min-height: calc(56px - 10px * var(--header-progress));
background: color-mix(in srgb, var(--color-surface) calc(var(--header-progress) * 92%), transparent);
border: calc(1px * var(--header-progress)) solid color-mix(in srgb, var(--color-neon-pink) calc(var(--header-progress) * 22%), transparent);
border-radius: calc(0px + 999px * var(--header-progress));
box-shadow:
0 calc(4px * var(--header-progress)) calc(24px * var(--header-progress)) rgba(0, 0, 0, calc(0.38 * var(--header-progress))),
0 0 calc(18px * var(--header-progress)) rgba(255, 0, 170, calc(0.1 * var(--header-progress)));
backdrop-filter: blur(calc(14px * var(--header-progress)));
-webkit-backdrop-filter: blur(calc(14px * var(--header-progress)));
transform: translate3d(0, calc(6px * var(--header-progress)), 0);
transition:
max-width var(--dur-header) var(--ease-header),
padding var(--dur-header) var(--ease-header),
min-height var(--dur-header) var(--ease-header),
background var(--dur-header) var(--ease-header),
border-radius var(--dur-header) var(--ease-header),
border-color var(--dur-header) var(--ease-header),
box-shadow var(--dur-header) var(--ease-header),
backdrop-filter var(--dur-header) var(--ease-header),
-webkit-backdrop-filter var(--dur-header) var(--ease-header),
transform var(--dur-header) var(--ease-header);
}
.header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(0.75rem + 0.5rem * (1 - var(--header-progress)));
min-height: 44px;
}
.header-brand {
flex-shrink: 0;
text-decoration: none;
color: inherit;
}
.header-nav {
flex: 1 1 auto;
justify-content: center;
gap: calc(2rem - 0.85rem * var(--header-progress));
min-width: 0;
}
.header-actions {
flex-shrink: 0;
}
.site-header .brand-symbol-wrap {
width: calc(3.75rem - 1.15rem * var(--header-progress));
height: calc(3.75rem - 1.15rem * var(--header-progress));
transition: width var(--dur-header) var(--ease-header), height var(--dur-header) var(--ease-header);
}
.header-brand-title {
font-size: calc(1.25rem - 0.18rem * var(--header-progress));
line-height: 1.15;
transition: font-size var(--dur-header) var(--ease-header);
}
.header-brand-tagline {
opacity: calc(1 - var(--header-progress) * 1.4);
max-height: calc(1.25rem * max(0, 1 - var(--header-progress)));
overflow: hidden;
transition:
opacity var(--dur-header) var(--ease-header),
max-height var(--dur-header) var(--ease-header);
}
.hero-murderbot {
min-height: calc(100dvh - var(--site-header-h));
}
@media (max-width: 1023px) {
.header-shell {
max-width: 100% !important;
border-radius: 0 !important;
transform: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
}
.site-header.is-scrolled .header-shell {
background: color-mix(in srgb, var(--color-surface) 94%, transparent);
border-bottom: 1px solid var(--color-border) !important;
}
}
@media (prefers-reduced-motion: reduce) {
.site-header,
.header-shell,
.site-header .brand-symbol-wrap,
.header-brand-title,
.header-brand-tagline {
transition: none !important;
transform: none !important;
}
}
.roman-meta-grid {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.75rem;
}
.roman-meta-tag {
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.3rem 0.55rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
color: #a1a1aa;
background: rgba(255, 255, 255, 0.03);
}
.roman-acts {
display: flex;
flex-direction: column;
gap: 10px;
}
.roman-act-block {
border: 1px solid var(--color-border);
border-radius: 14px;
background: var(--color-surface-alt);
overflow: hidden;
}
.roman-act-summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 16px;
font-size: 0.95rem;
font-weight: 700;
color: var(--color-heading);
}
.roman-act-summary::-webkit-details-marker { display: none; }
.roman-act-count {
font-size: 0.72rem;
font-weight: 500;
color: var(--color-text-muted);
font-family: ui-monospace, monospace;
}
.roman-chapters-list {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0 10px 10px;
}
.roman-chapter-images {
display: flex;
gap: 8px;
padding: 0 14px 10px;
overflow-x: auto;
}
.roman-chapter-img-btn {
padding: 0;
border: none;
background: none;
cursor: zoom-in;
flex-shrink: 0;
border-radius: 10px;
transition: transform 0.15s ease, box-shadow 0.15s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
max-width: 120px;
}
.roman-chapter-img-label {
font-size: 0.58rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted);
line-height: 1.2;
text-align: center;
}
.roman-chapter-img-btn:hover {
transform: scale(1.04);
box-shadow: 0 6px 20px rgba(255, 0, 170, 0.18);
}
.roman-chapter-img-btn:focus-visible {
outline: 2px solid var(--color-neon-cyan);
outline-offset: 2px;
}
.roman-chapter-img {
display: block;
height: 88px;
width: auto;
min-width: 64px;
border-radius: 10px;
border: 1px solid var(--color-border);
object-fit: cover;
pointer-events: none;
}
.chapter-image-modal__img {
background: var(--color-surface-alt);
}
[data-theme="light"] .chapter-image-modal {
background: rgba(0, 0, 0, 0.88) !important;
}
[data-theme="light"] #chapter-image-modal button {
background: var(--color-surface) !important;
color: var(--color-heading) !important;
border-color: var(--color-border) !important;
}
.roman-chapter-item {
border: 1px solid var(--color-border);
border-radius: 12px;
background: var(--color-surface-alt);
overflow: hidden;
}
.roman-chapter-item[open] {
border-color: rgba(255, 0, 170, 0.25);
}
.roman-chapter-summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
font-size: 0.9rem;
color: var(--color-text);
}
.roman-chapter-summary::-webkit-details-marker { display: none; }
.roman-chapter-n {
font-family: ui-monospace, monospace;
font-size: 0.65rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #ff00aa;
flex-shrink: 0;
}
.roman-chapter-title { font-weight: 600; flex: 1; min-width: 0; }
.roman-chapter-status {
margin-left: auto;
flex-shrink: 0;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid transparent;
}
.roman-chapter-status--en_ligne {
color: #6ee7b7;
background: rgba(16, 185, 129, 0.12);
border-color: rgba(16, 185, 129, 0.35);
}
.roman-chapter-status--bientot {
color: #fcd34d;
background: rgba(245, 158, 11, 0.12);
border-color: rgba(245, 158, 11, 0.3);
}
.roman-chapter-status--brouillon {
color: #a1a1aa;
background: rgba(113, 113, 122, 0.12);
border-color: rgba(113, 113, 122, 0.3);
}
.ek-progress-strip {
border: 1px solid rgba(0, 240, 255, 0.22);
background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(255, 0, 170, 0.06));
border-radius: 16px;
padding: 14px 16px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
}
.ek-progress-strip--hero { max-width: 100%; }
.ek-progress-strip-kicker {
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #00f0ff;
font-weight: 700;
margin-bottom: 6px;
}
.ek-progress-strip-line {
font-size: 0.95rem;
color: #f4f4f5;
font-weight: 650;
line-height: 1.35;
}
.ek-progress-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.ek-chip {
display: inline-flex;
align-items: center;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
color: #a1a1aa;
background: rgba(0, 0, 0, 0.25);
}
.ek-chip--on {
color: #6ee7b7;
border-color: rgba(16, 185, 129, 0.4);
background: rgba(16, 185, 129, 0.12);
}
.ek-chip--soon {
color: #fcd34d;
border-color: rgba(245, 158, 11, 0.35);
background: rgba(245, 158, 11, 0.1);
}
.ek-chip--phase {
color: #f0abfc;
border-color: rgba(255, 0, 170, 0.35);
background: rgba(255, 0, 170, 0.1);
}
.ek-progress-strip-meta {
margin-top: 8px;
font-size: 0.78rem;
color: #a1a1aa;
line-height: 1.4;
}
.ek-progress-strip-bar {
margin-top: 12px;
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.ek-progress-strip-fill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #ff00aa, #00f0ff);
min-width: 4px;
transition: width 0.4s ease;
}
.ek-changelog {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
background: rgba(10, 10, 14, 0.65);
padding: 1.15rem 1.25rem;
}
.ek-changelog-list {
list-style: none;
margin: 0.75rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.ek-changelog-item {
display: grid;
grid-template-columns: 5.5rem 1fr;
gap: 0.65rem 0.85rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ek-changelog-item:first-child {
border-top: 0;
padding-top: 0;
}
.ek-changelog-date {
font-family: ui-monospace, monospace;
font-size: 0.68rem;
color: #71717a;
padding-top: 2px;
}
.ek-changelog-tag {
display: inline-block;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #00f0ff;
border: 1px solid rgba(0, 240, 255, 0.3);
border-radius: 999px;
padding: 1px 7px;
margin-bottom: 4px;
}
.ek-changelog-title {
font-size: 0.9rem;
font-weight: 600;
color: #f4f4f5;
margin: 0 0 2px;
}
.ek-changelog-body {
margin: 0;
font-size: 0.8rem;
line-height: 1.45;
color: #a1a1aa;
}
.roman-pitch {
font-size: 1.02rem;
line-height: 1.55;
color: #d4d4d8;
border-left: 3px solid #ff00aa;
padding: 0.35rem 0 0.35rem 0.9rem;
max-width: 36rem;
}
.roman-pitch strong { color: #f4f4f5; font-weight: 650; }
.roman-cover-stats { margin-top: 0.65rem; }
.ek-howto {
border: 1px solid rgba(255, 0, 170, 0.22);
border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 0, 170, 0.06), rgba(0, 0, 0, 0.2));
padding: 1.1rem 1.25rem;
}
.ek-howto-steps {
margin: 0;
padding-left: 1.15rem;
color: #a1a1aa;
font-size: 0.9rem;
line-height: 1.55;
}
.ek-howto-steps li { margin: 0.35rem 0; }
.ek-howto-steps strong { color: #f4f4f5; }
.ek-roman-faq {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
background: rgba(10, 10, 14, 0.55);
padding: 1.15rem 1.25rem;
}
.ek-faq-item {
border-top: 1px solid rgba(255, 255, 255, 0.07);
padding: 0.55rem 0;
}
.ek-faq-item:first-of-type { border-top: 0; }
.ek-faq-item summary {
cursor: pointer;
font-weight: 600;
color: #e4e4e7;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.35rem 0;
}
.ek-faq-item summary::-webkit-details-marker { display: none; }
.ek-faq-item summary::after {
content: '+';
color: #00f0ff;
font-weight: 700;
flex-shrink: 0;
}
.ek-faq-item[open] summary::after { content: '–'; }
.ek-faq-item p {
margin: 0.25rem 0 0.5rem;
font-size: 0.88rem;
line-height: 1.5;
color: #a1a1aa;
}
.ek-faq-item p strong { color: #d4d4d8; }
.roman-chapter-item--placeholder {
opacity: 0.72;
border-style: dashed;
}
.roman-chapter-item--placeholder .roman-chapter-title {
color: #a1a1aa;
font-weight: 500;
}
.roman-chapter-placeholder-text {
margin: 0;
padding: 0 14px 14px;
font-size: 0.82rem;
color: #71717a;
line-height: 1.45;
}
@media (max-width: 520px) {
.ek-changelog-item { grid-template-columns: 1fr; gap: 0.25rem; }
.ek-progress-strip { padding: 12px 13px; }
.ek-progress-strip-line { font-size: 0.9rem; }
.roman-pitch { font-size: 0.95rem; }
}
/* Light theme — avancement / FAQ / howto */
[data-theme="light"] .ek-progress-strip {
border-color: rgba(0, 140, 160, 0.28);
background: linear-gradient(135deg, rgba(0, 180, 200, 0.1), rgba(255, 0, 170, 0.06));
box-shadow: none;
}
[data-theme="light"] .ek-progress-strip-kicker { color: #0e7490; }
[data-theme="light"] .ek-progress-strip-line { color: #18181b; }
[data-theme="light"] .ek-progress-strip-meta { color: #52525b; }
[data-theme="light"] .ek-progress-strip-bar { background: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .ek-chip {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(0, 0, 0, 0.1);
color: #52525b;
}
[data-theme="light"] .ek-chip--on {
color: #047857;
background: rgba(16, 185, 129, 0.12);
border-color: rgba(16, 185, 129, 0.35);
}
[data-theme="light"] .ek-chip--soon {
color: #b45309;
background: rgba(245, 158, 11, 0.12);
border-color: rgba(245, 158, 11, 0.35);
}
[data-theme="light"] .ek-chip--phase {
color: #a21caf;
background: rgba(255, 0, 170, 0.08);
border-color: rgba(192, 38, 211, 0.3);
}
[data-theme="light"] .ek-changelog,
[data-theme="light"] .ek-roman-faq,
[data-theme="light"] .ek-howto {
background: rgba(255, 255, 255, 0.72);
border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .ek-changelog-title,
[data-theme="light"] .ek-faq-item summary { color: #18181b; }
[data-theme="light"] .ek-changelog-body,
[data-theme="light"] .ek-faq-item p,
[data-theme="light"] .ek-howto-steps { color: #52525b; }
[data-theme="light"] .ek-howto-steps strong,
[data-theme="light"] .ek-faq-item p strong { color: #27272a; }
[data-theme="light"] .roman-pitch {
color: #3f3f46;
border-left-color: #db2777;
}
[data-theme="light"] .roman-pitch strong { color: #18181b; }
[data-theme="light"] .roman-chapter-status--en_ligne {
color: #047857;
background: rgba(16, 185, 129, 0.12);
border-color: rgba(16, 185, 129, 0.35);
}
.roman-chapter-text {
margin: 0;
padding: 0 14px 14px;
font-size: 0.85rem;
line-height: 1.55;
color: var(--color-text-muted);
}
.roman-meta-tag--pink {
border-color: rgba(255, 0, 170, 0.25);
color: #f0abfc;
}
.roman-release {
font-size: 0.8rem;
color: #71717a;
margin-top: 0.65rem;
}
.roman-release strong { color: #a1a1aa; font-weight: 600; }
#roman, #murderbot, #a-propos, #lectures, #faq, #waitlist {
scroll-margin-top: var(--site-top-offset);
}
.ecosystem-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.75rem;
margin-top: 1rem;
}
.ecosystem-card {
display: block;
padding: 0.85rem 1rem;
border-radius: 0.85rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.02);
text-decoration: none;
transition: border-color 0.2s;
}
.ecosystem-card:hover {
border-color: rgba(0, 240, 255, 0.35);
}
.ecosystem-card strong {
display: block;
font-size: 0.82rem;
color: #e4e4e7;
margin-bottom: 0.25rem;
}
.ecosystem-card span {
font-size: 0.72rem;
color: #71717a;
}
.tiktok-embed-slot {
margin-top: 1.5rem;
padding: 1rem;
border-radius: 1rem;
border: 1px dashed rgba(255, 255, 255, 0.12);
text-align: center;
}
.tiktok-embed-slot iframe {
max-width: 100%;
margin: 0 auto;
}
/* Section Mon roman */
.roman-cover {
border-radius: 1rem;
border: 1px solid rgba(255, 0, 170, 0.25);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 40px rgba(255, 0, 170, 0.08);
width: 100%;
aspect-ratio: 2 / 3;
object-fit: cover;
}
.roman-cover-badge {
display: inline-block;
margin-top: 0.75rem;
font-size: 0.65rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #71717a;
}
.nav-roman {
color: #ff00aa !important;
border: 1px solid rgba(255, 0, 170, 0.35);
border-radius: 999px;
padding: 0.35rem 0.85rem !important;
}
.nav-roman:hover {
background: rgba(255, 0, 170, 0.08);
border-color: rgba(255, 0, 170, 0.6);
}
.roman-compact-card {
display: flex;
gap: 1rem;
align-items: center;
}
.roman-compact-cover {
width: 72px;
height: 108px;
object-fit: cover;
border-radius: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
flex-shrink: 0;
}
.excerpt-body {
max-height: min(62vh, 520px);
overflow-y: auto;
padding-right: 0.25rem;
}
.excerpt-body p {
margin-bottom: 1rem;
color: #d4d4d8;
font-size: 0.95rem;
line-height: 1.75;
}
.excerpt-body p:last-child { margin-bottom: 0; }
.waitlist-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(0, 240, 255, 0.2);
border-radius: 1rem;
padding: 1.25rem 1.5rem;
}
.waitlist-form {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
@media (min-width: 640px) {
.waitlist-form { flex-direction: row; align-items: stretch; }
}
.waitlist-input {
flex: 1;
background: #0a0a0f;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.75rem;
padding: 0.85rem 1rem;
color: #e4e4e7;
font-size: 0.9rem;
}
.waitlist-input:focus {
outline: none;
border-color: rgba(0, 240, 255, 0.45);
box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.12);
}
.waitlist-success {
color: #6ee7b7;
font-size: 0.88rem;
}
.brand-pillar {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 1rem;
padding: 1.1rem 1.25rem;
}
/* Symbole Enaretos — header (sans cadre, le glow de l'icône suffit) */
.brand-symbol-wrap {
flex-shrink: 0;
width: 3.75rem;
height: 3.75rem;
margin-right: 0.35rem;
padding: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
border-radius: 0;
box-shadow: none;
}
.brand-symbol {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.42);
filter: brightness(1.14) contrast(1.18) saturate(1.12);
transition: transform 0.2s ease, filter 0.2s ease;
}
.group:hover .brand-symbol {
transform: scale(1.48);
filter: brightness(1.2) contrast(1.2) saturate(1.15);
}
.brand-symbol-wrap--sm {
width: 3.25rem;
height: 3.25rem;
}
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link:focus {
position: fixed;
left: 1rem;
top: 1rem;
width: auto;
height: auto;
z-index: 100;
padding: 0.65rem 1rem;
background: #00f0ff;
color: #050507;
font-weight: 700;
font-size: 0.85rem;
border-radius: 0.5rem;
}
.book-locale-vo {
font-size: 0.65rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fbbf24;
border: 1px solid rgba(251, 191, 36, 0.35);
padding: 2px 7px;
border-radius: 999px;
}
/* Terminal Enaretos-7 */
.terminal-section {
background: var(--color-terminal-section);
border-top: 1px solid rgba(0, 240, 255, 0.12);
border-bottom: 1px solid rgba(255, 0, 170, 0.15);
}
.terminal-grid {
display: grid;
gap: 1.25rem;
}
@media (min-width: 1024px) {
.terminal-grid {
grid-template-columns: 1.15fr 0.85fr;
align-items: start;
}
}
.terminal-panel {
border: 1px solid rgba(0, 240, 255, 0.22);
border-radius: 1.25rem;
background: var(--color-terminal-panel);
overflow: hidden;
box-shadow: 0 0 40px rgba(0, 240, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.terminal-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--color-card-border);
background: var(--color-terminal-header);
}
.terminal-avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.65rem;
overflow: hidden;
border: 1px solid rgba(255, 0, 170, 0.35);
flex-shrink: 0;
position: relative;
}
.terminal-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.35);
filter: brightness(1.1) contrast(1.15);
}
.terminal-avatar::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(transparent 60%, rgba(0, 240, 255, 0.15));
pointer-events: none;
animation: terminal-scan 3s ease-in-out infinite;
}
@keyframes terminal-scan {
0%, 100% { opacity: 0.3; transform: translateY(-100%); }
50% { opacity: 0.8; transform: translateY(100%); }
}
.terminal-header-meta {
min-width: 0;
flex: 1;
}
.terminal-header-title {
font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-heading);
letter-spacing: -0.02em;
}
.terminal-header-sub {
font-size: 0.65rem;
font-family: ui-monospace, 'Cascadia Code', monospace;
color: #71717a;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.terminal-dots {
display: flex;
gap: 5px;
}
.terminal-dots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
}
.terminal-dots span:nth-child(1) { background: rgba(255, 0, 170, 0.5); }
.terminal-dots span:nth-child(2) { background: rgba(251, 191, 36, 0.45); }
.terminal-dots span:nth-child(3) { background: rgba(0, 240, 255, 0.5); }
.terminal-screen {
min-height: 220px;
max-height: min(42vh, 340px);
overflow-y: auto;
padding: 1rem 1.1rem;
font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
font-size: 0.78rem;
line-height: 1.55;
color: #a1f0e8;
background:
repeating-linear-gradient(0deg, rgba(0, 240, 255, 0.02) 0px, rgba(0, 240, 255, 0.02) 1px, transparent 1px, transparent 3px);
}
.terminal-line { margin-bottom: 0.35rem; word-break: break-word; }
.terminal-line--dim { color: #52525b; font-size: 0.72rem; }
.terminal-line--typing .terminal-cursor-line::after {
content: '▋';
color: #00f0ff;
animation: terminal-blink 0.9s step-end infinite;
}
@keyframes terminal-blink {
50% { opacity: 0; }
}
.terminal-input-line { color: #e4e4e7; margin-top: 0.5rem; }
.terminal-prompt { color: #ff00aa; margin-right: 0.35rem; }
.terminal-cmd { color: #f4f4f5; }
.terminal-dim { color: #71717a; }
.terminal-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.65rem 0 0.25rem;
}
.terminal-link {
font-size: 0.72rem;
padding: 0.35rem 0.65rem;
border-radius: 0.5rem;
border: 1px solid rgba(0, 240, 255, 0.3);
color: #00f0ff;
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
}
.terminal-link:hover {
background: rgba(0, 240, 255, 0.08);
border-color: rgba(0, 240, 255, 0.55);
}
.terminal-queries {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
padding: 0.75rem 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(0, 0, 0, 0.2);
}
.terminal-query-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.7rem;
border-radius: 0.55rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.03);
color: #d4d4d8;
font-size: 0.72rem;
font-weight: 500;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.terminal-query-btn:hover {
border-color: rgba(0, 240, 255, 0.4);
background: rgba(0, 240, 255, 0.06);
color: #fff;
}
.terminal-query-btn i { font-size: 0.65rem; color: #00f0ff; opacity: 0.85; }
.terminal-form {
display: flex;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.terminal-form input {
flex: 1;
background: var(--color-surface-alt);
border: none;
padding: 0.75rem 1rem;
color: #e4e4e7;
font-family: ui-monospace, monospace;
font-size: 0.8rem;
}
.terminal-form input:focus { outline: none; }
.terminal-form input::placeholder { color: #52525b; }
.terminal-form button {
padding: 0 1rem;
border: none;
border-left: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 0, 170, 0.12);
color: #ff00aa;
cursor: pointer;
font-size: 0.85rem;
}
.terminal-form button:hover { background: rgba(255, 0, 170, 0.2); }
.terminal-quiz-panel {
border: 1px solid rgba(255, 0, 170, 0.22);
border-radius: 1.25rem;
background: var(--color-card-bg);
padding: 1.25rem 1.35rem;
transition: box-shadow 0.4s ease;
}
.terminal-quiz-panel.terminal-quiz--pulse {
box-shadow: 0 0 30px rgba(255, 0, 170, 0.25);
}
.quiz-progress {
height: 3px;
background: rgba(255, 255, 255, 0.08);
border-radius: 999px;
overflow: hidden;
margin-bottom: 1rem;
}
.quiz-progress-fill {
height: 100%;
background: linear-gradient(90deg, #ff00aa, #00f0ff);
border-radius: 999px;
transition: width 0.35s ease;
}
.quiz-step-num {
font-size: 0.65rem;
font-family: ui-monospace, monospace;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #71717a;
margin: 0 0 0.5rem;
}
.quiz-question {
font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
font-size: 1.15rem;
font-weight: 600;
color: var(--color-heading);
margin: 0 0 1rem;
letter-spacing: -0.02em;
}
.quiz-options {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.quiz-option {
text-align: left;
padding: 0.85rem 1rem;
border-radius: 0.75rem;
border: 1px solid var(--color-border);
background: var(--color-surface-alt);
color: var(--color-text);
font-size: 0.88rem;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.quiz-option:hover {
border-color: rgba(255, 0, 170, 0.45);
background: rgba(255, 0, 170, 0.06);
transform: translateX(2px);
}
.quiz-result-label {
font-size: 0.65rem;
font-family: ui-monospace, monospace;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #00f0ff;
margin-bottom: 0.5rem;
}
.quiz-result-title {
font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
font-size: 1.35rem;
font-weight: 600;
color: var(--color-heading);
margin: 0 0 0.25rem;
}
.quiz-result-author { font-size: 0.85rem; color: #71717a; margin: 0 0 0.75rem; }
.quiz-result-tagline { font-size: 0.9rem; color: #a1a1aa; line-height: 1.55; margin: 0 0 1rem; }
.quiz-result-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }
.quiz-badge {
font-size: 0.65rem;
padding: 0.25rem 0.55rem;
border-radius: 999px;
border: 1px solid rgba(255, 0, 170, 0.35);
color: #ff00aa;
}
.quiz-badge--dim {
border-color: rgba(255, 255, 255, 0.12);
color: #71717a;
}
.quiz-result-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.quiz-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.65rem 1rem;
border-radius: 0.75rem;
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.15s, border-color 0.15s;
}
.quiz-btn--primary {
background: rgba(0, 240, 255, 0.12);
border-color: rgba(0, 240, 255, 0.45);
color: #00f0ff;
}
.quiz-btn--primary:hover { background: rgba(0, 240, 255, 0.2); }
.quiz-btn--ghost {
background: transparent;
border-color: rgba(255, 255, 255, 0.12);
color: #a1a1aa;
}
.quiz-btn--ghost:hover { border-color: rgba(255, 255, 255, 0.25); color: #e4e4e7; }
.quiz-disclaimer {
margin-top: 0.85rem;
font-size: 0.65rem;
color: #52525b;
}
.terminal-launcher {
position: fixed;
bottom: 1.25rem;
right: 1.25rem;
z-index: 45;
width: 3.25rem;
height: 3.25rem;
border-radius: 1rem;
border: 1px solid rgba(0, 240, 255, 0.35);
background: rgba(5, 5, 10, 0.92);
backdrop-filter: blur(8px);
overflow: hidden;
cursor: pointer;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45), 0 0 20px rgba(0, 240, 255, 0.12);
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.terminal-launcher:hover {
transform: scale(1.06);
border-color: rgba(255, 0, 170, 0.5);
box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 0, 170, 0.15);
}
.terminal-launcher img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.4);
filter: brightness(1.12) contrast(1.15);
}
.terminal-launcher-label {
position: absolute;
bottom: -1.5rem;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font-size: 0.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #71717a;
opacity: 0;
transition: opacity 0.2s;
pointer-events: none;
}
.terminal-launcher:hover .terminal-launcher-label { opacity: 1; }
@media (max-width: 767px) {
.terminal-launcher { bottom: 1rem; right: 1rem; width: 2.85rem; height: 2.85rem; }
}
/* --- Thème clair / sombre --- */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.03);
color: #e4e4e7;
cursor: pointer;
transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.theme-toggle:hover {
border-color: rgba(0, 240, 255, 0.35);
background: rgba(0, 240, 255, 0.08);
}
/* --- Thème clair : tokens + surfaces --- */
[data-theme="light"] body,
[data-theme="light"] body.cyber-bg {
background-color: var(--color-page) !important;
background-image:
linear-gradient(var(--color-grid-a) 1px, transparent 1px),
linear-gradient(90deg, var(--color-grid-b) 1px, transparent 1px) !important;
color: var(--color-text) !important;
}
[data-theme="light"] #mobile-menu,
[data-theme="light"] .bg-\[\#050507\]\/95 {
background: var(--color-header-bg) !important;
border-color: var(--color-border) !important;
}
[data-theme="light"] .site-header.is-scrolled .header-shell {
background: color-mix(in srgb, var(--color-surface) 96%, transparent);
border-color: color-mix(in srgb, var(--color-neon-pink) 18%, transparent) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .brand-strip {
border-bottom-color: rgba(185, 28, 156, 0.15);
}
[data-theme="light"] .brand-strip-pill {
border-color: var(--color-border);
color: var(--color-text);
}
[data-theme="light"] .brand-strip-pill:hover { color: var(--color-heading); }
[data-theme="light"] .brand-strip-pill--pink { color: var(--color-neon-pink); }
[data-theme="light"] #hero .cyber-grid {
background-image:
linear-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.035) 1px, transparent 1px);
opacity: 0.5 !important;
}
[data-theme="light"] .text-zinc-200,
[data-theme="light"] .text-zinc-300 {
color: var(--color-text) !important;
}
[data-theme="light"] .text-zinc-400,
[data-theme="light"] .text-zinc-500,
[data-theme="light"] .text-zinc-600,
[data-theme="light"] .text-zinc-700 {
color: var(--color-text-muted) !important;
}
[data-theme="light"] .text-white,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] .glitch {
color: var(--color-heading) !important;
}
[data-theme="light"] .glitch.text-\[\#ff00aa\] {
color: var(--color-neon-pink) !important;
}
[data-theme="light"] .hover\:text-white:hover,
[data-theme="light"] .hover\:text-zinc-300:hover {
color: var(--color-heading) !important;
}
[data-theme="light"] .border-white\/5,
[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-white\/15,
[data-theme="light"] .border-white\/20 {
border-color: var(--color-border) !important;
}
[data-theme="light"] .border-\[\#ff00aa\]\/20,
[data-theme="light"] .border-\[\#ff00aa\]\/25,
[data-theme="light"] .border-\[\#ff00aa\]\/30,
[data-theme="light"] .border-\[\#ff00aa\]\/35 {
border-color: rgba(185, 28, 156, 0.22) !important;
}
[data-theme="light"] .bg-\[\#050507\],
[data-theme="light"] .bg-\[\#0a0a0f\],
[data-theme="light"] .bg-\[\#0c0c12\],
[data-theme="light"] .bg-\[\#111118\],
[data-theme="light"] .bg-zinc-900,
[data-theme="light"] .bg-zinc-950,
[data-theme="light"] .bg-zinc-950\/40,
[data-theme="light"] .bg-zinc-950\/30 {
background-color: var(--color-surface-alt) !important;
}
[data-theme="light"] #roman,
[data-theme="light"] #lectures {
background: linear-gradient(to bottom, var(--color-surface-alt), var(--color-page)) !important;
border-color: rgba(185, 28, 156, 0.12) !important;
}
[data-theme="light"] #a-propos,
[data-theme="light"] #mentions-legales {
background-color: var(--color-surface-alt) !important;
}
[data-theme="light"] footer {
background: var(--color-footer-bg) !important;
border-color: var(--color-border) !important;
}
[data-theme="light"] .bg-black\/20,
[data-theme="light"] .bg-black\/30,
[data-theme="light"] .bg-black\/40,
[data-theme="light"] .bg-black\/60,
[data-theme="light"] .bg-black\/70,
[data-theme="light"] .bg-black\/80,
[data-theme="light"] .bg-black\/30 {
background-color: rgba(0, 0, 0, 0.5) !important;
}
[data-theme="light"] .bg-white\/5,
[data-theme="light"] .bg-white\/10,
[data-theme="light"] .hover\:bg-white\/5:hover,
[data-theme="light"] .hover\:bg-white\/10:hover {
background-color: rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] #hero .hero-cta--primary,
[data-theme="light"] #hero .hero-cta--primary span,
[data-theme="light"] #hero .hero-cta--primary i {
color: #ffffff !important;
}
[data-theme="light"] #hero .hero-cta--secondary,
[data-theme="light"] #hero .hero-cta--secondary span,
[data-theme="light"] #hero .hero-cta--secondary i {
color: #0e7490 !important;
}
[data-theme="light"] .hero-cta--primary {
background: linear-gradient(135deg, #b91c9c 0%, #9d174d 100%);
border-color: #b91c9c;
color: #ffffff;
box-shadow: 0 4px 18px rgba(185, 28, 156, 0.32);
}
[data-theme="light"] .hero-cta--primary:hover {
background: linear-gradient(135deg, #c026d3 0%, #b91c9c 100%);
color: #ffffff;
box-shadow: 0 6px 24px rgba(185, 28, 156, 0.4);
}
[data-theme="light"] .hero-cta--secondary {
background: #ffffff;
border-color: #0e7490;
color: #0e7490;
box-shadow: 0 2px 14px rgba(14, 116, 144, 0.14);
}
[data-theme="light"] .hero-cta--secondary:hover {
background: #f0fdfa;
color: #0c4a6e;
box-shadow: 0 4px 20px rgba(14, 116, 144, 0.22);
}
[data-theme="light"] .neon-button-pink {
color: #ffffff !important;
background: var(--color-neon-pink) !important;
border-color: var(--color-neon-pink) !important;
box-shadow: 0 4px 16px rgba(185, 28, 156, 0.28);
}
[data-theme="light"] .neon-button-pink:hover {
background: #9d174d !important;
border-color: #9d174d !important;
color: #ffffff !important;
}
[data-theme="light"] .neon-button-cyan {
color: var(--color-neon-cyan) !important;
background: #ffffff !important;
border: 2px solid var(--color-neon-cyan) !important;
}
[data-theme="light"] .neon-button-cyan:hover {
background: rgba(14, 116, 144, 0.08) !important;
color: #0c4a6e !important;
}
[data-theme="light"] .neon-text {
text-shadow: 0 0 8px rgb(185 28 156 / 0.15);
}
[data-theme="light"] .neon-cyan,
[data-theme="light"] .text-\[\#00f0ff\] {
color: var(--color-neon-cyan) !important;
text-shadow: none;
}
[data-theme="light"] .text-\[\#ff00aa\] {
color: var(--color-neon-pink) !important;
}
[data-theme="light"] .premium-card,
[data-theme="light"] .book-rec-card,
[data-theme="light"] .roman-card,
[data-theme="light"] .sf-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .waitlist-card,
[data-theme="light"] .waitlist-panel,
[data-theme="light"] .brand-pillar,
[data-theme="light"] .ecosystem-card,
[data-theme="light"] .roman-chapter-item,
[data-theme="light"] .terminal-quiz-panel {
background: var(--color-card-bg) !important;
border-color: var(--color-card-border) !important;
box-shadow: var(--shadow-card);
}
[data-theme="light"] .book-rec-card--featured {
background: linear-gradient(145deg, rgba(185, 28, 156, 0.06), var(--color-card-bg)) !important;
}
[data-theme="light"] .premium-card:hover,
[data-theme="light"] .book-rec-card:hover {
box-shadow: var(--shadow-card), 0 0 0 1px rgba(185, 28, 156, 0.08);
}
[data-theme="light"] .roman-chapter-summary,
[data-theme="light"] .ecosystem-card strong,
[data-theme="light"] .book-rec-card h3 {
color: var(--color-heading) !important;
}
[data-theme="light"] .roman-chapter-text,
[data-theme="light"] .excerpt-body p,
[data-theme="light"] .book-rec-card p {
color: var(--color-text-muted) !important;
}
[data-theme="light"] .waitlist-input,
[data-theme="light"] #terminal-input {
background: var(--color-surface-alt) !important;
border-color: var(--color-border) !important;
color: var(--color-text) !important;
}
[data-theme="light"] .terminal-screen {
background: var(--color-surface-alt) !important;
color: var(--color-text) !important;
}
[data-theme="light"] .terminal-cmd { color: var(--color-heading) !important; }
[data-theme="light"] .terminal-input-line { color: var(--color-text) !important; }
[data-theme="light"] .terminal-dim,
[data-theme="light"] .terminal-line--dim { color: var(--color-text-muted) !important; }
[data-theme="light"] .terminal-prompt { color: var(--color-neon-pink) !important; }
[data-theme="light"] .terminal-query-btn {
border-color: var(--color-border);
color: var(--color-text);
background: var(--color-surface);
}
[data-theme="light"] .section-header:after {
background: linear-gradient(to right, var(--color-neon-pink), var(--color-neon-cyan));
}
[data-theme="light"] .lang-switcher {
border-color: var(--color-border);
background: rgba(0, 0, 0, 0.03);
}
[data-theme="light"] .lang-switch { color: var(--color-text-muted); }
[data-theme="light"] .lang-switch--active {
color: var(--color-neon-cyan);
background: rgba(14, 116, 144, 0.1);
}
[data-theme="light"] .lang-fr-only-notice {
background: rgba(14, 116, 144, 0.08);
border-color: rgba(14, 116, 144, 0.22);
color: var(--color-text-muted);
}
[data-theme="light"] .theme-toggle {
border-color: var(--color-border);
background: rgba(0, 0, 0, 0.04);
color: var(--color-text);
}
[data-theme="light"] .theme-toggle:hover {
border-color: rgba(185, 28, 156, 0.35);
background: rgba(185, 28, 156, 0.06);
}
[data-theme="light"] .skip-link {
background: #18181b;
color: #fafafa;
}
[data-theme="light"] .terminal-launcher {
border-color: rgba(185, 28, 156, 0.35);
background: var(--color-surface);
box-shadow: var(--shadow-card);
}
[data-theme="light"] .terminal-launcher-label {
color: var(--color-text-muted);
}
[data-theme="light"] .nav-roman {
color: var(--color-neon-pink) !important;
border-color: rgba(185, 28, 156, 0.35) !important;
}
[data-theme="light"] .roman-cover-badge {
color: var(--color-text-muted);
}
/* Hero CTA — priorité absolue (mode clair) */
html[data-theme="light"] #hero a.hero-cta.hero-cta--primary,
html[data-theme="light"] #hero a.hero-cta.hero-cta--primary:visited {
background: linear-gradient(135deg, #b91c9c 0%, #9d174d 100%) !important;
border: 2px solid #b91c9c !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
box-shadow: 0 4px 20px rgba(185, 28, 156, 0.35) !important;
}
html[data-theme="light"] #hero a.hero-cta.hero-cta--primary span,
html[data-theme="light"] #hero a.hero-cta.hero-cta--primary i {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html[data-theme="light"] #hero a.hero-cta.hero-cta--secondary,
html[data-theme="light"] #hero a.hero-cta.hero-cta--secondary:visited {
background: #ecfeff !important;
border: 2px solid #0e7490 !important;
color: #0e7490 !important;
-webkit-text-fill-color: #0e7490 !important;
box-shadow: 0 2px 14px rgba(14, 116, 144, 0.18) !important;
}
html[data-theme="light"] #hero a.hero-cta.hero-cta--secondary span,
html[data-theme="light"] #hero a.hero-cta.hero-cta--secondary i {
color: #0e7490 !important;
-webkit-text-fill-color: #0e7490 !important;
}
/* --- Thème clair : correctifs P1 (contraste & cohérence) --- */
[data-theme="light"] .text-zinc-100 {
color: var(--color-heading) !important;
}
[data-theme="light"] footer,
[data-theme="light"] footer.bg-black\/30 {
background: var(--color-footer-bg) !important;
}
[data-theme="light"] .terminal-header-title {
color: var(--color-heading) !important;
}
[data-theme="light"] .terminal-form button {
color: var(--color-neon-pink);
border-left-color: var(--color-border);
background: rgba(185, 28, 156, 0.08);
}
[data-theme="light"] .terminal-form button:hover {
background: rgba(185, 28, 156, 0.14);
}
[data-theme="light"] .terminal-panel {
box-shadow: var(--shadow-card);
}
[data-theme="light"] .roman-act-block,
[data-theme="light"] .roman-chapter-item {
background: var(--color-surface-alt) !important;
border-color: var(--color-border) !important;
}
[data-theme="light"] .roman-act-summary {
color: var(--color-heading) !important;
}
[data-theme="light"] .roman-chapter-summary {
color: var(--color-text) !important;
}
[data-theme="light"] .roman-chapter-item[open] {
border-color: rgba(185, 28, 156, 0.28) !important;
}
[data-theme="light"] .roman-meta-tag--pink {
color: var(--color-neon-pink);
border-color: rgba(185, 28, 156, 0.28);
background: rgba(185, 28, 156, 0.06);
}
[data-theme="light"] .book-pipeline {
border-top-color: var(--color-border);
}
[data-theme="light"] .book-pipeline-step.active .book-pipeline-label {
color: var(--color-text);
}
[data-theme="light"] .quiz-progress {
background: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .quiz-question {
color: var(--color-heading) !important;
}
[data-theme="light"] .quiz-option {
background: var(--color-surface-alt);
border-color: var(--color-border);
color: var(--color-text);
}
[data-theme="light"] .quiz-option:hover {
border-color: rgba(185, 28, 156, 0.35);
background: rgba(185, 28, 156, 0.06);
color: var(--color-heading);
}
[data-theme="light"] .quiz-result-title {
color: var(--color-heading) !important;
}
[data-theme="light"] .quiz-result-tagline {
color: var(--color-text-muted);
}
[data-theme="light"] .quiz-btn--ghost {
border-color: var(--color-border);
color: var(--color-text-muted);
}
[data-theme="light"] .quiz-btn--ghost:hover {
border-color: rgba(0, 0, 0, 0.18);
color: var(--color-text);
}
[data-theme="light"] .quiz-badge--dim {
border-color: var(--color-border);
color: var(--color-text-muted);
}
[data-theme="light"] #excerpt-modal .rounded-3xl {
background: var(--color-card-bg) !important;
box-shadow: var(--shadow-card);
}
[data-theme="light"] #excerpt-modal .bg-zinc-900\/90 {
background: var(--color-surface-alt) !important;
}
[data-theme="light"] #excerpt-modal button.bg-zinc-900 {
background: var(--color-surface) !important;
color: var(--color-heading) !important;
border-color: var(--color-border) !important;
}
[data-theme="light"] #excerpt-modal button.hover\:bg-zinc-800:hover,
[data-theme="light"] .hover\:bg-zinc-800:hover {
background-color: var(--color-surface-alt) !important;
}
[data-theme="light"] .neon-glow-pink {
box-shadow: 0 0 20px rgba(185, 28, 156, 0.12);
}
[data-theme="light"] .animate-pulse .bg-white\/10 {
background-color: rgba(0, 0, 0, 0.08) !important;
}
/* Page bio (liens TikTok) */
.bio-page {
margin: 0;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 16px;
background: var(--color-page);
color: var(--color-text);
font-family: "Inter", system-ui, sans-serif;
}
.bio-page__toolbar {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 50;
display: flex;
align-items: center;
gap: 0.5rem;
}
.bio {
width: 100%;
max-width: 420px;
text-align: center;
}
.bio-symbol {
width: 88px;
height: 88px;
border-radius: 1rem;
margin: 0 auto 14px;
border: 1px solid rgba(255, 0, 170, 0.25);
}
.bio h1 {
margin: 0 0 4px;
font-family: "Space Grotesk", "Inter", sans-serif;
font-size: 1.5rem;
letter-spacing: -0.02em;
color: var(--color-heading);
}
.bio .sub {
color: var(--color-text-muted);
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 10px;
}
.bio .pitch {
color: var(--color-text-muted);
font-size: 0.9rem;
line-height: 1.55;
margin: 0 0 22px;
}
.bio-page__emphasis {
color: var(--color-heading);
}
.bio-lang {
display: flex;
justify-content: center;
margin-bottom: 16px;
}
.bio-links {
display: flex;
flex-direction: column;
gap: 10px;
}
.bio-link {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 16px;
border-radius: 14px;
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.03);
color: var(--color-heading);
text-decoration: none;
font-weight: 600;
font-size: 0.92rem;
transition: border-color 0.2s, background 0.2s;
}
.bio-link:hover {
border-color: rgba(0, 240, 255, 0.35);
background: rgba(0, 240, 255, 0.06);
}
.bio-link--pink {
border-color: rgba(255, 0, 170, 0.35);
color: var(--color-neon-pink);
}
.bio-link--pink:hover {
border-color: rgba(255, 0, 170, 0.55);
background: rgba(255, 0, 170, 0.08);
}
.bio-foot {
margin-top: 20px;
font-size: 0.72rem;
color: var(--color-text-faint);
}
.bio-foot a { color: var(--color-neon-cyan); }
[data-theme="light"] .bio-page {
background: var(--color-page);
color: var(--color-text);
}
[data-theme="light"] .bio-link {
background: var(--color-surface-alt);
color: var(--color-heading);
}
[data-theme="light"] .bio-link:hover {
background: rgba(14, 116, 144, 0.08);
border-color: rgba(14, 116, 144, 0.3);
}
[data-theme="light"] .bio-link--pink:hover {
background: rgba(185, 28, 156, 0.08);
border-color: rgba(185, 28, 156, 0.4);
}
[data-theme="light"] .bio-symbol {
border-color: rgba(185, 28, 156, 0.28);
}
/* Page Murderbot */
[data-theme="light"] .murderbot-cta {
background: var(--color-heading) !important;
color: var(--color-page) !important;
}
[data-theme="light"] .murderbot-cta:hover {
background: #27272a !important;
color: #ffffff !important;
}
/* Page 404 */
.error-page {
margin: 0;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
text-align: center;
background: var(--color-page);
color: var(--color-text);
font-family: "Inter", system-ui, sans-serif;
}
.error-page__toolbar {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 50;
}
.error-page__code,
[data-theme="light"] h1.error-page__code {
font-size: 4rem;
margin: 0;
color: var(--color-neon-pink) !important;
font-family: "Space Grotesk", "Inter", sans-serif;
}
.error-page__lead {
color: var(--color-text-muted);
max-width: 28rem;
line-height: 1.6;
margin: 0 auto;
}
.error-page__link {
display: inline-block;
margin-top: 1.5rem;
padding: 0.85rem 1.5rem;
border-radius: 0.75rem;
border: 1px solid rgba(0, 240, 255, 0.45);
color: var(--color-neon-cyan);
text-decoration: none;
font-weight: 600;
transition: background 0.2s;
}
.error-page__link:hover {
background: rgba(0, 240, 255, 0.08);
}
[data-theme="light"] .error-page__link {
border-color: rgba(14, 116, 144, 0.45);
}
[data-theme="light"] .error-page__link:hover {
background: rgba(14, 116, 144, 0.08);
}
.roman-chapter-img-btn picture {
display: block;
width: 100%;
height: 100%;
}
.roman-chapter-img-btn picture img,
.roman-chapter-img-btn img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Bandeau cookies RGPD */
.cookie-banner {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
padding: 1rem 1.25rem;
background: rgba(5, 5, 7, 0.97);
border-top: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .cookie-banner {
background: rgba(250, 250, 252, 0.98);
border-top-color: rgba(0, 0, 0, 0.08);
}
.cookie-banner-inner {
max-width: 72rem;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.25rem;
}
.cookie-banner-text {
margin: 0;
flex: 1 1 280px;
font-size: 0.875rem;
line-height: 1.55;
color: var(--color-text-muted);
}
.cookie-banner-text a {
color: var(--color-neon-cyan);
font-weight: 600;
text-decoration: none;
}
.cookie-banner-text a:hover {
text-decoration: underline;
}
.cookie-banner-hint {
width: 100%;
margin: 0;
font-size: 0.8rem;
color: var(--color-text-muted);
opacity: 0.85;
}
.cookie-banner-actions {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
}
.cookie-btn {
padding: 0.6rem 1.1rem;
border-radius: 9999px;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.2s, border-color 0.2s;
}
.cookie-btn--ghost {
background: transparent;
border-color: rgba(255, 255, 255, 0.2);
color: var(--color-text);
}
.cookie-btn--ghost:hover {
background: rgba(255, 255, 255, 0.06);
}
.cookie-btn--primary {
background: rgba(0, 240, 255, 0.12);
border-color: rgba(0, 240, 255, 0.45);
color: var(--color-neon-cyan);
}
.cookie-btn--primary:hover {
background: rgba(0, 240, 255, 0.2);
}
[data-theme="light"] .cookie-btn--ghost {
border-color: rgba(0, 0, 0, 0.15);
}
body.cookie-banner-open {
padding-bottom: 5.5rem;
}
@media (max-width: 560px) {
.cookie-banner-actions { width: 100%; }
.cookie-banner-actions .cookie-btn { flex: 1; text-align: center; }
body.cookie-banner-open { padding-bottom: 7rem; }
}
/* Page politique cookies */
.legal-page {
margin: 0;
min-height: 100dvh;
background: var(--color-page);
color: var(--color-text);
font-family: "Inter", system-ui, sans-serif;
}
.legal-page__header {
max-width: 42rem;
margin: 0 auto;
padding: 1.5rem 1.5rem 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.legal-page__back {
font-size: 0.875rem;
color: var(--color-neon-cyan);
text-decoration: none;
}
.legal-page__back:hover { text-decoration: underline; }
.legal-content {
max-width: 42rem;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
line-height: 1.65;
font-size: 0.9375rem;
color: var(--color-text-muted);
}
.legal-content h1 {
font-family: "Space Grotesk", "Inter", sans-serif;
font-size: 1.75rem;
color: var(--color-heading);
margin: 0 0 0.5rem;
}
.legal-content h2 {
font-size: 1.125rem;
color: var(--color-heading);
margin: 2rem 0 0.75rem;
}
.legal-content h3 {
font-size: 1rem;
color: var(--color-text);
margin: 1.25rem 0 0.5rem;
}
.legal-content p { margin: 0 0 1rem; }
.legal-content ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal-content a { color: var(--color-neon-cyan); }
.legal-updated {
font-size: 0.8125rem;
opacity: 0.75;
margin-bottom: 1.5rem !important;
}
.legal-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8125rem;
margin: 1rem 0;
}
.legal-table th,
.legal-table td {
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 0.5rem 0.65rem;
text-align: left;
vertical-align: top;
}
[data-theme="light"] .legal-table th,
[data-theme="light"] .legal-table td {
border-color: rgba(0, 0, 0, 0.1);
}
.legal-table th {
background: rgba(255, 255, 255, 0.04);
color: var(--color-text);
}
.legal-nav {
margin-top: 2.5rem !important;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.875rem;
}
@media (prefers-reduced-motion: reduce) {
.glitch,
.hero-murderbot .animate-pulse,
.terminal-quiz--pulse {
animation: none !important;
}
html:focus-within {
scroll-behavior: auto;
}
}