/* ══════════════════════════════════════════════════════════════════ BARRE D'OUTILS — cliquable sur mobile (au-dessus de Reveal) ══════════════════════════════════════════════════════════════════ */ #barre-outils { z-index: 3000; pointer-events: none; } #barre-outils .btn-outil { pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: rgba(127, 216, 196, 0.25); cursor: pointer; } #barre-outils a.btn-outil { text-decoration: none; display: inline-flex; align-items: center; color: inherit; box-sizing: border-box; } #barre-outils a.btn-accueil { justify-content: center; width: 44px; min-width: 44px; padding: 10px; } #barre-outils a.btn-accueil svg { display: block; width: 18px; height: 18px; } /* ══════════════════════════════════════════════════════════════════ MODE CLAIR — identique au template ordinateur (variables + Reveal) La classe .mode-clair sur et redéfinit les variables ; les composants (.bloc, .badge, .mot-cle…) suivent comme sur desktop. ══════════════════════════════════════════════════════════════════ */ html.mode-clair { --fond: #f4eedd; --fond-carte:#eae2cb; --encre: #37414f; --sourdine: #6e7787; --defbleu: #2e6cb5; --formvert: #14735e; --alerteamb: #9c660f; --noter: #6a4fc3; --bord-outil:#cfc4a5; --r-background-color: #f4eedd; --r-main-color: #37414f; --r-heading-color: #37414f; --r-link-color: #2e6cb5; --r-link-color-hover: #14735e; --r-selection-background-color: rgba(20, 115, 94, 0.28); --r-selection-color: #37414f; color-scheme: light; } html:not(.mode-clair) { color-scheme: dark; } /* Fond Reveal : seul point où !important est nécessaire (thème black.css) */ html.mode-clair .reveal-viewport { background: var(--fond) !important; background-color: var(--fond) !important; } html:not(.mode-clair) .reveal-viewport { background: var(--fond) !important; background-color: var(--fond) !important; } html.mode-clair .reveal, html.mode-clair .reveal .slides, html.mode-clair .reveal .slides section { background: transparent; color: var(--encre); } html.mode-clair .reveal .progress { background: rgba(0, 0, 0, 0.08); color: var(--formvert); } html.mode-clair .reveal .controls { color: var(--formvert); } html.mode-clair .bloc-alerte { background: #f0e4c4; } html.mode-clair .surligne { background: rgba(156, 102, 15, 0.18); } /* Mobile : mode clair forcé, texte lisible (mêmes couleurs que desktop) */ body.vue-mobile #btn-theme { display: none !important; } html.mode-clair body.vue-mobile .reveal { color: var(--encre); } html.mode-clair body.vue-mobile .reveal h1, html.mode-clair body.vue-mobile .reveal h2, html.mode-clair body.vue-mobile .reveal h3, html.mode-clair body.vue-mobile .reveal p, html.mode-clair body.vue-mobile .reveal li { color: var(--encre); } /* ── Mobile / tablette : barre d'outils toujours accessible ── */ body.vue-mobile #barre-outils, body.vue-tablette #barre-outils { position: fixed; top: max(8px, env(safe-area-inset-top, 8px)); right: max(8px, env(safe-area-inset-right, 8px)); left: auto; bottom: auto; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 10000; } body.vue-mobile #barre-outils .btn-outil, body.vue-tablette #barre-outils .btn-outil { min-height: 44px; min-width: 44px; padding: 10px 14px; font-size: 13px; font-weight: 600; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); -webkit-user-select: none; user-select: none; } body.vue-mobile #btn-theme, body.vue-tablette #btn-theme { min-width: 7.5em; text-align: center; } body.vue-tablette #btn-theme { display: inline-flex; } /* ══════════════════════════════════════════════════════════════════ COURS REVEAL — LECTURE RESPONSIVE (tablette & smartphone) À lier dans index.html et chaque séquence : cours-responsive.css ══════════════════════════════════════════════════════════════════ */ /* ── Tablette paysage ── */ @media (max-width: 1024px) { .grille-duo { grid-template-columns: 1fr !important; gap: 0.9em; align-items: start; width: 100%; max-width: 100%; } .grille-trio { grid-template-columns: 1fr 1fr; gap: 0.65em; width: 100%; max-width: 100%; } .grille-duo > *, .grille-trio > * { min-width: 0; max-width: 100%; } .svg-compact, .svg-petit { width: 100% !important; } } /* ── Tablette portrait / grand smartphone ── */ @media (max-width: 768px) { .reveal h1 { font-size: 1.55em; } .reveal h2 { font-size: 1.2em; border-bottom-width: 3px; display: block; max-width: 100%; } .reveal h3 { font-size: 1em; } .grille-duo, .grille-trio { grid-template-columns: 1fr !important; gap: 0.55em; width: 100% !important; max-width: 100% !important; } .entete-slide { flex-wrap: wrap; gap: 0.45em; margin-bottom: 0.9em !important; max-width: 100%; } .entete-slide .fil-ariane { flex: 1 1 100%; font-size: 0.44em; word-break: break-word; } .badge { font-size: 0.44em; white-space: normal; text-align: center; line-height: 1.35; max-width: 100%; } .fil-ariane { margin-bottom: 0.8em; } .bloc { padding: 0.55em 0.75em; margin: 0.45em 0; font-size: 0.82em; max-width: 100%; box-sizing: border-box; } .plan-partie { font-size: 0.58em; } .numero-partie { font-size: 2em; } .slide-dense .entete-slide { margin-bottom: 0.35em !important; } .slide-dense h2 { font-size: 1.1em !important; } .slide-dense .bloc { padding: 0.3em 0.6em !important; } .reveal pre { max-width: 100%; overflow-x: auto; } .reveal pre code { max-width: 100%; max-height: 40vh; padding: 0.7em 0.85em; font-size: 0.58em; white-space: pre-wrap; word-break: break-word; overflow-x: auto; box-sizing: border-box; } .katex { font-size: 1em; max-width: 100%; } .svg-carte, .svg-compact, .svg-petit { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .table-simple { font-size: 0.62em; display: block; max-width: 100%; overflow-x: auto; } .table-simple th, .table-simple td { padding: 0.3em 0.4em; } .reveal .controls { transform: scale(0.9); transform-origin: bottom right; } .reveal .slide-number { font-size: 0.55em; } } /* ── Smartphone : police calibrée + zéro débordement horizontal ── */ body.vue-mobile .reveal { font-size: 27px; line-height: 1.55; } body.vue-mobile.police-dys .reveal { font-size: 23px; } body.vue-mobile .reveal h1 { font-size: 1.38em; max-width: 100%; word-wrap: break-word; } body.vue-mobile .reveal h2 { font-size: 1.1em; display: block; width: 100%; max-width: 100%; word-wrap: break-word; } body.vue-mobile .reveal li { margin-bottom: 0.42em; } body.vue-mobile .katex { font-size: 0.92em; } body.vue-mobile .entete-slide { margin-bottom: 0.55em !important; } body.vue-mobile .grille-duo, body.vue-mobile .grille-trio { grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important; } body.vue-mobile .grille-duo > *, body.vue-mobile .grille-trio > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } body.vue-mobile .reveal .slides section { text-align: left; padding: 0 0.35em; box-sizing: border-box; width: 100% !important; max-width: 100% !important; overflow-x: hidden; } body.vue-mobile .reveal .slides { text-align: left; } body.vue-mobile .reveal .slides > section > section { width: 100% !important; max-width: 100% !important; } body.vue-mobile .reveal-viewport { overflow: hidden; } body.vue-mobile .reveal .slide { overflow: hidden; } body.vue-mobile .bloc, body.vue-mobile .bloc-code, body.vue-mobile .reveal pre, body.vue-mobile img, body.vue-mobile svg { max-width: 100%; box-sizing: border-box; } body.vue-mobile .reveal pre code { font-size: 0.52em; padding: 0.6em 0.7em; } @media (max-width: 480px) { .entete-slide { margin-bottom: 0.65em !important; } .bloc { font-size: 0.78em; } .indice-vertical { font-size: 0.4em; padding: 0.35em 0.7em; } #barre-outils { top: max(8px, env(safe-area-inset-top, 8px)); right: max(8px, env(safe-area-inset-right, 8px)); left: auto; bottom: auto; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 10000; } .btn-outil { min-height: 44px; min-width: 44px; font-size: 13px; padding: 10px 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } #btn-theme { min-width: 7.5em; text-align: center; } #pied-de-page { font-size: 10px; line-height: 1.35; white-space: normal; max-width: 72vw; bottom: 6px; text-align: center; } .reveal .progress { height: 4px; } .reveal .controls { transform: scale(0.78); } .num-titre { font-size: 0.75em; margin-right: 0.25em; } } /* ── SVG très larges (ex. tableau périodique) : défilement horizontal ── */ .conteneur-svg-large { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin-top: 0.4em; box-sizing: border-box; } .conteneur-svg-large svg { display: block; min-width: 620px; } @media (min-width: 769px) { .conteneur-svg-large { overflow: visible; } .conteneur-svg-large svg { min-width: 0; } } /* ── Tablette : empêcher les débordements ── */ body.vue-tablette .grille-duo { grid-template-columns: 1fr !important; } body.vue-tablette .reveal .slides section { max-width: 100%; box-sizing: border-box; }