/* CHARTE TRPM — feuille de style commune à tous les cours. Référence : CHARTE GRAPHIQUE\CHARTE TRPM.html (direction « les bandeaux », 2026-09-16). Un cours = des feuilles A4 (.sheet) posées dans des .hold ; trois modes sur le : mode-eleve (défaut), mode-prof (réponses et fiche enseignant visibles), mode-presentation (vidéoprojecteur). */ :root{ --ink:#1D1F22; --navy:#1E3A5F; --tint:#EDF1F5; --amber:#D9952B; --amber-tint:#FBF3E3; --rule:#C5CDD6; --ax-x:#C8322B; --ax-y:#2E8B3D; --ax-z:#2456B8; --focus:#0E8A8A; --ground:#E4E7EB; --bar:#F7F8FA; --line:#C9CFD6; --mute:#5B6570; --titre:Bahnschrift,"Barlow","Segoe UI",Arial,sans-serif; --corps:Aptos,"Segoe UI","Source Sans 3",Calibri,sans-serif; } *{box-sizing:border-box} html,body{margin:0} body{background:var(--ground);color:var(--ink);font:14px/1.45 var(--corps)} /* ---------- barre d'outils (écran seulement) ---------- */ .barre{position:sticky;top:0;z-index:10;background:var(--bar);border-bottom:1px solid var(--line);padding:8px 16px;display:grid;grid-template-columns:1fr auto 1fr;gap:6px 14px;align-items:center} .barre .gauche{display:flex;gap:14px;align-items:center;min-width:0} .barre .droite{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:flex-end} .barre #btn-print{display:grid;place-items:center;padding:5px 9px} .mode-presentation .barre #btn-print{display:none} .barre .zoom button#btn-zoom0{min-width:5.2em;font-variant-numeric:tabular-nums} .barre .retour{font:600 13px var(--corps);padding:6px 11px;border:1px solid var(--navy);background:#fff;color:var(--navy);border-radius:3px;text-decoration:none;white-space:nowrap} .barre .retour:hover,.barre .retour:focus-visible{background:var(--navy);color:#fff;outline:none} .barre .titre-doc{font:700 15px/1.2 var(--titre)} .barre .grp{display:flex;gap:4px} .barre button{font:600 13px var(--corps);padding:6px 11px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:3px;cursor:pointer} .barre button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)} .barre button:focus-visible{outline:2px solid var(--navy);outline-offset:2px} @media (max-width:900px){.barre{grid-template-columns:1fr}.barre .droite{justify-content:flex-start}} .mode-presentation .barre{opacity:.15;transition:opacity .2s} .mode-presentation .barre:hover{opacity:1} /* ---------- feuilles ---------- */ .pages{padding:20px 16px 60px;display:flex;flex-direction:column;align-items:flex-start;gap:22px} /* page de cours à l'écran : la barre occupe le haut, les feuilles défilent dessous dans les deux sens (le zoom ne décale jamais la barre) */ @media screen{ body.cours{height:100vh;display:flex;flex-direction:column;overflow:hidden} body.cours .barre{flex:none} body.cours .pages{flex:1;min-height:0;overflow:auto;outline:none} } .hold{width:210mm;min-width:0;overflow:visible;margin:0 auto} .sheet{width:210mm;height:297mm;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18),0 6px 20px rgba(0,0,0,.10);position:relative;overflow:hidden; color:var(--ink);font:10.5pt/15pt var(--corps);padding:13mm 16mm 12mm 18mm;display:flex;flex-direction:column;-webkit-print-color-adjust:exact;print-color-adjust:exact} .sheet *{-webkit-print-color-adjust:exact;print-color-adjust:exact} .sheet.deborde{outline:3px solid #C8322B} .sheet.deborde::after{content:"DÉBORDEMENT : cette page a trop de contenu";position:absolute;left:0;right:0;bottom:0;background:#C8322B;color:#fff;font:700 9pt/7mm var(--titre);text-align:center;text-transform:uppercase;letter-spacing:.1em} .profonly{display:none} .mode-prof .profonly{display:block} /* ---------- typographie et blocs ---------- */ .sheet p{margin:0 0 2.5mm} .sheet p:last-child{margin-bottom:0} .sheet ul,.sheet ol{margin:0;padding-left:5mm} .sheet li{margin:0 0 1mm} .sheet b{font-weight:600} .sheet .head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1.5pt solid var(--navy);padding-bottom:1.2mm;margin-bottom:5mm;font:600 8.5pt/11pt var(--titre);text-transform:uppercase;letter-spacing:.06em;color:var(--navy)} .sheet .head span:last-child{color:var(--ink)} .mode-prof .sheet .head span:last-child::after{content:" · Version professeur";color:var(--amber);font-weight:700} .sheet .foot{position:absolute;left:18mm;right:16mm;bottom:8mm;display:flex;justify-content:space-between;align-items:center;font:600 8.5pt/11pt var(--titre);text-transform:uppercase;letter-spacing:.05em;color:var(--navy)} .sheet .foot .num{background:var(--navy);color:#fff;width:7mm;height:7mm;display:grid;place-items:center;font-size:10pt} .sheet .ident{display:grid;grid-template-columns:1.4fr 1.4fr .7fr;gap:5mm;margin:-2mm 0 4mm;font:600 8.5pt/11pt var(--titre);text-transform:uppercase;letter-spacing:.05em;color:var(--navy)} .sheet .ident span{border-bottom:.5pt dotted var(--rule);padding:1.5mm 0 1mm} .sheet .titre{background:var(--navy);color:#fff;padding:5mm 6mm 5.5mm;margin-bottom:4mm} .sheet .titre .eyebrow{font:600 8.5pt/11pt var(--titre);text-transform:uppercase;letter-spacing:.1em;opacity:.85;margin:0 0 1.5mm} .sheet h1{font:700 21pt/24pt var(--titre);margin:0;letter-spacing:.005em} .sheet .titre .meta{margin:3mm 0 0;font-size:9.5pt;line-height:13pt;opacity:.92} .sheet h2{font:700 13pt/16pt var(--titre);color:var(--navy);margin:6mm 0 2.5mm;display:flex;gap:3mm;align-items:baseline} .sheet h2 span{font-size:11pt;background:var(--navy);color:#fff;padding:0 2mm;line-height:6mm} .sheet .bloc{position:relative;background:var(--tint);padding:4.5mm 5mm 4mm;margin:5.5mm 0 0} .sheet .bloc.plain{background:transparent;padding:0} .sheet .tab{position:absolute;top:-3.4mm;left:0;background:var(--navy);color:#fff;font:700 8pt/6.8mm var(--titre);text-transform:uppercase;letter-spacing:.09em;padding:0 3mm;white-space:nowrap} .sheet .tab.inl{position:static;display:inline-block;margin-bottom:2.5mm} .sheet .bloc.amber{background:var(--amber-tint)} .sheet .bloc.amber .tab{background:var(--amber);color:var(--ink)} .sheet .def{border-left:2.5pt solid var(--navy);padding-left:4mm} .sheet .def b{color:var(--navy)} .sheet .etapes{list-style:none;padding:0;counter-reset:e;margin-top:1mm} .sheet .etapes li{counter-increment:e;display:grid;grid-template-columns:8mm 1fr;margin:0 0 2mm;align-items:start} .sheet .etapes li::before{content:counter(e);background:var(--navy);color:#fff;font:700 9pt/5.6mm var(--titre);width:5.6mm;height:5.6mm;border-radius:50%;text-align:center;margin-top:.4mm} .sheet .q{display:grid;grid-template-columns:8mm 1fr;margin:2mm 0 1.5mm} .sheet .q::before{content:attr(data-n);background:var(--navy);color:#fff;font:700 9pt/5.6mm var(--titre);width:5.6mm;height:5.6mm;border-radius:50%;text-align:center;margin-top:.4mm} .sheet .q .bar{font:700 8pt var(--titre);color:var(--navy);white-space:nowrap;margin-left:2mm} .sheet .rep{background:#fff;border:.5pt solid var(--rule);padding:0 3mm;margin:0 0 3mm 8mm} .sheet .rep i{display:block;min-height:8mm;font-style:normal;line-height:8mm;background-image:linear-gradient(to top,var(--rule) .5pt,transparent .5pt);background-size:100% 8mm;background-position:0 0} .sheet .rep i:last-child{background-image:none} .sheet .rep i .ans{display:inline} .sheet .rep.court{display:grid;grid-template-columns:repeat(3,1fr);gap:4mm;background:transparent;border:0;padding:0} .sheet .rep.court.deux{grid-template-columns:repeat(2,1fr)} .sheet .rep.court span{background:#fff;border:.5pt solid var(--rule);min-height:9mm;padding:1.5mm 2.5mm;font:600 9pt/12pt var(--titre);color:var(--navy)} .sheet .rep.court span .ans{font:600 9pt/12pt var(--corps)} .sheet .rep.croquis{background-color:#fff;background-image:linear-gradient(var(--rule) .3pt,transparent .3pt),linear-gradient(90deg,var(--rule) .3pt,transparent .3pt);background-size:5mm 5mm;padding:0;position:relative;height:42mm} .sheet .rep.croquis svg{position:absolute;inset:0;width:100%;height:100%} .sheet .verif{list-style:none;padding:0;margin:0} .sheet .verif li{display:grid;grid-template-columns:6.5mm 1fr;margin-bottom:1.5mm} .sheet .verif li::before{content:"";width:4mm;height:4mm;border:.8pt solid var(--navy);background:#fff;margin-top:1mm} .sheet .ret ul{list-style:none;padding:0} .sheet .ret li{padding-left:5mm;position:relative;margin-bottom:1.2mm} .sheet .ret li::before{content:"";position:absolute;left:0;top:2mm;width:2.5mm;height:2.5mm;background:var(--amber)} .sheet table.tb{width:100%;border-collapse:collapse;margin:2mm 0 0;font-size:10pt;line-height:13.5pt} .sheet table.tb th{font:700 8pt/11pt var(--titre);text-transform:uppercase;letter-spacing:.06em;color:var(--navy);text-align:left;border-bottom:1pt solid var(--navy);padding:1mm 2mm 1mm 0} .sheet table.tb td{border-bottom:.5pt solid var(--rule);padding:1.5mm 2mm 1.5mm 0;vertical-align:top} /* tableau centré : titres et contenu centrés dans chaque colonne */ .sheet table.tb.centre th,.sheet table.tb.centre td{text-align:center;vertical-align:middle;padding-left:1mm;padding-right:1mm} .sheet .comp{display:grid;grid-template-columns:1fr 1fr;gap:5mm;margin:4mm 0 0} .sheet .comp>div{border-top:1.5pt solid var(--navy);padding-top:1.5mm} .sheet .comp h4{font:700 9.5pt/13pt var(--titre);color:var(--navy);text-transform:uppercase;letter-spacing:.06em;margin:0 0 1.5mm} /* ---------- figures ---------- */ .sheet .fig{margin:5mm 0 0} .sheet .fig .art{display:grid;grid-template-columns:1fr 1fr;gap:4mm} .sheet .fig .art.une{grid-template-columns:1fr} .sheet .fig .art.quatre{grid-template-columns:1fr 1fr 1fr 1fr;gap:3mm} .sheet .fig .cap{display:grid;grid-template-columns:1fr 1fr;gap:1mm 6mm;border-top:1pt solid var(--navy);margin-top:2.5mm;padding-top:1.5mm;font-size:9pt;line-height:12.5pt} .sheet .fig .cap p{grid-column:1/-1;margin:0 0 1mm} .sheet .fig .cap p b{font:700 9pt var(--titre);color:var(--navy);text-transform:uppercase;letter-spacing:.06em;margin-right:2mm} .sheet .fig .leg{list-style:none;padding:0;margin:0} .sheet .fig .leg li{display:grid;grid-template-columns:5.5mm 1fr} .sheet .fig .leg b{font:700 8.5pt var(--titre);color:var(--navy)} .ph{border:.6pt dashed #8E99A4;display:grid;place-items:center;text-align:center;padding:3mm;color:#5B6570;font:600 8.5pt/12pt var(--titre);letter-spacing:.03em;min-height:50mm;background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(0,0,0,.025) 6px 7px)} .ph b{display:block;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1mm;color:#33546F} .ph small{display:block;font-weight:400;letter-spacing:0;margin-top:1.5mm;font-family:var(--corps);font-size:8pt} .ph.h90{min-height:88mm} .ph img{display:block;width:100%;height:auto;border:.5pt solid var(--ink)} .ph.chargee{border:0;padding:0;background:none;display:block;min-height:0} /* calque : repères et axes en SVG posés sur une capture ; viewBox = taille de l'image en pixels ; masqué tant que l'image n'est pas chargée */ .calque{position:relative} .calque>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .calque>.ph:not(.chargee)~svg{display:none} svg.schema{width:100%;height:auto;display:block} .callout{font:600 7.5px var(--titre)} /* ---------- élève / professeur / présentation ---------- */ .sheet .trou{display:inline-block;min-width:16mm;border-bottom:.6pt solid var(--navy);padding:0 1.5mm;line-height:13pt;text-align:center} .sheet .trou.n{min-width:9mm} .ans{visibility:hidden;color:var(--navy);font-weight:600;font-style:normal} .sheet .rep.court span .ans{margin-left:2mm} .mode-prof .ans,.ans.on{visibility:visible} .mode-prof .trou{background:var(--amber-tint)} .sheet .ens{border:.7pt dashed var(--navy);padding:4mm 5mm 3.5mm;margin:5.5mm 0 0;position:relative;background:#fff} .sheet .ens+.ens{margin-top:4mm} .sheet .ens .tab{background:#fff;color:var(--navy);border:.7pt solid var(--navy);line-height:6.2mm} .sheet .ens p{font-size:9.5pt;line-height:13.5pt} .mode-presentation .pages{padding:0;gap:0;align-items:flex-start} .mode-presentation .hold{padding:1vh 0;margin:0 auto} .mode-presentation .hold.profonly{display:none} .mode-presentation .trou,.mode-presentation .rep{cursor:pointer} .mode-presentation .ans.on{background:var(--amber-tint)} /* dans un trou, le fond ambre va sur le trou et pas sur la réponse : sinon il recouvre le trait du dessous */ .mode-presentation .trou .ans.on{background:none} .mode-presentation .trou:has(.ans.on){background:var(--amber-tint)} /* ---------- impression ---------- */ @page{size:A4;margin:0} @media print{ html,body{background:#fff;margin:0;height:auto;overflow:visible} .barre{display:none} .pages{padding:0;gap:0;display:block;height:auto;overflow:visible} .hold{zoom:1!important;width:210mm!important;margin:0;padding:0;display:block} .hold.profonly{display:none} .mode-prof .hold.profonly{display:block} .hold+.hold{page-break-before:always;break-before:page} .sheet{box-shadow:none;outline:none} .sheet.deborde::after{display:none} .mode-presentation .ans:not(.on){visibility:hidden} }