/* ═══════════════════════════════════════════════════════════
   CHRONOLOGEEK — Bloc progression
   Tout est scope sous [data-cgv="2"] (pose par progress.js) :
   l'attribut ajoute assez de specificite pour battre les regles
   .progress-block encore presentes dans le CSS des pages, sans
   dependre de l'ordre de chargement ni d'un !important.
   L'accent vient de --tl, pose d'apres data-universe.
   ═══════════════════════════════════════════════════════════ */

.progress-block[data-cgv="2"]{
  display:block;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  padding:1.15rem 1.4rem 1.2rem;
  margin-bottom:1.5rem;
  width:100%;
  box-sizing:border-box;
}

[data-cgv="2"] .pb-head{display:flex;align-items:baseline;justify-content:center;
  gap:1rem;margin-bottom:1.05rem;text-align:center}
[data-cgv="2"] .pb-eyebrow{font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
[data-cgv="2"] .pb-eyebrow em{font-style:normal;color:var(--tl)}

/* Tout est centre : les chiffres sur une ligne, les actions dessous. */
[data-cgv="2"] .pb-body{display:flex;flex-direction:column;align-items:center;
  gap:1.25rem;margin-bottom:1.15rem}

/* ── les chiffres ─────────────────────────────────────────── */
[data-cgv="2"] .pb-reads{display:flex;align-items:stretch;justify-content:center;gap:0}
[data-cgv="2"] .rd{padding:0 1.6rem;border-left:1px solid var(--border);min-width:0;
  text-align:center}
[data-cgv="2"] .rd:first-child{border-left:none}
[data-cgv="2"] .rd[hidden]{display:none}
[data-cgv="2"] .rd-val{display:flex;align-items:baseline;justify-content:center;gap:.28rem;
  font-family:ui-monospace,'SF Mono','JetBrains Mono','Cascadia Mono',monospace;
  font-size:2.55rem;font-weight:700;line-height:.92;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--text)}
[data-cgv="2"] .rd-val .u{font-size:1.05rem;font-weight:500;color:var(--muted2);
  letter-spacing:0}
[data-cgv="2"] .rd-val .of{font-size:1.05rem;font-weight:500;color:var(--muted);
  letter-spacing:0}
[data-cgv="2"] .rd-lab{margin-top:.5rem;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
[data-cgv="2"] .rd.is-time .rd-val{color:var(--tl)}
[data-cgv="2"] .rd.is-done .rd-val{color:var(--muted2);font-size:1.6rem}
[data-cgv="2"] .rd-star{font-size:.9rem;color:var(--muted);cursor:help}

/* ── les actions ──────────────────────────────────────────── */
[data-cgv="2"] .pb-acts{display:flex;border:1px solid var(--border2);border-radius:10px;
  overflow:hidden;background:var(--surface2);flex:0 0 auto}
.progress-block[data-cgv="2"] .pb-acts button{display:flex;align-items:center;gap:.42rem;
  background:transparent;border:none;border-left:1px solid var(--border2);
  color:var(--muted2);font-family:inherit;font-size:.78rem;font-weight:500;
  padding:.62rem .95rem;cursor:pointer;white-space:nowrap;flex:0 0 auto;
  transition:background .16s,color .16s}
.progress-block[data-cgv="2"] .pb-acts button:first-child{border-left:none}
.progress-block[data-cgv="2"] .pb-acts button:hover{background:var(--tl-soft);
  color:var(--text)}
.progress-block[data-cgv="2"] .pb-acts button:focus-visible{outline:2px solid var(--tl);
  outline-offset:-2px}
.progress-block[data-cgv="2"] .pb-acts .pb-danger:hover{background:rgba(224,85,85,.12);
  color:var(--red)}
[data-cgv="2"] .pb-acts .ico{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;
  fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ── la barre ─────────────────────────────────────────────── */
[data-cgv="2"] .pb-bar{position:relative;height:18px;border-radius:9px;
  background:var(--surface2);border:1px solid var(--border2);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);overflow:hidden}
[data-cgv="2"] .pb-bar-fill{height:100%;width:0;border-radius:9px;background:var(--tl);
  box-shadow:0 0 12px 0 var(--tl-glow);
  transition:width .5s cubic-bezier(.4,0,.2,1)}
[data-cgv="2"] .pb-hint{margin-top:.7rem;font-size:.7rem;color:var(--muted);
  text-align:center}

/* Les anciens noeuds que le code des pages alimente encore. */
[data-cgv="2"] .pb-legacy{display:none}

@media (prefers-reduced-motion:reduce){
  [data-cgv="2"] .pb-bar-fill{transition:none}
}

@media(max-width:720px){
  .progress-block[data-cgv="2"]{padding:1rem 1.1rem 1.05rem;flex-wrap:nowrap}
  [data-cgv="2"] .pb-body{gap:1.1rem}
  [data-cgv="2"] .pb-reads{width:100%;gap:0}
  [data-cgv="2"] .rd{padding:0 .5rem;flex:1 1 0}
  [data-cgv="2"] .rd-val{font-size:1.95rem}
  [data-cgv="2"] .rd.is-done .rd-val{font-size:1.35rem}
  [data-cgv="2"] .pb-acts{width:100%}
  .progress-block[data-cgv="2"] .pb-acts button{flex:1 1 0;justify-content:center;
    padding:.7rem .4rem}
}

/* Sur tres petit ecran on garde le libelle a cote de l'icone :
   on rogne la typo et les espacements plutot que de masquer le texte. */
@media(max-width:420px){
  .progress-block[data-cgv="2"] .pb-acts button{padding:.65rem .3rem;font-size:.68rem;
    gap:.28rem}
  [data-cgv="2"] .pb-acts .ico{width:13px;height:13px}
}
@media(max-width:340px){
  .progress-block[data-cgv="2"] .pb-acts button{font-size:.63rem;padding:.6rem .2rem}
}