/* ============================================================ Cahier de Sciences — style commun à toutes les pages de cours La couleur de matière vient de la classe du : class="m-svt", class="m-pc" ou class="m-maths" ============================================================ */ :root{ --ardoise:#14202B; --encre:#26333F; --encre-pale:#5E6C78; --papier:#F5F7F3; --carte:#FFFFFF; --grille:#E5EBE3; --grille-forte:#CBD6C8; --marge:#B03A31; --or:#D99B2B; --matiere:#2E7D5B; --r:10px; --ombre:0 1px 2px rgba(20,32,43,.05), 0 8px 24px -14px rgba(20,32,43,.28); --display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif; --corps:'Karla',ui-sans-serif,system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; } body.m-svt{--matiere:#2E7D5B} body.m-pc{--matiere:#3956A8} body.m-maths{--matiere:#C25A1E} *{box-sizing:border-box} body{margin:0; color:var(--encre); font-family:var(--corps); font-size:17px; line-height:1.65; background-color:var(--papier); background-image:linear-gradient(var(--grille) 1px,transparent 1px),linear-gradient(90deg,var(--grille) 1px,transparent 1px); background-size:26px 26px} h1,h2,h3,h4{font-family:var(--display); color:var(--ardoise); margin:0; line-height:1.15; letter-spacing:-.015em} p{margin:0 0 1rem} a{color:var(--matiere)} :focus-visible{outline:3px solid var(--or); outline-offset:2px} /* En-tête */ .topbar{position:sticky; top:0; z-index:40; background:rgba(245,247,243,.93); backdrop-filter:blur(8px); border-bottom:1px solid var(--grille-forte)} .topbar .in{max-width:1080px; margin:0 auto; padding:8px 20px; min-height:62px; display:flex; align-items:center; gap:16px; flex-wrap:wrap} @media (max-width:520px){ .topbar .in{gap:8px} .topbar .tag{margin-left:0; width:100%} } .retour{text-decoration:none; color:var(--encre); font-weight:700; font-size:15px} .tag{margin-left:auto; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--matiere); font-weight:600} /* Mise en page */ .page{max-width:1080px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:230px 1fr; gap:44px; align-items:start} @media (max-width:880px){ .page{grid-template-columns:1fr; gap:0} /* replié en haut du cours au lieu d'être supprimé : sur six sections, un élève sur téléphone n'avait aucun moyen de naviguer */ .sommaire{position:static; padding:0; margin:26px 0 0} .sommaire p{margin:0 0 10px} .sommaire-boite{display:flex; flex-wrap:wrap; gap:8px; background:var(--carte); border:1px solid var(--grille-forte); border-radius:var(--r); padding:13px 16px; box-shadow:var(--ombre)} .sommaire a{border-left:0; border:1px solid var(--grille-forte); border-radius:999px; padding:9px 15px; font-size:14px; display:inline-block; min-height:40px; line-height:1.4} .sommaire a:hover{border-color:var(--ardoise)} .corps{padding-top:22px; margin-top:16px} } .sommaire{position:sticky; top:90px; padding-top:52px} .sommaire p{font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--encre-pale); font-weight:600} .sommaire a{display:block; text-decoration:none; color:var(--encre-pale); font-size:14.5px; padding:7px 0 7px 14px; border-left:2px solid var(--grille-forte)} .sommaire a:hover{color:var(--ardoise); border-left-color:var(--marge)} .corps{padding:40px clamp(18px,3vw,38px) 52px; max-width:74ch; background:rgba(255,255,255,.62); border:1px solid rgba(203,214,200,.55); border-radius:14px; margin-block:26px} .eyebrow{font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--marge); font-weight:600; margin-bottom:16px} h1{font-size:clamp(34px,6vw,58px); font-weight:800} .chapeau{font-size:19px; color:var(--encre-pale); margin-top:18px} section{margin-top:52px; scroll-margin-top:96px} section>h2{font-size:27px; font-weight:800; padding-bottom:12px; border-bottom:2px solid var(--ardoise); margin-bottom:22px; display:flex; align-items:baseline; gap:14px} section>h2 .n{font-family:var(--mono); font-size:15px; color:var(--marge); font-weight:600} h3{font-size:19px; margin:28px 0 10px} /* Encadrés */ .cle{background:var(--carte); border:1px solid var(--grille-forte); border-left:3px solid var(--matiere); border-radius:0 var(--r) var(--r) 0; padding:20px 24px; margin:20px 0; box-shadow:var(--ombre)} .cle h4{font-size:13px; font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--matiere); margin-bottom:10px} .cle p:last-child,.cle ol:last-child,.cle ul:last-child{margin-bottom:0} .avis{background:#FDF8EC; border-left:3px solid var(--or); border-radius:0 8px 8px 0; padding:16px 20px; color:#6A4E12; margin:20px 0} .avis p:last-child{margin-bottom:0} .piege{background:#FBEDEC; border-left:3px solid var(--marge); border-radius:0 8px 8px 0; padding:16px 20px; margin:20px 0; color:#7A2A24} .piege p:last-child{margin-bottom:0} .piege b{font-family:var(--display)} .exemple{border:1px dashed var(--grille-forte); border-radius:var(--r); padding:18px 22px; margin:20px 0; background:#FBFCFA} .exemple h4{font-size:13px; font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--encre-pale); margin-bottom:10px} .exemple p:last-child{margin-bottom:0} /* Expérience — spécifique aux sciences expérimentales */ .experience{background:var(--carte); border:1px solid var(--grille-forte); border-radius:var(--r); padding:20px 24px; margin:20px 0; box-shadow:var(--ombre)} .experience h4{font-size:13px; font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--matiere); margin-bottom:14px} .experience dl{margin:0} .experience dt{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--encre-pale); font-weight:600; margin-top:12px} .experience dt:first-child{margin-top:0} .experience dd{margin:3px 0 0} /* Exercices repliables */ details{background:var(--carte); border:1px solid var(--grille-forte); border-radius:var(--r); padding:14px 20px; margin:12px 0} details summary{cursor:pointer; font-weight:700; font-family:var(--display); color:var(--ardoise); list-style:none; display:flex; justify-content:space-between; gap:12px} details summary::-webkit-details-marker{display:none} details summary::after{content:"Voir la correction"; font-family:var(--mono); font-size:12px; color:var(--matiere); font-weight:600; white-space:nowrap; letter-spacing:.04em} details[open] summary::after{content:"Masquer"} details .rep{margin-top:14px; padding-top:14px; border-top:1px solid var(--grille)} details .rep p:last-child{margin-bottom:0} /* Contenus */ /* ---- SCHÉMAS ---- SVG écrit à la main dans le fichier du cours : léger, net à toute taille, imprimable, modifiable au texte. Les couleurs viennent de la charte, mais aucune information ne repose sur la couleur seule — tout est légendé, pour rester lisible sur une photocopie en noir et blanc. */ .illus{margin:28px 0; background:var(--carte); border:1px solid var(--grille-forte); border-radius:var(--r); padding:14px 14px 12px; box-shadow:var(--ombre)} .illus img{display:block; width:100%; height:auto; border-radius:6px} .illus figcaption{margin-top:12px; padding-top:11px; border-top:1px solid var(--grille); font-size:14px; color:var(--encre-pale); text-align:center} .illus .credit{display:block; margin-top:6px; font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--encre-pale); opacity:.85} @media print{ .illus{break-inside:avoid; box-shadow:none} } .schema{margin:28px 0; background:var(--carte); border:1px solid var(--grille-forte); border-radius:var(--r); padding:22px 20px 14px; box-shadow:var(--ombre)} .schema svg{display:block; width:100%; height:auto; overflow:hidden} .schema figcaption{margin-top:14px; padding-top:12px; border-top:1px solid var(--grille); font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--encre-pale); text-align:center; font-weight:600} .schema text{font-family:var(--corps); font-size:14px; fill:var(--encre); paint-order:stroke; stroke:var(--carte); stroke-width:4px; stroke-linejoin:round} .schema .num{font-family:var(--mono); font-size:13px; font-weight:600; fill:#fff} .schema .rond{fill:var(--matiere)} .schema .trait{fill:none; stroke:var(--ardoise); stroke-width:2; stroke-linejoin:round} .schema .fleche{fill:none; stroke:var(--matiere); stroke-width:2.5; stroke-linecap:round} .schema .leger{fill:none; stroke:var(--encre-pale); stroke-width:1.5; stroke-dasharray:5 4} .schema .sol{fill:#EEF2EC; stroke:var(--ardoise); stroke-width:2} .schema .eau{fill:#DCE7F2; stroke:none} .schema .roche{fill:#D8DDD6; stroke:none} .schema .nuage{fill:#F0F3F6; stroke:var(--ardoise); stroke-width:1.8} .schema .cote{fill:none; stroke:var(--encre-pale); stroke-width:1.4} .schema .rayon{fill:none; stroke:var(--matiere); stroke-width:1.4; opacity:.55} .schema .titre-bloc{font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:600; fill:var(--encre-pale)} .schema .etiq{font-size:13px; fill:var(--encre-pale)} .schema .fort{font-weight:700; fill:var(--ardoise)} @media (max-width:520px){ .schema text{font-size:16px} .schema .cote{fill:none; stroke:var(--encre-pale); stroke-width:1.4} .schema .rayon{fill:none; stroke:var(--matiere); stroke-width:1.4; opacity:.55} .schema .titre-bloc{font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:600; fill:var(--encre-pale)} .schema .etiq{font-size:15px} } dl.lexique{margin:20px 0; border-top:1px solid var(--grille)} dl.lexique dt{font-family:var(--display); font-weight:700; color:var(--ardoise); padding-top:14px; font-size:17px} dl.lexique dd{margin:2px 0 14px; color:var(--encre-pale); border-bottom:1px solid var(--grille); padding-bottom:14px} table{width:100%; border-collapse:collapse; margin:20px 0; font-size:15.5px; background:var(--carte); border:1px solid var(--grille-forte); border-radius:var(--r); overflow:hidden} th{background:#F1F4EF; text-align:left; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--encre-pale); padding:12px 14px; font-weight:600} td{padding:13px 14px; border-top:1px solid var(--grille); vertical-align:middle} ul.puces{list-style:none; padding:0; margin:16px 0} ul.puces li{position:relative; padding:6px 0 6px 26px} ul.puces li::before{content:"—"; position:absolute; left:0; color:var(--marge)} ol{padding-left:22px} ol li{padding:5px 0} /* Mathématiques */ .frac{display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; font-family:var(--mono); line-height:1.2; margin:0 3px; font-size:.94em} .frac s{text-decoration:none; border-bottom:1.6px solid currentColor; padding:0 5px 1px} .frac u{text-decoration:none; padding:1px 5px 0} .calc{font-family:var(--mono); background:var(--carte); border:1px solid var(--grille-forte); border-radius:8px; padding:14px 18px; margin:16px 0; display:block; overflow-x:auto; font-size:15.5px} .calc em{font-style:normal; color:var(--encre-pale); font-family:var(--corps)} .ensembles{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--mono); font-size:19px; background:var(--carte); border:1px solid var(--grille-forte); border-radius:var(--r); padding:18px 22px; margin:20px 0; justify-content:center} .ensembles b{color:var(--matiere); font-size:24px} .ensembles span{color:var(--encre-pale)} /* Blocs colorés (règle ABE, mémos) */ .trio{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:22px 0} @media (max-width:640px){ .trio{grid-template-columns:1fr} } .trio div{background:var(--ardoise); color:#fff; border-radius:var(--r); padding:20px} .trio b{font-family:var(--display); font-size:40px; font-weight:800; display:block; line-height:1} .trio span{display:block; font-weight:700; margin-top:8px} .trio small{color:#A9B6BF; display:block; margin-top:4px} /* Échelle graduée */ .echelle{display:grid; gap:8px; margin:20px 0} .echelle div{display:grid; grid-template-columns:78px 1fr; gap:14px; align-items:center; background:var(--carte); border:1px solid var(--grille-forte); border-radius:8px; padding:11px 14px} .echelle b{font-family:var(--mono); font-size:14px; text-align:center; border-radius:5px; padding:4px 0; color:#fff} .n1{background:#9AA6A0} .n2{background:#C9A227} .n3{background:#D98324} .n4{background:#C2542B} .n5{background:#A32E22} /* Pied de page et boutons */ .actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:36px} .btn{display:inline-flex; align-items:center; gap:9px; background:var(--ardoise); color:#fff; border:1.5px solid var(--ardoise); padding:11px 20px; border-radius:8px; font-weight:700; text-decoration:none; font-size:15px; cursor:pointer; font-family:var(--corps)} .btn.creux{background:transparent; color:var(--ardoise)} footer{border-top:1px solid var(--grille-forte); margin-top:50px; padding:28px 20px 60px; text-align:center; color:var(--encre-pale); font-size:14.5px} @media print{ .topbar,.sommaire,.actions,footer{display:none !important} body{background:#fff; font-size:11.5pt} .page{display:block} .corps{padding:0; max-width:none} section{break-inside:avoid} .cle,.avis,.piege,table,.calc,.experience{box-shadow:none} details{border:1px solid #ccc} details[open] summary::after{content:""} } @media (prefers-reduced-motion:reduce){*{transition:none !important}}