/* ========================================================= SITE PRÉPA — design system « papier / cahier » Thème clair uniquement. Aucune couleur en dur dans les pages : on n'utilise que les tokens ci-dessous. ========================================================= */ :root{ /* --- papier --- */ --ground:#F6F1E7; /* la page : crème */ --surface:#FFFDF8; /* les cartes : papier légèrement plus clair */ --surface-2:#F1EADC; /* zones creuses, pastilles */ --ink:#2B2620; /* l'encre */ --muted:#857A6B; /* encre pâle */ --rule:#E3DACA; /* filets du cahier */ --rule-strong:#CBBFA8; /* --- accent de la page (remplacé par matière) --- */ --accent:#8A5B08; --accent-bg:#F6EEDC; --on-accent:#FFFDF8; /* --- sémantique --- */ --ok:#3F6B3A; --ok-bg:#EAF1E4; --ko:#A63A32; --ko-bg:#FBEAE6; --warn:#8A5B08; --warn-bg:#FAF0DB; /* --- couleur par matière (encre) --- */ --mat:#2F4D8C; --mat-bg:#E7EDF8; --phy:#0F6B75; --phy-bg:#E2F0F0; --chi:#8A3E7A; --chi-bg:#F6E8F2; --sii:#2E6B4A; --sii-bg:#E5F1E8; --inf:#40525E; --inf-bg:#E9EDF0; --ang:#4C3A73; --ang-bg:#EEE9F7; --fra:#8A3030; --fra-bg:#F8E8E5; /* --- surligneurs (mêmes teintes que les fiches bristol) --- */ --hl-bv:#9EE8D8; --hl-j:#FFE873; --hl-o:#FFB066; --hl-r:#FFB3D1; --hl-b:#A6D9FF; --hl-vc:#B6EA8E; --hl-ro:#FF8B6B; --r:14px; --r-lg:22px; --r-pill:999px; --shadow:0 1px 2px rgba(43,38,32,.05), 0 10px 30px -22px rgba(43,38,32,.55); --shadow-lift:0 2px 4px rgba(43,38,32,.06), 0 18px 40px -26px rgba(43,38,32,.6); --f-disp:"Fraunces",Georgia,"Times New Roman",serif; --f-body:"Newsreader",Georgia,"Times New Roman",serif; --f-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace; } /* une page de matière pose data-matiere="phy" sur : l'accent suit */ :root[data-matiere="mat"]{--accent:var(--mat);--accent-bg:var(--mat-bg)} :root[data-matiere="phy"]{--accent:var(--phy);--accent-bg:var(--phy-bg)} :root[data-matiere="chi"]{--accent:var(--chi);--accent-bg:var(--chi-bg)} :root[data-matiere="sii"]{--accent:var(--sii);--accent-bg:var(--sii-bg)} :root[data-matiere="inf"]{--accent:var(--inf);--accent-bg:var(--inf-bg)} :root[data-matiere="ang"]{--accent:var(--ang);--accent-bg:var(--ang-bg)} :root[data-matiere="fra"]{--accent:var(--fra);--accent-bg:var(--fra-bg)} /* --- base --- */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;color:var(--ink); font-family:var(--f-body);font-size:17px;line-height:1.6; background-color:var(--ground); /* lignes de cahier très pâles */ background-image:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(43,38,32,.035) 31px 32px); -webkit-font-smoothing:antialiased; } img{max-width:100%} a{color:var(--accent);text-underline-offset:3px} .wrap{max-width:880px;margin:0 auto;padding:20px 18px 90px;display:flex;flex-direction:column;gap:30px} h1{font-family:var(--f-disp);font-weight:600;font-size:clamp(30px,7vw,46px);line-height:1.05;margin:0;letter-spacing:-.015em;text-wrap:balance} h2{font-family:var(--f-disp);font-weight:600;font-size:clamp(21px,4vw,27px);line-height:1.15;margin:0;text-wrap:balance} h3{font-family:var(--f-disp);font-weight:600;font-size:19px;margin:0} .eyebrow{ font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);display:flex;align-items:center;gap:12px; } .eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)} .card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:20px 22px} .mono{font-family:var(--f-mono)} .ui{font-family:var(--f-ui)} /* --- barre de navigation commune --- */ .nav{ position:sticky;top:0;z-index:20;margin:0 -18px 0;padding:10px 18px; background:rgba(246,241,231,.88);backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--rule); display:flex;align-items:center;gap:8px;flex-wrap:wrap; } .nav .brand{ font-family:var(--f-disp);font-weight:600;font-size:17px;white-space:nowrap;text-decoration:none;color:var(--ink); margin-right:auto;display:flex;align-items:center;gap:8px; } .nav .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:0 0 auto} .nav a.tab{ font-family:var(--f-ui);font-size:13px;font-weight:500;text-decoration:none;color:var(--muted); padding:6px 13px;border-radius:var(--r-pill); } .nav a.tab:hover{color:var(--ink);background:var(--surface-2)} .nav a.tab[aria-current="page"]{background:var(--ink);color:var(--ground)} .nav a.tab.pale{opacity:.45} .nav a.tab.guide{margin-left:6px;border-left:1px solid var(--rule);border-radius:0 var(--r-pill) var(--r-pill) 0;padding-left:14px} /* --- listes de liens (cours, fiches, outils) --- */ .list{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden} .row{display:flex;align-items:center;gap:14px;padding:15px 20px;text-decoration:none;color:inherit;border-bottom:1px solid var(--rule)} .row:last-child{border-bottom:0} .row:hover{background:var(--surface-2)} .row .ic{ width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--accent-bg);color:var(--accent); display:grid;place-items:center;font-family:var(--f-ui);font-size:10px;font-weight:700;letter-spacing:.04em; } .row .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .row .t{font-weight:500;line-height:1.3} .row .d{font-family:var(--f-ui);font-size:12.5px;color:var(--muted);line-height:1.35} .row .k{font-family:var(--f-ui);font-size:11px;color:var(--muted);white-space:nowrap} .row[aria-disabled="true"]{opacity:.45;pointer-events:none} /* --- pastilles --- */ .pill{ display:inline-flex;align-items:center;gap:6px;font-family:var(--f-ui);font-size:11.5px;font-weight:500; padding:3px 10px;border-radius:var(--r-pill);background:var(--accent-bg);color:var(--accent); } .pill.plain{background:var(--surface-2);color:var(--muted)} /* --- boutons --- */ .btn{ font-family:var(--f-ui);font-size:14px;font-weight:500;cursor:pointer; padding:11px 18px;border-radius:var(--r-pill);border:1px solid var(--rule-strong); background:var(--surface);color:var(--ink); } .btn:hover{background:var(--surface-2)} .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .btn.primary:hover{filter:brightness(1.08)} .btn:disabled{opacity:.4;cursor:default} button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .note{font-family:var(--f-ui);font-size:13.5px;color:var(--muted);max-width:64ch;line-height:1.6} .foot{font-family:var(--f-ui);font-size:11.5px;color:var(--muted);text-align:center;padding-top:10px} .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch} @media (max-width:520px){ body{font-size:16.5px} .wrap{padding:14px 14px 80px;gap:24px} .nav{margin:0 -14px;padding:9px 14px} .row{padding:13px 15px} .nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:3px} .nav::-webkit-scrollbar{display:none} .nav .brand{font-size:15px;gap:7px} .nav a.tab{font-size:12.5px;padding:5px 10px} } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}