/* -- ------------------------------------------------------------------------------ */ /* -- @file slides.css */ /* -- @brief slides css file */ /* -- @author Christian RAYA */ /* -- @repository https://codeberg.org/rayachristian/mars-doc.git */ /* -- @copyright Copyright (c) 2026 Christian RAYA */ /* -- @license MIT (see LICENSE file) */ /* -- ------------------------------------------------------------------------------ */ /* IBM Plex Mono - Regular (400) */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: /* 1. Vérifie si l'utilisateur l'a déjà installée sur son OS */ local('IBM Plex Mono'), local('IBMPlexMono'), /* 2. Chemin relatif vers votre dossier build/fonts/ (Solution Offline) */ url('../runtime/fonts/ibm-plex-mono-v20-latin-regular.woff2') format('woff2'), /* 3. URL CDN (Solution Online si le fichier local est manquant) */ url('https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.0.0/files/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); } /* IBM Plex Mono - SemiBold (600) */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'), /* Chemin relatif vers votre dossier build/fonts/ */ url('../runtime/fonts/ibm-plex-mono-v20-latin-600.woff2') format('woff2'), /* URL CDN de secours */ url('https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.0.0/files/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); } /* ============================================================ VARIABLES GLOBALES Modifier ici pour changer tout le document. Toutes les valeurs métier sont centralisées — ne pas coder de valeurs en dur dans les règles ci-dessous. ============================================================ */ :root { /* --- Font stacks --- Ordre prioritaire : Inter (Google Fonts, chargé en haut) → Segoe UI (Windows natif) → Helvetica / Arial (fallback) NOTE: Inter doit être en PREMIER pour être utilisé sur Linux/Mac. */ --font-main: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace; /* --- Tailles de texte --- Basées sur rem (relatif à la font-size de Reveal.js = 42px par défaut). Réduire --font-size-body si le contenu déborde sur les slides chargées. */ --font-size-body: 1.5rem; /* texte courant : p, li */ --font-size-col: 1.35rem; /* texte dans .col-full / .box */ --font-size-table: 1.1rem; /* texte dans les tableaux */ --font-size-code: 1.0rem; /* blocs de code */ --font-size-h2: 2.0rem; /* titre de section (##) */ --font-size-h3: 1.7rem; /* titre de slide (###) — plus petit que h2 */ --font-size-h4: 1.35rem; /* sous-titre dans colonnes (####) */ /* --- Couleurs texte --- */ --color-body: #edf2f4; /* texte courant sur fond sombre */ --color-col-black: #ffffff; /* texte dans .box (fond noir) */ --color-col-white: #1a1a2e; /* texte colonne gauche (fond clair) */ --color-col-orange: #edf2f4; /* texte colonne droite (fond bleu) */ --color-col-yellow: #edf2f4; /* texte colonne droite (fond bleu) */ --color-col-blue: #edf2f4; /* texte colonne droite (fond bleu) */ --color-col-green: #edf2f4; /* texte colonne droite (fond vert) */ --color-col-red: #edf2f4; /* texte colonne droite (fond rouge) */ --color-box: #000000; /* texte dans .box (fond blanc) */ --color-dark-box: #ffffff; /* texte dans .box (fond noir) */ --color-accent: #e8c547; /* couleur d'accentuation */ --color-muted: #a0aec0; /* texte secondaire / captions */ /* --- Arrière-plans des classes de mise en page --- */ --bg-col-black: #000000d0; --bg-col-white: #ffffffd0; --bg-col-blue: #3169B9d0; --bg-col-orange: #ed8127d0; --bg-col-yellow: #ecc309d0; --bg-col-green: #4a9b35d0; --bg-col-red: #df0c26d0; --bg-box: #ffffffd0; --bg-dark-box: #000000d0; /* --- Espacements --- */ --line-height-body: 1.45; /* réduit vs 1.55 pour gagner de la hauteur */ --line-height-code: 1.49; --padding-section: 5%; --border-radius-custom: 8px; } /* ============================================================ TYPOGRAPHIE — TEXTE COURANT (p, li) ============================================================ */ .reveal p, .reveal li, .reveal ul, .reveal ol { font-family: var(--font-main); font-size: var(--font-size-body); font-weight: 400; color: var(--color-body); line-height: var(--line-height-body); } .reveal ul, .reveal ol { margin-left: 3em; } .reveal li { margin-bottom: 0.3em; /* réduit de 0.4 → 0.3 pour économiser de la hauteur */ } /* strong / em dans le corps de texte */ .reveal strong { font-weight: 600; } .reveal em { font-style: italic; opacity: 0.92; } /* ============================================================ MERMAID — TAILLE ET TYPOGRAPHIE ------------------------------------------------------------- Deux problèmes à résoudre simultanément : 1. FONT TROP GRANDE : .reveal p { font-size: 1.5rem } s'applique aux

dans les des nœuds Mermaid, écrasant le font-size:16px défini par Mermaid sur le . → Solution : `all: revert` sur les éléments internes. 2. SVG TROP GRAND : Mermaid génère un SVG avec width="100%" mais une hauteur naturelle (viewBox) qui peut dépasser la slide. → Solution : contraindre .mermaid en flex-colonne avec max-height, et forcer le SVG à s'inscrire dedans via height:100%. Sélecteurs clés (issus de l'inspection Firefox) : .mermaid → div wrapper généré par Mermaid/Reveal .mermaid svg → SVG racine (porte le viewBox et font-size:16px) .nodeLabel p/span → texte dans les nœuds (rect, losange…) .edgeLabel p/span → étiquettes sur les arêtes ("Yes", "No"…) .cluster-label span p → texte des sous-graphes (subgraph) ============================================================ */ /* --- 1. Conteneur .mermaid : limité à la hauteur disponible --- La slide a center:false, le titre H3 prend ~2.5rem, on laisse le reste à Mermaid. max-height en vh est une bonne heuristique. display:flex + align-items:center centre le diagramme verticalement si il est plus petit que l'espace disponible. */ .reveal .mermaid { display: flex !important; justify-content: center !important; align-items: flex-start !important; width: 100% !important; /* On utilise max-height avec vh pour garantir que ça ne dépasse JAMAIS l'écran */ max-height: 48vh !important; height: 48vh !important; overflow: hidden !important; margin-top: 10px; } /* --- 2. SVG : s'adapte au conteneur sans déborder --- width:100% + height:100% + max-height hérité du parent permettent au SVG de se redimensionner via son viewBox. Ne pas forcer font-size ici — Mermaid le gère en style inline. */ .reveal .mermaid svg { /* On force le SVG à être contenu dans les 65vh du parent */ max-height: 100% !important; width: auto !important; /* Laisse la largeur s'ajuster proportionnellement */ height: auto !important; /* Laisse la hauteur s'ajuster */ /* On écrase les styles inline injectés par Mermaid */ max-width: 100% !important; display: block; margin: 0 auto; } /* --- 3. Labels : neutralisation de l'héritage Reveal.js --- `all: revert` coupe la cascade (font-size, color, margin…) et ramène aux valeurs user-agent, sans effacer les styles inline que Mermaid injecte via JS après rendu. */ .reveal .mermaid .nodeLabel p, .reveal .mermaid .nodeLabel span, .reveal .mermaid .edgeLabel p, .reveal .mermaid .edgeLabel span, .reveal .mermaid .label p, .reveal .mermaid .label span { all: revert !important; font-family: var(--font-main) !important; font-size: inherit !important; color: inherit !important; margin: 0 !important; } /* --- 4. div wrapper dans foreignObject --- Mermaid utilise display:table-cell pour centrer le texte dans les nœuds. On neutralise la font-size héritée. */ .reveal .mermaid foreignObject div { font-size: inherit !important; line-height: 1.5 !important; color: inherit !important; } .reveal .mermaid .grid { fill: none; } /* ============================================================ TYPOGRAPHIE — TITRES H1 / H2 / H3 / H4 H2 = titre de colonne (##) → plus grand, marque la section H3 = titre de slide (###) → plus petit que H2, c'est le titre courant ============================================================ */ .reveal h1 { font-family: var(--font-main); color: #ffffff; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .reveal h2 { font-family: var(--font-main); font-size: var(--font-size-h2) !important; font-weight: 700; color: #ffffff; text-align: left !important; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.1em; } .reveal h2.hidden-title { display: none; } .reveal h3 { font-family: var(--font-main); font-size: var(--font-size-h3) !important; font-weight: 600; color: var(--color-accent); /* accentuation pour différencier de H2 */ text-align: left !important; text-transform: uppercase; margin-bottom: 0.2em; margin-top: 0; } /* ============================================================ H3 SURROGATE (Correction bug Print-PDF / merge-headers) ============================================================ */ .reveal .slides .h3-surrogate, .reveal .slides div.h3-surrogate p { font-family: var(--font-main); font-size: var(--font-size-h3) !important; font-weight: 600; color: var(--color-accent); /* accentuation pour différencier de H2 */ text-align: left !important; text-transform: uppercase; margin-bottom: 0.2em; margin-top: 0; } .reveal h3.hidden-title { display: none; } .reveal h4 { font-family: var(--font-main); font-size: var(--font-size-h4) !important; font-weight: 600; color: #ffffff; text-align: left !important; } /* ============================================================ SLIDE DE TITRE (#title-slide) ============================================================ */ .reveal .slides section#title-slide { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; text-align: left !important; padding-left: 8% !important; height: 100% !important; width: 100% !important; } .reveal #title-slide h1.title { font-size: 3.2rem !important; line-height: 1.2; margin-bottom: 0.4em; text-align: left !important; } .reveal #title-slide p.subtitle { font-size: 1.8rem !important; color: var(--color-accent); font-weight: 400; font-style: italic; margin: 0.2em 0 0.6em 0; } .reveal #title-slide p.author, .reveal #title-slide p.date { font-size: 1.6rem !important; margin: 0.2em 0; opacity: 0.85; } /* ============================================================ TABLEAUX Les tableaux héritent mal des styles p/li — règles dédiées nécessaires pour contrôler la densité sur les slides chargées. ============================================================ */ .reveal table { font-family: var(--font-main); font-size: var(--font-size-table); border-collapse: collapse; width: 100%; margin: 0.4em 0; color: var(--color-body); } .reveal table th { font-weight: 600; background: rgba(232, 197, 71, 0.15); /* accent teinté subtil */ color: var(--color-accent); padding: 0.4em 0.7em; border-bottom: 2px solid var(--color-accent); text-align: left; } .reveal table td { padding: 0.35em 0.7em; border-bottom: 1px solid rgba(255,255,255,0.12); vertical-align: top; } .reveal table tr:last-child td { border-bottom: none; } /* Zebra striping léger pour les tableaux denses */ .reveal table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.04); } /* Cellules contenant du code inline dans les tableaux */ .reveal table td code, .reveal table th code { font-size: 0.9em; background: rgba(255,255,255,0.1); padding: 0.1em 0.3em; border-radius: 3px; } /* ============================================================ CITATIONS (blockquote) ============================================================ */ .reveal blockquote { font-family: var(--font-main); font-size: 1.3rem; font-style: italic; color: var(--color-muted); border-left: 4px solid var(--color-accent); padding: 0.5em 1.2em; margin: 0.8em 0; background: rgba(255,255,255,0.04); border-radius: 0 6px 6px 0; width: auto; /* écrase le width: 70% du thème black */ } .reveal blockquote p { font-size: inherit; color: inherit; font-style: inherit; line-height: 1.5; } /* ============================================================ MISE EN PAGE COLONNES — CLASSES NATIVES PANDOC Utilisées via la syntaxe ::: {.cols} / ::: {.col width="X%"} ============================================================ */ .reveal .cols { display: flex; gap: 2%; align-items: flex-start; width: 100%; } .reveal .col { display: flex; flex-direction: column; } /* Texte dans les colonnes natives Pandoc */ .reveal .col p, .reveal .col li, .reveal .col ul, .reveal .col ol { font-size: var(--font-size-col); line-height: 1.4; } .reveal .col h4 { font-size: var(--font-size-h4) !important; margin-bottom: 0.3em; } /* ============================================================ FIX BACKGROUND INHERITANCE (Niveau 3) ============================================================ */ /* Force les sections de niveau 3 à ne pas bloquer le background du parent */ /*.reveal .slides section section section {*/ /* background: transparent !important; */ /*} */ /* ============================================================ MISE EN PAGE DOUBLE COLONNE PLEIN ÉCRAN — CLASSES CUSTOM ------------------------------------------------------------- Architecture séparée : .cols-full → conteneur flex plein écran (hauteur/largeur) .cols-raw → conteneur flex plein écran (hauteur/largeur) identique à .cols-full mais non traoté par le script lua .col-full → colonne pleine hauteur (layout seulement, sans couleur) .bg-* → couleur de fond + couleur de texte adaptée Exemple d'usage : ::: {.col-full .bg-blue} équivaut à l'ancien .col-blue ::: {.col-full .bg-white} équivaut à l'ancien .col-white ============================================================ */ .cols-full { position: relative; width: 100%; height: 100%; top: 0; left: 0; margin: 0; display: flex; justify-content: space-between; } .cols-raw { flex: 1; position: relative; width: 100%; height: 100%; min-width: 100%; top: 0; left: 0; margin: 0; padding: 0; display: flex; justify-content: space-between; } /* ============================================================ CLASSES DE BORDURES ARROUNDIES PERSONNALISÉES (9 CAS) ============================================================ */ /* 1. Rendu arrondi sur les 4 angles */ .rounded { border-radius: var(--border-radius-custom) !important; } /* 2. Rendu arrondi sur l'angle en haut à gauche uniquement */ .rounded-tl { border-top-left-radius: var(--border-radius-custom) !important; } /* 3. Rendu arrondi sur l'angle en haut à droite uniquement */ .rounded-tr { border-top-right-radius: var(--border-radius-custom) !important; } /* 4. Rendu arrondi sur l'angle en bas à gauche uniquement */ .rounded-bl { border-bottom-left-radius: var(--border-radius-custom) !important; } /* 5. Rendu arrondi sur l'angle en bas à droite uniquement */ .rounded-br { border-bottom-right-radius: var(--border-radius-custom) !important; } /* 6. Rendu arrondi sur les angles en haut (côté gauche et droite) */ .rounded-top { border-top-left-radius: var(--border-radius-custom) !important; border-top-right-radius: var(--border-radius-custom) !important; } /* 7. Rendu arrondi sur les angles en bas (côté gauche et droite) */ .rounded-bottom { border-bottom-left-radius: var(--border-radius-custom) !important; border-bottom-right-radius: var(--border-radius-custom) !important; } /* 8. Rendu arrondi sur les angles à gauche (en haut et en bas) */ .rounded-left { border-top-left-radius: var(--border-radius-custom) !important; border-bottom-left-radius: var(--border-radius-custom) !important; } /* 9. Rendu arrondi sur les angles à droite (en haut et en bas) */ .rounded-right { border-top-right-radius: var(--border-radius-custom) !important; border-bottom-right-radius: var(--border-radius-custom) !important; } /* --- Couleurs de fond — gèrent fond ET couleur de texte par défaut --- */ .bg-black { background-color: var(--bg-col-black); color: var(--color-col-black); } .bg-white { background-color: var(--bg-col-white); color: var(--color-col-white); } .reveal .bg-white .box h4 blockquote p { color: black; } .bg-yellow { background-color: var(--bg-col-yellow); color: var(--color-col-yellow); } .bg-orange { background-color: var(--bg-col-orange); color: var(--color-col-orange); } .bg-red { background-color: var(--bg-col-red); color: var(--color-col-red); } .bg-green { background-color: var(--bg-col-green); color: var(--color-col-green); } .bg-blue { background-color: var(--bg-col-blue); color: var(--color-col-blue); } /* --- .col-full : layout pleine hauteur, sans couleur --- À combiner avec une classe .bg-* pour la couleur. Remplace les anciens .col-black / .col-white / .col-blue etc. */ .col-raw { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: stretch; align-self: stretch; } .col-full { /* flex: 1; */ display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } /* Texte dans .col-full : taille et interligne uniformes */ .col-full p, .col-full li, .col-full ul, .col-full ol { font-family: var(--font-main); font-size: var(--font-size-col); font-weight: 400; line-height: 1.45; /* La couleur est héritée de .bg-* appliqué sur le même élément */ } .col-full h4 { font-size: var(--font-size-h4) !important; margin-bottom: 0.3em; /* La couleur est héritée de .bg-* */ } /* Surcharge h4 quand le fond est clair */ .reveal .col-full.bg-white h4 { color: black; } .reveal .col-full.bg-white p { color: black; } .reveal .row-full.bg-white h4 { color: black; } .reveal .row-full.bg-white p { color: black; } /* Liste non bullée dans .cols-full */ .cols-full ul { padding: 0; margin: 0; text-align: center; } .cols-full li { margin-bottom: 12px; } /* Liste non bullée dans .cols-full */ .cols-raw ul { padding: 0; margin: 0; text-align: center; } .cols-raw li { margin-bottom: 12px; } /* ============================================================ MISE EN PAGE LIGNES — CLASSES NATIVES PANDOC ------------------------------------------------------------- Symétrie verticale de .cols / .col : .rows → conteneur flex vertical inline (flux normal) .row → ligne horizontale, taille libre Utilisées via ::: {.rows} / ::: {.row height="X%"} ============================================================ */ .reveal .rows { display: flex; flex-direction: column; gap: 1%; width: 100%; } .reveal .row { display: flex; flex-direction: row; align-items: center; width: 100%; } .reveal .rows-raw { display: flex; flex-direction: column; gap: 1%; width: 100%; } /* Texte dans les lignes natives Pandoc */ .reveal .row p, .reveal .row li, .reveal .row ul, .reveal .row ol { font-size: var(--font-size-col); line-height: 1.4; } .reveal .row h4 { font-size: var(--font-size-h4) !important; margin-bottom: 0.3em; } /* ============================================================ MISE EN PAGE LIGNES PLEIN ÉCRAN — CLASSES CUSTOM ------------------------------------------------------------- Symétrie verticale de .cols-full / .col-full : .rows-full → conteneur flex vertical plein écran .row-full → ligne pleine largeur (layout seul, sans couleur) .bg-* → couleur de fond + couleur de texte (partagé avec cols) Exemple d'usage : ::: {.row-full .bg-blue} → ligne plein écran fond bleu ::: {.row-full .bg-white} → ligne plein écran fond blanc Combinaison rows + cols pour des grilles : :::: {.rows-full} ::: {.row-full .bg-white} contenu ligne 1 ::: {.row-full .bg-blue} contenu ligne 2 :::: ============================================================ */ .rows-full { position: relative; width: 100%; height: 100%; top: 0; left: 0; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; } /* --- .row-full : layout pleine largeur, sans couleur --- À combiner avec une classe .bg-* pour la couleur. flex: 1 → partage équitable de la hauteur disponible flex-direction → row = contenu aligné horizontalement dans la ligne align-self:stretch → s'étend sur toute la largeur du conteneur */ .row-full { flex: 1; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; align-self: stretch; width: 100%; } /* Texte dans .row-full : taille et interligne uniformes */ .row-full p, .row-full li, .row-full ul, .row-full ol { font-family: var(--font-main); font-size: var(--font-size-col); font-weight: 400; line-height: 1.45; /* La couleur est héritée de .bg-* appliqué sur le même élément */ } .row-full h4 { font-size: var(--font-size-h4) !important; margin-bottom: 0.3em; } /* Surcharge h4 quand le fond est clair */ .reveal .row-full.bg-white h4 { color: black; } /* Section parente d'un .rows-full : même traitement que .cols-full */ .reveal .slides section:has(> .rows-full) { display: flex !important; flex-direction: column !important; padding: 0 !important; height: 100% !important; } /* On cible toutes les slides de niveau 2 et 3 générées par Pandoc */ .reveal .slides section.slide.level2, .reveal .slides section.slide.level3 { display: flex !important; flex-direction: column !important; justify-content: center !important; /* Maintient le centrage vertical propre */ height: 100% !important; box-sizing: border-box !important; } /* Injection du bouclier invisible en bas du flux de la slide */ .reveal .slides section.slide.level2::after, .reveal .slides section.slide.level3::after { content: "" !important; display: block !important; position: relative !important; clear: both !important; /* Ajuste cette hauteur en pixels selon la taille réelle de ta toolbar */ height: 26px !important; min-height: 26px !important; /* Garantit que le bouclier reste invisible et ne casse pas les clics */ background: transparent !important; pointer-events: none !important; } /* ============================================================ MISE EN PAGE BOÎTE PLEINE HAUTEUR — CLASSE CUSTOM .box Utilisée via ::: {.box} ============================================================ */ /* Section parente d'un .box : passe en flex pour que .box s'étire */ .reveal .slides section:has(> .box) { display: flex !important; flex-direction: column !important; padding: 0 !important; } .reveal .slides section:has(> .cols-full) { display: flex !important; flex-direction: column !important; padding: 0 !important; } .reveal .slides section:has(> .cols-raw) { display: flex !important; flex-direction: column !important; padding: 0 !important; } .dark-box { /*flex: 1; */ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; min-width: 100%; height: 100%; box-sizing: border-box; padding: var(--padding-section) !important; background-color: var(--bg-dark-box); color: var(--color-dark-box); } .box { /* flex: 1*/ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; min-width: 100%; height: 100%; box-sizing: border-box; padding: var(--padding-section) !important; background-color: var(--bg-box); color: var(--color-box); } .reveal .box h4 { color: black; /* Utilise la couleur spécifique de la colonne */ /* Ajoutez ici vos autres modifications spécifiques */ } .box p, .box li, .box ul, .box ol { font-family: var(--font-main); font-size: var(--font-size-col); font-weight: 400; color: var(--color-box); line-height: 1.45; } /* ============================================================ GESTION DU BACKGROUND ============================================================ */ .reveal .slide-background { background-size: cover !important; background-position: center !important; } /* ============================================================ FRAGMENTS — CORRECTIONS COMPORTEMENT .grow et .shrink nécessitent inline-block pour que le transform: scale() s'applique correctement. ============================================================ */ .fragment.grow, .fragment.shrink { display: inline-block; } /* ============================================================ FIX OVERVIEW ============================================================ */ .reveal.overview .cols-full, .reveal.overview .cols-raw, .reveal.overview .rows-full { width: 100%; height: 100%; top: 0; left: 0; position: relative; } /* ============================================================ 1. FIX CHALKBOARD OFFSET (Slides & Tableau Noir) ============================================================ */ /* Force le canvas à épouser parfaitement le viewport (écran) */ .reveal-viewport canvas.chalkboard, #chalkboard canvas, #notescanvas canvas { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 20 !important; transform: none !important; /* Annule les calculs de centrage du plugin */ } /* On masque le canvas quand il est inactif pour cliquer sur les slides dessous */ canvas.chalkboard[style*="pointer-events: none"], #notescanvas[style*="pointer-events: none"] { display: none !important; } /* Force le conteneur du tableau noir en plein écran */ #chalkboard.r-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 21 !important; } /* ============================================================ 2. GESTION DE LA PALETTE (Visibilité & Clics) ============================================================ */ /* Configuration de base de la palette */ .reveal .palette { position: fixed !important; z-index: 1000 !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important; pointer-events: auto !important; background: rgba(0, 0, 0, 0.8); /* Optionnel: pour mieux voir la palette */ border-radius: 0 10px 10px 0; padding: 10px !important; } /* --- LOGIQUE D'AFFICHAGE DYNAMIQUE --- */ /* 1. Par défaut, on laisse le plugin décider via visibility */ /* Mais si le plugin dit "hidden", on s'assure que c'est bien caché */ .reveal .palette[style*="visibility: hidden"] { display: none !important; } /* 2. Si le mode Notes est désactivé (pointer-events: none), on cache la palette */ #notescanvas[style*="pointer-events: none"] .palette { display: none !important; } /* 3. Si le Tableau Noir est fermé (opacity: 0), on cache la palette */ #chalkboard[style*="opacity: 0"] .palette { display: none !important; } /* On force les icônes et boutons de couleur à être cliquables */ .reveal .palette ul li { cursor: pointer !important; pointer-events: auto !important; } /* ============================================================ 3. PRIORITÉ DES ÉLÉMENTS FIXES (Logo, Boutons persos) ============================================================ */ /* Vos éléments personnels doivent être au-dessus du canvas de dessin */ .reveal-viewport div[style*="position: fixed"] { z-index: 1001 !important; } /* ============================================================ ALPINE.JS - SYSTÈME SÉMANTIQUE (Toggle, Stepper, Alerts) ============================================================ */ /** * 1. PRÉVENTION DU FLASH DE CONTENU (TRÈS IMPORTANT) * Ajoute l'attribut x-cloak à tes div dans le filtre Lua pour * éviter que le texte ne s'affiche avant qu'Alpine ne soit chargé. */ [x-cloak] { display: none !important; } /** * 2. BOITES D'ALERTE (Warning / Info) */ .alert { padding: 1rem 1.5rem; margin: 1rem 0; border-radius: 8px; border-left: 6px solid; text-align: left; font-size: 0.8em; } .alert.warning { background-color: rgba(255, 145, 0, 0.33); border-color: #ff9100; color: #ffcc80; } .alert.info { background-color: rgba(0, 176, 255, 0.33); border-color: #00b0ff; color: #81d4fa; } /** * 3. COMPOSANT TOGGLE (Repliable) */ .btn-toggle { display: block; margin: 10px 0; padding: 8px 15px; background: #444; color: #fff; border: 1px solid #666; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 0.5em; /* Petit pour ne pas manger la slide */ transition: all 0.2s ease; } .btn-toggle:hover { background: #555; border-color: #f8c555; } /** * 4. COMPOSANT STEPPER (Progression) */ .stepper-box { margin: 20px 0; padding: 15px; background: var(--bg-dark-box); border-radius: 8px; } .stepper-box ul { list-style: none !important; margin: 0 0 20px 0 !important; padding: 0 !important; } .stepper-box ul li { margin-bottom: 12px !important; transition: all 0.4s ease; } /* Le bouton "Suivant" du stepper */ .btn-next { background: #f8c555; color: #000; border: none; padding: 6px 12px; border-radius: 4px; font-weight: bold; font-size: 0.5em; cursor: pointer; box-shadow: 0 4px 0 #b38a2e; } .btn-next:active { box-shadow: none; transform: translateY(2px); } .btn-next:hover { background: #fff; } /** * 5. GÉNÉRAL */ /* Empêcher Alpine de souligner les "boutons" s'ils sont générés comme des liens */ [x-data] button, [x-data] .button { text-decoration: none !important; outline: none; } .reveal .chalkboard-container { z-index: 99 !important; } .reveal .canvas-container { pointer-events: auto !important; } /* ============================================================ FIX INTERACTIVITÉ ECHARTS — coupable identifié via DOM ------------------------------------------------------------- Le .slide-menu-overlay (plugin RevealMenu) est un div transparent plein écran en position fixed qui capture TOUS les événements souris pour fermer le menu. Il est placé après .echarts-container dans le DOM et intercepte les mousemove avant ECharts. On lui retire les pointer-events quand le menu est fermé. ============================================================ */ .slide-menu-overlay { pointer-events: none !important; } /* Quand le menu est ouvert (.slide-menu--active), on restitue les pointer-events pour que le clic en dehors ferme bien le menu */ .slide-menu--active ~ .slide-menu-overlay, .slide-menu-wrapper.active .slide-menu-overlay { pointer-events: auto !important; } /* Note: .echarts-container svg pointer-events est géré dans la section FIX INTERACTIVITÉ ECHARTS */ /* ============================================================ ECHARTS — CONTENEUR DE GRAPHIQUES ------------------------------------------------------------- La hauteur est passée en style inline par le filtre Lua depuis l'attribut height="Xpx" du Markdown. On n'impose donc PAS de min-height fixe ici (ce qui écraserait la valeur inline). On utilise à la place min-height: 200px comme garde-fou minimal. ============================================================ */ /* ============================================================ ECHARTS — CONTENEUR DE GRAPHIQUES (Version Corrigée) ============================================================ */ .reveal .echarts-container { display: block; width: 100%; min-height: 200px; margin: 0 auto; /* background: rgba(255, 255, 255, 0.03); */ border-radius: 8px; position: relative; z-index: 1; /* Un z-index bas pour le parent */ overflow: visible !important; /* Crucial pour le tooltip */ } /* On ne cible QUE le canvas principal de rendu, pas les couches de tooltip */ .reveal .echarts-container > div { position: relative !important; width: 100% !important; height: 100% !important; } /* Force l'affichage des tooltips ECharts qui pourraient être cachés par Reveal */ .echarts-container div[style*="visibility: hidden"], .echarts-container div[style*="display: none"] { /* On ne touche pas à ça, ECharts gère sa propre visibilité */ } /* On s'assure que le tooltip passe au dessus de TOUT */ .echarts-tooltip, .reveal .echarts-container div:nth-child(2) { z-index: 9999 !important; } /* ============================================================ FIX INTERACTIVITÉ ECHARTS ============================================================ */ .echarts-container { pointer-events: auto !important; user-select: none; } /* Le canvas ET le svg interne doivent recevoir les événements souris pour que le tooltip fonctionne. On ne bloque JAMAIS ces éléments. */ .echarts-container canvas, .echarts-container svg, .echarts-container div { pointer-events: auto !important; } /* On s'assure que le tooltip d'ECharts est toujours au-dessus de tout */ .echarts-tooltip, .reveal .slides section .echarts-container div:nth-child(2) { z-index: 10000 !important; } /* Désactive pointer-events sur le chalkboard uniquement quand il n'est pas actif */ #chalkboard:not(.visible) { pointer-events: none; } /* ============================================================ STEPPER — GESTION DE L'OPACITÉ (dupliqué consolidé) ============================================================ */ .stepper-box li { transition: opacity 0.4s ease; margin-bottom: 10px; } /* ============================================================ LIGHTBOX — ZOOM IMAGE AU CLIC ------------------------------------------------------------- Les images dans les slides deviennent cliquables. Un overlay plein écran affiche l'image agrandie. Cohérent avec la charte : fond sombre, accent #e8c547. ============================================================ */ /* --- Curseur sur les images pour signaler le clic --- */ .reveal .slides img { cursor: zoom-in; transition: opacity 0.2s ease, box-shadow 0.2s ease; } .reveal .slides img:hover { opacity: 0.88; box-shadow: 0 0 0 2px var(--color-accent); } /* --- Overlay plein écran --- */ #lightbox-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(4px); cursor: zoom-out; align-items: center; justify-content: center; /* animation d'entrée */ opacity: 0; transition: opacity 0.22s ease; } #lightbox-overlay.lb-visible { display: flex; opacity: 1; } /* --- Image dans le lightbox --- */ #lightbox-img { /* width ET height à 100% de la zone dispo : object-fit:contain choisit automatiquement le côté limitant (X ou Y) et centre l'image sans la déformer ni la cropper. */ width: 92vw; height: 90vh; object-fit: contain; border-radius: 6px; box-shadow: 0 8px 48px rgba(0, 0, 0, 0.7), 0 0 0 2px var(--color-accent); transform: scale(0.94); transition: transform 0.22s ease; cursor: default; } #lightbox-overlay.lb-visible #lightbox-img { transform: scale(1); } /* --- Bouton fermeture --- */ #lightbox-close { position: fixed; top: 18px; right: 22px; z-index: 10000; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); color: #ffffff; font-size: 22px; line-height: 1; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, border-color 0.15s ease; } #lightbox-close:hover { background: rgba(232, 197, 71, 0.25); border-color: var(--color-accent); color: var(--color-accent); } /* --- Caption (alt text de l'image) --- */ #lightbox-caption { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: var(--color-muted); font-family: var(--font-main); font-size: 0.85rem; text-align: center; max-width: 80vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } /* ============================================================ PRINT / PDF OVERRIDES ============================================================ */ /* Optimisation de l'affichage des fonds */ .reveal .slide-background { background-size: cover !important; background-position: center !important; } /* ============================================================ PRINT-PDF : Fix parallax background ------------------------------------------------------------- En mode ?print-pdf, Reveal.js applique la classe .print-pdf sur . Le parallaxBackgroundImage n'est PAS injecté par Reveal en mode print — on le force ici uniquement sur les slides qui n'ont PAS de background spécifique (data-background). IMPORTANT : on cible .slide-background:not([style*="background-image"]) pour ne pas écraser background_cover.png et background_section.png qui sont injectés en style inline par Reveal sur leurs slides. ============================================================ */ .print-pdf .slide-background:not([style*="background-image"]) { background-image: url("../assets/background_default.png") !important; background-size: cover !important; background-position: center !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* Les slides avec un fond spécifique : s'assurer que cover/exact sont forcés */ .print-pdf .slide-background[style*="background-image"] { background-size: cover !important; background-position: center !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* Idem sur .slide-background-content (élément enfant utilisé par certaines versions de Reveal pour le rendu réel de l'image de fond) */ .print-pdf .slide-background-content:not([style*="background-image"]) { background-image: url("../assets/background_default.png") !important; background-size: cover !important; background-position: center !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; } .print-pdf .slide-background-content[style*="background-image"] { background-size: cover !important; background-position: center !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; } .print-pdf .cols-full { max-height: 590px ; height: 590px ; } .print-pdf .cols-raw { max-height: 590px ; height: 590px ; } .print-pdf .rows-full { max-height: 590px ; height: 590px ; } .print-pdf .cols { max-height: 590px ; } .print-pdf .rows-raw { max-height: 590px ; } .print-pdf .rows { max-height: 590px ; } /* Fix section layout en mode PDF : forcer flex + dimensions */ .print-pdf .reveal .slides section { box-sizing: border-box; } .print-pdf .reveal .slides section:has(> .cols-full), .print-pdf .reveal .slides section:has(> .cols-raw), .print-pdf .reveal .slides section:has(> .rows-full), .print-pdf .reveal .slides section:has(> .box), .print-pdf .reveal .slides section:has(> .dark-box) { display: flex !important; flex-direction: column !important; padding: 0 !important; /* En PDF, la section a top:14px left:25.5px width:1280px en inline. On force une hauteur utile = page (748px) - top (14px) - footer (~28px) */ height: 706px !important; overflow: hidden !important; } .print-pdf .reveal .echarts-container { /* Force le conteneur à se comporter de manière prévisible */ width: 100% !important; max-height: 460px !important; min-height: 0 !important; margin: 0 auto !important; position: relative !important; overflow: hidden !important; } /* Le SVG ECharts doit être contenu dans son parent en PDF */ .print-pdf .reveal .echarts-container svg, .print-pdf .reveal .echarts-container canvas { max-width: 100% !important; max-height: 460px !important; } /* Le div interne ECharts (wrapper du SVG) doit se contraindre */ .print-pdf .reveal .echarts-container > div { max-height: 460px !important; overflow: hidden !important; } @media print { /* 1. Définition du format de papier personnalisé (équivalent 16:9 basé sur la largeur A4) */ @page { size: 1980px 1080px; /* 16/9 */ margin: 0 !important; } /* Force le rendu des couleurs/images de fond dans Chromium */ * { print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; } /* Masquer les boutons de navigation et le footer interactif */ .reveal .controls, .reveal .progress, div[style*="position: fixed"] button, div[style*="z-index: 30"] { display: none !important; } /* 1. Force l'affichage du contenu Alpine (Steppers/Toggles) */ [x-cloak] { display: block !important; } .stepper-box li, .btn-toggle + div, [x-show] { display: block !important; opacity: 1 !important; visibility: visible !important; } /* Masquer les boutons interactifs devenus inutiles */ .btn-next, .btn-toggle, button, .reveal .controls, .reveal .progress { display: none !important; } /* 2. Correction Mermaid pour PDF */ .reveal .mermaid svg { background: transparent !important; max-height: 100% !important; } .reveal .mermaid .nodeLabel, .reveal .mermaid .edgeLabel { color: #000 !important; } /* 3. Nettoyage de l'interface de présentation */ div[style*="position: fixed"] { display: none !important; } /* Force l'affichage du logo et footer injectés dans chaque .pdf-page */ .print-pdf .pdf-page { position: relative !important; overflow: visible !important; } .print-pdf .pdf-page img[src*="logo_small"], .print-pdf .pdf-page div[style*="text-align:center"] { display: block !important; visibility: visible !important; opacity: 1 !important; } /* Force la barre footer à rester visible à l'impression */ .print-pdf .pdf-page > div:last-child { display: flex !important; visibility: visible !important; opacity: 1 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; } } /* Rappel des règles existantes pour le layout */ .reveal .slides section:has(> .box), .reveal .slides section:has(> .dark-box), .reveal .slides section:has(> .cols-full), .reveal .slides section:has(> .cols-raw), .reveal .slides section:has(> .rows-full) { display: flex !important; flex-direction: column !important; padding: 0 !important; height: 100% !important; } /* ============================================================ ECHARTS — Tooltip sizing ============================================================ */ .echarts-tooltip, div[style*="position: absolute"][style*="z-index: 9999999"] { font-size: 1.0rem !important; padding: 6px 10px !important; line-height: 1.4 !important; max-width: 185px !important; white-space: nowrap !important; overflow: auto; } /* ============================================================ FIX CHALKBOARD : Gestion des couches et curseur ============================================================ */ /* S'assurer que le canvas du tableau est au-dessus quand il est actif */ .reveal #chalkboard { z-index: 40 !important; } /* Force le curseur à apparaître sur le canvas de dessin */ .reveal #chalkboard, .reveal #notescanvas { cursor: crosshair !important; pointer-events: auto !important; } /* IMPORTANT : Empêcher les slides de bloquer les clics quand on est sur le tableau noir (board) */ .reveal.show-chalkboard .slides { pointer-events: none !important; } /* Mais autoriser les contrôles Alpine et autres s'ils sont nécessaires */ .reveal.show-chalkboard .reveal-static-button, .reveal.show-chalkboard .customcontrols { pointer-events: auto !important; z-index: 50 !important; } /* Base de la barre d'outils */ .custom-toolbar-container { position: fixed; bottom: 5px; left: 5px; z-index: 30; display: flex; gap: 5px; align-items: center; } #toolbar-toggle { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); color: white; cursor: pointer; border-radius: 5px; padding: 8px 12px; font-size: 20px; opacity: 0.4; } #toolbar-buttons1 { display: none; gap: 5px; align-items: center; } #slide-footer { position: fixed; bottom: 5px; left: 0; width: 100%; display: flex; align-items: center; pointer-events: none; z-index: 29; box-sizing: border-box; padding: 0 12px; } /* 🫥 Style des Zones de Navigation Invisibles */ #invisible-clickable-left, #invisible-clickable-right { position: fixed; top: 15vh; /* Centre verticalement (100% - 50% = 50% / 2 = 25%) */ height: 70vh; /* Limite la hauteur à la moitié centrale de l'écran */ width: 5vw; /* Équivalent d'environ 1cm de large */ z-index: 28; /* Reste sous la barre d'outils */ background: transparent; cursor: pointer; /* Optionnel pour le debug : décommentez la ligne ci-dessous pour voir la zone active en rouge translucide */ /* background: rgba(255, 0, 0, 0.1); */ } #invisible-clickable-left { left: 0; } #invisible-clickable-right { right: 0; } /* 📐 Style des Zones Invisibles dans les Angles Supérieurs (Début / Fin) */ #invisible-clickable-first, #invisible-clickable-last { position: fixed; top: 0; width: 5vw; /* Équivalent d'environ 1cm de large */ height: 10vh; z-index: 28; /* Même priorité sous la toolbar */ background: transparent; cursor: pointer; /* Optionnel pour le debug : décommentez pour afficher en bleu translucide */ /* background: rgba(0, 0, 255, 0.15); */ } #invisible-clickable-first { left: 0; /* Angle Haut-Gauche */ } #invisible-clickable-last { right: 0; /* Angle Haut-Droite */ } /* 📱 Règles Responsives : Applicables UNIQUEMENT quand la toolbar a la classe .toolbar-open */ @media (max-width: 740px) { .custom-toolbar-container.toolbar-open #btn-qrcode { display: none !important; } } @media (max-width: 840px) { .custom-toolbar-container.toolbar-open #btn-print { display: none !important; } } @media (max-width: 800px) { .custom-toolbar-container.toolbar-open #btn-overview { display: none !important; } } @media screen and (max-width: 1440px) { .custom-toolbar-container.toolbar-open ~ #slide-footer { display: none !important; } } /* ⏱️ Repositionnement du Chrono sur petits écrans (Seuil < 940px) */ @media (max-width: 960px) { #slide-timer-chrono { position: fixed !important; top: 15px !important; right: 15px !important; bottom: auto !important; left: auto !important; z-index: 40; background: rgba(0, 0, 0, 0.65); padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(4px); margin-bottom: 0 !important; /* Annule la marge basse du widget d'origine */ } /* Ajustement de l'espacement interne du séparateur sur mobile */ #slide-timer-chrono #slide-timer-target { margin-right: 0 !important; } } /* 🖨️ Règles lors de l'impression PDF (Masquage de tous les éléments d'interface) */ @media print { .custom-toolbar-container, #invisible-clickable-left, #invisible-clickable-right, #invisible-clickable-first, #invisible-clickable-last { display: none !important; } } /* Fix background color with wavedrom */ /* 1. Rendre les fonds transparents de manière universelle (Valable pour tout) */ .wavedrom-container rect, .wavedrom-container rect.bg { fill: transparent !important; } .wavedrom-container .pinname { fill: #0000ff; } .wavedrom-container .wirename { fill: #0000ff; }