/* Polices : chargées via dans le de chaque page cours. L'@import sérialisait CSS → CSS et retardait le premier rendu. */ :root{ --vert:#0e5d54; --vert-fonce:#0a3f39; --or:#d4af37; --creme:#fdfbf3; --gris:#20302c; --gris-clair:#5c6b66; --bord:#e7dfd0; --surf:#ffffff; --shadow:0 12px 28px rgba(10,63,57,.08); --radius:16px; } html[data-theme="dark"], body[data-theme="dark"] { --vert:#12756a; --vert-fonce:#0c4a43; --or:#d4af37; --creme:#0d1613; --gris:#e9efec; --gris-clair:#9db2ab; --bord:#22332e; --surf:#152420; --shadow:0 12px 28px rgba(0,0,0,.35); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --vert:#12756a; --vert-fonce:#0c4a43; --or:#d4af37; --creme:#0d1613; --gris:#e9efec; --gris-clair:#9db2ab; --bord:#22332e; --surf:#152420; --shadow:0 12px 28px rgba(0,0,0,.35); } } *{box-sizing:border-box} body{ font-family:"Manrope",-apple-system,Roboto,Arial,sans-serif; color:var(--gris); background:var(--creme); line-height:1.7; margin:0; padding:0 0 60px; transition:background .3s ease, color .3s ease; } .wrap{max-width:900px; margin:0 auto; padding:0 24px} header.hero{ background:linear-gradient(135deg,var(--vert) 0%,var(--vert-fonce) 100%); color:#fff; padding:44px 24px 38px; text-align:center; border-bottom:4px solid var(--or); box-shadow:0 8px 24px rgba(0,0,0,.15); position:relative; overflow:hidden; } header.hero::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px); background-size:24px 24px; pointer-events:none; } header.hero .kicker{ letter-spacing:2px; text-transform:uppercase; font-size:.8rem; color:var(--or); font-weight:700; margin:0 0 8px; font-family:"Manrope",sans-serif; } header.hero h1{ margin:6px 0 12px; font-size:clamp(1.8rem,4vw,2.5rem); font-family:"Fraunces",Georgia,serif; font-weight:700; line-height:1.15; } header.hero p{margin:0; opacity:.94; font-size:1.05rem; max-width:680px; margin-left:auto; margin-right:auto} h1, h2, h3, h4 {font-family:"Fraunces",Georgia,serif; font-weight:600; letter-spacing:-.01em;} h2{ color:var(--vert-fonce); border-left:6px solid var(--or); padding:8px 0 8px 16px; margin:44px 0 18px; font-size:1.5rem; background:linear-gradient(90deg,rgba(212,175,55,.08),transparent); border-radius:0 12px 12px 0; } h3{color:var(--vert); margin:28px 0 10px; font-size:1.25rem} .ref{ background:var(--surf); border:1px solid var(--bord); border-left:4px solid var(--vert); border-radius:var(--radius); padding:16px 20px; margin:18px 0; font-size:.96rem; box-shadow:var(--shadow); } .ref b{color:var(--vert-fonce)} .astuce{ background:color-mix(in srgb, var(--or) 12%, var(--surf)); border:1px solid color-mix(in srgb, var(--or) 35%, var(--bord)); border-left:5px solid var(--or); border-radius:var(--radius); padding:16px 20px; margin:20px 0; box-shadow:var(--shadow); } .astuce b{color:color-mix(in srgb, var(--or) 70%, var(--vert-fonce))} .warn{ background:color-mix(in srgb, #d24b40 10%, var(--surf)); border:1px solid color-mix(in srgb, #d24b40 30%, var(--bord)); border-left:5px solid #d24b40; border-radius:var(--radius); padding:16px 20px; margin:20px 0; font-size:.95rem; box-shadow:var(--shadow); } .warn b{color:#d24b40} table{width:100%; border-collapse:collapse; margin:20px 0; font-size:.94rem; border-radius:12px; overflow:hidden; box-shadow:var(--shadow)} th,td{border:1px solid var(--bord); padding:12px 14px; text-align:left; vertical-align:top} th{background:var(--vert); color:#fff; font-family:"Manrope",sans-serif; font-weight:700} tr:nth-child(even) td{background:color-mix(in srgb, var(--creme) 50%, var(--surf))} tr td{background:var(--surf)} ol,ul{padding-left:24px} ol li,ul li{margin:6px 0} .grid4{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin:20px 0} .card{ background:var(--surf); border:1px solid var(--bord); border-top:4px solid var(--vert); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); transition:transform .2s ease; } .card:hover{transform:translateY(-3px)} .card h4{margin:0 0 8px; color:var(--vert-fonce); font-size:1.1rem} .qcm{ background:var(--surf); border:2px dashed var(--vert); border-radius:var(--radius); padding:20px 22px; margin:20px 0; box-shadow:var(--shadow); } .qcm details{margin:12px 0; border-bottom:1px solid var(--bord); padding-bottom:10px} .qcm details:last-child{border-bottom:none; padding-bottom:0} .qcm summary{cursor:pointer; font-weight:700; color:var(--vert-fonce); list-style:none; display:flex; align-items:center; gap:8px} .qcm summary::-webkit-details-marker{display:none} .qcm .rep{margin-top:10px; background:color-mix(in srgb, var(--vert) 10%, var(--surf)); padding:12px 14px; border-radius:10px; border-left:3px solid var(--vert)} footer{ text-align:center; color:var(--gris-clair); font-size:.88rem; margin-top:50px; border-top:1px solid var(--bord); padding-top:24px; } .num{ display:inline-flex; width:28px; height:28px; background:var(--or); color:#fff; border-radius:50%; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; flex:0 0 auto; } @media print{ header.hero{-webkit-print-color-adjust:exact; print-color-adjust:exact} body{background:#fff; color:#000} .qcm,.astuce,.ref,.warn,th{-webkit-print-color-adjust:exact; print-color-adjust:exact} } /* ===== Barre de marque (logo + lien site) ===== */ .cs-topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:color-mix(in srgb, var(--vert-fonce) 92%, transparent); backdrop-filter:blur(12px); padding:10px 22px; border-bottom:2px solid var(--or); position:sticky; top:0; z-index:100; box-shadow:0 4px 16px rgba(0,0,0,.15); } .cs-topbar img{width:42px; height:42px; border-radius:50%; flex:0 0 auto; border:2px solid var(--or)} .cs-topbar .cs-brand{color:#fff; font-weight:800; letter-spacing:.5px; font-size:1.05rem; line-height:1.15; font-family:"Manrope",sans-serif} .cs-topbar .cs-brand small{display:block; color:var(--or); font-weight:700; font-size:.68rem; letter-spacing:2px; text-transform:uppercase} .cs-topbar .cs-site{ color:#fff; text-decoration:none; font-weight:700; font-size:.85rem; background:var(--vert); border:1.5px solid var(--or); padding:6px 14px; border-radius:20px; white-space:nowrap; transition:all .2s ease; } .cs-topbar .cs-site:hover{background:var(--or); color:var(--vert-fonce)} /* ===== Pied de page marqué ===== */ .cs-sitefooter{ max-width:900px; margin:60px auto 0; padding:32px 24px; text-align:center; border-top:2px solid var(--bord); background:var(--surf); border-radius:var(--radius); box-shadow:var(--shadow); } .cs-sitefooter img{width:68px; height:68px; border-radius:50%; border:3px solid var(--or); margin-bottom:12px} .cs-sitefooter .cs-fbrand{color:var(--vert-fonce); font-weight:800; font-size:1.15rem; margin:4px 0; font-family:"Fraunces",Georgia,serif} .cs-sitefooter .cs-ftag{color:var(--gris-clair); font-size:.9rem; margin:4px 0 16px} .cs-sitefooter a.cs-flink{ display:inline-block; background:linear-gradient(135deg,var(--vert),var(--vert-fonce)); color:#fff; text-decoration:none; font-weight:700; padding:.7rem 1.5rem; border-radius:30px; border:2px solid var(--or); box-shadow:0 6px 16px rgba(14,93,84,.25); transition:transform .2s; } .cs-sitefooter a.cs-flink:hover{transform:translateY(-2px)} .cs-sitefooter .cs-copy{color:var(--gris-clair); font-size:.8rem; margin-top:18px} /* ===== Responsive ===== */ @media (max-width:600px){ .wrap{padding:0 16px} header.hero{padding:28px 16px 26px} h1{font-size:1.5rem} h2{font-size:1.2rem; padding:6px 0 6px 12px} p,li,td,th{font-size:.92rem} table{display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:normal} th,td{padding:8px 10px} .cs-topbar{padding:8px 14px} .cs-topbar .cs-brand{font-size:.92rem} .cs-topbar .cs-site{padding:5px 10px; font-size:.75rem} } /* --- Polish global : accessibilité & finitions --- */ :focus-visible { outline: 3px solid #d4af37; outline-offset: 2px; border-radius: 6px; } :focus:not(:focus-visible) { outline: none; } ::selection { background: #0e5d54; color: #fff; } h1, h2, h3 { text-wrap: balance; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }