@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bleu:#2545e8; --bleu-clair:#5b74ff; --encre:#0f1220; --fond:#fcfcfd; --fond-alt:#f5f6fa;
  --chip:#eef1ff; --texte-2:#4c5164; --texte-3:#3d4254; --attenue:#8a8fa3; --bord:#eceef2;
  --bord-input:#d6d9e2; --vert:#13835a; --vert-fond:#e8f6ef; --ambre:#9a6a00; --ambre-fond:#fdf3dd;
  --ombre:0 2px 14px rgba(15,18,32,.05); --ombre-forte:0 18px 50px rgba(15,18,32,.08);
}
*{box-sizing:border-box}
html{-webkit-print-color-adjust:exact;print-color-adjust:exact}
body{
  margin:0;background:var(--fond);color:var(--encre);
  font-family:"Archivo",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.58;
}
.wrap{max-width:920px;margin:0 auto;padding:0 40px 90px}

/* En-tête */
header{padding:52px 0 0}
.marque{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.logo{font-size:26px;font-weight:800;letter-spacing:-.02em}
.logo .ai{color:var(--bleu)}
.marque .sep{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--attenue);padding-left:16px;border-left:1px solid var(--bord)}
h1{font-size:clamp(30px,4.4vw,48px);font-weight:700;letter-spacing:-.03em;line-height:1.08;margin:32px 0 0}
.chapeau{font-size:18px;line-height:1.6;color:var(--texte-2);max-width:700px;margin:18px 0 0}
.meta-row{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 0}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;
  background:var(--chip);color:var(--bleu);font-size:13px;font-weight:700;letter-spacing:.04em}
.rule{height:1px;background:var(--bord);margin:40px 0 0}

/* Avant de commencer */
.avant{margin:34px 0 0;background:#fff;border:1px solid var(--bord);border-left:3px solid var(--bleu);
  border-radius:16px;padding:24px 28px;box-shadow:var(--ombre)}
.avant h2{font-size:17px;margin:0 0 10px;letter-spacing:-.01em}
.avant ol{margin:0;padding-left:20px;color:var(--texte-2);font-size:15.5px}
.avant li{margin:5px 0}

/* Boutons écran */
.actions{display:flex;gap:12px;margin:26px 0 0;flex-wrap:wrap}
.btn{appearance:none;border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:15px;
  padding:13px 24px;border-radius:999px;background:var(--bleu);color:#fff;box-shadow:0 10px 26px rgba(37,69,232,.22)}
.btn.ghost{background:#fff;color:var(--encre);border:1px solid var(--bord);box-shadow:var(--ombre)}
a.btn{text-decoration:none;display:inline-block}

/* Exercice */
.exos{display:flex;flex-direction:column;gap:30px;margin:40px 0 0}
.exo{background:#fff;border:1px solid var(--bord);border-radius:20px;box-shadow:var(--ombre);
  padding:34px 38px;break-inside:avoid}
.exo-tete{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.exo-n{font-size:14px;font-weight:800;color:var(--bleu);letter-spacing:.06em;white-space:nowrap;margin-top:5px}
.exo-titre{font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.18;margin:0;flex:1 1 240px}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;border-radius:999px;
  background:var(--fond-alt);color:var(--attenue)}
.badge.t{background:var(--chip);color:var(--bleu)}

/* Blocs structurés */
.bloc{margin:18px 0 0;border-radius:14px;padding:18px 22px;font-size:15.5px}
.bloc .lbl{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.materiel{background:var(--fond-alt);border:1px solid var(--bord)}
.materiel .lbl{color:var(--attenue)}
.materiel .doc{background:#fff;border:1px solid var(--bord);border-radius:10px;padding:16px 18px;margin-top:4px;
  font-size:15px;color:var(--texte-3);white-space:pre-wrap}
.attendu{background:var(--vert-fond);border:1px solid #cdeadd}
.attendu .lbl{color:var(--vert)}
.attendu .corps{color:#155e43}
.piege{background:var(--ambre-fond);border:1px solid #f0e2b8}
.piege .lbl{color:var(--ambre)}
.piege .corps{color:#7a5600}

.consigne{margin:18px 0 0;font-size:16.5px;color:var(--texte-2)}
.consigne .fort{color:var(--encre);font-weight:600}

/* À faire : étapes numérotées */
.afaire{margin:18px 0 0}
.afaire .lbl{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--bleu);margin-bottom:12px}
.etapes{list-style:none;counter-reset:etape;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.etapes li{counter-increment:etape;position:relative;padding-left:46px;font-size:16px;color:var(--texte-3);min-height:30px;display:block;padding-top:2px}
.etapes li::before{content:counter(etape);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:999px;
  background:var(--chip);color:var(--bleu);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
.etapes li b{color:var(--encre)}

/* Prompt à copier */
.prompt{position:relative;margin:14px 0 0;background:#0f1220;border-radius:14px;padding:20px 22px;padding-right:112px}
.prompt .lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a90b8;margin-bottom:10px}
.prompt code{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-size:14.5px;line-height:1.6;
  color:#e7e9f6;white-space:pre-wrap;display:block}
.prompt code .v{color:#9db4ff}
.copy{position:absolute;top:16px;right:16px;appearance:none;border:1px solid #2c3356;background:#1a2040;color:#cfd6ff;
  font-family:inherit;font-weight:700;font-size:12.5px;padding:8px 14px;border-radius:999px;cursor:pointer}
.copy.ok{background:var(--vert);border-color:var(--vert);color:#fff}

/* Zones de réponse */
.lignes{margin:16px 0 0;display:flex;flex-direction:column;gap:20px}
.ligne{border-bottom:1.5px dotted var(--bord);height:1.4em}
.cases{margin:14px 0 0;display:flex;flex-direction:column;gap:11px}
.case{display:flex;align-items:flex-start;gap:14px;font-size:15.5px;color:var(--texte-3)}
.case .box{width:22px;height:22px;border:1.6px solid var(--bord-input);border-radius:6px;flex-shrink:0;margin-top:1px}
.grille{margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:620px){.grille{grid-template-columns:1fr}}
.pastille-item{padding:14px 18px;border:1px solid var(--bord);border-radius:12px;background:#fff;font-size:15px}
.pastille-item b{color:var(--bleu)}

/* Corrigé */
details.corrige{margin:22px 0 0;border-top:1px dashed var(--bord);padding-top:18px}
details.corrige summary{cursor:pointer;font-weight:700;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--bleu);list-style:none}
details.corrige summary::-webkit-details-marker{display:none}
details.corrige summary::before{content:"▸ ";color:var(--bleu)}
details.corrige[open] summary::before{content:"▾ "}
.corrige-corps{margin:14px 0 0;font-size:15.5px;color:var(--texte-3);line-height:1.62}
.corrige-corps b{color:var(--encre)}
.corrige-corps ul{margin:8px 0 0;padding-left:20px}
.corrige-corps li{margin:4px 0}

/* Atelier final */
.atelier{margin:40px 0 0;background:var(--encre);color:#e7e9f2;border-radius:22px;padding:40px 42px;break-inside:avoid}
.atelier .lbl{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--bleu-clair)}
.atelier h2{color:#fff;font-size:28px;letter-spacing:-.025em;margin:10px 0 0}
.atelier p{color:#c7cbe0;font-size:16px;margin:14px 0 0}
.atelier .etapes li{color:#d2d6ea}
.atelier .etapes li b{color:#fff}
.atelier .etapes li::before{background:rgba(91,116,255,.18);color:var(--bleu-clair)}
.atelier .prompt{background:#070912;border:1px solid #232a4a}
.atelier .attendu{background:rgba(19,131,90,.14);border-color:rgba(19,131,90,.4)}
.atelier .attendu .lbl{color:#53c99a}.atelier .attendu .corps{color:#bfe8d6}

footer{margin-top:54px;color:var(--attenue);font-size:13px;text-align:center}
footer a{color:var(--bleu)}
.nav-retour{margin:30px 0 0}
.nav-retour a{color:var(--bleu);text-decoration:none;font-weight:600;font-size:14px}

/* Impression */
@media print{
  .actions,.nav-retour,.copy{display:none !important}
  body{background:#fff}
  .wrap{max-width:none;padding:0 6mm}
  .exo,.avant{box-shadow:none;border:1px solid #dfe2ea}
  .atelier{background:#fff;color:#111;border:1.5px solid var(--encre)}
  .atelier h2,.atelier .etapes li b{color:#111}.atelier p,.atelier .etapes li{color:#333}
  .prompt{background:#f3f4f8 !important;border:1px solid #d7dae6}
  .prompt code,.prompt .lbl{color:#1b2140 !important}
  .atelier .prompt code{color:#1b2140 !important}
  details.corrige .corrige-corps{display:block !important}
  header{padding-top:4mm}
}