/* MODULE 2 — CSS3 */
:root{--primary:#2563eb;--primary-dark:#1d4ed8;--dark:#0f172a;--text:#1e293b;--muted:#64748b;--surface:#fff;--soft:#f1f5f9;--border:#dbe3ee;--success:#15803d;--radius:14px;--shadow:0 10px 30px rgba(15,23,42,.07)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#f8fafc;line-height:1.7}a{color:var(--primary)}button{font:inherit}.container{width:min(1120px,92%);margin:auto}
.hero{background:var(--dark);color:#fff;padding:82px 0 70px}.eyebrow,.num{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.eyebrow{color:#93c5fd}.num{color:var(--primary)}.hero h1{font-size:clamp(2.3rem,6vw,4.5rem);line-height:1.05;margin:10px 0 18px}.lead{max-width:820px;color:#cbd5e1;font-size:1.12rem}.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.tags span{padding:7px 12px;border:1px solid #334155;border-radius:999px;font-size:.86rem}
.toc{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid var(--border)}.toc .container{display:flex;gap:22px;overflow:auto}.toc a{padding:16px 0;text-decoration:none;white-space:nowrap;font-size:.9rem;font-weight:700}.toc a:hover{color:var(--primary)}
.section{padding:76px 0}.alt{background:var(--soft)}h2{font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.2;margin:8px 0 22px}h3{margin:32px 0 12px}h4{margin:0 0 10px}p{margin:0 0 15px}
.objective,.exercise,.final{padding:20px 22px;border-radius:var(--radius);margin:24px 0}.objective{background:#dbeafe;border-left:5px solid var(--primary)}.exercise{background:#ecfdf5;border-left:5px solid var(--success)}.final{background:#1e293b;color:#fff}
.grid3,.cards2,.compare{display:grid;gap:20px}.grid3{grid-template-columns:repeat(3,1fr);margin-top:30px}.cards2,.compare{grid-template-columns:repeat(2,1fr)}.grid3 article,.cards2 article,.card,.compare article{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.diagram{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0}.diagram div{padding:25px;text-align:center;background:#fff;border:1px solid var(--border);border-radius:12px}.diagram b,.diagram small{display:block}.diagram b{color:var(--primary);font-size:1.3rem}.diagram small{color:var(--muted)}
pre{margin:18px 0;padding:20px;overflow:auto;border-radius:10px;background:#111827;color:#e5e7eb;font:.88rem/1.65 Consolas,"Courier New",monospace}code{background:#e2e8f0;padding:2px 6px;border-radius:5px;font-family:Consolas,"Courier New",monospace}pre code{background:transparent;padding:0}
.definition,.units,.priority,.evaluation{display:grid;gap:10px}.definition{grid-template-columns:repeat(2,1fr)}.definition p,.units p,.priority p{margin:0;padding:14px;background:#fff;border:1px solid var(--border);border-radius:9px}.check{padding-left:24px}.check li{margin-bottom:8px}
.boxmodel{width:min(620px,100%);margin:35px auto;padding:35px;border:16px solid #fbbf24;background:#fde68a}.margin{padding:32px;background:#fecaca}.border{padding:28px;border:12px solid #60a5fa;background:#bfdbfe}.padding{padding:28px;background:#bbf7d0}.content{padding:25px;background:#fff;text-align:center;font-weight:800}.margin>span,.border>span,.padding>span{display:block;font-size:.75rem;font-weight:800;text-transform:uppercase;margin-bottom:6px}
.flexdemo{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:20px;background:var(--dark);border-radius:12px;margin:25px 0}.flexdemo div{flex:1;min-width:130px;padding:30px;background:#fff;border-radius:9px;text-align:center;font-weight:800}
.griddemo{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0}.griddemo div{min-height:110px;display:grid;place-items:center;background:#dbeafe;border:1px solid #93c5fd;border-radius:10px;font-weight:800}.griddemo .featured{grid-column:span 2}
.animated-button{border:0;border-radius:9px;padding:13px 20px;color:#fff;background:var(--primary);cursor:pointer;transition:background-color .2s ease,transform .2s ease}.animated-button:hover{background:var(--primary-dark);transform:translateY(-3px)}.pulse{width:110px;height:110px;display:grid;place-items:center;margin:30px auto;border-radius:50%;background:var(--primary);color:#fff;font-weight:800;animation:pulse 1.5s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.project{background:var(--dark);color:#fff}.project .check{background:transparent}.evaluation{background:#fff;color:var(--text);padding:22px;border-radius:var(--radius)}.evaluation p{display:flex;justify-content:space-between;border-bottom:1px solid var(--border);padding:10px 0;margin:0}.evaluation p:last-child{border:0}
footer{padding:38px 0;background:#020617;color:#94a3b8;text-align:center}
@media(max-width:900px){.grid3{grid-template-columns:repeat(2,1fr)}.griddemo{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.hero{padding:60px 0}.section{padding:55px 0}.grid3,.cards2,.compare,.diagram,.definition{grid-template-columns:1fr}.griddemo{grid-template-columns:1fr}.griddemo .featured{grid-column:auto}.boxmodel{padding:20px;border-width:10px}.margin,.border,.padding{padding:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* MODULE 3-5 — additions (en-têtes de module, sans toucher aux règles existantes) */
.module-header{background:var(--dark);color:#fff;padding:56px 0;text-align:center}
.module-header .eyebrow{display:block;margin-bottom:10px}
.module-header h2{color:#fff;margin:0 0 14px}
.module-header p{color:#cbd5e1;max-width:760px;margin:0 auto}
.steplist{counter-reset:step;margin-top:30px}
.steplist>div{position:relative;padding:22px 22px 22px 66px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin:18px 0}
.steplist>div::before{counter-increment:step;content:counter(step);position:absolute;left:20px;top:22px;width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800}
.steplist h4{margin:0 0 8px}
.steplist p{margin:0;color:var(--muted)}

/* DESIGN+ : transitions fluides, animations, bouton copier */
:root{--ease:cubic-bezier(.22,.8,.3,1)}
a,button,.tags span,.toc a{transition:color .25s var(--ease),background-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#0f172a 0%,#1e1b4b 45%,#1e3a8a 100%);background-size:200% 200%;animation:heroShift 14s ease-in-out infinite}
@keyframes heroShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero h1{animation:fadeUp .8s var(--ease) both}
.hero .lead{animation:fadeUp .8s .1s var(--ease) both}
.hero .tags{animation:fadeUp .8s .2s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.tags span:hover{transform:translateY(-2px);border-color:var(--primary);color:#fff;background:rgba(37,99,235,.25)}
.toc{backdrop-filter:blur(10px)}
.toc a{position:relative}
.toc a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--primary);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.toc a:hover::after,.toc a.active::after{transform:scaleX(1)}
.toc a.active{color:var(--primary)}
.grid3 article,.cards2 article,.card,.compare article,.diagram div,.definition p,.units p,.priority p{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.grid3 article:hover,.cards2 article:hover,.card:hover,.compare article:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,23,42,.12);border-color:#93c5fd}
.objective,.exercise{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.objective:hover,.exercise:hover{transform:translateX(4px)}
pre{position:relative;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
pre:hover{box-shadow:0 14px 34px rgba(2,6,23,.35)}
.code-wrap{position:relative;margin:18px 0}
.code-wrap pre{margin:0;padding-top:44px}
.copy-btn{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;font-size:.78rem;font-weight:800;border:1px solid #334155;border-radius:8px;background:#1e293b;color:#e2e8f0;cursor:pointer;opacity:.92;transition:background-color .25s var(--ease),transform .25s var(--ease),opacity .25s var(--ease)}
.copy-btn:hover{background:#334155;transform:translateY(-1px)}
.copy-btn:active{transform:scale(.96)}
.copy-btn.copied{background:#15803d;border-color:#15803d;color:#fff}
.copy-btn svg{width:14px;height:14px;flex:none}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.visible{opacity:1;transform:none}
#toTop{position:fixed;right:18px;bottom:18px;z-index:50;width:46px;height:46px;border:0;border-radius:50%;background:var(--primary);color:#fff;font-size:1.2rem;cursor:pointer;box-shadow:0 12px 28px rgba(37,99,235,.4);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease),background-color .25s var(--ease)}
#toTop.show{opacity:1;transform:none;pointer-events:auto}
#toTop:hover{background:var(--primary-dark);transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.hero{animation:none}.hero h1,.hero .lead,.hero .tags{animation:none}.reveal{opacity:1;transform:none;transition:none}}

/* PEDAGOGIE : corrigés, QCM, meta, bugs, checklists, compétences */
.meta{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.meta span{font-size:.78rem;font-weight:800;padding:6px 12px;border-radius:999px;background:#e0e7ff;color:#3730a3;border:1px solid #c7d2fe}
.meta span:last-child{background:#fef3c7;color:#92400e;border-color:#fde68a}
details.corrige,details.reponse{margin:14px 0;border:1px solid var(--border);border-radius:12px;background:#fff;overflow:hidden;transition:box-shadow .3s var(--ease)}
details.corrige[open],details.reponse[open]{box-shadow:0 12px 28px rgba(15,23,42,.1)}
details.corrige summary,details.reponse summary{cursor:pointer;padding:13px 16px;font-weight:800;font-size:.9rem;list-style:none;display:flex;align-items:center;gap:10px;transition:background-color .25s var(--ease)}
details.corrige summary::before{content:"\1F4A1"}
details.reponse summary::before{content:"\2705"}
details.corrige summary:hover,details.reponse summary:hover{background:#f1f5f9}
details.corrige{background:#fffbeb;border-color:#fde68a}
details.corrige summary{color:#92400e}
details.reponse{background:#f0fdf4;border-color:#bbf7d0}
details.reponse summary{color:#166534}
details.corrige .corrige-body,details.reponse .reponse-body{padding:0 16px 16px}
details.corrige pre{margin:10px 0}
.bug{width:min(1120px,92%);margin:28px auto;padding:22px 22px 16px;border-radius:var(--radius);background:#fef2f2;border:1px solid #fecaca;border-left:5px solid #dc2626;box-shadow:var(--shadow)}
.bug h4{margin:0 0 12px;color:#991b1b;display:flex;align-items:center;gap:8px;font-size:1.02rem}
.bug .code-wrap{margin:12px 0}
.bug details.reponse{margin:12px 0 6px;background:#fff;border:1px solid #fecaca}
.bug details.reponse summary{color:#991b1b}
.bug details.reponse summary:hover{background:#fef2f2}
.checklist{width:min(1120px,92%);margin:28px auto;background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid var(--border);border-radius:16px;padding:22px 22px 14px;box-shadow:var(--shadow)}
.checklist h3{margin:0 0 8px;font-size:1.08rem;display:flex;align-items:center;gap:8px}
.checklist label{border-radius:10px;padding:10px 12px;transition:background-color .25s var(--ease)}
.checklist label:hover{background:#f1f5f9}

/* 5 POINTS : recherche, sombre, quiz, playground, formateur, print */
.toolbar{display:flex;gap:8px;align-items:center;margin-left:auto}

.icon-btn{border:1px solid var(--border);background:#fff;border-radius:999px;padding:8px 13px;font-size:.85rem;font-weight:800;cursor:pointer;white-space:nowrap}
.icon-btn:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}
mark.hl{background:#fde047;padding:0 2px;border-radius:3px}
body.dark{--text:#e2e8f0;--muted:#94a3b8;--surface:#1e293b;--soft:#0f172a;--border:#334155;background:#020617;color:var(--text)}
body.dark .toc{background:rgba(2,6,23,.95)}
body.dark .toc a{color:#e2e8f0}
body.dark pre{background:#000}
body.dark code{background:#334155;color:#fff}
body.dark .grid3 article,body.dark .cards2 article,body.dark .card,body.dark .compare article,body.dark .diagram div,body.dark .definition p,body.dark .units p,body.dark .priority p,body.dark .checklist{background:#1e293b;color:#f1f5f9;border-color:#334155}
body.dark .diagram small{color:#cbd5e1}
body.dark details.corrige{background:#451a03;border-color:#92400e;color:#fde68a}
body.dark details.corrige summary{color:#fde68a}
body.dark details.corrige summary:hover{background:#78350f}
body.dark details.reponse{background:#052e16;border-color:#166534;color:#bbf7d0}
body.dark details.reponse summary{color:#bbf7d0}
body.dark details.reponse summary:hover{background:#064e3b}
body.dark details.corrige code,body.dark details.reponse code{background:#0f172a;color:#fde68a}
body.dark .checklist label:hover{background:#0f172a}
body.dark .evaluation{background:#1e293b;color:#f1f5f9;border:1px solid #334155}
body.dark .evaluation p{border-color:#334155}
body.dark .flexdemo div{background:#1e293b;color:#fff}
body.dark .bug{background:#450a0a;border-color:#7f1d1d}
body.dark .bug h4{color:#fecaca}
body.dark .bug details.reponse{background:#1c1917;border-color:#7f1d1d}
body.dark .bug details.reponse summary{color:#fecaca}
body.dark .bug details.reponse summary:hover{background:#450a0a}
body.dark .quiz .q-ok{color:#052e16}
body.dark .quiz .q-ko{color:#450a0a}
body.dark #attestation{background:#1e293b;color:#f1f5f9}
body.dark .section.alt{background:#0b1220}
body.dark .objective{background:#1e3a8a;color:#fff}
body.dark .exercise{background:#064e3b;color:#fff}
body.dark .competences{background:linear-gradient(180deg,#1e293b,#0f172a);border-color:#334155;box-shadow:0 18px 40px rgba(0,0,0,.45)}
body.dark .competences table{color:#f1f5f9}
body.dark .competences th{background:#312e81;color:#fff}
body.dark .competences td{border-color:#334155;color:#f1f5f9}
body.dark .competences input[type=checkbox]{accent-color:#60a5fa;width:18px;height:18px}
body.dark .progress{background:#334155}
body.dark #skillTxt{color:#e2e8f0}
body.dark .icon-btn{background:#0f172a;color:#fff;border-color:#334155}
.quiz{background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px;margin:16px 0;box-shadow:var(--shadow)}
body.dark .quiz{background:#1e293b;border-color:#334155;color:#f1f5f9}
.quiz h4{margin:0 0 12px}
.quiz ol{margin:0;padding-left:22px;display:grid;gap:14px}
.quiz label{display:block;padding:6px 10px;border-radius:8px;cursor:pointer}
.quiz label:hover{background:#f1f5f9}
body.dark .quiz label:hover{background:#0f172a}
.quiz .q-ok{background:#dcfce7 !important;border:1px solid #22c55e}
.quiz .q-ko{background:#fee2e2 !important;border:1px solid #ef4444}
.quiz .score{font-weight:800;margin-top:12px}
.quiz button{margin-top:10px;border:0;border-radius:9px;padding:11px 18px;background:var(--primary);color:#fff;font-weight:800;cursor:pointer}
.quiz button:hover{background:var(--primary-dark)}
.play-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.play-grid textarea{width:100%;min-height:180px;font:.85rem/1.6 Consolas,monospace;padding:14px;border-radius:10px;border:1px solid var(--border);background:#0f172a;color:#e5e7eb}
.play-grid iframe{width:100%;min-height:260px;background:#fff;border:1px solid var(--border);border-radius:10px}
.play-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.play-actions button{border:0;border-radius:9px;padding:10px 16px;font-weight:800;cursor:pointer;background:var(--primary);color:#fff}
.play-actions button.secondary{background:#334155}
#sqlOut{background:#0f172a;color:#e5e7eb;border-radius:10px;padding:14px;min-height:80px;font:.85rem/1.6 Consolas,monospace;white-space:pre-wrap;margin-top:12px}
.trainer-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#attestation{display:none;border:2px solid var(--primary);border-radius:14px;padding:30px;text-align:center;margin-top:16px;background:#fff}
@media(max-width:800px){.play-grid,.trainer-grid{grid-template-columns:1fr}}

.checklist label{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer;font-size:.95rem}
.checklist label:last-child{border:0}
.checklist input{margin-top:5px;width:17px;height:17px;accent-color:var(--primary)}
.checklist input:checked+span{text-decoration:line-through;color:var(--muted)}
.competences{background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid var(--border);border-radius:16px;padding:24px;margin:26px 0;box-shadow:var(--shadow)}
.competences table{width:100%;border-collapse:collapse;font-size:.9rem}
.competences th,.competences td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
.competences th{background:#eef2ff}
.progress{height:10px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin-top:14px}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),#22c55e);border-radius:999px;transition:width .6s var(--ease)}