:root{
  --ground:#FAF9F6;
  --surface:#FFFFFF;
  --sunk:#F1EFE9;
  --ink:#1B2A2E;
  --ink-2:#41545A;
  --ink-3:#6E7F84;
  --rule:#DCD9D0;
  --rule-soft:#E9E6DE;
  --accent:#0F6E6E;
  --accent-soft:#E2EFED;
  --open:#B4531A;
  --open-soft:#F7EBE1;
  --infer:#6B5E52;
  --infer-soft:#F0ECE5;
  --optimistic:#2E7D32;
  --pessimistic:#C62828;
  --zone:rgba(27,42,46,.14);
  --real:#1B2A2E;
  --shadow:0 1px 2px rgba(27,42,46,.05);

  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --measure:68ch;
  --gutter:4.5rem;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#12191B;
    --surface:#182124;
    --sunk:#1E282B;
    --ink:#E8EDEC;
    --ink-2:#AFC0C2;
    --ink-3:#7E9296;
    --rule:#2C393D;
    --rule-soft:#242F32;
    --accent:#5FB8B0;
    --accent-soft:#1B3230;
    --open:#E0955C;
    --open-soft:#33261C;
    --infer:#B0A392;
    --infer-soft:#282320;
    --optimistic:#6FBF73;
    --pessimistic:#EF7A72;
    --zone:rgba(232,237,236,.18);
    --real:#E8EDEC;
    --shadow:0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --ground:#12191B;
  --surface:#182124;
  --sunk:#1E282B;
  --ink:#E8EDEC;
  --ink-2:#AFC0C2;
  --ink-3:#7E9296;
  --rule:#2C393D;
  --rule-soft:#242F32;
  --accent:#5FB8B0;
  --accent-soft:#1B3230;
  --open:#E0955C;
  --open-soft:#33261C;
  --infer:#B0A392;
  --infer-soft:#282320;
  --optimistic:#6FBF73;
  --pessimistic:#EF7A72;
  --zone:rgba(232,237,236,.18);
  --real:#E8EDEC;
  --shadow:0 1px 2px rgba(0,0,0,.3);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.page{
  max-width:calc(var(--measure) + var(--gutter) + 6rem);
  margin:0 auto;
  padding:clamp(2rem,6vw,5rem) clamp(1.1rem,4vw,3rem) 6rem;
}

a{color:var(--accent);text-underline-offset:.18em}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- en-tête ---------- */

.masthead{
  display:flex;
  flex-direction:column;
  gap:1.3rem;
  padding-bottom:1.8rem;
  border-bottom:2px solid var(--ink);
}

.kicker{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}

h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2rem,5.2vw,2.9rem);
  line-height:1.08;
  letter-spacing:-.018em;
  margin:0;
  text-wrap:balance;
}
h1 .sub{
  display:block;
  font-size:.4em;
  font-weight:400;
  font-style:italic;
  color:var(--ink-3);
  letter-spacing:0;
  margin-top:.5rem;
}

.masthead-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.75rem;
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--ink-3);
}
.masthead-meta b{
  color:var(--ink-2);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.9em;
  margin-right:.35em;
}

.usage{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.5rem .9rem;
  padding:.9rem 1.1rem;
  background:var(--open-soft);
  border-left:3px solid var(--open);
  border-radius:0 4px 4px 0;
  font-size:.88rem;
  color:var(--ink-2);
}
.usage .tag{
  font-family:var(--mono);
  font-size:.63rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--open);
  white-space:nowrap;
}
.usage span:last-child{flex:1;min-width:16rem}

/* ---------- carte US ---------- */

.uscard{
  margin:2.5rem 0 0;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:5px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.uscard-head{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.4rem;
  align-items:center;
  padding:.7rem 1.4rem;
  background:var(--sunk);
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.uscard-head .id{color:var(--accent)}
.uscard-head .id .hint{
  color:var(--ink-3);
  font-weight:400;
  letter-spacing:.06em;
  text-transform:none;
  margin-left:.5rem;
}
.uscard-head .todo{
  color:var(--ink-3);
  font-weight:400;
  border:1px dashed var(--rule);
  border-radius:100px;
  padding:.12rem .7rem;
  letter-spacing:.08em;
}
.uscard-head .todo b{
  color:var(--ink-2);
  font-weight:600;
  margin-right:.4rem;
}

.uscard-body{padding:1.5rem 1.4rem 1.6rem}

.story{
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:.35rem 1rem;
  margin:0 0 1.4rem;
  align-items:baseline;
}
.story dt{
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding-top:.15rem;
}
.story dd{
  margin:0;
  font-family:var(--display);
  font-size:1.14rem;
  line-height:1.4;
  color:var(--ink);
}

.why{
  font-size:.92rem;
  color:var(--ink-2);
  padding-top:1.2rem;
  border-top:1px solid var(--rule-soft);
  margin:0;
}
.why b{color:var(--ink)}

/* ---------- critères d'acceptation ---------- */

.accept{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1rem;
  margin:1.6rem 0 0;
}
.accept-col h3{
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin:0 0 .7rem;
  color:var(--accent);
}
.accept-col ol{
  margin:0;
  padding-left:1.15rem;
  font-size:.92rem;
  color:var(--ink-2);
}
.accept-col li{margin-bottom:.45rem}
.accept-col li b{color:var(--ink)}

/* ---------- temps de la séquence ---------- */

.beat{
  display:grid;
  grid-template-columns:var(--gutter) minmax(0,1fr);
  gap:0 1.5rem;
  margin-top:3.2rem;
}
.beat > *{grid-column:2}

.beat-n{
  grid-column:1;
  grid-row:1 / span 40;
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:600;
  color:var(--accent);
  letter-spacing:.06em;
  padding-top:.6rem;
  font-variant-numeric:tabular-nums;
}

h2{
  font-family:var(--display);
  font-weight:600;
  font-size:1.62rem;
  line-height:1.18;
  letter-spacing:-.012em;
  margin:0 0 .3rem;
  text-wrap:balance;
  max-width:var(--measure);
}

.beat > .beat-lede{
  font-size:.94rem;
  color:var(--ink-3);
  font-style:italic;
  margin:0 0 1.2rem;
  max-width:var(--measure);
}

h3{
  font-family:var(--display);
  font-weight:600;
  font-size:1.16rem;
  line-height:1.3;
  margin:2rem 0 .6rem;
  max-width:var(--measure);
  text-wrap:balance;
}

p{margin:0 0 1rem;max-width:var(--measure)}
ul,ol{max-width:var(--measure);padding-left:1.2rem}
li{margin-bottom:.4rem}

.aside{
  font-size:.9rem;
  color:var(--ink-3);
  font-style:italic;
}

/* ---------- registres ---------- */

.box{
  max-width:var(--measure);
  margin:1.2rem 0 1.4rem;
  padding:1rem 1.2rem;
  border-radius:0 4px 4px 0;
  font-size:.94rem;
  color:var(--ink-2);
}
.box .label{
  display:block;
  font-family:var(--mono);
  font-size:.63rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:.4rem;
}
.box p{margin:0 0 .6rem;font-size:inherit;max-width:none}
.box p:last-child{margin-bottom:0}
.box strong{color:var(--ink)}
.box ul{margin:.3rem 0 0;max-width:none}

/* geste — ce qu'on fait, ce qu'on dessine */
.box.geste{
  background:var(--accent-soft);
  border-left:3px solid var(--accent);
}
.box.geste .label{color:var(--accent)}

/* repère — définition ou vocabulaire, registre neutre */
.box.repere{
  background:var(--sunk);
  border-left:3px solid var(--rule);
}
.box.repere .label{color:var(--ink-3)}

/* vigilance — ce qui demande de l'attention à l'animation */
.box.vigilance{
  background:var(--open-soft);
  border-left:3px solid var(--open);
}
.box.vigilance .label{color:var(--open)}
.box.vigilance .label::before{
  content:"▲ ";
  font-size:.85em;
}

/* réflexe à examiner — stéréotype hérité, à interroger */
.box.reflexe{
  background:var(--infer-soft);
  border-left:3px solid var(--infer);
}
.box.reflexe .label{color:var(--infer)}
.box.reflexe .label::before{content:"↺ ";font-size:.9em}
.box.reflexe .r{
  display:block;
  font-family:var(--display);
  font-style:italic;
  font-size:1.05rem;
  line-height:1.4;
  color:var(--ink);
  margin:.6rem 0 .25rem;
}
.box.reflexe .r + p{margin-bottom:.9rem}

/* ---------- citations ---------- */

.quote{
  max-width:var(--measure);
  margin:1.3rem 0;
  padding:.2rem 0 .2rem 1.3rem;
  border-left:2px solid var(--infer);
  font-family:var(--display);
  font-style:italic;
  font-size:1.1rem;
  line-height:1.45;
  color:var(--ink);
}
.quote cite{
  display:block;
  margin-top:.4rem;
  font-family:var(--mono);
  font-style:normal;
  font-size:.68rem;
  letter-spacing:.08em;
  color:var(--ink-3);
}

/* ---------- tableaux ---------- */

.tw{
  max-width:var(--measure);
  overflow-x:auto;
  margin:1.2rem 0 1.4rem;
}
table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
  min-width:26rem;
}
th,td{
  text-align:left;
  vertical-align:top;
  padding:.6rem .8rem;
  border-bottom:1px solid var(--rule-soft);
}
th{
  font-family:var(--mono);
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
td:first-child{color:var(--ink)}
td strong,th strong{color:var(--ink)}
tbody tr:last-child td{border-bottom:none}

table.verdict td:last-child{color:var(--ink-2)}

/* ---------- exercice ---------- */

.phrase{
  max-width:var(--measure);
  margin:1.1rem 0;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:5px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.phrase-said{
  display:grid;
  grid-template-columns:2.2rem 1fr;
  gap:1rem;
  align-items:baseline;
  padding:1.1rem 1.3rem;
  font-family:var(--display);
  font-size:1.28rem;
  line-height:1.35;
  color:var(--ink);
}
.phrase-said .n{
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:600;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.phrase-key{
  padding:.85rem 1.3rem .95rem;
  border-top:1px solid var(--rule-soft);
  background:var(--sunk);
  font-size:.9rem;
  color:var(--ink-2);
}
.phrase-key .verdict-tag{
  display:inline-block;
  font-family:var(--mono);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  padding:.16rem .6rem;
  border-radius:100px;
  margin-right:.6rem;
  vertical-align:.05em;
}
.verdict-tag.est{background:var(--accent-soft);color:var(--accent)}
.verdict-tag.eng{background:var(--infer-soft);color:var(--infer)}
.phrase-key strong{color:var(--ink)}
.phrase-key p{margin:0;max-width:none}
.phrase-key p + p{margin-top:.5rem}

/* ---------- objections ---------- */

.obj{
  max-width:var(--measure);
  border-top:1px solid var(--rule-soft);
  padding:1.2rem 0 .3rem;
}
.obj-q{
  font-family:var(--display);
  font-size:1.1rem;
  font-weight:600;
  font-style:italic;
  line-height:1.35;
  color:var(--ink);
  margin:0 0 .55rem;
  max-width:none;
}
.obj p{font-size:.94rem;color:var(--ink-2);max-width:none}
.obj p:last-child{margin-bottom:0}
.obj p strong{color:var(--ink)}

/* ---------- hors périmètre ---------- */

.scope{
  max-width:var(--measure);
  list-style:none;
  padding:0;
  margin:1rem 0 0;
}
.scope li{
  padding:.7rem 0 .7rem 1.1rem;
  border-left:2px solid var(--rule);
  margin-bottom:.5rem;
  font-size:.93rem;
  color:var(--ink-2);
}
.scope li b{color:var(--ink)}

/* ---------- ressources ---------- */

.res{
  max-width:var(--measure);
  list-style:none;
  padding:0;
  margin:1rem 0 0;
}
.res li{margin-bottom:1rem;font-size:.94rem}
.res .note{display:block;color:var(--ink-3);font-size:.86rem;font-style:italic;margin-top:.15rem}

footer{
  margin-top:4rem;
  padding-top:1.4rem;
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--ink-3);
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.5rem;
}

@media (max-width:640px){
  :root{--gutter:0px}
  .beat{grid-template-columns:1fr;gap:0}
  .beat > *{grid-column:1 !important}
  .beat-n{grid-row:auto;padding-top:0;margin-bottom:.4rem}
  .story{grid-template-columns:1fr;gap:.1rem}
  .story dt{padding-top:.5rem}
  .phrase-said{grid-template-columns:1.6rem 1fr;gap:.7rem;font-size:1.12rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}


/* ---------- composants complémentaires ---------- */

/* ---------- burn-up ---------- */

.sketch{
  max-width:var(--measure);
  margin:1.3rem 0 1.5rem;
  padding:1.2rem;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:5px;
}
.sketch figcaption{
  font-family:var(--mono);
  font-size:.63rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.9rem;
}
.sketch svg{display:block;width:100%;height:auto}
.sketch .after{
  margin:.9rem 0 0;
  font-size:.88rem;
  color:var(--ink-2);
  max-width:none;
}

/* ---------- exercice ---------- */
/* ---------- manifeste, les 4 valeurs ---------- */

.manifest{
  max-width:var(--measure);
  margin:1.4rem 0 0;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:5px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.manifest-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:.7rem 1rem;
  padding:.95rem 1.2rem;
  border-bottom:1px solid var(--rule-soft);
}
.manifest-row:last-of-type{border-bottom:none}
.manifest-row .left{
  font-weight:600;
  color:var(--ink);
  text-align:right;
  font-size:.98rem;
}
.manifest-row .op{
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-soft);
  padding:.22rem .55rem;
  border-radius:3px;
  white-space:nowrap;
}
.manifest-row .right{
  color:var(--ink-3);
  font-size:.98rem;
}
.manifest-foot{
  padding:.9rem 1.2rem;
  background:var(--sunk);
  border-top:1px solid var(--rule);
  font-size:.92rem;
  color:var(--ink-2);
  font-style:italic;
}
.manifest-foot b{font-style:normal;color:var(--ink)}

@media (max-width:640px){
  .manifest-row{grid-template-columns:1fr;gap:.3rem}
  .manifest-row .left{text-align:left}
  .manifest-row .op{justify-self:start}
}

/* ---------- annexe, les 12 principes ---------- */

details.annex{
  max-width:var(--measure);
  margin:1.2rem 0 0;
  border:1px solid var(--rule);
  border-radius:5px;
  background:var(--surface);
}
details.annex summary{
  cursor:pointer;
  padding:.8rem 1.1rem;
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--accent);
}
details.annex[open] summary{border-bottom:1px solid var(--rule-soft)}
.principles{
  margin:0;
  padding:1rem 1.1rem 1.1rem 2.6rem;
  font-size:.92rem;
  color:var(--ink-2);
}
.principles li{margin-bottom:.6rem}
.principles li b{color:var(--ink)}


/* ---------- vision ---------- */
@scope (.page--vision) {
/* ---------- sections ---------- */

section{
  display:grid;
  grid-template-columns:var(--gutter) minmax(0,1fr);
  gap:0 1.5rem;
  padding-top:3.25rem;
}

.num{
  grid-column:1;
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:600;
  color:var(--accent);
  padding-top:.55rem;
  font-variant-numeric:tabular-nums;
}

section > :not(.num){grid-column:2}

h2{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.35rem,3vw,1.7rem);
  line-height:1.2;
  letter-spacing:-.012em;
  margin:0 0 1.1rem;
  text-wrap:balance;
}

h3{
  font-family:var(--body);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:2.1rem 0 .8rem;
}

p{margin:0 0 1.05rem;max-width:var(--measure)}
p:last-child{margin-bottom:0}

a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
a:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

strong{font-weight:600}
em{font-style:italic}

ul{margin:0 0 1.05rem;padding-left:1.15rem;max-width:var(--measure)}
li{margin-bottom:.45rem}
li::marker{color:var(--ink-3)}
ol{margin:0 0 1.05rem;padding-left:1.3rem;max-width:var(--measure)}
ol li{padding-left:.3rem}
ol li::marker{font-family:var(--mono);font-size:.8em;color:var(--accent);font-weight:600}

/* ---------- reliability markers ---------- */

.note{
  max-width:var(--measure);
  margin:1.4rem 0;
  padding:.85rem 1.1rem;
  border-left:3px solid var(--infer);
  background:var(--infer-soft);
  border-radius:0 3px 3px 0;
  font-size:.92rem;
  color:var(--ink-2);
}
.note .label{
  display:block;
  font-family:var(--mono);
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--infer);
  margin-bottom:.35rem;
}
.note.open{border-left-color:var(--open);background:var(--open-soft)}
.note.open .label{color:var(--open)}
.note p{margin-bottom:.6rem;font-size:inherit}
.note p:last-child{margin-bottom:0}

/* ---------- thesis pull ---------- */

.thesis{
  max-width:var(--measure);
  margin:1.5rem 0 1.6rem;
  padding:1.5rem 1.6rem;
  background:var(--accent-soft);
  border-radius:4px;
}
.thesis p{
  font-family:var(--display);
  font-size:clamp(1.1rem,2.6vw,1.35rem);
  line-height:1.4;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
}
.thesis p + p{margin-top:.5rem}

/* ---------- tables ---------- */

.scroll{overflow-x:auto;max-width:var(--measure);margin:0 0 1.4rem}
table{
  border-collapse:collapse;
  width:100%;
  font-size:.92rem;
  min-width:26rem;
}
th{
  text-align:left;
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding:0 1rem .55rem 0;
  border-bottom:1px solid var(--rule);
  vertical-align:bottom;
}
td{
  padding:.7rem 1rem .7rem 0;
  border-bottom:1px solid var(--rule-soft);
  vertical-align:top;
  color:var(--ink-2);
}
td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
tr:last-child td{border-bottom:none}
table.facts td:first-child{
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:400;
  color:var(--ink-3);
  text-transform:uppercase;
  letter-spacing:.06em;
}
table.facts td:last-child{color:var(--ink);font-weight:600}

/* ---------- fracture list ---------- */

.fractures{
  list-style:none;
  padding:0;
  margin:0 0 1.2rem;
  max-width:var(--measure);
  display:flex;
  flex-direction:column;
  gap:1px;
  background:var(--rule-soft);
  border-radius:4px;
  overflow:hidden;
}
.fractures li{
  margin:0;
  background:var(--surface);
  padding:1rem 1.2rem;
  display:grid;
  grid-template-columns:1.6rem 1fr;
  gap:0 .9rem;
}
.fractures .n{
  font-family:var(--mono);
  font-size:.8rem;
  font-weight:600;
  color:var(--accent);
  padding-top:.1rem;
}
.fractures b{display:block;margin-bottom:.2rem;color:var(--ink)}
.fractures span.t{color:var(--ink-2);font-size:.93rem}

/* ---------- goal columns ---------- */

.goals{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1.25rem;
  max-width:var(--measure);
  margin:1.3rem 0;
}
.goal{
  background:var(--surface);
  border:1px solid var(--rule-soft);
  border-radius:4px;
  padding:1.1rem 1.2rem;
  box-shadow:var(--shadow);
}
.goal h4{
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0 0 .7rem;
}
.goal.yes h4{color:var(--accent)}
.goal.no h4{color:var(--open)}
.goal ul{margin:0;padding-left:1rem;font-size:.92rem;color:var(--ink-2)}
.goal li{margin-bottom:.35rem}
.goal li:last-child{margin-bottom:0}

/* ---------- ceremony ---------- */

.rite{
  max-width:var(--measure);
  border-top:1px solid var(--rule);
  padding:1.1rem 0;
}
.rite:last-of-type{border-bottom:1px solid var(--rule)}
.rite h4{
  font-family:var(--display);
  font-size:1.05rem;
  font-weight:600;
  margin:0 0 .5rem;
  color:var(--ink);
}
.rite ul{margin:0}
.rite p{margin-bottom:.4rem}
.rite .aside{
  font-size:.88rem;
  font-style:italic;
  color:var(--ink-3);
  margin-top:.5rem;
}

/* ---------- backlog ---------- */

.backlog{
  list-style:none;
  padding:0;
  max-width:var(--measure);
  margin:0 0 1.3rem;
  border-top:1px solid var(--rule-soft);
}
.backlog li{
  margin:0;
  padding:.6rem 0;
  border-bottom:1px solid var(--rule-soft);
  font-size:.95rem;
  color:var(--ink-2);
}

.ready{
  max-width:var(--measure);
  margin:0 0 1.6rem;
  padding:1rem 1.2rem;
  background:var(--surface);
  border:1px solid var(--rule);
  border-left:3px solid var(--accent);
  border-radius:0 5px 5px 0;
  box-shadow:var(--shadow);
}
.ready .id{
  display:inline-block;
  font-family:var(--mono);
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.35rem;
}
.ready .id .sz{
  color:var(--ink-3);
  margin-left:.6rem;
  letter-spacing:.08em;
}
.ready h4{
  font-family:var(--display);
  font-size:1.14rem;
  font-weight:600;
  line-height:1.3;
  margin:0 0 .45rem;
  color:var(--ink);
}
.ready h4 a{text-decoration-thickness:1px}
.ready p{margin:0 0 .4rem;font-size:.92rem;color:var(--ink-2)}
.ready p:last-child{margin-bottom:0}
.ready .warn{font-size:.86rem;font-style:italic;color:var(--open)}

.subhead{
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:1.8rem 0 .8rem;
  max-width:var(--measure);
}

/* ---------- resources ---------- */

.res{max-width:var(--measure);margin-bottom:1.4rem}
.res ul{list-style:none;padding:0;margin:0}
.res li{
  padding:.5rem 0;
  border-bottom:1px solid var(--rule-soft);
  font-size:.94rem;
  color:var(--ink-2);
}
.res li:last-child{border-bottom:none}
.res cite{font-style:italic;color:var(--ink)}
.res .by{color:var(--ink-3);font-size:.88rem}

/* ---------- open items ---------- */

.open-list{
  list-style:none;
  padding:0;
  margin:1.2rem 0 0;
  max-width:var(--measure);
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.open-list li{
  margin:0;
  padding:.75rem 1rem;
  background:var(--sunk);
  border-radius:3px;
  font-size:.93rem;
  color:var(--ink-2);
  border-left:2px solid var(--open);
}
.open-list b{color:var(--ink)}

.check{
  list-style:none;
  padding:0;
  margin:.8rem 0 1.1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.check li{
  margin:0;
  font-family:var(--mono);
  font-size:.75rem;
  padding:.32rem .7rem;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:100px;
  color:var(--ink-2);
}

/* ---------- critique section ---------- */

section.critique{
  margin-top:3.5rem;
  padding-top:3rem;
  border-top:2px solid var(--rule);
}
section.critique .num{color:var(--infer)}
section.critique h2{color:var(--ink)}

.disclaimer{
  max-width:var(--measure);
  margin:0 0 2rem;
  padding:1rem 1.2rem;
  background:var(--sunk);
  border:1px dashed var(--infer);
  border-radius:4px;
  font-size:.9rem;
  color:var(--ink-2);
}
.disclaimer .label{
  display:block;
  font-family:var(--mono);
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--infer);
  margin-bottom:.4rem;
}
.disclaimer p{margin:0;font-size:inherit}

.blind{
  max-width:var(--measure);
  border-top:1px solid var(--rule-soft);
  padding:1.5rem 0 .4rem;
}
.blind h4{
  font-family:var(--display);
  font-size:1.12rem;
  font-weight:600;
  line-height:1.3;
  margin:0 0 .7rem;
  color:var(--ink);
  display:grid;
  grid-template-columns:2.6rem 1fr;
  gap:.6rem;
  align-items:baseline;
  text-wrap:balance;
}
.blind h4 .id{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:600;
  color:var(--infer);
  font-variant-numeric:tabular-nums;
}
.blind .lede{
  font-size:.88rem;
  font-style:italic;
  color:var(--ink-3);
  margin-bottom:.6rem;
}
.blind .lede b{font-style:normal;font-weight:600;color:var(--ink-2)}

/* arbitrage tranché par l'auteur, plein, pas pointillé : c'est une décision */
.verdict{
  max-width:var(--measure);
  margin:1rem 0 1.1rem;
  padding:.9rem 1.1rem;
  background:var(--accent-soft);
  border-left:3px solid var(--accent);
  border-radius:0 4px 4px 0;
  font-size:.93rem;
  color:var(--ink-2);
}
.verdict .label{
  display:block;
  font-family:var(--mono);
  font-size:.63rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.35rem;
}
.verdict p{margin:0 0 .5rem;font-size:inherit}
.verdict p:last-child{margin-bottom:0}
.verdict strong{color:var(--ink)}
.verdict .to{
  display:block;
  margin-top:.55rem;
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--ink-3);
}
.verdict.pending{
  background:var(--open-soft);
  border-left-color:var(--open);
}
.verdict.pending .label{color:var(--open)}

/* arbitrage remplacé, conservé pour mémoire, ne fait plus foi */
.verdict.superseded{
  background:transparent;
  border-left:3px solid var(--rule);
  color:var(--ink-3);
  font-size:.88rem;
  padding-top:.7rem;
  padding-bottom:.7rem;
}
.verdict.superseded .label{color:var(--ink-3)}
.verdict.superseded strong{color:var(--ink-3);font-weight:400}
.verdict.superseded .label::after{
  content:" · ne fait plus foi";
  letter-spacing:.06em;
  opacity:.8;
}

.blind .after{
  font-size:.9rem;
  color:var(--ink-2);
}
.blind .after em{color:var(--ink-3)}

table.reads{
  width:100%;
  max-width:var(--measure);
  border-collapse:collapse;
  margin:1rem 0 1.1rem;
  font-size:.88rem;
}
table.reads th,table.reads td{
  text-align:left;
  vertical-align:top;
  padding:.55rem .7rem;
  border-bottom:1px solid var(--rule-soft);
}
table.reads th{
  font-family:var(--mono);
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  border-bottom:1px solid var(--rule);
}
table.reads td:first-child{color:var(--ink);width:34%}
table.reads td strong{color:var(--ink)}

footer{
  margin-top:4rem;
  padding-top:1.4rem;
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--ink-3);
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.5rem;
}

@media (max-width:640px){
  :root{--gutter:0px}
  section{grid-template-columns:1fr;gap:0}
  section > *{grid-column:1 !important}
  .num{padding-top:0;margin-bottom:.4rem}
}
}

/* ---------- backlog ---------- */
@scope (.page--backlog) {
/* ---------- intro ---------- */

.intro{
  max-width:var(--measure);
  margin:2.2rem 0 0;
}
.intro p{margin:0 0 .9rem}
.intro p:last-child{margin-bottom:0}

/* ---------- sections de sujets ---------- */

h2{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--accent);
  margin:3.2rem 0 1.1rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--rule);
}

/* ---------- grille de sujets ---------- */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
  gap:1rem;
  align-items:start;
}

.sujet{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:5px;
  padding:1.1rem 1.2rem 1.2rem;
  box-shadow:var(--shadow);
}
.sujet h3{
  font-family:var(--display);
  font-size:1.16rem;
  font-weight:600;
  line-height:1.25;
  color:var(--ink);
  margin:0 0 .55rem;
  text-wrap:balance;
}
.sujet h3 a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--rule);
}
.sujet h3 a:hover{
  color:var(--accent);
  border-bottom-color:var(--accent);
}
.sujet.lie{
  border-color:var(--accent-soft);
}
.sujet p{
  margin:0;
  font-size:.92rem;
  line-height:1.55;
  color:var(--ink-2);
  max-width:none;
}

footer{
  margin-top:4rem;
  padding-top:1.4rem;
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--ink-3);
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.5rem;
}

@media (max-width:640px){
  :root{--gutter:0px}
  .grid{grid-template-columns:1fr;gap:.85rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
}

/* ---------- glossaire ---------- */
@scope (.page--glossary) {
    .intro{
      max-width:var(--measure);
      margin:2.2rem 0 0;
    }
    .intro p{margin:0 0 .9rem}
    .intro p:last-child{margin-bottom:0}
    .note{
      max-width:var(--measure);
      margin:1.4rem 0;
      padding:.85rem 1.1rem;
      border-left:3px solid var(--open);
      background:var(--open-soft);
      border-radius:0 3px 3px 0;
      font-size:.92rem;
      color:var(--ink-2);
    }
    .note .label{
      display:block;
      font-family:var(--mono);
      font-size:.64rem;
      font-weight:600;
      letter-spacing:.13em;
      text-transform:uppercase;
      color:var(--open);
      margin-bottom:.3rem;
    }
    .note p{margin:0}

    .index{
      max-width:var(--measure);
      margin:2.5rem 0 3rem;
      padding:1.1rem 1.2rem 1.2rem;
      border:1px solid var(--rule);
      background:var(--surface);
      border-radius:5px;
    }
    .index h2{
      font-family:var(--mono);
      font-size:.68rem;
      font-weight:600;
      letter-spacing:.13em;
      text-transform:uppercase;
      color:var(--accent);
      margin:0 0 .8rem;
    }
    .index ul{
      display:flex;
      flex-wrap:wrap;
      gap:.4rem .8rem;
      list-style:none;
      padding:0;
      margin:0;
    }
    .index li{margin:0;font-size:.89rem}

    .group{
      display:grid;
      grid-template-columns:var(--gutter) minmax(0,1fr);
      gap:0 1.5rem;
      padding-top:3.2rem;
    }
    .group > *{grid-column:2}
    .group .num{
      grid-column:1;
      grid-row:1;
      font-family:var(--mono);
      font-size:.78rem;
      font-weight:600;
      color:var(--accent);
      padding-top:.55rem;
      font-variant-numeric:tabular-nums;
    }
    .group h2{
      font-family:var(--display);
      font-weight:600;
      font-size:clamp(1.35rem,3vw,1.7rem);
      line-height:1.2;
      letter-spacing:-.012em;
      margin:0 0 1.2rem;
      text-wrap:balance;
    }
    .terms{margin:0;max-width:var(--measure)}
    .term{
      scroll-margin-top:1.5rem;
      padding:1.15rem 0 1.25rem;
      border-top:1px solid var(--rule-soft);
    }
    .term:first-child{border-top:0;padding-top:0}
    .term dt{
      font-family:var(--display);
      font-size:1.2rem;
      font-weight:600;
      line-height:1.25;
      letter-spacing:-.01em;
    }
    .term dd{margin:.35rem 0 0;color:var(--ink-2)}
    .term .example{
      font-size:.91rem;
      color:var(--ink-3);
      margin-top:.45rem;
    }
    .term .example b{
      font-family:var(--mono);
      font-size:.67rem;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--accent);
      margin-right:.35rem;
    }
    footer{
      margin-top:4rem;
      padding-top:1.4rem;
      border-top:1px solid var(--rule);
      font-family:var(--mono);
      font-size:.72rem;
      color:var(--ink-3);
      display:flex;
      flex-wrap:wrap;
      gap:.4rem 1.5rem;
    }
    @media (max-width:640px){
      :root{--gutter:0px}
      .story{grid-template-columns:1fr;gap:.1rem}
      .story dt{padding-top:.5rem}
      .group{grid-template-columns:1fr;gap:0}
      .group > *{grid-column:1}
      .group .num{grid-column:1;grid-row:auto;padding-top:0;margin-bottom:.4rem}
    }
    @media (prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
    }
}

/* ---------- support de cours ---------- */

.course-page,
.course-home{
  max-width:calc(var(--measure) + var(--gutter) + 6rem);
}

.course-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:2.4rem;
  padding-bottom:.75rem;
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);
  font-size:.67rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.course-top a{font-weight:600;text-decoration:none}

.chapter-card{
  max-width:var(--measure);
  margin:2.2rem 0 .5rem var(--gutter);
  padding:1rem 1.2rem 1.05rem;
  background:var(--accent-soft);
  border-left:3px solid var(--accent);
  border-radius:0 4px 4px 0;
}
.chapter-card-body .accept{display:block;margin:0}
.chapter-card-body .accept-col h3{
  margin:0 0 .65rem;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--accent);
}
.chapter-card-body .accept-col ol{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.35rem 1.5rem;
  margin:0;
  padding-left:1.25rem;
}

.chapter-nav{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin:4rem 0 0;
  padding-top:1.2rem;
  border-top:1px solid var(--rule);
}
.chapter-nav a{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  min-height:5.2rem;
  padding:.8rem 1rem;
  color:var(--ink);
  text-decoration:none;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:4px;
}
.chapter-nav a:hover{border-color:var(--accent);color:var(--accent)}
.chapter-nav__next{text-align:right;align-items:flex-end}
.chapter-nav span{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.chapter-nav strong{font-family:var(--display);font-size:1.05rem;line-height:1.25}

.course-footer{
  margin-top:1.4rem;
  padding-top:1rem;
  border-top:0;
}

.course-hero{
  padding:clamp(1rem,4vw,3rem) 0 2.4rem;
  border-bottom:2px solid var(--ink);
}
.course-hero h1{max-width:18ch;font-size:clamp(2.7rem,8vw,5.4rem)}
.course-hero h1 .sub{max-width:31ch;font-size:.29em;line-height:1.35;margin-top:.8rem}
.course-hero__context{
  margin:1.7rem 0 0;
  font-family:var(--mono);
  font-size:.68rem;
  color:var(--ink-3);
  letter-spacing:.05em;
}
.course-home main{padding-top:3.4rem}
.course-home section{display:block;padding:0;margin:0 0 4.5rem}
.course-home section > *{grid-column:auto}
.section-number{
  margin:0 0 .45rem;
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--accent);
}
.course-home h2{
  margin:0 0 1.2rem;
  font-family:var(--display);
  font-size:clamp(1.7rem,4vw,2.25rem);
  line-height:1.12;
}
.course-intro__lede{font-family:var(--display);font-size:1.3rem;line-height:1.45}
.learning-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  margin-top:2rem;
}
.learning-grid article{
  padding:1rem 1.1rem;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:4px;
}
.learning-grid h3{margin:0 0 .5rem;color:var(--accent)}
.learning-grid p{margin:0;font-size:.9rem;color:var(--ink-2)}
.chapter-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.chapter-list li{margin:0;border-bottom:1px solid var(--rule)}
.chapter-list a{
  display:grid;
  grid-template-columns:3rem minmax(12rem,1fr) minmax(12rem,.8fr);
  gap:1rem;
  align-items:baseline;
  padding:1rem .2rem;
  color:var(--ink);
  text-decoration:none;
}
.chapter-list a:hover{color:var(--accent)}
.chapter-list span{font-family:var(--mono);font-size:.7rem;color:var(--accent)}
.chapter-list strong{font-family:var(--display);font-size:1.2rem}
.chapter-list small{color:var(--ink-3);font-size:.85rem}
.course-note{
  margin:0 0 3rem;
  padding:1rem 1.2rem;
  background:var(--sunk);
  border-left:3px solid var(--accent);
}
.course-note .label{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;color:var(--accent)}
.course-note p{margin:.35rem 0 0}

.legacy-page{
  max-width:42rem;
  margin:12vh auto;
  padding:clamp(1.4rem,5vw,3rem);
}
.legacy-page h1{margin:.7rem 0 1.2rem}
.primary-link{
  display:inline-block;
  margin-top:.8rem;
  padding:.65rem .9rem;
  background:var(--accent);
  color:var(--ground);
  border-radius:3px;
  text-decoration:none;
  font-weight:600;
}

@media (max-width:700px){
  .chapter-card{margin-left:0}
  .chapter-card-body .accept-col ol{grid-template-columns:1fr}
  .learning-grid{grid-template-columns:1fr}
  .chapter-list a{grid-template-columns:2.2rem 1fr;gap:.4rem .8rem}
  .chapter-list small{grid-column:2}
  .chapter-nav{grid-template-columns:1fr}
}

@media print{
  :root{--ground:#fff;--surface:#fff;--ink:#111;--ink-2:#333;--ink-3:#555;--rule:#bbb;--accent:#075c5c;--accent-soft:#eef6f5}
  body{font-size:11pt;background:#fff}
  .page{max-width:none;padding:0}
  .course-top,.chapter-nav{display:none}
  .masthead{padding-bottom:1rem}
  .beat{break-inside:auto;padding-top:1.8rem}
  .box,.sketch,.tw,.chapter-card{break-inside:avoid}
  a{color:inherit;text-decoration:none}
  footer{margin-top:2rem}
}