:root{
    --ink:#1c2b33; --paper:#f6f3ec; --panel:#eeeae0; --white:#ffffff;
    --rule:#d9d1c0; --muted:#6e6a60; --blue:#1a5daa; --red:#d32d26;
    --blue2:#4e8ac0; --blue1:#9cc1e0; --red1:#e8897f;
    --serif:'Fraunces', Georgia, 'Times New Roman','Lateef', 'Traditional Arabic', 'Amiri', serif ;
    --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,'Lateef', 'Traditional Arabic', 'Amiri', sans-serif;
  }
 body{ margin:0; background:var(--paper); color:var(--ink); }
.wrap{ max-width:100%; margin:0 auto; padding: 0px; }

  header.page{ padding:56px 0 22px; }
  .eyebrow{ font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
  header.page .eyebrow{ font-size:12.5px; letter-spacing:.16em; color:var(--red); margin-bottom:20px; }
  header.page h1{ font-family:var(--serif); font-weight:880; font-size:43px; line-height:1.06; letter-spacing:-.01em; margin:0 0 20px; }
  header.page .lede{ font-family:var(--serif); font-weight:400; font-size:20px; line-height:1.45; margin:0 0 24px; }
  header.page .src{ font-family:var(--sans); font-size:13.5px; color:var(--muted); line-height:1.6; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:14px 0; }

  .parthead{ margin:26px 0 30px; border-top:2px solid var(--ink); padding-top:24px; }
  .parthead .eyebrow{ color:var(--red); margin-bottom:10px; }
  .parthead h2{ font-family:var(--serif); font-weight:880; font-size:29px; line-height:1.12; margin:0 0 14px; }
  .parthead p{ font-family:var(--sans); font-size:16.5px; line-height:1.7; margin:0; }

  figure.fig{ margin:0; background:var(--panel); border:1px solid var(--rule); border-radius:5px; overflow:hidden; }
  .fig-head{ padding:22px 22px 4px; }
 .fig-head .eyebrow{ color:var(--red); margin-bottom:10px;}
  .fig-head h3{ font-family:var(--serif); font-weight:880; font-size:22px; line-height:1.18; margin:0 0 8px; }
  .fig-head .chapo{ font-family:var(--sans); font-size:14.5px; line-height:1.55; color:var(--muted); margin:0 0 12px; }
  .chart-holder{ padding:6px 10px 4px 4px; }
  .chart-holder svg{ display:block; width:100%; height:auto; }
  .legend{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; padding:2px 16px 12px; }
  .legend .item{ display:flex; align-items:center; gap:7px; font-family:var(--sans); font-size:12.5px; color:var(--ink); }
  .legend .swatch{ width:12px; height:12px; border-radius:3px; display:inline-block; }
  .note{ text-align:center; padding:0 20px 12px; font-family:var(--sans); font-size:12.5px; color:var(--muted); }
  .source{ padding:0 22px 20px; font-family:var(--sans); font-size:12px; color:var(--muted); }

  .lecture{ background:var(--white); border:1px solid var(--rule); border-left:3px solid var(--blue); border-radius:5px; padding:18px 20px; margin-top:10px; }
  .lecture .eyebrow{ font-size:11px; letter-spacing:.1em; color:var(--blue); margin-bottom:6px; }
  .lecture p{ font-family:var(--sans); font-size:15px; line-height:1.62; margin:0; }

  .block{ margin:0 0 56px; }

  /* Tooltip */
  #tip{ position:fixed; pointer-events:none; z-index:50; background:var(--ink); color:var(--paper);
        padding:8px 11px; border-radius:3px; font-family:var(--sans); font-size:12px; line-height:1.5;
        opacity:0; transform:translateY(2px); transition:opacity .12s; white-space:nowrap; }
  #tip .t-label{ opacity:.7; margin-bottom:3px; }
  #tip .t-row{ font-weight:600; }

  /* Animation primitives (driven by JS adding .in) */
  .bar-v{ transform:scaleY(0); transform-origin:bottom; transform-box:fill-box; }
  .bar-h{ transform:scaleX(0); transform-origin:left; transform-box:fill-box; }
  .fig.in .bar-v, .fig.in .bar-h{ transition:transform .9s cubic-bezier(.22,.61,.36,1); transform:none; }
  .lbl{ opacity:0; }
  .fig.in .lbl{ transition:opacity .5s ease .55s; opacity:1; }
  .line-path{ stroke-dasharray:var(--len); stroke-dashoffset:var(--len); }
  .fig.in .line-path{ transition:stroke-dashoffset 1.2s ease; stroke-dashoffset:0; }
  .dot{ opacity:0; }
  .fig.in .dot{ transition:opacity .4s ease .9s; opacity:1; }
  .wedge{ opacity:0; transform:scale(.55); transform-origin:var(--cx) var(--cy); }
  .fig.in .wedge{ transition:transform .8s cubic-bezier(.22,.61,.36,1), opacity .5s ease; transform:none; opacity:1; }
  .interact{ cursor:pointer; }

  @media (prefers-reduced-motion: reduce){
    .bar-v,.bar-h{ transform:none !important; }
    .line-path{ stroke-dashoffset:0 !important; }
    .lbl,.dot,.wedge{ opacity:1 !important; transform:none !important; }
  }
  @media (max-width:520px){
    header.page h1{ font-size:33px; }
    .parthead h2{ font-size:24px; }
  }

/* ---------- Encadré délestage ---------- */

.delestage {
  margin: 0 0 56px;
}

.delestage-panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 5px;
  overflow: hidden;
}

.delestage-head {
  padding: 22px 22px 6px 22px;
}

.delestage-head .eyebrow {
  color: var(--red);
  margin-bottom: 10px;
}

.delestage-title {
  font-family: var(--serif) !important;
  font-weight: 880;
  font-size: 23px;
  line-height: 1.16;
  color: var(--ink);
  margin: 0 0 8px 0;
}

.delestage-chapo {
  font-family: var(--sans) !important;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 6px 0;
}

.delestage-etats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 8px 18px 6px;
}

.delestage-etat {
  flex: 1 1 190px;
  min-width: 178px;
}

.barre-etat {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  height: 168px;
  border-bottom: 2px solid var(--ink);
  padding: 0 4px;
}

.barre-col {
  width: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.barre-bar {
  width: 100%;
}

.barre-bar.prod {
  background: var(--blue);
  border-radius: 3px 3px 0 0;
}

.barre-bar.dem {
  background: var(--red);
  border-radius: 3px 3px 0 0;
}

.barre-bar.dem.stacked {
  border-radius: 0;
}

.barre-ghost {
  width: 100%;
  border: 1px dashed var(--red);
  border-bottom: none;
  background: repeating-linear-gradient(45deg, rgba(211, 45, 38, 0.10) 0, rgba(211, 45, 38, 0.10) 4px, transparent 4px, transparent 8px);
}

.barre-label {
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 6px;
}

.delestage-etat-corps {
  margin-top: 12px;
}

.pastille {
  display: inline-block;
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  padding: 3px 10px;
}

.delestage-etat-titre {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 8px 0 4px;
}

.delestage-etat-desc {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.delestage-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding: 12px 16px 14px;
}

.delestage-legende .legende-swatch {
  display: block;
}

.legende-swatch.coupee {
  border: 1px dashed var(--red);
  background: repeating-linear-gradient(45deg, rgba(211, 45, 38, 0.10) 0, rgba(211, 45, 38, 0.10) 3px, transparent 3px, transparent 6px);
}

.delestage-source {
  padding: 0 22px 20px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Légende ---------- */

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding: 2px 16px 12px;
}

.legende-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink);
}

.legende-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}