/* ============================================ Theme personnalise : Hacker / Cybersecurite ============================================ */ :root { --color-bg: #0a0a0a; --color-bg-alt: #111111; --color-green: #00ff41; --color-red: #ff3333; --color-cyan: #00e5ff; --color-yellow: #ffd600; --color-text: #e0e0e0; --color-muted: #888888; --color-border: #2a2a2a; --font-mono: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; --font-sans: 'Inter', 'Segoe UI', Arial, sans-serif; } /* ---- Arriere-plan global ---- */ .reveal { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); } .reveal .slides { text-align: left; } /* ---- Titres ---- */ .reveal h1, .reveal h2, .reveal h3 { color: var(--color-green); font-family: var(--font-mono); text-transform: none; letter-spacing: -0.02em; } .reveal h1 { font-size: 2.2em; border-bottom: 3px solid var(--color-green); padding-bottom: 0.3em; margin-bottom: 0.6em; } .reveal h2 { font-size: 1.6em; margin-bottom: 0.5em; } .reveal h3 { font-size: 1.2em; color: var(--color-cyan); } /* ---- Texte ---- */ .reveal p, .reveal li { font-size: 0.85em; line-height: 1.7; color: var(--color-text); } .reveal ul, .reveal ol { margin-left: 1em; } .reveal li { margin-bottom: 0.4em; } .reveal strong { color: var(--color-green); } .reveal em { color: var(--color-cyan); font-style: italic; } /* ---- Liens ---- */ .reveal a { color: var(--color-cyan); text-decoration: underline; text-underline-offset: 3px; } .reveal a:hover { color: var(--color-green); } /* ---- Code inline ---- */ .reveal code { font-family: var(--font-mono); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 4px; padding: 0.15em 0.4em; font-size: 0.85em; color: var(--color-green); } /* ---- Blocs de code ---- */ .reveal pre { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 6px; padding: 1em; width: 100%; box-sizing: border-box; } .reveal pre code { background: transparent; border: none; padding: 0; font-size: 0.75em; line-height: 1.6; } /* ---- Slide de titre ---- */ .reveal .title-slide { text-align: center; } .reveal .title-slide h1 { border-bottom: none; font-size: 2.6em; margin-bottom: 0.3em; } .reveal .title-slide .subtitle { color: var(--color-cyan); font-size: 1.1em; font-family: var(--font-mono); margin-bottom: 1.5em; } .reveal .title-slide .authors { color: var(--color-muted); font-size: 0.9em; margin-top: 1em; } .reveal .title-slide .date { color: var(--color-muted); font-size: 0.75em; margin-top: 0.5em; font-family: var(--font-mono); } /* ---- Classe utilitaire : alerte rouge ---- */ .reveal .alert { color: var(--color-red); font-weight: bold; } /* ---- Classe utilitaire : chiffre mis en avant ---- */ .reveal .big-number { font-size: 3em; font-family: var(--font-mono); color: var(--color-red); font-weight: bold; text-align: center; margin: 0.5em 0; } /* ---- Classe utilitaire : citation / source ---- */ .reveal .source { font-size: 0.6em; color: var(--color-muted); font-style: italic; margin-top: 1em; } /* ---- Timeline ---- */ .reveal .timeline { list-style: none; margin: 0; padding: 0; position: relative; } .reveal .timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--color-green); } .reveal .timeline li { padding-left: 30px; position: relative; margin-bottom: 0.6em; font-size: 0.8em; } .reveal .timeline li::before { content: ''; position: absolute; left: 3px; top: 0.45em; width: 12px; height: 12px; border-radius: 50%; background: var(--color-bg); border: 2px solid var(--color-green); } .reveal .timeline .year { color: var(--color-cyan); font-family: var(--font-mono); font-weight: bold; margin-right: 0.5em; } /* ---- Schema / Diagramme en blocs ---- */ .reveal .diagram { display: flex; align-items: center; justify-content: center; gap: 0.5em; margin: 1.5em 0; flex-wrap: wrap; } .reveal .diagram .box { background: var(--color-bg-alt); border: 2px solid var(--color-green); border-radius: 6px; padding: 0.6em 1em; font-family: var(--font-mono); font-size: 0.7em; color: var(--color-green); text-align: center; min-width: 100px; } .reveal .diagram .box.red { border-color: var(--color-red); color: var(--color-red); } .reveal .diagram .box.cyan { border-color: var(--color-cyan); color: var(--color-cyan); } .reveal .diagram .arrow { color: var(--color-muted); font-size: 1.5em; font-family: var(--font-mono); } /* ---- Grille 2 colonnes ---- */ .reveal .two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; align-items: start; } /* ---- Slide sommaire ---- */ .reveal .toc ol { list-style: decimal; font-family: var(--font-mono); font-size: 0.85em; } .reveal .toc ol li { margin-bottom: 0.5em; color: var(--color-text); } /* ---- Barre de progression ---- */ .reveal .progress { color: var(--color-green); } /* ---- Numeros de slide ---- */ .reveal .slide-number { font-family: var(--font-mono); font-size: 0.6em; color: var(--color-muted); } /* ---- Fragment animation ---- */ .reveal .fragment.highlight-green.visible { color: var(--color-green); } .reveal .fragment.highlight-red.visible { color: var(--color-red); } /* ---- Table ---- */ .reveal table { border-collapse: collapse; width: 100%; font-size: 0.75em; } .reveal table th { background: var(--color-bg-alt); color: var(--color-green); font-family: var(--font-mono); padding: 0.5em 0.8em; border-bottom: 2px solid var(--color-green); text-align: left; } .reveal table td { padding: 0.4em 0.8em; border-bottom: 1px solid var(--color-border); color: var(--color-text); } .reveal table tr:hover td { background: var(--color-bg-alt); } /* ---- Slide finale ---- */ .reveal .end-slide { text-align: center; } .reveal .end-slide h1 { border-bottom: none; font-size: 3em; }