/* * theme.css — Système de thème unifié michaelpardo.fr * Inclut : mode sombre (défaut) + mode clair (data-theme="light") * Polices : Syne + Space Mono (via Google Fonts, à importer dans le de chaque page) * ───────────────────────────────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════ TOKENS — MODE SOMBRE (défaut) ══════════════════════════════════════════════ */ :root { --bg: #080c10; --surface: #0f1520; --card: #131d2b; --border: #1e3050; --accent: #00d4ff; --accent2: #ff6b35; --accent3: #7c3aed; --text: #e8f4f8; --muted: #BFC7D9; --glow: 0 0 20px rgba(0,212,255,0.3); /* Overlay gradients */ --grid-line: rgba(0,212,255,0.03); --glow-tl: rgba(0,212,255,0.05); --glow-br: rgba(124,58,237,0.08); /* Divers */ --modal-bg: rgba(0,0,0,0.8); --disclaimer-bg: rgba(255,107,53,0.08); --disclaimer-border: rgba(255,107,53,0.25); --disclaimer-text: rgba(255,107,53,0.85); } /* ══════════════════════════════════════════════ TOKENS — MODE CLAIR ══════════════════════════════════════════════ */ [data-theme="light"] { --bg: #f0f4f8; --surface: #ffffff; --card: #ffffff; --border: #d0dce8; --accent: #0078a8; --accent2: #d4500a; --accent3: #5b21b6; --text: #0f1b2d; --muted: #5a6e84; --glow: 0 0 20px rgba(0,120,168,0.2); --grid-line: rgba(0,120,168,0.06); --glow-tl: rgba(0,120,168,0.08); --glow-br: rgba(91,33,182,0.07); --modal-bg: rgba(15,27,45,0.5); --disclaimer-bg: rgba(212,80,10,0.07); --disclaimer-border: rgba(212,80,10,0.2); --disclaimer-text: #9b3800; } /* ══════════════════════════════════════════════ RESET & BASE ══════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: 'Space Mono', monospace; min-height: 100vh; overflow-x: hidden; transition: background 0.3s, color 0.3s; } /* ── Fond ambiant (radial glows) ── */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 800px 600px at 20% 20%, var(--glow-tl) 0%, transparent 60%), radial-gradient(ellipse 600px 400px at 80% 80%, var(--glow-br) 0%, transparent 60%); pointer-events: none; z-index: 0; transition: background 0.3s; } /* ── Grille CSS ── */ body::after { content: ''; position: fixed; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; } /* ══════════════════════════════════════════════ HEADER ══════════════════════════════════════════════ */ header { position: relative; z-index: 10; padding: 2rem 1.5rem 1rem; text-align: center; border-bottom: 1px solid var(--border); animation: fadeUp 0.5s ease both; } .logo-wrap { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .avatar { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--accent); box-shadow: var(--glow); object-fit: cover; transition: box-shadow 0.3s; } h1 { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(1.8rem, 5vw, 3rem); letter-spacing: -0.02em; background: linear-gradient(135deg, var(--accent) 0%, var(--text) 50%, var(--accent3) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .tagline { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; margin-top: 0.25rem; } .tagline a { color: var(--accent); text-decoration: none; cursor: pointer; } /* ══════════════════════════════════════════════ BOUTON TOGGLE THÈME ══════════════════════════════════════════════ */ .theme-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 200; background: var(--card); border: 1px solid var(--border); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; box-shadow: 0 2px 10px rgba(0,0,0,0.2); transition: border-color 0.2s, box-shadow 0.2s, background 0.3s; line-height: 1; } .theme-toggle:hover { border-color: var(--accent); box-shadow: var(--glow); } /* ══════════════════════════════════════════════ GRILLE PRINCIPALE ══════════════════════════════════════════════ */ /* Grille de cards (index.html) — utiliser la classe .main-grid sur le
*/ .main-grid { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } /*
générique pour les pages à contenu linéaire */ main { position: relative; z-index: 1; } /* ══════════════════════════════════════════════ CARDS ══════════════════════════════════════════════ */ .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; cursor: pointer; position: relative; overflow: hidden; transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s, background 0.3s; text-decoration: none; color: inherit; display: block; /* Animation d'entrée */ opacity: 0; transform: translateY(16px); animation: fadeUp 0.4s ease forwards; } .card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 60%, rgba(0,212,255,0.04) 100%); opacity: 0; transition: opacity 0.3s; } [data-theme="light"] .card::before { background: linear-gradient(135deg, transparent 60%, rgba(0,120,168,0.04) 100%); } .card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--glow), 0 8px 30px rgba(0,0,0,0.1); } .card:hover::before { opacity: 1; } .card-icon { font-size: 2rem; margin-bottom: 0.75rem; display: block; } .card-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1rem; margin-bottom: 0.4rem; color: var(--text); } .card-desc { font-size: 0.72rem; color: var(--muted); line-height: 1.6; } .card-tag { display: inline-block; margin-top: 0.75rem; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 4px; background: rgba(0,212,255,0.1); color: var(--accent); border: 1px solid rgba(0,212,255,0.2); } [data-theme="light"] .card-tag { background: rgba(0,120,168,0.08); border-color: rgba(0,120,168,0.2); } /* Variantes accent2 / accent3 */ .card.accent2:hover { border-color: var(--accent2); box-shadow: 0 0 20px rgba(255,107,53,0.25), 0 8px 30px rgba(0,0,0,0.1); } .card.accent2 .card-tag { background: rgba(255,107,53,0.1); color: var(--accent2); border-color: rgba(255,107,53,0.2); } .card.accent3:hover { border-color: var(--accent3); box-shadow: 0 0 20px rgba(124,58,237,0.25), 0 8px 30px rgba(0,0,0,0.1); } .card.accent3 .card-tag { background: rgba(124,58,237,0.1); color: #a78bfa; border-color: rgba(124,58,237,0.2); } [data-theme="light"] .card.accent3 .card-tag { color: var(--accent3); } /* Card large (pleine largeur) */ .card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.25rem; } .card-wide .card-icon { margin: 0; font-size: 2.5rem; } /* ── Animation featured (secousse) ── */ @keyframes featured-loop { 0% { opacity: 1; transform: scale(1) translateX(0); } 2% { opacity: 1; transform: scale(1) translateX(-1px) rotate(-0.3deg); } 4% { opacity: 1; transform: scale(1) translateX(1px) rotate(0.3deg); } 6% { opacity: 1; transform: scale(1) translateX(-1px) rotate(-0.3deg); } 8% { opacity: 1; transform: scale(1) translateX(1px) rotate(0.3deg); } 10% { opacity: 1; transform: scale(1) translateX(0); } 25% { opacity: 1; transform: scale(1) translateX(0); } 28% { opacity: 1; transform: scale(1.04) translateX(-4px); } 31% { opacity: 1; transform: scale(1.06) translateX(4px); } 34% { opacity: 1; transform: scale(1.07) translateX(-3px); } 37% { opacity: 1; transform: scale(1.07) translateX(3px); } 40% { opacity: 1; transform: scale(1.07) translateX(-2px); } 43% { opacity: 1; transform: scale(1.07) translateX(2px); } 46% { opacity: 1; transform: scale(1.06) translateX(-1px); } 50% { opacity: 1; transform: scale(1.03) translateX(0); } 55% { opacity: 1; transform: scale(1) translateX(0); } 100% { opacity: 1; transform: scale(1) translateX(0); } } .card-featured { opacity: 1 !important; border-color: var(--accent2) !important; box-shadow: 0 0 20px rgba(255,107,53,0.3), 0 8px 30px rgba(0,0,0,0.4) !important; } .card-featured.ready { opacity: 1 !important; animation: featured-loop 3s ease-in-out infinite both !important; } .card-featured.ready:hover { animation: none !important; transform: translateY(-3px); } /* Délais animation d'entrée des cards */ .card:nth-child(1) { animation-delay: 0.05s; } .card:nth-child(2) { animation-delay: 0.10s; } .card:nth-child(3) { animation-delay: 0.15s; } .card:nth-child(4) { animation-delay: 0.20s; } .card:nth-child(5) { animation-delay: 0.25s; } .card:nth-child(6) { animation-delay: 0.30s; } .card:nth-child(7) { animation-delay: 0.35s; } /* ══════════════════════════════════════════════ MODAL ══════════════════════════════════════════════ */ .modal-overlay { display: none; position: fixed; inset: 0; background: var(--modal-bg); backdrop-filter: blur(8px); z-index: 100; align-items: center; justify-content: center; padding: 1.5rem; } .modal-overlay.open { display: flex; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; max-width: 480px; width: 100%; position: relative; box-shadow: 0 0 60px rgba(0,0,0,0.3); animation: modalIn 0.25s ease; transition: background 0.3s; } @keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.25rem; line-height: 1; transition: color 0.2s; } .modal-close:hover { color: var(--text); } .modal-icon { font-size: 2.5rem; margin-bottom: 1rem; } .modal h2 { font-family: 'Syne', sans-serif; font-size: 1.3rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--accent); } .modal p { color: var(--muted); font-size: 0.78rem; line-height: 1.7; margin-bottom: 1rem; } .modal-actions { display: flex; flex-direction: column; gap: 0.5rem; } /* ══════════════════════════════════════════════ BOUTONS ══════════════════════════════════════════════ */ .btn { display: block; text-align: center; text-decoration: none; padding: 0.8rem 1.5rem; border-radius: 8px; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; transition: all 0.2s; cursor: pointer; border: none; } .btn-primary { background: var(--accent); color: #000; } .btn-primary:hover { filter: brightness(0.88); box-shadow: var(--glow); } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } /* ══════════════════════════════════════════════ BANDE SOCIALE ══════════════════════════════════════════════ */ .social-strip { position: relative; z-index: 1; display: flex; justify-content: center; gap: 1rem; padding: 1.5rem 1.5rem 3rem; flex-wrap: wrap; } .social-link { display: flex; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.5rem 0.9rem; border: 1px solid var(--border); border-radius: 6px; transition: all 0.2s; } .social-link:hover { color: var(--text); border-color: var(--accent); box-shadow: var(--glow); } /* ══════════════════════════════════════════════ DISCLAIMER BAR ══════════════════════════════════════════════ */ .disclaimer-bar { position: relative; z-index: 5; background: var(--disclaimer-bg); border-top: 1px solid var(--disclaimer-border); border-bottom: 1px solid var(--disclaimer-border); padding: 0.6rem 1.5rem; text-align: center; font-size: 0.68rem; color: var(--disclaimer-text); letter-spacing: 0.05em; } .disclaimer-bar a { color: var(--accent2); text-decoration: underline; cursor: pointer; } .disclaimer-icon { width: 80px; height: auto; } /* ══════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════ */ footer { position: relative; z-index: 1; text-align: center; padding: 1.5rem; border-top: 1px solid var(--border); font-size: 0.68rem; color: var(--muted); letter-spacing: 0.05em; } footer a { color: var(--accent); text-decoration: none; } /* ══════════════════════════════════════════════ ANIMATIONS D'ENTRÉE ══════════════════════════════════════════════ */ @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════════════════ RESPONSIVE — s'applique à toutes les pages ══════════════════════════════════════════════ */ @media (max-width: 600px) { /* ── Grille index : 1 colonne ── */ .main-grid { grid-template-columns: 1fr; padding: 1.5rem 1rem 3rem; gap: 0.75rem; } /* ── Card wide ── */ .card-wide { grid-template-columns: 1fr; grid-column: 1; } .card-wide .card-icon { font-size: 2rem; margin-bottom: 0.5rem; } /* ── Header ── */ header { padding: 1.25rem 1rem 0.75rem; } .logo-wrap { gap: 0.5rem; } .avatar { width: 44px; height: 44px; } h1 { font-size: clamp(1.4rem, 6vw, 2rem); letter-spacing: -0.01em; } .tagline { font-size: 0.63rem; letter-spacing: 0.06em; white-space: normal; word-break: break-word; overflow-wrap: break-word; } /* ── Toggle ── */ .theme-toggle { top: 0.6rem; right: 0.6rem; width: 34px; height: 34px; font-size: 0.95rem; } /* ── Cards ── */ .card { padding: 1rem; } .card-icon { font-size: 1.5rem; margin-bottom: 0.5rem; } .card-title { font-size: 0.9rem; word-break: break-word; overflow-wrap: break-word; } .card-desc { font-size: 0.69rem; word-break: break-word; overflow-wrap: break-word; } .card-tag { font-size: 0.58rem; letter-spacing: 0.05em; } /* ── Disclaimer ── */ .disclaimer-bar { font-size: 0.61rem; letter-spacing: 0.02em; padding: 0.5rem 0.75rem; word-break: break-word; overflow-wrap: break-word; } /* ── Social strip ── */ .social-strip { gap: 0.45rem; padding: 1rem 0.75rem 2rem; } .social-link { font-size: 0.63rem; letter-spacing: 0.03em; padding: 0.38rem 0.6rem; } /* ── Modal ── */ .modal { padding: 1.5rem 1.1rem; border-radius: 12px; } .modal h2 { font-size: 1.1rem; word-break: break-word; } .modal p { font-size: 0.73rem; word-break: break-word; } /* ── Boutons ── */ .btn { font-size: 0.76rem; padding: 0.65rem 0.9rem; } /* ── Footer ── */ footer { font-size: 0.61rem; letter-spacing: 0.02em; padding: 1rem 0.75rem; word-break: break-word; overflow-wrap: break-word; } }