/* Virgule — Exercice art direction 01
   A practice sheet, not a dashboard.
   Editorial hierarchy, open paper, restrained instrument language.
   No gradients. No decorative shadows. No logic changes.
*/
.exercice-art-direction .page{
  max-width:1120px;
  padding-top:42px;
}
.exercice-art-direction .page::before{
  content:"EXERCICES / PRACTICE";
  display:block;
  margin-bottom:14px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.18em;
  color:var(--craie-muted);
}
.exercice-art-direction .ex-toprow{
  position:relative;
  min-height:116px;
  padding:18px 0 24px;
  align-items:flex-end;
  border-bottom:1px solid var(--card-border);
}
.exercice-art-direction .ex-toprow::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  bottom:-1px;
  width:72px;
  height:3px;
  background:var(--craie-doree);
}
.exercice-art-direction .ex-breadcrumb{
  align-self:flex-start;
  font-size:12px;
  letter-spacing:.02em;
}
.exercice-art-direction .ex-breadcrumb a{
  text-decoration:none;
  color:var(--craie-muted);
}
.exercice-art-direction .ex-breadcrumb a:hover{color:var(--craie-doree)}
.exercice-art-direction .ex-counter{
  order:2;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  padding:0;
  color:var(--craie-doree);
}
.exercice-art-direction .btn-mixte{
  order:1;
  border:0;
  border-inline-start:1px solid var(--craie-doree-border);
  border-radius:0;
  padding:7px 12px;
  background:transparent;
  font-size:11px;
  letter-spacing:.04em;
}
.exercice-art-direction .ex-progress{
  margin:0 0 44px;
  padding-top:10px;
  border:0;
}
.exercice-art-direction .ex-prog-dots{
  gap:3px;
}
.exercice-art-direction .prog-dot{
  height:3px;
  border-radius:0;
  background:rgba(232,245,232,.10);
}
.exercice-art-direction .prog-dot.active{background:var(--craie-doree-border)}
.exercice-art-direction .prog-dot.done{background:var(--craie-doree)}
.exercice-art-direction .prog-dot.wrong-done{background:var(--wrong)}

.exercice-art-direction .ex-card{
  position:relative;
  margin-bottom:56px;
  border:0;
  border-radius:0;
  background:transparent;
  overflow:visible;
}
.exercice-art-direction .ex-card::before{
  content:"";
  position:absolute;
  inset-inline-start:-28px;
  top:0;
  bottom:0;
  width:1px;
  background:var(--card-border);
}
.exercice-art-direction .ex-card-header{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:20px;
  padding:0 0 14px;
  border-bottom:1px solid var(--card-border);
}
.exercice-art-direction .ex-num{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.18em;
  color:var(--craie-doree);
}
.exercice-art-direction .ex-diff{
  border:0;
  border-bottom:1px solid currentColor;
  border-radius:0;
  background:transparent;
  padding:3px 0;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.exercice-art-direction .ex-enonce{
  max-width:820px;
  padding:30px 0 28px;
  font-size:clamp(19px,2.1vw,27px);
  line-height:1.45;
  color:var(--craie);
  letter-spacing:-.015em;
}
.exercice-art-direction .ex-formula{
  margin:0;
  padding:18px 0;
  border-block:1px solid var(--craie-doree-border);
  border-inline:0;
  border-radius:0;
  background:transparent;
  text-align:start;
  font-size:clamp(20px,3vw,32px);
  color:var(--craie-doree);
}
.exercice-art-direction .ex-opts{
  max-width:820px;
  padding:26px 0 18px;
  gap:0;
}
.exercice-art-direction .ex-opt,
.exercice-art-direction .ex-tf-btn{
  min-height:64px;
  padding:13px 0;
  border:0;
  border-bottom:1px solid var(--card-border);
  border-radius:0;
  background:transparent;
  color:var(--craie);
  font-size:15px;
}
.exercice-art-direction .ex-opt:hover:not(:disabled){
  transform:none;
  background:rgba(217,168,87,.035);
}
.exercice-art-direction .ex-opt.correct{
  background:rgba(217,168,87,.055);
  border-color:var(--craie-doree);
  color:var(--craie);
}
.exercice-art-direction .ex-opt.wrong{
  background:rgba(210,90,82,.055);
  border-color:var(--wrong);
  color:var(--craie);
}
.exercice-art-direction .opt-ltr{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid currentColor;
  color:var(--craie-muted);
}
.exercice-art-direction .pourquoi-box,
.exercice-art-direction .hint-box,
.exercice-art-direction .correction-box{
  max-width:820px;
  margin-inline:0;
  border:0;
  border-inline-start:2px solid var(--craie-doree);
  border-radius:0;
  background:transparent;
  padding:14px 18px;
  line-height:1.7;
}
.exercice-art-direction .pourquoi-box{border-inline-start-color:var(--wrong)}
.exercice-art-direction .correction-box{border-block:0}
.exercice-art-direction .correction-label{
  color:var(--craie-doree);
}
.exercice-art-direction .hints-row{
  padding:12px 0;
}
.exercice-art-direction .hint-btn{
  border:0;
  border-bottom:1px solid var(--card-border);
  border-radius:0;
  padding:8px 0;
  background:transparent;
  color:var(--craie-muted);
}
.exercice-art-direction .hint-btn:hover{
  color:var(--craie-doree);
  background:transparent;
}
.exercice-art-direction .ex-open{
  max-width:820px;
  padding:26px 0 18px;
}
.exercice-art-direction .ex-textarea{
  min-height:150px;
  border:1px solid var(--card-border);
  border-radius:0;
  background:transparent;
  padding:18px;
}
.exercice-art-direction .ex-textarea:focus{
  border-color:var(--craie-doree-border);
}
.exercice-art-direction .ex-actions{
  max-width:820px;
  padding:22px 0 0;
  border-top:1px solid var(--card-border);
}
.exercice-art-direction .btn-reveal,
.exercice-art-direction .btn-next-ex,
.exercice-art-direction .btn-next-chap,
.exercice-art-direction .btn-retry-ex{
  min-height:48px;
  border-radius:0;
}
.exercice-art-direction .btn-next-ex,
.exercice-art-direction .btn-next-chap{
  padding-inline:22px;
  background:var(--craie-doree);
  color:var(--ardoise);
}
.exercice-art-direction .result-bar{
  border:0;
  border-block:1px solid var(--card-border);
  border-radius:0;
  background:transparent;
  padding:36px 0;
}
.exercice-art-direction .result-score-big{
  font-size:clamp(48px,7vw,84px);
  line-height:.9;
}
.exercice-art-direction .result-info-title{
  font-size:clamp(22px,3vw,34px);
}
.exercice-art-direction .result-info-sub{
  max-width:48ch;
  line-height:1.6;
}
.exercice-art-direction .result-actions{
  gap:8px;
}
.exercice-art-direction .xp-flash{
  border-radius:0;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--craie-doree-border);
  padding:4px 0;
}
@media(max-width:767px){
  .exercice-art-direction .page{
    padding:28px 16px 60px;
  }
  .exercice-art-direction .page::before{
    margin-bottom:8px;
  }
  .exercice-art-direction .ex-toprow{
    min-height:104px;
    padding-bottom:18px;
  }
  .exercice-art-direction .ex-card::before{display:none}
  .exercice-art-direction .ex-enonce{
    padding:24px 0;
    font-size:19px;
    line-height:1.5;
  }
  .exercice-art-direction .ex-formula{
    padding:16px 0;
    overflow:auto;
  }
  .exercice-art-direction .ex-opt,
  .exercice-art-direction .ex-tf-btn{
    min-height:60px;
  }
  .exercice-art-direction .result-bar{
    align-items:flex-start;
  }
}
@media(prefers-reduced-motion:reduce){
  .exercice-art-direction .ex-opt:hover:not(:disabled){transform:none}
}