/* SOUNDGUIDE — "Atelier" fiche design (same look as data/tenses2/atelier-des-temps.html),
   scoped under .atelier so it can live inside a normal site page.
   Used by leaf pages with a "fiche" key (see build.py). Fonts: Fraunces / Work Sans /
   JetBrains Mono, loaded from Google Fonts in the page head. */
.atelier{
  --paper:#EEF2F8;
  --paper-raised:#FFFFFF;
  --ink:#17264A;
  --ink-soft:#57698C;
  --line:#DEE4F0;
  --violet:#F5871F;
  --violet-soft:#FDEAD6;
  --violet-strong:#B85C0A;
  --coral:#D6455B;
  --coral-soft:#FBE1E5;
  --coral-strong:#A62E42;
  --teal:#2E6DA4;
  --teal-soft:#E1EBF6;
  --teal-strong:#1F4E7A;
  --amber:#A8721F;
  --amber-soft:#F6EAD3;
  --shadow:0 1px 2px rgba(23,38,74,0.05), 0 8px 24px -12px rgba(23,38,74,0.18);
  color:var(--ink);
  font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  line-height:1.55;
  max-width:920px;
  margin:10px 0 30px;
}
.atelier *{box-sizing:border-box}
.atelier h2,.atelier h3{font-family:"Fraunces", Georgia, serif;text-wrap:balance;margin:0;color:var(--ink)}
.atelier a{color:var(--violet-strong)}

/* ---------- Hero ---------- */
.atelier .hero{
  padding:36px clamp(22px,5vw,52px) 34px;
  border-radius:20px;
  background:linear-gradient(135deg, var(--ink) 0%, var(--ink) 45%, var(--violet) 100%);
  box-shadow:var(--shadow);
}
.atelier .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:0.75rem;letter-spacing:0.14em;text-transform:uppercase;
  color:#FFDCB0;font-weight:600;margin:0 0 12px;
}
.atelier .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;display:inline-block}
.atelier .hero h2{font-size:clamp(1.9rem,4.5vw,2.8rem);font-weight:600;color:#fff}
.atelier .hero h2 em{font-style:italic;color:#FFDCB0;font-weight:500}
.atelier .hero p.lede{margin:14px 0 0;max-width:56ch;font-size:1.05rem;color:rgba(255,255,255,0.9)}
.atelier .hero p.lede a{color:#FFDCB0}

/* ---------- Rail (table of contents) ---------- */
.atelier .rail-label{
  font-family:"JetBrains Mono", monospace;font-size:0.72rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-soft);margin:30px 0 12px;
}
.atelier .rail{display:flex;gap:10px;overflow-x:auto;padding:4px 4px 14px 0;flex-wrap:wrap}
.atelier .chip{
  flex:0 0 auto;font-family:"JetBrains Mono", monospace;font-size:0.82rem;font-weight:500;
  padding:10px 16px;border-radius:10px;border:1.5px solid var(--violet);
  background:var(--violet);color:#fff;white-space:nowrap;display:flex;align-items:center;gap:8px;
  text-decoration:none;box-shadow:var(--shadow);
}
.atelier .chip .num{color:rgba(255,255,255,0.8);font-size:0.78em}
.atelier .chip:hover{background:var(--violet-strong);border-color:var(--violet-strong);text-decoration:none}

/* ---------- Fiche card ---------- */
.atelier .fiche{
  margin-top:26px;
  background:
    repeating-linear-gradient(to bottom, transparent 0px, transparent 35px, var(--line) 36px),
    var(--paper-raised);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:40px clamp(20px,5vw,52px) 48px;
}
.atelier .fiche-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
  padding-bottom:20px;border-bottom:2px solid var(--ink);
}
.atelier .fiche-head h2{font-size:clamp(1.7rem,4vw,2.3rem);font-weight:600}
.atelier .fiche-head .tag{font-family:"JetBrains Mono", monospace;font-size:0.85rem;color:var(--ink-soft)}
.atelier .fiche-intro{margin:16px 0 0;color:var(--ink-soft);font-size:1.02rem;max-width:62ch}

/* ---------- Legend ---------- */
.atelier .legend{
  display:flex;flex-wrap:wrap;gap:18px;margin:22px 0 6px;padding:14px 18px;
  background:var(--violet-soft);border-radius:12px;
}
.atelier .legend-item{display:flex;align-items:center;gap:8px;font-size:0.85rem;color:var(--ink)}
.atelier .legend-item small{color:var(--ink-soft);font-family:"JetBrains Mono",monospace;font-size:0.72rem}
.atelier .swatch{width:13px;height:13px;border-radius:4px;flex:none}
.atelier .swatch.subject{background:var(--violet)}
.atelier .swatch.aux{background:var(--teal)}
.atelier .swatch.verb{background:var(--coral)}

/* ---------- Sections ---------- */
.atelier section.block{margin-top:44px}
.atelier .block .kicker{
  font-family:"JetBrains Mono",monospace;font-size:0.72rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--coral);font-weight:600;margin:0 0 6px;
}
.atelier .block h3{font-size:1.5rem;font-weight:600;margin-bottom:18px}
.atelier p{margin:0 0 12px}

/* usage rows */
.atelier .usage-list{display:flex;flex-direction:column}
.atelier .usage-row{
  display:grid;grid-template-columns:170px 1fr;gap:18px;
  padding:16px 0;border-bottom:1px dashed var(--line);
}
.atelier .usage-row:last-child{border-bottom:none}
.atelier .usage-label{
  font-family:"JetBrains Mono",monospace;font-size:0.78rem;font-weight:600;
  color:var(--violet-strong);background:var(--violet-soft);border-radius:8px;
  padding:6px 10px;height:fit-content;line-height:1.3;
}
.atelier .usage-ex{font-size:1.02rem}
.atelier .usage-fr{color:var(--ink-soft);font-style:italic;font-size:0.92rem;margin-top:4px}
@media (max-width:600px){
  .atelier .usage-row{grid-template-columns:1fr;gap:6px}
  .atelier .usage-label{width:fit-content}
}

/* formula panels */
.atelier .formulas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:720px){.atelier .formulas{grid-template-columns:1fr}}
.atelier .formula-card{border-radius:14px;padding:18px 18px 20px}
.atelier .formula-card.affirm{background:var(--violet-soft)}
.atelier .formula-card.neg{background:var(--coral-soft)}
.atelier .formula-card.quest{background:var(--teal-soft)}
.atelier .formula-card .flabel{
  font-family:"JetBrains Mono",monospace;font-size:0.72rem;text-transform:uppercase;
  letter-spacing:0.08em;font-weight:700;margin-bottom:12px;
}
.atelier .formula-card.affirm .flabel{color:var(--violet-strong)}
.atelier .formula-card.neg .flabel{color:var(--coral-strong)}
.atelier .formula-card.quest .flabel{color:var(--teal-strong)}
.atelier .formula-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.atelier .pill{
  font-family:"JetBrains Mono",monospace;font-size:0.78rem;font-weight:600;
  padding:5px 10px;border-radius:7px;line-height:1.2;
}
.atelier .pill--subject{background:var(--violet);color:#fff}
.atelier .pill--aux{background:var(--teal);color:#fff}
.atelier .pill--verb{background:var(--coral);color:#fff}
.atelier .pill--plain{background:transparent;border:1.5px solid var(--ink-soft);color:var(--ink-soft)}
.atelier .formula-example{font-size:0.92rem;color:var(--ink);padding-top:8px;border-top:1px solid rgba(0,0,0,0.08)}
.atelier .formula-example b{font-weight:600}

/* spelling / recap table */
.atelier .table-scroll{overflow-x:auto}
.atelier .spell-table{margin-top:22px;width:100%;border-collapse:collapse;font-size:0.92rem}
.atelier .spell-table th{
  text-align:left;font-family:"JetBrains Mono",monospace;font-size:0.72rem;text-transform:uppercase;
  letter-spacing:0.06em;color:var(--ink-soft);padding:8px 10px;border-bottom:2px solid var(--ink);
}
.atelier .spell-table td{padding:10px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.atelier .spell-table td:first-child{font-weight:600;white-space:nowrap}
.atelier .spell-table .ex{font-family:"JetBrains Mono",monospace;color:var(--teal-strong)}

/* compare pairs */
.atelier .compare-note{font-size:0.9rem;color:var(--ink-soft);margin:0 0 10px;font-weight:600}
.atelier .compare-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}
@media (max-width:600px){.atelier .compare-pair{grid-template-columns:1fr}}
.atelier .compare-pair .side{border-radius:12px;padding:14px 16px}
.atelier .compare-pair .side.simple{background:var(--violet-soft)}
.atelier .compare-pair .side.cont{background:var(--teal-soft)}
.atelier .compare-pair .side .tag2{
  font-family:"JetBrains Mono",monospace;font-size:0.68rem;text-transform:uppercase;
  letter-spacing:0.08em;font-weight:700;display:block;margin-bottom:6px;
}
.atelier .compare-pair .side.simple .tag2{color:var(--violet-strong)}
.atelier .compare-pair .side.cont .tag2{color:var(--teal-strong)}
.atelier .compare-pair .side .sent{font-size:0.98rem}
.atelier .stative-note{font-size:0.96rem;color:var(--ink);margin:24px 0 4px}
.atelier .time-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.atelier .time-tag{font-size:0.82rem;background:var(--amber-soft);color:var(--amber);padding:5px 10px;border-radius:7px;font-weight:600}

/* mistakes */
.atelier .mistakes{display:flex;flex-direction:column;gap:16px}
.atelier .mistake{border-radius:12px;background:var(--paper);border:1px solid var(--line);padding:14px 16px}
.atelier .mistake-line{display:flex;align-items:flex-start;gap:10px;font-size:0.98rem;margin-bottom:6px}
.atelier .mistake-line:last-of-type{margin-bottom:10px}
.atelier .mark{
  flex:none;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:0.85rem;
  width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.atelier .mark.no{background:var(--coral-soft);color:var(--coral-strong)}
.atelier .mark.yes{background:var(--teal-soft);color:var(--teal-strong)}
.atelier .mistake .wrong{color:var(--coral-strong);text-decoration:line-through;text-decoration-color:var(--coral);text-decoration-thickness:1.5px}
.atelier .mistake .right{color:var(--teal-strong);font-weight:600}
.atelier .mistake-note{font-size:0.86rem;color:var(--ink-soft);padding-left:30px}

/* annotated examples */
.atelier .examples{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:680px){.atelier .examples{grid-template-columns:1fr}}
.atelier .example-card{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--paper)}
.atelier .example-en{font-size:1.03rem}
.atelier .example-en .s{color:var(--violet-strong);font-weight:600}
.atelier .example-en .a{color:var(--teal-strong);font-weight:600}
.atelier .example-en .v{color:var(--coral-strong);font-weight:600}
.atelier .example-fr{margin-top:6px;font-size:0.88rem;color:var(--ink-soft);font-style:italic}

/* quiz */
.atelier .quiz-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px}
.atelier .score{
  font-family:"JetBrains Mono",monospace;font-size:0.9rem;font-weight:700;
  background:var(--ink);color:var(--paper);padding:6px 12px;border-radius:8px;
}
.atelier .qcard{border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-top:16px;background:var(--paper)}
.atelier .qtext{font-weight:600;font-size:1.02rem;margin-bottom:12px}
.atelier .qtext .blank{display:inline-block;min-width:2.6em;border-bottom:2px dotted var(--ink-soft)}
.atelier .options{display:flex;flex-wrap:wrap;gap:8px}
.atelier .opt{
  font-family:"Work Sans",sans-serif;font-size:0.92rem;padding:9px 14px;border-radius:9px;
  border:1.5px solid var(--line);background:var(--paper-raised);color:var(--ink);cursor:pointer;
}
.atelier .opt:hover{border-color:var(--violet)}
.atelier .opt:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.atelier .opt.correct{background:var(--teal-soft);border-color:var(--teal);color:var(--teal-strong)}
.atelier .opt.wrong{background:var(--coral-soft);border-color:var(--coral);color:var(--coral-strong)}
.atelier .opt[disabled]{cursor:default}
.atelier .fill-row{display:flex;gap:8px;flex-wrap:wrap}
.atelier .fill-row input{
  font-family:"JetBrains Mono",monospace;font-size:0.95rem;padding:8px 12px;border-radius:8px;
  border:1.5px solid var(--line);background:var(--paper-raised);color:var(--ink);min-width:140px;
}
.atelier .fill-row input:focus-visible{outline:2px solid var(--violet);outline-offset:1px}
.atelier .fill-row button{
  font-family:"Work Sans",sans-serif;font-weight:600;font-size:0.9rem;padding:8px 16px;
  border-radius:8px;border:none;background:var(--violet);color:#fff;cursor:pointer;
}
.atelier .fill-row button[disabled]{opacity:0.5;cursor:default}
.atelier .explain{
  margin:12px 0 0;font-size:0.88rem;color:var(--ink-soft);display:none;
  border-left:2px solid var(--line);padding-left:10px;
}
.atelier .explain.show{display:block}
.atelier .quiz-footer{margin-top:20px;display:flex;justify-content:flex-end}
.atelier .reset-btn{
  font-family:"Work Sans",sans-serif;font-size:0.85rem;font-weight:600;background:none;
  border:1.5px solid var(--line);color:var(--ink-soft);padding:8px 14px;border-radius:8px;cursor:pointer;
}
.atelier .reset-btn:hover{border-color:var(--violet);color:var(--violet)}

/* footer link to the sibling fiche */
.atelier footer.next{
  margin-top:28px;padding:18px 22px;border-radius:14px;background:var(--ink);color:var(--paper);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
}
.atelier footer.next .label{font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;font-family:"JetBrains Mono",monospace;opacity:0.7}
.atelier footer.next .name{font-family:"Fraunces",serif;font-size:1.2rem;font-weight:600;margin-top:2px}
.atelier footer.next a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(244,242,247,0.4)}
.atelier footer.next a:hover{border-color:currentColor}