/* Virgule — shared widget visual language
   Grammar: question → manipulation → feedback → result.
   This layer harmonises the shell without flattening each widget's
   pedagogical visualization into one template.
*/
.block-widget{
  margin-block:clamp(28px,5vw,48px);
  padding-block:clamp(18px,3vw,28px);
  border-block:1px solid var(--card-border,rgba(232,245,232,.12));
  background:transparent;
}
.block-widget > [class$="-widget"]{
  width:min(100%,640px);
  margin-inline:auto;
  background:transparent !important;
  box-shadow:none !important;
}
.block-widget .widgetLoading,
.block-widget .widgetError{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-block:1px solid var(--card-border,rgba(232,245,232,.14));
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--craie-pale,rgba(232,245,232,.68));
  text-align:center;
}
.block-widget [class*="-readout"],
.block-widget [class*="-total"]{
  border-radius:0 !important;
  box-shadow:none !important;
}
.block-widget [class*="-btn"]:not([class*="back"]):not([class*="icon"]),
.block-widget [class*="-zone"]{
  min-height:44px;
  border-radius:0 !important;
  box-shadow:none !important;
}
.block-widget [class*="-feedback"],
.block-widget [class*="-hint"]{
  min-height:24px;
  margin-inline:auto;
  padding-block:8px;
  border-inline-start:2px solid var(--craie-doree,#D9A857);
  padding-inline-start:12px;
  text-align:start;
}
.block-widget [class*="-feedback"][class*="wrong"],
.block-widget [class*="-feedback"][class*="error"]{
  border-inline-start-color:var(--wrong,#ef4444);
}
.block-widget [class*="-feedback"][class*="correct"],
.block-widget [class*="-feedback"][class*="success"]{
  border-inline-start-color:var(--correct,#22c55e);
}
.block-widget input[type="range"]{
  accent-color:var(--craie-doree,#D9A857);
}
.block-widget button:focus-visible,
.block-widget input:focus-visible,
.block-widget select:focus-visible{
  outline:2px solid var(--craie-doree,#D9A857);
  outline-offset:3px;
}
@media (max-width:600px){
  .block-widget{
    margin-block:24px;
    padding-block:16px;
  }
}
@media (prefers-reduced-motion:reduce){
  .block-widget *,
  .block-widget *::before,
  .block-widget *::after{
    scroll-behavior:auto !important;
  }
}