/* ═══════════════════════════════════════════════════════════════ ORI-C — Interface vivante · vivant-theme.css Système de design complet. Chargé en dernier dans le , il prime sur ori-c-common.css et les styles propres aux pages. Principes : bio-luminescence, membranes, respiration, filaments. ═══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Figtree:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); /* ── 1. Palette de l'organisme ─────────────────────────────── */ :root { /* Fond : noir végétal profond, jamais neutre */ --bg-deep: #030a07; --bg-surface: rgba(133, 231, 180, 0.028); --bg-elevated: rgba(133, 231, 180, 0.05); /* Textes : blanc chlorophylle */ --text-primary: #edf7f1; --text-muted: #93b2a2; --text-subtle: #5e7a6d; /* Lueur vivante */ --glow: #4fa99b; --glow-soft: rgba(77, 239, 168, 0.35); --glow-faint: rgba(77, 239, 168, 0.10); --border: rgba(141, 235, 189, 0.10); --border-live: rgba(141, 235, 189, 0.28); /* Accents thématiques ravivés (variables consommées par les pages) */ --accent-flow: #4fa99b; --accent-pulse: #ffc97a; --accent-tension: #ff9e8a; --accent-emergence: #4fa99b; --accent-psyche: #d3a1ff; --accent-climate: #4fa99b; --accent-control: #ff9e8a; --accent-system: #8ae68a; --accent-vivant: #4fa99b; --accent-cadre: #e8d48a; --accent-demo: #8ac4ff; --accent-matiere: #a9b4ff; --accent-book: #c9a1ff; --accent-threshold: #ffc97a; --accent-transitions: #8ae68a; --accent-coherence: #4fa99b; --accent-observation: #4fa99b; --accent-regulation: #e8d48a; --accent-pression: #ff9e8a; --accent-palm: #8ac4ff; --accent-article: #4fa99b; /* Palette du portail (index) */ --cell-core: rgba(160, 255, 205, 0.15); --cell-membrane: rgba(110, 240, 175, 0.08); --pulse-glow: rgba(77, 239, 168, 0.4); --life-accent: #4fa99b; --grain-opacity: 0.035; } /* ── 2. Sol de l'organisme ─────────────────────────────────── */ body { background: radial-gradient(1100px 640px at 12% -8%, rgba(77, 239, 168, 0.055) 0%, transparent 60%), radial-gradient(900px 700px at 88% 12%, rgba(126, 217, 255, 0.035) 0%, transparent 55%), radial-gradient(1200px 900px at 50% 118%, rgba(77, 239, 168, 0.045) 0%, transparent 60%), var(--bg-deep) !important; color: var(--text-primary) !important; } ::selection { background: rgba(77, 239, 168, 0.28); color: #eafff4; } * { scrollbar-width: thin; scrollbar-color: rgba(77, 239, 168, 0.28) transparent; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(79,169,155,0.30), rgba(79,169,155,0.12)); border-radius: 999px; } /* L'ancienne scénographie « cyber » se résorbe dans le champ vivant */ .cyber-grid-floor { display: none !important; } .cyber-bg { background: transparent !important; } .cyber-light-source { background: radial-gradient(ellipse at center, rgba(77, 239, 168, 0.07) 0%, rgba(77, 239, 168, 0.03) 32%, transparent 70%) !important; } .scan-line, .data-stream, .data-line-vertical { opacity: 0.18 !important; } /* ── 3. Typographie vivante ────────────────────────────────── */ h1, h2, h3, .hero h1, .article-title, .book-title { font-family: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif; font-weight: 400; letter-spacing: 0.01em; } .hero h1, h1 { color: var(--text-primary) !important; text-shadow: 0 0 60px rgba(77, 239, 168, 0.14); } h2 { color: var(--text-primary) !important; } /* Souffle lumineux derrière les titres de héros */ .hero { position: relative; } .hero::before { content: ''; position: absolute; top: 14%; left: 50%; width: min(720px, 86vw); height: 300px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(77, 239, 168, 0.10) 0%, transparent 65%); pointer-events: none; animation: v-breathe 7s ease-in-out infinite; z-index: 0; } .hero > * { position: relative; z-index: 1; } @keyframes v-breathe { 0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } } /* Corps de texte : Figtree, comme la page d'accueil */ body, p, li, .nav-links a, .lang-btn { font-family: 'Figtree', 'Cormorant Garamond', Georgia, sans-serif; } body { font-weight: 300; } /* Mesure et respiration */ .article-content p, .book-desc, .section p { color: var(--text-muted); } .article-lead { color: var(--text-muted) !important; } a { transition: color 0.3s ease, text-shadow 0.3s ease; } a:hover { text-shadow: 0 0 18px var(--glow-soft); } /* ── 4. Navigation : le menu unique du site ─────────────────── */ .v-logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: #ECF7F0; font-family: 'JetBrains Mono', monospace; font-weight: 500; letter-spacing: 0.18em; font-size: 0.85rem; text-transform: uppercase; } .v-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 14px var(--glow); animation: v-breathe-dot 4s ease-in-out infinite; flex: none; } @keyframes v-breathe-dot { 0%, 100% { transform: scale(1); opacity: 0.65; } 50% { transform: scale(1.18); opacity: 1; } } .v-nl { color: #8FAF9F; text-decoration: none; font-family: 'Figtree', sans-serif; transition: color 0.3s; white-space: nowrap; } .v-nl:hover, .v-nl.v-on { color: var(--glow); } .v-lab { color: var(--glow); opacity: 0.85; } .v-lab:hover { opacity: 1; } .v-lang { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.1em; border: 1px solid rgba(141, 235, 189, 0.25); border-radius: 999px; padding: 3px 11px; } .v-lang:hover { color: #05130c; background: var(--glow); border-color: var(--glow); } @media (max-width: 768px) { .v-logo { letter-spacing: 0.12em; } nav[aria-label] { padding: 0.8rem 1rem !important; } } /* ── 5. Cartes : membranes cellulaires ─────────────────────── */ .article-card, .book-card, .tool-card, .vis-card, .concept-card, .pillar, .card, .grid-item, .research-card { background: linear-gradient(160deg, rgba(133, 231, 180, 0.045) 0%, rgba(133, 231, 180, 0.012) 60%), var(--bg-surface) !important; border: 1px solid var(--border) !important; border-radius: 18px !important; box-shadow: inset 0 1px 0 rgba(237, 247, 241, 0.04); transition: border-color 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease !important; } .article-card:hover, .book-card:hover, .tool-card:hover, .vis-card:hover, .concept-card:hover, .pillar:hover, .card:hover, .grid-item:hover, .research-card:hover { border-color: var(--border-live) !important; transform: translateY(-5px) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 36px rgba(77, 239, 168, 0.08), inset 0 1px 0 rgba(237, 247, 241, 0.06) !important; } .article-card::before { border-radius: 18px 0 0 18px; } /* ── 6. Étiquettes : spores ────────────────────────────────── */ .article-tag, .tag, .badge { border-radius: 999px !important; font-family: 'JetBrains Mono', monospace; display: inline-flex; align-items: center; gap: 0.45em; } .article-tag::before, .tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: none; } /* ── 7. Liens d'action et boutons ──────────────────────────── */ .article-link, .book-link, .cta, .btn, button.primary { color: var(--glow) !important; font-family: 'JetBrains Mono', monospace; transition: text-shadow 0.3s ease, letter-spacing 0.3s ease; } .article-link:hover, .book-link:hover { text-shadow: 0 0 22px var(--glow-soft); letter-spacing: 0.02em; } /* ── 8. Blocs de sens : membranes latérales ────────────────── */ .key-point, .implication, blockquote, .note, .encart { background: var(--bg-surface) !important; border-left: 2px solid var(--glow) !important; border-radius: 0 14px 14px 0 !important; box-shadow: inset 0 0 44px rgba(77, 239, 168, 0.028); } .key-point-label { color: var(--glow) !important; } /* ── 9. Séparateurs : battements ───────────────────────────── */ hr { border: none !important; height: 1px !important; margin: 3rem auto !important; background: linear-gradient(90deg, transparent, var(--glow-soft), transparent) !important; position: relative; overflow: visible !important; } hr::after { content: ''; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--glow); box-shadow: 0 0 14px var(--glow-soft); } /* ── 10. Tableaux, code, formules ──────────────────────────── */ table { border-color: var(--border) !important; } th { color: var(--glow) !important; font-family: 'JetBrains Mono', monospace; font-weight: 400; } td, th { border-color: var(--border) !important; } tr:hover td { background: var(--glow-faint); } code, pre, .mono { font-family: 'JetBrains Mono', monospace !important; background: rgba(77, 239, 168, 0.05); border-radius: 6px; } pre { border: 1px solid var(--border); padding: 1rem 1.25rem; } /* ── 11. Pied de page : racines ────────────────────────────── */ footer { background: transparent !important; border-top: 1px solid var(--border) !important; position: relative; } footer::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: min(420px, 60vw); height: 1px; background: linear-gradient(90deg, transparent, var(--glow), transparent); animation: v-filament 5s ease-in-out infinite; } @keyframes v-filament { 0%, 100% { opacity: 0.35; width: min(420px, 60vw); } 50% { opacity: 0.9; width: min(560px, 72vw); } } /* ── 12. Filament de lecture (injecté par vivant-field.js) ── */ .v-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--glow), #4fa99b); box-shadow: 0 0 12px var(--glow-soft); z-index: 2000; transition: width 0.12s linear; } /* ── 13. Retour en surface (spore fixe) ────────────────────── */ .v-top { position: fixed; right: 1.6rem; bottom: 1.6rem; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(3, 10, 7, 0.8); border: 1px solid var(--border-live); color: var(--glow); font-size: 1.1rem; line-height: 1; cursor: pointer; z-index: 1500; opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.3s ease; backdrop-filter: blur(10px); } .v-top.v-on { opacity: 1; transform: translateY(0); } .v-top:hover { box-shadow: 0 0 24px var(--glow-faint); } /* ── 14. Révélation au défilement ──────────────────────────── */ .v-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--v-delay, 0s); } .v-reveal.v-in { opacity: 1; transform: translateY(0); } /* ── 15. Sobriété si le mouvement est réduit ───────────────── */ @media (prefers-reduced-motion: reduce) { .hero::before, .nav-logo::before, footer::before, hr::after { animation: none !important; } .v-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .article-card, .book-card, .tool-card { transition: none !important; } } /* ── 16. Mobile ────────────────────────────────────────────── */ @media (max-width: 768px) { .hero::before { height: 200px; } .v-top { right: 1rem; bottom: 1rem; width: 40px; height: 40px; } }