/* ==========================================================================
   Audiovo — design system (Branding Guide v1.0, 12/11/2026)
   Official palette + derived accessible shades (documented in docs/charte-web.md).
   Contrast targets WCAG 2.2 AA: 4.5:1 body text, 3:1 large text / UI parts.
   ========================================================================== */

/* ---- Fonts (self-hosted, SIL OFL — licences in /fonts) ---- */
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/lato-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/lato-latin-700-normal.woff2") format("woff2"); }

:root {
  /* Official palette */
  --av-navy: #0B2D5B;        /* Bleu Confiance — principal (12.7:1 sur crème) */
  --av-gold: #D4AF37;        /* Or Doux — accent ; jamais en texte sur fond clair */
  --av-cream: #F8F7F2;       /* Crème Sérénité — fond principal */
  --av-slate: #6B7C93;       /* Bleu Gris — séparateurs, éléments neutres */
  --av-green: #7CB342;       /* Vert Doux — succès (en fond, texte bleu : 5.4:1) */

  /* Derived shades (accessibility) */
  --av-navy-700: #082245;    /* survol des boutons */
  --av-navy-050: #E7ECF3;    /* fonds d'information */
  --av-slate-text: #56667C;  /* texte secondaire : 5.5:1 sur crème (Bleu Gris = 3.97:1, insuffisant) */
  --av-slate-200: #D5DBE3;   /* bordures légères */
  --av-gold-100: #F6EDCB;    /* fond d'avertissement doux (texte bleu) */
  --av-green-100: #E6F2D9;   /* fond de succès (texte bleu) */
  --av-danger: #A4262C;      /* erreurs : 6.6:1 sur crème — toujours avec icône + texte */
  --av-danger-100: #F7E3E4;
  --av-surface: #FFFFFF;
  --av-text: var(--av-navy);
  --av-text-muted: var(--av-slate-text);
  --av-border: var(--av-slate-200);
  --av-focus-ring: var(--av-gold);

  --av-font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --av-font-body: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --av-radius: 14px;
  --av-radius-sm: 10px;
  --av-shadow: 0 1px 2px rgba(11, 45, 91, .06), 0 4px 16px rgba(11, 45, 91, .06);
  --av-tap: 48px;            /* zones tactiles généreuses */

  /* Bootstrap bridge */
  --bs-body-font-family: var(--av-font-body);
  --bs-body-bg: var(--av-cream);
  --bs-body-color: var(--av-text);
  --bs-emphasis-color: var(--av-navy);
  --bs-secondary-color: var(--av-text-muted);
  --bs-border-color: var(--av-border);
  --bs-primary: var(--av-navy);
  --bs-primary-rgb: 11, 45, 91;
  --bs-link-color: var(--av-navy);
  --bs-link-color-rgb: 11, 45, 91;
  --bs-link-hover-color: var(--av-navy-700);
  --bs-link-hover-color-rgb: 8, 34, 69;
  --bs-border-radius: var(--av-radius-sm);
  --bs-heading-color: var(--av-navy);
}

/* ---- Display settings (Branding §8: taille configurable, contraste renforcé) ---- */
html { font-size: 100%; }
html[data-text-size="large"] { font-size: 112.5%; }
html[data-text-size="xlarge"] { font-size: 125%; }

html[data-contrast="high"] {
  --av-cream: #FFFFFF;
  --av-text-muted: var(--av-navy);
  --av-border: var(--av-navy);
  --av-slate-200: var(--av-navy);
  --bs-body-bg: #FFFFFF;
  --bs-secondary-color: var(--av-navy);
  --bs-border-color: var(--av-navy);
}
html[data-contrast="high"] a { text-decoration-thickness: 2px; }
html[data-contrast="high"] .av-card, html[data-contrast="high"] .card { border-width: 2px; box-shadow: none; }

/* ---- Base ---- */
body {
  font-family: var(--av-font-body);
  font-size: 1.125rem;            /* 18px de base — jamais < 16px (Branding §8) */
  line-height: 1.6;
  background: var(--av-cream);
  color: var(--av-text);
  -webkit-font-smoothing: antialiased;
  /* Fixed footer: its height (--av-footer-h, measured by app.js) is reserved at the end of
     the page so it never hides content. */
  padding-bottom: var(--av-footer-h, 5rem);
}
/* Keyboard focus and anchor jumps are never hidden behind the fixed footer (WCAG 2.4.11). */
html { scroll-padding-bottom: calc(var(--av-footer-h, 5rem) + 1rem); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .av-heading {
  font-family: var(--av-font-heading);
  font-weight: 600;
  color: var(--av-navy);
  letter-spacing: -.005em;
  line-height: 1.25;
}
h1, .h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); }
h2, .h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); }
h3, .h3, .h4 { font-size: 1.3rem; }
.h5, h5 { font-size: 1.15rem; }
.h6, h6 { font-size: 1.05rem; }
.lead { font-size: 1.25rem; }
a { color: var(--av-navy); text-underline-offset: .2em; }
a:hover { color: var(--av-navy-700); }
.text-body-secondary, .text-muted, .av-muted { color: var(--av-text-muted) !important; }
.small, small { font-size: .9375rem; }   /* 15–17px selon le réglage — reste ≥ 15px */
.mono { font-family: var(--av-font-body); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
hr { border-color: var(--av-border); opacity: 1; }

/* Visible focus — gold ring + navy halo, readable on cream and on navy (WCAG 2.4.7 / 2.4.11) */
:focus-visible { outline: 3px solid var(--av-focus-ring) !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px var(--av-navy) !important; border-radius: 6px; }
.av-header :focus-visible { box-shadow: 0 0 0 6px var(--av-cream) !important; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--av-navy); color: var(--av-cream); padding: .75rem 1.25rem; border-radius: 0 0 var(--av-radius-sm) var(--av-radius-sm); font-weight: 700; }
.skip-link:focus { left: 1rem; color: var(--av-cream); }

/* ---- Header (navy, cream text, gold accents only) ---- */
.av-header { background: var(--av-navy); color: var(--av-cream); }
.av-header a, .av-header .btn-link { color: var(--av-cream); }
.av-brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--av-cream); min-height: var(--av-tap); }
.av-brand img { width: 40px; height: 40px; }
.av-brand-name { font-family: var(--av-font-heading); font-weight: 600; font-size: 1.4rem; letter-spacing: .01em; line-height: 1; }
.av-brand-product { display: block; font-family: var(--av-font-body); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--av-gold); margin-top: .2rem; }
.av-nav { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.av-nav a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: var(--av-tap);
  padding: .5rem .9rem; border-radius: var(--av-radius-sm); text-decoration: none;
  color: var(--av-cream); font-weight: 700; border-bottom: 3px solid transparent;
}
.av-nav a:hover { background: rgba(248, 247, 242, .1); color: var(--av-cream); }
.av-nav a[aria-current="page"] { border-bottom-color: var(--av-gold); border-radius: var(--av-radius-sm) var(--av-radius-sm) 0 0; }
.av-nav .bi { font-size: 1.25rem; }
.av-header .av-search { display: flex; gap: .5rem; max-width: 34rem; flex: 1 1 18rem; }
.av-header .av-search .form-control { border: 0; }
.av-userbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.av-subnav { background: var(--av-surface); border-bottom: 1px solid var(--av-border); }
.av-subnav .av-nav a { color: var(--av-navy); font-weight: 700; }
.av-subnav .av-nav a:hover { background: var(--av-navy-050); color: var(--av-navy); }

/* ---- Buttons (≥ 48px, one clear primary action) ---- */
.btn { min-height: var(--av-tap); padding: .6rem 1.25rem; font-weight: 700; border-radius: var(--av-radius-sm); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-size: 1.0625rem; }
.btn-sm { min-height: 40px; padding: .4rem .9rem; font-size: 1rem; }
.btn-lg { min-height: 56px; padding: .8rem 1.6rem; font-size: 1.2rem; }
.btn-primary {
  --bs-btn-bg: var(--av-navy); --bs-btn-border-color: var(--av-navy); --bs-btn-color: var(--av-cream);
  --bs-btn-hover-bg: var(--av-navy-700); --bs-btn-hover-border-color: var(--av-navy-700); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--av-navy-700); --bs-btn-active-border-color: var(--av-navy-700);
  --bs-btn-disabled-bg: var(--av-slate); --bs-btn-disabled-border-color: var(--av-slate); --bs-btn-disabled-color: #fff;
}
.btn-outline-primary, .btn-outline-secondary {
  --bs-btn-color: var(--av-navy); --bs-btn-border-color: var(--av-navy); --bs-btn-bg: var(--av-surface);
  --bs-btn-hover-bg: var(--av-navy-050); --bs-btn-hover-color: var(--av-navy); --bs-btn-hover-border-color: var(--av-navy);
  --bs-btn-active-bg: var(--av-navy-050); --bs-btn-active-color: var(--av-navy);
  border-width: 2px;
}
.btn-accent { /* Or Doux en fond, texte bleu (6.5:1) — usage ponctuel sur fond bleu */
  --bs-btn-bg: var(--av-gold); --bs-btn-border-color: var(--av-gold); --bs-btn-color: var(--av-navy);
  --bs-btn-hover-bg: #E1C25E; --bs-btn-hover-border-color: #E1C25E; --bs-btn-hover-color: var(--av-navy);
}
.btn-on-dark { --bs-btn-color: var(--av-cream); --bs-btn-border-color: var(--av-cream); --bs-btn-bg: transparent; --bs-btn-hover-bg: rgba(248,247,242,.12); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--av-cream); border-width: 2px; }
.btn-danger, .btn-outline-danger { border-width: 2px; }
.btn-danger { --bs-btn-bg: var(--av-danger); --bs-btn-border-color: var(--av-danger); --bs-btn-hover-bg: #861E23; --bs-btn-hover-border-color: #861E23; }
.btn-outline-danger { --bs-btn-color: var(--av-danger); --bs-btn-border-color: var(--av-danger); --bs-btn-bg: var(--av-surface); --bs-btn-hover-bg: var(--av-danger-100); --bs-btn-hover-color: var(--av-danger); --bs-btn-hover-border-color: var(--av-danger); }
.btn-link { font-weight: 700; color: var(--av-navy); }

/* ---- Forms ---- */
.form-label { font-weight: 700; margin-bottom: .35rem; }
.form-control, .form-select { min-height: var(--av-tap); font-size: 1.0625rem; border: 2px solid var(--av-slate); border-radius: var(--av-radius-sm); background-color: var(--av-surface); color: var(--av-navy); }
.form-control:focus, .form-select:focus { border-color: var(--av-navy); box-shadow: none; }
.form-control-lg, .form-select-lg { min-height: 56px; font-size: 1.2rem; }
.form-control-sm, .form-select-sm { min-height: 40px; font-size: 1rem; }
.form-control::placeholder { color: var(--av-slate-text); opacity: 1; }
.form-text { color: var(--av-text-muted); font-size: 1rem; }
.form-check { min-height: 2rem; padding-left: 2.2rem; }
.form-check-input, .form-check .form-check-input { width: 1.5rem; height: 1.5rem; margin-left: -2.2rem; margin-top: .1rem; border: 2px solid var(--av-navy); }
.form-check-label { padding-left: .15rem; }
.form-check-input:checked { background-color: var(--av-navy); border-color: var(--av-navy); }
.invalid-feedback { color: var(--av-danger); font-weight: 700; font-size: 1rem; }
.is-invalid { border-color: var(--av-danger) !important; }

/* ---- Cards & surfaces ---- */
.av-card, .card { background: var(--av-surface); border: 1px solid var(--av-border); border-radius: var(--av-radius); box-shadow: var(--av-shadow); color: var(--av-text); }
.card-body { padding: 1.5rem; }
.av-section-title { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.av-section-title .bi { color: var(--av-navy); }
.av-eyebrow { font-family: var(--av-font-body); font-size: .9rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--av-text-muted); margin-bottom: .25rem; }
.av-accent-rule { width: 56px; height: 4px; background: var(--av-gold); border-radius: 2px; margin: .5rem 0 1.25rem; }

/* Hero (navy surface, cream text, gold accent) */
.av-hero { background: var(--av-navy); color: var(--av-cream); border-radius: var(--av-radius); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.av-hero :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: var(--av-cream); }
.av-hero .cover-placeholder { background: rgba(248, 247, 242, .14); outline: 1px solid rgba(248, 247, 242, .35); }
.av-hero .av-muted-on-dark { color: #D9DEE6; } /* 10.3:1 sur bleu */
.av-hero .av-eyebrow { color: var(--av-gold); }
/* Gold progress on navy (6.5:1) */
.av-hero progress { background: rgba(248, 247, 242, .25); }
.av-hero progress::-webkit-progress-bar { background: rgba(248, 247, 242, .25); }
.av-hero progress::-webkit-progress-value { background: var(--av-gold); }
.av-hero progress::-moz-progress-bar { background: var(--av-gold); }

/* Book covers */
.cover { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--av-navy-050); border-radius: var(--av-radius-sm); display: block; }
.cover-placeholder { display: flex; align-items: center; justify-content: center; background: var(--av-navy); }
.cover-placeholder img { width: 45%; height: auto; opacity: .95; }
.cover-sm { width: 88px; height: 88px; flex: 0 0 88px; }
.cover-xs { width: 64px; height: 64px; flex: 0 0 64px; }

/* Book grid (Branding §6: bibliothèque en grille) */
.av-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.av-grid-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.av-book { display: flex; flex-direction: column; height: 100%; padding: 1rem; }
.av-book-title { font-family: var(--av-font-heading); font-weight: 600; font-size: 1.15rem; line-height: 1.3; margin: .9rem 0 .25rem; }
.av-book-title a { text-decoration: none; }
.av-book-title a:hover { text-decoration: underline; }
.av-book-meta { color: var(--av-text-muted); margin-bottom: .75rem; }
.av-book-actions { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; }

/* Progress */
progress { -webkit-appearance: none; appearance: none; width: 100%; height: .75rem; border: 0; border-radius: 999px; overflow: hidden; background: var(--av-navy-050); color: var(--av-navy); }
progress::-webkit-progress-bar { background: var(--av-navy-050); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--av-navy); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--av-navy); border-radius: 999px; }
html[data-contrast="high"] progress { outline: 1px solid var(--av-navy); }
.av-progress-label { display: flex; justify-content: space-between; font-size: 1rem; color: var(--av-text-muted); }

/* Status pills — never color alone: icon + text (Branding §2) */
.av-status { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; font-weight: 700; font-size: .95rem; border: 1px solid transparent; white-space: nowrap; color: var(--av-navy); background: var(--av-navy-050); }
.av-status--success { background: var(--av-green-100); border-color: var(--av-green); }
.av-status--success .bi { color: #3F6E1B; }
.av-status--progress { background: var(--av-navy-050); border-color: var(--av-slate); }
.av-status--warning { background: var(--av-gold-100); border-color: var(--av-gold); }
.av-status--danger { background: var(--av-danger-100); border-color: var(--av-danger); color: var(--av-danger); }
.av-status--neutral { background: var(--av-surface); border-color: var(--av-slate); color: var(--av-slate-text); }

/* Alerts */
.alert { border-radius: var(--av-radius-sm); border-width: 0 0 0 6px; border-style: solid; color: var(--av-navy); font-size: 1.0625rem; display: flex; gap: .75rem; align-items: flex-start; }
.alert > .bi { font-size: 1.4rem; line-height: 1.2; }
.alert-success { background: var(--av-green-100); border-color: var(--av-green); }
.alert-danger { background: var(--av-danger-100); border-color: var(--av-danger); }
.alert-warning { background: var(--av-gold-100); border-color: var(--av-gold); }
.alert-info { background: var(--av-navy-050); border-color: var(--av-navy); }

/* Tables (Console: denser) */
.table { --bs-table-bg: var(--av-surface); --bs-table-color: var(--av-navy); --bs-table-striped-bg: #F3F5F8; --bs-table-border-color: var(--av-border); }
.table > :not(caption) > * > * { padding: .75rem .9rem; }
.table thead th { font-family: var(--av-font-heading); font-weight: 600; font-size: .95rem; border-bottom: 2px solid var(--av-navy); }

/* Lists, breadcrumbs, pagination */
.list-group-item { color: var(--av-navy); border-color: var(--av-border); padding: .9rem 1.1rem; }
.breadcrumb { font-size: 1rem; }
.breadcrumb-item.active { color: var(--av-text-muted); }
.pagination { --bs-pagination-color: var(--av-navy); --bs-pagination-active-bg: var(--av-navy); --bs-pagination-active-border-color: var(--av-navy); --bs-pagination-padding-x: 1rem; --bs-pagination-padding-y: .6rem; --bs-pagination-font-size: 1.0625rem; }
.badge { font-weight: 700; }

/* Device tiles */
.av-device { display: flex; gap: 1rem; align-items: flex-start; }
.av-device-icon { width: 56px; height: 56px; border-radius: var(--av-radius-sm); background: var(--av-navy-050); display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; flex: 0 0 56px; }
.av-kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0; }
.av-kv dt { font-weight: 700; }
.av-kv dd { margin: 0; }

/* Stats (Console) */
.stat { font-family: var(--av-font-heading); font-size: 2rem; font-weight: 600; line-height: 1.1; }
.av-stat-label { color: var(--av-text-muted); font-weight: 700; font-size: 1rem; display: flex; align-items: center; gap: .4rem; }

/* Auth / brand pages */
.av-auth { min-height: 60vh; display: grid; place-items: center; padding: 2rem 0; }
.av-auth-card { width: 100%; max-width: 30rem; }
.av-auth-brand { text-align: center; margin-bottom: 1.5rem; }
.av-auth-brand img { width: 88px; height: 88px; }
.av-auth-brand .av-brand-name { color: var(--av-navy); font-size: 2.1rem; display: block; margin-top: .5rem; }
.av-signature { font-family: var(--av-font-heading); font-weight: 500; font-size: 1.2rem; color: var(--av-navy); margin: .5rem 0 0; }
.av-signature-sub { color: var(--av-text-muted); }

/* Footer */
.av-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; border-top: 4px solid var(--av-gold); background: var(--av-navy); color: var(--av-cream); padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom)); }
.av-footer ul a { display: inline-flex; align-items: center; min-height: 36px; }
@media (max-width: 767.98px) {
  .av-footer .av-footer-brand { display: none !important; }   /* keep the fixed bar compact on phones */
  .av-footer ul { gap: .25rem 1rem !important; font-size: 1rem; }
}
.av-footer a { color: var(--av-cream); }
.av-footer a:hover { color: #fff; }
.av-footer .av-signature { color: var(--av-cream); font-size: 1.05rem; }

/* Display settings panel */
.av-display-panel { background: var(--av-surface); color: var(--av-navy); border-radius: var(--av-radius); box-shadow: var(--av-shadow); border: 1px solid var(--av-border); padding: 1.25rem; }
.av-display-panel .btn[aria-pressed="true"] { background: var(--av-navy); color: var(--av-cream); }
.av-display-panel fieldset + fieldset { margin-top: 1rem; }
.av-display-panel legend { font-family: var(--av-font-heading); font-weight: 600; font-size: 1.05rem; }

/* Help */
.av-help details { background: var(--av-surface); border: 1px solid var(--av-border); border-radius: var(--av-radius-sm); padding: 0; margin-bottom: .75rem; }
.av-help summary { cursor: pointer; padding: 1rem 1.25rem; font-family: var(--av-font-heading); font-weight: 600; min-height: var(--av-tap); list-style-position: inside; }
.av-help details > div { padding: 0 1.25rem 1.25rem; }

/* ---- Console (administration): same palette, higher density (Branding §6) ---- */
body.av-console { font-size: 1rem; }
body.av-console .card-body { padding: 1.15rem; }
body.av-console .btn { min-height: 40px; font-size: 1rem; }
body.av-console .table > :not(caption) > * > * { padding: .5rem .65rem; }
body.av-console .form-control, body.av-console .form-select { min-height: 42px; font-size: 1rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (max-width: 575.98px) { .card-body { padding: 1.1rem; } .av-hero { border-radius: var(--av-radius-sm); } }
@media print { .av-header, .av-footer, .skip-link { display: none; } body { background: #fff; padding-bottom: 0; } }

/* ---- Small screens: no horizontal scroll, header stacks cleanly ---- */
.av-search .form-control { min-width: 0; }
.av-userbar { max-width: 100%; }
@media (max-width: 767.98px) {
  .av-header .av-search { flex: 1 1 100%; max-width: none; }
  .av-userbar { width: 100%; }
  .av-userbar > * { flex: 1 1 auto; }
  .av-userbar > form { display: flex; }
  .av-userbar > form > .btn { flex: 1 1 auto; }
  .av-brand { margin-right: 0 !important; }
  .av-nav a { padding: .5rem .65rem; }
  .av-hero .btn-lg { width: 100%; }
}

/* ---- Web player (Audiovo Library) ---- */
.av-player-head { display: flex; gap: 1.5rem; align-items: center; margin-bottom: 1.5rem; }
.av-player-cover { width: 140px; flex: 0 0 140px; }
.av-player .h4 { color: var(--av-gold); font-family: var(--av-font-body); font-weight: 700; font-size: 1.15rem; }
.av-player-seek { margin-bottom: 1.25rem; }
.av-player-times { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; font-size: 1.05rem; margin-top: .35rem; }
.av-range { width: 100%; height: 2.25rem; accent-color: var(--av-gold); cursor: pointer; background: transparent; }
.av-range::-webkit-slider-runnable-track { height: .6rem; border-radius: 999px; background: rgba(248, 247, 242, .3); }
.av-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.6rem; height: 1.6rem; margin-top: -.5rem; border-radius: 50%; background: var(--av-gold); border: 3px solid var(--av-cream); }
.av-range::-moz-range-track { height: .6rem; border-radius: 999px; background: rgba(248, 247, 242, .3); }
.av-range::-moz-range-thumb { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--av-gold); border: 3px solid var(--av-cream); }
.av-player-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: .75rem; margin-bottom: 1.5rem; }
.av-ctl {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  min-width: 7.5rem; min-height: 5rem; padding: .6rem .8rem; border-radius: var(--av-radius-sm);
  background: transparent; color: var(--av-cream); border: 2px solid rgba(248, 247, 242, .7);
  font-weight: 700; font-size: 1rem; line-height: 1.2;
}
.av-ctl .bi { font-size: 1.75rem; line-height: 1; }
.av-ctl:hover { background: rgba(248, 247, 242, .12); }
.av-ctl-play { min-width: 9rem; background: var(--av-gold); color: var(--av-navy); border-color: var(--av-gold); font-size: 1.15rem; }
.av-ctl-play .bi { font-size: 2.5rem; }
.av-ctl-play:hover { background: #E1C25E; }
.av-player-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(248, 247, 242, .25); }
.av-player-settings .form-label { color: var(--av-cream); }
.av-player-settings .form-select { border-color: var(--av-cream); }
.av-player-status { min-height: 1.6em; margin-top: 1rem; font-weight: 700; }
.av-chapters { display: flex; flex-direction: column; gap: .5rem; }
.av-chapter {
  width: 100%; display: flex; align-items: center; gap: 1rem; min-height: var(--av-tap); padding: .75rem 1rem;
  background: var(--av-surface); color: var(--av-navy); border: 1px solid var(--av-border); border-radius: var(--av-radius-sm); font-size: 1.05rem;
}
.av-chapter:hover { background: var(--av-navy-050); }
.av-chapter[aria-current="true"] { border: 2px solid var(--av-navy); background: var(--av-navy-050); font-weight: 700; }
.av-chapter-num { width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: 50%; background: var(--av-navy-050); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.av-chapter[aria-current="true"] .av-chapter-num { background: var(--av-navy); color: var(--av-cream); }
.av-chapter-state { font-size: .95rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 575.98px) {
  .av-player-head { flex-direction: column; align-items: flex-start; }
  .av-player-cover { width: 110px; flex-basis: auto; }
  .av-ctl { min-width: calc(50% - .5rem); }
  .av-ctl-play { order: -1; min-width: 100%; }
}

/* ---- Genres ---- */
.av-genre-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.av-genre-chips a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: var(--av-tap); padding: .45rem 1rem;
  border: 2px solid var(--av-navy); border-radius: 999px; background: var(--av-surface); color: var(--av-navy);
  font-weight: 700; text-decoration: none;
}
.av-genre-chips a:hover { background: var(--av-navy-050); }
.av-genre-chips a[aria-current="true"] { background: var(--av-navy); color: var(--av-cream); }
.av-genre-chips a[aria-current="true"]::before { content: "✓"; } /* state not conveyed by colour alone */
.av-chip-count { font-size: .85em; font-weight: 700; padding: 0 .45rem; border-radius: 999px; background: var(--av-navy-050); color: var(--av-navy); }
.av-genre-chips a[aria-current="true"] .av-chip-count { background: var(--av-gold); color: var(--av-navy); }
.av-book-genre { font-size: .95rem; font-weight: 700; color: var(--av-text-muted); letter-spacing: .02em; }

/* ---- Destructive zone (border + icon + text, not colour alone) ---- */
.av-danger-zone { border: 2px solid var(--av-danger); }
.av-danger-zone h2 { color: var(--av-danger); }

/* ---- Remaining listening time (library) ---- */
.av-remaining { font-size: 1.05rem; }
.av-remaining .bi { color: var(--av-navy); margin-right: .2rem; }
.av-remaining strong { font-family: var(--av-font-heading); font-weight: 600; }
/* On the navy hero, icons and labels use the light/gold variants. */
.av-hero .av-remaining .bi { color: var(--av-gold); }
.av-hero .av-progress-label { color: #D9DEE6; }

/* ---- Add a player (pairing code) ---- */
.av-pair-primary { border: 2px solid var(--av-navy); }
.av-pair-code { letter-spacing: .2em; font-weight: 700; font-size: 1.4rem; }

/* ---- Installable app ---- */
.av-install { border: 2px solid var(--av-navy); }
.av-install-icon { border-radius: 14px; flex: 0 0 64px; }
/* Installed (standalone) on a phone: respect the notch / home indicator. */
@media (display-mode: standalone) {
  .av-header { padding-top: env(safe-area-inset-top); }
}

/* ---- Series ---- */
.av-volume { flex: 0 0 3rem; width: 3rem; height: 3rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--av-navy); color: var(--av-cream); font-family: var(--av-font-heading); font-weight: 600; font-size: 1.15rem; }
.av-series-nav { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.av-book-genre a { color: inherit; }
.av-next-volume { font-weight: 700; }

/* "Audio HD" badge (books encoded at high quality) */
.av-hd { display: inline-flex; align-items: center; gap: .3em; padding: .1em .55em; border-radius: 999px;
  background: var(--av-gold, #D4AF37); color: var(--av-navy, #0B2D5B); font-weight: 700; font-size: .85em;
  line-height: 1.6; white-space: nowrap; vertical-align: middle; }
.av-book-title + .av-hd { margin-bottom: .35rem; }

/* Lists of authors / narrators */
.av-people { columns: 3 16rem; column-gap: 2rem; }
.av-people li { break-inside: avoid; padding: .3rem 0; font-size: 1.1rem; }

/* "Mon lecteur": remote control of a nearby player */
.av-remote-buttons { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; }
.av-remote-buttons .btn { min-width: 4.5rem; min-height: 3.5rem; font-size: 1.2rem; }
.av-remote-play { min-width: 6rem !important; font-size: 1.8rem !important; }
.av-remote-volume { display: flex; gap: 1rem; align-items: center; justify-content: center; font-size: 1.2rem; }
.av-remote-volume .btn { min-width: 4.5rem; min-height: 3.5rem; }