:root{--jaune:#F5B800;--creme:#FFF6DC;--encre:#22131F;--rouge:#DA222E;--rouge-fonce:#9E0B14;--vert:#1E7A1E;--bleu:#173A6B;--doux:#5A4A55}
*{box-sizing:border-box}body{margin:0;background:var(--jaune);color:var(--encre);font-family:"Source Sans 3","Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.6}
a{color:var(--rouge-fonce)}header.site{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;background:var(--jaune);border-bottom:3px solid var(--rouge)}
header.site img{height:44px;width:auto}.nav{display:flex;gap:16px;flex-wrap:wrap}.nav a{color:var(--encre);text-decoration:none;font-weight:800;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}.nav a:hover{color:var(--rouge-fonce)}
.page{max-width:1080px;margin:0 auto;padding:34px 20px 64px}.rub{display:inline-block;background:var(--rouge);color:#fff;padding:6px 12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;font-size:.78rem}
h1,h2,h3{font-family:Sora,"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.15}h1{font-size:clamp(30px,5vw,50px);margin:16px 0 10px}h2{font-size:clamp(22px,3vw,30px);margin:30px 0 10px}h3{margin:0 0 8px}
.lead{font-size:clamp(17px,2.4vw,21px);max-width:72ch}.panel{background:var(--creme);border:1px solid rgba(34,19,31,.28);border-radius:18px;padding:22px;margin:16px 0}.panel.sombre{background:var(--encre);color:var(--creme)}.panel.sombre a{color:var(--jaune)}
.btn{display:inline-block;background:var(--encre);color:var(--creme);border:0;border-radius:999px;padding:12px 22px;font-weight:800;font-family:Sora,sans-serif;font-size:.95rem;text-decoration:none;cursor:pointer}.btn:hover{background:var(--rouge-fonce);color:#fff}.btn.rouge{background:var(--rouge-fonce);color:#fff}.btn.contour{background:transparent;color:var(--encre);border:2px solid var(--encre)}.btn[disabled]{opacity:.55;cursor:wait}
.alert{border-radius:14px;padding:14px 16px;margin:12px 0}.alert.err{background:#FCE8E9;border:1px solid var(--rouge)}.alert.ok{background:#EAF6EA;border:1px solid var(--vert)}.alert.info{background:#FFFDF4;border:1px solid rgba(34,19,31,.3)}
label{display:block;font-weight:700;margin:12px 0 5px}input,select,textarea{width:100%;padding:12px 14px;border:1px solid rgba(34,19,31,.4);border-radius:12px;background:#FFFDF4;color:var(--encre);font:inherit}textarea{min-height:96px}input:focus,select:focus,textarea:focus{outline:2px solid var(--rouge);outline-offset:1px}.check{display:flex;gap:10px;align-items:flex-start;font-weight:600}.check input{width:auto;margin-top:5px}
.gauge{background:rgba(34,19,31,.16);height:16px;border-radius:999px;overflow:hidden}.gauge>div{height:100%;background:var(--rouge);border-radius:999px;transition:width .8s ease}.big{font-family:Sora,sans-serif;font-size:clamp(26px,4vw,38px);font-weight:800}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:14px}.card{background:#FFFDF4;border:1px solid rgba(34,19,31,.25);border-radius:16px;padding:18px}.card.lock{opacity:.72}.tag{display:inline-block;border-radius:999px;padding:3px 10px;font-size:.78rem;font-weight:800;letter-spacing:.04em;background:rgba(34,19,31,.12)}.tag.ok{background:#DFF2DF;color:#145214}.tag.attente{background:#FCE8E9;color:#7A0A12}.tag.encours{background:#FFF0BF;color:#5C4300}.meta{color:var(--doux);font-size:.92rem}.celebration{font-size:1.05rem;font-weight:700}.confetti{display:inline-block;animation:pop 1.2s ease infinite alternate}@keyframes pop{from{transform:scale(1)}to{transform:scale(1.18) rotate(5deg)}}
.lesson{font-size:1.02rem}.lesson h3{margin-top:24px}.lesson table{border-collapse:collapse;width:100%;margin:12px 0;background:#FFFDF4}.lesson th,.lesson td{border:1px solid rgba(34,19,31,.3);padding:8px;text-align:left;vertical-align:top}.lesson blockquote{border-left:5px solid var(--rouge);margin:14px 0;padding:10px 14px;background:#FFFDF4}.lesson code{background:rgba(34,19,31,.1);padding:1px 5px;border-radius:5px}
.quiz-q{border-top:1px solid rgba(34,19,31,.18);padding:14px 0}.quiz-q legend{font-weight:800}.quiz-q label{font-weight:500;display:flex;gap:9px;align-items:flex-start}.quiz-q input{width:auto;margin-top:5px}.small{font-size:.9rem;color:var(--doux)}footer{margin-top:44px;text-align:center;color:#4A3521;font-size:.92rem}footer img{height:58px;width:auto}
@media(max-width:640px){.nav a:not(:last-child){display:none}.page{padding-top:24px}}