/* Styles d'application (spécifiques au site) */
main.container{ padding: 18px 0 0 0; min-height: calc(100vh - 140px); }

.hero{
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(110,168,254,.14), rgba(126,227,192,.09));
  box-shadow: var(--shadow);
}
.hero h1{ margin:0 0 8px 0; font-size: 1.65rem; letter-spacing:.2px; }
.hero p{ margin:0; color: var(--muted); line-height:1.5; }

.list{ display:flex; flex-direction:column; gap: 12px; }
.exercise-card{ padding: 16px; display:flex; flex-direction:column; gap: 10px; }
.exercise-card__top{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; }
.exercise-card__meta{ display:flex; gap:10px; flex-wrap:wrap; }

.two-col{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
}
@media (max-width: 900px){ .two-col{ grid-template-columns: 1fr; } }

.statement{
  color: var(--text);
  line-height: 1.55;
}
.statement ol{ margin: 10px 0 0 18px; }
.statement li{ margin: 6px 0; }
.muted{ color: var(--muted); }

.callout{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 14px;
  background: rgba(255,255,255,.03);
}
.callout--warn{ border-color: rgba(255,204,102,.35); background: rgba(255,204,102,.06); }
.callout--tip{ border-color: rgba(126,227,192,.25); background: rgba(126,227,192,.06); }

.answer-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  align-items:end;
}
.answer-grid .span-4{ grid-column: span 4; }
.answer-grid .span-3{ grid-column: span 3; }
.answer-grid .span-6{ grid-column: span 6; }
.answer-grid .span-12{ grid-column: span 12; }
@media (max-width: 900px){
  .answer-grid .span-4, .answer-grid .span-3, .answer-grid .span-6{ grid-column: span 12; }
}

.feedback{
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--muted);
}
.feedback--ok{
  border-color: rgba(101,230,166,.35);
  background: rgba(101,230,166,.08);
  color: rgba(101,230,166,.95);
}
.feedback--bad{
  border-color: rgba(255,107,107,.35);
  background: rgba(255,107,107,.08);
  color: rgba(255,107,107,.95);
}

.diagram-wrap{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(0,0,0,.12);
  overflow:hidden;
}
.diagram-toolbar{
  display:flex; gap: 10px; flex-wrap:wrap;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.03);
}
.diagram-area{ padding: 10px; }

svg.diagram{ width:100%; height: auto; display:block; }
svg.diagram text{ font-family: var(--sans); fill: rgba(234,240,255,.86); }
svg.diagram .axis{ stroke: rgba(234,240,255,.35); stroke-width:2; }
svg.diagram .lens{ stroke: rgba(110,168,254,.9); stroke-width:4; }
svg.diagram .ray{ stroke: rgba(126,227,192,.95); stroke-width:3; fill:none; }
svg.diagram .ray.dashed{ stroke-dasharray: 7 7; opacity:.75; }
svg.diagram .obj{ stroke: rgba(234,240,255,.9); stroke-width:4; }
svg.diagram .img{ stroke: rgba(255,204,102,.95); stroke-width:4; }
svg.diagram .pt{ fill: rgba(234,240,255,.85); }
svg.diagram .label{ font-size: 14px; fill: rgba(234,240,255,.8); }

.diagram-hidden{ opacity:0; }
.diagram-visible{ opacity:1; transition: opacity .35s ease; }

.codebox{
  font-family: var(--mono);
  font-size: .92rem;
  line-height:1.55;
  white-space: pre-wrap;
  background: rgba(0,0,0,.22);
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  color: rgba(234,240,255,.9);
}