/* ============================================================ manuel.css — Système de thèmes + mise en page du lecteur 7 thèmes pilotés par [data-theme] sur . Tout le reste du CSS n'utilise QUE des variables -> bascule instantanée. ============================================================ */ /* ---------- POLICES ---------- */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); /* ============================================================ PALETTES — chaque thème redéfinit le même jeu de variables ============================================================ */ /* A — Livre clair (défaut) */ :root, html[data-theme="A"]{ --fond:#f6f1e7; --fond-motif:#e3dbca; --surface:#fffdf8; --surface2:#f3ede0; --encre:#23201c; --encre2:#4a443b; --doux:#7a7264; --accent:#c4502e; --accent2:#2b6e6a; --trait:#e3dbca; --pilule-fond:#fdeee9; --pilule-txt:#c4502e; --pilule-bord:#e8c4b8; --retenir-fond:#f3ede0; --retenir-bord:#2b6e6a; --retenir-txt:#2b6e6a; --radius:6px; --radius-card:10px; --f-titre:'Fraunces',serif; --f-corps:'Inter',sans-serif; --f-ui:'Inter',sans-serif; --ombre:0 2px 0 var(--trait),0 28px 50px -34px rgba(35,32,28,.4); --motif:radial-gradient(var(--fond-motif) .5px,transparent .5px); --motif-size:22px 22px; } /* B — App sombre */ html[data-theme="B"]{ --fond:#0f1420; --fond-motif:transparent; --surface:#171d2c; --surface2:#1e2638; --encre:#e8ecf4; --encre2:#cdd5e6; --doux:#9aa6bd; --accent:#5b8cff; --accent2:#3dd7c4; --trait:#2a3346; --pilule-fond:rgba(61,215,196,.12); --pilule-txt:#3dd7c4; --pilule-bord:rgba(61,215,196,.25); --retenir-fond:rgba(91,140,255,.08); --retenir-bord:#5b8cff; --retenir-txt:#5b8cff; --radius:14px; --radius-card:20px; --f-titre:'Plus Jakarta Sans',sans-serif; --f-corps:'Plus Jakarta Sans',sans-serif; --f-ui:'Plus Jakarta Sans',sans-serif; --ombre:0 20px 50px -30px rgba(0,0,0,.8); --motif:radial-gradient(900px 400px at 80% -5%,rgba(91,140,255,.16),transparent),radial-gradient(700px 350px at 0% 10%,rgba(61,215,196,.10),transparent); --motif-size:auto; } /* C — Livre sombre */ html[data-theme="C"]{ --fond:#1c1a17; --fond-motif:#2a2722; --surface:#26231e; --surface2:#2f2b25; --encre:#ece6d8; --encre2:#cfc8b8; --doux:#9c9382; --accent:#e0744f; --accent2:#4fb0a8; --trait:#3a352d; --pilule-fond:rgba(224,116,79,.14); --pilule-txt:#e0744f; --pilule-bord:rgba(224,116,79,.3); --retenir-fond:rgba(79,176,168,.08); --retenir-bord:#4fb0a8; --retenir-txt:#4fb0a8; --radius:6px; --radius-card:10px; --f-titre:'Fraunces',serif; --f-corps:'Inter',sans-serif; --f-ui:'Inter',sans-serif; --ombre:0 2px 0 var(--trait),0 28px 50px -34px rgba(0,0,0,.6); --motif:radial-gradient(var(--fond-motif) .5px,transparent .5px); --motif-size:22px 22px; } /* D — App claire (dérivé de B en lumineux) */ html[data-theme="D"]{ --fond:#eef2fb; --fond-motif:transparent; --surface:#ffffff; --surface2:#f4f7ff; --encre:#1b2336; --encre2:#3a4866; --doux:#6b7894; --accent:#3b66e0; --accent2:#10a99a; --trait:#dde4f2; --pilule-fond:rgba(16,169,154,.10); --pilule-txt:#0c8d80; --pilule-bord:rgba(16,169,154,.28); --retenir-fond:rgba(59,102,224,.07); --retenir-bord:#3b66e0; --retenir-txt:#3b66e0; --radius:14px; --radius-card:20px; --f-titre:'Plus Jakarta Sans',sans-serif; --f-corps:'Plus Jakarta Sans',sans-serif; --f-ui:'Plus Jakarta Sans',sans-serif; --ombre:0 18px 44px -28px rgba(27,35,54,.35); --motif:radial-gradient(900px 400px at 80% -5%,rgba(59,102,224,.10),transparent),radial-gradient(700px 350px at 0% 10%,rgba(16,169,154,.08),transparent); --motif-size:auto; } /* E — Sépia lecture */ html[data-theme="E"]{ --fond:#ece1cc; --fond-motif:transparent; --surface:#f4ecda; --surface2:#e8dcc2; --encre:#4a3f2e; --encre2:#5c5038; --doux:#8a7a5e; --accent:#9a6a3a; --accent2:#6b7a4a; --trait:#d8c9a8; --pilule-fond:rgba(154,106,58,.12); --pilule-txt:#9a6a3a; --pilule-bord:rgba(154,106,58,.3); --retenir-fond:rgba(107,122,74,.10); --retenir-bord:#6b7a4a; --retenir-txt:#5c6a3e; --radius:8px; --radius-card:12px; --f-titre:'Fraunces',serif; --f-corps:'Fraunces',serif; --f-ui:'Inter',sans-serif; --ombre:0 2px 0 var(--trait),0 20px 40px -30px rgba(74,63,46,.4); --motif:none; --motif-size:auto; } /* F — Cahier coloré */ html[data-theme="F"]{ --fond:#fef6f9; --fond-motif:#f6d9e4; --surface:#ffffff; --surface2:#fff0f5; --encre:#2d2640; --encre2:#4a4063; --doux:#8a7fa6; --accent:#e5447f; --accent2:#7c4dff; --trait:#f1dce6; --pilule-fond:rgba(124,77,255,.10); --pilule-txt:#7c4dff; --pilule-bord:rgba(124,77,255,.28); --retenir-fond:rgba(229,68,127,.08); --retenir-bord:#e5447f; --retenir-txt:#e5447f; --radius:16px; --radius-card:22px; --f-titre:'Plus Jakarta Sans',sans-serif; --f-corps:'Plus Jakarta Sans',sans-serif; --f-ui:'Plus Jakarta Sans',sans-serif; --ombre:0 16px 40px -26px rgba(229,68,127,.4); --motif:radial-gradient(var(--fond-motif) 1px,transparent 1px); --motif-size:26px 26px; } /* G — Accessibilité / dyslexie */ html[data-theme="G"]{ --fond:#ffffdd; --fond-motif:transparent; --surface:#ffffff; --surface2:#fbfbe8; --encre:#000000; --encre2:#1a1a1a; --doux:#333333; --accent:#0046d5; --accent2:#006b3c; --trait:#000000; --pilule-fond:#e8efff; --pilule-txt:#0046d5; --pilule-bord:#0046d5; --retenir-fond:#eafff0; --retenir-bord:#006b3c; --retenir-txt:#006b3c; --radius:8px; --radius-card:10px; --f-titre:'OpenDyslexic','Comic Sans MS','Inter',sans-serif; --f-corps:'OpenDyslexic','Comic Sans MS','Inter',sans-serif; --f-ui:'OpenDyslexic','Comic Sans MS','Inter',sans-serif; --ombre:0 0 0 2px var(--trait); --motif:none; --motif-size:auto; } /* OpenDyslexic chargé via CDN si le thème G est actif (déclaré plus bas) */ /* ============================================================ BASE ============================================================ */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--fond); background-image:var(--motif); background-size:var(--motif-size); color:var(--encre); font-family:var(--f-corps); line-height:1.68; -webkit-font-smoothing:antialiased; transition:background-color .25s ease,color .25s ease; } a{color:inherit} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* Police dyslexie (chargée seulement quand utile, mais déclarée globalement) */ @font-face{ font-family:'OpenDyslexic'; src:url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Regular.woff') format('woff'); font-weight:400;font-display:swap; } @font-face{ font-family:'OpenDyslexic'; src:url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Bold.woff') format('woff'); font-weight:700;font-display:swap; } [data-theme="G"] body{line-height:1.9;letter-spacing:.02em;word-spacing:.12em} /* ============================================================ BARRE SUPÉRIEURE ============================================================ */ .mn-top{ position:sticky;top:0;z-index:40; display:flex;align-items:center;gap:13px; padding:13px 24px; background:color-mix(in srgb,var(--fond) 86%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--trait); } .mn-logo{ width:32px;height:32px;border-radius:9px; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:grid;place-items:center;font-weight:800;color:#fff;font-size:17px; font-family:var(--f-ui);flex:none; } .mn-top b{font-family:var(--f-titre);font-weight:600;font-size:16px} .mn-top .mn-spacer{margin-left:auto} /* --- L'en-tête qui s'efface pendant la lecture (assets/entete.js) --- Elle reste STICKY : elle garde sa place dans le flux, et on se contente de la faire glisser hors de l'écran. Passer en `fixed` obligerait à compenser sa hauteur partout, et casserait l'impression. Le script ne la masque jamais en haut de page — c'est là que la case qu'elle occupe dans le flux serait visible. */ .mn-top{transition:transform .28s ease, opacity .28s ease} .mn-top-cache{transform:translateY(-100%);opacity:0} @media (prefers-reduced-motion:reduce){ .mn-top{transition:none} } @media print{ .mn-top{transform:none;opacity:1} } /* Bouton thème */ .mn-theme-btn{ font-family:var(--f-ui);font-size:13px;font-weight:600; background:var(--surface);color:var(--encre); border:1px solid var(--trait);border-radius:999px; padding:7px 14px;cursor:pointer;display:flex;align-items:center;gap:7px; transition:.15s; } .mn-theme-btn:hover{border-color:var(--accent);transform:translateY(-1px)} .mn-theme-menu{ position:absolute;top:54px;right:24px;z-index:50; background:var(--surface);border:1px solid var(--trait); border-radius:14px;padding:8px;min-width:230px; box-shadow:var(--ombre);display:none; } .mn-theme-menu.open{display:block;animation:mn-pop .18s ease} @keyframes mn-pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .mn-theme-opt{ display:flex;align-items:center;gap:11px;width:100%; font-family:var(--f-ui);font-size:14px;text-align:left; background:none;border:0;color:var(--encre); padding:9px 11px;border-radius:9px;cursor:pointer;transition:.12s; } .mn-theme-opt:hover{background:var(--surface2)} .mn-theme-opt.actif{background:var(--surface2);font-weight:700} .mn-swatch{width:22px;height:22px;border-radius:6px;border:1px solid var(--trait);flex:none} .mn-theme-opt small{margin-left:auto;color:var(--doux);font-size:11px} /* ============================================================ CONTENU ============================================================ */ .mn-wrap{max-width:780px;margin:32px auto;padding:0 18px} .mn-fil{ font-family:var(--f-ui);font-size:12.5px;color:var(--doux);font-weight:500; margin-bottom:16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap; } .mn-fil .sep{opacity:.45;color:var(--accent)} .mn-fil a{text-decoration:none} .mn-fil a:hover{color:var(--accent)} /* La feuille de lecture */ .mn-feuille{ background:var(--surface); border:1px solid var(--trait); border-radius:var(--radius-card); padding:48px 54px; box-shadow:var(--ombre); position:relative; } /* filet d'accent à gauche pour les thèmes "livre" */ [data-theme="A"] .mn-feuille::before, [data-theme="C"] .mn-feuille::before, [data-theme="E"] .mn-feuille::before{ content:"";position:absolute;left:0;top:28px;bottom:28px;width:3px; background:var(--accent);border-radius:0 3px 3px 0; } .mn-pilule{ display:inline-flex;align-items:center;gap:6px; font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.03em; text-transform:uppercase;color:var(--pilule-txt); background:var(--pilule-fond);border:1px solid var(--pilule-bord); border-radius:999px;padding:4px 12px;margin-bottom:16px; } .mn-h1{font-family:var(--f-titre);font-weight:700;font-size:32px;line-height:1.2;margin-bottom:6px} .mn-sous{font-family:var(--f-titre);color:var(--doux);font-size:17px;margin-bottom:26px} [data-theme="A"] .mn-sous,[data-theme="C"] .mn-sous,[data-theme="E"] .mn-sous{font-style:italic} /* ---------- BLOCS DE CONTENU ---------- */ .mn-bloc{margin:0 0 18px} .mn-bloc p{font-size:17px;color:var(--encre2);margin:0 0 16px} /* `` dans le contenu : le minutage sous un titre de partie, la fiche d'un verbe directeur, une précision de bas de bloc. Le `small` du navigateur ne retire que 17 % — trop peu pour que l'œil saute la ligne et aille au texte (demande de Djamil, 27/08). ⚠️ Une seule règle ici plutôt qu'une classe posée bloc par bloc : le prochain texte écrit dans l'éditeur en hérite sans qu'on y pense. */ .mn-bloc small, .mn-encadre small, .mn-acc-corps small{ font-size:.66em; line-height:1.55; } /* La ligne de SOURCE d'un document : c'est toujours le dernier paragraphe de l'encadré. Moitié moins que le corps — on doit pouvoir la vérifier, pas la lire. Elle se reconnaît à sa place, donc une source écrite dans l'éditeur la reçoit aussi, sans classe à poser. */ .mn-encadre p:last-child small{ font-size:.5em; color:var(--doux); letter-spacing:.02em; } .mn-bloc p b,.mn-bloc strong{color:var(--encre);font-weight:600} .mn-bloc h2{font-family:var(--f-titre);font-size:23px;margin:28px 0 10px;color:var(--encre)} .mn-bloc h3{font-family:var(--f-titre);font-size:19px;margin:22px 0 8px;color:var(--encre)} .mn-bloc ul,.mn-bloc ol{margin:0 0 16px;padding-left:24px} .mn-bloc li{font-size:17px;color:var(--encre2);margin:6px 0} .mn-mark{color:var(--accent);font-weight:600} .mn-img{margin:22px 0} .mn-img img{max-width:100%;border-radius:var(--radius);border:1px solid var(--trait);display:block} .mn-img figcaption{font-family:var(--f-ui);font-size:13px;color:var(--doux);margin-top:8px;text-align:center} /* --- L'habillage : le texte coule autour de l'image --- C'est ce qui fait gagner le plus de place sur une page imprimée : une image pleine largeur coûte un tiers de feuille, la même en habillage n'en coûte aucune. Posé par `habillage: "gauche" | "droite"` dans le bloc. */ .mn-img-hab{width:min(44%,330px);margin:6px 0 14px} .mn-img-hab-g{float:left;margin-right:22px} .mn-img-hab-d{float:right;margin-left:22px} .mn-img-hab figcaption{text-align:left;font-size:12.5px;line-height:1.4} /* Le bloc qui suit une image habillée ne doit pas s'y glisser en dessous à moitié : chaque bloc de niveau titre repart sous l'habillage. */ .mn-bloc h2,.mn-bloc h3,.mn-encadre,.mn-tabs,.mn-accordeon,.mn-cnums, .mn-grille,.mn-stepper,.mn-table{clear:both} @media(max-width:700px){ /* En dessous, un habillage laisse deux mots par ligne : on repasse en pleine largeur plutôt que de rendre le texte illisible. */ .mn-img-hab{float:none;width:100%;margin:18px 0} .mn-img-hab figcaption{text-align:center} } @media print{ .mn-img-hab{width:38%} } .mn-media{margin:22px 0} .mn-media video,.mn-media iframe{width:100%;border:0;border-radius:var(--radius);aspect-ratio:16/9;background:#000} .mn-audio{width:100%;margin:18px 0} .mn-cite{ margin:24px 0;padding:16px 22px;border-left:3px solid var(--accent); background:var(--surface2);border-radius:0 var(--radius) var(--radius) 0; font-family:var(--f-titre);font-size:18px;color:var(--encre); } [data-theme="A"] .mn-cite,[data-theme="C"] .mn-cite,[data-theme="E"] .mn-cite{font-style:italic} /* Encadrés (à retenir / cas / document) */ .mn-encadre{ margin:24px 0;padding:18px 22px;border-radius:var(--radius); background:var(--retenir-fond);border:1px solid var(--trait); border-left:3px solid var(--retenir-bord);position:relative; } .mn-encadre .t{ font-family:var(--f-ui);font-size:12px;text-transform:uppercase;letter-spacing:.07em; color:var(--retenir-txt);font-weight:700;margin-bottom:6px; } .mn-encadre p{font-size:15.5px;margin:0 0 8px;color:var(--encre2)} .mn-encadre p:last-child{margin-bottom:0} .mn-sep{height:1px;background:var(--trait);border:0;margin:28px 0} .mn-table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px} .mn-table th,.mn-table td{border:1px solid var(--trait);padding:9px 12px;text-align:left} .mn-table th{background:var(--surface2);font-family:var(--f-ui);font-weight:600;color:var(--encre)} .mn-table td{color:var(--encre2)} /* ---------- BLOC JEU INTERACTIF ---------- */ .mn-jeu{ margin:26px 0;border:1px solid var(--trait);border-radius:var(--radius-card); overflow:hidden;background:var(--surface2); } .mn-jeu-tete{ display:flex;align-items:center;gap:10px;padding:13px 18px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,transparent),transparent); border-bottom:1px solid var(--trait); } .mn-jeu-tete .ico{font-size:18px} .mn-jeu-tete b{font-family:var(--f-ui);font-size:14px;color:var(--encre)} .mn-jeu-tete .tag{ margin-left:auto;font-family:var(--f-ui);font-size:11px;font-weight:600; color:var(--accent);background:var(--pilule-fond);border:1px solid var(--pilule-bord); border-radius:999px;padding:3px 9px; } .mn-jeu-corps{padding:18px} .mn-jeu iframe{width:100%;border:0;border-radius:var(--radius);min-height:420px;background:var(--surface)} /* version imprimée du jeu : QR de remplacement */ .mn-jeu-print{display:none;text-align:center;padding:24px} .mn-jeu-print img{width:160px;height:160px} .mn-jeu-print .lbl{font-family:var(--f-ui);font-size:13px;color:var(--encre2);margin-top:10px} /* ---------- NAVIGATION BAS DE PAGE ---------- */ .mn-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px} .mn-nav a{ text-decoration:none;background:var(--surface);border:1px solid var(--trait); border-radius:var(--radius);padding:14px 18px;color:var(--encre); font-family:var(--f-ui);font-size:14px;transition:.18s; } .mn-nav a:hover{border-color:var(--accent);transform:translateY(-2px)} .mn-nav .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--doux);display:block;margin-bottom:3px} .mn-nav .r{text-align:right} .mn-nav .vide{visibility:hidden} .mn-pied{ font-family:var(--f-ui);text-align:center;color:var(--doux);font-size:12px;margin:24px 0 50px; display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap; } .mn-pied .qr-link{ display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--accent); border:1px solid var(--trait);border-radius:999px;padding:6px 12px; } /* ---------- CARTES (accueil / sommaires) ---------- */ .mn-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .mn-card{ display:block;text-decoration:none;color:var(--encre); background:var(--surface);border:1px solid var(--trait); border-radius:var(--radius-card);padding:22px;transition:.18s;position:relative;overflow:hidden; } .mn-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--ombre)} .mn-card .ico{font-size:26px;margin-bottom:10px} .mn-card .titre{font-family:var(--f-titre);font-weight:600;font-size:18px;margin-bottom:4px} /* La matière, sous le titre du manuel : deux manuels d'une même matière portent des titres différents, et c'est le titre qui les distingue. */ .mn-biblio-mat{font-family:var(--f-ui);font-size:12.5px;font-weight:600; color:var(--doux);letter-spacing:.02em;margin:-2px 0 4px} .mn-card .desc{font-family:var(--f-ui);font-size:13px;color:var(--doux)} .mn-card .num{ position:absolute;top:14px;right:16px;font-family:var(--f-titre);font-weight:700; font-size:30px;color:var(--trait); } .mn-card.lock{opacity:.55} .mn-card.lock::after{content:"🔒";position:absolute;top:16px;right:18px;font-size:18px} .mn-theme-titre{ font-family:var(--f-titre);font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase; color:var(--accent2);margin:38px 0 4px;padding-bottom:8px; border-bottom:2px solid var(--trait); } .mn-theme-titre:first-of-type{margin-top:8px} .mn-section-titre{ font-family:var(--f-titre);font-weight:700;font-size:22px;margin:30px 0 14px; display:flex;align-items:center;gap:10px; } .mn-section-titre .puce{width:8px;height:22px;border-radius:3px;background:var(--accent)} /* ---------- BLOC COLONNES (responsive) ---------- */ .mn-cols{display:grid;gap:20px;margin:22px 0} .mn-cols-2{grid-template-columns:1fr 1fr} .mn-cols-3{grid-template-columns:1fr 1fr 1fr} .mn-col>.mn-bloc:first-child,.mn-col>*:first-child{margin-top:0} /* Colonnes INÉGALES — un texte d'un côté, une image de l'autre. À largeurs égales, le texte s'étire sur des lignes trop longues et l'image occupe une demi-page qu'elle ne mérite pas (demande de Djamil, 27/08). Elles se CENTRENT verticalement : deux colonnes de hauteurs différentes alignées en haut laissent un vide sous la plus courte, et c'est ce vide qu'on voit avant le contenu. */ .mn-cols-6040{grid-template-columns:1.5fr 1fr} .mn-cols-4060{grid-template-columns:1fr 1.5fr} .mn-cols-7030{grid-template-columns:2.33fr 1fr} .mn-cols-3070{grid-template-columns:1fr 2.33fr} .mn-cols-6040,.mn-cols-4060,.mn-cols-7030,.mn-cols-3070{align-items:center;gap:24px} /* dans une colonne, l'image occupe toute la largeur : elle n'a plus à flotter, et un habillage résiduel la sortirait de sa case */ .mn-col .mn-img{margin:0;float:none;width:auto;max-width:100%} @media(max-width:680px){ .mn-cols-2,.mn-cols-3, .mn-cols-6040,.mn-cols-4060,.mn-cols-7030,.mn-cols-3070{grid-template-columns:1fr} } /* ---------- IMPRESSION A4 ---------- */ @media print{ /* La marge est fixée plus bas, une seule fois (12,7 mm). La déclarer ici aussi n'avait aucun effet — la règle suivante gagnait — mais donnait à croire le contraire à qui la modifiait. */ @page{size:A4} body{background:#fff!important;background-image:none!important;color:#000} .mn-top,.mn-nav,.mn-theme-menu,.mn-pied .qr-link{display:none!important} .mn-feuille{box-shadow:none;border:none;padding:0;border-radius:0} .mn-feuille::before{display:none} .mn-wrap{margin:0;max-width:none} .mn-jeu iframe,.mn-jeu-corps>:not(.mn-jeu-print){display:none!important} .mn-jeu-print{display:block!important} .mn-jeu{break-inside:avoid;border:1px solid #999} .mn-img,.mn-encadre,.mn-cite,.mn-table{break-inside:avoid} .mn-cols-2,.mn-cols-3{grid-template-columns:1fr 1fr} /* à l'impression, on garde les proportions : c'est là qu'elles servent le plus, une feuille A4 ne se recompose pas */ .mn-cols-6040{grid-template-columns:1.5fr 1fr} .mn-cols-4060{grid-template-columns:1fr 1.5fr} .mn-cols-7030{grid-template-columns:2.33fr 1fr} .mn-cols-3070{grid-template-columns:1fr 2.33fr} .mn-cols{break-inside:avoid} /* Filet de sécurité si le JS d'impression n'a pas tourné : on force l'ouverture des dépliables. Le JS reste la voie principale — lui seul ouvre AVANT la mesure des hauteurs, donc lui seul évite un contenu qui déborde de la feuille. */ .mn-feuille details{display:block} .mn-feuille details>*{display:revert!important} .mn-acc-head .mn-acc-fleche{display:none} a{color:#000;text-decoration:none} .mn-h1{font-size:24pt} } @media(max-width:560px){ .mn-feuille{padding:28px 22px} .mn-h1{font-size:25px} .mn-nav{grid-template-columns:1fr} .mn-theme-menu{right:12px;left:12px} } /* Image générée par IA */ .mn-img-auto img{ width:100%; height:auto; border-radius:10px; display:block; background:#eef1f6; } .mn-img figcaption{ font-size:13px; color:#6a7585; text-align:center; margin-top:6px; } .mn-img-ia{ display:inline-block; font-size:11px; color:#8a7; background:#eef7ee; border:1px solid #d7ead7; border-radius:10px; padding:1px 7px; vertical-align:middle; } /* Acronymes du glossaire (développés au survol) */ .mn-abbr{ border-bottom:1px dotted #5b8cff; cursor:help; text-decoration:none; position:relative; } .mn-abbr:hover{ background:#eef3ff; } /* bulle desktop (en plus du title natif) */ @media (hover:hover){ .mn-abbr::after{ content:attr(title); position:absolute; left:50%; bottom:135%; transform:translateX(-50%) scale(.96); background:#2b3447; color:#fff; font-size:12px; font-weight:500; line-height:1.3; white-space:normal; width:max-content; max-width:240px; padding:6px 10px; border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.18); opacity:0; pointer-events:none; transition:opacity .12s, transform .12s; z-index:50; text-align:center; } .mn-abbr:hover::after{ opacity:1; transform:translateX(-50%) scale(1); } } /* Accordéon « une question de corrigé » (rendu lecteur) */ .mn-corrige-q{ border:1px solid var(--trait, #e3e7ee); border-radius:12px; margin:10px 0; background:var(--surface, #fff); overflow:hidden; } .mn-corrige-q + .mn-corrige-q{ margin-top:8px; } .mn-cq-tete{ display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; list-style:none; font-weight:600; user-select:none; } .mn-cq-tete::-webkit-details-marker{ display:none; } .mn-cq-num{ flex:0 0 auto; min-width:26px; height:26px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; background:var(--accent, #2563eb); color:#fff; border-radius:999px; font-size:13px; font-weight:700; } .mn-cq-q{ flex:1 1 auto; } .mn-cq-fleche{ flex:0 0 auto; transition:transform .15s ease; color:var(--doux, #94a3b8); } .mn-corrige-q[open] .mn-cq-fleche{ transform:rotate(90deg); } .mn-cq-corps{ padding:2px 16px 14px; border-top:1px solid var(--trait, #eef1f6); } .mn-cq-corps p{ margin:10px 0; } .mn-cq-corps .mn-table{ margin:8px 0; } /* Écran « corrigé verrouillé » */ .mn-corrige-lock{ text-align:center; } .mn-corrige-lock .mn-h1{ margin-top:6px; } /* Encart « voir le corrigé » sous une page Cas */ .mn-corrige-cta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:18px 0 0; padding:14px 16px; border:1px dashed var(--accent, #2563eb); border-radius:12px; background:rgba(37,99,235,.05); } .mn-corrige-cta .ico{ font-size:20px; } .mn-corrige-cta .txt{ flex:1 1 auto; font-weight:600; } .mn-corrige-cta .mn-btn{ flex:0 0 auto; } /* Impression : tout déplié, sans flèche.
fermé masque son contenu via le UA ; on le ré-affiche au print. */ @media print{ .mn-corrige-q{ break-inside:avoid; } .mn-corrige-q .mn-cq-corps{ display:block !important; } .mn-cq-fleche{ display:none; } } /* Filet de sécurité navigateurs : ouvrir le détail dès qu'on imprime. */ /* Barre du bouton imprimer (écran) */ .mn-print-bar{ display:flex; justify-content:flex-end; margin:-6px 0 18px; } .mn-print-bar .mn-btn-soft{ cursor:pointer; } /* Tout élément marqué .mn-noprint disparaît à l'impression */ /* ============================================================ IMPRESSION — à coller à la fin de assets/manuel.css Bouton + rendu @media print (mise en page papier / PDF) ============================================================ */ /* Barre du bouton imprimer (écran) */ .mn-print-bar{ display:flex; justify-content:flex-end; margin:-6px 0 18px; } .mn-print-bar .mn-btn-soft{ cursor:pointer; } /* Tout élément marqué .mn-noprint disparaît à l'impression */ @media print{ /* Réglages page : marges papier + pas d'en-tête navigateur géant */ @page{ margin:12.7mm; } /* marges étroites facon Word (1,27 cm) */ /* Couleurs fidèles (images, pilules, encadrés) */ *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; } html,body{ background:#fff !important; } /* Masquer le chrome du site et les éléments interactifs */ .mn-noprint, .mn-top, .mn-header, header, nav.mn-mainnav, .mn-mainnav, .mn-fil, .mn-nav, .mn-print-bar, .mn-corrige-cta, .mn-fab, .mn-fabs, .mn-theme-switch, .mn-footer, footer{ display:none !important; } /* La feuille occupe toute la largeur, sans ombre ni cadre */ .mn-wrap{ max-width:none !important; margin:0 !important; padding:0 !important; } .mn-feuille{ box-shadow:none !important; border:none !important; margin:0 !important; padding:0 !important; max-width:none !important; background:#fff !important; } /* Titres : éviter les coupures juste après un titre */ .mn-h1, .mn-feuille h2, .mn-feuille h3{ break-after:avoid; page-break-after:avoid; } .mn-feuille h2, .mn-feuille h3{ break-inside:avoid; } /* Images et encadrés : ne pas couper au milieu. Les tableaux, eux, se coupent proprement entre deux lignes — assets/impression.js répète l'en-tête sur chaque morceau. Les garder d'un bloc envoyait un long tableau sur sa propre feuille en laissant la précédente à moitié vide. */ .mn-feuille img, .mn-encadre, .mn-jeu, .mn-video, figure, .mn-imageia{ break-inside:avoid; page-break-inside:avoid; } .mn-feuille table{ break-inside:auto; page-break-inside:auto; } .mn-feuille tr{ break-inside:avoid; page-break-inside:avoid; } .mn-feuille thead{ display:table-header-group; } /* Une illustration ne doit jamais manger une feuille entière : à l'écran elle occupe la largeur disponible, sur le papier elle prenait une page. On la borne en hauteur, et elle reste centrée. */ .mn-feuille img{ max-width:100% !important; width:auto !important; height:auto !important; max-height:78mm !important; display:block; margin-left:auto; margin-right:auto; } .mn-jeu-print img{ max-height:38mm !important; } /* Corrigés : tout déplier et afficher à l'impression */ details.mn-corrige-q{ break-inside:avoid; } details.mn-corrige-q .mn-cq-corps{ display:block !important; } details.mn-corrige-q > summary{ list-style:none; } details.mn-corrige-q > summary::-webkit-details-marker{ display:none; } /* Liens : ne pas afficher l'URL entre parenthèses (rendu plus propre) */ a[href]:after{ content:"" !important; } /* Confort de lecture papier. 10,5 pt reste large pour un support de cours — c'est la taille d'un manuel scolaire — et fait gagner deux feuilles sur un document de trente blocs. Toute retouche ici doit être reportée dans `.mn-mesure`, plus bas : le banc de mesure décide des coupures, il ne peut pas dire autre chose que l'impression. */ /* `!important` n'est pas un caprice : _layout.php déclare plus loin `.mn-feuille{font-size:calc(1rem * var(--mn-read-scale,1))}`, sans restriction de média et avec la même spécificité — il l'emportait donc jusque sur le papier. Les deux coïncidaient par hasard tant que la taille valait 12 pt ; le bouton A− de la lecture facilitée changeait alors la taille des impressions à l'insu de tout le monde. */ .mn-feuille{ font-size:10.5pt !important; line-height:1.38 !important; color:#111; } .mn-pilule{ border:1px solid #999; } /* Resserrer les espacements : sur neuf feuilles, les blancs entre blocs représentent à eux seuls près d'une page. */ .mn-feuille p{ margin:.45em 0; } .mn-feuille h2{ margin:.7em 0 .35em; } .mn-feuille h3{ margin:.6em 0 .3em; } .mn-feuille ul, .mn-feuille ol{ margin:.4em 0 .4em 1.1em; } .mn-feuille li{ margin:.12em 0; } .mn-bloc{ margin:.5em 0; } .mn-encadre{ padding:.6em .9em; margin:.6em 0; } .mn-table th, .mn-table td{ padding:.32em .5em; } .mn-table{ margin:.5em 0; } } /* ============================================================================ * À AJOUTER dans assets/manuel.css — rendu public des effets d'image * (alignement, wrap filigrane). Les filtres/bords/ombre sont en style inline. * ========================================================================== */ .mn-fig{ margin:1em 0; text-align:center; } .mn-fig-left{ text-align:left; } .mn-fig-right{ text-align:right; } .mn-fig-wrap{ position:relative; display:inline-block; max-width:100%; } .mn-fig img{ max-width:100%; height:auto; } .mn-fig figcaption{ font-size:.9em; color:#7a8194; margin-top:.5em; } .mn-fig-wm{ position:absolute; color:#fff; font-size:13px; font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,.6); padding:2px 6px; pointer-events:none; } /* Bloc schéma / infographie (rendu SVG) */ .mn-schema{margin:1.2rem 0;text-align:center} .mn-schema-svg{max-width:100%;height:auto} @media print{ .mn-schema-svg{max-width:100%} } /* ---- Bloc PDF encapsulé ---- */ .mn-pdf{margin:1.4rem 0} .mn-pdf-titre{font-weight:700;margin:0 0 .5rem;color:var(--encre,#1e2430)} .mn-pdf-cadre{border:1px solid var(--trait,#e6e3db);border-radius:12px;overflow:hidden;background:#f4f2ec} .mn-pdf-actions{margin-top:.5rem} .mn-pdf-lien{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;color:var(--accent2,#2451b3);text-decoration:none} .mn-pdf-lien:hover{text-decoration:underline} .mn-pdf-vide{padding:1.2rem;border:1px dashed var(--trait,#ccc);border-radius:10px;color:var(--doux,#6b6f78);text-align:center} @media print{ .mn-pdf-cadre{height:auto!important;min-height:200px} .mn-pdf-actions{display:none} } /* ============================================================ SAUT DE PAGE ET PAGINATION À L'IMPRESSION ============================================================ */ /* Le saut de page à l'écran : un repère discret, pour que le professeur voie où la feuille se tournera sans que ça alourdisse la lecture. */ .mn-saut{ display:flex; align-items:center; gap:10px; margin:1.6rem 0; color:#b9b3a6; font-size:12px; letter-spacing:.06em; text-transform:uppercase; user-select:none; } .mn-saut::before,.mn-saut::after{ content:""; flex:1; border-top:2px dashed #ded8cc; } .mn-saut span{ white-space:nowrap; } @media print{ /* Le repère lui-même ne s'imprime pas : c'est la coupure qui compte. */ .mn-saut{ display:none !important; } /* Chaque feuille occupe une page A4 en marges étroites et porte son pied. Le dernier `break-after:auto` évite la page blanche finale que provoquerait un `always` sur la dernière feuille. Colonne FLEX, et non `position:relative` + pied en absolu : les feuilles vivent dans `.mn-feuille`, qui est elle-même `position:relative` et fragmentée sur plusieurs pages. Chrome résout alors le bloc conteneur d'un élément absolu sur le PREMIER fragment — les numéros se retrouvaient empilés hors de la zone imprimée, donc invisibles. Dans le flux, il n'y a plus rien à résoudre. */ .mn-feuille-print{ display:flex; flex-direction:column; min-height:268mm; /* 271,6 disponibles, 3,6 de sécurité */ box-sizing:border-box; break-after:page; page-break-after:always; break-inside:auto; } .mn-feuille-print:last-child{ break-after:auto; page-break-after:auto; } /* Le numéro : petit, discret, en bas à droite — comme un pied de page. `margin-top:auto` le pousse au bas de sa feuille, quelle que soit la hauteur du contenu au-dessus. */ .mn-pied-print{ margin-top:auto; padding-top:4mm; text-align:right; font-size:8.5pt; color:#8a8474; letter-spacing:.04em; font-variant-numeric:tabular-nums; break-before:avoid; page-break-before:avoid; } } /* ------------------------------------------------------------ Banc de mesure de la pagination (assets/impression.js) ------------------------------------------------------------ Mesurer les blocs avec les styles de l'ÉCRAN donnait des hauteurs sans rapport avec la feuille : l'iframe d'un bloc « jeu » compte 420 px ici et disparaît là-bas, et le texte n'a pas la même taille. Les pages sortaient au tiers remplies. Cette classe reproduit donc, hors écran, ce que fera l'impression — elle doit suivre le bloc `@media print` ci-dessus. ------------------------------------------------------------ */ .mn-mesure{ font-size:10.5pt !important; line-height:1.38 !important; color:#111; } .mn-mesure p{ margin:.45em 0 !important; } .mn-mesure h2{ margin:.7em 0 .35em !important; } .mn-mesure h3{ margin:.6em 0 .3em !important; } .mn-mesure ul, .mn-mesure ol{ margin:.4em 0 .4em 1.1em !important; } .mn-mesure li{ margin:.12em 0 !important; } .mn-mesure .mn-bloc{ margin:.5em 0 !important; } .mn-mesure .mn-encadre{ padding:.6em .9em !important; margin:.6em 0 !important; } .mn-mesure .mn-table th, .mn-mesure .mn-table td{ padding:.32em .5em !important; } .mn-mesure .mn-table{ margin:.5em 0 !important; } .mn-mesure .mn-noprint, .mn-mesure .mn-jeu iframe, .mn-mesure .mn-jeu-corps > :not(.mn-jeu-print), .mn-mesure .mn-saut, .mn-mesure .mn-corrige-cta{ display:none !important; } .mn-mesure .mn-jeu-print{ display:block !important; text-align:center; padding:24px; } .mn-mesure .mn-jeu-print img{ width:160px; height:160px; max-height:38mm !important; } .mn-mesure img{ max-width:100% !important; width:auto !important; height:auto !important; max-height:78mm !important; display:block; margin-left:auto; margin-right:auto; } .mn-mesure details .mn-cq-corps{ display:block !important; }