/* =============================================================================
   Lecteur de fichiers (fenêtre modale) : photos, vidéos, sons, PDF, markdown, texte et code.
   Tout suit les jetons du site (tokens.css) : thème clair / sombre, arêtes vives, vermillon pour l'action.
   ============================================================================= */

/* ───── Fenêtre ───── */
dialog.reader {
  margin: auto; padding: 0;
  width: min(96vw, 88rem); height: min(94dvh, 64rem); max-width: none; max-height: none;
  color: var(--fg); background: var(--bg); border: 1px solid var(--border-hover);
  overflow: hidden;
}
dialog.reader[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
dialog.reader::backdrop { background: rgb(0 0 0 / 0.75); backdrop-filter: blur(4px); }
dialog.reader:focus { outline: none; }

.reader__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.75rem 0.5rem 1.25rem; background: var(--card); border-bottom: 1px solid var(--border); user-select: none; -webkit-user-select: none; }
.reader__info { min-width: 0; }
.reader__name { margin: 0; font-size: var(--fs-base); font-weight: 600; letter-spacing: var(--tracking-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader__meta { margin: 0.1rem 0 0; font-size: var(--fs-xs); color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader__actions { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.reader__count { min-width: 4.5ch; text-align: center; font-size: var(--fs-xs); color: var(--muted-fg); }

/* Boutons : marge d'action invisible autour de chacun, pour qu'un appui légèrement à côté ou un relâchement après un petit glissement
   reste sur le bouton (jamais un clic « dans le vide »). */
.reader__btn { position: relative; }
.reader__btn::after { content: ""; position: absolute; inset: -0.3rem; }
.reader__btn[aria-disabled="true"] { opacity: 0.3; cursor: default; }
.reader__btn[aria-disabled="true"]:hover { background: none; border-color: transparent; }

.reader__stage { position: relative; min-width: 0; min-height: 0; display: grid; background: var(--muted); }
.reader__stage:focus { outline: none; }
.reader__stage > * { min-width: 0; min-height: 0; }
dialog.reader[data-kind="markdown"] .reader__stage, dialog.reader[data-kind="text"] .reader__stage, dialog.reader[data-kind="code"] .reader__stage { background: var(--card); }

.reader__loader { position: absolute; inset: 0; margin: auto; width: 2rem; height: 2rem; border: 2px solid var(--border-hover); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
.reader__loader[hidden] { display: none; }
.reader__message { align-self: center; justify-self: center; display: grid; gap: 1rem; justify-items: center; max-width: 32rem; padding: 2rem; text-align: center; color: var(--muted-fg); }
.reader__message p { margin: 0; }

/* Zones qui défilent : le focus clavier reste visible mais discret */
.reader__scroll { overflow: auto; user-select: text; -webkit-user-select: text; }
.reader__scroll:focus-visible { outline: 1px solid var(--border-hover); outline-offset: -1px; }

/* ───── Photo ───── */
.reader__image { width: 100%; height: 100%; padding: 1rem; box-sizing: border-box; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.reader__image[hidden] { display: none; }

/* ───── Texte brut ───── */
.reader__text { margin: 0; padding: 1.5rem 1.75rem; font: var(--fs-sm)/1.65 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg); }

/* ───── Onglets (markdown : mise en page / source) ───── */
.reader__doc { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.reader__doc > [hidden] { display: none; }
.reader__tabs { display: flex; gap: 0; padding: 0 1rem; border-bottom: 1px solid var(--border); background: var(--card); }
.reader__tab { padding: 0.65rem 1rem; font: inherit; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--muted-fg); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.reader__tab:hover { color: var(--fg); }
.reader__tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }

/* ───── Code : numéros de ligne + code coloré ───── */
.code { min-height: 0; background: var(--card); }
.code__inner { display: flex; min-width: max-content; min-height: 100%; font: var(--fs-sm)/1.6 var(--font-mono); }
.code__lines { flex: none; margin: 0; padding: 1rem 0.75rem 1rem 1rem; text-align: right; white-space: pre; color: var(--muted-fg); background: var(--card); border-right: 1px solid var(--border); user-select: none; -webkit-user-select: none; position: sticky; left: 0; }
.code__body { flex: 1; margin: 0; padding: 1rem 1.25rem; font: inherit; white-space: pre; tab-size: 4; }
.code__body code { font: inherit; background: none; padding: 0; color: var(--fg); }
.reader__doc > .code[hidden] { display: none; }

/* Couleurs de la coloration syntaxique : mêmes familles que le reste du site (vermillon pour les mots-clés), contraste AA clair et sombre */
.hljs {
  --hl-keyword: var(--accent-text);
  --hl-string:  light-dark(#0B7A3E, #3DDC84);
  --hl-number:  light-dark(#8A5A00, #FFB020);
  --hl-fn:      light-dark(#0B5FA5, #6CB6FF);
  --hl-type:    light-dark(#7A3E9D, #C79BFF);
  --hl-attr:    light-dark(#0F766E, #5EEAD4);
  --hl-comment: var(--muted-fg);
  --hl-meta:    light-dark(#6B5B00, #E0C060);
  color: var(--fg);
}
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-name, .hljs-section, .hljs-doctag { color: var(--hl-keyword); }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-template-variable, .hljs-selector-attr, .hljs-selector-pseudo { color: var(--hl-string); }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-variable.constant_ { color: var(--hl-number); }
.hljs-title, .hljs-title.function_, .hljs-function > .hljs-title { color: var(--hl-fn); }
.hljs-type, .hljs-built_in, .hljs-title.class_, .hljs-class .hljs-title, .hljs-selector-class, .hljs-selector-id { color: var(--hl-type); }
.hljs-attr, .hljs-attribute, .hljs-property, .hljs-variable, .hljs-params, .hljs-tag { color: var(--hl-attr); }
.hljs-tag .hljs-name { color: var(--hl-keyword); }
.hljs-meta, .hljs-meta .hljs-keyword, .hljs-subst { color: var(--hl-meta); }
.hljs-meta .hljs-string { color: var(--hl-string); }
.hljs-comment, .hljs-quote { color: var(--hl-comment); font-style: italic; }
.hljs-deletion { color: var(--danger); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
.hljs-operator, .hljs-punctuation { color: var(--fg); }

/* ───── Markdown mis en page ───── */
.md { padding: 2rem clamp(1.25rem, 5vw, 3rem) 3rem; font-size: var(--fs-base); line-height: 1.7; color: var(--fg); overflow-wrap: break-word; }
.md > * { max-width: 50rem; margin-inline: auto; }
.md > :first-child { margin-top: 0; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: 2em auto 0.6em; line-height: 1.2; font-weight: 700; letter-spacing: var(--tracking-tight); }
.md h1 { font-size: var(--fs-4xl); margin-top: 0; padding-bottom: 0.4em; border-bottom: 1px solid var(--border); }
.md h2 { font-size: var(--fs-2xl); padding-bottom: 0.3em; border-bottom: 1px solid var(--border); }
.md h3 { font-size: var(--fs-xl); }
.md h4 { font-size: var(--fs-lg); }
.md h5, .md h6 { font-size: var(--fs-base); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--muted-fg); }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md table, .md details { margin-top: 0; margin-bottom: 1.1em; }
.md a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.2em; }
.md a:hover { text-decoration-thickness: 2px; }
.md strong { font-weight: 700; }
.md ul, .md ol { padding-left: 1.6em; }
.md ul { list-style: disc; }
.md ul ul { list-style: circle; }
.md ol { list-style: decimal; }
.md li + li { margin-top: 0.3em; }
.md li > ul, .md li > ol { margin-top: 0.3em; margin-bottom: 0; }
.md li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.4em; }
.md input[type="checkbox"] { margin-right: 0.5em; accent-color: var(--accent); }
.md blockquote { padding: 0.25rem 1.1rem; color: var(--muted-fg); border-left: 3px solid var(--accent); background: var(--muted); }
.md blockquote > :last-child { margin-bottom: 0; }
.md hr { max-width: 50rem; margin: 2rem auto; border: 0; border-top: 1px solid var(--border-hover); }
.md img { max-width: 100%; height: auto; }
.md :not(pre) > code { padding: 0.15em 0.4em; font: 0.9em var(--font-mono); background: var(--muted); border: 1px solid var(--border); }
.md .md__code { padding: 1rem 1.25rem; overflow-x: auto; font: var(--fs-sm)/1.6 var(--font-mono); background: var(--muted); border: 1px solid var(--border); }
.md .md__code code { font: inherit; background: none; border: 0; padding: 0; }
.md table { display: block; overflow-x: auto; border-collapse: collapse; width: max-content; max-width: 100%; margin-inline: auto; }
.md th, .md td { padding: 0.5rem 0.9rem; border: 1px solid var(--border-hover); text-align: left; }
.md th { background: var(--muted); font-weight: 700; }
.md tr:nth-child(even) td { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.md details { padding: 0.6rem 1rem; border: 1px solid var(--border); }
.md summary { cursor: pointer; font-weight: 600; }
.md .md__noimg { padding: 0.1em 0.5em; color: var(--muted-fg); background: var(--muted); font-size: var(--fs-sm); }
.md .md__noimg::before { content: "Image : "; }

/* ───── PDF ───── */
.pdf { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.pdf__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.4rem 0.75rem; background: var(--card); border-bottom: 1px solid var(--border); user-select: none; -webkit-user-select: none; }
.pdf__btn { position: relative; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; color: var(--fg); background: none; border: 1px solid transparent; cursor: pointer; }
.pdf__btn:hover { border-color: var(--border-hover); background: var(--muted); }
.pdf__btn::after { content: ""; position: absolute; inset: -0.2rem; }
.pdf__btn[aria-disabled="true"] { opacity: 0.3; cursor: default; }
.pdf__page-input { width: 4.5rem; min-height: 0; height: 2.25rem; padding: 0 0.5rem; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.pdf__page-input::-webkit-outer-spin-button, .pdf__page-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdf__total { font-size: var(--fs-sm); color: var(--muted-fg); }
.pdf__sep { width: 1px; height: 1.25rem; margin: 0 0.5rem; background: var(--border-hover); }
.pdf__zoom { min-width: 4.5rem; height: 2.25rem; padding: 0 0.5rem; font-size: var(--fs-sm); color: var(--fg); background: none; border: 1px solid transparent; cursor: pointer; }
.pdf__zoom:hover { border-color: var(--border-hover); background: var(--muted); }
.pdf__pages { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1rem 0; background: var(--muted); }
.pdf__page { position: relative; flex: none; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 8px 24px rgb(0 0 0 / 0.18); }
.pdf__canvas { display: block; }

/* Couche de texte superposée à la page (sélection et copie) : transparente, alignée sur le dessin */
.textLayer { position: absolute; inset: 0; overflow: clip; line-height: 1; text-align: initial; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 1; }
.textLayer :is(span, br) { position: absolute; color: transparent; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.textLayer br { display: none; }
.textLayer ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.textLayer .markedContent { top: 0; height: 0; }

/* ───── Lecteurs audio / vidéo ───── */
.player { position: relative; display: grid; min-height: 0; min-width: 0; outline: none; color: var(--fg); }
.player:focus-visible { outline: none; }   /* le lecteur lui-même n'a pas de cadre : les commandes qu'il contient ont le leur */
.player__btn { position: relative; display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.4rem; color: var(--fg); background: none; border: 1px solid transparent; font: inherit; cursor: pointer; flex: none; }
.player__btn:hover { border-color: var(--border-hover); background: var(--muted); }
.player__btn::after { content: ""; position: absolute; inset: -0.2rem; }
.player__btn[aria-disabled="true"] { opacity: 0.3; }
.player__play .icon, .player__big .icon { fill: currentColor; }
.player__speed { font-size: var(--fs-xs); min-width: 3.25rem; }
.player__time { flex: none; min-width: 3.4ch; font-size: var(--fs-xs); color: var(--muted-fg); text-align: center; font-variant-numeric: tabular-nums; }

.player__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; background: var(--card); border-top: 1px solid var(--border); user-select: none; -webkit-user-select: none; }
.player__seek { flex: 1 1 auto; min-width: 4rem; }
.player__volume { flex: none; width: 5.5rem; }

/* Curseurs (progression, volume) : piste vermillon pour la partie lue, gris pour la partie en mémoire */
.player__range { --p: 0%; --b: 0%; -webkit-appearance: none; appearance: none; height: 1.5rem; margin: 0; padding: 0; background: transparent; cursor: pointer; }
.player__range:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.player__range::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(to right, var(--accent) var(--p), color-mix(in srgb, var(--fg) 35%, transparent) var(--p) var(--b), var(--border-hover) var(--b)); }
.player__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 16px; margin-top: -6px; background: var(--fg); border: 0; border-radius: 0; }
.player__range::-moz-range-track { height: 4px; background: linear-gradient(to right, var(--accent) var(--p), color-mix(in srgb, var(--fg) 35%, transparent) var(--p) var(--b), var(--border-hover) var(--b)); }
.player__range::-moz-range-thumb { width: 12px; height: 16px; background: var(--fg); border: 0; border-radius: 0; }
.player__range:hover::-webkit-slider-thumb { background: var(--accent); }
.player__range:hover::-moz-range-thumb { background: var(--accent); }

/* Vidéo : image centrée, barre de commandes par-dessus le bas (elle s'efface pendant la lecture) */
.player--video { grid-template-rows: minmax(0, 1fr); background: #000; }
.player--video .player__media { width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #000; }
.player--video .player__bar { position: absolute; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); transition: opacity var(--t-fast) var(--ease); }
.player--video.is-idle { cursor: none; }
.player--video.is-idle .player__bar { opacity: 0; pointer-events: none; }
.player__big { position: absolute; inset: 0; margin: auto; width: 5rem; height: 5rem; color: var(--accent-fg); background: var(--accent); border: 0; display: grid; place-items: center; cursor: pointer; transition: transform var(--t-fast) var(--ease); }
.player__big:hover { transform: scale(1.06); }
.player__big[hidden] { display: none; }
.player__big .icon { width: 2rem; height: 2rem; }
.player--video.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 2.5rem; height: 2.5rem; border: 2px solid rgb(255 255 255 / 0.3); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; pointer-events: none; }
.player--video.is-fullscreen .player__bar { background: rgb(10 10 10 / 0.8); color: #fff; }
.player--video.is-fullscreen .player__btn, .player--video.is-fullscreen .player__time { color: #fff; }

/* Son : pochette, titre, commandes */
.player--audio { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--muted); }
.player--audio .player__bar { width: min(100%, 44rem); }
.player__cover { margin-bottom: 1.5rem; width: 8rem; height: 8rem; display: grid; place-items: center; color: var(--accent-fg); background: var(--accent); }
.player__cover .icon { width: 3.5rem; height: 3.5rem; stroke-width: 1.25; }
.player--audio.is-playing .player__cover { animation: reader-pulse 1.8s var(--ease) infinite; }
.player__title { margin: 0 0 1.5rem; padding: 0 1.5rem; max-width: 100%; font-size: var(--fs-lg); font-weight: 600; text-align: center; overflow-wrap: anywhere; }
@keyframes reader-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 1.25rem transparent; } }

@media (max-width: 640px) {
  dialog.reader { width: 100vw; height: 100dvh; border: 0; }
  .reader__head { padding-left: 0.9rem; gap: 0.5rem; }
  .reader__actions { gap: 0.5rem; }
  .reader__count { display: none; }
  .player__volume, .player__mute { display: none; }
  .player__bar { gap: 0.25rem; padding-inline: 0.4rem; }
  .md { padding-top: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reader__loader, .player--audio.is-playing .player__cover, .player--video.is-loading::after { animation-duration: 3s; }
  .player--audio.is-playing .player__cover { animation: none; }
}