/* ==========================================================================
   Article — dock de lecture
   Barre basse pleine largeur sous 1024 px, dock flottant au-dessus de la
   colonne de lecture au-delà. Les panneaux (sommaire, écoute, affichage,
   « plus ») deviennent des feuilles montantes en mobile et des cartes
   ancrées au dock sur ordinateur. Tout passe par les jetons : clair et sombre
   suivent html[data-sp-theme] sans règle dédiée.
   ========================================================================== */

.sp-dock[hidden],
.sp-dock [hidden] {
  display: none !important;
}

.sp-dock {
  --sp-dock-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --sp-dock-glass: color-mix(in oklab, var(--sp-surface) 90%, transparent);
  --sp-dock-accent: var(--silo-color-dark, var(--sp-brand-primary-dark));
  --sp-dock-x: 50%;
  position: relative;
  z-index: 70;
  font-family: var(--sp-font-body);
}

/* --- Barre ------------------------------------------------------------------ */

.sp-dock__bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  align-items: stretch;
  padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  background: var(--sp-dock-glass);
  border-top: 1px solid var(--sp-border);
  box-shadow: 0 -10px 30px rgb(35 20 28 / 10%);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  transform: translateY(110%);
  transition: transform 320ms var(--sp-dock-ease), opacity 320ms var(--sp-dock-ease);
}

.sp-dock.is-on .sp-dock__bar {
  transform: none;
}

/* Fil de progression posé sur l'arête haute de la barre. */
.sp-dock__line {
  position: absolute;
  inset: -1px 0 auto;
  height: 3px;
  overflow: hidden;
}

.sp-dock__line > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--sp-brand-primary), var(--silo-color, var(--sp-brand-primary)));
  transform: scaleX(0);
  transform-origin: left center;
}

.sp-dock .sp-dock__btn {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 56px;
  margin: 0;
  padding: 4px 2px;
  border: 0;
  border-radius: var(--sp-radius-md);
  background: transparent;
  color: var(--sp-ink-soft);
  font: 600 var(--sp-text-xs)/1.1 var(--sp-font-body);
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color var(--sp-duration) var(--sp-ease), color var(--sp-duration) var(--sp-ease);
}

.sp-dock .sp-dock__btn:hover {
  background: color-mix(in oklab, var(--sp-brand-primary) 8%, transparent);
  color: var(--sp-brand-primary-dark);
}

.sp-dock .sp-dock__btn:focus-visible {
  outline: 2px solid var(--sp-brand-primary);
  outline-offset: 1px;
}

.sp-dock .sp-dock__btn[aria-pressed="true"],
.sp-dock .sp-dock__btn[aria-expanded="true"] {
  color: var(--sp-brand-primary-dark);
}

.sp-dock .sp-dock__btn[aria-pressed="true"],
.sp-dock .sp-dock__btn[aria-expanded="true"] {
  background: color-mix(in oklab, var(--sp-brand-primary) 12%, transparent);
}

.sp-dock__label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-dock__label-main {
  display: none;
}

.sp-dock__sep,
.sp-dock__btn--wide {
  display: none !important;
}

/* Anneau de progression. */
.sp-dock__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
}

.sp-dock__ring svg:not(.sp-icon) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.sp-dock__ring circle {
  fill: none;
  stroke-width: 3;
}

.sp-dock__ring-track {
  stroke: color-mix(in oklab, var(--sp-ink) 12%, transparent);
}

.sp-dock__ring-value {
  stroke: var(--sp-brand-primary);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.sp-dock__ring-done {
  display: none;
}

.sp-dock.is-read .sp-dock__ring-icon {
  display: none;
}

.sp-dock.is-read .sp-dock__ring-done {
  display: block;
  color: var(--sp-success);
}

.sp-dock.is-read .sp-dock__ring-value {
  stroke: var(--sp-success);
}

/* Lecture en cours : pastille animée sur « Écouter ». */
.sp-dock__live {
  position: absolute;
  top: 6px;
  right: calc(50% - 20px);
  display: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sp-brand-primary);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--sp-brand-primary) 60%, transparent);
  animation: sp-dock-pulse 1.6s ease-out infinite;
}

.sp-dock.is-speaking .sp-dock__live {
  display: block;
}

@keyframes sp-dock-pulse {
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* --- Mobile : pastille flottante au-dessus de la barre d'onglets ----------
   Le modèle du lecteur miniature des applications : la barre d'onglets
   (inc/tabbar.php) reste en place, le dock se pose au-dessus d'elle. À
   gauche la progression et le sommaire, à droite les actions en pictogrammes
   (leur nom reste lu par les lecteurs d'écran). */
@media (max-width: 1023px) {
  body.sp-has-dock {
    padding-bottom: calc(164px + env(safe-area-inset-bottom));
  }

  .sp-dock__bar {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    /* Au-dessus de la barre et du médaillon « Membre » qui la dépasse de 26 px. */
    bottom: calc(100px + env(safe-area-inset-bottom));
    max-width: 540px;
    margin-inline: auto;
    gap: 2px;
    align-items: center;
    padding: 5px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-pill);
    box-shadow: var(--sp-shadow-hover), 0 1px 0 rgb(255 255 255 / 40%) inset;
    transform: translateY(14px);
    opacity: 0;
    pointer-events: none;
  }

  .sp-dock.is-on .sp-dock__bar {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  /* Sans barre d'onglets (thème sans inc/tabbar.php), la pastille se pose en bas. */
  body:not(.sp-has-tabbar) .sp-dock__bar {
    bottom: calc(10px + env(safe-area-inset-bottom));
  }

  body.sp-typing .sp-dock__bar {
    bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .sp-dock__line {
    display: none;
  }

  .sp-dock .sp-dock__btn {
    flex: 0 0 46px;
    min-height: 46px;
    padding: 0;
    border-radius: var(--sp-radius-pill);
  }

  .sp-dock .sp-dock__btn:not(.sp-dock__btn--progress) > .sp-dock__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .sp-dock .sp-dock__btn--progress {
    flex: 1 1 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 0 12px 0 6px;
  }

  .sp-dock__btn--progress .sp-dock__label {
    display: grid;
    gap: 1px;
    text-align: left;
  }

  .sp-dock__label-main {
    display: block;
    color: var(--sp-ink);
    font-size: var(--sp-text-sm);
    font-weight: 700;
  }

  .sp-dock__label-sub {
    color: var(--sp-ink-soft);
    font-size: var(--sp-text-xs);
    font-weight: 500;
  }

  .sp-dock__ring {
    width: 34px;
    height: 34px;
  }

  .sp-dock__live {
    top: 5px;
    right: 5px;
  }
}

/* --- Dock flottant (ordinateur) -------------------------------------------- */

@media (min-width: 1024px) {
  .sp-dock__bar {
    inset-inline: auto;
    left: var(--sp-dock-x);
    bottom: 22px;
    gap: 2px;
    align-items: center;
    padding: 6px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-pill);
    box-shadow: var(--sp-shadow-hover), 0 1px 0 rgb(255 255 255 / 40%) inset;
    transform: translate(-50%, calc(100% + 40px));
    opacity: 0;
  }

  .sp-dock.is-on .sp-dock__bar {
    transform: translate(-50%, 0);
    opacity: 1;
  }

  .sp-dock__line {
    display: none;
  }

  .sp-dock .sp-dock__btn {
    flex: none;
    flex-direction: row;
    gap: var(--sp-space-2);
    min-height: 46px;
    padding: 0 14px;
    border-radius: var(--sp-radius-pill);
    font-size: var(--sp-text-sm);
  }

  .sp-dock__btn--wide {
    display: flex !important;
  }

  .sp-dock__btn--wide[hidden] {
    display: none !important;
  }

  .sp-dock__btn--narrow {
    display: none !important;
  }

  .sp-dock__sep {
    display: block !important;
    width: 1px;
    height: 26px;
    margin-inline: 4px;
    background: var(--sp-border);
  }

  .sp-dock .sp-dock__btn--icon {
    width: 46px;
    padding: 0;
    justify-content: center;
  }

  .sp-dock .sp-dock__btn--progress {
    padding: 0 16px 0 8px;
  }

  .sp-dock__btn--progress .sp-dock__label {
    display: grid;
    gap: 1px;
    text-align: left;
  }

  .sp-dock__label-main {
    display: block;
    color: var(--sp-ink);
    font-size: var(--sp-text-sm);
    font-weight: 700;
  }

  .sp-dock__label-sub {
    color: var(--sp-ink-soft);
    font-size: var(--sp-text-xs);
    font-weight: 500;
  }

  .sp-dock__ring {
    width: 34px;
    height: 34px;
  }

  .sp-dock__live {
    top: 8px;
    right: auto;
    left: 28px;
  }
}

/* Entre 1024 et 1439 px, les libellés laissent la place aux pictogrammes. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .sp-dock .sp-dock__btn:not(.sp-dock__btn--progress) > .sp-dock__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .sp-dock .sp-dock__btn:not(.sp-dock__btn--progress) {
    width: 46px;
    padding: 0;
    justify-content: center;
  }
}

/* Le bouton flottant « Gérer les cookies » (ConsentPilot, en bas à gauche)
   passe au-dessus du dock au lieu de recouvrir son premier bouton. */
body.sp-has-dock #consentpilot-floating-btn {
  bottom: calc(168px + env(safe-area-inset-bottom)) !important;
}

@media (min-width: 1024px) {
  body.sp-has-dock #consentpilot-floating-btn {
    bottom: 96px !important;
  }
}

/* --- Panneaux --------------------------------------------------------------- */

.sp-dock__scrim {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: rgb(35 30 33 / 42%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 260ms var(--sp-dock-ease);
}

.sp-dock.has-sheet .sp-dock__scrim {
  opacity: 1;
}

.sp-dock__sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  align-content: start;
  gap: var(--sp-space-4);
  max-height: min(82vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-space-3) max(var(--sp-space-5), env(safe-area-inset-right)) calc(var(--sp-space-5) + env(safe-area-inset-bottom)) max(var(--sp-space-5), env(safe-area-inset-left));
  background: var(--sp-surface);
  border-radius: var(--sp-radius-xl) var(--sp-radius-xl) 0 0;
  box-shadow: 0 -18px 50px rgb(35 20 28 / 22%);
  color: var(--sp-ink);
  transform: translateY(100%);
  transition: transform 320ms var(--sp-dock-ease);
}

.sp-dock__sheet.is-open {
  transform: none;
}

.sp-dock__sheet:focus {
  outline: none;
}

@media (min-width: 1024px) {
  .sp-dock__scrim {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .sp-dock__sheet {
    inset-inline: auto;
    left: var(--sp-dock-x);
    bottom: 92px;
    width: min(440px, calc(100vw - 48px));
    max-height: min(72vh, 640px);
    padding: var(--sp-space-5);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-lg);
    box-shadow: var(--sp-shadow-hover), 0 30px 60px rgb(35 20 28 / 12%);
    transform: translate(-50%, 16px);
    opacity: 0;
    transition: transform 240ms var(--sp-dock-ease), opacity 240ms var(--sp-dock-ease);
  }

  .sp-dock__sheet.is-open {
    transform: translate(-50%, 0);
    opacity: 1;
  }

  .sp-dock__grip {
    display: none;
  }
}

.sp-dock__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-space-3);
  padding-top: var(--sp-space-3);
}

.sp-dock__grip {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 44px;
  height: 5px;
  border-radius: 99px;
  background: var(--sp-border);
  transform: translateX(-50%);
}

.sp-dock .sp-dock__eyebrow {
  margin: 0 0 2px;
  color: var(--sp-dock-accent);
  font-size: var(--sp-text-xs);
  font-weight: 700;
  letter-spacing: var(--sp-tracking-caps);
  text-transform: uppercase;
}

html[data-sp-theme="dark"] .sp-dock .sp-dock__eyebrow {
  color: var(--sp-brand-primary);
}

.sp-dock .sp-dock__title {
  margin: 0;
  color: var(--sp-ink);
  font-family: var(--sp-font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
}

.sp-dock .sp-dock__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sp-border);
  border-radius: 50%;
  background: var(--sp-surface);
  color: var(--sp-ink-soft);
  cursor: pointer;
}

.sp-dock .sp-dock__close:hover {
  border-color: var(--sp-brand-primary);
  background: var(--sp-surface);
  color: var(--sp-brand-primary-dark);
}

.sp-dock__meter {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--sp-surface-soft);
}

.sp-dock__meter > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sp-brand-primary), var(--silo-color, var(--sp-brand-primary)));
}

/* Sommaire suivi. */
.sp-dock .sp-dock__toc {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.sp-dock .sp-dock__toc li {
  margin: 0;
}

.sp-dock .sp-dock__toc a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-space-3);
  min-height: 48px;
  padding: 8px 10px;
  border-radius: var(--sp-radius-md);
  color: var(--sp-ink-soft);
  font-size: var(--sp-text-md);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}

.sp-dock .sp-dock__toc a:hover {
  background: var(--sp-surface-soft);
  color: var(--sp-ink);
}

.sp-dock__toc-n {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--sp-border);
  border-radius: 50%;
  color: var(--sp-ink-soft);
  font-size: var(--sp-text-xs);
  font-weight: 700;
}

.sp-dock__toc-n .sp-icon {
  display: none;
}

.sp-dock .sp-dock__toc a.is-read .sp-dock__toc-n {
  border-color: color-mix(in oklab, var(--sp-success) 45%, var(--sp-border));
  color: var(--sp-success);
}

.sp-dock .sp-dock__toc a.is-read .sp-dock__toc-n > span {
  display: none;
}

.sp-dock .sp-dock__toc a.is-read .sp-dock__toc-n .sp-icon {
  display: block;
}

.sp-dock .sp-dock__toc a.is-current {
  background: var(--sp-surface-blush);
  color: var(--sp-ink);
  font-weight: 650;
}

.sp-dock .sp-dock__toc a.is-current .sp-dock__toc-n {
  border-color: var(--sp-brand-primary);
  background: var(--sp-brand-primary);
  color: var(--sp-on-accent);
}

.sp-dock__jumps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-2);
  padding-top: var(--sp-space-3);
  border-top: 1px solid var(--sp-border);
}

.sp-dock .sp-dock__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-pill);
  background: var(--sp-surface);
  color: var(--sp-ink);
  font: 600 var(--sp-text-sm)/1 var(--sp-font-body);
  cursor: pointer;
}

.sp-dock .sp-dock__chip:hover {
  border-color: var(--sp-brand-primary);
  background: var(--sp-surface);
  color: var(--sp-brand-primary-dark);
}

.sp-dock__chip .sp-icon {
  color: var(--sp-brand-primary);
}

/* Groupes de réglages. */
.sp-dock__group {
  display: grid;
  gap: var(--sp-space-2);
}

.sp-dock .sp-dock__group-label {
  margin: 0;
  color: var(--sp-ink);
  font-size: var(--sp-text-sm);
  font-weight: 700;
}

.sp-dock__segments {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  background: var(--sp-surface-soft);
}

.sp-dock .sp-dock__segments button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 48px;
  margin: 0;
  padding: 6px 4px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--sp-ink-soft);
  font: 600 var(--sp-text-sm)/1.15 var(--sp-font-body);
  cursor: pointer;
}

.sp-dock .sp-dock__segments button:hover {
  background: transparent;
  color: var(--sp-ink);
}

.sp-dock .sp-dock__segments button[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--sp-brand-primary) 45%, var(--sp-border));
  background: var(--sp-surface);
  color: var(--sp-brand-primary-dark);
  box-shadow: 0 1px 2px rgb(55 32 45 / 10%), 0 4px 12px rgb(55 32 45 / 7%);
}

html[data-sp-theme="dark"] .sp-dock .sp-dock__segments button[aria-pressed="true"] {
  color: var(--sp-brand-primary);
}

.sp-dock .sp-dock__segments button:focus-visible {
  outline: 2px solid var(--sp-brand-primary);
  outline-offset: 1px;
}

.sp-dock__segments:not(.sp-dock__segments--type) button {
  flex-direction: row;
}

.sp-dock__segments--type button {
  min-height: 70px;
}

.sp-dock__glyph {
  font-family: var(--sp-font-heading);
  font-weight: 600;
  line-height: 1;
}

.sp-dock__glyph--0 { font-size: 1.15rem; }
.sp-dock__glyph--1 { font-size: 1.45rem; }
.sp-dock__glyph--2 { font-size: 1.75rem; }

/* Interrupteur « Lecture concentrée ». */
.sp-dock .sp-dock__switch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-space-3);
  width: 100%;
  margin: 0;
  padding: var(--sp-space-3) var(--sp-space-4);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  background: var(--sp-surface);
  color: var(--sp-ink);
  text-align: left;
  cursor: pointer;
}

.sp-dock .sp-dock__switch:hover {
  border-color: var(--sp-brand-primary);
  background: var(--sp-surface);
  color: var(--sp-ink);
}

.sp-dock__switch-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sp-surface-blush);
  color: var(--sp-brand-primary-dark);
}

html[data-sp-theme="dark"] .sp-dock__switch-icon {
  color: var(--sp-brand-primary);
}

.sp-dock__switch-text {
  display: grid;
  gap: 2px;
  line-height: 1.3;
}

.sp-dock__switch-text b {
  font-size: var(--sp-text-sm);
}

.sp-dock__switch-text small {
  color: var(--sp-ink-soft);
  font-size: var(--sp-text-xs);
}

.sp-dock__switch-ui {
  position: relative;
  width: 46px;
  height: 28px;
  border-radius: 99px;
  background: color-mix(in oklab, var(--sp-ink) 18%, transparent);
  transition: background-color var(--sp-duration) var(--sp-ease);
}

.sp-dock__switch-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sp-surface);
  box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
  transition: transform var(--sp-duration) var(--sp-ease);
}

.sp-dock__switch[aria-checked="true"] .sp-dock__switch-ui {
  background: var(--sp-brand-primary);
}

.sp-dock__switch[aria-checked="true"] .sp-dock__switch-ui::after {
  transform: translateX(18px);
}

/* Écoute. */
.sp-dock .sp-dock__now {
  display: -webkit-box;
  min-height: 4.6em;
  margin: 0;
  padding: var(--sp-space-3) var(--sp-space-4);
  overflow: hidden;
  border-left: 3px solid var(--sp-brand-primary);
  border-radius: 0 var(--sp-radius-md) var(--sp-radius-md) 0;
  background: var(--sp-surface-soft);
  color: var(--sp-ink-soft);
  font-family: var(--sp-font-reading);
  font-size: var(--sp-text-sm);
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.sp-dock__player {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space-4);
}

.sp-dock .sp-dock__round {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sp-border);
  border-radius: 50%;
  background: var(--sp-surface);
  color: var(--sp-ink);
  cursor: pointer;
}

.sp-dock .sp-dock__round:hover {
  border-color: var(--sp-brand-primary);
  background: var(--sp-surface);
  color: var(--sp-brand-primary-dark);
}

.sp-dock .sp-dock__round--main {
  width: 68px;
  height: 68px;
  border: 0;
  background: var(--sp-brand-primary);
  color: var(--sp-on-accent);
  box-shadow: 0 10px 24px color-mix(in oklab, var(--sp-brand-primary) 35%, transparent);
}

.sp-dock .sp-dock__round--main:hover {
  background: var(--sp-brand-primary-dark);
  color: var(--sp-on-accent);
}

html[data-sp-theme="dark"] .sp-dock .sp-dock__round--main:hover {
  background: var(--sp-brand-primary-light);
}

.sp-dock__pause {
  display: none;
}

.sp-dock__round--main[aria-pressed="true"] .sp-dock__play {
  display: none;
}

.sp-dock__round--main[aria-pressed="true"] .sp-dock__pause {
  display: block;
}

.sp-dock .sp-dock__note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-space-2);
  margin: 0;
  color: var(--sp-ink-soft);
  font-size: var(--sp-text-xs);
  line-height: 1.5;
}

.sp-dock__note .sp-icon {
  flex: none;
  margin-top: 1px;
  color: var(--sp-success);
}

/* « Plus » : tuiles et article suivant. */
.sp-dock__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-space-2);
}

.sp-dock .sp-dock__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 84px;
  margin: 0;
  padding: var(--sp-space-3) var(--sp-space-2);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  background: var(--sp-surface-soft);
  color: var(--sp-ink);
  font: 600 var(--sp-text-xs)/1.2 var(--sp-font-body);
  text-align: center;
  cursor: pointer;
}

.sp-dock .sp-dock__tile:hover {
  border-color: var(--sp-brand-primary);
  background: var(--sp-surface-soft);
  color: var(--sp-brand-primary-dark);
}

.sp-dock__tile .sp-icon {
  color: var(--sp-brand-primary);
}

.sp-dock .sp-dock__tile[aria-pressed="true"] {
  border-color: var(--sp-brand-primary);
  background: var(--sp-surface-blush);
}

.sp-dock .sp-dock__next {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-space-3);
  padding: var(--sp-space-2) var(--sp-space-3) var(--sp-space-2) var(--sp-space-2);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  background: var(--sp-surface);
  color: var(--sp-ink);
  text-decoration: none;
}

.sp-dock .sp-dock__next:hover {
  border-color: var(--sp-brand-primary);
  color: var(--sp-ink);
}

.sp-dock__next-media img {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
}

.sp-dock__next-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sp-dock__next-text small {
  color: var(--sp-dock-accent);
  font-size: var(--sp-text-xs);
  font-weight: 700;
  letter-spacing: var(--sp-tracking-caps);
  text-transform: uppercase;
}

html[data-sp-theme="dark"] .sp-dock__next-text small {
  color: var(--sp-brand-primary);
}

.sp-dock__next-text b {
  font-family: var(--sp-font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
}

.sp-dock__next > .sp-icon {
  color: var(--sp-brand-primary);
}

/* Message bref (lien copié…). */
.sp-dock__toast {
  position: fixed;
  left: 50%;
  bottom: calc(172px + env(safe-area-inset-bottom));
  z-index: 95;
  padding: 10px 18px;
  border-radius: var(--sp-radius-pill);
  background: var(--sp-ink);
  color: var(--sp-background);
  font-size: var(--sp-text-sm);
  font-weight: 600;
  box-shadow: var(--sp-shadow-hover);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 200ms var(--sp-ease), transform 200ms var(--sp-ease);
  pointer-events: none;
}

.sp-dock__toast.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (min-width: 1024px) {
  .sp-dock__toast {
    left: var(--sp-dock-x);
    bottom: 96px;
  }
}

/* --- Paragraphe lu à voix haute -------------------------------------------- */

.sp-article-body .is-speaking {
  border-radius: 6px;
  background: color-mix(in oklab, var(--silo-color, var(--sp-brand-primary)) 13%, transparent);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--silo-color, var(--sp-brand-primary)) 13%, transparent);
  transition: background-color 300ms var(--sp-ease), box-shadow 300ms var(--sp-ease);
}

/* --- Lecture concentrée ------------------------------------------------------ */

html.sp-focus .sp-article-aside,
html.sp-focus .sp-article-crumbs {
  display: none;
}

html.sp-focus .sp-article-layout {
  grid-template-columns: minmax(0, 1fr);
}

html.sp-focus .sp-article-main {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
}

/* --- Impression et mouvement réduit ----------------------------------------- */

@media print {
  .sp-dock,
  .sp-dock__toast {
    display: none !important;
  }

  body.sp-has-dock {
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-dock *,
  .sp-dock__bar,
  .sp-dock__sheet,
  .sp-dock__scrim,
  .sp-dock__toast,
  .sp-article-body .is-speaking {
    transition: none !important;
    animation: none !important;
  }
}