/* Confort de lecture des guides et actualités (assets/js/reading.js) :
   barre de progression, sommaire actif, sommaire en panneau sur téléphone, partage, haut de page */

/* Barre de progression (décorative), sous l'en-tête fixe */
.read-progress { position: fixed; inset-inline: 0; top: 76px; height: 3px; z-index: 49; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--copper), var(--copper-l)); transform: scaleX(var(--rp, 0)); transform-origin: left center; transition: transform .12s linear; }
[dir="rtl"] .read-progress span { transform-origin: right center; background: linear-gradient(270deg, var(--copper), var(--copper-l)); }
.no-js .read-progress { display: none; }
.top.open ~ main .read-progress { display: none; }

/* Sommaire : section en cours mise en évidence (gras + filet, pas seulement la couleur) */
.toc-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.toc li a { border-inline-start: 2px solid transparent; margin-inline-start: -1px; transition: color .2s, border-color .2s; }
.toc li a[aria-current="true"] { color: var(--text); font-weight: 700; border-inline-start-color: var(--copper-ink); }
.guide-body .prose h2:focus { outline: none; }
.guide-body .prose h2:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }
@media (min-width: 961px) {
  .toc { max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; padding-inline-end: .3rem; }
}

/* Boutons flottants : sommaire (téléphone) et haut de page */
.toc-toggle, .to-top { position: fixed; z-index: 46; bottom: calc(var(--rd-bottom, 0px) + .9rem + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; border: 1px solid var(--copper-l); background: var(--ink); color: #fff; font: inherit; font-weight: 650; font-size: .92rem; line-height: 1.2; cursor: pointer; box-shadow: 0 10px 26px -10px rgba(11, 13, 34, .55); }
.toc-toggle { inset-inline-start: .9rem; padding: .55rem 1.05rem; border-radius: 999px; max-width: calc(100vw - 6rem); }
.toc-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-toggle svg, .to-top svg { flex: none; }
.to-top { inset-inline-end: .9rem; width: 46px; padding: 0; border-radius: 50%; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s; }
.to-top.show { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s var(--ease), visibility 0s; }
.toc-toggle:hover, .to-top:hover { background: #1b1e52; }
.toc-toggle:focus-visible, .to-top:focus-visible { outline: 3px solid var(--copper-l); outline-offset: 3px; }
.toc-toggle[hidden] { display: none; }
.toc-toggle { transition: opacity .25s, transform .25s var(--ease); }
.toc-toggle.away { opacity: 0; pointer-events: none; transform: translateY(10px); }
.toc-toggle.away:focus { opacity: 1; pointer-events: auto; transform: none; }
.toc-toggle.icon-only { width: 46px; padding: 0; }
.toc-toggle.icon-only span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.top.open ~ main .toc-toggle, .top.open ~ main .to-top { display: none; }

/* Sommaire en panneau sur téléphone (seulement quand le script est actif) */
.rd-backdrop { position: fixed; inset: 0; z-index: 69; background: rgba(11, 13, 34, .5); }
.rd-backdrop[hidden] { display: none; }
.toc-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.toc-close[hidden] { display: none; }
@media (max-width: 960px) {
  .rd-on .toc { display: none; position: fixed; z-index: 70; inset-inline: .75rem; bottom: calc(var(--rd-bottom, 0px) + .75rem + env(safe-area-inset-bottom)); max-height: calc(100vh - var(--rd-bottom, 0px) - 6.5rem); max-height: calc(100dvh - var(--rd-bottom, 0px) - 6.5rem); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 16px; padding: .9rem 1.1rem 1rem; box-shadow: 0 24px 60px -18px rgba(11, 13, 34, .6); font-size: 1rem; }
  .rd-on .toc.open { display: block; }
  .rd-on .toc .eyebrow { margin: 0; }
  .rd-on .toc-top { margin-bottom: .6rem; }
  .rd-on .toc li a { padding-block: .6rem; }
}

/* Partage */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.share-head { margin-top: 1rem; }
.share-end { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.share-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1rem; border-radius: 999px; font: inherit; font-size: .92rem; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer; border: 1px solid var(--input-line); background: var(--surface); color: var(--text); transition: border-color .2s, background .2s; }
.share-btn:hover { border-color: var(--copper-ink); }
.guide-body .prose a.share-btn { color: var(--text); text-decoration: none; }
.share-btn[hidden] { display: none; }
.share-btn svg { flex: none; }
.page-head .share-btn { border-color: rgba(236, 234, 255, .4); background: rgba(255, 255, 255, .06); color: #f3f1ff; }
.page-head .share-btn:hover { border-color: var(--copper-l); background: rgba(255, 255, 255, .12); }
.page-head .share-btn:focus-visible { outline-color: var(--copper-l); }
.share-msg { flex-basis: 100%; margin: 0; font-size: .92rem; font-weight: 600; color: var(--g-text); }
.share-msg:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.page-head .share-msg { color: #eeecff; }
.share-msg input { display: block; width: 100%; max-width: 36rem; margin-top: .4rem; padding: .55rem .7rem; font: inherit; font-weight: 400; direction: ltr; text-align: left; border: 1px solid var(--input-line); border-radius: 10px; background: var(--surface); color: var(--text); }

@media print { .read-progress, .toc-toggle, .to-top, .share, .rd-backdrop { display: none !important; } }