:root{
  --bg:#ffffff; --fg:#0a0a0a; --muted:#6b7280;
  --line:#e5e7eb; --surface:#f8fafc; --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--fg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height:1.6;
}

/* Header */
header{
  display:flex; align-items:center; justify-content:center;
  padding:28px 20px; border-bottom:1px solid var(--line);
  background:var(--bg); position:sticky; top:0; z-index:10;
}
.brand {
  font-weight:400;        /* normal (au lieu de 800) */
  font-size:5rem;         /* plus gros (2rem → 3rem) */
  letter-spacing:0.55rem; /* tu peux élargir si tu veux encore plus d'espace */
}


/* Lessons */
.lessons{
  display:grid; gap:24px; padding:28px 24px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.lesson-card{
  position:relative; border:1px solid #cdd5df;
  border-radius:28px; background:#f6f7f8;
  padding:28px; min-height:160px; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.lesson-card:hover{
  transform: translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  background:#f1f5f9;
}
.lesson-card .title{
  font-weight:800; font-size:1.35rem; margin-bottom:8px; letter-spacing:.02em
}
.lesson-card .hint{ color:var(--muted); font-size:1rem }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:24px;
  transform:translateX(-50%) translateY(20px);
  background:#111; color:#fff; padding:10px 14px;
  border-radius:999px; font-weight:600; font-size:.95rem;
  opacity:0; transition: transform .25s ease, opacity .25s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.18); pointer-events:none;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }

footer{
  padding:20px; text-align:center; font-size:.9rem;
  color:var(--muted); border-top:1px solid var(--line)
}

body, header {
  background: #f0f0f0;   /* gris clair uniforme */
  transition: background 0.3s ease;
}

header {
  display: flex;
  align-items: center;
  justify-content: center; /* centre le contenu global */
  position: relative;      /* permet de placer la libellule */
  height: 120px;            /* ajuste la hauteur si besoin */
}

/* libellule collée à gauche */
header .libellule {
  position: absolute;
  left: 350px;              /* marge gauche */
  top: 60%;
  transform: translateY(-50%); /* centre verticalement */
}

/* on garde la brand telle qu’elle est (ta config actuelle),
   rien à changer ici sauf si tu veux la recentrer finement */


/*----------------------------------------------------------

/* Cache/affiche les sections */
.lessons[hidden], .workspace[hidden] { display: none !important; }

/* Topbar workspace */
.workspace .workspace-topbar{
  display:flex; align-items:center; justify-content:center;
  gap:12px; padding:12px 16px;
}
.workspace .workspace-topbar .back{
  position:absolute; left:16px;
  padding:6px 10px; border-radius:8px; border:1px solid #ddd; cursor:pointer; background:#fff;
}
.workspace .lesson-title{ font-size:1.1rem; letter-spacing:.35rem; }

/* Split panes */
.workspace .split{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px;
  padding: 0 16px 16px;
}
.pane{
  background:#fff; border:1px solid #e6e6e6; border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  display:flex; flex-direction:column; min-height:60vh;
}
.pane-title{
  font-size:.9rem; opacity:.7; padding:10px 12px; border-bottom:1px solid #eee;
}
#editor{
  flex:1; resize:none; border:0; outline:0; font:14px/1.5 Menlo, Monaco, Consolas, monospace;
  padding:12px; background:#fafafa; border-radius:0 0 12px 12px;
}
.actions{ padding:10px 12px; border-top:1px solid #eee; background:#fff; }
.actions .run{ padding:8px 12px; border-radius:8px; border:1px solid #ddd; cursor:pointer; background:#fff; }

.console-output{
  flex:1; margin:0; padding:12px; background:#0f172a; color:#e5e7eb;
  border-radius:0 0 12px 12px; overflow:auto; font:13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Responsive */
@media (max-width: 900px){
  .workspace .split{ grid-template-columns: 1fr; }
}