/* ════════════════════════════════════════════════════════════════════ responsive-global.css — Couche responsive/mobile globale Devoirati Auteur: assistant (mission "adaptation mobile"), 2026-06. Principe: NE PAS toucher le rendu desktop. Les corrections de mise en page sont confinées dans des @media (max-width). Les règles hors media sont uniquement défensives (anti-débordement, isolation LTR des maths). Chargé via @import en tête des CSS partagés et/ou en fin de . ════════════════════════════════════════════════════════════════════ */ /* ── 1) Anti-débordement horizontal global ───────────────────────────── */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } img, svg, video, canvas, iframe, embed, object { max-width: 100%; height: auto; } /* ========================================================================== Devoirati responsive safety layer - 2026-07-08 Non destructive: keep pedagogical content, colors and scripts unchanged. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { max-width: 100%; } body { overflow-wrap: break-word; } img, picture, video, canvas, svg, iframe, object, embed { max-width: 100%; } canvas, svg { height: auto; } table { max-width: 100%; } pre, code, kbd, samp { white-space: pre-wrap; } .math, .math-expr, .mjx-chtml, .MathJax, mjx-container, math-field, .ML__fieldcontainer, .ML__base { max-width: 100%; } .math, .math-expr, .MathJax, mjx-container, math-field { direction: ltr; unicode-bidi: isolate; } mjx-container[display="true"], .MathJax_Display, .math-display, .latex-display, .equation, .formula, .formule { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .table-scroll, .rwrap, .table-responsive, .overflow-x, .scroll-x { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .erc, .erc-card, .exo-card, .exercise-card, .question-card, .quiz-card, .card, .panel, .box, .container, .content, .main, main, section, article { max-width: 100%; } .nav-pages, .navigation-pages, .pagination, .pager, .btn-row, .button-row, .actions, .toolbar, .top-nav, .navbar, .header, .page-header, .page-info-bar, .mode-bar, .choices, .options { max-width: 100%; } .fahmi-panel, .fahmi-help-panel, .fahmi-bubble, .avatar-speech, #fahmi-panel, #fahmi-help-panel, #avatarHelpPanel, #avatarHelpSystemLoaded { max-width: min(96vw, 520px); } @media (max-width: 900px) { body { min-width: 0 !important; } .container, .content, .main, main, .page, .wrapper, .wrap { width: auto !important; max-width: 100% !important; } .erc, .erc-card, .exo-card, .exercise-card, .question-card, .quiz-card, .card, .panel, .box { width: auto !important; max-width: 100% !important; } table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } th, td { max-width: 100vw; } .nav-pages, .navigation-pages, .pagination, .pager, .btn-row, .button-row, .actions, .toolbar, .top-nav, .navbar, .page-info-bar, .mode-bar, .choices, .options { flex-wrap: wrap !important; gap: 8px; } .nav-pages { justify-content: center; } .btn-nav, .nav-pages button, .nav-pages a, button, .btn, [role="button"] { max-width: 100%; white-space: normal; } input, select, textarea, math-field { max-width: 100%; min-width: 0; } .MathJax_Display, mjx-container[display="true"] { padding-bottom: 4px; } .avatar-image, .agent-avatar, .fahmi-avatar, #avatar, #fahmi-avatar { max-width: 22vw !important; max-height: 22vw !important; } .avatar-speech, .fahmi-bubble, .fahmi-panel, .fahmi-help-panel, #fahmi-panel, #fahmi-help-panel, #avatarHelpPanel { max-width: 92vw !important; max-height: 72vh; overflow: auto; -webkit-overflow-scrolling: touch; } .modal, .modal-box, .dialog, .popup, .overlay-box, .video-modal-box, .tools-panel, .side-panel, .panel-lateral { width: auto; max-width: 96vw !important; max-height: 90vh; overflow: auto; } } @media (max-width: 600px) { body { padding-left: min(12px, 3vw); padding-right: min(12px, 3vw); } .container, .content, .main, main, .page, .wrapper, .wrap { padding-left: min(12px, 3vw) !important; padding-right: min(12px, 3vw) !important; } h1, .page-title { font-size: clamp(1.15rem, 6vw, 1.6rem) !important; line-height: 1.3; } h2, .section-title { font-size: clamp(1rem, 5vw, 1.35rem) !important; line-height: 1.35; } .nav-pages { align-items: stretch; } .nav-pages .page-indicator { flex: 1 1 100%; text-align: center; order: 2; } .nav-pages .btn-prev, .nav-pages .btn-index, .nav-pages .btn-next { flex: 1 1 120px; } .manual-form, .quiz-options, .choices, .options { min-width: 0; } .manual-item, .question, .statement, .enonce, .correction, .solution { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Médias avec ratio fixe (vidéos) : garder le ratio sans casser */ iframe { max-width: 100%; } /* ── 2) Expressions mathématiques : LTR isolé, jamais de casse de page ── */ .math, .math-expr, [data-ltr], b[data-ltr] { direction: ltr; unicode-bidi: isolate; max-width: 100%; } /* MathJax v3 (CHTML) : autoriser le défilement horizontal d'une grande formule en mode display, sans rogner les maths inline. */ mjx-container { max-width: 100%; } mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; } /* MathLive / champs de saisie mathématiques */ math-field { max-width: 100%; } /* ── 3) Tableaux : rendus scrollables, jamais débordants ─────────────── */ /* Wrapper injecté par responsive-init.js */ .table-scroll, .rwrap { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } table { border-collapse: collapse; max-width: 100%; } /* ── 4) Helpers réutilisables ────────────────────────────────────────── */ .no-x-scroll { overflow-x: hidden; } /* ════════════════════════════════════════════════════════════════════ TABLETTE & MOBILE (≤ 1024px / ≤ 768px / ≤ 480px) ════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Empêcher tout débordement horizontal de la page sur petit écran */ html, body { overflow-x: hidden; max-width: 100%; } /* Conteneurs fluides + marges réduites */ .container, .wrap, .page, .content, .main, main, .ulysse-container, .card, .carte, .panel, .box { max-width: 100% !important; box-sizing: border-box; } .container, .wrap, .page, .content, .main, main { padding-left: 12px !important; padding-right: 12px !important; } /* Tableaux bruts : scrollables au lieu de déborder (sans nowrap pour préserver le retour à la ligne dans les cellules) */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Grandes formules display : scroll horizontal */ mjx-container[display="true"] { display: block; } /* Cibles tactiles ≥ 44px (recommandation WCAG/Apple) */ button, .btn, .mode-btn, .nav-link, .video-btn, .btn-nav, .nav-pages button, a.btn, [role="button"], .erc-valider, .erc-indice, .erc-solution, .quiz-option, .choice, .choices label, .opt, .key, .ka-key { min-height: 44px; } /* Champs : 16px pour éviter le zoom auto iOS */ input, select, textarea { min-height: 42px; font-size: 16px; max-width: 100%; } /* Grilles rigides -> une colonne (lecture confortable) */ .grid, .cards, .cartes, .paragraphes, .grille, .resources, .rubriques, .grid-2, .grid-3, .grid-4, .cols, .columns { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } /* Flex en ligne -> retour à la ligne autorisé */ .row, .flex-row, .toolbar, .actions, .mode-bar, .page-info-bar { flex-wrap: wrap !important; } /* Titres : tailles plus mesurées */ h1, .page-title { font-size: clamp(1.25rem, 5vw, 1.8rem); line-height: 1.3; } h2, .section-title { font-size: clamp(1.05rem, 4vw, 1.4rem); } /* Barres de navigation hautes : repli propre */ .top-nav, .topbar, .navbar { flex-wrap: wrap; height: auto !important; gap: 8px; padding: 8px 12px; } .breadcrumb { flex-wrap: wrap; } .search-box { min-width: 0 !important; width: 100%; } /* En-têtes / bandeaux : autoriser le retour à la ligne pour éviter le rognage des titres et des lignes de badges mono-ligne (cause du léger débordement RTL observé sur certains bandeaux dégradés). */ .page-header, .hero, .header, .banner, .gamif-bar, .page-info-bar, .badges, .info-bar, .topbar-brand { flex-wrap: wrap !important; } h1, h2, h3, .title-line, .page-title, .page-subtitle, .hero-title, .subtitle { white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; } /* ── Avatar Fahmi / agent : taille raisonnable, dans l'écran ── */ .agent-avatar, #avatar, .fahmi-avatar, .fahmi-bubble, .avatar-speech { max-width: 88vw !important; } .agent-avatar, .fahmi-avatar { transform: scale(.9); transform-origin: bottom right; } /* ── Panneaux d'aide / remédiation / overlays / modales ── IMPORTANT : on contraint seulement la largeur (pas de left/transform forcés) pour ne PAS casser le centrage des modales en translate(-50%,-50%) ni les animations de panneaux latéraux. */ .modal, .modal-box, .video-modal-box, .panel-help, .help-panel, .remediation, .mastery-panel, .overlay-box, .popup, .dialog, .tools-panel, .panel-lateral, .side-panel { max-width: 96vw !important; box-sizing: border-box; } .modal, .overlay, .video-modal { padding: 10px; } /* ── Remédiation 3ilej (#mastery-rem) ── L'empilement sur mobile est désormais porté par mastery.js lui-même (feuille #mastery-ui-css, même palier 768px), qui vise les identifiants #mastery-body / #mastery-tools / #mastery-footer. Les règles qui vivaient ici visaient « > div:last-child », c'est-à-dire le PIED de page et non le corps : le corps ne s'empilait donc jamais et #mastery-panel, passé à width:100%, mangeait toute la rangée — l'exercice se retrouvait dans une colonne d'une lettre de large. Ne pas les rétablir. */ /* ── Clavier mathématique (Khan / MathLive) : pleine largeur, défilable ── */ .math-keyboard, .ka-keyboard, [class*="keyboard"], .keyboard-container { max-width: 100vw !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } .ka-key, .key { padding: 8px 6px; } } /* ── Clavier mathématique Khan (#ka-popup, width:300px fixe) ──────────── */ @media (max-width: 600px) { #ka-popup { width: 94vw !important; max-width: 94vw !important; left: 3vw !important; right: auto !important; top: auto !important; bottom: 8px !important; max-height: 70vh; overflow-y: auto; } #ka-popup .ka-panel { flex-wrap: wrap; } #ka-popup button { min-height: 40px; } } @media (max-width: 480px) { /* Encore plus compact sur petit téléphone */ .container, .wrap, .page, .content, main { padding-left: 8px !important; padding-right: 8px !important; } h1, .page-title { font-size: clamp(1.1rem, 6vw, 1.5rem); } .info-badge, .badge { font-size: .72rem; } /* Boutons de navigation pages : pile verticale si trop serré */ .nav-pages { flex-wrap: wrap; gap: 8px; } }