/* ============================================================
   Grz — système de design (par-dessus Bootstrap 5)
   Monochrome zinc : l'encre sert d'accent, aucune couleur de marque,
   typo Inter + JetBrains Mono, 3 thèmes : dark (défaut) / gray / light.

   NE PAS renommer (ciblés par sync-room.js) :
   .hidden .danger .message .mine .head .empty .ticks .read
   .highlight .is-playing .is-pinned .media-background
   .app-view-inactive .search-source-hidden .toast-hidden
   #status #status.ok #status.error #record.danger
   ============================================================ */

:root {
  color-scheme: light;

  /* Accent : l'encre elle-même (monochrome) */
  --brand: #18181b;
  --brand-dark: #09090b;
  --brand-soft: #f4f4f5;
  --brand-ring: rgba(24, 24, 27, .18);
  --fill: #18181b;             /* fond des éléments pleins */
  --fill-hover: #3f3f46;
  --on-fill: #ffffff;
  --grad: var(--fill);

  /* Sémantique */
  --danger: #d92d3a;
  --danger-soft: #fff1f2;
  --danger-border: #fecdd3;
  --danger-hover: #ffe4e6;
  --ok: #0a7a56;
  --ok-soft: #ecfdf5;
  --ok-border: #a7f3d0;

  /* Neutres (zinc) */
  --ink: #18181b;
  --ink-2: #3f3f46;
  --muted: #61616b;
  --faint: #797983;
  --border: #e4e4e7;
  --border-strong: #d1d1d6;
  --bg: #f6f6f7;
  --surface: #ffffff;
  --soft: #fafafa;
  --glow-1: rgba(24, 24, 27, .04);
  --glow-2: rgba(113, 113, 122, .04);
  --nav-bg: rgba(255, 255, 255, .8);
  --input-bg: #ffffff;
  --btn-bg: #ffffff;

  /* Chat */
  --chat-body: #ededef;
  --message-bg: #ffffff;
  --message-mine-bg: #dedee2;
  --message-mine-border: #c9c9cf;
  --read: #2f80ed;
  --reply-bg: rgba(24, 24, 27, .06);
  --reply-bg-hover: rgba(24, 24, 27, .1);
  --status-bg: rgba(255, 255, 255, .95);
  --ok-bg: rgba(236, 253, 245, .97);
  --error-bg: rgba(255, 241, 242, .97);

  /* Forme & élévation */
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(24, 24, 27, .05);
  --shadow-lift: 0 14px 34px -14px rgba(24, 24, 27, .28), 0 3px 8px rgba(24, 24, 27, .05);
  --shadow-pop: 0 12px 34px rgba(24, 24, 27, .14);
  --nav-h: 48px;
  --ease: cubic-bezier(.22, .8, .3, 1);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

[data-theme="dark"] {
  color-scheme: dark;
  --brand: #fafafa;
  --brand-dark: #ffffff;
  --brand-soft: rgba(255, 255, 255, .07);
  --brand-ring: rgba(255, 255, 255, .22);
  --fill: #fafafa;
  --fill-hover: #d4d4d8;
  --on-fill: #09090b;
  --danger: #fb7185;
  --danger-soft: rgba(244, 63, 94, .12);
  --danger-border: rgba(251, 113, 133, .4);
  --danger-hover: rgba(244, 63, 94, .2);
  --ok: #34d399;
  --ok-soft: rgba(16, 185, 129, .12);
  --ok-border: rgba(52, 211, 153, .4);
  --ink: #fafafa;
  --ink-2: #d4d4d8;
  --muted: #a1a1aa;
  --faint: #7d7d87;
  --border: #242428;
  --border-strong: #36363c;
  --bg: #09090b;
  --surface: #131315;
  --soft: #0e0e10;
  --glow-1: rgba(255, 255, 255, .04);
  --glow-2: rgba(255, 255, 255, .02);
  --nav-bg: rgba(9, 9, 11, .8);
  --input-bg: #0e0e10;
  --btn-bg: #1a1a1d;
  --chat-body: #0b0b0c;
  --message-bg: #1b1b1e;
  --message-mine-bg: #2e2e33;
  --message-mine-border: #46464d;
  --read: #60a5fa;
  --reply-bg: rgba(255, 255, 255, .07);
  --reply-bg-hover: rgba(255, 255, 255, .13);
  --status-bg: rgba(26, 26, 29, .95);
  --ok-bg: rgba(8, 56, 42, .97);
  --error-bg: rgba(74, 20, 32, .97);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lift: 0 16px 40px -14px rgba(0, 0, 0, .8), 0 3px 10px rgba(0, 0, 0, .4);
  --shadow-pop: 0 14px 40px rgba(0, 0, 0, .6);
}

[data-theme="gray"] {
  color-scheme: light;
  --brand: #18181b;
  --brand-dark: #000000;
  --brand-soft: #dcdce0;
  --brand-ring: rgba(24, 24, 27, .2);
  --fill: #27272a;
  --fill-hover: #3f3f46;
  --danger-soft: #fdecee;
  --danger-hover: #fbdadd;
  --ink: #18181b;
  --ink-2: #3a3a42;
  --muted: #595962;
  --faint: #70707a;
  --border: #c4c4ca;
  --border-strong: #a8a8b0;
  --bg: #d4d4d8;
  --surface: #ececee;
  --soft: #e0e0e3;
  --glow-1: rgba(24, 24, 27, .04);
  --glow-2: rgba(24, 24, 27, .02);
  --nav-bg: rgba(236, 236, 238, .86);
  --input-bg: #f7f7f8;
  --btn-bg: #f7f7f8;
  --chat-body: #c9c9cf;
  --message-bg: #f7f7f8;
  --message-mine-bg: #d6d6dc;
  --message-mine-border: #b4b4bc;
  --read: #2563eb;
  --reply-bg: rgba(24, 24, 27, .07);
  --reply-bg-hover: rgba(24, 24, 27, .12);
  --status-bg: rgba(236, 236, 238, .95);
  --shadow-lift: 0 14px 34px -14px rgba(24, 24, 27, .32), 0 3px 8px rgba(24, 24, 27, .08);
}

* { box-sizing: border-box; }

html { min-height: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  font-family: var(--font);
  font-feature-settings: "cv11", "ss01", "calt";
  color: var(--ink-2);
  background:
    radial-gradient(1000px 520px at 88% -12%, var(--glow-1), transparent 62%),
    radial-gradient(800px 460px at -8% 2%, var(--glow-2), transparent 58%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Doit battre Bootstrap (utilisé par sync-room.js) */
.hidden { display: none !important; }

/* ------------------------------------------------------------
   Navbar
   ------------------------------------------------------------ */
.app-nav {
  position: sticky;
  top: 0;
  z-index: 3200;
  min-height: var(--nav-h);
  padding: .3rem .6rem;
  border-bottom: 1px solid var(--border);
  background: var(--nav-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}
.app-nav .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--on-fill);
  background: var(--fill);
  box-shadow: var(--shadow);
  font-size: .76rem;
}
.app-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem .9rem;
  border-radius: 10px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 600;
  transition: color .15s, background .15s;
}
.app-nav .nav-link:hover,
.app-nav .nav-link:focus-visible { color: var(--ink); background: var(--brand-soft); }
.app-nav .nav-link.active { color: var(--brand); background: var(--brand-soft); }
.app-nav .nav-link i { font-size: .85em; opacity: .85; }
.app-nav .navbar-toggler {
  min-height: 40px;
  padding: .35rem .65rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--ink-2);
}
.app-nav .navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center/1.5em no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center/1.5em no-repeat;
}
.app-nav .navbar-toggler:focus { box-shadow: 0 0 0 3px var(--brand-ring); }
.app-nav .container-lg { flex-wrap: nowrap; }
/* Pages à menu repliable (accueil, aide) : le bouton de thème suit le menu */
.app-nav.navbar-expand-md .container-lg { flex-wrap: wrap; }
.app-nav .navbar-collapse ~ .theme-toggle { margin-left: .35rem; }
@media (max-width: 767.98px) {
  .app-nav .navbar-collapse ~ .theme-toggle { order: 1; margin: 0 .4rem 0 auto; }
  .app-nav .navbar-toggler { order: 2; }
  .app-nav .navbar-collapse { order: 3; padding: .4rem 0 .5rem; }
}
.header-actions { display: flex; flex: none; flex-wrap: nowrap; align-items: center; gap: .25rem; margin-left: auto; white-space: nowrap; }
.header-icon,
.header-actions .theme-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font-size: .82rem;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.header-icon:hover,
.header-icon:focus-visible,
.header-actions .theme-toggle:hover:not(:disabled),
.header-actions .theme-toggle:focus-visible { color: var(--ink); background: var(--brand-soft); }
.header-icon.active { color: var(--brand); border-color: var(--brand-ring); background: var(--brand-soft); }

/* ------------------------------------------------------------
   Structure de page
   ------------------------------------------------------------ */
.page {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 1.25rem .9rem 4rem;
}
.page-wide { width: min(960px, 100%); }

.eyebrow,
.page-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .6rem;
  padding: .28rem .7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--brand);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
h1, .h1 {
  margin: 0 0 .5rem;
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(1.6rem, 5.5vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.page-head p.lead-text {
  max-width: 56ch;
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

/* ------------------------------------------------------------
   Cartes
   ------------------------------------------------------------ */
.card-app {
  position: relative;
  margin-top: .75rem;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.card-app > h2,
.card-title-app {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .8rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.card-title-app i { color: var(--brand); font-size: 1em; }
.card-app p.hint {
  margin: .85rem 0 0;
  color: var(--faint);
  font-size: .84rem;
  line-height: 1.55;
}

/* ------------------------------------------------------------
   Champs & boutons
   ------------------------------------------------------------ */
.row-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
}
.join-fields { display: grid; gap: .7rem; }
.join-fields .btn-app { width: 100%; margin-top: .15rem; }
.field-group { display: grid; gap: .4rem; }
.field-group > span { color: var(--muted); font-size: .78rem; font-weight: 650; letter-spacing: .01em; }

.input-app {
  width: 100%;
  min-height: 44px;
  padding: 0 .85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--input-bg);
  font: inherit;
  font-size: .95rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.input-app::placeholder { color: var(--faint); }
.input-app:hover:not(:disabled):not(:focus) { border-color: var(--faint); }
.input-app:focus {
  border-color: var(--fill);
  box-shadow: 0 0 0 4px var(--brand-ring);
}
.input-app:disabled { background: var(--soft); color: var(--faint); cursor: not-allowed; }

.btn-app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--btn-bg);
  box-shadow: var(--shadow);
  font: inherit;
  font-size: .88rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, background .15s, color .15s, transform .08s, box-shadow .2s;
}
.btn-app:hover:not(:disabled) { border-color: var(--faint); background: var(--soft); color: var(--ink); }
.btn-app:active:not(:disabled) { transform: translateY(1px) scale(.992); }
.btn-app:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }

.btn-app.primary {
  border-color: transparent;
  color: var(--on-fill);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fill) 88%, #fff), var(--fill));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn-app.primary:hover:not(:disabled) {
  border-color: transparent;
  color: var(--on-fill);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fill-hover) 88%, #fff), var(--fill-hover));
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* .danger : togglé par sync-room.js (bouton record, pause) */
.btn-app.danger,
button.danger {
  border-color: var(--danger-border) !important;
  color: var(--danger) !important;
  background: var(--danger-soft) !important;
}
.btn-app.danger:hover:not(:disabled),
button.danger:hover:not(:disabled) {
  border-color: var(--danger) !important;
  background: var(--danger-hover) !important;
}
#record.danger {
  border-color: var(--danger) !important;
  color: #fff !important;
  background: var(--danger) !important;
  animation: rec-pulse 1.4s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 45, 58, .45); }
  55% { box-shadow: 0 0 0 10px rgba(217, 45, 58, 0); }
}

.btn-app:focus-visible,
.input-app:focus-visible,
.header-icon:focus-visible,
a:focus-visible,
button:focus-visible,
.file:focus-within {
  outline: 3px solid var(--brand-ring);
  outline-offset: 2px;
}
.input-app:focus-visible { outline: none; }

/* ------------------------------------------------------------
   Ticket : code de salle
   ------------------------------------------------------------ */
.ticket {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
}
.code-cells { display: flex; gap: .45rem; }
.code-cell {
  display: grid;
  place-items: center;
  width: clamp(46px, 12vw, 58px);
  height: clamp(58px, 15vw, 72px);
  border: 1px solid var(--border-strong);
  border-bottom: 3px solid var(--fill);
  border-radius: 14px;
  color: var(--ink);
  background: linear-gradient(180deg, var(--surface), var(--soft));
  box-shadow: var(--shadow);
  font-family: var(--mono);
  font-size: clamp(1.55rem, 6vw, 2.1rem);
  font-weight: 700;
  animation: cell-in .45s var(--ease) backwards;
}
.code-cell:nth-child(1) { animation-delay: .02s; }
.code-cell:nth-child(2) { animation-delay: .07s; }
.code-cell:nth-child(3) { animation-delay: .12s; }
.code-cell:nth-child(4) { animation-delay: .17s; }
.code-cell:nth-child(5) { animation-delay: .22s; }
@keyframes cell-in {
  from { opacity: 0; transform: translateY(10px) scale(.9); }
  to { opacity: 1; transform: none; }
}

/* #roomCode : le JS y écrit « Code de la salle : XXXXX » */
#roomCode {
  margin-top: .7rem;
  color: var(--faint);
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}

.room-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin-top: .75rem;
}
.room-actions .btn-app { font-size: .84rem; }

/* ------------------------------------------------------------
   Zone d'envoi de fichier
   ------------------------------------------------------------ */
.file {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.25rem 1rem;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: var(--soft);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.file:hover {
  border-color: var(--fill);
  color: var(--brand);
  background: var(--brand-soft);
}
.file .file-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: 1.15rem;
  transition: transform .25s var(--ease);
}
.file:hover .file-icon { transform: translateY(-3px); }
.file input { display: none; }
.file span#fileText { font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.file:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.file:has(input:disabled):hover { border-color: var(--border-strong); color: var(--muted); background: var(--soft); }
.file:has(input:disabled):hover .file-icon { transform: none; }

.file-received {
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  background: var(--soft);
  font-size: .92rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

progress {
  width: 100%;
  height: 8px;
  margin-top: .9rem;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  accent-color: var(--fill);
  background: var(--border);
}
progress::-webkit-progress-bar { background: var(--border); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--grad); border-radius: 999px; transition: width .3s; }
progress::-moz-progress-bar { background: var(--fill); border-radius: 999px; }

/* ------------------------------------------------------------
   Lecteur
   ------------------------------------------------------------ */
.player { text-align: center; }
.track {
  display: block;
  min-height: 1.6rem;
  margin-bottom: 1.1rem;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 750;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

input[type="range"] {
  --fill-pct: 0%;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
input[type="range"]:disabled { cursor: not-allowed; opacity: .45; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--fill) 0%, var(--fill) var(--fill-pct), var(--border-strong) var(--fill-pct));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--fill);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
  transition: transform .15s var(--ease), box-shadow .15s;
}
input[type="range"]:not(:disabled):hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:not(:disabled):active::-webkit-slider-thumb { transform: scale(1.22); box-shadow: 0 0 0 6px var(--brand-ring); }
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--border-strong);
}
input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--fill);
}
input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--fill);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
input[type="range"]:focus-visible { outline: 3px solid var(--brand-ring); outline-offset: 2px; border-radius: 999px; }

.time {
  display: flex;
  justify-content: space-between;
  margin-top: .1rem;
  color: var(--faint);
  font-family: var(--mono);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}

.controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  margin-top: 1.25rem;
}
.controls .btn-app { min-height: 56px; font-size: 1rem; border-radius: 14px; }

.volume {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .75rem;
  align-items: center;
  margin-top: 1.15rem;
  color: var(--faint);
  font-size: .9rem;
}
.volume input[type="range"] { height: 24px; }
.volume input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -5px; }
.volume input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; }
#volumeValue {
  min-width: 44px;
  text-align: right;
  font-family: var(--mono);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

#enableAudio { width: 100%; margin-top: .95rem; }

/* Badge de synchro */
.badge-sync {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding: .38rem .85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--soft);
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
}
.badge-sync::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent);
  animation: sync-dot 2.2s ease-in-out infinite;
}
@keyframes sync-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ------------------------------------------------------------
   Chat (le JS injecte .message / .mine / .head / .empty)
   ------------------------------------------------------------ */
.messages {
  height: min(46vh, 380px);
  margin-top: .75rem;
  padding: .9rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--soft);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.empty {
  padding: 3rem .8rem;
  margin: 0;
  text-align: center;
  color: var(--faint);
  font-size: .92rem;
}
.message {
  width: fit-content;
  max-width: 78%;
  margin: .2rem 0;
  padding: .45rem .7rem;
  border: 1px solid var(--border);
  border-radius: 6px 16px 16px 16px;
  background: var(--message-bg);
  box-shadow: 0 1px 2px rgba(24, 24, 27, .06);
  text-align: left;
  animation: msg-in .26s var(--ease);
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.message.mine {
  margin-left: auto;
  border-color: var(--message-mine-border);
  border-radius: 16px 6px 16px 16px;
  color: var(--ink-2);
  background: var(--message-mine-bg);
}
.message.mine .head, .message.mine .ticks { color: var(--ink-2); opacity: .8; }
.message.mine .head strong { color: var(--ink); }
.message.mine p { color: var(--ink); }
.message.mine .reply-btn { color: var(--muted); }
.message .head {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: .45rem;
  margin-bottom: .12rem;
  color: var(--faint);
  font-size: .68rem;
}
.message .head strong { color: var(--brand); font-weight: 700; }
.message p {
  margin: 0;
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.38;
  overflow-wrap: anywhere;
}
.message audio { display: block; width: min(290px, 66vw); height: 40px; }
.message .ticks {
  display: block;
  margin-top: .2rem;
  color: var(--faint);
  font-size: .7rem;
  letter-spacing: -2px;
  text-align: right;
}
.message .ticks.read { color: var(--read); }
.typing-indicator {
  min-height: 1.25rem;
  margin: .35rem .15rem -.2rem;
  color: var(--muted);
  font-size: .78rem;
  font-style: italic;
}

/* ------------------------------------------------------------
   Recherche YouTube / TikTok
   ------------------------------------------------------------ */
.search-source-nav { width: min(720px, 100%); margin: 0 auto .55rem; }
.search-source-actions { display: grid; grid-template-columns: 1fr; gap: .45rem; }
.search-source-actions .btn-app, .search-source-choices .btn-app { justify-content: center; }
.search-source-choices { margin-top: .45rem; }
.search-source-choices.show, .search-source-choices.collapsing { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.search-source-choices .btn-app.active { color: var(--on-fill); border-color: transparent; background: var(--fill); }
.search-source-hidden { display: none !important; }
.youtube-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.youtube-head .card-title-app { margin-bottom: 0; }
.youtube-tools { margin-top: .75rem; }
.youtube-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; }
.youtube-results { display: grid; gap: .6rem; margin-top: .85rem; color: var(--muted); font-size: .85rem; }
.youtube-result {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: .8rem;
  align-items: center;
  padding: .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s var(--ease), box-shadow .2s;
}
.youtube-result:hover { border-color: var(--fill); background: var(--brand-soft); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.youtube-result img { display: block; width: 120px; aspect-ratio: 16 / 9; border-radius: 8px; object-fit: cover; background: var(--soft); }
.youtube-result span { display: grid; gap: .3rem; min-width: 0; }
.youtube-result strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.35;
}
.youtube-result small { color: var(--faint); }
.youtube-player { position: relative; width: 100%; margin-top: .9rem; padding-top: 56.25%; overflow: hidden; border-radius: var(--radius-sm); background: #05050a; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .5); }
.youtube-player.hidden { display: none; }
.youtube-fallback { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .6rem; padding: .65rem .8rem; border: 1px solid var(--danger-border); border-radius: var(--radius-sm); color: var(--danger); background: var(--danger-soft); font-size: .84rem; line-height: 1.45; }
.youtube-fallback .btn-app { min-height: 36px; padding: 0 .8rem; font-size: .8rem; }
.youtube-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tiktok-player { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: .9rem auto 0; overflow: hidden; border-radius: var(--radius-sm); background: #05050a; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .5); }
.tiktok-player.hidden { display: none; }
.tiktok-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-sync-toggle { position: relative; z-index: 4; display: grid; place-items: center; width: 38px; height: 38px; margin: -46px auto 8px; padding: 0; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; color: #fff; background: rgba(9, 9, 14, .4); backdrop-filter: blur(8px); box-shadow: 0 2px 12px rgba(0, 0, 0, .3); cursor: pointer; transition: background .15s, transform .15s var(--ease); }
.media-sync-toggle:hover, .media-sync-toggle:focus-visible { background: rgba(9, 9, 11, .75); transform: scale(1.06); }
.media-sync-toggle i { font-size: .8rem; }

/* Lecteur média épinglé (haut d'écran) */
.media-dock.is-playing, .media-dock.is-pinned {
  position: fixed;
  top: calc(var(--nav-h) + .5rem);
  left: 50%;
  z-index: 1050;
  width: min(720px, calc(100% - 1.5rem));
  max-height: calc(100vh - var(--nav-h) - 1rem);
  margin: 0;
  overflow-y: auto;
  transform: translateX(-50%);
  box-shadow: var(--shadow-pop);
}
#youtubeCard.is-pinned .hint, #tiktokCard.is-pinned .hint { display: none; }
#youtubeCard.is-pinned .youtube-player, #tiktokCard.is-pinned .tiktok-player { margin-top: .55rem; }
body.media-playing .page { padding-top: min(70vw, 520px); }
body[data-active-view="chat"].media-playing .page { padding-top: 0; }
.page { padding-bottom: 4rem; }
.app-view-inactive { display: none !important; }
.media-dock.is-pinned.app-view-inactive { display: block !important; }
.media-dock.is-pinned.media-background {
  position: fixed;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

/* ------------------------------------------------------------
   Docks plein écran : chat & jeux
   (hauteurs liées à la barre du bas 56px + formulaire 52px)
   ------------------------------------------------------------ */
.chat-dock { position: fixed; right: 50%; bottom: 108px; z-index: 1000; width: min(960px, 100%); height: calc(100dvh - 164px); min-height: 224px; margin: 0; overflow: hidden; padding: 0; border: 0; border-radius: 0; background: var(--surface); box-shadow: none; transform: translateX(50%); resize: none; }
.nickname-room { margin-top: .75rem; }
.chat-body { position: relative; display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; background: var(--chat-body); }
.chat-dock .messages { flex: 1; min-height: 0; height: auto; margin-top: 0; padding: calc(var(--pinned-media-height, 0px) + .5rem) .55rem 60px; border: 0; border-radius: 0; background: var(--chat-body); scroll-padding-top: calc(var(--pinned-media-height, 0px) + .5rem); }
.chat-dock .messages::-webkit-scrollbar { width: 7px; }
.chat-dock .messages::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--border-strong); }
.message.mine .ticks.read { color: var(--read); }
.chat-icon-btn { flex: none; width: 42px; min-width: 42px; padding: 0; }
.chat-icon-btn i { font-size: .95rem; }
.chat-dock .chat-form {
  position: fixed;
  right: 50%;
  bottom: 56px;
  z-index: 1040;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: .35rem;
  width: min(960px, 100%);
  height: 52px;
  margin: 0;
  padding: .35rem;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--surface);
  box-shadow: 0 -8px 24px rgba(24, 24, 27, .08);
  transform: translateX(50%);
}
.chat-dock .chat-form .input-app,
.chat-dock .chat-form .btn-app { min-height: 40px; height: 40px; }
.chat-dock .chat-form .input-app { border-radius: 999px; padding: 0 1rem; }
.chat-dock #recordTime { min-height: 1rem; margin-top: .2rem; align-self: flex-end; }

.games-dock { position: fixed; right: 50%; bottom: 56px; z-index: 1000; display: flex; flex-direction: column; gap: .5rem; width: min(960px, 100%); height: calc(100dvh - 114px); min-height: 224px; margin: 0; padding: .6rem .6rem .4rem; overflow: hidden; border: 0; border-radius: 0; background: var(--surface); box-shadow: none; transform: translateX(50%); }
.game-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.game-count { margin-left: .4rem; padding: .14rem .55rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--soft); font-size: .62rem; font-weight: 650; letter-spacing: .02em; text-transform: none; vertical-align: middle; }
.game-head .card-title-app { margin: 0; }
.game-types, .game-controls { display: flex; gap: .45rem; }
.game-types .btn-app, .game-controls .btn-app { min-height: 36px; padding: .3rem .7rem; font-size: .72rem; }
.game-messages { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5rem; padding: .65rem; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--chat-body); }
.game-messages .empty { margin: auto; color: var(--faint); font-size: .84rem; }
.game-messages .message { flex: none; }
.game-turn { min-height: .9rem; color: var(--muted); font-size: .7rem; text-align: center; }
.game-answer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; }
.game-answer .chat-icon-btn { width: 44px; min-width: 44px; }
.game-controls { justify-content: center; }

/* ------------------------------------------------------------
   File d'attente
   ------------------------------------------------------------ */
.queue-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.queue-head .card-title-app { margin: 0; }
.queue-next { min-height: 36px; padding: 0 .8rem; font-size: .8rem; }
.queue-now { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: center; margin-bottom: .6rem; padding: .6rem .7rem; border: 1px solid var(--brand-ring); border-radius: var(--radius-sm); background: var(--brand-soft); text-align: left; }
.queue-now .queue-icon { color: var(--on-fill); background: var(--fill); }
.queue-now small { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.queue-now.is-live small::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .4rem; border-radius: 50%; background: var(--ok); vertical-align: middle; animation: sync-dot 1.6s ease-in-out infinite; }
.queue-now .queue-info strong { font-size: .95rem; }
.queue-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.queue-empty { padding: 1.4rem .8rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--faint); font-size: .86rem; line-height: 1.5; text-align: center; }
.queue-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .55rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--soft);
  text-align: left;
  animation: msg-in .26s var(--ease);
}
.queue-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--brand); background: var(--brand-soft); font-size: .95rem; }
.queue-info { display: grid; gap: .15rem; min-width: 0; }
.queue-info strong { overflow: hidden; color: var(--ink); font-size: .9rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.queue-info small { color: var(--faint); font-size: .74rem; }
.queue-actions { display: flex; gap: .1rem; }
.queue-actions .btn-icon { width: 34px; height: 34px; }

.toggle-row { display: flex; align-items: center; gap: .6rem; margin-top: .85rem; color: var(--muted); font-size: .85rem; line-height: 1.4; cursor: pointer; }
.toggle-row input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--fill); cursor: pointer; }

.youtube-result-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: stretch; }
.youtube-result-row .youtube-result { min-width: 0; }
.youtube-queue-add { align-self: center; height: 44px; }
#tiktokForm { grid-template-columns: minmax(0, 1fr) auto auto; }
@media (max-width: 576px) { #tiktokForm { grid-template-columns: 1fr 1fr; } #tiktokForm .input-app { grid-column: 1 / -1; } }

/* ------------------------------------------------------------
   Barre de navigation du bas
   ------------------------------------------------------------ */
.app-footer {
  position: fixed;
  inset: auto 0 0;
  z-index: 1200;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: 56px;
  transform: translateY(var(--keyboard-offset, 0px));
  padding: 3px max(6px, env(safe-area-inset-right)) max(3px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  border-top: 1px solid var(--border);
  background: var(--nav-bg);
  box-shadow: 0 -8px 24px rgba(24, 24, 27, .06);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
}
.app-footer a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  border-radius: 10px;
  color: var(--muted);
  font-size: .6rem;
  font-weight: 650;
  letter-spacing: .01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s, background .15s;
}
.app-footer a i { font-size: .95rem; transition: transform .25s var(--ease); }
.app-footer a::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 0;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--grad);
  transform: translateX(-50%);
  transition: width .25s var(--ease);
}
.app-footer a:hover, .app-footer a:focus-visible { color: var(--ink); background: var(--brand-soft); }
.app-footer a.active { color: var(--brand); }
.app-footer a.active::before { width: 28px; }
.app-footer a.active i { transform: translateY(-1px) scale(1.08); }
.chat-unread {
  position: absolute;
  top: 2px;
  left: calc(50% + 7px);
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  color: #fff;
  background: var(--danger);
  font-size: .62rem;
  font-weight: 700;
  line-height: 1;
}
.game-unread { color: var(--on-fill); background: var(--fill); }

.message .chat-media {
  display: block;
  max-width: min(290px, 66vw);
  max-height: 260px;
  border-radius: 12px;
  object-fit: cover;
}
.message .caption { margin-top: .4rem; }

.chat-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .65rem;
  margin-top: .75rem;
}
.chat-form .attach { padding: 0 .9rem; }

/* Aperçu média avant envoi */
.media-preview {
  position: fixed;
  inset: 0;
  z-index: 3400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(6, 6, 12, .66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in .2s ease-out;
}
.media-preview.hidden { display: none; }
.media-preview-box {
  display: grid;
  gap: .8rem;
  width: min(460px, 94vw);
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  animation: pop-in .3s var(--ease);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.media-preview-stage img,
.media-preview-stage video {
  display: block;
  max-width: 100%;
  max-height: 50vh;
  margin: 0 auto;
  border-radius: 14px;
}
.media-preview-name {
  color: var(--faint);
  font-size: .8rem;
  text-align: center;
  overflow-wrap: anywhere;
}
.media-preview-actions {
  display: flex;
  gap: .65rem;
  justify-content: flex-end;
}
.voice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  margin-top: .65rem;
}
#recordTime {
  color: var(--faint);
  font-family: var(--mono);
  font-size: .78rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   Barre d'état (#status : className remplacée par le JS)
   ------------------------------------------------------------ */
#status {
  position: sticky;
  bottom: 5rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: 1.4rem;
  padding: .8rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--ink-2);
  background: var(--status-bg);
  box-shadow: var(--shadow-pop);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: .88rem;
  line-height: 1.45;
}
#status::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--faint);
  animation: sync-dot 1.6s ease-in-out infinite;
}
#status.ok {
  position: fixed;
  top: calc(var(--nav-h) + .6rem);
  right: 50%;
  bottom: auto;
  z-index: 3300;
  width: min(440px, calc(100% - 1.5rem));
  margin: 0;
  border-color: var(--ok-border);
  color: var(--ok);
  background: var(--ok-bg);
  transform: translateX(50%);
  animation: toast-in .3s var(--ease);
}
@keyframes toast-in {
  from { opacity: 0; margin-top: -10px; }
  to { opacity: 1; margin-top: 0; }
}
#status.toast-hidden { display: none; }
#status.ok::before { background: var(--ok); animation: none; }
#status.error {
  border-color: var(--danger-border);
  color: var(--danger);
  background: var(--error-bg);
}
#status.error::before { background: var(--danger); animation: none; }

/* ------------------------------------------------------------
   Accueil
   ------------------------------------------------------------ */
.hero { position: relative; padding: 3.4rem 0 1.4rem; text-align: center; }
.hero > * { position: relative; }
.hero h1 {
  font-size: clamp(2.7rem, 9.5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.05em;
}
.hero h1 .accent { color: var(--faint); }
.hero .lead-text { max-width: 52ch; margin: 1rem auto 0; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.hero .eyebrow { margin-bottom: 1.1rem; }

/* Égaliseur décoratif */
.eq {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 44px;
  margin: 0 auto 1.1rem;
}
.eq span {
  width: 5px;
  height: 100%;
  border-radius: 4px;
  background: var(--grad);
  transform-origin: bottom;
  animation: eq 1.1s ease-in-out infinite;
}
.eq span:nth-child(1) { animation-delay: -.9s; }
.eq span:nth-child(2) { animation-delay: -.5s; }
.eq span:nth-child(3) { animation-delay: -.2s; }
.eq span:nth-child(4) { animation-delay: -.7s; }
.eq span:nth-child(5) { animation-delay: -.35s; }
.eq span:nth-child(6) { animation-delay: -.85s; }
.eq span:nth-child(7) { animation-delay: -.1s; }
@keyframes eq {
  0%, 100% { transform: scaleY(.22); }
  50% { transform: scaleY(1); }
}

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.4rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-2);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: .8rem;
  font-weight: 600;
}
.chip i { color: var(--brand); font-size: .85em; }

.action-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.2rem;
}
.action-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: left;
  transition: border-color .2s, box-shadow .25s, transform .25s var(--ease);
}
.action-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad);
  opacity: 0;
  transition: opacity .25s;
}
.action-card:hover {
  border-color: var(--brand-ring);
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}
.action-card:hover::after { opacity: 1; }
.action-card .icon-tile {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 1.1rem;
  border-radius: 15px;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: 1.2rem;
  transition: transform .3s var(--ease);
}
.action-card:hover .icon-tile { transform: rotate(-6deg) scale(1.06); }
.action-card h2 {
  margin: 0 0 .45rem;
  color: var(--ink);
  font-size: 1.18rem;
  font-weight: 750;
  letter-spacing: -.025em;
}
.action-card p {
  flex: 1;
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.6;
}

/* Comment ça marche — 3 étapes */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1.1rem; }
.how-step {
  padding: 1rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.how-step b {
  display: block;
  margin-bottom: .55rem;
  color: var(--brand);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .08em;
}
.how-step h3 { margin: 0 0 .25rem; color: var(--ink); font-size: .95rem; font-weight: 700; letter-spacing: -.015em; }
.how-step p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }

.footer-note {
  margin-top: 2.4rem;
  color: var(--faint);
  font-size: .84rem;
  text-align: center;
  line-height: 1.7;
}
.footer-note a { color: var(--brand); font-weight: 600; text-decoration: none; }
.footer-note a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Entrée en cascade de l'accueil (opacité + léger décalage, sans transform sur les docks) */
.hero, .action-card, .how, .home-join, .footer-note { animation: rise .6s var(--ease) backwards; }
.action-card:nth-child(1) { animation-delay: .08s; }
.action-card:nth-child(2) { animation-delay: .16s; }
.how { animation-delay: .22s; }
.home-join { animation-delay: .28s; }
.footer-note { animation-delay: .34s; }
@keyframes rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

/* Input code (accueil + participant) */
.input-code {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  text-align: center;
}
.input-code::placeholder { letter-spacing: .02em; font-weight: 400; text-transform: none; font-family: var(--font); }

/* ------------------------------------------------------------
   Page d'aide
   ------------------------------------------------------------ */
.steps { counter-reset: step; margin-top: 1rem; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1rem;
  padding: 1.15rem 0 1.35rem 0;
}
.step + .step { border-top: 1px dashed var(--border-strong); }
.step-num {
  counter-increment: step;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--brand-ring);
  border-radius: 14px;
  color: var(--brand);
  background: var(--brand-soft);
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: 700;
}
.step-num::before { content: counter(step, decimal-leading-zero); }
.step h3 {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: .35rem 0 .4rem;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 750;
  letter-spacing: -.02em;
}
.step h3 i { color: var(--brand); font-size: .9em; }
.step p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.7; }
.step p strong { color: var(--ink-2); font-weight: 650; }
.step a { color: var(--brand); font-weight: 600; text-decoration: none; }
.step a:hover { text-decoration: underline; text-underline-offset: 3px; }
.step code, .faq code {
  padding: .14em .45em;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--brand);
  background: var(--brand-soft);
  font-family: var(--mono);
  font-size: .85em;
}

.faq .accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
  background: var(--surface);
  color: var(--ink-2);
}
.faq .accordion-item + .accordion-item { margin-top: .6rem; }
.faq .accordion-button {
  min-height: 54px;
  padding: .9rem 1.1rem;
  color: var(--ink);
  background: var(--surface);
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 650;
  box-shadow: none;
}
.faq .accordion-button::after { filter: none; opacity: .6; }
[data-theme="dark"] .faq .accordion-button::after { filter: invert(1); }
.faq .accordion-button:not(.collapsed) {
  color: var(--brand);
  background: var(--brand-soft);
  box-shadow: none;
}
.faq .accordion-button:focus { box-shadow: 0 0 0 3px var(--brand-ring); }
.faq .accordion-body { color: var(--muted); font-size: .92rem; line-height: 1.7; }

/* ------------------------------------------------------------
   Divers
   ------------------------------------------------------------ */
audio#audio { display: none; }
::selection { color: var(--on-fill); background: var(--fill); }

/* Barres de défilement */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Bascule de thème (pages sans navbar) */
.theme-toggle-fixed {
  position: fixed;
  top: .75rem;
  right: .75rem;
  z-index: 2000;
  box-shadow: var(--shadow-pop);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .how { grid-template-columns: 1fr; }
}

@media (max-width: 576px) {
  :root { --nav-h: 46px; }
  .app-nav { padding: .25rem .45rem; }
  .app-nav .container-lg { padding: 0 .4rem; }
  .app-nav .navbar-brand { font-size: .95rem; }
  .app-nav .navbar-toggler { min-height: 36px; padding: .25rem .5rem; }
  .page { padding: .9rem .65rem 3.75rem; }
  .card-app { padding: .9rem; border-radius: 16px; }
  .card-title-app { margin-bottom: .6rem; font-size: .68rem; }
  .row-inline { grid-template-columns: 1fr; }
  .room-actions { grid-template-columns: 1fr; }
  .action-cards { grid-template-columns: 1fr; margin-top: 1.6rem; }
  .action-card { padding: 1.35rem; }
  .hero { padding: 2.2rem 0 1rem; }
  .hero .lead-text { font-size: 1rem; }
  .controls .btn-app { min-height: 48px; padding: 0 .5rem; font-size: .88rem; }
  .youtube-form { grid-template-columns: 1fr; }
  .search-source-nav { margin-bottom: .45rem; }
  .header-actions { gap: .1rem; }
  .header-icon, .header-actions .theme-toggle { width: 34px; min-width: 34px; height: 34px; min-height: 34px; font-size: .8rem; }
  .chat-form, .chat-dock .chat-form { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .35rem; }
  .chat-form .btn-app { min-height: 40px; padding: 0 .5rem; font-size: 0; }
  .chat-form .btn-app i { font-size: .95rem; }
  .voice { grid-template-columns: minmax(0, 1fr) auto; }
  .youtube-result { grid-template-columns: 100px minmax(0, 1fr); }
  .youtube-result img { width: 100px; }
  .media-dock.is-playing, .media-dock.is-pinned { top: var(--nav-h); width: 100%; padding: .55rem; border-radius: 0 0 14px 14px; }
  body.media-playing .page { padding-top: 62vw; }
  .chat-dock { right: 0; bottom: 108px; width: 100%; height: calc(100dvh - 156px); min-height: 192px; border-radius: 0; transform: none; }
  .games-dock { right: 0; width: 100%; height: calc(100dvh - 110px); border-radius: 0; transform: none; }
  #recordTime { text-align: center; }
  .message { max-width: 88%; }
  .step { grid-template-columns: 38px 1fr; gap: .8rem; }
  .step-num { width: 38px; height: 38px; border-radius: 12px; font-size: .92rem; }
  .eq { height: 36px; }
}

/* ------------------------------------------------------------
   Réponses glissées (swipe-to-reply)
   ------------------------------------------------------------ */
.message { touch-action: pan-y; }
.reply-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  justify-content: space-between;
  margin-bottom: .5rem;
  padding: .55rem .8rem;
  border-left: 4px solid var(--fill);
  border-radius: 10px;
  background: var(--reply-bg);
  font-size: .86rem;
}
.reply-bar.hidden { display: none; }
.chat-dock .reply-bar { position: absolute; right: 0; bottom: 72px; left: 0; margin: 0; background: var(--surface); box-shadow: 0 -4px 14px rgba(24, 24, 27, .06); }
.reply-info {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
  overflow: hidden;
}
.reply-info strong { color: var(--brand); font-size: .85rem; }
.reply-info span { color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-quote {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin: 0 0 .5rem;
  padding: .38rem .7rem;
  border-left: 3px solid var(--fill);
  border-radius: 8px;
  background: var(--reply-bg);
  color: var(--ink-2);
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s;
}
.reply-quote:hover { background: var(--reply-bg-hover); }
.reply-quote strong { color: var(--brand); font-size: .8rem; }
.reply-quote span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.message.highlight { outline: 2px solid var(--fill); outline-offset: 2px; animation: highlight-pop 1.2s ease; }
@keyframes highlight-pop { 0% { outline-color: transparent; } 25% { outline-color: var(--fill); } 100% { outline-color: transparent; } }
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.btn-icon:hover { background: var(--brand-soft); color: var(--ink); }
.message .head { position: relative; }
.reply-btn {
  margin-left: auto;
  padding: .25rem .4rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--faint);
  font-size: .78rem;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.reply-btn:hover { color: var(--brand); background: var(--brand-soft); }

.guest-file { margin-top: .85rem; }
.youtube-result.is-cover { grid-template-columns: 56px minmax(0, 1fr); }
.youtube-result.is-cover img, .cover-placeholder { width: 56px; height: 56px; aspect-ratio: 1; border-radius: 10px; object-fit: cover; }
.cover-placeholder { display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); font-size: 1.1rem; }