/* CHARTE TRPM — feuille de style commune à tous les cours. Référence : charte/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} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* téléphone : pas d'agrandissement automatique du texte */ 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,.mode-presentation .barre #btn-pdf{display:none} .barre #btn-pdf{display:inline-flex;align-items:center;justify-content:center;padding:3px 7px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:3px;text-decoration:none} .barre #btn-pdf:hover{background:var(--tint)} .barre #btn-pdf:focus-visible{outline:2px solid var(--navy);outline-offset:2px} .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 .droite .grp{flex-wrap:wrap;justify-content:inherit} .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}} /* téléphone : le titre passe sous le bouton retour, zoom et versions centrés, pas d'impression */ @media (max-width:700px){ .barre{justify-items:center;text-align:center} .barre .gauche{flex-direction:column;gap:6px} .barre .zoom,.barre .droite{justify-content:center} .barre #btn-print{display:none} } /* sur écran tactile, le pincement zoome les feuilles (commun/cours.js), jamais la barre ni la page du navigateur */ body.cours .pages{touch-action:pan-x pan-y} .mode-presentation .barre{opacity:.15;transition:opacity .2s} .mode-presentation .barre:hover{opacity:1} /* Vidéos : lecteur hors des feuilles, indépendant du zoom et de la pagination. */ .video-launch{display:none;position:fixed;right:24px;bottom:20px;z-index:20;border:1px solid #d8dce1;border-radius:24px;padding:10px 18px;background:#fffffff2;color:#454b53;box-shadow:0 2px 12px #0000000d;font:500 14px var(--corps);cursor:pointer} .mode-presentation .video-launch{display:block} .video-dialog{width:96vw;max-width:1800px;max-height:94vh;max-height:94dvh;padding:12px;border:1px solid #ffffffb3;border-radius:14px;background:#f9fafbf5;color:#41464d;overflow:auto;box-shadow:0 12px 48px #00000026;font:14px/1.4 var(--corps)} .video-dialog::backdrop{background:#28303a66;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .video-header{display:flex;align-items:center;gap:12px;margin:0 4px 10px} .video-header h2{font:500 14px/1.3 var(--corps);margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .video-counter{color:#7b8189;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums} .video-dialog button{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:7px;border:0;border-radius:50%;background:transparent;color:#646b75;cursor:pointer;transition:background .15s,color .15s} .video-dialog button:hover{background:#e8ebef;color:#22272e} .video-dialog button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .video-dialog .video-close{width:30px;height:30px;padding:6px} .video-dialog .video-close svg{width:18px;height:18px} .video-dialog :focus-visible,.video-launch:focus-visible{outline:2px solid #778596;outline-offset:3px} .video-row{display:flex;align-items:center;gap:8px} .video-stage{display:flex;align-items:center;justify-content:center;background:#000;flex:1;min-width:0;height:min(72vh,54vw);min-height:0;border-radius:6px;overflow:hidden} .video-stage iframe,.video-stage video{display:block;min-width:0;min-height:0;width:100%;height:100%;max-width:100%;max-height:100%;border:0;object-fit:contain} .video-description{font-size:12px;color:#737982;margin:10px 44px 0} .video-error{font-size:13px;color:#ad3030;margin:10px 44px 0} .video-description:empty,.video-error:empty{display:none} .video-dialog [hidden]{display:none!important} @media(max-width:700px){.video-launch{right:12px;bottom:12px}.video-dialog{padding:8px}.video-row{gap:3px}.video-row button{width:28px;height:36px;padding:3px}.video-description,.video-error{margin-left:31px;margin-right:31px}} @media print{.video-launch,.video-dialog{display:none!important}} /* ---------- 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;display:grid;align-content:start;justify-content:safe center;align-items:start;overflow-anchor:none;scrollbar-gutter:stable} body.cours .pages>.hold{margin:0} } .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:10pt/14pt 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 8pt/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:var(--libelle-corrige," · Cours corrigé");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 8pt/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:2fr .7fr .9fr;gap:5mm;margin:-2mm 0 4mm;font:600 8pt/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 20pt/23pt var(--titre);margin:0;letter-spacing:.005em} .sheet .titre .meta{margin:3mm 0 0;font-size:9pt;line-height:12.5pt;opacity:.92} .sheet h2{font:700 12pt/15pt var(--titre);color:var(--navy);margin:6mm 0 2.5mm;display:flex;gap:3mm;align-items:baseline} .sheet h2 span{font-size:10.5pt;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 7.5pt/6.4mm 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 .bloc.attention{background:#FCECEB} .sheet .bloc.attention .tab{background:#C8322B;color:#fff} .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 8.5pt/5.4mm var(--titre);width:5.4mm;height:5.4mm;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 8.5pt/5.4mm var(--titre);width:5.4mm;height:5.4mm;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:9.5pt;line-height:13pt} .sheet table.tb th{font:700 7.5pt/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:0;padding:0} .sheet .comp h4{font:700 9.5pt/13pt var(--titre);color:var(--navy);text-transform:uppercase;letter-spacing:.06em;margin:0 0 1.5mm;border-bottom:1.5pt solid var(--navy);padding-bottom: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:8.5pt;line-height:12pt} .sheet .fig .cap p{grid-column:1/-1;margin:0 0 1mm} .sheet .fig .cap p b{font:700 8.5pt 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 8pt 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)} /* Toutes les réponses à écrire : phrases, cases et tableaux ; les exemples déjà montrés gardent leur style. */ .mode-prof .sheet .ans:not(.montre):not(svg){background:var(--amber-tint);box-decoration-break:clone;-webkit-box-decoration-break:clone} .mode-prof .sheet .trou .ans:not(.montre){background:none} .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:9pt;line-height:13pt} .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)} /* ---------- pied à coulisse (commun/pied.js) ---------- */ svg.pied{width:100%;height:auto;display:block;overflow:hidden} svg.pied .pied-txt{font-family:var(--titre)} /* une réponse « montrée » fait partie du cours : visible partout, sauf en présentation où Espace la révèle comme une réponse */ .ans.montre{visibility:visible} .mode-presentation .ans.montre:not(.on){visibility:hidden} .mode-presentation .ans.montre.on{background:none} /* traits de correction sur une figure (data-corrige) : comme une réponse, révélés avec leur case */ svg .corr{visibility:hidden} .mode-prof svg .corr,svg .corr.on{visibility:visible} .mode-presentation .rep.court>span,.mode-presentation td{cursor:pointer} .seul-presentation{display:none} .mode-presentation .seul-presentation{display:flex} .mode-presentation .sheet .bloc.seul-presentation{display:block} /* méthode animée lancée par le bouton « Étape suivante » hors présentation : les étapes non révélées se cachent, à l'écran seulement */ @media screen{.sheet.anime .ans.montre:not(.on){visibility:hidden}} .seul-ecran{display:flex} .sheet .bouton{font:600 9pt var(--corps);padding:1.2mm 3mm;border:.6pt solid var(--navy);background:#fff;color:var(--navy);border-radius:1mm;cursor:pointer} .sheet .bouton:hover{background:var(--navy);color:#fff} /* ---------- 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} .seul-presentation,.seul-ecran{display:none!important} }